/* Max HP site. Colours come from tokens.css, generated from Design/design-tokens.json.
   The app's language: chart paper, blue-black ink, one red that means "now", New York for
   headings and hero figures, SF Pro for everything else, small tracked capitals for labels. */

* { box-sizing: border-box; }
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  /* !important: Turnstile's script sets an inline white background on the friend page. */
  background: var(--paper) !important;
  color: var(--ink);
  font: 17px/1.5 var(--sans);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--signal-fill) 22%, transparent); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.prose-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ---------- Type ---------- */

.serif, h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.02; margin: 0; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.02em; }
h3 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; font-weight: 600; }
p { margin: 0 0 16px; }
/* No lone last words: balanced headings, tidy paragraph endings. */
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
.lede { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.45; color: var(--ink-secondary); max-width: 34em; }
.secondary { color: var(--ink-secondary); }
.tabular { font-variant-numeric: tabular-nums; }

/* The chart-label voice: SectionLabel, the trust strip, PRO, eyebrows. */
.label {
  font: 600 12px/1.3 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

/* The charted line: one rule drawn beneath, from the leading edge, like a pen stroke.
   Signal only in the moment (the hero, a revealed code). */
.charted { position: relative; display: inline-block; padding-bottom: 0.08em; }
.charted::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.06em;
  height: max(2px, 0.07em);
  background: var(--signal-fill);
  transform-origin: left center;
  animation: draw 420ms cubic-bezier(0, 0, 0.58, 1) 260ms both;
}
.charted.ink::after { background: var(--ink); }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Links say where they go: a chevron opens another page here, a diagonal arrow leaves the site.
   Header and footer nav stay plain. */
a.label:not(.site-nav a)::after, a[href^="http"]::after {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.35em;
  vertical-align: -0.1em; background: currentColor;
  -webkit-mask: url("/img/chevron.svg") center / contain no-repeat; mask: url("/img/chevron.svg") center / contain no-repeat;
  transition: transform 140ms ease;
}
a.label:not(.site-nav a):hover::after { transform: translateX(2px); }
a[href^="http"]::after {
  width: 0.72em; height: 0.72em; margin-left: 0.12em; vertical-align: 0.08em;
  -webkit-mask-image: url("/img/arrow-out.svg"); mask-image: url("/img/arrow-out.svg");
}
a[href^="http"]:hover::after { transform: translate(1px, -1px); }

/* ---------- Header and footer ---------- */

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.wordmark { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); }
.wordmark .letters { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.wordmark .max { font: 600 22px/1 var(--serif); }
.wordmark .hp { font: 600 17.6px/1 var(--sans); letter-spacing: 0.06em; }
.wordmark .rule { height: 2px; background: var(--signal-fill); }
.site-nav { display: flex; gap: 22px; }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* The rule sits inside the side padding, so it lines up with the content like every other rule. */
.site-footer { position: relative; margin-top: 96px; padding-top: 28px; padding-bottom: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; border-top: var(--hairline) solid var(--rule); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Pieces ---------- */

.hairline { border: 0; border-top: var(--hairline) solid var(--rule); margin: 0; }

/* Trust strip: a hairline, one line of claims, a hairline. */
.trust { border-block: var(--hairline) solid var(--rule); padding: 12px 0; text-align: center; }
.trust .label { color: var(--ink); }
.trust span + span::before { content: "\00B7"; margin: 0 0.7em; color: var(--ink-secondary); }
@media (max-width: 560px) { .trust span { display: block; } .trust span + span::before { content: none; } }

/* One lifted thing per page: the primary action is an ink capsule. Others are paper with a hairline. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--paper);
  font: 600 17px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}
.button:active { transform: scale(0.98); }
.button[disabled] { opacity: 0.35; cursor: default; transform: none; }
.button.paper { background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 var(--hairline-strong) var(--rule-strong); }
.button.block { width: 100%; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; white-space: nowrap; border-radius: 999px; box-shadow: inset 0 0 0 var(--hairline-strong) var(--rule-strong); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

.sheet { background: var(--paper-raised); border-radius: var(--radius); }

/* A step swatch: the short upright bar in a step's band colour. */
.swatch { display: inline-block; width: 3px; height: 1.05em; border-radius: 1px; vertical-align: -0.15em; margin-right: 10px; }

/* Ruled rows, like the Ledger. */
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--rule); }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; border-bottom: var(--hairline) solid var(--rule); color: var(--ink-secondary); }
.rows li strong { color: var(--ink); font-weight: 600; }
.rows.split li { grid-template-columns: 11em minmax(0, 1fr); gap: 20px; align-items: baseline; }
@media (max-width: 640px) { .rows.split li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- Phones ---------- */

.phone {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1320 / 2868;
  border-radius: 13.5% / 6.2%; overflow: hidden;
  background: var(--paper-raised);
  /* The bezel is drawn outside the box; layouts leave --bw of room for it. */
  --bw: 7px;
  box-shadow: 0 0 0 var(--hairline-strong) var(--rule-strong), 0 0 0 var(--bw) var(--bezel), 0 0 0 calc(var(--bw) + 0.5px) var(--rule-strong);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Home ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; padding: 40px 0 72px; }
.hero .label { margin-bottom: 22px; }
.hero .lede { margin: 26px 0 32px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-phones { position: relative; height: 640px; }
.hero-phones .phone { position: absolute; width: 290px; }
.hero-phones .back { right: 0; top: 0; }
.hero-phones .front { right: 190px; top: 70px; }
@media (max-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 16px; }
  .hero-phones { height: auto; display: flex; align-items: flex-start; justify-content: center; gap: 28px; padding: 0 8px; }
  .hero-phones .phone { position: static; flex: 0 1 250px; width: auto; }
  .hero-phones .front { order: -1; margin-top: 40px; }
}
@media (max-width: 560px) { .hero-phones { gap: 20px; padding: 0 5px; } .hero-phones .phone { --bw: 5px; } }

.section { padding: 96px 0 0; }
.section-head { max-width: 40em; margin-bottom: 40px; }
.section-head .label { margin-bottom: 14px; }
.section-head p:not(.label) { color: var(--ink-secondary); font-size: 19px; }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.feature.flip > :first-child { order: 2; }
.feature .phone { margin: 0 auto; }
@media (max-width: 860px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature.flip > :first-child { order: 0; }
  .feature .phone { max-width: 260px; }
}

/* The ladder: dose steps as a staircase over step bands, with weigh-ins. */
.ladder { padding: 28px 28px 20px; }
.ladder svg { width: 100%; height: auto; overflow: visible; }
.ladder .band { opacity: var(--band-opacity); }
.ladder .stair { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ladder .weigh { fill: var(--ink-secondary); }
.ladder .avg { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ladder .base { stroke: var(--ink); stroke-width: 1; }
.ladder .dose-label { font: 600 var(--dose-px) var(--sans); fill: var(--ink); font-variant-numeric: tabular-nums; }
.ladder .axis { font: 500 var(--axis-px) var(--sans); fill: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.ladder .now { fill: var(--signal-fill); }
.ladder-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.ladder-legend span { display: inline-flex; align-items: center; gap: 8px; }
/* Every legend mark sits in the same 16px slot, so the words line up in the grid. */
.ladder-legend i { display: inline-block; width: 16px; flex: none; }
.lg-band { height: 12px; border-radius: 2px; background: var(--step-3); opacity: 0.6; }
.lg-weigh { height: 6px; background: radial-gradient(circle, var(--ink-secondary) 2.6px, transparent 3.1px); }
.lg-avg { height: 2px; background: var(--ink); }
.lg-stair { border-top: 1.5px dashed var(--ink); }
.js .ladder .avg { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .ladder.seen .avg { animation: trace 1400ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards; }
.js .ladder .weigh { opacity: 0; }
.js .ladder.seen .weigh { animation: fade 500ms ease forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.steps-table { margin-top: 28px; }
.steps-table li { grid-template-columns: 8em minmax(0, 1fr) auto; gap: 20px; align-items: baseline; }
.steps-table .figure { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.steps-table .dose { grid-area: dose; } .steps-table .detail { grid-area: detail; } .steps-table .rate { grid-area: rate; text-align: right; }
.steps-table li { grid-template-areas: "dose detail rate"; }
@media (max-width: 640px) {
  .steps-table li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "dose rate" "detail detail"; gap: 2px 16px; }
  .steps-table .detail { font-size: 15px; }
}
/* Phones get the taller drawing; its sizes are set in the SVG so text reads the same on screen. */
.ladder svg.tall { display: none; }
@media (max-width: 640px) {
  .ladder { padding: 18px 16px 16px; }
  .ladder svg.wide { display: none; }
  .ladder svg.tall { display: block; }
  .ladder-legend { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 24px; margin-top: 16px; }
  .ladder .avg { stroke-width: 2.8; }
  .ladder .stair { stroke-width: 2; stroke-dasharray: 7 5; }
  .ladder .base { stroke-width: 1.5; }
}
@media (max-width: 400px) { .site-nav { gap: 14px; } .site-nav .label { letter-spacing: 0.06em; } }
@media (max-width: 359px) {
  .site-header { gap: 12px; } .site-nav { gap: 12px; } .site-nav .label { font-size: 11px; letter-spacing: 0.05em; }
  .hero h1 { font-size: 35px; }
  .hero .pill { font-size: 11px; letter-spacing: 0.06em; padding-inline: 12px; }
  .ladder-legend { grid-template-columns: max-content; }
}

.private { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
@media (max-width: 860px) { .private { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.plan { padding: 28px; display: flex; flex-direction: column; }
.plan h3 { font-size: 26px; margin-bottom: 4px; }
.plan .rows { margin: 20px 0 0; }
.plan .rows li { padding: 11px 0; }
.plan .rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.plan .price { display: flex; justify-content: space-between; gap: 16px; color: var(--ink); }
.plan .price span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.plan.pro { box-shadow: inset 0 0 0 var(--hairline-strong) var(--rule-strong); background: transparent; border-radius: var(--radius); }
@media (max-width: 760px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan { padding: 24px 22px; } }

.closing { text-align: center; padding: 120px 0 0; }
.closing h2 { font-size: clamp(34px, 4.6vw, 52px); }
.closing p { color: var(--ink-secondary); margin: 0 auto; max-width: 30em; font-size: 19px; }

/* ---------- Prose pages ---------- */

.page-head { padding: 24px 0 36px; }
.page-head .label { margin-bottom: 16px; }
.page-head h1 { font-size: clamp(40px, 6vw, 60px); }
.page-head .lede { margin: 22px 0 0; }
.glance { padding: 8px 24px; margin: 0 0 48px; }
.glance .rows { border-top: 0; margin: 0; }
.glance .rows li:last-child { border-bottom: 0; }
.prose h2 { font-size: 26px; margin: 0 0 12px; padding-top: 28px; border-top: var(--hairline) solid var(--rule); }
.prose section { margin-bottom: 40px; }
.prose p, .prose li { color: var(--ink-secondary); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { padding-left: 1.1em; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--rule-strong); }
/* Ruled rows inside prose are tables, not bullet lists: no indent, no gap. */
.prose .rows { padding-left: 0; }
.prose .rows li { margin-bottom: 0; }
.qa { margin: 0; }
.qa dt { color: var(--ink); font-weight: 600; padding-top: 16px; border-top: var(--hairline) solid var(--rule); }
.qa dd { margin: 4px 0 16px; color: var(--ink-secondary); }
.qa dt:first-child { border-top: 0; padding-top: 0; }
.contact { padding: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 48px; }
.contact .serif { font-size: 24px; }

/* ---------- Friend page ---------- */

.slip-wrap { max-width: 560px; margin: 8px auto 0; padding: 0 24px; }
.slip { position: relative; padding: 36px 32px 32px; }
/* Perforation between the offer and the claim, like a tear-off slip. */
.slip .perf { position: relative; height: 0; margin: 28px -32px; border-top: 1.5px dashed var(--rule-strong); }
.slip .perf::before, .slip .perf::after { content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); }
.slip .perf::before { left: -11px; }
.slip .perf::after { right: -11px; }
@media (max-width: 560px) {
  .slip-wrap { padding: 0 16px; }
  .slip { padding: 30px 20px 22px; }
  .slip .perf { margin: 26px -20px; }
  /* The tear-off stub runs a little wider so Cloudflare's full-width check (300px minimum) fits on a 375px phone. */
  .claim-row { margin-inline: -8px; }
}
.slip h1 { font-size: clamp(38px, 8vw, 52px); margin: 14px 0 16px; }
.slip .figure { font: 600 1em/1 var(--serif); }
.slip .lede { font-size: 18px; margin: 0; }
.claim-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.turnstile-box { min-height: 65px; min-width: 0; display: flex; justify-content: center; }
.turnstile-box > * { flex: 0 1 100%; display: flex; justify-content: center; }
.status { min-height: 1.5em; margin: 0; text-align: center; color: var(--ink-secondary); font-size: 15px; }
.code {
  font: 600 clamp(26px, 6.4vw, 36px)/1.1 var(--serif);
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
  color: var(--ink); word-break: break-all; margin: 10px 0 24px;
}
.copy-row { display: flex; gap: 10px; flex-wrap: wrap; }
.copy-row .button { flex: 1 1 200px; }
.how { margin-top: 28px; counter-reset: how; }
.how li { counter-increment: how; grid-template-columns: 1.6em minmax(0, 1fr); gap: 10px; }
.how li::before { content: counter(how); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.small { font-size: 14px; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ---------- Motion ---------- */

.rise { animation: rise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise.d1 { animation-delay: 80ms; } .rise.d2 { animation-delay: 160ms; } .rise.d3 { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-delay: 0ms !important; transition: none !important; }
  .charted::after { animation-name: fade; }
  .rise { animation-name: fade; }
  .js .ladder .avg { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .ladder .weigh { opacity: 1; }
}
@media (prefers-contrast: more) {
  :root { --hairline: 1px; --rule: var(--rule-strong); }
}