:root {
  --midnight: #08131f;
  --deep-tide: #102c38;
  --deep-tide-2: #173b46;
  --moon: #e9f0ea;
  --paper: #f7f8f3;
  --signal: #ff8066;
  --aura: #78d9d1;
  --ink: #101d26;
  --muted: #657078;
  --line: rgba(16, 29, 38, 0.14);
  --white: #fff;
  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", "Avenir Next", sans-serif;
  --utility: "DM Sans", "Avenir Next", sans-serif;
  --gold: #d8b45d;
  --shadow: 0 32px 80px rgba(4, 19, 28, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
main { display:block; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { overflow-wrap: normal; text-wrap: balance; }
p, li { overflow-wrap: break-word; }
h1, h2 { font-family: var(--display); font-optical-sizing:auto; font-weight: 600; letter-spacing: -.025em; }
h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5.3rem); line-height: 1.02; }
h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 16px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid rgba(233,240,234,.1);
  color: var(--moon);
  background: rgba(8,19,31,.78);
  box-shadow: 0 8px 28px rgba(4,19,28,.08);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.03em; }
.brand-mark { position: relative; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(120,217,209,.48); border-radius: 50%; }
.brand-mark::before, .brand-mark::after, .brand-mark i { position: absolute; border-radius: 50%; content: ""; }
.brand-mark::before { width: 5px; height: 5px; background: var(--signal); box-shadow: 0 0 14px var(--signal); }
.brand-mark::after { width: 20px; height: 20px; border: 1px solid rgba(233,240,234,.3); }
.brand-mark i { width: 27px; height: 12px; border-top: 1px solid var(--aura); transform: rotate(-28deg); }
.nav-links { display: flex; gap: clamp(18px,3vw,38px); color: rgba(233,240,234,.7); font-size: .78rem; font-weight: 700; }
.nav-links a { position:relative; padding: 8px 0; transition: color .2s ease; }
.nav-links a::after { position:absolute; right:0; bottom:1px; left:0; height:1px; content:""; background:var(--aura); transform:scaleX(0); transition:transform .2s ease; }
.nav-links a:hover,.nav-links a[aria-current="location"] { color: var(--white); }
.nav-links a[aria-current="location"]::after { transform:scaleX(1); }
.header-action { min-height: 42px; border: 1px solid rgba(233,240,234,.3); border-radius: 999px; padding: 9px 18px; background: rgba(120,217,209,.08); color: var(--moon); font-size: .78rem; font-weight: 800; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(380px,.72fr);
  align-items: center;
  gap: clamp(32px,6vw,100px);
  overflow: hidden;
  padding: 108px clamp(20px,5vw,76px) 64px;
  color: var(--moon);
  background: var(--midnight);
}
.hero-image, .hero-overlay, .hero-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { opacity: .3; object-fit: cover; object-position: center; filter: saturate(.65) hue-rotate(120deg) contrast(1.08); animation: imageDrift 20s ease-in-out infinite alternate; }
.hero-overlay { background: radial-gradient(circle at 74% 49%, rgba(120,217,209,.16), transparent 24%), linear-gradient(90deg, rgba(8,19,31,.98) 4%, rgba(8,19,31,.9) 47%, rgba(8,19,31,.5)); }
.hero-grain { opacity: .16; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.hero-content { position: relative; z-index: 2; max-width: 790px; }
.eyebrow, .section-kicker { margin: 0 0 18px; color: var(--deep-tide-2); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { color: var(--aura); }
.eyebrow span { color: rgba(233,240,234,.5); }
.hero h1 { max-width: 820px; margin: 0; font-family: var(--display); font-size: clamp(3.8rem,7vw,8rem); font-optical-sizing:auto; font-weight: 600; line-height: .98; letter-spacing: -.032em; }
.hero h1 em { display: block; margin-top: .1em; color: var(--signal); font-weight: 600; }
.hero-copy { max-width: 600px; margin: 30px 0 0; color: rgba(233,240,234,.7); font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.75; }
.mobile-path-list { display:none; }
.hero-actions, .result-actions, .email-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.primary-action, .secondary-action, .answer-button { min-height: 50px; border: 1px solid transparent; border-radius: 999px; padding: 13px 21px; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.primary-action { display:inline-flex; align-items:center; justify-content:center; border-color: var(--signal); background: var(--signal); color: var(--midnight); font-weight: 800; box-shadow: 0 10px 30px rgba(255,128,102,.2); }
.primary-action:hover, .secondary-action:hover, .answer-button:hover { transform: translateY(-2px); }
.primary-action:hover { box-shadow: 0 16px 40px rgba(255,128,102,.3); }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 22px; border-color: rgba(233,240,234,.25); background: transparent; color: inherit; font-weight: 700; }
.text-action { display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:10px 8px; color:rgba(233,240,234,.72); font-size:.86rem; font-weight:700; }
.text-action:hover { color:var(--white); }
.primary-action.small { min-height: 42px; margin-top: 18px; padding: 10px 16px; font-size: .8rem; }
.hero-metrics { display: flex; gap: 0; max-width: 610px; margin-top: 48px; border-top: 1px solid rgba(233,240,234,.18); }
.hero-metrics div { flex: 1; padding: 18px 18px 0 0; }
.hero-metrics div + div { padding-left: 18px; border-left: 1px solid rgba(233,240,234,.18); }
.hero-metrics strong { display: block; color: var(--moon); font-family: var(--display); font-size: 1.55rem; font-weight: 500; }
.hero-metrics span { display: block; margin-top: 5px; color: rgba(233,240,234,.5); font-size: .68rem; line-height: 1.4; }

.path-map-card { position: relative; z-index: 3; min-height: 620px; border: 1px solid rgba(120,217,209,.22); border-radius: 50% 50% 32px 32px; padding: 28px; background: linear-gradient(165deg,rgba(16,44,56,.72),rgba(8,19,31,.46)); box-shadow: 0 40px 100px rgba(0,0,0,.35); backdrop-filter: blur(14px); }
.map-meta { display: flex; justify-content: space-between; color: rgba(233,240,234,.5); font-size: .58rem; font-weight: 800; letter-spacing: .14em; }
.map-meta span:last-child { color: var(--aura); }
.aura-orbit { position: relative; display: grid; width: min(420px,90%); aspect-ratio: 1; margin: 32px auto 12px; place-items: center; }
.orbit, .aura-core, .signal { position: absolute; }
.orbit { border: 1px solid rgba(120,217,209,.2); border-radius: 50%; }
.orbit-one { inset: 7%; animation: orbitPulse 7s ease-in-out infinite; }
.orbit-two { inset: 19%; border-style: dashed; animation: spin 22s linear infinite; }
.orbit-three { inset: 31%; border-color: rgba(255,128,102,.28); }
.aura-core { display: grid; width: 30%; aspect-ratio: 1; place-items: center; border: 1px solid rgba(233,240,234,.5); border-radius: 50%; background: radial-gradient(circle at 38% 35%,var(--moon),var(--aura) 38%,rgba(120,217,209,.05) 70%); box-shadow: 0 0 70px rgba(120,217,209,.34); }
.aura-core i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 18px var(--signal); }
.aura-core b { position:absolute; top:calc(50% + 18px); color:rgba(8,19,31,.68); font-size:.52rem; letter-spacing:.14em; }
.aura-orbit::before { position: absolute; width: 84%; height: 1px; content: ""; background: linear-gradient(90deg,transparent,rgba(233,240,234,.35),transparent); transform: rotate(-24deg); }
.signal { color: rgba(233,240,234,.56); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.signal::before { display: inline-block; width: 4px; height: 4px; margin-right: 7px; border-radius: 50%; content: ""; background: var(--signal); box-shadow: 0 0 10px var(--signal); }
.signal-one { top: 11%; left: 22%; }.signal-two { top: 48%; right: -2%; }.signal-three { bottom: 12%; left: 10%; }
.map-reading { display: grid; gap: 6px; margin-top: 8px; border-top: 1px solid rgba(233,240,234,.16); padding-top: 20px; }
.map-reading span { color: var(--aura); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.map-reading strong { font-family: var(--display); font-size: 1.8rem; font-weight: 500; }
.map-reading small { max-width: 320px; color: rgba(233,240,234,.52); line-height: 1.6; }
.path-node { position:absolute; z-index:3; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:7px; border:0; padding:0; background:transparent; color:var(--moon); text-align:left; transition:transform .2s ease,color .2s ease; }
.path-node > i { grid-row:1/3; align-self:center; width:8px; height:8px; border:1px solid var(--aura); border-radius:50%; background:var(--midnight); box-shadow:0 0 0 5px rgba(120,217,209,.08),0 0 16px rgba(120,217,209,.35); }
.path-node strong { font-family:var(--display); font-size:.9rem; font-weight:500; line-height:1; }
.path-node small { color:rgba(233,240,234,.42); font-size:.48rem; letter-spacing:.1em; text-transform:uppercase; }
.path-node:hover,.path-node:focus-visible { color:var(--signal); transform:translateY(-3px); }
.path-node:hover > i,.path-node:focus-visible > i { border-color:var(--signal); box-shadow:0 0 0 5px rgba(255,128,102,.08),0 0 18px rgba(255,128,102,.45); }
.node-love { top:8%; left:18%; }.node-soul { top:24%; right:-1%; }.node-life { right:5%; bottom:18%; }.node-wisdom { bottom:5%; left:18%; }.node-guide { top:47%; left:-3%; }

.trust-strip, .how-section, .preview-section, .library-section, .pattern-section, .flow-section, .report-section, .faq-section { padding: clamp(72px,10vw,150px) clamp(20px,6vw,96px); }
.trust-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; padding-block: 38px; background: var(--moon); }
.trust-strip div { padding: 6px clamp(0px,3vw,40px); }
.trust-strip div + div { border-left: 1px solid var(--line); }
.trust-strip strong, .trust-strip span { display: block; }
.trust-strip strong { font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.trust-strip span { margin-top: 8px; color: var(--muted); font-size: .75rem; line-height: 1.65; }

.how-section { background:#edf3ee; }
.how-section .section-heading { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr); gap:20px clamp(36px,7vw,100px); align-items:end; max-width:1180px; }
.how-section .section-heading .section-kicker { grid-column:1/-1; margin:0; }
.how-section .section-heading p:last-child { margin:0; }
.journey-steps { display:grid; grid-template-columns:repeat(3,1fr); max-width:1180px; margin:64px 0 0; padding:0; border-top:1px solid var(--line); list-style:none; }
.journey-steps li { position:relative; padding:30px clamp(20px,3vw,38px) 0 0; }
.journey-steps li + li { border-left:1px solid var(--line); padding-left:clamp(20px,3vw,38px); }
.journey-steps span { display:block; margin-bottom:42px; color:var(--signal); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.journey-steps strong { display:block; max-width:280px; font-family:var(--display); font-size:clamp(1.55rem,2.5vw,2.25rem); font-weight:500; line-height:1.05; }
.journey-steps p { max-width:300px; margin:14px 0 0; color:var(--muted); font-size:.8rem; line-height:1.65; }

.preview-section { display: grid; grid-template-columns: minmax(0,.88fr) minmax(380px,.72fr); gap: clamp(50px,10vw,160px); align-items: center; }
.preview-copy > p:not(.section-kicker), .section-heading p, .quiz-intro p, .report-offer p, .offer-card p, footer p { color: var(--muted); line-height: 1.75; }
.preview-copy > p:not(.section-kicker) { max-width: 630px; font-size: 1.05rem; }
.preview-list { display: grid; gap: 0; margin: 28px 0; padding: 0; list-style: none; }
.preview-list li { padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .86rem; }
.preview-list li::before { margin-right: 13px; content: "↳"; color: var(--signal); }
.value-ladder { display:grid; gap:0; margin:28px 0; padding:0; border-top:1px solid var(--line); list-style:none; }
.value-ladder li { display:grid; grid-template-columns:minmax(110px,.45fr) minmax(130px,.6fr) minmax(0,1.25fr); gap:16px; align-items:start; padding:17px 0; border-bottom:1px solid var(--line); }
.value-ladder span { color:var(--signal); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.value-ladder strong { font-family:var(--display); font-size:1.2rem; line-height:1.05; }
.value-ladder p { margin:0; color:var(--muted); font-size:.76rem; line-height:1.55; }
.sample-result { position: relative; display: grid; gap: 18px; min-height: 610px; overflow: hidden; border-radius: 48% 48% 24px 24px; padding: clamp(30px,4vw,50px); background: var(--deep-tide); color: var(--moon); box-shadow: var(--shadow); }
.sample-result::before { position: absolute; top: -130px; right: -110px; width: 360px; height: 360px; border: 1px solid rgba(120,217,209,.22); border-radius: 50%; content: ""; box-shadow: 0 0 0 44px rgba(120,217,209,.04),0 0 0 88px rgba(120,217,209,.025); }
.sample-topline, .result-brand { position: relative; display: flex; justify-content: space-between; gap: 16px; color: var(--aura); font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sample-label { margin: auto 0 0; color: var(--aura); font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sample-result h3 { max-width: 450px; font-family: var(--display); font-size: clamp(3.15rem,5.5vw,5.8rem); font-weight: 600; line-height: .98; letter-spacing: -.028em; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.tag-list span, .lock-badge { display: inline-flex; width: fit-content; border: 1px solid currentColor; border-radius: 999px; padding: 6px 10px; color: var(--muted); font-size: .65rem; font-weight: 700; }
.sample-result .tag-list span, .result-card .tag-list span { color: var(--aura); }
.sample-quote { color: rgba(233,240,234,.7); font-family: var(--display); font-size: 1.25rem; font-style: italic; line-height: 1.55; }
.sample-insight { display: grid; gap: 5px; border-top: 1px solid rgba(233,240,234,.2); padding-top: 18px; }
.sample-insight span, .sample-footer { color: rgba(233,240,234,.5); }.sample-footer { margin-top: auto; font-size: .68rem; }

.flow-section { position: relative; overflow: hidden; background: var(--midnight); color: var(--moon); }
.flow-section::before { position: absolute; top: -30vw; right: -25vw; width: 70vw; height: 70vw; border: 1px solid rgba(120,217,209,.08); border-radius: 50%; content: ""; box-shadow: 0 0 0 8vw rgba(120,217,209,.025),0 0 0 16vw rgba(120,217,209,.02); }
.quiz-shell { position: relative; display: grid; grid-template-columns: minmax(260px,.62fr) minmax(0,1.38fr); gap: clamp(40px,7vw,110px); align-items: start; }
.quiz-intro { position: sticky; top: 36px; }.quiz-intro .section-kicker { color: var(--aura); }.quiz-intro h2 { font-size: clamp(2.8rem,5vw,5.6rem); }.quiz-intro p { color: rgba(233,240,234,.55); }
.flow-list { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.flow-list li { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(233,240,234,.12); padding: 12px 0; color: rgba(233,240,234,.55); font-size: .78rem; }
.flow-list span { color: var(--signal); font-size: .62rem; font-weight: 800; }
.quiz-panel { min-height: 590px; border: 1px solid rgba(120,217,209,.18); border-radius: 28px; padding: clamp(22px,4vw,48px); background: rgba(16,44,56,.44); box-shadow: 0 40px 100px rgba(0,0,0,.26); backdrop-filter: blur(16px); }
.panel-enter { animation: panelIn .28s ease both; }
.progress-track { height: 2px; background: rgba(233,240,234,.14); }
.progress-fill { position: relative; width: var(--progress); height: 100%; background: linear-gradient(90deg,var(--signal),var(--aura)); transition: width .28s ease; }
.progress-fill::after { position: absolute; top: 50%; right: -5px; width: 10px; height: 10px; border-radius: 50%; content: ""; background: var(--aura); box-shadow: 0 0 18px var(--aura); transform: translateY(-50%); }
.question-count { margin: 24px 0 12px; color: var(--aura); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.question-title { max-width: 720px; margin: 0 0 30px; font-family: var(--display); font-size: clamp(2rem,3.7vw,3.4rem); font-weight: 600; line-height: 1.08; letter-spacing: -.022em; }
.answer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.answer-button { position: relative; width: 100%; min-height: 88px; border-radius: 14px; border-color: rgba(233,240,234,.14); padding: 18px 44px 18px 18px; background: rgba(8,19,31,.42); color: rgba(233,240,234,.82); text-align: left; line-height: 1.45; }
.answer-button::after { position: absolute; top: 18px; right: 18px; content: "○"; color: rgba(120,217,209,.5); }
.answer-button:hover, .answer-button:focus-visible { border-color: var(--aura); background: rgba(120,217,209,.08); outline: none; }
.answer-button.is-picked { border-color: var(--signal); background: rgba(255,128,102,.1); }.answer-button.is-picked::after { content: "●"; color: var(--signal); }
.question-back { margin-top: 20px; border: 0; padding: 8px 0; background: transparent; color: rgba(233,240,234,.6); font-size: .75rem; }
.loading-result { display: grid; min-height: 470px; place-items: center; text-align: center; }.loading-result .section-kicker { color: var(--aura); }.loading-result p { color: rgba(233,240,234,.55); }
.loading-orbit { position: relative; width: 112px; height: 112px; margin: 0 auto 28px; border: 1px solid rgba(120,217,209,.25); border-radius: 50%; }
.loading-orbit::before, .loading-orbit::after { position: absolute; border-radius: 50%; content: ""; }.loading-orbit::before { inset: 18px; border: 1px dashed rgba(255,128,102,.4); }.loading-orbit::after { width: 13px; height: 13px; background: var(--aura); box-shadow: 0 0 16px var(--aura); animation: resultOrbit 1.4s linear infinite; }
.result-card { position: relative; display: grid; gap: 17px; overflow: hidden; border: 1px solid rgba(120,217,209,.25); border-radius: 24px; padding: clamp(24px,4vw,42px); background: linear-gradient(145deg,var(--deep-tide),#0a1c28); animation: resultPop .36s ease both; }
.result-card::after { position: absolute; top: -100px; right: -100px; width: 280px; height: 280px; border: 1px solid rgba(120,217,209,.15); border-radius: 50%; content: ""; box-shadow: 0 0 0 40px rgba(120,217,209,.025); }
.result-card h3 { position: relative; font-family: var(--display); font-size: clamp(2.9rem,5.5vw,5rem); font-weight: 600; line-height: .98; letter-spacing: -.028em; }.result-card p { position: relative; color: rgba(233,240,234,.64); line-height: 1.7; }.result-brand { margin-bottom: 6px; }
.share-studio { display:grid; grid-template-columns:minmax(0,.9fr) minmax(210px,.55fr); gap:22px; align-items:center; margin-top:22px; border:1px solid rgba(120,217,209,.2); border-radius:20px; padding:20px; background:rgba(8,19,31,.5); }
.share-studio-copy { display:grid; gap:9px; align-content:center; }
.share-studio-copy > span { color:var(--aura); font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.share-studio-copy strong { max-width:420px; font-family:var(--display); font-size:clamp(1.65rem,3vw,2.45rem); font-weight:600; line-height:1.02; }
.share-studio-copy p { max-width:430px; margin:0; color:rgba(233,240,234,.55); font-size:.76rem; line-height:1.6; }
.share-formats { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.share-formats button { border:1px solid rgba(233,240,234,.16); border-radius:999px; padding:8px 11px; background:transparent; color:rgba(233,240,234,.62); font-size:.65rem; font-weight:750; }
.share-formats button[aria-pressed="true"] { border-color:var(--signal); background:rgba(255,128,102,.1); color:var(--signal); }
.share-preview-frame { display:grid; width:min(220px,100%); aspect-ratio:4/5; overflow:hidden; justify-self:end; place-items:center; border:1px solid rgba(233,240,234,.14); border-radius:14px; background:#08131f; box-shadow:0 18px 45px rgba(0,0,0,.25); transition:aspect-ratio .2s ease,width .2s ease; }
.share-preview-frame[data-format="story"] { width:min(180px,100%); aspect-ratio:9/16; }
.share-preview-frame[data-format="og"] { width:100%; aspect-ratio:1200/630; }
.share-preview-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.share-preview-frame.is-loading::after { content:"Preparing preview…"; color:rgba(233,240,234,.45); font-size:.65rem; }
.share-preview-frame.is-loading img { display:none; }
.insight-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.insight-grid div { border: 1px solid rgba(233,240,234,.12); border-radius: 14px; padding: 16px; color: rgba(233,240,234,.62); }.insight-grid strong { display: block; margin-bottom: 6px; color: var(--moon); font-size: .72rem; }
.next-step { position: relative; display: grid; gap: 6px; border-left: 2px solid var(--signal); padding: 13px 16px; background: rgba(255,128,102,.07); }.next-step span { color: rgba(233,240,234,.65); line-height: 1.55; }
.result-actions .secondary-action { border-color: rgba(233,240,234,.18); color: var(--moon); }
.early-access { display: grid; grid-template-columns: minmax(190px,1fr) minmax(170px,.7fr) auto; gap: 10px; align-items: center; margin-top: 20px; border: 1px solid rgba(233,240,234,.14); border-radius: 16px; padding: 16px; background: rgba(8,19,31,.45); }.early-access > div { display: grid; gap: 4px; }.early-access span { color: rgba(233,240,234,.5); font-size: .68rem; }.early-access input { width: 100%; min-height: 50px; border: 1px solid rgba(233,240,234,.16); border-radius: 999px; padding: 0 16px; background: rgba(233,240,234,.08); color: var(--moon); }.early-access input::placeholder { color: rgba(233,240,234,.4); }
.checkout-action { width: 100%; min-height: 50px; margin-top: 10px; border: 1px solid var(--signal); border-radius: 999px; background: transparent; color: var(--signal); font-weight: 800; }.confirmation { color: var(--aura); font-weight: 700; }.form-success { display: grid; grid-column: 1/-1; gap: 5px; }.form-success span { color: rgba(233,240,234,.55); }.honeypot,.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.library-section { background: var(--moon); }.section-heading { max-width: 920px; margin-bottom: 52px; }.section-heading > p:last-child { max-width: 680px; }
.path-tabs { display:flex; gap:8px; overflow-x:auto; margin:0 0 18px; padding:0 0 8px; scrollbar-width:thin; }
.path-tabs button { flex:0 0 auto; min-width:150px; border:1px solid var(--line); border-radius:14px; padding:13px 16px; background:rgba(255,255,255,.38); color:var(--ink); text-align:left; font-weight:750; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.path-tabs button span { display:block; margin-bottom:4px; color:var(--muted); font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.path-tabs button[aria-selected="true"] { border-color:var(--deep-tide); background:var(--deep-tide); color:var(--moon); transform:translateY(-2px); }
.path-tabs button[aria-selected="true"] span { color:var(--aura); }
.path-library { overflow:hidden; border:1px solid var(--line); border-radius:28px; background:rgba(255,255,255,.52); box-shadow:0 22px 70px rgba(8,19,31,.07); }
.path-library-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:end; padding:clamp(24px,4vw,46px); border-bottom:1px solid var(--line); background:linear-gradient(120deg,rgba(255,255,255,.82),rgba(120,217,209,.08)); }
.path-library-head h3 { font-family:var(--display); font-size:clamp(2.6rem,5.5vw,5.35rem); font-weight:600; line-height:1; letter-spacing:-.028em; }
.path-library-head p:not(.section-kicker) { max-width:660px; margin:12px 0 0; color:var(--muted); line-height:1.7; }
.path-progress { display:grid; min-width:150px; gap:4px; padding-left:24px; border-left:1px solid var(--line); }
.path-progress strong { font-family:var(--display); font-size:2.1rem; font-weight:500; }
.path-progress span { color:var(--muted); font-size:.68rem; line-height:1.4; }
.test-collection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.test-card { position:relative; display:grid; min-height:255px; align-content:start; border-bottom:1px solid var(--line); padding:clamp(22px,3vw,34px); }
.test-card:nth-child(odd) { border-right:1px solid var(--line); }
.test-card:last-child { grid-column:1/-1; border-bottom:0; border-right:0; }
.test-card.is-deep { min-height:280px; color:var(--moon); background:linear-gradient(125deg,var(--midnight),var(--deep-tide)); }
.test-card.is-deep::after { position:absolute; right:-80px; bottom:-170px; width:360px; height:360px; border:1px solid rgba(120,217,209,.15); border-radius:50%; content:""; box-shadow:0 0 0 44px rgba(120,217,209,.025); }
.test-card.is-locked { background:rgba(16,44,56,.035); }
.test-card-top { position:relative; z-index:1; display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:.62rem; font-style:normal; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.test-card-top i { font-style:normal; font-weight:600; letter-spacing:0; text-transform:none; }
.test-card.is-deep .test-card-top { color:var(--aura); }
.test-card h4 { position:relative; z-index:1; max-width:620px; margin:44px 0 0; font-family:var(--display); font-size:clamp(1.95rem,3.65vw,3.25rem); font-weight:600; line-height:1.04; letter-spacing:-.025em; }
.test-card p { position:relative; z-index:1; max-width:610px; margin:12px 0 24px; color:var(--muted); font-size:.8rem; line-height:1.65; }
.test-card.is-deep p { color:rgba(233,240,234,.56); }
.test-card-action { position:relative; z-index:2; width:fit-content; margin-top:auto; border:0; border-bottom:1px solid currentColor; padding:5px 0; background:transparent; color:var(--deep-tide); font-size:.74rem; font-weight:800; }
.test-card.is-deep .test-card-action { color:var(--signal); }
.test-card-note { position:relative; z-index:1; width:fit-content; margin-top:auto; border:1px solid var(--line); border-radius:999px; padding:8px 11px; color:var(--muted); font-size:.66rem; }
.deep-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.deep-facts span { border:1px solid var(--line); border-radius:999px; padding:8px 12px; color:var(--deep-tide); font-size:.68rem; font-weight:750; }
.offer-card small { color:rgba(233,240,234,.4); font-size:.62rem; line-height:1.5; }
.deep-checkout-notice { margin:0; color:var(--aura) !important; font-size:.72rem; }
.unlock-status { display:grid; gap:5px; margin-top:18px; border:1px solid rgba(255,128,102,.28); border-radius:14px; padding:14px 16px; background:rgba(255,128,102,.07); }
.unlock-status strong { color:var(--signal); }.unlock-status span { color:rgba(233,240,234,.56); font-size:.72rem; line-height:1.5; }
.unlock-status.is-unlocked { border-color:rgba(120,217,209,.35); background:rgba(120,217,209,.08); }.unlock-status.is-unlocked strong { color:var(--aura); }
.result-boundary { border-top:1px solid rgba(233,240,234,.12); padding-top:14px; font-size:.76rem; }
.pattern-signal { position:relative; display:grid; grid-template-columns:1fr auto; gap:7px 18px; border:1px solid rgba(216,180,93,.28); border-radius:16px; padding:18px; background:rgba(216,180,93,.07); }
.pattern-signal > span { color:var(--gold); font-family:var(--utility); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.pattern-signal strong { grid-column:1; color:var(--moon); font-family:var(--display); font-size:1.65rem; font-weight:400; }
.pattern-signal p { grid-column:1; margin:0; font-size:.76rem; }
.pattern-signal button { grid-column:2; grid-row:1/4; align-self:center; border:0; border-bottom:1px solid var(--gold); padding:6px 0; background:transparent; color:var(--gold); font-size:.7rem; font-weight:700; }

.pattern-section { position:relative; overflow:hidden; background:#0b1b27; color:var(--moon); }
.pattern-section::before { position:absolute; inset:0; pointer-events:none; content:""; background:linear-gradient(rgba(120,217,209,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(120,217,209,.035) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.pattern-heading { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.55fr); gap:30px 80px; align-items:end; max-width:1180px; margin:0 auto 62px; }
.pattern-heading .section-kicker { grid-column:1/-1; margin-bottom:0; color:var(--aura); }
.pattern-heading h2 { max-width:900px; font-size:clamp(3.2rem,6.4vw,6.8rem); line-height:1; }
.pattern-heading > p:last-child { margin:0; color:rgba(233,240,234,.56); font-size:.9rem; line-height:1.75; }
.pattern-atlas { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(190px,.45fr); grid-template-rows:auto auto; max-width:1280px; margin:auto; border:1px solid rgba(120,217,209,.18); border-radius:30px; background:rgba(8,19,31,.62); box-shadow:0 48px 130px rgba(0,0,0,.28); }
.pattern-field { --pattern-accent:#78d9d1; --pattern-soft:rgba(120,217,209,.22); position:relative; display:flex; min-height:620px; overflow:hidden; align-items:flex-end; isolation:isolate; border-right:1px solid rgba(120,217,209,.16); padding:clamp(28px,5vw,62px); background:linear-gradient(145deg,#102c38,#07121d); transition:background .55s ease; }
.pattern-field::before,.pattern-field::after,.weather { position:absolute; pointer-events:none; content:""; }
.pattern-field::before,.pattern-field::after { z-index:-1; }
.weather { z-index:-2; transition:opacity .35s ease,transform .55s ease,background .55s ease; }
.weather-rings { inset:0; }
.weather-line { display:block; }
.pattern-field-copy { position:relative; z-index:2; max-width:660px; }
.pattern-field-copy > span,.pattern-field-copy > p:first-of-type { font-family:var(--utility); font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.pattern-field-copy > span { color:var(--gold); }.pattern-field-copy > p:first-of-type { margin:14px 0 26px; color:rgba(233,240,234,.4); }
.pattern-field h3 { max-width:660px; font-family:var(--display); font-size:clamp(3.9rem,7.3vw,7.7rem); font-weight:600; line-height:.94; letter-spacing:-.028em; }
.pattern-field blockquote { margin:30px 0 14px; color:var(--signal); font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2.1rem); font-style:italic; }
.pattern-field-copy > p:last-child { max-width:580px; margin:0; color:rgba(233,240,234,.58); line-height:1.65; }

/* Quiet Flame: a small ember protected by a closing metallic shell. */
.pattern-field[data-weather="flame"] { --pattern-accent:#ff8066; --pattern-soft:rgba(255,128,102,.28); background:radial-gradient(circle at 72% 29%,rgba(255,128,102,.16),transparent 23%),linear-gradient(145deg,#152833,#08131f); }
.pattern-field[data-weather="flame"]::before { top:8%; right:9%; width:min(48%,380px); aspect-ratio:.82; border:1px solid rgba(233,240,234,.2); border-radius:54% 54% 42% 42% / 68% 68% 32% 32%; background:linear-gradient(105deg,rgba(233,240,234,.06),transparent 46%,rgba(216,180,93,.08)); box-shadow:inset 0 0 70px rgba(8,19,31,.75),0 0 0 22px rgba(233,240,234,.018); animation:flameShell 7s ease-in-out infinite; }
.pattern-field[data-weather="flame"]::after { top:31%; right:25%; width:38px; height:58px; border-radius:72% 28% 66% 34% / 72% 46% 54% 28%; background:radial-gradient(circle at 55% 60%,#ffd49a 0 9%,#ff8066 30%,rgba(255,128,102,.06) 72%); box-shadow:0 0 26px 8px rgba(255,128,102,.46),0 0 90px 30px rgba(255,128,102,.16); transform:rotate(8deg); animation:emberPulse 3.8s ease-in-out infinite; }
.pattern-field[data-weather="flame"] .weather-rings { inset:12% 9% auto auto; width:min(48%,380px); aspect-ratio:.82; border-right:1px solid rgba(216,180,93,.32); border-left:1px solid rgba(233,240,234,.08); border-radius:54% 54% 42% 42% / 68% 68% 32% 32%; }
.pattern-field[data-weather="flame"] .weather-line { top:12%; right:31%; width:1px; height:48%; background:linear-gradient(transparent,rgba(216,180,93,.5),transparent); opacity:.55; }

/* Deep River: layered channels narrow toward a distant vanishing point. */
.pattern-field[data-weather="river"] { --pattern-accent:#78d9d1; background:radial-gradient(ellipse at 74% 18%,rgba(120,217,209,.22),transparent 19%),linear-gradient(155deg,#123846,#071722 68%); }
.pattern-field[data-weather="river"]::before { top:7%; right:3%; width:60%; height:76%; border-radius:50% 10% 50% 12%; background:repeating-radial-gradient(ellipse at 86% 0%,transparent 0 34px,rgba(120,217,209,.16) 36px 38px,transparent 40px 65px); transform:rotate(-10deg); animation:riverDrift 10s ease-in-out infinite alternate; }
.pattern-field[data-weather="river"]::after { top:15%; right:17%; width:9px; height:9px; border-radius:50%; background:#c8fff7; box-shadow:0 0 25px 8px rgba(120,217,209,.5); }
.pattern-field[data-weather="river"] .weather-rings { top:14%; right:10%; width:46%; height:58%; border-radius:50%; background:repeating-linear-gradient(164deg,transparent 0 27px,rgba(233,240,234,.08) 28px 29px,transparent 30px 48px); clip-path:polygon(66% 0,100% 0,72% 100%,0 100%); opacity:.8; }
.pattern-field[data-weather="river"] .weather-line { top:12%; right:30%; width:2px; height:68%; background:linear-gradient(rgba(200,255,247,.65),rgba(120,217,209,.05)); transform:rotate(17deg); transform-origin:top; animation:riverLine 7s ease-in-out infinite; }

/* Steady Earth: a low centre of gravity built from horizontal strata. */
.pattern-field[data-weather="earth"] { --pattern-accent:#d8b45d; --pattern-soft:rgba(216,180,93,.26); background:linear-gradient(162deg,#29362f,#111d25 68%); }
.pattern-field[data-weather="earth"]::before { right:-4%; bottom:15%; width:64%; height:58%; border-radius:52% 48% 8% 10%; background:repeating-linear-gradient(to bottom,rgba(216,180,93,.22) 0 2px,transparent 2px 42px),linear-gradient(150deg,rgba(216,180,93,.12),transparent); clip-path:polygon(48% 0,100% 30%,100% 100%,0 100%,8% 42%); animation:earthSettle 8s ease-in-out infinite; }
.pattern-field[data-weather="earth"]::after { right:12%; bottom:13%; width:48%; height:10px; border-radius:50%; background:rgba(216,180,93,.5); box-shadow:0 0 50px 12px rgba(216,180,93,.13); }
.pattern-field[data-weather="earth"] .weather-rings { right:6%; bottom:18%; width:55%; height:45%; background:repeating-linear-gradient(176deg,transparent 0 45px,rgba(233,240,234,.07) 46px 48px); clip-path:polygon(0 42%,48% 0,100% 34%,100% 100%,0 100%); }
.pattern-field[data-weather="earth"] .weather-line { right:13%; bottom:27%; width:44%; height:1px; background:linear-gradient(90deg,transparent,#d8b45d,transparent); }

/* Golden Shield: a clear, symmetrical boundary around a warm interior. */
.pattern-field[data-weather="shield"] { --pattern-accent:#e2bd61; background:radial-gradient(circle at 72% 34%,rgba(216,180,93,.18),transparent 24%),linear-gradient(145deg,#132b38,#07131e); }
.pattern-field[data-weather="shield"]::before { top:8%; right:10%; width:min(47%,360px); aspect-ratio:.78; border:2px solid rgba(226,189,97,.55); border-radius:48% 48% 44% 44% / 25% 25% 72% 72%; background:linear-gradient(135deg,rgba(233,240,234,.1),transparent 38%,rgba(216,180,93,.08)); box-shadow:inset 0 0 0 18px rgba(216,180,93,.025),inset 0 0 80px rgba(216,180,93,.08),0 0 55px rgba(216,180,93,.1); clip-path:polygon(50% 0,94% 15%,88% 70%,50% 100%,12% 70%,6% 15%); animation:shieldGlow 7s ease-in-out infinite; }
.pattern-field[data-weather="shield"]::after { top:32%; right:27%; width:34px; height:34px; border-radius:50%; background:#f0c86b; box-shadow:0 0 32px 12px rgba(216,180,93,.4); }
.pattern-field[data-weather="shield"] .weather-rings { top:17%; right:16%; width:35%; aspect-ratio:.78; border:1px solid rgba(233,240,234,.14); clip-path:polygon(50% 0,94% 15%,88% 70%,50% 100%,12% 70%,6% 15%); }
.pattern-field[data-weather="shield"] .weather-line { top:13%; right:31%; width:1px; height:53%; background:linear-gradient(transparent,rgba(226,189,97,.7),transparent); animation:shieldScan 4.5s ease-in-out infinite; }

/* Wild Forest: asymmetric branches keep reaching up and out. */
.pattern-field[data-weather="forest"] { --pattern-accent:#75d49c; background:radial-gradient(ellipse at 76% 18%,rgba(117,212,156,.2),transparent 27%),linear-gradient(145deg,#15362e,#07171e); }
.pattern-field[data-weather="forest"]::before { right:3%; bottom:4%; width:61%; height:82%; background:linear-gradient(71deg,transparent 48%,rgba(117,212,156,.38) 49% 50%,transparent 51%),linear-gradient(114deg,transparent 53%,rgba(117,212,156,.28) 54% 55%,transparent 56%),linear-gradient(36deg,transparent 58%,rgba(233,240,234,.12) 59% 60%,transparent 61%); transform-origin:bottom; animation:forestGrow 9s ease-in-out infinite alternate; }
.pattern-field[data-weather="forest"]::after { top:13%; right:11%; width:9px; height:9px; border-radius:60% 0 60% 0; background:#b8f3ce; box-shadow:-80px 70px 0 3px rgba(117,212,156,.58),-170px 115px 0 1px rgba(117,212,156,.45),-35px 180px 0 4px rgba(117,212,156,.36),-220px 250px 0 2px rgba(117,212,156,.32); transform:rotate(35deg); }
.pattern-field[data-weather="forest"] .weather-rings { top:4%; right:-5%; width:64%; height:74%; background:repeating-conic-gradient(from 210deg at 45% 100%,transparent 0 8deg,rgba(117,212,156,.08) 9deg 10deg,transparent 11deg 19deg); clip-path:polygon(20% 100%,38% 0,100% 0,100% 100%); }
.pattern-field[data-weather="forest"] .weather-line { right:29%; bottom:7%; width:3px; height:58%; border-radius:50%; background:linear-gradient(transparent,rgba(117,212,156,.5)); transform:rotate(8deg); transform-origin:bottom; }

/* Hidden Storm: compressed cloud mass and one restrained lightning seam. */
.pattern-field[data-weather="storm"] { --pattern-accent:#a89bff; --pattern-soft:rgba(168,155,255,.27); background:radial-gradient(circle at 72% 23%,rgba(95,82,157,.42),transparent 28%),linear-gradient(145deg,#11192b,#070e19 72%); }
.pattern-field[data-weather="storm"]::before { top:11%; right:4%; width:59%; height:37%; border-radius:50%; background:radial-gradient(ellipse at 22% 70%,rgba(116,115,157,.45),transparent 38%),radial-gradient(ellipse at 58% 34%,rgba(72,75,113,.72),transparent 46%),radial-gradient(ellipse at 88% 70%,rgba(43,48,78,.82),transparent 42%); filter:blur(2px); box-shadow:0 34px 70px rgba(0,0,0,.28); animation:stormGather 8s ease-in-out infinite; }
.pattern-field[data-weather="storm"]::after { top:29%; right:24%; width:76px; height:190px; background:linear-gradient(#c6bcff,#ff8066); clip-path:polygon(46% 0,76% 0,56% 40%,82% 40%,20% 100%,38% 52%,12% 52%); filter:drop-shadow(0 0 12px rgba(168,155,255,.8)); opacity:.66; animation:stormFlash 6s steps(1,end) infinite; }
.pattern-field[data-weather="storm"] .weather-rings { top:7%; right:1%; width:62%; height:54%; background:repeating-linear-gradient(170deg,transparent 0 38px,rgba(168,155,255,.09) 39px 40px); transform:skewY(-7deg); }
.pattern-field[data-weather="storm"] .weather-line { top:39%; right:8%; width:50%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,128,102,.58),transparent); transform:rotate(-8deg); }

/* Open Sky: sparse air, a distant horizon and drifting points. */
.pattern-field[data-weather="sky"] { --pattern-accent:#9edbec; --pattern-soft:rgba(158,219,236,.22); background:linear-gradient(155deg,#315b68 0%,#173744 46%,#0b1c28 100%); }
.pattern-field[data-weather="sky"]::before { top:18%; right:-4%; width:62%; aspect-ratio:2; border-top:1px solid rgba(233,240,234,.45); border-radius:50%; box-shadow:0 -22px 65px rgba(233,240,234,.06); animation:skyFloat 10s ease-in-out infinite alternate; }
.pattern-field[data-weather="sky"]::after { top:14%; right:14%; width:8px; height:8px; border-radius:50%; background:rgba(233,240,234,.8); box-shadow:-90px 62px 0 -1px rgba(233,240,234,.48),70px 95px 0 -2px rgba(233,240,234,.6),-195px 145px 0 -2px rgba(158,219,236,.7),35px 210px 0 -2px rgba(233,240,234,.4); animation:skyPoints 9s ease-in-out infinite alternate; }
.pattern-field[data-weather="sky"] .weather-rings { top:5%; right:5%; width:55%; height:44%; background:radial-gradient(ellipse at 62% 55%,rgba(233,240,234,.16),transparent 28%),radial-gradient(ellipse at 25% 74%,rgba(158,219,236,.09),transparent 22%); filter:blur(12px); }
.pattern-field[data-weather="sky"] .weather-line { top:34%; right:7%; width:52%; height:1px; background:linear-gradient(90deg,transparent,rgba(233,240,234,.32),transparent); }

/* Returning Tide: concentric waterlines visibly recede and return. */
.pattern-field[data-weather="tide"] { --pattern-accent:#79d4c7; background:radial-gradient(ellipse at 73% 21%,rgba(121,212,199,.2),transparent 20%),linear-gradient(145deg,#123848,#071722); }
.pattern-field[data-weather="tide"]::before { top:4%; right:-2%; width:62%; aspect-ratio:1.18; border-radius:50%; background:repeating-radial-gradient(ellipse at 58% 28%,transparent 0 43px,rgba(121,212,199,.17) 44px 46px,transparent 47px 68px); animation:tideReturn 7s ease-in-out infinite; }
.pattern-field[data-weather="tide"]::after { top:17%; right:22%; width:42px; height:42px; border:1px solid rgba(233,240,234,.55); border-radius:50%; background:rgba(233,240,234,.05); box-shadow:0 0 40px rgba(121,212,199,.22); }
.pattern-field[data-weather="tide"] .weather-rings { right:2%; bottom:4%; width:58%; height:38%; background:repeating-linear-gradient(178deg,transparent 0 27px,rgba(233,240,234,.09) 28px 29px); clip-path:ellipse(72% 52% at 56% 50%); animation:tideBands 7s ease-in-out infinite reverse; }
.pattern-field[data-weather="tide"] .weather-line { top:18%; right:29%; width:1px; height:48%; background:linear-gradient(rgba(233,240,234,.4),transparent); }

/* P1 visual stories: concrete generated scenes replace the earlier abstract-only stage. */
.pattern-field[data-weather] {
  background-color:#08131f;
  background-repeat:no-repeat;
  background-position:center,center,right center;
  background-size:100% 100%,100% 100%,auto 118%;
}
.pattern-field[data-weather]::before,
.pattern-field[data-weather]::after,
.pattern-field[data-weather] .weather { opacity:0; animation:none; }
.pattern-field-copy { max-width:min(46%,480px); padding:6px 0 6px 22px; text-shadow:0 2px 24px rgba(0,0,0,.7); }
.pattern-field-copy::before { position:absolute; top:4px; bottom:4px; left:0; width:1px; content:""; background:linear-gradient(180deg,transparent,var(--pattern-accent) 18% 82%,transparent); opacity:.72; }
.pattern-field h3 { max-width:480px; font-size:clamp(3rem,5.2vw,5.5rem); line-height:.96; }
.pattern-field blockquote { max-width:440px; margin:24px 0 12px; font-size:clamp(1.25rem,2vw,1.8rem); line-height:1.35; }
.pattern-field-copy > p:last-child { max-width:430px; color:rgba(233,240,234,.66); }
.pattern-field[data-weather="flame"] { background-image:linear-gradient(90deg,#08131f 0%,rgba(8,19,31,.94) 28%,rgba(8,19,31,.62) 43%,rgba(8,19,31,.12) 62%,transparent 78%),linear-gradient(0deg,rgba(8,19,31,.42),transparent 62%),url("assets/patterns/quiet-flame.jpg"); }
.pattern-field[data-weather="river"] { background-image:linear-gradient(90deg,#071722 0%,rgba(7,23,34,.94) 28%,rgba(7,23,34,.62) 43%,rgba(7,23,34,.12) 62%,transparent 78%),linear-gradient(0deg,rgba(7,23,34,.44),transparent 62%),url("assets/patterns/deep-river.jpg"); }
.pattern-field[data-weather="earth"] { background-image:linear-gradient(90deg,#151c1d 0%,rgba(21,28,29,.94) 28%,rgba(21,28,29,.62) 43%,rgba(21,28,29,.11) 62%,transparent 78%),linear-gradient(0deg,rgba(21,28,29,.42),transparent 62%),url("assets/patterns/steady-earth.jpg"); }
.pattern-field[data-weather="shield"] { background-image:linear-gradient(90deg,#111a1d 0%,rgba(17,26,29,.94) 28%,rgba(17,26,29,.62) 43%,rgba(17,26,29,.1) 62%,transparent 78%),linear-gradient(0deg,rgba(17,26,29,.42),transparent 62%),url("assets/patterns/golden-shield.jpg"); }
.pattern-field[data-weather="forest"] { background-image:linear-gradient(90deg,#091a18 0%,rgba(9,26,24,.94) 28%,rgba(9,26,24,.62) 43%,rgba(9,26,24,.1) 62%,transparent 78%),linear-gradient(0deg,rgba(9,26,24,.42),transparent 62%),url("assets/patterns/wild-forest.jpg"); }
.pattern-field[data-weather="storm"] { background-image:linear-gradient(90deg,#080e19 0%,rgba(8,14,25,.95) 28%,rgba(8,14,25,.64) 43%,rgba(8,14,25,.12) 62%,transparent 78%),linear-gradient(0deg,rgba(8,14,25,.46),transparent 62%),url("assets/patterns/hidden-storm.jpg"); }
.pattern-field[data-weather="sky"] { background-image:linear-gradient(90deg,#102532 0%,rgba(16,37,50,.94) 28%,rgba(16,37,50,.6) 43%,rgba(16,37,50,.1) 62%,transparent 78%),linear-gradient(0deg,rgba(16,37,50,.38),transparent 62%),url("assets/patterns/open-sky.jpg"); }
.pattern-field[data-weather="tide"] { background-image:linear-gradient(90deg,#071722 0%,rgba(7,23,34,.94) 28%,rgba(7,23,34,.62) 43%,rgba(7,23,34,.1) 62%,transparent 78%),linear-gradient(0deg,rgba(7,23,34,.44),transparent 62%),url("assets/patterns/returning-tide.jpg"); }
.pattern-selector { display:flex; flex-direction:column; padding:14px; }
.pattern-selector button { display:grid; grid-template-columns:38px 24px 1fr; gap:8px; align-items:center; flex:1; border:0; border-bottom:1px solid rgba(233,240,234,.1); padding:8px 10px; background:transparent; color:rgba(233,240,234,.5); text-align:left; transition:color .2s ease,background .2s ease; }
.pattern-selector button:last-child { border-bottom:0; }
.pattern-selector button span { color:rgba(120,217,209,.45); font-family:var(--utility); font-size:.54rem; letter-spacing:.06em; }
.pattern-selector button b { font-family:var(--display); font-size:.94rem; font-weight:600; line-height:1.05; }
.pattern-mark { position:relative; display:block; width:36px; height:36px; overflow:hidden; border:1px solid rgba(233,240,234,.2); border-radius:50%; background-position:center; background-size:cover; }
.pattern-mark::before,.pattern-mark::after { position:absolute; content:""; }
.pattern-selector [data-pattern="flame"] .pattern-mark::before { inset:7px 9px 5px; border-radius:70% 30% 65% 35%; background:#ff8066; transform:rotate(8deg); }
.pattern-selector [data-pattern="river"] .pattern-mark::before { inset:7px 4px; border-top:2px solid #78d9d1; border-bottom:2px solid rgba(120,217,209,.45); border-radius:50%; transform:rotate(-16deg); }
.pattern-selector [data-pattern="earth"] .pattern-mark::before { right:4px; bottom:5px; left:4px; height:10px; border-top:2px solid #d8b45d; border-bottom:2px solid rgba(216,180,93,.45); }
.pattern-selector [data-pattern="shield"] .pattern-mark::before { inset:4px 6px; border:1px solid #e2bd61; clip-path:polygon(50% 0,100% 18%,88% 72%,50% 100%,12% 72%,0 18%); }
.pattern-selector [data-pattern="forest"] .pattern-mark::before { left:13px; bottom:4px; width:1px; height:19px; background:#75d49c; transform:rotate(12deg); }
.pattern-selector [data-pattern="forest"] .pattern-mark::after { top:7px; left:8px; width:10px; height:8px; border-top:1px solid #75d49c; border-right:1px solid #75d49c; transform:rotate(-24deg); }
.pattern-selector [data-pattern="storm"] .pattern-mark::before { inset:5px 8px; background:#a89bff; clip-path:polygon(47% 0,100% 0,62% 43%,92% 43%,15% 100%,38% 55%,8% 55%); }
.pattern-selector [data-pattern="sky"] .pattern-mark::before { right:4px; bottom:7px; left:4px; height:9px; border-top:1px solid #9edbec; border-radius:50%; }
.pattern-selector [data-pattern="sky"] .pattern-mark::after { top:6px; right:7px; width:3px; height:3px; border-radius:50%; background:#e9f0ea; box-shadow:-9px 5px 0 -1px #9edbec; }
.pattern-selector [data-pattern="tide"] .pattern-mark::before { inset:4px; border:1px solid #79d4c7; border-left-color:transparent; border-radius:50%; transform:rotate(18deg); }
.pattern-selector [data-pattern="tide"] .pattern-mark::after { inset:8px; border:1px solid rgba(121,212,199,.55); border-right-color:transparent; border-radius:50%; }
.pattern-selector [data-pattern] .pattern-mark::before,.pattern-selector [data-pattern] .pattern-mark::after { display:none; }
.pattern-selector [data-pattern="flame"] .pattern-mark { background-image:url("assets/patterns/quiet-flame.jpg"); }
.pattern-selector [data-pattern="river"] .pattern-mark { background-image:url("assets/patterns/deep-river.jpg"); }
.pattern-selector [data-pattern="earth"] .pattern-mark { background-image:url("assets/patterns/steady-earth.jpg"); }
.pattern-selector [data-pattern="shield"] .pattern-mark { background-image:url("assets/patterns/golden-shield.jpg"); }
.pattern-selector [data-pattern="forest"] .pattern-mark { background-image:url("assets/patterns/wild-forest.jpg"); }
.pattern-selector [data-pattern="storm"] .pattern-mark { background-image:url("assets/patterns/hidden-storm.jpg"); }
.pattern-selector [data-pattern="sky"] .pattern-mark { background-image:url("assets/patterns/open-sky.jpg"); }
.pattern-selector [data-pattern="tide"] .pattern-mark { background-image:url("assets/patterns/returning-tide.jpg"); }
.pattern-selector button:hover,.pattern-selector button[aria-selected="true"] { background:rgba(120,217,209,.07); color:var(--moon); }
.pattern-selector button[aria-selected="true"] span { color:var(--signal); }
.pattern-selector button[aria-selected="true"] .pattern-mark { border-color:rgba(255,128,102,.5); box-shadow:0 0 0 3px rgba(255,128,102,.07); }
.pattern-notes { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(120,217,209,.16); }
.pattern-notes div { min-height:150px; padding:25px 28px; }.pattern-notes div + div { border-left:1px solid rgba(120,217,209,.16); }
.pattern-notes span { color:var(--aura); font-family:var(--utility); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.pattern-notes p { margin:12px 0 0; color:rgba(233,240,234,.58); font-size:.78rem; line-height:1.65; }
.product-map { display: grid; grid-template-columns: repeat(12,1fr); gap: 12px; }.product-card { grid-column: span 4; min-height: 250px; border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: rgba(255,255,255,.42); transition: transform .2s ease,background .2s ease; }.product-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.8); }.product-card > span { display: inline-block; margin-bottom: 44px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.product-card h3 { font-family: var(--display); font-size: 2rem; font-weight: 500; }.product-card p { color: var(--muted); font-size: .82rem; line-height: 1.65; }.product-card.live { grid-column: span 8; color: var(--moon); background: var(--deep-tide); }.product-card.live p { max-width: 590px; color: rgba(233,240,234,.58); }.product-card.live > span { color: var(--aura); }.product-card.wisdom { background: #dbe8df; }.product-card.supporting { grid-column: span 8; background: #f1d9d0; }
.report-section { background:linear-gradient(135deg,#eff4ef,var(--paper)); }.report-offer { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(260px,.65fr) minmax(270px,.55fr); gap:clamp(26px,4vw,62px); align-items:center; }.offer-card { display:grid; gap:14px; border-radius:24px; padding:30px; background:var(--midnight); color:var(--moon); box-shadow:var(--shadow); }.offer-card > span { color:var(--signal); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.offer-card > strong { font-family:var(--display); font-size:4rem; font-weight:500; }.offer-card p { color:rgba(233,240,234,.52); }.offer-card .secondary-action { border-color:rgba(233,240,234,.2); }
.report-preview { position:relative; min-height:470px; overflow:hidden; border-radius:150px 150px 22px 22px; padding:34px 28px; background:var(--deep-tide); color:var(--moon); box-shadow:var(--shadow); }
.report-preview::before { position:absolute; top:54px; right:-70px; width:260px; height:260px; border:1px solid rgba(120,217,209,.2); border-radius:50%; content:""; box-shadow:0 0 0 34px rgba(120,217,209,.03),0 0 0 68px rgba(120,217,209,.02); }
.report-preview-top { position:relative; display:flex; justify-content:space-between; color:var(--aura); font-family:var(--utility); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.report-preview > p { position:relative; margin:80px 0 8px; color:var(--gold); font-family:var(--utility); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; }
.report-preview h3 { position:relative; max-width:300px; font-family:var(--display); font-size:3.35rem; font-weight:600; line-height:.98; letter-spacing:-.025em; }
.mini-dimensions { position:relative; display:grid; gap:12px; margin-top:35px; }.mini-dimensions span { display:grid; grid-template-columns:1fr 75px; gap:10px; align-items:center; color:rgba(233,240,234,.55); font-size:.62rem; }.mini-dimensions span::after { height:3px; content:""; background:linear-gradient(90deg,var(--aura) var(--level),rgba(233,240,234,.12) var(--level)); }
.report-preview blockquote { position:relative; margin:30px 0 0; color:rgba(233,240,234,.7); font-family:var(--display); font-size:1.05rem; font-style:italic; line-height:1.45; }
.faq-section { background: var(--moon); }.faq-list { max-width: 980px; border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); padding: 22px 0; }.faq-list summary { cursor: pointer; font-family: var(--display); font-size: 1.4rem; font-weight: 500; }.faq-list p,.legal-dialog p { color: var(--muted); line-height: 1.7; }
footer { display: flex; justify-content: space-between; gap: 28px; padding: 42px clamp(20px,6vw,96px); background: var(--midnight); color: var(--moon); } footer p { max-width: 700px; margin: 8px 0 0; color: rgba(233,240,234,.5); font-size: .72rem; }.footer-links { display: flex; flex-wrap: wrap; gap: 16px; color: rgba(233,240,234,.58); font-size: .72rem; }.footer-links button { border: 0; padding: 0; background: transparent; color: inherit; }
.mobile-quick-action { display:none; }
body.quick-read-visible .mobile-quick-action { visibility:hidden; opacity:0; pointer-events:none; }
.legal-dialog { width: min(620px,calc(100% - 32px)); border: 1px solid var(--line); border-radius: 20px; padding: 34px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }.legal-dialog::backdrop { background: rgba(8,19,31,.7); backdrop-filter: blur(6px); }.legal-dialog h2 { font-size: 3rem; }.dialog-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; background: transparent; color: var(--muted); font-size: 1.7rem; }
.unlock-spark { position: fixed; z-index: 40; color: var(--signal); animation: sparkle .76s ease-out forwards; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease,transform .65s ease; }.reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--aura); outline-offset: 4px; }

@keyframes imageDrift { to { transform: scale(1.04) translateX(-8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbitPulse { 50% { transform: scale(1.035); opacity: .6; } }
@keyframes panelIn { from { opacity:0; transform:translateY(8px); } }
@keyframes resultOrbit { to { transform:rotate(360deg) translateX(56px) rotate(-360deg); } }
@keyframes resultPop { from { opacity:0; transform:scale(.98) translateY(10px); } }
@keyframes sparkle { to { opacity:0; transform:translateY(-42px) scale(.4); } }
@keyframes flameShell { 50% { transform:scale(.975); border-radius:50% 50% 46% 46% / 64% 64% 36% 36%; } }
@keyframes emberPulse { 45% { transform:rotate(4deg) scale(1.14); filter:saturate(1.2); } }
@keyframes riverDrift { to { transform:translate(-14px,14px) rotate(-12deg) scale(1.03); } }
@keyframes riverLine { 50% { transform:rotate(20deg) translateX(-10px); opacity:.45; } }
@keyframes earthSettle { 50% { transform:translateY(7px) scaleX(1.015); } }
@keyframes shieldGlow { 50% { box-shadow:inset 0 0 0 18px rgba(216,180,93,.04),inset 0 0 95px rgba(216,180,93,.13),0 0 72px rgba(216,180,93,.15); } }
@keyframes shieldScan { 50% { transform:translateX(24px); opacity:.35; } }
@keyframes forestGrow { to { transform:scale(1.035) rotate(-1deg); } }
@keyframes stormGather { 50% { transform:translateX(-14px) scaleX(1.04); filter:blur(3px); } }
@keyframes stormFlash { 0%,72%,76%,100% { opacity:.2; } 73%,75% { opacity:.9; } }
@keyframes skyFloat { to { transform:translate(18px,-8px) scaleX(1.03); } }
@keyframes skyPoints { to { transform:translate(-12px,9px); opacity:.65; } }
@keyframes tideReturn { 50% { transform:translate(-14px,11px) scale(.97); opacity:.72; } }
@keyframes tideBands { 50% { transform:translateY(12px); opacity:.58; } }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 140px; }.hero-content { max-width: 760px; }.path-map-card { min-height: 530px; max-width: 620px; width: 100%; margin: 0 auto; }.aura-orbit { max-width: 340px; }.how-section .section-heading,.preview-section,.quiz-shell,.report-offer { grid-template-columns: 1fr; }.how-section .section-heading .section-kicker { grid-column:auto; }.quiz-intro { position: static; }.product-card { grid-column: span 6; }.product-card.live,.product-card.supporting { grid-column: span 12; }.pattern-heading { grid-template-columns:1fr; }.pattern-heading .section-kicker { grid-column:auto; }.pattern-atlas { grid-template-columns:1fr; }.pattern-field { min-height:560px; border-right:0; border-bottom:1px solid rgba(120,217,209,.16); }.pattern-selector { display:grid; grid-template-columns:repeat(4,1fr); }.pattern-selector button { min-height:74px; border-right:1px solid rgba(233,240,234,.1); }.pattern-selector button b { font-size:.82rem; }.report-preview { width:min(460px,100%); margin:auto; }
}
@media (max-width: 720px) {
  body { padding-bottom:66px; }.site-header { min-height:66px; }.nav-links,.header-action { display:none; }.hero { min-height: auto; padding: 112px 18px 60px; }.hero h1 { font-size: clamp(3.05rem,14.4vw,5.15rem); line-height:1.04; letter-spacing:-.026em; }.hero-overlay { background: linear-gradient(180deg,rgba(8,19,31,.86),rgba(8,19,31,.97)); }.hero-metrics,.path-map-card { display:none; }.trust-strip { grid-template-columns: 1fr; }.trust-strip div { padding: 18px 0; }.trust-strip div + div { border-left: 0; border-top: 1px solid var(--line); }.journey-steps { grid-template-columns:1fr; margin-top:44px; }.journey-steps li,.journey-steps li + li { border-left:0; border-bottom:1px solid var(--line); padding:24px 0; }.journey-steps span { margin-bottom:18px; }.preview-section { grid-template-columns: minmax(0,1fr); }.sample-result { min-height:auto; }.answer-list { grid-template-columns: 1fr; }.product-card,.product-card.live,.product-card.supporting { grid-column: span 12; }.insight-grid,.early-access { grid-template-columns: 1fr; }.result-actions { flex-direction: column; }.result-actions button { width: 100%; }.quiz-panel { min-height:0; padding: 20px; }.path-library-head { grid-template-columns:1fr; }.path-progress { padding:16px 0 0; border-top:1px solid var(--line); border-left:0; }.test-collection { grid-template-columns:1fr; }.test-card,.test-card:nth-child(odd),.test-card:last-child { min-height:0; grid-column:auto; border-right:0; }.test-card h4 { margin-top:34px; }.pattern-field { min-height:520px; }.pattern-selector { grid-template-columns:repeat(2,1fr); }.pattern-notes { grid-template-columns:1fr; }.pattern-notes div + div { border-left:0; border-top:1px solid rgba(120,217,209,.16); }.pattern-signal { grid-template-columns:1fr; }.pattern-signal button { grid-column:1; grid-row:auto; justify-self:start; } .mobile-quick-action { position:fixed; z-index:30; right:12px; bottom:10px; left:12px; display:flex; min-height:48px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:var(--signal); color:var(--midnight); font-size:.84rem; font-weight:800; box-shadow:0 12px 36px rgba(8,19,31,.28); } footer { display:block; }.footer-links { margin-top: 20px; }
}
@media (max-width: 720px) {
  .share-studio { grid-template-columns:1fr; }
  .share-preview-frame,.share-preview-frame[data-format="story"],.share-preview-frame[data-format="og"] { width:min(260px,100%); justify-self:start; }
  .value-ladder li { grid-template-columns:1fr; gap:6px; }
}
@media (max-width: 480px) {
  .site-header { min-height: 66px; padding: 14px 16px; }.brand { font-size: .9rem; }.hero-actions { flex-direction: column; align-items:stretch; }.hero-actions > * { width:100%; }.text-action { justify-content:center; }.path-map-card { min-height: 420px; padding: 20px; }.aura-orbit { margin-top: 20px; }.map-reading strong { font-size: 1.45rem; }.sample-result { border-radius: 32px; padding: 28px 22px; }.trust-strip,.how-section,.preview-section,.library-section,.pattern-section,.flow-section,.report-section,.faq-section { padding-inline: 18px; }.question-title { font-size: clamp(1.9rem,9.4vw,2.45rem); line-height:1.1; }.answer-button { min-height: 76px; }.early-access { padding: 12px; }.pattern-heading h2 { font-size:clamp(2.65rem,12.6vw,3.45rem); line-height:1.02; }.pattern-field { min-height:auto; padding:clamp(300px,82vw,340px) 18px 24px; }.pattern-field[data-weather] { background-position:center,center,center top; background-size:100% 100%,100% 100%,100% auto; }.pattern-field[data-weather]::after { top:210px; right:0; bottom:0; left:0; z-index:0; width:auto; height:auto; border:0; border-radius:0; background:linear-gradient(180deg,transparent,#08131f 138px,#08131f); box-shadow:none; clip-path:none; filter:none; opacity:1; transform:none; }.pattern-field-copy { max-width:100%; padding:22px 0 4px 16px; text-shadow:0 2px 18px rgba(0,0,0,.72); }.pattern-field h3 { font-size:clamp(2.75rem,13.8vw,3.75rem); line-height:.98; }.pattern-field blockquote { margin-top:22px; }.pattern-selector button { grid-template-columns:34px 20px 1fr; gap:6px; }.pattern-mark { width:32px; height:32px; }.pattern-selector button b { font-size:.78rem; }.pattern-notes div { min-height:auto; padding:20px; }.report-preview { min-height:auto; border-radius:32px; }.report-preview h3 { font-size:3rem; }.legal-dialog h2 { font-size:2.4rem; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }