/* Affordly site. A month, told in one scroll: Sam's story, then the number falling to what is really available. */
@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dmmono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("fonts/dmmono5.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Readex"; src: url("fonts/readex.woff2") format("woff2"); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }


:root {
  --ink: #03120D; --panel: #0A221A; --panel2: #0E2E23; --line: rgba(209,250,229,.14);
  --text: #F0FAF5; --muted: #A3BFB4; --mint: #22C58B; --foam: #D1FAE5; --brand: #0D7A5B; --forest: #063B2C;
  --deep: #06291F; --bad: #FF8A7A; --paper: #fff; --paper-ink: #0F172A;
  --display: "Bricolage", "Readex", ui-sans-serif, system-ui, sans-serif;
  --body: "Figtree", "Readex", ui-sans-serif, system-ui, sans-serif;
  --figure: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --wrap: 1200px; color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: var(--mint); }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
h2 { font-size: clamp(2.5rem, 6vw, 4.8rem); }
h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.08; }
p { margin: 0; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { letter-spacing: 0; line-height: 1.28; font-weight: 700; }
:lang(ar) body { line-height: 1.85; }
.num { font-family: var(--figure); font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; display: inline-block; font-weight: 700; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.section { padding-block: clamp(84px, 12vw, 160px); position: relative; }
.lede { color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.35rem); max-width: 54ch; }
.tiny { color: var(--muted); font-size: .92rem; margin-block-start: 20px; max-width: 74ch; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; background: var(--paper); color: var(--paper-ink); padding: 8px 14px; border-radius: 8px; z-index: 40; }
.skip:focus { top: 12px; }
.motion .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.motion .rv.in { opacity: 1; transform: none; }

/* Header */
.top { position: fixed; inset: 0 0 auto; z-index: 30; transition: background .3s ease; padding-top: env(safe-area-inset-top, 0px); }
.top.solid { background: rgba(3,18,13,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 800 1.25rem var(--display); letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.top nav { display: flex; gap: 26px; margin-inline-start: auto; }
.top nav a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; transition: color .2s; }
.top nav a:hover { color: var(--text); }
.langs { display: flex; gap: 2px; font-size: .82rem; }
.langs a { color: var(--muted); text-decoration: none; padding: 4px 7px; border-radius: 6px; font-weight: 600; }
.langs a[aria-current] { background: rgba(255,255,255,.12); color: var(--text); }
.pill { background: var(--mint); color: #02251A; text-decoration: none; font-weight: 700; font-size: .92rem; padding: 9px 16px; border-radius: 99px; white-space: nowrap; }

/* Hero */
.hero { position: relative; overflow: clip; text-align: center; padding-block-start: clamp(104px, 13vh, 150px);
  background: radial-gradient(60% 50% at 50% 78%, rgba(34,197,139,.34), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(13,122,91,.5), transparent 75%), var(--ink); }
.hero-copy { position: relative; z-index: 3; display: grid; justify-items: center; }
.hero h1 { font-size: clamp(3.1rem, min(7.4vw, 12.5vh), 7.6rem); line-height: .98; letter-spacing: -.045em; max-width: 17ch; }
:lang(ar) .hero h1 { font-size: clamp(2.6rem, min(6vw, 10vh), 6rem); line-height: 1.2; letter-spacing: 0; }
.hero h1 em { font-style: normal; background: linear-gradient(100deg, #7CF0C4, var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin-block: 20px 26px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 11px; min-height: 60px; padding: 9px 22px 9px 16px; border-radius: 15px; text-decoration: none; background: var(--paper); color: var(--paper-ink); text-align: start; transition: transform .2s ease, box-shadow .2s ease; }
[dir="rtl"] .store { padding: 9px 16px 9px 22px; }
.store:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(34,197,139,.7); }
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font-size: .72rem; line-height: 1.2; color: #5B6B80; }
.store b { display: block; font: 700 1.12rem/1.2 var(--display); }
.note { color: var(--muted); font-size: .93rem; margin-block-start: 14px; }
.phone { position: relative; background: #070C14; border-radius: 13.5% / 6.2%; padding: 2.8%; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.16); }
.phone img { width: 100%; height: auto; border-radius: 11.4% / 5.25%; }
.phone::after { content: ""; position: absolute; top: 3.5%; left: 50%; width: 29%; height: 2.9%; transform: translateX(-50%); border-radius: 99px; background: #05080F; }
.fan { --y: 0px; position: relative; height: clamp(440px, 60vw, 700px); margin-block-start: clamp(22px, 2.4vw, 34px); overflow: clip; }
.fan .phone { position: absolute; top: 0; left: 50%; width: clamp(250px, 29vw, 400px); }
.fan .mid { z-index: 2; transform: translate(-50%, calc(var(--y) * -.06)); }
.fan .side { width: clamp(220px, 25vw, 340px); top: 8%; opacity: .92; }
.fan .l { transform: translate(-112%, calc(var(--y) * .03)) rotate(-9deg); }
.fan .r { transform: translate(12%, calc(var(--y) * .03)) rotate(9deg); }
.motion .fan .phone { animation: rise 1.2s cubic-bezier(.2,.75,.2,1) both; }
.motion .fan .side { animation-delay: .18s; }
@keyframes rise { from { translate: 0 110px; } to { translate: 0 0; } }
.float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 16px; background: rgba(240,250,245,.96); color: #06291F; font-weight: 700; box-shadow: 0 24px 50px -18px rgba(0,0,0,.7); }
.float svg { width: 20px; height: 20px; color: var(--brand); }
.float small { font-weight: 500; color: #3C5B50; }
.f1 { top: 30%; left: calc(50% - clamp(300px, 34vw, 480px)); transform: rotate(-3deg); }
.f2 { top: 15%; left: calc(50% + clamp(150px, 19vw, 260px)); transform: rotate(3deg); }

/* Story */
.motion .story { height: 560vh; }
.stage { position: relative; overflow: hidden; background: #000; }
.motion .stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .9s ease; will-change: opacity, transform; }
.scene.on { opacity: 1; }
.scene.green { background: radial-gradient(70% 80% at 62% 50%, #12946E, #0A5A44 55%, var(--forest)); }
.scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,14,10,.8), rgba(2,14,10,.32) 44%, transparent 66%); pointer-events: none; }
.caps { position: relative; z-index: 3; height: 100%; }
.cap, .hud, .bills { position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); }
.cap { top: 50%; width: min(540px, 44%); translate: 0 -62%; opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.cap.on { opacity: 1; transform: none; }
.kick { color: #7CF0C4; font-weight: 700; letter-spacing: .02em; margin-block-end: 10px; font-size: 1.05rem; }
.cap h2 { font-size: clamp(2.5rem, 5.8vw, 5rem); text-shadow: 0 3px 30px rgba(0,0,0,.45); }
.sub { font-size: clamp(1.1rem, 1.8vw, 1.45rem); margin-block-start: 16px; max-width: 30ch; color: #EAF6F0; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.hud { bottom: clamp(44px, 9vh, 90px); display: grid; gap: 0; padding: 12px 20px; border-radius: 16px; background: rgba(255,255,255,.96); color: #0F172A; box-shadow: 0 20px 44px -18px rgba(0,0,0,.6); transition: opacity .4s, background .4s; min-width: 190px; }
.hud span { font-size: .84rem; color: #51606F; font-weight: 600; }
.hud strong { font-size: 1.6rem; line-height: 1.2; text-align: start; }
.hud.low strong { color: #C5281C; }
.hud.good { background: var(--foam); }
.hud.good strong { color: var(--brand); }
.hud.off { opacity: 0; }
.bills { top: 50%; left: auto; right: 27%; display: grid; gap: 10px; width: 250px; translate: 0 -50%; pointer-events: none; }
.bill { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; background: #fff; color: #0F172A; padding: 10px 14px; border-radius: 12px; box-shadow: 0 18px 36px -14px rgba(0,0,0,.75); opacity: 0; transform: translateX(60px) rotate(4deg); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .12s); }
.bill:nth-child(2) { margin-inline-start: 26px; }
.bills.on .bill { opacity: 1; transform: rotate(-2deg); }
.bill em { font-style: normal; color: #C5281C; font-weight: 800; font-size: .74rem; grid-column: 2; text-align: end; }
.sphone { position: absolute; z-index: 2; top: 8%; right: max(8%, calc(50% - 520px)); width: min(330px, 28vw); opacity: 0; transform: translateY(60px) rotate(3deg); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.sphone.on { opacity: 1; transform: rotate(3deg); }
.days { position: absolute; z-index: 3; inset: auto 0 0; height: 4px; background: rgba(255,255,255,.14); }
.days i { display: block; height: 100%; background: var(--mint); transform: scaleX(0); transform-origin: 0 50%; }
html:not(.motion) .stage { display: grid; }
html:not(.motion) .stage > .scene:not(.green), html:not(.motion) .scrim, html:not(.motion) .days, html:not(.motion) .hud, html:not(.motion) .bills, html:not(.motion) .sphone, html:not(.motion) .scene.green { display: none; }
html:not(.motion) .stage { background: var(--panel); padding-block: 70px; }
html:not(.motion) .cap { position: static; opacity: 1; transform: none; translate: none; width: auto; margin-block-end: 44px; }

/* The number */
.motion .numsec { height: 420vh; }
.nstage { display: grid; align-items: center; text-align: center; padding-block: 90px 40px; background: var(--ink); transition: background .7s ease, color .7s ease; }
.motion .nstage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.nstage.done { background: var(--foam); color: var(--deep); }
.nkick { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--muted); font-weight: 600; transition: color .7s; }
.done .nkick { color: var(--brand); }
.big { font-size: clamp(3.6rem, 15vw, 13rem); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; margin-block: 6px; }
.nsub { font-size: clamp(1.05rem, 1.8vw, 1.35rem); opacity: 0; transition: opacity .6s .2s; }
.nsub .num { font-weight: 800; }
.done .nsub { opacity: 1; }
html:not(.motion) .nsub { opacity: 1; }
.n-rows { list-style: none; padding: 0; margin: clamp(18px, 3.5vh, 36px) auto 0; max-width: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; text-align: start; transition: opacity .5s; }
.done .n-rows { opacity: .55; }
.n-row { display: flex; justify-content: space-between; gap: 14px; padding-block: 8px; border-block-end: 1px solid var(--line); font-size: 1rem; }
.done .n-row { border-color: rgba(6,41,31,.18); }
.n-row .num { color: #FF9C8F; white-space: nowrap; }
.done .n-row .num { color: var(--deep); }
.motion .n-row { opacity: .16; transition: opacity .35s ease; }
.motion .n-row.on { opacity: 1; }

/* Steps */
.steps-s h2 { max-width: 15ch; }
.steps-s .lede { margin-block-start: 20px; }
.steps3 { list-style: none; padding: 0; margin: clamp(44px, 6vw, 72px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps3 li { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: grid; gap: 8px; align-content: start; }
.steps3 i { font: 800 2.6rem/1 var(--figure); color: var(--mint); font-style: normal; }
.steps3 b { font: 700 1.25rem/1.2 var(--display); }
.steps3 p { color: var(--muted); }

/* Film */
.filmsec { padding-block-end: clamp(60px, 8vw, 110px); }
.film-head { text-align: center; display: grid; gap: 10px; justify-items: center; margin-block-end: 34px; }
.film-head p { color: var(--muted); }
.screen { --s: 1; position: relative; aspect-ratio: 16 / 9; width: calc(78% + 22% * var(--s)); max-width: 1680px; margin-inline: auto; border-radius: calc(26px * (1.2 - var(--s))); overflow: hidden; background: #000; }
.screen video { width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: radial-gradient(circle at center, rgba(0,0,0,.05), rgba(0,0,0,.38)); color: #fff; cursor: pointer; display: grid; place-items: center; font: inherit; }
.play span { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px 14px 16px; border-radius: 99px; background: rgba(255,255,255,.96); color: var(--paper-ink); font: 700 1.1rem var(--display); transition: transform .2s ease; }
[dir="rtl"] .play span { padding: 14px 16px 14px 26px; }
.play:hover span { transform: scale(1.06); }
.play svg { width: 34px; height: 34px; color: var(--brand); }

/* Calculator */
.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.try .lede { margin-block-start: 18px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block-start: 32px; }
.field { display: grid; gap: 6px; font-size: .92rem; color: var(--muted); font-weight: 600; align-content: end; }
.box { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding-inline: 14px; direction: ltr; transition: border-color .2s; }
.box:focus-within { border-color: var(--mint); }
.box i { font-style: normal; color: var(--muted); }
.box input { width: 100%; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 700 1.2rem var(--figure); padding-block: 13px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.box input::-webkit-outer-spin-button, .box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.result { background: var(--foam); color: var(--deep); border-radius: 30px; padding: clamp(24px, 3.4vw, 42px); box-shadow: 0 40px 110px -44px rgba(34,197,139,.7); }
.r-l { font-weight: 700; color: var(--brand); }
.r-n { display: block; font-size: clamp(3rem, 7vw, 5.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.04em; text-align: start; overflow-wrap: anywhere; }
.r-d { font-size: 1.1rem; }
.afford { margin-block-start: 24px; padding: 18px; background: #fff; border-radius: 18px; color: var(--paper-ink); }
.afford label { font-weight: 700; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.afford input { width: 100%; margin-block: 12px 8px; accent-color: var(--brand); color-scheme: light; }
.verdict { font-weight: 800; color: var(--brand); }
.verdict.no { color: #B42318; }
.after { color: #41505F; font-size: .95rem; }

/* Features */
.feats h2 { max-width: 14ch; margin-block-end: clamp(36px, 5vw, 60px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.card { background: linear-gradient(160deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 30px; overflow: hidden; display: grid; min-height: 520px; }
.card.wide { grid-column: span 7; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.card.tall { grid-column: span 5; grid-template-rows: auto 1fr; }
.card:nth-child(3) { order: 4; grid-column: span 7; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: none; }
.card:nth-child(4) { order: 3; grid-column: span 5; grid-template-columns: none; grid-template-rows: auto 1fr; }
.card-t { padding: clamp(24px, 3vw, 36px); }
.card-t p { color: var(--muted); margin-block-start: 12px; }
.card ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.card li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; font-size: .98rem; }
.card li svg { width: 18px; height: 18px; color: var(--mint); margin-block-start: 4px; }
.card-p { position: relative; min-height: 260px; overflow: hidden; }
.card-p .phone { position: absolute; left: 50%; top: 34px; width: min(78%, 280px); transform: translateX(-50%); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-p .phone { transform: translateX(-50%) translateY(-14px); }

/* Privacy */
.privacy { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(180deg, var(--forest), var(--ink)); }
.mask { position: absolute; inset-inline-end: -2vw; top: 6%; font-size: clamp(7rem, 26vw, 24rem); line-height: 1; font-weight: 800; color: rgba(209,250,229,.05); letter-spacing: -.04em; pointer-events: none; }
.privacy .wrap { position: relative; }
.privacy h2 { max-width: 12ch; }
.privacy .lede { margin-block-start: 18px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-block-start: clamp(48px, 7vw, 90px); }
.facts div { border-block-start: 2px solid var(--mint); padding-block-start: 16px; }
.facts b { display: block; font: 700 1.28rem/1.2 var(--display); margin-block-end: 6px; }
.facts p { color: var(--muted); font-size: .98rem; }

/* Plans */
.plans-head { max-width: 720px; margin-block-end: 42px; }
.plans-head .lede { margin-block-start: 16px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 26px; background: var(--panel); }
table { width: 100%; min-width: 520px; border-collapse: collapse; }
th, td { padding: 15px 20px; text-align: start; border-block-end: 1px solid var(--line); }
tr:last-child th, tr:last-child td { border-block-end: 0; }
thead th { font: 800 1.35rem var(--display); }
tbody th { font-weight: 500; }
td, thead th + th { width: 130px; text-align: center; }
td:last-child, thead .pro { background: rgba(34,197,139,.1); color: #7CF0C4; }
td svg { width: 22px; height: 22px; color: var(--mint); margin-inline: auto; display: block; }
td .none { color: var(--muted); }

/* FAQ */
.faq { padding-block-start: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 6vw, 80px); }
details { border-block-end: 1px solid var(--line); padding-block: 18px; }
summary { cursor: pointer; font: 600 1.2rem/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 18px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.5rem/1 var(--figure); color: var(--mint); }
details[open] summary::after { content: "–"; }
details p { color: var(--muted); padding-block-start: 10px; max-width: 62ch; }

/* Close */
.closing { position: relative; min-height: min(92vh, 860px); display: grid; align-items: center; overflow: hidden; }
.closing .scene { opacity: 1; transition: none; }
.closing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,14,10,.86), rgba(2,14,10,.36) 50%, transparent 72%); }
.closing .wrap { position: relative; z-index: 2; width: 100%; }
.closing h2 { max-width: 11ch; margin-block-end: 30px; font-size: clamp(2.8rem, 7vw, 6rem); }
.closing .stores { justify-content: flex-start; }
footer { background: var(--ink); color: var(--muted); padding-block: 44px; font-size: .94rem; }
footer .wrap { display: grid; gap: 16px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
footer a { color: var(--text); }
.foot-by { color: var(--text); font: 700 1.2rem var(--display); }

@media (max-width: 960px) {
  .top nav { display: none; }
  .langs { margin-inline-start: auto; }
  .try-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .card.wide, .card.tall, .card:nth-child(3), .card:nth-child(4) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; order: 0; min-height: 0; }
  .card-p { min-height: 340px; }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f1 { left: 4%; } .f2 { left: auto; right: 4%; }
  .scene { object-position: 70% 50%; }
  .scrim { background: linear-gradient(0deg, rgba(2,14,10,.92), rgba(2,14,10,.5) 44%, transparent 68%); }
  .cap { top: auto; bottom: 150px; width: calc(100% - 40px); translate: none; }
  .hud { bottom: 40px; }
  .bills { top: 37%; right: 12px; translate: none; width: 196px; gap: 6px; }
  .bill { padding: 6px 12px; font-size: .9rem; }
  .sphone { top: 9%; right: 50%; width: min(210px, 48vw); margin-right: calc(min(210px, 48vw) / -2); }
  .closing { min-height: 86vh; align-items: end; padding-block-end: 44px; }
  .closing::after { background: linear-gradient(0deg, rgba(2,14,10,.9), rgba(2,14,10,.4) 50%, transparent 72%); }
}
@media (max-width: 560px) {
  .fan .side { width: 190px; top: 12%; }
  .fan .mid { width: 240px; }
  .float { font-size: .88rem; padding: 9px 12px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .store { flex: 1 1 100%; justify-content: center; }
  .brand span { display: none; }
  .n-rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .n-row { font-size: .9rem; padding-block: 5px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .store, .play span, .card-p .phone { transition: none; } }