/* Info pages — /about-us, /how-it-works, /promotions, /faq.
 * Same language as the home page (mockup C2 «Tablica»): tiles, LED digits, orbit
 * ornament, photos with a separate dark shade layer, lime only for action/selection.
 * Each block carries its own mobile branch right after it. */

/* ── page head ────────────────────────────────────────────────────────── */
.page-h--info p{max-width:64ch;text-wrap:pretty}

/* ── compact photo hero (photo and shade are separate layers) ─────────── */
.ihero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-tile);border:1px solid var(--hair);background:#0c0c14;min-height:360px;display:grid;align-items:end}
.ihero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#14141F}
.ihero__bg picture,.ihero__bg img{position:absolute;inset:0;width:100%;height:100%}
.ihero__bg img{object-fit:cover;object-position:var(--pos,center)}
.ihero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,10,17,.95) 0%,rgba(10,10,17,.74) 38%,rgba(10,10,17,.18) 70%,rgba(10,10,17,.5) 100%),
  linear-gradient(0deg,rgba(10,10,17,.88),transparent 50%)}
.ihero .orb{width:520px;height:250px;right:-150px;top:-90px;border-color:rgba(255,255,255,.14);z-index:-1}
.ihero .orb::before{inset:40px 80px}
.ihero__in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:36px;align-items:end;padding:44px 48px}
.ihero__txt{max-width:640px}
.ihero__t{font-size:clamp(34px,4vw,56px);font-weight:800;letter-spacing:-.045em;line-height:.98;text-wrap:balance;margin:12px 0 14px}
.ihero__t em{font-style:normal;color:var(--primary)}
.ihero__txt p{color:var(--text-soft);max-width:48ch;font-size:16px;text-wrap:pretty}
.ihero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ihero__panel{justify-self:end;width:100%;max-width:400px;border-radius:18px;padding:18px;background:rgba(14,14,22,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hair-2);box-shadow:var(--shadow-popover)}
.ihero__panel .eyebrow{display:flex;align-items:center;gap:8px;color:var(--text);margin-bottom:12px}
.ihero__panel .eyebrow .icon{width:16px;height:16px;color:var(--secondary-soft)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{border-radius:12px;background:rgba(6,6,11,.55);border:1px solid var(--hair);padding:10px 12px;min-width:0}
.stat small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .led{font-size:22px;padding:.2em .35em}
.ihero__note{font-size:12.5px;color:var(--text-muted);margin-top:12px;line-height:1.45}
@media (max-width:1099px){
  .ihero__in{grid-template-columns:minmax(0,1fr);gap:24px;padding:36px 32px}
  .ihero__panel{justify-self:start;max-width:480px}
}
@media (max-width:767px){
  .ihero{border-radius:18px;min-height:0}
  .ihero__in{padding:26px 18px 18px}
  .ihero__t{font-size:34px}
  .ihero__txt p{font-size:15px}
  .ihero__cta .btn{flex:1 1 100%}
  .ihero__panel{max-width:none;padding:14px}
  .ihero .orb{width:300px;height:150px;right:-120px;top:-60px}
  .stat .led{font-size:19px}
}

/* ── generic bits ─────────────────────────────────────────────────────── */
.ic-plate{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--plate);color:var(--secondary-soft);flex:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04)}
.ic-plate .icon{width:22px;height:22px}
.tile h3{font-size:18px;font-weight:750;letter-spacing:-.02em;line-height:1.25}
.tile p{text-wrap:pretty}
.txt{color:var(--text-muted);font-size:14.5px}
.txt + .txt{margin-top:10px}
.txt a,.vcard a,.note a,.chk a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.txt a:hover,.vcard a:hover,.note a:hover,.chk a:hover{color:var(--primary);text-decoration-color:currentColor}
.chk{display:grid;gap:10px}
.chk li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:14.5px;color:var(--text-soft);line-height:1.45}
.chk .icon{width:20px;height:20px;margin-top:1px}
.chk--ok .icon{color:var(--success)}
.chk--no .icon{color:var(--danger)}
.chk b{color:var(--text);font-weight:700}
.chip--pend{color:#FBE6B4;background:color-mix(in oklab,#F5C451 12%,transparent);border-color:color-mix(in oklab,#F5C451 28%,transparent)}
.bento-2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-8{grid-column:span 8}.span-4{grid-column:span 4}.span-6{grid-column:span 6}
@media (max-width:1099px){
  .span-7,.span-5,.span-8,.span-4,.span-6{grid-column:1/-1}
}
@media (max-width:767px){
  .bento-2{gap:12px}
  .ic-plate{width:40px;height:40px}
}

/* ── value cards (about) ──────────────────────────────────────────────── */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vcard{display:flex;flex-direction:column;gap:14px}
.vcard__h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vcard__h .led{font-size:14px}
.vcard p{color:var(--text-muted);font-size:14.5px}
.vcard ul{display:grid;gap:6px;margin-top:auto;padding-top:14px;border-top:1px solid var(--hair)}
.vcard li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--text-soft)}
.vcard li .icon{width:16px;height:16px;color:var(--secondary-soft)}
@media (max-width:1099px){ .vgrid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:767px){ .vgrid{gap:12px} }

/* ── flow diagram: sport → wydarzenie → rynki → kupon ─────────────────── */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:fl}
.flow__s{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--radius-card);border:1px solid var(--hair);
  background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--surface) 55%,var(--bg-raised)));box-shadow:var(--inset-top)}
.flow__s:not(:last-child)::after{content:"";position:absolute;top:42px;right:-29px;width:30px;height:2px;
  background:repeating-linear-gradient(90deg,var(--text-muted) 0 4px,transparent 4px 8px);opacity:.6}
.flow__s:not(:last-child)::before{content:"";position:absolute;top:38px;right:-31px;width:10px;height:10px;border-radius:50%;background:var(--bg);border:2px solid var(--secondary);z-index:1}
.flow__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.flow__top .led{font-size:13px}
.flow__s h3{font-size:17px}
.flow__s p{font-size:13.5px;color:var(--text-muted)}
.flow__n{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);font-size:12.5px;font-weight:650;color:var(--text-muted);line-height:1.3}
.flow__n .led{font-size:22px;min-width:64px}
.flow__s--end{border-color:color-mix(in oklab,var(--primary) 30%,transparent);background:linear-gradient(160deg,rgba(200,240,74,.07),transparent 55%),linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--surface) 55%,var(--bg-raised)))}
.flow__s--end .ic-plate{color:var(--primary)}
.flow-note{margin-top:14px}
@media (max-width:1099px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .flow__s::after,.flow__s::before{display:none}
}
@media (max-width:767px){
  .flow{grid-template-columns:minmax(0,1fr);gap:22px}
  .flow__s{padding:16px}
  .flow__s:not(:last-child)::after{display:block;top:auto;bottom:-23px;left:38px;right:auto;width:2px;height:22px;background:repeating-linear-gradient(180deg,var(--text-muted) 0 4px,transparent 4px 8px)}
}

/* ── key / value block (operator) ─────────────────────────────────────── */
.kv{display:grid;margin-top:4px}
.kv > div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:14px;align-items:center;padding:12px 0}
.kv > div + div{border-top:1px solid var(--hair)}
.kv dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.kv dd{margin:0;font-size:14.5px;font-weight:650;min-width:0;overflow-wrap:anywhere}
.kv dd .chip{white-space:normal;height:auto;min-height:26px;padding-block:3px}
.kv a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.kv a:hover{color:var(--primary)}
@media (max-width:767px){
  .kv > div{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ── CTA band ─────────────────────────────────────────────────────────── */
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;
  background:radial-gradient(600px 220px at 100% 0,rgba(145,120,249,.16),transparent 70%),linear-gradient(180deg,color-mix(in oklab,var(--surface) 86%,var(--bg-raised)),var(--bg-raised) 70%)}
.cta h2{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.cta p{color:var(--text-muted);font-size:14.5px;margin-top:6px;max-width:60ch}
.cta__act{display:flex;flex-wrap:wrap;gap:10px;flex:none}
@media (max-width:767px){
  .cta{flex-direction:column;align-items:stretch;padding:20px 16px}
  .cta__act .btn{flex:1 1 100%}
}

/* ── workflow stepper (how it works) — manual, ordered list ───────────── */
.wf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:wf}
.wf__s{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--radius-card);border:1px solid var(--hair);
  background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--surface) 55%,var(--bg-raised)));box-shadow:var(--inset-top)}
.wf__h{display:flex;align-items:center;gap:12px}
.wf__h .led{font-size:20px;min-width:52px;height:40px}
.wf__h h3{font-size:17px}
.wf__s > p{font-size:13.5px;color:var(--text-muted)}
.wf__ui{margin-top:auto;border-radius:12px;background:rgba(6,6,11,.5);border:1px solid var(--hair);padding:10px;display:grid;gap:6px;font-size:12.5px;font-weight:650}
.wf__row{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 8px;border-radius:8px;background:rgba(255,255,255,.035);color:var(--text-soft);min-width:0}
.wf__row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.wf__row .icon{width:14px;height:14px;color:var(--secondary-soft)}
.wf__row b{font-variant-numeric:tabular-nums;font-weight:800}
.wf__row.is-sel{background:var(--primary-12);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--primary) 45%,transparent)}
.wf__row.is-sel .icon{color:var(--primary)}
.wf__odds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wf__odds span{display:grid;place-items:center;height:32px;border-radius:8px;background:rgba(255,255,255,.045);border:1px solid var(--hair);font-weight:800;font-variant-numeric:tabular-nums}
.wf__odds span.is-sel{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.wf__tot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 2px 0}
.wf__tot small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.wf__tot .led{font-size:16px}
.wf__s:not(:last-child)::after{content:"";position:absolute;top:39px;right:-13px;width:10px;height:10px;border-top:2px solid var(--text-muted);border-right:2px solid var(--text-muted);transform:rotate(45deg);opacity:.55}
@media (max-width:1099px){
  .wf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wf__s::after{display:none}
}
@media (max-width:767px){
  /* compact vertical stepper: number rail on the left, no preview mock */
  .wf{grid-template-columns:minmax(0,1fr);gap:0;padding-left:0}
  .wf__s{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:0 0 18px;border:0;background:none;box-shadow:none;border-radius:0}
  .wf__h{display:contents}
  .wf__h .led{grid-row:1/3;align-self:start;position:relative;z-index:1}
  .wf__h h3{grid-column:2;font-size:16px;padding-top:9px}
  .wf__s > p{grid-column:2}
  .wf__ui{display:none}
  .wf__s:not(:last-child)::after{display:block;top:44px;bottom:2px;left:25px;right:auto;width:2px;height:auto;border:0;transform:none;background:repeating-linear-gradient(180deg,var(--text-muted) 0 4px,transparent 4px 8px);opacity:.4}
}

/* ── interactive examples ─────────────────────────────────────────────── */
.ex{display:flex;flex-direction:column;gap:14px}
.ex__top{display:flex;align-items:center;gap:10px}
.ex__lg{flex:1;min-width:0;font-size:12.5px;color:var(--text-muted);font-weight:600;line-height:1.3}
.ex__lg b{display:block;color:var(--text-dim);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex__top .led{font-size:20px;height:40px;min-width:74px}
.ex__teams{display:grid;gap:8px}
.ex__team{display:flex;align-items:center;gap:10px;font-weight:750;font-size:17px;letter-spacing:-.01em;min-width:0}
.ex__team span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex__ini{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:var(--secondary-16);color:var(--secondary-soft);flex:none}
.ex__mk{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--hair)}
.ex__mk b{font-size:14px;font-weight:750}
.ex__mk .chip{flex:none}
.ex .o3 .odd,.ex .o2 .odd{height:52px}
.o2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ex__hint{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.025);font-size:13.5px;color:var(--text-soft)}
.ex__hint .icon{color:var(--primary);width:20px;height:20px}
.ex__hint b{color:var(--text)}
.ex__f{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:auto}
.ex__f .lnk{color:var(--text-muted)}
.ex__f .lnk:hover{color:var(--text)}
@media (max-width:767px){
  .ex__team{font-size:16px}
  .ex__f .btn{flex:1 1 100%}
  .ex__f .lnk{min-height:44px}
}

/* ── calculation (#obliczenia) ────────────────────────────────────────── */
.fx{display:grid;gap:14px}
.fx__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fx__f{font-size:15px;font-weight:750;color:var(--text);letter-spacing:-.01em}
.fx__f code{font-family:inherit;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--hair)}
.eq{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px;border-radius:14px;background:rgba(6,6,11,.5);border:1px solid var(--hair)}
.eq .led{font-size:22px;padding:.25em .4em}
.eq__op{font-weight:800;font-size:18px;color:var(--text-muted)}
.eq__cap{display:grid;gap:4px}
.eq__cap small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.fx p{font-size:13.5px;color:var(--text-muted)}
.prob{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:rgba(6,6,11,.5);border:1px solid var(--hair);margin-top:14px}
.prob .led{font-size:26px;min-width:96px}
.prob p{font-size:13.5px;color:var(--text-muted);margin:0}
@media (max-width:767px){
  .eq{gap:6px;padding:12px 10px}
  .eq .led{font-size:18px}
  .eq__op{font-size:15px}
  .prob{flex-direction:column;align-items:flex-start}
}

/* ── editorial cards (promotions) ─────────────────────────────────────── */
.ed{display:flex;flex-direction:column;padding:0;overflow:hidden}
.ed__pic{position:relative;aspect-ratio:16/9;overflow:hidden;background:#14141F}
.ed__pic picture,.ed__pic img{position:absolute;inset:0;width:100%;height:100%}
.ed__pic img{object-fit:cover;object-position:var(--pos,center);transition:transform .6s var(--ease)}
.ed__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,26,41,1) 0%,rgba(26,26,41,.35) 45%,rgba(10,10,17,.15) 100%)}
.ed__tag{position:absolute;left:16px;top:16px;background:rgba(10,10,17,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--text)}
.ed__b{display:flex;flex-direction:column;gap:10px;padding:4px 20px 20px;flex:1}
.ed__b p{font-size:14.5px;color:var(--text-muted)}
.ed__b .lnk{margin-top:auto}
.ed:hover .ed__pic img{transform:scale(1.04)}
.ed .lnk:hover{color:var(--primary)}
@media (max-width:1099px){ .ed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .ed-grid > :last-child{grid-column:1/-1} .ed-grid > :last-child .ed__pic{aspect-ratio:21/8} }
@media (max-width:767px){ .ed-grid{grid-template-columns:minmax(0,1fr)} .ed-grid > :last-child .ed__pic{aspect-ratio:16/9} .ed__b{padding:4px 16px 16px} }

/* ── discipline slider (scroll-snap + arrows from site.js) ────────────── */
.disc__ctl{display:flex;gap:8px;flex:none}
.disc__ctl .ibtn{width:44px;height:44px}
.disc__ctl .ibtn:disabled{opacity:.3;cursor:default}
.disc__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px;scroll-padding-inline:2px}
.disc__track::-webkit-scrollbar{display:none}
.dcard{position:relative;isolation:isolate;flex:0 0 calc((100% - 3 * 14px) / 4);min-width:220px;height:260px;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--hair);
  scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px;background:linear-gradient(160deg,var(--surface),var(--bg-raised));transition:border-color .2s,transform .2s var(--ease)}
.dcard:hover{border-color:var(--hair-2);transform:translateY(-3px)}
.dcard__bg{position:absolute;inset:0;z-index:-2}
.dcard__bg picture,.dcard__bg img{position:absolute;inset:0;width:100%;height:100%}
.dcard__bg img{object-fit:cover;transition:transform .6s var(--ease)}
.dcard:hover .dcard__bg img{transform:scale(1.05)}
.dcard__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,10,17,.95) 0%,rgba(10,10,17,.55) 50%,rgba(10,10,17,.15) 100%)}
.dcard .orb{width:260px;height:130px;right:-90px;top:-40px;z-index:-1}
.dcard__ic{position:absolute;left:18px;top:18px}
.dcard--plain .dcard__ic{width:56px;height:56px;border-radius:14px}
.dcard--plain .dcard__ic .icon{width:28px;height:28px}
.dcard__live{position:absolute;right:14px;top:14px}
.dcard__n{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.dcard__m{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:650;color:var(--text-soft)}
.dcard__m .led{font-size:16px;min-width:40px}
.dcard__go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--text)}
.dcard__go .icon{width:16px;height:16px;transition:transform .16s}
.dcard:hover .dcard__go{color:var(--primary)}
.dcard:hover .dcard__go .icon{transform:translateX(3px)}
@media (max-width:1099px){ .dcard{flex-basis:calc((100% - 2 * 14px) / 3)} }
@media (max-width:767px){
  .disc__ctl{display:none}
  .disc__track{gap:12px;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
  .dcard{flex-basis:72%;min-width:0;height:230px;padding:16px}
}

/* ── transparency block ───────────────────────────────────────────────── */
.transp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:28px;
  background:linear-gradient(160deg,rgba(111,184,255,.08),transparent 55%),var(--bg-raised)}
.transp__h{display:flex;flex-direction:column;gap:12px}
.transp__h .ic-plate{color:var(--info)}
.transp__h h2{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.transp__cols{display:grid;gap:18px;align-content:start}
.transp__cols h3{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
@media (max-width:1099px){ .transp{grid-template-columns:minmax(0,1fr)} }
@media (max-width:767px){ .transp{padding:18px 16px;gap:20px} }

/* ── FAQ page ─────────────────────────────────────────────────────────── */
.fq-hero{padding:26px 28px 20px}
.fq-hero .orb{width:420px;height:200px;right:-120px;top:-80px}
.fq-hero__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;margin-bottom:18px}
.fq-hero__row label{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.srch{display:flex;align-items:center;gap:10px;height:56px;padding:0 8px 0 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);transition:border-color .16s,box-shadow .16s;max-width:720px}
.srch:focus-within{border-color:var(--primary);box-shadow:var(--focus-ring)}
.srch > .icon{color:var(--text-muted);width:20px;height:20px}
.srch input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-weight:600;font-size:16px}
.srch input::placeholder{color:rgba(175,176,194,.65)}
.srch input::-webkit-search-cancel-button{display:none}
.srch__x{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--text-muted)}
.srch__x:hover{background:rgba(255,255,255,.07);color:var(--text)}
.fq-count{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:650;color:var(--text-muted);white-space:nowrap;padding-bottom:10px}
.fq-count .led{font-size:18px;min-width:44px}
.fq-tabs{margin-bottom:0}
.fq-tabs .pill em{margin-left:2px}
.fq{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;margin-top:16px}
.fq-list{display:grid;gap:16px}
.fq-g .th{margin-bottom:6px}
.fq-g .th .led{font-size:13px}
.fq-g .acc__b{font-size:15px;min-height:58px}
.acc__q mark{background:var(--primary-12);color:var(--text);border-radius:3px;box-shadow:0 0 0 2px var(--primary-12)}
.fq-g .acc__p p{font-size:14.5px;max-width:72ch}
.fq-empty{display:grid;justify-items:center;text-align:center;gap:12px;padding:40px 24px}
.fq-empty .ic-plate{width:56px;height:56px;color:var(--text-muted)}
.fq-empty h2{font-size:20px;font-weight:750;letter-spacing:-.02em}
.fq-empty p{color:var(--text-muted);font-size:14.5px;max-width:48ch}
.fq-empty__act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:4px}
.fq-side{position:sticky;top:130px;display:grid;gap:16px}
.fq-side p{color:var(--text-muted);font-size:14px}
.fq-side .btn{margin-top:14px}
.fq-links{display:grid;gap:2px}
.fq-links a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;margin:0 -10px;border-radius:10px;font-weight:650;font-size:14px;color:var(--text-soft);transition:background .16s,color .16s}
.fq-links a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.fq-links .icon{width:16px;height:16px;color:var(--secondary-soft)}
.fq-links a .icon:last-child{margin-left:auto;color:var(--text-muted)}
@media (max-width:1099px){
  .fq{grid-template-columns:minmax(0,1fr)}
  .fq-side{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .fq-hero{padding:18px 16px 14px}
  .fq-hero__row{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:12px}
  .fq-count{padding-bottom:0}
  .fq-tabs{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .fq-g .acc__b{font-size:14.5px}
  .fq-side{grid-template-columns:minmax(0,1fr)}
  .fq-empty{padding:28px 16px}
  .fq-empty__act .btn{flex:1 1 100%}
}
.chk-cols{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)}
.txt--mt{margin-top:12px}
.stretch::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.dcard:focus-within{border-color:color-mix(in oklab,var(--primary) 55%,transparent)}
.dcard:has(.dcard__go:focus-visible){outline:2px solid var(--primary);outline-offset:2px}
.cta-side{display:flex;flex-direction:column;gap:12px;background:radial-gradient(420px 220px at 100% 0,rgba(145,120,249,.16),transparent 70%),linear-gradient(180deg,color-mix(in oklab,var(--surface) 86%,var(--bg-raised)),var(--bg-raised) 70%)}
.cta-side .th{margin-bottom:0}
.cta-side .btn--primary{margin-top:auto}

/* ── fixes after render review ────────────────────────────────────────── */
/* orbit dot lands on text in wide / text-heavy tiles: keep the ring, drop the dot */
.tile .orb::after{display:none}
.vcard .orb::after,.ex .orb::after{display:block}
.ex .orb::after{left:auto;right:150px;bottom:6px}
.sec-first{margin-top:28px}
.eq__res{display:inline-flex;align-items:center;gap:8px}
.transp__h .txt + .txt{margin-top:0}
@media (max-width:767px){
  .stat{padding:9px 8px}
  .stat small{font-size:10px;letter-spacing:.04em}
  .th .ic-plate + h2{white-space:normal;flex:1 1 0;min-width:0}
  .eq__res{gap:6px}
  .sec-first{margin-top:22px}
}
/* closed accordion panels: clipped text must not be measurable / reachable */
.acc__p > div{transition:visibility .24s}
.acc__b[aria-expanded=false] + .acc__p > div{visibility:hidden}
/* equation: equal tops for every cell, operators sit on the LED baseline */
.eq{align-items:stretch}
.eq__op,.eq__res{display:flex;align-items:flex-end}
.eq__op{padding-bottom:.45em;line-height:1}
.eq__res .eq__op{align-self:stretch}
/* hero: flex column, not a grid (layers are absolute) */
.ihero{display:flex;flex-direction:column;justify-content:flex-end}
.ihero__in{width:100%}
@media (max-width:419px){
  /* stats as rows so labels are never cut */
  .stats{grid-template-columns:minmax(0,1fr);gap:6px}
  .stat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px}
  .stat small{margin:0;font-size:11px;letter-spacing:.08em}
  .stat .led{font-size:18px}
}
.ihero__layers{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit}
.ihero__layers .ihero__bg{z-index:0}
.ihero__layers .ihero__shade{z-index:1}
.ihero__layers .orb{z-index:2}
.fq-g .th .grow{align-self:stretch}
@media (max-width:419px){
  /* equation as a receipt: one row per factor */
  .eq{flex-direction:column;gap:6px}
  .eq__op{display:none}
  .eq__cap,.eq__res .eq__cap{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .eq__res{display:block;padding-top:8px;border-top:1px dashed var(--hair-2)}
  .eq__op + .eq__cap small::before{content:"× "}
  .eq__res .eq__cap small::before{content:"= "}
  .eq__cap small{font-size:11.5px}
}
.fq-g .th{align-items:stretch}
.fq-g .th h2{display:flex;align-items:center}
.fq-g .th .led{min-width:40px}
@media (max-width:767px){ .fq-g .th{flex-wrap:nowrap} .fq-g .th h2{min-width:0} }