/* Link Exchange page (link-exchange.php). Moved out of <head> — owner 21 Oct 2026: no inline CSS in <head>. */
/* LINK EXCHANGE — partnership product page. SIRF layout/paint; koi behaviour yahan nahi. */

.lx-page{color:var(--ink)}
/* 1440: 1920 par page ek patli article-column jaisa nahi lagta, aur 1366 par bhi */
.lx-shell{max-width:1440px;margin:0 auto;padding:0 32px}
.lx-shell--tight{max-width:1180px}

.lx-sec{padding:76px 0}
.lx-sec--tint{background:var(--bg-soft)}
.lx-sec--line{border-top:1px solid var(--line-soft)}
.lx-eyebrow{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--main-color)}
.lx-h2{margin:0 0 12px;font-size:clamp(24px,2.7vw,34px);font-weight:700;line-height:1.18;letter-spacing:-.025em;color:var(--navy)}
.lx-sub{margin:0;font-size:17px;line-height:1.7;color:var(--grey-550);max-width:64ch}
.lx-head{margin:0 0 40px}
.lx-head--mid{text-align:center}
.lx-head--mid .lx-sub{margin-left:auto;margin-right:auto}

/* ---- buttons ---------------------------------------------------------------------------- */
.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border:1px solid transparent;border-radius:var(--r-lg);font-family:inherit;font-size:15.5px;font-weight:var(--btn-fw,600);line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s}
.lx-btn i{font-size:14px}
.lx-btn--pink{background:var(--main-color);color:var(--c-on-accent);box-shadow:0 8px 22px -8px rgba(var(--c-dark-rgb), 0.55)}
.lx-btn--pink:hover{background:var(--main-dark);color:var(--c-on-accent)}
.lx-btn--ghost{background:var(--c-surface);border-color:var(--line);color:var(--c-text)}
.lx-btn--ghost:hover{border-color:var(--main-color);color:var(--main-color)}
/* .lx-btn me 1px transparent border pehle se hai — usi ko rang de diya, naap nahi badla. */
.lx-btn--light{background:var(--c-surface);color:var(--c-text);border-color:rgba(var(--c-text-rgb), 0.26)}
.lx-btn--light:hover{background:var(--c-surface-light);color:var(--c-text)}
.lx-btn--wire{background:rgba(var(--c-text-rgb), 0.08);border-color:rgba(var(--c-border-rgb), 0.42);color:var(--c-text)}
.lx-btn--wire:hover{background:rgba(var(--c-text-rgb), 0.16);border-color:var(--c-border);color:var(--c-text)}
.lx-page a:focus-visible,.lx-page button:focus-visible{outline:2px solid var(--main-color);outline-offset:3px;border-radius:var(--r-md)}
.lx-hero-band a:focus-visible,.lx-cta-band a:focus-visible{outline-color:var(--c-border)}

/* ═══ HERO ════════════════════════════════════════════════════════════════════════════════ */
.lx-hero-band{position:relative;overflow:hidden;background:
  linear-gradient(122deg,var(--c-dark) 0%,var(--c-dark) 34%,var(--c-dark) 68%,var(--c-dark) 100%)}
.lx-hero-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(var(--c-dark-rgb), 0.06))}
.lx-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding:34px 0 96px;color:var(--c-text)}
.lx-crumb{margin:0;padding:20px 0 0;font-size:13px;color:rgba(var(--c-text-rgb), 0.55)}
.lx-crumb a{color:rgba(var(--c-text-rgb), 0.8);text-decoration:none}
.lx-crumb a:hover{color:var(--c-text);text-decoration:underline}
.lx-hero__eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:6px 14px;border-radius:999px;
  background:rgba(var(--c-surface-light-rgb), 0.1);border:1px solid rgba(var(--c-border-rgb), 0.22);
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--c-text-rgb), 0.9)}
.lx-hero h1{margin:0 0 20px;font-size:clamp(34px,4.4vw,54px);font-weight:700;line-height:1.06;letter-spacing:-.032em;color:var(--c-text)}
.lx-hero__lead{margin:0;max-width:50ch;font-size:18px;line-height:1.7;color:rgba(var(--c-text-rgb), 0.86)}
.lx-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.lx-hero__note{display:flex;align-items:center;gap:9px;margin:26px 0 0;font-size:13.5px;color:rgba(var(--c-text-rgb), 0.66)}

/* hero ka daayan hissa — ASLI banner ki composition (koi mock nahi) */
.lx-show{position:relative}
.lx-show__card{background:rgba(var(--c-surface-light-rgb), 0.07);border:1px solid rgba(var(--c-border-rgb), 0.2);border-radius:20px;padding:22px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 70px -30px rgba(var(--c-dark-rgb), 0.6)}
.lx-show__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.lx-show__tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--c-text-rgb), 0.7)}
.lx-show__dot{width:7px;height:7px;border-radius:50%;background:var(--c-success);box-shadow:0 0 0 3px rgba(var(--c-success-rgb), 0.22)}
.lx-show__frame{display:flex;align-items:center;justify-content:center;padding:20px;background:var(--c-surface);border-radius:12px}
.lx-show__frame img{display:block;max-width:100%;width:auto;height:auto;border-radius:4px}
.lx-show__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.lx-show__m{padding:11px 14px;background:rgba(var(--c-surface-light-rgb), 0.07);border:1px solid rgba(var(--c-border-rgb), 0.14);border-radius:12px}
.lx-show__m dt{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--c-text-rgb), 0.75)}
.lx-show__m dd{margin:3px 0 0;font-size:15px;font-weight:700;color:var(--c-text);font-variant-numeric:tabular-nums}
.lx-show__foot{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:rgba(var(--c-text-rgb), 0.6)}

/* ═══ TRUST STRIP ═════════════════════════════════════════════════════════════════════════ */
.lx-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:-44px;position:relative;z-index:2;
  background:var(--c-surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(var(--c-dark-rgb), 0.35)}
.lx-trust__i{display:flex;align-items:flex-start;gap:14px;padding:24px 22px}
.lx-trust__i + .lx-trust__i{border-left:1px solid var(--line-soft)}
.lx-trust__ic{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--pink-tint);color:var(--c-text-muted);font-size:15px}
.lx-trust__t{margin:0 0 3px;font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.3}
.lx-trust__d{margin:0;font-size:13.5px;line-height:1.55;color:var(--grey-550)}

/* ═══ CREATIVE STUDIO ═════════════════════════════════════════════════════════════════════ */
.cs{display:grid;grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
.cs__rail{display:flex;flex-direction:column;gap:12px}
.cs-pick{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;width:100%;
  padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--c-surface);cursor:pointer;text-align:left;
  font-family:inherit;transition:border-color .15s,box-shadow .15s,background .15s}
.cs-pick:hover{border-color:var(--pink-line,rgba(var(--c-accent-rgb), 0.3))}
.cs-pick[aria-selected="true"]{border-color:var(--main-color);background:var(--pink-tint);box-shadow:none}
/* Har format ka apna naap-anupaat — ek chhota sa gola jo shakl bata deta hai. */
.cs-pick__shape{width:52px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--bg-1);border-radius:8px}
.cs-pick__shape span{display:block;background:var(--grey-300);border-radius:2px}
.cs-pick[aria-selected="true"] .cs-pick__shape{background:var(--c-surface)}
.cs-pick[aria-selected="true"] .cs-pick__shape span{background:var(--main-color)}
/* Teeno lines apni-apni line par — span default me inline hote hain aur sab ek */
.cs-pick__dim{display:block;font-size:16px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.25}
.cs-pick__name{display:block;margin-top:2px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--main-color)}
.cs-pick__use{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--grey-550)}
.cs-pick > span:last-child{min-width:0}

/* 🔴 Ye do lines ZAROORI hain: pehle ye shared ui-switch.php se aati thi. Ek waqt me */
.bf-item{display:none}
.bf-item.is-on{display:block;animation:bfIn .32s cubic-bezier(.33,1,.68,1) both}
@keyframes bfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .bf-item.is-on{animation:none} }

.cs__stage{background:var(--c-surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 22px 54px -28px rgba(var(--c-dark-rgb), 0.3)}
.cs__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line-soft);background:var(--bg-soft)}
.cs__live{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-500)}
.cs__live i{color:var(--c-muted);font-size:9px}
.cs__navs{display:flex;gap:8px}
.bf-nav{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--c-surface);color:var(--grey-500);border-radius:9px;font-size:13px;cursor:pointer;transition:.15s}
.bf-nav:hover{border-color:var(--main-color);color:var(--main-color)}
/* Banner kabhi khinchta nahi: chaudai screen ke hisaab se ghatti hai aur lambai */
.bf-frame{display:flex;align-items:center;justify-content:center;min-height:280px;padding:44px 28px;
  background:radial-gradient(600px 240px at 50% 0,var(--c-surface),var(--c-surface-light))}
.bf-frame img{display:block;max-width:100%;width:auto;height:auto;border-radius:6px;box-shadow:0 14px 34px -12px rgba(var(--c-dark-rgb), 0.35)}
.bf-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 22px;padding:20px}
.bf-dim{margin:0;font-size:22px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bf-name{margin:3px 0 0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500)}
.bf-cid{font-weight:500;letter-spacing:.04em;color:var(--grey-550);font-family:ui-monospace,Menlo,Consolas,monospace;text-transform:none}
.bf-actions{display:flex;flex-wrap:wrap;gap:10px}
.bf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--c-surface);color:var(--c-text);border-radius:var(--r-lg);padding:11px 20px;font-family:inherit;font-size:14.5px;font-weight:var(--btn-fw,600);cursor:pointer;transition:.15s;white-space:nowrap}
.bf-btn:hover{border-color:var(--main-color);color:var(--main-color)}
.bf-btn--pink{background:var(--main-color);border-color:var(--main-color);color:var(--c-on-accent)}
.bf-btn--pink:hover{background:var(--main-dark);border-color:var(--main-dark);color:var(--c-on-accent)}
.bf-btn--pink.is-done{background:var(--green);border-color:var(--green);color:var(--c-on-accent)}

/* ---- code panel (editor jaisa) ----------------------------------------------------------- */
/* 0fr → 1fr ek aisi cheez ko kholta hai jiski unchai pehle se pata nahi. Bina JS ke row */
.bf-drawer{width:0;min-width:100%;display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s ease}
.js .bf-drawer{grid-template-rows:0fr}
.js .bf-drawer.is-open{grid-template-rows:1fr}
.bf-drawer__clip{overflow:hidden;min-height:0}
.bf-code{background:var(--c-dark);border-top:1px solid rgba(var(--c-border-rgb), 0.08)}
.bf-code__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 20px;border-bottom:1px solid rgba(var(--c-border-rgb), 0.09)}
.bf-code__lbl{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--c-text-rgb), 0.6)}
.bf-code__dots{display:inline-flex;gap:5px;margin-right:4px}
.bf-code__dots i{width:9px;height:9px;border-radius:50%;background:rgba(var(--c-text-rgb), .16)}
.bf-code__body{display:grid;grid-template-columns:44px minmax(0,1fr)}
.bf-code__ln{padding:16px 0;text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.9;color:rgba(var(--c-text-rgb), 0.5);background:rgba(var(--c-text-rgb), 0.03);user-select:none}
.bf-drawer__code{display:block;margin:0;padding:16px 20px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.9;color:var(--c-text);white-space:pre;overflow-x:auto}
.bf-code__hint{margin:0;padding:0 20px 16px;font-size:13px;line-height:1.6;color:rgba(var(--c-text-rgb), 0.55)}
.bf-code__size{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:rgba(var(--c-text-rgb), 0.55);letter-spacing:.04em}
/* Kaale panel par browser ki apni safed scrollbar ek safed patti jaisi dikhti thi. */
.bf-drawer__code{scrollbar-width:thin;scrollbar-color:rgba(var(--c-surface-light-rgb), 0.22) transparent}
.bf-drawer__code::-webkit-scrollbar{height:8px}
.bf-drawer__code::-webkit-scrollbar-track{background:transparent}
.bf-drawer__code::-webkit-scrollbar-thumb{background:rgba(var(--c-surface-light-rgb), 0.22);border-radius:99px}
.bf-drawer__code::-webkit-scrollbar-thumb:hover{background:rgba(var(--c-surface-light-rgb), 0.34)}
.bf-code__bar .bf-btn{padding:8px 15px;font-size:13px}
@media (prefers-reduced-motion:reduce){ .bf-drawer{transition:none} }

/* ═══ TIMELINE ════════════════════════════════════════════════════════════════════════════ */
.lx-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.lx-flow::before{content:"";position:absolute;left:8%;right:8%;top:27px;height:2px;
  background:linear-gradient(90deg,var(--pink-line,rgba(var(--c-accent-rgb), 0.12)),var(--main-color),var(--pink-line,rgba(var(--c-accent-rgb), 0.12)));z-index:0}
.lx-step{position:relative;z-index:1;text-align:center}
.lx-step__n{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  background:var(--c-surface);border:1px solid var(--main-color);color:var(--main-color);font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-bottom:18px;box-shadow:0 8px 22px -10px rgba(var(--c-dark-rgb), 0.5)}
.lx-step h3{margin:0 0 7px;font-size:18px;font-weight:700;color:var(--navy);line-height:1.3}
.lx-step p{margin:0 auto;max-width:26ch;font-size:14.5px;line-height:1.65;color:var(--grey-550)}

/* ═══ STANDARDS ═══════════════════════════════════════════════════════════════════════════ */
.lx-std{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lx-panel{border-radius:18px;padding:32px;border:1px solid}
.lx-panel--yes{background:var(--c-surface);border-color:rgba(var(--c-success-rgb), 0.3);box-shadow:0 20px 48px -30px rgba(var(--c-dark-rgb), 0.5)}
.lx-panel--no{background:var(--bg-1);border-color:var(--line)}
.lx-panel__h{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.lx-panel__ic{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;font-size:15px}
.lx-panel--yes .lx-panel__ic{background:rgba(var(--c-success-rgb), 0.13);color:var(--c-success)}
.lx-panel--no .lx-panel__ic{background:rgba(var(--c-surface-light-rgb), 0.07);color:var(--grey-500)}
.lx-panel__h h3{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.lx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.lx-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;line-height:1.6;color:var(--navy)}
.lx-list li i{margin-top:4px;font-size:13px}
.lx-list--yes li i{color:var(--green)}
.lx-list--no li{color:var(--grey-550)}
.lx-list--no li i{color:var(--grey-400)}
.lx-note{display:flex;align-items:flex-start;gap:12px;margin:26px 0 0;padding:16px 20px;background:var(--pink-tint);border:1px solid var(--pink-line,rgba(var(--c-accent-rgb), 0.3));border-radius:14px;font-size:14.5px;line-height:1.65;color:var(--navy)}
.lx-note i{margin-top:3px;color:var(--c-text-muted);font-size:13px}

/* ═══ SUBMIT + STATUS ═════════════════════════════════════════════════════════════════════ */
.lx-cta-band{position:relative;overflow:hidden;background:
  linear-gradient(122deg,var(--c-dark) 0%,var(--c-dark) 38%,var(--c-dark) 72%,var(--c-dark) 100%)}
.lx-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;padding:66px 0;color:var(--c-text)}
.lx-cta h2{margin:0 0 12px;font-size:clamp(26px,3vw,38px);font-weight:700;line-height:1.14;letter-spacing:-.025em;color:var(--c-text)}
.lx-cta p{margin:0;max-width:56ch;font-size:16.5px;line-height:1.7;color:rgba(var(--c-text-rgb), 0.84)}
.lx-cta__btns{display:flex;flex-wrap:wrap;gap:14px}
.lx-status{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--c-surface);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.lx-status__ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--pink-tint);color:var(--c-text-muted);font-size:19px}
.lx-status h3{margin:0 0 4px;font-size:18px;font-weight:700;color:var(--navy)}
.lx-status p{margin:0;font-size:14.5px;line-height:1.6;color:var(--grey-550)}

/* ---- partners directory ------------------------------------------------------------------ */
.pt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pt-card{display:flex;flex-direction:column;gap:10px;background:var(--c-surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:inherit;transition:.15s}
.pt-card:hover{border-color:var(--main-color);box-shadow:0 12px 30px -18px rgba(var(--c-dark-rgb), 0.4)}
.pt-mark{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--pink-tint);border-radius:11px;overflow:hidden;font-size:16px;font-weight:700;color:var(--main-color)}
.pt-mark img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.pt-name{font-size:15px;font-weight:700;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-host{margin-top:2px;font-size:13px;font-weight:500;color:var(--grey-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-go{margin-top:auto;font-size:13.5px;font-weight:700;color:var(--main-color)}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1399px){
  .lx-shell{padding:0 26px}
  .cs{grid-template-columns:300px minmax(0,1fr)}
}
@media (max-width:1199px){
  .lx-hero{gap:36px}
  /* Studio ab upar-neeche: pehle chunav, phir bada preview. */
  .cs{grid-template-columns:minmax(0,1fr);gap:20px}
  .cs__rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:991px){
  .lx-sec{padding:56px 0}
  .lx-hero{grid-template-columns:minmax(0,1fr);gap:34px;padding:26px 0 86px}
  .lx-hero__lead{max-width:none}
  .lx-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lx-trust__i:nth-child(3){border-left:0}
  .lx-trust__i:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .lx-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .lx-flow::before{display:none}
  .lx-std{grid-template-columns:minmax(0,1fr)}
  .lx-cta{grid-template-columns:minmax(0,1fr);gap:24px;padding:52px 0}
  .pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .lx-shell{padding:0 18px}
  .lx-sec{padding:44px 0}
  .cs__rail{grid-template-columns:minmax(0,1fr)}
  .lx-status{grid-template-columns:52px minmax(0,1fr);gap:16px}
  .lx-status .lx-btn{grid-column:1/-1}
}
@media (max-width:539px){
  .lx-shell{padding:0 14px}
  .lx-hero{padding:20px 0 74px}
  .lx-hero__lead{font-size:16px}
  .lx-cta-row .lx-btn{flex:1 1 100%}
  .lx-trust{grid-template-columns:minmax(0,1fr);margin-top:-34px}
  .lx-trust__i + .lx-trust__i{border-left:0;border-top:1px solid var(--line-soft)}
  .lx-show__card{padding:16px}
  .lx-show__frame{padding:14px}
  .lx-show__meta{grid-template-columns:minmax(0,1fr)}
  /* Mobile par timeline seedhi neeche — har step ke beech ek chhoti si lakeer. */
  .lx-flow{grid-template-columns:minmax(0,1fr);gap:0}
  .lx-step{text-align:left;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding-bottom:26px;position:relative}
  .lx-step:not(:last-child)::after{content:"";position:absolute;left:27px;top:60px;bottom:6px;width:2px;background:var(--pink-line,rgba(var(--c-accent-rgb), 0.12))}
  .lx-step__n{margin-bottom:0}
  .lx-step p{margin:0;max-width:none}
  .bf-frame{min-height:180px;padding:24px 14px}
  .bf-meta{padding:16px}
  .bf-actions{width:100%}
  .bf-actions .bf-btn{flex:1 1 auto}
  .bf-code__body{grid-template-columns:34px minmax(0,1fr)}
  .bf-drawer__code{font-size:12px;padding:14px}
  .bf-code__bar{padding:10px 14px}
  .bf-code__hint{padding:0 14px 14px}
  .lx-panel{padding:22px 20px}
  .lx-cta__btns .lx-btn{flex:1 1 100%}
  .pt-grid{grid-template-columns:minmax(0,1fr)}
}
@media (hover:none) and (pointer:coarse){
  .lx-btn,.bf-btn,.cs-pick{min-height:44px}
  .bf-nav{width:44px;height:44px}
}