/* ──────────────────────────────────────────────────────────────────────
   Icebreaker landing — brand tokens mirror the current app UI:
   Figtree for body (cleaner than Patrick Hand, what the app shipped with),
   Dagssonic for display headings (the Hugleikur-drawn marquee face).
   Ink/paper ground, brand-orange #FF5500 accent (the food/bar marker
   colour you see on every map screen), Hulli icons sprinkled in.
   Asymmetric corners + heavy ink strokes everywhere — looks hand-pinned.
   ────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Dagssonic";
  src: url("/assets/fonts/Dagssonic.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #171717;
  /* Primary surface is pure white now — matches the app's main panel
     colour. `--paper-warm` keeps the old off-white around as a token
     for the rare moments when a section needs a quiet band between
     two white expanses (pullquote, etc.). */
  --paper: #ffffff;
  --paper-warm: #e3e4dc;
  --paper-2: #f5f5f2;
  --white: #ffffff;
  /* Body-text "muted" is now the same ink as primary — the grey we
     had read as low-contrast / dirty against the new pure-white
     surface. Footer text on dark background still uses literal
     rgba(paper, 0.x) values; those stay legible on ink. */
  --muted: #171717;

  /* Brand orange — the food/bar marker colour from the app. Primary
     accent now that the app has consolidated on it. */
  --orange: #ff5500;
  --orange-tint: #ffe9dc;

  /* Vibrant aurora green — matches the live-aurora card surface in
     the app. Saturated, on-brand, distinct from the pastel mint. */
  --aurora: #7ddb5a;
  --aurora-tint: #e8fae0;

  /* Pastel tints — kept for the Vinur quote cards + team cards so the
     warmer scroll moments don't become monochrome. Used sparingly. */
  --mint: #77d2a5;
  --mint-tint: #f0faf5;
  --rose: #ef8298;
  --rose-tint: #fdf0f3;
  --gold: #e0c043;
  --gold-tint: #faf6e8;
  --sky: #6ac6df;
  --sky-tint: #e8f4f8;
  --peach-tint: #fdefe5;
  --lilac-tint: #f1ecf8;

  /* Dagsson punctuation accents — used for h1 em / pullquote em */
  --d-red: #fc0001;
  --d-yellow: #ffdf00;
  --d-green: #3e9a2f;
  --d-blue: #0361e7;

  /* Asymmetric corner radii — every card looks slightly hand-drawn */
  --r-card-tl: 3px;
  --r-card-tr: 14px;
  --r-card-br: 6px;
  --r-card-bl: 10px;

  --r-btn-tl: 4px;
  --r-btn-tr: 14px;
  --r-btn-br: 8px;
  --r-btn-bl: 12px;

  --r-chip-tl: 2px;
  --r-chip-tr: 16px;
  --r-chip-br: 4px;
  --r-chip-bl: 12px;

  /* Softer than the old hard 2.5px ink line — the app leans on shadow,
     not stroke, for depth. Slightly stronger shadow tokens compensate
     so cards/buttons still float. */
  --shadow-card: 0 3px 12px rgba(23, 23, 23, 0.10), 0 1px 3px rgba(23, 23, 23, 0.06);
  --shadow-lifted: 0 8px 28px rgba(23, 23, 23, 0.16), 0 3px 8px rgba(23, 23, 23, 0.09);

  --border: 1.5px solid var(--ink);
  --border-heavy: 2px solid var(--ink);
}

/* ── Reset / base ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ── Focus indicators ──────────────────────────────────────────────
   :focus-visible only shows for KEYBOARD focus (never on mouse click),
   so a strong ring here doesn't disrupt mouse users but gives keyboard
   navigators a clear "where am I" signal. Applies to every interactive
   element site-wide unless a component overrides it (nav burger has
   its own rule that matches this pattern). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On pages with an orange background (download, 404), a white ring
   reads better than orange. Same pattern for the ink footer. */
body[class*="dl-"] a:focus-visible,
body[class*="dl-"] button:focus-visible,
.foot a:focus-visible {
  outline-color: var(--white);
}
body {
  margin: 0;
  font-family: "Figtree", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  /* Subtly tighter than Figtree's default tracking — the face has
     slightly loose set-widths at body sizes, and a small negative
     value pulls it into a denser, more confident block. Display
     headings tighten further below. */
  letter-spacing: -0.012em;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
/* Display headings — h1, h2, hero title, pullquote — use the
   Hugleikur-drawn marquee face. Body text + h3 stay in Figtree
   for readability. */
h1,
h2 {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-weight: normal;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0;
}
h3 {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.2px;
}
h1 em {
  font-style: normal;
  color: var(--orange);
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  border: var(--border);
  border-top-left-radius: var(--r-btn-tl);
  border-top-right-radius: var(--r-btn-tr);
  border-bottom-right-radius: var(--r-btn-br);
  border-bottom-left-radius: var(--r-btn-bl);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lifted);
}
.btn:active {
  transform: translateY(0);
}
/* Brand-orange CTA — used for the primary "Download the beta" button.
   Slight rotation gives the hand-pinned feel without going full Hugleikur. */
.btn--orange {
  background: var(--orange);
  color: var(--white);
  border-color: var(--ink);
}
.btn--orange:hover {
  background: var(--orange);
  color: var(--white);
}
.btn--ink {
  background: var(--ink);
  color: var(--paper);
}
.btn--big {
  padding: 14px 26px;
  font-size: 22px;
}

/* ── Sticky nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: var(--border);
}
.nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 24px;
  /* Dagssonic sits tight to its bounding box, so the container gap alone
     reads as no space between "ICEBREAKER" and the first nav link. Extra
     right margin gives the wordmark visual breathing room. */
  margin-right: 20px;
}
.nav__icon {
  width: 34px;
  height: 34px;
  /* App-icon shape: uniform rounded square (~22% radius, the iOS
     home-screen icon mask). The SVG is already filled corner-to-
     corner with brand orange, so no background or border is needed
     beyond the radius itself. */
  border-radius: 8px;
  display: block;
}
.nav__wordmark {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 1;
}
.nav__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  margin-right: 18px;
  font-size: 19px;
}
.nav__links a {
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 120ms ease;
}
.nav__links a:hover {
  background: rgba(23, 23, 23, 0.06);
}
.nav__links a.active {
  color: var(--orange);
  font-weight: 600;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 24px 100px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero__title {
  font-size: clamp(44px, 6vw, 76px);
  letter-spacing: -0.5px;
}
.hero__sub {
  font-size: clamp(20px, 2vw, 24px);
  color: var(--muted);
  margin: 24px 0 32px;
  max-width: 540px;
  line-height: 1.45;
}
.hero__fineprint {
  margin-top: 16px;
  font-size: 16px;
  color: var(--muted);
}

/* ── Phone mockup — kept as the same simple-stroke + rounded-corner
       frame the showcase items use, so the hero screenshot reads as
       "an app screen" without a heavy bezel competing with the rest
       of the page. ─────────────────────────────────────────────── */
.hero__phone {
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone {
  width: 320px;
  aspect-ratio: 1206 / 2622;
  background: var(--white);
  border: var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  transform: rotate(-2deg);
}
.phone__notch {
  /* The iOS notch is baked into the screenshot already; the explicit
     overlay is redundant and competes visually. */
  display: none;
}
.phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.phone__screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Lottie splash overlay — sits on top of the hero screenshot,
   plays once on page-load via script.js, then fades out to reveal
   the screenshot underneath. Full-bleed brand orange so the icon
   inside the Lottie blends into the surface — looks like the real
   in-app launch screen, not a small square floating on white. */
.phone__splash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 700ms ease;
}
.phone__splash svg {
  width: 100% !important;
  height: 100% !important;
}
.phone__splash.is-done {
  opacity: 0;
  pointer-events: none;
}

/* ── Section headings ─────────────────────────────────────────────── */
.section__title {
  font-size: clamp(40px, 4.4vw, 64px);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0;
  font-family: "Dagssonic", "Figtree", sans-serif;
}

/* Hulli icon perched above each section heading — visual cue that
   we're shifting topic, matches the hand-drawn icons on the app map. */
.section__icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
}
/* Inverted icon for sections with the dark Vinur-style background. */
.section__icon--inverted {
  filter: invert(1);
}

/* Small Hulli icon stamped above each showcase row's heading. */
.showcase__rune {
  width: 36px;
  height: 36px;
  margin: 0 0 6px;
  display: block;
}

/* ── What the h*ll is it — positioning statement under the hero ───── */
/* Full-bleed orange band. The content inside stays centred + max-
   width capped by the individual children. Chose orange over the
   previous paper ground because "What the hell is this?" is the
   single-line positioning statement — it deserves the same brand-
   heavy treatment as the two Convince bands further down. */
.what {
  background: var(--orange);
  color: var(--white);
  padding: 90px 24px 100px;
  text-align: center;
}
.what .section__title {
  color: var(--white);
}
.what__lede {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.2px;
  margin: 18px auto 32px;
  max-width: 760px;
  color: var(--white);
}
/* On the paper ground em was orange for accent; on orange ground we
   just drop the italic — text stays white, no underline. */
.what em {
  font-style: normal;
  color: var(--white);
}
.what__cta {
  background: var(--white);
  color: var(--orange);
  border: 2px solid var(--white);
  font-size: 20px;
  padding: 16px 34px;
  border-radius: var(--r-btn-tl) var(--r-btn-tr) var(--r-btn-br) var(--r-btn-bl);
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.what__cta:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}
.what__cta:active {
  transform: translateY(1px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

/* ── Tagline strip — the brand's signature line. Loud Dagssonic
       display type. Orange "Don't die." emphasizes the safety pillar
       being a first-class feature, not a footnote. ──────────────── */
.tagline {
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px 24px 60px;
  text-align: center;
}
.tagline__line {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.tagline__dot {
  color: var(--orange);
}

/* Nudge variant — full-bleed orange band with a CTA button, mirrors
   the other orange conversion moments on the page. Overrides the
   base .tagline max-width so the colour bleeds edge-to-edge. */
.tagline--nudge {
  background: var(--orange);
  color: var(--white);
  max-width: none;
  padding: 80px 24px 90px;
}
.tagline--nudge .tagline__line {
  color: var(--white);
  max-width: 900px;
  margin: 0 auto;
}
.tagline__cta {
  display: inline-block;
  margin-top: 32px;
  background: var(--white);
  color: var(--orange);
  border: 2px solid var(--white);
  font-size: 20px;
  padding: 16px 34px;
  border-radius: var(--r-btn-tl) var(--r-btn-tr) var(--r-btn-br) var(--r-btn-bl);
  text-decoration: none;
  font-family: "Figtree", sans-serif;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.tagline__cta:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}
.tagline__cta:active {
  transform: translateY(1px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

/* ── Showcase — five real app screens shown side-by-side. Lives
       between the tagline strip and the Why narrative; the screens
       prove what the Why section then justifies. ──────────────────── */
.showcase {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 60px;
}
.showcase__lede {
  text-align: center;
  font-size: 22px;
  color: var(--muted);
  margin: 0 auto 48px;
  max-width: 640px;
}
.showcase__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 32px;
  justify-content: center;
}
.showcase__item {
  flex: 0 1 calc((100% - 64px) / 3);
  min-width: 260px;
  max-width: 340px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: transform 200ms ease;
}
.showcase__item:hover {
  transform: translateY(-4px);
}
.showcase__rune {
  width: 64px;
  height: 64px;
  margin: 0 0 4px;
  display: block;
}
.showcase__item h3 {
  font-size: clamp(22px, 2vw, 26px);
  margin: 0;
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.showcase__item p {
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--ink);
  line-height: 1.5;
  max-width: 320px;
}
/* Orange highlight inside titles + body — matches the iOS preview
   cards where the operative phrase glows in brand orange. Not
   italic; the `<em>` tag carries the colour semantically but the
   font keeps its upright form. */
.showcase__item em,
.showcase__item em a {
  font-style: normal;
  color: var(--orange);
}
.showcase__item em a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.showcase__shot {
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  object-position: top;
  border: var(--border);
  border-radius: 22px;
  background: var(--white);
  box-shadow: var(--shadow-card);
  margin-top: 6px;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
/* Quirky alternating tilt on the screenshots only — keeps the
   captions straight while the screens themselves look hand-pinned
   to the page, scrapbook-style. Hovering straightens the tilt for
   a small interactive moment. */
.showcase__item:nth-child(odd) .showcase__shot {
  transform: rotate(-1.8deg);
}
.showcase__item:nth-child(even) .showcase__shot {
  transform: rotate(1.8deg);
}
.showcase__item:hover .showcase__shot {
  transform: rotate(0deg);
  box-shadow: var(--shadow-lifted);
}

/* ── Why ──────────────────────────────────────────────────────────── */
.why {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 24px 40px;
}
.why__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin: 60px 0;
}
.why__row--reverse .why__copy {
  order: 2;
}
.why__row--reverse .why__card {
  order: 1;
}
.why__copy h3 {
  font-size: clamp(28px, 3vw, 38px);
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}
.why__copy p {
  font-size: 20px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 460px;
}

/* ── Cards (asymmetric corners + heavy border + soft shadow) ─────── */
.card {
  border: var(--border);
  border-top-left-radius: var(--r-card-tl);
  border-top-right-radius: var(--r-card-tr);
  border-bottom-right-radius: var(--r-card-br);
  border-bottom-left-radius: var(--r-card-bl);
  padding: 24px 26px;
  box-shadow: var(--shadow-card);
}
.card--mint { background: var(--mint-tint); }
.card--rose { background: var(--rose-tint); }
.card--gold { background: var(--gold-tint); }
.card--sky { background: var(--sky-tint); }
.card__quote {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 12px;
}
.card__attrib {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
}
.why__card {
  transform: rotate(-1.5deg);
}
.why__row--reverse .why__card {
  transform: rotate(1.5deg);
}

/* ── Vinur chat ───────────────────────────────────────────────────── */
/* ── Still-not-convinced CTA — a full-bleed orange conversion band
       between the Why section and Meet Vinur. Loud on purpose;
       readers who reached this point still didn't tap Download, so
       we stop the scroll with brand colour + a big Dagssonic hook. */
.convince {
  background: var(--orange);
  color: var(--white);
  padding: 96px 24px;
  text-align: center;
  margin-top: 40px;
}
.convince__inner {
  max-width: 720px;
  margin: 0 auto;
}
.convince__title {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-size: clamp(56px, 8vw, 108px);
  line-height: 0.95;
  letter-spacing: -1px;
  margin: 0 0 18px;
  font-weight: 400;
}
.convince__lede {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.35;
  margin: 0 0 40px;
  opacity: 0.95;
}
.convince__btn {
  background: var(--white);
  color: var(--orange);
  border: 2px solid var(--white);
  font-size: 20px;
  padding: 16px 34px;
  border-radius: var(--r-btn-tl) var(--r-btn-tr) var(--r-btn-br) var(--r-btn-bl);
  text-decoration: none;
  display: inline-block;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.convince__btn:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.35);
}
.convince__btn:active {
  transform: translateY(1px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

.vinur {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 24px 100px;
  margin-top: 60px;
}
.vinur .section__title {
  color: var(--paper);
}
.vinur__lede {
  text-align: center;
  font-size: 22px;
  color: rgba(227, 228, 220, 0.7);
  margin: 0 0 48px;
}
.chat {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat__bubble {
  padding: 14px 18px;
  font-size: 19px;
  line-height: 1.45;
  max-width: 80%;
  border: var(--border);
  border-top-left-radius: var(--r-card-tl);
  border-top-right-radius: var(--r-card-tr);
  border-bottom-right-radius: var(--r-card-br);
  border-bottom-left-radius: var(--r-card-bl);
}
.chat__bubble p {
  margin: 0;
}
.chat__bubble p + p {
  margin-top: 10px;
}
.chat__bubble--user {
  align-self: flex-end;
  background: var(--sky-tint);
  color: var(--ink);
  border-color: var(--ink);
}
.chat__bubble--vinur {
  align-self: flex-start;
  background: var(--paper);
  color: var(--ink);
}
.chat__cta {
  font-size: 16px;
  color: var(--muted);
  border-top: 1px dashed rgba(23, 23, 23, 0.2);
  padding-top: 8px;
  margin-top: 10px !important;
}

/* ── Team ─────────────────────────────────────────────────────────── */
.team {
  max-width: 1080px;
  margin: 0 auto;
  padding: 80px 24px;
}
.team__lede {
  text-align: center;
  font-size: 22px;
  color: var(--muted);
  margin: 0 auto 48px;
  max-width: 620px;
}
.team__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
}
.team__card {
  /* 3 cards per row on desktop, with the last (orphan) row centered.
     Cards don't grow — flex: 0 — so a 2-card last row stays the same width. */
  flex: 0 1 calc((100% - 56px) / 3);
  min-width: 240px;
}
.team__card {
  border: var(--border);
  border-top-left-radius: var(--r-card-tl);
  border-top-right-radius: var(--r-card-tr);
  border-bottom-right-radius: var(--r-card-br);
  border-bottom-left-radius: var(--r-card-bl);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.team__card:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: var(--shadow-lifted);
}
.team__card--mint { background: var(--mint-tint); }
.team__card--rose { background: var(--rose-tint); }
.team__card--gold { background: var(--gold-tint); }
.team__card--sky  { background: var(--sky-tint); }
.team__card--peach { background: var(--peach-tint); }
.team__card--lilac { background: var(--lilac-tint); }

.team__photo {
  width: 100%;
  aspect-ratio: 1;
  border: var(--border);
  border-top-left-radius: var(--r-card-tl);
  border-top-right-radius: var(--r-card-tr);
  border-bottom-right-radius: var(--r-card-br);
  border-bottom-left-radius: var(--r-card-bl);
  overflow: hidden;
  background: var(--white);
}
.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team__name {
  font-size: 30px;
  margin: 6px 0 0;
}
.team__role {
  font-size: 17px;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0.2px;
  text-transform: lowercase;
}
.team__bio {
  font-size: 18px;
  margin: 6px 0 0;
  line-height: 1.45;
}

/* ── Pullquote (closing-argument bumper between Team and CTA strip).
       Stays on the pure-white ground so the surface matches the app;
       separation from the orange CTA below comes from that section's
       own border + tint. */
.pullquote {
  padding: 90px 24px 100px;
  text-align: center;
  background: var(--paper);
}
.pullquote > p:first-child {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin: 0 auto;
  max-width: 920px;
}
.pullquote em {
  font-style: normal;
  color: var(--orange);
}
.pullquote__sub {
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--muted);
  margin: 22px auto 0;
  max-width: 620px;
}

/* ── Get the beta — closing-CTA strip, replaces the old waitlist
       form now that the iOS beta is live on TestFlight. Full-brand
       orange section so the page closes on the loudest possible
       "this is the colour, this is the call". Text inverts to white,
       button inverts to white-on-ink so it reads as the only place
       you can tap. ─────────────────────────────────────────────── */
.get {
  background: var(--orange);
  color: var(--white);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: 80px 24px;
}
.get .section__title {
  color: var(--white);
}
.get__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.get__lede {
  font-size: 21px;
  color: var(--white);
  margin: 0 auto 32px;
  max-width: 520px;
}
.get__fineprint {
  margin-top: 22px;
  font-size: 16px;
  color: var(--white);
}

/* Final CTA wrapper with four hand-drawn Hulli arrows pointing at
   the "Download the app" button from all sides. Padding is uniform
   130px so all four arrows sit the same distance from the button
   (previously vertical arrows sat closer). Each arrow pulses
   toward the button then back out, so the eye is drawn to the CTA
   in motion rather than static. */
.get__cta {
  position: relative;
  display: inline-block;
  padding: 130px;
  margin: 0 auto;
}
.get__arrow {
  position: absolute;
  width: 60px;
  height: auto;
  pointer-events: none;
  /* Icons ship with ink stroke; on the dark section we invert to paper. */
  filter: invert(1);
}
.get__arrow--above {
  top: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  animation: get-arrow-above 2.2s ease-in-out infinite;
}
.get__arrow--below {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) rotate(3deg);
  animation: get-arrow-below 2.2s ease-in-out infinite;
}
.get__arrow--left {
  top: 50%;
  left: 20px;
  transform: translateY(-50%) rotate(-2deg);
  animation: get-arrow-left 2.2s ease-in-out infinite;
}
.get__arrow--right {
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(3deg);
  animation: get-arrow-right 2.2s ease-in-out infinite;
}

/* Each keyframe preserves the arrow's static centering + rotation
   and layers a translation on top so it slides toward the button
   at the midpoint of the loop, then back out. */
@keyframes get-arrow-above {
  0%, 100% { transform: translateX(-50%) rotate(-4deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(-4deg) translateY(16px); }
}
@keyframes get-arrow-below {
  0%, 100% { transform: translateX(-50%) rotate(3deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(3deg) translateY(-16px); }
}
@keyframes get-arrow-left {
  0%, 100% { transform: translateY(-50%) rotate(-2deg) translateX(0); }
  50%      { transform: translateY(-50%) rotate(-2deg) translateX(16px); }
}
@keyframes get-arrow-right {
  0%, 100% { transform: translateY(-50%) rotate(3deg) translateX(0); }
  50%      { transform: translateY(-50%) rotate(3deg) translateX(-16px); }
}

@media (max-width: 640px) {
  .get__cta {
    padding: 120px 24px;
  }
  .get__arrow {
    width: 48px;
  }
  /* Side arrows collide with the button on narrow viewports; hide
     them and rely on the above/below arrows to carry the emphasis. */
  .get__arrow--left,
  .get__arrow--right {
    display: none;
  }
}

/* ── Legal pages (privacy, terms, etc.) ───────────────────────────
       Long-form prose template. Narrower column so line-length stays
       readable; tighter type than the marketing surface, headings still
       in Dagssonic so the page reads as Icebreaker, not a generic legal
       boilerplate. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px 100px;
}
.legal__article {
  font-size: 17px;
  line-height: 1.65;
}
.legal__title {
  font-size: clamp(48px, 6vw, 80px);
  font-family: "Dagssonic", "Figtree", sans-serif;
  margin: 0 0 8px;
  letter-spacing: 0;
}
.legal__meta {
  font-size: 15px;
  color: var(--ink);
  margin: 0 0 32px;
  opacity: 0.65;
}
.legal__lede {
  font-size: 22px;
  line-height: 1.5;
  margin: 0 0 40px;
  padding: 18px 22px;
  background: var(--orange-tint);
  border: var(--border);
  border-radius: 14px;
}
.legal h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  margin: 44px 0 14px;
  letter-spacing: -0.1px;
}
.legal h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 22px 0 8px;
}
.legal p,
.legal ul {
  margin: 0 0 18px;
}
.legal ul {
  padding-left: 22px;
}
.legal li {
  margin-bottom: 8px;
}
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.legal a:hover {
  color: var(--orange);
}
.legal code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  background: rgba(23, 23, 23, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
}
.legal__back {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(23, 23, 23, 0.12);
  font-size: 17px;
}

/* ── One-pager (partners) ──────────────────────────────────────────
       Dense single-scroll layout that doubles as a printable PDF
       (Print → Save as PDF gives a tidy one/two-page document). */
.onepager {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.onepager__article {
  font-size: 17px;
  line-height: 1.6;
}
.onepager__header {
  margin-bottom: 36px;
}
.onepager__eyebrow {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 10px;
}
.onepager__title {
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  margin: 0 0 20px;
}
.onepager__title em {
  font-style: normal;
  color: var(--orange);
}
.onepager__lede {
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  max-width: 720px;
}
.onepager section {
  margin-top: 36px;
}
.onepager h2 {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.1px;
  margin: 0 0 12px;
}
.onepager p {
  margin: 0 0 12px;
}
.onepager ul {
  margin: 0;
  padding-left: 22px;
}
.onepager ul li {
  margin-bottom: 8px;
}
.onepager__bullets {
  padding-left: 22px;
}
.onepager__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.onepager__cta {
  background: var(--orange-tint);
  border: var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  margin-top: 40px;
}
.onepager__cta h2 {
  margin-bottom: 8px;
}
.onepager__cta p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
}
.onepager a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.onepager a:hover {
  color: var(--orange);
}

/* Print: tighten everything so Print → Save as PDF gives a tidy
   document. Hide the nav + footer (chrome that doesn't belong on
   a printed sheet) and pull margins in. */
@media print {
  .onepager-nav,
  .foot {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .onepager {
    padding: 0;
    max-width: 100%;
  }
  .onepager__title {
    font-size: 32pt;
  }
  .onepager__lede {
    font-size: 13pt;
  }
  .onepager section {
    margin-top: 18pt;
    page-break-inside: avoid;
  }
  .onepager__cta {
    background: #fff;
    border: 1pt solid #000;
  }
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
}

@media (max-width: 760px) {
  .onepager__split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ── Footer ───────────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: var(--paper);
  padding: 56px 24px 28px;
}
.foot__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
}
.foot__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Dagssonic", "Figtree", sans-serif;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 8px;
}
.foot__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
}
.foot__line {
  color: rgba(227, 228, 220, 0.7);
  margin: 0;
}
.foot__title {
  font-size: 18px;
  color: rgba(227, 228, 220, 0.7);
  margin: 0 0 8px;
  text-transform: lowercase;
  letter-spacing: 0.5px;
}
.foot__col p {
  margin: 0 0 6px;
}
.foot__col a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px dotted rgba(227, 228, 220, 0.4);
}
.foot__col a:hover {
  border-bottom-color: var(--paper);
}
.foot__legal {
  max-width: 1080px;
  margin: 36px auto 0;
  font-size: 15px;
  color: rgba(227, 228, 220, 0.5);
  text-align: center;
}

/* ── Mobile ───────────────────────────────────────────────────────── */
/* ── Hamburger button (mobile only) ────────────────────────────────
   Hidden by default; revealed under the 860px breakpoint below. The
   three bars are span elements; when the drawer is open we morph them
   into an X via transforms. */
.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.nav__burger:hover { background: rgba(23, 23, 23, 0.06); }
.nav__burger:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.nav__burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
}
.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 20px; }
.nav__burger span:nth-child(3) { top: 27px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  top: 20px;
  transform: rotate(45deg);
}
.nav__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__burger[aria-expanded="true"] span:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}
/* Lock scroll while drawer is open. */
body.is-nav-open {
  overflow: hidden;
}

@media (max-width: 860px) {
  .nav__links {
    /* Slides down from below the nav bar. Closed state uses
       translateY(calc(-100% - 80px)) — the -80px slack accounts for
       the 62px top offset plus a 18px safety margin so the drawer's
       bottom edge sits fully above the viewport when hidden. Simple
       -100% or -110% leaves a subtle bottom-edge sliver visible in
       the top of the viewport. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    padding: 20px 24px 32px;
    background: var(--paper);
    border-bottom: 1.5px solid rgba(23, 23, 23, 0.1);
    transform: translateY(calc(-100% - 80px));
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 90;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.2);
  }
  .nav__links.is-open {
    transform: translateY(0);
  }
  .nav__links a {
    font-size: 20px;
    font-weight: 500;
    padding: 12px 8px;
    border-radius: 8px;
  }
  .nav__burger {
    display: inline-block;
    margin-left: auto;
    color: var(--ink);
  }
  /* On pages with orange nav (download, 404), invert the burger colour. */
  .nav[style*="orange"] .nav__burger,
  body[class*="dl-"] .nav__burger { color: var(--white); }
  /* The "Icebreaker" wordmark in Dagssonic 30px collides with the sticky
     CTA at narrow widths. The orange app-icon alone is recognisable as
     the brand, so we hide the text and let the icon carry the identity. */
  .nav__wordmark {
    display: none;
  }
  .nav__inner {
    padding: 12px 18px;
    gap: 12px;
  }
  .nav__inner > .btn--ink {
    font-size: 14px;
    padding: 9px 14px;
    /* Burger sits between brand and CTA; margin-left: auto no longer
       needed since burger already fills the flex gap. */
    margin-left: 0;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px 24px 64px;
    text-align: center;
  }
  .hero__sub {
    margin-left: auto;
    margin-right: auto;
  }
  .why__row,
  .why__row--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 40px 0;
  }
  .why__row--reverse .why__copy {
    order: 0;
  }
  .why__row--reverse .why__card {
    order: 0;
  }
  .why__copy p {
    max-width: none;
  }
  .team__grid {
    grid-template-columns: 1fr;
  }
  /* Team cards adopt a business-card layout on mobile: small square
     photo top-left, name + role stacked to its right, bio flows
     full-width below. Uses CSS grid so no HTML wrapper is needed.
     Override flex-basis + min-width so the card fills the viewport
     (base rule sizes for 3-col desktop layout — too narrow on phone). */
  .team__card {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  .team__grid {
    padding: 0 4px;
  }
  .team {
    padding-left: 12px;
    padding-right: 12px;
  }
  .team__photo {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 96px;
    height: 96px;
    aspect-ratio: 1;
    align-self: start;
  }
  .team__name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 24px;
    margin: 0;
  }
  .team__role {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }
  .team__bio {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 16px;
    line-height: 1.4;
    margin: 10px 0 0;
  }
  .foot__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .phone {
    width: 280px;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────
   WCAG 2.3.3: users who opt into `prefers-reduced-motion` (System
   Settings → Accessibility → Reduce Motion on iOS/macOS, similar
   toggles on Android/Windows) should not see decorative movement.
   Neutralises the hero splash fade, the card hover tilts, the
   showcase rotations, and any future transition/animation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Kill decorative rotations — these are set as static transforms,
     not animations, so the rule above doesn't reach them. */
  .why__card,
  .showcase__phone {
    transform: none !important;
  }
}