/* boonvid — site styles. White, baby-blue accents, system type, generous space. Light / dark / auto. No frameworks. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --ink: #1d1d1f; --on-ink: #ffffff; --muted: #6e6e73; --faint: #a1a1a6;
  --hair: #e8e8ed; --paper: #f5f5f7; --white: #ffffff; --card: #ffffff;
  --baby: #cfe6ff; --baby-2: #e6f2ff; --baby-3: #f3f8ff; --baby-deep: #9ecbff;
  --accent: #1f7ae0; --accent-ink: #0f4f9a;
  --r: 22px; --r-s: 14px; --r-xs: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 40px rgba(29,29,31,.06);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.05), 0 30px 80px rgba(29,29,31,.12);
  --glass: rgba(255,255,255,.72);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px; --gutter: clamp(20px, 5vw, 64px);
  --sec: clamp(120px, 12vw, 190px);
  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --ink: #f5f5f7; --on-ink: #0b0b0d; --muted: #a1a1a6; --faint: #6e6e73;
  --hair: #26262b; --paper: #141418; --white: #0b0b0d; --card: #141418;
  --baby: #bfe0ff; --baby-2: #142339; --baby-3: #0f1722; --baby-deep: #3f78b5;
  --accent: #74b3ff; --accent-ink: #cfe6ff;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.55);
  --glass: rgba(11,11,13,.72);
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f5f7; --on-ink: #0b0b0d; --muted: #a1a1a6; --faint: #6e6e73;
  --hair: #26262b; --paper: #141418; --white: #0b0b0d; --card: #141418;
  --baby: #bfe0ff; --baby-2: #142339; --baby-3: #0f1722; --baby-deep: #3f78b5;
  --accent: #74b3ff; --accent-ink: #cfe6ff;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 40px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.55);
  --glass: rgba(11,11,13,.72);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .3s, color .3s; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.narrow { width: min(560px, calc(100% - 2 * var(--gutter))); }
.skip { position: fixed; left: 12px; top: -80px; background: var(--card); padding: 12px 16px; border-radius: 10px; z-index: 200; box-shadow: var(--shadow-lg); }
.skip:focus { top: 12px; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; }
h1 { font-size: clamp(46px, 7.2vw, 104px); letter-spacing: -.04em; line-height: 1.08; padding-bottom: .06em; }
h2.display { font-size: clamp(38px, 5vw, 76px); letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 3.4vw, 48px); }
h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; }
.h-sm { font-size: 24px; }
p { margin: 0; }
.lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--muted); max-width: 44ch; letter-spacing: -.01em; }
.eyebrow { display: block; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--accent); margin-bottom: 18px; }
.hint, .fine { font-size: 13px; color: var(--faint); }
.k { font-size: 13px; color: var(--muted); font-weight: 500; }
.link-arrow { font-weight: 600; color: var(--accent); }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-btn { color: var(--accent); font-weight: 500; font-size: 14px; }
.link-btn:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 16px; letter-spacing: -.01em; border: 1px solid var(--ink); white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), transform .35s var(--ease); will-change: transform; }
.btn:hover { box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.btn:active { transform: scale(.98); }
.btn::after { content: "→"; font-weight: 500; transition: transform .3s var(--ease); }
.btn:hover::after { transform: translateX(3px); }
.btn.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn.btn-ghost:hover { background: var(--baby-3); border-color: var(--baby-deep); box-shadow: none; }
.btn.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn.btn-lg { padding: 19px 34px; font-size: 18px; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn.busy::after { content: ""; width: 14px; height: 14px; border: 2px solid rgba(128,128,128,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
.pill-btn { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair); font-size: 14px; font-weight: 500; background: var(--card); transition: border-color .2s; }
.pill-btn:hover { border-color: var(--baby-deep); }
.pill-btn i { width: 10px; height: 10px; border-radius: 2px; background: var(--ink); display: inline-block; }
.pill-btn[aria-pressed="true"] i { background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.magnetic { transition: transform .35s var(--ease); }
.magnetic.pull { transition: transform .12s ease-out; }

/* ---------- header ---------- */
#site-header { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); transition: transform .4s var(--ease), box-shadow .3s; }
#site-header.scrolled { box-shadow: 0 1px 0 var(--hair); }
#site-header.hide { transform: translateY(-100%); }
.nav { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.04em; }
.logo-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); position: relative; }
.logo-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--baby); }
.nav-links { display: flex; gap: 30px; font-size: 14px; font-weight: 500; color: var(--muted); }
.nav-links a { position: relative; padding: 6px 0; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); position: relative; transition: background .2s, color .2s; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--paper); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bell i { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--white); }
.text-btn { font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 999px; color: var(--ink); }
.text-btn:hover { background: var(--paper); }
.burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; }
/* explicit width: .icon-btn centers its items, so in the column flex the lines collapsed to 0 px (invisible menu button) */
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* popovers (small, anchored under the icon) */
.popover { position: absolute; top: 64px; right: 24px; width: 300px; background: var(--card); border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; animation: pop .25s var(--ease); }
.pop-section { padding: 12px 12px 14px; }
.pop-section + .pop-section { border-top: 1px solid var(--hair); }
.pop-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--faint); margin-bottom: 8px; }
.seg-mini { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--paper); }
.seg-mini button { flex: 1; padding: 8px 6px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--muted); transition: all .2s; }
.seg-mini button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
#country-select { width: 100%; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.popover.news { width: 340px; }
.pop-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 6px; }
.pop-head .pop-label { margin: 0; }
#news-list { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow: auto; }
#news-list li { position: relative; display: grid; gap: 3px; padding: 12px 12px 12px 24px; border-radius: 12px; }
#news-list li:hover { background: var(--paper); }
#news-list li::before { content: ""; position: absolute; left: 10px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--hair); }
#news-list li.unread::before { background: var(--accent); }
#news-list strong { font-size: 14px; letter-spacing: -.01em; }
#news-list span { font-size: 13px; color: var(--muted); line-height: 1.4; }
#news-list time { font-size: 11px; color: var(--faint); }
#news-list a { position: absolute; right: 12px; top: 12px; color: var(--accent); }
#news-list .empty { color: var(--muted); font-size: 14px; padding: 18px 12px; }
.mobile-menu { position: fixed; inset: 72px 0 0; background: var(--glass); backdrop-filter: blur(20px); z-index: 45; display: grid; align-content: start; gap: 4px; padding: 24px var(--gutter); }
.mobile-menu a { font-size: 30px; font-weight: 600; letter-spacing: -.03em; padding: 14px 0; border-bottom: 1px solid var(--hair); }
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(80px, 12vw, 150px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.hero-orb { position: absolute; left: 50%; top: -10%; width: min(1100px, 120vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--baby-2) 0%, color-mix(in srgb, var(--baby-2) 50%, transparent) 35%, transparent 70%); pointer-events: none; animation: breathe 12s ease-in-out infinite; }
.hero-inner { position: relative; display: grid; justify-items: center; text-align: center; gap: 28px; }
.hero-inner h1 { max-width: none; }
.hero-inner .lead { max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* ---------- intro ---------- */
.intro { padding: clamp(40px, 6vw, 90px) 0 clamp(60px, 6vw, 90px); display: grid; gap: 28px; border-top: 1px solid var(--hair); }
.intro .lead { max-width: 60ch; font-size: clamp(21px, 2vw, 28px); color: var(--ink); line-height: 1.4; }

/* ---------- pinned features ---------- */
.pin { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 110px); padding-bottom: var(--sec); }
.pin-copy { position: sticky; top: clamp(120px, 22vh, 200px); align-self: start; height: clamp(320px, 56vh, 520px); display: grid; }
.pin-text { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.pin-text.on { opacity: 1; transform: none; pointer-events: auto; }
.pin-text h3 { font-size: clamp(32px, 3.6vw, 50px); margin-bottom: 18px; }
.pin-text p { font-size: 19px; color: var(--muted); max-width: 40ch; }
.pin-dots { align-self: end; display: flex; gap: 8px; }
.pin-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hair); transition: all .3s; }
.pin-dots i.on { background: var(--accent); width: 22px; border-radius: 4px; }
.pin-visuals { display: grid; gap: clamp(60px, 14vh, 140px); }
.pin-visual { margin: 0; height: clamp(420px, 72vh, 720px); display: grid; place-items: center; }
.art-frame { width: 100%; aspect-ratio: 4 / 3; max-height: 100%; border-radius: var(--r); background: linear-gradient(160deg, var(--baby-3), var(--card) 55%, var(--baby-2)); border: 1px solid var(--hair); box-shadow: var(--shadow); position: relative; overflow: hidden; transform: scale(.94); opacity: .55; transition: transform .8s var(--ease), opacity .8s var(--ease); }
.pin-visual.active .art-frame { transform: none; opacity: 1; }
.art-timing .words { position: absolute; left: 8%; top: 14%; right: 8%; display: flex; flex-wrap: wrap; gap: 10px 14px; font-family: var(--display); font-size: clamp(22px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.03em; color: var(--faint); }
.active.art-timing .words span { animation: wordlight 6s linear infinite; }
.active.art-timing .words span:nth-child(1) { animation-delay: 0s; } .active.art-timing .words span:nth-child(2) { animation-delay: .8s; } .active.art-timing .words span:nth-child(3) { animation-delay: 1.6s; } .active.art-timing .words span:nth-child(4) { animation-delay: 2.4s; } .active.art-timing .words span:nth-child(5) { animation-delay: 3.2s; } .active.art-timing .words span:nth-child(6) { animation-delay: 4s; }
.art-timing .waveform { position: absolute; left: 8%; right: 8%; bottom: 26%; height: 70px; display: flex; align-items: center; gap: 3px; }
.art-timing .waveform i { flex: 1; height: 30%; background: var(--baby-deep); border-radius: 3px; }
.art-timing .waveform i:nth-child(3n) { height: 70%; } .art-timing .waveform i:nth-child(4n) { height: 45%; } .art-timing .waveform i:nth-child(7n) { height: 95%; background: var(--accent); }
.art-timing .cuts { position: absolute; left: 8%; right: 8%; bottom: 14%; height: 6px; }
.art-timing .cuts b { position: absolute; left: var(--x); top: -70px; width: 1.5px; height: 90px; background: var(--ink); opacity: .5; }
.art-timing .playhead { position: absolute; left: 8%; bottom: 12%; width: 2px; height: 34%; background: var(--accent); border-radius: 2px; }
.active.art-timing .playhead { animation: sweep 6s linear infinite; }
/* "It finds the shot": three sentences, each with its own drawn shot (map · photo · footage), slow camera moves */
.art-pictures .shot { position: absolute; left: 8%; right: 8%; top: 9%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); background: #0e1a2b; }
.art-pictures .scene { position: absolute; inset: 0; opacity: 0; }
.art-pictures .scene:first-child { opacity: 1; }
.art-pictures .cam { position: absolute; inset: 0; }
.art-pictures .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.active.art-pictures .scene { animation: sceneCycle 15s linear infinite; }
.active.art-pictures .sc-city { animation-delay: 5s; } .active.art-pictures .sc-snow { animation-delay: 10s; }
.active.art-pictures .sc-map .cam { animation: camZoom 15s ease-in-out infinite; }
.active.art-pictures .sc-city .cam { animation: camPan 15s ease-in-out infinite 5s; }
.active.art-pictures .sc-snow .cam { animation: camZoom 15s ease-in-out infinite 10s; }
/* map */
.sc-map { background: radial-gradient(120% 90% at 30% 30%, #17314f, #0b1a2c 70%); }
.sc-map .grid path { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; }
.sc-map .land path { fill: #1d3a5a; }
.sc-map .route { fill: none; stroke: #9fd0ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 700; }
.active.art-pictures .sc-map .route { animation: routeDraw 15s linear infinite; }
.sc-map .pin { fill: #9fd0ff; } .sc-map .pin.b { opacity: 0; } .active.art-pictures .sc-map .pin.b { animation: pinIn 15s linear infinite; }
.sc-map .ship { fill: #fff; opacity: 0; offset-path: path("M120 150C220 90 320 230 420 170S540 90 600 120"); offset-rotate: 0deg; }
.active.art-pictures .sc-map .ship { animation: sail 15s linear infinite; }
.sc-map .chip { position: absolute; right: 7%; top: 12%; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; letter-spacing: .04em; backdrop-filter: blur(6px); opacity: 0; }
.active.art-pictures .sc-map .chip { animation: chipIn 15s linear infinite; }
/* city at dawn */
.sc-city { background: linear-gradient(180deg, #cfe0f2 0%, #e9e2e6 55%, #f3d3bd 100%); }
.sc-city .sun { position: absolute; left: 62%; top: 44%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff3e0, #f7c9a4 60%, transparent 70%); filter: blur(1px); }
.sc-city .far rect { fill: #5b6e88; } .sc-city .near rect { fill: #24344a; } .sc-city .win rect { fill: #ffe1b3; }
/* snow (footage) */
.sc-snow { background: linear-gradient(180deg, #2a3646 0%, #3f4d60 60%, #5a6a7e 100%); }
.sc-snow .ridge { position: absolute; left: -10%; right: -10%; bottom: -6%; height: 34%; background: #1a2431; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .9; }
.sc-snow .flakes { position: absolute; inset: -40% 0 0 0; background-image: radial-gradient(circle, rgba(255,255,255,.95) 1.3px, transparent 2.2px), radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.8px), radial-gradient(circle, rgba(255,255,255,.5) .8px, transparent 1.5px); background-size: 97px 83px, 131px 113px, 173px 151px; background-position: 0 0, 37px 61px, 89px 23px; }
.sc-snow .f2 { background-size: 71px 59px, 109px 127px, 151px 97px; background-position: 11px 29px, 53px 7px, 23px 71px; opacity: .55; filter: blur(.9px); }
.sc-snow::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 28%, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
.active.art-pictures .sc-snow .f1 { animation: snowfall 9s linear infinite; } .active.art-pictures .sc-snow .f2 { animation: snowfall 14s linear infinite reverse; }
/* sentences */
.art-pictures .lines { position: absolute; left: 8%; right: 8%; bottom: 7%; height: 1.6em; font-size: 15px; color: var(--muted); font-style: italic; }
.art-pictures .lines span { position: absolute; left: 0; opacity: 0; }
.art-pictures .lines span:first-child { opacity: 1; }
.art-pictures .lines b { font-weight: 500; color: var(--ink); }
.active.art-pictures .lines span { animation: sceneCycle 15s linear infinite; }
.active.art-pictures .lines .l2 { animation-delay: 5s; } .active.art-pictures .lines .l3 { animation-delay: 10s; }
@keyframes sceneCycle { 0% { opacity: 0; } 4% { opacity: 1; } 31% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }
@keyframes camZoom { 0% { transform: scale(1); } 36% { transform: scale(1.09); } 100% { transform: scale(1.09); } }
@keyframes camPan { 0% { transform: translateX(-2.5%) scale(1.06); } 36% { transform: translateX(2.5%) scale(1.06); } 100% { transform: translateX(2.5%) scale(1.06); } }
@keyframes routeDraw { 0%, 5% { stroke-dashoffset: 700; } 26% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes sail { 0%, 5% { offset-distance: 0%; opacity: 0; } 7% { opacity: 1; } 26% { offset-distance: 100%; opacity: 1; } 28%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes pinIn { 0%, 24% { opacity: 0; } 27%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes chipIn { 0%, 22% { opacity: 0; transform: translateY(6px); } 26%, 32% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; } }
@keyframes snowfall { from { transform: translateY(0); } to { transform: translateY(28%); } }
.art-details .title-card { position: absolute; left: 10%; top: 30%; display: grid; gap: 10px; }
.art-details small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.art-details strong { font-family: var(--display); font-size: clamp(44px, 5.6vw, 84px); letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.art-details strong.tick { animation: counttick .7s var(--ease) both; }
.art-details em { font-style: normal; font-size: 18px; color: var(--muted); }
.active.art-details .title-card > * { animation: rise .9s var(--ease) both; }
.active.art-details .title-card > *:nth-child(2) { animation-delay: .15s; } .active.art-details .title-card > *:nth-child(3) { animation-delay: .3s; }
@keyframes counttick { 0% { opacity: .35; transform: translateY(10px); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }

/* ---------- browser-window mockups ---------- */
.win { border-radius: 18px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); overflow: hidden; position: relative; }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--hair); background: var(--paper); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--hair); }
.win-bar i:nth-child(1) { background: #ff5f57; } .win-bar i:nth-child(2) { background: #febc2e; } .win-bar i:nth-child(3) { background: #28c840; }
.win-url { margin-left: 10px; flex: 1; text-align: center; font-size: 11px; color: var(--muted); background: var(--card); border-radius: 7px; padding: 4px 10px; max-width: 220px; margin-inline: auto; }
.win-body { padding: 22px; display: grid; gap: 16px; position: relative; }
.m-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-stepper li { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 2px solid var(--hair); font-size: 11px; font-weight: 500; color: var(--faint); }
.m-stepper li i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 9px; font-style: normal; }
.m-stepper li.on { color: var(--ink); border-color: var(--ink); } .m-stepper li.on i { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.m-stepper li.done { color: var(--accent); border-color: var(--accent); } .m-stepper li.done i { background: var(--accent); color: #fff; border-color: var(--accent); }
.m-drop { display: grid; place-items: center; align-content: start; gap: 8px; padding: 28px 16px 70px; border: 1.5px dashed var(--baby-deep); border-radius: 14px; background: var(--baby-3); font-size: 13px; color: var(--muted); }
.m-drop-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); position: relative; }
.m-drop-ico::before, .m-drop-ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--on-ink); transform: translate(-50%,-50%); border-radius: 2px; }
.m-drop-ico::before { width: 12px; height: 1.5px; } .m-drop-ico::after { width: 1.5px; height: 12px; }
.m-file { position: absolute; right: 12%; bottom: 13%; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); font-size: 12px; transform: rotate(-3deg); animation: floatFile 5s ease-in-out infinite; }
.m-file b { font-weight: 600; } .m-file span { color: var(--muted); }
.m-file-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--baby-2); position: relative; }
.m-file-ico::after { content: ""; position: absolute; left: 8px; top: 7px; width: 3px; height: 12px; background: var(--accent); border-radius: 2px; box-shadow: 5px 3px 0 var(--accent), 10px -2px 0 var(--accent); }
.m-cursor { position: absolute; right: 7%; bottom: 6%; width: 22px; height: 22px; fill: var(--ink); stroke: var(--white); stroke-width: 1.5; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); animation: floatFile 5s ease-in-out infinite; }
.m-look { gap: 14px; }
.m-row { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 12px; }
.m-label { font-size: 11px; font-weight: 600; color: var(--muted); }
.m-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--paper); width: max-content; max-width: 100%; }
.m-seg b { font-weight: 500; font-size: 11px; padding: 6px 12px; border-radius: 999px; color: var(--muted); white-space: nowrap; }
.m-seg b.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chips b { font-weight: 500; font-size: 11px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink); white-space: nowrap; }
.m-chips b.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.m-chips b.more { color: var(--accent); border-color: var(--baby-deep); }
.m-sliders { display: grid; gap: 8px; }
.m-sliders div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 10px; font-size: 10px; color: var(--muted); }
.m-sliders i { display: block; height: 4px; border-radius: 4px; background: var(--hair); position: relative; }
.m-sliders i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--accent); border-radius: 4px; }
.m-sliders i::after { content: ""; position: absolute; left: var(--v); top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); transform: translate(-50%,-50%); }
.m-look.big { padding: 30px; gap: 22px; } .m-look.big .m-row { grid-template-columns: 110px 1fr; } .m-look.big .m-label { font-size: 13px; } .m-look.big .m-seg b, .m-look.big .m-chips b { font-size: 13px; padding: 8px 14px; } .m-look.big .m-sliders div { font-size: 12px; grid-template-columns: 80px 1fr; }
.m-bell { margin-left: auto; position: relative; width: 18px; height: 18px; color: var(--muted); }
.m-bell svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.m-bell i { position: absolute; top: 0; right: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--paper); }
.m-notif-body { padding: 18px; }
.m-player { aspect-ratio: 16/9; border-radius: 12px; background: linear-gradient(120deg, #17384a, #3f8aa3 40%, #d9e7ec 55%, #4a7d8e 75%, #101f2b); background-size: 220% 100%; animation: pan 16s ease-in-out infinite alternate; display: grid; place-items: center; }
.m-wm { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -.05em; color: rgba(255,255,255,.55); }
.m-notif { position: absolute; right: 18px; top: 18px; width: min(320px, 78%); display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--hair); box-shadow: var(--shadow-lg); animation: slideIn 1.2s var(--ease) both; }
.m-notif-ico { width: 34px; height: 34px; border-radius: 9px; background: var(--ink); position: relative; }
.m-notif-ico::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--baby); }
.m-notif b { display: block; font-size: 12px; font-weight: 600; } .m-notif span { font-size: 11px; color: var(--muted); line-height: 1.35; } .m-notif time { font-size: 10px; color: var(--faint); }

/* ---------- steps ---------- */
.steps { padding: 0 0 var(--sec); }
.step-rows { display: grid; gap: clamp(64px, 8vw, 120px); margin-top: clamp(48px, 5vw, 80px); }
.step-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.step-row.rev .step-copy { order: 2; } .step-row.rev .win { order: 1; }
.step-copy { display: grid; gap: 14px; align-content: center; }
.step-copy h3 { font-size: clamp(26px, 2.6vw, 36px); }
.step-copy p { color: var(--muted); font-size: 18px; max-width: 40ch; }
.num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--baby-2); color: var(--accent-ink); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.step-row .win { perspective: 1200px; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }

/* ---------- options / look panel ---------- */
.options { background: var(--paper); padding: var(--sec) 0; }
.opt-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(48px, 5vw, 72px); }
.opt-head .lead { max-width: 40ch; justify-self: end; }
.opt-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.win-look { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.opt-list { list-style: none; margin: 0; padding: 0; display: grid; }
.opt-list li { display: grid; gap: 6px; padding: 22px 0 22px 26px; border-top: 1px solid var(--hair); position: relative; }
.opt-list li:last-child { border-bottom: 1px solid var(--hair); }
.opt-list li::before { content: ""; position: absolute; left: 0; top: 32px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--baby-2); }
.opt-list h3 { font-size: 19px; }
.opt-list p { color: var(--muted); font-size: 15px; max-width: 48ch; }

/* ---------- films / marquee ---------- */
.films { padding: var(--sec) 0; overflow: hidden; border-top: 1px solid var(--hair); }
.films-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-bottom: clamp(40px, 5vw, 64px); }
.films-side { display: grid; gap: 14px; justify-items: end; text-align: right; }
.films-side p { color: var(--muted); font-size: 15px; max-width: 34ch; }
.marquee { --w: 440px; --gap: 22px; width: 100%; }
.track { display: flex; gap: var(--gap); width: max-content; padding-left: var(--gutter); animation: drift 70s linear infinite; }
.marquee:hover .track, .marquee.paused .track, .marquee:focus-within .track { animation-play-state: paused; }
.film { width: var(--w); flex: none; }
.poster { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; position: relative; background: #0f1218; box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.film:hover .poster { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.poster video { width: 100%; height: 100%; object-fit: cover; }
.soon { position: absolute; left: 14px; top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.85); color: #1d1d1f; backdrop-filter: blur(8px); }
.film-meta { display: flex; justify-content: space-between; gap: 12px; padding: 14px 6px 0; font-size: 14px; }
.film-meta strong { font-weight: 600; letter-spacing: -.01em; }
.film-meta span { color: var(--faint); white-space: nowrap; }
.ph-history .poster { background: radial-gradient(120% 90% at 30% 20%, #6b5843, #2b2119 70%); }
.ph-grain { position: absolute; inset: 0; background-image: repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; animation: grain .35s steps(2) infinite; }
.ph-beam { position: absolute; inset: -40%; background: conic-gradient(from 200deg at 60% 20%, transparent 0 40%, rgba(255,230,190,.28) 45%, transparent 50%); animation: beam 9s ease-in-out infinite alternate; }
.ph-scratch { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 96px, rgba(255,255,255,.08) 96px 97px); animation: scratch 1.6s linear infinite; opacity: .6; }
.ph-year { position: absolute; right: 22px; bottom: 18px; font-family: var(--display); font-size: 56px; font-weight: 700; letter-spacing: -.05em; color: rgba(255,240,220,.9); }
.ph-caption { position: absolute; left: 22px; bottom: 26px; display: grid; gap: 6px; } .ph-caption i { display: block; height: 3px; width: 120px; background: rgba(255,255,255,.55); border-radius: 2px; } .ph-caption i:last-child { width: 70px; }
.ph-documentary .poster { background: #0b1a24; }
.ph-pan { position: absolute; inset: -20%; background: linear-gradient(110deg, #0f2a3a 0%, #2e6f86 30%, #dbe9ee 52%, #4d7f8f 70%, #0d1e2a 100%); background-size: 200% 100%; animation: pan 14s ease-in-out infinite alternate; }
.ph-bars { position: absolute; inset: 0; border-top: 11% solid #000; border-bottom: 11% solid #000; }
.ph-sub { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; font-size: 15px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.ph-maps .poster { background: #f6f3ec; }
.ph-maps svg { width: 100%; height: 100%; }
.ph-coast { fill: none; stroke: #d5cfc2; stroke-width: 26; stroke-linecap: round; }
.ph-route { fill: none; stroke: #1f7ae0; stroke-width: 2.5; stroke-dasharray: 6 8; animation: dash 6s linear infinite; }
.ph-dot { fill: #1d1d1f; } .ph-dot.d2 { animation: pulse 2.4s ease-out infinite; } .ph-dot.d3 { animation: pulse 2.4s ease-out 1.2s infinite; }
.ph-football .poster { background: linear-gradient(180deg, #1f7a44, #16663a); }
.ph-pitch { position: absolute; inset: 8% 6%; border: 2px solid rgba(255,255,255,.7); border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 12%, transparent 12% 24%); }
.ph-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.7); } .ph-circle { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; transform: translate(-50%,-50%); }
.ph-ball { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); left: 20%; top: 60%; animation: ball 5s ease-in-out infinite; }
.ph-score { position: absolute; right: 22px; top: 18px; display: flex; gap: 8px; align-items: baseline; font-family: var(--display); font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.04em; } .ph-score small { color: rgba(255,255,255,.6); }
.ph-explainer .poster { background: #fff; }
.ph-sun { position: absolute; right: 12%; top: 16%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #cfe6ff; animation: breathe-s 5s ease-in-out infinite; }
.ph-stick { fill: none; stroke: #1d1d1f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 4s var(--ease) infinite alternate; }
.ph-ray { stroke: #1f7ae0; }

/* ---------- trial ---------- */
.trial-wrap { margin-block: var(--sec); }
.trial { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; padding: clamp(48px, 6vw, 88px); background: linear-gradient(160deg, var(--baby-3), var(--baby-2)); border-radius: 34px; }
.trial-copy { display: grid; gap: 22px; justify-items: start; }
.trial-copy .btn { margin-top: 8px; }
.trial-art { perspective: 1200px; }
.trial-art .screen { aspect-ratio: 16/10; border-radius: 18px; background: #0d1620; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease); }
.trial-art .scene { position: absolute; inset: 0; background: linear-gradient(120deg, #17384a, #3f8aa3 40%, #d9e7ec 55%, #4a7d8e 75%, #101f2b); background-size: 220% 100%; animation: pan 16s ease-in-out infinite alternate; }
.trial-art .wm, .player .wm { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 6vw, 84px); letter-spacing: -.05em; color: rgba(255,255,255,.55); pointer-events: none; }
.trial-art .bar, .player .pbar { position: absolute; left: 6%; right: 6%; bottom: 12%; height: 3px; background: rgba(255,255,255,.25); border-radius: 3px; overflow: hidden; }
.trial-art .bar i, .player .pbar i { display: block; height: 100%; width: 88%; background: #fff; border-radius: 3px; }
.trial-art .tc, .player .tc { position: absolute; right: 6%; bottom: 5%; font-size: 11px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }

/* ---------- plans ---------- */
.pricing { padding: 0 0 var(--sec); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: clamp(48px, 5vw, 72px) 0 32px; align-items: stretch; }
.plan { position: relative; border: 1px solid var(--hair); border-radius: var(--r); padding: 36px 32px 32px; display: grid; gap: 12px; align-content: start; background: var(--card); transition: box-shadow .35s var(--ease), border-color .3s, transform .5s var(--ease); }
.plan:hover { box-shadow: var(--shadow-lg); border-color: var(--baby-deep); }
.plan.popular { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.plan.popular .plan-d, .plan.popular .plan-min span, .plan.popular .plan-soon, .plan.popular li { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.plan .tag { position: absolute; top: -13px; left: 28px; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--baby); color: #0f4f9a; }
.plan h3 { font-size: 24px; }
.plan-d { color: var(--muted); font-size: 15px; min-height: 2.6em; }
.plan-min { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.plan-min b { font-family: var(--display); font-weight: 600; font-size: 52px; letter-spacing: -.045em; line-height: 1; }
.plan-min span { color: var(--muted); font-size: 14px; }
.plan-soon { font-size: 13px; color: var(--faint); }
.plan .btn { margin-top: 18px; width: 100%; }
.plan.popular .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.plan.popular .btn:hover { background: var(--baby); border-color: var(--baby); color: #0f4f9a; }
.plan ul { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.plan.popular ul { border-color: color-mix(in srgb, var(--on-ink) 15%, transparent); }
.plan li::before { content: "✓"; margin-right: 10px; color: var(--accent); font-weight: 700; }
.plan.popular li::before { color: var(--baby); }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 100px); padding: 0 0 var(--sec); }
.faq-list details { border-top: 1px solid var(--hair); }
.faq-list details:last-child { border-bottom: 1px solid var(--hair); }
summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; font-size: 19px; font-weight: 500; letter-spacing: -.015em; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--ink), var(--ink)) center/12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center/1.5px 12px no-repeat; transition: transform .35s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
.faq-list details > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-list details[open] > div { grid-template-rows: 1fr; }
.faq-list details > div > p { overflow: hidden; color: var(--muted); padding-bottom: 0; transition: padding .4s var(--ease); max-width: 60ch; }
.faq-list details[open] > div > p { padding-bottom: 26px; }

/* ---------- closing ---------- */
.closing { padding: var(--sec) 0; text-align: center; background: linear-gradient(180deg, var(--white), var(--baby-3)); }
.closing .wrap { display: grid; justify-items: center; gap: 34px; }
.closing h2 { max-width: 16ch; }

/* ---------- footer ---------- */
#site-footer { border-top: 1px solid var(--hair); background: var(--white); }
.foot { padding: 56px 0 36px; display: grid; gap: 40px; }
.foot-top { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; }
.foot-top p { color: var(--muted); font-size: 14px; }
.foot-nav { display: flex; gap: 24px; font-size: 14px; font-weight: 500; }
.foot-nav a:hover { color: var(--accent); }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--faint); }
.foot-bottom div { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-bottom button { font-size: 12px; color: var(--faint); } .foot-bottom button:hover { color: var(--ink); }

/* ---------- generic page hero ---------- */
.page-hero { padding: clamp(72px, 10vw, 130px) 0 clamp(24px, 4vw, 48px); display: grid; gap: 24px; justify-items: center; text-align: center; }
.page-hero .lead { max-width: 56ch; }
.plans-page { margin-top: clamp(40px, 5vw, 64px); }
.how-min { padding: var(--sec) 0 0; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.how-grid article { display: grid; gap: 14px; align-content: start; padding-top: 26px; border-top: 1px solid var(--hair); }
.how-grid h3 { font-size: 22px; } .how-grid p { color: var(--muted); }
.compare { padding: var(--sec) 0; }
.table-wrap { overflow-x: auto; margin-top: clamp(32px, 4vw, 56px); border: 1px solid var(--hair); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
th, td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--hair); }
thead th { font-weight: 600; font-size: 14px; color: var(--muted); background: var(--paper); }
thead th.pop { color: var(--ink); } thead th em { display: block; font-style: normal; font-size: 11px; color: var(--accent); }
tbody th { font-weight: 500; }
td { color: var(--muted); text-align: center; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------- auth ---------- */
.auth { padding: clamp(56px, 9vw, 110px) 0 var(--sec); display: grid; gap: 22px; }
.auth h1 { font-size: clamp(38px, 5vw, 56px); }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper); width: max-content; }
.tabs button { padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); transition: all .25s var(--ease); }
.tabs button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.auth-form { display: grid; gap: 16px; margin-top: 8px; }
.auth-form label, .field { display: grid; gap: 8px; font-size: 14px; font-weight: 500; }
.auth-form input, .field textarea, .field input { padding: 15px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--card); color: var(--ink); font-size: 17px; transition: border-color .2s, box-shadow .2s; }
.auth-form input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--baby-2); }
.auth-form input.bad { border-color: #d0433f; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-form .btn { margin-top: 6px; }
.code { letter-spacing: .5em; text-align: center; font-size: 26px !important; font-variant-numeric: tabular-nums; }
.err { color: #c0342f; font-size: 14px; }
.dash { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 24px; }
.card { border: 1px solid var(--hair); border-radius: var(--r); padding: 26px; display: grid; gap: 6px; justify-items: start; background: var(--card); }
.card b { font-family: var(--display); font-size: 44px; letter-spacing: -.04em; line-height: 1; font-weight: 600; }
.card b.ok { color: var(--accent); font-size: 28px; } .card b.muted { color: var(--faint); font-size: 28px; }
.card > span:not(.k) { font-size: 13px; color: var(--muted); }
.card .btn { margin-top: 12px; }
.film-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.film-list li { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--hair); border-radius: 16px; }
.film-list .thumb { aspect-ratio: 16/9; border-radius: 10px; position: relative; overflow: hidden; background: linear-gradient(120deg, #17384a, #3f8aa3, #101f2b); display: grid; place-items: center; }
.wm-sm { font-weight: 700; color: rgba(255,255,255,.6); font-size: 14px; letter-spacing: -.03em; }
.film-list strong { display: block; font-size: 15px; } .film-list span { font-size: 13px; color: var(--muted); } .film-list time { font-size: 12px; color: var(--faint); }

/* ---------- studio ---------- */
/* minmax(0, 1fr): the grid track must not grow to the panel's min-content (the .seg pills are width: max-content),
   otherwise head, stepper and panel all overflow the viewport on phones (14.9.: 383 px in a 335 px column) */
.studio { padding: clamp(48px, 7vw, 90px) 0 var(--sec); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.studio-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.studio-head h1 { font-size: clamp(36px, 4.6vw, 56px); }
.badge { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 600; color: var(--muted); }
.badge.blue { background: var(--baby-2); color: var(--accent-ink); }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stepper li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 2px solid var(--hair); font-size: 14px; font-weight: 500; color: var(--faint); transition: border-color .3s, color .3s; }
.stepper li i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; font-style: normal; }
.stepper li.on { color: var(--ink); border-color: var(--ink); } .stepper li.on i { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.stepper li.done { color: var(--accent); border-color: var(--accent); } .stepper li.done i { background: var(--accent); color: #fff; border-color: var(--accent); }
.panel { border: 1px solid var(--hair); border-radius: 28px; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; background: var(--card); box-shadow: var(--shadow); animation: fade .35s var(--ease); }
.panel .lead { font-size: 17px; }
.field textarea { min-height: 260px; resize: vertical; line-height: 1.6; }
.field small { color: var(--faint); font-weight: 400; }
.file-inline { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--accent); font-weight: 500; cursor: pointer; width: max-content; }
.file-inline input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-inline::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--baby-2); }
.panel-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.drop { display: grid; place-items: center; gap: 10px; padding: 56px 24px; border: 1.5px dashed var(--baby-deep); border-radius: 20px; text-align: center; cursor: pointer; transition: all .25s var(--ease); background: var(--baby-3); }
.drop.over, .drop:hover { border-color: var(--accent); background: var(--baby-2); }
.drop.has { border-style: solid; border-color: var(--accent); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); position: relative; }
.drop-ico::before, .drop-ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--on-ink); transform: translate(-50%,-50%); border-radius: 2px; }
.drop-ico::before { width: 16px; height: 2px; } .drop-ico::after { width: 2px; height: 16px; }
.drop strong { font-size: 15px; }
.vo-info { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; color: var(--muted); } .vo-info b { color: var(--ink); font-variant-numeric: tabular-nums; }
.note { color: var(--accent-ink); background: var(--baby-2); padding: 4px 10px; border-radius: 999px; font-size: 13px; }
.look { display: grid; gap: 22px; }
fieldset { border: 1px solid var(--hair); border-radius: 18px; padding: 20px 22px 22px; margin: 0; display: grid; gap: 14px; }
legend { padding: 0 8px; font-weight: 600; font-size: 15px; }
/* fit-content, not max-content: identical when there is room, but on phones the pills may wrap instead of forcing
   the whole panel wider than the screen (14.9.: the language bar made the builder scroll sideways at 375 px) */
.seg { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--paper); border-radius: 999px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.seg label { position: relative; } .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* the pill is the span right after the input; spans nested inside it (label text + "coming soon") stay plain inline,
   otherwise they inherit the pill padding and push that option down (Julius 14.9.: "der button ist verschoben") */
.seg input + span { display: inline-block; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all .25s var(--ease); }
.seg input + span span { display: inline; padding: 0; }
.seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; } .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--hair); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s var(--ease); }
.chip span:hover { border-color: var(--baby-deep); }
.chip input:checked + span { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); }
.chip > span { position: relative; } .chip > span > span { display: inline; padding: 0; border: 0; }
/* 'recommended' / 'takes longest' — a small word in the corner of the box (Julius 18.9.) */
.seg input + span { position: relative; }
.reco { position: absolute; top: -8px; right: 10px; font-size: 9px; line-height: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--accent); background: var(--card); padding: 0 5px; border-radius: 4px; border: 1px solid var(--hair); white-space: nowrap; }
.reco.slow { color: var(--muted); }
.chip input:checked + span .reco { color: var(--accent); }
.levels { display: grid; gap: 14px; }
.levels label { display: grid; grid-template-columns: 120px 1fr 48px; align-items: center; gap: 14px; font-size: 14px; color: var(--muted); }
.levels b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
input[type=range] { accent-color: var(--accent); width: 100%; }
/* footage mix + music tracks (14.9.) */
.mix .seg small { font-size: 12px; color: var(--muted); font-weight: 400; }
.seg label.off input + span { color: var(--muted); opacity: .55; cursor: not-allowed; }
.mix > .fine { display: block; margin-top: 10px; }
.tracks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.tracks li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 14px; background: var(--card); }
.tracks .track-name { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracks .track-rm { font-size: 13px; color: var(--muted); }
.tracks .track-play { padding: 7px 12px; font-size: 13px; }
.tracks .track-play i { background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }          /* ▶ */
.tracks .track-play[aria-pressed="true"] i { background: var(--ink); clip-path: none; }                 /* ■ */
.notif.off { opacity: .6; }
.notif.off input { cursor: not-allowed; }
.build .fine { max-width: 46ch; }
.review { display: grid; grid-template-columns: 140px 1fr; gap: 12px 20px; margin: 0; font-size: 15px; }
.review dt { color: var(--muted); font-weight: 500; } .review dd { margin: 0; }
.notif { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); padding: 14px 16px; border-radius: 14px; background: var(--baby-3); }
.notif input { accent-color: var(--accent); width: 18px; height: 18px; }
.gate { display: grid; gap: 18px; justify-items: start; padding: 20px 0; }
.build { display: grid; justify-items: center; gap: 26px; padding: 30px 0 10px; text-align: center; }
.ring { position: relative; width: 150px; height: 150px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--hair); stroke-width: 6; }
.ring #arc { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 30px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--faint); }
.stages li { transition: color .3s; } .stages li.on { color: var(--ink); font-weight: 600; } .stages li.done { color: var(--accent); }
.stages li.done::before { content: "✓ "; }
.ready { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.player { aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; position: relative; background: #0b1218; box-shadow: var(--shadow-lg); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s var(--ease); }
.player .scene { position: absolute; inset: 0; }
.player video.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0b1218; }
.film-actions { display: inline-flex; gap: 8px; align-items: center; }
.player .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); transform: translate(-50%,-50%); transition: transform .3s var(--ease), opacity .3s; }
.player .play::before { content: ""; position: absolute; left: 55%; top: 50%; border-left: 20px solid #1d1d1f; border-top: 12px solid transparent; border-bottom: 12px solid transparent; transform: translate(-50%,-50%); }
.player .play:hover { transform: translate(-50%,-50%) scale(1.06); }
.player.playing .play { opacity: 0; }
.player.playing .pbar i { animation: progress 120s linear forwards; }
.ready-copy { display: grid; gap: 18px; }
.ready-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.continue { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--hair); margin-top: 8px; }
.stars { display: flex; gap: 6px; margin: 4px 0 18px; }
.stars button { font-size: 34px; color: var(--hair); transition: color .15s, transform .2s var(--ease); line-height: 1; }
.stars button:hover { transform: scale(1.15); } .stars button.on { color: var(--accent); }

/* ---------- checkout ---------- */
.co { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; margin: 8px 0 22px; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 15px; }
.co dt { color: var(--muted); } .co dd { margin: 0; text-align: right; font-weight: 500; }
.co-form { margin: 0 0 18px; }
.co-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--faint); margin-top: 6px; }
.lock { width: 10px; height: 8px; border: 1.5px solid var(--faint); border-radius: 2px; position: relative; margin-top: 4px; }
.lock::before { content: ""; position: absolute; left: 1px; top: -6px; width: 6px; height: 6px; border: 1.5px solid var(--faint); border-bottom: 0; border-radius: 4px 4px 0 0; }
.done { display: grid; justify-items: center; text-align: center; gap: 14px; }
.check { width: 64px; height: 64px; border-radius: 50%; background: var(--baby-2); position: relative; margin-bottom: 8px; animation: pop .5s var(--ease); }
.check::after { content: ""; position: absolute; left: 22px; top: 18px; width: 16px; height: 26px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(45deg); }

/* ---------- feedback prompt ---------- */
.fb { display: grid; gap: 18px; text-align: center; justify-items: center; }
.fb h2 { font-size: 28px; }
.fb-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.fb-btn { display: grid; gap: 10px; justify-items: center; padding: 22px 10px 18px; border-radius: 16px; border: 1px solid var(--hair); font-size: 13px; font-weight: 500; transition: all .25s var(--ease); }
.fb-btn:hover { border-color: var(--baby-deep); background: var(--baby-3); transform: translateY(-2px); }
.fb-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--baby-2); color: var(--accent-ink); display: grid; place-items: center; font-size: 18px; }
.fb .field { width: 100%; text-align: left; }
.fb-actions { display: flex; gap: 14px; align-items: center; }
.fb.done h2 { font-size: 22px; }

/* ---------- modal & toasts ---------- */
dialog#modal { width: min(520px, calc(100% - 32px)); border: 0; border-radius: 26px; padding: 40px; color: var(--ink); background: var(--card); box-shadow: var(--shadow-lg); animation: pop .3s var(--ease); }
dialog#modal::backdrop { background: rgba(29,29,31,.35); backdrop-filter: blur(6px); }
#modal-body { display: grid; gap: 14px; }
#modal-body h2 { font-size: 30px; }
#modal-body p { color: var(--muted); }
#modal-body .chips { margin-bottom: 8px; }
.modal-close { position: absolute; right: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%; font-size: 22px; color: var(--muted); display: grid; place-items: center; }
.modal-close:hover { background: var(--paper); }
#toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 100; pointer-events: none; }
.toast { padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease); white-space: nowrap; }
.toast.in { opacity: 1; transform: none; }

/* ---------- cursor glow ---------- */
#cursor-glow { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(159,203,255,.22) 0%, rgba(159,203,255,0) 60%); pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s; mix-blend-mode: multiply; }
:root[data-theme="dark"] #cursor-glow { mix-blend-mode: screen; background: radial-gradient(circle, rgba(116,179,255,.14) 0%, rgba(116,179,255,0) 60%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #cursor-glow { mix-blend-mode: screen; background: radial-gradient(circle, rgba(116,179,255,.14) 0%, rgba(116,179,255,0) 60%); } }
#cursor-glow.on { opacity: 1; }
main { position: relative; z-index: 1; }

/* ---------- tilt ---------- */
.tilt { --rx: 0deg; --ry: 0deg; }
.plan.tilt { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }

/* ---------- reveal / motion ---------- */
.reveal { opacity: 1; }
.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .plans .reveal:nth-child(2), .motion .opt-list .reveal:nth-child(2) { transition-delay: .1s; }
.motion .plans .reveal:nth-child(3), .motion .opt-list .reveal:nth-child(3) { transition-delay: .2s; }
.motion .opt-list .reveal:nth-child(4) { transition-delay: .3s; } .motion .opt-list .reveal:nth-child(5) { transition-delay: .4s; } .motion .opt-list .reveal:nth-child(6) { transition-delay: .5s; }
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.split .w > span { display: inline-block; }
.motion .split .w > span { transform: translateY(110%); animation: up .9s var(--ease) forwards; animation-delay: calc(var(--d) + 120ms); }

@keyframes up { to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(6px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
@keyframes breathe-s { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes drift { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@keyframes wordlight { 0%, 12% { color: var(--ink); } 14%, 100% { color: var(--faint); } }
@keyframes sweep { from { left: 8%; } to { left: 92%; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes floatFile { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grain { to { transform: translate(-2px, 1px); } }
@keyframes beam { to { transform: rotate(18deg); } }
@keyframes scratch { to { background-position: 97px 0; } }
@keyframes pan { to { background-position: 100% 0; } }
@keyframes dash { to { stroke-dashoffset: -140; } }
@keyframes pulse { 0% { r: 4; opacity: 1; } 100% { r: 18; opacity: 0; } }
@keyframes ball { 0% { left: 20%; top: 60%; } 35% { left: 55%; top: 30%; } 65% { left: 72%; top: 62%; } 100% { left: 20%; top: 60%; } }
@keyframes progress { from { width: 0; } to { width: 100%; } }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  #account-link { display: none; }
  .pin { grid-template-columns: 1fr; }
  .pin-copy { position: static; height: auto; display: grid; gap: 0; }
  .pin-text { grid-area: auto; opacity: 1; transform: none; display: none; } .pin-text.on { display: block; }
  .pin-visuals { gap: 40px; } .pin-visual { height: auto; min-height: 0; }
  .pin-dots { margin: 18px 0 30px; }
  .step-row, .step-row.rev { grid-template-columns: 1fr; } .step-row.rev .step-copy { order: 1; } .step-row.rev .win { order: 2; }
  .opt-head { grid-template-columns: 1fr; } .opt-head .lead { justify-self: start; }
  .opt-layout { grid-template-columns: 1fr; }
  .trial { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .faq { grid-template-columns: 1fr; }
  .ready { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .films-head { grid-template-columns: 1fr; } .films-side { justify-items: start; text-align: left; }
}
@media (max-width: 640px) {
  :root { --sec: 96px; }
  .nav { height: 64px; gap: 8px; }
  .icon-btn { padding: 8px; } #locale-label { display: none; }
  .nav-actions .btn { display: none; }
  .mobile-menu { inset: 64px 0 0; }
  .popover { right: 12px !important; width: calc(100vw - 24px); }
  .hero-inner h1 { font-size: clamp(40px, 12vw, 60px); }
  .marquee { --w: 300px; }
  .trial { padding: 32px 24px; border-radius: 24px; }
  .two { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(4, auto); gap: 6px; } .stepper li span { display: none; }
  .review { grid-template-columns: 1fr; gap: 4px 0; } .review dt { margin-top: 10px; }
  .levels label { grid-template-columns: 1fr 48px; } .levels label span { grid-column: 1 / -1; }
  .foot-top { grid-template-columns: 1fr; }
  dialog#modal { padding: 28px 22px; }
  .film-list li { grid-template-columns: 90px 1fr; } .film-list time { display: none; }
  .m-row { grid-template-columns: 1fr; gap: 6px; } .m-look.big { padding: 18px; } .m-look.big .m-row { grid-template-columns: 1fr; }
  .fb-choices { grid-template-columns: 1fr; }
  .m-file { right: 8%; bottom: 18%; }
}
/* ---------- theme button ---------- */
.theme-btn .ico-moon { display: none; }
.theme-btn.is-dark .ico-sun { display: none; } .theme-btn.is-dark .ico-moon { display: block; }
.theme-btn.is-auto::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.popover.theme { width: 260px; }

/* ---------- pricing update (18.9.): billing period line, quiet yearly saving, included-with-every-plan, cancel flow ---------- */
.plan-bill { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: -2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.plan-price small { white-space: nowrap; }
.plan.popular .plan-bill { color: var(--on-ink); }
.plan .plan-min { font-size: 15px; color: var(--muted); }
.plan.popular .plan-min { color: color-mix(in srgb, var(--on-ink) 78%, transparent); }
.plan-price b, .plan-bill { animation: fade .35s var(--ease); }
.plan .plan-bill .plan-save { font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 999px; white-space: nowrap; background: var(--baby-2); color: var(--accent-ink); }
article.plan.popular .plan-bill .plan-save { background: color-mix(in srgb, var(--on-ink) 14%, transparent); color: var(--on-ink); }
.seg.bill .bill-save { font-size: 12px; font-weight: 500; color: var(--accent); margin-left: 4px; }
#compare td small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
#compare td b { color: var(--ink); font-weight: 600; }
.incl { margin-top: clamp(28px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.incl h3 { font-size: 15px; font-weight: 600; }
.incl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.incl li::before { content: "✓"; margin-right: 8px; color: var(--accent); font-weight: 700; }
.co-ea { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-xs); background: var(--baby-3); font-size: 14px; }
.cx { display: grid; gap: 16px; max-width: 520px; }
.cx h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; }
.cx .lead { font-size: 17px; max-width: none; }
.cx-reasons { display: grid; gap: 6px; }
.cx-reasons label { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r-s); cursor: pointer; font-size: 15px; transition: border-color .2s, background .2s; }
.cx-reasons label:hover { border-color: var(--baby-deep); }
.cx-reasons label:has(input:checked) { border-color: var(--accent); background: var(--baby-3); }
.cx-reasons input { accent-color: var(--accent); }
.cx-note { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.cx-note textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r-s); background: var(--card); color: var(--ink); font: inherit; font-size: 15px; resize: vertical; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cx-actions .btn { padding: 13px 22px; font-size: 15px; }
.cx-actions .btn[disabled] { opacity: .4; pointer-events: none; }
@media (max-width: 760px) { .incl { display: grid; } .cx-actions .btn { width: 100%; } }

/* ---------- coming soon: AI-directed editing (optional layer of control) ---------- */
.agent { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: clamp(40px, 6vw, 90px); align-items: center; padding: var(--sec) 0 0; }
.ag-copy { display: grid; gap: 18px; justify-items: start; }
.ag-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--baby-2); color: var(--accent-ink); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ag-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ag-copy .display { margin-top: 4px; }
.ag-line { font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 40ch; }
.ag-support { letter-spacing: .01em; }
.ag-form { display: grid; gap: 10px; margin-top: 10px; width: 100%; max-width: 440px; }
.ag-notify { font-size: 14px; color: var(--muted); }
.ag-row { display: flex; gap: 8px; }
.ag-row input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 15px; }
.ag-row input::placeholder { color: var(--faint); }
.ag-row input:focus { outline: none; border-color: var(--baby-deep); box-shadow: 0 0 0 4px var(--baby-2); }
.ag-row .btn { padding: 0 20px; height: 48px; font-size: 15px; white-space: nowrap; }

/* editor preview — light UI / dark UI via the site tokens (no time-of-day here: this is product UI) */
.ed { margin: 0; min-width: 0; --ed-bg: var(--card); --ed-panel: var(--paper); --ed-line: var(--hair); --ed-ink: var(--ink); --ed-mute: var(--muted); --ed-faint: var(--faint);
  border-radius: var(--r); background: var(--ed-bg); border: 1px solid var(--ed-line); box-shadow: var(--shadow-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; font-size: 12px; color: var(--ed-ink); }
.ed-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--ed-line); }
.ed-logo { height: 14px; width: auto; }
:root[data-theme="dark"] .ed-logo { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ed-logo { filter: invert(1); } }
.ed-title { flex: 1; min-width: 0; font-weight: 600; color: var(--ed-ink); padding-left: 14px; border-left: 1px solid var(--ed-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-actions { display: flex; gap: 6px; }
.ed-btn { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ed-line); font-weight: 500; color: var(--ed-ink); }
.ed-btn-dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ed-main { display: grid; grid-template-columns: 1fr 200px; min-height: 0; }
.ed-stage { position: relative; background: #0b1218; aspect-ratio: 16 / 9; overflow: hidden; }
.ed-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-sub { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); padding: 5px 10px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; white-space: nowrap; }
.ed-tc { position: absolute; right: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.ed-agent { border-left: 1px solid var(--ed-line); background: var(--ed-panel); padding: 12px; display: grid; gap: 10px; align-content: start; }
.ed-agent-head { display: flex; align-items: center; gap: 8px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--ed-line); }
.ed-agent-head img { width: 18px; height: 18px; border-radius: 5px; }
.ed-msg { padding: 9px 11px; border-radius: 12px; line-height: 1.45; }
.ed-user { background: var(--ed-bg); border: 1px solid var(--ed-line); color: var(--ed-ink); border-bottom-right-radius: 4px; margin-left: 10px; }
.ed-reply { background: var(--baby-2); color: var(--ed-ink); border-bottom-left-radius: 4px; margin-right: 10px; }
.ed-reply b { display: block; margin-bottom: 2px; }
.ed-pills { display: flex; gap: 6px; margin-top: 9px; }
.ed-pill { padding: 5px 9px; border-radius: 999px; background: var(--ed-bg); border: 1px solid var(--ed-line); font-size: 11px; font-weight: 500; color: var(--ed-ink); }
.ed-ask { margin-top: auto; padding: 8px 11px; border-radius: 999px; border: 1px solid var(--ed-line); background: var(--ed-bg); color: var(--ed-faint); font-size: 11px; }
.ed-tl { position: relative; border-top: 1px solid var(--ed-line); background: var(--ed-panel); padding: 10px 14px 12px 14px; display: grid; gap: 7px; }
.ed-track { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; }
.ed-lab { font-size: 11px; color: var(--ed-mute); }
.ed-clips { position: relative; height: 18px; display: flex; gap: 3px; }
.ed-clips i { display: block; height: 100%; flex: 0 0 var(--w); margin-left: var(--x, 0); border-radius: 5px; transform-origin: left center; }
.ed-v { background: linear-gradient(180deg, #bfd9f3, #9ec4ea); border: 1px solid rgba(31,122,224,.25); }
.ed-v.is-new { background: linear-gradient(180deg, var(--baby-deep), #7ab4ec); box-shadow: 0 0 0 1.5px var(--accent); }
.ed-t { background: var(--ed-bg); border: 1px solid var(--ed-line); }
.ed-a { background: repeating-linear-gradient(90deg, var(--ed-mute) 0 1.5px, transparent 1.5px 4px); opacity: .55; height: 60%; align-self: center; border-radius: 3px; }
.ed-m { background: linear-gradient(180deg, #e7e7ec, #d9d9df); opacity: .9; }
.ed-head { position: absolute; left: calc(76px + 22%); top: 6px; bottom: 6px; width: 1.5px; background: var(--accent); }
.ed-head::before { content: ""; position: absolute; left: -4px; top: -3px; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
/* dark UI: deep neutral greys, restrained contrast, same blue */
:root[data-theme="dark"] .ed { --ed-bg: #1a1a1f; --ed-panel: #141418; --ed-line: #2a2a31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ed { --ed-bg: #1a1a1f; --ed-panel: #141418; --ed-line: #2a2a31; } }
:root[data-theme="dark"] .ed-v { background: linear-gradient(180deg, #2f4f74, #26415f); border-color: rgba(116,179,255,.3); }
:root[data-theme="dark"] .ed-m { background: linear-gradient(180deg, #2a2a31, #232329); }
:root[data-theme="dark"] .ed-reply { background: #16273c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ed-v { background: linear-gradient(180deg, #2f4f74, #26415f); border-color: rgba(116,179,255,.3); } :root:not([data-theme="light"]) .ed-m { background: linear-gradient(180deg, #2a2a31, #232329); } :root:not([data-theme="light"]) .ed-reply { background: #16273c; } }
/* restrained entrance (the reveal observer adds .in; reduced motion gets the final state via .in immediately) */
.motion .ed .ed-clips i { transform: scaleX(0); transition: transform .7s var(--ease); }
.motion .ed .ed-user, .motion .ed .ed-reply { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.motion .ed .ed-v.is-new { box-shadow: none; transition: transform .7s var(--ease), box-shadow .4s var(--ease); }
.motion .ed.in .ed-clips i { transform: none; }
.motion .ed.in .ed-track:nth-child(1) i { transition-delay: .25s; } .motion .ed.in .ed-track:nth-child(2) i { transition-delay: .4s; } .motion .ed.in .ed-track:nth-child(3) i { transition-delay: .5s; } .motion .ed.in .ed-track:nth-child(4) i { transition-delay: .6s; }
.motion .ed.in .ed-user { opacity: 1; transform: none; transition-delay: .7s; }
.motion .ed.in .ed-reply { opacity: 1; transform: none; transition-delay: 1.5s; }
.motion .ed.in .ed-v.is-new { box-shadow: 0 0 0 1.5px var(--accent); transition-delay: .25s, 1.7s; }
@media (max-width: 1024px) {
  .agent { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ed-main { grid-template-columns: 1fr 180px; }
}
@media (max-width: 760px) {
  .ed { font-size: 11px; }
  .ed-main { grid-template-columns: 1fr; }
  .ed-agent { border-left: 0; border-top: 1px solid var(--ed-line); }
  .ed-ask { display: none; }
  .ed-track:nth-child(2), .ed-track:nth-child(4) { display: none; }   /* small representative timeline: video + voiceover */
  .ed-track { grid-template-columns: 54px 1fr; }
  .ed-head { left: calc(68px + 22%); }
  .ed-actions .ed-btn:not(.ed-btn-dark) { display: none; }
  .ag-row { flex-direction: column; } .ag-row .btn { width: 100%; }
}

/* ---------- plan price placeholder ---------- */
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.plan-price b { font-family: var(--display); font-weight: 600; font-size: 52px; letter-spacing: -.045em; line-height: 1; }
.plan-price small { color: var(--muted); font-size: 14px; }
.plan.popular .plan-price small { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.plan-min { font-size: 14px; color: var(--muted); }

/* ---------- MacBook + Safari mockups ---------- */
.mac { position: relative; transform: translateY(var(--py, 0)); transition: transform .2s linear; }
.mac-screen { position: relative; background: var(--card); border: 10px solid #101012; border-bottom-width: 14px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.06); }
.mac-screen::before { content: ""; position: absolute; left: 50%; top: 0; width: 84px; height: 9px; transform: translateX(-50%); background: #101012; border-radius: 0 0 8px 8px; z-index: 3; }
.mac-base { height: 16px; margin: 0 -3.5%; background: linear-gradient(180deg, #e6e6ea, #c9c9cf 60%, #a9a9b0); border-radius: 0 0 16px 16px; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 120px; height: 5px; transform: translateX(-50%); background: #b3b3ba; border-radius: 0 0 6px 6px; }
:root[data-theme="dark"] .mac-base, .dark-base { background: linear-gradient(180deg, #3a3a40, #26262b 60%, #18181b); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mac-base { background: linear-gradient(180deg, #3a3a40, #26262b 60%, #18181b); } }
.saf { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; padding: 9px 12px; background: var(--paper); border-bottom: 1px solid var(--hair); }
.saf .tl { display: flex; gap: 6px; } .saf .tl i { width: 11px; height: 11px; border-radius: 50%; } .saf .tl i:nth-child(1) { background: #ff5f57; } .saf .tl i:nth-child(2) { background: #febc2e; } .saf .tl i:nth-child(3) { background: #28c840; }
.saf-nav { display: flex; gap: 10px; color: var(--faint); font-size: 16px; line-height: 1; } .saf-nav b { font-weight: 400; }
.saf-url { justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); background: var(--card); border-radius: 8px; padding: 5px 12px; min-width: 46%; justify-content: center; box-shadow: inset 0 0 0 1px var(--hair); }
.saf-url .lock { width: 7px; height: 6px; border: 1.2px solid var(--faint); border-radius: 1.5px; position: relative; margin-top: 2px; } .saf-url .lock::before { content: ""; position: absolute; left: .5px; top: -4.5px; width: 4px; height: 4px; border: 1.2px solid var(--faint); border-bottom: 0; border-radius: 3px 3px 0 0; }
.saf-right { display: flex; gap: 10px; } .saf-right b { width: 12px; height: 12px; border: 1.3px solid var(--faint); border-radius: 3px; } .saf-right b:last-child { border-radius: 50%; }
.mac .win-body { padding: 22px 26px 26px; }
.mac .m-look { gap: 12px; }
.mac .m-look .m-stepper { margin-bottom: 6px; }
/* mockup reveal animations */
.step-row.in .m-file { animation: fileDrop 1.1s var(--ease) both, floatFile 5s ease-in-out 1.1s infinite; }
.step-row.in .m-cursor { animation: cursorIn 1.1s var(--ease) both, floatFile 5s ease-in-out 1.1s infinite; }
@keyframes fileDrop { from { opacity: 0; transform: translate(40px, -90px) rotate(6deg); } to { opacity: 1; transform: translate(0, 0) rotate(-3deg); } }
@keyframes cursorIn { from { opacity: 0; transform: translate(60px, -80px); } to { opacity: 1; transform: none; } }

/* macOS desktop with notification (step 3) */
.desk { aspect-ratio: 16 / 10; background: #0d1b2e; }
.wall { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(160deg, #0b1f3a, #1b3b6f 40%, #5b8fd6 70%, #c9dcff); }
.wall i { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .9; }
.wall .w1 { width: 60%; aspect-ratio: 1; left: -15%; top: 20%; background: radial-gradient(circle, #ff9a5c, transparent 65%); animation: wallDrift 18s ease-in-out infinite alternate; }
.wall .w2 { width: 55%; aspect-ratio: 1; right: -10%; top: -20%; background: radial-gradient(circle, #7fd1ff, transparent 65%); animation: wallDrift 22s ease-in-out infinite alternate-reverse; }
.wall .w3 { width: 50%; aspect-ratio: 1; left: 30%; bottom: -30%; background: radial-gradient(circle, #ff5f9e, transparent 65%); animation: wallDrift 26s ease-in-out infinite alternate; }
@keyframes wallDrift { to { transform: translate(6%, 4%) scale(1.08); } }
.menubar { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 6px 14px; font-size: 11px; color: #fff; background: rgba(255,255,255,.14); backdrop-filter: blur(20px); }
.menubar b { font-weight: 700; } .menubar span { opacity: .9; }
.mb-apple { width: 12px; height: 12px; border-radius: 4px 4px 5px 5px / 3px 3px 6px 6px; background: #fff; opacity: .95; }
.mb-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.mb-wifi { width: 12px; height: 8px; border: 1.5px solid #fff; border-bottom: 0; border-radius: 12px 12px 0 0; opacity: .9; }
.mb-batt { width: 18px; height: 9px; border: 1.3px solid #fff; border-radius: 3px; position: relative; opacity: .9; } .mb-batt::after { content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; width: 70%; background: #fff; border-radius: 1px; }
.mac-notif { position: absolute; z-index: 3; right: 14px; top: 38px; width: min(300px, 62%); display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,.78); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 12px 40px rgba(0,0,0,.25), inset 0 0 0 .5px rgba(255,255,255,.6); color: #1d1d1f; }
.step-row.in .mac-notif { animation: notifIn 1s var(--ease) .4s both; }
@keyframes notifIn { from { opacity: 0; transform: translateX(30px) scale(.96); } to { opacity: 1; transform: none; } }
.mn-ico { width: 34px; height: 34px; border-radius: 9px; background: #1d1d1f; position: relative; } .mn-ico::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #cfe6ff; }
.mac-notif b { display: block; font-size: 10px; font-weight: 600; color: #6e6e73; letter-spacing: .02em; } .mac-notif strong { display: block; font-size: 12px; font-weight: 600; } .mac-notif span { font-size: 11px; color: #4a4a4f; line-height: 1.35; } .mac-notif time { font-size: 10px; color: #8e8e93; }
.dock { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 8px; padding: 7px 9px; border-radius: 16px; background: rgba(255,255,255,.22); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); }
.dock i { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(145deg, #fff, #cfd6e0); transition: transform .25s var(--ease); }
.dock i:hover { transform: translateY(-6px) scale(1.15); }
.dock .d1 { background: linear-gradient(145deg, #5ac8fa, #007aff); } .dock .d2 { background: linear-gradient(145deg, #ffd60a, #ff9f0a); } .dock .d3 { background: linear-gradient(145deg, #34c759, #248a3d); } .dock .d5 { background: linear-gradient(145deg, #ff6482, #ff2d55); } .dock .d6 { background: linear-gradient(145deg, #bf5af2, #5e5ce6); }
.dock .bv { background: #1d1d1f; position: relative; } .dock .bv::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #cfe6ff; }

/* ---------- options link highlight ---------- */
.win-look .m-row { border-radius: 12px; padding: 6px 8px; margin: -6px -8px; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.win-look .m-row.lit { background: var(--baby-2); box-shadow: 0 0 0 1px var(--baby-deep); }
.opt-list li { transition: padding-left .35s var(--ease); cursor: default; }
.opt-list li.lit { padding-left: 34px; } .opt-list li.lit::before { box-shadow: 0 0 0 6px var(--baby-2); }

/* ---------- studio extras ---------- */
.script-tools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-back::after { content: none; } .btn-back::before { content: "←"; font-weight: 500; transition: transform .3s var(--ease); } .btn-back:hover::before { transform: translateX(-3px); }

/* ---------- Whop-style guest checkout ---------- */
dialog#modal.co-modal { width: min(880px, calc(100% - 32px)); padding: 0; overflow: hidden; }
dialog#modal.co-modal .modal-close { z-index: 2; }
.co-grid { display: grid; grid-template-columns: 1fr 1.25fr; min-height: 520px; }
.co-side { background: var(--paper); padding: 36px 32px; display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--hair); }
.co-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: 18px; margin-bottom: 14px; }
.co-side h2 { font-size: 30px; }
.co-desc { color: var(--muted); font-size: 15px; }
.co-list { list-style: none; margin: 10px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.co-list li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: 8px; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--muted); }
.co-total b { font-family: var(--display); font-size: 30px; letter-spacing: -.04em; color: var(--ink); }
.co-guest { font-size: 12px; color: var(--faint); line-height: 1.45; margin-top: 8px; }
.co-main { padding: 36px 32px; display: grid; gap: 14px; align-content: start; }
.co-main label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.co-main input { padding: 13px 14px; border: 1px solid var(--hair); border-radius: 11px; background: var(--card); color: var(--ink); font-size: 15px; }
.co-main input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--baby-2); }
.co-main input[readonly] { color: var(--muted); background: var(--paper); }
.co-main .pop-label { margin: 6px 0 0; }
.co-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co-m { display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border: 1px solid var(--hair); border-radius: 12px; font-size: 12px; font-weight: 500; color: var(--muted); transition: all .2s var(--ease); }
.co-m:hover { border-color: var(--baby-deep); }
.co-m.on { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.co-m i { width: 26px; height: 18px; border-radius: 4px; display: block; }
.ico-card { background: linear-gradient(135deg, var(--ink), #5a5a60); position: relative; } .ico-card::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px; background: var(--on-ink); opacity: .8; }
.ico-apple { background: var(--ink); border-radius: 9px !important; }
.ico-pp { background: linear-gradient(135deg, #003087, #009cde); }
.co-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-field { display: grid; gap: 4px; padding: 10px 14px; border: 1px dashed var(--hair); border-radius: 11px; background: var(--paper); font-size: 11px; color: var(--faint); }
.co-field.wide { grid-column: 1 / -1; }
.co-field em { font-style: normal; font-size: 15px; letter-spacing: .12em; color: var(--muted); }
.co-secure-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.co-pay { margin-top: 8px; width: 100%; }
.co-terms { font-size: 11px; color: var(--faint); line-height: 1.45; text-align: center; }
@media (max-width: 760px) { .co-grid { grid-template-columns: 1fr; } .co-side { border-right: 0; border-bottom: 1px solid var(--hair); padding: 26px 22px; } .co-main { padding: 26px 22px; } }

/* ---------- realistic MacBook (v2) ---------- */
.mac { position: relative; transform: translateY(var(--py, 0)); transition: transform .2s linear; filter: drop-shadow(0 40px 60px rgba(0,0,0,.18)); }
.mac-lid { position: relative; padding: 2.4% 2.4% 2.9%; background: linear-gradient(180deg, #2a2a2e, #141416 12%, #0d0d0f); border-radius: 22px 22px 6px 6px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.08), inset 0 -2px 0 rgba(255,255,255,.04); }
.mac-lid::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 3.4%; transform: translateX(-50%); background: #0d0d0f; border-radius: 0 0 10px 10px; z-index: 5; }
.mac-lid::after { content: ""; position: absolute; left: 50%; top: 1%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1e2a3a; box-shadow: 0 0 0 1px #2c3e55; z-index: 6; }
.mac-screen { position: relative; aspect-ratio: 16 / 10; border: 0; border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,.6); display: grid; grid-template-rows: auto 1fr; }
.mac-screen::before { content: none; }
.mac-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 18%, transparent 40%); z-index: 4; mix-blend-mode: screen; }
.mac-base { position: relative; margin: 0 -6%; height: clamp(12px, 1.7vw, 20px); background: linear-gradient(180deg, #e9e9ee 0%, #cfcfd6 40%, #a7a7b0 80%, #6f6f78 100%); border-radius: 0 0 clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.22); }
.mac-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); background: linear-gradient(180deg, #8f8f98, #c6c6cd); border-radius: 0 0 9px 9px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.5); }
.mac-base::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -10px; height: 10px; background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,.28), transparent 70%); filter: blur(2px); }
:root[data-theme="dark"] .mac-base { background: linear-gradient(180deg, #5a5a63, #3a3a41 40%, #232328 80%, #121215); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mac-base { background: linear-gradient(180deg, #5a5a63, #3a3a41 40%, #232328 80%, #121215); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.5); } }
.mac .saf { z-index: 3; }
/* the real site, scaled down inside the screen */
.mini { zoom: .54; -moz-transform: scale(.54); -moz-transform-origin: 0 0; position: relative; overflow: hidden; background: var(--white); }
.mini-nav { height: 72px; display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter); border-bottom: 1px solid var(--hair); background: var(--glass); }
.mini-links { display: flex; gap: 30px; font-size: 14px; font-weight: 500; color: var(--muted); flex: 1; } .mini-links i { font-style: normal; }
.mini-cta { pointer-events: none; }
.mini-studio { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; padding: 28px 0 40px; display: grid; gap: 18px; }
.mini-studio .studio-head h1 { font-size: 34px; }
.mini-studio .panel { animation: none; }
.mini-studio .panel-nav .btn { pointer-events: none; }
.mini-studio .drop { pointer-events: none; }
.mini-studio .look fieldset { pointer-events: none; }
.mini-studio input { pointer-events: none; }
.mac .m-file { right: 8%; bottom: 20%; z-index: 5; }
.mac .m-cursor { right: 5%; bottom: 13%; z-index: 6; }
.share { display: grid; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--hair); }

/* macOS desktop v2 */
.desk { grid-template-rows: auto 1fr; }
.wall { background: linear-gradient(165deg, #06122a 0%, #0f2c5c 30%, #3f7cc4 58%, #a9cdf2 85%, #f2e6d8 100%); }
.wall i { filter: blur(34px); opacity: .95; }
.wall .w1 { width: 70%; left: -25%; top: 25%; background: radial-gradient(circle, #ff8f4d 0%, rgba(255,143,77,.35) 40%, transparent 68%); }
.wall .w2 { width: 60%; right: -14%; top: -28%; background: radial-gradient(circle, #86d3ff 0%, rgba(134,211,255,.35) 40%, transparent 68%); }
.wall .w3 { width: 55%; left: 28%; bottom: -30%; background: radial-gradient(circle, #ff4f8b 0%, rgba(255,79,139,.3) 40%, transparent 68%); }
.wall .w4 { width: 40%; left: 48%; top: 10%; background: radial-gradient(circle, #ffe08a 0%, rgba(255,224,138,.3) 40%, transparent 68%); animation: wallDrift 30s ease-in-out infinite alternate-reverse; }
.menubar { font-size: 11.5px; padding: 5px 14px; background: rgba(255,255,255,.18); backdrop-filter: blur(30px) saturate(160%); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mb-apple { width: 11px; height: 13px; background: #fff; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; position: relative; }
.mb-apple::after { content: ""; position: absolute; right: -1px; top: -3px; width: 4px; height: 5px; background: #fff; border-radius: 60% 40% 60% 40%; transform: rotate(35deg); }
.mb-time { font-variant-numeric: tabular-nums; }
.mac-notif { top: 34px; right: 12px; width: min(330px, 56%); grid-template-columns: 38px 1fr auto; gap: 11px; padding: 12px 13px; border-radius: 16px; background: rgba(245,245,247,.72); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 14px 40px rgba(0,0,0,.28), inset 0 0 0 .5px rgba(255,255,255,.7); }
.mn-ico { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(160deg, #2a2a2e, #0d0d0f); box-shadow: 0 2px 6px rgba(0,0,0,.25); } .mn-ico::after { inset: 11px; }
.mac-notif b { font-size: 10.5px; } .mac-notif strong { font-size: 12.5px; margin-top: 1px; } .mac-notif span { font-size: 11.5px; }
.dock { bottom: 9px; gap: 7px; padding: 6px 8px; border-radius: 18px; background: rgba(255,255,255,.28); backdrop-filter: blur(30px) saturate(170%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.5), 0 6px 20px rgba(0,0,0,.25); }
.dock i { width: 30px; height: 30px; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.2); }
.dock .d1 { background: linear-gradient(160deg, #6fc6ff, #0a6cff); } .dock .d2 { background: linear-gradient(160deg, #ffe066, #ff9500); } .dock .d3 { background: linear-gradient(160deg, #6ee08a, #1f9a45); } .dock .d5 { background: linear-gradient(160deg, #ff8fa8, #ff2d55); } .dock .d6 { background: linear-gradient(160deg, #c99bff, #5e5ce6); } .dock .d7 { background: linear-gradient(160deg, #e9e9ee, #b8b8c2); }
.dock .bv::after { inset: 9px; }

/* ---------- billing toggle ---------- */
.bill-toggle { margin: clamp(28px, 4vw, 44px) 0 0; display: flex; justify-content: center; }
.seg.bill { padding: 5px; } .seg.bill input + span { padding: 10px 22px; }
.plan-min .fine { font-size: 12px; }

/* ---------- OAuth buttons ---------- */
.oauth { display: grid; gap: 10px; margin-top: 6px; }
.oauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--hair); background: var(--card); font-size: 15px; font-weight: 500; transition: all .25s var(--ease); }
.oauth-btn:hover { border-color: var(--baby-deep); background: var(--baby-3); }
.oauth-btn svg { width: 18px; height: 18px; }
.oauth .or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--faint); margin: 6px 0 2px; }
.oauth .or::before, .oauth .or::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

/* ---------- smoother option ↔ panel highlight ---------- */
.win-look .m-row { transition: background .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); }
.win-look .m-row.lit { transform: translateX(4px); }
.opt-list li { transition: padding-left .6s var(--ease), color .6s var(--ease); }
.opt-list li::before { transition: box-shadow .6s var(--ease), transform .6s var(--ease); }
.opt-list li.lit { padding-left: 30px; } .opt-list li.lit::before { transform: scale(1.25); }

@media (max-width: 1024px) { .mac-base { margin: 0 -4%; } .mac .m-file { bottom: 16%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .track { animation: none; }
  .hero-orb { animation: none; }
}

/* ---------- final brand assets ---------- */
.logo img { height: 22px; width: auto; display: block; }
:root[data-theme="dark"] .logo img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo img { filter: invert(1); } }
.co-brand img { height: 20px; width: auto; }
.logo-mark, .mn-ico, .dock .bv, .m-notif-ico { background: url(../assets/hero/b-256.png) center / 62% no-repeat; }
.logo-mark::after, .mn-ico::after, .dock .bv::after, .m-notif-ico::after { content: none; }
.mn-ico, .m-notif-ico { background-color: #fff; border: 1px solid var(--hair); }
.trial-art .wm img, .player .wm img { width: 34%; height: auto; opacity: .75; }
.trial-art .wm, .player .wm { font-size: 0; }

/* ---------- feature visuals: one canonical MacBook render, four screen states ---------- */
.feat { margin: 0; position: relative; transform: translateY(var(--py, 0)); transition: transform .2s linear; }
/* transparent MacBook renders: no filter/border/background on the image (a CSS filter gives the image a rectangular
   filter region that Safari can paint as a faint box); depth comes from a soft ground shadow under the base */
.feat img { width: 100%; height: auto; display: block; position: relative; z-index: 1; filter: none; border: 0; outline: 0; background: transparent; box-shadow: none; }
.feat::before { content: ""; position: absolute; left: 7%; right: 7%; bottom: -2%; height: 10%; border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(29,29,31,.28) 0%, rgba(29,29,31,.12) 42%, rgba(29,29,31,0) 70%); }
.feat-configure::before { content: none; }
:root[data-theme="dark"] .feat::before { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.7) 0%, rgba(0,0,0,.32) 42%, rgba(0,0,0,0) 70%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feat::before { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.7) 0%, rgba(0,0,0,.32) 42%, rgba(0,0,0,0) 70%); } }
.feat-configure img { border-radius: 14px; box-shadow: 0 24px 60px rgba(29,29,31,.14), 0 2px 6px rgba(29,29,31,.06); filter: none; border: 0; }
.cfg-hl { position: absolute; border-radius: 12px; background: rgba(31,122,224,.10); box-shadow: 0 0 0 1.5px rgba(31,122,224,.45); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.cfg-hl.lit { opacity: 1; }
.feat-configure { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }

/* ---------- account: settings-style menu (Julius 15.9.: "ein Menü, wo man einen Überblick hat") ---------- */
.acct { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); padding: clamp(48px, 7vw, 90px) 0 var(--sec); }
.acct-nav { display: grid; gap: 4px; align-content: start; position: sticky; top: 92px; }
.acct-nav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--muted); text-align: left; transition: background .2s, color .2s; }
.acct-nav button:hover { color: var(--ink); }
.acct-nav button[aria-current="page"] { background: var(--paper); color: var(--ink); font-weight: 600; }
.acct-nav svg { width: 18px; height: 18px; flex: none; }
.acct-main { display: grid; gap: 22px; align-content: start; min-width: 0; animation: fade .35s var(--ease); }
.acct-main h1 { font-size: clamp(32px, 4vw, 46px); }
.acct-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kv { display: grid; }
.kv > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.kv .k { font-size: 14px; }
.acct-toggle { grid-template-columns: minmax(0, 1fr) auto !important; }
.acct-toggle strong { display: block; font-size: 15px; font-weight: 600; }
.acct-toggle small { display: block; margin-top: 2px; }
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stats .card { padding: 20px 22px; }
.stats .card b { font-size: 34px; }
.acct .dash { margin-top: 0; }
@media (max-width: 760px) {
  .acct { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .acct-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .acct-nav button { width: auto; white-space: nowrap; padding: 9px 14px; }
  .acct-nav button span { font-size: 14px; }
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .acct-toggle { grid-template-columns: minmax(0, 1fr) auto !important; }
  .stats { grid-template-columns: 1fr 1fr; }
}
.acct-plan-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card b.inline { font-family: inherit; font-size: 15px; letter-spacing: 0; }
.card .expire { font-size: 13px; color: var(--accent); }
.card .expire b { color: inherit; }

/* ---------- pricing 15.9.: Custom minute packs, yearly “save” chip, “not enough minutes” window ---------- */
.packs { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper); border-radius: 999px; flex-wrap: wrap; margin-top: 6px; }
.packs button { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--muted); transition: all .2s var(--ease); }
.packs button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.plan.popular .packs { background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
.plan-price .plan-save { margin-left: auto; align-self: center; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: var(--baby); color: #0f4f9a; }
.review .ok { color: var(--accent-ink); font-weight: 600; }
.review .warn { color: #b3261e; font-weight: 600; }
.review #get-min { margin-left: 8px; vertical-align: middle; }
.ne { display: grid; gap: 14px; }
.ne .k { font-size: 13px; font-weight: 600; color: var(--muted); margin: 6px 0 0; }
.ne-packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ne-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ne-pack, .ne-plan { display: grid; gap: 3px; padding: 14px 12px; border: 1px solid var(--hair); border-radius: 14px; background: var(--card); color: var(--ink); text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ne-pack:hover, .ne-plan:hover { border-color: var(--baby-deep); box-shadow: var(--shadow); transform: translateY(-1px); }
.ne-pack.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--baby-2); }
.ne-pack b, .ne-plan b { font-size: 17px; }
.ne-pack span, .ne-plan em { font-style: normal; font-weight: 600; }
.ne-pack small, .ne-plan span { color: var(--muted); font-size: 13px; }
dialog#modal.ne-modal { width: min(640px, calc(100% - 32px)); }
@media (max-width: 640px) { .ne-packs { grid-template-columns: 1fr 1fr; } .ne-plans { grid-template-columns: 1fr; } }
.plan .plan-min { display: block; line-height: 1.5; }
.plan .plan-min .fine { display: inline; }

/* ---------- pricing brief 15.9.: free-start banner, conditions bar, referral block, invite section, compare accents ---------- */
.free-start { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; margin: 8px auto 28px; padding: 14px 20px; border: 1px solid var(--hair); border-radius: 999px; background: var(--baby-3); width: fit-content; max-width: 100%; }
.free-start p { margin: 0; font-size: 15px; }
.fs-badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--baby); color: #0f4f9a; }
.seg.cur input + span { padding: 9px 16px; }
.plan-price .plan-save { white-space: nowrap; }
.conds { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--muted); }
.conds li::before { content: "✓"; margin-right: 8px; color: var(--accent); font-weight: 700; }
#compare td.pop, #compare th.pop { background: var(--baby-3); }
#compare td .ok { color: var(--accent); font-weight: 700; } #compare td .no { color: var(--faint); }
/* the referral block ends clearly before "Plan questions": a full section gap (≈ 120–190 px) below it */
.referral { padding: var(--sec) 0 var(--sec); }
.ref-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); }
.ref-rules { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.ref-rules li::before { content: "✓"; margin-right: 10px; color: var(--accent); font-weight: 700; }
.ref-figure { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ref-figure span { display: grid; justify-items: center; gap: 4px; }
.ref-figure b { font-family: var(--display); font-size: 48px; letter-spacing: -.04em; line-height: 1; }
.ref-figure small { color: var(--muted); font-size: 13px; }
.ref-plus { font-size: 32px; color: var(--faint); }
.ref-you, .ref-friend { padding: 24px 28px; border-radius: 22px; background: var(--baby-3); }
.inv-list { display: grid; gap: 10px; margin: 8px 0 20px; }
.inv-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--card); }
.inv-row code { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row.used { opacity: .6; }
@media (max-width: 760px) { .ref-card { grid-template-columns: 1fr; } .inv-row { grid-template-columns: 1fr auto; } .inv-row code { grid-column: 1 / -1; } }
/* subscribe-button picker (18.9.; Julius: kleiner, alle gleich gross) */
.cta-chips .chip > span { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 128px; height: 104px; padding: 6px 8px; border-radius: 12px; box-sizing: border-box; text-align: center; }
.cta-chips .cta-chip img { width: 112px; height: 63px; object-fit: cover; border-radius: 7px; display: block; }
.cta-chips .cta-chip b { font-size: 12px; font-weight: 600; line-height: 1.15; }
.cta-chips .cta-chip .reco { top: -8px; right: 6px; }
.cta-chips .chip.off > span { opacity: .45; }