/* ===========================================================================
   Support Numainda — "On the record"

   The page is built like an operations record. Deep forest field (from the
   logo's darkest ink) carries the argument; white record-cards carry the
   evidence. Every claim that can be evidenced is followed by a provenance
   strip — a small monospace receipt. That device, and the FAQ rendered as an
   actual exchange, are the two things this page should be remembered by.

   Palette is sampled from the logo: forest #004e33, green #038647,
   navy #061845.
   =========================================================================== */

:root{
  --forest:#06301f;          /* the field */
  --forest-deep:#032018;     /* header, footer */
  --forest-soft:#0b3d28;     /* raised panels on the field */
  --forest-line:#17543a;     /* hairlines on the field */

  --green:#0e8a47;           /* brand green */
  --green-d:#0a6e39;         /* green text on light — 6.4:1 */
  --green-bright:#2fcb6c;    /* accent on the field — 5.3:1 */

  --bone:#f4f6f1;            /* paper */
  --paper:#ffffff;
  --ink:#0e1a16;
  --ink-soft:#4a5a52;
  --ink-faint:#6d7d74;
  --rule:#dfe5dc;            /* hairline on light */

  --on-field:#e8efe8;        /* body text on the field */
  --on-field-soft:#9fb6a8;

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --shell:1180px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green-d);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px;border-radius:3px}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type roles ---------------------------------------------------- */
.d1,.d2,.d3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;line-height:1.08}
.d1{font-size:clamp(2.5rem,5.6vw,4.3rem)}
.d2{font-size:clamp(1.9rem,3.4vw,2.85rem);line-height:1.12}
.d3{font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.2}
.lede{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:var(--ink-soft)}

/* the monospace utility voice: field labels, rule ids, receipts */
.tag{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- the signature device: a provenance receipt -------------------- */
.prov{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;
  color:var(--ink-faint);
  padding-top:.85rem;margin-top:1rem;border-top:1px solid var(--rule);
}
.prov .ticks{display:inline-flex;color:var(--green-d);flex:0 0 auto}
.prov .ticks svg{width:17px;height:11px;display:block}
.prov .ticks svg:last-child{margin-left:-7px}
.on-field .prov{color:var(--on-field-soft);border-top-color:var(--forest-line)}
.on-field .prov .ticks{color:var(--green-bright)}

/* ---------- buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-size:1rem;font-weight:500;
  padding:.9rem 1.5rem;border:1px solid transparent;border-radius:2px;
  cursor:pointer;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-solid{background:var(--green);color:#fff}
.btn-solid:hover{background:var(--green-d)}
.btn-line{background:transparent;color:var(--on-field);border-color:var(--forest-line)}
.btn-line:hover{border-color:var(--green-bright);color:var(--green-bright)}
.btn-dark{background:var(--forest);color:var(--bone)}
.btn-dark:hover{background:var(--forest-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--green-d);color:var(--green-d)}

/* ---------- the field ----------------------------------------------------- */
.on-field{
  background:var(--forest);
  color:var(--on-field);
  /* faint column rules: the record-sheet motif, not decoration for its own sake */
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.028) 0 1px,transparent 1px 84px);
}
.on-field .d1,.on-field .d2,.on-field .d3{color:#fff}
/* `:not(.btn)` matters: a bare `.on-field a` out-ranks `.btn-solid` and would
   repaint the solid button's label green-on-green. */
.on-field a:not(.btn){color:var(--green-bright)}

/* ---------- header -------------------------------------------------------- */
.masthead{background:var(--forest-deep);border-bottom:1px solid var(--forest-line)}
.masthead .shell{
  display:flex;align-items:center;gap:1.5rem;
  min-height:74px;padding-block:.75rem;
}
.wordmark{flex:0 0 auto;display:block}
.wordmark img{height:48px;width:auto}
.mast-nav{display:flex;gap:1.75rem;margin-left:auto}
.mast-nav a{
  color:var(--on-field);text-decoration:none;font-size:.95rem;
  padding-block:.25rem;border-bottom:1px solid transparent;
}
.mast-nav a:hover{color:#fff;border-bottom-color:var(--green-bright)}
.mast-call{
  display:flex;flex-direction:column;line-height:1.25;text-align:right;
  padding-left:1.5rem;border-left:1px solid var(--forest-line);
}
.mast-call .tag{color:var(--on-field-soft)}
.mast-call a{
  font-family:var(--mono);font-size:1rem;font-weight:500;
  color:#fff;text-decoration:none;
}
.mast-call a:hover{color:var(--green-bright)}
.mast-toggle{
  display:none;margin-left:auto;background:none;cursor:pointer;
  border:1px solid var(--forest-line);border-radius:2px;padding:.55rem .65rem;
}
.mast-toggle svg{display:block;width:20px;height:20px;stroke:var(--on-field)}

/* ---------- hero ---------------------------------------------------------- */
.hero{padding-block:clamp(3.5rem,7vw,6rem) clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.hero .eyebrow{color:var(--green-bright);display:block;margin-bottom:1.5rem}
.hero .d1 em{font-style:normal;color:var(--green-bright)}
.hero p.lede{color:var(--on-field);max-width:36em;margin-top:1.5rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* the status rail: three facts, stated as record fields rather than as stats.
   It sits below the hero grid, spanning both columns, so the rule under it
   closes the whole section rather than just the copy column. */
.rail{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2.75rem,5vw,4rem);padding-top:1.5rem;
  border-top:1px solid var(--forest-line);
}
.rail dt{color:var(--green-bright);margin-bottom:.35rem}
.rail dd{font-size:.95rem;color:var(--on-field-soft);max-width:26ch}

/* ---------- record card (the evidence object) ----------------------------- */
.rec-wrap{margin:0}
.rec-wrap figcaption{
  margin-top:.85rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--on-field-soft);
}
.record{
  background:var(--paper);color:var(--ink);
  border-radius:4px;padding:1.5rem 1.5rem 1.25rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.65);
}
.record .head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-bottom:.9rem;margin-bottom:1.1rem;border-bottom:1px solid var(--rule);
}
.record .head .tag{color:var(--green-d)}
.record .head .who{font-weight:600;font-size:.95rem}
.record .msg{font-size:1rem;line-height:1.6}
.record .msg b{font-weight:600}
.record .line{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--rule);
  font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);
}
.record .replies{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.record .replies span{
  font-size:.85rem;padding:.45rem .8rem;border-radius:2px;
  border:1px solid var(--rule);color:var(--ink-soft);
}
.record .replies span:first-child{background:var(--green);border-color:var(--green);color:#fff;font-weight:500}

/* ---------- generic section scaffolding ----------------------------------- */
.band{padding-block:clamp(3.5rem,7vw,6rem)}
.band-head{max-width:44rem;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
.band-head .tag{color:var(--green-d);display:block;margin-bottom:1rem}
.on-field .band-head .tag{color:var(--green-bright)}
.band-head .d2{margin-bottom:.85rem}
.band-paper{background:var(--paper)}

/* ---------- ledger: what we send / what we never send --------------------- */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.ledger-col{border-top:2px solid var(--ink);padding-top:1.25rem}
.ledger-col.never{border-top-color:var(--rule)}
.ledger-col h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin-bottom:1.25rem}
.ledger-col.never h3{color:var(--ink-faint)}
.ledger-col ul{list-style:none}
.ledger-col li{
  display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;
  padding-block:.9rem;border-bottom:1px solid var(--rule);
  font-size:.98rem;
}
.ledger-col li:last-child{border-bottom:none}
.ledger-col .m{font-family:var(--mono);font-size:.9rem;line-height:1.75}
.ledger-col.sends .m{color:var(--green-d)}
.ledger-col.never .m{color:var(--ink-faint)}
.ledger-col.never li{color:var(--ink-soft)}

/* ---------- sequence: this content genuinely is ordered ------------------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;counter-reset:step}
.step{position:relative;padding-top:2.75rem}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--green-d);
}
.step::after{
  content:"";position:absolute;top:1.9rem;left:0;right:-1.5rem;height:1px;background:var(--rule);
}
.step:last-child::after{right:0}
.step h3{font-family:var(--display);font-weight:500;font-size:1.2rem;line-height:1.25;margin-bottom:.5rem}
.step p{font-size:.95rem;color:var(--ink-soft)}

/* ---------- rule register ------------------------------------------------- */
.register{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,4vw,3.5rem)}
.rule{
  display:grid;grid-template-columns:3.6rem 1fr;gap:1rem;
  padding-block:1.35rem;border-top:1px solid var(--forest-line);
}
.rule .id{font-family:var(--mono);font-size:.78rem;color:var(--green-bright);padding-top:.15rem}
.rule h3{font-family:var(--sans);font-size:1rem;font-weight:600;color:#fff;margin-bottom:.3rem}
.rule p{font-size:.93rem;color:var(--on-field-soft);line-height:1.55}

/* ---------- the signature: FAQ as an actual exchange ---------------------- */
.xchg{display:flex;flex-direction:column;gap:clamp(2rem,4vw,3rem)}
.turn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.turn .ask .tag{color:var(--ink-faint);display:block;margin-bottom:.75rem}
.turn .ask h3{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.2}
.turn .reply{
  background:var(--paper);border-radius:4px;padding:1.5rem 1.6rem 1.25rem;
  border:1px solid var(--rule);
}
.turn .reply p{font-size:1rem;color:var(--ink-soft)}
.turn .reply p+p{margin-top:.75rem}

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .reveal.seen{opacity:1;transform:none}
}

/* ---------- contact as a record ------------------------------------------ */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.fields{border-top:1px solid var(--rule)}
.fields div{
  display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;
  padding-block:1.15rem;border-bottom:1px solid var(--rule);
}
.fields dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);padding-top:.3rem}
.fields dd{font-size:1.05rem;font-weight:500}
.fields dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.fields dd a:hover{color:var(--green-d);border-bottom-color:var(--green-d)}
.fields address{font-style:normal;font-weight:400;font-size:1rem;line-height:1.55}
.callout{background:var(--forest);color:var(--on-field);border-radius:4px;padding:clamp(1.75rem,3vw,2.25rem)}
.callout h3{font-family:var(--display);font-weight:500;font-size:1.4rem;color:#fff;margin-bottom:.6rem}
.callout p{font-size:.98rem;color:var(--on-field-soft);margin-bottom:1.5rem}
.callout .btn{width:100%}
.callout .btn+.btn{margin-top:.6rem}

/* ---------- footer -------------------------------------------------------- */
.colophon{background:var(--forest-deep);color:var(--on-field-soft);padding-block:clamp(3rem,5vw,4rem) 2rem}
.colophon-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:2.5rem}
.colophon img{height:46px;width:auto;margin-bottom:1.25rem}
/* scoped to the grid: an unscoped `.colophon p` also out-ranks `.disclaimer`
   and would clamp the full-width legal note to 34ch */
.colophon-grid p{font-size:.95rem;max-width:34ch}
.colophon h4{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.colophon a{display:block;color:var(--on-field-soft);text-decoration:none;font-size:.95rem;margin-bottom:.6rem}
.colophon a:hover{color:#fff}
.colophon address{font-style:normal;font-size:.95rem;line-height:1.6;margin-block:.4rem 1rem}
.colophon-foot{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--forest-line);
  font-family:var(--mono);font-size:.75rem;
}
.disclaimer{margin-top:1.25rem;font-size:.78rem;line-height:1.65;color:#7e9488;max-width:88ch}

/* ---------- floating WhatsApp -------------------------------------------- */
.wa-fab{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;
  width:54px;height:54px;border-radius:50%;
  background:var(--green);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 12px 28px -8px rgba(6,48,31,.6);
  transition:transform .18s ease,background .18s ease;
}
.wa-fab:hover{transform:translateY(-2px);background:var(--green-d)}
.wa-fab svg{width:27px;height:27px}

/* ---------- legal pages --------------------------------------------------- */
.doc-head{padding-block:clamp(2.75rem,5vw,4rem)}
.doc-head .crumb{font-family:var(--mono);font-size:.75rem;color:var(--on-field-soft);margin-bottom:1rem}
.doc-head .crumb a{color:var(--green-bright);text-decoration:none}
.doc-head p{color:var(--on-field-soft);margin-top:.75rem;max-width:52ch}
.doc{padding-block:clamp(2.5rem,5vw,4rem);background:var(--paper)}
/* The reading column is capped for line length but stays on the shell's left
   edge, so it lines up with the masthead and the page title above it. */
.doc-shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.doc-shell>*{max-width:46rem}
.doc-nav{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-family:var(--mono);font-size:.78rem}
.doc-nav a{text-decoration:none;border-bottom:1px solid var(--rule)}
.doc-nav a:hover{border-bottom-color:var(--green-d)}
.doc-body{margin-top:2.25rem}
.doc-body .stamp{font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:1px solid var(--rule)}
.doc-body h2{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1.25;margin:2.5rem 0 .75rem}
.doc-body h2:first-of-type{margin-top:0}
.doc-body p{color:var(--ink-soft);margin-bottom:.9rem}
.doc-body ul{list-style:none;margin-block:.5rem 1.25rem}
.doc-body li{position:relative;padding-left:1.5rem;margin-bottom:.6rem;color:var(--ink-soft)}
.doc-body li::before{content:"";position:absolute;left:0;top:.7em;width:.5rem;height:1px;background:var(--green)}
.doc-body li b{color:var(--ink);font-weight:600}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .ledger,.register,.contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .step:nth-child(2)::after{right:0}
  .turn{grid-template-columns:1fr;gap:1.25rem}
  .colophon-grid{grid-template-columns:1fr 1fr}
  .rule:nth-child(2){border-top:1px solid var(--forest-line)}
}
@media (max-width:720px){
  body{font-size:16px}
  .mast-nav,.mast-call{display:none}
  .mast-toggle{display:block}
  .masthead.open .mast-nav{
    display:flex;flex-direction:column;gap:.25rem;
    flex-basis:100%;order:3;margin:.5rem 0 .25rem;
    padding-top:1rem;border-top:1px solid var(--forest-line);
  }
  .masthead.open .mast-call{
    display:flex;order:4;flex-basis:100%;text-align:left;
    padding:0 0 .5rem;border-left:none;
  }
  .masthead .shell{flex-wrap:wrap}
  .rail{grid-template-columns:1fr;gap:1.25rem}
  .steps{grid-template-columns:1fr}
  .step{padding-top:2.25rem}
  .step::after{display:none}
  .fields div{grid-template-columns:1fr;gap:.25rem}
  .colophon-grid{grid-template-columns:1fr;gap:2rem}
}