:root{--font-body:Inter,Arial,sans-serif;--font-display:Sora,Inter,sans-serif;--font-mono:'JetBrains Mono',monospace;--ink:#111113;--secondary:#636367;--paper:#fff;--wash:#f7f7f6;--selected:#ededef;--line:#e4e4e7;--control:#828286;--inverse:#fff;--max:1240px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;--s32:128px;--radius:2px;--fast:150ms;--slow:200ms;--ease:cubic-bezier(.2,0,0,1);--h1:clamp(2.5rem,4.55vw,4rem);--h2:clamp(2rem,3.3vw,2.8rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin:0}h1,h2{font-family:var(--font-display);font-weight:400;line-height:1.1;letter-spacing:-.045em}h1{font-size:var(--h1)}h2{font-size:var(--h2);max-width:22ch}h3{font-size:18px;font-weight:500;line-height:1.4}button{color:inherit}svg{display:block}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:5px}::selection{color:var(--paper);background:var(--ink)}[hidden]{display:none!important}.container{max-width:var(--max);padding-inline:var(--s8);margin-inline:auto}.eyebrow,.micro{font:400 11px/1.7 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}.micro{font-size:11px}.lede{font-size:17px;line-height:1.7;color:var(--secondary);max-width:37ch}.muted{color:var(--secondary)}.small{font-size:13px}.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.btn{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:48px;padding:12px 22px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--inverse);font-size:13px;font-weight:500;transition:background var(--fast),color var(--fast),border-color var(--fast)}.btn:hover{background:#353538}.btn.secondary{background:var(--paper);color:var(--ink);border-color:var(--line)}.btn.secondary:hover{background:var(--wash);border-color:var(--control)}.btn:active{opacity:.8}.text-link{display:inline-flex;gap:20px;align-items:center;min-height:44px;font-size:13px}.text-link:hover{text-decoration:underline;text-underline-offset:6px}.logo{font-size:23px;font-weight:600;letter-spacing:-1.1px;display:inline-flex;gap:9px;align-items:center}.mark{display:flex;align-items:center;gap:3px;height:28px;direction:ltr}.mark i{width:2px;background:currentColor;display:block}.mark i:nth-child(1),.mark i:nth-child(5){height:10px}.mark i:nth-child(2){height:19px}.mark i:nth-child(3){height:27px}.mark i:nth-child(4){height:16px}.skip{position:fixed;top:8px;left:8px;transform:translateY(-200%);z-index:100;background:var(--ink);color:var(--paper);padding:12px}.skip:focus{transform:none}
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}.nav-row{height:78px;display:flex;align-items:center;gap:var(--s8)}.nav-links{display:flex;gap:var(--s8);margin-inline:auto;font-size:12px}.nav-links a{min-height:44px;display:flex;align-items:center}.nav-links a:hover{color:var(--secondary)}.nav-actions{display:flex;align-items:center;gap:var(--s6)}.language,.menu-toggle{border:0;background:none;min-height:44px;font-size:12px;padding:8px}.menu-toggle{display:none}.nav-actions .btn{min-height:40px;padding:9px 16px;font-size:12px}.mobile-nav{padding:16px 24px;border-top:1px solid var(--line)}.mobile-nav a{display:block;padding:12px 0;font-size:14px}
.hero{padding-block:100px 48px;position:relative}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}.hero-copy .eyebrow{margin-bottom:28px;display:flex;gap:12px;align-items:center}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--ink);display:inline-block;flex:none}.hero-copy h1{max-width:12ch}.hero-copy h1 .quiet{color:var(--secondary)}.hero-copy .lede{margin-top:24px;max-width:33ch}.hero-actions{display:flex;align-items:center;gap:26px;margin-top:32px;flex-wrap:wrap}.hero-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:56px}.hero-bottom p{font-size:12px;color:var(--secondary)}.hero-bottom .anchor{font:11px var(--font-mono)}
/* The conversation ledger is the page's signature component. */
.console{border:1px solid var(--line);background:var(--paper);min-width:0;position:relative}.console::before,.console::after{content:'';position:absolute;width:5px;height:5px;background:var(--ink);top:-3px}.console::before{left:-3px}.console::after{right:-3px}.console-top{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);gap:12px}.console-top .micro{display:flex;gap:8px;align-items:center}.scenario-buttons{display:flex;padding-inline:22px;border-bottom:1px solid var(--line);gap:24px}.scenario-buttons button{background:none;border:0;padding:15px 0;font-size:11px;position:relative;color:var(--secondary);min-height:44px}.scenario-buttons button[aria-pressed=true]{color:var(--ink)}.scenario-buttons button[aria-pressed=true]::after{content:'';height:2px;background:var(--ink);position:absolute;bottom:-1px;inset-inline:0}.scope{padding:24px 22px 12px}.scope-info{display:flex;justify-content:space-between;gap:16px}.waveform{position:relative;height:142px;margin-top:14px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;overflow:hidden;direction:ltr}.waveform svg{width:100%;height:100%}.cursor{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--ink);will-change:transform}.cursor:before{content:'';width:5px;height:5px;background:var(--ink);position:absolute;top:0;left:-2px;border-radius:50%}.player{display:flex;gap:14px;align-items:center;padding-block:14px 8px}.play{height:36px;width:36px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:13px}.play:hover{background:#454548}.play:focus-visible{outline-offset:4px}.time{font:11px var(--font-mono);color:var(--secondary);white-space:nowrap}.play-label{font-size:11px;margin-inline-start:auto;color:var(--secondary)}.dialogue{padding:0 22px 22px;min-height:151px}.speaker-line{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding-top:14px;font-size:12px;line-height:1.7;transition:opacity var(--slow)}.speaker-line .micro{padding-top:2px}.dialogue .muted-line{opacity:.38}.receipt{padding:16px 22px;border-top:1px solid var(--line);background:var(--wash);display:flex;align-items:center;gap:12px;min-height:73px}.receipt-icon{width:27px;height:27px;border:1px solid var(--control);border-radius:50%;display:grid;place-items:center;font-size:12px}.receipt-content{flex:1}.receipt-content p{font-size:12px}.receipt .micro{font-size:11px}.console-status{font:11px var(--font-mono);color:var(--secondary)}
.industry-strip{border-block:1px solid var(--line);padding:26px 0}.industry-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.industry-inner>p{font:11px var(--font-mono);color:var(--secondary);max-width:18ch}.industry-list{display:flex;justify-content:space-between;gap:46px;flex:1;max-width:740px}.industry-list button{display:flex;align-items:center;gap:12px;background:none;border:0;font-size:13px;padding:10px 0;min-height:44px}.industry-list button:hover{text-decoration:underline;text-underline-offset:5px}
section{padding-block:112px;border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}.section-head .eyebrow{margin-bottom:22px}.section-head .lede{font-size:15px;justify-self:end;max-width:31ch}.section-index{color:var(--secondary);font:11px var(--font-mono)}.workspace{border:1px solid var(--line);display:grid;grid-template-columns:.75fr 1.25fr;min-height:380px}.capabilities{display:flex;flex-direction:column}.capability{border:0;border-bottom:1px solid var(--line);background:var(--paper);text-align:start;padding:26px 30px;display:grid;grid-template-columns:30px 1fr 20px;gap:12px;align-items:start;flex:1}.capability:last-child{border-bottom:0}.capability:hover{background:var(--wash)}.capability[aria-pressed=true]{background:var(--wash);box-shadow:inset 3px 0 var(--ink)}[dir=rtl] .capability[aria-pressed=true]{box-shadow:inset -3px 0 var(--ink)}.capability h3{font-size:16px}.capability p{font-size:12px;color:var(--secondary);margin-top:6px}.capability .section-index{padding-top:4px}.capability .arrow{font-size:16px}.workspace-visual{border-inline-start:1px solid var(--line);padding:32px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px}.visual-panel{background:var(--paper);border:1px solid var(--line);max-width:440px;width:100%;margin:auto}.visual-top{border-bottom:1px solid var(--line);padding:16px 22px;display:flex;justify-content:space-between;align-items:center}.visual-row{display:flex;align-items:center;gap:14px;padding:18px 22px;font-size:12px;border-bottom:1px solid var(--line)}.visual-row:last-child{border-bottom:0}.visual-row .row-sub{color:var(--secondary);font-size:11px;margin-top:3px}.visual-row .end{margin-inline-start:auto;font:11px var(--font-mono);color:var(--secondary)}.visual-note{text-align:center;margin-top:18px;font:11px var(--font-mono);color:var(--secondary)}
.ledger-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:64px}.ledger-copy .eyebrow{margin-bottom:22px}.ledger-copy h2{max-width:12ch}.ledger-copy .lede{font-size:15px;margin-top:24px}.ledger-copy .text-link{margin-top:20px}.ledger{border:1px solid var(--line)}.ledger-title{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px}.ledger-step{display:grid;grid-template-columns:44px 1fr 50px;gap:18px;padding:24px;border-bottom:1px solid var(--line);align-items:start;transition:background var(--slow)}.ledger-step:last-child{border-bottom:0}.ledger-step.selected{background:var(--wash)}.ledger-step .number{border:1px solid var(--control);border-radius:50%;height:30px;width:30px;display:grid;place-items:center;font:11px var(--font-mono)}.ledger-step h3{font-size:14px}.ledger-step p{font-size:12px;color:var(--secondary);margin-top:5px}.ledger-step time{font:11px var(--font-mono);color:var(--secondary);padding-top:7px}.ledger-step.selected .number{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#enterprise{background:var(--wash)}.control-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.control{border-inline-end:1px solid var(--line);padding:28px 24px 32px}.control:first-child{padding-inline-start:0}.control:last-child{border-inline-end:0}.control svg{margin-bottom:30px}.control h3{font-size:15px}.control p{font-size:12px;line-height:1.7;color:var(--secondary);margin-top:10px;max-width:23ch}.section-bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px}.section-bottom p{font-size:12px;color:var(--secondary)}
.rollout{display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px}.rollout-item{position:relative;border-top:1px solid var(--line);padding-top:28px}.rollout-item:before{content:'';position:absolute;width:7px;height:7px;border:1px solid var(--control);background:var(--paper);border-radius:50%;top:-4px;inset-inline-start:0}.rollout-item:last-child:before{background:var(--ink);border-color:var(--ink)}.rollout-item h3{margin-top:12px;font-size:15px}.rollout-note{margin-top:34px;font-size:11px;color:var(--secondary)}
#questions{padding-block:80px}.faq-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:64px}.faq-layout h2{margin-top:22px}.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:66px;padding:18px 0;font-size:14px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';font-size:20px;font-weight:300}.faq details[open] summary:after{content:'−'}.faq details p{font-size:13px;color:var(--secondary);padding:0 32px 24px 0;max-width:52ch;line-height:1.8}
#start{padding-block:96px}.brief-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px}.brief-layout h2{margin-top:22px;max-width:13ch}.brief-layout .lede{font-size:15px;margin-top:24px}.brief-layout .btn{margin-top:30px}.brief{border:1px solid var(--line);padding:28px}.brief label{font-size:12px;display:block;margin-bottom:8px}.brief select,.brief textarea{width:100%;border:1px solid var(--control);background:var(--paper);color:var(--ink);border-radius:var(--radius);font-size:13px;padding:12px;min-height:46px}.brief textarea{resize:vertical;min-height:100px;line-height:1.6}.brief select{margin-bottom:22px}.brief .form-bottom{margin-top:20px;display:flex;align-items:center;gap:20px}.brief .btn{margin:0}.brief .status{font-size:11px;color:var(--secondary);flex:1}.brief .micro{margin-top:20px}.brief-output{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}.brief-output p{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.brief-output .text-link{border:0;background:transparent;padding:0;margin-top:12px}
footer{padding-top:64px;overflow:hidden}.footer-top{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(0,1fr));gap:40px}.footer-top p{font-size:12px;color:var(--secondary);max-width:25ch;margin-top:16px}.footer-top h3{font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.07em;margin-bottom:18px}.footer-top ul{list-style:none;padding:0;margin:0}.footer-top li a{font-size:12px;min-height:36px;display:inline-flex;align-items:center;color:var(--secondary)}.footer-top a:hover{color:var(--ink)}.footer-brand{font-family:var(--font-display);font-size:clamp(65px,16vw,210px);font-weight:400;letter-spacing:-.08em;line-height:1.2;margin:48px -8px 26px;color:var(--ink);direction:ltr}.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;padding-block:24px;font-size:11px;color:var(--secondary)}.footer-bottom a{min-height:28px;display:inline-flex;align-items:center}
[dir=rtl] h1,[dir=rtl] h2{font-family:Inter,Arial,sans-serif;letter-spacing:normal;line-height:1.3}[dir=rtl] .eyebrow,[dir=rtl] .micro{letter-spacing:normal}[dir=rtl] .hero-copy h1{max-width:14ch}[dir=rtl] .hero-copy .quiet{display:block}[dir=rtl] .arrow{transform:scaleX(-1)}
@media(min-width:1500px){.hero{padding-top:120px;padding-bottom:64px}.hero-grid{gap:80px}}
@media(max-width:1050px){.hero-grid{gap:32px}.hero{padding-top:72px}.nav-links{gap:20px}.nav-actions{gap:12px}.industry-list{gap:24px}.console-top{padding-inline:16px}.workspace{grid-template-columns:1fr 1.2fr}.ledger-layout{gap:32px}.control{padding-inline:18px}}
@media(max-width:800px){.container{padding-inline:24px}.nav-links{display:none}.nav-actions{margin-inline-start:auto}.menu-toggle{display:block}.hero-grid{grid-template-columns:1fr;gap:48px}.hero-copy h1{max-width:16ch;font-size:52px}.hero-copy .lede{max-width:40ch}.console{max-width:600px;width:100%}.hero-bottom{padding-top:32px}.hero{padding-top:64px}.industry-inner{align-items:flex-start;flex-direction:column}.industry-inner>p{max-width:none}.industry-list{flex-wrap:wrap;gap:24px;justify-content:flex-start}.section-head{grid-template-columns:1fr;gap:24px}.section-head .lede{justify-self:start;max-width:45ch}section{padding-block:84px}.workspace{grid-template-columns:1fr}.capabilities{flex-direction:row}.capability{grid-template-columns:1fr;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);padding:18px;min-width:0}.capability:last-child{border-bottom:1px solid var(--line);border-inline-end:0}.capability .arrow,.capability p{display:none}.capability h3{font-size:13px}.workspace-visual{border-inline-start:0;min-height:310px;padding:24px}.ledger-layout,.brief-layout,.faq-layout{grid-template-columns:1fr;gap:40px}.ledger-copy h2{max-width:22ch}.control-grid{grid-template-columns:1fr 1fr}.control:nth-child(2){border-inline-end:0}.control:nth-child(-n+2){border-bottom:1px solid var(--line)}.control:first-child{padding-inline-start:24px}.control{padding:24px}.control p{max-width:32ch}.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.footer-top>div:first-child{grid-column:1/-1}.footer-brand{margin-top:40px}.section-head{margin-bottom:32px}}
@media(max-width:480px){section{padding-block:72px}.container{padding-inline:20px}.nav-row{height:68px;gap:12px}.nav-actions .btn{display:none}.logo{font-size:21px}.hero-copy h1{font-size:40px;max-width:13ch}.hero{padding-top:48px}.hero-actions{gap:20px}.hero-bottom{flex-direction:column;gap:8px}.console-top{gap:6px}.console-top .micro{font-size:11px}.scenario-buttons{gap:20px;padding-inline:16px}.scope{padding:20px 16px 8px}.dialogue{padding-inline:16px;min-height:168px}.receipt{padding-inline:16px}.receipt .console-status{font-size:11px}.waveform{height:120px}.play-label{font-size:11px}.speaker-line{grid-template-columns:40px 1fr}.section-head .eyebrow{margin-bottom:16px}.capability{padding:16px 12px}.workspace-visual{padding:16px}.visual-top,.visual-row{padding:16px}.ledger-step{grid-template-columns:30px 1fr;gap:14px;padding:20px}.ledger-step time{display:none}.ledger-title{padding:18px}.control-grid{grid-template-columns:1fr 1fr}.control{padding:20px!important}.control p{font-size:12px}.rollout{grid-template-columns:1fr;margin-top:32px}.rollout-item{border-top:0;border-inline-start:1px solid var(--line);padding:0 0 26px 24px;display:flex;gap:24px;align-items:center}.rollout-item:before{top:7px;inset-inline-start:-4px}.rollout-item h3{margin-top:0}.rollout-item .micro{min-width:45px}.rollout-item:last-child{padding-bottom:0}.section-bottom{align-items:flex-start;flex-direction:column;gap:8px}.brief{padding:20px}.brief .form-bottom{align-items:flex-start;flex-direction:column}.footer-top{gap:24px}.footer-bottom{flex-direction:column;gap:8px}.footer-brand{font-size:20vw}.industry-list{gap:12px 26px}.industry-list button{font-size:12px}[dir=rtl] .rollout-item{padding:0 24px 26px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Inter-400.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Inter-500.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Inter-600.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Inter-700.ttf) format('truetype')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/JetBrainsMono-400.ttf) format('truetype')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/JetBrainsMono-500.ttf) format('truetype')}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Sora-400.ttf) format('truetype')}
@font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Sora-500.ttf) format('truetype')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Sora-600.ttf) format('truetype')}

/* ============================================================================================
   VOCALABS DESIGN SYSTEM — shared blocks (everything above is the approved home design).
   Tokens only: --ink --secondary --paper --wash --line --control, 2px radius, mono eyebrows,
   hairline borders, no shadows, no gradients. New blocks must use these and nothing else.
   ============================================================================================ */
main:focus{outline:none}
.nav-links a[aria-current=page]{text-decoration:underline;text-underline-offset:8px}
.nav-signin{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
.nav-signin:hover{color:var(--secondary)}
.mobile-nav a[aria-current=page]{font-weight:600}
.mobile-nav .btn{margin-top:12px;width:100%}
.mobile-nav hr{border:0;border-top:1px solid var(--line);margin:8px 0}
@media(max-width:800px){.nav-signin{display:none}}

/* page hero (sub-pages) */
.page-hero{padding-block:88px 72px;border-bottom:1px solid var(--line)}
.breadcrumb{display:flex;gap:10px;align-items:center;font:11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin-bottom:28px}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb [aria-current]{color:var(--ink)}
.page-hero h1{max-width:16ch}
.page-hero .lede{margin-top:24px;max-width:46ch}
.page-hero .hero-actions{margin-top:32px}
.page-hero .split-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end}
.page-hero .quiet{color:var(--secondary)}
.meta-row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}
.meta-row div{font-size:12px;color:var(--secondary)}
.meta-row b{display:block;font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:2px}

/* section modifiers */
section.tight{padding-block:72px}
section.wash,.wash{background:var(--wash)}
section.last{border-bottom:0}
.section-head.stack{grid-template-columns:1fr;align-items:start;gap:20px}
.section-head.stack .lede{justify-self:start}
.prose-narrow{max-width:62ch}

/* bordered grids: the system's card layout */
.grid{display:grid;border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}
.cell{border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 28px 36px;background:var(--paper);display:flex;flex-direction:column;gap:12px;min-width:0}
.cell .icon{width:24px;height:24px;margin-bottom:18px}
.cell h3{font-size:16px}
.cell p{font-size:13px;color:var(--secondary);line-height:1.75}
.cell .micro{margin-bottom:6px}
a.cell:hover,.cell.link:hover{background:var(--wash)}
.cell .more{margin-top:auto;padding-top:18px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.wash .cell{background:transparent}.wash a.cell:hover{background:var(--paper)}
.cell-list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px;font-size:12px;color:var(--secondary)}
.cell-list li{display:flex;gap:10px;align-items:flex-start}
.cell-list li:before{content:'';width:5px;height:5px;margin-top:7px;border:1px solid var(--ink);flex:none}

/* split block: copy + visual */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
.split.reverse>:first-child{order:2}
.split h2{max-width:14ch}
.split .lede{font-size:15px;margin-top:22px}
.split .eyebrow{margin-bottom:22px}
.split .text-link{margin-top:18px}
.checks{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;font-size:13px}
.checks li{display:flex;gap:14px;align-items:flex-start;line-height:1.6}
.checks li:before{content:'✓';font:11px var(--font-mono);border:1px solid var(--control);border-radius:50%;width:20px;height:20px;display:grid;place-items:center;flex:none;margin-top:1px}
.panel{border:1px solid var(--line);background:var(--paper)}
.panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.panel-body{padding:22px}
.panel-row{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line);font-size:12px}
.panel-row:last-child{border-bottom:0}
.panel-row .end{margin-inline-start:auto;font:11px var(--font-mono);color:var(--secondary);white-space:nowrap}
.panel-row .sub{display:block;color:var(--secondary);font-size:11px;margin-top:2px}
.panel-note{font:11px var(--font-mono);color:var(--secondary);padding:12px 22px;border-top:1px solid var(--line);background:var(--wash)}
.gridbg{background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;padding:32px;border:1px solid var(--line)}
.gridbg .panel{max-width:440px;margin-inline:auto}

/* badges, chips, notices */
.badge{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);padding:6px 9px;border-radius:var(--radius);color:var(--secondary);white-space:nowrap}
.badge.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge.dot:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.outline-strong{color:var(--ink);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);min-height:40px;padding:8px 16px;font-size:12px}
.chip:hover{border-color:var(--control)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.notice{border:1px solid var(--line);border-inline-start:3px solid var(--ink);background:var(--wash);padding:16px 20px;font-size:12px;line-height:1.7;color:var(--secondary)}
.notice b{color:var(--ink);font-weight:500}
.notice.draft{border-inline-start-style:dashed}

/* stats / key facts (descriptive only — never invented numbers) */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:28px 24px;border-inline-end:1px solid var(--line)}
.fact:first-child{padding-inline-start:0}.fact:last-child{border-inline-end:0}
.fact b{display:block;font:400 clamp(1.6rem,2.4vw,2.2rem)/1.1 var(--font-display);letter-spacing:-.04em}
.fact span{display:block;font-size:12px;color:var(--secondary);margin-top:10px;max-width:24ch}
[dir=rtl] .fact b{font-family:Inter,Arial,sans-serif;letter-spacing:normal}

/* tabs */
.tabs{border:1px solid var(--line)}
.tablist{display:flex;gap:28px;padding-inline:24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tablist button{background:none;border:0;min-height:54px;font-size:12px;color:var(--secondary);position:relative;white-space:nowrap}
.tablist button[aria-selected=true]{color:var(--ink)}
.tablist button[aria-selected=true]:after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--ink)}
.tabpanel{padding:40px 32px}
.tabpanel[hidden]{display:none}

/* comparison / data table */
.table-wrap{overflow-x:auto;border:1px solid var(--line)}
table.table{border-collapse:collapse;width:100%;min-width:640px;font-size:13px}
.table th,.table td{text-align:start;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.table thead th{font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);background:var(--wash)}
.table tbody tr:last-child td,.table tbody tr:last-child th{border-bottom:0}
.table tbody th{font-weight:500;width:28%}
.table td{color:var(--secondary);line-height:1.7}

/* numbered steps (vertical) */
.steps{list-style:none;padding:0;margin:0;border:1px solid var(--line);counter-reset:s}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:24px;border-bottom:1px solid var(--line);counter-increment:s}
.steps li:last-child{border-bottom:0}
.steps li:before{content:counter(s);border:1px solid var(--control);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font:11px var(--font-mono)}
.steps h3{font-size:14px}.steps p{font-size:12px;color:var(--secondary);margin-top:5px}

/* CTA band */
.cta-band{padding-block:88px;background:var(--ink);color:var(--paper);border-bottom:0}
.cta-band .eyebrow{color:#a8a8ad}
.cta-band h2{max-width:16ch;margin-top:22px}
.cta-band .lede{color:#c9c9cd;margin-top:20px;font-size:15px}
.cta-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap}
.cta-band .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-band .btn:hover{background:#e4e4e7}
.cta-band .btn.secondary{background:transparent;color:var(--paper);border-color:#636367}
.cta-band .btn.secondary:hover{border-color:var(--paper);background:transparent}
.cta-band .hero-actions{margin-top:0}
.cta-band :focus-visible{outline-color:var(--paper)}

/* forms */
.form{border:1px solid var(--line);padding:32px;background:var(--paper)}
.form h2,.form h3.form-title{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:-.03em;margin-bottom:6px}
.form .form-lede{font-size:12px;color:var(--secondary);margin-bottom:26px}
.field{margin-bottom:22px;min-width:0}
.field label,.field legend,.field-label{display:block;font-size:12px;margin-bottom:8px;padding:0}
.field .opt{color:var(--secondary);font-size:11px;margin-inline-start:6px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],.field input[type=password],.field select,.field textarea{width:100%;border:1px solid var(--control);background:var(--paper);color:var(--ink);border-radius:var(--radius);font-size:13px;padding:12px;min-height:46px}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field [aria-invalid=true]{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);background:var(--wash)}
.field .hint{font-size:11px;color:var(--secondary);margin-top:6px}
.field .error:empty{display:none}.field .error{font-size:11px;margin-top:6px;display:flex;gap:6px;align-items:center}
.field .error:before{content:'!';font:700 11px var(--font-mono);border:1px solid var(--ink);border-radius:50%;width:15px;height:15px;display:grid;place-items:center;flex:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
fieldset.field{border:0;padding:0;margin-inline:0}
.choice{display:flex;gap:12px;align-items:flex-start;font-size:13px;min-height:44px;padding:6px 0;cursor:pointer}
.choice input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-bottom{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
.form-status{font-size:12px;color:var(--secondary);flex:1;min-width:200px}
.form-output{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}
.form-output p.draft-text{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;border:1px dashed var(--control);padding:16px;background:var(--wash)}
.form-output .actions{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px}
.form-output .text-link{border:0;background:transparent;padding:0}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.form-split.rev{grid-template-columns:1.2fr .8fr}
.contact-list{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid var(--line)}
.contact-list li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:13px}
.contact-list .micro{padding-top:3px}
.contact-list a{text-decoration:underline;text-underline-offset:5px}

/* auth (login) */
.auth{min-height:calc(100vh - 78px);display:grid;grid-template-columns:1fr 1fr}
.auth-main{padding:96px 64px;display:flex;flex-direction:column;justify-content:center;max-width:620px;margin-inline-start:auto;width:100%}
.auth-main h1{font-size:clamp(2rem,3.4vw,2.8rem);max-width:12ch}
.auth-main .lede{margin-top:20px;font-size:15px}
.auth-options{margin-top:36px;border:1px solid var(--line)}
.auth-option{display:grid;grid-template-columns:28px 1fr 20px;gap:16px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.auth-option:last-child{border-bottom:0}
.auth-option:hover{background:var(--wash)}
.auth-option h3{font-size:14px}.auth-option p{font-size:12px;color:var(--secondary);margin-top:3px}
.auth-side{background:var(--wash);border-inline-start:1px solid var(--line);padding:96px 64px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.auth-side .gridbg{background-color:transparent}
.auth-help{margin-top:28px;font-size:12px;color:var(--secondary)}
.auth-help a{text-decoration:underline;text-underline-offset:5px;color:var(--ink)}

/* case studies */
.case-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper);min-width:0}
.case-card:hover{border-color:var(--control)}
.case-card .visual{aspect-ratio:16/9;border-bottom:1px solid var(--line);background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;display:grid;place-items:center;position:relative}
.case-card .visual .mark{height:44px;transform:scale(1.3)}
.case-card .visual .badge{position:absolute;top:14px;inset-inline-start:14px;background:var(--paper)}
.case-card .body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.case-card h3{font-size:18px}
.case-card p{font-size:12px;color:var(--secondary);line-height:1.75}
.case-card .more{margin-top:auto;padding-top:16px;font-size:12px;display:flex;justify-content:space-between}
.case-card.placeholder{border-style:dashed}
.case-card.placeholder .visual{background-image:none;background:var(--wash)}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}
.article aside{position:sticky;top:110px;display:grid;gap:0;border-top:1px solid var(--line)}
.article aside div{padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}
.article aside .micro{display:block;margin-bottom:3px}
.article-body>section{padding-block:0 56px;border:0}
.article-body h2{font-size:clamp(1.6rem,2.4vw,2rem);max-width:22ch;margin-bottom:20px}
.article-body p{font-size:15px;line-height:1.85;color:var(--secondary);max-width:62ch}
.article-body p+p{margin-top:16px}
.article-body .ledger,.article-body .panel,.article-body .notice{margin-top:28px}

/* legal / prose */
.prose{max-width:68ch}
.prose h2{font-size:1.5rem;margin:48px 0 14px;max-width:none}
.prose p,.prose li{font-size:14px;line-height:1.85;color:var(--secondary)}
.prose p+p{margin-top:14px}.prose ul{padding-inline-start:20px}

/* design system page */
.ds-swatches{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line)}
.ds-swatch{border-inline-end:1px solid var(--line)}.ds-swatch:last-child{border-inline-end:0}
.ds-swatch i{display:block;height:96px;border-bottom:1px solid var(--line)}
.ds-swatch div{padding:12px 14px;font:11px var(--font-mono);color:var(--secondary)}
.ds-swatch b{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}
.ds-demo{border:1px solid var(--line);padding:32px;margin-top:20px;background:var(--paper)}
.ds-demo.flush{padding:0}
.ds-label{font:11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin:48px 0 0}
.ds-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ds-code{font:11px/1.7 var(--font-mono);background:var(--wash);border:1px solid var(--line);padding:14px 16px;margin-top:12px;overflow-x:auto;white-space:pre;direction:ltr;text-align:left}
.ds-type>*{margin-bottom:18px}
.ds-nav{position:sticky;top:78px;background:var(--paper);border-bottom:1px solid var(--line);z-index:5}
.ds-nav .container{display:flex;gap:24px;overflow-x:auto}
.ds-nav a{font-size:12px;min-height:48px;display:flex;align-items:center;white-space:nowrap;color:var(--secondary)}
.ds-nav a:hover{color:var(--ink)}

/* 404 */
.notfound{padding-block:140px;border-bottom:0}
.notfound h1{max-width:12ch;margin-block:22px 0}

@media(max-width:1050px){.grid.c4{grid-template-columns:repeat(2,1fr)}.facts{grid-template-columns:repeat(2,1fr)}.fact:nth-child(2){border-inline-end:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}.fact:first-child{padding-inline-start:24px}.split,.form-split,.form-split.rev,.page-hero .split-hero,.article{gap:40px}.case-grid{grid-template-columns:repeat(2,1fr)}.auth-main,.auth-side{padding-inline:40px}}
@media(max-width:800px){
 .page-hero{padding-block:56px 48px}.page-hero h1{font-size:44px;max-width:14ch}
 .page-hero .split-hero,.split,.form-split,.form-split.rev,.article,.auth{grid-template-columns:1fr}
 .split.reverse>:first-child{order:0}
 .grid.c3,.grid.c2{grid-template-columns:1fr}.grid.c4{grid-template-columns:1fr 1fr}
 .case-grid{grid-template-columns:1fr}
 .article aside{position:static;grid-template-columns:1fr 1fr;column-gap:24px}
 .auth-main{padding:56px 24px;max-width:none}.auth-side{padding:48px 24px;border-inline-start:0;border-top:1px solid var(--line)}
 .ds-swatches{grid-template-columns:repeat(2,1fr)}.ds-swatch{border-bottom:1px solid var(--line)}
 .cta-inner{align-items:flex-start}.tabpanel{padding:28px 20px}
 .field-row,.choice-grid{grid-template-columns:1fr;gap:0}
 .form{padding:24px 20px}.contact-list li{grid-template-columns:1fr;gap:4px}
}
@media(max-width:480px){.page-hero h1{font-size:38px}.grid.c4{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.fact{border-inline-end:0!important;border-bottom:1px solid var(--line);padding-inline:0!important}.fact:last-child{border-bottom:0}.cell{padding:24px 20px}.article aside{grid-template-columns:1fr}}
[dir=rtl] .page-hero h1,[dir=rtl] .auth-main h1{max-width:18ch}
[dir=rtl] .checks li:before,[dir=rtl] .cell-list li:before{margin-inline-end:0}
[dir=rtl] .contact-list a,[dir=rtl] .ds-code{direction:ltr}

.footer-contact{display:grid;gap:4px;margin-top:20px;font-size:12px;color:var(--secondary)}
.footer-contact a{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
[hidden]{display:none!important}
.tag-next{opacity:1}

/* ===== v3 additions: hotels / demo / pricing / integrations / deployment ===== */
.cell p,.steps p{font-size:14px}
.page-hero .lede{font-size:17px}
.lede.sm{font-size:15px}
.sec-note{font-size:14px;color:var(--secondary);margin-top:20px;max-width:62ch}
.link-row{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px}

/* simulation frame: used by the hotel hero visual and the interactive demo */
.sim{border:1px solid var(--line);background:var(--paper);min-width:0}
.sim-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sim-panes{display:grid;grid-template-columns:1fr 1fr}
.sim-pane{min-width:0;display:flex;flex-direction:column}
.sim-pane+.sim-pane{border-inline-start:1px solid var(--line)}
.sim-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--wash)}
.sim-body{padding:20px;display:grid;gap:12px;align-content:start;min-height:300px;flex:1}
.bubble{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;font-size:14px;max-width:92%}
.bubble .who{display:block;font:11px var(--font-mono);letter-spacing:.05em;color:var(--secondary);margin-bottom:2px}
[dir=rtl] .bubble .who{font-family:var(--font-body);letter-spacing:0}
.bubble.guest{background:var(--wash)}
.bubble.me{justify-self:end}
.sim-card{border:1px solid var(--ink);padding:14px 16px;font-size:14px;background:var(--paper)}
.sim-card h4,.sim-card .h4{margin:0 0 8px;font:500 14px var(--font-body)}
.sim-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.sim-card dt{color:var(--secondary)}.sim-card dd{margin:0;text-align:end;overflow-wrap:anywhere}
.sim-card.quiet{border-color:var(--line)}
.status-track{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.status-track span{font:11px var(--font-mono);letter-spacing:.04em;border:1px solid var(--line);padding:3px 8px;border-radius:2px;color:var(--secondary)}
[dir=rtl] .status-track span{font-family:var(--font-body);letter-spacing:0}
.status-track span.done{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.status-track span.now{border-color:var(--ink);color:var(--ink)}
.sim-empty{color:var(--secondary);font-size:14px;border:1px dashed var(--control);padding:18px;text-align:center}
.sim-actions{display:flex;gap:10px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line)}
.sim-actions .btn,.sim-controls .btn{min-height:44px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--ink)}.btn.secondary:disabled:hover{background:var(--paper);border-color:var(--line)}
.sim-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px 20px;border-top:1px solid var(--line);background:var(--wash)}
.sim-controls .hint{font-size:13px;color:var(--secondary);flex:1;min-width:200px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:44px;border:1px solid var(--line);background:var(--paper);padding:8px 16px;border-radius:var(--radius);font-size:13px}
.seg button:hover{border-color:var(--control)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stepper{display:flex;gap:6px;align-items:center;font:11px var(--font-mono);color:var(--secondary)}
.stepper i{width:20px;height:2px;background:var(--line);display:block}.stepper i.on{background:var(--ink)}
.key-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line)}
.key-steps li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);font-size:14px}
.key-steps li:last-child{border-bottom:0}
.key-steps b{width:26px;height:26px;border:1px solid var(--control);border-radius:50%;display:grid;place-items:center;font:11px var(--font-mono);font-weight:400}
.key-steps span{color:var(--secondary);display:block;font-size:13px;margin-top:2px}

/* rows: label / body / tag — used instead of card grids on several pages */
.rows{border-top:1px solid var(--line)}
.rowx{display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,2fr) auto;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.rowx h3{font-size:16px}.rowx p{font-size:14px;color:var(--secondary);line-height:1.7}
.rowx .tagcol{justify-self:end}

/* stage rows (deployment) */
.stage{display:grid;grid-template-columns:70px minmax(0,1fr);gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.stage:first-child{border-top:1px solid var(--line)}
.stage .n{font:400 clamp(1.6rem,2.4vw,2.2rem)/1 var(--font-display);letter-spacing:-.04em;color:var(--secondary)}
.stage h3{font-size:18px;margin-bottom:14px}
.stage-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stage-cols div p{font-size:14px;color:var(--secondary);line-height:1.7}
.stage-cols .micro{display:block;margin-bottom:6px;color:var(--ink)}
.stage .check{border-inline-start:2px solid var(--ink);padding-inline-start:14px}

/* factor list + scope table (pricing) */
.sticky-list{position:sticky;top:110px}
.factor{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line)}
.factor li{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;display:flex;gap:12px}
.factor li:before{content:'';width:6px;height:6px;margin-top:8px;border:1px solid var(--ink);flex:none}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.scope-grid>div{padding:28px}
.scope-grid>div+div{border-inline-start:1px solid var(--line);background:var(--wash)}
.scope-grid h3{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.scope-grid ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;font-size:14px}
.scope-grid li{display:flex;gap:12px;line-height:1.55}
.scope-grid li:before{content:'';width:5px;height:5px;margin-top:8px;border:1px solid var(--ink);flex:none}
.after{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.after div{padding:24px 24px 24px 0;border-inline-end:1px solid var(--line)}
.after div:last-child{border-inline-end:0}.after div+div{padding-inline-start:24px}
.after p{font-size:14px;color:var(--secondary);margin-top:8px}

/* flow diagram (integrations) */
.flow-d{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line)}
.flow-d>div{padding:22px 20px;border-inline-end:1px solid var(--line);position:relative;min-width:0}
.flow-d>div:last-child{border-inline-end:0}
.flow-d>div:not(:last-child):after{content:'→';position:absolute;inset-inline-end:-9px;top:22px;background:var(--paper);width:18px;text-align:center;font-size:13px;z-index:1}
[dir=rtl] .flow-d>div:not(:last-child):after{content:'←'}
.flow-d h3{font-size:15px;margin:8px 0 6px}.flow-d p{font-size:13px;color:var(--secondary);line-height:1.65}
.flow-d.dashed>div{border-style:solid}
.flow-d .badge{margin-bottom:6px}

/* readiness checklist */
.check-list{list-style:none;margin:0;padding:0;border:1px solid var(--line)}
.check-list li{border-bottom:1px solid var(--line)}.check-list li:last-child{border-bottom:0}
.check-list label{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 20px;cursor:pointer;min-height:56px;align-items:start}
.check-list input{width:20px;height:20px;accent-color:var(--ink);margin:2px 0 0}
.check-list label:hover{background:var(--wash)}
.check-list b{display:block;font-weight:500;font-size:14px}
.check-list span{display:block;font-size:13px;color:var(--secondary);margin-top:2px}
.check-tally{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border:1px solid var(--line);border-top:0;background:var(--wash);font-size:13px}

@media(max-width:1050px){.stage-cols{grid-template-columns:1fr 1fr}.flow-d{grid-template-columns:1fr 1fr}.flow-d>div:nth-child(2){border-inline-end:0}.flow-d>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.flow-d>div:not(:last-child):after{display:none}}
@media(max-width:800px){
 .sim-panes{grid-template-columns:1fr}.sim-pane+.sim-pane{border-inline-start:0;border-top:1px solid var(--line)}.sim-body{min-height:0}
 .rowx{grid-template-columns:1fr;gap:8px}.rowx .tagcol{justify-self:start}
 .stage{grid-template-columns:1fr;gap:10px;padding:24px 0}.stage-cols{grid-template-columns:1fr;gap:16px}
 .scope-grid{grid-template-columns:1fr}.scope-grid>div+div{border-inline-start:0;border-top:1px solid var(--line)}
 .after{grid-template-columns:1fr}.after div,.after div+div{padding:20px 0;border-inline-end:0;border-bottom:1px solid var(--line)}
 .sticky-list{position:static}
 .flow-d{grid-template-columns:1fr}.flow-d>div{border-inline-end:0;border-bottom:1px solid var(--line)}.flow-d>div:last-child{border-bottom:0}
}
@media(max-width:480px){.sim-body,.sim-head,.sim-top,.sim-actions,.sim-controls{padding-inline:16px}.scope-grid>div{padding:22px 18px}.seg button{flex:1 1 100%}.bubble{max-width:100%}.sim-card dl{grid-template-columns:1fr}.sim-card dd{text-align:start}.check-list label{padding:16px}}
@media(max-width:340px){.page-hero h1{font-size:34px}h2{font-size:1.75rem}.btn{padding-inline:16px;gap:12px}.nav-row{gap:8px}.logo{font-size:19px}}
.ctx-chip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px;font-size:13px}
.tagcol:empty{display:none}
@media(min-width:801px){.rowx:has(.tagcol:empty){grid-template-columns:minmax(160px,.7fr) minmax(0,2fr)}}
.hero-panel{display:grid;grid-template-columns:1.2fr 1fr;margin-bottom:24px}
.hero-panel-cta{border-bottom:0;border-inline-start:1px solid var(--line);justify-content:center}
.sim-top .badge,.sim-head .badge{white-space:normal;max-width:100%}
.sim-top>*,.sim-head>*{min-width:0}
.seg{min-width:0}
@media(max-width:800px){.hero-panel{grid-template-columns:1fr}.hero-panel-cta{border-inline-start:0;border-top:1px solid var(--line);justify-content:flex-start}}
.hero-panel .badge{white-space:normal;max-width:100%}
.hero-panel>*{min-width:0}
@media(max-width:800px){.hero-panel{grid-template-columns:minmax(0,1fr)}.hero-panel .panel-body{padding:28px 20px!important}}
.badge{max-width:100%}
.split>*,.form-split>*,.page-hero .split-hero>*,.grid>*{min-width:0}
@media(max-width:800px){.split,.form-split,.form-split.rev,.page-hero .split-hero{grid-template-columns:minmax(0,1fr)}.gridbg{padding:16px}.tabpanel{padding:24px 16px}}
.status-track span.done.now{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}

.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.person{padding:28px 24px 32px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;min-width:0}
.avatar{width:72px;height:72px;border:1px solid var(--line);background:var(--wash);display:grid;place-items:center;font:400 22px var(--font-display);letter-spacing:-.03em;margin-bottom:14px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.person h3{font-size:17px}.person .role{font:11px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--secondary)}
[dir=rtl] .person .role{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:13px}
.person .bio{font-size:14px;color:var(--secondary);line-height:1.7;margin-top:8px}
.facts-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts-list li{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,2fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts-list li>span:first-child{font:11px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--secondary);padding-top:3px}
[dir=rtl] .facts-list li>span:first-child{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:13px}
@media(max-width:800px){.facts-list li{grid-template-columns:1fr;gap:4px}}

.article>*{min-width:0}.article aside,.article-body{overflow-wrap:anywhere}
@media(max-width:800px){.article{grid-template-columns:minmax(0,1fr)}.article aside{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:480px){.article aside{grid-template-columns:minmax(0,1fr)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sim-card .h4{margin:0 0 8px;font:500 14px var(--font-body)}

/* ---- Pricing: plan cards, minutes estimator ---- */
.plan{gap:0;padding-bottom:32px}
.plan-name{font:500 12px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.plan-price{display:flex;align-items:baseline;gap:10px;margin-top:20px;min-height:56px}
.plan-price b{font:400 clamp(2.4rem,4vw,3.4rem)/1 var(--font-display);letter-spacing:-.05em}
.plan-price span{font-size:13px;color:var(--secondary)}
.plan .plan-for{margin-top:12px;font-size:13px}
.plan-minutes{margin-top:24px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan-minutes b{display:block;font:400 30px/1.1 var(--font-display);letter-spacing:-.04em}
.plan-minutes span{display:block;margin-top:8px;font-size:12px;color:var(--secondary)}
.plan-minutes .plan-rate{font:11px var(--font-mono);letter-spacing:.02em}
.plan .cell-list{margin:22px 0 28px}
.plan .btn{margin-top:auto;align-self:flex-start}
[dir=rtl] .plan-price b,[dir=rtl] .plan-minutes b{font-family:Inter,Arial,sans-serif;letter-spacing:normal}
.est-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.est input[type=number]{width:100%;border:1px solid var(--control);background:var(--paper);color:var(--ink);border-radius:var(--radius);font-size:14px;padding:12px;min-height:46px}
.est input[type=number]:hover{border-color:var(--ink)}
.est-out{margin-top:8px;padding-top:22px;border-top:1px solid var(--line)}
.est-total{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.est-total b{font:400 clamp(2rem,3.2vw,2.8rem)/1 var(--font-display);letter-spacing:-.05em}
.est-total span{font-size:13px;color:var(--secondary)}
[dir=rtl] .est-total b{font-family:Inter,Arial,sans-serif;letter-spacing:normal}
.meter{height:10px;background:var(--selected);margin-top:18px}
.meter i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s var(--ease)}
.est-fit{margin-top:16px;font-size:13px;line-height:1.7;color:var(--secondary);min-height:3.4em}
@media(max-width:800px){.est-fields{grid-template-columns:1fr}}
.cur-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.cur-bar[hidden]{display:none}
.cur-bar label{font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary)}
.cur-bar select{border:1px solid var(--control);background:var(--paper);color:var(--ink);border-radius:var(--radius);font-size:13px;padding:10px 12px;min-height:42px;min-width:230px;max-width:100%}
.cur-bar select:hover{border-color:var(--ink)}

/* facts band: a few plain numbers about what the platform does today (homepage) */
.facts-band{padding-block:8px 0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line)}
.facts>div{padding:36px 28px;border-inline-start:1px solid var(--line)}
.facts>div:first-child{border-inline-start:0}
.facts .num{font:400 56px/1 var(--font-mono);color:var(--ink);letter-spacing:-.02em}
.facts p:not(.num){margin-top:14px;color:var(--secondary);font-size:14px;line-height:1.5;max-width:28ch}
@media(max-width:720px){.facts{grid-template-columns:1fr}.facts>div{border-inline-start:0;border-top:1px solid var(--line);padding:24px 4px}.facts>div:first-child{border-top:0}.facts .num{font-size:44px}}
/* === micrographics === */
/* Micrographics: small, labelled, monochrome diagrams. State is carried by fill, ring and dash, never by colour alone. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- blueprint: the hotel, as VOCA sees it ---- */
.bp{margin:0;border:1px solid var(--line);background:var(--paper);position:relative;min-width:0}
.bp::before,.bp::after{content:'';position:absolute;width:5px;height:5px;background:var(--ink);top:-3px}
.bp::before{left:-3px}.bp::after{right:-3px}
.bp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--line)}
.bp-top .micro{display:flex;gap:8px;align-items:center}
.bp-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-inline:22px;border-bottom:1px solid var(--line)}
.bp-tabs{display:flex;gap:26px}
.bp-tabs button{background:none;border:0;padding:15px 0;font-size:12px;position:relative;color:var(--secondary);min-height:44px;display:flex;gap:8px;align-items:center}
.bp-tabs button[aria-selected=true]{color:var(--ink)}
.bp-tabs button[aria-selected=true]::after{content:'';height:2px;background:var(--ink);position:absolute;bottom:-1px;inset-inline:0}
.bp-play{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;min-height:36px;color:var(--ink)}
.bp-play:hover{border-color:var(--ink)}
[dir=rtl] .bp-play{font-family:var(--font-body);letter-spacing:0;text-transform:none}
.bp-wrap{position:relative;container-type:inline-size;direction:ltr;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.bp-stage{aspect-ratio:1000/460;width:100%;position:relative}
.bp-svg{width:100%;height:100%;overflow:hidden}
.bp-ln{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.bp-thin{fill:none;stroke:var(--control);stroke-width:.75;vector-effect:non-scaling-stroke}
.bp-hatch{stroke:var(--control);stroke-width:.6;vector-effect:non-scaling-stroke}
.bp-t{font:400 9px var(--font-mono);fill:var(--secondary);letter-spacing:.04em}
.bp-room .bp-rect{fill:var(--paper);stroke:var(--control);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke var(--slow)}
.bp-bed{fill:none;stroke:var(--control);stroke-width:.9;vector-effect:non-scaling-stroke}
.bp-dot,.bp-dot-s{fill:var(--paper);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--slow)}
.bp-room.occ .bp-rect{stroke:var(--ink)}
.bp-room.occ .bp-dot{fill:var(--ink)}
.bp-ring{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:0;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.bp-room.ping .bp-ring{animation:bp-ping 1.5s ease-out infinite}
.bp-qr{fill:var(--ink)}
.bp-cabin{fill:var(--paper);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;animation:bp-lift 16s var(--ease) infinite alternate}
.bp-link{fill:none;stroke:var(--ink);stroke-width:1.25;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .7s var(--ease)}
.bp-link.on{stroke-dashoffset:0}
.bp-node{fill:var(--ink)}
@keyframes bp-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35,1.7)}}
@keyframes bp-lift{0%{transform:translateY(0)}100%{transform:translateY(-290px)}}

/* team board: three lanes, aligned to the drawing's coordinates */
.bp-board{position:absolute;top:0;left:0;width:100%;aspect-ratio:1000/460;pointer-events:none}
.bp-lane{position:absolute;left:70%;width:28%;top:calc(var(--y)*1%);height:17.39%;border:1px dashed var(--control);background:var(--paper);padding:.8cqw 1cqw;overflow:hidden;direction:ltr}
[dir=rtl] .bp-lane{direction:rtl}
.bp-lane .micro{font-size:clamp(7px,.85cqw,10px);line-height:1.4}
.bp-card{opacity:0;transform:translateY(4px);transition:opacity var(--slow),transform var(--slow);margin-top:.3cqw}
.bp-card.on{opacity:1;transform:none}
.bp-ct-row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.bp-ct{font:500 clamp(9px,1.18cqw,14px)/1.3 var(--font-body);color:var(--ink)}
.bp-room-tag{font:11px var(--font-mono);font-size:clamp(7px,.85cqw,10px);border:1px solid var(--ink);padding:1px 4px;color:var(--ink)}
.bp-card .status-track{margin-top:.5cqw;gap:3px}
.bp-card .status-track span{font-size:clamp(6px,.72cqw,9px);padding:1px 4px;letter-spacing:.02em}
.bp-cn{font:400 clamp(7px,.85cqw,10px)/1.4 var(--font-mono);color:var(--secondary);margin-top:.4cqw}
.bp-card.esc{border:0}
.bp-lane:has(.bp-card.on){border-style:solid;border-color:var(--ink)}
.bp-lane:has(.bp-card.esc.on){border-style:dashed}
.bp-card.event .status-track{display:none}

.bp-caption{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;padding:22px;border-top:1px solid var(--line);background:var(--paper)}
.bp-caption h3{font-size:16px}
.bp-caption .small{margin-top:6px;max-width:52ch}
.bp-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;align-items:center}
.lg{display:inline-block;width:9px;height:9px;border:1px solid var(--ink);border-radius:50%;margin-inline-end:7px;vertical-align:-1px}
.lg-occ{background:var(--ink)}
.lg-link{width:18px;height:0;border:0;border-top:1.5px solid var(--ink);border-radius:0;vertical-align:3px}
.bp-feed{list-style:none;margin:0;padding:0;display:grid;gap:0;align-content:start;border-inline-start:1px solid var(--line)}
.bp-feed li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:5px 0 5px 14px;font:11px/1.5 var(--font-mono);color:var(--secondary);border-bottom:1px solid var(--line)}
[dir=rtl] .bp-feed li{padding:5px 14px 5px 0;font-family:var(--font-body)}
.bp-feed li:last-child{color:var(--ink);border-bottom:0}
.bp-feed time{color:var(--secondary)}

/* narrow containers: the building fills the width, the team board stacks beneath it */
@container (max-width:760px){
  .bp-board{position:static;aspect-ratio:auto;display:grid;gap:8px;padding:12px;background:var(--paper);border-top:1px solid var(--line)}
  .bp-lane{position:static;width:auto;height:auto;padding:10px 12px}
  .bp .bp-lane .micro,.bp .bp-room-tag,.bp .bp-cn,[dir=rtl] .bp .bp-lane .micro,[dir=rtl] .bp .bp-cn{font-size:11px}
  .bp .bp-ct,[dir=rtl] .bp .bp-ct{font-size:14px}
  .bp .bp-card .status-track span,[dir=rtl] .bp .bp-card .status-track span{font-size:10px;padding:2px 6px}
  .bp-card{margin-top:6px}
  .bp-rn,.bp-lv{display:none}
}
@container (max-width:520px){.bp-hatch{display:none}}

/* ---- flow: five steps, guest screen beside team screen ---- */
.flow{border:1px solid var(--line);background:var(--paper)}
.flow-track{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
.flow-step{background:none;border:0;border-inline-end:1px solid var(--line);padding:18px 20px 20px;text-align:start;position:relative;min-height:84px;display:block}
.flow-step:last-child{border-inline-end:0}
.flow-step .n{font:11px var(--font-mono);color:var(--secondary);display:block}
.flow-step .t{display:block;margin-top:8px;font:500 15px/1.3 var(--font-body)}
.flow-step:hover{background:var(--wash)}
.flow-step[aria-selected=true]{background:var(--wash)}
.flow-step .bar{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center}
[dir=rtl] .flow-step .bar{transform-origin:right center}
.flow-step[aria-selected=true] .bar{transform:scaleX(1)}
.flow.playing .flow-step[aria-selected=true] .bar{animation:flow-fill var(--dur,6500ms) linear forwards}
@keyframes flow-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.flow-panel{grid-template-columns:.9fr 1.05fr 1.05fr}
.flow-panel:not([hidden]){display:grid}
.flow-copy{padding:28px}
.flow-copy h3{margin-top:10px;font-size:22px;font-family:var(--font-display);font-weight:400;letter-spacing:-.03em}
.flow-copy .small{margin-top:12px;max-width:34ch;line-height:1.7}
.mini{border-inline-start:1px solid var(--line);padding:24px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;min-height:250px}
.mini-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font:400 11px/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin-bottom:12px}
[dir=rtl] .mini-h{font-family:var(--font-body);letter-spacing:0;text-transform:none}
.mini-card{position:relative;border:1px solid var(--ink);background:var(--paper);padding:16px 18px;font-size:13px}
.mini-empty{border:1px dashed var(--control);display:grid;place-items:center;min-height:120px}
.mini-l{font:400 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin-top:12px}
.mini-card>.mini-l:first-child{margin-top:0}
[dir=rtl] .mini-l{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:11px}
.mini-field{border:1px solid var(--line);padding:9px 12px;font:500 16px var(--font-mono);margin-top:6px}
.mini-btn{display:inline-block;background:var(--ink);color:var(--paper);padding:9px 14px;font-size:12px;margin-top:12px;text-align:center}
.mini-btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--ink);margin-inline-start:8px}
.mini-btns{display:flex;margin-top:4px}
.mini-card>p.mini-btn{display:block}
.seg{display:inline-grid;grid-auto-flow:column;border:1px solid var(--ink);font-size:12px;direction:ltr}
.seg span{padding:7px 14px}
.seg .on{background:var(--ink);color:var(--paper)}
.mini-bubble{border:1px solid var(--line);padding:9px 12px;font-size:13px;line-height:1.5;background:var(--paper)}
.mini-bubble.me{border-color:var(--ink)}
.mini-bubble .who{display:block;font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.mg-wave{width:100%;height:36px;margin-top:12px;fill:var(--ink);direction:ltr}
.mini-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.mini-total{font:500 12px var(--font-mono);border-bottom:0}
.mini-ref{margin-top:12px}
.mini-title{font:500 14px/1.3 var(--font-body);margin-bottom:10px}
.mini-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:12px}
.mini-dl dt{color:var(--secondary)}
.mini-dl dd{margin:0}
.mini-card .status-track{margin-top:2px}
.mini-stars{display:flex;gap:6px;margin:14px 0 6px}
.mini-stars i{width:14px;height:14px;border:1px solid var(--ink);display:block;clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%);background:var(--paper);border:0;outline:0;box-shadow:none;position:relative}
.mini-stars i::after{content:'';position:absolute;inset:1px;background:var(--paper);clip-path:inherit}
.mini-stars i::before{content:'';position:absolute;inset:0;background:var(--ink);clip-path:inherit}
.mini-esc{margin-top:12px;border:1px dashed var(--ink);padding:8px 10px;font:400 11px/1.5 var(--font-mono)}
[dir=rtl] .mini-esc{font-family:var(--font-body)}
.mini-banner{background:var(--ink);color:var(--paper);padding:9px 12px;font-size:13px;margin-bottom:12px}
.flow-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 22px;border-top:1px solid var(--line)}

/* ---- specimens: annotated micrographs of the real screens ---- */
.specimens-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:64px;margin-bottom:16px;flex-wrap:wrap}
.specimens{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
.spec{border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column}
.spec-v{height:184px;padding:24px 22px;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px;border-bottom:1px solid var(--line)}
.spec-v .mini-card{width:100%;max-width:290px;font-size:12px;padding:14px 16px}
.spec-t{padding:16px 20px 20px}
.spec-t h3{font-size:15px}
.spec-t .small{margin-top:6px;font-size:12px;line-height:1.6}
.legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font:11px/1.4 var(--font-mono);color:var(--secondary)}
[dir=rtl] .legend{font-family:var(--font-body)}
.legend li{display:flex;gap:10px;align-items:center}
.pin{width:16px;height:16px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);font:500 9px/1 var(--font-mono);display:inline-grid;place-items:center;flex:none;color:var(--ink)}
.spec-v .pin{position:absolute}
.wifi .mini-dl2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.wifi .dots{letter-spacing:.14em;font-family:var(--font-mono)}
.spec-v .wifi{padding-inline-end:88px}
.wifi .qr{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);width:56px;height:56px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;border:1px solid var(--ink);padding:4px}
.wifi .qr i{background:var(--ink);display:block}
.wifi .qr i:nth-child(3n){background:var(--paper)}
.wifi .qr i:nth-child(4n+1){background:var(--paper)}
.life-line{position:relative;height:18px;margin:10px 4px 6px}
.life-line::before{content:'';position:absolute;inset-inline:0;top:8px;border-top:1px solid var(--ink)}
.life-line i{position:absolute;top:3px;width:11px;height:11px;border:1px solid var(--ink);border-radius:50%;background:var(--paper)}
.life-line .a{inset-inline-start:0;background:var(--ink)}
.life-line .b{inset-inline-start:calc(50% - 6px);background:var(--ink)}
.life-line .c{inset-inline-end:0}
.life-lab{display:flex;justify-content:space-between;gap:6px}
.life-lab .micro{font-size:9px}

@media(max-width:1000px){
  .specimens{grid-template-columns:repeat(2,1fr)}
  .bp-caption{grid-template-columns:1fr}
  .bp-feed{border-inline-start:0;border-top:1px solid var(--line)}
  .bp-feed li{padding-inline-start:0}
  .flow-track{grid-template-columns:repeat(5,minmax(112px,1fr));overflow-x:auto}
  .flow-panel{grid-template-columns:1fr 1fr}
  .flow-copy{grid-column:1/-1;padding:22px}
  .mini{border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .specimens{grid-template-columns:1fr}
  .flow-panel{grid-template-columns:1fr}
  .mini{border-inline-start:0;min-height:0}
  .bp-bar{padding-inline:16px}.bp-top{padding-inline:16px}.bp-tabs{gap:16px}
  .bp-caption{padding:18px 16px}
}

/* micrographics: Arabic needs a little more size inside the small team cards */
[dir=rtl] .bp-lane .micro,[dir=rtl] .bp-cn{font-size:clamp(8px,.95cqw,11px)}
[dir=rtl] .bp-card .status-track span{font-size:clamp(7px,.82cqw,10px)}
[dir=rtl] .bp-ct{font-size:clamp(10px,1.25cqw,15px)}
.bp-card .status-track span{font-size:clamp(7px,.78cqw,9px)}


/* === stage === */
/* homepage: one conversation, followed to done. An ink stage; every line is paper at some opacity. No shadows, no gradients. */
.stage-band{background:var(--ink);color:var(--paper);padding-block:0 8px;border-bottom:1px solid var(--ink)}
.stg{--p1:color-mix(in srgb,var(--paper) 14%,transparent);--p2:color-mix(in srgb,var(--paper) 30%,transparent);--p3:color-mix(in srgb,var(--paper) 58%,transparent);--p4:color-mix(in srgb,var(--paper) 82%,transparent);margin:0;position:relative}
.stg .micro,.stg .badge{color:var(--p3)}
.stg-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--p1)}
.stg-top .micro{display:flex;gap:10px;align-items:center}
.stg .live-dot{background:var(--paper)}
.stg-ctrl{display:flex;align-items:center;gap:20px}
.stg-tabs{display:flex;gap:6px}
.stg-tabs button{background:none;border:1px solid transparent;color:var(--p3);font-size:12px;padding:8px 14px;min-height:36px;border-radius:var(--radius)}
.stg-tabs button:hover{color:var(--paper)}
.stg-tabs button[aria-selected=true]{color:var(--ink);background:var(--paper)}
.stg .bp-play{background:none;color:var(--paper);border-color:var(--p2)}
.stg .bp-play:hover{border-color:var(--paper)}
.stg-view{position:relative;container-type:inline-size;direction:ltr;overflow:hidden}
.stg-note.left{transform:translate(-100%,-50%);text-align:right;max-width:19cqw}
.stg-svg{display:block;width:100%;height:auto;overflow:visible}
.stg-dot{fill:var(--paper);opacity:.16}
.stg-hatchln{stroke:var(--paper);stroke-width:1;opacity:.5}
.stg-ln{fill:none;stroke:var(--paper);stroke-width:1.1;stroke-opacity:.8;vector-effect:non-scaling-stroke}
.stg-ln.thin{stroke-opacity:.38;stroke-width:1}
.stg-ln.hair{stroke-opacity:.2;stroke-width:.8}
.stg-ln.arc{stroke-opacity:.55;stroke-width:1.4}
.stg-ln.draw{stroke-dasharray:1;stroke-dashoffset:0}
.stg-fill{fill:var(--paper)}
.stg-t{font:400 9.5px var(--font-mono);fill:var(--paper);fill-opacity:.55;letter-spacing:.08em;text-transform:uppercase;direction:ltr}
[dir=rtl] .stg-t{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:11px}
.stg-t.hud{font-size:9px;fill-opacity:.8}
.stg-ghost{font:400 168px/1 var(--font-display);fill:none;stroke:var(--paper);stroke-width:1.2;letter-spacing:-.04em;stroke-opacity:.14;direction:ltr}
.stg-rib{fill:none;stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke}
.stg-rib.core{stroke-width:1.7}
.stg-utt{font-family:var(--font-display);fill:var(--paper);letter-spacing:-.02em;font-weight:400}
.stg-room .stg-inner{fill:var(--paper);fill-opacity:0;stroke:var(--paper);stroke-opacity:.34;stroke-width:1;vector-effect:non-scaling-stroke}
.stg-glyph{fill:none;stroke:var(--paper);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.stg-thread{fill:none;stroke:var(--paper);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;opacity:0}
.ripple{stroke-width:1.4;opacity:0}
.stg-stampbox{fill:var(--ink);stroke:var(--paper);stroke-width:1.6;vector-effect:non-scaling-stroke}
.stg-t.stampt{font-size:10.5px;fill-opacity:1;font-weight:500;letter-spacing:.14em}
.stg-t.stampr{font-size:9px;fill-opacity:.7}
[dir=rtl] .stg-t.stampt{font-size:12px;letter-spacing:0}
.stg-stamp{transform-box:fill-box}
.stg-dotc{fill:var(--ink);stroke:var(--paper);stroke-width:1;vector-effect:non-scaling-stroke}
.stg-dotc.on{fill:var(--paper)}
.stg-node{fill:var(--ink);stroke:var(--paper);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .2s}
.stg-node.lit,.stg-station.reached .stg-node{fill:var(--paper)}
.stg-glyph.st{stroke-opacity:.38;transition:stroke-opacity .25s}
.stg-station.reached .stg-glyph.st{stroke-opacity:1}
.stg-t.st{fill-opacity:.45;transition:fill-opacity .25s}
.stg-station.reached .stg-t.st,.stg-station.current .stg-t.st{fill-opacity:1}
.stg-station.current .stg-node{stroke-width:2.4}
.stg-donebg{fill:var(--paper)}
.stg-check{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.stg-done{opacity:0}
.stg-pinbg{fill:var(--ink);stroke:var(--paper);stroke-width:1.2;vector-effect:non-scaling-stroke}
.stg-t.pinnum{fill-opacity:1;font-size:10px;font-weight:500;letter-spacing:0}
.stg-pin{transition:opacity .25s}
/* overlay: notes beside the pins and the team tray */
.stg-ov{position:absolute;inset:0;pointer-events:none}
.stg-note{position:absolute;font:400 clamp(8px,.9cqw,11px)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);transition:opacity .25s;white-space:normal;max-width:10.5cqw;direction:ltr;transform:translateY(-50%)}
[dir=rtl] .stg-note{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:clamp(9px,1cqw,12px)}
.stg-lane{position:absolute;border:1px dashed var(--p2);padding:.9cqw 1.1cqw;overflow:hidden;transition:border-color .2s;direction:ltr}
[dir=rtl] .stg-lane{direction:rtl}
.stg-lane.on{border:1px solid var(--paper)}
.stg-ln-t{font-size:clamp(7px,.85cqw,10px);line-height:1.4;margin:0;color:var(--p3)}
.stg-card{opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s;margin-top:.4cqw}
.stg-card.on{opacity:1;transform:none}
.stg-ct-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.stg-ct{font:500 clamp(9px,1.15cqw,14px)/1.3 var(--font-body);color:var(--paper)}
.stg-tag{font:400 clamp(7px,.85cqw,10px) var(--font-mono);border:1px solid var(--p3);padding:1px 5px;color:var(--p4)}
.stg-card .status-track{margin-top:.5cqw;gap:3px}
.stg-card .status-track span{font-size:clamp(6px,.72cqw,9px);padding:1px 4px;border-color:var(--p2);color:var(--p3)}
.stg-card .status-track span.done{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.stg-card .status-track span.now{border-color:var(--paper);box-shadow:none;outline:1px solid var(--paper);outline-offset:1px}
.stg-cn{font:400 clamp(7px,.85cqw,10px)/1.4 var(--font-mono);color:var(--p3);margin-top:.4cqw}
/* chapters */
.stg-bar{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--p1);border-bottom:1px solid var(--p1)}
.stg-ch{position:relative;background:none;border:0;border-inline-end:1px solid var(--p1);color:var(--p3);text-align:start;padding:18px 20px 20px;min-height:76px}
.stg-ch:last-child{border-inline-end:0}
.stg-ch .n{display:block;font:400 11px var(--font-mono);color:var(--p3)}
.stg-ch .t{display:block;margin-top:6px;font:500 15px/1.3 var(--font-body);color:var(--p3)}
.stg-ch:hover .t{color:var(--paper)}
.stg-ch[aria-selected=true] .t,.stg-ch.past .t{color:var(--paper)}
.stg-ch .bar{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--paper);transform:scaleX(0);transform-origin:left center}
[dir=rtl] .stg-ch .bar{transform-origin:right center}
.stg-cap{padding:22px 0 8px;font-size:15px;line-height:1.7;color:var(--p4);max-width:62ch;min-height:5.2em}
.stg-fine{padding-bottom:28px}
@container (max-width:760px){
  .stg-ov{position:static;display:grid;gap:8px;padding:14px 0 0}
  .stg-lane{position:static;width:auto;height:auto;padding:10px 12px}
  .stg-lane:not(.mine){display:none}
  .stg-note{display:none}
  .stg-ln-t{font-size:11px}.stg-ct{font-size:15px}.stg-tag,.stg-cn{font-size:11px}
  .stg-card .status-track span{font-size:10px;padding:2px 6px}
}
@media(max-width:760px){
  .stg-bar{grid-template-columns:repeat(2,1fr)}
  .stg-ch{border-bottom:1px solid var(--p1)}
  .stg-ch:nth-child(2n){border-inline-end:0}
  .stg-ctrl{width:100%;justify-content:space-between}
}
/* === /stage === */
/* === /micrographics === */

/* === plates === */
/* Plates: framed micrographs for page heroes and small cards. Paper pages, ink lines, state by fill / ring / dash. */
.page-hero .split-hero.plated{align-items:center}
.plate{margin:0;border:1px solid var(--line);background:var(--paper);position:relative;min-width:0}
.plate::before,.plate::after{content:'';position:absolute;width:5px;height:5px;background:var(--ink);top:-3px}
.plate::before{left:-3px}.plate::after{right:-3px}
.plate-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.plate-replay{background:none;border:1px solid var(--line);border-radius:var(--radius);font:500 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;min-height:30px;color:var(--secondary)}
.plate-replay:hover{border-color:var(--ink);color:var(--ink)}
[dir=rtl] .plate-replay{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:11px}
.plate-svg{display:block;width:100%;height:auto;direction:ltr;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.plate-note{padding:10px 16px;border-top:1px solid var(--line);margin:0}
.plate.sm .plate-top{padding:10px 14px}
.plate-card{border:1px solid var(--line);margin-bottom:20px;background:var(--paper)}
.plate-card .plate-svg{background-size:20px 20px}
.pl-ln{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pl-ln.thin{stroke:var(--control);stroke-width:1}
.pl-ln.hair{stroke:var(--line);stroke-width:1}
.pl-ln.dash{stroke-dasharray:4 4}
.pl-ln.bgfill,.bgfill{fill:var(--paper)}
.pl-ln.inv{stroke:var(--paper)}
.pl-fill{fill:var(--ink);stroke:none}
.pl-node{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .2s}
.pl-node.on{fill:var(--ink)}
.pl-in{fill:var(--ink);fill-opacity:0;stroke:var(--ink);stroke-opacity:0;stroke-width:1;vector-effect:non-scaling-stroke}
.pl-in.lit{fill-opacity:.1;stroke-opacity:.5}
.pl-in.lit.hot{fill-opacity:.92;stroke-opacity:1}
.pl-th{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.pl-t{font:400 9.5px var(--font-mono);fill:var(--ink);letter-spacing:.07em;text-transform:uppercase;direction:ltr}
.pl-t.dim{fill:var(--secondary)}
.pl-t.tb{fill:var(--ink)}
.pl-t.inv{fill:var(--paper)}
.pl-t.big{font:400 22px var(--font-display);letter-spacing:-.02em;text-transform:none}
.pl-t.pn{font-size:10px;font-weight:500;letter-spacing:0;fill:var(--ink)}
[dir=rtl] .pl-t{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:11px}
[dir=rtl] .pl-t.big{font-family:var(--font-display)}
.pl-pinbg{fill:var(--paper);stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.pl-mini .pl-ln.thin{stroke:var(--control)}
.notfound .split-hero.plated{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:760px){.plate .pl-t{font-size:13.5px}[dir=rtl] .plate .pl-t{font-size:14.5px}.plate .pl-t.big{font-size:26px}.page-hero .split-hero.plated{grid-template-columns:1fr}.notfound .split-hero.plated{grid-template-columns:1fr;gap:32px}.plate-top{padding:10px 14px}}
/* === /plates === */