/* ==========================================================
   Dr. Beatriz Rodriguez · shared design system
   One file for every landing. Change a token here and every
   page that uses it changes on the next build.
   ========================================================== */
/* tokens live in brand.css */

html { scroll-behavior: smooth; }
html, body { margin: 0; overflow-x: hidden; background: var(--white); }
* { box-sizing: border-box; }
img { max-width: 100%; }
a { color: var(--teal); }
a:hover { color: var(--ink); }

/* ---------- layout ---------- */
.sec { padding: 56px 20px; }
.sec.dark { background: var(--ink); }
.sec.mist { background: var(--mist); }
.wrap { max-width: 1180px; margin: 0 auto; }
.narrow { max-width: 1080px; margin: 0 auto; }
.narrower { max-width: 860px; margin: 0 auto; }
.center { text-align: center; }

/* ---------- type ---------- */
.h1, .h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; text-wrap: balance; }
.h1 { font-weight: 500; letter-spacing: -0.02em; font-size: clamp(28px, 9.4vw, 40px); line-height: 1.08; }
.h1 em { font-style: italic; color: var(--sage); }
.h2 { letter-spacing: -0.01em; font-size: 26px; line-height: 1.12; }
.h2 em { font-style: italic; color: var(--teal); }
.dark .h1, .dark .h2, .dark .h2 em { color: var(--white); }
.intro { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--text); margin: 14px 0 0; text-wrap: pretty; }
.dark .intro { color: var(--on-dark); }
.ct { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.ctt { font-family: var(--sans); font-size: 16px; line-height: 1.3; font-weight: 800; color: var(--ink); margin: 0; text-wrap: pretty; }
.lbl { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: var(--teal); margin: 0; }
.note { font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--teal); margin: 0; }
.price { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--ink); margin: 8px 0 0; font-variant-numeric: lining-nums; }

/* ---------- buttons ---------- */
.btn {
  display: flex; width: 100%; min-height: var(--btn-height); padding: 10px 14px;
  align-items: center; justify-content: center; text-align: center;
  font-family: var(--ui); font-size: var(--btn-size); font-weight: 600; line-height: 1.25;
  letter-spacing: var(--btn-track); text-transform: var(--btn-case); text-decoration: none;
  border-radius: var(--btn-radius); border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.14); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--teal); color: var(--white); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--mist); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); transform: none; box-shadow: none; }
.dark .btn-outline { color: var(--white); border-color: var(--white); }
.dark .btn-outline:hover { background: var(--white); color: var(--ink); }
.btns { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }

/* ---------- hero ---------- */
.hero { padding-top: 32px; padding-bottom: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.eyebrow span { flex: none; width: 20px; height: 1.5px; background: var(--sage); }
.eyebrow p { font-family: var(--ui); font-size: clamp(9px, 2.6vw, 12px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; color: var(--ink); margin: 0; white-space: nowrap; }
.pills { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: clamp(0.02em, calc((100vw - 320px) * 0.0015), 0.12em); text-transform: uppercase; line-height: 1.5; color: var(--teal); margin: 20px 0 0; white-space: nowrap; }
.hero .btns { margin-top: 20px; }

.hero-ph { margin: 24px 0 40px; }
.hero-ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0%; border-radius: 16px; }

/* ---------- guide ---------- */
.guide { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.guide .intro { margin: 0; max-width: 60ch; }

/* ---------- product paths ---------- */
.path .intro { text-align: center; font-size: clamp(11.5px, 3.2vw, 13px); text-wrap: balance; }
.products { display: grid; grid-template-columns: minmax(0,1fr); gap: 36px; margin-top: 28px; }
.product { display: flex; flex-direction: column; position: relative; }
.product .media { position: relative; aspect-ratio: 4 / 3; margin: 0 0 16px; display: flex; align-items: flex-end; justify-content: center; }
.product .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 18px rgba(31,65,69,0.18)); }
.dark .product .media > img { filter: drop-shadow(0 14px 22px rgba(0,0,0,0.35)); }
.product .ctt { margin-top: 8px; }
.product .btn { margin-top: 12px; }
.product .btn::after { content: ""; position: absolute; inset: 0; }
.dark .product .ctt, .dark .product .price { color: var(--white); }
.dark .product .lbl { color: var(--mint); }
.status { font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ink); margin: 8px 0 0; }
.dark .status { color: var(--white); }
.xlink { font-family: var(--sans); font-size: 14px; line-height: 1.5; text-align: center; margin: 28px 0 0; }
.xlink a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dark .xlink a { color: var(--white); }

/* planner fan (product image made of pages) */
.fan { position: relative; width: 100%; height: 100%; }
.fan img { position: absolute; height: auto; border-radius: 2px; transform: rotate(var(--r)); box-shadow: 0 10px 24px rgba(31,65,69,0.16); }

/* polaroids */
.pols { display: flex; justify-content: center; align-items: flex-start; margin: 0 auto; width: 100%; max-width: 300px; }
.pol { position: relative; width: 48%; margin: 0; background: var(--white); padding: 8px 8px 0; border-radius: 2px; box-shadow: 0 14px 32px rgba(31,65,69,0.18); transform: rotate(var(--r, 0deg)); }
.pol + .pol { margin: 18px 0 0 -6%; }
.pol img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.pol figcaption { font-family: var(--hand); color: var(--ink); text-align: center; padding: 8px 4px 12px; line-height: 1.15; font-size: 13px; }

/* ---------- testimonials ---------- */
.tcar { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20px 4px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 32px; }
.tcar::-webkit-scrollbar { display: none; }
.tc { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px 22px; display: flex; flex-direction: column; scroll-snap-align: start; box-shadow: 0 6px 20px rgba(31,65,69,0.08); }
.stars { margin: 0 0 12px; font-size: 16px; letter-spacing: 3px; line-height: 1; color: var(--teal); }
.tc .ctt { margin-top: 14px; }
.tc .note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.tc .spacer { flex: 1; min-height: 18px; }
.tnav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.tarr { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--sage-2); background: var(--white); cursor: pointer; align-items: center; justify-content: center; padding: 0; }
.dots { display: flex; }
.dot { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0; }
.dot span { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--mint); transition: width .25s ease, background .25s ease; }
.dot.on span { width: 22px; background: var(--teal); }
.tpad { padding: 0 20px; }

/* ---------- how it works ---------- */
.tw-sub { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--on-dark); margin: 14px auto 0; text-align: center; }
.tw { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; margin: 36px auto 0; max-width: 980px; }
.tw-step { position: relative; display: grid; grid-template-columns: 12px minmax(0,1fr); column-gap: 18px; align-items: start; }
.tw-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--ink); position: relative; z-index: 2; margin-top: 16px; }
.tw-seg { position: absolute; left: 5.25px; top: 22px; width: 1.5px; height: calc(100% + 28px); background: rgba(185,211,206,0.55); }
.tw-step:last-child .tw-seg { display: none; }
.tw-line { display: none; }
.tw-num { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; color: var(--white); margin: 0 0 8px; font-variant-numeric: lining-nums; }
.tw-title { font-family: var(--sans); font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--white); margin: 0 0 8px; }
.tw-text { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--on-dark); margin: 0; text-wrap: pretty; }
.tw-btns { margin: 48px auto 0; max-width: 720px; }

/* ---------- faq ---------- */
.faqs { display: grid; gap: 10px; margin-top: 32px; }
.faq { background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ctt { font-size: clamp(11px, 3.05vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.faq summary svg { flex: none; width: 14px; height: 14px; transition: transform .25s ease; }
.faq[open] summary svg { transform: rotate(180deg); }
.faq .ct { margin: 0; padding: 0 14px 14px; }

/* ---------- final cta ---------- */
.final { text-align: center; display: flex; flex-direction: column; align-items: center; }
.final .btns { width: 100%; max-width: 720px; margin-top: 28px; }


/* ---------- reveal animation ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(0.22,1,0.36,1) var(--d,0s), transform .55s cubic-bezier(0.22,1,0.36,1) var(--d,0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ==================== desktop ==================== */
@media (min-width: 900px) {
  .sec { padding: 96px 40px; }
  .hero { padding-bottom: 0; }
  .h1 { font-size: clamp(40px, 4.1vw, 56px); line-height: 1.04; }
  .h2 { font-size: 48px; line-height: 1.1; }
  .intro { font-size: 18px; line-height: 1.6; }
  .ct { font-size: 16px; line-height: 1.6; }
  .ctt { font-size: 19px; }
  .lbl { font-size: 12px; }
  .note { font-size: 13px; }
  .btn { display: inline-flex; width: auto; padding: 10px 34px; }
  .btns { display: flex; flex-wrap: wrap; gap: 14px; }
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: start; }
  .hero-grid > div:first-child { padding-top: clamp(40px, 6.5vw, 96px); }
  .eyebrow { gap: 14px; margin-bottom: 20px; }
  .eyebrow span { width: 36px; }
  .eyebrow p { font-size: 12px; letter-spacing: 0.18em; }
  .hero .btns, .final .btns { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero .btn, .final .btn { width: 100%; padding: 10px 14px; }
  .pills { font-size: 12px; letter-spacing: 0.12em; }
  .hero-ph { margin: 0; display: flex; justify-content: center; }
  .hero-ph img { max-width: 560px; aspect-ratio: auto; border-radius: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%), linear-gradient(to bottom, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 100%), linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-composite: intersect; }
  .guide { grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: 64px; align-items: start; }
  .path { padding-top: 48px; padding-bottom: 48px; }
  .path .intro { font-size: 18px; margin-top: 8px; }
  .products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; max-width: 780px; margin: 24px auto 0; }
  .product .btn { width: 100%; }
  .xlink { margin-top: 12px; }
  .pol figcaption { font-size: 18px; }
  .tcar { grid-auto-columns: calc((100% - 128px) / 3); gap: 24px; padding: 0 40px 4px; scroll-padding: 0 40px; }
  .tarr { display: flex; }
  .tpad { padding: 0 40px; }
  .tw-sub { font-size: 18px; }
  .tw { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 44px; }
  .tw-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 18px; }
  .tw-num { order: 1; font-size: 76px; height: 96px; display: flex; align-items: center; justify-content: center; margin: 0; }
  .tw-dot { order: 2; margin: 0; }
  .tw-body { display: contents; }
  .tw-title { order: 3; margin-top: 22px; }
  .tw-text { order: 4; }
  .tw-seg { display: none; }
  .tw-line { display: block; position: absolute; left: 0; right: 0; top: 101.25px; height: 1.5px; background: rgba(185,211,206,0.55); z-index: 1; }
  .tw-btns { display: flex; justify-content: center; gap: 16px; }
  .faq summary { min-height: 56px; padding: 14px 18px; gap: 16px; }
  .faq summary .ctt { font-size: 19px; white-space: normal; }
  .faq .ct { padding: 0 18px 18px; }
}

/* ---------- product image entrance (planner fan + polaroids) ---------- */
.fan img { transition: transform 1.1s cubic-bezier(0.16,1,0.3,1), opacity .7s ease; transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.rv:not(.in) .fan img { opacity: 0; transform: translate(-6%, 10%) rotate(0deg) scale(0.94); }
.pol { transition: transform 1s cubic-bezier(0.16,1,0.3,1), opacity .7s ease; transition-delay: 200ms; }
.pol + .pol { transition-delay: 340ms; }
.rv:not(.in) .pol { opacity: 0; transform: translateY(14px) rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .fan img, .pol { transition: none; } .rv:not(.in) .fan img, .rv:not(.in) .pol { opacity: 1; transform: rotate(var(--r, 0deg)); } }

/* ==================== about ==================== */
.h1.big { font-weight: 400; font-size: 34px; line-height: 1.15; }
.ab-hero { display: grid; grid-template-columns: minmax(0,1fr); gap: 28px; }
.ab-hero .h1 em { color: var(--teal); }
.ab-ph { overflow: hidden; aspect-ratio: 1 / 1.08; }
.ab-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 80%, transparent 100%);
  mask-composite: intersect; }
.ab-body { margin-top: 20px; padding-left: 18px; border-left: 1px solid var(--sage-2); }
.ab-body .intro { margin: 0; }
.ab-tags { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; color: var(--teal); margin: 20px 0 0; }

.tl { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; margin-top: 32px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1.5px; background: var(--mint); }
.dark .tl::before { background: var(--sage); }
.st { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; padding-left: 30px; }
.st-dot { position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--white); }
.dark .st-dot { background: var(--white); box-shadow: 0 0 0 4px var(--ink); }
.st-ph { overflow: hidden; border-radius: 16px; }
.st-ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 300px; object-fit: cover; object-position: var(--fx,50%) var(--fy,50%); transform-origin: var(--fx,50%) var(--fy,50%); transform: scale(var(--fz,1)); }
.st .ctt { margin-top: 8px; }
.st .note { margin-top: 4px; font-weight: 600; color: var(--sage); }
.st .ct { margin: 12px 0 0; }
.dark .lbl { color: var(--mint); }
.dark .ctt { color: var(--white); }
.dark .st .note { color: var(--sage-2); }
.dark .ct { color: var(--on-dark); }
.exp .h2 em { color: var(--mint); }

.tm-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; margin-top: 32px; }
.tm-cat { margin: 0 0 16px; }
.tm-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tm-ph { display: flex; align-items: flex-end; justify-content: center; padding: 20px 20px 0; border-bottom: 1px solid var(--line); }
.tm-ph img { display: block; width: 100%; height: 320px; object-fit: cover; object-position: 50% 0; }
.tm-tx { padding: 22px 20px 24px; display: flex; flex-direction: column; }
.tm-tx .lbl { margin-top: 6px; letter-spacing: 0.14em; }
.tm-tx .ct { margin: 14px 0 0; }
.tm-tx .ct + .ct { margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.chip { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.3; color: var(--ink); background: var(--mist); border: 1px solid #CFE0DE; border-radius: 999px; padding: 6px 12px; }

.final.simple .h2 { max-width: 18em; }
.final.simple .btns { max-width: none; justify-content: center; }


@media (min-width: 900px) {
  .h1.big { font-size: 72px; line-height: 1.02; }
  .ab-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
  .ab-body { margin: 36px 0 0 64px; padding-left: 44px; }
  .tl { gap: 72px; margin-top: 56px; }
  .tl::before { left: 50%; margin-left: -0.75px; }
  .st { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 96px; padding-left: 0; align-items: stretch; }
  .st-dot { left: 50%; top: 50%; margin: -6px 0 0 -6px; }
  .st-ph { position: relative; width: min(100%, 360px); min-height: 300px; justify-self: end; }
  .st:nth-child(even) .st-ph { order: 2; justify-self: start; }
  .st > div:last-child { align-self: center; }
  .st-ph img { position: absolute; inset: 0; height: 100%; max-height: none; aspect-ratio: auto; }
  .tm-grid { margin-top: 40px; }
  .tm-card { flex-direction: row; }
  .tm-ph { flex: 0 0 300px; border-bottom: 0; border-right: 1px solid var(--line); padding: 24px 24px 0; }
  .tm-ph img { height: 380px; }
  .tm-tx { justify-content: center; padding: 32px 40px; }
  .final.simple .btns { display: flex; }
  .final.simple .btn { width: auto; padding: 10px 34px; }
}

/* ==================== optimize (consultation page) ==================== */
.h1.xl { font-weight: 400; font-size: 34px; line-height: 1.15; color: var(--white); }
.op-tags { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 22px 0 0; }
.op-tags span { display: flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #CFE4E0; }
.op-tags span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.op-hero .op-cta { margin-top: 30px; }
.op-pols { display: none; }
.op-g3 { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; margin-top: 32px; }
.op-card { border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--white); box-shadow: 0 10px 28px rgba(31,65,69,0.08); }
.op-card .ctt { margin: 14px 0 8px; }
.op-card .ct { margin: 0; }
.op-num { font-family: var(--serif); font-size: 36px; line-height: 1; color: var(--teal); margin: 0; font-variant-numeric: lining-nums; }
.op-check { display: flex; gap: 14px; align-items: flex-start; padding: 22px; }
.op-check svg { flex: none; }
.op-check .ctt { margin: 2px 0 6px; }
.op-btn { display: flex; justify-content: center; margin-top: 36px; }
.op-narrow { max-width: 40em; margin-left: auto; margin-right: auto; }
.op-narrow + .op-narrow { margin-top: 10px; }
.op-experts { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; margin: 40px auto 0; max-width: 760px; }
.op-expert { display: flex; flex-direction: column; align-items: center; text-align: center; }
.op-expert .lbl { margin-bottom: 18px; }
.op-expert .pol { width: min(300px, 82%); padding: 12px 12px 0; }
.op-expert + .op-expert .pol { margin: 0; }
.op-expert .pol figcaption { height: 58px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 19px; }
.op-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; color: var(--ink); margin: 26px 0 0; }
.op-expert .ct { margin: 8px 0 0; max-width: 24em; }
.op-plans { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 36px; align-items: stretch; }
.op-plan { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 30px 24px; box-shadow: 0 10px 28px rgba(31,65,69,0.08); display: flex; flex-direction: column; }
.op-price { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1; color: var(--ink); margin: 14px 0 0; font-variant-numeric: lining-nums; }
.op-plan > .ct { margin: 16px 0 0; }
.op-rule { height: 1px; background: var(--line); margin: 22px 0; }
.op-list { display: flex; flex-direction: column; gap: 12px; }
.op-li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--text); margin: 0; }
.op-li svg { margin-top: 2px; }
.op-sub { position: relative; padding-left: 20px; margin: 8px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--text); }
.op-sub::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; border: 1.2px solid var(--teal); }
.op-grow { flex: 1; min-height: 26px; }
.btn.op-full { width: 100%; }
.op-quote { max-width: 760px; margin: 0 auto; background: var(--white); border-radius: 20px; padding: 26px 24px; }
.op-qmark { font-family: var(--serif); font-size: 64px; line-height: 0.6; color: var(--sage-2); margin: 6px 0 10px; }
.op-pull { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--ink); margin: 0; text-wrap: pretty; }
.op-quote .ct { margin: 16px 0 0; color: var(--text); }
.op-hero .h1 em { color: var(--white); }
.op-quote .note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.op-values { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.op-values > div { background: var(--mist); border-radius: 18px; padding: 20px 16px; }
.op-vt { font-family: var(--serif); font-size: 22px; line-height: 1.15; color: var(--ink); margin: 0; }
.op-values .ct { margin: 8px 0 0; }
.faq-wrap .faq summary .ctt { white-space: normal; overflow: visible; font-size: 15px; line-height: 1.4; }
.faq-wrap .faq summary { padding: 14px 16px; }
@media (min-width: 900px) {
  .h1.xl { font-size: 88px; line-height: 0.98; letter-spacing: -0.02em; }
  .op-tags span { font-size: 12px; }
  .op-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 60px; align-items: center; }
  .op-pols { display: block; position: relative; height: 560px; }
  .op-pols .pol { position: absolute; width: 52%; padding: 12px 12px 16px; box-shadow: 0 18px 44px rgba(0,0,0,0.3); margin: 0; }
  .op-pols .pol:first-child { left: 3%; top: 0; z-index: 2; }
  .op-pols .pol + .pol { right: 1%; top: 110px; }
  .op-pols .pol figcaption { font-size: clamp(20px, 2vw, 26px); font-weight: 600; padding: 14px 4px 0; }
  .op-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
  .op-experts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 24px; margin-top: 44px; }
  .op-name { font-size: 30px; }
  .op-plans { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .op-plan { padding: 30px 26px; }
  .op-price { font-size: 72px; font-weight: 300; }
  .op-li, .op-sub { font-size: 16px; }
  .op-pull { font-size: 26px; }
  .op-values { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
  .op-vt { font-size: 24px; }
  .faq-wrap .faq summary .ctt { font-size: 17px; }
}

/* testimonials on dark + long text (consultation pages) */
.tc .tc-text { color: var(--text); margin: 12px 0 0; }
.tdark .tc .ctt { color: var(--ink); }
.tdark .tc .lbl { color: var(--teal); }
.tdark .dot span { background: rgba(255,255,255,0.3); }
.tdark .dot.on span { background: var(--mint); }
.op-lead { margin-top: 22px; }
.op-lead + .intro { margin-top: 10px; }

/* ==================== footer (every page, compact) ==================== */
.ft { background: var(--ink); color: var(--on-dark); border-top: 1px solid rgba(185,211,206,0.18); }
.ft-main { max-width: 1180px; margin: 0 auto; padding: 28px 20px 18px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 16px; }
.ft-h { font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); margin: 0 0 4px; }
.ft-col > a:not(.ft-contact) { display: flex; align-items: center; min-height: 32px; font-family: var(--sans); font-size: 13px; line-height: 1.3; color: var(--on-dark); text-decoration: none; }
.ft-col > a:not(.ft-contact):hover { color: var(--mint); }
.ft-connect { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ft-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 22px; border: 1.5px solid var(--white); border-radius: var(--btn-radius); font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: var(--btn-track); text-transform: var(--btn-case); color: var(--white); text-decoration: none; }
.ft-contact:hover { background: var(--white); color: var(--ink); }
.ft-icons { display: flex; gap: 8px; }
.ft-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(185,211,206,0.5); border-radius: 50%; color: var(--mint); }
.ft-icons a:hover { background: var(--mint); color: var(--ink); }
.ft-icons svg { width: 17px; height: 17px; }
.ft-bar { max-width: 1180px; margin: 0 auto; padding: 12px 20px 16px; border-top: 1px solid rgba(185,211,206,0.18); }
.ft-legal, .ft-disc { font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--sage-2); margin: 0; }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.ft-legal a { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(185,211,206,0.5); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 28px; }
.ft-disc { margin-top: 4px; }
@media (min-width: 900px) {
  .ft-main { grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 24px; padding: 32px 40px 20px; }
  .ft-connect { align-items: flex-end; }
  .ft-bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px 40px 16px; }
  .ft-disc { margin: 0; text-align: right; max-width: 60ch; }
}

/* ==================== contact ==================== */
.ctc { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; }
.ctc .h1 em { color: var(--teal); }
.ctc-intro .intro { margin-top: 16px; max-width: 34ch; }
.ctc-ph { margin-top: 24px; width: 100%; aspect-ratio: 16 / 10; max-height: 240px; overflow: hidden; border-radius: 18px; }
.ctc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.ctc-card { background: var(--mist); border-radius: 18px; padding: 26px 20px 24px; }
.ctc-card .intro { margin-top: 10px; }
.ctc-form { margin-top: 20px; }
.ctc-form form { display: grid; gap: 16px; }
.ctc-field { display: grid; gap: 6px; }
.ctc-field label { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.ctc-field input, .ctc-field textarea { width: 100%; font-family: var(--sans); font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--white); border: 1px solid #CFE0DE; border-radius: 12px; padding: 13px 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.ctc-field textarea { resize: vertical; min-height: 128px; }
.ctc-field input:focus, .ctc-field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(41,82,88,0.12); }
.ctc-field .bad { border-color: #A85A5A; }
.ctc-form .btn { width: 100%; border: 0; cursor: pointer; }
.ctc-form .btn:disabled { opacity: .6; cursor: wait; }
.ctc-err { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: #8A3F3F; margin: 0; }
.ctc-err:empty { display: none; }
.ctc-ok { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--ink); margin: 8px 0 0; }
.ctc-mail { margin-top: 24px; padding-left: 18px; border-left: 1px solid var(--sage-2); }
.ctc-mail .intro { margin-top: 6px; }
.ctc-mail a { font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .ctc { grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 80px; align-items: start; }
  .ctc-ph { margin-top: 36px; max-width: 380px; aspect-ratio: 4 / 5; max-height: none; }
  .ctc-card { padding: 40px 40px 36px; }
  .ctc-form .btn { width: auto; justify-self: start; padding: 10px 40px; }
  .ctc-ok { font-size: 28px; }
}

/* ==================== legal pages ==================== */
.legal { font-family: var(--sans); color: var(--text); font-size: 15px; line-height: 1.65; }
.legal .h1 { margin-bottom: 20px; }
.legal h2 { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: 24px; line-height: 1.2; margin: 36px 0 10px; }
.legal h3, .legal h4 { font-family: var(--sans); font-weight: 800; color: var(--ink); font-size: 16px; margin: 24px 0 6px; }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal a { overflow-wrap: anywhere; }
@media (min-width: 900px) { .legal { font-size: 16px; } .legal h2 { font-size: 30px; } }

/* ==================== Oct 24 2026 updates ==================== */
[id] { scroll-margin-top: 84px; }
/* buttons: always one line */
.btn { white-space: nowrap; }
@media (max-width: 899px) { .btn { font-size: clamp(12px, 3.7vw, var(--btn-size)); padding-left: 12px; padding-right: 12px; } }
@media (min-width: 900px) {
  .hero .btns, .final .btns { display: flex; flex-wrap: wrap; }
  .hero .btn, .final .btn { width: auto; flex: 1 1 auto; padding: 10px 28px; }
}
/* home hero: bigger title, photo edge to edge on mobile */
.hero .h1 { font-size: clamp(36px, 11.2vw, 46px); line-height: 1.04; }
@media (min-width: 900px) { .hero .h1 { font-size: clamp(52px, 5.2vw, 72px); } }
@media (max-width: 899px) {
  .hero-ph { margin: 24px -20px 0; }
  .hero-ph img { border-radius: 0; }
}
/* path titles bigger */
.path .h2 { font-size: 34px; }
@media (min-width: 900px) { .path .h2 { font-size: 60px; } }
/* product description */
.pdesc { margin: 8px 0 0; }
.dark .pdesc { color: var(--on-dark); }
/* "how it works" light version (home) */
.how-light .h2 { color: var(--ink); }
.how-light .h2 em { color: var(--teal); }
.how-light .tw-sub, .how-light .tw-text { color: var(--text); }
.how-light .tw-num, .how-light .tw-title { color: var(--ink); }
.how-light .tw-dot { background: var(--sage); box-shadow: 0 0 0 4px var(--mist); }
.how-light .tw-seg, .how-light .tw-line { background: var(--sage-2); }
/* about */
@media (max-width: 899px) {
  .ab-top { padding-top: 0; }
  .ab-ph { margin-top: -28px; }
}
.ab-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.ab-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--sage-2); border-radius: 999px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--teal); text-decoration: none; white-space: nowrap; }
.ab-links a:hover { background: var(--mist); color: var(--ink); }
/* contact */
.sec:has(> .ctc) { padding-top: 24px; }
.ctc-ph { aspect-ratio: 4 / 5; max-height: none; border-radius: 16px; }
.ctc-ph img { object-position: 50% 0%; }
.ctc-card { background: var(--ink); }
.ctc-card .h2, .ctc-card .h2 em { color: var(--white); }
.ctc-card .intro, .ctc-card .note { color: var(--on-dark); }
.ctc-card .ctc-field label { color: var(--mint); }
.ctc-card .ctc-field input, .ctc-card .ctc-field textarea { border-color: transparent; }
.ctc-card .ctc-field input:focus, .ctc-card .ctc-field textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(185,211,206,0.35); }
.ctc-card .btn-dark { background: var(--white); color: var(--ink); }
.ctc-card .btn-dark:hover { background: var(--mist); color: var(--ink); }
.ctc-card .ctc-err { color: #F3C4C4; }
.ctc-card .ctc-ok { color: var(--white); }
@media (min-width: 900px) { .sec:has(> .ctc) { padding-top: 56px; } }
/* IVF price quote */
.op-pq { margin: 36px auto 0; max-width: 720px; text-align: center; }
.op-pq blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.op-pq .note { margin-top: 10px; }
@media (min-width: 900px) { .op-pq blockquote { font-size: 28px; } }
/* Oct 24 (2) */
.pols .pol:first-child { z-index: 2; }
.pols-one .pol { width: 58%; }
.final-light { background: var(--white); }
.ft-contact { border: 1px solid rgba(185,211,206,0.5); color: var(--mint); }
.ft-contact:hover { background: var(--mint); color: var(--ink); }
/* Oct 24 (3) */
@media (min-width: 900px) { .tw { grid-template-columns: repeat(var(--n, 3), minmax(0,1fr)); } }
.op-sample { margin: 36px auto 0; max-width: 360px; text-align: center; }
.op-sample img { display: block; width: 100%; height: auto; }
.op-sample .note { margin-top: 8px; }
/* Oct 24 (4) */
.op-nt { display: flex; align-items: baseline; gap: 12px; }
.op-nt .ctt { margin: 0; }
.h1.xl.xxl { font-size: clamp(44px, 13vw, 56px); line-height: 1.02; }
@media (min-width: 900px) { .h1.xl.xxl { font-size: 104px; } }
.op-nt { margin-bottom: 8px; }
.op-nt { align-items: center; gap: 10px; }
.op-nt .op-num { font-size: 24px; line-height: 1.1; }
@media (max-width: 899px) { .op-g3 .op-card { padding: 20px 22px; } }
/* desktop: no big white gap under the header */
@media (min-width: 900px) {
  .sh-mob + .sec:not(.dark) { padding-top: 48px; }
  .hero-grid > div:first-child { padding-top: 24px; }
  .hero-grid { align-items: center; }
  .ab-top { padding-top: 24px; }
}
@media (min-width: 900px) {
  .sec.hero { padding-top: 24px; }
  .hero-grid { align-items: start; }
  .hero-grid > div:first-child { padding-top: 40px; }
  .ab-top { padding-top: 0; }
  .ab-hero { align-items: start; }
  .ab-ph { margin-top: -40px; }
  .ab-hero > div:last-child { padding-top: 48px; }
}
@media (min-width: 900px) {
  .sh-mob + .sec.hero { padding-top: 16px; }
  .hero-ph { margin-top: -24px; }
  .ab-ph { margin-top: -80px; }
  .ab-hero > div:last-child { padding-top: 40px; }
}
.ctc-note { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--on-dark); margin: 12px 0 0; opacity: .9; }
.ctc-note a { color: var(--mint); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px; font-family: var(--sans); font-weight: 700; }
.skip:focus { left: 12px; }
.guide-link { margin: 14px 0 0; font-family: var(--sans); font-size: 15px; }
.guide-link a { color: var(--mint); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* guide band: shorter, columns closer */
.sec.sec-guide{padding-top:44px;padding-bottom:44px}
@media (min-width:980px){.sec.sec-guide{padding-top:56px;padding-bottom:56px}.sec-guide .guide{grid-template-columns:auto minmax(0,1fr);gap:56px;max-width:1040px;align-items:center}}

/* italic accent in headings: sage on light backgrounds, white on dark */
.h1 em, .h2 em, .ab-hero .h1 em, .ctc .h1 em, .how-light .h2 em { color: var(--sage); }
.dark .h1 em, .dark .h2 em, .exp .h2 em, .op-hero .h1 em, .ctc-card .h2 em { color: var(--white); }
/* about hero: same top spacing as home, less white below */
@media (min-width: 900px) {
  .ab-ph { margin-top: -24px; }
  .ab-hero > div:last-child { padding-top: 40px; }
  .sec.ab-top { padding-bottom: 32px; }
}
@media (min-width: 900px) { .ab-hero > div:last-child { padding-top: 64px; } }

/* what this is / isn't (above pricing) */
.sx{max-width:760px;margin:0 auto 40px;display:grid;gap:14px}
.sx-card{background:#fff;border-radius:18px;padding:24px 26px}
.sx-h{font-family:var(--ui);font-weight:600;font-size:19px;color:var(--ink);margin:0 0 14px}
.sx-li{display:flex;gap:14px;align-items:flex-start;font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);margin:0 0 10px}
.sx-li:last-child{margin-bottom:0}
.sx-ic{flex:none;width:18px;font-weight:700;color:var(--ink)}
.sx-no .sx-h,.sx-no .sx-li{color:#7d8c8b}
.sx-no .sx-ic{color:#a9b5b3;font-weight:400}
.sx-link{text-align:center;margin:4px 0 0;font-family:var(--sans);font-size:14px}
.sx-link a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
@media (min-width:900px){.sx{grid-template-columns:1fr 1fr;max-width:980px}.sx-link{grid-column:1/-1}}

.sx{margin-bottom:56px}

/* consultation hero titles: two lines, sized to fit the longest line */
.op-hero .h1.t-ivf, .op-hero .h1.t-opt { line-height: 1; letter-spacing: -0.02em; }
.op-hero .h1.t-ivf em, .op-hero .h1.t-opt em { display: block; }
.op-hero .h1.t-ivf { font-size: min(68px, calc((100vw - 40px) / 4.4)); }
.op-hero .h1.t-opt { font-size: min(64px, calc((100vw - 40px) / 5.8)); }
@media (min-width: 900px) {
  .op-hero .h1.t-ivf { font-size: min(120px, 9vw); line-height: .98; }
  .op-hero .h1.t-opt { font-size: min(100px, 7.6vw); line-height: .98; }
}
/* what this is / isn't: own dark band between "What you'll get" and pricing */
.sx-sec .sx { margin-bottom: 0; }

/* ES home eyebrow: one line on phones (2026-10-25) */
@media (max-width: 899px) { .eyebrow.eb-fit p { letter-spacing: 0.04em; font-size: min(12px, calc((100vw - 74px) / 30.6)); } }
/* single hero photo (Optimize, 2026-10-26) */
@media (min-width: 900px) { .op-pols .pol:only-child { left: 14%; width: 66%; top: 10px; } }
.op-pols .pol figcaption:empty { display: none; }

/* Optimize hero on phones: photo visible, tags on one line (2026-10-26) */
@media (max-width: 899px) {
  .op-tags { flex-wrap: nowrap; gap: 0 10px; }
  .op-tags span { white-space: nowrap; gap: 5px; letter-spacing: 0.06em; font-size: min(11px, calc((100vw - 40px) / 39)); }
  .op-tags span::before { width: 5px; height: 5px; }
  .op-solo .op-pols { display: block; margin: 30px auto 0; max-width: 330px; }
  .op-pols .pol:only-child { width: 86%; margin: 0 auto; }
}

/* IVF hero on phones (ES): title in 3 lines, two small polaroids to its right (2026-10-26) */
@media (max-width: 899px) {
  .op-hero.op-duo { padding-top: 36px; padding-bottom: 36px; }
  .op-duo .op-hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); column-gap: 12px; row-gap: 0; align-items: start; }
  .op-duo .op-hero-grid > div:first-child { display: contents; }
  .op-duo .op-hero-grid > div:first-child > * { grid-column: 1 / -1; }
  .op-duo .op-hero-grid > div:first-child > .h1 { grid-column: 1; grid-row: 1; align-self: start; }
  .op-duo .op-pols { display: block; grid-column: 2; grid-row: 1 / span 2; position: relative; height: 262px; margin: 0; }
  .op-duo .op-pols .pol { position: absolute; width: 60%; padding: 4px 4px 0; margin: 0; box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
  .op-duo .op-pols .pol:first-child { left: 0; top: 30px; z-index: 2; }
  .op-duo .op-pols .pol + .pol { right: 0; top: 82px; margin: 0; }
  .op-duo .op-pols .pol figcaption { font-size: 9px; padding: 4px 2px 6px; }
  .op-duo .op-hero-grid > div:first-child > .op-lead { grid-column: 1; grid-row: 2; margin-top: 18px; font-size: 15px; line-height: 1.45; white-space: nowrap; }
}

/* Optimize single photo: polaroid bottom frame (2026-10-26) */
.op-pols .pol:only-child { padding-bottom: 30px; }
@media (min-width: 900px) { .op-pols .pol:only-child { padding-bottom: 46px; } }

/* less white space above the section after the consult hero, phones (2026-10-26) */
@media (max-width: 899px) { .op-hero + .sec { padding-top: 32px; } }

/* EN IVF title in 3 lines next to the photos (phones) */
@media (max-width: 899px) { .op-duo .op-hero-grid .h1.t-ivf { font-size: min(56px, calc((100vw - 52px) * 0.535 / 3.5)); line-height: 1; } .op-duo .op-hero-grid .h1.t-ivf em { display: block; } }

/* staggered hero lead only on phones (2026-10-26) */
@media (min-width: 900px) { .op-lead br { display: none; } }
.pol .cap-d{display:none}
@media (min-width:900px){.pol .cap-m{display:none}.pol .cap-d{display:inline}}
@media (min-width:900px){.op-pols .pol .cap-d{display:block;font-size:clamp(16px,1.45vw,20px);line-height:1.2}}
@media (min-width:900px){.hero .intro{margin-right:-40px}}