/* Light look variant (30.10.2026). Active only with html[data-look="light"], preview via ?wyglad=jasny.
   Warm paper background, graphite text, accent kept for buttons; the hero product card and the CTA block stay dark
   as deliberate "objects" on the page. */
html[data-look="light"]:root{
  color-scheme:light;
  --bg:#F6F5F1;--bg-2:#FFFFFF;--bg-3:#ECEBE6;
  --ink:#1A1A1A;--soft:#4F504C;--faint:#6B6C67;
  --line:rgba(26,26,26,.1);--line-2:rgba(26,26,26,.2);
  --teal:var(--accent-ink);
  --deep:#ECEDE7; /* plain hex: main.js animates the body background to it */
}
html[data-look="light"] body{background:var(--bg);color:var(--ink);}

/* nav: the logo file is white, darken it */
html[data-look="light"] .brand-mark{filter:brightness(0);}
html[data-look="light"] .nav.scrolled{background:rgba(246,245,241,.78);}
@media (max-width:960px){html[data-look="light"] .nav-links{background:rgba(246,245,241,.98);}}

/* light sections become white cards on paper */
html[data-look="light"]:root .lt{--bg:#FFFFFF;--bg-2:#F6F5F1;background:#FFFFFF;}
html[data-look="light"]:root .lt .tool-vis{background:#F6F5F1;}

/* logos: dark instead of inverted white */
html[data-look="light"] .marquee img,
html[data-look="light"] .case-logo img,
html[data-look="light"] .quote figcaption img,
html[data-look="light"] .cs-logo img{filter:brightness(0);opacity:.7;}
html[data-look="light"] .marquee img.keep{filter:none;}

/* text details with hard-coded dark-theme colours */
html[data-look="light"] .kin-row.alt{-webkit-text-stroke:1.5px rgba(26,26,26,.45);}
@media (hover:hover){html[data-look="light"] .btn.ghost:hover{background:rgba(26,26,26,.05);}}
html[data-look="light"] .btn{box-shadow:0 0 0 1px rgba(0,0,0,.06) inset,0 8px 20px -12px rgba(0,0,0,.35);}
html[data-look="light"] .hero-bg::before{background:radial-gradient(1100px 620px at 50% 78%,color-mix(in srgb,var(--teal-fill) 12%,transparent),transparent 65%);}
html[data-look="light"] .tool,html[data-look="light"] .cs,html[data-look="light"] .box,html[data-look="light"] .note{box-shadow:0 0 0 1px var(--line) inset,0 18px 50px -36px rgba(0,0,0,.25);}

/* dark islands: hero product card, CTA, photo band keep the dark palette */
html[data-look="light"] .stage-card,
html[data-look="light"] .cta-in,
html[data-look="light"] .pilot{
  color-scheme:dark;
  --bg:#161616;--bg-2:#1C1D1E;--bg-3:#242627;
  --ink:#EDE8DF;--soft:#A9ABA6;--faint:#8F928D;
  --line:rgba(237,232,223,.12);--line-2:rgba(237,232,223,.22);
  --teal:color-mix(in srgb,var(--teal-fill) 40%,#FFFFFF);
  color:var(--ink);
}
html[data-look="light"] .cta-in{background:#141615;}
html[data-look="light"] .stage-card{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 50px 100px -50px rgba(0,0,0,.55);}

/* portrait caption sits on a dark gradient in both looks */
html[data-look="light"] .portrait figcaption{color:#EDE8DF;}
html[data-look="light"] .portrait figcaption span{color:#C9C9CE;}