/* ==========================================================================
   Bra Size Guide — design system

   Layout language and shape come from liptember.com.au; the brand colour is
   pink, set by the logo (pink field, white wordmark) and carried through
   every accent on the site. Type is the Space Grotesk stack from
   thealien.design.

   Every pink below is measured, because a mid pink is exactly the hue where
   white text stops passing. Ratios are against white unless stated:
     --c-pink-bright  3.3:1  decorative and display type ≥24px bold ONLY
     --c-pink         4.7:1  logo, buttons, any fill carrying white text
     --c-pink-ink     6.0:1  small text, links, eyebrows (5.4:1 on blush)
     --c-pink-deep    7.1:1  hover and active states
   ========================================================================== */

:root {
  /* --- Brand palette --- */
  --c-pink-bright:  #f0568f; /* display type + decorative fills, large only */
  --c-pink:         #d6336c; /* PRIMARY — logo field, buttons, marquee bands */
  --c-pink-ink:     #b82a5c; /* AA-safe for small text on light backgrounds */
  --c-pink-deep:    #8f1f47; /* hover / active */
  --c-pink-tint:    #ffe3ee; /* tint blocks, table stripes */
  --c-blue:         #4471b7; /* secondary — large type, fills */
  --c-blue-ink:     #3a63a2; /* AA-safe blue: 5.4:1 on blush */
  --c-blue-deep:    #2b4a7a;
  --c-blush:        #fdf1f5; /* page background */
  --c-ink:          #1e0536; /* body text, dark sections */
  --c-ink-soft:     #4a3a5c;
  --c-white:        #ffffff;
  --c-line:         #f6d9e4;

  /* --- Semantic --- */
  --bg:             var(--c-blush);
  --surface:        var(--c-white);
  --text:           var(--c-ink);
  --text-muted:     var(--c-ink-soft);
  --link:           var(--c-blue-ink);
  --accent:         var(--c-pink);
  --accent-ink:     var(--c-pink-ink);
  --border:         var(--c-line);

  /* --- Type ---
     Space Grotesk, the stack used on thealien.design, for both display and
     body. One variable family covers 300–700, which also satisfies the
     specification's "one variable family, max two files" font budget.
     Alien sets its 128px display type at -6px tracking (≈ -0.047em); the
     --ls-display tokens below reproduce that at each display size. */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Space Grotesk is a normal-width grotesk, not a condensed face, so the
     display sizes sit below what a condensed display font would take. */
  --fs-display-1: clamp(2.75rem, 8vw, 7rem);
  --fs-display-2: clamp(2.25rem, 5.6vw, 4.25rem);
  --fs-display-3: clamp(1.875rem, 4vw, 3rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.375rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  --ls-display: -0.045em; /* the Alien display tracking */
  --ls-heading: -0.03em;

  /* --- Space + shape --- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;   --sp-9: 6rem;
  --r-sm: 8px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;  --r-pill: 99px;
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --shadow-card: 0 2px 4px rgba(30, 5, 54, .04), 0 12px 32px rgba(30, 5, 54, .07);
  --focus: 3px solid var(--c-blue-deep);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* The header is sticky, so in-page anchors must stop clear of it. */
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
:where(a) { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
:where(a:hover) { color: var(--c-blue-deep); }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.section--blush { background: var(--c-blush); }
.section--pink { background: var(--c-pink-tint); }
.section--white { background: var(--c-white); }
.section--ink { background: var(--c-ink); color: var(--c-white); }
.section--ink :where(a) { color: var(--c-pink-tint); }
.section--ink .eyebrow { color: var(--c-pink-tint); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-ink); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.display, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--ls-heading); }
h1, h2, h3, h4 { text-transform: uppercase; line-height: 1.02; margin: 0 0 var(--sp-4); color: var(--c-ink); }
h1 { font-size: var(--fs-display-2); line-height: .95; letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); line-height: .98; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: .01em; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--sp-5); }
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--c-blue-ink); font-weight: 500; }
.eyebrow {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; font-size: .8125rem; color: var(--c-pink-ink);
  margin: 0 0 var(--sp-3);
}
.t-pink { color: var(--c-pink-bright); }
.t-blue { color: var(--c-blue); }
.t-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--c-pink-bright);
  paint-order: stroke fill;
}
@media (min-width: 900px) { .t-outline { -webkit-text-stroke-width: 3px; } }
@supports not (-webkit-text-stroke: 1px red) { .t-outline { color: var(--c-pink-tint); } }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: var(--sp-2); }
.prose li::marker { color: var(--c-pink-ink); }

/* --------------------------------------------------------------------------
   Buttons — pill, uppercase, arrow chip (liptember)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: .9375rem; letter-spacing: .02em; line-height: 1;
  padding: 1.0625rem 1.25rem 1.0625rem 1.5rem;
  border-radius: var(--r-pill); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn::after {
  content: ""; inline-size: 1.5rem; block-size: 1.5rem; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/.9rem no-repeat;
}
.btn--primary { background: var(--c-pink); color: #fff; }
.btn--primary:hover { background: var(--c-pink-deep); color: #fff; }
.btn--blue { background: var(--c-blue-ink); color: #fff; }
.btn--blue:hover { background: var(--c-blue-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-blue-ink); border-color: currentColor; }
.btn--ghost::after { background-color: rgba(58, 99, 162, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a63a2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.btn--ghost:hover { background: var(--c-white); color: var(--c-blue-deep); }
.btn--plain::after { display: none; padding-right: 1.5rem; }
.btn--lg { font-size: 1.0625rem; padding: 1.1875rem 1.375rem 1.1875rem 1.75rem; }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--c-white); position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 72px; }
/* The wordmark: white on the brand pink (4.7:1). This pink/white pairing is
   the identity — it repeats on buttons, marquee bands and result cards. */
.site-logo {
  display: inline-flex; align-items: baseline; gap: .04em; text-decoration: none;
  background: var(--c-pink); color: #fff; border-radius: var(--r-sm);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.3125rem); text-transform: lowercase;
  letter-spacing: -.035em; padding: .4rem .65rem .45rem; line-height: 1;
  white-space: nowrap;
}
.site-logo:hover, .site-logo:focus-visible { color: #fff; background: var(--c-pink-deep); }
.site-logo span { color: #fff; opacity: .6; }
.primary-nav { margin-left: auto; }
.primary-nav ul { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  display: block; padding: .55rem .75rem; text-decoration: none;
  color: var(--c-blue-ink); font-weight: 600; font-size: .9375rem; border-radius: var(--r-sm);
}
.primary-nav a:hover { background: var(--c-blush); }
.primary-nav .current-menu-item > a { color: var(--c-pink-ink); }
.header-cta { display: none; }
.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-blue-ink); color: #fff; border: 0; border-radius: var(--r-pill);
  font: 700 .875rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .04em;
  padding: .8rem 1.1rem; cursor: pointer; min-height: 44px;
}
@media (max-width: 979px) {
  .primary-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--c-white); border-bottom: 1px solid var(--border); padding: var(--sp-4);
    box-shadow: var(--shadow-card);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav a { padding: .9rem .5rem; border-bottom: 1px solid var(--border); border-radius: 0; min-height: 44px; }
}
@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .header-cta { display: inline-flex; }
  .header-cta .btn { padding: .8rem .9rem .8rem 1.2rem; font-size: .8125rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { background: var(--c-blush); padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem); }
.hero__grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1fr minmax(400px, 460px); gap: var(--sp-8); } }

.hero h1 {
  font-size: var(--fs-display-1); line-height: .92;
  letter-spacing: var(--ls-display); margin-bottom: var(--sp-5);
}
.hero h1 .line { display: block; }
.hero__promise { max-width: 40ch; }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.trust-row li {
  display: flex; align-items: center; gap: .5rem; font-size: var(--fs-small);
  font-weight: 600; color: var(--c-blue-ink);
}
.trust-row li::before {
  content: ""; inline-size: 1.25rem; block-size: 1.25rem; flex: none; border-radius: 50%;
  background: var(--c-blue-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/.75rem no-repeat;
}

/* --- Hero column background -------------------------------------------
   A drawn bra silhouette fills the intro column behind the headline. It is
   a background image, not an element, so it never enters the accessibility
   tree and never takes a place in the reading order.
   Its opacity is baked into the SVG: a background-image cannot be faded on
   its own without also fading the text painted over it. */
.hero__intro {
  position: relative;
  background-image: url("../img/bra-silhouette.svg");
  background-repeat: no-repeat;
  background-position: 50% 42%;
  background-size: 112% auto;
}
@media (min-width: 980px) {
  /* Give the column enough height for the silhouette to read as a backdrop
     rather than a band sitting behind two lines of type. */
  .hero__intro { min-block-size: 30rem; }
}
@media (max-width: 979px) {
  .hero__intro { background-position: 50% 30%; background-size: 126% auto; }
}
@media (prefers-contrast: more) {
  .hero__intro { background-image: none; }
}

/* --- "SIZE" chip -------------------------------------------------------
   The third headline line is white on the brand blue, in a pill with the
   same radius as the conversions marquee band. No animation. */
.size-chip {
  display: inline-block;
  background: var(--c-blue);   /* white on this is 4.9:1 */
  color: var(--c-white);
  padding: .04em .34em .12em;
  border-radius: var(--r-pill);
}

/* Hero hint: one line wherever it fits. No max-width to force an early
   break, and the whole sentence holds together above the mobile breakpoint;
   below it the link still stays intact and only the sentence wraps. */
.hero__hint {
  margin-top: var(--sp-5); font-size: var(--fs-small);
  color: var(--text-muted);
}
.hero__hint a { white-space: nowrap; }
@media (min-width: 560px) { .hero__hint { white-space: nowrap; } }

/* --------------------------------------------------------------------------
   Marquee CTA — split sentence: static half + scrolling half
   (mechanic from thealien.design)
   -------------------------------------------------------------------------- */
.marquee-cta { padding-block: clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; }
.marquee-cta__static {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-display-2); line-height: .96; letter-spacing: var(--ls-display);
  margin: 0 0 .1em; color: var(--c-ink);
}
.marquee-cta__band {
  background: var(--c-pink-bright); color: var(--c-white);
  border-radius: var(--r-pill);
  overflow: hidden;
  padding-block: .06em;
  /* The band is a direct child of the full-bleed section, so 100% already
     spans the page. 100vw would overshoot by the scrollbar width. */
  width: 100%;
}
.marquee-cta__band--blue { background: var(--c-blue); }
.marquee-cta__band--ink { background: var(--c-ink); }
.marquee-cta__band--pink { background: var(--c-pink-bright); color: var(--c-white); }
.marquee-cta__band--tint { background: var(--c-pink-tint); color: var(--c-ink); }
.marquee-cta__band--square { border-radius: 0; }
.marquee-cta__track {
  display: flex; width: max-content;
  animation: bsc-marquee var(--marquee-duration, 26s) linear infinite;
  will-change: transform;
}
.marquee-cta__band:hover .marquee-cta__track,
.marquee-cta__band:focus-within .marquee-cta__track { animation-play-state: paused; }
.marquee-cta__group { display: flex; flex: none; }
.marquee-cta__item {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--fs-display-2); line-height: 1.14; letter-spacing: var(--ls-display);
  padding-inline: .2em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .28em;
}
.marquee-cta__item::after {
  content: ""; inline-size: .34em; block-size: .34em; flex: none; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.marquee-cta__band--reverse .marquee-cta__track { animation-direction: reverse; }
@keyframes bsc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee-cta__actions { margin-top: var(--sp-6); }
/* Reduced motion: freeze the scroll, keep the sentence readable */
@media (prefers-reduced-motion: reduce) {
  .marquee-cta__track { animation: none; }
  .marquee-cta__band { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-white); border-radius: var(--r-lg); padding: var(--sp-5);
  border: 1px solid var(--border); height: 100%;
}
.card h3 { font-size: 1.25rem; margin-bottom: var(--sp-3); }
.card p:last-child { margin-bottom: 0; }
.card--link { display: block; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); color: inherit; }
.card--link .card__more { font-weight: 700; color: var(--c-pink-ink); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; }
.card__num {
  font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1;
  letter-spacing: var(--ls-heading); color: var(--accent); display: block; margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Calculator
   -------------------------------------------------------------------------- */
.calc {
  background: var(--c-white); border-radius: var(--r-xl); padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
.calc h2 { font-size: 1.5rem; margin-bottom: var(--sp-2); }
.calc__note { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-5); }
.calc__field { margin-bottom: var(--sp-5); }
.calc__label { display: block; font-weight: 700; margin-bottom: .35rem; }
.calc__hint { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: .5rem; }
.calc__input-wrap { display: flex; align-items: stretch; }
.calc input[type="text"], .calc input[type="number"] {
  flex: 1 1 auto; min-width: 0; font: 600 1.125rem/1 var(--font-body); color: var(--text);
  padding: .95rem 1rem; min-height: 52px;
  border: 2px solid var(--c-line); border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--c-white);
}
.calc input:focus-visible { outline: var(--focus); outline-offset: 0; z-index: 1; }
.calc__unit {
  display: inline-flex; align-items: center; padding-inline: 1rem;
  background: var(--c-blush); border: 2px solid var(--c-line); border-left: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0; font-weight: 700; color: var(--text-muted);
}
.calc__units { position: relative; display: inline-flex; background: var(--c-blush); border-radius: var(--r-pill); padding: 4px; margin-bottom: var(--sp-5); }
/* Radios stay in the accessibility tree and keep receiving focus; the labels
   are the visible control. Clipped rather than display:none. */
.calc__units input { position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.calc__units label {
  padding: .6rem 1.1rem; border-radius: var(--r-pill); font-weight: 700; font-size: .9375rem;
  cursor: pointer; color: var(--c-blue-ink); min-height: 44px; display: inline-flex; align-items: center;
}
.calc__units input:checked + label { background: var(--c-blue-ink); color: #fff; }
.calc__units input:focus-visible + label { outline: var(--focus); outline-offset: 2px; }
.calc__error { color: var(--c-pink-deep); font-weight: 600; font-size: var(--fs-small); margin-top: .4rem; display: block; }
.calc__error:empty { display: none; }
.calc input[aria-invalid="true"], .calc input[aria-invalid="true"] + .calc__unit { border-color: var(--c-pink-deep); }
.calc__summary {
  background: #fff1f6; border: 2px solid var(--c-pink-ink); border-radius: var(--r-md);
  padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.calc__summary:not([hidden]) { display: block; }
.calc__summary h3 { font-size: 1rem; margin-bottom: var(--sp-2); color: var(--c-pink-deep); }
.calc__summary ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-small); }
.calc__optional { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.calc__check { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-small); }
.calc__check input { margin-top: .25rem; inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--c-blue-ink); }

/* Result — reserve height so Calculate causes no layout shift */
.calc-result { min-height: 0; }
.calc-result:not([hidden]) { margin-top: var(--sp-6); }
.result-card { background: var(--c-blue); color: #fff; border-radius: var(--r-lg); padding: var(--sp-5); }
.result-card--warn { background: var(--c-ink); }
.result-card__eyebrow { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .85; margin: 0 0 var(--sp-2); }
.result-card__size { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--ls-display); font-size: clamp(3rem, 10vw, 4.5rem); line-height: .95; margin: 0 0 var(--sp-3); text-transform: uppercase; color: #fff; }
.result-card p { color: rgba(255,255,255,.94); }
.result-card a { color: #fff; }
.result-sisters { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.result-sisters li {
  background: rgba(255,255,255,.16); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); flex: 1 1 8rem;
}
.result-sisters b { font-family: var(--font-display); font-size: 1.75rem; display: block; line-height: 1.15; font-weight: 700; letter-spacing: var(--ls-heading); }
.result-sisters span { font-size: .8125rem; opacity: .9; }
.result-meta { font-size: var(--fs-small); opacity: .88; margin-top: var(--sp-4); }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.result-actions .btn { background: #fff; color: var(--c-blue-deep); }
.result-actions .btn::after { background-color: rgba(58,99,162,.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b4a7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.result-why { background: var(--c-white); border: 1px solid var(--border); border-radius: var(--r-lg); margin-top: var(--sp-4); }
.result-why > summary {
  cursor: pointer; padding: var(--sp-4); font-weight: 700; color: var(--c-blue-ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px;
}
.result-why > summary::-webkit-details-marker { display: none; }
.result-why > summary::after { content: "+"; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.result-why[open] > summary::after { content: "–"; }
.result-why__body { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-small); }
.result-why__body dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem var(--sp-4); margin: 0; }
.result-why__body dt { font-weight: 700; }
.result-why__body dd { margin: 0; }
.fit-check { margin-top: var(--sp-5); }
.fit-check ol { padding-left: 1.3em; }

/* No-JS / crawlable fallback */
.calc-noscript { background: var(--c-pink-tint); border-radius: var(--r-md); padding: var(--sp-4); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   Tables — semantic, readable at 320px
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-bottom: var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--c-white); }
.table-wrap[tabindex="0"]:focus-visible { outline: var(--focus); }
.table-scroll-cue { font-size: var(--fs-small); color: var(--text-muted); margin: 0 0 var(--sp-2); }
table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data caption { text-align: left; font-weight: 700; padding: var(--sp-4) var(--sp-4) var(--sp-2); color: var(--c-ink); }
table.data th, table.data td { padding: .7rem var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data thead th { background: var(--c-blue-ink); color: #fff; font-weight: 700; position: sticky; top: 0; }
table.data tbody tr:nth-child(even) { background: #fff7fa; }
table.data tbody th { font-weight: 700; color: var(--c-pink-ink); }
table.data td.note { white-space: normal; min-width: 12rem; color: var(--text-muted); font-size: .875rem; }

/* --------------------------------------------------------------------------
   Content pages
   -------------------------------------------------------------------------- */
.page-head { padding-block: clamp(2rem, 5vw, 3.5rem) var(--sp-6); }
.page-head h1 { font-size: var(--fs-display-3); }
.breadcrumbs { font-size: var(--fs-small); margin-bottom: var(--sp-4); color: var(--text-muted); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: .4rem; color: var(--c-pink-ink); }
.answer-box {
  background: var(--c-white); border-left: 6px solid var(--c-pink-bright); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-5); margin-bottom: var(--sp-6); box-shadow: var(--shadow-card);
}
.answer-box h2, .answer-box p:first-child { margin-top: 0; }
.answer-box > :last-child { margin-bottom: 0; }
.callout { background: var(--c-pink-tint); border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-6); }
.callout--ink { background: var(--c-ink); color: #fff; }
.callout--ink a { color: var(--c-pink-tint); }
.callout > :last-child { margin-bottom: 0; }
.toc { background: var(--c-white); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); }
.toc > summary { font-weight: 700; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.toc ol { margin: var(--sp-3) 0 0; padding-left: 1.3em; font-size: var(--fs-small); }
.reviewer-block {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--c-white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-5); margin-block: var(--sp-7); font-size: var(--fs-small);
}
.reviewer-block__mark {
  flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--c-blue-ink);
  color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .8125rem; letter-spacing: -.02em;
}
.reviewer-block p { margin-bottom: var(--sp-2); }
.reviewer-block > div > :last-child { margin-bottom: 0; }
.source-list { font-size: var(--fs-small); color: var(--text-muted); }
.related-grid { margin-top: var(--sp-6); }

/* Ad slots - never between Calculate and the result */
.ad-slot:empty { display: none; }
.ad-slot:not(:empty) { margin-block: var(--sp-7); text-align: center; min-height: 90px; }
.ad-slot:not(:empty)::before {
  content: "Advertisement"; display: block; font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-ink); color: rgba(255,255,255,.82); padding-block: var(--sp-8) var(--sp-6); }
.site-footer a { color: var(--c-pink-tint); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h2 { color: #fff; font-size: 1rem; letter-spacing: .08em; margin-bottom: var(--sp-4); }
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-grid ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.footer-grid li { margin-bottom: .55rem; }
.site-footer__legal {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.15);
  font-size: .8125rem; display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
}
/* The privacy promise sits with the brand blurb, where it reads as a claim
   the site is making rather than a legal footnote. */
.site-footer__privacy {
  font-size: var(--fs-small); font-weight: 700; color: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
}
.site-footer__privacy::before {
  content: ""; inline-size: 1.15rem; block-size: 1.15rem; flex: none; border-radius: 50%;
  background: var(--c-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/.7rem no-repeat;
}
.site-footer__craft { font-weight: 700; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--sp-6); }
.text-center { text-align: center; }

@media print {
  .site-header, .site-footer, .marquee-cta, .ad-slot, .btn, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .result-card { background: #fff; color: #000; border: 2px solid #000; }
  .result-card__size, .result-card p, .result-card a { color: #000; }
}