:root[data-site-theme="light"]{color-scheme:light;--ink:#F4EFE7;--ink2:#FFFCF7;--ink3:#F0E8DD;--ivory:#1C1613;--tx2:#51463F;--tx3:#6B5F56;--clay:#8A5433;--gold:#7A6210;--slate:#2F5F5F;--glass:rgba(255,252,247,.85);--glass-hi:rgba(255,252,247,.95);--rim:rgba(55,40,27,.22);--rim-lit:rgba(55,40,27,.30);--shadow:0 22px 70px -34px rgba(62,42,21,.26),0 5px 19px -9px rgba(62,42,21,.17)}
html[data-site-theme="light"] body{background:#F4EFE7;color:#1C1613}
html[data-site-theme="light"] .sky{opacity:.12}
html[data-site-theme="light"] .grain{opacity:.025}
html[data-site-theme="light"] .nav{background:rgba(255,252,247,.92);border-color:rgba(55,40,27,.15);color:#1C1613}
html[data-site-theme="light"] .nav nav{color:#51463F}
html[data-site-theme="light"] .nav nav a:hover{color:#8A5433}
html[data-site-theme="light"] .nav .burger{background:rgba(28,22,19,.04);color:#1C1613}
html[data-site-theme="light"] .btn-solid{background:#1C1613;color:#FFFCF7}
html[data-site-theme="light"] .btn-ghost{color:#1C1613;border-color:rgba(28,22,19,.22)}
html[data-site-theme="light"] .glass{background:rgba(255,252,247,.80);border-color:rgba(28,22,19,.15);color:#1C1613}
html[data-site-theme="light"] footer{color:#51463F}
.site-theme-control{border:1px solid var(--rim,rgba(255,255,255,.3));color:var(--ivory,#F7F3EC);background:var(--glass,rgba(255,255,255,.12));display:inline-flex;gap:7px;align-items:center;justify-content:center;border-radius:100px;padding:9px 13px;cursor:pointer;font:600 12px/1.2 'Instrument Sans',system-ui,sans-serif;white-space:nowrap}
.site-theme-control:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html[data-site-theme="light"] .site-theme-control{color:#1C1613;background:#FFFCF7;border-color:#DACFC1}
@media(max-width:900px){.site-theme-control{padding:10px;width:42px;height:42px}.site-theme-control .theme-word{display:none}}


/* Light-mode correction for the four value cards beneath the product carousel.
   The default .rail div dark surface must not survive the theme switch. */
html[data-site-theme="light"] .rail.glass{
  background:#D8CDC1;
  border:1px solid #D8CDC1;
  color:#201A16;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 14px 36px -27px rgba(48,32,20,.28);
}
html[data-site-theme="light"] .rail.glass::before,
html[data-site-theme="light"] .rail.glass::after{
  content:none;
}
html[data-site-theme="light"] .rail.glass > div{
  background:#FCF9F4;
  padding:clamp(20px,3vw,28px);
  color:#201A16;
}
html[data-site-theme="light"] .rail.glass > div b{
  color:#201A16;
  line-height:1.08;
}
html[data-site-theme="light"] .rail.glass > div span{
  color:#51463B;
  font-size:clamp(14px,1.1vw,15px);
  line-height:1.62;
  font-weight:500;
}
@media (prefers-contrast:more){
  html[data-site-theme="light"] .rail.glass > div span{color:#302820}
}


/* Carousel accessibility: light-mode surface, controls, and captions */
html[data-site-theme="light"] .motion-stage{
  background:linear-gradient(145deg,#FDF9F1 0%,#F3EDE4 75%,#F5EEDD 100%);
  border-color:#D7CCBE;
  box-shadow:0 14px 36px -24px rgba(50,35,22,.22);
}
html[data-site-theme="light"] .motion-toolbar{
  color:#4C4238;
  border-bottom-color:#D4C8B9;
}
html[data-site-theme="light"] .motion-tabs button{
  background:#FCF9F4;
  color:#201A16;
  border-color:#CFC3B4;
  font-weight:600;
  box-shadow:0 2px 7px rgba(51,37,25,.045);
}
html[data-site-theme="light"] .motion-tabs button i{
  color:#6D5C4B;
}
html[data-site-theme="light"] .motion-tabs button[aria-current="true"]{
  background:#E9D6AA;
  color:#241C12;
  border-color:#B9954E;
  box-shadow:inset 0 0 0 1px rgba(143,101,27,.08);
}
html[data-site-theme="light"] .motion-tabs button[aria-current="true"] i{color:#70521D}
html[data-site-theme="light"] .motion-tabs button:hover,
html[data-site-theme="light"] .motion-tabs button:focus-visible{
  color:#17120E;
  border-color:#96712F;
  background:#F1E4CC;
}
html[data-site-theme="light"] .motion-arrows button{
  background:#FCF9F4;
  border-color:#CABDAF;
  color:#201A16;
}
html[data-site-theme="light"] .motion-arrows button:hover,
html[data-site-theme="light"] .motion-arrows button:focus-visible{
  background:#E9D6AA;
  color:#201A16;
  border-color:#9A752E;
}
html[data-site-theme="light"] .motion-arrows span{color:#55493C;font-weight:600}
html[data-site-theme="light"] .motion-progress{background:#D9CDBB}
html[data-site-theme="light"] .motion-progress span{
  background:linear-gradient(90deg,#86601F,#B08C3D);
  box-shadow:none;
}
/* The screenshot frame remains intentionally dark in both themes. */
html[data-site-theme="light"] .motion-screen-window{
  background:#171310;
  border-color:#4D4135;
}
html[data-site-theme="light"] .motion-slide figcaption strong{color:#FFFCF7}
html[data-site-theme="light"] .motion-slide figcaption span{color:#E2C47E}
html[data-site-theme="light"] .motion-wordmark{color:#201A16}
html[data-site-theme="light"] .motion-wordmark b,
html[data-site-theme="light"] .motion-live{color:#594B3D}
html[data-site-theme="light"] .motion-wordmark i{color:#77581A;border-color:#BCA068}
html[data-site-theme="light"] .motion-controls button:focus-visible{
  outline:2px solid #886523;
  outline-offset:3px;
}

/* The light theme darkens --gold to #7A6210 for contrast against paper, but
   .btn-gold keeps the near-black text designed for the bright #C9A84C - the
   measured result on every gold CTA was 3.12:1 where 4.5:1 is required.
   Light text on the dark gold measures 5.86:1, and the hover stays 4.7:1.
   Scoped to the light theme; the base theme's bright gold already passes. */
:root[data-site-theme="light"] .btn-gold{color:#FFFCF7}
:root[data-site-theme="light"] .btn-gold:hover{background:#8A6F15;color:#FFFCF7}
:root[data-site-theme="light"] .v4-plan-top em{color:#FFFCF7}