/* CliniBook marketing site. Core brand tokens fixed; practice tokens swap with html[data-practice]. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #1f6fa5; }
@property --tint { syntax: "<color>"; inherits: true; initial-value: #e8f3fa; }
@property --on-accent { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --accent-light { syntax: "<color>"; inherits: true; initial-value: #a6d6ef; }
html.never { transition: --accent .8s cubic-bezier(.45,0,.2,1), --tint .8s cubic-bezier(.45,0,.2,1), --on-accent .8s cubic-bezier(.45,0,.2,1), --accent-light .8s cubic-bezier(.45,0,.2,1); }
:root {
  --navy: #14246b;
  --blue: #1f6fa5;
  --grey: #5b6678;
  --sky: #a6d6ef;
  --ink: var(--navy);
  --ground: #eef1f5;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r: clamp(1.25rem, 2.4vw, 1.75rem);
  --gut: clamp(1rem, 3vw, 2.5rem);
  --max: 84rem;

  --accent: #1f6fa5;
  --tint: #e8f3fa;
  --on-accent: #ffffff;
  --accent-light: #a6d6ef;
}
html[data-practice="dentist"]    { --accent: #4fb0ad; --tint: #e2f3f2; --on-accent: #14246b; --accent-light: #8fd8d4; }
html[data-practice="baby"]       { --accent: #ee8fa7; --tint: #fbeef2; --on-accent: #14246b; --accent-light: #f6b4c6; }
html[data-practice="yours"]      { --accent: #f1bd5c; --tint: #fcf4e0; --on-accent: #14246b; --accent-light: #f8dba0; }
html[data-practice="aesthetics"] { --accent: #c9a0e0; --tint: #f7eefb; --on-accent: #14246b; --accent-light: #e3cef1; }
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem; line-height: 1.55; color: var(--ink);
  background: var(--ground);
  font-variant-numeric: tabular-nums;
  caret-color: var(--blue);
  scrollbar-color: var(--blue) var(--ground);
}
::selection { background: var(--navy); color: #fff; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p, li { margin: 0; text-wrap: pretty; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 8px; }
.book :focus-visible, .foot :focus-visible, .types :focus-visible { outline-color: #fff; }

.skip { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .75rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

.page { max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: var(--gut); display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
main { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: 3rem; padding: 0 1.5rem; border-radius: 999px;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
a.btn:not([href]) { cursor: default; opacity: .72; pointer-events: none; }
@media (hover: hover) {
  .btn-dark:hover { background: var(--blue); }
  .btn-light:hover { background: var(--sky); }
  .btn-outline:hover { background: #fff; color: var(--navy); }
}

/* One-line text: a single line wherever there is room; wraps (balanced) on small screens */
@media (min-width: 56rem) { .one { white-space: nowrap; text-wrap: nowrap; } }

/* Nav */
.nav { display: flex; align-items: center; gap: 1.5rem; background: #fff; border-radius: 999px; padding: .5rem .625rem .5rem 1.25rem; }
.logo { display: block; line-height: 0; flex: none; }
.logo svg { width: clamp(9.5rem, 16vw, 11.5rem); height: auto; }
.logo-word { font-family: "DM Sans", system-ui, sans-serif; }
.nav-links { display: none; gap: 2rem; margin-inline: auto; font-weight: 500; font-size: .9375rem; }
.nav-links a { text-decoration: none; padding: .5rem 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
@media (hover: hover) { .nav-links a:hover { background-size: 100% 2px; } }
.nav .btn { margin-left: auto; min-height: 2.75rem; }
@media (min-width: 52rem) { .nav-links { display: flex; } .nav .btn { margin-left: 0; } }

/* Hero */
.hero {
  background: var(--accent); color: var(--on-accent); border-radius: var(--r);
  padding: clamp(2.5rem, 6vw, 5rem) var(--gut) 0; overflow: hidden; text-align: center;
}
.hero-text { display: grid; justify-items: center; gap: 1.25rem; }
.hero h1 { font-size: clamp(2.25rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; }
@media (min-width: 40rem) { .hero h1 { white-space: nowrap; text-wrap: nowrap; } }
.hero-sub { font-size: clamp(1.0625rem, 1.9vw, 1.375rem); }
.switch { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .5rem; }
.pill {
  font-family: inherit; font-weight: 700; font-size: .9375rem; line-height: 1.2; color: var(--navy);
  min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.92); border: 2px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.pill:active { transform: scale(0.96); }
.pill[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (hover: hover) { .pill:hover:not([aria-pressed="true"]) { background: #fff; transform: translateY(-2px); } }
.benefits { display: grid; grid-template-columns: 1fr; gap: .75rem; width: 100%; max-width: 62rem; margin-top: .5rem; text-align: left; }
@media (min-width: 40rem) { .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 62rem) { .benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.benefits li { background: #fff; color: var(--navy); border-radius: calc(var(--r) - .25rem); padding: clamp(1.125rem, 2vw, 1.75rem); display: grid; gap: .625rem; align-content: start; box-shadow: 0 22px 40px -26px rgba(20,36,107,.55); }
.benefits .b-title { margin: 0; font-size: clamp(1.0625rem, 1.45vw, 1.25rem) !important; text-wrap: pretty; font-size: clamp(1.1875rem, 1.7vw, 1.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: flex-start; gap: .75rem; }
.benefits .b-text { color: var(--grey); font-size: 1rem; line-height: 1.45; }
.tick { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; margin-top: .0625rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

.hero-stage { position: relative; margin: clamp(2rem, 4vw, 3.25rem) auto 0; max-width: 62rem; }
.hero-stage .window { border-radius: 1rem 1rem 0 0; }
.hero-window .shot { aspect-ratio: 4 / 3; }
@media (min-width: 36.01rem) { .hero-window .shot { aspect-ratio: 8 / 5; } }
.hero-window .shot {  object-fit: cover; object-position: top left; }
.hero-window { max-height: 30rem; }

.chip {
  position: absolute; display: none; align-items: center; gap: .5rem; white-space: nowrap; margin: 0;
  background: #fff; color: var(--navy); font-size: .9375rem; font-weight: 700;
  padding: .625rem 1rem; border-radius: 999px;
  box-shadow: 0 18px 36px -14px rgba(20,36,107,.45), 0 4px 10px -4px rgba(20,36,107,.2);
}
.chip svg { color: var(--blue); flex: none; }
@media (min-width: 62rem) {
  .chip { display: inline-flex; }
  .chip-a { left: -3.5rem; top: 22%; }
  .chip-b { right: -3.5rem; top: 40%; }
  .chip-c { left: -1.5rem; bottom: 18%; }
}

/* App window */
.window { margin: 0; position: relative; background: #fff; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 40px 70px -30px rgba(20,36,107,.5), 0 10px 22px -10px rgba(20,36,107,.25); }
.window-bar { display: flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .5rem 1rem; background: var(--navy); color: #fff; font-size: .8125rem; }
.window-bar i { width: .625rem; height: .625rem; border-radius: 50%; background: rgba(255,255,255,.35); }
.window-bar span { margin-left: .75rem; opacity: .85; }
.shot { width: 100%; height: auto; background: var(--tint); transition: opacity .3s ease; }
.demo-tag { position: absolute; right: .75rem; top: 0; height: 2.25rem; display: flex; align-items: center; color: var(--sky); font-size: .75rem; font-weight: 700; }

/* Section heads */
h2 { font-size: clamp(1.625rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; }
.lead { font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.5; color: var(--grey); }
.intro, .also, .types { text-align: center; display: grid; justify-items: center; gap: 1rem; padding: clamp(2.5rem, 6vw, 5rem) var(--gut); }
.intro { background: #fff; border-radius: var(--r); }
.intro .btn { margin-top: .75rem; }

/* Trio */
.trio { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.duo { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
.card { border-radius: var(--r); padding: clamp(1.75rem, 4vw, 3.5rem); display: grid; gap: 2rem; align-content: start; overflow: hidden; background: #fff; }
.card h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.12; letter-spacing: -0.02em; }
.card .lead { margin-top: .75rem; }
.ticks { margin-top: 1.25rem; display: grid; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.75rem; font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='%2314246b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.card .window { box-shadow: 0 24px 40px -22px rgba(20,36,107,.4); }
.duo .window { display: flex; flex-direction: column; }
.duo .shot { flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top left; }
.card-appt .shot { flex-basis: 0; height: 0; min-height: 15rem; }
@media (max-width: 55.99rem) { .card-appt .shot { height: auto; flex-basis: auto; aspect-ratio: 16 / 10; } }
.card-appt { background: var(--accent-light); }
.card-appt .lead { color: var(--navy); opacity: .85; }
.card-appt .ticks li::before { background-color: var(--navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.card-stock { background: var(--accent); color: var(--on-accent); }
.card-stock .lead { color: inherit; opacity: .92; }
.card-stock .ticks li::before { background-color: #fff; }
@media (min-width: 56rem) {
  .duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; }
  .duo .card { grid-row: span 2; grid-template-rows: subgrid; row-gap: 2rem; align-content: stretch; }
  .card-stock { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
}

/* Everything else */
/* Types */
.types { background: var(--navy); color: #fff; border-radius: var(--r); }
.types .lead { color: var(--sky); }
.type-list { display: grid; gap: 1rem; grid-template-columns: 1fr; width: 100%; margin-top: clamp(1rem, 3vw, 2rem); text-align: left; }
@media (min-width: 40rem) { .type-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .type-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.type-list li { background: #f6f7f9; color: var(--navy); border-radius: calc(var(--r) - .25rem); padding: 1.5rem; display: grid; gap: .625rem; align-content: start; }
.type-list h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.25; display: flex; align-items: flex-start; gap: .75rem; }
.type-list p { color: var(--grey); font-size: 1.0625rem; }
.dot { width: 1rem; height: 1rem; flex: none; margin-top: .125rem; border-radius: 50%; background: var(--accent); display: block; }

/* Try (shown once the demo is live) */
.try { background: #fff; border-radius: var(--r); text-align: center; display: grid; justify-items: center; gap: 1rem; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gut); }

/* Book */
.book { background: var(--accent); color: var(--on-accent); border-radius: var(--r); padding: clamp(2.5rem, 6vw, 5rem) var(--gut) 0; text-align: center; display: grid; justify-items: center; gap: clamp(2rem, 4vw, 3rem); overflow: hidden; }
.book-text { display: grid; gap: 1.25rem; justify-items: center; }
.book h2 { font-size: clamp(1.875rem, 4.6vw, 4rem); }
.book .lead { color: inherit; opacity: .92; }
.book-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .5rem; }
.book .btn-outline { color: var(--on-accent); border-color: currentColor; }
@media (hover: hover) { .book .btn-outline:hover { background: var(--on-accent); color: var(--accent); } }
.book-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2rem; font-weight: 500; }
.book-facts span { opacity: .75; font-weight: 400; margin-right: .35rem; }
.book-window { width: 100%; max-width: 56rem; border-radius: 1rem 1rem 0 0; }
.book-window .shot { aspect-ratio: 8 / 4; object-fit: cover; object-position: top left; }

/* Footer */
.foot { background: #fff; border-radius: var(--r); padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1.25rem; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-weight: 500; font-size: .9375rem; }
.foot-links a { text-decoration: none; }
@media (hover: hover) { .foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.foot-note { color: var(--grey); font-size: .9375rem; border-top: 1px solid rgba(20,36,107,.12); padding-top: 1.25rem; }

/* Motion */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js-reveal .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Practice switch inside the dark features section */
.switch-dark .pill { background: rgba(255,255,255,.12); color: #fff; }
.switch-dark .pill[aria-pressed="true"] { background: #fff; color: var(--navy); }
@media (hover: hover) { .switch-dark .pill:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.24); } }
.types .switch { margin-top: .5rem; }


/* The filling transition: each coloured section is filled with the new colour from the bottom up, behind its content */
@property --wipe { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
html.filling :is(.hero, .card-appt, .card-stock, .book) { position: relative; isolation: isolate; }
html.filling :is(.hero, .card-appt, .card-stock, .book)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--fill, transparent); clip-path: inset(var(--wipe) 0 0 0);
}
html.filling .hero, html.filling .card-stock, html.filling .book { transition: color .5s ease; }
html.swapping .shot { opacity: 0; }
.ico, .dot, .ticks li::before { transition: background-color .7s ease, color .7s ease; }

/* Everything else: a bento of small, real-feeling panels */
.also { text-align: center; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2.5rem, 6vw, 5rem) 0 0; }
.also-head { display: grid; justify-items: center; gap: 1rem; padding-inline: var(--gut); }
.bento { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); text-align: left; }
.b { background: #fff; border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1.5rem; align-content: space-between; overflow: hidden; }
.b h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.12; letter-spacing: -0.02em; }
.b-text p { color: var(--grey); margin-top: .625rem; max-width: 36rem; }
.b-mail { background: var(--accent-light); }
.b-mail .b-text p { color: var(--navy); opacity: .85; }
@media (min-width: 56rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .b-mail { grid-column: span 7; }
  .b-routines { grid-column: span 5; }
  .b-kits, .b-time, .b-staff { grid-column: span 4; }
  .b-sec { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
}
.b ul { display: grid; gap: .625rem; }
.mails li { display: flex; gap: .875rem; align-items: center; background: #fff; border-radius: 1rem; padding: .875rem 1.125rem; box-shadow: 0 14px 26px -18px rgba(20,36,107,.5); }
.mails li:nth-child(2) { margin-left: clamp(0rem, 3vw, 2rem); }
.mails li:nth-child(3) { margin-left: clamp(0rem, 6vw, 4rem); }
.m-ico { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.mails strong { display: block; font-weight: 700; }
.mails em { display: block; font-style: normal; color: var(--grey); font-size: .9375rem; }
.jobs li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .875rem 0; border-top: 1px solid rgba(20,36,107,.12); font-weight: 500; }
.jobs li:first-child { border-top: 0; }
.jobs i { width: 2.75rem; height: 1.5rem; border-radius: 999px; background: var(--navy); position: relative; flex: none; }
.jobs i::after { content: ""; position: absolute; right: .1875rem; top: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; }
.kit { background: var(--ground); border-radius: 1rem; padding: 1rem; display: grid; gap: .75rem; }
.kit-btn { justify-self: start; background: var(--navy); color: #fff; font-weight: 700; font-size: .9375rem; padding: .375rem .875rem; border-radius: 999px; }
.kit ul { gap: .375rem; }
.kit li { background: #fff; border-radius: .625rem; padding: .5rem .75rem; font-size: .9375rem; font-weight: 500; }
.week li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: .75rem; font-size: .9375rem; }
.week b { font-weight: 500; }
.week .bar { height: 1.5rem; border-radius: .5rem; background: var(--accent-light); }
.week .bar.short { width: 55%; }
.week .closed { color: var(--grey); }
.roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.roles li { background: var(--ground); border-radius: 999px; padding: .5rem 1rem; font-weight: 700; text-align: center; font-size: .9375rem; }
.b-sec { background: var(--accent-light); }
.b-sec .b-text p { color: var(--navy); opacity: .85; }
.shield { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shield li { background: #fff; border-radius: 1rem; padding: 1rem 1.125rem; font-weight: 700; display: flex; gap: .75rem; align-items: center; }
.shield li::before { content: ""; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }