/* ============================================================
   DENTBOX — shared stylesheet
   Petrol + mint-teal, warm coral as the single action signal.
   Bricolage Grotesque (display) · Hanken Grotesk (body) · JetBrains Mono (data)
   ============================================================ */

:root{
  --canvas:#F2F6F6; --surface:#FFFFFF;
  --ink:#06303A; --ink-2:#0A3C48;
  --body:#33474C; --muted:#6A8086;
  --teal:#0FB6A1; --teal-deep:#0A8C7C;
  --mint:#E4F4F0; --mint-2:#D2ECE5;
  --coral:#FF6A4D; --coral-hi:#FB5B3C;
  --line:#E0E9E9; --line-soft:#ECF2F2;
  --shadow-sm:0 1px 2px rgba(6,48,58,.06), 0 2px 6px rgba(6,48,58,.05);
  --shadow-md:0 18px 40px -18px rgba(6,48,58,.28), 0 6px 16px -8px rgba(6,48,58,.12);
  --shadow-lg:0 40px 80px -28px rgba(6,48,58,.40), 0 12px 28px -12px rgba(6,48,58,.18);
  --r:16px; --r-lg:22px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--canvas); color:var(--body);
  font-family:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--teal); color:#fff;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.band{padding-block:clamp(72px, 9vw, 132px);}
.band-sm{padding-block:clamp(54px, 6.5vw, 92px);}

/* type */
h1,h2,h3,h4{font-family:"Bricolage Grotesque", sans-serif; color:var(--ink); margin:0; letter-spacing:-0.02em; font-weight:700;}
h1{font-size:clamp(2.4rem, 5.1vw, 4.05rem); line-height:1.04; font-weight:800;}
h2{font-size:clamp(1.95rem, 3.7vw, 2.95rem); line-height:1.08;}
h3{font-size:1.18rem; line-height:1.3; font-weight:700; letter-spacing:-0.01em;}
p{margin:0;}
.kicker{font-family:"JetBrains Mono", monospace; font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:.55em;}
.kicker::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--teal); display:inline-block;}
.kicker.coral{color:var(--coral);} .kicker.coral::before{background:var(--coral);}
.kicker.light{color:#5FE6D2;}
.lead{font-size:1.16rem; color:var(--body); line-height:1.62;}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:"Hanken Grotesk", sans-serif;
  font-weight:600; font-size:1rem; padding:.85em 1.4em; border-radius:100px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; white-space:nowrap;}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--coral); color:var(--ink); box-shadow:0 8px 20px -8px rgba(255,106,77,.6);}
.btn-primary:hover{background:var(--coral-hi); transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(255,106,77,.7);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:var(--ink-2); transform:translateY(-2px);}
.btn-light{background:#fff; color:var(--ink);}
.btn-light:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-sm{padding:.62em 1.05em; font-size:.92rem;}
.link-arrow{display:inline-flex; align-items:center; gap:.45em; font-weight:600; color:var(--teal-deep);
  transition:gap .18s ease, color .18s ease;}
.link-arrow svg{width:16px; height:16px;}
.link-arrow:hover{gap:.7em; color:var(--ink);}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px; border-radius:6px;}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.7em 1.1em; border-radius:0 0 10px 0; z-index:200;}
.skip:focus{left:0;}

/* NAV */
.nav{position:sticky; top:0; z-index:50; background:rgba(242,246,246,.78);
  backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;}
.nav.scrolled{border-bottom-color:var(--line); background:rgba(242,246,246,.92);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:center; gap:.6em; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.34rem; color:var(--ink); letter-spacing:-0.02em;}
.brand .mark{width:34px; height:34px; flex:none;}
.nav-links{display:flex; align-items:center; gap:2rem; font-weight:500; font-size:.97rem;}
.nav-links a{color:var(--body); transition:color .15s ease; position:relative; padding-block:.4em;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--teal); border-radius:2px;}
.nav-right{display:flex; align-items:center; gap:1.2rem;}
.nav-toggle{display:none;}

/* HERO */
.hero{padding-top:clamp(48px,6vw,84px); padding-bottom:clamp(40px,5vw,64px); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(40px,5vw,72px); align-items:center;}
.hero-copy .kicker{margin-bottom:1.4rem;}
.hero-copy h1{margin-bottom:1.3rem;}
.hero-copy h1 .hl{position:relative; color:var(--teal-deep); white-space:nowrap;}
.hero-copy h1 .hl::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:.42em; background:var(--coral); opacity:.22; border-radius:4px; z-index:-1;}
.hero-copy .lead{max-width:34ch; margin-bottom:2.1rem;}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.3rem;}
.hero-note{font-size:.9rem; color:var(--muted); display:flex; align-items:center; gap:.5em;}
.hero-note svg{width:16px; height:16px; color:var(--teal); flex:none;}

/* product panel */
.panel-stack{position:relative;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:20px; position:relative; z-index:2;}
.panel-top{display:flex; align-items:center; gap:.7em; padding:.5rem .2rem 1rem;}
.panel-search{flex:1; display:flex; align-items:center; gap:.6em; background:var(--canvas); border:1px solid var(--line-soft); border-radius:10px; padding:.6em .8em; color:var(--muted); font-size:.9rem;}
.panel-search svg{width:16px; height:16px; flex:none;}
.panel-chip{font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.08em; color:var(--teal-deep); background:var(--mint); padding:.4em .6em; border-radius:7px; white-space:nowrap;}
.panel-product{display:flex; align-items:center; justify-content:space-between; gap:1em; padding:.2rem .2rem .9rem;}
.panel-product .pname{font-weight:700; color:var(--ink); font-size:1.02rem; letter-spacing:-0.01em;}
.panel-product .pmeta{font-size:.82rem; color:var(--muted);}
.panel-product .pcount{font-family:"JetBrains Mono",monospace; font-size:.8rem; color:var(--muted); background:var(--canvas); border:1px solid var(--line-soft); padding:.35em .6em; border-radius:8px; white-space:nowrap;}
.rows{display:flex; flex-direction:column; gap:.45rem;}
.row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6em; padding:.85em .9em; border-radius:12px; border:1px solid var(--line-soft); background:var(--surface); transition:transform .16s ease;}
.row .supp{display:flex; align-items:center; gap:.7em;}
.row .dot{width:9px; height:9px; border-radius:50%; flex:none;}
.dot.ok{background:var(--teal);} .dot.low{background:#E9A23B;}
.row .sname{font-weight:600; color:var(--ink); font-size:.96rem;}
.row .sstock{font-size:.76rem; color:var(--muted);}
.row .price{font-family:"JetBrains Mono",monospace; font-weight:600; font-size:1rem; color:var(--ink); text-align:right;}
.row.best{background:var(--mint); border-color:var(--mint-2); border-left:3px solid var(--teal);}
.row.best .tag{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.06em; color:#fff; background:var(--teal-deep); padding:.32em .5em; border-radius:6px; margin-left:.5em; vertical-align:middle; text-transform:uppercase;}
.row.best .price{color:var(--teal-deep);}
.panel-foot{display:flex; align-items:center; justify-content:space-between; gap:1em; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line-soft);}
.save-badge{display:inline-flex; align-items:center; gap:.5em; font-weight:700; color:var(--teal-deep); font-size:.95rem;}
.save-badge svg{width:18px; height:18px;}
.panel-mini{position:absolute; z-index:3; left:-26px; bottom:-30px; background:var(--ink); color:#fff; border-radius:14px; padding:.85em 1.05em; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:.7em; max-width:260px;}
.panel-mini .mi{width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.12); display:grid; place-items:center; flex:none; color:var(--teal);}
.panel-mini .mi svg{width:19px; height:19px;}
.panel-mini .mt{font-size:.74rem; line-height:1.35;}
.panel-mini .mt b{color:#fff; font-weight:700; display:block; font-size:.82rem;}
.panel-mini .mt span{color:rgba(255,255,255,.62);}
.panel-glow{position:absolute; inset:-14% -10% -10% -6%; z-index:1; background:radial-gradient(60% 55% at 70% 30%, rgba(15,182,161,.22), transparent 70%), radial-gradient(45% 45% at 20% 90%, rgba(255,106,77,.16), transparent 70%); filter:blur(8px);}

/* TRUST */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface);}
.trust-inner{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.tstat{background:var(--surface); padding:1.7rem 1.4rem; display:flex; flex-direction:column; gap:.3rem;}
.tstat .num{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:1.85rem; color:var(--ink); letter-spacing:-0.02em; line-height:1;}
.tstat .num em{font-style:normal; color:var(--teal-deep);}
.tstat .lbl{font-size:.92rem; color:var(--muted);}
.tstat .src{font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.04em; color:#9DAEB2; margin-top:.2rem;}
.stat-note{text-align:center; font-size:.8rem; color:var(--muted); padding:1rem 24px 0;}

/* PROBLEM / generic head */
.sec-head{max-width:700px; margin-bottom:clamp(2.6rem,4vw,3.6rem);}
.sec-head.center{margin-inline:auto; text-align:center;}
.sec-head .kicker{margin-bottom:1.1rem;}
.sec-head h2{margin-bottom:1.1rem;}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;}
.cards-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem;}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.8rem 1.6rem; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--mint-2);}
.pcard .ic{width:48px; height:48px; border-radius:12px; background:var(--mint); color:var(--teal-deep); display:grid; place-items:center; margin-bottom:1.2rem;}
.pcard .ic svg{width:23px; height:23px;}
.pcard h3{margin-bottom:.6rem;}
.pcard p{font-size:.97rem; color:var(--body);}

/* PLATFORM */
.surface-band{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.plat-head{display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; margin-bottom:clamp(2.4rem,4vw,3.4rem);}
.plat-head .kicker{margin-bottom:1.1rem;}
.plat-head p{color:var(--muted); max-width:34ch;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
.split-col{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.8rem,3vw,2.6rem); position:relative; overflow:hidden; background:linear-gradient(180deg,#fff, #FBFDFD);}
.split-col.b{background:linear-gradient(180deg,var(--ink),var(--ink-2)); border-color:transparent;}
.split-col .role{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-deep); margin-bottom:1rem; display:inline-block;}
.split-col.b .role{color:#5FE6D2;}
.split-col h3{font-size:1.5rem; margin-bottom:1.4rem;}
.split-col.b h3{color:#fff;}
.flist{list-style:none; margin:0 0 1.6rem; padding:0; display:flex; flex-direction:column; gap:.95rem;}
.flist li{display:flex; gap:.7em; align-items:flex-start; font-size:1rem; color:var(--body);}
.flist li svg{width:20px; height:20px; flex:none; color:var(--teal); margin-top:.12em;}
.split-col.b .flist li{color:rgba(255,255,255,.84);}
.split-col.b .flist li svg{color:#5FE6D2;}
.split-col.b .link-arrow{color:#5FE6D2;} .split-col.b .link-arrow:hover{color:#fff;}
.box-motif{position:absolute; right:-30px; top:-30px; width:140px; height:140px; opacity:.5; pointer-events:none;}

/* SAVINGS ledger */
.ledger{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface);}
.lcol{padding:clamp(1.8rem,3vw,2.6rem); border-right:1px solid var(--line);}
.lcol:last-child{border-right:none;}
.lcol .ltag{font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:1rem;}
.lcol .lnum{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(2.3rem,4.4vw,3.4rem); color:var(--ink); letter-spacing:-0.03em; line-height:.95; margin-bottom:.9rem;}
.lcol .lnum em{font-style:normal; color:var(--teal-deep);}
.lcol p{font-size:.96rem; color:var(--body);}
.save-foot{margin-top:1.6rem; font-size:.9rem; color:var(--muted); display:flex; align-items:flex-start; gap:.6em; max-width:70ch;}
.save-foot b{color:var(--ink); font-weight:700;}

/* AUDIENCE cards */
.aud-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
.acard{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(2rem,3.2vw,2.8rem); display:flex; flex-direction:column; background:var(--canvas); transition:transform .2s ease, box-shadow .2s ease;}
.acard:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.abadge{align-self:flex-start; display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.84rem; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:.4em .9em; margin-bottom:1.4rem;}
.abadge .b-dot{width:8px; height:8px; border-radius:2px; background:var(--teal);}
.acard.supplier .abadge .b-dot{background:var(--coral);}
.acard h3{font-size:1.42rem; margin-bottom:.9rem;}
.acard p{font-size:1.02rem; color:var(--body); margin-bottom:1.8rem;}
.acard .spacer{flex:1;}
.acard .link-arrow{color:var(--coral); font-size:1rem;} .acard .link-arrow:hover{color:var(--ink);}

/* STEPS (real sequence -> numbered) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; counter-reset:s;}
.steps.four{grid-template-columns:repeat(4,1fr);}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.9rem 1.6rem; position:relative;}
.step .sn{font-family:"JetBrains Mono",monospace; font-size:.8rem; font-weight:600; color:var(--teal-deep); background:var(--mint); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:1.2rem;}
.step h3{margin-bottom:.55rem;}
.step p{font-size:.96rem; color:var(--body);}

/* FAQ */
.faq{max-width:780px; margin-inline:auto; border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; padding:1.35rem 0; font-family:"Bricolage Grotesque",sans-serif; font-weight:600; font-size:1.1rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{flex:none; width:26px; height:26px; border:1.5px solid var(--line); border-radius:50%; display:grid; place-items:center; transition:transform .2s ease, border-color .2s ease; color:var(--teal-deep);}
.faq details[open] summary .pm{transform:rotate(45deg); border-color:var(--teal);}
.faq .ans{padding:0 0 1.4rem; color:var(--body); font-size:1rem; max-width:64ch;}

/* PAGE HERO (subpages) */
.page-hero{background:linear-gradient(180deg, var(--mint) 0%, var(--canvas) 100%); border-bottom:1px solid var(--line); padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px); overflow:hidden;}
.crumb{font-family:"JetBrains Mono",monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem; display:flex; gap:.5em; align-items:center;}
.crumb a{color:var(--teal-deep);}
.page-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,64px); align-items:center;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem); margin-bottom:1.1rem;}
.page-hero .lead{max-width:42ch; margin-bottom:1.8rem;}
.page-hero-actions{display:flex; flex-wrap:wrap; gap:.8rem;}
.hero-aside{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-md); padding:1.8rem;}
.hero-aside h4{font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:1.2rem;}
.mini-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem;}
.mini-list li{display:flex; gap:.8em; align-items:flex-start;}
.mini-list .mli{width:34px; height:34px; border-radius:9px; background:var(--mint); color:var(--teal-deep); display:grid; place-items:center; flex:none;}
.mini-list .mli svg{width:18px; height:18px;}
.mini-list b{display:block; color:var(--ink); font-weight:700; font-size:.98rem;}
.mini-list span{font-size:.88rem; color:var(--muted);}

/* INLINE CTA */
.cta-inline{background:linear-gradient(165deg,var(--ink) 0%, #052730 100%); border-radius:var(--r-lg); padding:clamp(2.4rem,4vw,3.6rem); color:#fff; position:relative; overflow:hidden; text-align:center;}
.cta-inline h2{color:#fff; margin-bottom:1rem;}
.cta-inline p{color:rgba(255,255,255,.74); max-width:48ch; margin:0 auto 2rem; font-size:1.08rem;}
.cta-inline .btn-row{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:2;}
.cta-inline .glow{position:absolute; right:-6%; top:-40%; width:440px; height:440px; background:radial-gradient(circle, rgba(15,182,161,.26), transparent 62%); pointer-events:none;}

/* FINAL CTA (dark full) */
.cta{background:linear-gradient(165deg,var(--ink) 0%, #052730 100%); color:#fff; position:relative; overflow:hidden;}
.cta::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(110% 90% at 80% 0%, #000 30%, transparent 75%); pointer-events:none;}
.cta::after{content:""; position:absolute; right:-8%; top:-30%; width:520px; height:520px; background:radial-gradient(circle, rgba(15,182,161,.26), transparent 62%); pointer-events:none;}
.cta-inner{position:relative; z-index:2; max-width:760px;}
.cta .kicker{color:#5FE6D2; margin-bottom:1.3rem;} .cta .kicker::before{background:var(--coral);}
.cta h2{color:#fff; margin-bottom:1.1rem; max-width:18ch;}
.cta p{color:rgba(255,255,255,.72); font-size:1.12rem; margin-bottom:2.2rem; max-width:46ch;}
.form{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:1.4rem; max-width:560px; backdrop-filter:blur(6px);}
.seg{display:inline-flex; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:100px; padding:4px; margin-bottom:1rem;}
.seg button{font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:.9rem; color:rgba(255,255,255,.7); background:transparent; border:none; cursor:pointer; padding:.5em 1.1em; border-radius:100px; transition:background .18s ease, color .18s ease;}
.seg button.on{background:var(--coral); color:var(--ink);}
.form-row{display:flex; gap:.7rem;}
.form input{flex:1; font-family:"Hanken Grotesk",sans-serif; font-size:1rem; background:rgba(255,255,255,.95); border:1px solid transparent; border-radius:100px; padding:.85em 1.25em; color:var(--ink); min-width:0;}
.form input::placeholder{color:#8AA0A5;}
.form-note{margin-top:.9rem; font-size:.82rem; color:rgba(255,255,255,.55); display:flex; align-items:center; gap:.5em;}
.form-note svg{width:15px; height:15px; color:#5FE6D2; flex:none;}
.form-ok{display:none; align-items:center; gap:.7em; color:#fff; font-weight:600; padding:.4em 0;}
.form-ok svg{width:22px; height:22px; color:#5FE6D2; flex:none;}
.form.done .form-row, .form.done .form-note, .form.done .seg{display:none;}
.form.done .form-ok{display:flex;}

/* SOURCES list */
.sources{max-width:820px; margin-inline:auto;}
.sources ol{margin:0; padding:0; list-style:none; counter-reset:src;}
.sources li{display:flex; gap:1em; padding:1.1rem 0; border-bottom:1px solid var(--line); font-size:.96rem; color:var(--body);}
.sources li::before{counter-increment:src; content:counter(src); font-family:"JetBrains Mono",monospace; font-size:.78rem; color:var(--teal-deep); background:var(--mint); width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none;}
.sources li b{color:var(--ink); font-weight:700;}
.sources li a{color:var(--teal-deep); word-break:break-word;}

/* COMPARE table */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
.compare .col{border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.8rem,3vw,2.4rem); background:var(--surface);}
.compare .col.good{background:var(--mint); border-color:var(--mint-2);}
.compare .col h3{display:flex; align-items:center; gap:.6em; margin-bottom:1.3rem; font-size:1.2rem;}
.compare .col h3 .tg{font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:.3em .5em; border-radius:6px;}
.compare .col.bad h3 .tg{background:#FBE6E0; color:#C2492B;}
.compare .col.good h3 .tg{background:var(--teal-deep); color:#fff;}
.clist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem;}
.clist li{display:flex; gap:.7em; align-items:flex-start; font-size:.98rem; color:var(--body);}
.clist li svg{width:19px; height:19px; flex:none; margin-top:.1em;}
.clist li.x svg{color:#D86A4E;} .clist li.c svg{color:var(--teal);}

/* FOOTER */
.foot{background:var(--canvas); padding-block:3.2rem 2.4rem;}
.foot-inner{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; padding-bottom:2rem; border-bottom:1px solid var(--line);}
.foot .brand{margin-bottom:.6rem;}
.foot-tag{font-size:.95rem; color:var(--muted); max-width:32ch;}
.foot-links{display:flex; gap:2.4rem; flex-wrap:wrap;}
.foot-col h4{font-family:"Hanken Grotesk",sans-serif; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; font-weight:600;}
.foot-col a{display:block; margin-bottom:.65rem; color:var(--body); font-size:.95rem; transition:color .15s ease;}
.foot-col a:hover{color:var(--ink);}
.copy{padding-top:1.6rem; font-size:.85rem; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem;}

/* REVEAL */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.js .reveal.in{opacity:1; transform:none;}

/* RESPONSIVE */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; gap:48px;}
  .hero-copy .lead{max-width:46ch;}
  .panel-stack{max-width:460px;}
  .page-hero-grid{grid-template-columns:1fr; gap:40px;}
  .cards-3,.steps,.steps.four{grid-template-columns:1fr;}
  .cards-2,.split,.ledger,.aud-grid,.compare{grid-template-columns:1fr;}
  .lcol{border-right:none; border-bottom:1px solid var(--line);} .lcol:last-child{border-bottom:none;}
  .plat-head{grid-template-columns:1fr;}
}
@media (max-width:640px){
  body{font-size:16px;}
  .nav-links{display:none;}
  .nav-right .btn{display:none;}
  .nav-toggle{display:inline-flex; background:none; border:1px solid var(--line); border-radius:10px; padding:.5em; cursor:pointer; color:var(--ink);}
  .trust-inner{grid-template-columns:1fr;}
  .hero-actions,.page-hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn,.page-hero-actions .btn{justify-content:center;}
  .form-row{flex-direction:column;} .form input{width:100%;}
  .panel-mini{left:auto; right:8px; bottom:-26px; max-width:220px;}
  .foot-inner{flex-direction:column;} .copy{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .js .reveal{opacity:1; transform:none;}
}


/* ============================================================
   Warteliste — Ladezustand, Fehlermeldung, Honeypot
   (ergaenzt beim Umbau auf /api/waitlist)
   ============================================================ */

/* Honeypot: fuer Menschen unsichtbar, Bots fuellen es aus. */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

.form-err{margin-top:.9rem; font-size:.88rem; font-weight:600; color:#FFC8B8;
  display:flex; align-items:flex-start; gap:.5em;}
.form-err[hidden]{display:none;}
.form.done .form-err, .form.done .hp{display:none;}
.form [data-submit][disabled]{opacity:.72; cursor:progress; transform:none; box-shadow:none;}


/* ============================================================
   Wort-Bild-Marke
   Bildmarke aus brand/dentbox-logo.png, Wortmarke in Sora 700.
   width/height stehen als Attribute am <img>, damit der Browser das
   Seitenverhaeltnis vor dem Laden kennt und nichts nachspringt.
   ============================================================ */

.brand{font-family:"Sora", "Bricolage Grotesque", sans-serif; font-weight:700;
  font-size:1.52rem; gap:.5em;}
.brand .mark-wrap{display:flex; flex:none; align-items:center;}
.brand .mark{width:auto; height:42px; flex:none;}
.brand .wb{color:var(--teal-deep);}

/* Die Instrumente ragen oben aus der Box heraus, der optische Schwerpunkt
   der Marke liegt deshalb unter der Bildmitte. Das Wort wandert entsprechend
   nach unten — in em, damit es auf jeder Groessenstufe passt. Der Versatz
   veraendert die Zeilenhoehe nicht, die Nav bleibt also gleich hoch. */
.brand .wordmark{white-space:nowrap; line-height:1;
  display:inline-block; transform:translateY(.2em);}

.foot .brand{font-size:1.4rem;}
.foot .brand .mark{height:38px;}

.demo-head .dh-brand{font-family:"Sora", sans-serif; font-weight:700;}
.demo-head .dh-brand .mark-wrap{display:flex; flex:none; align-items:center;}
.demo-head .dh-brand .mark{width:auto; height:30px;}

/* Sora laeuft breiter als Bricolage. Zwischen 640 und 860 px stehen die
   Menuepunkte noch, also dort schon etwas zuruecknehmen. */
@media (max-width:860px){
  .brand{font-size:1.36rem;}
  .brand .mark{height:38px;}
}
@media (max-width:640px){
  .brand{font-size:1.32rem;}
  .brand .mark{height:36px;}
  .foot .brand{font-size:1.26rem;}
  .foot .brand .mark{height:33px;}
}


/* ============================================================
   Rechtsseiten — Lesetypografie für längeren Fließtext
   ============================================================ */

.legal{max-width:74ch; margin-inline:auto;}
.legal h2{font-size:clamp(1.5rem,2.6vw,1.95rem); margin:2.8rem 0 1rem;}
.legal h2:first-child{margin-top:0;}
.legal h3{margin:1.8rem 0 .6rem; font-size:1.06rem;}
.legal p{margin-bottom:1.1rem;}
.legal ul{margin:0 0 1.1rem; padding-left:1.3rem;}
.legal li{margin-bottom:.55rem;}
.legal a{color:var(--teal-deep); text-decoration:underline; text-underline-offset:.15em;}
.legal a:hover{color:var(--ink);}
.legal strong{color:var(--ink); font-weight:700;}

/* Datentabelle für die Pflichtangaben */
.legal-table{width:100%; border-collapse:collapse; margin-bottom:1.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;}
.legal-table th, .legal-table td{text-align:left; padding:.85em 1.1em;
  border-bottom:1px solid var(--line-soft); font-size:.98rem; vertical-align:top;}
.legal-table tr:last-child th, .legal-table tr:last-child td{border-bottom:none;}
.legal-table th{font-weight:600; color:var(--muted); width:15em;
  font-family:"Hanken Grotesk",sans-serif;}
.legal-table td{color:var(--ink);}

/* Hinweiskasten */
.legal-note{background:var(--mint); border:1px solid var(--mint-2);
  border-radius:var(--r); padding:1.2rem 1.4rem; margin-bottom:1.6rem;}
.legal-note p:last-child{margin-bottom:0;}

/* Noch nicht eingetragene Angabe — im Zustand der Vorbereitung sichtbar */
.todo{background:#FFEDE8; color:#993C1D; padding:.1em .45em; border-radius:5px;
  font-family:"JetBrains Mono",monospace; font-size:.86em; white-space:nowrap;}

.legal-updated{font-family:"JetBrains Mono",monospace; font-size:.76rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line);}

@media (max-width:640px){
  .legal-table th{width:auto; display:block; padding-bottom:.2em; border-bottom:none;}
  .legal-table td{display:block; padding-top:0;}
}