/* Dentacio Dental mockup. World: an open pretend-play dentist kit.
   Rule of shapes: interactive keys and tokens are pills, inputs 16px,
   small pieces 20-26px, trays and panels 32px. */

@font-face { font-family: "Bagel Fat One"; src: url("../fonts/bagel-fat-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("../fonts/m-plus-rounded-1c-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("../fonts/m-plus-rounded-1c-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("../fonts/m-plus-rounded-1c-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("../fonts/m-plus-rounded-1c-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light dark;

  /* plastic, constant in both themes */
  --green: #385245;
  --green-lip: #1f2f27;
  --green-deep: #2a3e34;
  --green-lid: #4a6a58;
  --green-ink: #1d2b24;
  --cav: #24362d;
  --yellow: #f2bb3a;
  --yellow-lip: #b98317;
  --yellow-ink: #4a3a0e;
  --pink: #ff9fb2;
  --pink-lip: #d9677f;
  --mint: #b8ead2;
  --mint-lip: #7fbf9f;
  --plastic-white: #fdfefd;
  --white-lip: #c4d3ca;
  --free: #c8344d;

  /* theme */
  --bg: #eef7f1;
  --surface: #fdfefd;
  --surface-2: #e2efe7;
  --text: #1d2b24;
  --text-2: #4a5d53;
  --head: #385245;
  --link: #385245;
  --line: rgba(56, 82, 69, .16);
  --ring: rgba(56, 82, 69, .24);
  --shadow: rgba(29, 52, 40, .38);
  --focus: #2a3e34;
  --err: #b42840;
  --slot-a: #dcefe3;
  --slot-b: #e8f4ed;
  --slot-ink: #385245;
  --slot-alt-a: #fde3ea;
  --slot-alt-b: #fff1f4;
  --slot-alt-ink: #8a3347;
  --placeholder: #5a6c62;
  --handle: var(--green-deep);
  --case-shadow: rgba(110, 74, 0, .55);

  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 32px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 9vw, 128px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font-display: "Bagel Fat One", "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --font-text: "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131e18;
    --surface: #1c2a23;
    --surface-2: #15211b;
    --text: #e9f2ed;
    --text-2: #a9bdb2;
    --head: #f4f9f6;
    --link: #f2bb3a;
    --line: rgba(233, 242, 237, .12);
    --ring: rgba(233, 242, 237, .2);
    --shadow: rgba(0, 0, 0, .55);
    --focus: #f2bb3a;
    --err: #ff9aac;
    --slot-a: #1f2f27;
    --slot-b: #233529;
    --slot-ink: #cfe3d8;
    --slot-alt-a: #3a2229;
    --slot-alt-b: #42272f;
    --slot-alt-ink: #ffc2ce;
    --placeholder: #93a89c;
    --handle: #4f6f5d;
    --case-shadow: rgba(0, 0, 0, .6);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scrollbar-color: var(--green) var(--surface-2);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 1.0625rem/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--yellow); color: var(--green-ink); }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: .22em; text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h3 { margin: 0; }
p { margin: 0; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.ico--lg { width: 2.1rem; height: 2.1rem; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: .7em 1.2em; border-radius: 999px;
  background: var(--yellow); color: var(--green-ink); font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.15rem + 4.1vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--head);
  text-wrap: balance;
}
.display--h2 {
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.4rem);
  line-height: 1.06;
  max-width: 20ch;
}

/* ---------- keys: plastic buttons with a molded lip ---------- */
.key {
  --face: var(--plastic-white);
  --lip: var(--white-lip);
  --ink: var(--green-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .8em 1.5em;
  border: 0; border-radius: 999px;
  font: 800 1rem/1.1 var(--font-text);
  color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 62%), var(--face);
  box-shadow: 0 5px 0 var(--lip), 0 12px 18px -8px var(--shadow);
  transition: transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
}
.key:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--lip), 0 16px 22px -10px var(--shadow); }
.key:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--lip), 0 4px 8px -4px var(--shadow); }
.key--yellow { --face: var(--yellow); --lip: var(--yellow-lip); }
.key--green { --face: var(--green); --lip: var(--green-lip); --ink: #fff; }
.key--sm { min-height: 42px; padding: .55em 1.15em; font-size: .9375rem; box-shadow: 0 4px 0 var(--lip), 0 10px 14px -8px var(--shadow); }
.key--wide { width: 100%; }
.key .ico { width: 1.3em; height: 1.3em; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); transition: box-shadow .25s var(--ease-out); }
.nav.is-stuck { box-shadow: 0 1px 0 var(--line), 0 12px 26px -20px var(--shadow); }
.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }
.nav__bar { display: flex; align-items: center; gap: 18px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.0625rem; }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.nav__links { display: flex; gap: 2px; margin-left: auto; }
.nav__links a { padding: .45em .85em; border-radius: 999px; color: var(--text); text-decoration: none; font-weight: 700; font-size: .9375rem; }
.nav__links a:hover { background: var(--surface-2); }
.nav__menu {
  display: none; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text); cursor: pointer;
}
.nav__menu .ico { width: 24px; height: 24px; }
.menu { display: grid; padding: 4px var(--gutter) 14px; border-top: 1px solid var(--line); background: var(--bg); }
.menu a { padding: 14px 2px; color: var(--text); font-weight: 700; text-decoration: none; }
.menu a + a { border-top: 1px solid var(--line); }

.status { display: flex; align-items: center; gap: .55em; font-size: .875rem; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.status--pill { display: inline-flex; margin-bottom: 20px; padding: .45em .95em; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); color: var(--text); }
.status--inline { display: flex; margin-top: 4px; font-size: .875rem; }
.status__lamp { width: 10px; height: 10px; border-radius: 50%; background: #9aa9a1; flex: none; }
.status.is-open .status__lamp { background: #34a86f; box-shadow: 0 0 0 4px rgba(52, 168, 111, .2); }
.status.is-closed .status__lamp { background: #e26a7e; box-shadow: 0 0 0 4px rgba(226, 106, 126, .2); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(20px, 3vw, 44px) clamp(56px, 7vw, 104px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hero__copy { max-width: 560px; }
.hero__sub { margin: 22px 0 34px; max-width: 40ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--text-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* the kit */
.kit { --focus: var(--yellow); position: relative; width: 100%; max-width: 580px; justify-self: end; padding-top: 22px; perspective: 1600px; }
.kit__handle {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 32%; height: 40px;
  border: 11px solid var(--handle); border-bottom: 0; border-radius: 26px 26px 0 0;
}
.kit__lid {
  position: relative;
  padding: 16px 18px 18px;
  border-radius: 34px 34px 12px 12px;
  background: var(--green-lid) radial-gradient(120% 100% at 18% 0%, #5f826d 0%, var(--green-lid) 46%, #3f5c4c 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .14), inset 0 -6px 0 rgba(0, 0, 0, .14);
  transform-origin: 50% 100%;
}
.kit__lid-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kit__emblem { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 4px 0 var(--green-deep); }
.kit__progress { display: flex; align-items: center; gap: 10px; color: #e6f2eb; font-size: .8125rem; font-weight: 700; text-align: right; }
.kit__pegs { display: flex; gap: 6px; }
.kit__pegs i { width: 14px; height: 14px; border-radius: 50%; background: var(--green-deep); box-shadow: inset 0 3px 3px rgba(0, 0, 0, .4); transition: background .3s, box-shadow .3s; }
.kit__pegs i.on { background: var(--yellow); box-shadow: inset 0 -3px 0 var(--yellow-lip), 0 2px 6px rgba(0, 0, 0, .3); animation: peg-pop .45s var(--ease-spring); }
.kit__card {
  min-height: 158px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--plastic-white);
  color: var(--green-ink);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 14px 24px -14px rgba(0, 0, 0, .5);
}
.kit__card.is-new { animation: card-pop .45s var(--ease-spring); }
.kit__card-title { margin-bottom: 6px; font-family: var(--font-display); font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); line-height: 1.1; color: var(--green); }
.kit__card-text { margin-bottom: 12px; font-size: .9688rem; line-height: 1.5; color: #33463c; }
.kit__card-feel {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .38em .85em; border-radius: 999px;
  background: #fff1c9; color: #5c4100; font-size: .875rem; font-weight: 700; line-height: 1.35;
}
.kit__card-feel b { font-weight: 800; }
.kit__card-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-weight: 800; color: var(--green); }
.kit__card-done a { color: var(--green); }
.kit__hinge { display: flex; justify-content: space-between; height: 14px; margin: 0 24px; padding: 0 16%; background: linear-gradient(#22342b, #2f463a); }
.kit__hinge i { width: 48px; height: 14px; border-radius: 6px; background: linear-gradient(180deg, #7a9686, #3d5749); }
.kit__tray {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2.5fr);
  gap: clamp(6px, 1.6vw, 16px);
  align-items: end;
  padding: clamp(14px, 2.4vw, 24px) clamp(14px, 2.4vw, 24px) clamp(18px, 2.8vw, 28px);
  border-radius: 12px 12px 34px 34px;
  background: var(--green) radial-gradient(140% 100% at 22% 0%, #46624f 0%, var(--green) 55%, #2f463a 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .08), inset 0 -8px 0 rgba(0, 0, 0, .2), 0 34px 54px -30px var(--shadow);
}
.kit__latches { display: flex; justify-content: space-between; padding: 0 22%; margin-top: -4px; }
.kit__latches i { width: 46px; height: 14px; border-radius: 0 0 10px 10px; background: var(--yellow); box-shadow: inset 0 -3px 0 var(--yellow-lip); }

.tool {
  color: var(--green-ink);
  display: block; margin: 0; padding: 4px 0; border: 0; border-radius: 18px;
  background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tool svg { width: 100%; height: auto; overflow: visible; }
.tool__cav { fill: var(--cav); stroke: var(--cav); stroke-width: 7; stroke-linejoin: round; filter: url(#f-cavity); }
.tool__sh { fill: #0b1510; stroke: #0b1510; stroke-width: 3; opacity: .45; filter: url(#f-soft); transform: translate(2px, 6px); transition: transform .4s var(--ease-out), opacity .4s var(--ease-out); }
.tool__pc { transform-box: fill-box; transform-origin: 50% 65%; transition: transform .5s var(--ease-spring); }
.tool:hover .tool__pc { transform: translateY(-6px); }
.tool[aria-pressed="true"] .tool__pc { transform: translateY(-16px) rotate(-4deg) scale(1.05); }
.tool[aria-pressed="true"] .tool__sh { transform: translate(9px, 22px); opacity: .26; }
.tool__eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.tool--gigi.is-wink .tool__eyes { animation: blink .55s var(--ease-out); }

@keyframes peg-pop { 0% { transform: scale(.4); } 100% { transform: none; } }
@keyframes card-pop { 0% { transform: scale(.96) translateY(4px); } 100% { transform: none; } }
@keyframes blink { 35% { transform: scaleY(.12); } 100% { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .kit__lid { animation: lid-open 1s var(--ease-out) .15s both; }
  .kit__tray .tool { animation: tool-in .7s var(--ease-spring) both; }
  .kit__tray .tool:nth-child(1) { animation-delay: .6s; }
  .kit__tray .tool:nth-child(2) { animation-delay: .68s; }
  .kit__tray .tool:nth-child(3) { animation-delay: .76s; }
  .kit__tray .tool:nth-child(4) { animation-delay: .84s; }
  .kit__tray .tool:nth-child(5) { animation-delay: .92s; }
  .tool--gigi .tool__eyes { animation: blink .55s var(--ease-out) 1.7s; }
}
@keyframes lid-open { from { transform: rotateX(80deg); filter: brightness(.7); } to { transform: none; filter: none; } }
@keyframes tool-in { from { transform: translateY(22px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- offer ---------- */
.offer { padding-block: clamp(24px, 4vw, 48px) var(--section); }
.case {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(16px, 3.6vw, 52px);
  border-radius: var(--r-lg);
  background: var(--yellow) radial-gradient(120% 120% at 12% 0%, #ffd56b 0%, var(--yellow) 48%, #e9ad2c 100%);
  color: var(--green-ink);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 34px 54px -34px var(--case-shadow);
}
.case__stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 28px;
  align-self: stretch;
  padding: 24px clamp(16px, 2.4vw, 28px) 26px;
  border-radius: 26px;
  background: var(--green) radial-gradient(120% 100% at 30% 0%, #46624f 0%, var(--green) 55%, #2f463a 100%);
  box-shadow: inset 0 8px 18px rgba(0, 0, 0, .4), inset 0 -2px 0 rgba(255, 255, 255, .06);
}
.case__plate {
  align-self: stretch;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); line-height: 1.1;
  color: #ffd56b;
}
.brushes { display: flex; align-items: flex-end; gap: clamp(18px, 3.4vw, 40px); }
.brush { position: relative; display: grid; justify-items: center; gap: 12px; margin: 0; }
.brush svg { width: clamp(52px, 6vw, 80px); height: auto; overflow: visible; }
.brush--kid svg { width: clamp(40px, 4.6vw, 62px); }
.brush figcaption { padding: .2em .85em; border-radius: 999px; background: rgba(0, 0, 0, .22); color: #eef6f1; font-size: .875rem; font-weight: 800; white-space: nowrap; }
.brush__tag {
  position: absolute; top: 4px; left: calc(100% - 8px); z-index: 1;
  padding: .3em .75em; border-radius: 999px;
  background: var(--free); color: #fff;
  font-family: var(--font-display); font-size: .95rem; line-height: 1.2;
  rotate: 10deg;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .2), 0 8px 12px -6px rgba(0, 0, 0, .5);
}
.case__copy .display--h2 { color: var(--green-ink); max-width: 16ch; }
.case__lead { margin: 14px 0 22px; max-width: 46ch; color: var(--yellow-ink); font-weight: 600; }
.stack { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.stack li {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0;
  font-weight: 700; line-height: 1.35;
}
.stack .ico { width: 1.45em; height: 1.45em; color: var(--green); }
.stack span { flex: 1 1 auto; min-width: 0; }
.tag {
  margin-left: auto; flex: none;
  padding: .28em .8em; border-radius: 999px;
  background: var(--green); color: #fff;
  font: 400 .875rem/1.2 var(--font-display);
}
.tag--free { background: var(--free); }
.promise {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 4px 0 22px; padding-top: 16px;
  border-top: 2px solid rgba(74, 58, 14, .18);
  color: var(--yellow-ink); line-height: 1.45;
}
.promise .ico { width: 1.6em; height: 1.6em; color: var(--green); }
.promise b { color: var(--green-ink); }
.proposal { display: flex; align-items: flex-start; gap: .5em; margin: -8px 0 20px; font-size: .8125rem; font-weight: 700; color: var(--yellow-ink); }
.proposal .ico { width: 1.15rem; height: 1.15rem; margin-top: .1em; }
.countdown { align-self: stretch; }
.countdown__cells span { flex: 1 1 0; }
.case__stage .countdown__label { color: #e6f2eb; }
.case__stage .countdown__cells span { background: #1a2921; }
.countdown__label { margin-bottom: 8px; font-size: .9375rem; font-weight: 800; color: var(--yellow-ink); }
.countdown__cells { display: flex; flex-wrap: wrap; gap: 8px; }
.countdown__cells span {
  display: grid; justify-items: center;
  min-width: 0; padding: 9px 6px 7px; border-radius: 14px;
  background: var(--green-deep);
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, .4);
}
.countdown__cells b { font: 400 1.75rem/1 var(--font-display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.countdown__cells i { font-style: normal; font-size: .75rem; font-weight: 700; color: #cfe3d8; }
.countdown__over { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); color: #eef6f1; font-weight: 700; }
.promise + .proposal + .case__ctas, .proposal + .case__ctas { margin-top: 4px; }
.case__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.fine { margin-top: 16px; font-size: .8125rem; font-weight: 600; color: var(--yellow-ink); }

.side-offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 20px; padding: 16px 22px;
  border-radius: var(--r-md);
  background: var(--pink); color: #4a1422;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 18px 26px -20px var(--shadow);
}
.side-offer .ico { width: 1.6em; height: 1.6em; color: #8a1f38; }
.side-offer p { flex: 1 1 240px; }
.side-offer a { color: #4a1422; font-weight: 800; }

/* ---------- first visit board ---------- */
.visit { --focus: var(--yellow); padding-block: var(--section); background: var(--green); color: #eef6f1; }
.visit .display--h2 { color: #fdfefd; }
.board {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px);
  margin: clamp(40px, 6vw, 64px) 0 0; padding: 96px clamp(16px, 2.4vw, 28px) clamp(16px, 2.4vw, 28px); list-style: none;
  border-radius: var(--r-lg);
  background: var(--cav);
  box-shadow: inset 0 10px 22px rgba(0, 0, 0, .45), inset 0 -2px 0 rgba(255, 255, 255, .06);
}
.board::before {
  content: ""; position: absolute; z-index: 0;
  top: 54px; left: clamp(16px, 2.4vw, 28px); right: clamp(16px, 2.4vw, 28px); height: 16px; translate: 0 -50%;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--yellow) 0 18px, transparent 18px 30px), #1a2921;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, .5);
}
.board__step {
  --tile: var(--plastic-white);
  position: relative; z-index: 1;
  padding: 78px 20px 24px;
  border-radius: 24px;
  background: var(--tile); color: var(--green-ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 12px 20px -14px rgba(0, 0, 0, .6);
}
.board__step:nth-child(1) { --tile: var(--yellow); }
.board__step:nth-child(3) { --tile: var(--mint); }
.board__step:nth-child(4) { --tile: var(--pink); }
.board__num {
  position: absolute; top: 18px; left: 18px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--font-display); font-size: 1.3rem;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .35);
}
.board__step h3 { margin-bottom: 6px; font: 400 1.4rem/1.15 var(--font-display); color: var(--green-ink); }
.board__step p { font-size: .9688rem; line-height: 1.55; color: #2c3d34; }
.board__pawn { position: absolute; top: 0; left: 0; width: 58px; pointer-events: none; z-index: 2; }
.board__pawn svg { overflow: visible; filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .35)); }

/* ---------- services ---------- */
.services { padding-block: var(--section); }
.services__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.switch {
  position: relative;
  display: inline-grid; grid-template-columns: 1fr 1fr;
  margin-bottom: 20px; padding: 6px; border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 3px 7px rgba(29, 52, 40, .2);
}
.switch__opt {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.35em; border: 0; border-radius: 999px;
  background: none; color: var(--text-2); font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: color .25s;
}
.switch__opt[aria-selected="true"] { color: var(--green-ink); }
.switch__knob {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px);
  border-radius: 999px; background: var(--yellow);
  box-shadow: inset 0 -4px 0 var(--yellow-lip), 0 6px 12px -6px var(--shadow);
  transition: transform .45s var(--ease-spring);
}
.switch[data-active="1"] .switch__knob { transform: translateX(100%); }
.menu-tray { padding: clamp(10px, 1.6vw, 16px); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), 0 24px 44px -32px var(--shadow); }
.rows { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.rows li { padding: 18px 20px; }
.rows h3 { margin-bottom: 4px; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; color: var(--text); }
.rows p { font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.services__side { display: grid; gap: 16px; }
.piece {
  --lip: var(--white-lip);
  padding: 22px; border-radius: 26px; color: var(--green-ink);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 20px 30px -24px var(--shadow);
}
.piece--mint { --lip: var(--mint-lip); background: var(--mint); }
.piece--pink { --lip: var(--pink-lip); background: var(--pink); }
.piece .ico--lg { color: var(--green); }
.piece h3 { margin: 10px 0 6px; font: 400 1.4rem/1.15 var(--font-display); }
.piece p { font-size: .9375rem; line-height: 1.5; color: #24352c; }
.piece .key { margin-top: 16px; }

/* ---------- team & cases ---------- */
.team { padding-block: 0 var(--section); }
.team__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.doctors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.doctor { margin: 0; }
.doctor figcaption { display: grid; gap: 2px; margin-top: 12px; }
.doctor b { font-size: 1.0625rem; font-weight: 800; }
.doctor figcaption a, .doctor figcaption span { font-size: .875rem; font-weight: 700; color: var(--text-2); }
.doctors__note { grid-column: 1 / -1; margin-top: 6px; padding: 14px 18px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); font-size: .9375rem; color: var(--text-2); }

.photo-slot {
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 16px; border-radius: 26px; text-align: center;
  background: var(--slot-a);
  color: var(--slot-ink);
  box-shadow: inset 0 0 0 2px var(--ring), inset 0 8px 16px rgba(29, 52, 40, .12);
}
.photo-slot .ico { width: 2rem; height: 2rem; }
.photo-slot span { font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.photo-slot small { font-size: .8125rem; font-weight: 600; opacity: .85; }
.photo-slot--alt { background: var(--slot-alt-a); color: var(--slot-alt-ink); }
.photo-slot--portrait { aspect-ratio: 4 / 5; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.chip {
  min-height: 44px; padding: 0 1.15em; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: .9375rem; font-weight: 700; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--ring), 0 3px 0 var(--line);
  transition: transform .12s var(--ease-out);
}
.chip:active { transform: translateY(2px); }
.chip[aria-checked="true"] { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-lip); }
.compare {
  --pos: 50%;
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 0 0 6px var(--surface), 0 0 0 8px var(--line), 0 28px 44px -30px var(--shadow);
}
.compare:has(.compare__range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 10px; }
.compare__layer { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.compare__before { place-content: center start; justify-items: start; padding-left: 7%; text-align: left; max-width: none; }
.compare__after { place-content: center end; justify-items: end; padding-right: 7%; text-align: right; clip-path: inset(0 0 0 var(--pos)); }
.compare__before span, .compare__after span { max-width: 15ch; }
.compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; translate: -50% 0; background: var(--plastic-white); pointer-events: none; }
.compare__handle {
  position: absolute; top: 50%; left: var(--pos); z-index: 1; translate: -50% -50%;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--yellow); color: var(--green-ink);
  box-shadow: inset 0 -4px 0 var(--yellow-lip), 0 10px 18px -6px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.compare__handle .ico { width: 26px; height: 26px; }
.compare__label { position: absolute; top: 14px; z-index: 1; padding: .3em .85em; border-radius: 999px; background: rgba(29, 43, 36, .82); color: #fff; font-size: .8125rem; font-weight: 800; pointer-events: none; }
.compare__label--l { left: 14px; }
.compare__label--r { right: 14px; }
.compare__range { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cases__by { margin-top: 16px; font-size: .9375rem; font-weight: 700; color: var(--text-2); }

/* ---------- voices ---------- */
.voices { padding-block: var(--section); background: var(--surface-2); }
.sample-note { display: inline-flex; align-items: center; gap: .5em; margin-top: 16px; padding: .45em .95em; border-radius: 999px; background: var(--surface); font-size: .875rem; font-weight: 700; color: var(--text-2); }
.visit .sample-note { background: rgba(0, 0, 0, .2); color: #dbe9e1; }
.bubbles { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; gap: 20px; align-items: start; margin-top: 40px; }
.bubble {
  --lip: var(--white-lip);
  margin: 0; padding: 24px 24px 20px;
  border-radius: 28px 28px 28px 8px;
  background: var(--plastic-white); color: var(--green-ink);
  box-shadow: 0 20px 30px -24px var(--shadow);
}
.bubble--yellow { --lip: var(--yellow-lip); background: var(--yellow); }
.bubble--mint { --lip: var(--mint-lip); background: var(--mint); margin-top: 18px; }
.bubble--white { margin-top: 52px; border-radius: 28px 28px 8px 28px; }
.bubble blockquote { margin: 0 0 14px; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.bubble figcaption { font-size: .875rem; font-weight: 700; color: #34463c; }
.bubble--yellow figcaption { color: var(--yellow-ink); }
.bubble--mint figcaption { color: #1f4a37; }
.ig-link { display: inline-flex; align-items: center; gap: .5em; margin-top: 36px; color: var(--link); font-weight: 800; }

/* ---------- booking ---------- */
.booking { padding-block: var(--section); }
.booking__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.form { display: grid; gap: 22px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line), 0 26px 46px -32px var(--shadow); }
.field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { padding: 0; font-size: .9375rem; font-weight: 800; color: var(--text); }
.field legend { margin-bottom: 10px; }
.opt { font-weight: 500; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 0; border-radius: var(--r-sm);
  background-color: var(--surface-2); color: var(--text);
  font-size: 1rem; font-weight: 500;
  box-shadow: inset 0 3px 0 rgba(29, 52, 40, .1), inset 0 0 0 2px var(--ring);
  caret-color: var(--focus);
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 23px) 53%, calc(100% - 17px) 53%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field ::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--err); }
.err { font-size: .875rem; font-weight: 700; color: var(--err); }
.err:empty { display: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field input[type="date"] { min-width: 0; -webkit-appearance: none; appearance: none; }
.tokens { display: flex; flex-wrap: wrap; gap: 10px; }
.token { position: relative; }
.token input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.token span {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 48px; padding: 0 1.2em; border-radius: 999px;
  background: var(--surface-2); font-weight: 800;
  box-shadow: inset 0 0 0 2px var(--ring), 0 3px 0 var(--line);
  transition: background .2s, box-shadow .2s;
}
.token input:checked + span { background: var(--yellow); color: var(--green-ink); box-shadow: inset 0 -4px 0 var(--yellow-lip), 0 5px 10px -5px var(--shadow); }
.token input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.form__help { margin-top: -8px; font-size: .875rem; color: var(--text-2); }
.form__done { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--mint); color: var(--green-ink); }
.form__done .ico { width: 1.5em; height: 1.5em; color: var(--green); }
.form__done a { color: var(--green-ink); font-weight: 800; }

.preview { position: sticky; top: 96px; }
.preview__phone { padding: 10px; border-radius: 34px; background: #22342b; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 30px 50px -30px var(--shadow); }
.preview__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 12px; color: #fff; line-height: 1.3; }
.preview__head img { border-radius: 50%; }
.preview__head b { font-size: .9375rem; }
.preview__head small { display: block; font-size: .75rem; color: #b9cdc2; }
.preview__chat { display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding: 18px 14px; border-radius: 26px; background: #dfe9e2; }
.preview__bubble {
  align-self: flex-end; max-width: 94%;
  padding: 12px 14px; border-radius: 16px 16px 4px 16px;
  background: #d9fdd3; color: #111b16;
  font-size: .875rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .14);
}
.preview__cap { margin-top: 12px; text-align: center; font-size: .8125rem; font-weight: 700; color: var(--text-2); }

/* ---------- place ---------- */
.place { padding-block: 0 var(--section); }
.place__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.contact { display: grid; gap: 12px; margin: clamp(24px, 3vw, 36px) 0 28px; padding: 0; list-style: none; }
.contact li { display: flex; align-items: flex-start; gap: 12px; font-weight: 700; }
.contact .ico { margin-top: .2em; color: var(--link); }
.contact a { color: var(--text); }
.map { aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: 0 0 0 10px var(--green), 0 0 0 12px var(--green-deep), 0 34px 54px -32px var(--shadow); }
.map { position: relative; }
.map__fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; font-weight: 700; color: var(--text-2); }
.map__fallback .ico { width: 2rem; height: 2rem; color: var(--link); }
.map iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; }

/* ---------- faq ---------- */
.faq { padding-block: 0 var(--section); }
.faq__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq__list { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
.faq details[open] { box-shadow: inset 0 0 0 2px var(--ring), 0 18px 30px -26px var(--shadow); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 16px 22px;
  font-weight: 800; line-height: 1.4; cursor: pointer; list-style: none;
  border-radius: var(--r-md);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--link); transition: transform .3s var(--ease-out); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding: 0 22px 20px; color: var(--text-2); max-width: 62ch; }

/* ---------- footer ---------- */
.foot { --focus: var(--yellow); padding-block: 60px 28px; border-radius: 40px 40px 0 0; background: var(--green); color: #e5f1ea; }
.foot a { color: #fff; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot__brand { display: flex; align-items: center; gap: 16px; }
.foot__brand img { border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
.foot__h { margin-bottom: 10px; font-family: var(--font-display); font-size: 1.15rem; color: var(--yellow); }
.foot p + p { margin-top: 6px; }
.foot__base { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .875rem; color: #b9cdc2; }

.fab {
  --focus: var(--green-ink);
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--green); color: #fff;
  box-shadow: 0 0 0 4px var(--bg), 0 5px 0 4px var(--green-lip), 0 16px 26px -10px rgba(0, 0, 0, .5);
  transition: transform .14s var(--ease-out);
}
.fab:active { transform: translateY(3px); }
.fab.is-tucked { opacity: 0; visibility: hidden; transform: translateY(24px); }
.fab { transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), visibility .3s; }
.fab .ico { width: 30px; height: 30px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav .status { display: none; }
}
@media (max-width: 920px) {
  .hero__grid, .case, .services__grid, .team__grid, .booking__grid, .place__grid, .faq__wrap { grid-template-columns: minmax(0, 1fr); }
  .kit { justify-self: center; }
  .services__side { grid-template-columns: 1fr 1fr; }
  .preview { position: static; }
  .visit .sample-note { background: rgba(0, 0, 0, .2); color: #dbe9e1; }
.bubbles { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .bubble--white { margin-top: 0; margin-left: 12%; }
  .bubble--mint { margin-top: 0; margin-right: 8%; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__menu { display: inline-grid; }
  .board { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px 20px 20px 76px; }
  .board::before { top: 20px; bottom: 20px; left: 38px; right: auto; width: 16px; height: auto; translate: -50% 0;
    background: repeating-linear-gradient(180deg, var(--yellow) 0 18px, transparent 18px 30px), #1a2921; }
}
@media (max-width: 640px) {
  .board { padding-left: 64px; }
  .board::before { left: 32px; }
  .rows { grid-template-columns: minmax(0, 1fr); }
  .rows li { padding: 14px 16px; }
  .services__side { grid-template-columns: minmax(0, 1fr); }
  .doctors { gap: 12px; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .countdown__cells span { min-width: 0; flex: 1 1 0; }
}
@media (max-width: 480px) {
  .brand__name { display: none; }
  .hero__ctas .key { flex: 1 1 auto; }
  .case__ctas .key { flex: 1 1 auto; }
  .switch { display: grid; width: 100%; }
  .switch__opt { padding: 0 .8em; }
  .kit__progress { font-size: .75rem; }
  .kit__card { padding: 16px; }
  .tokens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .token span { justify-content: center; width: 100%; padding: 0 .4em; font-size: .9375rem; }
  .token .ico { display: none; }
  .compare__layer small { display: none; }
  .compare__before, .compare__after { padding-inline: 5%; }
  .compare__before span, .compare__after span { max-width: 9ch; font-size: .875rem; }
  .preview__chat { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}