/* =========================================================================
   Float — sketchyhorizon.com/float

   Float's section of the Sketchy Horizon site, styled per /BRAND.md. Colours
   come from the studio palette (--sh-*) and components use only the semantic
   variables below (--bg, --surface, --text, --text-muted, --border and the
   accent, link and focus roles). No hex values below the tokens.

   Backgrounds: white on every Float page, terminal in dark mode. The site
   header is shared with the studio's pages: /assets/site-header.css and .js. Dark mode follows
   prefers-color-scheme; [data-theme] on <html> overrides it, as in /pages.css.

   Contrast: coral is never text on a light background (2.8:1). Buttons are
   coral with white text in both modes (about 3:1, a deliberate exception;
   see BRAND.md). Links are terminal with a coral
   underline in light mode and coral in dark mode.

   Every screenshot is a real capture from the app (assets/screens/). The
   Float app icon appears in Float content only (hero, price card); the header
   carries the Sketchy Horizon pencil mark. The header and footer are shared
   with the studio's pages: /assets/site-header.css and /assets/site-footer.css.

   These styles are shared by index.html and by help/, which is generated by
   Tools/buildhelp.py in the Float repo. The class names that generator emits
   are styled near the bottom: help, help-nav, page-head, water, legal,
   help-pager, help-grid, help-card, aside.note and table-wrap.
   Rename one here and help/ breaks.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- palette (BRAND.md) ---- */
  --sh-coral: #FF5D52;
  --sh-coral-hover: #FF776E;
  --sh-seafoam: #7DEDCC;
  --sh-seafoam-light: #DDF8EF;
  --sh-sand: #F5EFE3;
  --sh-paper: #F7F8F5;
  --sh-terminal: #0E0F14;
  --sh-teal: #08A39E;
  --sh-cyan: #5FF0EA;
  --sh-lime: #66F075;
  --sh-lemon: #FFEE5E;
  --sh-graphite: #53565F;
  --sh-fog: #B4B6BC;
  --sh-norton: #1C24B8;
  --sh-surface-light: #FFFFFF;
  --sh-border-light: #DADCD6;
  --sh-surface-dark: #181A21;
  --sh-border-dark: #2A2D36;

  /* Hardware colours for the CSS phone frames. Not brand colours: they are
     the device itself, and stay the same in both modes. */
  --device-bezel: #141416;
  --device-band: #C4C4C9;
  --device-band-edge: #8D8D93;

  /* ---- semantic roles: components use only these ---- */
  --bg: var(--sh-surface-light);
  --surface: var(--sh-paper);
  --text: var(--sh-terminal);
  --text-muted: var(--sh-graphite);
  --border: var(--sh-border-light);

  --accent: var(--sh-coral);
  --accent-hover: color-mix(in srgb, var(--sh-coral) 88%, var(--sh-terminal));  /* darker: white text stays readable */
  --on-accent: var(--sh-surface-light);  /* white on coral: the owner's call, see BRAND.md */
  --link: var(--sh-terminal);
  --link-line: var(--sh-coral);
  --focus: var(--sh-terminal);

  --shadow-ink: var(--sh-terminal);
  /* the hero's dawn, from the screenshots' first-light sky and the icon's sea */
  --dawn-pink: rgb(235 163 177 / 0.42);
  --dawn-rose: rgb(229 157 140 / 0.30);
  --dawn-apricot: rgb(223 155 112 / 0.32);
  --dawn-sun: rgb(242 193 122 / 0.62);
  --dawn-sea: rgb(66 140 166 / 0.26);
  /* the price's sky, from the app icon: its periwinkle sky, pale sky, coral ring and teal sea */
  --icon-sky: rgb(127 157 205 / 0.34);
  --icon-pale: rgb(168 194 226 / 0.44);
  --icon-ring: rgb(255 94 65 / 0.14);
  --icon-sea: rgb(66 140 166 / 0.24);
  /* the Float icon's shadow, the studio home page's: one soft grey, no hairline */
  --icon-shadow: drop-shadow(0 12px 18px rgb(14 15 20 / 0.18));
  /* blueprint blue on white paper, the home page's: the Coming Soon tab only */
  --blueprint: #1F56D2;
  --blueprint-paper: #FFFFFF;

  --radius: 16px;
  --radius-lg: 16px;

  --gutter: 24px;
  --container: 1120px;

  --font: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif;
  --font-display: var(--font);
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-hand: "Shantell Sans", "Comic Neue", "Chalkboard SE", "Segoe Print", ui-rounded, system-ui, sans-serif;

  --shot-shadow: drop-shadow(0 24px 40px color-mix(in srgb, var(--shadow-ink) 14%, transparent))
                 drop-shadow(0 2px 6px color-mix(in srgb, var(--shadow-ink) 8%, transparent));

  /* the Mac App Store screenshot's dusk sky, continued below the menu bar crop */
  --shot-dusk-top: #B4AAA7;
  --shot-dusk-bottom: #E0B58F;

  /* sky headings: the sky of the screenshot beside each heading, top to horizon, deepened to
     7.5:1 on white the way the app deepens its own sky captions; dark mode uses the skies as they are */
  --sky-dusk-top: #7E4253;
  --sky-dusk-bottom: #824423;
  --sky-day-top: #075E66;
  --sky-day-bottom: #005C75;
  --sky-moves-top: #63532F;
  --sky-moves-bottom: #005C75;
  --sky-tide-top: #0D5E66;
  --sky-tide-bottom: #685131;
  --sky-duo-top: #734375;
  --sky-duo-bottom: #824423;
  --sky-icon-top: #3A5581;
  --sky-icon-bottom: #005C75;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--sh-terminal);
    --surface: var(--sh-surface-dark);
    --text: var(--sh-paper);
    --text-muted: var(--sh-fog);
    --border: var(--sh-border-dark);
    --link: var(--sh-coral);
    --link-line: transparent;
    --focus: var(--sh-coral);
    --shadow-ink: var(--sh-terminal);
    --dawn-pink: rgb(235 163 177 / 0.13);
    --dawn-rose: rgb(229 157 140 / 0.10);
    --dawn-apricot: rgb(223 155 112 / 0.09);
    --dawn-sun: rgb(242 193 122 / 0.12);
    --dawn-sea: rgb(66 140 166 / 0.20);
    --icon-sky: rgb(127 157 205 / 0.14);
    --icon-pale: rgb(168 194 226 / 0.08);
    --icon-ring: rgb(255 94 65 / 0.08);
    --icon-sea: rgb(66 140 166 / 0.18);
    --icon-shadow: drop-shadow(0 12px 18px rgb(0 0 0 / 0.55));
    --blueprint: #FFFFFF;
    --blueprint-paper: #1F56D2;
    --sky-dusk-top: #EBA5B6;
    --sky-dusk-bottom: #EBA482;
    --sky-day-top: #9FE8F1;
    --sky-day-bottom: #7AC3DF;
    --sky-moves-top: #C0AE87;
    --sky-moves-bottom: #7AC3DF;
    --sky-tide-top: #9EE5EE;
    --sky-tide-bottom: #D3B996;
    --sky-duo-top: #D8A2D9;
    --sky-duo-bottom: #EBA482;
    --sky-icon-top: #9AB9EA;
    --sky-icon-bottom: #7AC3DF;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--sh-terminal);
  --surface: var(--sh-surface-dark);
  --text: var(--sh-paper);
  --text-muted: var(--sh-fog);
  --border: var(--sh-border-dark);
  --link: var(--sh-coral);
  --link-line: transparent;
  --focus: var(--sh-coral);
  --dawn-pink: rgb(235 163 177 / 0.13);
  --dawn-rose: rgb(229 157 140 / 0.10);
  --dawn-apricot: rgb(223 155 112 / 0.09);
  --dawn-sun: rgb(242 193 122 / 0.12);
  --dawn-sea: rgb(66 140 166 / 0.20);
  --icon-sky: rgb(127 157 205 / 0.14);
  --icon-pale: rgb(168 194 226 / 0.08);
  --icon-ring: rgb(255 94 65 / 0.08);
  --icon-sea: rgb(66 140 166 / 0.18);
  --icon-shadow: drop-shadow(0 12px 18px rgb(0 0 0 / 0.55));
  --blueprint: #FFFFFF;
  --blueprint-paper: #1F56D2;
  --sky-dusk-top: #EBA5B6;
  --sky-dusk-bottom: #EBA482;
  --sky-day-top: #9FE8F1;
  --sky-day-bottom: #7AC3DF;
  --sky-moves-top: #C0AE87;
  --sky-moves-bottom: #7AC3DF;
  --sky-tide-top: #9EE5EE;
  --sky-tide-bottom: #D3B996;
  --sky-duo-top: #D8A2D9;
  --sky-duo-bottom: #EBA482;
  --sky-icon-top: #9AB9EA;
  --sky-icon-bottom: #7AC3DF;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img { max-width: 100%; height: auto; display: block; }
/* a <picture> only swaps in the dark-mode capture; it never changes the layout */
picture { display: contents; }
/* ...nor do its <source>s, which would otherwise be empty flex items and take a gap (the hero icon's) */
source { display: none; }

/* Links: terminal with a 2px coral underline in light mode, coral in dark.
   Components that aren't inline links (nav, buttons, cards) opt out below. */
a {
  color: var(--link);
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-weight: 600; letter-spacing: -0.02em; }

h2 {
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 { font-weight: 600; }

/* The one-pager's section headings are italic; the app name, card and feature headings, and the help, stay upright */
.pillar__text h2,
.section-head h2,
.price h2 { font-style: italic; }

/* ...and they, and the app name, are painted with the sky of the screenshot beside them, as the app paints its sky captions */
.sky-text {
  background-image: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--sky-bottom);
  /* room for the italic's last stroke, which the clip would otherwise cut */
  padding-inline-end: 0.12em;
  margin-inline-end: -0.12em;
}
.sky-text::selection { -webkit-text-fill-color: var(--on-accent); }
.sky-text--dusk  { --sky-top: var(--sky-dusk-top);  --sky-bottom: var(--sky-dusk-bottom); }
.sky-text--day   { --sky-top: var(--sky-day-top);   --sky-bottom: var(--sky-day-bottom); }
.sky-text--moves { --sky-top: var(--sky-moves-top); --sky-bottom: var(--sky-moves-bottom); }
.sky-text--tide  { --sky-top: var(--sky-tide-top);  --sky-bottom: var(--sky-tide-bottom); }
.sky-text--duo   { --sky-top: var(--sky-duo-top);   --sky-bottom: var(--sky-duo-bottom); }
.sky-text--icon  { --sky-top: var(--sky-icon-top);  --sky-bottom: var(--sky-icon-bottom); }
/* the hero's name: the life ring's coral, deepening a touch toward its foot (3:1 to 3.7:1 on white,
   for display size only) */
.sky-text--coral { --sky-top: var(--sh-coral); --sky-bottom: #E84F44; }

@media (forced-colors: active) {
  .sky-text { background-image: none; -webkit-text-fill-color: CanvasText; }
}

p { margin: 0; }

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

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lead {
  text-wrap: pretty;
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1.55;
  max-width: 34em;
}

/* ---------- buttons -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--accent-hover); color: var(--on-accent); }

.btn--quiet { background: transparent; color: var(--text); border-color: var(--text); }
.btn--quiet:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }

.btn--large { padding: 14px 26px; font-size: 17px; }

/* ---------- hero ----------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;   /* the sky sits behind the hero's content, above the page's white */
  padding: 64px 0 40px;
  overflow: hidden;
}

/* A sky of slow glows behind a section, as on the studio home page: the section is positioned and
   isolated, and each .glow drifts its own loop. Positions are shares of the section. The hero's
   is Float's first light: the pink, rose and apricot of the screenshots' dawn and their sun, with
   the icon's teal low by the table the devices stand on. */
.sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* faded out at the top and the foot, so it melts into the page with no edge where the hero ends */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, transparent);
}
.glow {
  position: absolute;
  left: calc(var(--x) - var(--s) / 2);
  top: calc(var(--y) - var(--s) / 2);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  animation: var(--path) var(--t) ease-in-out var(--d, 0s) infinite;
  will-change: transform;
}
.glow--pink    { --x: 72%; --y: 22%; --s: 900px; --c: var(--dawn-pink);    --path: dawn-a; --t: 14s; }
.glow--rose    { --x: 92%; --y: 48%; --s: 700px; --c: var(--dawn-rose);    --path: dawn-b; --t: 17s; --d: -9s; }
.glow--apricot { --x: 48%; --y: 62%; --s: 640px; --c: var(--dawn-apricot); --path: dawn-c; --t: 15s; --d: -4s; }
.glow--sun     { --x: 58%; --y: 58%; --s: 460px; --c: var(--dawn-sun);     --path: dawn-a; --t: 12s; --d: -12s; }
.glow--sea     { --x: 72%; --y: 84%; --s: 820px; --c: var(--dawn-sea);     --path: dawn-b; --t: 19s; --d: -16s; }
.glow--left    { --x: 6%;  --y: 12%; --s: 520px; --c: var(--dawn-pink);    --path: dawn-c; --t: 18s; --d: -20s; }
/* Plasma: each glow wanders a wide loop and stretches into an ellipse that turns as it goes, so
   the colours fold into one another. Scaled after the turn, the stretch turns with it. */
@keyframes dawn-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  25% { transform: translate(150px, -90px) rotate(40deg) scale(1.3, 0.8); }
  50% { transform: translate(40px, 80px) rotate(95deg) scale(0.85, 1.2); }
  75% { transform: translate(-140px, 20px) rotate(150deg) scale(1.2, 0.9); }
}
@keyframes dawn-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1.05, 0.95); }
  20% { transform: translate(-130px, 50px) rotate(-35deg) scale(0.8, 1.25); }
  55% { transform: translate(90px, 120px) rotate(-90deg) scale(1.3, 0.85); }
  80% { transform: translate(120px, -60px) rotate(-140deg) scale(0.9, 1.1); }
}
@keyframes dawn-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1.1); }
  30% { transform: translate(170px, -80px) rotate(60deg) scale(1.25, 0.8); }
  60% { transform: translate(30px, 110px) rotate(110deg) scale(0.85, 1.3); }
  85% { transform: translate(-110px, -40px) rotate(160deg) scale(1.15, 0.9); }
}

/* Copy on the left, the devices on the right, so the screenshots are seen first. The badges'
   foot lines up with the table the devices stand on: both sit at the foot of the row, and the
   copy is lifted by the reflections' height, 13% of the devices' width, which is 108% of the
   second column. A size container, so that column's width can be worked out in cqi. */
.hero__inner {
  --hero-gap: 40px;
  --hero-reflection: calc((100cqi - var(--hero-gap)) * 7.7 / 12 * 1.08 * 0.13);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr);  /* room for both badges on a row */
  gap: var(--hero-gap);
  align-items: end;
}

.hero__copy {
  text-align: left;
  /* Indented so the Float icon, the sun disk's width, stands centred under the header's sun:
     the mark is 144px wide (80px × 1.8) and its disk 94px, centred in it. */
  padding-left: calc((144px - 94px) / 2);
  margin-bottom: var(--hero-reflection);
}

/* The app icon beside its name, on the left edge the header's mark stands on, so the Float icon
   sits under the studio's sun. Centred again once the hero is one column (below). */
.hero__name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

/* The Float app icon belongs to Float's content, so it opens the hero. */
.hero__icon {
  width: 94px;
  height: 94px;
  margin: 0;
  filter: var(--icon-shadow);
  transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1);
}
/* As the app icons on the studio home page: it lifts and tips a little while you hover the name. */
.hero__name:hover .hero__icon { transform: translateY(-5px) rotate(-1.5deg); }

.hero__title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero__lead {
  margin: 22px 0 0;
  max-width: 22em;
  text-wrap: balance;
  color: var(--text-muted);
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.4;
}

.hero__lead span { display: inline-block; text-wrap: balance; }   /* break between the sentences first */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

/* The store badges are the hero's call to action: both stores carry the free month. */
/* Badges on the left edge, then the trial line centred under them. */
.hero__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 34px 0 0;
  text-align: center;
}

.hero .store-badges--hero { margin: 0; justify-content: flex-start; }
.store-badges--hero .app-store-badge img { height: 48px; }

/* Hung under the badges, out of the flow, so the badges' foot is the copy's foot and meets the
   table. */
.hero__fineprint {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  text-wrap: balance;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 14px;
}

/* The film sits under the devices, in the table's reflection, so the copy beside them is only
   the name, the line and the badges. The devices run 8% past their column, so it is centred
   under them, not the column, and pulled up past the row gap into the middle of the reflection
   (from the top of its row: the row aligns to its foot, which would undo the pull). Stacked
   above the devices, whose figure would otherwise cover it and take its clicks. */
.hero__more {
  grid-column: 2;
  align-self: start;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: calc(-1 * var(--hero-gap) - 0.42 * var(--hero-reflection)) -8% 0 0;
  font-size: 20px;
  font-weight: 600;
}

/* Watch a quick tour: a quiet text button with a small coral play disc. */
.hero__film {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: inherit;
  cursor: pointer;
}

.hero__film svg {
  width: 34px;
  height: 34px;
  transition: transform .2s ease;
}
.hero__film-disc { fill: var(--accent); }
.hero__film-play { fill: var(--on-accent); }

/* Newsreader's caps sit high in the line box, so the words drop a touch to centre on the play triangle. */
.hero__film-label { position: relative; top: 2px; }

.hero__film:hover svg { transform: scale(1.1); }
/* On hover the words take the site's link underline, coral, 2px, offset 3px, in both modes:
   dark mode's links drop theirs, but the button has no other hover cue for its words. */
.hero__film:hover .hero__film-label {
  text-decoration: underline 2px var(--sh-coral);
  text-underline-offset: 3px;
}

/* The devices open the film too: hovering them lights up the button's own cue,
   so it is clear what the click does. */
.devices[data-film-open] { cursor: pointer; }
.hero__inner:has(.devices:hover) .hero__film svg { transform: scale(1.1); }
.hero__inner:has(.devices:hover) .hero__film-label {
  text-decoration: underline 2px var(--sh-coral);
  text-underline-offset: 3px;
}

/* The three devices standing on a table: the iPhone at the left, the Mac window
   behind in the middle, iPhone Duo opened flat at the right. Every position is a
   percentage of the stage's width, so the composition scales as one piece. All
   three stand on the stage's bottom edge, which is the table's edge. */
/* About a quarter bigger than an even split: a wider column, and it runs a
   little past the container into the page margin on the right. */
.devices {
  position: relative;
  width: 108%;
  margin: 0;
}

.devices__stage {
  position: relative;
  aspect-ratio: 100 / 62;
  margin-bottom: 13%;            /* room for the reflections, as a share of the width */
}

/* The table: a soft surface under the edge, a hairline at the edge itself, and a
   contact shadow under each device. Faded out at both ends. */
.devices__stage::before {
  --t22: color-mix(in srgb, var(--shadow-ink) 22%, transparent);
  --t14: color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  --t10: color-mix(in srgb, var(--shadow-ink) 10%, transparent);
  --t05: color-mix(in srgb, var(--shadow-ink) 4.5%, transparent);
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: 100%;
  height: 22%;
  background:
    radial-gradient(ellipse 9.2% 9% at 23.2% 0%, var(--t22), transparent 100%),
    radial-gradient(ellipse 14.7% 9% at 43.3% 0%, var(--t14), transparent 100%),
    radial-gradient(ellipse 20.2% 9% at 68.1% 0%, var(--t22), transparent 100%),
    linear-gradient(to bottom, var(--t10) 0, var(--t10) 1px, var(--t05) 1px, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
          mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent);
  pointer-events: none;
}

.device {
  position: absolute;
  bottom: 0;
}

/* The two phones at their true sizes to each other, both shot at 3x: the Duo's open display is
   951pt wide to the iPhone 17 Pro Max's 440pt (2.16×), and 669pt tall to its 956pt. */
.device--mac    { z-index: 1; width: 35%; left: 25%; }
.device--iphone { z-index: 3; width: 22%; left: 9%; }
.device--duo    { z-index: 2; width: 46.8%; left: 47%; }

.device--mac img { width: 100%; }

/* On the table, the devices drop their floating shadow and reflect instead.
   Each reflection shows roughly the same depth of table, whatever the height
   of the device above it. Browsers without box-reflect simply show no reflection. */
.devices .phone,
.device--mac img { filter: none; }

.device--mac    { -webkit-box-reflect: below 0 linear-gradient(transparent 80%, rgb(0 0 0 / 0.16)); }
.device--iphone { -webkit-box-reflect: below 0 linear-gradient(transparent 76%, rgb(0 0 0 / 0.16)); }
.device--duo    { -webkit-box-reflect: below 0 linear-gradient(transparent 62%, rgb(0 0 0 / 0.16)); }

/* ---------- phone frames --------------------------------------------- */
/* A thin black bezel and a metal band around the real screenshot, in iPhone 17
   proportions: about 2.4% of the width each side. The bezel is the screenshot's
   margin, not the frame's padding: a percentage padding is measured against the
   frame's parent, so it grew wherever the phone sat in a wider column, while the
   image's margin is measured against the phone itself. Radii are percentages of
   each box, so a frame looks the same at any size. iPhone screen: 402×874pt. */
.phone {
  --bezel: 2.4%;
  display: flow-root;   /* keeps the screenshot's margins inside the frame instead of collapsing through it */
  position: relative;
  background: var(--device-bezel);
  border-radius: 15.9% / 7.56%;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 0 1.5px var(--device-band),
    0 0 0 2.5px var(--device-band-edge);
  filter: var(--shot-shadow);
}

.phone img {
  display: block;
  width: calc(100% - 2 * var(--bezel));
  margin: var(--bezel);
  border-radius: 14.2% / 6.5%;
}

/* iPhone Duo opened flat: the 951×669pt inner display, landscape. */
.phone--duo-open {
  --bezel: 1.8%;
  border-radius: 8.6% / 12.2%;
}

.phone--duo-open img { border-radius: 7% / 10%; }

/* the fold, faintly, down the middle of the inner display */
.phone--duo-open::after {
  content: "";
  position: absolute;
  top: 3.1%;
  bottom: 3.1%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.12) 12%, rgb(255 255 255 / 0.12) 88%, transparent);
  box-shadow: 1px 0 0 rgb(0 0 0 / 0.08);
  pointer-events: none;
}

/* ---------- the three ideas ----------------------------------------- */
.pillar { padding: 83px 0; }

.pillar__inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  gap: 88px;
}

.pillar--flip .pillar__shot { order: 2; }

.pillar__shot {
  margin: 0;
  display: flex;
  justify-content: center;
}

.pillar__phone {
  width: 100%;
  max-width: 330px;
}

.points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 32em;
}

.points li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
}

.points__icon,
.basics svg {
  width: 26px;
  height: 26px;
  fill: currentColor;   /* the app's glyphs are filled shapes */
}

.points__icon { margin-top: 1px; color: var(--text); }
.points__icon--coral { color: var(--accent); }   /* the app's life ring: an icon, never text */

.points p { color: var(--text-muted); }
.points strong { color: var(--text); font-weight: 600; }

.pull {
  margin: 34px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
}

/* ---------- bands and section heads --------------------------------- */
.band {
  padding: 90px 0;
}

/* The price card's sky, in the app icon's colours: periwinkle and pale sky above, the ring's coral
   and the sea's teal below, drifting in the white around the card. */
.band--price { position: relative; isolation: isolate; overflow: hidden; }
.glow--icon-sky  { --x: 22%; --y: 26%; --s: 760px; --c: var(--icon-sky);  --path: dawn-a; --t: 15s; }
.glow--icon-pale { --x: 80%; --y: 20%; --s: 720px; --c: var(--icon-pale); --path: dawn-b; --t: 18s; --d: -8s; }
.glow--icon-ring { --x: 30%; --y: 76%; --s: 560px; --c: var(--icon-ring); --path: dawn-c; --t: 13s; --d: -5s; }
.glow--icon-sea  { --x: 76%; --y: 82%; --s: 760px; --c: var(--icon-sea);  --path: dawn-a; --t: 19s; --d: -15s; }
.glow--icon-low  { --x: 50%; --y: 98%; --s: 620px; --c: var(--icon-pale); --path: dawn-b; --t: 16s; --d: -19s; }

.section {
  padding: 90px 0 77px;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head .lead { margin-inline: auto; }

/* ---------- Mac and iPhone cards ------------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* the screenshot well: the page colour */
.card__media {
  position: relative;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* the top of a phone: sky, rainbow and boat; the rest runs off the card */
.card__media--sky { align-items: flex-start; }
.card__media--sky .phone {
  width: 236px;
  margin-top: 30px;
}

.card__media--widget img {
  width: 76%;
  max-width: 280px;
  border-radius: 8% / 7.7%;      /* the widget's own corner, plus the even margin around it */
  filter: var(--shot-shadow);
}

/* the top-right corner of the Mac: menu bar, clock and Float's menu, then
   the quick capture box under it at its real size next to the menu */
.card__media--menubar {
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(var(--shot-dusk-top), var(--shot-dusk-bottom));
}
.card__media--menubar .card__sky {
  width: 100%;
  -webkit-mask-image: linear-gradient(#000 85%, transparent);
          mask-image: linear-gradient(#000 85%, transparent);
}
.card__media--menubar .card__capture {
  width: min(96%, 380px);   /* the panel's own macOS shadow is in the capture */
  margin: auto 0;           /* centred in the sky left under the menu */
}

.card__body { padding: 28px 28px 32px; }

.card h3 {
  font-size: 22px;
  line-height: 1.25;
}

.card__body p {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 16px;
}

.card__body .card__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

/* ---------- the basics ---------------------------------------------- */
.basics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 36px;
}

.basics__item {
  padding: 0 0 32px;
}

/* Each item's own short pencil line along its top, in place of a border: the horizon's own
   stroke, drawn by /assets/sketch-rule.js, centred where the border was, with the item's old
   26px above the icon. */
.basics .rule {
  display: block;
  width: 100%;
  height: 10px;
  margin: -5px 0 21px;
  fill: var(--border);
  opacity: 0.55;  /* lighter than a border: a pencil line, barely there */
}


.basics svg { color: var(--text); }

.basics h3 {
  margin: 14px 0 6px;
  font-size: 22px;
  line-height: 1.25;
}

.basics p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 30em;
}

/* ---------- price ---------------------------------------------------- */
.price {
  max-width: 660px;
  margin: 0 auto;
  padding: 60px 44px 48px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.price__mark {
  width: 72px;
  height: 72px;
  margin: 0 auto 26px;
  display: block;
  filter: var(--icon-shadow);
}

.price h2 { font-size: clamp(32px, 3.6vw, 40px); }

/* the card's promise under the badges, as the hero's fine print sits under its own */
.price .store-badges { margin-bottom: 16px; }
.price__fineprint {
  color: var(--text-muted);
  font-size: 14px;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 24px;
}

.app-store-badge { text-decoration: none; }
.app-store-badge img { height: 44px; width: auto; }

/* Not on the stores yet: the badges sit under the home page's sketched Coming Soon tab, in the
   blueprint's colours, and lead nowhere. At launch, drop the tab and the class and give the
   badges their hrefs back. */
.store-badges--soon { position: relative; }
.store-badges--soon .app-store-badge { cursor: default; }
.price .store-badges--soon { margin-top: 44px; }   /* room for the tab under the heading */
.store-badges--soon .tab {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  /* pinned just above the badges, its foot over their top edge, never across Apple's words */
  transform: translate(-50%, calc(-100% + 6px)) rotate(var(--tilt, -3deg));
  padding: 6px 10px 7px;
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--blueprint);
  isolation: isolate;
}
.tab .sk {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tab .sk-fill { fill: var(--blueprint-paper); }
.tab .sk-ink { fill: var(--blueprint); }

/* =========================================================================
   Pages: the generated help/
   ========================================================================= */
.page-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px var(--gutter) 12px;
}

.page-head__title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.water { background: var(--bg); }

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px var(--gutter) 104px;
  color: var(--text);
  font-size: 19px;
  line-height: 1.55;
}

.legal__intro {
  margin-bottom: 40px;
  color: var(--text);
  font-size: 21px;
  line-height: 1.5;
}

.legal__section { margin-top: 48px; }
.legal__section:first-of-type { margin-top: 0; }

.legal__section h2 {
  margin: 0 0 14px;
  font-size: 32px;
  line-height: 1.2;
}

.legal__section h3 {
  margin: 28px 0 8px;
  font-size: 22px;
  line-height: 1.3;
}

.legal__section p,
.legal__section ul,
.legal__section ol { margin: 0 0 14px; }

.legal__section ul,
.legal__section ol { padding-left: 1.3em; }

.legal__section li { margin: 6px 0; }
.legal__section li::marker { color: var(--text-muted); }

.legal strong { color: var(--text); font-weight: 600; }

.legal a:hover { text-decoration-color: var(--text); }

.legal code {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Help's asides. The home page no longer has a .note of its own. */
.note {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.note p { margin: 0; }
.note p + p { margin-top: 10px; }

.table-wrap {
  margin: 20px 0;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.5;
}

.table-wrap th,
.table-wrap td {
  padding: 11px 16px;
  text-align: left;
  vertical-align: top;
}

.table-wrap th {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.table-wrap td { border-top: 1px solid var(--border); }

/* Help: the site's width, topics down the left, the article at a reading measure. */
.help__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0 64px;
  align-items: start;
}

.help .page-head { max-width: none; margin: 0; padding: 72px 0 12px; }
.help .water { background: none; }
.help .legal { max-width: 42em; margin: 0; padding: 20px 0 104px; }
/* The help index: the topic cards take the whole column beside the topics list. */
.help--index .legal { max-width: none; }
.help--index .legal__intro { max-width: 42em; }
.help--index .help-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 64px; }
.help--index .legal__section { max-width: 42em; }

.help-nav {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 84px 0 24px;
}

.help-nav__home {
  display: block;
  margin-bottom: 14px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.help-nav__home:hover,
.help-nav__home[aria-current="page"] { color: var(--text); }

.help-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.help-nav ol a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.35;
  text-decoration: none;
}

.help-nav ol a:hover { color: var(--text); border-left-color: var(--text-muted); }
.help-nav ol a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--accent);
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 8px 0 0;
}

.legal a.help-card {
  display: block;
  padding: 22px 22px 24px;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s ease;
}

.legal a.help-card:hover { border-color: var(--accent); color: var(--text); }

.help-card h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
}

.help-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.5;
}

.help-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.legal .help-pager a { font-weight: 600; }
.help-pager__next { margin-left: auto; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1040px) {
  .pillar__inner { gap: 56px; }
  .cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .basics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero__copy { text-align: center; padding-left: 0; margin-bottom: 0; }
  .hero__fineprint { position: static; }
  .hero__name { justify-content: center; }
  .hero__lead { margin-inline: auto; }
  .hero__cta { align-items: center; margin-inline: auto; text-align: center; }
  .hero .store-badges--hero { justify-content: center; }
  .hero__more { grid-column: auto; margin: calc(-48px - 0.42 * 13%) 0 0; }   /* up into the reflections, as on wide screens */
  .devices { width: 100%; }
}

@media (max-width: 860px) {
  .help__layout { grid-template-columns: minmax(0, 1fr); }
  .help .page-head { padding-top: 40px; }
  .help .legal { padding-bottom: 48px; }
  .help-nav {
    position: static;
    max-height: none;
    order: 2;
    padding: 32px 0 64px;
    border-top: 1px solid var(--border);
  }
  .pillar { padding: 64px 0; }
  .pillar__inner { grid-template-columns: 1fr; gap: 48px; }
  .pillar__text { order: 1; }
  .pillar__shot,
  .pillar--flip .pillar__shot { order: 2; }
  .pillar__phone { max-width: 290px; }
  .band, .section { padding: 70px 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .hero { padding-top: 40px; }
  .hero__icon { width: 64px; height: 64px; }
  .hero__name { gap: 14px; }

  /* the same composition, a little wider than the screen so it reads at
     phone size; .hero clips the overhang. A smaller row gap and no margin
     over it: the stage's empty top already reads as space under the copy,
     so the film sits higher up the screen */
  .hero__inner { gap: 24px; }
  .devices {
    width: 116%;
    max-width: none;
    margin: 0 0 0 -8%;
  }
  .hero__more { margin-top: calc(-24px - 0.42 * 15%); }
  .legal__section h2 { font-size: 28px; }
}

@media (max-width: 640px) {
  .hero__actions .btn { width: 100%; }
  .basics { grid-template-columns: 1fr; }
  /* One column: the icon sits beside its heading, like the points above, rather than over it. */
  .basics__item {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 14px;
    padding-bottom: 28px;
  }
  .basics .rule { grid-column: 1 / -1; }
  .basics__item > svg:not(.rule) { grid-row: 2 / 4; margin-top: 1px; }
  .basics__item > h3 { grid-column: 2; margin-top: 0; }
  .basics__item > p { grid-column: 2; }
  .card__media { height: 280px; }
  .price { padding: 44px 22px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .glow { animation: none; }
  .hero__name:hover .hero__icon { transform: none; }
}

/* ---------- the film ------------------------------------------------ */
/* Opened from the hero. No device frame, so the push-in at the end opens
   onto the whole card. As tall as the screen allows, on a dark backdrop, with the close button
   above its top-right corner. The dialog is sized from the film, not fit-content: iOS Safari
   stretched it to the screen's width and left the film at its left edge. */
.film-dialog {
  --film-h: min(calc(88svh - 52px), calc((100vw - 32px) * 16 / 9));
  width: calc(var(--film-h) * 9 / 16);
  height: fit-content;
  margin: auto;
  max-width: none;
  max-height: none;
  padding: 52px 0 0;   /* room for the close button */
  translate: 0 -4svh;   /* centred together, the film read low; this lifts it above the middle */
  border: 0;
  background: none;
  overflow: visible;
}

.film-dialog::backdrop { background: rgb(14 15 20 / 0.86); }

.film {
  position: relative;
  width: 100%;
  height: var(--film-h);
  border-radius: 20px;
  overflow: hidden;
  background: var(--sh-terminal);
}

.film__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Over Apple's badge drawn into the last frame (the final cut: 390,1660
   to 690,1760 of 1080x1920). Re-measure if the end card moves. */
.film__store {
  position: absolute;
  left: 36.1%;
  top: 86.5%;
  width: 27.7%;
  height: 5.2%;
  border-radius: 8px;
}

.film__again {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgb(14 15 20 / 0.55);
  color: var(--sh-paper);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.film__again:hover { background: rgb(14 15 20 / 0.75); }
.film [hidden] { display: none; }

/* Above the film, flush with its right edge: never over the video's own controls. */
.film-dialog__close {
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgb(247 248 245 / 0.14);
  color: var(--sh-paper);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

/* Newsreader's caps sit high in the line box, so the word drops a touch to centre on the X. */
.film-dialog__close-label { position: relative; top: 2px; }

.film-dialog__close:hover { background: rgb(247 248 245 / 0.26); }
.film-dialog__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.film-dialog :focus-visible { outline-color: var(--sh-paper); }