/* =============================================================================
   hire.css, the 2026-08 hiring landing page system.

   Descended from mm.css (the Google Ads Template D system) by COPY, not by
   import. Nothing here is shared with public/lp/google-ads/_assets/mm.css, so
   the paid landing pages cannot regress when this file changes, and this file
   is free to drop the components a hiring page has no use for (the money
   machine, the cheque, the route heatmap, the zip gate).

   What carries over unchanged: the token block, the ambient layer, the button,
   the stat band, the section furniture (ghost numerals, dash-rule eyebrows),
   the FAQ, the dock, the reveal.

   What is new here:
     .vid    a click-to-load video frame in the hero's right column, sitting in
             the slot the money machine occupies on the ad pages.
     .pay    the two-rung commission ladder. The single most persuasive object
             on the page, so it is an object rather than a paragraph.
     .fit    a two-column self-qualifier, which does the work that four separate
             list sections did on the old page.
     .facts  the logistics grid. Everything a candidate would otherwise scroll
             for, stated once, in one place.
     .calph  a placeholder standing in for the HighLevel calendar embed.

     .trj    the $5M to $50M trajectory. Numbers in HTML, chart in SVG, and
             the reason for that split is written above the .trj block.

   Section order on the page:
     01 hero (video, comp band)   02 the seat        03 trajectory
     04 compensation              05 fit             06 the details
     07 book the call             08 faq             09 footer
   ========================================================================== */

:root {
  --green: #28b270;
  --green-lit: #3ddc8c;
  --green-deep: #1fa465;
  --gold: #efc867;
  --gold-deep: #c99a35;

  --ink: #080d0b;
  --panel: #0e1512;
  --card: #131c18;
  --card-hi: #18231e;

  --line: rgba(235, 255, 247, 0.11);
  --line-hi: rgba(235, 255, 247, 0.22);
  --edge: rgba(255, 255, 255, 0.06);

  --text: #ecfff6;
  --dim: rgba(236, 255, 246, 0.62);
  --faint: rgba(236, 255, 246, 0.40);
  --red: #f08a76;

  --lift: 0 1px 0 var(--edge) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --lift-hi: 0 1px 0 rgba(255,255,255,0.09) inset, 0 26px 56px -24px rgba(0, 0, 0, 0.95);

  --col: 600px;
  --col-wide: 760px;
  --tap: 54px;

  --f-head: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-data: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

*, *::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(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 92px; /* room for the fixed dock */
}

img, svg { max-width: 100%; }
::selection { background: rgba(61, 220, 140, 0.28); }

/* ======================================================== ambient layer === */

.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg::before {
  content: ''; position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' fill='none' stroke='%233ddc8c' stroke-width='1'%3E%3Cpath d='M0 47h300M0 121h300M0 178h300M0 254h300'/%3E%3Cpath d='M61 0v300M143 0v300M212 0v300M271 0v300'/%3E%3Cpath d='M61 84h82M212 84h59M143 216h69' stroke-opacity='.7'/%3E%3Crect x='71' y='57' width='62' height='54' stroke-opacity='.35'/%3E%3Crect x='222' y='131' width='39' height='37' stroke-opacity='.35'/%3E%3C/svg%3E");
  opacity: 0.055;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 10%, transparent 78%);
}
.bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(760px 520px at 72% 12%, rgba(40, 178, 112, 0.16), transparent 68%),
    radial-gradient(680px 460px at 14% 4%,  rgba(31, 164, 101, 0.10), transparent 70%),
    radial-gradient(900px 700px at 50% 120%, rgba(239, 200, 103, 0.05), transparent 70%);
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.grain::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 70% at 50% 40%, transparent 42%, rgba(0,0,0,0.55) 100%);
}

/* ============================================================== chrome === */

.hdr {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--col-wide); margin: 0 auto;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.hdr__logo { font-family: var(--f-head); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.hdr__logo i { font-style: normal; color: var(--green-lit); }

/* The header pill is the only affordance above the fold on a phone, so it meets
   the 44px tap minimum. The pulse dot says the role is open right now, which is
   the first thing a candidate wants to know and the cheapest way to say it. */
.hdr__cta {
  font-family: var(--f-data); font-size: 13px; color: var(--text);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  background: rgba(255,255,255,0.02);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.hdr__cta:hover { border-color: var(--line-hi); background: rgba(255,255,255,0.05); }
.hdr__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hdr__cta::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-lit);
  box-shadow: 0 0 8px rgba(61,220,140,0.9);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ================================================================ hero === */

.hero {
  position: relative; z-index: 3;
  max-width: var(--col-wide); margin: 0 auto;
  padding: 34px 22px 52px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.eyebrow {
  margin: 0; font-family: var(--f-data); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--green-lit);
}
.hero h1 {
  margin: 0; font-family: var(--f-head); font-weight: 800;
  font-size: clamp(34px, 6.4vw, 50px);
  line-height: 1.02; letter-spacing: -0.038em;
  max-width: 16ch; text-wrap: balance;
}
.hero h1 em, .sec h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #7dffc0 0%, var(--green-lit) 55%, var(--green) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin: 0; max-width: 52ch; color: var(--dim);
  font-size: clamp(15.5px, 2.2vw, 18px); line-height: 1.55; text-wrap: pretty;
}
.hero__lead, .hero__act {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%; min-width: 0;
}

/* ================================================================= video === */

/* Occupies the slot the money machine holds on the ad pages. Click to load:
   nothing from Loom is requested until the candidate asks for it, so the page
   still paints fast and the third party gets nothing from a bounce. */
.vid { position: relative; width: 100%; max-width: 600px; margin: 2px 0; }
.vid::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 104%; height: 118%;
  background:
    radial-gradient(ellipse 52% 46% at 38% 52%, rgba(40, 178, 112, 0.22), transparent 68%),
    radial-gradient(ellipse 44% 40% at 76% 58%, rgba(239, 200, 103, 0.14), transparent 70%);
  filter: blur(8px);
}
.vid__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  background: #0b1210; border: 1px solid var(--line-hi);
  box-shadow: var(--lift-hi);
}
.vid__frame img, .vid__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 0;
}
.vid__btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; gap: 0;
  /* Weighted to the bottom third, where the overlay line sits. A flat wash
     dark enough to carry that text also greys out the face above it. */
  background: linear-gradient(180deg, rgba(4,10,8,0.06) 0%, rgba(4,10,8,0.14) 42%, rgba(4,10,8,0.86) 100%);
  border: 0; cursor: pointer; padding: 0;
  transition: background 0.2s ease;
}
.vid__btn:hover { background: linear-gradient(180deg, rgba(4,10,8,0.02) 0%, rgba(4,10,8,0.08) 42%, rgba(4,10,8,0.82) 100%); }
.vid__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.vid__play {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #55eaa0 0%, #2fc07a 52%, #1fa465 100%);
  border: 1px solid rgba(255,255,255,0.22); color: #0c2419;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 10px 28px -6px rgba(40,178,112,0.7);
  transition: transform 0.18s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.vid__btn:hover .vid__play { transform: scale(1.06); }
.vid__play svg { width: 24px; height: 24px; margin-left: 3px; }
/* The line under the play button is the reason to press it. Without it the
   frame is a face and a triangle, which is not an argument. */
.vid__over {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 15px; text-align: left; pointer-events: none;
}
.vid__over b {
  display: block; font-family: var(--f-head); font-weight: 700; font-size: 15px;
  letter-spacing: -0.014em; color: #fff; line-height: 1.3;
}
.vid__over span {
  font-family: var(--f-data); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.66);
}
.vid__cap {
  display: flex; justify-content: space-between; gap: 12px; padding: 0 4px; margin-top: 8px;
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
}
.vid__cap b { color: var(--gold); font-weight: 500; }

/* ============================================================= buttons === */

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: var(--tap); width: 100%; max-width: 340px;
  font-family: var(--f-head); font-weight: 700; font-size: 15.5px;
  letter-spacing: -0.005em; text-decoration: none; color: #0c2419;
  background: linear-gradient(180deg, #55eaa0 0%, #2fc07a 52%, #1fa465 100%);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 13px;
  padding: 12px 24px; overflow: hidden; isolation: isolate; cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 2px 5px rgba(0, 0, 0, 0.32),
    0 12px 28px -6px rgba(40, 178, 112, 0.55);
  transition: transform 0.16s cubic-bezier(0.22, 0.7, 0.25, 1), box-shadow 0.16s ease, filter 0.16s ease;
}
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg); animation: btnSheen 4.6s ease-in-out infinite;
  pointer-events: none; z-index: -1;
}
@keyframes btnSheen { 0%, 62%, 100% { left: -60%; } 86% { left: 118%; } }
.btn__labels { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.2; }
.btn__main { font-size: 15.5px; font-weight: 700; }
.btn__sub {
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.05em;
  font-weight: 500; color: rgba(9, 32, 21, 0.66);
}
.btn__arrow { flex: 0 0 auto; transition: transform 0.16s ease; }
.btn:hover {
  filter: brightness(1.06); transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 3px 7px rgba(0, 0, 0, 0.34), 0 18px 38px -8px rgba(40, 178, 112, 0.68);
}
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.3); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ticks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--dim);
}
.ticks li { display: inline-flex; align-items: center; gap: 7px; }
.ticks svg { flex: none; }

/* ========================================================== stat band === */

/* The compensation numbers, put where the old page buried them: above the
   fold, before a single paragraph of role description. */
.stats {
  list-style: none; margin: 4px 0 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden;
}
.stats li {
  background: var(--panel); padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
}
.stats b {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(21px, 4.6vw, 28px);
  line-height: 1.05; letter-spacing: -0.035em; color: var(--green-lit);
  font-variant-numeric: tabular-nums;
}
.stats li:nth-child(even) b { color: var(--gold); }
.stats span { font-size: 12.5px; line-height: 1.35; color: var(--faint); text-wrap: pretty; }
.stats__ico { display: block; color: rgba(61, 220, 140, 0.55); margin-bottom: 2px; }
.stats__ico svg { width: 19px; height: 19px; }
.stats li:nth-child(even) .stats__ico { color: rgba(239, 200, 103, 0.55); }

/* ============================================================ sections === */

.sec { position: relative; z-index: 3; padding: 58px 22px; }
.sec__in { max-width: var(--col); margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.sec__in--wide { max-width: var(--col-wide); }
.sec:nth-of-type(odd) { background: linear-gradient(180deg, rgba(255,255,255,0.014), transparent 60%); }
.sec + .sec { border-top: 1px solid var(--line); }

.sec__num {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--f-head); font-weight: 800; font-size: clamp(56px, 12vw, 104px);
  line-height: 1; letter-spacing: -0.05em; color: rgba(236, 255, 246, 0.035);
  pointer-events: none; user-select: none;
}
.sec h2 {
  margin: 0; font-family: var(--f-head); font-weight: 800;
  font-size: clamp(26px, 4.6vw, 36px); line-height: 1.08; letter-spacing: -0.03em;
  text-wrap: balance;
}
.sec h3 { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: 17px; letter-spacing: -0.012em; }
.sec p { margin: 0; color: var(--dim); text-wrap: pretty; }
.sec p.lead { color: var(--text); font-size: 17px; }

.sec__head { display: flex; flex-direction: column; gap: 14px; }
/* The eyebrow and the H2 travel together as one block, so the desktop grid can
   put them in the left column and the supporting paragraph in the right. */
.sec__head > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sec__eyebrow {
  margin: 0; font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
  display: inline-flex; align-items: center; gap: 10px;
}
.sec__eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--green); opacity: 0.8;
}

/* ================================================================ steps === */

.steps { display: flex; flex-direction: column; gap: 12px; counter-reset: st; }
.step {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px 26px; box-shadow: var(--lift);
  display: grid; grid-template-columns: 1fr; gap: 10px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.step:hover { border-color: var(--line-hi); transform: translateY(-2px); box-shadow: var(--lift-hi); }
.step::before {
  counter-increment: st; content: counter(st, decimal-leading-zero);
  position: absolute; right: 20px; top: 18px;
  font-family: var(--f-head); font-weight: 800; font-size: 30px; line-height: 1;
  letter-spacing: -0.04em; color: rgba(61, 220, 140, 0.22); pointer-events: none;
}
.step h3 { padding-right: 52px; color: var(--text); }
.step div { display: flex; flex-direction: column; gap: 8px; position: relative; }
.step__ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  color: var(--green-lit); background: rgba(40, 178, 112, 0.11);
  border: 1px solid rgba(61, 220, 140, 0.22); margin-bottom: 2px;
}
.step__ico svg { width: 21px; height: 21px; }
.step p { font-size: 14.8px; }

/* =============================================================== snips === */

/* The About and the traction sections of the old page, compressed into one
   row. A candidate needs to know the company is real and growing. That is four
   facts, not eight paragraphs. */
.snips { display: flex; flex-wrap: wrap; gap: 9px; }
.snip {
  font-size: 13px; color: var(--dim);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; box-shadow: 0 1px 0 var(--edge) inset;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.snip:hover { border-color: var(--line-hi); transform: translateY(-1px); }
.snip b { color: var(--text); font-weight: 600; }

/* ========================================================== the ladder === */

/* Two rungs, side by side, because the whole comp story is the distance
   between them. Stated as prose it is a sentence with four numbers in it and
   nobody finishes reading. As two objects the reader compares them, which is
   the behaviour that sells the seat. */
.pay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pay__card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 22px;
  background: var(--card); box-shadow: var(--lift);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.pay__card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.pay__lbl {
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.pay__fig {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(38px, 8vw, 54px); line-height: 1; letter-spacing: -0.045em;
  color: var(--green-lit); font-variant-numeric: tabular-nums; margin-top: 6px;
}
.pay__unit { font-size: 13px; color: var(--dim); margin-top: 6px; }
.pay__math {
  list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.pay__math li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
  font-size: 13.8px; color: var(--dim); line-height: 1.45; align-items: baseline;
}
.pay__math i {
  font-style: normal; font-family: var(--f-data); font-size: 10px;
  letter-spacing: 0.1em; color: rgba(61, 220, 140, 0.7);
}
.pay__math b { color: var(--text); font-weight: 650; }

/* The accelerator rung. Gold, lit, and carrying the one detail that makes it
   unusual: it applies backwards over the whole month. */
.pay__card--hi {
  border-color: rgba(239, 200, 103, 0.34);
  background:
    radial-gradient(560px 220px at 88% 0%, rgba(239, 200, 103, 0.10), transparent 70%),
    linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 62px -30px rgba(239, 200, 103, 0.34);
}
.pay__card--hi:hover { border-color: rgba(239, 200, 103, 0.5); }
.pay__card--hi .pay__fig {
  background-image: linear-gradient(176deg, #fff3d4 0%, #ffe09a 34%, var(--gold) 62%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pay__card--hi .pay__math i { color: rgba(239, 200, 103, 0.75); }
.pay__tag {
  align-self: flex-start; margin-top: 12px;
  font-family: var(--f-data); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(239, 200, 103, 0.34); border-radius: 999px;
  padding: 6px 12px; background: rgba(239, 200, 103, 0.08);
}

.terms { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.terms li {
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green-lit); border: 1px solid rgba(61,220,140,0.3); border-radius: 999px;
  padding: 7px 13px; background: rgba(40,178,112,0.08);
}

/* Numbered plain-language list. Used for the comp terms and for what happens
   on the call. */
.oncall { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.oncall li {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; align-items: baseline;
  padding: 14px 0; border-top: 1px solid var(--line); color: var(--dim); font-size: 14.6px;
}
.oncall li:last-child { border-bottom: 1px solid var(--line); }
/* The rank marker only. Scoped to the first child on purpose: an unscoped
   `.oncall span` also caught the sentence beside it and set the whole line in
   11px mono, which is the one place on the page where the copy has to read as
   prose. */
.oncall > li > i {
  font-style: normal;
  font-family: var(--f-data); font-size: 11px; letter-spacing: 0.1em; color: var(--green-lit);
}
.oncall b { color: var(--text); font-weight: 650; }

/* ================================================================= fit === */

/* Self-qualification, both directions, on one screen. The old page spent four
   sections (core skills, behavioural traits, responsibilities, ideal
   candidate) saying the first column and never said the second at all, which
   is the half that saves everyone a call. */
.fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fit__col {
  border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 24px;
  background: var(--card); box-shadow: var(--lift);
  display: flex; flex-direction: column; gap: 14px;
}
.fit__col--yes {
  background: linear-gradient(180deg, rgba(40,178,112,0.09), rgba(40,178,112,0.02) 46%), var(--card);
  border-color: rgba(61, 220, 140, 0.28);
  box-shadow: inset 3px 0 0 var(--green), var(--lift);
}
/* The disqualifier column used to be the greyed-out one, which reads as "less
   important" when it is the half that saves both sides a call. It now carries
   the same legibility as the column beside it and the only red on the page. */
.fit__col--no {
  background: linear-gradient(180deg, rgba(240,138,118,0.075), rgba(240,138,118,0.015) 46%), var(--card);
  border-color: rgba(240, 138, 118, 0.26);
  box-shadow: inset 3px 0 0 rgba(240, 138, 118, 0.75), var(--lift);
}
.fit__hd {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
}
.fit__col--yes .fit__hd { color: var(--green-lit); }
.fit__hd i {
  font-style: normal; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-hi);
}
.fit__col--yes .fit__hd i {
  border-color: transparent;
  background: var(--green-lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1.6 5.2l2.2 2.2L8.4 2.6' stroke='%23082016' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: 0 0 9px rgba(61,220,140,0.5);
}
.fit__col--no .fit__hd { color: var(--red); }
.fit__col--no .fit__hd i {
  border-color: transparent;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2.4 2.4l5.2 5.2M7.6 2.4l-5.2 5.2' stroke='%23300f09' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: 0 0 9px rgba(240,138,118,0.45);
}
.fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.fit li {
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: 14.4px; line-height: 1.45; color: var(--dim);
}
.fit li:first-child { border-top: 0; padding-top: 0; }
.fit li b {
  display: block; margin-bottom: 3px; color: var(--text);
  font-family: var(--f-head); font-weight: 650; font-size: 15.6px;
  letter-spacing: -0.015em; line-height: 1.3;
}

/* The two hard filters. A bordered strip rather than another bullet, because
   they are the only two things on the page that disqualify outright. */
.hardline {
  border-left: 3px solid var(--gold); padding: 4px 0 4px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.hardline b {
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); font-weight: 500;
}
.hardline p { font-size: 14.6px; color: var(--dim); }

/* =============================================================== facts === */

/* Everything logistical, once, in a grid you can scan in about six seconds. */
.facts {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; margin: 0;
}
.facts > div { background: var(--panel); padding: 17px 20px 19px; display: flex; flex-direction: column; gap: 5px; }
.facts dt {
  font-family: var(--f-data); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.facts dd {
  margin: 0; font-size: 14.8px; line-height: 1.42; color: var(--text);
  font-family: var(--f-head); font-weight: 600; letter-spacing: -0.012em;
}
.facts dd small { display: block; font-family: var(--f-body); font-weight: 400; font-size: 13px; color: var(--dim); margin-top: 3px; letter-spacing: 0; }

/* ============================================================== the ask === */

.ask { scroll-margin-top: 20px; }
.cal-shell { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(235,255,247,0.14), 0 34px 70px -30px rgba(0,0,0,0.85); }
.cal-shell iframe { width: 100%; border: 0; display: block; min-height: 700px; }

/* ---- placeholder standing in for the HighLevel calendar embed ---------------
   Rendered LIGHT on the dark page for the same reason the route heat map is:
   a light artifact reads as a real document dropped onto the page. It is
   deliberately inert and labelled, so nobody mistakes it for a live booker. */
.calph { position: relative; font-family: var(--f-body); color: #223030; padding: 0; }
.calph__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #f6f8f5;
}
.calph__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.calph__mark {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: linear-gradient(180deg, #55eaa0, #1fa465);
  display: grid; place-items: center; color: #08301d;
  font-family: var(--f-head); font-weight: 800; font-size: 13px;
}
.calph__txt { display: block; min-width: 0; }
.calph__txt b { font-family: var(--f-head); font-weight: 700; font-size: 14.5px; letter-spacing: -0.012em; color: #223030; display: block; line-height: 1.25; }
.calph__txt span { font-size: 12px; color: rgba(34,48,44,0.6); }
.calph__pill {
  font-family: var(--f-data); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a6d16; background: rgba(239,200,103,0.22); border: 1px solid rgba(201,154,53,0.42);
  border-radius: 999px; padding: 6px 11px; white-space: nowrap;
}
.calph__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.calph__cal { padding: 18px 18px 20px; }
.calph__mon {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-head); font-weight: 700; font-size: 14px; color: #223030; margin-bottom: 12px;
}
.calph__mon i { font-style: normal; color: rgba(34,48,44,0.32); font-size: 16px; letter-spacing: 6px; }
.calph__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calph__dow {
  font-family: var(--f-data); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(34,48,44,0.42); text-align: center; padding-bottom: 4px;
}
.calph__d {
  aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 8px;
  font-size: 12.5px; color: rgba(34,48,44,0.5); font-variant-numeric: tabular-nums;
}
.calph__d--off { color: rgba(34,48,44,0.18); }
.calph__d--free { background: rgba(18,168,60,0.10); color: #127a36; font-weight: 700; }
.calph__d--on { background: #1fa465; color: #fff; font-weight: 700; box-shadow: 0 4px 12px -4px rgba(31,164,101,0.7); }
.calph__slots { padding: 18px 18px 20px; border-top: 1px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 8px; }
.calph__slots b { font-family: var(--f-head); font-weight: 700; font-size: 13px; color: #223030; margin-bottom: 2px; }
.calph__slot {
  border: 1px solid rgba(18,168,60,0.34); border-radius: 9px; padding: 11px 12px;
  text-align: center; font-size: 13.5px; font-weight: 600; color: #127a36;
  background: #fff; font-variant-numeric: tabular-nums;
}
.calph__slot--sel { background: #1fa465; color: #fff; border-color: #1fa465; }
/* Scoped through .calph on purpose. `.sec p` is (0,1,1) and beat a bare
   `.calph__note` at (0,1,0), which handed this strip the dark-page text colour
   on a cream background and the 70ch prose cap: invisible text at two thirds
   of the card width. Same reason for .cal-cap below. */
.calph .calph__note {
  margin: 0; max-width: none;
  padding: 12px 18px 14px; border-top: 1px dashed rgba(201,154,53,0.5);
  background: rgba(239,200,103,0.12);
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.06em; line-height: 1.5;
  color: #7a5f14;
}
@media (min-width: 620px) {
  .calph__body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .calph__slots { border-top: 0; border-left: 1px solid rgba(0,0,0,0.08); }
}
.cal-wrap .cal-cap {
  margin: 10px 0 0; max-width: none;
  font-family: var(--f-data); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}

/* ================================================================== faq === */

.faq { display: flex; flex-direction: column; gap: 2px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 34px 16px 0; position: relative;
  font-family: var(--f-head); font-weight: 600; font-size: 16px; letter-spacing: -0.012em;
  transition: color 0.14s ease;
}
.faq summary:hover { color: var(--green-lit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%;
  color: var(--green-lit); font-size: 20px; font-weight: 400; line-height: 1;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.26s cubic-bezier(0.3, 0.8, 0.3, 1), color 0.14s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.faq details p { padding: 0 0 18px; }
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 0.32s cubic-bezier(0.22, 0.7, 0.25, 1), content-visibility 0.32s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* The closing CTA, in the space the FAQ heading leaves behind. */
.endcta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line);
  max-width: 34ch;
}
.endcta p { font-size: 14.8px; color: var(--dim); }
.endcta .btn { max-width: 300px; }
@media (max-width: 1023px) { .endcta { align-self: stretch; } }


/* The one accent on the page that is gold rather than green: it names the
   target, and the target is gold everywhere else in this section. */
.sec h2 em.gold {
  background-image: linear-gradient(176deg, #fff3d4 0%, #ffe09a 34%, var(--gold) 62%, var(--gold-deep) 100%);
}

/* =========================================================== trajectory === */

/* The $5M to $50M section. Two decisions worth not re-litigating:

   1. Every number is HTML, not SVG text. An 800-unit-wide viewBox renders at
      about 354px on a 390px phone, a 0.44 scale, so a 10px label inside the
      drawing would land at 4.4px. Sizing the SVG type up to survive that makes
      it absurd on a monitor. The chart is therefore pure illustration and the
      figures sit in a header row above it, where CSS controls their size at
      every width and a screen reader can actually read them.

   2. The rocket rides the projected curve with offset-path rather than a
      hand-keyed transform, so the tilt stays on the tangent for free. Guarded
      by @supports: without it the rocket is simply parked at the start. */

.trj {
  position: relative; margin: 0 auto; width: 100%; max-width: 980px;
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(700px 320px at 82% 6%, rgba(239, 200, 103, 0.11), transparent 70%),
    radial-gradient(620px 340px at 10% 94%, rgba(40, 178, 112, 0.15), transparent 72%),
    linear-gradient(180deg, var(--card-hi), var(--card));
  box-shadow: var(--lift-hi);
}

/* The header row IS the argument. Two figures and the multiple between them. */
.trj__hd {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 10px 14px;
  padding: 22px 22px 4px;
}
.trj__end { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trj__end--goal { text-align: right; }
.trj__end span {
  font-family: var(--f-data); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.trj__end b {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(26px, 6.4vw, 44px); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  /* Both figures have to sit on one line or the row stops reading as a pair.
     $50M ARR is the longer of the two and it is the one that wrapped. */
  white-space: nowrap;
}
.trj__end--now b { color: var(--green-lit); }
.trj__end--goal b {
  background-image: linear-gradient(176deg, #fff3d4 0%, #ffe09a 34%, var(--gold) 64%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Deliberately dim. Three saturated things in one row and none of them wins. */
.trj__x {
  font-family: var(--f-head); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(15px, 3.2vw, 21px); color: var(--faint);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.trj__x::before, .trj__x::after {
  content: ''; width: clamp(10px, 3vw, 26px); height: 1px;
  background: var(--line-hi);
}

.trj__svg { display: block; width: 100%; height: auto; }

.trj__cap {
  padding: 2px 22px 18px; font-size: 13.6px; line-height: 1.5; color: var(--dim);
  text-wrap: pretty;
}
.trj__cap b { color: var(--text); font-weight: 650; }

/* ---- the drawing ---------------------------------------------------------- */

/* History draws itself in once. The projection flows forever, because it has
   not happened yet and a static dashed line says nothing that a solid one
   does not. Same idiom as the money machine's belt. */
.trj__done { stroke-dasharray: 340; stroke-dashoffset: 0; }
.is-in .trj__done { animation: trjDraw 1.15s cubic-bezier(0.32, 0.72, 0.3, 1) 0.1s backwards; }
@keyframes trjDraw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }

.trj__proj { stroke-dasharray: 8 8; }
.is-in .trj__proj { animation: trjFlow 1.6s linear infinite; }
@keyframes trjFlow { to { stroke-dashoffset: -16; } }

.trj__ping { transform-box: fill-box; transform-origin: center; opacity: 0; }
.is-in .trj__ping { animation: trjPing 2.8s ease-out infinite; }
@keyframes trjPing {
  0%   { transform: scale(0.6); opacity: 0.7; }
  70%  { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.trj__now-dot { transform-box: fill-box; transform-origin: center; }
.is-in .trj__now-dot { animation: trjBeat 2.8s ease-in-out infinite; }
@keyframes trjBeat { 0%, 100% { transform: scale(1); } 52% { transform: scale(1.16); } }

.trj__flame { transform-box: fill-box; transform-origin: right center; }
.is-in .trj__flame { animation: trjFlame 0.24s steps(2) infinite alternate; }
@keyframes trjFlame {
  from { transform: scaleX(0.7); opacity: 0.7; }
  to   { transform: scaleX(1.15); opacity: 1; }
}

@supports not (offset-path: path("M 0 0 L 1 1")) {
  .trj__rocket { transform: translate(316px, 276px); }
}
@supports (offset-path: path("M 0 0 L 1 1")) {
  .trj__rocket {
    /* Must stay byte-identical to the d= on .trj__proj in the markup. */
    offset-path: path("M 316 276 C 483 243, 632 190, 720 46");
    offset-rotate: auto;
    offset-distance: 0%;
  }
  .is-in .trj__rocket { animation: trjFly 5.4s cubic-bezier(0.5, 0.02, 0.62, 1) infinite; }
}
@keyframes trjFly {
  0%   { offset-distance: 0%;   opacity: 0; }
  7%   { opacity: 1; }
  86%  { opacity: 1; }
  96%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (max-width: 620px) {
  .trj__hd { padding: 18px 16px 2px; gap: 8px 8px; }
  .trj__cap { padding: 2px 16px 16px; font-size: 13px; }
  .trj__end span { font-size: 9px; letter-spacing: 0.12em; }
  .trj__end b { font-size: clamp(20px, 5.5vw, 28px); }
  .trj__x { font-size: 14px; gap: 6px; }
  .trj__x::before, .trj__x::after { width: 8px; }
}
@media (max-width: 379px) {
  .trj__end b { font-size: 18px; }
  .trj__x::before, .trj__x::after { display: none; }
}

/* =============================================================== footer === */

.foot {
  position: relative; z-index: 3; max-width: var(--col-wide); margin: 0 auto;
  padding: 34px 22px 20px; border-top: 1px solid var(--line);
  font-family: var(--f-data); font-size: 11px; letter-spacing: 0.05em; color: var(--faint);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
}
.foot a {
  color: var(--faint); text-decoration: none; border-bottom: 1px solid var(--line);
  display: inline-flex; align-items: center; min-height: 44px;
}
.foot a:hover { color: var(--text); }
.foot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ================================================================= dock === */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(8,13,11,0), rgba(8,13,11,0.95) 34%);
  display: flex; justify-content: center; gap: 12px; align-items: center;
  pointer-events: none;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.dock.is-up { opacity: 1; transform: none; }
.dock .btn, .dock .dock__note { pointer-events: auto; }
.dock .btn { max-width: 320px; }
.dock__note {
  font-family: var(--f-data); font-size: 12px; color: var(--dim); text-decoration: none;
  min-height: var(--tap); display: none; align-items: center; padding: 0 16px;
  border: 1px solid var(--line-hi); border-radius: 13px; background: rgba(8,13,11,0.85);
}
@media (min-width: 620px) { .dock__note { display: inline-flex; } }

/* =============================================================== reveal === */

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,0.7,0.25,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

.step, .pay__card { transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.7,0.25,1), border-color 0.18s ease; }
.is-in .step, .is-in .pay__card { opacity: 1; transform: none; }
[data-reveal]:not(.is-in) .step, [data-reveal]:not(.is-in) .pay__card { opacity: 0; transform: translateY(16px); }

.step:nth-child(1), .pay__card:nth-child(1) { transition-delay: 0.06s; }
.step:nth-child(2), .pay__card:nth-child(2) { transition-delay: 0.16s; }
.step:nth-child(3) { transition-delay: 0.26s; }

/* ================================================================ small === */

@media (max-width: 620px) {
  .hero { padding: 28px 18px 40px; gap: 15px; }
  .sec { padding: 52px 18px; }
  .vid__cap { font-size: 9.5px; letter-spacing: 0.1em; }
  .pay__card, .fit__col { padding: 20px 20px 22px; }
  .step { padding: 20px 20px 22px; }
  .foot { flex-direction: column; }
}
@media (max-width: 379px) {
  .hdr { padding: 18px 14px; gap: 10px; }
  .hdr__logo { font-size: 15px; }
  .hdr__cta { font-size: 11.5px; padding: 8px 12px; gap: 6px; }
}

/* ============================================================== DESKTOP === */

@media (min-width: 700px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 820px) {
  .pay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  :root { --col: 760px; --col-wide: 1120px; }

  /* --- hero: copy left, video right, comp band spanning the base --- */
  .hero {
    max-width: var(--col-wide);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-areas:
      "lead  video"
      "act   video"
      "stats stats";
    align-content: start;
    justify-items: start;
    gap: 18px 54px;
    padding: 44px 22px 56px;
    text-align: left;
  }
  .hero__lead { grid-area: lead; align-items: flex-start; gap: 18px; }
  .hero__act  { grid-area: act;  align-items: flex-start; gap: 14px; align-self: start; }
  .hero .vid  { grid-area: video; align-self: center; max-width: none; margin: 0; }
  .hero .stats { grid-area: stats; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
  .hero .stats li { align-items: flex-start; text-align: left; padding: 18px 20px 20px; }

  .hero h1 { font-size: clamp(42px, 3.7vw, 58px); max-width: 13ch; }
  .hero__sub { max-width: 44ch; }
  .hero .ticks { justify-content: flex-start; }
  .hero .btn { width: auto; min-width: 300px; }
  .vid__cap { font-size: 10px; }

  /* --- sections --- */
  .sec { padding: 64px 22px; }
  .sec__head {
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 22px 52px; align-items: end;
  }
  .sec__head h2 { max-width: 15ch; }
  .sec__head p { max-width: 46ch; padding-bottom: 5px; }
  .sec__num { top: 26px; right: 30px; }
  .sec p { max-width: 70ch; }
  .sec h2 { max-width: 22ch; }

  .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .step p { max-width: none; }

  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Split band: heading and eyebrow left, the object right. Used by the FAQ. */
  .sec--split .sec__in {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
    gap: 18px 56px; align-items: start; max-width: var(--col-wide);
    grid-template-rows: min-content min-content 1fr;
  }
  .sec--split .sec__eyebrow { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .sec--split h2 { grid-column: 1; grid-row: 2; max-width: 14ch; }
  .sec--split .sec__in > p { grid-column: 1; max-width: 42ch; }
  .sec--split .faq { grid-column: 2; grid-row: 1 / 4; max-width: none; }
  .sec--split .endcta { grid-column: 1; grid-row: 3; align-self: start; }

  /* The ask: what happens on the call on the left, the booker on the right. */
  .ask .sec__in, .ask .sec__in--wide {
    max-width: var(--col-wide);
    display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    grid-template-rows: min-content min-content min-content min-content 1fr;
    gap: 16px 56px; align-items: start;
  }
  .ask .sec__eyebrow, .ask h2, .ask .oncall, .ask .ticks { grid-column: 1; }
  .ask .sec__in > p { grid-column: 1; }
  .ask .cal-wrap { grid-column: 2; grid-row: 1 / 6; }
  .ask h2 { max-width: 13ch; }
  .ask .ticks { justify-content: flex-start; }
}

@media (min-width: 1400px) {
  :root { --col-wide: 1200px; }
  .hero h1 { font-size: 58px; }
  .sec { padding: 70px 22px; }
}

@media (min-width: 1600px) {
  :root { --col-wide: 1320px; }
  .hero h1 { font-size: 62px; max-width: 12ch; }
  .hero__sub { font-size: 19px; }
}

/* ======================================================= reduced motion === */

@media (prefers-reduced-motion: reduce) {
  .btn::after, .hdr__cta::before { animation: none !important; }
  .trj__done { stroke-dashoffset: 0; }
  .is-in .trj__done, .is-in .trj__proj, .is-in .trj__ping,
  .is-in .trj__now-dot, .is-in .trj__flame, .is-in .trj__rocket { animation: none !important; }
  .trj__ping { opacity: 0.3; }
  .trj__rocket { opacity: 1; offset-distance: 58%; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .step, .snip, .pay__card, .dock, .vid__play { transition: none; }
  .step:nth-child(n), .pay__card:nth-child(n),
  [data-reveal]:not(.is-in) .step,
  [data-reveal]:not(.is-in) .pay__card {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
  .faq summary::after { transition: none; }
  @supports (interpolate-size: allow-keywords) {
    .faq details::details-content { transition: none; }
  }
}