/* The Blocker — theblocker.app
   Direction (artifacts/website-revamp/DESIGN-DIRECTION.md): "protection, assembled".
   Deep evergreen + sea-glass for the dark scenes, warm paper for reading, one bright
   sea-glass action. Figtree for voice, Fraunces for editorial moments, Readex Pro for Arabic. */

:root {
  --evergreen: #071a18;
  --evergreen-2: #0a2421;
  --deep: #0d3531;
  --teal: #0d9488;
  --teal-deep: #0a5c55;
  --seaglass: #2dd4bf;
  --mint: #99f6e4;
  --warm: #f6f1e7;
  --warm-2: #efe7d7;
  --paper-line: #e2d8c5;
  --ink: #0b2f2c;
  --ink-soft: #3e5b57;
  --on-dark: #f6f1e7;
  --on-dark-soft: rgba(246, 241, 231, .72);
  --glass: rgba(255, 255, 255, .045);
  --glass-line: rgba(153, 246, 228, .16);
  --signal: #f97316;
  --radius: 26px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --max: 1180px;
}
[lang="ar"] { --display: "Readex Pro", "Geeza Pro", sans-serif; --sans: "Readex Pro", "Geeza Pro", sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
body { margin: 0; background: var(--evergreen); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }   /* never stretch a screenshot: keep its real aspect ratio */
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--seaglass); outline-offset: 3px; border-radius: 10px; }
.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 16px; z-index: 50; background: #fff; color: var(--ink); padding: 8px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- surfaces ---------- */
.dark { background: var(--evergreen); color: var(--on-dark); }
.warm { background: var(--warm); color: var(--ink); }
.warm-2 { background: var(--warm-2); color: var(--ink); }
section { padding: 112px 0; position: relative; }
.kicker { margin: 0 0 14px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.dark .kicker { color: var(--seaglass); }
[lang="ar"] .kicker { letter-spacing: 0; font-size: 15px; }
h2 { font: 500 clamp(34px, 4.6vw, 58px)/1.04 var(--display); letter-spacing: -.02em; margin: 0 0 18px; font-variation-settings: "opsz" 144, "SOFT" 30; }
[lang="ar"] h2 { font-weight: 600; line-height: 1.3; letter-spacing: 0; font-size: clamp(30px, 4vw, 48px); }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ink-soft); max-width: 58ch; margin: 0; }
.dark .lead { color: var(--on-dark-soft); }
.head { margin-bottom: 56px; }
.head.center { text-align: center; }
.head.center .lead { margin-inline: auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 16px; font: 700 17px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-glass { background: linear-gradient(180deg, #6ff0db, var(--seaglass)); color: #032b27; box-shadow: 0 14px 34px -14px rgba(45,212,191,.7), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-glass:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px rgba(45,212,191,.85), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-ink { background: var(--ink); color: var(--warm); }
.btn-ink:hover { transform: translateY(-2px); background: #0f3d39; }
.btn svg { width: 18px; height: 18px; }
.link-arrow { font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- header ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 30; padding-block: 18px; color: var(--on-dark); }
.top .wrap { display: flex; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 18px; white-space: nowrap; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.top nav { margin-inline-start: auto; display: flex; align-items: center; gap: 24px; }
.top nav a { text-decoration: none; font-size: 15px; color: rgba(246,241,231,.78); }
.top nav a:hover { color: #fff; }
.top .lang { border: 1px solid rgba(246,241,231,.3); border-radius: 999px; padding: 5px 13px; }
.top .get-app { color: var(--on-dark) !important; border: 1px solid rgba(45,212,191,.6); border-radius: 12px; padding: 9px 16px; white-space: nowrap; }
@media (max-width: 900px) { .top nav a:not(.lang):not(.get-app) { display: none; } .top nav { gap: 12px; } }
@media (max-width: 380px) { .top .get-app { display: none; } }

/* =====================================================================
   HERO — CSS-3D phone with a real screen + three glass feature planes.
   Default = assembled static (no-JS / reduced motion). site.js animates it.
   ===================================================================== */
.hero-3d { padding: 0; color: var(--on-dark); background: radial-gradient(55% 55% at 72% 44%, rgba(13,148,136,.30), transparent 70%), radial-gradient(38% 28% at 70% 90%, rgba(45,212,191,.10), transparent 70%), var(--evergreen); }
.hero-3d .stage { position: relative; overflow: hidden; padding: 116px 0 48px; }
html.js .hero-3d.pinned { height: calc(100vh + 130vh); }
html.js .hero-3d.pinned .stage { position: sticky; top: 0; height: 100vh; min-height: 680px; display: flex; flex-direction: column; justify-content: center; padding: 88px 0 28px; }
.hero-grid { display: grid; gap: 10px; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 24px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--seaglass); }
.eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--seaglass); box-shadow: 0 0 12px var(--seaglass); }
[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 15px; }
.hero-3d h1 { font: 700 clamp(46px, min(6.4vw, 9.6vh), 96px)/.97 var(--sans); letter-spacing: -.04em; margin: 18px 0 22px; color: #fbf7ef; }
[lang="ar"] .hero-3d h1 { font-family: var(--display); letter-spacing: 0; line-height: 1.2; font-size: clamp(42px, min(5.8vw, 9vh), 80px); }
.hero-3d .lede { color: var(--on-dark-soft); max-width: 31ch; font-size: clamp(18px, 1.6vw, 21px); margin: 0 0 32px; }
.hero-3d .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.hero-3d .cta .link-arrow { color: var(--seaglass); }
.hero-3d .small { margin: 20px 0 0; font-size: 14px; color: rgba(246,241,231,.58); }

.scene { position: relative; width: min(700px, 100%); aspect-ratio: 1 / .9; justify-self: center; }
html.js .hero-3d.pinned .scene { width: min(700px, 100%, calc((100vh - 290px) * 1.08)); }
.rig { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 40% 45%; }
.rig-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.floor { position: absolute; left: 4%; right: 0; bottom: 2%; height: 20%; background: radial-gradient(50% 50% at 50% 50%, rgba(45,212,191,.24), transparent 70%); filter: blur(10px); transform: rotateX(72deg); }
.device, .plane, .emblem { position: absolute; left: 21%; top: 5%; width: 36%; aspect-ratio: 640 / 1391; }
.device { transform-style: preserve-3d; border-radius: 15% / 7%; padding: 2.1%; background: linear-gradient(135deg, #3d4c4a 0%, #121a19 38%, #27322f 62%, #0b100f 100%); box-shadow: 0 60px 100px -34px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 3px rgba(0,0,0,.6); transform: translate3d(12%, 0, 0) rotateY(-5deg) rotateX(2deg); }
.device img { width: 100%; height: 100%; object-fit: cover; border-radius: 13% / 6%; }
.device::after { content: ""; position: absolute; inset: 2.1%; border-radius: 13% / 6%; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.14), rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06)); }
.device .key { position: absolute; left: -1.6%; width: 1.6%; border-radius: 2px 0 0 2px; background: #1c2524; }
.device .k1 { top: 17%; height: 4%; } .device .k2 { top: 24%; height: 7%; } .device .k3 { top: 33%; height: 7%; }
.plane { border-radius: 13% / 6%; transform-style: preserve-3d; opacity: .9; display: grid; place-items: center; will-change: transform, opacity;
  background: linear-gradient(150deg, rgba(153,246,228,.22), rgba(45,212,191,.07) 45%, rgba(13,148,136,.05) 70%, rgba(153,246,228,.16));
  border: 1.5px solid rgba(153,246,228,.55); box-shadow: inset 0 0 36px rgba(45,212,191,.14), inset 0 1px 0 rgba(255,255,255,.35), 0 40px 60px -40px rgba(0,0,0,.7); }
.plane svg { width: 42%; height: auto; color: #99f6e4; filter: drop-shadow(0 0 14px rgba(45,212,191,.35)); }
.plane .ptag { position: absolute; bottom: 104%; inset-inline-start: 14%; white-space: nowrap; font: 500 14px/1 var(--sans); color: #e6fffa; padding-bottom: 14px; opacity: 0; }
.plane .ptag::before { content: ""; position: absolute; inset-inline-start: 0; bottom: -42px; width: 1px; height: 52px; background: linear-gradient(rgba(153,246,228,.7), rgba(153,246,228,0)); }
.plane .ptag::after { content: ""; position: absolute; inset-inline-start: -3px; bottom: -44px; width: 7px; height: 7px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 10px #5eead4; }
.plane.p2 .ptag { bottom: 112%; } .plane.p2 .ptag::before { height: 64px; bottom: -54px; } .plane.p2 .ptag::after { bottom: -56px; }
.plane.p3 .ptag { bottom: 120%; } .plane.p3 .ptag::before { height: 76px; bottom: -66px; } .plane.p3 .ptag::after { bottom: -68px; }
.plane.p1 { transform: translate3d(17%, -1.5%, -28px) rotateY(-5deg); }
.plane.p2 { transform: translate3d(22%, -3%, -56px) rotateY(-5deg); }
.plane.p3 { transform: translate3d(27%, -4.5%, -84px) rotateY(-5deg); }
.emblem { display: grid; place-items: center; pointer-events: none; opacity: 0; }
.emblem svg { width: 46%; color: #5eead4; filter: drop-shadow(0 0 22px rgba(45,212,191,.7)); }
.pulse { position: absolute; left: 24%; top: 31%; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(45,212,191,.8); opacity: 0; pointer-events: none; }
.hero-3d { --dx: 12%; }
html[dir="rtl"] .hero-3d { --dx: -12%; }
.hero-3d.done .emblem { animation: emblem 2.2s cubic-bezier(.2,.7,.2,1) both; }
.hero-3d.done .pulse { animation: pulse-once 1.6s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes emblem { 0% { opacity: 0; transform: translate3d(var(--dx),0,40px) scale(.8); } 25% { opacity: 1; transform: translate3d(var(--dx),0,40px) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--dx),0,40px) scale(1.04); } }
@keyframes pulse-once { 0% { opacity: .9; transform: translate3d(var(--dx),0,30px) scale(.6); } 100% { opacity: 0; transform: translate3d(var(--dx),0,30px) scale(2.4); } }
/* mirrored layout for Arabic — never the hardware or the screens */
html[dir="rtl"] .device, html[dir="rtl"] .plane, html[dir="rtl"] .emblem { left: 43%; }
html[dir="rtl"] .pulse { left: 46%; }
html[dir="rtl"] .device { transform: translate3d(-12%, 0, 0) rotateY(5deg) rotateX(2deg); }
html[dir="rtl"] .plane.p1 { transform: translate3d(-17%, -1.5%, -28px) rotateY(5deg); }
html[dir="rtl"] .plane.p2 { transform: translate3d(-22%, -3%, -56px) rotateY(5deg); }
html[dir="rtl"] .plane.p3 { transform: translate3d(-27%, -4.5%, -84px) rotateY(5deg); }
/* with JS: start separated (same numbers as site.js p=0) */
html.js:not(.still) .plane, html.js:not(.still) .plane .ptag { opacity: 1; }
html.js:not(.still) .device { transform: translate3d(-30%, 0, 0) rotateY(-26deg) rotateX(3deg); }
html.js:not(.still) .plane.p1 { transform: translate3d(32%, 0, 0) rotateY(-26deg); }
html.js:not(.still) .plane.p2 { transform: translate3d(74%, 0, 0) rotateY(-26deg); }
html.js:not(.still) .plane.p3 { transform: translate3d(116%, 0, 0) rotateY(-26deg); }
html.js[dir="rtl"]:not(.still) .device { transform: translate3d(30%, 0, 0) rotateY(26deg) rotateX(3deg); }
html.js[dir="rtl"]:not(.still) .plane.p1 { transform: translate3d(-32%, 0, 0) rotateY(26deg); }
html.js[dir="rtl"]:not(.still) .plane.p2 { transform: translate3d(-74%, 0, 0) rotateY(26deg); }
html.js[dir="rtl"]:not(.still) .plane.p3 { transform: translate3d(-116%, 0, 0) rotateY(26deg); }
html.still .hero-3d .emblem, html.still .hero-3d .pulse { animation: none !important; opacity: 0 !important; }

.rail { list-style: none; margin: 34px auto 0; padding: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; border-top: 1px solid rgba(246,241,231,.14); }
.rail li { display: flex; gap: 14px; opacity: .5; transition: opacity .45s; }
.rail li.on, html:not(.js) .rail li, html.still .rail li { opacity: 1; }
.rail .n { font: 500 15px/1.65 var(--sans); color: var(--seaglass); }
.rail b { display: block; font-size: 18px; font-weight: 600; color: #fbf7ef; }
.rail p { margin: 4px 0 0; font-size: 14px; color: rgba(246,241,231,.66); }
.scroll-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 13px; color: rgba(246,241,231,.5); transition: opacity .3s; white-space: nowrap; }
.scroll-hint::after { content: " ↓"; }
html:not(.js) .scroll-hint, html.still .scroll-hint, .hero-3d:not(.pinned) .scroll-hint { display: none; }

@media (max-width: 859px) {
  .hero-3d .stage { padding: 104px 0 40px; }
  .scene { width: min(460px, 100%); aspect-ratio: 1 / 1.02; margin-top: 10px; }
  .device, .plane, .emblem { left: 29%; width: 40%; top: 7%; }
  .pulse { left: 33%; top: 33%; }
  .plane .ptag { display: none; }
  .rail { grid-template-columns: 1fr; gap: 16px; margin-top: 18px; }
  .rail li { opacity: 1; }
  html[dir="rtl"] .device, html[dir="rtl"] .plane, html[dir="rtl"] .emblem { left: 31%; }
  html[dir="rtl"] .pulse { left: 34%; }
  html.js:not(.still) .device { transform: translate3d(-24%, 0, 0) rotateY(-26deg) rotateX(3deg); }
  html.js:not(.still) .plane.p1 { transform: translate3d(34%, 0, 0) rotateY(-26deg); }
  html.js:not(.still) .plane.p2 { transform: translate3d(64%, 0, 0) rotateY(-26deg); }
  html.js:not(.still) .plane.p3 { transform: translate3d(94%, 0, 0) rotateY(-26deg); }
  html.js[dir="rtl"]:not(.still) .device { transform: translate3d(24%, 0, 0) rotateY(26deg) rotateX(3deg); }
  html.js[dir="rtl"]:not(.still) .plane.p1 { transform: translate3d(-34%, 0, 0) rotateY(26deg); }
  html.js[dir="rtl"]:not(.still) .plane.p2 { transform: translate3d(-64%, 0, 0) rotateY(26deg); }
  html.js[dir="rtl"]:not(.still) .plane.p3 { transform: translate3d(-94%, 0, 0) rotateY(26deg); }
}

/* =====================================================================
   DEMO — from distraction to calm (labelled demo)
   ===================================================================== */
.demo-sec { padding-top: 40px; background: linear-gradient(var(--evergreen), var(--evergreen-2)); }
.demo { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.tries { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tries button { font: 500 14px var(--sans); color: var(--on-dark); background: var(--glass); border: 1px solid var(--glass-line); border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: border-color .2s, background .2s; }
.tries button:hover { border-color: var(--seaglass); background: rgba(45,212,191,.08); }
.browser { border-radius: 28px; overflow: hidden; background: #0c2724; border: 1px solid var(--glass-line); box-shadow: 0 50px 90px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); }
.browser form { display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--glass-line); background: rgba(255,255,255,.03); }
.browser input { flex: 1; min-width: 0; font: 500 17px var(--sans); color: var(--on-dark); background: rgba(0,0,0,.28); border: 1px solid var(--glass-line); border-radius: 14px; padding: 13px 16px; }
.browser input::placeholder { color: rgba(246,241,231,.4); }
.browser button[type=submit] { font: 700 16px var(--sans); color: #032b27; background: var(--seaglass); border: 0; border-radius: 14px; padding: 0 22px; cursor: pointer; }
.screen { position: relative; min-height: 360px; display: grid; place-items: center; padding: 32px; text-align: center; overflow: hidden; isolation: isolate; }
.screen > .idle, .screen > .blocked { grid-area: 1 / 1; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .5s; }
.noise { position: absolute; inset: 0; z-index: -1; transition: opacity .7s ease; }
.noise span { position: absolute; border-radius: 18px; opacity: .85; animation: drift 9s ease-in-out infinite alternate; }
.noise span:nth-child(1) { left: 6%; top: 10%; width: 38%; height: 30%; background: linear-gradient(135deg, #f97316, #db2777); }
.noise span:nth-child(2) { right: 7%; top: 14%; width: 30%; height: 22%; background: linear-gradient(135deg, #6366f1, #06b6d4); animation-delay: -2s; }
.noise span:nth-child(3) { left: 14%; bottom: 12%; width: 26%; height: 26%; background: linear-gradient(135deg, #eab308, #f43f5e); animation-delay: -4s; }
.noise span:nth-child(4) { right: 12%; bottom: 10%; width: 36%; height: 30%; background: linear-gradient(135deg, #ec4899, #8b5cf6); animation-delay: -6s; }
.noise span:nth-child(5) { left: 40%; top: 40%; width: 20%; height: 16%; background: linear-gradient(135deg, #22c55e, #0ea5e9); animation-delay: -3s; }
@keyframes drift { to { transform: translate(10px, -8px) rotate(2deg); } }
.screen .idle { margin: 0; padding: 10px 16px; border-radius: 12px; background: rgba(7,26,24,.8); color: var(--on-dark); font-weight: 600; }
.screen .blocked { opacity: 0; visibility: hidden; transform: translateY(12px); }
.screen.is-blocked .noise { opacity: 0; }
.screen.is-blocked .idle { opacity: 0; visibility: hidden; }
.screen.is-blocked .blocked { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease .15s, transform .6s cubic-bezier(.2,.7,.2,1) .15s, visibility 0s; }
.ring-close { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; border: 2px solid rgba(45,212,191,.6); opacity: 0; pointer-events: none; z-index: -1; }
.screen.is-blocked .ring-close { animation: close-in 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes close-in { 0% { opacity: 0; transform: scale(1.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(.4); } }
.blocked .shield { width: 72px; height: 72px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 22px; background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.4); color: var(--seaglass); }
.blocked .shield svg { width: 38px; }
.blocked h3 { margin: 0 0 8px; font-size: 22px; color: var(--on-dark); }
.blocked p { margin: 0 auto; color: var(--on-dark-soft); max-width: 34ch; }
.blocked .by { display: inline-block; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--seaglass); border: 1px solid rgba(45,212,191,.35); border-radius: 999px; padding: 6px 12px; }
.demo-note { margin: 14px 4px 0; font-size: 13px; color: rgba(246,241,231,.5); }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; gap: 36px; } .screen { min-height: 300px; } }

/* =====================================================================
   RESCUE — editorial moment on warm paper, real screenshot
   ===================================================================== */
.rescue { overflow: hidden; }
.rescue .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.rescue blockquote { margin: 0 0 28px; font: 400 clamp(44px, 6.4vw, 96px)/.98 var(--display); letter-spacing: -.03em; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 60; }
.rescue blockquote em { font-style: italic; color: var(--teal-deep); }
[lang="ar"] .rescue blockquote { line-height: 1.3; letter-spacing: 0; font-weight: 600; font-size: clamp(38px, 5.2vw, 76px); }
[lang="ar"] .rescue blockquote em { font-style: normal; }
.rescue .facts { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rescue .facts li { font-size: 14px; font-weight: 600; color: var(--teal-deep); background: rgba(13,148,136,.09); border: 1px solid rgba(13,148,136,.2); border-radius: 999px; padding: 8px 14px; }
.breath { position: relative; justify-self: center; width: min(360px, 100%); }
.breath .circle { position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.82);
  background: radial-gradient(circle, rgba(45,212,191,.35) 0%, rgba(45,212,191,.12) 45%, transparent 70%); animation: breathe-app 10s ease-in-out infinite; }
@keyframes breathe-app { 0% { transform: translate(-50%,-50%) scale(.82); } 40% { transform: translate(-50%,-50%) scale(1.05); } 100% { transform: translate(-50%,-50%) scale(.82); } }
.phone-frame { position: relative; border-radius: 44px; padding: 9px; background: linear-gradient(135deg, #3d4c4a, #0f1716 45%, #27322f); box-shadow: 0 50px 90px -40px rgba(11,47,44,.55); }
.phone-frame img { border-radius: 36px; width: 100%; height: auto; }
@media (max-width: 900px) { .rescue .wrap { grid-template-columns: 1fr; gap: 48px; } .breath { width: min(300px, 78%); } }

/* ---------- how it works ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--paper-line); }
.steps li { padding: 34px 32px 8px 0; border-inline-end: 1px solid var(--paper-line); }
.steps li:last-child { border-inline-end: 0; }
.steps li + li { padding-inline-start: 32px; }
.steps .num { font: 400 72px/1 var(--display); color: var(--teal); display: block; margin-bottom: 18px; font-variation-settings: "opsz" 144; }
[lang="ar"] .steps .num { font-weight: 500; }
.steps h3 { margin: 0 0 8px; font-size: 21px; }
.steps p { margin: 0; color: var(--ink-soft); }
.steps .path { display: inline-block; margin-top: 14px; font-size: 14px; line-height: 1.5; background: #fff; border: 1px solid var(--paper-line); border-radius: 12px; padding: 8px 12px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } .steps li, .steps li + li { padding: 26px 0; border-inline-end: 0; border-bottom: 1px solid var(--paper-line); } .steps .num { font-size: 56px; } }

/* =====================================================================
   BENTO — features with real screens on dark glass
   ===================================================================== */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 18px;
  grid-template-areas: "a a b c" "a a d c" "e f g h"; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius); padding: 28px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; flex-direction: column; transition: border-color .3s, transform .3s; }
.tile:hover { border-color: rgba(45,212,191,.4); }
.tile h3 { margin: 0 0 8px; font-size: 20px; color: var(--on-dark); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tile p { margin: 0; color: var(--on-dark-soft); font-size: 15px; }
.tile .ic { width: 40px; height: 40px; margin-bottom: 18px; color: var(--seaglass); }
.pro, .free { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 5px 9px; }
[lang="ar"] .pro, [lang="ar"] .free { letter-spacing: 0; font-size: 12px; }
.pro { color: #fed7aa; background: rgba(249,115,22,.16); border: 1px solid rgba(249,115,22,.35); }
.free { color: var(--mint); background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.35); }
.t-a { grid-area: a; background: radial-gradient(90% 70% at 70% 100%, rgba(45,212,191,.16), transparent 70%), var(--glass); }
.t-b { grid-area: b; } .t-c { grid-area: c; } .t-d { grid-area: d; } .t-e { grid-area: e; } .t-f { grid-area: f; } .t-g { grid-area: g; } .t-h { grid-area: h; }
.tile .shot { margin-top: auto; padding-top: 26px; }
.tile .shot .phone-frame { width: min(300px, 70%); margin-inline: auto; border-radius: 40px 40px 0 0; padding-bottom: 0; margin-bottom: -28px; }
.tile .shot .phone-frame img { border-radius: 32px 32px 0 0; }
.t-a .shot .phone-frame { width: min(330px, 62%); }
.t-c .shot .phone-frame { width: min(200px, 86%); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas: "a a" "b c" "d c" "e f" "g h"; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h"; } .t-c .shot .phone-frame { width: min(220px, 64%); } }

/* ---------- reasons (audience routes) ---------- */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reason { position: relative; border-radius: var(--radius); padding: 34px 30px 30px; background: #fffdf8; border: 1px solid var(--paper-line); display: flex; flex-direction: column; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.reason:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(11,47,44,.3); }
.reason::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--teal)); }
.reason .ic { width: 46px; height: 46px; color: var(--c, var(--teal)); margin-bottom: 20px; }
.reason h3 { font: 500 30px/1.1 var(--display); margin: 0 0 14px; letter-spacing: -.01em; }
[lang="ar"] .reason h3 { font-weight: 600; font-size: 26px; line-height: 1.4; }
.reason ul { margin: 0 0 26px; padding-inline-start: 18px; color: var(--ink-soft); font-size: 15px; }
.reason li { margin: 7px 0; }
.reason .go { margin-top: auto; align-self: flex-start; }
.reason.quit { --c: #0d9488; } .reason.parents { --c: #2563eb; } .reason.focus { --c: #c2410c; }
@media (max-width: 960px) { .reasons { grid-template-columns: 1fr; } }

/* ---------- reviews ---------- */
.quotes { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; align-items: stretch; }
.quote { margin: 0; border-radius: var(--radius); padding: 30px; background: #fffdf8; border: 1px solid var(--paper-line); display: flex; flex-direction: column; }
.quote:first-child { background: var(--ink); color: var(--warm); border-color: var(--ink); }
.quote .stars { color: #f59e0b; letter-spacing: 3px; font-size: 15px; }
.quote blockquote { margin: 14px 0 20px; font: 400 22px/1.35 var(--display); font-variation-settings: "opsz" 40; }
.quote:first-child blockquote { font-size: 27px; }
[lang="ar"] .quote blockquote { font-size: 19px; line-height: 1.75; }
.quote figcaption { margin-top: auto; font-size: 13px; color: var(--ink-soft); }
.quote:first-child figcaption { color: rgba(246,241,231,.65); }
@media (max-width: 960px) { .quotes { grid-template-columns: 1fr; } }

/* ---------- trust: privacy + honest scope ---------- */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { border-radius: var(--radius); padding: 38px 36px; }
.panel h3 { font: 500 30px/1.15 var(--display); margin: 0 0 18px; }
[lang="ar"] .panel h3 { font-weight: 600; line-height: 1.45; font-size: 26px; }
.panel ul, .panel ol { margin: 0; padding-inline-start: 20px; }
.panel li { margin: 10px 0; }
.panel .note { margin: 22px 0 0; font-size: 14px; }
.panel.private { background: linear-gradient(160deg, rgba(45,212,191,.14), rgba(45,212,191,.04)); border: 1px solid var(--glass-line); color: var(--on-dark); }
.panel.private li, .panel.private .note { color: var(--on-dark-soft); }
.panel.private b { color: var(--on-dark); }
.panel.private a { color: var(--seaglass); }
.panel.honest { background: var(--warm); color: var(--ink); }
.panel.honest h3 { color: #9a3412; }
.panel.honest ol { margin-top: 12px; }
.panel.honest h4 { margin: 26px 0 4px; font-size: 16px; }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } .panel { padding: 30px 24px; } }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; }
.plan { border-radius: var(--radius); padding: 34px; background: #fffdf8; border: 1px solid var(--paper-line); }
.plan.pro-plan { background: var(--ink); color: var(--warm); border-color: var(--ink); }
.plan h3 { margin: 0 0 6px; font-size: 22px; }
.plan .price { font: 400 48px/1 var(--display); margin: 10px 0 20px; }
[lang="ar"] .plan .price { font: 600 36px/1.2 var(--sans); }
.plan ul { margin: 0; padding-inline-start: 20px; color: var(--ink-soft); }
.plan.pro-plan ul { color: rgba(246,241,231,.75); }
.plan li { margin: 7px 0; }
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 20px; }
.prices div { border-radius: 16px; padding: 14px 10px; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(246,241,231,.14); }
.prices b { display: block; font-size: 22px; }
.prices span { font-size: 13px; color: rgba(246,241,231,.7); }
.plan .note { font-size: 13px; margin: 18px 0 0; color: rgba(246,241,231,.6); }
@media (max-width: 800px) { .plans { grid-template-columns: 1fr; } .prices { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 18px; display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 28px/1 var(--display); color: var(--teal); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--ink-soft); }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- final CTA + footer ---------- */
.final { text-align: center; overflow: hidden; background: radial-gradient(50% 70% at 50% 110%, rgba(45,212,191,.25), transparent 70%), var(--evergreen); }
.final h2 { color: #fbf7ef; }
.final .lead { margin: 0 auto 34px; }
.final .mark { width: 76px; height: 76px; margin: 0 auto 28px; border-radius: 20px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 20px 60px -10px rgba(45,212,191,.6); }
.final .small { margin: 18px 0 0; font-size: 14px; color: rgba(246,241,231,.55); }
footer { background: var(--evergreen); color: rgba(246,241,231,.6); font-size: 14px; padding: 34px 0 44px; border-top: 1px solid rgba(246,241,231,.08); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }
footer a { color: rgba(246,241,231,.85); }
footer .spacer { margin-inline-start: auto; }

/* ---------- sticky mobile download bar ---------- */
.sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 18px; background: rgba(7,26,24,.92); color: var(--on-dark); backdrop-filter: blur(12px); border: 1px solid var(--glass-line); box-shadow: 0 16px 40px -12px rgba(0,0,0,.6); transform: translateY(150%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sticky img { width: 36px; height: 36px; border-radius: 9px; }
.sticky span { font-size: 14px; line-height: 1.25; } .sticky span b { display: block; font-size: 15px; }
.sticky .btn { margin-inline-start: auto; min-height: 42px; padding: 0 18px; font-size: 15px; }
.sticky.show { transform: none; }
@media (max-width: 760px) { .sticky { display: flex; } footer { padding-bottom: 110px; } }

/* ---------- reveal on scroll (JS only; reduced-motion shows everything) ---------- */
html.js:not(.still) .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
html.js:not(.still) .reveal.in { opacity: 1; transform: none; }
.rise { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .26s; } .rise.d4 { animation-delay: .36s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 760px) { section { padding: 84px 0; } .head { margin-bottom: 40px; } }

/* ---------- guide / article pages ---------- */
.article-hero { color: var(--on-dark); background: radial-gradient(60% 80% at 80% 0%, rgba(13,148,136,.3), transparent 70%), var(--evergreen); padding: 132px 0 64px; }
.article-hero h1 { font: 500 clamp(38px, 5vw, 64px)/1.05 var(--display); letter-spacing: -.02em; margin: 12px 0 18px; max-width: 22ch; }
[lang="ar"] .article-hero h1 { font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.article-hero h1 em { font-style: italic; color: var(--seaglass); }
[lang="ar"] .article-hero h1 em { font-style: normal; }
.crumbs { font-size: 14px; margin: 0; color: var(--on-dark-soft); } .crumbs a { color: var(--seaglass); }
.meta { font-size: 14px; color: var(--on-dark-soft); margin: 0; }
.article-body { background: var(--warm); padding: 56px 0 96px; }
.article { max-width: 760px; }
.article h2 { font-size: clamp(28px, 3.4vw, 38px); margin-top: 52px; }
.article h3 { font-size: 19px; margin: 28px 0 8px; }
.article p, .article li { color: #22433f; }
.article ol, .article ul { padding-inline-start: 22px; }
.article li { margin: 8px 0; }
.article a { color: var(--teal-deep); }
.article .tldr { background: #fffdf8; border: 1px solid var(--paper-line); border-inline-start: 5px solid var(--teal); border-radius: 18px; padding: 20px 24px; }
.article .disclose { font-size: 15px; color: var(--ink-soft); background: var(--warm-2); border-radius: 12px; padding: 12px 16px; }
.article figure { margin: 28px 0; }
.article figure .phone-frame { width: min(280px, 72%); margin-inline: auto; }
.article figcaption { text-align: center; font-size: 14px; color: var(--ink-soft); margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .hero-3d.pinned { height: auto; }
  html.js .hero-3d.pinned .stage { position: relative; height: auto; }
}

/* =====================================================================
   PRODUCT STORIES — asymmetric, oversize type, one deliberate phone each
   ===================================================================== */
.warm .kicker, .warm-2 .kicker, .mist .kicker { color: var(--teal-deep); }   /* 6.97:1 on warm paper */
.mist { background: radial-gradient(70% 60% at 50% 40%, #eefaf6, #dcefe9 70%); color: var(--ink); }
.story { overflow: hidden; }
.story h2.big { font-size: clamp(48px, 7.4vw, 112px); line-height: .95; letter-spacing: -.035em; margin-bottom: 26px; }
[lang="ar"] .story h2.big { font-size: clamp(40px, 5.6vw, 80px); line-height: 1.25; letter-spacing: 0; }
.story h2.big em { font-style: italic; color: var(--teal-deep); }
.dark .story h2.big em, .story.dark h2.big em { color: var(--seaglass); }
[lang="ar"] .story h2.big em { font-style: normal; }
.facts-row { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }
.facts-row li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.facts-row .ic { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--teal-deep); background: rgba(13,148,136,.1); }
.dark .facts-row .ic { color: var(--seaglass); background: rgba(45,212,191,.1); }
.facts-row b { display: block; }
.facts-row span { color: var(--ink-soft); font-size: 15px; }
.dark .facts-row span { color: var(--on-dark-soft); }
.dark .pro, .facts-row .pro { vertical-align: 2px; }
.warm .pro { color: #9a3412; background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.3); }
.warm .free { color: var(--teal-deep); background: rgba(13,148,136,.1); border-color: rgba(13,148,136,.3); }

/* story 1 — boundaries: one large phone, site chips drifting around it */
.bound .wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; align-items: center; }
.bound-stage { position: relative; min-height: 640px; display: grid; place-items: center; }
.bound-stage::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(13,148,136,.16), transparent 68%); }
.bound-stage .phone-frame { position: relative; width: min(330px, 70%); transform: rotate(-3deg); }
[dir="rtl"] .bound-stage .phone-frame { transform: rotate(3deg); }
.chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font: 600 15px/1 var(--sans); color: var(--ink); background: #fffdf8; border: 1px solid var(--paper-line); border-radius: 999px; padding: 11px 16px; box-shadow: 0 18px 30px -18px rgba(11,47,44,.4); animation: bob 7s ease-in-out infinite; }
.chip s { text-decoration-color: #dc2626; text-decoration-thickness: 2px; color: #7f1d1d; font-weight: 500; }
.chip .x { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fee2e2; color: #b91c1c; font-size: 12px; }
.chip .ok { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #ccfbf1; color: #0f766e; font-size: 12px; }
.chip.cat { background: var(--ink); color: var(--warm); border-color: var(--ink); }
.chip.cat .on { width: 30px; height: 18px; border-radius: 999px; background: var(--seaglass); position: relative; }
.chip.cat .on::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.chip.k1 { top: 12%; left: 2%; } .chip.k2 { top: 30%; right: 0; animation-delay: -2s; } .chip.k3 { bottom: 26%; left: 0; animation-delay: -4s; }
.chip.k4 { bottom: 9%; right: 6%; animation-delay: -1s; } .chip.k5 { top: 4%; right: 16%; animation-delay: -5s; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@media (max-width: 960px) { .bound .wrap { grid-template-columns: 1fr; } .bound-stage { min-height: 560px; } }
@media (max-width: 520px) { .bound-stage { min-height: 480px; } .chip { font-size: 13px; padding: 9px 12px; } .chip.k5 { display: none; } }

/* story 2 — focus hours: a day timeline + the real settings screen */
.hours .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.day { margin-top: 44px; }
.day .track { position: relative; height: 64px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line); overflow: hidden; }
.day .blk { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-inline: 12px; font: 600 13px/1.2 var(--sans); color: #032b27; background: linear-gradient(180deg, #6ff0db, var(--seaglass)); white-space: nowrap; overflow: hidden; }
.day .blk.sleep { left: 0; width: 29.2%; background: linear-gradient(180deg, #5eead4, #14b8a6); }
.day .blk.sleep2 { right: 0; width: 4.2%; background: linear-gradient(180deg, #5eead4, #14b8a6); padding: 0; }
.day .blk.work { left: 37.5%; width: 16.7%; }
.day .now { position: absolute; top: -6px; bottom: -6px; width: 2px; background: #fbf7ef; left: 0; box-shadow: 0 0 12px rgba(255,255,255,.7); animation: now 24s linear infinite; }
.day .now::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fbf7ef; }
@keyframes now { to { left: 100%; } }
.day .scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: rgba(246,241,231,.5); direction: ltr; }
.day .legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 14px; color: var(--on-dark-soft); }
.day .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--seaglass); margin-inline-end: 6px; vertical-align: -1px; }
.day .legend i.s { background: #14b8a6; }
.delay { display: inline-flex; margin-top: 30px; padding: 5px; gap: 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--glass-line); font-size: 14px; }
.delay span { padding: 8px 14px; border-radius: 10px; color: var(--on-dark-soft); }
.delay span.sel { background: var(--seaglass); color: #032b27; font-weight: 700; }
.delay-cap { display: block; margin-top: 8px; font-size: 13px; color: rgba(246,241,231,.5); }
.hours-phone { position: relative; justify-self: center; width: min(330px, 80%); }
.hours-phone::before { content: ""; position: absolute; inset: -18% -30%; background: radial-gradient(circle, rgba(45,212,191,.22), transparent 62%); }
.hours-phone .phone-frame { position: relative; transform: rotate(3deg); }
[dir="rtl"] .hours-phone .phone-frame { transform: rotate(-3deg); }
@media (max-width: 960px) { .hours .wrap { grid-template-columns: 1fr; gap: 48px; } .hours-phone { width: min(290px, 74%); } }

/* story 3 — the hard moment: a quiet full-width breathing scene */
.moment { text-align: center; padding: 140px 0 0; overflow: hidden; }
.moment .wrap { position: relative; }
.moment .circle { position: absolute; left: 50%; top: 42%; width: min(1100px, 150vw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.82); background: radial-gradient(circle, rgba(45,212,191,.30) 0%, rgba(45,212,191,.12) 40%, transparent 68%); animation: breathe-app 10s ease-in-out infinite; pointer-events: none; }
@keyframes breathe-app { 0% { transform: translate(-50%,-50%) scale(.82); } 40% { transform: translate(-50%,-50%) scale(1.02); } 100% { transform: translate(-50%,-50%) scale(.82); } }
.moment .cue { position: relative; margin: 0 0 26px; font: 600 14px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--teal-deep); }
[lang="ar"] .moment .cue { letter-spacing: 0; font-size: 16px; }
.moment blockquote { position: relative; margin: 0 auto 28px; max-width: 14ch; font: 400 clamp(52px, 8.4vw, 128px)/.95 var(--display); letter-spacing: -.035em; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 70; }
.moment blockquote em { font-style: italic; color: var(--teal-deep); }
[lang="ar"] .moment blockquote { max-width: 16ch; font-weight: 600; line-height: 1.3; letter-spacing: 0; font-size: clamp(44px, 6.4vw, 92px); }
[lang="ar"] .moment blockquote em { font-style: normal; }
.moment .lead { position: relative; margin: 0 auto; }
.moment .facts { position: relative; list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.moment .facts li { font-size: 14px; font-weight: 600; color: var(--teal-deep); background: rgba(255,255,255,.6); border: 1px solid rgba(13,148,136,.22); border-radius: 999px; padding: 8px 14px; }
.moment .crop { position: relative; width: min(340px, 76%); height: min(430px, 90vw); margin: 64px auto 0; overflow: hidden; }   /* deliberate mask: the top of the phone rises from the edge */
.moment .crop .phone-frame { border-radius: 44px 44px 0 0; box-shadow: 0 -20px 80px -30px rgba(11,47,44,.35); }

/* QA round 3 */
.device, .plane, .emblem { top: 12%; }                       /* room for the plane labels under the header */
.plane .ptag { bottom: 102%; } .plane.p2 .ptag { bottom: 107%; } .plane.p3 .ptag { bottom: 112%; }
.device { aspect-ratio: auto; }                              /* the screenshot sets the height: exact 640:1391, no crop */
.device img { height: auto; aspect-ratio: 640 / 1391; object-fit: fill; }
.pulse { top: 38%; }
@media (max-width: 859px) { .device, .plane, .emblem { top: 8%; } .pulse { top: 34%; } }
.final .lead { color: var(--on-dark-soft); }
.bound { padding-top: 150px; }
@media (max-width: 760px) { .bound { padding-top: 96px; } }
figure.day { margin-inline: 0; }
@media (max-width: 600px) { .day .blk { color: transparent; } }   /* bars keep their colour; the legend gives the exact hours */

/* Reduced motion, independent of script events: force the assembled, still picture. */
@media (prefers-reduced-motion: reduce) {
  .hero-3d .device { transform: translate3d(12%, 0, 0) rotateY(-5deg) rotateX(2deg) !important; }
  .hero-3d .plane { opacity: .9 !important; }
  .hero-3d .plane.p1 { transform: translate3d(17%, -1.5%, -28px) rotateY(-5deg) !important; }
  .hero-3d .plane.p2 { transform: translate3d(22%, -3%, -56px) rotateY(-5deg) !important; }
  .hero-3d .plane.p3 { transform: translate3d(27%, -4.5%, -84px) rotateY(-5deg) !important; }
  html[dir="rtl"] .hero-3d .device { transform: translate3d(-12%, 0, 0) rotateY(5deg) rotateX(2deg) !important; }
  html[dir="rtl"] .hero-3d .plane.p1 { transform: translate3d(-17%, -1.5%, -28px) rotateY(5deg) !important; }
  html[dir="rtl"] .hero-3d .plane.p2 { transform: translate3d(-22%, -3%, -56px) rotateY(5deg) !important; }
  html[dir="rtl"] .hero-3d .plane.p3 { transform: translate3d(-27%, -4.5%, -84px) rotateY(5deg) !important; }
  .hero-3d .plane .ptag, .hero-3d .emblem, .hero-3d .pulse, .scroll-hint { opacity: 0 !important; }
  .hero-3d .rig-inner { transform: none !important; }
  .hero-3d .rail li { opacity: 1 !important; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  .noise span, .chip, .day .now, .moment .circle { animation: none !important; }
}