/* ==========================================================================
   RABZI visuals.css — plates (flat colour rectangles) with pure CSS/SVG device mockups.
   Container-relative: everything inside uses cqi so one markup scales from 280px cards to 1200px heroes.
   ========================================================================== */
.visual{ position:relative; container-type:inline-size; width:100%; --pl:var(--block-ocean); --pl-fg:var(--block-ocean-fg); --pl-deep:var(--block-ocean-deep); --pl-soft:var(--block-ocean-soft) }
.visual[data-theme="violet"]{ --pl:var(--block-violet); --pl-fg:var(--block-violet-fg); --pl-deep:var(--block-violet-deep); --pl-soft:var(--block-violet-soft) }
.visual[data-theme="ember"]{ --pl:var(--block-ember); --pl-fg:var(--block-ember-fg); --pl-deep:var(--block-ember-deep); --pl-soft:var(--block-ember-soft) }
.visual[data-theme="mint"]{ --pl:var(--block-mint); --pl-fg:var(--block-mint-fg); --pl-deep:var(--block-mint-deep); --pl-soft:var(--block-mint-soft) }
.visual[data-theme="sun"]{ --pl:var(--block-sun); --pl-fg:var(--block-sun-fg); --pl-deep:var(--block-sun-deep); --pl-soft:var(--block-sun-soft) }
.visual[data-theme="rose"]{ --pl:var(--block-rose); --pl-fg:var(--block-rose-fg); --pl-deep:var(--block-rose-deep); --pl-soft:var(--block-rose-soft) }
.visual__plate{ position:relative; overflow:hidden; background:var(--pl-soft); aspect-ratio:4/3; --pad:10cqi; --dk:#121215; --pp:#F6F4EE; --pp2:#EEEBE3 }
.visual[data-size="inline"] .visual__plate{ aspect-ratio:3/2; --pad:12cqi }
.visual[data-size="hero"] .visual__plate{ aspect-ratio:16/10; background:var(--pl); --pad:8cqi }
@media (max-width:1023px){ .visual[data-size="hero"] .visual__plate{ aspect-ratio:4/5 } }
.visual.visual--phone[data-size="hero"] .visual__plate{ aspect-ratio:4/3 }
.visual.visual--phone[data-size="hero"] .visual__layer--mid{ width:21%; left:6%; top:8% }
.visual.visual--phone[data-size="hero"] .visual__layer--back{ width:56%; right:4%; top:8% }
.visual.visual--phone[data-size="hero"] .visual__layer--front{ width:26%; left:34%; bottom:6% }
.visual__layer{ position:absolute }
.visual__layer--single{ inset:var(--pad); display:flex; justify-content:center }
.visual__layer--single .dev{ width:100%; height:100% }
.visual__layer--single .dev--phone{ width:auto; flex:none }
/* Three plates in a cascade: overlaps land on outlines and margins only, never on a data cell. */
.visual[data-size="hero"] .visual__layer--back{ top:4%; right:4%; width:37%; z-index:1 }
.visual[data-size="hero"] .visual__layer--mid{ left:5%; top:23%; width:54%; z-index:2 }
.visual[data-size="hero"] .visual__layer--front{ right:8%; bottom:5%; width:16%; z-index:3 }
.visual[data-size="hero"] .visual__layer > .dev{ box-shadow:0 0 0 2px var(--pl-fg) }
@media (max-width:1023px){ .visual[data-size="hero"] .visual__layer--back{ width:70%; right:4% } .visual[data-size="hero"] .visual__layer--mid{ left:6%; top:30%; width:80% } .visual[data-size="hero"] .visual__layer--front{ width:28% } }
.visual[data-size="hero"] .visual__layer--front .dev--term{ aspect-ratio:1/1 }
.visual__caption{ display:block; margin-top:var(--s-3); color:var(--fg-muted) }
.visual__wipe{ position:absolute; inset:-10%; background:var(--paper-2); clip-path:polygon(0 0,0 0,0 0); pointer-events:none; z-index:5 }
.visual__annot{ position:absolute; font:500 2.2cqi/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); opacity:0; pointer-events:none; z-index:4 }
.visual__annot--tl{ top:2cqi; left:2.5cqi } .visual__annot--br{ bottom:2cqi; right:2.5cqi }

/* ---- device base ---- */
.dev{ position:relative; width:100%; aspect-ratio:16/10; background:var(--pp); color:var(--dk); border:1px solid var(--dk); overflow:hidden; font:500 2.4cqi/1 var(--font-mono); letter-spacing:.04em; display:flex; flex-direction:column; container-type:inline-size }
/* the device is printed on paper in both themes, so its tints must be mixed against paper too */
[data-theme="dark"] .dev{ --pl-soft:color-mix(in srgb, var(--pl) 14%, var(--pp)) }
.dev b,.dev i,.dev em{ display:block; font-style:normal; font-weight:400 }
.dev b{ height:1.6cqi; background:var(--dk); opacity:.85 }
.dev__bar{ display:flex; align-items:center; gap:1.4cqi; height:6cqi; padding:0 2cqi; border-bottom:1px solid var(--dk); flex:none }
.dev__bar > i{ width:1.4cqi; height:1.4cqi; background:var(--dk) }
.dev__url{ flex:1; height:3cqi; margin-left:2cqi; background:var(--pp2); display:flex; align-items:center; padding:0 1.2cqi }
.dev__url b{ height:1cqi; opacity:.5 }
.dev__title{ margin-left:2cqi; font-size:2.2cqi; opacity:.7 }
.dev__body{ flex:1; display:flex; flex-direction:column; padding:3cqi; gap:3cqi; min-height:0 }
.dev__nav{ display:flex; align-items:center; gap:2cqi; height:4cqi }
.dev__logo{ width:6cqi; height:2.2cqi }
.dev__links{ display:flex; gap:1.6cqi; margin-left:auto } .dev__links i{ width:5cqi; height:1.2cqi; background:var(--dk); opacity:.5 }
.dev__btn,.dev__cta{ width:12cqi; height:4.2cqi; background:var(--pl); flex:none }
.dev .dev__cta{ margin-top:1cqi; color:var(--pl-fg); font-size:2cqi; display:flex; align-items:center; justify-content:center; line-height:1.1; letter-spacing:.06em }
.dev__hero{ display:flex; flex-direction:column; gap:1.6cqi; padding:2cqi 0 }
.dev__h{ height:4.2cqi } .dev__h--2{ height:4.2cqi; opacity:.65 } .dev__p{ height:1.3cqi; opacity:.4 }
.dev__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:2cqi; margin-top:auto }
.dev__card{ display:flex; flex-direction:column; gap:1.2cqi; padding:1.6cqi; border:1px solid var(--dk) }
.dev__card b{ height:1.2cqi; opacity:.6 }
.dev__img{ aspect-ratio:16/9; background:var(--pl-soft); background-image:var(--halftone); color:var(--pl); background-color:var(--pl-soft) }
/* phone */
.dev--phone{ aspect-ratio:9/19; border:1.5cqi solid var(--dk); border-radius:12% / 5.7%; background:var(--dk); padding:0; font-size:3.2cqi }
.dev__island{ position:absolute; top:2cqi; left:50%; width:26cqi; height:6cqi; transform:translateX(-50%); background:var(--dk); border-radius:999px; z-index:3 }
.dev__screen{ position:relative; flex:1; margin:0; background:var(--pp); border-radius:10% / 4.7%; overflow:hidden; display:flex; flex-direction:column }
.dev__status{ display:flex; justify-content:space-between; padding:3cqi 6cqi 0; font-size:3cqi; height:11cqi; flex:none; z-index:2 }
.dev__notif{ position:absolute; left:4cqi; right:4cqi; top:12cqi; display:flex; gap:2.5cqi; align-items:center; padding:3cqi; background:var(--pp2); border:1px solid var(--dk); z-index:2; transform:translateY(-160%); clip-path:inset(0 0 100% 0) }
.dev__notif > i{ width:7cqi; height:7cqi; background:var(--pl); flex:none } .dev__notif span{ flex:1; display:flex; flex-direction:column; gap:1.6cqi } .dev__notif b{ height:1.8cqi }
.dev__scroll{ flex:1; position:relative; overflow:hidden }
.dev__view{ display:flex; flex-direction:column; gap:3.5cqi; padding:4cqi 6cqi; }
.dev__view + .dev__view{ border-top:1px solid var(--dk) }
.dev--phone .dev__h{ height:5cqi }
.dev__kpi{ display:flex; flex-direction:column; gap:1.2cqi; padding:4cqi; border:1px solid var(--dk) }
.dev__num{ font:700 9cqi/1 var(--font-display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--dk) }
.dev__lbl{ font-size:2.6cqi; text-transform:uppercase; letter-spacing:.1em; opacity:.6 }
.dev__row{ display:flex; align-items:center; gap:3cqi } .dev__row span{ flex:1; display:flex; flex-direction:column; gap:1.5cqi } .dev__row b{ height:2cqi; opacity:.6 } .dev__row .dev__ico{ width:8cqi; height:8cqi; background:var(--pl-soft); flex:none; border:1px solid var(--dk) } .dev__pill{ width:9cqi; height:3.4cqi; border:1px solid var(--dk) }
.dev--phone .dev__cta{ width:100%; height:11cqi; font-size:3.2cqi }
.dev__mini-chart{ display:flex; align-items:flex-end; gap:1.6cqi; height:22cqi } .dev__mini-chart i{ flex:1; height:var(--h); background:var(--dk); opacity:.7 } .dev__mini-chart i:nth-child(7){ background:var(--pl); opacity:1 }
/* dashboard + app */
.dev--dash,.dev--app{ flex-direction:row; aspect-ratio:16/10 }
.dev__side{ width:20cqi; background:var(--dk); padding:3cqi 2.4cqi; display:flex; flex-direction:column; gap:3cqi; flex:none }
.dev__side .dev__logo{ width:5cqi; height:5cqi; background:var(--pp); margin-bottom:2cqi }
.dev__side i{ height:1.6cqi; background:var(--pp); opacity:.35 } .dev__side i.is-active{ opacity:1; box-shadow:-2.4cqi 0 0 0 var(--pl) }
.dev__main{ flex:1; padding:3cqi; display:flex; flex-direction:column; gap:2.4cqi; min-width:0 }
.dev__top{ display:flex; align-items:center; justify-content:space-between; height:4cqi }
.dev__chip{ font-size:2cqi; padding:.8cqi 1.4cqi; border:1px solid var(--dk); text-transform:uppercase; letter-spacing:.1em }
.dev__avatar{ width:4cqi; height:4cqi; background:var(--pl) }
.dev__tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--dk); border:1px solid var(--dk) }
.dev__tiles--2{ grid-template-columns:repeat(2,1fr) }
.dev__tile{ background:var(--pp); padding:2cqi; display:flex; flex-direction:column; gap:1.2cqi; min-width:0 }
.dev__tile .dev__num{ font-size:4.4cqi; overflow-wrap:anywhere; letter-spacing:-.02em }  /* values anchor on their first line; the label box above is a fixed two lines so all four line up */ .dev__tile .dev__lbl{ font-size:1.75cqi; letter-spacing:.06em; overflow-wrap:anywhere; min-block-size:2lh }
.dev__tiles--2 .dev__tile .dev__num{ font-size:5.4cqi }
.dev__spark{ width:100%; height:5cqi; fill:none; stroke:var(--dk); stroke-width:1.5; vector-effect:non-scaling-stroke; margin-top:auto }
.dev__spark polyline{ stroke-dasharray:400; stroke-dashoffset:400; vector-effect:non-scaling-stroke }
.dev__chart{ display:flex; align-items:flex-end; gap:1cqi; height:16cqi; border-bottom:1px solid var(--dk); padding-bottom:0 }
.dev__chart i{ flex:1; height:var(--h); background:var(--dk); opacity:.6; transform:scaleY(0); transform-origin:bottom }
.dev__chart i.is-peak{ background:var(--pl); opacity:1 }
.dev__table{ position:relative; display:flex; flex-direction:column; border-top:1px solid var(--dk) }
.dev__tr{ display:grid; grid-template-columns:2.4cqi 1fr .6fr auto; align-items:center; gap:2cqi; height:5cqi; border-bottom:1px solid var(--dk); padding:0 1cqi }
.dev__tr b{ height:1.4cqi; opacity:.6 } .dev__cell{ font-size:2.2cqi; font-variant-numeric:tabular-nums }
.dev__st{ width:2cqi; height:2cqi; background:var(--block-mint) } .dev__st--sun{ background:var(--block-sun) } .dev__st--signal{ background:var(--signal) }
.dev__cursor{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--signal); opacity:0 }
.dev__tr.is-move{ background:var(--pl-soft) }
/* terminal */
.dev--term{ background:var(--dk); color:var(--pp); border-color:var(--dk) }
.dev--term .dev__bar{ border-color:rgba(246,244,238,.3) } .dev--term .dev__bar > i{ background:var(--pp); opacity:.7 } .dev--term .dev__title{ opacity:.6 }
.dev__lines{ padding:3cqi; display:flex; flex-direction:column; gap:1.8cqi; font-size:2.6cqi; letter-spacing:.02em; text-transform:none }
.dev__line{ white-space:nowrap; overflow:hidden; opacity:.9 } .dev__line.is-ok{ color:var(--block-mint) }
/* graph */
.dev--graph{ background:var(--pp) }
.dev__dots{ position:absolute; inset:0; background-image:radial-gradient(circle, var(--dk) .6px, transparent .9px); background-size:8.33% 12.5%; opacity:.35 }
.dev__svg{ position:absolute; inset:8% 6% 22%; width:88%; height:70%; overflow:visible }
.dev__area{ fill:var(--pl-soft); stroke:none; opacity:.9 }
.dev__path{ fill:none; stroke:var(--dk); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:900; stroke-dashoffset:900 }
.dev__edge{ stroke:var(--dk); stroke-width:.8; vector-effect:non-scaling-stroke; opacity:.6 } .dev__edge.is-hot{ stroke:var(--pl); stroke-width:1.6; opacity:1 }
.dev__node{ fill:var(--dk) } .dev__pulse{ fill:var(--pl); opacity:0 }
.dev__legend{ position:absolute; left:2cqi; bottom:2cqi; display:flex; flex-direction:column; gap:.8cqi; background:var(--pp); padding:1cqi 1.6cqi }
.dev__legend .dev__num{ font-size:7cqi } .dev__legend .dev__lbl{ font-size:2.2cqi }
/* shop */
.dev__shop{ display:grid; grid-template-columns:1fr 30%; gap:2cqi; flex:1; min-height:0 }
.dev__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2cqi }
.dev__prod{ display:flex; flex-direction:column; gap:1.2cqi } .dev__prod b{ height:1.2cqi; opacity:.6 } .dev__prod .dev__img{ aspect-ratio:1; }
.dev__img.is-accent{ background-color:var(--pl); color:var(--pl-deep) }
.dev__price{ font-size:2.2cqi; font-variant-numeric:tabular-nums }
.dev__drawer{ background:var(--pp2); padding:2cqi; display:flex; flex-direction:column; gap:1.8cqi; border-left:1px solid var(--dk) }
.dev__item{ display:flex; gap:1.4cqi; align-items:center } .dev__item > i{ width:5cqi; height:5cqi; background:var(--pl-soft); border:1px solid var(--dk); flex:none } .dev__item span{ flex:1; display:flex; flex-direction:column; gap:1cqi } .dev__item b{ height:1cqi; opacity:.6 }
.dev__total{ margin-top:auto; font-size:2.6cqi; font-weight:500; font-variant-numeric:tabular-nums }
.dev--shop .dev__cta{ width:100%; height:5cqi; font-size:2cqi }
.dev__cart{ position:relative; width:5cqi; height:4cqi; border:1px solid var(--dk); margin-left:1cqi }
b.dev__count{ position:absolute; top:-1.4cqi; right:-1.4cqi; width:3cqi; height:3cqi; background:var(--pl); color:var(--pl-fg); font-size:2cqi; display:flex; align-items:center; justify-content:center; opacity:1 }

/* ---- live animations (only once .is-inview; CSS only) ---- */
.visual.is-inview .dev__cta--press{ animation:press .3s steps(2) 1.2s 1 }
@keyframes press{ 50%{ transform:scale(.97) } }
.visual.is-inview .dev__notif{ animation:notif .5s var(--ease-inout) 1s forwards }
@keyframes notif{ to{ transform:none; clip-path:inset(0) } }
.visual.is-inview .dev__scroll .dev__view:first-child{ animation:phone-scroll 6s var(--ease-inout) 2s infinite alternate }
@keyframes phone-scroll{ to{ transform:translateY(-40%) } }
.visual.is-inview .dev__spark polyline{ animation:draw 1.2s var(--ease-out) .3s forwards }
.visual.is-inview .dev__path{ animation:draw 1.4s var(--ease-out) .2s forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.visual.is-inview .dev__chart i{ animation:grow .5s var(--ease-out) forwards; animation-delay:calc(.3s + var(--n, 0) * 40ms) }
.visual.is-inview .dev__chart i:nth-child(n){ --n:0 } .visual.is-inview .dev__chart i:nth-child(2n){ --n:1 } .visual.is-inview .dev__chart i:nth-child(3n){ --n:2 } .visual.is-inview .dev__chart i:nth-child(4n){ --n:3 } .visual.is-inview .dev__chart i:nth-child(5n){ --n:4 } .visual.is-inview .dev__chart i:nth-child(6n){ --n:5 }
@keyframes grow{ to{ transform:scaleY(1) } }
.visual.is-inview .dev__cursor{ animation:rowcursor 4s steps(5,end) 1s 2 }
@keyframes rowcursor{ from{ opacity:1; top:0 } to{ opacity:1; top:100% } }
.visual.is-inview .dev__line{ clip-path:inset(0 100% 0 0); animation:type .6s steps(24) forwards; animation-delay:calc(.2s + var(--i) * .45s) }
@keyframes type{ to{ clip-path:inset(0 0 0 0) } }
.visual.is-inview .dev__pulse{ animation:travel 1.6s var(--ease-inout) 1.6s 1 forwards }
@keyframes travel{ 0%{ opacity:1 } 100%{ opacity:0; transform:translate(calc(var(--dx) * 1px),calc(var(--dy) * 1px)) } }
.visual.is-inview .dev__count{ animation:count 1.2s steps(1) 1.4s 1 forwards }
@keyframes count{ 50%,100%{ background:var(--dk); color:var(--pp) } }
.visual.is-inview .dev__tr.is-move{ animation:rowmove 2s steps(4) 1.2s 1 }
@keyframes rowmove{ 50%{ transform:translateY(100%) } }
.visual:not(.is-inview) .dev__chart i{ transform:scaleY(1) }
.visual:not(.is-inview) .dev__line{ clip-path:none }

/* ---- blueprint mode (same DOM, CSS re-skin) ---- */
[data-theme="dark"] .visual[data-mode="blueprint"] .visual__plate,[data-theme="dark"] .card--case:hover .visual .visual__plate{ --dk:var(--pp) }
.visual[data-mode="blueprint"] .visual__plate,.card--case:hover .visual .visual__plate{ background-image:repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 16px) }
.visual[data-mode="blueprint"] .dev,.card--case:hover .visual .dev{ background:transparent; border-color:var(--dk); color:var(--dk) }
.visual[data-mode="blueprint"] .dev b,.visual[data-mode="blueprint"] .dev em,.visual[data-mode="blueprint"] .dev__side,.visual[data-mode="blueprint"] .dev__side i,.visual[data-mode="blueprint"] .dev__img,.visual[data-mode="blueprint"] .dev__st,.visual[data-mode="blueprint"] .dev__avatar,.visual[data-mode="blueprint"] .dev__row .dev__ico,.visual[data-mode="blueprint"] .dev__chart i,.visual[data-mode="blueprint"] .dev__mini-chart i,.visual[data-mode="blueprint"] .dev__island,
.card--case:hover .visual .dev b,.card--case:hover .visual .dev em,.card--case:hover .visual .dev__side,.card--case:hover .visual .dev__side i,.card--case:hover .visual .dev__img,.card--case:hover .visual .dev__st,.card--case:hover .visual .dev__avatar,.card--case:hover .visual .dev__row .dev__ico,.card--case:hover .visual .dev__chart i,.card--case:hover .visual .dev__mini-chart i{ background:transparent !important; background-image:none !important; outline:1px solid var(--dk); outline-offset:-1px; opacity:1; box-shadow:none; color:var(--dk) }
.visual[data-mode="blueprint"] .dev__img,.card--case:hover .visual .dev__img{ outline-style:dashed }
.visual[data-mode="blueprint"] .dev--term,.card--case:hover .visual .dev--term{ background:transparent; color:var(--dk) }
.visual[data-mode="blueprint"] .dev__screen,.card--case:hover .visual .dev__screen{ background:transparent; outline:1px solid var(--dk) }
.visual[data-mode="blueprint"] .dev--phone,.card--case:hover .visual .dev--phone{ background:transparent; border-color:var(--dk) }
.visual[data-mode="blueprint"] .dev__area,.card--case:hover .visual .dev__area{ fill:transparent; stroke:var(--dk); stroke-dasharray:3 3 }
.visual[data-mode="blueprint"] .dev__dots,.card--case:hover .visual .dev__dots{ opacity:0 }
.visual[data-mode="blueprint"] .visual__annot,.card--case:hover .visual .visual__annot{ opacity:.8 }
.visual[data-mode="blueprint"] .dev__side .dev__logo,.card--case:hover .visual .dev__side .dev__logo{ background:transparent; outline:1px solid var(--dk) }
.card--case .visual__plate{ transition:background-color var(--d-m) var(--ease-inout) }
.card--case .visual .dev,.card--case .visual .dev *{ transition:background-color .36s var(--ease-inout), outline-color .36s var(--ease-inout) }

@media (prefers-reduced-motion:reduce){
  .visual .dev__notif{ transform:none; clip-path:none } .visual .dev__spark polyline,.visual .dev__path{ stroke-dashoffset:0 } .visual .dev__chart i{ transform:none } .visual .dev__line{ clip-path:none } .visual .dev__scroll .dev__view:first-child{ animation:none }
}

@media (max-width:1023px){ .visual.visual--phone[data-size="hero"] .visual__layer--mid{ width:30%; left:5%; top:6% } .visual.visual--phone[data-size="hero"] .visual__layer--back{ width:56%; top:6% } .visual.visual--phone[data-size="hero"] .visual__layer--front{ width:34%; left:5%; bottom:5% } .visual[data-size="hero"] .visual__layer--front{ width:22% } }

.dev__lbl{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.25 }
.dev__tile .dev__lbl{ font-size:1.75cqi }