/* Clean white editorial system for the Reasons landing. */
:root {
  --acid: #f7f7f5;
  --line: #ddddda;
  --muted: #686864;
}

/* Final iPhone stability pass: visible FAQ, balanced final CTA and safe legal wrapping. */
.legal-footer-requisites {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}
.legal-footer-requisites > span + span::before {
  content: "·";
  margin-right: 8px;
}

@media (max-width: 760px) {
  .faq { background: #fff; }
  .faq details {
    min-height: 0;
    padding: 0;
    background: #fff;
    content-visibility: visible;
    contain: none;
  }
  .faq summary {
    display: block;
    min-height: 0;
    padding: 22px 44px 22px 0;
    color: #111 !important;
    -webkit-text-fill-color: #111;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 19px;
    line-height: 1.22;
    background: #fff;
  }
  .faq summary::after { top: 18px; }

  .final { overflow: hidden; }
  .final-heading {
    position: relative;
    min-height: 264px;
    padding-right: 70px;
  }
  .final-heading h2 {
    position: relative;
    z-index: 2;
    max-width: 7ch;
    font-size: clamp(38px, 10.5vw, 42px);
    line-height: .96;
  }
  .final-heading img {
    position: absolute;
    z-index: 1;
    right: -158px;
    bottom: -22px;
    width: 560px;
    max-width: none;
    height: auto;
    margin: 0;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.07));
    pointer-events: none;
  }
  .final-actions {
    position: relative;
    z-index: 3;
    margin-top: 18px;
  }

  .legal-footer,
  .legal-footer-links,
  .legal-footer-requisites {
    min-width: 0;
    max-width: 100%;
  }
  .legal-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .legal-footer-requisites {
    width: 100%;
    display: grid;
    gap: 5px;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .legal-footer-requisites > span {
    display: block;
    max-width: 100%;
  }
  .legal-footer-requisites > span + span::before { content: none; }
}

body { background: #fff; }

/* Illustration breaks: white canvas and a soft fade into the page. */
.story-visual-compact {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(24px, 3vw, 48px) 0;
  background: #fff !important;
}
.story-visual-compact::before,
.story-visual-compact::after { display: none !important; }
.story-visual-compact img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(1440px, 100%) !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0 auto;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%) !important;
}

/* Remove heavy black bands around the illustrations. */
.principles,
.easy {
  background: #fff !important;
  color: #111 !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.principles article { border-top-color: var(--line); }
.principles p { color: var(--muted); }
.easy .checks p { border-top-color: var(--line); }

/* Three outcomes: one clean row rather than three heavy cards. */
.hero-results {
  width: calc(100% - 8vw);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(56px, 6vw, 84px) 0 clamp(62px, 7vw, 92px);
  text-align: left;
}
.hero-results .eyebrow { margin-bottom: 28px; }
.compact-results {
  gap: 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.compact-results article {
  min-height: 126px !important;
  padding: 26px 30px !important;
  justify-content: flex-start !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.compact-results article + article { border-left: 1px solid var(--line) !important; }
.compact-results span { margin-bottom: 22px; color: #941f32; }
.compact-results h3 {
  max-width: 340px;
  margin: 0;
  font-size: clamp(19px, 1.45vw, 23px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.hero-results .format-line {
  margin: 30px 0 20px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
}
.hero-results > .button { display: flex; width: max-content; min-width: 230px; margin: 0 auto; }

/* Audience block: tighter rhythm and no decorative slab. */
.for-you {
  width: calc(100% - 8vw);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(64px, 7vw, 96px) 0;
  background: #fff;
}
.for-you .checks { column-gap: clamp(44px, 6vw, 88px); }
.for-you .checks p { min-height: 0; padding: 24px 0 28px; }
.recognized {
  margin: 44px 0 0 !important;
  padding: 46px 0 !important;
  gap: clamp(34px, 5vw, 72px);
  background: #fff !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Author and education: one aligned white grid. */
.author-simplified {
  width: calc(100% - 8vw) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(68px, 7vw, 96px) 0 !important;
  display: grid !important;
  grid-template-columns: minmax(380px, .9fr) minmax(0, 1.1fr) !important;
  gap: clamp(48px, 6vw, 82px) !important;
  align-items: start !important;
  background: #fff !important;
}
.author-profile {
  display: grid !important;
  grid-template-columns: 164px minmax(0, 1fr) !important;
  gap: 24px 28px !important;
  align-items: center !important;
  padding: 0 !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.author-photo { width: 164px; margin: 0 !important; }
.author-photo img {
  width: 164px !important;
  aspect-ratio: 1 !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
.author-identity h2 {
  margin: 8px 0 0;
  font-size: clamp(38px, 3.2vw, 50px) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}
.author-identity h2 small { font-size: .48em; font-weight: 550; letter-spacing: -.02em; }
.author-profile .author-summary {
  grid-column: 1 / -1;
  max-width: 58ch;
  margin: 8px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.62;
}
.author-simplified .author-education { margin: 0 !important; }
.author-education h3 {
  margin: 0 0 24px;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -.03em;
}
.education-slider { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 12px; }
.education-card {
  min-height: 238px !important;
  height: 100%;
  padding: 26px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
}
.education-card b { font-size: clamp(20px, 1.4vw, 25px) !important; line-height: 1.18 !important; }
.education-card span { color: #555; font-size: 15px; }
.education-dots { margin-top: 8px; }

@media (max-width: 1100px) {
  .story-visual-compact img {
    width: 100% !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%) !important;
  }
  .author-simplified { grid-template-columns: 1fr !important; gap: 52px !important; }
  .author-profile { max-width: 760px; }
  .author-education { width: 100%; }
}

@media (max-width: 760px) {
  .story-visual-compact { padding: 18px 0; }
  .story-visual-compact img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
  }
  .hero-results,
  .for-you,
  .author-simplified { width: calc(100% - 40px) !important; }
  .compact-results { grid-template-columns: 1fr !important; }
  .compact-results article { min-height: 0 !important; padding: 22px 0 !important; }
  .compact-results article + article { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .compact-results span { margin-bottom: 10px; }
  .hero-results .format-line { text-align: left; }
  .hero-results > .button { width: 100%; }
  .for-you .checks { grid-template-columns: 1fr; }
  .recognized { display: block; padding: 36px 0 !important; }
  .recognized p { margin: 22px 0 26px; }
  .recognized .button { width: 100%; }
  .author-profile { display: block !important; }
  .author-photo { width: min(220px, 72vw); margin: 0 0 28px !important; }
  .author-photo img { width: 100% !important; }
  .author-profile .author-summary { margin-top: 24px; }
  .education-slider { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 7px; }
  .education-card { min-height: 0 !important; padding: 22px !important; }
}

/* Final rhythm pass: restrained illustrations, visible compact checks and a stronger CTA character. */
@media (min-width: 1101px) {
  .story-visual-compact {
    padding: 22px 0;
  }
  .story-visual-compact img {
    width: min(900px, 68vw) !important;
  }

  .easy {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }
  .easy .short-checks {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 28px;
    margin-top: 28px;
  }
  .easy .short-checks p {
    min-height: 0;
    padding: 18px 0 6px;
  }

  .author-simplified {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .testimonials { padding-top: 56px; }
  .faq { padding-bottom: 48px; }
  .final { margin-top: 28px; }
  .final-heading {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: center;
    overflow: hidden;
  }
  .final-heading img {
    width: 760px;
    max-width: none;
    justify-self: center;
    margin-inline: -190px;
  }
}

.easy,
.easy h2,
.easy b { color: #111 !important; }
.easy > p:not(.eyebrow) { color: var(--muted) !important; }

@media (min-width: 761px) and (max-width: 1100px) {
  .story-visual-compact img { width: min(760px, 88vw) !important; }
  .easy .short-checks p { min-height: 0; }
  .final-heading { overflow: hidden; }
  .final-heading img { width: 520px; max-width: none; margin-inline: -140px; }
}

@media (max-width: 760px) {
  .easy .short-checks p { min-height: 0; padding: 20px 0; }
}

/* Readability pass for the core 40+ / 50+ audience. */
body {
  font-size: 17px;
  line-height: 1.65;
}

.eyebrow {
  font-family: Manrope, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .1em;
}

.button,
.header-link,
.text-link {
  font-family: Manrope, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.25;
}

.four-grid p,
.two-grid p,
.checks p,
.principles p,
.faq details p,
.price-includes p,
.author-summary,
.recognized p {
  font-size: 17px;
  line-height: 1.62;
}

.review-card blockquote {
  font-size: 18px;
  line-height: 1.65;
}

.review-author { font-size: 16px; }
.signup-field label { font-size: 15px; }
.signup-consent { font-size: 14px; line-height: 1.5; }
.signup-field-error { font-size: 13px; }
.signup-form-status { font-size: 16px; }

footer {
  font-size: 13px;
  line-height: 1.55;
}

.legal-footer-brand span { font-size: 12px; }
.hero-v3 .hero-note { font-size: 16px; line-height: 1.5; }
.hero-v3 .hero-bottom p { font-size: 14px; }

/* The author badge is a meaningful navigation element, not a tiny caption. */
.hero-author {
  gap: 16px;
  padding: 13px 20px 13px 13px;
}

.hero-author img {
  width: 88px;
  height: 88px;
  flex-basis: 88px;
}

.hero-author b {
  font-size: 18px;
  line-height: 1.25;
}

.hero-author span {
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.42;
}

@media (max-width: 760px) {
  body { font-size: 16px; line-height: 1.62; }
  .eyebrow { font-size: 12px; }
  .four-grid p,
  .two-grid p,
  .checks p,
  .principles p,
  .faq details p,
  .price-includes p,
  .author-summary,
  .recognized p { font-size: 16px; }
  .review-card blockquote { font-size: 16px; line-height: 1.62; }
  footer { font-size: 13px; }
  .hero-v3 .hero-note { font-size: 15px; }
  .hero-author {
    gap: 14px;
    padding: 12px 16px 12px 12px;
    border-radius: 64px;
  }
  .hero-author img {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }
  .hero-author b { font-size: 17px; }
  .hero-author span { font-size: 12px; line-height: 1.4; }
}