:root {
  --ink: #0d1b16;
  --ink-soft: #3d5449;
  --ink-mute: #6b7f75;
  --paper: #ffffff;
  --paper-2: #f7faf8;
  --paper-3: #eff5f1;

  --emerald: #32a2b8;
  --emerald-d: #32a2b8;
  --emerald-l: #d6f2e5;
  --indigo: #2f3a8f;
  --indigo-l: #e3e6fa;
  --amber: #d98613;
  --amber-l: #fdf0d8;
  --rose: #c1354f;
  --rose-l: #fce4e8;

  --line: #dde7e1;
  --line-strong: #0d1b16;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-s: 0 1px 2px rgba(13, 27, 22, .05), 0 4px 12px rgba(13, 27, 22, .04);
  --shadow-m: 0 2px 6px rgba(13, 27, 22, .06), 0 14px 34px rgba(13, 27, 22, .07);
  --shadow-l: 0 4px 10px rgba(13, 27, 22, .07), 0 30px 70px rgba(13, 27, 22, .10);

  --font-display: "Bricolage Grotesque", "Georgia", serif;
  --font-body: "Instrument Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}


* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  letter-spacing: -.003em;
  overflow-x: hidden;
  position: relative;
}


/* body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 88% -4%, rgba(15, 138, 95, .07), transparent 60%),
    radial-gradient(680px 480px at 4% 22%, rgba(47, 58, 143, .05), transparent 62%),
    radial-gradient(620px 520px at 96% 78%, rgba(217, 134, 19, .05), transparent 60%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
} */

.page-shell { position: relative; z-index: 1; }

p { margin-bottom: 1.15rem; }

strong, b { font-weight: 700; color: var(--ink); }

::selection { background: var(--emerald-l); color: var(--emerald-d); }

/* ---------- 3. LAYOUT (col-10 mandate) ---------- */
.row-wrap { --bs-gutter-x: 0; }

.col-10.main-col {
  position: relative;
  padding-inline: clamp(.25rem, 2vw, 2rem);
}

.band { padding-block: clamp(1.2rem, 7vw, 1.2rem); position: relative; }
.band--tight { padding-block: clamp(2.25rem, 4.5vw, 2rem); }

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  margin: 0;
  opacity: .9;
}

/* ---------- 4. TYPE SCALE ---------- */
.display-xxl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.15rem, 5.6vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.h-sec {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.7vw, 2.6rem);
  line-height: 1.08;
  /* letter-spacing: -.028em; */
  margin: 0;
}

.h-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.24;
  letter-spacing: -.02em;
}

.lead-lg {
  font-size: clamp(1.03rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.74;
}

.eyebrow {
  font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    /* letter-spacing: .3em; */
    text-transform: uppercase;
    color: var(--emerald-d);
    display: inline-flex
;
    align-items: center;
    gap: .6rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--emerald);
  display: inline-block;
}

.eyebrow--indigo { color: var(--indigo); }
.eyebrow--indigo::before { background: var(--indigo); }
.eyebrow--rose { color: var(--rose); }
.eyebrow--rose::before { background: var(--rose); }
.eyebrow--amber { color: #a9660b; }
.eyebrow--amber::before { background: var(--amber); }

/* ---------- 5. INLINE TEXT ORNAMENTS ---------- */
/* marker-pen highlight that sweeps in on reveal */
.mark-sweep {
  position: relative;
  display: inline;
  padding-inline: .1em;
}
.mark-sweep::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .06em;
  height: .42em;
  background: var(--emerald-l);
  z-index: -1;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(.2, .8, .2, 1) .35s;
  border-radius: 2px;
}
.js-on .mark-sweep::before { transform: scaleX(0); }
.js-on .revealed .mark-sweep::before,
.js-on .mark-sweep.on::before,
.js-on .revealed.mark-sweep::before { transform: scaleX(1); }
.mark-sweep--amber::before { background: var(--amber-l); }
.mark-sweep--indigo::before { background: var(--indigo-l); }
.mark-sweep--rose::before { background: var(--rose-l); }

/* hand-drawn underline in SVG */
.squiggle { position: relative; white-space: nowrap; }
.squiggle svg {
  position: absolute;
  left: 0; bottom: -.34em;
  width: 100%;
  height: .38em;
  overflow: visible;
}
.squiggle svg path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.35s ease .3s;
}
.js-on .squiggle svg path { stroke-dashoffset: 1000; }
.js-on .revealed .squiggle svg path,
.js-on .squiggle.on svg path { stroke-dashoffset: 0; }
.squiggle--emerald svg path { stroke: var(--emerald); }
.squiggle--indigo svg path { stroke: var(--indigo); }

/* gradient ink */
.grad-ink {
 background: linear-gradient(96deg, #028aaf 0%, #078cb0 38%, #0089af 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-ink--warm {
      background: linear-gradient(96deg, #028aaf 0%, #078cb0 38%, #0089af 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.outline-ink {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink);
  text-stroke: 1.6px var(--ink);
}

.ital-serif { font-style: italic; font-family: var(--font-display); font-weight: 600; }

/* ---------- 6. HEADLINE DECORATION SYSTEMS ---------- */

/* D1 · hero — kicker slab */
.deco-slab {
  display: inline-block;
    background: #0b90a7;
    color: #fff;
    /* font-family: var(--font-mono); */
    font-size: 1.6rem;
    /* letter-spacing: .22em; */
    text-transform: uppercase;
    padding: .5rem .95rem;
    border-radius: 100px;
    box-shadow: var(--shadow-s);
}

/* D2 · ribbon banner */
.deco-ribbon {
  position: relative;
  display: inline-block;
  padding: 1.05rem 2.1rem;
  background: #004f5e;
  color: #fff;
  border-radius: 4px;
  box-shadow: var(--shadow-m);
}
.deco-ribbon::before, .deco-ribbon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px; height: 22px;
  background: #004f5e;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 3px;
  opacity: .92;
}
.deco-ribbon::before { left: -9px; }
.deco-ribbon::after { right: -9px; }
.deco-ribbon .h-sec { color: #fff; position: relative; z-index: 2; }

/* D3 · corner-bracket frame */
.deco-brackets {
  position: relative;
  /* padding: clamp(1.6rem, 3.4vw, 2.9rem) clamp(1.1rem, 3vw, 2.6rem); */
}
.deco-brackets::before, .deco-brackets::after {
  content: "";
  position: absolute;
  width: clamp(34px, 6vw, 62px);
  height: clamp(34px, 6vw, 62px);
  border: 3px solid var(--emerald);
  transition: all .8s cubic-bezier(.2,.8,.2,1);
}
.deco-brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.deco-brackets::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.js-on .deco-brackets:not(.revealed)::before,
.js-on .deco-brackets:not(.revealed)::after { width: 0; height: 0; opacity: 0; }

/* D4 · numbered index chip + baseline */
.deco-index { display: flex; align-items: flex-start; gap: clamp(.85rem, 2vw, 1.5rem); }
.deco-index .idx {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--emerald-d);
  background: var(--emerald-l);
  border: 1px solid rgba(15,138,95,.28);
  border-radius: 100px;
  padding: .38rem .8rem;
  margin-top: .55rem;
  white-space: nowrap;
}

/* D5 · dotted-rule stack */
.deco-dotted { position: relative; padding-bottom: 1.1rem; }
.deco-dotted::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 6px;
  background-image: radial-gradient(circle, var(--indigo) 1.7px, transparent 1.9px);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  opacity: .65;
  transform: translateY(0);
  transition: all .8s ease .25s;
}
.js-on .deco-dotted::after { opacity: 0; transform: translateY(6px); }
.js-on .revealed.deco-dotted::after { opacity: .65; transform: translateY(0); }

/* D6 · oversized quote glyph */
.deco-quote { position: relative; padding-top: clamp(1.6rem, 4vw, 2.8rem); }
.deco-quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(-1.4rem, -2vw, -.6rem);
  left: -.06em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: 1;
  color: var(--emerald);
  opacity: .13;
  pointer-events: none;
}

/* D7 · diagonal slash panel */
.deco-slash {
  position: relative;
  display: inline-block;
  /* padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.3rem, 3vw, 2.2rem);
  background: var(--paper-2);
  border-left: 5px solid var(--indigo);
  border-radius: 0 var(--r-md) var(--r-md) 0; */
  overflow: hidden;
}
.deco-slash::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background-image: repeating-linear-gradient(-48deg, rgba(47,58,143,.075) 0 2px, transparent 2px 11px); */
  pointer-events: none;
}

/* D8 · ticket / perforated edge */
.deco-ticket {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 2px dashed var(--emerald);
  border-radius: var(--r-md);
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.4rem, 3.4vw, 2.6rem);
  box-shadow: var(--shadow-s);
}
.deco-ticket::before, .deco-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px; height: 20px;
  background: var(--paper);
  border: 2px dashed var(--emerald);
  border-radius: 50%;
  transform: translateY(-50%);
  clip-path: inset(0 0 0 50%);
}
.deco-ticket::before { left: -11px; clip-path: inset(0 0 0 50%); }
.deco-ticket::after { right: -11px; clip-path: inset(0 50% 0 0); }

/* D9 · stair-stepped lines */
.deco-stairs .step { display: block; }
.deco-stairs .step:nth-child(2) { margin-left: clamp(.5rem, 3vw, 3rem); }
.deco-stairs .step:nth-child(3) { margin-left: clamp(1rem, 6vw, 6rem); }
.deco-stairs .step span {
  background: linear-gradient(180deg, transparent 62%, var(--amber-l) 62%);
  padding-inline: .12em;
}

/* D10 · warning stamp / tape */
.deco-stamp {
  position: relative;
  display: inline-block;
  padding: clamp(1.15rem, 2.6vw, 1.9rem) clamp(1.5rem, 3.6vw, 2.8rem);
  border: 3px solid var(--rose);
  border-radius: 6px;
  background: #fff;
  transform: rotate(-1.05deg);
  box-shadow: var(--shadow-m);
}
.deco-stamp::before {
  content: "ONE TIME ONLY";
  position: absolute;
  top: -.82rem; right: 1.1rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: #fff;
  background: var(--rose);
  padding: .26rem .7rem;
  border-radius: 100px;
}

/* D12 · double offset rules flanking the headline */
.deco-drules { position: relative; padding-block: 1.35rem; }
.deco-drules::before, .deco-drules::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
  transition: width .9s cubic-bezier(.2,.8,.2,1);
  width: min(340px, 62%);
}
.deco-drules::before { top: 0; }
.deco-drules::after { bottom: 0; width: min(180px, 34%); background: linear-gradient(90deg, transparent, var(--amber), transparent); }
.js-on .deco-drules:not(.revealed)::before,
.js-on .deco-drules:not(.revealed)::after { width: 0; }

@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- 7. HERO ---------- */
.hero { padding-block: clamp(2.5rem, 5vw, 2.5rem) clamp(3rem, 6vw, 2rem); }

.hero-alert {
 display: inline-flex
;
    align-items: center;
    gap: .6rem;
    /* font-family: var(--font-mono); */
    font-size: 1.2rem;
    /* letter-spacing: .18em; */
    text-transform: uppercase;
    color: var(--rose);
    /* background: var(--rose-l); */
    /* border: 1px solid rgba(193, 53, 79, .22); */
    border-radius: 100px;
    /* padding: .48rem 1rem; */
    font-weight: 600;
    font-style: italic;
}
.hero-alert .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rose);
  animation: blip 1.5s ease-in-out infinite;
}
@keyframes blip { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.hero-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 11vw, 8rem);
  line-height: .88;
  letter-spacing: -.05em;
  display: block;
}

.hero-media { position: relative; }
.hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-l);
  display: block;
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: -14px -14px 22px -14px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--emerald-l), var(--indigo-l) 55%, var(--amber-l));
  z-index: -1;
  filter: blur(2px);
  opacity: .8;
}

.float-badge {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-m);
  padding: .7rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .55rem;
  animation: bob 5.5s ease-in-out infinite;
}
.float-badge i { font-size: 1.1rem; }
.float-badge--tl { top: 6%; left: -4%; color: var(--emerald-d); animation-delay: -1s; }
.float-badge--br { bottom: 8%; right: -4%; color: var(--indigo); animation-delay: -3s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  font-size: .84rem;
  color: var(--ink-mute);
  font-weight: 500;
}
.trust-strip span { display: inline-flex; align-items: center; gap: .42rem; }
.trust-strip i { color: var(--emerald); }

/* ---------- 8. BUTTONS ---------- */
.btn-cta {
  --y: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(168deg, #2da2ad, var(--emerald-d));
  border: 0;
  border-radius: 100px;
  padding: 1.08rem 2.4rem;
  box-shadow: 0 var(--y) 0 0 #074c34, var(--shadow-m);
  transition: transform .18s ease, box-shadow .18s ease, filter .25s ease;
  overflow: hidden;
  text-align: center;
}
.btn-cta::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-22deg);
  animation: shine 4.2s ease-in-out infinite;
}
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.btn-cta:hover { transform: translateY(3px); box-shadow: 0 2px 0 0 #074c34, var(--shadow-s); filter: brightness(1.05); color: #fff; }
.btn-cta:active { transform: translateY(5px); box-shadow: 0 0 0 0 #074c34; }
.btn-cta--rose { background: linear-gradient(168deg, #d94263, #a3253c); box-shadow: 0 var(--y) 0 0 #7a1a2c, var(--shadow-m); }
.btn-cta--rose:hover { box-shadow: 0 2px 0 0 #7a1a2c, var(--shadow-s); }
.btn-cta--xl { font-size: clamp(1.05rem, 1.9vw, 1.4rem); padding: 1.3rem 2.9rem; }
.btn-cta--wrap { max-width: 46rem; margin-inline: auto; line-height: 1.34; }

.cta-note {
  font-family: var(--font-mono);
  font-size: .73rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 9. CARDS & PANELS ---------- */
.panel {
  /* background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 3vw, 1.5rem);
  box-shadow: var(--shadow-s);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; */
}
/* .panel:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: rgba(15,138,95,.34); } */

.panel--tint { background: var(--paper-2); }
.panel--flat:hover { transform: none; }

.congrats-panel {
  position: relative;
  /* background: linear-gradient(150deg, #fff, var(--paper-2));
  border: 1px solid var(--line);
  border-left: 5px solid var(--emerald);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: clamp(1.5rem, 3.4vw, 2.7rem);
  box-shadow: var(--shadow-s); */
}

/* imagine list */
.imagine-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.imagine-list li {
  display: flex
;
    gap: .95rem;
    align-items: flex-start;
    /* background: #fff; */
    /* border: 1px solid var(--line); */
    /* border-radius: var(--r-md); */
    padding: .5rem 0.0rem;
    /* box-shadow: var(--shadow-s); */
    /* transition: transform .3s ease, border-color .3s ease, background .3s ease; */
}
/* .imagine-list li:hover { transform: translateX(7px); border-color: rgba(15,138,95,.38); background: #fdfffe; } */
.imagine-list .ic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--emerald-l);
  color: var(--emerald-d);
  font-size: 1.15rem;
}
.imagine-list li:nth-child(3n+2) .ic { background: var(--indigo-l); color: var(--indigo); }
.imagine-list li:nth-child(3n+3) .ic { background: var(--amber-l); color: #a9660b; }

/* pivot statements */
.pivot {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  line-height: 1.34;
  letter-spacing: -.02em;
  color: var(--ink);
  padding-left: 1.15rem;
  border-left: 3px solid var(--amber);
}
.pivot--emerald { border-left-color: var(--emerald); }
.pivot--indigo { border-left-color: var(--indigo); }

/* ---------- 10. GPT SYSTEM CATEGORY CARDS ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(312px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }

.cat-card {
  position: relative;
  background: #fff;
  border: 1px solid #028aaf;
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
  display: flex;
  flex-direction: column;
}
.cat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--c, var(--emerald));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-l); border-color: color-mix(in srgb, var(--c, var(--emerald)) 40%, var(--line)); }
.cat-card:hover::before { transform: scaleX(1); }

/* pointer-following glow (desktop hover only, set by JS) */
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--c, var(--emerald)) 10%, transparent), transparent 70%);
}
.cat-card:hover::after { opacity: 1; }

.cat-card .cat-num {
  position: absolute;
  top: .85rem; right: 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 1;
  color: var(--c, var(--emerald));
  opacity: .09;
}

.cat-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.cat-emoji {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 14px;
  font-size: 1.5rem;
  /* background: color-mix(in srgb, var(--c, var(--emerald)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, var(--emerald)) 26%, #fff); */
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
.cat-card:hover .cat-emoji { transform: rotate(-9deg) scale(1.08); }
.cat-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.22;
  letter-spacing: -.02em;
  margin: 0;
  position: relative;
  z-index: 2;
}
.cat-desc { font-size: .93rem; color: var(--ink-soft); line-height: 1.62; margin-bottom: 1.05rem; }

.tool-list { list-style: none; padding: 0; margin: 0 0 auto; display: grid; gap: .42rem; }
.tool-list li {
 display: flex
;
    align-items: flex-start;
    gap: .55rem;
    font-size: 1.0rem;
    font-weight: 500;
    color: #ffffff;
    padding: .34rem .55rem;
    border-radius: 8px;
    background: #028aaf;
    transition: background .25s ease, transform .25s ease;
}
.tool-list li:hover { background: color-mix(in srgb, var(--c, var(--emerald)) 9%, #028aaf); transform: translateX(4px); }
.tool-list .tick { color: #fff; font-weight: 700; flex: 0 0 auto; line-height: 1.55; }

.cat-count {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px dashed var(--line);
  padding-top: .8rem;
}

/* ---------- 11. FUTURE / TIMELINE ---------- */
.timeline { position: relative; padding-left: clamp(1.6rem, 4vw, 2.6rem); }
.timeline::before {
  content: "";
  position: absolute;
  left: clamp(.42rem, 1.1vw, .72rem);
  top: .5rem; bottom: .5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--emerald), var(--indigo) 55%, var(--amber));
  opacity: .34;
}
.tl-item { position: relative; padding: .55rem 0 .55rem .25rem; }
.tl-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.6rem, 4vw, 2.6rem) + clamp(.1rem, .5vw, .3rem));
  top: 1.15rem;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--emerald);
  box-shadow: 0 0 0 4px #fff;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .35s;
}
.tl-item:hover::before { transform: scale(1.35); }
.tl-item:nth-child(even)::before { border-color: var(--indigo); }
.tl-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.75vw, 1.32rem);
  letter-spacing: -.018em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
}
.tl-text i { color: var(--emerald); font-size: .95em; }
.tl-item:nth-child(even) .tl-text i { color: var(--indigo); }

/* ---------- 12. CHANNELS CHIP CLOUD ---------- */
.chip-cloud { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .5rem 1rem;
  box-shadow: var(--shadow-s);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), border-color .28s, background .28s;
}
.chip i { color: var(--emerald); font-size: 1rem; }
.chip:hover { transform: translateY(-4px) scale(1.03); border-color: rgba(15,138,95,.4); background: #fbfffd; }
.chip:nth-child(3n+2) i { color: var(--indigo); }
.chip:nth-child(3n+3) i { color: var(--amber); }

/* ask-swap block */
.ask-swap { display: grid; gap: 1rem; }
.ask-box {
  position: relative;
  border-radius: var(--r-md);
  padding: 1.15rem 1.35rem 1.15rem 3.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.8vw, 1.32rem);
  letter-spacing: -.02em;
  line-height: 1.34;
}
.ask-box::before {
  position: absolute;
  left: 1.15rem; top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}
.ask-old {
      background: #faffff;
    color: #000000;
    border: 1px dashed #c6d3cb;
}
.ask-old::before { content: "\2715"; color: var(--ink-mute); }
.ask-new {
    background: #006d72;
    color: #87ebff;
    border: 1px solid rgba(15, 138, 95, .3);
}
.ask-new::before { content: "\2713"; color: var(--emerald); }

/* ---------- 13. INCLUDED CHECKLIST ---------- */
.incl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: .7rem; }
.incl-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .92rem 1.1rem;
  font-weight: 600;
  font-size: .95rem;
  box-shadow: var(--shadow-s);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.incl-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: rgba(15,138,95,.36); }
.incl-item .cb {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--emerald);
  color: #fff;
  display: grid; place-items: center;
  font-size: .82rem;
  box-shadow: 0 2px 6px rgba(15,138,95,.32);
}

/* ---------- 14. UPGRADE TIERS ---------- */
.tier-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(.9rem, 2vw, 1.4rem); }
.tier {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-s);
  transition: transform .35s ease, box-shadow .35s ease;
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); }
.tier .tier-tag {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: .55rem;
}
.tier .tier-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -.022em;
  margin-bottom: .5rem;
}
.tier p { font-size: .92rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.tier--now {
  border: 2px solid var(--emerald);
  background: linear-gradient(160deg, #fff, var(--emerald-l));
  box-shadow: var(--shadow-m);
}
.tier--now .tier-tag { color: var(--emerald-d); }
.tier--now::after {
  content: "\2605 THIS UPGRADE";
  position: absolute;
  top: -.72rem; left: 1.2rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  background: var(--emerald);
  color: #fff;
  padding: .28rem .68rem;
  border-radius: 100px;
}

/* instead-of / you-get swap rows */
.swap-grid { display: grid; gap: .85rem; }
.swap-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.05rem 1.2rem;
  box-shadow: var(--shadow-s);
  transition: border-color .3s ease, transform .3s ease;
}
.swap-row:hover { border-color: rgba(15,138,95,.36); transform: translateY(-3px); }
.swap-from { color: var(--ink-mute); font-size: .95rem; }
.swap-from s { text-decoration-color: rgba(193,53,79,.5); }
.swap-arrow {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--emerald-l);
  color: var(--emerald-d);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.swap-to { font-weight: 600; font-size: .98rem; color: var(--ink); }

/* ---------- 15. FINAL OFFER / URGENCY ---------- */
.urgency-band {
  /* background: linear-gradient(150deg, #fff 0%, var(--rose-l) 100%); */
  border: 1px solid rgba(193,53,79,.2);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 4vw, 3.2rem);
  box-shadow: var(--shadow-m);
}
.gone-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.gone-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.8vw, 1.28rem);
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(193,53,79,.2);
  border-radius: var(--r-md);
  padding: .85rem 1.1rem;
}
.gone-list i { color: var(--rose); }

.final-cta-wrap {
  text-align: center;
  background: #fff;
  border: 2px solid var(--emerald);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4.4vw, 3.4rem);
  box-shadow: var(--shadow-l);
  position: relative;
  overflow: hidden;
}
.final-cta-wrap::before {
  content: "";
  position: absolute;
  inset: -50% -10%;
  background: conic-gradient(from 0deg, transparent, rgba(15,138,95,.08), transparent 40%);
  animation: spin-slow 18s linear infinite;
  pointer-events: none;
}
.final-tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 2.2vw, 1.6rem);
  letter-spacing: -.024em;
  line-height: 1.3;
  position: relative;
  z-index: 2;
}
.final-tagline span { display: inline-block; }

/* guarantee */
.guarantee {
 /* background: linear-gradient(150deg, var(--emerald-l), #fff 70%);  */

  border: 3px dashed rgba(15, 138, 95, .24);
    border-radius: var(--r-xl);
    padding: clamp(1.6rem, 3.8vw, 3rem);
    
    /* box-shadow: var(--shadow-s); */
}
.g-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(104px, 15vw, 148px);
  height: clamp(104px, 15vw, 148px);
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--emerald);
  box-shadow: var(--shadow-m), inset 0 0 0 6px var(--emerald-l);
  text-align: center;
  line-height: 1.1;
  flex: 0 0 auto;
}
.g-badge .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--emerald-d); letter-spacing: -.03em; }
.g-badge .txt { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: .2rem; }

/* ---------- 16. FOOTER ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.2rem 2.8rem;
  font-size: .85rem;
  color: var(--ink-mute);
}
.foot-brand { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-size: 1.05rem; }

/* ---------- 17. STICKY CTA BAR ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 26px rgba(13,27,22,.08);
  padding: .7rem 0;
  transform: translateY(115%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.sticky-cta.on { transform: translateY(0); }
.sticky-cta .sc-text { font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: -.02em; }
.sticky-cta .btn-cta { padding: .78rem 1.6rem; font-size: .95rem; --y: 4px; }

/* progress bar */
.read-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--emerald), var(--indigo));
  z-index: 70;
  transition: width .1s linear;
}

/* ---------- 18. REVEAL ANIMATIONS ---------- */
/* Content is visible by default; hidden only when JS confirms it can reveal it.
   Guarantees copy is never lost if JS fails or is disabled. */
/* .js-on .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
} */
.js-on .rv.revealed { opacity: 1; transform: none; }
/* .js-on .rv-l { transform: translateX(-30px); }
.js-on .rv-r { transform: translateX(30px); }
.js-on .rv-s { transform: scale(.95); } */
.js-on .rv-l.revealed, .js-on .rv-r.revealed, .js-on .rv-s.revealed { transform: none; }

/* .rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; }
.rv-d5 { transition-delay: .40s; }
.rv-d6 { transition-delay: .48s; } */

/* hero entrance (no scroll needed) */
.js-on .in { opacity: 0; animation: rise .95s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.in-1 { animation-delay: .05s; } .in-2 { animation-delay: .15s; }
.in-3 { animation-delay: .25s; } .in-4 { animation-delay: .35s; }
.in-5 { animation-delay: .45s; } .in-6 { animation-delay: .55s; }
.in-7 { animation-delay: .65s; } .in-8 { animation-delay: .75s; }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width: 991.98px) {
  .float-badge--tl { left: 1%; }
  .float-badge--br { right: 1%; }
  .swap-row { grid-template-columns: 1fr; gap: .6rem; text-align: left; }
  .swap-arrow { transform: rotate(90deg); }
  .deco-ribbon { padding: .9rem 1.4rem; }
  .deco-ribbon::before, .deco-ribbon::after { display: none; }
}

@media (max-width: 767.98px) {
  body { font-size: 1rem; line-height: 1.68; }
  .col-10.main-col { padding-inline: .35rem; }
  .band { padding-block: 1.5rem; }
  .cat-grid { grid-template-columns: 1fr; }
  .float-badge { font-size: .72rem; padding: .55rem .8rem; }
  .deco-stairs .step:nth-child(2),
  .deco-stairs .step:nth-child(3) { margin-left: 0; }
  .deco-stamp { transform: none; }
  .deco-index { flex-direction: column; gap: .7rem; }
  .deco-index .idx { margin-top: 0; }
  .sticky-cta .sc-text { display: none; }
  .sticky-cta .btn-cta { width: 100%; }
  .g-badge { margin-inline: auto; }
}

@media (max-width: 575.98px) {
  .hero-count { font-size: 3.1rem; }
  .deco-quote::before { font-size: 5rem; top: -.6rem; }
  .imagine-list li { padding: .8rem .9rem; }
  .tool-list li { font-size: .86rem; }
}

/* ---------- 20. A11Y / PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .mark-sweep::before { transform: scaleX(1); }
  .squiggle svg path { stroke-dashoffset: 0; }
}

a:focus-visible, .btn-cta:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

@media print {
  body::before, body::after, .sticky-cta, .read-bar { display: none; }
  .rv { opacity: 1; transform: none; }
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1240px;
    }
}



.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem
}

.foot-links a {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink-soft)
}

.foot-links a:hover {
  color: var(--indigo)
}

.foot-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.2rem 0 1.2rem
}




    :root {
      --teal-primary: #046a67;
      --teal-accent: #059669;
      --teal-dark: #02403e;
      --teal-light: #e6f7f5;
      --red-accent: #e11d48;
      --navy-dark: #0b1727;
    }


    .master-offer-card {
      max-width: 1100px;
      width: 100%;
      position: relative;
      overflow: hidden;
    }


    .bg-wave-layer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
    }

    .dot-pattern-side {
      position: absolute;
      width: 90px;
      height: 120px;
      background-image: radial-gradient(#cbd5e1 2px, transparent 2px);
      background-size: 14px 14px;
      opacity: 0.6;
      pointer-events: none;
    }

    .dot-pattern-left {
      left: 20px;
      top: 40%;
    }

    .dot-pattern-right {
      right: 20px;
      bottom: 20px;
    }


    .top-warning-capsule {
      color: var(--red-accent);
      font-weight: 800;
      font-size: 1.2rem;
      padding: 7px 28px;
      border-radius: 50px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-style: italic;
      box-shadow: 0 4px 12px rgba(225, 29, 72, 0.06);
    }

    .dashed-indicator-line {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 25px;
    }

    .dot-connector-node {
      width: 6px;
      height: 6px;
      background-color: #2dd4bf;
      border-radius: 50%;
    }


    .subheading-tagline {
      font-size: 1.45rem;
      font-weight: 700;
      color: #334155;
      margin-bottom: 15px;
    }

    .highlight-bold-navy {
      color: var(--navy-dark);
      font-weight: 800;
    }

    .pill-complete-badge {
      color: #000000;
      font-size: 2.05rem;
      font-weight: 900;
      letter-spacing: 2px;
      display: inline-block;
      position: relative;
      line-height: 38px;
    }


    .rays-glow-icon {
      color: var(--teal-primary);
      font-size: 1.2rem;
      margin: 0 10px;
    }


    .hero-center-split {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 30px;
      margin-top: 0px;
      margin-bottom: 9px;
    }


    .badge-number-box {
      width: 220px;
      height: 180px;
      background: linear-gradient(145deg, #065f46 0%, #044e46 50%, #022c2a 100%);
      border-radius: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 20px 40px rgba(4, 106, 103, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.5);
      border: 4px solid #ffffff;
      outline: 2px solid #5eead4;
      transform: perspective(500px) rotateY(-8deg) rotateX(4deg);
      transition: transform 0.4s ease;
      flex-shrink: 0;
    }

    .badge-number-box:hover {
      transform: perspective(500px) rotateY(0deg) rotateX(0deg) scale(1.03);
    }

    .big-number-45 {
      font-size: 8rem;
      font-weight: 900;
      color: #ffffff;
      line-height: 1;
      letter-spacing: -4px;
      text-shadow: 4px 6px 0px rgba(0, 0, 0, 0.25);
    }


    .headline-stack-wrap {
      text-align: left;
    }

    .headline-top-row {
      font-size: 4.8rem;
      font-weight: 900;
      color: var(--navy-dark);
      line-height: 0.95;
      letter-spacing: -2px;
    }

    .headline-bottom-row {
      font-size: 2.7rem;
    font-weight: 900;
    text-align: center;
    line-height: 23px;
    }


    .plr-flank-bar {
      display: inline-flex;
      align-items: center;
      gap: 15px;
      margin-top: 10px;
      margin-bottom: 20px;
    }

    .flank-line-graphic {
      height: 2px;
      width: 70px;
      background: #046a67;
      position: relative;
    }

    .flank-line-graphic::after {
      content: '';
      position: absolute;
      top: -4px;
      width: 10px;
      height: 10px;
      border: 2px solid #046a67;
      background: #ffffff;
      border-radius: 50%;
    }

    .flank-line-graphic.left-line::after {
      right: 0;
    }

    .flank-line-graphic.right-line::after {
      left: 0;
    }

    .plr-capsule-box {
    border-radius: 50px;
    padding: 0px 19px;
    background: #ffffff;
    font-size: 3.7rem;
    font-weight: 800;
    color: var(--navy-dark);
    line-height: 58px;
    }

    .plr-capsule-box span {
      color: #046a67;
    }


    .bottom-tagline-capsule {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 1.45rem;
      font-weight: 700;
      color: #1e293b;
    }

    .rocket-circle-icon {
      width: 42px;
      height: 42px;
      background: #046a67;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      box-shadow: 0 4px 10px rgba(4, 106, 103, 0.25);
    }

    .underline-link-style {
      color: #05b2c8;
      text-decoration: underline;
      text-underline-offset: 4px;
      font-weight: 800;
    }


    @media (max-width: 991px) {
      .headline-top-row {
        font-size: 3.5rem;
      }

      .headline-bottom-row {
        font-size: 3.7rem;
      }

      .badge-number-box {
        width: 170px;
        height: 140px;
      }

      .big-number-45 {
        font-size: 6rem;
      }

      .plr-capsule-box {
        font-size: 1.3rem;
        padding: 8px 25px;
      }

      .subheading-tagline {
        font-size: 1.2rem;
      }
    }

    @media (max-width: 768px) {
      .hero-center-split {
        flex-direction: column;
        text-align: center;
      }

      .headline-stack-wrap {
        text-align: center;
      }

      .headline-top-row {
        font-size: 2.8rem;
      }

      .headline-bottom-row {
        font-size: 3rem;
      }

      .flank-line-graphic {
        display: none;
      }

      .bottom-tagline-capsule {
        font-size: 0.95rem;
      }
    }



 .visible-xs,
        .visible-sm,
        .visible-md,
        .visible-lg {
            display: none !important
        }

        @media (max-width:767px) {
            .visible-xs {
                display: block !important
            }

        }




        @media (max-width:767px) {
            .hidden-xs {
                display: none !important
            }
        }

.boxe{
	transition:all 0.05s ease-in-out;
}
.boxe{
  position: absolute;
    width: 162px;
    height: 68px;
    border: solid 5px #ab5bf7;
    border-color: #05b2c8 transparent transparent transparent;
    border-radius: 67% / 38px 24px 0 0;
    left: 75px;
    bottom: 54px;
}