/* ============================================================
   Furrow landing pages - shared shell
   ------------------------------------------------------------
   Header, nav, footer, buttons, bands, cards and forms. Every
   one of the four pages uses this file; page-specific rules
   live in their own stylesheet and there is currently only one
   (calculators.css).

   Colours, type and spacing come from tokens.css. No hex codes
   below this line.
   ============================================================ */

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header is ~59px; keep anchored sections clear of it. */
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

@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;
  }
}

body {
  margin: 0;
  /* Guards the 320px floor: nothing may squeeze narrower. */
  min-width: 320px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--t-lg);
  line-height: var(--lh-body);
  color: var(--soil);
  -webkit-font-smoothing: antialiased;
  /* Long product codes and URLs must not push the page sideways. */
  overflow-wrap: break-word;
}

img { max-width: 100%; }

a { color: var(--crop); }
a:hover { color: var(--paddock); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  color: var(--iron);
}

input, select, textarea, button { font-family: var(--font-body); }

/* One focus treatment, everywhere. Visible on light and on dark. */
:focus-visible {
  outline: 3px solid var(--paddock);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: -100px;
  z-index: 100;
  background: var(--harvest);
  color: var(--iron);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  padding: 12px 18px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; color: var(--iron); }

/* ---------- Layout ---------- */

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

.band { padding: var(--band-y) 0; }
.band--light { background: var(--white); }
.band--stubble { background: var(--stubble); }
.band--dark { background: var(--iron); color: var(--white); }

/* A dark band with photography behind it: <img> + scrim + content. */
.band--photo {
  position: relative;
  background: var(--iron);
  overflow: hidden;
}
.band--photo > .wrap,
.band--photo > .band__body { position: relative; }

.band__bg {
  position: absolute;
  inset: 0;
  display: block;
}
.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.band__scrim { position: absolute; inset: 0; }

/* The four scrim recipes used across the approved pages. */
.band__scrim--hero {
  background: linear-gradient(100deg, rgba(26,26,26,0.82) 0%, rgba(26,26,26,0.55) 45%, rgba(26,26,26,0.18) 100%);
}
.band__scrim--hero-deep {
  background: linear-gradient(100deg, rgba(26,26,26,0.94) 0%, rgba(26,26,26,0.8) 45%, rgba(26,26,26,0.45) 100%);
}
.band__scrim--flat {
  background: linear-gradient(rgba(35,35,35,0.82), rgba(35,35,35,0.92));
}
.band__scrim--form {
  background: linear-gradient(110deg, rgba(35,35,35,0.95) 0%, rgba(35,35,35,0.82) 45%, rgba(35,35,35,0.6) 100%);
}
.band__scrim--module {
  background: linear-gradient(100deg, rgba(35,35,35,0.94) 0%, rgba(35,35,35,0.85) 55%, rgba(35,35,35,0.7) 100%);
}

/* Opacity of the photo under a scrim, per the designs. */
.band__bg--35 img { opacity: 0.35; }
.band__bg--40 img { opacity: 0.4; }
.band__bg--30 img { opacity: 0.3; }

/* Two-column band: collapses to one column below the min track. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}
.split--narrow {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/*
  Home hero: give the headline column the larger share.
  "Liquid Delivery Systems." is 594px wide at the 56px display size, against
  an equal-split column of 542px - so it broke to two lines. Weighting the
  grid 1.15/0.85 gives the headline ~623px and lets it hold one line, with
  no reduction in type size. The card side still clears its own 380px cap.

  Only above 740px, which is where auto-fit forms two columns; below that the
  hero is a single column and the default rule applies.

  :not(.hero--sm) keeps this to the HOME hero. The guides hero is also a
  .hero .split, but its right column holds the three-cover fan, and squeezing
  it to 0.85 left the covers wider than their column.
*/
@media (min-width: 740px) {
  .hero:not(.hero--sm) .split { grid-template-columns: 1.15fr 0.85fr; }
}

/* ---------- Header + nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(43, 43, 43, 0.94);
  border-bottom: 1px solid var(--border-on-dark);
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .site-header {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.site-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__logo img {
  height: 30px;
  width: auto;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 12px 20px;
}

.site-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: var(--w-semibold);
  /* Nav labels never break mid-word - a hard requirement on phones. */
  white-space: nowrap;
}
.site-nav a:hover { color: var(--leaf); }
.site-nav a[aria-current='page'] {
  color: var(--leaf);
  box-shadow: inset 0 -2px 0 var(--harvest);
}
/* The nav CTA keeps its own colours on hover and when current. */
.site-nav .btn:hover,
.site-nav .btn[aria-current='page'] { color: var(--white); box-shadow: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 14px;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 13px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/*
  Below 1040px the nav cannot sit on one row. The busiest page (calculators)
  carries seven items and overflows the header, pushing the whole page
  sideways, right up to 1000px wide - measured, not guessed. They collapse into a
  disclosure panel instead. See NOTES.md - the approved design relies on
  flex-wrap, which fails the 44px-target and no-mid-word-break requirements.
*/
@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 16px;
    background: rgba(43, 43, 43, 0.98);
    border-bottom: 1px solid var(--border-on-dark);
  }
  .site-nav.is-open { display: flex; }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 4px 2px;
    font-size: 16px;
    border-bottom: 1px solid var(--border-on-dark);
  }
  .site-nav a[aria-current='page'] { box-shadow: none; }
  .site-nav .btn {
    justify-content: center;
    margin-top: 14px;
    border-bottom: 0;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 15px 30px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-base);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Harvest orange - THE focal action. One per view. */
.btn--primary { background: var(--harvest); color: var(--white); }
.btn--primary:hover { background: var(--harvest-hover); color: var(--white); }

/* Paddock green - secondary action, and the calculator's own submit. */
.btn--green { background: var(--paddock); color: var(--white); }
.btn--green:hover { background: var(--crop); color: var(--white); }

/* Iron - action on a light or orange band. */
.btn--dark { background: var(--iron); color: var(--white); }
.btn--dark:hover { background: #111111; color: var(--white); }

/* Ghost on a dark band. */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
  font-weight: var(--w-semibold);
}
.btn--ghost:hover { background: var(--white); color: var(--iron); }

/* Outline on a light band. */
.btn--outline {
  background: transparent;
  color: var(--crop);
  border-color: var(--paddock);
}
.btn--outline:hover { background: var(--paddock); color: var(--white); }

/* Outline on the orange cross-sell strip. */
.btn--outline-dark {
  background: transparent;
  color: var(--iron);
  border: 2px solid var(--iron);
}
.btn--outline-dark:hover { background: var(--iron); color: var(--white); }

.btn--md { padding: 14px 26px; font-size: var(--t-sm); }
.btn--sm { padding: 10px 18px; font-size: var(--t-xs); letter-spacing: var(--ls-label); }
.btn--block { display: flex; width: 100%; }
.btn--submit { padding: 14px; font-size: var(--t-base); letter-spacing: var(--ls-label); }

.btn[aria-disabled='true'] { opacity: 0.65; cursor: progress; }

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Section furniture ---------- */

/* 3px Harvest keyline + green label. The keyline is one of the three
   focal devices - a view that uses it should not also shout in orange. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 3px;
  height: 22px;
  background: var(--harvest);
  flex-shrink: 0;
}
.eyebrow__text {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--leaf);
}
.eyebrow--on-light .eyebrow__text { color: var(--crop); }
.eyebrow--tight { margin-bottom: 14px; }
.eyebrow--sm::before { height: 16px; }
.eyebrow--sm .eyebrow__text {
  font-size: 12px;
  color: var(--on-dark-muted);
}

/* Label with no keyline - used above centred section headings. */
.eyebrow-plain {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-eyebrow-wide);
  text-transform: uppercase;
  color: var(--crop);
  margin-bottom: 10px;
}
.eyebrow-plain--on-dark { color: var(--leaf); }

.section-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head--tight { margin-bottom: 44px; }

.h-section {
  font-size: var(--d-2);
  line-height: var(--lh-tight);
  margin: 0 0 14px;
}
.h-band {
  font-size: var(--d-1);
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--white);
}

/* 60x4 Harvest rule under a centred heading. */
.rule {
  width: 60px;
  height: 4px;
  background: var(--harvest);
  margin: 0 auto;
  border: 0;
}

/* The tagline. Always italic, always exactly this wording. */
.tagline {
  background: var(--harvest);
  color: var(--iron);
  font-style: italic;
  font-weight: var(--w-bold);
  padding: 3px 10px;
  border-radius: 2px;
}

.lede {
  font-size: var(--t-lead);
  color: var(--on-dark);
  margin: 0 0 28px;
  max-width: 54ch;
}
.lede--light { color: var(--text-body-soft); }

/* ---------- Hero ---------- */

/*
  A hero element carries BOTH `band` and `hero`, and .band already applies
  --band-y vertically. Without this reset the two stack (84px + 100px =
  184px each end), which is what pushed the hero past the fold and left the
  copy and card sitting low. The approved design has one set of padding on
  the inner wrap, so .band's is cancelled here and --hero-y is the only
  vertical rhythm in a hero.
*/
.hero { color: var(--white); background: var(--iron-deep); padding-top: 0; padding-bottom: 0; }
.hero .wrap { padding-top: var(--hero-y); padding-bottom: var(--hero-y); }
.hero--sm .wrap { padding-top: var(--hero-y-sm); padding-bottom: var(--hero-y-sm); }

.hero h1 {
  font-size: var(--d-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0 0 16px;
  color: var(--white);
}
.hero--sm h1 { font-size: var(--d-hero-sm); }

/* The tagline capsule inside the home h1. */
.hero__tagline {
  display: inline-block;
  background: var(--harvest);
  color: var(--iron);
  font-style: italic;
  font-weight: var(--w-bold);
  font-size: 0.5em;
  line-height: 1.3;
  letter-spacing: 0;
  padding: 5px 16px;
  border-radius: var(--r-sm);
  margin-top: 14px;
}

.hero__col { max-width: 600px; }

/* Glass card beside the hero copy. */
.hero__aside {
  background: rgba(56, 56, 55, 0.82);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-xl);
  padding: 28px;
  max-width: 420px;
  justify-self: end;
}

/*
  In the home hero the card is shorter than the copy column, so the grid's
  align-items:center parks it in the vertical middle - directly over the
  seeder rig, which is the one thing the photo is there to show. Pinning it
  to the top of the row lifts it clear of the rig without moving the copy,
  and narrowing it gives the right-hand side of the frame back to the photo.
*/
.hero .hero__aside {
  align-self: start;
  max-width: 380px;
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .hero__aside {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
@media (max-width: 820px) {
  .hero__aside { justify-self: stretch; max-width: none; }
}

.panel-title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--d-5);
  margin-bottom: 12px;
  color: var(--white);
}

.tick-list,
.bullet-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: var(--t-sm);
  color: var(--on-dark);
}
.bullet-list { padding-left: 18px; }

/* ---------- Trust strip ---------- */

.trust-strip {
  background: var(--stubble);
  border-top: 4px solid var(--paddock);
  padding: 36px 0;
}
.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 28px 0;
}
.trust-item {
  text-align: center;
  padding: 0 22px;
  border-right: 1px solid rgba(100, 164, 57, 0.3);
}
.trust-item:last-child { border-right: 0; }
/* One column: vertical dividers would be wrong, so drop them. */
@media (max-width: 660px) {
  .trust-item { border-right: 0; }
}
.trust-item__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  border: 2px solid var(--paddock);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.trust-item__figure {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--crop);
  line-height: 1.15;
  margin-bottom: 4px;
}
.trust-item__label { font-size: 14px; color: #444444; }

/* ---------- Reason cards (the four "problems we solve") ---------- */

.reason-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.reason {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px 26px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--harvest);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  align-items: start;
}
.reason__head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.reason__num {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: 38px;
  color: var(--harvest);
  line-height: 1;
}
.reason h3 {
  font-size: var(--d-4);
  margin: 0 0 8px;
}
.reason p {
  font-size: var(--t-sm);
  color: var(--text-body-soft);
  margin: 0;
}
.reason__proof {
  background: var(--stubble);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-size: var(--t-card);
  color: var(--iron);
}
.reason__proof strong { color: var(--crop); }

/* ---------- Review cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}
.review {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.review__quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #444444;
  font-style: italic;
  flex: 1;
}
.review__by {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.review__name {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 14px;
  letter-spacing: var(--ls-label);
  color: var(--crop);
  text-transform: uppercase;
}
.review__src {
  font-size: 11px;
  font-weight: var(--w-semibold);
  letter-spacing: 0.06em;
  color: var(--gravel);
  text-transform: uppercase;
}

/* ---------- Guide cards ("Which guide should you read?") ---------- */

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
  align-items: stretch;
}

.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-card);
}

/*
  The real cover, captured from page 1 of the document itself, tucked into
  the top-right corner. It sits mostly outside the card so it reads as an
  object laid on top rather than a picture inside it.
*/
.guide-card__thumb {
  position: absolute;
  top: -14px;
  right: -12px;
  width: clamp(58px, 6.4vw, 78px);
  display: block;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(35, 35, 35, 0.3);
  transform: rotate(4deg);
  border: 1px solid rgba(255, 255, 255, 0.65);
}
.guide-card__thumb img { display: block; width: 100%; height: auto; }

/* Keep the tag and heading clear of the thumbnail. */
.guide-card__head { padding-right: clamp(56px, 7vw, 76px); }

.guide-card__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin: 0 0 16px;
}
.guide-card__tag { margin-bottom: 12px; }
.guide-card__tag--iron { background: rgba(43, 43, 43, 0.08); color: var(--iron); }
.guide-card__tag--green { background: rgba(100, 164, 57, 0.16); color: var(--crop); }
/* Amber tint on white. #8A4E00 on the resulting wash is ~7:1. */
.guide-card__tag--amber { background: rgba(241, 144, 28, 0.16); color: #8A4E00; }

.guide-card h3 {
  font-size: var(--d-3);
  /* Without this it inherits the body's 1.65 and the two-line headings gape. */
  line-height: var(--lh-tight);
  margin: 0 0 14px;
}

/*
  Deliberately tighter than the site's default list. Five bullets x three
  cards at the standard 14.5px/1.65 made this section 936px tall against a
  720px viewport - the reader could not see a whole card and its CTA at
  once. 13px/1.45 with a smaller gap brings the tallest card down without
  making the text uncomfortable; it is scannable detail, not body copy.
*/
.guide-card__list {
  color: var(--text-body-soft);
  gap: 7px;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.45;
}

/* Pushed to the bottom so the CTAs line up across cards of unequal height. */
.guide-card__actions {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-card__all {
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-xs);
  color: var(--crop);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-card__all:hover { color: var(--paddock); }

/* ---------- Guide cover mock-ups ---------- */

/*
  Three covers as one overlapping fan, never wrapping.
  Laid side by side at their design width they total 3 x 190 + gaps = 614px
  against a ~566px hero column, so they used to wrap to an ugly 2-above-1.
  Everything below is driven off one fluid --cover-w, so the trio keeps its
  single-row fan from 1440px right down to 320px: the covers shrink and
  overlap instead of stacking. Total width is 2.56 x --cover-w, which stays
  inside the column at every breakpoint.
*/
.covers {
  --cover-w: clamp(96px, 14.5vw, 190px);
  --cover-pad: clamp(7px, 1.2vw, 16px);
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}
.cover {
  width: var(--cover-w);
  /* Hold true A4 proportions. Without this the cover is content-height, so
     as the width shrinks on a phone the wrapped text forces it taller and
     the mock-ups stop looking like documents. overflow guards the case
     where the type still will not fit. */
  aspect-ratio: 794 / 1123;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 5px;
  box-shadow: var(--shadow-cover);
  padding: var(--cover-pad);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.55vw, 8px);
}
/* The overlap. Proportional to the cover, so the fan holds its shape. */
.cover + .cover { margin-left: calc(var(--cover-w) * -0.22); }

/*
  Stacking ascends left to right, so each cover overlaps the one to its LEFT.
  Every cover's own left edge - where its logo, title and keyline sit - stays
  clear, and the last cover is fully visible. (Putting the middle one on top
  buried the left edge of the third, which is exactly where its title starts.)
*/
.cover:nth-child(1) { transform: rotate(-5deg); z-index: 1; }
.cover:nth-child(2) { transform: rotate(0deg); z-index: 2; }
.cover:nth-child(3) { transform: rotate(5deg); z-index: 3; }
/* Colour only - rotation and stacking come from :nth-child above. */
.cover--dark { background: var(--iron); }
.cover--green { background: var(--crop); }
/* Third cover: deeper charcoal rather than a new hue, so the three read as
   a set without spending any of the orange budget. */
.cover--deep { background: var(--iron-deep); border: 1px solid var(--border-on-dark); }

/* Everything inside scales with the cover, or the type would overflow a
   96px-wide cover on a phone. */
.cover img {
  height: clamp(10px, 1.3vw, 16px);
  width: auto;
  align-self: flex-start;
}
.cover__keyline {
  height: 3px;
  width: clamp(18px, 2.5vw, 32px);
  background: var(--harvest);
}
.cover__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  /* Sized to fit inside the A4 box. At 21px the longer titles ran to four
     lines and needed up to 41px more height than the cover has. */
  font-size: clamp(10.5px, 1.28vw, 16.5px);
  line-height: 1.1;
  color: var(--white);
  /* Long titles must not blow the cover out at small sizes. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.cover__sub {
  font-size: clamp(9px, 0.85vw, 10.5px);
  font-weight: var(--w-semibold);
  line-height: 1.45;
  color: var(--on-dark-muted);
}
/*
  Below this the covers are pinned at their 96px minimum, and title + sub
  will not both fit inside an A4 box at that width. The sub is decorative
  detail that is repeated verbatim in the guide cards below, so it is the
  thing to drop rather than letting the mock-up stretch out of proportion.
*/
@media (max-width: 900px) {
  .cover__sub { display: none; }
}
.cover--green .cover__sub { color: rgba(255, 255, 255, 0.85); }
.cover__foot {
  /* Pinned to the base of the cover, like the real document's footer. */
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: clamp(5px, 0.65vw, 8px);
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(8px, 0.78vw, 9.5px);
  letter-spacing: 0.08em;
  color: var(--leaf);
  text-transform: uppercase;
}
.cover--green .cover__foot {
  border-top-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}

/* ---------- Spec rows (Friction Flow / rate control) ---------- */

.spec-list { display: flex; flex-direction: column; }
.spec {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.spec:last-child { border-bottom: 1px solid var(--hairline); }
.spec__term {
  width: 110px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--crop);
  text-transform: uppercase;
  padding-top: 2px;
}
.spec__def { font-size: var(--t-sm); color: #444444; }
/* Term over definition once the row gets tight. */
@media (max-width: 460px) {
  .spec { flex-direction: column; gap: 4px; }
  .spec__term { width: auto; }
}

.pull-quote {
  background: var(--stubble);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 18px 0 22px;
  font-size: var(--t-card);
  color: var(--iron);
  font-style: italic;
}
.pull-quote__by {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  color: var(--crop);
  text-transform: uppercase;
}

.figure-frame {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-panel);
  background: var(--white);
}
.figure-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 300px;
}

/* ---------- Product cards ---------- */

/*
  Five product cards. auto-fit at minmax(210px) needs 1138px and the wrap
  gives 1132 - six pixels short, so it silently dropped to four columns and
  orphaned the fifth on its own row.

  Rather than shave the minimum and leave it one rounding error from
  breaking again, the desktop row is stated explicitly: five equal columns
  from 1060px up, where each card is still ~186px and the 140px media band
  reads properly. Below that it falls back to auto-fit, which handles the
  narrower breakpoints on its own.
*/
.product-grid {
  display: grid;
  /* 240 rather than 200 so the fallback lands on 3 + 2 rather than 4 + 1.
     With five cards an orphan is unavoidable below the five-up breakpoint;
     3 + 2 reads as deliberate, 4 + 1 reads as broken. */
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}
@media (min-width: 1060px) {
  .product-grid { grid-template-columns: repeat(5, 1fr); }
}
/* Not links. The cards used to point at the main site, which took people
   off the microsite mid-journey, so they are plain blocks now - no href,
   no hover lift, nothing that suggests they are clickable. */
.product {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.product__media {
  height: 140px;
  overflow: hidden;
  background: var(--stubble);
}
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.product__title {
  border-left: 3px solid var(--harvest);
  padding-left: 10px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--d-5);
  line-height: var(--lh-tight);
  color: var(--iron);
}
.product__body p {
  margin: 0;
  padding-left: 13px;
  font-size: var(--t-card);
  color: var(--text-body-soft);
  flex: 1;
}

/* Benefit card on a dark band. */
.benefit {
  background: var(--iron-lift);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.benefit__media { height: 130px; overflow: hidden; }
.benefit__media--white { background: var(--white); }
.benefit__media img { width: 100%; height: 100%; object-fit: cover; }
.benefit__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.benefit__title {
  border-left: 3px solid var(--harvest);
  padding-left: 10px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--d-4);
  line-height: var(--lh-tight);
  color: var(--white);
}
.benefit__body p {
  margin: 0;
  padding-left: 13px;
  font-size: var(--t-card);
  color: rgba(255, 255, 255, 0.8);
}

.hairline-bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 34px);
}

/* ---------- Partner strip ---------- */

/*
  Compatibility strip. Deliberately typographic, not logos - see NOTES.md.
  The names are set as machined nameplates: uppercase Barlow on a white
  chip with a Paddock underline, which reads as a spec plate rather than a
  borrowed brand mark. That keeps the compatibility claim factual and
  avoids implying endorsement.
*/
.partner-strip {
  background: var(--stubble);
  border-top: 4px solid var(--paddock);
  padding: 34px 0 30px;
}
.partner-strip .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Label centred between two hairlines, echoing the section rules elsewhere. */
.partner-strip__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gravel);
  text-align: center;
}
.partner-strip__label::before,
.partner-strip__label::after {
  content: '';
  height: 1px;
  width: clamp(16px, 6vw, 64px);
  background: var(--hairline);
  flex-shrink: 0;
}

.partner-strip__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.partner-strip__name {
  font-family: var(--font-display);
  font-weight: var(--w-heavy);
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iron);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-bottom: 2px solid var(--paddock);
  border-radius: var(--r-sm);
  padding: 9px 15px;
  white-space: nowrap;
}

/* ---------- Orange cross-sell strip ---------- */

.cta-strip {
  background: var(--harvest);
  padding: 36px 0;
  text-align: center;
  color: var(--iron);
}
.cta-strip .wrap { max-width: 820px; }
.cta-strip h2 {
  font-size: var(--d-strip);
  margin: 0 0 8px;
  color: var(--iron);
}
.cta-strip p { margin: 0 0 18px; font-size: 15.5px; }
.cta-strip .btn-row { justify-content: center; }

/* ---------- Forms ---------- */

/*
  Kept tighter than a general-purpose form. The home quote card ran 719px
  inside an 887px band against a 900px viewport, leaving the band almost
  touching the top and bottom of the screen. The rhythm below trims roughly
  45px without crowding anything: fields still clear 44px targets.
*/
.form-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-form);
  max-width: 520px;
  width: 100%;
  justify-self: end;
  /* Anchors the visually-hidden honeypot to the card, not the page. */
  position: relative;
}
@media (max-width: 820px) {
  .form-card { justify-self: stretch; max-width: none; }
}
@media (max-width: 420px) {
  .form-card { padding: 24px 20px; }
}

.form-card h3 {
  font-size: 20px;
  margin: 0 0 4px;
}
.form-card__helper {
  font-size: var(--t-xs);
  color: var(--gravel);
  font-weight: var(--w-semibold);
  margin: 0 0 14px;
}

/* Paired fields. Collapse to one column before they get cramped. */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 11px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.field-row .field { margin-bottom: 0; }
.field--last { margin-bottom: 14px; }

.field > label,
.field-label {
  font-family: var(--font-display);
  /* Was inheriting the body 1.65, making a 12px label 20px tall. */
  line-height: 1.25;
  font-weight: var(--w-semibold);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--iron);
}
.field-label__note {
  font-weight: var(--w-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--gravel);
  font-size: var(--t-fine);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  /* 15px would trigger iOS zoom-on-focus at 16px; 16px avoids it entirely. */
  font-size: 16px;
  min-height: var(--tap);
  padding: 11px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--soil);
}
.field textarea { resize: vertical; min-height: 72px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--paddock);
  box-shadow: var(--focus-ring-input);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--paddock);
  outline-offset: 1px;
}

/*
  Controls are 46px tall so touch targets clear 44px. That matters on a
  phone; on a mouse-driven screen it is just height, and six of them made
  the quote card 683px. Pointer-fine screens get 40px, which is a normal
  desktop control size. iOS and Android report pointer:coarse, so they are
  untouched and still clear 44px.
*/
@media (pointer: fine) {
  .field input,
  .field select,
  .field textarea { min-height: 40px; padding: 8px 12px; }
}

.field input:disabled,
.field select:disabled {
  background: var(--stubble);
  color: var(--gravel);
  cursor: not-allowed;
}

/* Field-level validation message. */
.field-error {
  font-size: 12.5px;
  font-weight: var(--w-semibold);
  color: var(--hazard);
  margin: 0;
}
.field input[aria-invalid='true'],
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'] { border-color: var(--hazard); }

/* Checkbox in a bordered card (guide picker). */
/*
  Single column, always. Two guides sat side by side comfortably, but the
  form card is only ~456px wide inside its padding - three across would be
  ~145px each, too narrow for a GUIDE n tag plus a title. Stacked is also
  easier to scan and to tap.
*/
.check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.check-card {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 11px 12px;
  cursor: pointer;
  font-size: var(--t-card);
  color: var(--iron);
  min-width: 0;
}
.check-card:hover { border-color: var(--paddock); }
.check-card:focus-within { border-color: var(--paddock); box-shadow: var(--focus-ring-input); }
.check-card input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--crop);
  flex-shrink: 0;
}
.check-card__head {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.check-card__tag {
  background: var(--iron);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}
.check-card__tag--green { background: var(--crop); }
/* Guide 3. Harvest with Iron text - the tagline-capsule treatment. A 10px
   tag is not a focal device, and three visually distinct tags is the point
   of having them. Iron on Harvest is 7.5:1, comfortably AA. */
.check-card__tag--amber { background: var(--harvest); color: var(--iron); }

/*
  Guide picker, lifted out of the form card and onto the dark band beside it.
  Three rich checkboxes plus seven contact fields made the form card very
  tall; the selection is a different decision from "who are you", so it now
  sits with the pitch copy on the left.

  The inputs stay associated with the form via HTML's `form="guides-form"`
  attribute, so they still submit. See js/forms.js -> buildPayload.
*/
.guide-picker {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.guide-picker__legend {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--leaf);
  margin-bottom: 10px;
  padding: 0;
}
.guide-picker .check-grid { margin-bottom: 0; }

.check-card--on-dark {
  background: rgba(56, 56, 55, 0.78);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--white);
}
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  .check-card--on-dark {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.check-card--on-dark:hover { border-color: var(--leaf); }
.check-card--on-dark:focus-within {
  border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(143, 201, 99, 0.35);
}
.check-card--on-dark .check-card__sub { color: var(--on-dark-muted); }
/*
  Tags keep their own colours on dark. An earlier blanket
  `.check-card--on-dark .check-card__tag { background: var(--iron-deep) }`
  overrode the amber modifier's background but not its Iron text colour,
  giving Guide 3 near-black text on a near-black pill.

  All three carry their own background and pass AA as-is:
    Guide 1  white on Iron      13.9:1
    Guide 2  white on Crop       4.6:1
    Guide 3  Iron on Harvest     5.9:1
*/
.check-card__head strong {
  font-family: var(--font-display);
  line-height: 1.25;
}
.check-card__sub {
  font-size: 12px;
  color: var(--gravel);
  display: block;
  margin-top: 3px;
}

/* Standalone checkbox row. */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-card);
  color: var(--text-body-soft);
  margin-bottom: 16px;
  min-height: var(--tap);
  cursor: pointer;
}
.check-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--crop);
  flex-shrink: 0;
}

/* Honeypot. Off-screen but still focusable-by-bot; hidden from AT. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile sits where the dashed placeholder was in the designs. */
.turnstile-slot {
  margin-bottom: 12px;
  min-height: 65px;
}
.turnstile-slot:empty::before {
  content: 'Loading security check...';
  display: block;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--gravel);
}

/*
  Live read-back of which guides are ticked. The selection is made further up
  the page, next to the pitch copy, so this confirms it at the point of
  committing - otherwise the visitor is filling in a form with no visible
  reminder of what it delivers.
*/
.chosen-summary {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-left: 3px solid var(--paddock);
  background: var(--stubble);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  color: var(--iron);
  line-height: 1.5;
}
.chosen-summary:empty { display: none; }
.chosen-summary--warn {
  border-left-color: var(--harvest);
  background: rgba(241, 144, 28, 0.1);
  color: #8A4E00;
}

/* Form-level status message. Always inline, never an alert(). */
.form-status {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  line-height: 1.5;
}
.form-status:empty { display: none; }
.form-status--error {
  background: rgba(198, 75, 51, 0.08);
  border-left: 3px solid var(--hazard);
  color: #93301c;
}
.form-status--error a { color: #93301c; font-weight: var(--w-bold); }

.form-legal {
  font-size: var(--t-fine);
  color: var(--gravel);
  font-weight: var(--w-semibold);
  margin: 10px 0 0;
  line-height: 1.5;
}
.form-legal a { color: var(--crop); }

/* Shown only when JS is unavailable. */
.no-js-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--harvest);
  background: var(--stubble);
  font-size: var(--t-xs);
  color: var(--iron);
}

/* Success panel - Iron, orange keyline, tagline. Replaces the form. */
.success-panel {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-form);
  max-width: 520px;
  width: 100%;
  justify-self: end;
  border-top: 4px solid var(--harvest);
}
@media (max-width: 820px) {
  .success-panel { justify-self: stretch; max-width: none; }
}
.success-panel h3 {
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--crop);
}
.success-panel p {
  font-size: var(--t-sm);
  color: #444444;
  margin: 0 0 8px;
}
.success-panel p:last-child {
  font-size: var(--t-xs);
  color: var(--gravel);
  margin-bottom: 0;
}
.success-panel__tagline {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

/* Guide download list, revealed on the guides success panel. */
.download-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.download-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--harvest);
  border-radius: var(--r-md);
  background: var(--stubble);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-sm);
  color: var(--iron);
  text-decoration: none;
}
.download-list a:hover { border-color: var(--paddock); border-left-color: var(--harvest); color: var(--crop); }
.download-list__meta {
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  font-size: var(--t-fine);
  color: var(--gravel);
  white-space: nowrap;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--soil);
  color: rgba(255, 255, 255, 0.78);
  padding: 50px 0 30px;
  font-size: 14px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 40px;
  margin-bottom: 36px;
}
.site-footer img {
  height: 32px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}
.site-footer p { margin: 0; max-width: 36ch; color: rgba(255, 255, 255, 0.7); }
.site-footer__title {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow-wide);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--leaf); }
.site-footer__contact a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__base {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--on-dark-faint);
}

/* ---------- Privacy notice bar ---------- */

/*
  A notice, not a consent gate. Australia has no opt-in cookie requirement;
  APP 5 asks that people be told what is collected and why. So it informs,
  links to the policy, and closes - it never blocks the page.
*/
.privacy-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(31, 31, 31, 0.97);
  border-top: 3px solid var(--harvest);
  color: var(--on-dark);
  transform: translateY(100%);
  transition: transform 0.22s ease;
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .privacy-notice {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.privacy-notice.is-open { transform: translateY(0); }
.privacy-notice.is-closing { transform: translateY(100%); }

.privacy-notice__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 16px;
}

.privacy-notice__text {
  margin: 0;
  flex: 1;
  font-size: var(--t-xs);
  line-height: 1.55;
}
.privacy-notice__link {
  color: var(--leaf);
  font-weight: var(--w-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.privacy-notice__link:hover { color: var(--white); }

.privacy-notice__close {
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--on-dark-muted);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-md);
  cursor: pointer;
}
.privacy-notice__close:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }

@media (max-width: 560px) {
  .privacy-notice__inner { align-items: flex-start; gap: 12px; }
  .privacy-notice__text { font-size: 12.5px; }
}

/* ---------- Document pages (privacy policy) ---------- */

.doc-head { padding: clamp(40px, 5vw, 64px) 0; }
.doc-head h1 {
  font-size: var(--d-2);
  line-height: var(--lh-tight);
  color: var(--white);
  margin: 0 0 10px;
}
.doc-head__meta {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--on-dark-muted);
}

/* Long-form prose. Narrow measure, because this is meant to be read. */
.prose {
  max-width: 72ch;
  color: var(--soil);
}
.prose__lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--iron);
  margin: 0 0 20px;
}
.prose h2 {
  font-size: var(--d-4);
  line-height: var(--lh-tight);
  margin: 38px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.prose h3 {
  font-size: var(--t-lg);
  line-height: var(--lh-tight);
  margin: 24px 0 8px;
}
.prose p { margin: 0 0 14px; font-size: var(--t-base); line-height: 1.7; }
.prose ul {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: var(--t-base);
  line-height: 1.6;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--stubble);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--iron); }

/* ---------- Link colours on dark bands ---------- */

.on-dark { color: var(--white); }
.on-dark p { color: var(--on-dark); }
.on-dark a:not(.btn) { color: var(--leaf); font-weight: var(--w-bold); }
.on-dark a:not(.btn):hover { color: var(--white); }
.text-muted-dark { font-size: 14px; color: var(--on-dark-muted); margin: 0; }
.text-note { margin: 18px 0 0; font-size: 14px; color: var(--gravel); }
.text-note a { font-weight: var(--w-bold); text-decoration: underline; text-underline-offset: 3px; }