/* VOUCH site, the one stylesheet. Shared by all four routes. */
:root{
  --ink:#16170F;
  --brand:#FFFD38;
  --paper:#FFFFFF;
  --paper-warm:#F7F7F2;
  --ink-2:#444444;
  --ink-3:#6E6E6E;
  --rule-soft:#E7E5DE;

  --font-display:"Archivo",'Bahnschrift Condensed','Bahnschrift',
                 'Avenir Next Condensed','HelveticaNeue-CondensedBold',
                 'Arial Narrow',Impact,sans-serif;
  --font-body:"Geist",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,
              'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
              'Liberation Mono',monospace;

  --d1:clamp(3rem,9.5vw,6.5rem);
  --d2:clamp(2rem,6vw,3.5rem);
  --d3:clamp(1.4rem,4.5vw,2rem);
  --d4:clamp(2.5rem,10vw,3.5rem);
  --d5:clamp(.7rem,2vw,.8125rem);

  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:1.5rem;
  --s5:2rem;  --s6:3rem;  --s7:5rem; --s8:7rem;

  --ease:cubic-bezier(.23,1,.32,1);
  --gut:1.25rem;
  --pill:999px;

  /* FAQ accordion motion, ported from gab-ai-consulting-site. Durations live
     in tokens so reduced-motion can shorten them in one place. */
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --faq-dur:.56s;
  --faq-fade:.42s;
}
@media (min-width:768px){ :root{ --gut:2rem; } }
@media (prefers-reduced-motion:reduce){
  :root{ --faq-dur:.22s; --faq-fade:.16s; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--font-display); font-stretch:75%; font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:.96;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--d1); }
h2{ font-size:var(--d2); }
h3{ font-size:var(--d3); }
p{ margin:0; text-wrap:pretty; }
img{ display:block; max-width:100%; }

.container{ width:100%; max-width:78rem; margin-inline:auto; padding-inline:var(--gut); }
.stack > * + *{ margin-top:var(--s3); }
.stack-lg > * + *{ margin-top:var(--s5); }

/* ---- THE LIST RESET, AND WHY IT IS IN :where() -----------------------------
   Every list component below needs margin:0 to kill the browser's default
   list margin. Written as a plain class that reset had the SAME specificity as
   `.stack-lg > * + *` and was declared later in the file, so it also killed
   the stack's top margin and the list collided with the heading above it. The
   steps list overlapped its heading by 15px and the cards' top rule cut
   through the bottom of "WHY JOIN VOUCH?".

   :where() carries zero specificity, so this still beats the user agent
   stylesheet but loses to every author rule, which is exactly what a reset
   should do. Add new list components here rather than giving them their own
   margin:0. */
:where(.steps, .cards, .checks, .price-list, .checklist){ margin:0; padding:0; }

/* A list that follows a display heading takes the larger step. Two lines of
   condensed caps need more air under them than a paragraph does, and these
   components carry a rule or a badge at their top edge that reads as attached
   to the heading if the gap is tight. */
.stack-lg > * + :is(.steps, .cards, .checks){ margin-top:var(--s6); }
.measure{ max-width:60ch; }
.body-lg{ font-size:1.0625rem; line-height:1.55; }
.small{ font-size:.875rem; line-height:1.5; color:var(--ink-2); }
.surface-ink .small{ color:#C9C4BC; }

.act{ position:relative; padding-block:var(--s7); }
@media (min-width:768px){ .act{ padding-block:var(--s8); } }
.surface-ink{ background:var(--ink); color:var(--paper-warm); }
.surface-brand{ background:var(--brand); color:var(--ink); }
.surface-warm{ background:var(--paper-warm); }

.tape{
  display:inline-block;
  font-family:var(--font-display); font-stretch:75%; font-weight:800;
  font-size:var(--d5);
  letter-spacing:.14em;
  background:var(--ink); color:var(--brand);
  padding:.35em .85em .27em;
  border-radius:var(--pill);
}
.surface-ink .tape{ background:var(--brand); color:var(--ink); }

/* ---- pills, the brand's actual button shape ----------------------------- */
.btn{
  display:inline-block;
  font:inherit; font-weight:700; font-size:1rem;
  padding:.95em 1.7em;
  border:2px solid var(--ink);
  border-radius:var(--pill);
  background:var(--brand); color:var(--ink);
  text-decoration:none; cursor:pointer;
  transition:transform .15s var(--ease), background-color .15s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{ background:transparent; }
.btn--ghost:hover{ background:var(--brand); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding-block:.85rem;
}
.wordmark{
  font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:1.6rem; letter-spacing:-.01em;
  text-decoration:none; color:var(--ink);
}
.wordmark sup{ font-size:.42em; vertical-align:super; }
.nav .btn{ padding:.6em 1.2em; font-size:.875rem; }

/* ==========================================================================
   HERO. Copy left, the wall right.
   ========================================================================== */
.hero{ padding-block:var(--s6) var(--s7); overflow:hidden; position:relative; }

/* Below 960 the order is mark, headline, WALL, then the rest.
   The wall is the proof and it is the reason this direction exists, so it
   cannot sit below the fold on a phone. Copy that would push it down goes
   underneath it instead. */
.hero__grid{ display:flex; flex-direction:column; gap:var(--s5); }
.hero__head{ order:1; }
.wall{ order:2; }
.hero__tail{ order:3; }
.hero__tail > * + *{ margin-top:var(--s5); }
@media (min-width:960px){
  .wall{ height:clamp(28rem,78vh,42rem); }
  .hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:var(--s4) var(--s6);
    align-items:center;
  }
  .hero__head{ grid-column:1; grid-row:1; align-self:end; }
  .hero__tail{ grid-column:1; grid-row:2; align-self:start; }
  .wall{ grid-column:2; grid-row:1 / span 2; }
}
.hero .btn-row{ margin-top:var(--s5); }

.mark{
  width:5.5rem; height:5.5rem; border-radius:50%;
  background:var(--brand);
  display:grid; place-items:center;
  margin-bottom:var(--s4);
}
.mark svg{ width:2.9rem; height:2.9rem; }

/* ---- THE WALL -----------------------------------------------------------
   Two columns, opposite directions. Each column holds its cards TWICE so the
   loop is seamless: the JS wraps at exactly half the track height, which is
   the height of one full set.                                              */
.wall{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--s3);
  /* short on a phone so it clears the fold with the headline above it,
     full height once there is a second column to fill */
  height:clamp(17rem,40vh,21rem);
  /* the rows fade out at both ends rather than being hard-cut by overflow */
  -webkit-mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
          mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  overflow:hidden;
}
.wall__col{ position:relative; }
.wall__track{ display:grid; gap:var(--s3); will-change:transform; }

.post{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:var(--paper-warm);
  border:1px solid var(--rule-soft);
  /* elevation 1, offset and blurred, tinted to the ground */
  box-shadow:0 6px 18px rgba(26,26,26,.10);
}
.post img{ width:100%; height:auto; aspect-ratio:232/344; object-fit:cover; }
.post__pill{
  position:absolute; top:.6rem; left:50%;
  transform:translateX(-50%);
  background:var(--brand); color:var(--ink);
  font-family:var(--font-body);
  font-weight:700; font-size:.9375rem;
  font-variant-numeric:tabular-nums;
  padding:.4em 1em;
  border-radius:var(--pill);
  box-shadow:0 2px 8px rgba(26,26,26,.18);
  white-space:nowrap;
}

/* With no script the wall is simply a static grid of the seven posts. */
.no-js-note{ display:none; }

/* ==========================================================================
   THE RECEIPT. Kept from the previous direction: it is the only interactive
   proof that the published rate is the rate. Demoted from hero star to its
   own act, which is where it belongs.
   ========================================================================== */
.receipt{
  position:relative;
  background:var(--paper-warm);
  color:var(--ink);
  padding:var(--s4) var(--s4) var(--s5);
  border-radius:14px 14px 0 0;
  box-shadow:0 10px 30px rgba(26,26,26,.13);
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    radial-gradient(9px 9px at 9px 0, transparent 0 8.2px, #000 8.4px) bottom left/18px 9px repeat-x;
          mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,
    radial-gradient(9px 9px at 9px 0, transparent 0 8.2px, #000 8.4px) bottom left/18px 9px repeat-x;
}
.receipt::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.receipt__head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3);
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.04em; color:var(--ink-2);
}
.stamp{
  border:2px solid var(--ink); border-radius:6px;
  padding:.2em .5em; text-align:center;
  font-family:var(--font-display); font-stretch:75%; font-weight:800; letter-spacing:.1em; line-height:1.05;
  transform:rotate(-3deg);
}
.stamp span{ display:block; }
.stamp .l1{ font-size:.8125rem; }
.stamp .l2{ font-size:.6875rem; }
@media (max-width:479px){ .stamp{ transform:rotate(-3deg) scale(.82); transform-origin:right top; } }

.rule{ border:0; border-top:1px dashed var(--rule-soft); margin:var(--s3) 0; }
.rule--hard{ border-top:2px solid var(--ink); }

.row{ display:flex; align-items:baseline; gap:.5rem; font-family:var(--font-mono); font-size:.8125rem; }
.row + .row{ margin-top:.55rem; }
.row__label{ flex:0 1 auto; min-width:0; overflow-wrap:anywhere; letter-spacing:.05em; color:var(--ink-2); }
.row__dots{ flex:1 1 auto; min-width:12px; border-bottom:1px dotted var(--ink-3); transform:translateY(-4px); }
.row__fig{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:600; }

.total-label{ font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:.875rem; letter-spacing:.12em; margin-top:var(--s4); color:var(--ink-2); }
.total{ font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:var(--d4); line-height:.9; font-variant-numeric:tabular-nums; }

.pr{ clip-path:inset(0 0 0 0); opacity:1; }
.js .pr{ clip-path:inset(0 0 100% 0); opacity:0; transform:translateY(-3px); }
.js .is-printed .pr{ animation:print .34s var(--ease) both; animation-delay:calc(var(--i,0) * 46ms); }
@keyframes print{
  from{ clip-path:inset(0 0 100% 0); opacity:0; transform:translateY(-3px); }
  to{   clip-path:inset(0 0 0 0);    opacity:1; transform:translateY(0); }
}

/* ---- chips. Pill shaped, to match the brand. On WHITE here, so an
   unselected chip is paper with an ink border and that is legible.          */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chips--tier{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
@media (min-width:640px){ .chips--tier{ grid-template-columns:repeat(3,1fr); } }
.chip{
  font:inherit; font-size:.875rem; font-weight:600; line-height:1.2;
  padding:.6em .9em;
  border:2px solid var(--ink); border-radius:var(--pill);
  background:var(--paper); color:var(--ink); cursor:pointer;
  transition:transform .14s var(--ease), background-color .14s var(--ease), color .14s var(--ease);
}
.chip:hover{ transform:translateY(-1px); }
.chip[aria-checked="true"]{ background:var(--ink); color:var(--brand); }
.field-label{ font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:var(--d5); letter-spacing:.12em; display:block; margin-bottom:.5rem; }

/* ==========================================================================
   STEPS, RATES, CHECKS, PEAK, JOIN
   ========================================================================== */
/* The badge size is a variable because the row's top padding has to clear it.
   When those two were set independently the badge was 2.2rem tall at top:0
   while the padding was 2rem, so the number sat on top of the heading. */
.steps{
  --badge:2.2rem;
  list-style:none; counter-reset:s;
  display:grid; gap:var(--s4);
}
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); gap:var(--s5); } }

.steps li{ position:relative; padding-top:calc(var(--badge) + var(--s2)); }
.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; top:0; left:0;
  font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:1.15rem; line-height:1;
  width:var(--badge); height:var(--badge); border-radius:50%;
  background:var(--brand); color:var(--ink);
  display:grid; place-items:center;
}
.steps h3{ margin-bottom:.4rem; }

.ratewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; }
table.rates{ width:100%; min-width:32rem; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.rates th,.rates td{ text-align:right; padding:.8rem .7rem; border-bottom:1px solid var(--rule-soft); font-size:.9375rem; }
.rates th:first-child,.rates td:first-child{ text-align:left; }
.rates thead th{ font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:.8125rem; letter-spacing:.1em; border-bottom:2px solid var(--ink); }
.rates tbody tr.is-on td{ background:var(--brand); }
.rates td.fig{ font-family:var(--font-mono); font-weight:600; }

.checks{ display:grid; gap:var(--s3); list-style:none; }
@media (min-width:640px){ .checks{ grid-template-columns:1fr 1fr; } }
.checks li{
  display:flex; align-items:flex-start; gap:.8rem;
  padding:var(--s3) var(--s4);
  background:var(--paper); border:2px solid var(--ink); border-radius:14px;
}
.checks .no{
  flex:0 0 auto; font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:1.1rem; line-height:1;
  background:var(--ink); color:var(--brand);
  width:1.8rem; height:1.8rem; border-radius:50%;
  display:grid; place-items:center;
}

.peak{ background:var(--ink); color:var(--paper-warm); padding-block:var(--s8); overflow:hidden; position:relative; }
.peak__receipt{ max-width:23rem; margin-inline:auto; }
.peak .receipt{ border:2px solid var(--brand); box-shadow:none; }
.paid{
  position:absolute; right:var(--s4); bottom:var(--s5);
  font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:clamp(1.8rem,6vw,2.6rem);
  letter-spacing:.06em; color:var(--ink);
  border:4px solid currentColor; border-radius:8px;
  background:var(--brand);
  padding:.05em .3em; transform:rotate(-13deg); opacity:0;
}
.js .is-paid .paid{ animation:stamp .34s var(--ease) both; animation-delay:.45s; }
@keyframes stamp{ from{ opacity:0; transform:rotate(-13deg) scale(1.5); } to{ opacity:1; transform:rotate(-13deg) scale(1); } }

.form{ display:grid; gap:var(--s3); max-width:30rem; }
.form input[type=email]{
  font:inherit; font-size:1rem; padding:.9em 1.1em;
  border:2px solid var(--ink); border-radius:var(--pill);
  background:var(--paper); color:var(--ink); width:100%;
}
.note{ border-left:2px solid var(--ink); padding-left:var(--s3); font-size:.875rem; color:var(--ink-2); }
.surface-brand .note{ color:var(--ink); }

/* ---- the rotating sticker, lifted from their live site ------------------ */
/* Overlap is the strongest depth cue there is, so the sticker sits ON the
   wall rather than being half cut off by the viewport edge, which just read
   as a clipping bug. */
.sticker{
  position:absolute; right:.5rem; top:7%;
  width:9.5rem; height:9.5rem; pointer-events:none; z-index:3;
}
.sticker svg{ width:100%; height:100%; animation:spin 22s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width:959px){ .sticker{ display:none; } }

/* ---- reveals ------------------------------------------------------------ */
.js .rv{ opacity:0; transform:translateY(16px) scale(.985); }
.js .rv.is-in{ animation:rise .55s var(--ease) both; animation-delay:calc(var(--i,0) * 60ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } }

/* scroll-linked, same engine as the previous direction */
.js .rates tbody tr{ clip-path:inset(0 calc((1 - var(--rp,0)) * 100%) 0 0); opacity:calc(.25 + var(--rp,0) * .75); }
.js .checks li{ transform:translate3d(0,calc((1 - var(--cp,0)) * 18px),0); opacity:var(--cp,0); }
.js .peak__receipt{ transform:translate3d(0,calc((.5 - var(--p,0)) * 48px),0); will-change:transform; }

:where(a,button,input,[tabindex]):focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.peak :where(a,button,input):focus-visible{ outline-color:var(--brand); }
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .js .pr,.js .rv{ opacity:1; transform:none; clip-path:none; }
  .js .rates tbody tr{ clip-path:none!important; opacity:1!important; }
  .js .checks li{ transform:none!important; opacity:1!important; }
  .js .peak__receipt{ transform:none!important; }
  .js .is-paid .paid{ opacity:1; animation:none; }
  .sticker svg{ animation:none; }
}

@media print{
  .nav,.sticker,.wall{ display:none; }
  body,.surface-ink,.peak{ background:#fff!important; color:#000!important; }
  a::after{ content:" (" attr(href) ")"; font-size:.8em; }
}

/* ==========================================================================
   ADDED FOR THE FOUR-ROUTE BUILD
   Everything below exists because the live site has it and the one-page
   direction did not: a real nav, benefit cards, a campaigns empty state,
   pricing, FAQ accordions, the help centre, and the book-a-demo modal.
   ========================================================================== */

/* ---- nav with actual routes --------------------------------------------- */
.nav__links{ display:none; gap:var(--s4); align-items:center; }
@media (min-width:880px){ .nav__links{ display:flex; } }
.nav__links a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:.9375rem;
  padding:.25rem 0; border-bottom:2px solid transparent;
}
.nav__links a:hover{ border-bottom-color:var(--ink); }
.nav__links a[aria-current="page"]{ border-bottom-color:var(--brand); }
.nav__right{ display:flex; align-items:center; gap:var(--s3); }

/* A real menu on small screens, built on details so it needs no script. */
.menu{ position:relative; }
@media (min-width:880px){ .menu{ display:none; } }
.menu > summary{
  list-style:none; cursor:pointer;
  width:2.75rem; height:2.75rem;
  border:2px solid var(--ink); border-radius:50%;
  display:grid; place-items:center;
}
.menu > summary::-webkit-details-marker{ display:none; }
.menu__icon{ width:1.1rem; height:2px; background:var(--ink); position:relative; }
.menu__icon::before,.menu__icon::after{
  content:""; position:absolute; left:0; width:1.1rem; height:2px; background:var(--ink);
}
.menu__icon::before{ top:-6px; }
.menu__icon::after{ top:6px; }
.menu__panel{
  position:absolute; right:0; top:calc(100% + .6rem);
  background:var(--paper); border:2px solid var(--ink); border-radius:14px;
  padding:var(--s3); min-width:13rem; display:grid; gap:.35rem;
  box-shadow:0 12px 30px rgba(26,26,26,.16); z-index:50;
}
.menu__panel a{ color:var(--ink); text-decoration:none; font-weight:600; padding:.5rem .6rem; border-radius:10px; }
.menu__panel a:hover{ background:var(--paper-warm); }

/* ---- a page hero that is not the home hero ------------------------------ */
.page-hero{ padding-block:var(--s6) var(--s5); }
.page-hero h1{ margin-top:var(--s3); }
.page-hero .body-lg{ margin-top:var(--s4); }
.page-hero .btn-row{ margin-top:var(--s5); }

/* ---- benefit cards ------------------------------------------------------
   Not a uniform icon-heading-text grid. The rule across the top and the
   uneven counts are what keep this from reading as the stock generated page.
   -------------------------------------------------------------------------- */
.cards{ display:grid; gap:var(--s4); list-style:none; }
@media (min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .cards--3{ grid-template-columns:repeat(3,1fr); } }
.cards li{ padding:var(--s4) 0 0; border-top:2px solid var(--ink); }
.cards li h3{ margin-bottom:.5rem; }
.cards--boxed li{
  padding:var(--s4); border:2px solid var(--ink); border-top-width:2px;
  border-radius:18px; background:var(--paper);
}

/* ---- campaigns empty state ----------------------------------------------
   There are zero brands. An invented campaign list would be fabricated proof,
   so this ships as an honest empty state instead of three fake logos.
   -------------------------------------------------------------------------- */
.empty{
  border:2px dashed var(--ink); border-radius:18px;
  padding:var(--s5); text-align:center; background:var(--paper-warm);
}
.empty__mark{
  width:3.5rem; height:3.5rem; border-radius:50%; background:var(--brand);
  display:grid; place-items:center; margin:0 auto var(--s3);
  font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:1.4rem;
}

/* ---- the handle field on the members calculator -------------------------- */
.handle{
  display:flex; align-items:center; gap:.5rem;
  border:2px solid var(--ink); border-radius:var(--pill);
  padding:.3rem .3rem .3rem 1rem; background:var(--paper);
  max-width:26rem;
}
.handle input{
  font:inherit; font-size:1rem; border:0; outline:0; background:none; color:var(--ink);
  flex:1 1 auto; min-width:0; padding:.55rem 0;
}
.handle .btn{ padding:.6em 1.1em; font-size:.875rem; flex:0 0 auto; }

/* ---- pricing ------------------------------------------------------------- */
.pricing{ display:grid; gap:var(--s4); }
@media (min-width:860px){ .pricing{ grid-template-columns:1.15fr 1fr; align-items:start; } }
.price-card{ border:2px solid var(--ink); border-radius:18px; padding:var(--s5); background:var(--paper); }
.price-card--lead{ background:var(--brand); }
.price-card h3{ margin-bottom:var(--s3); }
.price-list{ list-style:none; display:grid; gap:.7rem; }
.price-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9375rem; }
.price-list .tick{ flex:0 0 auto; font-weight:700; }

/* ---- ANIMATED FAQ, ported from gab-ai-consulting-site ---------------------
   Used everywhere there is a question and answer list: members, brands, and
   all 24 help centre articles.

   Two genuinely separate column stacks, not a two-column grid: in a grid the
   row height is shared, so opening an item on the left pushes the right
   column down with it. Two flex stacks reflow independently. The help centre
   uses the single-column variant, because it already sits beside a sidebar.

   Ships open in markup, so every answer is readable with no script. The
   script collapses everything on load and turns it into an accordion, one
   question open at a time. The `hidden` attribute cannot be transitioned, so
   the collapsed state lives in a class and the height animates via
   grid-template-rows 0fr to 1fr, which eases to the real content height
   without hardcoding one. -------------------------------------------------- */
.faq-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start; gap:.85rem;
}
@media (max-width:860px){ .faq-list{ grid-template-columns:1fr; } }
/* One column, and a flex stack rather than a grid so it needs no .faq-col
   wrapper. The help centre uses this: it already sits beside a sidebar, so a
   second column would make the lines too short to read comfortably. */
.faq-list--single{ display:flex; flex-direction:column; gap:.85rem; }
.faq-col{ display:flex; flex-direction:column; gap:.85rem; min-width:0; }

.faq-item{
  background:var(--paper); border:2px solid var(--ink);
  border-radius:14px; overflow:hidden;
}
.faq-item h3{ margin:0; font-size:1rem; }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); text-align:left; background:none; border:0; cursor:pointer;
  color:var(--ink); font:inherit; font-weight:700; font-size:1.0625rem;
  line-height:1.4; padding:var(--s3) var(--s4); min-height:60px;
}
/* Circular toggle, not a bare glyph, so the affordance reads as a control. */
.pm{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(26,26,26,.05); border:2px solid var(--ink); color:var(--ink);
  transition:transform var(--faq-dur) var(--ease-out-quint),
             background-color .2s, color .2s, border-color .2s;
}
.pm line{ stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.faq__q:hover .pm{ border-color:var(--ink); background:var(--paper-warm); }
/* Opening spins the plus a half turn past centre so it lands as a cross. */
.faq__q[aria-expanded="true"] .pm{
  transform:rotate(225deg); background:var(--ink); border-color:var(--ink); color:var(--brand);
}
.faq__a{ color:var(--ink-2); font-size:.9375rem; line-height:1.65; }
/* The animated child is whatever single element the panel wraps: a bare <p>
   on members and brands, a multi-paragraph .faq__body in the help centre.
   Targeting the child rather than <p> specifically is what lets both work. */
.faq__a > *{ max-width:68ch; padding:0 var(--s4) var(--s3); margin:0; }
.faq__a > * > p{ margin:0; }
.faq__a > * > p + p{ margin-top:var(--s3); }

.js .faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--faq-dur) var(--ease-out-quint);
}
.js .faq__a > *{
  overflow:hidden; min-height:0; padding-bottom:0; opacity:0; visibility:hidden;
  transition:opacity var(--faq-fade),
             padding-bottom var(--faq-dur) var(--ease-out-quint),
             visibility 0s linear var(--faq-dur);
}
.js .faq-item.is-open .faq__a{ grid-template-rows:1fr; }
.js .faq-item.is-open .faq__a > *{
  padding-bottom:var(--s3); opacity:1; visibility:visible;
  transition:opacity var(--faq-fade),
             padding-bottom var(--faq-dur) var(--ease-out-quint),
             visibility 0s;
}
.js .faq-item{ transition:background-color .2s, border-color .2s; }
.js .faq-item.is-open{ background:var(--paper-warm); }

/* ---- help centre --------------------------------------------------------- */
.help{ display:grid; gap:var(--s5); }
@media (min-width:960px){ .help{ grid-template-columns:15rem 1fr; align-items:start; } }
.help__side{ display:grid; gap:var(--s4); }
@media (min-width:960px){ .help__side{ position:sticky; top:5.5rem; } }
.help__side h3{ font-size:1rem; margin-bottom:.6rem; }
.help__side ul{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.help__side a{ color:var(--ink-2); text-decoration:none; font-size:.9375rem; }
.help__side a:hover{ color:var(--ink); text-decoration:underline; }
.help__cat + .help__cat{ margin-top:var(--s6); }
.help__cat > h2{ margin-bottom:var(--s4); font-size:var(--d3); }

/* Audience switch. A radiogroup, not a tablist: it filters one list rather
   than swapping panels, so it must not promise tab semantics. */
.switch{
  display:inline-flex; gap:.35rem; padding:.35rem;
  border:2px solid var(--ink); border-radius:var(--pill); background:var(--paper);
}
.switch button{
  font:inherit; font-weight:700; font-size:.9375rem;
  padding:.55em 1.2em; border:0; border-radius:var(--pill);
  background:none; color:var(--ink); cursor:pointer;
  transition:background-color .15s var(--ease), color .15s var(--ease);
}
.switch button[aria-checked="true"]{ background:var(--ink); color:var(--brand); }

/* ==========================================================================
   BOOK A DEMO MODAL
   A working date and time picker. It selects, it validates, and it stops at a
   confirmation screen that states plainly that nothing was booked and nothing
   was sent. No button shows a success state for an action that did not occur.
   ========================================================================== */
.modal[hidden]{ display:none !important; }
.modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:var(--s3);
  background:rgba(26,26,26,.55);
}
.modal__card{
  width:min(53rem,100%); max-height:92vh; overflow:auto;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--ink); border-radius:20px;
  box-shadow:0 24px 60px rgba(26,26,26,.3);
}
.modal__head{ padding:var(--s4) var(--s5) var(--s3); position:relative; }
.modal__head h2{ margin-top:.6rem; }
.modal__close{
  position:absolute; top:var(--s3); right:var(--s3);
  width:2.5rem; height:2.5rem; border-radius:50%;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  font-size:1.1rem; line-height:1; cursor:pointer;
}
.modal__close:hover{ background:var(--brand); }
.modal__body{ display:grid; gap:0; border-top:2px solid var(--ink); }
@media (min-width:720px){ .modal__body{ grid-template-columns:1.1fr 1fr; } }
.modal__cal{ padding:var(--s4) var(--s5); }
@media (min-width:720px){ .modal__cal{ border-right:2px solid var(--ink); } }
.modal__slots{ padding:var(--s4) var(--s5); }
.modal__foot{
  border-top:2px solid var(--ink); padding:var(--s3) var(--s5);
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--s3); flex-wrap:wrap;
}
.modal__done{ padding:var(--s5); text-align:center; }

.cal__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.cal__nav{
  width:2.2rem; height:2.2rem; border-radius:50%;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  cursor:pointer; font-size:1rem; line-height:1;
}
.cal__nav:hover:not(:disabled){ background:var(--brand); }
.cal__nav:disabled{ opacity:.35; cursor:not-allowed; }
.cal__month{ font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:1.15rem; letter-spacing:.06em; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem; }
.cal__dow{ font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:.7rem; letter-spacing:.1em; color:var(--ink-2); text-align:center; padding-bottom:.4rem; }
.cal__day{
  aspect-ratio:1; display:grid; place-items:center;
  font:inherit; font-size:.9375rem; font-variant-numeric:tabular-nums;
  border:2px solid transparent; border-radius:50%;
  background:none; color:var(--ink); cursor:pointer;
}
.cal__day:hover:not(:disabled){ border-color:var(--ink); }
.cal__day:disabled{ color:#B4B4B4; cursor:not-allowed; }
.cal__day[aria-pressed="true"]{ background:var(--brand); border-color:var(--ink); font-weight:700; }
.cal__tz{ margin-top:var(--s3); font-size:.8125rem; color:var(--ink-2); }

.slots{ display:grid; gap:.5rem; max-height:19rem; overflow:auto; padding-right:.25rem; }
.slot{
  font:inherit; font-size:.9375rem; font-weight:600;
  padding:.7em 1em; border:2px solid var(--ink); border-radius:var(--pill);
  background:var(--paper); color:var(--ink); cursor:pointer; text-align:center;
}
.slot[aria-pressed="true"]{ background:var(--ink); color:var(--brand); }
.slots__empty{ color:var(--ink-2); font-size:.9375rem; text-align:center; padding:var(--s5) 0; }

.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn:disabled:hover{ transform:none; }

/* ==========================================================================
   25 SEPT PASS. Components for the four-step model on both sides, the
   worked example table and the traffic model. Rationale is in NOTES.md.
   ========================================================================== */

/* Four-step lists. Two columns first, four once there is room for them. */
@media (min-width:768px){ .steps--4{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .steps--4{ grid-template-columns:repeat(4,1fr); } }

/* A steps list inside a half-width column stays one column at every width. */
.steps.steps--stack{ grid-template-columns:1fr; gap:var(--s4); }

/* Both sides of the marketplace, side by side on the home page. */
.sides{ display:grid; gap:var(--s6); }
@media (min-width:860px){ .sides{ grid-template-columns:1fr 1fr; } }
.side > * + *{ margin-top:var(--s4); }

/* The example chip on every wall post. The wall is example content, and each
   card says so on its own face, not only in a caption under the hero. */
.post__tag{
  position:absolute; left:.6rem; bottom:.6rem;
  background:rgba(26,26,26,.82); color:var(--paper);
  font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:.75rem; letter-spacing:.12em;
  line-height:1; padding:.45em .75em .35em;
  border-radius:var(--pill);
  white-space:nowrap;
}
/* Below 960 the wall cards are only 85 to 110px wide. The pill shrinks to fit
   and the chip drops the format word, keeping the word that matters. */
@media (max-width:959px){
  .post__pill{ font-size:.6875rem; padding:.35em .65em; top:.4rem; }
  .post__tag{ font-size:.625rem; left:.4rem; bottom:.4rem; padding:.4em .6em .3em; }
  .post__fmt{ display:none; }
}

/* The worked example table is static. The scroll-linked reveal above is only
   driven for #rate-table, so without this every row here would stay clipped
   to nothing. */
.js .rates--static tbody tr{ clip-path:none; opacity:1; }
.rates tfoot td{ font-weight:700; border-top:2px solid var(--ink); border-bottom:0; }

/* One large figure with its label: the all-in cost per piece. */
.figure-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; }
.figure-line__n{ font-family:var(--font-display); font-stretch:75%; font-weight:800; font-size:var(--d2); line-height:.9; font-variant-numeric:tabular-nums; }
.figure-line__l{ font-size:1.0625rem; max-width:36ch; }

/* Example campaign cards on the members page. */
.campaign__meta{ margin-top:var(--s3); font-size:.875rem; color:var(--ink-2); }

/* Cards on the dark band. .surface-ink sets light text, and a white card
   would inherit it and go blank. */
.surface-ink .price-card{ color:var(--ink); }

/* ---- v3, 28 Sep, light mode: the app bar from the home page, on every route */
.nav{ background:rgb(244 245 240 / .88); border-bottom-color:rgb(22 23 15 / .12); }
.nav .wordmark{ color:#16170F; }
.nav__links a{ font-weight:500; color:#56574D; border-bottom:0; padding:.45rem .8rem; border-radius:999px; }
.nav__links a:hover{ color:#16170F; }
.nav__links a[aria-current="page"]{ color:#16170F; background:#EEEFE9; }
.nav .btn{ border-color:transparent; }