/* Option E pages wearing Option A's colours and type */
:root{--bg:var(--paper);--bg2:var(--surface);--panel:color-mix(in srgb,var(--surface) 70%,var(--paper));--dim:var(--muted);
  --faint:color-mix(in srgb,var(--ink) 40%,transparent);--line2:color-mix(in srgb,var(--ink) 20%,transparent);
  --mint:var(--select);--lilac:var(--accent);--peach:var(--cursor);
  --foil:linear-gradient(100deg,var(--accent),var(--select),var(--cursor));
  --display:var(--f-display);--body:var(--f-body);--mono:var(--f-mono);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
body{background:var(--paper)!important;color:var(--ink)}
#fluid,.noise,.pt{display:none!important}
.phead{padding-top:clamp(56px,8vw,96px)}
.chero{padding-top:clamp(56px,8vw,96px)!important}

/* ---- Option A's component system on Option E pages ---- */
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.03em}
.phead h1,.chero h1{letter-spacing:-.04em;font-weight:600}
.mono{letter-spacing:.04em}
.foil{background:none!important;color:var(--select)!important;-webkit-text-fill-color:currentColor;animation:none!important}
.btn{border-radius:999px;padding:14px 22px;font-weight:600;font-size:.98rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:transform .35s var(--ease-hover),background .3s,color .3s,border-color .3s}
.btn:hover{transform:none;border-color:var(--line);background:var(--surface)}
.btn.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.solid:hover{background:var(--select);border-color:var(--select);color:#fff}
.chip{font-family:var(--f-body);font-size:.78rem;letter-spacing:0;text-transform:none;padding:3px 10px;border-radius:999px;border-color:var(--line);color:var(--ink)}
.chip.lock{color:var(--cursor);border-color:color-mix(in srgb,var(--cursor) 40%,transparent)}
.row2 p,.cs-h p,.sidegrid p,.scr-t p{color:var(--muted)!important}
.glance>div{background:var(--surface)!important;border-color:var(--line)!important;border-radius:18px!important;backdrop-filter:none!important}
.glance .mono,.cs-h .mono{color:var(--select)}
.steps li{background:var(--surface)!important;border-color:var(--line)!important;border-radius:18px!important}
.lockbox{background:var(--surface)!important;border-color:var(--line)!important;border-radius:24px!important}
.lockbox .ic{background:color-mix(in srgb,var(--select) 14%,transparent)!important;color:var(--select)!important}
.lockbox input,.fld input,.fld textarea{background:var(--paper)!important;border-color:var(--line)!important;border-radius:12px}
form.brief{background:var(--surface)!important;border-color:var(--line)!important;border-radius:24px!important;backdrop-filter:none!important}
.opts label{border-radius:999px!important;border-color:var(--line)!important;background:var(--surface)}
.opts input:checked+label{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
.cover,.scr-m{border-radius:24px!important;border-color:var(--line)!important}
.pf{border-color:var(--line)!important;box-shadow:var(--shadow)!important}
.ba,.ill img,.shot img{border-radius:18px!important}
.out{border-color:var(--line)!important;border-radius:18px!important}
::selection{background:color-mix(in srgb,var(--select) 30%,transparent)}

/* ---------- case-study images rebuilt as live code ---------- */
.shot.live{background:none!important}
.lv{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,36px);color:var(--ink);font-family:var(--f-body);text-align:left;overflow:hidden}
.lv-tag{position:absolute;top:14px;right:14px;font:500 .6rem var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--select);background:color-mix(in srgb,var(--select) 10%,transparent);border:1px solid color-mix(in srgb,var(--select) 35%,transparent);padding:3px 8px;border-radius:99px}
.lv-h{font:600 1.05rem var(--f-display);letter-spacing:-.01em;color:var(--select);margin:0 0 14px;display:flex;gap:10px;align-items:baseline}
.lv-h small{font:400 .72rem var(--f-body);color:var(--muted)}
.lv-scroll{overflow-x:auto}
.lv code{font:500 .68rem var(--f-mono);color:var(--muted)}
/* style guide */
.lv-sg{--lv-h1:clamp(1.6rem,2.6vw,2.3rem);--lv-h2:clamp(1.3rem,2vw,1.75rem)}
.lv-sg-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-bottom:28px}
.lv-type{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.88rem;min-width:420px}
.lv-type th{text-align:left;font:500 .66rem var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 12px}
.lv-type td{background:color-mix(in srgb,var(--ink) 4%,transparent);padding:14px 12px;color:var(--muted)}
.lv-type td:first-child{color:var(--ink);border-radius:10px 0 0 10px}.lv-type td:last-child{border-radius:0 10px 10px 0}
.lv-type tr{transition:transform .3s var(--ease-out)}.lv-type tbody tr:hover{transform:translateX(4px)}
.lv-space{display:flex;align-items:flex-end;gap:8px;height:84px;margin-bottom:22px}
.lv-space i{width:calc(var(--s) * 1.1);height:calc(var(--s) * 1.1);min-width:6px;min-height:6px;border-radius:min(10px,calc(var(--s)/3));background:color-mix(in srgb,var(--select) 18%,transparent);border:1px dashed color-mix(in srgb,var(--select) 60%,transparent);position:relative;animation:lv-pop .6s var(--ease-out) both;animation-delay:calc(var(--s) * 8ms)}
.lv-space b{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font:500 .55rem var(--f-mono);color:var(--muted)}
@keyframes lv-pop{from{transform:scale(.3);opacity:0}}
.lv-grid{border:1px solid var(--line);border-radius:12px;padding:12px}
.lv-grid-h{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:8px}.lv-grid-h span+span{color:var(--muted)}
.lv-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;height:72px;padding-inline:6px}
.lv-cols i{background:linear-gradient(color-mix(in srgb,var(--select) 30%,transparent),transparent);border-radius:3px;transform-origin:top;animation:lv-col 2.6s var(--ease-io) infinite alternate}
.lv-cols i:nth-child(odd){animation-delay:.15s}
@keyframes lv-col{to{transform:scaleY(.55)}}
.lv-grid dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin:12px 0 0;font-size:.78rem}
.lv-grid dl div{display:flex;gap:6px}.lv-grid dt{color:var(--muted)}.lv-grid dd{margin:0;color:var(--select);font-weight:600}
.lv-sws{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.lv-sws.grad{margin-top:12px}
.lv-sw{all:unset;cursor:pointer;display:grid;gap:3px;border:1px solid var(--line);border-radius:14px;padding:8px 8px 10px;background:var(--paper);transition:transform .3s var(--ease-out),box-shadow .3s}
.lv-sw span{height:64px;border-radius:9px;background:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 10%,transparent)}
.lv-sw b{font-size:.8rem;font-weight:600;margin-top:4px}
.lv-sw:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.lv-sw:focus-visible{outline:2px solid var(--select);outline-offset:2px}
.lv-sw.copied code{color:var(--select)}
/* sitemap */
.lv-map{display:grid;gap:0}
.lv-node{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--ink);color:var(--paper);border-radius:999px;padding:9px 16px;font-size:.85rem;font-weight:500;line-height:1.2;position:relative;z-index:1}
.lv-node.sm{font-size:.76rem;padding:6px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--line);transition:transform .3s var(--ease-out),border-color .3s}
.lv-node.sm:hover{transform:translateY(-2px);border-color:var(--select)}
.lv-node.root{font:600 1rem var(--f-display);padding:12px 26px;background:var(--select);color:#fff;justify-self:start}
.lv-map-l1{list-style:none;margin:0 0 0 22px;padding:10px 0 0;display:grid;gap:14px;border-left:1.5px solid var(--line2,var(--line))}
.lv-map-l1>li{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:10px 14px;align-items:start;position:relative;padding-left:20px}
.lv-map-l1>li::before{content:"";position:absolute;left:0;top:19px;width:20px;border-top:1.5px solid var(--line2,var(--line))}
.lv-map-l1>li>.lv-node{justify-self:start;min-width:150px}
.lv-map-l1 ul{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:1100px){.lv-map-l1>li{grid-template-columns:1fr}}
/* comparison */
.lv-cmp{padding-top:48px}
.lv-cmp table{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0;min-width:520px;font-size:.92rem}
.lv-cmp th,.lv-cmp td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line)}
.lv-cmp thead th{font:600 .9rem var(--f-display);padding-top:4px}
.lv-cmp tbody th,.lv-cmp tfoot th{text-align:left;font-weight:500}
.lv-cmp thead th:first-child{width:28%}
.lv-cmp tbody tr{transition:background .25s}.lv-cmp tbody tr:hover{background:color-mix(in srgb,var(--select) 6%,transparent)}
.lv-cmp svg{width:22px;height:22px;display:inline-block;vertical-align:middle}
.lv-cmp td.y{color:#1DB86A}.lv-cmp td.n{color:color-mix(in srgb,var(--cursor) 75%,var(--muted))}
.lv-cmp .ours{background:color-mix(in srgb,var(--select) 9%,transparent);color:var(--select)}
.lv-cmp thead .ours{border-radius:12px 12px 0 0;color:var(--select)}
.lv-cmp tfoot td{font-size:.8rem;border-bottom:0}.lv-cmp tfoot .ours{border-radius:0 0 12px 12px}
.lv-cmp tfoot i{display:block;height:4px;border-radius:9px;margin:6px auto 0;width:70%;background:linear-gradient(90deg,var(--select) calc(var(--p)*100%),var(--line) 0)}
/* palette + type */
.lv-pal .lv-sws{margin-bottom:26px}
.lv-pops{display:grid;gap:10px}
.lv-pop{font-family:Poppins,var(--f-body);display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent);line-height:1.15}
/* VAN flow */
.lv-flow-tg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--paper);margin-bottom:22px}
.lv-flow-tg button{all:unset;cursor:pointer;font-size:.8rem;font-weight:600;padding:7px 14px;border-radius:999px;color:var(--muted)}
.lv-flow-tg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lv-flow-steps{list-style:none;margin:0;padding:0;display:grid;justify-items:center}
.lv-flow-steps>.st{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;position:relative;padding-top:30px;width:100%}
.lv-flow-steps>.st:first-child{padding-top:0}
.lv-flow-steps>.st:not(:first-child)::before{content:"";position:absolute;top:2px;left:50%;height:22px;border-left:2px solid var(--select)}
.lv-flow-steps>.st:not(:first-child)::after{content:"";position:absolute;top:20px;left:calc(50% - 5px);border:5px solid transparent;border-top-color:var(--select)}
.lv-flow .lv-node{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;transition:all .4s var(--ease-out)}
.lv-flow .lv-node.root{background:var(--select);color:#fff;border-color:var(--select);border-radius:999px}
.lv-flow .lv-node.ready{border-color:var(--select);box-shadow:0 0 0 4px color-mix(in srgb,var(--select) 15%,transparent)}
.lv-flow .lv-node small,.lv-stepper small{display:block;font:500 .58rem var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.lv-flow[data-path="new"] .p-new,.lv-flow[data-path="back"] .p-back{border-color:var(--select);color:var(--select);font-weight:600}
.lv-flow[data-path="new"] .p-back,.lv-flow[data-path="back"] .p-new{opacity:.4}
.lv-flow .s3{flex-direction:column;align-items:center;transition:opacity .4s,filter .4s}
.lv-flow[data-path="back"] .s3{opacity:.25;filter:grayscale(1)}
.lv-stepper{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0;counter-reset:s}
.lv-stepper li{font-size:.82rem;font-weight:500;padding:9px 14px;border:1.5px solid var(--line);background:var(--paper);text-align:center;position:relative}
.lv-stepper li:first-child{border-radius:12px 0 0 12px}.lv-stepper li:last-child{border-radius:0 12px 12px 0}
.lv-stepper li+li{border-left:0}
.lv-flow[data-path="new"] .lv-stepper li{animation:lv-step 4.5s var(--ease-io) infinite}
.lv-flow[data-path="new"] .lv-stepper li:nth-child(2){animation-delay:.8s}.lv-flow[data-path="new"] .lv-stepper li:nth-child(3){animation-delay:1.6s}
@keyframes lv-step{0%,10%{background:var(--paper)}20%,60%{background:color-mix(in srgb,var(--select) 14%,var(--paper))}75%,100%{background:var(--paper)}}
.lv-acts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100%}
.lv-act{display:grid;gap:8px;align-content:start}
.lv-act .lv-node{width:100%;font-size:.8rem;min-height:52px}
.lv-act ul{list-style:none;margin:0;padding:0 0 0 12px;display:grid;gap:5px;border-left:2px solid color-mix(in srgb,var(--select) 40%,transparent);margin-left:12px}
.lv-act ul li{font-size:.74rem;color:var(--muted);padding:5px 9px;border-radius:8px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.lv-act:hover .lv-node{border-color:var(--select)}
@media (max-width:900px){.lv-sg-top{grid-template-columns:minmax(0,1fr)}.lv-acts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.lv-sw span{height:44px}.lv-acts{grid-template-columns:repeat(2,minmax(0,1fr))}.lv-tag{position:static;display:inline-block;margin-bottom:12px}}
html.still .lv *{animation:none!important}