@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* Colours are the app's own tokens, from
   Modules/LibrettoKit/Sources/DesignSystem/Tokens/LibrettoColors.swift.
   Change them there and here together, the way BRAND.md asks of the icon. */

:root {
  color-scheme: light dark;

  --paper-base: #fbf9f4;     /* paperBase   */
  --paper-raised: #f5f2eb;   /* paperRaised */
  --paper-deep: #edE8dd;     /* paperDeep   */
  --gutter: #e0d9c8;         /* paperGutter */

  --ink: #1a1b22;            /* inkPrimary   */
  --ink-soft: #5e6068;       /* inkSecondary */

  --brand: #5c33c7;          /* brand        */
  --brand-ink: #3c1fb4;      /* brandInk     */
  --brand-lifted: #7b55e0;   /* brandLifted  */
  --brand-wash: #eae0ff;     /* brandWash    */
  --on-brand: #f7f5ff;
  --gold: #7b6535;           /* accentGold   */

  --measure: 38rem;
  --wide: 62rem;
  --radius: 0.875rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper-base: #121318;
    --paper-raised: #1a1b21;
    --paper-deep: #22232a;
    --gutter: #32333c;

    --ink: #f6f3ed;
    --ink-soft: #bbb8b0;

    --brand: #7b55e0;
    --brand-ink: #976fff;
    --brand-lifted: #976fff;
    --brand-wash: #2e1e4d;
    --gold: #e0b860;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 1.25rem 5rem;
  background: var(--paper-base);
  color: var(--ink);
  font: 400 1.0625rem/1.65 ui-serif, "New York", Georgia, "Times New Roman", serif;
}

/* The serif stack carries no Arabic, and a fallback chosen by the browser is
   how Arabic ends up rendered in something that does not match the app. */
[lang="ar"] body,
[lang="ar"] .switch,
[lang="ar"] button {
  font-family: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", system-ui, sans-serif;
  line-height: 1.9;
}

header, main, footer { max-width: var(--measure); margin: 0 auto; }
body.home header, body.home main, body.home footer { max-width: 78rem; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 1.25rem;
  border-bottom: 1px solid var(--gutter);
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper-base) 94%, transparent);
  transition: box-shadow 180ms ease-out;
}
.site-header[data-scrolled="true"] { box-shadow: 0 10px 28px rgba(26, 27, 34, 0.08); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  min-height: 2.75rem;
}

/* Never mirrored, per BRAND.md: a flipped bird is a different bird. */
.wordmark img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  transform: none !important;
}

.site-nav { display: flex; align-items: center; gap: 1rem; font-size: 0.9375rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--brand-ink); }
.nav-toggle { display: none; min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--gutter); border-radius: 999px; background: var(--paper-raised); color: var(--ink); }
.skip-link { position: fixed; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 100; padding: 0.75rem 1rem; border-radius: 999px; background: var(--brand); color: var(--on-brand); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

h1 { font-size: 2rem; line-height: 1.2; margin: 2.5rem 0 0.5rem; letter-spacing: -0.015em; }
h2 { font-size: 1.1875rem; margin: 2.5rem 0 0.5rem; letter-spacing: -0.005em; }
h3 { font-size: 1rem; margin: 1.75rem 0 0.375rem; }

.lede { color: var(--ink-soft); font-size: 1.0625rem; margin-top: 0; }
.stamp { font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin: 0 0 2rem; }

ul, ol { padding-inline-start: 1.25rem; }
li { margin: 0.35rem 0; }
a { color: var(--brand-ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brand-lifted); outline-offset: 3px; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9375rem; }
th, td {
  text-align: start;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--gutter);
  vertical-align: top;
}
th { font-weight: 600; color: var(--ink-soft); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--gutter);
  border-radius: var(--radius);
  padding: 1.25rem 1.375rem;
  margin: 1.5rem 0;
}
.card p:last-child { margin-bottom: 0; }
.card p:first-child { margin-top: 0; }

.switch {
  appearance: none;
  border: 1px solid var(--gutter);
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font: inherit;
  font-size: 0.875rem;
  min-height: 2.25rem;
  cursor: pointer;
}
.switch:hover { border-color: var(--brand); color: var(--brand-ink); }

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gutter);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
footer a { display: inline-flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: 0.25rem; }

[hidden] { display: none !important; }
img { max-width: 100%; }

/* ── Home ──────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: 3.5rem 0 1rem;
}

@media (min-width: 46rem) {
  .hero { grid-template-columns: 1.25fr 0.75fr; gap: 3rem; }
}

.hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.1rem); margin-top: 0; }
.hero p { font-size: 1.125rem; color: var(--ink-soft); max-width: 34rem; }

.hero-mark {
  justify-self: center;
  width: min(15rem, 60vw);
  aspect-ratio: 1;
  border-radius: 1.75rem;
  box-shadow: 0 1.5rem 3rem rgba(60, 31, 180, 0.22);
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  min-height: 2.75rem;
  background: var(--brand);
  color: var(--on-brand);
  border: 1px solid transparent;
}
.button:hover { background: var(--brand-ink); }
.button.quiet { background: transparent; color: var(--brand-ink); border-color: var(--gutter); }
.button.quiet:hover { border-color: var(--brand); background: var(--brand-wash); }

.note { font-size: 0.875rem; color: var(--ink-soft); margin-top: 0.85rem; }

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .features { grid-template-columns: 1fr 1fr; } }

.features li {
  background: var(--paper-raised);
  border: 1px solid var(--gutter);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin: 0;
}
.features strong { display: block; margin-bottom: 0.3rem; font-size: 1rem; }
.features span { color: var(--ink-soft); font-size: 0.9375rem; }

.rule { border: 0; border-top: 1px solid var(--gutter); margin: 3rem 0 0; }

.audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (min-width: 46rem) { .audience { grid-template-columns: 1fr 1fr; } }

.audience .card { margin: 0; }
.audience h3 { margin-top: 0; }

.gold { color: var(--gold); }

@media (max-width: 30rem) {
  h1 { font-size: 1.7rem; }
  body { font-size: 1rem; }
}

@media (max-width: 64rem) {
  .site-header { flex-wrap: wrap; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .site-nav { display: none; flex-basis: 100%; align-items: stretch; flex-direction: column; gap: 0; padding-block: 0.75rem; }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a, .site-nav .switch { justify-content: flex-start; width: 100%; min-height: 2.75rem; }
}

@media (forced-colors: active) {
  .button, .switch, .nav-toggle { border: 1px solid ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Signature homepage */
.home { overflow-x: hidden; }
.home .site-header { border: 0; }
.home-hero { min-height: min(52rem, 86vh); display: grid; grid-template-columns: minmax(18rem,.82fr) minmax(28rem,1.18fr); align-items: center; gap: clamp(2rem,5vw,5rem); padding: clamp(3rem,8vw,7.5rem) 0 5rem; }
.eyebrow { margin: 0 0 1.1rem; color: var(--gold); font: 600 .72rem/1.4 "IBM Plex Sans Arabic",system-ui,sans-serif; letter-spacing: .18em; }
.home-hero h1 { max-width: 11ch; margin: 0; font-size: clamp(3.2rem,6.4vw,6.4rem); line-height: .94; letter-spacing: -.055em; text-wrap: balance; }
.hero-lede { max-width: 31rem; margin: 1.75rem 0 0; color: var(--ink-soft); font-size: clamp(1.05rem,1.5vw,1.3rem); }
.text-link { display:inline-flex; align-items:center; min-height:2.75rem; color:var(--ink); font:600 .92rem/1 system-ui,sans-serif; text-decoration:none; border-bottom:1px solid var(--gutter); }
.availability { display:flex; gap:.6rem; align-items:center; margin-top:1.3rem; color:var(--ink-soft); font:500 .78rem/1.4 system-ui,sans-serif; }
.availability span { width:.48rem; height:.48rem; border-radius:50%; background:#54a66e; box-shadow:0 0 0 .28rem rgba(84,166,110,.13); }
.hero-visual { position:relative; margin:0; }
.hero-visual img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:clamp(1.3rem,3vw,2.6rem); box-shadow:0 3rem 8rem rgba(35,20,70,.2); }
.hero-visual figcaption { position:absolute; inset:auto 1.4rem 1.25rem auto; color:#fff; font:500 .72rem/1.3 system-ui,sans-serif; letter-spacing:.04em; text-shadow:0 1px 8px #000; }
.proof-strip { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--gutter); }
.proof-strip p { margin:0; padding:1.5rem clamp(1rem,3vw,2rem); border-inline-end:1px solid var(--gutter); }
.proof-strip p:last-child { border:0; }.proof-strip strong,.proof-strip span { display:block; }.proof-strip strong { font-size:.94rem; }.proof-strip span { color:var(--ink-soft); font-size:.78rem; }
.reading-stage { width:100vw; margin-inline:calc(50% - 50vw); padding:clamp(5rem,10vw,9rem) max(1.25rem,calc((100vw - 78rem)/2)); background:#351a88; color:#f8f4ff; }
.stage-intro { display:grid; grid-template-columns:.45fr 1fr; gap:2rem; align-items:end; }.stage-intro h2 { max-width:17ch; margin:0; font-size:clamp(2.4rem,5vw,5rem); line-height:1; letter-spacing:-.045em; }
.reading-stage .eyebrow { color:#d4bd70; }
.page-scene { display:grid; grid-template-columns:minmax(18rem,1fr) minmax(15rem,.55fr); max-width:62rem; margin:5rem auto 3rem; align-items:center; }
.book-page { position:relative; min-height:29rem; padding:clamp(2.5rem,6vw,5rem); background:#fffdf6; color:#27232d; border-radius:.35rem; box-shadow:0 2rem 5rem rgba(13,7,35,.4); transform:rotate(-1deg); }
.book-page h3 { margin:.5rem 0 2rem; font-size:clamp(2rem,4vw,3.6rem); }.book-page p { max-width:30rem; }.chapter { color:#735db0; font:600 .65rem/1 system-ui,sans-serif; letter-spacing:.2em; }.book-page mark { background:linear-gradient(transparent 52%,#eadb83 52%,#eadb83 92%,transparent 92%); color:inherit; }.pencil-note { position:absolute; inset:auto 2rem 2rem auto; color:#7451d2; font:500 .82rem/1.3 "IBM Plex Sans Arabic",sans-serif; transform:rotate(-3deg); }
.study-orbit { padding:2.3rem; background:#6c46d6; border-radius:0 1rem 1rem 0; }.study-orbit span,.study-orbit strong { display:block; }.study-orbit span { color:#d4bd70; font-size:.72rem; }.study-orbit strong { margin:.5rem 0; font-size:1.2rem; }.study-orbit p { color:#ded5f8; font-size:.92rem; }
.feature-line { display:grid; grid-template-columns:repeat(4,1fr); padding:0; margin:4rem 0 0; list-style:none; border-top:1px solid rgba(255,255,255,.22); }.feature-line li { padding:1.2rem .8rem; font-size:.82rem; }.feature-line span { color:#d4bd70; margin-inline-end:.5rem; }
.role-paths { padding:clamp(5rem,10vw,9rem) 0; }.role-heading { display:grid; grid-template-columns:.55fr 1fr; align-items:end; gap:2rem; margin-bottom:4rem; }.role-heading h2 { max-width:18ch; margin:0; font-size:clamp(2.2rem,4.5vw,4.6rem); line-height:1; letter-spacing:-.04em; }
.role-paths>a { position:relative; display:grid; grid-template-columns:3rem .7fr 1.3fr 2rem; gap:1.2rem; align-items:baseline; padding:2rem 0; border-top:1px solid var(--gutter); color:var(--ink); text-decoration:none; transition:padding 180ms ease,color 180ms ease; }.role-paths>a:hover { padding-inline:1rem; color:var(--brand-ink); }.role-paths>a>span { color:var(--gold); font-size:.72rem; }.role-paths h3 { margin:0; font-size:1.35rem; }.role-paths>a p { margin:0; color:var(--ink-soft); }.role-paths b { font-size:1.3rem; }
.closing-call { width:100vw; margin-inline:calc(50% - 50vw); padding:clamp(5rem,10vw,9rem) max(1.25rem,calc((100vw - 78rem)/2)); background:#181122; color:#f9f5ff; }.closing-call h2 { max-width:15ch; margin:.5rem 0 1.5rem; font-size:clamp(2.5rem,5vw,5.2rem); line-height:1; }.closing-call>p:not(.eyebrow) { max-width:38rem; color:#c9c0d4; }.button.light { margin-top:1rem; background:#f8f4ff; color:#351a88; }
[data-reveal] { opacity:0; transform:translateY(1.2rem); transition:opacity 650ms ease,transform 650ms cubic-bezier(.2,.8,.2,1); }[data-reveal][data-visible="true"] { opacity:1; transform:none; }
[dir="rtl"] .home-hero h1 { letter-spacing:-.02em; line-height:1.15; }[dir="rtl"] .study-orbit { border-radius:1rem 0 0 1rem; }[dir="rtl"] .hero-visual figcaption { inset:auto auto 1.25rem 1.4rem; }
@media(max-width:52rem){.home-hero{grid-template-columns:1fr;padding-top:3rem}.home-hero h1{font-size:clamp(3rem,14vw,5rem)}.hero-visual{margin-inline:-.5rem}.proof-strip,.stage-intro,.role-heading{grid-template-columns:1fr}.proof-strip p{border-inline:0;border-bottom:1px solid var(--gutter)}.page-scene{grid-template-columns:1fr}.study-orbit,[dir="rtl"] .study-orbit{border-radius:0 0 1rem 1rem}.feature-line{grid-template-columns:1fr 1fr}.role-paths>a{grid-template-columns:2.5rem 1fr 2rem}.role-paths>a p{grid-column:2/4}.role-paths footer{display:none}}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}

/* Editorial product journeys */
.story-page header,.story-page main,.story-page footer{max-width:78rem}.story-hero{padding:clamp(4rem,9vw,8rem) 0 4rem}.story-hero h1{max-width:14ch;margin:.4rem 0 1.5rem;font-size:clamp(3rem,7vw,7rem);line-height:.98;letter-spacing:-.055em}.story-hero>p:not(.eyebrow){max-width:38rem;color:var(--ink-soft);font-size:1.2rem}.story-hero img{display:block;width:100%;max-height:42rem;object-fit:cover;margin-top:4rem;border-radius:2rem}.story-flow{max-width:64rem;margin:2rem auto 6rem}.story-flow section{display:grid;grid-template-columns:4rem 1fr;gap:2rem;padding:3rem 0;border-top:1px solid var(--gutter)}.story-flow section>span{color:var(--gold);font-size:.75rem}.story-flow h2{margin:0 0 1rem;font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.05}.story-flow p{max-width:45rem;color:var(--ink-soft);font-size:1.08rem}.truth-note{margin:0 auto 7rem;max-width:64rem;padding:1.5rem;border-inline-start:.3rem solid var(--gold);background:var(--paper-raised)}
.journey-hero{padding:clamp(5rem,12vw,11rem) 0 5rem}.journey-hero h1{max-width:13ch;margin:.5rem 0 1.5rem;font-size:clamp(3.1rem,7.5vw,7.6rem);line-height:.95;letter-spacing:-.055em}.journey-hero>p:not(.eyebrow){max-width:40rem;color:var(--ink-soft);font-size:1.18rem}.journey-hero .button{margin-top:1.5rem}.journey-grid{display:grid;grid-template-columns:repeat(2,1fr);margin-bottom:6rem;border-top:1px solid var(--gutter);border-inline-start:1px solid var(--gutter)}.journey-grid section{min-height:16rem;padding:2.5rem;border-inline-end:1px solid var(--gutter);border-bottom:1px solid var(--gutter)}.journey-grid h2{font-size:1.8rem}.journey-grid p{color:var(--ink-soft)}.journey-steps{padding:0;margin:0 0 6rem;list-style:none;border-top:1px solid var(--gutter)}.journey-steps li{display:grid;grid-template-columns:3rem .7fr 1.3fr;gap:1.5rem;padding:2.2rem 0;border-bottom:1px solid var(--gutter)}.journey-steps li>span{color:var(--gold)}.journey-steps strong{font-size:1.25rem}.journey-steps p{margin:0;color:var(--ink-soft)}
@media(max-width:48rem){.journey-grid{grid-template-columns:1fr}.journey-steps li{grid-template-columns:2rem 1fr}.journey-steps p{grid-column:2}.story-flow section{grid-template-columns:2rem 1fr}}

/* Visual direction 2: illuminated reading room */
.home { padding-inline: 0; background: #f7f2e9; }
.home > .site-header { max-width: none; padding: 1rem max(1.25rem, calc((100vw - 82rem) / 2)); border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(23,12,43,.82); color: #fff; backdrop-filter: blur(20px); }
.home .wordmark,.home .site-nav a { color: #f8f3ff; }
.home .site-nav a:hover,.home .site-nav a[aria-current="page"] { color: #d8bc69; }
.home .switch,.home .nav-toggle { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; }
body.home > main { max-width: none; margin: 0; }
.home-hero { position: relative; min-height: calc(100svh - 4.8rem); grid-template-columns: minmax(18rem,.82fr) minmax(32rem,1.18fr); gap: clamp(2rem,5vw,5.5rem); padding: clamp(4rem,8vw,8rem) max(1.25rem,calc((100vw - 82rem)/2)); overflow: hidden; background: radial-gradient(circle at 82% 20%,rgba(124,81,220,.38),transparent 32%),radial-gradient(circle at 20% 90%,rgba(190,146,64,.16),transparent 30%),#170c2b; color:#fff; }
.home-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.26; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:5rem 5rem; mask-image:linear-gradient(to bottom,#000,transparent 88%); }
.hero-copy { position:relative; z-index:2; }
.home-hero .eyebrow { display:flex; align-items:center; gap:.75rem; color:#d8bc69; }
.home-hero .eyebrow span { padding:.3rem .55rem; border:1px solid rgba(216,188,105,.55); border-radius:999px; color:#fff; letter-spacing:.1em; }
.home-hero h1 { max-width:10ch; color:#fff; font-size:clamp(4rem,7.4vw,7.7rem); line-height:.86; letter-spacing:-.065em; }
.home-hero h1 em { color:#d8bc69; font-weight:400; }
[lang="ar"] .home-hero h1 { line-height:1.08; letter-spacing:-.045em; }
.home-hero .hero-lede { color:#cfc4da; font-size:clamp(1.05rem,1.45vw,1.28rem); }
.home-hero .button { background:#f5e8b7; color:#2d1759; box-shadow:0 1rem 3rem rgba(0,0,0,.25); }
.home-hero .button:hover { background:#fff3c7; color:#2d1759; }
.home-hero .text-link { color:#fff; border-color:rgba(255,255,255,.3); }
.home-hero .availability { color:#bfb2cc; }
.hero-visual { min-height:clamp(34rem,58vw,48rem); display:grid; place-items:center; isolation:isolate; }
.hero-visual .scene-photo { position:absolute; inset:0; width:100%; height:100%; border-radius:2.5rem; object-fit:cover; opacity:.34; filter:saturate(.75) contrast(1.12); box-shadow:none; }
.hero-visual::after { content:""; position:absolute; inset:0; z-index:-1; border:1px solid rgba(255,255,255,.12); border-radius:2.5rem; background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(40,16,75,.25)); }
.ipad-frame { position:relative; width:min(90%,39rem); aspect-ratio: .74; padding:1.15rem; border:1px solid rgba(255,255,255,.48); border-radius:2.15rem; background:linear-gradient(145deg,#27242d,#09090c); box-shadow:0 4rem 8rem rgba(0,0,0,.48),inset 0 0 0 2px rgba(255,255,255,.1); transform:perspective(1200px) rotateY(-7deg) rotateX(2deg) rotateZ(1deg); }
[dir="rtl"] .ipad-frame { transform:perspective(1200px) rotateY(7deg) rotateX(2deg) rotateZ(-1deg); }
.reader-top { height:3.25rem; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 1.2rem; border-radius:1.15rem 1.15rem 0 0; background:#faf7f0; color:#635b68; font:600 .7rem/1 system-ui,sans-serif; }
.reader-top span:last-child { text-align:end; letter-spacing:.18em; }.reader-top i { width:.55rem; height:.55rem; border-radius:50%; background:#251c2d; }
.reader-sheet { position:relative; height:calc(100% - 6.5rem); padding:clamp(2rem,5vw,4.5rem); overflow:hidden; background:#fffdf8; color:#211e25; }
.reader-sheet::before { content:"LIBRETTO · PRIVATE COPY"; position:absolute; inset:48% auto auto 12%; color:rgba(86,55,160,.06); font:700 clamp(1rem,2vw,2rem)/1 system-ui; letter-spacing:.18em; transform:rotate(-28deg); white-space:nowrap; }
.reader-sheet small { color:#6d4abd; font:700 .62rem/1 system-ui,sans-serif; letter-spacing:.19em; }
.reader-sheet h2 { max-width:10ch; margin:.8rem 0 2rem; font-size:clamp(2.2rem,4vw,4.4rem); line-height:.9; letter-spacing:-.055em; }
.reader-sheet p { max-width:27rem; color:#69636c; font-size:clamp(.83rem,1.15vw,1.02rem); }
.reader-sheet mark { display:inline; color:inherit; background:linear-gradient(transparent 55%,rgba(216,188,105,.72) 55%); }
.margin-note { position:absolute; inset:auto 1.6rem 1.8rem auto; padding:.8rem 1rem; border:1px solid #d9ccec; border-radius:.8rem; background:#f6f0ff; color:#6d4abd; font:500 .64rem/1.35 system-ui,sans-serif; transform:rotate(-2deg); }
[dir="rtl"] .margin-note { inset:auto auto 1.8rem 1.6rem; transform:rotate(2deg); }
.reader-tools { height:3.25rem; display:flex; align-items:center; justify-content:center; gap:1.8rem; border-radius:0 0 1.15rem 1.15rem; background:#f2eee6; color:#6349a2; }
.privacy-chip { position:absolute; inset:8% -2% auto auto; z-index:3; padding:.75rem 1rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(22,13,36,.78); color:#e7dcae; font:600 .68rem/1 system-ui,sans-serif; box-shadow:0 1rem 2rem rgba(0,0,0,.28); backdrop-filter:blur(12px); }
[dir="rtl"] .privacy-chip { inset:8% auto auto -2%; }
.hero-visual figcaption { inset:auto 1.5rem 1.35rem auto; color:#d3c8dc; }
[dir="rtl"] .hero-visual figcaption { inset:auto auto 1.35rem 1.5rem; }
.proof-strip { padding-inline:max(1.25rem,calc((100vw - 82rem)/2)); background:#d7b960; color:#251536; border:0; }
.proof-strip p { padding-block:1.8rem; border-color:rgba(37,21,54,.18); }.proof-strip span { color:#5e4f4e; }
.reading-stage { margin:0; padding-inline:max(1.25rem,calc((100vw - 82rem)/2)); background:radial-gradient(circle at 80% 40%,#7041d0 0,transparent 34%),#2d126d; }
.role-paths { padding-inline:max(1.25rem,calc((100vw - 82rem)/2)); background:#f7f2e9; }
.closing-call { margin:0; padding-inline:max(1.25rem,calc((100vw - 82rem)/2)); background:radial-gradient(circle at 80% 50%,rgba(111,63,205,.33),transparent 35%),#160a27; }
.home > footer { max-width:none; margin:0; padding:2rem max(1.25rem,calc((100vw - 82rem)/2)); background:#160a27; color:#b9adbf; border-color:rgba(255,255,255,.1); }
.home > footer a { color:#f1e8f6; }
@media(max-width:60rem){.home-hero{grid-template-columns:1fr;padding-top:4rem}.hero-copy{max-width:42rem}.hero-visual{min-height:42rem}.ipad-frame{width:min(80%,34rem)}}
@media(max-width:38rem){.home-hero{padding-block:3rem 4rem}.home-hero h1{font-size:clamp(3.7rem,18vw,5.6rem)}.hero-visual{min-height:31rem;margin-inline:-.5rem}.ipad-frame{width:90%;border-radius:1.5rem;padding:.75rem}.reader-sheet{padding:2rem 1.5rem}.reader-sheet h2{font-size:2.2rem}.privacy-chip{inset:5% -1% auto auto}.proof-strip{grid-template-columns:1fr}.home .site-header{padding-inline:1.25rem}}
@media(prefers-reduced-motion:reduce){.ipad-frame,[dir="rtl"] .ipad-frame{transform:none}}

/* Inner pages — one cinematic product world, with calm reading surfaces. */
.story-page { padding-inline:0; overflow-x:hidden; background:#f7f2e9; }
.story-page > .site-header { max-width:none; padding:1rem max(1.25rem,calc((100vw - 82rem)/2)); border-color:rgba(255,255,255,.12); background:rgba(23,12,43,.93); color:#fff; backdrop-filter:blur(20px); }
.story-page .wordmark,.story-page .site-nav a { color:#f8f3ff; }
.story-page .site-nav a:hover,.story-page .site-nav a[aria-current="page"] { color:#d8bc69; }
.story-page .switch,.story-page .nav-toggle { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; }
.story-page > main { max-width:none; margin:0; }
.story-page .story-hero,.story-page .journey-hero { position:relative; padding:clamp(5rem,10vw,9rem) max(1.25rem,calc((100vw - 82rem)/2)); overflow:hidden; background:radial-gradient(circle at 82% 18%,rgba(126,78,226,.45),transparent 31%),radial-gradient(circle at 12% 100%,rgba(207,168,77,.16),transparent 30%),#170c2b; color:#fff; }
.story-page .story-hero::before,.story-page .journey-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:5rem 5rem; mask-image:linear-gradient(#000,transparent 92%); }
.story-page .story-hero > *,.story-page .journey-hero > * { position:relative; }
.story-page .story-hero h1,.story-page .journey-hero h1 { color:#fff; text-wrap:balance; }
.story-page .story-hero>p:not(.eyebrow),.story-page .journey-hero>p:not(.eyebrow) { color:#cfc4da; }
.story-page .journey-hero .button { background:#f5e8b7; color:#2d1759; box-shadow:0 1rem 3rem rgba(0,0,0,.24); }
.story-page .journey-hero .button:hover { background:#fff3c7; color:#2d1759; }
.story-page .story-hero img { border:1px solid rgba(255,255,255,.15); box-shadow:0 3rem 7rem rgba(0,0,0,.42); }
.story-page .story-flow,.story-page .journey-grid,.story-page .journey-steps,.story-page .truth-note { width:min(calc(100% - 2.5rem),64rem); }
.story-page .story-flow { margin-block:5rem 7rem; }
.story-page .story-flow section { padding-block:clamp(2.5rem,6vw,4.5rem); }
.story-page .story-flow section>span,.story-page .journey-steps li>span { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid #cdb777; border-radius:50%; }
.story-page .journey-grid { gap:1px; margin:0 auto 7rem; border:0; background:#cfc6b6; box-shadow:0 2rem 5rem rgba(36,22,52,.09); }
.story-page .journey-grid section { border:0; background:#fffdf8; transition:background 180ms ease,transform 180ms ease; }
.story-page .journey-grid section:hover { position:relative; background:#f4ecff; transform:translateY(-.25rem); }
.story-page .journey-grid section:last-child:nth-child(odd) { grid-column:1/-1; min-height:13rem; }
.story-page .journey-grid section>span { display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; border:1px solid #cdb777; border-radius:50%; color:#7b6535; font-size:.72rem; }
.story-page .journey-steps { margin:0 auto 7rem; }
.story-page .truth-note { margin-inline:auto; }
.story-page > footer { max-width:none; margin:0; padding:2rem max(1.25rem,calc((100vw - 82rem)/2)); border-color:rgba(255,255,255,.1); background:#160a27; color:#b9adbf; }
.story-page > footer a { color:#f1e8f6; }
[dir="rtl"] .story-page .story-hero h1,[dir="rtl"] .story-page .journey-hero h1 { line-height:1.14; letter-spacing:-.025em; }

/* Policy, support and error pages use the same frame with a paper document. */
body:not(.home):not(.story-page) { padding:0; background:linear-gradient(#170c2b 0 8.25rem,#f7f2e9 8.25rem); }
body:not(.home):not(.story-page) > .site-header { max-width:none; padding:1rem max(1.25rem,calc((100vw - 82rem)/2)); color:#fff; border-color:rgba(255,255,255,.13); background:rgba(23,12,43,.92); backdrop-filter:blur(20px); }
body:not(.home):not(.story-page) .wordmark,body:not(.home):not(.story-page) .site-nav a { color:#f8f3ff; }
body:not(.home):not(.story-page) .site-nav a:hover,body:not(.home):not(.story-page) .site-nav a[aria-current="page"] { color:#d8bc69; }
body:not(.home):not(.story-page) .switch,body:not(.home):not(.story-page) .nav-toggle { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; }
body:not(.home):not(.story-page):not(.legal-page) > main { width:min(calc(100% - 2.5rem),48rem); margin-top:2.5rem; padding:clamp(1.5rem,5vw,4rem); border:1px solid #ded5c6; border-top:4px solid #d7b960; border-radius:1.4rem; background:#fffdf8; box-shadow:0 2rem 5rem rgba(36,22,52,.09); }
body:not(.home):not(.story-page):not(.legal-page) > main h1 { color:#2f1766; font-size:clamp(2.4rem,6vw,4rem); }
body:not(.home):not(.story-page) > footer { max-width:none; margin:5rem 0 0; padding:2rem max(1.25rem,calc((100vw - 82rem)/2)); border-color:rgba(255,255,255,.1); background:#160a27; color:#b9adbf; }
body:not(.home):not(.story-page) > footer a { color:#f1e8f6; }
body:not(.home):not(.story-page) > main:only-of-type { min-height:23rem; }

/* Legal reading mode */
.legal-page { background:radial-gradient(circle at 80% 3%,rgba(105,64,196,.34),transparent 20rem),linear-gradient(#170c2b 0 18rem,#f7f2e9 18rem); }
.legal-page > main { width:min(calc(100% - 2.5rem),78rem); max-width:none; margin-top:4rem; padding:clamp(2rem,5vw,5rem); border:1px solid #ded5c6; border-radius:1.4rem; background:#fffdf8; box-shadow:0 2rem 5rem rgba(36,22,52,.09); }
.legal-page > main::before { content:""; display:block; width:3.5rem; height:.22rem; margin-bottom:2rem; border-radius:999px; background:#d7b960; }
.legal-page .legal-kicker { margin:0 0 .75rem; color:#7b6535; font:600 .7rem/1.4 "IBM Plex Sans Arabic",system-ui,sans-serif; letter-spacing:.17em; }
.legal-page main h1 { max-width:12ch; margin:.25rem 0 1rem; font-size:clamp(3.2rem,8vw,6.5rem); line-height:.92; letter-spacing:-.055em; }
[dir="rtl"] .legal-page main h1 { line-height:1.1; letter-spacing:-.025em; }
.legal-page .lede { max-width:38rem; font-size:clamp(1.08rem,2vw,1.3rem); }
.legal-page .stamp { display:flex; width:fit-content; max-width:100%; padding:.45rem .7rem; overflow-wrap:anywhere; border:1px solid #ded5c6; border-radius:999px; background:#f8f3e9; }
.legal-tools { margin:2.5rem 0 4rem; }
.legal-switch { display:inline-flex; gap:.25rem; padding:.25rem; border:1px solid #ded5c6; border-radius:999px; background:#f5f2eb; }
.legal-switch a { min-width:6rem; min-height:2.75rem; display:grid; place-items:center; padding:.45rem 1rem; border-radius:999px; color:#5e6068; font:600 .82rem/1 system-ui,sans-serif; text-decoration:none; }
.legal-switch a[aria-current="page"] { background:#2f1766; color:#fff; box-shadow:0 .45rem 1rem rgba(47,23,102,.2); }
.legal-toc { display:flex; gap:.5rem; margin-top:1.25rem; padding:1rem; overflow-x:auto; border-block:1px solid #e0d9c8; scrollbar-width:thin; }
.legal-toc strong,.legal-toc a { flex:none; display:inline-flex; align-items:center; min-height:2.75rem; }
.legal-toc strong { padding-inline-end:.75rem; color:#7b6535; font:600 .72rem/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.legal-toc a { padding:.45rem .8rem; border:1px solid #ded5c6; border-radius:999px; background:#fffdf8; color:#3c1fb4; font:500 .82rem/1.2 system-ui,sans-serif; text-decoration:none; }
.legal-toc a:hover { border-color:#7b55e0; background:#f4ecff; }
.legal-page main h2 { scroll-margin-top:7rem; margin:4rem 0 1rem; padding-top:1.5rem; border-top:1px solid #e0d9c8; color:#2f1766; font-size:clamp(1.35rem,3vw,2rem); line-height:1.2; }
.legal-page main h2::before { content:"§"; margin-inline-end:.55rem; color:#b69a48; font-weight:400; }
.legal-page main p,.legal-page main li,.legal-page main td { line-height:1.78; }
.legal-page .card { border-inline-start:4px solid #d7b960; background:linear-gradient(135deg,#f8f3e9,#f3ecff); }
.legal-page table { display:block; overflow-x:auto; }
.legal-progress { position:fixed; inset:0 0 auto; z-index:100; height:3px; background:#d7b960; transform:scaleX(0); transform-origin:left; }
[dir="rtl"] .legal-progress { transform-origin:right; }
@media(min-width:60.01rem){
  .legal-page > main { display:grid; grid-template-columns:minmax(12rem,16rem) minmax(0,44rem); column-gap:clamp(3rem,6vw,7rem); justify-content:center; }
  .legal-page > main > * { grid-column:2; }
  .legal-page > main::before { grid-column:2; }
  .legal-page .legal-tools { grid-column:1; grid-row:1 / span 40; position:sticky; top:7rem; align-self:start; margin:0; padding-top:3.2rem; }
  .legal-page .legal-switch { display:flex; width:100%; }
  .legal-page .legal-switch a { flex:1; min-width:0; }
  .legal-page .legal-toc { flex-direction:column; align-items:stretch; max-height:calc(100vh - 15rem); margin-top:1.5rem; padding:1rem 0; overflow-x:hidden; overflow-y:auto; }
  .legal-page .legal-toc strong { padding:.35rem .75rem .75rem; }
  .legal-page .legal-toc a { min-height:2.5rem; padding:.55rem .75rem; border:0; border-radius:.55rem; background:transparent; }
  .legal-page .legal-toc a:hover { background:#f4ecff; }
}
@media(max-width:38rem){.legal-page>main{margin-top:1.5rem;padding:2rem 1.35rem}.legal-page main h1{font-size:clamp(3rem,15vw,4.5rem)}.legal-tools{margin-bottom:3rem}.legal-toc{margin-inline:-1.35rem;padding-inline:1.35rem}.legal-switch{display:flex}.legal-switch a{flex:1}}

@media(max-width:64rem){.story-page .site-nav a,body:not(.home):not(.story-page) .site-nav a{padding-inline:.25rem}}
@media(max-width:38rem){.story-page .story-hero,.story-page .journey-hero{padding-block:4rem}.story-page .story-hero h1,.story-page .journey-hero h1{font-size:clamp(2.9rem,14vw,4.5rem)}body:not(.home):not(.story-page)>main{padding:1.35rem;border-radius:1rem}}

/* The art direction deliberately mixes dark rooms with illuminated paper.
   Keep its semantic tokens stable when the operating system uses dark mode;
   otherwise dark-mode ink becomes pale text on the fixed ivory surfaces. */
:root {
  color-scheme: light;
  --paper-base: #fbf9f4;
  --paper-raised: #f5f2eb;
  --paper-deep: #ede8dd;
  --gutter: #e0d9c8;
  --ink: #1a1b22;
  --ink-soft: #5e6068;
  --brand: #5c33c7;
  --brand-ink: #3c1fb4;
  --brand-lifted: #7b55e0;
  --brand-wash: #eae0ff;
  --on-brand: #f7f5ff;
  --gold: #7b6535;
}