/* ===========================================================================
   FishingLicensee Canada — site stylesheet
   Consumes /assets/css/tokens.css exclusively. No magic numbers: every
   dimension, colour, radius, shadow and duration below resolves to a token.
   Serves the homepage (src/marketing/home.html) and every generated
   marketing/legal page (src/marketing/pages.ts).
   ========================================================================= */

/* ---- Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: var(--fw-semibold); }

.eyebrow {
  display: block;
  margin: 0 0 var(--gap-eyebrow-heading);
  font-size: var(--fs-overline);
  line-height: var(--lh-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--brand-600);
}
.eyebrow--light { color: var(--brand-300); }

.lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: 62ch;
}
.footnote {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-muted);
  max-width: var(--measure);
}
/* Prices, counts and reference numbers align in columns. */
.num { font-variant-numeric: tabular-nums; }

/* ---- Layout primitives -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-read); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-sunken); }
.section__title { max-width: 26ch; }
.section__title--light { color: var(--text-on-dark); }

/* Section head → content rhythm */
.section__head { margin-bottom: var(--gap-subhead-content); }
.section__head .lede { margin-top: var(--gap-heading-subhead); }

.grid { display: grid; gap: var(--grid-gap); }
.grid > * { min-width: 0; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- Skip link ---------------------------------------------------------- */
.skiplink {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--brand-600);
  color: var(--text-on-dark);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skiplink:focus { top: var(--space-4); }

/* ---- Buttons (Part 4.1) ------------------------------------------------- */
.btn {
  --btn-h: var(--btn-h-md);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding-inline: var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--brand-600);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-xs);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--brand-700); box-shadow: var(--shadow-sm); }
.btn:active { background: var(--brand-800); }
/* Every button clears the 44px target even at the small size. */
.btn::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--tap-min);
  transform: translateY(-50%);
}
.btn--sm { --btn-h: var(--btn-h-sm); padding-inline: var(--space-4); font-size: var(--fs-body-sm); }
.btn--lg {
  --btn-h: var(--btn-h-lg);
  padding-inline: var(--space-8);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.btn--accent { background: var(--brand-600); }
.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.34);
  color: var(--text-on-dark);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.5); }
.btn--secondary {
  background: var(--surface);
  border-color: var(--neutral-300);
  color: var(--neutral-700);
}
.btn--secondary:hover { background: var(--neutral-50); border-color: var(--neutral-400); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--neutral-100);
  color: var(--neutral-400);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--block { width: 100%; }

/* ---- Focus (one treatment, everywhere) ---------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.on-dark :where(a, button):focus-visible,
:where(.hero, .cta, .band--rules, .footer) :where(a, button, select):focus-visible {
  outline-color: #FFFFFF;
}

/* ---- Cards (Part 4.4) --------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  box-shadow: var(--shadow-xs);
}
.card--highlight { border-color: var(--brand-600); background: var(--brand-50); }

/* ---- Logo (Part 3.8) ---------------------------------------------------- */
.ap-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-decoration: none;
  /* Clear space: at least the mark's own cap height on every side. */
  padding: var(--space-1) 0;
}
.ap-logo picture { display: block; line-height: 0; }
.ap-logo__img { display: block; height: var(--logo-h); width: auto; }
.ap-logo__canada { display: flex; align-items: center; gap: 5px; }
.ap-logo__canada svg { width: 13px; height: 13px; }
.ap-logo__canada span {
  font-size: var(--logo-canada);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3em;
  color: var(--navy);
  line-height: 1;
}
.footer .ap-logo__canada span, .on-dark .ap-logo__canada span { color: #FFFFFF; }

/* ---- Tags / chips ------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--brand-600);
  color: var(--text-on-dark);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---- Top disclaimer (Part 8: honest, legible, never greyed out) --------- */
.top-disclaimer {
  background: var(--neutral-100);
  border-bottom: 1px solid var(--hairline);
  color: var(--neutral-600);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  padding: 4px var(--gutter);

}
.top-disclaimer__short { display: inline; }
.top-disclaimer__full { display: none; }
@media (min-width: 768px) {
  .top-disclaimer__short { display: none; }
  .top-disclaimer__full { display: inline; }
}

/* ---- Header (Part 4.4 / 5.1) -------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
/* Scrolled state — set by the page script past 80px. Fixed height in both
   states, so the transition can never shift layout. */
.header[data-stuck="true"] {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-h);
}
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--space-8); }
}
.nav a {
  position: relative;
  padding-block: var(--space-2);
  color: var(--neutral-600);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--neutral-900); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand-600);
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav a[aria-current="true"] { color: var(--neutral-900); }
.nav a[aria-current="true"]::after { opacity: 1; }
.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-right: calc(-1 * var(--space-2));
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--neutral-800);
  cursor: pointer;
}
.burger:hover { background: var(--neutral-100); }
@media (min-width: 1024px) { .burger { display: none; } }

/* Mobile drawer — right-hand sheet, focus-trapped by the page script. */
.mobilenav {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(88vw, var(--drawer-w));
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slower) var(--ease-out), visibility var(--dur-slower);
  overflow-y: auto;
}
.mobilenav[data-open="true"] { transform: none; visibility: visible; }
.mobilenav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--neutral-700);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.mobilenav a:hover { background: var(--neutral-50); color: var(--neutral-900); }
.mobilenav__head { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.mobilenav__cta { margin-top: auto; padding-top: var(--space-6); }
.mobilenav__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(16,24,40,0.40);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slower) var(--ease-out), visibility var(--dur-slower);
}
.mobilenav__scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* ---- Hero (Part 5.2) ---------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--text-on-dark);
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,37,64,0.72) 0%, rgba(10,37,64,0.55) 45%, rgba(10,37,64,0.78) 100%);
}
@media (min-width: 1024px) {
  /* Side-weighted on desktop so the left column always clears 4.5:1 while
     the photograph stays readable on the right. */
  .hero__overlay {
    background:
      linear-gradient(90deg, rgba(10,37,64,0.92) 0%, rgba(10,37,64,0.78) 46%, rgba(10,37,64,0.42) 100%);
  }
}
.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-10) var(--space-12);
  min-height: 0;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--space-16);
    min-height: var(--hero-min);
    padding-block: var(--section-y-feature);
  }
}
.hero h1 {
  color: var(--text-on-dark);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  max-width: var(--measure-display);
}
.hero__sub {
  margin-top: var(--gap-heading-subhead);
  max-width: 58ch;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: #DCE6F2;
}
.photocred {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-2);
  z-index: 1;
  /* 13px floor: a photo credit is legible text, so it is made subtle with
     colour rather than by shrinking below the minimum type size. */
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: rgba(255,255,255,0.58);
}
.photocred--hero { right: var(--space-4); }

/* Hero start card — the hero's product */
.quick {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--card-pad);
  color: var(--text);
}
@media (min-width: 768px) { .quick { padding: var(--space-8); } }
.quick__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--neutral-700);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}
.quick__row { display: grid; gap: var(--space-3); }
.quick__select {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-10) 0 var(--space-4);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  color: var(--neutral-900);
  font-family: inherit;
  font-size: var(--fs-body); /* 16px — prevents iOS zoom */
  line-height: var(--control-h);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.quick__select:hover { border-color: var(--neutral-400); }
.quick__select:focus-visible {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: var(--focus-ring);
}
.quick__note {
  margin-top: var(--space-4);
  color: var(--neutral-500);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* ---- Trust strip (Part 5.3) — merged trust points + figures ------------- */
.trust { background: var(--surface-sunken); border-bottom: 1px solid var(--hairline); }
.trust__inner { padding-block: var(--space-12); }
@media (min-width: 1024px) { .trust__inner { padding-block: var(--space-16); } }
.trust__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}
@media (min-width: 1024px) { .trust__points { grid-template-columns: repeat(4, 1fr); } }
.trust__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--neutral-600);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.trust__point svg { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); color: var(--brand-600); margin-top: 1px; }
.trust__rule { height: 1px; background: var(--hairline); margin-block: var(--space-10); border: 0; }
.trust__figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
@media (min-width: 1024px) { .trust__figures { grid-template-columns: repeat(4, 1fr); } }
.figure__n {
  display: block;
  color: var(--neutral-900);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: var(--tr-h2);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.figure__cap {
  display: block;
  margin-top: var(--space-2);
  color: var(--neutral-500);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  max-width: 26ch;
}

/* ---- Steps (Part 5.4) --------------------------------------------------- */
.steps { display: grid; gap: var(--space-6); position: relative; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } }
.step { display: flex; flex-direction: column; gap: var(--space-4); }
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--marker);
  height: var(--marker);
  border-radius: var(--radius-full);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.step p { color: var(--neutral-600); max-width: 60ch; }

/* ---- Comparison (Part 5.5) --------------------------------------------- */
.compare { display: grid; gap: var(--grid-gap); align-items: start; }
@media (min-width: 768px) { .compare { grid-template-columns: repeat(2, 1fr); } }
.compare__card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.compare__card h3 { padding-right: var(--space-24); }
.compare__card .tag { position: absolute; top: var(--card-pad); right: var(--card-pad); }
.compare__list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.compare__list li {
  display: flex;
  gap: var(--space-3);
  color: var(--neutral-600);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.compare__list svg { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); margin-top: 1px; }
.compare__list .i-yes { color: var(--success-600); }
.compare__list .i-no  { color: var(--neutral-400); }
.compare__cta { margin-top: auto; padding-top: var(--space-2); }

/* ---- Province cards (Part 5.6) ------------------------------------------ */
.prov {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.prov:hover { border-color: var(--neutral-300); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.prov:focus-visible { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; }
.prov__name { color: var(--neutral-900); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-h4); }
.prov__count { color: var(--neutral-500); font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; }
.prov__price {
  margin-top: var(--space-4);
  color: var(--neutral-900);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.prov__price span { color: var(--neutral-500); font-weight: var(--fw-regular); }
.prov__link {
  margin-top: var(--space-3);
  color: var(--brand-600);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.prov:hover .prov__link { color: var(--brand-700); }

/* ---- Split (media + prose) ---------------------------------------------- */
.split { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-16); }
  .split--reverse .split__media { order: 2; }
}
.split__media { position: relative; }
.split__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-2xl);
}
.split__body { display: flex; flex-direction: column; gap: var(--space-6); }

/* ---- Essentials list ---------------------------------------------------- */
.essentials { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; }
.essentials > div { padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.essentials > div:first-child { padding-top: 0; border-top: 0; }
.essentials h4 { margin-bottom: var(--space-2); }
.essentials p { color: var(--neutral-600); max-width: var(--measure); }

/* ---- Rules band (dark) -------------------------------------------------- */
.band { padding-block: var(--section-y); }
.band--rules { background: var(--navy); color: var(--text-on-dark); }
.band--rules h2, .band--rules h3, .band--rules h4 { color: var(--text-on-dark); }
.band__grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) { .band__grid { grid-template-columns: repeat(3, 1fr); } }
.rulecard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--card-pad);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-lg);
}
.rulecard p { color: #C6D4E4; font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.rulecard__link {
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--brand-300);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.rulecard__link:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.rulecard__sources, .seasons__cap {
  margin-top: var(--space-8);
  color: #9DB0C6;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

/* ---- Editorial: seasons + fisheries (Part 5.8) -------------------------- */
.seasons { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) { .seasons { grid-template-columns: repeat(3, 1fr); } }
.season { display: flex; flex-direction: column; gap: var(--space-4); }
.season figure { margin: 0; position: relative; }
.season img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.season h4 { color: var(--neutral-900); }
.season p { color: var(--neutral-600); font-size: var(--fs-body-sm); line-height: var(--lh-body); }

.fishery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.fishery > figure { margin: 0; position: relative; }
.fishery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fishery__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--card-pad) var(--card-pad);
  flex: 1;
}
.fishery__body p { color: var(--neutral-600); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.fishery__cta {
  margin-top: auto;
  padding-top: var(--space-2);
  color: var(--brand-600);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
}
/* Photo credit inside a media figure sits on the image, not below it. */
.season figure .photocred, .fishery > figure .photocred { position: absolute; right: var(--space-3); bottom: var(--space-2); }

/* ---- FAQ accordion (Part 4.4) ------------------------------------------- */
.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-child { border-top: 1px solid var(--hairline); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--row-min);
  padding-block: var(--space-4);
  color: var(--neutral-900);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: var(--icon-md);
  height: var(--icon-md);
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq__answer { padding-bottom: var(--space-6); }
.faq__answer p { color: var(--neutral-600); max-width: var(--measure); }
.faq__answer p + p { margin-top: var(--space-4); }
.faq__more { margin-top: var(--space-8); color: var(--neutral-600); font-size: var(--fs-body-sm); }
.faq__more a { color: var(--brand-600); }

/* ---- Final CTA (Part 5.10) ---------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
  color: var(--text-on-dark);
  padding-block: var(--section-y-feature);
  text-align: center;
}
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,37,64,0.82) 0%, rgba(10,37,64,0.72) 50%, rgba(10,37,64,0.88) 100%); }
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.cta h2 { color: var(--text-on-dark); max-width: 18ch; }
.cta p { color: #DCE6F2; font-size: var(--fs-body-lg); max-width: 56ch; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.cta__note { color: #B6C6D8; font-size: var(--fs-caption); line-height: var(--lh-caption); }

/* ---- Sticky mobile CTA (Part 4.4) --------------------------------------- */
.stickycta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 24px -12px rgba(16,24,40,0.22);
  transform: translateY(0);
  transition: transform var(--dur-slower) var(--ease-out), visibility var(--dur-slower);
}
.stickycta .btn { flex: 1; }
.stickycta--hidden { transform: translateY(110%); visibility: hidden; }
@media (min-width: 1024px) { .stickycta { display: none; } }

/* ---- Footer (Part 5.11) ------------------------------------------------- */
.footer { background: var(--navy); color: #C6D4E4; padding-block: var(--space-16) var(--space-10); }
.footer__grid { display: grid; gap: var(--space-10); }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-12); } }
.footer h3 {
  margin-bottom: var(--space-4);
  color: #FFFFFF;
  font-size: var(--fs-overline);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.footer li a, .footer .addr a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: #C6D4E4;
  font-size: var(--fs-body-sm);
  text-decoration: none;
}
.footer li a:hover, .footer .addr a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 2px; }
.footer__one { color: #B6C6D8; font-size: var(--fs-body-sm); line-height: var(--lh-body); max-width: 38ch; }
/* Disclaimer is a first-class citizen (Part 8), not fine print. */
.footer__legal {
  margin-top: var(--space-12);
  padding: var(--space-6);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  color: #C6D4E4;
  font-size: var(--fs-caption);
  line-height: 1.6;
}
.footer__legal p + p { margin-top: var(--space-3); }
.footer__copy {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline-dark);
  color: #9DB0C6;
  font-size: var(--fs-caption);
}

/* ---- Prose / legal pages (pages.ts) ------------------------------------- */
.prose, .legal__body { max-width: var(--container-read); }
.prose p, .legal__body p { color: var(--neutral-600); margin-bottom: var(--space-4); }
.prose h2, .legal__section h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h3, .legal__section h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.legal__head { padding-block: var(--section-y) var(--space-10); }
.legal__dates { color: var(--neutral-500); font-size: var(--fs-body-sm); margin-top: var(--space-4); }
.legal__toc {
  margin-block: var(--space-8);
  padding: var(--card-pad);
  background: var(--surface-sunken);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.legal__toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.legal__toc a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--brand-600); font-size: var(--fs-body-sm); }
.legal__section { padding-bottom: var(--space-8); }
.bullets { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--neutral-600); }
.bullets li { margin-bottom: var(--space-2); }
.bullets li::marker { color: var(--neutral-400); }
.callout {
  padding: var(--card-pad);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-lg);
  color: var(--neutral-700);
}
.addr { font-style: normal; color: var(--neutral-600); }
.portals { display: grid; gap: var(--space-2); }
.contact__email { color: var(--brand-600); font-weight: var(--fw-medium); }

/* ---- Reveal (Part 3.6 — 240ms, 16px, ease-out, once) -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Pointer-only hover, so a tap never leaves a stuck hover state (Part 7.2). */
@media (hover: none) {
  .prov:hover { transform: none; box-shadow: var(--shadow-xs); border-color: var(--hairline); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIS-AUDIT fix pass (DEF-003…DEF-013). Placed last so these rules win the
   cascade on equal specificity — several defects were specificity collisions
   where a section rule (.season p, .cta p) outranked a component rule.
   ═════════════════════════════════════════════════════════════════════════ */

/* DEF-003/004/007 — photo credits sat on raw photography at ratios as low as
   1.03:1, and .season p / .cta p outranked .photocred and repainted three of
   them dark-on-dark. A credit must be legible over ANY frame, so it carries
   its own scrim rather than relying on the image behind it. */
.photocred,
.season figure p.photocred,
.fishery > figure p.photocred,
.hero p.photocred,
.cta p.photocred {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  margin: 0;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(16, 24, 40, 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #FFFFFF;                 /* 8.6:1 on the scrim above */
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-regular);
  max-width: calc(100% - var(--space-8));
}
.hero p.photocred, .cta p.photocred { right: var(--space-4); }

/* DEF-006 — the hero eyebrow measured 3.64:1 against the scrim. brand-300 is
   an on-white accent; over photography it needs to be near-white. */
.hero .eyebrow--light { color: #DDE8FA; }
/* The dark rules band sits on flat navy, where brand-300 clears 4.5:1. */
.band--rules .eyebrow--light { color: var(--brand-300); }

/* DEF-011 — .cta p (0,1,1) outranked .cta__note and repainted the refund line
   as 18px body copy. Restore the caption treatment at equal specificity. */
.cta p.cta__note {
  color: #B6C6D8;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  max-width: 60ch;
}

/* DEF-008 — inline section links measured 32px tall against a 44px minimum.
   They are text links, so the box grows rather than the type. */
.rulecard__link, .fishery__cta, .faq__more a, .prov__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* DEF-009 — a short footer link ("FAQ") was 25px wide: min-height padded the
   height but nothing padded the width. Pad inline and pull the row back so
   the visual left edge is unchanged. */
.footer li a, .footer .addr a {
  padding-inline: var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  min-width: var(--tap-min);
}

/* DEF-012 — the trust strip hardcoded its own padding instead of the section
   rhythm token, landing 48px short of --section-y at desktop. */
.trust__inner { padding-block: var(--section-y); }

/* DEF-013 — no generic anchor colour existed, so prose and FAQ links rendered
   in the browser default #0000EE. */
main a { color: var(--brand-600); text-underline-offset: 2px; }
main a:hover { color: var(--brand-700); }
/* Links that are already styled as controls or cards keep their own colour. */
main a.btn, main a.prov, main a.ap-logo, main a.rulecard__link,
main a.fishery__cta, main a.prov__link, main a.skiplink { color: inherit; }
main a.btn { color: var(--text-on-dark); }
main a.btn--secondary { color: var(--neutral-700); }
main a.rulecard__link { color: var(--brand-300); }
main a.fishery__cta, main a.prov__link { color: var(--brand-600); }


/* DEF-116 — the sticky mobile CTA is `position:fixed`, so at maximum scroll it
   sat on top of the copyright line with no further scroll available: the text
   was unreachable, not merely tight. Reserve its height at the end of the
   document while it is on screen. */
/* DEF-116 — reserved UNCONDITIONALLY on mobile rather than gated on the bar
   being visible: gating created a feedback loop, because revealing the bar
   added padding, which grew the scroll height, so the document could never
   reach its true bottom and the copyright stayed covered. The footer carries
   the reservation (not the body) so the navy surface still runs to the end of
   the scroll instead of leaving a bare strip beneath it. */
@media (max-width: 1023.98px) {
  .footer {
    padding-bottom: calc(var(--space-10) + var(--space-20) + env(safe-area-inset-bottom));
  }
}