/* ═══════════════════════════════════════════════════════════════════════════
   CruxAlgo — MOBILE FIRST (base 390px). Built to proportions measured from
   research/teardowns/assets/rayalgo-pages/ (captures + crops + maps).

   What is taken from the reference is layout arithmetic — type ramp, spacing
   scale, card padding, image aspect ratios, section order. What is NOT taken:
   markup, copy, palette, images, icons. Clean-room rule, PINE_SPEC §0.

   THE MEASURED RAMP (reference, mobile → desktop)
     display       38px/1.0    → 64px/1.0
     section h2    26px/1.2    → 48px/1.2      weight 600, tracking -.027em
     section lede  19px/1.75   → 19px/1.75
     card h3       21px/1.2    → 21px/1.2
     body          17px/1.75   → 17px/1.75
     card          r12 · pad 26 · 1px hairline · 20px gap
     content image 2.23–2.26:1 · r12 · no shadow
   The 1.0-vs-1.75 line-height split is the whole typographic idea.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#07090D; --bg-2:#0A0E14; --card:#0E141C;
  --hair:rgba(255,255,255,.13); --hair-2:rgba(255,255,255,.07);
  --ink:#FFFFFF; --ink-2:#96A3B4; --ink-3:#5F6B7A;
  --jade:#00F5C4; --sky:#6EE7FF; --rose:#FF2D6F; --amber:#FFB020;
  --grad:linear-gradient(52deg,#00F5C4 20%,#6EE7FF 100%);
  --r:12px; --pad:20px;
  --disp:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink-2);
  font:400 17px/1.75 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg,video{max-width:100%; display:block}
/* Must follow the block reset: video{display:block} was overriding the hidden
   attribute and pushing the hero below the fold. */
[hidden]{display:none !important}
a{color:inherit}
p{margin:0 0 1.1em}
figure{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,h4{font-family:var(--disp); color:var(--ink); font-weight:600; margin:0 0 .5em}
h2{font-size:26px; line-height:1.2; letter-spacing:-.027em}
h3{font-size:21px; line-height:1.2; letter-spacing:-.027em}
h4{font-size:17px; line-height:1.3; letter-spacing:-.02em}
h2 em,h3 em{font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── pills / buttons ─────────────────────────────────────────────────────── */
.pill{
  display:inline-block; padding:10px 20px; line-height:1;
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--jade);
  border:1px solid rgba(0,245,196,.34); border-radius:999px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:16px 30px; line-height:1;
  font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; border:0;
  color:#04120E; background:var(--grad); border-radius:999px;
  box-shadow:0 0 34px rgba(0,245,196,.22);
  transition:transform .18s ease, box-shadow .3s ease;
}
.btn:active{transform:translateY(1px)}
@media (hover:hover){.btn:hover{transform:translateY(-2px); box-shadow:0 0 40px rgba(0,245,196,.32)}}
.btn--outline{background:none; color:var(--ink); box-shadow:none;
  border:1px solid var(--hair); letter-spacing:.16em}
@media (hover:hover){.btn--outline:hover{border-color:rgba(0,245,196,.5); background:rgba(0,245,196,.05); box-shadow:none; transform:translateY(-2px)}}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:12px;
  padding:10px var(--pad); padding-top:max(10px,env(safe-area-inset-top));
  background:rgba(7,9,13,.86); backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--hair-2);
}
.nav__brand{font-family:var(--disp); font-weight:700; letter-spacing:.04em; font-size:15px;
  text-decoration:none; color:var(--ink); flex:0 0 auto; padding:8px 0}
.nav__brand span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.nav__links{display:none}
/* Compact nav pill. v2 carried "Get Access from $29.90/mo" at ~380px wide,
   which put it in direct competition with the hero CTA. Operator ruled the
   price out of the nav 2026-08-12; it first appears in the price section. */
.nav__cta{
  margin-left:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:14px 30px; line-height:1;
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:#04120E;
  background:var(--grad); border-radius:999px; white-space:nowrap;
  transition:transform .18s ease, box-shadow .3s ease;
}
@media (hover:hover){.nav__cta:hover{transform:translateY(-1px); box-shadow:0 0 22px rgba(0,245,196,.28)}}

/* ── sections ────────────────────────────────────────────────────────────── */
.sec{padding:64px var(--pad); text-align:center}
.sec--inset{background:var(--bg-2)}
.sec__head{max-width:38rem; margin:0 auto}
.sec__head .pill{margin-bottom:18px}
.sec__head h2{margin-bottom:20px}
.lede{font-size:19px; line-height:1.75; color:var(--ink-2); margin:0 auto}
.after{margin-top:46px}

/* ── image slots ─────────────────────────────────────────────────────────── */
.ph{
  position:relative; width:100%; aspect-ratio:2.24/1; border-radius:var(--r);
  overflow:hidden; background:linear-gradient(180deg,#0C121A,#080C11);
  box-shadow:inset 0 0 0 1px var(--hair-2);
}
.ph--wide{aspect-ratio:16/9}
.ph--tall{aspect-ratio:9/7.6}
.ph::before{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(255,255,255,.015) 13px 26px)}
.ph::after{content:attr(data-ph); position:absolute; inset:auto 10px 8px 10px;
  font-size:9px; line-height:1.4; color:#4E5A69; text-align:center}
.ph__art{width:100%; height:100%}

/* ── cards ───────────────────────────────────────────────────────────────── */
.cards{display:grid; gap:20px; margin-top:46px}
.card{padding:26px; border-radius:var(--r); background:var(--card);
  border:1px solid var(--hair); text-align:center;
  transition:border-color .3s ease, transform .18s ease}
@media (hover:hover){.card:hover{transform:translateY(-3px); border-color:rgba(0,245,196,.34)}}
.card .ph{margin-bottom:30px}
.card h3{margin-bottom:20px}
.card p{font-size:17px; line-height:1.75; color:var(--ink-2); margin:0}
.card__tag{display:block; font-family:var(--disp); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--jade); margin-bottom:12px}

/* ── benefit rows ────────────────────────────────────────────────────────── */
.rows{display:grid; gap:28px; margin-top:44px; text-align:left; max-width:34rem; margin-inline:auto}
.row{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start}
.row__icon{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--hair); background:var(--card)}
.row h4{margin-bottom:.35em}
.row p{font-size:16px; line-height:1.65; color:var(--ink-2); margin:0}

/* ── price ───────────────────────────────────────────────────────────────── */
.sec--price{background:radial-gradient(110% 55% at 50% 0%,rgba(0,245,196,.07),transparent 70%),var(--bg)}
.plans{display:grid; gap:20px; margin-top:46px; text-align:left}
.plan{padding:26px; border-radius:var(--r); background:var(--card); border:1px solid var(--hair)}
/* Yearly is the highlighted card: lifted surface, jade edge, wider glow. It is
   NOT a different tier — same list, same product — so the emphasis is doing one
   job only, which is signposting the cheaper way to buy the same thing. */
.plan--year{
  border-color:rgba(0,245,196,.42);
  background:linear-gradient(180deg,rgba(0,245,196,.055),rgba(0,245,196,.012) 42%,var(--card) 82%);
  box-shadow:0 0 60px rgba(0,245,196,.10);
}
.plan__amt .plan__strike{
  font-size:.52em; font-weight:600; color:var(--ink-3);
  text-decoration:line-through; margin-right:12px; letter-spacing:-.02em;
}
.plan__top{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.plan__name{font-family:var(--disp); font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.plan__save{font-family:var(--disp); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#04120E; background:var(--grad);
  padding:5px 10px; border-radius:999px; line-height:1}
.plan__amt{font-family:var(--disp); font-size:44px; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink)}
.plan__amt .cur{font-size:.5em; vertical-align:top; color:var(--ink-2); margin-right:2px; letter-spacing:0}
.plan__amt .per{font-size:.3em; font-weight:500; color:var(--ink-2); margin-left:8px; letter-spacing:0}
.plan__note{font-size:14.5px; color:var(--ink-3); margin:10px 0 0}
.plan__list{list-style:none; margin:22px 0; padding:0; display:grid; gap:12px; font-size:15.5px; line-height:1.5; color:var(--ink-2)}
.plan__list li{display:flex; gap:11px; align-items:flex-start}
.plan__list svg{flex:0 0 auto; margin-top:4px}
.plan .btn{width:100%}
.plan__after{font-size:13.5px; color:var(--ink-3); margin:14px 0 0; text-align:center}

/* ── steps ───────────────────────────────────────────────────────────────── */
.steps{display:grid; gap:20px; margin-top:46px; text-align:left}
.step{padding:26px; border-radius:var(--r); background:var(--card); border:1px solid var(--hair)}
.step__n{display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:50%; border:1px solid var(--hair);
  font-family:var(--disp); font-weight:700; font-size:14px; color:var(--jade)}
.step h4{margin:16px 0 .4em}
.step p{font-size:16px; line-height:1.65; color:var(--ink-2); margin:0}

/* ── email capture ───────────────────────────────────────────────────────── */
.capture{display:grid; gap:12px; margin:34px auto 0; max-width:27rem}
.capture input{width:100%; padding:15px 16px; font:400 16px var(--sans); color:var(--ink);
  background:var(--bg); border:1px solid var(--hair); border-radius:11px}
.capture input::placeholder{color:var(--ink-3)}
.capture input:focus{outline:2px solid var(--jade); outline-offset:1px; border-color:transparent}
.capture__msg{font-size:13.5px; margin:0; min-height:1.3em; color:var(--jade)}
.capture__msg[data-err]{color:var(--rose)}

/* ── faq ─────────────────────────────────────────────────────────────────── */
.faq{max-width:760px; margin:46px auto 0; text-align:left; display:grid; gap:12px}
.faq details{border:1px solid var(--hair); border-radius:var(--r); background:var(--card); padding:0 22px}
.faq summary{cursor:pointer; list-style:none; padding:20px 30px 20px 0; position:relative;
  font-family:var(--disp); font-weight:600; font-size:16.5px; color:var(--ink); letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:17px; color:var(--jade);
  font-size:22px; font-weight:400; transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{font-size:16px; line-height:1.7; color:var(--ink-2); margin:0 0 20px}

/* ── close + footer ──────────────────────────────────────────────────────── */
.close{padding:76px var(--pad); text-align:center; position:relative; overflow:hidden}
.close::before{content:""; position:absolute; inset:auto 0 -50% 0; height:90%;
  background:radial-gradient(58% 58% at 50% 100%,rgba(0,245,196,.10),transparent 70%)}
.close>*{position:relative}
.close h2{font-size:38px; line-height:1.0; letter-spacing:-.027em; max-width:9.4em; margin-inline:auto}

.foot{padding:52px var(--pad) calc(52px + env(safe-area-inset-bottom)); border-top:1px solid var(--hair-2); background:var(--bg-2)}
.foot__brand{font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--ink); margin:0 0 8px}
.foot__brand span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.foot__tag{font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--jade); margin:0 0 26px}
.foot__cols{display:grid; grid-template-columns:1fr 1fr; gap:30px 20px; margin-bottom:34px}
.foot__cols h4{font-size:15px; margin-bottom:12px}
.foot__cols ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.foot__cols a{color:var(--ink-2); font-size:14px; text-decoration:none; display:inline-block; padding:10px 0}
@media (hover:hover){.foot__cols a:hover{color:var(--ink)}}
.foot__legal{font-size:11.5px; line-height:1.65; color:var(--ink-3); margin:0 0 12px;
  border-top:1px solid var(--hair-2); padding-top:24px}
.foot__co{font-size:11.5px; color:var(--ink-3); margin:0}
.foot__co a{color:var(--ink-2)}

/* ═══ HERO — approved 2026-08-12. Do not restyle without a new approval. ═══ */
.hero{padding:0 var(--pad) 4px; text-align:center; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-150px 0 auto 0; height:580px; pointer-events:none;
  background:
    radial-gradient(72% 88% at 10% 0%, rgba(0,245,196,.11), transparent 62%),
    radial-gradient(72% 88% at 90% 0%, rgba(110,231,255,.075), transparent 62%);
}
.hero>*{position:relative}
.hero__pill{display:inline-block; margin:40px 0 0; padding:10px 20px; line-height:1;
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--jade);
  border:1px solid rgba(0,245,196,.34); border-radius:999px}
.hero h1{font-family:var(--disp); font-size:38px; line-height:1.0; letter-spacing:-.027em;
  font-weight:700; color:#fff; margin:20px auto 0; max-width:9.4em}
.hero h1 em{font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__sub{font-size:17px; line-height:1.75; color:var(--ink-2); margin:26px auto 0; max-width:21em}
.hero__cta{margin:36px 0 0; min-height:48px; padding:16px 30px; line-height:1;
  font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#04120E; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--grad); border-radius:999px; box-shadow:0 0 34px rgba(0,245,196,.22);
  transition:transform .18s ease, box-shadow .3s ease}
.hero__cta:active{transform:translateY(1px)}
@media (hover:hover){.hero__cta:hover{transform:translateY(-2px); box-shadow:0 0 40px rgba(0,245,196,.32)}}
/* Their slot here holds Trustpilot stars, avatars and a user count. We have no
   customers, so it carries checkable product facts. Never make this social
   proof until the proof exists. */
.hero__trust{list-style:none; margin:30px 0 0; padding:0;
  display:grid; gap:11px; font-size:13.5px; line-height:1.4; color:var(--ink-2)}
.hero__trust li{display:flex; gap:8px; align-items:center; justify-content:center}
.hero__trust svg{flex:0 0 auto}
.hero__shot{margin:34px -10px 0}
.hero__shot .ph{aspect-ratio:2.24/1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 46px rgba(0,245,196,.09)}
/* Hero screenshot. No margin-bottom (that rule is for the card tiles, where the
   image sits above copy); the glow matches what the placeholder carried. */
/* ⚠️ NO aspect-ratio here, deliberately. The first version set 16/9 without
   width/height; the global reset's max-width:100% then shrank the width while
   the height attribute held, and the image rendered squashed. width:100% +
   height:auto lets the file's own ratio govern, and the width/height
   attributes on the <img> still reserve the right space against layout shift. */
/* Applies to both <img> and <video> — the hero was a still and is now a loop,
   and the box should not care which. */
/* ⚠️ width:auto + max-height, NOT width:100%. The hero loop is 1284x1080 —
   near square. At 100% of an 1180px container it would stand 992px tall and
   push the whole page below the fold on a laptop. Constraining by HEIGHT lets
   the browser pick the width, so it fills the space it has on any viewport and
   never dominates the first screen. */
.shot--hero{
  display:block; width:auto; max-width:100%; height:auto; max-height:68vh;
  margin:0 auto; border-radius:var(--r); background:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 46px rgba(0,245,196,.09);
}
@media (min-width:900px){ .hero__shot{max-width:1180px; margin-inline:auto} }

/* ═══ DESKTOP ═══ */
@media (min-width:900px){
  :root{--pad:44px}
  .nav{padding:12px var(--pad)}
  .nav__links{display:flex; gap:28px; margin-left:36px}
  .nav__links a{font-family:var(--disp); font-size:14px; font-weight:500; color:var(--ink-2);
    text-decoration:none; transition:color .3s ease}
  .nav__links a:hover{color:var(--ink)}
  .nav__cta{min-height:44px; padding:13px 22px; font-size:12px}

  h2{font-size:48px; line-height:1.2}

  .sec{padding:110px var(--pad)}
  .sec__head{max-width:52rem}
  .close{padding:130px var(--pad)}
  .close h2{font-size:64px}

  .cards{grid-template-columns:1fr 1fr; gap:24px; max-width:1240px; margin-inline:auto}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards .card{text-align:left}
  .rows{grid-template-columns:repeat(3,1fr); gap:34px; max-width:1240px}
  .row{grid-template-columns:1fr; gap:18px}
  .plans{grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin-inline:auto}
  .steps{grid-template-columns:repeat(3,1fr); gap:24px; max-width:1240px; margin-inline:auto}
  .foot__cols{grid-template-columns:repeat(3,1fr); max-width:1240px; gap:20px}

  /* hero — approved geometry */
  .hero{padding:0 var(--pad) 10px; max-width:none}
  .hero::before{inset:-200px 0 auto 0; height:900px}
  .hero__pill{margin-top:70px; font-size:12px}
  .hero h1{font-size:64px; margin-top:20px; max-width:17em}
  .hero__sub{font-size:19px; margin-top:20px; max-width:43em}
  .hero__cta{margin-top:40px; min-height:52px; padding:18px 36px; font-size:13px}
  .hero__trust{margin-top:44px; grid-auto-flow:column; justify-content:center; gap:34px; font-size:14px}
  .hero__shot{margin:44px auto 0; max-width:1024px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

/* ── /pricing ────────────────────────────────────────────────────────────
   The reference pricing page is two cards and almost nothing else — 2418px
   on desktop, the shortest page on their site. No feature grid, no proof
   section, no FAQ. A pricing page that re-sells is a pricing page that has
   not decided what it is for.

   The one card treatment unique to this page: the inclusions list is
   DIVIDED by hairlines rather than gapped. It makes a long list scannable
   and gives the card its rhythm. */
.plan__rule{height:1px; background:var(--hair-2); margin:18px 0}
.plan__label{font-family:var(--disp); font-size:13px; font-weight:600; color:var(--ink); margin:0 0 4px}
.plan__list--divided{gap:0; margin:0 0 22px}
.plan__list--divided li{padding:13px 0; border-bottom:1px solid var(--hair-2)}
.plan__list--divided li:last-child{border-bottom:0}
.plan__strike{color:var(--ink-3); text-decoration:line-through; font-size:.6em;
  margin-right:12px; letter-spacing:-.02em; font-weight:600}

/* Risk reduction at the moment of decision — their slot for card-brand logos.
   We use words, not marks: the logos are trademarks and we have no licence,
   and a claim about a checkout is only as true as the checkout. */
.trustline{display:grid; gap:10px; justify-items:center; margin:40px auto 0; max-width:34rem}
.trustline p{font-size:13.5px; color:var(--ink-3); margin:0; text-align:center}
.trustline svg{opacity:.75}

/* ── /contact ────────────────────────────────────────────────────────────
   The reference contact page is 1911px — the smallest page on their site.
   A two-column split, then the close, then the footer. Nothing else.

   The composition trick: the FORM sits inside a bordered card and the copy
   beside it does not. The card carries all the visual weight, so the right
   column can stay airy and hold a single contact method rather than a grid
   of channels. One way to reach us reads as confidence; six reads as a
   switchboard. */
.split{display:grid; gap:28px; margin-top:44px; text-align:left; max-width:1160px; margin-inline:auto}
.formcard{padding:26px; border-radius:var(--r); background:var(--card); border:1px solid var(--hair)}
.formcard h3{margin-bottom:.3em}
.formcard__note{font-size:14.5px; color:var(--ink-3); margin:0 0 22px}
.field{display:block; margin-bottom:16px}
.field span{display:block; font-size:14px; color:var(--ink-2); margin-bottom:8px}
.field input,.field textarea{
  width:100%; padding:14px 15px; font:400 16px var(--sans); color:var(--ink);
  background:var(--bg); border:1px solid var(--hair); border-radius:11px; resize:vertical;
}
.field textarea{min-height:132px; line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{outline:2px solid var(--jade); outline-offset:1px; border-color:transparent}
.formcard .btn{width:100%}
.formcard__msg{font-size:13.5px; margin:14px 0 0; min-height:1.3em; color:var(--jade)}
.formcard__msg[data-err]{color:var(--rose)}

.split__copy h2{margin-bottom:26px}
.contactrow{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center}
.contactrow__icon{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); box-shadow:0 0 26px rgba(0,245,196,.2);
}
.contactrow__label{
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--jade); margin:0 0 4px;
}
.contactrow a{font-size:17px; color:var(--ink); text-decoration:none; word-break:break-word}
@media (hover:hover){.contactrow a:hover{text-decoration:underline}}
.declines{margin:34px 0 0; padding:22px 0 0; border-top:1px solid var(--hair-2); display:grid; gap:16px}
.declines p{font-size:15px; line-height:1.65; color:var(--ink-2); margin:0}
.declines b{color:var(--ink); font-weight:600}

@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin-top:56px}
  .formcard{padding:40px}
  .split__copy{padding-top:14px}
}

/* ── /welcome — sole TradingView username collection point ─────────────────
   Scoped to .wel so nothing here can reach another page. Added 2026-08-28
   when the Stripe custom field was removed and this page became the only
   thing standing between a payment and a delivered product. */
.wel{max-width:34rem; margin:38px auto 0; text-align:left; display:grid; gap:20px}
.wel .formcard h3{margin-bottom:.3em}

/* Read-back. A customer who mistypes reads their own typo back before they
   send it, which catches more than any format rule can. */
.wel__read{font-size:14px; line-height:1.65; color:var(--ink-3); margin:-6px 0 16px; min-height:1.3em}
.wel__read b{color:var(--ink); font-weight:600; word-break:break-all}
.wel__read a{color:var(--jade)}
.wel__caution{display:inline-block; margin-top:6px; color:var(--amber)}

.wel__help{padding:20px 22px; border-radius:var(--r); background:var(--bg-2); border:1px solid var(--hair)}
.wel__help summary{font-family:var(--disp); font-size:15.5px; font-weight:600; color:var(--ink); cursor:pointer}
.wel__help ol{margin:16px 0 0; padding-left:20px; display:grid; gap:10px}
.wel__help li{font-size:15px; line-height:1.7; color:var(--ink-2)}
.wel__help code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  color:var(--ink); background:var(--bg); padding:2px 6px; border-radius:6px; word-break:break-all}
.wel__help code b{color:var(--jade); font-weight:600}

/* The display-name trap gets its own colour because it is the single most
   likely reason a paid customer ends up with nothing. */
.wel__warn{margin:16px 0 0; padding:14px 16px; border-radius:11px;
  background:rgba(255,45,111,.08); border:1px solid rgba(255,45,111,.28)}
.wel__warn p{font-size:14.5px; line-height:1.65; color:var(--ink-2); margin:0}
.wel__warn b{color:var(--ink); font-weight:600}

.wel__steps{margin:0; padding-left:20px; display:grid; gap:12px}
.wel__steps li{font-size:15.5px; line-height:1.7; color:var(--ink-2)}
.wel__steps b{color:var(--ink); font-weight:600}

.wel__fix{font-size:14px; line-height:1.75; color:var(--ink-3); margin:0}
.wel__fix b{color:var(--ink-2); font-weight:600}
.wel__fix a{color:var(--jade)}

.wel__fallback{font-size:13.5px; line-height:1.7; color:var(--ink-3); margin:10px 0 0;
  padding:12px 14px; border-radius:10px; background:var(--bg); border:1px solid var(--hair-2)}
.wel__fallback b{color:var(--ink-2); font-weight:600}

/* ── /  four-square feature grid, 2026-09-05 ───────────────────────────────
   Square tiles rather than the 2.24:1 crops the component cards used. A chart
   in a square loses horizontal context, which is wrong for a wide overview and
   right for a feature tile: the tile has one job, shown close up. */
.ph--sq{aspect-ratio:1/1}
/* Real screenshots, 2026-09-05. 16/9 because the captures are ~1.80 native —
   a square tile would have thrown away 44% of every chart, and the width IS
   the context that makes a level or a trend legible. */
.card .shot{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--r); margin-bottom:30px; box-shadow:inset 0 0 0 1px var(--hair-2);
}
@media (min-width:760px){ .cards--2{grid-template-columns:repeat(2,1fr)} }

/* ── / stats section, 2026-09-06 ─────────────────────────────────────────── */
.statshot{margin:44px auto 0; max-width:1000px}
.shot--stats{
  width:100%; height:auto; margin-bottom:0; border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 46px rgba(0,245,196,.07);
}
.statshot figcaption{
  margin:22px auto 0; max-width:44rem; text-align:left;
  font-size:15px; line-height:1.75; color:var(--ink-2);
}
.statshot figcaption b{color:var(--ink); font-weight:600}
/* Deliberately readable, not hidden fine print. A disclaimer set at 10px in
   --ink-3 is a disclaimer designed not to be read, which defeats its purpose. */
.disclaimer{
  margin:30px auto 0; max-width:44rem; padding:18px 20px; text-align:left;
  font-size:13.5px; line-height:1.7; color:var(--ink-3);
  background:var(--bg-2); border:1px solid var(--hair-2); border-radius:var(--r);
}
.disclaimer b{color:var(--ink-2); font-weight:600}

/* ── / demo video, 2026-09-06 ────────────────────────────────────────────── */
.demo{margin:48px auto 0; max-width:1000px}
.demo__vid{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  border-radius:var(--r); background:var(--bg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 46px rgba(0,245,196,.07);
}
.demo figcaption{
  margin:18px auto 0; max-width:40rem; text-align:center;
  font-size:14.5px; line-height:1.7; color:var(--ink-3);
}

/* ── / testimonials, 2026-09-06 ──────────────────────────────────────────── */
.tgrid{display:grid; gap:18px; margin-top:46px; text-align:left}
.tcard{
  margin:0; padding:24px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--hair);
}
.tcard__top{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.tcard__av{flex:0 0 auto; border-radius:50%}
.tcard__name{font-family:var(--disp); font-size:16px; font-weight:600; color:var(--ink); margin:0}
.tcard__date{font-size:13px; color:var(--ink-3); margin:2px 0 0}
.tcard__stars{display:flex; gap:3px; margin-bottom:14px}
.tcard blockquote{margin:0; font-size:16px; line-height:1.7; color:var(--ink-2)}
@media (min-width:760px){ .tgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .tgrid{grid-template-columns:repeat(3,1fr); gap:22px; max-width:1240px; margin-inline:auto} }

/* Both plan cards must be equal height with the CTA pinned to the bottom —
   the two feature lists are identical so they match today, but a one-line
   difference later would leave the buttons off by a row. */
@media (min-width:900px){
  .plans{grid-template-columns:repeat(2,1fr); max-width:1080px; margin-inline:auto; align-items:stretch}
  .plan{display:flex; flex-direction:column}
  .plan__list--divided{flex:1 1 auto}
}

/* Stats caption is now a one-line pointer to the FAQ item, not the disclosure. */
.statshot figcaption{margin-top:16px; text-align:center; font-size:13.5px; color:var(--ink-3)}
.statshot figcaption a{color:var(--ink-2); text-underline-offset:3px}
.faq details p + p{margin-top:1em}

.tnote{margin:26px auto 0; max-width:46rem; text-align:center;
  font-size:13.5px; line-height:1.7; color:var(--ink-3)}