/* ==========================================================================
   Personal Paparazzi - website refresh
   Design system per Marketing Guidelines draft 0.2
   Figtree only, Ink Navy linework and text, Paparazzi Green as accent.
   Proportion target: ~60% neutral ground, ~30% Ink Navy, ~10% green.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("figtree-var.woff2") format("woff2") tech(variations);
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (Figma design system) */
  --ink: #122234;          /* Neutral 900  - all text, linework, dark ground */
  --green: #84D85B;        /* Primary 500  - accent only, never text on light */
  --muted: #5A6270;        /* body-safe muted, 5.69:1 on ground */
  --line: #D1D5D7;         /* Neutral 100  - dividers, quiet fields */
  --ground: #F6F6F6;       /* Neutral 50   - page background */
  --surface: #FFFFFF;      /* cards */
  --slate: #5474A5;        /* Slate Blue   - bands and surfaces */
  --slate-deep: #33506C;
  --tan: #C5A773;          /* logo artwork only, decorative */

  /* Type */
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --track-display: -0.02em;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.0625rem;
  --step-lead: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --step-h3: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --step-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
  --step-h1: clamp(2.125rem, 1.4rem + 2.6vw, 3.125rem);
  --step-stat: clamp(2rem, 1.5rem + 2vw, 3rem);

  /* Space + shape */
  --gutter: clamp(1.25rem, 1rem + 2vw, 3rem);
  --section-y: clamp(2.5rem, 2rem + 2vw, 4rem);
  --wrap: 84rem;
  --wrap-narrow: 44rem;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow: 0 1px 2px rgba(18, 34, 52, 0.04), 0 8px 24px -12px rgba(18, 34, 52, 0.16);
}

/* --------------------------------------------------------------- reset ---- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul { margin: 0; padding: 0; }

/* QA: green on a pale background is nearly invisible. Navy is the default, and
   the green only comes out on the dark grounds where navy would vanish. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.page-head :focus-visible,
.closing :focus-visible,
.latest :focus-visible,
.occasions-band .section__head :focus-visible,
.calc__out :focus-visible,
.earnings :focus-visible,
.site-footer .mark ~ * :focus-visible { outline-color: var(--green); }

.skip-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* The hidden attribute has to win. Cards and fields are flex or grid, and a
   display rule on the element itself would otherwise keep them on screen. */
[hidden] { display: none !important; }

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

/* -------------------------------------------------------------- layout ---- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }

/* the header is sticky, so anchored sections must not land underneath it */
[id] { scroll-margin-top: 6rem; }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* Title on top, the line that introduces it underneath. Side by side made the
   two halves compete, and the reader had to jump the gutter to finish the
   thought. The head still runs the full width of the section. */

.section__head {
  max-width: none;
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.section__head p {
  color: var(--muted);
  font-size: var(--step-lead);
  margin-top: 0.75rem;
}
/* Kept so existing markup keeps working; it no longer changes anything. */
.section__head--stack { max-width: none; }

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Navy on green: 9.17:1 */
.btn--primary {
  background: var(--green);
  color: var(--ink);
  box-shadow: 0 6px 18px -6px rgba(132, 216, 91, 0.6);
}
.btn--primary:hover {
  background: #93e06d;
  box-shadow: 0 10px 24px -8px rgba(132, 216, 91, 0.75);
}

/* The one button the page is really asking you to press. */
.btn--lg {
  min-height: 56px;
  padding: 0.875rem 2rem;
  font-size: 1.0625rem;
}
@media (min-width: 48rem) {
  .btn--lg { min-height: 60px; padding: 1rem 2.25rem; font-size: 1.125rem; }
}

/* On light grounds */
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #1b3350; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: rgba(18, 34, 52, 0.06); }

.btn--onDark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--onDark:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

/* --------------------------------------------------------- store badges --- */

.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
}
.stores a {
  display: block;
  border-radius: 10px;
  transition: transform 0.12s ease;
}
.stores a:hover { transform: translateY(-2px); }
.stores img { height: 48px; width: auto; }

.stores--sm img { height: 42px; }

/* -------------------------------------------------------------- header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
@media (min-width: 48rem) { .brand img { height: 46px; } }

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.5rem + 1vw, 1.75rem);
  list-style: none;
}
.nav__list a {
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink);
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav__list a:hover { border-bottom-color: var(--green); }
.nav__list a[aria-current] { border-bottom-color: var(--green); font-weight: 700; }

/* .nav__list a sets its own padding, which was overriding the pill's. */
.nav__list a.btn {
  padding: 0.5rem 1.125rem;
  border-bottom: 0;
}
.nav__list a.btn:hover { border-bottom: 0; }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: var(--step--1);
  cursor: pointer;
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (min-width: 62rem) {
  .nav { display: block; margin-left: auto; }   /* sits with the CTA, at the right */
  .nav-toggle { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 0.5rem 0 1.25rem;
}
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 62rem) { .mobile-nav { display: none !important; } }

.mobile-nav ul { list-style: none; }
.mobile-nav ul a {
  display: block;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-weight: 600;
}
.mobile-nav ul a:hover { color: var(--ink); background: rgba(132, 216, 91, 0.1); }
.mobile-nav .btn { display: inline-flex; margin-top: 1.25rem; }

/* ---------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% 40%;
  height: 60vw;
  background: radial-gradient(circle at 50% 50%, rgba(132, 216, 91, 0.22), transparent 62%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
  /* The provider page leads with a longer sentence than the home page, so it
     gets more of the width and the photograph gets less. */
  .hero__grid--text { grid-template-columns: 1.35fr 0.65fr; }
}

.hero .tagline {
  display: inline-block;
  color: var(--green);
  font-weight: 800;
  font-size: var(--step-lead);
  letter-spacing: var(--track-display);
  margin-bottom: 1rem;
}

.hero h1 { margin-bottom: 1rem; max-width: 22ch; text-wrap: pretty; }

.hero__lead {
  font-size: var(--step-lead);
  color: #D9DEE4;
  max-width: 34ch;
  margin-bottom: 1.75rem;
}
/* The provider page leads with a longer sentence in a wider column, so its
   opening line runs as wide as the title above it. */
.hero__grid--text .hero__lead { max-width: none; }

.hero__cta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.hero__price {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: var(--step-0);
  color: #fff;
}
.hero__price b { color: var(--green); font-weight: 800; }

.hero__figure {
  position: relative;
  margin: 0;
}
.hero__figure img.photo {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.hero__figure figcaption {
  margin-top: 0.75rem;
  font-size: var(--step--1);
  color: #A9B4C0;
}
/* Al: the elephant reads better on the left, where it looks like the one
   taking the photograph rather than a bystander at the edge of it. Not
   mirrored: it faces the way it does in the logo. */
.hero__mascot {
  position: absolute;
  width: clamp(88px, 18%, 128px);
  left: -8px;
  bottom: -22px;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

/* --------------------------------------------------------------- steps ---- */

.steps {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  counter-reset: step;
}
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }

.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem;
}
.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.125rem;
  background: var(--green);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-size: var(--step-0); }

/* connector, decorative only */
@media (min-width: 64rem) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.4rem;
    right: -0.75rem;
    width: 0.5rem;
    height: 2px;
    background: var(--line);
  }
}

/* three-step variant (photographers page) */
.steps--3 { grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------- how it works panel ---- */
/* The steps and what a memory costs are one unit: the price is the last
   thing you read after the four steps, inside the same card.               */

.howto {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.howto .steps { gap: 0; }

.howto .step {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.howto .step:last-child { border-bottom: 0; }
.howto .step::after { content: none; }

@media (min-width: 40rem) and (max-width: 63.999rem) {
  .howto .steps--4 .step:nth-child(odd) { border-right: 1px solid var(--line); }
  .howto .steps--4 .step:nth-child(n + 3) { border-bottom: 0; }
}
@media (min-width: 56rem) {
  .howto .steps--3 .step { border-bottom: 0; }
  .howto .steps--3 .step:not(:last-child) { border-right: 1px solid var(--line); }
}
@media (min-width: 64rem) {
  .howto .step { border-bottom: 0; }
  .howto .step:not(:last-child) { border-right: 1px solid var(--line); }
  .howto .step:last-child { border-right: 0; }
}

/* Navy on green: 9.17:1, the one pairing the guidelines allow for green. */
.howto__cta {
  background: var(--green);
  color: var(--ink);
  padding: clamp(1.25rem, 1rem + 1vw, 1.625rem) clamp(1.25rem, 1rem + 1vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
}
.howto__cta p {
  margin: 0;
  font-size: var(--step-h3);
  font-weight: 800;
  letter-spacing: var(--track-display);
}

/* --------------------------------------------------------------- promo --- */
/* The band pointing clients at the other side of the marketplace. */

.promo {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 48rem) {
  .promo { grid-template-columns: 1fr auto; gap: 2rem; }
}
.promo h2 { font-size: var(--step-h3); }
.promo p { color: var(--muted); margin: 0.5rem 0 0; font-size: var(--step-0); }

.promo--accent {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}
.promo--accent p { color: var(--ink); }

/* --------------------------------------------------------------- prose ---- */

.prose { max-width: 40rem; }
.prose--wide { max-width: 52rem; }
/* A list of short requirements reads fine at full width, and stopping halfway
   across leaves the section looking unfinished. */
.prose--full { max-width: none; }

/* What the job actually is, as numbered steps rather than four paragraphs of
   prose. Easier to scan, and it fills the width. */
.job__steps {
  list-style: none;
  counter-reset: job;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 48rem) { .job__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } }
@media (min-width: 68rem) { .job__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.job__steps li { counter-increment: job; }
.job__steps h3 {
  font-size: var(--step-0);
  margin-bottom: 0.375rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.job__steps h3::before {
  content: counter(job);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font-size: var(--step--1);
}
.job__steps p { color: var(--muted); margin: 0; padding-left: 2.5rem; }
.job__note a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.job__note a:hover { color: var(--green-ink, #2F6B1C); }

.job__note {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--step-lead);
}
/* Four short paragraphs beside each other, so the section reaches the far edge
   without asking anybody to read a line 120 characters long. */
@media (min-width: 64rem) {
  .prose--cols {
    max-width: none;
    columns: 2;
    column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
  }
  .prose--cols p { break-inside: avoid; margin-top: 0; }
}
.prose p { font-size: var(--step-lead); color: var(--muted); }
.prose p strong { color: var(--ink); font-weight: 700; }

.split {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1.15fr 0.85fr; }
  .split--wideLeft { grid-template-columns: 1.4fr 0.6fr; }
}

figure.photo-card { margin: 0; }
figure.photo-card img {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
figure.photo-card figcaption {
  margin-top: 0.625rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------------------------------------------- chips ---- */

.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; }
.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
  font-size: var(--step-0);
  font-weight: 500;
}

/* --------------------------------------------------------------- facts ---- */

.facts {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
.fact + .fact { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.fact dt {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: var(--track-display);
}
.fact dd { margin: 0.25rem 0 0; color: var(--muted); font-size: var(--step-0); }

/* --------------------------------------------------------- lists (why) ---- */

.ticks { list-style: none; display: grid; gap: 0.875rem; }
.ticks li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--ink);
}
.ticks svg { width: 1.25rem; height: 1.25rem; margin-top: 0.28rem; color: var(--ink); }
.ticks--onDark li { color: #E6EAEF; }
.ticks--onDark svg { color: var(--green); }

/* The same shape as a tick list, for the things that go wrong rather than the
   things that go right. A green check would read as approval. Text matches the
   paragraphs around it, which browser default bullets did not. */
/* The answer to the question, under both columns rather than in the taller of
   the two, so it runs the whole width instead of trailing off beside an empty
   half of the page. */
.why__close {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--step-lead);
  color: var(--muted);
}

.pains {
  list-style: none;
  display: grid;
  gap: 0.875rem;
  margin: 1.5rem 0;
}
.pains li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--step-lead);
  color: var(--muted);
}
.pains li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.6em auto 0;
  border-radius: 999px;
  background: var(--green);
}

/* -------------------------------------------------------------- closing --- */

.closing {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.closing p {
  font-size: var(--step-lead);
  color: #D9DEE4;
  max-width: 46rem;
  margin-inline: auto;
}
.closing h2 { margin-bottom: 1.25rem; }
.closing .stores { justify-content: center; margin-top: 2rem; }

/* The closing band and the latest article are both navy, so the seam between
   them is invisible and the two lots of padding read as one empty gap. When
   they are neighbours, close it up. */
.closing:has(+ .latest) { padding-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.closing + .latest { padding-top: clamp(1rem, 0.5rem + 1vw, 1.5rem); }

/* Al: side by side, the heading and the line under it read as two unrelated
   things. Stacked, they read as one. Left aligned against the edge, so the
   band still uses the width. */
@media (min-width: 64rem) {
  .closing { text-align: left; }
  .closing h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); }
  .closing p { max-width: none; margin-inline: 0; }
  .closing .stores { justify-content: flex-start; }
}

/* --------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: 3rem 2rem;
  font-size: var(--step-0);
}
.site-footer__grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 0.9fr 2fr; }
}

/* Al: a box around both link columns, with the download buttons inside, so the
   two audiences read as a matched pair rather than as loose lists. */
.site-footer__panel {
  display: grid;
  gap: 2rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--ground);
}
@media (min-width: 48rem) {
  .site-footer__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; }
}
.site-footer img.mark { height: 44px; width: auto; margin-bottom: 1rem; }
.site-footer h2 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  margin-bottom: 0.875rem;
}
.site-footer__sub {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--muted);
  margin: 1.5rem 0 0.625rem;
}
.site-footer ul { list-style: none; display: grid; gap: 0.625rem; }
.site-footer a {
  display: inline-block;
  padding-block: 0.2rem;   /* keeps every link target at least 24px tall */
  text-decoration: none;
  color: var(--muted);
}
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
.site-footer address { font-style: normal; color: var(--muted); }
.site-footer__legal {
  margin-top: 2.5rem;
  line-height: 1.9;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--step--1);
}

/* -------------------------------------------------- sticky mobile CTA ----- */

.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 0.625rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transform: translateY(110%);
  transition: transform 0.2s ease;
}
.cta-bar[data-visible="true"] { transform: translateY(0); }
.cta-bar p { margin: 0; font-size: var(--step--1); font-weight: 600; line-height: 1.3; }
.cta-bar .btn { flex-shrink: 0; margin-left: auto; }
@media (min-width: 48rem) { .cta-bar { display: none; } }
body.has-cta-bar { padding-bottom: 5rem; }
@media (min-width: 48rem) { body.has-cta-bar { padding-bottom: 0; } }

/* ------------------------------------------------------- page (legal) ---- */

.page-head {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.page-head p { color: #C2CBD5; margin: 0.75rem 0 0; }
.page-head .btn { margin-top: 1.5rem; }
/* The meta description, said out loud rather than only to search engines. */
.page-head__standfirst {
  font-size: var(--step-lead);
  color: #D6DDE5;
}

/* The legal pages run the full width: they are read in sections, not straight
   through, and a narrow column left half the page empty. */
.legal { max-width: none; }

.legal h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.0625rem; margin: 1.75rem 0 0.5rem; }
.legal p, .legal li { color: var(--muted); font-size: var(--step-0); }
.legal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1em; display: grid; gap: 0.5rem; }
.legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.legal strong { color: var(--ink); }

/* The tutorials page filters its groups the way the blog filters its posts:
   a label, an Everything option, and the picked one filled in. */
.tip-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.tip-filter__label {
  margin-right: 0.375rem;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tip-filter__btn {
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--line);
  font: inherit;
  font-weight: 800;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
  min-height: 44px;
}
.tip-filter__btn:hover { border-color: var(--muted); color: var(--ink); }
.tip-filter__btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}



/* ----------------------------------------------------------- pull stat --- */

.pullstat {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
}
.pullstat dt {
  font-size: var(--step-stat);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: var(--green);
}
.pullstat dd {
  margin: 0.75rem 0 0;
  color: #D9DEE4;
  font-size: var(--step-0);
}
.pullstat hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 1.5rem 0;
}
.pullstat p { font-size: var(--step-0); color: #D9DEE4; }
.pullstat p b { color: #fff; }

/* ------------------------------------------------------------- pricing --- */

.plans {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 52rem) {
  .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
}
.plan h3 { margin-bottom: 0.625rem; }
.plan > p { color: var(--muted); font-size: var(--step-0); }

/* the free first shoot is the offer, so it carries the dark ground */
.plan--free {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.plan--free h3 { color: var(--green); }
/* The free first session is the offer on the page, so it is the biggest thing
   in the card rather than a small heading under a label. */
.plan__free {
  font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  margin-bottom: 1rem;
}
.plan--free > p { color: #D9DEE4; }

/* Two prices now: on demand, and booked ahead. */
.plan__prices { display: grid; gap: 1.25rem; margin: 0 0 1.5rem; }
@media (min-width: 26rem) { .plan__prices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; } }
.plan__prices dt {
  font-size: var(--step-stat);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
  margin-bottom: 0.375rem;
}
.plan__prices dd { margin: 0; color: var(--muted); font-size: var(--step--1); }

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}
.plan__price b {
  font-size: var(--step-stat);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.plan__price span { color: var(--muted); font-size: var(--step-0); }

.plan .ticks { margin-top: 1.5rem; }
.plan .ticks li { font-size: var(--step-0); }

.plan__tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 800;
}

/* ----------------------------------------------------------------- faq --- */

/* One question a line, the answer directly under it, running the full width.
   Two columns made people read across a gutter to find the answer to what
   they had just read. */

.faq {
  display: grid;
  gap: 2.25rem;
  margin: 0;
}
.faq dt {
  font-weight: 800;
  letter-spacing: var(--track-display);
  font-size: var(--step-h3);
  margin-bottom: 0.5rem;
}
.faq dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--step-lead);
  max-width: 72ch;
}

/* ---------------------------------------------------------- two equals --- */
/* Side-by-side cards that must read as a matched pair: equal width and
   equal height, unlike .split which is deliberately lopsided.              */

.duo {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 52rem) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}
.card > h3 { margin-bottom: 1.25rem; }
.card > p { color: var(--muted); font-size: var(--step-0); }

/* --------------------------------------------------------- earnings ------ */
/* Section 10: money first, per memory, and show the arithmetic rather
   than the conclusion.                                                     */

.earnings {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
}
.earnings > p {
  font-size: var(--step-lead);
  font-weight: 800;
  letter-spacing: var(--track-display);
  margin-bottom: 1.75rem;
}
.earnings > p b { color: var(--green); }

.split-sum {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}
@media (min-width: 46rem) {
  .split-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .split-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.split-sum > div {
  padding-top: 1.25rem;
  border-top: 2px solid rgba(255, 255, 255, 0.18);
}
.split-sum > div.is-yours { border-top-color: var(--green); }
.split-sum dt {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
}
.split-sum .is-yours dt { color: var(--green); }
.split-sum dd { margin: 0.5rem 0 0; color: #D9DEE4; font-size: var(--step-0); }

/* ------------------------------------------------------------ calculator -- */
/* Section 10: show the arithmetic, never the conclusion. Every figure here
   is derived from two stated assumptions and both are on screen.           */

.calc {
  display: grid;
  gap: 1.25rem;
  /* Both cards the same height, so the last field and the total are in the
     same view. The tip box used to sit below where the panel ended. */
  align-items: stretch;
}
@media (min-width: 56rem) {
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.calc__controls {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  display: grid;
  gap: 1.75rem;
  margin: 0;
}

/* The three numbers side by side, which is what keeps the form as short as the
   panel beside it. They are short answers and do not need a line each. */
.calc__row { display: grid; gap: 1.25rem; }
/* Four numbers now, and they read as a chain: sessions an hour, hours a shift,
   shifts a week, and the tip. Two by two, so the labels stay one line each. */
@media (min-width: 26rem) { .calc__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } }
.calc__row .field__money { max-width: none; }
/* Labels of different lengths would otherwise leave the three boxes on three
   different lines. Push each box to the bottom of its cell instead. */
.calc__row .field { display: flex; flex-direction: column; justify-content: space-between; }

.field { border: 0; padding: 0; margin: 0; min-width: 0; }

.field > label,
.field > legend {
  display: block;
  font-weight: 800;
  letter-spacing: var(--track-display);
  font-size: var(--step-0);
  margin-bottom: 0.75rem;
  padding: 0;
}
.field > label .hint,
.field > legend .hint {
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.field__money {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 12rem;
  padding: 0 0.875rem;
  background: var(--ground);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
}
.field__money:focus-within { border-color: var(--ink); }
.field__money > span {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--muted);
}
.field__money input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: var(--track-display);
  color: var(--ink);
}
/* QA: no exceptions to the focus ring; one treatment covers every control. */
.field__money .unit {
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.choices { display: grid; gap: 0.625rem; }
.choices label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--ground);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--step-0);
}
.choices label:hover { border-color: var(--muted); }
.choices label:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.choices input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; }
.choices .hint {
  grid-column: 2;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--muted);
}

.calc__out {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}
.calc__out h3 { font-size: var(--step-0); color: var(--green); margin-bottom: 1.25rem; }

.calc__figures { display: grid; gap: 1.25rem; margin: 0 0 1.5rem; }
.calc__figures > div {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.calc__figures > div:first-child { border-top: 0; padding-top: 0; }
.calc__figures dt { font-size: var(--step--1); color: #A9B4C0; margin-bottom: 0.25rem; }
.calc__figures dd {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.05;
}
.calc__figures .is-headline dd { color: var(--green); }

/* The same shift extended to a week and a month, as two tiles under the
   figures. Same arithmetic, just repeated, and the note says so. */
.calc__projection {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 26rem) {
  .calc__projection { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
}
.calc__projection > div {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  padding: 0.875rem 1rem;
}
.calc__projection-label {
  margin: 0 0 0.25rem;
  font-size: var(--step--1);
  color: #A9B4C0;
}
.calc__projection-figure {
  margin: 0;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--green);
}

.calc__note {
  font-size: var(--step--1);
  color: #C2CBD5;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1.25rem;
  margin: 0;
}

/* ----------------------------------------------------------- tutorials --- */

/* Every card the same height, not just the two sharing a row: `align-items:
   start` let each one stop where its text did, and `grid-auto-rows: 1fr` makes
   every row as tall as the tallest card on the page. */
.tips {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 56rem) {
  .tips {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
  }
}
.tips .card h3 { margin-bottom: 1.25rem; }

.page-head__back { margin: 0 0 1.5rem; font-size: var(--step-0); }
.page-head__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}
.page-head__back a::before { content: "\2190"; }
.page-head__back a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- blog ----- */

.posts {
  display: grid;
  gap: 1.25rem;
  list-style: none;
}
@media (min-width: 48rem) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.posts__count {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.post:hover { border-color: var(--ink); }

/* Al asked for more visual interest, with his own blog as the reference: every
   card there leads with a picture. We have no photography yet, so each card
   carries a drawn cover instead of a gap. Six of them, cycled, so a grid has
   variety rather than nine copies of one placeholder. Nine squares, because
   nine photos and a short video is the product. A real photograph in a post's
   `image` field replaces the drawing with no other change. */
.post__cover {
  display: block;
  position: relative;
  margin: 0 calc(-1 * clamp(1.25rem, 1rem + 1vw, 1.75rem)) 1rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}
.post__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A photograph carries no audience colour of its own, so the strip along the top
   of every cover does it instead: green for the client side, slate for the
   provider side. Al asked to be able to tell them apart at a glance, and a
   drawn cover and a photograph now answer that the same way. */
.post[data-category="client"] .post__cover { border-top: 6px solid var(--green); }
.post[data-category="supplier"] .post__cover { border-top: 6px solid #5474A5; }

.post__cover--drawn::after {
  /* a soft light, off to one side, so the panel is not flat */
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
}

/* The motif sits in the corner and stays out of the way. */
.post__nine {
  position: absolute;
  left: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  bottom: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  width: 34px;
  transition: transform 0.25s ease;
  transform-origin: bottom left;
}
.post__nine span { aspect-ratio: 1; border-radius: 2px; background: currentColor; }
.post:hover .post__nine { transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .post__nine { transition: none; } }

/* Greens for the client side, navies for the provider side, so the grid sorts
   itself at a glance before anybody reads a tag. */
.cover-a { background: linear-gradient(160deg, #84D85B 0%, #4FA83A 100%); color: #122234; }
.cover-b { background: linear-gradient(125deg, #9BE074 0%, #3F9130 105%); color: #122234; }
.cover-c { background: linear-gradient(205deg, #6FCF4A 0%, #2F6B1C 100%); color: #F6F6F6; }

.cover-d { background: linear-gradient(135deg, #122234 0%, #23405f 100%); color: #84D85B; }
.cover-e { background: linear-gradient(25deg, #5474A5 0%, #122234 78%); color: #84D85B; }
.cover-f { background: linear-gradient(300deg, #122234 0%, #44618d 120%); color: #84D85B; }

.post__meta { margin: 0; font-size: var(--step--1); color: var(--muted); }
.post__title { font-size: var(--step-h3); margin: 0; }
.post__title a { text-decoration: none; }
.post__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.post__summary { margin: 0; color: var(--muted); font-size: var(--step-0); }

/* A blog post is one column of text, so it keeps a readable measure even
   though the rest of the site now runs wide. */
/* ------------------------------------------------------------ blog post ---
   The reading column stays a comfortable measure, and the space beside it
   carries the table of contents rather than sitting empty. Below the
   breakpoint the contents list moves above the article, where it still works
   as a summary of what is coming.                                          */

.post-layout { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) {
  .post-layout {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
    align-items: start;
  }
  /* Contents on the left, where the eye starts, and it stays put while the
     article scrolls past it. */
  .post-side { position: sticky; top: 6rem; order: -1; }
  .post-layout .article { max-width: none; }
}

.post-toc {
  background: rgba(18, 34, 52, 0.04);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.post-toc__title {
  font-size: var(--step-h3);
  font-weight: 800;
  letter-spacing: var(--track-display);
  margin-bottom: 0.5rem;
}
.post-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.post-toc li {
  counter-increment: toc;
  border-bottom: 1px solid var(--line);
}
.post-toc li:last-child { border-bottom: 0; }
.post-toc a {
  display: block;
  padding: 0.875rem 0;
  padding-left: 1.5rem;
  text-indent: -1.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--step-0);
  line-height: 1.4;
}
.post-toc a::before {
  content: counter(toc) ".";
  display: inline-block;
  width: 1.5rem;
  text-indent: 0;
}
.post-toc a:hover, .post-toc a:focus-visible { color: var(--ink); }

.tldr {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin-bottom: 2.5rem;
}
.tldr__title {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  margin-bottom: 0.875rem;
}
.tldr ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.tldr li { color: var(--muted); }

.post-faq { margin-top: 3rem; }
.post-faq h2 { margin-bottom: 1.25rem; }

.article { max-width: 46rem; }
.article h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  margin: 2.25rem 0 0.75rem;
}
.article h3 { font-size: 1.125rem; margin: 1.75rem 0 0.5rem; }
.article p { font-size: var(--step-lead); color: var(--muted); margin-bottom: 1.25rem; }
.article ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.25rem; display: grid; gap: 0.5rem; }
.article li { font-size: var(--step-lead); color: var(--muted); }
.article strong { color: var(--ink); }
.article a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 2px; }

.tips-video { margin: 0 0 2.5rem; max-width: 46rem; }
.tips-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}
.tips-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tips-video__more { margin: 1.25rem 0 0; }

/* -------------------------------------------------------- trip picker ---- */
/* A sentence the visitor completes about their own trip, so the answer is
   about them rather than about us.                                          */

.picker {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  margin-bottom: 2rem;
}

.picker__sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.625rem;
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.4;
}
.picker__sentence > span { white-space: nowrap; }
/* The full stop used to be its own flex item, so it wrapped onto a line of its
   own whenever the sentence filled the row. It belongs to the last word. */
.picker__sentence .picker__pick:last-of-type::after {
  content: ".";
  align-self: center;
  margin-left: 0.125rem;
}

.picker__pick { display: inline-flex; align-items: center; }
.picker__pick select {
  appearance: none;
  padding: 0.3rem 2.25rem 0.3rem 0.875rem;
  background: var(--ground);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.8rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 2px solid var(--green);
  border-radius: 999px;
  font: inherit;
  font-size: inherit;
  color: var(--ink);
  cursor: pointer;
  max-width: 100%;
}
.picker__pick select:hover { background-color: #fff; border-color: var(--ink); }


/* All nine occasions on the page at once, and each one a control. A dropdown
   showed one and hid the rest, which is the opposite of the point. */
.occasions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.occasion {
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--muted);
  cursor: pointer;
  min-height: 44px;
}
.occasion:hover { border-color: var(--ink); color: var(--ink); }
.occasion[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--ink);
}

.picker__chosen {
  font-weight: 800;
  color: var(--ink);
  border-bottom: 3px solid var(--green);
}

.picker__answer {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .picker__answer { grid-template-columns: 1fr auto; gap: 2rem; }
}
.picker__line {
  margin: 0;
  /* Three points down from the lead size, and a wider measure, so the longest
     answers stop running to seven lines. */
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.1875rem);
  color: var(--muted);
  max-width: 62rem;
}
.picker__cta { margin: 0; }

/* the cards double as the occasion control */
.scene__pick {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.scene__pick .scene__frame { display: block; }
.scene__pick[aria-pressed="true"] .scene__frame {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
.scene__pick:hover .scene__frame { outline: 3px solid var(--line); outline-offset: 3px; }
.scene__pick[aria-pressed="true"] .scene__label { color: var(--ink); }

/* the place picker in the calculator */
.field__select { position: relative; }
.field__select select {
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  background: var(--ground);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 1.25rem center, right 1rem center;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  cursor: pointer;
}
.field__select select:focus { border-color: var(--ink); }
.field__note {
  margin: 0.625rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.5;
}

/* the store badges in the footer sit under the address, and smaller than
   the ones in the page itself */
.stores--footer { margin-top: 1.25rem; }
.site-footer__sub + .stores--footer { margin-top: 0; }
.stores--footer img { height: 40px; }
.stores--footer a { padding-block: 0; }

/* ------------------------------------------------------- blog filter ----- */

.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.blog-filter__label {
  align-self: center;
  margin-right: 0.375rem;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-filter__btn {
  padding: 0.5rem 1.125rem;
  border-radius: 999px;
  background: transparent;
  border: 2px solid var(--line);
  font: inherit;
  font-weight: 800;
  font-size: var(--step-0);
  letter-spacing: var(--track-display);
  color: var(--muted);
  cursor: pointer;
}
.blog-filter__btn:hover { border-color: var(--muted); color: var(--ink); }
.blog-filter__btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.post__tag {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.post[data-category="supplier"] .post__tag { color: #2F6B1C; }

/* ---------------------------------------------------- latest article ----- */
/* One post, in a band above the footer, rather than a section competing with
   the rest of the page. */

.latest {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.latest__label {
  font-size: var(--step-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.latest__card {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
@media (min-width: 56rem) {
  /* The image column was `auto`, so a tall photograph claimed its full
     intrinsic width and squeezed the text into a quarter of the band. Pin the
     column instead. */
  .latest__card { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
}
.latest__card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(132, 216, 91, 0.5);
}
.latest__text { min-width: 0; }
.latest__meta { margin: 0 0 0.5rem; font-size: var(--step--1); color: #A9B4C0; }
.latest__title {
  margin: 0 0 0.625rem;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
}
.latest__card:hover .latest__title { color: var(--green); }
.latest__summary { margin: 0; color: #D9DEE4; font-size: var(--step-0); }
.latest__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  justify-self: end;
}

/* ---------------------------------------------------- grouped questions --- */

.faq-groups { display: grid; gap: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
@media (min-width: 64rem) {
  .faq-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; }
}
.faq-group__title {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.faq-group .faq-row__q { font-size: var(--step-0); }
.faq-group .faq-row__a p { font-size: var(--step-0); }
.faq-group .faq-row__mark { width: 34px; height: 34px; }

/* The home page answers five and hands the rest to the FAQ page. */
.faq-more { margin-top: 2.5rem; }

/* ================================================== the occasions band ====
   The Nashville photograph is the ground here, full width, under a navy veil
   dark enough for white type. The picker floats on it as a white card, which
   is the part the reader touches. Everything the band says about occasions is
   already happening in the picture behind it.                                */

.occasions-band {
  position: relative;
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(18, 34, 52, 0.72), rgba(18, 34, 52, 0.88)),
    url("photo-occasions.jpg");
  background-size: cover;
  background-position: center 38%;
  padding-block: clamp(3rem, 2.25rem + 3vw, 5rem);
}
.occasions-band .section__head h2 { color: #fff; }
.occasions-band .section__head p { color: #D6DDE5; }

/* On a narrow screen `cover` crops hard, and centre lands on the empty sky.
   Pull the frame across to the mural and the people. */
@media (max-width: 47.999rem) {
  .occasions-band { background-position: 72% 42%; }
}

.occasions-band__card { max-width: none; }


/* ================================================= the questions accordion ==
   Five questions on the home page, the first answer showing and the rest a tap
   away. Built on <details>, so it opens with no JavaScript at all and assistive
   software announces it as expandable without being told to.                 */

.faq-accordion {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.faq-row + .faq-row { border-top: 1px solid var(--line); }

.faq-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.125rem, 1rem + 0.5vw, 1.5rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
  cursor: pointer;
  list-style: none;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary:hover { background: var(--ground); }
.faq-row summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
}

.faq-row__q {
  font-size: var(--step-h3);
  font-weight: 800;
  letter-spacing: var(--track-display);
  color: var(--ink);
}

/* The plus loses its upright stroke when the row opens, so it reads as a
   minus without swapping any markup. */
.faq-row__mark {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
}
.faq-row__mark::before,
.faq-row__mark::after {
  content: "";
  position: absolute;
  inset: 50% 25%;
  border-top: 2px solid var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq-row__mark::after { transform: rotate(90deg); }
.faq-row[open] .faq-row__mark { border-color: var(--ink); }
.faq-row[open] .faq-row__mark::after { transform: rotate(0deg); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .faq-row__mark::before, .faq-row__mark::after { transition: none; }
}

.faq-row__a {
  padding: 0 clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.faq-row__a p {
  margin: 0;
  color: var(--muted);
  font-size: var(--step-lead);
  max-width: 72ch;
}

/* A post that has a photograph leads with it. */
.post-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: 2rem;
}

/* ==================================================== cookie notice ======
   Two layers: a short banner saying what the cookies are for, and a panel
   behind Choose for anybody who wants analytics but not marketing. Until a
   Tag Manager ID is configured the site sets no cookies at all, and the
   banner says so instead of asking for permission it does not need.        */

.cookie-note {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 95;
  width: min(34rem, calc(100vw - 2rem));
  display: grid;
  gap: 1rem;
  padding: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 24px 56px -20px rgba(18, 34, 52, 0.5);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
}
.cookie-note__text { font-size: var(--step--1); color: var(--muted); }
.cookie-note__text p { margin: 0; }
.cookie-note__title {
  font-size: var(--step-h3);
  font-weight: 800;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 0 0 0.75rem !important;
}
.cookie-note__list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
}
.cookie-note__list li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: 0.625rem;
  align-items: start;
  color: var(--ink);
}
.cookie-note__list svg { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; color: var(--green); }
.cookie-note__small { color: var(--muted); }
.cookie-note a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.cookie-note__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}
.cookie-note__actions .btn { font-size: var(--step--1); }
.btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 2px solid transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--ghost:hover { color: var(--ink); }

/* the panel behind Choose */
.cookie-rows { display: grid; gap: 0.25rem; }
.cookie-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.cookie-row b { display: block; color: var(--ink); font-size: var(--step-0); }
.cookie-row span { display: block; font-size: var(--step--1); color: var(--muted); }
.cookie-row__fixed {
  flex-shrink: 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cookie-row__switch { flex-shrink: 0; cursor: pointer; }
.cookie-row__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookie-row__switch i {
  display: block;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background 0.15s ease;
}
.cookie-row__switch i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.cookie-row__switch input:checked + span + i { background: var(--green); }
.cookie-row__switch input:checked + span + i::after { transform: translateX(18px); }
.cookie-row__switch input:focus-visible + span + i {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .cookie-row__switch i, .cookie-row__switch i::after { transition: none; }
}

/* The provider page carries a sticky download bar; sit above it. */
body.has-cta-bar .cookie-note { bottom: 5.5rem; }
@media (min-width: 48rem) {
  body.has-cta-bar .cookie-note { bottom: 1.25rem; }
}