/* Laundry Lens website. Light and dark sections like the App Store screenshots: Scan, Wardrobe and
   Symbols on dark, Basket and Garment on light, over the same soft grays. In Dark Mode the light
   sections turn dark too (MARK: Dark Mode), and the dark ones stay as they are.
   Colors are iOS's, from the HIG's Color specifications (light, dark and Increased Contrast): the
   system grays and system colors. Where a default value is too faint for text (systemBlue and
   systemGray on white are about 3.5:1, under WCAG's 4.5:1), the HIG's Increased Contrast value is
   used instead. */

:root {
  --gray-6: #f2f2f7; /* systemGray6 */
  --gray-5: #e5e5ea; /* systemGray5 */
  --ink: #000000;
  --ink-2: #6c6c70; /* systemGray, Increased Contrast */
  --night: #000000;
  --night-2: #1c1c1e; /* systemGray6, dark */
  --paper: #ffffff;
  /* Text and backgrounds drawn on --ink, like the primary button. */
  --on-ink: #ffffff;
  --ink-hover: #000000;
  --nav: rgb(242 242 247 / 0.72);
  --hairline: rgb(0 0 0 / 0.08);
  --accent: #1e6ef4; /* systemBlue, Increased Contrast */
  /* The blue behind white text, in both appearances: the darkest systemBlue. */
  --accent-fill: #1e6ef4;
  /* The blue on dark: focus rings, and the tiles' icons. */
  --accent-bright: #0091ff; /* systemBlue, dark */
  /* The care label groups' colors, iOS's system colors, as in the app's symbols and Basket:
     cyan, green, yellow, pink and purple. */
  --washing: #00c0e8;
  --bleaching: #34c759;
  --drying: #ffcc00;
  --ironing: #ff2d55;
  --professional: #cb30e0;
  /* The holographic foil, until holographic.js computes it from the pointer's lean. */
  --foil: linear-gradient(161deg, #d9c9f5, #bcd0fb, #c4ecf2, #e9f3d6);
  --foil-sheet: var(--foil);
  --radius-l: 30px;
  --gutter: max(20px, env(safe-area-inset-left));
  --max: 1100px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  color: var(--ink);
  background: var(--gray-6);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

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

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

h1, h2, h3 { margin: 0; letter-spacing: -0.015em; line-height: 1.07; font-weight: 700; }
h1 { font-size: clamp(44px, 8vw, 96px); }
h2 { font-size: clamp(38px, 6vw, 72px); }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.light { font-weight: 400; }
sup { font-size: 0.55em; line-height: 0; }
sup a { color: inherit; padding: 0 2px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: var(--on-ink);
}
.skip-link:focus { top: 12px; }

.eyebrow {
  margin: 0 0 12px;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2);
}

/* MARK: Buttons */

.button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 12px 22px;
  border-radius: 980px;
  font-size: 17px; font-weight: 500;
}
.button:hover { text-decoration: none; }
.button-primary { background: var(--ink); color: var(--on-ink); transition: transform .2s ease, background .2s ease; }
.button-primary:hover { background: var(--ink-hover); transform: scale(1.03); }

/* MARK: Navigation */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex; align-items: center; gap: 24px;
  max-width: var(--max); height: 52px; margin: 0 auto; padding: 0 var(--gutter);
}
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 17px; }
.nav-brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 14px; }
.nav-links a { color: var(--ink); opacity: .8; }
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav-cta {
  padding: 6px 14px; border-radius: 980px;
  background: var(--accent-fill); color: #fff; font-size: 14px; font-weight: 500;
}
.nav-cta:hover { text-decoration: none; }

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}

/* MARK: Devices
   Apple's own bezels, the ones ScreenshotCanvas frames the App Store screenshots with
   (assets/bezels/), drawn over the unframed screens. Each screen fills its bezel's opening and is
   clipped to its exact shape (assets/bezels/*-mask.png, traced from the
   bezel's transparent screen area), so no corner shows past the frame. */

.device {
  position: relative;
  max-width: 100%;
  --bezel: url(assets/bezels/iphone-black.webp);
}
/* The shadow: a blurred box-shadow cast by a rounded box well inside the device, never a drop-shadow
   filter, which Safari clips to hard wedges at the corners of devices that are tilted or scaled. */
.device::before {
  content: ""; position: absolute; inset: 6%; z-index: 0; pointer-events: none;
  border-radius: 12%;
  box-shadow: var(--device-shadow, 0 24px 40px 8px rgb(0 0 0 / 0.24));
}
.device::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--bezel) center / 100% 100% no-repeat;
}
.device img {
  position: absolute; z-index: 1;
  left: var(--screen-left); top: var(--screen-top); width: var(--screen-width); height: var(--screen-height);
  object-fit: cover;
  -webkit-mask: var(--screen-mask) center / 100% 100% no-repeat;
  mask: var(--screen-mask) center / 100% 100% no-repeat;
}
/* iPhone 18 Pro Max. */
.iphone { aspect-ratio: 1470 / 3000; --screen-mask: url(assets/bezels/iphone-mask.png); --screen-left: 5.009%; --screen-top: 2.182%; --screen-width: 89.981%; --screen-height: 95.636%; }
.iphone.silver { --bezel: url(assets/bezels/iphone-silver.webp); }
.iphone.glacier { --bezel: url(assets/bezels/iphone-glacier.webp); }
.iphone.burgundy { --bezel: url(assets/bezels/iphone-burgundy.webp); }
/* iPhone Duo, open, open turned, and closed; the cover screen is square on the hinge side and round on the other. */
.duo-portrait { aspect-ratio: 2247 / 3093; --bezel: url(assets/bezels/duo-portrait.webp); --screen-mask: url(assets/bezels/duo-portrait-mask.png); --screen-left: 5.257%; --screen-top: 3.818%; --screen-width: 89.487%; --screen-height: 92.364%; }
.duo-landscape { aspect-ratio: 3093 / 2247; --bezel: url(assets/bezels/duo-landscape.webp); --screen-mask: url(assets/bezels/duo-landscape-mask.png); --screen-left: 3.85%; --screen-top: 5.299%; --screen-width: 92.3%; --screen-height: 89.401%; }
.duo-outer { aspect-ratio: 1574 / 2194; --bezel: url(assets/bezels/duo-outer.webp); --screen-mask: url(assets/bezels/duo-outer-mask.png); --screen-left: 5.577%; --screen-top: 3.636%; --screen-width: 88.847%; --screen-height: 92.727%; }
/* iPad Pro 13-inch (M5). */
.ipad-landscape { aspect-ratio: 3000 / 2300; --bezel: url(assets/bezels/ipad.webp); --screen-mask: url(assets/bezels/ipad-mask.png); --screen-left: 4.1%; --screen-top: 5.088%; --screen-width: 91.8%; --screen-height: 89.824%; }

/* MARK: Hero */

.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(40px, 7vh, 90px) var(--gutter) 0;
  overflow: hidden;
  background: var(--paper);
  text-align: center;
}
.hero-copy { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.hero-icon {
  width: clamp(88px, 11vw, 120px); height: auto; margin: 0 auto 22px;
  border-radius: 22.5%;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.35);
}
.intro { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
.intro-line { font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.intro-name { font-size: clamp(40px, 6vw, 64px); }
/* The 3: the canvas draws it glowing; the plain numeral stays for VoiceOver and as the fallback. */
.thermal { position: relative; display: grid; place-items: center; width: clamp(230px, 30vw, 340px); aspect-ratio: 1; margin-top: -4%; margin-bottom: -2%; }
.thermal canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.thermal-fallback {
  font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  font-weight: 900; font-size: calc(clamp(230px, 30vw, 340px) / 1.12); line-height: 1;
  background: linear-gradient(160deg, #d7a8ef, #8fd3f2 35%, #8fe3a6 55%, #ffe27f 75%, #ff96aa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.thermal.is-live .thermal-fallback {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.hero-lede { max-width: 640px; margin: 0 auto 28px; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.38; color: var(--ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; }
.hero-note { margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }

/* The wall of screens, tilted like the promotional image, its columns drifting apart as the page
   scrolls (--wall-progress, set by main.js). */
.wall {
  position: relative;
  height: clamp(420px, 62vh, 760px);
  margin: clamp(10px, 3vh, 30px) calc(var(--gutter) * -1) 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 85%, transparent 100%);
  --wall-progress: 0;
}
.wall-grid {
  position: absolute; left: 50%; top: 50%;
  display: flex; gap: var(--wall-gap); align-items: flex-start;
  width: max-content;
  transform: translate(-50%, -42%) rotate(-20deg);
}
/* Each device keeps its real size next to the others, from its bezel's size in Canvas.swift (the
   bezels share one scale): an iPhone 18 Pro Max is 1470 wide, a closed iPhone Duo 1574 and an open
   one 2247, so open Duos get wide columns of their own. */
.wall-grid { --iphone-width: clamp(150px, 17vw, 240px); --wall-gap: clamp(18px, 2.4vw, 34px); }
.wall-col {
  display: flex; flex-direction: column; align-items: center; gap: var(--wall-gap);
  width: var(--iphone-width);
  transform: translate3d(0, calc(var(--wall-progress) * var(--speed, 1) * -160px), 0);
  will-change: transform;
}
.wall-col:nth-child(even) { margin-top: clamp(80px, 10vw, 160px); }
/* The seven middle columns reach past the edges up to about 1800 px wide; wider, two more at each end
   keep the wall from showing its corners. */
.wall-col.extra { display: none; }
@media (min-width: 1800px) { .wall-col.extra { display: flex; } }
/* Their first device sits above the others' tops, an iPhone or an open Duo being about 2.17 phones
   wide tall. */
.wall-col.lead { margin-top: calc(var(--iphone-width) * -2.17 - var(--wall-gap)); }
.wall-col.lead:nth-child(even) { margin-top: calc(clamp(80px, 10vw, 160px) - var(--iphone-width) * 2.17 - var(--wall-gap)); }
.wall-col .device { --device-shadow: 0 18px 34px 6px rgb(0 0 0 / 0.2); flex: none; max-width: none; }
.wall-col.wide { width: calc(var(--iphone-width) * 2247 / 1470); }
.wall-col .iphone { width: var(--iphone-width); }
.wall-col .duo-outer { width: calc(var(--iphone-width) * 1574 / 1470); }
.wall-col .duo-portrait { width: calc(var(--iphone-width) * 2247 / 1470); }

/* MARK: Story */

.story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(24px, 5vw, 80px);
  /* Text and phone side by side in the middle of wide screens, not at the window's far edges. */
  padding: 0 max(var(--gutter), (100% - 1160px) / 2);
  overflow: clip;
  color: #fff;
  background: var(--night);
  transition: background-color .8s ease, color .8s ease;
}
.story[data-scheme="light"] { background: var(--gray-5); color: var(--ink); }
.story-stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.story-steps { grid-column: 1; grid-row: 1; max-width: 520px; justify-self: end; width: 100%; }

.story-phone { position: relative; width: min(330px, 34vh); }
.story-phone .device { transform: scale(var(--story-scale, 1)); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.story-phone .device img,
.story-glow img {
  opacity: 0;
  transition: opacity .7s ease;
}
.story-glow img { position: absolute; inset: 0; }
.story-phone .device img.is-active,
.story-glow img.is-active { opacity: 1; }
/* The screen's own colors, glowing around the phone like the screenshots' backlight. */
.story-glow { position: absolute; inset: -6% -14%; filter: blur(60px) saturate(1.4); opacity: .55; transition: opacity .6s ease; }
/* Until the wall's phone lands on it (main.js), the story's phone and its glow wait hidden. */
.story.is-awaiting-phone .story-phone .device { visibility: hidden; }
.story.is-awaiting-phone .story-glow { opacity: 0; }
.handoff { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.story-glow img { width: 100%; height: 100%; object-fit: cover; }

.step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 15vh 0; }
.step-kicker { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: 0; opacity: .6; }
.step h2 { margin-bottom: 24px; font-size: clamp(38px, 4.6vw, 64px); }
.step p { margin: 0 0 14px; font-size: clamp(19px, 1.7vw, 21px); line-height: 1.42; }
.step p.step-detail { font-size: 17px; opacity: .7; }
.step-phone { display: none; }
/* A scan's symbols, as the app shows them: each in a rounded square of its group's color. */
.care-list { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 6px 0 22px; padding: 0; list-style: none; font-size: 15px; font-weight: 500; }
.care-list li { display: flex; align-items: center; gap: 8px; }
.chip {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  background: color-mix(in srgb, var(--group) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--group) 40%, transparent);
}
.chip-symbol {
  width: 26px; height: 26px; background: var(--group);
  -webkit-mask: var(--symbol) center / contain no-repeat; mask: var(--symbol) center / contain no-repeat;
}
.story a { color: inherit; }

@media (max-width: 820px) {
  .story { display: block; padding-bottom: 60px; }
  .story-stage { display: none; }
  .story-steps { max-width: 560px; margin: 0 auto; }
  .step { min-height: 0; padding: 80px 0 0; text-align: center; }
  .step-phone { display: block; width: min(280px, 72vw); margin: 36px auto 0; }
  .care-list { justify-content: center; }
  .step[data-scheme="light"] { position: relative; }
  .story[data-scheme="light"] { background: var(--night); color: #fff; }
}

/* On wide screens the phone in the stage shows each screen, so the steps' own phones are only for
   VoiceOver: hidden from view, but still read with their descriptions. */
@media (min-width: 821px) {
  .step-phone {
    display: block;
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* MARK: Showcases */

.showcase { padding: clamp(90px, 14vh, 160px) var(--gutter); text-align: center; overflow: hidden; }
.showcase.duo { background: var(--paper); }
.showcase.ipad { background: var(--gray-6); }
.section-copy { max-width: 760px; margin: 0 auto clamp(40px, 7vh, 80px); text-align: center; }
.section-copy h2 { margin-bottom: 22px; }
.section-copy p:not(.eyebrow) { margin: 0 auto; max-width: 640px; font-size: clamp(19px, 2vw, 22px); line-height: 1.4; color: var(--ink-2); }

/* Grows from 80% to full size while it scrolls into view (--zoom, from main.js). */
.zoom { --zoom: 1; max-width: 1000px; margin: 0 auto; }
.zoom .device {
  transform: scale(calc(0.8 + 0.2 * var(--zoom))) translate3d(0, calc((1 - var(--zoom)) * 60px), 0);
  transform-origin: 50% 100%;
  will-change: transform;
}

/* As wide as the device above, so the first column starts at its edge: the bezel's frame is 96% of
   its image's width (.zoom, at most 1000 px). */
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
  width: 96%; max-width: 960px; margin: clamp(50px, 8vh, 90px) auto 0; padding: 0;
  list-style: none; text-align: left;
  font-size: 19px; line-height: 1.4; color: var(--ink-2);
}
.facts strong { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; text-align: center; } }

/* MARK: Everything */

.everything { padding: clamp(90px, 14vh, 160px) var(--gutter); background: var(--night); color: #fff; }
.everything .eyebrow, .everything .section-copy p:not(.eyebrow) { color: #8e8e93; }
.tiles {
  /* Every tile the same size: as wide as a column, as tall as the tallest. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px;
  max-width: var(--max); margin: 0 auto; padding: 0; list-style: none;
}
.tile {
  padding: 30px;
  border-radius: var(--radius-l);
  background: var(--night-2);
  color: #8e8e93;
}
.tile h3 { margin: 18px 0 8px; color: #fff; }
.tile p { margin: 0; }
.tile a { color: inherit; }
.tile-icon { display: block; width: 44px; height: 44px; color: var(--accent-bright); }
.tile-icon svg { width: 100%; height: 100%; }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

/* MARK: Plus
   Like the store in the app: always dark, the foil for the hanger, the symbols around it, the
   name and the tiles' symbols. */

.plus { padding: 0 var(--gutter) clamp(90px, 14vh, 150px); background: #000; color: #fff; overflow: hidden; }
.plus-hero { position: relative; max-width: var(--max); margin: 0 auto; padding-top: 235px; text-align: center; }
.plus-field {
  position: absolute; left: 50%; top: 0; width: min(1500px, 100vw); height: 560px; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  opacity: 0; transition: opacity 1.2s ease;
}
.plus-field.is-live { opacity: 1; }
.plus-heading { position: relative; }
.plus h2 { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.foil-text {
  font-size: 19px; font-weight: 600; letter-spacing: 0;
  background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plus-title { font-size: clamp(38px, 6vw, 64px); }
.plus-message { margin: 16px auto 0; max-width: 560px; font-size: clamp(19px, 2vw, 22px); color: #c7c7cc; }

.benefits {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  max-width: 760px; margin: 50px auto 0; padding: 0; list-style: none;
}
.benefit {
  padding: 24px; border-radius: 24px;
  background: rgb(44 44 46 / 0.72);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.benefit h3 { margin: 12px 0 4px; font-size: 17px; }
.benefit p { margin: 0; font-size: 15px; color: #aeaeb2; }
.foil-symbol {
  display: block; width: 34px; height: 30px; background: var(--foil-sheet);
  -webkit-mask: var(--symbol) left center / contain no-repeat; mask: var(--symbol) left center / contain no-repeat;
}
@media (max-width: 560px) { .benefits { grid-template-columns: 1fr; } }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 12px auto 0; }
.plan { padding: 24px; border-radius: 24px; border: 1px solid rgb(255 255 255 / 0.14); }
.plan h3 { font-size: 24px; margin-bottom: 8px; }
.plan h3 .foil-text { font-size: inherit; font-weight: 700; }
.plan p { margin: 0; color: #c7c7cc; font-size: 15px; }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* MARK: Documents
   The Privacy Policy: one readable column. */

.document { padding: clamp(50px, 9vh, 100px) var(--gutter) clamp(70px, 12vh, 120px); background: var(--paper); }
.document-inner { max-width: 680px; margin: 0 auto; }
.document-header { margin-bottom: 40px; }
.document h1 { font-size: clamp(40px, 6vw, 56px); }
.document-date { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }
.document-lede { margin: 22px 0 0; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.4; }
.document section { margin-top: 36px; }
.document h2 { font-size: 24px; margin-bottom: 10px; }
.document p, .document li { line-height: 1.55; }
.document p { margin: 0 0 12px; }
.document ul { margin: 0; padding-left: 22px; }
.document li + li { margin-top: 6px; }
/* Links in the text are underlined, not told apart by their color alone. */
.document p a, .document li a { text-decoration: underline; text-underline-offset: 2px; }

/* MARK: Note
   The developer's letter, in New York like the app's. */

.note { padding: clamp(90px, 14vh, 160px) var(--gutter); background: var(--paper); }
.note-letter { max-width: 640px; margin: 0 auto; font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-size: clamp(19px, 1.8vw, 21px); line-height: 1.55; }
.note-header { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.note-photo { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }
.note h2 { font-size: clamp(30px, 4vw, 44px); font-family: inherit; }
.note p { margin: 0 0 15px; }
.note-signature { margin-top: 25px; font-style: italic; }

/* MARK: Closing and footer */

.closing { padding: clamp(90px, 14vh, 150px) var(--gutter); text-align: center; background: var(--gray-6); }
.closing-icon { width: 120px; margin: 0 auto 28px; filter: drop-shadow(0 12px 15px rgb(0 0 0 / 0.2)); }
.closing p { margin: 14px 0 30px; font-size: clamp(19px, 2.2vw, 24px); color: var(--ink-2); }

.footer { padding: 30px var(--gutter) max(30px, env(safe-area-inset-bottom)); background: var(--gray-6); border-top: 1px solid var(--hairline); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footnote { margin: 0 0 16px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; }
.footer-links a { color: var(--ink); }
.legal { margin: 0; }

/* MARK: Dark Mode
   The light sections turn dark, still alternating like Apple's pages: black, then a near-black gray.
   The Plus store follows on black, so the developer's note takes the gray and the closing the black. */

@media (prefers-color-scheme: dark) {
  :root {
    --gray-6: #1c1c1e; /* systemGray6, dark */
    --gray-5: #2c2c2e; /* systemGray5, dark */
    --ink: #ffffff;
    --ink-2: #8e8e93; /* systemGray, dark */
    --paper: #000000;
    --accent: #0091ff; /* systemBlue, dark */
    --washing: #3cd3fe;
    --bleaching: #30d158;
    --drying: #ffd600;
    --ironing: #ff375f;
    --professional: #db34f2;
    --on-ink: #000000;
    --ink-hover: #ffffff;
    --nav: rgb(28 28 30 / 0.72);
    --hairline: rgb(255 255 255 / 0.12);
    color-scheme: dark;
  }
  /* The features keep one gray behind every screen, instead of changing with each one. */
  .story, .story[data-scheme="light"] { background: var(--gray-5); color: var(--ink); }
  .note { background: var(--gray-6); }
  .closing { background: var(--paper); }
  .closing-icon { filter: drop-shadow(0 12px 15px rgb(0 0 0 / 0.6)); }
}

/* MARK: Reveal on scroll
   Only with JavaScript, so the page is complete without it. */

.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* MARK: Reduce Motion
   Everything in place, no drifting or zooming; screens still change, with a plain fade. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .wall-col { transform: none; }
  .zoom .device { transform: none; }
  .story-phone .device { transform: none; }
  .button-primary:hover { transform: none; }
  .story, .story-phone .device img, .story-glow img { transition-duration: .2s; }
  .plus-field { transition: none; }
}

/* MARK: Increase Contrast */

@media (prefers-contrast: more) {
  :root { --ink-2: #3a3a3c; }
  @media (prefers-color-scheme: dark) { :root { --ink-2: #aeaeb2; --accent: #5cb8ff; } }
  .everything .eyebrow, .everything .section-copy p:not(.eyebrow), .tile { color: #d1d1d6; }
  .step p.step-detail, .step-kicker { opacity: 1; }
  .plus-message, .benefit p, .plan p { color: #e5e5ea; }
  .benefit { background: #2c2c2e; }
}