/* Sunward Marketing: home page. */

/* ---------- Hero: a chart, a heading, a sun ---------- */
.hero {
  position: relative;
  padding: clamp(24px, 3.2vw, 44px) 0 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: -1px -1px;
  border-bottom: 3px solid var(--ink);
  overflow: hidden;
}
.hero-meta { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.hero-meta .label { color: var(--ink); }
.hero-meta .coords { color: var(--ink-3); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; row-gap: clamp(26px, 3.4vw, 44px); padding: clamp(28px, 3.4vw, 48px) 0 clamp(36px, 5vw, 64px); }
.hero h1 { grid-column: 1 / -1; font-size: clamp(3.1rem, 7vw, 7rem); line-height: 0.9; font-variation-settings: "wdth" 118; letter-spacing: -0.045em; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero h1 .ln > span { display: inline-block; }
.js .hero h1 .ln > span { transform: translateY(104%); animation: rise 0.95s var(--ease) forwards; animation-delay: calc(var(--l) * 100ms + 120ms); }
@keyframes rise { to { transform: none; } }
.hero h1 .hl { color: var(--cobalt); }
/* The hero headline says what we deliver, then rolls through who it's for */
.hero h1.hero-h1 { letter-spacing: normal; }
.hero h1.hero-h1 .ln { font-size: clamp(1.9rem, 4.4vw, 4.2rem); line-height: 1.02; font-variation-settings: "wdth" 112; letter-spacing: -0.035em; }
.hero .hero-word { font-size: clamp(2.75rem, 10.4vw, 9.2rem); margin-top: 0.05em; }
.hero-meta-r { display: inline-flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.hero-meta-r .rot-pause { min-height: 28px; }
.hero-copy-in { margin-top: 0; }
.hero-copy-in .lede { margin: 22px 0 0; }
/* The deck under the headline: what we do, said plainly */
.hero-deck { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 12px 0; list-style: none; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 700 15px/1.3 var(--f-display); font-variation-settings: "wdth" 72; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.hero-deck li { display: inline-flex; align-items: center; gap: 8px; }
.hero-deck li::before { content: ""; width: 7px; height: 7px; background: var(--sun); flex: none; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; }

/* The compass: a chart rose whose needle you can steer. Point it at the sun and it answers. */
.compass { width: 100%; max-width: 400px; margin-left: auto; }
.rose { position: relative; aspect-ratio: 1; transition: transform 0.8s var(--ease); }
.rose > svg { width: 100%; height: 100%; overflow: visible; }
.rose .needle { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(var(--angle, 40deg)); transition: transform 1.2s cubic-bezier(0.34, 1.4, 0.5, 1); }
.compass.is-tracking .needle { transition: transform 0.4s var(--ease); }
.compass.is-scrolling .needle { transition: transform 0.15s linear; }
.rose .course { stroke-dasharray: 4 6; }
.js .rose .course { stroke-dashoffset: 200; animation: plot 1.4s var(--ease) 0.9s forwards; }
@keyframes plot { to { stroke-dashoffset: 0; } }
.rose .sun { transform-box: fill-box; transform-origin: center; transition: transform 0.6s cubic-bezier(0.34, 1.6, 0.5, 1); }
.rose .halo circle { fill: none; stroke: var(--sun); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.compass.is-found .rose .sun { transform: scale(1.22); }
.compass.is-found .rose .halo circle { animation: halo 2.4s var(--ease) infinite; }
.compass.is-found .rose .halo circle:nth-child(2) { animation-delay: 0.8s; }
.compass.is-found .rose .halo circle:nth-child(3) { animation-delay: 1.6s; }
@keyframes halo { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.sun-hit { position: absolute; left: 74.1%; top: 21.3%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.sun-hit:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* The answer rises over the lower half of the chart. The sun and the needle tip stay in view,
   and nothing around the compass moves, so there is no layout shift. */
.found { position: absolute; left: 0; right: 0; top: 56%; z-index: 2; padding: 22px 22px 24px; background: var(--ink); color: var(--paper); border-top: 4px solid var(--sun); opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 0.45s var(--ease), transform 0.6s var(--ease), visibility 0.45s; }
.found[hidden] { display: block; }
.compass.is-found .found { visibility: visible; opacity: 1; transform: none; }
.found .label { color: var(--sun); }
.found-title { margin: 10px 0 8px; font: 800 clamp(1.5rem, 2.2vw, 1.9rem)/1.05 var(--f-display); font-variation-settings: "wdth" 110; letter-spacing: -0.03em; color: var(--paper); padding-right: 56px; text-wrap: balance; }
.found-text { margin: 0; font-size: 17px; line-height: 1.45; color: rgba(243, 238, 228, 0.82); }
.found-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
.found .textlink { color: var(--paper); }
.found-x { position: absolute; top: 12px; right: 10px; min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: rgba(243, 238, 228, 0.7); font: 650 12px/1 var(--f-display); font-variation-settings: "wdth" 70; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.found-x:hover { color: var(--sun); }

/* Proof ledger along the bottom of the hero */
.proof { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.proof > div { padding: 22px 24px 26px 0; }
.proof > div + div { padding-left: 24px; border-left: 1px solid var(--hair); }
.proof b { display: block; font: 800 clamp(2rem, 3.6vw, 3.2rem)/1 var(--f-display); font-variation-settings: "wdth" 120; letter-spacing: -0.04em; color: var(--ink); font-feature-settings: "tnum"; }
.proof span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.35; color: var(--ink-2); }
.proof-note { margin: 0; padding: 0 0 18px; font-size: 14px; color: var(--ink-3); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .compass { max-width: 420px; margin: 8px auto 0; }
  /* Stacked layouts: the panel sits on the bottom edge of the chart and stays compact */
  .found { top: auto; bottom: 0; padding: 18px 18px 18px; }
  .found-text { display: none; }
  .found-title { font-size: 1.45rem; margin-bottom: 0; }
  .found-ctas { margin-top: 14px; }
}
@media (max-width: 560px) {
  .hero-meta .coords { font-size: 11px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: space-between; }
  .hero-ctas .textlink { align-self: flex-start; }
  .compass { max-width: 100%; }
  /* Proof becomes a compact ledger: figure left, words right */
  .proof { grid-template-columns: 1fr; }
  .proof > div, .proof > div + div { display: grid; grid-template-columns: 8.2rem 1fr; align-items: baseline; gap: 12px; padding: 14px 0; border-left: 0; }
  .proof > div + div { border-top: 1px solid var(--hair); }
  .proof b { font-size: 1.9rem; }
  .proof span { margin: 0; }
}

/* ---------- What we hear: a ruled two-column table ---------- */
.hear { width: 100%; border-collapse: collapse; }
.hear th { text-align: left; padding: 0 0 12px; border-bottom: 1px solid var(--ink); }
.hear td { vertical-align: top; padding: 28px 0 30px; border-bottom: 1px solid var(--hair); }
.hear td:first-child { width: 50%; padding-right: clamp(20px, 4vw, 64px); }
.hear .q { font: 750 clamp(1.3rem, 2.1vw, 1.75rem)/1.18 var(--f-display); font-variation-settings: "wdth" 104; letter-spacing: -0.02em; color: var(--ink); }
.hear .a { margin: 0; max-width: 32em; }
@media (max-width: 760px) {
  .hear thead { display: none; }
  .hear tr, .hear td { display: block; width: 100% !important; }
  .hear td:first-child { padding: 24px 0 8px; border-bottom: 0; }
  .hear td:last-child { padding: 0 0 24px; }
}

/* ---------- Who we work with: one word that keeps changing, then the full index ---------- */
.rot-pause { min-height: 36px; padding: 0 4px; border: 0; background: none; font: 650 12px/1 var(--f-display); font-variation-settings: "wdth" 70; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rot-pause:hover { color: var(--ink); }
.who-word { position: relative; display: block; height: 1.04em; margin-top: 0.04em; overflow: hidden; font: 800 clamp(2.75rem, 9.4vw, 8.6rem)/1.04 var(--f-display); font-variation-settings: "wdth" 62; letter-spacing: -0.01em; text-transform: uppercase; color: var(--cobalt); }
.who-word > span { position: absolute; left: 0; top: 0; white-space: nowrap; transform: translateY(105%); transition: transform 0.65s var(--ease); }
.who-word > span.is-on { transform: none; }
.who-word > span.is-off { transform: translateY(-105%); }

.ind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.ind-col { padding: 20px 24px 6px 0; }
.ind-col + .ind-col { padding-left: 24px; border-left: 1px solid var(--hair); }
.ind h3.label { margin: 0 0 10px; color: var(--ink); }
.ind ul { list-style: none; margin: 0; padding: 0; }
.ind a { display: block; padding: 9px 0; border-bottom: 1px solid var(--hair); font: 650 17px/1.3 var(--f-display); color: var(--ink); text-decoration: none; transition: color 0.2s, padding 0.3s var(--ease); }
.ind a:hover { color: var(--cobalt); padding-left: 6px; }
.ind-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 32px; margin-top: 30px; padding-top: 18px; border-top: 3px solid var(--ink); }
.ind-note p { margin: 0; }
.ind-note .small a { color: var(--ink); }
@media (max-width: 980px) {
  .ind { grid-template-columns: 1fr 1fr; }
  .ind-col:nth-child(3) { padding-left: 0; border-left: 0; }
  .ind-col:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 560px) {
  /* Phones: each group reads as one line of the classifieds */
  .ind { grid-template-columns: 1fr; }
  .ind-col, .ind-col + .ind-col { padding: 18px 0 16px; border-left: 0; }
  .ind-col + .ind-col { border-top: 1px solid var(--hair); }
  .ind ul { display: block; }
  .ind li { display: inline; }
  .ind a { display: inline; padding: 0; border: 0; font-size: 18px; line-height: 1.75; }
  .ind a:hover { padding: 0; }
  .ind li + li::before { content: " / "; color: var(--sun); font: 800 18px/1 var(--f-display); }
}

/* ---------- Services: an index ---------- */
.svc { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--ink); }
.svc a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 48px; gap: 28px; align-items: center; padding: 30px 0; border-top: 1px solid var(--hair); text-decoration: none; transition: background 0.25s, padding 0.35s var(--ease); }
.svc li:first-child a { border-top: 1px solid var(--ink); }
.svc a:hover { background: var(--paper-2); padding-inline: 18px; }
.svc h3 { font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1; font-variation-settings: "wdth" 114; letter-spacing: -0.035em; }
.svc p { margin: 0; font-size: 18px; }
.svc .needle-ico { width: 40px; height: 40px; justify-self: end; color: var(--ink); }
@media (max-width: 820px) { .svc a { grid-template-columns: 1fr 36px; gap: 10px 16px; } .svc p { grid-column: 1; } .svc .needle-ico { grid-column: 2; grid-row: 1 / 3; width: 30px; height: 30px; } }

/* ---------- Talk to someone now: a person, a number, live hours ---------- */
.talk { padding-block: clamp(64px, 9vw, 120px); background: var(--paper-2); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.talk-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.talk-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--ink); }
.talk-top .label { color: var(--ink); }
.status { font: 700 13px/1 var(--f-display); font-variation-settings: "wdth" 72; letter-spacing: 0.09em; text-transform: uppercase; padding: 9px 11px; background: var(--cobalt); color: var(--paper); }
[data-phones="closed"] .status { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.talk h2 { font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
.talk .lede { margin: 22px 0 0; }
.call-card { display: block; background: var(--ink); color: var(--paper); text-decoration: none; transition: background 0.25s; }
.call-card:hover { background: var(--cobalt); }
.call-card picture { display: block; }
.call-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 14%; }
.cc-text { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 22px 22px; }
.cc-k { font: 800 clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--f-display); font-variation-settings: "wdth" 110; letter-spacing: -0.025em; }
.cc-num { font: 700 clamp(1.15rem, 1.7vw, 1.4rem)/1.2 var(--f-display); font-feature-settings: "tnum"; color: var(--sun); }
.cc-note { font-size: 15.5px; line-height: 1.4; color: rgba(243, 238, 228, 0.75); }
.cc-text .needle-ico { grid-column: 2; grid-row: 1 / span 3; width: 38px; height: 38px; }
.talk-alt { margin: 18px 0 0; }
.talk-hours { margin: 16px 0 0; }
@media (max-width: 860px) {
  .talk-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Phones: the face sits right on the call button */
  .call-card { display: grid; grid-template-columns: 116px 1fr; }
  .call-card img { height: 100%; min-height: 128px; object-position: 50% 30%; }
  .cc-text { padding: 16px 16px 16px 18px; gap: 3px 10px; }
  .cc-k { font-size: 1.3rem; }
  .cc-text .needle-ico { width: 26px; height: 26px; }
}

/* ---------- A line worth repeating ---------- */
.say { padding: clamp(56px, 8vw, 110px) 0; }
.say .big { margin: 0; font: 800 clamp(3rem, 10.5vw, 10rem)/0.86 var(--f-display); font-variation-settings: "wdth" 62; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.say .big span { display: block; color: var(--cobalt); }
.say .small { margin-top: 18px; }

/* ---------- Results: a ledger ---------- */
.results { padding-block: clamp(72px, 10vw, 140px); }
.headline-figs { display: grid; grid-template-columns: auto auto 1fr; align-items: end; gap: 12px clamp(20px, 3vw, 44px); margin-bottom: clamp(40px, 6vw, 72px); }
.headline-figs b { display: block; font: 800 clamp(3.2rem, 9vw, 8.6rem)/0.85 var(--f-display); font-variation-settings: "wdth" 122; letter-spacing: -0.05em; color: var(--paper); font-feature-settings: "tnum"; }
.headline-figs .on-sun { color: var(--sun); }
.headline-figs span { display: block; margin-top: 12px; font-size: 17px; color: rgba(243, 238, 228, 0.75); }
.headline-figs .from { align-self: center; font: 650 15px/1.2 var(--f-display); font-variation-settings: "wdth" 66; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(243, 238, 228, 0.55); padding-bottom: 36px; }
.ledger { width: 100%; border-collapse: collapse; font-feature-settings: "tnum"; }
.ledger th { text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--paper); }
.ledger td { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--hair-light); color: var(--paper); font: 700 clamp(1.05rem, 1.6vw, 1.35rem)/1.2 var(--f-display); font-variation-settings: "wdth" 108; }
.ledger td:first-child { font: 400 18px/1.4 var(--f-body); color: rgba(243, 238, 228, 0.85); }
.ledger td.r, .ledger th.r { text-align: right; padding-right: 0; }
.aside-fig { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-top: 36px; padding: 24px 0; border-top: 3px solid var(--sun); border-bottom: 1px solid var(--hair-light); }
.aside-fig b { font: 800 clamp(2.6rem, 5vw, 4.4rem)/1 var(--f-display); font-variation-settings: "wdth" 120; letter-spacing: -0.04em; color: var(--sun); }
.aside-fig p { margin: 0; color: rgba(243, 238, 228, 0.85); max-width: 34em; }
.results .fine { margin: 24px 0 0; font-size: 14.5px; color: rgba(243, 238, 228, 0.55); max-width: 52em; }
@media (max-width: 760px) {
  .headline-figs { grid-template-columns: 1fr; }
  .headline-figs .from { padding: 0; }
  .ledger thead { display: none; }
  .ledger tr { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 16px 0; border-bottom: 1px solid var(--hair-light); }
  .ledger td { border: 0; padding: 6px 8px 0 0; }
  .ledger td:first-child { grid-column: 1 / -1; padding-bottom: 6px; }
  .ledger td::after { content: attr(data-th); display: block; margin-top: 4px; font: 600 11px/1.2 var(--f-display); font-variation-settings: "wdth" 66; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 238, 228, 0.55); }
  .ledger td:first-child::after { display: none; }
  .ledger td.r { text-align: left; }
  .aside-fig { grid-template-columns: 1fr; }
}

/* ---------- Free audit: a working form on a field of sun ---------- */
.audit { background: var(--sun); color: var(--ink); padding-block: clamp(56px, 8vw, 104px); }
.audit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.audit .label { color: var(--ink); }
.audit h2 { margin: 14px 0 18px; font-size: clamp(2.1rem, 3.7vw, 3.4rem); }
.audit p { margin: 0; max-width: 30em; }
.audit form { display: grid; gap: 10px; }
.audit label { font: 650 13px/1.2 var(--f-display); font-variation-settings: "wdth" 66; letter-spacing: 0.09em; text-transform: uppercase; }
.audit .field { display: flex; border: 2px solid var(--ink); background: var(--paper); }
.audit input { flex: 1; min-width: 0; height: 60px; padding: 0 18px; border: 0; background: transparent; font: 400 19px/1 var(--f-body); color: var(--ink); }
.audit input::placeholder { color: var(--ink-3); }
.audit input:focus { outline: none; }
.audit .field:focus-within { box-shadow: 0 0 0 3px var(--ink); }
.audit .field .btn { min-height: 60px; }
.audit .small { color: var(--ink); opacity: 0.8; }
@media (max-width: 860px) { .audit-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .audit .field { flex-direction: column; }
  .audit input { flex: none; width: 100%; height: 58px; border-bottom: 2px solid var(--ink); font-size: 18px; }
  .audit .field .btn { justify-content: space-between; }
}

/* ---------- How it works: four newspaper columns ---------- */
.cols4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.cols4 > div { padding: 22px 24px 8px 0; }
.cols4 > div + div { padding-left: 24px; border-left: 1px solid var(--hair); }
.cols4 .n { display: block; font: 800 clamp(3.4rem, 6vw, 5.2rem)/0.85 var(--f-display); font-variation-settings: "wdth" 62; color: var(--cobalt); margin-bottom: 18px; }
.cols4 h3 { margin-bottom: 12px; }
.cols4 p { font-size: 17.5px; }
.cols4-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
@media (max-width: 980px) { .cols4 { grid-template-columns: 1fr 1fr; } .cols4 > div:nth-child(3) { padding-left: 0; border-left: 0; } .cols4 > div:nth-child(n+3) { border-top: 1px solid var(--hair); } }
@media (max-width: 560px) { .cols4 { grid-template-columns: 1fr; } .cols4 > div, .cols4 > div + div { padding: 20px 0; border-left: 0; } .cols4 > div + div { border-top: 1px solid var(--hair); } }

/* ---------- The people: black and white portraits ---------- */
.people { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 24px); }
.person { grid-column: span 3; margin: 0; }
.person.lead { grid-column: span 6; }
.person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.08); background: var(--paper-2); }
.person.lead img { aspect-ratio: 1 / 1; object-position: 50% 15%; }
.person figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--ink); }
.person figcaption b { font: 800 clamp(1.3rem, 2vw, 1.7rem)/1 var(--f-display); font-variation-settings: "wdth" 112; letter-spacing: -0.02em; color: var(--ink); }
.people-scroll { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.swipe-hint { display: none; }
@media (max-width: 760px) { .swipe-hint { display: block; margin-bottom: 12px; } }
@media (max-width: 760px) {
  /* On phones the portraits stay big: a swipeable strip that snaps to each person */
  .people-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .people-scroll::-webkit-scrollbar { display: none; }
  .people { display: flex; gap: 14px; width: max-content; }
  .person, .person.lead { width: 78vw; max-width: 340px; scroll-snap-align: start; }
  .person img, .person.lead img { aspect-ratio: 4 / 5; }
}

.how { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); margin-top: clamp(48px, 7vw, 96px); counter-reset: how; }
.how div { padding: 22px 0 18px; border-top: 1px solid var(--hair); counter-increment: how; }
.how div:nth-child(-n+2) { border-top: 3px solid var(--ink); }
.how h3 { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.how h3::before { content: counter(how); font-variation-settings: "wdth" 62; color: var(--cobalt); min-width: 0.8em; }
.how p { margin: 0; font-size: 18px; max-width: 30em; }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } .how div:nth-child(2) { border-top-width: 1px; border-top-color: var(--hair); } }

/* ---------- Pricing: three plans in ruled columns ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.plan { display: flex; flex-direction: column; padding: 22px 28px 8px 0; }
.plan + .plan { padding-left: 28px; border-left: 1px solid var(--hair); }
.plan .label { color: var(--ink); }
.plan .fig { display: block; margin: 18px 0 14px; font: 800 clamp(1.9rem, 3.2vw, 2.8rem)/1 var(--f-display); font-variation-settings: "wdth" 112; letter-spacing: -0.035em; color: var(--ink); font-feature-settings: "tnum"; }
.plan .fig small { display: block; margin-top: 8px; font: 650 13px/1.2 var(--f-display); font-variation-settings: "wdth" 66; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.plan p { font-size: 17.5px; }
.plan .terms { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hair); font: 650 15px/1.4 var(--f-display); color: var(--cobalt); }
.price-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ink); }
.price-foot p { margin: 0; max-width: 40em; }
.price-foot b { font-family: var(--f-display); color: var(--ink); }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan, .plan + .plan { padding: 20px 0 6px; border-left: 0; }
  .plan + .plan { border-top: 1px solid var(--ink); }
  .plan .terms { margin-top: 4px; }
  .price-foot .btn { width: 100%; justify-content: space-between; }
}

/* ---------- Questions, answered in the open ---------- */
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); }
.qa div { padding: 22px 0 10px; border-top: 1px solid var(--hair); }
.qa div:nth-child(-n+2) { border-top: 1px solid var(--ink); }
.qa h3 { margin-bottom: 10px; }
.qa p { font-size: 18px; max-width: 32em; }
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; } .qa div:nth-child(2) { border-top-color: var(--hair); } }

/* ---------- Final call: cobalt field, the needle points at the button ---------- */
.final { background: var(--cobalt); color: var(--paper); padding-block: clamp(72px, 10vw, 130px); }
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 22vw, 300px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.final h2 { color: var(--paper); font-size: clamp(3rem, 7.4vw, 7rem); line-height: 0.9; font-variation-settings: "wdth" 118; letter-spacing: -0.045em; }
.final .lede { color: rgba(243, 238, 228, 0.88); margin: 26px 0 0; }
.final-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 34px; }
.final .textlink { color: var(--paper); }
.final .textlink:hover { color: var(--sun); }
.final-note { font: 650 15px/1.4 var(--f-display); color: rgba(243, 238, 228, 0.85); }
.final-needle .needle { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(var(--angle, 225deg)); transition: transform 1.3s cubic-bezier(0.34, 1.4, 0.5, 1); }
@media (max-width: 760px) {
  .final-grid { grid-template-columns: 1fr; }
  .final-needle { width: 120px; order: -1; }
  .final-ctas { flex-direction: column; align-items: stretch; }
  .final-ctas .btn { justify-content: space-between; }
  .final-ctas .textlink { align-self: flex-start; }
}