/* ==========================================================================
   Base: reset, type, shared components (labels, layer tags, toggles, topbar)
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);font-weight:500;font-size:16px;line-height:1.75;font-feature-settings:"palt" 1;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,ol,ul,li,dl,dd,figure{margin:0;padding:0;font-size:inherit;font-weight:inherit}
ol,ul{list-style:none}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:8px;top:8px;z-index:60;padding:12px 16px;background:var(--ink);color:var(--paper);font-size:16px;line-height:1;transform:translateY(-300%)}
.skip:focus-visible{transform:none}

/* English micro labels: never links, never body text */
.micro{font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-feature-settings:normal}

/* ---------- layer tag: colour square + name ---------- */
.layer{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap}
.layer::before{content:"";flex:none;width:.72em;height:.72em;background:var(--lc,var(--ink))}
[data-layer="basics"]{--lc:var(--l1)}
[data-layer="fit"]{--lc:var(--l2)}
[data-layer="compare"]{--lc:var(--l3)}
[data-layer="cost"]{--lc:var(--l4)}
[data-layer="risk"]{--lc:var(--l5)}
[data-layer="steps"]{--lc:var(--l6)}

/* ---------- theme toggle: a half-filled disc drawn in CSS ---------- */
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:none}
.theme-toggle__disc{display:block;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:rotate .4s cubic-bezier(.2,.8,.2,1)}
.theme-toggle[aria-pressed="true"] .theme-toggle__disc{rotate:180deg}
.theme-toggle:hover .theme-toggle__disc{rotate:90deg}
.theme-toggle[aria-pressed="true"]:hover .theme-toggle__disc{rotate:270deg}

/* ---------- sticky topbar, shown once the first view's masthead has left ---------- */
.topbar{position:fixed;z-index:40;left:0;right:0;top:0;height:var(--topbar-h);background:var(--paper);border-bottom:2px solid var(--ink);transform:translateY(-110%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.topbar.is-shown{transform:none}
.topbar__in{display:flex;align-items:center;gap:24px;height:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--m)}
.topbar__logo{font-size:18px;font-weight:900;line-height:1;letter-spacing:.02em;margin-right:auto;white-space:nowrap}
.topbar__nav{display:none}
.topbar__nav ol{display:flex;gap:4px}
.topbar__nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 .7em;font-size:16px;font-weight:700;white-space:nowrap}
.topbar__nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;text-decoration-color:var(--ul)}
@media (min-width:900px){.topbar__nav{display:block}}

/* ---------- section scaffold ---------- */
.sec{max-width:var(--page-max);margin:0 auto;padding:clamp(72px,10vw,136px) var(--m) 0}
.sec__head{margin-bottom:clamp(32px,4vw,48px)}
.sec__label{font-family:var(--lat);font-stretch:75%;font-weight:400;font-size:clamp(84px,12vw,176px);line-height:.8;letter-spacing:.005em;text-transform:uppercase;font-feature-settings:normal;margin:0 0 .12em -.03em}
.sec__title{font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1.25;letter-spacing:-.02em}
.sec__lead{margin-top:14px;max-width:34em;font-size:16px;line-height:1.8;color:var(--ink-2)}
.sec__more{display:inline-flex;align-items:center;gap:.6em;margin-top:20px;min-height:44px;font-size:16px;font-weight:900;border-bottom:2px solid currentColor}
.sec__more::after{content:"→";transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.sec__more:hover::after{translate:4px 0}

@media (min-width:1024px){
  .sec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gut);align-items:start}
  .sec__head{position:sticky;top:calc(var(--topbar-h) + 32px);margin-bottom:0}
  .sec--wide{display:block}
  .sec--wide .sec__head{position:static;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gut);align-items:end;margin-bottom:56px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}