/* =============================================================================
   SHERIFY V3 — Design system
   -----------------------------------------------------------------------------
   One stylesheet for the redesigned marketing site. Deliberately independent of
   sherify.css / premium-v2.css so the redesign can be reviewed and reverted as a
   unit; the legacy sheets still serve the product surfaces (/review, /reviewer,
   /investigation, /proposal) which this redesign does not touch.

   Order: tokens -> reset -> primitives -> layout -> components -> pages -> a11y.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* Ground. Deep black through charcoal. Every surface is one of these five. */
  --ink-1000:#050507;
  --ink-900:#08080B;
  --ink-850:#0C0C11;
  --ink-800:#111117;
  --ink-750:#16161D;
  --ink-700:#1C1C24;

  /* Warm metallic Sherify gold. The gradient is the brand's metal; the flats
     are for text and hairlines where a gradient would smear. */
  --gold-050:#FBF3DE;
  --gold-100:#F6E6BA;
  --gold-200:#EFD79B;
  --gold-300:#E3C177;
  --gold-400:#D3A855;
  --gold-500:#B98A34;
  --gold-600:#8E6722;
  --metal:linear-gradient(135deg,#FBF1D6 0%,#E7CB8B 26%,#C89A42 54%,#8E6722 72%,#EFD79B 100%);
  --metal-soft:linear-gradient(135deg,#F6E6BA,#D3A855 60%,#B98A34);

  /* Type colours */
  --paper:#F6F3EC;
  --text:#E9E5DC;
  --text-2:#B9B4AA;
  /* Both tones clear WCAG AA (4.5:1) against every ground in this palette,
     including the lightest card surface. --faint carries real content
     (product status, evidence labels), so it may not be decorative-dim. */
  --muted:#A19C92;
  --faint:#8A857C;

  /* Lines + glow */
  --hair:rgba(227,193,119,.16);
  --hair-2:rgba(255,255,255,.07);
  --glow:rgba(211,168,85,.22);
  --glow-soft:rgba(211,168,85,.10);

  /* Vertical accents — from the approved five-vertical brand board */
  --cravuno:#FF6A00;
  --cravuno-2:#FF3B00;
  --chairready:#00E5D8;
  --chairready-2:#00B4A7;
  --counvera:#A855F7;
  --counvera-2:#8B5CF6;
  --estavanta:#00A3FF;
  --estavanta-2:#007BFF;
  --knockflow:#00D1FF;
  --knockflow-2:#00B4E6;

  /* Semantic states used by the Ask Sherify surfaces */
  --state-needs:#E3C177;
  --state-handled:#5FD1A0;
  --state-opp:#7FB4FF;

  /* Geometry */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --wrap:1240px;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,9vw,8.5rem);

  /* Type scale — fluid, capped so 1440 stays composed rather than shouty */
  --t-eyebrow:clamp(.66rem,.72vw,.75rem);
  --t-sm:clamp(.82rem,.9vw,.9rem);
  --t-body:clamp(.95rem,1.02vw,1.045rem);
  --t-lede:clamp(1.02rem,1.2vw,1.16rem);
  --t-h3:clamp(1.22rem,1.7vw,1.5rem);
  --t-h2:clamp(1.85rem,3.5vw,3rem);
  --t-h1:clamp(2.45rem,5.6vw,4.35rem);

  --font:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  --shadow-sm:0 2px 14px rgba(0,0,0,.4);
  --shadow-md:0 18px 46px rgba(0,0,0,.55);
  --shadow-lg:0 40px 90px rgba(0,0,0,.62);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.v3{
  margin:0;
  background:var(--ink-900);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
/* display:block above beats the UA rule for [hidden], so restore it. */
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--paper)}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(211,168,85,.28);color:#fff}

/* ------------------------------------------------------------- primitives -- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.eyebrow{
  display:inline-block;font-size:var(--t-eyebrow);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300);
}
.eyebrow--muted{color:var(--muted)}
.eyebrow--accent{color:var(--accent,var(--gold-300))}

.h1{font-size:var(--t-h1);letter-spacing:-.032em;line-height:1.02}
.h2{font-size:var(--t-h2);letter-spacing:-.025em;line-height:1.08}
.h3{font-size:var(--t-h3);letter-spacing:-.015em;line-height:1.2}
.lede{font-size:var(--t-lede);color:var(--text-2);line-height:1.66;max-width:60ch}
.small{font-size:var(--t-sm);color:var(--muted);line-height:1.6}
.gold{
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.script{
  font-family:var(--serif);font-style:italic;font-weight:500;
  color:var(--gold-200);letter-spacing:0;line-height:1.15;
}

/* Buttons ------------------------------------------------------------------ */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:50px;padding:.85rem 1.5rem;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             background-color .28s var(--ease),border-color .28s var(--ease),color .2s;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--gold-200);outline-offset:3px}

.btn--gold{background:var(--metal);color:#1A1305;box-shadow:0 10px 30px rgba(184,138,52,.24)}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(184,138,52,.34)}

.btn--ghost{border-color:var(--hair);color:var(--paper);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--gold-400);background:rgba(211,168,85,.07);transform:translateY(-2px)}

.btn--accent{background:var(--accent,var(--gold-400));color:#06080B;font-weight:700}
.btn--accent:hover{transform:translateY(-2px);filter:brightness(1.08)}

.btn--accent-ghost{border-color:color-mix(in srgb,var(--accent,var(--gold-400)) 45%,transparent);color:var(--accent,var(--gold-300))}
.btn--accent-ghost:hover{background:color-mix(in srgb,var(--accent,var(--gold-400)) 12%,transparent);transform:translateY(-2px)}

.btn--sm{min-height:42px;padding:.6rem 1.1rem}
.btn--block{width:100%}

.textlink{
  display:inline-flex;align-items:center;gap:.45em;color:var(--gold-200);
  text-decoration:none;font-weight:600;font-size:var(--t-sm);
  letter-spacing:.04em;border-bottom:1px solid rgba(227,193,119,.3);padding-bottom:2px;
}
.textlink svg{width:15px;height:15px;flex:none;transition:transform .28s var(--ease)}
.textlink:hover svg{transform:translateX(3px)}
.textlink:hover{border-color:var(--gold-300)}

/* Sections ----------------------------------------------------------------- */
.sec{padding-block:var(--sec-y);position:relative}
.sec--panel{background:var(--ink-850);border-block:1px solid var(--hair-2)}
.sec--deep{background:var(--ink-1000)}
.sec--tight{padding-block:clamp(3rem,5.5vw,5rem)}
.sec__head{max-width:64ch;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.sec__head .h2{margin-top:.9rem}
.sec__head .lede{margin-top:1.1rem}
.sec__head--split{
  max-width:none;display:grid;gap:clamp(1.2rem,3vw,3.5rem);align-items:end;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
}
/* Split heads live in a ~600px column. At the top of the h2 scale a two-
   sentence headline orphans its last word, so cap it one step lower. */
.sec__head--split .h2{font-size:clamp(1.75rem,2.9vw,2.6rem)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head--center .lede{margin-inline:auto}

/* A single restrained gold bloom, used at most once per section. */
.bloom{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bloom::before{
  content:"";position:absolute;left:50%;top:-30%;width:min(1100px,120%);aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%,var(--glow-soft),transparent 62%);
}

/* ------------------------------------------------------------- navigation -- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;padding:.9rem 1.2rem;
  background:var(--gold-300);color:#12100A;border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip:focus{left:0;outline:2px solid #12100A;outline-offset:-4px}

/* Every interactive element gets a visible ring by default; components below
   may restyle it, but none may remove it. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold-200);outline-offset:3px;border-radius:4px;
}

.nav{
  position:sticky;top:0;z-index:90;
  background:rgba(8,8,11,.72);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s;
}
.nav.is-stuck{border-bottom-color:var(--hair-2);background:rgba(8,8,11,.9)}
.nav__inner{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem);min-height:74px}
.brand{display:inline-flex;align-items:center;gap:.62rem;text-decoration:none;flex:none}
.brand img{width:38px;height:38px;object-fit:contain}
.brand__word{
  font-size:1.02rem;font-weight:700;letter-spacing:.2em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav__links{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.9rem);margin-left:auto}
.nav__links a{
  position:relative;text-decoration:none;color:var(--text-2);font-size:var(--t-sm);
  font-weight:500;letter-spacing:.01em;padding:.4rem 0;transition:color .22s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--metal-soft);transition:right .3s var(--ease);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__links a[aria-current="page"]{color:var(--paper)}
.nav__cta{display:flex;align-items:center;gap:.6rem;flex:none}

.burger{
  display:none;width:46px;height:46px;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;
}
.burger span{display:block;width:18px;height:1.5px;background:var(--gold-200);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobilenav{
  position:fixed;inset:74px 0 0;z-index:89;background:var(--ink-1000);
  padding:1.6rem var(--gutter) 2.4rem;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.mobilenav[data-open="true"]{opacity:1;transform:none;visibility:visible}
.mobilenav__group + .mobilenav__group{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--hair-2)}
.mobilenav__label{font-size:var(--t-eyebrow);letter-spacing:.24em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:.9rem}
.mobilenav a{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 0;text-decoration:none;color:var(--paper);font-size:1.06rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.mobilenav a span{font-size:var(--t-sm);color:var(--muted);font-weight:400}
.mobilenav .btn{margin-top:1.6rem}
body.nav-open{overflow:hidden}

/* ------------------------------------------------------------------- hero -- */
.hero{position:relative;padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6.5rem);overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__bg::before{
  content:"";position:absolute;right:-8%;top:-18%;width:min(980px,88%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(211,168,85,.16),transparent 60%);
}
.hero__bg::after{
  content:"";position:absolute;left:-14%;bottom:-24%;width:min(720px,70%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(120,90,30,.10),transparent 62%);
}
.hero__grid{
  position:relative;display:grid;gap:clamp(2.4rem,4.5vw,3.6rem);align-items:center;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
}
.hero__copy .h1{margin-top:1.1rem}
.hero__copy .lede{margin-top:1.4rem}
.hero__brandline{
  margin-top:1.5rem;font-size:var(--t-sm);font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-300);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero__pillars{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  margin-top:2.6rem;padding-top:1.7rem;border-top:1px solid var(--hair-2);
}
.hero__pillars b{
  display:block;font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-200);font-weight:600;
}
.hero__pillars span{display:block;font-size:var(--t-sm);color:var(--muted);margin-top:.3rem;line-height:1.4}

/* Intelligence core --------------------------------------------------------- */
.hero__stage{position:relative;display:grid;gap:1.1rem}
.core{position:relative;aspect-ratio:1/.75;width:100%}
.core__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.core__ring .ring{fill:none;stroke:rgba(227,193,119,.2);stroke-width:.35}
.core__ring .ring--2{stroke:rgba(227,193,119,.11)}
.core__ring .core__spoke{stroke:rgba(227,193,119,.16);stroke-width:.28}
.core__orb{
  position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 44px rgba(211,168,85,.42));
}
.core__orb img{width:100%}
.chip{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  padding:.5rem .8rem;border-radius:var(--r-sm);
  background:linear-gradient(180deg,rgba(28,28,36,.94),rgba(14,14,19,.94));
  border:1px solid var(--hair);box-shadow:var(--shadow-sm);
  font-size:.735rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text);
}
.chip svg{width:14px;height:14px;color:var(--gold-300);flex:none}
.chip--lit{border-color:rgba(227,193,119,.42);box-shadow:0 0 0 1px rgba(227,193,119,.1),0 8px 26px rgba(0,0,0,.5)}
.core__grid,.core__grid-orb{display:none}

/* Ask Sherify panel --------------------------------------------------------- */
.ask{
  border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(22,22,29,.96),rgba(10,10,14,.98));
  box-shadow:var(--shadow-md);
}
.ask__chrome{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1.05rem;border-bottom:1px solid var(--hair-2);
  background:rgba(255,255,255,.02);
}
.ask__chrome b{
  font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-200);font-weight:600;display:inline-flex;align-items:center;gap:.5rem;
}
.ask__chrome b img{width:18px;height:18px}
.ask__chrome small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ask__body{padding:1.1rem}

.ask__q{
  display:inline-block;max-width:88%;padding:.6rem .95rem;border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;
  background:rgba(227,193,119,.1);border:1px solid rgba(227,193,119,.2);
  font-size:var(--t-sm);color:var(--gold-050);
}
.ask__a{
  margin-top:.85rem;padding:.95rem 1.05rem;border-radius:var(--r-md);
  background:rgba(255,255,255,.028);border:1px solid var(--hair-2);
}
.ask__a small{
  display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300);margin-bottom:.5rem;
}
.ask__a strong{display:block;color:var(--paper);font-size:1.02rem;font-weight:600;line-height:1.35}
.ask__a p{margin-top:.45rem;font-size:var(--t-sm);color:var(--text-2)}

.ask__states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.9rem}
.state{
  padding:.7rem .75rem;border-radius:var(--r-sm);border:1px solid var(--hair-2);
  background:rgba(255,255,255,.022);
}
.state small{display:block;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.state b{display:block;margin-top:.25rem;font-size:1.32rem;font-weight:600;line-height:1;color:var(--paper)}
.state--needs{border-color:rgba(227,193,119,.34)}
.state--needs b{color:var(--state-needs)}
.state--handled b{color:var(--state-handled)}
.state--opp b{color:var(--state-opp)}

.ask__evidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.75rem}
.ask__evidence div{padding:.55rem .7rem;border-radius:var(--r-xs);background:rgba(255,255,255,.02)}
.ask__evidence small{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ask__evidence b{display:block;font-size:.82rem;font-weight:500;color:var(--text)}

.ask__foot{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  padding:.7rem 1.05rem;border-top:1px solid var(--hair-2);background:rgba(255,255,255,.018);
}
.ask__foot span{font-size:.76rem;color:var(--muted)}
.ask__foot b{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-200);
  border:1px solid rgba(227,193,119,.32);border-radius:var(--r-pill);padding:.28rem .7rem;
}

/* Prepared -> Approved -> Executed -> Verified */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.9rem}
.chain li{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .72rem;border-radius:var(--r-pill);
  border:1px solid var(--hair-2);font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.chain li[data-on="true"]{border-color:rgba(227,193,119,.4);color:var(--gold-100);background:rgba(227,193,119,.08)}
.chain .sep{color:var(--faint);font-size:.7rem}

.demo-note{
  margin-top:.85rem;font-size:.74rem;color:var(--faint);display:flex;align-items:center;gap:.45rem;
}
.demo-note::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-400);flex:none;
}

/* --------------------------------------------------------- signal section -- */
.signals{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:center}
/* The headline is two full sentences; at the top of the h2 scale it breaks
   mid-sentence in this column. Cap it a step lower. */
.signals .h2{font-size:clamp(1.75rem,2.9vw,2.5rem)}
.signals__cloud{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.signals__cloud span{
  padding:.5rem .9rem;border-radius:var(--r-pill);border:1px solid var(--hair-2);
  background:rgba(255,255,255,.02);font-size:var(--t-sm);color:var(--text-2);
}
.signals__close{margin-top:1.8rem;font-weight:600;color:var(--gold-100);font-size:var(--t-lede)}
.signals__art{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair-2)}
.signals__art img{width:100%;aspect-ratio:4/3.1;object-fit:cover;filter:saturate(.72) contrast(1.05) brightness(.78)}
.signals__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(8,8,11,.1) 20%,rgba(8,8,11,.85));
}
.signals__script{
  position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:2;
  font-size:clamp(1.4rem,2.6vw,2.05rem);text-align:right;
}

/* ------------------------------------------------------------ ask section -- */
.askdemo{display:grid;gap:clamp(2rem,4vw,3.2rem);grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:start}
.prompts{display:grid;gap:.5rem;margin-top:1.8rem}
.prompt{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  padding:.85rem 1.05rem;border-radius:var(--r-md);border:1px solid var(--hair-2);
  background:rgba(255,255,255,.022);color:var(--text);text-align:left;cursor:pointer;
  font-size:var(--t-sm);transition:border-color .24s,background-color .24s,transform .24s var(--ease);
}
.prompt:hover{border-color:rgba(227,193,119,.34);transform:translateX(3px)}
.prompt[aria-selected="true"]{
  border-color:rgba(227,193,119,.5);background:rgba(227,193,119,.09);color:var(--gold-050);
}
.prompt svg{width:15px;height:15px;color:var(--gold-300);flex:none}
.prompt:focus-visible{outline:2px solid var(--gold-200);outline-offset:2px}

.ownernav{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--hair-2);
}
.ownernav span{
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:.35rem .7rem;border-radius:var(--r-xs);background:rgba(255,255,255,.025);
}
.ownernav span:first-child{color:var(--gold-200);background:rgba(227,193,119,.1)}

/* ------------------------------------------------------------- how it works */
.steps{display:grid;gap:clamp(.8rem,1.4vw,1.1rem);grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:step}
.step{
  position:relative;padding:clamp(1.25rem,2vw,1.6rem);border-radius:var(--r-md);
  border:1px solid var(--hair-2);background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  transition:border-color .3s,transform .3s var(--ease);
}
.step:hover{border-color:rgba(227,193,119,.3);transform:translateY(-3px)}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;border:1px solid rgba(227,193,119,.36);color:var(--gold-200);
  font-size:.76rem;font-weight:700;margin-bottom:1rem;
}
.step h3{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-100)}
.step p{margin-top:.6rem;font-size:var(--t-sm);color:var(--text-2)}

/* ------------------------------------------------------------- verticals --- */
.vgrid{display:grid;gap:clamp(.9rem,1.6vw,1.3rem);grid-template-columns:repeat(5,minmax(0,1fr))}
.vcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--hair-2);background:var(--ink-800);
  transition:transform .34s var(--ease),border-color .34s,box-shadow .34s;
  text-decoration:none;color:inherit;
}
.vcard::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%);
  opacity:.55;transition:opacity .34s;
}
.vcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 42%,transparent);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.vcard:hover::before{opacity:1}
.vcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.vcard__top{position:relative;z-index:2;padding:clamp(1.1rem,1.8vw,1.5rem) clamp(1.1rem,1.8vw,1.4rem) .9rem;text-align:center}
.vcard__mark{height:52px;margin:0 auto .85rem;display:flex;align-items:center;justify-content:center}
.vcard__mark img{max-height:52px;width:auto;object-fit:contain}
.vcard__word{
  font-size:1.16rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);
}
.vcard__word--mixed,.vhero__word--mixed{text-transform:none;letter-spacing:.01em}
.vcard__word em{font-style:normal;color:var(--accent)}
.vcard__tag{
  display:block;margin-top:.45rem;font-size:.66rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);line-height:1.5;min-height:2em;
}
/* Taglines and category lines run to one or two lines depending on the
   product. Reserving two lines for both keeps the photography edge aligned
   across the row instead of stepping. */
.vcard__cat{display:block;margin-top:.6rem;font-size:var(--t-sm);color:var(--muted);line-height:1.5;min-height:2.8em}
.vcard__media{position:relative;z-index:2;aspect-ratio:16/9;overflow:hidden;border-block:1px solid var(--hair-2)}
.vcard__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.72);transition:transform .6s var(--ease),filter .4s}
.vcard:hover .vcard__media img{transform:scale(1.05);filter:saturate(1) brightness(.82)}
.vcard__media--vector{
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),
    linear-gradient(150deg,rgba(255,255,255,.05),rgba(0,0,0,.35));
}
.vcard__media--vector svg{width:72%;height:auto;opacity:.85}
.vcard__outcomes{position:relative;z-index:2;padding:1.05rem clamp(1.1rem,1.8vw,1.4rem);display:grid;gap:.55rem;flex:1}
.vcard__outcomes li{display:flex;align-items:center;gap:.55rem;font-size:var(--t-sm);color:var(--text-2)}
.vcard__outcomes svg{width:15px;height:15px;color:var(--accent);flex:none}
.vcard__foot{position:relative;z-index:2;padding:0 clamp(1.1rem,1.8vw,1.4rem) clamp(1.1rem,1.8vw,1.4rem)}
.vcard__foot .btn{width:100%}
.vcard__status{
  position:relative;z-index:2;margin:0 clamp(1.1rem,1.8vw,1.4rem) 1rem;padding-top:.75rem;
  border-top:1px solid var(--hair-2);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

/* -------------------------------------------------------------- one brain -- */
.brain{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
.brain__map{position:relative;aspect-ratio:1/.78}
.brain__hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28%;text-align:center;z-index:2;
}
.brain__hub img{width:100%;filter:drop-shadow(0 0 38px rgba(211,168,85,.4))}
.brain__hub b{
  display:block;margin-top:.5rem;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-200);
}
.brain__lines{position:absolute;inset:0;width:100%;height:100%}
.brain__lines line{stroke:rgba(227,193,119,.2);stroke-width:.3}
.brain__map .spoke{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:grid;gap:.15rem;padding:.6rem .85rem;border-radius:var(--r-sm);white-space:nowrap;
  background:linear-gradient(180deg,rgba(28,28,36,.95),rgba(13,13,18,.95));
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);box-shadow:var(--shadow-sm);
}
.brain__map .spoke b{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.brain__map .spoke small{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.brain__list{display:grid;gap:1rem;margin-top:1.8rem}
.brain__list li{display:flex;gap:.85rem;align-items:flex-start;font-size:var(--t-sm);color:var(--text-2)}
.brain__list svg{width:17px;height:17px;color:var(--gold-300);flex:none;margin-top:.18rem}
.brain__list b{color:var(--paper);font-weight:600}

/* -------------------------------------------------------------- providers -- */
.cats{display:grid;gap:.75rem;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:2.2rem}
.cat{
  padding:1.15rem .9rem;border-radius:var(--r-md);border:1px solid var(--hair-2);
  background:rgba(255,255,255,.022);text-align:center;transition:border-color .3s,transform .3s var(--ease);
}
.cat:hover{border-color:rgba(227,193,119,.3);transform:translateY(-3px)}
.cat svg{width:24px;height:24px;color:var(--gold-300);margin:0 auto .7rem}
.cat b{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.cat small{display:block;margin-top:.35rem;font-size:.7rem;color:var(--muted);line-height:1.45}

/* ---------------------------------------------------------- owner control -- */
.trustgrid{display:grid;gap:clamp(.8rem,1.4vw,1.1rem);grid-template-columns:repeat(4,minmax(0,1fr))}
.tcard{
  padding:clamp(1.3rem,2.2vw,1.8rem);border-radius:var(--r-md);border:1px solid var(--hair-2);
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.01));
  transition:border-color .3s,transform .3s var(--ease);
}
.tcard:hover{border-color:rgba(227,193,119,.3);transform:translateY(-3px)}
.tcard svg{width:26px;height:26px;color:var(--gold-300);margin-bottom:1rem}
.tcard h3{font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-100)}
.tcard p{margin-top:.65rem;font-size:var(--t-sm);color:var(--text-2)}

/* --------------------------------------------------------------- CTA / end -- */
.reviewcta{
  display:grid;gap:clamp(1.6rem,3vw,2.8rem);grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:center;padding:clamp(1.8rem,3.4vw,3rem);border-radius:var(--r-xl);
  border:1px solid var(--hair);background:linear-gradient(140deg,rgba(30,26,16,.9),rgba(10,10,14,.95));
}
.quickstart{display:grid;gap:.7rem;margin-top:1.4rem}
.quickstart label{font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.quickstart input{
  width:100%;padding:.95rem 1.05rem;border-radius:var(--r-sm);
  border:1px solid var(--hair-2);background:rgba(0,0,0,.35);color:var(--paper);
}
.quickstart input::placeholder{color:var(--faint)}
.quickstart input:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(211,168,85,.14)}
.form-err{margin:0;font-size:var(--t-sm);color:#FF9B85;display:none}
.form-err.on{display:block}

.endcta{position:relative;text-align:center;padding-block:clamp(4rem,8vw,7rem);overflow:hidden}
.endcta__orb{width:clamp(88px,10vw,132px);margin:0 auto 1.6rem;filter:drop-shadow(0 0 50px rgba(211,168,85,.45))}
.endcta .h2{max-width:18ch;margin-inline:auto}
.endcta .btn{margin-top:2rem}
.endcta__pillars{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;margin-top:2.4rem;
  font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
}

/* ----------------------------------------------------------------- footer -- */
.foot{background:var(--ink-1000);border-top:1px solid var(--hair-2);padding-block:clamp(2.8rem,5vw,4rem) 2rem}
.foot__grid{display:grid;gap:clamp(1.8rem,3vw,3rem);grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.foot__about p{margin-top:1rem;font-size:var(--t-sm);color:var(--muted);max-width:38ch}
.foot__col b{display:block;font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-200);margin-bottom:1rem}
.foot__col a{display:block;padding:.34rem 0;text-decoration:none;color:var(--text-2);font-size:var(--t-sm)}
.foot__col a:hover{color:var(--gold-100)}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--hair-2);
  font-size:.78rem;color:var(--faint);
}
.foot__bar b{color:var(--gold-300);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.68rem}

/* ----------------------------------------------------- vertical page chrome */
.vhero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,5.2rem) clamp(3rem,6vw,5rem)}
.vhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 78% 8%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 62%);
}
.vhero__grid{position:relative;display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);align-items:center}
.vhero__mark{height:64px;display:flex;align-items:center;margin-bottom:1.3rem}
.vhero__mark img{max-height:64px;width:auto}
.vhero__word{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--paper);line-height:1}
.vhero__word em{font-style:normal;color:var(--accent)}
.vhero__tag{margin-top:.7rem;font-size:var(--t-sm);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.vhero__grid .h1{font-size:clamp(2rem,4.4vw,3.4rem);margin-top:1.5rem}
.vhero__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent)}
.vhero__media img{width:100%;aspect-ratio:16/11;object-fit:cover;filter:saturate(.85) brightness(.74)}
.vhero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(170deg,transparent 35%,rgba(6,6,9,.75))}
/* Drawn hero scene, used where a vertical has no approved photography. */
.vhero__scene{
  aspect-ratio:16/11;display:grid;place-items:center;padding:clamp(1rem,2.5vw,2rem);
  background:
    radial-gradient(90% 80% at 30% 25%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),
    linear-gradient(155deg,rgba(255,255,255,.045),rgba(0,0,0,.4));
}
.vhero__scene svg{width:100%;height:auto}
.vhero__badge{
  position:absolute;left:1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .8rem;border-radius:var(--r-pill);background:rgba(6,6,9,.78);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;
}

.painlist{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1.8rem}
.painlist li{
  display:flex;gap:.7rem;align-items:flex-start;padding:.95rem 1.05rem;border-radius:var(--r-sm);
  border:1px solid var(--hair-2);background:rgba(255,255,255,.022);font-size:var(--t-sm);color:var(--text-2);
}
.painlist svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:.2rem}

.outcomes3{display:grid;gap:clamp(.8rem,1.4vw,1.1rem);grid-template-columns:repeat(3,minmax(0,1fr))}
.ocard{
  padding:clamp(1.3rem,2.2vw,1.8rem);border-radius:var(--r-md);border:1px solid var(--hair-2);
  background:linear-gradient(180deg,rgba(255,255,255,.034),rgba(255,255,255,.01));
}
.ocard svg{width:26px;height:26px;color:var(--accent);margin-bottom:.9rem}
.ocard h3{font-size:var(--t-h3)}
.ocard p{margin-top:.6rem;font-size:var(--t-sm);color:var(--text-2)}

.flows{display:grid;gap:.75rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.flow{
  padding:1.15rem 1.25rem;border-radius:var(--r-md);border:1px solid var(--hair-2);background:rgba(255,255,255,.022);
}
.flow b{display:block;font-size:.94rem;color:var(--paper);font-weight:600}
.flow p{margin-top:.45rem;font-size:var(--t-sm);color:var(--muted)}
.flow span{
  display:inline-block;margin-bottom:.7rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-radius:var(--r-pill);padding:.2rem .6rem;
}

.statusbox{
  display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:clamp(1.4rem,2.6vw,2.2rem);border-radius:var(--r-lg);
  border:1px solid var(--hair);background:rgba(255,255,255,.026);
}
.statusbox h3{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-100)}
.statusbox p{margin-top:.6rem;font-size:var(--t-sm);color:var(--text-2)}
.statusbox dl{display:grid;gap:.6rem;margin:0}
.statusbox dt{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.statusbox dd{margin:.15rem 0 0;font-size:var(--t-sm);color:var(--text)}

/* --------------------------------------------------------- legal / prose --- */
.prose{max-width:74ch}
.prose h2{font-size:var(--t-h3);margin-top:2.4rem}
.prose h3{font-size:1.02rem;margin-top:1.8rem;color:var(--gold-100)}
.prose p,.prose li{font-size:var(--t-sm);color:var(--text-2);margin-top:.9rem;line-height:1.75}
.prose ul{list-style:disc;padding-left:1.3rem;margin-top:.6rem}
.prose li{margin-top:.5rem}
.prose a{color:var(--gold-200)}

/* --------------------------------------------------------------- the form -- */
.formcard{
  max-width:720px;margin-inline:auto;padding:clamp(1.4rem,3vw,2.4rem);
  border-radius:var(--r-lg);border:1px solid var(--hair);background:var(--ink-800);box-shadow:var(--shadow-md);
}
.step-dots{display:flex;align-items:center;gap:.5rem;margin-bottom:1.8rem}
.step-dots .dot{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.step-dots .dot.on{background:var(--metal-soft)}
.step-dots .dot-lbl{margin-left:.5rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-200);margin-bottom:.5rem}
.field input,.field select,.field textarea{
  width:100%;padding:.9rem 1rem;border-radius:var(--r-sm);border:1px solid var(--hair-2);
  background:rgba(0,0,0,.32);color:var(--paper);
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(211,168,85,.14);
}
.field input:disabled{opacity:.45}
.field-hint{margin-top:.45rem;font-size:.78rem;color:var(--muted)}
.field-row{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.check-inline{display:flex;align-items:center;gap:.6rem;margin-bottom:1.15rem;font-size:var(--t-sm);color:var(--text-2);cursor:pointer}
.check-inline input{width:18px;height:18px;accent-color:var(--gold-400);flex:none}
.chip-select{display:flex;flex-wrap:wrap;gap:.5rem}
.chip-opt{position:relative;cursor:pointer}
.chip-opt input{position:absolute;opacity:0;width:0;height:0}
.chip-opt span{
  display:inline-block;padding:.55rem .95rem;border-radius:var(--r-pill);border:1px solid var(--hair-2);
  background:rgba(255,255,255,.022);font-size:var(--t-sm);color:var(--text-2);transition:all .22s;
}
.chip-opt input:checked + span{border-color:var(--gold-400);background:rgba(211,168,85,.12);color:var(--gold-050)}
.chip-opt input:focus-visible + span{outline:2px solid var(--gold-200);outline-offset:2px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-fine,.form-privacy{margin-top:.9rem;font-size:.76rem;color:var(--faint);text-align:center}
.form-privacy a{color:var(--gold-300)}
.review-recap{
  display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-radius:var(--r-sm);
  background:rgba(95,209,160,.08);border:1px solid rgba(95,209,160,.24);
  font-size:var(--t-sm);color:var(--text);margin-bottom:1.6rem;
}
.review-recap svg{width:16px;height:16px;color:var(--state-handled);flex:none}
.step-back{
  background:none;border:none;color:var(--muted);font-size:var(--t-sm);cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 0;
}
.step-back:hover{color:var(--gold-200)}

/* ------------------------------------------------------------------ motion -- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in[data-delay="1"]{transition-delay:.08s}
.reveal.in[data-delay="2"]{transition-delay:.16s}
.reveal.in[data-delay="3"]{transition-delay:.24s}
.reveal.in[data-delay="4"]{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ================================================================= tablet == */
@media (max-width:1024px){
  :root{--wrap:900px}
  .nav__links{display:none}
  .nav__cta .btn{display:none}
  .burger{display:flex}
  .hero__grid,.signals,.askdemo,.brain,.reviewcta,.vhero__grid{grid-template-columns:minmax(0,1fr)}
  .sec__head--split{grid-template-columns:minmax(0,1fr);align-items:start}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps .step:nth-child(4),.steps .step:nth-child(5){grid-column:span 1}
  .trustgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .outcomes3,.flows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__stage{max-width:620px}
  .core{aspect-ratio:1/.72}

  /* The orbit map is positioned absolutely against a wide box. In one column
     its nowrap labels hang outside the viewport and push the page sideways, so
     below the split it becomes an ordinary stacked list around the hub. */
  .brain__map{
    aspect-ratio:auto;display:grid;gap:.6rem;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .brain__lines{display:none}
  .brain__hub{
    position:static;transform:none;width:120px;margin:0 auto .6rem;grid-column:1/-1;
  }
  .brain__map .spoke{position:static;transform:none;white-space:normal}
  .brain__map .spoke:last-child{grid-column:1/-1}

  /* Five cards do not survive a 900px row. Swipe instead of squeeze. */
  .vgrid{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,300px);
    grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:1rem;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);
    scrollbar-width:thin;
  }
  .vcard{scroll-snap-align:start}
  .swipe-hint{display:flex}
}

/* ================================================================= mobile == */
@media (max-width:760px){
  :root{--sec-y:clamp(3.2rem,11vw,4.5rem)}
  body{font-size:1rem}
  .nav__inner{min-height:64px}
  .mobilenav{inset:64px 0 0}
  .brand img{width:32px;height:32px}
  .brand__word{font-size:.92rem}

  .hero{padding-block:2.2rem 3rem}
  .hero__pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem .8rem}
  .hero__actions .btn{width:100%}

  /* The orbit does not read below ~700px: the chips overlap the orb and the
     labels shrink past legibility. Swap it for an honest grid of the same
     signals and keep the orb as the anchor above it. */
  .core{display:none}
  .core__grid{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:1.1rem;
  }
  .core__grid .chip{
    position:static;transform:none;justify-content:center;white-space:normal;text-align:center;
    padding:.7rem .5rem;font-size:.66rem;line-height:1.25;flex-direction:column;gap:.35rem;
  }
  .core__grid-orb{display:block;width:104px;margin:0 auto 1.2rem;filter:drop-shadow(0 0 34px rgba(211,168,85,.42))}

  .ask__states,.ask__evidence{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
  .ask__states .state{padding:.55rem .5rem}
  .state small{font-size:.56rem;letter-spacing:.1em}
  .state b{font-size:1.15rem}
  .ask__evidence b{font-size:.74rem}

  .steps,.trustgrid,.cats,.outcomes3,.flows,.painlist,.field-row,.statusbox{grid-template-columns:minmax(0,1fr)}
  .brain__map{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .signals__script{position:static;text-align:left;margin-top:1.2rem}
  .signals__art::after{background:linear-gradient(160deg,rgba(8,8,11,.15) 30%,rgba(8,8,11,.7))}
  .reviewcta{padding:1.4rem}
  .vgrid{grid-auto-columns:minmax(255px,84vw)}
  .endcta .btn{width:100%}
  .btn{width:auto}
}

.swipe-hint{
  display:none;align-items:center;gap:.5rem;margin-top:1rem;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.swipe-hint svg{width:15px;height:15px}

/* --------------------------------------------------------------- utilities -- */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.stack-sm > * + *{margin-top:.75rem}
.stack-md > * + *{margin-top:1.4rem}
.mt-lg{margin-top:clamp(2rem,4vw,3.2rem)}
.center{text-align:center}

/* ------------------------------------------------- consent banner (v1 JS) --
   sherify.js injects this markup on every page. V3 does not load sherify.css,
   so the banner needs its own styling here. Class names are fixed by that
   script (.btn-gold, not .btn--gold) and must not be renamed. */
.consent-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem clamp(1rem,3vw,2.5rem);
  padding:1rem clamp(1.15rem,4vw,2.5rem);
  background:rgba(8,8,11,.96);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--hair);
  box-shadow:0 -18px 46px rgba(0,0,0,.5);
}
.consent-copy{max-width:62ch;font-size:var(--t-sm);color:var(--text-2)}
.consent-copy strong{display:block;color:var(--paper);font-size:.9rem;margin-bottom:.2rem}
.consent-copy a{color:var(--gold-200)}
.consent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.consent-banner .btn-gold{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:.65rem 1.25rem;border-radius:var(--r-pill);border:none;cursor:pointer;
  background:var(--metal);color:#1A1305;font-size:var(--t-sm);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.consent-decline{
  background:none;border:1px solid var(--hair);border-radius:var(--r-pill);
  min-height:44px;padding:.65rem 1.25rem;color:var(--text-2);cursor:pointer;
  font-size:var(--t-sm);
}
.consent-decline:hover{border-color:var(--gold-400);color:var(--paper)}
.consent-banner button:focus-visible{outline:2px solid var(--gold-200);outline-offset:3px}
@media (max-width:760px){
  .consent-banner{flex-direction:column;align-items:stretch}
  .consent-actions .btn-gold,.consent-decline{width:100%}
}

/* =============================================================================
   DEVICE STAGE — the laptop + phone showcase from the approved mockups.
   Real UI inside CSS chrome, not a screenshot: it stays sharp at every density,
   reflows on small screens, and its text is selectable and readable aloud.
   ========================================================================== */
.stage{position:relative;padding-bottom:clamp(1.5rem,4vw,3rem);padding-right:clamp(2rem,7vw,5.5rem)}

/* ------------------------------------------------------------------ laptop */
.laptop{position:relative;filter:drop-shadow(0 34px 60px rgba(0,0,0,.65))}
.laptop__screen{
  border-radius:14px 14px 4px 4px;padding:9px 9px 12px;
  background:linear-gradient(160deg,#33333c,#15151b 42%,#26262e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.laptop__base{
  height:13px;margin:0 -6.5%;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#2b2b33,#131318 62%,#0a0a0e);
  box-shadow:0 12px 26px rgba(0,0,0,.6);display:grid;place-items:center;
}
.laptop__base span{width:16%;height:4px;border-radius:0 0 5px 5px;background:rgba(0,0,0,.55)}

/* ---------------------------------------------------------------- the app */
.app{
  display:grid;grid-template-columns:minmax(0,.29fr) minmax(0,1fr);
  aspect-ratio:16/10.1;overflow:hidden;border-radius:7px;
  background:linear-gradient(165deg,#101016,#08080c);
  border:1px solid rgba(227,193,119,.14);
  container-type:inline-size;
}
.app__nav{
  display:flex;flex-direction:column;gap:.18em;padding:.85em .6em;
  background:rgba(255,255,255,.028);border-right:1px solid var(--hair-2);
}
.app__brand{
  display:flex;align-items:center;gap:.4em;margin-bottom:.9em;padding-left:.25em;
  font-size:3.1cqw;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.app__brand img{width:3.6cqw;height:3.6cqw;flex:none}
.app__navitem{
  display:flex;align-items:center;gap:.5em;padding:.45em .5em;border-radius:4px;
  font-size:2.8cqw;color:var(--muted);white-space:nowrap;
}
.app__navitem svg{width:3.1cqw;height:3.1cqw;flex:none;stroke-width:1.6}
.app__navitem.is-on{background:rgba(227,193,119,.13);color:var(--gold-100)}
.app__navitem.is-on svg{color:var(--gold-300)}

.app__main{padding:1em 1.1em;display:flex;flex-direction:column;gap:.85em}
.app__top{display:flex;align-items:center;justify-content:flex-end;gap:.7em}
.app__search{
  display:grid;place-items:center;width:2.6cqw;height:2.6cqw;color:var(--muted);
}
.app__search svg{width:2.6cqw;height:2.6cqw}
.app__user{display:flex;align-items:center;gap:.35em;font-size:2.3cqw;color:var(--text-2)}
.app__user i{
  width:3.4cqw;height:3.4cqw;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--gold-300),var(--gold-600));
}
.app__user b{color:var(--paper);font-weight:600}
.app__user small{color:var(--faint)}

.app__greet{font-size:3.1cqw;color:var(--text-2);line-height:1.5}
.app__greet b{display:block;color:var(--paper);font-weight:600;font-size:3.5cqw;margin-top:.15em}

.app__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.app__tile{
  padding:.7em .8em;border-radius:6px;border:1px solid var(--hair-2);
  background:rgba(255,255,255,.03);
}
.app__tile small{
  display:block;font-size:2.1cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.app__tile b{display:block;margin-top:.2em;font-size:4.4cqw;font-weight:700;line-height:1}
.app__tile--needs{border-color:rgba(227,193,119,.4)}
.app__tile--needs b{color:var(--state-needs)}
.app__tile--handled b{color:var(--state-handled)}
.app__tile--opp b{color:var(--state-opp)}

.app__ask{
  margin-top:auto;display:flex;align-items:center;gap:.55em;
  padding:.75em .9em;border-radius:999px;border:1px solid var(--hair);
  background:rgba(0,0,0,.42);font-size:2.6cqw;color:var(--faint);
}
.app__ask svg{width:2.9cqw;height:2.9cqw;flex:none;color:var(--gold-300)}
.app__ask span{flex:1}

/* ------------------------------------------------------------------ phone */
.phone{
  position:absolute;right:0;bottom:clamp(.5rem,2vw,1.6rem);width:clamp(112px,20%,178px);
  border-radius:22px;padding:6px;container-type:inline-size;
  background:linear-gradient(160deg,#34343d,#15151b 45%,#28282f);
  box-shadow:0 26px 48px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.16);
}
.phone__screen{
  border-radius:17px;padding:.85em .8em 1em;
  background:linear-gradient(170deg,#12121a,#08080c);
  border:1px solid rgba(227,193,119,.16);
  display:flex;flex-direction:column;gap:.5em;
}
.phone__bar{display:flex;align-items:center;gap:.35em;padding-bottom:.5em;border-bottom:1px solid var(--hair-2)}
.phone__bar img{width:8cqw;height:8cqw;flex:none}
.phone__bar b{
  font-size:7cqw;font-weight:600;letter-spacing:.02em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.phone__lead{font-size:7.6cqw;font-weight:600;color:var(--paper);line-height:1.25}
.phone__body{font-size:5.9cqw;color:var(--text-2);line-height:1.45}
.phone__checks{display:grid;gap:.3em}
.phone__checks li{display:flex;align-items:center;gap:.3em;font-size:5.6cqw;color:var(--text-2)}
.phone__checks svg{width:6cqw;height:6cqw;flex:none;color:var(--state-handled)}
.phone__cta{
  display:flex;align-items:center;justify-content:center;gap:.35em;margin-top:.25em;
  padding:.6em .5em;border-radius:999px;background:var(--metal);color:#1A1305;
  font-size:5.6cqw;font-weight:700;letter-spacing:.02em;
}
.phone__cta svg{width:6cqw;height:6cqw;flex:none}

@media (max-width:760px){
  /* Two devices side by side stop being readable well before this width. Keep
     the laptop, drop the phone to its own row beneath it at usable size. */
  .stage{padding-right:0}
  .phone{position:static;width:clamp(140px,52%,190px);margin:1.1rem auto 0}
}

/* =============================================================================
   PHOTOGRAPHIC TREATMENT
   The approved mockups are warm and cinematic, lit by real business
   photography. These rules put the imagery back at full strength and stop the
   page reading as flat black.
   ========================================================================== */

/* Full-bleed hero backdrop -------------------------------------------------- */
.hero--photo{isolation:isolate}
.hero__photo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;object-position:60% 45%;
  filter:saturate(1.05) contrast(1.02);
}
/* Legibility scrim: dark and opaque under the copy column, clearing to let the
   photograph read behind the device showcase. */
.hero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,6,9,.96) 0%,rgba(6,6,9,.9) 34%,rgba(6,6,9,.62) 62%,rgba(6,6,9,.72) 100%),
    linear-gradient(180deg,rgba(6,6,9,.78) 0%,rgba(6,6,9,.25) 30%,rgba(8,8,11,.95) 100%);
}
.hero--photo .hero__bg::before{background:radial-gradient(circle at 50% 50%,rgba(211,168,85,.2),transparent 62%)}

@media (max-width:1024px){
  /* One column: the copy now sits over the middle of the frame, so the scrim
     has to be even across the width rather than weighted to the left. */
  .hero__photo::after{
    background:linear-gradient(180deg,rgba(6,6,9,.9) 0%,rgba(6,6,9,.82) 45%,rgba(8,8,11,.96) 100%);
  }
}

/* Vertical hero stage ------------------------------------------------------- */
.vhero__stage{position:relative}

/* Industry-pain section: list beside the product photograph, full strength --- */
.painwrap{
  display:grid;gap:clamp(1.4rem,3vw,2.6rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;
}
.painlist--one{grid-template-columns:minmax(0,1fr);margin-top:0}
.painart{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.painart img{width:100%;aspect-ratio:4/3.4;object-fit:cover;filter:saturate(1.04)}
.painart .vhero__scene{aspect-ratio:4/3.4}
.painart figcaption{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  padding:.45rem .8rem;border-radius:var(--r-pill);background:rgba(6,6,9,.8);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;
}
.painart::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,6,9,.72));
}
@media (max-width:1024px){.painwrap{grid-template-columns:minmax(0,1fr)}}

/* =============================================================================
   PRODUCT CARDS — matched to the approved brand board and homepage mockup:
   the real logo lockup, full-strength photography, accent bullets, solid CTA.
   ========================================================================== */
.vcard__mark{height:auto;margin:0 auto .55rem;display:flex;align-items:center;justify-content:center}
.vcard__mark img{
  max-height:none;width:auto;height:clamp(74px,7.2vw,96px);object-fit:contain;
  filter:drop-shadow(0 6px 20px color-mix(in srgb,var(--accent) 40%,transparent));
}
/* The lockup already carries the wordmark, so the typographic fallback and the
   image never both render. */
.vcard__mark + .vcard__tag{margin-top:.15rem}

.vcard__media{aspect-ratio:4/3.1}
.vcard__media img{filter:saturate(1.08) brightness(.98)}
.vcard:hover .vcard__media img{filter:saturate(1.15) brightness(1.04)}
.vcard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 34%,rgba(6,6,9,.55) 100%);
}

/* Accent bullet, as on the brand board, rather than a gold tick. */
.vcard__outcomes li{gap:.6rem;color:var(--text)}
.vcard__outcomes svg{display:none}
.vcard__outcomes li::before{
  content:"";width:15px;height:15px;border-radius:50%;flex:none;
  border:1.5px solid var(--accent);
  background:radial-gradient(circle at 50% 50%,var(--accent) 0 28%,transparent 30%);
}

.vcard__foot .btn{
  background:var(--accent);color:#06080B;border-color:transparent;font-weight:700;
}
.vcard:hover .vcard__foot .btn{filter:brightness(1.1)}

/* The vertical hero shows the lockup at display size. */
.vhero__mark{height:auto;margin-bottom:1rem}
.vhero__mark img{max-height:none;height:clamp(96px,10vw,132px);width:auto;
  filter:drop-shadow(0 8px 26px color-mix(in srgb,var(--accent) 45%,transparent))}

/* =============================================================================
   HERO COMPOSITION — matched to the approved mockup
   ========================================================================== */

/* The mockup sets the headline in caps. At that weight the default tracking is
   too loose, so it tightens rather than inheriting the sentence-case value. */
.h1--caps{
  text-transform:uppercase;font-weight:700;letter-spacing:-.012em;line-height:1.0;
  font-size:clamp(2.2rem,5.1vw,4.05rem);
}

/* Play affordance on the secondary CTA, as in the mockup. */
.btn--play{padding-left:.9rem}
.btn__play{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--metal);
}
.btn__play::before{
  content:"";width:0;height:0;margin-left:2px;
  border-left:7px solid #1A1305;border-block:5px solid transparent;
}

/* The mockup gives the stage more than half the frame so the orbit and the
   devices can both read. */
@media (min-width:1025px){
  .hero__grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(1.6rem,3vw,2.6rem)}
  .hero__stage{margin-right:calc(var(--gutter) * -0.4)}
  .core{aspect-ratio:1/.6}
  .core__orb{width:27%}
  .stage{margin-top:-1.5rem}
}

/* Let the photograph read. The previous scrim was strong enough to erase it. */
.hero__photo::after{
  background:
    linear-gradient(90deg,rgba(6,6,9,.94) 0%,rgba(6,6,9,.82) 30%,rgba(6,6,9,.42) 58%,rgba(6,6,9,.5) 100%),
    linear-gradient(180deg,rgba(6,6,9,.6) 0%,rgba(6,6,9,.12) 32%,rgba(8,8,11,.9) 100%);
}
.hero__photo img{filter:saturate(1.12) contrast(1.05) brightness(1.06)}

/* Two lines, as in the mockup: the second line is "BUSINESS TO A BRAIN.", so
   the size is capped to what that string fits in the copy column rather than to
   the general h1 scale. */
.h1--caps{font-size:clamp(2rem,3.85vw,2.95rem)}
@media (min-width:1025px){
  .hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}
/* The sidebar wordmark was clipping at narrow laptop widths. */
.app__brand{font-size:2.7cqw}
.app__brand img{width:3.2cqw;height:3.2cqw}

/* The bottom scrim on the card imagery was heavy enough to flatten it. The
   photography is the point of these cards in the approved board. */
.vcard__media::after{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent) 0%,transparent 40%,rgba(6,6,9,.34) 100%);
}
.vcard__media img{filter:saturate(1.12) brightness(1.06) contrast(1.03)}
.vcard:hover .vcard__media img{filter:saturate(1.2) brightness(1.14) contrast(1.05)}

/* Vertical hero backdrop. Same treatment as the homepage, tinted by the
   product's accent so each page is unmistakably its own without becoming a
   different website. */
.vhero--photo{isolation:isolate}
.vhero--photo .hero__photo::after{
  background:
    linear-gradient(90deg,rgba(6,6,9,.95) 0%,rgba(6,6,9,.84) 32%,rgba(6,6,9,.5) 60%,rgba(6,6,9,.6) 100%),
    linear-gradient(180deg,rgba(6,6,9,.62) 0%,rgba(6,6,9,.15) 34%,rgba(8,8,11,.94) 100%),
    linear-gradient(120deg,color-mix(in srgb,var(--accent) 20%,transparent),transparent 62%);
}
.vhero--photo::before{opacity:.5}
@media (max-width:1024px){
  .vhero--photo .hero__photo::after{
    background:
      linear-gradient(180deg,rgba(6,6,9,.9) 0%,rgba(6,6,9,.84) 45%,rgba(8,8,11,.96) 100%),
      linear-gradient(120deg,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);
  }
}
@media (min-width:1025px){
  .vhero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .vhero__stage{margin-right:calc(var(--gutter) * -0.4)}
}

/* =============================================================================
   MARK + DENSITY — second pass against the approved mockups
   The mockups carry a larger, more present Sherify mark and a tighter hero.
   ========================================================================== */

/* The approved mark is taller than it is wide, so square boxes crop it. */
.brand img,.app__brand img,.phone__bar img,.ask__chrome b img{object-fit:contain}

/* Nav: the mockup sets the mark and wordmark considerably larger. */
.brand img{width:auto;height:42px}
.brand__word{font-size:1.24rem;letter-spacing:.15em}
.nav__inner{min-height:82px}
.mobilenav{inset:82px 0 0}

/* Hero: bigger mark, tighter stack, less air between the orbit and the copy. */
@media (min-width:1025px){
  .core{aspect-ratio:1/.64}
  .core__orb{width:34%}
  .hero{padding-block:clamp(2.2rem,4vw,3.6rem) clamp(3rem,5.5vw,5rem)}
  .hero__copy .h1{margin-top:.85rem}
  .hero__copy .lede{margin-top:1.1rem}
  .hero__actions{margin-top:1.6rem}
  .hero__pillars{margin-top:2rem;padding-top:1.4rem}
  .stage{margin-top:-2.6rem}
}
.endcta__orb{width:auto;height:clamp(96px,11vw,148px);margin-inline:auto}
.brain__hub img{width:auto;height:100%}
.brain__hub{width:22%;aspect-ratio:1/1;display:grid;place-items:center}

/* =============================================================================
   SIGNAL BAND — the "your business is already talking" section.
   The mockup runs this full-bleed and dense: photography holding the right half,
   copy tight over the dark left, and the script line standing at the far edge.
   ========================================================================== */
.signalband{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(2.6rem,5vw,4.2rem);
  border-block:1px solid var(--hair-2);background:var(--ink-1000);
}
.signalband__photo{position:absolute;inset:0 0 0 38%;z-index:-2}
.signalband__photo img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;filter:saturate(1.05) brightness(1.02)}
.signalband__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#08080B 0%,rgba(8,8,11,.92) 14%,rgba(8,8,11,.35) 46%,rgba(8,8,11,.5) 100%);
}
.signalband__inner{position:relative}
.signalband__copy{max-width:min(52ch,54%)}
.signalband__copy .h2{margin-top:.85rem;font-size:clamp(1.7rem,2.9vw,2.55rem)}
.signalband__lede{margin-top:1rem;font-size:var(--t-sm);color:var(--text-2);line-height:1.6;max-width:46ch}

.signalband__icons{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.signalband__icons span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  border:1px solid var(--hair);background:linear-gradient(180deg,rgba(32,32,40,.95),rgba(12,12,17,.95));
  box-shadow:var(--shadow-sm);color:var(--gold-200);
}
.signalband__icons svg{width:21px;height:21px}

.signalband__close{margin-top:1.5rem;font-weight:600;color:var(--gold-100);font-size:1.02rem}

.signalband__script{
  position:absolute;right:clamp(1rem,3.5vw,3rem);top:50%;transform:translateY(-50%);
  z-index:1;font-size:clamp(1.5rem,2.6vw,2.2rem);text-align:right;line-height:1.15;
}

@media (max-width:1024px){
  .signalband__photo{inset:0}
  .signalband__photo::after{
    background:linear-gradient(180deg,rgba(8,8,11,.9) 0%,rgba(8,8,11,.78) 50%,rgba(8,8,11,.94) 100%);
  }
  .signalband__copy{max-width:none}
  .signalband__script{position:static;transform:none;text-align:left;margin-top:1.4rem}
}

/* The photo container starting at 38% left a visible vertical seam where it
   met the flat ground. Let the image span the band and let the gradient alone
   decide where it fades out. */
.signalband__photo{inset:0}
.signalband__photo::after{
  background:linear-gradient(90deg,#08080B 0%,#08080B 26%,rgba(8,8,11,.86) 40%,rgba(8,8,11,.3) 62%,rgba(8,8,11,.5) 100%);
}
.signalband__photo img{object-position:66% 50%}
.signalband__copy{max-width:min(46ch,50%)}
.signalband__copy .h2{font-size:clamp(1.6rem,2.55vw,2.25rem)}

/* Hold the dark ground further right so the copy never sits on lit paper, keep
   the headline to two lines, and keep the channel row on one line. */
.signalband__photo::after{
  background:linear-gradient(90deg,#08080B 0%,#08080B 33%,rgba(8,8,11,.9) 44%,rgba(8,8,11,.32) 64%,rgba(8,8,11,.52) 100%);
}
.signalband__copy{max-width:min(50ch,54%)}
.signalband__copy .h2{font-size:clamp(1.55rem,2.35vw,2.1rem)}
.signalband__icons{gap:.5rem;flex-wrap:nowrap}
.signalband__icons span{width:42px;height:42px;border-radius:12px}
.signalband__icons svg{width:19px;height:19px}
@media (max-width:760px){
  .signalband__icons{flex-wrap:wrap}
}

/* =============================================================================
   PROPORTION — third pass against the approved mockups

   Measured against the mockup rather than guessed: its type scale already
   matched (body ≈1.25% of canvas width, H1 cap height ≈3.2%), but its content
   runs nearly edge to edge where this build sat in a 1240px column inside a
   1440px viewport, and its hero is 0.62× the canvas height where this build was
   0.82×. That difference in density — not type size — is what read as "airy".
   ========================================================================== */
:root{--wrap:1400px}

@media (min-width:1025px){
  /* Shorter hero, devices tucked into the lower edge as in the mockup. */
  .hero{padding-block:clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.8rem)}
  .core{aspect-ratio:1/.56}
  .core__orb{width:38%}
  .stage{margin-top:-4.5rem;padding-bottom:0}
  .hero__grid{align-items:center;gap:clamp(1.2rem,2.4vw,2rem)}
  .hero__pillars{margin-top:1.7rem;padding-top:1.2rem}

  /* The mockup's laptop occupies noticeably more of the frame. */
  .hero__stage{margin-right:calc(var(--gutter) * -0.9)}
}

/* At 1400 the eyebrow-to-headline rhythm tightens up with the wider measure. */
@media (min-width:1200px){
  .h1--caps{font-size:clamp(2.4rem,3.5vw,3.25rem)}
}

/* --wrap:1400 plus a negative stage margin pushed the page 15px past 1440 and
   reintroduced a horizontal scrollbar. Pull the container in and let the stage
   sit flush with the gutter instead of outside it. */
:root{--wrap:1360px}
@media (min-width:1025px){
  .hero__stage,.vhero__stage{margin-right:0}
}

/* =============================================================================
   V4 — MOCKUP-EXACT PASS
   -----------------------------------------------------------------------------
   Section-by-section replication of the approved homepage mockups: condensed
   display type, tile chips on glow rings, the Ask Sherify chat window with the
   three state tiles and the four-step action chain, numbered steps with
   chevrons, the product badge orbit, the tools row, and the three single-row
   bands (owner control, review, final CTA). Overrides earlier rules on purpose;
   a consolidation pass is noted in docs/sherify-v3/HANDOFF.md.
   ========================================================================== */
:root{--display:"Oswald","Outfit",-apple-system,"Segoe UI",sans-serif}

/* Display type ------------------------------------------------------------- */
.h1--caps{
  font-family:var(--display);font-weight:600;letter-spacing:.005em;line-height:.98;
  font-size:clamp(2.4rem,4.4vw,4rem);
}
.btn{font-family:var(--display);font-weight:600;letter-spacing:.06em;font-size:.86rem}
.btn--gold{color:#141006}
.eyebrow{letter-spacing:.3em}
.sec--tight{padding-block:clamp(2.4rem,4.4vw,3.6rem)}
.sec__head{margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.sec__head .h2{margin-top:.55rem}
.h2{font-size:clamp(1.65rem,2.7vw,2.35rem);letter-spacing:-.02em}
.lede{font-size:clamp(.95rem,1.05vw,1.05rem)}

/* Hero: tiles on rings ------------------------------------------------------ */
.core__glow{
  position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(232,190,95,.42) 0%,rgba(211,168,85,.18) 32%,transparent 66%);
  filter:blur(6px);
}
.core__ring .ring{stroke:rgba(232,190,95,.34);stroke-width:.45}
.core__ring .ring--2{stroke:rgba(232,190,95,.22)}
.core__ring .ring--3{stroke:rgba(232,190,95,.14)}
.core__spoke{stroke:rgba(232,190,95,.12);stroke-width:.25}
.core__orb{filter:drop-shadow(0 0 40px rgba(232,190,95,.55)) drop-shadow(0 0 90px rgba(211,168,85,.3))}
.tile{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;
  width:66px;height:66px;border-radius:12px;
  background:linear-gradient(180deg,rgba(24,22,18,.96),rgba(10,10,12,.96));
  border:1px solid rgba(232,190,95,.5);
  box-shadow:0 0 0 1px rgba(232,190,95,.08),0 10px 26px rgba(0,0,0,.6),0 0 22px rgba(211,168,85,.18);
}
.tile svg{width:20px;height:20px;color:var(--gold-200);stroke-width:1.9}
.tile b{
  font-family:var(--display);font-weight:500;font-size:.56rem;letter-spacing:.06em;
  text-transform:none;color:var(--paper);white-space:nowrap;line-height:1;
}
.chip{display:none}
@media (max-width:760px){
  .core__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
  .core__grid .tile{position:static;transform:none;width:auto;height:64px}
}

/* Hero pillars with glyphs */
.hero__pillars{gap:.8rem}
.hero__pillars div{display:flex;align-items:center;gap:.55rem}
.hero__pillars svg{width:22px;height:22px;color:var(--gold-200);flex:none}
.hero__pillars span{margin-top:0;display:block;line-height:1.25;font-size:.7rem}
.hero__pillars span b{display:block;font-size:.62rem;letter-spacing:.16em;margin-bottom:.1rem}

/* Signal band: white app-style tiles with coloured glyphs -------------------- */
.signalband__icons span{
  background:#fff;border:none;color:var(--ic,#222);border-radius:11px;width:42px;height:42px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
.signalband__icons svg{stroke-width:2.1}

/* Ask Sherify: pills + chat window ------------------------------------------ */
.askdemo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.pills{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.pill{
  padding:.5rem .95rem;border-radius:var(--r-pill);border:1px solid rgba(232,190,95,.36);
  background:rgba(232,190,95,.06);color:var(--paper);font-size:.8rem;cursor:pointer;
  transition:background-color .2s,border-color .2s;
}
.pill:hover{border-color:var(--gold-300)}
.pill[aria-selected="true"]{background:rgba(232,190,95,.18);border-color:var(--gold-300);color:var(--gold-050)}
.pill:focus-visible{outline:2px solid var(--gold-200);outline-offset:2px}

.chat{
  padding:1.1rem 1.15rem 1.2rem;border-radius:var(--r-lg);
  border:1px solid rgba(232,190,95,.28);
  background:linear-gradient(180deg,rgba(22,20,16,.94),rgba(9,9,12,.98));
  box-shadow:var(--shadow-md);
}
.chat__q{
  display:inline-flex;align-items:center;gap:.6rem;padding:.6rem .95rem;border-radius:var(--r-md);
  border:1px solid rgba(232,190,95,.36);background:rgba(232,190,95,.08);font-size:.92rem;color:var(--paper);
}
.chat__q img{width:22px;height:22px;object-fit:contain}
.chat__found{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;font-size:.8rem;color:var(--text-2)}
.chat__found i{width:16px;height:16px;border-radius:50%;background:linear-gradient(140deg,#4C8DFF,#2B5FD9);flex:none}
.chat__a{margin-top:.6rem}
.chat__a b{display:block;color:var(--paper);font-size:1rem;line-height:1.35}
.chat__a span{display:block;margin-top:.3rem;font-size:.82rem;color:var(--text-2)}

.stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin-top:.95rem}
.stat3__t{
  --c:var(--gold-300);padding:.8rem .85rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,transparent),rgba(0,0,0,.3));
}
.stat3__t b{display:block;font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--paper)}
.stat3__t span{display:block;margin-top:.3rem;font-family:var(--display);font-size:.78rem;letter-spacing:.04em;color:var(--c)}
.stat3__t small{display:block;margin-top:.25rem;font-size:.66rem;color:var(--text-2);line-height:1.35}
.stat3__t--needs{--c:#FF5C5C}
.stat3__t--handled{--c:#4C8DFF}
.stat3__t--opp{--c:#3DD68C}

.chain4{display:flex;align-items:flex-start;justify-content:space-between;gap:.35rem;margin:1.05rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--hair-2);list-style:none}
.chain4 li{display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;text-align:center}
.chain4 b{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}
.chain4 li:nth-child(3) b{color:#2DD4BF}
.chain4__box{
  display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  border:1px solid rgba(232,190,95,.42);background:rgba(232,190,95,.06);color:var(--gold-200);
}
.chain4 li:nth-child(3) .chain4__box{border-color:rgba(45,212,191,.5);color:#2DD4BF}
.chain4__box svg{width:20px;height:20px}
.chain4 small{font-size:.62rem;color:var(--muted);line-height:1.3}
.chain4__arrow{color:var(--gold-400);padding-top:1.7rem;font-size:.9rem}

/* How it works: numbered cards with chevrons -------------------------------- */
.steps{display:flex;align-items:stretch;gap:.35rem}
.step{flex:1;padding:1.1rem 1.05rem 1.2rem;border-radius:14px;border:1px solid rgba(232,190,95,.28);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.step__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem}
.step__n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin:0;border:none;
  background:var(--metal);color:#141006;font-family:var(--display);font-weight:600;font-size:.86rem;
}
.step__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid rgba(232,190,95,.45);color:var(--gold-200)}
.step__ic svg{width:18px;height:18px}
.step h3{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.step p{margin-top:.5rem;font-size:.78rem;line-height:1.5}
.step__sep{align-self:center;color:var(--gold-400);font-size:1.6rem;line-height:1;flex:none}
@media (max-width:1024px){.steps{flex-wrap:wrap}.step{flex:1 1 30%}.step__sep{display:none}}
@media (max-width:760px){.step{flex:1 1 100%}}

/* Products header spacing --------------------------------------------------- */
.vgrid{gap:.85rem}
.vcard__mark img{height:clamp(68px,6.4vw,84px)}
.vcard__media{aspect-ratio:4/2.9}
.vcard__outcomes{padding-block:.85rem}
.vcard__outcomes li{font-size:.8rem}

/* One brain: badge orbit ---------------------------------------------------- */
.brain{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}
.orbit{position:relative;aspect-ratio:1/.72}
.orbit__lines{position:absolute;inset:0;width:100%;height:100%}
.orbit__lines line{stroke:rgba(232,190,95,.35);stroke-width:.35}
.orbit__hub{
  position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,rgba(232,190,95,.35),rgba(211,168,85,.08) 55%,transparent 72%);
  filter:drop-shadow(0 0 30px rgba(232,190,95,.4));
}
.orbit__hub img{width:64%;height:auto}
.badge{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.badge span{
  display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle,#15151b,#08080b);
  border:2px solid var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent),0 10px 24px rgba(0,0,0,.6);
}
.badge img{width:58%;height:58%;object-fit:contain}
.badge b{font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.spoke,.brain__map,.brain__hub{display:none}
@media (max-width:760px){
  .orbit{aspect-ratio:1/1}
  .badge span{width:60px;height:60px}
}

/* Tools --------------------------------------------------------------------- */
.tools{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,3vw,3rem);align-items:center}
.tools__row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.tools__row li{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.tools__row span{
  display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#fff;color:var(--ic,#222);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.tools__row svg{width:26px;height:26px;stroke-width:2}
.tools__row small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ticks{display:grid;gap:.55rem}
.ticks li{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--text)}
.ticks svg{width:18px;height:18px;padding:3px;border-radius:50%;border:1px solid var(--gold-400);color:var(--gold-200);flex:none}
.tools__script{margin-top:1.1rem;font-size:1.5rem;text-align:right}
.cats{display:none}
@media (max-width:1024px){.tools{grid-template-columns:minmax(0,1fr)}.tools__script{text-align:left}}

/* Bands --------------------------------------------------------------------- */
.band{position:relative;padding-block:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--hair-2);overflow:hidden}
.band--control{background:var(--ink-1000)}
.band--review{background:var(--ink-900)}
.band--end{background:var(--ink-1000);border-bottom:1px solid var(--hair-2);padding-block:clamp(2rem,3.6vw,3rem)}
.band__row{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem)}
.band__ic{display:grid;place-items:center;width:58px;height:58px;border-radius:12px;border:1px solid rgba(232,190,95,.5);color:var(--gold-200);flex:none}
.band__ic svg{width:26px;height:26px}
.band__copy{flex:1;min-width:0}
.band__copy--lead{flex:0 1 34%}
.band__copy p{margin-top:.4rem;font-size:.84rem;color:var(--text-2)}
.band__copy p b{color:var(--paper)}
.h2--band{font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.15;margin-top:.35rem}
.band .btn{flex:none;white-space:nowrap}
.band__center{display:flex;flex-direction:column;align-items:center;gap:.7rem;flex:1}
.mores{display:flex;gap:1.6rem;flex:none}
.mores li{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.mores svg{width:26px;height:26px;color:var(--gold-200)}
.mores b{font-family:var(--display);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-100)}
.ctrl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;flex:1}
.ctrl__card{
  padding:.75rem .7rem;border-radius:11px;border:1px solid rgba(232,190,95,.3);background:rgba(255,255,255,.02);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;
}
.ctrl__card svg{grid-row:1/3;width:30px;height:30px;padding:6px;border-radius:50%;border:1px solid rgba(232,190,95,.5);color:var(--gold-200)}
.ctrl__card b{font-family:var(--display);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.ctrl__card span{font-size:.64rem;color:var(--muted);line-height:1.3}
.reviewcta,.endcta,.trustgrid{display:none}
@media (max-width:1024px){
  .band__row{flex-wrap:wrap}
  .band__copy--lead{flex-basis:100%}
  .ctrl{grid-template-columns:repeat(2,minmax(0,1fr));flex-basis:100%}
  .band__center{align-items:flex-start}
}
@media (max-width:760px){
  .ctrl{grid-template-columns:minmax(0,1fr)}
  .mores{gap:1.1rem}
  .band .btn{width:100%}
}

/* Footer -------------------------------------------------------------------- */
.foot{padding-block:2.4rem 1.4rem}
.foot__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.8fr)) minmax(0,1fr);align-items:start}
.foot__about p{margin-top:.8rem;font-size:.8rem}
.foot__col b{font-size:.62rem}
.foot__col a{padding:.24rem 0;font-size:.8rem}
.foot__tag{text-align:right;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;line-height:1.8}
.foot__tag b{display:block;color:var(--text-2);font-weight:500}
.foot__bar{margin-top:1.6rem;padding-top:1rem;font-size:.72rem}
@media (max-width:1024px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot__tag{text-align:left;grid-column:1/-1}}
@media (max-width:760px){.foot__grid{grid-template-columns:minmax(0,1fr)}}

/* Hero: the mark dominates the stage in the mockup, and the backdrop is
   noticeably warmer than a night street left alone. */
@media (min-width:1025px){
  .core{aspect-ratio:1/.62}
  .core__orb{width:46%}
  .tile{width:74px;height:74px}
  .tile svg{width:22px;height:22px}
  .tile b{font-size:.6rem}
  .stage{margin-top:-5.5rem}
  .hero{padding-bottom:1.4rem}
}
.hero__photo img{filter:saturate(1.25) contrast(1.05) brightness(1.18) sepia(.18)}
.hero__photo::after{
  background:
    linear-gradient(90deg,rgba(6,6,9,.93) 0%,rgba(6,6,9,.8) 30%,rgba(10,8,4,.34) 58%,rgba(10,8,4,.42) 100%),
    linear-gradient(180deg,rgba(6,6,9,.55) 0%,rgba(6,6,9,.1) 30%,rgba(8,8,11,.92) 100%);
}
.hero__bg::before{background:radial-gradient(circle at 50% 50%,rgba(232,190,95,.28),transparent 60%)}

/* At phone width the four-step chain cannot sit in one row with arrows: it
   pushed the page to 519px. Two by two, no arrows, labels allowed to wrap. */
.chain4 li{min-width:0}
.chain4 b{white-space:normal}
@media (max-width:760px){
  .chain4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .5rem}
  .chain4__arrow{display:none}
  .laptop__base{margin-inline:-2%}
  .stat3{grid-template-columns:minmax(0,1fr)}
  .stat3__t{display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;align-items:center}
  .stat3__t b{grid-row:1/3}
  .stat3__t small{margin-top:.1rem}
}

/* =============================================================================
   HOMEPAGE — approved owner mockup sequence
   Hero → signals → products → how it works → one closing CTA → footer.
   ========================================================================== */
.page-home .hero .gold{color:inherit}
.page-home .sec--tight{padding-block:clamp(2rem,3.7vw,3.15rem)}
.page-home .signalband{padding-block:clamp(2.15rem,3.8vw,3.35rem)}
.page-home .signalband__photo img{object-position:72% 50%}
.page-home .signalband__photo::after{
  background:linear-gradient(90deg,#08080B 0%,#08080B 30%,rgba(8,8,11,.92) 43%,rgba(8,8,11,.24) 67%,rgba(8,8,11,.38) 100%);
}

.home-verticals{
  background:
    radial-gradient(60% 80% at 50% 0%,rgba(216,170,76,.10),transparent 70%),
    var(--ink-950);
}
.home-verticals .vgrid{gap:.7rem}
.home-verticals .vcard{border-color:color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.08))}
.home-verticals .vcard__top{padding:1rem .9rem .7rem}
.home-verticals .vcard__mark{height:68px;margin-bottom:.5rem}
.home-verticals .vcard__mark img{max-height:68px;height:68px}
.home-verticals .vcard__media{aspect-ratio:4/3.15}
.home-verticals .vcard__outcomes{padding:.75rem .9rem;gap:.38rem}
.home-verticals .vcard__foot{padding:0 .9rem .9rem}
.home-verticals .vcard__status{margin:0 .9rem .75rem}

.home-how .sec__head{margin-bottom:1.4rem}
.home-how .step{padding:.95rem .9rem 1rem}

.home-final{
  position:relative;overflow:hidden;border-block:1px solid rgba(232,190,95,.22);
  background:
    radial-gradient(42% 120% at 17% 50%,rgba(215,166,63,.22),transparent 70%),
    linear-gradient(100deg,#070709 0%,#111015 54%,#070709 100%);
}
.home-final__grid{
  min-height:clamp(250px,22vw,340px);display:grid;align-items:center;
  grid-template-columns:minmax(170px,.7fr) minmax(330px,1.2fr) minmax(320px,1fr);
  gap:clamp(1.4rem,3vw,3rem);padding-block:clamp(2rem,3.8vw,3.3rem);
}
.home-final__mark{height:clamp(180px,20vw,300px);display:grid;place-items:center}
.home-final__mark img{
  width:auto;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 48px rgba(232,190,95,.48));
}
.home-final__copy{text-align:center}
.home-final__copy .h2{margin-top:.55rem;font-size:clamp(2rem,3.3vw,3rem)}
.home-final__copy .btn{margin-top:1.25rem}
.home-final__brandline{margin-top:1rem;color:var(--gold-200);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase}
.home-final__pillars{display:grid;gap:.85rem}
.home-final__pillars div{padding-left:1rem;border-left:1px solid rgba(232,190,95,.38)}
.home-final__pillars b{display:block;color:var(--paper);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.home-final__pillars span{display:block;margin-top:.2rem;color:var(--muted);font-size:.8rem}

.page-home + .foot{padding-block:2rem 1.2rem}

@media (min-width:1025px){
  .page-home .hero{min-height:auto;padding-block:1.4rem 1.1rem}
  .page-home .hero__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
  .page-home .hero__stage{transform:scale(1.08);transform-origin:50% 55%}
  .page-home .stage{margin-top:-5.8rem}
}
@media (max-width:1024px){
  .home-final__grid{grid-template-columns:minmax(150px,.55fr) minmax(0,1.1fr)}
  .home-final__pillars{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .page-home .signalband__photo img{object-position:68% 50%}
  .page-home .signalband__photo::after{background:linear-gradient(180deg,rgba(8,8,11,.88),rgba(8,8,11,.78) 48%,rgba(8,8,11,.95))}
  .home-final__grid{grid-template-columns:minmax(0,1fr);text-align:center}
  .home-final__mark{height:150px}
  .home-final__pillars{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));text-align:left}
  .home-final__copy .btn{width:100%}
}