/* ==========================================================================
   Smile & Stay – content pages (Treatments, How it works, FAQ) and the
   "Plan your treatment" band on the home page. Uses the tokens in style.css.
   ========================================================================== */

/* ---------- page hero: in-page links under the title ---------- */
.ph-links { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ph-links a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); color: #fff; font: 600 14px var(--title); text-decoration: none; background: rgba(3,30,60,.12); transition: background .15s, border-color .15s; }
.ph-links a:hover { background: rgba(255,255,255,.16); border-color: #fff; }

/* ---------- home: "Plan your treatment" signpost band ---------- */
.explore { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ex-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-decoration: none; color: var(--body); box-shadow: var(--shadow-s); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ex-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--green); }
.ex-card .ex-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--smoke2); color: var(--green); }
.ex-card .ex-ic .ic, .ex-card .ex-ic svg { width: 24px; height: 24px; }
.ex-card h3 { margin: 4px 0 0; font: 700 19px/1.25 var(--title); color: var(--navy); }
.ex-card p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.ex-card .ex-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--title); color: var(--teal-700); }
.ex-card .ex-go .ic, .ex-card .ex-go svg { width: 16px; height: 16px; transition: transform .15s; }
.ex-card:hover .ex-go .ic, .ex-card:hover .ex-go svg { transform: translateX(3px); }
@media (max-width: 1000px) { .explore { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .explore { grid-template-columns: 1fr; } }

/* ---------- treatments: quick links ---------- */
.tr-jump { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin-bottom: 36px; }
.tr-jump::-webkit-scrollbar { display: none; }
.tr-jump a { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; font: 600 14px var(--title); color: var(--navy); white-space: nowrap; transition: border-color .15s, transform .15s; }
.tr-jump a:hover { border-color: var(--green); transform: translateY(-1px); }
.tr-jump img { width: 38px; height: 38px; object-fit: contain; }

/* ---------- treatments: guide cards ---------- */
.tr-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tg-card { scroll-margin-top: 110px; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-s); }
.tg-top { display: flex; gap: 16px; align-items: flex-start; }
.tg-pic { flex: none; width: 76px; height: 76px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(160deg, #f3fbf9, #eef5fb); }
.tg-pic img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(5,56,99,.15)); }
.tg-card h3 { margin: 2px 0 6px; font: 700 21px/1.2 var(--title); color: var(--navy); }
.tg-desc { margin: 0; font-size: 15px; line-height: 1.5; }
.tg-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tg-facts li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: var(--smoke); }
.tg-facts li.wide { grid-column: 1 / -1; }
.tg-facts .ic, .tg-facts svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.tg-facts small { display: block; font-size: 12px; color: var(--muted); }
.tg-facts b { display: block; font: 600 14.5px/1.35 var(--title); color: var(--navy); }
.tg-time { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }
.tg-price { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 22px; padding: 14px 16px; border-radius: 16px; border: 1px solid #dcebee; background: linear-gradient(160deg, #f3fbf9 0%, #eef5fb 100%); }
.tg-price small { display: block; font-size: 12px; color: var(--muted); }
.tg-price b { display: block; font: 700 20px/1.15 var(--title); color: var(--navy); }
.tg-price s { display: block; font: 600 15px/1.3 var(--title); color: var(--muted); text-decoration-thickness: 1.5px; }
.tg-price > span { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.tg-price.q b { font-size: 17px; }
.tg-go { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tg-link { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--title); color: var(--teal-700); text-decoration: none; }
.tg-link .ic, .tg-link svg { width: 16px; height: 16px; }
.tr-note { margin-top: 22px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .tr-guide { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tg-card { padding: 18px; } .tg-facts { grid-template-columns: 1fr; } }

/* ---------- FAQ page: grouped questions ---------- */
.faq-groups { display: grid; gap: 46px; max-width: 860px; }
.faq-groups h2 { margin: 0 0 14px; font: 700 24px var(--title); color: var(--navy); }
.faq-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding: 22px 24px; border-radius: var(--r); background: var(--smoke); }
.faq-more b { display: block; font: 700 18px var(--title); color: var(--navy); }
.faq-more span { font-size: 14.5px; }

/* ---------- home: short FAQ ---------- */
.faq-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font: 600 15px var(--title); color: var(--teal-700); text-decoration: none; }
.faq-all .ic, .faq-all svg { width: 16px; height: 16px; }

/* ---------- the patient journey in 4 steps (#how on Home and How it works) ---------- */
.j4 { --j4-dot: 34px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.j4::before { content: ""; position: absolute; top: calc(var(--j4-dot) / 2 - 2px); left: 12.5%; right: 12.5%; height: 4px; border-radius: 2px; background: #e3eaef; }
.j4 > li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.j4 > li.on::after { content: ""; position: absolute; top: calc(var(--j4-dot) / 2 - 2px); left: 50%; width: calc(100% + 24px - var(--j4-dot) / 2 - 10px); height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--green), #5fd0c6); }
.j4-n { position: relative; z-index: 1; width: var(--j4-dot); height: var(--j4-dot); border-radius: 50%; display: grid; place-items: center; background: #e3eaef; color: var(--navy); font: 700 14px/1 var(--title); box-shadow: 0 0 0 6px var(--smoke); }
.j4 > li.on .j4-n { background: var(--action); color: #fff; box-shadow: 0 0 0 6px var(--smoke), 0 6px 16px -6px rgba(34, 179, 168, .8); }
.j4-ic { margin: 22px 0 16px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; gap: 0; background: #fff; color: var(--navy); box-shadow: 0 10px 28px -14px rgba(5, 56, 99, .35); transition: transform .2s, color .2s; }
.j4-ic .ic, .j4-ic svg { width: 36px; height: 36px; stroke-width: 1.6; }
.j4-ic.j4-two { grid-auto-flow: column; padding: 0 14px; }
.j4-ic.j4-two .ic, .j4-ic.j4-two svg { width: 28px; height: 28px; }
.j4 > li:hover .j4-ic { transform: translateY(-3px); color: var(--green); }
.j4 h4 { margin: 0 0 8px; font: 700 20px/1.2 var(--title); color: var(--navy); }
.j4 p { margin: 0; max-width: 270px; font-size: 15px; line-height: 1.55; color: var(--body); }
.j4-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 14px var(--title); color: var(--teal-700); text-decoration: none; }
.j4-go .ic, .j4-go svg { width: 16px; height: 16px; transition: transform .15s; }
.j4-go:hover .ic, .j4-go:hover svg { transform: translateX(3px); }
.j4-links { display: inline-flex; gap: 18px; }
.j4-links .j4-go::after { content: "→"; margin-left: 2px; }
@media (max-width: 900px) {
  .j4 { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin: 0 auto; }
  .j4::before { top: 0; bottom: 0; left: calc(var(--j4-dot) / 2 - 2px); right: auto; width: 4px; height: auto; }
  .j4 > li { display: grid; grid-template-columns: var(--j4-dot) 64px 1fr; grid-template-rows: auto auto auto; column-gap: 16px; align-items: start; text-align: left; padding: 0 0 30px; }
  .j4 > li:last-child { padding-bottom: 0; }
  .j4 > li.on::after { display: none; }
  .j4-n { grid-row: 1 / 4; }
  .j4-ic { grid-row: 1 / 4; margin: 0; width: 64px; height: 64px; }
  .j4-ic .ic, .j4-ic svg { width: 28px; height: 28px; }
  .j4-ic.j4-two { padding: 0 10px; }
  .j4-ic.j4-two .ic, .j4-ic.j4-two svg { width: 22px; height: 22px; }
  .j4 h4 { margin: 4px 0 6px; font-size: 18px; }
  .j4 p { max-width: none; font-size: 14.5px; }
  .j4-go { margin-top: 8px; }
}

/* ---------- home: "What you could save" – quick price cards (assets/js/savings.js) ---------- */
#savings { padding-top: 44px; }
#savings .sec-head { margin-bottom: 30px; }
.sv-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.sv-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 18px 12px 16px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); text-align: center; }
.sv-pic { align-self: center; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #eef8fb 0 60%, transparent 61%); }
.sv-pic img { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(5,56,99,.18)); }
.sv-card h3 { margin: 4px 0 0; font: 700 18px/1.15 var(--title); color: var(--navy); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.sv-sub { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; color: var(--body); min-height: 38px; }
.sv-unit { margin: 0; font: 600 11.5px var(--title); letter-spacing: .02em; color: var(--muted); }
.sv-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; min-height: 52px; padding: 6px 10px; border-radius: 12px; text-align: left; }
.sv-row.uk { background: var(--plum-50); } .sv-row.hu { background: var(--blue-50); } .sv-row.tr { background: var(--sand-50); }
.sv-flag { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(5,56,99,.1); }
.sv-flag svg { width: 100%; height: 100%; display: block; transform: scale(1.5); }
.sv-row.hu .sv-flag svg, .sv-row.tr .sv-flag svg { transform: scale(1.6); }
.sv-cty { font: 600 13px var(--title); color: var(--navy); }
.sv-p { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.1; }
.sv-p small { font-size: 11px; color: var(--muted); }
.sv-p strong { font: 800 18px/1.15 var(--title); color: var(--navy); }
.sv-p em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.sv-save { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 14px; background: #e3f6f3; color: var(--green); }
.sv-pig svg { width: 40px; height: 40px; }
.sv-save small, .sv-save em { display: block; font-style: normal; font-size: 12px; color: var(--navy); }
.sv-save strong { display: block; font: 700 28px/1 var(--title); color: var(--highlight); }
.sv-photo { display: block; height: 96px; border-radius: 14px; overflow: hidden; background: var(--smoke); }
.sv-photo img { width: 100%; height: 100%; object-fit: cover; }
.sv-pros { margin: 4px 0 6px; padding: 0 4px; list-style: none; display: grid; gap: 6px; text-align: left; }
.sv-pros li { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 1.3; color: var(--body); }
.sv-pros .ic, .sv-pros svg { flex: none; width: 16px; height: 16px; margin-top: 1px; padding: 2px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3; }
.sv-go { margin-top: auto; justify-content: center; }
.sv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 22px; font-size: 13px; color: var(--muted); }
.sv-foot a { display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--title); color: var(--teal-700); text-decoration: none; white-space: nowrap; }
.sv-foot a .ic, .sv-foot a svg { width: 16px; height: 16px; }
@media (max-width: 1280px) { .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { #savings { padding-top: 32px; } .sv-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(240px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .sv-grid::-webkit-scrollbar { display: none; } .sv-card { scroll-snap-align: start; } }

/* card header = the same tile as the treatment row on the Clinics pages (nav.js .fb2-t): 104px, 46px picture, 13px title */
.sv-head { height: 107px; padding: 10px 8px; border: 1px solid #e3e9ee; border-radius: 14px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.sv-head img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(5,56,99,.15)); }
.sv-card .sv-head h3 { margin: 0; min-height: 0; font: 800 13px/1.2 var(--title); color: var(--navy); }
.sv-card { padding-top: 12px; }
.sv-sub { min-height: 38px; margin-top: 2px; }

/* treatment only / + flights & hotel switch above the savings cards */
.sv-switch { display: inline-flex; gap: 4px; margin: 0 0 18px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: var(--shadow-s); }
.sv-switch button { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 600 14px var(--title); color: var(--navy); cursor: pointer; transition: background .15s, color .15s; }
.sv-switch button .ic { width: 16px; height: 16px; }
.sv-switch button:hover { background: var(--smoke); }
.sv-switch button.on { background: var(--action); color: #fff; }
.sv-unit { min-height: 30px; display: flex; align-items: center; justify-content: center; line-height: 1.25; }

/* ---------- savings: UK · Hungary · Turkey country cards + route map (on the same 6-column grid as the cards below) ---------- */
.sv-tag { margin: 8px 0 0; font-size: 18px; color: var(--body); }
.svh { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.svh-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 330px; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-s); }
.svh-card.uk { grid-column: span 1; }
.svh-card.uk .svh-top { flex-direction: column; align-items: flex-start; gap: 10px; }
.svh-card.hu { grid-column: span 2; background: linear-gradient(160deg, var(--blue-50) 0%, #fff 55%); border-color: var(--blue-100); }
.svh-card.tr { grid-column: span 2; background: linear-gradient(160deg, var(--sand-50) 0%, #fff 55%); border-color: var(--sand-100); }
.svh-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.svh-top > div { min-width: 0; flex: 1; }
.svh-flag { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(5,56,99,.35); }
.svh-flag svg { width: 100%; height: 100%; display: block; transform: scale(1.5); }
.svh-card h3 { margin: 0; font: 700 19px/1.15 var(--title); color: var(--navy); }
.svh-top p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.3; color: var(--body); }
.svh-badge { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 5px; border-radius: 999px; font: 600 12.5px var(--title); white-space: nowrap; }
.svh-badge svg { width: 20px; height: 20px; }
.svh-badge.eu { background: #e9f1f7; color: var(--navy); }
.svh-badge.tr { padding-left: 9px; background: var(--sand-100); color: var(--sand-700); }
.svh-badge.tr svg { width: 16px; height: 16px; }
.svh-price { position: relative; z-index: 1; margin-top: 18px; line-height: 1.05; }
.svh-price small { display: block; font-size: 14px; color: var(--body); }
.svh-price strong { display: block; margin: 2px 0 4px; font: 800 clamp(30px, 2.8vw, 42px)/1 var(--title); letter-spacing: -.02em; color: var(--navy); }
.svh-card.hu .svh-price strong { color: var(--navy); }
.svh-card.tr .svh-price strong { color: var(--navy); }
.svh-price span { font-size: 13.5px; color: var(--body); }
.svh-pros { position: relative; z-index: 1; max-width: 62%; margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.svh-pros li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.3; color: var(--navy); }
.svh-pros .ic, .svh-pros svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3; }
.svh-card.tr .svh-pros .ic, .svh-card.tr .svh-pros svg { background: var(--sand-400); }
.svh-photo { position: absolute; right: 0; bottom: 0; background: center / cover no-repeat; pointer-events: none; }
.svh-card.uk .svh-photo { left: 0; height: 40%; -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); }
.svh-card.hu .svh-photo, .svh-card.tr .svh-photo { top: 34%; width: 48%; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.svh-map { position: relative; grid-column: span 1; min-height: 330px; border-radius: 22px; background: radial-gradient(circle at 30% 20%, #e6f3fb 0, #f2f8fc 45%, #f7fafc 100%); overflow: hidden; }
.svh-map::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(#cfe2ee 1.2px, transparent 1.3px); background-size: 12px 12px; }
.svh-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.svh-pt { position: absolute; width: 30px; height: 42px; transform: translate(-50%, -100%); filter: drop-shadow(0 4px 6px rgba(5,56,99,.3)); }
.svh-pt > svg { width: 100%; height: 100%; display: block; }
.svh-pf { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
.svh-pf svg { width: 100%; height: 100%; display: block; transform: scale(1.6); }
.svh-pt.uk { left: 30%; top: 24%; } .svh-pt.hu { left: 67%; top: 47%; } .svh-pt.tr { left: 71%; top: 77%; }
.svh-pin { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.svh-pin.uk { left: 40%; top: 15%; } .svh-pin.hu { left: 30%; top: 50%; } .svh-pin.tr { left: 36%; top: 80%; }
.svh-pin b { font: 700 14px var(--title); color: var(--navy); }
.svh-pin em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 600 12px var(--title); font-style: normal; white-space: nowrap; box-shadow: 0 4px 12px -6px rgba(5,56,99,.3); }
.svh-pin em .ic { width: 13px; height: 13px; }
.svh-pin.hu em { background: var(--blue-100); color: var(--blue-700); }
.svh-pin.tr em { background: var(--sand-100); color: var(--sand-700); }
@media (max-width: 1280px) {
  .svh { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svh-card.uk, .svh-map { grid-column: span 1; }
  .svh-card.hu, .svh-card.tr { grid-column: span 2; }
  .svh-card.uk { grid-row: span 1; }
}
@media (max-width: 760px) {
  .svh { grid-template-columns: 1fr; }
  .svh-card.uk, .svh-card.hu, .svh-card.tr, .svh-map { grid-column: auto; }
  .svh-card { min-height: 0; }
  .svh-card.uk { min-height: 340px; }
  .svh-pros { max-width: 62%; }
  .svh-map { display: none; }
  .sv-tag { font-size: 16px; }
}

/* home: the Clinics-page treatment row under the hero (tiles are links here) */
.fb2-home { border-bottom: 0; }
.fb2-home .fb2-t { text-decoration: none; }

/* treatment row + price tiles: one table, same tile size; scrolls as one block on narrow screens */
.fb2-tbl { display: grid; gap: 10px; }
.fb2-home .fb2-r1 { overflow: visible; padding-bottom: 0; }
.fb2-pr { margin-top: 0; }
#fb2-prices { display: grid; gap: 10px; }
.fb2-c { cursor: default; }
.fb2-c:hover { transform: none; border-color: #e3e9ee; box-shadow: none; }
.fb2-c small { font-size: 12px; color: #5f6a80; }
.fb2-c strong { font: 800 22px/1 var(--title); color: var(--navy, #053863); }
.fb2-pr.uk .fb2-c { background: #f6f9fc; }
.fb2-pr.hu .fb2-c { background: var(--blue-50); } .fb2-pr.hu strong { color: var(--blue-700); }
.fb2-pr.tr .fb2-c { background: var(--sand-50); } .fb2-pr.tr strong { color: var(--sand-700); }
.fb2-flag { overflow: hidden; background: none; box-shadow: 0 0 0 1px rgba(5,56,99,.12); }
.fb2-home .fb2-ic.fb2-flag svg { width: 100%; height: 100%; display: block; }
.fb2-home .fb2-t { height: 107px; min-height: 0; }
@media (max-width: 760px) { .fb2-home .fb2-t { height: 115px; } }
.fb2-x { visibility: hidden; }
@media (max-width: 1100px) { .fb2-tbl { overflow-x: auto; scrollbar-width: none; } .fb2-tbl::-webkit-scrollbar { display: none; } .fb2-home .fb2-r1 { overflow: visible; } }
/* price tiles: half the height of the treatment tiles, same style (content on one line) */
.fb2-home #fb2-prices .fb2-t { height: 53.5px; flex-direction: row; gap: 8px; padding: 6px 8px; }
.fb2-home #fb2-prices .fb2-ic.fb2-flag { width: 28px; height: 28px; }
.fb2-home #fb2-prices small { font-size: 11.5px; }
.fb2-home #fb2-prices strong { font-size: 18px; }
.fb2-home #fb2-prices .fb2-lbl b { font-size: 13px; }
@media (max-width: 760px) { .fb2-home #fb2-prices .fb2-t { height: 57.5px; gap: 5px; padding: 6px 4px; } .fb2-home #fb2-prices .fb2-c:not(.fb2-lbl) { flex-direction: column; gap: 2px; } .fb2-home #fb2-prices .fb2-ic.fb2-flag { width: 22px; height: 22px; } .fb2-home #fb2-prices strong { font-size: 16px; } }

/* tooltip on the home treatment tiles (text set by savings.js) */
.fb2-home .fb2-t[data-tip] { position: relative; }
.fb2-home .fb2-t[data-tip]::before { content: attr(data-tip); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 10px); width: 220px; padding: 10px 12px; border-radius: 12px; background: var(--navy, #053863); color: #fff; font: 500 13px/1.4 var(--text); text-align: center; white-space: pre-line; box-shadow: 0 12px 28px -10px rgba(5,56,99,.5); opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.fb2-home .fb2-t[data-tip]::after { content: ""; position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 4px); border: 6px solid transparent; border-top-color: var(--navy, #053863); transform: translateX(-50%); opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
.fb2-home .fb2-t[data-tip]:hover::before, .fb2-home .fb2-t[data-tip]:focus-visible::before { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.fb2-home .fb2-t[data-tip]:hover::after, .fb2-home .fb2-t[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
.fb2-home .fb2-t.on::after { content: none; }

/* Filters column: average saving vs UK for Hungary and Turkey */
.fb2-home #fb2-prices .fb2-avg { background: #e3f6f3; border-color: #cdeee8; }
.fb2-home #fb2-prices .fb2-pr.tr .fb2-avg { background: var(--sand-100); border-color: var(--sand-200); }
.fb2-home #fb2-prices .fb2-pr.uk .fb2-avg { background: #eef3f8; border-color: #dfe7ef; }

/* photo + benefits + Learn more under each treatment column */
.fb2-home #fb2-prices .fb2-ben .fb2-t { height: auto; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 10px; padding: 8px 8px 12px; text-align: left; background: #fff; }
.fb2-ben .fb2-x { visibility: hidden; }
.fb2-ph { display: block; aspect-ratio: 310 / 182; border-radius: 10px; overflow: hidden; background: var(--smoke); }
.fb2-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb2-bx ul { margin: 0; padding: 0 2px; list-style: none; display: grid; gap: 6px; }
.fb2-bx li { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.3; color: var(--body); }
.fb2-bx li .ic, .fb2-bx li svg { flex: none; width: 15px; height: 15px; margin-top: 1px; padding: 2px; border-radius: 50%; background: var(--action); color: #fff; stroke-width: 3; }
.fb2-go { margin-top: auto; justify-content: center; height: 36px; padding: 0 10px; font-size: 12px; gap: 6px; }
.fb2-go .ic, .fb2-go svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .fb2-bx li { font-size: 11.5px; } .fb2-go { font-size: 11px; padding: 0 6px; } }
.fb2-tbl, #fb2-prices { grid-template-columns: minmax(0, 1fr); }
.fb2-ph img { max-width: 100%; }
@media (max-width: 760px) { .fb2-home #fb2-prices .fb2-ben .fb2-t { height: auto; flex-direction: column; padding: 6px 6px 10px; } }
.fb2-home #fb2-prices .fb2-ph img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.fb2-home #fb2-prices .fb2-go { height: 38px; padding: 0 10px; white-space: nowrap; text-transform: none; letter-spacing: 0; font: 600 13.5px var(--title); }
@media (max-width: 760px) { .fb2-home #fb2-prices .fb2-go { font-size: 12px; padding: 0 4px; } .fb2-home #fb2-prices .fb2-go .ic, .fb2-home #fb2-prices .fb2-go svg { display: none; } }
@media (max-width: 1100px) { .fb2-tbl { padding-bottom: 10px; } }
/* benefits row: no outer box – the photo is the tile; ticks and button sit underneath on the page */
.fb2-home #fb2-prices .fb2-ben .fb2-t.fb2-bx { padding: 0; border: 0; background: transparent; box-shadow: none; gap: 12px; }
.fb2-home #fb2-prices .fb2-bx .fb2-ph { border: 1px solid #e3e9ee; border-radius: 14px; }
.fb2-home #fb2-prices .fb2-bx ul { padding: 0 2px; }
.fb2-home #fb2-prices .fb2-ben .fb2-t.fb2-x { padding: 0; }
/* Learn more = the hero's "Compare treatment options" button style */
.fb2-home #fb2-prices .fb2-go { height: 40px; border: 0; border-radius: 999px; background: var(--action); color: #fff; box-shadow: 0 12px 26px -10px rgba(34, 179, 168, .8); font: 600 13.5px var(--title); transition: transform .15s; }
.fb2-home #fb2-prices .fb2-go:hover { transform: translateY(-1px); }

/* flags fill their circles everywhere (SVGs are cropped with preserveAspectRatio slice in savings.js) */
.sv-flag svg, .sv-row.hu .sv-flag svg, .sv-row.tr .sv-flag svg, .svh-flag svg { transform: none; }
/* treatment cards: country rows centred – flag and name, then the price */
.sv-row { grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 8px; row-gap: 2px; text-align: center; }
.sv-row .sv-p { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: baseline; gap: 5px; text-align: center; }
/* table: country names centred (United Kingdom wraps onto two lines) */
.fb2-home #fb2-prices .fb2-lbl b { text-align: center; line-height: 1.15; }
.fb2-home #fb2-prices .fb2-ic.fb2-flag, .sv-flag { flex: none; }

/* ---------- price table look (Oct 2026 design): soft tinted tiles, stacked "From / price", flag + name + note, "Save up to" column ---------- */
.fb2-home #fb2-prices .fb2-pr .fb2-t { border: 1px solid rgba(5,56,99,.06); box-shadow: 0 6px 16px -12px rgba(5,56,99,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.fb2-home #fb2-prices .fb2-pr.uk .fb2-t { background: linear-gradient(180deg, #f6f9fd, #eef3fa); }
.fb2-home #fb2-prices .fb2-pr.hu .fb2-t { background: linear-gradient(180deg, #f3fbf8, #e9f6f2); }
.fb2-home #fb2-prices .fb2-pr.tr .fb2-t { background: linear-gradient(180deg, var(--sand-50), var(--sand-100)); }
/* price tiles: "From" over the price */
.fb2-home #fb2-prices .fb2-pc { flex-direction: column; gap: 1px; }
.fb2-home #fb2-prices .fb2-pc small { font: 500 11px/1 var(--title); color: #5f6a80; }
.fb2-home #fb2-prices .fb2-pc strong { font: 800 19px/1.05 var(--title); letter-spacing: -.01em; }
.fb2-home #fb2-prices .fb2-pr.uk strong { color: var(--uk); }
.fb2-home #fb2-prices .fb2-pr.hu strong { color: var(--blue-700); }
.fb2-home #fb2-prices .fb2-pr.tr strong { color: var(--sand-700); }
/* country tile: flag on the left, name + note on the right */
.fb2-home #fb2-prices .fb2-lbl { justify-content: flex-start; gap: 8px; padding: 4px 8px; text-align: left; }
.fb2-home #fb2-prices .fb2-lbl .fb2-ic.fb2-flag { width: 34px; height: 34px; box-shadow: 0 2px 6px -2px rgba(5,56,99,.35); }
.fb2-lt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fb2-home #fb2-prices .fb2-lt b { font: 700 13px/1.1 var(--title); color: var(--navy, #053863); text-align: left; }
.fb2-lt em { font-style: normal; font-size: 9.5px; line-height: 1.15; color: #5f6a80; }
/* save column */
.fb2-home #fb2-prices .fb2-avg { flex-direction: column; gap: 0; padding: 3px 4px; }
.fb2-home #fb2-prices .fb2-avg small { font: 600 9.5px/1.1 var(--title); color: #3c5266; }
.fb2-home #fb2-prices .fb2-avg strong { font: 800 20px/1 var(--title); letter-spacing: -.02em; }
.fb2-home #fb2-prices .fb2-pr.uk .fb2-avg { background: linear-gradient(180deg, #f1f6fc, #e7eef8); }
.fb2-home #fb2-prices .fb2-pr.uk .fb2-avg strong { font-weight: 600; color: var(--uk); }
.fb2-home #fb2-prices .fb2-pr.hu .fb2-avg { background: linear-gradient(180deg, #e2f6f1, #cdeee6); border-color: rgba(35,133,122,.15); }
.fb2-home #fb2-prices .fb2-pr.hu .fb2-avg small { color: var(--blue-700); }
.fb2-home #fb2-prices .fb2-pr.tr .fb2-avg { background: linear-gradient(180deg, var(--sand-100), var(--sand-100)); border-color: rgba(224,178,107,.15); }
.fb2-home #fb2-prices .fb2-pr.tr .fb2-avg small { color: var(--sand-700); }
@media (max-width: 760px) {
  .fb2-home #fb2-prices .fb2-lbl { gap: 5px; padding: 4px 5px; }
  .fb2-home #fb2-prices .fb2-lbl .fb2-ic.fb2-flag { width: 24px; height: 24px; }
  .fb2-home #fb2-prices .fb2-lt b { font-size: 11.5px; }
  .fb2-lt em { display: none; }
  .fb2-home #fb2-prices .fb2-pc strong { font-size: 16px; }
}
.fb2-home #fb2-prices .fb2-lbl { gap: 6px; padding: 4px 6px; }
.fb2-home #fb2-prices .fb2-lbl .fb2-ic.fb2-flag { width: 30px; height: 30px; }
.fb2-lt em { font-size: 9px; white-space: nowrap; }
.fb2-home #fb2-prices .fb2-lt b { font-size: 12.5px; line-height: 1.05; }
@media (max-width: 760px) { .fb2-home #fb2-prices .fb2-lbl .fb2-ic.fb2-flag { width: 24px; height: 24px; } .fb2-home #fb2-prices .fb2-lt b { font-size: 11.5px; } }

/* "How much you can save" tile (design Oct 2026): mint card, chart icon, teal "save", note */
.fb2-home .fb2-t.fb2-save { gap: 3px; padding: 6px 6px; background: linear-gradient(180deg, #f3fcfa, #eaf8f5); border-color: #c9eee8; box-shadow: 0 8px 20px -14px rgba(31,179,163,.6); }
.fb2-home .fb2-t.fb2-save:hover { border-color: #22b3a8; }
.fb2-home .fb2-save .fb2-ic.fb2-chart { width: 46px; height: 46px; background: radial-gradient(circle at 50% 45%, #dff6f2 0, #e8f8f5 70%); }
.fb2-home .fb2-save .fb2-ic.fb2-chart svg { width: 38px; height: 38px; }
.fb2-home .fb2-save b { font: 800 12.5px/1.1 var(--title); color: var(--navy, #053863); text-align: center; }
.fb2-home .fb2-save b em { font-style: normal; color: var(--teal-700); }
.fb2-home .fb2-save small { font: 500 9.5px/1.15 var(--title); color: #4a6178; text-align: center; }
@media (max-width: 760px) { .fb2-home .fb2-save small { display: none; } }
.fb2-home .fb2-t.fb2-save b { display: block; }

/* benefits row in the same look as the price table above: tile-framed photo, Outfit navy text, teal ticks, softer button */
.fb2-home #fb2-prices .fb2-bx .fb2-ph { border: 1px solid rgba(5,56,99,.06); border-radius: 14px; box-shadow: 0 6px 16px -12px rgba(5,56,99,.35); }
.fb2-home #fb2-prices .fb2-bx ul { gap: 7px; padding: 0 4px; }
.fb2-home #fb2-prices .fb2-bx li { gap: 7px; font: 600 12.5px/1.25 var(--title); color: var(--navy, #053863); }
.fb2-home #fb2-prices .fb2-bx li .ic, .fb2-home #fb2-prices .fb2-bx li svg { width: 16px; height: 16px; margin-top: 0; background: var(--brand); }
.fb2-home #fb2-prices .fb2-go { height: 38px; font: 600 13px var(--title); box-shadow: 0 8px 18px -12px rgba(31,167,156,.9); }
@media (max-width: 760px) { .fb2-home #fb2-prices .fb2-bx li { font-size: 11.5px; } }

/* tab bar on the home treatment table (pills/sort from nav.js .fb2-r2); the divider line sits above it */
.fb2-home .fb2-tabs { margin: 0; padding: 14px 0 4px; }
.fb2-home .fb2-tabs .fb2-p small { margin-left: 2px; }
.fb2.fb2-home { border-bottom: 1px solid var(--line, #e6ecef); } .fb2-home > .container { padding-bottom: 24px; }

/* flight and hotel lines under the country prices (savings.js) – neutral tint, Hungary / Turkey values side by side */
.fb2-home #fb2-prices .fb2-trip .fb2-t { background: linear-gradient(180deg, #fbfcfd, #f3f6f9); }
.fb2-home #fb2-prices .fb2-trip .fb2-tic { width: 30px; height: 30px; background: var(--teal-50); color: var(--teal-700); }
.fb2-home #fb2-prices .fb2-trip .fb2-tic .ic, .fb2-home #fb2-prices .fb2-trip .fb2-tic svg { width: 16px; height: 16px; }
.fb2-home #fb2-prices .fb2-tc { flex-direction: column; gap: 3px; padding: 4px 6px; }
.fb2-tv { display: inline-flex; align-items: center; gap: 6px; }
.fb2-mf { flex: none; width: 15px; height: 15px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(5,56,99,.12); }
.fb2-mf svg { width: 100%; height: 100%; display: block; }
.fb2-home #fb2-prices .fb2-tc strong { font: 700 14px/1 var(--title); color: var(--navy, #053863); }
.fb2-home #fb2-prices .fb2-trip.one .fb2-tc strong { font-size: 18px; }
.fb2-home #fb2-prices .fb2-trip.one .fb2-mf { width: 18px; height: 18px; }
.fb2-home #fb2-prices .fb2-tx strong { font-size: 12.5px; color: #3c5266; }
@media (max-width: 760px) { .fb2-home #fb2-prices .fb2-tc strong { font-size: 12.5px; } .fb2-home #fb2-prices .fb2-tx strong { font-size: 11px; } }

/* trip settings bar (savings.js .fb2-trip-bar): same pills as the Clinics city bar */
.fb2-home .fb2-trip-bar { flex-wrap: wrap; row-gap: 10px; }
.fb2-trip-bar .fb2-ctl { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 14px; border: 1px solid #e3e9ee; border-radius: 999px; background: #fff; font: 500 13.5px var(--title); color: #5b6b7a; white-space: nowrap; }
.fb2-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: #f1f5f8; }
.fb2-seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: 600 13px var(--title); color: #5b6b7a; cursor: pointer; }
.fb2-seg button.on { background: var(--action); color: #fff; }
.fb2-step { display: inline-flex; align-items: center; gap: 6px; }
.fb2-step button { width: 28px; height: 28px; border: 1px solid #e3e9ee; border-radius: 50%; background: #fff; font: 600 16px/1 var(--title); color: var(--navy, #053863); cursor: pointer; }
.fb2-step button:hover { border-color: #22b3a8; }
.fb2-step b { min-width: 18px; text-align: center; font: 700 15px var(--title); color: var(--navy, #053863); }
.fb2-trip-bar .fb2-sort select { max-width: 170px; }
.fb2-tnote { margin: 2px 0 10px; font-size: 13px; color: #5b6b7a; }
.fb2-tnote b { color: var(--navy, #053863); }
/* selected treatment: tile ticked (as on the Clinics page) and its column outlined */
.fb2-home .fb2-r1 .fb2-t[data-sel] { cursor: pointer; }
.fb2-home .fb2-tbl > .fb2-r1 .fb2-t.on { border: 2px solid #22b3a8; background: #f2fbfa; padding: 9px 7px; }
.fb2-home #fb2-prices .fb2-t.sel { border-color: #22b3a8; box-shadow: 0 0 0 1px #22b3a8 inset, 0 6px 16px -12px rgba(5,56,99,.35); }
@media (max-width: 1100px) { .fb2-home .fb2-trip-bar { flex-wrap: nowrap; } }
.fb2-trip-bar .fb2-sort { flex: none; white-space: nowrap; }
.fb2-trip-bar .fb2-sort select[data-k="from"] { max-width: 132px; }
.fb2-trip-bar { gap: 6px; }
.fb2-trip-bar .fb2-ctl { padding-left: 12px; gap: 6px; }
.fb2-home .fb2-trip-bar label.fb2-sort select[data-k="from"] { width: 122px; max-width: 122px; text-overflow: ellipsis; } 
.fb2-home .fb2-trip-bar { gap: 5px; } .fb2-home .fb2-trip-bar .fb2-ctl { padding-left: 11px; } .fb2-home .fb2-trip-bar .fb2-sp { min-width: 0; }

/* trip pills (same look as the Clinics city pills): label + value, select or − / + inside */
.fb2-trip-bar .fb2-pk { gap: 6px; padding: 0 12px; cursor: default; }
.fb2-trip-bar .fb2-pk > svg { flex: none; }
.fb2-trip-bar .fb2-pl { font: 500 13px var(--title); color: #5f6a80; white-space: nowrap; }
.fb2-trip-bar .fb2-pk select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: 600 14px var(--title); color: var(--navy, #053863); cursor: pointer; outline: none; padding: 0 2px 0 0; }
.fb2-trip-bar .fb2-pk select[data-k="from"] { width: 124px; }
.fb2-trip-bar .fb2-pk select[data-k="to"] { width: 172px; text-overflow: ellipsis; }
.fb2-trip-bar .fb2-pk > svg:last-child { width: 14px; height: 14px; margin-left: -4px; color: #5f6a80; pointer-events: none; }
.fb2-trip-bar .fb2-loc.fb2-pk { background: #22b3a8; border-color: #22b3a8; }
.fb2-trip-bar .fb2-loc.fb2-pk .fb2-pl, .fb2-trip-bar .fb2-loc.fb2-pk select, .fb2-trip-bar .fb2-loc.fb2-pk svg { color: #fff; }
.fb2-trip-bar .fb2-loc.fb2-pk select option { color: var(--navy, #053863); }
.fb2-trip-bar .fb2-pk .ic { width: 16px; height: 16px; color: #22b3a8; }
.fb2-trip-bar .fb2-pk .fb2-step button { width: 24px; height: 24px; font-size: 14px; }
.fb2-home #fb2-prices .fb2-trip.tu .fb2-tic { background: var(--sand-100); color: var(--sand-700); }

/* total saving line */
.fb2-home #fb2-prices .fb2-trip.tot .fb2-t { background: linear-gradient(180deg, #e9f8f4, #d9f1ea); border-color: rgba(35,133,122,.2); }
.fb2-home #fb2-prices .fb2-trip.tot .fb2-tic { background: var(--action); color: #fff; }
.fb2-home #fb2-prices .fb2-trip.tot .fb2-tc strong { color: var(--teal-700); font-weight: 800; }
.fb2-home #fb2-prices .fb2-trip.tot .fb2-tv.neg strong { color: var(--red-700); }

/* trip & total lines: country name over the value, centred like the price tiles (no flags) */
.fb2-home #fb2-prices .fb2-tc { flex-direction: row; justify-content: center; align-items: center; gap: 12px; padding: 4px 6px; }
.fb2-home #fb2-prices .fb2-tc .fb2-tv { flex-direction: column; align-items: center; gap: 1px; }
.fb2-home #fb2-prices .fb2-tc .fb2-tv small { font: 500 10.5px/1 var(--title); color: #5f6a80; }
.fb2-home #fb2-prices .fb2-tc .fb2-tv strong { font: 800 16px/1.05 var(--title); letter-spacing: -.01em; }
.fb2-home #fb2-prices .fb2-tc .fb2-tv.hu strong { color: var(--blue-700); }
.fb2-home #fb2-prices .fb2-tc .fb2-tv.tr strong { color: var(--sand-700); }
.fb2-home #fb2-prices .fb2-trip.one .fb2-tc .fb2-tv strong { font-size: 19px; }
.fb2-home #fb2-prices .fb2-trip.one .fb2-tc .fb2-tv small { font-size: 11px; }
.fb2-home #fb2-prices .fb2-tx .fb2-tv strong { font-size: 15px; white-space: nowrap; }
.fb2-home #fb2-prices .fb2-trip.tot .fb2-tc .fb2-tv.neg strong { color: #b42318; }
/* total line: chart icon from the "How much you can save" tile */
.fb2-home #fb2-prices .fb2-trip.tot .fb2-tic { width: 34px; height: 34px; background: radial-gradient(circle at 50% 45%, #dff6f2 0, #e8f8f5 70%); }
.fb2-home #fb2-prices .fb2-trip.tot .fb2-tic svg { width: 28px; height: 28px; }
@media (max-width: 760px) { .fb2-home #fb2-prices .fb2-tc { gap: 6px; } .fb2-home #fb2-prices .fb2-tc .fb2-tv strong { font-size: 13px; } .fb2-home #fb2-prices .fb2-tc .fb2-tv small { font-size: 9.5px; } }

/* ---------- compact filter bar (Oct 2026): smaller pills, flag chips, treatment picker, saving summary ---------- */
.fb2-home .fb2-trip-bar { gap: 6px; padding: 12px 0 2px; flex-wrap: nowrap; align-items: center; }
.fb2-home .fb2-trip-bar .fb2-p { height: 32px; padding: 0 10px; font-size: 13px; }
.fb2-home .fb2-trip-bar .fb2-pk select { font: 600 13px var(--title); }
.fb2-home .fb2-trip-bar .fb2-pk select[data-k="from"] { width: 118px; }
.fb2-home .fb2-trip-bar .fb2-pk > svg:first-child { width: 14px; height: 14px; }
.fb2-home .fb2-trip-bar .fb2-pl { font-size: 12px; }
.fb2-home .fb2-trip-bar .fb2-step { gap: 4px; }
.fb2-home .fb2-trip-bar .fb2-step button { width: 22px; height: 22px; font-size: 13px; }
.fb2-home .fb2-trip-bar .fb2-step b { min-width: 14px; font-size: 13.5px; }
.fb2-arrow { flex: none; display: grid; place-items: center; width: 20px; color: #9aa8b5; }
.fb2-arrow .ic { width: 15px; height: 15px; }
.fb2-div { flex: none; width: 1px; height: 22px; margin: 0 4px; background: #e3e9ee; }
/* country chips: mini flag button (tap to include / leave out) + airport */
.fb2-home .fb2-trip-bar .fb2-cty { padding: 0 8px 0 3px; gap: 5px; transition: opacity .15s, background .15s; }
.fb2-flg { flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: none; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #22b3a8; transition: box-shadow .15s, filter .15s; }
.fb2-flg svg { width: 100%; height: 100%; display: block; }
.fb2-home .fb2-trip-bar .fb2-cty select { width: 92px; text-overflow: ellipsis; }
.fb2-home .fb2-trip-bar .fb2-cty.off { background: #f4f6f8; }
.fb2-home .fb2-trip-bar .fb2-cty.off .fb2-flg { filter: grayscale(1) opacity(.55); box-shadow: 0 0 0 1px #d5dde5; }
.fb2-home .fb2-trip-bar .fb2-cty.off select { color: #9aa8b5; }
.fb2-home .fb2-trip-bar .fb2-trt select { width: 150px; text-overflow: ellipsis; }
/* note + result on one line */
.fb2-home .fb2-tnote { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 10px; font-size: 12.5px; line-height: 1.4; }
.fb2-ntx { min-width: 0; }
.fb2-res { flex: none; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: linear-gradient(180deg, #e9f8f4, #d9f1ea); border: 1px solid rgba(35,133,122,.2); white-space: nowrap; }
.fb2-res small { font: 600 11.5px var(--title); color: #3c5266; }
.fb2-res b { font: 800 15px var(--title); }
.fb2-res b.hu { color: var(--blue-700); } .fb2-res b.tr { color: var(--sand-700); }
.fb2-res i { font-style: normal; color: #9aa8b5; }
@media (max-width: 1240px) { .fb2-home .fb2-trip-bar { overflow-x: auto; scrollbar-width: none; } .fb2-home .fb2-trip-bar::-webkit-scrollbar { display: none; } }
@media (max-width: 760px) { .fb2-home .fb2-tnote { flex-direction: column; align-items: flex-start; gap: 8px; } }
.fb2-home .fb2-tnote { margin: 12px 0 0; }
.fb2-home .fb2-trip-bar .fb2-cty .fb2-flg svg { width: 100%; height: 100%; }
/* tooltip on the treatment tiles: site teal instead of navy */
.fb2-home .fb2-t[data-tip]::before { background: linear-gradient(180deg, #2cc4b8, #1fa79c); box-shadow: 0 12px 26px -10px rgba(34,179,168,.8); }
.fb2-home .fb2-t[data-tip]::after { border-top-color: #1fa79c; }

/* tick box in each country chip: compare one country or both */
.fb2-home .fb2-trip-bar .fb2-cty { padding-left: 6px; }
.fb2-chk { flex: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid #22b3a8; border-radius: 5px; background: var(--action); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.fb2-home .fb2-trip-bar .fb2-cty .fb2-chk svg { width: 12px; height: 12px; color: #fff; }
.fb2-home .fb2-trip-bar .fb2-cty.off .fb2-chk { background: #fff; border-color: #b8c4cf; }
.fb2-home .fb2-trip-bar .fb2-cty.off .fb2-chk svg { visibility: hidden; }
.fb2-chk:focus-visible { outline: 2px solid #1fa79c; outline-offset: 2px; }
/* filter bar spans the full width, flush with the table edges */
.fb2-home .fb2-trip-bar { padding-left: 0; padding-right: 0; }
.fb2-home .fb2-trip-bar > .fb2-pk { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
.fb2-home .fb2-trip-bar > .fb2-pk select, .fb2-home .fb2-trip-bar .fb2-cty select { flex: 1 1 auto; min-width: 0; width: auto !important; }
.fb2-home .fb2-trip-bar > .fb2-loc.fb2-pk { flex-grow: 1.4; }
.fb2-home .fb2-trip-bar > .fb2-cty, .fb2-home .fb2-trip-bar > .fb2-trt { flex-grow: 1.6; }
.fb2-home .fb2-trip-bar > .fb2-cty { flex: 1.6 1 168px; }

/* =====================================================================
   Compare prices (home, Oct 2026 design) – #cmp, rendered by savings.js
   ===================================================================== */
.cmp-sec { padding: 40px 0 56px; background: linear-gradient(180deg, #f7fbfd 0%, #fff 60%); }
.cmp-head-row { align-items: flex-end; margin-bottom: 22px; }
.cmp-head-row .title { font-size: clamp(30px, 3.4vw, 46px); }
.cmp-head-row .lead { max-width: 430px; font-size: 14.5px; }
/* treatment tiles */
.cmp-tiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.cmp-t { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 172px; padding: 14px 8px 12px; border: 1px solid #e3e9ee; border-radius: 18px; background: #fff; text-align: center; text-decoration: none; cursor: pointer; font: inherit; transition: border-color .2s, transform .2s, box-shadow .2s, background .2s; }
.cmp-t img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(5,56,99,.16)); margin-bottom: 4px; }
.cmp-t b { font: 700 14px/1.2 var(--title); color: var(--navy); }
.cmp-t small { font-size: 12px; line-height: 1.35; color: #5f6a80; }
.cmp-t:hover { border-color: #22b3a8; transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(5,56,99,.4); }
.cmp-t.on { border: 2px solid #22b3a8; background: #f0fbf9; padding: 13px 7px 11px; }
.cmp-save { background: linear-gradient(180deg, #f1fbf8, #e6f7f3); border-color: #cdeee8; }
.cmp-save b { font-size: 15px; margin-top: 2px; }
.cmp-chart { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #dff6f2 0, #e8f8f5 70%); }
.cmp-chart svg { width: 46px; height: 46px; }
/* filter bar */
.cmp-bar { display: flex; gap: 8px; margin: 16px 0 18px; }
.cmp-p { position: relative; flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 1px solid #e3e9ee; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -10px rgba(5,56,99,.35); font: 500 14px var(--title); color: #5f6a80; white-space: nowrap; }
.cmp-p select { flex: 1 1 auto; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: 600 14.5px var(--title); color: var(--navy); cursor: pointer; outline: none; text-overflow: ellipsis; padding-right: 2px; }
.cmp-p .cv { flex: none; width: 15px; height: 15px; color: #5f6a80; pointer-events: none; }
.cmp-from { flex-grow: 1.5; } .cmp-from > svg:first-child { flex: none; width: 20px; height: 20px; }
.cmp-cty { flex-grow: 1.4; padding-left: 10px; }
.cmp-chk { flex: none; width: 22px; height: 22px; padding: 0; border: 1.5px solid #22b3a8; border-radius: 6px; background: #22b3a8; display: grid; place-items: center; cursor: pointer; }
.cmp-chk svg { width: 14px; height: 14px; color: #fff; }
.cmp-flag { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 4px rgba(5,56,99,.25); }
.cmp-flag svg { width: 100%; height: 100%; display: block; }
.cmp-cty.off { background: #f5f7f9; }
.cmp-cty.off .cmp-chk { background: #fff; border-color: #b8c4cf; } .cmp-cty.off .cmp-chk svg { visibility: hidden; }
.cmp-cty.off .cmp-flag { filter: grayscale(1) opacity(.5); } .cmp-cty.off select { color: #9aa8b5; }
.cmp-trt { flex-grow: 1.4; }
.cmp-st { flex: 0 1 auto; gap: 10px; }
.cmp-st button { flex: none; width: 30px; height: 30px; border: 1px solid #dfe6ec; border-radius: 50%; background: #fff; font: 600 16px/1 var(--title); color: var(--navy); cursor: pointer; }
.cmp-st button:hover { border-color: #22b3a8; }
.cmp-st b { min-width: 16px; text-align: center; font: 700 16px var(--title); color: var(--navy); }
.cmp-bar.no-qty .cmp-st:last-child { opacity: .45; pointer-events: none; }
/* table + side panel */
.cmp-main { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; align-items: stretch; }
.cmp-tbl { display: grid; gap: 8px; }
.cmp-r { display: grid; grid-template-columns: 236px repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.cmp-l { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e8eef3; border-radius: 14px; background: #fff; }
.cmp-head .cmp-l { border: 0; background: none; }
.cmp-li { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e9f7f5; color: #22b3a8; }
.cmp-li .ic, .cmp-li svg { width: 22px; height: 22px; }
.cmp-l b { display: block; font: 700 15px/1.2 var(--title); color: var(--navy); }
.cmp-l small { display: block; margin-top: 2px; font-size: 12.5px; color: #5f6a80; }
.cmp-c { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 58px; padding: 8px 12px; border: 1px solid #e8eef3; border-radius: 14px; background: #fff; }
.cmp-c strong { font: 800 22px/1 var(--title); letter-spacing: -.01em; color: var(--navy); }
.cmp-c.hu { background: var(--blue-50); } .cmp-c.tr { background: var(--sand-50); }
.cmp-c.hu strong { color: var(--blue-700); } .cmp-c.tr strong { color: var(--sand-700); }
.cmp-x { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: #5b6b7a; }
.cmp-x .ic { width: 15px; height: 15px; color: #8a99a6; }
.cmp-dash { font: 600 20px var(--title); color: var(--navy); }
.cmp-pill { padding: 6px 12px; border-radius: 999px; font: 600 13px var(--title); white-space: nowrap; }
.cmp-c.hu .cmp-pill { background: #dff4ee; color: var(--blue-700); } .cmp-c.tr .cmp-pill { background: var(--sand-100); color: var(--sand-700); }
.cmp-r.trt .cmp-c.hu { background: var(--blue-50); } .cmp-r.trt .cmp-c.tr { background: var(--sand-50); }
.cmp-r.tot .cmp-l, .cmp-r.tot .cmp-c { min-height: 70px; }
.cmp-r.tot .cmp-c.uk { background: var(--plum-100); } .cmp-r.tot .cmp-c.hu { background: var(--blue-100); } .cmp-r.tot .cmp-c.tr { background: var(--sand-100); }
.cmp-r.tot .cmp-c strong { font-size: 28px; }
/* column headers with city photos */
.cmp-h { position: relative; overflow: hidden; min-height: 116px; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 4px 12px; padding: 14px 16px; border: 1px solid #e8eef3; border-bottom: 0; border-radius: 16px 16px 0 0; background: #f4f7fb; }
.cmp-h.hu { background: var(--blue-50); } .cmp-h.tr { background: var(--sand-50); }
.cmp-ph { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; background: center 60% / cover no-repeat; -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); opacity: .95; }
.cmp-hf { position: relative; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(5,56,99,.4); grid-row: span 2; }
.cmp-hf svg { width: 100%; height: 100%; display: block; }
.cmp-hn { position: relative; }
.cmp-hn b { display: block; font: 700 17px/1.2 var(--title); color: var(--navy); }
.cmp-hn small { display: block; font-size: 12.5px; color: #4f6275; }
.cmp-badge { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; font: 600 12px var(--title); white-space: nowrap; }
.cmp-badge svg { width: 20px; height: 20px; }
.cmp-badge.eu { background: rgba(255,255,255,.9); color: var(--navy); }
.cmp-badge.bv { padding-left: 9px; background: var(--sand-100); color: var(--sand-700); } .cmp-badge.bv svg { width: 15px; height: 15px; }
.cmp-head .cmp-h + .cmp-h { margin-left: 0; }
/* side panel */
.cmp-side { display: flex; flex-direction: column; align-items: center; padding: 22px 18px 20px; border: 1px solid #cdeee8; border-radius: 18px; background: linear-gradient(180deg, #f1fbf8, #e9f8f4); text-align: center; }
.cmp-chart.big { width: 84px; height: 84px; } .cmp-chart.big svg { width: 58px; height: 58px; }
.cmp-you { margin: 12px 0 0; font: 700 20px var(--title); color: var(--navy); }
.cmp-up { margin: 0; font: 700 20px var(--title); color: var(--navy); }
.cmp-up b { font: 800 44px/1.05 var(--title); color: var(--highlight); letter-spacing: -.02em; }
.cmp-vs { margin: 2px 0 14px; font-size: 15px; color: var(--navy); }
.cmp-side ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; text-align: left; }
.cmp-side li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.3; color: var(--navy); }
.cmp-side li svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--brand); color: #fff; }
.cmp-go { margin-top: auto; width: 100%; justify-content: center; background: linear-gradient(180deg, #2cc4b8, #1fa79c); }
/* note */
.cmp-note { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 18px; border: 1px solid #e3e9ee; border-radius: 16px; background: #fff; }
.cmp-i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #2f6fd6; color: #fff; }
.cmp-i .ic { width: 20px; height: 20px; }
.cmp-note p { flex: 1; margin: 0; font-size: 14px; color: #5b6b7a; } .cmp-note p b { color: var(--navy); }
.cmp-note a { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--title); color: var(--teal-700); text-decoration: none; }
.cmp-note a .ic { width: 16px; height: 16px; }
/* smaller screens */
@media (max-width: 1240px) {
  .cmp-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cmp-bar { flex-wrap: wrap; } .cmp-p { flex-basis: 30%; }
  .cmp-main { grid-template-columns: 1fr; }
  .cmp-side { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 18px; text-align: left; }
  .cmp-side ul { display: none; } .cmp-side .cmp-chart { grid-row: span 3; } .cmp-go { grid-row: span 3; grid-column: 3; width: auto; margin: 0; }
  .cmp-you, .cmp-up, .cmp-vs { margin: 0; }
}
@media (max-width: 760px) {
  .cmp-sec { padding-top: 28px; }
  .cmp-tiles { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 132px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .cmp-tiles::-webkit-scrollbar { display: none; }
  .cmp-p { flex-basis: 100%; height: 42px; } .cmp-st { flex-basis: calc(33% - 6px); padding: 0 8px; gap: 5px; justify-content: space-between; } .cmp-st span { display: none; }
  .cmp-main { overflow-x: auto; } .cmp-tbl { min-width: 720px; }
  .cmp-side { grid-template-columns: auto 1fr; } .cmp-go { grid-column: 1 / -1; grid-row: auto; width: 100%; margin-top: 10px; }
  .cmp-note { flex-wrap: wrap; }
}

/* fit: header on one line, bar inside the width, badges under the country name */
.cmp-head-row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; }
.cmp-head-row .title { font-size: clamp(28px, 3vw, 42px); }
.cmp-head-row .lead { max-width: none; margin: 0; font-size: 14px; line-height: 1.5; }
.cmp-bar { gap: 6px; }
.cmp-p { padding: 0 12px; gap: 6px; }
.cmp-from { flex: 1.4 1 200px; } .cmp-cty { flex: 1.2 1 178px; } .cmp-trt { flex: 1.2 1 172px; }
.cmp-st { flex: none; gap: 6px; } .cmp-st button { width: 26px; height: 26px; font-size: 15px; } .cmp-st span { font-size: 13.5px; }
.cmp-r { grid-template-columns: 214px repeat(var(--cols, 3), minmax(0, 1fr)); }
.cmp-h { min-height: 132px; grid-template-columns: auto 1fr; }
.cmp-ph { height: 48%; }
.cmp-badge { position: static; margin-top: 6px; }
.cmp-hn small { line-height: 1.3; }
@media (max-width: 1240px) { .cmp-head-row { grid-template-columns: 1fr; gap: 8px; } .cmp-from, .cmp-cty, .cmp-trt { flex-basis: 30%; } }
@media (max-width: 760px) { .cmp-st { flex: 1 1 calc(33% - 6px); } }
.cmp-head-row { grid-template-columns: minmax(0, 1fr) 330px; }
.cmp-head-row .title { font-size: clamp(28px, 2.8vw, 38px); }
.cmp-go { text-transform: none; letter-spacing: 0; font: 600 15px var(--title); }
/* compare section: tablet / phone (kept last so they win) */
@media (max-width: 1240px) {
  .cmp-head-row { grid-template-columns: 1fr; gap: 8px; }
  .cmp-bar { flex-wrap: wrap; }
  .cmp-from, .cmp-cty, .cmp-trt { flex: 1 1 calc(50% - 6px); }
  .cmp-st { flex: 1 1 calc(33.333% - 6px); justify-content: space-between; }
}
@media (max-width: 760px) {
  .cmp-head-row .title { font-size: 28px; }
  .cmp-from, .cmp-cty, .cmp-trt { flex: 1 1 100%; }
  .cmp-st { flex: 1 1 calc(33.333% - 6px); padding: 0 8px; gap: 4px; }
  .cmp-st span { display: inline; font-size: 11.5px; }
  .cmp-st button { width: 24px; height: 24px; }
  .cmp-r { grid-template-columns: 150px repeat(var(--cols, 3), minmax(150px, 1fr)); }
  .cmp-l { gap: 8px; padding: 8px; } .cmp-li { width: 32px; height: 32px; } .cmp-l b { font-size: 13.5px; } .cmp-l small { font-size: 11px; }
  .cmp-c { flex-direction: column; gap: 4px; } .cmp-c strong { font-size: 19px; } .cmp-r.tot .cmp-c strong { font-size: 22px; }
  .cmp-tbl { min-width: 0; width: max-content; }
}

/* ---------- compare section: match the supplied design (wider canvas, proportions, details) ---------- */
.cmp-sec .container { max-width: 1488px; }
.cmp-sec { background: linear-gradient(180deg, #f5fafd 0%, #fbfdfe 55%, #fff 100%); padding: 34px 0 48px; }
.cmp-eye .dot { background: #e6f6f3; } .cmp-eye .dot svg { width: 18px; height: 18px; }
.cmp-head-row { grid-template-columns: minmax(0, 1fr) 420px; align-items: center; margin-bottom: 18px; }
.cmp-head-row .title { font-size: clamp(30px, 3.3vw, 48px); letter-spacing: -.025em; white-space: nowrap; }
.cmp-head-row .lead { font-size: 13.5px; line-height: 1.6; color: #5b6b7a; }
/* tiles */
.cmp-tiles { gap: 12px; }
.cmp-t { min-height: 184px; padding: 14px 10px 14px; border-radius: 16px; box-shadow: 0 6px 18px -16px rgba(5,56,99,.35); }
.cmp-t img { width: 82px; height: 82px; margin-bottom: 6px; }
.cmp-t b { font-size: 16px; }
.cmp-t small { font-size: 13px; }
.cmp-t.on { padding: 13px 9px 13px; background: #effaf8; }
.cmp-save .cmp-chart { width: 72px; height: 72px; } .cmp-save .cmp-chart svg { width: 50px; height: 50px; }
.cmp-save b { font-size: 18px; line-height: 1.15; } .cmp-save small { font-size: 13px; }
/* filter bar */
.cmp-bar { gap: 12px; margin: 16px 0 16px; }
.cmp-p { height: 54px; padding: 0 16px; gap: 10px; border-radius: 999px; box-shadow: 0 6px 16px -14px rgba(5,56,99,.4); }
.cmp-p select { font-size: 15px; }
.cmp-from { flex: 1.25 1 230px; } .cmp-cty { flex: 1.15 1 205px; } .cmp-trt { flex: 1.1 1 180px; }
.cmp-from > svg:first-child { width: 24px; height: 24px; }
.cmp-chk { width: 24px; height: 24px; border-radius: 5px; } .cmp-flag { width: 34px; height: 34px; }
.cmp-st { gap: 12px; padding: 0 14px; } .cmp-st span { font-size: 15px; }
.cmp-st button { width: 34px; height: 34px; font-size: 18px; }
.cmp-st b { font-size: 17px; min-width: 18px; }
/* table */
.cmp-main { grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; }
.cmp-r { grid-template-columns: 238px repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.cmp-tbl { gap: 8px; }
.cmp-l { gap: 14px; padding: 10px 14px; border-radius: 12px; }
.cmp-li { width: 34px; height: 34px; background: none; color: #22b3a8; border-radius: 0; }
.cmp-li .ic, .cmp-li svg { width: 30px; height: 30px; stroke-width: 1.7; }
.cmp-l b { font-size: 15.5px; } .cmp-l small { font-size: 12.5px; }
.cmp-c { justify-content: flex-start; gap: 28px; min-height: 60px; padding: 8px 0 8px 18%; border-radius: 10px; }
.cmp-c.uk { justify-content: center; padding-left: 0; }
.cmp-c strong { font-size: 24px; min-width: 64px; }
.cmp-x { font-size: 14px; color: #4f6275; }
.cmp-pill { padding: 7px 14px; font-size: 13.5px; }
.cmp-r.tot .cmp-c { min-height: 72px; } .cmp-r.tot .cmp-c strong { font-size: 30px; }
.cmp-h { min-height: 124px; padding: 14px 16px 0; border-radius: 12px 12px 0 0; grid-template-columns: auto 1fr auto; align-items: start; }
.cmp-hf { width: 50px; height: 50px; grid-row: auto; }
.cmp-hn b { font-size: 17px; } .cmp-hn small { font-size: 13px; white-space: nowrap; }
.cmp-ph { height: 52%; -webkit-mask-image: linear-gradient(to top, #000 70%, transparent); mask-image: linear-gradient(to top, #000 70%, transparent); }
.cmp-badge { position: relative; top: auto; right: auto; margin: 0; align-self: start; }
.cmp-badge.eu { background: var(--blue-100); } .cmp-badge.bv { background: var(--sand-100); }
/* side panel */
.cmp-side { padding: 22px 16px 22px; border-radius: 16px; }
.cmp-you { font-size: 22px; margin-top: 16px; } .cmp-up { font-size: 22px; } .cmp-up b { font-size: 50px; }
.cmp-vs { font-size: 16px; margin-bottom: 18px; }
.cmp-side li { font-size: 14px; }
.cmp-go { background: #2a8f86; box-shadow: 0 10px 22px -12px rgba(31,127,116,.8); border-radius: 999px; height: 52px; }
/* note */
.cmp-note { padding: 14px 20px; border-radius: 14px; }
.cmp-i { background: #2f6fd6; width: 34px; height: 34px; }
.cmp-note a { font-size: 13.5px; font-weight: 500; }
@media (max-width: 1360px) {
  .cmp-head-row .title { white-space: normal; }
  .cmp-c { padding-left: 10%; gap: 16px; } .cmp-c strong { font-size: 21px; }
  .cmp-hn small { white-space: normal; }
  .cmp-h { grid-template-columns: auto 1fr; } .cmp-badge { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 1240px) { .cmp-head-row { grid-template-columns: 1fr; } .cmp-p { height: 48px; } .cmp-st button { width: 28px; height: 28px; } }
@media (max-width: 760px) { .cmp-c { padding-left: 0; justify-content: center; } .cmp-c strong { font-size: 19px; min-width: 0; } .cmp-p { height: 44px; } .cmp-st span { font-size: 11.5px; } .cmp-st button { width: 24px; height: 24px; } .cmp-t img { width: 64px; height: 64px; } }

.cmp-h { grid-template-columns: auto minmax(0, 1fr); }
.cmp-hr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmp-hr .cmp-badge { flex: none; }
.cmp-hn small { white-space: normal; }
.cmp-bar { gap: 10px; }
.cmp-from { flex: 1.3 1 250px; } .cmp-cty { flex: 1.2 1 222px; } .cmp-trt { flex: 1.1 1 184px; }
.cmp-st { flex: none; gap: 8px; padding: 0 12px; } .cmp-st span { font-size: 14px; }
.cmp-st button { width: 30px; height: 30px; font-size: 17px; }
.cmp-p select { font-size: 14.5px; }
@media (max-width: 1360px) { .cmp-h { grid-template-columns: auto minmax(0, 1fr); } .cmp-hr { flex-wrap: wrap; } }
@media (max-width: 1240px) { .cmp-from, .cmp-cty, .cmp-trt { flex: 1 1 calc(50% - 6px); } .cmp-st { flex: 1 1 calc(33.333% - 7px); justify-content: space-between; } }
@media (max-width: 760px) { .cmp-from, .cmp-cty, .cmp-trt { flex: 1 1 100%; } }
.cmp-trt { flex: 1 1 170px; } .cmp-cty { flex: 1.25 1 232px; }
/* compare section – responsive overrides (must stay last) */
@media (max-width: 1240px) {
  .cmp-main { grid-template-columns: 1fr; }
  .cmp-side { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 18px; text-align: left; padding: 16px 20px; }
  .cmp-side ul { display: none; } .cmp-side .cmp-chart { grid-row: span 3; width: 64px; height: 64px; } .cmp-side .cmp-chart svg { width: 44px; height: 44px; }
  .cmp-you, .cmp-up, .cmp-vs { margin: 0; } .cmp-up b { font-size: 40px; }
  .cmp-go { grid-row: span 3; grid-column: 3; width: auto; margin: 0; padding: 0 24px; }
  .cmp-from, .cmp-cty, .cmp-trt { flex: 1 1 calc(50% - 6px); }
  .cmp-st { flex: 1 1 calc(33.333% - 7px); justify-content: space-between; }
}
@media (max-width: 760px) {
  .cmp-from, .cmp-cty, .cmp-trt { flex: 1 1 100%; }
  .cmp-bar { gap: 8px; }
  .cmp-st { flex: 1 1 calc(33.333% - 6px); min-width: 0; height: 44px; padding: 0 6px; gap: 2px; }
  .cmp-st span { display: none; }
  .cmp-st button { width: 26px; height: 26px; font-size: 14px; }
  .cmp-main { display: block; overflow: visible; }
  .cmp-tbl { overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .cmp-tbl::-webkit-scrollbar { display: none; }
  .cmp-r { grid-template-columns: 140px repeat(var(--cols, 3), 160px); }
  .cmp-side { grid-template-columns: auto 1fr; margin-top: 12px; }
  .cmp-go { grid-column: 1 / -1; grid-row: auto; width: 100%; margin-top: 10px; }
  .cmp-head-row .title { white-space: normal; }
}
@media (max-width: 760px) { .cmp-tbl { width: auto; min-width: 0; max-width: 100%; } .cmp-main { max-width: 100%; } }
@media (max-width: 1440px) {
  .cmp-bar { gap: 8px; }
  .cmp-p { padding: 0 12px; gap: 8px; }
  .cmp-from > svg:first-child { width: 20px; height: 20px; }
  .cmp-flag { width: 28px; height: 28px; } .cmp-chk { width: 20px; height: 20px; }
  .cmp-st { gap: 6px; padding: 0 10px; } .cmp-st button { width: 26px; height: 26px; font-size: 15px; }
  .cmp-from { flex: 1.15 1 205px; } .cmp-cty { flex: 1.1 1 200px; } .cmp-trt { flex: 1 1 165px; }
  .cmp-c { padding-left: 8%; gap: 14px; } .cmp-c strong { font-size: 22px; min-width: 0; }
  .cmp-x { font-size: 13px; }
  .cmp-hn small { font-size: 12px; }
}
@media (max-width: 760px) { .cmp-c { padding-left: 0; } .cmp-c strong { font-size: 19px; } }

/* ---------- compare section v3: filter panel + estimate vs clinic-confirmed labels ---------- */
.cf { margin-bottom: 16px; padding: 16px 20px 18px; border: 1px solid #e3e9ee; border-radius: 20px; background: #fff; box-shadow: 0 10px 28px -22px rgba(5,56,99,.4); }
.cf-top { display: grid; grid-template-columns: 1.05fr 1.6fr 1.2fr auto; gap: 22px; align-items: start; }
.cf-g { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-lb { display: inline-flex; align-items: center; gap: 6px; font: 500 14.5px var(--title); color: var(--navy); }
.cf-info { display: inline-grid; place-items: center; color: #5f6a80; cursor: help; } .cf-info .ic { width: 17px; height: 17px; }
.cf-sel { position: relative; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border: 1px solid #dfe6ec; border-radius: 12px; background: #fff; }
.cf-sel > svg:first-child, .cf-sel > .ic:first-child { flex: none; width: 22px; height: 22px; color: #22b3a8; }
.cf-sel select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: 500 15.5px var(--title); color: var(--navy); cursor: pointer; outline: none; text-overflow: ellipsis; }
.cf-sel .cv { flex: none; width: 16px; height: 16px; color: #5f6a80; pointer-events: none; }
.cf-sel.sm { height: 38px; border-radius: 999px; padding: 0 14px; } .cf-sel.sm select { font-size: 13.5px; }
.cf-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-chip { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 12px; border: 1.5px solid #9edcd4; border-radius: 12px; background: #f0fbf9; transition: background .15s, border-color .15s; }
.cf-chip select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: 500 15.5px var(--title); color: var(--navy); cursor: pointer; outline: none; }
.cf-chip .cv { flex: none; width: 15px; height: 15px; color: #5f6a80; pointer-events: none; }
.cf-chip .cmp-chk { width: 24px; height: 24px; border-radius: 50%; } .cf-chip .cmp-flag { width: 32px; height: 32px; }
.cf-chip.off { border-color: #dfe6ec; background: #f6f8fa; } .cf-chip.off .cmp-chk { background: #fff; border-color: #b8c4cf; } .cf-chip.off .cmp-chk svg { visibility: hidden; }
.cf-chip.off .cmp-flag { filter: grayscale(1) opacity(.5); } .cf-chip.off select { color: #9aa8b5; }
.cf-hint { font-size: 12.5px; color: #5f6a80; }
.cf-more { align-self: center; margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1.5px solid #22b3a8; border-radius: 12px; background: #fff; font: 600 14.5px var(--title); color: var(--navy); cursor: pointer; white-space: nowrap; }
.cf-more > .ic { width: 22px; height: 22px; color: #1fa79c; } .cf-more .cv { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .2s; }
.cf.closed .cf-more .cv { transform: none; }
.cf-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; margin-top: 16px; padding: 14px 6px 4px; border-top: 1px solid #eef2f5; }
.cf.closed .cf-opts { display: none; }
.cf-f { display: flex; gap: 12px; padding: 0 16px; border-right: 1px solid #eef2f5; min-width: 0; }
.cf-fi { flex: none; padding-top: 2px; color: #22b3a8; } .cf-fi .ic, .cf-fi svg { width: 24px; height: 24px; }
.cf-fb { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-fb .cf-lb { font-size: 13.5px; }
.cf-step { display: inline-flex; align-items: center; width: max-content; height: 38px; border: 1px solid #dfe6ec; border-radius: 999px; overflow: hidden; }
.cf-step button { width: 38px; height: 100%; border: 0; background: #fff; font: 500 18px/1 var(--title); color: var(--navy); cursor: pointer; }
.cf-step button:hover { background: #f0fbf9; color: var(--teal-700); }
.cf-step b { min-width: 44px; height: 100%; display: grid; place-items: center; border-left: 1px solid #eef2f5; border-right: 1px solid #eef2f5; font: 600 16px var(--title); color: var(--navy); }
.cf-fb small { font-size: 12px; color: #5f6a80; }
.cf-opts.no-qty .cf-f:nth-child(3) { opacity: .45; pointer-events: none; }
.cf-reset { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 8px 12px; border: 0; background: none; font: 600 15px var(--title); color: var(--teal-700); cursor: pointer; white-space: nowrap; }
.cf-reset .ic { width: 20px; height: 20px; }
/* estimate vs clinic-confirmed */
.cmp-tblw { min-width: 0; }
.cmp-est { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border: 1px dashed #c9d6e0; border-radius: 12px; background: #fbfcfd; }
.cmp-est p { margin: 0; font-size: 13px; line-height: 1.5; color: #5b6b7a; } .cmp-est p b { color: var(--navy); }
.cmp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font: 700 11px/1.3 var(--title); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.cmp-tag.est { flex: none; margin-top: 1px; background: #fff4dc; color: #9a5d00; border: 1px dashed #e8b85a; }
.cmp-tag.conf { background: #e3f6f0; color: var(--teal-700); border: 1px solid #9edcd4; } .cmp-tag.conf svg { width: 11px; height: 11px; }
.cmp-r.tot .cmp-l b::after { content: "Estimate"; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: #fff4dc; border: 1px dashed #e8b85a; font: 700 10px/1.3 var(--title); letter-spacing: .03em; text-transform: uppercase; color: #9a5d00; vertical-align: 2px; }
.cmp-est-s { margin: -8px 0 12px; font-size: 12px; color: #5f6a80; }
.cmp-go-s { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: #4f6275; }
.cmp-go { background: var(--action); }
@media (max-width: 1240px) {
  .cf-top { grid-template-columns: 1fr 1fr; } .cf-dest { grid-column: 1 / -1; grid-row: 2; } .cf-more { margin-top: 0; justify-self: start; }
  .cf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; } .cf-f:nth-child(3) { border-right: 0; } .cf-reset { justify-self: start; }
}
@media (max-width: 760px) {
  .cf { padding: 14px; } .cf-top { grid-template-columns: 1fr; gap: 14px; } .cf-dest { grid-row: auto; } .cf-more { width: 100%; justify-content: center; }
  .cf-chips { grid-template-columns: 1fr; }
  .cf-opts { grid-template-columns: 1fr 1fr; padding: 12px 0 0; } .cf-f { padding: 0 8px; border-right: 0; } .cf-reset { grid-column: 1 / -1; margin: 0; }
  .cf-step button { width: 32px; } .cf-step b { min-width: 34px; }
  .cmp-est { flex-direction: column; }
}
.cf-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1.15fr) auto; }
.cf-chips { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cf-chip { min-width: 0; }
.cmp-est { align-items: center; }
@media (max-width: 1240px) { .cf-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .cf-top { grid-template-columns: minmax(0, 1fr); } .cf-chips { grid-template-columns: minmax(0, 1fr); } }

/* ---------- compare section: fit the page (same container, headings and type as the other sections) ---------- */
.cmp-sec .container { max-width: var(--container); }
.cmp-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.cmp-head-row .title { font-size: clamp(32px, 3.4vw, 44px); font-weight: 600; letter-spacing: normal; white-space: normal; }
.cmp-head-row .title em { color: var(--highlight); }
.cmp-head-row .lead { max-width: 400px; margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
/* treatment tiles: picture, title, then the grey description pinned to the bottom */
.cmp-tiles { gap: 10px; }
.cmp-t { justify-content: flex-start; gap: 0; min-height: 176px; padding: 14px 8px 12px; }
.cmp-t.on { padding: 13px 7px 11px; }
.cmp-t img, .cmp-save .cmp-chart { flex: none; width: 60px; height: 60px; margin: 0 0 8px; }
.cmp-save .cmp-chart svg { width: 42px; height: 42px; }
.cmp-t b, .cmp-save b { display: flex; align-items: center; justify-content: center; min-height: 36px; font: 700 14px/1.25 var(--title); }
.cmp-t small, .cmp-save small { margin-top: auto; padding-top: 6px; font-size: 12px; line-height: 1.35; color: #5f6a80; }
/* filter panel type to the site's scale */
.cf-lb { font-size: 14px; } .cf-sel select, .cf-chip select { font-size: 15px; }
/* table: prices start at the same left line in every cell, savings pills bold */
.cmp-c, .cmp-c.uk { justify-content: flex-start; gap: 14px; padding: 8px 18px; }
.cmp-c strong { min-width: 0; font-size: 22px; }
.cmp-r.tot .cmp-c strong { font-size: 26px; }
.cmp-pill { padding: 6px 12px; font: 800 14px var(--title); letter-spacing: -.01em; }
.cmp-c.hu .cmp-pill { background: var(--blue-700); color: #fff; box-shadow: 0 6px 14px -8px rgba(3,98,143,.9); }
.cmp-c.tr .cmp-pill { background: var(--sand-700); color: #fff; box-shadow: 0 6px 14px -8px rgba(133,96,31,.9); }
.cmp-r.tot .cmp-pill { padding: 7px 14px; font-size: 15px; }
.cmp-main { grid-template-columns: minmax(0, 1fr) 220px; }
.cmp-r { grid-template-columns: 200px repeat(var(--cols, 3), minmax(0, 1fr)); }
.cmp-l b { font-size: 14.5px; } .cmp-l small { font-size: 12px; }
@media (max-width: 1240px) { .cmp-head-row { flex-direction: column; align-items: flex-start; gap: 10px; } .cmp-head-row .lead { max-width: 620px; } }
@media (max-width: 760px) { .cmp-c, .cmp-c.uk { flex-direction: column; align-items: flex-start; padding: 8px 12px; gap: 4px; } .cmp-c strong { font-size: 19px; } .cmp-r { grid-template-columns: 140px repeat(var(--cols, 3), 150px); } }
.cmp-head-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.cmp-head-row .lead { max-width: 640px; }
.cf { padding: 16px 18px 16px; }
.cf-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr) auto; gap: 16px; }
.cf-sel, .cf-chip { height: 46px; } .cf-sel { gap: 10px; padding: 0 12px; } .cf-chip { gap: 8px; padding: 0 12px 0 10px; }
.cf-chip .cmp-flag { width: 28px; height: 28px; } .cf-chip .cmp-chk { width: 22px; height: 22px; }
.cf-sel select, .cf-chip select { font-size: 14.5px; }
.cf-more { height: 46px; padding: 0 14px; gap: 8px; font-size: 14px; }
.cmp-r.tot .cmp-l b::after { content: none; }
.cmp-r.tot .cmp-l small::after { content: "Estimate"; display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #fff4dc; border: 1px dashed #e8b85a; font: 700 9.5px/1.4 var(--title); letter-spacing: .03em; text-transform: uppercase; color: #9a5d00; }
.cmp-r { grid-template-columns: 212px repeat(var(--cols, 3), minmax(0, 1fr)); }
.cmp-go { white-space: nowrap; padding: 0 16px; font-size: 14.5px; gap: 8px; }
@media (max-width: 760px) { .cmp-r { grid-template-columns: 140px repeat(var(--cols, 3), 150px); } }

/* ---------- compare: ranges, reliability tags, tours switch, savings panel, steps strip ---------- */
.cmp-v { display: flex; flex-direction: column; gap: 3px; }
.cmp-v small { font-size: 11.5px; color: #5f6a80; white-space: nowrap; }
.cmp-src { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font: 700 9.5px/1.45 var(--title); font-style: normal; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.cmp-src.typ { background: #eaf3fb; color: #2f5f8a; border: 1px solid #c8dcef; }
.cmp-src.est { background: #fff4dc; color: #9a5d00; border: 1px dashed #e8b85a; }
.cmp-tag.live { background: #eef2ff; color: #3b4cc0; border: 1px solid #c9d0f5; }
.cmp-l small .cmp-src { display: table; margin: 4px 0 0; }
.cmp-tog { margin-top: 3px; padding: 2px 10px; border: 1px solid #c9d6e0; border-radius: 999px; background: #fff; font: 600 11.5px var(--title); color: #5f6a80; cursor: pointer; }
.cmp-tog.on { background: var(--action); border-color: #22b3a8; color: #fff; }
.cmp-c strong.off { color: #9aa8b5 !important; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cmp-sv { display: grid; gap: 10px; width: 100%; margin: 8px 0 4px; }
.cmp-svr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 6px 14px -12px rgba(5,56,99,.4); }
.cmp-svf { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; } .cmp-svf svg { width: 100%; height: 100%; display: block; }
.cmp-svr b { display: block; font: 800 26px/1.05 var(--title); letter-spacing: -.02em; }
.cmp-svr.hu b { color: var(--blue-700); } .cmp-svr.tr b { color: var(--sand-700); }
.cmp-svr small { display: block; font: 600 12.5px var(--title); color: var(--navy); }
.cmp-ben { width: 100%; text-align: left; } .cmp-bh { margin: 8px 0 4px; font: 700 13px var(--title); color: var(--navy); }
.cmp-ben ul { margin: 0; } .cmp-side .cmp-ben ul { margin-bottom: 4px; gap: 5px; }
.cmp-inc { width: 100%; margin: 8px 0 14px; text-align: left; font-size: 12.5px; color: #4f6275; }
.cmp-inc summary { cursor: pointer; font: 600 13px var(--title); color: var(--teal-700); }
.cmp-inc p { margin: 6px 0 0; line-height: 1.45; }
.cmp-disc { margin: 10px 2px 0; font-size: 12.5px; color: #5f6a80; }
.cmp-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.cmp-steps li { position: relative; padding: 18px 16px 18px; border: 1px solid #e3e9ee; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px -18px rgba(5,56,99,.4); }
.cmp-sn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2f6fd6; color: #fff; font: 700 14px var(--title); vertical-align: middle; }
.cmp-si { display: inline-grid; place-items: center; margin-left: 10px; color: #2f6fd6; vertical-align: middle; }
.cmp-si .ic, .cmp-si svg { width: 30px; height: 30px; }
.cmp-steps b { display: block; margin: 14px 0 6px; font: 700 15px/1.25 var(--title); color: var(--navy); }
.cmp-steps p { margin: 0; font-size: 13px; line-height: 1.5; color: #5b6b7a; }
@media (max-width: 1240px) { .cmp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cmp-side { display: flex; flex-direction: column; align-items: stretch; text-align: left; } .cmp-side .cmp-chart { display: none; } .cmp-sv { grid-template-columns: 1fr 1fr; } .cmp-ben { display: none; } .cmp-go { width: 100%; } }
@media (max-width: 760px) { .cmp-steps { grid-template-columns: 1fr; } .cmp-sv { grid-template-columns: 1fr; } }

/* first filter row: every box the same height, More options on the same line */
.cf-top { align-items: start; }
.cf-sel, .cf-chip, .cf-more { box-sizing: border-box; height: 48px; }
.cf-more { margin: 0; align-self: stretch; }
.cf-mg { align-self: start; }
@media (max-width: 1240px) { .cf-mg { grid-column: auto; } .cf-mg .cf-lb { display: none; } }
/* Compare header: title left on one line, lead as a small grey column on the right */
.cmp-head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); align-items: end; gap: 40px; margin-bottom: 22px; }
.cmp-head-row .eyebrow { margin-bottom: 6px; }
.cmp-pound { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e6f6f3; color: #22b3a8; font-weight: 700; font-size: 15px; }
.cmp-head-row .title { font-size: clamp(28px, 2.9vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; margin: 0; }
.cmp-head-row .title em { color: var(--highlight); font-style: normal; }
.cmp-head-row .lead { max-width: 330px; margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: #5f6a80; }
@media (max-width: 1240px) { .cmp-head-row { display: grid; flex-direction: initial; } }
@media (max-width: 900px) { .cmp-head-row { grid-template-columns: 1fr; gap: 10px; } .cmp-head-row .title { white-space: normal; } .cmp-head-row .lead { max-width: 620px; } }
@media (max-width: 1240px) { .cf-mg .cf-lb { display: block; } .cf-mg { align-self: start; } }
@media (max-width: 640px) { .cf-mg .cf-lb { display: none; } }
/* Estimate legend now closes the section */
#cmp > .cmp-est { margin: 18px 0 0; }
/* Header without eyebrow: title and lead centred on one line */
.cmp-head-row { align-items: center; }
.cmp-head-row .title { margin: 0; }
.cmp-head-row .lead { margin: 0; }
/* ---- Breathing room: tiles, table header and side panel ---- */
.cmp-tiles { gap: 12px; margin-bottom: 26px; }
.cmp-t, .cmp-save { justify-content: flex-start; min-height: 180px; padding: 16px 10px 14px; }
.cmp-t.on { padding: 15px 9px 13px; }
.cmp-t img, .cmp-save .cmp-chart { width: 58px; height: 58px; margin: 0 0 10px; }
.cmp-t b, .cmp-save b { display: block; min-height: 0; margin: 0; line-height: 1.25; }
.cmp-t small, .cmp-save small { margin-top: auto; padding-top: 8px; }
.cmp-tbl { gap: 10px; }
.cmp-h { min-height: 132px; padding: 16px 18px 0; }
.cmp-hn small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-ph { height: 50%; }
.cmp-main { gap: 18px; }
.cmp-side > .cmp-chart.big { display: none; }
.cmp-side { justify-content: flex-start; padding-top: 24px; }
.cmp-you { margin-top: 0; }
@media (max-width: 1240px) {
  .cmp-main { grid-template-columns: minmax(0, 1fr); }
  .cmp-side { margin-top: 6px; }
  .cmp-sv { grid-template-columns: 1fr 1fr; }
  .cmp-tiles { margin-bottom: 22px; }
}
@media (max-width: 760px) { .cmp-sv { grid-template-columns: 1fr; } .cmp-hn small { white-space: normal; } }
/* ---- Side panel v2: summary (both) / country card (one) ---- */
.cmp-main.one { grid-template-columns: minmax(0, 1fr) 360px; }
.cmp-side { align-items: stretch; text-align: left; padding: 24px 20px 20px; position: relative; overflow: hidden; }
.cmp-sp { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cmp-sp .cmp-chart.big { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%; background: #dff3ee; }
.cmp-sp .cmp-chart.big svg { width: 52px; height: 52px; }
.cmp-you { margin: 0; font: 700 22px/1.2 var(--title); color: var(--navy); }
.cmp-you em { font-style: normal; font-size: 46px; line-height: 1; font-weight: 800; color: var(--highlight); letter-spacing: -.02em; }
.cmp-vs { margin: 6px 0 14px; font-size: 14px; color: var(--navy); }
.cmp-sp ul { display: grid; gap: 9px; margin: 0 0 16px; padding: 0; list-style: none; text-align: left; align-self: stretch; }
.cmp-sp li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.3; color: var(--navy); }
.cmp-sp li svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--action); color: #fff; }
.cmp-go-s { text-align: center; }
/* Country card */
.cmp-side.one { padding: 22px 22px 20px; background: #fff; border-color: #e3e9ee; }
.cmp-side.hu { background: linear-gradient(180deg, var(--blue-50), #fff 40%); }
.cmp-side.tr { background: linear-gradient(180deg, #fff3f1, #fff 40%); border-color: var(--sand-200); }
.cmp-side.one .cmp-sp { align-items: stretch; text-align: left; }
.cmp-sph { position: absolute; top: 120px; right: -22px; bottom: -40px; width: 58%; background: center / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%); mask-image: linear-gradient(to right, transparent 0, #000 45%); opacity: .9; pointer-events: none; }
.cmp-spt { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; }
.cmp-spf { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 6px 14px -8px rgba(5,56,99,.5); }
.cmp-spf svg { width: 100%; height: 100%; display: block; }
.cmp-spt b { display: block; font: 700 21px/1.15 var(--title); color: var(--navy); }
.cmp-spt small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: #5f6a80; }
.cmp-spb { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 5px 12px 5px 6px; border-radius: 999px; background: #eaf0f8; font: 600 13px var(--title); color: var(--navy); }
.cmp-spb .cmp-eu svg { display: block; width: 22px; height: 22px; }
.cmp-side.tr .cmp-spb { padding-left: 10px; background: var(--sand-100); color: var(--sand-700); }
.cmp-spb .ic { width: 17px; height: 17px; }
.cmp-spl { position: relative; margin: 16px 0 0; font-size: 14px; color: #5f6a80; }
.cmp-spp { position: relative; margin: 0; font: 800 44px/1.05 var(--title); letter-spacing: -.02em; color: var(--highlight); }
.cmp-side.tr .cmp-spp { color: var(--sand-700); }
.cmp-spu { position: relative; margin: 2px 0 14px; font-size: 13.5px; color: #5f6a80; }
.cmp-side.one .cmp-sp ul { position: relative; max-width: 62%; gap: 10px; }
.cmp-side.one .cmp-sp li { font-size: 14px; text-shadow: 0 0 6px #fff, 0 0 10px #fff; }
.cmp-side.tr .cmp-sp li svg { background: var(--sand-400); }
.cmp-side.one .cmp-inc, .cmp-side.one .cmp-go, .cmp-side.one .cmp-go-s { position: relative; }
.cmp-side.one .cmp-go-s { margin-bottom: 0; }
@media (max-width: 1240px) {
  .cmp-main.one { grid-template-columns: minmax(0, 1fr); }
  .cmp-side .cmp-sp .cmp-chart.big { display: grid; }
  .cmp-sph { top: 0; width: 45%; }
  .cmp-side.one .cmp-sp ul { max-width: 55%; }
}
@media (max-width: 640px) { .cmp-sph { display: none; } .cmp-side.one .cmp-sp ul { max-width: none; } }
.cmp-side.one .cmp-sp { position: static; }
.cmp-side.one .cmp-sp > :not(.cmp-sph) { position: relative; }
.cmp-sph { top: 150px; right: 0; bottom: 96px; width: 60%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 18%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to bottom, transparent 0, #000 18%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 1240px) { .cmp-sph { top: 0; bottom: 0; width: 45%; } }
/* Small eyebrow above the compare title; row stays title-left / lead-right */
.cmp-head-row { align-items: end; }
.cmp-head-row .cmp-eye { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; background: none; font: 600 12px/1 var(--title); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-700); }
.cmp-head-row .cmp-pound { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e6f6f3; color: #3fb5a8; font: 400 14px/1 var(--title); }
.cmp-head-row .lead { margin-bottom: 3px; }
/* CTA sits level with the Total estimated cost row (desktop) */
@media (min-width: 1241px) {
  .cmp-side, .cmp-side.one { padding-bottom: 0; }
  .cmp-side .cmp-go { box-sizing: border-box; height: 56px; margin: auto 0 calc((var(--tot, 96px) - 56px) / 2 - 1px); width: 100%; justify-content: center; }
  .cmp-sph { bottom: calc(var(--tot, 96px) + 4px); }
}
/* ================= Phone layout (≤760px) ================= */
.cmp-mob { display: none; }
@media (max-width: 760px) {
  /* Filters: one clear column, every control full width */
  .cf { padding: 16px; border-radius: 16px; }
  .cf-top { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .cf-g { width: 100%; }
  .cf-dest { grid-column: auto; grid-row: auto; }
  .cf-sel, .cf-chip { width: 100%; }
  .cf-sel select, .cf-chip select { min-width: 0; flex: 1; }
  .cf-mg .cf-lb { display: none !important; }
  .cf-more { width: 100%; justify-content: center; }
  .cf-opts { grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 14px 0 0; }
  .cf-f { padding: 0; border-right: 0 !important; }
  .cf-reset { grid-column: 1 / -1; justify-self: center; margin: 4px 0 0; }
  /* Treatment tiles: swipeable row */
  .cmp-tiles { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 136px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px 18px; padding: 2px 16px 6px; gap: 10px; }
  .cmp-tiles::-webkit-scrollbar { display: none; }
  .cmp-t { scroll-snap-align: start; min-height: 168px; }
  /* Table → country cards */
  .cmp-tbl { display: none !important; }
  .cmp-mob { display: grid; gap: 14px; }
  .cmp-main, .cmp-main.one { display: block; }
  .cmp-mc { overflow: hidden; border: 1px solid #e3e9ee; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -20px rgba(5,56,99,.45); }
  .cmp-mc.hu { border-color: var(--blue-100); } .cmp-mc.tr { border-color: var(--sand-200); }
  .cmp-mh { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 92px; padding: 14px 16px; background: #f4f7fb; overflow: hidden; }
  .cmp-mc.hu .cmp-mh { background: #eef9f5; } .cmp-mc.tr .cmp-mh { background: var(--sand-50); }
  .cmp-mh .cmp-ph { left: auto; right: 0; top: 0; bottom: 0; width: 55%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 60%); mask-image: linear-gradient(to right, transparent, #000 60%); }
  .cmp-mh .cmp-hf { position: relative; width: 48px; height: 48px; }
  .cmp-mh .cmp-hn { position: relative; }
  .cmp-mh .cmp-hn b { font-size: 18px; } .cmp-mh .cmp-hn small { white-space: normal; font-size: 13px; }
  .cmp-mb { padding: 4px 16px; }
  .cmp-ml { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eef2f5; }
  .cmp-ml:last-child { border-bottom: 0; }
  .cmp-mi { display: grid; place-items: center; color: #1fa79c; } .cmp-mi svg, .cmp-mi .ic { width: 22px; height: 22px; }
  .cmp-mt { font: 600 14.5px/1.25 var(--title); color: var(--navy); }
  .cmp-mt small { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--body-font, inherit); color: #5f6a80; }
  .cmp-mt .cmp-tog { margin: 0 0 0 2px; padding: 1px 8px; font-size: 11px; vertical-align: 1px; }
  .cmp-mv { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
  .cmp-mv strong { font: 700 18px var(--title); color: var(--navy); }
  .cmp-mc.hu .cmp-mv strong { color: var(--blue-700); } .cmp-mc.tr .cmp-mv strong { color: var(--sand-700); }
  .cmp-mv strong.off { color: #9aa8b5 !important; text-decoration: line-through; }
  .cmp-mv .cmp-pill { padding: 4px 9px; font-size: 12px; }
  .cmp-mn { margin: 0; padding: 0 0 12px 38px; font-size: 12.5px; color: #5f6a80; }
  .cmp-mtot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #f4f7fb; border-top: 1px solid #eef2f5; }
  .cmp-mc.hu .cmp-mtot { background: #e9f7f2; } .cmp-mc.tr .cmp-mtot { background: var(--sand-50); }
  .cmp-mtot > span:first-child { font: 700 15px/1.2 var(--title); color: var(--navy); }
  .cmp-mtot small { display: block; margin-top: 2px; font: 400 12px var(--body-font, inherit); color: #5f6a80; }
  .cmp-mtot .cmp-mv strong { font-size: 22px; }
  /* Side panel below the cards */
  .cmp-side, .cmp-side.one { margin-top: 16px; padding: 22px 18px 18px; }
  .cmp-side .cmp-go { margin: 6px 0 0; width: 100%; justify-content: center; }
  .cmp-sph { display: none; }
  .cmp-side.one .cmp-sp ul { max-width: none; }
  .cmp-spp { font-size: 38px; }
  /* Note, steps, legend */
  .cmp-note { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; padding: 14px 16px; }
  .cmp-note p { font-size: 13.5px; line-height: 1.5; }
  .cmp-note a { grid-column: 2; }
  .cmp-steps { grid-template-columns: 1fr; gap: 0; margin-top: 18px; border: 1px solid #e3e9ee; border-radius: 16px; background: #fff; overflow: hidden; }
  .cmp-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid #eef2f5; border-radius: 0; box-shadow: none; }
  .cmp-steps li:last-child { border-bottom: 0; }
  .cmp-steps .cmp-sn { grid-row: span 2; }
  .cmp-steps .cmp-si { display: none; }
  .cmp-steps b { margin: 4px 0 2px; font-size: 14.5px; }
  .cmp-steps p { font-size: 13px; }
  .cmp-est { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 760px) {
  .cmp-mc.hu .cmp-pill { background: var(--blue-700); color: #fff; box-shadow: 0 6px 14px -8px rgba(3,98,143,.9); }
  .cmp-mc.tr .cmp-pill { background: var(--sand-700); color: #fff; box-shadow: 0 6px 14px -8px rgba(133,96,31,.9); }
  .cmp-mv .cmp-pill { padding: 4px 9px; font: 800 12px var(--title); }
  .cmp-mt small, .cmp-mtot small { font-family: inherit; font-weight: 400; font-family: var(--sans, inherit); }
  .cmp-mt small { font: 400 12.5px/1.4 "DM Sans", system-ui, sans-serif; }
  .cmp-mtot small { font: 400 12px/1.4 "DM Sans", system-ui, sans-serif; }
}
/* Partner logos on cost rows + small estimate marks */
.cmp-mk { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; font-style: normal; }
.cmp-mk svg { width: 12px; height: 12px; display: block; }
.cmp-mk.typ { background: #e3eefa; color: #2f5f8a; box-shadow: inset 0 0 0 1px #c8dcef; }
.cmp-mk.est { background: #fff1d6; color: #9a5d00; box-shadow: inset 0 0 0 1px #e8b85a; }
.cmp-via { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 400 11.5px/1 "DM Sans", system-ui, sans-serif; color: #5f6a80; }
.cmp-via img { display: block; height: 14px; width: auto; max-width: 92px; }
.cmp-via img[alt="Google"] { height: 16px; }
.cmp-via img[alt="Caradvance"] { height: 13px; }
.cmp-l .cmp-tog + .cmp-via { margin-top: 6px; }
.cmp-r.tot .cmp-l small::after { content: none !important; }
.cmp-r.tot .cmp-l small .cmp-mk { margin-left: 4px; }
.cmp-lg { display: inline-flex; align-items: center; gap: 5px; vertical-align: -2px; }
.cmp-lg b { font-weight: 600; color: var(--navy); }
.cmp-est { padding: 12px 16px; }
@media (max-width: 760px) { .cmp-mt .cmp-via { margin-top: 6px; } }
.cmp-via img[alt="Caradvance"] { height: 15px; max-width: 80px; }
.cmp-via img[alt="Caradvance"] { height: 20px; max-width: 96px; margin: -3px 0; }
/* Total savings row (sits next to the CTA) */
.cmp-mk { display: none !important; }
.cmp-r.sav .cmp-c { background: #fff; }
.cmp-r.sav .cmp-c.hu { background: #f3fbf8; border-color: #cfeee6; } .cmp-r.sav .cmp-c.tr { background: #fff6f4; border-color: var(--sand-200); }
.cmp-r.sav .cmp-c strong { font-size: 24px; }
.cmp-r.sav .cmp-c.hu strong { color: var(--blue-700); } .cmp-r.sav .cmp-c.tr strong { color: var(--sand-700); }
.cmp-r.sav .cmp-c .cmp-x { font-weight: 600; color: var(--navy); }
.cmp-li .cmp-chart.sm { display: grid; place-items: center; width: 26px; height: 26px; background: none; }
.cmp-li .cmp-chart.sm svg { width: 26px; height: 26px; }
.cmp-msav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid #eef2f5; }
.cmp-msav > span { font: 700 15px/1.2 var(--title); color: var(--navy); }
.cmp-msav small { display: block; margin-top: 2px; font: 400 12px/1.4 "DM Sans", system-ui, sans-serif; color: #5f6a80; }
.cmp-msav strong { font: 800 22px var(--title); }
.cmp-mc.hu .cmp-msav strong { color: var(--blue-700); } .cmp-mc.tr .cmp-msav strong { color: var(--sand-700); }
/* Total savings shown with the CTA (no extra table row) */
.cmp-tsv { position: relative; width: 100%; margin: auto 0 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 16px -12px rgba(5,56,99,.4); text-align: left; }
.cmp-side .cmp-inc { margin-bottom: 14px; }
.cmp-tsl { margin: 0 0 6px; font: 700 13px var(--title); color: var(--navy); }
.cmp-tsl small { font: 400 11.5px "DM Sans", system-ui, sans-serif; color: #5f6a80; }
.cmp-tsr { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cmp-tsr .cmp-svf { width: 22px; height: 22px; }
.cmp-tsr b { font: 800 20px/1.1 var(--title); letter-spacing: -.01em; }
.cmp-tsr.hu b { color: var(--blue-700); } .cmp-tsr.tr b { color: var(--sand-700); }
.cmp-tsp { margin-left: auto; padding: 3px 9px; border-radius: 999px; font: 700 12px var(--title); color: #fff; }
.cmp-tsr.hu .cmp-tsp { background: var(--blue-400); } .cmp-tsr.tr .cmp-tsp { background: var(--sand-400); }
@media (min-width: 1241px) { .cmp-side .cmp-go { margin-top: 0; } }
@media (max-width: 1240px) { .cmp-tsv { margin: 4px 0 10px; } }
.cmp-tsl small { display: block; margin-top: 1px; } .cmp-tsp { white-space: nowrap; font-size: 11.5px; padding: 3px 8px; } .cmp-tsr b { white-space: nowrap; }
/* Tours on/off switch in More options */
.cf-opts { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
.cf-sw { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 34px; padding: 0 12px 0 4px; border: 1px solid #d9e2ea; border-radius: 999px; background: #f1f4f7; font: 600 13px var(--title); color: #5f6a80; cursor: pointer; transition: background .2s, border-color .2s; }
.cf-knob { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #c9d4de; transition: background .2s; }
.cf-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(5,56,99,.3); transition: transform .2s; }
.cf-sw.on { background: #effaf8; border-color: #bfe8e1; color: var(--teal-700); }
.cf-sw.on .cf-knob { background: #22b3a8; } .cf-sw.on .cf-knob::after { transform: translateX(16px); }
.cf-sw:focus-visible { outline: 2px solid #22b3a8; outline-offset: 2px; }
@media (max-width: 1240px) { .cf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cf-opts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1241px) {
  .cf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .cf-opts .cf-f { padding: 0 12px; }
  .cf-opts .cf-sel.sm { width: 100%; }
  .cf-reset { padding-left: 14px; }
}
/* Reset filters removed: six option columns fill the row */
@media (min-width: 1241px) { .cf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); } .cf-opts .cf-f:last-child { border-right: 0; } }
@media (min-width: 761px) and (max-width: 1240px) { .cf-opts .cf-f:nth-child(3n) { border-right: 0; } }
/* More options: 4 steppers + 3 on/off switches */
@media (min-width: 1241px) { .cf-opts { grid-template-columns: repeat(7, minmax(0, 1fr)); } .cf-opts .cf-f { padding: 0 12px; } }
.cmp-c strong.off, .cmp-mv strong.off { color: #9aa8b5 !important; text-decoration: line-through; text-decoration-thickness: 1.5px; }
@media (min-width: 761px) and (max-width: 1240px) {
  .cf-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cf-opts .cf-f { border-right: 1px solid #eef2f5; }
  .cf-opts .cf-f:nth-child(3n) { border-right: 1px solid #eef2f5; }
  .cf-opts .cf-f:nth-child(4n), .cf-opts .cf-f:last-child { border-right: 0; }
}
/* More options v3: 4 compact steppers + one "Include in total" group */
.cf-opts .cf-fb .cf-lb { white-space: nowrap; }
.cf-opts small { line-height: 1.35; }
.cf-inc .cf-fb { width: 100%; }
.cf-xs { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-xc { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border: 1px solid #d9e2ea; border-radius: 999px; background: #f4f6f8; font: 600 13px var(--title); color: #5f6a80; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cf-xc .cf-knob { width: 32px; height: 20px; }
.cf-xc .cf-knob::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.cf-xc.on { background: #effaf8; border-color: #bfe8e1; color: var(--teal-700); }
.cf-xc.on .cf-knob { background: #22b3a8; } .cf-xc.on .cf-knob::after { transform: translateX(12px); }
.cf-xc:focus-visible { outline: 2px solid #22b3a8; outline-offset: 2px; }
@media (min-width: 1241px) {
  .cf-opts { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.9fr); }
  .cf-opts .cf-f { padding: 0 16px; }
  .cf-opts .cf-f:nth-child(4) { border-right: 1px solid #eef2f5; }
}
@media (min-width: 761px) and (max-width: 1240px) {
  .cf-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cf-opts .cf-f:nth-child(4) { border-right: 0; }
  .cf-inc { grid-column: 1 / -1; padding-top: 4px; }
}
@media (max-width: 760px) { .cf-inc { grid-column: 1 / -1; } .cf-xc { flex: 1 1 auto; justify-content: center; } }
/* Total savings: plain, no card */
.cmp-tsv { padding: 0 2px; background: none; box-shadow: none; border-radius: 0; }
@media (min-width: 1241px) { .cmp-sph { bottom: calc(var(--tot, 96px) + 86px); } }
.cmp-tsv[hidden] { display: none; }
@media (min-width: 1241px) { .cmp-side.one .cmp-sph { bottom: calc(var(--tot, 96px) + 4px); } }
@media (min-width: 1241px) { .cmp-side .cmp-tsv[hidden] + .cmp-go { margin-top: auto; } }
.cf-opts.no-qty .cf-f:nth-child(3) { opacity: 1; pointer-events: auto; } .cf-opts.no-qty .cf-f:nth-child(1) { opacity: .45; pointer-events: none; }
/* ===== Why Smile & Stay (tabbed) ===== */
.wy-sec { padding-top: 56px; border-top: 1px solid #e3edf2; background: linear-gradient(180deg, #f6fafc, #fff 70%); }
.wy-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.wy-eye { display: inline-flex; align-items: center; gap: 14px; font: 600 13px/1 var(--title); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700); }
.wy-eye::before, .wy-eye::after { content: ""; width: 48px; height: 1.5px; background: #8fd3ca; }
.wy-head .title { margin: 14px 0 10px; font-size: clamp(30px, 3.2vw, 44px); }
.wy-head .title em { color: var(--highlight); font-style: normal; }
.wy-head .lead { margin: 0 auto; max-width: 640px; font-size: 17px; line-height: 1.55; }
.wy-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto 14px; }
.wy-tab { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border: 1px solid #dfe8ee; border-radius: 12px; background: #fff; font: 700 16px var(--title); color: var(--navy); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.wy-tab .ic { width: 24px; height: 24px; color: #3fb5a8; }
.wy-tab:hover { border-color: #9fdad2; }
.wy-tab.on { background: var(--action); border-color: transparent; color: #fff; box-shadow: 0 12px 24px -14px rgba(34,150,140,.9); }
.wy-tab.on .ic { color: #fff; }
.wy-tab:focus-visible { outline: 2px solid #22b3a8; outline-offset: 2px; }
.wy-box { max-width: 980px; margin: 0 auto; padding: 24px; border: 1px solid #e3e9ee; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -26px rgba(5,56,99,.5); }
.wy-p { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.wy-p[hidden] { display: none; }
.wy-pt h3 { margin: 4px 0 6px; font: 700 23px/1.2 var(--title); color: var(--navy); }
.wy-pt > p { margin: 0 0 18px; max-width: 520px; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.wy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wy-c { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #e6edf2; border-radius: 12px; background: #fff; }
.wy-ci { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #eaf7f4; color: #2a9d90; }
.wy-ci .ic { width: 22px; height: 22px; } .wy-ci svg:not(.ic) { width: 22px; height: 22px; }
.wy-c b { display: block; font: 700 15px/1.25 var(--title); color: var(--navy); }
.wy-c p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: #5f6a80; }
.wy-img { overflow: hidden; border-radius: 12px; min-height: 260px; background: #eef3f6; }
.wy-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wy-money { display: flex; align-items: center; gap: 14px; max-width: 980px; margin: 16px auto 0; padding: 16px 22px; border: 1px solid #cdeee8; border-radius: 14px; background: #eefaf7; }
.wy-mi { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--action); color: #fff; font: 700 16px/1 Georgia, serif; }
.wy-money p { margin: 0; font-size: 15px; line-height: 1.5; color: #4f6275; } .wy-money b { color: var(--navy); }
.wy-more { margin: 16px 0 0; text-align: center; }
.wy-more a { display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--title); color: var(--teal-700); text-decoration: none; }
.wy-more .ic { width: 16px; height: 16px; }
@media (max-width: 860px) {
  .wy-p { grid-template-columns: 1fr; } .wy-img { min-height: 200px; max-height: 240px; order: -1; }
}
@media (max-width: 640px) {
  .wy-tabs { gap: 8px; } .wy-tab { flex-direction: column; gap: 4px; height: 64px; font-size: 13px; }
  .wy-box { padding: 16px; } .wy-grid { grid-template-columns: 1fr; }
  .wy-eye::before, .wy-eye::after { width: 24px; }
  .wy-money { align-items: flex-start; padding: 14px 16px; } .wy-money p { font-size: 14px; }
}
/* Why section uses the full page container, like the comparison above */
.wy-tabs, .wy-box, .wy-money { max-width: none; }
.wy-sec .container { max-width: var(--container); }
.wy-p { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.wy-grid { gap: 14px; }
@media (min-width: 1100px) { .wy-box { padding: 28px; } .wy-img { min-height: 300px; } }
@media (max-width: 860px) { .wy-p { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .wy-img, .wy-p .wy-img { min-height: 0 !important; position: relative; } .wy-img img { position: absolute; inset: 0; } .wy-c { padding: 16px; } }
/* ===== Why tabs v2 panels ===== */
.wy-p1 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.wy-g2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wy-v { padding: 16px 14px; border: 1px solid #e6edf2; border-radius: 12px; background: #fff; }
.wy-v .wy-ci { margin-bottom: 12px; }
.wy-v b { display: block; font: 700 15.5px/1.25 var(--title); color: var(--navy); }
.wy-v p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: #5f6a80; }
.wy-p1 .wy-img { min-height: 0; }
.wy-p2, .wy-p3 { grid-template-columns: 1fr; }
/* price table */
.wy-tbl { border: 1px solid #e3e9ee; border-radius: 14px; overflow: hidden; }
.wy-r { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); align-items: center; border-top: 1px solid #eef2f5; }
.wy-r:first-child { border-top: 0; }
.wy-r > span { padding: 12px 18px; }
.wy-r > span + span { border-left: 1px solid #eef2f5; text-align: center; }
.wy-hd > span { padding: 14px 10px 10px; }
.wy-cty { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 16px var(--title); color: var(--navy); }
.wy-cty img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 6px 16px -8px rgba(5,56,99,.5); }
.wy-l { display: flex; align-items: center; gap: 12px; font: 600 15px var(--title); color: var(--navy); }
.wy-l .ic { width: 22px; height: 22px; color: #2a9d90; }
.wy-v2 { font: 700 17px var(--title); color: var(--navy); }
.wy-v2.off { color: #9aa8b5; text-decoration: line-through; }
.wy-tot { background: #eefaf7; }
.wy-tot .wy-l { font-size: 17px; font-weight: 700; }
.wy-tot .wy-v2 { font-size: 21px; font-weight: 800; color: var(--teal-700); }
.wy-tot .wy-v2[data-est^="tr"] { color: var(--sand-700); }
.wy-cap { margin: 10px 2px 0; font-size: 13px; color: #5f6a80; } .wy-cap a { color: var(--teal-700); font-weight: 600; }
/* split city image */
.wy-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 300px; border-radius: 14px; overflow: hidden; }
.wy-sp { position: relative; overflow: hidden; }
.wy-sp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wy-sp.hu { clip-path: polygon(0 0, 106% 0, 94% 100%, 0 100%); z-index: 1; margin-right: -6%; }
.wy-sp.tr { border-left: 0; }
.wy-split::after { content: ""; position: absolute; top: -5%; bottom: -5%; left: 50%; width: 4px; background: #fff; transform: skewX(-11deg); z-index: 2; }
.wy-sp em { position: absolute; top: 16px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.92); font: 700 15px var(--title); font-style: normal; color: var(--navy); box-shadow: 0 6px 14px -8px rgba(5,56,99,.5); z-index: 3; }
.wy-sp.hu em { left: 16px; } .wy-sp.tr em { right: 16px; }
.wy-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.wy-h { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid #e6edf2; border-radius: 12px; background: #fff; }
.wy-h b { display: block; font: 700 15px/1.25 var(--title); color: var(--navy); }
.wy-h p { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: #5f6a80; }
@media (max-width: 1100px) { .wy-g2 { grid-template-columns: 1fr 1fr; } .wy-g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .wy-p1 { grid-template-columns: 1fr; } .wy-split { height: 220px; } }
@media (max-width: 640px) {
  .wy-r { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr)); }
  .wy-r > span { padding: 10px 8px; } .wy-l { gap: 8px; font-size: 13.5px; } .wy-l .ic { width: 18px; height: 18px; }
  .wy-v2 { font-size: 15px; } .wy-tot .wy-v2 { font-size: 17px; } .wy-tot .wy-l { font-size: 14px; }
  .wy-cty { font-size: 14px; } .wy-cty img { width: 56px; height: 56px; }
  .wy-g4 { grid-template-columns: 1fr 1fr; gap: 8px; } .wy-h { flex-direction: column; gap: 8px; padding: 12px; }
  .wy-split { height: 180px; }
}
.wy-split { display: block; }
.wy-sp, .wy-sp.hu, .wy-sp.tr { position: absolute; inset: 0; margin: 0; }
.wy-sp.hu { clip-path: polygon(0 0, 53% 0, 47% 100%, 0 100%); z-index: 1; }
.wy-split::after { inset: 0; top: 0; bottom: 0; left: 0; width: auto; transform: none; background: #fff; clip-path: polygon(52.7% 0, 53.4% 0, 47.4% 100%, 46.7% 100%); }
.wy-sp.hu img { width: 53%; right: auto; } 
.wy-sp.tr img { left: 47%; width: 53%; }
.wy-pt > p.wy-cap { max-width: none; }
/* Cost & savings header: centred, same as Why Smile & Stay */
.cmp-head2 { margin-bottom: 26px; }
.cmp-head2 .title { white-space: normal; }
.cmp-head2 { max-width: none; } .cmp-head2 .lead { max-width: 640px; } @media (min-width: 900px) { .cmp-head2 .title { white-space: nowrap; } }
/* Clear prices: promise stamp instead of a second price table */
.wy-stampw { display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #f1fbf8, #e4f4f0); min-height: 260px; }
.wy-stamp { position: relative; width: 210px; height: 210px; color: var(--teal-700); transform: rotate(-8deg); }
.wy-stamp svg { width: 100%; height: 100%; display: block; }
.wy-st-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wy-st-in b { font: 800 26px/1 var(--title); color: var(--highlight); text-transform: uppercase; letter-spacing: -.01em; }
.wy-st-in small { font: 700 11px/1 var(--title); letter-spacing: .2em; text-transform: uppercase; margin: 4px 0; }
@media (max-width: 860px) { .wy-stampw { min-height: 200px; order: -1; } .wy-stamp { width: 170px; height: 170px; } .wy-st-in b { font-size: 21px; } }
.wy-p.wy-p1.wy-p2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.wy-p2 .wy-g2 { grid-template-columns: 1fr 1fr; }
.wy-st-in b { font-size: 20px; } .wy-st-in small { font-size: 10px; }
.wy-p2 .wy-cap { margin-top: 12px; }
@media (max-width: 860px) { .wy-p.wy-p1.wy-p2 { grid-template-columns: 1fr; } .wy-st-in b { font-size: 16px; } }

/* ===== Why Smile & Stay: expanding panels (from mockup-why.html) ===== */
.wyp{--teal:#2a9d90;--line:#d8e6ea;--bg:#f6fafb;--ease2:cubic-bezier(.7,0,.2,1);background:var(--bg)}

.wyp{padding:72px 0 88px}
.why-eye{display:inline-flex;align-items:center;gap:14px;font:600 13px/1 var(--title);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700)}
.why-eye::before{content:"";width:48px;height:1.5px;background:#8fd3ca}
.why-h{margin:16px 0 0;font:600 clamp(44px,7.4vw,104px)/.95 var(--title);letter-spacing:-.045em;color:var(--navy)}
.why-h em{font-style:normal;color:var(--highlight)}
.why-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin:18px 0 40px}
.why-sub p{max-width:520px;margin:0;font-size:17px;line-height:1.55;color:#677089}
.why-hint{font:500 13px var(--title);color:#5f6a80;white-space:nowrap}

/* ---- the panes ---- */
.wyp-panes{display:flex;height:600px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wyp-pane{position:relative;flex:1 1 0;min-width:0;border-left:1px solid var(--line);overflow:hidden;cursor:pointer;transition:flex-grow .9s var(--ease2),background .6s}
.wyp-pane:first-child{border-left:0}
.wyp-pane.on{flex-grow:3.4;cursor:default;background-color:#fff;background-image:radial-gradient(#cfe3e6 1px,transparent 1.2px);background-size:14px 14px}
.wyp-pane:not(.on):hover{background:#eef6f7}
.p-tab{position:absolute;inset:0 auto auto 0;display:flex;align-items:center;gap:12px;width:100%;padding:28px 22px 0;border:0;background:none;text-align:left;font:500 13px var(--title);letter-spacing:.09em;white-space:nowrap;text-transform:uppercase;color:var(--navy);cursor:inherit}
.p-tab:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.p-sq{flex:none;width:12px;height:12px;background:#9fbfc4;transition:background .4s,transform .4s}
.wyp-pane.on .p-sq{background:var(--green);transform:rotate(45deg)}
.p-num{position:absolute;left:28px;bottom:24px;font:600 15px var(--title);color:#677089;transition:opacity .4s}
.p-word{position:absolute;left:28px;bottom:58px;writing-mode:vertical-rl;transform:rotate(180deg);font:600 40px/1 var(--title);letter-spacing:-.02em;color:#c9dade;transition:opacity .4s,transform .6s var(--ease2)}
.wyp-pane.on .p-word,.wyp-pane.on .p-num{opacity:0}
/* progress bar for auto-play */
.p-bar{position:absolute;left:0;top:0;height:3px;width:0;background:var(--green)}
.wyp-pane.on .p-bar{animation:wyp-fill var(--dur,6s) linear forwards}
.wyp-panes.paused .wyp-pane.on .p-bar{animation-play-state:paused}
@keyframes wyp-fill{to{width:100%}}

/* expanded content */
.p-body{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:86px 40px 40px;opacity:0;pointer-events:none;transition:opacity .35s}
.wyp-pane.on .p-body{opacity:1;pointer-events:auto;transition:opacity .6s .45s}
.p-vis{display:grid;place-items:center;min-height:0;transform:translateY(24px) scale(.94);transition:transform .9s var(--ease2)}
.wyp-pane.on .p-vis{transform:none;transition-delay:.4s}
.p-foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:end;transform:translateY(18px);transition:transform .8s var(--ease2)}
.wyp-pane.on .p-foot{transform:none;transition-delay:.5s}
.p-big{margin:0;font:600 clamp(40px,4.6vw,64px)/.9 var(--title);letter-spacing:-.035em;color:var(--navy)}
.p-big em{font-style:normal;color:var(--highlight)}
.p-desc{margin:0;max-width:430px;font-size:16px;line-height:1.6;color:#677089}
.p-desc b{color:var(--navy);font-weight:600}

/* visuals */
.v-photo{position:relative;width:min(360px,72%);aspect-ratio:4/3.3}
.v-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:22px;box-shadow:0 30px 60px -30px rgba(5,56,99,.55)}
.v-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#fff;font:600 13.5px var(--title);color:var(--navy);box-shadow:0 14px 28px -14px rgba(5,56,99,.5);animation:wyp-float 5s ease-in-out infinite}
.v-chip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--action);color:#fff;font-style:normal;font-size:12px}
.v-chip.a{left:-10%;top:16%} .v-chip.b{right:-12%;bottom:14%;animation-delay:-2.5s}
@keyframes wyp-float{50%{transform:translateY(-8px)}}
.v-stamp{width:230px;height:230px;color:var(--teal);transform:rotate(-10deg)}
.wyp-pane.on .v-stamp{animation:wyp-stamp .7s .55s var(--ease2) both}
@keyframes wyp-stamp{0%{transform:rotate(-30deg) scale(1.6);opacity:0}70%{transform:rotate(-8deg) scale(.96);opacity:1}100%{transform:rotate(-10deg) scale(1)}}
.v-stamp svg{width:100%;height:100%;display:block}
.v-rev{display:grid;gap:12px;width:min(380px,90%)}
.wyp-rv{display:flex;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #e3edf0;box-shadow:0 14px 28px -22px rgba(5,56,99,.6)}
.wyp-rv:nth-child(2){margin-left:34px} .wyp-rv:nth-child(3){margin-left:12px}
.wyp-pane.on .wyp-rv{animation:wyp-rise .7s var(--ease2) both} .wyp-pane.on .wyp-rv:nth-child(1){animation-delay:.55s}.wyp-pane.on .wyp-rv:nth-child(2){animation-delay:.7s}.wyp-pane.on .wyp-rv:nth-child(3){animation-delay:.85s}
@keyframes wyp-rise{from{opacity:0;transform:translateY(20px)}}
.wyp-rv .wyp-av{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--title);color:#fff}
.wyp-rv b{display:block;font:600 14px var(--title)} .wyp-rv .wyp-st{color:#f5b400;letter-spacing:2px;font-size:13px}
.wyp-rv p{margin:3px 0 0;font-size:13px;line-height:1.4;color:#677089}
.v-trip{position:relative;width:min(420px,92%);aspect-ratio:1.45}
.v-trip .wyp-ph{position:absolute;width:62%;aspect-ratio:1.2;border-radius:18px;overflow:hidden;box-shadow:0 26px 50px -26px rgba(5,56,99,.6)}
.v-trip .wyp-ph img{width:100%;height:100%;object-fit:cover}
.v-trip .wyp-ph.a{left:0;top:0} .v-trip .wyp-ph.b{right:0;bottom:0;border:6px solid #fff}
.v-trip .wyp-pill{position:absolute;padding:7px 12px;border-radius:999px;background:#fff;font:600 12.5px var(--title);box-shadow:0 10px 22px -12px rgba(5,56,99,.5)}
.v-trip .wyp-pill.p1{left:10px;top:10px}.v-trip .wyp-pill.p2{right:10px;bottom:10px}
.v-trip svg.wyp-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v-trip .wyp-route path{stroke-dasharray:6 7;stroke-dashoffset:200}
.wyp-pane.on .v-trip .wyp-route path{animation:wyp-dash 1.6s .6s ease-out forwards}
@keyframes wyp-dash{to{stroke-dashoffset:0}}
.v-care{position:relative;width:240px;height:240px;display:grid;place-items:center}
.v-care .wyp-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #bfe8e1}
.wyp-pane.on .v-care .wyp-ring{animation:wyp-pulse 2.8s ease-out infinite}
.v-care .wyp-ring:nth-child(2){animation-delay:-1.4s!important}
@keyframes wyp-pulse{from{transform:scale(.55);opacity:1}to{transform:scale(1.15);opacity:0}}
.v-care .wyp-core{width:130px;height:130px;border-radius:50%;background:var(--action);display:grid;place-items:center;color:#fff;box-shadow:0 24px 40px -18px rgba(34,150,140,.9)}
.v-care .wyp-core svg{width:56px;height:56px}

/* phones: stacked accordion */
@media (max-width:860px){
  .why-sub{flex-direction:column;align-items:flex-start;gap:10px}
  .wyp-panes{flex-direction:column;height:auto}
  .wyp-pane{flex:none;height:64px;border-left:0;border-top:1px solid var(--line);transition:height .8s var(--ease2),background .6s}
  .wyp-pane:first-child{border-top:0}
  .wyp-pane.on{height:560px}
  .p-tab{padding:22px 20px 0}
  .p-word{display:none}.p-num{left:auto;right:20px;top:22px;bottom:auto}
  .p-body{padding:68px 20px 24px}
  .p-foot{grid-template-columns:1fr;gap:10px}
  .v-chip.a{left:-4%}.v-chip.b{right:-4%}
  .v-stamp{width:180px;height:180px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.wyp .why-hint{text-decoration:none;color:var(--teal-700);font-weight:600}
/* Why panels heading: same size as the other section titles */
.wyp .why-h { font: 600 clamp(30px, 3.2vw, 44px)/1.1 var(--title); letter-spacing: -.02em; margin-top: 14px; }
.wyp .why-sub { margin: 12px 0 30px; }
.wyp .why-sub p { font-size: 16px; }
.wyp { padding: 56px 0 72px; }
.wyp .p-big { font-size: clamp(32px, 3.4vw, 46px); line-height: .95; } .wyp .p-word { font-size: 32px; }
.wyp-ico svg { width: 15px; height: 15px; display: block; }
.wyp .wyp-head { margin-bottom: 28px; }
.wyp .wyp-head .lead a { color: var(--teal-700); font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Shared section header (Cost & savings, Why Smile & Stay): line eyebrow, title, lead left, link right */
.hd2 { margin-bottom: 30px; }
.hd2 .why-eye { display: inline-flex; align-items: center; gap: 14px; font: 600 13px/1 var(--title); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700); }
.hd2 .why-eye::before { content: ""; width: 48px; height: 1.5px; background: #8fd3ca; }
.hd2 .why-h { margin: 14px 0 0; font: 600 clamp(30px, 3.2vw, 44px)/1.1 var(--title); letter-spacing: -.02em; color: var(--navy); }
.hd2 .why-h em { font-style: normal; color: var(--highlight); }
.hd2 .why-sub { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin: 12px 0 0; }
.hd2 .why-sub p { max-width: 560px; margin: 0; font-size: 16px; line-height: 1.55; color: #677089; }
.hd2 .why-hint { font: 600 13.5px var(--title); color: var(--teal-700); text-decoration: none; white-space: nowrap; }
@media (max-width: 860px) { .hd2 .why-sub { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* Honest panel: live Google reviews */
.wyp .v-rev { width: min(440px, 94%); }
.wyp .wyp-rv img.wyp-av { object-fit: cover; }
.wyp .wyp-rv a { color: var(--teal-700); font-weight: 600; text-decoration: none; }
.wyp .wyp-rv b a { color: var(--navy); }
.wyp .wyp-src { display: block; margin-top: 4px; font-size: 11.5px; color: #5f6a80; }
.wyp .wyp-rv.sk .wyp-av { background: #e3edf0; } .wyp .wyp-rv.sk b, .wyp .wyp-rv.sk p { color: #9aa8b5; }
.wyp-gattr { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 12px; color: #5f6a80; }
.wyp-gattr svg { height: 15px; width: auto; }
.wyp .p-vis:has(#wyp-reviews) { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wyp .wyp-pane.on { background-image: none; background-color: #fff; }
.wyp .wyp-pane.on { background-image: none; background-color: #fff; }
/* Why panels on phones: open panel grows to fit its content (no fixed height), no auto-play (why-panes.js) */
@media (max-width: 860px) {
  .wyp .wyp-pane.on { height: auto; }
  .wyp .wyp-pane.on .p-body { position: relative; inset: auto; display: block; padding: 64px 20px 26px; }
  .wyp .wyp-pane.on .p-vis { margin-bottom: 24px; }
  .wyp .wyp-pane .p-bar { display: none; }
  .wyp .v-rev { width: 100%; } .wyp .wyp-rv:nth-child(2), .wyp .wyp-rv:nth-child(3) { margin-left: 0; }
  .wyp .v-trip { width: 100%; }
  .wyp .v-photo { width: 82%; }
  .wyp .p-tab { min-height: 64px; padding-top: 0; align-items: center; }
  .wyp .wyp-pane.on .p-tab { height: 64px; }
}
@media (min-width: 861px) {
  .wyp .wyp-panes { height: 640px; }
  .wyp .p-body { padding-top: 70px; padding-bottom: 32px; }
  .wyp .v-rev { gap: 8px; }
  .wyp .wyp-rv { padding: 10px 14px; }
  .wyp .wyp-rv p { font-size: 12.5px; }
  .wyp .wyp-gattr { margin-top: 8px; }
  .wyp .p-vis { overflow: hidden; }
}
/* Why panels: only the small square changes colour, using the site's main colours */
.wyp .wyp-pane[data-i="0"] { --acc: #22b3a8; }
.wyp .wyp-pane[data-i="1"] { --acc: #0889ad; }
.wyp .wyp-pane[data-i="2"] { --acc: var(--navy); }
.wyp .wyp-pane[data-i="3"] { --acc: #63c6b9; }
.wyp .wyp-pane[data-i="4"] { --acc: #066f8e; }
.wyp .wyp-pane .p-sq, .wyp .wyp-pane.on .p-sq { background: var(--acc); opacity: 1; }
/* Checked: bigger photo that fills the panel */
@media (min-width: 861px) {
  .wyp .wyp-pane[data-i="0"] .v-photo { width: min(560px, 92%); aspect-ratio: 16 / 10; }
}
@media (max-width: 860px) { .wyp .wyp-pane[data-i="0"] .v-photo { width: 100%; aspect-ratio: 4 / 3; } .wyp .v-chip.a { left: 8px; } .wyp .v-chip.b { right: 8px; } }
.wyp .wyp-pane.on .p-word { opacity: 0; }
.wyp .wyp-pane[data-i="0"] .p-vis { overflow: visible; } .wyp .wyp-pane[data-i="0"] .v-chip.a { left: 14px; top: 14px; } .wyp .wyp-pane[data-i="0"] .v-chip.b { right: 14px; bottom: 14px; }

/* ===== "Find the right treatment" tiles: navy hex tiles reveal a clean photo on hover / focus / first tap ===== */
.tx-sec { padding: 72px 0; }
.tx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tx-t { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 24px; border-radius: 20px; overflow: hidden; isolation: isolate; text-decoration: none; color: #fff;
  background-color: #0b2f63;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97' viewBox='0 0 84 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.5'%3E%3Cpath d='M42 1l40 23v47L42 94 2 71V24z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(160deg, #10397a 0%, #072a5c 100%);
  background-size: 84px 97px, cover; box-shadow: 0 14px 30px -24px rgba(5,56,99,.7); transition: box-shadow .4s, transform .4s var(--ease); }
.tx-ph { position: absolute; inset: 0; z-index: -2; }
.tx-ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .4s, transform .6s var(--ease); }
.tx-t::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100%; z-index: -1; background: linear-gradient(180deg, rgba(5,30,70,0) 30%, rgba(5,30,70,.55) 62%, rgba(5,30,70,.92) 100%); transition: top .6s var(--ease); }
.tx-t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .3s; pointer-events: none; }
.tx-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.08); color: #5fd6c9; transition: background .4s, color .4s, opacity .4s; }
.tx-ic .ic, .tx-ic svg { width: 30px; height: 30px; }
.tx-bd { display: flex; flex-direction: column; }
.tx-bd b { font: 700 19px/1.25 var(--title); color: #fff; }
.tx-d { display: block; margin-top: 6px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.8); }
.tx-more { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 600 14.5px var(--title); color: #fff; }
.tx-more .ic { width: 16px; height: 16px; transition: transform .4s; }
.tx-more::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 0; background: #5fd6c9; transition: width .4s; }
.tx-t:hover .tx-ph img, .tx-t:focus-visible .tx-ph img, .tx-t.on .tx-ph img { opacity: 1; transform: scale(1); }
.tx-t:hover::before, .tx-t:focus-visible::before, .tx-t.on::before { top: 0; }
.tx-t:hover::after, .tx-t:focus-visible::after, .tx-t.on::after { border-color: #5fd6c9; }
.tx-t:hover .tx-ic, .tx-t:focus-visible .tx-ic, .tx-t.on .tx-ic { background: rgba(255,255,255,.9); color: #0b2f63; }
.tx-t:hover .tx-more::after, .tx-t:focus-visible .tx-more::after, .tx-t.on .tx-more::after { width: calc(100% - 24px); }
.tx-t:hover .tx-more .ic, .tx-t:focus-visible .tx-more .ic { transform: translateX(3px); }
.tx-t:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgba(5,56,99,.8); }
.tx-t:focus-visible { outline: 3px solid #5fd6c9; outline-offset: 3px; }
@media (max-width: 1100px) { .tx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tx-sec { padding: 52px 0; } .tx-grid { grid-template-columns: 1fr; gap: 14px; } .tx-t { min-height: 240px; padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .tx-t, .tx-ph img, .tx-t::before { transition: none; } }

/* ===== Treatment read-more page (treatment.html) ===== */
.td-hero { padding-bottom: 70px; }
.td-hero .crumbs a { color: #fff; }
.td-sec { padding-top: 64px; }
.td-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; align-items: start; }
.td-side { position: sticky; top: 100px; display: grid; gap: 20px; }
.td-box { padding: 24px; border-radius: 20px; background: #f5f8fa; border: 1px solid #e6edf2; }
.td-box h3 { margin: 0 0 14px; font: 700 20px var(--title); color: var(--navy); }
.td-nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.td-nav a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 12px; background: #fff; font: 600 15px var(--title); color: var(--navy); text-decoration: none; transition: background .3s, color .3s; }
.td-nav a .ic { width: 16px; height: 16px; color: #2a9d90; transition: transform .3s, color .3s; }
.td-nav a:hover, .td-nav a.on { background: #0b2f63; color: #fff; }
.td-nav a:hover .ic, .td-nav a.on .ic { color: #5fd6c9; transform: translateX(3px); }
.td-unit { margin: -8px 0 12px; font-size: 13.5px; color: #5f6a80; }
.td-pr { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid #e3e9ee; }
.td-pr span { font: 600 14px var(--title); color: var(--navy); }
.td-pr b { font: 700 18px var(--title); color: var(--navy); text-align: right; }
.td-pr small { grid-column: 1; font-size: 12.5px; color: #5f6a80; }
.td-pr em { grid-column: 2; grid-row: 2; justify-self: end; font: 700 12px var(--title); font-style: normal; color: var(--teal-700); }
.td-pr.hu b { color: var(--blue-700); } .td-pr.tr b { color: var(--sand-700); } .td-pr.tr em { color: var(--sand-700); }
.td-stay { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 12px; padding-top: 12px; border-top: 1px solid #e3e9ee; font-size: 14px; color: var(--navy); }
.td-stay .ic { flex: none; width: 18px; height: 18px; color: #2a9d90; margin-top: 1px; }
.td-link { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--title); color: var(--teal-700); text-decoration: none; }
.td-link .ic { width: 15px; height: 15px; }
.td-help { position: relative; overflow: hidden; color: #fff; border: 0; background: #0b2f63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97' viewBox='0 0 84 97'%3E%3Cpath d='M42 1l40 23v47L42 94 2 71V24z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E"); }
.td-help h3 { color: #fff; } .td-help p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.82); }
.td-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--action); color: #fff; font: 600 15px var(--title); text-decoration: none; box-shadow: 0 10px 22px -12px rgba(34,150,140,.9); transition: transform .2s; }
.td-cta:hover { transform: translateY(-1px); } .td-cta .ic { width: 16px; height: 16px; }
.td-help .td-cta { width: 100%; margin-bottom: 14px; }
.td-line { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: #fff; text-decoration: none; font-size: 14.5px; }
.td-line .ic { width: 18px; height: 18px; color: #5fd6c9; }
.td-hero-img { margin: 0 0 26px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; background: #eef3f6; }
.td-hero-img img, .td-why figure img, .td-ben figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--body); }
.td-block { margin-top: 44px; }
.td-block h2 { margin: 0 0 12px; font: 600 clamp(26px, 2.6vw, 34px)/1.15 var(--title); letter-spacing: -.02em; color: var(--navy); }
.td-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 8px; }
.td-why figure, .td-ben figure { margin: 0; border-radius: 20px; overflow: hidden; min-height: 260px; }
.td-feats { display: grid; gap: 16px; align-content: start; }
.td-feat { padding: 22px; border-radius: 18px; background: #f5f8fa; border: 1px solid #e6edf2; transition: background .4s, color .4s; }
.td-feat h3 { margin: 0 0 6px; font: 700 18px var(--title); color: var(--navy); transition: color .4s; }
.td-feat p { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #e3e9ee; font-size: 14.5px; line-height: 1.5; color: var(--body); transition: color .4s, border-color .4s; }
.td-bul { display: flex; gap: 8px; align-items: center; font: 600 14px var(--title); color: var(--navy); transition: color .4s; }
.td-bul svg, .td-ben li svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--action); color: #fff; }
.td-feat:hover { background: #0b2f63; } .td-feat:hover h3, .td-feat:hover .td-bul { color: #fff; } .td-feat:hover p { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.16); }
.td-ben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.td-ben ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; align-content: center; }
.td-ben li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; background: #f5f8fa; font: 600 15.5px var(--title); color: var(--navy); }
.td-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.td-step { position: relative; padding: 24px 22px; border-radius: 18px; border: 1px solid #e3e9ee; background: #fff; transition: border-color .3s, box-shadow .3s, transform .3s; }
.td-step:hover { border-color: #9fdad2; box-shadow: 0 18px 34px -24px rgba(5,56,99,.5); transform: translateY(-3px); }
.td-n { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: #eaf7f4; font: 700 15px var(--title); color: var(--teal-700); }
.td-step h3 { margin: 0 0 6px; font: 700 17px var(--title); color: var(--navy); }
.td-step p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.td-faq { display: grid; gap: 12px; margin-top: 8px; }
.td-q { border-radius: 16px; background: #f5f8fa; border: 1px solid #e6edf2; overflow: hidden; transition: background .3s; }
.td-q button { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border: 0; background: none; text-align: left; font: 600 16.5px var(--title); color: var(--navy); cursor: pointer; }
.td-q button i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; font-style: normal; font-size: 18px; color: var(--teal-700); transition: transform .4s var(--ease), background .3s, color .3s; }
.td-q.open { background: #0b2f63; border-color: #0b2f63; } .td-q.open button { color: #fff; } .td-q.open button i { transform: rotate(45deg); background: var(--action); color: #fff; }
.td-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.td-q.open .td-a { grid-template-rows: 1fr; }
.td-a > div { overflow: hidden; } .td-a p { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); }
.td-end { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 48px; padding: 32px; border-radius: 22px; background: #eefaf7; border: 1px solid #cdeee8; }
.td-end h2 { margin: 0 0 6px; font: 600 26px var(--title); color: var(--navy); } .td-end p { margin: 0; color: var(--body); }
.td-end .td-cta { flex: none; }
@media (max-width: 1100px) { .td-wrap { grid-template-columns: 1fr; } .td-side { position: static; order: 2; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 760px) { .td-why, .td-ben, .td-steps { grid-template-columns: 1fr; } .td-end { flex-direction: column; align-items: flex-start; padding: 24px; } .td-sec { padding-top: 40px; } }
@media (max-width: 760px) { .td-why figure, .td-ben figure { min-height: 0; aspect-ratio: 16 / 10; } }

/* ===== Treatment tiles v2: same size as the six step cards, inverse (navy) design, scroll row ===== */
.tx-sec.tx-after-cmp { padding-top: 8px; }
.cmp-sec { padding-bottom: 28px; }
.tx-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 6); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 10px; margin: -4px -2px 0; }
.tx-row::-webkit-scrollbar { display: none; }
.tx-row .tx-t { scroll-snap-align: start; min-height: 0; height: 100%; padding: 18px 16px 16px; border-radius: 16px; justify-content: flex-start; box-shadow: 0 8px 20px -18px rgba(5,56,99,.6); }
.tx-row .tx-t:hover { transform: none; }
.tx-top { display: flex; align-items: center; gap: 10px; }
.tx-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0b2f63; font: 700 14px var(--title); transition: background .4s, color .4s; }
.tx-row .tx-ic { width: 30px; height: 30px; border-radius: 0; background: none; color: #5fd6c9; }
.tx-row .tx-ic .ic, .tx-row .tx-ic svg { width: 30px; height: 30px; }
.tx-row .tx-t:hover .tx-ic, .tx-row .tx-t:focus-visible .tx-ic, .tx-row .tx-t.on .tx-ic { background: none; color: #fff; }
.tx-row .tx-t:hover .tx-n, .tx-row .tx-t:focus-visible .tx-n, .tx-row .tx-t.on .tx-n { background: var(--action); color: #fff; }
.tx-row .tx-bd { flex: 1; }
.tx-row .tx-bd b { display: block; margin: 14px 0 6px; font: 700 15px/1.25 var(--title); }
.tx-row .tx-d { margin: 0; padding-bottom: 12px; font-size: 13px; line-height: 1.5; flex: 1; }
.tx-row .tx-more { margin-top: 12px; font-size: 13.5px; }
.tx-row .tx-more .ic { width: 14px; height: 14px; }
.tx-row .tx-t::before { background: linear-gradient(180deg, rgba(5,30,70,.25) 0%, rgba(5,30,70,.45) 40%, rgba(5,30,70,.92) 100%); }
.tx-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.tx-nav button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d9e2ea; background: #fff; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.tx-nav button:hover:not(:disabled) { background: #0b2f63; border-color: #0b2f63; color: #fff; }
.tx-nav button:disabled { opacity: .35; cursor: default; }
.tx-nav .ic { width: 18px; height: 18px; }
.tx-fits .tx-nav { display: none; }
@media (max-width: 1240px) { .tx-row { grid-auto-columns: calc((100% - 36px) / 4); } }
@media (max-width: 860px) { .tx-row { grid-auto-columns: calc((100% - 12px) / 2); } }
@media (max-width: 560px) { .tx-row { grid-auto-columns: 72%; } .tx-row .tx-t { min-height: 220px; } }
.tx-grid[data-tx-tiles] { display: block; } @media (min-width: 561px) { .tx-row .tx-t { min-height: 224px; } }
.tx-row { padding: 4px 0 10px; margin: -4px 0 0; }
.tx-row .tx-t::before { background: linear-gradient(180deg, rgba(5,30,70,.05) 0%, rgba(5,30,70,.2) 35%, rgba(5,30,70,.78) 70%, rgba(5,30,70,.95) 100%); }

/* ===== Treatment tiles v3: exactly the comparison tiles' size, order and wording – inverse (navy) ===== */
.tx-sec .tx-row.cmp-tiles { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; overflow: visible; padding: 0; margin: 0; scroll-snap-type: none; }
.tx-row .tx-t { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-height: 176px; height: auto; padding: 14px 8px 12px; border-radius: 16px; text-align: center; color: #fff; }
.tx-row .tx-t .tx-pic { position: relative; flex: none; width: 60px; height: 60px; margin: 0 0 8px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); transition: opacity .4s, transform .5s var(--ease); }
.tx-row .tx-t b { display: block; min-height: 0; margin: 0; font: 700 14px/1.25 var(--title); color: #fff; }
.tx-row .tx-t small { display: block; margin-top: auto; padding-top: 6px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.78); }
.tx-go { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; transition: background .3s, transform .3s; }
.tx-go .ic { width: 13px; height: 13px; }
.tx-row .tx-t:hover .tx-go, .tx-row .tx-t:focus-visible .tx-go, .tx-row .tx-t.on .tx-go { background: #22b3a8; transform: translateX(2px); }
.tx-row .tx-t:hover .tx-pic, .tx-row .tx-t:focus-visible .tx-pic, .tx-row .tx-t.on .tx-pic { opacity: 0; transform: translateY(-6px) scale(.9); }
.tx-row .tx-t::before { background: linear-gradient(180deg, rgba(5,30,70,0) 20%, rgba(5,30,70,.55) 55%, rgba(5,30,70,.94) 100%); }
.tx-row .tx-t .tx-ph, .tx-row .tx-t b, .tx-row .tx-t small { position: relative; }
.tx-row .tx-t .tx-ph { position: absolute; }
.tx-nav { display: none !important; }
@media (max-width: 1240px) { .tx-sec .tx-row.cmp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tx-sec .tx-row.cmp-tiles { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 136px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
  .tx-row .tx-t { scroll-snap-align: start; min-height: 192px; }
}
.tx-row .tx-t b { display: flex; align-items: center; justify-content: center; min-height: 36px; }
.tx-row .tx-t { min-height: 192px; }
@media (max-width: 1240px) and (min-width: 761px) { .tx-row .tx-t { min-height: 180px; } }
/* ===== v4: the v2 design (number + icon, left-aligned, Read more) at the comparison tiles' size ===== */
.tx-v4 .tx-t { align-items: stretch; text-align: left; padding: 14px 12px 12px; }
.tx-v4 .tx-top { gap: 8px; }
.tx-v4 .tx-n { width: 26px; height: 26px; font-size: 13px; }
.tx-v4 .tx-ic, .tx-v4 .tx-ic .ic, .tx-v4 .tx-ic svg { width: 26px; height: 26px; }
.tx-v4 .tx-bd { display: flex; flex-direction: column; flex: 1; }
.tx-v4 .tx-t b { display: block; min-height: 0; margin: 10px 0 4px; font: 700 14px/1.25 var(--title); text-align: left; }
.tx-v4 .tx-d { flex: 1; margin: 0; padding-bottom: 8px; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.16); }
.tx-v4 .tx-more { margin-top: 8px; font-size: 12.5px; gap: 6px; }
.tx-v4 .tx-more .ic { width: 13px; height: 13px; }
.tx-v4 .tx-t::before { background: linear-gradient(180deg, rgba(5,30,70,.05) 0%, rgba(5,30,70,.25) 35%, rgba(5,30,70,.8) 70%, rgba(5,30,70,.95) 100%); }
@media (max-width: 760px) { .cmp-tiles { scroll-padding-inline: 16px; } }

/* ===== Treatment tiles: no numbers, bigger scannable titles ===== */
.tx-v4 .tx-ic, .tx-v4 .tx-ic .ic, .tx-v4 .tx-ic svg { width: 28px; height: 28px; }
.tx-v4 .tx-t b { margin: 12px 0 5px; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.tx-v4 .tx-d { font-size: 12.5px; }
.tx-v4 .tx-t:hover .tx-ic, .tx-v4 .tx-t:focus-visible .tx-ic, .tx-v4 .tx-t.on .tx-ic { color: #fff; }
.tx-v4 .tx-t .tx-ph img { filter: saturate(1.08); }
.tx-v4 .tx-t:hover b, .tx-v4 .tx-t.on b { text-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* ===== Treatments section: own band (divider) and roomier tiles – 4 per row ===== */
.tx-sec.tx-after-cmp { margin-top: 40px; padding: 72px 0 80px; background: linear-gradient(180deg, #f2f7fa 0%, #f7fafc 100%); border-top: 1px solid #e3edf2; border-bottom: 1px solid #e3edf2; }
.tx-sec .tx-row.cmp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tx-v4 .tx-t, .tx-row .tx-t { min-height: 250px; padding: 26px 24px 22px; border-radius: 20px; }
.tx-v4 .tx-ic, .tx-v4 .tx-ic .ic, .tx-v4 .tx-ic svg { width: 38px; height: 38px; }
.tx-v4 .tx-t b { margin: 22px 0 8px; font-size: 20px; line-height: 1.2; }
.tx-v4 .tx-d { font-size: 14.5px; line-height: 1.5; padding-bottom: 16px; }
.tx-v4 .tx-more { margin-top: 14px; font-size: 14.5px; gap: 8px; }
.tx-v4 .tx-more .ic { width: 16px; height: 16px; }
.tx-sec .cmp-head-row { margin-bottom: 30px; }
@media (max-width: 1100px) { .tx-sec .tx-row.cmp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tx-sec.tx-after-cmp { margin-top: 24px; padding: 52px 0 56px; }
  .tx-sec .tx-row.cmp-tiles { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; gap: 14px; }
  .tx-v4 .tx-t, .tx-row .tx-t { min-height: 230px; padding: 22px 20px 20px; }
}

/* ===== Treatments under the hero: white cards, 3D picture, hover reveals the clinic photo ===== */
.txc-sec { padding: 56px 0 24px; }
.txc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.txc { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 188px; padding: 22px 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #e3e9ee; box-shadow: 0 8px 22px -20px rgba(5,56,99,.45); text-align: center; text-decoration: none; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.txc-ph { position: absolute; inset: 0; z-index: -1; background: url("../img/treatments/hover-photo.webp") center 30% / cover no-repeat; opacity: 0; transform: scale(1.06); transition: opacity .45s, transform .7s var(--ease); }
.txc-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,30,70,.15) 0%, rgba(5,30,70,.55) 55%, rgba(5,30,70,.9) 100%); }
.txc-pic { width: 84px; height: 84px; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 8px 10px rgba(5,56,99,.18)); transition: transform .5s var(--ease), filter .4s; }
.txc b { display: inline-flex; align-items: center; gap: 4px; font: 700 16.5px/1.25 var(--title); color: var(--navy); transition: color .3s; }
.txc-chev .ic { width: 16px; height: 16px; transition: transform .3s; }
.txc small { display: block; margin-top: 6px; max-width: 230px; font-size: 13.5px; line-height: 1.45; color: #5f6a80; transition: color .3s; }
.txc:hover, .txc:focus-visible, .txc.on { border-color: transparent; box-shadow: 0 22px 40px -24px rgba(5,56,99,.7); transform: translateY(-3px); }
.txc:hover .txc-ph, .txc:focus-visible .txc-ph, .txc.on .txc-ph { opacity: 1; transform: none; }
.txc:hover b, .txc:focus-visible b, .txc.on b { color: #fff; }
.txc:hover small, .txc:focus-visible small, .txc.on small { color: rgba(255,255,255,.88); }
.txc:hover .txc-pic, .txc:focus-visible .txc-pic, .txc.on .txc-pic { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.txc:hover .txc-chev .ic, .txc:focus-visible .txc-chev .ic { transform: translateX(3px); }
.txc:focus-visible { outline: 3px solid #22b3a8; outline-offset: 3px; }
@media (max-width: 1100px) { .txc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .txc-sec { padding: 40px 0 16px; } .txc-grid { gap: 12px; } .txc { min-height: 170px; padding: 18px 10px 16px; } .txc-pic { width: 64px; height: 64px; } .txc b { font-size: 14.5px; } .txc small { font-size: 12.5px; } }
.txc { justify-content: flex-start; }
.txc-pic { flex: none; }
.txc b { min-height: 21px; }
@media (max-width: 560px) { .txc b { min-height: 36px; align-items: center; justify-content: center; } }
/* Hover: hide the 3D picture, keep the photo, title and description */
.txc-pic { transition: opacity .3s, transform .4s var(--ease); }
.txc:hover .txc-pic, .txc:focus-visible .txc-pic, .txc.on .txc-pic { opacity: 0; transform: scale(.85); filter: none; }
.j4-home { margin-top: 32px; padding: 64px 0; }

/* ===== Compact 4-step strip (home) ===== */
.js4 { padding: 8px 0 28px; }
.js4-in { display: flex; align-items: center; gap: 24px; padding: 14px 20px; border: 1px solid #e3e9ee; border-radius: 16px; background: #fff; }
.js4-t { flex: none; margin: 0; padding-right: 22px; border-right: 1px solid #e3e9ee; font: 600 12px var(--title); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700); }
.js4-list { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.js4-list li { position: relative; }
.js4-list li:not(:last-child)::after { content: ""; position: absolute; right: -2px; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid #b9c7d2; border-right: 1.5px solid #b9c7d2; transform: translateY(-50%) rotate(45deg); }
.js4-list a { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 4px; border-radius: 10px; text-decoration: none; transition: background .2s; }
.js4-list a:hover { background: #f2f8f7; }
.js4-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e6f6f3; font: 700 11.5px var(--title); color: var(--teal-700); }
.js4-ic { flex: none; color: #22b3a8; } .js4-ic .ic { width: 20px; height: 20px; }
.js4-tx b { display: block; font: 600 14px/1.2 var(--title); color: var(--navy); }
.js4-tx small { display: block; margin-top: 2px; font-size: 12.5px; color: #5f6a80; }
@media (max-width: 1100px) { .js4-in { flex-direction: column; align-items: stretch; gap: 10px; } .js4-t { padding: 0 0 8px; border-right: 0; border-bottom: 1px solid #e3e9ee; } .js4-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .js4-list li::after { display: none; } }
@media (max-width: 480px) { .js4-list { grid-template-columns: 1fr; gap: 2px; } }

/* Palette v1: section labels as teal pills (style guide, section 5) */
.cmp-head-row .cmp-eye { padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--teal-100); color: var(--teal-700); }
.cmp-head-row .cmp-pound { background: var(--brand); color: #fff; }
.wy-eye::before, .wy-eye::after, .why-eye::before, .hd2 .why-eye::before { background: var(--brand); }

/* Treatment carousel (tx-tiles.js "carousel"): centred card full size, neighbours scaled to .86, looping */
.txk { --w: min(32vw, 400px); --h: 500px; --gap: 32px; position: relative; padding: 8px 0 44px; }
.txk-stage { position: relative; height: var(--h); touch-action: pan-y; user-select: none; }
.txk-card { position: absolute; top: 0; left: 50%; width: var(--w); height: 100%; margin-left: calc(var(--w) / -2); border-radius: var(--r-lg); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; text-decoration: none; background: var(--blue-900);
  transform: translateX(calc(var(--o) * (var(--w) * .93 + var(--gap)))) scale(.86); opacity: .9; z-index: 1;
  box-shadow: 0 18px 40px -26px rgba(35, 54, 88, .6); transition: transform .5s var(--ease), opacity .5s, box-shadow .5s; }
.txk-card[data-pos="c"] { transform: translateX(0) scale(1); opacity: 1; z-index: 3; box-shadow: 0 30px 60px -28px rgba(35, 54, 88, .75); }
.txk-card[data-pos="h"] { opacity: 0; pointer-events: none; }
.txk-card.jump { transition: none; }
.txk-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 6s linear; }
.txk-card[data-pos="c"] .txk-photo { transform: scale(1.06); }
.txk-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(35, 54, 88, 0) 30%, rgba(35, 54, 88, .55) 58%, rgba(35, 54, 88, .94) 100%); }
.txk-pic { position: absolute; top: 18px; left: 18px; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); }
.txk-pic img { width: 50px; height: 50px; object-fit: contain; }
.txk-body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 6px; }
.txk-body b { font: 600 24px/1.15 var(--title); letter-spacing: -.01em; color: #fff; }
.txk-body small { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.txk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.txk-price, .txk-stay { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 600 13px/1 var(--title); }
.txk-price { background: #fff; color: var(--teal-700); }
.txk-price:empty { display: none; }
.txk-stay { background: rgba(255, 255, 255, .16); color: #fff; }
.txk-stay .ic { width: 14px; height: 14px; }
.txk-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 14px var(--title); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .4s .1s, transform .4s .1s; }
.txk-more .ic { width: 16px; height: 16px; }
.txk-card[data-pos="c"] .txk-more { opacity: 1; transform: none; }
.txk-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.txk-nav { position: absolute; top: calc(var(--h) / 2); z-index: 5; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--teal-700); box-shadow: 0 8px 24px -10px rgba(35, 54, 88, .45); transition: transform .2s, background .2s; }
.txk-nav:hover { background: var(--teal-50); transform: scale(1.06); }
.txk-nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.txk-nav .ic { width: 22px; height: 22px; }
.txk-nav.prev { left: calc(50% - var(--w) * 1.36 - var(--gap) - 24px); }
.txk-nav.next { right: calc(50% - var(--w) * 1.36 - var(--gap) - 24px); }
.txk-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; }
.txk-dots button { width: 8px; height: 8px; border-radius: 999px; background: var(--slate-300); transition: width .3s var(--ease), background .3s; }
.txk-dots button[aria-selected="true"] { width: 26px; background: var(--action); }
@media (max-width: 980px) { .txk { --w: min(52vw, 400px); --h: 460px; --gap: 18px; } .txk-nav.prev { left: 8px; } .txk-nav.next { right: 8px; } }
@media (max-width: 560px) { .txk { --w: 78vw; --h: 440px; --gap: 12px; } .txk-body b { font-size: 21px; } .txk-nav { width: 42px; height: 42px; margin-top: -21px; } }
@media (prefers-reduced-motion: reduce) { .txk-card, .txk-photo, .txk-more { transition: none; } .txk-card[data-pos="c"] .txk-photo { transform: none; } }
/* Treatment carousel – static cards: the treatment photo on top (it fades into white), title and details
   below on a white card. No hover swap; the whole card is a link to the treatment page. */
/* Size: the carousel fills the container from edge to edge – contact rail on the left, then the centre card
   and both neighbours stretched to the right edge (card width derived from the space left: 2.72 card
   widths + 2 gaps). Tablets and phones: the rail becomes a row above, the neighbours peek in and are
   clipped at the container edge so nothing runs off the page. 8px grid throughout. */
.txk-wrap { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; align-items: center; }
.txk-rail { display: flex; flex-direction: column; gap: 12px; }
.txk-rail a { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-sm); background: #fff; color: var(--brand); box-shadow: var(--shadow-s); transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s; }
.txk-rail a:hover { background: var(--teal-50); color: var(--action); transform: translateY(-2px); box-shadow: var(--shadow); }
.txk-rail a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.txk-rail svg { width: 28px; height: 28px; }
.txk-box { container-type: inline-size; min-width: 0; }
.txk { --gap: 32px; --w: calc((100cqw - 2 * var(--gap)) / 2.72); --h: calc(var(--w) / 1.9 + 116px); padding: 8px 0 48px; }
.txk-card { justify-content: flex-start; color: var(--navy); background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r); cursor: pointer; }
.txk-card[data-pos="c"] { border-color: transparent; box-shadow: var(--shadow-l); }
.txk-photo { position: relative; inset: auto; z-index: 0; width: 100%; height: auto; aspect-ratio: 1.9; flex: none; object-fit: cover; object-position: 50% 50%; transition: none; }
.txk-card[data-pos="c"] .txk-photo { transform: none; }
.txk-body { flex: 1; padding: 14px 20px 16px; gap: 4px; justify-content: center; }
.txk-body b { font-size: 20px; color: var(--navy); }
.txk-body small { font-size: 14px; color: var(--slate-500); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.txk-price { background: var(--teal-100); color: var(--teal-700); }
.txk-stay { background: var(--slate-100); color: var(--slate-600); }
.txk-meta { align-items: center; margin-top: 4px; }
.txk-hd { display: flex; align-items: center; gap: 12px; }
.txk-hd b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txk-more { flex: none; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--teal-50); color: var(--action); opacity: 1; transform: none; transition: background .2s, color .2s; }
.txk-card[data-pos="c"] .txk-more { background: var(--action); color: #fff; }
.txk-more .ic { width: 16px; height: 16px; }
.txk-nav.prev { left: -20px; }
.txk-nav.next { right: -20px; }
.txk-nav { width: 52px; height: 52px; margin-top: -26px; }
@media (max-width: 980px) {
  .txk-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .txk-rail { flex-direction: row; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .txk-rail a { width: auto; height: 56px; }
  .txk-rail svg { width: 26px; height: 26px; }
  .txk-box { overflow-x: clip; overflow-clip-margin: 0; }
  .txk { --gap: 16px; --w: min(64cqw, 420px); }
  .txk-nav.prev { left: 8px; } .txk-nav.next { right: 8px; }
}
@media (max-width: 560px) {
  .txk { --gap: 12px; --w: 84cqw; --h: calc(var(--w) / 1.9 + 112px); padding-bottom: 40px; }
  .txk-body { padding: 12px 16px 14px; } .txk-body b { font-size: 18px; } .txk-body small { font-size: 13.5px; }
  .txk-nav { width: 40px; height: 40px; margin-top: -20px; } .txk-nav.prev { left: 8px; } .txk-nav.next { right: 8px; }
}
/* Treatment chooser tiles: flat grey illustrations (assets/img/treatments/grey/) – same size as before, no 3D drop shadow */
.cmp-t img.cmp-gi { filter: none; }
/* Compare prices: the old six "how to use" cards are now one short, collapsed note */
.cmp-howto { margin: 16px 0 0; border: 1px solid var(--slate-200); border-radius: var(--r-sm); background: #fff; }
.cmp-howto summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font: 600 15px var(--title); color: var(--teal-700); }
.cmp-howto summary::-webkit-details-marker { display: none; }
.cmp-howto summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.cmp-howto[open] summary::before { transform: rotate(45deg); }
.cmp-howto summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
.cmp-howto-b { padding: 0 18px 16px 36px; }
.cmp-howto-b p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--slate-500); max-width: 860px; }
.cmp-howto-b p:last-child { margin: 0; }
.cmp-howto-b a { color: var(--teal-700); font-weight: 600; text-decoration: underline; }
/* hero partner strip: keep "Reviews on" on one line */
.hero .mk .mk-f .via { white-space: nowrap; }
/* Home page rhythm: one vertical spacing step (--sec, on the 8px grid) between every block, so the page reads
   evenly from hero to footer. Content edges all follow the 1240px container. */
body[data-page="home"] { --sec: 110px; } /* style guide: standard section padding */
@media (max-width: 980px) { body[data-page="home"] { --sec: 64px; } }
@media (max-width: 560px) { body[data-page="home"] { --sec: 48px; } }
body[data-page="home"] #find-treatment { padding: 28px 0 var(--sec); } /* first section under the hero: a shorter gap so the treatments show sooner on smaller screens */
@media (max-width: 980px) { body[data-page="home"] #find-treatment { padding-top: 16px; } }
@media (max-width: 560px) { body[data-page="home"] #find-treatment { padding-top: 12px; } }
body[data-page="home"] #journey-steps { padding: 0 0 var(--sec); }
body[data-page="home"] #journey-steps.section { padding: 0 0 var(--sec); } /* follows the carousel: the carousel's bottom spacing separates them */
body[data-page="home"] #compare-prices,
body[data-page="home"] #why,
body[data-page="home"] #clinics,
body[data-page="home"] #faq { padding: var(--sec) 0; }
body[data-page="home"] section.vision { padding: var(--sec) 0 0; }
body[data-page="home"] #clinics + .container { margin-top: 0; margin-bottom: 0; }
body[data-page="home"] #partners { padding-bottom: var(--sec); }
body[data-page="home"] .footer { margin-top: 0; }


/* How it works – its own section: head + four step cards in a numbered row (style guide 9.3 step card, 9.7 journey).
   Desktop: one row with chevrons between cards; tablet: 2 × 2; phone: a vertical list. */
.js4-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.js4-list li { position: relative; }
.js4-list li:not(:last-child)::after { content: none; display: none; }
.js4-list li:not(:last-child)::before { content: ""; position: absolute; right: -16px; top: 46px; width: 8px; height: 8px; border-top: 2px solid var(--slate-300); border-right: 2px solid var(--slate-300); transform: rotate(45deg); z-index: 1; }
.js4-list a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.js4-list a:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--teal-200); background: #fff; }
.js4-list a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.js4-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 10px; }
.js4-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--teal-50); color: var(--action); }
.js4-ic .ic { width: 24px; height: 24px; }
.js4-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--action); color: #fff; font: 600 14px var(--title); }
.js4-list b { font: 600 20px/1.2 var(--title); letter-spacing: -.01em; color: var(--navy); }
.js4-list small { font-size: 14px; line-height: 1.5; color: var(--slate-500); }
.js4-more { color: var(--teal-700); font-weight: 600; text-decoration: underline; white-space: nowrap; }
@media (max-width: 980px) { .js4-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .js4-list li::before { display: none; } }
@media (max-width: 560px) {
  .js4-list { grid-template-columns: 1fr; gap: 12px; }
  .js4-list a { flex-direction: row; align-items: center; gap: 16px; padding: 16px; }
  .js4-top { width: auto; margin: 0; flex-direction: row-reverse; gap: 0; position: relative; }
  .js4-n { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; font-size: 12px; }
  .js4-list b { font-size: 17px; } .js4-list a > small { margin-top: 0; }
  .js4-list a { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; }
  .js4-top { grid-row: span 2; }
}
#journey-steps .sec-head { margin-bottom: 48px; }
@media (max-width: 560px) { #journey-steps .sec-head { margin-bottom: 32px; } }
/* How it works steps – no boxes: a connected timeline. Icon in a round tile on a thin line running through
   all four steps, number badge on the icon, title and one line centred below. Phones: a vertical timeline. */
.js4-list { gap: 24px; }
.js4-list li:not(:last-child)::before { display: none; }
.js4-list li:not(:last-child)::after { content: ""; display: block; position: absolute; transform: none; border: 0; width: auto; top: 36px; left: calc(50% + 48px); right: calc(-50% + 36px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--teal-200), var(--slate-200)); }
.js4-list a { align-items: center; text-align: center; gap: 6px; padding: 0 8px; border: 0; border-radius: var(--r); background: none; box-shadow: none; }
.js4-list a:hover { transform: none; box-shadow: none; background: none; border: 0; }
.js4-list a:hover .js4-ic { transform: translateY(-2px); box-shadow: var(--shadow); }
.js4-list a:hover b { color: var(--teal-700); }
.js4-top { justify-content: center; width: auto; margin: 0 0 12px; position: relative; }
.js4-ic { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); color: var(--action); transition: transform .2s var(--ease), box-shadow .2s; }
.js4-ic .ic { width: 28px; height: 28px; }
.js4-n { position: absolute; top: -4px; right: -8px; width: 28px; height: 28px; font-size: 13px; box-shadow: 0 0 0 3px #fff; }
.js4-list b { transition: color .2s; }
@media (max-width: 980px) { .js4-list li:nth-child(2)::after { display: none; } }
@media (max-width: 560px) {
  .js4-list { gap: 0; }
  .js4-list li:not(:last-child)::after { display: block; transform: none; top: 64px; bottom: -8px; left: 31px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--teal-200), var(--slate-200)); }
  .js4-list li:nth-child(2)::after { display: block; }
  .js4-list a { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; text-align: left; padding: 0 0 24px; }
  .js4-top { grid-row: span 2; margin: 0; align-self: start; flex-direction: row; }
  .js4-ic { width: 64px; height: 64px; }
  .js4-n { position: absolute; top: -4px; left: auto; right: -6px; width: 24px; height: 24px; font-size: 12px; }
  .js4-list b { align-self: end; }
  .js4-list small { align-self: start; }
}
/* About us (home): centred head with a faint oversized word behind it and a short brand-teal rule, the copy in two
   columns across the full container (each column keeps a readable line length), key phrases in teal 700 */
body[data-page="home"] #about { padding: 0 0 var(--sec); } /* follows the white 4-steps section: its bottom spacing separates them */
.abt-head { position: relative; isolation: isolate; gap: 16px; margin-bottom: 48px; }
.abt-head::after { content: ""; width: 64px; height: 3px; margin-top: 8px; border-radius: 3px; background: var(--brand); }
.abt-ghost { position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -62%); white-space: nowrap; pointer-events: none; font: 700 clamp(72px, 11vw, 150px)/1 var(--title); letter-spacing: -.03em; text-transform: uppercase; color: #e3f6f3; }
.abt-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 56px; }
.abt-cols p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--slate-500); }
.abt-cols strong { font-weight: 600; color: var(--teal-700); }
.abt-cols p:first-child strong:first-child { color: var(--navy); }
.abt-more { margin: 40px 0 0; text-align: center; }
.abt-more .link-arrow { padding-bottom: 6px; border-bottom: 2px solid var(--line); text-transform: uppercase; letter-spacing: .08em; }
.abt-more .link-arrow:hover { border-color: var(--brand); }
@media (max-width: 860px) { .abt-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .abt-cols p { font-size: 16px; } .abt-head { margin-bottom: 32px; } }
/* Patient reviews (home): slate 50 section, centred head (shared .abt-head), a scroll-snap row of review cards –
   three on desktop, peeking on phones – with round arrows on the edges. Stars in amber 400, the clinic chip in its
   country colours (Hungary blue, Turkey sand). */
body[data-page="home"] #reviews { padding: var(--sec) 0; background: var(--slate-50); }
.rvw .abt-ghost { color: #e8eef5; }
.rvw-lead { max-width: 620px; }
.rvw-wrap { position: relative; }
.rvw-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px 2px 24px; scrollbar-width: none; }
.rvw-track::-webkit-scrollbar { display: none; }
.rvw-track:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: var(--r); }
.rvw-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); }
.rvw-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rvw-stars { display: inline-flex; gap: 2px; }
.rvw-stars span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--slate-200); }
.rvw-stars span.on { background: #ffb539; }
.rvw-stars svg { width: 15px; height: 15px; fill: #fff; }
.rvw-when { font-size: 13px; color: var(--slate-500); }
.rvw-text { flex: 1; margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--slate-600); }
.rvw-more { align-self: flex-start; font: 600 14px var(--title); color: var(--teal-700); text-decoration: underline; }
.rvw-clinic { align-self: flex-start; padding: 5px 10px; border-radius: 999px; font: 600 12.5px var(--title); }
.rvw-clinic.hu { background: var(--blue-50); color: var(--blue-700); }
.rvw-clinic.tr { background: var(--sand-100); color: var(--sand-700); }
.rvw-by { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.rvw-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: var(--teal-100); color: var(--teal-700); font: 600 14px var(--title); }
.rvw-by b { display: block; font: 600 15px var(--title); color: var(--navy); }
.rvw-by b a { color: inherit; }
.rvw-by small { font-size: 12.5px; color: var(--slate-500); }
.rvw-nav { position: absolute; top: calc(50% - 12px); z-index: 2; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--teal-700); box-shadow: var(--shadow); transition: transform .2s var(--ease), opacity .2s; }
.rvw-nav.prev { left: -24px; } .rvw-nav.next { right: -24px; }
.rvw-nav:hover:not(:disabled) { transform: scale(1.06); }
.rvw-nav:disabled { opacity: 0; pointer-events: none; }
.rvw-nav:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.rvw-nav .ic { width: 22px; height: 22px; }
.rvw-off { grid-column: 1 / -1; margin: 0; padding: 32px; border: 1px dashed var(--slate-300); border-radius: var(--r); background: #fff; text-align: center; color: var(--slate-500); }
.rvw-off a { color: var(--teal-700); font-weight: 600; text-decoration: underline; }
.rvw-empty .rvw-nav { display: none; }
.rvw-src { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; font-size: 13px; color: var(--slate-500); text-align: center; }
.rvw-src img { height: 18px; width: auto; }
@media (max-width: 980px) { .rvw-track { grid-auto-columns: calc((100% - 24px) / 2); } .rvw-nav.prev { left: -8px; } .rvw-nav.next { right: -8px; } }
@media (max-width: 560px) { .rvw-track { grid-auto-columns: 86%; gap: 16px; } .rvw-nav { display: none; } .rvw-card { padding: 20px; } }
.rvw-empty .rvw-track { display: block; padding-bottom: 0; }
@media (max-width: 560px) { .rvw-src { display: block; } .rvw-src img { display: inline-block; vertical-align: middle; } }
/* Reviews: one primary action plus one ghost (style guide 9.1), centred under the cards */
.rvw-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
@media (max-width: 560px) { .rvw-cta { flex-direction: column-reverse; align-items: stretch; } .rvw-cta .btn { justify-content: center; } }
/* Reviews, style-guide pass: stars in brand teal (amber is the warning colour), 16px review text, cards with one
   resting shadow, the clinic block as a tinted panel in its country colours (approved pairings: Blue Sapphire on
   Quiet Tide, sand 700 on sand 100) carrying the clinic's overall Google rating and review count (9.9), arrows in
   the side gutters so they never cover a card. */
.rvw-card { border: 0; box-shadow: var(--shadow-s); gap: 16px; }
.rvw-stars { gap: 1px; color: var(--brand); }
.rvw-stars span, .rvw-stars span.on { width: 18px; height: 18px; border-radius: 0; background: none; }
.rvw-stars svg { width: 18px; height: 18px; fill: currentColor; }
.rvw-stars span:not(.on) { color: var(--slate-200); }
.rvw-text { font-size: 16px; line-height: 1.65; color: var(--slate-500); }
.rvw-more { margin-top: -4px; }
.rvw-clinic { align-self: stretch; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-sm); font: 400 13px/1.4 var(--text); }
.rvw-clinic b { font: 600 14px/1.3 var(--title); }
.rvw-clinic.hu { background: var(--blue-100); color: var(--blue-700); }
.rvw-clinic.tr { background: var(--sand-100); color: var(--sand-700); }
.rvw-g { white-space: nowrap; }
.rvw-by { margin-top: 0; }
.rvw-nav.prev { left: -72px; } .rvw-nav.next { right: -72px; }
@media (max-width: 1400px) { .rvw-nav.prev { left: -20px; } .rvw-nav.next { right: -20px; } }
@media (max-width: 980px) { .rvw-nav { display: none; } }
/* Reviews in country colours (style guide 4.2: label, card edge and tint): a 4px top edge in the country's bar
   colour, stars in that colour, the clinic panel in its tint. Hungary = Maui Blue / Blue Sapphire on Quiet Tide,
   Turkey = sand 400 / sand 700 on sand 100. */
.rvw-card { border-top: 4px solid var(--slate-200); }
.rvw-card.hu { border-top-color: var(--blue-400); }
.rvw-card.tr { border-top-color: var(--sand-400); }
.rvw-card.hu .rvw-stars { color: var(--blue-400); }
.rvw-card.tr .rvw-stars { color: var(--sand-500); }
/* Treatment explorer (treatments.html): a selectable row of the 10 treatments, the chosen one described underneath.
   Tabs: grey illustration + name, selected = teal border and pale teal fill (style guide 9.4 choice tiles).
   Panel: picture left, text right; prices in country colours; one primary and one ghost button. */
.tex-tabs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.tex-tabs button { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 112px; padding: 12px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; text-align: center; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s; }
.tex-tabs button:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); }
.tex-tabs button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tex-tabs button[aria-selected="true"] { border: 2px solid var(--brand); background: var(--teal-50); }
.tex-tabs button[aria-selected="true"] b { color: var(--teal-700); }
.tex-pic img { width: 44px; height: 44px; object-fit: contain; }
.tex-tabs b { font: 600 13px/1.2 var(--title); color: var(--navy); }
.tex-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; padding: 32px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-s); }
.tex-panel:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.tex-img { position: sticky; top: 110px; border-radius: var(--r); overflow: hidden; }
.tex-img img { display: block; width: 100%; height: auto; aspect-ratio: 960 / 505; object-fit: cover; }
.tex-body h3 { margin: 0; font: 600 clamp(26px, 2.4vw, 32px)/1.15 var(--title); letter-spacing: -.02em; color: var(--navy); }
.tex-short { margin: 8px 0 16px; font: 600 17px var(--title); color: var(--highlight); }
.tex-body > p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--slate-500); }
.tex-stay { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--slate-50); color: var(--slate-600) !important; }
.tex-stay .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--action); }
.tex-stay b { color: var(--navy); margin-right: 4px; }
.tex-ben { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin: 16px 0; padding: 0; list-style: none; }
.tex-ben li { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--slate-600); }
.tex-ben .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }
.tex-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
.tex-prices > div { padding: 12px 14px; border-radius: var(--r-sm); border-top: 3px solid; }
.tex-prices .hu { background: var(--blue-50); border-color: var(--blue-400); }
.tex-prices .tr { background: var(--sand-50); border-color: var(--sand-400); }
.tex-prices .uk { background: var(--plum-50); border-color: var(--plum-400); }
.tex-prices small { display: block; font: 600 12px var(--title); letter-spacing: .02em; }
.tex-prices .hu small { color: var(--blue-700); } .tex-prices .tr small { color: var(--sand-700); } .tex-prices .uk small { color: var(--plum-600); }
.tex-prices b { display: block; margin-top: 2px; font: 700 22px/1.1 var(--title); color: var(--navy); }
.tex-prices p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--slate-500); }
.tex-prices.q { grid-template-columns: 1fr; } .tex-prices.q p { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--slate-50); font-size: 14px; }
.tex-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 1100px) { .tex-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px) { .tex-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .tex-img { position: static; } }
@media (max-width: 560px) {
  .tex-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px 16px; padding: 4px 16px 8px; scrollbar-width: none; }
  .tex-tabs::-webkit-scrollbar { display: none; }
  .tex-tabs button { flex: 0 0 104px; scroll-snap-align: start; min-height: 104px; }
  .tex-panel { padding: 16px; border-radius: var(--r); }
  .tex-ben { grid-template-columns: 1fr; }
  .tex-prices { grid-template-columns: 1fr; }
  .tex-go { flex-direction: column; } .tex-go .btn { justify-content: center; }
}
/* Treatment guide page (treatment.html): standard page-hero (same height as the other pages, with on-page links);
   side menu grouped like the Treatments menu, with photos, active item in action teal (style guide 4.6) */
.td-hero { padding-bottom: 90px; }
.td-nav > ul { gap: 16px; }
.td-g > ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.td-gh { display: block !important; margin: 0 0 4px; padding: 0 2px !important; background: none !important; font: 600 11px/1.2 var(--text) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700) !important; }
.td-gh:hover { text-decoration: underline; }
.td-nav .td-g a:not(.td-gh) { justify-content: flex-start; padding: 8px 12px 8px 8px; font-size: 14.5px; }
.td-nav .td-g a:not(.td-gh) > span:nth-child(2) { flex: 1; }
.td-th { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #e9eef1 center / cover no-repeat; box-shadow: 0 0 0 1px rgba(5, 56, 99, .08); }
.td-nav a:hover, .td-nav a.on { background: var(--teal-50); color: var(--teal-700); }
.td-nav a.on { background: var(--action); color: #fff; }
.td-nav a.on .ic { color: #fff; }
.td-nav a:hover .ic { color: var(--action); }
#td-about, .td-block { scroll-margin-top: 110px; }
/* Treatment explorer: group filter + group view */
.tex-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tex-filter button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 14px var(--title); color: var(--navy); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tex-filter button em { font-style: normal; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--slate-100); font-size: 12px; color: var(--slate-600); }
.tex-filter button:hover { border-color: var(--brand); }
.tex-filter button[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.tex-filter button[aria-pressed="true"] em { background: rgba(0, 0, 0, .2); color: #fff; }
.tex-filter button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.tex-tabs.grp { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.tex-tabs.grp button { flex-direction: row; justify-content: flex-start; min-height: 0; padding: 10px 14px; gap: 12px; text-align: left; }
.tex-tabs.grp .tex-pic img { width: 36px; height: 36px; }
.tex-ghead { margin: 8px 0 24px; }
.tex-ghead h3 { margin: 0; font: 600 26px/1.2 var(--title); letter-spacing: -.02em; color: var(--navy); }
.tex-ghead p { margin: 6px 0 0; font-size: 16px; color: var(--slate-500); }
.tex-out > .tex-panel + .tex-panel { margin-top: 24px; }
.tex-out > .tex-panel { scroll-margin-top: 110px; }
.tex-body h3 a { color: inherit; text-decoration: none; } .tex-body h3 a:hover { color: var(--teal-700); }
.tex-n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: var(--action); color: #fff; font: 600 13px var(--title); }
@media (max-width: 860px) { .tex-tabs.grp { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tex-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; } .tex-filter::-webkit-scrollbar { display: none; } .tex-filter button { flex: none; } .tex-tabs.grp { display: grid; grid-template-columns: 1fr; margin: 0 0 16px; padding: 0; overflow: visible; } .tex-tabs.grp button { flex: none; } }
.tex-tabs:not(.grp) button[aria-selected], .tex-tabs button { border: 1px solid var(--line); background: #fff; }
.tex-tabs button:hover { border-color: var(--brand); }
/* Phone fixes (390 / 360px audit, 30 Oct 2026) */
@media (max-width: 560px) {
  /* hero partner strip: "Clinics checked · Reviews on Google" gets its own row so the logo never overlaps Flights */
  .hero .mk .mk-f li:first-child { grid-column: 1 / -1; }
  /* faint oversized words behind centred headings clash with the title on narrow screens */
  .abt-ghost { display: none; }
  /* quote form step bar: the active step keeps its label without squeezing into the next number */
  .qe .qe-top li.on { flex: 0 0 auto; padding-right: 10px; }
  .qe .qe-top li.on::after { display: none; }
}
@media (max-width: 560px) {
  .hero .mk .mk-f { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  .hero .mk .mk-f li, .hero .mk .mk-f a, .hero .mk .mk-f a > span:last-child { min-width: 0; }
  .hero .mk .mk-f a { gap: 10px; }
  .hero .mk .mk-f .r { width: 40px; height: 40px; }
  .hero .mk .mk-f b { white-space: normal; font-size: 14px; line-height: 1.2; }
  .hero .mk .mk-f li:not(:first-child) small img { max-width: 76px; height: auto; }
}
/* Guide page (guide.html): a header bar like a reviews page – contact tiles left, a rotator in the middle that flips
   between Google reviews / Video reviews / Blog, social tiles right – then the chosen panel full width. */
.gd-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; margin-bottom: 48px; }
.gd-tiles { display: flex; flex-direction: column; gap: 10px; }
.gd-con { justify-self: start; align-items: flex-start; } .gd-soc { justify-self: end; align-items: flex-end; }
.gd-tl { font: 600 11px/1 var(--title); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-700); }
.gd-tr { display: flex; gap: 10px; }
.gd-tr a, .gd-tr span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--r-sm); background: #fff; color: var(--brand); box-shadow: var(--shadow-s); transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s; }
.gd-tr a:hover { background: var(--teal-50); color: var(--action); transform: translateY(-2px); box-shadow: var(--shadow); }
.gd-tr a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.gd-tr .off { color: var(--slate-400); cursor: default; }
.gd-tr svg { width: 26px; height: 26px; }
.gd-rot { position: relative; isolation: isolate; text-align: center; padding: 8px 0; }
.gd-ghost { position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -66%); white-space: nowrap; pointer-events: none; font: 700 clamp(64px, 9vw, 132px)/1 var(--title); letter-spacing: -.03em; text-transform: uppercase; color: #ecf8f6; }
.gd-rot .eyebrow { justify-content: center; }
.gd-rhead { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 20px; }
.gd-rhead .title { margin: 0; min-width: 9ch; }
.gd-rot.flip .gd-rhead .title, .gd-rot.flip .gd-ghost, .gd-rot.flip .eyebrow { animation: gd-flip .5s var(--ease); }
.gd-rot.flip .gd-ghost { animation-name: gd-flip-g; }
@keyframes gd-flip { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gd-flip-g { from { opacity: 0; } to { opacity: 1; } }
.gd-arr { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gd-arr:hover { background: var(--action); border-color: var(--action); color: #fff; }
.gd-arr .ic { width: 18px; height: 18px; }
.gd-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--slate-50); border: 1px solid var(--line); }
.gd-tabs button { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 600 14px var(--title); color: var(--navy); cursor: pointer; white-space: nowrap; }
.gd-tabs button .ic { width: 16px; height: 16px; color: var(--action); }
.gd-tabs button:hover { background: #fff; }
.gd-tabs button[aria-selected="true"] { background: var(--action); color: #fff; }
.gd-tabs button[aria-selected="true"] .ic { color: #fff; }
.gd-prog { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .85); transform: scaleX(0); transform-origin: left; }
.gd-rot.auto.flip [aria-selected="true"] .gd-prog { animation: gd-prog 9s linear forwards; }
@keyframes gd-prog { to { transform: scaleX(1); } }
.gd-panel { scroll-margin-top: 110px; }
.gd-panel[hidden] { display: none; }
.gd-panel > .lead { margin: 0 auto 24px; max-width: 680px; text-align: center; }
.gd-panel .gd-filter { justify-content: center; }
.gd-bar { scroll-margin-top: 96px; }
.gd-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.gd-filter button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 600 14px var(--title); color: var(--navy); cursor: pointer; }
.gd-filter button em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: var(--slate-100); font-size: 12px; color: var(--slate-600); }
.gd-filter button[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: #fff; }
.gd-filter button[aria-pressed="true"] em { background: rgba(0, 0, 0, .2); color: #fff; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.gd-grid .rvw-card { scroll-snap-align: none; }
.gd-more { margin-top: 24px; text-align: center; }
.gd-blog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.gd-post { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-s); color: var(--navy); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s; }
.gd-post:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.gd-pimg img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gd-pb { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.gd-pb em { font-style: normal; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--teal-50); font: 600 12px var(--title); color: var(--teal-700); }
.gd-pb b { font: 600 18px/1.3 var(--title); } .gd-pb small { font-size: 14px; line-height: 1.5; color: var(--slate-500); }
.gd-read { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--title); color: var(--teal-700); }
.gd-read .ic { width: 16px; height: 16px; }
.gd-grid, .gd-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* video reviews: thumbnail with play button, country-coloured clinic chip, plays in a pop-up */
.gd-vid { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-s); text-align: left; color: var(--navy); cursor: pointer; font: inherit; transition: transform .2s var(--ease), box-shadow .2s; border-top: 4px solid var(--blue-400); }
.gd-vid.tr { border-top-color: var(--sand-400); }
.gd-vid:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.gd-vid:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gd-vth { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; }
.gd-vth img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.gd-vid:hover .gd-vth img { transform: scale(1.04); }
.gd-play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--action); box-shadow: 0 8px 24px rgba(35, 54, 88, .3); transition: transform .2s var(--ease), background .2s, color .2s; }
.gd-play svg { width: 28px; height: 28px; margin-left: 3px; }
.gd-vid:hover .gd-play { transform: scale(1.08); background: var(--action); color: #fff; }
.gd-len { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(20, 30, 50, .78); font: 600 12px var(--title); color: #fff; }
.gd-vb { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; flex: 1; }
.gd-vb > b { font: 600 17px/1.35 var(--title); }
.gd-vb small { margin-top: auto; font-size: 13px; color: var(--slate-500); }
.gd-vdlg { width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-lg); background: #0e1626; color: #fff; box-shadow: var(--shadow-l); overflow: hidden; }
.gd-vdlg::backdrop { background: rgba(35, 54, 88, .7); backdrop-filter: blur(3px); }
.gd-frame { aspect-ratio: 16 / 9; } .gd-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.gd-vcap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 20px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.gd-vcap b { color: #fff; }
.gd-vcap span { flex: 1; min-width: 0; }
.gd-vx { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.gd-vx:hover { background: rgba(255, 255, 255, .24); } .gd-vx svg { width: 20px; height: 20px; }
.gd-vcap a { display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--title); color: #7fe0d6; text-decoration: none; }
.gd-vcap a .ic { width: 16px; height: 16px; }
.gd-grid, .gd-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .gd-grid, .gd-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-bar { grid-template-columns: 1fr 1fr; grid-template-areas: "rot rot" "con soc"; gap: 28px 16px; }
  .gd-rot { grid-area: rot; } .gd-con { grid-area: con; } .gd-soc { grid-area: soc; }
}
/* iPad landscape / small laptops: the three-column bar runs out of room (social tiles ran off the right edge at ~1180px) */
@media (min-width: 1101px) and (max-width: 1279px) {
  .gd-bar { grid-template-columns: 1fr 1fr; grid-template-areas: "rot rot" "con soc"; gap: 28px 16px; }
  .gd-rot { grid-area: rot; } .gd-con { grid-area: con; } .gd-soc { grid-area: soc; }
}
@media (max-width: 640px) {
  .gd-grid, .gd-blog { grid-template-columns: 1fr; }
  .gd-bar { grid-template-columns: 1fr; grid-template-areas: "rot" "con" "soc"; gap: 20px; margin-bottom: 32px; }
  .gd-con, .gd-soc { justify-self: stretch; align-items: center; }
  .gd-tr { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
  .gd-tr a, .gd-tr span { width: auto; height: 48px; }
  .gd-ghost { font-size: 56px; }
  .gd-rhead { gap: 10px; } .gd-arr { width: 36px; height: 36px; }
  .gd-tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .gd-tabs button { justify-content: center; padding: 0 8px; font-size: 13px; gap: 6px; }
  .gd-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
}
@media (max-width: 380px) { .gd-tabs button .ic { display: none; } }

/* Destination picker (Prices): flags in a white rounded tile, the same as the Destinations menu */
.cf-chip .cmp-flag, .cf-chip.off .cmp-flag { flex: none; width: 40px; height: 40px; border-radius: 11px; overflow: visible; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--line, #e6ecef); }
.cf-chip .cmp-flag svg { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(5, 56, 99, .12); }
.cf-chip.off .cmp-flag { filter: none; } .cf-chip.off .cmp-flag svg { filter: grayscale(1) opacity(.5); }
@media (max-width: 560px) { .cf-chip .cmp-flag, .cf-chip.off .cmp-flag { width: 34px; height: 34px; border-radius: 10px; } .cf-chip .cmp-flag svg { width: 20px; height: 14px; } }

/* Destination picker: country colours from the style guide – Hungary blue, Turkey sand (edge, tint, tick) */
.cf-chip[data-cty="hu"] { border-color: var(--blue-400); background: var(--blue-50); }
.cf-chip[data-cty="tr"] { border-color: var(--sand-400); background: var(--sand-50); }
.cf-chip[data-cty="hu"] .cmp-chk { background: var(--blue-400); border-color: var(--blue-400); }
.cf-chip[data-cty="tr"] .cmp-chk { background: var(--sand-500); border-color: var(--sand-500); }
.cf-chip[data-cty="hu"] .cmp-flag { box-shadow: 0 0 0 1px var(--blue-100); }
.cf-chip[data-cty="tr"] .cmp-flag { box-shadow: 0 0 0 1px var(--sand-200); }
.cf-chip.off[data-cty] { border-color: #dfe6ec; background: #f6f8fa; }
.cf-chip.off[data-cty] .cmp-chk { background: #fff; border-color: #b8c4cf; }
.cf-n { flex: none; padding: 3px 8px; border-radius: 999px; font: 600 11.5px/1.2 var(--title); font-style: normal; white-space: nowrap; pointer-events: none; }
.cf-chip[data-cty="hu"] .cf-n { background: #fff; color: var(--blue-700); }
.cf-chip[data-cty="tr"] .cf-n { background: #fff; color: var(--sand-700); }
.cf-chip.off .cf-n { color: #9aa8b5; }
.cf-chip .cmp-flag, .cf-chip.off .cmp-flag { width: 34px; height: 34px; border-radius: 10px; } .cf-chip .cmp-flag svg { width: 20px; height: 14px; }

/* airport dropdown under each country box: airport + code, the clinic areas it serves, flight time */
.cf-chip { position: relative; }
.cf-chip .cf-nat { display: none; }
.cf-dd { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none; font: 500 15px var(--title); color: var(--navy); text-align: left; cursor: pointer; }
.cf-ddv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-dd .cv { transition: transform .2s; }
.cf-chip.dd-open .cf-dd .cv { transform: rotate(180deg); }
.cf-dd:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.cf-chip.off .cf-dd { color: #9aa8b5; }
.cf-ddl { position: absolute; z-index: 30; top: calc(100% + 6px); left: -1.5px; right: -1.5px; max-height: 340px; overflow-y: auto; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line, #e6ecef), 0 18px 40px -16px rgba(5, 56, 99, .35); }
.cf-ddl[hidden] { display: none; }
.cf-ddh { margin: 6px 10px 6px; font: 600 10.5px/1 var(--title); letter-spacing: .13em; text-transform: uppercase; }
.cf-chip[data-cty="hu"] .cf-ddh { color: var(--blue-700); } .cf-chip[data-cty="tr"] .cf-ddh { color: var(--sand-700); }
.cf-ddl [data-ap] { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: var(--navy); }
.cf-ddt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cf-ddt b { font: 600 14.5px/1.25 var(--title); }
.cf-ddt b em { font-style: normal; font-weight: 500; font-size: 12px; color: #5f6a80; margin-left: 4px; }
.cf-ddt small { font-size: 12.5px; line-height: 1.35; color: #5f6a80; }
.cf-ddl [data-ap] > svg { flex: none; width: 18px; height: 18px; visibility: hidden; }
.cf-ddl [data-ap][aria-selected="true"] > svg { visibility: visible; }
.cf-chip[data-cty="hu"] [data-ap]:hover, .cf-chip[data-cty="hu"] [data-ap]:focus-visible, .cf-chip[data-cty="hu"] [data-ap][aria-selected="true"] { background: var(--blue-50); outline: none; }
.cf-chip[data-cty="tr"] [data-ap]:hover, .cf-chip[data-cty="tr"] [data-ap]:focus-visible, .cf-chip[data-cty="tr"] [data-ap][aria-selected="true"] { background: var(--sand-50); outline: none; }
.cf-chip[data-cty="hu"] [data-ap] > svg { color: var(--blue-400); } .cf-chip[data-cty="tr"] [data-ap] > svg { color: var(--sand-500); }
.cf-ddl { width: max(100% + 3px, 320px); max-width: calc(100vw - 32px); right: auto; }
.cf-chip[data-cty="tr"] .cf-ddl { left: auto; right: -1.5px; }
@media (max-width: 760px) { .cf-ddl, .cf-chip[data-cty="tr"] .cf-ddl { width: auto; left: -1.5px; right: -1.5px; } }
/* each airport is its own selectable box with its flight estimate – choosing one updates the comparison */
.cf-ddl { width: max(100% + 3px, 380px); padding: 8px; }
.cf-ddl [data-ap] { margin-top: 6px; padding: 10px 12px; border: 1.5px solid var(--line, #e6ecef); border-radius: 12px; background: #fff; transition: border-color .15s, background .15s; }
.cf-chip[data-cty="hu"] [data-ap]:hover, .cf-chip[data-cty="hu"] [data-ap]:focus-visible { border-color: var(--blue-200); }
.cf-chip[data-cty="tr"] [data-ap]:hover, .cf-chip[data-cty="tr"] [data-ap]:focus-visible { border-color: var(--sand-300); }
.cf-chip[data-cty="hu"] [data-ap][aria-selected="true"] { border-color: var(--blue-400); }
.cf-chip[data-cty="tr"] [data-ap][aria-selected="true"] { border-color: var(--sand-400); }
.cf-ddh { display: flex; justify-content: space-between; gap: 10px; margin: 6px 4px 2px; }
.cf-ddh span { font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: 11.5px; color: #5f6a80; }
.cf-ddp { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cf-ddp small { font-size: 11px; color: #5f6a80; }
.cf-ddp b { font: 600 15px/1.2 var(--title); color: var(--navy); }
.cf-chip[data-cty="hu"] [data-ap][aria-selected="true"] .cf-ddp b { color: var(--blue-700); }
.cf-chip[data-cty="tr"] [data-ap][aria-selected="true"] .cf-ddp b { color: var(--sand-700); }
@media (max-width: 760px) { .cf-ddl, .cf-chip[data-cty="tr"] .cf-ddl { width: auto; } .cf-ddl { max-height: 60vh; } }
/* Departing from: the same box dropdown, in the UK colour (plum) */
.cf-chip.cf-from-dd { gap: 12px; padding: 0 14px; border: 1.5px solid var(--plum-200); background: var(--plum-50); }
.cf-from-dd > svg:first-child path { fill: var(--plum-600); }
.cf-from-dd .cf-ddh { color: var(--plum-700); }
.cf-from-dd [data-ap]:hover, .cf-from-dd [data-ap]:focus-visible { background: var(--plum-50); border-color: var(--plum-200); outline: none; }
.cf-from-dd [data-ap][aria-selected="true"] { background: var(--plum-50); border-color: var(--plum-400); }
.cf-from-dd [data-ap] > svg { color: var(--plum-600); }
.cf-from-dd .cf-ddl { left: -1.5px; right: auto; }
.cf-from-dd .cf-ddp { flex-direction: row; gap: 12px; }
.cf-fp { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cf-fp small { font-size: 11px; color: #5f6a80; }
.cf-fp b { font: 600 14.5px/1.2 var(--title); }
.cf-fp.hu b { color: var(--blue-700); } .cf-fp.tr b { color: var(--sand-700); }
@media (max-width: 760px) { .cf-from-dd .cf-ddl { right: -1.5px; } }
/* Treatment: the same box dropdown, highlighted in the brand green; each treatment with a mini version of its card icon */
.cf-chip.cf-trt-dd { gap: 10px; padding: 0 14px 0 10px; border: 1.5px solid var(--brand); background: var(--teal-50); }
.cf-gi { flex: none; width: 30px; height: 30px; object-fit: contain; }
.cf-trt-dd .cf-ddl { left: auto; right: -1.5px; width: max(100% + 3px, 420px); }
.cf-trt-dd .cf-ddh { color: var(--teal-700); }
.cf-trt-dd [data-ap] .cf-gi { width: 34px; height: 34px; }
.cf-trt-dd [data-ap]:hover, .cf-trt-dd [data-ap]:focus-visible { background: var(--teal-50); border-color: var(--teal-200); outline: none; }
.cf-trt-dd [data-ap][aria-selected="true"] { background: var(--teal-50); border-color: var(--brand); }
.cf-trt-dd [data-ap] > svg { color: var(--action); }
.cf-trt-dd .cf-ddp { flex-direction: row; gap: 12px; }
@media (max-width: 760px) { .cf-trt-dd .cf-ddl { width: auto; left: -1.5px; } }
/* destination lists: each airport with its country flag in the same white tile as the box */
.cf-ddl .cf-of { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; overflow: visible; }
.cf-ddl .cf-of svg { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(5, 56, 99, .12); }
.cf-chip[data-cty="hu"] .cf-ddl .cf-of { box-shadow: 0 0 0 1px var(--blue-100); }
.cf-chip[data-cty="tr"] .cf-ddl .cf-of { box-shadow: 0 0 0 1px var(--sand-200); }
/* Departing from: UK flag in the same white tile, on the box and on each airport */
.cf-from-dd > .cmp-flag { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; overflow: visible; box-shadow: 0 0 0 1px var(--plum-100); }
.cf-from-dd > .cmp-flag svg, .cf-from-dd .cf-of svg { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(5, 56, 99, .12); }
.cf-from-dd .cf-ddl .cf-of { box-shadow: 0 0 0 1px var(--plum-100); }
.cf-chip.cf-from-dd { padding-left: 8px; gap: 10px; }
.cf-from-dd .cf-ddl { width: max(100% + 3px, 440px); } @media (max-width: 760px) { .cf-from-dd .cf-ddl { width: auto; } }
.rvw-filter { justify-content: center; margin: 4px 0 28px; } .rvw-filter[hidden] { display: none; }
/* cost rows: soft 3D illustrations instead of line icons (multiply blends their white ground into the card) */
.cmp-li:has(.cmp-ill), .cmp-mi:has(.cmp-ill) { width: 72px; height: 60px; background: none; border-radius: 0; }
.cmp-ill { display: block; width: 72px; height: 60px; object-fit: contain; mix-blend-mode: multiply; }
.cmp-mi:has(.cmp-ill), .cmp-mi .cmp-ill { width: 48px; height: 40px; }
@media (max-width: 1100px) { .cmp-li:has(.cmp-ill), .cmp-li .cmp-ill { width: 56px; height: 47px; } }
.cmp-li:has(.cmp-ill), .cmp-li .cmp-ill { width: 58px; height: 48px; }
.cmp-l:has(.cmp-ill) { gap: 10px; padding-left: 10px; }
.cmp-mi:has(.cmp-ill) { margin-right: 6px; }

/* ==========================================================================
   Price comparison v2 (landing): one clean table card – rows split by hairlines, country columns tinted
   (UK white, Hungary blue, Turkey sand), flag + name headers, treatment icon on the first row, a stronger
   total row; side panel = whole-trip estimate per country + Free quotes. Phones keep the country cards.
   ========================================================================== */
.cmp-v2.cmp-tbl { gap: 0; border: 1px solid #e3e9f0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px -22px rgba(5, 56, 99, .35); }
.cmp-v2 .cmp-r { gap: 0; grid-template-columns: 250px repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid #e8eef3; }
.cmp-v2 .cmp-r.cmp-head { border-top: 0; }
.cmp-v2 .cmp-l, .cmp-v2 .cmp-c, .cmp-v2 .cmp-h { border: 0; border-radius: 0; box-shadow: none; }
.cmp-v2 .cmp-l { min-height: 76px; padding: 12px 18px; gap: 14px; background: #fff; border-right: 1px solid #e8eef3; }
.cmp-v2 .cmp-l b { font: 700 16px/1.25 var(--title); }
.cmp-v2 .cmp-l small { font-size: 13px; }
.cmp-v2 .cmp-lh { min-height: 0; align-items: center; }
.cmp-v2 .cmp-lh b { font-size: 16.5px; }
.cmp-v2 .cmp-h { min-height: 0; display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: #fff; }
.cmp-v2 .cmp-h::before, .cmp-v2 .cmp-h::after { display: none; }
.cmp-v2 .cmp-h .cmp-hf { position: static; width: 46px; height: 46px; margin: 0; flex: none; }
.cmp-v2 .cmp-h .cmp-hn b { font: 700 18px/1.2 var(--title); color: var(--navy); }
.cmp-v2 .cmp-h.hu, .cmp-v2 .cmp-c.hu { background: var(--blue-50); }
.cmp-v2 .cmp-h.tr, .cmp-v2 .cmp-c.tr { background: var(--sand-50); }
.cmp-v2 .cmp-c { min-height: 76px; justify-content: flex-start; gap: 18px; padding: 12px 22px; }
.cmp-v2 .cmp-c.uk { justify-content: flex-start; padding-left: 22px; background: #fff; }
.cmp-v2 .cmp-c strong { font-size: 24px; min-width: 0; }
.cmp-v2 .cmp-c .cmp-x { font-size: 13.5px; color: #5f6a80; }
.cmp-v2 .cmp-li { width: 60px; height: 52px; }
.cmp-v2 .cmp-li .cmp-ill { width: 60px; height: 52px; }
.cmp-v2 .cmp-tri { object-fit: contain; }
.cmp-v2 .cmp-via { display: none; }
/* treatment row: the per-country saving moves to the total row and the side panel */
.cmp-v2 .cmp-r.trt .cmp-pill { display: none; }
.cmp-v2 .cmp-r.trt .cmp-c.hu, .cmp-v2 .cmp-r.trt .cmp-c.tr { background: inherit; }
.cmp-v2 .cmp-r.trt .cmp-c.hu { background: var(--blue-50); } .cmp-v2 .cmp-r.trt .cmp-c.tr { background: var(--sand-50); }
/* total row */
.cmp-v2 .cmp-r.tot { border-top: 1.5px solid #dbe4ec; }
.cmp-v2 .cmp-r.tot .cmp-l, .cmp-v2 .cmp-r.tot .cmp-c { min-height: 88px; }
.cmp-v2 .cmp-r.tot .cmp-c.uk { background: #fff; }
.cmp-v2 .cmp-r.tot .cmp-c.hu { background: var(--blue-100); } .cmp-v2 .cmp-r.tot .cmp-c.tr { background: var(--sand-100); }
.cmp-v2 .cmp-r.tot .cmp-c strong { font-size: 30px; }
.cmp-v2 .cmp-r.tot .cmp-c.uk strong { color: var(--navy); }
.cmp-v2 .cmp-r.tot .cmp-l b::after { display: none; }
.cmp-v2 .cmp-r.tot .cmp-c.hu .cmp-pill { background: var(--blue-700); color: #fff; }
.cmp-v2 .cmp-r.tot .cmp-c.tr .cmp-pill { background: var(--sand-200); color: var(--sand-800); }
/* side panel: whole-trip estimate */
.cmp-side .cmp-wt { margin: 14px 0 2px; font: 700 21px/1.2 var(--title); color: var(--navy); }
.cmp-side .cmp-wts { margin: 0 0 14px; font-size: 13.5px; color: #5f6a80; }
.cmp-wl { align-self: stretch; display: grid; gap: 8px; margin-bottom: 16px; text-align: left; }
.cmp-wr { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e3eef0; }
.cmp-wf { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; box-shadow: 0 1px 4px rgba(5, 56, 99, .25); }
.cmp-wf svg { display: block; width: 100%; height: 100%; }
.cmp-wn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cmp-wn small { font-size: 12.5px; color: #5f6a80; }
.cmp-wn b { font: 700 18px/1.15 var(--title); color: var(--navy); }
.cmp-wr.hu .cmp-wn b { color: var(--blue-700); } .cmp-wr.tr .cmp-wn b { color: var(--sand-700); }
.cmp-ws { flex: none; padding: 5px 10px; border-radius: 999px; font: 600 12px/1.2 var(--title); white-space: nowrap; }
.cmp-wr.hu .cmp-ws { background: var(--blue-50); color: var(--blue-700); } .cmp-wr.tr .cmp-ws { background: var(--sand-100); color: var(--sand-700); }
.cmp-side .cmp-go { order: 5; align-self: stretch; margin-top: auto; }
.cmp-side .cmp-inc { order: 6; margin-top: 12px; }
.cmp-main:has(.cmp-v2) { grid-template-columns: minmax(0, 1fr) 268px; gap: 18px; }
@media (max-width: 1240px) { .cmp-v2 .cmp-r { grid-template-columns: 210px repeat(var(--cols, 3), minmax(0, 1fr)); } .cmp-v2 .cmp-c { padding: 10px 14px; gap: 10px; flex-wrap: wrap; } .cmp-v2 .cmp-li { width: 46px; height: 40px; } .cmp-v2 .cmp-li .cmp-ill { width: 46px; height: 40px; } .cmp-main:has(.cmp-v2) { grid-template-columns: minmax(0, 1fr) 240px; } }
.cmp-main:has(.cmp-v2) { grid-template-columns: minmax(0, 1fr) 240px; }
.cmp-v2 .cmp-r { grid-template-columns: 226px repeat(var(--cols, 3), minmax(0, 1fr)); }
.cmp-v2 .cmp-l { padding: 12px 14px; gap: 12px; }
.cmp-v2 .cmp-c { flex-wrap: wrap; gap: 4px 14px; padding: 12px 18px; }
.cmp-v2 .cmp-c > * { flex: none; }
.cmp-v2 .cmp-c .cmp-x { flex: 1 1 90px; }
.cmp-v2 .cmp-h { padding: 16px 18px; gap: 12px; } .cmp-v2 .cmp-h .cmp-hf { width: 40px; height: 40px; }
.cmp-v2 .cmp-r.tot .cmp-c strong { font-size: 27px; }
.cmp-v2 .cmp-r.tot .cmp-pill { padding: 6px 12px; font-size: 13.5px; box-shadow: none; }
.cmp-side .cmp-wr { padding: 9px 10px; gap: 10px; } .cmp-wf { width: 32px; height: 32px; } .cmp-wn b { font-size: 17px; }
#cmp[data-tx] .cmp-tiles { display: none; } .td-cmp { padding-top: 0; }

/* comparison v2 – side panel lines up with the table: header row = the table's header row, Free quotes = the total row */
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) { padding: 0 16px; justify-content: flex-start; }
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-sp { align-self: stretch; display: flex; flex-direction: column; }
.cmp-whd { box-sizing: border-box; height: var(--hd, 90px); display: flex; align-items: center; gap: 12px; margin: 0 -16px 10px; padding: 0 16px; border-bottom: 1px solid #d6efe9; }
.cmp-wic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px #cdeee8; }
.cmp-wic svg { width: 24px; height: 24px; }
.cmp-side .cmp-whd .cmp-wt { margin: 0; font: 700 18px/1.2 var(--title); color: var(--navy); text-align: left; }
.cmp-main:has(.cmp-v2) .cmp-side .cmp-inc { display: none; }
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-gow { order: 5; box-sizing: border-box; height: var(--tot, 88px); margin: auto -16px 0; padding: 0 16px; display: flex; align-items: center; border-top: 1.5px solid #d6efe9; }
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-gow .cmp-go { margin: 0 !important; width: 100%; }
.cmp-main:has(.cmp-v2) .cmp-side.one .cmp-gow { order: 5; margin-top: auto; }
/* flags in the table and the estimate: the same white tile as the filter boxes */
.cmp-v2 .cmp-h .cmp-hf, .cmp-wf { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; overflow: visible; background: #fff; box-shadow: 0 0 0 1px var(--line, #e6ecef); }
.cmp-v2 .cmp-h .cmp-hf svg, .cmp-wf svg { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(5, 56, 99, .12); }
.cmp-v2 .cmp-h.uk .cmp-hf, .cmp-wr.uk .cmp-wf { box-shadow: 0 0 0 1px var(--plum-100); }
.cmp-v2 .cmp-h.hu .cmp-hf, .cmp-wr.hu .cmp-wf { box-shadow: 0 0 0 1px var(--blue-100); }
.cmp-v2 .cmp-h.tr .cmp-hf, .cmp-wr.tr .cmp-wf { box-shadow: 0 0 0 1px var(--sand-200); }
.cmp-wf { width: 36px; height: 36px; border-radius: 10px; } .cmp-wf svg { width: 20px; height: 14px; }
.cmp-main:has(.cmp-v2) { grid-template-columns: minmax(0, 1fr) 258px; }
.cmp-side .cmp-whd .cmp-wt { white-space: nowrap; font-size: 17.5px; }
.cmp-whd { gap: 10px; }
@media (max-width: 1240px) { .cmp-main:has(.cmp-v2) { grid-template-columns: minmax(0, 1fr) 240px; } .cmp-side .cmp-whd .cmp-wt { font-size: 16px; } }

/* comparison v2 – UK column in the UK colour (plum), like Hungary blue and Turkey sand */
.cmp-v2 .cmp-h.uk, .cmp-v2 .cmp-c.uk, .cmp-v2 .cmp-r.trt .cmp-c.uk { background: var(--plum-50); }
.cmp-v2 .cmp-c.uk strong, .cmp-v2 .cmp-r.tot .cmp-c.uk strong { color: var(--plum-700); }
.cmp-v2 .cmp-c.uk .cmp-dash { color: var(--plum-400); }
.cmp-v2 .cmp-r.tot .cmp-c.uk { background: var(--plum-100); }

/* whole-trip estimate = one more column of the table: same white card, hairlines, header row and total row;
   country lines in their colours; Free quotes sits in the total row like the totals */
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) { padding: 0; border: 1px solid #e3e9f0; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -22px rgba(5, 56, 99, .35); overflow: hidden; }
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-sp { padding: 0; }
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-whd { margin: 0; padding: 0 18px; border-bottom: 1px solid #e8eef3; background: #fff; }
.cmp-main:has(.cmp-v2) .cmp-wic { box-shadow: 0 0 0 1px var(--teal-100); }
.cmp-main:has(.cmp-v2) .cmp-wl { gap: 0; margin: 0; }
.cmp-main:has(.cmp-v2) .cmp-wr { min-height: 76px; padding: 12px 18px; gap: 12px; border-radius: 0; box-shadow: none; border-bottom: 1px solid #e8eef3; }
.cmp-main:has(.cmp-v2) .cmp-wr.uk { background: var(--plum-50); } .cmp-main:has(.cmp-v2) .cmp-wr.hu { background: var(--blue-50); } .cmp-main:has(.cmp-v2) .cmp-wr.tr { background: var(--sand-50); }
.cmp-main:has(.cmp-v2) .cmp-wr .cmp-wn small { font: 600 13px/1.2 var(--title); color: var(--navy); }
.cmp-main:has(.cmp-v2) .cmp-wr .cmp-wn b { font: 800 22px/1.15 var(--title); letter-spacing: -.01em; }
.cmp-main:has(.cmp-v2) .cmp-wr.uk .cmp-wn b { color: var(--plum-700); }
.cmp-main:has(.cmp-v2) .cmp-wr.hu .cmp-ws { background: var(--blue-700); color: #fff; }
.cmp-main:has(.cmp-v2) .cmp-wr.tr .cmp-ws { background: var(--sand-200); color: var(--sand-800); }
.cmp-main:has(.cmp-v2) .cmp-ws { padding: 6px 11px; font: 600 12.5px/1.2 var(--title); }
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-gow { margin: auto 0 0; padding: 0 18px; border-top: 1.5px solid #dbe4ec; background: var(--teal-50); }
.cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-gow .cmp-go { width: 100%; justify-content: center; }
.cmp-t small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.35em + 8px); }
.cmp-main:has(.cmp-v2) .cmp-side .cmp-gow .cmp-go { align-self: center; } /* centred on the total row, level with the prices */

/* More options in the new comparison style: soft illustrations like the cost rows, white steppers,
   include chips as small cards (illustration + label + switch) in the brand green */
.cf-fi:has(.cf-oi) { padding-top: 0; }
.cf-oi { display: block; width: 52px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.cf-opts .cf-f { align-items: center; gap: 12px; }
.cf-opts .cf-lb { font: 600 14.5px/1.2 var(--title); color: var(--navy); }
.cf-step { height: 40px; border-color: #e3e9f0; background: #fff; box-shadow: 0 6px 16px -14px rgba(5, 56, 99, .4); }
.cf-step button { color: var(--teal-700); font-weight: 600; }
.cf-step b { color: var(--navy); }
.cf-xc { height: 44px; gap: 8px; padding: 0 10px 0 6px; border-radius: 14px; background: #fff; border-color: #e3e9f0; color: var(--navy); }
.cf-xi { width: 34px; height: 28px; object-fit: contain; mix-blend-mode: multiply; }
.cf-xc .cf-knob { margin-left: 4px; }
.cf-xc.on { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-700); }
.cf-xc.on .cf-knob { background: var(--action); }
.cf-xc:not(.on) .cf-xi { filter: grayscale(1); opacity: .55; }
.cf-opts .cf-f { align-items: flex-start; }
.cf-opts .cf-fi:has(.cf-oi) { margin-top: 14px; }
.cf-oi { width: 46px; height: 40px; }
.cf-xs { gap: 6px; }
.cf-xc { height: 40px; gap: 6px; padding: 0 8px 0 4px; font-size: 13px; }
.cf-xi { width: 28px; height: 24px; }
.cf-xc .cf-knob { margin-left: 2px; width: 30px; height: 18px; } .cf-xc .cf-knob::after { width: 12px; height: 12px; }
.cf-xc.on .cf-knob::after { transform: translateX(12px); }
@media (min-width: 1241px) { .cf-opts { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.9fr) auto; } }
@media (min-width: 1241px) { .cf-opts { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2.4fr) 0; } .cf-xs { flex-wrap: nowrap; } }
@media (max-width: 1360px) { .cf-opts .cf-f { gap: 8px; } .cf-oi { width: 38px; height: 32px; } .cf-step button { width: 32px; } .cf-step b { min-width: 34px; } }

/* More options: compact, and lined up with the filter row above (same left and right edges, no extra indent) */
.cf-opts { padding: 16px 0 2px !important; margin-top: 14px; }
.cf-opts .cf-f { padding: 0 14px; gap: 8px; }
.cf-opts .cf-f:first-child { padding-left: 0; }
.cf-opts .cf-f.cf-inc { padding-right: 0; border-right: 0; }
.cf-opts .cf-lb { font-size: 13.5px; }
.cf-opts small { font-size: 12px; }
.cf-oi { width: 34px; height: 30px; }
.cf-opts .cf-fi:has(.cf-oi) { margin-top: 18px; }
.cf-step { height: 34px; }
.cf-step button { width: 30px; font-size: 16px; }
.cf-step b { min-width: 30px; font-size: 15px; }
.cf-xc { height: 34px; padding: 0 7px 0 4px; gap: 5px; font-size: 12.5px; border-radius: 12px; }
.cf-xi { width: 24px; height: 20px; }
.cf-xc .cf-knob { width: 26px; height: 16px; } .cf-xc .cf-knob::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.cf-xc.on .cf-knob::after { transform: translateX(10px); }
@media (min-width: 1241px) { .cf-opts { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr) 0; } }
@media (min-width: 1241px) { .cf-xs { display: flex; width: 100%; } .cf-xs .cf-xc { flex: 1 1 0; justify-content: space-between; } }
@media (min-width: 1241px) { .cf-xs .cf-xc { flex: 1 1 auto; justify-content: space-between; } .cf-xs .cf-xc .cf-knob { flex: none; } }

/* the journey has 5 steps (treatment, quotes, trip, extras, smile) */
.j4 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 18px; }
.js4-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.js4-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font: 600 13.5px var(--title); color: var(--teal-700); }
.js4-go .ic { width: 15px; height: 15px; transition: transform .15s; }
.js4-smile:hover .js4-go .ic { transform: translateX(3px); }
@media (max-width: 1100px) { .j4, .js4-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 640px) { .j4, .js4-list { grid-template-columns: 1fr; } }
.js4-smile .js4-top { grid-row: span 3; } .js4-smile .js4-go { grid-column: 2; justify-self: start; }

/* ==========================================================================
   Smile gallery (gallery.html) – header bar and rotator from the Guide page (.gd-*), then:
   credit strip, treatment chips, photo grid (4:5 cards with a "Patient of <clinic>" badge), viewer, clinic gallery links
   ========================================================================== */
.sg-credit { display: flex; align-items: flex-start; gap: 14px; max-width: 860px; margin: 0 auto 22px; padding: 14px 18px; border-radius: 16px; background: var(--sand-50); box-shadow: 0 0 0 1px var(--sand-200); }
.sg-cl { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--sand-700); box-shadow: 0 0 0 1px var(--sand-200); }
.sg-cl .ic { width: 20px; height: 20px; }
.sg-credit p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--navy); }
.sg-credit a { color: var(--sand-700); font-weight: 600; }
.sg-chips { justify-content: center; }
.sg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sg-card { display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-s); text-align: left; cursor: zoom-in; font: inherit; color: var(--navy); transition: transform .2s var(--ease), box-shadow .2s; }
.sg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sg-card:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.sg-img { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--slate-50); overflow: hidden; }
.sg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.sg-card:hover .sg-img img { transform: scale(1.03); }
.sg-pt { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .94); font: 600 12px/1.2 var(--title); color: var(--sand-800); box-shadow: 0 4px 12px -6px rgba(5, 56, 99, .4); }
.sg-pt .ic { flex: none; width: 15px; height: 15px; color: var(--sand-600); }
.sg-cap { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; border-top: 4px solid var(--sand-400); }
.sg-cap b { font: 600 15.5px/1.3 var(--title); }
.sg-cap small { font-size: 12.5px; color: #5f6a80; }
.sg-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-lg, 24px); background: #0e1626; color: #fff; overflow: hidden; box-shadow: var(--shadow-l); }
.sg-dlg::backdrop { background: rgba(35, 54, 88, .72); backdrop-filter: blur(3px); }
.sg-dlg img { display: block; width: 100%; max-height: calc(100dvh - 140px); object-fit: contain; background: #0e1626; }
.sg-x, .sg-nav { position: absolute; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--navy); cursor: pointer; }
.sg-x { top: 12px; right: 12px; } .sg-x svg { width: 20px; height: 20px; }
.sg-nav { top: 45%; } .sg-nav.prev { left: 12px; } .sg-nav.next { right: 12px; } .sg-nav .ic { width: 20px; height: 20px; }
.sg-dcap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 14px 18px; font-size: 13.5px; color: rgba(255, 255, 255, .82); }
.sg-dcap b { color: #fff; }
.sg-dcap a { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px var(--title); color: #f0d6a9; text-decoration: none; }
.sg-dcap a .ic { width: 15px; height: 15px; }
.sg-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sg-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-s); color: var(--navy); text-decoration: none; border-top: 4px solid var(--sand-400); transition: transform .2s var(--ease), box-shadow .2s; }
.sg-link.hu { border-top-color: var(--blue-400); }
.sg-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sg-link > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-link b { font: 600 16px/1.25 var(--title); } .sg-link small { font-size: 13px; color: #5f6a80; }
.sg-link > .ic { flex: none; width: 18px; height: 18px; color: var(--teal-700); }
.sg-lf { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--sand-200); }
.sg-lf.hu { box-shadow: 0 0 0 1px var(--blue-100); }
.sg-lf svg { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(5, 56, 99, .12); }
@media (max-width: 1100px) { .sg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sg-links { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .sg-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .sg-links { grid-template-columns: 1fr; } .sg-cap { padding: 10px 12px 12px; } .sg-cap b { font-size: 14px; } .sg-pt { font-size: 11px; padding: 5px 8px 5px 6px; } }

/* gallery v2: country selector + clinic tooltip on every photo */
.sg-cty { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.sg-cty button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 12px; border: 1px solid var(--line, #dfe6ec); background: #fff; font: 600 14px/1.2 var(--title); color: var(--navy); cursor: pointer; transition: background .15s, border-color .15s; }
.sg-cty button.all { padding-left: 14px; }
.sg-cty button em { font-style: normal; font-weight: 600; font-size: 12px; padding: 2px 7px; border-radius: 999px; background: var(--smoke, #f1f5f8); color: var(--muted); }
.sg-cty .sg-cf { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; background: #fff; }
.sg-cty .sg-cf svg { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(5, 56, 99, .12); }
.sg-cty .hu .sg-cf { box-shadow: 0 0 0 1px var(--blue-100); }
.sg-cty .tr .sg-cf { box-shadow: 0 0 0 1px var(--sand-200); }
.sg-cty .all[aria-pressed="true"] { background: #e6f5f3; border-color: #04847f; color: #04645f; }
.sg-cty .hu[aria-pressed="true"] { background: var(--blue-50); border-color: var(--blue-400); color: var(--blue-700); }
.sg-cty .tr[aria-pressed="true"] { background: var(--sand-50); border-color: var(--sand-400); color: var(--sand-800); }
.sg-cty .hu:hover { border-color: var(--blue-400); } .sg-cty .tr:hover { border-color: var(--sand-400); }
.sg-card { position: relative; overflow: visible; }
.sg-card .sg-img { border-radius: 18px 18px 0 0; }
.sg-card::after { content: attr(data-tip); position: absolute; left: 10px; right: 10px; top: 10px; z-index: 5; transform: translateY(-4px); white-space: normal; padding: 7px 11px; border-radius: 10px; background: #12324a; color: #fff; font: 600 12px/1.35 var(--title); text-align: center; box-shadow: 0 8px 20px -8px rgba(5, 30, 50, .6); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.sg-card:hover::after, .sg-card:focus-visible::after { opacity: 1; transform: none; }
.sg-none { grid-column: 1 / -1; text-align: center; padding: 40px 16px; color: var(--muted); background: #fff; border-radius: 18px; }

/* treatment page: "What it costs" block in the page flow (cards = .tex-prices from the Treatments explorer) */
.td-cost { padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--slate-100, #e8eef3), var(--shadow-s); }
.td-cost h2 { margin-top: 0; }
.td-cost .tex-stay { margin: 0 0 4px; font-size: 15px; }
.td-cost .tex-prices { margin-top: 12px; }
.td-cost-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.td-cost-go span { flex: 1 1 220px; font-size: 14px; color: var(--slate-500); }
@media (max-width: 560px) { .td-cost { padding: 18px; } }

/* landing comparison: 10 treatment tiles; paediatric has no typical price, so a note replaces the table */
@media (min-width: 1241px) { .cmp-tiles, .tx-sec .tx-row.cmp-tiles { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.cmp-np { display: none; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.cmp-np .cmp-npi { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--smoke, #f5f8fa); }
.cmp-np .cmp-npi img { width: 56px; height: 56px; object-fit: contain; }
.cmp-np > div { flex: 1; } .cmp-np b { display: block; font: 600 18px var(--title); color: var(--navy); }
.cmp-np p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }
#cmp.np .cmp-np { display: flex; }
#cmp.np .cmp-main, #cmp.np .cmp-note, #cmp.np .cmp-inc { display: none; }
@media (max-width: 760px) { .cmp-np { flex-direction: column; align-items: flex-start; } }
@media (min-width: 1241px) { .cmp-t { padding-left: 6px; padding-right: 6px; } .cmp-t small { -webkit-line-clamp: 3; font-size: 11.5px; } }

/* tablets (761–1023px): the comparison table was too narrow – show the phone country cards, two or three across, side panel below */
@media (min-width: 761px) and (max-width: 1023px) {
  /* Table → country cards */
  .cmp-tbl { display: none !important; }
  .cmp-mob { display: grid; gap: 14px; }
  .cmp-main, .cmp-main.one { display: block; }
  .cmp-mc { overflow: hidden; border: 1px solid #e3e9ee; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -20px rgba(5,56,99,.45); }
  .cmp-mc.hu { border-color: var(--blue-100); } .cmp-mc.tr { border-color: var(--sand-200); }
  .cmp-mh { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; min-height: 92px; padding: 14px 16px; background: #f4f7fb; overflow: hidden; }
  .cmp-mc.hu .cmp-mh { background: #eef9f5; } .cmp-mc.tr .cmp-mh { background: var(--sand-50); }
  .cmp-mh .cmp-ph { left: auto; right: 0; top: 0; bottom: 0; width: 55%; height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 60%); mask-image: linear-gradient(to right, transparent, #000 60%); }
  .cmp-mh .cmp-hf { position: relative; width: 48px; height: 48px; }
  .cmp-mh .cmp-hn { position: relative; }
  .cmp-mh .cmp-hn b { font-size: 18px; } .cmp-mh .cmp-hn small { white-space: normal; font-size: 13px; }
  .cmp-mb { padding: 4px 16px; }
  .cmp-ml { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #eef2f5; }
  .cmp-ml:last-child { border-bottom: 0; }
  .cmp-mi { display: grid; place-items: center; color: #1fa79c; } .cmp-mi svg, .cmp-mi .ic { width: 22px; height: 22px; }
  .cmp-mt { font: 600 14.5px/1.25 var(--title); color: var(--navy); }
  .cmp-mt small { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--body-font, inherit); color: #5f6a80; }
  .cmp-mt .cmp-tog { margin: 0 0 0 2px; padding: 1px 8px; font-size: 11px; vertical-align: 1px; }
  .cmp-mv { display: flex; align-items: center; gap: 8px; justify-content: flex-end; white-space: nowrap; }
  .cmp-mv strong { font: 700 18px var(--title); color: var(--navy); }
  .cmp-mc.hu .cmp-mv strong { color: var(--blue-700); } .cmp-mc.tr .cmp-mv strong { color: var(--sand-700); }
  .cmp-mv strong.off { color: #9aa8b5 !important; text-decoration: line-through; }
  .cmp-mv .cmp-pill { padding: 4px 9px; font-size: 12px; }
  .cmp-mn { margin: 0; padding: 0 0 12px 38px; font-size: 12.5px; color: #5f6a80; }
  .cmp-mtot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #f4f7fb; border-top: 1px solid #eef2f5; }
  .cmp-mc.hu .cmp-mtot { background: #e9f7f2; } .cmp-mc.tr .cmp-mtot { background: var(--sand-50); }
  .cmp-mtot > span:first-child { font: 700 15px/1.2 var(--title); color: var(--navy); }
  .cmp-mtot small { display: block; margin-top: 2px; font: 400 12px var(--body-font, inherit); color: #5f6a80; }
  .cmp-mtot .cmp-mv strong { font-size: 22px; }
  /* Side panel below the cards */
  .cmp-side, .cmp-side.one { margin-top: 16px; padding: 22px 18px 18px; }
  .cmp-side .cmp-go { margin: 6px 0 0; width: 100%; justify-content: center; }
  .cmp-sph { display: none; }
  .cmp-side.one .cmp-sp ul { max-width: none; }
  .cmp-mob { grid-template-columns: 1fr; }
  .cmp-side { position: static; }
}
@media (max-width: 1023px) { .cmp-side, .cmp-side.one { height: auto !important; max-height: none !important; overflow: visible !important; } .cmp-side .cmp-sp { height: auto !important; max-height: none !important; overflow: visible !important; } }
@media (max-width: 1023px) {
  .cmp-main:has(.cmp-v2) .cmp-side { display: flex !important; flex-direction: column; align-items: stretch; padding: 0 !important; }
  .cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-whd { height: auto; padding: 16px 18px; }
  .cmp-main:has(.cmp-v2) .cmp-side:not(.one) .cmp-gow { height: auto; padding: 14px 18px; }
  .cmp-main:has(.cmp-v2) .cmp-side.one { padding: 22px 18px 18px !important; }
}
/* How it works steps: below 900px use the vertical list (the 3-column grid clashed with the list layout on iPad portrait) */
@media (max-width: 900px) { .j4 { grid-template-columns: 1fr; row-gap: 0; max-width: 560px; } }
@media (max-width: 900px) { .j4 > li > .j4-go { justify-self: start; } }
/* treatments list: photo sits at the top of each card next to its title, at every width */
.tex-img { align-self: start; }
/* treatment page on iPad: treatment list on the left, prices and "Need help choosing?" stacked on the right – no stretched boxes */
@media (min-width: 641px) and (max-width: 1100px) {
  .td-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "nav price" "nav help"; align-items: start; }
  .td-side .td-nav { grid-area: nav; } .td-side .td-price { grid-area: price; } .td-side .td-help { grid-area: help; }
}
@media (max-width: 640px) { .td-side { grid-template-columns: 1fr; } }
/* FAQ page: the "Still deciding?" box lines up with the questions above it */
.faq-groups ~ .faq-more { max-width: 860px; }
/* gallery credit note spans the same width as the photo grid */
.sg-credit { max-width: none; margin-left: 0; margin-right: 0; }
/* four tabs on phones: one row that scrolls sideways */
@media (max-width: 700px) { body .gd-tabs { display: grid; grid-template-columns: repeat(var(--gdn, 3), minmax(0, 1fr)); width: 100%; } body .gd-tabs:has(> :nth-child(4)) { --gdn: 4; } body .gd-tabs:has(> :nth-child(5)) { --gdn: 5; } body .gd-tabs:has(> :nth-child(4)) button, body .gd-tabs:has(> :nth-child(5)) button { flex-direction: column; justify-content: center; gap: 2px; height: 52px; padding: 0 4px; font-size: 12px; } }
.gd-tabs .gd-tw { display: inline; margin-left: -4px; }
@media (max-width: 560px) { .gd-tabs .gd-tw { display: none; } }

.j4 > li:not(:hover) .j4-ic, .j4 > li:not(:hover) .j4-ic .ic { color: var(--navy); }
@media (min-width: 901px) { .j4 > li > .j4-go { margin-top: auto; padding-top: 14px; } }
@media (min-width: 901px) { .j4 > li > p { min-height: calc(3 * 1.55em); } }
@media (min-width: 901px) { .j4 > li > h4 { display: flex; align-items: flex-end; justify-content: center; min-height: 2.4em; } }
/* step titles on one line (desktop) */
@media (min-width: 901px) { .j4 > li > h4 { min-height: 0; margin-left: -8px; margin-right: -8px; font-size: 16.5px; letter-spacing: -.01em; white-space: nowrap; } }
/* a clear gap between each step title and its description */
body .j4 > li > h4 { margin-bottom: 14px !important; }

/* About us (home): text left, the partner clinic's treatment-and-travel video right (portrait) */
.abt-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }
.abt-txt p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--slate-500); }
.abt-txt p:last-child { margin-bottom: 0; }
.abt-txt strong { font-weight: 600; color: var(--teal-700); }
.abt-txt p > strong:first-child { color: var(--navy); }
.abt-lead { font-size: 18.5px !important; }
.abt-vid { margin: 0; }
.abt-vid video { display: block; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 9 / 16; max-height: 640px; object-fit: cover; border-radius: 24px; background: #0d2a45; box-shadow: 0 30px 60px -34px rgba(5, 56, 99, .55); }
.abt-vid figcaption { max-width: 380px; margin: 12px auto 0; text-align: center; font-size: 12.5px; color: var(--slate-500); }
.abt-vid figcaption b { color: var(--navy); font-weight: 600; }
@media (max-width: 900px) { .abt-grid { grid-template-columns: 1fr; gap: 32px; } .abt-vid video { max-width: 340px; } }
@media (max-width: 560px) { .abt-txt p { font-size: 16px; } .abt-lead { font-size: 17px !important; } }

/* Hungary or Turkey (how-it-works #compare): two country cards, rows aligned across both (subgrid) */
.hvt { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto repeat(12, auto) auto; column-gap: 22px; }
.hvt-card { grid-row: span 15; display: grid; grid-template-rows: subgrid; border-radius: 24px; background: #fff; border: 1px solid #e3e9ee; box-shadow: 0 18px 40px -34px rgba(5,56,99,.5); overflow: hidden; }
.hvt-h { display: flex; align-items: center; gap: 16px; padding: 22px 24px 14px; }
.hvt-flag { flex: none; width: 54px; height: 36px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(5,56,99,.12); } .hvt-flag svg { width: 100%; height: 100%; display: block; }
.hvt-h h3 { margin: 0; font: 700 24px var(--title); letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.hvt-h em { display: inline-block; margin-top: 4px; padding: 3px 12px; border-radius: 999px; font: 600 12px var(--title); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.hvt-card.hu .hvt-h em { background: var(--blue-50); color: var(--blue-700, #1f5f74); } .hvt-card.tr .hvt-h em { background: var(--sand-50); color: var(--sand-800, #6b4a1c); }
.hvt-hl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 16px 12px; padding: 14px; border-radius: 16px; }
.hvt-card.hu .hvt-hl { background: var(--blue-50); } .hvt-card.tr .hvt-hl { background: var(--sand-50); }
.hvt-hl span { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--title); color: var(--navy); }
.hvt-hl span + span { padding-left: 10px; border-left: 1px solid rgba(5,56,99,.1); }
.hvt-hl .ic { flex: none; width: 22px; height: 22px; color: #04847f; }
.hvt-r { display: grid; grid-template-columns: 30px 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 13px 24px; border-top: 1px solid #eef2f5; }
.hvt-ri { display: grid; place-items: center; color: #04847f; } .hvt-ri .ic { width: 20px; height: 20px; }
.hvt-r b { font: 600 14.5px/1.3 var(--title); color: var(--navy); }
.hvt-r > span:last-child { padding-left: 14px; border-left: 1px solid #eef2f5; font-size: 14px; line-height: 1.5; color: #4a5b6b; }
.hvt-go { align-self: end; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 16px 24px 20px; border-top: 1px solid #eef2f5; font: 600 14.5px var(--title); color: #04847f; text-decoration: none; }
.hvt-go .ic { width: 16px; height: 16px; }
.hvt-foot { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px 22px; border-radius: 18px; background: #eef8f7; border: 1px solid #cfece8; }
.hvt-fi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #04847f; } .hvt-fi .ic { width: 20px; height: 20px; }
.hvt-foot p { flex: 1; margin: 0; font-size: 15px; line-height: 1.5; color: var(--navy); }
.hvt-foot .btn { flex: none; border-radius: 999px; background: #fff; }
@media (max-width: 1100px) { .hvt-r { grid-template-columns: 26px 120px minmax(0, 1fr); padding: 12px 18px; } .hvt-hl { grid-template-columns: 1fr; } .hvt-hl span + span { padding-left: 0; border-left: 0; } }
@media (max-width: 860px) {
  .hvt { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; }
  .hvt-card { grid-row: auto; display: flex; flex-direction: column; }
  .hvt-hl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hvt-hl span { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; }
  .hvt-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) { .hvt-r { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; } .hvt-r > span:last-child { grid-column: 2; padding-left: 0; border-left: 0; } .hvt-h h3 { font-size: 21px; } .hvt-hl { gap: 8px; padding: 12px; } }

/* Why panels: icons instead of squares, same colours */
.wyp .p-sq.p-ic, .wyp .wyp-pane.on .p-sq.p-ic { width: 18px; height: 18px; background: none; color: var(--acc); transform: none; display: grid; place-items: center; }
.wyp .p-sq.p-ic .ic { width: 18px; height: 18px; }
@media (min-width: 861px) and (max-width: 1500px) { .wyp .p-tab:has(.p-ic) { gap: 8px; letter-spacing: .08em; } }
@media (min-width: 861px) and (max-width: 1200px) { .wyp .wyp-pane:not(.on) .p-tab:has(.p-ic) { padding-left: 14px; padding-right: 10px; gap: 7px; font-size: 11.5px; letter-spacing: .05em; } }
@media (min-width: 861px) and (max-width: 960px) { .wyp .wyp-pane:not(.on) .p-tab:has(.p-ic) { font-size: 10.5px; letter-spacing: .03em; padding-left: 12px; } }