/* SXLA v16: the EDGE page (edge.html). Loaded on that page only, after style.css and story.css.
   Everything works without JavaScript and with reduced motion: nothing is hidden, nothing moves,
   and the network switch is two native radio buttons styled with CSS. */
.edge-page .scene.dark .narr, .edge-page .scene.navy-scene .narr { color: #fff; }

/* ------------------------------------------------------------------ hero */
.edge-hero { min-height: 92vh; min-height: 92svh; background: #07073F; clip-path: none; align-items: flex-end; padding: calc(var(--header-h) + 40px) 0 72px; }
.edge-hero .eh-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #07073F; }
.edge-hero .hero-art { width: 100%; height: 100%; display: block; max-width: none; }
.edge-hero::after { background: linear-gradient(90deg, rgba(7, 7, 63, .95) 0%, rgba(7, 7, 63, .82) 30%, rgba(7, 7, 63, .2) 52%, rgba(7, 7, 63, 0) 64%), linear-gradient(0deg, rgba(7, 7, 63, .72) 0%, rgba(7, 7, 63, 0) 32%); }
.edge-hero .hero-content { max-width: 540px; }
@media (min-width: 1440px) { .edge-hero .hero-content { max-width: 600px; } }
.edge-hero h1 { font-size: clamp(3.2rem, 7vw, 5.8rem); letter-spacing: .05em; line-height: 1; margin-bottom: .14em; }
.edge-hero .lead { font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.3; color: #fff; font-weight: 700; }
.eh-intro { color: #DCDCF0; margin: 14px 0 0; max-width: 560px; }
.eh-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 20px 0 0; }
.eh-s1, .eh-s2 { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-weight: 700; font-size: .95rem; line-height: 1.25; }
.eh-s1 { background: rgba(191, 0, 0, .25); box-shadow: inset 0 0 0 1.5px #FF9A8F; color: #fff; }
.eh-s2 { background: #fff; color: var(--navy-deep); }
.eh-state .ico { width: 20px; height: 20px; flex: none; }
.eh-arrow { color: var(--ro-soft); display: inline-flex; }
.edge-hero .status { margin-top: 18px; }
.edge-hero .buttons { margin-top: 22px; }
.edge-hero .hero-note { margin: 14px 0 0; font-size: .86rem; color: #CFCFEA; }
@media (max-width: 1099px) {
  .edge-hero { display: block; min-height: 0; padding: var(--header-h) 0 56px; }
  .edge-hero::after { display: none; }
  .edge-hero .eh-art { position: relative; inset: auto; z-index: 0; aspect-ratio: 1300 / 720; margin-bottom: 28px; }
  .edge-hero .hero-art { position: absolute; width: 123.077%; height: 125%; left: -23.077%; top: -25%; }
  .edge-hero .hero-content { max-width: 720px; }
}
@media (max-width: 599px) {
  .edge-hero .eh-art { aspect-ratio: 840 / 780; margin-bottom: 22px; }
  .edge-hero .hero-art { width: 190.476%; height: 115.385%; left: -90.476%; top: -15.385%; }
  .eh-s1, .eh-s2 { font-size: .88rem; padding: 7px 12px; }
}
/* the transition: the signal drops, then the local EDGE takes over (only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .hero-art .bars rect { animation: eh-bar .45s ease both; }
  .hero-art .bars .b4 { animation-delay: 1.1s; } .hero-art .bars .b3 { animation-delay: 1.45s; }
  .hero-art .bars .b2 { animation-delay: 1.8s; } .hero-art .bars .b1 { animation-delay: 2.15s; }
  .hero-art .mwaves { animation: eh-waves 2.5s ease both; }
  .hero-art .sigx { animation: eh-in .5s 2.5s both; }
  .hero-art .lp .scr { animation: eh-dim 4.4s ease both; }
  .hero-art .eglow { animation: eh-in .9s 3.4s both; }
  .hero-art .earcs { animation: eh-in .6s 3.4s both, eh-pulse 2.6s 4.2s ease-in-out infinite; }
  .eh-s1 { animation: eh-rise .5s 2.6s both; }
  .eh-arrow { animation: eh-rise .4s 3.2s both; }
  .eh-s2 { animation: eh-rise .5s 3.6s both; }
}
@keyframes eh-bar { from { opacity: 1; } to { opacity: .22; } }
@keyframes eh-waves { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eh-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eh-dim { 0%, 52% { opacity: 1; } 62%, 78% { opacity: .3; } 100% { opacity: 1; } }
@keyframes eh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes eh-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ status chips and offline indicators: icon and text, never colour alone */
.st { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.25; border: 1.5px solid transparent; }
.st .ico, .ind .ico { width: 16px; height: 16px; flex: none; }
.st-now { background: var(--navy-deep); color: #fff; }
.st-pilot { background: #FBE9E3; color: var(--ro-dark); border-color: #EDBBA9; }
.st-future { background: #fff; color: var(--navy-deep); border: 1.5px dashed var(--navy-deep); }
.ind { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--muted); line-height: 1.25; }
.ind-net, .ind-mixed, .ind-share { color: #7A3A20; }

/* ------------------------------------------------------------------ part 1 */
.edge-shots { margin-top: 40px; }
.compare { display: grid; gap: 18px; margin-top: 46px; }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
.cmp { border-radius: 18px; padding: 20px 22px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); }
.cmp-with { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }
.cmp-k { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.cmp-k .ico { width: 22px; height: 22px; color: var(--ro-soft); flex: none; }
.cmp .ilist > li { grid-template-columns: 38px 1fr; gap: 12px; }
.cmp .ilist .chip + * { padding-top: 7px; }
.cmp-with .chip { background: #fff; color: var(--navy-deep); }
.today { margin-top: 46px; background: #fff; color: var(--text); border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
.today h3 { color: var(--navy-deep) !important; margin-bottom: .3em; }
.today-grid { display: grid; gap: 22px; margin-top: 18px; }
@media (min-width: 900px) { .today-grid { grid-template-columns: repeat(3, 1fr); } }
.tcol { border-top: 3px solid var(--line); padding-top: 14px; }
.tcol .ilist { margin-top: 10px; }
.tcol .ilist > li { grid-template-columns: 38px 1fr; gap: 12px; }
.tcol .chip.light { background: var(--tint); box-shadow: none; }
.tcol .ilist .chip + * { padding-top: 7px; }
.tnote { font-size: .92rem; color: var(--muted); margin: 8px 0 0; }
.today a { color: var(--navy-deep) !important; }
.tfoot { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 700; color: var(--navy-deep); }
.tfoot .ico { width: 22px; height: 22px; color: var(--ro); flex: none; }

/* ------------------------------------------------------------------ part 2: capabilities */
.key { background: var(--tint); border-radius: 16px; padding: 16px 18px; margin-top: 8px; }
.key-h { margin: 0; font-weight: 700; color: var(--navy-deep); font-size: .92rem; }
.key-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; align-items: center; }
.caps { display: grid; gap: 22px; margin-top: 30px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.cap { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.cap-art svg { display: block; width: 100%; height: auto; }
.cap-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cap h3 { margin: 0; font-size: 1.2rem; }
.cap-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cap p { margin: 0; }
.cap .ask { margin-top: auto; box-shadow: none; }
.cap .ask summary { padding: 10px 14px; }

/* ------------------------------------------------------------------ part 3: mobility */
.deps { display: grid; gap: 22px; margin-top: 10px; }
@media (min-width: 900px) { .deps { grid-template-columns: repeat(3, 1fr); } }
.dep { margin: 0; background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.dep-art img { display: block; width: 100%; height: auto; }
.dep figcaption { padding: 16px 20px 20px; margin: 0; color: var(--text); font-size: 1rem; }
.dep figcaption h3 { margin: 0 0 8px; font-size: 1.2rem; }
.dep figcaption p { margin: 10px 0 0; }
.kit-split { margin-top: 48px; }
.kit > li strong.t { font-size: 1em; }
.warm-callout { background: #fff; border-color: var(--line); }
.real-fig { margin: 24px 0 0; }
.real-fig img { border-radius: 16px; width: 100%; height: auto; }

/* ------------------------------------------------------------------ part 4: architecture */
.arch { display: grid; gap: 16px; margin-top: 34px; }
.arch .layer { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); }
.arch .layer + .layer::before { content: ""; position: absolute; left: 42px; top: -17px; width: 3px; height: 16px; background: var(--ro-soft); }
.arch .l2 { background: rgba(201, 81, 49, .2); border-color: rgba(255, 181, 156, .6); }
.arch .l3 { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .5); }
.arch .chip + div { padding-top: 2px; }
.arch .ln { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ro-soft); }
.arch h3 { margin: 2px 0 6px; font-size: 1.2rem; }
.arch p { margin: 0; color: #E3E3F4; }
.arch .cyc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.arch .cyc b { font-size: .72rem; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: #fff; }
@media (min-width: 1100px) {
  .arch { grid-template-columns: repeat(5, 1fr); gap: 18px; }
  .arch .layer { grid-template-columns: 1fr; align-content: start; }
  .arch .layer + .layer::before { left: -19px; top: 42px; width: 20px; height: 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .arch.in .layer { animation: arch-glow 7.5s ease-in-out infinite; }
  .js .arch.in .l2 { animation-delay: 1.5s; } .js .arch.in .l3 { animation-delay: 3s; } .js .arch.in .l4 { animation-delay: 4.5s; } .js .arch.in .l5 { animation-delay: 6s; }
}
@keyframes arch-glow { 0%, 22%, 100% { box-shadow: none; } 8% { box-shadow: 0 0 0 2px var(--ro-soft), 0 0 28px rgba(255, 181, 156, .35); } }
.principle { margin-top: 48px; }
.princ { display: flex; gap: 10px; align-items: flex-start; color: #fff; }
.princ .ico { width: 22px; height: 22px; color: var(--ro-soft); flex: none; margin-top: 3px; }
.chain { list-style: none; counter-reset: c; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.chain li { counter-increment: c; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.chain li::before { content: counter(c) ". "; font-weight: 700; color: var(--ro-soft); }

/* ------------------------------------------------------------------ part 5: the network switch */
.net { border: 0; margin: 34px 0 0; padding: 0; min-width: 0; }
.net-legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 700; color: #fff; }
.net input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 14px; margin: 0 8px 10px 0; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .55); color: #fff; font-weight: 700; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.seg .ico { width: 20px; height: 20px; }
.seg::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; flex: none; }
.net input:checked + .seg { background: #fff; color: var(--navy-deep); border-color: #fff; }
.net input:checked + .seg::before { background: radial-gradient(circle, currentColor 0 3.5px, transparent 4px); }
.net input:focus-visible + .seg { outline: 3px solid var(--ro-soft); outline-offset: 3px; }
.seg:hover { background: rgba(255, 255, 255, .14); }
.net-stage { clear: both; }
#net-off:checked ~ .net-stage .s-on, #net-on:checked ~ .net-stage .s-off { display: none; }
.net-now { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 18px; padding: 12px 16px; border-left: 4px solid var(--ro-soft); background: rgba(255, 255, 255, .08); border-radius: 0 12px 12px 0; color: #E3E3F4; }
.net-now .ico { width: 22px; height: 22px; flex: none; color: var(--ro-soft); margin-top: 2px; }
.net-now strong { color: #fff; }
.net-fig svg { display: block; width: 100%; height: auto; }
.net-fig .net-tall { max-width: 440px; margin: 0 auto; }
.net-fig .net-wide { display: none; }
@media (min-width: 700px) { .net-fig .net-wide { display: block; } .net-fig .net-tall { display: none; } }
.net-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: .9rem; color: #CFCFEA; }
.net-key span { display: inline-flex; align-items: center; gap: 6px; }
.net-key .ico { width: 18px; height: 18px; color: #6BD08F; }
@media (prefers-reduced-motion: no-preference) {
  .net .pulse { animation: net-flow 1.8s linear infinite; }
  .net .pulse.down { animation-name: net-flow2; }
  .net .halo { animation: net-halo 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes net-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -45; } }
@keyframes net-flow2 { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -23; } }
@keyframes net-halo { 0%, 100% { opacity: .15; } 50% { opacity: .4; } }
.net-notes { margin-top: 40px; }

/* ------------------------------------------------------------------ part 6: joining */
.proposed { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 700; color: var(--navy-deep); }
.join { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; counter-reset: none; }
@media (min-width: 640px) { .join { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .join { grid-template-columns: repeat(3, 1fr); } }
.join li { position: relative; background: var(--tint); border-radius: 20px; padding: 22px 22px 20px; border: 1px dashed #B9BCD8; }
.join .jn { position: absolute; right: 18px; top: 10px; font-size: 2.6rem; font-weight: 700; color: rgba(7, 7, 89, .14); line-height: 1; }
.join h3 { margin: 14px 0 6px; font-size: 1.2rem; }
.join p { margin: 0; }

/* ------------------------------------------------------------------ part 7 and 8 */
.uc { margin-top: 30px; }
.scene.warm .zcard { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.scene.warm .zcard p { color: var(--text); }
.scene.warm .zcard h3 { color: var(--navy-deep); }
.lims { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.lim { background: #fff; border-radius: 18px; padding: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.lim h3 { margin: 14px 0 6px; font-size: 1.15rem; }
.lim p { margin: 0; }
.nopromise { display: flex; gap: 12px; align-items: flex-start; margin: 30px 0 0; font-weight: 700; color: var(--navy-deep); max-width: 860px; }
.nopromise .ico { width: 24px; height: 24px; flex: none; color: var(--ro); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .hero-art *, .eh-state *, .net .pulse, .net .halo, .arch .layer { animation: none !important; }
}
.scrolly.uc .frame, .scrolly.edge-shots .frame { max-width: 720px; }
@media (min-width: 900px) { .lims { grid-template-columns: repeat(3, 1fr); } }
.cap-art { background: #F3F4FA; }
@media (max-width: 599px) { .cap-art svg { max-width: 250px; margin: 0 auto; } .dep-art img { max-height: 240px; object-fit: cover; } }

/* ================================================================== SXLA v17: specification-first EDGE page and the JEP Mobile Kit */
.ind-hw { color: var(--navy-deep); }
.ind-off { color: #1F6B3E; }
.dark .ind, .navy-scene .ind { color: #fff; }
.cap-tags { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.ind { padding: 4px 10px 4px 8px; border-radius: 999px; background: #F3F4FA; }
.ind-off { background: #E8F5EC; }
.ind-net { background: #FBEDE7; }
.ind-hw { background: #ECEDF8; }
.key .ind { background: #fff; }

/* operating modes */
.modes { margin-top: 40px; background: var(--tint); border-radius: 22px; padding: clamp(20px, 3vw, 30px); }
.modes h3 { margin: 0 0 4px; }
.modes-sub { margin: 0 0 16px; color: var(--muted); }
.modes-grid { display: grid; gap: 14px; }
@media (min-width: 800px) { .modes-grid { grid-template-columns: repeat(3, 1fr); } }
.mode { background: #fff; border-radius: 16px; padding: 16px 18px; border-top: 4px solid var(--navy-deep); }
.mode.m-slow { border-top-color: var(--ro); }
.mode.m-off { border-top-color: var(--red); }
.mode p { margin: 0; }
.mode-k { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy-deep); margin-bottom: 6px !important; }
.mode-k .ico { width: 20px; height: 20px; flex: none; }
.edge-principle { margin-top: 32px; }

/* specification panels */
.spec-panel { background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(18px, 3vw, 32px); }
.spec-panel h3 { margin: 0 0 12px; }
.spec-list { margin: 0; display: grid; }
.spec-row { display: grid; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: 0; padding-top: 4px; }
@media (min-width: 760px) { .spec-row { grid-template-columns: minmax(200px, 30%) 1fr; } }
.spec-row dt { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--navy-deep); }
.spec-row dt .ico { width: 20px; height: 20px; color: var(--ro); flex: none; margin-top: 2px; }
.spec-row dd { margin: 0; line-height: 1.55; }
.spec-row:target { background: #FFF6F2; box-shadow: -12px 0 0 #FFF6F2, 12px 0 0 #FFF6F2; }
.tbd { display: inline; font-weight: 700; color: var(--ro-dark); }
.spec-note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.spec-note .ico { width: 20px; height: 20px; color: var(--ro); flex: none; margin-top: 2px; }
.spec-links, .net-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.deps-h { margin: 44px 0 16px; }
.dep figcaption p a { color: var(--navy-deep); }

/* network tiers */
.tiers { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 10px; }
.tiers > li:not(.tier-arrow) { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #CFCFEA; line-height: 1.35; }
.tiers strong { display: block; color: #fff; }
.tiers .ico { width: 26px; height: 26px; color: var(--ro-soft); flex: none; }
.tier-arrow { display: flex; justify-content: center; color: var(--ro-soft); }
.tier-arrow .ico { transform: rotate(90deg); width: 22px; height: 22px; }
@media (min-width: 900px) {
  .tiers { grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: stretch; }
  .tier-arrow { align-items: center; }
  .tier-arrow .ico { transform: none; }
}

/* the kit */
.kit-scene .slate h2 { max-width: 15em; }
.kit-type { display: grid; grid-template-columns: 46px 1fr; gap: 16px; background: #fff; border-radius: 20px; padding: 20px 22px; border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 980px; }
.kit-type h3 { margin: 4px 0 6px; font-size: 1.2rem; }
.kit-type p { margin: 0; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.kit-fig { margin: 34px 0 0; }
.kit-fig svg, .kit-fig img { display: block; width: 100%; height: auto; }
.kit-fig img { border-radius: 20px; }
.kit-x .kit-x-tall, .kit-c .kit-c-tall { display: none; }
@media (max-width: 899px) {
  .kit-x .kit-x-wide, .kit-c .kit-c-wide { display: none; }
  .kit-x .kit-x-tall, .kit-c .kit-c-tall { display: block; max-width: 440px; margin: 0 auto; }
}
.kit-legend { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
@media (min-width: 600px) and (max-width: 899px) { .kit-legend { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .kit-legend { display: none; } }
.kit-legend li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; background: #fff; border-radius: 14px; padding: 12px 14px; border: 1px solid var(--line); }
.kit-legend strong { display: block; color: var(--navy-deep); }
.kl-n { width: 28px; height: 28px; border-radius: 50%; background: var(--ro); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.kit-sub { margin: 56px 0 18px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.ksteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
@media (min-width: 640px) { .ksteps { grid-template-columns: 1fr 1fr; } }
.kstep { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.kstep-art img { display: block; width: 100%; height: auto; }
.kstep-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kstep-body p { margin: 0; }
.kstep-n { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ro-dark); }
.kstep h4 { margin: 0; font-size: 1.2rem; color: var(--navy-deep); }
.kstep .ind { align-self: flex-start; margin-top: auto; }
.kit-two { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 900px) { .kit-two { grid-template-columns: 1fr 1fr; } }
.kit-two .kit-fig { margin: 0; }
.kit-quote { margin-top: 48px; }
.kit-quote p { color: var(--navy-deep); }
.kit-carry { max-width: 820px; color: var(--muted); }
.cfgs { display: grid; gap: 20px; }
@media (min-width: 900px) { .cfgs { grid-template-columns: repeat(3, 1fr); } }
.cfg { background: #fff; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.cfg-standard { border: 2px solid var(--navy-deep); }
.cfg-art img { display: block; width: 100%; height: auto; }
.cfg-body { padding: 16px 20px 20px; }
.cfg h4 { margin: 0; font-size: 1.3rem; color: var(--navy-deep); }
.cfg-best { margin: 2px 0 10px; color: var(--ro-dark); font-weight: 700; font-size: .95rem; }
.cfg-dl { margin: 0; display: grid; }
.cfg-dl > div { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.cfg-dl dt { color: var(--muted); }
.cfg-dl dd { margin: 0; font-weight: 700; color: var(--navy-deep); }
.kit-spec { margin-top: 48px; }
.kit-btns { margin-top: 22px; }

/* ------------------------------------------------------------------ v17: Studio specification page (pilot.html) */
.spec-toc { padding: 18px 0; background: var(--white); border-bottom: 1px solid var(--line); }
.spec-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.spec-toc a { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--tint); color: var(--navy-deep); font-weight: 700; font-size: .92rem; text-decoration: none; }
.spec-toc a:hover { background: #E3E5F3; }
.arch-chain { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: a; }
@media (min-width: 700px) { .arch-chain { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .arch-chain { grid-template-columns: repeat(6, 1fr); } }
.arch-chain li { counter-increment: a; position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: var(--tint); border: 1px solid var(--line); }
@media (min-width: 1100px) { .arch-chain li { grid-template-columns: 1fr; } }
.arch-chain li.arch-on { background: #FFF6F2; border: 1.5px dashed #EDBBA9; }
.arch-chain strong { display: block; color: var(--navy-deep); line-height: 1.3; }
.arch-chain strong::before { content: counter(a) ". "; color: var(--ro); }
.arch-chain span:not(.chip) { display: block; font-size: .92rem; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.arch-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: .92rem; color: var(--muted); }
.arch-key span + .ind { margin-left: 12px; }
.feature.comp h3, .feature.mod h3 { font-size: 1.15rem; }
.feature.comp .cap-tags { margin-top: 10px; display: flex; }
.feature.mod p { margin: 0 0 8px; font-size: .96rem; }
.spec-page .modes-grid .mode { box-shadow: var(--shadow); border: 1px solid var(--line); border-top-width: 4px; }
.cfg-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cfg-table th, .cfg-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.cfg-table thead th { background: var(--navy-deep); color: #fff; border-top: 0; }
.cfg-table tbody th { color: var(--navy-deep); width: 22%; }
.kit-teaser { margin-top: 40px; display: grid; gap: 0; background: var(--warm); border-radius: 22px; overflow: hidden; border: 1px solid var(--line); }
@media (min-width: 900px) { .kit-teaser { grid-template-columns: 1.15fr 1fr; align-items: center; } }
.kt-art img { display: block; width: 100%; height: auto; }
.kt-body { padding: clamp(20px, 3vw, 36px); }
.kt-body h3 { margin: 6px 0 8px; font-size: 1.6rem; }
.kt-body h3 a { text-decoration: none; color: var(--navy-deep); }
.spec-quote { margin: 0; padding: 26px 28px; border-radius: 20px; background: rgba(255, 255, 255, .08); border-left: 5px solid var(--ro-soft); }
.spec-quote p { margin: 0; color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; line-height: 1.3; }
/* v18 */
.cfg-note { margin: 16px 0 0; font-size: .92rem; color: var(--muted); max-width: 820px; }