/* Kerry's deck — one stylesheet. Mobile-first single column; on wide screens the column floats like a phone.
   Tokens come from Kerry's own photos (see docs/profiles/kerry-opus.md §4). Mini-site / mood styles live in moods.css. */
:root {
  --night: #1a0f2e; --night-2: #2a1747; --night-3: #3a2160;
  --violet: #7b3fa8; --violet-2: #9a5fc6; --lav: #cdb3e6; --lav-2: #efe5f8; --plum: #4a1f63;
  --gold: #b58a3a; --gold-2: #e8c77b; --shawl: #d2512b; --rose: #e8a3b8; --jungle: #2f5d43;
  --pearl: #fbf7f2; --pearl-2: #f4ece4; --ink: #2a1f33; --muted: #6c6177; --line: #e8dcef; --card: #fff;
  --ok: #2f6b4f; --warn: #94570f;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Great Vibes', 'Kaushan Script', cursive;
  --r: 20px; --r-sm: 12px; --gut: 20px; --col: 480px;
  --shadow: 0 1px 2px rgba(74,31,99,.06), 0 10px 30px -12px rgba(74,31,99,.22);
  --ease: cubic-bezier(.22,.8,.24,1); --spring: cubic-bezier(.34,1.56,.64,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--pearl); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0 0 .45em; letter-spacing: -.005em; }
h2 { font-size: clamp(2.1rem, 9vw, 2.75rem); }
h3 { font-size: 1.55rem; }
p { margin: 0 0 1em; }
a { color: var(--violet); }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 10px; top: 10px; z-index: 99; background: #fff; padding: 8px 14px; border-radius: 8px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- desktop: the deck floats like a phone ---------- */
.deck { max-width: var(--col); margin: 0 auto; background: var(--pearl); position: relative; min-height: 100vh; }
@media (min-width: 760px) {
  body { background: radial-gradient(60% 50% at 20% 10%, #3a2160 0%, transparent 60%), radial-gradient(50% 50% at 85% 80%, #5a2a55 0%, transparent 60%), var(--night); padding: 28px 0; }
  .deck { border-radius: 34px; overflow: clip; box-shadow: 0 40px 120px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
  .desk-note { position: fixed; left: 28px; bottom: 24px; max-width: 220px; color: #cdb9ee; font-size: .82rem; opacity: .75; }
}
@media (max-width: 759px) { .desk-note { display: none; } }

/* ---------- top bar & menu ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 14px 0 var(--gut);
  background: rgba(251,247,242,.82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(123,63,168,.12); transform: translateY(-100%); transition: transform .5s var(--ease); margin-bottom: -54px; }
.topbar.show { transform: none; }
.topbar .brand { flex: 1; font: 400 1.7rem/1 var(--script); color: var(--plum); text-decoration: none; padding-top: 4px; }
.topbar .chap { font-size: .78rem; color: var(--muted); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--plum); }
.iconbtn:active { background: var(--lav-2); }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--gold-2)); }
.sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.sheet::before { content: ""; position: absolute; inset: 0; background: rgba(26,15,46,.55); opacity: 0; transition: opacity .35s; }
.sheet nav { position: absolute; left: 50%; bottom: 0; width: min(100%, var(--col)); max-height: 82vh; overflow: auto; translate: -50% 105%; transition: translate .5s var(--ease);
  background: var(--pearl); border-radius: 26px 26px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); }
.sheet nav::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 9px; background: #d9cce3; margin: 4px auto 14px; }
.sheet.open { pointer-events: auto; } .sheet.open::before { opacity: 1; } .sheet.open nav { translate: -50% 0; }
.sheet a { display: flex; align-items: center; gap: 14px; padding: 12px 6px; text-decoration: none; color: var(--ink); border-radius: 14px; min-height: 52px; }
.sheet a:active { background: var(--lav-2); }
.sheet a .n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: var(--lav-2); color: var(--violet); }
.sheet a.done .n { background: var(--violet); color: #fff; }
.sheet a b { font-weight: 500; display: block; } .sheet a small { color: var(--muted); font-size: .82rem; }

/* ---------- cover / opening ---------- */
.cover { position: relative; height: 100vh; height: 100svh; min-height: 600px; background: var(--night); color: #f6effb; overflow: hidden; isolation: isolate; }
.cover canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.cover .veil { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(transparent, rgba(26,15,46,.86) 62%); pointer-events: none; }
.cover .words { position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom)); padding: 0 var(--gut); text-align: center; pointer-events: none; }
.cover .words > * { pointer-events: auto; }
.cover .hello { font: 500 .74rem/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-2); opacity: 0; animation: rise 1.4s 3.4s var(--ease) forwards; }
.cover svg.name { width: min(84%, 360px); height: auto; display: block; margin: 6px auto 0; overflow: visible; }
.cover svg.name text { font-family: var(--script); font-size: 120px; fill: transparent; stroke: url(#goldline); stroke-width: 1.2; stroke-dasharray: 900; stroke-dashoffset: 900; }
.cover.play svg.name text { animation: write 3.2s 2.2s var(--ease) forwards, fillin 1.6s 4.6s ease forwards; }
@keyframes write { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill: url(#goldfill); stroke-width: .4; } }
.cover .sub { max-width: 330px; margin: 0 auto 18px; color: #dccdf0; font-size: 1.02rem; opacity: 0; animation: rise 1.4s 4.6s var(--ease) forwards; }
.cover .begin { opacity: 0; animation: rise 1.2s 5.2s var(--ease) forwards; }
.modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-top: 16px; opacity: 0; animation: rise 1.2s 5.6s var(--ease) forwards; position: relative; }
.modes button { position: relative; z-index: 1; border: 0; background: none; color: #e9defa; padding: 0 13px; height: 38px; border-radius: 999px; font-size: .86rem; cursor: pointer; transition: color .3s; }
.modes button[aria-pressed="true"] { color: var(--night); }
.modes .pill { position: absolute; z-index: 0; top: 4px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, #f6e3b3, var(--gold-2)); transition: left .5s var(--spring), width .5s var(--spring); }
.cover .tools { display: flex; justify-content: center; gap: 10px; margin-top: 10px; opacity: 0; animation: rise 1.2s 5.9s var(--ease) forwards; }
.ghostbtn { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #eadff8; border-radius: 999px; height: 38px; padding: 0 14px; font-size: .84rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ghostbtn[aria-pressed="true"] { background: rgba(232,199,123,.18); border-color: var(--gold-2); color: #fff3d6; }
.cover .hint { position: absolute; top: calc(16px + env(safe-area-inset-top)); left: 0; right: 0; text-align: center; font-size: .78rem; color: rgba(233,222,248,.6); letter-spacing: .08em; opacity: 0; animation: rise 1.4s 6.6s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 500 1rem var(--body); color: #fff; background: linear-gradient(135deg, var(--violet-2), var(--violet) 55%, var(--plum)); box-shadow: 0 10px 24px -10px rgba(123,63,168,.7);
  transition: transform .25s var(--spring), box-shadow .25s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(123,63,168,.8); }
.btn:active { transform: scale(.97); }
.btn.gold { background: linear-gradient(135deg, #f6e3b3, var(--gold-2) 50%, #c99a45); color: #2a1a05; box-shadow: 0 10px 30px -10px rgba(232,199,123,.7); }
.btn.line { background: transparent; color: var(--violet); box-shadow: inset 0 0 0 1.5px var(--violet); }
.btn.wa { background: linear-gradient(135deg, #3ccf73, #1f9e57); box-shadow: 0 10px 24px -10px rgba(31,158,87,.7); }
.btn.block { width: 100%; }
.linkbtn { background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--violet); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- sections ---------- */
.sec { padding: 84px var(--gut) 72px; position: relative; scroll-margin-top: 54px; }
.sec.tint { background: linear-gradient(180deg, var(--pearl-2), var(--pearl)); }
.sec.dark { background: var(--night); color: #f1e9fa; }
.sec.dark .muted { color: #c9b8e2; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 500 .74rem/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--violet); margin-bottom: 16px; }
.eyebrow i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; letter-spacing: 0; font-size: .74rem; border: 1px solid currentColor; }
.sec.dark .eyebrow { color: var(--gold-2); }
.lede { font-size: 1.12rem; color: var(--muted); }
.sec.dark .lede { color: #d6c8ea; }
.script-line { font: 400 2.2rem/1 var(--script); color: var(--violet); }
.divider { display: block; width: 120px; height: 28px; margin: 34px auto; opacity: .7; }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal].in { opacity: 1; transform: none; }

/* letter */
.letter { font-family: var(--display); font-size: 1.32rem; line-height: 1.5; color: #3b2f45; }
.letter p:first-child::first-letter { font-size: 3.4em; float: left; line-height: .8; padding: 6px 8px 0 0; color: var(--violet); }
.sign { font: 400 2.1rem/1 var(--script); color: var(--violet); margin-top: 10px; }
.how { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: h; }
.how li { counter-increment: h; display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.how li::before { content: counter(h); flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--violet); font-weight: 500; }

/* ---------- cards, chips, toggles ---------- */
.card { background: var(--card); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.stack { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.stack > *, .stage { min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: .95rem; transition: background .25s, color .25s, border-color .25s, transform .25s var(--spring); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.chip[aria-pressed="true"]::before { content: "✓"; font-size: .85em; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 500; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: var(--lav-2); color: var(--violet); }
.tag.ok { background: #e2f1e8; color: var(--ok); } .tag.warn { background: #fbefd9; color: var(--warn); }

/* segmented control with a sliding thumb (JS sets --x/--w) */
.seg { position: relative; display: flex; padding: 4px; border-radius: 16px; background: var(--lav-2); gap: 2px; }
.seg button { position: relative; z-index: 1; flex: 1; min-height: 42px; border: 0; background: none; border-radius: 12px; cursor: pointer; font-size: .9rem; color: var(--muted); padding: 4px 8px; line-height: 1.2; transition: color .3s; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(74,31,99,.14); transform: translateX(var(--x, 0)); width: var(--w, 0); transition: transform .45s var(--spring), width .45s var(--spring); }
.seg.three-way button[aria-pressed="true"][data-v="yes"] { color: var(--ok); }
.seg.three-way button[aria-pressed="true"][data-v="no"] { color: #9b2c3d; }

/* love button */
.love { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; position: relative; font-size: .92rem; }
.love svg { width: 22px; height: 22px; transition: transform .45s var(--spring); }
.love svg path { fill: transparent; stroke: var(--violet); stroke-width: 1.8; transition: fill .3s; }
.love[aria-pressed="true"] { border-color: #f0c9d8; background: #fff3f7; color: #a12d5c; }
.love[aria-pressed="true"] svg { transform: scale(1.15); }
.love[aria-pressed="true"] svg path { fill: #e0457b; stroke: #e0457b; }
.love .burst { position: absolute; left: 22px; top: 50%; width: 1px; height: 1px; pointer-events: none; }
.love .burst i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #e0457b); animation: burst .7s var(--ease) forwards; }
@keyframes burst { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); opacity: 0; } }

/* accordion (smooth height via grid rows) */
.acc { border-radius: var(--r); background: #fff; box-shadow: var(--shadow); overflow: hidden; }
.acc > button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 60px; padding: 14px 18px; border: 0; background: none; cursor: pointer; font-size: 1rem; }
.acc > button .t { flex: 1; } .acc > button .t small { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.acc > button .chev { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lav-2); color: var(--violet); transition: transform .45s var(--spring); flex: none; }
.acc[data-open="true"] > button .chev { transform: rotate(180deg); }
.acc > .body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc[data-open="true"] > .body { grid-template-rows: 1fr; }
.acc > .body > div { overflow: hidden; } .acc > .body > div > div { padding: 0 18px 18px; }

textarea.field, input.field { width: 100%; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: #fff; color: var(--ink); resize: vertical; transition: border-color .2s, box-shadow .2s; }
textarea.field:focus, input.field:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 4px rgba(154,95,198,.15); }

/* ---------- vision ---------- */
.belief { padding: 18px; }
.belief q { display: block; font: 500 1.28rem/1.3 var(--display); quotes: none; margin-bottom: 12px; color: #33263f; }
.belief .why { font-size: .86rem; color: var(--muted); margin: 10px 0 0; }
.belief textarea { margin-top: 10px; display: none; } .belief[data-v="part"] textarea, .belief[data-v="no"] textarea { display: block; }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sw { aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .35s var(--spring); }
.sw::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.1rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); transform: scale(0); transition: transform .35s var(--spring); }
.sw[aria-pressed="true"] { transform: scale(1.08); box-shadow: 0 0 0 3px var(--pearl), 0 0 0 5px var(--ink); }
.sw[aria-pressed="true"]::after { transform: scale(1); }
.sw-label { font-size: .7rem; text-align: center; color: var(--muted); margin-top: 4px; line-height: 1.2; }
.vision-card { position: relative; border-radius: 26px; padding: 26px 22px; color: #f6eefc; overflow: hidden; background: var(--night-2); box-shadow: 0 30px 60px -30px rgba(26,15,46,.8); }
.vision-card::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, var(--v1, #7b3fa8), var(--v2, #e8c77b), var(--v3, #d2512b), var(--v1, #7b3fa8)); filter: blur(50px); opacity: .55; animation: spin 24s linear infinite; }
.vision-card > * { position: relative; }
.vision-card h3 { font-size: 1.9rem; margin-bottom: 6px; }
.vision-card .vline { margin: 10px 0 0; font-size: .98rem; } .vision-card .vline b { color: var(--gold-2); font-weight: 500; }
.vision-card .dots { display: flex; gap: 6px; margin-top: 14px; } .vision-card .dots i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- gems (strengths) ---------- */
.rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 6px var(--gut) 18px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: center; flex: none; }
.gem { width: 78%; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.gem .ph { aspect-ratio: 4/3; background: var(--lav-2) center/cover; position: relative; }
.gem .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(26,15,46,.35)); }
.gem .ph .ico { position: absolute; left: 16px; bottom: 14px; z-index: 1; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--violet); }
.gem .in { padding: 16px 18px 20px; } .gem h3 { font-size: 1.35rem; margin-bottom: 4px; } .gem p { margin: 0; color: var(--muted); font-size: .95rem; }
.rail-dots { display: flex; justify-content: center; gap: 6px; } .rail-dots i { width: 6px; height: 6px; border-radius: 9px; background: #d9cce3; transition: width .35s var(--ease), background .35s; }
.rail-dots i.on { width: 20px; background: var(--violet); }

/* ---------- mend (findings) ---------- */
.mend { border-radius: 24px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.mend figure { margin: 0; background: #efe7f3; position: relative; }
.mend figure img { width: 100%; max-height: 300px; object-fit: cover; object-position: top; }
.mend figure figcaption { font-size: .78rem; color: var(--muted); padding: 8px 18px 0; background: #fff; }
.mend .in { padding: 14px 18px 20px; }
.mend .num { margin-left: auto; font-size: .78rem; color: var(--muted); letter-spacing: .08em; }
.mend .in > p { font-size: .97rem; color: #4d4257; }
.mend h3 { font-size: 1.4rem; }
.mend .fix { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f1f8f3; color: #234d38; font-size: .95rem; }
.mend .fix b { font-weight: 500; }
.mend .ev { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.tidy li { margin: 0 0 10px; } .tidy { padding-left: 18px; margin: 0; }
.tidy li b { font-weight: 500; }

/* ---------- moods carousel ---------- */
.moods .rail > .mood { width: 86%; }
.mood .cap { padding: 14px 4px 0; }
.mood .cap h3 { margin: 0; font-size: 1.5rem; } .mood .cap p { margin: 4px 0 10px; font-size: .92rem; color: var(--muted); }
.phone { position: relative; border-radius: 34px; padding: 9px; background: linear-gradient(145deg, #2c2238, #120b1d); box-shadow: 0 30px 50px -28px rgba(26,15,46,.7), inset 0 0 0 1px rgba(255,255,255,.08); }
.phone .screen { border-radius: 26px; overflow: hidden; height: 540px; overflow-y: auto; overscroll-behavior: contain; position: relative; scrollbar-width: none; background: #fff; }
.phone .screen::-webkit-scrollbar { display: none; }
.phone::before { content: ""; position: absolute; top: 15px; left: 50%; translate: -50% 0; width: 70px; height: 18px; border-radius: 12px; background: #120b1d; z-index: 3; }

/* ---------- idea cards (UI elements) ---------- */
.idea { border-radius: 26px; background: #fff; box-shadow: var(--shadow); padding: 18px; }
.idea .top { display: flex; align-items: baseline; gap: 10px; } .idea .top .n { font: 400 1.6rem/1 var(--display); color: var(--lav); }
.idea h3 { margin: 0 0 4px; font-size: 1.5rem; }
.idea .why { font-size: .93rem; color: var(--muted); margin: 0 0 14px; }
.stage { --s-bg: #fbf8f2; --s-ink: #2f2630; --s-accent: #7b3fa8; --s-soft: #efe5f8; --s-head: 'Cormorant Garamond', serif; --s-body: 'Jost', sans-serif; --s-on: #fff;
  position: relative; margin-top: 12px; border-radius: 20px; overflow: hidden; background: var(--s-bg); color: var(--s-ink); font-family: var(--s-body); min-height: 300px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: background .6s, color .6s; }
.idea .foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.idea .foot .linkbtn { margin-left: auto; font-size: .9rem; }
.idea textarea { margin-top: 10px; }
.optdesc { font-size: .88rem; color: var(--muted); margin: 10px 2px 0; min-height: 2.6em; }
.stylebar { position: sticky; top: 62px; z-index: 5; margin: 0 0 18px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.stylebar .dots { display: flex; gap: 8px; margin-left: auto; }
.stylebar .dots button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: transform .3s var(--spring); }
.stylebar .dots button[aria-pressed="true"] { transform: scale(1.12); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }

/* ---------- studio (talk to Claude) ---------- */
.studio { border-radius: 28px; background: var(--night-2); color: #f1e9fa; padding: 16px; box-shadow: 0 30px 60px -30px rgba(26,15,46,.8); }
.studio .chat { height: 176px; overflow: hidden; display: grid; gap: 8px; align-content: end; margin-bottom: 14px; -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); }
.bubble { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: .94rem; line-height: 1.45; animation: pop .45s var(--spring); }
.bubble.me { justify-self: end; background: var(--violet); color: #fff; border-bottom-right-radius: 6px; }
.bubble.ai { justify-self: start; background: rgba(255,255,255,.1); border-bottom-left-radius: 6px; }
.bubble.ai b { color: var(--gold-2); font-weight: 500; }
.bubble .typing { display: inline-flex; gap: 4px; } .bubble .typing i { width: 6px; height: 6px; border-radius: 50%; background: #e9defa; animation: blink 1.2s infinite; } .bubble .typing i:nth-child(2) { animation-delay: .2s; } .bubble .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.studio .phone { width: 252px; margin: 0 auto; }
.studio .phone .screen { height: 440px; }
.studio h4 { font: 500 .72rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); margin: 18px 0 10px; }
.prompt { display: block; width: 100%; text-align: left; min-height: 48px; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #f1e9fa; cursor: pointer; font-size: .95rem; transition: background .25s, border-color .25s, transform .25s var(--spring); }
.prompt:active { transform: scale(.98); } .prompt.used { border-color: rgba(232,199,123,.5); background: rgba(232,199,123,.08); }
.prompt::before { content: "“"; color: var(--gold-2); margin-right: 2px; } .prompt::after { content: "”"; color: var(--gold-2); }
.studio .ctl { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.studio .ctl button { min-height: 44px; }
.ask { display: grid; gap: 12px; }
.ask .card h3 { font-size: 1.3rem; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.ask .card h3 span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--lav-2); color: var(--violet); flex: none; }
.ask .card p { margin: 0; color: var(--muted); font-size: .95rem; }
.ask .card .eg { margin-top: 10px; font: italic 500 1.12rem/1.35 var(--display); color: var(--plum); }
.chest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chest > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px; font-size: .9rem; color: #e3d8f2; }
.chest > div b { display: block; font-weight: 500; color: #fff; margin: 8px 0 2px; font-size: .98rem; }
.chest svg { color: var(--gold-2); }
.promise { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.promise:last-child { border: 0; }
.promise svg { flex: none; color: var(--ok); margin-top: 3px; }
.promise b { font-weight: 500; display: block; } .promise span { color: var(--muted); font-size: .94rem; }
.claude-note { border-left: 3px solid var(--gold-2); padding: 4px 0 4px 16px; font-family: var(--display); font-size: 1.2rem; line-height: 1.45; color: #e9def7; }
.claude-note small { display: block; font-family: var(--body); font-size: .8rem; color: var(--gold-2); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }

/* ---------- next & send ---------- */
.steps3 { display: grid; gap: 0; position: relative; }
.steps3 > div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding-bottom: 22px; position: relative; }
.steps3 > div::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(var(--lav), transparent); }
.steps3 > div:last-child::before { display: none; }
.steps3 .dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow); color: var(--violet); font-family: var(--display); font-size: 1.3rem; }
.steps3 h3 { font-size: 1.3rem; margin: 8px 0 4px; } .steps3 p { margin: 0; color: var(--muted); font-size: .95rem; }
.map { display: grid; gap: 8px; } .map div { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px dashed var(--line); } .map b { font-weight: 500; min-width: 9.5em; } .map small { color: var(--muted); }
.q { padding: 16px; } .q p { margin: 0 0 4px; font-weight: 500; } .q .hint { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.summary { white-space: pre-wrap; font-size: .88rem; line-height: 1.5; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px; max-height: 260px; overflow: auto; color: #eadff8; }
.send-row { display: grid; gap: 10px; margin-top: 16px; }
.end { padding: 34px var(--gut) 50px; text-align: center; background: var(--night); color: #bba8d6; font-size: .86rem; }
.end .script-line { color: var(--gold-2); }
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); translate: -50% 30px; opacity: 0; z-index: 60; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: .92rem; transition: all .45s var(--spring); pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { translate: -50% 0; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .cover svg.name text { stroke-dashoffset: 0; fill: url(#goldfill); }
}
.mend figure.phonefit { background: linear-gradient(160deg, var(--lav-2), #f6efe6); padding-top: 18px; }
.mend figure.phonefit img { width: 62%; max-height: 380px; margin: 0 auto; border-radius: 18px 18px 0 0; box-shadow: 0 10px 30px -12px rgba(74,31,99,.45); object-fit: cover; object-position: top; }
.mend figure.phonefit figcaption { padding-top: 10px; }
.sec.dark .acc > button .t small { color: #c9b8e2; }
.topbar { background: rgba(251,247,242,.94); }
@media (min-width: 760px) { .cover { height: calc(100svh - 56px); min-height: 640px; } }