/* ============================================================
   MANYTONEZ
   Brand: black + signature pink #FF2DAA, Montserrat throughout.
   Mobile first. Breakpoints at 720px and 1024px.
   ============================================================ */

/* Montserrat variable, latin subsets, self-hosted so the CSP stays 'self'. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-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 {
  --pink: #ff2daa;
  --pink-dark: #e01d94;
  --black: #000000;
  --ink: #0e0e0e;
  --ink-2: #17171a;
  --grey: #f5f5f5;
  --grey-line: #e4e4e7;
  --body: #52525b;
  --body-light: rgba(255, 255, 255, 0.72);
  --white: #ffffff;

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
  --wrap: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
/* <picture> is only a wrapper for the WebP <source>; it must not become a
   layout box, or "height: 100%" on an img inside an absolutely positioned
   container would resolve against the wrapper instead of the container. */
picture { display: contents; }

h1, h2, h3 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
  /* A single long uppercase word like COMPARISON. is wider than a phone at
     display sizes, and would push the whole document sideways. */
  overflow-wrap: break-word;
  max-width: 100%;
}

p { margin: 0; }

a { color: inherit; }

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

.pink { color: var(--pink); }
.faint { color: rgba(255, 255, 255, 0.55); }

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

/* The honeypot must be in the DOM for a bot to find, and unreachable for a
   person, so it is moved off-screen rather than hidden with display:none. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pink);
  color: #fff;
  padding: 12px 20px;
  font-weight: 700;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

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

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  padding: 15px 28px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }

.btn-pink { background: var(--pink); color: #fff; }
.btn-pink:hover { background: var(--pink-dark); }

.btn-black { background: var(--black); color: #fff; }
.btn-black:hover { background: #2a2a2a; }

.btn-outline {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.1); }

.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-sm { padding: 11px 18px; font-size: 13px; }
.btn-lg { padding: 17px 30px; font-size: 16px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 800;
  color: var(--pink);
  margin-bottom: 14px;
}

.lede { font-size: 17px; line-height: 1.65; }

.microcopy {
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-top: 14px;
}
.microcopy.dots span + span::before {
  content: '\2022';
  color: var(--pink);
  margin: 0 8px;
}
.microcopy.locked {
  display: flex;
  align-items: center;
  gap: 6px;
}
.microcopy-icon {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--black);
  transition: box-shadow 0.2s ease;
}
.header.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.45); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.header-logo img { height: 30px; width: auto; }

.header-cta { flex-shrink: 0; white-space: nowrap; }
.header-cta .cta-long { display: none; }
.header-logo img { height: 28px; }

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

.hero {
  background: var(--black);
  display: flex;
  flex-direction: column;
}

/* On a phone the photograph comes first and the black copy panel rides up
   over its bottom edge, so the two overlap the way the mockup's panels do. */
.hero-media { order: 0; }
.hero-copy {
  order: 1;
  position: relative;
  z-index: 1;
  margin-top: -34px;
  border-radius: 26px 26px 0 0;
  background: var(--black);
  padding: 36px max(20px, calc((100% - var(--wrap)) / 2 + 20px)) 48px;
}
.hero-copy-inner { max-width: 560px; }

.hero h1 {
  color: var(--white);
  font-size: clamp(31px, 9.4vw, 58px);
  margin-bottom: 20px;
}

.hero .eyebrow { position: relative; padding-bottom: 12px; }
.hero .eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--pink);
}

.hero .lede {
  color: var(--body-light);
  margin-bottom: 28px;
  max-width: 460px;
}

.hero .microcopy { color: rgba(255, 255, 255, 0.72); font-weight: 500; }

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.hero-actions .microcopy { margin-top: 0; }
.hero-actions .btn { width: 100%; max-width: 360px; font-size: 14px; padding-left: 16px; padding-right: 16px; }

.hero-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* --- sections -------------------------------------------------------- */

.section { padding: 40px 0; }

.section-title {
  font-size: clamp(22px, 5vw, 32px);
  margin-bottom: 26px;
  position: relative;
  padding-bottom: 16px;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--pink);
}
.section-title.light { color: var(--white); }
.section-title.centered { text-align: center; }
.section-title.centered::after { left: 50%; transform: translateX(-50%); }

.icon {
  width: 34px;
  height: 34px;
  stroke: var(--pink);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 14px;
}

/* --- guide ----------------------------------------------------------- */

/* The real cover of the PDF, tilted, sitting in the pink opt-in band. */
.guide-cover {
  display: block;
  width: 190px;
  height: auto;
  border-radius: 5px;
  transform: rotate(2.5deg);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* --- why ------------------------------------------------------------- */

.why { background: var(--black); }
.why h3 { color: var(--white); font-size: 14px; line-height: 1.25; margin-bottom: 8px; }
.why p { color: var(--body-light); font-size: 14px; max-width: 220px; margin: 0 auto; }
.why .icon { width: 36px; height: 36px; margin: 0 auto 12px; stroke-width: 1.5; }

.why-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-align: center;
}
.why-grid li { padding: 20px 16px; }
.why-grid li + li { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* --- product --------------------------------------------------------- */

.product { background: var(--grey); }

.product-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  padding: 30px 22px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

/* The photo carries its own "Best seller" badge (client artwork). */
.product-media img {
  width: 100%;
  border-radius: 8px;
}

.product-kicker {
  color: var(--pink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.product-copy h2 { font-size: clamp(30px, 8vw, 42px); margin-bottom: 10px; }
.product-tagline { color: var(--ink); font-size: 16px; font-weight: 500; margin-bottom: 18px; }

.product-features {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.product-features li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}
.product-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  box-sizing: border-box;
}
.product-features li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 5px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  transform: rotate(-45deg);
}

.product-btn { width: 100%; }
.product-btn .btn-arrow { width: 22px; height: 22px; stroke-width: 2.2; }

/* One row as drawn: stars, average, a divider, then the count. */
.product-rating {
  border-top: 1px solid var(--grey-line);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.rating-avg { color: var(--ink); font-size: 15px; font-weight: 500; margin: 0; }
.rating-avg strong { font-weight: 800; }
.rating-count {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--grey-line);
}
.rating-count strong { color: var(--pink); font-weight: 800; }

.stars { display: flex; gap: 3px; }
.star { width: 20px; height: 20px; fill: var(--pink); }

/* --- why: photo + pillars ----------------------------------------------- */

.why-inner { display: grid; grid-template-columns: 1fr; }
.why-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.why-content { padding: 36px 20px 40px; }

/* --- reviews ---------------------------------------------------------- */

.reviews { background: var(--grey); padding-bottom: 120px; }

.reviews-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reviews-arrow {
  display: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}
.reviews-arrow:hover { background: var(--pink-dark); }
.reviews-arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reviews-track {
  list-style: none;
  margin: 0;
  padding: 4px 0 12px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.reviews-track::-webkit-scrollbar { display: none; }

.review {
  flex: 0 0 min(84%, 320px);
  scroll-snap-align: start;
  background: var(--white);
  border-radius: 12px;
  padding: 20px 20px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review .star { width: 17px; height: 17px; }
.review blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  flex: 1;
}
.review-who {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-who img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.review-who figcaption { font-size: 14px; color: var(--body); font-weight: 500; }

/* --- opt-in ---------------------------------------------------------- */

.signup { background: var(--pink); padding-top: 0; }

.signup-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
.signup-art {
  --cover-w: min(62vw, 250px);
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: -104px;
  margin-bottom: 8px;
}
/* A white sheet behind the cover, tilted the other way. */
.signup-art::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: var(--cover-w);
  aspect-ratio: 3 / 4;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--white);
  border-radius: 5px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}
.signup-art .guide-cover { position: relative; z-index: 1; width: var(--cover-w); }

/* "FREE" oversized in white, the guide name in black with the last word white,
   a short white rule underneath: as drawn in brand/2026-09-14. */
.signup h2 {
  color: var(--ink);
  font-size: clamp(26px, 8vw, 40px);
  line-height: 1;
  text-align: center;
  margin-bottom: 16px;
}
.signup-free { display: block; color: #fff; font-size: 1.8em; line-height: 0.95; }
.signup-white { color: #fff; }
.signup h2::after {
  content: '';
  display: block;
  width: 110px;
  height: 3px;
  background: #fff;
  margin: 18px auto 0;
}
.signup .lede { color: rgba(255, 255, 255, 0.92); text-align: center; }
.signup .microcopy { color: rgba(255, 255, 255, 0.78); justify-content: center; }
.signup-form .btn-arrow { width: 20px; height: 20px; stroke-width: 2.2; }

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup-form input[type="email"] {
  width: 100%;
  padding: 16px;
  font-family: inherit;
  font-size: 16px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.signup-form input[type="email"]::placeholder { color: #9a9aa2; }
.signup-form input[type="email"]:focus {
  outline: none;
  border-color: var(--black);
}

.form-error {
  margin: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
}

.form-success {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 6px;
  padding: 22px;
  color: #fff;
  font-size: 16px;
}
.form-success strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

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

.footer { background: var(--black); color: var(--body-light); padding: 40px 0 0; }

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.footer-brand img { height: 26px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; max-width: 340px; }

.social {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.social a:hover { border-color: var(--pink); color: var(--pink); }
.social svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a {
  font-size: 14px;
  color: var(--body-light);
  text-decoration: none;
  width: fit-content;
}
.footer-col a:hover { color: var(--pink); }

.footer-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--pink);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer h3 {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.footer-contact p {
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-contact a { color: #fff; text-decoration: none; font-weight: 600; }
.footer-contact a:hover { color: var(--pink); }

.guarantee {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--body-light);
  align-items: flex-start !important;
}
/* The promise sits on its own line, the terms on the next. */
.guarantee strong { color: #fff; font-weight: 700; display: block; }
.guarantee .footer-icon { margin-top: 2px; }

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  margin-top: 28px;
  padding-top: 18px;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}
.footer-legal nav { display: flex; gap: 20px; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--pink); }

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

.legal { max-width: 720px; }
.legal h1 { font-size: clamp(28px, 7vw, 40px); margin-bottom: 8px; }
.legal h2 { font-size: 19px; margin: 34px 0 10px; }
.legal p, .legal li { font-size: 16px; }
.legal ul { padding-left: 20px; margin: 0; }
.legal li { margin-bottom: 6px; }
.legal .updated { font-size: 14px; color: #8a8a94; margin-bottom: 8px; }
.legal .back {
  display: inline-block;
  margin-top: 36px;
  font-weight: 700;
  color: var(--pink);
  text-decoration: none;
}
.legal .back:hover { text-decoration: underline; }

/* --- thank-you page --------------------------------------------------- */

/* --- thank-you page ---------------------------------------------------
   Built to the client's mockup: white "you're in" band with the guide art,
   a photo + black panel for the community, a Twist Board band, compact footer.
   Body class .ty scopes anything that differs from the landing page. */

.ty-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* "THANK YOU ---" : a pink rule trailing the word, as drawn. */
.ty-eyebrow-lined::after { content: ''; width: 40px; height: 2px; background: var(--pink); }
/* "--- READY TO MOVE?" : the rule leads instead. */
.ty-eyebrow-bar::before { content: ''; width: 40px; height: 4px; background: var(--pink); }
/* Community panel: the rule sits above the words. */
.ty-eyebrow-over { display: block; padding-top: 14px; position: relative; }
.ty-eyebrow-over::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 4px; background: var(--pink); }

/* Band 1 */
.ty-hero { background: var(--white); }
.ty-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.ty-hero-copy {
  padding: 22px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)) 36px;
}
.ty-logo { display: inline-block; margin-bottom: 34px; }
.ty-logo img { height: 34px; width: auto; }
.ty-title {
  position: relative;
  display: inline-block;
  color: var(--ink);
  font-size: clamp(52px, 15vw, 96px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.ty-brush {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  width: 100%;
  height: 12px;
  fill: none;
  stroke: var(--pink);
  stroke-width: 7;
  stroke-linecap: round;
}
.ty-ready {
  color: var(--ink);
  font-size: clamp(20px, 5.4vw, 27px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
}
.ty-lead { font-size: 16px; line-height: 1.6; max-width: 440px; margin-bottom: 26px; }
.ty-download .btn { width: 100%; max-width: 360px; }
.ty-note { font-size: 14px; color: var(--body); margin-top: 12px; }
/* The fallback note only shows when la.js left the download slot hidden. */
.ty-download:not([hidden]) + .ty-note-fallback { display: none; }
.ty-hero-media img { width: 100%; aspect-ratio: 1400 / 1189; object-fit: cover; }

/* Band 2 */
.ty-join { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ink); }
.ty-join-photo img { width: 100%; aspect-ratio: 1200 / 896; object-fit: cover; }
.ty-join-panel { padding: 36px 20px 40px; color: var(--white); min-width: 0; }
.ty-join-panel .ty-eyebrow { color: rgba(255, 255, 255, 0.85); }
.ty-join-title {
  color: var(--white);
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ty-join-title .pink { display: block; }
.ty-join-lead { color: var(--body-light); font-size: 16px; line-height: 1.6; margin-bottom: 28px; max-width: 460px; }
.ty-perks {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}
.ty-perks li { padding: 4px 6px; font-size: 14px; line-height: 1.3; color: var(--white); font-weight: 500; overflow-wrap: anywhere; }
.ty-perks li + li { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.ty-perks .icon-fill { width: 38px; height: 38px; margin: 0 auto 10px; fill: var(--pink); stroke: none; }
.ty-join-btn {
  width: 100%;
  border-radius: 999px;
  font-size: 14px;
  padding: 16px 22px;
  gap: 14px;
  text-align: left;
}
.ty-join-btn span { flex: 1; text-align: center; }
.btn-icon-fill { fill: currentColor; stroke: none; width: 24px; height: 24px; }
.ty-join-btn .btn-arrow { width: 22px; height: 22px; stroke-width: 2.2; }
.ty-join-sub { font-size: 13px; color: var(--body-light); text-align: center; margin-top: 12px; }

/* Band 3 */
.ty-board { background: var(--white); }
.ty-board-inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.ty-board-copy { padding: 36px max(20px, calc((100vw - var(--wrap)) / 2 + 20px)) 32px; }
.ty-board-title {
  color: var(--ink);
  font-size: clamp(36px, 10vw, 60px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.ty-btn-outline {
  background: transparent;
  color: var(--pink);
  box-shadow: inset 0 0 0 2px var(--pink);
  border-radius: 999px;
  width: 100%;
  max-width: 380px;
}
.ty-btn-outline:hover { background: rgba(255, 45, 170, 0.08); }
.ty-board-media img { width: 100%; aspect-ratio: 1400 / 1059; object-fit: cover; }

/* Footer */
.ty-footer { padding-top: 30px; }
.ty-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ty-footer-brand img { height: 30px; width: auto; }
.ty-footer .social { margin: 0; }
.ty-footer .footer-legal { margin-top: 26px; }

/* --- breakpoints ----------------------------------------------------- */

@media (min-width: 720px) {
  .header-cta .cta-long { display: inline; }
  .header-cta .cta-short { display: none; }
  .header-logo img { height: 34px; }

  .section { padding: 52px 0; }

  .hero-copy { padding-top: 44px; padding-bottom: 56px; }

  .reviews-arrow { display: flex; }
  .review { flex-basis: 320px; }
  .product-card { grid-template-columns: 1fr 1.3fr; padding: 34px 32px; align-items: center; }
  .product-rating { grid-column: 1 / -1; }
  .product-copy h2 { font-size: 40px; }

  .why-content { padding: 40px 32px 44px; }

  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid li + li { border-top: 0; }
  .why-grid li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.14); }
  .why-grid li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }


  .signup-inner { grid-template-columns: 1fr 1fr; gap: 44px; }
  .signup-art { grid-column: 1 / -1; margin-top: -116px; }
  .signup h2, .signup .lede { text-align: left; }
  .signup h2::after { margin-left: 0; }
  .signup .microcopy { justify-content: flex-start; }
  .signup-form { flex-direction: row; flex-wrap: wrap; }
  .signup-form input[type="email"] { flex: 1; min-width: 220px; }
  .signup-form .btn { flex-shrink: 0; }
  .signup-form .form-error { flex-basis: 100%; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-legal { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 1024px) {
  body { font-size: 17px; }

  /* As in the brand mockup: the photograph fills the right three quarters of
     the hero at its natural proportions, so every woman in it is visible, and
     the black copy panel fades into it instead of ending on a hard edge. */
  .hero {
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 42vw;
  }
  .hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75%;
  }
  .hero-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
  .hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      #000 0%,
      rgba(0, 0, 0, 0.92) 10%,
      rgba(0, 0, 0, 0.55) 22%,
      rgba(0, 0, 0, 0) 38%);
  }
  .hero-copy {
    position: relative;
    z-index: 2;
    width: 44%;
    display: flex;
    align-items: center;
    margin-top: 0;
    border-radius: 0;
    background: transparent;
    padding: 44px 24px 52px max(20px, calc((100vw - var(--wrap)) / 2 + 20px));
  }
  .hero-copy-inner { max-width: 470px; }
  .hero h1 { font-size: clamp(42px, 3.7vw, 54px); margin-bottom: 16px; }
  .hero .lede { font-size: 16px; margin-bottom: 22px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { width: auto; max-width: none; white-space: nowrap; font-size: 15px; padding: 14px 26px; }

  .product-card {
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    padding: 34px 40px 30px;
  }
  .product-rating { gap: 10px 16px; }
  .product-copy h2 { font-size: 40px; }

  .why-inner { grid-template-columns: 36fr 64fr; }
  .why-photo img { height: 100%; aspect-ratio: auto; min-height: 0; }
  .why-content { padding: 32px 40px 32px 36px; display: flex; flex-direction: column; justify-content: center; }
  .why-content .section-title { margin-bottom: 18px; font-size: 28px; }
  .why-content .section-title { text-align: left; }
  .why-content .section-title::after { left: 0; transform: none; }
  .why-content .why-grid { text-align: center; }

  .review { flex-basis: calc((100% - 40px) / 3); }

  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .why-grid li { padding: 6px 14px; }
  .why-grid li:nth-child(n + 3) { border-top: 0; }
  .why-grid li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); }

  .signup { padding-top: 56px; }
  .signup-inner { grid-template-columns: 270px 1fr 1.15fr; gap: 40px; }
  .signup-art { --cover-w: 250px; grid-column: auto; align-self: start; margin: -150px 0 -20px; }
  .reviews { padding-bottom: 124px; }

  .footer-inner { grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr; gap: 40px; }
  .footer-brand { grid-column: auto; }
}

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

/* --- thank-you page: breakpoints --------------------------------------- */

@media (min-width: 720px) {
  /* As in the mockup: the photograph fills the right of the band, bleeding to
     the top and right edges, and the white copy panel fades into it. */
  .ty-hero { position: relative; overflow: hidden; min-height: min(50vw, 780px); }
  .ty-hero-inner { display: block; }
  .ty-hero-copy {
    position: relative;
    z-index: 2;
    width: 48%;
    padding-top: 30px;
    padding-bottom: 52px;
    padding-right: 0;
  }
  .ty-title { font-size: clamp(44px, 6.6vw, 72px); }
  .ty-ready, .ty-lead, .ty-note { max-width: 380px; }
  .ty-hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
  .ty-hero-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: right center; }
  .ty-hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.8) 4%,
      rgba(255, 255, 255, 0.35) 9%,
      rgba(255, 255, 255, 0) 16%);
  }
  .ty-download .btn { width: auto; }

  .ty-join { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ty-join-photo img { height: 100%; aspect-ratio: auto; }
  .ty-join-panel { padding: 44px 36px 44px 40px; display: flex; flex-direction: column; justify-content: center; }
  .ty-join-btn { font-size: 15px; }

  .ty-board { position: relative; overflow: hidden; min-height: min(45vw, 700px); }
  .ty-board-inner { display: block; }
  .ty-board-copy { position: relative; z-index: 2; width: 46%; padding-top: 52px; padding-bottom: 52px; padding-right: 0; }
  .ty-board-copy .ty-lead { max-width: 380px; }
  .ty-board-media { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
  .ty-board-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: right center; }
  .ty-board-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,
      #fff 0%,
      rgba(255, 255, 255, 0.9) 3%,
      rgba(255, 255, 255, 0) 10%);
  }
  .ty-btn-outline { width: auto; }
}

@media (min-width: 1024px) {
  .ty-hero-copy { width: 46%; padding-top: 36px; padding-bottom: 64px; }
  .ty-title { font-size: clamp(64px, 6.4vw, 96px); }
  .ty-ready { max-width: 540px; }
  .ty-lead, .ty-note { max-width: 440px; }
  .ty-logo { margin-bottom: 44px; }
  .ty-logo img { height: 40px; }
  .ty-title { font-size: clamp(72px, 6.6vw, 104px); }
  .ty-lead { font-size: 17px; }
  .ty-join { grid-template-columns: 58fr 42fr; }
  .ty-join-panel { padding: 56px max(40px, calc((100vw - var(--wrap)) / 2 + 20px)) 56px 48px; }
  .ty-join-title { font-size: clamp(44px, 4vw, 58px); }
  .ty-board-copy { width: 42%; padding-top: 64px; padding-bottom: 64px; }
  .ty-board-copy .ty-lead { max-width: 420px; }
  .ty-footer-inner { padding-bottom: 6px; }
}