/* ═══════════════════════════════════════════════════════════════
   STORY PAGES — field manual on paper
   /how-it-works, /buy-tokens and the home video band.
   Paper + ink + deep green; lime only where money or power moves.
   Figures use the system monospace so amounts read like an M-PESA message.
   ═══════════════════════════════════════════════════════════════ */

.st {
  --paper: #F6F2EC;
  --paper-2: #EDE8DF;
  --paper-3: #E0D9CE;
  --ink: #18120A;
  --ink-2: #3D3528;
  --ink-3: #6B6055;
  --green: #0B5F2A;
  --green-2: #15803d;
  --lime: #4DFF88;
  --lcd: #C9D8B6;
  --lcd-ink: #1F2A17;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(1rem, 4vw, 3rem);
  --space: clamp(3.5rem, 8vw, 7rem);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}
.dark .st {
  --paper: #12100C;
  --paper-2: #1B1813;
  --paper-3: #2A251D;
  --ink: #F3EEE6;
  --ink-2: #D6CEC2;
  --ink-3: #A79D90;
  --green: #4ADE80;
  --green-2: #86EFAC;
  --lcd: #2E3A26;
  --lcd-ink: #D9F2C4;
}

.st-shell { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.st-sec { padding: var(--space) 0; }
.st-sec + .st-sec { border-top: 1px solid var(--paper-3); }
.st-sec--ink { background: var(--ink); color: var(--paper); }
.st-sec--ink .st-kicker { color: var(--lime); }
.st-sec--ink .st-lede { color: color-mix(in srgb, var(--paper) 80%, transparent); }

.st-kicker {
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--green); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem;
}
.st-kicker::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
.st-h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.6rem); font-weight: 900; line-height: .95;
  letter-spacing: -.045em; margin: 0 0 1.5rem; text-wrap: balance;
}
.st-h1 em { font-style: normal; color: var(--green); }
.st-h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); font-weight: 900; line-height: 1;
  letter-spacing: -.035em; margin: 0 0 1.25rem; text-wrap: balance;
}
.st .st-h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .5rem; }
.st-lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 36rem; margin: 0 0 1.25rem; }
.st-body { font-size: 1rem; line-height: 1.7; color: var(--ink-2); max-width: 40rem; }
.st-body + .st-body { margin-top: 1rem; }
.st-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── Hero: words left, phone right ─────────────────────────────── */
.st-hero { padding: clamp(3rem, 8vw, 6.5rem) 0 var(--space); }
.st-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .st-hero-grid { grid-template-columns: 1.25fr .75fr; } }
.st-answer {
  border-left: 4px solid var(--lime); background: var(--paper-2); padding: 1.1rem 1.25rem;
  font-size: 1.05rem; line-height: 1.55; max-width: 34rem; margin: 0 0 2rem;
}
.st-answer strong { color: var(--green); }
.st-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.st-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.4rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: var(--green); color: #fff; border: 2px solid var(--green);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.st-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.st-btn:active { transform: translate(0, 0); box-shadow: none; }
.st-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.st-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.st-sec--ink .st-btn--ghost { color: var(--paper); border-color: var(--paper); }
.st-sec--ink .st-btn:hover { box-shadow: 4px 4px 0 var(--lime); }

/* ── Video player: a phone on a paper card ─────────────────────── */
.vp { margin: 0; justify-self: center; width: min(100%, 320px); position: relative; }
.vp::before {
  content: ""; position: absolute; inset: 6% -10% -4% -10%; background: var(--paper-3);
  transform: rotate(-3deg); z-index: 0;
}
.vp-frame {
  position: relative; z-index: 1; border: 10px solid var(--ink); border-radius: 30px; overflow: hidden;
  background: var(--ink); box-shadow: 0 30px 60px -25px rgba(24, 18, 10, .55);
  aspect-ratio: 9 / 16;
}
.vp-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-cap { position: relative; z-index: 1; margin-top: 1rem; font-size: .85rem; color: var(--ink-3); text-align: center; }
.vp-cap strong { display: block; color: var(--ink); font-size: .95rem; }
.vp-tx { position: relative; z-index: 1; margin-top: .75rem; font-size: .9rem; }
.vp-tx summary {
  cursor: pointer; font-weight: 700; color: var(--green); text-align: center; list-style: none; padding: .5rem;
}
.vp-tx summary::-webkit-details-marker { display: none; }
.vp-tx summary::after { content: " +"; }
.vp-tx[open] summary::after { content: " −"; }
.vp-tx summary:focus-visible { outline: 2px solid var(--green); }
.vp-tx p { margin: 0; padding: .35rem 0; border-bottom: 1px dashed var(--paper-3); line-height: 1.5; color: var(--ink-2); }
.vp-tx[open] { background: var(--paper); padding: .5rem 1rem 1rem; border: 1px solid var(--paper-3); }

/* ── Flow diagram ──────────────────────────────────────────────── */
.st-flow { margin-top: 2.5rem; background: var(--paper-2); border: 1px solid var(--paper-3); padding: clamp(1rem, 3vw, 2rem); }
.st-flow svg { display: block; width: 100%; height: auto; }
.st-flow .lbl { font: 800 13px/1 Inter, system-ui, sans-serif; fill: var(--ink); letter-spacing: .02em; }
.st-flow .sub { font: 500 11px/1 Inter, system-ui, sans-serif; fill: var(--ink-3); }
.st-flow .amt { font: 700 14px/1 var(--mono); fill: var(--green); }
.st-flow .box { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.st-flow .box--ink { fill: var(--ink); }
.st-flow .box--ink + .lbl, .st-flow .on-ink { fill: var(--paper); }
.st-flow .box--lime { fill: var(--lime); stroke: var(--ink); }
.st-flow .power { stroke: var(--ink); stroke-width: 3; fill: none; }
.st-flow .money { stroke: var(--green-2); stroke-width: 3; fill: none; stroke-dasharray: 8 7; animation: st-run 1.4s linear infinite; }
.st-flow .lane { font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .22em; fill: var(--ink-3); }
@keyframes st-run { to { stroke-dashoffset: -30; } }
.st-legend { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: .85rem; color: var(--ink-3); }
.st-legend span::before { content: ""; display: inline-block; width: 1.5rem; height: 3px; margin-right: .5rem; vertical-align: middle; background: var(--ink); }
.st-legend .m::before { background: repeating-linear-gradient(90deg, var(--green-2) 0 8px, transparent 8px 15px); }

/* ── Receipt: the worked example ───────────────────────────────── */
.st-receipt-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .st-receipt-grid { grid-template-columns: 1fr 1fr; } }
.st-receipt {
  background: #fffdf8; color: #18120A; font-family: var(--mono); font-size: .95rem;
  padding: 1.75rem 1.5rem 3.75rem; box-shadow: 0 18px 40px -22px rgba(24, 18, 10, .45);
  transform: rotate(1.2deg); position: relative;
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x;
          mask: radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x;
}
.st-receipt h3 { font-family: Inter, system-ui, sans-serif; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 1rem; color: #0B5F2A; }
.st-row { display: flex; gap: .5rem; padding: .3rem 0; }
.st-row span:first-child { flex: 1; display: flex; }
.st-row span:first-child::after { content: ""; flex: 1; border-bottom: 1px dotted #b8ae9f; margin: 0 .4rem .3rem; }
.st-row--total { border-top: 2px solid #18120A; margin-top: .6rem; padding-top: .7rem; font-weight: 700; }
.st-row--fee { color: #6B6055; }
.st-row--out { color: #0B5F2A; font-weight: 700; font-size: 1.1rem; }
.st-stamp {
  position: absolute; right: 1.25rem; bottom: 1.1rem; transform: rotate(-6deg);
  border: 2px solid #0B5F2A; color: #0B5F2A; padding: .25rem .5rem; font: 800 .65rem/1 Inter, system-ui, sans-serif;
  letter-spacing: .15em; text-transform: uppercase; opacity: .8;
}
.st-note { font-size: .8rem; color: var(--ink-3); margin-top: 1.5rem; }

/* ── Two cases side by side ────────────────────────────────────── */
.st-split { display: grid; gap: 1px; background: var(--paper-3); border: 1px solid var(--paper-3); margin-top: 2rem; }
@media (min-width: 760px) { .st-split { grid-template-columns: 1fr 1fr; } }
.st-split > div { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); }
.st-tag { display: inline-block; font: 800 .68rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .55rem; background: var(--ink); color: var(--paper); margin-bottom: 1rem; }
.st-tag--raw { text-transform: none; font-family: var(--mono); letter-spacing: .04em; }
.st-tag--lime { background: var(--lime); color: #18120A; }

/* ── Numbered steps on a rail ──────────────────────────────────── */
.st-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: st; display: grid; gap: 0; }
.st-steps li {
  counter-increment: st; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem;
  padding: 1.4rem 0; border-top: 1px solid var(--paper-3);
}
.st-steps li::before {
  content: counter(st, decimal-leading-zero); font: 900 2.4rem/1 var(--mono); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--green);
}
.st-steps li:hover::before { color: var(--green); }
.st-sec--ink .st-steps li { border-top-color: rgba(246, 242, 236, .18); }
.st-sec--ink .st-steps li::before { -webkit-text-stroke-color: var(--lime); }
.st-sec--ink .st-steps li:hover::before { color: var(--lime); }
.st-steps p { margin: 0; color: var(--ink-2); line-height: 1.6; }
@media (min-width: 900px) {
  .st-steps--2col { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .st-steps--3col { grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; }
  .st-steps--3col li { grid-template-columns: 1fr; }
}
.st-steps--compact li { grid-template-columns: 3rem 1fr; padding: 1rem 0; gap: .75rem; }
.st-steps--compact li::before { font-size: 1.6rem; }
.st .st-steps--compact .st-h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.st-steps--compact p { font-size: .93rem; }
.st-video-side { display: grid; order: -1; }
@media (min-width: 900px) { .st-video-side { order: 0; position: sticky; top: 6rem; } }
.st-cover { color: inherit !important; font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }

/* ── Meter screen: lights, codes, messages ─────────────────────── */
.st-meter { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .st-meter { grid-template-columns: repeat(3, 1fr); } }
.st-panel { background: var(--paper-2); border: 1px solid var(--paper-3); padding: 1.5rem; }
.st .st-panel h3 { font-weight: 800; line-height: 1.2; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1rem; color: var(--ink-3); }
.st-lcd {
  font-family: var(--mono); background: var(--lcd); color: var(--lcd-ink); padding: .55rem .75rem;
  border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25); font-weight: 700; letter-spacing: .06em;
  min-width: 6.5rem; display: inline-block; text-align: center;
}
.st-kv { display: grid; grid-template-columns: auto 1fr; gap: .75rem 1rem; align-items: center; margin: 0; }
.st-kv dt { margin: 0; }
.st-kv dd { margin: 0; color: var(--ink-2); line-height: 1.45; }
.st-dot { width: .85rem; height: .85rem; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px var(--paper); }
.st-dot--green { background: #22c55e; box-shadow: 0 0 10px #22c55e; }
.st-dot--red { background: #ef4444; box-shadow: 0 0 10px #ef4444; }
.st-dot--blink { background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: st-blink 1s steps(1) infinite; }
@keyframes st-blink { 50% { opacity: .2; box-shadow: none; } }

/* ── Cards that route each reader ──────────────────────────────── */
.st-routes { display: grid; gap: 1px; background: var(--paper-3); border: 1px solid var(--paper-3); }
@media (min-width: 760px) { .st-routes { grid-template-columns: repeat(3, 1fr); } }
.st-route {
  background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .75rem; transition: background .25s var(--ease);
}
.st-route:hover { background: var(--paper-2); }
.st-route:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.st-route .who { font: 800 .7rem/1 Inter, system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.st-route .big { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.st-route .go { margin-top: auto; font-weight: 800; font-size: .85rem; color: var(--ink); }
.st-route .go::after { content: " →"; display: inline-block; transition: transform .25s var(--ease); }
.st-route:hover .go::after { transform: translateX(4px); }

/* ── Before / after ────────────────────────────────────────────── */
.st-vs { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .st-vs { grid-template-columns: 1fr 1fr; } }
.st-vs > div { padding: clamp(1.5rem, 3vw, 2.25rem); }
.st-before { background: var(--paper-2); border: 1px dashed var(--ink-3); }
.st-before ul, .st-after ul { margin: 0; padding: 0; list-style: none; line-height: 1.6; color: var(--ink-2); display: grid; gap: .7rem; }
.st-before li, .st-after li { display: grid; grid-template-columns: 1.4rem 1fr; }
.st-before li::before { content: "✕"; color: var(--ink-3); font-weight: 800; }
.st-after li::before { content: "✓"; color: var(--lime); font-weight: 900; }
.st-after { background: var(--green); color: #fff; }
.st-after ul { color: rgba(255, 255, 255, .9); }
.st-after .st-tag { background: var(--lime); color: #18120A; }

@media (prefers-reduced-motion: reduce) {
  .st-flow .money, .st-dot--blink { animation: none; }
  .st-btn, .st-route, .st-route .go::after { transition: none; }
}

/* Plain feature lists inside panels (/products, /services, /free-estimate) */
.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li { padding: .5rem 0; border-top: 1px solid var(--paper-3); font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.st-list li:first-child { border-top: 0; padding-top: 0; }
.st-meter--2 { margin-top: 2rem; }
@media (min-width: 760px) { .st-meter--2 { grid-template-columns: repeat(2, 1fr); } }