/* Handbell marketing site — single stylesheet. Tokens only; no raw hex below the tokens block. */

:root {
  /* color tokens (branding/04-brand-guidelines.md §7) */
  --hb-ink: #101828;
  --hb-ink-2: #17233B;
  --hb-ink-3: #1D2C49;
  --hb-slate: #6B7FA3;
  --hb-slate-dim: #3A4A68;
  --hb-slate-soft: #8FA1C4;
  --hb-brass: #C9A227;
  --hb-brass-hi: #E3BC45;
  --hb-brass-deep: #A8811F;
  --hb-cream: #F4F3EE;
  --hb-paper: #FAF9F5;
  --hb-mist: #E9E8E2;
  --hb-line: rgba(107,127,163,.25);
  --hb-line-dark: rgba(143,161,196,.22);

  /* type */
  --hb-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --hb-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --hb-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --fs-hero: clamp(38px, 6vw, 60px);
  --fs-h1: clamp(32px, 5vw, 44px);
  --fs-h2: clamp(24px, 3.4vw, 32px);
  --fs-h3: 21px;
  --fs-body: 16.5px;
  --fs-small: 14px;
  --fs-mono: 13px;

  /* space & shape */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 104px;
  --radius: 14px;
  --radius-lg: 20px;
  --maxw: 1080px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--hb-font-body); font-size:var(--fs-body); line-height:1.6; color:var(--hb-ink); background:var(--hb-paper); }
body.dark { background:var(--hb-ink); color:var(--hb-cream); }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-3); }
main { display:block; }

h1,h2,h3 { font-family:var(--hb-font-display); letter-spacing:-.015em; line-height:1.12; }
h1 { font-size:var(--fs-h1); font-weight:700; }
h2 { font-size:var(--fs-h2); font-weight:700; }
h3 { font-size:var(--fs-h3); font-weight:500; }
p { max-width:64ch; }
a { color:inherit; }
.mono { font-family:var(--hb-font-mono); font-size:var(--fs-mono); }
.kicker { font-family:var(--hb-font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--hb-brass-deep); }
.dark .kicker, .on-ink .kicker { color:var(--hb-brass-hi); }
.muted { color:var(--hb-slate-dim); }
.dark .muted { color:var(--hb-slate-soft); }

/* ---------- nav ---------- */
.nav { position:sticky; top:0; z-index:50; background:rgba(16,24,40,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--hb-line-dark); }
.nav-inner { max-width:var(--maxw); margin:0 auto; padding:14px var(--sp-3); display:flex; align-items:center; gap:var(--sp-3); }
.nav .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--hb-cream); font-family:var(--hb-font-display); font-weight:700; font-size:21px; letter-spacing:-.01em; }
.nav .brand svg { display:block; }
.nav-links { display:flex; gap:22px; margin-left:auto; align-items:center; }
.nav-links a { color:var(--hb-slate-soft); text-decoration:none; font-size:14.5px; font-weight:500; }
.nav-links a:hover { color:var(--hb-cream); }
.nav-links a.active { color:var(--hb-cream); border-bottom:2px solid var(--hb-brass); padding-bottom:2px; }
.nav-links a.btn-brass, .nav-links a.btn-brass:hover { color:var(--hb-ink); }
.nav-drop { position:relative; }
.nav-drop summary { list-style:none; cursor:pointer; color:var(--hb-slate-soft); font-size:14.5px; font-weight:500; padding-bottom:2px; }
.nav-drop summary::-webkit-details-marker { display:none; }
.nav-drop summary::after { content:" \25BE"; font-size:10px; opacity:.7; }
.nav-drop summary:hover { color:var(--hb-cream); }
.nav-drop[data-active] summary { color:var(--hb-cream); border-bottom:2px solid var(--hb-brass); }
.nav-drop[open] .drop-menu { display:grid; }
.drop-menu { display:none; position:absolute; top:calc(100% + 10px); left:-12px; min-width:170px; background:var(--hb-ink); border:1px solid var(--hb-line-dark); border-radius:12px; padding:10px; gap:2px; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:60; }
.drop-menu a { display:block; padding:8px 12px; border-radius:8px; color:var(--hb-slate-soft); font-size:14px; text-decoration:none; }
.drop-menu a:hover { background:var(--hb-ink-2); color:var(--hb-cream); }
.nav-toggle { display:none; margin-left:auto; background:none; border:1px solid var(--hb-line-dark); color:var(--hb-cream); border-radius:8px; padding:7px 12px; font-family:var(--hb-font-mono); font-size:12px; cursor:pointer; }

/* ---------- buttons ---------- */
.btn { display:inline-block; padding:13px 26px; border-radius:999px; font-weight:600; font-size:15.5px; text-decoration:none; font-family:var(--hb-font-body); border:none; cursor:pointer; }
.btn-brass { background:var(--hb-brass); color:var(--hb-ink); }
.btn-brass:hover { background:var(--hb-brass-hi); }
.btn-ghost { border:1.5px solid var(--hb-slate); color:var(--hb-cream); }
.btn-ghost:hover { border-color:var(--hb-cream); }
.btn-ghost-dark { border:1.5px solid var(--hb-slate); color:var(--hb-ink); background:none; }
.btn-ghost-dark:hover { border-color:var(--hb-ink); }

/* ---------- hero ---------- */
.hero { background:linear-gradient(155deg, var(--hb-ink) 0%, var(--hb-ink-2) 62%, var(--hb-ink-3) 100%); color:var(--hb-cream); padding:var(--sp-5) 0; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:var(--sp-5); align-items:center; }
.weave-side svg { width:100%; max-width:380px; height:auto; display:block; margin:0 auto; }
.weave-side .runline { max-width:380px; margin:12px auto 0; display:grid; gap:4px; justify-items:center; }
.hero h1 { font-size:var(--fs-hero); max-width:15ch; }
.hero .sub { margin-top:var(--sp-3); font-size:19px; line-height:1.55; color:var(--hb-slate-soft); max-width:56ch; }
.hero .cta-row { margin-top:var(--sp-4); display:flex; gap:14px; flex-wrap:wrap; }
.hero .kicker { margin-bottom:var(--sp-2); display:block; }
.hero .runline { margin-top:14px; display:flex; justify-content:space-between; font-family:var(--hb-font-mono); font-size:12px; color:var(--hb-slate-soft); flex-wrap:wrap; gap:8px; }

/* subhero (interior pages) */
.subhero { background:linear-gradient(155deg, var(--hb-ink), var(--hb-ink-2)); color:var(--hb-cream); padding:var(--sp-5) 0; }
.subhero .sub { margin-top:var(--sp-2); color:var(--hb-slate-soft); font-size:18px; max-width:58ch; }
.subhero-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:var(--sp-5); align-items:center; }
.subart svg { width:100%; max-width:330px; height:auto; display:block; margin:0 auto; }

/* ---------- sections ---------- */
section.block { padding:var(--sp-6) 0; }
section.block.tight { padding:var(--sp-5) 0; }
section.alt { background:var(--hb-cream); }
section.on-ink { background:var(--hb-ink-2); color:var(--hb-cream); }
.sec-head { margin-bottom:var(--sp-4); }
.sec-head .kicker { display:block; margin-bottom:10px; }
.sec-head p { margin-top:var(--sp-2); }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.card { background:var(--hb-paper); border:1px solid var(--hb-line); border-radius:var(--radius-lg); padding:var(--sp-3); }
.on-ink .card { background:var(--hb-ink); border-color:var(--hb-line-dark); }
.card h3 { margin-bottom:10px; }
.card .mono { color:var(--hb-brass-deep); display:block; margin-bottom:10px; }
.on-ink .card .mono { color:var(--hb-brass-hi); }
.card p { font-size:15px; }

/* step list */
.steps { counter-reset:step; display:grid; gap:var(--sp-3); }
.step { display:grid; grid-template-columns:56px 1fr; gap:var(--sp-3); align-items:start; }
.step .n { counter-increment:step; width:48px; height:48px; border-radius:50%; border:2px solid var(--hb-brass); display:flex; align-items:center; justify-content:center; font-family:var(--hb-font-mono); font-size:15px; color:var(--hb-brass-deep); }
.step .n::before { content:counter(step,decimal-leading-zero); }
.step h3 { margin-bottom:6px; }
.step p { font-size:15.5px; }

/* vocab table */
.vocab { width:100%; border-collapse:collapse; font-size:15px; }
.vocab th, .vocab td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--hb-line); vertical-align:top; }
.vocab th { font-family:var(--hb-font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--hb-slate-dim); }
.vocab td:first-child { font-family:var(--hb-font-display); font-weight:500; white-space:nowrap; }
.vocab td:first-child span { color:var(--hb-brass-deep); }

/* icons & evo rows */
.icon { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; margin-bottom:12px; color:var(--hb-brass-deep); }
.on-ink .icon, .dark .icon { color:var(--hb-brass-hi); }
.card .mono + .icon, .icon + .mono { margin-top:2px; }
.evo { display:grid; gap:20px; align-content:center; }
.evo-row { display:flex; align-items:center; gap:14px; }
.evo-row .lg { width:44px; height:44px; flex:0 0 auto; }
.evo-row .arrow { flex:0 0 auto; color:var(--hb-slate); }
.evo-row .lbl { font-size:14.5px; line-height:1.5; color:var(--hb-slate-soft); }
.evo-card { text-align:center; }
.evo-card .logos { display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 16px; }
.evo-card .lg { width:44px; height:44px; }
.evo-card .arrow { color:var(--hb-slate); flex:0 0 auto; }
.evo-card h3 { font-size:18px; margin-bottom:8px; }
.cta-final { background:var(--hb-cream); }
.mark-stage { display:flex; justify-content:center; align-items:center; background:linear-gradient(160deg,var(--hb-ink),var(--hb-ink-2)); border-radius:var(--radius-lg); padding:var(--sp-4); }

/* quote */
.pull { border-left:3px solid var(--hb-brass); padding:6px 0 6px var(--sp-3); font-size:19px; line-height:1.55; font-family:var(--hb-font-display); max-width:60ch; }
.pull cite { display:block; margin-top:12px; font-family:var(--hb-font-mono); font-size:12.5px; font-style:normal; color:var(--hb-slate-dim); }
.on-ink .pull cite { color:var(--hb-slate-soft); }

/* pricing */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); align-items:stretch; }
.tier { border:1px solid var(--hb-line); border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-3); background:var(--hb-paper); display:flex; flex-direction:column; }
.tier.feature { background:var(--hb-ink-2); color:var(--hb-cream); border-color:var(--hb-ink-2); }
.tier .price { font-family:var(--hb-font-display); font-size:40px; font-weight:700; margin:14px 0 2px; }
.tier .per { font-size:13.5px; color:var(--hb-slate-dim); }
.tier.feature .per { color:var(--hb-slate-soft); }
.tier ul { list-style:none; margin:var(--sp-3) 0; display:grid; gap:10px; font-size:15px; }
.tier li { padding-left:22px; position:relative; }
.tier li::before { content:"·"; position:absolute; left:6px; color:var(--hb-brass); font-weight:700; }
.tier .btn { margin-top:auto; text-align:center; }

/* forms */
form.contact { display:grid; gap:var(--sp-2); max-width:520px; }
form.contact label { font-size:13.5px; font-weight:600; }
form.contact input, form.contact textarea { font-family:var(--hb-font-body); font-size:15.5px; padding:12px 14px; border:1px solid var(--hb-line); border-radius:10px; background:var(--hb-paper); color:var(--hb-ink); width:100%; }
form.contact textarea { min-height:130px; resize:vertical; }
form.contact input:focus, form.contact textarea:focus { outline:2px solid var(--hb-brass); border-color:transparent; }

/* footer */
footer.site { background:var(--hb-ink); color:var(--hb-slate-soft); padding:var(--sp-5) 0 var(--sp-4); }
.foot-inner { max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-3); display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--sp-4); }
.foot-inner.four { grid-template-columns:1.6fr 1fr 1fr 1fr; }
footer.site .brand { display:flex; align-items:center; gap:10px; color:var(--hb-cream); font-family:var(--hb-font-display); font-weight:700; font-size:19px; }
footer.site .tag { margin-top:12px; font-size:14px; }
footer.site h4 { font-family:var(--hb-font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:14px; color:var(--hb-slate); }
footer.site ul { list-style:none; display:grid; gap:9px; font-size:14px; }
footer.site a { color:var(--hb-slate-soft); text-decoration:none; }
footer.site a:hover { color:var(--hb-cream); }
.foot-legal { max-width:var(--maxw); margin:var(--sp-4) auto 0; padding:var(--sp-3) var(--sp-3) 0; border-top:1px solid var(--hb-line-dark); font-size:12.5px; display:flex; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; }

/* weave animation */
.weave-draw { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: hbdraw 9s linear infinite; }
.weave-draw-v { stroke-dasharray: 980; stroke-dashoffset: 980; animation: hbdraw-v 8s linear infinite; }
@keyframes hbdraw-v { 0% { stroke-dashoffset:980; } 62% { stroke-dashoffset:0; } 78% { stroke-dashoffset:0; opacity:1; } 88% { opacity:0; stroke-dashoffset:0;} 92%{opacity:0; stroke-dashoffset:980;} 100% { stroke-dashoffset:980; opacity:1; } }
@keyframes hbdraw { 0% { stroke-dashoffset:1600; } 62% { stroke-dashoffset:0; } 78% { stroke-dashoffset:0; opacity:1; } 88% { opacity:0; stroke-dashoffset:0;} 92%{opacity:0; stroke-dashoffset:1600;} 100% { stroke-dashoffset:1600; opacity:1; } }
.weave-dot { animation: hbdot 9s linear infinite; }
@keyframes hbdot { 0%,58% { opacity:0; } 64%,78% { opacity:1; } 88%,100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) {
  .weave-draw, .weave-draw-v { animation:none; stroke-dashoffset:0; }
  .weave-dot { animation:none; opacity:1; }
}

/* prose (manifesto) */
.prose { max-width:66ch; }
.prose h2 { margin:var(--sp-4) 0 var(--sp-2); }
.prose p { margin-bottom:var(--sp-2); font-size:17px; line-height:1.7; }

/* use-case strip on index */
.uc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
.uc { display:block; text-decoration:none; border:1px solid var(--hb-line); border-radius:var(--radius); padding:18px 20px; background:var(--hb-paper); color:var(--hb-ink); }
.uc:hover { border-color:var(--hb-brass); }
.uc .icon { width:22px; height:22px; margin-bottom:10px; }
.uc h3 { font-size:17px; margin-bottom:4px; }
.uc p { font-size:13.5px; color:var(--hb-slate-dim); margin:0; }
.uc .go { font-family:var(--hb-font-mono); font-size:11px; color:var(--hb-brass-deep); }

/* ---------- responsive ---------- */
@media (max-width:760px) {
  .hero-grid { grid-template-columns:1fr; gap:var(--sp-4); }
  .uc-grid { grid-template-columns:1fr; }
  .foot-inner.four { grid-template-columns:1fr; }
  .nav-drop { position:static; }
  .drop-menu { position:static; box-shadow:none; border:0; padding:4px 0 4px 14px; background:transparent; }
  .subhero-grid { grid-template-columns:1fr; gap:var(--sp-3); }
  .subart svg { max-width:260px; }
  .weave-side svg { max-width:240px; }
  .grid-3, .tiers { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .foot-inner { grid-template-columns:1fr; gap:var(--sp-3); }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--hb-ink); flex-direction:column; padding:var(--sp-3); gap:var(--sp-2); border-bottom:1px solid var(--hb-line-dark); }
  .nav-links.open { display:flex; }
  .nav-drop { position:relative; }
.nav-drop summary { list-style:none; cursor:pointer; color:var(--hb-slate-soft); font-size:14.5px; font-weight:500; padding-bottom:2px; }
.nav-drop summary::-webkit-details-marker { display:none; }
.nav-drop summary::after { content:" \25BE"; font-size:10px; opacity:.7; }
.nav-drop summary:hover { color:var(--hb-cream); }
.nav-drop[data-active] summary { color:var(--hb-cream); border-bottom:2px solid var(--hb-brass); }
.nav-drop[open] .drop-menu { display:grid; }
.drop-menu { display:none; position:absolute; top:calc(100% + 10px); left:-12px; min-width:170px; background:var(--hb-ink); border:1px solid var(--hb-line-dark); border-radius:12px; padding:10px; gap:2px; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:60; }
.drop-menu a { display:block; padding:8px 12px; border-radius:8px; color:var(--hb-slate-soft); font-size:14px; text-decoration:none; }
.drop-menu a:hover { background:var(--hb-ink-2); color:var(--hb-cream); }
.nav-toggle { display:block; }
  section.block { padding:var(--sp-5) 0; }
}
@media (max-width:480px) {
  .hero { padding-top:var(--sp-5); }
  .hero .cta-row { flex-direction:column; align-items:stretch; }
  .btn { text-align:center; }
  .step { grid-template-columns:44px 1fr; gap:var(--sp-2); }
  .vocab td:first-child { white-space:normal; }
}