/* ─────────────────────────────────────────────────────────────────────────
   Fasih, as the brand book sets it (Fasih-Brand-Identity.pdf, v1.0,
   September 2026). The colours are the book's, and they are the app's own
   (src/theme/palettes.ts), which the book was measured from.

   Black, white and vellum carry the page. Vermilion marks the one thing
   that matters on it. Deep red is for Pro and prices. Each section sits on
   one of the book's grounds, and the ground sets the colour of everything
   on it: type, the highlight, cards and the button. So a component looks
   right on whichever ground it is placed.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;

  /* Core */
  --vermilion:#FC5642;        /* marks on black: highlights, icons, lines */
  --vermilion-fill:#D04131;   /* the icon, and solid red blocks */
  --vermilion-ink:#C72F20;    /* red type and icons on vellum or white */
  --deep-red:#720D05;         /* Pro and prices */
  --ink:#0A0A0A;              /* buttons, and black type on vermilion */
  --vellum:#F5F3EF;

  /* On black */
  --card-black:#0B0B0C;
  --card:#13161A;
  --surface:#1B1E22;
  --surface-2:#26292D;
  --track:#383C40;
  --grey:#A0A5AB;
  --grey-2:#8E9398;

  /* On vellum */
  --paper:#FEFCF9;
  --track-light:#DCD9D2;
  --ink-text:#0E1216;
  --slate:#51565B;
  --slate-2:#65696E;

  /* Warm tints */
  --blush:#FFE3DC;
  --chip-red:#BE2517;
  --rose-white:#FEE0D9;
  --coral:#FFAB98;
  --rose-grey:#CFB8B2;
  --warm-white:#FFFAF3;
  --sand-light:#F6EFE5;

  /* Roles. These are the black ground's; every ground below sets its own. */
  --t1:#fff;
  --t2:var(--grey);
  --t3:var(--grey-2);
  --hl:var(--vermilion);
  --eyebrow:var(--vermilion);
  --card-bg:var(--card);
  --line:rgba(255,255,255,.08);
  --btn-bg:#fff;
  --btn-fg:var(--ink);
  --btn-shadow:0 18px 36px -18px rgba(252,86,66,.5);
  --small:var(--grey-2);
  --accent:var(--vermilion);  /* older name, still used inline by /sources */

  --measure:62ch;
  --col:1120px;
  --step:clamp(68px,8.4vw,120px);
  --pill:999px;
  --r-card:24px;
  --r-panel:32px;
  --header-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:#000;
  color:var(--t1);
  font-family:"Inter Tight",system-ui,-apple-system,sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--vermilion-fill);color:#fff}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--hl);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Grounds (brand book, Colour: Grounds) ─────────────────────────────── */
.g-black{
  background:#000;
  --t1:#fff;--t2:var(--grey);--t3:var(--grey-2);--hl:var(--vermilion);--eyebrow:var(--vermilion);
  --card-bg:var(--card);--line:rgba(255,255,255,.08);
  --btn-bg:#fff;--btn-fg:var(--ink);--btn-shadow:0 18px 36px -18px rgba(252,86,66,.5);--small:var(--grey-2);
  color:var(--t1);
}
/* Brand posts: the word sits in the glow. */
.glow-top{background:radial-gradient(62% 50% at 50% 22%,rgba(252,86,66,.22) 0%,rgba(252,86,66,.06) 55%,rgba(0,0,0,0) 78%),#000}
/* Product posts: phones rise out of the glow. */
.glow-bottom{background:radial-gradient(60% 45% at 50% 100%,rgba(252,86,66,.34) 0%,rgba(252,86,66,.08) 55%,rgba(0,0,0,0) 80%),#000}

/* The light falls from the phone's side, so the copy sits on the deeper red:
   white type holds 4.7:1 there, where the brightest point would give 4.3. */
.g-verm{
  background:#CF412F radial-gradient(120% 95% at 74% 0%,#D8492F 0%,#CF412F 52%,#B83320 100%);
  --t1:#fff;--t2:#fff;--t3:rgba(255,255,255,.88);--hl:var(--ink);--eyebrow:rgba(255,255,255,.88);
  --card-bg:rgba(0,0,0,.17);--line:rgba(255,255,255,.25);
  --btn-bg:var(--ink);--btn-fg:#fff;--btn-shadow:0 16px 30px -14px rgba(50,4,0,.7);--small:#fff;
  color:var(--t1);
}
.g-vellum{
  color-scheme:light;
  background:var(--vellum) radial-gradient(58% 52% at 50% 54%,#FFFDF9 0%,#F5F3EF 58%,#EEE9E1 100%);
  --t1:var(--ink-text);--t2:var(--slate);--t3:var(--slate-2);--hl:var(--vermilion-ink);--eyebrow:var(--vermilion-ink);
  --card-bg:var(--paper);--line:#E6E2DA;
  --btn-bg:var(--ink);--btn-fg:#fff;--btn-shadow:0 16px 30px -16px rgba(74,58,32,.6);--small:var(--slate);
  color:var(--t1);
}
.g-deep{
  background:var(--deep-red) radial-gradient(90% 75% at 15% 5%,#8E1A0B 0%,#720D05 55%,#560902 100%);
  --t1:var(--rose-white);--t2:var(--rose-grey);--t3:var(--rose-grey);--hl:var(--coral);--eyebrow:var(--coral);
  --card-bg:rgba(0,0,0,.2);--line:rgba(255,255,255,.14);
  --btn-bg:#fff;--btn-fg:var(--ink);--btn-shadow:0 18px 36px -18px rgba(0,0,0,.65);--small:var(--rose-grey);
  color:var(--t1);
}

/* ── Arabic ──────────────────────────────────────────────────────────────
   Amiri, direction-isolated, never letter-spaced, and never set tighter than
   1.6: the marks above and below need the room.                            */
.ar{
  font-family:Amiri,"Times New Roman",serif;
  font-weight:400;
  direction:rtl;
  unicode-bidi:isolate;
  line-height:1.7;
  letter-spacing:0;
  font-feature-settings:"liga" 1,"calt" 1;
}

/* ── Type (brand book, Typography) ─────────────────────────────────────── */
.display{
  margin:0;
  font-weight:800;
  letter-spacing:-0.042em;
  line-height:1.02;
  text-wrap:balance;
}
h1.display{font-size:clamp(44px,6.4vw,84px)}
h2.display{font-size:clamp(34px,4.6vw,60px)}
.display.xl{font-size:clamp(56px,8.4vw,108px)}
.hl{color:var(--hl)}
.eyebrow{
  margin:0;
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--eyebrow);
}
.lead,.lede{
  margin:0;
  font-size:clamp(17px,1.55vw,20px);
  font-weight:500;
  line-height:1.45;
  letter-spacing:-0.005em;
  color:var(--t2);
  max-width:46ch;
  text-wrap:pretty;
}
.note{font-size:13.5px;line-height:1.6;color:var(--t3);max-width:60ch;text-wrap:pretty;margin:0}
em{font-style:normal;color:var(--t1)}
b,strong{font-weight:650}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap{width:min(100% - 40px,var(--col));margin-inline:auto}
section{padding-block:var(--step)}
.stack{display:flex;flex-direction:column}
.gap-s{gap:12px}.gap-m{gap:18px}.gap-l{gap:34px}
.center{text-align:center}

/* Every section head: eyebrow, headline, at most one lead. */
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,4.4vw,56px)}
.sec-head.center{align-items:center}
.sec-head.center .lead{margin-inline:auto}

/* ── Header ─────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  transition:background .25s,box-shadow .25s;
}
header.scrolled{background:rgba(0,0,0,.88);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}

/* The lockup (brand book, Logo): the name in Inter Tight 720, tracked −2%,
   at 58% of the icon's size and 26% of it away. */
.lockup{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#fff;flex:none}
.lockup svg{width:32px;height:32px;margin:-1px;flex:none;display:block}
.lockup span{font-size:17.4px;font-weight:720;letter-spacing:-0.02em;line-height:1.2}
/* The thin white ring the icon wears on a vermilion ground. */
.lockup .ring{opacity:0;transition:opacity .25s}

.bar nav{display:flex;align-items:center;gap:4px}
.bar nav a:not(.nav-cta){
  font-size:14px;font-weight:550;color:var(--grey);text-decoration:none;
  padding:8px 12px;border-radius:var(--pill);transition:color .18s;
}
.bar nav a:not(.nav-cta):hover,.bar nav a[aria-current="page"]{color:#fff}
.nav-cta{
  margin-inline-start:10px;
  display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:var(--pill);
  background:#fff;color:var(--ink);
  font-size:14px;font-weight:650;letter-spacing:-0.01em;text-decoration:none;white-space:nowrap;
  transition:background .25s,color .25s,transform .18s cubic-bezier(.2,.7,.3,1);
}
.nav-cta:hover{transform:translateY(-1px)}
@media (max-width:760px){
  .bar nav a:not(.nav-cta){display:none}
  .nav-cta{margin-inline-start:0}
}

/* ── Buttons (brand book, Components: the store button) ───────────────── */
.store{
  display:inline-flex;align-items:center;gap:10px;
  height:58px;padding:0 24px 0 19px;border-radius:var(--pill);
  background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow);
  font-size:17.5px;font-weight:650;letter-spacing:-0.01em;white-space:nowrap;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
.store:hover{transform:translateY(-2px)}
.store:active{transform:none}
/* The Google Play icon, as the file comes: never redrawn or recoloured. */
.store img{width:19px;height:21px;flex:none;margin-inline-end:1px}
.small-print{margin:12px 0 0;font-size:14px;font-weight:550;letter-spacing:0;color:var(--small)}
.cta{display:flex;flex-direction:column;align-items:flex-start;margin-top:34px}
.center .cta,.cta.center{align-items:center}
@media (max-width:380px){
  .store{height:54px;padding:0 20px 0 16px;font-size:16px}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 24px;border-radius:var(--pill);border:0;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:inherit;font-size:15px;font-weight:650;letter-spacing:-0.01em;white-space:nowrap;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{transform:translateY(-1px)}

/* ── Hero: the main line, centred, then three phones rising out of the glow
   and fading into the black, so the page runs on into How it works.     */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(48px,7vw,96px);padding-bottom:0;
  background:radial-gradient(58% 36% at 50% 68%,rgba(252,86,66,.3) 0%,rgba(252,86,66,.08) 50%,rgba(0,0,0,0) 78%),#000;
}
.hero .lead{margin:22px auto 0;max-width:none;text-wrap:balance} /* one line wherever it fits */
.chips{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.chips li{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--pill);
  background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--line);
  color:var(--t2);font-size:12.5px;font-weight:600;white-space:nowrap;
}
.hero .fan{
  --lift:72px; /* room above the phones for the centre one's glow */
  height:calc(clamp(340px,44vw,560px) + var(--lift));
  margin-top:calc(clamp(48px,6vw,72px) - var(--lift));
  -webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,0) 100%);
}
.hero .fan img{translate:0 var(--lift)}

/* ── The phone (brand book, Components: the phone) ─────────────────────────
   A premium phone, drawn simply: 356 × 780 at full size, a 3px metal edge,
   10px of bezel, a camera hole, a 9:41 status bar, two side buttons, a
   gesture bar and a faint sheen. `zoom` scales the whole drawing.           */
.phone{position:relative;width:356px;height:780px;flex:none;zoom:.86;--phone-shadow:0 60px 90px -36px rgba(55,5,0,.75),0 26px 40px -24px rgba(55,5,0,.6)}
@media (max-width:1080px){.phone{zoom:.8}}
@media (max-width:880px){.phone{zoom:.78}}
.phone-btn{position:absolute;right:-4px;width:5px;border-radius:3px;background:linear-gradient(90deg,#1b1c1e,#6a6c70 60%,#2a2b2e)}
.phone-btn.b1{top:150px;height:64px}
.phone-btn.b2{top:238px;height:112px}
.phone-edge{
  position:absolute;inset:0;padding:3px;border-radius:58px;
  background:linear-gradient(155deg,#7a7c81 0%,#2b2c30 16%,#141517 48%,#26272a 80%,#6c6e73 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),var(--phone-shadow);
}
.phone-bezel{width:100%;height:100%;padding:10px;border-radius:55px;background:#030303}
.phone-screen{position:relative;width:100%;height:100%;border-radius:45px;overflow:hidden;background:#000;color:#fff;font-family:"Inter Tight",sans-serif}
.phone svg{display:block;flex:none}
.ps-status{position:absolute;left:24px;right:22px;top:11px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;line-height:1.2}
.ps-status span:last-child{display:inline-flex;align-items:center;gap:6px}
.ps-cam{position:absolute;left:50%;top:13px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#0c0c0d;box-shadow:0 0 0 1.5px #1b1c1e}
.ps-top{position:absolute;left:20px;right:18px;top:50px;display:flex;align-items:center;justify-content:space-between}
.ps-streak{display:inline-flex;align-items:center;gap:7px;font-size:18px;font-weight:650}
.ps-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--surface-2)}
.ps-word{position:absolute;left:0;right:0;top:110px;bottom:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ps-ar{font-size:90px;line-height:1.9}
.ps-pos{margin-top:-8px;font-size:14px;font-weight:500;color:var(--grey-2)}
.ps-gloss{margin-top:22px;font-size:27px;font-weight:520;letter-spacing:-0.01em;line-height:1.2}
.ps-icons{margin-top:28px;display:flex;gap:48px;align-items:center}
.ps-bottom{position:absolute;left:24px;right:24px;bottom:34px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:var(--grey)}
.ps-bottom span{display:inline-flex;align-items:center;gap:7px}
.ps-home{position:absolute;left:50%;bottom:9px;width:104px;height:4px;margin-left:-52px;border-radius:2px;background:rgba(255,255,255,.4)}
.ps-sheen{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 30%,rgba(255,255,255,0) 46%);pointer-events:none}
/* A swipe up to the next word. */
.ps-word.leaving{transform:translateY(-54px);opacity:0;transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .28s ease}
.ps-word.entering{transform:translateY(54px);opacity:0}
.ps-word.settling{transition:transform .42s cubic-bezier(.2,.7,.3,1),opacity .36s ease}

/* ── How it works: three steps on one line, joined by a thread ─────────── */
.steps{
  --gap:clamp(28px,4vw,56px);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
}
.step{position:relative;display:flex;flex-direction:column;gap:10px}
.step-n{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;
  background:var(--vermilion-fill);color:#fff;font-size:19px;font-weight:750;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px rgba(208,65,49,.14),0 10px 30px -8px rgba(252,86,66,.55);
}
/* The thread from one step to the next. */
.step:not(:last-child)::after{
  content:"";position:absolute;top:23px;left:calc(46px + 18px);right:calc(18px - var(--gap));height:1px;
  background:linear-gradient(90deg,rgba(252,86,66,.7),rgba(255,255,255,.12));
}
.step h3{margin:0;font-size:clamp(20px,2vw,24px);font-weight:720;letter-spacing:-0.02em;line-height:1.2;color:var(--t1)}
.step p{margin:0;font-size:16px;line-height:1.5;color:var(--t2);text-wrap:pretty;max-width:30ch}
@media (max-width:820px){
  /* On a phone the steps stand in a column and the thread runs down. */
  .steps{--gap:36px;grid-template-columns:minmax(0,1fr);max-width:440px;margin-inline:auto}
  .step{padding-left:66px;padding-top:11px;gap:8px}
  .step-n{position:absolute;left:0;top:0;margin:0}
  .step:not(:last-child)::after{
    top:calc(46px + 12px);bottom:calc(12px - var(--gap));left:23px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,rgba(252,86,66,.7),rgba(255,255,255,.12));
  }
}

.fan{position:relative;height:clamp(310px,38vw,470px);overflow:hidden;pointer-events:none}
.fan img{position:absolute;left:50%;top:0;height:auto}
.fan .fan-c{
  z-index:2;width:clamp(190px,21vw,272px);transform:translateX(-50%);
  filter:drop-shadow(0 -10px 50px rgba(252,86,66,.32)) drop-shadow(0 40px 60px rgba(0,0,0,.9));
}
.fan .fan-l,.fan .fan-r{width:clamp(166px,18.2vw,236px);top:clamp(44px,5.4vw,74px);filter:drop-shadow(0 40px 60px rgba(0,0,0,.9))}
.fan .fan-l{transform:translateX(calc(-50% - clamp(150px,17vw,226px))) rotate(-11deg)}
.fan .fan-r{transform:translateX(calc(-50% + clamp(150px,17vw,226px))) rotate(11deg)}

/* ── Explore the app beyond the daily feed ─────────────────────────────── */
.features{padding-top:clamp(76px,9vw,130px)}
.feature-spotlight{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;
  min-height:505px;overflow:hidden;border-radius:var(--r-panel);
  background:linear-gradient(120deg,#17191c,#101113 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.feature-spotlight-copy{position:relative;z-index:1;padding:clamp(28px,5vw,64px)}
.feature-kicker{margin:0 0 16px;color:var(--vermilion);font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase}
.feature-spotlight h3,.feature-tile h3{
  margin:0;color:#fff;font-weight:760;letter-spacing:-.035em;line-height:1.08;text-wrap:balance;
}
.feature-spotlight h3{font-size:clamp(32px,3.6vw,48px)}
.feature-spotlight-copy>p:not(.feature-kicker),.feature-tile-copy>p:not(.feature-kicker){
  margin:18px 0 0;color:var(--grey);font-size:16.5px;line-height:1.57;text-wrap:pretty;
}
.feature-spotlight-art{position:relative;align-self:stretch;min-height:505px;overflow:hidden;display:flex;justify-content:center}
.detail-glow{position:absolute;inset:10% -10% -50%;background:radial-gradient(ellipse at center,rgba(252,86,66,.29),transparent 65%)}
.feature-spotlight-art img{position:relative;align-self:flex-start;width:clamp(245px,27vw,330px);height:auto;margin-top:38px;filter:drop-shadow(0 32px 45px rgba(0,0,0,.7))}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.feature-tile{
  min-width:0;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;border-radius:var(--r-card);background:#13161a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.feature-tile-copy{position:relative;z-index:1;padding:clamp(26px,3vw,36px) clamp(26px,3vw,36px) 8px}
.feature-tile h3{font-size:clamp(26px,2.8vw,34px)}
.feature-tile-copy>p:not(.feature-kicker){max-width:46ch;font-size:15.5px;margin-top:12px}
.collection-art,.family-art,.practice-art,.review-art,.personal-art,.carry-art{position:relative;min-height:180px;margin:8px 26px 0}
.collection-art{display:flex;align-items:flex-end;justify-content:center}
.collection-folder{
  position:absolute;bottom:-28px;width:38%;height:157px;display:flex;flex-direction:column;align-items:flex-start;
  padding:18px;border-radius:18px 18px 0 0;color:#fff;box-shadow:0 16px 32px rgba(0,0,0,.3);
  font-size:15px;font-weight:700;line-height:1.2;
}
.collection-folder small{margin-top:6px;font-size:12px;font-weight:500;opacity:.7}
.folder-icon{display:grid;place-items:center;width:32px;height:32px;margin-bottom:14px;border-radius:9px;background:rgba(255,255,255,.2);font-size:18px}
.folder-back{left:4%;bottom:-38px;transform:rotate(-11deg);background:#684e61}
.folder-mid{right:3%;bottom:-38px;transform:rotate(10deg);background:#4b596d}
.folder-front{z-index:1;width:42%;left:29%;background:#a63a2e}
.family-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.family-root{display:grid;place-items:center;min-width:132px;padding:2px 20px;border-radius:18px;background:#2a1d1b;color:var(--vermilion);font-size:37px;word-spacing:10px}
.family-branches{display:flex;justify-content:center;gap:10px;width:100%}
.family-branches span{flex:1;min-width:0;max-width:136px;display:flex;flex-direction:column;align-items:center;border-radius:13px;background:#222529;padding:9px 7px 10px;text-align:center}
.family-branches b{color:#fff;font-size:28px;font-weight:400;white-space:nowrap}
.family-branches small{margin-top:-2px;color:var(--grey);font-size:11px}
.practice-art,.review-art{align-self:center;width:min(100% - 52px,390px);min-height:194px;margin-inline:auto;border-radius:18px 18px 0 0;padding:17px 20px 22px;background:#0a0b0d;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 15px 36px rgba(0,0,0,.35)}
.practice-top,.review-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--grey);font-size:12px;font-weight:650}
.practice-top span:first-child,.review-top span:first-child{color:#fff}
.practice-prompt{text-align:center;color:#fff;font-size:44px;margin:5px 0 6px}
.practice-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.practice-options span{min-width:0;padding:10px 4px;border-radius:9px;background:#202328;color:var(--grey);font-size:11px;font-weight:600;text-align:center}
.practice-options .correct{background:#47241f;color:#fff;box-shadow:inset 0 0 0 1px var(--vermilion-fill)}
.practice-options b{color:var(--vermilion);margin-left:3px}
.review-top b{font-size:11px;color:var(--vermilion)}
.review-word{display:block;text-align:center;color:#fff;font-size:43px;line-height:1.55}
.review-meaning{display:block;text-align:center;color:var(--grey);font-size:14px;margin:-8px 0 16px}
.review-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.review-actions span{padding:9px 2px;background:#24272b;border-radius:8px;color:#fff;text-align:center;font-size:11px}
.personal-art{display:flex;align-items:flex-end;justify-content:center;gap:12px;padding-bottom:0}
.theme-card{width:41%;max-width:164px;height:164px;padding:12px 14px 10px;border-radius:16px 16px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;font-size:13px}
.theme-card span{align-self:flex-start;opacity:.65}.theme-card b{font-size:35px;font-weight:400}.theme-card small{font-size:11px;opacity:.65}
.theme-dark{background:#070707;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.theme-light{background:var(--vellum);color:var(--ink-text)}
.accent-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:5px;background:#202328;border-radius:20px;padding:7px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.accent-dots i{width:12px;height:12px;border-radius:50%;background:#d04131}.accent-dots i:nth-child(2){background:#e2a438}.accent-dots i:nth-child(3){background:#478d67}.accent-dots i:nth-child(4){background:#426fb7}.accent-dots i:nth-child(5){background:#855ab1}
.carry-art{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding-bottom:24px;flex-wrap:wrap}
.carry-art span{display:inline-flex;align-items:center;gap:9px;padding:12px 15px;border-radius:12px;background:#25282c;color:#e3e4e5;font-size:13px;font-weight:650;white-space:nowrap}
.carry-art b{color:var(--vermilion);font-size:20px;line-height:1}

/* ── Daily habit: separate close-ups for widget, lock screen and streak ─ */
.daily{padding-top:clamp(76px,9vw,130px)}
.daily .sec-head{margin-bottom:30px}
.habit-stack{border-top:1px solid var(--line)}
.habit-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(32px,6vw,86px);padding:clamp(48px,5.5vw,76px) 0;border-bottom:1px solid var(--line)}
.habit-row:nth-child(even) .habit-copy{grid-column:2;grid-row:1}
.habit-row:nth-child(even) .habit-scene{grid-column:1;grid-row:1}
.habit-copy{max-width:470px}
.habit-number{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--vermilion-ink);font-size:12px;font-weight:760;letter-spacing:.16em;text-transform:uppercase}
.habit-number span{padding:5px 9px;border-radius:99px;background:#ebe3da;color:var(--slate);font-size:10px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.habit-copy h3{margin:0;color:var(--ink-text);font-size:clamp(32px,3.7vw,48px);font-weight:780;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.habit-copy>p:not(.habit-number){margin:16px 0 0;color:var(--slate);font-size:17px;line-height:1.55;text-wrap:pretty}
.habit-scene{position:relative;min-width:0;height:610px;overflow:hidden;border-radius:var(--r-panel);isolation:isolate;background:radial-gradient(ellipse at 52% 82%,#d5a69b 0%,#e6cfc3 37%,#efe3d8 75%,#f5eee6 100%)}
.mock-phone{
  position:absolute;left:50%;top:36px;width:326px;height:660px;padding:4px;
  transform:translateX(-50%);transform-origin:top center;
  border-radius:51px;background:linear-gradient(145deg,#8f8f91,#27282a 22%,#08090b 55%,#77787b 100%);
  box-shadow:0 35px 55px rgba(27,18,19,.36),0 5px 15px rgba(0,0,0,.28);
}
.mock-bezel{width:100%;height:100%;padding:8px;border-radius:47px;background:#050506}
.mock-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:39px;color:#fff}
.mock-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 30%);z-index:3}
.home-screen{background:radial-gradient(circle at 75% 18%,#b66d6d 0%,transparent 36%),radial-gradient(circle at 20% 76%,#514861 0%,transparent 45%),linear-gradient(155deg,#272b41,#772d3d 50%,#211e37)}
.home-screen::after{content:"";position:absolute;right:-130px;top:155px;width:330px;height:360px;border:75px solid rgba(255,216,183,.13);border-radius:50%;transform:rotate(-24deg);pointer-events:none}
.mock-status{position:absolute;z-index:4;top:13px;left:22px;right:19px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;line-height:1}
.mock-status-icons{display:inline-flex;align-items:center;gap:5px}
.mock-status-icons i{display:inline-block;position:relative}
.mock-status-icons .signal{width:14px;height:11px;background:linear-gradient(90deg,#fff 22%,transparent 22% 31%,#fff 31% 53%,transparent 53% 62%,#fff 62% 84%,transparent 84%);clip-path:polygon(0 70%,25% 70%,25% 45%,50% 45%,50% 22%,75% 22%,75% 0,100% 0,100% 100%,0 100%)}
.mock-status-icons .wifi{width:13px;height:10px;border:2px solid #fff;border-bottom:0;border-radius:100% 100% 0 0;transform:scaleY(.65)}
.mock-status-icons .wifi::after{content:"";position:absolute;left:3px;bottom:-4px;width:3px;height:3px;border-radius:50%;background:#fff}
.mock-status-icons .battery{width:16px;height:9px;border:1.5px solid #fff;border-radius:2px;background:linear-gradient(90deg,#fff 74%,transparent 74%)}
.mock-status-icons .battery::after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:3px;background:#fff;border-radius:0 2px 2px 0}
.mock-camera{position:absolute;z-index:5;left:50%;top:11px;width:13px;height:13px;border-radius:50%;transform:translateX(-50%);background:#08080a;box-shadow:0 0 0 1.5px #24242a}
.home-date{position:relative;z-index:1;margin:62px 22px 0;font-size:17px;font-weight:650;letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.home-widget{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:210px;margin:18px 16px 0;border-radius:22px;background:#0b0b0d;color:#fff;box-shadow:0 13px 35px rgba(0,0,0,.28);text-align:center}
.home-widget-label{color:#aeb0b5;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.home-widget-word{margin-top:2px;font-size:60px;line-height:1.43}
.home-widget-meaning{font-size:17px;font-weight:650;letter-spacing:-.015em}
.home-widget-root{margin-top:1px;font-size:20px;line-height:1.5;word-spacing:7px;color:var(--vermilion)}
.mock-app-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px;margin:22px 13px 0}
.mock-app{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mock-app small{font-size:9px;font-weight:550;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.app-icon{display:grid;place-items:center;width:47px;height:47px;border-radius:13px;color:#fff;font-family:system-ui,sans-serif;font-size:28px;font-style:normal;font-weight:400;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.app-photos{background:linear-gradient(135deg,#e37383,#f0af68)}.app-notes{background:linear-gradient(135deg,#f6c752,#f0a735)}.app-maps{background:linear-gradient(135deg,#50bda0,#277f99)}.app-clock{background:linear-gradient(135deg,#43454e,#121318)}
.app-mail{background:linear-gradient(135deg,#6ea8db,#3473c8)}.app-music{background:linear-gradient(135deg,#e682b2,#a455a9)}.app-camera{background:linear-gradient(135deg,#9799a7,#4d5367)}.app-settings{background:linear-gradient(135deg,#999da8,#666a78)}
.app-phone{background:#65b887}.app-chat{background:#58a6b8}.app-web{background:#4c78c5}.app-fasih{background:#d04131;overflow:hidden}.app-fasih img{width:100%;height:100%;object-fit:cover}
.mock-dock{position:absolute;z-index:2;left:14px;right:14px;bottom:24px;display:flex;justify-content:space-around;padding:9px 2px;border-radius:22px;background:rgba(255,255,255,.2);backdrop-filter:blur(16px)}
.mock-dock .app-icon{width:42px;height:42px;border-radius:12px;font-size:25px}
.mock-gesture{position:absolute;z-index:5;left:50%;bottom:8px;width:104px;height:4px;border-radius:5px;transform:translateX(-50%);background:rgba(255,255,255,.75)}
.lock-screen{background:radial-gradient(circle at 80% 20%,rgba(255,169,126,.48),transparent 38%),radial-gradient(circle at 26% 68%,rgba(122,55,83,.8),transparent 54%),linear-gradient(160deg,#312743,#8d4654 58%,#342b47)}
.lock-screen::after{content:"";position:absolute;width:410px;height:420px;left:-120px;bottom:70px;border:90px solid rgba(255,214,185,.1);border-radius:50%;transform:rotate(25deg)}
.lock-date{position:relative;z-index:1;margin:86px 0 0;text-align:center;font-size:15px;font-weight:600}
.lock-time{position:relative;z-index:1;text-align:center;font-size:86px;font-weight:700;letter-spacing:-.085em;line-height:1.1;font-variant-numeric:tabular-nums}
.lock-alert{position:relative;z-index:2;display:flex;flex-direction:column;margin:44px 14px 0;padding:16px 18px 19px;border-radius:20px;background:rgba(237,230,229,.86);color:#111318;box-shadow:0 10px 30px rgba(13,9,14,.15);backdrop-filter:blur(22px)}
.lock-alert-head{display:flex;align-items:center;gap:7px;font-size:13px}
.lock-alert-head img{width:23px;height:23px;border-radius:6px}
.lock-alert-head b{font-weight:720}
.lock-alert-head span{margin-left:auto;color:#5d5b62;font-size:12px}
.lock-alert-word{margin:2px 0 -4px;font-size:42px;line-height:1.5}
.lock-alert-meaning{font-size:16px;font-weight:550}
.lock-shortcuts{position:absolute;z-index:2;left:24px;right:24px;bottom:37px;display:flex;justify-content:space-between}
.lock-shortcuts span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.19);font-size:20px}
.lock-shortcuts svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.streak-scene{display:grid;place-items:center}
.streak-board{width:min(84%,380px);padding:27px;border-radius:28px;background:#0b0b0d;color:#fff;box-shadow:0 25px 52px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.07)}
.streak-board-head{display:flex;justify-content:space-between;color:#a0a5ab;font-size:13px;font-weight:650}.streak-board-head span:first-child{color:#fff}
.streak-tally{display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 18px;color:var(--vermilion)}
.streak-tally svg{width:33px;height:33px;flex:none}.streak-tally b{font-size:66px;font-weight:800;line-height:1;letter-spacing:-.06em}.streak-tally span{max-width:70px;color:#a0a5ab;font-size:13px;line-height:1.2}
.streak-week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;justify-items:center;margin:0 0 24px}
.streak-week span{color:#8e9398;font-size:11px;font-weight:700}.streak-week i{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#d04131;color:#fff;font-size:15px;font-style:normal;font-weight:700}
.streak-calendar{display:grid;grid-template-columns:repeat(7,1fr);justify-items:center;gap:11px 7px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.streak-calendar span{width:12px;height:12px;border-radius:50%;background:#383c40}.streak-calendar .read{background:#d04131}
@media (max-width:850px){
  .feature-spotlight{grid-template-columns:1fr 1fr}
  .habit-row{gap:30px}
  .habit-copy>p:not(.habit-number){font-size:16px}
}
@media (max-width:900px){
  .habit-row{grid-template-columns:1fr;gap:30px;padding:58px 0}
  .habit-row:nth-child(even) .habit-copy,.habit-row:nth-child(even) .habit-scene{grid-column:auto;grid-row:auto}
  .habit-copy{max-width:570px}
}
@media (max-width:700px){
  .feature-spotlight{display:flex;flex-direction:column;min-height:0}
  .feature-spotlight-copy{padding:32px 28px 0}
  .feature-spotlight-art{width:100%;min-height:320px;max-height:320px}
  .feature-spotlight-art img{width:240px;margin-top:18px}
  .feature-grid{grid-template-columns:1fr}
  .feature-tile{min-height:320px}
  .habit-scene{height:520px}
  .mock-phone{top:25px;transform:translateX(-50%) scale(.82)}
  .streak-board{width:min(86%,390px)}
}
@media (max-width:360px){
  .mock-phone{transform:translateX(-50%) scale(.76)}
  .habit-scene{height:490px}
  .habit-number{gap:8px;letter-spacing:.11em}
  .habit-number span{font-size:9px}
  .streak-board{width:90%;padding:20px}
  .streak-week{gap:3px}
  .streak-week i{width:24px;height:24px}
}

/* ── Clean, straight color boundary between Pricing and FAQ ───────────── */
.landing #price{background:var(--deep-red);padding-bottom:clamp(88px,8vw,112px)}
.landing #price .landing-free-price{color:var(--rose-white);font-size:30px;font-weight:760;letter-spacing:-.04em;line-height:1}
.landing #price .landing-pro-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 13px;margin:-5px 0 0;color:var(--slate);font-size:15px;line-height:1.35}
.landing #price .landing-pro-price strong{color:var(--vermilion-ink);font-size:29px;font-weight:760;letter-spacing:-.035em;white-space:nowrap}
.landing #price .landing-pro-price small{color:var(--slate);font-size:14px;font-weight:600;letter-spacing:0}
.landing #faq{
  background:#000;
  padding-top:clamp(48px,5vw,70px);padding-bottom:clamp(48px,5vw,70px);
}
.landing .closer.g-black{
  background:radial-gradient(ellipse 65% 40% at 50% 50%,rgba(252,86,66,.14) 0%,rgba(252,86,66,.03) 55%,transparent 100%),#000;
  padding-top:clamp(44px,4.5vw,64px);padding-bottom:clamp(44px,4.5vw,64px);
}

/* ── Free and Pro, on the deep red ─────────────────────────────────────── */
.plans{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:18px;align-items:start;max-width:1000px;margin-inline:auto}
@media (max-width:820px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{border-radius:var(--r-panel);padding:clamp(24px,3.2vw,36px);display:flex;flex-direction:column;gap:20px;background:var(--card-bg)}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.plan h2,.plan h3{margin:0;font-size:26px;font-weight:720;letter-spacing:-0.02em;line-height:1.2;color:var(--t1)}
.plan-note{margin:-8px 0 0;font-size:15px;color:var(--t2)}
/* The chosen card: warm white, as the brand's receipts and calendars are. */
.plan-pro{
  background:var(--warm-white);
  box-shadow:0 34px 70px -34px rgba(20,0,0,.8);
  --t1:var(--ink-text);--t2:var(--slate);--t3:var(--slate-2);--hl:var(--vermilion-ink);
  --btn-bg:var(--ink);--btn-fg:#fff;--btn-shadow:0 16px 30px -16px rgba(74,58,32,.6);--small:var(--slate);
  color:var(--t1);
}
.pro-lockup{display:inline-flex;align-items:center;gap:9px;color:var(--ink-text)}
.pro-lockup svg{width:34px;height:34px;flex:none}
.pro-lockup span{font-size:24px;font-weight:720;letter-spacing:-0.02em;line-height:1.2}
.pill-blush{
  display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:var(--pill);
  background:var(--blush);color:var(--chip-red);font-size:13px;font-weight:760;letter-spacing:.01em;white-space:nowrap;
}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{display:flex;gap:11px;font-size:15.5px;line-height:1.5;color:var(--t2)}
.ticks li b{color:var(--t1)}
.ticks svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--hl)}
.plan .btn,.plan .store{align-self:flex-start}

/* Billing terms on the Pro card, each with its struck list price. */
.terms{display:grid;gap:8px}
.term{background:var(--sand-light);border-radius:16px;padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.term-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 8.5rem}
.term-name{font-size:15px;font-weight:650;color:var(--t1)}
.term-note{font-size:13px;line-height:1.45;color:var(--t2)}
.term-price{flex:0 0 auto;margin-inline-start:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 9px}
.term-price s,.term-price b{white-space:nowrap}
.term-price s{font-size:14px;color:var(--t3);text-decoration-color:var(--vermilion-ink);text-decoration-thickness:1.5px}
.term-price b{font-size:21px;font-weight:760;letter-spacing:-0.025em;font-variant-numeric:tabular-nums;color:var(--t1)}
.save-note{margin:-6px 0 0;font-size:13px;line-height:1.5;color:var(--t2)}
.save-note b{color:var(--t1);font-weight:650}

/* The dedicated pricing page makes the Free limits and Pro value easy to scan. */
.pricing-page #pricing .sec-head .lead{max-width:56ch}
.pricing-page #pricing .plans{max-width:1080px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:20px}
.pricing-page #pricing .plan{gap:0}
.pricing-page #pricing .plan-head h2{font-size:28px}
.pricing-page #pricing .plan-free .free-price{font-size:34px;font-weight:760;letter-spacing:-.04em;line-height:1;color:var(--rose-white)}
.pricing-page #pricing .plan-note{margin:2px 0 25px}
.pricing-page #pricing .plan-list-title{margin:0 0 12px;font-size:12px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--t1)}
.pricing-page #pricing .ticks{gap:11px}
.pricing-page #pricing .plan-ad-note{
  margin:22px 0 0;padding:13px 16px;border:1px solid rgba(255,171,152,.32);border-radius:15px;
  background:rgba(0,0,0,.17);color:var(--rose-white);font-size:15px;line-height:1.4;
}
.pricing-page #pricing .plan-ad-note strong{font-weight:700}
.pricing-page #pricing .plan-locked{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.pricing-page #pricing .plan-locked ul{list-style:none;display:grid;gap:11px;margin:0;padding:0}
.pricing-page #pricing .plan-locked li{position:relative;padding-left:28px;color:var(--rose-grey);font-size:15px;line-height:1.45}
.pricing-page #pricing .plan-locked li::before{content:"";position:absolute;left:2px;top:.69em;width:13px;height:2px;border-radius:2px;background:var(--rose-grey)}
.pricing-page #pricing .pro-value{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;
  margin:22px 0 24px;padding:17px 19px;border-radius:17px;background:var(--sand-light);
  color:var(--ink-text);font-size:16px;line-height:1.35;
}
.pricing-page #pricing .pro-value strong{color:var(--vermilion-ink);font-size:clamp(26px,3vw,34px);font-weight:780;line-height:1;letter-spacing:-.035em;white-space:nowrap}
.pricing-page #pricing .plan-pro .terms{margin-top:25px}
.pricing-page #pricing .plan-pro .cta{margin-top:24px}
@media (max-width:820px){.pricing-page #pricing .plans{grid-template-columns:minmax(0,1fr)}}
@media (max-width:360px){.pricing-page #pricing .plan-pro .store{height:50px;gap:7px;padding-inline:13px;font-size:14px}}

/* ── FAQ ────────────────────────────────────────────────────────────────
   Native <details>, so it opens with JS off and with a keyboard.          */
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px;margin-inline:auto}
.faq details{background:var(--card-bg);border-radius:20px}
.g-vellum .faq details{box-shadow:0 1px 2px rgba(74,58,32,.06),0 0 0 1px rgba(74,58,32,.04)}
.landing #faq .faq details{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;
  padding:22px clamp(20px,3vw,28px);
  font-size:clamp(16px,1.7vw,18px);font-weight:650;letter-spacing:-0.015em;line-height:1.4;color:var(--t1);
  transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--hl)}
.faq summary::after{
  content:"";flex:none;width:10px;height:10px;margin-top:6px;margin-inline-start:auto;
  border-right:2px solid var(--t3);border-bottom:2px solid var(--t3);
  transform:rotate(45deg);transform-origin:60% 60%;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--hl)}
.faq .answer{padding:0 clamp(20px,3vw,28px) 24px;max-width:68ch}
:root{interpolate-size:allow-keywords}
.faq details::details-content{
  block-size:0;overflow:hidden;opacity:0;
  transition:block-size .34s cubic-bezier(.2,.7,.3,1),opacity .28s ease,content-visibility .34s allow-discrete;
}
.faq details[open]::details-content{block-size:auto;opacity:1}
.faq .answer p{margin:0;font-size:15.5px;line-height:1.65;color:var(--t2);text-wrap:pretty}
.faq .answer p + p{margin-top:12px}
.faq .answer a{color:var(--hl);text-decoration:underline;text-underline-offset:2px}

/* ── The last word: the brand line, the button, the code ───────────────── */
.closer .lead{margin:22px auto 0;text-align:center}
.landing .get{
  display:flex;align-items:center;justify-content:center;gap:26px;
  margin-top:clamp(32px,3.5vw,48px);padding-top:clamp(24px,2.8vw,36px);
  box-shadow:inset 0 1px 0 var(--line);text-align:left;
}
@media (max-width:700px){.landing .get{display:none}}
.qr-card{background:#fff;color:#000;border-radius:18px;padding:12px;width:132px;height:132px;flex:none}
.qr{width:100%;height:100%;display:block}
.get-text .eyebrow{margin-bottom:8px}
.get-text p:not(.eyebrow){margin:0;font-size:15px;line-height:1.6;color:var(--t2);max-width:32ch}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{background:var(--card-black);padding-block:56px 36px;--t1:#fff;--t2:var(--grey);--t3:var(--grey-2)}
/* After the closer the footer is no band of its own: it sits on the same
   black, so the closer's glow fades out through it. */
footer.flush{background:none;padding-top:0}
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 72px;align-items:start}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:46ch}
.foot-brand p{margin:0;font-size:14.5px;line-height:1.6;color:var(--grey)}
.foot-nav{display:grid;gap:12px;justify-items:end}
.foot-nav a{font-size:14.5px;color:var(--grey);text-decoration:none;transition:color .18s}
.foot-nav a:hover{color:#fff}
@media (max-width:720px){
  .foot{grid-template-columns:1fr;gap:26px}
  .foot-nav{justify-items:start;grid-template-columns:repeat(2,auto);gap:12px 28px;justify-content:start}
}
.foot-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 26px;margin-top:40px;padding-top:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:22px}
.foot-legal a{font-size:13px;color:var(--grey-2);text-decoration:none;transition:color .18s}
.foot-legal a:hover{color:#fff}
.foot-legal a[aria-current="page"]{color:var(--grey)}
.foot-legal p{margin:0;font-size:13px;color:var(--grey-2)}
.foot-credit{margin:22px 0 0;text-align:center;font-size:12px;color:var(--grey-2)}
.foot-credit a{color:var(--grey);font-weight:600;text-decoration:none;transition:color .18s}
.foot-credit a:hover{color:#fff}

/* ── Reveal on load, then on scroll ───────────────────────────────────────
   Guarded on `.js`, so a failed script never leaves the page blank.       */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.revealed{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
}

/* ── A plain card on black: the summary box on the legal pages ─────────── */
.promise{background:var(--card);border-radius:var(--r-card);padding:clamp(24px,3.6vw,34px)}
.promise .eyebrow{color:var(--vermilion)}
.promise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px 30px;margin-top:20px}
.promise-grid div{font-size:14.5px;line-height:1.6;color:var(--grey)}
.promise-grid b{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}

/* ── Legal pages (/terms, /privacy, /refunds, /delete-account, /sources) ── */
.legal-grid{
  display:grid;grid-template-columns:204px minmax(0,1fr);
  gap:clamp(30px,5vw,68px);align-items:start;
  margin-top:clamp(36px,5vw,56px);
}
@media (max-width:880px){.legal-grid{grid-template-columns:minmax(0,1fr);gap:30px}}
.legal-toc{position:sticky;top:96px}
.legal-toc p{margin:0 0 12px}
.legal-toc a{
  display:block;padding:6px 0 6px 13px;
  box-shadow:inset 2px 0 0 var(--line);
  font-size:13px;line-height:1.45;color:var(--grey-2);text-decoration:none;
  transition:color .18s,box-shadow .18s;
}
.legal-toc a:hover{color:#fff;box-shadow:inset 2px 0 0 var(--vermilion)}
@media (max-width:880px){
  .legal-toc{
    position:static;border-radius:var(--r-card);padding:20px 22px;background:var(--card);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 22px;
  }
  .legal-toc a{box-shadow:none;padding-inline-start:0}
  .legal-toc a:hover{box-shadow:none}
  .legal-toc p{grid-column:1/-1}
}
.legal-body{max-width:var(--measure);min-width:0}
.legal-sec{
  margin-top:clamp(32px,4vw,44px);padding-top:clamp(32px,4vw,44px);padding-bottom:0;
  box-shadow:inset 0 1px 0 var(--line);scroll-margin-top:96px;
}
.legal-sec:first-child{box-shadow:none;margin-top:0;padding-top:0}
.legal-n{display:block;font-size:11.5px;font-weight:750;color:var(--vermilion);font-variant-numeric:tabular-nums;margin-bottom:10px;letter-spacing:.06em}
.legal-body h2{font-size:clamp(22px,2.6vw,27px);font-weight:720;line-height:1.22;letter-spacing:-0.02em;margin:0}
.legal-body h3{font-size:15px;font-weight:680;color:#fff;margin:24px 0 0}
.legal-body p{font-size:15px;line-height:1.72;color:var(--grey);margin:14px 0 0;text-wrap:pretty}
.legal-body ul,.legal-body ol{margin:14px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:10px}
.legal-body li{font-size:15px;line-height:1.65;color:var(--grey)}
.legal-body li::marker{color:var(--grey-2)}
.legal-body b,.legal-body strong{color:#fff}
.legal-body a{color:var(--vermilion);text-decoration:underline;text-decoration-color:rgba(252,86,66,.4);text-underline-offset:2px}
.legal-body a:hover{text-decoration-color:var(--vermilion)}
.legal-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;color:var(--grey-2);margin:0}
.legal-meta span{display:inline-flex;align-items:center;gap:14px}
.legal-meta span::after{content:"·";color:var(--grey-2);opacity:.6}
.legal-meta span:last-child::after{content:none}
.legal-table-scroll{overflow-x:auto;margin-top:20px;-webkit-overflow-scrolling:touch}
.legal-table{width:100%;min-width:460px;border-collapse:collapse;text-align:left}
.legal-table th,.legal-table td{
  padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;
  font-size:13.5px;line-height:1.55;color:var(--grey);font-weight:500;
}
.legal-table thead th{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-2);font-weight:700;padding-bottom:10px}
.legal-table tbody th{color:#fff;font-weight:650;white-space:nowrap;padding-inline-end:22px}
.legal-table tr:last-child th,.legal-table tr:last-child td{border-bottom:0}