/* ==========================================================
   10xPro - Paid Session Landing Page  (v2 - light / tricolour)

   Palette is saffron / white / green: the Indian flag COLOURS,
   never the flag itself. No tricolour bands, no Ashoka Chakra.
   Commercial use of the national flag is restricted in India;
   the colours are not. Keep it that way.

   Roles, since this palette is smaller than v1's:
     saffron = attention, money, the CTA. Used sparingly, or it
               stops meaning anything.
     green   = brand, labels, proof, anything confirmed.
     ink     = all body text. Never pure black on white.
     red     = the "what you have now" column, nothing else.

   Saffron is too light to be text on white (2.1:1). Anywhere it
   carries words, --saffron-deep does the work and plain --saffron
   is a fill only.
   ========================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --saffron: #FF9933;
  --saffron-deep: #B85000;
  --green: #138808;
  --green-deep: #0C5F05;
  --red: #B4291B;

  /* Deliberately outside the palette. The tricolour is a campaign skin; the
     10xPro wordmark is the brand, and re-tinting a logo per campaign is how a
     brand stops being recognisable. It is also the only blue on the page, so
     it never has to coexist with saffron or green as a peer.

     Sampled from assets/logo.png, whose dominant blue is #2090FF — but that
     is 3.23:1 on white and fails AA at the 18px the topbar uses. This is the
     same blue darkened to 5.00:1, which passes at every size it appears at. */
  --brand-blue: #1970C8;

  --ink: #16212E;
  --muted: #56636F;
  --bg: #FFFFFF;
  --bg-warm: #FFF8F0;
  --panel: #FFFFFF;
  --line: rgba(22, 33, 46, .14);

  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Roboto, Arial, sans-serif;
}

html { scroll-behavior: smooth; }

/* The topbar is sticky, so an anchor jump would otherwise land the top of the
   target underneath it — including the register card the CTAs point at. */
[id] { scroll-margin-top: 72px; }

body {
  font-family: var(--font);
  color: var(--ink);
  /* Not pure white. A page-height wash of the palette's two ends keeps it
     warm without ever becoming a coloured background that text fights. */
  background:
    linear-gradient(180deg, #FFF6EC 0%, #FFFFFF 34%, #FFFFFF 76%, #F4FBF3 100%)
    fixed;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  width: min(1140px, 100% - 40px);
  margin-inline: auto;
}

.wrap-narrow { width: min(760px, 100% - 40px); }

.micro {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  /* Flag saffron at full strength with ink on top (7.4:1). Deep saffron with
     white text was the other option; this one is louder, and the button is
     the one element that should be. */
  background: linear-gradient(120deg, #FFA94D, #FF8C1A);
  box-shadow: 0 14px 30px rgba(255, 140, 26, .34);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(184, 80, 0, .36);
  filter: brightness(1.04);
}

.btn:active { transform: translateY(0); }

.btn-block { width: 100%; }

.btn-lg {
  font-size: clamp(17px, 1.9vw, 21px);
  padding: 18px 42px;
}

/* ---------------- Tags & titles ---------------- */

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  /* Deep green, not --green: at 12px on the warm band the lighter green lands
     at 4.35 against a 4.5 requirement. Small uppercase type is the first
     thing to become unreadable, so it gets the safer tone. */
  color: var(--green-deep);
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(19, 136, 8, .38);
  background: rgba(19, 136, 8, .10);
}

.tag-center { display: table; margin-inline: auto; }

/* The hero pill carries two jobs: a format note and the line that tells
   someone this session is for them. The second one is what earns the click,
   so the first is dimmed and the qualifier reads at full strength in ink.
   Green labels the format and stays clear of saffron, which on this page
   means money and nothing else. */
.hero .tag { color: var(--ink); }
.hero .tag .tag-fmt { color: var(--green); opacity: .78; }

.sec-title {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.4px;
  text-align: center;
  margin-block: 14px 40px;
}

/* ---------------- Background texture ----------------
   Which one renders is set by BACKGROUND in config.js, which puts a
   bg-* class on <html>. Grid is the default: it costs nothing to
   animate (one drifting glow, no per-element layers) and a measurement
   grid says what this product actually does. */

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --- grid --- */

.bg-grid #bg {
  background-image:
    linear-gradient(rgba(19, 136, 8, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 136, 8, .055) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* The only thing that moves: a soft warmth crossing the grid, slowly.
   On the dark version this was a glow. On white a glow has nowhere to go —
   anything above ~.05 stops reading as light and starts reading as a stain,
   so this is a tint of the paper, not a light source. */
.bg-grid #bg::after {
  content: "";
  position: absolute;
  inset: -20% -30%;
  background: radial-gradient(760px 460px at 50% 42%, rgba(255, 153, 51, .10), transparent 70%);
  animation: glowDrift 34s ease-in-out infinite alternate;
}

@keyframes glowDrift {
  from { transform: translate3d(-6%, -3%, 0); }
  to   { transform: translate3d(6%, 3%, 0); }
}

/* --- rising particles: dust and bubbles --- */

.particle {
  position: absolute;
  bottom: -12vh;
  border-radius: 50%;
  animation: floatUp linear infinite;
}

/* Both drifting modes needed re-tuning, not just re-colouring: on dark they
   were lit specks that glowed, and on white a glow is invisible. These are
   tinted marks on paper instead, and have to be darker to be seen at all. */
.bg-bubbles .particle {
  background: rgba(255, 153, 51, .30);
  box-shadow: inset 0 0 0 1px rgba(255, 140, 26, .38);
}

.bg-dust .particle {
  width: 3px !important;
  height: 3px !important;
  background: rgba(19, 136, 8, .30);
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(.7);        opacity: 0; }
  15%  {                                            opacity: 1; }
  85%  {                                            opacity: 1; }
  100% { transform: translateY(-125vh) scale(1.15); opacity: 0; }
}

/* Everything else sits above the bubble layer */
.hero,
.band,
.foot { position: relative; z-index: 1; }

/* ---------------- Top bar ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Solid on purpose: with no backdrop-filter, any transparency lets
     headings scroll through the bar and look like a rendering bug. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
}

.brand img { width: 30px; }
.brand b { color: var(--brand-blue); }

.topbar-when {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  padding-top: clamp(36px, 6vw, 72px);
  /* Saffron weighted to the top-right behind the offer card, green to the
     left behind the copy. Both well under the level where a tint starts
     competing with text for attention. */
  background:
    radial-gradient(900px 620px at 6% -12%, rgba(19, 136, 8, .10), transparent 62%),
    radial-gradient(820px 620px at 100% -4%, rgba(255, 153, 51, .20), transparent 62%),
    linear-gradient(180deg, #FFF6EA, #FFFFFF);
}

.hero-in {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(36px, 5vw, 64px);
}

.hero h1 {
  margin-top: 18px;
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  /* The deck's signature glow — this, not the font stack, is what makes
     offer-reveal's headings read as luminous. Both use the same fonts. */
}

.hero h1 em {
  font-style: normal;
  color: var(--saffron-deep);
}

.lede b { color: var(--ink); font-weight: 700; }

.lede {
  margin-top: 20px;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--muted);
  max-width: 56ch;
}

.hero-points {
  margin-top: 22px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-points li b { color: var(--ink); font-weight: 700; }

.hero-points li {
  position: relative;
  padding-left: 30px;
  font-size: clamp(14px, 1.45vw, 17px);
  font-weight: 500;
  color: var(--muted);
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(19, 136, 8, .18);
  border: 1.5px solid var(--green);
}

.hero-cta {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-note {
  font-size: 14px;
  font-weight: 600;
  color: var(--saffron-deep);
}

/* ---------------- Hero card ---------------- */

.hero-card {
  position: sticky;
  top: 78px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 22px;
  border: 1px solid var(--line);
  /* White and lifted. On the dark version a card was a translucent panel that
     glowed off the background; here the same job is done by elevation, and a
     tinted fill would only make it look dirty against the page. */
  background: #FFFFFF;
  box-shadow: 0 26px 60px rgba(22, 33, 46, .10), 0 2px 6px rgba(22, 33, 46, .05);
}

.card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--green);
}

.card-head h2 {
  margin-top: 8px;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 800;
  line-height: 1.2;
}

.facts {
  margin: 20px 0;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { font-size: 14px; font-weight: 700; text-align: right; }

.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.price {
  font-size: clamp(38px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--saffron-deep);
}

.price-note { font-size: 14px; color: var(--muted); }

.hero-card .micro { margin-top: 12px; text-align: center; }

/* ---------------- Countdown ---------------- */

.countdown-strip {
  border-block: 1px solid var(--line);
  background: rgba(180, 41, 27, .10);
}

.countdown-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 0;
}

.cd-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
}

.cd { display: flex; gap: 10px; }

.cd span {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(22, 33, 46, .05);
  border: 1px solid var(--line);
}

.cd b {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cd i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------- Bands ---------------- */

.band { padding: clamp(48px, 7vw, 88px) 0; }
/* Flat, not a gradient. A vertical fade between two near-whites produces a
   visible seam at the band edge and reads as a rendering fault. */
.band.alt { background: #FFF7EE; }

/* Four cards: 2×2 reads better than a squeezed row of four. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.pain {
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(22, 33, 46, .05);
}

.pain-no {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--green);
}

.pain h3 {
  margin: 10px 0 8px;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 700;
  line-height: 1.25;
}

.pain p { color: var(--muted); font-size: 15px; }

/* ---------------- Quoted client speech ----------------
   The only place Hinglish appears is inside these — words a client
   actually says. Styled as dialogue so it reads as overheard,
   not as a headline we wrote. */

.said {
  margin-top: 22px;
  padding: 16px 22px;
  border-left: 3px solid var(--saffron-deep);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 153, 51, .07);
}

.said b {
  display: block;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 700;
  color: var(--saffron-deep);
  line-height: 1.3;
}

.said span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.pain-close {
  margin-top: 30px;
  text-align: center;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  color: var(--muted);
}

.pain-close b { color: var(--saffron-deep); font-weight: 800; }
.pain-close em { font-style: normal; color: var(--ink); font-weight: 700; }

/* ---------------- Normal machine vs 10xPro ---------------- */

.vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.vs-col {
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.vs-col h3 {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 800;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.vs-col ul { list-style: none; display: grid; gap: 11px; }

.vs-col li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.45;
}

/* The plain machine — muted, and every line marked as a limitation */
.vs-plain {
  background: rgba(180, 41, 27, .05);
  border-color: rgba(180, 41, 27, .20);
}

.vs-plain h3 { color: var(--muted); }
.vs-plain li { color: var(--muted); }

.vs-plain li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 800;
}

/* 10xPro — lit up, so the comparison reads at a glance */
.vs-pro {
  background: rgba(19, 136, 8, .08);
  border-color: rgba(19, 136, 8, .38);
  box-shadow: 0 18px 44px rgba(22, 33, 46, .09);
}

.vs-pro h3 { color: var(--green); }
.vs-pro b { color: var(--ink); font-weight: 800; }

.vs-pro li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}

.vs-note {
  margin-top: 26px;
  text-align: center;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 600;
  color: var(--muted);
}

.vs-note b { color: var(--saffron-deep); font-weight: 800; }

/* ---------------- The live demo ----------------
   Deliberately the most visually concrete block on the page: numbered,
   green-accented, and it reads as a sequence of events rather than a list
   of benefits. */

.demo {
  list-style: none;
  counter-reset: d;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 940px;
  margin-inline: auto;
}

.demo li {
  counter-increment: d;
  position: relative;
  padding: 24px 26px 24px 68px;
  border-radius: 16px;
  border: 1px solid rgba(19, 136, 8, .26);
  background: rgba(19, 136, 8, .06);
}

.demo li::before {
  content: counter(d, decimal-leading-zero);
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 15px;
  font-weight: 800;
  color: var(--green);
}

.demo h3 { font-size: clamp(16px, 1.7vw, 20px); font-weight: 700; line-height: 1.25; }
.demo p { margin-top: 6px; color: var(--muted); font-size: 15px; }

.demo-note {
  max-width: 940px;
  margin: 22px auto 0;
  padding: 16px 20px;
  text-align: center;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(22, 33, 46, .05);
  font-size: 15px;
  color: var(--muted);
}

.demo-note b { color: var(--ink); font-weight: 700; }

/* ---------------- What you learn ---------------- */

.learn {
  list-style: none;
  counter-reset: n;
  display: grid;
  gap: 14px;
  max-width: 860px;
  margin-inline: auto;
}

.learn li {
  counter-increment: n;
  position: relative;
  padding: 22px 26px 22px 76px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(22, 33, 46, .05);
}

.learn li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute;
  left: 26px;
  top: 22px;
  font-size: 20px;
  font-weight: 800;
  color: var(--saffron-deep);
}

.learn h3 { font-size: clamp(16px, 1.7vw, 20px); font-weight: 700; }
.learn p { margin-top: 5px; color: var(--muted); font-size: 15px; }

/* ---------------- Check / cross lists ---------------- */

.check, .cross {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--line);
}

.check { background: rgba(19, 136, 8, .07); border-color: rgba(19, 136, 8, .28); }
.cross { background: rgba(180, 41, 27, .06); border-color: rgba(180, 41, 27, .24); }

.check li, .cross li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 600;
}

.check li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--green); font-weight: 800;
}

.cross li::before {
  content: "\2715";
  position: absolute; left: 0;
  color: var(--red); font-weight: 800;
}

/* ---------------- Register ---------------- */

/* The one section allowed to be properly saffron. It is where the money is. */
.register {
  background:
    radial-gradient(760px 430px at 50% 0%, rgba(255, 153, 51, .20), transparent 62%),
    linear-gradient(180deg, #FFF3E4, #FFFFFF);
}

.reg-card {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(26px, 3.4vw, 44px);
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgba(255, 153, 51, .45);
  background: #FFFFFF;
  /* Warm shadow rather than neutral, so the card sits in the saffron wash
     instead of on top of it. */
  box-shadow: 0 30px 70px rgba(255, 140, 26, .16), 0 2px 8px rgba(22, 33, 46, .06);
}

.reg-card h2 {
  margin-top: 14px;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.15;
}

.reg-why {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}

.includes {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 26px 0;
  text-align: left;
}

.includes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(19, 136, 8, .06);
  border: 1px solid rgba(19, 136, 8, .20);
}

.includes span { color: var(--green); font-weight: 800; }

/* Razorpay injects its own button here; keep it centred */
.pay {
  display: flex;
  justify-content: center;
  min-height: 60px;
  margin-bottom: 14px;
}

/* Shown only until the real Razorpay snippet is pasted in */
.pay-placeholder {
  width: 100%;
  padding: 18px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 153, 51, .55);
  background: rgba(255, 153, 51, .07);
  color: var(--saffron-deep);
  font-weight: 700;
  font-size: 15px;
}

.pay-placeholder span {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
}

/* ---------------- FAQ ---------------- */

.faq { display: grid; gap: 10px; }

.faq details {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(22, 33, 46, .05);
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 700;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--green);
}

.faq details[open] summary::after { content: "\2013"; }

.faq p {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 15px;
}

.faq a { color: var(--green); }

/* ---------------- Final CTA ---------------- */

.final {
  text-align: center;
  /* Closes on green — the page opens saffron and lands on the brand. */
  background:
    radial-gradient(760px 430px at 50% 100%, rgba(19, 136, 8, .14), transparent 62%),
    linear-gradient(180deg, #FFFFFF, #F2FAF1);
}

.final h2 {
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.5px;
}

.final p {
  margin: 14px auto 28px;
  max-width: 52ch;
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
}

/* ---------------- Footer ---------------- */

.foot {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  background: rgba(255, 248, 240, .85);
}

.foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.foot-logo { width: 28px; margin-bottom: 8px; }

.powered {
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
}

.powered b {
  color: var(--ink);
  font-weight: 700;
}

.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 14px;
}

.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------------- Thank-you page ---------------- */

.ty-body {
  background:
    radial-gradient(800px 500px at 50% 0%, rgba(19, 136, 8, .13), transparent 62%),
    linear-gradient(180deg, #F2FAF1, #FFFFFF);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ty { flex: 1; padding: clamp(36px, 6vw, 72px) 0; position: relative; z-index: 1; }
.ty-in { text-align: center; }

.tick { width: 92px; margin: 0 auto 22px; }
.tick svg { width: 100%; height: auto; overflow: visible; }

.tick-ring {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  opacity: .45;
  stroke-dasharray: 151;
  animation: ringIn .7s ease forwards;
}

.tick-mark {
  fill: none;
  stroke: var(--green);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: markIn .45s .45s cubic-bezier(.2, .8, .25, 1) forwards;
  filter: drop-shadow(0 0 12px rgba(19, 136, 8, .7));
}

@keyframes ringIn { from { stroke-dashoffset: 151; } to { stroke-dashoffset: 0; } }
@keyframes markIn { to { stroke-dashoffset: 0; } }

.ty h1 {
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  letter-spacing: -.6px;
}

.ty-lede {
  margin: 12px auto 0;
  max-width: 46ch;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--muted);
}

.ty-lede b { color: var(--ink); }

.ty-card {
  margin-top: 34px;
  padding: clamp(22px, 3vw, 34px);
  text-align: left;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  box-shadow: 0 18px 44px rgba(22, 33, 46, .08);
}

.ty-card h2 { font-size: clamp(18px, 2vw, 23px); font-weight: 800; margin-bottom: 16px; }

.steps { list-style: none; counter-reset: s; display: grid; gap: 16px; }

.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 44px;
}

.steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  background: var(--green);
}

.steps b { display: block; font-size: 16px; }
.steps span { display: block; margin-top: 3px; color: var(--muted); font-size: 15px; }

.ty-help {
  margin-top: 22px;
  padding: 20px 24px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(255, 153, 51, .28);
  background: rgba(255, 153, 51, .07);
}

.ty-help h3 { font-size: 16px; font-weight: 800; color: var(--saffron-deep); }
.ty-help p { margin-top: 6px; color: var(--muted); font-size: 15px; }

.ty-back {
  display: inline-block;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
}

.ty-back:hover { text-decoration: underline; }

/* ---------------- Legal pages ---------------- */

.legal { padding: clamp(36px, 6vw, 64px) 0; position: relative; z-index: 1; }
.legal h1 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
.legal .updated { margin-top: 6px; color: var(--muted); font-size: 14px; }
.legal h2 { margin-top: 30px; font-size: clamp(18px, 2vw, 22px); font-weight: 700; }
.legal p, .legal li { margin-top: 10px; color: var(--muted); font-size: 15px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--green); }

/* .legal a is more specific than .btn, so without this the button renders
   blue-on-gold. */
.legal a.btn { color: var(--ink); }


/* ---------------- Sticky mobile CTA ---------------- */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(6, 18, 41, .96);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s ease;
}

.sticky-cta.show { transform: none; }
.sticky-cta b { font-size: 20px; color: var(--saffron-deep); display: block; line-height: 1.1; }
.sticky-cta span { font-size: 12px; color: var(--muted); }
.sticky-cta .btn { padding: 12px 26px; }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-card { position: static; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .vs { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wrap, .wrap-narrow { width: calc(100% - 32px); }
  .sticky-cta { display: flex; }
  body { padding-bottom: 78px; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { width: 100%; }
  .cta-note { width: 100%; text-align: center; }

  /* The date is the one fact someone needs before deciding, so it stays
     visible in the bar rather than being hidden to save space. */
  .topbar-when {
    display: block;
    font-size: 11px;
    line-height: 1.25;
    text-align: right;
    max-width: 42%;
  }

  /* --- Vertical rhythm ---
     At 390px the page ran to 9.3 screens. Everything below trims padding
     rather than content: the argument survives, the scrolling does not. */

  .band { padding: 40px 0; }
  .hero { padding-top: 26px; }
  .hero-in { padding-bottom: 32px; gap: 24px; }
  .sec-title { margin-block: 12px 24px; }
  .hero h1 { margin-top: 14px; }
  .lede { margin-top: 16px; }
  .hero-points { margin-top: 18px; gap: 8px; }
  .hero-cta { margin-top: 22px; }
  .said { margin-top: 16px; padding: 14px 18px; }

  .pain { padding: 20px; }
  .pain-close { margin-top: 20px; }
  .grid-3, .grid-2, .vs { gap: 12px; }
  .demo { grid-template-columns: 1fr; gap: 10px; }
  .demo li { padding: 18px 20px 18px 56px; }
  .demo li::before { left: 20px; top: 20px; }
  .vs-col { padding: 20px; }
  .vs-col ul { gap: 9px; }
  .vs-note { margin-top: 18px; }
  .check, .cross { padding: 20px; }

  .learn { gap: 10px; }
  .learn li { padding: 18px 20px; }
  .learn li::before { position: static; display: block; margin-bottom: 4px; }

  .reg-card { padding: 24px 20px; }
  .includes { margin: 20px 0; gap: 8px; }
  .includes li { padding: 11px 14px; }

  /* --- Tap targets ---
     Footer links were 22px tall. Padding brings them to 44px without
     changing how they look. */
  .foot-in { gap: 14px; }
  .foot-links { gap: 4px 20px; }
  .foot-links a { display: inline-block; padding: 12px 0; }
  .brand { padding: 7px 0; }

  /* Wrapped to two tall lines and ate the fold */
  .tag { font-size: 11px; letter-spacing: 1.1px; padding: 6px 13px; }

  /* --- Countdown ---
     Four 58px boxes floating in a 358px row read as an afterthought. As a
     4-column grid they fill the bar and the numbers can grow. */
  .countdown-in { gap: 8px; padding: 12px 0; }
  .cd-label { font-size: 11px; letter-spacing: 1.4px; }

  .cd {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .cd span { min-width: 0; padding: 8px 2px; }
  .cd b { font-size: 25px; }
  .cd i { font-size: 9px; letter-spacing: 1.1px; }

  /* Five full-width rows is a lot of phone height for five short facts.
     Two columns turns them into three rows and reads faster. */
  .facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    margin: 16px 0;
    border-top: 0;
  }

  .facts > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 9px 0;
  }

  /* Odd number of facts — the last one spans so there is no orphan cell */
  .facts > div:last-child { grid-column: 1 / -1; }

  .facts dt { font-size: 12px; }
  .facts dd { text-align: left; font-size: 14px; }

  .card-head h2 { font-size: 19px; }
  .hero-card { padding: 20px 18px; }
}

/* Very narrow phones — 360px and below */
@media (max-width: 380px) {
  .wrap, .wrap-narrow { width: calc(100% - 24px); }
  .topbar-when { font-size: 10px; }
  .facts dt, .facts dd { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; }
}