/* ============ TOKENS ============ */
:root{
  --bg:#14102b; --bg-deep:#0d0a1c; --card:#1c1638; --muted-bg:#191333;
  --fg:#ffffff; --fg-muted:#a99fc4; --fg-dim:#7d729b;
  --primary:#4338ca; --secondary:#6366f1; --accent:#7c3aed; --accent-lt:#a78bfa;
  --line:rgba(255,255,255,.09); --line-str:rgba(255,255,255,.16);
  --ok:#34d399; --warn:#fbbf24;
  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --sp:8px;
  --ff-h:"Rubik",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ff-b:"Nunito Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-b);font-size:17px;line-height:1.65;font-weight:400;
  color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.num,.price-big{font-family:var(--ff-h);font-weight:700;letter-spacing:-.03em;line-height:1.08}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--accent-lt);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.tnum{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:#14102b;padding:12px 18px;border-radius:8px;font-weight:700}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 28px;border-radius:var(--r-sm);
  font-family:var(--ff-h);font-weight:700;font-size:16px;letter-spacing:-.01em;
  transition:transform .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease);
  cursor:pointer;text-align:center;
}
.btn:active{transform:scale(.975)}
.btn-primary{background:#fff;color:#1a1235;box-shadow:0 8px 28px -10px rgba(255,255,255,.45)}
.btn-primary:hover{background:#ede9fe;box-shadow:0 12px 34px -10px rgba(196,181,253,.6)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:#8b4ef5}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--line-str)}
.btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-lg{min-height:60px;padding:0 36px;font-size:18px}
.btn-block{width:100%}

/* ============ HEADER ============ */
.hdr{position:sticky;top:0;z-index:50;background:rgba(13,10,28,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.logo{font-family:var(--ff-h);font-weight:800;font-size:22px;letter-spacing:-.045em}
.logo b{font-weight:800}
.logo span{color:var(--accent-lt)}
.hdr nav{display:flex;gap:30px;font-size:15px;font-weight:600;color:var(--fg-muted)}
.hdr nav a{transition:color .15s var(--ease)}
.hdr nav a:hover{color:#fff}
.hdr .btn{min-height:44px;padding:0 20px;font-size:15px}

/* ============ HERO ============ */
.hero{position:relative;padding:72px 0 84px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 460px at 78% 18%,rgba(124,58,237,.38),transparent 62%),
    radial-gradient(620px 420px at 12% 88%,rgba(67,56,202,.28),transparent 66%),
    linear-gradient(180deg,#1a1338 0%,var(--bg) 68%);
}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  padding:8px 16px;border-radius:99px;font-size:13.5px;font-weight:700;letter-spacing:.02em;
  background:rgba(167,139,250,.13);color:#c9b8ff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.28);
}
.eyebrow svg{width:15px;height:15px;flex:none}
h1{font-size:clamp(40px,5.6vw,68px);font-weight:800;margin-bottom:20px}
h1 .grad{
  background:linear-gradient(96deg,#c4b5fd 0%,#a78bfa 45%,#818cf8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* The Latin name inside the H1. Bulgarian shoppers search this product both in
   Cyrillic and as "teeth whitening strips", and every BG shop selling it puts
   both in the title. Kept visually subordinate so the page still reads as
   Bulgarian, but it is real H1 text, not a decoration.
   Colour is --fg-muted, not --fg-dim: at 15px this is normal-size text, and
   --fg-dim only reaches 4.17:1 on the page background, under the 4.5:1 AA floor. */
.h1-alt{
  display:block;margin-top:12px;
  font-size:clamp(15px,1.5vw,19px);font-weight:600;letter-spacing:-.01em;
  color:var(--fg-muted);
}
.hero .lead{font-size:19px;color:var(--fg-muted);max-width:490px;margin-bottom:32px;line-height:1.6}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:22px}
.price-blk{line-height:1.25}
.price-big{font-size:30px;font-weight:800;letter-spacing:-.035em}
.price-sub{font-size:14px;color:var(--fg-dim)}
.price-sub s{margin-right:7px}
.price-sub b{color:var(--ok);font-weight:700}

.hero-media{position:relative;display:grid;place-items:center}
.hero-media .glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.42),transparent 66%);filter:blur(38px)}
.hero-media figure{
  position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.85);
  padding:14px;
}

/* --- product gallery --- */
.gal{position:relative}
.gal-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:14px;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;touch-action:pan-y pinch-zoom;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always}
.gal-slide img{width:100%;display:block;border-radius:14px}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:var(--bg-deep);
  background:rgba(255,255,255,.92);box-shadow:0 6px 20px -6px rgba(0,0,0,.5);
  transition:opacity .2s var(--ease),background .2s var(--ease);
}
.gal-nav:hover{background:#fff}
.gal-nav svg{width:20px;height:20px}
.gal-nav.prev{left:10px}
.gal-nav.next{right:10px}
.gal-nav[disabled]{opacity:.32;cursor:default}
.gal-thumbs{display:flex;gap:10px;margin-top:14px}
.gal-thumb{
  flex:1;padding:0;border:0;background:#fff;cursor:pointer;border-radius:10px;
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);
  opacity:.72;transition:opacity .2s var(--ease),box-shadow .2s var(--ease);
  min-height:44px;
}
.gal-thumb img{width:100%;display:block}
.gal-thumb:hover{opacity:.92}
.gal-thumb[aria-current="true"]{opacity:1;box-shadow:inset 0 0 0 2px var(--accent-lt)}

/* --- discount tag --- */
.save-tag{
  position:absolute;top:26px;left:26px;z-index:3;
  display:inline-flex;align-items:stretch;border-radius:var(--r-sm);overflow:hidden;
  background:var(--primary);box-shadow:0 10px 26px -10px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.22);
  font-family:var(--ff-h);color:#fff;
}
.save-tag b{
  padding:7px 11px;font-size:16px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.save-tag span{
  display:flex;align-items:center;padding:7px 11px;
  border-left:1px solid rgba(255,255,255,.24);background:rgba(0,0,0,.16);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

/* ============ MARQUEE BAND ============ */
.band{background:var(--muted-bg);border-block:1px solid var(--line)}
.band-in{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;padding:20px 24px}
.band-i{display:flex;align-items:center;gap:9px;font-family:var(--ff-h);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#cfc4e8}
.band-i svg{width:17px;height:17px;color:var(--accent-lt);flex:none}

/* ============ SECTIONS ============ */
section{scroll-margin-top:80px}
.sec{padding:92px 0}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head.mid{margin-inline:auto;text-align:center}
.kicker{font-family:var(--ff-h);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:14px}
h2{font-size:clamp(31px,4.1vw,46px);font-weight:800;margin-bottom:16px}
.sec-head p{font-size:18px;color:var(--fg-muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{
  background:var(--card);border-radius:var(--r-md);padding:32px 28px;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
.step:hover{box-shadow:inset 0 0 0 1px rgba(167,139,250,.4);transform:translateY(-3px)}
.step-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(124,58,237,.16);color:var(--accent-lt);box-shadow:inset 0 0 0 1px rgba(167,139,250,.24)}
.step-ic svg{width:23px;height:23px}
.step .num{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--fg-dim);margin-bottom:7px}
.step h3{font-size:20px;font-weight:700;margin-bottom:9px}
.step p{font-size:15.5px;color:var(--fg-muted)}

/* comparison */
.cmp-wrap{border-radius:var(--r-md);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
table{width:100%;border-collapse:collapse;font-size:15.5px}
thead th{
  background:var(--muted-bg);padding:18px 22px;text-align:left;
  font-family:var(--ff-h);font-size:14px;font-weight:700;letter-spacing:.03em;color:var(--fg-muted);
  border-bottom:1px solid var(--line);
}
thead th.us{background:linear-gradient(160deg,var(--accent),var(--primary));color:#fff;font-size:15px}
tbody td{padding:16px 22px;border-bottom:1px solid var(--line);background:var(--card);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td.us{background:rgba(124,58,237,.11);font-weight:700}
.mark{display:inline-flex;align-items:center;gap:8px}
.mark svg{width:17px;height:17px;flex:none}
.mark.y{color:var(--ok)}
.mark.n{color:var(--fg-dim)}
.cell-lbl{color:var(--fg-muted);font-weight:600}

/* science */
.sci{background:var(--muted-bg);border-block:1px solid var(--line)}
.sci-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.wheel{
  width:min(280px,72vw);aspect-ratio:1;border-radius:50%;position:relative;margin-inline:auto;
  background:conic-gradient(from 0deg,#facc15,#fde68a,#e9d5ff,#c4b5fd,#7c3aed,#c4b5fd,#e9d5ff,#fde68a,#facc15);
  box-shadow:0 26px 60px -28px rgba(124,58,237,.7);
}
.wheel::after{content:"";position:absolute;inset:26%;border-radius:50%;background:var(--muted-bg)}
.wlbl{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--ff-h);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;z-index:2}
.wlbl.t{top:-26px;color:#fbbf24}
.wlbl.b{bottom:-26px;color:var(--accent-lt)}
.sci ul{list-style:none;margin-top:26px}
.sci li{display:flex;gap:15px;padding:15px 0;border-top:1px solid var(--line);font-size:16px;color:var(--fg-muted)}
.sci li:last-child{border-bottom:1px solid var(--line)}
.sci li svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--accent-lt)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--card);border-radius:var(--r-md);padding:34px 24px;
  box-shadow:inset 0 0 0 1px var(--line);
}
.plan.best{
  background:linear-gradient(168deg,#2a1e5c,#1d1540);
  box-shadow:inset 0 0 0 2px var(--accent),0 26px 58px -30px rgba(124,58,237,.8);
}
.plan-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--accent);color:#fff;font-family:var(--ff-h);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 15px;border-radius:99px;
}
.plan h3{font-family:var(--ff-h);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:16px}
.plan .p{font-size:40px;font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:6px}
.plan .per{font-size:14px;color:var(--fg-muted);margin-bottom:8px}
.plan .free{display:block;font-size:13.5px;font-weight:700;color:var(--accent-lt);margin-bottom:6px}
.plan .save{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ok);
  background:rgba(52,211,153,.12);padding:4px 10px;border-radius:99px;margin-bottom:22px}
.plan form{margin-top:auto;width:100%}
.plan .btn{width:100%}
.plan-note{margin-top:26px;text-align:center;font-size:14px;color:var(--fg-dim)}

/* faq */
.faq{max-width:820px;margin-inline:auto}
details{background:var(--card);border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:12px;overflow:hidden}
details[open]{box-shadow:inset 0 0 0 1px rgba(167,139,250,.35)}
summary{
  list-style:none;cursor:pointer;padding:20px 56px 20px 24px;position:relative;
  font-family:var(--ff-h);font-size:17px;font-weight:600;letter-spacing:-.015em;min-height:44px;
  display:flex;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--accent-lt);border-bottom:2.5px solid var(--accent-lt);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease);
}
details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
details p{padding:0 24px 22px;color:var(--fg-muted);font-size:16px}

/* final cta */
.final{position:relative;overflow:hidden;text-align:center;padding:100px 0}
.final::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(660px 380px at 50% 0%,rgba(124,58,237,.42),transparent 66%),var(--bg-deep)}
.final h2{margin-bottom:18px}
.final p{font-size:18px;color:var(--fg-muted);max-width:520px;margin:0 auto 34px}

/* footer */
footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:56px 0 120px;font-size:15px;color:var(--fg-dim)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.ft-grid h4{font-family:var(--ff-h);font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:16px}
.ft-grid ul{list-style:none;display:grid;gap:10px}
.ft-grid a:hover{color:#fff}
.ft-bot{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px}

/* sticky mobile bar */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(13,10,28,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line-str);
}
.sticky-bar .price-big{font-size:22px}
.sticky-bar .price-sub{font-size:12.5px}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero-in{gap:40px}
  .sci-in{gap:46px}
  .plans{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:900px){
  .hdr nav{display:none}
  .hero{padding:52px 0 64px}
  .hero-in{grid-template-columns:1fr;gap:40px}
  .hero-media{order:-1;max-width:400px;margin-inline:auto}
  .hero .lead{max-width:none}
  .sec{padding:68px 0}
  .steps{grid-template-columns:1fr}
  .sci-in{grid-template-columns:1fr;gap:44px}
  .plans{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .plan{padding:30px 20px}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  .hero-cta{gap:16px}
  .hero-cta .btn{width:100%}
  .plans{grid-template-columns:1fr;gap:26px}
  .plan{padding:32px 24px}
  .plan.best{order:-1}
  .sticky-bar{display:flex}
  /* comparison table -> stacked cards */
  .cmp-wrap{box-shadow:none;border-radius:0;overflow:visible}
  table,tbody,tbody tr,tbody td{display:block;width:auto}
  thead{display:none}
  tbody tr{
    background:var(--card);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--line);
  }
  tbody tr:last-child{margin-bottom:0}
  tbody td{padding:13px 16px;border-bottom:1px solid var(--line)}
  tbody tr td:last-child{border-bottom:0}
  tbody td.cell-lbl{
    background:var(--muted-bg);color:var(--fg);
    font-family:var(--ff-h);font-weight:700;font-size:15px;
  }
  tbody td[data-c]{display:flex;align-items:flex-start;gap:12px;font-size:15px}
  tbody td[data-c]::before{
    content:attr(data-c);flex:none;width:92px;padding-top:1px;
    font-family:var(--ff-h);font-size:11.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--fg-dim);
  }
  tbody td.us{background:rgba(124,58,237,.13)}
  tbody td.us::before{color:var(--accent-lt)}
  .mark{align-items:flex-start}
  .mark svg{margin-top:3px}
  .ft-grid{grid-template-columns:1fr;gap:30px}
  .gal-nav{display:none}
  .save-tag{top:20px;left:20px}
  .save-tag b{font-size:14px;padding:6px 9px}
  .save-tag span{font-size:9.5px;padding:6px 9px}
  .eyebrow{align-items:flex-start;line-height:1.4}
  .eyebrow svg{margin-top:4px}
}

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

/* ============ INNER PAGES (cart, checkout, order) ============ */
.page{padding:120px 0 90px}
.page h1{font-family:var(--ff-h);font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.page .sub{color:var(--fg-muted);margin-bottom:32px}
.panel{background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);padding:26px}
.panel + .panel{margin-top:18px}
.errors{list-style:none;background:rgba(179,50,47,.14);box-shadow:inset 0 0 0 1px rgba(255,120,110,.35);
  border-radius:var(--r-sm);padding:14px 18px;margin-bottom:22px;color:#ffb4ae;font-size:15px}
.line{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.line:last-of-type{border-bottom:0}
.line-main{flex:1;min-width:0}
.line-main b{display:block;font-family:var(--ff-h);font-weight:700}
.line-main small{color:var(--fg-dim)}
.line-price{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.line form button{background:none;border:0;color:var(--fg-dim);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;padding:6px}
.line form button:hover{color:#ff8577}

/* Legal pages: prose panels. Deliberately NOT .line, which is a flex cart row. */
.panel h2{font-family:var(--ff-h);font-size:19px;font-weight:700;letter-spacing:-.01em}
.panel p{line-height:1.75}
.panel a:not(.btn){color:var(--accent-lt);text-decoration:underline}
.legal-list{list-style:none;display:block}
.legal-list li{position:relative;padding:0 0 0 20px;margin-top:9px;line-height:1.7}
.legal-list li:first-child{margin-top:0}
.legal-list li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--line-str)}

.sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:20px;border-top:1px solid var(--line-str)}
.sum b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block;font-size:13px;font-weight:700;color:var(--fg-muted);margin-bottom:6px}
.form-grid input{
  width:100%;background:var(--muted-bg);color:var(--fg);font:inherit;font-size:16px;
  border:0;box-shadow:inset 0 0 0 1px var(--line-str);border-radius:var(--r-sm);padding:13px 14px;
}
.form-grid input:focus-visible{outline:2px solid var(--accent-lt);outline-offset:2px}
.form-grid input::placeholder{color:var(--fg-dim)}
.empty{text-align:center;padding:40px 0}
.empty p{color:var(--fg-muted);margin-bottom:22px}
.status-pill{display:inline-block;background:rgba(124,58,237,.18);color:var(--accent-lt);
  font-family:var(--ff-h);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:99px}
@media (max-width:640px){
  .page{padding:96px 0 70px}
  .form-grid{grid-template-columns:1fr}
}

/* ============ GUIDES (/rakovodstvo) ============ */
/* Long-form editorial. Narrower measure than the marketing sections: body copy
   is unreadable past ~75 characters a line, and .wrap is 1180px wide. */
.crumbs{font-size:14px;color:var(--fg-dim);margin-bottom:26px}
.crumbs a{color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{margin:0 7px;opacity:.5}

.art-head{max-width:760px;margin-bottom:40px}
.art-head h1{font-size:clamp(32px,4.4vw,52px);font-weight:800;margin-bottom:14px}
.art-lead{font-size:20px;color:var(--fg-muted);line-height:1.6;margin-top:16px}
.guide-meta{font-size:14px;color:var(--fg-dim);font-family:var(--ff-h);font-weight:600;
  letter-spacing:.02em}

.prose{max-width:760px}
.prose h2{font-size:clamp(23px,2.6vw,30px);font-weight:800;margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:16px;color:var(--fg-muted);line-height:1.78}
.prose p strong{color:var(--fg);font-weight:700}
.prose a{color:var(--accent-lt);text-decoration:underline;text-underline-offset:3px}
.prose ul:not(.legal-list){margin:0 0 16px;padding-left:22px;list-style:disc}
.prose ul:not(.legal-list) li{margin-bottom:9px;color:var(--fg-muted);line-height:1.72}
.prose ul:not(.legal-list) li::marker{color:var(--accent-lt)}
.prose em{font-style:normal;color:var(--fg);font-weight:600}
/* Articles can carry comparison tables; on narrow screens the wrapper scrolls
   rather than the table squashing to unreadable column widths. */
.prose table{width:100%;margin:0 0 20px;border-collapse:collapse;font-size:15px;
  display:block;overflow-x:auto}
.prose thead th{text-align:left;padding:10px 12px;font-weight:700;white-space:nowrap;
  border-bottom:1px solid var(--line)}
.prose tbody td{padding:10px 12px;color:var(--fg-muted);border-bottom:1px solid var(--line);
  vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
/* The row for our own product in a comparison table. Bold alone is invisible here
   because every cell already inherits the same muted colour, so the row also gets
   the accent tint and a left rule to pull the eye to it. */
.prose tbody tr.row-ours td{
  background:rgba(124,58,237,.14);color:var(--fg);font-weight:600;
}
.prose tbody tr.row-ours td:first-child{box-shadow:inset 3px 0 0 var(--accent-lt)}
.prose tbody tr.row-ours strong{color:var(--accent-lt)}
.prose .faq{margin-top:8px}
.prose .legal-list li{color:var(--fg-muted)}
.prose .legal-list a{color:var(--accent-lt);text-decoration:underline;word-break:break-word}
.art-disclaimer{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--fg-dim)}

.art-cta{
  max-width:760px;margin:48px 0 0;padding:30px;background:var(--card);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line);
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.art-cta h2{font-size:22px;font-weight:800;margin-bottom:8px}
.art-cta p{color:var(--fg-muted);font-size:16px;margin:0}
.art-cta > div{flex:1;min-width:260px}
.art-cta .btn{flex:none}

.art-related{margin-top:56px}
.art-related > h2{font-size:24px;font-weight:800;margin-bottom:22px}

.guide-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.guide-card{background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);
  padding:28px;transition:box-shadow .18s var(--ease)}
.guide-card:hover{box-shadow:inset 0 0 0 1px var(--line-str)}
.guide-card h2,.guide-card h3{font-size:20px;font-weight:700;line-height:1.25;margin-bottom:10px}
.guide-card a{display:block}
.guide-card a:hover{color:var(--accent-lt)}
.guide-card p{color:var(--fg-muted);font-size:15.5px;line-height:1.65}
.guide-card .guide-meta{margin-top:14px}

@media (max-width:640px){
  .art-cta{padding:24px}
  .art-cta .btn{width:100%}
  .guide-card{padding:22px}
}

/* Contextual links inside marketing copy — these sections have no link styling
   of their own, so an <a> would render as plain body text. */
.sec-head p a,.sci p a,.faq p a{color:var(--accent-lt);text-decoration:underline;text-underline-offset:3px}
.sec-head p a:hover,.sci p a:hover,.faq p a:hover{color:#fff}