/* ============================================================ */
/* LINK BUILDING PAGE — page-specific styles                      */
/* Loads AFTER https://www.lynxseo.com/style.css. Anything here  */
/* that shares a selector with the shared sheet is an             */
/* intentional override, not a duplicate.                         */
/* ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/* ===== HERO / ANSWER (spoke) ===== */
.sub-hero{padding:140px 0 40px;position:relative}
.sub-hero .eyebrow{margin-bottom:20px}
.sub-hero h1{font-family:var(--display);font-size:clamp(32px,4.6vw,60px);line-height:1.04;letter-spacing:-1px;max-width:20ch;margin-bottom:22px}
.sub-hero .lede{font-size:clamp(15px,1.5vw,18px);color:var(--text);max-width:60ch;line-height:1.6;margin-bottom:28px}
.sub-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--muted);margin-bottom:26px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--green)}
.answer{border:1px solid var(--line);border-left:3px solid var(--pur);border-radius:0 12px 12px 0;background:var(--panel);padding:26px 30px;max-width:900px}
.answer p{font-size:15px;line-height:1.65;color:var(--text)}.answer p b{color:#fff;font-weight:500}

/* ===== DELIVERABLES / PROCESS / CONTRAST ===== */
.del-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.del{background:none;border:0;padding:0;height:224px;perspective:1200px;cursor:pointer}
.del-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.del:hover .del-inner,.del:focus-visible .del-inner,.del.flip .del-inner{transform:rotateY(180deg)}
.del-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line);border-radius:12px;padding:24px 22px;background:var(--panel);display:flex;flex-direction:column;overflow:hidden}
.del .dn{font-family:var(--mono);font-size:11px;color:var(--green);letter-spacing:1px;margin-bottom:12px}
.del-front h4{font-family:var(--display);font-size:15px;margin-bottom:10px;line-height:1.25}
.del-front .dk{font-size:12.5px;color:var(--muted);line-height:1.5}
.del-front .flip-hint{margin-top:auto;font-family:var(--mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.del-back{transform:rotateY(180deg);border-color:rgba(62,224,138,.4);background:linear-gradient(180deg,#101a15,#0e120f)}
.del-back p{font-size:12px;color:var(--text);line-height:1.5}
.del-back .pay{margin-top:auto;padding-top:10px;font-size:12px;color:#fff;line-height:1.45}
.del-back .pay b{color:var(--green)}
@media (max-width:900px){.del{height:auto;min-height:210px}}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.proc-step{border:1px solid var(--line);border-radius:12px;padding:24px 20px;background:var(--panel)}
.proc-step .ps-n{font-family:var(--mono);font-size:12px;color:var(--red);letter-spacing:1px;margin-bottom:12px}
.proc-step h4{font-family:var(--display);font-size:14.5px;margin-bottom:8px}
.proc-step p{font-size:12px;color:var(--muted);line-height:1.5}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pillar{border:1px solid var(--line);border-radius:12px;padding:26px;background:var(--panel)}
.pillar h4{font-family:var(--display);font-size:16px;margin-bottom:10px}
.pillar p{font-size:13px;color:var(--text);line-height:1.6}
.pillar.bad{border-left:3px solid var(--red)}.pillar.good{border-left:3px solid var(--green)}
.pillar .tagx{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}
.pillar.bad .tagx{color:var(--red)}.pillar.good .tagx{color:var(--green)}
@media (max-width:900px){ .del-grid{grid-template-columns:1fr} .proc-grid{grid-template-columns:1fr 1fr} .two-col{grid-template-columns:1fr} }
@media (max-width:560px){ .proc-grid{grid-template-columns:1fr} }

/* ===== AUTHORITY MAP ===== */
.authority-map{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#11111a,#0d0d14);overflow:hidden}
.map-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.map-title{font-family:'Press Start 2P',var(--mono);font-size:11px;line-height:1.5;color:#fff}
.map-status{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green)}
.map-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:18px}
/* NOTE: root style.css also defines a bare .map-node (from the homepage's
   AI Visibility Map). That rule is absolutely positioned and starts at
   opacity:0, which would otherwise leak onto this page's grid-based
   authority-map nodes. The resets below neutralize those properties. */
.map-node{position:static;transform:none;z-index:auto;opacity:1;display:block;white-space:normal;min-height:112px;padding:15px 12px;background:var(--panel);border:1px solid var(--line);border-radius:7px;color:var(--text);font-family:var(--mono);text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}
.map-node:hover,.map-node.on{transform:translateY(-2px);border-color:var(--purt);background:rgba(75,62,173,.16)}
.map-node:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.map-node .mn{display:block;font-size:9px;letter-spacing:1px;color:var(--red);margin-bottom:10px}
.map-node .mt{display:block;font-family:var(--display);font-size:11.5px;line-height:1.35;color:#fff}
.map-panels{border-top:1px solid var(--line)}
.map-panel{display:none;grid-template-columns:.75fr 1.25fr;gap:28px;padding:28px}
.map-panel.on{display:grid;animation:fadeUp .3s ease both}
.map-panel h3{font-size:20px;margin-bottom:9px}
.map-panel .mp-tag{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--green)}
.map-panel p{font-size:13px;line-height:1.7}
.map-panel .mp-outcome{margin-top:13px;padding:12px 14px;border-left:2px solid var(--red);background:rgba(237,54,49,.07);color:#fff}
.map-noscript{padding:0 28px 24px;color:var(--muted);font-size:12px}
@media (max-width:900px){.map-grid{grid-template-columns:repeat(2,1fr)}.map-panel{grid-template-columns:1fr}}
@media (max-width:560px){.map-grid{grid-template-columns:1fr}.map-node{min-height:0}.map-top{align-items:flex-start;flex-direction:column}}

/* ===== SIGNATURE: LINK OR SPAM GAME ===== */
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes flashG{0%{box-shadow:0 0 0 0 rgba(62,224,138,.6)}100%{box-shadow:0 0 0 22px rgba(62,224,138,0)}}
@keyframes flashR{0%{box-shadow:0 0 0 0 rgba(237,54,49,.6)}100%{box-shadow:0 0 0 22px rgba(237,54,49,0)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
#linkgame{width:100%;max-width:560px;margin:0 auto;background:linear-gradient(180deg,#141020,#0c0a14);border:1px solid var(--line);border-radius:16px;box-shadow:0 40px 100px -40px rgba(0,0,0,.9);overflow:hidden;position:relative}
#linkgame .mk-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
#linkgame .mk-bulbs{display:flex;gap:6px}
#linkgame .mk-bulbs i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:blink 1.1s steps(1) infinite}
#linkgame .mk-bulbs i:nth-child(2){animation-delay:.35s}#linkgame .mk-bulbs i:nth-child(3){animation-delay:.7s}
#linkgame .mk-title{font-family:var(--display);font-size:15px;letter-spacing:2px;color:#fff}
#linkgame .mk-title .o{color:var(--amber)}
#linkgame .mk-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
#linkgame .hud{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
#linkgame .hud div{background:var(--bg-2);padding:12px 10px;text-align:center}
#linkgame .hud .hl{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
#linkgame .hud .hv{font-family:var(--display);font-size:20px;color:#fff;margin-top:4px}
#linkgame #hAuth{color:var(--green)}#linkgame #hStreak{color:var(--amber)}
#linkgame .brief{padding:14px 20px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);text-align:center;line-height:1.5}
#linkgame .brief b{color:var(--purt);font-weight:500}
#linkgame .stage{position:relative;padding:26px 22px 22px;min-height:300px}
#linkgame .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;animation:cardIn .35s cubic-bezier(.16,.8,.3,1)}
#linkgame .card.good{animation:cardIn .35s cubic-bezier(.16,.8,.3,1),flashG .5s ease}
#linkgame .card.bad{animation:cardIn .35s cubic-bezier(.16,.8,.3,1),flashR .5s ease}
#linkgame .card.wrong{animation:shake .4s ease}
#linkgame .dom{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
#linkgame .dom-name{font-family:var(--mono);font-size:17px;color:#fff;word-break:break-all}
#linkgame .dom-badge{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:3px 8px}
#linkgame .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
#linkgame .stat{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 13px}
#linkgame .stat .sl{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
#linkgame .stat .sv{font-family:var(--display);font-size:17px;color:#fff;margin-top:5px}
#linkgame .about{font-size:12.5px;color:var(--text);line-height:1.55;border-top:1px solid var(--line);padding-top:13px}
#linkgame .about .at{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
#linkgame .controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 22px 16px}
#linkgame .btn{display:block;text-align:center;font-family:var(--mono);font-size:14px;letter-spacing:1px;text-transform:uppercase;padding:16px;border-radius:8px;border:1px solid;cursor:pointer;transition:transform .12s,box-shadow .18s;background:transparent}
#linkgame .btn small{display:block;font-size:9px;letter-spacing:1px;opacity:.6;margin-top:3px}
#linkgame .btn:hover{transform:translateY(-2px)}
#linkgame .btn:active{transform:translateY(0)}
#linkgame .btn.kill{border-color:var(--red);color:#ff8a86}#linkgame .btn.kill:hover{background:rgba(237,54,49,.12);box-shadow:0 10px 26px -12px var(--red)}
#linkgame .btn.keep{border-color:var(--green);color:#9dfbc8}#linkgame .btn.keep:hover{background:rgba(62,224,138,.12);box-shadow:0 10px 26px -12px var(--green)}
#linkgame .btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
#linkgame .fb{min-height:52px;padding:0 22px 18px;text-align:center;font-size:12.5px;line-height:1.5;transition:opacity .2s}
#linkgame .fb .fh{font-family:var(--display);font-size:13px;letter-spacing:.5px}
#linkgame .fb.ok .fh{color:var(--green)}#linkgame .fb.no .fh{color:var(--red)}
#linkgame .fb .fw{color:var(--muted);margin-top:4px}
#linkgame .fb .fp{font-family:var(--display);font-size:12px;margin-top:4px}
#linkgame .fb.ok .fp{color:var(--green)}#linkgame .fb.no .fp{color:var(--red)}
#linkgame .prog{height:5px;background:var(--bg-2);display:flex;gap:2px;padding:0 3px 3px}
#linkgame .prog i{flex:1;height:100%;background:#20202e;border-radius:3px}
#linkgame .prog i.done{background:var(--purt)}
#linkgame .prog i.miss{background:var(--red)}
#linkgame .over{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,20,.97),rgba(10,10,15,.99));display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:5}
#linkgame .over.show{display:flex;animation:cardIn .4s ease}
#linkgame .over .grade{font-family:var(--display);font-size:clamp(22px,6vw,32px);margin-bottom:6px}
#linkgame .over .gsub{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:22px}
#linkgame .over .oScores{display:flex;gap:26px;margin-bottom:22px}
#linkgame .over .oScores div{text-align:center}
#linkgame .over .oScores .n{font-family:var(--display);font-size:26px;color:#fff}
#linkgame .over .oScores .n.g{color:var(--green)}
#linkgame .over .oScores .l{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:4px}
#linkgame .over .pitch{font-size:13px;color:var(--text);max-width:34ch;line-height:1.6;margin-bottom:24px}
#linkgame .over .pitch b{color:#fff;font-weight:500}
#linkgame .over .oBtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
#linkgame .over a.cta,#linkgame .over button.again{font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:14px 22px;border-radius:6px;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .18s}
#linkgame .over a.cta{background:var(--red);border:1px solid var(--red);color:#fff}
#linkgame .over a.cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px var(--red)}
#linkgame .over button.again{background:transparent;border:1px solid var(--line);color:var(--text)}
#linkgame .over button.again:hover{border-color:#fff;color:#fff}
#linkgame .foot{text-align:center;font-size:10.5px;color:var(--muted);padding:0 20px 16px;letter-spacing:.5px}
@media (max-width:480px){#linkgame .stats{grid-template-columns:1fr}#linkgame .controls .btn{font-size:13px;padding:14px}}
/* ===== 8-BIT RETRO SKIN ===== */
#linkgame{border-width:2px;image-rendering:pixelated}
#linkgame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:30;background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.17) 2px 3px)}
#linkgame .mk-title{font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:0;line-height:1.4}
#linkgame .hud .hv{font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:0}
#linkgame .card{border-radius:4px}
#linkgame .stat{border-radius:3px}
#linkgame .dom-name{font-size:15px}
#linkgame .btn{font-family:'Press Start 2P',monospace;font-size:10px;line-height:1.5;border-radius:4px;border-width:2px}
#linkgame .btn small{font-family:var(--mono);font-weight:400}
#linkgame .btn.kill{box-shadow:4px 4px 0 rgba(237,54,49,.35)}
#linkgame .btn.keep{box-shadow:4px 4px 0 rgba(62,224,138,.35)}
#linkgame .btn.kill:hover{box-shadow:2px 2px 0 rgba(237,54,49,.55)}
#linkgame .btn.keep:hover{box-shadow:2px 2px 0 rgba(62,224,138,.55)}
#linkgame .prog i{border-radius:0}
#linkgame .over{background:linear-gradient(180deg,#0d0a16,#0a0a0f);z-index:15;overflow-y:auto}
#linkgame .over .ohdr{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--red);letter-spacing:0;margin-bottom:16px;animation:blink 1s steps(1) infinite}
#linkgame .over .grade{font-family:'Press Start 2P',monospace;font-size:clamp(13px,4vw,20px);letter-spacing:0;line-height:1.35;margin-bottom:8px}
#linkgame .over .oScores .n{font-family:'Press Start 2P',monospace;font-size:16px}
#linkgame .over a.cta,#linkgame .over button.again{border-radius:4px}
/* ===== GAME MASCOT ===== */
.game-wrap{position:relative;max-width:560px;margin:0 auto}
.game-lynx{position:absolute;left:-176px;bottom:0;width:150px;image-rendering:pixelated;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));animation:lynxBob 3.2s ease-in-out infinite;pointer-events:none}
@keyframes lynxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:1000px){.game-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}.game-lynx{position:static;width:104px;order:-1}}

/* ===== RESULT STAT: GREEN VARIANT (root only defines .rstat.blue/.purple) ===== */
.rstat.green{border-color:rgba(62,224,138,.4)}
.rstat.green .rv{color:var(--green)}