:root{
    /* Dark palette, deliberately: this page pins one look rather than
       offering a toggle (see html{color-scheme} note below). --ink/--paper
       keep their original names even though their roles inverted from the
       old light palette, so every rule below the variables needed zero
       changes — only the values did. Contrast-checked against WCAG AA
       (4.5:1 body text, 3:1 large text/UI) on the --paper background. */
    --ink:#EAF3F2;
    --ink-soft:#A9C4C1;
    --paper:#081918;
    --paper-raised:#0F2624;
    --signal:#2DD4BF;
    --signal-dark:#0F9488;
    --steel:#8FADAA;
    --line:#1D3B38;
    --verified:#34D399;
    --muted:#7FA3A0;
    --display:'Space Grotesk',sans-serif;
    --sans:'IBM Plex Sans',sans-serif;
    --mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box;}
  /* This page never offers a light/dark toggle — one dark look, always —
     but without this, a visitor's own OS-level light mode preference can
     still make the browser render native controls (the interest form's
     inputs, etc.) with light styling while the page itself stays dark, a
     mismatch that's worse than just "always dark." Pinned explicitly
     rather than left to inherit. */
  html{scroll-behavior:smooth;color-scheme:dark;}
  body{
    margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
    -webkit-font-smoothing:antialiased;line-height:1.5;
  }
  a{color:inherit;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

  /* ---------- grid backdrop ---------- */
  .grid-field{
    position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:56px 56px;
    opacity:.35;
    mask-image:linear-gradient(to bottom, black, transparent 92%);
  }

  /* ---------- nav ---------- */
  nav{position:sticky;top:0;z-index:50;padding:26px 0;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .15s ease, box-shadow .15s ease;}
  nav.scrolled{border-bottom-color:var(--line);box-shadow:0 2px 12px rgba(0,0,0,.35);}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;}
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);}
  .logo-mark{width:32px;height:32px;flex-shrink:0;}
  .navlinks{display:flex;gap:32px;font-size:14.5px;font-weight:500;color:var(--ink-soft);}
  .navlinks a{text-decoration:none;}
  .navlinks a:hover{color:var(--ink);}
  .navcta{display:flex;align-items:center;gap:18px;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--sans);font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:3px;text-decoration:none;cursor:pointer;
    border:1.5px solid var(--ink);transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{background:var(--ink);color:var(--paper);}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 0 0 rgba(45,212,191,.28);}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
  .btn-ghost:hover{border-color:var(--ink);}

  /* ---- Sign-in org picker: a small popover under the nav's "Sign in"
     link, shown only in subdomain mode (see index.html's own script) to
     ask which company before handing off to {slug}.<domain>. Reuses the
     .field/.form-error styling already defined for the contact form
     below, so it looks like part of the same design system, not a
     bolted-on widget. ---- */
  .org-picker-wrap{position:relative;}
  .org-picker{
    position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:260px;
    background:var(--paper-raised);border:1.5px solid var(--ink);border-radius:4px;
    padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.45);text-align:left;
  }
  .org-picker .field{margin-bottom:12px;}
  .org-picker-go{width:100%;padding:9px 16px;font-size:13.5px;}
  @media (max-width:480px){ .org-picker{right:auto;left:0;width:calc(100vw - 48px);max-width:300px;} }
  @media (max-width:760px){ .navlinks{display:none;} }
  @media (max-width:480px){
    nav .wrap{flex-wrap:wrap;row-gap:10px;}
    .navcta{gap:8px;width:100%;justify-content:flex-end;}
    .navcta .btn{padding:9px 12px;font-size:13px;}
  }

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:64px 0 88px;}
  .hero .wrap{position:relative;z-index:2;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;
    letter-spacing:.06em;color:var(--ink-soft);background:var(--paper-raised);
    border:1px solid var(--line);padding:6px 12px;border-radius:20px;margin-bottom:26px;
  }
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--verified);}
  h1{
    font-family:var(--display);font-size:clamp(34px,5.2vw,58px);line-height:1.06;
    font-weight:700;letter-spacing:-.015em;margin:0 0 22px;max-width:15ch;
  }
  h1 .accent{color:var(--signal);}
  .hero-sub{font-size:18px;color:var(--ink-soft);max-width:46ch;margin:0 0 34px;}
  .tagline{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--signal);font-weight:600;margin:0 0 18px;text-transform:uppercase;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:56px;}
  .hero-note{font-size:13px;color:var(--muted);margin-top:14px;}

  /* ---------- contact form ---------- */
  .field{margin-bottom:18px;text-align:left;}
  .field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px;font-weight:600;}
  .field input, .field textarea{
    width:100%;border:1px solid var(--line);background:var(--paper-raised);padding:11px 12px;
    font-family:var(--sans);font-size:14px;border-radius:3px;color:var(--ink);
  }
  .field textarea{resize:vertical;font-family:var(--sans);}
  .field input:focus, .field textarea:focus{outline:2px solid var(--signal);outline-offset:-1px;}
  .form-error{color:#FF7A66;font-size:13px;margin:-6px 0 14px;text-align:left;}

  /* ---------- stamp chain (signature element) ---------- */
  .stampchain{
    display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:8px;
  }
  .stamp{
    font-family:var(--mono);font-size:13px;background:var(--paper-raised);
    border:1.5px solid var(--ink);border-radius:4px;padding:10px 14px;
    display:flex;flex-direction:column;gap:2px;min-width:150px;
    box-shadow:3px 3px 0 0 rgba(0,0,0,.4);
    opacity:0;transform:translateY(14px);
    animation:stampin .5s ease forwards;
  }
  .stamp:nth-child(1){animation-delay:.05s;}
  .stamp:nth-child(3){animation-delay:.35s;}
  .stamp:nth-child(5){animation-delay:.65s;}
  .stamp:nth-child(7){animation-delay:.95s;}
  @keyframes stampin{to{opacity:1;transform:translateY(0);}}
  .stamp-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-family:var(--sans);font-weight:600;}
  .stamp-value{font-weight:600;color:var(--ink);}
  .stamp.verified{border-color:var(--verified);}
  .stamp.verified .stamp-value{color:var(--verified);}
  .stamp.locked{border-color:var(--signal-dark);background:rgba(45,212,191,.14);}
  .chain-link{
    width:34px;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 11px);
    flex-shrink:0;opacity:0;animation:stampin .4s ease forwards;
  }
  .chain-link:nth-child(2){animation-delay:.25s;}
  .chain-link:nth-child(4){animation-delay:.55s;}
  .chain-link:nth-child(6){animation-delay:.85s;}
  @media (max-width:640px){
    .stampchain{flex-direction:column;align-items:flex-start;}
    .chain-link{width:2px;height:22px;background:repeating-linear-gradient(180deg,var(--ink) 0 6px,transparent 6px 11px);margin-left:18px;}
  }
  @media (prefers-reduced-motion: reduce){
    .stamp, .chain-link{animation:none;opacity:1;transform:none;}
  }

  /* ---------- proof strip ---------- */
  .proofstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-raised);padding:20px 0;}
  .proofstrip .wrap{display:flex;flex-wrap:wrap;gap:28px 44px;justify-content:center;font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);letter-spacing:.02em;}
  .proofstrip strong{color:var(--ink);font-weight:600;}

  /* ---------- sections ---------- */
  section{padding:88px 0;}
  .section-head{max-width:640px;margin:0 0 56px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);font-weight:600;margin-bottom:14px;display:block;}
  h2{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.01em;margin:0 0 16px;line-height:1.15;}
  .lead{font-size:17px;color:var(--ink-soft);margin:0;}

  /* problem section */
  .problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);}
  .problem-card{padding:32px 28px;border-right:1px solid var(--line);}
  .problem-card:last-child{border-right:none;}
  .problem-card .pmark{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-bottom:14px;}
  .problem-card h3{font-family:var(--display);font-size:19px;margin:0 0 10px;font-weight:600;}
  .problem-card p{font-size:14.5px;color:var(--ink-soft);margin:0;}
  @media (max-width:820px){
    .problem-grid{grid-template-columns:1fr;}
    .problem-card{border-right:none;border-bottom:1px solid var(--line);}
    .problem-card:last-child{border-bottom:none;}
  }

  /* workflow (real 3-step sequence — justified numbering). Kept as its own
     fixed dark card rather than following --paper/--ink, which now point
     to dark-page/light-text — this section needs to read as a raised
     panel *within* the dark page, not invert into a light one. */
  .workflow{background:#041615;color:var(--ink);border:1px solid #123332;border-radius:6px;padding:64px 40px;position:relative;overflow:hidden;}
  .workflow .section-head{color:var(--ink);}
  .workflow .kicker{color:#8FE3D4;}
  .workflow .lead{color:#B8D9D9;}
  .worksteps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;position:relative;z-index:2;}
  .workstep{border-top:2px solid #1F4E4E;padding-top:22px;}
  .workstep .stepnum{font-family:var(--mono);font-size:13px;color:var(--signal);display:block;margin-bottom:14px;}
  .workstep h4{font-family:var(--display);font-size:20px;font-weight:600;margin:0 0 10px;}
  .workstep p{font-size:14.5px;color:#AECFCF;margin:0;}
  @media (max-width:820px){ .worksteps{grid-template-columns:1fr;} .workflow{padding:44px 24px;} }

  /* trust grid */
  .trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
  .trust-card{background:var(--paper-raised);padding:32px;}
  .trust-card h3{font-family:var(--display);font-size:18px;font-weight:600;margin:0 0 10px;display:flex;align-items:center;gap:10px;}
  .trust-card h3::before{content:'';width:8px;height:8px;background:var(--verified);border-radius:50%;flex-shrink:0;}
  .trust-card p{font-size:14.5px;color:var(--ink-soft);margin:0;}
  @media (max-width:760px){ .trust-grid{grid-template-columns:1fr;} }

  /* footer CTA */
  .closing{text-align:center;}
  .closing h2{max-width:20ch;margin-left:auto;margin-right:auto;}
  footer{border-top:1px solid var(--line);padding:40px 0;}
  footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);}
  footer .flinks{display:flex;gap:22px;}
  footer a{text-decoration:none;}
  footer a:hover{color:var(--ink);}
  /* Social links (Facebook): the logo in the footer, logo and words on Contact. */
  footer a.social{display:inline-flex;align-items:center;line-height:0;opacity:.85;transition:opacity .15s;}
  footer a.social:hover, footer a.social:focus-visible{opacity:1;}
  .social-follow{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:10px 18px;border:1px solid var(--line);border-radius:4px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;}
  .social-follow:hover{border-color:#0866FF;}

  ::selection{background:var(--signal);color:var(--paper);}
  a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--steel);outline-offset:2px;}

  /* ---------- skip link (accessibility) ---------- */
  .skip-link{
    position:absolute;left:-9999px;top:auto;background:var(--ink);color:var(--paper);
    padding:12px 18px;z-index:100;text-decoration:none;font-size:14px;border-radius:3px;
  }
  .skip-link:focus{left:16px;top:16px;}

  /* ---------- active nav state ----------
     The server marks the link to the page being shown with
     aria-current="page" (renderSitePage in server.js, v1.95.1), so the one
     shared menu works for every page. */
  .navlinks a[aria-current="page"]{color:var(--ink);font-weight:600;}
  /* No "Book a free demo" button on the demo page itself. */
  .navcta a[aria-current="page"]{display:none;}

  /* ---------- subpage header (simpler than the homepage hero, same
     grid-backdrop + eyebrow + h1 treatment for consistency) ---------- */
  .page-header{position:relative;overflow:hidden;padding:56px 0 64px;}
  .page-header .wrap{position:relative;z-index:2;}
  .page-header h1{max-width:20ch;}
  .page-header .lead{font-size:18px;max-width:52ch;margin-top:18px;}

  /* ---------- breadcrumb-lite: which page you're on ---------- */
  .crumb{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:18px;letter-spacing:.02em;}
  .crumb a{text-decoration:none;color:var(--steel);}
  .crumb a:hover{text-decoration:underline;}

  /* ---------- phone mockups (real screenshots from a running demo org,
     see CHANGELOG for the seeding — never Grigwells' own live data) ---- */
  .phone-mockups{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
  .phone-frame{width:240px;text-align:center;}
  .phone-frame .device{
    border:8px solid var(--paper-raised);border-radius:32px;overflow:hidden;
    background:var(--paper);position:relative;box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  .phone-frame .device::before{
    content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:38%;height:18px;background:var(--paper-raised);border-radius:0 0 12px 12px;z-index:2;
  }
  .phone-frame img{display:block;width:100%;height:auto;}
  .phone-caption{margin-top:16px;font-size:13.5px;color:var(--ink-soft);}

  /* ---------- provenance callout (Grigwells origin story) ---------- */
  .provenance{border:1px solid var(--line);border-left:4px solid var(--signal-dark);background:var(--paper-raised);padding:36px 40px;border-radius:4px;max-width:760px;margin:0 auto;}
  .provenance p{font-size:16.5px;color:var(--ink-soft);margin:0 0 14px;line-height:1.6;}
  .provenance p:last-child{margin-bottom:0;}
  .provenance strong{color:var(--ink);}
  @media (max-width:640px){ .provenance{padding:26px 24px;} }

  /* v1.95.0: pricing, Book a demo, the savings calculator, testimonials. */
  .field select{width:100%;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:4px;color:var(--ink);font:inherit;font-size:15px;}
  .field select:focus{outline:none;border-color:var(--signal);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
  @media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
  .from-price{margin:18px 0 0;font-size:14.5px;color:var(--ink-soft);}
  .from-price strong{color:var(--ink);font-family:var(--display);font-size:17px;}
  .price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
  .price-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;padding:28px 24px;display:flex;flex-direction:column;}
  .price-card h3{font-family:var(--display);font-size:20px;margin:0 0 4px;}
  .price-crews{font-size:13px;color:var(--muted);font-family:var(--mono);margin-bottom:16px;}
  .price-amount{font-family:var(--display);font-size:36px;font-weight:700;color:var(--ink);line-height:1;}
  .price-amount span{font-size:14px;font-weight:500;color:var(--ink-soft);}
  .price-card ul{list-style:none;padding:0;margin:18px 0 22px;font-size:14px;color:var(--ink-soft);flex:1;}
  .price-card li{padding:5px 0 5px 20px;position:relative;}
  .price-card li::before{content:'';position:absolute;left:2px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--verified);}
  .price-card .btn{text-align:center;}
  .addon-table{width:100%;border-collapse:collapse;font-size:14.5px;}
  .addon-table .addon-desc{font-size:13.5px;color:var(--ink-soft);margin-top:4px;font-weight:400;line-height:1.5;}
  .addon-table td:last-child{white-space:nowrap;vertical-align:top;}
  .addon-table td{padding:12px 4px;border-bottom:1px solid var(--line);color:var(--ink-soft);}
  .addon-table td:last-child{text-align:right;font-family:var(--mono);color:var(--ink);white-space:nowrap;}
  .price-note{font-size:13.5px;color:var(--muted);margin-top:18px;text-align:center;}
  .calc{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
  @media (max-width:820px){ .calc{grid-template-columns:1fr;} }
  .calc-panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;padding:28px;}
  .calc-panel h3{font-family:var(--display);font-size:18px;margin:0 0 16px;}
  .calc-hint{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .calc-figure{font-family:var(--display);font-size:40px;font-weight:700;color:var(--signal);line-height:1.1;}
  .calc-figure-label{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;}
  .calc-lines{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px;}
  .calc-lines td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);}
  .calc-lines td:last-child{text-align:right;font-family:var(--mono);color:var(--ink);}
  .calc-role{margin:16px 0 0;font-size:15px;color:var(--ink);font-weight:500;}
  .calc-role:empty{display:none;}
  /* Savings: each area of office work, today and with HolGrig. */
  .saving-today{margin:0 0 10px !important;color:var(--muted) !important;}
  .saving-today span,.saving-with{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px;}
  .saving-today span{color:var(--steel);}
  .saving-with{color:var(--signal);}
  .saving-cta{display:flex;flex-direction:column;justify-content:center;}
  .saving-cta h3::before{background:var(--signal) !important;}
  .saving-cta .btn{align-self:flex-start;margin-top:16px;}
  .calc-steps{width:100%;border-collapse:collapse;font-size:14px;}
  .calc-steps td{padding:8px 4px;border-bottom:1px solid var(--line);color:var(--ink-soft);}
  .calc-steps td:last-child{text-align:right;font-family:var(--mono);color:var(--ink);}
  .calc-steps tr.total td{color:var(--ink);font-weight:600;}
  .quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
  .quote-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:6px;padding:28px;margin:0;}
  .quote-card blockquote{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--ink);}
  .quote-card figcaption{font-size:13.5px;color:var(--ink-soft);}
  .quote-card figcaption strong{color:var(--ink);display:block;}
  .case-study{background:var(--paper-raised);border:1px solid var(--line);border-left:4px solid var(--signal-dark);border-radius:6px;padding:36px 40px;margin-bottom:24px;}
  @media (max-width:640px){ .case-study{padding:26px 22px;} }
  .case-study h3{font-family:var(--display);font-size:24px;margin:0 0 18px;}
  .case-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 22px;}
  .case-figure{border:1px solid var(--line);border-radius:4px;padding:14px 16px;}
  .case-figure b{display:block;font-family:var(--display);font-size:26px;color:var(--signal);}
  .case-figure span{font-size:13px;color:var(--ink-soft);}
  .case-study p{color:var(--ink-soft);line-height:1.65;margin:0 0 14px;}
  /* Seven footer links since v1.95.0: let them wrap on a phone. */
  footer .flinks{flex-wrap:wrap;row-gap:10px;}

  /* Phone menu (v1.95.0, site.js): below 760px the page links fold into
     a Menu button, opening as a panel under the top bar. */
  .nav-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:9px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
  .nav-toggle[aria-expanded="true"]{border-color:var(--signal);}
  @media (max-width:760px){
    .nav-toggle{display:inline-block;margin-right:auto;}
    .navlinks.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--paper-raised);border-bottom:1px solid var(--line);box-shadow:0 8px 18px rgba(0,0,0,.35);padding:6px 24px 14px;}
    .navlinks.open a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink);}
    .navlinks.open a:last-child{border-bottom:none;}
    .navlinks.open a[aria-current="page"]{color:var(--signal);}
  }

  /* The homepage video (v1.95.0). */
  .video-frame{max-width:980px;margin:0 auto;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#000;box-shadow:0 18px 40px rgba(0,0,0,.45);}
  .video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;}
  .video-transcript{max-width:980px;margin:18px auto 0;font-size:14.5px;color:var(--ink-soft);}
  .video-transcript summary{cursor:pointer;color:var(--ink);font-weight:600;}
  .video-transcript ol{margin:12px 0 0;padding-left:22px;line-height:1.6;}