:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, 0.09);
  --accent: #d9774f;
  --accent-ink: #b85a34;
  --shadow: 0 30px 60px -20px rgba(40, 30, 20, 0.28);
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141312;
    --surface: #1e1d1b;
    --text: #f2f1ef;
    --muted: #a19f9b;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #e98a62;
    --accent-ink: #f0a07e;
    --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--text); font-size: 18px; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; }
/* Light and dark artwork swap through <picture>, which mustn't change the layout. */
.brand picture, .hero picture, .device picture { display: contents; }
.nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; font-size: 15px; white-space: nowrap; }
.nav ul a { color: var(--muted); }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--text); text-decoration: none; }

/* Mobile menu button, shown only on small screens */
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px; padding: 0;
  border: 0; background: none; color: var(--text); cursor: pointer;
}
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  display: block; width: 20px; height: 2px; border-radius: 1px; background: currentColor;
  transition: transform .2s, background-color .2s;
}
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.nav.open .menu-btn span { background: transparent; }
.nav.open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.nav.open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .menu-btn { display: flex; }
  .nav ul {
    display: none; position: absolute; top: 56px; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 6px 16px 14px; font-size: 17px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 24px -16px rgba(0, 0, 0, 0.2);
  }
  .nav.open ul { display: flex; }
  .nav ul li + li { border-top: 1px solid var(--line); }
  .nav ul a { display: block; padding: 12px 0; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 16px;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

/* Hero */
.hero { text-align: center; padding: 72px 0 40px; }
.hero .icon { width: 112px; height: 112px; margin: 0 auto 20px; filter: drop-shadow(0 12px 24px rgba(0,0,0,0.18)); }
.hero h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 16px; font-weight: 750; }
.hero p.lede { font-size: clamp(18px, 2.4vw, 22px); color: var(--muted); max-width: 620px; margin: 0 auto 28px; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .fine { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* Hero MacBook with the real Klip panel */
.stage { padding: 8px 16px 72px; }
.stage.wrap { max-width: 1134px; }
.macbook { width: 100%; height: auto; max-width: 1100px; margin: 0 auto; }
.duo { position: relative; max-width: 1155px; margin: 0 auto; }
.duo .macbook { display: block; width: 88%; margin: 0; }
.duo .phone { position: absolute; right: 0; bottom: -2%; width: 21%; }
/* Mirrored duo: the Mac on the right and the iPhone over its left corner */
.duo--left .macbook { margin-left: auto; }
.duo--left .phone { right: auto; left: 0; }
/* Dark pairs the dark Mac with the iPhone Duo, light pairs the light Mac with the iPhone. The Duo is sized
   to the iPhone's height (21% wide × 1370/662 frame ratio), with its own frame already in the image */
.duo-fold { position: absolute; left: 0; bottom: -2%; width: 31.5%; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); }
.duo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .duo-light { display: none; }
  :root:not([data-theme="light"]) .duo-dark { display: block; }
}
.caption { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; }

/* Hero slides: stacked in one grid cell so the stage keeps the tallest slide's height and
   switching never shifts the page. Inactive slides fade out and are made inert in slides.js. */
.slides { display: grid; touch-action: pan-y; }
.slide {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}
.slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease; }
.slide-visual { flex: 1; display: flex; align-items: center; justify-content: center; }
.slide-visual > * { width: 100%; }
.slides img { -webkit-user-drag: none; user-select: none; }
.slide-title { text-align: center; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 28px; }
/* iPhone Duo hero, composed like the Mac one: the open Duo centered, the folded Duo overlapping its lower right */
.duo-pair { position: relative; max-width: 1155px; margin: 0 auto; }
.duo-pair img { height: auto; filter: drop-shadow(0 24px 30px rgba(30, 20, 10, 0.22)); }
.duo-pair-open { display: block; width: 76%; margin: 0 auto; }
.duo-pair-folded { position: absolute; right: 0; bottom: -3%; width: 25%; }

/* iPhone hero: every iPhone screenshot in a staggered row */
.hero-phones { display: flex; justify-content: center; align-items: flex-start; gap: 24px; padding-bottom: 40px; }
.hero-phones .phone { flex: 1 1 0; min-width: 0; max-width: 221px; }
.hero-phones .phone:nth-child(even) { margin-top: 40px; }
@media (max-width: 560px) {
  .hero-phones { gap: 12px; }
  .hero-phones .phone:nth-child(4) { display: none; }
}
.slide-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 20px; }
.slide-dots { display: flex; justify-content: center; gap: 8px; }
.slide-pause { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.slide-pause:hover { background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.slide-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.slide-pause svg { width: 12px; height: 12px; fill: currentColor; }
.slide-pause .i-play, .slide-pause[aria-pressed="true"] .i-pause { display: none; }
.slide-pause[aria-pressed="true"] .i-play { display: block; }
@media (prefers-reduced-motion: reduce) { .slide-pause { display: none; } }
.slide-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  transition: width .3s ease, background-color .3s ease;
}
.slide-dots button:hover { background: color-mix(in srgb, var(--text) 40%, transparent); }
.slide-dots button[aria-pressed="true"] { width: 24px; background: var(--text); }
.slide-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-active, .slide-dots button { transition: none; transform: none; }
}

/* Sections */
section { padding: 72px 0; border-top: 1px solid var(--line); }
h2 { font-size: clamp(28px, 4.5vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 12px; }
.section-lede { color: var(--muted); font-size: 19px; max-width: 640px; margin: 0 0 40px; }

/* Filter workflow: numbered tabs (radio inputs, no JavaScript) over a dark stage that swaps between real
   screenshots of the Mac panel, with one caption per step below */
.flow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.flow input { position: absolute; opacity: 0; pointer-events: none; }
.flow label {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.flow label b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; color: var(--muted); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.flow label:hover { color: var(--text); }
.flow input:checked + label { color: var(--bg); background: var(--text); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.5); }
.flow input:checked + label b { color: #fff; background: #de7a52; box-shadow: none; }
.flow input:focus-visible + label { outline: 2px solid #de7a52; outline-offset: 2px; }
/* A night-sky stage with a warm glow under the panel, so the screenshots' sunset desktop feels at home */
.flow-stage {
  display: grid; width: 100%; max-width: 980px; margin-top: 14px; padding: clamp(18px, 4vw, 44px); box-sizing: border-box; border-radius: 26px;
  background: radial-gradient(70% 60% at 50% 100%, rgba(222, 122, 82, 0.35), transparent 70%), linear-gradient(180deg, #2a2320, #141312);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(40, 15, 5, 0.5);
}
/* The screenshots stack in one cell and cross-fade; the radius follows the panel's own rounded corners */
.flow-stage img {
  grid-area: 1 / 1; width: 100%; height: auto; border-radius: 1.75% / 5.5%; opacity: 0; transform: translateY(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 48px -18px rgba(0, 0, 0, 0.8);
  transition: opacity .35s ease, transform .35s ease;
}
.flow-captions { display: grid; width: 100%; max-width: 640px; margin-top: 14px; text-align: center; }
.flow-captions p { grid-area: 1 / 1; margin: 0; color: var(--muted); font-size: 16px; opacity: 0; transition: opacity .35s ease; }
#flow-all:checked ~ .flow-stage img:nth-child(1), #flow-link:checked ~ .flow-stage img:nth-child(2), #flow-pin:checked ~ .flow-stage img:nth-child(3),
#mb-panel:checked ~ .flow-stage img:nth-child(1), #mb-search:checked ~ .flow-stage img:nth-child(2), #mb-card:checked ~ .flow-stage img:nth-child(3), #mb-menu:checked ~ .flow-stage img:nth-child(4),
#bonus-switcher:checked ~ .flow-stage img:nth-child(1), #bonus-size:checked ~ .flow-stage img:nth-child(2), #bonus-middle:checked ~ .flow-stage img:nth-child(3), #bonus-input:checked ~ .flow-stage img:nth-child(4) { opacity: 1; transform: none; }
#flow-all:checked ~ .flow-captions p:nth-child(1), #flow-link:checked ~ .flow-captions p:nth-child(2), #flow-pin:checked ~ .flow-captions p:nth-child(3),
#mb-panel:checked ~ .flow-captions p:nth-child(1), #mb-search:checked ~ .flow-captions p:nth-child(2), #mb-card:checked ~ .flow-captions p:nth-child(3), #mb-menu:checked ~ .flow-captions p:nth-child(4),
#bonus-switcher:checked ~ .flow-captions p:nth-child(1), #bonus-size:checked ~ .flow-captions p:nth-child(2), #bonus-middle:checked ~ .flow-captions p:nth-child(3), #bonus-input:checked ~ .flow-captions p:nth-child(4) { opacity: 1; }
/* Scene stages show a whole desktop corner (menu bar + panel). No dark frame around them, which made the
   scene read as an iPad: just the screenshot with a Mac-window radius, a hairline edge and a soft shadow */
.flow-stage.scene { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.flow-stage.scene img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 22px 44px -20px rgba(40, 15, 5, 0.45); }
@media (prefers-reduced-motion: reduce) { .flow-stage img, .flow-captions p { transition: none; } }
/* Phones: compact tabs on one row, and the panel cropped to its left side (search bar, chip and first cards)
   so the cards stay readable, fading out to the right */
@media (max-width: 760px) {
  .flow { gap: 6px; }
  .flow label { gap: 6px; padding: 6px 11px 6px 6px; font-size: 13.5px; }
  .flow label b { width: 20px; height: 20px; font-size: 11px; }
  .flow-stage { padding: 16px 0 16px 16px; border-radius: 20px; overflow: hidden; }
  .flow-stage img { aspect-ratio: 1.6; object-fit: cover; object-position: left top; border-radius: 12px 0 0 12px;
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
  /* Scenes crop to the middle, where the panel and menus sit under the icon, with no fade */
  .flow-stage.scene { padding: 0; overflow: visible; }
  .flow-stage.scene img { aspect-ratio: 1.1; object-position: 50% top; border-radius: 8px; -webkit-mask-image: none; mask-image: none; }
  /* The settings window sits in the middle of its screenshot, so a top crop would cut it off */
  .flow-stage.scene img.scene-mid { object-position: center; }
}
#filter-flow h2, #filter-flow .section-lede, #menubar-flow h2, #menubar-flow .section-lede { text-align: center; margin-left: auto; margin-right: auto; }

/* Card sizes per screen: centered heading like the flows above, picture beside the story */
#screen-sizes h2, #screen-sizes .section-lede { text-align: center; margin-left: auto; margin-right: auto; }
#screen-sizes .split { margin-top: 32px; }
#screen-sizes .section-lede a { white-space: nowrap; }
#screen-sizes .split img { width: 100%; height: auto; }
.screen-sizes-text p { font-size: 17px; line-height: 1.55; margin: 0 0 14px; }
.screen-sizes-text p:last-child { color: var(--muted); margin-bottom: 0; }

/* Bonus features: a coral "Bonus features" badge (as in Klip's What's New) and an "off by default" note,
   so it's clear these are extras outside the clipboard */
#bonus h2, #bonus .section-lede { text-align: center; margin-left: auto; margin-right: auto; }
#bonus .section-lede strong { color: var(--text); }
.bonus-kicker { text-align: center; margin: 0 0 14px; }
.bonus-badge {
  display: inline-block; padding: 4px 10px; border-radius: 6px; background: #d9592f; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.bonus-captions { max-width: 720px; }
.bonus-captions strong { color: var(--text); }
.bonus-why { display: block; margin-top: 10px; font-size: 15px; font-style: italic; }
/* The pictures are whole illustrations, not desktop corners, so phones show them uncropped */
@media (max-width: 760px) {
  #bonus .flow-stage.scene img { aspect-ratio: auto; object-fit: contain; }
}

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 36px) / 3)), 1fr)); gap: 18px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.feature .glyph { font-size: 24px; margin-bottom: 10px; }
.feature.wide { grid-column: 1 / -1; }
.feature h3 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--muted); font-size: 15.5px; }
.feature p + p { margin-top: 8px; }
a.feature { display: block; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.feature:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(40, 30, 20, 0.3); }
.feature .rel-ver { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
a.feature .rel-ver::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform .2s; }
a.feature:hover .rel-ver::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { a.feature, a.feature .rel-ver::after { transition: none; } a.feature:hover { transform: none; } }
.whats-new-more { margin: 24px 0 0; font-weight: 600; }

/* Home features drawn as Klip clip cards: the title sits in a chip with a colored dot, the glyph becomes the
   "app icon" tile on the right, and a ⌘ number badge (a CSS counter) sits in the corner like the app's quick-paste keys */
.features--clips { counter-reset: clip; }
.features--clips .feature {
  --dot: #34c759;
  /* rows: header, description, an optional extra line (What's New's release link), footer */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto; column-gap: 12px;
  padding: 14px 16px 14px 14px; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 30px -18px rgba(40, 30, 20, 0.35);
  counter-increment: clip;
}
/* Pinboard colors from the app, cycled across the cards */
.features--clips .feature:nth-child(6n+2) { --dot: #e5534b; }
.features--clips .feature:nth-child(6n+3) { --dot: #0a84ff; }
.features--clips .feature:nth-child(6n+4) { --dot: #f5b324; }
.features--clips .feature:nth-child(6n+5) { --dot: #af52de; }
.features--clips .feature:nth-child(6n) { --dot: #8e8e93; }
.features--clips .feature h3 {
  grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  margin: 0 0 14px; padding: 7px 12px 7px 10px; border-radius: 12px; font-size: 16px; line-height: 1.2;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px rgba(0, 0, 0, 0.14);
}
.features--clips .feature h3::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--dot); }
.features--clips .feature .glyph {
  grid-area: 1 / 2; display: grid; place-items: center; width: 40px; height: 40px; margin: 0;
  border-radius: 11px; font-size: 21px; line-height: 1;
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
  box-shadow: 0 0 0 1px var(--line), 0 4px 10px -4px rgba(0, 0, 0, 0.2);
}
.features--clips .feature p { grid-column: 1 / -1; }
/* Footer row: the character count (added by shelf.js) on the left, the ⌘ badge on the right */
.features--clips .clip-count {
  grid-area: 4 / 1; align-self: center; margin-top: 14px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.features--clips .feature::after {
  content: "\2318" counter(clip); grid-area: 4 / 2; justify-self: end; margin-top: 14px;
  padding: 2px 7px; border-radius: 6px; font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent);
}
/* Quick-paste only goes up to ⌘9 */
.features--clips .feature:nth-child(n+10)::after { visibility: hidden; }

/* What's New as typewritten court notes: the same clip cards, on stacked sheets of ruled cream paper in a
   typewriter face, with the release version as a red rubber stamp. */
.features--typed {
  --paper: #fbf6ea; --ink: #2a2520; --rule: rgba(70, 100, 150, 0.16); --stamp: #c0392b;
  --type: "American Typewriter", "Courier Prime", "Courier New", Courier, monospace;
}
@media (prefers-color-scheme: dark) {
  /* slightly dimmed paper, so the sheets don't glare on the dark page */
  :root:not([data-theme="light"]) .features--typed { --paper: #e9e2d2; --rule: rgba(70, 100, 150, 0.2); }
}
.features--typed .feature {
  color: var(--ink); background: var(--paper); border-color: rgba(120, 100, 70, 0.18);
  font-family: var(--type);
  /* two sheets peeking out underneath */
  box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08), 5px 5px 0 -1px #f1eadb, 5px 5px 0 0 rgba(120, 100, 70, 0.18),
    10px 10px 0 -1px #e9e1cf, 10px 10px 0 0 rgba(120, 100, 70, 0.14), 0 22px 36px -22px rgba(60, 40, 20, 0.45);
}
.features--typed a.feature:hover { box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08), 5px 5px 0 -1px #f1eadb, 5px 5px 0 0 rgba(120, 100, 70, 0.18),
  10px 10px 0 -1px #e9e1cf, 10px 10px 0 0 rgba(120, 100, 70, 0.14), 0 26px 40px -22px rgba(60, 40, 20, 0.55); }
.features--typed .feature h3 { font-family: var(--type); font-weight: 700; color: var(--ink); background: #fffdf7; box-shadow: 0 0 0 1px rgba(120, 100, 70, 0.22), 0 2px 5px -2px rgba(60, 40, 20, 0.2); }
.features--typed .feature .glyph { background: #fffdf7; box-shadow: 0 0 0 1px rgba(120, 100, 70, 0.22), 0 4px 10px -4px rgba(60, 40, 20, 0.25); }
/* Typed text sits on ruled lines, with a little ink bleed */
.features--typed .feature p:not(.rel-ver) {
  margin: 0; color: var(--ink); font-size: 15px; line-height: 28px; letter-spacing: 0.01em;
  text-shadow: 0 0 0.6px rgba(42, 37, 32, 0.55);
  background: repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px);
}
.features--typed kbd { font-family: var(--type); color: var(--ink); background: #fffdf7; box-shadow: inset 0 0 0 1px rgba(120, 100, 70, 0.3), 0 1px 0 rgba(120, 100, 70, 0.3); }
.features--typed .clip-count, .features--typed .feature::after { font-family: var(--type); color: #7a7064; }
.features--typed .feature::after { background: rgba(120, 100, 70, 0.1); }
/* The release version, inked on with a rubber stamp */
.features--typed .rel-ver {
  justify-self: start; margin: 16px 0 0 2px; padding: 3px 9px 2px; border: 2px solid var(--stamp); border-radius: 4px;
  font: 700 13px/1.3 var(--type); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stamp);
  opacity: 0.85; mix-blend-mode: multiply; transform: rotate(-5deg);
}
/* Home: social proof above Features, with the download count and quotes from users */
.trust-head { text-align: center; }
.trust-head .section-lede { margin: 0 auto 36px; }
/* Download count framed by laurels; the PNGs are alpha masks, so the branches take the text color in light and dark mode */
.trust-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--accent-ink); }
.laurel {
  width: 32px; height: 64px; flex: none; background: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.laurel-left { -webkit-mask-image: url("images/laurel-left.png?v=2"); mask-image: url("images/laurel-left.png?v=2"); }
.laurel-right { -webkit-mask-image: url("images/laurel-right.png?v=2"); mask-image: url("images/laurel-right.png?v=2"); }
.trust-stat { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.1; font-weight: 600; }
.trust-stat strong { font-size: 34px; letter-spacing: -0.02em; font-weight: 750; }
.trust-stat span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; max-width: 900px; margin: 0 auto; }
.quote { margin: 0; text-align: center; }
.quote blockquote { margin: 0; }
/* Oversized opening quote mark stands in for a card or border */
.quote blockquote::before {
  content: "\201C"; display: block; height: 0.62em; margin-bottom: 8px;
  font: 700 96px/1 Georgia, "Times New Roman", serif; color: var(--accent);
}
.quote blockquote p { margin: 0; font-size: 24px; line-height: 1.35; letter-spacing: -0.015em; font-weight: 650; }
.quote figcaption { margin-top: 14px; color: var(--muted); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 680px) {
  .quotes { grid-template-columns: 1fr; gap: 40px; }
  .quote blockquote::before { font-size: 80px; }
  .quote blockquote p { font-size: 21px; }
}

/* Home: quick paste showcase. A terracotta-to-night band with glass keycaps and a fanned shelf of clip cards.
   The cards are always light glass, like the app's Glass design, so the band looks the same in light and dark mode. */
.shelf {
  --card-w: 200px; --card-h: 244px; --gap: 186px; --drop: 12px; --card-top: 44px;
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: 72px 0 112px; border-top: 0;
  background: linear-gradient(180deg, #de7a52 0%, #b45a35 34%, #4a2a1c 70%, #1e1d1b 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shelf { background: linear-gradient(180deg, #c4643f 0%, #8f4627 34%, #2e1f18 70%, #141312 100%); }
}
/* The hero after the band starts with the app icon straddling the seam, half on the dark band and half on the page */
.shelf + .hero { padding-top: 0; }
.shelf + .hero .icon { position: relative; z-index: 2; margin-top: -56px; }
.shelf h2 { color: #fff; font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 750; margin: 0 0 32px; }
.shelf-br { display: none; }
.shelf-lede { color: rgba(255, 255, 255, 0.82); font-size: 19px; max-width: 520px; margin: 0 auto; }
.shelf-hint { color: rgba(255, 255, 255, 0.7); font-size: 15px; margin: 8px 16px 0; }
.shelf-hint kbd { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* Frosted glass keycaps: a light top face, a darker lip at the bottom */
.shelf-keys { display: flex; justify-content: center; gap: 14px; margin: 0 0 24px; }
.keycap {
  display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 18px;
  font: 500 32px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; color: #3b2a22;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 -7px 0 rgba(80, 40, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 28px -10px rgba(40, 15, 5, 0.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.keycap--accent { color: #a84d2a; background: linear-gradient(180deg, rgba(255, 214, 192, 0.85), rgba(240, 150, 110, 0.55)); }
.keycap--return {
  position: absolute; left: 50%; top: calc(var(--card-top) + var(--card-h) + 34px); z-index: 20;
  width: 168px; height: 66px; margin-left: -84px; font-size: 34px;
  box-shadow: inset 0 -7px 0 rgba(80, 40, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 40px -4px rgba(233, 138, 98, 0.55), 0 18px 30px -10px rgba(0, 0, 0, 0.6);
  text-decoration: none; cursor: pointer;
}
/* The Return key is a link to the hero: it glows brighter on hover and presses down like a real key */
.keycap--return:hover { color: #3b2a22; text-decoration: none;
  box-shadow: inset 0 -7px 0 rgba(80, 40, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 56px 2px rgba(233, 138, 98, 0.8), 0 18px 30px -10px rgba(0, 0, 0, 0.6); }
.keycap--return:active { transform: translateY(3px);
  box-shadow: inset 0 -3px 0 rgba(80, 40, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 40px -4px rgba(233, 138, 98, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.6); }
.keycap--return:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Landing from the Return key leaves the dark band's edge and the whole icon in view below the sticky nav */
.shelf + .hero { scroll-margin-top: 76px; }

/* The stage fades out at both sides, so the outer cards dissolve into the band */
.shelf-stage {
  position: relative; max-width: 1440px; height: 460px; margin: 36px auto 0; perspective: 1600px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.shelf-cards { list-style: none; margin: 0; padding: 0; }
/* Fan layout from --i (position from center) and --d (distance), like cards wrapped around the outside of a drum:
   outer cards turn their far edge away, tilt like a fanned hand, drop lower, sit deeper and soften */
.clip {
  position: absolute; top: var(--card-top); left: 50%; z-index: calc(10 - var(--d));
  width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2);
  display: flex; flex-direction: column; padding: 10px; border-radius: 18px; overflow: hidden; text-align: left;
  color: #1d1d1f; font-size: 12px; line-height: 1.45;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(250, 247, 244, 0.93));
  /* a bright glass rim, then a long soft drop shadow */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 30px 50px -20px rgba(0, 0, 0, 0.6);
  transform: translateX(calc(var(--i) * var(--gap))) translateY(calc(var(--d) * var(--d) * var(--drop)))
    translateZ(calc(var(--d) * -50px)) rotateY(calc(var(--i) * 24deg)) rotate(calc(var(--i) * 4deg));
  filter: blur(calc(var(--d) * var(--d) * 0.13px));
  opacity: calc(1 - var(--d) * 0.06);
}
.clip--selected {
  transform: translateY(-24px) scale(1.1);
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px #e98a62, 0 0 54px 8px rgba(233, 138, 98, 0.6), 0 34px 56px -20px rgba(0, 0, 0, 0.7);
}
/* Desktop: the same drum with seven cards. Each step out turns further away, tilts and drops more steeply; the X
   offsets keep every card tucked a little under its inner neighbour once perspective is applied. */
@media (min-width: 761px) {
  .clip {
    --x: 0px; --y: 0px; --z: 0px; --r: 0deg; --rz: 0deg; --s: 1;
    transform: translateX(var(--x)) translateY(var(--y)) translateZ(var(--z)) rotateY(var(--r)) rotate(var(--rz)) scale(var(--s));
  }
  .clip--selected { --y: -24px; --s: 1.1; }
  .clip:nth-child(1) { --x: -530px; --y: 150px; --z: -190px; --r: -40deg; --rz: -8deg; }
  .clip:nth-child(2) { --x: -372px; --y: 78px;  --z: -100px; --r: -30deg; --rz: -5deg; }
  .clip:nth-child(3) { --x: -198px; --y: 26px;  --z: -36px;  --r: -18deg; --rz: -2deg; }
  .clip:nth-child(5) { --x: 198px;  --y: 26px;  --z: -36px;  --r: 18deg;  --rz: 2deg; }
  .clip:nth-child(6) { --x: 372px;  --y: 78px;  --z: -100px; --r: 30deg;  --rz: 5deg; }
  .clip:nth-child(7) { --x: 530px;  --y: 150px; --z: -190px; --r: 40deg;  --rz: 8deg; }
}

/* Card parts, after the Mac app's glass cards: a title chip, the app icon, the content and a footer */
.clip-head { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
.clip-chip {
  display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; min-width: 0;
  padding: 5px 10px 5px 7px; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 2px 6px -2px rgba(0, 0, 0, 0.14);
}
.clip-chip i { grid-row: span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); }
.clip-chip b { font-size: 12px; font-weight: 650; line-height: 1.2; }
.clip-chip small { font-size: 9.5px; line-height: 1.25; color: #8a8a8e; white-space: nowrap; }
.clip-app { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.clip-body { flex: 1; min-height: 0; margin: 0; overflow: hidden; font-size: 11.5px; }
pre.clip-body { font: 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; }
.clip-foot { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; font-size: 9.5px; color: #8a8a8e; }
.clip-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-foot strong { font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #1d1d1f; }
.clip-foot kbd { flex: none; padding: 1px 5px; font-size: 9px; color: #6e6e73; background: #f2f1ef; box-shadow: none; }
.clip-swatch { flex: 1; border-radius: 12px; background: #de7a52; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
/* Link: the page preview runs edge to edge under the chip */
.clip-media { width: calc(100% + 20px); max-width: none; height: 118px; margin: 0 -10px; object-fit: cover; }
.clip-title { flex: 1; margin: 10px 0 0; font-size: 12px; font-weight: 650; line-height: 1.3; }
/* Image: the photo fills the card, with the chip and size badge on top */
.clip-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip--image .clip-foot { margin-top: auto; justify-content: center; }
.clip--image .clip-foot kbd { position: absolute; right: 0; }
.clip-dims { padding: 2px 8px; border-radius: 6px; color: #fff; background: rgba(0, 0, 0, 0.55); }

/* Reveal (shelf.js adds .reveal, then .is-in): keys drop in one by one, cards rise and fan out from the center,
   then the glow and the Return key arrive */
.shelf.reveal .keycap { transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.shelf.reveal .shelf-keys .keycap:nth-child(2) { transition-delay: .1s; }
.shelf.reveal .shelf-keys .keycap:nth-child(3) { transition-delay: .2s; }
.shelf.reveal .clip {
  transition: transform 1s cubic-bezier(.2, .75, .2, 1), opacity .6s ease, filter .6s ease, box-shadow .5s ease;
  transition-delay: calc(.35s + var(--d) * .09s), calc(.35s + var(--d) * .09s), calc(.35s + var(--d) * .09s), 1.05s;
}
.shelf.reveal .keycap--return { transition-delay: 1.2s; }
.shelf.reveal:not(.is-in) .shelf-keys .keycap { opacity: 0; transform: translateY(-18px); }
.shelf.reveal:not(.is-in) .clip { opacity: 0; transform: translateY(200px) scale(.82); }
.shelf.reveal:not(.is-in) .clip--selected { box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.6); }
.shelf.reveal:not(.is-in) .keycap--return { opacity: 0; transform: translateY(20px); }
/* Phones: five smaller cards in a tighter fan, cut off by the screen edges */
@media (max-width: 760px) {
  .shelf { --card-w: 148px; --card-h: 186px; --gap: 128px; --drop: 18px; --card-top: 44px; padding: 52px 0 88px; }
  .shelf-br { display: inline; }
  .shelf-lede { font-size: 17px; padding: 0 8px; }
  .shelf-keys { gap: 10px; }
  .keycap { width: 60px; height: 60px; border-radius: 15px; font-size: 26px; }
  .keycap--return { width: 136px; height: 54px; margin-left: -68px; font-size: 28px; top: calc(var(--card-top) + var(--card-h) + 28px); }
  /* shelf.js turns the drum on horizontal swipes; vertical swipes still scroll the page */
  .shelf-stage { height: 360px; margin-top: 24px; -webkit-mask-image: none; mask-image: none;
    touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  .shelf-stage img { -webkit-user-drag: none; }
  /* Cards more than two steps out fade away rather than disappear, so they can slide back in */
  .clip--far { opacity: 0; pointer-events: none; }
  /* Once swiped, cards move together instead of with the staggered reveal delays; while dragging they track the finger */
  .shelf.reveal.is-live .clip { transition-duration: .45s; transition-delay: 0s; }
  .shelf.is-dragging .clip { transition: none; }
  .shelf.is-dragging .shelf-stage { cursor: grabbing; }
  .clip { padding: 8px; border-radius: 15px; font-size: 10px; }
  .clip-head { margin-bottom: 7px; }
  .clip-chip { padding: 4px 7px 4px 5px; border-radius: 8px; column-gap: 4px; }
  .clip-chip i { width: 9px; height: 9px; }
  .clip-chip b { font-size: 10px; }
  .clip-chip small { font-size: 7.5px; }
  .clip-app { width: 22px; height: 22px; border-radius: 6px; }
  .clip-body { font-size: 9.5px; }
  pre.clip-body { font-size: 8.5px; }
  .clip-foot { font-size: 8px; margin-top: 6px; }
  .clip-foot kbd { font-size: 7.5px; }
  .clip-media { width: calc(100% + 16px); height: 88px; margin: 0 -8px; }
  .clip-title { font-size: 10px; margin-top: 7px; }
}

/* iPhone & iPad page: the same band as the home shelf, with glass pills in place of the keys and three real iPhone
   screens rising from the bottom. The iPhones are drawn in CSS (titanium band, bezel, Dynamic Island) so they stay
   sharp at any size; --w is the screen width and everything scales from it (the screens are 402 × 874 pt). */
.ios-pills { flex-wrap: wrap; gap: 12px; padding: 0 12px; }
.ios-pill {
  display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 20px; border-radius: 16px;
  font-size: 17px; font-weight: 600; color: #3b2a22;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.3)); border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 -5px 0 rgba(80, 40, 20, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 26px -10px rgba(40, 15, 5, 0.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.ios-pill svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ios-pill i { width: 11px; height: 11px; border-radius: 50%; background: #fff; }
/* The Work pinboard in green and the Link filter in blue, the app's own selection colours */
.ios-pill--green { color: #fff; background: linear-gradient(180deg, #3fbf5c, #2a9a45); border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 -5px 0 rgba(0, 60, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 30px -4px rgba(80, 220, 120, 0.6), 0 14px 26px -10px rgba(10, 40, 15, 0.5); }
.ios-pill--blue { color: #fff; background: linear-gradient(180deg, #3d8bff, #1f6fe0); border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 -5px 0 rgba(0, 30, 90, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 30px -4px rgba(80, 150, 255, 0.65), 0 14px 26px -10px rgba(5, 20, 60, 0.5); }

/* The phones are cut off by a soft fade at the bottom of the stage, with a warm glow behind them */
.shelf--ios .ios-stage { --spread: 300px; height: 480px; cursor: default;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.ios-stage::before { content: ""; position: absolute; left: 50%; top: 40px; width: 900px; max-width: 100%; height: 500px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 160, 110, 0.5), transparent 70%); filter: blur(24px); }
.ios-phone {
  --w: 290px; --y: 0px; --lift: 0px;
  position: absolute; top: 24px; left: 50%; z-index: 2; width: calc(var(--w) + 28px);
  transform: translateX(-50%) translateX(calc(var(--x) * var(--spread))) translateY(calc(var(--y) + var(--lift))) rotate(var(--r));
  transform-origin: 50% 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}
.ios-phone--side { --w: 256px; --y: 72px; z-index: 1; }
.ios-band { position: relative; padding: 4px; border-radius: calc(var(--w) * 0.19);
  background: linear-gradient(135deg, #e9ebee 0%, #9ea3ab 22%, #d7dadf 48%, #8c9199 74%, #c9ccd2 100%); }
/* Volume buttons on the left edge, the side button on the right */
.ios-band::before, .ios-band::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #7d828a, #c7cad0); }
.ios-band::before { left: -2px; top: 22%; height: 16%; }
.ios-band::after { right: -2px; top: 25%; height: 11%; }
.ios-bezel { position: relative; padding: 10px; border-radius: calc(var(--w) * 0.18); background: #050506; }
.ios-bezel img { display: block; width: var(--w); max-width: none; height: auto; border-radius: calc(var(--w) * 0.155); }
/* Glass reflection across the screen */
.ios-bezel::after { content: ""; position: absolute; inset: 10px; border-radius: calc(var(--w) * 0.155); pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 32%); }
/* Dynamic Island: 126 × 37 pt, 11 pt from the top of the screen */
.ios-island { position: absolute; left: 50%; top: calc(10px + var(--w) * 11 / 402); width: calc(var(--w) * 126 / 402); height: calc(var(--w) * 37 / 402);
  transform: translateX(-50%); border-radius: 999px; background: #000; }

/* The Paste button sits under the stage instead of over the cards, filled terracotta like the app's own */
.shelf--ios .keycap--return {
  position: relative; left: auto; top: auto; z-index: 3; display: inline-flex; gap: 10px; width: auto; height: 60px;
  margin: 4px 0 0; padding: 0 30px; border-radius: 30px; font-size: 21px; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, #d4704b, #b4532f); border-color: rgba(255, 255, 255, 0.4);
}
.shelf--ios .keycap--return:hover { color: #fff; }
.shelf--ios .shelf-hint { margin-top: 16px; }

/* Reveal (shelf.js): the pills drop in one by one, then the phones rise, the front one first */
.shelf.reveal .ios-pill { transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.shelf.reveal .ios-pill:nth-child(2) { transition-delay: .08s; }
.shelf.reveal .ios-pill:nth-child(3) { transition-delay: .16s; }
.shelf.reveal .ios-pill:nth-child(4) { transition-delay: .24s; }
.shelf.reveal .ios-phone { transition: transform 1s cubic-bezier(.2, .75, .2, 1) .35s, opacity .6s ease .35s; }
.shelf.reveal .ios-phone--side { transition-delay: .5s; }
.shelf.reveal:not(.is-in) .ios-pill { opacity: 0; transform: translateY(-18px); }
.shelf.reveal:not(.is-in) .ios-phone { --lift: 220px; opacity: 0; }

@media (max-width: 760px) {
  .ios-pills { gap: 6px; padding: 0; margin-left: -8px; margin-right: -8px; }
  .ios-pill { height: 36px; padding: 0 9px; gap: 4px; border-radius: 12px; font-size: 12.5px; }
  .ios-pill svg { width: 14px; height: 14px; }
  .ios-pill i { width: 9px; height: 9px; }
  .shelf--ios .ios-stage { --spread: 150px; height: 360px; margin-top: 24px; cursor: default; }
  .ios-phone { --w: 196px; top: 16px; width: calc(var(--w) + 22px); }
  .ios-phone--side { --w: 168px; --y: 54px; }
  .ios-bezel { padding: 7px; }
  .ios-bezel::after { inset: 7px; }
  .ios-island { top: calc(7px + var(--w) * 11 / 402); }
  .shelf--ios .keycap--return { height: 52px; padding: 0 24px; font-size: 18px; }
}
/* Small phones: three pills fit on one row, so iCloud sync drops out rather than wrapping onto its own line */
@media (max-width: 389px) {
  .ios-pill:nth-child(4) { display: none; }
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split img { border-radius: 12px; box-shadow: var(--shadow); margin: 0 auto; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* Help: the wide settings screenshot's <picture> must not change the layout */
.split-shot--wide picture { display: block; min-width: 0; }

.keys { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.keys td { padding: 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.keys td:first-child { white-space: nowrap; padding-right: 20px; width: 1%; }
kbd {
  font: 600 13px -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 2px 8px; border-radius: 6px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line);
}

/* Docs pages */
.doc { max-width: 760px; margin: 0 auto; padding: 56px 16px 80px; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.1; }
.doc .meta { color: var(--muted); margin: 0 0 36px; font-size: 15px; }
.doc h2 { font-size: 22px; margin: 40px 0 10px; }
.doc h3 { font-size: 18px; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--text); }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc .caps { text-transform: uppercase; font-size: 14.5px; letter-spacing: .01em; }

details.faq { border-bottom: 1px solid var(--line); padding: 14px 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq > div { color: var(--muted); padding-top: 8px; }
details.faq > div p { color: var(--muted); margin: 8px 0; }

.contact {
  margin: 32px 0; padding: 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.contact p { margin: 0; }

/* Footer (Wise-style: brand + social, link columns, legal) */
.footer { padding: 0 0 56px; color: var(--text); font-size: 13px; }
/* divider sits inside the content width, not edge to edge */
.footer-stack { border-top: 1px solid var(--line); padding-top: 36px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--text);
}
.footer-brand:hover { text-decoration: none; }
.footer-brand img { width: 36px; height: 36px; }
.footer-social { display: flex; align-items: center; gap: 22px; }
.footer-social a { display: flex; color: var(--text); transition: color .15s; }
.footer-social a:hover { color: var(--accent); }
.footer-social svg { width: 22px; height: 22px; fill: currentColor; }
.footer-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; margin-top: 44px; }
/* Small bold column headings (h2 for screen-reader navigation, sized down from the page h2) */
.footer-head { margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--text); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-nav a { color: var(--text); font-size: 14px; }
.footer-nav a:hover { color: var(--accent-ink); }
.footer-badges { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.footer-badges img { max-width: 100%; }
.footer-legal { margin-top: 36px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.footer-legal p { margin: 0 0 14px; max-width: 900px; }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-legal a { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.footer-legal-links a { font-weight: 500; text-decoration: none; }
.footer-legal-links a:hover { text-decoration: underline; }
@media (max-width: 960px) {
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 560px) {
  .hero { padding-top: 48px; }
  section { padding: 56px 0; }
}

/* iPhone and iPad screenshots, inside device frames drawn to match the screenshots */
.phones { display: flex; gap: 18px; justify-content: center; align-items: flex-start; min-width: 0; }
.phones .phone { flex: 1 1 0; min-width: 0; }

/* iPhone / iPad section on the home page: intro + two alternating rows */
.ios-heading { text-align: center; margin-bottom: 12px; }
.ios-intro { text-align: center; margin: 0 auto 52px; max-width: 560px; }
.ios-showcase { display: flex; flex-direction: column; gap: 64px; }
.ios-row.split { align-items: center; gap: 40px 56px; }
.ios-row .ios-visual { display: flex; justify-content: center; min-width: 0; }
.ios-row .phone { max-width: 240px; width: 100%; margin: 0 auto; }
.ios-copy h3 { font-size: 22px; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.15; }
.ios-points { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.ios-points li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.ios-points li:last-child { border-bottom: 0; padding-bottom: 0; }
.ios-points li:first-child { padding-top: 0; }
.ios-cta { text-align: center; margin: 52px 0 0; }
@media (min-width: 761px) {
  .ios-row--flip .ios-visual { order: -1; }
}
@media (max-width: 760px) {
  .ios-showcase { gap: 48px; }
  .ios-row .phone { max-width: 220px; }
  .ios-row--flip .ios-visual { order: -1; }
}
.device { position: relative; width: 100%; filter: drop-shadow(0 24px 30px rgba(30, 20, 10, 0.22)); }
.device .frame { position: relative; width: 100%; height: auto; pointer-events: none; }
.device .screen { position: absolute; height: auto; object-fit: cover; }
.phone { max-width: 260px; aspect-ratio: 1324 / 2740; }
.phone .screen { left: 4.456%; top: 2.153%; width: 91.088%; height: 95.693%; border-radius: 13.93% / 6.41%; }
.phones .phone:nth-child(2) { margin-top: 48px; }
.tablet { max-width: 760px; margin: 0 auto; aspect-ratio: 2300 / 2988; }
.tablet .screen { left: 5.130%; top: 3.949%; width: 89.739%; height: 92.102%; border-radius: 2.907% / 2.180%; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; justify-items: center; }
.gallery figure { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.gallery figcaption { color: var(--muted); font-size: 14.5px; margin-top: 14px; max-width: 280px; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery figcaption { max-width: 220px; }
}

/* iPhone & iPad page: one screenshot per row with a big headline, alternating sides.
   The phone comes first in the markup so it sits above the text when the rows stack. */
.zigzag { display: flex; flex-direction: column; gap: 112px; padding-top: 40px; padding-bottom: 112px; }
.zig {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 80px;
  align-items: center; width: 100%; max-width: 900px; margin: 0 auto;
}
.zig--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.zig--flip .zig-visual { order: 2; }
.zig .phone { max-width: 300px; margin: 0 auto; }
.zig-eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.zig-copy h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 20px; }
.zig-copy p:last-child { margin: 0; color: var(--muted); font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5; max-width: 440px; }
/* Slide-in (zigzag.js adds .reveal, then .is-in per row): the phone comes from the side it sits on,
   the text from the other side. clip stops the off-screen start positions from adding a sideways scroll. */
.zigzag { --zig-shift: 96px; overflow-x: clip; }
.zigzag.reveal .zig-visual, .zigzag.reveal .zig-copy {
  opacity: 0; transition: opacity .8s ease, transform 1s cubic-bezier(.2, .75, .2, 1);
}
.zigzag.reveal .zig:not(.zig--flip) .zig-visual, .zigzag.reveal .zig--flip .zig-copy { transform: translateX(calc(-1 * var(--zig-shift))); }
.zigzag.reveal .zig:not(.zig--flip) .zig-copy, .zigzag.reveal .zig--flip .zig-visual { transform: translateX(var(--zig-shift)); }
.zigzag.reveal .zig-copy { transition-delay: .12s; }
.zigzag.reveal .zig.is-in .zig-visual, .zigzag.reveal .zig.is-in .zig-copy { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .zigzag { --zig-shift: 48px; }
  .zigzag { gap: 80px; padding-bottom: 80px; }
  .zig, .zig--flip { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .zig--flip .zig-visual { order: 0; }
  .zig .phone { max-width: 240px; }
  .zig-copy p:last-child { margin: 0 auto; }
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 16px;
}
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .phone { max-width: 200px; }
}
@media (max-width: 420px) {
  .phones .phone:nth-child(2) { margin-top: 28px; }
}

/* iPhone Duo: folded and open shots side by side. Column widths follow the bezel widths
   (509 and 1000 at the same scale), so both devices render at their true relative size. */
.duo-title { text-align: center; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; margin: 48px 0 20px; }
.duo-row { display: grid; grid-template-columns: 509fr 1000fr; gap: 40px; align-items: end; max-width: 760px; margin: 0 auto 40px; }
.duo-row figure { margin: 0; text-align: center; }
.duo-row img { width: 100%; height: auto; filter: drop-shadow(0 20px 26px rgba(30, 20, 10, 0.2)); }
.duo-row figcaption { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 12px; }
.duo-caption { text-align: center; color: var(--muted); font-size: 15px; margin: -8px auto 0; max-width: 520px; }
@media (max-width: 560px) {
  .duo-row { gap: 16px; }
}


.btn .ico { width: 19px; height: 19px; flex: none; margin-left: -3px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico .fill { fill: currentColor; stroke: none; }
.btn.dark { background: #1d1d1f; color: #fff; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.dark { background: #f5f5f7; color: #1d1d1f; }
}

/* Hero download buttons share one rounded-rectangle shape */
.btn.mac, .btn.ios { padding: 14px 26px 14px 22px; border-radius: 16px; gap: 10px; font-size: 17px; letter-spacing: -0.01em; }
.btn.ios .ico { width: 18px; height: 18px; }

/* "Download for Mac": terracotta, with the Apple logo */
.btn.mac {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn.mac .ico { width: 18px; height: 18px; margin: -3px 0 0; } /* Apple glyph sits optically low */

/* System requirements tooltip above the Mac download button, on hover or keyboard focus */
.btn.mac { position: relative; }
.btn-tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%; z-index: 5;
  width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 8px 12px; border-radius: 10px;
  background: #1d1d1f; color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.btn-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #1d1d1f;
}
.btn.mac:hover .btn-tip,
.btn.mac:focus-visible .btn-tip { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-tip { background: #f5f5f7; color: #1d1d1f; }
  :root:not([data-theme="light"]) .btn-tip::after { border-top-color: #f5f5f7; }
}

/* Mac download with a Stable / Beta switch: the pill carries the terracotta, the link inside goes flat */
.mac-dl {
  display: inline-flex; align-items: center; gap: 4px; padding-right: 6px; border-radius: 16px;
  background: var(--accent);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.mac-dl .btn.mac { background: transparent; box-shadow: none; padding-right: 14px; white-space: nowrap; }
/* The requirements tooltip centers on the whole pill, and shows while hovering or focusing any part of it */
.mac-dl .btn.mac { position: static; }
.mac-dl .btn-tip { white-space: normal; }
/* .btn:hover's filter would make the link the tooltip's containing block again, so the pill lightens instead */
.mac-dl .btn.mac:hover { filter: none; }
.mac-dl:not(.is-beta):has(.btn.mac:hover) { background-color: color-mix(in srgb, var(--accent) 92%, #fff); }
.mac-dl:hover .btn-tip, .mac-dl:focus-within .btn-tip { opacity: 1; transform: translate(-50%, 0); }
.channel-switch { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, 0.16); }
.channel-switch button {
  padding: 7px 14px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: rgba(255, 255, 255, 0.82); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  transition: background .15s, color .15s, box-shadow .15s;
}
.channel-switch button:hover { color: #fff; }
.channel-switch button[aria-checked="true"] { background: #fff; color: var(--accent-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.channel-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (prefers-color-scheme: dark) {
  /* --accent-ink is the light tint in dark mode, so the selected segment keeps the deep terracotta */
  :root:not([data-theme="light"]) .channel-switch button[aria-checked="true"] { color: #b85a34; }
}

/* Beta selected: the solid pill turns into a light, dotted card with a terracotta outline and two sparkles */
.mac-dl { position: relative; transition: background-color .2s, box-shadow .2s; }
.mac-dl .btn.mac { transition: color .2s; }
.mac-dl.is-beta {
  background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
  background-image: radial-gradient(color-mix(in srgb, var(--accent) 40%, transparent) 0.9px, transparent 1.3px);
  background-size: 7px 7px;
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 8px 22px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.mac-dl.is-beta .btn.mac { color: var(--text); }
.mac-dl.is-beta .channel-switch { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.mac-dl.is-beta .channel-switch button { color: var(--muted); }
.mac-dl.is-beta .channel-switch button:hover { color: var(--text); }
.mac-dl.is-beta .channel-switch button[aria-checked="true"] { background: #1d1d1f; color: #fff; }
.mac-dl.is-beta .channel-switch button:focus-visible { outline-color: var(--accent); }
/* Four-point sparkles just outside the top-right and bottom-left corners */
.mac-dl::before, .mac-dl::after {
  content: ""; position: absolute; width: 14px; height: 14px; background: var(--accent); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.mac-dl::before { top: -8px; right: -8px; }
.mac-dl::after { bottom: -8px; left: -8px; width: 11px; height: 11px; }
.mac-dl.is-beta::before, .mac-dl.is-beta::after { opacity: 1; transform: scale(1); }
/* Beta selected while there's no beta: the same card, but muted, no sparkles, and nothing to click */
.mac-dl.no-beta .btn.mac { color: var(--muted); cursor: default; }
.mac-dl.no-beta::before, .mac-dl.no-beta::after { opacity: 0; transform: scale(.4); }
@media (prefers-color-scheme: dark) {
  /* a dark selected segment would vanish on the dark card, so it flips to light like .btn.dark */
  :root:not([data-theme="light"]) .mac-dl.is-beta .channel-switch button[aria-checked="true"] { background: #f5f5f7; color: #1d1d1f; }
}

/* "or install with Homebrew": the command in a small macOS-style terminal window, under the Mac download */
.brew { margin: 18px 0 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.brew-or { color: var(--muted); font-size: 13.5px; }
.brew[hidden] { display: none; }
.term {
  max-width: 100%; border-radius: 12px; overflow: hidden; text-align: left;
  background: #1d1d1f; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.term-bar { display: flex; gap: 7px; padding: 10px 12px 0; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-body { display: flex; align-items: center; gap: 14px; padding: 10px 10px 12px 16px; }
.term code {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  font: 500 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #f2f1ef;
}
.term-prompt { color: var(--accent); user-select: none; }
.copy-btn {
  display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 5px 9px; border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.75); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer;
}
.copy-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.copy-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 560px) {
  /* Phones: stack the download buttons in one centered column and give the terminal the same width */
  .ctas:has(.btn.mac) { flex-direction: column; align-items: stretch; max-width: 340px; margin: 0 auto; }
  .ctas:has(.btn.mac) .btn { justify-content: center; }
  .ctas .mac-dl .btn.mac { flex: 1 1 auto; padding-left: 12px; padding-right: 8px; gap: 8px; }
  .channel-switch button { padding: 7px 11px; }
  .brew { max-width: 340px; margin: 20px auto 0; }
  .term { position: relative; width: 100%; }
  /* Copy moves into the title bar so the whole command fits on one line */
  .term .copy-btn { position: absolute; top: 6px; right: 8px; padding: 4px 8px; font-size: 12.5px; }
  .term-bar { padding: 12px 14px 4px; }
  .term-body { padding: 10px 14px 14px; }
  .term code { font-size: 12.5px; }
}
@media (prefers-color-scheme: dark) {
  /* a touch darker than the page so the window still stands out */
  :root:not([data-theme="light"]) .term { background: #0b0b0a; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
}
.mac-get { display: flex; flex-direction: column; align-items: center; }
.mac-get .brew { margin-top: 10px; }

/* "See what Klip does" chip under the hero buttons */
.more-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.more-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--text) 13%, transparent); }
.more-chip span { color: var(--muted); }

/* Buy Me a Coffee (hero / doc chips; footer uses footer-social icons) */
.coffee-btn {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .55em 1.1em; border-radius: 999px;
  background: #FFDD00; color: #000; font-size: 14px;
  font-weight: 600; text-decoration: none;
  transition: transform .15s;
}
.coffee-btn:hover { transform: translateY(-1px); text-decoration: none; }
.doc .coffee-btn { font-size: 15.5px; }
.coffee-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.support-row { margin-top: 26px; }
/* Featured-on badges (MacBase, MacMenuBar, MacPip, Product Hunt); wrap on narrow screens */
.hero-badge { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 22px; }
.hero-badge img { max-width: 100%; }

/* "Say thanks" chip beside the coffee button, linking to the LinkedIn post */
.linkedin-btn {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em 1.1em; border-radius: 999px;
  background: #0A66C2; color: #fff; font-size: 14px;
  font-weight: 600; text-decoration: none;
  transition: transform .15s;
}
.linkedin-btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.linkedin-btn:hover { transform: translateY(-1px); text-decoration: none; }
.doc .linkedin-btn { font-size: 15.5px; }

/* YouTube chip (hero) */
.youtube-btn {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em 1.1em; border-radius: 999px;
  background: #FF0000; color: #fff; font-size: 14px;
  font-weight: 600; text-decoration: none;
  transition: transform .15s;
}
.youtube-btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }
.youtube-btn:hover { transform: translateY(-1px); text-decoration: none; }
.doc .youtube-btn { font-size: 15.5px; }

/* Help guide */
.doc.guide { max-width: 900px; }
.guide section { padding: 0; border-top: none; scroll-margin-top: 72px; }
.guide h2 { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.toc a {
  padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.toc a:hover { text-decoration: none; background: color-mix(in srgb, var(--text) 12%, transparent); }
.shot { margin: 24px 0; }
.shot img { width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow); }
.shot.narrow img { max-width: 520px; margin: 0 auto; border-radius: 12px; }
.shot figcaption { color: var(--muted); font-size: 14.5px; text-align: center; margin-top: 12px; }
.tip {
  margin: 20px 0; padding: 4px 20px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.split-shot { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 32px; align-items: start; margin: 24px 0; }
.split-shot img { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); }
/* Help: sidebar-style settings capture is wider than the old tall General shot */
.split-shot--wide { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); align-items: center; }
.split-shot dl { margin: 0; }
.split-shot dt { font-weight: 600; margin-top: 14px; }
.split-shot dt:first-child { margin-top: 0; }
.split-shot dd { margin: 2px 0 0; color: var(--muted); font-size: 15.5px; }
.help-phones { margin: 28px 0; }

/* Help: Mac / iPhone & iPad toggle. help.js shows it and hides the other platform's panel. */
/* Mac / iPhone & iPad platform chips, set apart from the topic chips by a divider */
.platform-toggle {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 8px 0 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.platform-toggle[hidden] { display: none; }
.platform-toggle button {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: transparent; cursor: pointer; border-radius: 999px;
  padding: 12px 24px 12px 18px; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--muted);
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.platform-toggle button svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.platform-toggle button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
/* selected chip: accent tint so it reads as the active platform */
.platform-toggle button[aria-selected="true"] {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
@media (max-width: 420px) {
  .platform-toggle button { flex: 1; justify-content: center; padding: 11px 14px; font-size: 16px; }
}
.platform-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* System requirements chip at the top of each Help platform panel, above the topic chips */
.req-chip {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px;
  padding: 6px 14px 6px 10px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.req-chip svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.shot.device-shot img { max-width: 640px; margin: 0 auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 20px 26px rgba(30, 20, 10, 0.2)); }
.settings-list dt { font-weight: 600; margin-top: 14px; }
.settings-list dd { margin: 2px 0 0; color: var(--muted); }
.help-phones .phone { max-width: 220px; }

/* Help: numbered setup walkthrough, one framed screenshot per step with an accent number badge */
.doc .steps {
  list-style: none; margin: 32px 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 22px;
}
.doc .step { counter-increment: step; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; margin: 0; }
.doc .step-head {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 0 16px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
}
.doc .step-head::before {
  content: counter(step); flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 75%, transparent);
}
.step .phone { max-width: 190px; }
.doc .step p { margin: 16px 0 0; max-width: 210px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
/* Ring over what to tap. --x / --y are positions on the screenshot, mapped onto the screen's inset inside the frame */
.tap {
  position: absolute; width: 16%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  left: calc(4.456% + var(--x) * 0.91088); top: calc(2.153% + var(--y) * 0.95693); translate: -50% -50%;
  border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.tap::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent);
  animation: tap-pulse 2.2s ease-out infinite;
}
@keyframes tap-pulse { from { transform: scale(1); opacity: .85; } to { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tap::after { display: none; } }
@media (max-width: 760px) {
  .doc .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .step .phone { max-width: 170px; }
  .doc .step-head { font-size: 15px; }
}
@media (max-width: 680px) {
  .split-shot { grid-template-columns: 1fr; }
  .split-shot img { max-width: 360px; }
  .split-shot--wide img { max-width: none; width: 100%; }
}