/* =============================================================================
   LaikaPDF — website
   -----------------------------------------------------------------------------
   Every colour here is lifted from the app's own theme file, which in turn was
   sampled from the app mark: the burgundy #8E3041 of the glyph and the cream
   to-coral gradient behind it. The site and the product therefore read as one
   object, which is the whole point of a product page.

   Cream rather than white, for the same reason the app uses it: the page is
   meant to be read, not glanced at.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root {
  /* Light — from src/theme/index.ts, `palette` */
  --paper:        #FFF4E5;
  --paper-raised: #FFFBF4;
  --paper-sunken: #FCE3D6;
  --icon-bg:      #F6EFE7;
  --ink:          #46202A;
  --ink-soft:     #7B4A52;
  --ink-faint:    #B18C8B;
  --rule:         #F4D8CB;
  --accent:       #8E3041;
  --on-accent:    #FFFFFF;
  --accent-soft:  #FBD3C5;
  --coral:        #EE9077;
  --rose:         #A82C2C;

  /* Liquid glass — five layers, as in the app */
  --glass-tint:       rgba(255, 255, 255, 0.42);
  --glass-tint-strong:rgba(255, 255, 255, 0.68);
  --glass-veil:       rgba(255, 249, 240, 0.90);
  --glass-border:     rgba(255, 255, 255, 0.75);
  --glass-sheen:      rgba(255, 255, 255, 0.35);
  --glass-highlight:  rgba(255, 255, 255, 0.80);
  --glass-shadow:     94 71 38;
  --glass-shadow-a:   0.16;
  --blur: 28px;

  /* Ink & highlighter colours, straight out of the app */
  --pen-ink:      #46202A;
  --pen-burgundy: #8E3041;
  --pen-green:    #3E8A73;
  --pen-blue:     #2F6FB0;
  --hl-coral:     #FDB7A7;
  --hl-yellow:    #FFE066;
  --hl-green:     #A7E8B5;
  --hl-blue:      #A8D0FF;

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 68ch;
  --maxw: 1240px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 68px;
  /* Scrollbar track: part-way between the page and its sunken tone, so the
     bar reads as furniture rather than as a stripe. */
  --scroll-track: color-mix(in srgb, var(--paper-sunken) 42%, var(--paper));
  color-scheme: light;
}

[data-theme="dark"] {
  /* Dark — from `paletteDark`. The warm base is kept: a neutral grey next to
     this logo would look like a different product. */
  --paper:        #17100F;
  --paper-raised: #211816;
  --paper-sunken: #0F0A09;
  --icon-bg:      #251C19;
  --ink:          #F6E7DC;
  --ink-soft:     #C6A79C;
  --ink-faint:    #8C6F66;
  --rule:         #34241F;
  --accent:       #EE9077;
  --on-accent:    #33150F;
  --accent-soft:  #3A211C;
  --coral:        #EE9077;
  --rose:         #DB7A73;

  --glass-tint:       rgba(40, 28, 24, 0.52);
  --glass-tint-strong:rgba(44, 32, 27, 0.72);
  --glass-veil:       rgba(26, 18, 16, 0.92);
  --glass-border:     rgba(255, 236, 224, 0.14);
  --glass-sheen:      rgba(255, 236, 220, 0.10);
  --glass-highlight:  rgba(255, 244, 220, 0.16);
  --glass-shadow:     0 0 0;
  --glass-shadow-a:   0.55;

  color-scheme: dark;
}

/* ------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--accent); color: var(--on-accent); }

/* --------------------------------------------------------------- typography */

.display, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "SOFT" 22, "WONK" 1, "opsz" 100;
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.7rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.3vw, 3.1rem); line-height: 1.08; }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); line-height: 1.18; letter-spacing: -0.014em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 1.9em; height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.42vw, 1.3125rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}

p { text-wrap: pretty; }

/* CJK and other scripts get a stack that actually has the glyphs. */
html[lang="zh"] { --serif: "Songti SC", "SimSun", "Noto Serif SC", serif; --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", var(--sans); }
html[lang="ja"] { --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; --sans: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif; }
html[lang="ko"] { --serif: "Nanum Myeongjo", "Apple SD Gothic Neo", "Noto Serif KR", serif; --sans: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
html[lang="ar"] { --serif: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif; --sans: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", sans-serif; }
html[lang="th"] { --serif: "Noto Serif Thai", "Thonburi", serif; --sans: "Noto Sans Thai", "Thonburi", "Leelawadee UI", sans-serif; }
html[lang="hi"] { --serif: "Noto Serif Devanagari", "Kohinoir Devanagari", serif; --sans: "Noto Sans Devanagari", "Nirmala UI", sans-serif; }
html[lang="zh"] h1, html[lang="ja"] h1, html[lang="ko"] h1,
html[lang="th"] h1, html[lang="ar"] h1, html[lang="hi"] h1 { letter-spacing: 0; line-height: 1.16; }
html[lang="zh"] h2, html[lang="ja"] h2, html[lang="ko"] h2,
html[lang="th"] h2, html[lang="ar"] h2, html[lang="hi"] h2 { letter-spacing: 0; line-height: 1.22; }

html[dir="rtl"] .eyebrow::before { order: 2; }

/* ------------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-wide { max-width: 1480px; }

section { position: relative; }
.band { padding-block: clamp(5rem, 3rem + 9vw, 11rem); }
.band-tight { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-head h2 { margin-block: 0.5em 0.45em; }

/* --------------------------------------------------------- paper grain ---- */
/* A printed page is never flat. One fixed noise layer over everything gives
   the whole site the tooth of paper, and costs one element. */

.grain {
  position: fixed;
  inset: -50%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url('img/grain.png');
  background-size: 190px 190px;
  will-change: transform;
  animation: grain-shift 7s steps(6) infinite;
}
[data-theme="dark"] .grain { opacity: 0.34; }

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-2%, -3%); }
  33%  { transform: translate(-4%, 2%); }
  50%  { transform: translate(2%, -4%); }
  66%  { transform: translate(-1%, 3%); }
  83%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------------- glass */
/* On the web the five layers of the app's glass collapse into two, because the
   browser has the backdrop-filter the phone does not. The tint stays: a blur
   alone loses contrast the moment something busy passes behind it. */

.glass {
  position: relative;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
  backdrop-filter: blur(var(--blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 0 0 var(--glass-highlight) inset,
    0 18px 50px -22px rgb(var(--glass-shadow) / var(--glass-shadow-a));
  overflow: hidden;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  background: linear-gradient(to bottom, var(--glass-sheen), transparent);
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--glass-veil); }
}

/* ----------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 0.95em 1.6em;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 0.975rem;
  letter-spacing: -0.005em;
  isolation: isolate;
  overflow: hidden;
  transition: transform .38s var(--spring), box-shadow .38s var(--ease);
  box-shadow: 0 10px 26px -14px rgb(var(--glass-shadow) / 0.75);
}
.btn::after {
  /* A light sweeping across the button on hover. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 40px -18px rgb(var(--glass-shadow) / 0.9); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--accent); box-shadow: none; }

/* The Play badge — two lines, drawn rather than an imported PNG. */
.play-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.72em 1.5em 0.78em;
  border-radius: 16px;
  background: var(--ink);
  color: var(--paper);
  transition: transform .4s var(--spring), box-shadow .4s var(--ease), background-color .3s var(--ease);
  box-shadow: 0 14px 34px -18px rgb(var(--glass-shadow) / 0.9);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
[data-theme="dark"] .play-badge { background: var(--ink); color: var(--paper); }
.play-badge::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.22) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease);
}
.play-badge:hover { transform: translateY(-3px) scale(1.02); }
.play-badge:hover::after { transform: translateX(130%); }
.play-badge:active { transform: translateY(-1px) scale(0.99); }
.play-badge .pb-text { display: flex; flex-direction: column; line-height: 1.12; text-align: start; }
.play-badge .pb-top { font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.82; }
.play-badge .pb-bottom { font-size: 1.18rem; font-weight: 600; letter-spacing: -0.012em; }
.play-badge svg { flex: none; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; }
.cta-note {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.5em;
}
.cta-note::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0.6;
}

/* --------------------------------------------------------------------- nav */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.nav::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.nav.stuck::after { opacity: 1; }

.nav .wrap { display: flex; align-items: center; gap: 1.25rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 640; letter-spacing: -0.02em; font-size: 1.06rem; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 12px -6px rgb(var(--glass-shadow) / .8); }
.brand span { white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 0.35rem; margin-inline-start: auto; }
.nav-links a {
  position: relative;
  padding: 0.45em 0.8em;
  border-radius: var(--r-pill);
  font-size: 0.9rem;
  font-weight: 520;
  color: var(--ink-soft);
  transition: color .25s var(--ease), background-color .25s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: var(--paper-sunken); }

.nav-tools { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: 0.5rem; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .3s var(--spring);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: scale(1.06); }

.lang-btn {
  display: inline-flex; align-items: center; gap: 0.45em;
  height: 38px; padding-inline: 0.85em;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  font-size: 0.85rem; font-weight: 560;
  color: var(--ink-soft);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.lang-btn:hover { color: var(--accent); border-color: var(--accent); }
.lang-btn .code { font-variant: small-caps; text-transform: lowercase; letter-spacing: .04em; }

.nav-cta { display: none; font-size: 0.875rem; padding: 0.62em 1.15em; }

/* Shown only where the inline links are not. */
.menu-btn { display: none; }
.menu-list { display: grid; margin-top: 0.5rem; }
.menu-list a {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  padding: 0.72em 0;
  border-bottom: 1px solid var(--rule);
  transition: color .25s var(--ease), padding-inline-start .25s var(--ease);
}
.menu-list a:hover { color: var(--accent); padding-inline-start: 0.4em; }

/* Language sheet */
.lang-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgb(var(--glass-shadow) / 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lang-sheet.open { opacity: 1; visibility: visible; }
.lang-sheet .panel {
  width: min(760px, 100%);
  max-height: min(76vh, 640px);
  overflow-y: auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  box-shadow: 0 40px 90px -40px rgb(var(--glass-shadow) / 0.7);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform .45s var(--spring), opacity .35s var(--ease);
}
.lang-sheet.open .panel { transform: none; opacity: 1; }
.lang-sheet h3 { margin-bottom: 0.25em; }
.lang-sheet .hint { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 1.4rem; }

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}
.lang-opt {
  display: flex; align-items: baseline; gap: 0.5em;
  padding: 0.7em 0.85em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-align: start;
  transition: background-color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.lang-opt:hover { background: var(--paper-sunken); transform: translateX(2px); }
html[dir="rtl"] .lang-opt:hover { transform: translateX(-2px); }
.lang-opt[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.lang-opt .native { font-weight: 560; font-size: 0.95rem; }
.lang-opt .code { font-size: 0.7rem; color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  /* Exactly one device-height. `svh` rather than `vh` so a phone's
     collapsing address bar does not make the section jump. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--nav-h) + clamp(1.25rem, 5svh, 3.5rem)) clamp(1.5rem, 6svh, 4rem);
  overflow: clip;
}

/* The aurora: a canvas of slow warm blobs, the same cream-to-coral gradient as
   the app icon, drifting behind the type. */
#aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
}
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 35%, var(--paper) 96%),
    linear-gradient(to bottom, transparent 60%, var(--paper) 100%);
}
.hero .wrap { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.hero-copy > * + * { margin-top: 1.35rem; }
.hero h1 {
  margin-top: 0.8rem;
  max-width: 15ch;
  /* Whichever is smaller: the width-driven size, or a share of the screen's
     height. Short windows shrink the type instead of pushing the hero past
     one screenful. */
  font-size: min(clamp(2.1rem, 1.4rem + 3.1vw, 4.4rem), 8.2svh);
}
.hero .lead { font-size: min(clamp(1rem, 0.95rem + 0.4vw, 1.25rem), 2.6svh); }

/* Word-by-word mask reveal. Each word sits in an overflow-hidden span and
   rises into place. */
.reveal-line { display: block; overflow: hidden; padding-block: 0.06em; }
.reveal-word {
  display: inline-block;
  transform: translateY(115%) rotate(3deg);
  opacity: 0;
  transition: transform 1.05s var(--ease), opacity .7s var(--ease);
}
.ready .reveal-word { transform: none; opacity: 1; }

/* The third line is the one that carries the point, so it carries the ink. */
.hero h1 .accent { color: var(--accent); position: relative; }
.ink-underline {
  position: absolute;
  inset-inline: -0.04em;
  bottom: -0.06em;
  height: 0.16em;
  overflow: visible;
  pointer-events: none;
}
.ink-underline path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.32;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.2s var(--ease) .9s;
}
.ready .ink-underline path { stroke-dashoffset: 0; }

.hero-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: 46ch;
  padding: 0.9rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--rule);
  background: color-mix(in srgb, var(--paper-raised) 60%, transparent);
}
.hero-note svg { flex: none; margin-top: 0.15em; color: var(--accent); }

.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.ready .fade-up, .in .fade-up, .fade-up.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- the phone */

.phone-stage {
  position: relative;
  width: max-content;
  justify-self: center;
  perspective: 1600px;
}

.phone {
  position: relative;
  width: min(290px, 70vw);
  --hero-phone: min(290px, 26svh);
  aspect-ratio: 9 / 19.2;
  border-radius: 44px;
  padding: 11px;
  background: linear-gradient(150deg, #2b1a1c, #150d0e 42%, #38222a 72%, #1b1112);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 2px 3px rgba(255,255,255,.18) inset,
    0 60px 90px -50px rgb(var(--glass-shadow) / 0.85),
    0 24px 48px -30px rgb(var(--glass-shadow) / 0.6);
  transform: rotateY(-11deg) rotateX(5deg) rotateZ(-1deg);
  transform-style: preserve-3d;
  transition: transform 1.1s var(--ease);
  will-change: transform;
}
.phone-stage.flat .phone { transform: none; }
#heroPhone { width: var(--hero-phone, min(290px, 70vw)); }
.phone::after {
  /* Glass reflection running down the slab. */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(122deg, rgba(255,255,255,.16) 0%, transparent 26%, transparent 68%, rgba(255,255,255,.09) 100%);
  pointer-events: none;
  z-index: 4;
}
.phone-notch {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 82px; height: 7px;
  border-radius: 99px;
  background: #0c0708;
  z-index: 3;
}
.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

/* Floating glass cards around the phone. */
.orbit { position: absolute; z-index: 3; pointer-events: none; }
.orbit-card {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--r-md);
  font-size: 0.8125rem;
  font-weight: 560;
  /* The phone now sizes off screen height, so the space beside it is narrower
     than the longest label. Let these wrap and cap them, rather than let a card
     drift across the headline. */
  max-width: 9.5rem;
  line-height: 1.3;
  text-wrap: balance;
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 44px -24px rgb(var(--glass-shadow) / 0.8);
  animation: bob 7s var(--ease-in-out) infinite;
}
.orbit-card svg { color: var(--accent); flex: none; }
.orbit-1 { inset-block-start: 9%;  inset-inline-end: calc(100% + 12px); animation-delay: -1.5s; }
.orbit-2 { inset-block-start: 44%; inset-inline-start: calc(100% + 12px); }
.orbit-3 { inset-block-end: 11%; inset-inline-end: calc(100% + 12px); animation-delay: -3.4s; }
.orbit-1 .orbit-card { animation-delay: -1.5s; }
.orbit-3 .orbit-card { animation-delay: -3.4s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* Airplane-mode pill, the hero's proof. */
.offline-pill {
  position: absolute;
  inset-block-start: -18px;
  inset-inline-end: -6%;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.55em 0.95em;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem; font-weight: 640;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 34px -18px rgb(var(--glass-shadow) / .95);
}
.offline-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2.2s var(--ease-in-out) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* ==========================================================================
   MINIATURE APP UI — the screens shown inside the phone
   ========================================================================== */

.scr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 12px 12px;
  background: var(--paper);
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .55s var(--ease), transform .65s var(--ease);
  pointer-events: none;
  font-size: 10px;
  line-height: 1.35;
}
.scr.active { opacity: 1; transform: none; }

.ui-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px;
  border-radius: 12px;
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  font-weight: 620;
  font-size: 10px;
  color: var(--ink);
  flex: none;
}
.ui-bar .grow { flex: 1; }
.ui-bar .ico { color: var(--ink-faint); display: grid; place-items: center; }

.ui-page {
  position: relative;
  flex: 1;
  margin-top: 8px;
  border-radius: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 11px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ui-line { height: 4px; border-radius: 2px; background: var(--ink); opacity: .22; }
.ui-line.w9 { width: 92%; } .ui-line.w8 { width: 82%; } .ui-line.w7 { width: 72%; }
.ui-line.w6 { width: 63%; } .ui-line.w5 { width: 52%; } .ui-line.w4 { width: 42%; }
.ui-line.tall { height: 6px; opacity: .3; margin-bottom: 3px; }
.ui-gap { height: 5px; }

.ui-tabs {
  display: flex; justify-content: space-around; align-items: center;
  padding: 7px 4px 5px;
  margin-top: 8px;
  border-radius: 12px;
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  flex: none;
}
.ui-tab { display: grid; place-items: center; gap: 2px; color: var(--ink-faint); font-size: 7px; font-weight: 560; }
.ui-tab.on { color: var(--accent); }
.ui-tab .dot { width: 3px; height: 3px; border-radius: 50%; background: transparent; }
.ui-tab.on .dot { background: var(--accent); }

.ui-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--icon-bg);
  border: 1px solid var(--rule);
  font-size: 8px; font-weight: 560;
  color: var(--ink-soft);
}
.ui-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ui-row {
  display: flex; align-items: center; gap: 7px;
  padding: 7px;
  border-radius: 9px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
}
.ui-row .thumb {
  width: 20px; height: 26px; border-radius: 3px; flex: none;
  background: linear-gradient(160deg, var(--paper-sunken), var(--icon-bg));
  border: 1px solid var(--rule);
}
.ui-row .t { font-size: 8.5px; font-weight: 600; color: var(--ink); }
.ui-row .s { font-size: 7.5px; color: var(--ink-faint); }

/* — screen: read & annotate — */
.hl-sweep {
  position: absolute;
  height: 7px;
  border-radius: 2px;
  background: var(--hl-yellow);
  mix-blend-mode: multiply;
  transform-origin: left center;
  transform: scaleX(0);
}
[data-theme="dark"] .hl-sweep { mix-blend-mode: screen; opacity: .5; }
html[dir="rtl"] .hl-sweep { transform-origin: right center; }
.active .hl-sweep { animation: sweep 1.1s var(--ease) .45s forwards; }
@keyframes sweep { to { transform: scaleX(1); } }

.pen-path { position: absolute; inset: 0; pointer-events: none; }
.pen-path path {
  fill: none; stroke: var(--pen-burgundy); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260; stroke-dashoffset: 260;
}
.active .pen-path path { animation: draw 1.6s var(--ease) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.pen-tools { display: flex; gap: 4px; margin-top: 7px; flex: none; justify-content: center; }
.pen-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--rule); }
.pen-dot.sel { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--accent); }

/* — screen: ask the AI — */
.zone-box {
  position: absolute;
  border: 1.5px dashed var(--accent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  opacity: 0;
}
.active .zone-box { animation: zone-in .6s var(--ease) .35s forwards; }
@keyframes zone-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

.ai-sheet {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--glass-veil);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 -8px 28px -14px rgb(var(--glass-shadow) / .7);
  transform: translateY(120%);
}
.active .ai-sheet { animation: sheet-up .7s var(--ease) .9s forwards; }
@keyframes sheet-up { to { transform: none; } }
.ai-sheet .who { font-size: 7.5px; font-weight: 640; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.type-line { height: 4px; border-radius: 2px; background: var(--ink); opacity: .2; width: 0; }
.active .type-line { animation: type 0.5s steps(14) forwards; }
.active .type-line:nth-of-type(1) { animation-delay: 1.35s; }
.active .type-line:nth-of-type(2) { animation-delay: 1.75s; }
.active .type-line:nth-of-type(3) { animation-delay: 2.15s; }
@keyframes type { to { width: var(--w, 90%); } }

/* — screen: flashcards — */
.card3d { perspective: 700px; flex: 1; display: grid; place-items: center; margin-top: 8px; }
.card3d-inner {
  position: relative;
  width: 86%; aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease);
}
.active .card3d-inner { animation: flip 4.2s var(--ease-in-out) 1s infinite; }
@keyframes flip {
  0%, 38%   { transform: rotateY(0deg); }
  50%, 88%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(360deg); }
}
.card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 11px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  box-shadow: 0 10px 24px -14px rgb(var(--glass-shadow) / .7);
  padding: 12px 11px;
  display: flex; flex-direction: column; gap: 5px; justify-content: center;
}
.card-face.back { transform: rotateY(180deg); background: var(--accent-soft); border-color: var(--accent); }
.card-face .k { font-size: 7px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 640; margin-bottom: 2px; }
.grade-row { display: flex; gap: 4px; margin-top: 8px; flex: none; }
.grade { flex: 1; padding: 5px 0; border-radius: 7px; text-align: center; font-size: 7.5px; font-weight: 600; border: 1px solid var(--rule); color: var(--ink-soft); }
.grade.good { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* — screen: workbench — */
.clip {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: 7px;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0;
  transform: translateY(16px) scale(.94);
}
.active .clip { animation: clip-in .6s var(--spring) forwards; }
.active .clip:nth-child(1) { animation-delay: .35s; }
.active .clip:nth-child(2) { animation-delay: .55s; }
.active .clip:nth-child(3) { animation-delay: .75s; }
.active .clip:nth-child(4) { animation-delay: .95s; }
@keyframes clip-in { to { opacity: 1; transform: none; } }
.clip .src { font-size: 6.5px; color: var(--ink-faint); }
.clip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; margin-top: 8px; align-content: start; }

/* — screen: filing — */
.file-move {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 7px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  opacity: 0; transform: translateX(-10px);
}
html[dir="rtl"] .file-move { transform: translateX(10px); }
.active .file-move { animation: slide-in .55s var(--ease) forwards; }
.active .file-move:nth-child(1) { animation-delay: .3s; }
.active .file-move:nth-child(2) { animation-delay: .5s; }
.active .file-move:nth-child(3) { animation-delay: .7s; }
.active .file-move:nth-child(4) { animation-delay: .9s; }
@keyframes slide-in { to { opacity: 1; transform: none; } }
.file-move .arrow { color: var(--accent); flex: none; }
.file-move .folder { font-size: 7.5px; font-weight: 620; color: var(--accent); }
html[dir="rtl"] .file-move .arrow { transform: scaleX(-1); }

/* — screen: transform — */
.morph-row { display: flex; flex-direction: column; gap: 5px; }
.morph-line { position: relative; height: 4px; border-radius: 2px; overflow: hidden; background: var(--ink); opacity: .14; }
.morph-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
html[dir="rtl"] .morph-line::after { transform-origin: right; }
.active .morph-line::after { animation: fill 1.1s var(--ease) forwards; }
.active .morph-line:nth-child(1)::after { animation-delay: .4s; }
.active .morph-line:nth-child(2)::after { animation-delay: .55s; }
.active .morph-line:nth-child(3)::after { animation-delay: .7s; }
.active .morph-line:nth-child(4)::after { animation-delay: .85s; }
.active .morph-line:nth-child(5)::after { animation-delay: 1s; }
@keyframes fill { to { transform: scaleX(1); } }

.prog {
  height: 5px; border-radius: 99px; background: var(--paper-sunken);
  overflow: hidden; margin-top: 8px; flex: none;
}
.prog i { display: block; height: 100%; border-radius: 99px; background: var(--accent); width: 0; }
.active .prog i { animation: prog 3.4s var(--ease-in-out) .4s forwards; }
@keyframes prog { to { width: 78%; } }

/* — screen: book — */
.book-stack { position: relative; flex: 1; margin-top: 8px; display: grid; place-items: center; }
.book-sheet {
  position: absolute;
  width: 62%; aspect-ratio: 1 / 1.414;
  border-radius: 5px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 22px -14px rgb(var(--glass-shadow) / .8);
  padding: 9px 8px;
  display: flex; flex-direction: column; gap: 3.5px;
  opacity: 0;
}
.active .book-sheet { animation: sheet-fan .8s var(--ease) forwards; }
.active .book-sheet:nth-child(1) { animation-delay: .3s; --tx: -26%; --rot: -9deg; }
.active .book-sheet:nth-child(2) { animation-delay: .5s; --tx: -9%;  --rot: -3deg; }
.active .book-sheet:nth-child(3) { animation-delay: .7s; --tx: 9%;   --rot: 3deg; }
.active .book-sheet:nth-child(4) { animation-delay: .9s; --tx: 26%;  --rot: 9deg; }
@keyframes sheet-fan {
  from { opacity: 0; transform: translateX(0) rotate(0) scale(.9); }
  to   { opacity: 1; transform: translateX(var(--tx)) rotate(var(--rot)); }
}

/* — screen: tools — */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; align-content: start; flex: 1; }
.tool-cell {
  padding: 9px 7px; border-radius: 9px;
  background: var(--paper-raised); border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: scale(.9);
}
.active .tool-cell { animation: pop .5s var(--spring) forwards; }
.active .tool-cell:nth-child(1) { animation-delay: .3s; }
.active .tool-cell:nth-child(2) { animation-delay: .4s; }
.active .tool-cell:nth-child(3) { animation-delay: .5s; }
.active .tool-cell:nth-child(4) { animation-delay: .6s; }
.active .tool-cell:nth-child(5) { animation-delay: .7s; }
.active .tool-cell:nth-child(6) { animation-delay: .8s; }
@keyframes pop { to { opacity: 1; transform: none; } }
.tool-cell .ti { color: var(--accent); }
.tool-cell .tl { font-size: 7.5px; font-weight: 600; }

.sig { position: absolute; inset: auto 10px 46px 10px; height: 40px; }
.sig path {
  fill: none; stroke: var(--pen-ink); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
}
.active .sig path { animation: draw 1.8s var(--ease) .6s forwards; }

/* — screen: papers — */
.paper-hit {
  padding: 7px 8px; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--paper-raised);
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transform: translateY(10px);
}
.active .paper-hit { animation: slide-in .5s var(--ease) forwards; }
.active .paper-hit:nth-child(1) { animation-delay: .5s; }
.active .paper-hit:nth-child(2) { animation-delay: .65s; }
.active .paper-hit:nth-child(3) { animation-delay: .8s; }
.paper-hit .badge { font-size: 6.5px; font-weight: 700; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }

/* — screen: scan — */
.scan-frame {
  position: absolute; inset: 22px 16px 56px;
  border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.scan-frame span {
  position: absolute; width: 14px; height: 14px;
  border: 2.5px solid var(--accent); border-radius: 3px;
}
.scan-frame span:nth-child(1) { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.scan-frame span:nth-child(2) { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.scan-frame span:nth-child(3) { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.scan-frame span:nth-child(4) { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.scan-beam {
  position: absolute; inset-inline: 0; height: 30%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 26%, transparent), transparent);
  top: 0;
}
.active .scan-beam { animation: scan 2.6s var(--ease-in-out) infinite; }
@keyframes scan { 0%,100% { top: 0; } 50% { top: 70%; } }

/* — screen: blank pads — */
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; align-content: start; flex: 1; }
.rule-card {
  aspect-ratio: 1 / 1.25; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--paper-raised);
  position: relative; overflow: hidden;
  opacity: 0; transform: scale(.92);
}
.active .rule-card { animation: pop .5s var(--spring) forwards; }
.active .rule-card:nth-child(1) { animation-delay: .3s; }
.active .rule-card:nth-child(2) { animation-delay: .42s; }
.active .rule-card:nth-child(3) { animation-delay: .54s; }
.active .rule-card:nth-child(4) { animation-delay: .66s; }
.rule-card .lbl { position: absolute; inset-inline-start: 5px; bottom: 4px; font-size: 6.5px; font-weight: 640; color: var(--ink-faint); }
.rl-lined  { background-image: repeating-linear-gradient(to bottom, transparent 0 8px, var(--rule) 8px 9px); }
.rl-square { background-image: repeating-linear-gradient(to bottom, transparent 0 8px, var(--rule) 8px 9px), repeating-linear-gradient(to right, transparent 0 8px, var(--rule) 8px 9px); }
.rl-dot    { background-image: radial-gradient(var(--rule) 1px, transparent 1px); background-size: 9px 9px; }

/* ==========================================================================
   NUMBER STRIP
   ========================================================================== */

.strip { border-block: 1px solid var(--rule); background: var(--paper-raised); }
.strip .wrap { display: grid; grid-template-columns: repeat(5, 1fr); }
.strip-cell {
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem) clamp(0.5rem, 0.3rem + 1vw, 1.5rem);
  border-inline-start: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.strip-cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.strip-cell:last-child { padding-inline-end: 0; }
.strip-num {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1;
  font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 100;
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}
.strip-lbl { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.35; text-wrap: balance; }

/* ==========================================================================
   OFFLINE — the promise
   ========================================================================== */

.offline { background: var(--paper-sunken); overflow: clip; }
[data-theme="dark"] .offline { background: var(--paper-sunken); }
.offline::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 78% 20%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.offline .wrap { position: relative; }

.offline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.promise-cards { display: grid; gap: 0.9rem; margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promise {
  padding: 1.35rem 1.4rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--paper-raised) 78%, transparent);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.promise:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 24px 48px -30px rgb(var(--glass-shadow) / .9); }
.promise .n { font-family: var(--serif); font-size: 0.9rem; color: var(--accent); opacity: .5; }
.promise h3 { font-size: 1.08rem; margin: 0.35rem 0 0.4rem; }
.promise p { font-size: 0.9rem; color: var(--ink-soft); }
.promise.wide { grid-column: 1 / -1; }
@media (max-width: 620px) { .promise-cards { grid-template-columns: 1fr; } }

/* Permission ledger */
.perm-panel {
  padding: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  box-shadow: 0 30px 70px -46px rgb(var(--glass-shadow) / .9);
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}
.perm-title { font-size: 0.9rem; font-weight: 620; margin-bottom: 1.2rem; text-wrap: balance; }
.perm-group + .perm-group { margin-top: 1.35rem; }
.perm-head {
  font-size: 0.68rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-faint); margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.5em;
}
.perm-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.perm {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  transition: background-color .3s var(--ease);
  opacity: 0; transform: translateY(8px);
}
.in .perm { animation: slide-in .5s var(--ease) forwards; }
.in .perm:nth-of-type(1) { animation-delay: .1s; }
.in .perm:nth-of-type(2) { animation-delay: .2s; }
.perm-group:nth-of-type(2) .perm:nth-of-type(1) { animation-delay: .3s; }
.perm-group:nth-of-type(2) .perm:nth-of-type(2) { animation-delay: .4s; }
.perm-group:nth-of-type(2) .perm:nth-of-type(3) { animation-delay: .5s; }
.perm-group:nth-of-type(2) .perm:nth-of-type(4) { animation-delay: .6s; }
.perm .mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.perm.yes .mark { background: var(--accent); color: var(--on-accent); }
.perm.no .mark { background: var(--paper-sunken); color: var(--ink-faint); }
.perm.no { color: var(--ink-faint); }
.perm.no span.txt { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-faint) 55%, transparent); }

/* ==========================================================================
   FEATURES — sticky phone, scroll-driven
   ========================================================================== */

.features { overflow: clip; }

.feat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(2rem, 1rem + 4vw, 5.5rem);
  align-items: start;
}

.feat-list { display: flex; flex-direction: column; }

.feat-item {
  position: relative;
  padding: clamp(2rem, 1.4rem + 2vw, 3.2rem) 0 clamp(2rem, 1.4rem + 2vw, 3.2rem) clamp(1.5rem, 1rem + 1.5vw, 2.6rem);
  border-top: 1px solid var(--rule);
  cursor: pointer;
  transition: opacity .6s var(--ease);
}
html[dir="rtl"] .feat-item { padding-left: 0; padding-right: clamp(1.5rem, 1rem + 1.5vw, 2.6rem); }
.feat-item:last-child { border-bottom: 1px solid var(--rule); }
.feat-item::before {
  /* The rail that lights up on the active station. */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--ease);
}
.feat-item.on::before { transform: scaleY(1); }
.feat-item .num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: .1em;
  transition: color .4s var(--ease);
}
.feat-item.on .num { color: var(--accent); }
.feat-item h3 { margin: 0.55rem 0 0.65rem; transition: color .4s var(--ease); }
.feat-item.on h3 { color: var(--accent); }
.feat-item p { color: var(--ink-soft); font-size: 0.98rem; max-width: 54ch; }
.feat-item .name {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-inline-start: 0.9em;
  transition: color .4s var(--ease);
}
.feat-item.on .name { color: var(--accent); }
.feat-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }
.tag {
  font-size: 0.75rem; font-weight: 560;
  padding: 0.32em 0.75em;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper-raised) 65%, transparent);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.feat-item.on .tag { border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink); }

.feat-sticky {
  position: sticky;
  top: calc(var(--nav-h) + clamp(1rem, 0.5rem + 2vw, 3rem));
  display: grid;
  place-items: center;
  padding-block: 1rem;
}
.feat-sticky .phone { width: min(300px, 100%); transform: rotateY(-8deg) rotateX(3deg); }

/* Mobile: the screens ride along inside each card instead. */
.feat-inline-phone { display: none; }

/* ==========================================================================
   MODELS
   ========================================================================== */

.models { background: var(--paper-raised); border-block: 1px solid var(--rule); }

.tier-tabs {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  margin-bottom: 2.2rem;
}
.tier-tab {
  position: relative; z-index: 1;
  padding: 0.6em 1.35em;
  border-radius: var(--r-pill);
  font-size: 0.9rem; font-weight: 600;
  color: var(--ink-soft);
  transition: color .35s var(--ease);
  white-space: nowrap;
}
.tier-tab.on { color: var(--on-accent); }
.tier-ind {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 5px; bottom: 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: transform .55s var(--spring), width .55s var(--spring);
  box-shadow: 0 6px 18px -8px rgb(var(--glass-shadow) / .9);
}

.tier-blurb { color: var(--ink-faint); font-size: 0.9rem; margin: -1.4rem 0 2.2rem; min-height: 1.4em; }

.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1rem; }
.model-card {
  position: relative;
  padding: 1.3rem 1.35rem 1.2rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
  opacity: 0; transform: translateY(14px);
  animation: slide-in .55s var(--ease) forwards;
}
.model-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 26px 52px -32px rgb(var(--glass-shadow) / .95); }
.model-card .maker { font-size: 0.7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.model-card .mname { font-family: var(--serif); font-size: 1.28rem; margin: 0.3rem 0 0.15rem; letter-spacing: -0.01em; }
.model-card .params { font-size: 0.82rem; color: var(--ink-faint); }
.model-card .langs { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.85rem; }
.model-meta { display: flex; gap: 1.1rem; margin-top: 1.1rem; padding-top: 0.95rem; border-top: 1px solid var(--rule); }
.model-meta div { font-size: 0.78rem; color: var(--ink-faint); }
.model-meta b { display: block; font-size: 0.95rem; font-weight: 620; color: var(--ink); font-variant-numeric: tabular-nums; }
.model-card .rec {
  position: absolute; inset-block-start: 1.15rem; inset-inline-end: 1.2rem;
  font-size: 0.63rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 0.3em 0.6em; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
}
.model-card.is-rec { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.model-note { margin-top: 1.8rem; font-size: 0.9rem; color: var(--ink-faint); max-width: 62ch; display: flex; gap: 0.7rem; }
.model-note svg { flex: none; margin-top: .2em; color: var(--accent); }

/* ==========================================================================
   LANGUAGES
   ========================================================================== */

.langs-cloud {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 2.4rem;
}
.lang-chip {
  --d: 0ms;
  padding: 0.62em 1.15em;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  font-weight: 540;
  color: var(--ink-soft);
  transition: transform .45s var(--spring), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  opacity: 0; transform: translateY(14px) scale(.94);
}
.in .lang-chip { animation: pop .55s var(--spring) var(--d) forwards; }
.lang-chip:hover { transform: translateY(-3px) scale(1.05); color: var(--accent); border-color: var(--accent); }
.lang-chip[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lang-chip .rtl-mark { font-size: 0.65em; opacity: .7; margin-inline-start: 0.45em; }

.lang-hint { margin-top: 1.6rem; font-size: 0.9rem; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 0.5em; }
.lang-hint svg { color: var(--accent); }

/* ==========================================================================
   CRAFT
   ========================================================================== */

.craft { background: var(--paper-sunken); }
.craft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.craft-card {
  padding: 1.6rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  opacity: 0; transform: translateY(18px);
  transition: transform .7s var(--ease), opacity .7s var(--ease), border-color .4s var(--ease);
}
.in .craft-card { opacity: 1; transform: none; }
.craft-card:nth-child(1) { transition-delay: 0ms; }
.craft-card:nth-child(2) { transition-delay: 90ms; }
.craft-card:nth-child(3) { transition-delay: 180ms; }
.craft-card:nth-child(4) { transition-delay: 270ms; }
.craft-card:hover { border-color: var(--accent); }
.craft-card h3 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.craft-card p { font-size: 0.92rem; color: var(--ink-soft); }
.craft-card .swatches { display: flex; gap: 5px; margin-bottom: 1rem; }
.craft-card .sw { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--rule); }

.theme-try {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin-top: 2.4rem;
  padding: 0.5rem 0.6rem 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
html[dir="rtl"] .theme-try { padding: 0.5rem 1.1rem 0.5rem 0.6rem; }
.theme-switch { position: relative; display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--paper-sunken); }
.theme-switch button { padding: 0.4em 0.9em; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); position: relative; z-index: 1; transition: color .3s var(--ease); }
.theme-switch button.on { color: var(--on-accent); }
.theme-switch .ts-ind { position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; border-radius: var(--r-pill); background: var(--accent); transition: transform .5s var(--spring), width .5s var(--spring); }

/* ==========================================================================
   HONEST
   ========================================================================== */

.honest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0; margin-top: 1rem; }
.honest-cell {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  border: 1px solid var(--rule);
  margin: -0.5px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), background-color .4s var(--ease);
}
.in .honest-cell { opacity: 1; transform: none; }
.honest-cell:nth-child(2) { transition-delay: 90ms; }
.honest-cell:nth-child(3) { transition-delay: 180ms; }
.honest-cell:nth-child(4) { transition-delay: 270ms; }
.honest-cell:hover { background: var(--paper-raised); }
.honest-cell h3 { font-size: 1.22rem; color: var(--accent); margin-bottom: 0.55rem; }
.honest-cell p { font-size: 0.92rem; color: var(--ink-soft); }

/* ==========================================================================
   PRIVACY quote
   ========================================================================== */

.privacy { text-align: center; }
.privacy blockquote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.5rem);
  line-height: 1.24;
  letter-spacing: -0.018em;
  font-variation-settings: "SOFT" 26, "WONK" 1, "opsz" 100;
  max-width: 24ch;
  margin: 1.6rem auto 0;
  text-wrap: balance;
  position: relative;
}
.privacy .attrib { margin: 2rem auto 0; max-width: 48ch; font-size: 0.92rem; color: var(--ink-faint); }
.privacy .eyebrow::after { content: ""; width: 1.9em; height: 1px; background: currentColor; opacity: .5; }

/* ==========================================================================
   DOWNLOAD
   ========================================================================== */

.download { position: relative; overflow: clip; }
.download-inner {
  position: relative;
  border-radius: clamp(24px, 3vw, 40px);
  padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  background: linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, var(--coral)) 55%, var(--coral) 100%);
  color: var(--on-accent);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
[data-theme="dark"] .download-inner { color: #33150F; }
.download-inner::before {
  content: "";
  position: absolute; inset: -40%;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.34), transparent 70%) 20% 25% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%) 80% 70% / 50% 50% no-repeat;
  animation: drift 22s var(--ease-in-out) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
.download-inner h2 { color: inherit; max-width: 18ch; margin: 0.4em auto 0.5em; }
.download-inner .eyebrow { color: inherit; opacity: .85; }
.download-inner .lead { color: inherit; opacity: .9; margin-inline: auto; }
.download-inner .cta-row { justify-content: center; margin-top: 2.2rem; }
.download-inner .play-badge { background: var(--paper); color: var(--ink); }
.dl-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.6rem; margin-top: 2rem; }
.dl-specs span {
  font-size: 0.8rem; font-weight: 560;
  padding: 0.42em 0.95em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.14);
}
[data-theme="dark"] .dl-specs span { border-color: rgba(51,21,15,.28); background: rgba(51,21,15,.10); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.footer .brand { font-size: 1.15rem; }
.footer .tagline { margin-top: 0.9rem; color: var(--ink-soft); font-size: 0.92rem; max-width: 34ch; }
.footer h4 { font-size: 0.7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer li a { font-size: 0.92rem; color: var(--ink-soft); transition: color .25s var(--ease); }
.footer li a:hover { color: var(--accent); }
.footer-base {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: 0.82rem; color: var(--ink-faint);
}
/* The line naming the publisher is a link, as it is on the portfolio: a
   reader who wants to know who made this should not have to guess the
   address. It keeps the muted colour of the row it sits in and takes its
   underline on hover only, so the foot of the page stays quiet. */
.footer-base .by {
  display: inline-flex; align-items: center; gap: 0.55em;
  color: inherit; text-decoration: none;
}
.footer-base .by:hover span,
.footer-base .by:focus-visible span { text-decoration: underline; }
.footer-base .by:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 3px; }
.footer-base .by img { width: 20px; height: 20px; opacity: .9; }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */

.progress-rail {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  height: 2px;
  z-index: 950;
  pointer-events: none;
}
.progress-rail i {
  display: block; height: 100%;
  background: linear-gradient(to right, var(--accent), var(--coral));
  transform-origin: left;
  transform: scaleX(0);
}
html[dir="rtl"] .progress-rail i { transform-origin: right; }

/* Cursor spotlight, desktop pointers only. */
.spotlight {
  position: fixed;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s var(--ease);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 16%, transparent), transparent);
  mix-blend-mode: multiply;
}
[data-theme="dark"] .spotlight { mix-blend-mode: screen; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 12%, transparent), transparent); }
@media (hover: hover) and (pointer: fine) { .spotlight.on { opacity: 1; } }

/* ==========================================================================
   REVEAL utility
   ========================================================================== */

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }
[data-reveal][data-delay="3"] { transition-delay: .3s; }

/* Language switch: the page re-typesets rather than snapping. */
body.retypeset main, body.retypeset .nav, body.retypeset .footer {
  opacity: .25;
  filter: blur(3px);
  transition: opacity .22s var(--ease), filter .22s var(--ease);
}
main, .nav, .footer { transition: opacity .45s var(--ease), filter .45s var(--ease); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width: 1000px) { .nav-cta { display: inline-flex; } }

/* Short viewports — a small handset held upright, or a 720p laptop. The hero
   still owes exactly one screenful, so the least load-bearing element goes:
   the airplane-mode box, whose claim the very next section makes again. */
@media (max-height: 730px) {
  .hero-note { display: none; }
  .hero .cta-note { display: none; }
  .hero-copy > * + * { margin-top: 0.9rem; }
  .hero h1 { font-size: min(clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem), 9svh); }
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 2rem + 3vw, 4rem); }
  .orbit { display: none; }
  .hero-copy { max-width: 44rem; }
  .phone-stage { margin-top: 1rem; }
  .offline-grid { grid-template-columns: 1fr; }
  .perm-panel { position: static; }
}

@media (max-width: 900px) {
  :root { --nav-h: 62px; }
  .nav-links { display: none; }
  .menu-btn { display: grid; }

  /* The phone leaves the hero on a handset. Stacked under the copy it made the
     first screen twice a screenful, and the visitor is holding a phone already —
     every feature card further down carries its own anyway. */
  .hero .phone-stage { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  /* Two columns, and no vertical rule. Five cells never divide evenly into two,
     so the column divider always dead-ends halfway down the block and reads as
     an unfinished table. Horizontal rules alone say the same thing cleanly. */
  .strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1rem, 4vw, 2.5rem); }
  .strip-cell { border-inline-start: 0; border-top: 1px solid var(--rule); padding-inline: 0; }
  .strip-cell:nth-child(-n+2) { border-top: 0; }
  .strip-cell:last-child { grid-column: 1 / -1; }

  /* The sticky phone gives way: each feature carries its own screen. */
  .feat-layout { grid-template-columns: 1fr; }
  .feat-sticky { display: none; }
  .feat-inline-phone {
    display: block;
    margin-top: 1.6rem;
    max-width: 260px;
  }
  .feat-inline-phone .phone { transform: none; width: 100%; }
  .feat-item { padding-inline-start: 1.1rem; }
  html[dir="rtl"] .feat-item { padding-inline-end: 1.1rem; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .craft-grid { grid-template-columns: 1fr; }
  .honest-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  /* Number and label on one line, one figure per row: five short rows instead
     of three tall ones, and nothing left dangling. */
  .strip .wrap { grid-template-columns: 1fr; }
  .strip-cell {
    flex-direction: row;
    align-items: baseline;
    gap: 0.9rem;
    padding-block: 1rem;
  }
  .strip-cell:nth-child(2) { border-top: 1px solid var(--rule); }
  .strip-num { font-size: 2.1rem; min-width: 2.1ch; text-align: end; }
  .strip-lbl { font-size: 0.9rem; }

  .orbit { display: none; }
  .promise-cards { grid-template-columns: 1fr; }
  .model-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .tier-tabs { width: 100%; justify-content: space-between; }
  .tier-tab { padding-inline: 0.9em; flex: 1; text-align: center; }
  .privacy blockquote { max-width: 100%; }
}

/* ==========================================================================
   REDUCED MOTION — everything above degrades to a static, readable page.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .grain { animation: none; }
  .reveal-word, .fade-up, [data-reveal], .lang-chip, .craft-card, .honest-cell,
  .model-card, .clip, .tool-cell, .rule-card, .paper-hit, .file-move, .perm, .book-sheet {
    opacity: 1 !important;
    transform: none !important;
  }
  .ink-underline path { stroke-dashoffset: 0; }
  .pen-path path, .sig path { stroke-dashoffset: 0; }
  .card3d-inner { animation: none !important; }
  .ai-sheet { transform: none !important; }
  .type-line { width: var(--w, 90%) !important; }
  .prog i { width: 78% !important; }
  .morph-line::after { transform: scaleX(1) !important; }
  .hl-sweep { transform: scaleX(1) !important; }
  .zone-box { opacity: 1 !important; }
  #aurora { display: none; }
  .spotlight { display: none; }
}

@media print {
  .nav, .grain, .spotlight, .progress-rail, .phone-stage, .feat-sticky { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   DOCUMENT PAGE — the privacy policy
   --------------------------------------------------------------------------
   A policy nobody reads is a policy that failed. This one is set like a page
   from a book: one column, a generous measure, numbered sections, and the
   claim that matters lifted out of the flow.
   ========================================================================== */

.doc { padding-block: calc(var(--nav-h) + clamp(2.5rem, 2rem + 3vw, 5rem)) clamp(4rem, 3rem + 4vw, 7rem); }
.doc .wrap { max-width: 760px; }

.doc-back {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.875rem; font-weight: 560;
  color: var(--ink-soft);
  padding: 0.45em 0.9em 0.45em 0.75em;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.doc-back svg { transform: rotate(180deg); }
html[dir="rtl"] .doc-back svg { transform: none; }
.doc-back:hover { color: var(--accent); border-color: var(--accent); transform: translateX(-3px); }
html[dir="rtl"] .doc-back:hover { transform: translateX(3px); }

.doc-head { margin-block: clamp(2rem, 1.5rem + 2vw, 3.2rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.doc-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-block: 0.55em 0.5em; max-width: 20ch; }
.doc-date {
  font-size: 0.8125rem; color: var(--ink-faint);
  display: inline-flex; gap: 0.4em;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
  width: 100%;
}
.doc-head .lead { margin-top: 1.6rem; max-width: 62ch; }

/* The one paragraph that is also printed inside the app. */
.doc-callout {
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
  border-radius: var(--r-lg);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.doc-callout h2 {
  font-size: 0.72rem; font-family: var(--sans); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.9rem;
}
.doc-callout-body {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
  line-height: 1.4;
  font-variation-settings: "SOFT" 26, "WONK" 1, "opsz" 100;
  letter-spacing: -0.012em;
}
.doc-callout-note { margin-top: 1.1rem; font-size: 0.875rem; color: var(--ink-soft); }

.doc-sec { padding-block: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); border-top: 1px solid var(--rule); }
.doc-sec h2 {
  display: flex; align-items: baseline; gap: 0.8em;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  margin-bottom: 0.9rem;
}
.doc-n {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  flex: none;
}
.doc-sec p { color: var(--ink-soft); max-width: 64ch; }
.doc-sec p + p { margin-top: 0.9rem; }
.doc-note {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--rule);
  background: color-mix(in srgb, var(--paper-raised) 60%, transparent);
}

.doc-list { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: 0.6rem; max-width: 64ch; }
.doc-list li {
  position: relative;
  padding-inline-start: 1.7em;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.doc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.35em; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
/* A crossed-through bullet for the lists of things that do not happen. */
.doc-list-no li::before {
  content: "";
  inset-inline-start: 0.15em; top: 0.5em;
  width: 11px; height: 11px;
  border-radius: 3px;
  background: none;
  border: 1.5px solid var(--ink-faint);
}
.doc-list-no li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.34em; top: 0.86em;
  width: 7px; height: 1.5px;
  background: var(--ink-faint);
  transform: rotate(-45deg);
}

/* The four occasions, as four cards — the exhaustive list is the point. */
.net-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.6rem; }
.net-card {
  padding: 1.3rem 1.35rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  transition: border-color .35s var(--ease), transform .45s var(--ease);
}
.net-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.net-host {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  word-break: break-all;
}
.net-card h3 { font-size: 1.05rem; margin: 0.5rem 0 0.5rem; }
.net-card p { font-size: 0.9rem; color: var(--ink-soft); }
.net-card-none { background: var(--paper-sunken); }
.net-card-none .net-host { color: var(--ink-faint); }

.doc-contact { margin-top: 1rem; }
.doc-contact a {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  word-break: break-all;
}
.doc-contact a:hover { border-bottom-color: var(--accent); }

@media (max-width: 620px) {
  .net-grid { grid-template-columns: 1fr; }
  .doc-sec h2 { flex-direction: column; gap: 0.35em; }
}

/* ==========================================================================
   LEGAL PAGES — notice, terms, licences
   --------------------------------------------------------------------------
   Same document furniture as the privacy policy, plus what a licence page
   needs: long tables that must not push the page sideways, and licence text
   that has to be reproduced verbatim.
   ========================================================================== */

.doc-lang-note {
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: 0.85rem 1.05rem;
  border-radius: var(--r-md);
  border: 1px dashed var(--rule);
  background: color-mix(in srgb, var(--paper-raised) 60%, transparent);
  font-size: 0.85rem;
  color: var(--ink-faint);
  max-width: 64ch;
}
.doc-lang-note a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }

.doc-sec a:not(.doc-contact a) {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  transition: border-color .25s var(--ease);
}
.doc-sec a:hover { border-bottom-color: var(--accent); }
.doc-sec strong { color: var(--ink); font-weight: 620; }
.doc-sec em { font-style: italic; }

.mono { font-family: var(--mono); font-size: 0.86em; }

.lic-h {
  font-size: 1.02rem;
  margin: 1.9rem 0 0.7rem;
  display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap;
}
.lic-count {
  font-family: var(--sans);
  font-size: 0.68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  padding: 0.22em 0.6em;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
}

/* A wide table scrolls inside its own box; the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  margin-top: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  -webkit-overflow-scrolling: touch;
}
.lic-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 380px; }
.lic-table th {
  text-align: start;
  font-size: 0.66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.lic-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
  color: var(--ink-soft);
  vertical-align: baseline;
}
.lic-table tr:last-child td { border-bottom: 0; }
.lic-table tbody tr { transition: background-color .2s var(--ease); }
.lic-table tbody tr:hover { background: color-mix(in srgb, var(--paper-sunken) 55%, transparent); }
.lic-table td.num { font-variant-numeric: tabular-nums; color: var(--ink-faint); white-space: nowrap; }
.lic-table td:first-child { color: var(--ink); }

.lic-text {
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  background: var(--paper-sunken);
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.62;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-x: auto;
}

@media (max-width: 620px) {
  .lic-table { font-size: 0.8rem; }
  .lic-table th, .lic-table td { padding-inline: 0.65rem; }
}

/* A definition list for the publisher and host blocks: label left, value right
   on a wide screen, stacked once there is no room for two columns. */
.doc-dl {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
.doc-dl dt {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.5;
}
.doc-dl dd {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.doc-dl dd strong { color: var(--ink); }

@media (max-width: 640px) {
  .doc-dl { grid-template-columns: 1fr; }
  .doc-dl dt { padding-bottom: 0.2rem; border-bottom: 0; }
  .doc-dl dd { padding-top: 0.15rem; }
}

/* ==========================================================================
   404
   ========================================================================== */

.notfound {
  min-height: 72svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: calc(var(--nav-h) + 4rem) 5rem;
}
.nf-code {
  font-family: var(--serif);
  font-size: clamp(6rem, 4rem + 14vw, 13rem);
  line-height: 0.9;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 144;
  color: var(--accent);
  opacity: 0.14;
  margin-bottom: -0.12em;
  user-select: none;
  letter-spacing: -0.03em;
}
.notfound .eyebrow { justify-content: center; }
.notfound h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem); margin: 0.5em auto 0.45em; max-width: 16ch; }
.notfound .lead { margin-inline: auto; max-width: 44ch; }
.nf-actions { margin-top: 2.2rem; }

/* Permissions Android grants at install without asking: true, but weaker than
   the two the user is actually prompted for, so they read as a middle tier. */
.perm.normal { color: var(--ink-soft); }
.perm.normal .mark { background: var(--icon-bg); color: var(--ink-soft); }

/* A paragraph following a list needs the same air as one following a paragraph;
   only `p + p` had it, so prose after a bullet list ran flush against it. */
.doc-sec ul + p,
.doc-sec .table-scroll + p,
.doc-sec dl + p { margin-top: 1.1rem; }

/* ==========================================================================
   SCROLLBAR
   --------------------------------------------------------------------------
   Two engines, two syntaxes, and they do not cooperate: Chrome 121+ ignores
   the ::-webkit- pseudo-elements as soon as `scrollbar-color` is set. So the
   feature query picks exactly one path per browser instead of declaring both
   and hoping. Firefox has no pseudo-elements and takes the standard branch.

   The thumb is the burgundy of the mark, held back to just over half strength
   so it reads as furniture rather than as a control competing with the page.
   ========================================================================== */

@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 13px; height: 13px; }

  ::-webkit-scrollbar-track { background: var(--scroll-track); }

  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 52%, var(--scroll-track));
    border-radius: 999px;
    /* A border in the track's own colour is what gives the thumb its inset;
       scrollbars have no padding of their own. */
    border: 3px solid var(--scroll-track);
    transition: background-color .25s var(--ease);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
  ::-webkit-scrollbar-thumb:active { background: var(--accent); }

  ::-webkit-scrollbar-corner { background: var(--scroll-track); }

  /* Inside a panel or a wide licence table, the same bar at two thirds scale. */
  .table-scroll::-webkit-scrollbar,
  .lang-sheet .panel::-webkit-scrollbar,
  .lic-text::-webkit-scrollbar { width: 9px; height: 9px; }
  .table-scroll::-webkit-scrollbar-thumb,
  .lang-sheet .panel::-webkit-scrollbar-thumb,
  .lic-text::-webkit-scrollbar-thumb { border-width: 2px; }
}

@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 52%, var(--scroll-track)) var(--scroll-track);
  }
  .table-scroll, .lang-sheet .panel, .lic-text {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 52%, var(--scroll-track)) var(--scroll-track);
  }
}

/* ==========================================================================
   The language picker, and the 131 KB it used to cost
   --------------------------------------------------------------------------
   Every language is listed in its own script — Ελληνικά, Русский, Tiếng Việt,
   Čeština. Set in Inter, that single list made the browser fetch the Greek,
   Cyrillic, Vietnamese and Latin-Extended subsets, whatever language the
   visitor actually reads: 131 KB of the 244 KB of fonts, downloaded to render
   twenty-two words nobody asked for.

   The system stack already carries every one of those glyphs, at no cost —
   and the picker was half-using it anyway, since Inter has no CJK, Arabic,
   Thai or Devanagari to fall back from. This just makes it consistent.
   ========================================================================== */

.lang-chip,
.lang-opt .native,
.lang-opt .code {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   NO SCRIPT
   --------------------------------------------------------------------------
   Every reveal starts at `opacity: 0` and waits for a class the script adds.
   That is fine while the script runs — and leaves a half-empty page when it
   does not: the hero showed its headline and nothing else. The flag is set by
   an inline <script> in <head>, so this costs no flash when script is present,
   and hides nothing when it is absent.
   ========================================================================== */

html:not(.js) .fade-up,
html:not(.js) [data-reveal],
html:not(.js) .craft-card,
html:not(.js) .honest-cell,
html:not(.js) .perm,
html:not(.js) .lang-chip,
html:not(.js) .model-card {
  opacity: 1;
  transform: none;
}

html:not(.js) .ink-underline path { stroke-dashoffset: 0; }
/* The aurora and the phone screens are script-driven; without it they are
   simply absent rather than broken. */
html:not(.js) #aurora { display: none; }