/* Chests — chests.app
   The app's "Dark Paper" theme (Editor/Palette.swift, id "dark-paper") on the web: near-black brown
   paper with a fine grain, cream ink, a night-blue accent; the chests' cloth tabs as colour marks. */

:root {
  /* Dark Paper, exact */
  --bg: #16120d;
  --text: #e2d8c4;
  --secondary: #a1927a;
  --heading: #f1e7d3;
  --accent: #7d98dc;
  --h2: #9ab3ea;
  --h3: #b0bcd6;
  --terracotta: #c98a5a;
  --border: rgba(241, 231, 211, 0.12);
  --code-bg: rgba(0, 0, 0, 0.38);
  --hit: rgba(125, 152, 220, 0.30);

  /* Raised surfaces: the same paper, a shade lifted */
  --surface: #1d1811;
  --surface-2: #241e16;
  --label: #efe4cc;      /* the cream paper label */
  --label-ink: #2a2118;

  /* The cloth tabs (Shared/Views/ChestDetail.swift) */
  --cloth-feed: #7e3024;
  --cloth-vault: #3d5270;
  --cloth-tags: #55713a;
  --cloth-share: #8a662a;
  --cloth-add: #2e5c58;
  --gilt: rgba(226, 196, 132, 0.55);

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

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

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
main { overflow-x: clip; } /* the glows behind the devices never widen the page */
/* The paper grain: fine light and dark specks over the whole page (Dark Paper's ThemeGrain.fine). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.46  0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 0.9 -0.56'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.8 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  opacity: 0.6; /* subtle: fewer, darker, softer specks (the user found the first one too grainy) */
}

/* The light on the paper, under the grain: a cool lamp from above, a warm one from the left, a
   glow where the screenshots sit, warmth rising from the bottom corner, the edges in shadow. Fixed
   to the window, like light in a room. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -12%, rgba(125, 152, 220, 0.16), transparent 70%),
    radial-gradient(45% 50% at 0% 18%, rgba(232, 178, 116, 0.10), transparent 70%),
    radial-gradient(40% 45% at 82% 34%, rgba(154, 179, 234, 0.09), transparent 72%),
    radial-gradient(55% 45% at 100% 105%, rgba(201, 138, 90, 0.12), transparent 70%),
    radial-gradient(120% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.42) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  /* The lamps breathe, slowly. */
  body::after { animation: lamp 14s ease-in-out infinite alternate; }
  @keyframes lamp { from { opacity: 0.85; } to { opacity: 1; } }
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--h2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--hit); color: var(--heading); }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--heading); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.012em; }
p { margin: 0 0 1em; }
strong { color: var(--heading); font-weight: 600; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--label); color: var(--label-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ——— Header ——— */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22, 18, 13, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--border); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 78px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); font: 600 22px/1 var(--serif); letter-spacing: -0.01em; }
.brand img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.brand img.wordmark { width: auto; height: 24px; border-radius: 0; box-shadow: none; display: block; }
/* Header: the icon hangs over the bar's bottom edge, the wordmark beside it. */
.site-header .brand { position: relative; padding-left: 100px; align-self: stretch; }
.site-header .brand .brand-icon { position: absolute; left: 0; top: 20px; width: 86px; height: 86px; border-radius: 19px;
  box-shadow: 0 0 0 1px rgba(241, 231, 211, .08), 0 10px 26px -8px rgba(0, 0, 0, .75); }
.site-header .brand .wordmark { height: 33px; }
.brand:hover { color: var(--heading); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a { color: var(--secondary); text-decoration: none; font-size: 15px; padding: 8px 10px; border-radius: 8px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--heading); }
.nav a[aria-current="page"] { background: rgba(241, 231, 211, 0.06); }
.lang { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-left: 8px; }
.lang a, .lang span { font: 600 12px/1 var(--sans); letter-spacing: .06em; padding: 6px 9px; border-radius: 999px; text-decoration: none; color: var(--secondary); }
/* Both halves the same box, their text centred in it: the phone rules for .nav a (bigger padding
   and type) would make the link taller than the selected half, stretched with its text at the top. */
.lang { align-items: stretch; }
.nav .lang a, .lang a, .lang span { display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; font-size: 12px; }
.lang span[aria-current] { background: var(--label); color: var(--label-ink); }
.lang a:hover { color: var(--heading); }
/* At mid widths the section links after the first go, so "Share to Chests" stays on the line;
   on narrow screens it goes too. */
@media (max-width: 980px) { .nav .hide-md { display: none; } }
@media (max-width: 1120px) { :lang(fr) .nav .hide-md { display: none; } }
.nav a { white-space: nowrap; }
@media (max-width: 760px) {
  .nav .hide-sm { display: none; }
  .site-header .wrap { gap: 10px; }
}
@media (max-width: 420px) {
  .nav a { padding: 8px 7px; font-size: 14px; }
}
@media (max-width: 760px) {
  .site-header .wrap { height: 66px; }
  .site-header .brand { padding-left: 76px; }
  .site-header .brand .brand-icon { top: 18px; width: 64px; height: 64px; border-radius: 15px; }
  .site-header .brand .wordmark { height: 26px; }
}
@media (max-width: 380px) {
  .site-header .brand .wordmark { display: none; }
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px/1 var(--sans); text-decoration: none;
  padding: 14px 20px; border-radius: 12px; border: 1px solid transparent;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn-store {
  gap: 12px; padding: 9px 24px 9px 9px; border-radius: 16px; color: #1a140e;
  background: linear-gradient(180deg, #fbf5e8 0%, #ecdfc5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(120, 88, 48, .28),
    0 1px 2px rgba(0, 0, 0, .45), 0 16px 36px -16px rgba(232, 178, 116, .6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn-store:hover { color: #1a140e; transform: translateY(-2px);
  background: linear-gradient(180deg, #fffaf0 0%, #f1e5cc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(120, 88, 48, .28),
    0 2px 4px rgba(0, 0, 0, .4), 0 22px 44px -16px rgba(232, 178, 116, .75); }
.btn-store:active { transform: translateY(0); }
.btn-store .as-glyph { width: 40px; height: 40px; flex: none; border-radius: 10px; box-shadow: 0 2px 6px -1px rgba(22, 80, 170, .45); }
.btn-store small { display: block; font: 500 11.5px/1 var(--sans); letter-spacing: .03em; color: #6b5a44; margin-bottom: 4px; }
.btn-store b { display: block; font: 600 20px/1 var(--serif); letter-spacing: -.005em; }
.btn-ghost { color: var(--text); border-color: var(--border); }
.btn-ghost:hover { color: var(--heading); border-color: rgba(241,231,211,.28); }

/* The Chrome extension, beside the hero's App Store button: smaller, quieter (it needs the Mac app). */
.btn-ext { gap: 9px; padding: 7px 16px 7px 8px; border-radius: 13px; color: var(--text); border-color: var(--border);
  background: rgba(241, 231, 211, .04); }
.btn-ext:hover { color: var(--heading); border-color: rgba(241, 231, 211, .28); background: rgba(241, 231, 211, .08); transform: translateY(-1px); }
.btn-ext img { width: 28px; height: 28px; flex: none; border-radius: 7px; }
.btn-ext small { display: block; font: 500 10.5px/1 var(--sans); letter-spacing: .03em; color: var(--secondary); margin-bottom: 3px; }
.btn-ext b { display: block; font: 600 15px/1 var(--serif); }

/* ——— Paper label (the chests' cream name tag, torn and a little askew) ——— */
.label {
  display: inline-block;
  font: 600 14px/1 var(--serif);
  letter-spacing: .02em;
  color: var(--label-ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%),
    linear-gradient(90deg, rgba(120,90,50,.18), rgba(120,90,50,0) 12%, rgba(120,90,50,0) 88%, rgba(120,90,50,.18)),
    var(--label);
  padding: 7px 16px 6px;
  transform: rotate(-1.4deg);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 3px 8px rgba(0,0,0,.45);
  clip-path: polygon(2% 8%, 9% 0, 22% 6%, 38% 1%, 55% 5%, 71% 0, 86% 6%, 97% 2%, 100% 40%, 98% 72%, 100% 100%, 84% 95%, 66% 100%, 48% 94%, 30% 100%, 14% 95%, 0 100%, 2% 62%, 0 30%);
  margin-bottom: 18px;
}
.label.r { transform: rotate(1.2deg); }

/* ——— Hero ——— */
.hero { position: relative; padding: clamp(40px, 7vw, 92px) 0 clamp(40px, 6vw, 80px); }
/* A light pool behind the screenshots. */
.hero-art::before {
  content: ""; position: absolute; inset: -18% -12% -10% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(154, 179, 234, 0.16), rgba(232, 178, 116, 0.05) 55%, transparent 80%);
  filter: blur(8px);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(40px, 6.4vw, 76px); line-height: 1.02; margin-bottom: .32em; letter-spacing: -0.022em; }
.hero h1 em { font-style: italic; color: var(--h2); font-weight: 500; }
.hero .lede { text-wrap: pretty; font-size: clamp(18px, 1.9vw, 21px); color: var(--text); max-width: 34em; margin-bottom: 30px; }
.hero .lede span { color: var(--secondary); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* The hero's App Store button and devices: centred under the paragraph's longest line (site.js sets --lede-w). */
.hero .cta-row, .hero .platforms { width: var(--lede-w, min(100%, calc(34 * clamp(18px, 1.9vw, 21px)))); max-width: 100%; justify-content: center; }
/* Phones: the button and the devices centred on the screen. */
@media (max-width: 720px) { .hero .cta-row, .hero .platforms { width: 100%; } }
.platforms { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--secondary); font-size: 14px; }
.platforms span { display: inline-flex; align-items: center; gap: 7px; }
.platforms svg { width: 16px; height: 16px; opacity: .8; }

.hero-art { position: relative; min-height: 440px; padding-bottom: 7%; }
.hero-art .mac-window { width: 94%; }
.hero-art .phone { --w: clamp(140px, 12.5vw, 180px); position: absolute; right: 0; bottom: -4%; }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { min-height: 0; max-width: 640px; width: 100%; margin: 10px auto 0; padding-bottom: 14%; }
  .hero-art .mac-window { width: 88%; }
  .hero-art .phone { --w: clamp(120px, 30vw, 200px); bottom: 0; }
}

/* ——— Device frames (no Apple artwork) ———
   iPhone: the whole simulator screenshot (it already holds the status bar and the Dynamic Island) in
   a thin graphite bezel, barely wider than the screen, like an iPhone 17 Pro: a 1px light edge on the
   metal, then a black ring hugging the screen. Radii stay concentric (outer = screen + padding).
   A soft glow sits behind it; on screen it floats and rocks about 1° on two cycles of different
   lengths (paused off screen by site.js, off under Reduce Motion). */
.phone { --w: 280px; position: relative; width: var(--w); margin: 0; flex: none; }
.phone::before {
  content: ""; position: absolute; inset: 8% -22% 4%; z-index: -1; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgba(154, 179, 234, 0.24)), transparent);
}
.phone .bezel {
  padding: calc(var(--w) * 0.014);
  border-radius: calc(var(--w) * 0.144);
  background: linear-gradient(150deg, #5a554e 0%, #272420 26%, #131210 58%, #2c2925 82%, #4a463f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 40px 72px -30px rgba(0, 0, 0, 0.92),
    0 14px 30px -16px rgba(0, 0, 0, 0.7);
}
.phone img {
  width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover;
  border-radius: calc(var(--w) * 0.13);
  background: #000;
  box-shadow: 0 0 0 calc(var(--w) * 0.006) #060505;
}
@media (prefers-reduced-motion: no-preference) {
  .phone .bezel {
    animation: float 6.5s ease-in-out var(--delay, 0s) infinite alternate, rock 4.7s ease-in-out var(--delay, 0s) infinite alternate;
    animation-play-state: paused;
  }
  .phone.on .bezel { animation-play-state: running; }
}
@keyframes float { from { translate: -2px 2px; } to { translate: 3px -11px; } }
@keyframes rock { from { rotate: -1deg; } to { rotate: 1deg; } }

/* Mac: a plain window. Rounded corners, a dark hairline, a faint highlight on the inside edge, a
   real layered shadow. */
.mac-window {
  position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #0c0a08;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 28px 60px -18px rgba(0, 0, 0, 0.8),
    0 70px 120px -50px rgba(0, 0, 0, 0.7);
}
.mac-window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); pointer-events: none; }
.mac-window img { width: 100%; }

/* ——— Sections ——— */
section { position: relative; }
.section { padding: clamp(48px, 6vw, 80px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(30px, 3.6vw, 44px); }
.section-head p { font-size: 18px; color: var(--secondary); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin-bottom: 16px; }
.eyebrow::before { content: ""; width: 22px; height: 8px; border-radius: 2px; background: var(--c, var(--cloth-vault)); box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent); border: 0; margin: 0; }

/* Feature rows: copy beside one or two phones */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature.flip .feature-media { order: -1; }
.feature-media { display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 2.4vw, 28px); padding: 12px 0 28px; }
.feature-media .phone { --w: clamp(210px, 18vw, 250px); }
.feature-media.pair .phone { --w: clamp(160px, 14.5vw, 210px); }
.feature-media.pair .phone.back { margin-bottom: 44px; }
.feature-media.solo .phone { --w: clamp(240px, 22vw, 320px); }
.feature.listen { margin-top: clamp(72px, 9vw, 128px); }
.feature h2 { font-size: clamp(32px, 3.6vw, 46px); }
.feature.wide-copy { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.feature.flip.balanced { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.feature.balanced h2 { font-size: clamp(32px, 3.2vw, 42px); }
:lang(fr) .feature.balanced h2 { font-size: clamp(30px, 2.8vw, 37px); }
@media (max-width: 860px) { .feature.wide-copy, .feature.flip.balanced { grid-template-columns: 1fr; } }
.feature .lead { font-size: 19px; color: var(--text); max-width: 32em; }
.feature p.muted { color: var(--secondary); font-size: 17px; }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--text); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 9px; border-radius: 2px;
  background: var(--c, var(--cloth-vault)); box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
}
.ticks li::after { content: ""; position: absolute; left: 2px; top: calc(.55em + 4px); width: 10px; border-top: 1px dashed var(--gilt); }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature.flip .feature-media, .feature-media { order: 2; } /* the words first, then the device */
  .feature-media .phone { --w: min(270px, 62vw); }
  .feature-media.pair .phone { --w: min(220px, 40vw); }
  .feature-media.solo .phone { --w: min(300px, 72vw); }
}

/* Share: the apps → Share → Chests strip */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.flow li { font: 600 14px/1 var(--sans); color: var(--text); padding: 9px 13px; border-radius: 999px; border: 1px solid var(--border); background: rgba(241,231,211,.035); }
.flow li.to { border: 0; background: none; padding: 0 2px; color: var(--secondary); font-weight: 400; }
.flow li.share { display: inline-flex; align-items: center; gap: 7px; background: rgba(125,152,220,.14); border-color: rgba(125,152,220,.35); color: var(--heading); }
.flow li.share svg { width: 15px; height: 15px; }
.flow li.dest { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; background: var(--label); border-color: transparent; color: var(--label-ink); font-family: var(--serif); font-size: 15px; }
.flow li.dest img { width: 30px; height: 30px; margin: -2px 0; }

/* Custom fields: the kinds, and the Mac table with the iPhone's fields page in front */
.flow.kinds li { font-weight: 500; }
.fields-stage { position: relative; max-width: 940px; margin: 0 auto; padding-bottom: clamp(60px, 10vw, 120px); }
.fields-stage .mac-window { width: 88%; }
.fields-stage .phone { --w: clamp(110px, 15vw, 185px); position: absolute; right: 0; bottom: 0; }
@media (max-width: 640px) {
  .fields-stage { padding-bottom: 0; }
  .fields-stage .mac-window { width: 100%; }
  .fields-stage .phone { --w: min(220px, 56vw); position: relative; margin: 28px auto 0; }
}

/* Cloth swatch strip (decorative) */
.cloths { display: flex; gap: 6px; margin: 0 0 22px; }
.cloths i { width: 34px; height: 12px; border-radius: 2px 2px 3px 3px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset, 0 2px 4px rgba(0,0,0,.4); position: relative; }
.cloths i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 1px dashed var(--gilt); }

/* Share: the chest itself, as the app draws it (rendered from its SwiftUI code), big and centred,
   on a pool of light. */
.section-head.center .flow { justify-content: center; }
/* The share path, top to bottom: the apps, Share, Chests, a thin arrow between each row. */
.steps { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 30px 0 0; padding: 0; list-style: none; }
.steps > li { list-style: none; }
.steps .flow { margin: 0; }
.steps .down { color: var(--secondary); opacity: .75; line-height: 0; }
.steps .down svg { width: 14px; height: 20px; }
.trunk-stage { position: relative; margin: clamp(28px, 3.4vw, 44px) auto 0; width: 66.7%; max-width: 360px; text-align: center; }
.trunk-stage::before {
  content: ""; position: absolute; left: -18%; right: -18%; top: 10%; bottom: -36%; z-index: -1; pointer-events: none;
  /* Tall enough that the warm pool under the trunk fades out before the box ends (no hard edge). */
  background:
    radial-gradient(50% 24% at 50% 64%, rgba(232, 178, 116, 0.20), transparent 72%),
    radial-gradient(closest-side, rgba(154, 179, 234, 0.13), transparent 80%);
}
/* The picture holds the app's own drop shadow: the trunk is 77% of its width (600 px of 780). */
.trunk-stage img { width: min(360px, 112%); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
.trunk-stage figcaption { margin: -6% 0 0; width: min(36em, calc(100vw - 32px)); left: 50%; transform: translateX(-50%); position: relative; color: var(--secondary); font-size: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .floaty { animation: float-sm 7s ease-in-out infinite alternate; animation-play-state: paused; }
  .floaty.on { animation-play-state: running; }
}
@keyframes float-sm { from { translate: -1px 1px; } to { translate: 2px -7px; } } /* float, at 2/3 */

/* Sharing: your phone and your partner's, one chest between them, an arrow from each into it.
   Desktop: one row. Narrow: the phones side by side, the arrows turning down into the chest below. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.together {
  display: grid; align-items: center; max-width: 1080px; margin: 0 auto;
  grid-template-columns: auto minmax(70px, 1fr) auto minmax(70px, 1fr) auto;
  grid-template-areas: "you la chest ra partner";
  gap: 0 clamp(4px, 1vw, 12px);
}
.together figure { margin: 0; text-align: center; }
.together .you { grid-area: you; }
.together .partner { grid-area: partner; }
.together .side .phone { --w: clamp(180px, 16.5vw, 232px); }
.together figcaption { margin-top: 18px; font: 600 15px/1.3 var(--sans); color: var(--text); text-wrap: balance; }
.together figcaption::before { content: ""; display: inline-block; vertical-align: .2em; width: 16px; height: 6px; margin-right: 9px; border-radius: 3px; background: var(--c); }
.together .chest { grid-area: chest; position: relative; }
.together .chest::before {
  content: ""; position: absolute; inset: 0 -26% -8%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 30% at 50% 80%, rgba(232, 178, 116, 0.20), transparent 72%),
    radial-gradient(closest-side, rgba(154, 179, 234, 0.14), transparent 80%);
}
.together .chest img { width: clamp(220px, 22vw, 300px); margin: 0 auto; }
.link { display: block; width: 100%; height: auto; overflow: visible; color: var(--c); margin-top: -12%; }
.link.la { grid-area: la; }
.link.ra { grid-area: ra; }
/* The trunk picture has a transparent margin (its shadow): the arrows reach over it to the leather. */
.link.h { width: calc(100% + 44px); }
.link.h.la { margin-right: -44px; }
.link.h.ra { margin-left: -44px; }
.link.flip { transform: scaleX(-1); }
.link.v { display: none; }
.link path { fill: none; stroke: currentColor; stroke-linecap: round; }
.link .base { stroke-width: 2; opacity: .38; }
.link .dots { stroke-width: 4.4; stroke-dasharray: 0.1 9; }
@media (prefers-reduced-motion: no-preference) {
  .link .dots { animation: flow 1.2s linear infinite; animation-play-state: paused; }
  .link.on .dots { animation-play-state: running; }
}
@keyframes flow { to { stroke-dashoffset: -18.2; } } /* two dot periods: the dots march toward the chest */
@media (max-width: 820px) {
  .together { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "you partner" "la ra" "chest chest"; gap: 0 18px; max-width: 520px; align-items: start; }
  .together .side .phone { --w: min(200px, 40vw); margin: 0 auto; }
  .together figcaption { font-size: 14px; }
  .link.h { display: none; }
  .link.v { display: block; margin: 10px 0 0; }
  .together .chest { margin-top: -2px; }
  .together .chest img { width: min(290px, 66vw); }
}

/* iPhone · iPad · Mac: the Mac window, the iPad and the iPhone in front of it; three points below.
   The iPad frame: the same graphite as the phone, its bezel a little wider, radii concentric. */
.tablet { --w: 380px; position: relative; width: var(--w); margin: 0; }
.tablet::before {
  content: ""; position: absolute; inset: -6% -14% -8%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgba(154, 179, 234, 0.22)), transparent);
}
.tablet .bezel {
  padding: calc(var(--w) * 0.022);
  border-radius: calc(var(--w) * 0.05);
  background: linear-gradient(150deg, #5a554e 0%, #272420 26%, #131210 58%, #2c2925 82%, #4a463f 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 40px 72px -30px rgba(0, 0, 0, 0.92), 0 14px 30px -16px rgba(0, 0, 0, 0.7);
}
.tablet img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--w) * 0.028); background: #000; box-shadow: 0 0 0 calc(var(--w) * 0.004) #060505; }
@media (prefers-reduced-motion: no-preference) {
  .tablet .bezel { animation: float 7.5s ease-in-out var(--delay, 0s) infinite alternate; animation-play-state: paused; }
  .tablet.on .bezel { animation-play-state: running; }
}
.devices-stage { position: relative; max-width: 1000px; margin: 0 auto; padding-bottom: clamp(56px, calc(25vw - 80px), 260px); } /* the iPad overlaps only the Mac's last ~80px: its sidebar stays readable */
.devices-stage::before {
  content: ""; position: absolute; inset: -6% -10% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(154, 179, 234, 0.13), rgba(232, 178, 116, 0.05) 60%, transparent 85%);
}
.devices-stage .mac-window { width: 74%; margin: 0 auto; }
.devices-stage .tablet { --w: clamp(200px, 33vw, 440px); position: absolute; left: 0; bottom: 0; }
.devices-stage .phone { --w: clamp(96px, 12.5vw, 172px); position: absolute; right: 3%; bottom: -2%; }
@media (max-width: 640px) {
  .devices-stage { padding-bottom: 36%; }
  .devices-stage .mac-window { width: 86%; margin: 0 0 0 auto; }
  .devices-stage .tablet { --w: 56vw; }
  .devices-stage .phone { --w: 25vw; right: 0; }
}
.pillars { list-style: none; margin: clamp(40px, 5vw, 60px) auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillars li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(241,231,211,.04), rgba(241,231,211,.012)); position: relative; overflow: hidden; }
.pillars li::before { content: ""; position: absolute; left: 20px; top: 0; width: 30px; height: 5px; border-radius: 0 0 3px 3px; background: var(--c, var(--cloth-vault)); }
.pillars .ai-icon { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.pillars .ai-icon svg { width: 23px; height: 23px; }
.pillars p { margin: 0; color: var(--secondary); font-size: 15.5px; line-height: 1.5; }
.pillars strong { display: block; font: 600 19px/1.25 var(--serif); color: var(--heading); margin: 2px 0 5px; }
.pillars a { white-space: nowrap; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; max-width: 560px; } }

/* Apple Intelligence: a big title and two big lines */
.ai { background: radial-gradient(60% 70% at 25% 45%, rgba(125, 152, 220, 0.08), transparent 70%); }
.feature h2.big { font-size: clamp(42px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: .5em; }
.feature h2.big em { font-style: italic; font-weight: 500; color: var(--h2); }
.ai-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ai-points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(241,231,211,.04), rgba(241,231,211,.012)); }
.ai-points p { margin: 0; font: 600 clamp(20px, 2vw, 25px)/1.28 var(--serif); color: var(--heading); }
.ai-icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; color: var(--h2); background: radial-gradient(circle at 30% 25%, rgba(154,179,234,.30), rgba(61,82,112,.35)); box-shadow: 0 0 0 1px rgba(154,179,234,.25) inset, 0 8px 20px -10px rgba(0,0,0,.8); }
.ai-icon svg { width: 26px; height: 26px; }
.fineprint { margin: 18px 0 0; color: var(--secondary); font-size: 15px; }

/* Themes: the app in several palettes, and a swatch for each */
.themes-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 2.6vw, 34px); flex-wrap: wrap; }
.themes-row figure { margin: 0; text-align: center; }
.themes-row .phone { --w: clamp(150px, 14vw, 200px); }
.themes-row figcaption { margin-top: 16px; font: 600 14px/1.2 var(--sans); color: var(--secondary); }
.themes-row figure:nth-child(even) .phone { margin-bottom: 26px; }
.swatches { list-style: none; margin: clamp(28px, 3.4vw, 40px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1100px; }
.swatches li { width: 38px; height: 28px; border-radius: 6px; background: var(--bg); position: relative; box-shadow: 0 0 0 1px rgba(241,231,211,.14), 0 4px 10px -4px rgba(0,0,0,.7); overflow: hidden; }
.swatches li::before { content: ""; position: absolute; left: 7px; top: 8px; width: 14px; height: 3px; border-radius: 2px; background: var(--fg); box-shadow: 0 6px 0 var(--fg); opacity: .9; }
.swatches li::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); }
.swatches-note { text-align: center; color: var(--secondary); font-size: 14px; margin: 14px 0 0; }
@media (max-width: 640px) {
  .themes-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  .themes-row .phone { --w: min(190px, 40vw); }
  .themes-row figure:nth-child(even) .phone { margin-bottom: 0; }
}

/* Final CTA: the app's dotted chest turning above the last line (site.js); the icon without JS. */
.dotted-stage { position: relative; width: min(476px, 100%); margin: -40px auto -26px; } /* the canvas has room around the chest (data-pad 1.4): it turns without cropping */
.dotted-stage::before {
  content: ""; position: absolute; inset: -10% -24%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(125, 152, 220, 0.12), rgba(232, 178, 116, 0.04) 60%, transparent 85%);
}
.dotted-chest { display: block; width: 100%; aspect-ratio: 2.7 / 2.2; }
/* The same chest, turning faintly behind the headline (25%). */
.hero-copy { position: relative; isolation: isolate; }
.dotted-chest.hero-ghost { position: absolute; z-index: -1; left: 42%; top: 30%; width: min(570px, 114%); transform: translate(-50%, -50%); opacity: .25; pointer-events: none; }
/* It fades in to its 25% on its own (the headline's rise would bring it to full opacity). */
.hero-copy > .hero-ghost { animation: ghost-in 1.6s var(--ease) both; }
/* Phones: centred on the screen, its height set from its width (the trunk keeps its proportions). */
@media (max-width: 720px) {
  /* Phones: the headline and its paragraph centred over the chest. */
  .hero-copy { text-align: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .dotted-chest.hero-ghost { left: 50%; width: min(100vw, 520px); height: calc(min(100vw, 520px) * 2.2 / 2.7); aspect-ratio: auto; }
}
@keyframes ghost-in { from { opacity: 0; } to { opacity: .25; } }
.final img.icon { display: none; }
.no-js .final img.icon { display: block; }
.no-js .dotted-stage { display: none; }
.final { text-align: center; }
.final img.icon { width: 120px; height: 120px; border-radius: 27px; margin: 0 auto 28px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(241,231,211,.1); }
.final h2 { font-size: clamp(34px, 5vw, 58px); }
.final p { color: var(--secondary); font-size: 19px; max-width: 34em; margin: 0 auto 30px; }
.final .cta-row { justify-content: center; }

/* ——— Footer ——— */
/* Footer: the wordmark and the slogan on the left, the links on the right (centred on them), then a
   hairline and the fine print across the whole width. One column on phones. */
.site-footer { border-top: 1px solid var(--border); padding: 48px 0 40px; color: var(--secondary); font-size: 14px; margin-top: 40px; }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand nav" "line nav" "fine fine"; column-gap: 40px; align-items: center; }
.site-footer .brand { grid-area: brand; justify-self: start; }
.site-footer .brand img.wordmark { height: 26px; }
.site-footer .foot-line { grid-area: line; margin: 8px 0 0; font: italic 400 15px/1.4 var(--serif); color: var(--text); }
.site-footer nav { grid-area: nav; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 26px; }
.site-footer .fine { grid-area: fine; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: 13px; line-height: 1.6; }
.site-footer a { color: var(--secondary); text-decoration: none; }
.site-footer nav a { color: var(--text); }
.site-footer a:hover { color: var(--heading); }
@media (max-width: 760px) {
  .site-footer .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "line" "nav" "fine"; }
  .site-footer nav { justify-content: center; margin-top: 26px; gap: 10px 22px; }
  .site-footer .wrap { justify-items: center; text-align: center; }
  .site-footer .brand { justify-self: center; }
  .site-footer .brand img.wordmark { height: 22px; }
}
.fine { width: 100%; font-size: 12.5px; opacity: .8; }

/* ——— Documents (privacy, terms, support) ——— */
.doc { padding: clamp(40px, 7vw, 88px) 0 40px; }
.doc .wrap { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: clamp(28px, 5vw, 72px); justify-content: center; }
.doc-head h1 { font-size: clamp(38px, 5.4vw, 60px); }
.doc-head .meta { color: var(--secondary); font-size: 15px; margin-bottom: 34px; }
.doc-body { font-size: 17px; }
.doc-body h2 { font-size: 27px; margin-top: 2.1em; padding-top: .2em; }
.doc-body h3 { font-size: 20px; color: var(--h3); margin-top: 1.6em; }
.doc-body ul, .doc-body ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.doc-body li { margin-bottom: .4em; }
.doc-body li::marker { color: var(--secondary); }
.doc-body .summary { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px 8px; background: rgba(241,231,211,.03); margin-bottom: 34px; }
.doc-body .summary h2 { margin-top: 0; font-size: 21px; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15.5px; display: block; overflow-x: auto; }
.doc-body th, .doc-body td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.doc-body th { color: var(--heading); font-weight: 600; }
.doc-body code { font-family: var(--mono); font-size: .88em; background: var(--code-bg); padding: .12em .4em; border-radius: 5px; }
.doc-body .caps { text-transform: uppercase; font-size: 14.5px; letter-spacing: .01em; }
.toc { position: sticky; top: 96px; align-self: start; font-size: 14.5px; }
.toc b { display: block; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); margin-bottom: 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc a { display: block; padding: 5px 0 5px 14px; color: var(--secondary); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.toc a:hover { color: var(--heading); border-left-color: var(--accent); }
@media (max-width: 900px) {
  .doc .wrap { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}

/* FAQ */
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font: 600 19px/1.35 var(--serif); color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--secondary); border-bottom: 1.5px solid var(--secondary); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 0 18px; color: var(--text); }
.faq .answer p:last-child { margin-bottom: 0; }
.contact-card { margin-top: 40px; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; background: linear-gradient(180deg, rgba(46,92,88,.18), rgba(46,92,88,.04)); }
.contact-card h2 { margin-top: 0 !important; }
.kbd { font: 600 .85em var(--mono); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: .05em .4em; background: rgba(0,0,0,.25); }

/* ——— Reveal on scroll ——— */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Hero entrance */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tip { from { opacity: 0; transform: translateY(40px) rotate(2deg); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-copy > *:nth-child(5) { animation-delay: .32s; }
.hero-art .mac-window { animation: rise 1.1s .15s var(--ease) both; }
.hero-art .phone { animation: tip 1.1s .4s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .hero-copy > *, .hero-copy > .hero-ghost, .hero-art .mac-window, .hero-art .phone { animation: none; } }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.notfound h1 { font-size: clamp(40px, 6vw, 64px); }
.notfound p { color: var(--secondary); }

/* Headings break after their comma on wide screens only: on a phone the line runs on (the space
   after the break is collapsed at a line's start on desktop, and kept when the break is hidden). */
@media (max-width: 720px) { br.comma { display: none; } }

/* The App Store button stuck to the bottom of the screen (site.js), once the hero's has scrolled away. */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  background: linear-gradient(to top, rgba(14, 11, 8, .82), rgba(14, 11, 8, 0));
  opacity: 0; transform: translateY(16px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.sticky-cta.on { opacity: 1; transform: none; }
.sticky-cta.on .btn-store { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; transform: none; } }

/* Headings wrap into even lines (no word left alone on the last one); body text avoids orphans. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* The header (phones and desktop alike): on the home page, the name of the section on screen (site.js)
   with a ▾ that opens the list of every section to jump to, instead of the links; on the other pages,
   Help Center. The language switch on desktop only: on a phone, the footer links the other language. */
.nav .nav-jump { display: none; }
.nav .hide-sm, .nav .hide-md { display: none; }
@media (max-width: 760px) { .site-header .nav > .lang { display: none; } }
.site-header.has-now .nav a[href$="support"] { display: none; }
.site-header.has-now .nav .nav-jump { display: inline-block; position: relative; }
.nav-now { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 var(--sans); color: var(--heading);
    background: rgba(241, 231, 211, .06); border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px 8px 14px; cursor: pointer; }
.nav-now svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.nav-now[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; display: flex; flex-direction: column; padding: 6px;
    background: #1c1711; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.nav-menu[hidden] { display: none; }
.nav .nav-menu a { display: block; padding: 10px 12px; font-size: 15px; color: var(--text); border-radius: 9px; }
.nav .nav-menu a[aria-current="true"] { color: var(--heading); background: rgba(241, 231, 211, .07); }

/* The reader: the article on its website (ads, popups) → a dotted arrow arching over → the same
   article in Chests' reader. Narrow: the two phones side by side, smaller. */
.before-after { position: relative; align-items: flex-start; gap: clamp(40px, 6vw, 84px); }
.before-after figure { margin: 0; text-align: center; }
.before-after .phone { --w: clamp(170px, 15vw, 220px); }
.before-after .before { margin-top: 36px; }
.before-after figcaption { margin-top: 18px; font: 600 15px/1.3 var(--sans); color: var(--secondary); }
.before-after .after figcaption { color: var(--text); }
.before-after .after figcaption::before { content: ""; display: inline-block; vertical-align: .2em; width: 16px; height: 6px; margin-right: 9px; border-radius: 3px; background: var(--c); }
.link.ba-arrow { position: absolute; z-index: 2; left: 50%; top: -38px; width: clamp(120px, 12vw, 170px); margin: 0; translate: -50% 0; }
@media (max-width: 860px) {
  .before-after { gap: 22px; }
  .before-after .phone { --w: min(200px, 40vw); }
  .before-after .before { margin-top: 28px; }
  .link.ba-arrow { width: min(130px, 30vw); top: -30px; }
  .before-after figcaption { font-size: 14px; }
}
/* Field kinds on a phone: two rows of three (not five and one alone). */
@media (max-width: 860px) {
  .flow.kinds { display: grid; grid-template-columns: repeat(3, max-content); }
  .flow.kinds li { text-align: center; }
}

/* Claude (the Mac app's MCP server): a conversation drawn in HTML beside the copy — an
   illustration of what asking looks like, not a screenshot. Claude's side in terracotta. */
.claude { background: radial-gradient(55% 65% at 30% 50%, rgba(201, 138, 90, 0.08), transparent 70%); }
.claude .feature h2.big em { color: var(--terracotta); }
.claude-chat { margin: 0; width: min(100%, 470px); border-radius: 14px; overflow: hidden; background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35), 0 28px 60px -18px rgba(0, 0, 0, 0.8); position: relative; }
.claude-chat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); pointer-events: none; }
.cc-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cc-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(241, 231, 211, 0.16); }
.cc-bar span { margin-left: auto; margin-right: auto; padding-right: 50px; font: 600 13px/1 var(--sans); color: var(--secondary); }
.cc-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 22px; font-size: 15px; line-height: 1.5; }
.cc-body p { margin: 0; }
.cc-you { align-self: flex-end; max-width: 82%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: rgba(241, 231, 211, 0.09); color: var(--heading); }
.cc-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px;
  border: 1px solid rgba(201, 138, 90, 0.35); background: rgba(201, 138, 90, 0.10); font: 600 12.5px/1.2 var(--sans); color: var(--text); }
.cc-tool img { width: 18px; height: 18px; border-radius: 4px; background: var(--label); }
.cc-claude { padding-left: 14px; border-left: 2px solid var(--terracotta); color: var(--text); }
.cc-claude ol { margin: 8px 0 10px; padding-left: 1.3em; display: grid; gap: 3px; }
.cc-claude li::marker { color: var(--secondary); }
.cc-claude b { color: var(--heading); font-weight: 600; }
@media (max-width: 860px) { .claude-chat { margin: 0 auto; } }
@media (max-width: 420px) { .cc-body { font-size: 14px; padding: 16px 14px 18px; } }

/* Share: the browser extensions on the Mac (Chests for Chrome, Chests for Safari), a card under the
   trunk in the pillars' paper, its cloth tab the share sheet's colour. Narrow: the two browsers stack. */
.browsers { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: start;
  max-width: 820px; margin: clamp(36px, 5vw, 60px) auto 0; padding: 26px 28px 24px; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(241,231,211,.04), rgba(241,231,211,.012)); overflow: hidden; }
.browsers::before { content: ""; position: absolute; left: 28px; top: 0; width: 30px; height: 5px; border-radius: 0 0 3px 3px; background: var(--cloth-add); }
.browsers-icon { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(241,231,211,.08), 0 10px 24px -10px rgba(0,0,0,.8); }
.browsers-copy > p.browsers-kicker { margin: 2px 0 8px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--secondary); }
.browsers h3 { font-size: clamp(22px, 2.4vw, 27px); margin-bottom: .4em; }
.browsers-copy > p { color: var(--text); font-size: 16px; }
.browsers-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.browsers-list a { display: flex; flex-direction: column; gap: 5px; height: 100%; padding: 12px 15px 13px; border: 1px solid var(--border); border-radius: 11px;
  background: rgba(241,231,211,.035); text-decoration: none; transition: border-color .2s, background-color .2s; }
.browsers-list a:hover { border-color: rgba(125,152,220,.45); background: rgba(125,152,220,.08); }
.browsers-list b { font: 600 17px/1.25 var(--serif); color: var(--heading); }
.browsers-list span { font-size: 13.5px; line-height: 1.35; color: var(--secondary); }
.browsers-copy > p.browsers-note { margin: 16px 0 0; font-size: 14.5px; color: var(--secondary); }
@media (max-width: 640px) {
  /* The icon beside the kicker and the title, the rest of the card under them. */
  .browsers { display: flow-root; padding: 24px 20px 20px; }
  .browsers::before { left: 20px; }
  .browsers-icon { float: left; width: 52px; height: 52px; border-radius: 12px; margin: 0 14px 10px 0; }
  .browsers-copy > p:not([class]) { clear: left; }
  .browsers-list { grid-template-columns: minmax(0, 1fr); }
}