/* ============================================================
   PencilIQ — unified site stylesheet  ·  v2.0  ·  "A safer library"
   ONE design system, TWO themes:
     · Dark  (default) — warm-violet ink #0E0B14, cream type, violet accent
     · Light (paper)   — warm paper  #F3EBD9, ink type,   amber  accent
   Amber carries the IQ badge in both. Violet lives on the pencil tip in both,
   and steps forward as the accent in dark. Single source of truth — every page imports it.
   ============================================================ */

/* ---------- constants (theme-independent) ---------- */
:root{
  /* amber — the warm signature (IQ badge, high-intent CTA) */
  --amber:#E0A35A; --amber-deep:#C77E3A; --amber-wash:rgba(224,163,90,.16);
  /* cream — text on any ink/dark band */
  --cream:#F1EADC; --cream-soft:#C2B49A; --cream-faint:#8C8068;
  --line-cream:rgba(241,234,220,.10); --line-cream-strong:rgba(241,234,220,.20);
  /* type */
  --serif:'Newsreader','Times New Roman',serif;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --hand:'Caveat',cursive;
  /* radii + rhythm */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:28px;
  --gutter:72px; --maxw:1200px;
  --nav-h:74px;
}

/* ---------- DARK theme (default) ---------- */
:root, :root[data-theme="dark"]{
  --bg:#0E0B14; --bg-raised:#16121F; --bg-sunken:#1E1929; --bg-elevated:#2A2436;
  --text:#F1EADC; --text-soft:#BFB7A5; --text-faint:#8B8395;
  --line:rgba(241,234,220,.09); --line-strong:rgba(241,234,220,.18);
  --accent:#9B8AE8;            /* primary accent = violet on dark */
  --accent-bright:#B197FC;     /* hover / luminous */
  --accent-wash:rgba(155,138,232,.16);
  --accent-2:var(--amber);     /* secondary accent */
  --amber-ink:#E0A35A;         /* amber that reads on this ground */
  --violet-tip:#9B8AE8;        /* pencil-tip on dark marks */
  --em:var(--accent);          /* italic emphasis colour */
  --mark-body:#F1EADC; --mark-tip:#9B8AE8;
  /* ink feature band — a deeper, glowing pocket of the dark page */
  --band:radial-gradient(135% 135% at 18% 0%,#1B1530 0%,#0B0913 72%);
  --band-em:#B197FC; --band-eyebrow:#E0A35A;
  --shadow-card:0 30px 70px -40px rgba(0,0,0,.7);
}

/* ---------- LIGHT theme (paper) ---------- */
:root[data-theme="light"]{
  --bg:#F3EBD9; --bg-raised:#FBF5E9; --bg-sunken:#E8DDC6; --bg-elevated:#FBF5E9;
  --text:#241B11; --text-soft:#6B5E49; --text-faint:#9A8B70;
  --line:rgba(40,30,16,.12); --line-strong:rgba(40,30,16,.22);
  --accent:#BB6E25;            /* primary accent = amber-ink on paper */
  --accent-bright:#9C5A1C;
  --accent-wash:rgba(224,163,90,.16);
  --accent-2:#6B5BD9;          /* secondary accent = violet, brought in lightly */
  --amber-ink:#BB6E25;
  --violet-tip:#6B5BD9;        /* pencil-tip on light marks */
  --em:#BB6E25;
  --mark-body:#241B11; --mark-tip:#6B5BD9;
  --band:radial-gradient(135% 135% at 18% 0%,#251B11 0%,#120C06 75%);
  --band-em:#E0A35A; --band-eyebrow:#E0A35A;
  --shadow-card:0 30px 70px -44px rgba(40,30,16,.4);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:'ss01' on;overflow-x:hidden;
  transition:background .4s ease,color .4s ease;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
::selection{background:var(--amber);color:#1B130B;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.section{padding:104px 0;position:relative;}
.section.tight{padding:72px 0;}

/* ============================================================
   TYPE ATOMS
   ============================================================ */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-faint);font-weight:500;display:inline-flex;align-items:center;gap:12px;}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--line-strong);}
.eyebrow.amber{color:var(--amber-ink);} .eyebrow.amber::before{background:var(--amber-ink);opacity:.5;}
.eyebrow.no-rule::before{display:none;}

.display{font-family:var(--serif);font-weight:340;letter-spacing:-.024em;line-height:.98;color:var(--text);}
.display em{font-style:italic;color:var(--em);}
.h2{font-family:var(--serif);font-weight:380;letter-spacing:-.02em;line-height:1.04;color:var(--text);margin:0;}
.h2 em{font-style:italic;color:var(--em);}
.h3{font-family:var(--serif);font-weight:420;letter-spacing:-.012em;line-height:1.15;color:var(--text);margin:0;}
.lede{color:var(--text-soft);line-height:1.6;font-weight:380;font-size:20px;}
.body{color:var(--text-soft);line-height:1.62;font-weight:380;}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--text-faint);text-transform:uppercase;}
.hand{font-family:var(--hand);color:var(--amber-ink);font-weight:600;}
.cite{font-size:13px;color:var(--text-faint);}
.cite em{font-style:italic;color:var(--text-soft);}

/* ============================================================
   NAV  →  moved to styles/nav.css (single source of truth).
   The canonical nav (shell, wordmark, links, theme-toggle,
   hero-ink float, burger, mobile-menu) is self-contained there
   so it renders identically across pages with differing palettes.
   ============================================================ */

/* LIGHT theme: the hero is paper, same ground as the rest of the page — not a dark band.
   We remap the band's cream/ink tokens to the paper palette so the shared .ink-band rules
   resolve to ink-on-paper. The iPad mock keeps its own hardcoded colours (untouched). */
:root[data-theme="light"] .hero.ink-band{
  --band:var(--bg);              /* paper, identical to the page below */
  --band-em:var(--em);          /* amber italics + the hand-drawn underline */
  --band-eyebrow:var(--accent); /* amber eyebrow that reads on paper */
  --line-cream:var(--line);     /* faint ink hairlines (trust rule + dividers) */
}
:root[data-theme="light"] .hero.ink-band h1{color:var(--text);}
:root[data-theme="light"] .hero.ink-band .lede{color:var(--text-soft);}
:root[data-theme="light"] .hero.ink-band .trust-line .it .k{color:var(--text-faint);}
:root[data-theme="light"] .hero.ink-band .trust-line .it .v{color:var(--text);}
:root[data-theme="light"] .hero.ink-band .btn-ghost{color:var(--text);border-color:var(--line-strong);}
:root[data-theme="light"] .hero.ink-band .btn-ghost:hover{border-color:var(--text);}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;font-family:var(--sans);
  font-size:14px;font-weight:500;letter-spacing:.01em;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:transform .15s,background .15s,border-color .15s,box-shadow .15s;
  white-space:nowrap;text-align:center;}
.btn-primary{background:var(--text);color:var(--bg);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-card);}
.btn-amber{background:var(--amber);color:#1B130B;}
.btn-amber:hover{transform:translateY(-1px);background:#E9B475;box-shadow:0 14px 30px -14px var(--amber);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--text);}
.btn-sm{padding:9px 16px;font-size:13px;}
.btn-block{display:flex;width:100%;justify-content:center;}
/* on ink bands */
.ink-band .btn-ghost{color:var(--cream);border-color:var(--line-cream-strong);}
.ink-band .btn-ghost:hover{border-color:var(--cream);}
.ink-band .btn-primary{background:var(--cream);color:#1B130B;}
.btn.loading{opacity:.7;pointer-events:none;}

/* ============================================================
   BADGES
   ============================================================ */
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:4px 11px;display:inline-flex;align-items:center;gap:6px;}
.badge.solid{background:var(--amber);color:#1B130B;}
.badge.out{border:1px solid var(--amber-ink);color:var(--amber-ink);}
.badge.soft{background:var(--accent-wash);color:var(--accent);}

/* ============================================================
   INK FEATURE BAND
   ============================================================ */
.ink-band{background:var(--band);color:var(--cream);position:relative;}
.ink-band .display,.ink-band .h2,.ink-band h1,.ink-band h2{color:var(--cream);}
.ink-band .display em,.ink-band h1 em,.ink-band h2 em{color:var(--band-em);}
.ink-band .lede,.ink-band .body{color:var(--cream-soft);}
.ink-band .eyebrow{color:var(--band-eyebrow);} .ink-band .eyebrow::before{background:var(--band-eyebrow);opacity:.6;}
.ink-band .meta{color:var(--cream-faint);}

/* ============================================================
   TRUST LINE
   ============================================================ */
.trust-line{display:flex;gap:26px;align-items:stretch;flex-wrap:wrap;}
.trust-line .it .k{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);}
.trust-line .it .v{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--text);margin-top:5px;}
.trust-line .sep{width:1px;background:var(--line);}
.ink-band .trust-line .it .k{color:var(--cream-faint);}
.ink-band .trust-line .it .v{color:var(--cream);}
.ink-band .trust-line .sep{background:var(--line-cream);}

/* ============================================================
   SECTION HEADER
   ============================================================ */
.sec-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.sec-head .eyebrow{justify-content:center;margin-bottom:20px;}
.sec-head h2{font-family:var(--serif);font-weight:360;font-size:clamp(2.1rem,4.6vw,3.4rem);
  line-height:1.04;letter-spacing:-.02em;color:var(--text);}
.sec-head h2 em{font-style:italic;color:var(--em);}
.sec-head p{margin-top:18px;color:var(--text-soft);font-size:17px;line-height:1.6;}

/* labelled divider */
.divider{display:flex;align-items:center;gap:14px;}
.divider hr{flex:1;border:0;border-top:1px solid var(--line);margin:0;}

/* ============================================================
   CARDS (problem / feature)
   ============================================================ */
.card{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;position:relative;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-card);}
.card .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-wash);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;}
.card .ic svg{width:21px;height:21px;}
.card .fn{font-family:var(--mono);font-size:11px;color:var(--amber-ink);margin-bottom:18px;letter-spacing:.04em;}
.card h3,.card h4{font-family:var(--serif);font-weight:430;font-size:23px;letter-spacing:-.012em;line-height:1.15;
  margin:0 0 10px;color:var(--text);}
.card p{margin:0;font-size:14.5px;color:var(--text-soft);line-height:1.58;}
.card .stat{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;}
.card .stat .s{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--amber-ink);line-height:1;font-weight:380;}

/* ============================================================
   CALLOUT (In PencilIQ)
   ============================================================ */
.callout{border-left:2px solid var(--amber);padding:4px 0 4px 22px;}
.callout .cl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-ink);margin-bottom:9px;display:block;}
.callout p{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.45;color:var(--text);margin:0;}

/* ============================================================
   HAND UNDERLINE / CIRCLE
   ============================================================ */
.underlined{position:relative;display:inline-block;color:var(--em);}
.underlined .uline{position:absolute;left:-2px;bottom:-9px;pointer-events:none;color:var(--amber-ink);}
.ink-band .underlined .uline{color:var(--band-em);}

/* ============================================================
   iPad MOCKUP
   ============================================================ */
.ipad{border-radius:26px;background:linear-gradient(160deg,#2A2014,#140D07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 60px 110px -45px rgba(0,0,0,.55);padding:16px;}
.ipad-page{border-radius:16px;background:#F6EFDF;height:100%;min-height:0;
  background-image:linear-gradient(rgba(187,110,37,.13) 1px,transparent 1px);background-size:100% 30px;
  padding:28px;position:relative;overflow:hidden;}
.ipad-page .pt{font-family:var(--hand);font-size:32px;color:#241B11;font-weight:600;line-height:1;}
.ipad-card{position:absolute;background:#251B11;border:1px solid var(--line-cream-strong);
  border-radius:13px;padding:15px 17px;box-shadow:0 24px 55px -20px rgba(0,0,0,.55);}
.ipad-card .cl{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:8px;}
.ipad-card .cq{font-family:var(--serif);font-size:16px;color:var(--cream);line-height:1.3;}
.ipad-card .pips{display:flex;gap:6px;margin-top:12px;}
.ipad-card .pip{height:22px;width:22px;border-radius:6px;background:#120C06;display:flex;
  align-items:center;justify-content:center;font-size:11px;color:var(--cream-faint);font-family:var(--mono);}
.ipad-card .pip.on{background:var(--amber);color:#1B130B;}

/* FOOTER → moved to styles/nav.css (.piq-footer), shared canonical chrome. */

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.visible{opacity:1;transform:none;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  :root{--gutter:28px;}
  .section{padding:80px 0;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}