/* ==========================================================================
   Become by Avril
   Shared design system with Unbound by Avril (same tokens, same type family)
   ========================================================================== */

:root {
  --bg: #EFEBE2;        /* warm cream background */
  --bg-deep: #E2E6D1;   /* sage-tinted cream, alternating sections */
  --surface: #F7F4EC;   /* card background */
  --ink: #33302B;       /* body text, dark chrome */
  --ink-soft: #5C564D;  /* secondary text */
  --harbour: #3E5570;   /* harbour blue — header bg, eyebrows, links, bands */
  --sage: #A3BB92;      /* light sage accent */
  --teal: #748A5D;      /* deeper sage — card borders */
  --line: #D4D9C2;      /* hairline borders */
  --clay: #C1774F;      /* terracotta — CTA buttons only, used sparingly */
  --radius: 2px;

  /* The Become Framework ramp — one tone per stage, sage warming into blue,
     blue deepening, then terracotta. Used by the ring and its step numerals. */
  --stage-1: #A3BB92;   /* Awareness  — light sage  (= --sage) */
  --stage-2: #748A5D;   /* Experience — deep sage   (= --teal) */
  --stage-3: #6B89A5;   /* Neutralise — light blue */
  --stage-4: #3E5570;   /* Align      — deep blue   (= --harbour) */
  --stage-5: #C1774F;   /* Become     — terracotta  (= --clay) */

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pad-section: clamp(64px, 8vw, 118px);
  --wrap: 1140px;
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;      /* Instrument Serif is single-weight — never 500/600 */
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; }

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

a { color: var(--harbour); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

strong { font-weight: 500; }
em { font-style: italic; }

::selection { background: var(--sage); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--clay);
  color: #fff;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

.section { padding: var(--pad-section) 0; }
.section-deep { background: var(--bg-deep); }

.measure { max-width: 60ch; }
.measure-wide { max-width: 78ch; }

.section-head { max-width: 42ch; margin-bottom: clamp(36px, 5vw, 60px); }

/* For a head whose lede runs straight into body prose rather than into cards, a
   list or a diagram. The standard 60px is meant to separate a heading block
   from a different kind of block; between two things that read as sibling
   paragraphs it is 3x the 20px paragraph rhythm and looks like an accident.
   Only "How it works" needs this today -- it is the one section where a lede is
   followed directly by running text. */
.section-head-tight { margin-bottom: clamp(22px, 2.6vw, 32px); }
.section-head h2 { margin-bottom: 0; }
.section-head .eyebrow + h2 { margin-top: 0; }

.section-lede {
  margin-top: 20px;
  font-size: clamp(17px, 1.7vw, 19px);
  color: var(--ink-soft);
  max-width: 56ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--harbour);
  margin: 0 0 16px;
}

/* The brand name where it appears inside body copy. Italic is the classical
   way to set a name in running text, and it changes exactly one thing about
   the words -- which is what keeps it quiet. Instrument Serif has a much
   smaller x-height than Work Sans, so it still needs the size bump to sit
   optically level rather than looking undersized.

   The italic face is already requested by the font link in index.html
   (Instrument+Serif:ital@0;1), so this costs no extra download.

   Not used in headings -- those are already Instrument Serif. */
.brandname {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.16em;
  /* Instrument Serif's word space is exactly half the width of Work Sans's at
     the sizes these are drawn (3px against 6px), so the three words crowd
     against the sentence around them. This makes up the 3px difference:
     3 / 19.72 = 0.152em. Measured, not guessed -- recompute it if the size
     bump above ever changes. */
  word-spacing: 0.152em;
}

.lead {
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.6;
}

/* The page's pull-quote lines: the one that closes the hero, the two that
   close "How it works", and the one in "Becoming". Blue is what marks them as
   the line to take away from a section, so it applies to all of them rather
   than to some -- same class at the same size in two colours would read as an
   oversight. Measured on every background it lands on: 6.45:1 on --bg,
   6.02:1 on --bg-deep, 6.98:1 on --surface, all past 4.5:1 even though the
   size would only require 3:1.

   The closing band overrides this to cream further down; blue on the dark
   band would be unreadable. */
.emphasis {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.34;
  color: var(--harbour);
  margin: 1.4em 0;
}

.label-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

/* A client line lifted out as a pull-quote. Blue and serif, following the
   page's rule that blue marks every pull-quote line rather than a chosen few.
   Sized above .emphasis because this one opens a section rather than closing
   one, and it has to hold the eye against the featured card beneath it. */
.pullquote {
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--clay);
}
.pullquote blockquote { margin: 0; }
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.24;
  color: var(--harbour);
  margin: 0;
  /* The measure lives HERE, not on the figure. A ch value on .pullquote
     resolves against the figure's own 17px body size, not the 38px serif
     inside it -- set to 30ch there it came out 250px wide and stacked the
     sentence into six lines. On the paragraph, ch means what it looks like it
     means. */
  max-width: 26ch;
}
.pullquote figcaption {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 14px;
}

.fineprint {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  font-style: italic;
}

/* two-column text + aside */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
}

.grid { display: grid; gap: clamp(18px, 2.2vw, 26px); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid-3 { grid-template-columns: 1fr; } }

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

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 16px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}

.btn-primary { background: var(--clay); color: #FCF9F3; border-color: var(--clay); }
.btn-primary:hover, .btn-primary:focus-visible { background: #A9663F; border-color: #A9663F; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: var(--bg); }

.btn-ghost-light { background: transparent; color: #EFEBE2; border-color: rgba(239,235,226,.45); }
.btn-ghost-light:hover, .btn-ghost-light:focus-visible { border-color: #EFEBE2; background: rgba(239,235,226,.1); }

.btn-sm { padding: 12px 18px; font-size: 10.5px; letter-spacing: 0.12em; }
.btn-block { display: block; text-align: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px, 4vw, 44px); }
.btn-row-center { justify-content: center; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--harbour);
  color: #EFEBE2;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  min-height: 74px;
  padding-top: 12px;
  padding-bottom: 12px;
  max-width: 1320px; /* header runs a little wider than body copy so the nav stays on one row */
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  color: #EFEBE2;
}
.brand-name {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.005em;
}
.brand-sub {
  /* one lockup across the site: Instrument Serif "Become" + mono "BY AVRIL" */
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .8;
}

.nav-group {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
}

.primary-nav { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.5vw, 22px); }
.primary-nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EFEBE2;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: border-color .2s ease, opacity .2s ease;
  opacity: .88;
}
.primary-nav a:hover, .primary-nav a:focus-visible {
  opacity: 1;
  border-bottom-color: var(--sage);
}

.header-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid rgba(239,235,226,.4);
  border-radius: var(--radius);
  color: #EFEBE2;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
}
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.nav-toggle-bars span { display: block; width: 16px; height: 1px; background: currentColor; }

/* 1290, not 1180. The primary nav carries eight items and, measured, they need
   1291px to sit on one row -- below that they wrap to two rows inside a
   fixed-height header. Re-tested after the labels were shortened in August
   2026: at a 1180 breakpoint, 1181-1250 still wrapped, so this number stays.
   Re-measure it if a nav item is added or renamed. */
@media (max-width: 1290px) {
  .nav-toggle { display: inline-flex; }
  .nav-group {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    background: var(--harbour);
    padding: 24px clamp(20px, 5vw, 40px) 32px;
    border-top: 1px solid rgba(239,235,226,.18);
  }
  .site-header { position: sticky; }
  .header-inner { position: relative; flex-wrap: wrap; }
  .nav-group.is-open { display: flex; }
  .primary-nav { flex-direction: column; gap: 16px; }
  .primary-nav a { font-size: 12px; }
  .header-actions { flex-direction: column; align-items: stretch; }
  .header-actions .btn { text-align: center; }
}

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

.hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 110px);
  background:
    linear-gradient(180deg, rgba(226,230,209,.55) 0%, rgba(239,235,226,0) 62%),
    var(--bg);
}

/* margin sits on the wrapper because `p:last-child` zeroes the lede's own */
.hero-head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 46px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 34%, 440px);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-portrait {
  margin: 0;
  position: sticky;
  top: 108px;
}
.hero-portrait img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* matches the source ratio, so nothing is cropped */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 900px) {
  .hero-portrait { position: static; max-width: 380px; order: -1; margin-bottom: 8px; }
}

.hero-title {
  font-size: clamp(62px, 13vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 2vw, 24px);
}
.hero-title-sub {
  font-family: var(--mono);
  font-size: clamp(11px, 1.3vw, 15px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--harbour);
}

.hero-lede {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.2;
  color: var(--ink);
  max-width: 22ch;
  margin: 22px 0 clamp(32px, 4vw, 46px);
}

.hero-copy { max-width: 62ch; }

/* stage chain */
.chain {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin: clamp(36px, 5vw, 52px) 0 0;
  padding: 0;
}
.chain li {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--harbour);
  margin: 0;
  display: flex;
  align-items: center;
}
.chain li + li::before {
  content: "\2192";
  color: var(--sage);
  margin: 0 12px;
  letter-spacing: 0;
}
.chain-quiet {
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

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

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
}
.card h3 { margin-bottom: 0.55em; }
.card-top { border-top: 2px solid var(--teal); }

/* About — first-person story + family photo */
.about-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
  margin-bottom: clamp(38px, 5vw, 60px);
}
@media (max-width: 880px) { .about-story { grid-template-columns: 1fr; } }

.about-photo { margin: 0; position: sticky; top: 108px; }
@media (max-width: 880px) { .about-photo { position: static; max-width: 460px; } }
.about-photo img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.about-question {
  padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
}

/* The lower half of About: prose left, the teachers card beside it.
   The left column is pinned to the reading measure rather than to a fraction,
   so the prose keeps its 67-character line however wide the section gets --
   the card absorbs the remainder. */
.about-lower {
  display: grid;
  grid-template-columns: minmax(0, 60ch) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.about-lower-main > .about-question + .about-question { margin-top: clamp(28px, 3.4vw, 42px); }
/* Not sticky. It was, briefly -- but with align-items:start the aside is only
   as tall as its card, so position:sticky had no room to travel and did
   nothing. Measured: aside 385px inside a 1050px row. Dead CSS is worse than
   either choice, so it went. */

/* Stacked, the column is no longer 60ch wide and the prose has nothing holding
   it in -- measured, it ran to 106 characters a line at 980px and 87 at 820.
   The grid was doing the job of .measure, so the cap has to be restated here. */
@media (max-width: 980px) {
  .about-lower { grid-template-columns: 1fr; }
  .about-lower-main, .about-lower-side { max-width: 60ch; }
  .about-lower-side { position: static; margin-top: clamp(28px, 3.4vw, 42px); }
}

/* Intro video */
/* What to Expect. The intro runs full measure under the heading rather than
   holding down a column of its own -- at 39 words it left 253px of empty column
   beside the block that used to sit opposite it.

   That block was the "Together, we may" panel, which turned out to be the five
   framework stages restated. With it gone the video takes the whole width:
   text on the narrower side, the 16:9 frame on the wider. */
.expect-intro { margin-bottom: clamp(34px, 4.5vw, 54px); }

.expect-video {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 880px) { .expect-video { grid-template-columns: 1fr; } }
/* `display: grid` above would beat the browser's own [hidden] rule, so the
   block has to be told to stay down. It is hidden until a video link exists
   -- see the comment on .expect-video in index.html. */
.expect-video[hidden] { display: none; }

.expect-video .video-text h3 { margin-bottom: 0.35em; }

.video-text p { color: var(--ink-soft); }

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.video-placeholder p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.video-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  display: block;
  position: relative;
}
.video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-42%, -50%);
  border-left: 14px solid var(--clay);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.stack-cards {
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(34px, 4vw, 50px);
}
@media (max-width: 820px) { .stack-cards { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
}

.quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--clay);
  border-radius: var(--radius);
  padding: clamp(26px, 3.2vw, 40px);
  font-family: var(--serif);
  /* Same size and colour as .emphasis, the blue serif line that closes the
     hero (.hero-copy .emphasis) -- the two are the page's two pull-quotes, so
     they should read as one voice. Keep this clamp in step with .emphasis's.
     Blue measures 6.98:1 on --surface, so it passes even at the small end.
     Blue is the link colour elsewhere, which is why it is kept off inline text;
     here it is a whole bordered quote with no links in it, so there is nothing
     for it to be mistaken for. */
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.34;
  color: var(--harbour);
}
.quote-card p + p { margin-top: 0.8em; }

.philosophy-quote {
  margin: clamp(38px, 5vw, 56px) 0 0;
  padding: clamp(28px, 3.6vw, 44px) 0 0;
  border-top: 1px solid var(--line);
  max-width: 58ch;
}
.philosophy-quote p:not(.eyebrow) {
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.36;
}

/* The line the block is built toward, and the only place on the page where
   "become" is used as a verb. It takes the blue that already marks the page's
   pull-quote lines (.emphasis), plus a size jump -- 34px against the block's
   26px, which is a third larger and so reads as a different kind of line rather
   than a slightly bigger one. Blue measures 6.02:1 on --bg-deep.

   The selector needs the `p`. The block rule above is
   `.philosophy-quote p:not(.eyebrow)` -- :not() contributes the specificity of
   its argument, so that is (0,2,1), and both `.creed-close` and
   `.philosophy-quote .creed-close` lose to it and silently left the size at
   26px. `.philosophy-quote p.creed-close` ties at (0,2,1) and wins on being
   later in the file. */
.philosophy-quote p.creed-close {
  margin-top: 0.9em;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.24;
  color: var(--harbour);
  max-width: 22ch;
}


/* ---------------------------------------------------------------- list -- */

.tick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Two columns only where a column is wide enough for the longest item
     (~266px). Below that it drops to one column, rather than wrapping a single
     entry onto a second line and breaking the rhythm of the list. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4px 24px;
}
.tick-list-stack { grid-template-columns: 1fr; gap: 10px; }

/* The philosophy symptom list, running the full width under the two short
   blocks above it. The list is already auto-fit at a 280px minimum, so at full
   width it finds three columns on its own -- no separate column count to keep
   in step with the breakpoints. */
.patterns { margin-top: clamp(34px, 4.5vw, 54px); }
@media (max-width: 560px) { .tick-list { grid-template-columns: 1fr; } }

.tick-list li {
  position: relative;
  padding-left: 20px;
  margin: 0;
  line-height: 1.6;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--teal);
}

/* --------------------------------------------------- numbered sequences -- */

.num {
  font-family: var(--mono);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1;
  color: var(--clay);
  letter-spacing: 0.02em;
  display: block;
}

/* The Become Framework chart.
   The full chart carries its own labels, which fall below ~7px once the SVG is
   scaled to a phone. Under 780px it is swapped for the bare ring and the step
   list below carries the words instead. */
.framework-figure {
  margin: 0 auto clamp(38px, 5vw, 58px);
  max-width: 900px;
}
.framework-chart svg,
.framework-ring-small svg { width: 100%; height: auto; display: block; }
.framework-ring-small { display: none; max-width: 340px; margin: 0 auto; }

@media (max-width: 780px) {
  .framework-chart { display: none; }
  .framework-ring-small { display: block; }
}

.ring-num {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* chart type — matches the site's three faces */
/* The name at the centre of the chart: the header lockup at chart scale.
   .brand-name is 27px and .brand-sub 10px with 0.22em tracking, so the sub is
   10/27 of the name -- 76 and 28.1 here. The dx that separates them is in the
   SVG, at 9/27 of the name size, standing in for the header's flex gap.
   The sub is the same ink at 0.8, matching the header's opacity rather than
   introducing a colour the lockup does not have there. */
.bf-lockup-name { font-family: var(--serif); font-size: 112px; letter-spacing: 0.005em; }
.bf-lockup-sub  { font-family: var(--mono); font-size: 41.5px; letter-spacing: 0.22em; fill-opacity: .8; }
.bf-mono { font-family: var(--serif); font-size: 34px; letter-spacing: 4px; }
.bf-name { font-family: var(--mono); font-weight: 500; font-size: 24px; letter-spacing: 1.6px; }
.bf-desc { font-family: var(--sans); font-size: 19px; }
.bf-tag  { font-family: var(--mono); font-weight: 500; font-size: 19px; letter-spacing: 4px; }

/* The rule under each step numeral takes that stage's colour, tying the list to
   the ring. The numeral itself stays terracotta: the lighter stage tones fall
   below the contrast needed for text on cream, and terracotta is the numbering
   colour this design system already reserves. */
.steps .step:nth-child(1) .num::after { background: var(--stage-1); }
.steps .step:nth-child(2) .num::after { background: var(--stage-2); }
.steps .step:nth-child(3) .num::after { background: var(--stage-3); }
.steps .step:nth-child(4) .num::after { background: var(--stage-4); }
.steps .step:nth-child(5) .num::after { background: var(--stage-5); }
.steps .step .num::after { width: 34px; height: 2px; }

.steps { list-style: none; padding: 0; margin: 0; }

.step {
  display: grid;
  grid-template-columns: minmax(72px, 108px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
.step:last-child { border-bottom: 1px solid var(--line); }

.step h3 { margin-bottom: 0.4em; }
.step-body p { max-width: 62ch; color: var(--ink-soft); }

.step .num::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--sage);
  margin-top: 14px;
}

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

/* ---------------------------------------------------------------- tags -- */

.tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 70ch;
}
.tags li {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}

/* -------------------------------------------------------- testimonials -- */

.testimonial {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
}
.testimonial blockquote { margin: 0; padding: 0; }
.testimonial blockquote p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.72; }
/* Teresa's testimonial is 361 words against 31-84 for the others, and 885px
   tall against 430-553. The opening paragraph stays out and the rest sit behind
   a native <details>: no JavaScript, keyboard operable for free, and the text
   is still in the document for search engines. Same mechanism as the FAQ, but a
   quieter label -- this is a line inside a card, not an accordion row. */
.testimonial-more { margin-top: 0.6em; }
.testimonial-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  padding-right: 20px;
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--harbour);
}
.testimonial-more > summary::-webkit-details-marker { display: none; }
.testimonial-more > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--clay);
  line-height: 1;
}
.testimonial-more[open] > summary::after { content: "\2013"; }
.testimonial-more[open] > summary { margin-bottom: 1.1em; }
.testimonial-more > p:last-child { margin-bottom: 0; }

.testimonial figcaption {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--harbour);
}

.cite-role {
  display: block;
  margin-top: 5px;
  color: var(--ink-soft);
  letter-spacing: 0.12em;
}

.testimonial-featured {
  border-top: 2px solid var(--clay);
  padding: clamp(30px, 4vw, 52px);
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.testimonial-featured blockquote p {
  font-size: clamp(16px, 1.75vw, 18px);
  color: var(--ink);
}
.testimonial-featured blockquote p:first-child::before { content: "\201C"; }
.testimonial-featured blockquote p:last-child::after { content: "\201D"; }
.testimonial-featured figcaption { margin-top: 26px; }

.testimonial-grid blockquote p::before { content: none; }

/* ------------------------------------------------------------ packages -- */

.packages { align-items: stretch; }

.package {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--teal);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
}
/* The card the page wants chosen. It carried only a terracotta top edge, which
   at 2px against two teal neighbours was not enough to read as featured before
   you got close enough to see the badge. Weight now comes from a thicker top
   edge, a warmer ground and a lift off the page -- no scale transform, which
   would break the three cards' shared baseline in the grid. */
.package-feature {
  border-top: 4px solid var(--clay);
  /* The top edge is 2px thicker than its neighbours', which pushed everything
     inside down by 2px and left the three dividers a hair out of line. Take
     the 2px back off the padding so the content starts at the same height. */
  padding-top: calc(clamp(26px, 3vw, 36px) - 2px);
  border-color: var(--clay) var(--line) var(--line);
  background: #FBF6EF;
  box-shadow: 0 2px 4px rgba(51,48,43,.06), 0 22px 44px -20px rgba(51,48,43,.34);
  position: relative;
}
/* Do NOT set font-size on this card's h3 with an em value. `1.06em` resolves
   against the card's base size, not the heading's, so it silently shrank the
   title below its two neighbours. The card is already distinguished by its
   edge, ground, lift, badge and offer line -- the heading needs nothing. */

.package-badge {
  position: absolute;
  top: 0;
  right: clamp(26px, 3vw, 36px);
  transform: translateY(-50%);
  background: var(--clay);
  color: #FCF9F3;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* The offer line. Instrument Serif is single-weight, so weight is not
   available here -- prominence comes from size, from sitting directly under
   the price, and from the terracotta rule marking it as the deal rather than
   another spec. The old -8px top margin was a hack to pull it under the
   divider; it now sits above the divider and needs real spacing instead. */
/* Sized to sit on ONE line inside a three-column card. Measured: the line
   needs 20px at 1024 and 22.5px at 1280 and above, so 20px is the ceiling
   that holds everywhere the three columns are shown. At 27px it wrapped, and
   two lines of serif made it the loudest thing in the section. */
.package-hook {
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.25;
  color: var(--clay);
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--clay);
}

/* Three across, held as far down as the cards can carry it.
   The row exists to be COMPARED -- side by side is how anyone reads a price
   list -- and the generic .grid-3 rule dropped it to two columns at 980px,
   which orphans one of three cards on a second row. That is the worst of both
   worlds: no comparison, and it looks like a mistake.

   Between 761 and 1080 the cards run compact so three still fit without the
   type going to pieces. Below 761 they stack in one column; two columns of
   three never happens. */
@media (max-width: 980px) {
  .grid-3.packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) and (min-width: 761px) {
  .packages { gap: 14px; }
  .packages .package { padding: 22px 18px; }
  .packages .num { font-size: 30px; margin-bottom: 12px; }
  .packages h3 { font-size: 19px; margin-bottom: 10px; }
  .packages .price { font-size: 26px; }
  .packages .price-unit { font-size: 10px; }
  .packages .price-meta { font-size: 10px; letter-spacing: 0.06em; }
  .packages .package-hook { font-size: 17px; padding-left: 9px; margin-bottom: 10px; }
  .packages .price-block { padding-bottom: 16px; margin-bottom: 16px; }
  .packages .tick-list li { font-size: 14.5px; padding-left: 16px; }
  .packages .tick-list { margin-bottom: 18px; }
  .packages .btn { font-size: 10px; letter-spacing: 0.08em; padding: 13px 10px; }
  .packages .package-badge { font-size: 9px; padding: 5px 9px; right: 14px; }
  .packages .package-feature { padding-top: 20px; }
}
/* The dividers still have to line up while the cards are compact, so the
   min-height that does that is re-solved for this band rather than dropped.
   Measured natural heights of the three price blocks: 52 / 52 / 83 down to
   820px, where the offer line still holds one line -- and 52 / 52 / 122 below
   that, where it wraps to two. Hence the two values. */
@media (max-width: 1080px) and (min-width: 821px) {
  .packages .price-block { min-height: 84px; }
}
@media (max-width: 820px) and (min-width: 761px) {
  /* 140, not 124. Below 900px .price-block is border-box (the content-box
     switch lives in the >=900 rule), so the value has to carry the 16px
     padding-bottom with it. At 124 the featured block overflowed to 138 and
     its divider sat 15px below the other two. */
  .packages .price-block { min-height: 140px; }
}
@media (max-width: 760px) {
  .grid-3.packages { grid-template-columns: 1fr; }
  .packages .price-block { min-height: 0; }
}

.packages-terms {
  margin-top: clamp(28px, 4vw, 40px);
  max-width: 66ch;
}
.packages-terms p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 0.7em;
}

.package .num { margin-bottom: 18px; }
.package h3 { margin-bottom: 14px; }

.price {
  font-family: var(--mono);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.price-unit {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The divider hangs off this block, not off .price-meta. Only the featured
   card has an offer line, so the meta line sits at a different depth there --
   a rule attached to it landed lower than the other two and the three cards
   stopped agreeing. The min-height makes room for the tallest of the three,
   so all three rules land on one line while the cards sit side by side.
   Below 900px the cards stack and the constraint stops mattering. */
.price-block {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .price-block { min-height: 108px; box-sizing: content-box; }
}
.price-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.save { color: var(--clay); }

.package .tick-list { margin-bottom: 26px; }
.package .btn { margin-top: auto; }

.policy {
  margin-top: clamp(30px, 4vw, 46px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--teal);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(24px, 3vw, 34px);
  max-width: 68ch;
}
.policy h3 { font-size: clamp(19px, 2vw, 23px); }
.policy p { color: var(--ink-soft); font-size: 15.5px; }

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

.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.28;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 20px;
  color: var(--clay);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--harbour); }

.faq-body {
  padding: 0 clamp(0px, 6vw, 64px) 26px 0;
  max-width: 68ch;
}
.faq-body p { color: var(--ink-soft); }

/* An attributed quotation inside an answer. Ruled rather than boxed, and set
   in the body face at body size: this is a source being cited, not a line
   being celebrated, so it must not out-shout the answer above it. */
.faq-quote {
  margin: 18px 0 0;
  padding-left: clamp(14px, 1.6vw, 20px);
  border-left: 2px solid var(--line);
}
.faq-quote p { margin: 0 0 8px; font-style: italic; }
.faq-quote cite {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- legal -- */

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 820px) { .legal-grid { grid-template-columns: 1fr; } }

.legal-block {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.legal-block h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--harbour);
  margin-bottom: 14px;
  line-height: 1.5;
}
.legal-block p {
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- blue bands -- */

.band {
  background: var(--harbour);
  color: #EFEBE2;
  padding: var(--pad-section) 0;
}
.band h2, .band h3 { color: #F5F2EA; }
.band a:not(.btn) { color: #F5F2EA; }

.closing-inner { max-width: 66ch; text-align: center; }
/* The full lockup, not just the word -- same arrangement as the hero h1 and the
   header: serif name, mono "BY AVRIL" beside it on the same baseline. The size
   relationship follows the HERO (sub at about a tenth of the name) rather than
   the header (10/27), because both of these are display sizes and a 0.37 ratio
   at 104px would put the sub at 38px and turn it into a second headline.

   Stacked, not side by side, for the same reason the chart's centre lockup is:
   in a centred block, centring the PAIR leaves the name itself off the axis.
   Measured, "Become" sat 78px left of the centre line the paragraphs below it
   use. Stacked, both parts sit on that line.

   Set with text-transform rather than typed capitals, so it still copies as
   "by Avril" -- same reasoning as the header lockup. */
.closing-title {
  font-size: clamp(54px, 9vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: clamp(26px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
.closing-title-sub {
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .8;
}
/* The three-line stanza and the call that follows it. Set as display copy
   rather than prose because they are neither: three imperatives and a
   sign-off, meant to be read as a block. Line breaks are hard <br>s -- the
   lines are the unit here, and letting them reflow at a narrow width would
   turn a stanza into a paragraph. */
.closing-stanza {
  font-family: var(--serif);
  font-size: clamp(22px, 2.9vw, 32px);
  line-height: 1.34;
  color: #F5F2EA;
  margin: clamp(28px, 3.4vw, 40px) 0 clamp(20px, 2.4vw, 28px);
}
.closing-call {
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F5F2EA;
  margin: 0 0 clamp(26px, 3.2vw, 36px);
}
.closing-inner p { color: rgba(245,242,234,.86); }
.closing-inner .lead { color: #F5F2EA; }
.closing-inner .emphasis { color: #F5F2EA; }

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

.site-footer {
  background: var(--ink);
  color: #DCD6CB;
  padding: clamp(48px, 6vw, 74px) 0 30px;
  font-size: 15px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px);
  padding-bottom: clamp(34px, 4vw, 50px);
}
@media (max-width: 820px) { .footer-inner { grid-template-columns: 1fr; } }

.site-footer .eyebrow { color: var(--sage); }
.footer-brand .brand-name {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: #F1ECE3;
  margin: 0;
}
.footer-brand .brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 8px 0 0;
}
.footer-tag {
  margin-top: 18px;
  max-width: 32ch;
  color: rgba(220,214,203,.75);
  font-size: 14.5px;
}

.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-nav a, .footer-contact a {
  color: #DCD6CB;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 14.5px;
}
.footer-nav a:hover, .footer-contact a:hover { border-bottom-color: var(--sage); }
.footer-contact p { color: rgba(220,214,203,.75); font-size: 14.5px; }

/* Email and Instagram, each under a small label so a third channel can be
   added later without the block turning into a run of loose lines. */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}
.contact-list li { margin: 0; display: grid; gap: 1px; }
.contact-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* .5 would sit better but measures 3.49:1 on the footer's --ink, under the
     4.5:1 AA needs at this size. .65 is the lowest step that passes, at
     4.81:1, so the label stays subordinate without going under. */
  color: rgba(220,214,203,.65);
}
.contact-list a { justify-self: start; }

.footer-legal {
  border-top: 1px solid rgba(220,214,203,.16);
  padding-top: 26px;
  padding-bottom: 26px;
}
.footer-legal p {
  margin: 0;
  max-width: 92ch;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(220,214,203,.7);
}
.footer-legal a { color: #F1ECE3; }

.footer-base {
  border-top: 1px solid rgba(220,214,203,.16);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: space-between;
}
.footer-base p {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: rgba(220,214,203,.6);
  text-transform: uppercase;
}
.footer-base a { color: rgba(220,214,203,.85); }

/* ----------------------------------------------------- share & gift -- */

.referral { max-width: 56ch; }
.referral .section-lede { margin-top: 18px; }

/* Dialogs */
.modal {
  width: min(520px, calc(100vw - 32px));
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 2px solid var(--teal);
  border-radius: var(--radius);
  /* No `position` here — a modal <dialog> must keep the UA's `position: fixed`
     to stay centred in the top layer. It is still a containing block, so the
     absolutely-positioned close button anchors to it correctly. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.modal::backdrop { background: rgba(51, 48, 43, .5); }

.modal-title { font-size: clamp(24px, 2.8vw, 31px); margin-bottom: 10px; }
.modal-copy { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }

.modal-close-form { position: absolute; top: 10px; right: 10px; margin: 0; }
.modal-close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
}
.modal-close:hover { color: var(--ink); }

/* Share options */
.share-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
@media (max-width: 420px) { .share-options { grid-template-columns: 1fr; } }

.share-option {
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color .2s ease, background-color .2s ease;
}
.share-option:hover, .share-option:focus-visible {
  border-color: var(--teal);
  background: var(--bg-deep);
}

/* Form fields */
.field { display: block; margin-bottom: 20px; }
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
.field-optional { text-transform: none; letter-spacing: 0.04em; opacity: .75; }

.field input[type="text"],
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--clay); outline-offset: 1px; }

.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; }

/* Gift pack chooser */
.gift-packs { border: 0; padding: 0; margin: 0 0 22px; }
.gift-packs .field-label { margin-bottom: 12px; }

.gift-pack { display: block; margin-bottom: 8px; cursor: pointer; }
.gift-pack input { position: absolute; opacity: 0; pointer-events: none; }

.gift-pack-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .2s ease, background-color .2s ease;
}
.gift-pack input:checked + .gift-pack-body {
  border-color: var(--clay);
  background: var(--surface);
}
.gift-pack input:focus-visible + .gift-pack-body { outline: 2px solid var(--clay); outline-offset: 2px; }
.gift-pack-name { font-size: 15px; }
.gift-pack-price { font-family: var(--mono); font-size: 14px; color: var(--ink-soft); }
.gift-pack input:checked + .gift-pack-body .gift-pack-price { color: var(--clay); }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  background: var(--ink);
  color: #F1ECE3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 80;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------- print -- */

@media print {
  .site-header, .nav-toggle, .btn-row, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding: 18pt 0; }
  .faq details { display: block; }
  .faq .faq-body { display: block !important; }
}