/* ────────────────────────────────────────────────────────────────────────
   CallCard content-hub shared stylesheet.

   Used ONLY by the additive marketing/content pages (faq.html,
   why-digital-business-cards.html, feature/use-case/comparison pages).
   The landing page (index.html) does NOT use this file and is never touched.

   Theme tokens and brand styles are copied from the landing so the pages read
   as the same site. Fonts (Space Grotesk / Inter / Orbitron) are loaded per
   page via the same Google Fonts link the landing uses.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --paper:#ffffff; --paper-3:#f6f6f6; --ink:#0f0f0f; --ink-2:#555555; --ink-3:#8a8a8a;
  --rule:#e6e6e6; --rule-strong:#d4d4d4;
  --coral:#1a1a1a;                 /* the single confident accent (near-black), as on the landing */
  --r-sm:10px; --r-md:18px; --r-lg:32px;
  --disp:"Space Grotesk", system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-soft:0 1px 2px rgba(0,0,0,.04), 0 8px 28px -10px rgba(0,0,0,.06);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--body);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap { max-width:1080px; margin:0 auto; padding:0 28px; }
.measure { max-width:940px; margin:0 auto; }
a { color:inherit; }
img { max-width:100%; height:auto; }

/* ── Brand wordmark (verbatim from the landing) ── */
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand-svg { width:32px; height:32px; flex:none; }
.brand-svg .bg-stroke { stroke:var(--ink); fill:rgba(0,0,0,0.04); }
.brand-svg .c-left { fill:var(--coral); }
.brand-svg .c-right { fill:var(--ink); }
.brand-wordmark {
  font-family:'Orbitron', system-ui, sans-serif; font-weight:700; font-size:1.05rem;
  letter-spacing:0.02em; text-transform:uppercase; color:var(--ink); line-height:1;
  white-space:nowrap;
}
.brand-wordmark .accent { color:var(--coral); }
.brand-wordmark .mirror-d { display:inline-block; transform:scaleX(-1); }

/* ── Nav ── */
.nav { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--rule);
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); }
.nav-inner { max-width:1120px; margin:0 auto; padding:14px 28px; display:flex;
  align-items:center; justify-content:space-between; gap:20px; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { color:var(--ink-2); text-decoration:none; font-size:.9rem; font-weight:500; transition:color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--ink); }
.nav-cta { background:var(--ink); color:#fff !important; padding:9px 16px; border-radius:999px; font-weight:600; font-size:.86rem; white-space:nowrap; }

/* Mobile menu: a hamburger button + dropdown panel are injected by hub.js. */
.nav-toggle { display:none; }
.nav-panel { display:none; }
@media (max-width:820px){
  .nav-inner { padding:12px 18px; gap:12px; }
  .nav-toggle {
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px; flex:none;
    width:42px; height:42px; padding:11px; order:3;
    border:1px solid var(--rule-strong); border-radius:11px; background:#fff; cursor:pointer;
  }
  .nav-toggle span { display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
  .nav.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-links { gap:10px; order:2; margin-left:auto; }
  .nav-links a:not(.nav-cta){ display:none; }   /* originals hidden; cloned into the panel */
  .nav-panel {
    flex-direction:column; border-top:1px solid var(--rule); background:var(--paper);
  }
  .nav.open .nav-panel { display:flex; }
  .nav-panel a {
    padding:15px 28px; color:var(--ink-2); text-decoration:none; font-size:1rem;
    border-bottom:1px solid var(--rule);
  }
  .nav-panel a:hover, .nav-panel a[aria-current="page"] { color:var(--ink); }
}
@media (prefers-reduced-motion:reduce){ .nav-toggle span { transition:none; } }

/* ── Hero ── */
.hero { position:relative; padding:92px 0 56px; overflow:hidden; }
.hero-glyph { position:absolute; right:-4vw; top:-3vw; width:min(52vw,620px); height:auto;
  color:#000; opacity:.04; pointer-events:none; user-select:none; }
.eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin:0 0 20px; }
.hero h1 { font-family:var(--disp); font-weight:700; letter-spacing:-.045em;
  font-size:clamp(2.6rem,8vw,5.4rem); line-height:.95; margin:0 0 22px; max-width:16ch; text-wrap:balance; }
.hero h1 .u { position:relative; white-space:nowrap; }
.hero h1 .u::after { content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em; background:var(--ink); }
.hero .lead { font-size:1.2rem; color:var(--ink-2); margin:0; max-width:56ch; }

/* ── Sections + oversized numerals ── */
.grp { border-top:1px solid var(--rule); padding:60px 0 18px; }
.grp-head { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:baseline; margin-bottom:12px; }
.grp-num { font-family:var(--disp); font-weight:700; font-size:clamp(3rem,9vw,6rem); line-height:.8;
  letter-spacing:-.04em; -webkit-text-stroke:1px var(--ink); -webkit-text-fill-color:transparent; color:var(--ink); }
.grp-title { font-family:var(--disp); font-weight:650; font-size:1.15rem; letter-spacing:.02em; color:var(--ink); align-self:center; }
.grp-title small { display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400; margin-top:4px; }

/* Prose (guides) */
.prose h2 { font-family:var(--disp); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.5rem,4vw,2.1rem); margin:56px 0 14px; scroll-margin-top:90px; }
.prose h3 { font-family:var(--disp); font-weight:650; font-size:1.2rem; margin:34px 0 10px; }
.prose p { font-size:1.08rem; color:var(--ink-2); margin:0 0 18px; max-width:70ch; }
.prose p strong { color:var(--ink); }
.prose ul { color:var(--ink-2); font-size:1.08rem; max-width:70ch; padding-left:1.1em; }
.prose li { margin:8px 0; }
.prose a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }

/* ── Accordion (FAQ) ── */
details.qa { border-bottom:1px solid var(--rule); }
details.qa:first-of-type { border-top:1px solid var(--rule); }
details.qa > summary { list-style:none; cursor:pointer; padding:24px 56px 24px 2px; position:relative;
  font-family:var(--disp); font-weight:600; font-size:clamp(1.12rem,2.4vw,1.45rem); letter-spacing:-.015em;
  color:var(--ink); transition:padding-left .2s ease; min-height:44px; }
details.qa > summary:hover { padding-left:12px; }
details.qa > summary::-webkit-details-marker { display:none; }
details.qa > summary::after {
  content:""; position:absolute; right:6px; top:50%; width:44px; height:44px; margin-top:-22px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/16px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 16px no-repeat;
  transition:transform .3s cubic-bezier(.2,.7,.2,1); }
details.qa[open] > summary::after { transform:rotate(135deg); }
details.qa > .a { padding:0 56px 28px 2px; color:var(--ink-2); font-size:1.05rem; max-width:70ch; overflow:hidden; }
details.qa[open] > .a { animation:qaReveal .32s ease; }
details.qa > .a a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
@keyframes qaReveal { from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }

/* ── Manifesto band ── */
.band { background:var(--ink); color:#fff; margin:76px 0; padding:104px 0; position:relative; overflow:hidden; }
.band .wrap { position:relative; z-index:1; }
.band-line { font-family:var(--disp); font-weight:700; letter-spacing:-.04em;
  font-size:clamp(2.2rem,7vw,4.6rem); line-height:.99; margin:0; max-width:18ch; }
.band-line em { font-style:normal; color:#8a8a8a; }
.band-sub { margin:26px 0 0; color:rgba(255,255,255,.62); font-size:1.1rem; max-width:48ch; }
.band-grid { position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
  background-size:64px 64px; }

/* ── Sticky table of contents (long guides) ── */
.doc { display:grid; grid-template-columns:210px 1fr; gap:56px; align-items:start; padding-top:40px; }
.toc { position:sticky; top:96px; align-self:start; }
.toc h4 { font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px; }
.toc a { display:block; color:var(--ink-3); text-decoration:none; font-size:.9rem; padding:5px 0 5px 12px;
  border-left:2px solid var(--rule); transition:color .15s, border-color .15s; }
.toc a:hover { color:var(--ink-2); }
.toc a.active { color:var(--ink); border-left-color:var(--ink); font-weight:600; }
@media (max-width:900px){ .doc{ grid-template-columns:1fr; gap:0; } .toc{ display:none; } }

/* ── CTA ── */
.cta { text-align:center; padding:24px 0 88px; }
.cta h2 { font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,5vw,2.7rem); letter-spacing:-.03em; margin:0 0 12px; }
.cta p { color:var(--ink-2); margin:0 0 26px; font-size:1.1rem; }
.btn { display:inline-block; background:var(--ink); color:#fff; text-decoration:none; font-family:var(--disp);
  font-weight:650; padding:15px 32px; border-radius:999px; font-size:1.03rem; transition:transform .15s; }
.btn:hover { transform:translateY(-2px); }

/* ── Footer / hub map ── */
.foot { border-top:1px solid var(--rule); background:var(--paper-3); padding:58px 0 42px; margin-top:20px; }
.foot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
.foot-col h4 { font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; }
.foot-col a { display:block; color:var(--ink-2); text-decoration:none; font-size:.92rem; padding:4px 0; transition:color .15s; }
.foot-col a:hover { color:var(--ink); }
.foot-note { margin-top:42px; padding-top:22px; border-top:1px solid var(--rule); color:var(--ink-3);
  font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }

.meta-line { font-family:var(--mono); font-size:.72rem; color:var(--ink-3); letter-spacing:.02em; margin:0 0 26px; }

/* ── Motion ──
   The hidden state is gated behind html.js (set by an inline head script) so that
   without JavaScript, and for any crawler that does not run/scroll the page, all
   content is fully visible. With JS the blocks fade in on scroll. */
.js .rise { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .rise.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .js .rise{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}
a:focus-visible, summary:focus-visible, .btn:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.band a:focus-visible, .cta .btn:focus-visible { outline-color:#fff; }