/* Hallmark · genre: editorial proposal · macrostructure: hero → 4 bands → one inverted closing band
 * theme: "Ivory Hotel" · anchor hue 58° brass · accent kept under ~5% of any viewport
 * habits: hairlines over boxes, uneven rhythm, one hard break (the closing band), left-biased headlines
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.wm { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; text-transform: none; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); }
.skip-link:focus { top: var(--space-md); }

.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }
.index { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-lg); }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display-s); line-height: 1; letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance; }
.lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); max-width: var(--measure); }
.chip { display: inline-flex; align-items: center; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); padding: 3px 9px; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); white-space: nowrap; background: var(--color-paper); }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: 90ms; } .rv.d2 { transition-delay: 180ms; } .rv.d3 { transition-delay: 270ms; }

/* ---------- top bar + progress ---------- */
.meter { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md);
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-md)) var(--gutter) var(--space-md);
  font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted);
  transition: background-color var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.top.solid { background: oklch(96.8% 0.008 85 / 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--color-rule); }
.top-mark { text-decoration: none; color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top-mark .wm { font-size: var(--text-sm); color: var(--color-ink); margin-right: var(--space-xs); }
.top-now { justify-self: center; white-space: nowrap; }
.top-now span { display: inline-block; transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out); }
.top-now span.swap { opacity: 0; transform: translateY(40%); }
.top-cta { justify-self: end; white-space: nowrap; text-decoration: none; color: var(--color-ink-2); padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule-firm); transition: color var(--dur-fast), border-color var(--dur-fast); }
.top-cta:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* ---------- a · hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: -3%; z-index: -2; background: url(visuals/water.webp) center / cover; animation: drift 40s var(--ease-in-out) infinite alternate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, oklch(96.8% 0.008 85 / 0.35) 0%, oklch(96.8% 0.008 85 / 0.55) 45%, var(--color-paper) 100%); }
@keyframes drift { from { transform: scale(1.02) translate3d(-0.6%, 0.3%, 0); } to { transform: scale(1.08) translate3d(0.6%, -0.5%, 0); } }
.hero-in { width: 100%; max-width: 76rem; margin: 0 auto; padding: 9rem var(--gutter) clamp(3rem, 9vh, 6rem); }
.kicker { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-2); margin-bottom: var(--space-lg); }
.kicker .sep { color: var(--color-accent); margin: 0 0.4em; }
.hero-h { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display); line-height: 0.95; letter-spacing: -0.045em; max-width: 13ch; text-wrap: balance; }
.hero-sub { margin-top: var(--space-lg); font-size: var(--text-md); line-height: 1.45; color: var(--color-ink-2); max-width: 44ch; }
.hero-play { margin-top: clamp(2rem, 6vh, 3.5rem); display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-lg); }
.play-xl { position: relative; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ink); color: var(--color-paper); transition: background-color var(--dur-fast), transform var(--dur-fast); }
.play-xl:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.play-xl:active { transform: scale(0.96); }
.play-xl .ring { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--color-accent); animation: breathe 3.2s var(--ease-in-out) infinite; }
.play-xl.is-playing .ring { animation-duration: 1.2s; }
@keyframes breathe { 50% { transform: scale(1.1); opacity: 0.35; } }
.hero-play-meta { display: grid; gap: 2px; }
.hero-play-meta .lbl { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.15; }
.hero-play-meta .sub { font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.scope { width: 100%; max-width: 22rem; height: 56px; justify-self: end; }

/* play / pause icons, shared */
.i-play, .i-pause { width: 40%; height: 40%; fill: currentColor; grid-area: 1 / 1; transition: opacity var(--dur-fast); }
.i-play { transform: translateX(6%); }
.i-pause { opacity: 0; }
.is-playing .i-play { opacity: 0; }
.is-playing .i-pause { opacity: 1; }

/* ---------- bands ---------- */
.band { padding: clamp(5rem, 12vw, 9rem) 0; }
.problem { padding-top: clamp(4rem, 9vw, 6rem); }

/* b · problem */
.trio { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-rule); }
.trio li { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; }
.trio li + li { padding-left: var(--space-lg); border-left: 1px solid var(--color-rule); }
.trio-k { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.02em; margin-bottom: var(--space-xs); }
.trio-v { color: var(--color-ink-2); max-width: 34ch; }

.contrast { margin-top: var(--space-3xl); display: grid; gap: var(--space-md); }
.contrast-row { display: grid; grid-template-columns: 15rem 1fr; gap: var(--space-xl); align-items: center; padding: var(--space-lg) 0; border-top: 1px solid var(--color-rule); }
.contrast-row.is-owned { border-top-color: var(--color-ink); }
.contrast-label { font-size: var(--text-sm); color: var(--color-muted); }
.contrast-label span { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); color: var(--color-ink); letter-spacing: -0.01em; }
.touch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); }
.touch li { display: grid; gap: var(--space-xs); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.touch .g, .touch .motif { display: block; height: 30px; color: var(--color-neutral); }
.touch .g svg, .motif svg { display: block; height: 100%; width: auto; max-width: 100%; }
.is-owned .touch .motif { color: var(--color-accent); }
.is-owned .touch li { color: var(--color-ink-2); }

/* c · offer */
.offer { background: var(--color-paper-2); }
.offer-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: end; }
.example { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 64ch; }
.example .chip { margin-right: var(--space-sm); vertical-align: 1px; }

.deck { margin-top: var(--space-xl); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--space-xl); align-items: center; padding: var(--space-xl) 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.deck-k { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.deck-title { margin-top: var(--space-xs); font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1.02; }
.deck-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.deck-player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); }
.play-lg { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ink); color: var(--color-paper); transition: background-color var(--dur-fast); }
.play-lg:hover { background: var(--color-accent); }
.wave { display: block; width: 100%; height: 40px; cursor: pointer; touch-action: none; }
.wave-xl { height: 64px; }
.deck-time, .card-time { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }

.exp-grid { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.card { display: grid; grid-template-rows: auto 1fr; background: var(--color-paper); border: 1px solid var(--color-rule); transition: border-color var(--dur-mid) var(--ease-out); }
.card.is-current { border-color: var(--color-accent); }
.card-img { position: relative; aspect-ratio: 16 / 7; background-size: cover; background-position: center; overflow: hidden; }
.card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, oklch(96.8% 0.008 85 / 0.55)); }
.card-img .motif { position: absolute; left: var(--space-lg); bottom: var(--space-md); z-index: 1; height: 34px; color: var(--color-ink); }
.card:is([data-key="evening"], [data-key="trendy"], [data-key="seasonal"]) .card-img .motif { color: var(--color-paper); }
.card:is([data-key="evening"], [data-key="trendy"], [data-key="seasonal"]) .card-img::after { background: linear-gradient(transparent 40%, oklch(28% 0.03 45 / 0.35)); }
.card-body { padding: var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-n { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.card-name { margin-top: var(--space-xs); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.03em; line-height: 1; }
.card-for { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-2); }
.card-dir { color: var(--color-ink-2); max-width: 40ch; }
.card-play { margin-top: var(--space-md); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); }
.play-sm { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--color-rule-firm); color: var(--color-ink); transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.play-sm:hover, .play-sm.is-playing { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

.card-for span { color: var(--color-accent); margin-right: 0.3em; }
.exp-grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
.exp-grid > .card:last-child:nth-child(odd) .card-img { aspect-ratio: auto; min-height: 100%; }

/* the diagram: one signature → every channel */
.tree { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr); margin-top: var(--space-3xl); align-items: stretch; min-height: 26rem; }
.tree-root { display: flex; flex-direction: column; justify-content: center; gap: var(--space-md); }
.tree-cap { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.tree-cap-r { margin-bottom: var(--space-md); color: var(--color-ink-2); }
.tree-arrow { display: none; }
.tree-meta { font-size: var(--text-sm); color: var(--color-muted); }
.motif-lg { display: block; height: 72px; color: var(--color-ink); }
.motif-lg svg { height: 100%; width: auto; }
.tree-lines { width: 100%; height: 100%; overflow: visible; }
.tree-lines path { fill: none; stroke: var(--color-rule-firm); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out), stroke var(--dur-mid) var(--ease-out); }
.tree.in .tree-lines path { stroke-dashoffset: 0; }
.tree-lines path.hot { stroke: var(--color-accent); }
.tree-leaves { display: flex; flex-direction: column; }
.leaves { display: grid; grid-auto-rows: 1fr; flex: 1; }
.leaves li {
  display: flex; align-items: center; border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); letter-spacing: -0.01em;
  color: var(--color-muted); opacity: 0; transform: translateX(-8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), color var(--dur-fast) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 500ms), calc(var(--i, 0) * 70ms + 500ms), 0ms;
}
.tree.in .leaves li { opacity: 1; transform: none; }
.leaves li:hover, .leaves li.hot { color: var(--color-ink); }

/* where it lives — the expression cards carry their channel, format and energy */
.where-head { margin-top: var(--space-3xl); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: end; }
.where-h { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1; }
.where-sub { color: var(--color-muted); max-width: 44ch; }
.card-spec { margin-top: var(--space-xs); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.energy { display: inline-flex; gap: 3px; align-items: flex-end; height: 14px; flex: none; }
.energy i { width: 5px; background: var(--color-rule); }
.energy i:nth-child(1) { height: 5px; } .energy i:nth-child(2) { height: 7px; } .energy i:nth-child(3) { height: 9px; } .energy i:nth-child(4) { height: 11px; } .energy i:nth-child(5) { height: 14px; }
.energy i.on { background: var(--color-accent); }
.where-foot { margin-top: var(--space-2xl); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--color-muted); }
.where-foot span { color: var(--color-ink); }

/* limitless + under a voice (from SUPERINTELLIGENCE) */
.limitless { background: var(--color-sand); }
.limitless-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2xl); align-items: start; }
.limitless-h { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5.4vw, 4.75rem); line-height: 0.92; letter-spacing: -0.04em; text-transform: uppercase; color: var(--color-accent); }
.limitless-p { margin-top: var(--space-lg); font-size: var(--text-md); color: var(--color-ink-2); max-width: 44ch; }
.uses { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.uses li { font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-2); padding: 5px 12px; border: 1px solid var(--color-rule-firm); border-radius: var(--radius-pill); white-space: nowrap; }
.voice { padding: var(--space-xl); background: var(--color-paper); border: 1px solid var(--color-rule); }
.voice-k { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.voice-h { margin-top: var(--space-xs); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); letter-spacing: -0.025em; line-height: 1.05; }
.voice-p { margin-top: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.voice-pad { position: relative; margin-top: var(--space-lg); height: 150px; border: 1px solid var(--color-rule-firm); cursor: ew-resize; touch-action: none; background: var(--color-paper-2); }
.voice-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vp-l, .vp-r { position: absolute; top: 8px; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); pointer-events: none; }
.vp-l { left: 10px; opacity: 0; } .vp-r { right: 10px; }
.voice-ctrl { margin-top: var(--space-md); display: flex; align-items: center; gap: var(--space-md); }
.voice-now { font-size: var(--text-sm); color: var(--color-muted); }
.voice-now b { color: var(--color-ink); font-weight: 500; }

/* d · pillars */
.pillar-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.pillar { padding: var(--space-xl) var(--space-xl) var(--space-lg) 0; }
.pillar + .pillar { padding-left: var(--space-xl); border-left: 1px solid var(--color-rule); }
.pillar-n { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); color: var(--color-accent); }
.pillar-h { margin-top: var(--space-2xl); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -0.035em; line-height: 1; }
.pillar-p { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 32ch; }

/* e · investment — Step 1 (required) dominant, Step 2 (optional) lighter, joined by a "then" */
.invest { background: var(--color-paper-2); }
.steps { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 0.95fr); align-items: stretch; }
.step { display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: var(--space-xs); }
.step-1 { padding: var(--space-xl); background: var(--color-paper); border: 1px solid var(--color-rule); border-top: var(--rule-heavy, 3px) solid var(--color-ink); }
.step-2 { padding: var(--space-xl); border: 1px dashed var(--color-rule-firm); align-self: center; }
.step-k { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.step-2 .step-k { color: var(--color-muted); }
.step-name { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.step-1 .step-name { font-size: var(--text-2xl); }
.step-2 .step-name { font-size: var(--text-xl); }
.step-price { margin-top: var(--space-sm); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.step-1 .step-price { font-size: var(--text-3xl); }
.step-2 .step-price { font-size: var(--text-xl); color: var(--color-ink-2); }
.step-price .unit { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; color: var(--color-muted); }
.step-list { margin: var(--space-md) 0 var(--space-md); display: grid; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.step-1 .step-list { font-size: var(--text-base); }
.step-list li { padding-left: 1.1em; position: relative; }
.step-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5em; height: 1px; background: var(--color-rule-firm); }
.step-note { font-size: var(--text-sm); color: var(--color-accent); margin-bottom: var(--space-sm); }
.tier-cta { justify-self: start; text-decoration: none; font-weight: 500; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-ink); transition: color var(--dur-fast), border-color var(--dur-fast); }
.tier-cta:hover { color: var(--color-accent); border-color: var(--color-accent); }
.step-2 .tier-cta { border-bottom-color: var(--color-rule-firm); color: var(--color-ink-2); }
.step-then { position: relative; display: grid; place-items: center; width: 6.5rem; }
.step-then::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-rule-firm); }
.step-then span { position: relative; padding: 4px 10px; background: var(--color-paper-2); font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.steps-more { margin-top: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.more-link { margin-left: 0.4em; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-rule-firm); }
.more-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.invest-note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* f · closing CTA — the one hard break */
.cta { position: relative; overflow: hidden; isolation: isolate; background: var(--color-ink); color: var(--color-paper); padding: clamp(6rem, 14vw, 11rem) 0 clamp(4rem, 9vw, 7rem); }
.cta-bg { position: absolute; inset: 0; z-index: -1; background: url(visuals/sand.webp) center / cover; opacity: 0.16; mix-blend-mode: luminosity; }
.cta-h { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display); line-height: 0.95; letter-spacing: -0.045em; max-width: 13ch; text-wrap: balance; }
.cta-actions { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-md); }
.btn { display: inline-flex; align-items: center; gap: 0.5em; min-height: 52px; padding: 0 var(--space-xl); border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.btn-solid { background: var(--color-paper); color: var(--color-ink); }
.btn-solid:hover { background: var(--color-accent-invert); }
.btn-line { border: 1px solid var(--color-rule-invert); color: var(--color-paper); }
.btn-line:hover { border-color: var(--color-accent-invert); color: var(--color-accent-invert); }
.cta :focus-visible { outline-color: var(--color-focus-invert); }
.creator { margin-top: var(--space-4xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-invert); display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-xl); align-items: baseline; }
.creator-h { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); }
.creator-p { color: var(--color-paper-muted); font-size: var(--text-sm); max-width: 56ch; }
.creator-links { display: flex; gap: var(--space-lg); font-size: var(--text-sm); }
.creator-links a { color: var(--color-paper-muted); text-decoration: none; }
.creator-links a:hover { color: var(--color-accent-invert); }

.foot { background: var(--color-ink); color: var(--color-paper-muted); padding: var(--space-lg) var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 7rem); font-size: var(--text-xs); display: grid; gap: var(--space-2xs); border-top: 1px solid var(--color-rule-invert); }
.foot a { color: inherit; }
.foot .wm { color: var(--color-paper); }

/* ---------- mini player ---------- */
.mini {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-md)); z-index: 70; transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--space-md)), 46rem);
  display: grid; grid-template-columns: auto minmax(0, 8rem) auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill);
  background: oklch(96.8% 0.008 85 / 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-rule); box-shadow: 0 10px 40px -18px oklch(30% 0.03 60 / 0.45);
}
.mini[hidden] { display: none; }
.mini-motif { height: 22px; color: var(--color-accent); }
.mini-k { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; }
.mini-t { position: relative; height: 1.3em; overflow: hidden; font-family: var(--font-display); font-weight: 500; }
.mini-t span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform 400ms var(--ease-out), opacity 400ms var(--ease-out); }
.mini-t span.enter { transform: translateY(100%); opacity: 0; }
.mini-t span.out { transform: translateY(-100%); opacity: 0; }
.mini-ctrl { display: flex; align-items: center; gap: var(--space-2xs); }
.mini-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--color-ink-2); }
.mini-btn svg { width: 16px; height: 16px; fill: currentColor; }
.mini-btn:hover { color: var(--color-accent); }
.mini-pp { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--color-ink); color: var(--color-paper); }
.mini-wave .wave { height: 28px; }
.mini-time { font-size: var(--text-2xs); font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }

/* ---------- contact dialog ---------- */
.contact { width: min(calc(100% - 2rem), 34rem); padding: var(--space-xl); border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); box-shadow: 0 30px 80px -30px oklch(25% 0.03 60 / 0.5); }
.contact::backdrop { background: oklch(25% 0.02 60 / 0.35); backdrop-filter: blur(4px); }
.contact-x { position: absolute; right: var(--space-md); top: var(--space-md); width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-muted); }
.contact-x svg { width: 18px; height: 18px; fill: currentColor; }
.contact-k { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-accent); }
.contact-h { margin-top: var(--space-xs); font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); letter-spacing: -0.03em; }
.contact-p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.contact-rows { margin-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.contact-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); }
.contact-l { font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.contact-v { font-weight: 500; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .contact { padding: var(--space-lg); } .contact-row { grid-template-columns: 1fr auto; } .contact-l { grid-column: 1 / -1; } }
.contact-actions { display: flex; gap: var(--space-xs); }
.contact-btn { font-size: var(--text-xs); font-weight: 500; padding: 6px 12px; border: 1px solid var(--color-rule-firm); border-radius: var(--radius-pill); text-decoration: none; color: var(--color-ink); transition: background-color var(--dur-fast), color var(--dur-fast); }
.contact-btn:hover, .contact-btn.is-done { background: var(--color-ink); color: var(--color-paper); }
.contact-status { margin-top: var(--space-sm); min-height: 1.4em; font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- auto-scroll pill ---------- */
.autoscroll { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 4.25rem); z-index: 55; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-sm); padding: 6px 6px 6px 14px; border-radius: var(--radius-pill); background: oklch(96.8% 0.008 85 / 0.9); border: 1px solid var(--color-rule); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--text-xs); color: var(--color-ink-2); white-space: nowrap; }
.autoscroll[hidden] { display: none; }
.as-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: breathe 1.6s var(--ease-in-out) infinite; }
.as-stop { padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-weight: 500; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .where-head, .limitless-in { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step-2 { align-self: stretch; }
  .step-then { width: auto; height: 4.5rem; }
  .step-then::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .tree { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: var(--space-2xl); }
  .tree-lines { display: none; }
  .tree-root { padding-bottom: var(--space-lg); }
  .tree-arrow { display: inline; margin-right: var(--space-xs); color: var(--color-accent); }
  .leaves li { padding: var(--space-sm) 0; }
  .exp-grid > .card:last-child:nth-child(odd) { grid-template-columns: minmax(0, 1fr); }
  .exp-grid > .card:last-child:nth-child(odd) .card-img { aspect-ratio: 16 / 7; min-height: 0; }
  .offer-head { grid-template-columns: 1fr; gap: var(--space-lg); }
  .deck { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: 1fr; }
  .contrast-row { grid-template-columns: 1fr; gap: var(--space-md); }
  .creator { grid-template-columns: 1fr; gap: var(--space-sm); }
}
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr auto; }
  .top-now { display: none; }
  .top-mark .for { display: none; }
  .hero-play { grid-template-columns: auto 1fr; }
  .scope { grid-column: 1 / -1; justify-self: stretch; max-width: none; height: 40px; }
  .trio, .pillar-list { grid-template-columns: 1fr; }
  .trio li, .trio li + li, .pillar, .pillar + .pillar { padding-left: 0; padding-right: 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .trio li:first-child, .pillar:first-child { border-top: 0; }
  .step-1, .step-2, .voice { padding: var(--space-lg); }
  .step-1 .step-price { font-size: var(--text-2xl); }
  .voice-pad { height: 130px; }
  .pillar-h { margin-top: var(--space-md); }
  .touch { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); }
  .touch li { font-size: 0.5625rem; letter-spacing: 0.06em; }
  .touch .g, .touch .motif { height: 22px; }
  .mini { grid-template-columns: auto minmax(0, 1fr) auto auto; border-radius: 20px; }
  .mini-wave, .mini-time { display: none; }
  .mini-motif { display: none; }
  .mini-title { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .leaves li { opacity: 1; transform: none; transition: none; }
  .tree-lines path { transition: none; stroke-dashoffset: 0; }
  .hero-bg, .play-xl .ring, .as-dot { animation: none; }
  .mini-t span { transition: none; }
}