/* =========================================================================
   SCARRED TRUTH — "Daybreak" light design system (shared, single source)
   Hybrid: warm-light canvas + floating cards; illustrated archetypes ("The
   Weight"); real cinematic photo/video for Zane, hero & story.
   Used by: index (home) · zane-ai (Talk to Zane) · quiz · story.
   The light half of the brand's own arc: dark 2am  ->  dawn, weight set down.
   Keep the soul: Fraunces / Newsreader / Spline Sans Mono + the seam + the tear.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,560;0,9..144,640;1,9..144,400;1,9..144,560&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Spline+Sans+Mono:wght@400;500;600&family=Caveat:wght@500;600;700&display=swap');

:root{
  --paper:#F7F2E9;        /* warm cream canvas */
  --paper-2:#FFFDF8;      /* warm white — floating cards */
  --ink:#2A231D;          /* warm near-black text */
  --ink-2:#5C5045;        /* secondary text */
  --dim:#9b8f80;          /* muted */
  --line:#E7DCC9;         /* hairline on cream */
  --line-soft:#efe7d8;
  --gold:#C9A05A;         /* decorative accent / the seam */
  --gold-deep:#9A6A1E;    /* gold used as TEXT on light */
  --ember:#BC6A43;        /* terracotta — eyebrows, emphasis, primary button */
  --oxblood:#9a443c;
  /* family color-coding + soft illustration grounds (warm only, no green) */
  --fam-vanish:#C2755C;   --bg-vanish:#F4E5DE;   /* invisible, lost — clay-rose */
  --fam-rest:#B0822E;     --bg-rest:#F6ECD3;     /* never, critic, impostor — ochre */
  --fam-measure:#6F7E94;  --bg-measure:#E4E8EE;  /* pleaser, behind — dusty blue */
  --fam-dream:#C9A05A;    --bg-dream:#F7EDD2;    /* steady — luminous gold */
  --display:'Fraunces',Georgia,serif; --body:'Newsreader',Georgia,serif;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;
  --maxw:1140px; --read:680px; --radius:16px;
  --shadow:0 1px 2px rgba(70,45,20,.04),0 16px 40px rgba(120,80,40,.07);
  --shadow-lift:0 1px 2px rgba(70,45,20,.05),0 28px 56px rgba(120,80,40,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.7 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* faint warm paper grain */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:2}
.read{max-width:var(--read);margin:0 auto}

/* ---- type ---- */
h1,h2,h3{font-family:var(--display);font-weight:560;font-optical-sizing:auto;letter-spacing:-.014em;margin:0;color:var(--ink)}
h1{font-size:clamp(44px,7vw,80px);line-height:1.0;font-weight:640}
h2{font-size:clamp(30px,4.6vw,46px);line-height:1.07;margin:0 0 16px}
h3{font-size:23px;line-height:1.22;font-weight:560}
p{margin:0 0 20px;color:var(--ink-2)}
.lead{font-size:clamp(20px,2.4vw,26px);line-height:1.48;color:var(--ink)}
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--ember);margin:0 0 18px;display:inline-block}
.dim{color:var(--dim)} em,.it{font-style:italic} .ember{color:var(--ember)} .gold{color:var(--gold-deep)}
.sec-head{text-align:center;max-width:680px;margin:0 auto 46px}

section{padding:84px 0;position:relative}
@media(max-width:640px){section{padding:54px 0}}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(247,242,233,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;padding:14px 26px;max-width:var(--maxw);margin:0 auto}
.brandmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brandmark span{font:600 13px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.nav{display:flex;gap:26px;align-items:center}
.nav a.lnk{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.nav a.lnk:hover{color:var(--ember)}
.navcta{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--ember);border-radius:3px;padding:11px 16px;transition:.18s}
.navcta:hover{filter:brightness(1.06)}
@media(max-width:720px){.nav .lnk{display:none}}

/* ---- buttons ---- */
.btn{display:inline-block;cursor:pointer;text-decoration:none;font:600 13.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--ember);padding:17px 28px;border:none;border-radius:3px;box-shadow:0 10px 26px rgba(188,106,67,.26);transition:transform .08s,filter .18s}
.btn:hover{filter:brightness(1.05)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.meta{font:500 12px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:16px}

/* ---- card primitive ---- */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---- the seam (gold stitch) + the torn-paper tear ---- */
.seam{position:relative;height:18px;overflow:hidden;margin:12px 0}
.seam .bar{position:absolute;inset:0;transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
  background:repeating-linear-gradient(90deg,transparent 0 16px,var(--ember) 16px 18px)}
.seam .bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:var(--gold-deep);opacity:.8;transform:translateY(-50%)}
.seam.in .bar{transform:scaleX(1)}
/* handwritten Zane signature sign-off (home origin + story close + quiz result) */
.sig-mark{margin:22px 0 6px}
.sig-mark::before{content:"";display:inline-block;width:40px;height:15px;vertical-align:middle;margin:0 13px 0 0;position:relative;top:-2px;opacity:.72;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Cpath d='M3 10 C18 5 34 8.4 49 7 C55 6.4 60 7.6 61 6.6' fill='none' stroke='%232A231D' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.sig-mark img{height:58px;width:auto;display:inline-block;opacity:.92;vertical-align:middle}
/* tear — a soft cream feather that melts the section above into whatever follows
   (paper-2 card or an image band); no jagged edge, no hard line. The old SVG is hidden. */
.tear{display:block;width:100%;height:88px;margin-bottom:-88px;line-height:0;position:relative;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 9%,rgba(247,242,233,0) 100%)}
.tear svg{display:none}
/* band — a colour section that feathers into the cream at both edges instead of a hard band line */
.band{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 88px,var(--paper-2) calc(100% - 96px),var(--paper) 100%)}

/* ===== HAND-DRAWN INSIGHT MARKS (site-wide support art) =====================
   Hand-inked marks that carry meaning beside a quote or section — never just
   decoration. One warm ember accent, same hand as the signature.
   .mark    inline glyph in text   ·  .markq  glyph centered over a headline
   .markbg  faint watermark behind a text-only block
   .ebmark  small glyph before an eyebrow label (quiz blocks, faqs, chapters)
   .diagram annotated "this-means-this" insight (img + handwritten scribbles) */
.mark{display:inline-block;vertical-align:middle;width:auto;height:1.7em;opacity:.95}
.mark--sm{height:1.2em} .mark--lg{height:2.6em}
.ebmark{display:inline-block;height:27px;width:auto;vertical-align:middle;margin:0 10px 6px 0;opacity:.95}
.markq{display:block;height:clamp(54px,9vw,78px);width:auto;margin:0 auto 18px;opacity:.96}
/* faint watermark — drop inside a position:relative parent; keep siblings above it */
.markbg{position:absolute;pointer-events:none;z-index:0;width:clamp(220px,30vw,400px);height:auto;
  opacity:.06;filter:sepia(.5) saturate(1.3) hue-rotate(-8deg)}

/* ---- annotated insight diagram (the hand-made visualization) ---- */
.diagram{position:relative;max-width:560px;margin:34px auto 8px;padding:6px 0}
.diagram .dimg{display:block;width:62%;margin:0 auto;height:auto}
.scribble{position:absolute;font-family:'Caveat',cursive;font-weight:700;color:var(--ink);
  font-size:clamp(19px,3vw,24px);line-height:1.02;white-space:nowrap;opacity:.96}
.scribble.accent{color:var(--ember)} .scribble.muted{color:var(--ink-2);font-weight:600}
.diagram .arrow{position:absolute;pointer-events:none;overflow:visible;z-index:2}
.diagram .arrow path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:.6}
.diagram .arrow.accent path{stroke:var(--ember);opacity:.85;stroke-width:2}
.diagram .dcap{text-align:center;font-family:'Caveat',cursive;font-weight:600;
  font-size:clamp(18px,2.8vw,22px);color:var(--ink-2);margin:6px 0 0}
@media(max-width:560px){.diagram .dimg{width:74%}.scribble{font-size:15px}}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---- big stat band (16P-style) ---- */
.statrow{display:flex;justify-content:space-around;gap:24px;flex-wrap:wrap;text-align:center}
.bigstat b{display:block;font-family:var(--display);font-weight:560;font-size:clamp(40px,6vw,64px);line-height:1;color:var(--ink)}
.bigstat span{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:12px;max-width:180px}

/* ---- illustrated type cards (set --fc + --cardbg per family) ---- */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:980px){.types{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.types{grid-template-columns:1fr}}
.tcard{overflow:hidden;text-align:left;transition:transform .22s ease,box-shadow .22s ease;cursor:pointer}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.tpix{aspect-ratio:1/1;background:var(--cardbg,var(--bg-dream));overflow:hidden}
.tpix img{width:100%;height:100%;object-fit:cover;display:block}
.tbody{padding:20px 22px 24px}
.tfam{font:600 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fc,var(--gold-deep));display:flex;align-items:center;gap:7px;margin-bottom:11px}
.tfam .dot{width:8px;height:8px;border-radius:50%;background:var(--fc,var(--gold))}
.tcard h3{font-size:22px;margin:0 0 8px}
.tcard .hk{font:400 15px/1.45 var(--body);color:var(--ink-2);margin:0}
.tcard .chip{display:inline-block;margin-top:14px;font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:7px 12px}

/* ---- featured / dream card ---- */
.dreamcard{display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
@media(max-width:820px){.dreamcard{grid-template-columns:1fr}}
.dreamcard .dpix{background:var(--bg-dream);min-height:340px}
.dreamcard .dpix img{width:100%;height:100%;object-fit:cover;display:block}
.dreamcard .dbody{padding:46px 44px}
@media(max-width:560px){.dreamcard .dbody{padding:30px 24px}}
.dreamcard h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:6px}
.dreamcard .sub{font-family:var(--display);font-style:italic;font-size:21px;color:var(--gold-deep);margin:0 0 18px}

/* ---- families explainer (16P "Understand others") ---- */
.fams{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
@media(max-width:860px){.fams{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:520px){.fams{grid-template-columns:1fr}}
.fam h3{display:flex;align-items:center;gap:10px;font-size:21px;margin-bottom:10px}
.fam h3::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--fc,var(--gold))}
.fam p{font-size:15px;color:var(--ink-2);margin:0 0 12px}
.fam .more{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fc,var(--gold-deep));text-decoration:none}

/* ---- testimonials / recognition quotes ---- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.qcard{padding:30px 28px 26px}
.qmark{font-family:var(--display);font-style:italic;font-weight:640;font-size:64px;line-height:.4;color:var(--gold);display:block;height:34px}
.qcard p{font-family:var(--display);font-style:italic;font-size:20px;line-height:1.42;color:var(--ink);margin:14px 0 18px}
.qcard .src{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ---- result (quiz) ---- */
.result{display:grid;grid-template-columns:.9fr 1.1fr;overflow:hidden}
@media(max-width:820px){.result{grid-template-columns:1fr}}
.result .rpix{background:var(--bg-vanish);min-height:360px}
.result .rpix img{width:100%;height:100%;object-fit:cover;display:block}
.rbody{padding:40px 40px 42px}
@media(max-width:560px){.rbody{padding:28px 24px}}
.rbody h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:6px}
.rbody .sub{font-family:var(--display);font-style:italic;font-size:20px;color:var(--fam-vanish);margin:0 0 22px}
.bars{margin:8px 0 22px}
.bar{margin-bottom:14px}
.bar .lab{display:flex;justify-content:space-between;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.bar .track{height:9px;background:var(--line-soft);border-radius:6px;overflow:hidden}
.bar .fill{height:100%;border-radius:6px;background:var(--fam-vanish);transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.in .bar .fill{transform:scaleX(var(--w,1))}
.note{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:20px 22px}
.note .nh{font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.note p{font-family:var(--display);font-style:italic;font-size:17.5px;line-height:1.5;color:var(--ink);margin:0}

/* ---- chat (zane.ai) ---- */
.phone{max-width:300px;margin:0 auto;background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:18px 15px 22px;box-shadow:var(--shadow)}
.phone .h{text-align:center;font:500 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:2px 0 16px}
.bub{font:400 15px/1.5 var(--body);padding:11px 14px;border-radius:13px;margin:0 0 10px;max-width:86%}
.bub.you{background:#F0E7D6;color:var(--ink);margin-left:auto;border-bottom-right-radius:4px}
.bub.z{background:#FBF3E2;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}

/* ---- accordion ---- */
.acc details{border-top:1px solid var(--line-soft)}
.acc details:last-child{border-bottom:1px solid var(--line-soft)}
.acc summary{cursor:pointer;list-style:none;padding:16px 2px;font-family:var(--display);font-size:19px;color:var(--ink);display:flex;justify-content:space-between;gap:14px;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--mono);color:var(--gold-deep)}
.acc details[open] summary::after{content:"\2013"}
.acc .a{padding:0 2px 18px;color:var(--ink-2);font-size:16px}

/* ---- faq ---- */
.faq{padding:22px 0;border-top:1px solid var(--line-soft)}
.faq:first-of-type{border-top:none}
.faq h3{color:var(--ink);font-size:20px;margin-bottom:7px}.faq p{margin:0;color:var(--ink-2);font-size:17px}

/* ---- cta card ---- */
.cta-card{text-align:center;padding:56px 40px;background:linear-gradient(180deg,#FFFDF8,#FBF4E8);border:1px solid var(--gold)}
@media(max-width:560px){.cta-card{padding:38px 24px}}

/* ---- footer ---- */
footer{padding:60px 0 70px;text-align:center;border-top:1px solid var(--line);margin-top:30px}
footer .brand{font:600 12px/1.5 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep)}
footer .fine{font:400 13px/1.6 var(--mono);letter-spacing:.03em;color:var(--dim);margin-top:10px}

/* ---- UNIFIED FOOTER: the journey image behind one CTA (same on every page) ---- */
footer.bigfoot{position:relative;margin-top:48px;padding:0;border:0;border-top:1px solid var(--line);overflow:hidden;text-align:center}
footer.bigfoot .ffmedia{position:absolute;inset:0;z-index:0;overflow:hidden}
footer.bigfoot .ffmedia img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;animation:none}
footer.bigfoot .ffmedia::after{content:"";position:absolute;inset:0;background:
  radial-gradient(125% 92% at 50% 50%,rgba(247,242,233,.40) 0%,rgba(247,242,233,.66) 44%,rgba(247,242,233,.9) 80%,var(--paper) 100%),
  linear-gradient(180deg,var(--paper) 0%,rgba(247,242,233,.5) 15%,rgba(247,242,233,.42) 50%,rgba(247,242,233,.74) 85%,var(--paper) 100%)}
footer.bigfoot .ffinner{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:132px 26px 88px}
footer.bigfoot .eyebrow{color:var(--ember)}
footer.bigfoot h2{font-size:clamp(30px,4.8vw,50px);margin:0 0 14px;text-shadow:0 2px 18px rgba(247,242,233,.95),0 1px 3px rgba(247,242,233,1)}
footer.bigfoot h2 em{color:var(--gold-deep);font-style:italic}
footer.bigfoot .fflead{color:var(--ink);font-size:clamp(16px,2vw,19px);line-height:1.5;margin:0 auto 30px;max-width:46ch;text-shadow:0 1px 12px rgba(247,242,233,1)}
footer.bigfoot .brand{font:600 12px/1.5 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-deep);margin:36px 0 0;display:block}
footer.bigfoot .fine{font:400 13px/1.6 var(--mono);letter-spacing:.03em;color:var(--ink-2);margin-top:10px;display:block}
footer.bigfoot .foot-care{max-width:var(--read);margin:18px auto 0;font:400 13px/1.6 var(--body);color:var(--ink-2)}
footer.bigfoot .foot-care strong{color:var(--gold-deep)} footer.bigfoot .foot-care a{color:var(--ember)}
@media(max-width:560px){footer.bigfoot .ffinner{padding:86px 22px 62px}}

/* ===== richer, clearly-visible motion ===== */
/* ambient float on hero illustrations (always on, no scroll needed) */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.heroband img,.heroimg img,.cband img{animation:floaty 7s ease-in-out infinite}
/* page-load entrance for the hero block */
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero .wrap,.hero-grid,.hero-card{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both}
/* staggered cascade: grid containers already carry .reveal, so children fan in one-by-one */
.types.reveal > *,.eight.reveal > *,.quotes.reveal > *,.fams.reveal > *,.statrow.reveal > *,.goodies.reveal > *,.mirrors.reveal > *,.mcards.reveal > *,.inher.reveal > *{
  opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.types.reveal.in > *,.eight.reveal.in > *,.quotes.reveal.in > *,.fams.reveal.in > *,.statrow.reveal.in > *,.goodies.reveal.in > *,.mirrors.reveal.in > *,.mcards.reveal.in > *,.inher.reveal.in > *{opacity:1;transform:none}
.reveal.in > *:nth-child(2){transition-delay:.07s}.reveal.in > *:nth-child(3){transition-delay:.13s}.reveal.in > *:nth-child(4){transition-delay:.19s}
.reveal.in > *:nth-child(5){transition-delay:.25s}.reveal.in > *:nth-child(6){transition-delay:.31s}.reveal.in > *:nth-child(7){transition-delay:.37s}
.reveal.in > *:nth-child(8){transition-delay:.43s}.reveal.in > *:nth-child(n+9){transition-delay:.49s}
/* card hover gets a touch more life */
.tcard,.qcard,.gcard{will-change:transform}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;animation:none!important}.reveal,.reveal > *{opacity:1!important;transform:none!important;transition:none!important}.seam .bar{transform:scaleX(1);transition:none}.in .bar .fill{transition:none}}