/* ============================================================
   Shift — site stylesheet (v6.0 "Alloy — The Press")
   Shared by the landing page and The Shift Log.
   ============================================================ */
:root{
  --navy:#0E1520; --field:#16202F; --field2:#1C2838; --plate:#182334; --steel:#31415A;
  --alu:#C9D1DA; --alu-br:#E8EDF3; --alu-deep:#8E99A6; --ledge:#5C6772; --well:#0B1119;
  --ink:#EDF1F6; --dim:#C2CBD7; --muted:#8D99A9;
  --paper:#F4F6F8; --sheet:#FFFFFF; --p-ink:#16202F; --p-dim:#3C4A5E; --p-muted:#5E7089;
  --line:rgba(237,241,246,.08); --line2:rgba(237,241,246,.16);
  --p-line:rgba(22,32,47,.13); --p-line2:rgba(22,32,47,.24);
  --display:'Technor',sans-serif; --body:'Supreme',system-ui,sans-serif; --mono:'Spline Sans Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --tex-navy:url('tex/anodised-navy.jpg?v=3');
  --tex-alu:url('tex/brushed-alu.jpg?v=3');
  --tex-steel:url('tex/steel-plate.jpg?v=3');
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --alu-grad:radial-gradient(140% 105% at 30% 6%, #F4F7FA 0%, #CBD3DC 34%, #AAB4C0 72%, #98A3B0 100%);
  --engrave:0 -1px 0 rgba(6,10,16,.55), 0 1px 0 rgba(255,255,255,.10);
  --engrave-p:0 -1px 0 rgba(255,255,255,.7), 0 1px 0 rgba(22,32,47,.16);
  --z-sticky:40; --z-nav:50; --z-grain:60;
  --arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17 14 66 67'%3E%3Cpath d='M47.6 17.55 Q50 15 52.4 17.55 L79.6 46.45 Q82 49 78.5 49 L67.5 49 Q65 49 65 51.5 L65 76.5 Q65 80 61.5 80 L38.5 80 Q35 80 35 76.5 L35 51.5 Q35 49 32.5 49 L21.5 49 Q18 49 20.4 46.45 Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--navy);color:var(--ink);font:16px/1.62 var(--body);position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;opacity:.5;
  background:var(--tex-navy) center/cover no-repeat,var(--navy)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 62% at 62% -8%, rgba(48,72,108,.40) 0%, transparent 62%),
             linear-gradient(180deg, transparent 0 46%, rgba(9,13,20,.55) 100%)}
.grain{position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  background:var(--grain);opacity:.15;mix-blend-mode:overlay}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.narrow{max-width:760px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--alu);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono);letter-spacing:.06em}
/* Shift's own arrow, inline at text size. Spline Sans Mono has no U+21E7, so the
   Unicode character fell back to a system font and never matched the brand. */
.ag{display:inline-block;width:.66em;height:.66em;vertical-align:-.02em;margin-right:.14em;
  background-color:currentColor;
  -webkit-mask:var(--arrow-mask) center/contain no-repeat;
          mask:var(--arrow-mask) center/contain no-repeat}
/* one size for every small mono label, so the scale stays 12.5 / 14.5 / 16.5 / 19+ */
.micro{font-size:12.5px;color:var(--muted);letter-spacing:.09em;text-transform:uppercase}
img{max-width:100%;height:auto;display:block}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sweep{0%{transform:translateX(-80%) skewX(-16deg);opacity:0}12%{opacity:1}55%{opacity:1}100%{transform:translateX(260%) skewX(-16deg);opacity:0}}
.stage>*{animation:rise .85s var(--ease) both}
.stage>*:nth-child(2){animation-delay:.1s}.stage>*:nth-child(3){animation-delay:.2s}
@supports (animation-timeline: view()){
  .reveal{animation:rise .9s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 42%}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- the mark: a key at the top of its travel ---------- */
.key{position:relative;display:inline-grid;place-items:center;isolation:isolate}
.key .well{position:absolute;left:0;right:0;bottom:0;height:64%;border-radius:17%/26%;
  background:linear-gradient(180deg,#05080D,#0B1119 55%,#141D29);box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.key .cap{position:relative;width:100%;aspect-ratio:1.2/1;border-radius:18%;
  background:var(--tex-alu) center/220% auto,var(--alu-grad);background-blend-mode:overlay,normal;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.85), inset 0 -6px 12px rgba(31,42,58,.42),
    0 5px 0 var(--ledge), 0 26px 34px -16px rgba(0,0,0,.9);
  display:grid;place-items:center;transform:translateY(-14%);
  transition:transform .17s var(--ease), box-shadow .17s var(--ease)}
.key:hover .cap,.key:active .cap{transform:translateY(-2%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.7), inset 0 -4px 8px rgba(31,42,58,.5),
    0 2px 0 var(--ledge), 0 10px 16px -12px rgba(0,0,0,.9)}
.key svg{width:56%;height:56%;overflow:visible}
.key .arr{fill:url(#steelGrad);
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.5)) drop-shadow(0 2px 2px rgba(15,22,34,.45))}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:var(--z-nav);background:rgba(12,18,28,.88);
  backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line2)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em}
.brand img{width:34px;height:34px}
.brand i{font-family:var(--mono);font-style:normal;font-weight:500;font-size:10px;color:var(--alu);
  border:1.5px solid rgba(201,209,218,.5);border-radius:5px;padding:2px 5px;vertical-align:top}
nav.links{display:flex;gap:26px;font-size:14.5px;color:var(--dim)}
nav.links a{position:relative;padding-bottom:2px}
nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--alu);transition:right .4s var(--ease)}
nav.links a:hover{color:var(--ink)}nav.links a:hover::after{right:0}
@media(max-width:820px){nav.links{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-weight:600;font-size:15px;color:#121926;border-radius:11px;padding:13px 22px;
  background:var(--tex-alu) center/300% auto,linear-gradient(160deg,#F2F5F9,#C2CAD4);background-blend-mode:overlay,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 0 var(--ledge), 0 14px 22px -14px rgba(0,0,0,.8);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);border:0;cursor:pointer;font-family:var(--body)}
.btn:hover{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 var(--ledge), 0 8px 14px -10px rgba(0,0,0,.85)}
.btn.small{padding:10px 16px;font-size:13.5px}
.btn.ghost{background:none;color:var(--ink);box-shadow:none;border-bottom:1px solid var(--alu-deep);
  border-radius:0;padding:3px 1px;font-weight:500}
.btn.ghost:hover{transform:none;border-color:var(--alu-br);color:var(--alu-br)}
.cta-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ---------- typography ---------- */
h1{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1;
  font-size:clamp(38px,5.6vw,72px);text-wrap:balance;text-shadow:var(--engrave)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(27px,3.5vw,42px);letter-spacing:-.016em;
  line-height:1.06;text-wrap:balance;text-shadow:var(--engrave)}
h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.kick{font-family:var(--mono);font-size:12.5px;color:var(--alu);letter-spacing:.09em;text-transform:uppercase}
.lede{font-size:clamp(16px,1.8vw,19px);color:var(--dim);line-height:1.56;text-wrap:pretty;max-width:56ch}
section{padding:clamp(56px,8vw,112px) 0;position:relative}
section[id],div[id]{scroll-margin-top:86px}
.sechead{max-width:660px;margin-bottom:clamp(28px,4.5vw,50px)}
.sechead p{margin-top:14px}
.regmark{position:absolute;top:0;left:clamp(20px,4vw,48px);width:9px;height:9px;opacity:.45;
  border-left:1px solid var(--alu-deep);border-top:1px solid var(--alu-deep)}

/* ---------- paper sections ---------- */
.paper{position:relative;color:var(--p-ink);background:var(--paper);overflow:hidden}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.5;mix-blend-mode:multiply}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.9), transparent 60%)}
.paper .wrap{position:relative;z-index:1}
.paper h2{color:var(--p-ink);text-shadow:var(--engrave-p)}
.paper .lede,.paper p{color:var(--p-dim)}
.paper .kick{color:var(--steel)}

/* ---------- sticky contextual CTA ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);
  transform:translateY(110%);transition:transform .5s var(--ease);
  border-top:1px solid var(--line2);background:rgba(12,18,28,.94);backdrop-filter:blur(16px) saturate(1.2)}
.sticky.on{transform:none}
.sticky .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:13px;padding-bottom:13px;flex-wrap:wrap}
.sticky p{font-size:14.5px;color:var(--dim);margin:0}
.sticky b{color:var(--ink);font-weight:600}
@media(max-width:620px){.sticky p{display:none}.sticky .wrap{justify-content:center}}

/* ---------- footer ---------- */
footer{padding:48px 0 60px;border-top:1px solid var(--line2)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:36px}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:9px;font-size:14.5px;color:var(--dim)}
footer li a:hover{color:var(--ink)}
footer .fine{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:760px){footer .cols{grid-template-columns:1fr;gap:26px}}

/* ============================================================
   LANDING PAGE
   ============================================================ */
.hero{padding:clamp(44px,7vw,88px) 0 clamp(40px,6vw,72px)}
.heroplate{border-radius:24px;border:1px solid var(--line2);position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(237,241,246,.10), 0 60px 120px -70px #000;
  padding:clamp(28px,4.5vw,64px)}
.heroplate::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--tex-navy) center/cover no-repeat,var(--field)}
.heroplate::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 18%,rgba(226,238,252,.09) 47%,rgba(240,247,255,.14) 50%,rgba(226,238,252,.09) 53%,transparent 82%);
  animation:sweep 13s var(--ease) infinite}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(26px,5vw,60px);align-items:center}
.herokey{display:grid;place-items:center}
.herokey .key{width:clamp(190px,22vw,290px)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}.herokey{justify-content:flex-start}.herokey .key{width:min(52vw,220px)}}

/* live-metal canvas: light only, screened over the real texture */
#metal{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;opacity:0;
  mix-blend-mode:screen;transition:opacity 1.4s var(--ease);pointer-events:none}
#metal.on{opacity:.85}
.heroplate>.wrap,.heroplate>.hero-grid,.heroplate>.calc{position:relative;z-index:1}

/* images settle as they reveal */
@supports (animation-timeline: view()){
  @keyframes settle{from{transform:scale(1.045)}to{transform:none}}
  .cost-img img,.flow-img img,.log-img img{animation:settle 1.4s var(--ease) both;
    animation-timeline:view();animation-range:entry 0% entry 60%}
}
@media (prefers-reduced-motion: reduce){#metal{display:none}}

/* ---- calculator ---- */
.calc{position:relative;margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line2);padding-top:clamp(28px,4vw,42px)}
.calc-head h3{margin-top:6px;font-size:clamp(19px,2.2vw,25px)}
.calc-body{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,4vw,54px);margin-top:26px;align-items:start}
@media(max-width:860px){.calc-body{grid-template-columns:1fr;gap:30px}}
.calc-inputs label{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;
  font-size:14px;color:var(--dim);margin-bottom:24px}
.calc-inputs label>output{grid-column:2;grid-row:1;justify-self:end}
.calc-inputs output{font-family:var(--mono);font-size:15px;color:var(--alu-br);
  background:rgba(201,209,218,.09);border:1px solid var(--line2);border-radius:7px;padding:3px 9px;min-width:60px;text-align:center}
.calc-inputs input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer}
.calc-inputs input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--alu-deep),rgba(141,153,169,.25))}
.calc-inputs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:6px;
  background:var(--alu-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 var(--ledge),0 6px 12px -6px #000}
.calc-inputs input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(141,153,169,.4)}
.calc-inputs input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:6px;
  background:#CBD3DC;box-shadow:0 2px 0 var(--ledge)}
.calc-out{background:rgba(11,17,25,.5);border:1px solid var(--line2);border-radius:16px;padding:clamp(22px,3vw,30px)}
.figure{margin-bottom:22px}
.figure.alt{padding-top:20px;border-top:1px solid var(--line)}
.fig-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fig-big{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1;
  font-size:clamp(38px,5.6vw,58px);color:var(--alu-br);margin:8px 0 6px;font-variant-numeric:tabular-nums}
.figure.alt .fig-big{color:var(--ink)}
.fig-sub{display:block;font-size:13.5px;color:var(--dim)}
.calc-note{font-size:13px;color:var(--muted);line-height:1.55;margin:6px 0 20px}

/* ---- cost ---- */
.cost-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.cost-grid{grid-template-columns:1fr}}
.cost-img img{border-radius:18px;border:1px solid var(--line2);box-shadow:0 50px 90px -60px #000}
ul.leaks{list-style:none;margin-top:26px}
ul.leaks li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;color:var(--dim)}
ul.leaks b{color:var(--ink);font-weight:600}

/* ---- doors ---- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(18px,3vw,28px)}
.door{position:relative;border:1px solid var(--line2);border-radius:20px;padding:clamp(26px,3.5vw,38px);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(237,241,246,.07), 0 30px 60px -46px #000}
.door::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tex-steel) center/cover no-repeat,var(--plate);opacity:.55}
.door .chord{display:flex;align-items:flex-end;gap:12px;margin-bottom:24px}
.key.sm{width:78px}
.key.sm.seated{width:56px}
.key.sm.seated .cap{transform:translateY(2%);aspect-ratio:1/1}
.key .glyph{font-family:var(--display);font-weight:600;font-size:24px;color:var(--steel)}
.door .plus{font-family:var(--display);font-size:20px;color:var(--muted);padding-bottom:14px}
.door h3{font-size:24px}
.door-lead{margin-top:8px;color:var(--dim);font-size:15.5px}
.door ul{margin:20px 0 0;padding:0;list-style:none}
.door li{padding:12px 0;border-top:1px solid var(--line);color:var(--dim);font-size:14.5px;line-height:1.55}
.door li b{color:var(--ink);font-weight:600}
.door .ref{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.08em}

/* ---- worked example ---- */
.flow{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,54px);align-items:start}
@media(max-width:900px){.flow{grid-template-columns:1fr}}
.flow-steps{list-style:none;counter-reset:s}
.flow-steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:18px 0;border-top:1px solid var(--line)}
.flow-steps .n{grid-row:span 2;font-family:var(--mono);font-size:12px;color:var(--alu);letter-spacing:.08em;padding-top:3px}
.flow-steps b{font-family:var(--display);font-weight:600;font-size:17px}
.flow-steps p{font-size:14.2px;color:var(--dim);line-height:1.55}
.flow-img img{border-radius:18px;border:1px solid var(--line2);box-shadow:0 50px 90px -60px #000}
.flow-img figcaption{margin-top:14px;font-size:13.2px;color:var(--muted);line-height:1.55}

/* ---- rules (paper) ---- */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px}
.rule{background:var(--sheet);border:1px solid var(--p-line);border-radius:16px;padding:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 12px 26px -20px rgba(22,32,47,.5)}
.rule .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--steel);text-transform:uppercase;display:block;margin-bottom:10px}
.rule p{font-size:14.5px;line-height:1.55}
.rule p b{color:var(--p-ink)}

/* ---- log teaser ---- */
.log-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:900px){.log-teaser{grid-template-columns:1fr}}
.log-img img{border-radius:18px;border:1px solid var(--line2);box-shadow:0 50px 90px -60px #000}

/* ---- book ---- */
.book{position:relative;overflow:hidden;border-top:1px solid var(--line2)}
.book::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tex-navy) center/cover no-repeat,var(--field);opacity:.85}
.book::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 18%,rgba(226,238,252,.09) 47%,rgba(240,247,255,.14) 50%,rgba(226,238,252,.09) 53%,transparent 82%);
  animation:sweep 14s var(--ease) infinite}

/* ============================================================
   THE SHIFT LOG
   ============================================================ */
.log-hero{padding:clamp(52px,7vw,92px) 0 clamp(28px,4vw,44px)}
.log-hero h1{margin-top:10px;font-size:clamp(34px,5vw,60px)}
.log-hero .lede{margin-top:20px;max-width:62ch}
.log-list{padding-top:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(18px,2.6vw,26px)}
.card{border:1px solid var(--line2);border-radius:18px;overflow:hidden;background:rgba(24,35,52,.44);
  display:flex;flex-direction:column;transition:transform .3s var(--ease), border-color .3s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:rgba(201,209,218,.36)}
.card figure{overflow:hidden;aspect-ratio:16/9;background:var(--plate)}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover figure img{transform:scale(1.035)}
.card-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-cat{font-size:12.5px;letter-spacing:.11em;color:var(--alu)}
.card h3{font-size:19px;line-height:1.22;letter-spacing:-.012em}
.card p{font-size:14px;color:var(--dim);line-height:1.55;flex:1}
.card-more{font-size:12.5px;letter-spacing:.09em;color:var(--muted);margin-top:4px}

/* ---- article ---- */
.art{padding:clamp(34px,5vw,60px) 0 clamp(20px,3vw,34px)}
.crumb{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;margin-bottom:22px}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.6}
.art h1{font-size:clamp(31px,4.4vw,52px);line-height:1.03}
.art-meta{font-size:12.5px;color:var(--muted);letter-spacing:.09em;margin-top:18px}
.art-hero{margin:30px 0 34px}
.art-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:1px solid var(--line2);box-shadow:0 50px 90px -60px #000}
.answer-box{border:1px solid var(--line2);border-radius:16px;padding:24px 28px;margin:0 0 38px;
  background:rgba(11,17,25,.46);box-shadow:inset 0 1px 0 rgba(237,241,246,.06)}
.answer-box .kick{margin-bottom:10px;text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--alu)}
.answer-box p:last-child{font-size:17px;line-height:1.55;color:var(--ink);margin:0}
.prose{font-size:16.5px;line-height:1.72;color:var(--dim)}
.prose h2{font-size:clamp(21px,2.6vw,29px);margin:44px 0 14px;color:var(--ink)}
.prose h3{font-size:19px;margin:32px 0 10px;color:var(--ink)}
.prose p{margin-bottom:19px;max-width:70ch;text-wrap:pretty}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--alu-br);border-bottom:1px solid rgba(201,209,218,.42)}
.prose a:hover{border-color:var(--alu-br)}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:9px;max-width:68ch}
.prose blockquote{border-left:1px solid var(--alu-deep);padding-left:22px;margin:26px 0;color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.9em;background:rgba(201,209,218,.1);
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px}
.tw{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line2);border-radius:12px}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:420px}
.prose th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--alu);padding:13px 16px;border-bottom:1px solid var(--line2);white-space:nowrap}
.prose td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.art-faq{padding:14px 0 46px}
.art-faq h2{font-size:clamp(21px,2.6vw,29px);margin-bottom:14px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;
  padding:17px 0;font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--alu);font-size:19px;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 18px;color:var(--dim);font-size:15.5px;max-width:68ch}
.art-cta{position:relative;overflow:hidden;border-top:1px solid var(--line2)}
.art-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tex-navy) center/cover no-repeat,var(--field);opacity:.8}

/* ---------- the ladder: verify / build / care ---------- */
.ladder{display:flex;flex-direction:column;gap:clamp(16px,2.4vw,22px);counter-reset:rung}
.rung{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3.5vw,44px);
  border:1px solid var(--line2);border-radius:20px;padding:clamp(24px,3.4vw,38px);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(237,241,246,.07), 0 30px 60px -46px #000}
.rung::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--tex-steel) center/cover no-repeat,var(--plate);opacity:.5}
.rung-mark{display:flex;align-items:flex-end;gap:9px;align-self:start;padding-top:6px}
.rung-mark .key.sm{width:66px}
.rung-mark .key.sm.seated{width:46px}
.rung-mark .plus,.rung-mark .slash{font-family:var(--display);font-size:17px;color:var(--muted);padding-bottom:11px}
.rung-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.rung-head h3{font-size:clamp(22px,2.6vw,27px)}
.rung-price{font-size:12.5px;color:var(--alu);letter-spacing:.08em;white-space:nowrap}
.rung-lead{color:var(--dim);font-size:15.5px;line-height:1.58;max-width:62ch}
.rung ul{margin:18px 0 0;padding:0;list-style:none}
.rung li{padding:11px 0;border-top:1px solid var(--line);color:var(--dim);font-size:14.5px;line-height:1.55}
.rung li b{color:var(--ink);font-weight:600}
.rung-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13.2px;color:var(--muted);line-height:1.6;max-width:70ch}
.rung .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);margin-top:6px}
.rung .two h4{font-family:var(--display);font-weight:600;font-size:16px;color:var(--alu-br);
  padding-bottom:9px;border-bottom:1px solid var(--line2)}
.rung .two ul{margin-top:0}
.rung .ref{margin-top:20px;font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.08em}
@media(max-width:820px){
  .rung{grid-template-columns:1fr;gap:20px}
  .rung .two{grid-template-columns:1fr;gap:20px}
}