/* =============================================================================
   PepCore — pepcoreapp.com
   ONE stylesheet for every page: / · /ar · /calculator/<slug> · /privacy ·
   /terms · /support. Served same-origin from /s/pepcore.css.

   Rules this file is written under, and does not break:
     · No external requests. No CDN, no Google Fonts, no analytics. The fonts
       are self-hosted at /f/*.woff2; everything else is inline.
     · No gradients, no glow, no glassmorphism, no emoji. BRAND.md's website
       exemption (2026-09-19) removed the gradient from this site deliberately;
       this sheet keeps it removed and also drops the two the old sheet still
       carried (the body top-wash and the .tool radial). Both grounds are now
       flat tones sampled from the shipped AppIcon.
     · Every text pair >= 4.5:1, every UI boundary >= 3:1, measured. The table
       is in CHANGELOG.md and is generated from this file by tools/contrast.py —
       if you change a token, re-run it.
     · Two weights, 400 and 700, per BRAND.md. font-synthesis:none so a weight
       we did not ship can never be faked.
   ========================================================================== */

/* ---------------------------------------------------------------- typeface
   PepCore Sans  = IBM Plex Sans Arabic, SIL OFL 1.1 (fonts/OFL.txt).
   PepCore Mono  = IBM Plex Mono,        SIL OFL 1.1 (fonts/OFL.txt).
   "Plex" is a Reserved Font Name under OFL §3 and a subset is a Modified
   Version, so both name tables are rewritten. The copyright and licence
   records travel inside the files untouched. Rebuild with tools/build-fonts.py
   after any copy change that introduces a character outside the subset.

   Two families, one design system. The Sans carries Arabic AND a complete
   Latin at identical metrics, so /ar never drops "PepCore", "mg/mL" or
   "$39.99" onto a second face mid-sentence. The Mono carries digits, units
   and labels only — it is the instrument voice, and it is never asked to set
   Arabic (it has none: Arabic quantities fall back to the Sans).
   -------------------------------------------------------------------------- */
@font-face{font-family:"PepCore Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/f/pepcore-sans-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2190,U+2192,U+2212,U+00B7}
@font-face{font-family:"PepCore Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/f/pepcore-sans-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+2190,U+2192,U+2212,U+00B7}
/* Arabic is a second unicode-range on the SAME family, so an Arabic page that
   never uses it does not download it, and a Latin run inside an Arabic
   sentence keeps the same family, metrics and colour. */
@font-face{font-family:"PepCore Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/f/pepcore-sans-arabic-400.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200F,U+2066-2069}
@font-face{font-family:"PepCore Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/f/pepcore-sans-arabic-700.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200F,U+2066-2069}
@font-face{font-family:"PepCore Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/f/pepcore-mono-400.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00B7,U+2013-2014,U+2022,U+2026,U+2192,U+2212}
@font-face{font-family:"PepCore Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/f/pepcore-mono-700.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00B7,U+2013-2014,U+2022,U+2026,U+2192,U+2212}

/* ------------------------------------------------------------------ tokens */
:root{
  --sans:"PepCore Sans",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",sans-serif;
  --mono:"PepCore Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* GROUND — two flat tones from the shipped AppIcon (#0D1224 → #04070E).
     Flat, not a gradient: the icon's own ground supplies both ends, so the
     page can use them as two surfaces instead of a wash. */
  --bg:#05080F;      /* page                                                */
  --mast:#0D1224;    /* the instrument column — the icon's light end        */
  --s1:#0A1020;      /* panel                                               */
  --s2:#0E1527;      /* field / inset                                       */

  /* NEUTRALS — ONE scale, toned to the ground's hue (~222°) rather than
     pure grey, so nothing on the page is a colour the ground is not.
     Ratios on --bg / --s2 (the worst ground) are in the comments. */
  --n0:#F2F4F8;      /* 18.20 / 16.51  primary text                          */
  --n1:#B4BACB;      /* 10.33 /  9.37  secondary text                        */
  --n2:#8A93AA;      /*  6.52 /  5.92  captions, legal small print           */
  --n3:#6E7996;      /*  4.62 /  4.19  UI boundaries + icon strokes (>=3:1)  */
  --n4:#3A4257;      /*  2.00          panel borders (decorative)            */
  --n5:#232B3E;      /*  1.42          hairline rules inside panels          */

  /* BRAND — the app's own pair, used the way the app uses it.               */
  --accent:#738CFF;  /* 6.61 on --bg · text, links, kickers, focus ring      */
  --fill:#2E73D9;    /* Color.brand · solid fills, ALWAYS under white (4.59) */
  --fill-h:#2563C4;  /* hover  — white on it is 5.74. The old #3B81E8 was    */
  --fill-a:#1F5CBA;  /* active — 3.82 and failed AA on hover. Hover darkens. */

  /* TYPE — 11 · 12.5 · 14 · 16 · 19 · 24 · 32 · 44 · 60 */
  --t-2xs:11px; --t-xs:12.5px; --t-sm:14px; --t-md:16px; --t-lg:19px;
  --t-xl:clamp(21px,2.2vw,24px);
  --t-2xl:clamp(25px,3vw,32px);
  --t-3xl:clamp(30px,4.2vw,44px);
  --t-4xl:clamp(34px,5.4vw,60px);

  /* SPACE — 4px base. Nothing outside this list. */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* RADIUS — three tiers, chosen by element size. */
  --r-1:8px; --r-2:14px; --r-3:26px; --r-pill:999px;

  --measure:68ch;    /* the reading measure, capped per element not by frame */
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  font-synthesis:none;
  background:var(--bg);
  color:var(--n0);
  font-size:var(--t-md);
  line-height:1.6;
  letter-spacing:-.011em;      /* body is tracked NEGATIVE; RTL zeroes it    */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ------------------------------------------------------------ type ramp */
h1,h2,h3,h4{text-wrap:balance}
h1{font-size:var(--t-4xl);font-weight:400;line-height:1.02;letter-spacing:-.032em}
h2{font-size:var(--t-2xl);font-weight:700;line-height:1.1;letter-spacing:-.024em}
h3{font-size:var(--t-md);font-weight:700;line-height:1.35;letter-spacing:-.008em}
p{text-wrap:pretty}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--n0)}
strong,b{font-weight:700}
small{font-size:var(--t-xs)}
::selection{background:var(--accent);color:#04070E}

/* Focus. One treatment everywhere, drawn OUTSIDE the box so it never shifts
   layout, and 6.61:1 against the ground. Never removed — only replaced. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:none}

.skip{position:absolute;inset-inline-start:var(--s-4);top:-60px;z-index:100;
  background:var(--fill);color:#fff;padding:10px 16px;border-radius:var(--r-1);
  font-size:var(--t-sm);font-weight:700;text-decoration:none;transition:top .12s}
.skip:focus{top:var(--s-4);color:#fff}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ═══════════════════════════════════════════════════ THE SPLIT ═══════════
   The calculator is the reason anyone arrives, so it is never something the
   reader scrolls back to: it holds its own column and stays on screen while
   every word of the argument — the subscription disclosure included — moves
   past it in the other. A CSS grid follows writing direction, so dir="rtl"
   alone puts the instrument on the RIGHT. There is no RTL rule in this block
   on purpose; every physical property below is logical.
   ======================================================================== */
.shell{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);min-height:100vh}

.rail{
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--mast);
  border-inline-end:1px solid var(--n5);
  padding:var(--s-5) var(--s-6) var(--s-6);
  display:flex;flex-direction:column;gap:var(--s-4);
  scrollbar-width:thin;scrollbar-color:var(--n4) transparent;
}
.read{min-width:0;display:flex;flex-direction:column}
/* Wide screens get a wider gutter, not wider text. */
.read>*{padding-inline:clamp(var(--s-5),3.6vw,var(--s-8))}
.read section{padding-block:clamp(var(--s-7),5vw,var(--s-9));max-width:960px}
/* A section whose heading lives in the instrument column (the compound
   pages' opener) does not need a full plate of air under it. */
.read section.tight{padding-block:clamp(var(--s-6),3vw,var(--s-7))}
.read section>*{max-width:var(--measure)}

/* One column below 1080px. The rail is FIRST in source order, so a phone gets
   the calculator at the top with no order: juggling and no reading-order bug. */
@media(max-width:1080px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;overflow:visible;border-inline-end:0;
    border-block-end:1px solid var(--n5);
    padding:var(--s-5) clamp(var(--s-4),5vw,var(--s-6)) var(--s-6)}
  .rail>*{max-width:640px;margin-inline:auto;width:100%}
}

/* ------------------------------------------------------------- masthead */
.brandmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--n0);font-weight:700;font-size:var(--t-md);letter-spacing:.04em;width:max-content}
.brandmark img{width:28px;height:28px;border-radius:7px;display:block}
.brandmark .core{color:var(--accent)}
.brandmark:hover{color:var(--n0)}

/* The compliance band. Required on every surface; it is set in the mono so it
   reads as a stamp rather than as a sentence someone wrote, and it is never
   re-worded — the exact strings are the approved register (TRUTH.md). */
.band{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.04em;
  color:var(--n2);line-height:1.5}
[dir="rtl"] .band{font-family:var(--sans);font-size:var(--t-xs);letter-spacing:0}

/* ------------------------------------------------- the numbered spine
   The one typographic device the site repeats. A section is announced by a
   hanging mono ordinal and a rule that runs to the edge of the column — the
   page reads as a set of numbered plates, not as a stack of identical cards.
   This is also what replaces the "three-card grid repeated down the page". */
.plate{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-5);
  max-width:none;flex-wrap:wrap}
.plate .no{font-family:var(--mono);font-size:var(--t-xs);color:var(--accent);
  font-weight:400;letter-spacing:.08em;flex:0 0 auto;font-variant-numeric:tabular-nums}
/* flex:0 1 auto + min-width:0, so a long plate title wraps instead of pushing
   the document wider than the viewport — which it did at 360px on the
   compound pages, where the kicker is three phrases long. */
.plate .ti{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--n2);font-weight:400;flex:0 1 auto;min-width:0}
.plate .ln{flex:1 1 32px;min-width:16px;height:1px;background:var(--n5);align-self:center}
[dir="rtl"] .plate .ti{letter-spacing:0;text-transform:none;font-family:var(--sans);
  font-size:var(--t-sm)}
/* The Arabic page numbers its plates in Arabic-Indic digits — an ornament, not
   a quantity, so the Western-digit rule below does not reach it. PepCore Mono
   has no Arabic-Indic digits, so the ordinal is set in the Sans or it would
   fall through to the system monospace and open a seam. */
[dir="rtl"] .plate .no{font-family:var(--sans);letter-spacing:0}

.lede{color:var(--n1);font-size:var(--t-lg);margin-top:var(--s-4);max-width:56ch;
  line-height:1.55}

/* The reading column's own nav. Sticky on desktop; on one column it sits under
   the calculator, which is where it belongs — the tool comes first. */
.topnav{position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--n5);max-width:none}
.topnav ul{list-style:none;display:flex;align-items:center;gap:var(--s-5);
  height:60px;margin:0}
.topnav a{font-size:14px;text-decoration:none;color:var(--n1)}
.topnav a:hover{color:var(--accent)}
.topnav li:last-child{margin-inline-start:auto}
.topnav .btn{min-height:38px;padding:7px 15px;font-size:13.5px}
@media(max-width:1080px){.topnav{position:static}}
@media(max-width:420px){.topnav ul{gap:var(--s-4)}.topnav a{font-size:13px}}
.railtop{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
.railtop a.lang{font-size:14px;text-decoration:none;color:var(--n1)}
.railtop a.lang:hover{color:var(--accent)}
.prose{color:var(--n1);max-width:64ch}
.prose+.prose{margin-top:var(--s-4)}
.fine{color:var(--n2);font-size:var(--t-xs);line-height:1.6;max-width:76ch}
.fine+.fine{margin-top:var(--s-3)}
.fine b{color:var(--n1)}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:11px 20px;border-radius:var(--r-1);
  font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .14s,border-color .14s,color .14s}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
.btn-primary{background:var(--fill);color:#fff}      /* white on fill = 4.59 */
.btn-primary:hover{background:var(--fill-h);color:#fff}
.btn-primary:active{background:var(--fill-a)}
.btn-ghost{border-color:var(--n4);color:var(--n0);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--n0)}
.btn .i{width:18px;height:18px;flex:0 0 auto}

/* Apple's badge. Apple's identity guidelines require the ARTWORK, unmodified,
   from Apple's Marketing Resources — it may not be redrawn, recoloured or
   rebuilt, so this is a slot, not a picture. Minimum height is 40px; 44px is
   used here so the target also clears the 44px touch minimum. Clear space is
   25% of badge height on every side, which is what the padding below is. */
.appstore{display:inline-block;padding:11px;margin:-11px;line-height:0;border-radius:var(--r-1)}
.appstore img,.appstore svg{height:44px;width:auto;display:block}

/* ═══════════════════════════════════════════════ THE CALCULATOR ══════════
   Visual restyle only. Inputs, outputs, logic and result wording are the
   shipped ones, character for character. Any change to what it OUTPUTS goes
   to Legal first — see CHANGELOG.md.
   ======================================================================== */
.calc{display:grid;gap:var(--s-3)}
.card,.out{background:var(--s1);border:1px solid var(--n5);border-radius:var(--r-2);
  padding:var(--s-5)}
.rail .card,.rail .out{padding:var(--s-4) var(--s-5)}

.field+.field{margin-top:var(--s-4)}
.rail .field+.field{margin-top:var(--s-3)}
label{display:block;font-size:13px;color:var(--n1);margin-bottom:6px;font-weight:400}
.inputrow{display:flex;gap:var(--s-2)}

input[type=number],input[type=email],input[type=text],select{
  width:100%;min-height:44px;
  background:var(--s2);
  border:1px solid var(--n3);            /* 4.19:1 on --s2 — WCAG 1.4.11    */
  border-radius:var(--r-1);
  padding:11px 12px;
  color:var(--n0);font-size:var(--t-md);font-family:inherit;
  font-variant-numeric:tabular-nums;
  outline:none;transition:border-color .14s,box-shadow .14s;
  -moz-appearance:textfield;appearance:none}
@media(prefers-reduced-motion:reduce){input,select{transition:none}}
input[type=number]{font-family:var(--mono);font-size:15px}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input::placeholder{color:var(--n3);opacity:1}
input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent)}
select{cursor:pointer;padding-inline-end:34px;
  /* The chevron is drawn with two borders, not a background-image gradient —
     the old sheet built it from two linear-gradients, which is a gradient. */
  background-image:none}
.selwrap{position:relative;display:block;flex:1 1 auto;min-width:0}
/* A chevron points DOWN in both directions — it means "this opens", not "this
   way". So the two borders are physical on purpose; only its POSITION is
   logical, which is what has to mirror. */
.selwrap::after{content:"";position:absolute;inset-inline-end:13px;top:calc(50% - 5px);
  width:7px;height:7px;border-right:1.5px solid var(--n2);
  border-bottom:1.5px solid var(--n2);transform:rotate(45deg);pointer-events:none}
.unitsel{flex:0 0 96px}
.unitsel select{font-family:var(--mono);font-size:14px}
.hint{font-size:var(--t-xs);color:var(--n2);margin-top:6px;line-height:1.5}

/* Compound presets. Real <button>s, aria-pressed, 44px targets. */
.chips{display:flex;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-2) 0 8px}
.chip{min-height:36px;padding:6px 14px;border-radius:var(--r-pill);
  border:1px solid var(--n4);background:transparent;color:var(--n1);
  font-family:var(--mono);font-size:13px;cursor:pointer;transition:border-color .14s,color .14s}
.chip:hover{border-color:var(--n3);color:var(--n0)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--n0)}
/* State is carried by a filled dot as well as by the border colour, so the
   selected chip is not identified by colour alone (WCAG 1.4.1). */
.chip[aria-pressed="true"]::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--accent);margin-inline-end:7px;vertical-align:1px}

/* The answer. The one element allowed to be loud, and it is loud by SIZE and
   by a solid rule — never by a gradient text-fill. */
.big{padding-bottom:var(--s-4);border-bottom:1px solid var(--n5);margin-bottom:var(--s-4)}
.big .n{font-family:var(--mono);font-size:clamp(44px,6.4vw,60px);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--n0);
  font-variant-numeric:tabular-nums;display:block}
.rail .big .n{font-size:clamp(38px,2.8vw,46px)}
.big .n.idle{visibility:hidden}   /* keeps the panel height stable: CLS 0    */
.big .k{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-top:10px;font-weight:700;
  transition:opacity .18s}
[dir="rtl"] .big .k{font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:var(--t-sm)}
.big .s{font-family:var(--mono);font-size:var(--t-sm);color:var(--n2);margin-top:3px;
  font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
  .big .k.tick{animation:tick .34s ease-out}
  @keyframes tick{0%{opacity:.35}100%{opacity:1}}
}

.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:10px 0;border-bottom:1px solid var(--n5);font-size:14px}
.row:last-child{border-bottom:0;padding-bottom:0}
.row .k{color:var(--n2)}
.row .v{font-family:var(--mono);font-weight:700;color:var(--n0);
  font-variant-numeric:tabular-nums;text-align:end}

/* The input notice. Neutral, NOT amber. BRAND.md forbids red/orange as an
   accent; the old homepage kept an amber box here while the 180 compound
   pages had already moved to a neutral notice, so the same message wore two
   different meanings on one site. One treatment now, on every page, and the
   icon carries the meaning so colour never has to. */
.warn{display:none;margin-top:var(--s-4);padding:11px 13px;border-radius:var(--r-1);
  background:#101828;border:1px solid var(--n4);
  border-inline-start:2px solid var(--accent);
  color:var(--n1);font-size:13px;line-height:1.55}
.warn.on{display:flex;gap:10px;align-items:flex-start}
.warn .i{width:16px;height:16px;flex:0 0 auto;margin-top:3px;color:var(--accent)}
.note{font-size:var(--t-xs);color:var(--n2);margin-top:var(--s-4);line-height:1.55}
.rail .note{font-size:11.5px;margin-top:var(--s-3)}

/* ------------------------------------------------------- compound links */
.linklist{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4);max-width:none}
.linklist a{display:inline-flex;align-items:center;min-height:36px;
  border:1px solid var(--n5);border-radius:var(--r-pill);padding:6px 14px;
  font-family:var(--mono);font-size:13px;color:var(--n1);text-decoration:none;
  background:var(--s1);transition:border-color .14s,color .14s}
.linklist a:hover{border-color:var(--accent);color:var(--n0)}

/* ═════════════════════════════════════════════ PRODUCT IMAGERY ══════════
   The device frame is drawn in CSS: a hairline bezel, one radius, no shadow
   stack, no perspective, no glow. The image inside is the app's own screen,
   cropped out of the shipped App Store screenshots — not a screenshot of a
   screenshot inside its own marketing frame. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);
  margin-top:var(--s-6);max-width:none}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots figure:nth-child(3){display:none}}
@media(max-width:520px){.shots{grid-template-columns:1fr;max-width:300px}
  .shots figure:nth-child(3){display:block}}
.device{border:1px solid var(--n4);border-radius:var(--r-3);padding:6px;
  background:var(--s1);overflow:hidden}
.device img{display:block;width:100%;height:auto;aspect-ratio:49/100;object-fit:cover;
  object-position:top center;border-radius:21px;background:#F2F2F7}
figcaption{color:var(--n1);font-size:var(--t-sm);margin-top:var(--s-3);line-height:1.5}
figcaption .sd{display:block;font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--n2);margin-top:5px}
[dir="rtl"] figcaption .sd{font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:var(--t-xs)}

/* ═══════════════════════════════════════════════════ FEATURES ═══════════
   Grouped by the user's job — plan, mix, log, review — not a flat grid, and
   not the same three-card row four times. Each job is a ruled plate with a
   hanging label and two items; the items are ruled list entries, not cards. */
.jobs{margin-top:var(--s-6);max-width:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s-8);row-gap:var(--s-7)}
@media(max-width:820px){.jobs{grid-template-columns:1fr;row-gap:var(--s-6)}}
.job>h3{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:400;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--n5)}
[dir="rtl"] .job>h3{font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:var(--t-sm);font-weight:700}
.job dl{margin-top:var(--s-4)}
.job dt{display:flex;align-items:center;gap:9px;font-weight:700;font-size:var(--t-md);
  color:var(--n0);letter-spacing:-.008em}
.job dt .i{width:17px;height:17px;flex:0 0 auto;color:var(--accent)}
.job dd{color:var(--n1);font-size:var(--t-sm);line-height:1.65;margin-top:6px;
  max-width:42ch}
.job dd+dt{margin-top:var(--s-5)}

/* ═══════════════════════════════════════════════════ PRICING ════════════ */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);
  margin-top:var(--s-6);max-width:none}
@media(max-width:700px){.plans{grid-template-columns:1fr}}
.plan{background:var(--s1);border:1px solid var(--n5);border-radius:var(--r-2);
  padding:var(--s-5);display:flex;flex-direction:column}
.plan.lead{border-color:var(--n3)}
.plan h3{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--n2);font-weight:400}
[dir="rtl"] .plan h3{font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:var(--t-sm);font-weight:700}
.price{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.02em;
  margin:10px 0 2px;font-variant-numeric:tabular-nums;color:var(--n0)}
.price small{font-family:var(--sans);font-size:14px;font-weight:400;color:var(--n2);
  letter-spacing:0}
.plan .sub{color:var(--n2);font-size:13px;margin-top:2px}
.plan .sub b{color:var(--n1)}
.plan ul{list-style:none;margin-top:var(--s-4)}
.plan li{color:var(--n1);font-size:var(--t-sm);padding:7px 0;position:relative;
  padding-inline-start:24px;line-height:1.6}
.plan li .i{position:absolute;inset-inline-start:0;top:11px;width:14px;height:14px;
  color:var(--accent)}

/* ═══════════════════════════════════════════════════ FAQ ═══════════════ */
.faq{margin-top:var(--s-5);max-width:var(--measure)}
.faq details{border-bottom:1px solid var(--n5)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s-4);padding:var(--s-5) 0;min-height:44px;
  font-weight:700;font-size:15px;color:var(--n0);letter-spacing:-.008em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .i{width:16px;height:16px;flex:0 0 auto;color:var(--accent);
  transition:transform .18s}
@media(prefers-reduced-motion:reduce){.faq summary .i{transition:none}}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq details>div{padding-bottom:var(--s-5)}
.faq p{color:var(--n1);font-size:var(--t-sm);line-height:1.7;max-width:64ch}
.faq p+p{margin-top:var(--s-3)}

/* ═══════════════════════════════════════════ DISCLAIMER + FOOTER ═══════ */
.disc{border-inline-start:2px solid var(--accent);padding-inline-start:var(--s-5);
  margin-top:var(--s-6);max-width:none}
.disc h2,.disc h3{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:400;line-height:1.4}
[dir="rtl"] .disc h2,[dir="rtl"] .disc h3{font-family:var(--sans);letter-spacing:0;
  text-transform:none;font-size:var(--t-sm);font-weight:700}
.disc p{color:var(--n1);font-size:var(--t-sm);margin-top:var(--s-3);max-width:76ch;
  line-height:1.7}

.sitefoot{border-top:1px solid var(--n5);padding-block:var(--s-6) var(--s-8);
  margin-top:auto}
.sitefoot nav{display:flex;gap:var(--s-5);flex-wrap:wrap;font-size:var(--t-sm)}
.sitefoot nav a{color:var(--n1);text-decoration:none}
.sitefoot nav a:hover{color:var(--accent);text-decoration:underline}
.sitefoot .c{color:var(--n2);font-size:var(--t-xs);margin-top:var(--s-4);
  display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}

/* ═══════════════════════════════════════════════════ SIGNUP ════════════ */
.sig{border:1px solid var(--n5);border-radius:var(--r-2);padding:var(--s-5);
  background:var(--s1);max-width:560px}
.sigrow{display:flex;gap:var(--s-3);margin-top:var(--s-4)}
@media(max-width:480px){.sigrow{flex-direction:column}}
.sigrow input{flex:1 1 auto;min-width:0}
.sig .msg{font-size:13.5px;margin-top:var(--s-3);display:none;align-items:center;gap:8px}
.sig .msg.on{display:flex}
.sig .msg .i{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
/* Honeypot. Clipped, never offset: a negative inline offset on an RTL page
   lands past the inline end and used to stretch the document to 11,279px. */
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;opacity:0}

/* ═══════════════════════════════════════════ COMPOUND PAGE EXTRAS ══════ */
.crumb{font-family:var(--mono);font-size:var(--t-xs);color:var(--n2);
  padding-block:var(--s-4);border-bottom:1px solid var(--n5)}
[dir="rtl"] .crumb{font-family:var(--sans);font-size:var(--t-sm)}
.crumb a{color:var(--n1);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.cat{display:inline-block;font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--n4);
  border-radius:var(--r-pill);padding:3px 10px;color:var(--n2);
  margin-inline-start:10px;vertical-align:middle}
[dir="rtl"] .cat{font-family:var(--sans);letter-spacing:0;text-transform:none;
  font-size:var(--t-xs)}
ul.bul{list-style:none;display:grid;gap:var(--s-4);margin-top:var(--s-4);max-width:var(--measure)}
ul.bul li{color:var(--n1);font-size:var(--t-sm);line-height:1.7;
  padding-inline-start:var(--s-4);border-inline-start:1px solid var(--n4)}
.refpanel{background:var(--s1);border:1px solid var(--n5);border-radius:var(--r-2);
  padding:var(--s-5);margin-top:var(--s-4);max-width:var(--measure)}
.refpanel p{color:var(--n1);font-size:var(--t-sm);line-height:1.7}
.refpanel p+p{margin-top:var(--s-3)}
.refpanel .cap{font-size:var(--t-xs);color:var(--n2);margin-top:var(--s-4);
  border-top:1px solid var(--n5);padding-top:var(--s-3)}
.endcta{border-inline-start:2px solid var(--accent);padding-inline-start:var(--s-5);
  max-width:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--s-2);margin-top:var(--s-5);max-width:none}
.tile{display:block;background:var(--s1);border:1px solid var(--n5);
  border-radius:var(--r-1);padding:14px 16px;text-decoration:none;color:var(--n0);
  transition:border-color .14s}
.tile:hover{border-color:var(--accent);color:var(--n0)}
.tile .nm{font-weight:700;font-size:var(--t-sm)}
.tile .cl{font-family:var(--mono);font-size:var(--t-2xs);color:var(--n2);
  letter-spacing:.06em;margin-top:3px}
[dir="rtl"] .tile .cl{font-family:var(--sans);letter-spacing:0;font-size:var(--t-xs)}
.langs{display:flex;gap:var(--s-4);flex-wrap:wrap;margin:var(--s-3) 0 var(--s-5);
  font-size:var(--t-sm)}
.langs a{color:var(--n1);text-decoration:none}
.langs a:hover{color:var(--accent)}

/* ═══════════════════════════════════════════════ LEGAL PAGES ═══════════
   One column, one measure, no rail. The text is the shipped legal text and
   is never edited by a designer — only the frame around it is. */
.doc{max-width:760px;margin:0 auto;padding-inline:clamp(var(--s-5),5vw,var(--s-8));
  padding-block:0 var(--s-9)}
.doc h1{font-size:var(--t-3xl);margin-top:var(--s-8)}
.doc .updated{font-family:var(--mono);font-size:var(--t-xs);color:var(--n2);
  margin-top:var(--s-3);letter-spacing:.04em}
[dir="rtl"] .doc .updated{font-family:var(--sans);letter-spacing:0}
.doc h2{font-size:var(--t-xl);margin-top:var(--s-7);padding-top:var(--s-5);
  border-top:1px solid var(--n5)}
.doc h3{margin-top:var(--s-5)}
.doc p,.doc li{color:var(--n1);font-size:var(--t-md);line-height:1.75;margin-top:var(--s-4)}
.doc ul,.doc ol{margin-top:var(--s-4);padding-inline-start:var(--s-5)}
.doc li{margin-top:var(--s-2)}
.doc strong{color:var(--n0)}
.doc .box{background:var(--s1);border:1px solid var(--n5);border-radius:var(--r-2);
  padding:var(--s-5);margin-top:var(--s-5)}
.doc .box p{margin-top:0}
.doc table{width:100%;border-collapse:collapse;margin-top:var(--s-4);font-size:var(--t-sm)}
.doc th,.doc td{text-align:start;padding:10px 12px;border:1px solid var(--n5);color:var(--n1)}
.doc th{color:var(--n0);font-weight:700;background:var(--s1)}
.docbar{border-bottom:1px solid var(--n5)}
.docbar .in{max-width:760px;margin:0 auto;padding:var(--s-4) clamp(var(--s-5),5vw,var(--s-8));
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  font-size:var(--t-sm)}
.docbar a{text-decoration:none}

/* ═══════════════════════════════════════════════════ RTL ═══════════════
   A true right-to-left page, not a mirrored one. Everything above is already
   logical (inline-start/end, text-align:start), so this block only carries
   what direction alone cannot fix: Arabic typography.
   ======================================================================== */
[dir="rtl"] body{letter-spacing:0;line-height:1.8}   /* tracking breaks joining */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .price,
[dir="rtl"] .lede,[dir="rtl"] .faq summary{letter-spacing:0}
/* Arabic sets harakat above the line and runs taller ascenders, so leading
   tuned for Latin clips it. This is the face's requirement, not a taste call. */
[dir="rtl"] h1{line-height:1.3}
[dir="rtl"] h2{line-height:1.35}
[dir="rtl"] h3{line-height:1.5}
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] dd,[dir="rtl"] .hint,[dir="rtl"] .note,
[dir="rtl"] figcaption{line-height:1.85}
/* A quantity is not prose: it reads "5 mg/mL", never "mg/mL 5". Every numeric
   readout is isolated, so a bidi-neutral at either end cannot flip it. */
[dir="rtl"] .big .n,[dir="rtl"] .big .s,[dir="rtl"] .row .v,
[dir="rtl"] .price{direction:ltr;unicode-bidi:isolate;text-align:end}
[dir="rtl"] .price{text-align:start}
/* Latin runs inside an Arabic sentence: compound names, units, "PepCore". */
.ltr{direction:ltr;unicode-bidi:isolate}
/* Western digits on the Arabic pages, deliberately: a vial label and a syringe
   barrel are printed in Western digits, and a calculator whose numerals do not
   match the object in the reader's hand is a worse calculator. */
[dir="rtl"]{font-variant-numeric:lining-nums}
/* A number field holds a quantity, not a sentence: it is typed and read
   left-to-right even here, and it sits at the inline end like every other
   field's content. */
[dir="rtl"] input[type=number]{direction:ltr;text-align:end}
/* …but an empty field is showing a placeholder, which IS a sentence. */
[dir="rtl"] input[type=number]:placeholder-shown{direction:rtl}

/* ═══════════════════════════════════════════════════ MOTION ════════════
   Two movements on the whole site, both opt-in and neither able to move
   layout (transform and opacity only, so CLS stays 0):
     1. a plate settles as it enters — CSS only, no observer, no JS;
     2. the answer's caption ticks when the number changes.
   Everything is visible without them. */
@media(prefers-reduced-motion:no-preference){
  @supports(animation-timeline:view()){
    .read section{animation:settle linear both;animation-timeline:view();
      animation-range:entry 0% entry 42%}
    @keyframes settle{from{opacity:.001;transform:translateY(10px)}
      to{opacity:1;transform:none}}
  }
}

/* ═══════════════════════════════════ PRE-LAUNCH PLUMBING ══════════════
   Kept from the shipped site, unchanged in behaviour. data-prelaunch="false"
   is the live state; flipping it to "true" re-arms the placeholder labels and
   disables the store links. Do not delete — this is how a re-submission is
   staged. */
body[data-prelaunch="false"] .prelaunch-note,
body[data-prelaunch="false"] .lbl-soon{display:none}
body[data-prelaunch="true"] .lbl-live{display:none}
body[data-prelaunch="true"] a[href^="https://apps.apple.com/"]{pointer-events:none;
  cursor:default;opacity:.75}
.prelaunch-note{font-size:var(--t-sm);color:var(--n2);margin-top:var(--s-4);max-width:70ch}

/* ═══════════════════════════════════════════════════ PRINT ═════════════ */
@media print{
  body{background:#fff;color:#000}
  .rail,.sitefoot nav,.skip,.appstore{display:none}
  .doc p,.doc li,.doc h1,.doc h2{color:#000}
  a{color:#000;text-decoration:underline}
}