/* ══════════════════════════════════════════════════════════════════════
   Subject landing pages (/quiz/<slug>) · Signal redesign
   Builds on ds.css + ds/marketing.css. `sp-` = subject page. Legacy hooks
   static/subject-page.js drives (.chips a.chip, #mastery, #surpriseBtn,
   .stats-row .stat-val, #storySteps / .story-panel, #markDemo, #marqueeA/B)
   keep their names and are styled here.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────── */
.sp-hero {
    position: relative;
    overflow: hidden;
    outline: none;
    padding: clamp(112px, 14vh, 148px) 0 clamp(56px, 7vw, 88px);
    background:
        radial-gradient(60% 70% at 85% 10%, rgba(91, 80, 232, .10), transparent 70%),
        linear-gradient(180deg, var(--ds-bg-2), var(--ds-bg) 70%);
}
[data-dark] .sp-hero {
    background:
        radial-gradient(60% 70% at 85% 10%, rgba(109, 98, 245, .18), transparent 70%),
        linear-gradient(180deg, #18181b, var(--ds-bg) 70%);
}
.sp-hero-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sp-net-lines path { fill: none; stroke: var(--ds-violet-400); stroke-width: 1.2; opacity: .35; vector-effect: non-scaling-stroke; }
.sp-net-lines path:nth-child(2) { opacity: .22; }
.sp-net-lines path:nth-child(3) { opacity: .14; }
.sp-net-nodes circle { fill: var(--ds-violet-500); opacity: .7; }
[data-dark] .sp-net-nodes circle { fill: #b6a6ff; }
.sp-hero-grid {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(32px, 5vw, 80px); align-items: center;
}
.sp-hero-copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.sp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 .8125rem/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.sp-crumbs a { text-decoration: none; color: var(--ds-ink-3); }
.sp-crumbs a:hover { color: var(--ds-accent-ink); }
.sp-crumbs [aria-current] { color: var(--ds-ink-2); }
.sp-title { display: grid; gap: 10px; margin: 0; font-family: var(--ds-font-display); color: var(--ds-ink); text-wrap: balance; }
.sp-title .subject-name {
    font-size: clamp(2.75rem, 6.6vw, 5.75rem);
    font-weight: 700; line-height: .95; letter-spacing: -.05em; word-spacing: .04em;
    color: var(--ds-violet-600);
}
[data-dark] .sp-title .subject-name { color: #b6a6ff; }
.sp-title .subject-promise {
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    font-weight: 650; line-height: 1.02; letter-spacing: -.04em;
}
.sp-hero .hero-sub { max-width: 32em; }
.sp-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-size: .9375rem; font-weight: 550; color: var(--ds-ink-2); }
.sp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.sp-trust .ds-ico { width: 16px; height: 16px; color: var(--ds-mint); stroke-width: 2.4; }

.sp-topic-slot { min-width: 0; }
.topic-card { padding: clamp(22px, 2.6vw, 30px); display: grid; gap: 14px; box-shadow: var(--ds-shadow-3); }
.sp-topic-head { display: flex; align-items: center; gap: 12px; }
.sp-topic-head > div { display: grid; gap: 2px; }
.sp-topic-avi { display: block; width: 36px; height: 36px; flex: none; }
.sp-topic-avi .ds-avi { width: 100%; height: 100%; }
.topic-card .md-chip { display: block; font: 600 .8125rem/1.3 var(--ds-font-text); color: var(--ds-accent-ink); }
.topic-count { font: 500 .8125rem/1.3 var(--ds-font-text); color: var(--ds-ink-3); }
.topic-card-h { margin: 6px 0 0; font-family: var(--ds-font-display); font-size: 1.625rem; font-weight: 700; letter-spacing: -.03em; color: var(--ds-ink); }
.topic-card-sub { margin: 0; color: var(--ds-ink-2); font-size: .9375rem; }
.chips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.chips a.chip {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 12px;
    min-height: 48px; padding: 10px 14px;
    border: 1px solid var(--ds-line); border-radius: 14px;
    background: var(--ds-bg-2);
    color: var(--ds-ink); text-decoration: none;
    font-size: .9375rem; font-weight: 600;
    transition: border-color .25s ease, background-color .25s ease, transform .45s var(--ds-ease-out);
}
.chips a.chip span::first-letter { text-transform: uppercase; }
.chips a.chip .ds-ico { width: 16px; height: 16px; color: var(--ds-ink-3); transition: transform .4s var(--ds-ease-out), color .2s ease; }
.chips a.chip:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); transform: translateX(4px); }
.chips a.chip:hover .ds-ico { color: var(--ds-accent-ink); transform: translateX(3px); }
.chips a.chip.chip-custom { background: transparent; border-style: dashed; color: var(--ds-accent-ink); }
.chips a.chip.is-practiced { border-color: color-mix(in srgb, var(--ds-mint) 45%, transparent); }
.chips a.chip.is-practiced::after {
    content: '✓'; position: absolute; right: 42px; top: 50%; translate: 0 -50%;
    font-size: .8125rem; font-weight: 800; color: var(--ds-mint);
}
.surprise {
    justify-self: start;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 16px;
    border: 1px solid var(--ds-line-2); border-radius: 12px;
    background: var(--ds-surface); color: var(--ds-ink);
    font: 650 .9375rem var(--ds-font-text); cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.surprise:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.surprise-die { display: grid; place-items: center; color: var(--ds-accent-ink); transition: transform .5s var(--ds-ease-out); }
.surprise:hover .surprise-die { transform: rotate(90deg); }
.surprise.is-rolling .surprise-die { animation: sp-roll .32s linear infinite; }
@keyframes sp-roll { to { transform: rotate(360deg); } }
.mastery { display: grid; gap: 8px; }
.mastery[hidden] { display: none; }
.mastery-label { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--ds-ink-2); }
.mastery-track { height: 8px; border-radius: 8px; background: var(--ds-bg-3); overflow: hidden; }
.mastery-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ds-violet-500), var(--ds-mint)); transition: width .8s var(--ds-ease-out); }
.acc-badge[hidden] { display: none; }
.acc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ds-accent-soft); color: var(--ds-ink); font-size: .8125rem; font-weight: 650; }
.acc-pill-sub { color: var(--ds-ink-3); font-weight: 500; }

.sp-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(48px, 6vw, 80px);
    border-top: 1px solid var(--ds-line-2);
}
.sp-stats .stat-item { padding: 24px 20px 0 0; }
.sp-stats .stat-item + .stat-item { padding-left: 20px; border-left: 1px solid var(--ds-line); }
.sp-stats .stat-val { font-family: var(--ds-font-display); font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.sp-stats .stat-val span { font-size: .55em; color: var(--ds-accent-ink); letter-spacing: -.02em; }
.sp-stats .stat-label { margin-top: 8px; font-size: .875rem; color: var(--ds-ink-3); }
@media (max-width: 980px) { .sp-hero-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
    .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-stats .stat-item:nth-child(3) { padding-left: 0; border-left: 0; }
    .sp-stats .stat-item:nth-child(n + 3) { border-top: 1px solid var(--ds-line); margin-top: 18px; }
}
@media (max-width: 560px) {
    .sp-hero { padding-top: 96px; }
    .sp-hero .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .sp-hero .hero-actions .ds-btn { width: 100%; }
    .sp-hero .hero-actions .ds-link { justify-content: center; }
}

/* ── The difference ──────────────────────────────────────────────── */
.sp-compare { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.sp-compare-col { padding: clamp(24px, 3vw, 36px); border-radius: 26px; }
.sp-compare-col:first-child { background: var(--ds-bg-2); box-shadow: none; }
.sp-compare-col--us { box-shadow: var(--ds-shadow-3); }
.sp-compare-label { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 600 .8125rem/1.3 var(--ds-font-text); letter-spacing: 0; color: var(--ds-ink-3); }
.sp-compare-col--us .sp-compare-label { color: #b6a6ff; }
.sp-compare-label .ds-ico { width: 18px; height: 18px; }
.sp-flow { list-style: none; margin: 0; padding: 0; counter-reset: sp-flow; display: grid; gap: 4px; }
.sp-flow li {
    counter-increment: sp-flow;
    position: relative; display: grid; gap: 2px;
    padding: 14px 0 14px 46px;
    border-top: 1px solid var(--ds-line);
}
.sp-flow li::before {
    content: counter(sp-flow, decimal-leading-zero);
    position: absolute; left: 0; top: 16px;
    font-family: var(--ds-font-mono); font-size: .75rem; color: var(--ds-ink-3);
}
.sp-flow b { font-size: 1.0625rem; font-weight: 650; color: var(--ds-ink); }
.sp-flow span { color: var(--ds-ink-2); font-size: .9375rem; }
.sp-compare-col:first-child .sp-flow b { color: var(--ds-ink-2); }
.sp-compare-col--us .sp-flow li::before { color: #5eeaf6; }
.sp-compare-note { margin: 28px 0 0; text-align: center; font-family: var(--ds-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--ds-ink); }
@media (max-width: 860px) { .sp-compare { grid-template-columns: minmax(0, 1fr); } }

/* ── Syllabus ────────────────────────────────────────────────────── */
.syl-grid { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .syl-grid { grid-template-columns: minmax(0, 1fr); } }
.sp-syllabus .syl-intro { margin-top: 22px; max-width: 62ch; }
.syl-card { padding: 24px; border-radius: 22px; }
.syl-card h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-family: var(--ds-font-display); font-size: 1.1875rem; font-weight: 650; letter-spacing: -.02em; color: var(--ds-ink); }
.syl-num { font-size: .75rem; color: var(--ds-accent-ink); flex: none; }
.syl-points { list-style: none; margin: 0; padding: 0; display: grid; }
.syl-points a {
    display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 10px; align-items: center;
    padding: 10px 0; border-top: 1px solid var(--ds-line);
    color: var(--ds-ink-2); text-decoration: none; font-size: .9375rem; line-height: 1.45;
    transition: color .2s ease, padding .35s var(--ds-ease-out);
}
.syl-points a .ds-ico { width: 15px; height: 15px; opacity: 0; transition: opacity .2s ease, transform .35s var(--ds-ease-out); color: var(--ds-accent-ink); }
.syl-points a:hover { color: var(--ds-ink); padding-left: 6px; }
.syl-points a:hover .ds-ico { opacity: 1; transform: translateX(2px); }
.syl-boards { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 10px; }
.syl-boards li { display: flex; align-items: baseline; gap: 12px; color: var(--ds-ink-2); font-size: .9375rem; }
.syl-board-tag { flex: none; }
.syl-caveat { margin: 28px 0 0; }

/* ── How it works (story) ────────────────────────────────────────── */
.sp-how .ds-heading-block { margin-bottom: clamp(40px, 5vw, 64px); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.story-steps { display: grid; gap: 12px; }
/* Room under the last step so the sticky window (~510px tall, pinned at
   104px) is still whole when step 4 lights up at 48% of the viewport,
   rather than sliding under the nav on shorter screens. */
@media (min-width: 901px) { .story-steps { padding-bottom: max(0px, calc(500px - 48vh)); } }
.story-step {
    position: relative;
    padding: 24px 24px 24px 72px;
    border: 1px solid transparent; border-radius: 22px;
    transition: background-color .4s ease, border-color .4s ease, opacity .4s ease;
    opacity: .55;
}
.story-step.active { opacity: 1; background: var(--ds-surface); border-color: var(--ds-line); box-shadow: var(--ds-shadow-1); }
.story-num { position: absolute; left: 24px; top: 26px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ds-bg-3); font-size: .75rem; color: var(--ds-ink-3); transition: background-color .4s ease, color .4s ease; }
.story-step.active .story-num { background: var(--ds-violet-600); color: #fff; }
.story-step h3 { margin: 0 0 6px; font-family: var(--ds-font-display); font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; color: var(--ds-ink); }
.story-step p { margin: 0; color: var(--ds-ink-2); line-height: 1.6; }
.story-visual { position: sticky; top: 104px; }
.story-panels { position: relative; height: 460px; overflow: hidden; background: var(--ds-stage); }
.story-panels::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 1;
    background: linear-gradient(180deg, transparent, var(--ds-stage));
    pointer-events: none;
}
/* Each panel is a captured screen of the real app, cropped from the top. */
.story-panel {
    position: absolute; inset: 0;
    opacity: 0; transform: translateY(10px);
    transition: opacity .4s ease, transform .5s var(--ds-ease-out);
    pointer-events: none;
}
.story-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.story-panel .ds-shot { width: 100%; height: auto; }
@media (max-width: 900px) {
    .story-grid { grid-template-columns: minmax(0, 1fr); }
    .story-visual { display: none; }
    .story-step { opacity: 1; background: var(--ds-surface); border-color: var(--ds-line); }
    .story-step .story-num { background: var(--ds-violet-600); color: #fff; }
}

/* ── Worked marking (night) ──────────────────────────────────────── */
.sp-marking-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.exam-note { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 0; padding: 16px 18px; border: 1px solid var(--ds-line); border-radius: 18px; background: rgba(255, 255, 255, .04); color: var(--ds-ink-2); font-size: .9375rem; line-height: 1.55; }
.exam-note .ds-ico { flex: none; width: 18px; height: 18px; color: var(--ds-amber); margin-top: 2px; }
.exam-note b { color: var(--ds-ink); }
.sp-mark-slot {
    border: 1px solid var(--ds-line-2); border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sp-mark-slot .mark-demo { padding: clamp(18px, 2.4vw, 28px); }
.sp-marking .miss-head { margin: clamp(48px, 6vw, 80px) 0 18px; font: 600 .9375rem/1.3 var(--ds-font-text); color: var(--ds-coral); }
.miss-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.miss-card { display: grid; gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--ds-line); border-radius: 20px; background: rgba(255, 255, 255, .03); }
.miss-card span { font-size: .75rem; color: var(--ds-coral); }
.miss-card p { margin: 0; color: var(--ds-ink-2); line-height: 1.6; }
@media (max-width: 900px) {
    .sp-marking-grid, .miss-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Tools ───────────────────────────────────────────────────────── */
.tool-grid { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-card { position: relative; display: grid; gap: 8px; align-content: start; min-height: 190px; padding: 24px; border-radius: 22px; }
.tool-card-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 14px; background: var(--ds-accent-soft); color: var(--ds-accent-ink); }
.tool-card-ico .ds-ico { width: 20px; height: 20px; }
.tool-card b { font-family: var(--ds-font-display); font-size: 1.1875rem; font-weight: 650; letter-spacing: -.02em; color: var(--ds-ink); }
.tool-card > span:not([class]) { color: var(--ds-ink-2); font-size: .9375rem; line-height: 1.55; }
.tool-card-go { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ds-line-2); color: var(--ds-ink-2); transition: background-color .3s ease, color .3s ease, transform .5s var(--ds-ease-out), border-color .3s ease; }
.tool-card-go .ds-ico { width: 15px; height: 15px; }
.tool-card:hover { border-color: var(--ds-line-2); box-shadow: var(--ds-shadow-2); }
.tool-card:hover .tool-card-go { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; transform: rotate(45deg); }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Marquee (pills built by subject-page.js) ────────────────────── */
.sp-marquee { padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 5vw, 64px); outline: none; overflow: hidden; display: grid; gap: 12px; }
.sp-marquee .marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sp-marquee .marquee-track { display: flex; gap: 10px; width: max-content; animation: sp-marquee 160s linear infinite; }
.sp-marquee .marquee.rev .marquee-track { animation-direction: reverse; }
.sp-marquee .marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes sp-marquee { to { transform: translateX(-50%); } }
.sp-marquee .mq-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--ds-line); border-radius: 999px; background: var(--ds-surface); color: var(--ds-ink-2); font-size: .875rem; font-weight: 550; text-decoration: none; white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.sp-marquee .mq-pill:hover { border-color: var(--ds-accent); color: var(--ds-ink); }
.marquee-cap { margin: 10px 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce) { .sp-marquee .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .sp-marquee .marquee.rev { display: none; } }

/* ── Boards ──────────────────────────────────────────────────────── */
.sys-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 4vw, 56px); }
.sys-tile {
    position: relative; display: grid; gap: 4px; align-content: end;
    min-height: 140px; padding: 18px;
    border: 1px solid var(--ds-line); border-radius: 20px;
    background: var(--ds-surface); color: var(--ds-ink); text-decoration: none;
    transition: transform .6s var(--ds-ease-out), box-shadow .6s var(--ds-ease-out), border-color .3s ease;
}
.sys-tile span { font-size: .6875rem; letter-spacing: .04em; color: var(--ds-ink-3); }
.sys-tile b { font-family: var(--ds-font-display); font-size: 2rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.sys-tile .ds-ico { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; color: var(--ds-accent-ink); transition: transform .5s var(--ds-ease-out); }
.sys-tile:hover { transform: translateY(-4px); border-color: var(--ds-line-2); box-shadow: var(--ds-shadow-2); }
.sys-tile:hover .ds-ico { transform: translate(3px, -3px); }
.board-note em { font-style: normal; color: var(--ds-accent-ink); font-weight: 600; }
@media (max-width: 900px) { .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sys-tile:last-child { grid-column: 1 / -1; } }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.sp-faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sp-faq-head { position: sticky; top: 112px; }
.sp-faq .ds-faq summary h3 { margin: 0; font: inherit; letter-spacing: inherit; }
@media (max-width: 860px) { .sp-faq-grid { grid-template-columns: minmax(0, 1fr); } .sp-faq-head { position: static; } }

/* ── CTA band ────────────────────────────────────────────────────── */
.sp-cta { padding: clamp(56px, 7vw, 96px) 0; }
.cta-band {
    display: grid; justify-items: center; gap: 22px; text-align: center;
    padding: clamp(48px, 7vw, 104px) clamp(20px, 4vw, 56px);
    border-radius: clamp(26px, 3vw, 40px);
    overflow: hidden;
}
.cta-band .ds-h1 { max-width: 16ch; font-size: clamp(2.25rem, 5vw, 4.25rem); }
.cta-band .ds-lead { text-align: center; }
.cta-actions { justify-content: center; }
.cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--ds-ink-2); }
.cta-trust li { display: inline-flex; align-items: center; gap: 7px; }
.cta-trust .ds-ico { width: 15px; height: 15px; color: var(--ds-mint); }
[data-dark] .cta-band { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }

/* ── Related ─────────────────────────────────────────────────────── */
.sp-related { padding-top: 0; }
.rel-grid { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.rel-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 60px; padding: 0 18px;
    border: 1px solid var(--ds-line); border-radius: 16px;
    background: var(--ds-surface); color: var(--ds-ink); text-decoration: none;
    font-weight: 600;
    transition: border-color .25s ease, background-color .25s ease, transform .45s var(--ds-ease-out);
}
.rel-card .ds-ico { width: 16px; height: 16px; color: var(--ds-accent-ink); transition: transform .45s var(--ds-ease-out); }
.rel-card:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); transform: translateY(-2px); }
.rel-card:hover .ds-ico { transform: translate(3px, -3px); }
.rel-more { margin: 0; }