/* The Cockpit website, v2 (D-293): one living sky behind every page. It turns from night to dawn to day to sunset as
   you scroll (assets/motion.js); desert dunes and a palm (nakhla) drift in parallax at the bottom. Brand (brand\BRAND.md):
   lime for actions only, 45-degree cut corners, no gradients on the interface itself (the sky is scenery, not chrome).
   Contrast: in dark mode every sky phase stays dark (light text throughout); in light mode the cycle is soft and bright
   (dark text throughout), so text never sits on a sky it cannot be read on. Without script the page shows a still sky
   and every word; with "reduce motion" nothing moves. */
@font-face { font-family: 'Chakra Petch'; src: url(fonts/ChakraPetch-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url(fonts/ChakraPetch-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/Inter-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
/* Arabic (D-300): Readex Pro, one variable file (weights 300 to 700) for headlines and text */
@font-face { font-family: 'Readex'; src: url(fonts/ReadexPro-wght.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

/* ---- tokens: light (soft, bright cycle; dark text) ---- */
:root {
  --ink: #15171A; --ink-2: #45484E; --link: #4E7A00;
  --surface: rgba(255, 255, 255, .86); --surface-2: rgba(255, 255, 255, .62); --line: rgba(21, 23, 26, .12);
  --card-ink: #15171A; --card-muted: #4A4D53;
  --lime: #B8F03C; --lime-2: #C9F566; --amber: #FFB020; --night0: #0F1012; --night1: #1A1C1F; --night2: #24272B;
  --n1: #CFCBEF; --n2: #EEE9F7; --d1: #F7D3C4; --d2: #FBE5DA; --d3: #FFF3EA;
  --y1: #B7DDF3; --y2: #DCEFFA; --y3: #F6FBFD; --s1: #F3B98F; --s2: #F8D5B8; --s3: #FCE9DA;
  --dune-far: rgba(225, 196, 160, .55); --dune-mid: rgba(206, 168, 122, .62); --dune-near: #DDBE92; --palm: #8C6A45;
  --star: rgba(255, 255, 255, .0); --moon: rgba(255, 255, 255, .7); --sun: #FFD9A0;
  --display: 'Chakra Petch', 'Readex', sans-serif; --body: 'Inter', 'Readex', sans-serif;
  --m: clamp(16px, 4vw, 56px); --sec: clamp(72px, 9vw, 150px); --cut: 12px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
/* ---- dark (the night sky; light text) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F3F3EF; --ink-2: #BEC1C9; --link: #B8F03C;
    --surface: rgba(12, 14, 22, .78); --surface-2: rgba(12, 14, 22, .5); --line: rgba(255, 255, 255, .12);
    --card-ink: #F3F3EF; --card-muted: #B7BAC2;
    --n1: #03050C; --n2: #0B1533; --d1: #0F1230; --d2: #2E2550; --d3: #5E3450;
    --y1: #143A5C; --y2: #1A4866; --y3: #1B4D69; --s1: #120C24; --s2: #3E1D36; --s3: #6E331E;
    --dune-far: rgba(27, 22, 37, .62); --dune-mid: rgba(17, 14, 24, .86); --dune-near: #07070B; --palm: #07070B;
    --star: rgba(255, 255, 255, .9); --moon: rgba(242, 240, 228, .92); --sun: #FF9A4D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #F3F3EF; --ink-2: #BEC1C9; --link: #B8F03C;
  --surface: rgba(12, 14, 22, .78); --surface-2: rgba(12, 14, 22, .5); --line: rgba(255, 255, 255, .12);
  --card-ink: #F3F3EF; --card-muted: #B7BAC2;
  --n1: #03050C; --n2: #0B1533; --d1: #0F1230; --d2: #2E2550; --d3: #5E3450;
  --y1: #143A5C; --y2: #1A4866; --y3: #1B4D69; --s1: #120C24; --s2: #3E1D36; --s3: #6E331E;
  --dune-far: rgba(27, 22, 37, .62); --dune-mid: rgba(17, 14, 24, .86); --dune-near: #07070B; --palm: #07070B;
  --star: rgba(255, 255, 255, .9); --moon: rgba(242, 240, 228, .92); --sun: #FF9A4D;
  color-scheme: dark;
}
:root[dir="rtl"] { --display: 'Readex', sans-serif; --body: 'Readex', sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 400 18px/1.6 var(--body); color: var(--ink); background: var(--n2); overflow-x: clip; min-height: 100vh; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 2px; }
.cut:focus-visible, .cut :focus-visible, .btn:focus-visible { outline-offset: -4px; outline-color: #15171A; box-shadow: inset 0 0 0 7px var(--lime); }
::selection { background: var(--lime); color: #15171A; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--lime); color: #15171A; padding: 10px 14px; z-index: 60; }
.skip:focus { top: 8px; }
.wrap { padding-inline: var(--m); max-width: 1680px; margin-inline: auto; }
.cut { clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut)); }
main, .foot { position: relative; z-index: 1; }

/* ---- the sky: fixed behind everything; motion.js sets the phases' opacity and the parallax ---- */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky .tint { position: absolute; inset: 0; opacity: 0; will-change: opacity; transform: translateZ(0); }
.sky .night { background: linear-gradient(180deg, var(--n1) 0%, var(--n2) 100%); opacity: 1; }
.sky .dawn { background: linear-gradient(180deg, var(--d1) 0%, var(--d2) 55%, var(--d3) 100%); }
.sky .day { background: linear-gradient(180deg, var(--y1) 0%, var(--y2) 60%, var(--y3) 100%); }
.sky .dusk { background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 50%, var(--s3) 100%); }
/* a page whose sky starts later shows that phase without script */
body[data-sky^="dawn"] .sky .night, body[data-sky^="day"] .sky .night, body[data-sky^="dusk"] .sky .night { opacity: 0; }
body[data-sky^="dawn"] .sky .dawn, body[data-sky^="day"] .sky .day, body[data-sky^="dusk"] .sky .dusk { opacity: 1; }
.stars { position: absolute; inset: -5% 0 40% 0; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--star); }
.stars.twinkle { animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .35 } to { opacity: 1 } }
.moon { position: absolute; top: 12vh; inset-inline-end: 14vw; width: 64px; height: 64px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 60px 8px color-mix(in srgb, var(--moon) 35%, transparent); }
.moon { -webkit-mask: radial-gradient(circle at 18% 36%, transparent 27px, #000 28px); mask: radial-gradient(circle at 18% 36%, transparent 27px, #000 28px); }
:root[dir="rtl"] .moon { -webkit-mask-position: 0 0; transform: scaleX(-1); }
@media (max-width: 760px) { .moon { display: none; } }
.sun { position: absolute; left: 0; top: 0; width: 110px; height: 110px; margin: -55px 0 0 -55px; will-change: transform, opacity; border-radius: 50%; background: radial-gradient(circle, var(--sun) 0 34%, color-mix(in srgb, var(--sun) 35%, transparent) 36%, transparent 70%); opacity: 0; }
@media (max-width: 760px) { .sun { width: 76px; height: 76px; margin: -38px 0 0 -38px; } }
.dunes { position: absolute; inset: auto 0 0 0; height: 42vh; min-height: 220px; }
.dune { position: absolute; inset: auto -12% 0 -12%; width: 124%; }
.dune svg { display: block; width: 100%; height: 100%; }
.dune.far { height: 78%; fill: var(--dune-far); }
.dune.mid { height: 58%; fill: var(--dune-mid); }
.dune.near { height: 36%; fill: var(--dune-near); }
.palm { position: absolute; bottom: 62%; inset-inline-start: 84%; width: clamp(90px, 11vw, 190px); fill: var(--palm); }
.palm.small { inset-inline-start: 4%; bottom: 74%; width: clamp(50px, 5.5vw, 96px); opacity: .9; }
:root[dir="rtl"] .palm { transform: scaleX(-1); }
body[data-page="privacy"] .dunes, body[data-page="terms"] .dunes, body[data-page="delete-account"] .dunes { display: none; }

/* ---- the bar: floats, hides while you read down, returns when you scroll up ---- */
.bar-wrap { position: sticky; top: 0; z-index: 40; padding-top: 12px; transition: transform .45s var(--ease); }
.bar-wrap.away { transform: translateY(-120%); }
.bar { display: flex; align-items: center; gap: 22px; padding: 10px 12px 10px 18px; background: var(--surface); color: var(--card-ink); --cut: 12px; }
:root[dir="rtl"] .bar { padding: 10px 18px 10px 12px; }
@supports (backdrop-filter: blur(8px)) { @media (pointer: fine) { .bar { backdrop-filter: blur(14px) saturate(1.2); } } }
.mark { display: flex; align-items: center; gap: 10px; font: 700 22px/1 'Chakra Petch', sans-serif; text-decoration: none; letter-spacing: .02em; }
.mark img { width: 32px; height: 32px; }
.bar nav { display: flex; gap: 26px; margin-inline-start: auto; }
.bar nav a, .bar .lang { text-decoration: none; font-weight: 500; font-size: 16px; position: relative; padding-block: 6px; }
:root[dir="ltr"] .lang { font-family: system-ui, 'Segoe UI', sans-serif; } /* the one Arabic word on English pages must not pull the Arabic font */
.bar nav a::after, .bar .lang::after, .foot .links a::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: var(--from, left); transition: transform .35s var(--ease); }
:root[dir="rtl"] .bar nav a::after, :root[dir="rtl"] .bar .lang::after, :root[dir="rtl"] .foot .links a::after { --from: right; }
.bar nav a:hover::after, .bar .lang:hover::after, .bar nav a[aria-current="page"]::after, .foot .links a:hover::after { transform: scaleX(1); }
.theme { width: 42px; height: 42px; border: 0; background: var(--line); color: inherit; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.theme span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; position: relative; overflow: hidden; }
.theme span::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 50%; background: currentColor; }
:root[dir="rtl"] .theme span { transform: scaleX(-1); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; background: var(--lime); color: #15171A; font: 700 17px/1 var(--display); text-decoration: none; border: 0; cursor: pointer; --cut: 10px; transition: background .25s; will-change: transform; }
.btn:hover { background: var(--lime-2); }
.btn.ghost { background: var(--surface); color: var(--card-ink); }
.btn.ghost:hover { background: var(--card-ink); color: var(--surface); }
.bar .btn { min-height: 44px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
@media (max-width: 860px) {
  .bar nav, .bar .lang.wide { display: none; }
  .bar { gap: 10px; }
  .bar .theme { margin-inline-start: auto; }
}

/* ---- type ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
:root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3 { letter-spacing: 0; line-height: 1.32; }
.sec { padding-block: var(--sec) 0; }
.sec h2, .head h2 { font-size: clamp(40px, 5.6vw, 100px); }
:root[dir="rtl"] .sec h2, :root[dir="rtl"] .head h2 { font-size: clamp(36px, 4.8vw, 86px); }
.lead, .sec .head p, .sub { font-size: clamp(18px, 1.45vw, 22px); color: var(--ink); max-width: 34em; }
.muted, .demo-note, .soon { color: var(--ink-2); }
.demo-note { font-size: 15px; margin-top: 18px; }
.acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.split-line { display: block; padding-block: .08em .24em; margin-block: -.08em -.24em; } /* the reveal mask clips at the line box: room for the dots below the Arabic baseline (ي) and Latin descenders */
.ticks { display: grid; gap: 14px; margin-top: 26px; }
.ticks li { position: relative; padding-inline-start: 30px; max-width: 38em; }
.ticks li::before { content: ''; position: absolute; inset-inline-start: 0; top: .55em; width: 12px; height: 12px; background: var(--lime); clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }

/* ---- the panels over the sky ---- */
.panel { background: var(--surface); color: var(--card-ink); --cut: 18px; padding: clamp(24px, 3.2vw, 52px); }
:root:not([data-theme="dark"]) .panel, :root:not([data-theme="dark"]) .reqs li, :root:not([data-theme="dark"]) .apps li, :root:not([data-theme="dark"]) .faq details, :root:not([data-theme="dark"]) .legal-body, :root:not([data-theme="dark"]) .toc { filter: drop-shadow(0 18px 30px rgba(80, 60, 40, .12)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .reqs li, :root:not([data-theme="light"]) .apps li, :root:not([data-theme="light"]) .faq details, :root:not([data-theme="light"]) .legal-body, :root:not([data-theme="light"]) .toc { filter: none; } }
.panel .muted { color: var(--card-muted); }
@media (pointer: fine) { .lift { transition: transform .5s var(--ease); } .lift:hover { transform: translateY(-6px); } }

/* ---- Home: the hero at night ---- */
.hero { overflow-x: clip; min-height: 100svh; display: grid; align-content: center; padding-block: clamp(32px, 6vh, 80px) clamp(40px, 8vh, 96px); }
.hero-in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(50px, 7.4vw, 136px); }
:root[dir="rtl"] .hero h1 { font-size: clamp(42px, 6.2vw, 112px); }
.hero .sub { margin-top: 28px; }
.soon { margin-top: 16px; font-size: 15px; }
.devices { position: relative; aspect-ratio: 4 / 3; width: 118%; margin-inline-end: -12%; align-self: start; margin-top: -2vh; }
@media (min-width: 1800px) { .devices { width: 110%; } }
.devices img, .devices canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.devices canvas { opacity: 0; transition: opacity .8s; }
.devices.live canvas { opacity: 1; }
.devices.live img { opacity: 0; transition: opacity .8s .2s; }
@media (max-width: 900px) { .hero-in { grid-template-columns: 1fr; } .hero { min-height: 0; } .devices { width: 100%; max-width: 560px; margin-inline: auto; margin-top: 0; } }
.crew-fig { margin-top: clamp(40px, 6vh, 80px); }
.crew { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(8px, 1.2vw, 20px); }
.p { display: grid; gap: 12px; align-content: start; }
.p .face { background: var(--surface-2); aspect-ratio: 1; display: grid; place-items: center; --cut: 14px; transition: background .5s; }
.p.lead .face { background: #15171A; }
.p img { width: 80%; image-rendering: pixelated; transition: opacity .5s, filter .5s; }
.p.rest img, .p.done img { opacity: .6; filter: saturate(.6); }
.st { justify-self: start; display: block; width: fit-content; max-width: 100%; font: 500 15px/1.2 var(--body); padding: 7px 10px; --cut: 6px; transition: background .4s, color .4s; }
.st.work { background: var(--lime); color: #15171A; }
.st.need { background: var(--amber); color: #15171A; }
.st.done { background: var(--night2); color: #F2F2EF; }
.st.rest { background: var(--surface); color: var(--card-muted); }
@media (max-width: 900px) { .crew { grid-template-columns: repeat(4, 1fr); } }

/* ---- Home: you stay in charge (the question arrives like a notification) ---- */
.s2 .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 140px); align-items: center; }
.s2 h2 { font-size: clamp(40px, 5.6vw, 100px); }
.s2 .wrap > div > p { margin-top: 24px; max-width: 24em; font-size: clamp(18px, 1.45vw, 22px); }
@media (max-width: 860px) { .s2 .wrap { grid-template-columns: 1fr; } .s2 .q { order: 2; } }
.q { background: var(--night0); color: #F2F2EF; padding: clamp(22px, 2.6vw, 40px); --cut: 18px; max-width: 620px; width: 100%; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.q .who { color: #9A9C98; font-size: 15px; display: flex; gap: 10px; align-items: center; }
.q .who img { width: 22px; height: 22px; }
.q .tag { margin-inline-start: auto; border: 1.5px solid #9A9C98; color: #F2F2EF; border-radius: 999px; padding: 3px 10px; font-size: 14px; }
.q h3 { font: 700 clamp(26px, 2.4vw, 40px)/1.15 var(--display); margin-top: 14px; }
:root[dir="rtl"] .q h3 { line-height: 1.4; }
.q .why { margin-top: 12px; font-size: 18px; }
.q .opts { display: grid; gap: 12px; margin-top: 24px; }
.q button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 4px; padding: 18px 20px; background: var(--night1); --cut: 12px; font-size: 18px; transition: background .25s, transform .25s var(--ease); }
.q button b { font: 700 20px/1.2 var(--display); display: flex; gap: 10px; align-items: center; }
.q button .rec { font: 500 14px/1 var(--body); background: var(--lime); color: #15171A; padding: 5px 9px; border-radius: 999px; }
.q button:hover, .q button:focus-visible { background: var(--night2); }
.q button:active { transform: scale(.985); }
.q button:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.q button[aria-pressed="true"] { background: var(--lime); color: #15171A; }
.q button[aria-pressed="true"] .rec { background: #15171A; color: var(--lime); }
.q .try { margin-top: 18px; color: #9A9C98; font-size: 15px; }
.q .sent { display: none; margin-top: 20px; font: 500 17px/1.4 var(--body); color: var(--lime); gap: 10px; }
.q.done .sent { display: flex; }

/* ---- the PC page builds up (pinned on wide screens) ---- */
.build .head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 80px); align-items: end; margin-bottom: 44px; }
.build .head p { font-size: clamp(18px, 1.45vw, 22px); }
.pcwin { position: relative; background: var(--night0); padding: 10px; --cut: 16px; }
.pcwin .ghost { position: absolute; inset: 10px; width: calc(100% - 20px); opacity: .14; filter: grayscale(1); }
.pcwin .scan { position: absolute; top: 10px; bottom: 10px; width: 3px; inset-inline-start: 10px; background: var(--lime); box-shadow: 0 0 24px 4px rgba(184, 240, 60, .55); opacity: 0; }
.shot.wide { width: 100%; position: relative; }
.shot.stack { display: none; gap: 10px; }
@media (max-width: 760px) {
  .build .head { grid-template-columns: 1fr; margin-bottom: 28px; }
  .shot.wide, .pcwin .scan, .pcwin .ghost { display: none; }
  .shot.stack { display: grid; }
}

/* ---- what you need ---- */
.reqs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 24px); margin-top: 44px; }
.reqs li { background: var(--surface); color: var(--card-ink); padding: 30px 26px; display: flex; gap: 18px; align-items: center; font: 500 clamp(18px, 1.5vw, 22px)/1.35 var(--body); --cut: 14px; min-height: 128px; }
.reqs img { width: 56px; height: 56px; image-rendering: pixelated; flex: none; }
.reqs .later, .apps .later { background: var(--surface-2); color: var(--ink-2); }
.soon-mark { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--line); }
.soon-mark svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 860px) { .reqs { grid-template-columns: 1fr; } .reqs li { min-height: 0; padding: 20px; } }

/* ---- the footer, over the dunes ---- */
.foot { padding-block: clamp(80px, 10vw, 170px) 40px; display: grid; gap: 24px; }
.foot .big { display: flex; justify-content: space-between; font: 700 clamp(64px, 18.5vw, 330px)/.85 'Chakra Petch', sans-serif; color: var(--ink); overflow: hidden; }
.foot .big span { display: inline-block; }
.foot .links { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 16px; }
.foot .links a { text-decoration: none; position: relative; padding-block: 4px; }
.foot .indep { font-size: 14px; color: var(--ink-2); max-width: 48em; }
.by { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink-2); font-size: 15px; justify-self: start; }
.by:hover { color: var(--ink); }
.studio-mark { display: block; width: auto; height: 24px; }

/* ---- page heads ---- */
.ph { padding-block: clamp(56px, 10vh, 140px) 0; }
.ph > * { max-width: 1180px; }
.ph h1 { font-size: clamp(48px, 7vw, 124px); }
:root[dir="rtl"] .ph h1 { font-size: clamp(40px, 5.8vw, 100px); }
.ph .lead { margin-top: 26px; }

/* ---- features: a row per feature; the phone turns to face you as it arrives ---- */
.frow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 120px); align-items: center; padding-block: clamp(80px, 10vw, 170px) 0; perspective: 1400px; }
.frow .txt p { margin-top: 20px; font-size: clamp(18px, 1.45vw, 21px); max-width: 30em; }
.frow h2 { font-size: clamp(36px, 4.4vw, 76px); }
:root[dir="rtl"] .frow h2 { font-size: clamp(32px, 3.8vw, 64px); }
.frow.flip .txt { order: 2; }
.phone { justify-self: center; width: min(100%, 330px); background: var(--night0); padding: 10px; --cut: 24px; transform-style: preserve-3d; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .7); }
.phone img { width: 100%; }
@media (max-width: 860px) { .frow { grid-template-columns: 1fr; } .frow.flip .txt { order: 0; } .phone { width: min(78%, 320px); } }
.power { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: center; }
.power h2 { font-size: clamp(40px, 5.6vw, 100px); }
.power .note { margin-top: 24px; font-size: clamp(18px, 1.45vw, 22px); max-width: 22em; }
.count60 { position: relative; width: clamp(160px, 18vw, 260px); aspect-ratio: 1; margin-top: 36px; display: grid; place-items: center; font: 700 clamp(56px, 6vw, 96px)/1 'Chakra Petch', sans-serif; color: var(--card-ink); }
.count60 svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.count60 circle { fill: none; stroke-width: 6; }
.count60 .track { stroke: var(--line); }
.count60 .arc { stroke: var(--lime); stroke-linecap: round; }
:root[dir="rtl"] .count60 svg { transform: rotate(-90deg) scaleY(-1); }
@media (max-width: 860px) { .power { grid-template-columns: 1fr; } }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.more { margin-top: 36px; font-size: 19px; }
.more a, .test a { color: var(--link); font-weight: 500; text-underline-offset: 4px; }
.panel .more a, .panel a { color: inherit; }

/* ---- pricing ---- */
.price { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); max-width: 1180px; }
.price h2 { font-size: clamp(22px, 2vw, 30px); }
.price .amount { font: 700 clamp(64px, 9vw, 168px)/1 var(--display); margin-top: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:root[dir="rtl"] .price .amount { letter-spacing: 0; line-height: 1.3; }
.price .per { margin-top: 10px; font-size: 18px; }
.price .fine { margin-top: 20px; font-size: 17px; max-width: 30em; }
.price .ticks { margin-top: 0; font-size: 19px; }
.dashed { display: inline-block; margin-top: 28px; padding: 10px 16px; outline: 2px dashed currentColor; outline-offset: -2px; font-weight: 500; opacity: .8; }
@media (max-width: 860px) { .price { grid-template-columns: 1fr; } }
.qa { margin-top: 72px; display: grid; gap: 30px; max-width: 46em; }
.qa dt { font: 700 clamp(20px, 1.6vw, 26px)/1.3 var(--display); }
.qa dd { margin-top: 8px; color: var(--ink); }

/* ---- get the app ---- */
.apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 24px); margin-top: 56px; }
.apps li { background: var(--surface); color: var(--card-ink); padding: 30px 26px; --cut: 14px; display: grid; gap: 10px; align-content: start; }
.apps img { width: 64px; height: 64px; image-rendering: pixelated; }
.apps h2 { font-size: clamp(22px, 2vw, 30px); margin-top: 6px; }
.apps .tag { justify-self: start; margin-top: 8px; font-size: 15px; font-weight: 500; padding: 6px 10px; background: var(--card-ink); color: var(--surface); --cut: 6px; }
.apps .later { align-content: center; }
.apps .later .soon-mark { width: 64px; height: 64px; }
@media (max-width: 860px) { .apps { grid-template-columns: 1fr; } }
.test { margin-top: 28px; font-size: 19px; }
.steps { position: relative; counter-reset: s; display: grid; gap: 22px; margin-top: 26px; }
.steps::before { content: ''; position: absolute; inset-inline-start: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--line); }
.steps .rail { position: absolute; inset-inline-start: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--lime); transform-origin: top; transform: scaleY(1); }
.steps li { position: relative; counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; max-width: 34em; }
.steps li::before { content: counter(s); font: 700 20px/44px var(--display); text-align: center; background: var(--lime); color: #15171A; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }

/* ---- help ---- */
.helpgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); margin-top: 52px; align-items: start; }
.helpgrid .stuck { position: sticky; top: 100px; }
.stuck h2 { font-size: clamp(26px, 2.4vw, 40px); }
.stuck .btn { margin-top: 22px; }
@media (max-width: 900px) { .helpgrid { grid-template-columns: 1fr; } .helpgrid .stuck { position: static; } }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); color: var(--card-ink); --cut: 12px; padding-inline: clamp(18px, 2.4vw, 32px); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px; font: 700 clamp(19px, 1.7vw, 25px)/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 38px; height: 38px; display: grid; place-items: center; background: var(--line); font: 500 24px/1 var(--body); transition: transform .35s var(--ease), background .25s; }
.faq details[open] summary::after { content: '\2212'; background: var(--lime); color: #15171A; transform: rotate(180deg); }
.faq details p { padding-bottom: 26px; max-width: 44em; }
.more.on-sky a { color: var(--link); }

/* ---- legal: calm and readable, the text on its own panel ---- */
.draft { outline: 2px dashed var(--amber); outline-offset: -2px; padding: 16px 20px; margin-top: 28px; max-width: 900px; font-size: 16px; background: var(--surface); color: var(--card-ink); }
.updated { margin-top: 18px; color: var(--ink-2); font-size: 16px; }
.legal { display: grid; grid-template-columns: 270px minmax(0, 820px); gap: clamp(28px, 4vw, 72px); padding-block: 56px 0; }
.toc { position: sticky; top: 96px; align-self: start; font-size: 15px; background: var(--surface); color: var(--card-ink); padding: 20px; --cut: 12px; }
.toc h2 { font: 500 14px/1.4 var(--body); color: var(--card-muted); }
.toc ol { display: grid; gap: 4px; margin-top: 12px; }
.toc a { display: block; text-decoration: none; padding: 4px 10px; border-inline-start: 2px solid transparent; transition: border-color .3s, color .3s; color: var(--card-muted); }
.toc a:hover, .toc a.here { color: var(--card-ink); border-inline-start-color: var(--lime); }
@media (max-width: 960px) { .legal { grid-template-columns: 1fr; } .toc { position: static; } }
.legal-body { font-size: 17px; background: var(--surface); color: var(--card-ink); padding: clamp(22px, 3.4vw, 56px); --cut: 18px; }
.legal-body section { padding-top: 8px; margin-bottom: 40px; scroll-margin-top: 96px; }
.legal-body h2 { font: 700 clamp(24px, 2.2vw, 32px)/1.25 var(--display); letter-spacing: -.01em; margin-bottom: 14px; }
.legal-body h3 { font: 700 19px/1.35 var(--display); margin: 26px 0 10px; }
:root[dir="rtl"] .legal-body h2 { letter-spacing: 0; line-height: 1.45; }
.legal-body p, .legal-body ul, .legal-body ol { margin-bottom: 14px; }
.legal-body ul, .legal-body ol { padding-inline-start: 22px; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: inherit; text-underline-offset: 3px; }
.legal-body .src { font-size: 13px; color: var(--card-muted); }
.tbl { overflow-x: auto; margin-bottom: 18px; }
.legal-body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.legal-body th, .legal-body td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal-body th { background: var(--line); font-weight: 500; }
mark.todo { background: transparent; color: inherit; outline: 1.5px dashed var(--amber); outline-offset: 1px; padding: 0 3px; }

/* ---- contact ---- */
.mail { margin-top: 56px; display: grid; gap: 8px; }
.mail span { color: var(--ink-2); font-size: 16px; }
.mail b { font: 700 clamp(22px, 5.4vw, 68px)/1.1 var(--display); overflow-wrap: anywhere; }
.mail a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 8px; display: inline-block; }
.mail .also { margin-top: 24px; font-size: 20px; }
.mail .also a { color: var(--link); font-weight: 500; }
.mail h2 { font-size: clamp(24px, 2.4vw, 36px); }
.about { margin-top: 56px; }
.who { margin-top: 48px; color: var(--ink-2); font-size: 16px; }

/* ---- motion: what script hides until it plays (never without script, never with reduce motion) ---- */
.motion [data-rise], .motion [data-stagger] > * { opacity: 0; }
.motion.motion-failed [data-rise], .motion.motion-failed [data-stagger] > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Lenis smooth scrolling (its own small stylesheet, lenis 1.3.27) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* a line that waits for the owner's details (trade name, address) */
.todo-line { outline: 1.5px dashed var(--amber); outline-offset: 4px; }

/* ---- the phone menu: a sheet that opens from the bar ---- */
.menu-btn { display: none; width: 44px; height: 44px; border: 0; background: var(--line); color: inherit; cursor: pointer; place-items: center; --cut: 10px; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .3s var(--ease), background .2s; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; inset-inline-start: 0; }
.menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 35; background: var(--surface); color: var(--card-ink); padding: 110px var(--m) 40px; display: none; flex-direction: column; gap: 10px; }
.sheet a { font: 700 clamp(30px, 9vw, 48px)/1.25 var(--display); text-decoration: none; }
.sheet .lang { margin-top: auto; font: 500 20px/1 var(--body); }
.menu-open .sheet { display: flex; }
@media (max-width: 860px) { .menu-btn { display: grid; } }
@media (min-width: 861px) { .sheet { display: none !important; } }

/* ---- Features tour (wide screens): the rows scroll, one phone stays and changes its screen ---- */
.tour-phone { display: none; }
@media (min-width: 901px) {
  .tour.live { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 120px); }
  .tour.live .frow { display: block; min-height: 72vh; padding-block: 18vh 0; }
  .tour.live .frow .phone { display: none; }
  .tour.live .frow .txt { opacity: .32; transition: opacity .5s; }
  .tour.live .frow.on .txt { opacity: 1; }
  .tour.live .tour-phone { display: block; position: sticky; top: 14vh; height: 72vh; align-self: start; perspective: 1400px; }
  .tour-phone .phone { position: relative; width: min(100%, 340px); margin-inline: auto; }
  .tour-phone .screens { position: relative; aspect-ratio: 9 / 16; }
  .tour-phone .screens img { position: absolute; inset: 0; opacity: 0; transition: opacity .55s, transform .55s var(--ease); transform: scale(.97); }
  .tour-phone .screens img.on { opacity: 1; transform: none; }
  .tour-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
  .tour-dots i { width: 22px; height: 4px; background: var(--line); transition: background .4s; }
  .tour-dots i.on { background: var(--lime); }
}