/* Black Lion Digital · "The hallmark" v3 · search-engine-optimisation.html only.
   Shared tokens, nav, menu, cover grammar, buttons, .idx rows, the review wall and the audit band are main.css's.
   Here: the cover's strata (horizontal lines heaving beneath one gold line that holds), the two ways to the top,
   the hold (the page's set-piece: a results page, your row climbing to one as the work lands, the rows beneath
   surging at it and held under the hold line, the enquiries the position returns), the funnel map
   (copied from agency.css via google.css: duplicated markup until there is a build step), the SEO ledger quote,
   the method grid and the FAQ overrides. */

/* ---------- 01 cover: thirteen strata drift across the dark; the top one is gold and holds, the rest heave beneath it ---------- */
.cover--seo{background:#070707}
.cover__strata{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.8s ease}
.cover__strata.is-on{opacity:1}
.cover__strataFallback{position:absolute;inset:-6%;width:112%;height:112%;opacity:.9;transition:opacity 1.2s ease}
.cover__strataDrift{animation:strataDrift 48s var(--io) infinite alternate}
.cover__strataTop{stroke:url(#held);stroke-opacity:1;stroke-width:1.6}
@keyframes strataDrift{from{transform:translateX(-140px)}to{transform:translateX(140px)}}
.cover.is-strata .cover__strataFallback{opacity:0}
.cover--seo .cover__wash{background:linear-gradient(180deg,rgba(7,7,7,.5) 0%,rgba(7,7,7,0) 24%,rgba(7,7,7,0) 50%,rgba(7,7,7,.9) 100%),linear-gradient(90deg,rgba(7,7,7,.62) 0%,rgba(7,7,7,0) 52%)}
@media (max-width:900px){.cover__strata{display:none}}
.cover__actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 02 two ways to the top: sticky copy, two cards (the meta and google pages' grammar) ---------- */
.two{position:relative;background:var(--paper);padding:var(--section) 0}
.two__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start}
.two__copy{position:sticky;top:calc(var(--nav-h) + 24px)}
.two__copy .h2{max-width:14ch}
.two__p{margin-top:24px;max-width:50ch;font-weight:300;font-size:clamp(16px,1.15vw,18px);color:var(--ink-2)}
.two__p + .two__p{margin-top:16px}
.two__bridge{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2);max-width:50ch;font-weight:500;color:var(--ink)}
.two__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:30px}
.kinds{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.kind{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;padding:30px 32px 32px 28px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -48px rgba(15,15,15,.3)}
.kind::before{content:"";position:absolute;left:0;top:28px;bottom:28px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease) .2s}
.kind.is-in::before{transform:scaleY(1)}
.kind__n{font-weight:600;font-size:12px;letter-spacing:.26em;color:var(--gold-text);padding-top:8px}
.kind__k{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:800;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
.kind__here{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ink);padding:6px 10px;border-radius:999px;background:var(--gold)}
.kind__was{display:block;margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.kind__is{margin-top:10px;max-width:46ch;color:var(--ink-2);font-weight:300}
.kind--active{border-color:var(--gold-2)}

/* ---------- 03 the hold: a results page, your row climbing to one, the rows beneath held under the line ---------- */
.hold{position:relative;background:var(--black);color:#fff;overflow:clip;--pitch:66px;--row:58px}
.hold::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 68% 50%,rgba(227,186,28,.1),transparent 70%)}
.hold__pin{position:relative;min-height:100dvh;display:flex;align-items:center;padding:clamp(100px,12vh,140px) 0 clamp(56px,8vh,110px)}
.hold__grid{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,5vw,96px);align-items:center;width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.hold__copy .h2--xl{max-width:9ch}
.hold__intro{font-weight:300;font-size:clamp(16px,1.2vw,19px);color:rgba(255,255,255,.78);max-width:44ch;margin-top:22px}
.hold__state{margin-top:30px;display:flex;align-items:center;gap:16px;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.hold__state b{font-weight:600;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.hold__end{margin-top:18px;font-weight:500;font-size:clamp(17px,1.25vw,20px);color:#fff;max-width:40ch;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .8s var(--ease)}
.hold.is-done .hold__end,.hold.is-static .hold__end{opacity:1;transform:none}
.hold__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-height:min(640px,calc(100dvh - 250px))}
/* the results window: white paper on the dark stage, the bar on top and seven positions beneath it */
.rank{position:relative;width:min(100%,620px);border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);padding:18px 18px 22px;will-change:transform}
.rank__bar{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px 0 14px;border:1.5px solid var(--line-2);border-radius:999px;box-shadow:0 10px 24px -18px rgba(15,15,15,.5)}
.rank__g{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper-2);color:var(--ink);flex:none}
.rank__g svg{width:15px;height:15px}
.rank__q{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.rank__chip{font-style:normal;font-weight:500;font-size:13px;letter-spacing:-.01em;color:var(--ink-2);padding:5px 11px;border-radius:999px;background:var(--paper-2);border:1px dashed var(--line-2);white-space:nowrap}
.rank__lens{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--ink);flex:none;margin-left:auto}
.rank__lens svg{width:15px;height:15px}
/* the list: seven positions, the gutter numbers fixed, the rows placed by slot (top = (slot - 1) * pitch). CSS carries the FINISHED
   state (your row at one, the six competitors at two to seven); the desktop timeline starts everything lower and climbs. */
.rank__list{position:relative;margin-top:22px;height:calc(7*var(--pitch) - (var(--pitch) - var(--row)));padding-left:36px}
.rank__gut{position:absolute;left:0;top:0;width:28px}
.rank__gut li{height:var(--row);margin-bottom:calc(var(--pitch) - var(--row));display:grid;place-items:center;font-weight:600;font-size:12px;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}
.ghost,.you{position:absolute;left:36px;right:0;height:var(--row);border-radius:12px;will-change:transform,top}
.ghost{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 16px;background:#fff;border:1px solid transparent;transition:border-color .3s}
.ghost__ln{height:8px;border-radius:5px;background:var(--paper-3)}
.ghost__ln--t{width:34%;background:var(--line-2)}.ghost__ln--u{width:22%}.ghost__ln--d{width:72%}
.ghost[data-g="1"]{top:calc(1*var(--pitch))}.ghost[data-g="2"]{top:calc(2*var(--pitch))}.ghost[data-g="3"]{top:calc(3*var(--pitch))}
.ghost[data-g="4"]{top:calc(4*var(--pitch))}.ghost[data-g="5"]{top:calc(5*var(--pitch))}.ghost[data-g="6"]{top:calc(6*var(--pitch))}
/* your row: the timeline tweens --top (gold once at one) and --guard (the flash on each push it holds against) */
.you{top:0;padding:0 16px;display:flex;flex-direction:column;justify-content:center;gap:3px;background:#fff;border:1px solid var(--line);box-shadow:0 0 0 calc(1.5px * var(--top,1)) var(--gold-2),0 0 0 calc(6px * var(--guard,0)) rgba(227,186,28,calc(.28 * var(--guard,0))),0 24px 50px -36px rgba(201,161,26,calc(.7 * var(--top,1)));z-index:2}
.you::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);opacity:var(--top,1)}
.you__h{font-weight:600;font-size:clamp(14px,1.1vw,16px);letter-spacing:-.015em;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.you__sep{color:var(--muted);font-weight:300;margin:0 2px}
.you__u{font-size:11px;line-height:1.2;color:var(--muted)}
.you__work{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:3px}
.you__work li{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;line-height:1;padding:4px 7px;border-radius:999px;color:var(--ink);background:var(--gold);border:1px solid var(--gold);opacity:calc(.28 + .72 * var(--on,1));--bg:var(--on,1);transition:opacity .3s}
/* the hold line ("Ongoing SEO · holds the position"): a gold rule across the top of position one with its tag, shown once the hold begins */
.guard{position:absolute;left:36px;right:0;top:-9px;z-index:3;opacity:var(--show,1);transform:translateY(calc(-6px + 6px * var(--show,1)));transition:opacity .4s,transform .6s var(--ease);pointer-events:none}
.guard__line{display:block;height:1.5px;background:linear-gradient(90deg,var(--gold-deep),var(--gold) 40%,var(--gold-bright) 60%,var(--gold))}
.guard__tag{position:absolute;right:10px;top:-10px;display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:999px;background:var(--ink);color:var(--gold);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1;white-space:nowrap}
.guard__tag svg{width:11px;height:11px}
/* the competitors that push: the timeline lifts them toward the line and drops them back; the row tints as it pushes */
.ghost.is-push{border-color:var(--line-2)}
/* what the position returns: rises over the lower right edge of the window once the hold has held */
.yield{position:absolute;right:0;top:46%;width:min(46%,300px);padding:18px 18px 20px;border-radius:18px;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 100px -40px rgba(0,0,0,.9);opacity:0;z-index:4;will-change:transform}
.yield__k{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:10px;padding-right:96px}
.yield__h{font-weight:800;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.035em;line-height:1.05;color:#fff;max-width:14ch}
.yield__list{display:grid;gap:6px;margin-top:14px}
.yield__list li{padding:8px 10px;border-radius:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,calc(.1 + .6 * var(--on,0)));font-size:11.5px;font-weight:500;color:rgba(255,255,255,calc(.55 + .45 * var(--on,0)));transition:border-color .3s,color .3s}
.yield__stamp{position:absolute;right:14px;top:12px;padding:5px 9px;border-radius:999px;background:var(--gold);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:var(--stamp,0);transform:scale(calc(.6 + .4 * var(--stamp,0)));transition:opacity .3s,transform .4s var(--ease)}
/* static: phones, reduced motion, no GSAP. The finished state: your row at one and gold, the work on it, the line above it, the competitors beneath, the return card under the window. */
.hold.is-static .hold__pin{min-height:0}
.hold.is-static .hold__state{display:none}
.hold.is-static .hold__stage{min-height:0;gap:18px}
.hold.is-static .yield{position:relative;top:auto;right:auto;width:min(100%,620px);opacity:1;transform:none;--stamp:1}
.hold.is-static .yield__list li{--on:1}

/* ---------- 04 where it sits: the funnel map from agency.css, with this page's node lit ---------- */
.place{position:relative;background:var(--paper);padding:var(--section) 0;border-top:1px solid var(--line)}
.place__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,6vh,72px)}
.place__head .h2--xl{max-width:11ch}
.place__intro{max-width:44ch;font-weight:300;color:var(--ink-2);padding-bottom:8px}
.place__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(40px,6vh,72px)}
/* copied verbatim from agency.css (the map is shared markup until there is a build step; a change there goes here too) */
.tree{position:relative;--g:18px}
.tree__root{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:40px}
.tree__root b{font-weight:800;font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;line-height:1;color:var(--ink);padding:16px 36px;border:1.5px solid var(--ink);border-radius:999px;background:#fff}
.tree__root span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-text);margin-top:12px}
.tree__root::after{content:"";position:absolute;left:50%;bottom:0;width:1.5px;height:40px;background:var(--gold-2)}
.tree__parts{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g);padding-top:40px}
.tree__parts::before{content:"";position:absolute;left:calc(12.5% - 7px);right:calc(12.5% - 7px);top:0;height:1.5px;background:var(--gold-2)}
.node{position:relative;display:flex;flex-direction:row;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -48px rgba(15,15,15,.3)}
.node::before{content:"";position:absolute;left:50%;top:-40px;width:1.5px;height:40px;background:var(--gold-2)}
.node::after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--paper)}
.node__mark{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--gold-tint);color:var(--ink);border:1px solid var(--line);margin:0;flex:none}
.node__mark svg{width:24px;height:24px;display:block}
.node__name{font-weight:800;font-size:clamp(15px,1.15vw,18px);letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.node--sys{justify-content:center;width:min(100%,420px)}
.node--sys::before{display:none}
.tree__join{position:relative;height:44px}
.tree__join i{position:absolute;top:0;width:1.5px;height:22px;margin-left:-.75px;background:var(--gold-2)}
.tree__join i:nth-child(1){left:calc((100% - 3*var(--g))/8)}
.tree__join i:nth-child(2){left:calc((100% - 3*var(--g))/8 + (100% - 3*var(--g))/4 + var(--g))}
.tree__join i:nth-child(3){left:calc((100% - 3*var(--g))/8 + 2*((100% - 3*var(--g))/4 + var(--g)))}
.tree__join i:nth-child(4){left:calc((100% - 3*var(--g))/8 + 3*((100% - 3*var(--g))/4 + var(--g)))}
.tree__join::before{content:"";position:absolute;left:calc(12.5% - 7px);right:calc(12.5% - 7px);top:22px;height:1.5px;background:var(--gold-2)}
.tree__join::after{content:"";position:absolute;left:50%;top:22px;width:1.5px;height:22px;background:var(--gold-2)}
.tree__lower{display:flex;flex-direction:column;align-items:center}
.tree__tier{position:relative;display:flex;justify-content:center;width:100%}
.tree__tier--end{margin-top:44px}
.tree__tier--end::before{content:"";position:absolute;left:50%;top:-44px;width:1.5px;height:44px;background:var(--gold-2)}
.tree__end{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.tree__end b{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(160deg,var(--gold-bright),var(--gold-2));color:var(--ink);font-weight:800;font-size:32px;line-height:1;box-shadow:0 20px 40px -20px rgba(201,161,26,.6)}
.tree__endName{font-weight:800;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-top:4px}
/* this page's node */
.node.is-here{border-color:var(--gold-2);box-shadow:0 0 0 1.5px var(--gold-2),0 30px 70px -48px rgba(15,15,15,.3)}
.node.is-here .node__mark{background:var(--gold);border-color:var(--gold)}
.node__here{margin-left:auto;flex:none;font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold-text);padding:4px 8px;border-radius:999px;background:var(--gold-tint);border:1px solid var(--gold-2)}

/* ---------- 05 the ledger, SEO: one cleared quote, no figure ---------- */
.assay{position:relative;background:#fff;padding:var(--section) 0;border-top:1px solid var(--line)}
.assay__head{margin-bottom:clamp(40px,6vh,72px)}
.assay__head .h2--xl{max-width:14ch}
.quote{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(28px,3.4vw,48px) clamp(28px,3.4vw,52px);background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px -48px rgba(15,15,15,.3)}
.quote::before{content:"\201C";position:absolute;left:clamp(18px,2.4vw,34px);top:-.02em;font-weight:800;font-size:clamp(120px,12vw,200px);line-height:1;color:var(--gold);opacity:.22;pointer-events:none}
.quote__q{position:relative;padding-top:clamp(8px,1.2vw,18px)}
.quote__q p{font-weight:500;font-size:clamp(20px,1.9vw,30px);letter-spacing:-.025em;line-height:1.3;color:var(--ink);max-width:34ch;text-wrap:pretty}
.quote__who{display:flex;flex-direction:column;gap:4px;padding-bottom:4px;white-space:nowrap}
.quote__who strong{font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink)}
.quote__who span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-text)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.6vw,32px);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -48px rgba(15,15,15,.3)}
.assay__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:26px}
.assay__src{font-size:13px;color:var(--muted);max-width:60ch}

/* ---------- 06 how we run it: six rules in a hairline grid, then the suitability strip ---------- */
.method{position:relative;background:var(--paper);padding:var(--section) 0;border-top:1px solid var(--line)}
.method__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:end}
.method__head .h2--xl{max-width:12ch}
.method__intro{max-width:44ch;font-weight:300;color:var(--ink-2);padding-bottom:8px}
.rules{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,6vh,72px);border-top:1px solid var(--line-2)}
.rule{padding:26px 28px 28px 0;border-bottom:1px solid var(--line-2)}
.rule:nth-child(3n+2),.rule:nth-child(3n){padding-left:28px;border-left:1px solid var(--line-2)}
.rule i{display:block;font-style:normal;font-weight:600;font-size:12px;letter-spacing:.26em;color:var(--gold-text);margin-bottom:12px}
.rule b{display:block;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.rule p{margin-top:8px;font-size:15px;color:var(--ink-2);font-weight:300;max-width:34ch}
.only{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-top:clamp(28px,4vh,44px);padding:clamp(22px,2.6vw,32px);background:var(--ink);color:#fff;border-radius:20px}
.only__marks{display:flex;gap:8px}
.only__marks span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);color:var(--gold)}
.only__marks svg{width:22px;height:22px}
.only p{font-weight:300;color:rgba(255,255,255,.82);max-width:70ch}
.only p b{font-weight:600;color:#fff}

/* ---------- 08 questions: the services index rows, reused (the agency page's overrides) ---------- */
.faq .idx__btn{grid-template-columns:72px 1fr 56px}
.faq .idx__name{font-weight:600;font-size:clamp(18px,1.75vw,27px);letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.faq .idx__row::before{font-size:clamp(80px,9vw,150px)}
.faq .idx__panelIn p{padding-bottom:28px}
.faq .idx__panelIn p + .link{margin-top:-16px}

/* ---------- 09 the audit: the band without the form ---------- */
.audit__cta{gap:16px}
.audit__cta .label{margin-bottom:0;color:var(--gold)}
.audit__cta .label::before{background:var(--gold)}
.audit__cta > p:not(.label){color:rgba(255,255,255,.8);font-weight:300}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .two__grid,.hold__grid{grid-template-columns:1fr}
  .two__copy{position:static}
  .hold__grid{gap:40px}
  .hold__copy .h2--xl,.place__head .h2--xl,.method__head .h2--xl{max-width:none}
  .place__head,.method__head{grid-template-columns:1fr;align-items:start}
  .cards{grid-template-columns:1fr 1fr}
  .rules{grid-template-columns:1fr 1fr}
  .rule:nth-child(3n+2),.rule:nth-child(3n){padding-left:0;border-left:0}
  .rule:nth-child(2n){padding-left:28px;border-left:1px solid var(--line-2)}
  .quote{grid-template-columns:1fr;align-items:start}
  /* the tree becomes a rail: Agency top-left, the four cards stacked beside a vertical gold line (agency.css) */
  .tree__root{align-items:flex-start;text-align:left;padding-bottom:28px}
  .tree__root::after{left:31px;height:28px}
  .tree__parts{grid-template-columns:1fr;padding-top:0;padding-left:60px;gap:16px}
  .tree__parts::before{left:31px;right:auto;top:0;bottom:0;width:1.5px;height:auto}
  .node::before{left:-29px;top:50%;width:29px;height:1.5px}
  .node::after{left:-33px;top:50%;margin:-4.5px 0 0 0}
  .tree__join{display:none}
  .tree__lower{align-items:stretch;padding-left:60px;margin-top:16px}
  .tree__tier{justify-content:flex-start}
  .tree__tier::before{content:"";position:absolute;left:-29px;top:-16px;bottom:0;width:1.5px;background:var(--gold-2)}
  .tree__tier--end{margin-top:16px}
  .tree__tier--end::before{left:-29px;top:-16px;bottom:auto;height:54px}
  .node--sys{width:100%}
  .node--sys::before{display:block}
  .tree__end{align-items:flex-start;text-align:left}
  .tree__end::before{content:"";position:absolute;left:-29px;top:38px;width:29px;height:1.5px;background:var(--gold-2)}
  .tree__end::after{content:"";position:absolute;left:-33px;top:38px;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--paper)}
}
@media (max-width:900px){
  .hold__pin{min-height:0;padding:var(--section) 0}
  .hold__stage{min-height:0}
  .rank{width:100%;padding:14px 12px 16px}
  .rank__bar{height:48px}
  .faq .idx__btn{grid-template-columns:44px 1fr 44px}
  .faq .idx__name{text-wrap:pretty}
  .only{grid-template-columns:1fr;gap:16px}
}
@media (max-width:640px){
  .kind{grid-template-columns:1fr;gap:10px;padding:24px 22px 26px}
  .cards{grid-template-columns:1fr}
  .rules{grid-template-columns:1fr}
  .rule:nth-child(2n){padding-left:0;border-left:0}
  .rule{padding-right:0}
  .tree__root::after{left:23px}
  .tree__parts{padding-left:44px}
  .tree__parts::before{left:23px}
  .node::before{left:-21px;width:21px}
  .node::after{left:-25px}
  .tree__lower{padding-left:44px}
  .tree__tier::before,.tree__tier--end::before{left:-21px}
  .tree__end::before{left:-21px;width:21px}
  .tree__end::after{left:-25px}
  .tree__root b{padding:12px 24px}
  .node__here{display:none}
  .cover__actions{width:100%}
  .cover__actions .btn{width:100%}
  .two__actions .btn{width:100%}
  .quote{padding:26px 22px 28px}
  .quote__q{padding-top:22px}
  .quote__who{white-space:normal}
  .quote__who span{line-height:1.5}
  .quote::before{left:14px}
  .hold{--pitch:68px;--row:60px}
  .rank__list{padding-left:30px}
  .ghost,.you{left:30px}
  .you{padding:0 10px}
  .guard{left:30px}
  .rank__chip{font-size:12px;padding:4px 9px}
  .guard__tag{font-size:8.5px;right:6px}
  .you__work{flex-wrap:nowrap;overflow:hidden;gap:4px}
  .you__work li{font-size:8px;letter-spacing:.02em;padding:3px 5px;white-space:nowrap;flex:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cover__strata{display:none}
  .cover__strataDrift{animation:none}
  .hold__pin{min-height:0}
  .hold__state{display:none}
  .hold__end{opacity:1;transform:none}
  .hold__stage{min-height:0;gap:18px}
  .yield{position:relative;top:auto;right:auto;width:min(100%,620px);opacity:1;transform:none;--stamp:1}
  .yield__list li{--on:1}
  .kind::before{transform:none}
}