/* ============================================================
   ALITHOS — guides layer (guides hub + guide pages)
   Loaded after guide.css; js/guides.js adds the hooks. Every hidden or
   moving state is gated on html.m-on (set by motion.js only when motion
   is allowed), so with JS off or reduced motion everything is visible.
   ============================================================ */

/* ---------- H2 section markers: "03 ——" above each section heading ---------- */
.article-body{counter-reset:gsec}
.article-body > h2{counter-increment:gsec}
.article-body > h2::before{
  content:counter(gsec, decimal-leading-zero);
  content:counter(gsec, decimal-leading-zero) / "";
  display:block; width:max-content; padding-right:74px; margin-bottom:12px;
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.2em; line-height:1.4; color:var(--teal-deep);
  background:linear-gradient(90deg, var(--teal), rgba(212,167,44,.85) 70%, rgba(212,167,44,0)) no-repeat;
  background-position:2.9em 52%; background-size:60px 1px;
}
html.m-on .article-body > h2.m-r::before{opacity:0; transform:translateX(-10px); background-size:0 1px; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), background-size 1.1s cubic-bezier(.5,0,.2,1); transition-delay:calc(var(--md,0s) + .1s), calc(var(--md,0s) + .1s), calc(var(--md,0s) + .35s)}
html.m-on .article-body > h2.m-in::before{opacity:1; transform:none; background-size:60px 1px}

/* ---------- the short answer glows in ---------- */
.answer{position:relative; overflow:hidden; isolation:isolate; border-left:0; padding-left:26px; box-shadow:0 10px 30px -22px rgba(27,111,184,.45)}
.answer::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(180deg, var(--teal-hi), var(--teal) 55%, var(--gold)); transform-origin:top}
.answer::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; background:linear-gradient(105deg, transparent 30%, rgba(92,188,245,.22) 48%, rgba(255,255,255,.55) 50%, rgba(92,188,245,.22) 52%, transparent 70%); background-size:250% 100%; background-position:120% 0}
.answer .answer-k{display:inline-flex; align-items:center; gap:8px}
.answer .answer-k::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(46,159,232,.5)}
html.m-on .answer::before{transform:scaleY(0); transition:transform 1s cubic-bezier(.5,0,.2,1) .15s}
html.m-on .answer.m-in::before{transform:scaleY(1)}
html.m-on .answer.m-in{animation:gAnswer 2.6s ease .3s both}
html.m-on .answer.m-in::after{animation:gSweep 1.8s cubic-bezier(.4,0,.2,1) .55s both}
html.m-on .answer.m-in .answer-k::before{animation:gPing 1.6s ease-out .8s 3}
@keyframes gAnswer{
  0%{box-shadow:0 0 0 0 rgba(46,159,232,0), 0 10px 30px -22px rgba(27,111,184,0)}
  35%{box-shadow:0 0 0 1px rgba(46,159,232,.45), 0 22px 54px -14px rgba(46,159,232,.5)}
  100%{box-shadow:0 0 0 0 rgba(46,159,232,0), 0 10px 30px -22px rgba(27,111,184,.45)}
}
@keyframes gSweep{0%{opacity:1; background-position:120% 0} 100%{opacity:1; background-position:-30% 0}}
@keyframes gPing{0%{box-shadow:0 0 0 0 rgba(46,159,232,.55)} 100%{box-shadow:0 0 0 10px rgba(46,159,232,0)}}

/* ---------- key figures: a glowing rule draws across the top ---------- */
.key-figures .kf{position:relative; overflow:hidden}
.key-figures .kf::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--teal), var(--teal-hi) 60%, var(--gold)); transform-origin:left}
html.m-on .key-figures .kf.m-r::before{transform:scaleX(0); transition:transform 1.1s cubic-bezier(.5,0,.2,1); transition-delay:calc(var(--md,0s) + .3s)}
html.m-on .key-figures .kf.m-in::before{transform:scaleX(1)}

/* ---------- cost / compare tables: money bars, row + column highlight ---------- */
.article-body td.g-money{position:relative; padding-bottom:20px; font-variant-numeric:tabular-nums; white-space:nowrap}
.g-bar{position:absolute; left:16px; right:16px; bottom:8px; height:3px; border-radius:2px; background:rgba(14,34,51,.07); overflow:hidden; pointer-events:none}
.g-bar i{position:absolute; top:0; bottom:0; left:var(--a); width:var(--b); border-radius:2px; background:linear-gradient(90deg, var(--teal-deep), var(--teal)); transform-origin:left; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--md,0s) + .3s)}
.g-bar b{position:absolute; top:0; bottom:0; left:0; width:var(--a); background:linear-gradient(90deg, rgba(46,159,232,.14), rgba(46,159,232,.42)); transform-origin:left; transition:transform 1s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--md,0s) + .2s)}
html.m-on tr.m-r:not(.m-in) .g-bar i, html.m-on tr.m-r:not(.m-in) .g-bar b{transform:scaleX(0)}
.article-body tbody tr td, .article-body tbody tr th{transition:background-color .25s, color .25s}
.article-body tbody tr:hover td, .article-body tbody tr:hover th{background-color:#E7F2FB}
.article-body tbody tr:hover td{color:var(--ink)}
.article-body td.g-col, .article-body th.g-col{background-color:#F0F7FD}
.article-body tbody tr:hover td.g-col{background-color:#D9ECFA}
.article-body thead th.g-col{color:var(--teal-deep)}
@media (max-width:640px){ .g-bar{left:12px; right:12px} .article-body td.g-money{padding-bottom:18px} }

/* ---------- steps: numbers pop, a connector draws down to the next step ---------- */
.steps > li::after{content:""; position:absolute; left:15px; top:40px; bottom:4px; width:2px; border-radius:1px; background:linear-gradient(180deg, rgba(46,159,232,.55), rgba(46,159,232,.08)); transform-origin:top}
.steps > li:last-child::after{display:none}
.steps > li::before{transition:box-shadow .5s, background .5s}
html.m-on .steps > li.m-r::before{transform:scale(.4); opacity:0; transition:transform .6s cubic-bezier(.3,1.6,.5,1), opacity .4s, background .5s, box-shadow .5s; transition-delay:calc(var(--md,0s) + .1s)}
html.m-on .steps > li.m-in::before{transform:none; opacity:1; background:linear-gradient(135deg, var(--ink), var(--teal-deep)); box-shadow:0 0 0 4px rgba(46,159,232,.14), 0 6px 16px -6px rgba(27,111,184,.7)}
html.m-on .steps > li.m-r::after{transform:scaleY(0); transition:transform 1s cubic-bezier(.5,0,.2,1); transition-delay:calc(var(--md,0s) + .35s)}
html.m-on .steps > li.m-in::after{transform:scaleY(1)}

/* ---------- checklists: ticks draw in one after another ---------- */
.checklist li::before{transition:transform .45s cubic-bezier(.3,1.6,.5,1), opacity .3s; transition-delay:calc(var(--gi,0) * 70ms + .25s)}
html.m-on .m-r:not(.m-in) .checklist li::before, html.m-on .checklist.m-r:not(.m-in) li::before{opacity:0; transform:rotate(-45deg) scale(.2)}

/* ---------- callouts: accent bar draws down the left edge ---------- */
.callout{position:relative; overflow:hidden}
.callout::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--teal), var(--teal-hi)); transform-origin:top}
.callout.warn::before{background:linear-gradient(180deg, var(--gold), #E6C58A)}
html.m-on .callout.m-r::before{transform:scaleY(0); transition:transform 1s cubic-bezier(.5,0,.2,1); transition-delay:calc(var(--md,0s) + .3s)}
html.m-on .callout.m-in::before{transform:scaleY(1)}

/* ============================================================
   HUB (guides/index.html)
   ============================================================ */
.g-sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* card top row: icon · reading-order badge · read-time chip */
.g-card{display:flex!important; flex-direction:column}
.g-top{display:flex; align-items:center; gap:10px; margin-bottom:16px; min-height:44px}
.g-ico{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border:1px solid rgba(92,188,245,.28); border-radius:10px; background:radial-gradient(circle at 50% 40%, rgba(46,159,232,.16), rgba(46,159,232,0) 70%); transition:border-color .3s, box-shadow .3s}
.g-ico svg{width:26px; height:26px; overflow:visible}
.g-ico path, .g-ico circle{fill:none; stroke:var(--teal-hi); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; filter:drop-shadow(0 0 3px rgba(46,159,232,.55))}
.hub-card:hover .g-ico, .hub-card:focus-visible .g-ico{border-color:rgba(92,188,245,.7); box-shadow:0 0 18px -4px rgba(46,159,232,.7)}
html.m-on .g-card.m-r .g-ico path, html.m-on .g-card.m-r .g-ico circle{stroke-dashoffset:1}
html.m-on .g-card.m-in .g-ico path, html.m-on .g-card.m-in .g-ico circle{animation:gDraw 1.2s cubic-bezier(.5,0,.2,1) forwards; animation-delay:calc(var(--md,0s) + .25s + var(--pi) * 90ms)}
html.m-on .g-card.m-in.g-rdx .g-ico path, html.m-on .g-card.m-in.g-rdx .g-ico circle{animation-name:gDrawB; animation-duration:.9s; animation-delay:calc(var(--pi) * 60ms)}
html.m-on .g-card.m-in.g-rdx.g-rd .g-ico path, html.m-on .g-card.m-in.g-rdx.g-rd .g-ico circle{animation-name:gDrawC}
@keyframes gDraw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@keyframes gDrawB{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@keyframes gDrawC{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
.g-chip{margin-left:auto; flex:none; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); border:1px solid var(--line-d2); border-radius:999px; padding:5px 10px; line-height:1; background:rgba(6,18,29,.35); transition:color .3s, border-color .3s}
.hub-card:hover .g-chip{color:var(--light); border-color:rgba(92,188,245,.5)}
.g-step{font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--void); background:var(--gold); border-radius:999px; padding:5px 10px; line-height:1; opacity:0; transform:scale(.6); transition:opacity .35s, transform .45s cubic-bezier(.3,1.6,.5,1)}
.g-step:empty{padding:0}
.g-card.g-hit .g-step:not(:empty){opacity:1; transform:none}
.g-card h3{line-height:1.28; transition:color .3s}
.g-card:hover h3{color:#fff}

/* start-here path selector */
.g-path{margin:6px 0 22px}
.g-path-k{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:0 0 10px!important}
.g-path-btns{position:relative; display:flex; flex-wrap:wrap; gap:8px}
.g-path-btns button{position:relative; z-index:1; min-height:44px; padding:10px 16px; font:600 .9rem/1.2 var(--body); color:var(--ink); background:transparent; border:1px solid var(--line-l); border-radius:999px; cursor:pointer; transition:color .3s, border-color .3s}
.g-path-btns button:hover{border-color:var(--teal)}
.g-path-btns button[aria-pressed="true"]{color:#fff; border-color:transparent}
.g-path-ink{position:absolute; left:0; top:0; z-index:0; border-radius:999px; background:linear-gradient(135deg, var(--ink), var(--teal-deep)); box-shadow:0 8px 22px -10px rgba(27,111,184,.8), 0 0 0 3px rgba(46,159,232,.14); transition:transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), height .5s; pointer-events:none}
@media (max-width:520px){
  .g-path-btns{display:grid; grid-template-columns:1fr 1fr}
  .g-path-btns button{padding:10px 12px; font-size:.86rem; text-align:center}
}
.g-path-status{font-size:.9rem!important; color:var(--slate)!important; margin:10px 0 0!important; min-height:1.4em}
.g-path-status:empty{min-height:0; margin:0!important}

/* filtering: hits glow, the rest step back (links stay usable) */
.hub-grid .g-card{transition:border-color .3s, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, opacity .45s, filter .45s}
/* dimmed cards keep their dark panel (no muddy grey wash on the light page); only their content steps back */
.hub-grid .g-card > *{transition:opacity .45s, filter .45s}
html .article-body.g-filtering .g-card.g-dim{border-color:rgba(159,180,196,.12); box-shadow:none}
html .article-body.g-filtering .g-card.g-dim > *{opacity:.38; filter:saturate(.2)}
html .article-body.g-filtering .g-card.g-dim:hover > *, html .article-body.g-filtering .g-card.g-dim:focus-visible > *{opacity:.9; filter:none}
.g-card.g-hit{border-color:var(--teal); box-shadow:0 0 0 1px rgba(46,159,232,.55), 0 20px 44px -18px rgba(46,159,232,.75)}
html.m-on .article-body.g-filtering .g-card.g-hit{transform:translateY(-4px)}

/* hero: project journey line (960px+: right of the headline; smaller screens: under the byline) */
.g-journey{display:block; pointer-events:none; overflow:visible}
.g-jd{position:absolute; z-index:0; right:max(16px, calc((100vw - 1320px) / 2)); top:50%; width:min(32vw, 430px); transform:translateY(-38%)}
.g-jm{width:100%; max-width:460px; margin-top:30px}
/* space for the compact journey is reserved before JS runs (no layout shift) */
.g-jm-slot{width:100%; max-width:460px; aspect-ratio:360/96; margin-top:30px}
.g-jm-slot .g-jm{margin:0; height:100%}
@media (max-width:959px){ .g-jd{display:none} }
@media (min-width:960px){ .g-jm, .g-jm-slot{display:none} }
.g-journey .g-j-base{fill:none; stroke:rgba(159,180,196,.28); stroke-width:1.2; stroke-dasharray:3 6}
.g-journey .g-j-line{fill:none; stroke:var(--teal-hi); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(46,159,232,.8))}
.g-journey .g-j-dim{fill:none; stroke:rgba(212,167,44,.6); stroke-width:1}
.g-journey .g-j-cap{fill:rgba(212,167,44,.85); font:600 9px var(--mono); letter-spacing:.18em}
.g-journey .g-halo{fill:rgba(46,159,232,.14); stroke:none; transform-box:fill-box; transform-origin:center}
.g-journey .g-ring{fill:var(--void); stroke:var(--teal-hi); stroke-width:1.6; filter:drop-shadow(0 0 5px rgba(46,159,232,.8))}
.g-journey .g-core{fill:var(--gold)}
.g-journey .g-j-t{fill:var(--light); font:700 11px var(--mono); letter-spacing:.16em}
.g-journey .g-j-n{fill:var(--teal-hi)}
.g-journey .g-j-s{fill:rgba(159,180,196,.85); font:600 8.5px var(--mono); letter-spacing:.1em}
.g-jm .g-j-t{font-size:12px; letter-spacing:.1em}
.g-journey .g-spark{fill:#fff; filter:drop-shadow(0 0 6px rgba(92,188,245,1))}
.g-journey .g-node{transform-box:fill-box; transform-origin:center}
html.m-on .g-journey .g-j-line{stroke-dashoffset:1; animation:gDraw 2.6s cubic-bezier(.55,0,.25,1) .45s forwards}
html.m-on .g-journey .g-node{opacity:0; animation:gNode .7s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay:calc(var(--ni) * .62s + .5s)}
html.m-on .g-journey .g-halo{animation:gHalo 3.2s ease-in-out infinite; animation-delay:calc(var(--ni) * .8s + 2.8s)}
@keyframes gNode{from{opacity:0; transform:translateY(8px) scale(.85)} to{opacity:1; transform:none}}
@keyframes gHalo{0%,100%{transform:scale(1); opacity:.9} 50%{transform:scale(1.55); opacity:.25}}

@media (prefers-reduced-motion: reduce){
  html.m-on .article-body > h2.m-r::before, html.m-on .answer::before, html.m-on .key-figures .kf.m-r::before, html.m-on .callout.m-r::before,
  html.m-on .steps > li.m-r::before, html.m-on .steps > li.m-r::after{opacity:1!important; transform:none!important; background-size:60px 1px; transition:none!important}
  .answer, .answer::after, .answer .answer-k::before, .g-journey *, .g-ico path, .g-ico circle{animation:none!important}
  .g-ico path, .g-ico circle, .g-journey .g-j-line{stroke-dashoffset:0!important}
  .g-journey .g-node{opacity:1!important}
  .g-bar i, .g-bar b{transform:none!important; transition:none!important}
  .checklist li::before{transform:rotate(-45deg)!important; opacity:1!important}
  .g-path-ink, .hub-grid .g-card, .hub-grid .g-card > *, .g-step{transition:none!important}
}