/* ============================================================ KRS LANE LAYER · krs-lane-* Shared service-page shell (identical everywhere) + exactly TWO per-lane variables: --lane (accent) and the lane's signature sheet. Red (#c2361f) is RESERVED sitewide for audit markup — never a lane accent. Usage: Lanes: MAP #2f6fde · ABM #6b53d6 · CRM #179a67 · Sales #b7621b · AI #1597b8 ============================================================ */ body.krs-lane{ --paper:#ffffff; --paper2:#f6f7fa; --ink:#182238; --ink2:#323f59; --faint:#5c6a82; --rule:#c9d0dc; --rule2:#e2e6ee; --grid:#edf0f5; --red:#c2361f; --lane-soft:color-mix(in srgb,var(--lane) 10%,transparent); --lane-line:color-mix(in srgb,var(--lane) 34%,transparent); --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --serif:"Instrument Serif",Georgia,serif; --sans:"Figtree",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; background:var(--paper);color:var(--ink); } body.krs-lane main{background:var(--paper)} /* ---------- shared shell: type ---------- */ body.krs-lane h1,body.krs-lane h2,body.krs-lane h3{font-family:var(--sans);color:var(--ink);letter-spacing:-.022em} body.krs-lane h1{font-weight:800;font-size:clamp(34px,4.3vw,58px);line-height:1.06;max-width:20ch} body.krs-lane h2{font-weight:800;font-size:clamp(24px,2.5vw,34px)} body.krs-lane p,body.krs-lane li{color:var(--ink2)} body.krs-lane .lede{color:var(--ink2);font-size:clamp(16.5px,1.5vw,19px);line-height:1.62} body.krs-lane .article p,body.krs-lane .article li{color:var(--ink2)} body.krs-lane a{color:inherit} body.krs-lane .article a:not(.btn),body.krs-lane p a:not(.btn){color:var(--lane);text-decoration:underline;text-underline-offset:2px} body.krs-lane .article a.btn,body.krs-lane p a.btn{text-decoration:none} /* ---------- shared shell: hero on paper + drafting grid ---------- */ body.krs-lane .hero{position:relative;overflow:hidden;background:var(--paper);padding-top:96px;border-bottom:1px solid var(--rule2)} body.krs-lane .hero:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 46px), repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 46px); -webkit-mask-image:radial-gradient(70% 78% at 22% 40%,#000 20%,transparent 78%); mask-image:radial-gradient(70% 78% at 22% 40%,#000 20%,transparent 78%)} body.krs-lane .hero .wrap{position:relative;z-index:1} /* lane chip (was .eyebrow) — the lane's name badge */ body.krs-lane .hero .eyebrow{display:inline-flex;align-items:center;gap:9px;width:max-content; font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--lane);background:var(--lane-soft);border:1px solid var(--lane-line);border-radius:999px; padding:7px 14px;margin-bottom:22px;text-shadow:none} body.krs-lane .hero .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lane);box-shadow:none;border:0;animation:none;flex:none} body.krs-lane .hero h1{margin-bottom:0} body.krs-lane .hero .lede{max-width:640px;margin-top:20px} /* shared shell: buttons */ body.krs-lane .ctas,body.krs-lane .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} body.krs-lane .btn{font-family:var(--sans);font-size:15px;font-weight:700;border-radius:5px;padding:12px 20px; background:var(--paper);border:1.5px solid var(--rule);color:var(--ink);text-shadow:none;backdrop-filter:none} body.krs-lane .btn:hover{border-color:var(--ink2);transform:translateY(-1px)} body.krs-lane .btn.primary,body.krs-lane .btn-primary{background:var(--lane);border-color:var(--lane);color:#fff} body.krs-lane .btn.primary:hover,body.krs-lane .btn-primary:hover{filter:brightness(.92)} /* proof chips on paper */ body.krs-lane .krs-svc-proof span{color:var(--ink2);background:var(--paper);border:1px solid var(--rule);backdrop-filter:none;font-weight:600} body.krs-lane .krs-svc-proof .k{background:var(--lane);box-shadow:none} /* ---------- shared shell: sections, kickers, cards ---------- */ body.krs-lane .section{border-top:1px solid var(--rule2)} body.krs-lane .section-kicker{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lane)} body.krs-lane .card,body.krs-lane .krs-svc-cred,body.krs-lane .krs-svc-bi{ background:var(--paper);border:1px solid var(--rule);border-radius:9px;box-shadow:0 5px 16px rgba(24,34,56,.05)} body.krs-lane .card:hover,body.krs-lane .krs-svc-bi:hover{border-color:var(--lane-line);box-shadow:0 10px 26px rgba(24,34,56,.09)} body.krs-lane .card h3,body.krs-lane .krs-svc-cred h3,body.krs-lane .krs-svc-bi b{color:var(--ink)} body.krs-lane .card p,body.krs-lane .krs-svc-cred p,body.krs-lane .krs-svc-bi span{color:var(--ink2)} body.krs-lane .krs-svc-cred .ic{background:var(--lane-soft);border:1px solid var(--lane-line);border-radius:8px} /* icon strokes inherit the lane */ body.krs-lane .krs-svc-cred .ic svg [stroke],body.krs-lane .krs-svc-bi svg [stroke]{stroke:var(--lane)} body.krs-lane .krs-svc-num .num{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--lane)} /* ---------- cursor-following matrix grid (shared; attach data-krs-mx) ---------- */ [data-krs-mx]{position:relative} [data-krs-mx]>*{position:relative;z-index:1} [data-krs-mx]:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0; transition:opacity .45s ease; background: repeating-linear-gradient(90deg,var(--mxc,#d9e0ec) 0 1px,transparent 1px 46px), repeating-linear-gradient(0deg,var(--mxc,#d9e0ec) 0 1px,transparent 1px 46px); -webkit-mask-image:radial-gradient(circle 300px at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.7) 46%,transparent 74%); mask-image:radial-gradient(circle 300px at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.7) 46%,transparent 74%)} [data-krs-mx].mx-on:before{opacity:1} :root[data-theme="dark"] [data-krs-mx]{--mxc:rgba(233,240,251,.16)} @media (prefers-reduced-motion: reduce){[data-krs-mx]:before{display:none}} /* ---------- symptom board — buyer-language problems, visual-first (reusable per lane) ---------- */ .krs-sym{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px} .krs-sym-card{display:block;padding:20px;border:1px solid var(--rule);border-radius:9px;background:var(--paper); box-shadow:0 5px 16px rgba(24,34,56,.05);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} a.krs-sym-card:hover{border-color:var(--lane-line);box-shadow:0 12px 28px rgba(24,34,56,.10);transform:translateY(-2px)} .krs-sym-card svg{display:block;margin-bottom:14px} .krs-sym-card .sym{display:block;font-family:var(--sans);font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.3} .krs-sym-card .fix{display:block;margin-top:9px;font-size:14px;line-height:1.55;color:var(--ink2)} .krs-sym-card .go{display:block;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lane);font-weight:600} .krs-sym-g{stroke:var(--lane);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round} .krs-sym-r{stroke:var(--red);stroke-width:1.9;fill:none;stroke-linecap:round} .krs-sym-rf{fill:var(--red)} :root[data-theme="dark"] body.krs-lane .krs-sym-card{background:rgba(255,255,255,.04);box-shadow:none} :root[data-theme="dark"] body.krs-lane .krs-sym-g{stroke:#a8c8ff} :root[data-theme="dark"] body.krs-lane .krs-sym-card .go{color:#a8c8ff} @media(max-width:900px){.krs-sym{grid-template-columns:1fr}} /* ---------- the signature artifact: a drawing sheet ---------- */ .krs-sheet{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:10px;overflow:hidden; box-shadow:0 18px 44px rgba(24,34,56,.12),0 4px 12px rgba(24,34,56,.06)} .krs-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper2); border-bottom:2px solid var(--ink);padding:11px 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .krs-sheet-head b{font-weight:600} .krs-sheet-head .no{color:var(--faint)} .krs-sheet-head .lane{color:var(--lane);font-weight:600} .krs-sheet-body{padding:10px 8px 8px} .krs-sheet svg{width:100%;height:auto;display:block} .krs-sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--rule); padding:9px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)} .krs-sheet-foot b{color:var(--lane);font-weight:600} /* sheet drawing language */ .krs-sv text{font-family:"IBM Plex Mono",monospace;fill:var(--ink)} .krs-sv .lbl{font-size:12.5px;font-weight:500} .krs-sv .sm{font-size:11px;fill:var(--faint);font-weight:500} .krs-sv .cap{font-size:10.8px;letter-spacing:.06em;fill:var(--ink2);font-weight:600} .krs-sv .rl{stroke:var(--rule);stroke-width:1.2} .krs-sv .ink{stroke:var(--ink);stroke-width:1.8;fill:none} .krs-sv .nodebox{fill:var(--paper);stroke:var(--ink);stroke-width:1.8} .krs-sv .nodebox.done{stroke-width:3} .krs-sv .chip{fill:var(--paper)} .krs-sv .lane{stroke:var(--lane);stroke-width:1.8;fill:none} .krs-sv .lanefill{fill:var(--lane)} .krs-sv .lanetx{fill:var(--lane);font-size:11px;font-weight:600} .krs-sv .okmk{font-size:12.5px;fill:var(--ink);font-weight:600} /* red = audit markup only */ .krs-sv .mk{stroke:var(--red);fill:none;stroke-width:2.6;stroke-linecap:round} .krs-sv text.mkt{fill:var(--red);font-size:11px;font-weight:600} .krs-sv .mkfill{fill:var(--red)} .krs-sheet.is-in .mk{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);animation:krsLaneDraw .8s .2s cubic-bezier(.3,.6,.3,1) forwards} @keyframes krsLaneDraw{to{stroke-dashoffset:0}} .krs-sheet.is-in .mkt,.krs-sheet.is-in .mkfill{opacity:0;animation:krsLaneFade .4s .7s forwards} @keyframes krsLaneFade{to{opacity:1}} .krs-sv .stamp rect{fill:none;stroke:var(--red);stroke-width:2.4} .krs-sv .stamp text{fill:var(--red);font-weight:600} .krs-sheet.is-in .stamp{opacity:0;transform-origin:center;animation:krsLaneStamp .3s .95s cubic-bezier(.2,1.6,.4,1) forwards} @keyframes krsLaneStamp{0%{opacity:0;transform:scale(1.5) rotate(-7deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}} /* ---------- footer stays the site's dark band (matches homepage) ---------- */ body.krs-lane footer,body.krs-lane .footer{background:#050a12;color:#f5f7fb;border-top:1px solid rgba(255,255,255,.10)} body.krs-lane footer a,body.krs-lane .footer a{color:#dce9f7} body.krs-lane footer a:hover{color:#fff} body.krs-lane footer strong,body.krs-lane footer b,body.krs-lane footer h3, body.krs-lane footer .brand-name,body.krs-lane footer .brand-word{color:#f5f7fb} body.krs-lane footer p,body.krs-lane footer li,body.krs-lane footer .brand-sub, body.krs-lane footer .notice,body.krs-lane footer .foot-legal{color:rgba(245,247,251,.72)} body.krs-lane footer .mini-links strong{color:#fff} /* ---------- dark mode: cyanotype blueprint paper (parity with the homepage hero) ---------- */ :root[data-theme="dark"] body.krs-lane{ --paper:#16355f; --paper2:#122e54; --ink:#e9f0fb; --ink2:#c4d2e8; --faint:#8ba1c2; --rule:rgba(233,240,251,.30); --rule2:rgba(233,240,251,.12); --grid:rgba(233,240,251,.09); --red:#ffd166; } :root[data-theme="dark"] body.krs-lane .card, :root[data-theme="dark"] body.krs-lane .krs-svc-cred, :root[data-theme="dark"] body.krs-lane .krs-svc-bi{background:rgba(255,255,255,.04);box-shadow:none} :root[data-theme="dark"] body.krs-lane .krs-svc-proof span{background:rgba(255,255,255,.05)} :root[data-theme="dark"] body.krs-lane .btn{background:transparent} :root[data-theme="dark"] body.krs-lane .btn.primary, :root[data-theme="dark"] body.krs-lane .btn-primary{background:var(--lane);border-color:var(--lane);color:#fff} :root[data-theme="dark"] body.krs-lane .hero .eyebrow{color:#cfe0ff;border-color:rgba(207,224,255,.45);background:rgba(207,224,255,.12)} :root[data-theme="dark"] body.krs-lane .hero .eyebrow .dot{background:#cfe0ff} :root[data-theme="dark"] body.krs-lane .section-kicker, :root[data-theme="dark"] body.krs-lane .krs-svc-num .num, :root[data-theme="dark"] .krs-sheet-head .lane, :root[data-theme="dark"] .krs-sheet-foot b{color:#a8c8ff} :root[data-theme="dark"] body.krs-lane .krs-svc-cred .ic svg [stroke], :root[data-theme="dark"] body.krs-lane .krs-svc-bi svg [stroke], :root[data-theme="dark"] .krs-sv .lane{stroke:#a8c8ff} :root[data-theme="dark"] body.krs-lane .krs-svc-cred .ic{background:rgba(168,200,255,.12);border-color:rgba(168,200,255,.35)} :root[data-theme="dark"] body.krs-lane .krs-svc-proof .k{background:#a8c8ff} /* forms keep their own styling — untouched by design */ @media(max-width:860px){ body.krs-lane h1{font-size:clamp(30px,7.5vw,40px)} .krs-sv .lbl{font-size:14px} } @media (prefers-reduced-motion: reduce){ .krs-sheet.is-in .mk{animation:none;stroke-dashoffset:0} .krs-sheet.is-in .mkt,.krs-sheet.is-in .mkfill{animation:none;opacity:1} .krs-sheet.is-in .stamp{animation:none;opacity:1;transform:rotate(-4deg)} body.krs-lane .btn:hover{transform:none} }