/* ==========================================================================
   THE HOMEPAGE (#/start) — js/screens/landing.js draws it, js/home-motion.js moves it.
   Every section of autongrowth.com in the app's own look: its tokens, its type, its cards. Classes are hp-*
   (`.landing` is the run's website form, app.css). Motion here is for a stranger's first look; under
   prefers-reduced-motion, and whenever home-motion.js marks the page `hp--still`, everything is simply there.
   ========================================================================== */
.hp { --hp-w: 1180px; position: relative; isolation: isolate; color: var(--ink); overflow-x: clip; }
.hp > * { position: relative; }
.hp-sec, .hp-hero, .hp-nav, .hp-queue, .hp-end, .hp-foot { width: min(var(--hp-w), calc(100% - 2 * var(--s5))); margin-inline: auto; }

/* the soft light behind the hero */
.hp-glow { position: absolute !important; inset: 0 0 auto 0; height: 980px; z-index: -1; pointer-events: none; overflow: hidden; }
.hp-glow i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.hp-glow i:first-child { width: 620px; height: 620px; left: -160px; top: -200px; background: var(--accent-50); animation: hpDrift 18s ease-in-out infinite alternate; }
.hp-glow i:last-child { width: 540px; height: 540px; right: -140px; top: 140px; background: var(--held-bg); animation: hpDrift 22s ease-in-out infinite alternate-reverse; }
@keyframes hpDrift { to { transform: translate3d(60px, 40px, 0) scale(1.08); } }

/* ---------------------------------------------------------------- nav */
.hp-nav { position: sticky !important; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s5); padding: var(--s4) 0; margin-top: 0;
  background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.hp-nav.is-scrolled { border-bottom-color: var(--divider); box-shadow: 0 10px 30px -26px rgb(28 27 23 / .35); }
.hp-brand { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: var(--tr-tight); }
.hp-brand svg { color: var(--accent); }
.hp-navlinks { display: flex; gap: var(--s1); margin-left: auto; }
.hp-navlink { border: 0; background: none; padding: 6px 10px; border-radius: var(--r-pill); font: inherit; font-size: var(--t-base); color: var(--muted); cursor: pointer; }
.hp-navlink:hover { color: var(--ink); background: var(--hover); }
.hp-navlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp-navways { display: flex; gap: var(--s2); align-items: center; margin-left: auto; }
.hp-navlinks + .hp-navways { margin-left: 0; }
@media (max-width: 1080px) { .hp-navlinks + .hp-navways { margin-left: auto; } }

/* ---------------------------------------------------------------- type */
.hp-eyebrow { margin: 0 0 var(--s3); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--accent-700); }
.hp-h1 { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 6.2vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.hp-h1-2, .hp-h2-2 { color: var(--faint); }
.hp-h2 { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.hp-h3 { margin: 0 0 var(--s1); font-size: var(--t-lg); font-weight: 650; line-height: var(--lh-snug); }
.hp-p { margin: 0; font-size: var(--t-md); line-height: var(--lh-body); color: var(--muted); }
.hp-lede { margin: var(--s5) 0 0; max-width: 62ch; font-size: var(--t-lg); line-height: var(--lh-body); color: var(--muted); }
.hp-lede strong { color: var(--ink); font-weight: 650; }

/* ---------------------------------------------------------------- hero */
.hp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s8); align-items: center; padding: var(--s9) 0 var(--s8); min-height: 560px; }
.hp-pill { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s6); padding: 6px 14px; border: 1px solid var(--divider); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); box-shadow: var(--e1); }
.hp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-300); animation: hpPulse 2.2s ease-out infinite; flex: none; }
@keyframes hpPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.hp-word { display: inline-block; }
.hp--ready .hp-hero .hp-word { animation: hpWord .8s cubic-bezier(.2, .7, .2, 1) both; }
.hp--ready .hp-hero .hp-word:nth-child(2) { animation-delay: .06s; } .hp--ready .hp-hero .hp-word:nth-child(3) { animation-delay: .12s; }
.hp--ready .hp-hero .hp-word:nth-child(5) { animation-delay: .22s; } .hp--ready .hp-hero .hp-word:nth-child(6) { animation-delay: .28s; }
.hp--ready .hp-hero .hp-word:nth-child(7) { animation-delay: .34s; }
@keyframes hpWord { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hp--ready .hp-lede--hero, .hp--ready .hp-hero .hp-ways, .hp--ready .hp-note { animation: hpRise .8s .42s cubic-bezier(.2, .7, .2, 1) both; }
.hp--ready .hp-hero .hp-ways { animation-delay: .52s; } .hp--ready .hp-note { animation-delay: .6s; }
@keyframes hpRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hp-ways { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.hp-ways .btn--lg { padding: 12px var(--s6); }
.hp-note { display: inline-flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; font-size: var(--t-sm); color: var(--quiet); }
.hp-note svg { color: var(--accent); flex: none; }

/* the loop orb */
.hp-orb { position: relative; width: 100%; max-width: 460px; justify-self: center; aspect-ratio: 440 / 380; }
.hp--ready .hp-orb { animation: hpRise 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
.hp-orb-svg { width: 100%; height: 100%; overflow: visible; }
.hp-orb-ring { fill: none; stroke: var(--divider); stroke-width: 2; stroke-dasharray: 2 6; }
.hp-orb-trail { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: 180px 180px; transition: stroke-dashoffset 1.2s cubic-bezier(.3, .7, .2, 1); }
.hp-orb-core { fill: var(--surface); stroke: var(--divider); filter: drop-shadow(0 18px 30px rgb(28 27 23 / .10)); }
.hp-orb-node circle { fill: var(--surface); stroke: var(--crumb); stroke-width: 2; transition: fill .4s, stroke .4s, r .4s; }
.hp-orb-node text { font: 600 12px var(--font-sans); fill: var(--quiet); transition: fill .4s; }
.hp-orb-node.is-past circle { fill: var(--accent-100); stroke: var(--accent-300); }
.hp-orb-node.is-on circle { fill: var(--accent); stroke: var(--accent); r: 10; }
.hp-orb-node.is-on text { fill: var(--ink); }
.hp-orb-mid { position: absolute; left: calc(220 / 440 * 100%); top: calc(190 / 380 * 100%); transform: translate(-50%, -50%); width: 34%; text-align: center; display: grid; gap: 4px; pointer-events: none; }
.hp-orb-stage { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 750; color: var(--ink); }
.hp-orb-says { font-size: var(--t-xs); line-height: 1.35; color: var(--muted); }
.hp-orb-stage.is-in, .hp-orb-says.is-in { animation: hpFade .5s ease both; }
@keyframes hpFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the approval queue */
.hp-queue { max-width: 900px; margin-bottom: var(--s9); border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e3); overflow: hidden; }
.hp-queue-h { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s6); border-bottom: 1px solid var(--hairline); font-family: var(--font-display); font-size: var(--t-xl); }
.hp-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--held-bg); color: var(--held-ink); font: 600 var(--t-xs) var(--font-sans); }
.hp-queue-tag { margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--hairline); font: 500 var(--t-xs) var(--font-sans); color: var(--quiet); }
.hp-qrow { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--hairline-2); }
.hp-queue.is-in .hp-qrow { animation: hpRow .7s calc(.15s + var(--n) * .16s) cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hpRow { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.hp-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-50); color: var(--accent-700); font-weight: 700; font-size: var(--t-sm); }
.hp-qbody { flex: 1; min-width: 0; display: grid; gap: 3px; }
.hp-qco { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); }
.hp-qkind { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); color: var(--quiet); }
.hp-qwho { font-size: var(--t-sm); color: var(--muted); }
.hp-qwhat { font-size: var(--t-base); color: var(--ink-3); }
.hp-qwhy { font-size: var(--t-xs); font-style: italic; color: var(--quiet); }
.hp-qacts { display: flex; gap: var(--s2); align-self: center; }
.hp-fakebtn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--divider); background: var(--surface); font-size: var(--t-xs); color: var(--ink-3); }
.hp-fakebtn--go { background: var(--accent); border-color: var(--accent); color: #fff; }
.hp-queue.is-in .hp-qrow:first-of-type .hp-fakebtn--go { animation: hpNudge 2.8s 1.4s ease-in-out infinite; }
@keyframes hpNudge { 0%, 70%, 100% { box-shadow: 0 0 0 0 transparent; } 80% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); } }
.hp-queue-f { margin: 0; padding: var(--s3) var(--s6); background: var(--surface-2); font-size: var(--t-sm); color: var(--quiet); }

/* ---------------------------------------------------------------- sections */
.hp-sec { padding: clamp(64px, 9vw, 120px) 0; }
.hp-sec--tint { width: 100%; padding-inline: max(var(--s5), calc((100% - var(--hp-w)) / 2)); background: color-mix(in srgb, var(--surface) 55%, var(--ground));
  border-block: 1px solid var(--hairline); }
.hp-sec-h { max-width: 760px; margin-bottom: var(--s8); }
.hp-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: var(--s4); border-radius: var(--r-item); background: var(--accent-50); color: var(--accent-700); }
.hp-ico--ink { background: var(--ink); color: var(--on-dark); border-radius: 50%; }
.hp-card { padding: var(--s6); border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e1);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
.hp-card:hover { transform: translateY(-4px); box-shadow: var(--e2); border-color: var(--accent-100); }
.hp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.hp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }

/* reveals */
/* a redraw keeps what was already shown, without playing it again */
.hp--seen .hp-hero .hp-word, .hp--seen .hp-lede--hero, .hp--seen .hp-hero .hp-ways, .hp--seen .hp-note, .hp--seen .hp-orb,
.hp-reveal.is-kept, .hp-reveal.is-kept .hp-qrow, .hp-reveal.is-kept .hp-mini *, .hp-reveal.is-kept .hp-mini span::after,
.hp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--n, 0) * 90ms); }
.hp-reveal.is-in { opacity: 1; transform: none; }

/* how it works */
.hp-how { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.hp-how-c { position: relative; z-index: 1; padding: var(--s7) var(--s6); border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e1); }
.hp-how-n { position: absolute; top: var(--s5); right: var(--s6); font: 600 var(--t-xl) var(--font-mono); color: var(--accent-100); }
.hp-how-line { position: absolute; left: 8%; right: 8%; top: 56px; height: 2px; z-index: 0; background: linear-gradient(90deg, var(--accent-100), var(--accent), var(--accent-100));
  transform-origin: left; transform: scaleX(0); transition: transform 1.4s .3s cubic-bezier(.3, .7, .2, 1); }
.hp-how-c.is-in ~ .hp-how-line { transform: scaleX(1); }

/* watch it run */
.hp-run { max-width: 860px; margin: 0 auto; }
.hp-tabs { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-bottom: var(--s6); }
.hp-tab { border: 1px solid var(--divider); background: var(--surface); padding: 8px 16px; border-radius: var(--r-pill); font: inherit; font-size: var(--t-base); color: var(--ink-3); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hp-tab:hover { border-color: var(--crumb); }
.hp-tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.hp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp-job { display: none; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e3); overflow: hidden; }
.hp-job.is-on { display: block; animation: hpFade .45s ease both; }
.hp-said { padding: var(--s5) var(--s6); border-bottom: 1px solid var(--hairline); }
.hp-said p:last-child { margin: 0; font-size: var(--t-lg); color: var(--ink); }
.hp-work { padding: var(--s5) var(--s6) var(--s6); background: var(--surface-2); }
.hp-work-h { display: flex; justify-content: space-between; align-items: baseline; }
.hp-work-n { font: 500 var(--t-xs) var(--font-mono); color: var(--quiet); }
.hp-steps { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: var(--s4); }
.hp-step { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--s3); opacity: .35; transition: opacity .4s; }
.hp-step-dot { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--crumb); color: transparent; transition: all .35s; }
.hp-step-t { font-size: var(--t-md); color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.hp-step-d { font-size: var(--t-sm); color: var(--quiet); }
.hp-waits { padding: 1px 8px; border-radius: var(--r-pill); background: var(--held-bg); color: var(--held-ink); font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em; }
.hp-step.is-doing { opacity: 1; }
.hp-step.is-doing .hp-step-dot { border-color: var(--accent); border-top-color: transparent; animation: hpSpin .8s linear infinite; }
.hp-step.is-done { opacity: 1; }
.hp-step.is-done .hp-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; animation: hpPop .35s ease; }
@keyframes hpSpin { to { transform: rotate(360deg); } }
@keyframes hpPop { 50% { transform: scale(1.2); } }
.hp-stop { margin: var(--s5) 0 0; font-style: italic; color: var(--accent-700); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.hp-stop.is-in { opacity: 1; transform: none; }
.hp-run-f { margin: var(--s5) 0 0; text-align: center; font-size: var(--t-sm); color: var(--quiet); }

/* the small drawings on the product cards */
.hp-mini { height: 86px; margin: calc(-1 * var(--s2)) 0 var(--s4); padding: var(--s3); border-radius: var(--r-item); background: var(--surface-2); border: 1px solid var(--hairline); overflow: hidden; }
.hp-mini i { display: block; height: 7px; border-radius: 4px; background: var(--hairline); margin-bottom: 7px; }
.hp-mini .w8 { width: 80%; } .hp-mini .w7 { width: 70%; } .hp-mini .w6 { width: 60%; } .hp-mini .w5 { width: 50%; }
.hp-mini--doc .hp-claim { width: 72%; background: var(--held-bg); box-shadow: inset 0 -2px 0 var(--held-bd); }
.hp-mini--find { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s2); align-items: center; }
.hp-mini--find em { font: 500 var(--t-micro) var(--font-mono); font-style: normal; color: var(--accent-700); background: var(--accent-50); padding: 1px 6px; border-radius: var(--r-pill); margin-bottom: 7px; }
.hp-mini--find .hp-gap { background: var(--held-bg); } .hp-mini--find .hp-gap + em { color: var(--held-ink); background: var(--held-bg); }
.hp-mini--okr { display: grid; gap: 7px; font-size: var(--t-micro); color: var(--quiet); }
.hp-mini--okr span { display: grid; grid-template-columns: 64px 1fr; align-items: center; height: 16px; }
.hp-mini--okr span::after { content: ''; height: 8px; width: calc(100% * var(--v)); border-radius: 4px; background: var(--accent); transform-origin: left; }
.hp-mini--plan { display: grid; gap: 8px; }
.hp-mini--plan span { display: grid; grid-template-columns: 1fr 34px; gap: var(--s2); align-items: center; }
.hp-mini--plan i { margin: 0; height: 10px; width: calc(100% * var(--v)); background: var(--accent-100); }
.hp-mini--plan b { font: 500 var(--t-micro) var(--font-mono); color: var(--ink-3); text-align: right; }
.hp-mini--mail { display: flex; align-items: center; gap: 0; padding-left: var(--s4); }
.hp-mini--mail span { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; border: 3px solid var(--surface-2); background: var(--accent-50); color: var(--accent-700); font-weight: 700; font-size: var(--t-xs); }
.hp-mini--mail span:last-child { background: var(--ink); color: var(--on-dark); }
.hp-mini--funnel { display: flex; align-items: flex-end; gap: 8px; }
.hp-mini--funnel i { flex: 1; margin: 0; height: calc(64px * var(--v)); min-height: 5px; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--accent), var(--accent-300)); transform-origin: bottom; }
.hp-card.is-in .hp-mini--okr span::after, .hp-card.is-in .hp-mini--plan i { animation: hpGrowX 1s .4s cubic-bezier(.3, .7, .2, 1) both; }
.hp-card.is-in .hp-mini--funnel i { animation: hpGrowY 1s .4s cubic-bezier(.3, .7, .2, 1) both; }
.hp-card.is-in .hp-mini--funnel i:nth-child(2) { animation-delay: .5s; } .hp-card.is-in .hp-mini--funnel i:nth-child(3) { animation-delay: .6s; }
.hp-card.is-in .hp-mini--funnel i:nth-child(4) { animation-delay: .7s; } .hp-card.is-in .hp-mini--funnel i:nth-child(5) { animation-delay: .8s; }
@keyframes hpGrowX { from { transform: scaleX(0); } }
@keyframes hpGrowY { from { transform: scaleY(0); } }

/* grounded */
.hp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s9); align-items: center; }
.hp-draft { border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e3); overflow: hidden; }
.hp-draft-h { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) var(--s6); border-bottom: 1px solid var(--hairline); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.hp-draft-t { margin: 0; padding: var(--s6); font-size: var(--t-lg); line-height: 1.7; color: var(--ink); }
.hp-draft-t mark { background: transparent; color: inherit; border-radius: 4px; padding: 1px 2px; box-shadow: inset 0 -2px 0 var(--hairline); transition: background .45s, box-shadow .45s; }
.hp-draft-t mark.is-on { background: var(--accent-50); box-shadow: inset 0 -2px 0 var(--accent); }
.hp-chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s6); }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface-2); font-size: var(--t-xs); color: var(--muted); transition: all .45s; }
.hp-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px -10px var(--accent); }
.hp-draft-f { margin: var(--s4) 0 0; padding: var(--s3) var(--s6); border-top: 1px solid var(--hairline); background: var(--surface-2); font-size: var(--t-sm); color: var(--quiet); }

/* pricing */
.hp-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.hp-pack { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--s2); row-gap: var(--s3); padding: var(--s7) var(--s6); border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e1); }
.hp-pack:last-child { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.hp-pack-n { font: 600 var(--t-num-lg) var(--font-mono); letter-spacing: var(--tr-num); }
.hp-pack-u { font-size: var(--t-md); color: var(--muted); }
.hp-pack:last-child .hp-pack-u { color: var(--on-dark-2); }
.hp-pack-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.hp-pack:last-child .hp-pack-bar { background: rgb(255 255 255 / .12); }
.hp-pack-bar i { display: block; height: 100%; width: calc(100% * var(--v)); border-radius: 3px; background: var(--accent); transform-origin: left; }
.hp-pack.is-in .hp-pack-bar i { animation: hpGrowX 1.2s .3s cubic-bezier(.3, .7, .2, 1) both; }
.hp-pack-p { font: 700 var(--t-2xl) var(--font-display); }
.hp-pricing { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--s6); align-items: start; }
.hp-pricing .hp-packs { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.hp-pack { position: relative; }
.hp-pack-save { position: absolute; top: var(--s4); right: var(--s5); padding: 2px 9px; border-radius: var(--r-pill); background: var(--accent-50); color: var(--accent-700); font: 600 var(--t-xs) var(--font-sans); }
.hp-pack:last-child .hp-pack-save { background: var(--accent); color: #fff; }
.hp-pack-per { align-self: center; justify-self: end; font: 500 var(--t-xs) var(--font-mono); color: var(--quiet); }
.hp-pack:last-child .hp-pack-per { color: var(--on-dark-2); }
.hp-rates { padding: var(--s6); border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--surface); box-shadow: var(--e1); }
.hp-rates ul { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; }
.hp-rates li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--hairline); font-size: var(--t-md); color: var(--ink-3); }
.hp-rates li strong { flex: none; font: 600 var(--t-base) var(--font-mono); color: var(--ink); text-align: right; max-width: 45%; }
.hp-rates li strong.hp-rate-note { font: 500 var(--t-sm) var(--font-sans); color: var(--muted); }
.hp-rates-f { margin: var(--s4) 0 0; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--quiet); }
.hp-price-f { display: flex; align-items: center; gap: var(--s2); margin: var(--s6) 0 0; font-size: var(--t-sm); color: var(--quiet); }
.hp-price-f svg { color: var(--accent); }

/* the end, and the foot */
.hp-end { padding: clamp(80px, 10vw, 140px) 0; text-align: center; }
.hp-end .hp-lede { margin-inline: auto; }
.hp-end .hp-ways { justify-content: center; }
.hp-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s6); padding: var(--s8) 0 var(--s7); border-top: 1px solid var(--divider); }
.hp-foot .hp-p { max-width: 44ch; margin-top: var(--s3); }
.hp-foot-links { display: flex; flex-wrap: wrap; gap: var(--s1); justify-content: flex-end; align-content: start; }
.hp-foot-c { grid-column: 1 / -1; margin: 0; font-size: var(--t-xs); color: var(--quiet); }

/* ---------------------------------------------------------------- narrower */
@media (max-width: 1080px) {
  .hp-navlinks { display: none; }
  .hp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hp-hero { padding-top: var(--s7); min-height: 0; }
  .hp-orb { max-width: 400px; }
  .hp-grid3, .hp-how, .hp-packs, .hp-pricing { grid-template-columns: minmax(0, 1fr); }
  .hp-how-line { display: none; }
}
@media (max-width: 640px) {
  .hp-sec, .hp-hero, .hp-nav, .hp-queue, .hp-end, .hp-foot { width: calc(100% - 32px); }
  .hp-sec--tint { width: 100%; padding-inline: 16px; }
  .hp-navways .btn--ghost { display: none; }
  .hp-grid4 { grid-template-columns: minmax(0, 1fr); }
  .hp-qrow { flex-wrap: wrap; padding: var(--s4); }
  .hp-qacts { width: 100%; justify-content: flex-end; }
  .hp-queue-h, .hp-queue-f { padding-inline: var(--s4); }
  .hp-foot { grid-template-columns: minmax(0, 1fr); }
  .hp-foot-links { justify-content: flex-start; }
  .hp-ways .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------- stillness */
.hp--still *, .hp--still *::before, .hp--still *::after { animation: none !important; transition: none !important; }
.hp--still .hp-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hp *, .hp *::before, .hp *::after { animation: none !important; transition: none !important; }
  .hp-reveal { opacity: 1; transform: none; }
  .hp-how-line { transform: none; }
}