/* SmileBiome — CitrusBurn-grade base styles (WCAG AA, no overflow-x) */
:root{
  --bg: #f7fbf8;
  --bg2:#ffffff;
  --card:#ffffffcc;
  --fg:#0f1218;
  --muted:#4a5565;
  --muted2:#6b778a;
  --line:#e6ece8;
  --shadow: 0 10px 30px rgba(15,18,24,.10);
  --shadow2: 0 18px 60px rgba(15,18,24,.12);

  --a1: #648638; /* olive green */
  --a2: #c9d5cb; /* mint */
  --a3: #da5939; /* coral */
  --gold:#d8b65a;

  /* CTA gradient differs per theme */
  --cta-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--a1) 86%, #ffffff 14%),
    color-mix(in srgb, var(--a3) 90%, #ffffff 10%)
  );
  --cta-shadow: 0 12px 30px rgba(100,134,56,.20);

  --radius: 22px;
  --radius2: 28px;
  --max: 1120px;
  --pad: 22px;
  --pad2: 30px; /* MUST NOT exceed 30px on sections */
  --focus: 0 0 0 3px rgba(100,134,56,.30), 0 0 0 6px rgba(218,89,57,.20);
  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#0b0f19;
  --bg2:#0f1626;
  --card:#0f1626cc;
  --fg:#eef3ff;
  --muted:#c9d1e2;
  --muted2:#9aa6bf;
  --line:#1d2a40;
  --shadow: 0 14px 44px rgba(0,0,0,.40);
  --shadow2: 0 24px 80px rgba(0,0,0,.45);
  --cta-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--a1) 78%, #0b0f19 22%),
    color-mix(in srgb, var(--a3) 80%, #0b0f19 20%)
  );
  --cta-shadow: 0 16px 44px rgba(0,0,0,.45);
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:clip}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.45;
  color:var(--fg);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(100,134,56,.18), transparent 62%),
    radial-gradient(900px 600px at 80% 15%, rgba(218,89,57,.16), transparent 60%),
    radial-gradient(900px 700px at 60% 90%, rgba(201,213,203,.28), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* a11y */
.skip{
  position:absolute; left:-999px; top:6px;
  padding:10px 12px; border-radius:999px;
  background:var(--fg); color:var(--bg);
  z-index:9999;
}
.skip:focus{left:10px; outline:none; box-shadow:var(--focus)}

a{color:inherit}
a:hover{text-decoration:underline}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:10px}

.container{
  width:min(var(--max), calc(100% - 2*var(--pad)));
  margin-inline:auto;
}

header.site-header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter: saturate(130%);
}
/* Avoid blur on mobile */
@media (max-width: 900px){
  header.site-header{backdrop-filter:none}
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none;
}
.brand img{width:180px; height:auto; display:block}

.nav{
  display:flex; align-items:center; gap:10px;
}
.nav a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  color:var(--muted);
  font-weight:650;
  font-size:14px;
}
.nav a:hover{background:color-mix(in srgb, var(--line) 55%, transparent); color:var(--fg); text-decoration:none}

.controls{display:flex; align-items:center; gap:10px}
select.lang{
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg2) 85%, transparent);
  color:var(--fg);
  border-radius:999px;
  padding:10px 12px;
  font-weight:650;
  font-size:14px;
}

button.icon{
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:color-mix(in srgb, var(--bg2) 85%, transparent);
  display:grid; place-items:center;
  cursor:pointer;
}
button.icon:hover{background:color-mix(in srgb, var(--line) 55%, transparent)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background: var(--cta-grad);
  color:#fff;
  font-weight:800;
  text-decoration:none;
  box-shadow: var(--cta-shadow);
  white-space:nowrap;
  max-width:100%;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.secondary{
  background:color-mix(in srgb, var(--bg2) 70%, transparent);
  color:var(--fg);
  box-shadow:none;
}

.header-cta{display:flex; align-items:center; gap:10px}
button.icon.hamburger{display:none}

/* mobile: no CTA, yes hamburger */
@media (max-width: 900px){
  .nav{display:none}
  .header-cta{display:none}
  button.icon.hamburger{display:grid}
  .brand img{width:160px}
  .controls select.lang{display:none}
  .drawer select.lang{display:block}
}

/* progress bar */
.progress{
  height:2px; width:100%;
  background:transparent;
}
.progress > span{
  display:block;
  height:2px;
  width:0%;
  background:linear-gradient(90deg, var(--a1), var(--a3));
}

/* sections */
main{padding-bottom: 10px}
section.section{
  padding-top: var(--pad2);
  padding-bottom: var(--pad2);
  border-bottom:1px solid var(--line);
  content-visibility:auto;
  contain-intrinsic-size: 900px;
}
section.section.full{
  min-height:100svh;
  display:flex;
  align-items:center;
}
section.section.no-border{border-bottom:none}
section.section.hero{padding-top:0}
section.section.hero.full{min-height:calc(100svh - 64px)}

.grid-2{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:24px;
  align-items:start;
}

@media (max-width: 900px){
  .grid-2{grid-template-columns: 1fr; text-align:center}
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted2);
  background: color-mix(in srgb, var(--line) 45%, transparent);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  width:fit-content;
}

@media (max-width: 900px){
  .eyebrow{margin-inline:auto}
}

h1{
  font-size: clamp(32px, 4.1vw, 56px);
  line-height:1.06;
  margin:14px 0 10px 0;
  letter-spacing:-.02em;
}
p.lead{
  font-size: clamp(16px, 1.35vw, 19px);
  color:var(--muted);
  margin:0 0 14px 0;
  max-width: 60ch;
}
@media (max-width: 900px){
  p.lead{margin-inline:auto}
}

.bullets{display:grid; gap:10px; margin:16px 0 22px 0; padding:0; list-style:none}
.bullets li{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--fg);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  border:1px solid var(--line);
  padding:12px 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bullets svg{flex:0 0 auto; margin-top:2px}

.hero-card{
  position:relative;
  padding:22px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background:
    radial-gradient(800px 420px at 20% 10%, rgba(100,134,56,.20), transparent 60%),
    radial-gradient(800px 520px at 80% 20%, rgba(218,89,57,.18), transparent 62%),
    color-mix(in srgb, var(--bg2) 70%, transparent);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.hero-card::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(600px 360px at 30% 10%, rgba(255,255,255,.36), transparent 60%);
  pointer-events:none;
}
@media (max-width: 900px){
  .hero-card{padding:18px}
}

.media{
  display:grid;
  place-items:start center;
}
.media figure{
  margin:0;
  width:min(520px, 100%);
  aspect-ratio: 1 / 1;
  display:grid;
  place-items:center;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.media img{width:92%; height:92%; object-fit:contain; display:block}
@media (max-width: 900px){
  .media figure{width:min(440px, 100%); margin-inline:auto}
  .media{place-items:center}
}

/* cards */
.h2{
  font-size: clamp(22px, 2.3vw, 34px);
  line-height:1.15;
  margin:0 0 10px 0;
  letter-spacing:-.01em;
}
.sub{
  color:var(--muted);
  max-width:70ch;
  margin:0 0 16px 0;
}
@media (max-width: 900px){ .sub{margin-inline:auto} }

.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
@media (max-width: 900px){ .cards{grid-template-columns:1fr} }

.card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  box-shadow: var(--shadow);
}
.card h3{margin:0; font-size:16px}
.card p{margin:0; color:var(--muted)}
.card .cta-row{margin-top:auto}

/* sticky experience */
.experience{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 900px){ .experience{grid-template-columns:1fr} }

.sticky{
  position:sticky; top:92px;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: var(--shadow2);
  padding:16px;
}
@media (max-width: 900px){ .sticky{position:relative; top:auto} }

.step-list{display:grid; gap:10px}
.step{
  padding:14px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  cursor:pointer;
}
.step strong{display:block; margin-bottom:6px}
.step p{margin:0; color:var(--muted)}
.step[aria-current="true"]{
  border-color: color-mix(in srgb, var(--a1) 60%, var(--line));
  box-shadow: 0 0 0 3px rgba(100,134,56,.18);
}
.sticky .caption{margin-top:10px; color:var(--muted); font-size:14px}

/* plans */
.plans{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
@media (max-width: 900px){ .plans{grid-template-columns:1fr} }

.plan{
  display:flex;
  flex-direction:column;
  border-radius: var(--radius2);
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.plan .top{padding:16px 16px 12px 16px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(216,182,90,.18);
  border:1px solid rgba(216,182,90,.35);
  color:color-mix(in srgb, var(--fg) 92%, var(--gold));
  font-weight:900;
  font-size:12px;
  width:fit-content;
}
.plan h3{margin:10px 0 6px 0; font-size:18px}
.plan .meta{color:var(--muted); font-weight:650; font-size:14px}
.plan .imgwrap{
  display:grid; place-items:center;
  padding: 6px 16px 10px 16px;
}
.plan .imgwrap img{width:min(320px, 100%); height:auto; object-fit:contain; display:block}
.plan .pricing{
  padding: 0 16px 14px 16px;
  display:grid; gap:8px;
}
.price-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.price{font-weight:950; font-size:26px; letter-spacing:-.02em}
.small{color:var(--muted2); font-size:13px}
.plan .cta-row{padding: 0 16px 16px 16px; margin-top:auto}
.plan .cta-row .btn{width:100%}

/* accordion */
.accordion{display:grid; gap:10px; max-width: 980px}
@media (max-width: 900px){ .accordion{margin-inline:auto} }
.acc-item{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: var(--shadow);
}
.acc-btn{
  width:100%;
  text-align:left;
  padding:14px 14px;
  background:transparent;
  border:0;
  color:var(--fg);
  font-weight:850;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
@media (max-width: 900px){
  .acc-btn{text-align:center; justify-content:center; flex-direction:column}
}
.acc-panel{
  padding:0 14px 14px 14px;
  color:var(--muted);
  display:none;
}
.acc-panel[hidden]{display:none}
.acc-panel.show{display:block}

footer{
  padding: 26px 0 40px 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr; text-align:center} }
.footer-links{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
  align-items:flex-start;
}
@media (max-width: 900px){ .footer-links{justify-content:center; align-items:center} }
.footer-links a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  color:var(--muted);
  font-weight:750;
  font-size:14px;
}
.footer-links a:hover{color:var(--fg); text-decoration:none}


/* mobile: center-aligned content */
@media (max-width: 900px){
  .container{ text-align:center; }
  .cards .card, .step, .plan .top, .plan .pricing, .acc-panel{ text-align:center; }
  .price-row{ justify-content:center; flex-wrap:wrap; }
  .bullets li{ justify-content:center; }
}

/* reveal motion */
.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .btn{transition:none !important}
}

/* mobile menu */
.drawer{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  display:none;
  z-index:100;
}
.drawer[aria-hidden="false"]{display:block}
.drawer-panel{
  position:absolute; right:0; top:0; height:100%;
  width:min(360px, 92vw);
  background: var(--bg2);
  border-left:1px solid var(--line);
  padding:14px;
  box-shadow: -20px 0 60px rgba(0,0,0,.25);
}
.drawer-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0 12px 0}
.drawer-nav{display:grid; gap:10px; margin-top:10px}
.drawer-nav a{
  text-decoration:none;
  padding:12px 12px;
  border-radius: var(--radius);
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  font-weight:850;
}
.drawer-nav a:hover{text-decoration:none}
.drawer .lang{width:100%}

/* helper */
.kicker{font-weight:900; color:var(--muted2); text-transform:uppercase; letter-spacing:.12em; font-size:12px}
.note{color:var(--muted2); font-size:13px; max-width: 80ch}
@media (max-width: 900px){ .note{margin-inline:auto} }