/* Citable — citable.ca  ·  "Craft Table" look
   Vibe: Little Big Planet — everything is a physical, handmade thing. Stitched fabric
   panels, chunky pressable buttons, tags on threads, tape labels, soft cutout shadows.
   COLORS LOCKED per Eric 08-26: white paper, blue felt, black ink/stitching. No recolor.
   Type: Plex Mono = machine speech · Plex Sans = human · Space Grotesk = display. */

:root {
  --paper:   #ffffff;
  --board:   #eaf1fb;
  --ink:     #12203a;
  --scan:    #1f6bff;
  --scan-dk: #0c3fae;
  --ghost:   #7d8aa3;
  --signal:  #0fa36b;
  --warn:    #c07a12;
  --line:    #cdd8ec;
  --machine-bg: #0f1626;
  --machine-text: #9fb3d9;
  --spring: cubic-bezier(.34,1.56,.64,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  background-color: var(--board);
  background-image:
    repeating-linear-gradient( 45deg, rgba(31,107,255,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(18,32,58,.035) 0 2px, transparent 2px 9px);
}

.mono { font-family: 'IBM Plex Mono', Consolas, monospace; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
h1, h2, .wordmark { font-family: 'Space Grotesk', 'IBM Plex Sans', Arial, sans-serif; letter-spacing: -.015em; }
a { color: var(--scan); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--scan); outline-offset: 3px; border-radius: 6px; }

/* ============ THE MATERIAL: a stitched fabric cutout ============ */
.stitched {
  position: relative;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 6px 0 rgba(18,32,58,.10), 0 20px 34px rgba(18,32,58,.13);
}
.stitched::after {
  content: ""; position: absolute; inset: 7px; border-radius: 15px;
  border: 2px dashed rgba(18,32,58,.28); pointer-events: none;
}

/* ============ motion primitives ============ */
html.js .rv { opacity: 0; transform: translateY(28px) rotate(-.6deg); }
html.js .rv.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s var(--spring); }
.tilt { transition: transform .4s var(--spring), box-shadow .4s ease; will-change: transform; }

.hang { position: relative; transform-origin: top center; }
.hang::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 2px; height: var(--thread, 40px);
  background: repeating-linear-gradient(var(--ink) 0 3px, transparent 3px 5px);
  opacity: .55; transform: translateX(-50%);
}
.hang::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--thread, 40px) - 4px);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--scan); border: 2px solid var(--ink);
  box-shadow: 0 2px 0 rgba(18,32,58,.25); transform: translateX(-50%);
}
@keyframes sway { 0%,100% { rotate: 1.8deg; } 50% { rotate: -1.8deg; } }
@keyframes swingBig { 0% { rotate: 10deg; } 25% { rotate: -8deg; } 50% { rotate: 5deg; } 75% { rotate: -3deg; } 100% { rotate: 0; } }
.hang { animation: sway 4.5s ease-in-out infinite; }
.hang.swing { animation: swingBig 1.6s var(--spring) 1, sway 4.5s ease-in-out 1.6s infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
  .hang, .hang.swing { animation: none; }
  .scanline { display: none; }
  * { animation: none !important; transition: none !important; }
}

/* ============ chunky pressable buttons ============ */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 14px 26px; border-radius: 15px; border: 2.5px solid var(--ink);
  transition: transform .12s var(--spring), box-shadow .12s; cursor: pointer;
}
.btn-primary { background: var(--scan); color: #fff; box-shadow: 0 6px 0 var(--scan-dk), 0 6px 0 2.5px var(--ink); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: translateY(6px); box-shadow: 0 0 0 var(--scan-dk), 0 0 0 2.5px var(--ink); }
.btn-quiet { background: #fff; color: var(--ink); box-shadow: 0 6px 0 rgba(18,32,58,.14), 0 6px 0 2.5px var(--ink); }
.btn-quiet:hover { transform: translateY(-1px); color: var(--scan); }
.btn-quiet:active { transform: translateY(6px); box-shadow: 0 0 0 rgba(18,32,58,.14), 0 0 0 2.5px var(--ink); }

/* ============ tape label (eyebrows) ============ */
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--scan);
  background: rgba(31,107,255,.12); border: 1.5px dashed rgba(31,107,255,.55);
  padding: 5px 13px; border-radius: 5px; margin-bottom: 14px; transform: rotate(-1.4deg);
}

/* ============ nav ============ */
nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 6px; }
.wordmark { font-size: 27px; font-weight: 700; color: var(--ink); text-decoration: none; display: inline-block; }
.wordmark .guill { color: var(--scan); display: inline-block; transition: transform .4s var(--spring); }
.wordmark:hover .guill:first-child { transform: translateX(-3px) rotate(-8deg); }
.wordmark:hover .guill:last-child { transform: translateX(3px) rotate(8deg); }
.nav-right { display: flex; gap: 22px; align-items: center; font-size: 15px; }
.nav-right a { color: var(--ink); text-decoration: none; font-weight: 600; }
.nav-right a:hover { color: var(--scan); }
.lang-switch { border: 2px solid var(--ink); border-radius: 9px; padding: 4px 11px; font-size: 14px;
  box-shadow: 0 3px 0 rgba(18,32,58,.15); }

/* ============ hero ============ */
.hero-anchor { position: relative; }
header.hero { padding: 40px 0 26px; }
.hero h1 { font-size: clamp(31px, 5.1vw, 48px); line-height: 1.1; max-width: 15em; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--scan); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 6px;
  background: repeating-linear-gradient(90deg, var(--scan) 0 9px, transparent 9px 15px);
  border-radius: 3px; opacity: .8;
}
.hero .sub { margin-top: 18px; font-size: 19px; max-width: 33em; color: #39465e; }

.score-hang {
  --thread: 44px; position: absolute; right: 20px; top: 4px; z-index: 5;
  padding: 12px 18px 14px; text-align: center; cursor: default;
}
.score-hang .big { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 24px; color: var(--scan); }
.score-hang .lbl { font-size: 11px; color: var(--ghost); max-width: 134px; line-height: 1.35; margin-top: 2px; }
@media (max-width: 900px) { .score-hang { display: none; } }

/* ============ the signature: two readers ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 46px 0 8px; }
.pane { overflow: hidden; }
.pane .bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px 10px;
  border-bottom: 2px dashed rgba(18,32,58,.18); font-size: 13px; color: var(--ghost); position: relative; z-index: 1; }
.pane .bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); border: 1.5px solid var(--ink); }
.pane-human .mock { padding: 20px 22px; position: relative; z-index: 1; }
.mock .m-img { height: 98px; border-radius: 10px; border: 2px solid var(--ink);
  background: linear-gradient(120deg, #ffd9a8, #ff9d76 55%, #e2634d); }
.mock .m-head { height: 15px; width: 62%; border-radius: 5px; background: #34405e; margin: 16px 0 10px; }
.mock .m-line { height: 9px; border-radius: 5px; background: #cdd5e4; margin: 7px 0; }
.mock .m-line.short { width: 45%; }
.mock .m-btns { display: flex; gap: 8px; margin-top: 14px; }
.mock .m-btn { height: 28px; width: 92px; border-radius: 8px; background: #e2634d; border: 2px solid var(--ink); }
.mock .m-btn.alt { background: #eef1f7; }
.pane-machine { background: var(--machine-bg); }
.pane-machine::after { border-color: rgba(159,179,217,.22); }
.pane-machine .bar { border-color: rgba(159,179,217,.18); color: #6b7ea6; }
.pane-machine pre { padding: 20px 22px; color: var(--machine-text); position: relative; z-index: 1;
  font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.pane-machine pre .void { color: #46587c; }
.pane-machine pre.reading { animation: readin 1.6s steps(6, end) 1; }
@keyframes readin { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.scanline { position: absolute; left: 10px; right: 10px; height: 2px; top: 20%; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--scan), transparent); opacity: .7;
  animation: scan 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes scan { 0%,100% { top: 20%; } 50% { top: 80%; } }
.split-caption { text-align: center; color: var(--ghost); font-size: 14px; margin: 14px 0 0; }

.cta-row { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

/* ============ sections + stitched dividers ============ */
section { padding: 62px 0 8px; position: relative; }
section::before {
  content: ""; position: absolute; top: 22px; left: 24px; right: 24px; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(18,32,58,.28) 0 11px, transparent 11px 20px);
}
#how::before { display: none; }
h2 { font-size: clamp(25px, 3.4vw, 33px); margin-bottom: 14px; }
.lead { max-width: 40em; color: #39465e; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.step { padding: 24px; }
.step > * { position: relative; z-index: 1; }
.step .n { font-family: 'IBM Plex Mono', monospace; color: var(--scan); font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 15px; color: #39465e; }
.step .file { display: inline-block; margin-top: 12px; font-size: 13px; background: rgba(31,107,255,.1);
  color: var(--scan-dk); border: 1.5px solid rgba(31,107,255,.4); border-radius: 7px; padding: 3px 10px; }

/* proof */
.proof { margin-top: 36px; background: var(--machine-bg); color: var(--machine-text); padding: 32px 30px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proof::after { border-color: rgba(159,179,217,.22); }
.proof > * { position: relative; z-index: 1; }
.proof .stat .big { font-family: 'IBM Plex Mono', monospace; font-size: 36px; color: #fff; }
.proof .stat .lbl { font-size: 14px; color: #8397c1; margin-top: 4px; }

/* ============ pricing ============ */
.need-wrap { margin-top: 34px; display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
#need-picker { display: flex; flex-direction: column; gap: 14px; }
.chip { text-align: left; font: inherit; cursor: pointer; padding: 17px 20px; }
.chip > * { position: relative; z-index: 1; }
.chip .t { font-weight: 700; font-size: 18px; display: block; }
.chip .d { font-size: 14px; color: var(--ghost); }
.chip.on { box-shadow: 0 6px 0 var(--scan), 0 6px 0 2.5px var(--ink), 0 20px 30px rgba(31,107,255,.16); }
.chip.on::after { border-color: rgba(31,107,255,.5); }
.chip.on .t { color: var(--scan); }
.chip:active { transform: translateY(3px); }

.need-panels { grid-column: 1 / 2; }
.need-panel { display: none; }
.need-panel.show { display: block; animation: settle .55s var(--spring) 1; }
@keyframes settle { from { opacity: 0; transform: translateY(16px) rotate(-.5deg); } to { opacity: 1; transform: none; } }
.need-panel ul { list-style: none; margin: 16px 0 6px; }
.need-panel li { font-size: 15px; padding: 6px 0 6px 28px; position: relative; color: #39465e; }
.need-panel li::before { content: "✔"; position: absolute; left: 2px; color: var(--signal); font-weight: 700; }
.need-panel .exit { font-size: 14px; color: var(--ghost); margin-top: 12px; }

.tag-col { display: flex; justify-content: center; padding-top: 60px; }
#price-tag { --thread: 54px; padding: 24px 28px 20px; text-align: center; min-width: 214px;
  border-radius: 16px 16px 20px 20px; }
#price-tag > * { position: relative; z-index: 1; }
#price-tag .hole { width: 15px; height: 15px; border: 3px solid var(--ink); border-radius: 50%; margin: -6px auto 12px; background: var(--board); }
#tag-price { font-family: 'IBM Plex Mono', monospace; font-size: 35px; font-weight: 700; }
#tag-per { font-size: 13px; color: var(--ghost); }
#price-tag .tag-note { font-size: 12.5px; color: var(--ghost); margin-top: 12px; border-top: 2px dashed var(--line); padding-top: 11px; }

/* honesty */
.honesty { margin-top: 46px; padding: 28px 30px; border-color: var(--warn);
  box-shadow: 0 6px 0 rgba(192,122,18,.18), 0 20px 34px rgba(192,122,18,.1); background: #fffdf7; }
.honesty::after { border-color: rgba(192,122,18,.4); }
.honesty > * { position: relative; z-index: 1; }
.honesty .eyebrow { color: var(--warn); background: rgba(192,122,18,.12); border-color: rgba(192,122,18,.5); }
.honesty p { max-width: 46em; } .honesty strong { color: var(--warn); }

/* real people */
.real-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.real-card { padding: 22px; }
.real-card > * { position: relative; z-index: 1; }
.real-card h3 { font-size: 17px; margin-bottom: 7px; }
.real-card p { font-size: 14.5px; color: #39465e; }

/* FAQ */
.faq details { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px;
  padding: 14px 18px; margin: 12px 0; box-shadow: 0 4px 0 rgba(18,32,58,.1); }
.faq summary { font-weight: 700; cursor: pointer; font-size: 17px; }
.faq summary:hover { color: var(--scan); }
.faq details[open] summary { color: var(--scan); }
.faq details p { margin-top: 10px; color: #39465e; max-width: 46em; }

/* footer */
footer { margin-top: 74px; padding: 28px 0 44px; font-size: 14px; color: var(--ghost);
  border-top: 3px dashed rgba(18,32,58,.2); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--ink); font-weight: 600; }

@media (max-width: 820px) {
  .split, .steps, .proof, .real-grid, .need-wrap { grid-template-columns: 1fr; }
  .tag-col { padding-top: 44px; }
}
@media (max-width: 560px) {
  .hero h1 .hb { display: none; }
  .hero h1 { overflow-wrap: break-word; }
  nav { flex-wrap: wrap; row-gap: 8px; }
  .wordmark { font-size: 23px; }
  .nav-right { gap: 14px; font-size: 14px; flex-wrap: wrap; justify-content: flex-end; }
}

/* ===== v4 (Eric 08-26): new background, longer badge string, light stats, simpler AI pane, contact card ===== */
body {
  background-color: #f4f7fc;
  background-image: radial-gradient(circle, rgba(31,107,255,.13) 1.5px, transparent 1.7px);
  background-size: 24px 24px;
}
/* badge string anchors at the top of the hero, just under the nav — pin as the knot,
   never overshoots into the menu row so it can't sit behind/in front of the links (Eric 08-26) */
.score-hang { top: 168px; right: 6px; --thread: 160px; }
.hang::before { background: var(--ink); opacity: .4; width: 2.5px; }
/* stats panel: light, not dark */
.proof { background: var(--paper); color: var(--ink); }
.proof::after { border-color: rgba(18,32,58,.28); }
.proof .stat .big { color: var(--scan); }
.proof .stat .lbl { color: #39465e; }
/* simpler "what AI sees" pane */
.ai-view { position: relative; z-index: 1; padding: 26px 22px 30px; text-align: center; }
.ai-face { font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 54px; color: #4a5c82; line-height: 1; }
.ai-say { color: var(--machine-text); font-size: 15px; margin-top: 10px; }
.ai-say.dim { color: #6b7ea6; }
/* contact card */
.start .start-card { max-width: 700px; margin: 0 auto; padding: 36px 32px; text-align: center; }
.start-card > * { position: relative; z-index: 1; }
.start-card .lead { margin: 0 auto; }
.mailbox { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin: 24px 0 8px; padding: 10px 12px 10px 18px; background: #eef3ff; border: 2.5px solid var(--ink);
  border-radius: 14px; box-shadow: 0 4px 0 rgba(18,32,58,.14); }
.mb-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ghost); }
.mb-addr { font-size: 20px; font-weight: 600; color: var(--ink); }
.copybtn { padding: 9px 16px; font-size: 14px; }
.copybtn.copied { background: var(--signal); color: #fff; }
.start .cta-row { justify-content: center; }
.start-note { font-size: 14px; color: var(--ghost); margin-top: 18px; }
.foot-sep { margin: 0 3px; }
/* price tag: a long, obvious string that reaches up — never a floating stub */
#price-tag { --thread: 104px; }
.tag-col { padding-top: 118px; }
@media (max-width: 820px) { .tag-col { padding-top: 128px; } }

/* ERIC_APPROVED_COLLISION: append-only block at EOF; fresh re-read 08-26 confirms the
   peer session only touched .score-hang (line ~278), none of the selectors below. */

/* ===== v5 (Eric 08-26): lighten the "what AI sees" pane so it joins the light
   system v4 started; keep the metaphor — AI still sees a near-empty page. Plus a
   real free-check capture form on #start (form primary, email path kept below). ===== */

/* --- lighten the machine pane (was dark navy, the last dark box on the page) --- */
.pane-machine { background: var(--paper); }
.pane-machine::after { border-color: rgba(18,32,58,.28); }
.pane-machine .bar { border-color: rgba(18,32,58,.18); color: var(--ghost); }
.ai-view { padding: 24px 22px 30px; }
.ai-face { color: #b4bfd2; }                 /* a faint, unsure "?" on blank paper */
.ai-say { color: #45526a; }                  /* readable ink-grey on white */
.ai-say.dim { color: #5f6d86; }
.pane-machine .scanline { opacity: .85; }    /* scan sweep reads as "found nothing" */

/* --- the free-check capture form --- */
.check-form { margin: 26px auto 4px; max-width: 460px; text-align: left; }
.check-form .field { margin-bottom: 16px; }
.check-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
.check-form label .opt { font-weight: 400; color: var(--ghost); font-size: 13px; }
.check-form input[type="url"],
.check-form input[type="email"],
.check-form input[type="text"] {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 15px; background: #fff;
  border: 2.5px solid var(--ink); border-radius: 13px;
  box-shadow: 0 4px 0 rgba(18,32,58,.12);
  transition: box-shadow .12s var(--spring), transform .12s var(--spring);
}
.check-form input::placeholder { color: #9aa6bd; }
.check-form input:focus { outline: none; transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--scan), 0 0 0 3px rgba(31,107,255,.18); }
.check-form input:user-invalid { border-color: #c23b3b; box-shadow: 0 4px 0 rgba(194,59,59,.25); }
.check-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.check-form .form-submit { width: 100%; margin-top: 4px; }
.form-msg { min-height: 20px; margin-top: 14px; font-size: 14.5px; font-weight: 600; text-align: center; }
.form-msg.ok { color: var(--signal); }
.form-msg.err { color: #c23b3b; }
.check-form.sent { opacity: .55; pointer-events: none; }

/* the "or" divider on stitched dashes, then the kept email path */
.or-line { text-align: center; margin: 22px 0 16px; position: relative; color: var(--ghost);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.or-line::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(18,32,58,.2) 0 8px, transparent 8px 15px); }
.or-line span { position: relative; background: var(--paper); padding: 0 12px; }
.start .mailbox { margin: 0 auto 8px; }