/* Syllo interface: every page. The older rules below were the "midnight" design; their colours are mapped
   onto the field palette (lime → signal orange, cobalt → night navy, midnight → ink) and the Field layer at the end wins.
   Original notes:
   Palette: Midnight Black #030407, Electric Cobalt #1558C9, Acid Lime #D4FF24, used as flat colour only.
   No gradients, no glows, no shadows on things at rest: surfaces are told apart by a step in tone,
   and whole sections can change their field colour (cobalt or lime).
   The idea: Syllo is a black notch hanging from the top edge of a screen, so interface fragments on
   the page hang from the top edge of their colour field the same way.
   Type: one family, Archivo. Expanded and bold for headlines, normal width for text.
   No accent words, no monospace labels, no capitals-only eyebrows.
   Dark is the identity; the site theme switch also offers a light variant. */

/* Archivo (SIL Open Font License, assets/fonts/OFL.txt), self-hosted: one variable file per subset,
   with width (62–125%) and weight (100–900) axes. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("/assets/fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:var(--sans);
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --midnight:#0b0b0d;--cobalt:#0f2140;--lime:#ff4f17;
  --wrap:1360px;--gutter:clamp(16px,3.2vw,40px);--header:72px;
  --r-sm:8px;--r:14px;--r-lg:18px;--r-xl:26px;
  --gap:clamp(96px,12vw,184px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --arrow-right:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M14 6l6 6-6 6'/></svg>");
  --arrow-left:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12H4M10 6l-6 6 6 6'/></svg>");
}
body.ui,body.ui[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0b0d;--bg-2:#07090e;--surface:#0c0f16;--surface-2:#131722;--surface-3:#1c2130;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);--line-3:rgba(255,255,255,.3);
  --text:#f4f6fa;--text-2:#bcc2ce;--text-3:#828a9b;
  --accent:#ff4f17;--accent-ink:#0b0b0d;--accent-text:#ff4f17;--accent-hover:#ff7a4d;
  --blue:#0f2140;--blue-text:#8db0ff;--blue-soft:rgba(15,33,64,.22);
  --lime-soft:rgba(255,79,23,.12);--danger:#ff7a6b;--danger-soft:rgba(255,122,107,.12);--warn:#ffc65c;
  --shadow:0 28px 60px -28px rgba(0,0,0,.85);
  /* The notch, a tone above the midnight page so its shape shows (black in the light theme) */
  --n-bg:#181c28;--n-2:#252a39;--n-3:#323849;
}
body.ui[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f4f6;--bg-2:#eceef1;--surface:#ffffff;--surface-2:#e7e9ee;--surface-3:#dcdfe6;
  --line:rgba(3,4,7,.09);--line-2:rgba(3,4,7,.16);--line-3:rgba(3,4,7,.32);
  --text:#0b0b0d;--text-2:#3d4454;--text-3:#687081;
  --accent:#ff4f17;--accent-ink:#0b0b0d;--accent-text:#0f2140;--accent-hover:#e8430f;
  --blue:#0f2140;--blue-text:#0f2140;--blue-soft:rgba(15,33,64,.1);
  --lime-soft:rgba(150,190,0,.16);--danger:#c8372a;--danger-soft:rgba(200,55,42,.08);--warn:#9a6200;
  --shadow:0 24px 50px -26px rgba(3,4,7,.35);
  --n-bg:#0b0b0d;--n-2:#161a25;--n-3:#232838;
}

/* Colour fields. Each redefines the text tokens for what sits on it. */
.ui .field-cobalt{--text:#fff;--text-2:rgba(255,255,255,.86);--text-3:rgba(255,255,255,.7);--line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.26);--line-3:rgba(255,255,255,.55);--accent-text:#ff4f17;--blue-text:#ff4f17;--surface:#16294a;--surface-2:#1c3157;background:#0f2140;color:#fff}
.ui .field-lime{--text:#0b0b0d;--text-2:rgba(3,4,7,.8);--text-3:rgba(3,4,7,.64);--line:rgba(3,4,7,.12);--line-2:rgba(3,4,7,.2);--line-3:rgba(3,4,7,.45);--accent:#0b0b0d;--accent-ink:#ff4f17;--accent-hover:#1a1e28;--accent-text:#0b0b0d;--blue-text:#0b0b0d;--surface:#ff6a3d;--surface-2:#e8430f;background:#ff4f17;color:#0b0b0d}
.ui .field-cobalt :focus-visible,.ui .field-lime :focus-visible{outline-color:currentColor}

/* ---------- Base ---------- */
.ui *,.ui *::before,.ui *::after{box-sizing:border-box}
html:has(body.ui){background:#0b0b0d;scroll-padding-top:calc(var(--header) + 24px)}
html:has(body.ui[data-theme="light"]){background:#f3f4f6}
body.ui{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 16.5px/1.6 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;font-variant-numeric:tabular-nums}
:where(.ui) img,:where(.ui) svg{display:block;max-width:100%}
:where(.ui) a{color:inherit;text-decoration:none}
:where(.ui) .si{display:inline-block;width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
:where(.ui) :is(button,input,select,textarea){font:inherit;color:inherit}
:where(.ui) button{cursor:pointer}
.ui [hidden]{display:none!important}
.ui ::selection{background:var(--accent);color:var(--accent-ink)}
.ui :focus-visible:not(.desktop-screen *){outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
body.ui[data-theme="light"] :focus-visible{outline-color:var(--blue)}
:where(.ui) :is(h1,h2,h3,h4){margin:0;color:var(--text);font-weight:650;font-stretch:108%;letter-spacing:-.025em;line-height:1.1}
/* Emphasis inside a headline is not styled: the words carry it. */
.ui :is(h1,h2,h3,.display,.title,.footer-tagline,blockquote) em{font:inherit;color:inherit}
:where(.ui) p{margin:0}
:where(.ui) :is(code,kbd){font:500 .88em/1 var(--mono);padding:.22em .45em;border-radius:6px;background:var(--surface-2);color:var(--text)}
.ui .skip-link{position:absolute;z-index:200;left:12px;top:-80px;padding:10px 14px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:600}
.ui .skip-link:focus{top:12px}
.ui .wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.ui .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}
.ui main{flex:1 0 auto}

/* Page scrollbar from site.js */
.ui .custom-scrollbar,html.custom-scrollbar:has(body.ui){scrollbar-width:none}
html.custom-scrollbar:has(body.ui)::-webkit-scrollbar{display:none;width:0;height:0}
.ui .site-scrollbar{position:fixed;z-index:150;top:4px;right:0;bottom:4px;width:12px;pointer-events:none}
.ui .site-scrollbar-thumb{position:absolute;top:0;left:3px;width:6px;min-height:40px;border-radius:999px;background:var(--line-3);pointer-events:auto;touch-action:none;cursor:grab;transition:background .2s}
.ui .site-scrollbar-thumb:hover,.ui .site-scrollbar-thumb:active{background:var(--accent)}
body.ui[data-theme="light"] .site-scrollbar-thumb:hover{background:var(--blue)}

/* ---------- Type ---------- */
.ui .display{font-family:var(--sans);font-weight:700;font-stretch:115%;font-size:clamp(42px,6.6vw,100px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.ui .title{font-family:var(--sans);font-weight:700;font-stretch:112%;font-size:clamp(32px,4.4vw,62px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.ui .lead{max-width:58ch;color:var(--text-2);font-size:clamp(17px,1.45vw,20px);line-height:1.5}
.ui .muted{color:var(--text-2)}
.ui .fine{color:var(--text-3);font-size:13.5px;line-height:1.55}
.ui .label{color:var(--text-3);font:600 13px/1.3 var(--sans);letter-spacing:0}
.ui .kicker{display:none}
.ui .serif-em{font:inherit;color:inherit}

/* ---------- Brand ---------- */
.ui .brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-weight:750;font-stretch:118%;font-size:20px;letter-spacing:-.04em}
.ui .brand img{width:28px;height:28px}
.ui .brand b{font-weight:750}
.ui .brand i{font-style:normal;color:var(--accent-text)}

/* ---------- Buttons ---------- */
.ui .btn{--h:48px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 24px;border:1.5px solid transparent;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:650 15.5px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;transition:background .18s,border-color .18s,color .18s,transform .12s var(--ease)}
.ui .btn:hover{background:var(--accent-hover)}
.ui .btn:active{transform:scale(.97)}
.ui .btn svg{width:18px;height:18px;flex:none}
.ui .btn .arrow{display:none}
.ui .btn-ghost{background:transparent;border-color:var(--line-3);color:var(--text)}
.ui .btn-ghost:hover{background:transparent;border-color:var(--text)}
.ui .btn-blue{background:var(--blue);color:#fff}
.ui .btn-blue:hover{background:#16294a}
.ui .btn-dark{background:#0b0b0d;color:#ff4f17}
.ui .btn-dark:hover{background:#1a1e28}
.ui .btn-danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 50%,transparent);color:var(--danger)}
.ui .btn-danger:hover{background:var(--danger-soft)}
.ui .btn-sm{--h:38px;padding:0 17px;font-size:14px}
.ui .btn-block{width:100%}
.ui .btn:disabled,.ui .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.ui .link{color:var(--blue-text);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--blue-text) 45%,transparent);text-underline-offset:3px}
.ui .link:hover{text-decoration-color:currentColor}
.ui .arrow-link{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:var(--line-3);text-underline-offset:4px}
.ui .arrow-link:hover{text-decoration-color:currentColor}
.ui .arrow-link svg{display:none}

/* ---------- Header: the wordmark and the actions in a plain bar; the links are the notch ----------
   On every page the main links sit in a black notch fixed to the very top edge of the window, the
   way Syllo sits at the top of a screen (its curved shoulders come from the .hang rules below).
   On Home the notch also grows to show the story (ui.js). */
.ui .ui-header{position:sticky;top:0;z-index:100;height:var(--header);background:var(--bg);color:var(--text)}
.ui .ui-header .wrap{display:flex;align-items:center;gap:clamp(20px,3vw,48px);height:100%}
.ui .ui-nav{--w:0px;--rad:24px;--sh:20px;--spring:linear(0,0.052 2%,0.2 5%,0.47 9.5%,0.76 14.5%,0.94 19.5%,1.035 24.5%,1.066 29.5%,1.062 34%,1.036 41%,1.008 50%,0.994 60%,0.998 75%,1);position:fixed;top:0;left:50%;z-index:160;display:flex;flex-wrap:wrap;justify-content:center;gap:0 2px;width:max-content;min-width:min(var(--w),100vw - 40px);max-width:calc(100vw - 40px);padding:calc(6px + env(safe-area-inset-top,0px)) 10px 8px;border-radius:0 0 var(--rad) var(--rad);background:var(--n-bg,#0b0b0d);color:#f4f6fa;transform:translateX(-50%);transition:min-width .56s var(--spring),border-radius .56s var(--spring),transform .32s ease}
/* Home: over the live demo the demo's own notch takes the top edge (notch-preview.js). */
.ui .ui-nav.is-tucked:not(:focus-within){transform:translate(-50%,calc(-100% - 4px))}
.ui .ui-nav a{flex:none;padding:10px 16px;border-radius:999px;color:rgba(244,246,250,.72);font:550 14.5px/1 var(--sans);white-space:nowrap;transition:background .18s,color .18s}
.ui .ui-nav a:hover{background:var(--n-2,#161a25);color:#f4f6fa}
.ui .ui-nav a[aria-current="page"]{background:#ff4f17;color:#0b0b0d;font-weight:650}
.ui .ui-nav :focus-visible{outline-color:#ff4f17}
.ui .ui-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.ui .ui-actions .session{padding:9px 6px;color:var(--text-2);font:500 15px/1 var(--sans)}
.ui .ui-actions .session:hover{color:var(--text)}
/* The links are always in the notch, so the old menu button is never needed. */
.ui .nav-toggle{display:none!important}
/* Home: the header sits on the lime field. */
body.ui[data-page="home"] .ui-header{position:relative;--text:#0b0b0d;--text-2:rgba(3,4,7,.72);--line-3:rgba(3,4,7,.45);--surface-2:#e8430f;--accent:#0b0b0d;--accent-ink:#ff4f17;--accent-hover:#1a1e28;--accent-text:#0b0b0d;background:#ff4f17}
body.ui[data-page="home"] .ui-header :focus-visible{outline-color:#0b0b0d}

/* Theme switch, restyled when it lives in a header slot */
.ui .theme-slot{display:flex}
.ui .theme-slot .home-theme-toggle{position:static;display:block;width:52px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text);view-transition-name:none}
.ui .theme-slot .home-theme-toggle svg{width:100%;height:100%;fill:currentColor}
.ui .home-theme-track{fill:var(--surface-2);stroke:none;transition:fill .3s}
.ui .home-theme-thumb{fill:var(--text);transition:transform .4s var(--ease),fill .3s}
.ui .home-theme-sun{fill:var(--text);transition:opacity .25s}
.ui .home-theme-sun-center{fill:var(--surface-2)}
.ui .home-theme-moon{fill:var(--text);opacity:0;transition:opacity .25s}
body.ui[data-home-theme="dark"] .home-theme-thumb{transform:translateX(-90px);fill:var(--accent)}
body.ui[data-home-theme="dark"] .home-theme-sun{opacity:0}
body.ui[data-home-theme="dark"] .home-theme-moon{opacity:1}
.ui .site-theme-corner{position:fixed;z-index:120;top:16px;right:16px;width:52px;height:28px;padding:0;border:0;background:transparent}

/* Narrower screens: the notch first, the header row under it. */
@media (max-width:1080px){
  body.ui{--header:60px}
  .ui .ui-header{position:relative;height:auto;padding-top:52px}
  .ui .ui-header .wrap{height:var(--header)}
  .ui .ui-actions{gap:8px}
  .ui .ui-nav{padding:calc(5px + env(safe-area-inset-top,0px)) 8px 7px}
  .ui .ui-nav a{padding:9px 12px;font-size:13.5px}
  /* Pages without the header row (dashboard, sign-in, checkout) make room for the notch. */
  body.ui.notch-solo{padding-top:52px}
  body.ui.notch-solo .dash-top{top:52px}
}
@media (max-width:380px){.ui .ui-nav a{padding:9px;font-size:13px}}
@media (max-width:520px){
  .ui .ui-actions .btn{padding:0 15px;--h:38px;font-size:14px}
  .ui .ui-actions .session{display:none}
}

/* ---------- Sections ---------- */
.ui .hero{padding:clamp(64px,9vw,136px) 0 clamp(48px,6vw,88px)}
.ui .hero .lead{margin-top:clamp(20px,2.4vw,32px)}
.ui .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.ui .section{padding:clamp(48px,7vw,104px) 0}
.ui .section-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:16px 48px;margin-bottom:clamp(28px,3.6vw,48px)}
.ui .section-head .lead{max-width:48ch}
@media (max-width:820px){.ui .section-head{grid-template-columns:minmax(0,1fr)}}
.ui .rule{height:0;margin:0;border:0}

/* ---------- Cards: a step in tone, no outline ---------- */
.ui .card{position:relative;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg);background:var(--surface)}
.ui .card h2{font-size:21px;letter-spacing:-.02em}
.ui .card h3{font-size:17px}
.ui .card > p + p{margin-top:10px}
.ui .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.ui .card-head p{margin-top:4px;color:var(--text-2);font-size:14.5px}
.ui .grid{display:grid;gap:12px}
.ui .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ui .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.ui .grid-3,.ui .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ui .grid-2,.ui .grid-3,.ui .grid-4{grid-template-columns:minmax(0,1fr)}}
.ui .icon-tile{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:13px;background:var(--surface-2);color:var(--text)}
.ui .icon-tile svg{width:20px;height:20px}
.ui .icon-tile.lime{background:var(--accent);color:var(--accent-ink)}
.ui .icon-tile.blue{background:var(--blue);color:#fff}
.ui .link-card{display:flex;flex-direction:column;gap:14px;transition:background .18s}
.ui a.link-card:hover{background:var(--surface-2)}
.ui .link-card p{color:var(--text-2);font-size:15px}
.ui .link-card .arrow-link{margin-top:auto}

/* ---------- Tags and status ---------- */
.ui .tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;background:var(--surface-2);color:var(--text-2);font:600 12.5px/1 var(--sans);white-space:nowrap}
.ui a.tag:hover{color:var(--text);background:var(--surface-3)}
.ui .tag.lime{background:var(--accent);color:var(--accent-ink)}
.ui .tag.blue{background:var(--blue-soft);color:var(--blue-text)}
.ui .tag.ok::before,.ui .tag.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
body.ui[data-theme="light"] .tag.ok::before{background:#5f8f00}
.ui .tag.off::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.ui .tag.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.ui .tag.danger{color:var(--danger);background:var(--danger-soft)}

/* ---------- Notices ---------- */
.ui .notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:var(--surface-2);color:var(--text-2);font-size:15px}
.ui .notice svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--accent-text)}
.ui .notice strong{display:block;margin-bottom:2px;color:var(--text)}
.ui .notice.blue{background:var(--blue-soft)}
.ui .notice.blue svg{color:var(--blue-text)}
.ui .notice.error,.ui .status.is-error{background:var(--danger-soft);color:var(--text)}
.ui .status{padding:14px 16px;border-radius:var(--r);background:var(--lime-soft);color:var(--text);font-size:15px}

/* ---------- Forms (fields keep an outline: that is how a field reads) ---------- */
.ui .form{display:grid;gap:16px}
.ui .field{display:grid;gap:7px}
.ui .field label,.ui .field .field-label{color:var(--text);font-size:14px;font-weight:600}
.ui .field small{color:var(--text-3);font-size:13px}
.ui .field input,.ui .field select,.ui .field textarea{width:100%;min-height:50px;padding:12px 16px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--bg-2);color:var(--text);font-size:15.5px;line-height:1.4;transition:border-color .18s,background .18s;-webkit-appearance:none;appearance:none}
body.ui[data-theme="light"] .field input,body.ui[data-theme="light"] .field select,body.ui[data-theme="light"] .field textarea{background:#fff}
.ui .field textarea{min-height:150px;resize:vertical}
.ui .field select{padding-right:44px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828a9b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 15px center;background-size:16px}
.ui .field input::placeholder,.ui .field textarea::placeholder{color:var(--text-3)}
.ui .field input:hover,.ui .field select:hover,.ui .field textarea:hover{border-color:var(--line-3)}
.ui .field input:focus,.ui .field select:focus,.ui .field textarea:focus{outline:0;border-color:var(--accent)}
body.ui[data-theme="light"] .field input:focus,body.ui[data-theme="light"] .field select:focus,body.ui[data-theme="light"] .field textarea:focus{border-color:var(--blue)}
.ui .check{display:flex;align-items:flex-start;gap:10px;color:var(--text-2);font-size:14.5px;line-height:1.5}
.ui .check input{width:18px;height:18px;flex:none;margin:2px 0 0;accent-color:var(--accent)}
.ui .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.ui .form-row{grid-template-columns:minmax(0,1fr)}}
.ui .form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ui .hp-field{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* Product previews in the existing reading layout. */
.ui .product-figure{margin:24px 0}
.ui .product-figure img{display:block;width:100%;height:auto;border-radius:var(--r)}
.ui .product-figure figcaption{margin-top:10px;color:var(--text-3);font-size:14px;line-height:1.5}

/* ---------- Prose (legal, docs) ---------- */
.ui .prose{color:var(--text);font-size:17px;line-height:1.7}
.ui .prose > * + *{margin-top:16px}
.ui .prose p,.ui .prose li{color:var(--text-2)}
.ui .prose h2{margin-top:64px;color:var(--text);font:700 clamp(28px,3vw,38px)/1.08 var(--sans);font-stretch:112%;letter-spacing:-.035em;scroll-margin-top:calc(var(--header) + 24px)}
.ui .prose h2:first-child{margin-top:0}
.ui .prose h3{margin-top:36px;color:var(--text);font-size:20px;font-weight:650;letter-spacing:-.015em;scroll-margin-top:calc(var(--header) + 24px)}
.ui .prose h4{margin-top:24px;color:var(--text);font-size:17px;font-weight:650}
.ui .prose strong,.ui .prose b{color:var(--text);font-weight:650}
.ui .prose a:not(.btn){color:var(--blue-text);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--blue-text) 45%,transparent);text-underline-offset:3px}
.ui .prose a:not(.btn):hover{text-decoration-color:currentColor}
.ui .prose ul,.ui .prose ol{padding-left:0;list-style:none}
.ui .prose ul > li,.ui .prose ol > li{position:relative;padding-left:26px}
.ui .prose ul > li + li,.ui .prose ol > li + li{margin-top:10px}
.ui .prose ul > li::before{content:"";position:absolute;left:5px;top:.66em;width:7px;height:7px;border-radius:2px;background:var(--accent)}
body.ui[data-theme="light"] .prose ul > li::before{background:var(--blue)}
.ui .prose ol{counter-reset:ol}
.ui .prose ol > li{counter-increment:ol}
.ui .prose ol > li::before{content:counter(ol);position:absolute;left:0;top:.18em;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--surface-3);color:var(--text);font:650 11.5px/1 var(--sans)}
.ui .prose hr{height:0;margin:48px 0;border:0}
.ui .prose blockquote{margin-left:0;padding:14px 18px;border-radius:var(--r);background:var(--surface)}
.ui .table-scroll{overflow-x:auto;border-radius:var(--r);background:var(--surface);-webkit-overflow-scrolling:touch}
.ui table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.ui th,.ui td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ui tr:last-child > th,.ui tr:last-child > td{border-bottom:0}
.ui thead th{background:var(--surface-2);color:var(--text);font:650 13.5px/1.3 var(--sans)}
.ui tbody th{color:var(--text);font-weight:650;white-space:nowrap}
.ui td{color:var(--text-2)}
.ui td.yes{color:var(--text)}
.ui .table-scroll table{min-width:640px}

/* ---------- Reading layout (legal, help) ---------- */
.ui .reader{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;padding-bottom:var(--gap)}
.ui .toc{position:sticky;top:calc(var(--header) + 28px);display:grid;gap:2px;max-height:calc(100vh - var(--header) - 56px);overflow:auto;scrollbar-width:none}
.ui .toc .label{margin-bottom:10px;padding-left:12px}
.ui .toc a{display:block;padding:8px 12px;border-radius:10px;color:var(--text-3);font-size:14px;line-height:1.4;transition:color .18s,background .18s}
.ui .toc a:hover{color:var(--text)}
.ui .toc a[aria-current="true"]{background:var(--surface);color:var(--text);font-weight:600}
.ui .reader .prose{max-width:760px}
@media (max-width:900px){.ui .reader{grid-template-columns:minmax(0,1fr)}.ui .reader .toc{display:none}}

/* ---------- Footer: the name returns at full width ---------- */
.ui .ui-footer{margin-top:auto;padding:clamp(72px,9vw,128px) 0 28px;background:var(--bg);overflow:hidden}
.ui .footer-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px}
.ui .footer-tagline{max-width:15ch;color:var(--text);font:700 clamp(24px,2.4vw,32px)/1.05 var(--sans);font-stretch:112%;letter-spacing:-.035em}
.ui .footer-col{display:grid;align-content:start;gap:12px}
.ui .footer-col .label{margin-bottom:2px}
.ui .footer-col a{width:max-content;color:var(--text);font-size:15.5px;transition:color .18s}
.ui .footer-col a:hover{color:var(--accent-text)}
.ui .footer-word{margin:clamp(56px,8vw,112px) 0 0 -.02em;padding-bottom:.2em;color:var(--text);font:800 calc(min(var(--wrap),100vw - var(--gutter)*2) / 2.86)/.74 var(--sans);font-stretch:125%;letter-spacing:-.065em;white-space:nowrap;user-select:none}
.ui .footer-word i{font-style:normal;color:var(--accent-text)}
.ui .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:28px;color:var(--text-3);font-size:14px}
.ui .footer-bottom a:hover{color:var(--text)}
@media (max-width:900px){.ui .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}.ui .footer-top > :first-child{grid-column:1/-1}}

/* ---------- Docs ---------- */
.ui .docs{display:grid;grid-template-columns:252px minmax(0,1fr) 200px;gap:clamp(28px,4vw,64px);align-items:start;width:min(1400px,100% - var(--gutter)*2);margin-inline:auto;padding:32px 0 var(--gap)}
.ui .docs-side{position:sticky;top:calc(var(--header) + 16px);display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - var(--header) - 32px);overflow:auto;padding:4px 6px 24px 0;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.ui .docs-search{position:relative}
.ui .docs-search svg{position:absolute;left:14px;top:50%;width:16px;height:16px;color:var(--text-3);transform:translateY(-50%);pointer-events:none}
.ui .docs-search input{width:100%;height:44px;padding:0 14px 0 40px;border:1.5px solid transparent;border-radius:12px;background:var(--surface);color:var(--text);font-size:14.5px}
.ui .docs-search input:focus{outline:0;border-color:var(--accent)}
body.ui[data-theme="light"] .docs-search input:focus{border-color:var(--blue)}
.ui .docs-group{display:grid;gap:1px}
.ui .docs-group .label{padding:0 12px 8px}
.ui .docs-group a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-radius:10px;color:var(--text-2);font-size:14.5px;line-height:1.35;transition:background .15s,color .15s}
.ui .docs-group a:hover{background:var(--surface);color:var(--text)}
.ui .docs-group a[aria-current="true"]{background:var(--accent);color:var(--accent-ink);font-weight:650}
body.ui[data-theme="light"] .docs-group a[aria-current="true"]{background:var(--blue);color:#fff}
.ui .docs-empty{padding:8px 12px;color:var(--text-3);font-size:14px}
.ui .docs-main{min-width:0}
.ui .docs-intro{padding:28px 0 40px;margin-bottom:12px}
.ui .docs-intro .display{font-size:clamp(44px,5.6vw,84px)}
.ui .docs-intro .lead{margin-top:20px}
.ui .docs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:28px}
.ui .docs-cards a{display:grid;gap:6px;padding:18px 20px;border-radius:var(--r);background:var(--surface);transition:background .18s}
.ui .docs-cards a:hover{background:var(--surface-2)}
.ui .docs-cards b{color:var(--text);font-size:16px}
.ui .docs-cards span{color:var(--text-2);font-size:14px;line-height:1.45}
.ui .doc{padding:56px 0 8px;scroll-margin-top:calc(var(--header) + 12px)}
.ui .doc-head{margin-bottom:28px}
.ui .doc-head .label{display:none}
.ui .doc-head h2{font:700 clamp(34px,3.8vw,52px)/1.02 var(--sans);font-stretch:114%;letter-spacing:-.04em}
.ui .doc-head p{margin-top:16px;max-width:62ch;color:var(--text-2);font-size:18.5px;line-height:1.55}
.ui .doc .prose{max-width:760px}
.ui .doc .prose h3:first-child{margin-top:0}
.ui .doc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px;margin:28px 0 8px}
.ui .doc-facts div{padding:16px 18px;border-radius:var(--r);background:var(--surface)}
.ui .doc-facts dt{color:var(--text-3);font:600 13px/1.3 var(--sans)}
.ui .doc-facts dd{margin:6px 0 0;color:var(--text);font-size:15.5px;font-weight:600;line-height:1.4}
.ui .faq{display:grid;gap:6px;margin-top:20px}
.ui .faq details{border-radius:var(--r);background:var(--surface);transition:background .18s}
.ui .faq details:hover{background:var(--surface-2)}
.ui .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;color:var(--text);font-weight:650;font-size:16.5px;line-height:1.4;cursor:pointer;list-style:none}
.ui .faq summary::-webkit-details-marker{display:none}
.ui .faq summary::after{content:"+";flex:none;width:22px;color:var(--text-3);font:300 26px/22px var(--sans);text-align:center;transition:transform .25s var(--ease)}
.ui .faq details[open] summary::after{transform:rotate(45deg);color:var(--text)}
.ui .faq details > p{padding:0 20px 20px;color:var(--text-2);font-size:16px;line-height:1.65}
.ui .docs-toc{position:sticky;top:calc(var(--header) + 24px);display:grid;gap:2px}
.ui .docs-toc .label{margin-bottom:10px}
.ui .docs-toc nav{display:grid;gap:2px}
.ui .docs-toc a{display:block;padding:6px 0;color:var(--text-3);font-size:13.5px;line-height:1.4}
.ui .docs-toc a:hover{color:var(--text)}
.ui .docs-toc a[aria-current="true"]{color:var(--text);font-weight:650}
.ui .docs-cta{--text:#fff;--text-2:rgba(255,255,255,.84);--line-3:rgba(255,255,255,.55);--accent-text:#ff4f17;--blue-text:#ff4f17;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:64px;padding:clamp(28px,3.4vw,44px);border-radius:var(--r-xl);background:#0f2140;color:#fff}
.ui .docs-cta h2{margin:0;font:700 clamp(28px,3vw,40px)/1.02 var(--sans);font-stretch:112%;letter-spacing:-.035em}
.ui .docs-cta p{margin-top:8px;color:var(--text-2)}
.ui .docs-cta :focus-visible{outline-color:#fff}
.ui .trademark{margin-top:32px;color:var(--text-3);font-size:13px;line-height:1.6}
.ui .docs-menu-toggle{display:none}
@media (max-width:1240px){.ui .docs{grid-template-columns:236px minmax(0,1fr)}.ui .docs-toc{display:none}}
@media (max-width:900px){
  .ui .docs{grid-template-columns:minmax(0,1fr);padding-top:16px}
  .ui .docs-side{position:static;max-height:none;overflow:visible;padding:0}
  .ui .docs-menu-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;height:48px;padding:0 18px;border:0;border-radius:12px;background:var(--surface);color:var(--text);font-weight:650}
  .ui .docs-menu-toggle svg{width:16px;height:16px}
  .ui .docs-side:not(.is-open) .docs-group,.ui .docs-side:not(.is-open) .docs-search{display:none}
  .ui .docs-cards{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Auth: a cobalt field with the notch hanging from its top edge ---------- */
.ui .auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.ui .auth-art{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(28px,4vw,56px);overflow:hidden;background:#0f2140;color:#fff}
.ui .auth-art .brand{color:#fff}
.ui .auth-art blockquote{margin:0;max-width:12ch;font:700 clamp(44px,5.2vw,84px)/.96 var(--sans);font-stretch:116%;letter-spacing:-.045em}
.ui .auth-art p{max-width:40ch;margin-top:22px;color:rgba(255,255,255,.86);font-size:17px}
.ui .auth-art .fine{color:rgba(255,255,255,.7)}
.ui .auth-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,72px) var(--gutter)}
.ui .auth-box{width:min(420px,100%);margin-inline:auto}
.ui .auth-box :is(h1,.state-title){font:700 clamp(38px,4.2vw,56px)/1 var(--sans);font-stretch:114%;letter-spacing:-.04em}
.ui .auth-box > p{margin-top:12px;color:var(--text-2)}
.ui .auth-box .form{margin-top:28px}
.ui .auth-box .status{margin-top:20px}
.ui .auth-switch{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;margin-top:28px;background:var(--surface)}
.ui .auth-switch button{height:40px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-weight:650;font-size:14.5px}
.ui .auth-switch button[aria-selected="true"]{background:var(--text);color:var(--bg)}
.ui .auth-box .auth-google{margin-top:24px}
.ui .auth-or{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--text-3);font-size:13.5px}
.ui .auth-or::before,.ui .auth-or::after{content:"";flex:1;height:1px;background:var(--line-2)}
.ui .auth-or ~ .form{margin-top:22px}
.ui .auth-google-email{color:var(--text-2);overflow-wrap:anywhere}
.ui .auth-google-email b{color:var(--text)}
.ui .auth-code{margin:4px 0 6px;font-size:28px;font-weight:700;letter-spacing:.14em;color:var(--text)}
.ui .auth-box button.link{border:0;padding:0;background:none;font:inherit;cursor:pointer}
.ui .auth-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:22px;color:var(--text-3);font-size:14px}
.ui .auth-meta a{color:var(--text-2)}
.ui .auth-meta a:hover{color:var(--text)}
.ui .auth-top{display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(420px,100%);margin:0 auto 40px}
.ui .auth-top a{color:var(--text-2);font-size:14.5px}
.ui .auth-top a:hover{color:var(--text)}
@media (max-width:900px){.ui .auth{grid-template-columns:minmax(0,1fr)}.ui .auth-art{display:none}}
.ui .center-card{width:min(540px,100% - var(--gutter)*2);margin:clamp(48px,10vh,120px) auto}
.ui .center-card .card{padding:clamp(26px,4vw,44px)}
.ui .center-card :is(h1,.state-title){font:700 clamp(32px,4vw,48px)/1.02 var(--sans);font-stretch:114%;letter-spacing:-.04em}
.ui .center-card .lead{margin-top:12px;font-size:16.5px}
.ui .center-card .form,.ui .center-card .steps{margin-top:24px}
.ui .steps{display:grid;gap:14px;padding:0;margin:0;list-style:none;counter-reset:s}
.ui .steps li{position:relative;padding-left:42px;color:var(--text-2);font-size:15.5px;counter-increment:s}
.ui .steps li::before{content:counter(s);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--text);font:650 13px/1 var(--sans)}

/* ---------- Dashboard (an app screen: quiet panels, small labels are normal here) ---------- */
body.ui.dash{display:block}
.ui .dash-shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.ui .dash-side{position:sticky;top:0;display:flex;flex-direction:column;gap:28px;height:100vh;padding:22px 14px;background:var(--bg-2)}
.ui .dash-side .brand{padding:4px 10px}
.ui .dash-side .brand small{margin-left:4px;padding:4px 8px;border-radius:6px;background:var(--surface-2);color:var(--text-3);font:600 11px/1 var(--sans);font-stretch:100%;letter-spacing:0}
.ui .dash-nav{display:grid;gap:2px}
.ui .dash-nav .label{padding:0 12px 8px}
.ui .dash-nav .label:not(:first-child){padding-top:22px}
.ui .dash-nav a{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:12px;color:var(--text-2);font-size:15px;font-weight:500;transition:background .15s,color .15s}
.ui .dash-nav a svg{width:18px;height:18px;flex:none;opacity:.85}
.ui .dash-nav a:hover{background:var(--surface);color:var(--text)}
.ui .dash-nav a[aria-current="page"]{background:var(--surface-2);color:var(--text);font-weight:650}
.ui .dash-nav a[aria-current="page"] svg{color:var(--accent-text);opacity:1}
.ui .dash-nav a .count{margin-left:auto;min-width:22px;padding:3px 7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:650 11.5px/1.2 var(--sans);text-align:center}
.ui .dash-user{display:flex;align-items:center;gap:12px;margin-top:auto;padding:12px;border-radius:var(--r);background:var(--surface)}
.ui .avatar{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:15px;text-transform:uppercase}
.ui .avatar.lg{width:64px;height:64px;font-size:24px}
.ui .dash-user div{min-width:0;flex:1}
.ui .dash-user b{display:block;overflow:hidden;font-size:14.5px;text-overflow:ellipsis;white-space:nowrap}
.ui .dash-user small{display:block;overflow:hidden;color:var(--text-3);font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.ui .icon-btn{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:10px;background:var(--surface-2);color:var(--text-2);transition:color .15s,background .15s}
.ui .icon-btn:hover{color:var(--text);background:var(--surface-3)}
.ui .icon-btn svg{width:16px;height:16px}
.ui .dash-main{min-width:0;display:flex;flex-direction:column}
.ui .dash-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 clamp(16px,3vw,44px);background:var(--bg)}
.ui .crumbs{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:14px}
.ui .crumbs b{color:var(--text);font-weight:650}
.ui .crumbs svg{width:14px;height:14px}
.ui .dash-top-actions{display:flex;align-items:center;gap:10px}
.ui .dash-menu{display:none}
.ui .dash-content{width:100%;max-width:1200px;padding:clamp(20px,3vw,40px) clamp(16px,3vw,44px) 80px}
.ui .page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.ui .page-head h1{font:700 clamp(36px,4.2vw,58px)/1 var(--sans);font-stretch:114%;letter-spacing:-.04em}
.ui .page-head p{margin-top:12px;color:var(--text-2)}
.ui .stack{display:grid;gap:12px}
.ui .stat{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:var(--r-lg);background:var(--surface)}
.ui .stat .label{display:flex;align-items:center;gap:8px}
.ui .stat strong{font:500 46px/1 var(--sans);font-stretch:112%;letter-spacing:-.04em;color:var(--text)}
.ui .funnel-head{margin-bottom:10px;color:var(--text);font-size:15px;font-weight:650}
.ui .funnel .stat small{line-height:1.45}
.ui .stat small{color:var(--text-3);font-size:13.5px}
/* Administration charts: one series each, in the accent (lime in dark, blue in light). Text stays in text colours. */
.ui .chart{--series:var(--accent);position:relative;min-height:260px;transition:opacity .18s}
body.ui[data-theme="light"] .chart{--series:var(--blue)}
.ui .chart.is-loading{opacity:.5}
.ui .chart-plot{position:relative}
.ui .chart-svg{display:block;width:100%;height:auto;overflow:visible;border-radius:8px}
.ui .chart-svg:focus{outline:0}
.ui .chart-svg:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
.ui .chart-grid{stroke:var(--line);stroke-width:1}
.ui .chart-base{stroke:var(--line-2);stroke-width:1}
.ui .chart-axis{fill:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums}
.ui .chart-value{fill:var(--text);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.ui .chart-line{fill:none;stroke:var(--series);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ui .chart-area{fill:var(--series);opacity:.1}
.ui .chart-dot{fill:var(--series);stroke:var(--surface);stroke-width:2;pointer-events:none}
.ui .chart-bar{fill:var(--series);transition:opacity .15s}
.ui .chart-bar.is-dim{opacity:.4}
.ui .chart-cross{stroke:var(--line-3);stroke-width:1;pointer-events:none}
.ui .chart-hit{fill:transparent}
.ui .chart-tip{position:absolute;z-index:2;display:grid;gap:2px;min-width:150px;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-3);color:var(--text);font-size:13px;line-height:1.35;white-space:nowrap;transform:translate(-50%,-100%);pointer-events:none}
.ui .chart-tip span{color:var(--text-2);font-variant-numeric:tabular-nums}
.ui .dash-dropdown-wrap{display:inline-block}
.ui .dash-dropdown{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding:6px 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--text);font-size:14px;font-weight:600;text-align:left;white-space:nowrap}
.ui .dash-dropdown:disabled{opacity:.6;cursor:default}
.ui .dash-dropdown-menu{position:fixed;inset:auto;margin:0;padding:6px;overflow:auto;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:#28282a;color:#f5f5f7;color-scheme:dark}
.ui .dash-dropdown-menu:popover-open{display:grid;gap:2px}
.ui .dash-dropdown-option{display:flex;width:100%;min-height:34px;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:inherit;font-size:14px;text-align:left}
.ui .dash-dropdown-option[aria-selected="true"]::after{content:"✓";margin-left:auto;padding-left:16px}
.ui .dash-dropdown-option:is(:hover,:focus-visible){outline:none;background:rgba(255,255,255,.1)}
.ui .dash-access-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:28px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg);color:var(--text)}
.ui .dash-access-dialog::backdrop{background:rgba(0,0,0,.6)}
.ui .dash-access-dialog h2{font-size:24px}
.ui .dash-access-dialog .muted{overflow-wrap:anywhere}
.ui .dash-access-dialog .dash-dropdown-wrap,.ui .dash-access-dialog .dash-dropdown{width:100%}
.ui .dash-access-dialog .hero-actions{margin-top:0}
.ui .chart-table{margin-top:12px;font-size:13.5px}
.ui .chart-table summary{width:max-content;color:var(--text-3);cursor:pointer}
.ui .chart-table summary:hover{color:var(--text)}
.ui .chart-table table{width:100%;margin-top:10px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ui .chart-table :is(th,td){padding:7px 0;border-top:1px solid var(--line);text-align:left;font-weight:400}
.ui .chart-table thead th{border-top:0;color:var(--text-3);font-size:12.5px}
.ui .chart-table td{text-align:right}
.ui .chart-note{margin-top:12px}
.ui .plan-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.ui .feature-card{overflow:hidden;--text:#fff;--text-2:rgba(255,255,255,.86);--text-3:rgba(255,255,255,.72);--line-3:rgba(255,255,255,.55);--surface-2:#1c3157;--accent-text:#ff4f17;background:#0f2140;color:#fff}
.ui .feature-card :focus-visible{outline-color:#fff}
.ui .feature-card h2{margin-top:14px;font:700 clamp(30px,3.2vw,42px)/1.02 var(--sans);font-stretch:114%;letter-spacing:-.04em}
.ui .feature-card p{margin-top:10px;max-width:52ch;color:var(--text-2)}
.ui .feature-card .hero-actions{margin-top:24px}
.ui .list{display:grid}
.ui .list-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:14px 0;border-bottom:1px solid var(--line)}
.ui .list-row:first-child{padding-top:0}
.ui .list-row:last-child{border-bottom:0;padding-bottom:0}
.ui .list-row .who{display:flex;align-items:center;gap:12px;min-width:0}
.ui .list-row .who > div{min-width:0}
.ui .list-row b{display:block;color:var(--text);font-size:15px;font-weight:650}
.ui .list-row small{display:block;color:var(--text-3);font-size:13.5px}
.ui .list-row .avatar{width:32px;height:32px;font-size:13px}
.ui .list-row .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ui .list-empty{padding:28px 16px;border-radius:var(--r);background:var(--bg-2);color:var(--text-3);font-size:14.5px;text-align:center}
.ui .kv{display:grid;grid-template-columns:auto 1fr;gap:12px 24px;margin:0}
.ui .kv dt{color:var(--text-3);font-size:14px}
.ui .kv dd{margin:0;color:var(--text);font-size:15px;font-weight:550;text-align:right;overflow-wrap:anywhere}
.ui .kv.left{grid-template-columns:110px minmax(0,1fr)}
.ui .kv.left dd{text-align:left;font-weight:400;color:var(--text-2)}
.ui .section + .section{padding-top:0}
.ui .quick{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);background:var(--surface);transition:background .18s}
.ui .quick:hover{background:var(--surface-2)}
.ui .quick b{display:block;font-size:15px}
.ui .quick small{display:block;color:var(--text-3);font-size:13.5px}
.ui .quick > svg{width:16px;height:16px;margin-left:auto;color:var(--text-3)}
.ui .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ui .plan{display:flex;flex-direction:column;gap:18px;padding:28px;border:2px solid transparent;border-radius:var(--r-lg);background:var(--surface)}
.ui .plan.best{border-color:var(--accent)}
body.ui[data-theme="light"] .plan.best{border-color:var(--blue)}
.ui .plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ui .plan h3{font-size:18px}
.ui .price{display:flex;align-items:baseline;gap:8px}
.ui .price b{font:500 54px/1 var(--sans);font-stretch:112%;letter-spacing:-.045em}
.ui .price span{color:var(--text-3);font-size:14.5px}
.ui .plan p{color:var(--text-2);font-size:14.5px}
.ui .plan .btn{margin-top:auto}
.ui .ticks{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.ui .ticks li{display:flex;gap:10px;color:var(--text-2);font-size:15px}
.ui .ticks li::before{content:"";width:18px;height:18px;flex:none;margin-top:2px;border-radius:50%;background:var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23030407' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center/12px no-repeat}
.ui .ticks.cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.ui .ticks.cols{grid-template-columns:minmax(0,1fr)}}
.ui .danger-zone{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--danger) 35%,transparent)}
.ui .danger-zone h2{color:var(--danger)}
.ui .settings-row{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px 40px;padding:28px 0;border-top:1px solid var(--line)}
.ui .settings-row:first-of-type{border-top:0;padding-top:0}
.ui .settings-row h2{font-size:17px}
.ui .settings-row > div:first-child p{margin-top:6px;color:var(--text-2);font-size:14.5px}
.ui .settings-row .form{max-width:440px}
@media (max-width:820px){.ui .settings-row{grid-template-columns:minmax(0,1fr)}}
.ui .ticket{padding:16px 0;border-bottom:1px solid var(--line)}
.ui .ticket:first-child{padding-top:0}
.ui .ticket:last-child{border-bottom:0;padding-bottom:0}
.ui .ticket-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ui .ticket-head b{color:var(--text);font-size:15px}
.ui .ticket-head small{margin-left:auto;color:var(--text-3);font-size:13px}
.ui .ticket p{margin-top:8px;color:var(--text-2);font-size:14.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.ui .ticket .form-actions{margin-top:12px}
.ui .mono{font-family:var(--mono);font-size:13px}
.ui .tabs-bar{display:flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:16px;border-radius:999px;background:var(--surface);width:max-content;max-width:100%}
.ui .tabs-bar button{height:36px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:14px;font-weight:650}
.ui .tabs-bar button[aria-selected="true"]{background:var(--text);color:var(--bg)}
.ui .tabs-bar button span{margin-left:6px;opacity:.65;font-size:12px}
.ui .release-live{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
.ui .release-version{font:500 clamp(56px,6vw,88px)/.9 var(--sans);font-stretch:114%;letter-spacing:-.05em}
.ui .release-version span{color:var(--accent-text)}
.ui .platforms{display:grid;gap:8px;margin-top:20px}
.ui .platform{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border-radius:var(--r);background:var(--surface-2)}
.ui .platform > div{display:grid;gap:2px;min-width:0;flex:1 1 220px}
.ui .platform b{font-size:15px}
.ui .platform small{color:var(--text-3);font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.ui .platform a{margin-left:auto}
.ui .release-form{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:12px}
.ui .release-form input{flex:1 1 220px;min-height:42px;padding:8px 12px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--bg-2);color:var(--text)}
.ui .notes{margin-top:16px;padding:16px 18px;border-radius:var(--r);background:var(--surface-2);color:var(--text-2);font-size:15px;white-space:pre-wrap}
.ui .locked{display:grid;justify-items:center;gap:14px;padding:clamp(40px,7vw,88px) 24px;text-align:center}
.ui .locked .icon-tile{width:56px;height:56px;border-radius:16px}
.ui .locked h2{font:700 clamp(30px,3.4vw,44px)/1.02 var(--sans);font-stretch:114%;letter-spacing:-.04em}
.ui .locked p{max-width:46ch;color:var(--text-2)}
.ui .dash-loading{display:flex;align-items:center;gap:12px;padding:18px 0;color:var(--text-2);font-size:15px}
.ui .dash-loading::before{content:"";width:16px;height:16px;border:2px solid var(--surface-3);border-top-color:var(--accent);border-radius:50%;animation:ui-spin .8s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}
.ui .skeleton{border-radius:10px;background:var(--surface-2);animation:ui-pulse 1.4s ease-in-out infinite alternate}
@keyframes ui-pulse{from{opacity:.55}to{opacity:1}}
@media (max-width:1100px){.ui .plans{grid-template-columns:minmax(0,1fr)}.ui .plan-hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .ui .dash-shell{grid-template-columns:minmax(0,1fr)}
  .ui .dash-side{position:fixed;inset:0 auto 0 0;z-index:120;width:min(300px,86vw);height:100%;transform:translateX(-102%);transition:transform .3s var(--ease);box-shadow:var(--shadow)}
  .ui .dash-side.is-open{transform:none}
  .ui .dash-menu{display:grid}
  .ui .dash-scrim{position:fixed;inset:0;z-index:110;background:rgba(3,4,7,.6)}
  .ui .release-live{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.ui .dash-top .theme-slot{display:none}.ui .kv{grid-template-columns:minmax(0,1fr)}.ui .kv dd{text-align:left}}

/* ---------- Changelog (inside the dashboard) ---------- */
.ui .cl-jump{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.ui .cl-jump a{height:34px;padding:0 14px;display:inline-flex;align-items:center;border-radius:999px;background:var(--surface);color:var(--text-2);font:600 13px/1 var(--sans)}
.ui .cl-jump a:hover{color:var(--text);background:var(--surface-2)}
.ui .cl-timeline{display:grid;gap:12px;padding:0;margin:0;list-style:none}
.ui .cl-entry{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;scroll-margin-top:84px}
.ui .cl-when{position:sticky;top:84px;align-self:start;display:grid;gap:4px;padding-top:26px}
.ui .cl-when b{font:600 30px/1 var(--sans);font-stretch:112%;letter-spacing:-.04em}
.ui .cl-when small{color:var(--text-3);font:500 13px/1.3 var(--sans)}
.ui .cl-node{display:none}
.ui .cl-card{display:grid;gap:14px}
.ui .cl-card > .tag{justify-self:start}
.ui .cl-card .tag.now{background:var(--accent);color:var(--accent-ink)}
.ui .cl-card .tag.dev{background:var(--blue-soft);color:var(--blue-text)}
.ui .cl-card h2{font:700 clamp(24px,2.6vw,34px)/1.06 var(--sans);font-stretch:112%;letter-spacing:-.035em}
.ui .cl-card .sum,.ui .cl-card > p{color:var(--text-2)}
.ui .hero-rel{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px}
.ui .hero-rel > div:first-child{display:grid;gap:14px;align-content:start}
.ui .cl-groups{display:grid;gap:22px;margin-top:4px}
.ui .cl-group h3{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--text);font:650 15px/1.2 var(--sans)}
.ui .cl-group h3::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--blue)}
.ui .cl-group.new h3::before{background:var(--accent)}
body.ui[data-theme="light"] .cl-group.new h3::before{background:#86b300}
.ui .cl-group.fixed h3::before{background:var(--danger)}
.ui .cl-group ul{display:grid;gap:8px;padding:0;margin:0;list-style:none}
.ui .cl-group li{position:relative;padding-left:18px;color:var(--text-2);font-size:15px;line-height:1.6}
.ui .cl-group li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--text-3)}
.ui .cl-group li b{color:var(--text)}
.ui .cl-group ul.cl-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.ui .cl-areas{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px}
.ui .cl-areas[hidden]{display:none}
.ui .cl-areas button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:13.5px;font-weight:650;cursor:pointer}
.ui .cl-areas button:hover{color:var(--text);background:var(--surface-3)}
.ui .cl-areas button span{color:var(--text-3);font:500 12px/1 var(--sans)}
.ui .cl-areas button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.ui .cl-areas button[aria-pressed="true"] span{color:inherit;opacity:.6}
.ui .cl-area+.cl-area{margin-top:12px}
.ui .cl-area h4{margin:0 0 8px;font-size:14.5px}
.ui .cl-groups.is-filtered .cl-area h4{display:none}
.ui .chips{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:4px 0 0;list-style:none}
.ui .chips li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:13px}
.ui .chips svg{width:14px;height:14px}
.ui .checks{align-self:start;padding:18px;border-radius:var(--r);background:var(--surface-2)}
.ui .checks h3{margin-bottom:12px;color:var(--text);font:650 14px/1.2 var(--sans)}
.ui .checks .row{display:flex;gap:10px;padding:8px 0}
.ui .checks .row strong{font-size:14px}
.ui .checks .row p{color:var(--text-3);font-size:13px;line-height:1.5}
.ui .checks .ic{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--surface-3)}
.ui .checks .ic.ok{background:var(--accent);color:var(--accent-ink)}
.ui .checks .ic svg{width:12px;height:12px}
.ui .cl-path-figure{margin:6px 0 0;padding:16px;border-radius:var(--r);background:var(--surface-2)}
.ui .cl-path-figure figcaption{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px;font-size:14px}
.ui .cl-path-figure figcaption span{color:var(--text-2)}
.ui .pathsvg{width:100%;height:auto}
.ui .pathsvg .pv-from{fill:var(--surface-3);stroke:none}
.ui .pathsvg .pv-to{fill:#ff4f17}
.ui .pathsvg .pv-line{stroke:var(--text-3)}
.ui .pathsvg .pt{font:650 15px var(--sans);fill:var(--text)}
.ui .pathsvg .pl,.ui .pathsvg .pl2{font:600 12px var(--sans);fill:var(--text-3)}
@media (max-width:900px){.ui .cl-entry{grid-template-columns:minmax(0,1fr);gap:8px}.ui .cl-when{position:static;padding-top:0;display:flex;align-items:baseline;gap:12px}.ui .hero-rel{grid-template-columns:minmax(0,1fr)}.ui .cl-group ul.cl-cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- Download: Windows on cobalt, Mac on lime ---------- */
.ui .os-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ui .os-card{display:flex;flex-direction:column;gap:24px;min-height:400px;padding:clamp(26px,3.4vw,44px);overflow:hidden;border-radius:var(--r-xl)}
.ui .os-card .os-top{display:flex;align-items:center;justify-content:space-between}
.ui .os-card h2{font:700 clamp(52px,6.4vw,96px)/.92 var(--sans);font-stretch:118%;letter-spacing:-.05em}
.ui .os-card h2 + p{margin-top:12px}
.ui .os-card p{color:var(--text-2);font-size:17px}
.ui .os-card .os-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto}
.ui .os-card .tag{background:rgba(255,255,255,.16);color:inherit}
.ui .os-card.win{--text:#fff;--text-2:rgba(255,255,255,.86);--text-3:rgba(255,255,255,.72);--line-3:rgba(255,255,255,.55);background:#0f2140;color:#fff}
.ui .os-card.win .icon-tile.blue{background:#0b0b0d}
.ui .os-card.win :focus-visible{outline-color:#fff}
.ui .os-card.mac{--text:#0b0b0d;--text-2:rgba(3,4,7,.78);--text-3:rgba(3,4,7,.64);--line-3:rgba(3,4,7,.45);background:#ff4f17;color:#0b0b0d}
.ui .os-card.mac .tag{background:rgba(3,4,7,.1)}
.ui .os-card.mac .icon-tile.lime{background:#0b0b0d;color:#ff4f17}
.ui .os-card.mac .btn{background:#0b0b0d;color:#ff4f17}
.ui .os-card.mac .btn:hover{background:#1a1e28}
.ui .os-card.mac :focus-visible{outline-color:#0b0b0d}
@media (max-width:820px){.ui .os-grid{grid-template-columns:minmax(0,1fr)}.ui .os-card{min-height:0}}
.ui .dl-notice{margin-top:12px}
.ui .dl-notice p{margin:0}
.ui .dl-notice b{color:var(--text)}
body.ui[data-page="download"] .card h3{font-size:clamp(21px,1.8vw,24px);font-weight:650;letter-spacing:-.015em}
.ui .dl-steps{margin-top:22px}
.ui .dl-help{margin-top:16px}
.ui .dl-text{margin-top:14px;color:var(--text-2)}
.ui .dl-kv{margin-top:18px}
.ui .dl-sha{display:inline-block;max-width:100%;padding:.35em .55em;font-size:12.5px;line-height:1.5;word-break:break-all;white-space:normal}
/* Install is a real sequence, so its steps carry their number. */
.ui .steps-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:0;list-style:none;counter-reset:st}
.ui .steps-row li{padding:26px 26px 30px;border-radius:var(--r-lg);background:var(--surface);counter-increment:st}
.ui .steps-row li::before{content:counter(st);display:block;margin-bottom:36px;color:var(--accent-text);font:500 64px/.8 var(--sans);font-stretch:118%;letter-spacing:-.05em}
.ui .steps-row b{display:block;margin-bottom:8px;color:var(--text);font-size:19px;font-weight:650;letter-spacing:-.015em}
.ui .steps-row p{color:var(--text-2);font-size:15.5px}
@media (max-width:820px){.ui .steps-row{grid-template-columns:minmax(0,1fr)}}

/* ---------- 404 ---------- */
.ui .big-404{font:800 clamp(140px,26vw,340px)/.8 var(--sans);font-stretch:125%;letter-spacing:-.07em;color:var(--accent-text)}
.ui .big-404 em{font:inherit;color:inherit}

/* ---------- Password fields, recovery progress ---------- */
.ui .input-wrap{position:relative}
.ui .input-wrap input{padding-right:80px}
.ui .input-wrap button{position:absolute;top:50%;right:8px;height:34px;padding:0 12px;border:0;border-radius:8px;background:var(--surface-2);color:var(--text-2);font-size:13px;font-weight:650;transform:translateY(-50%)}
.ui .input-wrap button:hover{color:var(--text)}
.ui .progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:0 0 28px;list-style:none}
.ui .progress li{display:grid;gap:8px;color:var(--text-3);font-size:13px;line-height:1.35}
.ui .progress li::before{content:"";height:4px;border-radius:4px;background:var(--surface-3);transition:background .3s}
.ui .progress li b{color:var(--text-2);font-size:13.5px;font-weight:650}
.ui .progress[data-step="1"] li:nth-child(-n+1)::before,.ui .progress[data-step="2"] li:nth-child(-n+2)::before,.ui .progress[data-step="3"] li:nth-child(-n+3)::before,.ui .progress[data-step="4"] li::before{background:var(--accent)}
body.ui[data-theme="light"] .progress[data-step="1"] li:nth-child(-n+1)::before,body.ui[data-theme="light"] .progress[data-step="2"] li:nth-child(-n+2)::before,body.ui[data-theme="light"] .progress[data-step="3"] li:nth-child(-n+3)::before,body.ui[data-theme="light"] .progress[data-step="4"] li::before{background:var(--blue)}
.ui .reqs{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0;margin:0;list-style:none}
.ui .reqs li{display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:13.5px}
.ui .reqs li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--surface-3)}
.ui .reqs li.is-met{color:var(--text)}
.ui .reqs li.is-met::before{background:var(--accent)}
body.ui[data-theme="light"] .reqs li.is-met::before{background:var(--blue)}
.ui .form-status:empty{display:none}
.ui .form-status{color:var(--text);font-size:14.5px}
.ui .state-icon{display:grid;place-items:center;width:56px;height:56px;margin-bottom:22px;border-radius:16px;background:var(--accent);color:var(--accent-ink)}
.ui .state-icon svg{width:24px;height:24px}
.ui .alt{margin-top:22px;color:var(--text-3);font-size:14.5px}
.ui .alt a,.ui .alt button{border:0;padding:0;background:none;color:var(--text);font-weight:650;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--line-3)}

/* ---------- Dashboard extras ---------- */
.ui .dash-content > .status{margin-bottom:20px}
.ui .checklist{display:grid;gap:14px;padding:0;margin:0;list-style:none;counter-reset:c}
.ui .checklist li{position:relative;padding-left:42px;counter-increment:c}
.ui .checklist li::before{content:counter(c);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--text);font:650 13px/1 var(--sans)}
.ui .checklist b{display:block;font-size:15px}
.ui .checklist p{color:var(--text-3);font-size:13.5px}
@media (max-width:1000px){.ui [data-admin-grid]{grid-template-columns:minmax(0,1fr)!important}}
.ui .cl-head{display:grid;gap:16px;margin-bottom:28px}
.ui .cl-head .cl-jump{margin:0}
.ui .cl-current{order:-1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:40px;row-gap:6px;align-items:center}
.ui .cl-current small,.ui .cl-current strong{grid-column:1}
.ui .cl-current p{grid-column:2;grid-row:1/3;max-width:56ch}
.ui .cl-current small{color:var(--text-3);font:600 13px/1 var(--sans)}
.ui .cl-current strong{font:500 50px/1 var(--sans);font-stretch:114%;letter-spacing:-.045em;color:var(--accent-text)}
.ui .cl-current p{color:var(--text-2);font-size:14px;line-height:1.8}
.ui .cl-path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
@media (max-width:640px){.ui .cl-current{grid-template-columns:minmax(0,1fr)}.ui .cl-current p{grid-column:1;grid-row:auto}}

/* ---------- Docs pager, legal summary ---------- */
.ui .doc-pager{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:56px}
.ui .doc-pager a{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;padding:18px 20px;border-radius:var(--r);background:var(--surface);transition:background .18s}
.ui .doc-pager a:hover{background:var(--surface-2)}
.ui .doc-pager a.next{grid-column:2;grid-template-columns:minmax(0,1fr) auto;text-align:right}
.ui .doc-pager a.prev > *{grid-column:2}
.ui .doc-pager a.next > *{grid-column:1}
/* The arrow points the way the link goes and nudges that way on hover. */
.ui .doc-pager a::before,.ui .doc-pager a::after{grid-row:1/3;width:22px;height:22px;background:var(--text-3);-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .2s var(--ease),background .18s}
.ui .doc-pager a.prev::before{content:"";grid-column:1;--arrow:var(--arrow-left)}
.ui .doc-pager a.next::after{content:"";grid-column:2;--arrow:var(--arrow-right)}
.ui .doc-pager a:hover::before,.ui .doc-pager a:hover::after{background:var(--accent-text)}
.ui .doc-pager a.prev:hover::before{transform:translateX(-3px)}
.ui .doc-pager a.next:hover::after{transform:translateX(3px)}
.ui .doc-pager small{color:var(--text-3);font:600 13px/1 var(--sans)}
.ui .doc-pager b{color:var(--text);font-size:17px}
.ui .docs-main:not(.is-app) .doc-pager{display:none}
.ui .summary{padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg);background:var(--surface)}
.ui .summary > p{margin-top:12px;color:var(--text);font-size:17px;line-height:1.65}
.ui .prose ul.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
.ui .prose ul.glance li{display:flex;gap:12px;margin:0;padding:16px;border-radius:14px;background:var(--surface-2);font-size:15px;line-height:1.5}
.ui .prose ul.glance li::before{display:none}
.ui .prose ul.glance svg{width:20px;height:20px;flex:none;color:var(--accent-text)}
.ui .prose ul.glance b{display:block;margin-bottom:2px}
.ui .prose.legal section + section{margin-top:0}
.ui .prose section > * + *{margin-top:16px}
.ui .prose section > h2:first-child{margin-top:72px}
.ui .prose section > h3 + p{margin-top:8px}
.ui .doc-facts + .prose{margin-top:48px}
@media (max-width:640px){.ui .prose ul.glance{grid-template-columns:minmax(0,1fr)}.ui .doc-pager{grid-template-columns:minmax(0,1fr)}.ui .doc-pager a.next{grid-column:auto}}
@media (max-width:900px){.ui [data-support-layout]{grid-template-columns:minmax(0,1fr)!important}}

/* ---------- Home ----------
   The page has its own notch: it hangs from the lime header and stays at the top of the window
   while the story scrolls under it, one screen and one flat field per part, changing to show that
   part. Then the interactive desktop with buttons that drive it, the other tools in a list beside
   one preview, the shortcuts as keycaps for your system, a card per platform, questions, and a
   cobalt close with the three prices. Patterns from the strongest app home pages (Linear, Raycast,
   CleanShot, Granola, Things), set in Syllo's flat colours.
   Interface fragments are black and hang from the top edge of whatever holds them, like the notch. */
body.ui[data-page="home"] main{padding-bottom:0}
.ui .h-sec{padding-top:var(--gap)}
.ui .h-title{color:var(--text);font:700 clamp(38px,5.4vw,80px)/.98 var(--sans);font-stretch:114%;letter-spacing:-.04em;text-wrap:balance}
.ui .h-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end;margin-bottom:clamp(36px,4.4vw,64px)}
.ui .h-intro .lead{font-size:18px}
.ui .h-more{display:inline-flex;align-items:center;gap:10px;width:max-content;color:var(--text);font-weight:650;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-text);text-underline-offset:6px;transition:text-decoration-color .18s}
.ui .h-more::after{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--arrow-right) center/contain no-repeat;mask:var(--arrow-right) center/contain no-repeat;transition:transform .2s var(--ease)}
.ui .h-more:hover{text-decoration-color:currentColor}
.ui .h-more:hover::after{transform:translateX(3px)}
body.ui[data-theme="light"] .h-more:not(.field-lime .h-more,.field-cobalt .h-more){text-decoration-color:var(--blue)}

/* Something that hangs from the top edge of its field, with the notch's curved shoulders */
.ui .hang{position:relative;border-radius:0 0 26px 26px;background:var(--n-bg,#0b0b0d);color:#f4f6fa}
/* Shoulders overlap the body by a pixel, so no seam shows where a centred notch lands on half a pixel. */
.ui :is(.hang,.ui-nav)::before,.ui :is(.hang,.ui-nav)::after{content:"";position:absolute;top:0;width:var(--sh,14px);height:var(--sh,14px);background:var(--n-bg,#0b0b0d)}
.ui :is(.hang,.ui-nav)::before{right:calc(100% - 1px);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M0 0h10v10A10 10 0 0 0 0 0z'/></svg>") 0 0/100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M0 0h10v10A10 10 0 0 0 0 0z'/></svg>") 0 0/100% 100%}
.ui :is(.hang,.ui-nav)::after{left:calc(100% - 1px);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 0H0v10A10 10 0 0 1 10 0z'/></svg>") 0 0/100% 100%;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M10 0H0v10A10 10 0 0 1 10 0z'/></svg>") 0 0/100% 100%}
@keyframes h-in{from{opacity:0;transform:translateY(8px)}}
@keyframes h-wave{to{height:14px}}
@keyframes h-caret{50%{opacity:0}}

/* Home: the notch at the top of the window (the main links) grows a live area under its links that
   shows what the section in the middle of the window is about; ui.js sets data-state and --h.
   Past the story it closes back to just the links. */
.ui .ui-nav[data-state="glance"]{--w:250px}
.ui .ui-nav:is([data-state="music"],[data-state="launcher"]){--w:520px;--rad:32px}
.ui .ui-nav:is([data-state="shelf"],[data-state="agent"]){--w:600px;--rad:32px}
.ui .pn-live{--h:0px;position:relative;flex:0 0 100%;height:var(--h);overflow:hidden;transition:height .56s var(--spring)}
.ui .pn-view{--vw:250px;position:absolute;top:0;left:50%;width:min(var(--vw),100vw - 60px);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .16s ease,transform .2s ease,visibility 0s linear .2s}
.ui .pn-view.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .24s ease .12s,transform .4s var(--spring) .08s,visibility 0s}
.ui .pn-view:is(.tm-music,[data-view="launcher"]){--vw:500px}
.ui .pn-view:is(.pn-drop,.pn-agents){--vw:580px}
.ui .pn-pill{display:flex;align-items:center;gap:10px;height:42px;padding:0 16px 0 12px;color:#f4f6fa;font:600 13.5px/1 var(--sans);white-space:nowrap}
.ui .pn-pill > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ui .pn-pill b{color:#ff4f17;font-weight:650}
.ui .pn-pill small{color:rgba(244,246,250,.6);font:500 12.5px/1 var(--sans)}
.ui .pn-pill .si{width:18px;height:18px;color:#ff4f17}
.ui .pn-drop{display:grid;justify-items:center;gap:14px;padding:14px 16px 18px;color:#f4f6fa}
.ui .pn-agents{display:grid;gap:6px;padding:12px 14px 16px;color:#f4f6fa}
.ui .pn-live .tm{color:#f4f6fa}
.ui .pill-art{width:22px;height:22px;flex:none;border-radius:6px;background:#0f2140}
.ui .pill-dot{width:8px;height:8px;flex:none;margin-left:4px;border-radius:50%;background:#ff4f17}
.ui .pill-wave{display:flex;align-items:center;gap:2px;height:16px;flex:none;color:#ff4f17}
.ui .pill-wave i{width:2.5px;height:5px;border-radius:2px;background:currentColor;animation:h-wave .9s ease-in-out infinite alternate}
.ui .pill-wave i:nth-child(2){height:11px;animation-delay:-.35s}
.ui .pill-wave i:nth-child(3){height:7px;animation-delay:-.65s}
.ui .pill-wave i:nth-child(4){height:13px;animation-delay:-.15s}

/* Hero: lime, the notch hanging from the header's lower edge above a centred promise */
.ui .s-hero{display:grid;align-content:center;min-height:calc(100svh - var(--header));padding:clamp(120px,13vw,180px) 0 clamp(80px,10vw,140px);text-align:center}
.ui .s-hero .wrap{display:grid;justify-items:center}
.ui .s-hero h1{font:700 clamp(34px,7.4vw,124px)/.9 var(--sans);font-stretch:116%;letter-spacing:-.045em}
.ui .s-hero h1 span{display:block}
.ui .s-hero .lead{max-width:54ch;margin-top:clamp(24px,2.8vw,36px);color:var(--text-2);font-size:clamp(17px,1.5vw,20px)}
.ui .s-hero .hero-actions{justify-content:center}
.ui .h-avail{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;padding:0;margin:22px 0 0;list-style:none;color:var(--text-2);font-size:14.5px;font-weight:600}
.ui .h-avail li{display:flex;align-items:center;gap:8px}
.ui .h-avail .si{width:16px;height:16px;color:var(--text)}
.ui .h-avail a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.ui .h-avail a:hover{color:var(--text)}
.ui .h-hero-note{margin-top:14px;color:var(--text-3);font-size:14px}

/* Story: one screen per part, each its own flat field, the text centred under the notch */
.ui .s-chapter{display:grid;align-content:center;min-height:100svh;padding:clamp(410px,48vh,480px) 0 clamp(72px,10vh,128px)}
.ui .s-text{display:grid;justify-items:center;gap:24px;max-width:860px;text-align:center}
.ui .s-text .h-title{max-width:15ch}
.ui .s-text > p{max-width:54ch;color:var(--text-2);font-size:clamp(17px,1.5vw,20px)}
.ui .field-lime .s-text > p{color:var(--text)}
.ui .h-agent-names{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:0;margin:4px 0;list-style:none}
.ui .h-agent-names li{padding:11px 18px;border:1.5px solid var(--line-3);border-radius:999px;font:650 clamp(15px,1.3vw,18px)/1 var(--sans)}
.ui .h-agent-names li:first-child{padding-inline:0 6px;border-color:transparent;color:var(--text-2)}

/* Try it: the interactive desktop, with buttons that drive it */
.ui .h-stage .desktop-screen{border:0;border-radius:clamp(10px,1.3vw,20px);box-shadow:none}
.ui .h-try{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:24px}
.ui .h-try > span{margin-right:6px;color:var(--text-3);font-size:14.5px;font-weight:600}
.ui .h-try button{height:40px;padding:0 17px;border:0;border-radius:999px;background:var(--surface);color:var(--text);font:600 14.5px/1 var(--sans);transition:background .18s,color .18s,transform .12s var(--ease)}
.ui .h-try button:hover{background:var(--surface-2)}
.ui .h-try button:active{transform:scale(.97)}
.ui .h-try button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.ui .h-stage-note{margin-top:16px;color:var(--text-3);font-size:14px;text-align:center}

/* Pieces drawn inside the notch */
.ui .drop-mock-title{display:flex;align-items:center;gap:8px;font:600 13px/1.2 var(--sans)}
.ui .drop-mock-title i{width:7px;height:7px;border-radius:50%;background:#ff4f17}
.ui .drop-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
.ui .drop-tiles span{display:grid;place-items:center;min-height:58px;padding:8px;border-radius:13px;background:var(--n-2,#161a25);color:rgba(244,246,250,.8);font:550 13px/1.25 var(--sans);text-align:center}
.ui .drop-tiles .on{background:#ff4f17;color:#0b0b0d;font-weight:650}
.ui .agent-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 14px;padding:12px 14px;border-radius:16px;background:var(--n-2,#161a25)}
.ui .agent-row .who{display:grid;gap:3px;min-width:0}
.ui .agent-row small{display:flex;align-items:center;gap:7px;color:#ff4f17;font:600 12.5px/1.2 var(--sans)}
.ui .agent-row small::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ui .agent-row.done small{color:rgba(244,246,250,.62)}
.ui .agent-row b{font-size:16.5px;font-weight:650}
.ui .agent-row .who > span{color:rgba(244,246,250,.66);font-size:14px}
.ui .agent-row code{background:var(--n-3,#232838);color:#f4f6fa}
.ui .agent-row .acts{display:flex;gap:6px}
.ui .agent-row .acts i{padding:10px 15px;border-radius:999px;background:var(--n-3,#232838);font:650 13px/1 var(--sans);font-style:normal}
.ui .agent-row .acts i:last-child{background:#ff4f17;color:#0b0b0d}
.ui .agent-row .took{color:rgba(244,246,250,.62);font-size:13.5px}

/* Every other tool: a list beside one preview (all previews stacked when scripts are off) */
.ui .tools{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,72px);align-items:start}
.ui .tool-list{position:sticky;top:32px;display:grid;justify-items:start}
.ui .tool-list a{padding:9px 0;color:var(--text-3);font:700 clamp(22px,2.2vw,32px)/1.05 var(--sans);font-stretch:112%;letter-spacing:-.03em;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:transparent;text-underline-offset:8px;transition:color .18s,text-decoration-color .18s}
.ui .tool-list a:hover{color:var(--text-2)}
.ui .tool-list a[aria-selected="true"]{color:var(--text);text-decoration-color:var(--accent-text)}
body.ui[data-theme="light"] .tool-list a[aria-selected="true"]{text-decoration-color:var(--blue)}
.ui .tool-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:64px}
.ui .tools.is-tabs .tool-panel{animation:h-in .35s var(--ease)}
.ui .tool-panel:focus-visible{outline-offset:6px;border-radius:var(--r-xl)}
.ui .tool-stage{display:flex;justify-content:center;align-items:flex-start;min-width:0;min-height:clamp(330px,30vw,420px);padding:0 clamp(12px,3vw,40px) 32px;overflow:hidden;border-radius:var(--r-xl);background:#0f2140}
.ui .tool-text{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 40px;align-items:end;margin-top:24px}
.ui .tool-text h3{grid-column:1;font-size:22px;letter-spacing:-.02em}
.ui .tool-text p{grid-column:1;max-width:56ch;color:var(--text-2);font-size:17px}
.ui .tool-text .h-more{grid-column:2;grid-row:1/3}

/* The black previews inside the tool panels */
.ui .tm{display:grid;align-content:start;gap:6px;width:min(100%,480px);min-width:0;padding:12px 14px 16px;font:500 13.5px/1.3 var(--sans)}
.ui .tm-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 6px 6px;font-weight:650}
.ui .tm small{color:rgba(244,246,250,.56);font:500 12.5px/1.3 var(--sans)}
.ui .tm-row{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:12px;background:var(--n-2,#161a25)}
.ui .tm-row > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui .tm-row > small{flex:none}
.ui .tm-row.on{background:#ff4f17;color:#0b0b0d}
.ui .tm-row.on small{color:rgba(3,4,7,.62)}
.ui .tm-ic{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;background:var(--n-3,#232838);color:#f4f6fa;font:700 11.5px/1 var(--sans)}
.ui .tm-ic .si{width:16px;height:16px}
.ui .tm-row.on .tm-ic{background:#0b0b0d;color:#ff4f17}
.ui .tm-ic.swatch{background:#0f2140}
.ui .tm-star{color:#ff4f17}
.ui .tm-field{display:flex;align-items:center;gap:10px;height:48px;margin-bottom:4px;padding:0 14px;border-radius:12px;background:var(--n-3,#1c2130);font-size:16px}
.ui .tm-field .si{width:18px;height:18px;color:rgba(244,246,250,.6)}
.ui .tm-field i{width:2px;height:20px;margin-left:-8px;background:#ff4f17;animation:h-caret 1s steps(1) infinite}
.ui .tm-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 6px 0;color:rgba(244,246,250,.62);font-size:12.5px}
.ui .tm-foot kbd{background:var(--n-3,#232838);color:#f4f6fa}
.ui .tm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ui .tm-grid span{display:grid;justify-items:center;align-content:center;gap:8px;min-height:76px;padding:10px 6px;border-radius:12px;background:var(--n-2,#161a25);text-align:center}
.ui .tm-grid .si{width:20px;height:20px}
.ui .tm-grid .on{background:#ff4f17;color:#0b0b0d;font-weight:650}
.ui .tm-music{grid-template-columns:96px minmax(0,1fr);align-items:center;gap:18px;padding:16px 18px 18px}
.ui .tm-art{position:relative;width:96px;height:96px;overflow:hidden;border-radius:20px;background:#0f2140}
.ui .tm-art::after{content:"";position:absolute;right:-20px;bottom:-20px;width:66px;height:66px;border-radius:50%;background:#ff4f17}
.ui .tm-track b{display:block;font-size:16px;font-weight:650}
.ui .tm-scrub{display:flex;align-items:center;gap:8px;margin-top:14px;color:rgba(244,246,250,.56);font-size:11.5px}
.ui .tm-scrub i{position:relative;flex:1;height:4px;border-radius:2px;background:var(--n-3,#232838)}
.ui .tm-scrub i::before{content:"";position:absolute;inset:0 62% 0 0;border-radius:inherit;background:#f4f6fa}
.ui .tm-ctrl{display:flex;align-items:center;gap:22px;margin-top:12px}
.ui .tm-ctrl svg{width:18px;height:18px;flex:none}
.ui .tm-ctrl .big{width:26px;height:26px}
.ui .tm-ctrl small{flex:1}
.ui .tm-ctrl small:last-child{text-align:right}
.ui .tm-msg{max-width:84%;padding:10px 14px;border-radius:16px 16px 16px 6px;background:var(--n-2,#161a25);line-height:1.4}
.ui .tm-msg.me{justify-self:end;border-radius:16px 16px 6px 16px;background:#0f2140;color:#fff}
.ui .tm-msg small{display:block;margin-bottom:3px;color:#ff4f17;font-weight:650}
.ui .tm-screens{display:grid;grid-template-columns:3fr 2fr;align-items:start;gap:10px}
.ui .tm-screen{display:grid;gap:4px;aspect-ratio:16/10;padding:5px;border-radius:10px;background:var(--n-2,#161a25)}
.ui .tm-screen.a{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.ui .tm-screen.a i:first-child{grid-row:1/3}
.ui .tm-screen.b{grid-template-rows:1fr 1fr}
.ui .tm-screen i{border-radius:6px;background:#2a3042}
.ui .tm-screen i.on{background:#ff4f17}
.ui .tm-check{display:grid;place-items:center;width:20px;height:20px;flex:none;border:1.5px solid rgba(244,246,250,.4);border-radius:6px;color:#0b0b0d;font:800 12px/1 var(--sans)}
.ui .tm-row.done .tm-check{border-color:#ff4f17;background:#ff4f17}
.ui .tm-row.done > span{color:rgba(244,246,250,.5);text-decoration:line-through}
.ui .tm-timer{justify-items:center;gap:10px;padding:22px 22px 24px;text-align:center}
.ui .tm-timer b{color:#ff4f17;font:700 clamp(52px,6vw,72px)/1 var(--sans);font-stretch:112%;letter-spacing:-.03em}
.ui .tm-progress{position:relative;width:100%;height:6px;margin-top:6px;border-radius:3px;background:var(--n-3,#232838)}
.ui .tm-progress::before{content:"";position:absolute;inset:0 25% 0 0;border-radius:inherit;background:#ff4f17}
.ui .tm-stop{flex:none;padding:7px 11px;border-radius:999px;background:#ff4f17;color:#0b0b0d;font:650 12px/1 var(--sans)}

/* Shortcuts as keycaps, for the visitor's system (both when scripts are off) */
.ui .os-switch{display:inline-flex;width:max-content;padding:4px;margin-top:22px;border-radius:999px;background:var(--surface)}
.ui .os-switch button{height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:650 14.5px/1 var(--sans)}
.ui .os-switch button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.ui .key-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:0;list-style:none}
.ui .key-grid li{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(180px,16vw,220px);padding:clamp(20px,2.4vw,30px);border-radius:var(--r-xl);background:var(--surface)}
.ui .key-grid .what{color:var(--text);font-size:18px;font-weight:650}
.ui .key-grid .keys{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ui .h-keys:not([data-os]) .keys::before{content:attr(data-label);width:100%;color:var(--text-3);font-size:12.5px;font-weight:600}
.ui .h-keys[data-os="win"] .keys[data-for="mac"],.ui .h-keys[data-os="mac"] .keys[data-for="win"]{display:none}
.ui .key-grid kbd{display:inline-grid;place-items:center;min-width:56px;height:56px;padding:0 15px;border-radius:14px;background:var(--surface-3);color:var(--text);font:650 18px/1 var(--sans)}
.ui .h-keys:not([data-os]) .keys + .keys{margin-top:-14px}

/* Platforms: a card each, with its own download */
.ui .h-platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ui .h-platform{display:flex;flex-direction:column;gap:18px;padding:clamp(28px,3.6vw,52px);border-radius:var(--r-xl);background:var(--surface)}
.ui .h-platform h3{font:700 clamp(52px,7vw,112px)/.86 var(--sans);font-stretch:120%;letter-spacing:-.055em}
.ui .h-platform .req{color:var(--text);font-size:17px;font-weight:650}
.ui .h-platform ul{display:grid;gap:12px;padding:0;margin:8px 0 0;list-style:none}
.ui .h-platform li{position:relative;padding-left:22px;color:var(--text-2);font-size:17px}
.ui .h-platform li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--accent-text)}
body.ui[data-theme="light"] .h-platform:not(.field-cobalt) li::before{background:var(--blue)}
.ui .h-aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ui .h-aud-card{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,2.8vw,36px);border-radius:var(--r-xl);background:var(--surface)}
.ui .h-aud-card h3{font:700 clamp(30px,3.2vw,44px)/.95 var(--sans);font-stretch:118%;letter-spacing:-.04em}
.ui .h-aud-card > p{color:var(--text);font-size:16.5px;font-weight:600}
.ui .h-aud-card ul{display:grid;gap:10px;padding:0;margin:4px 0 8px;list-style:none}
.ui .h-aud-card li{position:relative;padding-left:20px;color:var(--text-2);font-size:15.5px}
.ui .h-aud-card li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--accent-text)}
body.ui[data-theme="light"] .h-aud-card:not(.field-cobalt):not(.field-lime) li::before{background:var(--blue)}
.ui .h-aud-card .h-more{margin-top:auto}
@media (max-width:980px){.ui .h-aud{grid-template-columns:minmax(0,1fr)}}
.ui .h-platform .acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:auto;padding-top:24px}

/* Questions: heading on the left, answers on the right */
.ui .h-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px clamp(32px,6vw,104px);align-items:start}
.ui .h-faq-head{position:sticky;top:32px;display:grid;gap:20px}
.ui .h-faq-head .lead{font-size:17px}
.ui .h-faq .faq{margin:0}
.ui .h-faq .faq summary{padding:22px 24px;font-size:18px;letter-spacing:-.01em}
.ui .h-faq .faq details > p{padding:0 24px 24px;max-width:62ch;font-size:16.5px}

/* Closing: a lime field with the three prices set large */
.ui .h-cta{margin-top:var(--gap);padding:clamp(80px,11vw,176px) 0 clamp(64px,8vw,120px)}
.ui .h-cta h2{max-width:13ch;font:700 clamp(46px,8.6vw,150px)/.9 var(--sans);font-stretch:118%;letter-spacing:-.05em}
.ui .h-prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;margin:clamp(44px,5.4vw,80px) 0 0;list-style:none}
.ui .h-prices li{display:grid;align-content:start;gap:10px}
.ui .h-prices b{font:700 clamp(40px,5.4vw,84px)/.9 var(--sans);font-stretch:116%;letter-spacing:-.045em}
.ui .h-prices span{color:var(--text-2);font-size:17px;font-weight:600}
.ui .h-cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 56px;align-items:end;margin-top:clamp(40px,4.8vw,72px)}
.ui .h-cta-row p{max-width:46ch;color:var(--text);font-size:clamp(17px,1.5vw,20px)}
.ui .h-cta .hero-actions{margin:0}
/* Listed on: the directories Syllo is on, as a line of logos that loops. Each listing is a logo <symbol> in the
   sprite plus one <li> per repeat in index.html; the track holds two equal sets and slides by one. */
.ui .h-listed{display:grid;gap:24px;padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,72px)}
.ui .h-listed h2{color:var(--text-3);font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.ui .h-listed-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ui .h-listed-loop{overflow:hidden}
.ui .h-listed-track{display:flex;width:max-content;animation:h-listed 36s linear infinite}
.ui .h-listed-loop:hover .h-listed-track,.ui .h-listed-loop:focus-within .h-listed-track{animation-play-state:paused}
.ui .h-listed-set{display:flex;align-items:center;margin:0;padding:0;list-style:none}
/* Spacing sits on each item, not as a gap, so both sets are exactly as wide and the loop never jumps. */
.ui .h-listed-set li{padding-inline-end:clamp(48px,6vw,96px)}
.ui .h-listed-set a{display:inline-flex;align-items:center;gap:14px;padding:6px 0;border-radius:12px;color:var(--text-2);font:700 clamp(22px,2.2vw,30px)/1 var(--sans);font-stretch:114%;letter-spacing:-.03em;white-space:nowrap;text-decoration:none;transition:color .16s ease}
.ui .h-listed-set a:hover{color:var(--text)}
.ui .h-listed-set a:focus-visible{outline:2px solid var(--text);outline-offset:6px}
.ui .h-listed-mark{flex:none;width:1.4em;height:1.4em;border-radius:22%}
@keyframes h-listed{to{transform:translateX(-50%)}}

@media (max-width:1080px){
  .ui .tools{grid-template-columns:minmax(0,1fr)}
  .ui .tool-list{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .ui .tool-list a{padding:10px 15px;border-radius:999px;background:var(--surface);color:var(--text-2);font:600 14.5px/1.2 var(--sans);font-stretch:100%;letter-spacing:0;text-decoration:none}
  .ui .tool-list a:hover{background:var(--surface-2);color:var(--text)}
  .ui .tool-list a[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
  .ui .key-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .ui .h-intro,.ui .h-faq,.ui .h-cta-row,.ui .h-platforms{grid-template-columns:minmax(0,1fr)}
  .ui .h-faq-head{position:static}
  .ui .tool-text{grid-template-columns:minmax(0,1fr)}
  .ui .tool-text .h-more{grid-column:1;grid-row:auto}
}
@media (max-width:560px){
  .ui .s-hero h1{font-stretch:108%}
  .ui .s-chapter{padding-top:430px}
  .ui .drop-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui .tm-music{grid-template-columns:minmax(0,1fr)}
  .ui .tm-art{width:72px;height:72px;border-radius:16px}
  .ui .key-grid{grid-template-columns:minmax(0,1fr)}
  .ui .key-grid li{min-height:0}
  .ui .key-grid kbd{min-width:46px;height:46px;padding:0 12px;font-size:16px}
  .ui .h-keys[data-os] .key-grid li{flex-direction:row;align-items:center;gap:12px;padding:16px 18px}
  .ui .h-keys[data-os] .key-grid .what{flex:1;min-width:0;font-size:16px}
  .ui .h-keys[data-os] .key-grid .keys{flex:none;gap:5px}
  .ui .h-keys[data-os] .key-grid kbd{min-width:38px;height:38px;padding:0 9px;border-radius:10px;font-size:14px}
  .ui .h-prices{grid-template-columns:minmax(0,1fr);gap:18px}
  .ui .h-prices li{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:14px}
  .ui .h-faq .faq summary{padding:18px;font-size:16.5px}
  .ui .h-faq .faq details > p{padding:0 18px 18px}
}

@media (prefers-reduced-motion:reduce){.ui *,.ui *::before,.ui *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.ui .ui-header,.ui .ui-footer,.ui .docs-side,.ui .docs-toc,.ui .dash-side,.ui .dash-top{display:none!important}body.ui{background:#fff;color:#000}}

/* =====================================================================================================
   Field layer: every page in the Home design.
   Cream paper and ink, white cards with a soft drop, Inter for text, Instrument Serif italic for the one
   accent phrase in a headline, JetBrains Mono for small labels. Signal orange (#ff4f17) stays small: live
   dots, the brand dot, focus rings. Dark is the same system at night: deep ink, warm off-white text.
   The header is the floating pill from Home; questions are one card of rows numbered Q.01, Q.02…
   This block comes last so it wins over the older rules above without rewriting them one by one.
   ===================================================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2")}
@font-face{font-family:"Pixelify Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/pixelify-sans-latin.woff2") format("woff2")}

:root{
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --pixel:"Pixelify Sans","JetBrains Mono",monospace;
  --brand:#ff4f17;--ink:#14151a;--cream:#f5f5f1;
  --wrap:1120px;--r:16px;--r-lg:22px;--r-xl:28px;
  --gap:clamp(88px,10vw,140px);
}
body.ui,body.ui[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f5f1;--bg-2:#efefe9;--surface:#ffffff;--surface-2:#f0f0ea;--surface-3:#e4e4dd;
  --line:rgba(20,21,26,.08);--line-2:rgba(20,21,26,.14);--line-3:rgba(20,21,26,.3);
  --text:#14151a;--text-2:rgba(20,21,26,.64);--text-3:rgba(20,21,26,.46);
  --accent:#14151a;--accent-ink:#ffffff;--accent-text:#ff4f17;--accent-hover:#000000;
  --blue:#14151a;--blue-text:#14151a;--blue-soft:rgba(20,21,26,.06);
  --lime-soft:rgba(46,160,90,.1);--ok:#2f9e5a;--danger:#d23f1f;--danger-soft:rgba(210,63,31,.08);--warn:#a8650a;
  --card-shadow:0 1px 0 rgba(20,21,26,.03),0 20px 50px -28px rgba(20,21,26,.28);
  --shadow:0 30px 70px -30px rgba(20,21,26,.35);
  --n-bg:#0b0b0d;--n-2:#1b1c21;--n-3:#2a2b31;
}
body.ui[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0d10;--bg-2:#111216;--surface:#16171c;--surface-2:#1d1f25;--surface-3:#272930;
  --line:rgba(243,241,234,.08);--line-2:rgba(243,241,234,.14);--line-3:rgba(243,241,234,.3);
  --text:#f3f1ea;--text-2:rgba(243,241,234,.66);--text-3:rgba(243,241,234,.44);
  --accent:#f3f1ea;--accent-ink:#0c0d10;--accent-text:#ff6a3d;--accent-hover:#ffffff;
  --blue:#f3f1ea;--blue-text:#f3f1ea;--blue-soft:rgba(243,241,234,.07);
  --lime-soft:rgba(70,190,120,.12);--ok:#5fcf8c;--danger:#ff7a5c;--danger-soft:rgba(255,122,92,.1);--warn:#f0b35a;
  --card-shadow:0 0 0 1px rgba(243,241,234,.06),0 24px 60px -30px rgba(0,0,0,.8);
  --shadow:0 30px 70px -30px rgba(0,0,0,.85);
  --n-bg:#000000;--n-2:#17181c;--n-3:#25262c;
}
html:has(body.ui){background:#f5f5f1;scroll-padding-top:110px}
html:has(body.ui[data-theme="dark"]){background:#0c0d10}
body.ui{font:400 16px/1.6 var(--sans);font-variant-numeric:normal}
.ui ::selection{background:var(--brand);color:#fff}
.ui :focus-visible:not(.desktop-screen *){outline:2px solid var(--brand);outline-offset:3px}
body.ui[data-theme="light"] :focus-visible{outline-color:var(--brand)}
:where(.ui) :is(h1,h2,h3,h4){font-family:var(--sans);font-weight:550;font-stretch:100%;letter-spacing:-.03em}
.ui :is(h1,h2,.display,.title,.h-title) em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.06em}
.ui .display{font-weight:550;font-stretch:100%;font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.045em}
.ui .title{font-weight:550;font-stretch:100%;font-size:clamp(34px,4.4vw,54px);line-height:1.04;letter-spacing:-.04em}
.ui .lead{color:var(--text-2);font-size:clamp(17px,1.35vw,19px);line-height:1.55}
.ui .label{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ui .muted{color:var(--text-2)}
:where(.ui) :is(code,kbd){font:500 .86em/1 var(--mono);background:var(--surface-2);border:1px solid var(--line)}
.ui .wrap{width:min(var(--wrap),100% - 40px)}

/* Brand */
.ui .brand{color:var(--text);font:650 21px/1 var(--sans);font-stretch:100%;letter-spacing:-.045em}
.ui .brand img{width:32px;height:32px;border-radius:9px}
.ui .brand i{color:var(--brand)}

/* Buttons: ink pills that lift a little */
.ui .btn{--h:50px;padding:0 24px;border:1px solid transparent;background:var(--accent);color:var(--accent-ink);font:600 15px/1 var(--sans);box-shadow:0 12px 28px -14px rgba(0,0,0,.55);transition:transform .25s var(--ease),box-shadow .25s,background .2s,border-color .2s,color .2s}
.ui .btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.ui .btn:active{transform:scale(.98)}
.ui .btn-ghost,.ui .btn-ghost:hover{background:var(--surface);border-color:var(--line-2);color:var(--text);box-shadow:none}
.ui .btn-ghost:hover{border-color:var(--line-3)}
.ui .btn-blue,.ui .btn-dark{background:var(--accent);color:var(--accent-ink)}
.ui .btn-blue:hover,.ui .btn-dark:hover{background:var(--accent-hover)}
.ui .btn-danger{box-shadow:none}
.ui .btn-sm{--h:40px;padding:0 18px;font-size:14px;box-shadow:none}
.ui .link{color:inherit;text-decoration-color:var(--line-3)}
.ui .link:hover{color:var(--text);text-decoration-color:var(--brand)}
.ui .prose a:not(.btn){color:var(--text);text-decoration-color:var(--line-3)}
.ui .prose a:not(.btn):hover{text-decoration-color:var(--brand)}

/* Header: the floating pill from Home, on every page */
.ui .ui-header:not(.hm-header){position:sticky;top:12px;z-index:120;height:auto;margin:12px 0 0;padding:0 12px;background:none;pointer-events:none}
.ui .ui-header:not(.hm-header) .wrap{position:relative;display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;height:auto;padding:6px 6px 6px 12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 4px 20px -8px rgba(0,0,0,.16);pointer-events:auto}
.ui .ui-header .ui-nav{position:static;display:flex;flex-wrap:nowrap;gap:2px;width:auto;min-width:0;max-width:none;margin-left:18px;padding:0;border-radius:0;background:none;color:inherit;transform:none;transition:none}
.ui .ui-header .ui-nav::before,.ui .ui-header .ui-nav::after{content:none}
.ui .ui-header .ui-nav a{padding:9px 13px;border-radius:999px;background:none;color:var(--text-2);font:500 15px/1 var(--sans)}
.ui .ui-header .ui-nav a:hover{background:var(--blue-soft);color:var(--text)}
.ui .ui-header .ui-nav a[aria-current="page"]{background:none;color:var(--text);font-weight:600}
.ui .ui-header .ui-nav :focus-visible{outline-color:var(--brand)}
.ui .ui-header .ui-actions{gap:6px;margin-left:10px}
.ui .ui-header .ui-actions .session{padding:9px 10px;color:var(--text-2);font:500 15px/1 var(--sans)}
.ui .ui-header .btn-sm{--h:42px}
.ui .ui-header .nav-toggle{place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--blue-soft);color:var(--text)}
.ui .ui-header .nav-toggle svg{width:20px;height:20px}
.ui .theme-slot .home-theme-toggle{width:46px;height:26px}
@media (max-width:1080px){
  body.ui{--header:60px}
  .ui .ui-header:not(.hm-header){padding:0 12px}
  .ui .ui-header:not(.hm-header) .wrap{width:min(100%,560px);justify-content:space-between;height:auto}
  .ui .ui-header .ui-nav{display:none}
  .ui .ui-header .ui-nav.is-open{position:absolute;top:calc(100% + 8px);left:0;right:0;display:grid;gap:2px;margin:0;padding:8px;border:1px solid var(--line);border-radius:24px;background:color-mix(in srgb,var(--bg) 97%,transparent);box-shadow:0 20px 40px -16px rgba(0,0,0,.3)}
  .ui .ui-header .ui-nav.is-open a{padding:14px 16px;font-size:16px}
  .ui .ui-header .nav-toggle{display:grid!important}
  body.ui.notch-solo{padding-top:0}
}
@media (max-width:520px){.ui .ui-header .ui-actions .session{display:none}}

/* Sections, cards */
.ui .hero{padding:clamp(72px,9vw,120px) 0 clamp(40px,5vw,72px)}
.ui .card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--card-shadow)}
.ui .card h2{font-size:22px;letter-spacing:-.03em}
.ui .card h3{font-size:17px;letter-spacing:-.02em}
.ui a.link-card{transition:transform .25s var(--ease),box-shadow .25s}
.ui a.link-card:hover{background:var(--surface);transform:translateY(-3px);box-shadow:var(--shadow)}
.ui .grid{gap:14px}
.ui .icon-tile{border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text)}
.ui .icon-tile.lime,.ui .icon-tile.blue{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.ui .tag{height:24px;padding:0 10px;border:1px solid var(--line);background:var(--bg);color:var(--text-2);font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ui .tag.lime{background:var(--accent);color:var(--accent-ink)}
.ui .tag.ok::before,.ui .tag.dot::before,body.ui[data-theme="light"] .tag.ok::before{background:var(--ok)}
.ui .notice{border:1px solid var(--line);background:var(--surface);color:var(--text-2)}
.ui .notice svg{color:var(--brand)}
.ui .status{border:1px solid color-mix(in srgb,var(--ok) 25%,transparent);background:var(--lime-soft)}
.ui .field input,.ui .field select,.ui .field textarea,body.ui[data-theme="light"] .field :is(input,select,textarea){border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.ui .field input:focus,.ui .field select:focus,.ui .field textarea:focus,body.ui[data-theme="light"] .field :is(input,select,textarea):focus{border-color:var(--text);box-shadow:0 0 0 4px var(--blue-soft)}
.ui .prose ul > li::before,body.ui[data-theme="light"] .prose ul > li::before{width:6px;height:6px;border-radius:50%;background:var(--text-3)}
.ui .prose h2{font:550 clamp(28px,3vw,36px)/1.1 var(--sans);letter-spacing:-.035em}
.ui .table-scroll{border:1px solid var(--line);box-shadow:var(--card-shadow)}
.ui .toc a[aria-current="true"]{border:1px solid var(--line);background:var(--surface);box-shadow:0 6px 16px -10px rgba(0,0,0,.25)}

/* Questions, the Home way: one card of rows numbered Q.01, Q.02…, a round + that turns into × */
.ui .h-faq{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:40px 48px}
.ui .h-faq-head{top:110px;gap:0}
.ui .h-faq-head .lead{max-width:380px;margin-top:24px}
.ui .faq,.ui .h-faq .faq{display:block;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:0 40px 80px -40px rgba(0,0,0,.3);counter-reset:q}
.ui .faq details{counter-increment:q;border-top:1px solid var(--line);border-radius:0;background:none}
.ui .faq details:first-child{border-top:0}
.ui .faq details:hover{background:none}
.ui .faq summary,.ui .h-faq .faq summary{display:flex;align-items:center;justify-content:flex-start;gap:20px;padding:24px 28px;color:var(--text);font-size:17px;font-weight:550;letter-spacing:-.02em;line-height:1.35;transition:background .2s}
.ui .faq summary::before{content:"Q." counter(q,decimal-leading-zero);flex:none;width:40px;color:var(--text-3);font:400 12px/1 var(--mono)}
.ui .faq summary::after{content:"";flex:none;width:38px;height:38px;margin-left:auto;border-radius:50%;background-color:var(--blue-soft);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314151a' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");background-position:center;background-size:17px;background-repeat:no-repeat;transition:transform .3s var(--ease),background-color .3s}
body.ui[data-theme="dark"] .faq summary::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ea' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
.ui .faq summary:hover{background:var(--bg-2)}
.ui .faq details[open] summary::after{transform:rotate(45deg);background-color:var(--text);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
body.ui[data-theme="dark"] .faq details[open] summary::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0d10' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
.ui .faq details > :not(summary),.ui .h-faq .faq details > p{max-width:none;padding:0 88px 26px 88px;color:var(--text-2);font-size:16px;line-height:1.6}
.ui .faq details > :not(summary) + :not(summary){margin-top:-14px}
.ui .faq details[open] > :not(summary){animation:h-in .4s var(--ease) both}
@media (max-width:1080px){.ui .h-faq{grid-template-columns:minmax(0,1fr)}.ui .h-faq-head{position:static}}
@media (max-width:640px){
  .ui .faq{border-radius:22px}
  .ui .faq summary,.ui .h-faq .faq summary{gap:12px;padding:20px 18px;font-size:16px}
  .ui .faq summary::before{display:none}
  .ui .faq summary::after{width:32px;height:32px}
  .ui .faq details > :not(summary),.ui .h-faq .faq details > p{padding:0 18px 20px;font-size:15.5px}
}

/* Footer: Home's, with no giant wordmark */
.ui .ui-footer{padding:clamp(64px,8vw,96px) 0 32px;background:var(--bg)}
.ui .footer-top{grid-template-columns:minmax(0,1.3fr) repeat(4,max-content);justify-content:space-between;gap:40px 56px}
.ui .footer-tagline{max-width:18ch;font:550 26px/1.15 var(--sans);letter-spacing:-.035em}
.ui .footer-col{gap:13px}
.ui .footer-col .label{margin-bottom:4px}
.ui .footer-col a{color:var(--text-2);font-size:15.5px}
.ui .footer-col a:hover{color:var(--text)}
.ui .footer-word{display:none}
.ui .footer-bottom{margin-top:64px;border-top:1px solid var(--line);font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){.ui .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Colour fields become painted scenes: cobalt is the temple at night, lime the same hill at dawn.
   The painting sits on ::before and a flat tint on ::after keeps the text readable (no gradients). */
.ui .field-cobalt,.ui .field-lime,.ui .os-card.win,.ui .os-card.mac{--text:#fff;--text-2:rgba(255,255,255,.88);--text-3:rgba(255,255,255,.72);--line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.3);--line-3:rgba(255,255,255,.6);--accent:#fff;--accent-ink:#14151a;--accent-hover:#f3f1ea;--accent-text:#ffd2bf;--blue-text:#fff;--surface:rgba(255,255,255,.1);--surface-2:rgba(255,255,255,.16);position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0a1a33}
.ui :is(.field-cobalt,.field-lime,.os-card.win,.os-card.mac)::before{content:"";position:absolute;inset:0;z-index:-2;background:url("/assets/field/night-temple.webp") center 40%/cover no-repeat}
.ui :is(.field-cobalt,.field-lime,.os-card.win,.os-card.mac)::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,20,42,.5)}
.ui :is(.field-lime,.os-card.mac){background:#b78d4a}
.ui :is(.field-lime,.os-card.mac)::before{background-image:url("/assets/field/dawn-temple.webp");background-position:center 60%}
.ui :is(.field-lime,.os-card.mac)::after{background:rgba(40,26,8,.55)}
.ui :is(.field-cobalt,.field-lime,.os-card) .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(8px)}
.ui :is(.field-cobalt,.field-lime,.os-card) .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
.ui :is(.field-cobalt,.field-lime) :focus-visible{outline-color:#fff}
.ui .os-card{border:0;border-radius:var(--r-xl);box-shadow:var(--shadow);min-height:380px}
.ui .os-card h2{font:550 clamp(40px,4.6vw,60px)/1 var(--sans);letter-spacing:-.045em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.ui .os-card p{color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.3)}
.ui .os-card .tag,.ui .os-card.mac .tag{border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.25);color:#fff;backdrop-filter:blur(8px)}
.ui .os-card .icon-tile,.ui .os-card.win .icon-tile.blue,.ui .os-card.mac .icon-tile.lime{border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.3);color:#fff;backdrop-filter:blur(8px)}
.ui .os-card .btn,.ui .os-card.mac .btn{background:#fff;color:#14151a}
.ui .os-card .btn:hover,.ui .os-card.mac .btn:hover{background:#f3f1ea}
.ui .os-card :focus-visible{outline-color:#fff}

/* Download: the installer for this computer gets a ring; install steps are a real sequence. */
.ui .os-tags{display:flex;gap:6px}
.ui .os-card.is-yours{outline:2px solid var(--brand);outline-offset:4px}
.ui .os-yours{border-color:transparent!important;background:var(--brand)!important;color:#fff!important}
.ui .steps-row li{border:1px solid var(--line);box-shadow:var(--card-shadow)}
.ui .steps-row li::before{display:grid;place-items:center;width:30px;height:30px;margin-bottom:22px;border:1px solid var(--line-2);border-radius:50%;color:var(--text-2);font:500 13px/1 var(--sans);letter-spacing:0}
.ui .steps-row b{font-weight:600}
.ui .steps li::before,.ui .dl-steps li::before{background:var(--bg);border:1px solid var(--line-2);color:var(--text-2)}

/* Docs */
.ui .docs-group a[aria-current="true"],body.ui[data-theme="light"] .docs-group a[aria-current="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.ui .docs-search input{border:1px solid var(--line);background:var(--surface);box-shadow:0 6px 16px -12px rgba(0,0,0,.2)}
.ui .doc-head h2{font:550 clamp(32px,3.4vw,46px)/1.05 var(--sans);letter-spacing:-.04em}
.ui .doc-head p{font-size:18px}
.ui .doc-facts > div{border:1px solid var(--line);background:var(--surface);box-shadow:var(--card-shadow)}
.ui .docs-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:36px 0 12px}
.ui .docs-start a{display:grid;align-content:start;gap:6px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--card-shadow);transition:transform .25s var(--ease),box-shadow .25s}
.ui .docs-start a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ui .docs-start b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.ui .docs-start span{color:var(--text-2);font-size:14px;line-height:1.45}
@media (max-width:760px){.ui .docs-start{grid-template-columns:minmax(0,1fr)}}
.ui .docs-cta{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:var(--r-xl);background:#0a1a33;color:#fff;box-shadow:var(--shadow)}
.ui .docs-cta::before{content:"";position:absolute;inset:0;z-index:-2;background:url("/assets/field/night-temple.webp") center 45%/cover no-repeat}
.ui .docs-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,20,42,.55)}
.ui .docs-cta h2{font:550 clamp(28px,3vw,38px)/1.05 var(--sans);letter-spacing:-.04em}
.ui .docs-cta .hero-actions{margin:0}
.ui .docs-cta .btn{background:#fff;color:#14151a}
.ui .docs-cta .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}
.ui .docs-start + .prose{margin-top:44px}

/* Help Center: a search over every answer, topic chips, and each topic as a question card */
.ui .help-hero{max-width:820px;margin-inline:auto;text-align:center}
.ui .help-hero .lead{margin:22px auto 0}
.ui .help-search{position:relative;max-width:620px;margin:36px auto 0}
.ui .help-search svg{position:absolute;left:22px;top:50%;width:20px;height:20px;color:var(--text-3);transform:translateY(-50%);pointer-events:none}
.ui .help-search input{width:100%;height:62px;padding:0 24px 0 56px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--text);font-size:16.5px;box-shadow:0 20px 50px -28px rgba(0,0,0,.35);transition:border-color .2s,box-shadow .2s}
.ui .help-search input:focus{outline:0;border-color:var(--text);box-shadow:0 0 0 4px var(--blue-soft),0 20px 50px -28px rgba(0,0,0,.35)}
.ui .help-topics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.ui .help-topics a{padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:14.5px;font-weight:500;transition:color .2s,border-color .2s}
.ui .help-topics a:hover{border-color:var(--line-3);color:var(--text)}
.ui .help-sections{display:grid;gap:clamp(64px,8vw,104px);padding:clamp(24px,4vw,48px) 0 0}
.ui .help-topic{scroll-margin-top:110px}
.ui .help-empty{color:var(--text-2);text-align:center}
.ui .help-contact{padding:clamp(72px,9vw,120px) 0 0}
.ui .help-contact .docs-cta{margin:0}

/* ---------- Dashboard, in the field design ----------
   An app screen on cream paper: a quiet sidebar whose current page is a raised white tile, a translucent
   top bar, and white cards with a hairline and a soft drop. Your plan is the one painted card (the temple
   hills at dawn); the latest version is set in the pixel face, as prices are on the website. */
body.ui.dash{background:var(--bg)}
.ui .dash-shell{grid-template-columns:256px minmax(0,1fr)}
.ui .dash-side{gap:26px;padding:20px 14px;border-right:1px solid var(--line);background:var(--bg)}
.ui .dash-side .brand{padding:6px 10px}
.ui .dash-side .brand small{border:1px solid var(--line);background:var(--surface);font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ui .dash-nav .label{padding:0 12px 8px;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ui .dash-nav a{height:40px;border:1px solid transparent;border-radius:12px;font-size:14.5px}
.ui .dash-nav a:hover{background:var(--blue-soft)}
.ui .dash-nav a[aria-current="page"]{border-color:var(--line);background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 0 rgba(20,21,26,.04),0 6px 16px -10px rgba(20,21,26,.3)}
.ui .dash-nav a[aria-current="page"] svg{color:var(--brand)}
.ui .dash-user{border:1px solid var(--line);background:var(--surface);box-shadow:var(--card-shadow)}
.ui .avatar{background:var(--ink);color:#fff;font-weight:600}
body.ui[data-theme="dark"] .avatar{background:#f3f1ea;color:#0c0d10}
.ui .icon-btn{border:1px solid var(--line);background:var(--bg)}
.ui .dash-top{height:60px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.ui.dash.notch-solo{padding-top:0}
body.ui.dash .dash-top{top:0}
.ui .crumbs b{font-weight:600}
.ui .dash-content{max-width:1120px;margin-inline:auto;padding:clamp(28px,4vw,52px) clamp(16px,3vw,44px) 96px}
.ui .dash-loading{display:flex;align-items:center;gap:10px;color:var(--text-2)}
.ui .page-head{margin-bottom:28px}
.ui .page-head h1{font:550 clamp(34px,3.8vw,48px)/1.05 var(--sans);letter-spacing:-.045em}
.ui .page-head h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1.06em}
.ui .page-head p{font-size:16px}
.ui .page-head .tag{align-self:center}

/* Overview */
.ui .plan-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px}
.ui .feature-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;min-height:300px;padding:30px;overflow:hidden;border:0;border-radius:var(--r-xl);background:#3c3a2a;color:#fff;box-shadow:var(--shadow);--text:#fff;--text-2:rgba(255,255,255,.88);--text-3:rgba(255,255,255,.75);--accent:#fff;--accent-ink:#14151a;--accent-hover:#f3f1ea}
.ui .feature-card::before{content:"";position:absolute;inset:0;z-index:-2;background:url("/assets/field/temple-hills.webp") center 60%/cover no-repeat}
.ui .feature-card::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(36,26,8,.48)}
.ui .feature-card .label{color:rgba(255,255,255,.8)}
.ui .feature-card .tag{border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.28);color:#fff;backdrop-filter:blur(8px);width:max-content}
.ui .feature-card h2{margin-top:auto;font:550 clamp(34px,3.6vw,48px)/1.02 var(--sans);letter-spacing:-.045em;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.ui .feature-card h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em}
.ui .feature-card p{max-width:46ch;color:rgba(255,255,255,.9)}
.ui .feature-card .hero-actions{margin-top:14px}
.ui .feature-card .btn{background:#fff;color:#14151a}
.ui .feature-card .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff;backdrop-filter:blur(8px)}
.ui #release-card{display:flex;flex-direction:column;border-radius:var(--r-xl);padding:30px}
.ui .release-version{margin-top:14px;font:600 64px/1 var(--pixel);letter-spacing:0;color:var(--text)}
.ui #release-card .hero-actions{margin-top:auto;padding-top:18px}
.ui .dash-quick{margin-top:14px}
.ui .quick{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--card-shadow);transition:transform .25s var(--ease),box-shadow .25s}
.ui .quick:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.ui .quick > span:nth-child(2){display:grid;gap:2px;flex:1;min-width:0}
.ui .quick b{font-size:15px;font-weight:600}
.ui .quick small{color:var(--text-2);font-size:13.5px}
.ui .quick > svg{width:16px;height:16px;color:var(--text-3);transition:transform .25s var(--ease)}
.ui .quick:hover > svg{transform:translateX(3px);color:var(--text)}
.ui .dash-team{margin-top:14px}
.ui .stat{border:1px solid var(--line);background:var(--surface);box-shadow:var(--card-shadow)}
.ui .stat strong{font:550 40px/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ui .stat .label{font-size:10.5px}
.ui .skeleton{border-radius:14px;background:var(--surface-2)}
.ui .skeleton.tall{height:120px;margin-top:16px}
.ui .skeleton.row{height:56px}
.ui .skeleton.block{height:100px}

/* Lists, plans and settings rows on the other pages */
.ui .list{display:grid}
.ui .list-row{padding:16px 0;border-top:1px solid var(--line);border-bottom:0;background:none}
.ui .list-row:first-child{border-top:0}
.ui .plans{gap:14px}
.ui .plan{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--card-shadow)}
.ui .plan .price b{font-family:var(--pixel);font-weight:600;letter-spacing:0}
.ui .plan.best{border-color:transparent;background:#14151a;color:#f3f1ea;--text:#f3f1ea;--text-2:rgba(243,241,234,.68);--accent:#fff;--accent-ink:#14151a;--accent-hover:#f3f1ea}
body.ui[data-theme="dark"] .plan.best{background:#f3f1ea;color:#14151a;--text:#14151a;--text-2:rgba(20,21,26,.66);--accent:#14151a;--accent-ink:#fff;--accent-hover:#000}
.ui .plan.best .tag{border-color:transparent;background:var(--brand);color:#fff}
.ui .settings-row{border-color:var(--line)}
.ui .danger-zone{border-color:color-mix(in srgb,var(--danger) 30%,transparent)}
@media (max-width:1000px){
  .ui .plan-hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .ui .dash-shell{grid-template-columns:minmax(0,1fr)}
  .ui .dash-side{border-right:0;box-shadow:var(--shadow)}
}
.ui .release-note{margin-top:10px}
.ui .dash-gap{margin-top:14px}
.ui .dash-para{margin-top:12px}
.ui .dash-section-head{margin:56px 0 20px}
.ui .dash-section-head .title{font-size:clamp(30px,3vw,40px)}
.ui .ticks{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.ui .ticks li{position:relative;padding-left:28px;color:var(--text-2)}
.ui .ticks li::before{content:"";position:absolute;left:0;top:.2em;width:18px;height:18px;border-radius:50%;background:var(--blue-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314151a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center/12px no-repeat}
body.ui[data-theme="dark"] .ticks li::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1ea' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>")}
.ui .btn.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger);box-shadow:none}
.ui .btn.btn-danger:hover{background:var(--danger-soft)}
.ui .profile-card{display:flex;flex-wrap:wrap;align-items:center;gap:20px 24px;padding:28px 30px}
.ui .profile-who{flex:1;min-width:200px}
.ui .profile-who h1{font:550 clamp(28px,3vw,36px)/1.05 var(--sans);letter-spacing:-.04em}
.ui .profile-who p{margin-top:6px}
.ui .profile-tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Customers (owner CRM): one bar for the stage mix, stage chips, a quiet table, a detail panel ---------- */
.ui .crm{margin-bottom:14px;padding:28px}
.ui .crm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.ui .crm-head h2{font-size:24px;letter-spacing:-.035em}
.ui .crm-head p{margin-top:4px;color:var(--text-2);font-size:14.5px}
.ui .crm-tools{display:flex;align-items:center;gap:8px}
.ui .crm-search{position:relative;display:block}
.ui .crm-search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;color:var(--text-3);transform:translateY(-50%)}
.ui .crm-search input{width:240px;height:40px;padding:0 14px 0 36px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg);color:var(--text);font-size:14px}
.ui .crm-search input:focus{outline:0;border-color:var(--text)}
.ui .crm-bar{display:flex;gap:3px;height:10px;margin:22px 0 14px}
.ui .crm-bar i{min-width:6px;border-radius:999px}
.ui .crm-bar-paying,.ui .crm-stage-paying::before{background:var(--text)}
.ui .crm-bar-free,.ui .crm-stage-free::before{background:#8a8f99}
.ui .crm-bar-signed-up,.ui .crm-stage-signed-up::before{background:var(--line-3)}
.ui .crm-bar-churned,.ui .crm-stage-churned::before{background:var(--brand)}
.ui .crm-bar-refunded,.ui .crm-stage-refunded::before{background:var(--danger)}
.ui .crm-bar-staff,.ui .crm-stage-staff::before{background:#5c7fb8}
.ui .crm-stages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.ui .crm-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text-2);font-size:13.5px;font-weight:500}
.ui .crm-chip span{color:var(--text-3);font:500 11.5px/1 var(--mono)}
.ui .crm-chip:hover{border-color:var(--line-3);color:var(--text)}
.ui .crm-chip[aria-pressed="true"]{border-color:transparent;background:var(--accent);color:var(--accent-ink)}
.ui .crm-chip[aria-pressed="true"] span{color:inherit;opacity:.7}
.ui .crm-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.ui .crm-body:has(.crm-detail:not([hidden])){grid-template-columns:minmax(0,1fr) 300px}
.ui .crm-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.ui .crm-table table{min-width:720px;font-size:14px}
.ui .crm-table thead th{background:var(--bg);padding:0}
.ui .crm-sort{display:flex;align-items:center;gap:6px;width:100%;padding:12px 16px;border:0;background:none;color:var(--text-3);font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:left}
.ui .crm-sort:hover{color:var(--text)}
.ui .crm-sort[data-dir]{color:var(--text)}
.ui .crm-sort[data-dir="up"]::after{content:"↑"}
.ui .crm-sort[data-dir="down"]::after{content:"↓"}
.ui .crm-table tbody tr{cursor:pointer;transition:background .15s}
.ui .crm-table tbody tr:hover,.ui .crm-table tbody tr.is-picked{background:var(--bg-2)}
.ui .crm-table tbody tr:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ui .crm-table td,.ui .crm-table tbody th{padding:12px 16px;vertical-align:middle;white-space:nowrap}
.ui .crm-who{display:flex;align-items:center;gap:10px}
.ui .crm-who .avatar{width:30px;height:30px;font-size:12px}
.ui .crm-who > span:last-child{display:grid;min-width:0}
.ui .crm-who b{font-weight:550}
.ui .crm-who small{color:var(--text-3);font-size:12.5px;font-weight:400}
.ui .crm-stage{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-size:13.5px}
.ui .crm-stage::before{content:"";width:8px;height:8px;border-radius:50%}
.ui .crm-detail{position:sticky;top:84px;display:grid;justify-items:start;gap:8px;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.ui .crm-detail h3{margin-top:8px;font-size:19px;letter-spacing:-.025em}
.ui .crm-detail > .muted{margin-top:-4px;font-size:13.5px;word-break:break-all}
.ui .crm-close{position:absolute;top:12px;right:12px;font-size:18px}
.ui .crm-facts{display:grid;gap:10px;width:100%;margin:10px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.ui .crm-facts div{display:grid;gap:2px}
.ui .crm-facts dt{color:var(--text-3);font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ui .crm-facts dd{margin:0;font-size:14px}
.ui .crm-detail .hero-actions{margin-top:6px}
@media (max-width:1100px){.ui .crm-body:has(.crm-detail:not([hidden])){grid-template-columns:minmax(0,1fr)}.ui .crm-detail{position:relative;top:0}}
@media (max-width:640px){.ui .crm{padding:20px}.ui .crm-search input{width:100%}.ui .crm-tools{width:100%}.ui .crm-search{flex:1}}