/* ============================================================
   CatchScan — Fish Identifier landing site
   Palette: deep-water teal (app brand) + lure orange + keeper green
   Type: Bricolage Grotesque (display) / Public Sans (body) / IBM Plex Mono (measurements)

   SPACING — every value is a graduation on a 4px scale, the same
   measuring-board idea as the .ruler dividers. Nothing sits between
   ticks; if a gap feels wrong, move it one tick, don't invent a value.
   ============================================================ */

/* ---------- self-hosted fonts ----------
   Latin subsets only, pulled from Google Fonts and served from this origin so
   first paint doesn't wait on fonts.googleapis.com + fonts.gstatic.com.
   Bricolage and Public Sans are variable: one file covers their whole weight range.
   ---------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/public-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0b2430;          /* deep harbor navy — body text */
  --ink-soft: #3d5a66;     /* muted text */
  --deep: #0e3a47;         /* dark section background */
  --deeper: #082631;       /* darkest — footer, hero base */
  --water: #127c87;        /* app brand teal */
  --water-bright: #1ba3ae; /* teal highlight on dark */
  --foam: #f2f7f6;         /* page background */
  --mist: #e0edee;         /* card / tint background */
  --lure: #ff6b35;         /* lure orange — CTA */
  --lure-deep: #e0521d;    /* CTA hover */
  --keeper: #2e9e6b;       /* keeper-stamp green */
  --line: #cfe0e1;         /* hairlines on light */
  --white: #ffffff;
  --shot-ground: #0c4d73;  /* solid ground baked into the app screenshots */
  --seal: #f0b429;         /* NOAA trust-badge gold */

  --font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  /* minor ticks */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  /* major ticks */
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* fluid vertical rhythm — scales with viewport instead of snapping */
  --space-section: clamp(56px, 7.5vw, 96px);  /* padding inside a section  */
  --space-block: clamp(36px, 5vw, 64px);      /* between blocks in a section */

  --header-h: 64px;

  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1140px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s4)); }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--foam);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--water); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--lure);
  outline-offset: 2px;
  border-radius: var(--s1);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--water);
}
.on-dark .eyebrow { color: var(--water-bright); }

.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-soft); max-width: 58ch; }
.on-dark .lede { color: #bcd6da; }

/* ---------- ruler divider (measuring-board motif) ---------- */
.ruler {
  height: var(--s5);
  border: 0;
  background:
    repeating-linear-gradient(90deg,
      var(--line) 0 2px, transparent 2px 24px) bottom left / 100% 10px no-repeat,
    repeating-linear-gradient(90deg,
      var(--line) 0 2px, transparent 2px 120px) bottom left / 100% 18px no-repeat;
}
.ruler.on-dark-ruler {
  background:
    repeating-linear-gradient(90deg,
      #1d4f5c 0 2px, transparent 2px 24px) bottom left / 100% 10px no-repeat,
    repeating-linear-gradient(90deg,
      #1d4f5c 0 2px, transparent 2px 120px) bottom left / 100% 18px no-repeat;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 38, 49, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27, 163, 174, 0.25);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s5);
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--white);
  text-decoration: none;
}
/* the icon asset carries its own rounded-square mask — no second radius */
.brand img { width: 34px; height: 34px; }
.site-nav { display: flex; gap: var(--s5); margin-left: auto; }
.site-nav a {
  color: #cde7ea;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--white); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(27, 163, 174, 0.35), transparent 60%),
    linear-gradient(180deg, var(--deeper) 0%, var(--deep) 78%, var(--deep) 100%);
  color: var(--white);
  overflow: hidden;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s7);
  align-items: center;
  /* asymmetric on purpose: the verdict card overhangs the lower edge */
  padding-top: var(--space-block);
  padding-bottom: var(--space-section);
}
.hero h1 { color: var(--white); margin: var(--s3) 0 var(--s4); }
.hero h1 .keeper-word { color: var(--water-bright); }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s6); }
.store-badge img, .store-badge svg { height: 54px; width: auto; }
.store-badge { display: inline-block; transition: transform 0.15s ease; }
.store-badge:hover { transform: scale(1.04); }
.hero-meta {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: #9fc6cc;
  letter-spacing: 0.04em;
}
.hero-proof { display: flex; gap: var(--s5); margin-top: var(--s6); flex-wrap: wrap; }
.proof { border-left: 3px solid var(--water-bright); padding-left: var(--s3); }
.proof strong { display: block; font-family: var(--font-display); font-size: 1.25rem; }
.proof span { font-size: 0.85rem; color: #9fc6cc; }

/* hero visual: screenshot + floating verdict card */
.hero-visual { position: relative; justify-self: center; }
.hero-shot {
  width: min(340px, 78vw);
  border-radius: 34px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}
.verdict-card {
  position: absolute;
  left: -84px;
  bottom: 54px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--s4);
  width: 232px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  transform: rotate(-3deg);
}
.verdict-card .vc-species { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.verdict-card .vc-latin { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; }
.verdict-card .vc-rule {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 2px solid var(--mist);
  color: var(--ink-soft);
}
.stamp {
  display: inline-block;
  margin-top: var(--s3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--keeper);
  border: 3px solid var(--keeper);
  border-radius: var(--s2);
  padding: var(--s1) var(--s3);
  transform: rotate(-4deg);
}

@media (prefers-reduced-motion: no-preference) {
  .verdict-card { animation: bob-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.3s backwards; }
  @keyframes bob-in {
    from { opacity: 0; transform: rotate(-3deg) translateY(26px); }
    to { opacity: 1; transform: rotate(-3deg) translateY(0); }
  }
}

/* ---------- sections ---------- */
.section { padding: var(--space-section) 0; }
.section-dark { background: linear-gradient(180deg, var(--deep), var(--deeper)); color: var(--white); }
.section-dark h2 { color: var(--white); }
.section-tint { background: var(--mist); }
.section-head { max-width: 720px; margin-bottom: var(--space-block); }
.section-head h2 { margin: var(--s3) 0 var(--s4); }

/* A ruler only ever sits between two sections of the SAME background, where
   full padding on both sides reads as dead space. Halve it on each side so the
   ruler marks the join instead of floating in a gap. Where the background
   changes instead, full padding stays — it reads as the block's own inset. */
.ruler + .section { padding-top: var(--space-block); }
.section:has(+ .ruler) { padding-bottom: var(--space-block); }
/* the band under the hero is a continuation of it, not a fresh chapter */
.hero + .section { padding-top: var(--space-block); }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); counter-reset: step; }
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s6) var(--s5);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--water);
  border: 1.5px solid var(--water);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
}
.step h3 { margin: var(--s4) 0 var(--s2); }
.step p { color: var(--ink-soft); font-size: 0.98rem; }
.chip-row { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Premium qualifier — subordinate to the NOAA seal on purpose: it labels a
   tier, it doesn't sell one. Matches the outlined step-number pill. */
.premium-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--water);
  border: 1.5px solid var(--water);
  border-radius: 999px;
  padding: 0 var(--s2);
  line-height: 1.7;
  vertical-align: 0.15em;
  white-space: nowrap;
}
h3 .premium-tag, li .premium-tag { margin-left: var(--s2); }

.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--mist);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  color: var(--ink-soft);
}

/* ---------- feature rows ---------- */
.feature-list { display: flex; flex-direction: column; gap: var(--space-block); }
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s7);
  align-items: center;
}
.feature-row-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.feature-row-flip .feature-media { order: 2; }
.feature-media {
  background: var(--shot-ground);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 360px;
  width: 100%;
  justify-self: center;
  box-shadow: 0 24px 52px rgba(11, 36, 48, 0.26);
}
.feature-media img { display: block; width: 100%; height: auto; }
.feature-copy h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: var(--s3) 0 var(--s4);
}
.feature-copy p { color: var(--ink-soft); margin-bottom: var(--s4); max-width: 54ch; }
.feature-copy strong { color: var(--ink); font-weight: 700; }

/* NOAA seal — a credential, so it reads identically wherever it appears */
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--seal);
  color: #3d2c00;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: var(--s2) var(--s4);
}
.trust-badge span { font-size: 0.9rem; line-height: 1; }
.feature-copy .trust-badge { margin-bottom: var(--s5); max-width: none; }
.hero .trust-badge { margin-top: var(--s5); }

/* ---------- guides grid ---------- */
.guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.guide-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11, 36, 48, 0.12);
}
.guide-card .gc-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--water);
}
.guide-card h3 { font-size: 1.05rem; }
.guide-card p { font-size: 0.88rem; color: var(--ink-soft); flex-grow: 1; }
.guide-card .gc-more { font-weight: 700; font-size: 0.88rem; color: var(--lure-deep); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
.faq-list details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--s3);
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: var(--s4) calc(var(--s7) + var(--s2)) var(--s4) var(--s5);
  position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: var(--s5);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--water);
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list .faq-body { padding: 0 var(--s5) var(--s5); color: var(--ink-soft); }
.faq-body a { font-weight: 700; color: var(--lure-deep); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .wrap { max-width: 760px; }
.cta-band .app-icon { width: 96px; height: 96px; margin: 0 auto var(--s5); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); border-radius: 22px; }
.cta-band h2 { margin-bottom: var(--s4); }
.cta-band .hero-badges { justify-content: center; }
.cta-band .cta-lede { margin: 0 auto var(--s2); }
.cta-band .cta-meta { margin-top: var(--s4); }
.hero-meta-light { color: var(--ink-soft); }

/* ---------- 404 ---------- */
.error-band { text-align: center; }
.error-band .eyebrow { margin-bottom: var(--s3); }
.error-band h1 { color: var(--white); font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: var(--s4); }
.error-band .lede { margin: 0 auto; }
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: center;
  margin-top: var(--s6);
}
.btn-primary, .btn-quiet {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border-radius: 999px;
  padding: var(--s3) var(--s5);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--lure); color: var(--deeper); }
.btn-primary:hover { background: #ff8256; }
.btn-quiet { color: var(--white); border: 2px solid rgba(255, 255, 255, 0.35); }
.btn-quiet:hover { border-color: var(--white); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--deeper);
  color: #9fc6cc;
  padding: var(--space-block) 0 var(--s6);
  font-size: 0.9rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s7); margin-bottom: var(--s6); }
.site-footer .brand { margin-bottom: var(--s3); }
.footer-blurb { margin-top: var(--s3); max-width: 34ch; }
.site-footer h3 { color: var(--white); font-size: 0.95rem; margin-bottom: var(--s3); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: var(--s2); }
.site-footer a { color: #9fc6cc; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-legal {
  border-top: 1px solid #123c4a;
  padding-top: var(--s5);
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

/* ---------- guide article pages ---------- */
.article-hero { background: linear-gradient(180deg, var(--deeper), var(--deep)); color: var(--white); padding: var(--space-block) 0 var(--s7); }
.article-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); color: var(--white); margin-top: var(--s3); }
.breadcrumbs { font-family: var(--font-mono); font-size: 0.78rem; }
.breadcrumbs a { color: #9fc6cc; text-decoration: none; }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs span { color: #6c99a1; }

.article { padding: var(--space-block) 0; }
.article .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s7); align-items: start; }
.article-body { max-width: 68ch; }
.article-body h2 { font-size: 1.6rem; margin: var(--s7) 0 var(--s4); }
.article-body h3 { margin: var(--s5) 0 var(--s3); }
.article-body p { margin-bottom: var(--s4); }
.article-body ul, .article-body ol { margin: 0 0 var(--s4) var(--s5); }
.article-body li { margin-bottom: var(--s2); }
.article-body .callout {
  background: var(--mist);
  border-left: 4px solid var(--water);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s4) var(--s5);
  margin: var(--s5) 0;
}
.article-body .callout strong { font-family: var(--font-display); }
.article-body figure { margin: var(--s5) 0; }
.article-body figure img { border-radius: 20px; box-shadow: 0 16px 36px rgba(11, 36, 48, 0.18); max-width: 300px; }
.article-body figcaption { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-soft); margin-top: var(--s3); }

.article-aside { position: sticky; top: calc(var(--header-h) + var(--s4)); display: flex; flex-direction: column; gap: var(--s5); }
.aside-cta {
  background: linear-gradient(160deg, var(--deep), var(--deeper));
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  text-align: center;
}
.aside-cta img.app-icon { width: 72px; height: 72px; margin: 0 auto var(--s3); }
.aside-cta h3 { color: var(--white); margin-bottom: var(--s2); }
.aside-cta p { font-size: 0.88rem; color: #bcd6da; margin-bottom: var(--s4); }
.aside-related { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.aside-related h3 { font-size: 0.95rem; margin-bottom: var(--s3); }
.aside-related ul { list-style: none; }
.aside-related li { margin-bottom: var(--s2); font-size: 0.9rem; }
.aside-related a { text-decoration: none; font-weight: 600; }
.aside-related a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { margin-top: var(--s5); }
  .verdict-card { left: auto; right: -8px; bottom: 30px; }
  .steps { grid-template-columns: 1fr; }
  .feature-row, .feature-row-flip { grid-template-columns: 1fr; gap: var(--s6); }
  .feature-row-flip .feature-media { order: 0; }
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
  .article .wrap { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .site-nav { display: none; }
}
@media (max-width: 560px) {
  .guides-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .verdict-card { width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}