/* Homepage on a white page. The hero is pure white, so the rest of the page follows.
   Everything is scoped to the home page: the sub pages share home.css and keep their cream look.
   Surfaces are drawn with the same tokens as before, so cards, rows and inputs follow the new values. */

/* White canvas. The tokens are reset on the page and on <html>, which paints the overscroll. */
html:has(body[data-page="home"]){--bg:#fff}
[data-page="home"]{
  --bg:#fff;--paper:#fff;
  /* Cards are a whisper of sage so they lift off the white without a heavy shadow. */
  --card:#F6F8F5;--hover:#F0F3EF;
  --line:#ECEFEA;--line-2:#E3E8E1;--line-3:#DAE0D8;--line-4:#D0D7CE;
}

/* The section panels were cream cards on a grey frame. On white they dissolve into the page and
   spacing does the separating. The decorative Fokus deck (div.panel) keeps its floating card look. */
[data-page="home"] section.panel{border-radius:0;background:transparent;box-shadow:none}

/* Glass header: white, not cream. */
[data-page="home"] .hdr.is-scrolled,[data-page="home"] .hdr:has(.is-open){background:rgba(255,255,255,.86);box-shadow:0 1px 0 var(--line-2)}
@media (max-width:1060px){
  [data-page="home"] .hdr-menu{box-shadow:0 0 0 1px var(--line-2),0 20px 50px rgba(15,48,38,.14)}
}

/* Warm greys that were written out as hex values in the other home sheets. */
[data-page="home"] .why.pri{background:#EEF1EC}
[data-page="home"] .brow.child::before{border-color:#D3DAD1}
[data-page="home"] .deck-3{box-shadow:0 0 0 1px #DAE0D8}
[data-page="home"] .deck-2{box-shadow:0 0 0 1px #DAE0D8,0 6px 16px rgba(15,48,38,.06)}

/* Cards sit on white now, so a faint ring and a softer lift replace the old tinted frame. */
[data-page="home"] .vcard,[data-page="home"] .ftile,[data-page="home"] .price{box-shadow:0 0 0 1px var(--line-2)}
[data-page="home"] .board{box-shadow:inset 0 0 0 1px var(--line-2),0 12px 40px rgba(15,48,38,.05)}