/* ── We Answer Every Call — inner-page components + utilities ───────────────
   Loads AFTER base.css, which owns the tokens and the button. Nothing here
   may declare a raw colour or a loose pixel value — reach for a token.     */

/* ── We Answer Every Call — shared site styles (brand tokens v2) ────────── */



html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--canvas);
  padding:14px 20px;border-radius:0 0 12px 0;z-index:100;font-weight:700;text-decoration:none}
.skip:focus{left:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
h1,h2,h3,h4{font-family:var(--font-display)}
h1,h2{letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
h3{letter-spacing:-.02em;line-height:1.32;text-wrap:balance}
h1,h2{hanging-punctuation:first last}
p,li{text-wrap:pretty}
/* app-like page-to-page fade on browsers that support it; free elsewhere */
@view-transition{navigation:auto}

/* one-tap call bar (small screens) */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);align-items:center;justify-content:center;gap:14px;
  padding:14px 18px;min-height:74px}
.callbar a{color:var(--canvas);font-weight:700;font-size:var(--text-lg);text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;min-height:44px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-veil);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.brand{display:flex;align-items:center;gap:13px;min-height:44px;min-width:44px;font-weight:700;font-size:var(--text-lg);letter-spacing:-.02em;text-decoration:none}
.nav .links{display:flex;align-items:center;gap:28px}
.nav .links a{font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.nav .links a:hover,.nav .links a[aria-current=page]{color:var(--ink)}
.nav .right{display:flex;align-items:center;gap:10px}
/* mobile menu */
.menu-btn{display:none;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;
  align-items:center;justify-content:center;border-radius:12px;color:var(--ink)}
.menu-btn:hover{background:var(--canvas-deep)}
.nav .panel{display:none;position:absolute;top:100%;left:0;right:0;
  background:var(--canvas);box-shadow:var(--shadow-md);
  border-bottom:1px solid var(--line);flex-direction:column;padding:6px 22px 14px}
.nav.open .panel{display:flex}
.nav .panel a{padding:14px 2px;font-size:var(--text-base);font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line);min-height:44px;
  display:flex;align-items:center}
.nav .panel a:last-child{border-bottom:0}

/* page hero (inner pages) */
.page-hero{padding:var(--sect) 0 clamp(40px,6vw,56px)}
.page-hero .wrap{position:relative}
/* the vertical's cast member: rides the hero's right column on wide screens,
   stands beneath the copy on small ones */
/* Every character is a 900x900 transparent square with the figure standing on a
   common ground line (site/tools/characters.py). Because the canvas is uniform,
   ONE width renders every page's character at exactly the same size — which is
   the whole point: a trade page and a pricing page must not look like different
   websites. aspect-ratio reserves the box before the image loads, so the hero
   does not jump. Do not set a height here; the canvas already carries it. */
.hero-char{display:block;width:min(370px,27vw);aspect-ratio:1;height:auto;
  pointer-events:none;position:absolute;right:24px;bottom:-6px}
/* the copy must never run underneath the figure */
@media (min-width:1000px){
  .page-hero h1,.page-hero .lede{max-width:min(60%,32em)}
  /* a short hero (pricing has no lede) is otherwise shorter than the figure,
     which then rides up under the sticky nav and gets clipped */
  .page-hero .wrap{min-height:392px}
}
@media (max-width:999px){
  .hero-char{position:static;width:min(280px,62vw);margin:24px auto 0;order:9}
  .page-hero .wrap{display:flex;flex-direction:column}
}
/* under 999px .page-hero .wrap becomes a flex column, and a flex item with
   width:auto stretches to the full column — which turned these square glyphs
   into 346x72 smears on mobile. align-self:start restores intrinsic sizing. */
.page-hero h1{font-size:clamp(38px,5vw,68px);font-weight:700;max-width:20ch}
.page-hero .lede{margin-top:22px;font-size:1.375rem;color:var(--ink-soft);max-width:32em}

/* sections */
section{padding:var(--sect) 0}
.sec-head h2{font-size:clamp(31px,4.2vw,56px);font-weight:700;max-width:20ch}
.sec-head p{margin-top:20px;font-size:var(--text-lg);color:var(--ink-soft);max-width:34em}

/* steps */
.steps{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:44px}
.step h3,.step h2{font-size:var(--text-xl);font-weight:700;margin-bottom:10px;letter-spacing:-.02em;line-height:1.32}
.step p{font-size:var(--text-lg);color:var(--ink-soft)}
.step .rule{width:44px;height:3px;background:var(--action);margin-bottom:18px;border-radius:2px}

/* tick lists */
.list{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:0 72px;border-top:1px solid var(--line)}
.item{padding:26px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:flex-start}
.item .tick{flex:0 0 auto;margin-top:3px}
.item h3{font-size:1.375rem;font-weight:700}
.item p{margin-top:7px;font-size:var(--text-base);color:var(--ink-soft)}

/* the how-it-works film */
.hiw-video{width:100%;display:block;border-radius:16px;box-shadow:var(--shadow-lg)}
.hiw-video[hidden]{display:none}

/* ...and the still-frame strip that stands in whenever the film cannot play */
.filmbox{position:relative;margin-top:56px}
.filmbox[hidden],.filmstrip[hidden]{display:none}
.filmstrip{position:relative;border-radius:16px;overflow:hidden;background:var(--canvas-deep);box-shadow:var(--shadow-lg)}
.fs-view{overflow:hidden}
.fs-track{display:flex;transition:transform .45s var(--ease-swipe)}
.fs-slide{flex:0 0 100%;margin:0}
.fs-slide img{width:100%;display:block}
.fs-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(23,36,28,.7);color:var(--on-action);font:400 26px/1 var(--font-display);cursor:pointer;display:grid;place-items:center;padding:0}
.fs-nav:hover{background:rgba(23,36,28,.92)}
.fs-nav:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.fs-prev{left:12px}.fs-next{right:12px}
.fs-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center}
.fs-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(23,36,28,.3);cursor:pointer;
  transition:width .25s var(--ease-swipe),background .25s var(--ease-swipe)}
.fs-dots button[aria-selected="true"]{width:24px;border-radius:5px;background:var(--action)}
.fs-dots button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fs-alt{display:block;width:100%;text-align:center;font-size:.85rem;color:var(--ink-soft);margin-top:.7rem;
  background:none;border:0;cursor:pointer;text-decoration:underline;font-family:var(--font-display)}
@media (prefers-reduced-motion:reduce){.fs-track,.fs-dots button{transition:none}}

/* ── utilities ───────────────────────────────────────────────────────────────
   Everything a page used to say in a style="" attribute lives here instead.
   Rule: a page may only use classes. If a page needs something these do not
   cover, add it here (or as a component below) — never inline it, or the greens
   and the rhythm start drifting page to page. `make check` fails on style="".  */

/* vertical rhythm — draws on the --sp-* scale, no loose numbers */
.mt-1{margin-top:var(--sp-1)}
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.pt-0{padding-top:0}
.pt-4{padding-top:var(--sp-4)}
.pt-6{padding-top:var(--sp-6)}
.flush-top{margin-top:0;border-top:0}

/* tone + emphasis */
.bg-deep{background:var(--canvas-deep)}
.t-soft{color:var(--ink-soft)}
.t-ink{color:var(--ink)}
.t-mute{color:var(--ink-mute)}
.t-bold{font-weight:700}
.t-lead{font-weight:700;color:var(--action-deep)}
.t-left{text-align:left}

/* measure — keep prose readable instead of running the full 1180px */
.measure{max-width:34em}
.measure-sm{max-width:30em}
.measure-px{max-width:640px}

/* a row of calls to action */
.cta-row{margin-top:var(--sp-5);display:flex;gap:14px;flex-wrap:wrap}

/* anything wider than the phone scrolls inside its own box, never the page */
.scroll-x{overflow-x:auto;margin-top:var(--sp-4);-webkit-overflow-scrolling:touch}

/* ── components ──────────────────────────────────────────────────────────── */

/* comparison table (the alternative pages) */
.cmp{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.cmp th,.cmp td{padding:12px 14px;border-bottom:2px solid var(--ink);text-align:left}
.cmp th{font-family:var(--font-display);font-weight:700}

/* the big single figure (pricing) */
.figure-xl{font-size:clamp(44px,7vw,86px);font-weight:700;letter-spacing:-.04em;
  color:var(--action);font-family:var(--font-display)}
.figure-lg{font-size:clamp(28px,4vw,44px);font-weight:700;font-family:var(--font-display)}

/* a highlighted aside — the evergreen wash box */
.note{margin-top:var(--sp-4);font-size:var(--text-lg);background:var(--action-wash);
  border:1.5px solid color-mix(in srgb,var(--action) 28%,transparent);
  border-radius:14px;padding:18px 20px;max-width:34em}

/* dark call-to-action panel */
.panel-ink{background:var(--ink);color:var(--ink-inverse);border-radius:var(--radius);
  padding:var(--sp-6) 40px;text-align:center}

/* full-width embedded form/widget */
.embed{width:100%;height:680px;border:none;border-radius:var(--radius);background:transparent}

/* two-column split that collapses to one on small screens */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:var(--sp-6);align-items:start}


/* dark band */
.band{background:var(--ink);color:var(--ink-inverse);padding:var(--sect-big) 0}
.band h2{font-size:clamp(31px,4vw,56px);font-weight:700;max-width:20ch}
.band p{margin-top:24px;font-size:var(--text-lg);color:var(--ink-mute);max-width:30em;text-wrap:pretty}

/* faq */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{font-size:var(--text-lg);font-weight:700;padding:20px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:28px;color:var(--action);flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 22px;font-size:var(--text-base);color:var(--ink-soft);max-width:60ch}

/* close */
.close{text-align:center;padding:var(--sect-big) 0 clamp(104px,13vw,152px)}
.close h2{font-size:clamp(31px,5vw,56px);font-weight:700;max-width:20ch;margin:0 auto}
.close p{margin:22px auto 0;font-size:var(--text-lg);color:var(--ink-soft);max-width:40ch}
.close .cta{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

footer{border-top:1px solid var(--line);padding:52px 0}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer .fine{font-size:var(--text-sm);color:var(--ink-soft);margin-top:14px;max-width:34em}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a{font-size:var(--text-sm);color:var(--ink-soft);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
footer nav a:hover{color:var(--ink)}

@media(max-width:900px){
  .wrap{padding:0 22px}
  .nav .brand span.bt{display:none}
  .nav .links{gap:18px}
  .nav .wrap{height:66px;gap:12px}
  .callbar{display:flex}
  body{padding-bottom:74px}
}
@media(max-width:620px){
  .nav .links{display:none}
  .menu-btn{display:inline-flex}
  .nav .btn{--btn-py:14px;--btn-px:18px}
}

/* scroll-driven reveals: content stays visible without support; gentle rise with it */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .item,.step,.faq details,.cards .card{
      animation:rise both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}

/* the two-up "missed vs booked" cards on the industry pages */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:20px;margin-top:36px;max-width:720px}
.card{border:1.5px solid var(--action-line);border-radius:var(--radius);padding:18px 19px;background:var(--action-wash)}
.card.miss{border-color:var(--loss-line);background:var(--loss-wash)}
.card .top{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-soft);
  display:flex;align-items:center;gap:8px}
.card .dot{width:9px;height:9px;border-radius:50%;background:var(--action);flex:0 0 auto}
.card.miss .dot{background:var(--loss)}
.card .amt{font-size:31px;font-weight:700;color:var(--action);margin:7px 0 3px;
  font-variant-numeric:tabular-nums;font-family:var(--font-display)}
.card.miss .amt{color:var(--loss)}
.card .sub{font-size:var(--text-sm);color:var(--ink-soft)}

/* comparison table: row headers read as labels, not as data */
.cmp th[scope=row]{text-align:left;padding:14px;border-bottom:1.5px solid var(--line);
  white-space:nowrap;vertical-align:top}
.cmp td{padding:14px;border-bottom:1.5px solid var(--line);vertical-align:top}

/* ── blog ────────────────────────────────────────────────────────────────── */
.post-list{display:grid;gap:var(--sp-6);max-width:44em}
.post-card{border-top:2px solid var(--ink);padding-top:var(--sp-4)}
.post-card h2{font-size:clamp(26px,3vw,38px);font-weight:700;margin-top:6px}
.post-card h2 a{text-decoration:none}
.post-card h2 a:hover{color:var(--action)}
.post-date{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-soft)}
.post-more{font-weight:700;color:var(--action)}

/* long-form body copy — the only place headings are allowed to flow freely */
.prose{max-width:34em;font-size:var(--text-lg)}
.prose > * + *{margin-top:var(--sp-4)}
.prose h2{font-size:clamp(24px,3vw,34px);font-weight:700;margin-top:var(--sp-6)}
.prose h3{font-size:var(--text-xl);font-weight:700;margin-top:var(--sp-5)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:var(--sp-1)}
.prose a{color:var(--action);font-weight:600}
.prose blockquote{border-left:3px solid var(--action);padding-left:var(--sp-3);color:var(--ink-soft)}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--canvas-deep);
  padding:2px 6px;border-radius:6px}