/* Case page Untype. Scoped to .page-untype; the shared header, footer and contact block stay in site.css.
   Palette and pill follow the product: paper #f5f3ed, graphite #252720, terracotta #c44229, sage #e4eacb,
   olive pill #252b20. Georgia italic only for short editorial phrases, as on untype.ru.
   Shape rule: windows 14px, cards 18px, controls and the pill are pills. */
.page-untype{
 --ux-paper:#f5f3ed;--ux-ink:#252720;--ux-muted:#707169;--ux-line:#d8d9cf;--ux-red:#c44229;--ux-red-ink:#a8361f;
 --ux-lime:#e4eacb;--ux-lime-2:#d6ddb4;--ux-olive:#252b20;--ux-olive-2:#2f3629;--ux-sage:#949e7c;--ux-rec:#e1745c;
 --ux-card:#fbfaf6;--ux-serif:Georgia,'Times New Roman',serif;
 --ux-ease-out:cubic-bezier(.23,1,.32,1);--ux-ease-io:cubic-bezier(.77,0,.175,1);
 --ux-shadow:0 40px 80px -46px rgba(37,43,32,.55),0 0 0 1px rgba(37,39,32,.07);
 overflow-x:clip
}
.page-untype main{overflow-x:clip}
.ux-serif{font-family:var(--ux-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.ux-red{color:var(--ux-red)}

/* ───────── Hero ───────── */
.ux-hero{padding:26px 0 clamp(70px,9vw,120px)}
.ux-hero .back-link{margin-bottom:18px}
.ux-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center;min-height:min(720px,calc(100svh - 240px))}
.ux-kicker{font-size:15px;color:var(--muted);margin-bottom:22px}
.ux-display{font-size:clamp(46px,5.8vw,92px);line-height:.98;letter-spacing:-.055em;margin:0}
.ux-display .ux-serif{display:block;margin-top:.1em;font-size:.66em;letter-spacing:-.02em;color:var(--ux-red);padding-bottom:.06em}
.ux-hero-lead{font-size:clamp(19px,1.55vw,22px);line-height:1.55;max-width:33ch;margin-top:28px}
.ux-hero-meta{display:flex;flex-wrap:wrap;gap:18px 40px;margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.ux-hero-meta dt{font-size:13px;color:var(--muted);line-height:1.4}
.ux-hero-meta dd{margin:4px 0 0;font-size:15.5px;font-weight:600;line-height:1.45}
.ux-hero-meta .text-link{padding:0;gap:8px;font-size:15.5px}
.ux-hero-meta .text-link .icon{width:17px;height:17px}

/* Desktop stage: a chat window where the dictated text lands */
.ux-stage{position:relative;padding:clamp(22px,3vw,40px);border-radius:28px;background:var(--ux-lime);overflow:hidden}
.ux-stage::before{content:'';position:absolute;inset:-30% -20% auto auto;width:70%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(37,43,32,.12);box-shadow:0 0 0 60px rgba(37,43,32,.035),0 0 0 120px rgba(37,43,32,.025)}
.ux-window{position:relative;border-radius:14px;background:var(--ux-card);box-shadow:var(--ux-shadow);overflow:hidden}
.ux-window-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #ebe9e1;font-size:13px}
.ux-window-bar i{width:10px;height:10px;border-radius:50%;background:#dcdad0}
.ux-window-bar b{margin-left:6px;font-weight:600}
.ux-window-bar span{margin-left:auto;color:var(--ux-muted);font-size:12px}
.ux-chat{display:grid;gap:12px;padding:18px 18px 16px}
.ux-chat-head{display:flex;align-items:center;gap:12px}
.ux-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e9e7de;font-weight:600}
.ux-chat-head p{display:grid;font-size:15px;line-height:1.25;font-weight:600}
.ux-chat-head small{font-size:12.5px;color:var(--ux-muted);font-weight:400}
.ux-bubble{justify-self:start;max-width:80%;padding:10px 14px;border-radius:14px 14px 14px 4px;background:#efede5;font-size:15px;line-height:1.45}
.ux-input{position:relative;min-height:96px;padding:14px 52px 14px 16px;border-radius:14px;border:1px solid #dedcd3;background:#fff;font-size:16px;line-height:1.5;transition:box-shadow .3s ease,border-color .3s ease}
.ux-input::after{content:'';position:absolute;right:14px;bottom:12px;width:32px;height:32px;border-radius:50%;background:#e7e5dc}
.ux-input [data-dictation-slot]:empty::before{content:'';display:inline-block;width:2px;height:1.2em;vertical-align:-.2em;background:var(--ux-red);animation:ux-caret 1s steps(1) infinite}
.ux-input.is-inserted{border-color:#c9d19e;box-shadow:0 0 0 4px rgba(228,234,203,.9)}
.ux-input.is-inserted [data-dictation-slot]{animation:ux-insert .45s var(--ux-ease-out)}
.ux-chat-note{font-size:12.5px;color:var(--ux-muted)}
@keyframes ux-caret{50%{opacity:0}}
@keyframes ux-insert{from{background:var(--ux-lime)}}
.ux-stage-pill{margin:18px auto 0;display:flex;justify-content:center}
.ux-keys{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:13px;color:var(--ux-muted)}
kbd.ux-kbd{display:inline-block;padding:3px 9px;border-radius:7px;background:#fff;box-shadow:inset 0 -2px 0 #d8d6cc,0 0 0 1px #d8d6cc;font:600 13px/1.4 inherit;color:var(--ux-ink)}

/* The pill (OverlayRenderer: 400 × 52, radius 26, bars 3 × 19 with 2 px gaps, Golos/Manrope 14 px) */
.ux-pill{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:min(400px,calc(100vw - 32px));height:52px;padding:0 11px 0 18px;border-radius:26px;background:#252b20;color:#f5f3ed;box-shadow:0 0 0 1px rgba(228,234,203,.39),0 14px 34px -12px rgba(0,0,0,.45);font-size:14px;line-height:1.2;user-select:none}
.ux-pill-main{display:grid;grid-template-columns:43px minmax(0,1fr);gap:12px;align-items:center;height:100%;min-width:0;padding:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;border-radius:20px}
.ux-pill-main:focus-visible,.ux-pill-buttons button:focus-visible{outline:2px solid #e4eacb;outline-offset:3px}
.ux-pill-visual{position:relative;height:30px;display:flex;align-items:center}
.ux-pill-bars{display:flex;align-items:flex-end;gap:2px;height:19px;margin-top:-5px}
.ux-pill-bars i{width:3px;height:19px;border-radius:2px;background:#949e7c;transform:scaleY(.158);transform-origin:bottom;transition:background-color .2s ease}
.ux-pill[data-state=listening] .ux-pill-bars i{background:#e4eacb}
.ux-pill-icon{position:absolute;left:14px;top:50%;width:15px;height:15px;margin-top:-7.5px;opacity:0}
.ux-pill-spin{border:1.9px solid transparent;border-top-color:#f5f3ed;border-right-color:#f5f3ed;border-left-color:#f5f3ed;border-radius:50%;animation:ux-spin .9s linear infinite}
.ux-pill-check{border:0}
.ux-pill-check::before{content:'';position:absolute;left:3px;top:1px;width:5px;height:9px;border:solid #e4eacb;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.ux-pill[data-state=processing] .ux-pill-bars,.ux-pill[data-state=success] .ux-pill-bars,.ux-pill[data-state=clipboard] .ux-pill-bars{opacity:0}
.ux-pill[data-state=processing] .ux-pill-spin,.ux-pill[data-state=success] .ux-pill-check,.ux-pill[data-state=clipboard] .ux-pill-check{opacity:1}
.ux-pill-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500}
.ux-pill[data-state=idle] .ux-pill-text{color:rgba(245,243,237,.78)}
.ux-pill.is-chapter .ux-pill-text{color:#e4eacb;animation:ux-chapter .5s var(--ux-ease-out)}
@keyframes ux-chapter{from{opacity:0;transform:translateY(6px)}}
.ux-pill-buttons{display:flex;gap:8px}
.ux-pill-buttons button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(228,234,203,.08);color:#f5f3ed;transition:background-color .15s ease,transform .12s ease}
.ux-pill-buttons button:active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){.ux-pill-buttons button:hover{background:rgba(228,234,203,.16)}}
.ux-pill-buttons [data-pill-stop]::before{content:'';width:10px;height:10px;border-radius:2px;background:#e1745c}
.ux-pill[data-state=idle] [data-pill-stop]::before,.ux-pill[data-state=success] [data-pill-stop]::before,.ux-pill[data-state=clipboard] [data-pill-stop]::before{width:0;height:0;border-radius:0;background:none;border-left:9px solid #e1745c;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.ux-pill[data-state=processing] [data-pill-stop]{visibility:hidden}
.ux-pill-buttons [data-pill-close]::before,.ux-pill-buttons [data-pill-close]::after{content:'';position:absolute;width:12px;height:1.8px;border-radius:1px;background:#f5f3ed;transform:rotate(45deg)}
.ux-pill-buttons [data-pill-close]{position:relative}
.ux-pill-buttons [data-pill-close]::after{transform:rotate(-45deg)}
.ux-pill-progress{position:absolute;left:17px;right:17px;bottom:3.5px;height:2.5px;border-radius:2px;background:rgba(148,158,124,.16);overflow:hidden;pointer-events:none}
.ux-pill-progress::before{content:'';position:absolute;inset:0;background:#949e7c;transform:scaleX(var(--read,0));transform-origin:left;transition:transform .5s var(--ux-ease-out)}
.ux-pill[data-state=listening] .ux-pill-progress::before{background:#e4eacb;transform:scaleX(var(--rec,0));transition:transform 3.6s linear}
@keyframes ux-spin{to{transform:rotate(360deg)}}
.ux-dock{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;transform:translateX(-50%);transition:opacity .25s ease,transform .25s var(--ux-ease-out)}
.ux-dock[hidden],html:not(.js) .ux-dock{display:none}
body.page-untype{padding-bottom:84px}
.ux-dock .ux-pill{width:min(400px,calc(100vw - 24px))}
.ux-dock .ux-pill[data-tone=dark]{box-shadow:0 0 0 1px rgba(228,234,203,.55),0 14px 34px -12px rgba(0,0,0,.6)}

/* ───────── Sections ───────── */
.ux-chapter{padding:clamp(90px,11vw,150px) 0;scroll-margin-top:100px}
.ux-chapter+.ux-chapter:not(.ux-dark){border-top:1px solid var(--line)}
.ux-head{max-width:920px;margin-bottom:clamp(44px,5.5vw,76px)}
.ux-head h2{font-size:clamp(36px,5.1vw,74px);line-height:1.02;letter-spacing:-.055em;max-width:20ch;text-wrap:balance}
.ux-head h2 .ux-serif{color:var(--ux-red);letter-spacing:-.02em;font-size:.9em}
.ux-lede{font-size:clamp(18px,1.45vw,21px);line-height:1.62;color:var(--muted);max-width:62ch;margin-top:26px}
.ux-dark{background:var(--ux-olive);color:var(--ux-paper)}
.ux-dark .ux-lede,.ux-dark .ux-note,.ux-dark figcaption{color:rgba(245,243,237,.72)}
.ux-dark .ux-head h2 .ux-serif{color:#e9a08f}
.ux-note{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:72ch;margin-top:18px}
.ux-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);margin:clamp(40px,5vw,64px) 0 0;padding:0}
.ux-facts li{font-size:16px;line-height:1.6;color:var(--muted)}
.ux-facts b{display:block;margin-bottom:6px;color:var(--ink);font-size:19px;letter-spacing:-.02em}
.ux-dark .ux-facts li{color:rgba(245,243,237,.7)}
.ux-dark .ux-facts b{color:var(--ux-paper)}
.ux-shot{border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--ux-shadow)}
.ux-shot img{width:100%}
.ux-shot-caption{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* Problem board with the presentation video */
.ux-problem{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:clamp(40px,6vw,100px);align-items:center}
.ux-pains{list-style:none;display:grid;gap:26px;margin:44px 0 0;padding:0}
.ux-pains li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;font-size:clamp(20px,1.8vw,26px);line-height:1.3;letter-spacing:-.02em}
.ux-pains li span{font-size:13px;color:rgba(245,243,237,.5);font-variant-numeric:tabular-nums}
.ux-pains em{font-family:var(--ux-serif);color:#e9a08f}
.ux-phone{position:relative;justify-self:center;width:min(100%,330px);padding:10px;border-radius:46px;background:#151812;box-shadow:0 50px 90px -40px rgba(0,0,0,.7),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.ux-phone video,.ux-phone img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:36px;background:#1b1f17}
.ux-phone-caption{margin-top:16px;text-align:center;font-size:14px;color:rgba(245,243,237,.6)}

/* Hotkey lab */
.ux-lab{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(26px,4vw,52px);border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ux-modes{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:#eceae2}
.ux-modes button{padding:10px 18px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted);transition:background-color .2s ease,color .2s ease,transform .12s ease}
.ux-modes button[aria-pressed=true]{background:var(--ux-ink);color:var(--ux-paper)}
.ux-modes button:active{transform:scale(.97)}
.ux-key{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;margin-top:26px;padding:26px 20px;border-radius:22px;background:var(--ux-paper);box-shadow:inset 0 -5px 0 #dedcd2,0 0 0 1px #dedcd2;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.02em;color:var(--ux-ink);touch-action:none;transition:transform .08s ease,box-shadow .08s ease}
.ux-key.is-down{transform:translateY(3px);box-shadow:inset 0 -2px 0 #dedcd2,0 0 0 1px #c9c7bc}
.ux-key span{padding:6px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 -3px 0 #dedcd2,0 0 0 1px #dedcd2}
.ux-key small{font-size:15px;font-weight:400;color:var(--muted)}
.ux-lab-hint{margin-top:12px;font-size:14px;color:var(--muted)}
.ux-meter{position:relative;height:64px;margin-top:6px;border-radius:14px;background:#f2f0e8;overflow:hidden;--held:0}
.ux-meter::before{content:'';position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ux-lime);transform:scaleX(var(--held));transform-origin:left}
.ux-meter[data-zone=pass]::before{background:#f1d3c9}
.ux-meter[data-zone=hold]::before{background:var(--ux-lime-2)}
.ux-meter i{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed rgba(37,39,32,.4)}
.ux-meter i:nth-of-type(1){left:20%}
.ux-meter i:nth-of-type(2){left:60%}
.ux-meter-labels{position:relative;display:grid;grid-template-columns:20% 40% 40%;margin-top:8px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.ux-meter-labels span{padding-right:10px}
.ux-meter-labels b{display:block;color:var(--ink);font-size:13px}
.ux-lab[data-mode=toggle] .ux-only-hold{opacity:.38}
.ux-verdict{min-height:4.8em;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--ux-paper);font-size:16px;line-height:1.55}

/* Dictation scenes */
.ux-scenes{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start}
.ux-scene-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.ux-scene-tabs button{padding:9px 16px;border-radius:999px;background:#eceae2;font-size:14.5px;font-weight:600;color:var(--muted);transition:background-color .2s ease,color .2s ease,transform .12s ease}
.ux-scene-tabs button[aria-pressed=true]{background:var(--ux-ink);color:var(--ux-paper)}
.ux-scene-tabs button:active{transform:scale(.97)}
.ux-spoken{padding:22px 24px;border-radius:18px;background:var(--ux-lime)}
.ux-spoken small{display:block;margin-bottom:10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#5e6748}
.ux-spoken p{font-family:var(--ux-serif);font-style:italic;font-size:clamp(20px,1.8vw,25px);line-height:1.35}
.ux-transforms{list-style:none;display:grid;gap:10px;margin:22px 0 0;padding:0}
.ux-transforms li{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:15px}
.ux-transforms span{font-family:var(--ux-serif);font-style:italic;color:var(--muted)}
.ux-transforms i{font-style:normal;color:var(--ux-sage)}
.ux-transforms b{font-weight:600}
.ux-editor .ux-input{min-height:150px}

/* Insertion cases */
.ux-cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ux-case{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ux-case h3{font-size:19px;letter-spacing:-.02em;line-height:1.25}
.ux-case p{font-size:15px;line-height:1.55;color:var(--muted)}
.ux-case-out{margin-top:auto;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:#252b20;color:#f5f3ed;font-size:13px;font-weight:500}
.ux-case-out::before{content:'';flex-shrink:0;width:5px;height:9px;margin:0 3px 3px 2px;border:solid #e4eacb;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.ux-case-out.is-retry::before{width:10px;height:10px;margin:0;border:1.8px solid #e4eacb;border-right-color:transparent;border-radius:50%;transform:none}

/* Assistant */
.ux-assist{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(28px,5vw,72px);align-items:start}
.ux-mail{border-radius:14px;background:var(--ux-card);box-shadow:var(--ux-shadow);overflow:hidden}
.ux-mail-body{padding:22px 24px 26px;font-size:16px;line-height:1.6}
.ux-mail-body p+p{margin-top:12px}
.ux-mail mark{background:#cfe0f7;color:inherit;padding:1px 0;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.ux-assist-window{border-radius:14px;background:var(--ux-paper);box-shadow:var(--ux-shadow);overflow:hidden}
.ux-assist-inner{padding:18px 18px 20px;display:grid;gap:12px}
.ux-assist-title{font-family:var(--ux-serif);font-style:italic;font-size:26px;line-height:1.1}
.ux-assist-sub{font-size:13px;color:var(--muted)}
.ux-assist-label{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ux-assist-box{padding:11px 13px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #e1dfd6;font-size:13.5px;line-height:1.5;min-height:44px}
.ux-assist-tasks{display:flex;flex-wrap:wrap;gap:6px}
.ux-assist-tasks button{padding:7px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #d8d6cc;font-size:13px;font-weight:600;transition:background-color .2s ease,transform .12s ease}
.ux-assist-tasks button[aria-pressed=true]{background:var(--ux-red);color:#fff;box-shadow:none}
.ux-assist-tasks button:active{transform:scale(.97)}
.ux-assist-result{white-space:pre-line;min-height:96px;transition:opacity .25s ease}
.ux-assist[data-state=working] .ux-assist-result{opacity:.35}
.ux-assist-status{font-size:12.5px;color:var(--muted);min-height:1.5em}
.ux-assist-privacy{font-size:12px;color:var(--muted);border-top:1px solid #e3e1d8;padding-top:10px}
.ux-assist-keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;font-size:15px;color:var(--muted)}

/* Voice commands timeline */
.ux-voice{padding:clamp(24px,3.5vw,44px);border-radius:24px;background:var(--ux-olive-2)}
.ux-voice-track{position:relative;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));align-items:end;gap:3px;height:92px}
.ux-voice-track s{display:block;height:calc(var(--h) * 1%);border-radius:2px;background:rgba(245,243,237,.25);text-decoration:none;transform-origin:bottom}
.ux-voice-track s.is-name{background:#e9a08f}
.ux-voice-track s.is-cmd{background:var(--ux-lime)}
.ux-voice.is-playing .ux-voice-track s{animation:ux-voice-bar .5s var(--ux-ease-out) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes ux-voice-bar{from{transform:scaleY(.08)}}
.ux-voice-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px;font-size:14.5px;line-height:1.55;color:rgba(245,243,237,.72)}
.ux-voice-legend b{display:block;margin-bottom:4px;color:var(--ux-paper);font-size:16px}
.ux-voice-legend i{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:2px;vertical-align:baseline}
.ux-voice-commands{list-style:none;display:grid;gap:10px;margin:0 0 26px;padding:0}
.ux-voice-commands li{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid rgba(245,243,237,.1);font-family:var(--ux-serif);font-style:italic;font-size:clamp(20px,1.9vw,26px)}
.ux-voice-commands li span{font-family:Manrope,Arial,sans-serif;font-style:normal;font-size:14px;color:rgba(245,243,237,.6);align-self:center}
.ux-voice-replay{margin-top:18px;padding:9px 16px;border-radius:999px;background:rgba(245,243,237,.1);color:var(--ux-paper);font-size:14px;font-weight:600}

/* Bento of control and product */
.ux-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.ux-tile{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);min-height:210px}
.ux-tile h3{font-size:21px;letter-spacing:-.025em;line-height:1.2}
.ux-tile p{font-size:15.5px;line-height:1.6;color:var(--muted)}
.ux-tile-wide{grid-column:span 4}
.ux-tile-half{grid-column:span 3}
.ux-tile-third{grid-column:span 2}
.ux-tile-lime{background:var(--ux-lime);box-shadow:none}
.ux-tile-dark{background:var(--ux-olive);color:var(--ux-paper);box-shadow:none}
.ux-tile-dark p{color:rgba(245,243,237,.72)}
.ux-tile-shot{margin-top:auto;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(37,39,32,.08)}
.ux-tile-shot img{width:100%}
.ux-big{font-size:clamp(64px,7vw,110px);font-weight:600;letter-spacing:-.07em;line-height:.85}
.ux-mono{font:500 13px/1.5 ui-monospace,'Cascadia Mono',Consolas,monospace}

/* Voice and network flow */
.ux-prologue{margin-top:46px;padding-left:18px;border-left:2px solid var(--ux-red);font-size:16px}
.ux-flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;padding:0}
.ux-flow li{position:relative;padding:26px 22px 24px;margin-right:14px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:15px;line-height:1.5;color:var(--muted)}
.ux-flow li:last-child{margin-right:0;background:var(--ux-olive);color:rgba(245,243,237,.72);box-shadow:none}
.ux-flow li:last-child b{color:var(--ux-paper)}
.ux-flow li:not(:last-child)::after{content:'';position:absolute;right:-14px;top:50%;width:14px;height:2px;background:var(--ux-sage)}
.ux-flow b{display:block;margin-bottom:6px;color:var(--ink);font-size:19px;letter-spacing:-.02em}
.ux-fallback{max-width:72ch;margin-top:18px;padding:14px 18px;border-radius:14px;background:var(--ux-lime);font-size:15.5px;line-height:1.6;color:#4f5640}
.ux-fallback b{color:var(--ink)}
.ux-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(48px,6vw,80px)}
.ux-pill-shot{margin:0}
.ux-shot-dark{background:#1b1f17}
.ux-facts-col{grid-template-columns:1fr;margin:0}
.ux-pair{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:18px;margin-top:clamp(40px,5vw,64px)}
.ux-pair figure{margin:0}
.ux-pair figcaption{grid-column:1/-1;margin-top:0}
.ux-tile-pill{display:block;width:100%;max-width:320px;margin-top:auto;border-radius:24px}

/* Product: site in a browser frame, attribution chain, tiles */
.ux-devices{position:relative;width:min(1320px,calc(100% - 48px));margin:0 auto clamp(40px,5vw,72px);padding-bottom:clamp(30px,5vw,70px)}
.ux-browser{width:86%;margin:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 60px 120px -50px rgba(37,43,32,.55),0 0 0 1px rgba(37,39,32,.08)}
.ux-browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#efede6;border-bottom:1px solid #e1ded4}
.ux-browser-bar i{width:11px;height:11px;border-radius:50%;background:#d8d5cb}
.ux-browser-bar span{flex:0 1 380px;margin-left:16px;padding:4px 16px;border-radius:999px;background:#fff;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
.ux-browser-view{aspect-ratio:16/10;overflow:hidden;background:var(--ux-paper)}
.ux-browser-view img{width:100%;transform:translate3d(0,calc(var(--ps,0) * var(--shift,0px) * -1),0);will-change:transform}
.ux-phone-site{position:absolute;right:0;bottom:0;width:min(26%,300px);transform:translate3d(0,calc(var(--p,.5) * -60px + 30px),0)}
.ux-phone-site img{aspect-ratio:auto;object-fit:contain}
.ux-chain{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0}
.ux-chain li{position:relative;padding:18px 18px 20px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px;line-height:1.45;color:var(--muted)}
.ux-chain li:not(:last-child)::after{content:'→';position:absolute;right:-12px;top:50%;width:12px;margin-top:-.75em;text-align:center;color:var(--ux-red);font-weight:600;z-index:1}
.ux-chain b{display:block;margin-bottom:4px;color:var(--ink);font-size:17px;letter-spacing:-.02em}
.ux-chain .ux-mono{font-size:12px;color:var(--ux-red-ink)}
.ux-product{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:'lease webhook trial' 'updates site trial' 'admin admin trial';gap:16px;margin-top:clamp(40px,5vw,64px)}
.ux-p-lease{grid-area:lease}.ux-p-webhook{grid-area:webhook}.ux-p-trial{grid-area:trial}.ux-p-updates{grid-area:updates}.ux-p-site{grid-area:site}.ux-p-admin{grid-area:admin;min-height:0}
.ux-film,.ux-reel{margin:0}

/* Videos */
.ux-films{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.5fr);gap:clamp(24px,4vw,56px);align-items:start}
.ux-tutorial{display:grid;gap:16px}
.ux-tutorial video{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#e9e7de;box-shadow:var(--ux-shadow)}
.ux-chapters{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px;margin:0;padding:0}
.ux-chapters button{display:flex;gap:10px;width:100%;padding:7px 0;text-align:left;font-size:14.5px;color:var(--muted);border-bottom:1px solid var(--line);transition:color .2s ease}
.ux-chapters button span{font-variant-numeric:tabular-nums;color:var(--ux-sage);min-width:3.2em}
.ux-chapters button[aria-current],.ux-chapters button:hover{color:var(--ink)}
.ux-chapters button[aria-current] span{color:var(--ux-red)}
.ux-films .ux-phone{background:#111}
.ux-pipeline{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(40px,5vw,64px) 0 0;padding:0}
.ux-pipeline li{position:relative;padding:20px 20px 22px;border-radius:18px;background:var(--ux-lime);font-size:15px;line-height:1.55;color:#4f5640}
.ux-pipeline b{display:block;margin-bottom:6px;color:var(--ink);font-size:18px;letter-spacing:-.02em}

/* Engineering */
.ux-engine{padding:clamp(90px,12vw,160px) 0;background:#eceae2}
.ux-engine h2{font-size:clamp(36px,5.1vw,74px);letter-spacing:-.055em;line-height:1.02;margin-bottom:clamp(36px,4vw,56px)}
.ux-arch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ux-arch article{padding:24px;border-radius:18px;background:#fff}
.ux-arch article.is-accent{background:var(--ux-olive);color:var(--ux-paper)}
.ux-arch article.is-accent p,.ux-arch article.is-accent li{color:rgba(245,243,237,.72)}
.ux-arch h3{font-size:20px;letter-spacing:-.02em;margin-bottom:10px}
.ux-arch p,.ux-arch li{font-size:15px;line-height:1.6;color:var(--muted)}
.ux-arch ul{margin:10px 0 0;padding-left:18px}
.ux-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:16px}
.ux-numbers p{padding:22px 24px;border-radius:18px;background:var(--ux-lime);font-size:15px;line-height:1.5;color:#4f5640}
.ux-numbers b{display:block;color:var(--ink);font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:-.05em;line-height:1}

/* Finale */
.ux-finale{padding:clamp(90px,12vw,150px) 0 clamp(30px,4vw,50px)}
.ux-finale-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:start}
.ux-finale h2{font-size:clamp(32px,4.2vw,58px);letter-spacing:-.05em;line-height:1.05;max-width:17ch}
.ux-lessons{list-style:none;display:grid;gap:24px;margin:0;padding:0}
.ux-lessons li{font-size:17px;line-height:1.62;color:var(--muted)}
.ux-lessons b{display:block;margin-bottom:4px;color:var(--ink);font-size:21px;letter-spacing:-.02em}
.ux-finale-links{display:flex;flex-wrap:wrap;gap:6px 36px;margin-top:34px}
.ux-next{margin-top:clamp(50px,6vw,80px);margin-bottom:96px}

/* ───────── Motion ───────── */
@media(prefers-reduced-motion:no-preference){
 .ux-display>span{animation:ux-rise .9s var(--ux-ease-out) both}
 .ux-display .ux-serif{animation:ux-rise .9s var(--ux-ease-out) .1s both}
 .ux-kicker,.ux-hero-lead,.ux-hero-meta{animation:ux-fade .8s var(--ux-ease-out) both}
 .ux-hero-lead{animation-delay:.16s}.ux-hero-meta{animation-delay:.24s}
 .ux-stage{animation:ux-unveil 1.1s var(--ux-ease-io) both .05s}
 .ux-stage .ux-window{animation:ux-fade .9s var(--ux-ease-out) both .35s}
 .ux-dock{animation:ux-dock .6s var(--ux-ease-out) both .9s}
 .ux-ready [data-ux]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s var(--ux-ease-out),transform .8s var(--ux-ease-out)}
 .ux-ready [data-ux].ux-in{opacity:1;transform:none}
}
@keyframes ux-rise{from{transform:translate3d(0,.28em,0);filter:blur(8px)}}
@keyframes ux-fade{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes ux-unveil{from{clip-path:inset(8% 8% 8% 8% round 28px)}to{clip-path:inset(0 0 0 0 round 28px)}}
@keyframes ux-dock{from{opacity:0;transform:translate(-50%,24px)}}
@media(prefers-reduced-motion:reduce){
 .ux-pill-spin{animation:none;border-color:#f5f3ed}
 .ux-input [data-dictation-slot]:empty::before{animation:none}
 .ux-voice-track s{animation:none!important}
 .ux-pill-progress::before{transition:none!important}
}

/* ───────── Responsive ───────── */
@media(max-width:1023px){
 .ux-hero-grid,.ux-problem,.ux-lab,.ux-scenes,.ux-assist,.ux-split,.ux-films,.ux-finale-grid{grid-template-columns:1fr}
 .ux-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .ux-flow li{margin-right:0}
 .ux-flow li::after{display:none}
 .ux-chain{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ux-chain li::after{display:none}
 .ux-product{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'lease webhook' 'trial trial' 'updates site' 'admin admin'}
 .ux-reel{max-width:330px}
 .ux-hero-grid{min-height:0}
 .ux-cases{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ux-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ux-tile-wide,.ux-tile-half{grid-column:span 2}
 .ux-tile-third{grid-column:span 1}
 .ux-arch{grid-template-columns:1fr}
 .ux-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ux-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ux-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .ux-facts{grid-template-columns:1fr;gap:22px}
 .ux-cases{grid-template-columns:1fr}
 .ux-bento{grid-template-columns:1fr}
 .ux-tile-wide,.ux-tile-half,.ux-tile-third{grid-column:auto}
 .ux-voice-legend{grid-template-columns:1fr}
 .ux-numbers{grid-template-columns:1fr 1fr}
 .ux-pipeline{grid-template-columns:1fr}
 .ux-flow,.ux-chain,.ux-product{grid-template-columns:1fr}
 .ux-product{grid-template-areas:none}
 .ux-product>*{grid-area:auto}
 .ux-pair{grid-template-columns:1fr 1fr}
 .ux-devices{width:calc(100% - 40px)}
 .ux-browser{width:100%}
 .ux-browser-bar span{display:none}
 .ux-phone-site{position:relative;width:52%;margin:-30% 0 0 auto;padding:7px;border-radius:34px}
 .ux-phone-site img{border-radius:27px}
 .ux-chapters{grid-template-columns:1fr}
 .ux-meter-labels{font-size:11.5px}
 .ux-transforms li{grid-template-columns:1fr;gap:4px}
 .ux-transforms i{display:none}
 .ux-stage{padding:16px;border-radius:22px}
 .ux-pill{font-size:13px;gap:10px;padding-left:14px}
}
@media print{.ux-dock{display:none!important}}