/* Note Metric marketing pages: the landing page, sign-up, support and privacy.
   An editorial, magazine look over the app's water (the same water-hero images and washes as the
   iPhone Home and the browser app), deep navy merging into pale blue. Self-hosted only: the site's
   CSP allows no external fonts or scripts. Every word is set in Poppins, the typeface the note metric
   wordmark is drawn in (medium for headings, as the logo is, light for the standfirsts). Colour rules follow
   docs/product/NAVIGATION_AND_RECORDING_RULES.md: blue carries the page, pink only for the wordmark
   and the odd accent, main buttons dark blue, buttons on dark or water light blue. */

@font-face { font-family: 'NM Poppins'; src: url(./fonts/poppins-300.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'NM Poppins'; src: url(./fonts/poppins-300-italic.woff2) format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'NM Poppins'; src: url(./fonts/poppins-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'NM Poppins'; src: url(./fonts/poppins-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'NM Poppins'; src: url(./fonts/poppins-500-italic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'NM Poppins'; src: url(./fonts/poppins-600.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --navy: #060F24; --deep: #03122A; --blue: #0B2F5E; --ink: #0F2A44; --card: #13314F;
  --pale: #EAF3FB; --paper: #F1F4F8; --light: #E3EEF9; --sky: #D6EAFF;
  --pink: #FF00B8; --pink-deep: #E6007E;
  --on-dark: rgba(255,255,255,.78); --on-dark-soft: rgba(255,255,255,.6);
  --on-light: rgba(15,42,68,.76); --rule-dark: rgba(255,255,255,.22); --rule-light: rgba(15,42,68,.18);
  --font: 'NM Poppins', Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --water: url(../brand/water-hero.webp);
  --water-wide: url(../brand/water-hero-wide.webp);
  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1280px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { background: var(--navy); color: #fff; font: 400 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
.page { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
@supports (padding: max(0px)) { .page { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } }

/* Type */
.kicker { font: 500 12px/1.3 var(--font); letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3, .display { font-family: var(--font); font-weight: 500; letter-spacing: -.035em; margin: 0; }
h1 em, h2 em, h3 em, .display em { font-style: italic; font-weight: 500; }
.standfirst { font: 300 clamp(18px, 1.7vw, 22px)/1.5 var(--font); letter-spacing: -.01em; margin: 0; }
.pink { color: var(--pink); }

/* Buttons: dark blue on light, light blue on dark or water. */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 15px/1 var(--font); padding: 16px 26px; border-radius: 999px; background: var(--blue); color: #fff; border: 1.5px solid var(--blue); transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.on-dark .btn, .btn.light { background: var(--light); color: var(--blue); border-color: var(--light); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-light); }
.on-dark .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn.small { padding: 10px 18px; font-size: 14px; }

/* The masthead bar above every page */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule-dark); }
.topbar + .issueline { border-top: 0; }
.topbar .issue { font: 500 11px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; }
.topbar nav { display: flex; align-items: center; gap: 26px; }
.topbar nav a { white-space: nowrap; text-decoration: none; font: 500 12px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark); }
.topbar nav a:hover { color: #fff; }
.topbar nav a.btn { letter-spacing: 0; text-transform: none; font: 500 13.5px/1 var(--font); color: var(--blue); }
.topbar .mini { height: 26px; display: block; }

/* Water fields. One image per field so sections inside it never show a seam; each section lays
   its own wash over it, navy at one edge, clear in the middle, pale at the other. */
.sea { background: var(--water) center top / cover, #0B3B6E; }
.sea.wide { background: var(--water-wide) center / cover, #0B3B6E; }

/* ---------- Landing: the cover ---------- */
.cover { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; overflow: clip;  /* the 3D phone's canvas reaches past the column; never past the page */
  /* The logo's own navy (#060F24) at the top and the top corners, leaching down into the water. */
  background: radial-gradient(120% 80% at 0% 0%, rgba(6,15,36,1) 0%, rgba(6,15,36,.9) 28%, rgba(6,15,36,.45) 52%, rgba(6,15,36,0) 74%),
              radial-gradient(70% 50% at 100% 0%, rgba(6,15,36,.95) 0%, rgba(6,15,36,.55) 40%, rgba(6,15,36,0) 72%),
              linear-gradient(180deg, rgba(6,15,36,.98) 0%, rgba(6,15,36,.9) 14%, rgba(6,15,36,.62) 30%, rgba(6,15,36,.26) 52%, rgba(6,15,36,.07) 78%, rgba(6,15,36,0) 100%),
              radial-gradient(90% 60% at 0% 55%, rgba(6,15,36,.5), rgba(6,15,36,0) 70%); }
.cover .page { flex: 1; display: flex; flex-direction: column; width: 100%; }
.masthead { margin: clamp(16px, 2.6vw, 30px) auto 0; width: min(100%, 1040px); position: relative; z-index: 1; }
.masthead img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 26px rgba(3,10,30,.45)); }
.issueline { display: flex; justify-content: space-between; gap: 18px; margin: 0 auto; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--rule-dark); color: var(--on-dark-soft); font-size: 10.5px; }
.issueline span:nth-child(2) { text-align: center; }
.issueline span:last-child { text-align: right; }

.cover-grid { flex: 1; display: grid; grid-template-columns: 1fr minmax(220px, 280px) 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding: 0; }
.cover-left h1 { font-size: clamp(40px, 4.7vw, 72px); line-height: 1.02; margin: 14px 0 22px; text-shadow: 0 2px 30px rgba(3,18,42,.35); }
.cover-left h1 em { color: var(--pink); }
.cover-left .standfirst { color: var(--on-dark); max-width: 26ch; }
.cover-left .kicker { color: var(--sky); }
.cover-star { position: relative; align-self: start; margin-top: calc(-1 * clamp(10px, 2.6vw, 40px)); z-index: 2; }
.cover-left, .cover-lines { padding-top: clamp(16px, 2vw, 30px); }
.cover-lines { display: grid; gap: 22px; }
.cover-lines div { border-top: 1px solid var(--rule-dark); padding-top: 12px; }
.cover-lines .kicker { color: var(--sky); font-size: 11px; }
.cover-lines p { margin: 6px 0 0; font: 300 clamp(16px, 1.35vw, 19px)/1.4 var(--font); }
.cover-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(26px, 3vw, 40px) 0 clamp(26px, 3vw, 36px); }
.cover-foot .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.flash { border: 1px solid rgba(255,255,255,.55); padding: 12px 16px; max-width: 330px; background: rgba(3,18,42,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.flash .kicker { font-size: 11px; color: #fff; }
.flash p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--on-dark); }

/* The phone frame shared by the cover and the lookbook */
.phone { position: relative; border-radius: 44px; padding: 8px; background: linear-gradient(150deg, #24324a, #070c16 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 50px 90px -30px rgba(3,10,30,.7), 0 20px 40px -20px rgba(3,10,30,.55); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 1385; border-radius: 37px; background: var(--paper); }

/* ---------- Contents ---------- */
.contents { color: var(--ink);
  background: linear-gradient(180deg, rgba(234,243,251,0) 0, rgba(234,243,251,.5) 70px, rgba(234,243,251,.86) 170px, rgba(234,243,251,.93) 320px, rgba(241,244,248,.98) 100%); }
.contents .page { padding-top: clamp(150px, 14vw, 200px); padding-bottom: clamp(50px, 6vw, 90px); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.contents h2 { font-size: clamp(50px, 6.8vw, 108px); line-height: .95; font-style: italic; font-weight: 500; color: var(--blue); }
.contents h2 span { display: block; font-style: normal; font-weight: 500; color: var(--ink); }
.contents .lead { margin: 22px 0 0; color: var(--on-light); max-width: 34ch; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.toc a { display: grid; grid-template-columns: 74px 1fr auto; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule-light); text-decoration: none; }
.toc a:hover b { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.toc .n { font: 300 38px/1 var(--font); letter-spacing: -.04em; color: var(--blue); }
.toc b { display: block; font: 500 clamp(18px, 1.8vw, 23px)/1.25 var(--font); letter-spacing: -.02em; }
.toc small { display: block; margin-top: 6px; font-size: 15px; color: var(--on-light); }
.toc .k { font: 500 10.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--on-light); }

/* ---------- Spreads ---------- */
.spread { position: relative; }
.spread-head { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 70px); }
.spread-head h2 { font-size: clamp(36px, 4.9vw, 78px); line-height: 1.02; }
.spread-head .kicker { display: block; margin-bottom: 18px; }
.folio { display: flex; justify-content: space-between; gap: 12px; margin-top: clamp(40px, 6vw, 80px); padding: 14px 0 22px; border-top: 1px solid currentColor; font: 500 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; opacity: .55; }

.light { background: var(--paper); color: var(--ink); }
.light .kicker { color: var(--blue); }
.light .standfirst { color: var(--on-light); }
.light h2 em { color: var(--blue); }

/* 01 The cover story: the lookbook */
.story .page { padding-top: clamp(60px, 8vw, 120px); }
.lookbook { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 2vw, 30px); align-items: start; }
.lookbook figure { margin: 0; }
.lookbook figure:nth-child(even) { margin-top: clamp(30px, 5vw, 80px); }
.lookbook figcaption { margin-top: 18px; border-top: 1px solid var(--rule-light); padding-top: 10px; }
.lookbook figcaption .kicker { font-size: 10px; color: var(--blue); }
.lookbook figcaption p { margin: 6px 0 0; font: 300 14px/1.5 var(--font); color: var(--ink); }

/* The tide: pale paper into the water into deep navy, under the browser picture */
.tide { color: #fff;
  background: linear-gradient(180deg, rgba(241,244,248,1) 0%, rgba(241,244,248,.86) 12%, rgba(234,243,251,.25) 34%, rgba(3,18,42,.15) 52%, rgba(3,18,42,.82) 78%, rgba(3,18,42,.97) 100%); }
.tide .page { padding-top: clamp(30px, 5vw, 70px); }
.browser { margin: 0 auto; max-width: 1120px; }
.window { border-radius: 14px; overflow: hidden; background: #0D1730; box-shadow: 0 60px 120px -40px rgba(3,10,30,.75), 0 0 0 1px rgba(255,255,255,.12); }
.window .bar { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #0D1730; }
.window .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.24); }
.window img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1000; }
.browser figcaption { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; margin-top: 18px; color: var(--on-dark); }
.browser figcaption .kicker { color: var(--sky); font-size: 10px; white-space: nowrap; }
.browser figcaption p { margin: 0; font: 300 16px/1.5 var(--font); }

/* 02 How it works, on deep navy */
.how { color: #fff; background: linear-gradient(180deg, rgba(3,18,42,.97), rgba(3,18,42,.9) 60%, rgba(3,18,42,.8)); }
.how .page { padding-top: clamp(70px, 8vw, 120px); }
.how .kicker { color: var(--sky); }
.how .standfirst { color: var(--on-dark); }
.how h2 em { color: var(--sky); }
.chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3.4vw, 56px); }
.chapter { border-top: 1px solid var(--rule-dark); padding-top: 18px; }
.chapter .num { font: 500 clamp(72px, 7.6vw, 118px)/.9 var(--font); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.2px var(--sky); display: block; margin-bottom: 18px; }
.chapter h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; margin: 8px 0 12px; }
.chapter p { margin: 0; color: var(--on-dark); font-size: 15px; }
.pull { margin: clamp(70px, 9vw, 130px) auto 0; max-width: 1000px; text-align: center; }
.pull blockquote { margin: 0; font: italic 300 clamp(28px, 3.8vw, 56px)/1.2 var(--font); letter-spacing: -.03em; }
.pull blockquote::before { content: ''; display: block; width: 56px; height: 3px; margin: 0 auto 34px; background: var(--pink); border-radius: 2px; }
.pull figcaption { margin-top: 22px; color: var(--on-dark-soft); }

/* 03 Who it's for: navy on the left melting through the water to pale on the right */
.who { color: #fff;
  background: linear-gradient(103deg, rgba(3,18,42,.96) 0%, rgba(3,18,42,.9) 34%, rgba(3,18,42,.35) 52%, rgba(3,18,42,0) 62%, rgba(234,243,251,.12) 72%, rgba(234,243,251,.88) 92%, rgba(241,244,248,.96) 100%),
              var(--water-wide) center / cover, #0B3B6E; }
.who .page { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(30px, 5vw, 90px); align-items: center; padding-top: clamp(80px, 9vw, 140px); }
.who h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1.05; margin: 18px 0 40px; }
.who h2 em { color: var(--sky); }
.who .kicker { color: var(--sky); }
.roles { display: grid; gap: 0; border-top: 1px solid var(--rule-dark); }
.role { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule-dark); }
.role .kicker { font-size: 10.5px; padding-top: 6px; }
.role h3 { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.2; margin: 0 0 8px; }
.role p { margin: 0; color: var(--on-dark); font-size: 15px; }
.who-star { justify-self: center; width: min(100%, 330px); transform: rotate(4deg); }
.who-star figcaption { transform: rotate(-4deg); margin-top: 26px; text-align: center; color: var(--ink); }
.who-star figcaption .kicker { color: var(--blue); font-size: 10px; }
.who-star figcaption p { margin: 6px 0 0; font: 300 15px/1.45 var(--font); }
.who .folio { color: #fff; }

/* 04 The small print */
.print .page { padding-top: clamp(70px, 8vw, 120px); }
.print-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(30px, 5vw, 90px); align-items: start; }
.print h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.08; margin: 14px 0 26px; }
.byline { font: 500 10.5px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--on-light); margin: 0 0 22px; }
.dropcap { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink); }
.dropcap::first-letter { font: 500 4.3em/.82 var(--font); float: left; padding: .1em .12em 0 0; color: var(--pink-deep); }
.answers { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.answers h3 { font-size: clamp(26px, 2.6vw, 38px); font-style: italic; font-weight: 500; color: var(--blue); margin: 0 0 18px; }
.answers ol { list-style: none; counter-reset: a; margin: 0; padding: 0; columns: 2; column-gap: 44px; column-rule: 1px solid var(--rule-light); }
.answers li { counter-increment: a; break-inside: avoid; padding: 0 0 18px; color: var(--on-light); font-size: 14.5px; line-height: 1.6; }
.answers li::before { content: counter(a, decimal-leading-zero); display: block; font: 500 11px/1 var(--font); letter-spacing: .16em; color: var(--blue); margin-bottom: 6px; }
.answers li:empty { display: none; }
.answers a { color: var(--blue); }

/* Back cover: pale into the water into navy, then the footer */
.back { color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(241,244,248,1) 0%, rgba(234,243,251,.6) 18%, rgba(3,18,42,.05) 42%, rgba(3,18,42,.55) 74%, rgba(3,18,42,1) 100%); }
.back .page { padding-top: clamp(110px, 14vw, 220px); padding-bottom: clamp(36px, 4vw, 56px); }
.back h2 { font-size: clamp(54px, 9.4vw, 150px); line-height: 1.02; letter-spacing: -.05em; text-shadow: 0 4px 40px rgba(3,18,42,.35); }
.back h2 em { color: var(--pink); display: block; margin-top: .06em; }
.back .standfirst { margin: 26px auto 34px; max-width: 36ch; color: rgba(255,255,255,.88); }
.back .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.back .note { margin: 22px auto 0; max-width: 60ch; font-size: 14px; color: var(--on-dark-soft); }

.site-foot { background: var(--deep); color: var(--on-dark-soft); }
.site-foot .page { padding-top: 10px; padding-bottom: 40px; }
.site-foot .big { display: block; width: min(72%, 520px); height: auto; margin: 0 auto 34px; }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; padding-top: 22px; border-top: 1px solid var(--rule-dark); font-size: 14px; }
.site-foot a { color: var(--on-dark-soft); text-decoration: none; }
.site-foot a:hover { color: #fff; }

/* ---------- Inner pages: sign-up, support, privacy ---------- */
.inner-head { background: linear-gradient(180deg, rgba(3,18,42,.92) 0%, rgba(3,18,42,.6) 55%, rgba(3,18,42,.2) 100%), var(--water-wide) center 40% / cover, #0B3B6E; }
.inner-head .title { padding: clamp(40px, 6vw, 80px) 0 clamp(36px, 5vw, 64px); max-width: 900px; }
.inner-head .kicker { color: var(--sky); display: block; margin-bottom: 16px; }
.inner-head h1 { font-size: clamp(38px, 5.4vw, 80px); line-height: 1.02; }
.inner-head h1 em { color: var(--pink); }
.inner-head .standfirst { margin-top: 18px; color: var(--on-dark); max-width: 44ch; }
.inner-head .updated { margin-top: 14px; color: var(--on-dark-soft); font-size: 15px; }
.inner { background: linear-gradient(180deg, rgba(234,243,251,.0), rgba(241,244,248,1) 120px), var(--paper); color: var(--ink); }
.inner .page { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(50px, 6vw, 90px); }
.prose > * { max-width: 760px; }
.prose h2 { font-size: clamp(23px, 2.5vw, 32px); line-height: 1.15; margin: 46px 0 14px; padding-top: 18px; border-top: 1px solid var(--rule-light); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--on-light); }
.prose strong { color: var(--ink); }
.prose a { color: var(--blue); }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin: 8px 0; }
.prose code { font-size: .92em; }

/* Forms on the paper */
.form label { display: block; margin: 18px 0 6px; font: 500 11.5px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--on-light); }
.form input, .form textarea { width: 100%; padding: 14px 15px; border-radius: 12px; border: 1px solid var(--rule-light); background: #fff; color: var(--ink); font: inherit; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.form textarea { min-height: 100px; resize: vertical; }
.form button.btn { margin-top: 24px; cursor: pointer; }
.form .ok { background: rgba(52,199,89,.12); border: 1px solid rgba(52,199,89,.45); border-radius: 14px; padding: 16px; margin-top: 20px; color: var(--ink); }
.form .err { color: #B3261E; margin-top: 12px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1000px) {
  .cover-grid { grid-template-columns: 1fr minmax(200px, 260px); align-items: start; }
  .cover-left { grid-column: 1 / -1; }
  .cover-star { margin-top: 26px; grid-column: 2; grid-row: 2; }
  .cover-lines { grid-column: 1; grid-row: 2; }
  .lookbook { grid-template-columns: repeat(5, 46vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .lookbook::-webkit-scrollbar { display: none; }
  .lookbook figure { scroll-snap-align: start; }
  .lookbook figure:nth-child(even) { margin-top: 0; }
  .chapters { grid-template-columns: 1fr; }
  .who .page { grid-template-columns: 1fr; }
  .who { background: linear-gradient(180deg, rgba(3,18,42,.95) 0%, rgba(3,18,42,.88) 52%, rgba(3,18,42,.2) 68%, rgba(234,243,251,.5) 82%, rgba(241,244,248,.95) 100%), var(--water) center / cover, #0B3B6E; }
  .print-grid, .contents .page, .spread-head { grid-template-columns: 1fr; }
  .spread-head { align-items: start; }
}
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .topbar nav .wide-only { display: none; }
  .topbar nav { gap: 16px; }
  .issueline { font-size: 9.5px; letter-spacing: .16em; }
  .issueline span:nth-child(2) { display: none; }
  .cover-grid { grid-template-columns: 1fr 44%; gap: 18px; align-items: start; }
  .cover-star { margin-top: 18px; }
  .cover-left h1 { margin-bottom: 16px; }
  .cover-lines { gap: 14px; }
  .cover-lines p { font-size: 15px; }
  .phone { border-radius: 30px; padding: 6px; }
  .phone img { border-radius: 25px; }
  .lookbook { grid-template-columns: repeat(5, 62vw); }
  .role { grid-template-columns: 1fr; gap: 6px; }
  .answers ol { columns: 1; }
  .toc a { grid-template-columns: 52px 1fr; }
  .toc .k { display: none; }
  .toc .n { font-size: 34px; }
  .browser figcaption { grid-template-columns: 1fr; gap: 6px; }
  .folio span:nth-child(2) { display: none; }
  .flash { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Sign-up */
.signup { max-width: 620px; }
.signup .fine { font-size: 14px; color: var(--on-light); margin-top: 22px; }
.signup .fine a { color: var(--blue); }
.inner-head .standfirst a { color: #fff; }

/* ---------- 3D (site/boot.js decides; site/explainer.js draws) ---------- */
.cover-canvas { display: none; }
.cover-star { position: relative; }
.can3d .cover-star .phone { visibility: hidden; }
.can3d .cover-canvas { display: block; position: absolute; left: -45%; top: -12%; width: 190%; height: 124%; pointer-events: none; z-index: 3; }

/* ---------- 01 The demo: without 3D, a plain run of scenes ---------- */
.explainer { position: relative; background: var(--paper); color: var(--ink); }
.ex-tint, .ex-canvas, .ex-search { display: none; }
.ex-caps { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; }
.ex-scene { display: grid; grid-template-columns: 1fr 150px; gap: 22px; align-items: center; border-top: 1px solid var(--rule-light); padding-top: 18px; }
.ex-scene .kicker { color: var(--blue); }
.ex-scene h2, .ex-scene h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; margin: 8px 0 10px; }
.ex-scene h2 { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.02; }
.ex-scene h2 em, .ex-scene h3 em { color: var(--pink-deep); }
.ex-scene p { margin: 0; font-weight: 300; color: var(--on-light); }
.ex-scene > :not(.ex-shot) { grid-column: 1; }
.ex-shot { grid-column: 2; grid-row: 1 / span 3; }
.ex-shot .doc { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px -16px rgba(3,18,42,.45); }
.ex-intro, .ex-wide, .ex-outro { grid-column: 1 / -1; grid-template-columns: 1fr; }
.ex-intro { border-top: 0; }
.ex-wide .ex-shot { grid-column: 1; grid-row: auto; }
.ex-outro .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* ---------- 01 The demo in 3D: one screen that plays by itself, on a loop (no scrolling to drive it) ---------- */
.can3d .explainer { background: var(--paper); }
.can3d .ex-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; overflow: hidden; overflow: clip; color: #fff; background: var(--water-wide) center / cover, #0B3B6E; }
.can3d .ex-tint { display: block; position: absolute; inset: 0; background: rgba(241,244,248,.97); }
.can3d .ex-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.can3d .ex-caps { display: block; position: absolute; inset: 0; max-width: none; padding: 0; pointer-events: none; }
.can3d .ex-scene { --o: 0; position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); top: 50%; width: min(36%, 460px); display: block; border: 0; padding: 0;
  opacity: var(--o); transform: translateY(calc(-50% + (1 - var(--o)) * 26px)); visibility: hidden; }
.can3d .ex-scene.on { pointer-events: auto; }
.can3d .ex-shot { display: none; }
.can3d .ex-scene .kicker { color: var(--sky); }
.can3d .ex-scene h2 { font-size: clamp(38px, 4.4vw, 70px); }
.can3d .ex-scene h3 { font-size: clamp(30px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -.035em; margin: 12px 0 16px; }
.can3d .ex-scene h2 em, .can3d .ex-scene h3 em { color: var(--pink); }
.can3d .ex-scene p { color: rgba(255,255,255,.84); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 34ch; }
.can3d .ex-stage.pale { color: var(--ink); }
.can3d .ex-stage.pale .ex-scene .kicker { color: var(--blue); }
.can3d .ex-stage.pale .ex-scene p { color: var(--on-light); }
.can3d .ex-stage.pale .ex-scene h2 em, .can3d .ex-stage.pale .ex-scene h3 em { color: var(--pink-deep); }
.can3d .ex-stage.pale .ex-outro .btn.ghost { color: var(--ink); border-color: var(--rule-light); }
.can3d .ex-outro .btn { background: var(--light); color: var(--blue); border-color: var(--light); }
.can3d .ex-outro .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

/* The search overlay, placed over the phone by explainer.js */
.can3d .ex-search { --o: 0; display: block; position: absolute; left: 0; top: 0; width: 340px; z-index: 4; opacity: var(--o); transform: scale(calc(.92 + var(--o) * .08)); transform-origin: 60% 0;
  background: rgba(255,255,255,.94); color: var(--ink); border-radius: 22px; padding: 14px; box-shadow: 0 40px 80px -30px rgba(3,10,30,.65), 0 0 0 1px rgba(255,255,255,.6) inset;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); visibility: hidden; pointer-events: none; }
.can3d .ex-search.on { visibility: visible; }
.ex-search .q { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--rule-light); border-radius: 14px; padding: 11px 13px; font-size: 15px; min-height: 46px; color: var(--ink); }
.ex-search .q svg { flex: none; color: var(--on-light); }
.ex-search .q b { font-weight: 600; }
.ex-search .caret { display: inline-block; width: 2px; height: 18px; background: var(--blue); margin-left: -6px; animation: nm-caret 1s steps(1) infinite; }
@keyframes nm-caret { 50% { opacity: 0; } }
.ex-search .chips { display: flex; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.ex-search .chips span { font-size: 12px; font-weight: 500; padding: 6px 11px; border-radius: 999px; background: #EEF2F7; color: var(--ink); }
.ex-search .chips span.on { background: var(--blue); color: #fff; }
.ex-search .results { display: grid; gap: 8px; margin-top: 8px; }
.ex-search .person { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; padding: 6px 2px; }
.ex-search .person i { width: 30px; height: 30px; border-radius: 50%; background: var(--sky); color: var(--blue); font-style: normal; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.ex-search .hit { background: #fff; border: 1px solid var(--rule-light); border-radius: 14px; padding: 10px 12px; }
.ex-search .hit .h { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ex-search .hit .h span { font-size: 11.5px; color: var(--on-light); white-space: nowrap; }
.ex-search .tags { margin: 5px 0 6px; }
.ex-search .tags span { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--light); color: var(--blue); }
.ex-search .tags span.date { background: rgba(230,0,126,.1); color: var(--pink-deep); }
.ex-search .hit p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--on-light); }
.ex-search mark { background: rgba(108,180,255,.35); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.ex-search .at { color: var(--pink-deep); font-weight: 600; white-space: nowrap; }


/* ---------- 02 What comes out ---------- */
.docs .page { padding-top: clamp(70px, 8vw, 120px); padding-bottom: clamp(70px, 8vw, 120px); }
.papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; }
.papers figure { margin: 0; }
.papers figure a { display: block; }
.papers img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 30px 60px -28px rgba(3,18,42,.55), 0 0 0 1px rgba(15,42,68,.08); transition: transform .3s ease; }
.papers figure:nth-child(1) img { transform: rotate(-2.2deg) translateY(18px); }
.papers figure:nth-child(3) img { transform: rotate(2.2deg) translateY(18px); }
.papers figure a:hover img { transform: translateY(-6px); }
.papers figcaption { margin-top: 30px; border-top: 1px solid var(--rule-light); padding-top: 12px; }
.papers figcaption .kicker { font-size: 10.5px; }
.papers figcaption p { margin: 6px 0 0; font: 300 14.5px/1.5 var(--font); color: var(--on-light); }
.papers figcaption a { color: var(--blue); font-weight: 500; }

@media (max-width: 1000px) {
  .ex-caps { grid-template-columns: 1fr; }
  .can3d .ex-scene { top: auto; bottom: 30px; width: auto; right: var(--gutter); transform: translateY(calc((1 - var(--o)) * 22px)); }
  .can3d .ex-scene h2 { font-size: clamp(32px, 8vw, 46px); }
  .can3d .ex-scene h3 { font-size: clamp(25px, 6.4vw, 36px); margin: 8px 0 10px; }
  .can3d .ex-scene p { font-size: 15px; max-width: 40ch; }
  .papers { grid-template-columns: repeat(3, 70vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding: 10px var(--gutter) 24px 2px; scrollbar-width: none; }
  .papers::-webkit-scrollbar { display: none; }
  .papers figure { scroll-snap-align: start; }
  .papers figure:nth-child(1) img, .papers figure:nth-child(3) img { transform: none; }
  .papers .lead { order: -1; }
}
@media (max-width: 760px) {
  .ex-scene { grid-template-columns: 1fr 110px; }
}

/* ---------- 02 Survey Metric: Survey mode in Note Metric as a pull-out of its own. Home's water turned purple, the
   way the app's Survey mode wears it (SurveyWater: the water hue-rotated 62 degrees at 0.8 saturation, pre-rendered
   as brand/water-survey*.webp; Style.swift SurveyStyle: #4D3069 purple, #2B1A3B deep, #826E96 line, #E9E2EC lilac).
   site.js sets --shift (blue to purple) and --q (the words coming in) on the pull-out's cover as it scrolls in. ---------- */
:root { --purple: #4D3069; --purple-deep: #2B1A3B; --purple-line: #826E96; --lilac: #E9E2EC; --lilac-paper: #F7F4F9;
  --water-survey: url(../brand/water-survey.webp); --water-survey-wide: url(../brand/water-survey-wide.webp); }

/* Which part of the site you are in: a pill that turns purple in Survey Metric. Shown once the cover has gone. */
.parts { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 40; display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  transform: translate(-50%, -140%); opacity: 0; transition: transform .35s ease, opacity .35s ease, background .5s ease;
  background: rgba(6,15,36,.62); box-shadow: 0 10px 30px -12px rgba(3,10,30,.6), inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.parts.shown { transform: translate(-50%, 0); opacity: 1; }
.parts.survey { background: rgba(43,26,59,.7); }
.parts a { text-decoration: none; font: 500 12.5px/1 var(--font); letter-spacing: .02em; color: rgba(255,255,255,.72); padding: 9px 14px; border-radius: 999px; white-space: nowrap; transition: background .4s ease, color .4s ease; }
.parts a span { font-weight: 600; }
.parts a:hover { color: #fff; }
.parts a.on { background: var(--light); color: var(--blue); }
.parts.survey a.on { background: var(--lilac); color: var(--purple); }

/* The pull-out's cover: pinned while the colour changes (with 3D), a plain purple page without. */
.sm-cover { --shift: 1; --q: 1; position: relative; color: #fff; }
.sm-stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; overflow: clip; display: flex; }
.sm-layer { position: absolute; inset: 0; pointer-events: none; }
.sm-blue { background: var(--water-wide) center / cover, #0B3B6E; }
.sm-blue::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,18,42,.97) 0%, rgba(3,18,42,.72) 40%, rgba(3,18,42,.8) 100%); }
.sm-purple { opacity: var(--shift); background: var(--water-survey-wide) center / cover, var(--purple); }
.sm-purple::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,26,59,.86) 0%, rgba(43,26,59,.4) 42%, rgba(77,48,105,.25) 62%, rgba(43,26,59,.82) 100%); }
.sm-wash { background: radial-gradient(70% 60% at 72% 50%, rgba(233,226,236,calc(.16 * var(--shift))), rgba(233,226,236,0) 70%); }
.sm-canvas { display: none; }
.sm-page { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; padding-top: clamp(58px, 6vw, 76px); padding-bottom: clamp(20px, 2.4vw, 32px); }
.sm-top { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(233,226,236,.35); border-bottom: 1px solid rgba(233,226,236,.35); color: rgba(233,226,236,.8); font-size: 10.5px; }
.sm-grid { flex: 1; display: grid; grid-template-columns: 7fr 4fr; gap: clamp(24px, 4vw, 70px); align-items: center; padding: clamp(12px, 2vw, 28px) 0; }
.sm-mast { font: 500 clamp(60px, min(10vw, 17vh), 168px)/.86 var(--font); letter-spacing: -.06em; color: #fff; margin: 0;
  opacity: calc(.15 + var(--q) * .85); transform: translateY(calc((1 - var(--q)) * 40px)); text-shadow: 0 6px 40px rgba(20,8,30,.35); }
.sm-mast span { display: block; color: var(--lilac); font-style: italic; }
.sm-slogan { margin: clamp(16px, 2vw, 26px) 0 0; font: 500 clamp(26px, 3.2vw, 50px)/1.08 var(--font); letter-spacing: -.035em;
  opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 30px)); }
.sm-slogan em { color: var(--pink); font-style: italic; white-space: nowrap; }
.sm-head .standfirst { margin-top: 18px; max-width: 46ch; color: rgba(255,255,255,.86); opacity: var(--q); }
.sm-star { margin: 0; justify-self: center; width: min(100%, 290px); transform: rotate(3deg); }
.sm-toc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(16px, 2.4vw, 36px); border-top-color: rgba(233,226,236,.6); opacity: calc(.2 + var(--q) * .8); }
.sm-toc a { grid-template-columns: 44px 1fr; gap: 10px; padding: 14px 0 6px; border-bottom: 0; }
.sm-toc .k { display: none; }
.sm-toc .n { color: var(--lilac); font-size: 26px; }
.sm-toc b { color: #fff; font-size: clamp(17px, 1.5vw, 20px); }
.sm-toc small { color: rgba(233,226,236,.8); font-size: 14px; }
.sm-toc .k { color: rgba(233,226,236,.75); }
.sm-toc a:hover b { color: var(--lilac); }
.sm-cover .phone { background: linear-gradient(150deg, #3a2a52, #120a1c 60%); }
.sm-cover .phone img { background: var(--purple-deep); }

.can3d .sm-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.can3d .sm-star { visibility: hidden; }

/* S1 The walk: the demo's machinery (.explainer) in purple. */
.walk { background: var(--lilac-paper); }
.walk .ex-scene .kicker { color: var(--purple); }
.walk .ex-scene h2 em, .walk .ex-scene h3 em { color: var(--pink-deep); }
.walk .phone { background: linear-gradient(150deg, #3a2a52, #120a1c 60%); }
.walk .ex-scene .kicker .beta { margin-left: 8px; }
.can3d .walk { background: var(--purple-deep); }
.can3d .walk .ex-stage { background: var(--water-survey-wide) center / cover, var(--purple); }
.can3d .walk .ex-tint { background: rgba(43,26,59,.9); }
.can3d .walk .ex-scene .kicker { color: var(--lilac); }
.can3d .walk .ex-scene h2 em, .can3d .walk .ex-scene h3 em { color: var(--pink); }
.can3d .walk .ex-stage.pale .ex-scene .kicker { color: var(--purple); }
.can3d .walk .ex-stage.pale .ex-scene p { color: rgba(43,26,59,.8); }
.can3d .walk .ex-stage.pale .ex-scene h2 em, .can3d .walk .ex-stage.pale .ex-scene h3 em { color: var(--pink-deep); }
.can3d .walk .ex-stage.pale { color: var(--purple-deep); }
.can3d .walk .ex-outro .btn { background: var(--lilac); color: var(--purple); border-color: var(--lilac); }

/* S2 On the phone: the app's own screens on the purple water. */
.sm-screens { color: #fff; background: linear-gradient(180deg, rgba(43,26,59,.96) 0%, rgba(43,26,59,.55) 30%, rgba(43,26,59,.45) 70%, rgba(43,26,59,.92) 100%), var(--water-survey-wide) center / cover, var(--purple); }
.sm-screens .page { padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(40px, 5vw, 70px); }
.sm-screens .kicker { color: var(--lilac); }
.sm-screens h2 em { color: var(--pink); }
.sm-screens .standfirst { color: rgba(255,255,255,.86); }
.sm-look { grid-template-columns: repeat(6, 1fr); }
.sm-look .phone { background: linear-gradient(150deg, #3a2a52, #120a1c 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 70px -28px rgba(10,4,20,.8); }
.sm-look .phone img { background: var(--purple-deep); }
.sm-look figcaption { border-top-color: rgba(233,226,236,.3); }
.sm-look figcaption .kicker { color: var(--lilac); }
.sm-look figcaption p { color: rgba(255,255,255,.84); }

/* S3 Into the report: purple at the top, paper at the foot into 03 What comes out. */
.sm-report { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.sm-report::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--water-survey-wide) center / cover, var(--purple); }
.sm-report::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43,26,59,.92) 0, rgba(43,26,59,.7) 120px, rgba(77,48,105,.42) 46%, rgba(43,26,59,.86) 84%, rgba(241,244,248,1) 100%); }
.sm-report .page { padding-top: clamp(60px, 7vw, 110px); padding-bottom: clamp(80px, 9vw, 140px); }
.sm-report .kicker { color: var(--lilac); }
.sm-report h2 em { color: var(--pink); }
.sm-report .standfirst { color: rgba(255,255,255,.86); }
.sm-report .folio { color: var(--ink); opacity: .5; }
.sv-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.sv-features { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; }
.sv-features article { border-top: 1px solid rgba(233,226,236,.35); padding-top: 14px; }
.sv-features .num { display: block; font: 500 40px/1 var(--font); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px #E9E2EC; margin-bottom: 10px; }
.sv-features h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.sv-features p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.82); }
.beta { display: inline-block; font: 600 10px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: #E9E2EC; color: #4D3069; vertical-align: middle; }
.sv-log { margin: 0; border-radius: 18px; background: #F7F4F9; color: #2B1A3B; padding: 16px 16px 14px; box-shadow: 0 40px 80px -30px rgba(20,8,30,.7); }
.sv-log figcaption { font: 500 10.5px/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: #826E96; margin-bottom: 10px; }
.sv-log pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sv-log .h { font-weight: 700; }
.sv-log .c { color: #826E96; }
.sv-log b { color: #E6007E; font-weight: 700; }
.sv-log i { font-style: normal; color: #4D3069; background: #E9E2EC; border-radius: 3px; padding: 0 3px; }
.sv-log u { text-decoration: none; color: #8A5A00; background: #FCEFD3; border-radius: 3px; padding: 0 3px; }
.sv-log u.ok { color: #1D6B3E; background: #DDF2E5; }
@media (max-width: 1000px) {
  .sv-grid { grid-template-columns: 1fr; }
  .sm-grid { grid-template-columns: 1fr 34%; }
  .sm-look { grid-template-columns: repeat(6, 46vw); }
}
@media (max-width: 760px) {
  .sv-features { grid-template-columns: 1fr; gap: 22px; }
  .sm-look { grid-template-columns: repeat(6, 62vw); }
  .sm-top span:nth-child(2) { display: none; }
  .sm-grid { grid-template-columns: 1fr; padding-bottom: 0; }
  .sm-star { display: none; }
  .can3d .sm-grid { padding-bottom: 46vh; }
  .can3d .sm-toc { display: none; }
  .sm-toc { grid-template-columns: 1fr; }
  .sm-toc a { padding: 10px 0 4px; }
  .sm-toc small { display: none; }
  .parts a { padding: 8px 11px; font-size: 12px; }
  .sv-log pre { font-size: 11px; }
}