/* /preview/home-keep/ only (keep=True). Existing tokens and classes. These rules lay out the three-ways cards as /preview/home-next/ does (three across on a wide screen; the second sentence behind a tap on a phone, except on the research card), place the two mid-page buttons, and fold the ways-in table to the rows we cover completely until "See all" is chosen. */
.hp[data-keep] .hk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:clamp(24px,3vw,36px) 0 0;}
.hp[data-keep] .hk-after{padding-top:clamp(28px,3.5vw,44px);padding-bottom:clamp(40px,5vw,64px);}
.hp[data-keep] .hk-after .hk-cta{margin-top:0;}
/* two ways: one column until the cards fit, then two equal cards whose bodies start on one line and whose links sit on one line */
.hp[data-keep] .v5-two .hn-two{grid-template-columns:minmax(0,1fr);}
.hp[data-keep] .v5-two .hn-two .v5-fx .hp-tl{margin-top:auto;}
.hp[data-keep] .v5-two .hn-two .v5-fx h3{text-wrap:pretty;}
.hp[data-keep] .v5-two .v5-fx .hn-2{padding-top:8px;}
@media(min-width:1040px){
  .hp[data-keep] .v5-two .hn-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;}
  .hp[data-keep] .v5-two .hn-two .v5-fx h3{font-size:clamp(20px,1.6vw,23px);}
  @supports (grid-template-rows:subgrid){.hp[data-keep] .v5-two .hn-two .v5-fx{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-content:start;justify-items:start;}}
}
@media(min-width:701px) and (max-width:1039px){.hp[data-keep] .v5-two .hn-two .v5-fx h3,.hp[data-keep] .v5-two .hn-two .v5-fx .hn-b{max-width:640px;}}
.hp[data-keep] .v5-two .v5-fx .hn-more p{padding-top:8px;}
.hp[data-keep] .v5-two .hn-more>summary{display:none;}
@media(max-width:700px){
  .hp[data-keep] .v5-two .hn-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;list-style:none;cursor:pointer;font-size:14.5px;font-weight:600;color:#FF8C6E;}
  .hp[data-keep] .v5-two .hn-more>summary::-webkit-details-marker{display:none;}
  .hp[data-keep] .v5-two .hn-more>summary svg{width:18px;height:18px;transition:transform .2s;}
  .hp[data-keep] .v5-two .hn-more[open]>summary svg{transform:rotate(180deg);}
  .hp[data-keep] .v5-two .hn-more>summary:focus-visible{outline:2px solid #FF8C6E;outline-offset:2px;}
  .hp[data-keep] .v5-two .v5-fx .hn-more p{padding-top:0;}
}
/* ways in: the control is hidden, and the whole table shows, unless the browser can read the checkbox from CSS */
.hp[data-keep] .hk-ways-all{display:none;margin-top:18px;}
.hp[data-keep] .v5-ways .v5-ways-src{margin-top:18px;}
.hp[data-keep] .hk-ways-all label{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;background:#FFFFFF;border:1px solid var(--a-ink);border-radius:999px;color:var(--l-ink);font-size:15px;font-weight:600;cursor:pointer;}
.hp[data-keep] .hk-ways-all input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.hp[data-keep] .hk-ways-all svg{width:18px;height:18px;color:var(--a-ink);transition:transform .2s;}
.hp[data-keep] .hk-ways-all .l{display:none;}
@supports selector(:has(*)){
  .hp[data-keep] .hk-ways-all{display:block;}
  .hp[data-keep] .v5-ways:has(#hk-ways-c:not(:checked)) .hk-ways .hk-ways-x,.hp[data-keep] .v5-ways:has(#hk-ways-c:not(:checked)) .hk-ways .d{display:none;}
  .hp[data-keep] .hk-ways-all label:has(input:checked) .m{display:none;}
  .hp[data-keep] .hk-ways-all label:has(input:checked) .l{display:inline;}
  .hp[data-keep] .hk-ways-all label:has(input:checked) svg{transform:rotate(180deg);}
  .hp[data-keep] .hk-ways-all label:has(input:focus-visible){outline:3px solid var(--a-ink);outline-offset:3px;}
  @media(min-width:901px){.hp[data-keep] .v5-ways:has(#hk-ways-c:not(:checked)) .hk-ways .v5-ways-r{grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) minmax(0,0.9fr);}}
}
/* order2 (the reordered homepage): the phone folds. Above 700px the summary is hidden and the content shows as it always did. Below it each fold is a pill that opens and shuts a real details element. */
.hp[data-order2] .hk-fold>summary{display:none;}
@media(max-width:700px){
  .hp[data-order2] .hk-fold>summary{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:18px;padding:0 20px;list-style:none;cursor:pointer;font-size:15px;font-weight:600;color:#FF8C6E;border:1px solid currentColor;border-radius:999px;}
  .hp[data-order2] .hk-fold>summary::-webkit-details-marker{display:none;}
  .hp[data-order2] .hk-fold>summary svg{width:18px;height:18px;transition:transform .2s;}
  .hp[data-order2] .hk-fold[open]>summary svg{transform:rotate(180deg);}
  .hp[data-order2] .hk-fold>summary:focus-visible{outline:3px solid currentColor;outline-offset:3px;}
  .hp[data-order2] .hk-fold>summary .l{display:none;}
  .hp[data-order2] .hk-fold[open]>summary .m{display:none;}
  .hp[data-order2] .hk-fold[open]>summary .l{display:inline;}
  .hp[data-order2] .v5l .hk-fold>summary,.hp[data-order2] .hp-sectors .hk-fold>summary{color:var(--a-ink);}
  .hp[data-order2] .hk-fold:not([open])+.hk-cta{margin-top:20px;}
}
.hp[data-order2] .v5-pan .d.hk-agent{margin-top:14px;}
.hp[data-order2] .v5-lede.hk-agent-link{margin-top:14px;}
.hp[data-order2] .hk-agent-after{display:none;}
.hp[data-order2] .hk-peek{display:none;}
.hp[data-order2] .hk-peek-chips .hk-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:0 8px 8px 0;border:1px solid currentColor;border-radius:999px;font-size:15px;font-weight:600;color:var(--a-ink);text-decoration:none;}
.hp[data-order2] .hk-peek-rule .hp-rmap-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
@media (min-width:701px){.hp[data-order2] .hp-sectors .hp-docgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:900px){
  .hp[data-order2] .v5-ledes .hk-agent-link{display:none;}
  .hp[data-order2] .hk-agent-after{display:block;margin:0;padding-top:22px;padding-bottom:8px;}
  .hp[data-order2] .hk-agent-after .v5-lede{margin:0;max-width:none;font-size:13.5px;line-height:1.55;color:#A4A9B3;}
  .hp[data-order2] .hk-agent-after .v5-lede a{display:inline;font-size:14px;color:var(--a);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
}
@media (max-width:700px){
  .hp[data-order2] .hk-peek{display:block;margin-top:18px;}
  .hp[data-order2] .hk-peek:has(+ .hk-fold[open]){display:none;}
  .hp[data-order2] .hk-peek .rf-band{padding:0;}
}
.hp[data-order2] .v5-lede.hk-agent-link a{display:block;margin-bottom:4px;color:var(--a);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.hp[data-order2] .v5-ledes .hk-agent-link a{margin-bottom:6px;}
@media(min-width:901px){
  .hp[data-order2] .v5-ledes{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:16px;}
  .hp[data-order2] .v5-ledes .v5-lede{margin-top:0;max-width:none;}
  .hp[data-order2] .v5-ledes .v5-lede.hk-agent-link{margin-top:6px;padding-left:28px;border-left:1px solid rgba(255,255,255,.16);font-size:14.5px;line-height:1.55;color:#A4A9B3;}
  .hp[data-order2] .v5-ledes .v5-lede.hk-agent-link a{font-size:15px;}
}
/* The stage panels stack at 900px and below, so their folds apply from 900px down, not 700. */
@media(max-width:900px){
  .hp[data-order2] .v5-pan .hk-fold>summary{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:64px;margin:0;padding:0 20px;list-style:none;cursor:pointer;border:0;border-radius:0;font-family:'Chakra Petch','Outfit',sans-serif;font-weight:600;font-size:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);}
  .hp[data-order2] .v5-pan .hk-fold>summary::-webkit-details-marker{display:none;}
  .hp[data-order2] .v5-pan .hk-fold>summary svg{width:18px;height:18px;transition:transform .2s;}
  .hp[data-order2] .v5-pan .hk-fold[open]>summary svg{transform:rotate(180deg);}
  .hp[data-order2] .v5-pan .hk-fold>summary .l{display:none;}
  .hp[data-order2] .v5-pan .hk-fold[open]>summary .m{display:none;}
  .hp[data-order2] .v5-pan .hk-fold[open]>summary .l{display:inline;}
  .hp[data-order2] .v5-pan .hk-fold>summary:focus-visible{outline:3px solid currentColor;outline-offset:-3px;}
}