:root{
    /* shared */
    --ok:#3ec9a7;
    --err:#ff9b9b;               /* 5.9:1 on the navy panel */
    --focus-ring:rgba(148,205,223,.30);
    --gold:#e0951f;              /* Vizible accent, used sparingly */
    --radius:16px;
    --ease-out-soft:cubic-bezier(.22,1,.36,1);
    --ease-spring:cubic-bezier(.34,1.4,.64,1);
    --ease-inout-soft:cubic-bezier(.65,0,.35,1);
    --maxw:1140px;
    --font:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --font-display:'Sora','Manrope',ui-sans-serif,system-ui,sans-serif;
    /* dark theme (default) — built from the Vizible navy/sky brand colours */
    --bg:#08192f;                /* navy-ink */
    --bg-2:#0c2443;              /* navy (primary) */
    --bg-3:#0d2749;
    --line:#1d3f66;
    --text:#f5f8fa;              /* paper */
    --text-soft:#a8c0d4;
    --brand:#94cddf;             /* sky-light: links/eyebrows need contrast on navy */
    --sage:#58a9c7;              /* sky (secondary) — the old violet slot */
    --sage-2:#94cddf;            /* sky-light (tertiary) */
    --header-bg:rgba(8,25,47,.82);
    --hero-bg:radial-gradient(1200px 500px at 80% -10%,rgba(88,169,199,.20),transparent),radial-gradient(900px 500px at 0% 20%,rgba(148,205,223,.10),transparent);
    --panel-shadow:0 30px 70px rgba(0,0,0,.45);
    --card-hover-border:var(--sage);
    --card-hover-shadow:none;
    --footer-bg:#071628;
    --submit-bg:#58a9c7;         /* sky — same ramp as .btn-sage, was mint green */
    --submit-bg-2:#94cddf;       /* sky-light: the gradient's second stop */
    --submit-fg:#08192f;         /* navy-ink; sky is far too light for white text */
    --placeholder:#7d97ad;
    --field-bg:#08192f;          /* navy-ink: a well, darker than the panel */
    --field-text:#ffffff;        /* what you type: pure white, not paper */
    --on-accent:#08192f;         /* text on a sky-filled button */
  }
  [data-theme="light"]{
    --ok:#0b7a5e;
    --err:#b3261e;               /* 5.7:1 on white */
    --focus-ring:rgba(31,108,138,.20);
    --gold:#a3690c;              /* darkened for text contrast on white */
    --bg:#ffffff;                /* paper */
    --bg-2:#f5f8fa;              /* mist */
    --bg-3:#ffffff;
    --line:#dde7ed;
    --text:#0c2443;              /* navy */
    --text-soft:#46586b;         /* slate — 7.1:1 on white */
    --brand:#0c2443;             /* navy is the primary action colour on light */
    --sage:#1f6c8a;              /* darkened sky: #58a9c7 is only 2.4:1 on white */
    --sage-2:#1a5f7d;
    --header-bg:rgba(255,255,255,.85);
    --hero-bg:linear-gradient(180deg,#f5f8fa,#fff);
    --panel-shadow:0 20px 50px rgba(12,36,67,.10);
    --card-hover-border:#94cddf;
    --card-hover-shadow:0 10px 30px rgba(12,36,67,.08);
    --footer-bg:#f5f8fa;
    --submit-bg:#1f6c8a;         /* darkened sky, as elsewhere in light mode */
    --submit-bg-2:#1a5f7d;
    --submit-fg:#ffffff;
    --placeholder:#5b7085;
    --field-bg:#f5f8fa;          /* mist on a white panel */
    --field-text:#0c2443;        /* navy; light mode was already fine */
    --on-accent:#ffffff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;transition:background .25s ease,color .25s ease;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--sage-2);margin-bottom:.7rem}
  .eyebrow.blue{color:var(--brand)}
  h1,h2,h3{font-family:var(--font-display);line-height:1.14;letter-spacing:-.02em;font-weight:800}
  h1{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800}
  h1 .hl{background:linear-gradient(100deg,var(--sage),var(--sage-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
  h2 .hl{color:var(--sage-2)}
  h3{font-size:1.15rem;font-weight:700}
  p.lead{font-size:1.12rem;color:var(--text-soft);max-width:60ch}
  section{padding:82px 0}
  /* The transparent border is load-bearing: without it a .btn-ghost is 3px
     taller than a filled button beside it, because only the ghost has one. */
  .btn{display:inline-block;border:1.5px solid transparent;padding:14px 26px;border-radius:10px;font-weight:700;font-size:.98rem;line-height:1.25;text-align:center;transition:transform .15s,box-shadow .15s}
  .btn-primary{background:var(--brand);color:var(--on-accent);box-shadow:0 8px 24px rgba(12,36,67,.35)}
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-sage{background:linear-gradient(135deg,var(--sage),var(--sage-2));color:var(--on-accent);box-shadow:0 8px 24px rgba(88,169,199,.40)}
  .btn-sage:hover{transform:translateY(-2px)}
  .btn-ghost{border-color:var(--line);color:var(--text)}
  .btn-ghost:hover{border-color:var(--sage);color:var(--sage-2)}

  /* Every pair of buttons on the site sits in one of these. It was originally
     only ever styled through a parent (.hero, .page-hero, .cta-band), so a row
     used anywhere else fell back to inline-block: no gap, and the two buttons
     baseline-aligned at different heights. The box model belongs here; the
     scoped rules below only set spacing and alignment. */
  .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

  .slot{border:2px dashed #3d7a95;background:rgba(88,169,199,.10);border-radius:var(--radius);padding:26px;text-align:center;color:var(--sage-2);font-weight:600}
  .slot small{display:block;font-weight:500;color:var(--text-soft);margin-top:6px;font-size:.85rem}

  header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  /* The wordmark is supplied as two PNGs, one per ink colour, so it is set as
     a background rather than an <img>: the browser fetches only the one the
     current theme matches. Source art is 350x96 — if the lockup is ever
     re-cut, the ratio changes and these numbers move with it. Both inks are
     cropped from one shared source rect (106,0 to 1371,346) because their
     alpha bounds differ, and per-file trimming makes the logo jump when the
     theme is toggled. */
  .logo-img{display:block;width:146px;height:40px;background:url(/images/logo-franchise-marketing-dark.png) no-repeat left center;background-size:contain}
  [data-theme="light"] .logo-img{background-image:url(/images/logo-franchise-marketing-light.png)}
  /* block, so the tagline underneath it drops to its own line — the old
     text lockup was inline and flowed with it */
  footer .logo{display:block}
  footer .logo-img{width:131px;height:36px}
  @media(max-width:420px){.logo-img{width:128px;height:35px}}
  .nav-links{display:flex;gap:28px;align-items:center;font-weight:600;font-size:.95rem;color:var(--text-soft)}
  .nav-links a:hover{color:var(--text)}
  @media(max-width:860px){.nav-links a:not(.btn){display:none}}

  /* HERO */
  .hero{background:var(--hero-bg);padding:72px 0 64px;border-bottom:1px solid var(--line)}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}}
  .hero .cta-row{margin-top:28px}
  .hero-points{margin-top:24px;display:grid;gap:11px}
  .hero-points div{display:flex;gap:10px;color:var(--text-soft);font-size:.98rem}
  .hero-points div::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage);margin-top:9px;flex:none}
  .sage-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--panel-shadow)}
  .sage-panel .tag{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--sage-2);background:rgba(88,169,199,.16);padding:6px 12px;border-radius:99px;margin-bottom:14px}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;margin-top:50px}
  @media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr);gap:30px}}
  .stat .num{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--brand)}
  .stat .lbl{font-size:.88rem;color:var(--text-soft)}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
  @media(max-width:1000px){.grid4{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.grid4{grid-template-columns:minmax(0,1fr)}}
  @media(max-width:860px){.grid3{grid-template-columns:1fr}}
  .card{position:relative;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:border-color .15s,transform .15s;overflow:hidden}
  .card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--sage),var(--sage-2))}
  .card:hover{border-color:var(--card-hover-border);transform:translateY(-3px);box-shadow:var(--card-hover-shadow)}
  .card h3{margin-bottom:8px}
  .card p{color:var(--text-soft);font-size:.94rem}
  .card .k{width:42px;height:42px;border-radius:11px;background:rgba(88,169,199,.16);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--sage-2);margin-bottom:14px}

  .offers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
  @media(max-width:860px){.offers{grid-template-columns:1fr}}
  .offer{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
  .offer h3{font-size:1.35rem;margin-bottom:10px}
  .offer>p{color:var(--text-soft)}
  .offer ul{list-style:none;margin-top:16px;display:grid;gap:10px}
  .offer li{display:flex;gap:10px;font-size:.95rem;color:var(--text-soft)}
  .offer li::before{content:"✓";color:var(--ok);font-weight:800}

  .videos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
  @media(max-width:900px){.videos{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.videos{grid-template-columns:1fr}}

  /* Each video is a card — thumbnail flush to the top edge, title in a padded
     footer — so the row reads as a library rather than four loose images. */
  .vid{margin:0;background:var(--bg-3);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
  .vid:hover{transform:translateY(-3px);border-color:var(--card-hover-border);box-shadow:var(--card-hover-shadow)}
  .vid .vf{border:0;border-radius:0;border-bottom:1px solid var(--line)}

  /* Bottom-left, not centred. Every one of these thumbnails has its headline
     baked into the middle of the frame, and a centred play button sat right on
     top of it — "SHE'S NOT REAL" read as "SHE'S ...T REAL". The scrim keeps
     the button legible over a light or busy thumbnail. */
  .vid .vf .vf-play{left:14px;top:auto;bottom:14px;transform:none;width:46px;height:46px;z-index:2;box-shadow:0 6px 18px rgba(8,25,47,.5)}
  .vid .vf:hover .vf-play{transform:scale(1.08);background:var(--sage-2)}
  .vid .vf .vf-play::before{border-left-width:15px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
  .vid .vf::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(8,25,47,.80),rgba(8,25,47,.26) 46%,rgba(8,25,47,0))}
  /* the iframe replaces the button's children, but ::after belongs to the
     button itself, so it would otherwise sit over the playing video */
  .vid .vf.is-playing::after{display:none}

  /* clamped to two lines so every card in the row is the same height */
  .vid figcaption{padding:14px 16px 16px;font-size:.92rem;font-weight:700;color:var(--text);text-align:left;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  .videos-more{text-align:center;margin-top:28px}
  .videos-more a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.94rem;color:var(--sage-2);border-bottom:1.5px solid transparent;padding-bottom:2px;transition:border-color .15s,color .15s}
  .videos-more a:hover{border-bottom-color:var(--sage);color:var(--text)}

  .results{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
  @media(max-width:800px){.results{grid-template-columns:repeat(2,1fr)}}
  .result{text-align:center;padding:26px 16px;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius)}
  .result h3{color:var(--sage-2)}
  .result p{font-size:.9rem;color:var(--text-soft);margin-top:4px}

  .team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
  @media(max-width:860px){.team{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.team{grid-template-columns:1fr}}
  .member{text-align:center;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
  .avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(150deg,rgba(88,169,199,.30),rgba(148,205,223,.30));margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--sage-2);font-size:1.35rem;border:1px solid var(--line)}
  .member h3{font-size:1.05rem}
  .member p{font-size:.83rem;color:var(--text-soft)}

  .demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
  /* .top is for /demo, where the copy column is much taller than the form and
     centring leaves the form floating in the middle of it. minmax(0,1fr)
     because the form's shadow tree has its own ideas about minimum width. */
  .demo-grid.top{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  @media(max-width:860px){.demo-grid,.demo-grid.top{grid-template-columns:minmax(0,1fr)}}
  .demo-form .form-title{font-size:1.15rem;margin-bottom:4px}
  .demo-form .form-sub{color:var(--text-soft);font-size:.92rem;margin-bottom:18px}
  .demo ul{list-style:none;margin-top:22px;display:grid;gap:12px;color:var(--text-soft)}
  .demo li::before{content:"✓ ";color:var(--ok);font-weight:800}

  .altbg{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .badge{display:inline-block;background:rgba(88,169,199,.16);color:var(--sage-2);font-weight:700;font-size:.72rem;padding:5px 11px;border-radius:99px;margin-bottom:12px}
  .note{text-align:center;margin-top:16px;font-size:.88rem;color:var(--text-soft)}


  .form-shell{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
  .form-note{font-size:.8rem;color:var(--sage-2);background:rgba(88,169,199,.12);border:1px dashed #3d7a95;border-radius:10px;padding:10px 12px;margin-bottom:16px}
  /* ---- Vendasta form embed -----------------------------------------
     The widget renders the form into an open shadow root, so most of it is
     out of reach from this file — but not all of it, and the reachable part
     deliberately lives HERE rather than in site.js.

     Two hooks make that possible:
       * the widget's own CSS is written against custom properties it
         declares on :host, and a page rule on the host element beats a
         :host rule inside the shadow tree, so redefining those properties
         here recolours every rule it has — its !important ones included;
       * it puts part= attributes on the form and on each field row, so
         ::part() can reach those two elements. Note these are deliberately
         NOT !important: an outer-tree normal declaration already beats an
         inner-tree normal one, which leaves site.js free to override with
         !important from inside. Make these !important and you lock site.js
         out of its own layout.

     So everything the brand depends on — colour, radius, field height, the
     form's chrome — is pure CSS and survives site.js being stale, slow or
     blocked. site.js only *upgrades* it (two-column grid, autofill, select
     chevron, focus ring, screen-reader labels). Keep that split: a JS-only
     skin puts a violet Vendasta form in a white panel every time the JS is
     one cache generation behind the HTML. */
  .crm-form-wrap{position:relative;min-height:370px}
  .crm-form-wrap.is-ready{min-height:0}

  .crm-form-host{
    display:block;
    /* the widget's own variables, remapped onto the site's tokens */
    --color-bg:transparent;
    --color-border:var(--line);
    --color-text:var(--field-text);
    --color-input-bg:var(--field-bg);
    --color-input-border:var(--line);
    --color-input-focus:var(--sage);
    --color-btn-bg:var(--submit-bg);
    --color-btn-text:var(--submit-fg);
    --color-error-text:var(--err);
    --radius-input:9px;
    /* field height is padding-driven so it holds with no JS; --field-h
       must stay in step with it (site.js centres the select chevron on it) */
    --padding-input:13px 14px;
    --field-h:52px;
    --font-family-base:var(--font);
  }
  /* the widget writes background, border, padding and width inline onto the
     <form>; .form-shell is already the card, so flatten it. !important here
     because an inline style outranks an outer normal declaration. */
  .crm-form-host::part(form){
    border:0!important;padding:0!important;border-radius:0!important;
    width:100%!important;color:var(--text)!important;font-family:var(--font)!important;
  }
  /* One field per row is the floor: it cannot break, and site.js upgrades it
     to two columns. This overrides the widget's own 48% inline-blocks. */
  .crm-form-host::part(field){display:block;width:100%;margin:0 0 12px 0}

  .crm-skel{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .crm-form-wrap.is-ready .crm-skel{display:none}
  /* the skeleton has to clear itself without JS too, or a stale site.js
     leaves a stack of empty bars sitting above a working form */
  .crm-form-wrap:has(.crm-form-host) .crm-skel{display:none}
  .crm-skel[hidden]{display:none}
  .crm-skel b{display:block;height:52px;border-radius:9px;background:var(--field-bg);border:1px solid var(--line);animation:crm-pulse 1.5s ease-in-out infinite}
  .crm-skel b:nth-child(even){animation-delay:.18s}
  /* rows 5 and 6 are the two full-width fields, matching the rendered form */
  .crm-skel b:nth-child(5),.crm-skel b:nth-child(6){grid-column:1/-1}
  .crm-skel b:last-child{grid-column:1/-1;width:174px;height:50px;background:var(--line);border-color:transparent}
  @keyframes crm-pulse{0%,100%{opacity:1}50%{opacity:.5}}

  /* shown only if the widget never arrives (blocked, offline, service down) */
  .crm-fallback{font-size:.9rem;color:var(--text-soft);border:1px dashed var(--line);border-radius:10px;padding:16px 18px;line-height:1.55}
  .crm-fallback a{color:var(--sage-2);text-decoration:underline}
  @media(max-width:520px){.crm-skel{grid-template-columns:1fr}.crm-form-wrap{min-height:0}}
  @media(prefers-reduced-motion:reduce){.crm-skel b{animation:none}}

  /* Company-name lookup menu. It lives in <body> rather than the shadow
     root, and the widget injects its own light-grey styling for it into a
     runtime <style> at the same specificity as these rules — being later
     in the document, that would win every tie, hence !important. Only the
     properties it actually sets are forced; display is left alone because
     the widget toggles it inline to open and close the menu. */
  .autocomplete-suggestions{position:absolute;z-index:60;max-height:236px;overflow-y:auto!important;
    background:var(--bg-3)!important;border:1px solid var(--line)!important;border-radius:10px!important;
    box-shadow:var(--panel-shadow)!important;padding:6px;font-size:.9rem;box-sizing:border-box}
  .autocomplete-suggestion{padding:8px 11px!important;border-radius:7px;cursor:pointer;
    color:var(--text)!important;line-height:1.35!important;
    /* the entries are two lines (name, then address) so the widget's
       single-line ellipsis would clip the second one */
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .autocomplete-suggestion b{color:var(--sage-2)!important;font-weight:700!important}
  .autocomplete-suggestion .secondary-text{color:var(--text-soft)!important;font-size:.82rem!important}
  .autocomplete-suggestion.selected,.autocomplete-suggestion:hover{background:var(--bg-2)!important}

  .theme-toggle{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1.5px solid var(--line);color:var(--text-soft);border-radius:99px;padding:8px 14px;font-family:inherit;font-weight:600;font-size:.85rem;cursor:pointer;transition:border-color .15s,color .15s}
  .theme-toggle:hover{border-color:var(--sage);color:var(--text)}
  .theme-toggle .tt-icon{width:15px;height:15px;display:inline-block}
  [data-theme="light"] .tt-dark{display:none}
  :root .tt-light{display:none}
  [data-theme="light"] .tt-light{display:inline}
  footer{background:var(--footer-bg);border-top:1px solid var(--line);padding:46px 0;font-size:.9rem;color:var(--text-soft)}
  .foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .foot-row a{color:var(--brand);font-weight:600}

  /* ===================================================================
     INNER PAGES — added when the six inner pages were built.
     Everything above this line is the original homepage CSS, verbatim.
     =================================================================== */

  /* nav: active state + mobile disclosure */
  .nav-links a.active{color:var(--text)}
  .nav-links a.active:not(.btn){position:relative}
  .nav-links a.active:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sage),var(--sage-2))}
  .nav-toggle{display:none;background:transparent;border:1.5px solid var(--line);color:var(--text);border-radius:9px;padding:7px 11px;font:inherit;font-size:1.1rem;line-height:1;cursor:pointer}
  .nav-toggle:hover{border-color:var(--sage)}
  @media(max-width:860px){
    .nav-toggle{display:inline-flex}
    .nav-links{position:absolute;top:72px;left:0;right:0;background:var(--bg-2);border-bottom:1px solid var(--line);box-shadow:var(--panel-shadow);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 18px;display:none}
    .nav-links.open{display:flex}
    .nav-links a:not(.btn){display:block;padding:13px 0;border-bottom:1px solid var(--line)}
    .nav-links a.active:not(.btn)::after{display:none}
    .nav-links .btn{margin-top:14px;text-align:center}
    .nav-links .theme-toggle{margin-top:14px;justify-content:center}
  }

  /* compact hero for inner pages */
  .page-hero{background:var(--hero-bg);padding:58px 0 52px;border-bottom:1px solid var(--line)}
  .page-hero h1{font-size:clamp(2rem,4.2vw,3.1rem)}
  .page-hero p.lead{margin-top:16px}
  .page-hero .cta-row{margin-top:26px}
  .crumb{font-size:.85rem;color:var(--text-soft);margin-bottom:14px}
  .crumb a{color:var(--brand);font-weight:600}
  .crumb i{opacity:.5;margin:0 7px;font-style:normal}

  /* section intro block */
  .sec-head{max-width:64ch}
  .sec-head p{color:var(--text-soft);margin-top:12px}

  /* two-column feature rows */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:38px}
  @media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}}
  .checks{list-style:none;display:grid;gap:11px;margin-top:18px}
  .checks li{display:flex;gap:10px;font-size:.95rem;color:var(--text-soft)}
  .checks li::before{content:"\2713";color:var(--ok);font-weight:800;flex:none}

  /* numbered process steps */
  .steps{margin-top:38px;counter-reset:step}
  .step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .step .n{counter-increment:step;width:38px;height:38px;border-radius:11px;background:rgba(88,169,199,.16);color:var(--sage-2);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex:none}
  .step .n::before{content:counter(step,decimal-leading-zero)}
  .step h3{margin-bottom:5px}
  .step p{color:var(--text-soft);font-size:.95rem}

  /* pricing tiers */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;align-items:stretch}
  @media(max-width:900px){.tiers{grid-template-columns:1fr}}
  .tier{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column}
  .tier.featured{border-color:var(--sage);box-shadow:var(--panel-shadow)}
  .tier .flag{display:inline-block;background:linear-gradient(135deg,var(--sage),var(--sage-2));color:var(--on-accent);font-weight:700;font-size:.7rem;letter-spacing:.05em;padding:5px 11px;border-radius:99px;margin-bottom:12px}
  .tier h3{font-size:1.3rem}
  .tier .who{color:var(--text-soft);font-size:.92rem;margin-top:6px}
  .price-slot{border:2px dashed #3d7a95;background:rgba(88,169,199,.10);border-radius:11px;padding:14px;text-align:center;color:var(--sage-2);font-weight:700;font-size:.95rem;margin:18px 0}
  .price-slot small{display:block;font-weight:500;color:var(--text-soft);margin-top:5px;font-size:.78rem}
  .tier .checks{flex:1}
  .tier .btn{margin-top:22px;text-align:center}

  /* comparison table */
  .tbl-scroll{overflow-x:auto;margin-top:38px;border:1px solid var(--line);border-radius:var(--radius)}
  table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:.93rem}
  table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
  table.cmp thead th{background:var(--bg-2);font-weight:700;font-size:.85rem;letter-spacing:.02em}
  table.cmp tbody tr:last-child td{border-bottom:0}
  table.cmp td:not(:first-child),table.cmp thead th:not(:first-child){text-align:center}
  table.cmp td:not(:first-child){color:var(--text-soft)}
  table.cmp .yes{color:var(--ok);font-weight:800}
  table.cmp .no{opacity:.35}

  /* industries */
  .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
  @media(max-width:860px){.ind-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.ind-grid{grid-template-columns:1fr}}
  .ind{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .15s,transform .15s}
  .ind:hover{border-color:var(--card-hover-border);transform:translateY(-3px);box-shadow:var(--card-hover-shadow)}
  .ind .ico{font-size:1.5rem;margin-bottom:12px;display:block}
  a.ind{display:block;text-decoration:none;color:inherit}
  .ind h3{font-size:1.05rem;margin-bottom:6px}
  .ind .more{display:inline-block;margin-top:12px;font-size:.82rem;font-weight:700;color:var(--brand)}
  a.ind:hover .more{text-decoration:underline}
  .ind p{color:var(--text-soft);font-size:.9rem}

  /* resources / article cards */
  .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
  @media(max-width:860px){.res-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.res-grid{grid-template-columns:1fr}}
  .res{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
  .res:hover{border-color:var(--card-hover-border);transform:translateY(-3px);box-shadow:var(--card-hover-shadow)}
  .res .thumb{aspect-ratio:16/9;background:#000;border-bottom:1px solid var(--line)}
  .res .thumb iframe{width:100%;height:100%;border:0;display:block}
  .res .body{padding:20px;flex:1;display:flex;flex-direction:column}
  .res .kind{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--sage-2);margin-bottom:8px}
  .res h3{font-size:1.02rem;margin-bottom:7px}
  .res p{color:var(--text-soft);font-size:.9rem;flex:1}

  /* FAQ */
  .faq{margin-top:34px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;padding:18px 40px 18px 0;font-weight:700;font-size:1.02rem;list-style:none;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:8px;top:15px;font-size:1.5rem;font-weight:400;color:var(--sage-2);line-height:1}
  .faq details[open] summary::after{content:"\2212"}
  .faq summary:hover{color:var(--sage-2)}
  .faq .a{padding:0 40px 20px 0;color:var(--text-soft);font-size:.96rem}

  /* about: values */
  .vals{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:38px}
  @media(max-width:800px){.vals{grid-template-columns:1fr}}
  .val{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--sage);border-radius:12px;padding:22px}
  .val h3{margin-bottom:7px}
  .val p{color:var(--text-soft);font-size:.94rem}

  /* contact */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
  @media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:34px}}
  .cinfo{display:grid;gap:16px;margin-top:24px}
  .cinfo .row{display:flex;gap:14px;align-items:flex-start;background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:18px}
  .cinfo .ico{width:38px;height:38px;flex:none;border-radius:10px;background:rgba(88,169,199,.16);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
  .cinfo h3{font-size:.98rem;margin-bottom:3px}
  .cinfo p{font-size:.92rem;color:var(--text-soft)}
  .cinfo a{color:var(--brand);font-weight:600;font-size:.92rem}

  /* closing CTA band */
  .cta-band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
  .cta-band .inner{max-width:760px;margin:0 auto}
  .cta-band p{color:var(--text-soft);margin-top:14px}
  .cta-band .cta-row{margin-top:26px;justify-content:center}

  /* richer footer for a multi-page site */
  .foot-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid var(--line)}
  @media(max-width:800px){.foot-nav{grid-template-columns:1fr 1fr;gap:24px}}
  .foot-nav h4{font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--text);margin-bottom:12px;text-transform:uppercase}
  .foot-nav ul{list-style:none;display:grid;gap:9px}
  .foot-nav a{color:var(--text-soft);font-size:.9rem;font-weight:500}
  .foot-nav a:hover{color:var(--sage-2)}

  /* keep the three pricing price-blocks on one line despite the featured
     badge and uneven subtitle lengths */
  .tier .flag.ghost{visibility:hidden}
  .tier .who{min-height:4.5em}
  .tier .price-slot{min-height:86px;display:flex;flex-direction:column;justify-content:center}
  @media(max-width:900px){.tier .flag.ghost{display:none}.tier .who{min-height:0}.tier .price-slot{min-height:0}}

  /* ===================================================================
     REFINEMENT PASS — images, video facades, a11y, motion
     =================================================================== */

  /* skip link: first tab stop on every page */
  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--bg-3);color:var(--text);border:1px solid var(--sage);border-radius:0 0 10px 0;padding:12px 18px;font-weight:700;font-size:.92rem}
  .skip:focus{left:0}

  /* visible keyboard focus everywhere (there was none before) */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.vf:focus-visible{outline:2px solid var(--sage-2);outline-offset:3px;border-radius:6px}

  /* logo lockup with the brand mark */
  .logo{display:inline-flex;align-items:center}

  /* ---- video facade -------------------------------------------------
     Replaces eleven eagerly-loaded YouTube iframes across the site. Each
     one shipped ~1MB of player JS and contacted YouTube on page load; now
     a local thumbnail stands in and the real youtube-nocookie iframe is
     injected on click. Faster, and nothing reaches YouTube until a
     visitor actually asks for the video. */
  .vf{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden;border-radius:12px;aspect-ratio:16/9;line-height:0}
  .vf img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease,opacity .2s ease}
  .vf:hover img{transform:scale(1.035);opacity:.86}
  .vf .vf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(88,169,199,.55);transition:transform .2s ease,background .2s ease;pointer-events:none}
  .vf:hover .vf-play{transform:translate(-50%,-50%) scale(1.08);background:var(--sage-2)}
  .vf .vf-play::before{content:"";border-left:19px solid var(--on-accent);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
  .vf iframe{width:100%;height:100%;border:0;display:block}
  /* once activated the button becomes a plain frame */
  .vf.is-playing{cursor:default}
  .vf.is-playing:hover img{transform:none}

  /* hero facade sits inside the sage panel, which already rounds corners */
  .sage-panel .vf{border:1px solid var(--line)}

  /* ---- inline illustration panels ---- */
  .illus{background:linear-gradient(155deg,#0c2443,#08192f);border:1px solid #1d3f66;border-radius:var(--radius);padding:20px;display:flex;align-items:center;justify-content:center}
  .illus img{width:100%;height:auto;max-width:520px;display:block}
  .illus-cap{margin-top:12px;font-size:.82rem;color:var(--text-soft);text-align:center;line-height:1.4}

  /* ---- industry icons (were emoji, which render differently per OS) ---- */
  .ind .ico{width:38px;height:38px;border-radius:10px;background:rgba(88,169,199,.16);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .ind .ico svg{width:21px;height:21px;stroke:var(--sage-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  /* contact info icons, same treatment */
  .cinfo .ico svg{width:18px;height:18px;stroke:var(--sage-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

  /* team avatars: gradient ring so the initials read as designed, not broken */
  .avatar{position:relative;background:linear-gradient(150deg,rgba(88,169,199,.28),rgba(148,205,223,.28));border:2px solid transparent;background-clip:padding-box}
  .member{transition:border-color .15s,transform .15s}
  .member:hover{border-color:var(--card-hover-border);transform:translateY(-3px);box-shadow:var(--card-hover-shadow)}

  /* images never overflow their column */
  img{max-width:100%}

  /* respect a reduced-motion preference: kill transforms, keep colour changes */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
    .btn-primary:hover,.btn-sage:hover,.card:hover,.ind:hover,.res:hover,.member:hover,.vid:hover,.vf:hover img,.vf:hover .vf-play{transform:none}
  }

  /* facade corners differ by context now that the old frame wrappers are gone */
  .res .vf{border-radius:0;border-bottom:1px solid var(--line)}

  .illus-fig{margin:20px 0 0}
  .illus-fig .illus{padding:18px}
  .offer .illus-fig{margin:18px 0 4px}

  /* the header is sticky and 72px tall, so anchor targets must not land under it */
  :target,section[id],[id].offer,[id].card{scroll-margin-top:88px}

  /* real headshots replaced the initials avatars */
  img.avatar{display:block;object-fit:cover;padding:0;border:2px solid var(--sage);background:var(--bg-2)}

  /* ==========================================================================
     MOTION
     Ported from main-site (app/globals.css + components/ui/Reveal.tsx) so the
     two sites move the same way. Everything here is transform, opacity or
     filter only, so it stays on the compositor and never triggers layout.
     ========================================================================== */

  /* Scroll reveal is gated behind .reveal-ready on <html>: nothing is hidden
     until something is actually able to reveal it again. No-JS, a failed
     script or a crawler therefore can never be served a blank page, which is
     the usual way this pattern loses content. */
  /* Reveal character is a VERBATIM PORT of main-site — same numbers, same
     easing, so vizibleagency.com and this site move identically. Source of
     truth: main-site app/globals.css, "html.reveal-ready [data-reveal]".
     Do not "improve" these in isolation; change them in both or neither.

     The 3px blur and the 0.75s transform are the load-bearing pair. Two
     earlier attempts here got this wrong in both directions: pushing to 64px
     with blur(5px) over 0.95s read as heavy and theatrical, and then stripping
     the blur and scale while cutting to 0.5s read as abrupt. The softness is
     what makes it feel considered — it is a slow focus-in, not a slide. */
  html.reveal-ready [data-reveal]{
    opacity:0;
    transform:translate3d(0,26px,0) scale(.985);
    filter:blur(3px);
    transition:opacity .65s var(--ease-out-soft),transform .75s var(--ease-out-soft),filter .5s var(--ease-out-soft);
    transition-delay:var(--reveal-delay,0ms);
    will-change:opacity,transform,filter;
  }
  html.reveal-ready [data-reveal="left"]{transform:translate3d(-34px,0,0)}
  html.reveal-ready [data-reveal="right"]{transform:translate3d(34px,0,0)}
  html.reveal-ready [data-reveal="scale"]{transform:scale(.955)}
  html.reveal-ready [data-reveal="fade"]{transform:none;filter:blur(2px)}
  html.reveal-ready [data-reveal].is-revealed{opacity:1;transform:none;filter:none;will-change:auto}

  /* Escape hatch. The head snippet sets this if the reveal runtime never
     reports in, switching the hiding layer off rather than risking a page
     that sits blank. */
  html.reveal-off [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}

  /* Grid children cascade by position instead of snapping in together. The
     curve flattens after the first few so a twelve-item grid does not take
     most of a second to finish. */
  [data-stagger]>[data-reveal]:nth-child(2){--reveal-delay:80ms}
  [data-stagger]>[data-reveal]:nth-child(3){--reveal-delay:140ms}
  [data-stagger]>[data-reveal]:nth-child(4){--reveal-delay:200ms}
  [data-stagger]>[data-reveal]:nth-child(5){--reveal-delay:260ms}
  [data-stagger]>[data-reveal]:nth-child(6){--reveal-delay:300ms}
  [data-stagger]>[data-reveal]:nth-child(7){--reveal-delay:330ms}
  [data-stagger]>[data-reveal]:nth-child(8){--reveal-delay:350ms}
  [data-stagger]>[data-reveal]:nth-child(n+9){--reveal-delay:360ms}

  /* A run of revealed siblings outside a grid — eyebrow, heading, lead, CTA
     row — cascades the same way without needing a wrapper. */
  [data-reveal]+[data-reveal]{--reveal-delay:80ms}
  [data-reveal]+[data-reveal]+[data-reveal]{--reveal-delay:140ms}
  [data-reveal]+[data-reveal]+[data-reveal]+[data-reveal]{--reveal-delay:200ms}

  /* Slow drift across the hero wash, so the background is never quite static.
     Translation only, no scale: the layer is inset:0 and unclipped, and
     scaling it would bleed the gradient past the section edge. */
  @keyframes aurora{
    0%,100%{transform:translate3d(0,0,0);opacity:.85}
    33%{transform:translate3d(3%,-2%,0);opacity:1}
    66%{transform:translate3d(-2%,2%,0);opacity:.72}
  }
  .hero{position:relative;isolation:isolate}
  .hero>*{position:relative;z-index:1}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(680px 420px at 78% 6%,rgba(88,169,199,.22),transparent 62%);
    animation:aurora 22s var(--ease-inout-soft) infinite}
  [data-theme="light"] .hero::before{background:radial-gradient(680px 420px at 78% 6%,rgba(88,169,199,.15),transparent 62%)}

  /* Light sweeping across the primary CTA on hover. */
  @keyframes sweep-across{
    0%{opacity:0;transform:skewX(-18deg) translate3d(0,0,0)}
    12%{opacity:1}
    100%{opacity:0;transform:skewX(-18deg) translate3d(360%,0,0)}
  }
  .btn-sage{position:relative;overflow:hidden}
  .btn-sage::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
    transform:skewX(-18deg) translate3d(0,0,0);pointer-events:none;opacity:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent)}
  .btn-sage:hover::after{animation:sweep-across .85s var(--ease-out-soft)}

  @media (prefers-reduced-motion: reduce){
    /* This has to come after the global reduced-motion block, which zeroes
       every transition and animation duration. That alone would freeze the
       entry blur in place rather than remove it, leaving every revealed
       element permanently out of focus for anyone asking for less motion.
       Clearing filter here is what prevents that — it is not optional. */
    html.reveal-ready [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
    .hero::before{animation:none}
    .btn-sage:hover::after{animation:none}
  }

  /* ==========================================================================
     BLOG — index cards, article layout, prose
     Generated pages (public/blog/*) are the only consumers of this block.
     Everything is built from the existing tokens so the blog follows the
     dark/light toggle with no extra work.
     ========================================================================== */

  /* ---- category chips ----
     On the index and on every hub these are real links to /blog/category/<slug>,
     which is what carries link equity to the hubs; only the hub you are already
     on renders as a span. Both shapes share the class, so the box model lives
     here rather than being split across two rules. */
  .cat-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
  .cat-chip{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
    letter-spacing:.03em;color:var(--sage-2);text-decoration:none;
    background:rgba(88,169,199,.14);border:1px solid var(--line);border-radius:99px;padding:5px 12px;
    transition:border-color .15s,background .15s}
  a.cat-chip:hover{border-color:var(--card-hover-border);background:rgba(88,169,199,.26)}
  .cat-chip b{font-weight:800;font-size:.7rem;opacity:.62}
  /* --on-accent is navy on dark and white on light, which is the pairing that
     clears contrast against --sage-2 in both themes. Do not hardcode either. */
  .cat-chip.is-current{background:var(--sage-2);color:var(--on-accent);border-color:transparent}
  .cat-chip.is-current b{opacity:.78}

  /* ---- category hub: the intro copy that makes a hub worth indexing ---- */
  .cat-intro{max-width:70ch;margin-top:4px;display:flex;flex-direction:column;gap:14px}
  .cat-intro p{color:var(--text-soft);font-size:1rem;line-height:1.7}

  /* an article's eyebrow doubles as the link back to its category hub */
  .eyebrow-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
  .eyebrow-link:hover{border-bottom-color:currentColor}

  /* ---- post cards ---- */
  .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
  @media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.post-grid{grid-template-columns:1fr}}
  .post{display:flex;flex-direction:column;gap:9px;background:var(--bg-3);border:1px solid var(--line);
    border-radius:var(--radius);padding:22px;transition:border-color .15s,transform .15s,box-shadow .15s}
  .post:hover{border-color:var(--card-hover-border);transform:translateY(-3px);box-shadow:var(--card-hover-shadow)}
  .post h2,.post h3{font-size:1.08rem;line-height:1.25}
  .post p{color:var(--text-soft);font-size:.9rem;flex:1}
  .post-cat{font-size:.71rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-2)}
  .post-meta{font-size:.8rem;color:var(--text-soft)}
  .post-meta i{opacity:.5;margin:0 5px;font-style:normal}
  /* the newest post gets the wide slot above the grid */
  .post-lead{margin-top:30px;padding:30px;gap:12px}
  .post-lead h2{font-size:clamp(1.4rem,2.6vw,2rem)}
  .post-lead p{font-size:1rem;max-width:70ch}

  /* ---- article: hero meta ---- */
  .article-hero h1{max-width:22ch}
  .article-hero p.lead{max-width:68ch}
  .article-meta{margin-top:18px;font-size:.86rem;color:var(--text-soft)}
  .article-meta i{opacity:.5;margin:0 6px;font-style:normal}

  /* ---- article: two-column with a sticky contents rail ---- */
  .article-wrap{padding-top:44px}
  .article-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:52px;align-items:start}
  @media(max-width:960px){.article-grid{grid-template-columns:minmax(0,1fr);gap:28px}}
  /* the grid is align-items:start, which sizes this column to its content —
     sticky then has no track to travel along and the rail scrolls away on the
     first screen. Stretching the column is what gives it somewhere to stick. */
  .toc{align-self:stretch}
  .toc-inner{position:sticky;top:96px}
  @media(max-width:960px){
    .toc-inner{position:static;border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--bg-2)}
  }
  .toc h2{font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--text-soft);font-family:var(--font);margin-bottom:12px}
  .toc ol{list-style:none;display:grid;gap:9px}
  .toc a{font-size:.87rem;color:var(--text-soft);line-height:1.35;display:block;
    border-left:2px solid var(--line);padding-left:12px;transition:color .15s,border-color .15s}
  .toc a:hover{color:var(--text);border-left-color:var(--sage)}

  /* ---- article: prose ---- */
  /* min-width:0 because .prose is a grid item: the default min-width:auto
     makes it refuse to shrink below its widest child, so one long unbreakable
     token scrolls the whole PAGE rather than being contained. */
  .prose{max-width:72ch;font-size:1.02rem;min-width:0}
  .prose > h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:44px 0 14px;scroll-margin-top:96px}
  .prose > h2:first-child{margin-top:0}
  .prose h3{font-size:1.14rem;margin:30px 0 10px}
  .prose p{color:var(--text-soft);margin-bottom:16px;line-height:1.72}
  .prose strong{color:var(--text);font-weight:700}
  /* :not(.btn) matters — without it this rule (0-1-1) outranks .btn-sage
     (0-1-0) and repaints the in-article CTA button with the link colour,
     which is unreadable in light and near-invisible in dark. Any future
     button placed inside .prose depends on this exclusion. */
  .prose a:not(.btn){color:var(--brand);font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s}
  .prose a:not(.btn):hover{border-bottom-color:var(--sage)}
  .prose ul,.prose ol{margin:0 0 18px 0;padding-left:22px;display:grid;gap:9px;color:var(--text-soft)}
  .prose li{line-height:1.66}
  .prose li::marker{color:var(--sage)}
  /* overflow-wrap:anywhere — code spans carry URLs and schema identifiers with
     no natural break opportunity, and one of them is wider than a phone. */
  .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
    background:rgba(88,169,199,.13);border-radius:5px;padding:2px 6px;color:var(--text);
    overflow-wrap:anywhere}
  .prose blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--sage)}
  .prose blockquote p{color:var(--text);font-size:1.06rem;font-style:italic;margin-bottom:6px}
  .prose blockquote cite{font-style:normal;font-size:.85rem;color:var(--text-soft)}

  /* wide tables scroll inside their own box rather than the page */
  .table-scroll{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:var(--radius)}
  .prose table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:460px}
  .prose th,.prose td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top}
  .prose th{background:var(--bg-2);font-weight:700;color:var(--text);white-space:nowrap}
  .prose td{color:var(--text-soft)}
  .prose tbody tr:last-child td{border-bottom:0}

  /* ---- key takeaways: the block AI assistants and snippets lift ---- */
  .takeaways{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--sage);
    border-radius:var(--radius);padding:22px 24px;margin-bottom:38px}
  .takeaways h2{font-size:.76rem!important;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
    color:var(--sage-2);font-family:var(--font);margin:0 0 12px!important}
  .takeaways ul{margin:0;padding-left:20px;display:grid;gap:10px}
  .takeaways li{color:var(--text);line-height:1.6;font-size:.95rem}

  /* ---- pull-aside callout ---- */
  .callout{background:rgba(88,169,199,.09);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px 20px;margin:0 0 22px}
  .callout b{display:block;color:var(--text);font-size:.95rem;margin-bottom:5px}
  .callout p{margin:0;font-size:.93rem}

  /* ---- FAQ ---- */
  /* reset the two properties the page-level .faq rule would otherwise leak in */
  .prose .faq{display:grid;gap:10px;margin-bottom:8px;margin-top:0;border-top:0}
  .prose .faq details{background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:0}
  .prose .faq summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--text);font-size:.96rem;
    list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
  .prose .faq summary::-webkit-details-marker{display:none}
  .prose .faq summary::after{content:"+";color:var(--sage-2);font-weight:800;font-size:1.2rem;line-height:1;flex:none;position:static}
  .prose .faq details[open] summary::after{content:"\2212"}
  .prose .faq details[open] summary{border-bottom:1px solid var(--line)}
  .prose .faq p{margin:0;padding:14px 18px 16px;font-size:.93rem}

  /* ---- end-of-article CTA ---- */
  .article-cta{margin-top:46px;padding:28px;background:var(--bg-2);border:1px solid var(--line);
    border-radius:var(--radius)}
  .article-cta h2{font-size:1.3rem!important;margin:0 0 8px!important}
  .article-cta p{margin-bottom:18px}

  /* ---- homepage CRO additions ---- */
  /* hero trust strip: three verifiable facts under the CTAs */
  .trust-strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:26px;padding:0}
  .trust-strip li{position:relative;padding-left:19px;font-size:.88rem;color:var(--text-soft);line-height:1.45}
  .trust-strip li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--sage)}
  .trust-strip b{color:var(--text);font-weight:700}

  /* mid-page conversion band. .cta-band is centred by default (about.html uses
     it that way); this variant is a left-aligned two-column so the homepage
     does not centre a third thing in a row. */
  .cta-band-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;
    align-items:center;text-align:left}
  .cta-band-inner p{max-width:60ch}
  .cta-band-inner .cta-row{justify-content:flex-start;margin-top:0;flex:none}
  @media(max-width:860px){
    .cta-band-inner{grid-template-columns:1fr}
    .cta-band-inner .cta-row{margin-top:4px}
  }