/* ============================================================
   osatoumweni.com — design tokens and primitives
   ------------------------------------------------------------
   TYPEFACE PAIRING RATIONALE
   Display: Archivo Variable. A modern grotesque with a real width
   axis, set here at wdth 112 so headlines are genuinely wider
   letterforms rather than just a wider container. Grotesques read
   as engineered rather than decorative, which suits a diagnostic
   product. Explicitly NOT Inter and not a system stack.
   Body: IBM Plex Sans. Drawn for technical documentation, humanist
   where Archivo is geometric, so the two never blur together.
   Mono: IBM Plex Mono, used ONLY for literal DNS records so machine
   output is visually separated from prose.
   ------------------------------------------------------------
   COLOUR
   Warm tinted neutrals, never pure #fff or #000. One strong accent
   (electric indigo) deliberately kept OUT of the green/amber/red
   family so the diagnostic pass/warn/fail states never collide
   with brand colour.
   ============================================================ */

:root{
  /* neutrals, warm tinted */
  --paper:#F6F4EF;
  --surface:#FCFBF8;
  --raised:#EFEBE3;
  --ink:#14130F;
  --ink-2:#514C42;
  --ink-3:#837C6E;
  --rule:#E2DCD1;
  --rule-2:#D2CABB;

  /* brand accent */
  --accent:#2D31D6;
  --accent-ink:#1E21A8;
  --accent-wash:rgba(45,49,214,.07);

  /* diagnostic semantics — never reused for brand */
  --pass:#12734A;
  --pass-wash:rgba(18,115,74,.10);
  --warn:#A85A08;
  --warn-wash:rgba(168,90,8,.10);
  --fail:#B32D1C;
  --fail-wash:rgba(179,45,28,.10);

  /* type */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* scale — genuine contrast, not everything at 16/24 */
  --t-hero:clamp(2.25rem,7.4vw,6.25rem);
  --t-h2:clamp(2rem,4.6vw,3.4rem);
  --t-h3:clamp(1.3rem,2.4vw,1.65rem);
  --t-lead:clamp(1.075rem,1.9vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-micro:.8125rem;

  /* rhythm */
  --gap:clamp(64px,9vw,124px);
  --radius:14px;
  --shadow:0 1px 2px rgba(20,19,15,.05),0 18px 44px -26px rgba(20,19,15,.28);
  --shadow-lg:0 2px 4px rgba(20,19,15,.06),0 36px 80px -40px rgba(20,19,15,.36);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 112;
  line-height:1.02;letter-spacing:-.035em;text-wrap:balance;}
h1{font-size:var(--t-hero);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);font-family:var(--body);font-weight:600;line-height:1.25;letter-spacing:-.01em;}
p{margin:0;text-wrap:pretty;}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}

::selection{background:var(--accent);color:var(--surface);}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px;}
.measure{max-width:64ch;}
.measure-tight{max-width:52ch;}
.section{padding:var(--gap) 0;position:relative;}
.rule{height:1px;background:var(--rule);border:0;margin:0;}
.stack{display:flex;flex-direction:column;}
.stack-sm{gap:12px;} .stack-md{gap:20px;} .stack-lg{gap:34px;}

/* asymmetric editorial header: label left, content offset */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:46px;}
@media(min-width:900px){
  .sec-head{grid-template-columns:210px minmax(0,1fr);gap:40px;align-items:start;}
}
.eyebrow{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0;padding-top:.65em;
  border-top:2px solid var(--ink);display:inline-block;
}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);}
.small{font-size:var(--t-small);color:var(--ink-2);}
.micro{font-size:var(--t-micro);color:var(--ink-3);}
.mono{font-family:var(--mono);}
.tnum{font-variant-numeric:tabular-nums;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:11px;border:1.5px solid transparent;
  font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;text-decoration:none;background:var(--ink);color:var(--paper);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.btn:active{transform:translateY(0);}
.btn--accent{background:var(--accent);color:#fff;}
.btn--accent:hover{background:var(--accent-ink);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2);}
.btn--ghost:hover{border-color:var(--ink);background:var(--surface);}
.btn--wa{background:#1FA855;color:#fff;}
.btn--wa:hover{background:#188945;}
.btn--block{width:100%;}
.btn--sm{min-height:42px;padding:0 18px;font-size:.9rem;border-radius:9px;}
@media (prefers-reduced-motion:reduce){.btn{transition:none;}.btn:hover{transform:none;}}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:28px;}
.card--raised{box-shadow:var(--shadow);}

/* ---------- hero: centred, and wide enough for the grotesque to breathe ---------- */
.hero{text-align:center;}
/* On a phone the input must clear the fold, so the headline gives way to it.
   The tool is the hero, not the sentence above it. */
@media(max-width:560px){
  .hero h1{max-width:100%;letter-spacing:-.03em;line-height:1.04;}
  .hero .lead{font-size:1rem;line-height:1.5;margin-top:18px;max-width:38ch;}
  .hero .eyebrow{font-size:.7rem;}
  .hero .checker{margin-top:26px!important;}
}
.hero .eyebrow{display:inline-block;}
.hero h1{margin:0 auto;max-width:19ch;}
.hero .lead{margin:26px auto 0;max-width:58ch;}
.hero .checker{margin-left:auto;margin-right:auto;text-align:left;}

/* ---------- the checker: designed as an instrument readout ---------- */
.checker{max-width:780px;background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;}
.checker__form{display:flex;gap:10px;padding:14px;flex-wrap:wrap;}
.checker__input{
  flex:1 1 260px;min-width:0;min-height:56px;padding:0 18px;
  border:1.5px solid var(--rule-2);border-radius:11px;background:var(--paper);
  font-family:var(--mono);font-size:1.0625rem;color:var(--ink);
}
.checker__input::placeholder{color:var(--ink-3);}
.checker__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-wash);}
.checker__submit{min-height:56px;flex:0 0 auto;}
@media(max-width:520px){.checker__submit{width:100%;}}
.checker__note{padding:0 16px 14px;margin:0;}

/* result panel */
.result{border-top:1.5px solid var(--ink);display:none;}
.result.is-open{display:block;}
.result__top{display:grid;grid-template-columns:1fr;gap:24px;padding:28px;align-items:center;}
@media(min-width:760px){.result__top{grid-template-columns:auto 1fr;gap:36px;}}

/* score dial */
.dial{position:relative;width:132px;height:132px;margin:0 auto;}
.dial svg{transform:rotate(-90deg);display:block;}
.dial__track{stroke:var(--rule);}
.dial__value{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.3,1);}
.dial.is-pass .dial__value{stroke:var(--pass);}
.dial.is-warn .dial__value{stroke:var(--warn);}
.dial.is-fail .dial__value{stroke:var(--fail);}
.dial__num{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:var(--display);font-weight:700;
  font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em;
}
.dial__num span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;}

/* check rows */
.checks{border-top:1px solid var(--rule);}
.check{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:20px 28px;border-bottom:1px solid var(--rule);align-items:start;}
.check:last-child{border-bottom:0;}
.check__badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;flex-shrink:0;margin-top:2px;
  font-family:var(--mono);font-size:.75rem;font-weight:600;
}
.check--pass .check__badge{background:var(--pass-wash);color:var(--pass);}
.check--warn .check__badge{background:var(--warn-wash);color:var(--warn);}
.check--fail .check__badge{background:var(--fail-wash);color:var(--fail);}
.check--unknown .check__badge{background:var(--raised);color:var(--ink-3);}
.check__name{font-weight:600;font-size:1rem;margin:0 0 4px;}
.check__msg{font-size:var(--t-small);color:var(--ink-2);margin:0;}
.check__rec{
  font-family:var(--mono);font-size:.8125rem;line-height:1.5;
  background:var(--raised);border:1px solid var(--rule);border-radius:8px;
  padding:10px 12px;margin:10px 0 0;overflow-x:auto;white-space:pre-wrap;
  word-break:break-all;color:var(--ink);
}

/* contextual offer inside result */
.offer{padding:26px 28px;border-top:1.5px solid var(--ink);background:var(--raised);}
.offer__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
@media(max-width:560px){.offer__actions .btn{width:100%;}}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:840px){.tiers{grid-template-columns:1fr 1fr;}}
.tier{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:30px;}
.tier--feature{border:1.5px solid var(--ink);box-shadow:var(--shadow);}
.tier__price{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 108;font-size:3rem;line-height:1;margin:14px 0 2px;letter-spacing:-.04em;}
.tier__price sub{font-family:var(--body);font-size:.95rem;font-weight:400;color:var(--ink-3);vertical-align:baseline;}
.tier__list{list-style:none;padding:0;margin:20px 0 26px;display:flex;flex-direction:column;gap:11px;}
.tier__list li{position:relative;padding-left:26px;font-size:var(--t-small);color:var(--ink-2);}
.tier__list li::before{
  content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}
.tier .btn{margin-top:auto;}

/* ---------- audience cards, equal weight, never ranked ---------- */
.audience{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:880px){.audience{grid-template-columns:repeat(3,1fr);}}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--rule);}
.faq details:first-of-type{border-top:1px solid var(--rule);}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-weight:600;font-size:1.05rem;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:8px;top:50%;background:var(--ink-3);transition:transform .22s,opacity .22s;}
.faq summary::after{width:13px;height:2px;margin-top:-1px;}
.faq summary::before{width:2px;height:13px;right:13.5px;margin-top:-6.5px;}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0;}
.faq__a{padding:0 44px 24px 0;color:var(--ink-2);font-size:var(--t-small);}

/* ---------- persistent mobile action bar ---------- */
.fab{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(246,244,239,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--rule-2);
}
.fab .btn{flex:1;min-height:48px;font-size:.9rem;padding:0 12px;}
@media(max-width:860px){.fab{display:flex;}body{padding-bottom:78px;}}

/* jump back to checker */
.jump{
  position:fixed;right:18px;bottom:96px;z-index:70;display:none;
  min-height:44px;padding:0 16px;border-radius:100px;
  background:var(--ink);color:var(--paper);font-size:.85rem;font-weight:600;
  align-items:center;gap:8px;text-decoration:none;box-shadow:var(--shadow);
}
.jump.is-visible{display:inline-flex;}
@media(min-width:861px){.jump{bottom:24px;}}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--paper);padding:56px 0 40px;}
.footer a{color:rgba(246,244,239,.72);text-decoration:none;}
.footer a:hover{color:var(--paper);}
.footer__grid{display:grid;grid-template-columns:1fr;gap:30px;}
@media(min-width:780px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr;}}

/* ---------- motion, always opt-out ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .dial__value{transition:none;}
}

/* ---------- print: result must print cleanly ---------- */
@media print{
  .fab,.jump,.checker__form,.offer,.site-nav{display:none!important;}
  body{background:#fff;color:#000;padding:0;}
  .checker{border:1px solid #000;box-shadow:none;}
  .check__rec{background:#f4f4f4;}
  .section{padding:16px 0;}
  a[href]::after{content:" (" attr(href) ")";font-size:.75em;color:#555;}
}