/* 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; flex-wrap: wrap; gap: 12px 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, .foot-bottom a { font-size: 12px; color: var(--faint); text-decoration: none; } .foot-bottom button:hover, .foot-bottom a: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 ---------- */
/* The inline nav (five links + actions) needs 1240 px in German, the longest language (EN 1165, ES 1233 — measured
   26.9.2026 with today's header incl. the theme button; the 24.9. draft said 1230); below that the labels broke onto two
   lines. 1280 leaves room for a signed-in first name longer than "Anmelden" and for classic scrollbars. The nav collapses
   into the existing menu there instead; page layouts still switch at 1024 px. */
/* 27.9.2026, sixth link „YouTube Automation" (.nav-yt) — Julius: „ein anderes Menü genau wie Creator, Plans, How it works":
   it is in the header at EVERY desktop width, right after Creators. Six links need ~1270 px in German with the 30 px
   gaps, so from 1281 px the header row may use the full width up to 1300 px (24 px side margin), and up to 1420 px the
   gaps shrink to 20 px. Below 1281 px everything collapses into the menu exactly as before. */
.nav-links a.nav-yt { white-space: nowrap; }
@media (min-width: 1281px) {
  .nav.wrap { width: min(1300px, calc(100% - 48px)); }
}
@media (min-width: 1281px) and (max-width: 1420px) {
  .nav { gap: 20px; }
  .nav-links { gap: 20px; }
}
@media (max-width: 1280px) {
  .nav-links { display: none; }
  .burger { display: flex; }
  #account-link { display: none; }
}
@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; }
  /* six footer links no longer fit beside logo + tagline on tablets: links take their own row */
  .foot-top { grid-template-columns: auto 1fr; } .foot-nav { grid-column: 1 / -1; }
}
@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; }
.co-main label.co-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; line-height: 1.5; }
.co-main .co-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); }
/* age confirmation (26.9.2026): the checkout's consent checkbox, same look in the sign-up form and the one-time prompt;
   the music rights box in the studio (#panel) uses the same component (selector only, no new look) */
.auth-form label.co-check, #panel label.co-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; line-height: 1.5; }
.auth-form .co-check input, #panel .co-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--accent); }
@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; }