/* Comparison pages. Same world as the landing page: cotton and white bands,
   Newsreader for reading, the system sans for labels, one ink, no accent. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #1a1a1a;
  --ink-2: #3a3a3a;
  --grey: #646464;
  --rule: #d4d4d4;
  --cotton: #f3eee5;
  --white: #ffffff;
  --dim: #161310;
  --dim-ink: #ede6d8;
  --serif: "Newsreader", Georgia, serif;
  --sans: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ios: -apple-system, "SF Pro Text", system-ui, sans-serif;

  --edge: max(20px, calc((100vw - 1152px) / 2));
  --nav: 72px;
  --band: clamp(72px, 10vw, 136px);
  --pw: clamp(148px, 21vw, 264px);
}

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

html { scroll-padding-top: var(--nav); }

html, body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { font-family: var(--sans); overflow-x: clip; }

::selection { background: #e2dbcd; color: var(--ink); }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }

p, h1, h2, h3, figure, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
  font-kerning: normal;
}

/* ---------- Nav and footer, as on the landing page ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav);
  background: var(--cotton);
  border-bottom: 1px solid var(--rule);
}

.nav-in {
  height: 100%;
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-mark img { height: 28px; width: auto; }

.nav-links { margin-left: auto; display: flex; gap: 28px; font-size: 15px; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 5px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font: 600 16px/1 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}

.button-soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.button-nav { min-height: 44px; padding: 0 18px; font-size: 15px; border-radius: 12px; }

.footer { padding: 0 var(--edge) 72px; background: var(--white); }

.footer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--grey);
}

.footer-in img { height: 20px; width: auto; margin-right: auto; }
.footer-in a { text-decoration: none; color: var(--ink); }
.footer-in a:hover { text-decoration: underline; }

/* ---------- Bands and type ---------- */

.band { padding: var(--band) var(--edge); }
.band-cotton { background: var(--cotton); }
.band-white { background: var(--white); }

.lead {
  font-family: var(--serif);
  font-variation-settings: "opsz" 18;
  font-size: clamp(19px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.read {
  font-family: var(--serif);
  font-variation-settings: "opsz" 16;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.read strong, .lead strong { font-weight: 600; color: var(--ink); }

.label {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--grey);
}

.h-chapter {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  font-variation-settings: "opsz" 60;
}

.h-section {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 48;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: center;
  padding-top: clamp(48px, 8vw, 104px);
  padding-bottom: clamp(56px, 8vw, 112px);
}

.hero h1 {
  font-size: clamp(42px, 6.2vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 72;
  max-width: 11ch;
}

.hero .lead { margin-top: 28px; max-width: 34ch; }
.hero .read { margin-top: 14px; max-width: 40ch; }

.pair {
  display: grid;
  grid-template-columns: repeat(2, var(--pw));
  gap: clamp(16px, 2.6vw, 36px);
  align-items: start;
}

.pair figure { display: grid; gap: 16px; }

.pair figcaption { min-height: 4.6em; }
.pair figcaption .label { display: block; margin-bottom: 4px; color: var(--ink); }
.pair figcaption .read { font-size: 16px; line-height: 1.45; }

/* ---------- The device ---------- */

.phone {
  --bz: calc(var(--pw) * 0.017);
  position: relative;
  width: var(--pw);
  padding: var(--bz);
  border: 0;
  border-radius: calc(var(--pw) * 0.158);
  background: #0f0f0f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 0 1px #b4aea4,
    0 1px 2px rgba(26, 26, 26, 0.1),
    0 calc(var(--pw) * 0.05) calc(var(--pw) * 0.09) calc(var(--pw) * -0.04) rgba(26, 26, 26, 0.16),
    0 calc(var(--pw) * 0.14) calc(var(--pw) * 0.24) calc(var(--pw) * -0.1) rgba(26, 26, 26, 0.2);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.phone:hover { transform: translateY(-3px); }
.phone:active { transform: translateY(0); }

.phone-screen {
  position: relative;
  aspect-ratio: 1320 / 2868;
  border-radius: calc(var(--pw) * 0.158 - var(--bz));
  overflow: hidden;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}

.island {
  position: absolute;
  z-index: 12;
  top: 2.6cqw;
  left: 50%;
  width: 30cqw;
  height: 8.8cqw;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #050505;
}

/* ---------- Notes, drawn in iOS's own type and colours ---------- */

.nt { position: absolute; inset: 0; background: #fff; color: #000; font-family: var(--ios); --nt-tint: #d9a400; }

.ios-status {
  position: absolute;
  z-index: 7;
  inset: 0 0 auto;
  height: 12.4cqw;
  padding: 1.4cqw 7.6cqw 0 11cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 4.3cqw/1 var(--ios);
  letter-spacing: -0.01em;
  color: #000;
}

.ios-status-light { color: var(--dim-ink); }
.ios-icons { display: flex; align-items: center; gap: 1.5cqw; }
.ios-signal { width: 4.5cqw; fill: currentColor; }
.ios-wifi { width: 4.2cqw; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.ios-wifi circle { fill: currentColor; stroke: none; }
.ios-batt { width: 6.6cqw; height: 3.2cqw; padding: 0.45cqw; border-radius: 1cqw; border: 0.3cqw solid color-mix(in srgb, currentColor 45%, transparent); }
.ios-batt i { display: block; width: 78%; height: 100%; border-radius: 0.45cqw; background: currentColor; }

.nt-bar {
  position: absolute;
  z-index: 5;
  top: 12.4cqw;
  left: 0;
  right: 0;
  height: 11cqw;
  padding: 0 5cqw 0 3.6cqw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--nt-tint);
  font-size: 4.3cqw;
}

.nt-back { display: flex; align-items: center; gap: 1.2cqw; }
.nt-chev { width: 2.7cqw; height: 2.7cqw; margin-left: 1.2cqw; border-left: 0.65cqw solid currentColor; border-bottom: 0.65cqw solid currentColor; transform: rotate(45deg); }
.nt-done { font-weight: 600; opacity: 0; transition: opacity 200ms ease; }

.nt-text {
  position: absolute;
  top: 25cqw;
  left: 5.2cqw;
  right: 5.2cqw;
  font-size: 4.3cqw;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.nt-text p { margin: 0 0 1.3em; }
.nt-date { margin-bottom: 3.6cqw !important; text-align: center; font-size: 3.2cqw; color: #8e8e93; }
.nt-title { margin-bottom: 1.1em !important; font-size: 6.6cqw; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }

.caret {
  display: inline-block;
  width: 0.5cqw;
  height: 1.15em;
  margin: 0 -0.25cqw;
  vertical-align: -0.2em;
  background: var(--nt-tint);
  opacity: 0;
}

.nt-tools {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 7cqw;
  padding: 0 6.4cqw;
  display: flex;
  justify-content: space-between;
  color: var(--nt-tint);
}

.nt-tools svg { width: 5.6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.kb {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.4cqw 1cqw 11cqw;
  background: #d3d5db;
  transform: translateY(101%);
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.kb-row { display: flex; justify-content: center; gap: 1.3cqw; margin-bottom: 2.6cqw; }
.kb-row:nth-child(2) { padding: 0 4.4cqw; }

.kb-row i {
  flex: 1;
  height: 10.4cqw;
  border-radius: 1.3cqw;
  background: #fff;
  box-shadow: 0 0.3cqw 0 #898a8d;
  font: 400 4.6cqw/10.4cqw var(--ios);
  font-style: normal;
  text-align: center;
  color: #000;
}

.kb-row i.wide { flex: 5; }
.kb-row i.mod { flex: 1.4; background: #adb1b9; }

.nt.is-editing .kb { transform: translateY(0); }
.nt.is-editing .caret { animation: blink 1s steps(1) infinite; }
.nt.is-editing .nt-done { opacity: 1; }
.nt.is-editing .nt-tools { opacity: 0; }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- Lectern's reading screen, in the app's delivery colours ---------- */

.reader { position: absolute; inset: 0; background: var(--dim); overflow: hidden; }

.reader-exit,
.reader-clock {
  position: absolute;
  z-index: 3;
  top: 5.2cqw;
  font: 500 3.9cqw/1 var(--sans);
  color: var(--dim-ink);
}

.reader-exit { right: 6.6cqw; }
.reader-clock { left: 7cqw; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 400ms ease; }
.reader.is-started .reader-clock { opacity: 0.72; }

.reader-col {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 7cqw 0 6.6cqw;
  will-change: transform;
}

.reader-col.is-easing { transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }

.reader-p {
  margin: 0 0 7.2cqw;
  font-family: var(--serif);
  font-size: 7.7cqw;
  line-height: 1.36;
  font-variation-settings: "opsz" 32;
  color: var(--dim-ink);
  letter-spacing: -0.003em;
}

.reader-p strong { font-weight: 620; color: #b3d8c9; }

.reader-cue { margin: 1.6cqw 0 8.6cqw; line-height: 1; }

.cue {
  display: inline-block;
  padding: 0.14em 0.1em 0.16em;
  background: #30241b;
  color: #e7b989;
  font: 500 4.4cqw/1.2 var(--sans);
}

/* A soft fade at each edge, so lines leave the screen instead of being cut. */
.reader::before,
.reader::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 16cqw;
  pointer-events: none;
}

.reader::before { top: 0; background: linear-gradient(var(--dim) 30%, rgba(22, 19, 16, 0)); }
.reader::after { bottom: 0; background: linear-gradient(rgba(22, 19, 16, 0), var(--dim) 70%); }

/* ---------- Cue cards ---------- */

.stack {
  position: relative;
  width: var(--pw);
  aspect-ratio: 1320 / 2868;
  display: grid;
  align-content: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.card {
  --r: 0deg;
  --y: 0px;
  position: absolute;
  left: -8%;
  right: -8%;
  top: 50%;
  aspect-ratio: 5 / 3;
  padding: 9% 9% 8%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6%;
  container-type: inline-size;
  background: #fffefb;
  border-radius: 2.4cqw;
  box-shadow:
    0 0 0 1px rgba(26, 26, 26, 0.08),
    0 1px 2px rgba(26, 26, 26, 0.08),
    0 10px 24px -14px rgba(26, 26, 26, 0.28);
  transform: translateY(calc(-50% + var(--y))) rotate(var(--r));
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 260ms ease;
  text-align: left;
  color: var(--ink);
}

.card-n { padding-bottom: 4.5cqw; border-bottom: 1px solid #c9d6e3; font: 600 6.4cqw/1 var(--sans); color: var(--grey); font-variant-numeric: tabular-nums; }

.card-t {
  font-family: var(--serif);
  font-size: 10.4cqw;
  line-height: 1.22;
  font-variation-settings: "opsz" 24;
  text-wrap: balance;
}

.card[data-pos="0"] { --r: -1.5deg; --y: 0px; z-index: 4; }
.card[data-pos="1"] { --r: 2.5deg; --y: 4%; z-index: 3; }
.card[data-pos="2"] { --r: -4deg; --y: 8%; z-index: 2; }
.card[data-pos="3"] { --r: 5deg; --y: 11%; z-index: 1; }
.card.is-leaving { transform: translate(-30%, calc(-50% - 44%)) rotate(-14deg); opacity: 0; }

/* ---------- Fair-use verdict ---------- */

.verdict {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px clamp(40px, 7vw, 112px);
  align-items: start;
}

.verdict .h-chapter { max-width: 13ch; }

.ticks { display: grid; gap: 0; border-top: 1px solid var(--rule); }

.ticks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

.ticks svg { width: 18px; height: 18px; margin-top: 5px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.verdict-close { margin-top: 28px; }

/* ---------- Ruled list: a short serif line, then the detail ---------- */

.section-head { display: grid; gap: 18px; max-width: 40ch; margin-bottom: clamp(36px, 5vw, 56px); }

.rows { border-top: 1px solid var(--ink); }

.rows li {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 10px clamp(24px, 5vw, 80px);
  padding: 26px 0 28px;
  border-bottom: 1px solid var(--rule);
}

.rows h3 { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.2; letter-spacing: -0.006em; font-variation-settings: "opsz" 28; }
.rows .read { max-width: 52ch; }

.after { margin-top: 28px; max-width: 52ch; }

/* ---------- Gestures ---------- */

.gestures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }

.gesture { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ink); }

.gesture svg { width: 72px; height: 72px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gesture svg .soft { stroke: var(--grey); stroke-dasharray: 2 3; }
.gesture h3 { font-size: 24px; line-height: 1.2; font-variation-settings: "opsz" 28; }

.facts {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(20px, 3vw, 40px);
}

.facts > p { padding-top: 16px; border-top: 1px solid var(--rule); }

/* ---------- Two columns of prose ---------- */

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 6vw, 96px); }
.duo h3 { font-size: 24px; line-height: 1.2; margin-bottom: 10px; font-variation-settings: "opsz" 28; }

/* ---------- Side by side table ---------- */

.compare { width: 100%; border-collapse: collapse; }

.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--rule); }

.compare thead th {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--grey);
}

.compare thead th.us { color: var(--ink); }

.compare tbody th {
  width: 26%;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 400;
  font-variation-settings: "opsz" 20;
  color: var(--ink);
}

.compare td { width: 37%; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); font-variation-settings: "opsz" 16; }
.compare td.us { color: var(--ink); }

.small-note { margin-top: 20px; font-size: 14px; line-height: 1.5; color: var(--grey); }

/* ---------- Close ---------- */

.close { display: grid; justify-items: start; gap: 22px; }
.close .h-chapter { max-width: 14ch; }
.close-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.close-links a { font: 500 16px/1.4 var(--sans); }

/* ---------- Narrow screens ---------- */

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 13ch; }
  .verdict { grid-template-columns: minmax(0, 1fr); }
  .gestures, .facts { grid-template-columns: minmax(0, 1fr); }
  .gesture { grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; }
  .gesture svg { grid-row: span 2; }
}

@media (max-width: 720px) {
  :root { --nav: 60px; --pw: min(46vw - 20px, 220px); }
  .nav-links { display: none; }
  .nav-mark img { height: 24px; }
  .nav-in .button-nav { margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }
  .pair { gap: 18px; }
  .rows li, .duo { grid-template-columns: minmax(0, 1fr); }
  .rows li { gap: 8px; padding: 22px 0 24px; }

  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
  .compare tr:first-child { border-top: 1px solid var(--ink); }
  .compare th, .compare td { padding: 0; border: 0; }
  .compare tbody th { width: auto; margin-bottom: 8px; }
  .compare caption { display: block; }
  .compare td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; padding: 3px 0; font-size: 16px; }
  .compare td::before { content: attr(data-label); font: 600 13px/1.9 var(--sans); color: var(--grey); }
}

@media (max-width: 380px) {
  .nav-in .button-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phone, .kb, .card, .reader-col.is-easing, .nt-done, .reader-clock { transition: none; }
  .phone:hover { transform: none; }
  .nt.is-editing .caret { animation: none; opacity: 1; }
}

/* ---------- Small helpers ---------- */

.band-tight { padding-top: 0; }
.facts-first { margin-top: 0; }
.h3-small { font-size: 24px; line-height: 1.2; margin-bottom: 10px; font-variation-settings: "opsz" 28; }
.facts > div { padding-top: 18px; border-top: 1px solid var(--rule); }
.close .lead { max-width: 40ch; }
.compare caption { caption-side: top; text-align: left; padding-bottom: 14px; font: 600 13px/1.3 var(--sans); color: var(--grey); }

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

/* Lectern's column sits on cotton, so the eye can run down one side. */
.compare thead th.us,
.compare td.us { padding-left: 20px; background: var(--cotton); }
.compare tbody tr:last-child td.us { border-bottom-color: var(--cotton); }

@media (max-width: 720px) {
  .compare td.us { margin: 6px -12px 0; padding: 8px 12px; border-radius: 8px; }
}