/* ---------------------------------------------------------------
   Linkfisher marketing site — tokens ported 1:1 from
   ios/LinkfisherShared/DesignSystem/AppTheme.swift so the web page
   reads as the same product as the app, not a reskin.
   --------------------------------------------------------------- */

:root {
  /* brand teal */
  --lf-teal-50:  #F1FAFB;
  --lf-teal-400: #5FBECC;
  --lf-teal-500: #2FA0B2;
  --lf-accent-600: #1E8A9C;
  --lf-teal-deep: #12A88F;

  /* brand orange */
  --lf-accent-900: #94411C;
  --lf-accent-700: #BD5420;
  --lf-accent-500: #F2803A;
  --lf-accent-400: #F79A4D;
  --lf-accent-200: #FDD3AC;

  /* ink */
  --lf-ink-900: #171E27;
  --lf-ink-800: #212A36;
  --lf-ink-600: #414E5E;
  --lf-ink-400: #748494;
  --lf-ink-300: #A2AFBC;
  --lf-ink-200: #C9D2DA;
  --lf-ink-100: #E6EAEE;

  /* sky (surfaces) */
  --lf-sky-100: #F2F8FD;
  --lf-sky-400: #B9D6EF;

  /* semantic */
  --page-bg: var(--lf-sky-100);
  --card-bg: #FFFFFF;
  --border-subtle: var(--lf-sky-400);
  --border-default: var(--lf-ink-200);
  --text-primary: var(--lf-ink-800);
  --text-secondary: var(--lf-ink-600);
  --text-tertiary: var(--lf-ink-400);
  --action-primary: var(--lf-teal-500);
  --accent-orange: var(--lf-accent-500);

  --font-display: "Baloo 2", ui-rounded, -apple-system, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --radius-card: 18px;
  --radius-control: 14px;
  --shadow-soft: 0 18px 40px -22px rgba(23, 30, 39, 0.35);
  --shadow-lift: 0 24px 60px -20px rgba(30, 138, 156, 0.35);
}

/* Self-hosted Baloo 2 — same OFL files the iOS app bundles. Kept off a
   third-party CDN so this page has no external requests to disclose. */
@font-face {
  font-family: "Baloo 2";
  src: url("assets/fonts/Baloo2-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("assets/fonts/Baloo2-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("assets/fonts/Baloo2-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("assets/fonts/Baloo2-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--lf-ink-900); }
p { margin: 0; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

:focus-visible {
  outline: 2.5px solid var(--lf-accent-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* signature backdrop: a faint teal current running the length of the
   page, evoking the river a kingfisher hunts over. Pure decoration,
   so it's aria-hidden and skipped under reduced motion. */
.riverline {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(47, 160, 178, 0.14), transparent 60%),
    radial-gradient(50% 35% at 10% 30%, rgba(242, 128, 58, 0.10), transparent 60%),
    var(--page-bg);
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242, 248, 253, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border-subtle);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--lf-ink-900);
  margin-right: auto;
}

.wordmark__icon { border-radius: 8px; }

.nav__links {
  display: flex;
  gap: 28px;
  margin-right: auto;
}

.nav__links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.nav__links a:hover { color: var(--action-primary); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); opacity: 0.85; }

.btn--small { padding: 9px 16px; font-size: 13.5px; }
.btn--large { padding: 15px 26px; font-size: 15.5px; }
.btn--full { width: 100%; padding: 14px 20px; font-size: 15px; }

.btn--primary { background: var(--action-primary); color: #fff; box-shadow: var(--shadow-lift); }
.btn--primary-orange { background: var(--accent-orange); color: #fff; box-shadow: 0 20px 45px -20px rgba(242, 128, 58, 0.55); }
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-default);
}
.btn--ghost:hover { border-color: var(--action-primary); color: var(--action-primary); }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.22,.61,.36,1), transform 0.7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay.is-visible { transition-delay: 0.12s; }
.reveal--delay-2.is-visible { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .hero__bird, .soon__bird { animation: none !important; }
  /* The waves stay, they just stop moving — the layered crests are the
     shape of the shoreline, so hiding them would leave a flat teal slab.
     Offsetting the mid layer keeps the crests interleaved while still. */
  .soon__water, .soon__wave { animation: none !important; }
  .soon__wave--mid { transform: translate3d(-25%, 0, 0); }
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 48px;
  padding: 76px 28px 108px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lf-accent-600);
  margin-bottom: 14px;
}

.hero__headline {
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--lf-ink-900);
}

.hero__sub {
  margin-top: 20px;
  max-width: 480px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.hero__ctas {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-tertiary);
}

.storebadge {
  display: inline-block;
  margin-top: 18px;
  line-height: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.storebadge:hover { transform: translateY(-1.5px); }
.storebadge:active { transform: translateY(0); opacity: 0.85; }
.storebadge img { display: block; height: 44px; width: auto; }
.storebadge--large { margin-top: 0; }
.storebadge--large img { height: 52px; }

.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero__bird {
  position: absolute;
  top: -34px;
  right: 4px;
  width: 168px;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(23, 30, 39, 0.28));
  animation: bob 4.5s ease-in-out infinite;
  z-index: 2;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

/* ---------- phone mockup shell ---------- */
.phone {
  width: 280px;
  border-radius: 46px;
  background: var(--lf-ink-900);
  padding: 14px;
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(23,30,39,0.06);
}

.phone--small { width: 250px; }

.phone__notch {
  position: absolute;
  left: 50%;
  top: 26px;
  transform: translateX(-50%);
  width: 86px;
  height: 20px;
  background: var(--lf-ink-900);
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

.phone__screen {
  position: relative;
  background: var(--card-bg);
  border-radius: 34px;
  overflow: hidden;
  min-height: 420px;
}

/* ---------- dummy screen contents (all decorative placeholders) --- */
.dscreen { display: flex; flex-direction: column; height: 100%; min-height: 420px; background: var(--page-bg); }

.dscreen__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 18px 14px;
}

.dscreen__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--lf-ink-900); }
.dscreen__dot { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--lf-teal-500), var(--lf-teal-deep)); }

.dscreen__back { width: 30px; height: 30px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--border-subtle); }
.dscreen__title-bar { flex: 1; height: 12px; margin: 0 12px; border-radius: 6px; background: var(--lf-ink-200); }
.dscreen__avatars { display: flex; }
.davatar { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--page-bg); margin-left: -8px; }
.davatar--a { background: var(--lf-teal-500); }
.davatar--b { background: var(--lf-accent-500); }
.davatar--c { background: var(--lf-ink-400); }

.dscreen__search {
  margin: 4px 18px 14px;
  height: 38px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
}

.dscreen__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 18px;
}

.dcard {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding-bottom: 10px;
}

.dcard__thumb { aspect-ratio: 1; }
.dcard__thumb--a { background: linear-gradient(135deg, var(--lf-teal-400), var(--lf-accent-600)); }
.dcard__thumb--b { background: linear-gradient(135deg, var(--lf-accent-400), var(--lf-accent-700)); }
.dcard__thumb--c { background: linear-gradient(135deg, var(--lf-teal-500), var(--lf-teal-deep)); }
.dcard__thumb--d { background: linear-gradient(135deg, var(--lf-accent-200), var(--lf-accent-500)); }

.dcard__line { height: 8px; border-radius: 4px; background: var(--lf-ink-300); margin: 8px 10px 0; }
.dcard__line.dim { background: var(--lf-ink-100); }
.dcard__line--30 { width: 30%; } .dcard__line--35 { width: 35%; } .dcard__line--40 { width: 40%; }
.dcard__line--50 { width: 50%; } .dcard__line--55 { width: 55%; } .dcard__line--60 { width: 60%; }
.dcard__line--65 { width: 65%; } .dcard__line--70 { width: 70%; }

.dscreen__tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 20px 20px;
  background: var(--card-bg);
  border-top: 1px solid var(--border-subtle);
}

.dtab { width: 20px; height: 20px; border-radius: 6px; background: var(--lf-ink-200); }
.dtab--active { background: var(--lf-teal-500); }
.dtab--fab { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-orange); margin: -22px 0 0; box-shadow: 0 8px 16px -6px rgba(242,128,58,0.6); }

.dscreen__rowlist { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.drow {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px;
}

.drow__thumb { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; background: linear-gradient(135deg, var(--lf-teal-400), var(--lf-teal-deep)); }
.drow__thumb--b { background: linear-gradient(135deg, var(--lf-accent-400), var(--lf-accent-700)); }
.drow__thumb--c { background: linear-gradient(135deg, var(--lf-ink-300), var(--lf-ink-600)); }
.drow__body { flex: 1; display: flex; flex-direction: column; gap: 7px; }

.dfolder__chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  width: fit-content;
}
.dfolder__chip--sm { padding: 3px 9px; font-size: 10px; }
.dfolder__chip--teal { background: var(--lf-teal-50); color: var(--lf-accent-600); }
.dfolder__chip--orange { background: var(--lf-accent-200); color: var(--lf-accent-900); }

/* ---------- section heads ---------- */
.section-head { max-width: 620px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { font-size: 34px; line-height: 1.15; margin-top: 6px; }
.section-sub { margin-top: 14px; font-size: 16px; color: var(--text-secondary); line-height: 1.6; }

section.wrap { padding-top: 96px; }

/* ---------- catch flow ---------- */
.catchflow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
  position: relative;
}

.catchflow::before {
  content: "";
  position: absolute;
  top: 108px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--lf-teal-400) 0 10px, transparent 10px 20px);
  opacity: 0.6;
  z-index: 0;
}

.catchflow__step {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 28px 24px 30px;
  text-align: center;
}

.catchflow__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--lf-accent-600);
  background: var(--lf-teal-50);
  padding: 4px 11px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.catchflow__visual {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.catchflow__step h3 { font-size: 18px; margin-bottom: 8px; }
.catchflow__step p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.55; }

/* dummy "spotted a link" popup */
.dpopup {
  width: 100%;
  background: var(--page-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
}
.dpopup__row { display: flex; align-items: center; gap: 8px; }
.dpopup__chip { width: 16px; height: 16px; border-radius: 5px; background: var(--lf-teal-500); }
.dpopup__title { font-size: 12.5px; font-weight: 700; color: var(--lf-ink-800); }
.dpopup__url { height: 8px; width: 70%; border-radius: 4px; background: var(--lf-ink-200); margin: 10px 0; }
.dpopup__actions { display: flex; gap: 8px; }
.dpopup__btn { flex: 1; height: 22px; border-radius: 8px; }
.dpopup__btn--ghost { background: transparent; border: 1px solid var(--border-default); }
.dpopup__btn--solid { background: var(--accent-orange); }

/* dummy catch FAB */
.dfab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 100px;
  background: var(--accent-orange);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 16px 30px -12px rgba(242,128,58,0.65);
}
.dfab__icon { width: 14px; height: 14px; border-radius: 4px; background: #fff; opacity: 0.9; }

/* dummy folder card */
.dfolder { width: 100%; text-align: left; background: var(--page-bg); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; }
.dfolder__head { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dfolder__row { height: 26px; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--border-subtle); margin-top: 8px; }

/* ---------- features ---------- */
.featuregrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 30px 26px;
}

.feature__icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature__icon--teal { background: var(--lf-teal-50); color: var(--lf-accent-600); }
.feature__icon--orange { background: var(--lf-accent-200); color: var(--lf-accent-900); }

.feature h3 { font-size: 18.5px; margin-bottom: 10px; }
.feature p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; }

/* ---------- screens (real App Store screenshots) ----------
   Everything else on this page is an illustrated approximation of the UI
   (.dscreen, .phone). This section is the real thing, so it's treated as
   a photo strip rather than another mockup: cards drift at the small tilt
   already established by .hero__bird / .phone's float keyframes, laid out
   as a river-like current the user scrolls sideways through. The track
   bleeds past the .wrap gutter on wide screens (padding-left math mirrors
   it, padding-right doesn't) so the row visibly continues off the right
   edge rather than looking like a complete, boxed-in set. */
.screens { padding: 100px 0 90px; }
.screens .section-head { margin-bottom: 8px; }

.screens__track {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: 40px;
  padding: 30px 28px 40px;
  padding-left: max(28px, calc((100vw - 1120px) / 2 + 28px));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.screens__track::-webkit-scrollbar { display: none; }

.screens__card {
  flex: none;
  width: 220px;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
}
.screens__card img { display: block; width: 100%; height: auto; }

.screens__card:nth-child(odd)  { transform: rotate(-1.6deg) translateY(8px); }
.screens__card:nth-child(even) { transform: rotate(1.3deg) translateY(-6px); }
.screens__card:nth-child(odd):hover  { transform: rotate(-1.6deg) translateY(-2px) scale(1.03); }
.screens__card:nth-child(even):hover { transform: rotate(1.3deg) translateY(-16px) scale(1.03); }

.screens__hint {
  display: none;
  margin-top: 2px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}

@media (max-width: 640px) {
  .screens { padding: 72px 0 64px; }
  .screens__card { width: 172px; }
  .screens__card:nth-child(odd), .screens__card:nth-child(even) { transform: none; }
  .screens__card:hover { transform: none; }
  .screens__hint { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .screens__card { transition: none; }
}

/* ---------- showcase (shared folders) ---------- */
.showcase {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.showcase h2 { font-size: 30px; margin-top: 6px; line-height: 1.2; }
.showcase .section-sub { margin-bottom: 22px; max-width: 460px; }

.showcase__list { display: flex; flex-direction: column; gap: 12px; }
.showcase__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--text-primary);
  font-weight: 600;
}
.showcase__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lf-teal-500);
}

.showcase__stage { display: flex; justify-content: center; }

/* ---------- tiers ---------- */
.tiergrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.tier {
  position: relative;
  background: var(--card-bg);
  border: 1.5px solid var(--border-subtle);
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.tier--featured {
  border-color: var(--accent-orange);
  box-shadow: 0 30px 60px -30px rgba(242, 128, 58, 0.45);
  /* `translate` (not `transform`) so this permanent lift survives the
     .reveal scroll-in animation, which animates `transform` on the
     same element. */
  translate: 0 -8px;
}

.tier__tag {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--accent-orange);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}

.tier__name { font-size: 20px; }
/* The in-app name for the Premium tier, kept alongside the plain word so the
   card matches the upgrade screen without leading with a name nobody has met
   yet. */
.tier__alias { font-size: 14px; font-weight: 600; color: var(--text-tertiary); }
.tier__price { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--lf-ink-900); margin: 10px 0 2px; }
.tier__price span { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-tertiary); }
/* Premium's real price comes from the App Store at runtime and varies by
   storefront, so the card names the billing period instead of quoting a
   number the site would have to be redeployed to keep honest. */
.tier__price--plan { font-size: 26px; }
.tier__desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 22px; }
.tier__note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--text-tertiary); text-align: center; }

.tier__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.tier__list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--text-primary);
}
.tier__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--lf-accent-600);
  font-weight: 700;
  font-size: 13px;
}

/* ---------- final CTA ---------- */
.finalcta {
  text-align: center;
  padding: 100px 28px 120px;
}
.finalcta__mark { margin: 0 auto 20px; border-radius: 16px; }
.finalcta h2 { font-size: 32px; max-width: 560px; margin: 0 auto 30px; line-height: 1.2; }

/* ---------- footer ----------
   The site reads as a horizon: everything above is the sky the kingfisher
   hunts in, and the footer is the river it hunts over. The coming-soon page
   already literalises that; this carries it onto every other page, so a page
   ends by descending into the water rather than stopping at a hairline rule.
   Reuses the wave tiles and drift keyframes from .soon__water rather than
   introducing a second decorative language. */
.footer {
  position: relative;
  margin-top: 56px;
  padding: 54px 0 30px;
  background: linear-gradient(180deg, #126C7C 0%, #0A4450 100%);
  color: #fff;
  /* Clips .footer__current's 200%-wide drift strip. Must be `clip`, not
     `hidden`: hidden on one axis forces the other to `auto`, which would
     turn the footer into a scroll container and cut off .footer__waterline
     sitting at top:-38px. Gutters come from the .wrap children. */
  overflow-x: clip;
}

/* Sits ABOVE the footer box and is filled with the footer's own top colour,
   so the crest cuts a wavy edge between page and water with no seam. Drifts
   slowly, which makes the waterline itself undulate. */
.footer__waterline {
  position: absolute;
  left: 0;
  right: 0;
  top: -38px;
  height: 38px;
  overflow: hidden;
}
.footer__waterline::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 200%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20220%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C60%20C120%2C18%20240%2C18%20360%2C60%20C480%2C102%20600%2C102%20720%2C60%20C840%2C18%20960%2C18%201080%2C60%20C1200%2C102%201320%2C102%201440%2C60%20L1440%2C220%20L0%2C220%20Z%27%20fill%3D%27%23126C7C%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation: wave-drift 21s linear infinite;
}

/* One lighter current just under the surface, running the other way. Two
   moving things in this footer, no more — the waterline and this. */
.footer__current {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 54px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201440%20220%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C70%20C160%2C28%20320%2C112%20480%2C70%20C640%2C28%20800%2C112%20960%2C70%20C1120%2C28%201280%2C112%201440%2C70%20L1440%2C220%20L0%2C220%20Z%27%20fill%3D%27rgba%28241%2C250%2C251%2C0.10%29%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation: wave-drift-reverse 16s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
}

.footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(132px, auto));
  gap: 36px 60px;
  align-items: start;
  text-align: left;
}

.footer .wordmark { color: #fff; margin-right: 0; }
.wordmark--footer { font-size: 19px; }
.footer__tagline {
  margin-top: 12px;
  max-width: 30ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Same uppercase micro-label the page bodies use for .eyebrow, so the footer
   names its groups in the site's existing structural voice. */
.footer__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
}

.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a,
.footer__linkbtn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.15s ease;
}
.footer__links a:hover,
.footer__linkbtn:hover { color: var(--lf-accent-400); }
.footer__linkbtn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.footer__base {
  position: relative;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.footer__base .footer__copy {
  margin-top: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}
/* Companies Act 2006 disclosure: registered name, number, place of
   registration and registered office have to appear on the site, so this
   belongs on every page rather than only the coming-soon one. */
.footer__fineprint {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.52);
}

@media (max-width: 760px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__tagline { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__waterline::before, .footer__current { animation: none !important; }
}

/* ---------- cookie / GDPR notice ---------- */
.consent {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  max-width: 760px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  animation: consent-in 0.5s cubic-bezier(.22,.61,.36,1);
}

.consent[hidden] { display: none; }

@keyframes consent-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.consent__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 24px;
}

.consent__icon { border-radius: 10px; align-self: start; }

.consent__title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--lf-ink-900); margin-bottom: 4px; }
.consent__text { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.consent__text a { color: var(--lf-accent-600); font-weight: 600; text-decoration: underline; }

.consent__actions { display: flex; flex-direction: column; gap: 8px; }
.consent__actions .btn { width: 128px; }

@media (max-width: 640px) {
  .consent__inner { grid-template-columns: 1fr; text-align: left; }
  .consent__icon { display: none; }
  .consent__actions { flex-direction: row; }
  .consent__actions .btn { flex: 1; width: auto; }
}

/* ---------- coming-soon page ---------- */
/* Signature: the page is read as a horizon. Everything above the
   waterline is sky (the bird, in flight, announcing the app); the
   band below is the river it hunts over, moving under its own weight
   and carrying a soft reflection. Literalises the same river the rest
   of the site only hints at with .riverline.
   NOTE: worker.js's folder-invite page reuses .soon__water and its wave
   layers, so changing that markup means changing it in both places. */
.soon {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.soon__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 44px 28px 28px;
  box-sizing: border-box;
}

/* tag-shaped badge — echoes the little link-tag already hanging from
   the kingfisher's beak in the artwork, so "coming soon" reads as a
   tag the bird is about to deliver, not a generic eyebrow label. */
.soon__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lf-accent-600);
  background: var(--card-bg);
  border: 1.5px dashed var(--lf-teal-400);
  border-radius: 8px;
  padding: 7px 16px 7px 22px;
  margin: 0 0 32px;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-soft);
}

.soon__badge::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1.5px solid var(--lf-teal-400);
  background: var(--page-bg);
  transform: translateY(-50%);
}

.soon__bird {
  margin-bottom: 20px;
  filter: drop-shadow(0 18px 30px rgba(23, 30, 39, 0.28));
  animation: bob 4.5s ease-in-out infinite;
}

.soon__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -0.01em;
  color: var(--lf-ink-900);
  margin: 0 0 22px;
}

.soon__headline {
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--lf-ink-900);
}

.soon__sub {
  margin-top: 16px;
  max-width: 480px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* the river: full-bleed so it reads as a real shoreline, not an
   inset card like the rest of the page's content. */
.soon__water {
  position: relative;
  width: 100%;
  height: clamp(140px, 20vh, 200px);
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(47, 160, 178, 0) 0%,
      rgba(47, 160, 178, 0.55) 16%,
      var(--lf-teal-500) 46%,
      var(--lf-teal-deep) 100%);
}

/* Each layer is twice the container's width and carries exactly two copies
   of the wave tile (background-size: 50%). Sliding it left by 50% of its
   own width therefore lands the second tile precisely where the first
   began, so the loop is seamless with no visible jump. The SVG tile is
   built to match: its path starts and ends at the same y (60) with the same
   slope direction, so tile edges join invisibly. */
.soon__wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  will-change: transform;
  /* Each layer is a fixed-height box, so without this its filled body ends
     at a hard horizontal line and the strip just below it composites one
     layer darker — a flat dark band travelling under the foam. Fading the
     body out means every layer's contribution reaches zero gradually and
     the three heights never announce themselves. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, transparent 100%);
}

.soon__wave--back {
  height: 58px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20220'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2C60%20C120%2C18%20240%2C18%20360%2C60%20C480%2C102%20600%2C102%20720%2C60%20C840%2C18%20960%2C18%201080%2C60%20C1200%2C102%201320%2C102%201440%2C60%20L1440%2C220%20L0%2C220%20Z'%20fill%3D'rgba(95%2C190%2C204%2C0.30)'%2F%3E%3C%2Fsvg%3E");
  animation: wave-drift 19s linear infinite, wave-swell 11s ease-in-out infinite;
}

.soon__wave--mid {
  height: 46px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20220'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2C70%20C160%2C28%20320%2C112%20480%2C70%20C640%2C28%20800%2C112%20960%2C70%20C1120%2C28%201280%2C112%201440%2C70%20L1440%2C220%20L0%2C220%20Z'%20fill%3D'rgba(47%2C160%2C178%2C0.42)'%2F%3E%3C%2Fsvg%3E");
  /* Reversed, so the two layers cross rather than travel as one sheet.
     That counter-motion is what sells depth. */
  animation: wave-drift-reverse 13s linear infinite, wave-swell 8s ease-in-out infinite -2s;
}

.soon__wave--front {
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201440%20220'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%2C64%20C90%2C34%20180%2C34%20270%2C64%20C360%2C94%20450%2C94%20540%2C64%20C630%2C34%20720%2C34%20810%2C64%20C900%2C94%20990%2C94%201080%2C64%20C1170%2C34%201260%2C34%201350%2C64%20C1395%2C79%201417%2C79%201440%2C64%20L1440%2C220%20L0%2C220%20Z'%20fill%3D'rgba(241%2C250%2C251%2C0.16)'%2F%3E%3C%2Fsvg%3E");
  animation: wave-drift 8.5s linear infinite, wave-swell 6s ease-in-out infinite -4s;
}

@keyframes wave-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes wave-drift-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* The swell rides on the independent `translate` property rather than
   `transform`, which the horizontal drift already owns — the two compose
   without either overwriting the other, and no wrapper element is needed
   to carry a second animation. Browsers without individual transform
   properties simply drift without bobbing, which still reads as water.
   Deliberately NOT applied to .soon__water itself: translating that
   container up would lift its bottom edge off the footer and flash a
   page-coloured seam between them. */
@keyframes wave-swell {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

.soon__reflection {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 120px;
  height: auto;
  opacity: 0.4;
  filter: blur(1.5px);
  transform: translateX(-50%) scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
}

.soon__footer {
  background: var(--lf-teal-deep);
  padding: 18px 28px 24px;
  text-align: center;
}
.soon__footer .footer__copy { margin-top: 0; color: rgba(255, 255, 255, 0.78); }

/* Companies Act 2006 requires a UK company to show its registered name,
   number, place of registration and registered office on its website, so
   this block is obligatory rather than decorative. Sized down and dimmed
   so it reads as fine print without competing with the wordmark above. */
.soon__legal {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
}
.soon__fineprint {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 480px) {
  .soon__headline { font-size: 22px; }
  .soon__water { height: clamp(110px, 16vh, 150px); }
}

/* ---------- legal doc pages (privacy.html / terms.html) ---------- */
.legal {
  padding: 56px 28px 100px;
  max-width: 760px;
}

.legal__updated { font-size: 13px; color: var(--text-tertiary); margin-top: 10px; }

.legal h1 { font-size: 38px; line-height: 1.15; }

.legal__intro {
  margin-top: 20px;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.legal section { margin-top: 44px; }

.legal h2 {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  color: var(--lf-ink-900);
  margin-bottom: 14px;
}

.legal h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--lf-ink-800);
  margin: 20px 0 8px;
}

.legal p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.legal ul { margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.legal ul li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lf-teal-500);
}
.legal ul li strong { color: var(--text-primary); }

.legal a { color: var(--lf-accent-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.legal__callout {
  margin-top: 44px;
  padding: 22px 24px;
  background: var(--lf-teal-50);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
}
.legal__callout p { color: var(--lf-ink-800); margin-bottom: 0; }
.legal__callout p + p { margin-top: 8px; }

/* ---------- the ads pledge (privacy.html / help.html) ----------
   The one line in the ads section a reader is actually looking for, so it
   is set as a standing statement rather than the tail of a paragraph. A
   white card against the page's pale sky reads as a held-up claim, and is
   deliberately unlike .legal__callout (teal-tinted, page-scoped asides) so
   the two never blur into one another.
   NOTE the doubled class in the child selectors: `.legal p` / `.help p` are
   (0,1,1) and would otherwise win over a bare single class and drag the
   claim back to 15px body grey. */
.pledge {
  margin: 28px 0 18px;
  padding: 20px 24px;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--action-primary);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-soft);
}
.pledge .pledge__claim {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1.3;
  color: var(--lf-ink-900);
}
.pledge .pledge__detail {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ---------- help page (help.html) ----------
   Shares the legal pages' prose scale so the two read as one library,
   but wider: help carries card grids and a jump nav that a 760px
   column squeezes. Type rules are duplicated rather than added to the
   .legal selectors, so a change to one page's reading rhythm can't
   silently move the other's. */
.help {
  padding: 56px 28px 100px;
  max-width: 860px;
}

.help__head { max-width: 700px; }
.help h1 { font-size: 38px; line-height: 1.15; margin-top: 6px; }

.help__intro {
  margin-top: 18px;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Topic index. Chip-shaped so it reads as a set of destinations rather
   than a paragraph of links, and wraps to as many rows as it needs. */
.help__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  padding: 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.help__jump a {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lf-teal-50);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--lf-accent-600);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.help__jump a:hover {
  background: var(--action-primary);
  border-color: var(--action-primary);
  color: #fff;
  transform: translateY(-1.5px);
}

.help section { margin-top: 52px; scroll-margin-top: 88px; }

.help h2 {
  font-size: 25px;
  color: var(--lf-ink-900);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.help h3 {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--lf-ink-800);
  margin: 26px 0 8px;
}

.help p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.help ul { margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px; }
.help ul li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.help ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lf-teal-500);
}
.help ul li strong { color: var(--text-primary); }

.help a { color: var(--lf-accent-600); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.help__jump a { text-decoration: none; }

/* The five ways to catch a link: parallel, equally weighted options,
   so a grid of small cards rather than another bullet list. */
.help__cards {
  display: grid;
  /* min() so the track can't hold a 215px floor wider than the column
     itself on a 320pt screen and push the grid into overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 14px;
  margin: 22px 0 20px;
}
.help__card {
  padding: 18px 18px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
}
.help__card h3 {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--lf-ink-900);
  margin: 0 0 7px;
}
.help__card p { font-size: 14px; line-height: 1.6; margin-bottom: 0; }

/* Native <details>, so the FAQ needs no JavaScript and stays keyboard
   and screen-reader operable for free. */
.faq {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  margin-bottom: 10px;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 18px;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--lf-ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--action-primary);
  border-bottom: 2px solid var(--action-primary);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); top: 25px; }
.faq[open] summary { color: var(--action-primary); }
.faq p {
  padding: 0 18px 18px;
  margin-bottom: 0;
  font-size: 14.5px;
}

@media (prefers-reduced-motion: reduce) {
  .help__jump a, .faq summary::after { transition: none; }
}

@media (max-width: 640px) {
  /* Both pages sit inside main.wrap, which already supplies the 28px
     gutter, so their own 28px was doubling it and eating 112px of a
     375pt screen. Dropped here only: on desktop the doubled inset is
     what sets the reading measure. */
  .help, .legal { padding-left: 0; padding-right: 0; }
  .help { padding-top: 40px; }
  .help h1 { font-size: 30px; }
  .help h2 { font-size: 21px; }
  .help__jump { padding: 16px; }
  .pledge { padding: 18px; }
  .legal__callout { padding: 18px; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .hero__stage { margin-top: 20px; }
  .hero__headline { font-size: 40px; }
  .catchflow { grid-template-columns: 1fr; }
  .catchflow::before { display: none; }
  /* Six feature cards, so the tablet step is two columns rather than
     dropping straight to one and making the section a long scroll. */
  .featuregrid { grid-template-columns: repeat(2, 1fr); }
  .showcase { grid-template-columns: 1fr; }
  .showcase__stage { order: -1; }
  .tiergrid { grid-template-columns: 1fr; }
  .tier--featured { translate: 0; }
  .nav__links { display: none; }
  section.wrap { padding-top: 64px; }
}

@media (max-width: 620px) {
  .featuregrid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__headline { font-size: 32px; }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .phone { width: 100%; max-width: 300px; }
}