/* r8 · 15.10: Grzegorz's notes on round 6/7. Only what he asked for; everything else stays as in r7. */

/* 1 · less lime. Lime stays on the buttons, the hero's last line, the form's last line and the small live marks. */
.stage .s2 h2 .lime, .l2.lime { color: var(--paper); }
#fnH .l2.lime { color: var(--lime); }
.sp-band { background: var(--ink-2); color: var(--paper); border-block: 1px solid rgba(247,246,241,.08); }
.sp-band .cap { color: var(--mute); }
.sp-band .stamp.ink::before { background: var(--lime); }
.sp-band .band-sub { color: var(--mute); }
.vs4-tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.stub4.is-on { background: var(--paper); box-shadow: 0 18px 30px -16px rgba(247,246,241,.35); }
.beats li.on time { background: var(--paper); color: var(--ink); }
.sb-b { background: var(--paper); color: var(--ink); }

/* 2 · calculator: a bigger phone, the chosen place easy to see, nothing jumps */
@media (min-width: 861px) {
  .calc.kcalc { grid-template-columns: minmax(0, 1.12fr) 316px minmax(260px, .78fr); }
  .cprev-ph { --pw: 300px; }
  .cprev-cap { max-width: 300px; min-height: 64px; align-content: start; }
}
.cprev-spot { box-shadow: 0 0 0 3px var(--lime), 0 0 0 9999px rgba(10,10,11,.55); }

/* 3 · case studies: the SBM case, on its own and bigger */
.cases .sec-head { margin-bottom: 32px; }
.case-big { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding: clamp(22px, 3vw, 44px); gap: 24px 56px; }
.case-big .case-h { font-size: clamp(32px, 3.6vw, 56px); }
.case-big .case-body { font-size: 17px; }
.case-big .case-vis { aspect-ratio: 16 / 9; }
.case-big .case-push { left: 16px; right: auto; top: 16px; max-width: 420px; }
.case-big .case-push b { font-size: 14px; }
.case-big .case-count b { font-size: 44px; }
.case-big .case-chart svg { height: 72px; }
@media (max-width: 899px) { .case-big { grid-template-columns: 1fr; } }

/* 4 · hero, beat 4 (21:01): the phone turns round and shows the festival's side of the same minute */
.hero { height: 321vh; }
html.rm .hero { height: auto; }
.phone-h.flip { animation: hp-flip .8s cubic-bezier(.6,0,.3,1) both; }
@keyframes hp-flip {
  0% { transform: scale(var(--ps)) perspective(1400px) rotateY(0); }
  50% { transform: scale(var(--ps)) perspective(1400px) rotateY(90deg); }
  100% { transform: scale(var(--ps)) perspective(1400px) rotateY(0); }
}
.org { position: absolute; inset: 0; z-index: 30; padding: 62px 18px 24px; display: grid; align-content: start; gap: 12px; background: #0D0E10; color: var(--paper); opacity: 0; visibility: hidden; transition: opacity 0s .4s, visibility 0s .4s; font-size: 14px; }
.phone-h.flip .org { opacity: 1; visibility: visible; }
.phone-h:not(.flip) .org { transition: none; }
.org-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(247,246,241,.1); }
.org-t { font-weight: 800; font-size: 17px; }
.org-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--mute); }
.org-k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.org-push { padding: 16px; border-radius: 18px; background: #18191C; display: grid; gap: 8px; }
.org-push > b { font-size: 18px; letter-spacing: -.01em; }
.org-bar { height: 8px; border-radius: 99px; background: rgba(247,246,241,.12); overflow: hidden; }
.org-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lime); transition: width 1.2s .6s cubic-bezier(.2,.8,.2,1); }
.phone-h.flip .org-bar i { width: 92%; }
.org-n { font-size: 13px; color: var(--mute); }
.org-n b { color: var(--paper); font-size: 15px; }
.org-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.org-c { padding: 14px; border-radius: 16px; background: #18191C; display: grid; gap: 2px; }
.org-c b { font-size: 30px; font-weight: 850; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.org-c > span:last-child { font-size: 12.5px; color: var(--mute); }
.org-rep { padding: 14px 16px; border-radius: 16px; border: 1px dashed rgba(247,246,241,.22); display: grid; gap: 2px; font-size: 12.5px; color: var(--mute); }
.org-rep b { color: var(--paper); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .phone-h.flip { animation: none; } }

/* ===== r9 · 16.10 ===== */
/* 5 · accent test: three colours, remembered in this browser */
html[data-accent="green"] { --lime: #9FD356; --lime-rgb: 159,211,86; --lime-ink: #0B140A; }
html[data-accent="orange"] { --lime: #FF6A1F; --lime-rgb: 255,106,31; --lime-ink: #1A0A02; }
.accent-pick { margin-bottom: 28px; }
.accent-pick button[data-v]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; background: var(--sw); }
.accent-pick button[data-v="lime"] { --sw: #C7E635; } .accent-pick button[data-v="green"] { --sw: #9FD356; } .accent-pick button[data-v="orange"] { --sw: #FF6A1F; }

/* 6 · devices */
.dv-stage { position: relative; height: clamp(420px, 44vw, 640px); margin-top: 24px; }
.dv { position: absolute; }
.dv-lap { left: 50%; top: 0; width: min(78%, 980px); transform: translateX(-50%); }
.dv-lap-scr { aspect-ratio: 16 / 10; border-radius: 18px 18px 6px 6px; padding: 14px 14px 18px; background: linear-gradient(160deg, #2a2b30, #0e0e10 60%, #1c1c20); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -30px rgba(0,0,0,.9); }
.dv-lap-scr .cms { height: 100%; border-radius: 8px; overflow: hidden; background: #111214; display: grid; grid-template-columns: 148px 1fr; font-size: clamp(9px, .85vw, 12px); color: var(--paper); }
.dv-lap-base { height: 16px; margin: 0 -4% 0; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #2e2f34, #141416); box-shadow: 0 30px 60px -24px rgba(0,0,0,.9); }
.cms-side { display: grid; align-content: start; gap: 6px; padding: 14px 12px; background: #0B0C0E; border-right: 1px solid rgba(247,246,241,.08); }
.cms-side b { margin: 6px 0 8px; font-size: 1.1em; }
.cms-side span:not(.logo) { padding: 6px 8px; border-radius: 6px; color: var(--mute); }
.cms-side span.on { background: rgba(var(--lime-rgb), .14); color: var(--lime); font-weight: 700; }
.cms-main { padding: 14px 16px; display: grid; align-content: start; gap: 12px; }
.cms-bar { display: flex; align-items: center; gap: 12px; }
.cms-bar b { font-size: 1.25em; }
.cms-live { display: inline-flex; gap: 6px; align-items: center; color: var(--mute); }
.cms-btn { margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-weight: 800; }
.cms-t { width: 100%; border-collapse: collapse; }
.cms-t th { text-align: left; font-weight: 700; color: var(--faint); padding: 4px 8px; border-bottom: 1px solid rgba(247,246,241,.1); }
.cms-t td { padding: 7px 8px; border-bottom: 1px solid rgba(247,246,241,.06); white-space: nowrap; }
.cms-t tr.on td { background: rgba(var(--lime-rgb), .08); }
.cms-t i { font-style: normal; color: var(--mute); }
.cms-t i.l { color: var(--lime); font-weight: 700; }
.cms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cms-cards div { padding: 10px 12px; border-radius: 10px; background: #18191C; display: grid; gap: 2px; }
.cms-cards span { color: var(--faint); font-size: .9em; }
.cms-cards b { font-size: 1.6em; letter-spacing: -.02em; }
.dv-pad { right: 2%; bottom: 0; width: clamp(150px, 19vw, 260px); aspect-ratio: 3 / 4; border-radius: 22px; padding: 10px; background: linear-gradient(150deg, #2b2b30, #0d0d0f 60%, #1f1f23); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -24px rgba(0,0,0,.9); }
.dv-pad-scr { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #000; }
.dv-pad-scr img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.dv-pix { left: 3%; bottom: 0; width: clamp(120px, 14vw, 200px); aspect-ratio: 390 / 844; border-radius: 12%; padding: 3.2%; background: linear-gradient(150deg, #2b2b30, #0d0d0f 60%, #1f1f23); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -24px rgba(0,0,0,.9); }
.dv-pix-scr { position: relative; width: 100%; height: 100%; border-radius: 10%; overflow: hidden; background: #000; }
.dv-pix-scr::after { content: ""; position: absolute; left: 50%; top: 2.6%; width: 7%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #000; box-shadow: 0 0 0 2px #141416; }
.dv-pix-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.dv-iph { left: 17%; bottom: -8px; --pw: clamp(140px, 16.5vw, 236px); }
.dv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 36px; }
.dv-labels { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.dv-labels span::before { content: "·"; margin-right: 10px; color: var(--lime); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 10px; background: #000; color: #fff; text-decoration: none; box-shadow: 0 0 0 1px rgba(247,246,241,.3); }
.store-badge svg { width: 26px; height: 26px; }
.store-badge span { display: grid; line-height: 1.05; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.store-badge small { font-size: 10px; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.dv-note { margin-top: 14px; }
@media (max-width: 759px) {
  .dv-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
  .dv { position: static; transform: none; width: auto; }
  .dv-lap { grid-column: 1 / -1; }
  .dv-lap-scr .cms { font-size: 7px; grid-template-columns: 70px 1fr; }
  .cms-side { padding: 8px; gap: 3px; } .cms-main { padding: 8px; gap: 6px; }
  .cms-t td, .cms-t th { padding: 3px 4px; }
  .cms-t tr td:nth-child(2) { display: none; } .cms-t th:nth-child(2) { display: none; }
  .dv-pad { width: auto; aspect-ratio: 3 / 4; }
  .dv-pix { display: none; }
  .dv-iph { --pw: 100%; bottom: auto; }
  .dv-foot { flex-direction: column; align-items: flex-start; }
}