/* =====================================================
   DIVIDEND . the robin hood of Base
   Palette: deep navy + emerald + gold + parchment cream.
   Layout: left fixed rail + center column hero +
   receipt-strip ledger + vertical flow + receipt folds.
   No top-bar, no card-grid, no horizontal CTA row.
   ===================================================== */

:root{
  --ink: #061026;
  --ink-2: #0a1733;
  --ink-3: #112042;
  --ink-soft: #1b2c54;
  --ink-line: #233a6c;

  --emerald: #2ecf94;
  --emerald-dark: #19a572;
  --emerald-glow: rgba(46, 207, 148, .22);
  --gold: #efc05a;
  --gold-deep: #b88a2a;
  --cream: #f2e9d4;
  --paper: #ebd9b0;

  --text: #e7eef7;
  --text-soft: #b9c4d7;
  --text-mute: #7c89a3;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  --shadow-soft: 0 22px 60px -28px rgba(0,0,0,.55);
  --shadow-deep: 0 30px 90px -36px rgba(0,0,0,.65);

  --max: 1280px;
  --rail-w: 88px;

  --font-display: 'Anybody', 'Hubot Sans', system-ui, sans-serif;
  --font-body: 'Hubot Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Recursive', ui-monospace, 'SF Mono', monospace;
  font-variant-ligatures: none;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.vh{ position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- background -------------------------------- */
.bg{ position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 12% 8%, rgba(239,192,90,.10), transparent 60%),
    radial-gradient(70% 60% at 88% 92%, rgba(46,207,148,.10), transparent 65%),
    linear-gradient(180deg, #050b1c 0%, #0a1633 60%, #060e22 100%);
}
.bg-halo{
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
}
.bg-halo-1{
  width: 720px; height: 720px;
  background: radial-gradient(closest-side, rgba(46,207,148,.34), transparent 70%);
  left: -160px; top: 220px;
}
.bg-halo-2{
  width: 620px; height: 620px;
  background: radial-gradient(closest-side, rgba(239,192,90,.30), transparent 70%);
  right: -120px; top: 60px;
}
.bg-grain{
  position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.7) 0.6px, transparent 1px),
    radial-gradient(rgba(255,255,255,.4) 0.5px, transparent 1px);
  background-size: 5px 5px, 11px 11px;
  background-position: 0 0, 2px 3px;
}

/* ---------- left rail (replaces top-bar) -------------- */
.rail{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 0 22px;
  gap: 22px;
  border-right: 1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(8,16,34,.92), rgba(8,16,34,.78));
  backdrop-filter: blur(8px);
}
.rail-brand{
  display: block; width: 50px; height: 50px; border-radius: 14px;
  overflow: hidden; box-shadow: 0 8px 22px -10px rgba(0,0,0,.6);
  background: #0d1838;
}
.rail-brand img{ width: 100%; height: 100%; display: block; object-fit: contain; }
.rail-nav{
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; flex: 1;
  margin-top: 4px;
}
.rail-nav a{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .14em; text-transform: lowercase;
  color: var(--text-soft); text-decoration: none;
  padding: 14px 6px; border-radius: 8px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.rail-nav a:hover{
  color: var(--emerald);
  border-color: rgba(46,207,148,.25);
  background: rgba(46,207,148,.08);
}
.rail-foot{
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  width: 60%;
  align-items: center;
}
.rail-social{
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-soft);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: color .15s, transform .15s, border-color .15s, background .15s;
}
.rail-social svg{ width: 14px; height: 14px; }
.rail-social[data-link="x"]:hover{ color: var(--text); border-color: rgba(255,255,255,.25); }
.rail-social[data-link="dex"]:hover{ color: var(--emerald); border-color: rgba(46,207,148,.45); background: rgba(46,207,148,.08); }
.rail-social[data-link="pump"]:hover{ color: var(--gold); border-color: rgba(239,192,90,.45); background: rgba(239,192,90,.08); }
.rail-social:hover{ transform: translateY(-1px); }

/* ---------- main wrapper ------------------------------- */
main{
  padding-left: calc(var(--rail-w) + 24px);
  padding-right: 24px;
  max-width: calc(var(--max) + var(--rail-w));
  margin: 0 auto;
}

/* ---------- HERO --------------------------------------- */
.hero{
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 56px;
  align-items: start;
  padding: 64px 0 48px;
}
.hero-cube{ position: relative; align-self: start; }
.cube-img{
  width: 100%; max-width: 460px; display: block;
  filter: drop-shadow(0 36px 56px rgba(0,0,0,.55))
          drop-shadow(0 0 60px rgba(46,207,148,.15));
  position: relative; z-index: 2;
}
.cube-shadow{
  position: absolute; left: 8%; right: 8%; bottom: 8%;
  height: 36px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  filter: blur(14px); z-index: 1;
}

/* The CA ribbon tied around the cube belly */
.ribbon-ca{
  position: absolute;
  left: -10px; right: -10px;
  bottom: 14%;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  background: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-dark) 100%);
  color: #07221a;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .04em;
  border: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.7),
              inset 0 -2px 0 rgba(0,0,0,.18),
              inset 0 2px 0 rgba(255,255,255,.25);
  gap: 14px;
  transition: filter .15s, transform .1s;
}
.ribbon-ca:hover{ filter: brightness(1.08); }
.ribbon-ca:active{ transform: translateY(1px); }
.ribbon-end{
  position: absolute; top: 0; bottom: 0; width: 22px;
  background: linear-gradient(180deg, var(--emerald) 0%, var(--emerald-dark) 100%);
}
.ribbon-end-l{
  left: -18px;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 35% 50%);
}
.ribbon-end-r{
  right: -18px;
  clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%, 0 50%);
}
.ribbon-stamp{
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold);
  color: #4b3b0e;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px; letter-spacing: .04em;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.3);
}
.ribbon-text{
  font-weight: 700;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
  flex: 1; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ribbon-copy{
  font-size: 10px; opacity: .65;
  font-style: italic;
}

/* hero text stack on the right of the cube */
.hero-stack{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kicker{
  font-family: var(--font-mono);
  font-size: 11.5px; letter-spacing: .12em;
  color: var(--emerald); margin: 0 0 4px;
  text-transform: lowercase;
}
.hero-title{ margin: 0; line-height: .92; font-family: var(--font-display); }
.title-row{
  display: inline-block;
  font-size: clamp(58px, 9vw, 124px);
  font-weight: 900; letter-spacing: -.025em;
  color: var(--cream);
  background: linear-gradient(180deg, #f6efe0 0%, #d5c79a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.title-accent{ color: var(--gold); -webkit-text-fill-color: var(--gold); background: none; }
.title-tag{
  display: inline-block;
  margin-left: 14px;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--emerald);
  letter-spacing: .02em;
  vertical-align: middle;
  position: relative; top: -.5em;
}
.hero-line{
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--cream);
}
.hero-sub{
  margin: 0 0 8px;
  max-width: 56ch;
  color: var(--text-soft);
  font-size: 16.5px;
  line-height: 1.6;
}

/* wax-seal CTAs: vertical stack with circular embossed disc + label */
.seals{ list-style: none; padding: 0; margin: 14px 0 4px; display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.seal{
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  border-left: 4px solid var(--emerald);
  border-radius: 4px;
  position: relative;
  transition: border-color .15s, background .15s, transform .12s;
}
.seal:hover{ background: rgba(46,207,148,.08); transform: translateX(2px); }
.seal-buy{ border-left-color: var(--gold); }
.seal-buy:hover{ background: rgba(239,192,90,.10); }
.seal-chart{ border-left-color: var(--emerald); }
.seal-x{ border-left-color: #ffffff66; }
.seal-x:hover{ background: rgba(255,255,255,.06); }
.seal-pump{ border-left-color: #d28b2c; }
.seal-pump:hover{ background: rgba(210,139,44,.10); }
.seal-disc{
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.18), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, var(--ink-3), var(--ink));
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.3), inset 0 2px 2px rgba(255,255,255,.08);
}
.seal-disc svg{ width: 22px; height: 22px; }
.seal-buy .seal-disc{ color: var(--gold); }
.seal-chart .seal-disc{ color: var(--emerald); }
.seal-pump .seal-disc{ color: #f0a04b; }
.seal-text{ display: flex; flex-direction: column; line-height: 1.25; }
.seal-text b{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--cream); }
.seal-text i{ font-style: normal; font-size: 12px; color: var(--text-mute); font-family: var(--font-mono); }

/* live pill */
.live-pill{
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(46,207,148,.10);
  border: 1px solid rgba(46,207,148,.28);
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .02em;
  margin-top: 8px;
}
.live-pill[data-state="warn"]{
  background: rgba(239,192,90,.10);
  border-color: rgba(239,192,90,.32);
  color: var(--gold);
}
.live-pill[data-state="err"]{
  background: rgba(255,98,80,.08);
  border-color: rgba(255,98,80,.34);
  color: #ff8773;
}
.live-text{ color: inherit; }
.is-disabled{ opacity: .55; cursor: not-allowed; }
.live-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(46,207,148,.45); }
  70%{ box-shadow: 0 0 0 8px rgba(46,207,148,0); }
  100%{ box-shadow: 0 0 0 0 rgba(46,207,148,0); }
}

/* ---------- MANIFESTO RIBBON --------------------------- */
.manifesto{
  margin: 24px 0 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 22px 36px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
  border-top: 1px solid rgba(46,207,148,.16);
  border-bottom: 1px solid rgba(239,192,90,.18);
  position: relative;
}
.manifesto::before,
.manifesto::after{
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(8,16,34,.9);
}
.manifesto::before{ left: -7px; }
.manifesto::after{ right: -7px; }
.m-cell{
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.m-k{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .1em;
  color: var(--text-mute);
}
.m-v{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--cream);
  line-height: 1;
}
.m-v-gold{ color: var(--gold); }
.m-v-emerald{ color: var(--emerald); }
.m-v-mono{ font-family: var(--font-mono); font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); color: var(--text); }
.m-sub{
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  color: var(--text-mute);
}
.m-divider{
  width: 1px; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
}

/* ---------- LEDGER (receipt-strip column) ------------- */
.ledger{ margin: 16px 0 56px; }
.ledger-head{ margin-bottom: 18px; max-width: 880px; }
.ledger-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .14em;
  color: var(--gold);
  text-transform: lowercase;
}
.ledger-head h3{
  margin: 6px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--cream);
  letter-spacing: -.01em;
  line-height: 1.12;
}
.ledger-sub{ margin: 0; color: var(--text-soft); font-size: 15px; max-width: 76ch; }
.ledger-sub code{ font-family: var(--font-mono); color: var(--emerald); background: rgba(46,207,148,.08); padding: 1px 6px; border-radius: 4px; }
.ledger-sub b{ color: var(--gold); }

.ledger-filter{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip{
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  color: var(--text-soft);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.chip:hover{ color: var(--text); border-color: rgba(255,255,255,.25); }
.chip.is-active{
  color: #07221a;
  background: var(--emerald);
  border-color: var(--emerald);
}

.receipts{
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.receipt-placeholder{
  padding: 36px;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--text-mute);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: var(--r-md);
}

/* a receipt looks like a tear-off strip with perforated edges */
.receipt{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px 24px;
  background:
    linear-gradient(180deg, #f4e8c8 0%, #ecd9a8 100%);
  color: #2a2410;
  border-radius: 4px;
  font-family: var(--font-mono);
  position: relative;
  box-shadow: 0 18px 30px -22px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(255,255,255,.6);
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, box-shadow .15s;
  animation: receipt-in .35s ease both;
}
@keyframes receipt-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.receipt:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 40px -22px rgba(0,0,0,.8),
              inset 0 1px 0 rgba(255,255,255,.6);
}
/* perforated edges left + right (tile so they fill any receipt height) */
.receipt::before, .receipt::after{
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 14px;
  background-image: radial-gradient(circle at 50% 50%, var(--ink) 3.5px, transparent 4.5px);
  background-size: 14px 14px;
  background-repeat: repeat-y;
}
.receipt::before{ left: -7px; }
.receipt::after{ right: -7px; }

.r-stamp{
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.4), transparent 70%),
    linear-gradient(180deg, var(--emerald), var(--emerald-dark));
  color: #053d2a;
  border: 2px solid #1d8a5e;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.25);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  flex-shrink: 0;
}
.r-stamp-big{ font-size: 14px; }
.r-stamp-amt{ font-size: 18px; }
.r-stamp.r-stamp-big{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #3a2b08; border-color: #7a5a18; }
.r-body{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.r-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.r-label{ font-size: 10.5px; letter-spacing: .12em; color: #6b5b22; text-transform: uppercase; }
.r-addr{ font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; color: #1d1605; }
.r-arrow{ color: var(--emerald-dark); font-weight: 700; }
.r-source{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46,207,148,.16);
  color: var(--emerald-dark);
  border: 1px solid rgba(25,165,114,.32);
  font-weight: 600;
}
.r-source-unknown{
  background: rgba(0,0,0,.06);
  color: #7a6a3a;
  border-color: rgba(0,0,0,.12);
  font-style: italic;
}
.r-meta{ display: flex; gap: 14px; font-size: 11px; color: #6b5b22; flex-wrap: wrap; align-items: center; }
.r-meta b{ color: #1d1605; font-weight: 700; }
.r-meta-cta{ color: var(--emerald-dark); font-weight: 600; margin-left: auto; opacity: 0; transition: opacity .15s; }
.receipt:hover .r-meta-cta{ opacity: 1; }
.r-aside{
  text-align: right;
  display: flex; flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 1px dashed rgba(0,0,0,.18);
}
.r-aside-k{ font-size: 10px; letter-spacing: .1em; color: #6b5b22; text-transform: uppercase; }
.r-aside-v{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--emerald-dark);
  line-height: 1;
}
.r-aside-u{ font-size: 11px; color: #6b5b22; font-family: var(--font-mono); }

.ledger-foot{
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .04em;
}

/* ---------- HOW IT WORKS: vertical flow timeline ------ */
.how{ padding: 40px 0 56px; max-width: 880px; }
.how-title{
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .14em;
  color: var(--gold); margin: 0 0 22px;
  text-transform: lowercase;
}
.flow{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.flow-step{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  position: relative;
}
.flow-step:last-child{ border-bottom: none; }
.flow-num{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 56px;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--emerald);
  text-stroke: 1.5px var(--emerald);
  letter-spacing: -.04em;
}
.flow-body b{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--cream);
  margin: 4px 0 6px;
}
.flow-body p{
  margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.6; max-width: 68ch;
}
.flow-body code{
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(46,207,148,.10);
  color: var(--emerald);
  padding: 1px 6px; border-radius: 4px;
}

/* ---------- FAQ folds --------------------------------- */
.asks{ padding: 18px 0 60px; max-width: 880px; }
.asks-title{
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .14em;
  color: var(--gold); margin: 0 0 18px;
  text-transform: lowercase;
}
.ask{
  padding: 18px 22px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border: 1px solid rgba(255,255,255,.06);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.ask b{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--cream);
  margin-bottom: 6px;
}
.ask p{ margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.6; }

/* ---------- footer ------------------------------------ */
.foot{
  margin: 24px 0 32px;
  padding: 22px 0 0;
  max-width: 880px;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-left: calc(var(--rail-w) + 24px);
  font-family: var(--font-mono);
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.7;
}
.foot p{ margin: 0 0 6px; }

/* ---------- toast ------------------------------------- */
.toast{
  position: fixed;
  bottom: 24px; left: 50%; transform: translate(-50%, 12px);
  padding: 10px 16px;
  background: var(--emerald);
  color: #07221a;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
  border-radius: 4px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
}
.toast.is-on{ opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive -------------------------------- */
@media (max-width: 920px){
  .rail{ flex-direction: row; bottom: auto; right: 0; height: 64px; width: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); padding: 0 16px; gap: 14px; }
  .rail-nav{ flex-direction: row; flex: 1; justify-content: center; }
  .rail-nav a{ writing-mode: horizontal-tb; transform: none; padding: 8px 10px; font-size: 11px; }
  .rail-foot{ flex-direction: row; border-top: none; border-left: 1px solid rgba(255,255,255,.06); padding-top: 0; padding-left: 12px; width: auto; }
  main{ padding-left: 18px; padding-right: 18px; padding-top: 76px; }
  .foot{ padding-left: 18px; }
  .hero{ grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .hero-cube{ max-width: 360px; margin: 0 auto; }
  .manifesto{ grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 22px; }
  .manifesto .m-divider{ display: none; }
  .receipt{ grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 18px; }
  .r-stamp{ width: 56px; height: 56px; }
  .r-stamp-amt{ font-size: 14px; }
  .r-aside{ grid-column: 1 / -1; text-align: left; border-left: none; border-top: 1px dashed rgba(0,0,0,.18); padding-left: 0; padding-top: 8px; flex-direction: row; gap: 14px; align-items: baseline; }
}
@media (max-width: 520px){
  .title-row{ font-size: 56px; }
  .title-tag{ display: block; margin-left: 0; margin-top: 6px; top: 0; }
  .seal{ grid-template-columns: 44px 1fr; padding: 10px 14px; }
  .seal-disc{ width: 36px; height: 36px; }
  .seal-disc svg{ width: 18px; height: 18px; }
  .ribbon-text{ font-size: 11px; }
  .flow-step{ grid-template-columns: 1fr; gap: 6px; }
  .flow-num{ font-size: 42px; }
}
px; }
}