/* perkroo.app landing page — built from the Sep 2026 design handoff (design_handoff_perkroo_website).
   Shared by every page on the site: the document pages (guide / privacy / terms / delete-account)
   and the /o/ offer pages also load pages.css. Light-only by design. Fonts are SELF-HOSTED (no third-party request —
   the privacy posture of this site is "no trackers, no CDNs"); icons are an inline SVG sprite. */

@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/PlusJakartaSans_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/PlusJakartaSans_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/PlusJakartaSans_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/fonts/PlusJakartaSans_800ExtraBold.ttf') format('truetype'); }

:root {
  color-scheme: light;
  --page: #F0F3F8; --card: #FFFFFF; --line: #E3E8F0; --line-hero: #E9EDF4; --divider: #D9E0EA;
  --outline: #C9D3E3; --input: #F7F9FC;
  --ink: #17305C; --navy: #1E3A6E; --navy-hover: #17305C; --navlink: #3D4F6E; --muted: #5B6B85;
  --on-dark: #C7D2E6; --dark-grad: linear-gradient(135deg, #1B3560 0%, #0E1F44 100%);
  --amber: #F2C14E; --amber-hover: #EAB53A; --amber-wash: #FBEFD2; --amber-line: #F0E2B8;
  --amber-ink: #7A5200; --amber-eyebrow: #B8860B; --amber-body: #6B5A2E;
  --green-bg: #DCF3E4; --green: #1F7A46; --error: #B4232C;
  --blue-bg: #E3EDFB; --blue: #2E6FD1; --blue-text: #2A66C2; /* eyebrow text: #2E6FD1 is 4.38:1 on the page, this is 5.0:1 */ --red-bg: #FDE7E7; --red: #E0454F; --orange-bg: #FEEEDD; --orange: #E67E22;
  --pink-bg: #FCE4F1; --pink: #D9418C; --purple-bg: #F0E6FB; --purple: #8A4FD1;
  --side: clamp(20px, 5vw, 80px);
  --section: clamp(72px, 8vw, 104px);
  --section-lg: clamp(72px, 8vw, 112px);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: var(--navy); }
a:hover { color: #0E1F44; }
:focus-visible { outline: 3px solid #2E6FD1; outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--navy); color: #fff; padding: 10px 16px;
  border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 1120px of CONTENT plus the side padding, exactly as the reference measures it. */
.wrap { box-sizing: content-box; max-width: 1120px; margin-inline: auto; padding-inline: var(--side); }
.section { padding-top: var(--section); scroll-margin-top: 80px; }
.section--lg { padding-top: var(--section-lg); }

/* Inline sprite icons: size with font-size, colour with color. */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.tile--44 { width: 44px; height: 44px; font-size: 20px; }
.tile--48 { width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
.t-blue { background: var(--blue-bg); color: var(--blue); } .t-green { background: var(--green-bg); color: var(--green); }
.t-red { background: var(--red-bg); color: var(--red); } .t-orange { background: var(--orange-bg); color: var(--orange); }
.t-pink { background: var(--pink-bg); color: var(--pink); } .t-purple { background: var(--purple-bg); color: var(--purple); }
.t-amber { background: var(--amber-wash); color: var(--amber-eyebrow); } .t-gold { background: rgba(242, 193, 78, .18); color: var(--amber); }

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.eyebrow--icon { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow--icon .i { font-size: 16px; }
.h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin: 14px 0; text-wrap: balance; }
.h2--42 { font-size: clamp(32px, 4vw, 42px); }
.lead { font-size: 18px; line-height: 1.6; color: var(--muted); }
.lead--17 { font-size: 17px; }
.head-center { text-align: center; max-width: 640px; margin: 0 auto 48px; }
#premium .head-center { margin-bottom: 44px; }
.split .h2, .bday .h2, .dark .h2 { margin-bottom: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer; font-family: inherit; line-height: normal; transition: background-color .15s ease, border-color .15s ease; }
.btn--navy { background: var(--navy); color: #fff; font-size: 15px; padding: 12px 22px; border: 0; min-height: 44px; box-sizing: border-box; }
.btn--navy:hover { background: var(--navy-hover); color: #fff; }
.btn--outline { background: #fff; color: var(--navy); border: 1.5px solid var(--outline); font-size: 16px; padding: 14px 20px; }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); }
.pill { font-weight: 700; font-size: 13px; line-height: normal; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill--green { background: var(--green-bg); color: var(--green); } .pill--amber { background: var(--amber-wash); color: var(--amber-ink); }

/* ── 1. Nav ─────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(240, 243, 248, .85); -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(23, 48, 92, .06); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; min-height: 44px; }
.brand img { width: 40px; height: 40px; display: block; }
.brand span { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); line-height: 1; }
.nav__links { display: none; gap: 32px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.nav__links a { color: var(--navlink); text-decoration: none; padding-block: 10px; }
.nav__links a:hover { color: var(--ink); }

/* ── 2. Hero ────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px; align-items: center;
  padding-top: clamp(32px, 4vw, 48px); padding-bottom: 8px; scroll-margin-top: 120px; }
.hero__pill { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 16px 6px 8px; font-size: 13px; font-weight: 600; color: var(--navlink); line-height: 1.4; }
.hero__pill span { width: 22px; height: 22px; border-radius: 999px; background: var(--green-bg); color: var(--green);
  display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 12px; }
.hero h1 { font-size: clamp(42px, 5.4vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; margin: 26px 0 20px; text-wrap: balance; }
.hero__sub { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--muted); margin-bottom: 32px; max-width: 520px; text-wrap: pretty; }
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-row .badge { display: inline-flex; }
.cta-row .badge img { height: 52px; width: auto; display: block; }
.trust { display: flex; gap: 16px 28px; flex-wrap: wrap; margin-top: 36px; font-size: 14px; color: var(--muted); font-weight: 600; }
.trust b { color: var(--ink); font-weight: 700; }

.stage { position: relative; height: 740px; width: 100%; max-width: 560px; margin: 0 auto; }
.stage .phone { position: absolute; top: 18px; left: calc(50% - 201px * var(--s)); }
.float { display: none; position: absolute; background: #fff; border: 1px solid var(--line-hero); border-radius: 18px; padding: 14px;
  box-shadow: 0 24px 50px rgba(23, 48, 92, .14); }
.float__top { display: flex; justify-content: space-between; align-items: flex-start; }
.float__title { font-weight: 700; font-size: 15px; line-height: 1.3; margin-top: 12px; }
.float__sub { font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.float__sub .i { font-size: 12px; }
.float--1 { top: 92px; left: -12px; width: 250px; transform: rotate(-5deg); }
.float--2 { top: 400px; right: -18px; width: 240px; transform: rotate(4deg); }
.float--3 { bottom: 26px; left: 4px; width: 236px; transform: rotate(3deg); }

/* Device frame: a 402x874 iPhone drawn in CSS and scaled, so every screenshot shares one frame. */
.phone { --s: .8; width: calc(402px * var(--s)); height: calc(874px * var(--s)); }
.phone--72 { --s: .72; } .phone--78 { --s: .78; }
/* Below 360px the 322px frame is wider than the screen: shrink every frame to fit a 320px phone. */
@media (max-width: 359px) { .phone, .phone--72, .phone--78 { --s: .69; } .stage { height: 650px; } }
.phone__device { position: relative; width: 402px; height: 874px; transform: scale(var(--s)); transform-origin: 0 0; border-radius: 48px;
  overflow: hidden; background: #F2F2F7; box-shadow: 0 40px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .12); }
.phone__device > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone__island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; border-radius: 24px; background: #000; z-index: 3; }
.phone__status { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; gap: 154px; align-items: center; justify-content: center;
  padding: 21px 24px 19px; box-sizing: border-box; color: #000; }
.phone__status > * { flex: 1; height: 22px; display: flex; align-items: center; justify-content: center; }
.phone__time { font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 22px; padding-top: 1.5px; }
.phone__icons { gap: 7px; padding-top: 1px; }
.phone__home { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; height: 34px; display: flex; justify-content: center; align-items: flex-end;
  padding-bottom: 8px; box-sizing: border-box; pointer-events: none; }
.phone__home span { width: 139px; height: 5px; border-radius: 100px; background: rgba(0, 0, 0, .25); }
.phone-col { display: flex; justify-content: center; }

/* ── 3. Stats ───────────────────────────────────────────────────────────── */
.stats { padding-top: 24px; }
.stats__card { background: #fff; border: 1px solid var(--line); border-radius: 24px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding: 12px; }
.stat { padding: 22px 24px; }
.stat__n { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.stat__c { font-size: 15px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.stat--note { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.stat--note p { font-size: 15px; line-height: 1.45; color: var(--muted); }
.stat--note b { color: var(--ink); font-weight: 700; }

/* ── 4. How it works ────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; }
.step__top { display: flex; justify-content: space-between; align-items: center; }
.step__n { width: 32px; height: 32px; border-radius: 999px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; }
.step h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; margin: 24px 0 10px; }
.step p { font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ── 5. Feature tour ────────────────────────────────────────────────────── */
.tour { display: flex; flex-direction: column; gap: clamp(64px, 7vw, 96px); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 64px; align-items: center; }
/* Mirrored row: rtl flips the two columns; when the grid stacks, DOM order (text first) wins. */
.row--flip { direction: rtl; } .row--flip > * { direction: ltr; }
.row h3 { font-size: clamp(30px, 3.4vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin: 14px 0 16px; text-wrap: balance; }
.row__body { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 460px; margin-bottom: 24px; }
.checks { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; }
.checks li { display: flex; align-items: flex-start; gap: 12px; }
.checks li > span { width: 24px; height: 24px; border-radius: 999px; background: var(--green-bg); color: var(--green); display: inline-flex;
  align-items: center; justify-content: center; flex: none; font-size: 14px; }

/* ── 6. Community + shared "rows" ───────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px 64px; align-items: center; }
.split__body { max-width: 480px; }
.rows { display: flex; flex-direction: column; gap: 14px; }
.rowcard { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.rowcard h3 { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.rowcard p { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ── 7. Birthday band ───────────────────────────────────────────────────── */
.bday { background: var(--amber-wash); margin-top: var(--section-lg); scroll-margin-top: 80px; }
.bday__in { padding-block: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; }
.bday .lead { color: var(--amber-body); max-width: 520px; margin-bottom: 32px; }
.btiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.btile { background: #fff; border: 1px solid var(--amber-line); border-radius: 18px; padding: 16px; }
.btile--ready { border: 1.5px solid var(--amber); }
.btile__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.btile .pill { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.btile .pill .i { font-size: 11px; }
.btile h3 { font-size: 15px; font-weight: 700; line-height: 1.3; margin-top: 12px; }
.btile p { font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 4px; }

/* ── 8. Privacy ─────────────────────────────────────────────────────────── */
.dark { background: var(--dark-grad); color: #fff; border-radius: 32px; padding: clamp(28px, 5vw, 64px); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 64px; align-items: center; }
.dark .lead { color: var(--on-dark); max-width: 480px; }
.dark .rowcard { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.dark .rowcard h3 { color: #fff; } .dark .rowcard p { color: var(--on-dark); }

/* ── 9. Plans ───────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.plan { position: relative; border-radius: 28px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.plan--free { background: #fff; border: 1px solid var(--line); }
.plan--premium { background: var(--dark-grad); color: #fff; }
.plan__label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan--premium .plan__label { color: var(--on-dark); }
.plan__head { font-size: clamp(32px, 3.5vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 10px 0 4px; }
.plan__sub { font-size: 15px; line-height: 1.5; color: var(--muted); }
.plan--premium .plan__sub { color: var(--on-dark); }
.plan__list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; font-size: 16px; line-height: 1.45; }
.plan__list li { display: flex; gap: 12px; align-items: flex-start; }
.plan__list .i { font-size: 16px; color: var(--green); margin-top: 4px; }
.plan--premium .plan__list .i { color: var(--amber); }
.plan__cta { margin-top: auto; padding-top: 32px; }
.plan__cta .btn { width: 100%; box-sizing: border-box; padding: 14px; font-size: 16px; }
.btn--amber { background: var(--amber); color: var(--ink); font-weight: 800; border: 0; }
.btn--amber:hover { background: var(--amber-hover); color: var(--ink); }
.plan__badge { position: absolute; top: 24px; right: 24px; display: inline-flex; align-items: center; gap: 6px; background: var(--amber); color: var(--ink);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 6px 12px; border-radius: 999px; }
.plan__badge .i { font-size: 12px; fill: currentColor; }
.plan--premium :focus-visible { outline-color: #fff; } /* the blue ring is ~3:1 on the navy card */

/* ── 10. Android waitlist ───────────────────────────────────────────────── */
.wait { background: #fff; border: 1px solid var(--line); border-radius: 32px; padding: clamp(28px, 4vw, 48px) clamp(24px, 4.5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 32px 48px; align-items: center; }
.wait h2 { font-size: clamp(30px, 3.5vw, 38px); line-height: 1.1; margin: 12px 0; }
#android .eyebrow--icon .i { font-size: 15px; }
.wait form { display: flex; gap: 10px; flex-wrap: wrap; }
.wait input[type="email"] { flex: 1; min-width: 220px; box-sizing: border-box; font: inherit; font-size: 16px; line-height: normal; color: var(--ink); padding: 16px 20px;
  border-radius: 999px; border: 1.5px solid var(--outline); background: var(--input); transition: border-color .15s ease, background-color .15s ease; }
.wait input[type="email"]::placeholder { color: #627290; opacity: 1; } /* 4.6:1; opacity stops Firefox lightening it */
.wait input[type="email"]:focus { border-color: var(--navy); background: #fff; outline-offset: 2px; }
.wait button { font-size: 16px; padding: 16px 26px; }
.wait button[disabled] { opacity: .7; cursor: default; }
.hp { position: absolute; left: -9999px; }
.wait__err { margin-top: 10px; font-size: 14px; color: var(--error); font-weight: 600; }
.wait__ok { display: flex; align-items: center; gap: 12px; background: var(--green-bg); color: var(--green); border-radius: 18px; padding: 18px 20px; font-weight: 600; }
.wait__ok .i { font-size: 18px; }
.wait__ok:focus { outline: none; }
[hidden] { display: none !important; }

/* ── 11. Investors & press ──────────────────────────────────────────────── */
.press { border-top: 1px solid var(--divider); padding-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 40px 64px; align-items: start; }
.press h3 { font-size: clamp(26px, 3vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin: 12px 0; text-wrap: balance; }
.press p { font-size: 16px; color: var(--muted); }
.press__mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 11px; font-weight: 700; color: var(--navy); text-decoration: none; min-height: 44px; }
.press__mail .i { font-size: 16px; }
.press__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.press__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
/* 22px, not the spec's 26: the container caps these cards at ~165px, and "Community" at 26px/800 overflows (it does in the reference too). */
.press__card b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.press__card span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 6px; }

/* ── 12. Footer ─────────────────────────────────────────────────────────── */
.foot { padding-top: clamp(56px, 7vw, 88px); padding-bottom: 40px; font-size: 14px; color: var(--muted); }
.foot__in { display: flex; flex-wrap: wrap; gap: 28px 40px; justify-content: space-between; align-items: flex-end; }
.foot .brand img { width: 30px; height: 30px; } .foot .brand span { font-size: 18px; } .foot .brand { gap: 10px; display: inline-flex; }
.foot__copy { margin-top: 14px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 2px 24px; font-weight: 600; }
.foot__links a { color: var(--muted); text-decoration: none; padding-block: 11px; } /* 44px tap target */
.foot__links a:hover { color: var(--navy); }
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--navy); background: #fff;
  border: 1.5px solid var(--outline); border-radius: 999px; padding: 9px 14px; text-decoration: none; min-height: 44px; box-sizing: border-box;
  transition: border-color .15s ease; }
.social a:hover { border-color: var(--navy); }
.social svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
/* Not in the design: the page names real programs and merchants, so it carries the same
   independence notice as every shared offer page. */
.foot__fine { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--divider); font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 860px; }

/* Very narrow phones (320px): wordmark + button need 288px but only 280px is available, so the
   button was clipped by the page's overflow clip. Tighten both slightly. */
@media (max-width: 359px) {
  .brand { gap: 9px; } .brand img { width: 34px; height: 34px; } .brand span { font-size: 20px; }
  .nav .btn--navy { padding: 12px 16px; font-size: 14px; }
}

/* Floating hero cards from 760px, as designed. The nav link row is a deliberate deviation: brand
   (142) + links (497) + button (130) + gaps need ~800px of content, which only fits from ~907px —
   at the design's 760px the links wrapped to three lines and ran into the wordmark on every iPad
   in portrait (the reference does the same). Below 920px the designed "logo + Get the app" applies. */
@media (min-width: 760px) { .float { display: block; } }
@media (min-width: 920px) { .nav__links { display: flex; } }