/* Tokens and text styles from the Fertily website library in Figma. */
:root {
  --web-brand-deep: #174543;
  --web-brand-primary: #418276;
  --web-text-primary: #162d2f;
  --web-text-secondary: #536869;
  --web-background-cream: #fdf6ed;
  --web-background-card: #fffbf6;
  --web-background-muted: #f4ebe0;
  --web-background-sand: #f8e4d4;
  --web-border: #e3d9cd;
  --web-peach: #f4c5b1;
  --web-white: #fff;
  --web-font-body: Figtree, sans-serif;
  --web-font-heading: Fraunces, Georgia, serif;
}

@font-face {
  font-family: "Fertily Icons";
  src: url("./assets/brand/fontawesome-solid.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: block;
}

.web-design {
  background: var(--web-background-cream);
  color: var(--web-text-primary);
  font: 400 17px/26px var(--web-font-body);
}

.web-design h1,
.web-design h2 {
  font-family: var(--web-font-heading);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.web-design a:focus-visible,
.web-design button:focus-visible {
  outline: 2px solid var(--web-brand-primary);
  outline-offset: 5px;
}

.web-skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 20px;
  background: var(--web-background-card);
  transform: translateY(-150%);
}

.web-skip-link:focus { transform: translateY(0); }
.web-container { width: min(1170px, calc(100% - 64px)); margin-inline: auto; }
.web-header { background: var(--web-background-cream); position: relative; z-index: 10; font: 400 17px/26px var(--web-font-body); }
.web-header__inner {
  max-width: 1450px;
  min-height: 112px;
  margin: auto;
  padding: 0 49px 0 29px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.web-brand { display: flex; align-items: center; gap: 2px; width: fit-content; color: var(--web-brand-deep); }
.web-brand picture { flex: none; }
.web-brand span { font: 400 30px/36px var(--web-font-heading); }
.web-nav { display: flex; gap: 30px; }
.web-nav a { padding: 0; border-radius: 0; color: var(--web-brand-deep); }
.web-nav a:hover { background: none; text-decoration: underline; text-underline-offset: 5px; }
.web-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  width: 214px;
  padding: 12px 22px;
  border-radius: 45px;
  background: var(--web-brand-deep);
  color: var(--web-white);
  font: 600 17px/21px var(--web-font-body);
  text-align: center;
}

.web-button:hover { background: var(--web-brand-primary); }
.web-header__download { justify-self: end; width: 196px; min-height: 54px; border: 1px solid #000; }
.web-header .nav-toggle { justify-self: end; border: 0; background: none; color: var(--web-brand-deep); }
.web-header .nav-toggle span { background: currentColor; }
.web-header__actions { display: flex; justify-self: end; align-items: center; gap: 24px; }
.web-language { position: relative; color: var(--web-text-primary); font: 400 17px/26px var(--web-font-body); }
.web-language summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; border-radius: 8px; color: var(--web-brand-deep); }
.web-language summary::-webkit-details-marker { display: none; }
.web-language summary:focus-visible { outline: 2px solid var(--web-brand-primary); outline-offset: 4px; }
.web-language__chevron { width: 7px; height: 7px; margin: -4px 3px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.web-language[open] .web-language__chevron { transform: translateY(4px) rotate(225deg); }
.web-language__options { position: absolute; top: calc(100% + 12px); right: 0; width: 286px; max-width: calc(100vw - 48px); padding: 20px 20px 28px; display: grid; gap: 20px; border-radius: 14px; background: var(--web-background-card); box-shadow: 0 8px 28px rgb(23 69 67 / 10%); }
.web-language__options a { display: block; color: var(--web-text-primary); line-height: 26px; }
.web-language__options a:hover,
.web-language__options a:focus-visible { color: var(--web-brand-primary); text-decoration: underline; text-underline-offset: 4px; }
.web-language__options a[aria-current="page"] { color: var(--web-brand-deep); font-weight: 600; }
.web-menu-open { overflow: hidden; }
.web-mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: 345px;
  max-width: calc(100% - 45px);
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--web-brand-deep);
  background: var(--web-background-card);
  font: 400 20px/30px var(--web-font-body);
  overscroll-behavior: contain;
}
.web-mobile-menu::backdrop { background: rgb(23 69 67 / 18%); }
.web-mobile-menu__panel { min-height: 100%; display: flex; flex-direction: column; padding: 17px 24px 76px; }
.web-mobile-menu__header { display: flex; align-items: center; justify-content: flex-end; min-height: 55px; }
.web-mobile-menu__close { position: relative; flex: none; width: 36px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.web-mobile-menu__close::before,
.web-mobile-menu__close::after { content: ""; position: absolute; width: 20px; height: 2px; background: currentColor; top: 21px; left: 8px; transform: rotate(45deg); }
.web-mobile-menu__close::after { transform: rotate(-45deg); }
.web-mobile-menu__links { display: flex; flex-direction: column; margin: 37px 3px 36px; }
.web-mobile-menu__links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; border-bottom: 1px solid var(--web-border); }
.web-mobile-menu__links a:last-child { border-bottom: 0; }
.web-mobile-menu__links a:hover { color: var(--web-brand-primary); }
.web-mobile-menu__links span { font-size: 26px; }
.web-mobile-menu .web-language { margin-top: auto; }
.web-mobile-menu .web-language__options { position: static; width: 100%; max-width: none; margin-top: 12px; box-shadow: none; border: 1px solid var(--web-border); }
.web-mobile-menu__download { width: 100%; min-height: 58px; margin-top: 24px; }
.web-hero { position: relative; min-height: 668px; overflow: hidden; }
.web-hero__inner { position: relative; max-width: 1076px; margin: auto; padding: 102px 0 100px; }
.web-hero__copy { position: relative; z-index: 1; width: 585px; max-width: 100%; }
.web-eyebrow { color: var(--web-brand-deep); font-size: 14px; line-height: 20px; margin: 0 0 5px; }
.web-hero h1 { margin: 0 0 28px; color: var(--web-brand-deep); font-size: 56px; line-height: 63px; }
.web-hero h1 em { color: var(--web-brand-primary); font-weight: 400; }
.web-hero__description { margin: 0; color: var(--web-text-secondary); font-size: 20px; line-height: 30px; }
.web-downloads { display: flex; gap: 15px; flex-wrap: wrap; }
.web-hero .web-downloads { margin-top: 52px; }
.web-hero__phone { position: absolute; left: calc(50% + 205px); top: 14px; width: 272px; height: 550px; object-fit: cover; transform: rotate(8deg); }
.web-blur { position: absolute; pointer-events: none; max-width: none; }
.web-blur--secondary { width: 732px; height: 732px; left: calc(50% - 897px); top: -57px; }
.web-blur--accent { left: calc(50% + 25px); top: -21px; }
.web-blur--accent img { max-width: none; }
.web-treatments { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 20px; min-height: 100px; padding: 39px 24px 43px; background: var(--web-background-sand); color: var(--web-brand-deep); font: 600 14px/18px var(--web-font-body); text-align: center; text-transform: uppercase; }
.web-treatments ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.web-treatments li + li::before { content: "·"; margin-right: 12px; }
.web-features { min-height: 650px; padding-block: 48px 60px; scroll-margin-top: 24px; }
.web-features h2 { margin: 0 0 20px; font-size: 48px; line-height: 1.2; }
.web-features__intro { margin: 0; color: var(--web-text-secondary); }
.web-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 60px; margin-top: 50px; }
.web-feature { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 31px; min-height: 75px; }
.web-feature h3 { font-size: 20px; line-height: 25px; font-weight: 600; margin: 0 0 5px; }
.web-feature p { font-size: 17px; line-height: 26px; color: var(--web-text-secondary); margin: 0; }
.web-icon { font-family: "Fertily Icons"; font-weight: 900; font-style: normal; display: inline-flex; align-items: center; justify-content: center; color: var(--web-brand-primary); }
.web-feature__icon { width: 48px; height: 48px; background: var(--web-background-sand); border-radius: 44px 56px 46px 55px; font-size: 22px; }
.web-health { position: relative; min-height: 511px; padding-block: 120px 90px; isolation: isolate; }
.web-health__wave { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; max-width: none; }
.web-health__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; color: var(--web-white); }
.web-health article > .web-icon { width: 56px; height: 56px; font-size: 29px; color: var(--web-peach); margin-left: 95px; background-image: url("./assets/brand/health-icon-shape.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; }
.web-health h2 { margin: 20px 0 24px; font-size: 24px; line-height: 30px; }
.web-health p { font-size: 17px; line-height: 26px; margin: 0; max-width: 350px; }
.web-sharing { width: min(856px, calc(100% - 64px)); margin: auto; padding-block: 116px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 130px; }
.web-sharing__icon { width: 56px; height: 56px; background: var(--web-background-sand); border-radius: 44px 56px 46px 55px; font-size: 29px; }
.web-sharing__icon--private { background: url("./assets/brand/privacy-shape.svg") center / contain no-repeat; border-radius: 0; }
.web-sharing h2 { margin: 31px 0 16px; font-size: 30px; line-height: 36px; }
.web-sharing p { margin: 0; font-size: 17px; line-height: 26px; }
.web-founder { min-height: 670px; padding-block: 92px 75px; display: grid; grid-template-columns: 475px minmax(0, 1fr); gap: 98px; align-items: start; }
.web-founder__photo { width: 475px; height: 475px; object-fit: cover; border-radius: 150px 225px 145px 225px; }
.web-founder h2 { margin: 25px 0 37px; font-size: 42px; line-height: 50px; }
.web-founder p { color: var(--web-text-secondary); margin: 0 0 24px; }
.web-founder .web-founder__signature { font: 400 24px/30px var(--web-font-heading); font-variation-settings: "SOFT" 0, "WONK" 1; color: var(--web-text-primary); margin-top: 30px; }
.web-download-section { min-height: 570px; padding: 99px 24px 70px; background: linear-gradient(156.324deg, #fbe1d2 13.869%, #fdf6ed 54.015%, #c6e9df 86.861%); text-align: center; }
.web-download-section > img { margin: 0 auto 39px; }
.web-download-section h2 { margin: 0 0 34px; color: var(--web-brand-deep); font-size: 56px; line-height: 63px; }
.web-download-section p { color: var(--web-text-secondary); font-size: 20px; line-height: 30px; margin: 0 0 50px; }
.web-download-section .web-downloads { justify-content: center; gap: 24px; }
.web-footer { max-width: 1450px; min-height: 108px; margin: auto; padding: 31px 37px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 24px; }
.web-footer p { color: var(--web-text-secondary); margin: 0; }
.web-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.web-footer nav a { color: var(--web-brand-deep); font-weight: 600; }
.web-footer a:hover { text-decoration: underline; }

/* Keep approved legal content in the document; let its length drive the layout. */
.web-policy { position: relative; overflow: hidden; }
.web-policy::before { content: ""; position: absolute; top: -30px; left: calc(50% - 1009px); width: 732px; height: 732px; background: url("./assets/brand/blur-secondary.svg") center / contain no-repeat; pointer-events: none; }
.web-policy .page-card { position: relative; width: min(1200px, 82.75862069%); max-width: none; margin: 0 auto; padding: 100px 0 120px; }
.web-policy .page-card h1 { font: 400 42px/50px var(--web-font-heading); margin: 0 0 7px; }
.web-policy .page-card > .lede { margin: 0 0 37px; font-size: 14px; line-height: 20px; }
.web-policy .legal-list { margin: 0; gap: 36px; }
.web-policy .legal-block { border: 0; padding: 0; }
.web-policy .legal-block h2 { font: 400 30px/36px var(--web-font-heading); margin: 0 0 18px; }
.web-policy .page-card p,
.web-policy .page-card li { color: var(--web-text-secondary); line-height: 26px; }
.web-policy .legal-block > p,
.web-policy .legal-block > ul { max-width: 1160px; }
.web-policy .page-card a { color: var(--web-brand-deep); text-decoration: underline; text-underline-offset: 3px; }
/* At the 1450px Figma frame: text inset 125px, table inset 89px. */
.web-policy .table-scroll { margin: 36px max(-36px, -2.48275862vw) 0; max-width: none; }
.web-policy table { color: var(--web-text-primary); background: var(--web-background-card); table-layout: fixed; }
.web-policy th,
.web-policy td { padding: 18px; border: 0; border-right: 1px solid var(--web-border); font-size: 15px; line-height: 26px; }
.web-policy th:last-child,
.web-policy td:last-child { border-right: 0; }
.web-policy th { font-size: 14px; line-height: 18px; font-weight: 600; }
.web-policy thead th { background: var(--web-background-muted); padding-block: 24px; }
.web-policy th:first-child { width: 26%; }
.web-policy th:nth-child(2) { width: 23%; }
.web-policy th:nth-child(3) { width: 28%; }
.web-policy tbody tr { height: 175px; }
.web-contact .page-card > .lede { max-width: 1160px; font-size: 17px; line-height: 26px; margin: 24px 0 36px; }
.web-contact .support-grid { margin-bottom: 48px; }
.web-contact .support-card { background: var(--web-background-card); border: 1px solid var(--web-border); border-radius: 16px; box-shadow: none; padding: 24px; }
.web-contact .support-card strong { font-family: var(--web-font-body); font-weight: 600; }
.web-contact .support-card p { margin-bottom: 0; }
.web-design .consent-banner {
  left: 40px;
  right: 40px;
  bottom: 24px;
  max-width: 1370px;
  max-height: calc(100dvh - 48px);
  min-height: 215px;
  margin-inline: auto;
  padding: 42px 40px 36px 96px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 50px;
  border: 1px solid var(--web-border);
  border-radius: 26px;
  background: var(--web-background-card);
  color: var(--web-text-primary);
  font-family: var(--web-font-body);
  overflow-y: auto;
  backdrop-filter: none;
}
.web-design .consent-banner__copy { display: block; min-width: 0; }
.web-design .consent-banner__title { margin: 0 0 13px; font: 400 24px/30px var(--web-font-heading); }
.web-design .consent-banner__copy p { max-width: 900px; margin: 0; color: var(--web-text-secondary); font-size: 17px; line-height: 26px; }
.web-design .consent-banner__copy a { display: inline-block; margin-top: 13px; color: var(--web-brand-primary); font-size: 17px; font-weight: 400; line-height: 26px; }
.web-design .consent-banner__copy a:hover { text-decoration: underline; text-underline-offset: 3px; }
.web-design .consent-banner__actions { display: flex; flex-wrap: nowrap; gap: 10px; }
.web-design .consent-banner__button { width: 135px; min-height: 48px; padding: 12px 16px; border-radius: 24px; font: 600 17px/21px var(--web-font-body); color: var(--web-text-primary); }
.web-design .consent-banner__button--secondary { border: 1px solid var(--web-border); background: var(--web-white); }
.web-design .consent-banner__button--primary { border: 1px solid transparent; background: var(--web-background-muted); }

@media (min-width: 1451px) {
  .web-hero__inner { max-width: 1076px; }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .web-hero__inner { margin-inline: 7%; }
  .web-hero__copy { width: 55%; }
  .web-hero__phone { left: auto; right: 3%; width: 230px; height: auto; top: 30px; }
  .web-hero h1 { font-size: 48px; line-height: 56px; }
  .web-founder { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 50px; }
  .web-founder__photo { width: 100%; height: auto; aspect-ratio: 1; }
  .web-sharing { gap: 80px; }
  .web-health__grid { gap: 32px; }
}

@media (max-width: 1024px) {
  .web-header__inner { grid-template-columns: 1fr auto; }
  .web-header__actions { display: none; }
  .web-header .nav-toggle { display: inline-flex; }
  .web-header .web-nav { display: none; }
}

@media (max-width: 760px) {
  .web-design .consent-banner { left: 16px; right: 16px; bottom: 16px; max-height: calc(100dvh - 32px); min-height: 380px; padding: 52px 22px 22px; grid-template-columns: minmax(0, 1fr); gap: 52px; border-radius: 22px; }
  .web-design .consent-banner__title { margin-bottom: 19px; }
  .web-design .consent-banner__copy a { margin-top: 25px; }
  .web-design .consent-banner__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .web-design .consent-banner__button { width: 100%; min-width: 0; }
  .web-container { width: calc(100% - 48px); }
  .web-header__inner { min-height: 88px; padding: 0 15px; grid-template-columns: 1fr auto; }
  .web-brand { gap: 10px; }
  .web-brand img { width: 48px; height: 48px; }
  .web-header__download { display: none; }
  .web-nav a { padding: 12px; background: var(--web-background-card); }
  .web-hero { min-height: 657px; }
  .web-hero__inner { padding: 125px 25px 78px 31px; }
  .web-hero__copy { width: auto; }
  .web-eyebrow { margin-bottom: 14px; }
  .web-hero h1 { font-size: 38px; line-height: 44px; margin-bottom: 21px; letter-spacing: -0.5px; }
  .web-hero__description { font-size: 16px; line-height: 23px; }
  .web-hero .web-downloads { margin-top: 63px; margin-left: -6px; flex-direction: column; gap: 24px; }
  .web-hero__phone { display: none; }
  .web-blur--secondary { display: none; }
  .web-blur--accent { left: 107px; top: -58px; }
  .web-blur--accent img { width: 550px; height: 550px; }
  .web-features { padding-block: 60px; }
  .web-features h2 { font-size: 34px; line-height: 41px; }
  .web-features h2 br { display: none; }
  .web-feature-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; }
  .web-feature { gap: 20px; }
  .web-treatments { padding-block: 28px; }
  .web-health { background: var(--web-brand-deep); margin-block: 24px; padding-block: 60px; }
  .web-health__wave { top: -24px; height: calc(100% + 48px); }
  .web-health__grid { grid-template-columns: 1fr; gap: 40px; }
  .web-health article > .web-icon { margin: 0; }
  .web-health h2 { margin: 12px 0 16px; }
  .web-health p { max-width: none; }
  .web-sharing { width: calc(100% - 48px); padding-block: 70px; min-height: 0; grid-template-columns: 1fr; gap: 50px; }
  .web-sharing h2 { margin-top: 20px; }
  .web-founder { grid-template-columns: 1fr; gap: 28px; padding-block: 0 64px; }
  .web-founder__photo { width: min(100%, 475px); height: auto; aspect-ratio: 1; }
  .web-founder h2 { margin: 0 0 24px; font-size: 34px; line-height: 41px; }
  .web-download-section { min-height: 0; padding: 64px 24px; }
  .web-download-section h2 { font-size: 38px; line-height: 44px; margin-bottom: 24px; }
  .web-download-section p { font-size: 17px; line-height: 26px; margin-bottom: 32px; }
  .web-download-section .web-downloads { align-items: center; flex-direction: column; }
  .web-footer { padding: 32px 24px; font-size: 14px; line-height: 20px; gap: 24px; }
  .web-policy .page-card { width: calc(100% - 48px); padding-block: 60px; }
  .web-policy .page-card h1 { font-size: 38px; line-height: 44px; }
  .web-policy .table-scroll { margin: 28px 0 0; }
  .web-policy th:first-child { width: 100%; }
  .web-policy tbody tr { height: auto; border-color: var(--web-border); background: var(--web-background-card); }
  .web-policy .table-scroll th[scope="row"] { background: var(--web-background-muted); }
  .web-policy .table-scroll td { border-color: var(--web-border); font-size: 15px; line-height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .web-design *, .web-design *::before, .web-design *::after { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .web-reveal-ready .web-hero__copy > *,
  .web-reveal-ready .web-hero__phone { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .web-scroll-reveal-ready :is(.web-treatments, #features-title, .web-features__intro, .web-feature, .web-health__grid article, .web-sharing article, .web-founder__photo, .web-founder__story, .web-download-section > *):not(.web-revealed) { opacity: 0; }
}