@import url("/css/fonts.css");

/* ============================================================================
   หมอกระดูกนครปฐม — design system
   Palette + layout language extracted from resource/design-reference.png:
   alternating deep-navy and white sections, brass-gold accent, thin gold line
   icons, bordered navy cards. Fixed light palette — NO dark mode.
   ========================================================================= */

:root {
  /* ---- colour ---------------------------------------------------------- */
  --navy-950: #01142B;
  --navy-900: #021C3B;   /* primary dark surface: hero, dark bands, footer   */
  --navy-800: #0D2542;   /* cards on dark                                    */
  --navy-700: #16345A;   /* hover / dividers on dark                         */

  --gold-300: #F0DBA4;
  --gold-400: #E5C583;
  --gold-500: #D7AE66;   /* primary accent, CTA fill                         */
  --gold-600: #C3924A;
  --gold-700: #9C6F2E;   /* gold text on WHITE — 5.7:1, AA                   */

  --surface:   #FFFFFF;
  --surface-2: #F4F7FA;
  --surface-3: #EAF0F5;

  --ink-900: #0B1F35;    /* headings on light                                */
  --ink-700: #2F4256;
  --ink-500: #5A6B80;    /* muted body on light — 5.5:1, AA                  */

  --line-light: #DFE7EE;
  --on-dark:     #FFFFFF;
  --on-dark-mut: rgba(255, 255, 255, .76);   /* 10:1 on navy                 */
  --line-dark:   rgba(215, 174, 102, .24);
  --focus:       #7FB2FF;

  /* ---- type ------------------------------------------------------------ */
  --font-head: "Prompt", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   clamp(.78rem,  .74rem + .18vw, .875rem);
  --fs-sm:   clamp(.875rem, .84rem + .18vw, .95rem);
  --fs-base: clamp(1rem,    .96rem + .22vw, 1.075rem);
  --fs-md:   clamp(1.06rem, 1rem   + .35vw, 1.2rem);
  --fs-lg:   clamp(1.22rem, 1.12rem + .5vw, 1.45rem);
  --fs-h3:   clamp(1.2rem,  1.1rem + .6vw,  1.5rem);
  --fs-h2:   clamp(1.6rem,  1.32rem + 1.3vw, 2.45rem);
  --fs-h1:   clamp(1.95rem, 1.5rem + 2.3vw,  3.4rem);
  --fs-display: clamp(2.1rem, 1.5rem + 3vw, 3.9rem);

  --lh-tight: 1.28;
  --lh-head:  1.34;
  --lh-body:  1.85;   /* Thai needs generous leading for tone marks          */

  /* ---- space (one scale, everywhere) ----------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px;
  --section-y: clamp(48px, 7vw, 104px);
  --gutter:    clamp(16px, 4vw, 40px);
  --maxw:      1200px;
  --maxw-text: 760px;

  /* ---- shape ----------------------------------------------------------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 53, .06), 0 2px 8px rgba(11, 31, 53, .05);
  --shadow-md: 0 4px 12px rgba(11, 31, 53, .08), 0 12px 32px rgba(11, 31, 53, .08);
  --shadow-gold: 0 6px 20px rgba(195, 146, 74, .28);

  /* ---- layering (never an ad-hoc z-index) ------------------------------ */
  --z-base: 1;
  --z-chat: 60;
  --z-header: 80;
  --z-menu: 100;
  --z-modal: 120;
  --z-consent: 200;      /* topmost — nothing may overlap the consent layer  */

  --header-h: clamp(58px, 4.2vw + 44px, 78px);
  --tap: 44px;
}

/* ============================ reset / base ============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  /* NEVER add overflow-x:hidden here — it silently kills position:sticky.
     Fix the overflowing element instead. */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: var(--lh-head);
  color: var(--ink-900);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

a { color: var(--gold-700); text-underline-offset: .22em; }
a:hover { color: var(--gold-600); }

img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { padding-inline-start: 1.35em; }
li + li { margin-top: var(--s-2); }
strong, b { font-weight: 600; color: var(--ink-900); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: var(--z-consent);
  background: var(--navy-900); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--s-3); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ layout ==================================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }
.wrap--text   { max-width: var(--maxw-text); }

.section { padding-block: var(--section-y); }
.section--dark  { background: var(--navy-900); color: var(--on-dark-mut); }
.section--deep  { background: var(--navy-950); color: var(--on-dark-mut); }
.section--alt   { background: var(--surface-2); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-dark); }
.section--dark strong, .section--deep strong { color: var(--on-dark); }
.section--dark a, .section--deep a { color: var(--gold-400); }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: .06em;
  color: var(--gold-700);
  margin-bottom: var(--s-3);
}
.section--dark .eyebrow, .section--deep .eyebrow { color: var(--gold-500); }

.lede { font-size: var(--fs-md); color: var(--ink-500); }
.section--dark .lede, .section--deep .lede { color: var(--on-dark-mut); }

.rule { width: 72px; height: 4px; border-radius: 2px; background: var(--gold-500); margin-block: var(--s-4); }
.section-head--center .rule { margin-inline: auto; }

/* generic responsive grids */
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* alternating image/text row */
.split { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.section--dark .split__media img, .section--deep .split__media img { box-shadow: none; border: 1px solid var(--line-dark); }

/* ============================ buttons =================================== */
/* Content-sized, wrap-friendly. NEVER nowrap or ellipsis — Thai CTA labels
   are long and a clipped label hides the offer. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  max-width: 100%;
  min-height: var(--tap);
  padding: 13px clamp(18px, 2.4vw, 26px);
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm);
  line-height: 1.35;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn__icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 5px; }
.btn__label { min-width: 0; }

.btn--line {
  background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500);
  box-shadow: var(--shadow-gold);
}
.btn--line:hover { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); }

.btn--phone {
  background: transparent; color: var(--navy-900); border-color: var(--navy-900);
}
.btn--phone:hover { background: var(--navy-900); color: var(--on-dark); }
.section--dark .btn--phone, .section--deep .btn--phone,
.cta-band .btn--phone, .site-header .btn--phone, .mobile-menu .btn--phone, .hero .btn--phone {
  color: var(--on-dark); border-color: rgba(255, 255, 255, .5);
}
.section--dark .btn--phone:hover, .section--deep .btn--phone:hover,
.cta-band .btn--phone:hover, .site-header .btn--phone:hover,
.mobile-menu .btn--phone:hover, .hero .btn--phone:hover {
  background: var(--on-dark); color: var(--navy-900); border-color: var(--on-dark);
}

.btn--ghost {
  background: transparent; color: var(--navy-900); border-color: var(--navy-900);
}
.btn--ghost:hover { background: var(--navy-900); color: var(--on-dark); }

.btn--sm { padding: 9px 16px; font-size: var(--fs-xs); }
.btn--lg { padding: 16px clamp(22px, 3vw, 34px); font-size: var(--fs-base); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: stretch; }
.btn-row--center { justify-content: center; }
.phone-strong { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ============================ sticky header ============================= */
/* position:sticky on <header> itself. No ancestor may set overflow/transform. */
.site-header {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: var(--navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header__bar {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding-block: var(--s-2);
}

/* DOM order in the header is: brand, hamburger, nav, header__cta — the hamburger
   must be the FIRST button[aria-expanded] inside <header> (the nav dropdown
   toggles also carry aria-expanded and are display:none below 1024px).
   Visual order is restored with `order`. */
.brand { order: 1; }
.hamburger { order: 4; }
.nav { order: 2; }
.header__cta { order: 3; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--tap);
  text-decoration: none; color: var(--gold-500);
  flex: 0 1 auto; min-width: 0;
}
.brand .logo-mark { width: clamp(30px, 3.4vw, 38px); height: auto; flex: 0 0 auto; }
.brand__text { display: grid; line-height: 1.05; }
.brand__name {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(.98rem, .8rem + .7vw, 1.24rem);
  color: var(--on-dark); white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(.56rem, .48rem + .3vw, .68rem);
  letter-spacing: .18em; color: var(--gold-500); white-space: nowrap;
}

.nav { display: none; margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(4px, 1vw, 18px); list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 10px; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-sm);
  color: var(--on-dark-mut); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--gold-500); }
.nav__link[aria-current="page"] { color: var(--gold-500); }
.nav__caret { width: 10px; height: 10px; fill: currentColor; transition: transform .18s ease; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; inset-inline-start: 0; top: calc(100% + 8px);
  display: none;
  min-width: 460px; max-width: min(92vw, 640px);
  padding: var(--s-5);
  background: var(--navy-800);
  border: 1px solid var(--line-dark); border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(1, 20, 43, .45);
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel-title {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .06em; color: var(--gold-500); margin-bottom: var(--s-3);
}
.nav__cols { columns: 2; column-gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.nav__cols li { margin: 0; break-inside: avoid; }
.nav__cols a {
  display: block; padding: 7px 8px; border-radius: 6px;
  font-size: var(--fs-sm); color: var(--on-dark-mut); text-decoration: none;
}
.nav__cols a:hover { background: rgba(255, 255, 255, .07); color: var(--gold-400); }

.header__cta { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-3); }
.header__cta .btn--phone { display: none; }

.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: 0 0 auto;
  background: transparent; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm); color: var(--on-dark); cursor: pointer;
}
.hamburger svg { width: 22px; height: 22px; fill: currentColor; }
.hamburger__close { display: none; }
.hamburger[aria-expanded="true"] .hamburger__open { display: none; }
.hamburger[aria-expanded="true"] .hamburger__close { display: block; }

/* ---- mobile menu ---- */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: none;
  background: rgba(1, 20, 43, .55);
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu__panel {
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: min(92vw, 420px);
  background: var(--navy-900);
  border-inline-start: 1px solid var(--line-dark);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-5) var(--s-5) var(--s-9);
}
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.mobile-menu__close {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-sm); color: var(--on-dark); cursor: pointer;
}
.mobile-menu__close svg { width: 20px; height: 20px; fill: currentColor; }
.mobile-nav { list-style: none; margin: 0; padding: 0; }
.mobile-nav > li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mobile-nav a, .mobile-nav > li > button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%; min-height: 50px; padding: 12px 4px;
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-base);
  color: var(--on-dark); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: start;
}
.mobile-nav__sub { list-style: none; margin: 0 0 var(--s-4); padding: 0 0 0 var(--s-4); display: none; }
.mobile-nav__sub[data-open="true"] { display: block; }
.mobile-nav__sub li { margin: 0; border: 0; }
.mobile-nav__sub a {
  min-height: var(--tap); padding: 9px 4px;
  font-family: var(--font-body); font-size: var(--fs-sm); color: var(--on-dark-mut);
}
.mobile-nav__sub a:hover { color: var(--gold-400); }
.mobile-menu__cta { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.mobile-menu__cta .btn { width: 100%; }

@media (min-width: 1024px) {
  .nav { display: block; margin-inline-start: auto; }
  .nav + .header__cta { margin-inline-start: 0; }
  .hamburger { display: none; }
  .header__cta .btn--phone { display: inline-flex; }
}

/* ============================ hero ====================================== */
.hero {
  position: relative;
  background: var(--navy-900);
  background-image:
    radial-gradient(900px 520px at 88% 8%,  rgba(215, 174, 102, .20), transparent 68%),
    radial-gradient(700px 460px at 6% 92%, rgba(22, 52, 90, .85),   transparent 70%);
  color: var(--on-dark-mut);
  padding-block: clamp(36px, 6vw, 84px) clamp(40px, 6vw, 88px);
}
.hero__grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.08fr .92fr; } }

.hero h1 { color: var(--on-dark); margin-bottom: var(--s-4); }
.hero h1 .accent { color: var(--gold-500); display: block; }
.hero__lede { font-size: var(--fs-md); color: var(--on-dark-mut); max-width: 56ch; }
.hero__cta { margin-top: clamp(24px, 3vw, 34px); }

.hero__badges {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
/* icon in column 1 spanning both rows; title above description in column 2 */
.hero__badge { display: grid; grid-template-columns: 26px 1fr; column-gap: var(--s-3); align-items: start; }
.hero__badge svg { grid-row: 1 / span 2; width: 26px; height: 26px; stroke: var(--gold-500); fill: none; stroke-width: 1.6; }
.hero__badge b { display: block; font-family: var(--font-head); font-size: var(--fs-sm); color: var(--on-dark); font-weight: 600; }
.hero__badge span { font-size: var(--fs-xs); color: var(--on-dark-mut); line-height: 1.55; }

.hero__media { position: relative; }
.hero__portrait {
  width: 100%; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  border: 1px solid var(--line-dark);
  box-shadow: 0 24px 60px rgba(1, 20, 43, .5);
}
.hero__stamp {
  position: absolute; inset-inline-start: clamp(-4px, -1vw, 8px); bottom: clamp(-10px, -1.6vw, 0px);
  max-width: min(84%, 330px);
  background: var(--gold-500); color: var(--navy-900);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-gold);
}
.hero__stamp b { display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); line-height: 1.4; }
.hero__stamp span { display: block; font-size: var(--fs-xs); line-height: 1.5; }

/* ---- condition strip under the hero ---- */
.strip { background: var(--navy-950); padding-block: clamp(24px, 3vw, 40px); }
.strip__inner {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(50% - 1px, 150px), 1fr));
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-md); overflow: hidden;
}
.strip__item {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(16px, 2.4vw, 26px) var(--s-3);
  background: var(--navy-950); text-align: center;
}
.strip__item svg { width: 34px; height: 34px; stroke: var(--gold-500); fill: none; stroke-width: 1.5; }
.strip__item span {
  font-family: var(--font-head); font-weight: 500; font-size: var(--fs-xs);
  color: var(--on-dark); line-height: 1.5;
}

/* ============================ cards ===================================== */
.card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line-light); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.card h3 { color: var(--ink-900); }
.card p { font-size: var(--fs-sm); color: var(--ink-500); }
.card__icon { width: 42px; height: 42px; stroke: var(--gold-600); fill: none; stroke-width: 1.5; }
.card img { border-radius: var(--r-sm); width: 100%; }

.section--dark .card, .section--deep .card {
  background: var(--navy-800); border-color: var(--line-dark); box-shadow: none;
}
.section--dark .card h3, .section--deep .card h3 { color: var(--on-dark); }
.section--dark .card p, .section--deep .card p { color: var(--on-dark-mut); }
.section--dark .card__icon, .section--deep .card__icon { stroke: var(--gold-500); }

/* feature list with vertical dividers (the "why choose" band) */
.features {
  display: grid; gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.features__item { text-align: center; padding-inline: var(--s-3); }
.features__item svg { width: 44px; height: 44px; margin-inline: auto; stroke: var(--gold-600); fill: none; stroke-width: 1.5; }
.features__item h3 { font-size: var(--fs-md); margin-block: var(--s-3) var(--s-2); }
.features__item p { font-size: var(--fs-sm); color: var(--ink-500); }
@media (min-width: 900px) {
  .features__item + .features__item { border-inline-start: 1px solid var(--line-light); }
  .section--dark .features__item + .features__item { border-inline-start-color: rgba(255, 255, 255, .12); }
}

/* stat band */
.stats {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px);
  padding-block: var(--s-5);
}
.stat { display: flex; align-items: center; gap: var(--s-3); }
.stat svg { width: 34px; height: 34px; stroke: var(--gold-600); fill: none; stroke-width: 1.5; flex: 0 0 auto; }
.stat b { display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); color: var(--ink-900); line-height: 1.2; }
.stat span { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.section--dark .stat b { color: var(--on-dark); }
.section--dark .stat span { color: var(--on-dark-mut); }
.section--dark .stat svg { stroke: var(--gold-500); }

/* process / timeline */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 24px); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } }
.steps li { margin: 0; position: relative; padding: clamp(20px, 2.4vw, 28px); background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--line-light); }
.section--dark .steps li { background: var(--navy-800); border-color: var(--line-dark); }
.steps__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-bottom: var(--s-3);
  border-radius: var(--r-pill); background: var(--gold-500); color: var(--navy-900);
  font-family: var(--font-head); font-weight: 700;
}
.steps h3 { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.steps p { font-size: var(--fs-sm); color: var(--ink-500); }
.section--dark .steps p { color: var(--on-dark-mut); }

/* comparison table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); border: 1px solid var(--line-light); }
.section--dark .table-wrap, .section--deep .table-wrap { border-color: var(--line-dark); }
table.data { width: 100%; border-collapse: collapse; min-width: 520px; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--line-light); vertical-align: top; }
table.data thead th { background: var(--surface-2); font-family: var(--font-head); font-weight: 600; color: var(--ink-900); }
table.data tbody tr:last-child td { border-bottom: 0; }
.section--dark table.data th, .section--dark table.data td { border-bottom-color: rgba(255, 255, 255, .1); color: var(--on-dark-mut); }
.section--dark table.data thead th { background: var(--navy-800); color: var(--on-dark); }

/* pull quote / note */
.note {
  border-inline-start: 4px solid var(--gold-500);
  background: var(--surface-2);
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-md);
}
.section--dark .note, .section--deep .note { background: var(--navy-800); }

/* content flow — keep prose, lists and callouts from colliding */
ul + p, ol + p, p + ul, p + ol,
.note + p, p + .note, .checks + p, .table-wrap + p, p + .table-wrap { margin-top: var(--s-4); }

/* checklist */
.checks { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-block: var(--s-4); }
.checks li { margin: 0; display: flex; gap: var(--s-3); align-items: flex-start; }
.checks li::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px;
  border-radius: var(--r-pill); background: var(--gold-500);
  -webkit-mask: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.7 2.9 8.4l1.1-1.1 2.2 2.2 5.8-5.8 1.1 1.1z'/%3E%3C/svg%3E"),
        linear-gradient(#000, #000);
  mask: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.7 2.9 8.4l1.1-1.1 2.2 2.2 5.8-5.8 1.1 1.1z'/%3E%3C/svg%3E"),
        linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ============================ reviews =================================== */
.reviews { display: grid; gap: clamp(16px, 2.4vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.review {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--navy-800); border: 1px solid var(--line-dark); border-radius: var(--r-md);
}
.review__mark { width: 30px; height: 24px; fill: var(--gold-500); opacity: .75; }
.review p { font-size: var(--fs-sm); color: var(--on-dark-mut); line-height: 1.8; }
.review__src { font-size: var(--fs-xs); color: rgba(255, 255, 255, .5); margin-top: auto; }

/* ============================ FAQ ======================================= */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  background: var(--surface); border: 1px solid var(--line-light); border-radius: var(--r-md);
  padding: clamp(14px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
}
.section--dark .faq details, .section--deep .faq details { background: var(--navy-800); border-color: var(--line-dark); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  list-style: none; cursor: pointer; min-height: var(--tap);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 5px;
  background: currentColor; color: var(--gold-600);
  -webkit-mask: no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 13.2-5.3-5.3 1.1-1.1L10 11l4.2-4.2 1.1 1.1z'/%3E%3C/svg%3E");
  mask: no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 13.2-5.3-5.3 1.1-1.1L10 11l4.2-4.2 1.1 1.1z'/%3E%3C/svg%3E");
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.section--dark .faq summary::after { color: var(--gold-500); }
.faq__body { padding-top: var(--s-3); font-size: var(--fs-sm); }
.faq__body p { color: var(--ink-500); }
.section--dark .faq__body p, .section--deep .faq__body p { color: var(--on-dark-mut); }

/* ============================ CTA band ================================== */
.cta-band {
  background: var(--navy-800);
  border: 1px solid var(--gold-500); border-radius: var(--r-lg);
  padding: clamp(24px, 3.6vw, 46px);
  display: grid; gap: clamp(20px, 3vw, 36px); align-items: center;
  color: var(--on-dark-mut);
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.25fr .75fr; } }
.cta-band h2 { color: var(--on-dark); font-size: var(--fs-h3); }
.cta-band p { font-size: var(--fs-sm); margin-top: var(--s-2); }
.cta-band .btn-row { justify-content: flex-start; }
@media (min-width: 900px) { .cta-band .btn-row { justify-content: flex-end; } }

/* ============================ footer ==================================== */
.site-footer { background: var(--navy-950); color: var(--on-dark-mut); padding-block: clamp(40px, 5vw, 72px) var(--s-6); }
.site-footer h2, .site-footer h3 { color: var(--on-dark); }
.footer__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.footer__brand .brand { margin-bottom: var(--s-4); }
.footer__blurb { font-size: var(--fs-sm); max-width: 42ch; }
.footer__title { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .05em; color: var(--gold-500); margin-bottom: var(--s-4); }
.footer__list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.footer__list li { margin-bottom: 10px; }
.footer__list a { color: var(--on-dark-mut); text-decoration: none; }
.footer__list a:hover { color: var(--gold-400); text-decoration: underline; }
.footer__contact { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); display: grid; gap: var(--s-3); }
.footer__contact li { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; }
.footer__contact svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 4px; stroke: var(--gold-500); fill: none; stroke-width: 1.6; }
.footer__contact a { color: var(--on-dark); text-decoration: none; }
.footer__contact a:hover { color: var(--gold-400); }
.footer__areas { font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); line-height: 1.9; }
.footer__bottom {
  margin-top: clamp(28px, 4vw, 48px); padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .55);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
.footer__legal a, .footer__legal button {
  display: inline-flex; align-items: center;
  color: rgba(255, 255, 255, .62); text-decoration: none; font-size: var(--fs-xs);
  background: none; border: 0; padding: 6px 0; cursor: pointer; font-family: var(--font-body);
  min-height: var(--tap);
}
.footer__legal a:hover, .footer__legal button:hover { color: var(--gold-400); text-decoration: underline; }

/* ============================ sticky chat button ======================== */
.chat {
  position: fixed; inset-inline-end: clamp(12px, 2.4vw, 24px); bottom: clamp(12px, 2.4vw, 24px);
  z-index: var(--z-chat);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
}
.chat__channels { display: none; flex-direction: column; align-items: flex-end; gap: var(--s-3); }
.chat[data-open="true"] .chat__channels { display: flex; }
.chat__item {
  display: inline-flex; align-items: center; gap: 10px;
  max-width: min(78vw, 330px);
  padding: 8px 10px 8px 16px;
  background: var(--surface); color: var(--ink-900);
  border: 1px solid var(--line-light); border-radius: var(--r-pill);
  box-shadow: var(--shadow-md); text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); line-height: 1.4;
  min-height: var(--tap);
}
.chat__item:hover { color: var(--ink-900); border-color: var(--gold-500); }
.chat__item img, .chat__item .chat__ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-pill);
}
.chat__item .chat__ico { display: grid; place-items: center; background: var(--navy-900); }
.chat__item .chat__ico svg { width: 18px; height: 18px; stroke: var(--gold-500); fill: none; stroke-width: 1.8; }
.chat__item img { border-radius: 9px; }

.chat__main { display: flex; align-items: center; gap: 10px; }
.chat__blob {
  display: inline-flex; align-items: center;
  max-width: min(62vw, 250px);
  padding: 10px 16px; min-height: var(--tap);
  background: var(--surface); color: var(--ink-900);
  border: 1px solid var(--line-light); border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); line-height: 1.4;
  cursor: pointer; text-align: start;
}
.chat__blob:hover { border-color: var(--gold-500); }
.chat__toggle {
  width: 58px; height: 58px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--gold-500); color: var(--navy-900);
  border: 0; border-radius: var(--r-pill);
  box-shadow: var(--shadow-gold); cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.chat__toggle:hover { background: var(--gold-400); transform: scale(1.05); }
.chat__toggle svg { width: 28px; height: 28px; fill: currentColor; }
.chat__toggle .chat__x { display: none; }
.chat[data-open="true"] .chat__toggle .chat__bubble { display: none; }
.chat[data-open="true"] .chat__toggle .chat__x { display: block; }
.chat[data-open="true"] .chat__blob { display: none; }

/* ============================ LINE popup ================================ */
/* NO line.me / line:// link may ever appear inside this modal — the deep link
   is a dead end on tablet/desktop, which is the whole reason it exists. */
.line-popup {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center;
  padding: var(--gutter);
  background: rgba(1, 20, 43, .72);
}
.line-popup[data-open="true"] { display: flex; }
.line-popup__dialog {
  position: relative;
  width: min(100%, 480px); max-height: min(88vh, 720px); overflow-y: auto;
  background: var(--surface); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 30px 70px rgba(1, 20, 43, .5);
  text-align: center;
}
.popup__close {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-light);
  border-radius: var(--r-pill); cursor: pointer; color: var(--ink-700);
}
.popup__close svg { width: 18px; height: 18px; fill: currentColor; }
.line-popup h2 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.line-popup__intro { font-size: var(--fs-sm); color: var(--ink-500); }
.line-popup__qr {
  width: min(230px, 62vw); height: auto; margin: var(--s-5) auto var(--s-4);
  border: 1px solid var(--line-light); border-radius: var(--r-md); padding: 10px; background: #fff;
}
.copyrow {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: stretch;
  background: var(--surface-2); border: 1px solid var(--line-light);
  border-radius: var(--r-md); padding: var(--s-3); margin-bottom: var(--s-3); text-align: start;
}
.copyrow__label { flex: 1 1 140px; min-width: 0; }
.copyrow__label b { display: block; font-family: var(--font-head); font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }
.copyrow__value { font-size: var(--fs-sm); color: var(--ink-900); overflow-wrap: anywhere; }
.copyrow .btn { flex: 0 0 auto; }
.line-popup__steps { text-align: start; font-size: var(--fs-sm); color: var(--ink-500); margin-top: var(--s-4); padding-inline-start: 1.2em; }

/* ============================ cookie consent ============================ */
/* Blocking layer + bottom bar ≈ 1/3 of the viewport. Accept and decline are
   equally weighted and one click each. No dismiss control anywhere. */
#cookie-consent {
  position: fixed; inset: 0; z-index: var(--z-consent);
  display: none; align-items: flex-end;
  background: rgba(1, 20, 43, .38);      /* light dim — the page stays readable */
}
html.needs-consent #cookie-consent { display: flex; }
html.needs-consent, html.needs-consent body { overflow: hidden; }

.consent-bar {
  width: 100%; min-height: 33vh; max-height: 55vh; overflow-y: auto;
  background: var(--surface);
  border-top: 4px solid var(--gold-500);
  padding: clamp(20px, 4vw, 34px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.consent-bar > * { width: 100%; max-width: 720px; margin-inline: auto; }
.consent-bar h2 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.consent-bar p { font-size: var(--fs-sm); color: var(--ink-500); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.consent-actions button {
  flex: 1 1 200px; min-height: 48px; max-width: 100%;
  padding: 13px 20px; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); line-height: 1.35;
  cursor: pointer; border: 2px solid var(--navy-900);
}
.consent-actions [data-consent="decline"] { background: var(--surface); color: var(--navy-900); }
.consent-actions [data-consent="decline"]:hover { background: var(--surface-3); }
.consent-actions [data-consent="accept"] { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }
.consent-actions [data-consent="accept"]:hover { background: var(--gold-400); border-color: var(--gold-400); }

/* ============================ misc page furniture ======================= */
.breadcrumb { font-size: var(--fs-xs); color: var(--ink-500); padding-block: var(--s-3) 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; gap: 6px; align-items: center; min-height: var(--tap); }
/* breadcrumb links are navigation, not inline prose — they need a real tap area */
.breadcrumb a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding-inline: 4px;
}
.breadcrumb li + li::before { content: "›"; color: var(--ink-500); }
.section--dark .breadcrumb, .hero .breadcrumb { color: var(--on-dark-mut); }
.hero .breadcrumb a { color: var(--gold-400); }

.prose h2 { margin-top: clamp(32px, 4vw, 52px); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-6); margin-bottom: var(--s-3); }
.prose > p, .prose > ul, .prose > ol { margin-top: var(--s-4); }
.prose ul, .prose ol { color: var(--ink-700); }

.legal { padding-block: var(--section-y); }
.legal h2 { margin-top: var(--s-8); }
.legal h3 { margin-top: var(--s-6); }
.legal p, .legal li { color: var(--ink-700); }

/* 404 */
.err { text-align: center; padding-block: clamp(44px, 7vw, 96px); }
.err h1 { margin-bottom: var(--s-4); }
.err .btn-row { justify-content: center; margin-top: var(--s-6); }
.popular { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); text-align: start; }
.popular a {
  display: block; padding: 14px 18px; min-height: var(--tap);
  background: var(--surface); border: 1px solid var(--line-light); border-radius: var(--r-md);
  color: var(--ink-900); text-decoration: none; font-family: var(--font-head);
  font-weight: 500; font-size: var(--fs-sm);
}
.popular a:hover { border-color: var(--gold-500); color: var(--gold-700); }

/* ============================ motion preferences ======================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .chat__toggle:hover { transform: none; }
}

/* ============================ fine breakpoints ========================== */
/* The header CTA label shortens below 640px so the header bar never overflows
   at 360px (brand + LINE button + hamburger must all fit inside the gutters). */
.lbl-short { display: none; }
@media (max-width: 639px) {
  .lbl-full  { display: none; }
  .lbl-short { display: inline; }
}

@media (max-width: 479px) {
  .brand__sub { display: none; }
  .brand .logo-mark { width: 30px; }
  .brand__name { font-size: .86rem; }
  .site-header__bar { gap: var(--s-3); }
  .header__cta { gap: var(--s-2); }
  .header__cta .btn { padding-inline: 13px; gap: 8px; }
}
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .brand__name { font-size: .8rem; }
  .btn { padding-inline: 15px; }
  .chat__blob { max-width: 56vw; }
}
@media (min-width: 480px) {
  .strip__inner { grid-template-columns: repeat(auto-fit, minmax(min(33.333% - 1px, 140px), 1fr)); }
}
@media (min-width: 1280px) { :root { --maxw: 1240px; } }
@media (min-width: 1920px) { :root { --maxw: 1320px; } }

@media print {
  .site-header, .chat, .line-popup, #cookie-consent, .mobile-menu { display: none !important; }
}