/* Semi-light header/footer for the light (VNCE) pages. Ported verbatim from
   handoff-2026/assets/base-2026.css:507-725 (2026-09-22). Scoped to
   html[data-hdl-theme=semilight], which functions.php sets only on pages whose
   Page chrome > Style is "vnce". */
/* ============================================================
   SEMI-LIGHT MODE — html[data-hdl-theme="semilight"]
   Dark stays the primary theme. Semi-light lifts the reading
   surface into the grey band palette the site already owns
   (.band / .st / .claims: #f7f8fa canvas, black type, black
   highlight blocks, blue squares) and keeps the brand's black
   moments: heroes, the scroll story and the footer.
   Toggle: .mh-theme in the header (assets/base-2026.js).
   ============================================================ */
html[data-hdl-theme=semilight]{
  color-scheme:light;
  --canvas:#eef1f5;--panel:#f7f8fa;--dotline:#b5bcc6;--chip:#e4e7ec;--blue-ink:#1668cf;
  --ink:#0a0c10;--ink-2:#1b2027;--slate:#5c6572;--slate-2:#8d949c;
  --line:#d7dbe2;--line-2:#e4e7ec;--paper:#fff;--paper-2:#f7f8fa;--paper-3:#e8ebf0;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);--shadow-md:0 6px 18px rgba(16,24,40,.08);--shadow-lg:0 20px 50px rgba(16,24,40,.12);

  /* ---- base ---- */
  & body{background:var(--canvas);color:var(--ink)}
  & ::selection{background:#298DFF;color:#fff}

  & .surface-2{background:var(--panel)}
  & .surface-3{background:var(--paper-3)}
  & .band,& .st,& .claims{background:var(--panel)}

  /* ---- header ---- */
  & .mh{color:var(--ink)}
  & .mh-bar{background:#fff;border-color:var(--line)}
  & .mh-brand{color:var(--ink)}
  & .mh-tab{color:#20242c}
  & .mh-tab .pm{background:#e9ecf1;color:#20242c}
  & .mh-tab:hover .pm{background:#dbe0e8}
  & .mh-tab[aria-expanded=true]{color:#000}
  & .mh-act .lang{color:#8d949c}
  & .mh-act .mh-theme{color:#6b7280}
  & .mh-act .mh-theme:hover{color:#000}
  & .mh-act .mh-theme .i-sun{display:none}
  & .mh-act .mh-theme .i-moon{display:block}
  & .mh-burger{background:#f2f4f7;border-left-color:var(--line);color:#0a0c10}
  & .mega{background:var(--line);border-color:var(--line)}
  & .mega-col,& .mega-note,& .mh-sheet,& .mega-t,& .mega-priser{background:#fff}
  & .mega-col>h4{background:#f2f4f7;color:#6b7280}
  & .mega-col>h4::after{color:#b5bcc6}
  & .mega-col a{color:#20242c}
  & .mega-col a:hover{background:rgba(41,141,255,.07)}
  & .mega-col a:hover b{color:var(--blue-ink)}
  & .mega-col a span,& .mega-note p{color:#5c6572}
  & .mega-t{color:#000}
  & .mega-priser{color:#000;border-top-color:var(--line)}
  & .mh-sub{background:#fff;border-color:var(--line)}
  & .mh-sub a{color:#5c6572}
  & .mh-sub a:hover{color:#000}

  /* ---- section heads & statements ---- */
  & main h2.h2,& .sec-title,& .sec-sub,& .duo-h,& .duo-eb,& .legal-hero h1,& .legal-row h2,& .rail h3,& .inds h3,& .starts h3,& .bl-card h3,& .faq summary,& .stat .num{color:var(--ink)}
  & .sec-chip{background:var(--chip);color:#000}
  & .sec-rule{border-top-color:var(--dotline)}
  & .sec-title .hl,& .stmt-dark .hlw{background:#0a0c10;color:#fff}
  & .sec-title .hl .sq{background:#298DFF;color:#fff}
  & .stmt-dark{color:#8d949c}
  & .stmt-dark .hlw .sq{background:#298DFF;color:#fff}

  /* ---- content modules ---- */
  & .promo a{background:linear-gradient(120deg,rgba(41,141,255,.13),#fff 45%,rgba(41,141,255,.09));border-color:var(--line)}
  & .promo b{color:#000}
  & .promo span{color:#5c6572}
  & .promo .lbl{color:var(--blue-ink);border-right-color:var(--line)}
  & .promo .arw{border-color:var(--line);color:#0a0c10}
  & .rail article{background:#fff;border-color:var(--line)}
  & .rail article:hover{background:rgba(41,141,255,.06);border-color:rgba(41,141,255,.45)}
  & .rail .n,& .inds .go{color:var(--blue-ink)}
  & .rail .k{color:#6b7280}
  & .rail p,& .inds li,& .starts p,& .bl-card p{color:#5c6572}
  & .rail-nav button{background:#fff;border-color:var(--line);color:#0a0c10}
  & .rail-nav button:hover{background:rgba(41,141,255,.1);border-color:rgba(41,141,255,.45)}
  & .duo{--dot:#b5bcc6}
  & .duo-card{background:#fff}
  & .duo-card:hover{background:#f2f4f7}
  & .duo-card p{color:var(--ink)}
  & .inds a{background:#fff}
  & .inds a:hover{background:rgba(41,141,255,.06)}
  & .inds li{border-top-color:var(--line-2)}
  & .bl-card{background:#fff;border-color:var(--line)}
  & .bl-card:hover{background:#f7f8fa}
  & .bl-media{background:#e9ecf1;--slot-bg:#e9ecf1}
  & .bl-meta{color:#8d949c}
  & .bl-by{border-top-color:var(--dotline);color:#5c6572}
  & .faq details{border-bottom-color:var(--dotline)}
  & .faq summary .pm{border-color:var(--line);color:#5c6572}
  & .faq p{color:#5c6572}
  & .illu{background:var(--panel);border-color:var(--line)}
  & .illu .fl{stroke:rgba(10,12,16,.14)}
  & .illu .dim{stroke:rgba(10,12,16,.3)}
  & .cta-band h2,& .cta-band .sec-title{color:var(--ink)}
  & .cta-band .lead,& .cta-band p{color:#5c6572}
  & .cta-band .btn-lime-outline{color:var(--blue-ink);border-color:rgba(41,141,255,.5)}
  & .cta-band .btn-lime-outline:hover{color:var(--blue-ink);background:rgba(41,141,255,.1)}

  /* ---- legal / doc pages ---- */
  & .legal-row{border-top-color:var(--dotline)}
  & .legal-row:last-child{border-bottom-color:var(--dotline)}
  & .legal-k{color:#6b7280}
  & .legal-body p,& .legal-body li,& .legal-body th,& .legal-body td{color:#5c6572}
  & .legal-body strong,& .legal-body h3,& .legal-body th{color:#000}
  & .legal-body a{color:var(--blue-ink)}
  & .legal-body th,& .legal-body td{border-bottom-color:var(--dotline)}
  & .doc-toc{background:#fff;border-color:var(--line)}
  & .doc-toc a{color:var(--ink)}
  & .doc-toc a:hover,& .doc-section a{color:var(--blue-ink)}
  & .doc-table th{background:#f2f4f7}
  & .doc-callout{background:rgba(41,141,255,.08);border-color:rgba(41,141,255,.25)}
  & .doc-callout p,& .doc-callout .ic{color:#fff}
  & .doc-section strong,& .doc-table td strong,& .incident .what strong{color:var(--ink)}

  /* ---- controls ---- */
  & .btn-ghost{color:var(--ink);border-color:var(--line);background:#fff}
  & .btn-ghost:hover{border-color:#0a0c10;background:#f2f4f7}
  & .btn-dark,& .btn-light{background:#0a0c10;color:#fff;border-color:#0a0c10}
  & .btn-dark:hover,& .btn-light:hover{background:#1b2027}
  & .btn-lime-outline{color:var(--blue-ink);border-color:rgba(41,141,255,.5);background:transparent}
  & .btn-lime-outline:hover{background:rgba(41,141,255,.1)}
  & .btn-link{color:var(--blue-ink)}
  & .pill{background:#fff;border-color:var(--line);color:#5c6572}
  & .pill .dot{background:#298DFF;box-shadow:0 0 0 3px rgba(41,141,255,.18)}
  & .pill-mint{background:rgba(41,141,255,.1);border-color:rgba(41,141,255,.28);color:var(--blue-ink)}
  & .tag{background:var(--chip);color:#5c6572}
  & .kbd{background:#fff;border-color:var(--line)}
  & .card .ic,& .check-list .ck{background:rgba(41,141,255,.1);border-color:rgba(41,141,255,.25);color:var(--blue-ink)}
  & .form-card{background:#fff;border-color:var(--line)}
  & .field input,& .field select,& .field textarea{background:#fff;border-color:var(--line);color:var(--ink)}
  & .field input::placeholder,& .field textarea::placeholder{color:#8d949c}
  & .field select option{background:#fff;color:var(--ink)}
  & .compare{background:#fff}
  & .compare-head{background:#f2f4f7}
  & .compare-col-us{background:linear-gradient(180deg,rgba(41,141,255,.1),rgba(41,141,255,.04));border-inline-color:rgba(41,141,255,.25)}
  & .compare-row.compare-head .compare-col-us{border-bottom-color:rgba(41,141,255,.25)}
  & .tick.yes{background:#298DFF;color:#fff}
  & .tick.no{background:var(--chip);color:#8d949c}
  & .cookie-toggle{background:var(--chip);border-color:var(--line)}
  & .cookie-toggle.on{background:#298DFF;border-color:#298DFF}
  & .status-banner{background:#e9f7ef;border-color:#c6e5d3}
  & .status-banner .st-t{color:var(--ink)}
  & .status-banner .st-d,& .svc .svc-up{color:#17724a}
  & .svc .pill-op,& .incident .badge-res{color:#17724a;background:#e9f7ef;border-color:#c6e5d3}
  & .logo-word{color:#8d949c}
  & .logo-word:hover{color:#000}
  & image-slot{--slot-fg:rgba(10,12,16,.5);--slot-fg-hover:rgba(10,12,16,.8);--slot-bg:rgba(10,12,16,.05);--slot-ring:rgba(10,12,16,.22)}

  /* ---- the black moments stay black ---- */
  & .hero-forest,& .h26,& .hx,& .story{color:#eef2ef}
  & .hero-forest .lead,& .hero-forest .muted,& .hero-forest .breadcrumbs,& .h26 .breadcrumbs,& .story-cap{color:#c8cdd6}
  & .hero-forest .breadcrumbs a:hover,& .h26 .breadcrumbs a:hover{color:#7cc4ff}
  & .hero-forest .check-list li{color:#eef2ef}
  & .hero-forest .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#eef2ef}
  & .hero-forest .tag{background:rgba(255,255,255,.08);color:#c8cdd6}
  & .hero-forest .btn-ghost,& .h26 .btn-ghost,& .hx .btn-ghost{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.05)}
  & .hero-forest .btn-ghost:hover,& .h26 .btn-ghost:hover,& .hx .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}
  & .surface-dark,& .surface-forest,& .surface-lime{color:#eef2ef}
  & .surface-dark .sec-title,& .surface-forest .sec-title,& .surface-dark .sec-sub,& .surface-forest .sec-sub,& .surface-dark h2,& .surface-forest h2,& .surface-dark h3,& .surface-forest h3,& .surface-dark .stat .num,& .surface-forest .stat .num{color:#fff}
  & .surface-dark .card,& .surface-forest .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
  & .surface-dark .card h3,& .surface-forest .card h3{color:#fff}
  & .surface-dark .card p,& .surface-forest .card p,& .surface-dark .check-list li,& .surface-forest .check-list li{color:rgba(255,255,255,.76)}
  & .surface-dark .btn-ghost,& .surface-forest .btn-ghost{color:#fff;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06)}
  & .story-frame{border-color:#2b3037}
  & .story-lab{color:#8d949c}
}


/* ---- semi-light: overrides for the !important layers in styles.css ---- */
html[data-hdl-theme=semilight] .btn:not(.btn-primary):not(.mh-cta){color:var(--ink)!important;border-color:rgba(10,12,16,.24)}
html[data-hdl-theme=semilight] .btn:not(.btn-primary):not(.mh-cta):hover{background:#0a0c10;border-color:#0a0c10;color:#fff!important}
html[data-hdl-theme=semilight] .btn-ghost{color:var(--ink)!important;border-color:rgba(10,12,16,.24)}
html[data-hdl-theme=semilight] .btn.btn-light:not(.btn-primary):not(.mh-cta),html[data-hdl-theme=semilight] .btn.btn-dark:not(.btn-primary):not(.mh-cta){background:#0a0c10!important;border-color:#0a0c10!important;color:#fff!important}
html[data-hdl-theme=semilight] .btn.btn-light:not(.btn-primary):hover,html[data-hdl-theme=semilight] .btn.btn-dark:not(.btn-primary):hover{background:#1b2027!important;border-color:#1b2027!important;color:#fff!important}
html[data-hdl-theme=semilight] .btn-lime-outline,html[data-hdl-theme=semilight] .btn-link{color:#1668cf!important}
html[data-hdl-theme=semilight] .btn-lime-outline{border-color:rgba(41,141,255,.5)}
html[data-hdl-theme=semilight] .btn-lime-outline:hover{background:rgba(41,141,255,.1);border-color:#298DFF;color:#1668cf!important}
html[data-hdl-theme=semilight] .card,html[data-hdl-theme=semilight] .plan{background:#fff!important}
html[data-hdl-theme=semilight] .card-hover:hover,html[data-hdl-theme=semilight] .card-dark:hover{background:#fff!important;border-color:rgba(10,12,16,.22)!important}
html[data-hdl-theme=semilight] .card-dark,html[data-hdl-theme=semilight] .glass-quote{background:#fff!important}
html[data-hdl-theme=semilight] .tick.yes{background:#298DFF!important;color:#fff!important}
html[data-hdl-theme=semilight] .toggle-bill{background:#fff;border-color:var(--line)}
html[data-hdl-theme=semilight] .toggle-bill button{color:#5c6572}
html[data-hdl-theme=semilight] .toggle-bill button.active{background:#0a0c10!important;color:#fff!important}
html[data-hdl-theme=semilight] .step .n,html[data-hdl-theme=semilight] .mig-step .num,html[data-hdl-theme=semilight] .flow-step .n,html[data-hdl-theme=semilight] .tl-step .dot,html[data-hdl-theme=semilight] .lead-box .chat-ava{background:#298DFF!important;color:#fff!important}
html[data-hdl-theme=semilight] .pill .dot{background:#298DFF!important}
html[data-hdl-theme=semilight] .field input,html[data-hdl-theme=semilight] .field select,html[data-hdl-theme=semilight] .field textarea,html[data-hdl-theme=semilight] .lf-input,html[data-hdl-theme=semilight] .chat-input input,html[data-hdl-theme=semilight] .addbar input,html[data-hdl-theme=semilight] .addbar select{background:#fff!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-hdl-theme=semilight] .compare-col-us,html[data-hdl-theme=semilight] .ctable .col-us{background:rgba(41,141,255,.08)!important;border-inline-color:rgba(41,141,255,.25)!important}
html[data-hdl-theme=semilight] .ctable .head .col-us{background:#0a0c10!important;color:#fff!important;border-color:#0a0c10!important}
html[data-hdl-theme=semilight] .ctable .head .col-us .sub{color:rgba(255,255,255,.65)!important}
html[data-hdl-theme=semilight] .gq-chip{border-color:rgba(10,12,16,.2)!important;color:#5c6572!important}
html[data-hdl-theme=semilight] .gq-chip::before{background:#298DFF!important}
html[data-hdl-theme=semilight] .hx .btn:not(.btn-primary),html[data-hdl-theme=semilight] .h26 .btn:not(.btn-primary),html[data-hdl-theme=semilight] .hero-forest .btn:not(.btn-primary),html[data-hdl-theme=semilight] [data-hero] .btn:not(.btn-primary),html[data-hdl-theme=semilight] .surface-dark .btn:not(.btn-primary),html[data-hdl-theme=semilight] .surface-forest .btn:not(.btn-primary){color:#fff!important;border-color:rgba(255,255,255,.35)}
html[data-hdl-theme=semilight] .hx .btn:not(.btn-primary):hover,html[data-hdl-theme=semilight] .h26 .btn:not(.btn-primary):hover,html[data-hdl-theme=semilight] .hero-forest .btn:not(.btn-primary):hover,html[data-hdl-theme=semilight] .page-hero .btn:not(.btn-primary):hover{background:#F3F1ED;border-color:#F3F1ED;color:#0B0D12!important}
html[data-hdl-theme=semilight] .hero-forest .pill .dot,html[data-hdl-theme=semilight] .hx .pill .dot{background:#7cc4ff!important}

/* ---- semi-light: headings default to ink, dark blocks keep white ---- */
html[data-hdl-theme=semilight] main :is(h1,h2,h3,h4,.h1,.h2,.h3,.h-display,.display-xl,.sec-title,.duo-h,.stmt,label,.lf-label,.pm){color:var(--ink)}
html[data-hdl-theme=semilight] main :is(.hx,.h26,.hero-forest,[data-hero],.story,.surface-dark,.surface-forest,.surface-lime,.surface-grad-olive,.app,.preview,.code-block,.code-snip) :is(h1,h2,h3,h4,.h1,.h2,.h3,.h-display,.display-xl,.sec-title,.duo-h,label,.pm){color:#fff}
html[data-hdl-theme=semilight] main :is(.app,.preview,.code-block,.code-snip) :where(a){color:#7cc4ff}

/* ---- semi-light: contact band stays dark (bookend with the footer) ---- */
html[data-hdl-theme=semilight] .contact-band h2{color:#fff}
html[data-hdl-theme=semilight] .contact-band .side{color:#8d949c}
html[data-hdl-theme=semilight] .contact-band :where(a){color:#fff}
html[data-hdl-theme=semilight] .contact-band .btn:not(.btn-primary){color:#fff!important;border-color:rgba(255,255,255,.35)}
html[data-hdl-theme=semilight] .contact-band .btn:not(.btn-primary):hover{background:#F3F1ED;border-color:#F3F1ED;color:#0B0D12!important}

/* ---- semi-light: links inside content ---- */
html[data-hdl-theme=semilight] main :where(a),html[data-hdl-theme=semilight] .legal-body :where(a),html[data-hdl-theme=semilight] .doc-section :where(a){color:var(--blue-ink)}
html[data-hdl-theme=semilight] main :where(a:hover),html[data-hdl-theme=semilight] .legal-body :where(a:hover){color:#298DFF}
html[data-hdl-theme=semilight] main :is(.hx,.h26,.hero-forest,[data-hero],.story,.surface-dark,.surface-forest,.surface-lime,.app,.preview,.code-block,.code-snip) :where(a){color:#7cc4ff}
/* light cards keep ink type even inside dark sections */
html[data-hdl-theme=semilight] main :is(.form-card,.card,.plan,.doc-toc,.compare,.faq,.lead-box) :is(h1,h2,h3,h4,.h1,.h2,.h3,label,.lf-label,.pm){color:var(--ink)}
html[data-hdl-theme=semilight] main :is(.form-card,.card,.plan,.doc-toc,.faq) :where(a){color:var(--blue-ink)}
html[data-hdl-theme=semilight] .diff .n,html[data-hdl-theme=semilight] .sync-dir,html[data-hdl-theme=semilight] .pv-kpi .k,html[data-hdl-theme=semilight] .kpi .k{color:#1668cf!important}
html[data-hdl-theme=semilight] .m.get{color:#4d7a16}
html[data-hdl-theme=semilight] .m.post{color:#1d5fd0}
html[data-hdl-theme=semilight] .m.hook{color:#a8407a}
html[data-hdl-theme=semilight] .m.del,html[data-hdl-theme=semilight] .m.delete{color:#b3352a}

/* Announcement bar — 2026-09-22. The handoff's base-2026.css colours .mh-ann
   #298DFF with white text; the site's chrome.css still carries the old
   #04231b, which the dark pages override in theme-dashboard.css and light
   pages never did. */
html[data-hdl-theme=semilight] .mh-ann{background:#298DFF;color:#fff}
html[data-hdl-theme=semilight] .mh-ann a,html[data-hdl-theme=semilight] .mh-ann a:hover,html[data-hdl-theme=semilight] .mh-ann button{color:#fff}