/* ==========================================================================
   RABZI components.css — hero, section head, cards, bento, stats, timeline, faq, cta band,
   marquee, compare, capability wall, prose, toc, pagination, configurator shell
   ========================================================================== */

/* ---- section head (index line) ---- */
.section-head{ position:relative; margin-bottom:var(--s-7); display:flex; flex-direction:column; gap:var(--s-6); counter-increment:chapter }
.section-head__line{ height:1px; background:var(--line); transform-origin:left; }
html.js .section-head__line{ transform:scaleX(0) } html.js .section-head.is-inview .section-head__line{ transform:scaleX(1); transition:transform .72s var(--ease-inout) }
.section-head__row{ display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-top:calc(-1 * var(--s-3)) }
.section-head__eyebrow{ color:var(--fg) }
.section-head__index::before{ content:counter(chapter, decimal-leading-zero) }
.section-head__index[data-index]::before{ content:attr(data-index) }
.section-head__meta{ color:var(--fg-muted); display:flex; gap:var(--s-4) }
.section-head__link{ padding-block:14px; margin-block:-14px; color:var(--fg) } .section-head__link:hover{ color:var(--link-hover) }
.section-head__title{ max-width:18ch }
.section-head--center{ align-items:center; text-align:center } .section-head--center .section-head__row{ justify-content:center }
.section-head__text{ max-width:var(--measure) }

/* ---- hero ---- */
.hero{ position:relative; padding-top:calc(var(--header-h) + var(--s-8)); padding-bottom:var(--s-8) }
.hero__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:end; position:relative }
.hero__copy{ grid-column:1 / span 8; display:flex; flex-direction:column; gap:var(--s-6) }
.hero__eyebrow{ color:var(--fg-muted); display:block; text-wrap:balance }
.hero__eyebrow .square{ vertical-align:middle; margin-right:var(--s-3); position:relative; top:-1px }
.hero__eyebrow .square{ background:var(--signal) }
.hero__title{ max-width:22ch }
.hero__lead{ max-width:52ch }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center }
.hero__proof{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); color:var(--fg-muted); margin-top:var(--s-2) }
.hero__proof span::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--signal); margin-right:var(--s-2); vertical-align:middle }
.hero__visual{ grid-column:9 / span 4; position:relative }
.hero__canvas{ position:relative; background:#121215; color:#F6F4EE; --ink:#121215; --paper:#F6F4EE; aspect-ratio:5/6; overflow:hidden }
.hero__canvas > svg,.hero__canvas > canvas{ position:absolute; inset:0; width:100%; height:100% }
.hero__canvas > canvas{ opacity:0; transition:opacity .24s linear } .hero__canvas > canvas.is-ready{ opacity:1 }
.hero__legend{ position:static; margin-top:var(--s-3); color:var(--fg-muted); display:flex; justify-content:space-between; gap:var(--s-3) }
.hero__scroll{ position:absolute; right:0; bottom:0; color:var(--fg-muted); display:none; align-items:center; gap:var(--s-2) }
.hero--home{ min-height:min(calc(100svh - var(--header-h)), 960px); display:flex; flex-direction:column; justify-content:center }
.hero--home .hero__grid{ align-items:center }
.hero--page{ min-height:auto; padding-bottom:var(--s-8) }
.hero--page .hero__copy{ grid-column:1 / span 7 }
.hero--page .hero__canvas{ aspect-ratio:1 }
.hero--page .hero__lead{ max-width:var(--measure) }
.hero__spec{ grid-column:9 / span 4; align-self:start; margin-top:calc(var(--s-6) + 1.4em); border:1px solid var(--line); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); font-size:var(--fs-small) }
.hero__spec dl{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3) var(--s-4); margin:0; align-items:baseline }
.hero__spec dt{ color:var(--fg-muted); font-size:11px } .hero__spec dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right }
.hero__breadcrumbs{ margin-bottom:var(--s-4) }
@media (min-width:1024px){ .hero__scroll{ display:inline-flex } }
@media (max-width:1023px){ .hero__copy,.hero--page .hero__copy{ grid-column:1 / -1 } .hero__visual,.hero__spec{ grid-column:1 / -1; margin-top:0 } .hero--page .hero__canvas{ aspect-ratio:1; max-width:480px } .hero--home .hero__canvas{ aspect-ratio:12/14; max-width:420px } .hero--home .hero__legend{ max-width:420px } .hero--page .hero__legend{ max-width:480px } .hero--home{ min-height:auto } }

/* ---- cards ---- */
.card{ position:relative; display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-6); background:var(--surface); border:1px solid var(--line); color:var(--fg); min-width:0; transition:border-color var(--d-s) var(--ease-out) }
.grid--collapse > .card{ border:0 }
a.card:hover,.card:has(.card__cover:hover){ color:var(--fg); border-color:var(--line-strong) }
.card__meta{ color:var(--fg-muted); display:flex; gap:var(--s-2); align-items:center }
.card__index{ position:relative; display:inline-block; min-width:2ch; transition:color var(--d-s) var(--ease-flip) }
.card--service[data-accent="violet"]:hover .card__index{ color:var(--block-violet-deep) } .card--service[data-accent="ocean"]:hover .card__index{ color:var(--block-ocean-deep) } .card--service[data-accent="ember"]:hover .card__index{ color:var(--signal-text) } .card--service[data-accent="mint"]:hover .card__index{ color:#007A4E } .card--service[data-accent="sun"]:hover .card__index{ color:#8A6500 } .card--service[data-accent="rose"]:hover .card__index{ color:#B8285E }
[data-theme="dark"] .card--service:hover .card__index{ color:var(--fg) }
.card__icon{ width:24px; height:24px; margin-top:var(--s-2) }
.card__title{ font:600 var(--fs-h3)/1.15 var(--font-display); letter-spacing:-.01em; text-wrap:balance }
.card__title a{ color:inherit }
.card__text{ color:var(--fg-2); font-size:var(--fs-small) }
a.card .card__text,.card--service .card__text{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.card__row{ color:var(--fg-muted); display:flex; gap:var(--s-2); margin-top:auto; padding-top:var(--s-3); text-transform:none; letter-spacing:.04em }
.card__link{ display:inline-flex; align-items:center; gap:var(--s-2); font:600 14px/1 var(--font-display); margin-top:var(--s-2) }
.card__link .icon{ width:16px; height:16px; transition:transform var(--d-s) var(--ease-out) }
.card:hover .card__link .icon{ transform:translateX(6px) }
.card--sector .card__title{ font-size:var(--fs-h4) }
/* case card */
.card--case{ padding:0; border:0; gap:var(--s-3); background:transparent }
.card--case .card__visual{ position:relative; transition:transform var(--d-m) var(--ease-out) }
.card--case:hover .card__visual{ transform:translateY(-8px) }
.card--case .card__meta{ margin-top:var(--s-2); text-transform:uppercase }
.card--case .card__result{ margin-top:auto }
.card__cover::after{ content:""; position:absolute; inset:0; z-index:1 }
.card__result{ font-variant-numeric:tabular-nums; font-size:var(--fs-small) } .card__result strong{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em; margin-right:var(--s-2) }
/* post row */
.card--post{ flex-direction:row; align-items:baseline; gap:var(--s-5); padding:var(--s-5) 0; border:0; border-bottom:1px solid var(--line); background:transparent }
.card--post .card__meta{ min-width:9ch; flex:none }
.card__cat{ width:8px; height:8px; flex:none; background:var(--block-ocean); align-self:center }
.card__cat[data-accent="webshops"],.card__cat[data-accent="security"]{ background:var(--signal) } .card__cat[data-accent="apps"],.card__cat[data-accent="seo"],.card__cat[data-accent="toegankelijkheid"],.card__cat[data-accent="onderhoud"]{ background:var(--block-mint) } .card__cat[data-accent="ai"],.card__cat[data-accent="webapps"],.card__cat[data-accent="strategie"]{ background:var(--block-violet) } .card__cat[data-accent="integraties"],.card__cat[data-accent="data"]{ background:var(--block-sun) } .card__cat[data-accent="design"],.card__cat[data-accent="marketing"]{ background:var(--block-rose) }
.card--post .card__title{ flex:1; font-size:var(--fs-m); transition:transform var(--d-s) var(--ease-out) }
.card--post:hover .card__title{ transform:translateX(8px) }
.card__read{ color:var(--fg-muted); flex:none } .card__arrow{ flex:none; font-size:var(--fs-h3) }
@media (max-width:639px){ .card--post{ flex-wrap:wrap; gap:var(--s-3) } .card--post .card__title{ flex-basis:100%; order:3 } }
/* testimonial */
.card--testimonial{ gap:var(--s-5) }
.card__quote{ font-family:var(--font-serif); font-style:italic; font-size:var(--fs-lead); line-height:1.35; text-wrap:pretty }
.card__quote::before{ content:"“" }.card__quote::after{ content:"”" }
.card__rating{ display:flex; gap:4px } .card__rating .square{ width:6px; height:6px; background:var(--line-strong) } .card__rating .square.is-on{ background:var(--fg) }

/* ---- bento ---- */
.bento{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(160px,auto); gap:1px; background:var(--line); border:1px solid var(--line) }
.bento__item{ grid-column:span 4; background:var(--surface); padding:var(--s-5); position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-4); min-height:200px; color:var(--fg) }
.bento__item--2x{ grid-column:span 8 } .bento__item--tall{ grid-row:span 2 }
.bento__index{ color:var(--fg-muted) } .bento__label{ display:flex; justify-content:space-between; gap:var(--s-3); color:var(--fg); font-weight:600; font-size:var(--fs-small) }
.bento__label .mono{ color:var(--fg-muted); font-weight:500 }
.bento__demo{ flex:1; display:flex; align-items:center; justify-content:center; min-height:72px }
a.bento__item:hover{ background:var(--surface-2) }
@media (max-width:1023px){ .bento__item,.bento__item--2x{ grid-column:span 6 } } @media (max-width:639px){ .bento__item,.bento__item--2x{ grid-column:span 12 } .bento__item--tall{ grid-row:span 1 } }

/* ---- stats ---- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:transparent; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0; padding:0; list-style:none }
.stat{ box-shadow:0 0 0 1px var(--line) }
.stat{ background:var(--bg); padding:var(--s-6) var(--s-5); display:flex; flex-direction:column; gap:var(--s-3); container-type:inline-size; min-width:0 }
.stat__value{ font-size:min(var(--fs-stat), 28cqi) }
.stat__label{ color:var(--fg-muted); line-height:1.3; margin-top:auto }
@media (max-width:1023px){ .stat:last-child:nth-child(odd){ grid-column:1 / -1 } }
@media (max-width:639px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.counter{ display:inline-flex; overflow:visible; vertical-align:bottom }
.counter > span{ white-space:pre } .counter__digit{ display:inline-block; position:relative; height:1em; line-height:1; overflow:hidden } .counter__strip{ display:flex; flex-direction:column; will-change:transform } .counter__strip span{ height:1em; line-height:1 }

/* ---- timeline ---- */
.timeline{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; border-top:1px solid var(--line); counter-reset:step }
.timeline__step{ display:grid; grid-template-columns:4rem 1fr; gap:var(--s-5); padding:var(--s-6) 0; border-bottom:1px solid var(--line) }
.timeline__num{ font-size:var(--fs-m); font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; color:var(--fg-muted); font-variant-numeric:tabular-nums }
.timeline__body{ display:flex; flex-direction:column; gap:var(--s-3); max-width:var(--measure) }
.timeline__meta{ color:var(--fg-muted) } .timeline__text{ color:var(--fg-2) } .timeline__ritual{ padding-top:var(--s-2) }
[data-material="ink"] .timeline__text{ color:var(--fg) } [data-material="ink"] .timeline__num{ color:var(--fg-muted) }
@media (min-width:1024px){ .timeline__step{ grid-template-columns:6rem 1fr } }

/* ---- faq ---- */
.faq{ border-top:1px solid var(--line) }
.faq__title{ margin-bottom:var(--s-6) }
.faq__item{ border-bottom:1px solid var(--line) }
.faq__q{ display:grid; grid-template-columns:3ch 1fr 24px; gap:var(--s-4); align-items:baseline; padding:var(--s-5) 0; cursor:pointer; list-style:none; font:600 var(--fs-h3)/1.2 var(--font-display); letter-spacing:-.01em }
.faq__q::-webkit-details-marker{ display:none }
.faq__num{ color:var(--fg-muted); font-size:var(--fs-mono); font-weight:500; letter-spacing:.08em }
.faq__icon{ position:relative; width:16px; height:16px; align-self:center; justify-self:end }
.faq__icon::before,.faq__icon::after{ content:""; position:absolute; background:currentColor; transition:transform var(--d-s) var(--ease-inout) }
.faq__icon::before{ left:0; right:0; top:50%; height:1px } .faq__icon::after{ top:0; bottom:0; left:50%; width:1px }
.faq__item[open] .faq__icon::after{ transform:rotate(90deg) }
.faq__a{ overflow:hidden }
.faq__a-inner{ padding:0 0 var(--s-6) calc(3ch + var(--s-4)); color:var(--fg-2); max-width:var(--measure) }
.faq__q:hover .faq__q-text{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px }

/* ---- CTA band ---- */
.cta-band{ position:relative; background:var(--bg); color:var(--fg); padding:var(--section) 0; --accent:var(--signal); --accent-fg:var(--signal-fg) }
.cta-band::before{ content:""; position:absolute; inset:16px; border:1px solid var(--line); pointer-events:none }
.cta-band__inner{ display:flex; flex-direction:column; gap:var(--s-6); align-items:flex-start }
.cta-band__eyebrow{ color:var(--fg) }
.cta-band__title{ max-width:16ch }
.cta-band__text{ max-width:52ch }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:var(--s-4) }
.cta-band__contact a{ color:var(--fg) }
[data-material="block"] .btn--ghost{ color:var(--fg); border-color:var(--fg) } [data-material="block"] .btn--ghost::before{ background:var(--fg) } [data-material="block"] .btn--ghost:hover{ color:var(--accent) }

/* ---- marquee ---- */
.marquee{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--s-4) 0; white-space:nowrap }
.marquee__track{ display:inline-flex; align-items:center; gap:var(--s-7); will-change:transform; padding-right:var(--s-7) }
.marquee__item{ font:600 var(--fs-h3)/1 var(--font-display); letter-spacing:-.01em }
.marquee__item em{ font-family:var(--font-serif); font-style:italic; font-weight:400 }
.marquee__sep{ width:8px; height:8px; background:var(--signal); flex:none }
html:not(.js) .marquee,.marquee.is-static{ white-space:normal } html:not(.js) .marquee__track,.marquee.is-static .marquee__track{ flex-wrap:wrap; gap:var(--s-4) var(--s-6) }

/* ---- compare table ---- */
.compare{ border:1px solid var(--line); overflow:hidden }
.compare table{ width:100% } .compare th,.compare td{ padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--line); vertical-align:middle }
.compare th{ background:var(--surface-2); color:var(--fg) }
[data-material="ink"] .compare{ border-color:var(--line) } [data-material="ink"] .compare th{ background:var(--bg-2); color:var(--fg) } [data-material="ink"] .compare td{ color:var(--fg) }
.compare tr:last-child td{ border-bottom:0 }
.compare td:not(:first-child),.compare th:not(:first-child){ text-align:center; width:20% }
.compare .is-rabzi,.compare th.is-rabzi{ background:var(--ink); color:var(--paper) }
/* inside an ink section the column has to invert against its own ground, in either theme */
[data-material="ink"] .compare .is-rabzi,[data-material="ink"] .compare th.is-rabzi{ background:var(--fg); color:var(--bg) }
.compare .sq{ display:inline-block; width:10px; height:10px; border:1px solid currentColor; vertical-align:middle }
.compare .sq[data-v="2"]{ background:currentColor } .compare .sq[data-v="1"]{ background:linear-gradient(135deg,currentColor 50%,transparent 50%) } .compare .sq[data-v="0"]{ opacity:.35 }
.compare td:first-child{ font-weight:500 }
.compare .price{ font-family:var(--font-mono); letter-spacing:.06em }
@media (max-width:639px){ .compare{ overflow-x:auto } .compare table{ min-width:520px } .compare td:first-child,.compare th:first-child{ position:sticky; left:0; background:var(--bg) } }

/* ---- capability raster (studio) ---- */
.capability{ border:1px solid var(--line); background:var(--line); display:grid; grid-template-columns:minmax(120px,2fr) repeat(5,1fr); gap:1px; font-size:var(--fs-mono) }
.capability > *{ background:var(--bg); padding:var(--s-3) var(--s-4); display:flex; align-items:center; min-height:44px }
.capability__head{ color:var(--fg-muted) }
.capability__cell{ justify-content:center }
.capability__cell .sq{ width:10px; height:10px; border:1px solid var(--line-strong) } .capability__cell.is-on .sq{ background:var(--fg); border-color:var(--fg) }
.capability a{ color:var(--fg); font-weight:500 } .capability a:hover{ text-decoration:underline; text-underline-offset:.2em }
@media (max-width:639px){ .capability{ min-width:520px; font-size:11px } .capability > *{ padding:var(--s-2) } }

/* ---- prose ---- */
.prose{ max-width:68ch; font-size:1.125rem; line-height:1.6; counter-reset:h2 }
.prose > * + *{ margin-top:1.2em }
.prose h2{ font:700 var(--fs-m)/1 var(--font-display); letter-spacing:-.02em; margin-top:2.2em; text-wrap:balance }
.prose h2::before{ content:counter(h2, decimal-leading-zero) " — "; counter-increment:h2; font:500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing:var(--ls-mono); color:var(--fg-muted); display:block; margin-bottom:var(--s-3) }
.prose h3{ margin-top:1.8em } .prose h4{ margin-top:1.4em }
.prose a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em } .prose a:hover{ color:var(--link-hover) }
.prose ul,.prose ol{ padding-left:1.2em } .prose li + li{ margin-top:.4em } .prose ul{ list-style:none } .prose ul li{ position:relative } .prose ul li::before{ content:""; position:absolute; left:-1.2em; top:.62em; width:6px; height:6px; background:var(--fg) }
.prose blockquote{ font-size:var(--fs-m); line-height:1.25; padding-left:var(--s-5); border-left:2px solid var(--signal); margin-block:1.6em }
.prose table{ font-size:var(--fs-small) } .prose .table-scroll{ margin-block:1.6em }
.prose code{ background:var(--bg-2); padding:.1em .35em; font-size:.85em }
.prose pre code{ background:none; padding:0 }
.prose hr{ margin-block:2em }
.prose img,.prose figure{ margin-block:1.6em }
.prose strong{ font-weight:600 }
.prose .lead{ font-size:var(--fs-lead) }
.faq .prose{ font-size:var(--fs-body) }

/* ---- toc, pagination ---- */
.toc{ font-size:var(--fs-mono); display:flex; flex-direction:column; gap:var(--s-2) }
.toc__title{ color:var(--fg-muted); margin-bottom:var(--s-2) }
.toc a{ display:flex; gap:var(--s-3); color:var(--fg-2); padding:var(--s-1) 0 } .toc a:hover,.toc a.is-active{ color:var(--fg) }
.toc a.is-active::before{ content:""; width:6px; height:6px; background:var(--signal); align-self:center; flex:none }
.toc__num{ color:var(--fg-muted); min-width:2.2em }
.pagination{ display:flex; gap:var(--s-4); align-items:center; font-family:var(--font-mono); font-size:var(--fs-mono) }
.pagination .is-current{ width:8px; height:8px; background:var(--signal) }

/* ---- raster (sector cells) ---- */
.raster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:transparent; border:1px solid var(--line) }
.raster__cell{ box-shadow:0 0 0 1px var(--line) }
.raster__cell{ background:var(--surface); color:var(--fg); padding:var(--s-5); min-height:140px; display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-4); position:relative }
.raster__cell:hover,.raster__cell:focus-visible{ background:var(--surface-2) }
.raster__cell .icon{ width:24px; height:24px }
.raster__cell .raster__name{ font-weight:600; font-size:var(--fs-small); font-variation-settings:'wdth' var(--wdth-narrow); letter-spacing:0 }
.raster__cell .raster__num{ position:absolute; top:var(--s-3); right:var(--s-3); color:var(--fg-muted) }
.raster__cell .raster__arrow{ position:absolute; right:var(--s-4); bottom:var(--s-4); opacity:0; transform:translateX(-6px); transition:opacity var(--d-s), transform var(--d-s) var(--ease-out) }
.raster__cell:hover .raster__arrow,.raster__cell:focus-visible .raster__arrow{ opacity:1; transform:none }
@media (min-width:1024px){ .raster{ grid-template-columns:repeat(7,minmax(0,1fr)) } } @media (max-width:1023px){ .raster{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---- pinned service stack (home) ---- */
.stack{ display:flex; flex-direction:column; gap:var(--s-4) }
.stack__card{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s-6); align-items:center; padding:var(--s-7); background:var(--surface); border:1px solid var(--line); color:var(--fg); position:relative; transform-origin:top center }
.stack__num{ font:700 var(--fs-stat)/.9 var(--font-display); letter-spacing:-.04em; color:var(--fg-muted); font-variant-numeric:tabular-nums; transition:color var(--d-s) var(--ease-flip) }
.stack__card:hover .stack__num{ color:var(--accent-text) }
.stack__body{ display:flex; flex-direction:column; gap:var(--s-4); align-items:flex-start }
.stack__title{ margin-top:var(--s-3) }
.stack__meta{ color:var(--fg-muted); text-transform:none; letter-spacing:.04em }
@media (min-width:1024px){ html.js .stack[data-pin] .stack__card{ position:sticky; top:calc(var(--header-h) + var(--i, 0) * 12px) } }
@media (max-width:1023px){ .stack__card{ grid-template-columns:1fr; padding:var(--s-5) } }

/* ---- pillars ---- */
.pillars{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:transparent; border:1px solid var(--line) }
.pillars > *{ box-shadow:0 0 0 1px var(--line) }
.pillar{ background:var(--bg); padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4) }
.pillar .icon{ width:24px; height:24px } .pillar__title{ font-size:var(--fs-h3) } .pillar__text{ color:var(--fg-2); font-size:var(--fs-small) }
@media (max-width:1023px){ .pillars{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:639px){ .pillars{ grid-template-columns:1fr } }

/* ---- price cards ---- */
.price-card{ border:1px solid var(--line); padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); background:var(--surface); color:var(--fg); position:relative }
.price-card__label{ font-weight:600 } .price-card__from{ display:flex; align-items:baseline; gap:var(--s-2); font:700 var(--fs-m)/1 var(--font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums } .price-card__from small{ font:500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing:var(--ls-mono); text-transform:uppercase; color:var(--fg-muted) }
.price-card__lead{ color:var(--fg-muted) }
.price-card.is-popular{ border-color:var(--fg) } .price-card__badge{ position:absolute; top:-1px; right:-1px; background:var(--fg); color:var(--bg); padding:var(--s-1) var(--s-2); font:500 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase }
.price-card ul{ padding-left:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2); font-size:var(--fs-small); color:var(--fg-2) } .price-card li::before{ content:"■"; font-size:6px; vertical-align:middle; margin-right:var(--s-2); color:var(--fg) }

/* ---- configurator ---- */
.configurator{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--s-7) }
.configurator__step{ margin:0; border:0; border-top:1px solid var(--line); padding:var(--s-6) 0; display:flex; flex-direction:column; gap:var(--s-4) }
.configurator__step legend{ font:600 var(--fs-h3)/1.2 var(--font-display); padding:0; margin-bottom:var(--s-3) } .configurator__step legend .mono{ color:var(--fg-muted); margin-right:var(--s-3) }
.configurator__options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:transparent; border:1px solid var(--line) }
.configurator__options > *{ box-shadow:0 0 0 1px var(--line) }
.configurator__option{ background:var(--bg); padding:var(--s-4); display:flex; gap:var(--s-3); align-items:flex-start; cursor:pointer; font-size:var(--fs-small) }
.configurator__option:hover{ background:var(--bg-2) }
.configurator__option input{ appearance:none; width:14px; height:14px; border:1px solid var(--line-strong); margin-top:3px; flex:none } .configurator__option input:checked{ background:var(--fg); border-color:var(--fg) } .configurator__option input:focus-visible{ outline:2px solid var(--focus); outline-offset:2px }
.configurator__option strong{ display:block } .configurator__option span.mono{ color:var(--fg-muted) }
.configurator__summary{ position:sticky; align-self:start; top:calc(var(--header-h) + var(--s-5)); border:1px solid var(--line-strong); padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4); background:var(--bg) }
.configurator__price{ font:700 var(--fs-l)/1 var(--font-display); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
@media (max-width:1023px){ .configurator{ grid-template-columns:minmax(0,1fr) } .configurator__steps,.configurator__summary{ min-width:0 } .configurator__summary{ position:static } .configurator__options{ grid-template-columns:1fr } }

/* ---- misc ---- */
.spec{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:transparent; border:1px solid var(--line) }
@media (min-width:640px) and (max-width:1023px){ .spec{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.spec__item{ box-shadow:0 0 0 1px var(--line) }
.spec__item{ background:var(--bg); padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2) } .spec__item dt{ color:var(--fg-muted) } .spec__item dd{ font-weight:600; margin:0; font-variant-numeric:tabular-nums }
.list-arrows{ list-style:none; padding:0; display:flex; flex-direction:column } .list-arrows li{ display:flex; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) 0; border-bottom:1px solid var(--line) } .list-arrows a{ color:var(--fg) }
.list-arrows li > .mono{ flex:none; white-space:nowrap; text-align:right }
@media (max-width:639px){ .list-arrows li{ flex-direction:column; align-items:flex-start; gap:var(--s-2) } .list-arrows li > .mono{ text-align:left; white-space:normal } }
.hue-violet{ background:var(--block-violet); color:var(--block-violet-fg) } .hue-ocean{ background:var(--block-ocean); color:var(--block-ocean-fg) } .hue-ember{ background:var(--block-ember); color:var(--block-ember-fg) } .hue-mint{ background:var(--block-mint); color:var(--block-mint-fg) } .hue-sun{ background:var(--block-sun); color:var(--block-sun-fg) } .hue-rose{ background:var(--block-rose); color:var(--block-rose-fg) }
.soft-violet{ background:var(--block-violet-soft) } .soft-ocean{ background:var(--block-ocean-soft) } .soft-ember{ background:var(--block-ember-soft) } .soft-mint{ background:var(--block-mint-soft) } .soft-sun{ background:var(--block-sun-soft) } .soft-rose{ background:var(--block-rose-soft) }

.tag--note{ border-color:var(--line-strong); color:var(--fg); margin-right:var(--s-2); text-transform:uppercase; font-size:10px }
.card--case .card__meta{ flex-wrap:wrap; row-gap:var(--s-2); min-block-size:calc(2lh + var(--s-2)) }
.dev__lbl:empty{ display:none }

.tag--own{ border-color:var(--fg); color:var(--fg) }