:root {
  --bg: #F3F3F1;
  --bg-2: #E9E9E6;
  --surface: #FFFFFF;
  --ink: #0F0F10;
  --ink-2: #55554F;
  --ink-3: #8A8A85;
  --line: #DADAD5;
  --dark: #0A0A0B;
  --dark-2: #161617;
  --dark-3: #232325;
  --on-dark: #EDEBEB;
  --on-dark-2: #A3A0A0;
  --device: #0B0B0C;
  --device-edge: #2A2A2D;

  --acc: #EC5E9B;
  --acc-ink: #AD2459;
  --acc-strong: #DB1A6D;
  --acc-soft: #F8CFE1;
  --acc-tint: #FCEAF2;
  --d-yellow: #F3C64F;
  --d-ink: #151515;
  --d-muted: #6E6970;
  --d-grey: #F3F1F2;
  --chat-bg: #EDEFF3;
  --ok: #158043;
  --ok-soft: #DDF3E5;
  --err: #FF9A8F;

  --c-beauty: #EC5E9B;
  --c-sezon: #7F9C5E;
  --c-sezon-soft: #DCE4CF;
  --c-karkas: #D7F25C;
  --c-plavno: #F2B8D6;
  --c-plavno-soft: #F6D7E7;
  --c-kapsula: #D92E23;
  --c-blog: #1C2566;
  --c-mint: #C9F0DC;
  --c-photo: #9E2219;
  --c-shpor: #2340E8;
  --on-color: #FFFFFF;
  --on-acc: var(--on-color);
  --acc-fill: var(--acc);
  --on-acc-fill: var(--on-color);
  --on-light: #121314;
  --line-dark: #3A3A3E;

  --p-web: var(--acc-soft);
  --p-bot: var(--acc);
  --p-pay: var(--d-yellow);
  --p-app: var(--c-karkas);
  --p-club: var(--c-plavno);
  --p-crm: var(--c-shpor);
  --p-dash: var(--c-mint);

  --f: "Onest", Arial, sans-serif;
  --f-brand: "Unbounded", "Onest", Arial, sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;

  --shadow: 0 2px 6px rgba(15, 15, 16, 0.06), 0 34px 64px -30px rgba(15, 15, 16, 0.42);
  --shadow-sm: 0 0.1em 0.2em rgba(15, 15, 16, 0.06);
  --scrim-0: rgba(21, 21, 21, 0);
  --scrim: rgba(21, 21, 21, 0.74);
  --veil: rgba(10, 10, 11, 0.42);
  --shadow-dark: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.8);

  --e-move: cubic-bezier(0.45, 0, 0.1, 1);
  --e-in: cubic-bezier(0.25, 0.8, 0.25, 1);
  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --pad: 20px;
  --bar-h: 60px;
  --rail-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

.bar { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--pad); color: var(--ink); transition: background-color 240ms ease, color 240ms ease; }
.bar.on-dark { color: var(--on-dark); }
.bar.on-dark .mark { background: var(--dark); }
.bar.on-dark .pill.solid { box-shadow: var(--shadow); }
.mark { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px 0 14px; margin-left: -14px; border-radius: 999px; background: var(--bg); transition: background-color 240ms ease; gap: 9px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.mark i { width: 17px; height: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.mark i b { background: currentColor; border-radius: 3px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform 160ms var(--e-out), background-color 200ms ease, box-shadow 200ms ease; }
.bar .pill { height: 44px; }
.pill svg { width: 15px; height: 15px; flex: none; }
.pill.solid { background: var(--ink); color: var(--surface); }
.bar.on-dark .pill.solid { background: var(--on-dark); color: var(--dark); }
.pill.line { box-shadow: inset 0 0 0 1px var(--line); }
.pill.big { height: 56px; padding: 0 26px; font-size: 16px; }
.pill:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .pill.solid:hover { background-color: var(--ink-2); }
  .bar.on-dark .pill.solid:hover { background-color: var(--surface); }
  .pill.line:hover { box-shadow: inset 0 0 0 1px currentColor; }
}

.hero { position: relative; min-height: 100svh; padding: calc(var(--bar-h) + 28px) var(--pad) 44px; display: grid; gap: 34px; align-content: center; overflow: hidden; }
.hero h1 { font-weight: 600; font-size: clamp(38px, 10vw, 96px); line-height: 0.98; letter-spacing: -0.04em; max-width: 14ch; text-wrap: balance; }
.hero h1 > span { color: var(--ink-3); }
.hero-sub { font-size: 17px; color: var(--ink-2); margin-top: 20px; max-width: 40ch; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

.collage { position: relative; height: 400px; }
.collage .win { position: absolute; right: -6%; top: 0; width: 96%; transform: rotate(2deg); }
.collage .ph { position: absolute; --pw: 34%; }
.collage .p1 { left: 0; top: 26%; transform: rotate(-6deg); }
.collage .p2 { left: 33%; top: 36%; transform: rotate(4deg); }
.collage .tilt { transition: transform 600ms var(--e-out); }

.note { position: absolute; z-index: 4; left: 4%; top: -4%; width: min(78%, 330px); display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; line-height: 1.3; }
.note img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.note b { display: block; font-weight: 600; font-size: 14px; }
.note span { color: var(--ink-2); }
.note time { align-self: start; font-size: 12px; color: var(--ink-2); }
.note-stack { position: absolute; inset: 0; pointer-events: none; }
.note-stack .note { opacity: 0; transform: translateY(-14px) scale(0.97); transition: opacity 360ms var(--e-out), transform 480ms var(--e-out); }
.note-stack .note.is-on { opacity: 1; transform: none; }
.note-stack .note:first-child { opacity: 1; transform: none; }
.note-stack.is-live .note:first-child:not(.is-on) { opacity: 0; transform: translateY(-14px) scale(0.98); }

.win { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.win-bar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: var(--bg-2); font-size: 11px; color: var(--ink-2); }
.win-bar i { display: flex; gap: 5px; }
.win-bar i b { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.win-bar span { flex: 1; text-align: center; margin-right: 34px; }
.win-bar em { font-style: normal; }
.win > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.ph { position: relative; width: var(--pw, auto); border-radius: 16% / 7.4%; background: var(--device); padding: calc(var(--pw, 100%) * 0.03); box-shadow: var(--shadow), inset 0 0 0 1px var(--device-edge); }
.ph .scr { position: relative; border-radius: 13.6% / 6.3%; overflow: hidden; background: var(--surface); }
.ph .scr > img { display: block; width: 100%; height: auto; }
.ph .isl { position: absolute; z-index: 5; top: 2.4%; left: 50%; width: 30%; height: 3.3%; margin-left: -15%; border-radius: 999px; background: var(--device); }

.m { position: absolute; font-size: 10px; }
.m .ph { width: 30em; padding: 0.9em; border-radius: 4.8em; aspect-ratio: auto; height: 63.5em; }
.m .ph .scr { height: 100%; border-radius: 3.9em; font-size: 1em; display: flex; flex-direction: column; }
.m .ph .isl { top: 1.5em; width: 8.6em; height: 2.5em; margin-left: -4.3em; }
.sb { flex: none; display: flex; justify-content: space-between; align-items: center; height: 4.6em; padding: 0.4em 2.6em 0; font-size: 1em; }
.sb b { font-weight: 600; font-size: 1.35em; letter-spacing: -0.01em; }
.sb i { width: 2.4em; height: 1.15em; border-radius: 0.35em; box-shadow: inset 0 0 0 0.12em currentColor; position: relative; opacity: 0.9; }
.sb i::after { content: ""; position: absolute; inset: 0.22em 0.5em 0.22em 0.22em; border-radius: 0.15em; background: currentColor; }

.m-web { width: 60em; }
.m-web .win { border-radius: 1.6em; }
.m-web .win-bar { height: 3.2em; font-size: 1.1em; padding: 0 1.2em; }
.m-web .win-bar i b { width: 0.8em; height: 0.8em; }

.bot .scr { background: var(--chat-bg); color: var(--d-ink); }
.bot-h { flex: none; display: grid; grid-template-columns: 1.6em 3.8em 1fr; align-items: center; gap: 1em; padding: 0.4em 1.8em 1.2em; background: var(--surface); }
.bot-h svg { width: 1.6em; height: 1.6em; color: var(--acc-ink); }
.bot-h img, .club-h img { width: 3.8em; height: 3.8em; border-radius: 50%; object-fit: cover; }
.bot-h b, .club-h b { display: block; font-size: 1.5em; font-weight: 600; letter-spacing: -0.01em; }
.who { position: relative; display: block; height: 1.6em; font-size: 1.2em; color: var(--d-muted); }
.who em { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; }
.who .typing { color: var(--acc-ink); opacity: 0; }
.msgs { flex: 1; display: flex; flex-direction: column; gap: 0.8em; padding: 1.6em 1.4em; overflow: hidden; }
.msg { max-width: 84%; padding: 0.9em 1.2em 0.95em; border-radius: 1.8em 1.8em 1.8em 0.6em; background: var(--surface); font-size: 1.28em; line-height: 1.34; box-shadow: var(--shadow-sm); }
.msg.me { align-self: flex-end; background: var(--acc-soft); border-radius: 1.8em 1.8em 0.6em 1.8em; }
.kb { display: flex; gap: 0.5em; margin-top: -0.2em; max-width: 92%; }
.kb span { flex: 1; text-align: center; padding: 0.75em 0.4em; border-radius: 1.2em; background: var(--surface); font-size: 1.2em; font-weight: 500; color: var(--acc-ink); box-shadow: var(--shadow-sm); }
.kb span.is-picked { background: var(--acc-strong); color: var(--on-acc); }
.inv { width: 84%; border-radius: 1.8em 1.8em 1.8em 0.6em; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-sm); }
.inv div { padding: 1em 1.25em 1.2em; }
.inv b { display: block; font-size: 1.32em; font-weight: 600; }
.inv span { display: block; font-size: 1.15em; color: var(--d-muted); margin-top: 0.2em; }
.inv .buy { display: block; margin-top: 0.9em; padding: 0.85em; border-radius: 1.2em; background: var(--acc); color: var(--on-color); text-align: center; font-size: 1.25em; font-weight: 600; }
.wid { width: 88%; border-radius: 1.8em 1.8em 1.8em 0.6em; background: var(--surface); padding: 1.1em; box-shadow: var(--shadow-sm); }
.wid-top { display: grid; grid-template-columns: 4.2em 1fr; gap: 0.9em; align-items: center; }
.wid-top img { width: 4.2em; height: 4.2em; border-radius: 1.1em; object-fit: cover; }
.wid-top b { display: block; font-family: var(--f-brand); font-weight: 600; font-size: 1.2em; letter-spacing: -0.02em; line-height: 1.15; }
.wid-top span { font-size: 1.1em; color: var(--d-muted); }
.wid-seat { margin-top: 1em; }
.wid-seat p { display: flex; justify-content: space-between; font-size: 1.1em; color: var(--d-muted); margin-bottom: 0.45em; }
.wid-seat p b { color: var(--d-ink); font-weight: 600; }
.wid-seat .bar-t i { width: 100%; transform: scaleX(0.55); }
.wid-tar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; margin-top: 0.9em; }
.wid-tar span { padding: 0.55em 0.5em 0.6em; border-radius: 0.9em; background: var(--d-grey); font-size: 0.98em; line-height: 1.2; color: var(--d-muted); }
.wid-tar b { display: block; color: var(--d-ink); font-weight: 600; font-size: 1.12em; }
.wid-tar .is-sel { background: var(--acc-tint); box-shadow: inset 0 0 0 0.12em var(--acc); }
.wid-btn { position: relative; height: 3.8em; margin-top: 0.9em; border-radius: 1.2em; overflow: hidden; }
.wid-btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5em; font-size: 1.2em; font-weight: 600; color: var(--on-color); }
.wid-btn .go { background: var(--acc-strong); color: var(--on-acc); }
.wid-btn .done { background: var(--ok); }
.wid-btn svg { width: 1.1em; height: 1.1em; }
.composer { flex: none; display: flex; align-items: center; gap: 1em; margin: 0 1.2em 2.2em; padding: 0 0.6em 0 1.6em; height: 4.2em; border-radius: 2.1em; background: var(--surface); color: var(--d-muted); font-size: 1em; }
.composer span { flex: 1; font-size: 1.3em; }
.composer i { width: 3em; height: 3em; border-radius: 50%; background: var(--acc-fill); display: grid; place-items: center; }
.composer i svg { width: 1.5em; height: 1.5em; color: var(--on-acc-fill); }

.m-pay { width: 32em; }
.pay { border-radius: 2.6em; background: var(--surface); box-shadow: var(--shadow); padding: 2.4em 2.4em 2.2em; color: var(--d-ink); }
.pay-top { display: flex; justify-content: space-between; align-items: center; font-size: 1.25em; color: var(--d-muted); }
.pay-top b { color: var(--d-ink); font-weight: 600; font-size: 1.15em; }
.pay-item { display: grid; grid-template-columns: 5.6em 1fr; gap: 1.2em; align-items: center; margin-top: 1.8em; }
.pay-item img { width: 5.6em; height: 5.6em; border-radius: 1.4em; object-fit: cover; }
.pay-item b { display: block; font-family: var(--f-brand); font-weight: 600; font-size: 1.35em; letter-spacing: -0.02em; line-height: 1.15; }
.pay-item span { font-size: 1.2em; color: var(--d-muted); }
.pay-sum { margin-top: 0.4em; font-size: 4em; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.pay-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin-top: 1.6em; }
.pay-ways span { padding: 0.9em 1em; border-radius: 1.2em; background: var(--d-grey); font-size: 1.2em; font-weight: 500; }
.pay-ways span.is-sel { background: var(--acc-tint); box-shadow: inset 0 0 0 0.12em var(--acc); }
.pay-btn { position: relative; margin-top: 1.4em; height: 4.6em; border-radius: 1.6em; overflow: hidden; font-size: 1em; }
.pay-btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.6em; font-size: 1.4em; font-weight: 600; }
.pay-btn .go { background: var(--acc-strong); color: var(--on-acc); }
.pay-btn .done { background: var(--ok); color: var(--on-color); }
.pay-btn svg { width: 1.2em; height: 1.2em; }
.pay-note { margin-top: 1em; text-align: center; font-size: 1.15em; color: var(--d-muted); }

.app .scr { background: var(--d-grey); color: var(--d-ink); }
.app-h { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0.6em 2em 0; }
.app-h small { display: block; font-size: 1.2em; color: var(--d-muted); }
.app-h b { display: block; font-family: var(--f-brand); font-weight: 600; font-size: 2.1em; letter-spacing: -0.03em; line-height: 1.1; }
.app-h img { width: 4.2em; height: 4.2em; border-radius: 50%; object-fit: cover; }
.prog { display: grid; grid-template-columns: 8.4em 1fr; gap: 1.6em; align-items: center; margin: 1.6em 1.4em 0; padding: 1.4em; border-radius: 2.2em; background: var(--surface); }
.ring { position: relative; width: 8.4em; height: 8.4em; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--acc-soft); }
.ring .val { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 239 239; stroke-dashoffset: var(--r1, 159); }
.ring-n { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring-n b { font-size: 2.2em; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.ring-n small { display: block; font-size: 1em; color: var(--d-muted); margin-top: 0.2em; }
.roll { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; line-height: 1; }
.roll span { display: block; height: 1em; }
.roll .roll-in { display: block; transform: translateY(-1em); }
.prog > p { font-size: 1.3em; line-height: 1.3; }
.prog > p span { display: block; color: var(--d-muted); font-size: 0.9em; margin-top: 0.3em; }
.lesson { position: relative; margin: 1em 1.4em 0; border-radius: 2.2em; overflow: hidden; height: 25em; color: var(--on-color); background: var(--dark-2); }
.lesson img { width: 100%; height: 100%; object-fit: cover; }
.lesson div { position: absolute; inset: auto 0 0; padding: 4em 1.8em 1.8em; background: linear-gradient(180deg, var(--scrim-0), var(--scrim)); }
.lesson small { font-size: 1.15em; opacity: 0.86; }
.lesson b { display: block; font-family: var(--f-brand); font-weight: 600; font-size: 2em; letter-spacing: -0.03em; line-height: 1.1; margin-top: 0.3em; max-width: 10ch; }
.lesson i { position: absolute; right: 1.6em; bottom: 1.8em; width: 4.8em; height: 4.8em; border-radius: 50%; background: var(--acc-fill); color: var(--on-acc-fill); display: grid; place-items: center; }
.lesson i svg { width: 1.8em; height: 1.8em; margin-left: 0.2em; }
.task { display: grid; grid-template-columns: 2.6em 1fr; gap: 1em; align-items: center; margin: 1em 1.4em 0; padding: 1.3em 1.4em; border-radius: 1.8em; background: var(--surface); font-size: 1em; }
.task i { width: 2.6em; height: 2.6em; border-radius: 0.8em; box-shadow: inset 0 0 0 0.15em var(--acc-soft); display: grid; place-items: center; }
.task p { font-size: 1.2em; line-height: 1.3; }
.tabs { flex: none; margin-top: auto; display: flex; justify-content: space-around; align-items: center; height: 6.6em; padding-bottom: 1.4em; background: var(--surface); color: var(--d-muted); }
.tabs svg { width: 2.2em; height: 2.2em; }
.tabs .on { color: var(--acc-ink); }

.club .scr { background: var(--chat-bg); color: var(--d-ink); }
.club-h { flex: none; display: grid; grid-template-columns: 3.8em 1fr; gap: 1em; align-items: center; padding: 0.4em 1.8em 1.2em; background: var(--surface); }
.club-h span { font-size: 1.2em; color: var(--d-muted); }
.pin { flex: none; display: grid; grid-template-columns: 0.3em 1fr; gap: 1em; padding: 0.9em 1.8em; background: var(--surface); border-top: 0.1em solid var(--d-grey); font-size: 1em; }
.pin i { background: var(--acc); border-radius: 0.2em; }
.pin p { font-size: 1.2em; line-height: 1.3; }
.pin p b { display: block; color: var(--acc-ink); font-weight: 600; font-size: 0.92em; }
.post { display: grid; grid-template-columns: 3.4em 1fr; gap: 0.8em; align-items: end; }
.post > img { width: 3.4em; height: 3.4em; border-radius: 50%; object-fit: cover; }
.post .msg { max-width: 100%; }
.post .msg b { display: block; font-size: 0.9em; color: var(--acc-ink); font-weight: 600; margin-bottom: 0.2em; }
.shot { width: 100%; height: 12.5em; border-radius: 1.2em; object-fit: cover; object-position: 50% 30%; margin: 0.3em 0 0.6em; }
.reacts { display: flex; gap: 0.5em; margin-top: 0.5em; }
.reacts > span { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.7em; border-radius: 1em; background: var(--acc-tint); color: var(--acc-ink); font-size: 0.9em; font-weight: 600; }
.reacts svg { width: 1.1em; height: 1.1em; }

.m-crm { width: 68em; }
.crm { border-radius: 1.6em; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); color: var(--d-ink); }
.crm .win-bar, .dash .win-bar { height: 3.2em; font-size: 1.1em; padding: 0 1.2em; }
.crm .win-bar i b, .dash .win-bar i b { width: 0.8em; height: 0.8em; }
.crm-top, .dash-top { display: flex; justify-content: space-between; align-items: baseline; padding: 1.8em 2em 1.2em; }
.crm-top b, .dash-top b { font-size: 2em; font-weight: 600; letter-spacing: -0.03em; }
.crm-top span, .dash-top span { font-size: 1.2em; color: var(--d-muted); }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 1em; row-gap: 0.7em; padding: 0 2em 2em; min-height: 29em; }
.colbg { grid-row: 1 / -1; border-radius: 1.4em; background: var(--d-grey); }
.g1 { grid-column: 1; } .g2 { grid-column: 2; } .g3 { grid-column: 3; } .g4 { grid-column: 4; }
.r1 { grid-row: 1; } .r2 { grid-row: 2; } .r3 { grid-row: 3; } .r4 { grid-row: 4; }
.cols .col-h { display: flex; justify-content: space-between; margin: 0 1em; padding: 1.1em 0.2em 0.2em; font-size: 1.2em; font-weight: 600; }
.cols .col-h span { color: var(--d-muted); font-weight: 500; }
.card { position: relative; display: grid; grid-template-columns: 2.8em 1fr; gap: 0.7em; align-items: center; margin: 0 1em; padding: 0.8em; border-radius: 1.1em; background: var(--surface); box-shadow: var(--shadow-sm); }
.card img { width: 2.8em; height: 2.8em; border-radius: 50%; object-fit: cover; }
.card b { display: block; font-size: 1.2em; font-weight: 600; }
.card span { display: block; font-size: 1.05em; color: var(--d-muted); }
.card.mover { z-index: 3; box-shadow: var(--shadow); transform: translateX(calc(2 * (100% + 3em))); }

.m-dash { width: 54em; }
.dash { border-radius: 1.6em; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); color: var(--d-ink); }
.dash-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6em; padding: 0 2em 2.2em; }
.rev small { font-size: 1.2em; color: var(--d-muted); }
.rev-n { font-size: 4.4em; font-weight: 600; letter-spacing: -0.045em; line-height: 1.05; }
.chart { position: relative; margin-top: 1.2em; height: 13em; overflow: hidden; }
.chart svg { width: 100%; height: 100%; }
.chart .ln { fill: none; stroke: var(--acc); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .ar { fill: var(--acc-tint); }
.chart .cover { position: absolute; inset: 0; background: var(--surface); transform-origin: right; transform: scaleX(0); }
.src .src-h { font-size: 1.2em; font-weight: 600; margin-bottom: 1em; }
.src-row { margin-bottom: 1em; font-size: 1em; }
.src-row p { display: flex; justify-content: space-between; font-size: 1.15em; margin-bottom: 0.4em; }
.src-row p span { color: var(--d-muted); }
.bar-t { height: 0.8em; border-radius: 0.4em; background: var(--d-grey); overflow: hidden; }
.bar-t i { display: block; height: 100%; border-radius: 0.4em; background: var(--acc); transform-origin: left; }
.keep { margin-top: 1.4em; padding: 1.1em 1.2em; border-radius: 1.2em; background: var(--acc-tint); font-size: 1.15em; line-height: 1.3; }
.keep b { display: block; font-size: 1.6em; color: var(--acc-ink); letter-spacing: -0.03em; }

.sheet { position: relative; z-index: 2; background: var(--dark); color: var(--on-dark); border-radius: 28px 28px 0 0; }

@media (min-width: 1100px) {
  :root { --pad: 40px; --bar-h: 72px; }
  .bar .pill { height: 44px; }
  .hero { grid-template-columns: 1.12fr 1fr; gap: 40px; padding-top: calc(var(--bar-h) + 24px); }
  .hero h1 { font-size: clamp(56px, 5.4vw, 88px); max-width: none; }
  .hero-sub { font-size: 19px; }
  .collage { height: min(640px, 70svh); }
  .collage .ph { --pw: 30%; }
  .collage .p1 { top: 24%; left: -2%; }
  .collage .p2 { top: 33%; left: 27%; }
  .collage .win { width: 86%; right: -4%; top: 6%; }
  .note { left: -8%; top: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .pill:active { transform: none; }
  .collage .tilt, .note-stack .note { transition-property: opacity; }
}
.tail { min-height: 60svh; display: grid; place-items: center; background: var(--dark); color: var(--on-dark-2); font-size: 18px; }