/* Home first section (2026-10-12): title on the left and the founding-thesis quote on the right, then the copy
   set in two columns like a textbook page, then "What we mean by durability", then the handover figure. */
.s-exec{position:relative;border-top:1px solid var(--line)}
.s-exec>.wrap{position:relative}
.s-exec .xe-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s1) var(--gut);align-items:end}
.s-exec .xe-top>.h2{grid-column:1/7;max-width:15ch}
.s-exec .xe-top>.quote{grid-column:8/13;margin:0}
.s-exec .quote p{font-size:clamp(20px,1.8vw,30px)}
.s-exec .xe-text{margin-top:var(--s2);padding-top:var(--s1);border-top:1px solid var(--line);column-count:2;column-gap:calc(var(--gut) * 2.4);column-rule:1px solid var(--line)}
.s-exec .xe-text .body{max-width:none;margin:0 0 14px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.s-exec .xe-text strong{font-weight:620}
.s-exec .xe-text .more{margin-top:10px}
@media (max-width:900px){.s-exec .xe-top>*{grid-column:1/-1!important}.s-exec .xe-text{column-count:1}.s-exec .xe-text .body{text-align:left}}

/* Durability explainer, compact stage (2026-10-12): seventeen short looping scenes in four chapters, drawn by
   js/home-analogies.js. Navigation, narration and the limit chips sit beside the stage. */
.ex{margin-top:var(--s3);padding-top:var(--s1);border-top:1px solid var(--fg)}
.ex-hd{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.025em;line-height:1.08}
.ex-intro{margin-top:10px;max-width:60ch;color:var(--mut);font-size:16px;line-height:1.5}
.ex-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px;padding:4px;border:1px solid rgba(35,31,43,.2);border-radius:999px;width:max-content;max-width:100%}
.ex-tabs button{min-height:40px;padding:8px 18px;border:0;border-radius:999px;background:none;color:var(--plum);font:500 15px/1.1 var(--sans);cursor:pointer}
.ex-tabs button[aria-current=true]{background:var(--plum);color:var(--chalk)}
.ex-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);margin-top:24px;align-items:start}
.ex-side{grid-column:1/5;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--nav-h) + 24px)}
.ex-nav{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ex-arrow,.ex-pause{flex:none;width:44px;height:44px;padding:0;border:1px solid var(--plum);border-radius:50%;background:var(--plum);color:var(--chalk);font:500 18px/1 var(--sans);cursor:pointer}
.ex-arrow:disabled{background:none;color:rgba(35,31,43,.3);border-color:rgba(35,31,43,.2);cursor:default}
.ex-pause{margin-left:auto;background:none}
.ex-pause[hidden]{display:none}
.ex-pi{display:block;width:12px;height:14px;margin:auto;border-left:4px solid var(--plum);border-right:4px solid var(--plum)}
.ex.paused .ex-pi{width:0;height:0;margin-left:16px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--plum)}
.ex-dots{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.ex-dot{width:13px;height:13px;padding:0;border:1.5px solid var(--plum);border-radius:50%;background:none;cursor:pointer}
.ex-dot[aria-current=step]{background:var(--plum);transform:scale(1.25)}
.ex button:focus-visible,.ex a:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.ex-title{font:600 clamp(20px,1.7vw,26px)/1.2 var(--sans);letter-spacing:-.015em}
.ex-line{font-size:17px;line-height:1.5;color:rgba(35,31,43,.82)}
.ex-chain{display:flex;flex-direction:column;gap:10px}
.ex-chain:empty{display:none}
.exk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font:500 14px/1.2 var(--sans);color:var(--mut)}
.exc{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 12px;border:1.5px solid var(--plum);border-radius:999px;background:var(--chalk);color:var(--plum);font:500 14px/1.15 var(--sans)}
.exc svg{flex:none;width:16px;height:16px}
.exc-l{background:var(--plum);color:var(--chalk)}
.exc-f{background:var(--verm);border-color:var(--verm);color:#fff}
.ex-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ex-to{color:var(--plum);font-size:15px}
.ex-more{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:42px;padding:8px 16px;border-radius:999px;background:var(--plum);color:var(--chalk);font:500 15px/1.15 var(--sans);text-decoration:none}
.ex-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:15px}
.ex-g{display:inline-block;width:16px;height:16px;border-radius:50%;border:2.5px solid var(--ultra);vertical-align:-3px}
.ex-g.full{background:var(--ultra)}
.ex-g.half{background:linear-gradient(90deg,var(--ultra) 50%,transparent 50%)}
.ex-g.none{border-color:rgba(35,31,43,.35)}
.ex-visw{grid-column:5/13;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.55);overflow:hidden}
.ex-vis{padding:12px}
.ex-vis svg{display:block;width:100%;height:auto}
.ex-vis .xxs{font:600 12px var(--sans)}
.ex-vis .xs{font:500 15px var(--sans)}
.ex-vis .xt{font:500 18px var(--sans)}
.ex-vis .xb{font:650 18px var(--sans)}
.ex-vis .xh{font:650 22px var(--sans)}
.ex-vis .xbig{font:700 40px var(--sans);letter-spacing:-.02em}
.ex-vis .xhuge{font:700 76px var(--sans);letter-spacing:-.03em}
.ex-vis .fb{transform-box:fill-box;transform-origin:center}
.ex-vis .fbl{transform-box:fill-box;transform-origin:0 50%}
.ex-vis .ex-pv{transform-box:view-box;transform-origin:400px 340px}
.ex-cap{margin-top:18px;max-width:80ch;font-size:var(--fs-small);color:var(--mut)}
@media (max-width:900px){.ex-side,.ex-visw{grid-column:1/-1}.ex-side{position:static}.ex-tabs{width:auto;border-radius:16px}.ex-visw{order:-1}.ex-vis{padding:6px}}

/* As the first section after the hero it needs no top rule; the legend now follows the figure. */
.s-missing.s-exec{border-top:0}
