/* ===========================================================================
   $THICC — Thicconomics.

   Built away from the earlier launch pages on purpose. No top nav and no side
   rail: the only persistent chrome is a bar pinned to the bottom carrying the
   one fact the page exists to sell. Sections are soft lobes rather than
   rectangular cards, because the logo is all curve and hard boxes fight it.

   Palette is sampled from the art itself (#20f070 / #30f080), not guessed at.
   =========================================================================== */

:root {
  --bg:        #050806;
  --bg2:       #080d0a;
  --lobe:      #0a1210;
  --ink:       #eafff2;
  --dim:       #7e9a8b;
  --dimmer:    #4e635a;

  --neon:      #2bf277;
  --neon-hi:   #66ffa3;
  --neon-lo:   #16a35a;

  --rewards:   #ffd166;

  --line:      rgba(43, 242, 119, .16);
  --line-soft: rgba(43, 242, 119, .08);

  --r-lg: 40px;
  --r-md: 22px;
  --r-sm: 12px;

  --dock-h: 68px;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-bottom: var(--dock-h);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto matters: the markup carries width/height attributes so the
   browser can reserve space before the image loads, and without this a CSS
   width leaves the attribute height in force and the art renders stretched. */
img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.wrap.narrow { max-width: 780px; }

/* --------------------------------------------------------- curve field -- */

/* Slow-drifting curves behind everything, echoing the logo's line work. It is
   one fixed SVG rather than per-section decoration so it reads as a single
   continuous background instead of repeating furniture. */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
}
.field svg { width: 100%; height: 100%; }
.field path {
  fill: none;
  stroke: var(--neon);
  stroke-width: 1.4;
  opacity: .18;
  filter: blur(.3px);
}
.field path:nth-child(2) { opacity: .11; stroke-width: 2.4; }
.field path:nth-child(3) { opacity: .07; stroke-width: 3.6; }

main { position: relative; z-index: 1; }

/* ---------------------------------------------------------- typography -- */

h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 900; }

/* "Thicconomics" is one unbreakable 12-character word, and background-clip
   slices any part of a glyph that leaves the box, so overflowing here does not
   just look tight - it shears the tail off the final s.

   The thing it has to fit inside is its column, not the viewport. Those two
   track each other closely enough across the two-column range that a vw size
   sits within a percent of overflowing at every width, so the size is taken
   from the column instead. The word measures 5.835x its font-size, i.e. it
   fills the column at 17.1cqi, and 16.4cqi leaves a few percent of air. */
.word {
  /* Browsers without container query units get a size that clears the
     narrowest two-column case on viewport units alone. */
  font-size: clamp(40px, 7.6vw, 88px);
  font-size: min(clamp(44px, 9vw, 104px), 16.4cqi);
  line-height: .92;
  letter-spacing: -.03em;
  font-variation-settings: "SOFT" 60, "opsz" 100;
  background: linear-gradient(178deg, var(--neon-hi), var(--neon) 58%, var(--neon-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--neon);
  opacity: .8;
}

.ticker {
  margin: 14px 0 0;
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--dim);
}

.lede {
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 2.1vw, 21px);
  color: #cfe6d9;
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 90px 0 120px;
}

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

/* Makes this column the reference for the wordmark's cqi sizing. Its own width
   comes from the grid track, so establishing a container here cannot feed back
   into the layout. */
.hero-copy { container-type: inline-size; }

.hero-art { position: relative; }
.hero-art img {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  filter: drop-shadow(0 0 46px rgba(43, 242, 119, .34));
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* The headline claim, which is the whole pitch in one object. */
.claim {
  margin: 34px 0 0;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: auto auto;
  gap: 6px 20px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(43, 242, 119, .05), transparent);
}
.claim-v {
  grid-row: 1 / 3;
  font-weight: 700;
  font-size: 15px;
  color: var(--dim);
  max-width: 11ch;
  line-height: 1.3;
}
.claim-v span { display: block; color: var(--ink); font-size: 19px; }
.claim-arrow { grid-row: 1 / 3; width: 40px; }
.claim-arrow svg { width: 100%; fill: none; stroke: var(--neon); stroke-width: 1.4; }
.claim-out { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.claim-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(22px, 3.4vw, 32px);
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}
/* The reward half is gold everywhere it appears. nth-of-type would count the
   label and the arrow as siblings of the same type and miss. */
.claim-out:last-of-type .claim-num { color: var(--rewards); }
.claim-lab { font-size: 14px; color: var(--dim); }

.hero-cta { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

/* Sits clear of the dock, which is fixed over the bottom of every viewport and
   would otherwise cover this entirely. */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--dock-h) + 18px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dimmer);
  text-decoration: none;
}
.scroll-hint svg { width: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.scroll-hint:hover { color: var(--neon); }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--body);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: transform .14s ease, background .2s ease, border-color .2s ease;
}
.btn.small { padding: 10px 18px; font-size: 14px; }
.btn.primary {
  background: var(--neon);
  border-color: var(--neon);
  color: #04150b;
  box-shadow: 0 0 0 rgba(43, 242, 119, .5);
}
.btn.primary:hover { background: var(--neon-hi); transform: translateY(-1px); }
.btn.ghost:hover { border-color: var(--neon); color: var(--neon); }
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------ sections -- */

.sect { padding: clamp(70px, 10vw, 130px) 0; }

/* The lobe: a section that curves in at the corners instead of sitting in a
   hard-edged band. */
.sect.lobe {
  background: var(--lobe);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  margin: 0 auto;
  max-width: 1240px;
  width: calc(100% - 24px);
}
.sect.lobe.alt {
  background: linear-gradient(170deg, #0a1210, #070c09);
}

.sect-head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 60px); }
.sect-head h2 {
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.03;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 50;
}
.sect-head .sub { margin: 18px 0 0; color: var(--dim); font-size: 17px; }

.reward-name { color: var(--neon); }
.hl { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- engine -- */

.engine {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.lab {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.engine-input .big {
  display: block;
  margin: 10px 0 22px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  background: transparent;
  cursor: grab;
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-lo), var(--neon));
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon-lo), var(--neon));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--neon);
  border: 4px solid #061109;
  box-shadow: 0 0 18px rgba(43, 242, 119, .7);
}
input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--neon);
  border: 4px solid #061109;
  box-shadow: 0 0 18px rgba(43, 242, 119, .7);
}
input[type="range"]:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 6px; }

.presets { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.presets button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .16s ease;
}
.presets button:hover { border-color: var(--neon); color: var(--neon); }
.presets button.on { background: rgba(43, 242, 119, .14); border-color: var(--neon); color: var(--neon); }

/* One bar, split into the halves the tax creates. */
.bar {
  display: flex;
  height: 16px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.bar-liq { width: 5%; background: var(--neon); }
.bar-rew { width: 5%; background: var(--rewards); }
.bar-rest { flex: 1; background: rgba(255, 255, 255, .05); }

.splits {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.split {
  padding: 22px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .015);
}
.split-top { display: flex; align-items: center; gap: 9px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); }
.split.rew .dot { background: var(--rewards); }
.split-lab { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--dim); }
.split-num {
  margin: 12px 0 10px;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}
.split.rew .split-num { color: var(--rewards); }
.split-note { margin: 0; font-size: 14px; color: var(--dim); }

.yours {
  margin: 22px 0 0;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: end;
  justify-content: space-between;
}
.yours-row { display: flex; flex-direction: column; gap: 8px; }
.bagbox { display: flex; align-items: baseline; gap: 8px; }
.bagbox input {
  width: 92px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #061009;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 700;
  font-size: 19px;
}
.bagbox input:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.pct { font-size: 14px; color: var(--dim); }
.yours-out { display: flex; flex-direction: column; gap: 6px; text-align: right; }
.yours-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  color: var(--neon-hi);
  font-variant-numeric: tabular-nums;
}

.fine { margin: 30px 0 0; font-size: 13px; color: var(--dimmer); max-width: 70ch; }

/* ------------------------------------------------------------- ratchet -- */

.ratchet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

/* Bars are generated in JS so the shape is one source of truth with the
   numbers in the copy. */
.ratchet-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 260px;
  padding: 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .015);
}
.rb { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--neon), var(--neon-lo)); opacity: .85; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.steps li { display: flex; gap: 18px; }
.step-n {
  font-family: var(--display);
  font-weight: 900;
  font-size: 15px;
  color: var(--neon);
  opacity: .7;
  padding-top: 3px;
}
.steps h3 { font-size: 19px; letter-spacing: -.01em; }
.steps p { margin: 6px 0 0; font-size: 15px; color: var(--dim); }

.thirty {
  margin: clamp(40px, 6vw, 70px) 0 0;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: radial-gradient(120% 160% at 50% 0%, rgba(43, 242, 119, .09), transparent 70%);
  text-align: center;
}
.thirty-lab, .thirty-sub { margin: 0; color: var(--dim); font-size: 16px; }
.thirty-num {
  margin: 12px 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(42px, 8vw, 82px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}
.thirty span { color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.card {
  padding: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .02);
}
.card.wide { grid-column: 1 / -1; }
.card h3 { font-size: 20px; }
.card p { margin: 10px 0 0; font-size: 15px; color: var(--dim); }

/* ------------------------------------------------------------------ qa -- */

.qa { display: grid; gap: 10px; }
details {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .015);
  overflow: hidden;
}
details[open] { border-color: var(--line); }
summary {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  float: right;
  color: var(--neon);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
}
details[open] summary::after { content: "\2013"; }
details p { margin: 0; padding: 0 22px 20px; font-size: 15px; color: var(--dim); }

.ca {
  margin: 34px 0 0;
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .015);
}
.ca-lab { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer); }
.ca code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ca button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--neon);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ca button:hover { background: rgba(43, 242, 119, .12); }

/* ---------------------------------------------------------------- foot -- */

.foot { padding: 60px 0 40px; border-top: 1px solid var(--line-soft); }
.foot-in { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.foot p { margin: 0; font-size: 14px; color: var(--dimmer); }
.foot-links { display: flex; gap: 18px; }
.foot-links a { color: var(--dim); text-decoration: none; }
.foot-links a:hover { color: var(--neon); }
.foot-warn { flex-basis: 100%; font-size: 12px; }

/* ---------------------------------------------------------------- dock -- */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: var(--dock-h);
  border-top: 1px solid var(--line);
  background: rgba(5, 9, 7, .86);
  backdrop-filter: blur(14px) saturate(140%);
}
.dock-in {
  height: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.dock-math {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--dim);
  min-width: 0;
}
.dock-unit { white-space: nowrap; }
.dock-sep, .dock-plus { color: var(--dimmer); }
.dock-bit { white-space: nowrap; }
.dock-bit b { color: var(--neon); font-size: 16px; }
.dock-bit:last-of-type b { color: var(--rewards); }

/* The buy button must never be the thing that gets pushed off a narrow
   viewport, so it refuses to shrink and the wording beside it abbreviates
   instead. */
.dock-btn { flex: 0 0 auto; }
.w-short { display: none; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; text-align: center; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 240px; }
  .lede, .sect-head { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .claim { grid-template-columns: 1fr; text-align: left; }
  .claim-v, .claim-arrow { grid-row: auto; }
  .claim-arrow { transform: rotate(90deg); margin: 2px 0; }
  .claim-v { max-width: none; }
  .engine, .ratchet { grid-template-columns: 1fr; }
  .ratchet-chart { height: 180px; order: 2; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .sect { padding: 64px 0; }
  .dock-unit, .dock-sep { display: none; }
  .dock-in { padding: 0 16px; gap: 12px; }
  .dock-math { font-size: 13px; gap: 8px; }
  .w-long { display: none; }
  .w-short { display: inline; }
  .dock-btn { padding: 10px 15px; }
  .yours { flex-direction: column; align-items: stretch; }
  .yours-out { text-align: left; }
  .scroll-hint { display: none; }
}

/* Anchor jumps must not tuck a heading under the top of the viewport. */
.sect { scroll-margin-top: 24px; }

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