/* Clinic websites reel (25s showreel), same engine as Conversion Architecture v3.
   Every rule is scoped under .ca-reel so the same stylesheet works in the
   HyperFrames render and embedded live in the site page. Images live in img/. */
.ca-reel {
  --ink: #0A0A0A;
  --bone: #F5F2EB;
  --hair: rgba(245, 242, 235, 0.16);
  --hair2: rgba(245, 242, 235, 0.32);
  --dim: rgba(245, 242, 235, 0.72);
  --acc: #E27A6A;
  --old: #8A8782;
  --f-display: 'Geist', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  position: relative; overflow: hidden; color: var(--bone); background: var(--ink);
  font-family: var(--f-body); line-height: 1.2; letter-spacing: normal; text-align: left;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.ca-reel *, .ca-reel *::before, .ca-reel *::after { box-sizing: border-box; }
.ca-reel h1, .ca-reel h2, .ca-reel p { margin: 0; font-weight: inherit; }
.ca-reel img { display: block; max-width: none; }

.ca-reel.landscape {
  width: 1920px; height: 1080px;
  --pad: 110px; --hud: 20px; --mono: 20px; --h2: 96px; --hero: 232px; --lb: 96px;
}
.ca-reel.portrait {
  width: 1080px; height: 1920px;
  --pad: 72px; --hud: 30px; --mono: 28px; --h2: 92px; --hero: 136px; --lb: 150px;
}

.ca-reel .layer, .ca-reel .scene { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ca-reel .scene { overflow: hidden; }
.ca-reel .r-mono { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; }
.ca-reel .r-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.ca-reel .mask { display: block; overflow: hidden; padding: 0.02em 0.12em 0.12em; }
.ca-reel .ch { display: inline-block; }

/* ── background ── */
.ca-reel .bg-fill { position: absolute; inset: 0; background: var(--ink); }
.ca-reel .grid {
  position: absolute; left: -160px; top: -160px; right: -160px; bottom: -160px;
  background-image:
    linear-gradient(rgba(245, 242, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 242, 235, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
}
.ca-reel .glow { position: absolute; width: 1600px; height: 1600px; border-radius: 50%; left: 50%; top: 50%; margin: -800px 0 0 -800px; opacity: 0; }
.ca-reel .glow-good { background: radial-gradient(closest-side, rgba(226, 122, 106, 0.22), rgba(226, 122, 106, 0) 70%); }
.ca-reel .glow-bone { background: radial-gradient(closest-side, rgba(245, 242, 235, 0.12), rgba(245, 242, 235, 0) 70%); }

/* ── fx: slices, flash, grain ── */
.ca-reel .slices { position: absolute; inset: 0; }
.ca-reel .slc { position: absolute; left: 0; width: 100%; background: var(--bone); transform-origin: 0 50%; transform: scaleX(0); }
.ca-reel .flash { position: absolute; inset: 0; background: var(--bone); opacity: 0; }
.ca-reel .grain { position: absolute; left: -256px; top: -256px; right: -256px; bottom: -256px; background: url(img/grain.webp) 0 0 / 256px 256px repeat; opacity: 0.09; mix-blend-mode: overlay; pointer-events: none; }

/* ── HUD ── */
.ca-reel .hud-tl, .ca-reel .hud-tr, .ca-reel .hud-bl, .ca-reel .hud-br { position: absolute; font-size: var(--hud); display: flex; align-items: center; gap: 14px; color: rgba(245, 242, 235, 0.72); mix-blend-mode: difference; }
.ca-reel .hud-tl { left: 56px; top: 48px; }
.ca-reel .hud-tr { right: 56px; top: 48px; }
.ca-reel .hud-bl { left: 56px; bottom: 48px; }
.ca-reel .hud-br { right: 56px; bottom: 54px; }
.ca-reel .hud-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); }
.ca-reel .hud-logo { display: block; height: 24px; width: 78px; background: url(logo.svg) left center / contain no-repeat; filter: invert(1) brightness(1.05); opacity: 0.9; }
.ca-reel .hud-of { opacity: 0.45; }
.ca-reel .chap-wrap { position: relative; display: block; width: 380px; height: 1.3em; }
.ca-reel .chap { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.ca-reel .bar { position: relative; width: 240px; height: 2px; background: var(--hair); overflow: hidden; }
.ca-reel .bar-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--bone); transform-origin: 0 50%; }
.ca-reel .r-corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(245, 242, 235, 0.35); }
.ca-reel .r-corner.tl { left: 28px; top: 28px; border-left-width: 1px; border-top-width: 1px; }
.ca-reel .r-corner.tr { right: 28px; top: 28px; border-right-width: 1px; border-top-width: 1px; }
.ca-reel .r-corner.bl { left: 28px; bottom: 28px; border-left-width: 1px; border-bottom-width: 1px; }
.ca-reel .r-corner.br { right: 28px; bottom: 28px; border-right-width: 1px; border-bottom-width: 1px; }
.ca-reel.portrait .chap-wrap { width: 420px; }
.ca-reel.portrait .bar { width: 160px; }
.ca-reel.portrait .hud-logo { height: 34px; width: 110px; }
/* embedded in the page: the site nav + progress bar replace these */
.ca-reel.is-page .hud-tl, .ca-reel.is-page .hud-bl, .ca-reel.is-page .hud-br { display: none; }

/* ── S2 slams ── */
.ca-reel .slam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; }
.ca-reel .sm-bone { background: var(--bone); color: var(--ink); }
.ca-reel .sm-ink { background: var(--ink); color: var(--bone); }
.ca-reel .sm-bad { background: var(--acc); color: var(--ink); }
.ca-reel .sm-in { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.ca-reel .sm-w { display: block; font-family: var(--f-display); font-weight: 800; letter-spacing: -0.055em; line-height: 0.9; white-space: nowrap; }
.ca-reel .sm-out .sm-w { color: transparent; -webkit-text-stroke: 3px var(--bone); }
.ca-reel .sm-serif .sm-w { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.ca-reel .sm-mask { display: block; overflow: hidden; padding: 0 0.22em 0.08em 0.12em; }
.ca-reel .sm-bad .sm-in { gap: 70px; }
.ca-reel .sm-t { display: block; font-size: calc(var(--mono) * 1.25); letter-spacing: 0.24em; opacity: 0.75; }

/* ── S3 the wall ── */
.ca-reel .wall-cam { position: absolute; inset: 0; perspective: 2600px; perspective-origin: 50% 50%; overflow: hidden; }
.ca-reel .wall { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ca-reel .wcol { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.ca-reel .wt { position: absolute; border-radius: 14px; overflow: hidden; background: #161616; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); outline: 1px solid rgba(245, 242, 235, 0.08); }
.ca-reel .wt img { width: 100%; height: 100%; object-fit: cover; }
.ca-reel .wall-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.62) 70%); opacity: 0; }
.ca-reel .s3-shot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; overflow: hidden; background: #161616; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); opacity: 0; }
.ca-reel .s3-shot img { width: 100%; height: 100%; object-fit: cover; }
.ca-reel .s3-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad); }
.ca-reel .s3-eb { display: block; font-size: var(--mono); color: var(--dim); opacity: 0; }
.ca-reel .s3-title { margin-top: 18px; font-weight: 400; }
.ca-reel .t-sans, .ca-reel .t-serif { display: block; line-height: 0.98; white-space: nowrap; }
.ca-reel .t-sans { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.05em; font-size: var(--hero); }
.ca-reel .t-serif { font-family: var(--f-serif); font-style: italic; letter-spacing: -0.02em; font-size: calc(var(--hero) * 1.1); color: var(--acc); }
.ca-reel .s3-sub { display: block; margin-top: 30px; font-size: var(--mono); letter-spacing: 0.3em; color: var(--bone); opacity: 0; }
.ca-reel.portrait .s3-sub { letter-spacing: 0.08em; font-size: 24px; }
.ca-reel .lbox { position: absolute; left: 0; width: 100%; height: var(--lb); background: var(--ink); transform: scaleY(0); }
.ca-reel .lb-t { top: 0; transform-origin: 50% 0; }
.ca-reel .lb-b { bottom: 0; transform-origin: 50% 100%; }

/* ── shared section head ── */
.ca-reel .head { position: absolute; left: var(--pad); top: 128px; }
.ca-reel .r-eb { display: block; font-size: var(--mono); color: var(--dim); opacity: 0; }
.ca-reel .r-h2 { margin-top: 20px; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-size: var(--h2); }
.ca-reel .r-h2 .ln { display: block; opacity: 0; white-space: nowrap; }
.ca-reel .r-h2 .r-serif { font-weight: 400; font-size: 1.1em; }
.ca-reel.portrait .head { top: 150px; }

/* ── S7 outro ── */
.ca-reel .s7-ring { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 2px solid var(--acc); opacity: 0; }
.ca-reel .s7-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ca-reel .s7-a, .ca-reel .s7-b { display: block; line-height: 1; white-space: nowrap; }
.ca-reel .s7-a { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.05em; font-size: 150px; }
.ca-reel .s7-b { font-size: 168px; color: var(--acc); }
.ca-reel.portrait .s7-a { font-size: 112px; }
.ca-reel.portrait .s7-b { font-size: 124px; }
.ca-reel .s7-sign { position: absolute; left: 0; right: 0; bottom: 150px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ca-reel .s7-logo { display: block; height: 52px; width: 169px; background: url(logo.svg) center / contain no-repeat; filter: invert(1) brightness(1.05); opacity: 0; }
.ca-reel .s7-meta { display: block; font-size: 18px; color: rgba(245, 242, 235, 0.6); opacity: 0; }
.ca-reel.portrait .s7-sign { bottom: 280px; }
.ca-reel.portrait .s7-logo { height: 70px; width: 227px; }
.ca-reel.portrait .s7-meta { font-size: 24px; white-space: nowrap; }

/* ── S1 boot: a browser opens on the clinic's address ── */
.ca-reel .brw { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.ca-reel.landscape .brw { width: 1200px; height: 700px; }
.ca-reel.portrait .brw { width: 920px; height: 1180px; }
.ca-reel .brw-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ca-reel .brw-line rect { fill: rgba(245, 242, 235, 0.02); stroke: var(--bone); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ca-reel .brw-top { position: absolute; left: 0; right: 0; top: 0; height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 26px; border-bottom: 1px solid var(--hair); }
.ca-reel .brw-top .d { display: block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--hair2); transform: scale(0); }
.ca-reel .url { position: absolute; left: 50%; top: 16px; translate: -50% 0; width: 58%; height: 40px; border-radius: 20px; border: 1px solid var(--hair2); background: rgba(245, 242, 235, 0.05); display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--f-mono); font-size: 20px; letter-spacing: 0.04em; opacity: 0; }
.ca-reel.portrait .url { width: 70%; font-size: 24px; }
.ca-reel .url .lock { font-size: 10px; color: var(--acc); }
.ca-reel .url .caret { display: block; width: 2px; height: 24px; background: var(--acc); }
.ca-reel .brw-load { position: absolute; left: 0; right: 0; top: 72px; height: 3px; overflow: hidden; }
.ca-reel .brw-load i { display: block; width: 100%; height: 100%; background: var(--acc); box-shadow: 0 0 18px rgba(226, 122, 106, 0.9); transform-origin: 0 50%; transform: scaleX(0); }
.ca-reel .brw-body { position: absolute; left: 0; right: 0; top: 75px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.ca-reel .pct { font-family: var(--f-display); font-weight: 800; font-size: 210px; letter-spacing: -0.05em; line-height: 1; text-transform: none; font-variant-numeric: tabular-nums; opacity: 0; }
.ca-reel .brw-cap { font-size: var(--mono); color: var(--dim); opacity: 0; }

/* ── S2 the old site ── */
.ca-reel .old { position: absolute; inset: 0; }
.ca-reel .old-ph { position: absolute; width: 450px; height: 900px; opacity: 0; }
.ca-reel.landscape .old-ph { left: 250px; top: 90px; }
.ca-reel.portrait .old-ph { left: 315px; top: 150px; }
.ca-reel .old-ph img { width: 100%; height: 100%; mix-blend-mode: lighten; }
.ca-reel .old-veil { position: absolute; left: 30px; right: 30px; top: 90px; bottom: 30px; border-radius: 10px; background: rgba(10, 10, 10, 0.55); opacity: 0; }
.ca-reel .spin { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 6px solid rgba(245, 242, 235, 0.18); border-top-color: var(--bone); opacity: 0; }
.ca-reel .old-txt { position: absolute; display: flex; flex-direction: column; }
.ca-reel.landscape .old-txt { left: 860px; top: 50%; translate: 0 -50%; width: 960px; }
.ca-reel.portrait .old-txt { left: var(--pad); right: var(--pad); top: 1130px; align-items: center; text-align: center; }
.ca-reel .old-eb { font-size: var(--mono); color: var(--acc); opacity: 0; }
.ca-reel .old-v { display: block; font-size: 170px; line-height: 1.02; white-space: nowrap; }
.ca-reel.portrait .old-v { font-size: 128px; }
.ca-reel .old-cap { margin-top: 24px; font-size: var(--mono); color: var(--dim); opacity: 0; line-height: 1.6; }

/* ── S3 flat copy of the centre tile, sharp at any scale ── */
.ca-reel .s3-shot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; overflow: hidden; background: #161616; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); opacity: 0; }
.ca-reel .s3-shot img { width: 100%; height: 100%; object-fit: cover; }

/* ── shared section head ── */
.ca-reel .head { position: absolute; left: var(--pad); top: 128px; }
.ca-reel .r-eb { display: block; font-size: var(--mono); color: var(--dim); opacity: 0; }
.ca-reel .r-h2 { margin-top: 20px; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-size: var(--h2); }
.ca-reel .r-h2 .ln { display: block; opacity: 0; white-space: nowrap; }
.ca-reel .r-h2 .r-serif { font-weight: 400; font-size: 1.1em; color: var(--acc); }
.ca-reel.portrait .head { top: 150px; }

/* ── S4 speed ── */
.ca-reel .race { position: absolute; display: flex; flex-direction: column; gap: 46px; }
.ca-reel.landscape .race { left: var(--pad); top: 470px; width: 960px; }
.ca-reel.portrait .race { left: var(--pad); right: var(--pad); top: 560px; }
.ca-reel .lane { opacity: 0; }
.ca-reel .lane-h { display: flex; align-items: baseline; justify-content: space-between; }
.ca-reel .lane-n { font-size: var(--mono); color: var(--dim); }
.ca-reel .lane-t { font-family: var(--f-display); font-weight: 800; font-size: 76px; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--old); }
.ca-reel .lane.good .lane-t { color: var(--bone); }
.ca-reel .lane-bar { position: relative; margin-top: 16px; height: 18px; border-radius: 9px; background: rgba(245, 242, 235, 0.08); overflow: hidden; }
.ca-reel .lane-bar i { position: absolute; inset: 0; border-radius: 9px; background: var(--old); transform-origin: 0 50%; transform: scaleX(0); }
.ca-reel .lane.good .lane-bar i { background: var(--acc); box-shadow: 0 0 24px rgba(226, 122, 106, 0.8); }
.ca-reel .lane-ok { display: block; margin-top: 12px; font-size: calc(var(--mono) * 0.9); color: var(--old); opacity: 0; }
.ca-reel .lane.good .lane-ok { color: var(--acc); }
.ca-reel .race-cap { font-size: calc(var(--mono) * 0.85); color: var(--dim); opacity: 0; }
.ca-reel .gauges { position: absolute; display: flex; gap: 36px; }
.ca-reel.landscape .gauges { right: var(--pad); top: 470px; }
.ca-reel.portrait .gauges { left: var(--pad); right: var(--pad); top: 1260px; justify-content: space-between; }
.ca-reel .gauge { position: relative; width: 210px; display: flex; flex-direction: column; align-items: center; opacity: 0; }
.ca-reel.portrait .gauge { width: 280px; }
.ca-reel .gauge svg { width: 100%; height: auto; transform: rotate(-90deg); }
.ca-reel .g-bg { fill: none; stroke: rgba(245, 242, 235, 0.1); stroke-width: 7; }
.ca-reel .g-fg { fill: none; stroke: var(--acc); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(226, 122, 106, 0.7)); }
.ca-reel .g-v { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; font-size: 40px; letter-spacing: -0.04em; }
.ca-reel.portrait .g-v { font-size: 52px; }
.ca-reel .g-k { margin-top: 18px; font-size: calc(var(--mono) * 0.9); color: var(--dim); }

/* ── S5 anatomy of a site that books ── */
.ca-reel .win { position: absolute; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid var(--hair2); box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7); opacity: 0; }
.ca-reel.landscape .win { left: var(--pad); top: 150px; width: 1040px; height: 780px; }
.ca-reel.portrait .win { left: var(--pad); top: 150px; width: 936px; height: 720px; }
.ca-reel .win-top { position: relative; height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 20px; border-bottom: 1px solid var(--hair); background: #161616; }
.ca-reel .win-top i { display: block; width: 12px; height: 12px; border-radius: 50%; background: rgba(245, 242, 235, 0.2); }
.ca-reel .win-url { position: absolute; left: 50%; translate: -50% 0; font-size: 15px; letter-spacing: 0.06em; color: var(--dim); text-transform: none; }
.ca-reel .win-view { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; overflow: hidden; }
.ca-reel .win-scroll img { width: 100%; height: auto; }
.ca-reel .cta { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; display: flex; align-items: center; gap: 16px; padding: 18px 20px 18px 30px; border-radius: 999px; background: var(--acc); color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); opacity: 0; }
.ca-reel .cta b { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bone); font-size: 20px; }
.ca-reel .cta .rip { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transform: scale(0); opacity: 0; }
.ca-reel .cursor { position: absolute; left: 0; top: 0; width: 46px; height: 46px; opacity: 0; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); }
.ca-reel .cursor path { fill: var(--bone); stroke: var(--ink); stroke-width: 1.2; }
.ca-reel .chk { position: absolute; }
.ca-reel.landscape .chk { left: 1250px; top: 150px; width: 580px; }
.ca-reel.portrait .chk { left: var(--pad); right: var(--pad); top: 920px; }
.ca-reel .chk-h { margin-top: 18px; font-family: var(--f-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-size: 70px; }
.ca-reel .chk-h .ln { display: block; opacity: 0; white-space: nowrap; }
.ca-reel .chk-h .r-serif { font-weight: 400; font-size: 1.1em; color: var(--acc); }
.ca-reel .chk-list { list-style: none; margin: 40px 0 0; padding: 0; }
.ca-reel .chk-list li { display: flex; align-items: center; gap: 20px; padding: 15px 0; border-top: 1px solid var(--hair); font-family: var(--f-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; opacity: 0.28; }
.ca-reel.portrait .chk-list li { font-size: 40px; padding: 14px 0; }
.ca-reel .chk-list li i { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--hair2); }
.ca-reel .chk-list li i::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-style: normal; color: var(--ink); opacity: 0; }
.ca-reel .chk-list li.on { opacity: 1; }
.ca-reel .chk-list li.on i { background: var(--acc); border-color: var(--acc); }
.ca-reel .chk-list li.on i::after { opacity: 1; }
.ca-reel .toast { position: absolute; display: flex; align-items: center; gap: 22px; padding: 26px 34px 26px 26px; border-radius: 22px; background: var(--bone); color: var(--ink); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); opacity: 0; }
.ca-reel.landscape .toast { left: 560px; top: 700px; }
.ca-reel.portrait .toast { left: 140px; top: 690px; }
.ca-reel .toast .tk { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--acc); color: var(--ink); font-size: 28px; font-weight: 700; }
.ca-reel .toast .tt { display: flex; flex-direction: column; gap: 8px; }
.ca-reel .toast strong { font-family: var(--f-display); font-weight: 800; font-size: 34px; letter-spacing: -0.02em; white-space: nowrap; }
.ca-reel .toast small { font-size: 15px; letter-spacing: 0.12em; color: rgba(10, 10, 10, 0.6); white-space: nowrap; }

/* ── S6 proof ── */
.ca-reel .cases { position: absolute; display: grid; gap: 24px; perspective: 1600px; }
.ca-reel.landscape .cases { left: var(--pad); right: var(--pad); top: 470px; grid-template-columns: repeat(4, 1fr); }
.ca-reel.portrait .cases { left: var(--pad); right: var(--pad); top: 560px; grid-template-columns: 1fr 1fr; }
.ca-reel .case { display: flex; flex-direction: column; height: 440px; padding: 34px 30px; border: 1px solid var(--hair2); border-radius: 22px; background: linear-gradient(160deg, rgba(245, 242, 235, 0.06), rgba(245, 242, 235, 0.01)); opacity: 0; transform-origin: 50% 100%; }
.ca-reel.portrait .case { height: 560px; }
.ca-reel .cs-c { font-size: calc(var(--mono) * 0.85); color: var(--dim); }
.ca-reel .cs-n { margin-top: 14px; font-family: var(--f-display); font-weight: 800; font-size: 46px; letter-spacing: -0.035em; line-height: 1; }
.ca-reel .cs-v { margin-top: auto; font-family: var(--f-display); font-weight: 800; font-size: 72px; letter-spacing: -0.045em; line-height: 1; color: var(--acc); white-space: nowrap; }
.ca-reel .cs-k { margin-top: 12px; font-size: 22px; line-height: 1.35; color: var(--dim); }
.ca-reel.portrait .cs-n { font-size: 54px; }
.ca-reel.portrait .cs-v { font-size: 76px; }
.ca-reel.portrait .cs-k { font-size: 28px; }

/* ── sizes specific to this reel ── */
.ca-reel.cw.landscape { --hero: 190px; }
.ca-reel.cw.portrait { --hero: 100px; }
.ca-reel.cw.portrait .s7-a { font-size: 94px; }
.ca-reel.cw.portrait .s7-b { font-size: 108px; }
.ca-reel.cw.landscape .cs-v { font-size: 60px; }

/* ── lighter build for phones and tablets in the page (iOS Safari GPU memory) ── */
.ca-reel.is-lite .grain { display: none; }
.ca-reel.is-lite .hud-tl, .ca-reel.is-lite .hud-tr, .ca-reel.is-lite .hud-bl, .ca-reel.is-lite .hud-br { mix-blend-mode: normal; }
.ca-reel.is-lite .wt { box-shadow: none; }
.ca-reel.is-lite .ln-glow { filter: none; stroke-width: 18; opacity: 0.16; }
.ca-reel.is-lite .g-fg { filter: none; }
.ca-reel.is-lite .s3-shot, .ca-reel.is-lite .win, .ca-reel.is-lite .card { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }