/*
 * pages.css — shared shell for the content + SEO pages (/faq and the two
 * intent pages). index.html is the marketing home and carries its own inline
 * styles; legal.css dresses the disclosures. This is the third surface: pages
 * that exist to be FOUND, read once, and converted from.
 *
 * ── TOKENS ARE MIRRORED, AND THAT IS ENFORCED ───────────────────────────────
 * The :root block below is a copy of the one in index.html, exactly as
 * legal.css already copies it. Three copies is a maintenance hazard, so
 * tests/states.mjs diffs the token values across all three files and fails on
 * drift. Change a colour in one place and the test tells you about the other
 * two. Do not "fix" this by deleting the block.
 *
 * ── DESIGN REFERENCES (Mobbin) ──────────────────────────────────────────────
 *   FAQ list, hairline dividers, no card chrome .. Bird "pricing FAQ"
 *      https://mobbin.com/sites/sections/6d0fade5-28d4-483f-94ef-07927dae0e58
 *      Taken: questions separated by rules rather than boxed into pills. The
 *      pill treatment (Lattice, Shuttle) reads SaaS; this brand is a brokerage
 *      and needs to read like a document, not a product page.
 *   Quiet "still stuck?" prompt under the list .. Craft "Frequently Asked Questions"
 *      https://mobbin.com/sites/sections/2a7f5774-6456-4b1f-ac56-bc01e3ef9125
 *      Taken: the contact line sits UNDER the questions, small, not as a
 *      competing hero button above them.
 *   Capture block: form beside proof ............ Retool "Book a demo"
 *      https://mobbin.com/sites/sections/28bdefd7-b788-406a-9eb0-bbecc46c65ba
 *      Taken: two-up split with the form on one side and specific, concrete
 *      proof on the other — not logos, actual claims. The dark ground on the
 *      proof side is what makes it read as a destination rather than a footer.
 *   Understated inline capture .................. Shopify Editions footer
 *      https://mobbin.com/sites/sections/4dac47cf-9132-440e-bc91-e29f3bf3d286
 *      Taken: the restraint. A single field row with the consent line directly
 *      beneath it, no illustration, no urgency copy.
 */

:root{
  --paper:#FAF8F5;
  --paper-2:#F3EFE9;
  --ink:#14110F;
  --ink-2:#241F1B;
  --brick:#9C3D2A;
  --brick-dk:#7E2F1F;
  --stone:#6B655E;
  --line:#E2DCD3;
  --serif:"Zodiak",Georgia,serif;
  --sans:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.12;margin:0}
a{color:var(--brick)}
a:hover{color:var(--brick-dk)}
button{font:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);margin:0 0 16px;
}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}

/* ---------- nav (matches index.html) ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(250,248,245,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.brand{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;text-decoration:none;white-space:nowrap;color:var(--ink);
}
.brand b{color:var(--brick);font-weight:500}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;text-decoration:none;color:var(--stone);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;
  font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--brick);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-brick{background:var(--brick);color:#fff}
.btn-brick:hover{background:var(--brick-dk);color:#fff}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
/* 900px, matching index.html. At 880px the two used to disagree — index showed
   a hamburger and these pages showed the full link row. */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:68px;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
  }
  .nav-links.on{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav-links .btn{margin-top:14px;border-bottom:0}
}

/* ---------- page hero ---------- */
.phero{padding:clamp(48px,7vw,92px) 0 clamp(30px,4vw,44px)}
.phero h1{font-size:clamp(34px,5.6vw,62px);max-width:19ch}
.phero h1 em{font-style:italic;color:var(--brick)}
.phero .sub{margin:24px 0 0;color:var(--stone);font-size:clamp(17px,2vw,19.5px);max-width:56ch}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.phero-note{margin-top:14px;font-size:13.5px;color:var(--stone);max-width:56ch}

/* breadcrumb — real navigation, and it is what shows in a search result */
.crumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--stone);
}
.crumb a{color:var(--stone);text-decoration:none}
.crumb a:hover{color:var(--brick)}
.crumb span[aria-hidden]{color:var(--line)}

/* ---------- prose ---------- */
.prose{max-width:68ch;padding-bottom:clamp(20px,4vw,36px)}
.prose h2{font-size:clamp(24px,3.1vw,32px);margin:clamp(44px,6vw,68px) 0 0}
.prose h3{font-family:var(--sans);font-size:17.5px;font-weight:600;letter-spacing:0;margin:32px 0 0}
.prose p{margin:16px 0 0}
.prose ul,.prose ol{margin:16px 0 0;padding-left:22px}
.prose li{margin:9px 0 0}
.prose strong{font-weight:600}
.prose .lede{font-size:clamp(18px,2.1vw,20px);color:var(--ink-2)}

/* a claim worth pointing at — same component as the legal pages */
.callout{margin:28px 0 0;padding:20px 22px;background:var(--paper-2);border-left:2px solid var(--brick)}
.callout p:first-child{margin-top:0}
.callout .mono{font-size:.92em}

/* numbered explainer rows, same rhythm as index's "how it works" */
.rows{margin:30px 0 0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.row .n{font-family:var(--mono);font-size:12px;color:var(--brick);padding-top:4px}
.row h3{margin:0}
.row p{margin:8px 0 0;color:var(--stone);font-size:15.5px}
@media (max-width:560px){.row{grid-template-columns:1fr;gap:6px}}

/* two-up comparison — used for "when off-market wins / when listing wins" */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:30px 0 0}
.two > div{background:var(--paper);padding:24px}
.two h3{margin:0 0 4px}
.two ul{margin:12px 0 0;padding-left:18px}
.two li{font-size:15.5px;color:var(--stone);margin:8px 0 0}
@media (max-width:720px){.two{grid-template-columns:1fr}}

/* ---------- FAQ (Bird: rules, not pills) ---------- */
.faq{max-width:78ch;margin:0;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,2.2vw,21px);line-height:1.35;
  transition:color .14s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brick)}
.qa summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--stone);border-bottom:1.5px solid var(--stone);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.qa[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.qa[open] summary{color:var(--brick)}
.qa-a{padding:0 0 26px;max-width:66ch}
.qa-a p{margin:0 0 0}
.qa-a p + p{margin-top:14px}
.qa-a ul{margin:14px 0 0;padding-left:20px}
.qa-a li{margin:7px 0 0}
/* Answers must be present in the DOM for the FAQPage schema to be honest, and
   <details> keeps them there — but they must also be reachable by in-page
   search and by an anchor link, so opening is forced when targeted. */
.qa:target{scroll-margin-top:86px}

.faq-more{margin:30px 0 0;font-size:15.5px;color:var(--stone)}

/* section heading above a FAQ group */
.faq-group{margin:clamp(40px,5vw,60px) 0 0}
.faq-group > h2{font-size:clamp(22px,2.7vw,27px);margin:0 0 6px}
.faq-group > p.gs{margin:0 0 18px;color:var(--stone);font-size:15.5px;max-width:60ch}

/* ---------- capture block (Retool split) ---------- */
.cap{margin:clamp(56px,8vw,92px) 0 0;border:1px solid var(--line);background:var(--paper-2)}
.cap-in{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:820px){.cap-in{grid-template-columns:1fr}}
.cap-form{padding:clamp(26px,4vw,40px)}
.cap-form h2{font-size:clamp(23px,2.9vw,29px);max-width:18ch}
.cap-form .cs{margin:12px 0 0;color:var(--stone);font-size:15.5px;max-width:44ch}
.cap-proof{
  background:var(--ink);color:var(--paper);padding:clamp(26px,4vw,40px);
  display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.cap-proof .pp{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.cap-proof .pn{font-family:var(--mono);font-size:11px;color:var(--brick);padding-top:5px}
.cap-proof h3{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:0;margin:0;color:var(--paper)}
.cap-proof p{margin:5px 0 0;font-size:14.5px;line-height:1.55;color:#B9B1A8}

/* form controls — mirror the gate modal so the two never look like two brands */
.f{margin-top:18px}
.f label{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
.f input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:16px;
}
.f input:focus{outline:none;border-color:var(--brick);box-shadow:0 0 0 3px rgba(156,61,42,.12)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:460px){.f2{grid-template-columns:1fr}}
.err{display:none;color:var(--brick);font-size:12.5px;margin-top:6px}
.err.on{display:block}
/* Specificity note: `.f label` is (0,1,1) and would beat a bare `.check`, which
   is what silently broke the consent row on the gate. Keep the element in the
   selector. */
.f label.check{
  display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  font-weight:400;font-size:13px;line-height:1.5;color:var(--stone);margin:0;
}
.f label.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--brick)}
.cap-submit{width:100%;margin-top:18px;padding:14px 20px;font-size:15px}
.cap-fine{margin:12px 0 0;font-size:12px;color:var(--stone);line-height:1.5}
.cap-done{display:none;padding:clamp(26px,4vw,40px)}
.cap-done h2{font-size:clamp(23px,2.9vw,29px)}
.cap-done p{margin:14px 0 0;color:var(--stone)}
.captured .cap-form{display:none}
.captured .cap-done{display:block}
/* The confirmation replaces the FORM, so it has to land in the form's column.
   Without this the dark proof panel is the first grid item after success and
   the layout mirrors itself the moment someone registers. */
.cap-form,.cap-done{order:1}
.cap-proof{order:2}

/* ---------- closing band ---------- */
.band{margin:clamp(56px,8vw,92px) 0 0;border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 0}
.band h2{font-size:clamp(26px,3.6vw,38px);max-width:20ch}
.band p{margin:18px 0 0;color:var(--stone);max-width:56ch}
.band-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- sticky mobile CTA ---------- */
/* Phone only. A persistent bar on desktop steals a whole row of the viewport
   for a button that is already in the sticky nav two inches above it. */
.sticky{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(250,248,245,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px var(--pad);
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.sticky .btn{width:100%}
/* 900px, matching index.html. At 880px the two used to disagree — index showed
   a hamburger and these pages showed the full link row. */
@media (max-width:900px){
  .sticky{display:block}
  /* Reserve the bar's height so it never covers the last line of the footer. */
  body{padding-bottom:76px}
}
@media print{.sticky,.nav{display:none}}

/* ---------- footer (matches legal.css) ---------- */
.foot{border-top:1px solid var(--line);padding:44px 0 56px;background:var(--paper-2)}
.foot-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;padding-bottom:26px;border-bottom:1px solid var(--line);
}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{font-size:14.5px;text-decoration:none;color:var(--stone)}
.foot-links a:hover{color:var(--ink)}
.disc{margin:24px 0 0;font-size:13px;line-height:1.62;color:var(--stone);max-width:88ch}
.disc strong{color:var(--ink-2);font-weight:600}
.eho{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
}
.eho svg{flex:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}