/* Rivu — shared design tokens and base styles.
   Used by index.html, example.html, order.html and thank-you.html. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0F1E19;
  --ink-soft:#4A5A53;
  --forest:#0E5136;
  --forest-deep:#062A1C;
  --sage:#E4F0E7;
  --mist:#DDE4DC;
  --cream:#FBF7EE;
  --paper:#fff;
  --gold:#F2A73B;
  --gold-deep:#B87512;
  --clay:#C0431F;
  --clay-soft:#FBEAE2;
  --maxw:1080px;
  --r:14px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;padding-bottom:74px
}
@media(min-width:768px){body{padding-bottom:0}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}

/* ---------- SECTIONS ---------- */
section{padding:52px 0}
@media(min-width:768px){section{padding:72px 0}}
.s-cream{background:var(--cream)}
.s-white{background:var(--paper)}
.s-dark{background:var(--forest-deep);color:#EAF2ED}
.s-green{background:var(--forest);color:#EAF2ED}
.s-gold{background:var(--gold)}

/* ---------- TYPE ---------- */
h1{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(2.05rem,6.4vw,3.7rem);line-height:1.03;letter-spacing:-.043em
}
h2{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(1.7rem,5.2vw,2.85rem);line-height:1.06;letter-spacing:-.038em;
  margin-bottom:14px
}
h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.kicker{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;
  padding:5px 11px;border-radius:3px;background:var(--sage);color:var(--forest)
}
.s-dark .kicker,.s-green .kicker{background:rgba(242,167,59,.16);color:var(--gold)}
.s-gold .kicker{background:rgba(15,30,25,.12);color:var(--ink)}
.lede{font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.45;font-weight:500;max-width:30ch}
.s-dark .lede,.s-green .lede{color:#CFE0D6}
.hl{background:linear-gradient(180deg,transparent 58%,var(--gold) 58%,var(--gold) 94%,transparent 94%);padding:0 2px}
.big{
  font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-weight:600;
  letter-spacing:-.055em;line-height:.92
}
p.small{font-size:.95rem;color:var(--ink-soft);max-width:44ch}
.s-dark p.small,.s-green p.small{color:#A9BFB2}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.015em;
  background:var(--gold);color:#241503;border:none;border-radius:8px;
  padding:15px 24px;text-decoration:none;cursor:pointer;
  box-shadow:0 3px 0 var(--gold-deep);transition:.12s
}
.btn:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--gold-deep)}
.btn:active{transform:translateY(3px);box-shadow:none}
.btn.lg{font-size:1.1rem;padding:17px 30px}
.btn-note{font-size:.83rem;color:var(--ink-soft);margin-top:11px;font-family:'IBM Plex Mono',monospace}
.s-dark .btn-note,.s-green .btn-note{color:#8FA89A}
.tlink{color:var(--forest);font-weight:700;text-decoration:none;border-bottom:2px solid var(--gold);font-size:.95rem}
.s-dark .tlink,.s-green .tlink{color:var(--gold);border-bottom-color:rgba(242,167,59,.4)}


/* ---------- IMAGES ---------- */
img{max-width:100%;height:auto}

/* ---------- SCREENSHOT CARD ---------- */
/* Window chrome for a product screenshot. index.html and example.html each
   kept a copy of this and had already drifted — one set height:auto on the
   image and one didn't, which is how example.html shipped stretched
   screenshots. Page-only extras (the caption strip, dark-section colours)
   stay in the page that needs them. */
.shot{border-radius:12px;overflow:hidden;border:1px solid var(--mist);
  box-shadow:0 26px 60px -34px rgba(6,42,28,.6);background:#fff}
.shot-bar{background:#EEF1EA;padding:8px 12px;display:flex;gap:5px;border-bottom:1px solid var(--mist)}
.shot-bar i{width:8px;height:8px;border-radius:50%;background:#C9D2C7;display:block}
.shot img{width:100%;height:auto;display:block}

/* ---------- VERDICT TILE ---------- */
/* One cell of a scorecard. The grid around it stays page-side, because the
   column counts differ (.vgrid on index, .vgrid4 and .vgrid3 on example);
   the cell itself is the same object on both. */
.vcell{background:var(--forest-deep);padding:22px 20px}
.vcell .l{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8CBCA3;display:block;margin-bottom:9px}
.vcell .big{font-size:clamp(1.75rem,5.6vw,2.35rem);color:#fff;display:block}
.vcell small{display:block;font-size:.78rem;color:#8CBCA3;margin-top:7px}
.vcell.hit{background:var(--clay)}
.vcell.hit .l,.vcell.hit small{color:#FFD9C9}
.vcell.hit .big{color:#fff}
.vcell.ok{background:var(--forest)}
.vcell.ok .l,.vcell.ok small{color:#9DD3B4}
.vcell.ok .big{color:#fff}

/* ---------- PUNCHLINE ---------- */
/* 24ch is right for index.html, where this sits in a narrow hero column.
   example.html is one wide column and widens it. */
.punch{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:clamp(1.25rem,3.8vw,1.85rem);line-height:1.18;letter-spacing:-.032em;
  margin-top:26px;max-width:24ch}
.punch.c{color:var(--clay)}

/* ---------- FOOTER ---------- */

.reveal{opacity:0;transform:translateY(14px);transition:.55s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}