/* Self-hosted latin subsets of Fraunces and Inter (SIL OFL), replacing the
   render-blocking Google Fonts CSS request (2026-08-25 optimisation pass).
   Same variable axes as the previous css2 request; display swap. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 650;
  font-display: swap;
  src: url("assets/fonts/fraunces-roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 650;
  font-display: swap;
  src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Flow Studio Bray: five-page preview, v7 (client feedback 2026-08-24).
   Cream dominant, clay accent, dark brown type. Mobile first.
   One design system, five pages: home, classes, pricing, journal, contact. */

:root {
  --cream: #F7F2E8;
  --cream-2: #F0E9DA;
  --cream-3: #FDFAF3;
  --line: #E2D8C3;
  --line-strong: #D9CCB3;
  --ink: #2F241A;
  --ink-2: #6A5B47;
  /* Brand orange per client 2026-08-24. It sits at 2.9:1 on cream, so it is
     reserved for display type, buttons and decoration; --clay-deep is the same
     hue darkened to 4.7:1+ and carries every small piece of orange text. */
  --clay: #C87E58;
  --clay-deep: #995533;
  --foot-bg: #2A2014;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --radius: clamp(14px, 2vw, 22px);
  /* One rhythm at every width: the desktop halving from 2026-08-14 was
     reverted at the client's request on 2026-08-24. */
  --section-pad: clamp(4rem, 9.5vw, 6.25rem);
}

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

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

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fine grain keeps large cream fields from going flat */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .045;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

ul { list-style: none; }

a { color: inherit; }

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 3000;
  background: var(--ink);
  color: var(--cream);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-size: .85rem;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: min(100% - (var(--gutter) * 2), 1140px);
  margin-inline: auto;
}
.wrap-text { max-width: 780px; text-align: center; }
.wrap-narrow { max-width: 680px; }
/* Left-aligned reading column inside a full wrap, for interior pages */
.page-col { max-width: 780px; min-width: 0; }

/* ---------- Header: centred mark, the menu framed as its own band ---------- */

.site-head { padding: 1.15rem 0 0; }

.head-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
}

.brand { display: block; }

/* The wordmark arrives on a portrait canvas; crop to the wordmark band.
   The crop now stops above the logo's built-in underline (client note
   2026-08-24): the nav hairlines below carry that job instead. */
.brand-crop {
  display: block;
  width: clamp(154px, 22vw, 196px);
  aspect-ratio: 1080 / 362;
  overflow: hidden;
}
.brand-crop img {
  width: 100%;
  height: auto;
  margin-top: -41%;
}

/* Hairlines above and below the menu give it its own quiet area
   (client request 2026-08-24), aligned with the page wrap. */
.head-nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(1.05rem, 2.6vw, 2rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: .55rem;
}

.head-link {
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: .4rem;
  transition: color .2s ease;
}
.head-link:hover { color: var(--ink); }
.head-link[aria-current="page"] { color: var(--clay-deep); }

/* The header waitlist link stays typographic so the hero button
   remains each page's one solid clay moment */
.head-wait {
  display: none;
  font-size: .72rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 550;
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(153, 85, 51, .4);
  padding-block: .4rem;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.head-wait:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- Shared type ---------- */

.eyebrow {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}

.label {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.label-center::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

h2 {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(2.15rem, 3.2vw + 1rem, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  margin-top: 1.6rem;
  text-wrap: balance;
}
h2 em, .page-title em {
  font-style: italic;
  font-weight: 340;
  color: var(--clay);
}

.section-lede {
  margin-top: 1.1rem;
  color: var(--ink-2);
  max-width: 54ch;
}

.statement {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(1.45rem, 1.6vw + .9rem, 2.1rem);
  line-height: 1.42;
  color: var(--ink);
  max-width: 30ch;
  margin-top: 1.7rem;
  text-wrap: balance;
}

.body-copy {
  margin-top: 1.4rem;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 58ch;
}

.text-link {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 550;
  letter-spacing: .015em;
  color: var(--clay-deep);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(153, 85, 51, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.text-link:hover { color: var(--ink); text-decoration-color: var(--ink); }

.quiet-cta { margin-top: 2rem; }

/* Split heads: one desktop grammar for the editorial sections.
   Lead column carries the label or statement, body column the content,
   on the same 5fr/6fr grid as the class moment rows. Stacks on mobile. */
.split-head { display: grid; }
.split-body > .statement:first-child { margin-top: 1.5rem; }
.split-body > .section-lede:first-child { margin-top: 1.4rem; }
.split-body > .body-copy:first-child { margin-top: 1.4rem; }

@media (min-width: 900px) {
  .split-head {
    grid-template-columns: 5fr 6fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .split-lead h2 { margin-top: 1.2rem; }
  .split-lead .statement { margin-top: 1.2rem; }
  .split-body > .statement:first-child,
  .split-body > .section-lede:first-child,
  .split-body > .body-copy:first-child { margin-top: .3rem; }
}

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

/* Dark ink on the brand orange: the only pairing that keeps the button
   exactly #C87E58 and still reads at 4.7:1. Hover deepens to the dark clay,
   where cream type takes over. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .85rem 1.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--clay);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 550;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 12px 28px rgba(200, 126, 88, .26);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover { background: var(--clay-deep); color: var(--cream-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(200, 126, 88, .24); }

/* Quiet outline sibling: actionable without competing with the page's one solid clay moment */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem 1.4rem;
  border: 1px solid rgba(153, 85, 51, .55);
  border-radius: 999px;
  background: transparent;
  color: var(--clay-deep);
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 550;
  letter-spacing: .015em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: var(--clay); color: var(--ink); border-color: var(--clay); }

/* ---------- Media frames ---------- */

.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--cream-2);
}
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-chip {
  position: absolute;
  left: .9rem;
  bottom: .9rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
  background: rgba(247, 242, 232, .9);
  padding: .45em 1em;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.media-caption {
  margin-top: .95rem;
  font-size: .8rem;
  color: var(--ink-2);
  text-align: center;
}

/* ---------- Home: hero ---------- */

.hero { padding: clamp(1.4rem, 4.5vw, 3.6rem) 0 var(--section-pad); }

.hero-title {
  font-family: var(--serif);
  font-weight: 360;
  font-size: clamp(3.05rem, 7.6vw + 1.2rem, 6.6rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin-top: 1.15rem;
}
.hero-title .line { display: block; }
.hero-title em {
  font-style: italic;
  font-weight: 340;
  color: var(--clay);
}

.lede {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.08rem, 1.1vw + .8rem, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 1.6rem auto 0;
  text-wrap: balance;
}

.hero-cta { margin-top: 2.2rem; }

.cta-note {
  margin-top: .95rem;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ink-2);
}

/* The opening-and-address line now sits quietly under the studio clip
   (client request 2026-08-24), out of the CTA's way */
.hero-place { margin-top: 1.05rem; text-align: center; }

.hero-media { margin-top: clamp(2.6rem, 6.5vw, 5rem); }

.hero-frame img {
  aspect-ratio: 4 / 3;
  object-position: 50% 45%;
}
/* The sign clip is 16:9; show it uncropped on small screens so the sign never clips */
.hero-frame video {
  aspect-ratio: 16 / 9;
  object-position: 50% 45%;
}

/* ---------- Sections shared ---------- */

.section { padding-block: var(--section-pad); }
.section--tint { background: var(--cream-2); }

/* ---------- Home: curated class moments ---------- */

.moment {
  margin-top: clamp(3.2rem, 7.5vw, 5.25rem);
  display: grid;
  gap: 1.8rem;
}

.moment-media { aspect-ratio: 4 / 3; }
/* Keep the desktop window over the reformer bed, not the empty right of the 3:2 source */
.moment--reformer .moment-media img { object-position: 42% 50%; }

.moment-tag {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 550;
  color: var(--clay-deep);
}

.moment-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.4vw + .9rem, 2.7rem);
  line-height: 1.15;
  margin-top: .7rem;
}
.moment-body > p:not(.moment-tag) {
  margin-top: 1rem;
  color: var(--ink-2);
  max-width: 46ch;
}
.moment-link { margin-top: 1.2rem; }

/* Third moment: one wide breath, everything else in a line beneath */
.trio { margin-top: clamp(3.2rem, 7.5vw, 5.25rem); }
.trio-band img { aspect-ratio: 16 / 9; object-position: 50% 62%; }
.trio-body {
  margin-top: 1.9rem;
  display: grid;
  gap: 1rem;
}
.trio-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2vw + .9rem, 2.3rem);
  line-height: 1.2;
  max-width: 22ch;
}
.trio-body p { color: var(--ink-2); max-width: 52ch; }

/* ---------- Home: welcome and studio ---------- */

.studio-band { margin-top: clamp(2.8rem, 7vw, 4.5rem); }
.studio-band img {
  aspect-ratio: 16 / 9;
  object-position: 50% 30%;
}

/* ---------- Interior pages: hero ---------- */

.page-hero { padding: clamp(2rem, 5.5vw, 3.6rem) 0 0; }

.page-title {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(2.6rem, 4.4vw + 1rem, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-top: 1.5rem;
  text-wrap: balance;
  max-width: 20ch;
}

.page-lede {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(1.08rem, 1vw + .85rem, 1.28rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
  margin-top: 1.4rem;
}

/* ---------- Classes: the finder ---------- */

.finder { margin-top: clamp(2.6rem, 6vw, 3.8rem); border-top: 1px solid var(--line); }

.finder-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num path arrow" "num classes arrow";
  column-gap: 1.4rem;
  align-items: baseline;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .2s ease;
}
.finder-row:hover { background: rgba(253, 250, 243, .75); }

.finder-num {
  grid-area: num;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: 1.05rem;
  color: var(--clay);
  min-width: 1.6ch;
}
.finder-path {
  grid-area: path;
  font-family: var(--serif);
  font-weight: 420;
  font-size: clamp(1.35rem, 1.4vw + .8rem, 1.7rem);
  line-height: 1.25;
}
.finder-classes {
  grid-area: classes;
  margin-top: .25rem;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.finder-arrow {
  grid-area: arrow;
  align-self: center;
  font-family: var(--sans);
  color: var(--clay);
  font-size: 1.05rem;
  transition: transform .25s ease;
}
.finder-row:hover .finder-arrow { transform: translateY(3px); }

/* ---------- Classes: group sections ---------- */

.group-kicker {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.group-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.3rem, 1.4vw + .7rem, 1.7rem);
  color: var(--clay);
}
.group-kicker .label { flex: 1; }

.class-feature {
  margin-top: clamp(2.8rem, 6.5vw, 4.5rem);
  display: grid;
  gap: 1.8rem;
}
.class-feature-media { aspect-ratio: 4 / 3; }
.class-feature-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.4vw + .9rem, 2.7rem);
  line-height: 1.15;
}
.class-feature-body .moment-tag + h3 { margin-top: .7rem; }
.class-feature-body p:not(.moment-tag):not(.best-for) {
  margin-top: 1rem;
  color: var(--ink-2);
  max-width: 46ch;
}

.best-for {
  margin-top: 1.3rem;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
}
.best-for strong { font-weight: 550; color: var(--clay-deep); }

/* Client request 2026-08-25: the Best For line now sits directly under each
   class heading as a quick guide for newcomers, so it tucks in close to the
   title it belongs to */
h3 + .best-for { margin-top: .7rem; }

.class-duo {
  margin-top: clamp(2.8rem, 6.5vw, 4.25rem);
  display: grid;
  gap: clamp(2.6rem, 6vw, 3.5rem);
}
.duo-item .media-frame { aspect-ratio: 4 / 5; }
.duo-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.8vw + .8rem, 2.1rem);
  line-height: 1.2;
  margin-top: 1.4rem;
}
.duo-item p:not(.best-for) {
  margin-top: .9rem;
  color: var(--ink-2);
  max-width: 46ch;
}

/* Heat: the one full-bleed-feeling moment on the classes page.
   Crop biased up and left toward the glowing arch and the hazy drapes. The mats
   fill the lower half of the render, so the band is cut above them: the floor
   reads as atmosphere entering the frame, not as a headcount. */
/* Eight-mat render: the mats are the story now, so the crop holds them with the arch */
.heat-band img { aspect-ratio: 16 / 9; object-position: 42% 58%; }
.heat-copy {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: 1.5rem;
}
.heat-copy h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.4vw + .9rem, 2.7rem);
  line-height: 1.15;
  margin-top: .7rem;
}
.heat-copy p:not(.moment-tag):not(.best-for) {
  margin-top: 1rem;
  color: var(--ink-2);
  max-width: 50ch;
}

/* ---------- Pricing: editorial list, not a grid ---------- */

.price-list { margin-top: clamp(2.4rem, 6vw, 3.6rem); border-top: 1px solid var(--line); }

.price-row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.4rem, 3vw, 2.4rem);
  padding-block: clamp(2rem, 4.5vw, 2.8rem);
  border-bottom: 1px solid var(--line);
}
/* Grid children default to min-width:auto, which lets a long line push the
   whole page wider than a narrow phone. Let them shrink instead. */
.price-row > * { min-width: 0; }
.price-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.4rem, 1.6vw + .7rem, 1.9rem);
  color: var(--clay);
  line-height: 1.3;
}
.price-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2vw + .8rem, 2.3rem);
  line-height: 1.2;
}
.price-for {
  margin-top: .45rem;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 550;
  color: var(--clay-deep);
}
.price-body > p:not(.price-for) {
  margin-top: .9rem;
  color: var(--ink-2);
  max-width: 52ch;
}

/* Pricing: the pitch, the hierarchy, the honest constraint */

.pitch-band { margin-top: clamp(2.2rem, 5.5vw, 3.2rem); }
.pitch-band img { aspect-ratio: 16 / 9; object-position: 50% 55%; }

.price-row--featured { padding-block: clamp(2.5rem, 5.5vw, 3.5rem); }
.price-row--featured .price-body h3 { font-size: clamp(2rem, 2.6vw + .8rem, 2.9rem); }

.price-row--quiet .price-body h3 { font-size: clamp(1.45rem, 1.5vw + .7rem, 1.85rem); }
.price-row--quiet .price-body > p:not(.price-for):not(.choose-line) { font-size: .97rem; }

.price-body > p.choose-line {
  margin-top: 1.05rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 50ch;
}

.price-cta { margin-top: 1.35rem; }

/* Proposed-pricing note: the figures are on the table, not launched */
.proposed-note {
  margin-top: clamp(2.2rem, 5vw, 3rem);
  display: flex;
  align-items: baseline;
  gap: .85rem;
  max-width: 60ch;
}
.proposed-chip {
  flex-shrink: 0;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 550;
  color: var(--clay-deep);
  border: 1px solid rgba(153, 85, 51, .45);
  border-radius: 999px;
  padding: .3em .9em;
}
.proposed-note p { font-size: .92rem; color: var(--ink-2); min-width: 0; }

/* Tier lists inside a pricing row: quiet label-and-figure lines */
.tier-list { margin-top: 1.4rem; max-width: 32rem; border-top: 1px solid var(--line); }
.tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--line);
}
.tier-label { font-size: .98rem; color: var(--ink); min-width: 0; }
.tier-sub { display: block; font-size: .78rem; color: var(--ink-2); margin-top: .1rem; }
.tier-price {
  font-family: var(--serif);
  font-weight: 420;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
}

.tier-note { margin-top: .8rem; font-size: .8rem; color: var(--ink-2); max-width: 46ch; }

/* The Hot Yoga add-on: the one warm accent inside the membership row */
.hot-addon {
  margin-top: 1.4rem;
  max-width: 32rem;
  background: var(--cream-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  border-radius: 12px;
  padding: 1.05rem 1.3rem;
}
.hot-addon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}
.hot-addon-title {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.08rem;
  color: var(--ink);
  min-width: 0;
}
.hot-addon-price {
  font-family: var(--serif);
  font-weight: 420;
  font-size: 1.2rem;
  color: var(--clay-deep);
  white-space: nowrap;
}
.hot-addon p:not(.hot-addon-title) { margin-top: .45rem; font-size: .88rem; color: var(--ink-2); }

.capacity { margin-top: clamp(3rem, 7vw, 4.25rem); }
.capacity .statement { margin-top: 0; }
.capacity p:not(.statement) { margin-top: 1.15rem; color: var(--ink-2); max-width: 58ch; }

/* Desktop pricing architecture: memberships own a full row (details left,
   figures right), packs and drop-ins share a subordinate two-up row */
.featured-grid { display: grid; }
.price-duo { border-bottom: 1px solid var(--line); }
.price-duo .price-row { border-bottom: 0; }

@media (min-width: 900px) {
  .featured-grid {
    grid-template-columns: 6fr 5fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  .featured-grid .tier-list { margin-top: .4rem; }
  .price-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

/* Journal: one quiet visual so the page is not all text */
.journal-band { margin-top: clamp(2.4rem, 6vw, 3.4rem); }
.journal-band img { aspect-ratio: 16 / 9; object-position: 80% 62%; }

@media (min-width: 720px) {
  .journal-band img { aspect-ratio: 21 / 9; }
}

@media (min-width: 720px) {
  .pitch-band img { aspect-ratio: 21 / 9; }
}

/* ---------- Journal: strands ---------- */

.strands { margin-top: clamp(2.4rem, 6vw, 3.6rem); border-top: 1px solid var(--line); }

.strand {
  display: grid;
  gap: .5rem;
  padding-block: clamp(1.8rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.strand h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.6vw + .8rem, 1.9rem);
  line-height: 1.25;
}
.strand p { color: var(--ink-2); max-width: 56ch; }

.journal-note { margin-top: clamp(2.6rem, 6vw, 3.6rem); }
.journal-note .statement { margin-top: 0; }
.journal-note p:not(.statement) { margin-top: 1.1rem; color: var(--ink-2); max-width: 56ch; }

/* ---------- Contact: three quiet routes ---------- */

.contact-list { margin-top: clamp(2.4rem, 6vw, 3.6rem); border-top: 1px solid var(--line); }

.contact-row {
  display: grid;
  gap: .55rem;
  padding-block: clamp(1.9rem, 4.5vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.contact-key {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 550;
  color: var(--ink-2);
}
.contact-value {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(1.3rem, 2vw + .6rem, 1.9rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.contact-value a {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: rgba(200, 126, 88, .5);
  text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.contact-value a:hover { color: var(--clay-deep); text-decoration-color: var(--clay-deep); }
.contact-sub { font-size: .95rem; color: var(--ink-2); max-width: 52ch; }

/* ---------- FAQ ---------- */

.faq-list {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px solid var(--line);
}

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  padding-block: 1.15rem;
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.12rem;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--clay);
  flex-shrink: 0;
  transition: transform .25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.faq-item > p {
  padding-bottom: 1.3rem;
  color: var(--ink-2);
  max-width: 60ch;
}

/* ---------- The list (waitlist form) ---------- */

.list {
  background: var(--cream-2);
  padding-block: var(--section-pad);
}

.list-inner { text-align: center; }

.list .label { justify-content: center; }

.list-lede { margin-inline: auto; max-width: 46ch; }

.waitlist {
  margin: 2.4rem auto 0;
  max-width: 560px;
  text-align: left;
}

.field-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 550;
  color: var(--ink-2);
  margin-bottom: .55rem;
}

.form-fields {
  display: grid;
  gap: 1.1rem;
}

.waitlist-btn {
  margin-top: 1.3rem;
  width: 100%;
}

.waitlist input {
  width: 100%;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .9rem 1.4rem;
  min-height: 52px;
  touch-action: manipulation;
}
.waitlist input::placeholder { color: #9C8D75; }

.waitlist select {
  width: 100%;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background-color: var(--cream-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: .9rem 2.7rem .9rem 1.4rem;
  min-height: 52px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A5B47' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.15rem center;
  background-size: 12px 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.waitlist select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}
.waitlist select:disabled { opacity: .45; cursor: default; }

.field-optional {
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: #9C8D75;
}
.waitlist input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}
.waitlist input:disabled,
.waitlist .btn:disabled {
  opacity: .45;
  cursor: default;
}
.waitlist .btn:disabled { transform: none; }

.form-note {
  margin-top: 1rem;
  font-size: .78rem;
  color: var(--ink-2);
  text-align: center;
}

.form-status {
  margin: 1.4rem auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
  max-width: 40ch;
}
/* Focus lands here after submit for screen readers; no visual ring needed */
.form-status:focus, .form-status:focus-visible { outline: none; }

/* ---------- Closing band on interior pages ---------- */

.cta-band {
  background: var(--cream-2);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 5.75rem);
}
.cta-band h2 { margin-top: 0; }
.cta-band p { margin: 1rem auto 0; color: var(--ink-2); max-width: 46ch; }
.cta-band .btn { margin-top: 1.8rem; }

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

.site-foot {
  background: var(--foot-bg);
  color: #EDE4D3;
  text-align: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter) 2.75rem;
}

.foot-logo {
  width: min(190px, 48vw);
  height: auto;
  margin-inline: auto;
}

.foot-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: 1.15rem;
  margin-top: .2rem;
}

.foot-nav {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem 1.7rem;
}
.foot-nav a {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #EDE4D3;
  text-decoration: none;
  padding-block: .3rem;
  transition: color .2s ease;
}
.foot-nav a:hover { color: #FFF8EC; text-decoration: underline; text-underline-offset: 4px; }
.foot-nav a:focus-visible { outline: 2px solid #EDE4D3; outline-offset: 3px; border-radius: 2px; }

.foot-meta {
  margin-top: 1.9rem;
  font-size: .78rem;
  letter-spacing: .06em;
  line-height: 1.75;
  color: #BBAC94;
  text-wrap: balance;
}

/* The class list is the densest line in the footer: a little more leading and
   a little less tracking let it settle into two balanced lines on a phone */
.foot-classes {
  margin-top: .55rem;
  font-size: .78rem;
  letter-spacing: .035em;
  line-height: 1.9;
  color: #BBAC94;
  text-wrap: balance;
}

.foot-social {
  margin-top: 1.35rem;
  font-size: .8rem;
  letter-spacing: .04em;
}
.foot-social a {
  color: #EDE4D3;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #9A8C74;
  padding-block: .35rem;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.foot-social a:hover {
  color: #FFF8EC;
  text-decoration-color: #EDE4D3;
}
.foot-social a:focus-visible {
  outline: 2px solid #EDE4D3;
  outline-offset: 3px;
  border-radius: 2px;
}

.foot-fine {
  margin-top: .85rem;
  font-size: .72rem;
  color: #9A8C74;
  text-wrap: balance;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity .7s ease var(--d, 0s),
      transform .7s cubic-bezier(.22, .61, .21, 1) var(--d, 0s);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* If JS never runs, keep everything visible */
  html.no-js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Breakpoints ---------- */

/* Small-screen hardening. Nothing here restyles anything: it only tightens the
   nav tracking and lets the tightest label-and-figure rows wrap, so the
   narrowest phones never have to scroll sideways. */
@media (max-width: 419px) {
  /* "Journal" is a longer label than "Blog" was: a touch less gap and tracking
     keeps all four links on one centred line in both the header and the footer */
  .head-nav { gap: .8rem; }
  .head-link,
  .head-wait { letter-spacing: .13em; }

  /* The opening-and-address line stays quiet on a phone: less tracking keeps
     it to two centred lines under the studio clip */
  .hero-place { letter-spacing: .12em; }

  .foot-nav { gap: .75rem 1.1rem; }
  .foot-nav a { letter-spacing: .11em; }

  /* When a label is too long, the figure drops to the line below on the left.
     The hairline underneath still closes the row. */
  .tier { flex-wrap: wrap; gap: .15rem .9rem; }
  .tier-price { line-height: 1.25; }

  .hot-addon { padding-inline: 1.05rem; }
  .hot-addon-head { flex-wrap: wrap; gap: .15rem .9rem; }

  /* Ghost buttons wrap their label rather than widening the row */
  .btn-ghost {
    white-space: normal;
    text-align: center;
    line-height: 1.4;
    padding-block: .7rem;
  }
}

@media (min-width: 560px) {
  .form-fields { grid-template-columns: repeat(2, 1fr); }
  .form-field--full { grid-column: 1 / -1; }
  .waitlist-btn {
    width: fit-content;
    margin-inline: auto;
    padding-inline: 2.8rem;
    display: flex;
  }
}

@media (min-width: 720px) {
  /* The 2026-08-14 desktop halving of --section-pad and the cta-band, and the
     first-fold hero tightening, were removed on 2026-08-24: the client asked
     for the larger rhythm back, so desktop now breathes on the base tokens. */
  .site-head { padding-top: 1.5rem; }
  .head-inner { gap: .8rem; }
  .head-wait { display: inline-block; }

  .hero-frame img,
  .hero-frame video { aspect-ratio: 21 / 10; }
  .studio-band img { aspect-ratio: 21 / 9; }
  .trio-band img { aspect-ratio: 21 / 9; }
  .heat-band img { aspect-ratio: 21 / 9; }

  .trio-body {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .trio-body .trio-side { padding-top: .35rem; }

  .heat-copy { grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 5vw, 4.5rem); }

  .class-duo { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 3.5rem); }

  .price-row { grid-template-columns: 3.2rem 1fr; }

  .contact-row {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
  }
  .contact-row .contact-sub { grid-column: 2; }
}

@media (min-width: 860px) {
  .moment,
  .class-feature {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .moment-media,
  .class-feature-media { aspect-ratio: 4 / 5; }

  /* Flipped rows put the picture on the right, words on the left */
  .moment--flip { grid-template-columns: 6fr 5fr; }
  .moment--flip .moment-media { order: 2; }
  .class-feature--flip { grid-template-columns: 6fr 5fr; }
  .class-feature--flip .class-feature-media { order: 2; }

  .finder-row {
    grid-template-columns: 2.6rem 220px 1fr auto;
    grid-template-areas: "num path classes arrow";
    align-items: baseline;
  }
  .finder-classes { margin-top: 0; }
}

/* ---------- GloFox embeds (v10, 2026-09-03: always on) ----------
   The iframe is never in the markup; script.js injects it on page load,
   resized by the self-hosted iframe-resizer. The CSS min-height floors
   below hold the frame open if the resizer is blocked, so it can never
   collapse to zero height. Once the resizer reports a real content
   height, script.js adds glofox-frame--sized and the floor drops, so a
   short frame (an empty timetable, a small list) renders compact and
   deliberate instead of towering blank. */

[hidden] { display: none !important; }

.embed-shell { margin-top: clamp(2.2rem, 5vw, 3.2rem); }

.embed-mount {
  border-radius: var(--radius);
  overflow: hidden;
  outline: none;
}
.embed-live .embed-mount {
  background: var(--cream-3);
  border: 1px solid var(--line);
}
.glofox-frame {
  display: block;
  width: 100%;
  border: 0;
  min-height: var(--frame-min-mobile, 760px);
}
@media (min-width: 720px) {
  .glofox-frame { min-height: var(--frame-min, 700px); }
}
[data-glofox-embed="schedule"] { --frame-min: 700px; --frame-min-mobile: 900px; }
[data-glofox-embed="leadCapture"] { --frame-min: 560px; --frame-min-mobile: 680px; }

/* Applied by script.js once the resizer has reported a real content
   height: sizing is live from then on, so the tall floors stand down to a
   small guard and short content (an empty timetable) sits compact. */
.glofox-frame.glofox-frame--sized { min-height: 120px; }

.embed-fallback {
  margin-top: 1.15rem;
  font-size: .92rem;
  color: var(--ink-2);
}

/* Prominent hosted routes under the timetable: full timetable and member
   login open GloFox's own pages in a new tab. */
.embed-actions {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem .9rem;
}
.embed-pending-note {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--clay-deep);
}
.embed-noscript {
  margin-top: 1.1rem;
  font-size: .92rem;
  color: var(--ink-2);
  max-width: 52ch;
}

/* Attribution, restyled into the site's own type. GloFox confirmed on
   2026-09-04: the line sits outside the iframe, restyling is fine, and
   the wording and link stay and ship at launch. */
.embed-attribution {
  margin-top: .9rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-2);
}
.embed-attribution a {
  color: var(--ink-2);
  font-weight: 550;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(106, 91, 71, .5);
}
.embed-attribution a:hover { color: var(--ink); }

/* ---------- Consent banner and preferences dialog ---------- */

.consent-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(.8rem, 2.5vw, 1.4rem);
  width: min(100% - 2rem, 720px);
  z-index: 2500;
  background: var(--cream-3);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(47, 36, 26, .18);
  padding: 1.1rem 1.3rem;
  display: grid;
  gap: .9rem;
}
.consent-bar p {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-2);
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
}
.consent-actions .btn {
  min-height: 44px;
  padding: .55rem 1.4rem;
  font-size: .88rem;
  box-shadow: none;
}
.consent-actions .btn-ghost {
  min-height: 44px;
  font-size: .85rem;
}

.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(47, 36, 26, .45);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.consent-dialog {
  background: var(--cream-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  padding: clamp(1.4rem, 4vw, 2.1rem);
  outline: none;
}
.consent-dialog h2 {
  margin-top: 0;
  font-size: clamp(1.5rem, 1.6vw + .8rem, 1.9rem);
}
.consent-dialog-lede {
  margin-top: .8rem;
  font-size: .95rem;
  color: var(--ink-2);
}
.consent-option {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-top: 1.15rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-2);
  cursor: pointer;
}
.consent-option input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .25rem;
  flex-shrink: 0;
  accent-color: var(--clay-deep);
  cursor: pointer;
}
.consent-option strong {
  display: block;
  font-weight: 550;
  color: var(--ink);
  margin-bottom: .15rem;
}
.consent-fine {
  margin-top: 1.15rem;
  font-size: .8rem;
  color: var(--ink-2);
}
.consent-dialog .consent-actions { margin-top: 1.3rem; }

/* ---------- Footer: legal row, preferences control, member login ---------- */

.foot-legal {
  margin-top: 1.15rem;
  font-size: .74rem;
  letter-spacing: .05em;
  color: #BBAC94;
}
.foot-legal a,
.foot-legal-btn {
  color: #BBAC94;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #9A8C74;
  padding-block: .35rem;
  transition: color .2s ease;
}
.foot-legal-btn {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  padding-inline: 0;
}
.foot-legal a:hover,
.foot-legal-btn:hover { color: #EDE4D3; }
.foot-legal a:focus-visible,
.foot-legal-btn:focus-visible {
  outline: 2px solid #EDE4D3;
  outline-offset: 3px;
  border-radius: 2px;
}
html.no-js .foot-legal-btn { display: none; }

/* The .policy-pending placeholder styles were removed 2026-09-06: all
   three legal pages now carry real copy (Cowork draft, solicitor review
   pending before publication). */

/* ---------- Pricing card CTAs: inverted states (ships with V2) ----------
   Client-requested design change, 2026-09-04: on the pricing cards the
   call to action rests FILLED in brand clay and clears on hover and
   active, the reverse of the site's default ghost button. Dark ink on
   the clay fill is the 4.7:1 pairing already documented at the tokens.
   Scoped to .price-cta so nothing else on the site changes. The pricing
   page is hidden until stage 2, so this ships dark with V1. */
.price-cta .btn-ghost {
  background: var(--clay);
  color: var(--ink);
  border-color: var(--clay);
}
.price-cta .btn-ghost:hover,
.price-cta .btn-ghost:active {
  background: transparent;
  color: var(--clay-deep);
  border-color: rgba(153, 85, 51, .55);
}

/* ---------- Legal pages: privacy, cookies, terms ----------
   Append to styles.css. Replaces the .policy-pending block, which can be
   deleted once all three pages carry real copy.

   Why this exists: the global reset sets `ul { list-style: none; }` and the
   default h2 runs to 3.5rem, which is right for a landing section and wrong
   for a page with ten headings and a bullet list under half of them. This
   block scopes calmer headings and restores list markers inside .legal-body
   only. It adds no new colours, no new fonts and no new spacing scale. */

.legal-body { margin-top: clamp(2.2rem, 5vw, 3rem); }

.legal-meta {
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 550;
  color: var(--ink-2);
}

.legal-body h2 {
  font-size: clamp(1.5rem, 1.4vw + .9rem, 1.95rem);
  margin-top: clamp(2.6rem, 6vw, 3.4rem);
  max-width: 24ch;
}

.legal-body > .body-copy:first-of-type { margin-top: 1.6rem; }

.legal-body .body-copy { max-width: 62ch; }

/* Bullet lists: markers restored inside legal copy only. */
.legal-list {
  list-style: disc;
  margin-top: 1.3rem;
  padding-left: 1.15rem;
  max-width: 62ch;
}
.legal-list li {
  margin-top: .75rem;
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--ink-2);
  padding-left: .3rem;
}
.legal-list li::marker { color: var(--clay); }
.legal-list strong { color: var(--ink); font-weight: 550; }

/* Definition rows: what is collected, why, and on what basis. Same
   border rhythm as .contact-list, at body-copy size rather than display. */
.legal-rows {
  margin-top: 1.8rem;
  border-top: 1px solid var(--line);
}

.legal-row {
  padding-block: clamp(1.3rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--line);
}

.legal-key {
  font-family: var(--serif);
  font-weight: 450;
  font-size: 1.14rem;
  line-height: 1.35;
  color: var(--ink);
}

.legal-val {
  margin-top: .6rem;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 60ch;
}

.legal-basis {
  margin-top: .7rem;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 60ch;
  padding-left: .9rem;
  border-left: 2px solid var(--line-strong);
}

.legal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  overflow-wrap: anywhere;
}

/* Cookie preferences opener used mid-sentence in the privacy policy.
   Inherits .text-link, so it only needs the button chrome removed. */
.legal-inline-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 550;
}
.legal-inline-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}