/* ==========================================================================
   home.css — stylesheet for the Strtups Payments landing page (/).
   ==========================================================================

   WHY THIS FILE EXISTS SEPARATELY FROM styles.css
   -----------------------------------------------
   styles.css (124KB) belongs to the pre-pivot "operating system for
   entrepreneurs" site. Those pages are parked in archive/marketing/, but
   styles.css is still loaded by /early, so it stays in public/marketing/.
   Rather than bolt a second personality onto it, the new landing page gets its
   own self-contained sheet. Nothing here depends on styles.css, and nothing in
   styles.css depends on this — either can be deleted without touching the
   other.

   THE LAYOUT MODEL
   ----------------
   The page is a vertical stack of full-width bands. Each band centres a
   max-width container and owns its own vertical rhythm. There is no shared
   grid system, no columns spanning bands, and no absolute positioning outside
   of small decorative flourishes. That is deliberate: the brief was "way
   simpler", and a stack of independent bands is the layout that stays simple
   when someone adds a seventh section a year from now.

   THE THEME
   ---------
   Carried over from the existing Strtups site so the pivot reads as the same
   company: Inter, near-black ink on white, and the blue -> violet -> orange
   gradient used for emphasis. The one dark surface on the page is the code
   panel, which earns the contrast by being the developer-facing artefact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   Every colour on the page resolves to one of these. If the brand shifts,
   this block is the only thing that needs to change.
   -------------------------------------------------------------------------- */
:root{
  /* Text */
  --ink:#0b0b0b;          /* body copy and the strongest headings */
  --head:#101a35;         /* section headings — a navy-leaning near-black */
  --muted:#5c6675;        /* supporting copy */
  --faint:#7c869a;        /* labels, captions, table headers */

  /* Surfaces */
  --paper:#fff;
  --soft:#f6f7fb;         /* alternating band background */
  --line:#e4e8f0;         /* hairlines and card borders */
  --line-soft:#eef1f7;    /* interior rules inside cards */

  /* Brand accents */
  --accent:#5547ee;       /* primary action */
  --accent-dark:#4033d4;  /* primary action, pressed/hover */
  --blue:#4ab3f4;
  --violet:#7469ec;
  --purple:#9a66e5;
  --orange:#ff7438;
  --brand-sweep:linear-gradient(96deg,#4ab3f4 0%,#6d7be9 30%,#9a66e5 56%,#ff7438 100%);

  /* Semantic */
  --good:#177654;
  --good-bg:#e7f8ef;
  --good-line:#c3ead6;

  /* Code panel */
  --code-bg:#0d1120;
  --code-bar:#151a2c;
  --code-line:#232a41;
  --code-text:#d7dcec;

  /* Rhythm */
  --band-y:clamp(72px,8vw,120px);
  --gutter:clamp(20px,4vw,40px);
  --radius:16px;
}

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Anchor targets sit under a sticky 68px header, so every jump needs headroom. */
[id]{scroll-margin-top:96px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{margin:0;color:var(--head);letter-spacing:-.035em;line-height:1.08}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
button{font:inherit}

/* Everything the keyboard can reach shows it. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* Visually hidden but read aloud — used for the skip link and slider labels. */
.hm-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.hm-skip{
  position:fixed;top:10px;left:10px;z-index:60;
  padding:10px 16px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;
  transform:translateY(-160%);transition:transform .16s ease;
}
.hm-skip:focus{transform:translateY(0)}

/* --------------------------------------------------------------------------
   3 · Band + container primitives
   Every section is <section class="hm-band"><div class="hm-wrap">…</div></section>.
   The -alt modifier tints the band so adjacent sections separate without rules.
   -------------------------------------------------------------------------- */
.hm-band{padding:var(--band-y) 0}
.hm-band-alt{background:var(--soft);border-block:1px solid var(--line)}
.hm-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.hm-wrap-narrow{max-width:840px}

/* Centred section header: pill kicker, heading, one line of lead copy. */
.hm-head{max-width:720px;margin:0 auto 52px;text-align:center}
.hm-head h2{font-size:clamp(32px,4vw,50px);font-weight:600}
.hm-head p{margin-top:18px;color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.55}

.hm-kicker{
  display:inline-block;margin-bottom:18px;padding:6px 14px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--paper);
  color:var(--accent);font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
}
.hm-band-alt .hm-kicker{background:var(--paper)}

/* The gradient is the brand's one flourish — reserved for a single phrase per
   heading so it stays an accent rather than a decoration. */
.hm-sweep{
  background:var(--brand-sweep);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* --------------------------------------------------------------------------
   4 · Buttons
   -------------------------------------------------------------------------- */
.hm-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border:1px solid transparent;border-radius:11px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.hm-btn b{font-weight:700;font-size:17px;line-height:1}
.hm-btn:hover{transform:translateY(-1px)}

.hm-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(85,71,238,.22)}
.hm-btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}

.hm-btn-ghost{background:var(--paper);border-color:var(--line);color:var(--head)}
.hm-btn-ghost:hover{border-color:#c9d0e0;box-shadow:0 6px 18px rgba(20,30,58,.07)}

.hm-btn-lg{padding:16px 28px;font-size:16px}

/* --------------------------------------------------------------------------
   5 · Header
   Sticky, translucent, with the brand gradient as a 2px baseline. Modelled on
   Surge's header: brand left, a short link list right, two actions.
   -------------------------------------------------------------------------- */
.hm-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:14px var(--gutter);
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.hm-nav::after{
  content:"";position:absolute;inset:auto 0 -2px;height:2px;
  background:var(--brand-sweep);opacity:.85;
}
.hm-nav-inner{
  display:flex;align-items:center;gap:24px;
  width:100%;max-width:1200px;margin:0 auto;
}
.hm-brand{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
/* The emblem is 222x180, not square. Pinning both axes squashed it; set the
   width and let the height follow so it keeps its real proportions. */
.hm-brand img{width:30px;height:auto;display:block}

.hm-nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.hm-nav-links a{
  padding:8px 12px;border-radius:9px;
  color:var(--muted);font-size:14.5px;font-weight:520;
  transition:background .15s ease,color .15s ease;
}
.hm-nav-links a:hover{background:var(--soft);color:var(--ink)}

.hm-nav-actions{display:flex;align-items:center;gap:10px}
.hm-nav-actions .hm-btn{padding:9px 16px;font-size:14.5px}
.hm-nav-signin{padding:9px 12px;color:var(--head);font-size:14.5px;font-weight:600}
.hm-nav-signin:hover{color:var(--accent)}

/* Below 940px the link list is dropped rather than folded into a hamburger:
   every one of those links is an in-page anchor that scrolling already
   reaches, so a menu would add a control that buys the visitor nothing. */
@media (max-width:940px){
  .hm-nav-links{display:none}
  .hm-nav-inner{gap:14px}
  .hm-nav-actions{margin-left:auto}
}
@media (max-width:520px){
  .hm-nav-signin{display:none}
}

/* --------------------------------------------------------------------------
   6 · Hero
   Centred, like Surge's. The decorative layer is a single soft gradient wash
   behind the headline — no orbs, no ribbons, nothing that competes with the
   one number this page exists to communicate.
   -------------------------------------------------------------------------- */
.hm-hero{position:relative;overflow:hidden;padding:clamp(64px,8vw,110px) 0 clamp(48px,5vw,72px);text-align:center}
.hm-hero-glow{
  position:absolute;z-index:0;inset:-40% 50% auto auto;
  width:min(1100px,150vw);aspect-ratio:1;transform:translateX(50%);
  background:radial-gradient(circle,rgba(116,105,236,.16) 0%,rgba(74,179,244,.10) 34%,rgba(255,116,56,.07) 56%,rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.hm-hero .hm-wrap{position:relative;z-index:1}

.hm-hero h1{
  max-width:15ch;margin:0 auto;
  font-size:clamp(42px,6.2vw,82px);font-weight:600;line-height:1.0;letter-spacing:-.045em;
}
.hm-hero-lead{
  max-width:640px;margin:26px auto 0;
  color:var(--muted);font-size:clamp(17px,1.9vw,21px);line-height:1.5;letter-spacing:-.012em;
}
.hm-hero-lead strong{color:var(--head);font-weight:620}

.hm-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

/* Three plain facts under the CTAs. Not cards — a single line of text with
   dot separators, so they read as reassurance rather than as features. */
.hm-hero-facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin-top:30px;color:var(--faint);font-size:14px;
}
.hm-hero-facts span{display:inline-flex;align-items:center;gap:8px}
.hm-hero-facts span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--violet);opacity:.6}

/* --------------------------------------------------------------------------
   7 · Savings calculator
   The centrepiece. One control, one number. The rate table beside it explains
   where the number came from, because a savings figure with no visible
   arithmetic behind it reads as marketing rather than as a quote.
   -------------------------------------------------------------------------- */
.hm-calc-band{padding-top:clamp(28px,3vw,44px);padding-bottom:var(--band-y)}
.hm-calc{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:0;
  overflow:hidden;border:1px solid var(--line);border-radius:20px;
  background:var(--paper);box-shadow:0 20px 50px rgba(24,33,64,.09);
}
.hm-calc-main{padding:clamp(28px,3.4vw,42px)}
.hm-calc-label{display:block;color:var(--faint);font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}

/* The saving, set as large as the page's H1. It is the argument. */
.hm-calc-figure{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:10px 0 6px;
}
.hm-calc-amount{
  font-size:clamp(44px,6.4vw,76px);font-weight:640;line-height:1;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:var(--good);
}
.hm-calc-unit{color:var(--muted);font-size:15px;font-weight:560}
.hm-calc-sub{color:var(--muted);font-size:15px}
.hm-calc-sub b{color:var(--head);font-weight:640;font-variant-numeric:tabular-nums}

/* Slider. Restyled on both engines; the track carries the brand sweep so the
   control itself is on-brand rather than a default blue bar. */
.hm-calc-slider{margin-top:30px}
.hm-calc-slider input[type=range]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:26px;margin:0;background:transparent;cursor:pointer;
}
.hm-calc-slider input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;background:var(--brand-sweep);
}
.hm-calc-slider input[type=range]::-moz-range-track{
  height:8px;border-radius:999px;background:var(--brand-sweep);
}
.hm-calc-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-9px;
  border:3px solid #fff;border-radius:50%;background:var(--accent);
  box-shadow:0 3px 10px rgba(35,43,77,.28);
}
.hm-calc-slider input[type=range]::-moz-range-thumb{
  width:20px;height:20px;
  border:3px solid #fff;border-radius:50%;background:var(--accent);
  box-shadow:0 3px 10px rgba(35,43,77,.28);
}
.hm-calc-scale{
  display:flex;justify-content:space-between;
  margin-top:8px;color:var(--faint);font-size:12px;
}
.hm-calc-volume{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:10px;
}
.hm-calc-volume strong{color:var(--head);font-size:19px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.hm-calc-fine{margin-top:22px;color:var(--faint);font-size:12.5px;line-height:1.55}

/* Right rail: the two rate cards being compared, so the figure is auditable. */
.hm-calc-rail{
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:clamp(24px,3vw,32px);
  border-left:1px solid var(--line);background:var(--soft);
}
.hm-calc-quote{
  padding:16px 18px;border:1px solid var(--line);border-radius:13px;background:var(--paper);
}
.hm-calc-quote.is-ours{border-color:#cfc9f8;box-shadow:0 6px 18px rgba(85,71,238,.10)}
.hm-calc-quote span{display:block;color:var(--faint);font-size:12px;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.hm-calc-quote strong{display:block;margin-top:7px;color:var(--head);font-size:21px;font-weight:650;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hm-calc-quote em{display:block;margin-top:5px;color:var(--muted);font-size:13px;font-style:normal}
.hm-calc-quote.is-ours strong{color:var(--accent)}
.hm-calc-versus{
  align-self:center;color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

@media (max-width:860px){
  .hm-calc{grid-template-columns:1fr}
  .hm-calc-rail{border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap}
  .hm-calc-quote{flex:1 1 200px}
  .hm-calc-versus{display:none}
}

/* --------------------------------------------------------------------------
   8 · "Why Strtups" grid
   Surge's two-column list of six: a small mark, a bold lead-in, and the rest
   of the sentence running on inline. Prose, not cards.
   -------------------------------------------------------------------------- */
.hm-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 60px}
.hm-why-item{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start}
.hm-why-mark{
  display:grid;place-items:center;width:26px;height:26px;margin-top:2px;
  border-radius:8px;background:rgba(85,71,238,.09);color:var(--accent);
}
.hm-why-mark svg{width:15px;height:15px;display:block}
.hm-why-item p{color:var(--muted);font-size:15.5px;line-height:1.62}
.hm-why-item p strong{color:var(--head);font-weight:640}

@media (max-width:760px){.hm-why{grid-template-columns:1fr;gap:28px}}

/* --------------------------------------------------------------------------
   9 · Code panel
   The one dark surface. Tabs across the top, a copy button on the right, and
   panels swapped by the [hidden] attribute rather than by class, so a
   JavaScript failure leaves exactly one panel visible instead of all four.
   -------------------------------------------------------------------------- */
.hm-code{
  overflow:hidden;border:1px solid var(--code-line);border-radius:var(--radius);
  background:var(--code-bg);box-shadow:0 24px 56px rgba(13,17,32,.26);
}
.hm-code-bar{
  display:flex;align-items:center;gap:2px;
  padding:0 10px;border-bottom:1px solid var(--code-line);background:var(--code-bar);
  overflow-x:auto;scrollbar-width:none;
}
.hm-code-bar::-webkit-scrollbar{display:none}
.hm-tab{
  padding:13px 14px;border:0;border-bottom:2px solid transparent;background:none;
  color:#8b93ad;font-size:13.5px;font-weight:560;white-space:nowrap;cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.hm-tab:hover{color:#c3cade}
.hm-tab.is-active{color:#fff;border-bottom-color:var(--violet)}
.hm-copy{
  margin-left:auto;padding:7px 13px;border:1px solid var(--code-line);border-radius:9px;
  background:transparent;color:#9aa3bd;font-size:12.5px;font-weight:560;cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.hm-copy:hover{color:#fff;border-color:#3a4360}
.hm-copy.is-done{color:#5fd6a0;border-color:rgba(95,214,160,.4)}

.hm-code pre{
  margin:0;padding:24px 26px 28px;overflow-x:auto;
  color:var(--code-text);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13.5px;line-height:1.72;tab-size:2;
}
/* Token colours. Chosen for contrast on #0d1120 rather than for fidelity to
   any particular editor theme. */
.hm-code .k{color:#c792ea}  /* keyword    */
.hm-code .s{color:#a8e6a0}  /* string     */
.hm-code .n{color:#f8c07a}  /* number/env */
.hm-code .f{color:#7fc4ff}  /* function   */
.hm-code .c{color:#66708c}  /* comment    */
.hm-code .p{color:#8b93ad}  /* punctuation */

/* --------------------------------------------------------------------------
   10 · Developer / AI split panels
   Two equal panels side by side, used by both the MCP section and anywhere
   else two short lists need to sit together.
   -------------------------------------------------------------------------- */
.hm-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
@media (max-width:820px){.hm-split{grid-template-columns:1fr}}

.hm-panel{
  padding:clamp(24px,2.8vw,32px);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:0 1px 2px rgba(20,30,58,.04);
}
.hm-panel h3{font-size:21px;font-weight:620;letter-spacing:-.03em}
.hm-panel>p{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.6}

/* Checked list used inside panels and pricing cards. */
.hm-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
/* Deliberately NOT a grid. These list items mix an inline <b> lead-in with a
   bare text node, and in a grid container that text node becomes its own
   anonymous item — it would be laid out in the 18px tick column, one word per
   line. Indent + an absolutely positioned tick keeps the whole item as one
   inline flow no matter what markup is put inside it. */
.hm-list li{
  position:relative;padding-left:25px;
  color:var(--muted);font-size:14.5px;line-height:1.55;
}
.hm-list li::before{
  content:"";position:absolute;left:0;top:5px;
  width:14px;height:14px;border-radius:50%;
  background:var(--good-bg);border:1px solid var(--good-line);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.2 5 8.2 9 4' fill='none' stroke='%23177654' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:11px;
}
.hm-list li b{color:var(--head);font-weight:620}

/* An inline, copyable one-liner — used for the MCP install command. */
.hm-cmd{
  display:flex;align-items:center;gap:12px;
  margin-top:18px;padding:13px 15px;
  border:1px solid var(--code-line);border-radius:11px;background:var(--code-bg);
  color:#d7dcec;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;
  overflow-x:auto;
}
.hm-cmd span{white-space:nowrap}
.hm-cmd .c{color:#66708c}

/* --------------------------------------------------------------------------
   11 · Security strip
   Four short facts in a row. Compact by design: security has to be legible at
   a glance, and a wall of prose is the opposite of legible.
   -------------------------------------------------------------------------- */
.hm-secure{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hm-secure-item{padding:26px 24px;background:var(--paper)}
.hm-secure-item h3{font-size:16px;font-weight:640;letter-spacing:-.02em}
.hm-secure-item p{margin-top:9px;color:var(--muted);font-size:14px;line-height:1.58}
.hm-secure-mark{
  display:grid;place-items:center;width:30px;height:30px;margin-bottom:14px;
  border-radius:9px;background:rgba(74,179,244,.10);color:#2f7fbe;
}
.hm-secure-mark svg{width:17px;height:17px;display:block}

@media (max-width:900px){.hm-secure{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hm-secure{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   12 · Pricing
   Three tiers side by side. The middle tier is not "featured" with a bigger
   card, because the tier a visitor lands in is decided by their volume, not by
   what we would prefer to sell them — highlighting one would be noise.
   -------------------------------------------------------------------------- */
.hm-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-tier{
  display:flex;flex-direction:column;
  padding:30px 28px 28px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.hm-tier:hover{transform:translateY(-3px);border-color:#cfd6e6;box-shadow:0 18px 40px rgba(24,33,64,.10)}
.hm-tier-name{color:var(--head);font-size:17px;font-weight:650;letter-spacing:-.025em}
.hm-tier-range{margin-top:5px;color:var(--faint);font-size:13.5px}
.hm-tier-rate{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  margin:22px 0 0;padding-top:20px;border-top:1px solid var(--line-soft);
}
.hm-tier-rate strong{color:var(--head);font-size:clamp(28px,3vw,34px);font-weight:640;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hm-tier-rate span{color:var(--muted);font-size:14px}
.hm-tier-delta{
  display:inline-block;margin-top:14px;padding:5px 11px;border-radius:999px;
  background:var(--good-bg);border:1px solid var(--good-line);
  color:var(--good);font-size:12.5px;font-weight:650;
}
.hm-tier .hm-list{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-soft)}

@media (max-width:900px){.hm-tiers{grid-template-columns:1fr}}

/* The "everything included" footer under the tiers. */
.hm-included{
  margin-top:20px;padding:26px 30px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
}
.hm-included h3{font-size:17px;font-weight:640}
.hm-included ul{
  list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px 24px;
}
/* Same reasoning as .hm-list li above: inline lead-in plus a text node, so
   the tick is positioned rather than laid out as a grid column. */
.hm-included li{position:relative;padding-left:24px;color:var(--muted);font-size:14.5px;line-height:1.5}
.hm-included li::before{
  content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--good-bg);border:1px solid var(--good-line);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 6.2 5 8.2 9 4' fill='none' stroke='%23177654' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:11px;
}
.hm-included li b{color:var(--head);font-weight:620}

/* --------------------------------------------------------------------------
   13 · Waitlist
   The page's one form. Two columns on desktop; the honeypot is hidden with
   position rather than display:none so a bot that checks computed style still
   sees a fillable field.
   -------------------------------------------------------------------------- */
.hm-join{text-align:center}
.hm-join h2{font-size:clamp(32px,4vw,50px);font-weight:600}
.hm-join>p{max-width:560px;margin:22px auto 0;color:var(--muted);font-size:17px;line-height:1.55}

.hm-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  max-width:640px;margin:38px auto 0;text-align:left;
}
.hm-form label{display:block;color:var(--head);font-size:13.5px;font-weight:600}
.hm-form label.hm-wide{grid-column:1/-1}
.hm-form input,.hm-form select{
  display:block;width:100%;margin-top:7px;padding:12px 14px;
  border:1px solid var(--line);border-radius:11px;background:var(--paper);
  color:var(--ink);font-family:inherit;font-size:15px;font-weight:450;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.hm-form input::placeholder{color:#a8b0c2}
.hm-form input:focus,.hm-form select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(85,71,238,.13);outline:none;
}
.hm-form select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235c6675' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:36px;
}
.hm-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hm-form-foot{grid-column:1/-1;display:grid;gap:12px;justify-items:center;margin-top:6px}
.hm-form-foot button{
  width:100%;padding:15px 24px;border:0;border-radius:11px;
  background:var(--accent);color:#fff;font-size:16px;font-weight:640;cursor:pointer;
  box-shadow:0 10px 26px rgba(85,71,238,.24);
  transition:background .16s ease,transform .16s ease;
}
.hm-form-foot button:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-1px)}
.hm-form-foot button:disabled{opacity:.6;cursor:default}
.hm-form-note{color:var(--faint);font-size:13px;text-align:center}
.hm-form-error{
  grid-column:1/-1;margin:0;padding:11px 14px;
  border:1px solid #f2c9c9;border-radius:10px;background:#fdf2f2;
  color:#a12b2b;font-size:14px;
}
.hm-success{
  max-width:520px;margin:38px auto 0;padding:30px 28px;
  border:1px solid var(--good-line);border-radius:var(--radius);background:var(--good-bg);
}
.hm-success h3{color:#0f5d42;font-size:21px;font-weight:640}
.hm-success p{margin-top:10px;color:#1d6b50;font-size:15px;line-height:1.6}

@media (max-width:600px){.hm-form{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   14 · Footer
   -------------------------------------------------------------------------- */
.hm-footer{padding:56px 0 44px;border-top:1px solid var(--line);background:var(--paper)}
.hm-footer-top{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px;
  padding-bottom:34px;border-bottom:1px solid var(--line);
}
.hm-footer-brand .hm-brand{margin-bottom:12px}
.hm-footer-brand p{max-width:280px;color:var(--muted);font-size:14px;line-height:1.6}
.hm-footer-col h4{margin-bottom:14px;color:var(--head);font-size:13px;font-weight:650;letter-spacing:.05em;text-transform:uppercase}
.hm-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hm-footer-col a{color:var(--muted);font-size:14.5px}
.hm-footer-col a:hover{color:var(--accent)}
.hm-footer-note{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;
  padding-top:26px;color:var(--faint);font-size:13px;
}

@media (max-width:820px){
  .hm-footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
  .hm-footer-brand{grid-column:1/-1}
}

/* --------------------------------------------------------------------------
   15 · Motion preferences
   Nothing on this page animates on a loop, but the hover lifts and the smooth
   scroll both need an opt-out.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .hm-btn:hover,.hm-tier:hover{transform:none}
}