/* Captain site v2 — base: tokens, reset, type, layout, pinned chrome (nav, button, demo panel), case, footer, themes */
:root{--ink:#111;--muted:#6f6f6f;--faint:#a3a3a3;--rule:#eaeaea;--block:#F6F5F8;--page:#fff;--w:800px;--card:#fff;--fill:#ECEBF0;--fill-2:#D9D8DE;--line:#E6E6E6;--ring:rgba(0,0,0,.05);--shadow:rgba(0,0,0,.05);--accent:#ff4400;--accent-mid:#ff5a1f;--accent-light:#ff8a55;--accent-deep:#f24000;--accent-tint:#ffe3d6;--accent-text:#8a2400;--accent-text-2:#b3470f;--black:#000;--white:#fff;--line-strong:#b9b9b5;--danger:#d04a4a;--danger-tint:#fdf3f3;--c-finance:#2bc5e6;--c-marketing:#ff2d8a;--c-yellow:#ffd166;--c-violet:#6b5bd6;--c-green:#1E8E3E;--c-tl-red:#ff5f57;--c-tl-yellow:#febc2e;--c-tl-green:#28c840}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--black)}
body{margin:0;background:var(--page);color:var(--ink);font:400 17px/1.6 Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
html.white{background:#fff}      /* the canvas is the page colour, so Safari tints its toolbar white, not the base grey */
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* the page is a sheet over a base layer (after sunday.ai): at the very end it narrows and lifts, the base shows through with the mark */
body{background:var(--base,#F0EFF3)}
.page{position:relative;z-index:1;background:var(--page);margin-bottom:var(--foot,60vh);transform-origin:50% 100%;transform:scale(var(--s,1));border-radius:0 0 var(--r,0px) var(--r,0px);overflow:clip}
.darkmode .page{background:var(--black)}
html{--foot:78vh}
.base{position:fixed;left:0;right:0;bottom:0;height:var(--foot,60vh);z-index:0;display:grid;grid-template-rows:1fr auto auto;padding:28px 24px 24px;background:var(--base,#F0EFF3);font-size:13.5px;line-height:1.45;letter-spacing:-.005em}   /* the feature-card type: 14/600 titles, 13.5 muted text */
.base-top{display:grid;grid-template-columns:1fr repeat(3,minmax(120px,220px));gap:12px 24px;align-items:start;margin-bottom:40px}
@media (max-width:1100px){.base-top{grid-template-columns:repeat(3,minmax(0,1fr))}.base-lead{grid-column:1/-1;margin-bottom:34px}}   /* below 1100 the newsletter takes its own row, the three columns share the width */
/* newsletter: one field, the button inside it, a line that says how rarely we write */
.base-news{display:block;margin:0;max-width:320px}   /* not the page form: no top margin, no grid gap */
.base-news-lead{margin:0 0 12px;color:var(--muted)}
.base-news-lead label{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.base-field{position:relative}
.base-field input{width:100%;box-sizing:border-box;height:42px;padding:0 48px 0 14px;border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;outline:0;transition:border-color .2s,background .2s}   /* the booking form field */
.base-field input::placeholder{color:var(--faint)}
.base-field input:focus{border-color:var(--line-strong)}
.base-field input.bad{border-color:var(--danger);background:var(--danger-tint)}
.base-field input.shake{animation:dw-shake .4s cubic-bezier(.36,.07,.19,.97)}
/* the submit: a metal ring (js/metal.js paints it) around a dark disc by night, a white one by day; the button itself is transparent on top */
.mfx{position:absolute;right:5px;top:5px;width:32px;height:32px;border-radius:50%;background:#272727;isolation:isolate;overflow:visible;pointer-events:none}
.mfx[data-theme="light"]{background:#fff}
.mfx canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;z-index:0}
.mfx-inner{position:absolute;inset:0;border-radius:50%;z-index:1;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.mfx[data-theme="light"] .mfx-inner{box-shadow:none}
.mfx::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:4;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.mfx[data-theme="light"]::after{box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.mfx-glow{position:absolute;inset:0;border-radius:50%;z-index:3;overflow:visible;mix-blend-mode:screen;opacity:.7}
.mfx[data-theme="light"] .mfx-glow{mix-blend-mode:multiply;opacity:.35}
.mfx-halo{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(255,255,255,.35) 35%,rgba(255,255,255,0) 70%);filter:blur(2px);opacity:0;will-change:transform,opacity}
.mfx[data-theme="light"] .mfx-halo{background:radial-gradient(circle,rgba(0,124,255,.9) 0,rgba(255,179,179,.5) 35%,rgba(255,255,255,0) 70%);filter:blur(2.5px) saturate(3)}
.base-field button{position:absolute;right:5px;top:5px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#f8f8f8;display:grid;place-items:center;cursor:pointer;padding:0;z-index:5;transition:transform .2s,opacity .2s}
.white .base-field button{color:#1d1d1d}
.base-field button svg{width:16px;height:16px}
.base-field button:hover{transform:scale(1.04)}
.base-field button:disabled{cursor:default}
.base-field button.sending svg{display:none}
.base-field button.sending::after{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;border-top-color:transparent;animation:nl-spin .7s linear infinite}
@keyframes nl-spin{to{transform:rotate(360deg)}}
.base-news small{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.base-news small[hidden]{display:none}
.base-news.done .base-field,.base-news.done .base-news-lead{display:none}
.base-news.done small{margin-top:0;color:var(--ink);font-size:13.5px}
.base-col{display:flex;flex-direction:column;gap:6px}
.base-col b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.base-col a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;transition:color .2s}
.base-col a svg{width:14px;height:14px;flex:none}
.base-col a:hover{color:var(--ink)}
.base-copy{margin:0;color:var(--muted)}
/* the links arrive as the base comes into view: each block a step later (--i), replayed on the way back */
.base-lead,.base-col,.base-copy{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.base.show .base-lead,.base.show .base-col,.base.show .base-copy{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.base-lead,.base-col,.base-copy{transition:none;transform:none}}
/* the full logo pressed into the base: a shade a touch darker than the base, an inner shadow from above (SVG filter), a light edge below */
.base-logo{justify-self:center;align-self:center;display:block;width:min(520px,60vw);margin:56px 0}
.base-logo svg{display:block;width:100%;height:auto;color:#E3E2E7;filter:drop-shadow(0 1px 0 rgba(255,255,255,.9))}
.darkmode .base-logo svg{color:#0B0B0D;--deboss-op:.6;filter:drop-shadow(0 1px 0 rgba(255,255,255,.07))}
html.darkmode{--base:#111113}
@media (max-width:640px){.base{padding:22px 20px 20px}.base-top{grid-template-columns:1fr 1fr;margin-bottom:28px}.base-lead{grid-column:1/-1;margin-bottom:30px}.base-logo{width:min(300px,72vw);margin:72px 0}}
@media (max-width:640px){html{--foot:100vh}}   /* the phone footer is a full screen: air above and below the logo */
/* rhythm */
section{padding:128px 0;scroll-margin-top:24px}   /* anchor jumps land just below the pinned nav, not under it */
section + section{border-top:1px solid var(--rule)}
#features{border-top:0}
#value{border-top:0;padding-top:0;scroll-margin-top:128px}   /* value follows products as one story: no divider, no double gap */
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 20px}
h1{font-size:44px;line-height:1.12;font-weight:500;letter-spacing:-.03em;margin:0 0 24px;text-wrap:balance}
h2{font-size:32px;line-height:1.18;font-weight:500;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance}
h3{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
p{margin:0 0 18px}
.lead{font-size:19px;color:var(--muted);max-width:600px}

/* faq */
details{border-top:1px solid var(--rule);padding:22px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";color:var(--faint)}
details[open] summary::after{content:"–"}
details p{margin:14px 0 0;color:var(--muted)}

/* form */
form{display:grid;gap:12px;margin-top:40px;max-width:520px}
input{font:inherit;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:var(--card)}
input:focus{outline:none;border-color:var(--ink)}
@keyframes vn-blink{ 50% { opacity: 0.25; } }

/* ---------- load-in, as on anishfn.space: each block starts blurred, transparent and 20px up, and settles into place;
   the hero staggers on load, everything below settles as it scrolls into view ---------- */
.rv{opacity:0;filter:blur(6px);transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,1,.36,1),filter .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);transition-delay:var(--rd,0s);will-change:opacity,filter,transform}
.rv.in{opacity:1;filter:blur(0);transform:none}
/* word wave: each word of a .wave block arrives 45 ms after the previous one, from blur to sharp */
.wave .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(5px);transition:opacity .7s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--rd,0s) + var(--i,0)*45ms);will-change:opacity,filter,transform}
.wave.in .w{opacity:1;filter:blur(0);transform:none}
@keyframes pb1{from{--bw1--p-:.85;--bh1--p-:.9;--bx1--p-:-14px;--by1--p-:6px}to{--bw1--p-:1.25;--bh1--p-:1.15;--bx1--p-:16px;--by1--p-:-10px}}
@keyframes pb2{from{--bw2--p-:1.2;--bh2--p-:1.1;--bx2--p-:22px;--by2--p-:-8px}to{--bw2--p-:.8;--bh2--p-:.85;--bx2--p-:-30px;--by2--p-:14px}}
@keyframes pb3{from{--bw3--p-:.9;--bh3--p-:1.2;--bx3--p-:-10px;--by3--p-:-20px;--bgh--p-:.95}to{--bw3--p-:1.3;--bh3--p-:.9;--bx3--p-:12px;--by3--p-:18px;--bgh--p-:1.1}}
@keyframes pbop{0%{--bop-tl--p-:.95;--bop-tr--p-:.55;--bop-bl--p-:.7;--bop-br--p-:.9}50%{--bop-tl--p-:.6;--bop-tr--p-:.95;--bop-bl--p-:.95;--bop-br--p-:.55}100%{--bop-tl--p-:.8;--bop-tr--p-:.7;--bop-bl--p-:.55;--bop-br--p-:1}}
.tk{position:absolute;display:block}
.tt{top:-24px;width:1px;height:24px;background:linear-gradient(to bottom,transparent,var(--fill-2))}
.tb{bottom:-24px;width:1px;height:24px;background:linear-gradient(to top,transparent,var(--fill-2))}
.sl{left:-24px;width:24px;height:1px;background:linear-gradient(to right,transparent,var(--fill-2))}
.sr{right:-24px;width:24px;height:1px;background:linear-gradient(to left,transparent,var(--fill-2))}

/* ---------- case block: photo, name, role, the dealer's own sentence, one number ---------- */
/* brand logos: one-colour masks in the current ink. Add a brand = one svg/png in img/ + one line here; use as <i class="logo logo-x">.
   The mask urls live in this stylesheet on purpose: a url() inside an inline custom property resolves against the stylesheet, not the page. */
.logo{display:block;background:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:left center;mask-size:contain;mask-repeat:no-repeat;mask-position:left center}
.logo-mb{-webkit-mask-image:url(../img/mercedes-benz.svg?v=4);mask-image:url(../img/mercedes-benz.svg?v=4)}   /* the 2025 horizontal lockup, from Wikimedia Commons, public domain */
.logo-volvo{-webkit-mask-image:url(../img/volvo.svg?v=2);mask-image:url(../img/volvo.svg?v=2)}   /* Volvo Spread Word Mark 2025, from Volvo Cars media */
.logo-lada{-webkit-mask-image:url(../img/lada.png?v=2);mask-image:url(../img/lada.png?v=2)}   /* horizontal lockup: emblem left, wordmark right */
.trust-logo{-webkit-mask-position:center;mask-position:center}
/* case cards, the standard (see CASE_CARDS.md), after the Figma frame 2047:515: dark 752×486 cards in a row; the next one peeks at the
   right, dimmed, and a click brings it into place. Geometry is in container units below 760 px, so the phone keeps the same composition. */
.case-track{--g:max(24px,calc(50vw - 376px));display:flex;gap:24px;margin:48px calc(-1 * var(--g)) 0;padding:0 var(--g);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--g);scrollbar-width:none}   /* runs edge to edge; --g is the gutter to the wrap edge (main.js measures it exactly), so a card always snaps to where the first one stood */
.case-track::-webkit-scrollbar{display:none}
.case-card{--px:-169;position:relative;flex:0 0 auto;width:min(752px,calc(100vw - 64px));scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-start;min-height:486px;padding:63px 44px 43px 292px;border-radius:14px;background:#ABABAB;color:#F5F5F7;overflow:hidden}   /* light theme: the grey Eugene picked; night: the dark card */
.darkmode .case-card{background:#1B1B1B}
/* scroll choreography: --t is 0 for the card in place and 1 a card-width away (main.js). A waiting card is darkened and a touch smaller,
   its portrait drifts a little, so the row breathes as it moves */
.case-card::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(.6 * var(--t,0));pointer-events:none}
.case-track .case-card{transform:scale(calc(1 - .05 * var(--t,0)));transform-origin:50% 100%;will-change:transform}
.case-track .case-card:not(.is-on){cursor:pointer}
.case-track .case-media{transform:translateX(calc(var(--t,0) * 28px));will-change:transform}
.case-track .case-card:not(.seen) .wave .w{opacity:0;filter:blur(10px);transform:translateY(5px)}   /* a card never yet in front of the user holds its text; once seen it keeps it */
.case-who{transition:opacity .6s cubic-bezier(.22,1,.36,1) .9s,transform .6s cubic-bezier(.22,1,.36,1) .9s}
.case-track .case-card:not(.seen) .case-who{opacity:0;transform:translateY(8px);transition-delay:0s}
@media (prefers-reduced-motion:reduce){.case-track .case-card{transform:none}.case-track .case-media{transform:none}}
/* pager under the cards: a quiet pill of dots, the current one stretched; the row also moves on its own every 5 s */
.case-dots{display:flex;justify-content:center;margin-top:24px}
.case-dots span{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:999px;background:var(--block);box-shadow:0 0 0 1px var(--ring)}
.case-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--faint);cursor:pointer;transition:width .45s cubic-bezier(.2,.7,.2,1),background .3s}
.case-dots button.on{width:34px;background:var(--muted)}
.case-dots button:hover{background:var(--muted)}
.case-media{position:absolute;left:calc(var(--px) * 1px);bottom:0;width:612px;height:457px;margin:0;pointer-events:none}   /* --px on the card shifts a wider subject so the frame edge does not cut it */
.case-media picture,.case-media img{display:block;width:100%;height:100%}
.case-media img{object-fit:contain;object-position:50% 100%}
.case-brand{height:36px;width:204px;color:#fff;margin-bottom:69px}
.case-brand.logo-volvo{height:18px;width:200px;margin:9px 0 78px}   /* the wordmark reads heavier, so it runs smaller */
.case-quote{position:relative;margin:0 0 22px;font-family:"EB Garamond",Garamond,"Cormorant Garamond",Georgia,serif;font-size:21px;line-height:30px;letter-spacing:0;color:#fff;text-wrap:pretty}
.case-who{position:relative;margin:auto 0 0;font-size:13.5px;line-height:1.45}
.case-who b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#fff;margin-bottom:4px}   /* the feature-card title */
.case-who span{color:rgba(235,235,245,.6)}
@media (max-width:760px){
  /* the same composition, every length a share of the card width (percent paddings and offsets resolve against the card) */
  .case-card{width:calc(100vw - 88px);min-height:calc((100vw - 88px) * .646);padding:8.4% 5.8% 5.7% 38.8%;border-radius:12px}   /* narrower than the screen: the next card shows at the right edge */   /* the 752×486 ratio as a floor (the card is 100vw - 64px wide); longer text lets it grow */
  .case-media{left:calc(var(--px) / 752 * 100% - 8.14%);width:97.7%;height:auto;aspect-ratio:612/457}   /* 20% larger than the desktop proportion, scaled about the same centre */
  .case-brand{height:auto;width:min(50%,120px);aspect-ratio:204/36;margin-bottom:max(14px,5vw)}
  .case-brand.logo-volvo{width:min(38%,90px);aspect-ratio:524/45.5;margin:1% 0 max(16px,5.6vw)}
  .case-quote{font-size:max(13.5px,2.8vw);line-height:1.4;margin-bottom:14px}
  .case-who{font-size:11.5px;line-height:1.4}
  .case-who b{font-size:12.5px;margin-bottom:2px}
}
/* ---------- the one call to action: pinned top right, white over the black hero, black over the white page ---------- */
.cta{position:fixed;top:20px;right:24px;z-index:100;font-size:14px;font-weight:500;letter-spacing:-.01em;padding:7px 13px;border-radius:999px;background:var(--white);color:var(--black);text-decoration:none;transition:background .25s,color .25s}
.cta.on-white{background:var(--black);color:var(--white)}
.cta{transition:background .25s,color .25s,opacity .3s}
.cta.hidden{opacity:0;pointer-events:none}

/* ---------- Book a demo: a panel slides in from the right (same as the careers site), soft open/close tones ---------- */
.dw-backdrop{position:fixed;inset:0;background:rgba(17,17,17,.34);opacity:0;transition:opacity .28s ease;z-index:140}
.dw-backdrop.open{opacity:1}
.dw{position:fixed;top:10px;right:10px;bottom:10px;width:440px;max-width:calc(100vw - 20px);z-index:150;background:var(--card);border-radius:16px;box-shadow:0 18px 60px rgba(17,17,17,.16);transform:translateX(calc(100% + 20px));transition:transform .32s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;overflow-y:auto;padding:24px 26px 28px;color:var(--ink);letter-spacing:-.01em}
.dw.open{transform:translateX(0)}
.dw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dw-title{font-size:20px;font-weight:600;letter-spacing:-.02em}
.dw-close{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--block);color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.dw-close svg{width:26px;height:26px;display:block}
.dw-close:hover{background:var(--fill);color:var(--ink)}
.dw-form{display:flex;flex-direction:column;gap:14px}
.dw-row2{display:flex;gap:12px}
.dw-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.dw-field label{font-size:12px;color:var(--muted)}
.dw-form input,.dw-form select,.dw-form textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;width:100%;-webkit-appearance:none;appearance:none}
.dw-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:32px}
.dw-form ::placeholder{color:rgba(0,0,0,.3);opacity:1}
.darkmode .dw-form ::placeholder{color:rgba(255,255,255,.3)}
.dw-form input:focus,.dw-form select:focus,.dw-form textarea:focus{outline:none;border-color:var(--line-strong)}
.dw-form .bad{border-color:var(--danger);background:var(--danger-tint)}
.dw-form .shake{animation:dw-shake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes dw-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.dw-form textarea{min-height:84px;resize:vertical;line-height:1.5}
.dw-submit{align-self:flex-start;display:inline-flex;align-items:center;cursor:pointer;font:inherit;font-size:14px;font-weight:500;background:var(--black);color:var(--white);border:0;padding:10px 18px;border-radius:999px;transition:opacity .15s;margin-top:4px}
.dw-submit:hover{opacity:.9}
.dw-submit:disabled{opacity:.5;cursor:default}
.dw-legal{font-size:11px;line-height:1.45;color:var(--muted);margin:0}
.dw-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;opacity:0;transform:scale(.94)}
.dw-done.show{animation:dw-pop .4s cubic-bezier(.22,1,.36,1) forwards}
@keyframes dw-pop{to{opacity:1;transform:none}}
.dw-check path{stroke-dasharray:40;stroke-dashoffset:40}
.dw-done.show .dw-check path{animation:dw-draw .5s .15s cubic-bezier(.22,1,.36,1) forwards}
@keyframes dw-draw{to{stroke-dashoffset:0}}
.dw-done-t{margin:6px 0 0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.dw-done-s{margin:0;font-size:14px;color:var(--muted);max-width:300px;line-height:1.45}
.dw.is-done .dw-head,.dw.is-done .dw-form{display:none}
/* the skill panel: the demo drawer with structured content. Type on a 4 px rhythm, everything on the system tokens */
.dw-skill{overflow:auto;overscroll-behavior:contain;padding-top:24px}
/* the head collapses to the close button, which sits inside the hero card */
.dw-skill .dw-head{position:absolute;top:10px;left:10px;right:10px;height:0;margin:0;z-index:2}
.dw-skill .dw-close{position:absolute;top:8px;right:8px}
.sk-body{display:flex;flex-direction:column;gap:40px;padding-bottom:8px}
/* the hero card hugs the panel: 10 px from the top and the sides */
.sk-card{position:relative;margin:0;padding:8px 0 0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;color:var(--ink)}
.sk-card .tile{position:relative;width:96px;height:96px;margin:0 0 0 -10px}
.sk-card b{font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin-top:28px}   /* room between the tile and the name */
.sk-card p{margin:0;font-size:15px;line-height:1.55;color:var(--muted);max-width:340px}
.sk-sec .eyebrow{margin-bottom:16px;color:var(--ink)}
/* what it does: a stack of action pills, after the Siri suggestions list. Each pill: a small tile in the skill colour, the verb */
.sk-pills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.sk-pills li{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;background:var(--block);font-size:14px;line-height:1.35;letter-spacing:-.005em;color:var(--ink)}
.sk-pic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:var(--black);flex:0 0 auto}   /* в тёмной теме кружок пастельный (--cd), знак на нём тёмный; в светлой цвет насыщенный (--cl) и знак белый */
html.white .sk-pic{color:var(--white)}
.sk-pic svg{width:16px;height:16px}
/* case picker: a segmented control after Apple's lens picker. Dark track, the chosen segment is a light pill that slides */
.sk-tabs{position:relative;display:flex;padding:4px;margin-bottom:12px;border-radius:999px;background:var(--block)}
.sk-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:var(--card);transition:left .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1)}
.sk-tab{position:relative;z-index:1;flex:1 1 auto;min-width:0;font:500 12.5px/1 Inter,system-ui,sans-serif;letter-spacing:-.01em;padding:10px 8px;border:0;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.sk-tab:hover{color:var(--ink)}
.sk-tab.on{color:var(--ink)}
.darkmode .sk-thumb{background:#F5F5F7}
.darkmode .sk-tab.on{color:#000}
.sk-chat{display:flex;flex-direction:column;gap:12px;height:340px;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:18px;border-radius:16px;background:var(--block)}
.sk-chat::-webkit-scrollbar{display:none}
.sk-row{display:flex;gap:10px;align-items:flex-start;max-width:94%}
.sk-row:has(.sk-status){align-items:center}
.sk-bot{display:grid;place-items:center;width:22px;height:22px;color:var(--ink);flex:0 0 auto}   /* the mark alone, in ink, no circle */
.sk-bot svg{display:block;width:18px;height:18px;overflow:visible}
.sk-msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;letter-spacing:-.005em;animation:sk-in .35s cubic-bezier(.2,.7,.2,1) both}
.sk-msg.in{align-self:flex-end;background:var(--fill);color:var(--ink);border-bottom-right-radius:6px}
.sk-msg.out{padding:2px 4px 0;background:none;color:var(--ink)}   /* Captain speaks plainly, the customer is in a bubble */
.sk-join{align-self:center;font-size:11.5px;color:var(--faint);padding:2px 0;animation:sk-in .3s both}
.sk-who{display:grid;place-items:center;width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--fill);color:var(--muted);font-size:10.5px;font-weight:600;line-height:1}
.sk-humwrap{display:flex;flex-direction:column;gap:3px;min-width:0}
.sk-humname{font-size:10.5px;color:var(--faint);padding-left:4px}
.sk-msg.hum{padding:2px 4px 0;background:none;color:var(--ink)}   /* сотрудник говорит так же прямо, как Капитан, но под своим именем */
.sk-status{padding:0 4px;font-size:13px;line-height:24px;background:linear-gradient(90deg,var(--muted) 0%,var(--ink) 50%,var(--muted) 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sk-in .3s both,sk-shine 1.8s linear infinite}
@keyframes sk-shine{to{background-position:-200% 0}}
@keyframes sk-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sk-add{align-self:flex-start;margin-top:-8px}
@media (prefers-reduced-motion:reduce){.sk-msg,.sk-status{animation:none}.sk-status{color:var(--muted);background:none}}

/* ---------- ?white: the same page with a white hero and the white metal spin ---------- */
.white .cta{background:var(--black);color:var(--white)}

/* ---------- section links, top left: quiet until hovered; they flip with the button when the black hero scrolls away ---------- */
/* the menu: invisible on the plain hero ground, a translucent blurred pill once content scrolls under it. No border in either state */
.nav{position:fixed;top:20px;left:20px;z-index:100;display:flex;align-items:center;gap:2px;height:36px;padding:0 6px;border-radius:999px;background:transparent;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);transition:background .3s}
.nav.glass{background:rgba(28,28,30,.66)}
.nav a{font-family:Inter,-apple-system,system-ui,sans-serif;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.14px;text-decoration:none;color:rgba(255,255,255,.6);padding:7px 10px;border-radius:999px;transition:color .2s,background .2s}
.nav a:hover{color:var(--white);background:rgba(255,255,255,.08)}
.white .nav.glass{background:rgba(255,255,255,.72)}
.white .nav a{color:rgba(0,0,0,.55)}
.white .nav a:hover{color:var(--black);background:rgba(0,0,0,.05)}
.nav .nav-home{display:grid;place-items:center;padding:7px 10px}
.nav-burger{display:none}   /* the mark is a menu item like the others: same colour, same spacing */
.nav .nav-faq{display:none}   /* FAQ lives in the mobile sheet only */
.nav .nav-home svg{width:16px;height:16px;overflow:visible}
.nav a.is-on{color:var(--white);background:rgba(255,255,255,.12)}
.white .nav a.is-on{color:var(--black);background:rgba(0,0,0,.07)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav.glass{background:rgba(28,28,30,.94)}.white .nav.glass{background:rgba(255,255,255,.94)}}

/* ---------- night: Apple-style dark theme. Base black, surfaces step up in grey as they rise (#1C1C1E, #2C2C2E, #3A3A3C),
   text in label tiers, separators translucent, the orange a touch lighter so it reads on black. Photos are never inverted. ---------- */
html.darkmode{background:#000;--page:#000;--block:#1C1C1E;--card:#2C2C2E;--fill:#3A3A3C;--fill-2:#48484A;--line:rgba(84,84,88,.65);--ring:rgba(255,255,255,.07);--shadow:rgba(0,0,0,.5);--ink:#F5F5F7;--muted:rgba(235,235,245,.6);--faint:rgba(235,235,245,.3);--rule:rgba(84,84,88,.6);--accent-tint:rgba(255,95,40,.22);--accent-text:#FFB48F;--accent-text-2:#FF9A6A;--danger-tint:rgba(255,69,58,.14);--danger:#FF453A;--line-strong:rgba(235,235,245,.35)}
.darkmode body{background:var(--base);color:var(--ink)}   /* the body is the base layer: the sheet (.page) carries the black */
.darkmode .cta.on-white{background:#F5F5F7;color:var(--black)}

/* the two inline SVG scenes carry their light fills as attributes; in the dark they follow the same tokens */
.darkmode .dw{box-shadow:0 18px 60px rgba(0,0,0,.6)}
.darkmode .dw-form input,.darkmode .dw-form select,.darkmode .dw-form textarea{background:#1C1C1E}
.darkmode .dw-submit{background:#F5F5F7;color:var(--black)}
.darkmode .dw-backdrop{background:rgba(0,0,0,.6)}
.darkmode .dw-form .bad{background:rgba(255,69,58,.14);border-color:var(--danger)}

@media (max-width:640px){
  .quote{grid-template-columns:1fr;gap:18px;padding:22px}
  .q-photo{width:64px;height:64px}
  .cta{top:14px;right:16px;font-size:13px;padding:6px 11px}
  section{padding:88px 0}
  h1{font-size:34px}
  h2{font-size:27px}
}

@media (prefers-reduced-motion:reduce){
  .rv,.wave .w{opacity:1;filter:none;transform:none;transition:none}
}

@media (max-width:480px){
  .dw-row2{flex-direction:column}
}

@media (max-width:760px){
  /* the same links, folded under two lines. Open, the menu takes the screen the way apple.com does: frosted sheet, big links, one after another */
  .nav{flex-wrap:wrap;gap:0;padding:0;transition:background .3s}
  .nav .nav-home{display:none}   /* no mark on small screens: the pill is the burger alone */
  .nav .nav-faq{display:none}
  .nav.open .nav-faq{display:block}
  .nav a:not(.nav-home){display:none;order:2;flex:0 0 100%;padding:13px 0;font-size:19px;font-weight:500;letter-spacing:-.015em;line-height:1.2;border-radius:0;border-bottom:1px solid rgba(255,255,255,.1);color:var(--white)}
  .nav-burger{display:grid;order:1;place-content:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;color:rgba(255,255,255,.7)}
  .white .nav-burger{color:rgba(0,0,0,.6)}
  .nav-burger svg{width:24px;height:24px;grid-area:1/1;transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
  .nav-burger .i-close{opacity:0;transform:rotate(-90deg) scale(.8)}
  .nav.open .nav-burger{color:var(--white);width:44px;height:44px}
  .white .nav.open .nav-burger{color:var(--ink)}
  .nav.open .nav-burger svg{width:28px;height:28px}
  .nav.open .nav-burger .i-menu{opacity:0;transform:rotate(90deg) scale(.8)}
  .nav.open .nav-burger .i-close{opacity:1;transform:none}
  /* open, the sheet centres the links on the screen, both ways */
  .nav.open{position:fixed;inset:0;width:auto;height:auto;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:0;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .white .nav.open{background:rgba(255,255,255,.95)}
  .nav.open .nav-burger{position:fixed;top:18px;left:18px}   /* the close sits where the burger was, not across the screen */
  .nav.open a:not(.nav-home){display:block;flex:0 0 auto;width:auto;padding:12px 0;text-align:center;font-size:26px;font-weight:500;letter-spacing:-.02em;border:0;opacity:0;transform:translateY(-10px);animation:nav-in .45s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(60ms + var(--i,0) * 45ms)}
  .nav.open a:not(.nav-home):first-of-type{margin-top:0}
  .nav.open a:not(.nav-home):hover,.nav.open a.is-on{background:transparent;color:var(--white)}
  .white .nav.open a:not(.nav-home){color:var(--ink)}
  .white .nav.open a:not(.nav-home):hover,.white .nav.open a.is-on{color:var(--black)}
  .cta{top:20px;right:20px;height:36px;display:inline-flex;align-items:center;padding:0 13px}
  html.menu-open,html.menu-open body{overflow:hidden}
  html.menu-open .cta{opacity:0;pointer-events:none}
  @keyframes nav-in{to{opacity:1;transform:none}}
}