/* ==========================================================================
   Petal & Mom
   Palette: violet-tinted paper and panels, deep aubergine ink, warm apricot
   accent. Deliberately the inverse of the sibling storefront's warm ground and
   cool accent — the two must not read as the same company.
   Type: Fraunces, self-hosted. A soft, warm serif with real personality —
   never the rounded sans the sibling uses.
   Shape: squared corners and petal-cut frames, not pills and domes.
   ==========================================================================

   PORTING NOTE — this stylesheet shares its architecture, selectors and
   cascade order with the sibling storefront, so fixes port across almost
   mechanically. The colour tokens were renamed to role-based names because the
   sibling's names describe its own palette and would be actively misleading
   here (a token called --blue holding apricot is a bug waiting to happen).
   The mapping is 1:1:

     sibling      here            sibling      here
     --ivory   -> --paper        --ink       -> --ink
     --cream   -> --panel        --ink-soft  -> --ink-soft
     --clay    -> --panel-deep   --ink-faint -> --ink-faint
     --clay-deep -> --edge       --blue      -> --accent
                                 --blue-deep -> --accent-deep
                                 --blue-wash -> --accent-wash

   Structural tokens (--radius*, --shadow*, --wrap, --gutter, --font) keep
   their names; only their values differ.
   ------------------------------------------------------------------------ */

/* --------------------------------------------------------------- fonts ---
   Fraunces, self-hosted variable weight 100-900 with an optical-size axis,
   latin + latin-ext. No CDN request. SIL Open Font License 1.1.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-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: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* surfaces — violet-tinted, hue 276-288 deg */
  --paper:      #F6F2F7;
  --panel:      #EBE4EF;
  --panel-deep: #DCD0E3;
  --edge:       #C7B8D1;

  /* ink — deep aubergine */
  --ink:        #2C2233;
  --ink-soft:   #5C4E66;
  --ink-faint:  #6E6374;

  /* accent — warm apricot. --accent is decorative only; anything carrying
     text or a focus ring uses --accent-deep, which clears AA on every
     surface above. */
  --accent:      #C2793F;
  --accent-deep: #8E4A22;
  --accent-wash: #F7E7D9;

  /* system — squared, not pilled */
  --radius-sm:   3px;
  --radius:      7px;
  --radius-lg:   11px;
  --radius-pill: 7px;

  --shadow-soft: 0 2px 4px rgba(44, 34, 51, .04), 0 12px 28px rgba(44, 34, 51, .06);
  --shadow-lift: 0 4px 8px rgba(44, 34, 51, .06), 0 22px 48px rgba(44, 34, 51, .10);

  --font: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype',
          ui-serif, Georgia, serif;

  --wrap: 1140px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

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

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

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

  /* The blanket rule above would leave the looping CTA wobble running at
     .01ms per iteration, forever — invisible but pointlessly spinning the
     compositor. An infinite animation needs turning off, not speeding up. */
  .btn--wobble,
  .btn--wobble.is-nudge { animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.66;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.012em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

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

/* ------------------------------------------------------------ elements --- */

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

.skip-link {
  position: absolute;
  top: .6rem;
  left: 50%;
  z-index: 100;
  padding: .7rem 1.3rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transform: translate(-50%, -250%);
  transition: transform .2s ease;
}

.skip-link:focus-visible { transform: translate(-50%, 0); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.1rem;
  color: var(--ink-faint);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* numbered so you always know which panel you're looking at */
.eyebrow__num {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

.eyebrow__num::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--edge);
}

/* centred panels keep the eyebrow centred */
.compare__intro .eyebrow,
.says__intro .eyebrow,
.faq__intro .eyebrow,
.signup__inner .eyebrow,
.evidence__inner .eyebrow {
  justify-content: center;
}

.eyebrow--light { color: var(--accent-deep); }

.section-title {
  font-size: clamp(2rem, 3.9vw, 2.9rem);
}

/* For full-sentence headings that run long. The measure is generous on purpose:
   at a narrow one this wraps four or five times and stacks up as a cramped
   block hugging the left edge, which reads as a wall of text rather than a
   heading. Wide enough for two long lines is what makes it scan as a deck. */
.section-title--long {
  max-width: 46ch;
  font-size: clamp(1.55rem, 2.7vw, 2.1rem);
  line-height: 1.24;
}

.section-lead {
  margin-top: .9rem;
  max-width: 34ch;
  color: var(--ink-soft);
}

/* Buttons are sentence-case rectangles here. The sibling uses uppercase
   letterspaced pills; that silhouette is one of the fastest ways to spot two
   sites built from one template, so it does not carry over. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  padding: 1.05rem 1.9rem;
  border-radius: var(--radius);
  background: var(--accent-deep);
  color: var(--paper);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  box-shadow: 0 1px 2px rgba(44, 34, 51, .10), 0 8px 20px rgba(142, 74, 34, .20);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.btn:hover {
  background: #7A3D1A;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(44, 34, 51, .10), 0 12px 26px rgba(142, 74, 34, .26);
}

.btn:active { transform: translateY(0); }

/* Chevron drawn in CSS — Fraunces' latin subset carries U+2191 and U+2193
   but no U+2192, so a literal arrow glyph would fall back to another face. */
.btn__arrow {
  position: relative;
  flex: none;
  width: .5em;
  height: .5em;
  transition: transform .18s ease;
}

.btn__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.btn:hover .btn__arrow { transform: translateX(3px); }

/* the list-signup button is deliberately not the buy button */
.btn--alt {
  background: var(--ink);
  box-shadow: 0 1px 2px rgba(44, 34, 51, .12), 0 8px 20px rgba(44, 34, 51, .18);
}

.btn--alt:hover { background: #1D1622; }

.btn--nav { padding: .85rem 1.5rem; font-size: 1rem; }

/* --- the nudge on the three order CTAs -------------------------------------
   Uses the independent `rotate` and `translate` properties rather than
   `transform`, because .btn:hover already owns `transform` for its 1px lift.
   Same property would mean the two fight; separate properties compose.

   Amplitude is ~1.8deg and 5px — deliberately readable rather than subliminal.
   The motion sits in the last 16% of an 8s cycle, so it is a periodic shake
   with a long pause, not continuous movement. If it ever feels naggy, lengthen
   the cycle rather than shrinking the angle: a smaller angle stops reading as
   intent and starts reading as a rendering glitch.
   -------------------------------------------------------------------------- */

@keyframes btn-wobble {
  0%, 84%, 100% { rotate: 0deg;     translate: 0 0; }
  86%           { rotate: -1.8deg;  translate: -5px 0; }
  89%           { rotate: 1.8deg;   translate: 5px 0; }
  92%           { rotate: -1.1deg;  translate: -3px 0; }
  95%           { rotate: .7deg;    translate: 2px 0; }
  98%           { rotate: -.3deg;   translate: -1px 0; }
}

/* the same movement as a single pass, for the triggered nudges */
@keyframes btn-wobble-once {
  0%, 100% { rotate: 0deg;    translate: 0 0; }
  14%      { rotate: -1.8deg; translate: -5px 0; }
  34%      { rotate: 1.8deg;  translate: 5px 0; }
  54%      { rotate: -1.1deg; translate: -3px 0; }
  72%      { rotate: .7deg;   translate: 2px 0; }
  88%      { rotate: -.3deg;  translate: -1px 0; }
}

.btn--wobble {
  animation: btn-wobble 8s ease-in-out infinite;
}

/* nothing moves under the cursor — a button that shifts while you are aiming
   at it reads as evasive, and the hover lift is feedback enough */
.btn--wobble:hover,
.btn--wobble:focus-visible {
  animation: none;
}

/* one-shot, triggered from main.js: a second after the pointer leaves, and on
   the popup CTA as soon as the dialog opens */
.btn--wobble.is-nudge,
.btn--wobble.is-nudge:hover {
  animation: btn-wobble-once .6s ease-in-out;
}

/* ----------------------------------------------------------- 1. nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.nav.is-stuck {
  border-bottom-color: var(--panel-deep);
  box-shadow: 0 6px 20px rgba(44, 34, 51, .05);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: .8rem var(--gutter);
}

/* One line, mark then name, no stacked descriptor. The sibling stacks a
   letterspaced sub-line under its name; that lockup does not carry over. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.wordmark__mark {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  background: url("../assets/mark.svg") center / contain no-repeat;
}

.wordmark__text {
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
}

.wordmark__amp {
  padding: 0 .18em;
  color: var(--accent-deep);
  font-style: italic;
}

/* ---------------------------------------------------------- 2. hero --- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem);
  background:
    /* The nav sits in its own band above this section, so any wash that is
       still coloured at y=0 gets clipped by the hero box and draws a hard
       horizontal line along the nav's bottom edge. Centre it low and keep the
       radius short enough that it has faded out before it reaches the top. */
    radial-gradient(85% 62% at 86% 54%, var(--accent-wash) 0%, rgba(247, 231, 217, 0) 62%),
    radial-gradient(90% 80% at 4% 98%, var(--panel-deep) 0%, rgba(220, 208, 227, 0) 60%),
    var(--paper);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Capped deliberately: the two-line headline has to actually hold two lines in
   this column. Fraunces sets wider than a sans at the same size, so an
   unconstrained cap breaks the line three or four ways. Re-measure if the
   headline copy changes. */
.hero__title {
  font-size: clamp(2.25rem, 4.6vw, 3.2rem);
  letter-spacing: -.02em;
}

.hero__sub {
  margin-top: 1.35rem;
  max-width: 42ch;
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.35rem;
  margin-top: 2.1rem;
}

.hero__note {
  color: var(--ink-faint);
  font-size: .9375rem;
}

/* petal cut — two opposite corners drawn long, the other two squared. The
   sibling frames its hero in a dome arch. */
.hero__media { margin: 0; }

.hero__media > :first-child,
.media-placeholder {
  border-radius: var(--radius-lg) 46% var(--radius-lg) 46%;
}

.media-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: linear-gradient(168deg, var(--panel), var(--panel-deep));
  box-shadow: var(--shadow-soft);
}

.media-placeholder--square {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg) 40% var(--radius-lg) 40%;
}

.media-placeholder--wide {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
}

.media-placeholder--soft {
  aspect-ratio: 9 / 10;
  border-radius: 46% var(--radius-lg) 46% var(--radius-lg);
}

.media-placeholder span {
  padding: 1rem;
  color: var(--ink-faint);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-align: center;
  line-height: 1.9;
  text-transform: uppercase;
}

.media-placeholder em {
  display: block;
  margin-top: .5rem;
  font-size: .6875rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
  opacity: .9;
}

.hero__caption {
  margin-top: 1.15rem;
  padding-inline: .5rem;
  color: var(--ink-faint);
  font-size: .875rem;
  text-align: center;
}

/* ------------------------------------------------- 3. product panel --- */

.product {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--panel);
}

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

.product__media {
  max-width: 46rem;
  margin: 0 auto;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.benefit__title {
  font-size: 1.25rem;
  line-height: 1.26;
}

.benefit__body {
  margin-top: .6rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* ---------------------------------------------- 7. fit and fabric --- */

/* --panel here would merge into the product panel above it, which sits
   directly before this section in this storefront's running order. */
.fit {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: var(--paper);
}

.fit__inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.fit__media { margin: 0; }

.specs {
  display: grid;
  gap: 0;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}

.spec {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--edge);
}

.spec:last-child { border-bottom: 1px solid var(--edge); }

.spec__key {
  margin: 0;
  color: var(--ink-faint);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-top: .3rem;
}

.spec__val {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.fit__note {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* --------------------------------------------------- 7b. evidence --- */

.evidence {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background:
    linear-gradient(180deg, rgba(247, 231, 217, .85) 0%, rgba(247, 231, 217, .3) 100%),
    var(--paper);
}

.evidence__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.evidence__title {
  max-width: 28ch;
  margin-inline: auto;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

/* Two columns: panel 05 carries two points, not three. Centred so the pair
   sits under the middle of the heading rather than stretching the full width. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  max-width: 44rem;
  margin: clamp(2.25rem, 5vw, 3.25rem) auto 0;
}

.evidence__lead {
  max-width: 54ch;
  margin: 1.2rem auto 0;
  color: var(--ink-soft);
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);
}

.stat__title {
  color: var(--ink);
  font-size: 1.125rem;
  line-height: 1.32;
}

.stat__label {
  margin-top: .55rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ------------------------------------------------- 8. comparison --- */

.compare {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: var(--paper);
}

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

.compare__intro {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.ctable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.ctable th,
.ctable td {
  padding: 1.05rem 1.25rem;
  border-bottom: 1px solid var(--panel-deep);
  font-size: 1.0625rem;
  font-weight: 400;
  vertical-align: top;
}

.ctable thead th {
  color: var(--ink-faint);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ctable tbody th {
  width: 11rem;
  color: var(--ink);
  font-weight: 600;
}

.ctable tbody td { color: var(--ink-soft); }

/* our column reads as the answer, without shouting */
.ctable__ours {
  background: var(--accent-wash);
  color: var(--ink) !important;
}

.ctable thead .ctable__ours {
  color: var(--accent-deep) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.ctable tbody tr:last-child .ctable__ours {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* the mark sits in the column header, so the brand column is identifiable at a
   glance rather than only by reading. Sized in em so it tracks the header text.
   Note the thead is hidden on narrow screens where the table reflows into
   stacked pairs — there the mark rides on the apricot "With" row label. */
.ctable__mark {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5em;
  vertical-align: -.45em;
  background: url("../assets/mark.svg") center / contain no-repeat;
}

/* ----------------------------------------------- 9. testimonials --- */

.says {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background: var(--panel);
}

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

.says__intro {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.says__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.says__item {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-height: 11rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--paper);
}

.says__quote {
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.5;
}

.says__attr {
  color: var(--ink-faint);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* -------------------------------------------- 11. trust signals --- */

.signals {
  display: grid;
  gap: .85rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.signal {
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
}

.signal__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  color: var(--accent-deep);
}

.signal__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ------------------------------------------------ 12. list band --- */

.signup {
  padding: clamp(3rem, 7vw, 5rem) 0;
  background:
    radial-gradient(70% 120% at 12% 10%, rgba(247, 231, 217, .55) 0%, rgba(247, 231, 217, 0) 60%),
    var(--panel-deep);
}

.signup__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.signup__title {
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
}

.signup__sub {
  max-width: 46ch;
  margin: .9rem auto 0;
  color: var(--ink-soft);
}

.signup__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.9rem;
}

.signup__input {
  flex: 1 1 16rem;
  max-width: 22rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.0625rem;
}

.signup__input::placeholder { color: var(--ink-faint); }

.signup__input:focus-visible {
  border-color: var(--accent-deep);
  outline: 2px solid var(--accent-deep);
  outline-offset: 1px;
}

.signup__fine {
  margin-top: 1.4rem;
  color: var(--ink-soft);
  font-size: .875rem;
}

.signup__fine a { color: var(--accent-deep); font-weight: 600; }

/* --------------------------------------------------- 3. pain cycle --- */

.cycle {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: var(--paper);
}

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

/* no cap: the long heading above needs the full column to reach two lines */
.cycle__intro { max-width: none; }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
}

.tile {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
}

/* petal-cut icon frames, where the sibling uses circles */
.tile__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 56% var(--radius-sm) 56% var(--radius-sm);
  background: var(--paper);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(142, 74, 34, .18);
}

.tile__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.tile__title {
  margin-top: .9rem;
  font-size: 1.25rem;
  line-height: 1.26;
}

.tile__body {
  margin-top: .7rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* the one discovery quote */
.quote {
  max-width: 44ch;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  text-align: center;
}

.quote__text { margin: 0; }

.quote__text p {
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.34;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.quote__attr {
  margin-top: 1.1rem;
  color: var(--ink-faint);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ----------------------------------------------------- 4. cta band --- */

.band {
  padding: clamp(2.75rem, 6vw, 4.25rem) 0;
  background:
    radial-gradient(80% 130% at 88% 12%, rgba(247, 231, 217, .5) 0%, rgba(247, 231, 217, 0) 60%),
    var(--panel-deep);
}

.band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Mark and headline sit on one line. Aligned to the top rather than centred
   because the headline wraps to two lines on narrow screens, where centring
   would float the mark into the middle of the text block; the margin nudges it
   down to sit optically level with the first line. Decorative, so aria-hidden
   in the markup — the band is a CTA strip, not somewhere a logo needs
   announcing. */
.band__copy {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.band__mark {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: .12em;
  background: url("../assets/mark.svg") center / contain no-repeat;
}

.band__title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

.band__sub {
  margin-top: .7rem;
  color: var(--ink-soft);
}

/* -------------------------------------------------- 5. how it works --- */

.how {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: var(--paper);
}

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

/* Now nested inside .how__copy, so the column constrains it. The gap below is
   tighter than .how__copy's own row gap because the eyebrow, heading and
   paragraph should read as one block, not three stacked items. */
.how__intro { margin-bottom: -.2rem; }

.how__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.how__copy { display: grid; gap: 1.1rem; align-content: center; }

.how__lead {
  color: var(--ink);
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.52;
}

.steps { display: grid; gap: 1.65rem; }

.step {
  padding-left: 1.6rem;
  border-left: 2px solid var(--edge);
}

.step__title { font-size: 1.1875rem; }

.step__body {
  margin-top: .5rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.how__media { margin: 0; }

.how__note {
  padding-top: 1.2rem;
  border-top: 1px solid var(--panel-deep);
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* ------------------------------------------------- 6. trust strip --- */

.trust {
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
  border-block: 1px solid var(--panel-deep);
  background: var(--paper);
}

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

.trust__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}

.trust__bubble {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 56% var(--radius-sm) 56% var(--radius-sm);
  background: var(--panel);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(142, 74, 34, .2);
}

.trust__bubble svg {
  width: 1.6rem;
  height: 1.6rem;
}

.trust__text {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
}

/* ------------------------------------------------------- 7. pricing --- */

/* Starts from --panel-deep rather than --panel: the testimonials sit directly
   above and are on --panel, so a --panel start erased the boundary. The deeper
   ground also throws the white price card forward, which is wanted here. */
.pricing {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: linear-gradient(180deg, #E1D6E7 0%, #D9CCE0 100%);
}

.pricing__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, 420px);
  align-items: center;
  gap: clamp(2.25rem, 6vw, 5rem);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.card {
  padding: clamp(1.75rem, 3.5vw, 2.4rem);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
}

.card__head {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--panel-deep);
}

.card__label {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
}

.card__price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: .3rem;
}

.card__amount {
  font-size: clamp(2.8rem, 5.4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}

.card__terms {
  color: var(--ink-faint);
  font-size: 1rem;
  font-weight: 400;
}

.card__list {
  display: grid;
  gap: .8rem;
  margin: 1.5rem 0 1.9rem;
}

.card__list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

/* small petal bullet, matching the mark */
.card__list li::before {
  content: "";
  position: absolute;
  top: .5em;
  left: .1rem;
  width: .85rem;
  height: .85rem;
  border-radius: 60% var(--radius-sm) 60% var(--radius-sm);
  background: var(--accent);
}

.card__fineprint {
  margin-top: 1rem;
  color: var(--ink-faint);
  font-size: .8125rem;
  text-align: center;
}

/* --------------------------------------------------------- 8. faq --- */

.faq {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  background: var(--paper);
}

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

.faq__intro {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.faq__list {
  border-top: 1px solid var(--panel-deep);
}

.faq__item { border-bottom: 1px solid var(--panel-deep); }

.faq__heading { margin: 0; font-size: 1rem; }

.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -.005em;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease;
}

.faq__btn:hover { color: var(--accent-deep); }

/* plus that becomes a minus */
.faq__icon {
  position: relative;
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  transition: background-color .2s ease, transform .25s ease;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .7rem;
  height: 1.5px;
  background: var(--accent-deep);
  transform: translate(-50%, -50%);
  transition: opacity .2s ease, transform .25s ease;
}

.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__btn[aria-expanded="true"] .faq__icon { background: var(--panel-deep); }
.faq__btn[aria-expanded="true"] .faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }

/* animate the panel without measuring heights in JS */
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}

.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }

.faq__answer {
  overflow: hidden;
  visibility: hidden;
  transition: visibility .28s;
}

.faq__item.is-open .faq__answer { visibility: visible; }

.faq__answer p {
  padding: 0 3rem 1.5rem 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* ------------------------------------------------------ 9. footer --- */

.footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--panel);
}

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

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--edge);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
}

.footer__nav a {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: color .18s ease;
}

.footer__nav a:hover { color: var(--accent-deep); }

.footer__contact {
  margin-top: 1.9rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--paper);
}

.footer__contact-title {
  font-size: 1.125rem;
}

.footer__contact-body {
  margin-top: .5rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.footer__mail {
  display: inline-block;
  color: var(--accent-deep);
  font-weight: 600;
}

.footer__legal {
  display: grid;
  gap: 1rem;
  max-width: 68ch;
  margin-top: 1.75rem;
  color: var(--ink-faint);
  font-size: .8125rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.footer__legal strong {
  color: var(--ink-soft);
  font-weight: 600;
}

.footer__copy {
  margin-top: 2rem;
  color: var(--ink-faint);
  font-size: .8125rem;
}

/* ----------------------------------------------------------- notice --- */

.notice[hidden] { display: none; }

.notice {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: .9rem var(--gutter);
  background: var(--accent-deep);
  color: var(--paper);
}

.notice__text {
  font-size: 1rem;
  font-weight: 500;
}

.notice__close {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(246, 242, 247, .18);
  color: inherit;
  cursor: pointer;
}

.notice__close:hover { background: rgba(246, 242, 247, .32); }
.notice__close svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------ popup --- */

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(44, 34, 51, .45);
  backdrop-filter: blur(3px);
  animation: modal-fade .25s ease both;
}

.modal__panel {
  position: relative;
  width: min(30rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(44, 34, 51, .3);
  text-align: center;
  animation: modal-rise .28s ease both;
}

@keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985) }
  to   { opacity: 1; transform: none }
}

.modal__close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.modal__close:hover { background: var(--panel); color: var(--ink); }
.modal__close svg { width: 1.15rem; height: 1.15rem; }

.modal__mark {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  margin: .25rem auto 1.25rem;
  background: url("../assets/mark.svg") center / contain no-repeat;
}

.modal__title { font-size: clamp(1.5rem, 3.2vw, 1.9rem); }

.modal__sub {
  margin-top: .8rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.modal__form {
  display: grid;
  gap: .6rem;
  margin-top: 1.5rem;
}

.modal__form .signup__input {
  flex: none;
  max-width: none;
  padding: .9rem 1.1rem;
  font-size: 1rem;
}

.modal__or {
  position: relative;
  margin: 1.2rem 0;
  color: var(--ink-faint);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.modal__or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--panel-deep);
}

.modal__or span {
  position: relative;
  padding: 0 .75rem;
  background: var(--paper);
}

.modal__caption {
  margin-top: .7rem;
  color: var(--ink-faint);
  font-size: .75rem;
}

/* stop the page scrolling behind the popup */
.has-modal { overflow: hidden; }

/* ------------------------------------------------- document pages --- */

.doc {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--paper);
}

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

.doc__title {
  font-size: clamp(2.1rem, 4.2vw, 3rem);
}

.doc__meta {
  margin-top: .8rem;
  color: var(--ink-faint);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.doc__body { margin-top: clamp(2rem, 5vw, 3rem); }

.doc__body h2 {
  margin-top: 2.5rem;
  font-size: 1.375rem;
}

.doc__body h2:first-child { margin-top: 0; }

.doc__body p,
.doc__body li {
  margin-top: .9rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.doc__body ul {
  margin-top: .5rem;
  padding-left: 1.35rem;
  list-style: disc;
}

.doc__body a { color: var(--accent-deep); font-weight: 600; }

/* ----------------------------------------------------------- mobile --- */

@media (max-width: 860px) {
  .hero__inner,
  .pricing__inner,
  .how__grid,
  .fit__inner,
  .tiles,
  .benefits,
  .says__list,
  .stats {
    grid-template-columns: 1fr;
  }

  .fit__media { max-width: 22rem; margin-inline: auto; }
  .says__item { min-height: 0; }

  .how__media { order: -1; max-width: 22rem; margin-inline: auto; }

  .band__inner { flex-direction: column; align-items: flex-start; }

  .hero__inner { gap: 2.5rem; }

  .hero__media { order: -1; max-width: 24rem; margin-inline: auto; }

  .section-lead { max-width: none; }

  .faq__answer p { padding-right: 0; }
}

@media (max-width: 620px) {
  /* the comparison table reflows into stacked pairs */
  .ctable thead { display: none; }
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; width: auto; }
  .ctable tr {
    margin-bottom: 1rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .ctable tbody th { border-bottom: 0; padding-bottom: .35rem; }
  .ctable tbody td { border-bottom: 0; padding-top: .35rem; }
  /* Row labels for the stacked layout, which hides the thead.

     Neither carries an em-dash. The branded row cannot have one — its mark has
     to sit at the end of the pseudo-element to be positionable, so a trailing
     dash would land the wrong side of it — and a dash on only one of the two
     read as lopsided. Weight, colour and the gap do the separating.

     Both share the display, spacing and weight so the two labels are offset
     from their values by exactly the same amount; a trailing space in `content`
     would not match, since inline-block trims it. */
  .ctable tbody td::before {
    content: "On your own";
    display: inline-block;
    margin-right: .45em;
    color: var(--ink-faint);
    font-weight: 600;
  }

  /* The mark stands in for the brand name, which read as repetition once it
     appeared four times down the page. It is a background rather than an image
     in `content`: a viewBox-only SVG has no intrinsic size, so `content: url()`
     renders it at the default 300x150, and even with explicit dimensions an
     image inside `content` cannot be sized or vertically aligned from CSS. */
  .ctable tbody td.ctable__ours::before {
    content: "With";
    padding-right: 1.45em;
    background: url("../assets/mark.svg") right .06em / 1.1em 1.1em no-repeat;
    color: var(--accent-deep);
  }
  .ctable tbody tr:last-child .ctable__ours,
  .ctable thead .ctable__ours { border-radius: 0; }

  .spec { grid-template-columns: 1fr; gap: .35rem; }
}

@media (max-width: 560px) {
  .trust__list { grid-template-columns: 1fr; gap: 1.5rem; }
  .trust__item { flex-direction: row; text-align: left; }
  .trust__bubble { width: 2.6rem; height: 2.6rem; }

  /* keep the nav CTA on one line so it doesn't crowd the wordmark */
  .nav__inner { gap: .75rem; padding-block: .7rem; }
  .btn--nav { padding: .68rem 1.05rem; font-size: .875rem; gap: .55em; }
  .btn--lg { padding: 1rem 1.6rem; font-size: 1.0625rem; }
  .wordmark__text { font-size: 1.1875rem; }
  .wordmark__mark { width: 1.4rem; height: 1.4rem; }

  /* long unbroken tokens (the contact address) must not push the page wide */
  .footer__mail,
  .footer__contact-body { overflow-wrap: anywhere; }

  /* footer links need vertical padding to be tappable */
  .footer__nav { gap: .1rem 1.35rem; }
  .footer__nav a { display: inline-block; padding: .5rem 0; }

  .modal__panel { padding: 1.6rem 1.25rem; }
  .modal__close { top: .5rem; right: .5rem; }

  .stats { gap: 1.9rem; }
  .quote__text p { font-size: 1.4rem; }

  /* stacked table pairs read better with a little more room */
  .ctable th,
  .ctable td { padding: .85rem 1rem; }
}