/* Cerforma website — built on the Cerforma Design System tokens.
   Light-first: white surfaces, slate ink, Forma Green for action, Signal Amber for attention.
   Type is IBM Plex Sans with IBM Plex Mono for data. */

/* IBM Plex, self-hosted (SIL Open Font License, see /assets/fonts/OFL.txt). Latin and Latin Extended only. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400-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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500-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}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-variable-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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-variable-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{
  /* Paper */
  --paper-0:#FFFFFF; --paper-50:#FFFFFF; --paper-100:#F4F5F3; --paper-200:#E2E2DB; --paper-300:#CFCFC6;
  /* Slate */
  --slate-950:#121920; --slate-900:#1A232B; --slate-800:#26323C; --slate-700:#3A4752; --slate-600:#55626C;
  --slate-500:#76828B; --slate-400:#9AA4AB; --slate-300:#C3C9CD; --slate-200:#DDE1E3;
  /* Forma Green */
  --green-50:#E8F3EE; --green-100:#CFE6DB; --green-300:#7DBFA3; --green-500:#2F8F6B; --green-600:#267A5B; --green-700:#1F6249;
  /* Signal Amber */
  --amber-50:#FDF3DE; --amber-100:#FAE4B4; --amber-300:#F6CB72; --amber-500:#F2B33D; --amber-700:#9A6A10;
  /* Utility */
  --red-50:#FBEAE7; --red-500:#C8463A; --red-700:#9A3128;

  --bg-page:var(--paper-50); --bg-subtle:var(--paper-100); --bg-raised:var(--paper-0); --bg-inverse:var(--slate-800);
  --fg-1:var(--slate-900); --fg-2:var(--slate-600); --fg-3:#66727B; --fg-inverse:var(--paper-50); --fg-inverse-2:var(--slate-300);
  --border-1:var(--paper-200); --border-2:var(--paper-300); --border-inverse:var(--slate-700);
  --accent:var(--green-600); --accent-hover:var(--green-700); --accent-press:var(--green-700); --on-accent:#FFFFFF;

  --font-sans:'IBM Plex Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --radius-xs:2px; --radius-s:3px; --radius-m:3px; --radius-l:4px; --radius-xl:4px; --radius-pill:999px;
  --container:1240px; --gutter:24px; --header-h:64px;

  --shadow-1:0 1px 0 rgba(26,35,43,.04),0 1px 2px rgba(26,35,43,.06);
  --shadow-2:0 1px 0 rgba(26,35,43,.04),0 4px 12px -2px rgba(26,35,43,.08);
  --shadow-3:0 2px 0 rgba(26,35,43,.03),0 16px 40px -8px rgba(26,35,43,.16);
  --shadow-frame:0 2px 0 rgba(26,35,43,.03),0 24px 60px -16px rgba(26,35,43,.18);
  --shadow-float:0 2px 0 rgba(26,35,43,.03),0 18px 40px -14px rgba(26,35,43,.22);
  --ring-focus:0 0 0 3px rgba(47,143,107,.28);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-fast:120ms; --dur-base:200ms;
  /* Colours set from scripts and inline styles. Light values match the original literals; dark values are below. */
  --ui-white:#FFFFFF; --ui-tint:#FBFBF9; --ui-paper:#F7F7F4; --ui-mist:#EFEFEA; --ui-line:#E2E2DB; --ui-line-2:#CFCFC6; --ui-cloud:#DDE1E3;
  --ui-amber-tint:#FDF3DE; --ui-amber-tint-2:#FAE4B4; --ui-green-tint:#E8F3EE; --ui-green-tint-2:#CFE6DB;
  --ui-ink:#1A232B; --ui-ink-2:#3A4752; --ui-ink-3:#55626C; --ui-ink-4:#66727B; --ui-amber-ink:#9A6A10; --ui-amber-ink-2:#7A5208; --ui-green-ink:#1F6249;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-padding-top:88px}
html,body{margin:0;background:var(--bg-page);color:var(--fg-1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--fg-1);text-decoration:none}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--accent)}}
::selection{background:var(--green-100)}
input[type=range]{accent-color:var(--accent)}
button{font:inherit}
textarea:focus,input:focus,select:focus{outline:none;box-shadow:var(--ring-focus)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.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}
[hidden]{display:none !important}

/* ---------- Layout ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.cols{display:grid;gap:48px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
/* A short label or heading beside its content: a narrow first column, so the two don't sit half a page apart */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}
@media (max-width:759px){.split{grid-template-columns:minmax(0,1fr);gap:16px}}
.stack{display:flex;flex-direction:column}
.border-top{border-top:1px solid var(--border-1)}

/* ---------- Type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.eyebrow--inverse{color:var(--green-300)}
.label{font-family:var(--font-sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.mono{font-family:var(--font-mono)}
.accent{color:var(--accent)}
.h1{margin:0;font-size:clamp(40px,5.6vw,64px);line-height:1.05;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.h2{margin:0;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.h2--s{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1}
.lede{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.body{margin:0;font-size:17px;line-height:1.6;color:var(--fg-2);text-wrap:pretty}
.diamond{width:6px;height:6px;background:var(--accent);transform:rotate(45deg);flex:none}

/* ---------- Buttons (DS Button) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--radius-s);font-family:var(--font-sans);font-size:14px;font-weight:500;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn--sm{height:32px;padding:0 12px;font-size:13px}
.btn--lg{height:48px;padding:0 22px;font-size:15px}
.text-link{display:inline-flex;align-items:center;height:48px;padding:0 4px;font-size:15px;font-weight:500;color:var(--fg-1);text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:5px}
@media (hover:hover) and (pointer:fine){.text-link:hover{color:var(--accent);text-decoration-color:currentColor}}
.btn--block{width:100%}
.btn--primary{background:var(--slate-800);color:var(--fg-inverse);border:1px solid var(--slate-800)}
@media (hover:hover) and (pointer:fine){.btn--primary:hover{background:var(--slate-900);border-color:var(--slate-900);color:var(--fg-inverse)}}
.btn--accent{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
@media (hover:hover) and (pointer:fine){.btn--accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}}
.btn--secondary{background:var(--bg-raised);color:var(--fg-1);border:1px solid var(--border-2)}
@media (hover:hover) and (pointer:fine){.btn--secondary:hover{border-color:var(--slate-400);color:var(--fg-1)}}
.btn--ghost{background:transparent;color:var(--fg-1);border:1px solid transparent}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:var(--paper-100);color:var(--fg-1)}}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.btn--primary:disabled:hover{background:var(--slate-800)}}
@media (hover:hover) and (pointer:fine){.btn--accent:disabled:hover{background:var(--accent)}}

/* ---------- Surfaces ---------- */
.grid-bg{background-color:var(--paper-50);background-image:linear-gradient(var(--border-1) 1px,transparent 1px),linear-gradient(90deg,var(--border-1) 1px,transparent 1px);background-size:32px 32px}
.grid-bg--s{background-size:24px 24px}
.hair{display:grid;gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:var(--radius-l);overflow:hidden}
.hair>*{background:var(--bg-raised)}
.float-card{background:#fff;border:1px solid var(--border-1);border-radius:4px;box-shadow:var(--shadow-float);padding:16px;display:flex;flex-direction:column;gap:12px}
.chip{font-family:var(--font-sans);font-size:12px;padding:7px 10px;border:1px solid var(--border-2);border-radius:var(--radius-s);background:#fff;color:var(--slate-800)}
.tag{font-family:var(--font-mono);font-size:11px;padding:5px 8px;border:1px solid var(--border-1);border-radius:var(--radius-xs);background:#fff;color:var(--slate-700)}
.target{font-family:var(--font-mono);font-size:11px;padding:3px 6px;border:1px solid var(--border-2);border-radius:var(--radius-xs);color:var(--fg-2);flex:none}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;flex:none;white-space:nowrap}
.pill--amber{background:var(--amber-50);color:var(--amber-700)}
.pill--green{background:var(--green-50);color:var(--green-700)}
.pill--grey{background:var(--paper-100);color:var(--fg-2)}
.kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:9px;border-top:1px solid var(--paper-100);font-size:13px}
.kv>span:first-child{min-width:0}
.avatar{border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none}
.avatars{display:flex}
.avatars .avatar{width:26px;height:26px;margin-right:-3px;border:2px solid #fff;font-size:11px}
.dot{width:6px;height:6px;border-radius:50%;flex:none;display:inline-block}

/* ---------- Announcement + header ---------- */
.announce{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 20px;background:var(--slate-800);color:var(--fg-inverse);font-size:13px;text-align:center}
@media (hover:hover) and (pointer:fine){.announce:hover{color:var(--fg-inverse)}}
.announce .mono{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-300)}
.announce .arrow{color:var(--slate-300)}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--border-1)}
.site-header__bar{max-width:var(--container);margin:0 auto;height:var(--header-h);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg-1)}
@media (hover:hover) and (pointer:fine){.brand:hover{color:var(--fg-1)}}
.brand img{width:26px;height:26px}
.brand span{font-size:19px;font-weight:500;letter-spacing:-.03em}
.site-nav{display:flex;gap:4px;flex:1;margin-left:20px}
.site-nav a{font-size:14px;padding:8px 12px;border-radius:var(--radius-s);color:var(--slate-800)}
@media (hover:hover) and (pointer:fine){.site-nav a:hover{background:var(--paper-100);color:var(--slate-800)}}
.site-nav a[aria-current=page]{font-weight:500;background:var(--paper-100)}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;place-items:center;border-radius:var(--radius-s);border:0;background:transparent;font-family:var(--font-mono);font-size:20px;color:var(--slate-800);cursor:pointer}
@media (hover:hover) and (pointer:fine){.menu-btn:hover{background:var(--paper-100)}}
.mobile-menu{border-top:1px solid var(--border-1);background:var(--paper-50);padding:8px 16px 16px;flex-direction:column;gap:2px;display:none}
.mobile-menu a:not(.btn){font-size:16px;padding:12px 8px;border-bottom:1px solid var(--border-1);color:var(--slate-800)}
.mobile-menu a[aria-current=page]{font-weight:500}
.mobile-menu .btn{margin-top:12px}
@media (max-width:759px){
  .site-nav,.site-header__cta{display:none !important}
  .menu-btn{display:grid}
  .site-header.is-open .mobile-menu{display:flex}
}

/* ---------- Final CTA + footer ---------- */
.final-cta{padding:112px 0 96px}
.final-cta .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.final-cta img{width:44px;height:44px}
.final-cta h2{margin:0;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.02em;font-weight:600;max-width:900px;text-wrap:balance}
.site-footer{border-top:1px solid var(--border-1)}
.site-footer__top{padding-top:56px;padding-bottom:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:32px}
.site-footer__brand{display:flex;flex-direction:column;gap:14px;grid-column:span 2;min-width:0}
.site-footer__brand .brand img{width:22px;height:22px}
.site-footer__brand .brand span{font-size:17px}
.site-footer__brand p{margin:0;font-size:14px;color:var(--fg-2);line-height:1.55;max-width:320px}
.socials{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.socials a{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--border-2);border-radius:var(--radius-s);background:#fff;transition:border-color var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.socials a:hover{border-color:var(--slate-400)}}
.socials img{width:16px;height:16px;opacity:.85}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:14px}
.site-footer__bottom{padding-top:20px;padding-bottom:32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--fg-3);border-top:1px solid var(--border-1)}
@media (max-width:400px){.site-footer__brand{grid-column:auto}}

/* ---------- Dark section ---------- */
.inverse{background:var(--slate-800);color:var(--fg-inverse);position:relative;overflow:hidden}
.inverse a{color:var(--fg-inverse)}

/* ---------- Agent log (home + platform) ---------- */
.log-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid #2C3842}
.log-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
@media (max-width:520px){.log-row{grid-template-columns:40px minmax(0,1fr)}.log-row .log-status{grid-column:2}}

/* ---------- Viewer host ---------- */
cf-viewer,cf-part{display:block}
.viewer-fill{position:absolute;inset:0}

/* ---------- Motion ---------- */
/* ---------- 404 page ---------- */
.notfound{gap:20px;padding-top:120px;padding-bottom:140px;align-items:flex-start}
.notfound__code{font-size:14px;color:var(--accent)}
.notfound .lede{max-width:52ch}
.notfound__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:8px}

/* ---------- Dark theme (opt-in through the header switch; light is the default) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper-0:#18212A; --paper-50:#10161C; --paper-100:#18212A; --paper-200:#26313B; --paper-300:#36434E;
  --bg-page:#10161C; --bg-subtle:#151D24; --bg-raised:#18212A; --bg-inverse:#1C2630;
  --fg-1:#E8ECEE; --fg-2:#B4BDC3; --fg-3:#95A0A8; --fg-inverse:#E8ECEE; --fg-inverse-2:#9AA4AB;
  --border-1:#26313B; --border-2:#36434E; --border-inverse:#2E3A44;
  --accent:#7DBFA3; --accent-hover:#9ED0BA; --accent-press:#9ED0BA; --on-accent:#0E1A15;
  --green-50:#16291F; --green-100:#1E3A2D; --amber-50:#2E2512; --amber-100:#3D3116; --red-50:#3A1D1A;
  --shadow-1:0 1px 0 rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 0 rgba(0,0,0,.3),0 4px 12px -2px rgba(0,0,0,.45);
  --shadow-3:0 2px 0 rgba(0,0,0,.25),0 16px 40px -8px rgba(0,0,0,.6);
  --shadow-frame:0 2px 0 rgba(0,0,0,.25),0 24px 60px -16px rgba(0,0,0,.6);
  --shadow-float:0 2px 0 rgba(0,0,0,.25),0 18px 40px -14px rgba(0,0,0,.65);
  --ring-focus:0 0 0 3px rgba(125,191,163,.35);
  --ui-white:#18212A; --ui-tint:#151C23; --ui-paper:#151C23; --ui-mist:#1E2830; --ui-line:#26313B; --ui-line-2:#36434E; --ui-cloud:#2E3943;
  --ui-amber-tint:#2E2512; --ui-amber-tint-2:#3D3116; --ui-green-tint:#16291F; --ui-green-tint-2:#1E3A2D;
  --ui-ink:#E8ECEE; --ui-ink-2:#C9D0D5; --ui-ink-3:#B4BDC3; --ui-ink-4:#95A0A8; --ui-amber-ink:#F2B33D; --ui-amber-ink-2:#F6CB72; --ui-green-ink:#9ED0BA;
}
/* The primary button flips to light on dark; the dark bands become a slightly lighter dark */
:root[data-theme="dark"] .btn--primary{background:#E8ECEE;border-color:#E8ECEE;color:#10161C}
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] .btn--primary:hover{background:#FFFFFF;border-color:#FFFFFF;color:#10161C}}
:root[data-theme="dark"] .announce{background:var(--bg-inverse);border-bottom:1px solid var(--border-1)}
:root[data-theme="dark"] .inverse{background:var(--bg-inverse)}
:root[data-theme="dark"] .demo__mode.is-on{background:#E8ECEE;color:#10161C}
:root[data-theme="dark"] .site-header{background:rgba(16,22,28,.85)}
:root[data-theme="dark"] .demo__cam{background:rgba(24,33,42,.92)}
:root[data-theme="dark"] .int-ring{background:rgba(16,22,28,.8)}
/* Text that uses the dark end of the slate scale directly */
:root[data-theme="dark"] :is(.chip,.site-nav a,.menu-btn,.mobile-menu a:not(.btn),.int-node,.cad-opts button){color:var(--fg-1)}
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] .site-nav a:hover{color:var(--fg-1)}}
:root[data-theme="dark"] :is(.tag,.demo__tablabel,.presence>span,.sw,.tblock){color:var(--fg-2)}
:root[data-theme="dark"] :is(.tblock,.tblock>div){border-color:var(--border-2)}
/* Surfaces that are white or off-white in the light theme */
:root[data-theme="dark"] :is(.float-card,.chip,.tag,.socials a,.demo-frame,.demo__tab.is-on,.demo__modes,.demo__input,.presence,.bubble__card,
  .rail__item.is-on,.stage,.proc span.is-on,.int-node.is-on,.int-ring__inner,.seg button[aria-selected=true],.use,.ind,.beta-card,.cad-opts button,
  .seg--s button[aria-checked=true]){background:var(--bg-raised)}
@media (hover:hover) and (pointer:fine){:root[data-theme="dark"] :is(.demo__tab:hover,.rail__item:hover){background:var(--bg-raised)}}
:root[data-theme="dark"] :is(.demo__tab,.rail__item,.int-node){background:var(--bg-subtle)}
:root[data-theme="dark"] .avatars .avatar{border-color:var(--bg-raised)}
/* Line icons are drawn dark; the agent icons on the dark band are already inverted */
:root[data-theme="dark"] img[src*="/assets/icons/"]:not(.agent__icon img){filter:invert(1) brightness(.92)}
/* The logo has a light and a dark version; show the one that fits the theme */
.logo-on-dark{display:none}
:root[data-theme="dark"] .logo-on-light{display:none}
:root[data-theme="dark"] .logo-on-dark{display:inline}
/* A light button that stays light in both themes, for use on the dark band */
.btn--light{background:#F7F7F4;color:#1A232B;border:1px solid #F7F7F4}
@media (hover:hover) and (pointer:fine){.btn--light:hover{background:#FFFFFF;border-color:#FFFFFF;color:#1A232B}}
/* Theme switch in the header: shows a moon in light, a sun in dark */
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;margin-left:auto;margin-right:10px;border-radius:var(--radius-s);border:1px solid var(--border-2);background:transparent;color:var(--fg-1);cursor:pointer;flex:none}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun,:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
@media (hover:hover) and (pointer:fine){.theme-toggle:hover{border-color:var(--fg-3)}}

/* ---------- Touch screens ---------- */
html{-webkit-tap-highlight-color:transparent}
:is(.btn,.text-link,.menu-btn,.theme-toggle,.cad-opts button,.demo__tab,.demo__mode,.int-node,.use,.rail__item,.socials a):active{transform:scale(.97)}
.hint-touch{display:none}
@media (pointer:coarse){
  .hint-fine{display:none}
  .hint-touch{display:inline}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition-duration:1ms !important;animation-duration:1ms !important}
}

/* =========================================================
   Home
   ========================================================= */
.home-hero{padding-top:88px;padding-bottom:48px}
.home-hero__inner{display:flex;flex-direction:column;align-items:flex-start;gap:28px;max-width:1000px}
.home-hero__title{margin:0;font-size:clamp(42px,6vw,76px);line-height:1.05;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.drift{padding:22px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.drift__v{font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.035em}
.drift__src{font-family:var(--font-mono);font-size:11px;color:var(--fg-2);line-height:1.5}
.step{padding:28px;display:flex;flex-direction:column;gap:14px;min-height:260px}
.step h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em}
.step p{margin:0;font-size:15px;line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.int-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--border-1);align-items:start}
.int-row .label{padding-top:8px}
.int-chips{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:420px){.int-row{grid-template-columns:1fr;gap:8px}.int-row .label{padding-top:0}}

/* ---------- Demo frame ---------- */
.demo-frame{background:#fff;border:1px solid var(--border-1);border-radius:var(--radius-l);box-shadow:var(--shadow-frame);overflow:hidden;min-height:400px}
.demo-fallback{padding:24px;display:flex;flex-direction:column;gap:10px;color:var(--fg-2);font-size:14px}
.demo-fallback p{margin:0}
.demo__bar{min-height:48px;border-bottom:1px solid var(--border-1);display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--paper-50);flex-wrap:wrap}
.demo__agent{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.demo__tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--border-1);border-bottom:1px solid var(--border-1)}
.demo__tab{cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:#FBFBF9;border:0;text-align:left;font:inherit;color:inherit;box-shadow:inset 0 -2px 0 transparent;transition:background var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.demo__tab:hover{background:#fff}}
.demo__tab.is-on{background:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
/* Guided tour: the underline fills as the active tab plays and rests, then the tour moves on */
.demo__tab{position:relative}
.demo__tab.is-touring{box-shadow:inset 0 -2px 0 var(--green-100)}
.demo__tabbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform-origin:left;transition-property:transform;transition-timing-function:linear;pointer-events:none}
.demo__tabnum{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.demo__tab.is-on .demo__tabnum{color:var(--accent)}
.demo__tablabel{font-size:15px;font-weight:500;color:var(--slate-700)}
.demo__tab.is-on .demo__tablabel{color:var(--fg-1)}
.demo__tabbody{font-size:13px;line-height:1.45;color:var(--fg-2);text-wrap:pretty}
.demo__body{display:flex;flex-wrap:wrap}
.demo__stage{flex:1.55 1 500px;position:relative;min-height:560px;overflow:hidden}
.demo__modes{position:absolute;left:14px;bottom:14px;display:flex;gap:2px;background:#fff;border:1px solid var(--border-1);border-radius:4px;padding:3px;flex-wrap:wrap}
.demo__mode{cursor:pointer;font-family:var(--font-sans);font-size:11px;padding:6px 9px;border-radius:3px;border:0;background:transparent;color:var(--fg-2)}
@media (hover:hover) and (pointer:fine){.demo__mode:hover{color:var(--fg-1)}}
.demo__mode.is-on{background:var(--slate-800);color:var(--fg-inverse)}
.demo__cam{position:absolute;right:14px;bottom:14px;font-family:var(--font-mono);font-size:11px;color:var(--fg-2);background:rgba(255,255,255,.92);border:1px solid var(--border-1);border-radius:3px;padding:6px 9px;pointer-events:none}
.demo__panel{flex:1 1 380px;border-left:1px solid var(--border-1);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0;min-height:560px}
.demo__pane{display:flex;flex-direction:column;gap:14px;flex:1}
.demo__head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.demo__foot{margin-top:auto;border-top:1px solid var(--border-1);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.demo__req{cursor:pointer;display:flex;align-items:center;gap:10px;padding:9px 0;border:0;border-top:1px solid var(--paper-100);background:transparent;font:inherit;font-size:13px;color:inherit;width:100%}
@media (hover:hover) and (pointer:fine){.demo__req:hover{color:var(--accent)}}
.demo__dot{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 11px var(--font-sans)}
.demo__dot--s{width:18px;height:18px;font-size:10px}
.demo__prog{height:3px;border-radius:2px;background:var(--border-1);overflow:hidden;margin-top:3px}
.demo__prog>div{height:100%;background:var(--accent)}
.demo__mx{display:grid;gap:8px;align-items:center;padding:10px 8px;border-radius:3px;font-size:13px}
.demo__mx.is-link{cursor:pointer}
@media (hover:hover) and (pointer:fine){.demo__mx:hover{background:var(--paper-50)}}
.demo__thread{cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:3px;border:1px solid;font:inherit;font-size:13px;font-weight:500;color:var(--fg-1)}
.demo__input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:var(--radius-s);border:1px solid var(--border-2);background:#fff;font:14px var(--font-sans);color:var(--fg-1)}
.toast{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-m);background:var(--slate-900);color:var(--fg-inverse);font-size:13px;box-shadow:var(--shadow-3);align-self:flex-start}
.toast i{width:8px;height:8px;border-radius:50%;background:var(--green-300);flex:none}
@media (max-width:899px){.demo__panel{border-left:0;border-top:1px solid var(--border-1);min-height:0}}
@media (max-width:600px){.demo__cam{display:none}.demo__stage{flex-basis:100%;min-height:420px}.demo__panel{flex-basis:100%}}

/* =========================================================
   Platform
   ========================================================= */
.border-bottom{border-bottom:1px solid var(--border-1)}
.p-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-1)}
.p-hero__grid{padding-top:80px;padding-bottom:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:48px;align-items:center}
.p-hero__stage{position:relative;height:520px;border:1px solid var(--border-1);border-radius:var(--radius-l);overflow:hidden}
.presence{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border-1);border-radius:999px;padding:5px 12px 5px 6px;box-shadow:var(--shadow-2);pointer-events:none;z-index:2}
.presence>span{margin-left:6px;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--slate-700)}
.p-hero__badge{position:absolute;right:16px;bottom:16px;left:16px;display:flex;justify-content:flex-end;pointer-events:none}
.p-hero__badge>span{display:inline-flex;align-items:center;gap:10px;background:var(--slate-800);color:var(--fg-inverse);border-radius:999px;padding:8px 14px 8px 10px;font-size:13px}
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubble{position:absolute;left:0;top:0;width:232px;opacity:0;transition:opacity .25s var(--ease-out);will-change:transform}
.bubble__card{background:#fff;border:1px solid var(--border-1);border-radius:4px;box-shadow:0 2px 0 rgba(26,35,43,.03),0 14px 32px -12px rgba(26,35,43,.25);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.bubble__head{display:flex;align-items:center;gap:8px}
.bubble__av{width:22px;height:22px;font-size:11px}
.bubble__who{font-size:12px;font-weight:500;white-space:nowrap}
.bubble__org{font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble__pin{margin-left:auto;width:18px;height:18px;border-radius:50%;background:var(--amber-500);color:var(--slate-900);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.bubble__text{font-size:12.5px;line-height:1.45}

.rail{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:4px;overflow:hidden}
.rail__item{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:#FBFBF9;box-shadow:inset 0 -2px 0 transparent;transition:background .15s;color:var(--fg-1)}
@media (hover:hover) and (pointer:fine){.rail__item:hover{background:#fff;color:var(--fg-1)}}
.rail__item.is-on{background:#fff;box-shadow:inset 0 -2px 0 var(--accent)}
.rail__n{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.rail__item.is-on .rail__n{color:var(--accent)}
.rail__l{font-size:14px;font-weight:500;line-height:1.3}

.tour{padding-top:24px;padding-bottom:64px;display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:start}
.stage{position:relative;height:560px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-1);border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-frame)}
.stage__bar{height:46px;flex:none;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--border-1);background:var(--paper-50)}
.stage__label{font-size:12px;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage__dots{margin-left:auto;display:flex;gap:4px;flex:none}
.stage__dot{cursor:pointer;width:18px;height:4px;border-radius:2px;border:0;padding:0;background:var(--border-1);transition:background .2s}
.stage__dot.is-past{background:var(--slate-400)}
.stage__dot.is-on{background:var(--accent)}
.stage__view{position:relative;flex:1;min-height:0}
.stage__card{position:absolute;left:16px;bottom:16px;width:min(360px,calc(100% - 32px))}
.chapter{scroll-margin-top:88px;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:40px 0}
.chapter :is(h2,p,.chapter__n){transition:color .2s var(--ease-out)}
.chapter__n{font-size:56px;font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--accent)}
.chapter h2{margin:0;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.02em;font-weight:600;text-wrap:balance}
.chapter p{margin:0;font-size:16px;line-height:1.65;color:var(--fg-2);text-wrap:pretty;max-width:60ch}
@media (min-width:1000px){
  .tour{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .stage{position:sticky;top:88px;height:min(680px,calc(100vh - 112px))}
  .chapter{min-height:80vh}
  .chapter:not(.is-on) :is(h2,p,.chapter__n,.btn){color:var(--fg-3)}
}
@media (max-width:520px){.stage__card{left:8px;bottom:8px;width:calc(100% - 16px)}.stage{height:600px}}

.hl{background:var(--amber-50);color:var(--fg-1);padding:0 3px;border-radius:2px}
.tblock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--slate-800);font-family:var(--font-mono);font-size:11px;color:var(--slate-700)}
.tblock>div{padding:6px;border-right:1px solid var(--slate-800);border-bottom:1px solid var(--slate-800)}
.tblock>div:nth-child(3n){border-right:0}
.tblock>div:nth-child(n+4){border-bottom:0}
.tblock b{font-weight:400;color:var(--fg-1);font-size:11px}
.tblock__miss{background:var(--amber-50);box-shadow:inset 0 0 0 1.5px var(--amber-500)}
.tblock__miss b{color:var(--amber-700)}
.proc{display:flex;gap:2px;padding:2px;background:var(--paper-100);border-radius:3px;flex-wrap:wrap}
.proc span{font-size:11px;padding:4px 7px;color:var(--fg-2)}
.proc span.is-on{border-radius:4px;background:#fff;color:var(--fg-1);font-weight:500}
.mini-drift{padding:10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.mini-drift b{font-size:20px;font-weight:500;letter-spacing:-.02em}
.mini-drift>span:last-child{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.sw{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--slate-700)}
.sw>span{width:26px;height:15px;border-radius:999px;background:var(--paper-300);position:relative;flex:none}
.sw>span::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.sw.is-on>span{background:var(--accent)}
.sw.is-on>span::after{left:13px}
.who{display:inline-flex;align-items:center;gap:8px}
.who .avatar{width:22px;height:22px;font-size:11px}

.agent{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--slate-700)}
/* Platform agents: heading above, then the agent list and the activity card as two equal-height columns.
   The four agent rows share the left column evenly; the card's footer sits at its bottom, so both sides
   start on the same line and end on the same line. */
.agents-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:stretch}
.agents-list{display:flex;flex-direction:column;border-top:1px solid var(--slate-700)}
.agents-list .agent{flex:1;align-content:center}
.agents-grid .feed{display:flex;flex-direction:column}
.agents-grid .feed>.stack{flex:1}
.agent .stack{max-width:60ch}
.agent__icon{width:36px;height:36px;border-radius:4px;border:1px solid var(--slate-700);display:grid;place-items:center}
.agent__icon img{width:18px;height:18px;filter:invert(1);opacity:.85}
.feed{background:#1F2A33;border:1px solid var(--slate-700);border-radius:var(--radius-l);overflow:hidden}
.feed-row{display:grid;grid-template-columns:44px 12px minmax(0,1fr);gap:10px;padding:14px 18px;border-bottom:1px solid #2C3943;align-items:start}

.int-map{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px;align-items:center;padding:40px;border:1px solid var(--border-1);border-radius:var(--radius-l)}
.int-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.int-col .label{margin-bottom:4px}
.int-col--left{align-items:flex-end}
.int-item{display:flex;align-items:center}
.int-node{cursor:pointer;font-family:var(--font-sans);font-size:12px;padding:8px 12px;border:1px solid var(--border-2);border-radius:3px;background:#FBFBF9;color:var(--slate-800);transition:border-color .15s,box-shadow .15s}
.int-node.is-on{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(47,143,107,.18)}
.int-hub{display:flex;flex-direction:column;align-items:center;position:relative;z-index:1}
/* Lines from every tool into the Cerforma circle, drawn by platform.js; the selected tool's line is green */
.int-spokes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.int-spokes line{stroke:var(--border-2);stroke-width:1}
.int-spokes line.is-on{stroke:var(--accent);stroke-width:1.5}
/* What goes into Cerforma sits above the circle, what comes back sits below it */
.int-in,.int-out{width:min(100%,300px);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.int-in p,.int-out p{margin:0;font-size:13px;line-height:1.45;color:var(--fg-1)}
.int-in::after,.int-out::before{content:"";width:1px;height:22px;background:var(--accent);margin-top:10px}
.int-out::before{margin:0 0 10px}
.int-ring{width:200px;height:200px;border-radius:50%;border:1px dashed var(--accent);display:grid;place-items:center;background:rgba(255,255,255,.8)}
.int-ring__inner{width:150px;height:150px;border-radius:50%;border:1px solid var(--border-2);display:grid;place-items:center;background:#fff}
.int-logo{width:84px;height:84px;border-radius:4px;background:var(--slate-800);display:grid;place-items:center;box-shadow:0 18px 40px -12px rgba(26,35,43,.4)}
.int-logo img{width:46px;height:46px}
@media (max-width:620px){
  .int-map{padding:24px 16px}
  .int-col--left{align-items:flex-start}
  .int-col--left .int-item{flex-direction:row-reverse}
}
.sec-item{padding:24px;display:flex;flex-direction:column;gap:10px}
.sec-item img{width:20px;height:20px;opacity:.8}

/* =========================================================
   Solutions + About
   ========================================================= */
.seg{display:flex;gap:2px;padding:3px;border-radius:4px;background:var(--paper-100);border:1px solid var(--border-1);align-self:flex-start;flex-wrap:wrap}
.seg button{cursor:pointer;height:34px;padding:0 14px;display:inline-flex;align-items:center;border-radius:3px;border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--fg-2)}
.seg button[aria-selected=true]{background:#fff;color:var(--fg-1);box-shadow:0 1px 2px rgba(26,35,43,.08)}
.team-copy{padding:40px;display:flex;flex-direction:column;gap:16px;min-height:280px}
.team-copy h2{margin:0;font-size:32px;letter-spacing:-.02em;font-weight:600;line-height:1.1}
.team-copy p{margin:0;font-size:17px;line-height:1.6;color:var(--fg-2);text-wrap:pretty}
.team-uses{background:var(--paper-50) !important;padding:40px;display:flex;flex-direction:column;gap:14px}
.use{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--border-1);border-radius:4px;font-size:15px;font-weight:500;color:var(--fg-1);transition:border-color var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.use:hover{border-color:var(--slate-400);color:var(--fg-1)}}
.use span:last-child{color:var(--accent);font-size:13px}
@media (max-width:520px){.team-copy,.team-uses{padding:24px}}
.ind{background:#fff;border:1px solid var(--border-1);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column}
.ind__img{height:190px;position:relative;border-bottom:1px solid var(--border-1)}
.ind__cap{position:absolute;left:12px;bottom:10px;font-family:var(--font-sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);pointer-events:none}
.ind__body{padding:22px;display:grid;gap:8px;font-size:14px;line-height:1.55;color:var(--fg-2)}
.ind__name{font-size:18px;font-weight:500;letter-spacing:-.015em;color:var(--fg-1)}
.proc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--border-1);font-size:15px}
.proc-row span:first-child{font-weight:500}
.proc-row span:last-child{color:var(--fg-2);line-height:1.5}
.belief{padding:24px;display:flex;flex-direction:column;gap:10px}
.belief b{font-size:18px;font-weight:500;letter-spacing:-.015em}
.belief span:last-child{font-size:14px;line-height:1.6;color:var(--fg-2)}

/* =========================================================
   Beta
   ========================================================= */
.beta-grid{padding-bottom:96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:48px;align-items:start}
.beta-group{display:flex;flex-direction:column;gap:4px}
.beta-group .label{margin-bottom:8px}
.beta-item{display:flex;gap:12px;align-items:baseline;font-size:15px;line-height:1.5;padding:12px 0;border-top:1px solid var(--border-1)}
.beta-item .diamond{position:relative;top:-2px}
.beta-card{position:sticky;top:88px;background:#fff;border:1px solid var(--border-1);border-radius:var(--radius-l);box-shadow:var(--shadow-2);padding:28px}
@media (max-width:520px){.beta-card{padding:20px;position:static}}
/* Shown only after a no-JavaScript form post redirects back with #signup-thanks or #signup-error */
.signup-note{display:none;margin:0 0 16px;padding:12px 14px;border-left:3px solid var(--accent);background:var(--green-50);font-size:15px;line-height:1.5}
.signup-note--err{border-left-color:var(--red-500);background:var(--red-50)}
.signup-note:target{display:block}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.field{display:grid;gap:6px;font-family:var(--font-sans);min-width:0}
.field>span,.field legend{font-size:13px;font-weight:500;color:var(--fg-1)}
.field input,.field select,.field textarea{height:40px;padding:0 12px;border-radius:var(--radius-s);border:1px solid var(--border-2);background:var(--bg-raised);font:14px var(--font-sans);color:var(--fg-1);width:100%}
.field textarea{height:auto;padding:10px 12px;line-height:1.5;resize:vertical}
/* iOS zooms into any field under 16px when it is focused */
@media (pointer:coarse){.field input,.field select,.field textarea{font-size:16px}}
.field select{padding-right:40px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355626C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.field .is-invalid,.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:var(--red-500)}
.field__err{font-style:normal;font-size:12px;color:var(--red-700)}
.field--set{border:0;padding:0;margin:0;gap:8px}
.field--set legend{padding:0;margin-bottom:8px}
.cad-opts{display:flex;flex-wrap:wrap;gap:6px}
.cad-opts button{cursor:pointer;font:inherit;font-size:13px;height:32px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;border-radius:3px;border:1px solid var(--border-2);background:#fff;color:var(--slate-800);transition:border-color .15s,background .15s}
.cad-opts button[aria-pressed=true]{border-color:var(--accent);background:var(--green-50);color:var(--green-700)}
.cad-opts button[aria-pressed=true]::before{content:"✓"}
.cad-opts.is-invalid button{border-color:var(--red-500)}
.sup-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.seg--s{padding:3px;border-radius:4px;gap:2px;align-self:auto}
.seg--s button{height:28px;font-size:13px}
.seg--s button[aria-checked=true]{background:#fff;color:var(--fg-1);box-shadow:0 1px 2px rgba(26,35,43,.08)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-err{font-size:13px;color:var(--red-700)}
.faq details{border-top:1px solid var(--border-1);padding:18px 0}
.faq summary{display:flex;justify-content:space-between;gap:16px;font-size:16px;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq__sign{color:var(--fg-3);font-family:var(--font-mono)}
.faq__sign::after{content:"+"}
.faq details[open] .faq__sign::after{content:"−"}
.faq p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--fg-2);max-width:60ch}

/* Narrow screens: tab strips scroll sideways instead of wrapping into uneven rows */
@media (max-width:759px){
  .demo__tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .demo__tab{flex:0 0 min(72%,240px);scroll-snap-align:start}
}
@media (max-width:999px){
  .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .rail__item{flex:0 0 150px;scroll-snap-align:start}
}
.demo__tabs::-webkit-scrollbar,.rail::-webkit-scrollbar{display:none}