/* Guau landing: editorial hero, focused product tour, clear trial-to-paid path. */

/* ── TIPOGRAFÍAS DE RESPALDO CON MÉTRICAS AJUSTADAS ──
   Arreglan el ÚNICO Core Web Vital que fallaba: CLS 0.14 en móvil.

   Medido en producción (412x915, Slow 4G, 4x CPU), no supuesto, y con un A/B
   que aísla la causa: con caché FRÍA el CLS era 0.1393 en 3 saltos; con caché
   CALIENTE, 0.0000 en 0 saltos. Las 7 tipografías de Google terminan de
   cargar a los ~2193 ms y el texto se recompone a los ~3538 ms. Los deltas
   por elemento son distintos (.hero-btns 29 px, .hero-fine y .hero-price
   95 px), que es recomposición de TEXTO, no un bloque moviéndose entero.

   O sea: NO es el problema de imágenes sin width/height. Las dos del hero ya
   traen sus dimensiones. Es el swap de la tipografía web, y `display=swap`
   -- que ya estaba puesto -- es justo lo que lo provoca.

   Sólo lo sufre quien llega por primera vez: en la segunda visita la fuente
   sale de caché y el salto es cero. Es decir, lo ve exactamente la groomer
   que acaba de descubrir el producto.

   El respaldo se ancla en Arial y no en system-ui a propósito. Medido en
   canvas sobre frases reales de esta página: contra system-ui (Segoe UI en
   Windows) Inter es un 8.9% más ancha; contra Arial, sólo entre 1% y 6%.
   La cadena actual cae en system-ui, así que esto acerca las métricas en vez
   de alejarlas.

   LÍMITE HONESTO: los valores se midieron en Chrome/Windows. En Android
   `local('Arial')` suele resolver a Roboto y en iOS a la Arial de verdad, así
   que el ajuste no será idéntico en el teléfono -- que es justamente donde
   viven las usuarias. Aun así no puede empeorar: parte de un desajuste del
   ~9% y lo deja en pocos puntos. Si alguna vez se puede medir en un Android
   real, vuelve a tomar los números aquí. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  font-weight: 400;
  size-adjust: 105.92%;
  ascent-override: 91.58%;
  descent-override: 22.66%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  font-weight: 500 700;
  size-adjust: 101.5%;
  ascent-override: 95.5%;
  descent-override: 23.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial');
  font-weight: 500 700;
  size-adjust: 100.9%;
  ascent-override: 97.14%;
  descent-override: 28.74%;
  line-gap-override: 0%;
}

:root {
  --paper: #fff; --sand: #F6F3EC; --sand-2: #EFEADD;
  --ink: #17130D; --ink-soft: #5C5646; --ink-faint: #6E6754;
  --mist: #E6E1D3; --mist-2: #D8D0B9;
  --clay: #C0551A; --clay-dark: #A6470F; --clay-tint: #FBEDE3;
  --moss: #5A4033; --moss-tint: #F3E9E3; --green: #1A7A4A; --red: #B23A2E;
  /* El respaldo ajustado va DESPUÉS de la fuente real (para que la real gane
     en cuanto carga) y ANTES de system-ui (para que sea quien se use mientras
     tanto, en vez del Segoe UI/Roboto sin ajustar). */
  --display: 'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', 'Inter Fallback', system-ui, sans-serif; --mono: ui-monospace, monospace;
  --shadow: 0 20px 60px -24px rgba(23,19,13,.22);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font: 400 1rem/1.65 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
body.lang-es .t-en, body.lang-en .t-es, [hidden] { display: none !important; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, a, summary { touch-action: manipulation; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--clay); outline-offset: 5px; border-radius: 5px; }
::selection { background: var(--clay-tint); color: var(--ink); }
.wrap { width: min(1184px, calc(100% - 80px)); margin-inline: auto; }
.pad { padding-block: 100px; }
section, article[id] { scroll-margin-top: 110px; }
.eyebrow { display: block; margin-bottom: 20px; color: var(--clay-dark); font-size: .875rem; line-height: 1.5; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.h2 { font: 600 clamp(2rem, 3.4vw, 3rem)/1.12 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.h2 em { color: var(--clay); font-style: normal; }
.body-text { color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 16px; padding: 12px 20px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.btn-main, .nav-cta, .pricing-action { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 14px 24px; border: 1px solid var(--clay); border-radius: 10px; background: var(--clay); color: #fff; font-weight: 600; font-size: .9375rem; line-height: 1.5; text-align: center; transition: background .18s, transform .18s, box-shadow .18s; }
.btn-main:hover, .nav-cta:hover, .pricing-action:hover { background: var(--clay-dark); border-color: var(--clay-dark); transform: translateY(-2px); box-shadow: 0 6px 18px -10px var(--clay-dark); }
.btn-main > [aria-hidden] { font-size: 1.35rem; font-weight: 400; line-height: 1; }
.btn-ghost { display: inline-flex; align-items: center; min-height: 48px; font-size: .9375rem; font-weight: 600; border-bottom: 1px solid var(--ink); }
.btn-ghost:hover { color: var(--clay-dark); border-color: var(--clay-dark); }

/* Navigation stays quiet and provides a direct return path for customers. */
.nav { position: sticky; z-index: 80; top: 0; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--mist); }
.nav.scrolled { box-shadow: 0 4px 20px -16px rgba(23,19,13,.35); }
.nav-inner { width: min(1312px, calc(100% - 80px)); margin: auto; min-height: 88px; display: flex; align-items: center; gap: 32px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.5rem/1 var(--display); letter-spacing: -.05em; white-space: nowrap; }
.nav-brand img { flex-shrink: 0; }
.brand-app { font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-inline: auto; }
.nav-links a, .nav-login { font-size: .875rem; font-weight: 500; }
.nav-links a:hover, .nav-login:hover { color: var(--clay-dark); }
.nav-right { display: flex; align-items: center; gap: 22px; }
.lang-pill { display: flex; padding: 3px; border: 1px solid var(--mist); border-radius: 8px; }
.lang-btn { border: 0; background: transparent; padding: 8px; min-height: 38px; min-width: 36px; font-size: .875rem; color: var(--ink-soft); border-radius: 5px; }
.lang-btn.active { background: var(--sand-2); color: var(--ink); font-weight: 600; }
/* Outline, not filled: the nav CTA and the hero CTA used to be the same
   weight and nearly the same words, so they competed. The hero keeps the
   solid --clay fill; this steps back to an outline. --clay-dark on the nav's
   own background measures 5.95:1, and the border carries the affordance. */
.nav-cta { min-height: 44px; padding: 10px 18px; font-size: .875rem; background: transparent; color: var(--clay-dark); border-color: var(--clay-dark); box-shadow: none; }
.nav-cta:hover { background: var(--clay-dark); border-color: var(--clay-dark); color: #fff; }

/* The photographic hero uses a deliberately asymmetric composition. */
.hero { background: var(--sand); padding-top: 68px; }
.hero-inner { display: grid; grid-template-columns: 1.04fr 1fr; gap: 70px; align-items: center; padding-bottom: 68px; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero-h1 { font: 600 clamp(3rem, 5.15vw, 4.65rem)/1.05 var(--display); letter-spacing: -.052em; margin-bottom: 26px; }
.hero-h1 em { color: var(--clay); font-style: normal; }
.hero-h1.t-en { font-size: clamp(2.8rem, 4.4vw, 4rem); }
/* Who the product is for, stated once. Deliberately quieter than the h1 and
   the sub: --clay-dark at .8125rem measures 5.95:1 on --paper. */
.hero-for { margin: -14px 0 18px; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--clay-dark); }
.hero-sub { max-width: 470px; font-size: 1.0625rem; line-height: 1.8; color: var(--ink-soft); }
.hero-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 30px; }
/* The hero button is the page's primary action, so it outweighs the nav CTA
   (which is reduced to an outline below) rather than matching it. */
.hero-btns .btn-main { min-height: 58px; padding: 17px 30px; font-size: 1rem; box-shadow: 0 14px 30px -12px rgba(192,85,26,.55); }
.hero-btns .btn-main:hover { box-shadow: 0 18px 34px -12px rgba(166,71,15,.62); }
.hero-cta-sub { margin-top: 14px; font-size: .8125rem; font-weight: 600; color: var(--ink-soft); }
.hero-fine { margin-top: 6px; font-size: .875rem; color: var(--ink-soft); }
.hero-price { display: block; width: fit-content; max-width: 460px; margin-top: 10px; font-size: .8125rem; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; }
.hero-visual { position: relative; min-width: 0; padding: 0 0 80px 18px; }
.hero-photo { position: relative; overflow: hidden; border-radius: 160px 160px 24px 24px; background: var(--sand-2); }
.hero-photo img { width: 100%; aspect-ratio: .98; object-fit: cover; object-position: center 42%; }
/* Sits ABOVE the photo, not centred over its foot: the device frame now
   occupies the bottom-left corner and was covering this pill outright. Top
   of the photo is background wall in the art, so the pill stays readable. */
.hero-photo figcaption { position: absolute; top: 18px; left: 24px; right: 24px; width: fit-content; margin: auto; border: 1px solid rgba(255,255,255,.5); border-radius: 100px; padding: 8px 16px; color: var(--ink); background: rgba(255,255,255,.92); font-size: .875rem; text-align: center; font-weight: 500; }
/* Device frame holding a REAL screenshot of the agenda day view, cropped from
   shared/images/features/agenda.png. It replaced a hand-built HTML mockup of
   the same two appointments: the mockup could drift from the product without
   anything failing, and it asked visitors to trust a drawing of the app
   instead of the app. The crop is 540x295, so the screen is wide rather than
   tall -- a real phone-shaped capture does not exist yet. Swapping one in
   means replacing the file and its width/height, nothing else here. */
.hero-shot { position: absolute; left: -24px; bottom: 0; width: min(352px, 90%); margin: 0; background: var(--ink); padding: 9px 9px 0; border-radius: 22px; box-shadow: 0 24px 60px -12px rgba(23,19,13,.34); transform: rotate(-3deg); }
.hero-shot-screen { border-radius: 15px; overflow: hidden; background: #FAF8F3; }
.hero-shot-screen img { display: block; width: 100%; height: auto; }
.hero-shot-cap { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 7px 10px; font-size: .8125rem; font-weight: 600; color: #fff; }
/* Solid, not alpha-white: see .ph-sub in css/landing.css -- fading text toward
   a dark background is how this palette has failed AA before. #C8C2B2 on
   --ink measures 10.4:1. */
.sample-label { font-size: .75rem; color: #C8C2B2; font-weight: 400; }
.hero-benefits { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--mist-2); padding-block: 23px; gap: 32px; }
.hero-benefits p { display: flex; align-items: baseline; gap: 14px; font-size: .875rem; color: var(--ink-soft); }
.hero-benefits strong { font-family: var(--display); font-size: .8125rem; color: var(--clay-dark); }

/* A single large screenshot replaces the long two-column screenshot wall. */
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 44px; }
.section-heading > .body-text { max-width: 380px; }
/* The tabs were a 226px sidebar of bare text links. They are still a real
   tablist -- js/landing-home.js keeps role/aria-selected and shows one panel
   at a time -- but each one now carries an icon and a one-line description,
   so the grid is scannable before anything is clicked.
   The description lives HERE and nowhere else. It used to be printed again in
   the panel directly below, which meant the selected feature stated itself
   twice in a row. The panel keeps its heading, screenshot and any links. */
.tour-layout { display: grid; grid-template-columns: 1fr; gap: 30px; }
.tour-tabs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.tour-tab { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid var(--mist); border-radius: 12px; background: var(--paper); color: var(--ink-soft); line-height: 1.45; transition: border-color .15s, box-shadow .15s, background .15s; }
.tour-tab:hover { background: var(--sand); border-color: var(--mist-2); }
.tour-tab:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.tour-tab-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--sand); color: var(--clay-dark); }
.tour-tab-ico svg { width: 18px; height: 18px; }
.tour-tab-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tour-tab-name { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.tour-tab-desc { font-size: .8125rem; color: var(--ink-soft); }
.tour-tab[aria-selected="true"] { background: var(--clay-tint); border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.tour-tab[aria-selected="true"] .tour-tab-name { color: var(--clay-dark); }
.tour-tab[aria-selected="true"] .tour-tab-ico { background: var(--clay); color: #fff; }
.tour-panels { min-width: 0; }
.tour-card { border: 1px solid var(--mist); border-radius: 18px; overflow: hidden; background: var(--sand); margin-bottom: 24px; }
.tour-card:last-child { margin-bottom: 0; }
/* min-height was reserving room for a description paragraph that now lives
   only on the tab card; without dropping it the block sits half empty. */
.tour-card-copy { position: relative; padding: 24px 32px; background: #fff; }
.tour-card h3 { font: 600 1.4rem/1.3 var(--display); letter-spacing: -.03em; margin-bottom: 10px; padding-right: 36px; }
.tour-card p { color: var(--ink-soft); font-size: 1rem; }
.tour-number { position: absolute; right: 28px; top: 28px; color: var(--clay-dark); font-size: .8125rem; }
.tour-image-link { display: block; border-top: 1px solid var(--mist); }
.tour-image-link img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; }
.tour-expand { display: block; text-align: right; padding: 12px 22px; font-size: .875rem; color: var(--clay-dark); }
.tour-image-link:hover .tour-expand { text-decoration: underline; }
.tour-note { font-size: .8125rem; color: var(--ink-faint); margin-top: 18px; text-align: right; }
details { border-block: 1px solid var(--mist); }
summary { padding: 22px 0; cursor: pointer; font-size: .9375rem; font-weight: 600; }
.workflow-details { margin-top: 36px; }
.workflow-section.pad { padding: 28px 0 40px; }
.workflow-section .wrap { width: 100%; }
.workflow-section .section-head { text-align: center; max-width: 640px; margin: auto; }
.workflow-section .h2 { font-size: 2rem; }
.workflow-section .body-text { margin-block: 18px 28px; }
.workflow-demo { max-width: 620px; margin: auto; }
.workflow-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.workflow-tab { flex: 1; min-width: 0; border: 1px solid var(--mist-2); background: #fff; color: var(--ink-soft); border-radius: 8px; padding: 12px 8px; font-size: .875rem; }
.workflow-tab > span { margin-right: 8px; }
.workflow-tab.active { background: var(--clay); border-color: var(--clay); color: #fff; }
.workflow-stage { border: 1px solid var(--mist-2); border-radius: 14px; overflow: hidden; background: var(--sand); }
.flow-browser-bar, .flow-phone-bar { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-bottom: 1px solid var(--mist); background: #fff; }
.flow-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--mist-2); }
.flow-browser-bar small { margin-left: 12px; color: var(--ink-faint); font-size: .75rem; overflow-wrap: anywhere; }
.flow-phone-bar { color: var(--green); }
.flow-phone-bar small { margin-left: 12px; font-size: .8125rem; }
.flow-content { padding: 28px; min-height: 315px; }
.flow-content h3 { font: 600 1.4rem var(--display); margin-bottom: 20px; }
.flow-kicker { color: var(--clay-dark); font-size: .875rem; margin-bottom: 8px; }
.flow-service, .flow-total { display: flex; gap: 16px; align-items: center; padding: 12px 16px; border: 1px solid var(--mist); border-radius: 8px; background: #fff; margin-bottom: 8px; font-size: 1rem; }
.flow-service b, .flow-total b { margin-left: auto; }
.flow-service em { color: var(--green); }
.flow-service.selected { border-color: var(--clay); }
.flow-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px; }
.flow-slots span { background: #fff; padding: 6px 16px; border-radius: 5px; font-size: .875rem; }
.flow-slots .active { background: var(--clay-tint); color: var(--clay-dark); }
.flow-action { background: var(--clay); color: #fff; text-align: center; padding: 10px; border-radius: 8px; }
.flow-chat { background: #E4F1E6; border-radius: 12px 12px 0 12px; padding: 18px; max-width: 85%; margin: 0 0 20px auto; }
.flow-chat small { display: block; text-align: right; margin-top: 10px; font-size: .75rem; color: #3F6947; }
.flow-chat.reply { background: #fff; margin-left: 0; }
.payment-flow { text-align: center; }
.flow-paid-icon { color: var(--green); font-size: 2rem; }
.flow-status { color: var(--green); font-size: .9375rem; margin-top: 20px; }
.workflow-caption { padding: 18px 0 0; font-size: .9375rem; color: var(--ink-soft); text-align: center; }

/* Care story: photographic evidence, useful copy, one honest message example. */
.care-section { background: var(--sand); }
.care-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.care-copy > .body-text { margin-top: 24px; }
.care-list { list-style: none; padding: 0; margin-top: 28px; }
.care-list li { border-top: 1px solid var(--mist-2); padding-block: 17px; }
.care-list strong { font-size: 1rem; font-weight: 600; }
.care-list p { margin-top: 4px; font-size: .9375rem; color: var(--ink-soft); line-height: 1.7; }
.care-visual { min-width: 0; }
.care-photo { border-radius: 18px; overflow: hidden; background: white; border: 1px solid var(--mist); }
.care-photo img { width: 100%; }
.care-photo figcaption { display: grid; grid-template-columns: 1fr 1fr; text-align: center; padding: 13px; font-size: .875rem; font-weight: 600; }
.care-photo figcaption > span + span { border-left: 1px solid var(--mist); color: var(--clay-dark); }
.message-example { position: relative; margin: -6px 22px 0; padding: 22px; border: 1px solid var(--mist); background: #fff; border-radius: 0 0 16px 16px; box-shadow: var(--shadow); }
.message-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .8125rem; color: var(--ink-faint); margin-bottom: 12px; }
.message-heading > span:last-child { color: var(--green); font-weight: 600; }
.message-body { border-radius: 10px 10px 0 10px; background: #EAF3E9; color: #26432E; padding: 16px; font-size: .9375rem; }
.message-example > .sample-label { margin-top: 12px; }

/* Getting started offers one manageable first appointment. */
.first-visit-intro { max-width: 620px; margin-top: 22px; }
.first-visit-steps { display: grid; grid-template-columns: repeat(3,1fr); list-style: none; padding: 0; margin-top: 42px; gap: 36px; }
.first-visit-steps li { border-top: 1px solid var(--mist-2); padding-top: 24px; }
.first-visit-number { font: 500 2.75rem/1 var(--display); color: var(--clay); display: block; margin-bottom: 24px; letter-spacing: -.05em; }
.first-visit h3 { font: 600 1.1875rem/1.4 var(--display); margin-bottom: 12px; }
.first-visit-steps p, .first-visit-footer p { font-size: 1rem; color: var(--ink-soft); line-height: 1.8; }
.first-visit-footer { display: flex; justify-content: space-between; align-items: center; gap: 40px; border-top: 1px solid var(--mist); margin-top: 42px; padding-top: 30px; }
.first-visit-footer > div { max-width: 630px; }
.first-visit-footer .btn-main { flex-shrink: 0; }

/* Transparent price cards and the full billing sequence. */
#precios { background: var(--sand); }
.pricing-transparent { text-align: center; }
.pricing-intro { max-width: 650px; margin: 22px auto 0; }
.pricing-options { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 950px; margin: 40px auto 0; text-align: left; }
.pricing-option { display: flex; flex-direction: column; gap: 16px; background: #fff; padding: 36px; border: 1px solid var(--mist-2); border-radius: 18px; }
.pricing-option-paid { border: 2px solid var(--clay); position: relative; }
.pricing-option h3 { font: 600 1.25rem/1.4 var(--display); }
.pricing-cost { font: 600 clamp(3rem,4vw,4rem)/1.15 var(--display); letter-spacing: -.05em; }
.pricing-cost span { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.pricing-term { color: var(--clay-dark); font-weight: 600; }
.pricing-option p:not(.pricing-cost):not(.pricing-term) { color: var(--ink-soft); }
.pricing-detail { font-size: .875rem; line-height: 1.8; }
.pricing-action { display: flex; margin-top: auto; width: 100%; }
.pricing-action-secondary { color: var(--clay-dark); background: #fff; }
.pricing-action-secondary:hover { background: var(--clay-tint); color: var(--clay-dark); }
.pricing-includes, .pricing-terms { max-width: 950px; margin: 32px auto 0; text-align: left; }
.pricing-includes h3, .pricing-terms h3 { font: 600 1.125rem/1.5 var(--display); }
.pricing-includes { border-bottom: 1px solid var(--mist-2); padding: 0 8px 32px; }
.price-tier-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; list-style: none; padding: 22px 0 0; }
.price-tier-list li { display: flex; gap: 10px; font-size: .9375rem; color: var(--ink-soft); align-items: flex-start; }
.p-check { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 5px; display: grid; place-items: center; border-radius: 50%; background: var(--green); }
.p-check svg { width: 10px; height: 10px; }
.pricing-timeline { display: grid; grid-template-columns: repeat(3,1fr); padding: 0; list-style: none; counter-reset: billing; gap: 28px; margin-top: 22px; }
.pricing-timeline li { counter-increment: billing; font-size: .875rem; color: var(--ink-soft); }
.pricing-timeline li::before { content: '0' counter(billing); display: block; color: var(--clay-dark); margin-bottom: 8px; font-weight: 600; }
.pricing-demo { display: inline-block; padding: 18px 8px; margin-top: 24px; color: var(--clay-dark); text-decoration: underline; text-underline-offset: 4px; font-size: .9375rem; }
.comparison-details { max-width: 950px; margin: 18px auto 0; text-align: left; }
.comparison-content { padding: 22px 0; }
.comparison-content > .wrap { width: 100%; }
.comparison-content .h2 { font-size: 2rem; }
.compare-wrap { overflow-x: auto; margin-top: 24px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .875rem; text-align: left; }
.compare-table th, .compare-table td { padding: 14px; border: 1px solid var(--mist-2); }
.compare-table th { background: var(--ink); color: white; }
.compare-table th.col-us { background: var(--clay-dark); }
.compare-table td.col-us { background: var(--clay-tint); }
.compare-tick { color: var(--green); font-weight: 700; }
.compare-note, .compare-footnote { font-size: .8125rem; color: var(--ink-soft); margin-top: 16px; }
.recommend-badge { font-size: .75rem; display: block; margin-bottom: 4px; }
/* One-line answer above the table, so the comparison has a takeaway even for
   someone who never reads a cell. --ink-soft on --sand measures 7.0:1. */
.compare-lede { max-width: 46ch; margin: 14px 0 22px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.compare-summary { margin-top: 24px; }
.compare-price, .compare-price-sub { display: block; }
.compare-price { font-weight: 600; }
.compare-price-sub { font-size: .8125rem; margin-top: 6px; }
.compare-cross { color: var(--ink-faint); }
.comparison-sources { background: #fff; padding: 24px; border: 1px solid var(--mist); border-radius: 12px; margin-top: 24px; font-size: .875rem; color: var(--ink-soft); }
.comparison-sources-top { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 12px; }
.source-icon { border: 1px solid var(--mist-2); border-radius: 50%; width: 24px; height: 24px; text-align: center; flex-shrink: 0; }
.source-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; color: var(--clay-dark); text-decoration: underline; text-underline-offset: 4px; }
.why-different { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-block: 24px; }
.why-icon svg { width: 24px; height: 24px; }
.why-title { font-weight: 600; margin-block: 8px; }
.why-sub { font-size: .875rem; color: var(--ink-soft); }

/* FAQ answers have no height cap, including at enlarged text sizes. */
.faq-wrap { max-width: 860px; margin: 40px auto 0; border-top: 1px solid var(--mist); }
.faq-item { border-bottom: 1px solid var(--mist); }
.faq-q { display: block; position: relative; width: 100%; min-height: 72px; padding: 22px 44px 22px 0; border: 0; background: none; text-align: left; color: var(--ink); font-size: 1rem; font-weight: 500; line-height: 1.6; }
.faq-q::after { content: '+'; position: absolute; right: 4px; top: 22px; font-size: 1.4rem; color: var(--clay-dark); font-weight: 400; }
.faq-item.open .faq-q::after { content: '−'; }
.faq-item.open .faq-q { color: var(--clay-dark); }
.faq-a { display: none; color: var(--ink-soft); padding: 0 40px 24px 0; font-size: 1rem; line-height: 1.85; }
.faq-item.open .faq-a { display: block; }
.faq-a a { color: var(--clay-dark); text-decoration: underline; text-underline-offset: 3px; }

/* The final invitation and small mobile CTA use the same primary action. */
.cta-section { background: var(--ink); color: #fff; padding-block: 68px; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.cta-section .eyebrow { color: #F1B890; }
.cta-section .h2 em { color: #F1B890; }
.cta-action { text-align: center; flex-shrink: 0; }
.cta-action p { margin-top: 14px; color: #DFD8CD; font-size: .875rem; }
.cta-terms { display: block; margin-top: 8px; color: #DFD8CD; text-decoration: underline; text-underline-offset: 3px; font-size: .8125rem; }
.footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; width: min(1312px,calc(100% - 80px)); margin: auto; padding-block: 36px; font-size: .875rem; color: var(--ink-soft); }
.footer-brand { display: flex; align-items: center; gap: 8px; font: 600 1.125rem var(--display); color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer a:hover { color: var(--clay-dark); }
.footer-contact { width: 100%; }
.footer-copy { font-size: .8125rem; }
.sticky-offer { position: fixed; z-index: 70; bottom: 16px; left: 50%; width: min(680px,calc(100% - 32px)); transform: translate(-50%,calc(100% + 40px)); opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 14px 12px 22px; border: 1px solid var(--mist-2); border-radius: 14px; background: #fff; box-shadow: var(--shadow); transition: transform .2s, opacity .2s; }
.sticky-offer.visible { transform: translate(-50%,0); opacity: 1; pointer-events: auto; }
.sticky-offer p { font-size: .875rem; color: var(--ink-soft); }
.sticky-offer strong { display: block; color: var(--ink); }
.sticky-offer .btn-main { min-height: 44px; padding: 10px 16px; gap: 16px; flex-shrink: 0; font-size: .875rem; }

@media (min-width: 1600px) { .hero-inner { gap: 100px; } }
@media (max-width: 1100px) {
  .nav-inner { gap: 20px; }
  .nav-links { gap: 20px; }
  .nav-right { gap: 14px; }
  .nav-login { display: none; }
  .hero-inner { gap: 40px; }
  .care-layout { gap: 48px; }
  .hero-h1 { font-size: clamp(3rem,5.5vw,4rem); }
  .hero-btns { gap: 18px; }
  .tour-tabs { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tour-card-copy { padding: 24px; }
  .first-visit-footer { align-items: start; }
}
@media (max-width: 820px) {
  .wrap, .nav-inner, .footer { width: calc(100% - 40px); }
  .nav-inner { min-height: 74px; justify-content: space-between; gap: 16px; }
  .nav-links { display: none; }
  .nav-right { margin-left: auto; }
  .nav-brand { font-size: 1.25rem; }
  .nav-brand img { width: 36px; }
  .pad { padding-block: 72px; }
  .hero { padding-top: 48px; }
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 52px; }
  .hero-h1, .hero-h1.t-en { font-size: clamp(2.5rem,5.4vw,3.2rem); }
  .hero-sub { font-size: 1rem; }
  .hero-visual { padding-left: 0; }
  .hero-photo { border-radius: 120px 120px 18px 18px; }
  .hero-photo img { aspect-ratio: .8; }
  .hero-shot { left: -10px; width: calc(100% + 10px); padding: 7px 7px 0; transform: rotate(-2deg); }
  .hero-photo figcaption { display: none; }
  .hero-benefits { gap: 20px; }
  .hero-benefits p { flex-direction: column; gap: 4px; }
  .section-heading { gap: 30px; align-items: start; }
  .section-heading > .body-text { max-width: 300px; }
  .tour-layout { gap: 22px; }
  .tour-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .tour-tab { padding: 12px; gap: 9px; }
  .tour-tab-ico { width: 28px; height: 28px; }
  .tour-tab-ico svg { width: 16px; height: 16px; }
  .tour-tab-name { font-size: .875rem; }
  .tour-tab-desc { font-size: .75rem; }
  .tour-card { margin-bottom: 0; }
  .tour-card-copy { min-height: 0; }
  .care-layout { gap: 32px; }
  .message-example { margin-inline: 0; padding: 18px; }
  .message-heading { flex-wrap: wrap; gap: 4px; }
  .first-visit-steps { gap: 24px; }
  .first-visit-footer { flex-direction: column; gap: 22px; }
  .pricing-option { padding: 26px; }
  .cta-inner { gap: 32px; }
  .cta-section .h2 { font-size: 2rem; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 90px; }
  .nav-inner { min-height: 70px; gap: 8px; }
  .nav-brand { gap: 6px; font-size: 1.125rem; }
  .nav-brand img { width: 30px; }
  .nav-right { gap: 8px; }
  .nav-cta { font-size: .875rem; padding: 10px 12px; }
  .lang-pill { border: none; padding: 0; }
  .lang-btn { min-width: 30px; padding-inline: 5px; font-size: .875rem; }
  .hero { padding-top: 36px; }
  .hero-inner { grid-template-columns: 1fr; gap: 38px; padding-bottom: 42px; }
  .hero-h1, .hero-h1.t-en { font-size: clamp(2.8rem,10vw,3.7rem); line-height: 1.06; }
  .hero-copy .eyebrow { margin-bottom: 18px; font-size: .8125rem; }
  .hero-sub { max-width: 100%; }
  .hero-btns { margin-top: 24px; gap: 18px; }
  .hero-fine { margin-top: 16px; }
  .hero-visual { width: min(420px, 100%); margin-inline: auto; padding: 0 0 50px 38px; }
  .hero-photo { border-radius: 120px 120px 16px 16px; }
  .hero-photo img { aspect-ratio: 1; }
  .hero-shot { width: 78%; left: 0; transform: rotate(-3deg); }
  .hero-shot-cap { font-size: .75rem; padding: 7px 5px 8px; }
  .hero-benefits { grid-template-columns: 1fr; gap: 12px; padding-block: 22px; }
  .hero-benefits p { flex-direction: row; gap: 16px; font-size: .9375rem; }
  .pad { padding-block: 58px; }
  .h2 { font-size: clamp(2rem,7.6vw,2.5rem); }
  .section-heading { flex-direction: column; gap: 20px; margin-bottom: 26px; }
  .section-heading > .body-text { max-width: none; }
  .tour-card-copy { padding: 22px; }
  .tour-card h3 { font-size: 1.25rem; }
  .tour-note { text-align: left; }
  .tour-number { right: 22px; top: 22px; }
  .tour-expand { padding: 14px; }
  .workflow-section .h2 { font-size: 1.75rem; }
  .workflow-tab { font-size: .8125rem; }
  .workflow-tab > span { display: block; margin: 0 0 3px; }
  .flow-content { padding: 18px; }
  .flow-chat { max-width: 95%; }
  .care-layout { grid-template-columns: 1fr; gap: 28px; }
  .care-copy > .body-text { margin-top: 20px; }
  .message-example { margin-inline: 14px; }
  .first-visit-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 30px; }
  .first-visit-number { font-size: 2.25rem; margin-bottom: 16px; }
  .first-visit-footer { margin-top: 28px; padding-top: 24px; }
  .pricing-options { grid-template-columns: 1fr; margin-top: 30px; }
  .pricing-option { padding: 26px; }
  .price-tier-list { grid-template-columns: 1fr; gap: 14px; }
  .pricing-timeline { grid-template-columns: 1fr; gap: 20px; }
  .pricing-timeline li { font-size: .9375rem; }
  .pricing-includes { padding-inline: 0; }
  .why-different { grid-template-columns: 1fr; }
  /* Stacked cards instead of a 620px-wide table in a scroller. Every <td>
     already carried data-label for exactly this pattern, but no rule ever
     consumed them, so the table kept its columns and the GUAU column -- the
     rightmost of five -- sat off-screen on every phone: you had to scroll
     past three competitors to reach the one value the table exists to show.
     Each row becomes a card, and GUAU is ordered directly under the feature
     name so it is the first value read, not the last. */
  .compare-wrap { overflow-x: visible; }
  .compare-table { min-width: 0; display: block; }
  .compare-table thead { display: none; }
  .compare-table tbody { display: block; }
  .compare-table tr { display: flex; flex-direction: column; border: 1px solid var(--mist-2); border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: var(--paper); }
  .compare-table td { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 14px; border: 0; border-top: 1px solid var(--mist); padding: 10px 14px; }
  /* The price cells hold three children (label, amount, qualifier); without
     this the amount wraps mid-value. The qualifier takes its own full line. */
  .compare-table td .compare-price { margin-left: auto; }
  .compare-table td .compare-price-sub { flex: 0 0 100%; text-align: right; }
  .compare-table td:first-child { order: -2; border-top: 0; background: var(--sand); font-weight: 600; }
  .compare-table td.col-us { order: -1; }
  .compare-table td[data-label]::before { content: attr(data-label); font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
  .compare-table td.col-us[data-label]::before { color: var(--clay-dark); }
  .comparison-content .h2 { font-size: 1.75rem; }
  .faq-q { font-size: 1rem; padding-right: 32px; }
  .faq-a { padding-right: 12px; }
  .cta-section { padding-block: 48px; }
  .cta-inner { flex-direction: column; align-items: start; gap: 28px; }
  .cta-action { text-align: left; }
  .footer { padding-block: 30px; gap: 24px; }
  .footer-links { width: 100%; gap: 18px 24px; }
  .sticky-offer { bottom: 8px; width: calc(100% - 16px); padding: 10px 12px; gap: 12px; }
  .sticky-offer p { font-size: .8125rem; line-height: 1.6; }
  .sticky-offer .btn-main { padding-inline: 12px; gap: 10px; }
}
@media (max-width: 370px) {
  .brand-app { display: none; }
  .hero-btns { align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero-btns .btn-main { width: 100%; }
  .hero-shot { width: 86%; }
  .sticky-offer p { max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn-main:hover, .nav-cta:hover, .pricing-action:hover { transform: none; }
}
@media print {
  .nav, .sticky-offer, .hero-btns, .cta-section { display: none; }
  .tour-card[hidden] { display: block !important; }
  .faq-a { display: block; }
  .pad { padding-block: 24px; }
}