/* Showcase pages (for-law-firms, product, guides): product illustrations (mock UI)
   and their animations.
   Animations start when a block scrolls into view (.lf-in, set by the page script)
   and are switched off for visitors who ask for reduced motion. */

.lf-hero { display:grid; grid-template-columns: 1.05fr 1fr; gap:3.5rem; align-items:center; }
.lf-hero .sq-page-hero-title { text-align:left; }
.lf-hero .sq-page-hero-subtitle { text-align:left; margin-left:0; }
.lf-hero .sq-product-hero-actions { justify-content:flex-start; }
.lf-eyebrow { display:inline-flex; gap:.5rem; align-items:center; font-family:var(--sq-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sq-gray-400); margin-bottom:1rem; }
.lf-eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--sq-accent); display:inline-block; box-shadow:0 0 0 4px var(--sq-accent-soft); }

/* Generic mock window */
.lf-mock { position:relative; background:#fff; border:1px solid var(--sq-gray-100); border-radius:var(--sq-radius-lg); box-shadow:var(--sq-shadow-xl); overflow:hidden; text-align:left; }
.lf-mock-bar { display:flex; align-items:center; gap:.4rem; padding:.65rem .9rem; border-bottom:1px solid var(--sq-gray-100); background:var(--sq-gray-50); font-family:var(--sq-mono); font-size:.68rem; color:var(--sq-gray-400); }
.lf-mock-bar b { width:9px; height:9px; border-radius:50%; background:var(--sq-gray-200); display:inline-block; }
.lf-mock-bar span { margin-left:.5rem; }
.lf-mock-body { padding:1rem 1.1rem 1.2rem; }
.lf-caption { font-size:.72rem; color:var(--sq-gray-300); text-align:center; margin-top:.6rem; }

/* Portfolio ranking (hero) */
.lf-row { display:grid; grid-template-columns: 1.4fr 3.2rem 1fr 3.6rem; gap:.75rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--sq-gray-50); font-size:.82rem; }
.lf-row:last-child { border-bottom:0; }
.lf-dom { font-family:var(--sq-mono); font-size:.74rem; color:var(--sq-gray-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lf-dom small { display:block; font-family:var(--sq-font); color:var(--sq-gray-300); font-size:.68rem; }
.lf-score { font-family:var(--sq-mono); font-weight:600; text-align:right; }
.lf-track { height:7px; border-radius:99px; background:var(--sq-gray-50); overflow:hidden; }
.lf-fill { height:100%; width:0; border-radius:99px; background:var(--sq-accent); transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
.lf-crit .lf-fill { background:#c5221f; } .lf-high .lf-fill { background:#e8710a; } .lf-med .lf-fill { background:#f2b705; } .lf-low .lf-fill { background:#9aa0a6; }
.lf-in .lf-fill { width:var(--w); }
.lf-badge { justify-self:end; font-size:.64rem; font-weight:600; padding:.15rem .45rem; border-radius:99px; }
.lf-crit .lf-badge { background:#c5221f; color:#fff; } .lf-high .lf-badge { background:#fde7d6; color:#a14a00; }
.lf-med .lf-badge { background:#fff4cc; color:#7a5c00; } .lf-low .lf-badge { background:var(--sq-gray-50); color:var(--sq-gray-500); }
.lf-row { opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease; }
.lf-in .lf-row { opacity:1; transform:none; }
.lf-in .lf-row:nth-child(2) { transition-delay:.12s } .lf-in .lf-row:nth-child(3) { transition-delay:.24s }
.lf-in .lf-row:nth-child(4) { transition-delay:.36s } .lf-in .lf-row:nth-child(5) { transition-delay:.48s }

.lf-pill { position:absolute; display:flex; gap:.45rem; align-items:center; background:#fff; border:1px solid var(--sq-gray-100); border-radius:99px; padding:.45rem .8rem; font-size:.74rem; font-weight:500; box-shadow:var(--sq-shadow-lg); animation:lfFloat 5s ease-in-out infinite; }
.lf-pill i { width:8px; height:8px; border-radius:50%; display:inline-block; }
.lf-pill-1 { top:-18px; right:-14px; } .lf-pill-1 i { background:#c5221f; }
.lf-pill-2 { bottom:-16px; left:-18px; animation-delay:-2.5s; } .lf-pill-2 i { background:#1e8e3e; }
@keyframes lfFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }

/* Stats strip */
.lf-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--sq-gray-100); border:1px solid var(--sq-gray-100); border-radius:var(--sq-radius-lg); overflow:hidden; }
.lf-strip div { background:#fff; padding:1.4rem 1.2rem; }
.lf-strip strong { display:block; font-size:1.05rem; letter-spacing:-.01em; margin-bottom:.25rem; }
.lf-strip span { font-size:.82rem; color:var(--sq-gray-400); line-height:1.5; }

/* Problem cards */
.lf-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.lf-card { background:#fff; border:1px solid var(--sq-gray-100); border-radius:var(--sq-radius-lg); padding:1.5rem; transition:transform var(--sq-transition), box-shadow var(--sq-transition); }
.lf-card:hover { transform:translateY(-3px); box-shadow:var(--sq-shadow-lg); }
.lf-card h3 { font-size:1rem; margin:.75rem 0 .5rem; }
.lf-card p { font-size:.88rem; color:var(--sq-gray-400); line-height:1.65; margin:0; }
.lf-card code { font-family:var(--sq-mono); font-size:.78rem; background:var(--sq-gray-50); padding:.1rem .35rem; border-radius:5px; }
.lf-ico { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--sq-accent-soft); color:var(--sq-accent); }

/* Feature rows (text + visual, alternating) */
.lf-feature { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:3.5rem 0; }
.lf-feature + .lf-feature { border-top:1px solid var(--sq-gray-100); }
.lf-feature.lf-rev .lf-text { order:2; }
.lf-text h3 { font-size:clamp(1.35rem,2.2vw,1.75rem); letter-spacing:-.02em; line-height:1.2; margin:0 0 .9rem; }
.lf-text p { color:var(--sq-gray-400); line-height:1.75; margin:0 0 1rem; }
.lf-text ul { list-style:none; padding:0; margin:0; }
.lf-text li { position:relative; padding-left:1.6rem; margin:.55rem 0; font-size:.93rem; line-height:1.6; }
.lf-text li::before { content:""; position:absolute; left:0; top:.45rem; width:.75rem; height:.4rem; border-left:2px solid var(--sq-accent); border-bottom:2px solid var(--sq-accent); transform:rotate(-45deg); }
.lf-kicker { font-family:var(--sq-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sq-accent); margin-bottom:.6rem; }

/* Score breakdown */
.lf-factor { display:grid; grid-template-columns:1fr auto; gap:.75rem; padding:.55rem 0; border-bottom:1px dashed var(--sq-gray-100); font-size:.84rem; opacity:0; transform:translateX(-8px); transition:opacity .45s ease, transform .45s ease; }
.lf-factor small { display:block; color:var(--sq-gray-300); font-size:.72rem; margin-top:.1rem; }
.lf-factor b { font-family:var(--sq-mono); color:#c5221f; }
.lf-factor.zero b { color:var(--sq-gray-300); }
.lf-in .lf-factor { opacity:1; transform:none; }
.lf-in .lf-factor:nth-child(2){transition-delay:.15s} .lf-in .lf-factor:nth-child(3){transition-delay:.3s}
.lf-in .lf-factor:nth-child(4){transition-delay:.45s} .lf-in .lf-factor:nth-child(5){transition-delay:.6s}
.lf-in .lf-factor:nth-child(6){transition-delay:.75s}
.lf-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:.9rem; }
.lf-total strong { font-size:2rem; font-family:var(--sq-mono); letter-spacing:-.03em; }

/* Remediation lifecycle */
.lf-steps { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.lf-step { font-size:.72rem; font-weight:600; padding:.35rem .65rem; border-radius:99px; background:var(--sq-gray-50); color:var(--sq-gray-400); border:1px solid var(--sq-gray-100); }
.lf-in .lf-step { animation:lfStep 10s infinite; }
.lf-in .lf-step:nth-child(2) { animation-delay:2s } .lf-in .lf-step:nth-child(3) { animation-delay:4s }
.lf-in .lf-step:nth-child(4) { animation-delay:6s } .lf-in .lf-step:nth-child(5) { animation-delay:8s }
@keyframes lfStep { 0%,18% { background:var(--sq-accent); color:#fff; border-color:var(--sq-accent); } 20%,100% { background:var(--sq-gray-50); color:var(--sq-gray-400); border-color:var(--sq-gray-100); } }
.lf-task { border:1px solid var(--sq-gray-100); border-radius:var(--sq-radius); padding:.85rem 1rem; font-size:.82rem; }
.lf-task-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; }
.lf-task-head code { font-family:var(--sq-mono); font-weight:600; }
.lf-scan { display:flex; align-items:center; gap:.6rem; margin-top:.7rem; padding:.6rem .75rem; background:var(--sq-gray-50); border-radius:8px; font-size:.78rem; color:var(--sq-gray-500); }
.lf-radar { position:relative; width:14px; height:14px; flex-shrink:0; }
.lf-radar::before, .lf-radar::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--sq-accent); animation:lfPing 1.6s ease-out infinite; }
.lf-radar::after { animation-delay:.8s; }
@keyframes lfPing { from { transform:scale(.3); opacity:.9 } to { transform:scale(1.6); opacity:0 } }
.lf-event { display:flex; gap:.6rem; font-size:.76rem; color:var(--sq-gray-400); padding:.35rem 0; }
.lf-event b { color:var(--sq-gray-700); font-weight:600; }

/* Email to the agency */
.lf-mail { max-width:400px; margin:0 auto; background:#fff; border:1px solid var(--sq-gray-100); border-radius:var(--sq-radius-lg); box-shadow:var(--sq-shadow-xl); padding:1.4rem 1.5rem; transform:translateY(24px) rotate(-1.5deg); opacity:0; transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .9s ease; }
.lf-in .lf-mail { transform:rotate(-1.5deg); opacity:1; }
.lf-mail-from { font-size:.72rem; color:var(--sq-gray-300); margin-bottom:.9rem; }
.lf-mail h4 { margin:0 0 .5rem; font-size:1.1rem; letter-spacing:-.02em; }
.lf-mail p { font-size:.82rem; color:var(--sq-gray-400); line-height:1.6; margin:0 0 .9rem; }
.lf-mail-row { border:1px solid var(--sq-gray-100); border-radius:8px; padding:.55rem .7rem; font-size:.78rem; margin-bottom:.45rem; }
.lf-mail-row span { display:block; font-family:var(--sq-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--sq-gray-300); }
.lf-mail-btn { display:inline-block; margin-top:.5rem; background:var(--sq-black); color:#fff; border-radius:8px; padding:.55rem 1rem; font-size:.8rem; font-weight:600; }

/* Policy vs scan */
.lf-cmp { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.lf-col h5 { font-family:var(--sq-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sq-gray-300); margin:0 0 .5rem; }
.lf-line { font-size:.8rem; padding:.45rem .6rem; border:1px solid var(--sq-gray-100); border-radius:7px; margin-bottom:.4rem; font-family:var(--sq-mono); opacity:0; transition:opacity .4s ease, background .6s ease, border-color .6s ease; }
.lf-in .lf-line { opacity:1; }
.lf-in .lf-col:nth-child(2) .lf-line { transition-delay:.5s; }
.lf-in .lf-line.miss { background:#fdecea; border-color:#f5c2c0; color:#a61b17; transition-delay:1.4s; }
.lf-in .lf-line.ok { background:#e6f4ea; border-color:#c3e6cd; transition-delay:1.1s; }
.lf-verdict { margin-top:.8rem; font-size:.8rem; padding:.6rem .75rem; border-radius:8px; background:#fdecea; color:#a61b17; opacity:0; transition:opacity .5s ease 1.9s; }
.lf-in .lf-verdict { opacity:1; }

/* Replay timeline */
.lf-bars { display:flex; align-items:flex-end; gap:6px; height:120px; border-bottom:1px solid var(--sq-gray-100); position:relative; }
.lf-bar { flex:1; display:flex; flex-direction:column-reverse; gap:2px; height:100%; }
.lf-bar i { display:block; border-radius:3px 3px 0 0; transform-origin:bottom; transform:scaleY(0); transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.lf-bar i.u { background:#d03b2b; } .lf-bar i.d { background:#2a78d6; }
.lf-in .lf-bar i { transform:scaleY(1); }
.lf-scrub { position:absolute; top:-6px; bottom:-6px; width:2px; background:var(--sq-black); left:20%; }
.lf-in .lf-scrub { animation:lfScrub 7s ease-in-out infinite alternate; }
.lf-scrub::after { content:attr(data-label); position:absolute; top:-1.4rem; left:50%; transform:translateX(-50%); background:var(--sq-black); color:#fff; font-size:.62rem; font-family:var(--sq-mono); padding:.15rem .4rem; border-radius:5px; white-space:nowrap; }
@keyframes lfScrub { from { left:12% } to { left:82% } }
.lf-legend { display:flex; gap:1rem; font-size:.72rem; color:var(--sq-gray-400); margin-top:.6rem; }
.lf-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.3rem; vertical-align:-1px; }

/* Engagement steps */
.lf-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; counter-reset:lf; }
.lf-flow div { position:relative; padding:1.4rem 1.3rem; background:#fff; border:1px solid var(--sq-gray-100); border-radius:var(--sq-radius-lg); }
.lf-flow div::before { counter-increment:lf; content:counter(lf, decimal-leading-zero); font-family:var(--sq-mono); font-size:.72rem; color:var(--sq-accent); display:block; margin-bottom:.6rem; }
.lf-flow h4 { margin:0 0 .4rem; font-size:.98rem; }
.lf-flow p { margin:0; font-size:.84rem; color:var(--sq-gray-400); line-height:1.6; }

/* Law references */
.lf-law { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.lf-law a { display:block; text-decoration:none; color:inherit; padding:1.3rem; border:1px solid var(--sq-gray-100); border-radius:var(--sq-radius-lg); background:#fff; transition:border-color var(--sq-transition), transform var(--sq-transition); }
.lf-law a:hover { border-color:var(--sq-accent); transform:translateY(-2px); }
.lf-law strong { display:block; font-family:var(--sq-mono); font-size:.78rem; color:var(--sq-accent); margin-bottom:.4rem; }
.lf-law span { font-size:.86rem; color:var(--sq-gray-500); line-height:1.6; }

/* FAQ */
.lf-faq { max-width:820px; margin:0 auto; }
.lf-faq details { border-bottom:1px solid var(--sq-gray-100); padding:1.1rem 0; }
.lf-faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.lf-faq summary::-webkit-details-marker { display:none; }
.lf-faq summary::after { content:"+"; font-family:var(--sq-mono); color:var(--sq-gray-300); transition:transform var(--sq-transition); }
.lf-faq details[open] summary::after { transform:rotate(45deg); }
.lf-faq p { color:var(--sq-gray-400); line-height:1.7; margin:.7rem 0 0; font-size:.93rem; }

/* Reveal on scroll for text blocks */
.lf-reveal { opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.lf-reveal.lf-in { opacity:1; transform:none; }

@media (max-width: 960px) {
    .lf-hero, .lf-feature { grid-template-columns:1fr; gap:2rem; }
    .lf-feature.lf-rev .lf-text { order:0; }
    .lf-cards, .lf-law { grid-template-columns:1fr; }
    .lf-strip, .lf-flow { grid-template-columns:1fr 1fr; }
    .lf-pill-1 { right:0; } .lf-pill-2 { left:0; }
}
@media (max-width: 560px) { .lf-strip, .lf-flow, .lf-cmp { grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce) {
    .lf-row, .lf-factor, .lf-line, .lf-verdict, .lf-mail, .lf-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
    .lf-fill { width:var(--w) !important; transition:none !important; }
    .lf-bar i { transform:none !important; transition:none !important; }
    .lf-pill, .lf-step, .lf-scrub, .lf-radar::before, .lf-radar::after { animation:none !important; }
}

/* ───────── Product page ───────── */
.lf-stream-row { display:grid; grid-template-columns:2.6rem 1fr auto; gap:.6rem; align-items:center; padding:.42rem 0; border-bottom:1px solid var(--sq-gray-50); font-size:.76rem; opacity:0; transform:translateY(-4px); }
.lf-stream-row code { font-family:var(--sq-mono); font-size:.72rem; color:var(--sq-gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lf-type { font-family:var(--sq-mono); font-size:.62rem; color:var(--sq-gray-300); text-transform:uppercase; }
.lf-tag { font-size:.62rem; font-weight:600; padding:.12rem .45rem; border-radius:99px; white-space:nowrap; }
.lf-tag.fp { background:var(--sq-gray-50); color:var(--sq-gray-400); }
.lf-tag.tp { background:#e6f4ea; color:#137333; }
.lf-tag.un { background:#fdecea; color:#a61b17; }
.lf-in .lf-stream-row { animation:lfIn .35s ease forwards; }
.lf-in .lf-stream-row:nth-child(2){animation-delay:.25s} .lf-in .lf-stream-row:nth-child(3){animation-delay:.5s}
.lf-in .lf-stream-row:nth-child(4){animation-delay:.75s} .lf-in .lf-stream-row:nth-child(5){animation-delay:1s}
.lf-in .lf-stream-row:nth-child(6){animation-delay:1.25s} .lf-in .lf-stream-row:nth-child(7){animation-delay:1.5s}
.lf-in .lf-stream-row:nth-child(8){animation-delay:1.75s}
@keyframes lfIn { to { opacity:1; transform:none; } }
.lf-sum { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.9rem; }
.lf-sum div { background:var(--sq-gray-50); border-radius:8px; padding:.55rem .65rem; }
.lf-sum strong { display:block; font-family:var(--sq-mono); font-size:1.2rem; }
.lf-sum span { font-size:.68rem; color:var(--sq-gray-400); }
.lf-sum .bad strong { color:#c5221f; }

.lf-host { border:1px solid var(--sq-gray-100); border-radius:9px; padding:.55rem .7rem; margin-bottom:.5rem; font-size:.78rem; opacity:0; transform:translateX(8px); transition:opacity .45s ease, transform .45s ease; }
.lf-in .lf-host { opacity:1; transform:none; }
.lf-in .lf-host.off { opacity:.45; }
.lf-in .lf-host:nth-child(2){transition-delay:.15s} .lf-in .lf-host:nth-child(3){transition-delay:.3s} .lf-in .lf-host:nth-child(4){transition-delay:.45s}
.lf-host-head { display:flex; justify-content:space-between; font-family:var(--sq-mono); font-weight:600; font-size:.74rem; }
.lf-host-head span { font-family:var(--sq-font); font-weight:500; color:var(--sq-gray-300); font-size:.68rem; }
.lf-paths { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.lf-paths i { font-style:normal; font-family:var(--sq-mono); font-size:.66rem; background:var(--sq-gray-50); border-radius:5px; padding:.1rem .35rem; color:var(--sq-gray-500); }

.lf-ck { display:grid; grid-template-columns:1.2fr .9fr .8fr auto; gap:.5rem; align-items:center; font-size:.74rem; padding:.45rem 0; border-bottom:1px solid var(--sq-gray-50); opacity:0; transition:opacity .4s ease; }
.lf-in .lf-ck { opacity:1; }
.lf-in .lf-ck:nth-child(3){transition-delay:.12s} .lf-in .lf-ck:nth-child(4){transition-delay:.24s} .lf-in .lf-ck:nth-child(5){transition-delay:.36s}
.lf-ck.head { opacity:1; font-family:var(--sq-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--sq-gray-300); }
.lf-ck code { font-family:var(--sq-mono); font-size:.72rem; }
.lf-ck .life { font-family:var(--sq-mono); }
.lf-ck .life.long { color:#c5221f; font-weight:600; }
.lf-flags { display:flex; gap:.2rem; }
.lf-flags i { font-style:normal; font-size:.58rem; font-weight:600; padding:.08rem .3rem; border-radius:4px; background:#e6f4ea; color:#137333; }
.lf-flags i.no { background:#fdecea; color:#a61b17; }

.lf-imports { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.lf-import { border:1px solid var(--sq-gray-100); border-radius:10px; padding:.75rem; font-size:.8rem; display:flex; justify-content:space-between; align-items:center; opacity:0; transform:scale(.96); transition:opacity .4s ease, transform .4s ease; }
.lf-import b { font-weight:600; } .lf-import span { font-size:.7rem; color:#137333; font-weight:600; }
.lf-in .lf-import { opacity:1; transform:none; }
.lf-in .lf-import:nth-child(2){transition-delay:.15s} .lf-in .lf-import:nth-child(3){transition-delay:.3s} .lf-in .lf-import:nth-child(4){transition-delay:.45s}
.lf-ropa { margin-top:.8rem; padding:.7rem .8rem; border-radius:10px; background:var(--sq-gray-50); font-size:.78rem; color:var(--sq-gray-500); }

.lf-alert { display:flex; gap:.75rem; border:1px solid var(--sq-gray-100); border-radius:12px; padding:.85rem; font-size:.8rem; background:#fff; box-shadow:var(--sq-shadow-md); opacity:0; transform:translateY(10px); transition:opacity .6s ease .4s, transform .6s ease .4s; margin-top:1rem; }
.lf-in .lf-alert { opacity:1; transform:none; }
.lf-alert-ico { width:32px; height:32px; border-radius:8px; background:var(--sq-black); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; font-size:.8rem; }
.lf-alert b { display:block; margin-bottom:.15rem; }
.lf-alert code { font-family:var(--sq-mono); color:#a61b17; }

.lf-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.lf-grid4 .lf-card h3 { margin-top:.6rem; }

/* ───────── Guides ───────── */
.gd-hero { padding:6.5rem 2rem 2.5rem; background:var(--sq-gray-50); border-bottom:1px solid var(--sq-gray-100); }
.gd-hero .sq-container { max-width:1080px; }
.gd-crumbs { font-size:.78rem; color:var(--sq-gray-400); margin-bottom:1rem; }
.gd-crumbs a { color:var(--sq-gray-400); text-decoration:none; } .gd-crumbs a:hover { color:var(--sq-black); }
.gd-hero h1 { font-size:clamp(1.9rem,3.6vw,2.8rem); letter-spacing:-.03em; line-height:1.12; margin:0 0 1rem; max-width:820px; }
.gd-lead { font-size:1.12rem; line-height:1.7; color:var(--sq-gray-500); max-width:760px; margin:0; }
.gd-meta { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; font-family:var(--sq-mono); font-size:.72rem; color:var(--sq-gray-400); }
.gd-meta span { background:#fff; border:1px solid var(--sq-gray-100); border-radius:99px; padding:.25rem .65rem; }
.gd-wrap { max-width:1080px; margin:0 auto; padding:3rem 2rem 4rem; display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:3.5rem; }
.gd-body h2 { font-size:1.45rem; letter-spacing:-.02em; margin:2.4rem 0 .8rem; scroll-margin-top:90px; }
.gd-body p, .gd-body li { color:var(--sq-gray-600); line-height:1.8; font-size:1rem; }
.gd-body a { color:var(--sq-accent); }
.gd-toc { position:sticky; top:90px; align-self:start; font-size:.84rem; }
.gd-toc h6 { font-family:var(--sq-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sq-gray-300); margin:0 0 .7rem; }
.gd-toc a { display:block; color:var(--sq-gray-400); text-decoration:none; padding:.3rem 0 .3rem .75rem; border-left:2px solid var(--sq-gray-100); }
.gd-toc a:hover { color:var(--sq-black); border-left-color:var(--sq-accent); }
.gd-toc-cta { margin-top:1.4rem; padding:1rem; border:1px solid var(--sq-gray-100); border-radius:12px; background:#fff; }
.gd-toc-cta p { font-size:.8rem; color:var(--sq-gray-500); margin:0 0 .7rem; line-height:1.55; }
.gd-keys { border:1px solid var(--sq-accent-soft); background:#f5f8ff; border-radius:14px; padding:1.2rem 1.4rem; margin-bottom:2rem; }
.gd-keys h6 { font-family:var(--sq-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sq-accent); margin:0 0 .6rem; }
.gd-keys ul { margin:0; padding-left:1.1rem; } .gd-keys li { margin:.35rem 0; line-height:1.6; color:var(--sq-gray-700); }
.gd-diagram { border:1px solid var(--sq-gray-100); border-radius:16px; padding:1.5rem; margin:1.5rem 0 2rem; background:#fff; box-shadow:var(--sq-shadow-md); }
.gd-diagram figcaption { font-size:.78rem; color:var(--sq-gray-400); margin-top:1rem; text-align:center; }
.gd-check { list-style:none; padding:0 !important; }
.gd-check li { position:relative; padding:.65rem .8rem .65rem 2.4rem; border:1px solid var(--sq-gray-100); border-radius:10px; margin:.5rem 0; background:#fff; }
.gd-check li::before { content:""; position:absolute; left:.85rem; top:.95rem; width:14px; height:14px; border:2px solid var(--sq-accent); border-radius:4px; }
.gd-sources li { margin:.3rem 0; color:var(--sq-gray-500); font-size:.88rem; }
.gd-note { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--sq-gray-100); font-size:.82rem; color:var(--sq-gray-400); }
.gd-related { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.gd-related a { display:block; padding:1rem; border:1px solid var(--sq-gray-100); border-radius:12px; text-decoration:none; color:var(--sq-gray-700); font-size:.9rem; font-weight:600; transition:border-color var(--sq-transition); }
.gd-related a:hover { border-color:var(--sq-accent); }
.gd-related span { display:block; font-weight:400; font-size:.78rem; color:var(--sq-gray-400); margin-top:.3rem; }
.gd-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.gd-card { display:flex; flex-direction:column; gap:.6rem; padding:1.6rem; border:1px solid var(--sq-gray-100); border-radius:16px; text-decoration:none; color:inherit; background:#fff; transition:transform var(--sq-transition), box-shadow var(--sq-transition), border-color var(--sq-transition); }
.gd-card:hover { transform:translateY(-3px); box-shadow:var(--sq-shadow-lg); border-color:var(--sq-gray-200); }
.gd-tag { font-family:var(--sq-mono); font-size:.68rem; color:var(--sq-accent); text-transform:uppercase; letter-spacing:.06em; }
.gd-card h3 { margin:0; font-size:1.15rem; letter-spacing:-.01em; }
.gd-card p { margin:0; color:var(--sq-gray-400); font-size:.9rem; line-height:1.6; }
.gd-more { margin-top:auto; font-size:.82rem; font-weight:600; color:var(--sq-black); }

/* Diagram building blocks */
.dg-row { display:flex; align-items:center; gap:.6rem; margin:.6rem 0; }
.dg-box { flex:0 0 auto; min-width:7.5rem; text-align:center; padding:.75rem .6rem; border:1px solid var(--sq-gray-200); border-radius:12px; font-size:.78rem; font-weight:600; background:#fff; }
.dg-box small { display:block; font-weight:400; color:var(--sq-gray-400); font-size:.68rem; margin-top:.2rem; }
.dg-box.eu { border-color:#9ec0f7; background:#f5f8ff; } .dg-box.us { border-color:#f5c2c0; background:#fdf6f5; } .dg-box.ok { border-color:#a8d5b5; background:#f3faf5; }
.dg-wire { position:relative; flex:1; height:2px; background:var(--sq-gray-200); min-width:2.5rem; }
.dg-packet { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); font-family:var(--sq-mono); font-size:.62rem; padding:.15rem .4rem; border-radius:99px; background:var(--sq-black); color:#fff; white-space:nowrap; opacity:0; }
.dg-packet.red { background:#c5221f; } .dg-packet.green { background:#1e8e3e; }
.lf-in .dg-packet { animation:dgMove 3.2s ease-in-out infinite; }
@keyframes dgMove { 0% { left:0; opacity:0 } 10% { opacity:1 } 85% { opacity:1 } 100% { left:100%; opacity:0 } }
.dg-label { font-size:.72rem; color:var(--sq-gray-400); margin:.2rem 0 .8rem; }
.dg-consent { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.dg-stage { border:1px solid var(--sq-gray-100); border-radius:12px; padding:.8rem; font-size:.76rem; background:var(--sq-gray-50); opacity:.4; }
.dg-stage h6 { margin:0 0 .5rem; font-size:.74rem; }
.lf-in .dg-stage { animation:dgStage 9s infinite; }
.lf-in .dg-stage:nth-child(2) { animation-delay:3s } .lf-in .dg-stage:nth-child(3) { animation-delay:6s }
@keyframes dgStage { 0%,30% { opacity:1; background:#fff; box-shadow:var(--sq-shadow-md); } 33%,100% { opacity:.4; background:var(--sq-gray-50); box-shadow:none; } }
.dg-chip { display:inline-block; font-family:var(--sq-mono); font-size:.62rem; padding:.12rem .4rem; border-radius:5px; margin:.15rem .15rem 0 0; background:#fff; border:1px solid var(--sq-gray-100); }
.dg-chip.blocked { text-decoration:line-through; color:var(--sq-gray-300); }
.dg-chip.allowed { background:#e6f4ea; border-color:#c3e6cd; color:#137333; }
.dg-chip.bad { background:#fdecea; border-color:#f5c2c0; color:#a61b17; }
.dg-lane { display:grid; grid-template-columns:8.5rem 1fr; gap:.7rem; align-items:center; margin:.7rem 0; font-size:.76rem; }
.dg-lane code { font-family:var(--sq-mono); font-size:.72rem; }
.dg-track { position:relative; height:12px; background:var(--sq-gray-50); border-radius:99px; }
.dg-fill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px; background:#2a78d6; transition:width 1.6s cubic-bezier(.2,.8,.2,1); }
.dg-fill.long { background:linear-gradient(90deg,#2a78d6 0 54%,#d03b2b 54% 100%); }
.lf-in .dg-fill { width:var(--w); }
.dg-mark { position:absolute; top:-6px; bottom:-6px; left:54.2%; width:2px; background:var(--sq-black); }
.dg-axis { display:flex; justify-content:space-between; font-family:var(--sq-mono); font-size:.62rem; color:var(--sq-gray-300); margin-left:9.2rem; }
.dg-axis b { color:var(--sq-black); font-weight:600; }

@media (max-width: 960px) {
    .gd-wrap { grid-template-columns:1fr; gap:2rem; }
    .gd-toc { position:static; order:-1; }
    .gd-cards, .gd-related, .lf-grid4 { grid-template-columns:1fr 1fr; }
    .dg-consent { grid-template-columns:1fr; }
    .dg-row { flex-wrap:wrap; }
}
@media (max-width: 560px) { .gd-cards, .gd-related, .lf-grid4, .lf-imports, .lf-sum { grid-template-columns:1fr; } .dg-lane { grid-template-columns:1fr; } .dg-axis { margin-left:0; } }
@media (prefers-reduced-motion: reduce) {
    .lf-stream-row, .lf-host, .lf-ck, .lf-import, .lf-alert { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
    .dg-packet { opacity:1 !important; animation:none !important; left:50% !important; }
    .dg-stage { opacity:1 !important; animation:none !important; }
    .dg-fill { width:var(--w) !important; transition:none !important; }
}