/* Newlings public site (spec 012 FR-1112 to FR-1114). Tokens from specs/002-reader-app/design.md. The landing pages take
   the look of the App Store frames (apps/reader/tool/store): bold ink blue, deep blue and saffron sections between paper
   ones, huge Newsreader headlines with a rough highlighter behind line 2, the six level keys and lifted UI cards. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The heavy weights of the headlines and sublines: the makers' own static web fonts, unchanged (Newsreader's 72 pt display
   cut, as in the App Store frames). With real faces for 800 and 600 the browser no longer thickens the regular files. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

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

:root {
  color-scheme: light dark;
  --paper: #F7F4EC;
  --surface: #FFFFFF;
  --ink: #15181C;
  --ink2: #4A4F57;
  --line: #E1DDD1;
  --primary: #1B3A8A;
  --primary-deep: #12285F;
  --primary-soft: #E3E8F4;
  --on-primary: #F7F4EC;
  --accent: #E0A030;
  --accent-deep: #8A5A0C;
  --accent-soft: #FBEFD6;
  --band: #1B3A8A;
  --band-ink: #F7F4EC;
  --band-soft: #D5DBEA;
  --frame: #0D0E11;
  --shadow: 0 1px 2px rgba(21, 24, 28, 0.05), 0 12px 32px -16px rgba(21, 24, 28, 0.18);
  --cast: rgba(21, 24, 28, 0.32);
  --a1: #E3E8F4; --a1-ink: #12285F;
  --a2: #C5D0EE; --a2-ink: #12285F;
  --b1: #93A8DF; --b1-ink: #12285F;
  --b2: #4A63B8; --b2-ink: #F7F4EC;
  --c1: #1B3A8A; --c1-ink: #F7F4EC;
  --c2: #0E1F4F; --c2-ink: #F7F4EC;
  /* The bold sections keep the App Store frames' colours in both themes. */
  --bold-blue: #1B3A8A;
  --bold-deep: #12285F;
  --bold-saffron: #E0A030;
  --bold-paper: #F7F4EC;
  --on-bold: #FFFFFF;
  --on-bold-soft: #D5DBEA;
  --on-saffron: #12285F;
  --card-paper: #FBF8F1;
  --card-ink: #15181C;
  --card-ink2: #4A4F57;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161A;
    --surface: #1C1F25;
    --ink: #EDEAE2;
    --ink2: #B5B2A9;
    --line: #2B2F37;
    --primary: #9AB0EA;
    --primary-deep: #C6D2F5;
    --primary-soft: #232E4E;
    --on-primary: #14161A;
    --accent: #E8B24A;
    --accent-deep: #F1CF8A;
    --accent-soft: #3A2E14;
    --band: #172448;
    --band-ink: #EDEAE2;
    --band-soft: #C9CFDD;
    --frame: #000000;
    --shadow: none;
    --cast: rgba(0, 0, 0, 0.7);
    --a1: #232E4E; --a1-ink: #EDEAE2;
    --a2: #2E3D6B; --a2-ink: #EDEAE2;
    --b1: #42579A; --b1-ink: #EDEAE2;
    --b2: #7C95D0; --b2-ink: #14161A;
    --c1: #9AB0EA; --c1-ink: #14161A;
    --c2: #C6D2F5; --c2-ink: #14161A;
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--primary); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
a:hover { text-decoration-thickness: 0.12em; }

:focus-visible { outline: 3px solid var(--focus, var(--primary)); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--primary);
  color: var(--on-primary);
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }

/* Header */

.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 14px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.625rem;
  letter-spacing: -0.01em;
}
.logo img { width: 34px; height: 34px; }

.lang {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.lang a {
  display: grid;
  place-items: center;
  min-width: 52px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--ink2);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.lang a[aria-current] { background: var(--primary); color: var(--on-primary); }
.lang a:not([aria-current]):hover { color: var(--ink); background: var(--primary-soft); }

/* The landing pages' header sits on the ink blue hero. */
.landing .top { position: absolute; inset: 0 0 auto; z-index: 5; --focus: var(--bold-paper); }
.landing .top { top: var(--app-card-room); }

/* Spec 012 FR-1127: the open or download card for Android. Plain style, no script: a touch device up to 820 pixels wide shows
   it; Apple's systems hide it, because Safari shows Apple's own Smart App Banner there (the apple-itunes-app tag). The landing
   header is absolute at the top of the page, so it sits below the card by --app-card-room (the card's margin and height). */
:root { --app-card-room: 0px; }
.app-card { display: none; }
@media (max-width: 820px) and (pointer: coarse) {
  :root { --app-card-room: 84px; }
  .app-card {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 72px;
    margin: 12px 12px 0;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
  }
  .app-card picture, .app-card img { flex: none; width: 40px; height: 40px; border-radius: 10px; }
  .app-card p { flex: 1; min-width: 0; margin: 0; line-height: 1.25; }
  .app-card strong { display: block; font-weight: 600; font-size: 1rem; }
  .app-card span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--ink2);
    font-size: 0.75rem;
  }
  .app-card .open {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 64px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    text-decoration: none;
  }
}
@supports (-webkit-touch-callout: none) {
  :root { --app-card-room: 0px; }
  .app-card { display: none; }
}
.landing .top .logo { color: var(--bold-paper); }
.landing .lang { border-color: rgba(247, 244, 236, 0.3); background: rgba(247, 244, 236, 0.08); }
.landing .lang a { color: var(--on-bold-soft); }
.landing .lang a[aria-current] { background: var(--bold-saffron); color: var(--on-saffron); font-weight: 600; }
.landing .lang a:not([aria-current]):hover { color: var(--on-bold); background: rgba(247, 244, 236, 0.14); }

/* Level chips (the small pages) */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.chip.a1 { background: var(--a1); color: var(--a1-ink); }
.chip.a2 { background: var(--a2); color: var(--a2-ink); }
.chip.b1 { background: var(--b1); color: var(--b1-ink); }
.chip.b2 { background: var(--b2); color: var(--b2-ink); }
.chip.c1 { background: var(--c1); color: var(--c1-ink); }
.chip.c2 { background: var(--c2); color: var(--c2-ink); }

/* The store text button, used by the fallback and the preview pages until the stores' badges reach them (FR-1109, FR-1128). */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 16px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(18, 40, 95, 0.55);
  transition: transform 0.18s ease-out, background-color 0.18s ease-out, box-shadow 0.18s ease-out;
}
.store:hover { background: var(--primary-deep); transform: translateY(-1px); }
.store:active { transform: scale(0.97); }
.store .arrow { font-size: 1.2em; line-height: 1; }
.badge { display: inline-block; }
.badge img { height: 56px; width: auto; }
/* Spec 012 FR-1128: the stores' own badges, unmodified. Apple's artwork has no margin and shows 56 pixels high. Google's PNG is
   646 by 250 pixels with its badge 168 high inside a margin of 41 pixels in English, and 192 high with a margin of 29 pixels above
   and below in Turkish; the heights below make the badge itself about 56 pixels high, and the margin in the file is the clear
   space (the gap of the rows adds to it). The English file also has 41 pixels at each side (13.6 pixels at this height); the
   side margin of the link takes it back so the badge lines up with Apple's and with the text, and the row gap is the clear
   space at the sides. The Turkish file reaches both edges. */
.badge.play-en { margin-inline: -13.6px; }
.badge.play-en img { height: 83px; }
.badge.play-tr img { height: 73px; }
.stores { align-items: center; }

/* ---------- Landing pages: the look of the App Store frames ---------- */

/* Section colours. The ladder of the app icon sits large and faint in the background of the bold ones. */
.s-blue, .s-deep { --focus: var(--bold-paper); --cast: rgba(3, 8, 30, 0.62); color: var(--on-bold); }
.s-blue {
  background:
    url("/assets/motif-blue.svg") no-repeat right -24vw bottom -46vw / max(900px, 96vw) auto,
    radial-gradient(70% 40% at 82% 62%, rgba(90, 120, 210, 0.42), rgba(74, 99, 184, 0) 70%),
    radial-gradient(70% 45% at 0% 0%, rgba(44, 78, 170, 0.9), rgba(40, 72, 160, 0) 70%),
    linear-gradient(180deg, #1B3A8A 0%, #16317A 58%, #10235A 100%);
}
.s-deep {
  background:
    url("/assets/motif-blue.svg") no-repeat left -30vw bottom -50vw / max(900px, 90vw) auto,
    radial-gradient(70% 50% at 90% 75%, rgba(74, 99, 184, 0.5), rgba(74, 99, 184, 0) 70%),
    radial-gradient(70% 45% at 10% 20%, rgba(27, 58, 138, 0.9), rgba(27, 58, 138, 0) 70%),
    linear-gradient(180deg, #12285F 0%, #0F2255 50%, #0B1840 100%);
}
.s-saffron {
  --focus: var(--on-saffron);
  --cast: rgba(110, 60, 0, 0.45);
  color: var(--on-saffron);
  background:
    url("/assets/motif-saffron.svg") no-repeat right -26vw bottom -48vw / max(900px, 90vw) auto,
    radial-gradient(80% 45% at 8% 0%, rgba(246, 196, 92, 0.9), rgba(246, 196, 92, 0) 70%),
    radial-gradient(80% 50% at 96% 85%, rgba(205, 136, 30, 0.45), rgba(205, 136, 30, 0) 70%),
    linear-gradient(180deg, #E3A534 0%, #DE9C2C 60%, #DA972A 100%);
}
.s-paper { background: var(--paper); color: var(--ink); }

/* Headlines: Newsreader at a heavy weight, two lines, line 2 on a rough highlighter stroke that line 1 overlaps. */
.display {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.5rem, 14vw - 0.25rem, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.display .l1, .display .l2 { display: block; }
/* The sizes let the widest line of either page (in the real ExtraBold, the Turkish lines: 6.8 em for the sections, 5.4 em
   for the hero and 10.1 em for the closing headline) fit its column with 3 per cent to spare from 320 pixels up. From 900
   pixels the iPad and "how" headlines share the width with a second column. */
@media (min-width: 900px) {
  .display { font-size: min(8.1vw, 5.25rem); }
}
/* With the text enlarged on a narrow screen, a word longer than the line breaks instead of widening the page, and the
   highlighter's overhang is clipped at the window's edge. */
.display { overflow-wrap: anywhere; }
.landing main > section { overflow-x: clip; }
.display .l1 { position: relative; z-index: 1; }
.s-saffron .display { color: var(--on-saffron); }
.hl { position: relative; z-index: 0; display: inline-block; color: var(--bold-deep); }
.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.08em -0.13em -0.1em -0.1em;
  background: url("/assets/stroke-saffron.svg") 0 0 / 100% 100% no-repeat;
}
.s-saffron .hl::before { background-image: url("/assets/stroke-paper.svg"); }

.sub {
  margin: 20px 0 0;
  max-width: 30em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
}
.s-blue .sub, .s-deep .sub { color: var(--on-bold-soft); }
.s-paper .sub { color: var(--ink2); }

.intro { max-width: 34em; margin: 18px 0 0; color: var(--ink2); font-size: 1.125rem; }
.s-blue .intro, .s-deep .intro { color: var(--on-bold-soft); }

/* The six level keys, rising like the ladder of the icon from A1 to C2. */
.tiles {
  --step: clamp(7px, 1.9vw, 12px);
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: clamp(6px, 2.2vw, 14px);
  margin: 26px 0 0;
  padding: calc(var(--step) * 5) 0 8px;
  list-style: none;
}
.tiles .chip {
  display: grid;
  place-items: center;
  width: clamp(40px, 11.6vw, 62px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 26%;
  font-size: clamp(0.9375rem, 0.8rem + 0.8vw, 1.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--t);
  background: linear-gradient(172deg, var(--hi) 0%, var(--c) 48%, var(--lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 6px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 1px 0 var(--side), 0 2px 0 var(--side), 0 3px 0 var(--side), 0 4px 0 var(--side2), 0 5px 0 var(--side2), 0 6px 0 var(--side2),
    0 18px 22px -8px rgba(3, 8, 30, 0.7);
  transform: translateY(calc(var(--i) * var(--step) * -1)) rotate(var(--tilt));
}
.tiles .chip.a1 { --i: 0; --tilt: -6deg; --c: #E3E8F4; --hi: #FFFFFF; --lo: #CDD5EA; --side: #A7B1CC; --side2: #939EBC; --t: #12285F; }
.tiles .chip.a2 { --i: 1; --tilt: 3deg; --c: #C5D0EE; --hi: #EDF1FB; --lo: #AFBCE3; --side: #8795C0; --side2: #7482AE; --t: #12285F; }
.tiles .chip.b1 { --i: 2; --tilt: -3deg; --c: #93A8DF; --hi: #BFCCEE; --lo: #7F95D2; --side: #5D71AE; --side2: #4E619C; --t: #12285F; }
.tiles .chip.b2 { --i: 3; --tilt: 4deg; --c: #4A63B8; --hi: #7A8FD2; --lo: #3E56A6; --side: #2C3F80; --side2: #23346C; --t: #F7F4EC; }
.tiles .chip.c1 { --i: 4; --tilt: -2deg; --c: #1B3A8A; --hi: #5470BE; --lo: #16317A; --side: #0E2159; --side2: #0A1947; --t: #F7F4EC; }
.tiles .chip.c2 { --i: 5; --tilt: 5deg; --c: #0E1F4F; --hi: #3A4F86; --lo: #0B1941; --side: #060F2B; --side2: #040A1F; --t: #F7F4EC; }

/* A phone: the screen is a raw capture, the frame and the status bar are drawn here (like the App Store frames). */
.device {
  position: relative;
  container-type: inline-size;
  padding: 3.2%;
  border-radius: 16.3% / 7.8%;
  background: #050608;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px #C9CCD3, 0 0 0 3.5px #8D929C,
    -1px 1px 0 3.5px #858A94, -2px 2px 0 3.5px #7B808A, -3px 3px 0 3.5px #72777F, -4px 4px 0 3.5px #686D75, -5px 5px 0 3.5px #5F646D,
    -26px 40px 60px -14px var(--cast);
}
.device img { width: 100%; border-radius: 14% / 6.44%; background: var(--bold-paper); }
.device::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 26.7%;
  margin-top: 5.6%;
  aspect-ratio: 3.4;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.sb {
  position: absolute;
  inset: 3.2% 3.2% auto;
  z-index: 1;
  aspect-ratio: 7.35;
  background: url("/assets/status.svg") right 7% center / auto 27% no-repeat;
}
.sb::before {
  content: "9:41";
  position: absolute;
  left: 0;
  top: 50%;
  width: 36%;
  padding-left: 3%;
  text-align: center;
  color: #15181C;
  font: 600 3.95cqw/1 -apple-system, "SF Pro Text", "Helvetica Neue", var(--sans);
  letter-spacing: -0.01em;
  transform: translateY(-50%);
}

/* A part of the real UI lifted out of the screen as a thick card with a cast shadow. */
.lift {
  position: relative;
  border-radius: 18px;
  background: var(--bold-paper);
  box-shadow:
    0 0 0 1px rgba(21, 24, 28, 0.06),
    0 1px 0 #E2DCCD, 0 2px 0 #DAD3C3, 0 3px 0 #D2CBBA, 0 4px 0 #CAC2B0, 0 5px 0 #C2BAA7, 0 6px 0 #BAB29E, 0 7px 0 #B2AA95,
    0 30px 44px -14px var(--cast);
}
.lift img { width: 100%; border-radius: inherit; }
.lift.white { background: #FFFFFF; }

/* Hero */

.hero { position: relative; overflow: hidden; padding-top: 76px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
.hero-copy { padding-top: 22px; }
.hero h1 { font-size: clamp(2.75rem, 17.5vw - 0.25rem, 7.25rem); }
.lead { margin: 22px 0 0; max-width: 31em; color: var(--on-bold-soft); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.cta .note { margin: 0; color: var(--on-bold-soft); font-size: 0.9375rem; }

/* The App Store button as a key: saffron on the blue sections, ink blue on saffron. */
.s-blue .store, .s-saffron .store { font-weight: 600; transform: translateY(0); }
.s-blue .store {
  background: linear-gradient(175deg, #F3C86E 0%, #E0A030 62%);
  color: var(--on-saffron);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #B77C18, 0 4px 0 #A36C14, 0 6px 0 #955F0E, 0 18px 28px -10px rgba(3, 8, 30, 0.7);
}
.s-saffron .store {
  background: linear-gradient(175deg, #3F5FB4 0%, #1B3A8A 62%);
  color: var(--bold-paper);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 2px 0 #12285F, 0 4px 0 #0E1F4F, 0 6px 0 #0A1840, 0 18px 28px -10px rgba(110, 60, 0, 0.6);
}
.s-blue .store:hover, .s-saffron .store:hover { transform: translateY(-2px); }
.s-blue .store:hover { background: linear-gradient(175deg, #F6D283 0%, #E6AA3C 62%); }
.s-saffron .store:hover { background: linear-gradient(175deg, #4A69BE 0%, #20419A 62%); }
.s-blue .store:active, .s-saffron .store:active { transform: translateY(4px); }
@media (max-width: 359px) {
  .store { gap: 8px; padding: 0 16px; font-size: 0.9375rem; }
}

.stage { position: relative; height: clamp(440px, 124vw, 560px); margin-top: 34px; }
.stage .device { position: absolute; left: 4%; top: 26px; width: min(60vw, 300px); transform: perspective(1600px) rotateX(4deg) rotateY(14deg) rotateZ(-4deg); }
.stage .lift { position: absolute; right: 2%; top: 32%; width: min(62vw, 340px); transform: perspective(1400px) rotateX(4deg) rotateY(-12deg) rotateZ(5deg); }

@media (min-width: 560px) {
  .stage .device { left: 8%; }
  .stage .lift { right: 6%; }
}

@media (min-width: 900px) {
  .hero { padding-top: 84px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .hero h1 { font-size: clamp(4.5rem, 9.8vw - 0.5rem, 6.7rem); }
  .hero-copy { padding-block: 44px 96px; }
  .stage { height: auto; min-height: 640px; margin: 0; }
  .stage .device { left: 2%; top: 52px; width: 340px; }
  .stage .lift { right: -4%; top: 350px; width: 360px; }
}

/* Until the page is wide enough for the card to hang out of its column, phone and card stay inside the column, so the
   tilted card is never cut by the window's edge. */
@media (min-width: 900px) and (max-width: 1239px) {
  .stage .device { left: 0; width: min(340px, 80%); }
  .stage .lift { right: 3%; width: min(360px, 80%); }
}

/* Gallery of the App Store frames */

.gallery, .features, .ipad, .how { padding-block: 88px 96px; }
.section-head { margin-bottom: 44px; }

.rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}
.frames {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 300px);
  gap: 16px;
  width: max-content;
  margin: 0;
  padding: 8px 16px 36px;
  list-style: none;
}
.frames li { scroll-snap-align: start; }
.frames img {
  width: 100%;
  border-radius: 4.6% / 2.13%;
  box-shadow: 0 1px 2px rgba(21, 24, 28, 0.1), 0 22px 36px -18px var(--cast);
  transition: transform 0.25s ease-out;
}
.frames li:hover img { transform: translateY(-4px); }
.frames.tablets { grid-auto-columns: min(80vw, 400px); }
.frames.tablets img { border-radius: 3% / 2.25%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 26px 40px -18px var(--cast); }
.hint { margin-top: -18px; color: var(--ink2); font-size: 0.9375rem; }

@media (min-width: 1000px) {
  .rail { overflow: visible; }
  .frames {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 36px 22px;
    width: min(1120px, 100% - 32px);
    margin-inline: auto;
    padding: 0;
  }
  .frames.tablets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .hint { display: none; }
}

/* Features */

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 44px; }
.card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 34px;
  border-radius: 26px;
  box-shadow: 0 2px 0 rgba(110, 60, 0, 0.16), 0 26px 40px -22px rgba(110, 60, 0, 0.55);
}
.card h3 { font-weight: 800; font-size: clamp(1.875rem, 1.5rem + 1vw, 2.375rem); line-height: 1; letter-spacing: -0.03em; }
.card p { margin: 12px 0 28px; font-size: 1rem; }
.card .lift { width: 100%; max-width: 380px; margin: auto auto 0; }
.card:nth-child(odd) .lift { transform: rotate(-2deg); }
.card:nth-child(even) .lift { transform: rotate(1.6deg); }
.card.tone-paper { background: var(--card-paper); color: var(--card-ink); --cast: rgba(110, 60, 0, 0.35); }
.card.tone-paper p { color: var(--card-ink2); }
.card.tone-blue, .card.tone-deep { color: var(--on-bold); --focus: var(--bold-paper); --cast: rgba(3, 8, 30, 0.6); }
.card.tone-blue p, .card.tone-deep p { color: var(--on-bold-soft); }
.card.tone-blue { background: radial-gradient(90% 60% at 0% 0%, #2C4EAA 0%, rgba(44, 78, 170, 0) 70%), #1B3A8A; }
.card.tone-deep { background: radial-gradient(90% 60% at 100% 0%, #1B3A8A 0%, rgba(27, 58, 138, 0) 70%), #12285F; }
/* The word sheet's corners show the dimmed story behind it; the card's radius covers them. */
.lift.sheet { border-radius: 24px 24px 18px 18px; }

@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .card { padding: 36px 34px 40px; }
}

/* iPad */

.ipad .section-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; }
@media (min-width: 900px) {
  .ipad .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .ipad .section-head .intro { margin: 0; }
}

/* How stories are made */

.how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.steps { display: grid; gap: 30px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-left: 72px; counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 26%;
  background: linear-gradient(172deg, #F3C86E 0%, #E0A030 55%, #D6962A 100%);
  color: var(--on-saffron);
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.5rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 0 #B77C18, 0 4px 0 #A36C14, 0 5px 0 #955F0E, 0 14px 18px -8px var(--cast);
  transform: rotate(-4deg);
}
.steps li:nth-child(2)::before { transform: rotate(3deg); }
.steps li:nth-child(3)::before { transform: rotate(-2deg); }
.steps h3 { font-weight: 800; font-size: 1.75rem; line-height: 1.08; letter-spacing: -0.02em; margin: 4px 0 8px; }
.steps p { margin: 0; color: var(--ink2); max-width: 32em; }
.how-shot { display: flex; justify-content: center; padding: 8px 0 24px; }
.how-shot .device { width: min(64vw, 270px, 86%); transform: perspective(1600px) rotateX(4deg) rotateY(-12deg) rotateZ(3deg); }
.how-shot .device { box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px #C9CCD3, 0 0 0 3.5px #8D929C,
    1px 1px 0 3.5px #858A94, 2px 2px 0 3.5px #7B808A, 3px 3px 0 3.5px #72777F, 4px 4px 0 3.5px #686D75, 5px 5px 0 3.5px #5F646D,
    26px 40px 60px -14px var(--cast); }

@media (min-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; }
}

/* Closing call to action */

.final { padding-block: 96px 104px; text-align: center; }
.final.s-saffron { background-position: right -40vw bottom -60vw, 0 0, 0 0, 0 0; }
.final .display { margin-bottom: 40px; font-size: clamp(1.625rem, 9.4vw - 0.25rem, 5.25rem); }

/* Motion: the level keys rise into place and the hero's phone and card float in. */
@media (prefers-reduced-motion: no-preference) {
  .tiles .chip { animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
  .stage .device { animation: float-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
  .stage .lift { animation: float-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both; }
}
@keyframes rise { from { opacity: 0; translate: 0 28px; } }
@keyframes float-in { from { opacity: 0; translate: 0 48px; } }

/* Footer */

.site-foot { padding-block: 44px 56px; border-top: 1px solid var(--line); color: var(--ink2); font-size: 0.9375rem; }
.site-foot .cols { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; }
.site-foot .logo { font-size: 1.375rem; }
.site-foot .logo img { width: 28px; height: 28px; }
.site-foot ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.site-foot ul a, .site-foot .contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.site-foot .contact { margin: 0; }
.fine { max-width: 62em; margin: 20px 0 0; font-size: 0.8125rem; line-height: 1.6; }
.landing .site-foot { border-top: 0; }

/* Legal and help pages: the owner's markup from hosting/pages, restyled (FR-1103). */

.doc main { max-width: 720px; margin: 0 auto; padding: 20px 16px 80px; line-height: 1.65; }
/* The owner's brand line, "Newlings · Privacy · Terms · Support · Delete account", as the site's header. The markup stays
   the owner's; font-size 0 hides the " · " text between the links, which a phone would otherwise leave at the end of a
   wrapped line, and spacing separates the links instead. Below 560 pixels the home link gets a row of its own. */
.doc .brand { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 28px; font-size: 0; }
.doc .brand a { order: 2; display: inline-flex; align-items: center; min-height: 44px; margin-right: 20px; color: var(--primary); font-size: 0.9375rem; text-decoration: none; }
.doc .brand a:hover { text-decoration: underline; }
.doc .brand a:first-child { order: 0; gap: 8px; margin-right: 32px; color: var(--ink); font-family: var(--serif); font-size: 1.375rem; }
@media (max-width: 559px) {
  .doc .brand::before { content: ""; order: 1; flex-basis: 100%; }
}
.doc .brand a:first-child::before { content: ""; width: 28px; height: 28px; background: url("/assets/mark-light.svg") center / contain no-repeat; }
.doc h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; }
.doc h2 { font-size: 1.625rem; line-height: 1.2; margin: 40px 0 8px; }
.doc h3 { font-size: 1.25rem; margin: 28px 0 6px; }
.doc blockquote { margin: 16px 0; padding: 12px 16px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--accent-soft); color: var(--ink2); }
.doc table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc th, .doc td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc code { font-family: ui-monospace, Menlo, monospace; font-size: 0.875em; }
.doc footer { margin-top: 48px; color: var(--ink2); font-size: 0.875rem; }

@media (prefers-color-scheme: dark) {
  .doc .brand a:first-child::before { background-image: url("/assets/mark-dark.svg"); }
}

/* Small pages: the /app fallback and the 404 page */

.small-page { display: grid; min-height: 100vh; min-height: 100svh; grid-template-rows: auto 1fr auto; }
.small-page main { display: grid; place-items: center; padding: 24px 16px 48px; text-align: center; }
.small-page .box { max-width: 30rem; }
.small-page h1 { font-size: clamp(2.5rem, 2rem + 3vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 18px 0 12px; }
.small-page p { margin: 0 0 24px; color: var(--ink2); }
.small-page .mark-big { width: 72px; height: 72px; margin: 0 auto; }
.small-page .chips { justify-content: center; margin-bottom: 8px; }
.small-page .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.small-page .links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Two store buttons: the App Store and Google Play (spec 017 FR-1616). */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.small-page .stores { flex-direction: column; align-items: center; }

/* Shared links: the story page that the sharePreview function renders (spec 017 FR-1603, FR-1614).
   The function loads this sheet from https://newlings.app on both hosts. */
.shared-page .top, .shared-page main { width: min(680px, 100% - 32px); }
.shared-page main { margin: 0 auto; padding: 8px 0 56px; }
.shared-page .shared { margin: 0 0 32px; }
.shared-page .cover { margin: 0 0 20px; }
.shared-page .cover img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 20px; background: var(--primary-soft); }
.shared-page figcaption { margin-top: 8px; color: var(--ink2); font-size: 0.8125rem; }
.shared-page .meta { margin: 0 0 16px; }
.chip.cat { background: var(--accent-soft); color: var(--ink); }
.shared-page h1 { font-weight: 800; font-size: clamp(2rem, 1.5rem + 2.4vw, 2.875rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 16px; overflow-wrap: anywhere; }
.shared-page .teaser { margin: 0 0 18px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.55; }
.shared-page .disclosure { margin: 0; color: var(--ink2); font-size: 0.9375rem; }
.shared-page .call { padding: 32px 16px 28px; border-radius: 28px; text-align: center; overflow: hidden; }
.shared-page .call .stores { flex-direction: column; align-items: center; }
.shared-page .call .store { justify-content: center; width: min(100%, 360px); padding: 0 16px; font-size: 1rem; }
.shared-page .call h2 { margin: 0 0 10px; color: var(--on-bold); font-weight: 800; font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.125rem); line-height: 1.12; letter-spacing: -0.02em; }
.shared-page .call p { margin: 0 0 22px; color: var(--on-bold-soft); }
.shared-page .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.shared-page .links a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .store:hover, .store:active, .s-blue .store:hover, .s-saffron .store:hover, .s-blue .store:active, .s-saffron .store:active { transform: none; }
  .frames li:hover img { transform: none; }
}