/* =============================================================================
   rains.io  —  design tokens
   Institutional / audit-grade. Pure white, one accent, quiet everywhere except
   the single signed-chain-entry receipt in the hero.

   COLOR
     --ink      #0f172a   headings
     --body     #334155   body text
     --muted    #64748b   secondary / eyebrow / footer
     --line     #e2e8f0   hairline borders + section rules
     --accent   #1e40af   links, primary button  (the ONLY accent)
     --accent-d #1e3a8a   accent hover
     --bg       #ffffff   background, everywhere

   TYPE   family: system grotesque (sans) + system mono (receipt)
     modular scale, ratio 1.25, body base 17px
     --fs-eyebrow 12px (.75rem, fixed)      eyebrow
     --fs-micro   13px (.8125rem, fixed)    receipt, footer, trust-line, nav cta
     --fs-body    17px (1.0625rem)  step 0  body
     --fs-1       ~21px (1.33rem)   step+1  lead, h3
     --fs-2       ~27px (1.66rem)   step+2  h2 (small viewport floor)
     --fs-3       ~33px (2.07rem)   step+3  h2 (display)
     --fs-4       ~41px (2.59rem)   step+4  h1 (floor)
     --fs-5       ~52px (3.24rem)   step+5  h1 (cap)
     line-height: 1.65 body / 1.12 heading ; measure 68ch
     weights: 400 body, 600 strong/eyebrow, 650 heading
     tracking: eyebrow +.08em ; heading -.02em

   SPACE  (8px base)
     --sp-1 8  --sp-2 16  --sp-3 24  --sp-4 32  --sp-5 48  --sp-6 64
     --gap-half clamp(28,4vw,60)  -> section rule sits centred in a
                                     56px(mobile) .. 120px(desktop) gap

   LAYOUT
     --w-frame 1100  shared container (header, hero, sections, footer)
     --w-prose 760   prose block cap (left-aligned within the frame)
     --measure 68ch  paragraph measure
     --radius  2px
   ============================================================================= */

:root{
  --ink:#0f172a; --body:#334155; --muted:#64748b; --line:#e2e8f0;
  --accent:#1e40af; --accent-d:#1e3a8a; --bg:#ffffff;

  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --fs-eyebrow:.75rem; --fs-micro:.8125rem;
  --fs-body:1.0625rem; --fs-1:1.33rem; --fs-2:1.66rem; --fs-3:2.07rem; --fs-4:2.59rem; --fs-5:3.24rem;
  --lh-body:1.65; --lh-head:1.12; --measure:68ch;
  --w-body:400; --w-strong:600; --w-head:650;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:4rem;
  --gap-half:clamp(28px,4vw,60px);

  --w-frame:1100px; --w-prose:760px; --radius:2px;
}

*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}

html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--body);
  font-family:var(--font-sans); font-size:var(--fs-body);
  font-weight:var(--w-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}

a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
a:hover{color:var(--accent-d);}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius);}

/* ---- shared frame -------------------------------------------------------- */
.wrap{max-width:var(--w-frame); margin-inline:auto; padding-inline:24px;}

/* ---- typography ---------------------------------------------------------- */
h1,h2,h3{color:var(--ink); font-weight:var(--w-head); line-height:var(--lh-head); letter-spacing:-.02em; text-wrap:balance;}
h1{font-size:clamp(var(--fs-4),6vw,var(--fs-5)); max-width:20ch;}
h2{font-size:clamp(var(--fs-2),4vw,var(--fs-3)); max-width:26ch;}
h3{font-size:var(--fs-1);}
p{max-width:var(--measure);}
strong{font-weight:var(--w-strong); color:var(--ink);}
i{font-style:italic;}

.eyebrow{font-size:var(--fs-eyebrow); font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:var(--sp-3);}
.lead{font-size:var(--fs-1); line-height:1.4; color:var(--ink); max-width:60ch;}

/* ---- header -------------------------------------------------------------- */
.site-header{background:var(--bg); border-bottom:1px solid var(--line);}
.nav{max-width:var(--w-frame); margin-inline:auto; padding:var(--sp-3) 24px; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);}
.nav-brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink);}
.nav-brand:hover{color:var(--ink);}
.nav-brand img{height:26px; width:26px; display:block;}
.wordmark{font-size:var(--fs-1); font-weight:var(--w-head); letter-spacing:-.02em; color:var(--ink);}
.nav-cta{font-size:var(--fs-micro); font-weight:600; color:var(--accent); text-decoration:none; white-space:nowrap;}
.nav-cta:hover{color:var(--accent-d);}

/* ---- hero ---------------------------------------------------------------- */
.hero > .wrap{padding-top:clamp(48px,7vw,88px);}
.hero h1{margin-top:0;}
.hero .lead{margin-top:var(--sp-4);}
.hero p:not(.eyebrow):not(.lead):not(.trust-line){margin-top:var(--sp-3);}
.actions{margin-top:var(--sp-5);}
.trust-line{font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--muted); margin-top:var(--sp-4); max-width:none;}
.trust-line .dot{color:var(--line); margin:0 .5rem;}

/* ---- the one signature element: a signed chain entry --------------------- */
.receipt{margin-top:var(--sp-5); max-width:var(--w-prose); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-3);}
.receipt-line{display:block; font-family:var(--font-mono); font-size:var(--fs-micro); line-height:1.5; color:var(--body); white-space:pre; overflow-x:auto;}
.receipt-status{font-family:var(--font-mono); font-size:var(--fs-micro); color:var(--accent); max-width:none; margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line);}
.receipt-status span{font-weight:600;}

/* ---- sections (white, separated by a hairline rule) ---------------------- */
.section{margin-top:var(--gap-half);}
.section > .wrap{border-top:1px solid var(--line); padding-top:var(--gap-half);}
.section h2 + p,
.section h2 + .lead{margin-top:var(--sp-4);}
.section p + p{margin-top:var(--sp-3);}

/* the four "questions": bold question line, plain answer, 32px apart */
.qa{max-width:var(--w-prose);}
.qa > p{margin-top:var(--sp-4);}
.qa > p:first-child{margin-top:var(--sp-4);}
.qa > p strong{display:block; margin-bottom:var(--sp-1); color:var(--ink);}

/* ---- buttons (primary only) ---------------------------------------------- */
.btn{display:inline-block; background:var(--accent); color:#fff; font-size:var(--fs-body); font-weight:600; line-height:1.2; padding:.75rem 1.5rem; border:1px solid var(--accent); border-radius:var(--radius); text-decoration:none;}
.btn:hover{background:var(--accent-d); border-color:var(--accent-d); color:#fff;}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* ---- footer (structure unchanged) ---------------------------------------- */
.site-footer{margin-top:var(--gap-half); border-top:1px solid var(--line); background:var(--bg); font-size:var(--fs-micro); color:var(--muted);}
.footer-inner{max-width:var(--w-frame); margin-inline:auto; padding:var(--sp-5) 24px; display:flex; flex-direction:column; gap:var(--sp-2);}
.footer-extras{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center;}
.site-footer a{color:var(--muted); text-decoration:none;}
.site-footer a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.footer-copyright a{text-decoration:underline; text-underline-offset:2px;}
.sep{color:var(--line);}

/* ---- motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important;}
}