/* ==========================================================================
   Lactra — design system
   Tokens first, then layout, then components. Light and dark are both
   explicit: a bare :root light palette, redefined under prefers-color-scheme
   (guarded so an explicit light choice wins) and again under [data-theme].
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink:#101a15; --ink2:#2b3a33; --muted:#5c6b64; --faint:#8a978f;
  --bg:#fbfaf7; --surf:#fff; --surf2:#f4f2ec; --line:#e3e0d7; --line2:#d3cfc3;
  --brand:#0e6b4c; --brandd:#0a5540; --brandl:#e6f2ec; --accent:#c98a1e; --accentl:#fbf1dd;
  --ok:#0e6b4c; --warn:#b0761e; --bad:#b04a3a;
  --on-brand:#fff;
  --r:10px; --rl:16px;
  --sh:0 1px 2px rgba(16,26,21,.05), 0 8px 24px -12px rgba(16,26,21,.14);
  --shl:0 2px 4px rgba(16,26,21,.05), 0 22px 50px -22px rgba(16,26,21,.22);
  --max:1140px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#eef2ef; --ink2:#c8d2cc; --muted:#96a29b; --faint:#6f7c75;
    --bg:#0c1210; --surf:#131b17; --surf2:#182220; --line:#26312c; --line2:#33413a;
    --brand:#4cc194; --brandd:#6bd4ab; --brandl:#132a22; --accent:#e0a94a; --accentl:#2a2113;
    --ok:#4cc194; --warn:#e0a94a; --bad:#e08472;
    --on-brand:#08130e;
    --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shl:0 2px 4px rgba(0,0,0,.4), 0 22px 50px -22px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink:#eef2ef; --ink2:#c8d2cc; --muted:#96a29b; --faint:#6f7c75;
  --bg:#0c1210; --surf:#131b17; --surf2:#182220; --line:#26312c; --line2:#33413a;
  --brand:#4cc194; --brandd:#6bd4ab; --brandl:#132a22; --accent:#e0a94a; --accentl:#2a2113;
  --ok:#4cc194; --warn:#e0a94a; --bad:#e08472;
  --on-brand:#08130e;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shl:0 2px 4px rgba(0,0,0,.4), 0 22px 50px -22px rgba(0,0,0,.7);
  color-scheme: dark;
}

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

img { max-width:100%; display:block; }
a { color:inherit; }
svg { flex:none; }

h1,h2,h3,h4 { margin:0; line-height:1.14; letter-spacing:-.022em; font-weight:640; text-wrap:balance; }
h1 { font-size:clamp(2rem,1.3rem + 2.9vw,3.6rem); letter-spacing:-.032em; }
h2 { font-size:clamp(1.55rem,1.12rem + 1.8vw,2.4rem); letter-spacing:-.028em; }
h3 { font-size:1.14rem; letter-spacing:-.016em; }
h4 { font-size:1rem; }
p { margin:0 0 1.05em; }
p.last, p:last-child { margin-bottom:0; }
strong { font-weight:660; }

.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
.narrow { max-width:768px; }
.mid { max-width:920px; }
section { padding:72px 0; }
@media (max-width:640px) { section { padding:52px 0; } }

.lede { font-size:clamp(1.04rem,.98rem + .3vw,1.26rem); color:var(--muted); line-height:1.55; }
.eyebrow { font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); margin:0 0 14px; }
.muted { color:var(--muted); } .small { font-size:.88rem; } .tiny { font-size:.79rem; }
.alt { background:var(--surf2); }
.sub { margin:0 0 26px; font-size:1.3rem; }

/* Accessibility ---------------------------------------------------------- */
.skip {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:var(--on-brand); padding:12px 18px;
  border-radius:0 0 var(--r) 0; font-weight:640; text-decoration:none;
}
.skip:focus { left:0; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Header ----------------------------------------------------------------- */
header.site {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav { display:flex; align-items:center; gap:24px; height:64px; }
.logo { display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.12rem; letter-spacing:-.03em; text-decoration:none; color:var(--ink); }
.nav .primary ul { display:flex; gap:22px; list-style:none; margin:0; padding:0; font-size:.92rem; }
.nav a { text-decoration:none; color:var(--ink2); transition:color .15s; }
.nav a:hover, .nav a.on { color:var(--brand); }
.nav .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.navlink { font-size:.9rem; }
.nav a.btn-p, .nav a.btn-p:hover { color:var(--on-brand); }

.themebtn, .menubtn {
  display:grid; place-items:center; width:34px; height:34px; padding:0;
  background:transparent; border:1px solid var(--line2); border-radius:9px;
  color:var(--ink2); cursor:pointer;
}
.themebtn:hover, .menubtn:hover { border-color:var(--muted); color:var(--brand); }
.menubtn { display:none; }
.bars { display:grid; gap:4px; }
.bars i { display:block; width:15px; height:2px; background:currentColor; border-radius:2px; transition:transform .18s, opacity .18s; }
.menubtn[aria-expanded="true"] .bars i:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menubtn[aria-expanded="true"] .bars i:nth-child(2) { opacity:0; }
.menubtn[aria-expanded="true"] .bars i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

nav.mobile { border-top:1px solid var(--line); background:var(--bg); }
nav.mobile ul { list-style:none; margin:0; padding:8px 0 18px; display:grid; gap:2px; }
nav.mobile a { display:block; padding:11px 2px; text-decoration:none; color:var(--ink2); font-size:1.02rem; font-weight:560; border-bottom:1px solid var(--line); }
nav.mobile a:hover { color:var(--brand); }
[hidden] { display:none !important; }

@media (max-width:940px) {
  .nav .primary, .navlink { display:none; }
  .menubtn { display:grid; }
}
@media (max-width:420px) {
  .nav .right .btn { display:none; }
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--r); font-size:.95rem; font-weight:600;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .15s, border-color .15s, transform .08s;
  white-space:nowrap; font-family:inherit;
}
.btn:active { transform:translateY(1px); }
.btn-p { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.btn-p:hover { background:var(--brandd); border-color:var(--brandd); }
.btn-s { background:var(--surf); color:var(--ink); border-color:var(--line2); }
.btn-s:hover { border-color:var(--muted); }
.btn-sm { padding:9px 16px; font-size:.88rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.55; pointer-events:none; }
.btns { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; }

/* Hero ------------------------------------------------------------------- */
.hero { padding:80px 0 62px; position:relative; overflow:hidden; }
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(88ch 44ch at 76% -16%, var(--brandl), transparent 66%);
}
.hero-tight { padding:44px 0 46px; }
.hero h1 { max-width:19ch; }
.hero .lede { max-width:57ch; margin-top:20px; }
.trust { margin:20px 0 0; font-size:.84rem; color:var(--faint); display:flex; flex-wrap:wrap; gap:6px 12px; }

/* Hero media panel ------------------------------------------------------- */
/* Only the home page uses this. The two-column grid collapses to one below
   940px, with the text first — it carries the message and it is the cheaper
   thing to paint. */
.hero-media .herogrid {
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:48px;
  align-items:center;
}
.hero-media .herotext .lede { max-width:48ch; }
.hero-media h1 { max-width:15ch; }

.heromedia {
  position:relative;
  margin:0;
  aspect-ratio:16 / 9;
  border-radius:var(--rl);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shl);
  background:var(--surf2);
}
.heromedia img,
.heromedia video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.heromedia video { z-index:1; }
/* The still is only replaced once the video is genuinely playing, so a blocked
   or slow video never shows a gap. */
.heromedia img { transition:opacity .4s ease; }
.heromedia.playing img { opacity:0; }

/* The artwork is brighter than anything else on the site. In dark mode it
   would glare next to a near-black page, so take the edge off it. */
:root[data-theme="dark"] .heromedia img,
:root[data-theme="dark"] .heromedia video { filter:saturate(.86) brightness(.82); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .heromedia img,
  :root:not([data-theme="light"]) .heromedia video { filter:saturate(.86) brightness(.82); }
}

/* WCAG 2.2.2 — a looping animation needs a visible way to stop it. */
.mediabtn {
  position:absolute;
  z-index:2;
  right:10px;
  bottom:10px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  background:rgba(16,26,21,.44);
  color:#fff;
  cursor:pointer;
  opacity:.55;
  transition:opacity .15s, background .15s;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.heromedia:hover .mediabtn,
.mediabtn:focus-visible { opacity:1; }
.mediabtn:hover { background:rgba(16,26,21,.66); opacity:1; }

@media (max-width:940px) {
  .hero-media .herogrid { grid-template-columns:1fr; gap:34px; }
  .hero-media h1, .hero-media .herotext .lede { max-width:none; }
}
@media (max-width:560px) {
  .hero-media .herogrid { gap:28px; }
}

.proof {
  display:flex; flex-wrap:wrap; margin-top:48px; border:1px solid var(--line);
  border-radius:var(--rl); background:var(--surf); overflow:hidden; box-shadow:var(--sh);
}
.proof div { flex:1 1 158px; padding:19px 22px; border-right:1px solid var(--line); }
.proof div:last-child { border-right:0; }
.proof b { display:block; font-size:1.5rem; font-weight:680; letter-spacing:-.03em; line-height:1.15; }
.proof span { font-size:.82rem; color:var(--muted); }
@media (max-width:620px) {
  .proof div { border-right:0; border-bottom:1px solid var(--line); }
  .proof div:last-child { border-bottom:0; }
}

/* Grid and cards --------------------------------------------------------- */
.grid { display:grid; gap:20px; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); }
.g4 { grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); }
.card { background:var(--surf); border:1px solid var(--line); border-radius:var(--rl); padding:25px 23px; }
.card h3 { margin-bottom:9px; }
.card p { margin:0 0 .8em; color:var(--muted); font-size:.94rem; line-height:1.55; }
.card p:last-child { margin-bottom:0; }
.card .ic { width:34px; height:34px; border-radius:9px; background:var(--brandl); color:var(--brand); display:grid; place-items:center; margin-bottom:14px; font-size:17px; }
a.card, .card.lk {
  text-decoration:none; display:block;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
a.card:hover, .card.lk:hover { border-color:var(--brand); box-shadow:var(--sh); transform:translateY(-2px); }
a.card .arr { color:var(--brand); display:inline-block; transition:transform .15s; }
a.card:hover .arr { transform:translateX(3px); }
.accentcard { background:var(--brandl); border-color:color-mix(in srgb, var(--brand) 22%, transparent); }
.accentcard p { color:var(--ink2); }
.hd { max-width:64ch; margin-bottom:40px; }
.hd p.lede { margin:16px 0 0; }

/* Definition rows -------------------------------------------------------- */
.rows { border-top:1px solid var(--line); }
.row {
  border-bottom:1px solid var(--line); padding:29px 0;
  display:grid; grid-template-columns:minmax(178px,1fr) 2.1fr; gap:13px 42px; align-items:start;
}
.row h3 { padding-top:2px; }
.row p { color:var(--muted); font-size:.95rem; }
@media (max-width:760px) { .row { grid-template-columns:1fr; gap:9px; } }

/* Tables ----------------------------------------------------------------- */
.tw { overflow-x:auto; border:1px solid var(--line); border-radius:var(--rl); background:var(--surf); -webkit-overflow-scrolling:touch; }
table { border-collapse:collapse; width:100%; font-size:.92rem; min-width:580px; }
th, td { padding:13px 17px; text-align:left; border-bottom:1px solid var(--line); }
thead th { font-size:.765rem; letter-spacing:.055em; text-transform:uppercase; color:var(--muted); font-weight:660; background:var(--surf2); white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
td.c, th.c { text-align:center; }
.yes { color:var(--ok); font-weight:700; }
.no { color:var(--faint); }
.hl { background:var(--brandl); }

/* FAQ -------------------------------------------------------------------- */
details { border-bottom:1px solid var(--line); }
details summary { cursor:pointer; padding:18px 34px 18px 0; font-weight:600; font-size:1.01rem; list-style:none; position:relative; }
details summary::-webkit-details-marker { display:none; }
details summary::after {
  content:""; position:absolute; right:6px; top:25px; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .18s;
}
details[open] summary::after { transform:rotate(-135deg); top:28px; }
details .a { padding:0 40px 20px 0; color:var(--muted); font-size:.95rem; }

/* CTA band --------------------------------------------------------------- */
.band { background:var(--brand); color:var(--on-brand); border-radius:var(--rl); padding:50px 42px; text-align:center; }
.band h2 { color:inherit; }
.band p { color:color-mix(in srgb, var(--on-brand) 87%, transparent); max-width:52ch; margin:16px auto 0; }
.band .btns { justify-content:center; }
.band .btn-p { background:var(--bg); color:var(--brand); border-color:var(--bg); }
.band .btn-p:hover { background:var(--surf2); border-color:var(--surf2); }
.band .btn-s { background:transparent; color:var(--on-brand); border-color:color-mix(in srgb, var(--on-brand) 42%, transparent); }
.band .btn-s:hover { border-color:var(--on-brand); background:color-mix(in srgb, var(--on-brand) 9%, transparent); }
@media (max-width:560px) { .band { padding:36px 22px; } }

/* Quote ------------------------------------------------------------------ */
blockquote {
  margin:0; background:var(--surf); border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:var(--rl); padding:29px 30px;
}
blockquote p { font-size:1.13rem; line-height:1.5; letter-spacing:-.012em; }
blockquote cite { font-style:normal; font-size:.89rem; color:var(--muted); display:block; margin-top:6px; }
blockquote cite b { color:var(--ink); }

/* Calculators and forms -------------------------------------------------- */
.calc { background:var(--surf); border:1px solid var(--line2); border-radius:var(--rl); padding:26px; box-shadow:var(--shl); }
@media (max-width:560px) { .calc { padding:20px 17px; } }
.fields { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
label { display:block; font-size:.83rem; font-weight:600; color:var(--ink2); margin:0 0 6px; }
input, select, textarea {
  width:100%; padding:11px 13px; border:1px solid var(--line2); border-radius:9px;
  background:var(--bg); color:var(--ink); font:inherit; font-size:.95rem;
}
textarea { min-height:96px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand); outline-offset:-1px; border-color:var(--brand); }
input:invalid:not(:placeholder-shown) { border-color:var(--bad); }
.res { margin-top:22px; border-top:1px solid var(--line); padding-top:22px; }
.res-main { background:var(--brandl); border-radius:var(--r); padding:18px 20px; margin-bottom:16px; }
.res-main .k { font-size:.79rem; text-transform:uppercase; letter-spacing:.09em; color:var(--brand); font-weight:700; }
.res-main .v { font-size:1.9rem; font-weight:680; letter-spacing:-.03em; line-height:1.2; margin-top:4px; }
.res-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.res-item { border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; }
.res-item .k { font-size:.755rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:660; }
.res-item .v { font-size:1.06rem; font-weight:640; margin-top:3px; letter-spacing:-.015em; }
.res-item .h { margin-top:3px; }

.seg { display:inline-flex; border:1px solid var(--line2); border-radius:9px; overflow:hidden; background:var(--bg); }
.seg button { border:0; background:transparent; padding:9px 15px; font:inherit; font-size:.88rem; font-weight:600; color:var(--muted); cursor:pointer; }
.seg button.on { background:var(--brand); color:var(--on-brand); }

.note {
  background:var(--accentl); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius:var(--r); padding:15px 17px; font-size:.89rem; color:var(--ink2);
}
.note b { color:var(--ink); }
.note a { color:var(--brand); }
.pill { display:inline-block; background:var(--brandl); color:var(--brand); font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:99px; letter-spacing:.03em; }

.formnote { font-size:.83rem; color:var(--muted); margin-top:14px; }
.formmsg { margin-top:16px; border-radius:var(--r); padding:14px 16px; font-size:.9rem; display:none; }
.formmsg.ok { display:block; background:var(--brandl); color:var(--ink2); border:1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.formmsg.err { display:block; background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--ink2); border:1px solid color-mix(in srgb, var(--bad) 34%, transparent); }

/* Breadcrumb ------------------------------------------------------------- */
.crumb { font-size:.83rem; color:var(--faint); padding:16px 0 0; }
.crumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; }
.crumb li + li::before { content:"›"; margin-right:6px; color:var(--line2); }
.crumb a { text-decoration:none; }
.crumb a:hover { color:var(--brand); }

/* Footer ----------------------------------------------------------------- */
footer.site { border-top:1px solid var(--line); background:var(--surf2); padding:54px 0 32px; font-size:.89rem; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(156px,1fr)); gap:30px; }
.fh { font-size:.765rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; font-weight:660; }
footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
footer a { color:var(--muted); text-decoration:none; }
footer a:hover { color:var(--brand); }
.fbot { margin-top:42px; padding-top:21px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:var(--faint); font-size:.835rem; }
.fmeta { display:flex; flex-wrap:wrap; gap:14px; }

/* Error page ------------------------------------------------------------- */
.err404 { text-align:center; padding:90px 0 80px; }
.err404 .code { font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); }
.err404 h1 { max-width:none; margin:14px auto 0; }
.err404 .lede { margin:18px auto 0; max-width:52ch; }
.err404 .btns { justify-content:center; }

/* Print ------------------------------------------------------------------ */
@media print {
  header.site, footer.site, .band, .skip, .btns { display:none !important; }
  body { font-size:12pt; background:#fff; color:#000; }
  .hero::after { display:none; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}