/* ---------- tokens ---------- */
  :root{
    --bg:#F5F0E3;
    --surface:#FCFAF3;
    --surface-2:#EEE6D2;
    --ink:#171A22;
    --ink-dim:#5B5D66;
    --line:rgba(23,26,34,0.14);
    --accent:#7A5A16;
    --accent-ink:#FFFDF6;
    --cyan:#186A65;
    --shadow: 0 1px 2px rgba(23,20,10,0.05), 0 12px 32px -16px rgba(23,20,10,0.18);
    --radius: 3px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0B0D12;
      --surface:#12151E;
      --surface-2:#1A1E29;
      --ink:#ECEAE2;
      --ink-dim:#A6ABB9;
      --line:rgba(236,234,226,0.13);
      --accent:#D3A94C;
      --accent-ink:#1A1305;
      --cyan:#59CFC9;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 24px 48px -24px rgba(0,0,0,0.65);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B0D12;
    --surface:#12151E;
    --surface-2:#1A1E29;
    --ink:#ECEAE2;
    --ink-dim:#A6ABB9;
    --line:rgba(236,234,226,0.13);
    --accent:#D3A94C;
    --accent-ink:#1A1305;
    --cyan:#59CFC9;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 24px 48px -24px rgba(0,0,0,0.65);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *:not(.reveal):not(.stagger > *){animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;} }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,h4{
    font-family:"Fraunces", Georgia, "Times New Roman", serif;
    font-weight:600;
    line-height:1.08;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0;
  }

  .mono{
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  a{ color:inherit; }

  .eyebrow{
    font-family:"IBM Plex Mono", monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:500;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  img,svg{ max-width:100%; display:block; }

  ::selection{ background:var(--accent); color:var(--accent-ink); }

  /* ---------- nav ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:blur(10px) saturate(140%);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, background .25s ease;
  }
  header.site-nav.scrolled{ border-bottom-color:var(--line); }
  .nav-inner{
    max-width:1180px; margin:0 auto; padding:0 32px;
    height:72px; display:flex; align-items:center; justify-content:space-between;
    gap:24px;
  }
  .wordmark{
    display:flex; align-items:baseline; gap:2px;
    font-family:"Fraunces", serif; font-weight:600; font-size:22px;
    text-decoration:none; color:var(--ink);
    white-space:nowrap;
  }
  .wordmark .dot{ color:var(--accent); font-family:"IBM Plex Mono", monospace; font-size:15px; font-weight:500; }

  nav.links{ display:flex; align-items:center; gap:30px; }
  nav.links a{
    text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-dim);
    transition:color .15s ease; position:relative;
  }
  nav.links a:not(.btn):hover{ color:var(--ink); }
  nav.links a:not(.btn)::after{
    content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px; background:var(--accent);
    transition:right .2s ease;
  }
  nav.links a:not(.btn):hover::after{ right:0; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:"Public Sans", sans-serif; font-weight:600; font-size:14.5px;
    padding:11px 20px; border-radius:var(--radius);
    text-decoration:none; cursor:pointer; border:1px solid transparent;
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .btn-primary{ background:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
  .btn-line{ background:transparent; color:var(--ink); border-color:var(--ink); padding:9px 18px; }
  .btn-line:hover{ background:var(--ink); color:var(--bg); }

  .nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.2s ease;
  }
  .nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; }
  .nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

  /* ---------- hero ---------- */
  .hero{
    position:relative; overflow:hidden;
    background:var(--ink); color:var(--bg);
    isolation:isolate;
  }
  :root[data-theme="light"] .hero, :root:not([data-theme]) .hero { background:#14161C; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero{ background:#07080B; } }
  :root[data-theme="dark"] .hero{ background:#07080B; }

  .hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; z-index:0; }
  .hero-inner{
    position:relative; z-index:1;
    max-width:1180px; margin:0 auto; padding:100px 32px 96px;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
  }
  @media (max-width:940px){ .hero-inner{ grid-template-columns:1fr; padding-top:64px; } }
  .hero .eyebrow{ color:#E0B563; }
  .hero h1{
    color:#F6F2E7; font-size:clamp(34px, 4.6vw, 58px); max-width:15ch; margin-top:18px;
  }
  .hero h1 em{ font-style:italic; color:#E0B563; }
  .hero p.lead{
    color:#C7C9D2; font-size:18px; max-width:46ch; margin-top:22px; line-height:1.65;
  }
  .hero .cta-row{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
  .hero .btn-ghost{ border-color:rgba(246,242,231,0.25); color:#F6F2E7; }
  .hero .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
  .hero .trial-note{ display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:#C7C9D2; }
  .hero .trial-tag{
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
    color:#1A1305; background:#E0B563; border-radius:100px; padding:4px 10px; flex:none;
  }
  @media (max-width:520px){ .hero .trial-note{ align-items:flex-start; } }

  .hero-media{ position:relative; }
  .hero-frame{
    transform:none; box-shadow:0 30px 70px -20px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.3);
    transition:none;
  }
  .hero-frame.frame-browser:hover{ transform:none; box-shadow:0 30px 70px -20px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.3); }
  .hero-frame.frame-browser:hover .frame-body img{ transform:none; }

  /* trust strip */
  .trust-strip{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:var(--surface-2);
  }
  .trust-strip .wrap{
    display:flex; flex-wrap:wrap; gap:14px 40px; padding:20px 32px;
    justify-content:center;
  }
  .trust-item{
    font-family:"IBM Plex Mono", monospace; font-size:12.5px; letter-spacing:.03em;
    color:var(--ink-dim); display:flex; align-items:center; gap:9px;
  }
  .trust-item::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

  /* ---------- generic section scaffolding ---------- */
  section{ padding:104px 0; }
  section.tight{ padding:80px 0; }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .section-head h2{ font-size:clamp(28px, 3.4vw, 40px); margin-top:14px; }
  .section-head p{ color:var(--ink-dim); font-size:17px; margin-top:16px; }

  /* Reveal-on-scroll is progressive enhancement: content is visible by default so it
     never depends on JS running or an observer firing in time. Only once the early
     boot script confirms JS is active does .reveal start hidden and wait for .in. */
  .reveal{ opacity:1; transform:none; filter:none; }
  html.js-boot .reveal{
    opacity:0; transform:translateY(38px) scale(.97); filter:blur(4px);
    transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1), filter .7s ease;
  }
  html.js-boot .reveal.in{ opacity:1; transform:none; filter:none; }
  /* prefers-reduced-motion: keep the scroll-triggered fade (still tied to
     scroll position via the same observer) but drop the slide/scale/blur
     motion entirely, per accessibility guidance. */
  html.reduce-motion.js-boot .reveal{ transform:none; filter:none; transition:opacity .4s ease; }
  html.reduce-motion.js-boot .stagger > *{ transform:none; filter:none; transition:opacity .4s ease; }

  /* scroll-progress bar, pinned under the nav */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
    background:var(--accent); transition:width .1s linear;
  }

  /* floating light/dark toggle, styled as a wall light switch */
  .theme-toggle{
    position:fixed; left:22px; bottom:22px; z-index:70;
    width:52px; height:52px; border-radius:50%;
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .theme-toggle:hover{ transform:translateY(-2px); border-color:var(--accent); }
  .theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .theme-toggle .switch-plate{ fill:none; stroke:var(--ink-dim); stroke-width:1.6; }
  .theme-toggle .switch-toggle{ fill:var(--accent); transition:transform .25s cubic-bezier(.4,0,.2,1); }
  .theme-toggle.is-dark .switch-toggle{ transform:translateY(16px); }
  @media (max-width:640px){ .theme-toggle{ left:16px; bottom:16px; width:46px; height:46px; } }

  /* ---------- chat widget ---------- */
  .chat-widget{ position:fixed; right:22px; bottom:22px; z-index:80; }
  .chat-fab{
    /* Explicit width (not auto) on both the closed and open states below is
       required for the width transition to actually animate — browsers can't
       smoothly interpolate a transition to/from the "auto" keyword, so a
       fixed-to-fixed pixel transition is used instead. 184px comfortably
       covers the "Ask Valorem" label's measured natural width (~177px) with
       a few px of headroom for font-rendering variance across platforms. */
    width:184px; height:64px; padding:0 26px 0 20px; border-radius:100px; border:none; cursor:pointer;
    background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow);
    display:inline-flex; align-items:center; justify-content:center; gap:11px;
    transition:transform .15s ease, box-shadow .15s ease, padding .15s ease, width .15s ease;
  }
  .chat-fab:hover{ transform:translateY(-2px); }
  .chat-fab:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .chat-fab-label{
    font-family:"Public Sans",sans-serif; font-weight:600; font-size:16px; white-space:nowrap;
  }
  .chat-fab-close{ display:none; }
  .chat-widget.open .chat-fab{ width:64px; padding:0; }
  .chat-widget.open .chat-fab-icon{ display:none; }
  .chat-widget.open .chat-fab-label{ display:none; }
  .chat-widget.open .chat-fab-close{ display:block; }

  .chat-panel[hidden]{ display:none; }
  .chat-panel{
    position:fixed; right:22px; bottom:96px; z-index:80;
    width:min(380px, calc(100vw - 44px)); height:min(560px, calc(100vh - 130px));
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 1px 2px rgba(0,0,0,0.15), 0 30px 60px -20px rgba(0,0,0,0.45);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .chat-header{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    padding:18px 18px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); flex:none;
  }
  .chat-title{ margin:0; font-family:"Fraunces",serif; font-weight:600; font-size:16.5px; color:var(--ink); }
  .chat-sub{ margin:4px 0 0; font-size:12.5px; color:var(--ink-dim); }
  .chat-close{
    background:none; border:1px solid var(--line); border-radius:50%; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-dim); flex:none;
    transition:border-color .15s ease, color .15s ease;
  }
  .chat-close:hover{ border-color:var(--accent); color:var(--accent); }

  .chat-messages{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
  .chat-msg{ max-width:86%; font-size:14.5px; line-height:1.55; padding:10px 13px; border-radius:12px; white-space:pre-wrap; }
  .chat-msg.assistant{ align-self:flex-start; background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px; }
  .chat-msg.user{ align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px; }
  .chat-msg.error{ align-self:flex-start; background:transparent; border:1px solid var(--line); color:var(--ink-dim); }
  .chat-msg.typing{ align-self:flex-start; background:var(--surface-2); display:flex; gap:4px; align-items:center; padding:12px 15px; }
  .chat-msg.typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink-dim); display:block; animation:chatTyping 1.1s ease-in-out infinite; }
  .chat-msg.typing span:nth-child(2){ animation-delay:.15s; }
  .chat-msg.typing span:nth-child(3){ animation-delay:.3s; }
  @keyframes chatTyping{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }

  .chat-suggestions{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; flex:none; }
  .chat-widget.chat-started .chat-suggestions{ display:none; }
  .chat-chip{
    font-family:"Public Sans",sans-serif; font-size:12.5px; color:var(--ink);
    background:var(--surface-2); border:1px solid var(--line); border-radius:100px;
    padding:7px 13px; cursor:pointer; transition:border-color .15s ease;
  }
  .chat-chip:hover{ border-color:var(--accent); }

  .chat-input-row{ display:flex; gap:8px; padding:14px 18px; border-top:1px solid var(--line); flex:none; }
  .chat-input-row input{
    flex:1; font-family:"Public Sans",sans-serif; font-size:14.5px; color:var(--ink); background:var(--bg);
    border:1px solid var(--line); border-radius:100px; padding:10px 16px; min-width:0;
  }
  .chat-input-row input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  .chat-send{
    width:38px; height:38px; border-radius:50%; border:none; background:var(--accent); color:var(--accent-ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none;
    transition:transform .15s ease; }
  .chat-send:hover{ transform:translateY(-1px); }
  .chat-send:disabled{ opacity:.5; cursor:default; transform:none; }

  .chat-disclaimer{ margin:0; padding:0 18px 14px; font-size:11px; color:var(--ink-dim); flex:none; }
  .chat-disclaimer a{ color:var(--accent); text-decoration:none; font-weight:600; }

  @media (max-width:640px){
    .chat-widget{ right:16px; bottom:16px; }
    .chat-fab{ width:164px; height:56px; padding:0 20px 0 16px; gap:9px; }
    .chat-fab-label{ font-size:14.5px; }
    .chat-widget.open .chat-fab{ width:56px; padding:0; }
    .chat-panel{ right:16px; bottom:84px; width:calc(100vw - 32px); height:min(70vh, 560px); }
  }

  /* cascading stagger for grid children: the grid itself is plainly visible,
     its children fade in one after another once the grid's .in class lands */
  html.js-boot .stagger > *{ opacity:0; transform:translateY(26px) scale(.97); filter:blur(3px); transition:opacity .6s ease, transform .6s ease, filter .6s ease; }
  html.js-boot .stagger.in > *{ opacity:1; transform:none; filter:none; }
  html.js-boot .stagger.in > *:nth-child(1){ transition-delay:.02s; }
  html.js-boot .stagger.in > *:nth-child(2){ transition-delay:.08s; }
  html.js-boot .stagger.in > *:nth-child(3){ transition-delay:.14s; }
  html.js-boot .stagger.in > *:nth-child(4){ transition-delay:.20s; }
  html.js-boot .stagger.in > *:nth-child(5){ transition-delay:.26s; }
  html.js-boot .stagger.in > *:nth-child(6){ transition-delay:.32s; }

  /* ---------- pillars ---------- */
  .pillars{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  @media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }
  .pillar{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:44px 40px; display:flex; flex-direction:column; gap:18px;
    box-shadow:var(--shadow); transition:border-color .25s ease, box-shadow .25s ease, transform .1s ease-out;
    will-change:transform;
  }
  .pillar:hover{ border-color:var(--accent); }
  .pillar.is-assistant:hover{ border-color:var(--cyan); }
  .pillar .num{ font-family:"IBM Plex Mono",monospace; color:var(--accent); font-size:13px; }
  .pillar.is-assistant .num{ color:var(--cyan); }
  .pillar.is-assistant .foot-link{ color:var(--cyan); }
  .pillar h3{ font-size:27px; }
  .pillar p{ color:var(--ink-dim); }
  .pillar ul{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .pillar li{ display:flex; gap:10px; font-size:15.5px; color:var(--ink); }
  .pillar li::before{ content:"—"; color:var(--accent); flex:none; }
  .pillar .foot-link{ margin-top:auto; padding-top:10px; font-weight:600; font-size:14.5px; text-decoration:none; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
  .pillar .foot-link .arrow{ transition:transform .15s ease; }
  .pillar .foot-link:hover .arrow{ transform:translateX(3px); }

  /* screenshots dropped into the platform/assistant pillar cards, next to the
     copy that actually describes them, instead of sitting in a separate
     image gallery further down the page */
  .pillar-media{ margin-top:2px; }
  .pillar-media-panel{ max-width:190px; margin:2px auto 0; }

  /* ---------- feature grid ---------- */
  .feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
  @media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }
  .feature{ background:var(--surface); padding:32px 28px; transition:background .2s ease, transform .2s ease; position:relative; z-index:0; }
  .feature:hover{ background:var(--surface-2); transform:translateY(-3px); z-index:1; }
  .feature .eyebrow{ font-size:11.5px; }
  .feature h4{ font-size:18px; margin-top:12px; font-family:"Public Sans",sans-serif; font-weight:700; }
  .feature p{ color:var(--ink-dim); font-size:15px; margin-top:10px; }
  .feature-solo{ grid-column:1 / -1; }

  /* a feature paired with its own screenshot, pulled out of the grid above
     into a two-column spotlight since a real screenshot needs more room
     than a grid cell can give it */
  .spotlight{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
    margin-bottom:44px; padding-bottom:44px; border-bottom:1px solid var(--line);
  }
  @media (max-width:860px){ .spotlight{ grid-template-columns:1fr; gap:26px; } }
  .spotlight-copy .eyebrow{ font-size:11.5px; }
  .spotlight-copy h3{ font-size:24px; margin-top:12px; font-family:"Public Sans",sans-serif; font-weight:700; }
  .spotlight-copy p{ color:var(--ink-dim); font-size:16px; margin-top:12px; }
  .spotlight-media{ max-width:480px; width:100%; margin:0 auto; }

  /* ---------- showcase ---------- */
  .showcase{ background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .frame{ margin:0; }
  .frame-browser{
    border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface);
    box-shadow:var(--shadow);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .frame-browser:hover{ transform:translateY(-5px); box-shadow:0 1px 2px rgba(23,20,10,0.08), 0 28px 44px -20px rgba(23,20,10,0.32); }
  :root:not([data-theme="light"]) .frame-browser:hover{ box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 28px 44px -20px rgba(0,0,0,0.75); }
  .frame-bar{
    display:flex; align-items:center; gap:7px; padding:11px 14px;
    background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  .frame-bar span:not(.frame-url){ width:9px; height:9px; border-radius:50%; background:var(--line); display:block; flex:none; }
  .frame-url{
    margin-left:10px; font-size:12px; color:var(--ink-dim); background:var(--surface);
    border:1px solid var(--line); border-radius:100px; padding:3px 12px; flex:1;
  }
  .frame-body{ overflow:hidden; background:var(--surface); }
  .frame-body img{ width:100%; height:auto; display:block; transition:transform .5s ease; }
  .frame-browser:hover .frame-body img{ transform:scale(1.035); }
  .frame figcaption{ text-align:center; padding:16px 8px 0; font-size:13.5px; color:var(--ink-dim); }
  .frame-panel{
    border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface);
    box-shadow:var(--shadow); max-width:260px; margin:0 auto;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .frame-panel:hover{ transform:translateY(-5px) scale(1.01); }
  .frame-panel .frame-body img{ transition:transform .5s ease; }
  .frame-panel:hover .frame-body img{ transform:scale(1.03); }

  /* live-demo CTA: a clickable "browser window" instead of a static
     screenshot, since the whole point is to send the visitor to the real
     site rather than a picture of it */
  .showcase-cta{ display:block; max-width:640px; margin:8px auto 0; text-decoration:none; cursor:pointer; }
  .showcase-cta-body{
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:64px 24px; background:linear-gradient(180deg, var(--surface), var(--surface-2));
  }
  .showcase-cta-text{ font-family:"Fraunces",serif; font-weight:600; font-size:clamp(20px,2.6vw,26px); color:var(--ink); }
  .showcase-cta-arrow{ font-size:22px; color:var(--accent); transition:transform .15s ease; display:inline-block; }
  .showcase-cta:hover .showcase-cta-arrow{ transform:translate(3px,-3px); }
  .showcase-note{ text-align:center; color:var(--ink-dim); font-size:13.5px; margin-top:24px; }

  /* ---------- compliance ---------- */
  .compliance{ background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .cite-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px; }
  @media (max-width:760px){ .cite-grid{ grid-template-columns:1fr; } }
  .cite{ background:var(--surface); padding:26px 28px; display:flex; gap:18px; align-items:flex-start; transition:background .2s ease; }
  .cite:hover{ background:var(--surface-2); }
  .cite .code{ font-family:"IBM Plex Mono", monospace; font-size:13.5px; color:var(--accent); flex:none; padding-top:2px; white-space:nowrap; }
  .cite .desc h5{ font-family:"Public Sans",sans-serif; font-weight:700; font-size:15.5px; margin:0 0 5px; }
  .cite .desc p{ margin:0; color:var(--ink-dim); font-size:14.5px; }
  .compliance-note{ margin-top:36px; padding:20px 24px; border-left:3px solid var(--accent); background:var(--surface); font-size:14.5px; color:var(--ink-dim); }
  .compliance-note strong{ color:var(--ink); }

  /* ---------- security ---------- */
  .sec-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:8px; }
  @media (max-width:860px){ .sec-cols{ grid-template-columns:1fr; } }
  .sec-col h4{ font-size:18.5px; font-family:"Public Sans",sans-serif; font-weight:700; display:flex; align-items:center; gap:10px; }
  .sec-col .idx{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); border:1px solid var(--line); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex:none; }
  .sec-col ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .sec-col li{ font-size:14.5px; color:var(--ink-dim); padding-left:16px; position:relative; }
  .sec-col li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--accent); }
  .sec-col li strong{ color:var(--ink); font-weight:600; }

  .badge-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-top:56px; }
  .badge{
    font-family:"IBM Plex Mono", monospace; font-size:12.5px; color:var(--ink);
    border:1px solid var(--line); border-radius:100px; padding:8px 16px;
    background:var(--surface); transition:border-color .15s ease, transform .15s ease;
  }
  .badge:hover{ border-color:var(--accent); transform:translateY(-2px); }

  /* ---------- audience ---------- */
  .audience-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  @media (max-width:860px){ .audience-grid{ grid-template-columns:1fr; gap:28px; } }
  .audience-copy ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
  .audience-copy li{ font-size:15.5px; color:var(--ink-dim); padding-left:26px; position:relative; }
  .audience-copy li::before{ content:"→"; position:absolute; left:0; color:var(--accent); }
  .audience-photo{
    margin:0; border-radius:16px; overflow:hidden;
    box-shadow:0 1px 2px rgba(23,20,10,0.08), 0 28px 44px -20px rgba(23,20,10,0.32);
  }
  :root:not([data-theme="light"]) .audience-photo{ box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 28px 44px -20px rgba(0,0,0,0.75); }
  .audience-photo img{ width:100%; height:auto; display:block; }

  /* ---------- steps ---------- */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
  .step{ background:var(--surface); padding:38px 32px; position:relative; transition:background .2s ease; }
  .step:hover{ background:var(--surface-2); }
  .step .step-num{ font-family:"Fraunces",serif; font-size:44px; color:var(--accent); font-weight:500; line-height:1; }
  .step h4{ margin-top:18px; font-size:19px; }
  .step p{ margin-top:10px; color:var(--ink-dim); font-size:15px; }

  /* ---------- site importer ---------- */
  /* two-column layout: steps + proof stats on the left, the laptop photo on
     the right — same pairing pattern as .spotlight above, sized wider since
     this photo is landscape rather than a portrait app screenshot. */
  .import-layout{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; margin-top:8px; }
  @media (max-width:860px){ .import-layout{ grid-template-columns:1fr; gap:28px; } }
  .import-content{ display:flex; flex-direction:column; gap:28px; }
  .import-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; counter-reset:import-step; }
  .import-steps li{ position:relative; padding-left:40px; font-size:15.5px; color:var(--ink-dim); counter-increment:import-step; }
  .import-steps li::before{
    content:counter(import-step); position:absolute; left:0; top:-2px;
    width:27px; height:27px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line);
    color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:12.5px; font-weight:600;
    display:flex; align-items:center; justify-content:center;
  }
  .import-steps li strong{ color:var(--ink); }
  .import-photo{
    margin:0; border-radius:16px; overflow:hidden;
    box-shadow:0 1px 2px rgba(23,20,10,0.08), 0 28px 44px -20px rgba(23,20,10,0.32);
  }
  :root:not([data-theme="light"]) .import-photo{ box-shadow:0 1px 2px rgba(0,0,0,0.4), 0 28px 44px -20px rgba(0,0,0,0.75); }
  .import-photo img{ width:100%; height:auto; display:block; }

  /* ---------- faq ---------- */
  .faq-list{ max-width:800px; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
  .faq-item{ background:var(--surface); }
  .faq-item summary{
    list-style:none; cursor:pointer; padding:22px 48px 22px 24px; position:relative;
    font-family:"Public Sans",sans-serif; font-weight:600; font-size:16px; color:var(--ink);
    transition:background .15s ease;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover{ background:var(--surface-2); }
  .faq-item summary::after{
    content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
    font-family:"Fraunces",serif; font-size:22px; color:var(--accent); transition:transform .25s ease;
  }
  .faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
  .faq-item p{ margin:0; padding:0 24px 24px; color:var(--ink-dim); font-size:15px; max-width:68ch; }
  .faq-item[open] summary{ background:var(--surface-2); }

  /* ---------- cta band ---------- */
  .cta-band{
    background:var(--ink); color:var(--bg);
  }
  :root[data-theme="light"] .cta-band, :root:not([data-theme]) .cta-band{ background:#171A22; color:#F5F0E3; }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cta-band{ background:#0F1219; color:#ECEAE2; } }
  :root[data-theme="dark"] .cta-band{ background:#0F1219; color:#ECEAE2; }
  .cta-band .wrap{ padding:88px 32px; }
  .cta-band h2{ color:inherit; font-size:clamp(26px,3.4vw,36px); max-width:18ch; }
  .cta-band p{ color:#A6ABB9; margin-top:14px; font-size:16px; }
  .cta-band .btn-ghost{ border-color:rgba(236,234,226,.25); color:inherit; }
  .cta-band .btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:48px; } }
  .contact-points{ list-style:none; margin:26px 0 30px; padding:0; display:flex; flex-direction:column; gap:11px; }
  .contact-points li{ font-size:14.5px; color:#C7C9D2; padding-left:18px; position:relative; }
  .contact-points li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; background:var(--accent); }

  .contact-form{
    background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:8px;
    padding:32px; display:flex; flex-direction:column; gap:16px; box-shadow:var(--shadow);
  }
  .contact-form .form-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:480px){ .contact-form .form-row.two{ grid-template-columns:1fr; } }
  .contact-form label{
    display:flex; flex-direction:column; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink);
  }
  .contact-form .req{ color:var(--accent); font-weight:400; }
  .contact-form input, .contact-form textarea{
    font-family:"Public Sans", sans-serif; font-size:15px; color:var(--ink); background:var(--bg);
    border:1px solid var(--line); border-radius:3px; padding:10px 12px; font-weight:400;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .contact-form input:focus, .contact-form textarea:focus{
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .contact-form textarea{ resize:vertical; min-height:64px; font-family:inherit; }
  .hp-field{ position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; left:-9999px; }
  .btn-block{ width:100%; }
  .form-note{ margin:0; font-size:13px; color:var(--ink-dim); text-align:center; }
  .form-note a{ color:var(--accent); text-decoration:none; font-weight:600; }
  .form-thanks{
    margin:0; font-size:14px; text-align:center; color:var(--accent); font-weight:600;
    background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:3px; padding:10px;
  }

  /* ---------- footer ---------- */
  footer{ padding:72px 0 36px; }
  .foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; border-bottom:1px solid var(--line); }
  @media (max-width:760px){ .foot-top{ grid-template-columns:1fr 1fr; } }
  @media (max-width:480px){ .foot-top{ grid-template-columns:1fr; } }
  .foot-brand p{ color:var(--ink-dim); font-size:14.5px; max-width:30ch; margin-top:14px; }
  .foot-brand p a, .foot-bottom p a{ color:var(--accent); text-decoration:none; font-weight:600; }
  .foot-brand p a:hover, .foot-bottom p a:hover{ text-decoration:underline; }
  .foot-col h5{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:16px; }
  .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .foot-col a{ text-decoration:none; color:var(--ink); font-size:14.5px; }
  .foot-col a:hover{ color:var(--accent); }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; flex-wrap:wrap; gap:14px; }
  .foot-bottom p{ font-size:13px; color:var(--ink-dim); margin:0; }
  .theme-note{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-dim); }

  @media (max-width:760px){
    nav.links{ display:none; position:absolute; top:72px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; padding:20px 32px 28px; gap:18px; }
    nav.links.open{ display:flex; }
    .nav-toggle{ display:flex; }
    nav.links .btn{ width:100%; }
  }

/* ================= sub-page additions ================= */
.page-head{ padding:72px 0 44px; border-bottom:1px solid var(--line); }
.page-head .wrap{ max-width:880px; }
.page-head h1{ font-size:clamp(34px,5vw,52px); margin:14px 0 18px; }
.page-head .lede{ font-size:19px; color:var(--ink-dim); margin:0; max-width:66ch; }
.crumb{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); }
.crumb a{ color:var(--accent); text-decoration:none; }
.crumb a:hover{ text-decoration:underline; }
.crumb span{ opacity:.5; margin:0 6px; }

.prose{ max-width:880px; margin:0 auto; padding:40px 32px 24px; }
.prose h2{ font-size:clamp(24px,3vw,32px); margin:48px 0 16px; scroll-margin-top:88px; }
.prose h3{ font-size:20px; margin:32px 0 10px; scroll-margin-top:88px; }
.prose p{ margin:0 0 18px; }
.prose ul,.prose ol{ margin:0 0 18px; padding-left:22px; }
.prose li{ margin:0 0 9px; }
.prose > ul > li::marker{ color:var(--accent); }
.prose a{ color:var(--accent); text-underline-offset:3px; }
.prose strong{ font-weight:600; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:44px 0; }

.statute{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:22px 24px; margin:26px 0;
}
.statute .label{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.statute blockquote{ margin:0; font-size:16.5px; line-height:1.62; }
.statute cite{ display:block; margin-top:12px; font-style:normal; font-size:13.5px; color:var(--ink-dim); }

.callout{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin:26px 0; }
.callout p:last-child{ margin-bottom:0; }
.callout .label{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin:0 0 8px; font-weight:500; }

.factrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:28px 0; }
.factrow div{ background:var(--surface); padding:18px 20px; }
.factrow dt{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 7px; }
.factrow dd{ margin:0; font-weight:600; font-size:16px; line-height:1.35; }

table.tbl{ width:100%; border-collapse:collapse; margin:26px 0; font-size:15.5px; }
table.tbl th,table.tbl td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.tbl th{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); font-weight:500; }
table.tbl tr:last-child td{ border-bottom:0; }
.tbl-scroll{ overflow-x:auto; }

.cardgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin:30px 0; }
.cardlink{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cardlink:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.cardlink h3{ margin:0 0 8px; font-size:18px; }
.cardlink p{ margin:0; font-size:15px; color:var(--ink-dim); line-height:1.55; }
.cardlink .sect{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--accent); display:block; margin-bottom:6px; }

.pagenav{ border-top:1px solid var(--line); margin-top:56px; padding:34px 0 72px; }
.pagenav .wrap{ max-width:880px; }
.pagenav h4{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); font-weight:500; margin:0 0 14px; }
.pagenav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; }
.pagenav a{ color:var(--accent); text-decoration:none; font-size:15px; }
.pagenav a:hover{ text-decoration:underline; }

.endcta{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:52px 0; margin-top:8px; }
.endcta .wrap{ max-width:880px; text-align:center; }
.endcta h2{ font-size:clamp(23px,3vw,30px); margin:0 0 12px; }
.endcta p{ color:var(--ink-dim); margin:0 auto 22px; max-width:56ch; }
.endcta .btnrow{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.rel-list{ list-style:none; padding:0; margin:0; }
.rel-list > li{ border-bottom:1px solid var(--line); padding:26px 0; }
.rel-list > li:last-child{ border-bottom:0; }
.rel-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.rel-v{ font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--accent); font-weight:500; }
.rel-d{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-dim); }
.rel-head h3{ margin:0; font-size:19px; flex-basis:100%; }
.tag{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--ink-dim); }

@media (max-width:720px){
  .prose{ padding:40px 22px 20px; }
  .page-head{ padding:48px 0 34px; }
  .page-head .wrap,.prose,.pagenav .wrap,.endcta .wrap{ padding-left:22px; padding-right:22px; }
}