/* ===========================================================
   ToothPal — shared craft & motion layer  (pearl.css)
   Loaded AFTER each page's inline <style> so it refines tokens.
   Register: Light Ocean — navy · sage · clay · pearl · gold.
   Motion: calm, ease-out-expo, no bounce. Degrades fully:
   no JS / offline / prefers-reduced-motion all safe.
   =========================================================== */

:root{
  /* OKLCH-tinted neutrals — cooler + cleaner than the flat hex */
  --paper:    oklch(0.992 0.004 230);
  --bone:     oklch(0.968 0.010 232);
  --bone-2:   oklch(0.945 0.017 233);
  --mist:     oklch(0.895 0.028 235);
  --ink:      oklch(0.265 0.035 235);
  --ink-soft: oklch(0.415 0.048 233);
  --forest:   oklch(0.385 0.065 232);
  --sage-deep:oklch(0.520 0.085 232);
  --clay:     oklch(0.760 0.078 228);
  --clay-soft:oklch(0.950 0.023 228);
  --stone:    oklch(0.610 0.035 234);
  --faint:    oklch(0.845 0.020 234);
  --border:   oklch(0.925 0.016 233);
  --gold:     oklch(0.782 0.118 78);
  --gold-soft:oklch(0.885 0.095 82);
  --leaf:     oklch(0.680 0.095 152);

  /* Layered, tinted elevation */
  --sh-sm: 0 1px 2px oklch(0.30 0.05 234 / .05);
  --sh:    0 6px 16px oklch(0.30 0.05 234 / .07), 0 18px 40px oklch(0.30 0.05 234 / .07);
  --sh-lg: 0 10px 30px oklch(0.30 0.05 234 / .11), 0 30px 70px oklch(0.30 0.05 234 / .14);

  /* Easing — exponential ease-outs only */
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
}

::selection{ background: var(--clay-soft); color: var(--forest); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- Reveal on scroll --- */
.reveal{
  opacity: 0;
  transform: translateY(28px) scale(.988);
  transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.in{ opacity: 1; transform: none; }

/* --- Scroll progress bar (injected by pearl.js) --- */
.tp-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--clay), var(--sage-deep));
  transition: width .12s linear;
}

/* --- Nav elevation + animated underlines --- */
header{ transition: box-shadow .35s var(--ease-out-quart), background .35s; }
header.scrolled{ box-shadow: 0 6px 26px oklch(0.30 0.05 234 / .10); }
.nav-links a:not(.btn){ position: relative; }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background: var(--sage-deep); transform: scaleX(0); transform-origin: left;
  transition: transform .38s var(--ease-out-expo);
}
.nav-links a:not(.btn):hover::after{ transform: scaleX(1); }

/* Nav CTA: `.nav-links a` (0,2,1) outranks `.btn-primary` (0,1,0) in every page's
   inline sheet, which left the button label dark-on-dark. Restate it here. */
.nav-links a.btn-primary,.nav-links a.btn-gold{color:#fff}
.nav-links a.btn-gold{color:#173F52}
.nav-links a.btn-ghost{color:var(--forest)}

/* --- Buttons: one traveling pearl sheen --- */
.btn{ transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo), background .3s; }
.btn-primary{ position: relative; overflow: hidden; }
.btn-primary::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.40) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .8s var(--ease-out-quart);
}
.btn-primary:hover::after{ transform: translateX(130%); }

.card{ transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo), border-color .3s; }

/* --- Hero atmosphere: slow drifting gradient mesh --- */
.hero, .quiz-sec{ position: relative; }
.hero::before, .quiz-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(42% 42% at 12% 16%, oklch(0.94 0.040 228 / .80), transparent 62%),
    radial-gradient(38% 38% at 88% 10%, oklch(0.95 0.030 200 / .62), transparent 62%),
    radial-gradient(46% 50% at 72% 96%, oklch(0.96 0.030 90  / .48), transparent 62%);
  animation: tpMesh 26s ease-in-out infinite alternate;
}
.hero > *, .quiz-sec > *{ position: relative; z-index: 1; }
@keyframes tpMesh{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-1.5%,-2%,0) scale(1.06); }
  100%{ transform: translate3d(1.5%,1%,0) scale(1.03); }
}

/* Gentle float for hero visuals */
.phone, .floaty{ animation: tpFloat 7.5s var(--ease-out-quart) infinite; }
.floaty.f2{ animation-delay: -3.2s; }
.floaty.f3{ animation-delay: -5.1s; }
@keyframes tpFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-11px); } }

/* Pearl shimmer — reserved for the single hero accent, never repeated */
.pearl{ position: relative; overflow: hidden; }
.pearl::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-140%);
  animation: tpSheen 5.5s var(--ease-out-quart) infinite;
}
@keyframes tpSheen{ 0%,72%{ transform: translateX(-140%);} 100%{ transform: translateX(140%);} }

/* Lenis smooth-scroll integration */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }

/* --- Reduced motion: everything calms to instant --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition-duration: .01ms !important; }
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* --- Shared wordmark (filled by pearl.js into [data-tp-logo]) --- */
.mark{flex:none;display:inline-flex;line-height:0}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.tp-arc{stroke-dasharray:340;stroke-dashoffset:340;animation:tpDraw 1.5s var(--ease-out-expo) .2s forwards}
@keyframes tpDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.tp-arc{stroke-dashoffset:0!important;animation:none!important}}


/* ---- review wall (homepage + why) ---- */
.rev{break-inside:avoid;background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:22px 24px;margin:0 0 18px;box-shadow:0 1px 2px rgba(21,40,48,.04)}
.rev-stars{color:var(--gold);font-size:13.5px;letter-spacing:2px}
.rev h3{font-size:16.5px;font-family:Inter,sans-serif;font-weight:600;color:var(--forest);
  margin-bottom:8px;line-height:1.35}
.rev .rev-who{margin-top:14px;font-size:12.6px;color:var(--stone)}
.rev-flag{margin-top:24px;padding:16px 20px;border:1px dashed var(--mist);border-radius:14px;
  background:var(--bone);font-size:12.6px;color:var(--stone);line-height:1.55}
@media(max-width:980px){.rev-grid{columns:2}}
@media(max-width:620px){.rev-grid{columns:1}}


/* ---- plan slicer (who it's for) + trial note ---- */
.plansel{display:inline-flex;background:var(--paper);border:1px solid var(--border);border-radius:999px;padding:5px;gap:4px;margin:0 auto 34px}
.plansel button{border:none;background:none;border-radius:999px;padding:11px 24px;font:inherit;font-size:14.6px;font-weight:500;
  color:var(--stone);cursor:pointer;transition:.28s cubic-bezier(.16,1,.3,1);white-space:nowrap}
.plansel button.on{background:var(--forest);color:#fff;box-shadow:0 10px 22px -12px rgba(27,74,98,.9)}
.plansel button:not(.on):hover{color:var(--forest)}
.plan .tag{display:inline-block;background:linear-gradient(135deg,#FFD27A,#E0AA3F);color:#173F52;border-radius:999px;
  padding:5px 14px;font-family:'Tenor Sans',serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.ptrial{font-size:12.6px;color:var(--stone);margin:12px 0 0;line-height:1.5}
@media(max-width:480px){.plansel{width:100%;justify-content:stretch}.plansel button{flex:1;padding:11px 12px;font-size:13.4px}}

/* ---- shared horizontal card rail (why: shifts + reviews · home: features) ---- */
.rail-wrap{position:relative;margin-top:30px}
.rail-wrap:focus-visible{outline:2px solid var(--clay);outline-offset:6px;border-radius:26px}
.rail-view{overflow:hidden;padding:4px}
.rail-track{display:flex;will-change:transform;touch-action:pan-y;cursor:grab;align-items:flex-start}
.rail-track.drag{cursor:grabbing}
.rail-track > *{flex:none;user-select:none}
.rail-wrap[data-rail-peek] .rail-view{overflow:hidden;padding:4px 0}
.rail-wrap[data-rail-peek] .rail-track > *{transform-origin:50% 50%;will-change:transform,opacity}
.rail-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px}
.rnav{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--forest);
  font-size:16px;cursor:pointer;transition:.25s;flex:none;display:grid;place-items:center}
.rnav:hover:not(:disabled){border-color:var(--clay);transform:translateY(-2px)}
.rnav:disabled{opacity:.3;cursor:default}
.rail-dots{display:flex;gap:8px}
.rail-dots i{width:8px;height:8px;border-radius:50%;background:var(--bone);cursor:pointer;transition:.3s}
.rail-dots i.on{background:var(--forest);width:24px;border-radius:99px}
.rail-hint{text-align:center;font-size:12.4px;color:var(--stone);margin:12px 0 0}