/* George Innasi, portfolio site
   Editorial layout on a faint dot grid. Italic serif paired with bold sans.
   Emerald + gold on warm neutrals. Deep emerald-charcoal dark mode. */

/* ---------- palette: Emerald + Yellow ----------
   One emerald accent for primary actions, links and section marks; one warm
   gold accent for category labels, tags and pills. Deep warm neutrals carry
   the rest. The four legacy hue tokens all resolve to emerald, so existing
   [data-accent] and [data-hue] hooks keep working while the site reads as a
   single family. Every pairing checked at AA in both themes. */

:root{
  /* emerald, light. All four legacy hues resolve here. */
  --emerald:#059669; --emerald-ink:#047857; --emerald-soft:#d1fae5; --emerald-tint:#ecfdf5;
  --h-blue:var(--emerald);   --h-blue-ink:var(--emerald-ink);   --h-blue-soft:var(--emerald-soft);   --h-blue-tint:var(--emerald-tint);
  --h-violet:var(--emerald); --h-violet-ink:var(--emerald-ink); --h-violet-soft:var(--emerald-soft); --h-violet-tint:var(--emerald-tint);
  --h-green:var(--emerald);  --h-green-ink:var(--emerald-ink);  --h-green-soft:var(--emerald-soft);  --h-green-tint:var(--emerald-tint);
  --h-wine:var(--emerald);   --h-wine-ink:var(--emerald-ink);   --h-wine-soft:var(--emerald-soft);   --h-wine-tint:var(--emerald-tint);

  /* bold headline words: deep green (light), mint (dark) */
  --bold-green:var(--accent);
  --cta-bg:#064e3b; --cta-ink:#ecfdf5;
  /* deep green for icons, labels and rules on plain backgrounds */
  --deep:#064e3b;
  --deep-soft:color-mix(in srgb,var(--deep) 14%,transparent);
  --deep-line:color-mix(in srgb,var(--deep) 30%,transparent);
  --panel-green:#064e3b; --panel-green-line:#065f46;

  /* gold, light */
  --gold:#d97706; --gold-ink:#b45309; --gold-soft:#fef3c7;

  --paper:#fdfcfb; --surface:#ffffff;
  --ink:#111827; --muted:#4b5563; --line:#e5e7eb;
  --on-accent:#ffffff;
  --chip:#f3f4f6; --chip-line:#e5e7eb;
  --dot:rgba(17,24,39,.07);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1080px; --narrow:760px; --radius:14px;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --emerald:#10b981; --emerald-ink:#34d399; --emerald-soft:rgba(16,185,129,.16); --emerald-tint:#16303f;
  --gold:#facc15; --gold-ink:#facc15; --gold-soft:rgba(250,204,21,.16);
  --bold-green:var(--accent);
  --cta-bg:#6ee7b7; --cta-ink:#06281c;
  --deep:#6ee7b7;
  --panel-green:color-mix(in srgb,var(--accent) 16%,var(--surface)); --panel-green-line:color-mix(in srgb,var(--accent) 45%,transparent);

  --paper:#101f33; --surface:#1a2d43;
  --ink:#f4f7fa; --muted:#a8bace; --line:#2a4058;
  --on-accent:#06281c;
  --chip:#1f3349; --chip-line:#334b64;
  --dot:transparent;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --emerald:#10b981; --emerald-ink:#34d399; --emerald-soft:rgba(16,185,129,.16); --emerald-tint:#16303f;
  --gold:#facc15; --gold-ink:#facc15; --gold-soft:rgba(250,204,21,.16);
  --bold-green:var(--accent);
  --cta-bg:#6ee7b7; --cta-ink:#06281c;
  --deep:#6ee7b7;
  --panel-green:color-mix(in srgb,var(--accent) 16%,var(--surface)); --panel-green-line:color-mix(in srgb,var(--accent) 45%,transparent);

  --paper:#101f33; --surface:#1a2d43;
  --ink:#f4f7fa; --muted:#a8bace; --line:#2a4058;
  --on-accent:#06281c;
  --chip:#1f3349; --chip-line:#334b64;
  --dot:transparent;
  color-scheme:dark;
}

/* every page and card resolves to the single emerald accent */
:root,[data-accent="blue"],[data-hue="blue"],
[data-accent="violet"],[data-hue="violet"],
[data-accent="green"],[data-hue="green"],
[data-accent="wine"],[data-hue="wine"]{
  --accent:var(--emerald); --accent-ink:var(--emerald-ink); --accent-soft:var(--emerald-soft); --surface-2:var(--emerald-tint);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-ink)}
a:hover{color:var(--ink)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--surface);border:1px solid var(--line);padding:10px 14px;border-radius:8px}

/* ---------- shell ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:max(20px,env(safe-area-inset-left,0px))}
.wrap-narrow{max-width:var(--narrow)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:16px; padding:12px max(20px,env(safe-area-inset-left,0px))}
.brand{display:flex; align-items:baseline; gap:7px; font-weight:800; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.brand i{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--muted); font-size:.88rem}
.nav-links{margin-left:auto; display:flex; gap:2px; align-items:center; flex-wrap:wrap}
.nav-links a{color:var(--muted); font-weight:600; font-size:.88rem; padding:7px 11px; border-radius:8px; text-decoration:none}
.nav-links a:hover{color:var(--ink); background:var(--surface-2)}
.nav-links a[aria-current="page"]{color:var(--accent-ink); background:var(--accent-soft)}
.theme-btn{background:none; border:1px solid var(--line); color:var(--muted); width:34px; height:34px; border-radius:9px; cursor:pointer; display:grid; place-items:center; flex:none; padding:0}
.theme-btn:hover{color:var(--ink); border-color:var(--ink)}
.theme-btn svg{grid-area:1/1; display:none}
.theme-btn .ico-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .ico-moon{display:none}
  :root:not([data-theme="light"]) .theme-btn .ico-sun{display:block}
}
:root[data-theme="dark"] .theme-btn .ico-moon{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:block}
:root[data-theme="light"] .theme-btn .ico-moon{display:block}
:root[data-theme="light"] .theme-btn .ico-sun{display:none}
@media (max-width:560px){
  .nav-in{flex-wrap:wrap; gap:8px}
  .nav-links{width:100%; margin-left:0; order:3}
  .nav-links a{padding:6px 9px; font-size:.84rem}
  .theme-btn{margin-left:auto}
}

/* ---------- type helpers ---------- */
.eyebrow{font-size:.9rem; font-weight:700; color:var(--gold-ink)}
.sec-title{font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.5rem; letter-spacing:0; color:var(--ink); margin-bottom:16px}
.serif{font-family:var(--serif); font-style:italic; font-weight:400}
.lead{font-size:1.1rem; color:var(--muted)}
.muted{color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding-block:58px 40px; background-image:radial-gradient(var(--dot) 1.3px,transparent 1.3px); background-size:22px 22px; background-position:-8px -8px}
.hero h1{font-weight:400; font-size:clamp(2.3rem,6.2vw,4rem); line-height:1.03}
.hero h1 .bold{font-family:var(--sans); font-weight:800; letter-spacing:-.03em; color:var(--bold-green)}
.hero .sub{margin-top:20px; color:var(--muted); font-size:1.08rem; max-width:52ch}
.cta-row{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; transition:filter .2s,transform .2s,background .2s,color .2s,border-color .2s; border-radius:999px; padding:11px 20px; font-weight:700; font-size:.9rem; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--cta-bg); color:var(--cta-ink)}
.btn-primary:hover{color:var(--cta-ink); filter:brightness(1.12)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg)}
.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed}

/* ---------- bands and section heads ---------- */
.band{padding-block:52px; border-top:1px solid var(--line)}
.band:first-of-type{border-top:0}
.sec-head{margin-bottom:24px}
.sec-head h2{font-size:1.7rem; font-weight:800}
.sec-head p{color:var(--muted); margin-top:7px}

/* ---------- work cards ---------- */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 22px 26px; display:flex; flex-direction:column; gap:12px; overflow:hidden;
  text-decoration:none; color:var(--ink); transition:background .3s,border-color .3s,color .3s,transform .3s,box-shadow .3s}
.card::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent)}
.card:hover{background:#064e3b; border-color:#059669; color:#f0fdf4; transform:translateY(-2px); box-shadow:0 18px 40px -16px rgba(5,150,105,.4)}
.card:hover .lede{color:#ffffff}
.card:hover .card-open{color:#6ee7b7}
.card:hover .status{background:rgba(255,255,255,.15); color:#ecfdf5}
.card:hover .chip{background:rgba(250,204,21,.18); border-color:transparent; color:#fef3c7}
.card:hover::before{background:#34d399}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.card h3{font-size:1.2rem; font-weight:800}
.card .lede{color:var(--muted); font-size:.95rem}
.card-open{margin-top:auto; font-weight:700; font-size:.85rem; color:var(--accent-ink)}
.status{font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap;
  background:var(--accent-soft); color:var(--accent-ink)}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{font-size:.74rem; font-weight:600; padding:4px 11px; border-radius:999px; border:1px solid var(--chip-line); background:var(--chip); color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:5px}
.chip svg{width:14px; height:14px; flex:none}
.chip.domain, .card .chip{background:var(--gold-soft); border-color:transparent; color:var(--gold-ink); font-weight:700}
.chip.tool{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:700}
/* icon-style tool chips: dark card with logo + name */
.chip.tool-ico{display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:600; padding:7px 14px 7px 10px; border-radius:10px; font-size:.82rem}
.chip.tool-ico svg{width:20px; height:20px; flex:none}
/* labelled chip rows: a title column, chips running left to right */
.chip-rows{display:grid; grid-template-columns:auto 1fr; gap:11px 16px; align-items:center;
  width:max-content; max-width:100%; margin-inline:auto; text-align:left}
.chip-row-lbl{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.chip-set{display:flex; flex-wrap:wrap; gap:7px}
@media (max-width:620px){
  .chip-rows{grid-template-columns:1fr; gap:6px; width:100%}
  .chip-rows > .chip-row-lbl + .chip-set{margin-bottom:6px}
}

/* ---------- case study header ---------- */
.back{display:inline-flex; gap:6px; align-items:center; color:var(--muted); font-weight:600; font-size:.86rem; text-decoration:none; margin-bottom:18px}
.back:hover{color:var(--ink)}
.proj-head{border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:30px}
.proj-head h1{font-size:clamp(1.9rem,4.4vw,2.6rem); font-weight:800; margin-bottom:10px}
.proj-head .one{color:var(--muted); font-size:1.1rem; max-width:60ch}
.proj-head .note{margin-top:14px; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:.95rem; max-width:64ch}
.proj-meta{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:space-between; margin-top:22px}
.actions{display:flex; gap:12px; flex-wrap:wrap}
[id]{scroll-margin-top:84px}
.action{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:14px 28px; font-weight:600; font-size:.95rem; border:1.5px solid var(--ink); background:transparent; color:var(--ink); text-decoration:none; transition:background .2s,border-color .2s,color .2s,transform .15s}
.action:hover{background:var(--ink); color:var(--surface); transform:translateY(-1px)}
.action.solid{background:var(--surface); color:var(--ink); border-color:var(--ink)}
.action.solid:hover{background:var(--ink); color:var(--surface)}
.action[aria-disabled="true"]{opacity:.5; cursor:not-allowed; border-style:dashed}
.action[aria-disabled="true"]:hover{border-color:var(--line); color:var(--ink); background:transparent}

/* ---------- banner ---------- */
.banner{display:flex; align-items:center; gap:12px; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); border-radius:12px; padding:14px 18px; margin-bottom:26px; font-size:.95rem; font-weight:600; color:var(--accent-ink); flex-wrap:wrap}
.banner a{color:inherit}

/* ---------- at a glance ---------- */
.glance{display:grid; gap:14px; margin-bottom:30px}
.g{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:18px 20px}
.g h4{font-size:.88rem; font-weight:800; color:var(--accent-ink); margin-bottom:6px}
.g p{font-size:.97rem}

/* ---------- accordion ---------- */
.detail-list{border:1px solid var(--deep-line); border-radius:12px; overflow:hidden; margin-bottom:30px}
.acc{border-bottom:1px solid var(--deep-line); background:var(--surface)}
.acc:last-child{border-bottom:0}
.acc summary{cursor:pointer; padding:15px 18px; font-weight:700; font-size:.96rem; color:var(--deep); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; color:var(--deep); font-weight:700; flex:none}
.acc[open] summary::after{content:"\2013"}
.acc .body{padding:0 18px 18px; color:var(--muted); font-size:.94rem; display:flex; flex-direction:column; gap:12px}
.acc .body ul,.acc .body ol{padding-left:20px; display:flex; flex-direction:column; gap:7px}
.acc .body strong{color:var(--ink)}

/* ---------- table ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th,.tbl td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
.tbl th{font-size:.84rem; font-weight:800; color:var(--accent-ink)}
.tbl td:last-child{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- document block ---------- */
.doc-block{display:flex; gap:18px; align-items:center; flex-wrap:wrap; background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent); border-radius:14px; padding:22px}
.doc-block .sheet{width:46px; height:58px; border-radius:6px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center; font-size:1.3rem; flex:none}
.doc-block .txt{flex:1; min-width:200px}
.doc-block h4{font-weight:800; margin-bottom:3px}
.doc-block p{color:var(--muted); font-size:.88rem}

/* ---------- prose ---------- */
.prose{display:flex; flex-direction:column; gap:16px; max-width:66ch}
.prose-wide{max-width:none}
.prose p{color:var(--muted)}
.prose strong{color:var(--ink)}
.prose h3{font-size:1.25rem; font-weight:800; margin-top:14px}
.prose ul{padding-left:20px; color:var(--muted); display:flex; flex-direction:column; gap:9px}

/* ---------- tool cards ---------- */
.tools{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.tool{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:9px}
.tool h3{font-size:1.06rem; font-weight:800}
.tool p{color:var(--muted); font-size:.92rem}
.tool .why{font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--muted)}
.tool .go{margin-top:auto; font-weight:700; font-size:.84rem; text-decoration:none}

/* ---------- timeline / cv ---------- */
.cv-head{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.cv-head .rule{width:40px; height:2px; background:var(--accent); flex:none}
.cv-head h3{font-family:var(--serif); font-style:normal; font-weight:600; font-size:1.45rem; letter-spacing:0}
.cv-list{display:flex; flex-direction:column}
.cv-item{display:flex; justify-content:space-between; gap:18px; padding-block:14px; border-top:1px solid var(--line)}
.cv-item:first-child{border-top:0}
.cv-item .l{display:flex; flex-direction:column; gap:3px; min-width:0}
.cv-item .l strong{font-weight:700}
.cv-item .l span{color:var(--muted); font-size:.9rem}
.cv-item .when{color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
@media (max-width:520px){.cv-item{flex-direction:column; gap:3px}.cv-item .when{text-align:left}}

/* ---------- logo marquee ---------- */
.logos{padding-block:34px; border-top:1px solid var(--line)}
.logos .lbl{font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--muted); text-align:center; margin-bottom:18px}
.marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex; gap:56px; width:max-content; animation:scrollx 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.logo-item{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.08rem; color:var(--muted); white-space:nowrap}
.logo-item span{font-family:var(--serif); font-style:italic; font-weight:400; font-size:.8rem}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- strip ---------- */
.strip{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.strip .t{max-width:60ch}
.strip h3{font-size:1.2rem; font-weight:800; margin-bottom:7px}
.strip p{color:var(--muted); font-size:.95rem}

/* ---------- dark cards (problem / objectives) ---------- */
.dark-cards{display:flex; flex-direction:column; gap:18px}
.dark-card{background:var(--ink); color:var(--paper); border:1px solid color-mix(in srgb,var(--ink) 80%,var(--muted));
  border-radius:var(--radius); padding:clamp(22px,4vw,32px) clamp(24px,4vw,34px)}
.dark-card h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.7rem); letter-spacing:-.01em; margin-top:6px; margin-bottom:10px}
.dark-card p{color:color-mix(in srgb,var(--paper) 78%,transparent); line-height:1.6; font-size:.95rem}
.dark-card-label{font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:2px}
.dark-card ul{padding-left:20px; color:color-mix(in srgb,var(--paper) 78%,transparent); display:flex; flex-direction:column; gap:10px; font-size:.95rem; line-height:1.55; margin-top:4px}
.dark-card li::marker{color:var(--accent)}
/* dark-mode inversion: swap ink and paper so cards stay contrasted */
:root[data-theme="dark"] .dark-card{background:var(--surface); border-color:var(--line)}
:root[data-theme="dark"] .dark-card h3{color:var(--ink)}
:root[data-theme="dark"] .dark-card p,
:root[data-theme="dark"] .dark-card ul{color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dark-card{background:var(--surface); border-color:var(--line)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dark-card h3{color:var(--ink)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dark-card p,
:root:not([data-theme="light"]) .dark-card ul{color:var(--muted)}}
/* bold lead-ins inside dark cards stay readable in both themes */
.dark-card strong{color:var(--paper)}
:root[data-theme="dark"] .dark-card strong{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dark-card strong{color:var(--ink)}}

/* ---------- next-project CTA ---------- */
.next-proj-band{border-top:2px solid var(--accent)}
.next-proj-label{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}
.next-proj-card{display:flex; align-items:center; justify-content:space-between; gap:28px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,4vw,38px) clamp(24px,4vw,36px); text-decoration:none; color:var(--ink);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.next-proj-card:hover{border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 16px 40px -16px color-mix(in srgb,var(--accent) 45%,transparent)}
.next-proj-text{display:flex; flex-direction:column; gap:8px; max-width:52ch}
.next-proj-text h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,2.8vw,1.9rem); letter-spacing:-.01em}
.next-proj-text p{color:var(--muted); font-size:.95rem; line-height:1.55}
.next-proj-cta{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-weight:700; font-size:.9rem; color:var(--accent-ink)}
.next-proj-visual{flex:none; width:72px; height:72px; border-radius:16px; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center}
.next-proj-icon{font-size:2rem; line-height:1}
@media (max-width:520px){
  .next-proj-card{flex-direction:column; align-items:flex-start; gap:18px}
  .next-proj-visual{width:56px; height:56px; border-radius:12px}
  .next-proj-icon{font-size:1.6rem}
}

/* ---------- contact ---------- */
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:40px 34px; text-align:center}
.contact-card h2{font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.9rem; letter-spacing:0; margin-bottom:10px}
.contact-card p{color:var(--muted); max-width:46ch; margin:0 auto}
.contact-card .addr{margin-top:18px; font-weight:700; font-size:1.05rem}
.contact-card .addr a{text-decoration:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); margin-top:10px; padding-block:28px}
.foot-in{max-width:var(--maxw); margin:0 auto; padding-inline:max(20px,env(safe-area-inset-left,0px)); display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; color:var(--muted); font-size:.82rem}
.foot-in a{color:var(--muted); text-decoration:none}
.foot-in a:hover{color:var(--ink)}
.foot-links{display:flex; gap:16px; flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .cards{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .proj-meta{flex-direction:column; align-items:flex-start}
  .band{padding-block:40px}
  .hero{padding-block:40px 30px}
}

/* ---------- hero, large editorial (home) ---------- */
.hero-xl{padding-block:62px 34px; background-image:radial-gradient(var(--dot) 1.3px,transparent 1.3px); background-size:22px 22px; background-position:-8px -8px}
.hl{display:inline-block; background:var(--gold-soft); color:var(--ink); font-weight:700; font-size:.92rem; letter-spacing:-.01em; padding:3px 8px; border-radius:3px; margin-bottom:28px}
.headline{font-size:clamp(2.15rem,5.8vw,4.4rem); line-height:1.05; letter-spacing:-.03em; font-weight:400; max-width:22ch}
.headline .i{font-family:var(--serif); font-style:italic; font-weight:400}
.headline .b{font-family:var(--sans); font-weight:800; letter-spacing:-.04em; color:var(--bold-green)}
.hero-actions{display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; margin-top:40px}
.icon-row{display:flex; gap:10px}
.icon-btn{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--cta-bg); color:var(--cta-ink); text-decoration:none; flex:none}
.icon-btn:hover{color:var(--cta-ink); filter:brightness(1.12)}
.icon-btn svg{width:17px; height:17px; display:block}

/* ---------- intro, text beside portrait ---------- */
.intro-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:52px; align-items:start; padding-block:54px; border-top:1px solid var(--line)}
.intro-copy{display:flex; flex-direction:column; gap:17px; max-width:58ch}
.intro-copy .hi{font-size:1.16rem}
.intro-copy .hi b{font-weight:800}
.intro-copy p{color:var(--muted); font-size:1.01rem}
.intro-copy p b{color:var(--ink); font-weight:700}
.portrait{border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; box-shadow:0 18px 40px -22px rgba(0,0,0,.4)}
.portrait img{width:100%; height:100%; object-fit:cover}
button.portrait{position:relative; display:block; width:100%; padding:0; background:var(--panel, #f4efe6); cursor:pointer; font:inherit}
button.portrait:focus-visible{outline:3px solid var(--accent, #059669); outline-offset:3px}
button.portrait img{position:absolute; inset:0; opacity:0; transition:opacity .45s ease}
button.portrait img.on{opacity:1}
.portrait-count{position:absolute; right:12px; bottom:12px; padding:3px 10px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.03em}
@media (prefers-reduced-motion:reduce){button.portrait img{transition:none}}
.portrait.empty{background:linear-gradient(140deg,var(--emerald),#047857); display:grid; place-items:center; text-align:center; padding:22px}
.portrait.empty span{font-family:var(--serif); font-style:italic; color:rgba(255,255,255,.9); font-size:.95rem; line-height:1.45}
@media (max-width:820px){
  .intro-grid{grid-template-columns:1fr; gap:30px}
  .portrait{max-width:250px}
}

/* ================= case study layout =================
   Centered hero, then phases: a centred heading with flanking rules, and a
   two-column row that alternates text and visual down the page. Each text
   block is a lede plus a short list, so a phase reads in under a minute. */

.cs-hero{text-align:center; padding-block:14px 30px}
.cs-hero .kicker{font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:12px}
.cs-hero h1{font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,4.2vw,2.9rem); letter-spacing:-.01em; line-height:1.05}
.cs-hero .tagline{font-family:var(--serif); font-style:italic; font-size:clamp(.98rem,1.6vw,1.12rem); color:var(--muted); margin-top:8px}
.cs-hero .chips{justify-content:center; margin-top:18px}
.cs-hero .chip-rows{margin-top:18px}
.cs-hero .chip{font-size:.78rem; padding:5px 12px}
.cs-hero .actions{justify-content:center; margin-top:24px}
.cs-hero .action{padding:14px 28px; font-size:.95rem}

.phase{display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,24px); margin-bottom:40px}
.phase::before,.phase::after{content:""; height:2px; width:clamp(26px,7vw,86px); background:var(--accent); flex:none}
.phase h2{font-family:var(--serif); font-weight:600; font-size:clamp(1.6rem,3.6vw,2.5rem); letter-spacing:-.01em; text-align:center}

.row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:center}
.row > *{min-width:0}
.row + .row{margin-top:48px}
.row.flip .row-text{order:2}
.row-text{display:flex; flex-direction:column; gap:14px}
.row-text h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.75rem); letter-spacing:-.01em}
.row-text h3 + p{margin-top:-4px}
.row-text .lede{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.02rem; line-height:1.6}
.row-text p{color:var(--muted)}
.row-text ul{padding-left:20px; color:var(--muted); display:flex; flex-direction:column; gap:10px}
.row-text strong{color:var(--ink); font-weight:700}
.row-text .find{font-weight:800; color:var(--ink); font-size:.98rem; margin-bottom:-4px}
.row-wide{max-width:var(--narrow); margin-inline:auto}

.shot{border:1px dashed var(--chip-line); border-radius:18px; background:var(--surface-2); min-height:300px;
  display:grid; place-items:center; text-align:center; padding:26px; color:var(--muted); font-size:.95rem}
.shot.tall{min-height:430px; max-width:320px; margin-inline:auto; border-radius:28px}
.shot:has(img){border-style:solid; border-color:var(--line); padding:0; min-height:auto; background:transparent}
.shot img{border-radius:inherit; width:100%; height:auto; display:block}

/* image-primary stacked layout: image on top, short text below */
.evidence{display:flex; flex-direction:row-reverse; align-items:center; gap:32px}
.evidence + .evidence{margin-top:48px}
.evidence .shot{border-radius:14px; overflow:hidden; flex:0 1 480px; min-width:0}
.evidence .shot:has(img){border:1px solid var(--line); box-shadow:0 8px 30px -12px rgba(0,0,0,.25)}
.evidence .shot img{width:100%;height:auto;display:block}
.evidence .ev-text{flex:1 1 0%; color:var(--muted); font-size:.95rem; line-height:1.7; max-width:52ch}
.evidence .ev-text h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.45rem); letter-spacing:-.01em; color:var(--ink); margin-bottom:6px}
.evidence .ev-text p{margin:0 0 8px}
.evidence .ev-text p:last-child{margin-bottom:0}
.evidence .ev-text strong{color:var(--ink); font-weight:700}
@media (max-width:700px){.evidence{flex-direction:column; gap:14px} .evidence .ev-text{max-width:none}}

.cmp-wrap{overflow-x:auto}
.cmp{width:100%; min-width:400px; border-collapse:collapse; font-size:.95rem}
.cmp th,.cmp td{padding:13px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.cmp thead th{font-weight:800; color:var(--ink); font-size:.92rem}
.cmp td.tick{text-align:center; white-space:nowrap; width:1%; padding-inline:18px; font-size:1.05rem}
.cmp .yes{color:var(--accent-ink)}
.cmp .no{color:var(--muted)}

.meta-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:28px}
.meta-strip > div{background:var(--surface); padding:16px 18px}
.meta-strip dt{font-size:.8rem; font-weight:700; color:var(--accent-ink); margin-bottom:4px}
.meta-strip dd{margin:0; font-weight:600}

@media (max-width:860px){
  .row{grid-template-columns:1fr}
  .row.flip .row-text{order:0}
  .shot{min-height:200px}
  .shot.tall{min-height:300px}
}
@media (max-width:620px){.meta-strip{grid-template-columns:1fr}}

/* intro: philosophy heading and the greeting emoji */
.intro-copy h3{font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.3rem;
  letter-spacing:0; color:var(--ink); margin-top:10px}
.intro-copy .emo{font-style:normal; font-size:1.05em; line-height:1}
.intro-grid .portrait{position:sticky; top:84px}
@media (max-width:820px){.intro-grid .portrait{position:relative}}

/* ---------- company logos ---------- */
.co-logo{display:block; object-fit:contain; object-position:left center}
.logo-item .co-logo{height:var(--h,32px); width:auto; max-width:none}
.cv-item.has-logo{display:grid; grid-template-columns:140px 1fr auto; column-gap:20px; align-items:center}
/* Every mark gets the same box and is centred inside it, so a wide wordmark
   and a square shield carry the same footprint down the column. --s trims
   the few that still read heavy at the same scale. */
.cv-item.has-logo .co-logo{width:140px; height:56px; box-sizing:border-box;
  object-fit:contain; object-position:center;
  padding:calc((1 - var(--s,1)) * 26px) calc((1 - var(--s,1)) * 64px)}
.cv-item.has-logo .co-spacer{display:block; width:140px; height:56px}
/* Dark theme: the brand marks are dark on transparent, so sit them on a white chip. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .co-logo{background:#fff; border-radius:9px; padding:5px 9px; box-sizing:content-box}}
:root[data-theme="dark"] .co-logo{background:#fff; border-radius:9px; padding:5px 9px; box-sizing:content-box}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cv-item.has-logo .co-logo{width:140px; height:56px; box-sizing:border-box;
  padding:calc(6px + (1 - var(--s,1)) * 21px) calc(9px + (1 - var(--s,1)) * 54px)}}
:root[data-theme="dark"] .cv-item.has-logo .co-logo{width:140px; height:56px; box-sizing:border-box;
  padding:calc(6px + (1 - var(--s,1)) * 21px) calc(9px + (1 - var(--s,1)) * 54px)}
@media (max-width:640px){
  .cv-item.has-logo{grid-template-columns:1fr; row-gap:8px; align-items:start}
  .cv-item.has-logo .co-spacer{display:none}
  .cv-item.has-logo .when{text-align:left}
}

/* ---------- contact card (legacy, kept for other uses) ---------- */
.contact-card{max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px 26px; text-align:center; box-shadow:0 18px 44px -28px rgba(0,0,0,.4)}
.cc-name{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.cc-tag{color:var(--muted); margin-top:6px; font-size:1rem}
.cc-actions{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px}
.cc-tile{display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 6px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--accent-ink); text-decoration:none; font-size:.82rem; font-weight:700; transition:border-color .18s,transform .18s,box-shadow .18s}
.cc-tile svg{width:22px; height:22px}
.cc-tile:hover{color:var(--accent-ink); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 12px 26px -16px color-mix(in srgb,var(--accent) 55%,transparent)}
.cc-email{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); text-align:left}
.cc-email-txt{display:flex; flex-direction:column; min-width:0}
.cc-email-lbl{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cc-email-txt a{color:var(--accent-ink); font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis}
.cc-copy{flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; display:grid; place-items:center}
.cc-copy svg{width:18px; height:18px}
.cc-copy:hover{color:var(--accent-ink); border-color:var(--accent)}
.cc-copy.copied{color:var(--accent-ink); border-color:var(--accent)}
@media (max-width:420px){.cc-actions{grid-template-columns:repeat(2,1fr)}}

/* ---------- contact page ----------
   Hero with a fading dot grid and a status row; a two-column grid below where
   the direct-line tiles stretch to the height of the message card. */
.ct-hero{position:relative; isolation:isolate; background-image:none; padding-block:58px 30px}
.ct-hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--dot) 1.3px,transparent 1.3px); background-size:22px 22px; background-position:-8px -8px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent)}
.ct-status{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:8px}
.ct-status li{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--deep-line); color:var(--deep); font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums}
.ct-status li svg{color:var(--deep); flex:none}
.ct-status li.ct-status-live{background:var(--deep-soft); border-color:var(--deep-line); color:var(--deep); font-weight:700}
.ct-dot{width:8px; height:8px; border-radius:50%; background:var(--deep); flex:none; position:relative}
.ct-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--deep); opacity:0; animation:ct-ping 2.4s ease-out infinite}
@keyframes ct-ping{0%{transform:scale(.5); opacity:.7}80%,100%{transform:scale(1.4); opacity:0}}
@media (prefers-reduced-motion:reduce){.ct-dot::after{animation:none}}

.ct-band{padding-block:10px 64px}
.ct-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:22px; align-items:stretch}

/* left column */
.ct-panel{display:flex; flex-direction:column; gap:12px}
.ct-feature{flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; position:relative; overflow:hidden;
  background:#064e3b; color:#ecfdf5; border:1px solid #065f46; border-radius:var(--radius);
  padding:clamp(22px,3vw,30px); text-decoration:none; min-height:220px;
  transition:transform .2s,box-shadow .2s}
.ct-feature::after{content:""; position:absolute; right:-70px; bottom:-90px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.28),transparent 68%); pointer-events:none}
.ct-feature:hover{color:#ecfdf5; transform:translateY(-2px); box-shadow:0 18px 40px -16px rgba(5,150,105,.45)}
.ct-feature-ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.1); color:#6ee7b7; margin-bottom:6px}
.ct-feature-kicker{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#facc15}
.ct-feature-title{font-family:var(--serif); font-weight:600; font-size:clamp(1.45rem,2.6vw,1.8rem); line-height:1.15; letter-spacing:-.01em; color:#fff}
.ct-feature-txt{font-size:.94rem; line-height:1.55; color:rgba(236,253,245,.78); max-width:36ch}
.ct-feature-cta{margin-top:auto; padding-top:12px; display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.92rem; color:#6ee7b7}
.ct-feature-cta svg{transition:transform .2s}
.ct-feature:hover .ct-feature-cta svg{transform:translateX(4px)}

.ct-tile{display:flex; align-items:center; gap:14px; padding:14px 16px; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); text-decoration:none; transition:border-color .2s,transform .2s,box-shadow .2s}
a.ct-tile:hover,.ct-tile:has(a:hover){color:var(--ink); border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 12px 28px -18px color-mix(in srgb,var(--accent) 60%,transparent)}
.ct-ico{flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--deep-soft); color:var(--deep)}
.ct-ico-gold{background:var(--deep-soft); color:var(--deep)}
.ct-tile-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.ct-tile-lbl{font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ct-tile-val{font-weight:700; font-size:.95rem; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.ct-tile-val:hover{color:var(--accent-ink)}
.ct-arrow{flex:none; color:var(--muted); transition:color .2s,transform .2s}
.ct-tile:hover .ct-arrow{color:var(--accent-ink); transform:translate(2px,-2px)}
.ct-pair{display:flex; flex-direction:column; gap:12px}

.ct-copy-email{flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--muted); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.ct-copy-email:hover{color:var(--accent-ink); border-color:var(--accent)}
.ct-copy-email.copied{color:var(--accent-ink); border-color:var(--accent); background:var(--emerald-tint)}

.ct-share-copy{flex:none; display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--muted); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.ct-share-copy:hover{color:var(--accent-ink); border-color:var(--accent)}
.ct-share-copy.copied{color:var(--accent-ink); border-color:var(--accent); background:var(--emerald-tint)}
.ct-copy-email,.ct-share-copy{justify-content:center; min-width:6.4rem}
.ct-copy-email .ico-check,.ct-share-copy .ico-check{display:none}
.ct-copy-email.copied .ico-copy,.ct-share-copy.copied .ico-copy{display:none}
.ct-copy-email.copied .ico-check,.ct-share-copy.copied .ico-check{display:block}
.ct-right{display:flex; flex-direction:column; gap:12px; min-width:0}
.ct-right .ct-form-wrap{flex:1}

/* right column form */
.ct-form-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(22px,3.2vw,34px); box-shadow:0 24px 50px -34px rgba(0,0,0,.28)}
.ct-form-header{margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.ct-form-header h2{font-size:1.45rem; font-weight:800; margin-bottom:5px}
.ct-form-header p{color:var(--muted); font-size:.95rem}
.ct-form.tform{max-width:none; gap:20px}
.ct-form.tform textarea,.ct-form.tform input{background:var(--paper); font-size:.95rem}
.ct-form.tform textarea{min-height:132px}
.tform-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.tform-head .tform-count{align-self:auto}

.ct-intents{border:0; margin:0; padding:0; min-width:0}
.ct-intents legend{padding:0; margin-bottom:9px}
.ct-intent-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ct-intent{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; text-align:left;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  font:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.ct-intent svg{flex:none; color:var(--muted); transition:color .2s}
.ct-intent{transition:background .18s,border-color .18s,color .18s}
.ct-intent::after{content:""; flex:none; margin-left:auto; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--line); background:transparent; transition:border-color .18s,background .18s}
.ct-intent:hover{background:var(--paper); border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.ct-intent:hover::after{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.ct-intent[aria-pressed="true"]{background:var(--emerald-tint); border-color:var(--accent); color:var(--ink); font-weight:700}
.ct-intent[aria-pressed="true"] svg{color:var(--accent-ink)}
.ct-intent[aria-pressed="true"]::after{border-color:var(--accent); background:radial-gradient(circle,var(--accent) 0 4px,transparent 4.5px)}
.ct-intent:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ct-intent{transition:none}}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.ct-submit-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:4px}
.ct-submit{padding:13px 26px; font-size:.95rem}
.ct-submit:disabled{opacity:.6; cursor:progress}
.ct-reply-note{font-size:.84rem; color:var(--muted); font-family:var(--serif); font-style:italic}
.ct-form .tform-status:empty{display:none}

/* dark theme: the feature tile drops to the surface with an emerald edge */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-feature{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}}
:root[data-theme="dark"] .ct-feature{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

@media (max-width:820px){
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .ct-feature{min-height:0}
}
@media (max-width:460px){
  .ct-intent-grid{grid-template-columns:1fr}
  .ct-submit{width:100%; justify-content:center}
}

/* toast */
.ct-toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(120px); z-index:9000;
  display:flex; align-items:center; gap:14px; background:#064e3b; color:#ecfdf5; border:1px solid #059669;
  border-radius:14px; padding:16px 24px; box-shadow:0 20px 50px -18px rgba(5,150,105,.5);
  opacity:0; visibility:hidden; transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s,visibility .35s;
  max-width:min(480px,calc(100vw - 32px)); pointer-events:none}
.ct-toast svg{flex:none; color:#34d399}
.ct-toast-txt{display:flex; flex-direction:column; gap:2px}
.ct-toast-txt strong{font-weight:700; font-size:.95rem}
.ct-toast-txt span{font-size:.84rem; color:#a7f3d0}
.ct-toast.show{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto}
/* dark mode toast */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-toast{background:#1a2d43; border-color:#10b981; color:#f4f7fa; box-shadow:0 20px 50px -18px rgba(16,185,129,.35)}}
:root[data-theme="dark"] .ct-toast{background:#1a2d43; border-color:#10b981; color:#f4f7fa; box-shadow:0 20px 50px -18px rgba(16,185,129,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct-toast-txt span{color:#a8bace}}
:root[data-theme="dark"] .ct-toast-txt span{color:#a8bace}


/* ---------- thoughts form ---------- */
.tform{display:flex; flex-direction:column; gap:18px; max-width:560px}
.tform-field{display:flex; flex-direction:column; gap:7px; position:relative}
.tform-lbl{font-weight:700; font-size:.9rem; color:var(--ink)}
.tform-lbl .opt{font-weight:400; color:var(--muted); font-size:.85rem}
.tform textarea,.tform input{width:100%; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.tform textarea{resize:vertical; min-height:120px; line-height:1.5}
.tform textarea::placeholder,.tform input::placeholder{color:var(--muted); opacity:.8}
.tform textarea:focus,.tform input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.tform-count{align-self:flex-end; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.tform-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.tform-status{font-size:.9rem; font-weight:600; margin:0}
.tform-status.ok{color:var(--accent-ink)}
.tform-status.err{color:#c0392b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tform-status.err{color:#f08a7a}}
:root[data-theme="dark"] .tform-status.err{color:#f08a7a}

/* ---------- case study screenshots and flows ---------- */
.phone-shot{margin:0; max-width:248px; margin-inline:auto}
.phone-shot img{width:100%; border:1px solid var(--line); border-radius:22px; box-shadow:0 20px 46px -26px rgba(0,0,0,.45)}
.gist-lbl{text-align:center; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.02rem; margin:26px 0 14px}
.shot-gallery{display:grid; gap:18px; align-items:start}
.shot-gallery.phones{grid-template-columns:repeat(4,1fr); max-width:760px; margin-inline:auto}
.shot-gallery.admin{grid-template-columns:1fr; max-width:900px; margin-inline:auto; gap:28px}
.shot-gallery figure{margin:0; display:flex; flex-direction:column; gap:9px}
.shot-gallery img{width:100%; height:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 14px 30px -20px rgba(0,0,0,.4)}
.shot-gallery.phones img{border-radius:18px}
.shot-gallery figcaption{font-size:.84rem; color:var(--muted); text-align:center}
@media (max-width:820px){
  .shot-gallery.phones{grid-template-columns:1fr 1fr; max-width:420px}
}

.flow-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px}
.flow-fig{margin:0; background:#14110c; border:1px solid var(--line); border-radius:16px; padding:16px 16px 20px}
.flow-fig figcaption{color:#ece6d9; font-weight:700; text-align:center; margin-bottom:10px; font-size:.95rem; letter-spacing:.01em}
.flow-fig img{width:100%; display:block}
@media (max-width:760px){.flow-grid{grid-template-columns:1fr}}

/* ---------- planning whiteboard notes ---------- */
.board-note{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-left:4px solid var(--accent); border-radius:14px;
  padding:18px 22px 18px 20px; margin-top:36px}
.board-note summary{font-family:var(--sans); font-weight:700; font-size:.95rem;
  color:var(--accent-ink); cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px;
  letter-spacing:.01em}
.board-note summary::before{content:'📋'; font-size:1.1em}
.board-note summary::after{content:'▸'; font-size:.85em; color:var(--accent-ink); opacity:.6; transition:transform .2s; margin-left:auto}
.board-note[open] summary::after{transform:rotate(90deg); opacity:1}
.board-note summary::-webkit-details-marker{display:none}
.board-note summary:hover{color:var(--ink)}
.board-note .board-body{margin-top:16px}
.board-note .board-body img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 10px 28px -16px rgba(0,0,0,.3)}
.board-note .board-caption{font-size:.88rem; color:var(--muted); margin-top:10px; line-height:1.55}
.board-note .board-gallery{display:grid; gap:18px; margin-top:16px}
.board-note .board-gallery figure{margin:0; display:flex; flex-direction:column; gap:8px}
.board-note .board-gallery figcaption{font-size:.84rem; color:var(--muted); text-align:center}
.board-note .board-gallery img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 10px 28px -16px rgba(0,0,0,.3)}

/* ---------- side project cards ---------- */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.pcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.pcard:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-2px);
  box-shadow:0 16px 36px -20px color-mix(in srgb,var(--accent) 55%,transparent)}
.pcard-cover{width:100%; height:144px; object-fit:cover; display:block; border-bottom:1px solid var(--line)}
.pcard-body{padding:17px 19px 19px; display:flex; flex-direction:column; gap:10px; flex:1}
.pcard-body h3{font-size:1.08rem; font-weight:800}
.pcard-lede{color:var(--muted); font-size:.91rem}
.pcard-meta{display:grid; gap:6px; margin:2px 0 0}
.pcard-meta > div{display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:baseline}
.pcard-meta dt{font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.pcard-meta dd{margin:0; font-size:.85rem; font-weight:600}
.pstatus{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
  padding:3px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink)}
.pstatus::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pcard-open{margin-top:auto; padding-top:4px; font-weight:700; font-size:.85rem; color:var(--accent-ink)}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}}

/* ---------- dark atmosphere: under the canopy, clear sky above ----------
   A fixed layer behind the content so the scene stays put while the page
   scrolls: a cool sky glow overhead falling away into deep forest green. */
.sky{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      url("/assets/dark/treeline.svg?v=2") bottom center / max(1100px,100%) auto no-repeat,
      url("/assets/dark/stars.svg?v=2") top center / cover no-repeat,
      radial-gradient(105% 62% at 50% -8%, rgba(86,140,186,.30) 0%, rgba(40,74,110,.15) 45%, rgba(16,31,51,0) 78%),
      linear-gradient(180deg,#17304c 0%,#142942 30%,#112339 58%,#102134 100%);
  }
}
:root[data-theme="dark"] body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
      url("/assets/dark/treeline.svg?v=2") bottom center / max(1100px,100%) auto no-repeat,
      url("/assets/dark/stars.svg?v=2") top center / cover no-repeat,
      radial-gradient(105% 62% at 50% -8%, rgba(86,140,186,.30) 0%, rgba(40,74,110,.15) 45%, rgba(16,31,51,0) 78%),
      linear-gradient(180deg,#17304c 0%,#142942 30%,#112339 58%,#102134 100%);
}
/* bands and cards sit on the scene, so keep their own fills honest */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .flow-fig{background:#132334}}
:root[data-theme="dark"] .flow-fig{background:#132334}

/* ---------- capabilities: where I'm most useful ---------- */
.sec-head .eyebrow{color:var(--gold-ink); margin-top:0; margin-bottom:2px}
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:26px}
.cap{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.cap-lbl{font-size:.84rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.cap-state{font-size:.72rem; font-weight:700; padding:3px 11px; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.cap-state.s3{background:var(--accent-soft); color:var(--accent-ink)}
.cap-state.s2{background:var(--gold-soft); color:var(--gold-ink)}
.cap-state.s1{background:var(--chip); color:var(--muted); border-color:var(--chip-line)}
.cap h3{font-size:1.1rem; font-weight:800; letter-spacing:-.01em; margin-top:3px}
.cap p{color:var(--muted); font-size:.95rem}
.cap-list{display:flex; flex-direction:column; align-items:flex-start; width:100%; margin-top:8px; gap:10px}
.cap-tog{width:100%}
/* each toggle reads as a pill button, matching the hero button pair */
.cap-tog summary{cursor:pointer; list-style:none; display:inline-flex; width:fit-content; max-width:100%; align-items:center; gap:10px;
  padding:10px 18px; border:1px solid var(--cta-bg); border-radius:999px; background:transparent;
  font-weight:700; font-size:.92rem; color:var(--ink); line-height:1.3;
  transition:background .2s,color .2s,border-color .2s}
.cap-tog summary::-webkit-details-marker{display:none}
.cap-tog summary::before{content:""; flex:none; width:0; height:0; border-left:7px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; transform-origin:35% 50%; transition:transform .18s ease}
.cap-tog[open] summary::before{transform:rotate(90deg)}
.cap-tog summary:hover{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg)}
.cap-tog[open] summary{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg)}
.cap-tog summary:focus-visible{outline:3px solid var(--deep); outline-offset:2px}
.cap-tog p{margin:0; padding:10px 2px 4px 4px}
@media (prefers-reduced-motion:reduce){.cap-tog summary,.cap-tog summary::before{transition:none}}
@media (max-width:860px){.cap-grid{grid-template-columns:1fr; gap:26px}}

/* ---------- Side Quest page theme (pitch-deck indigo-gold, dark mode only) ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="side-quest"]{ --paper:#2a2c42; --surface:#33354d; --ink:#f0ede8; --muted:#b0adc0; --line:#3e405a; --on-accent:#2a2c42; --chip:#3a3c55; --chip-line:#4a4c65; --dot:transparent; --accent:#d4a843; --accent-ink:#e5b84f; --accent-soft:rgba(212,168,67,.15); --surface-2:#33354d; --gold:#d4a843; --gold-ink:#e5b84f; --gold-soft:rgba(212,168,67,.15); --emerald:#d4a843; --emerald-ink:#e5b84f; --emerald-soft:rgba(212,168,67,.15); --emerald-tint:#33354d; color-scheme:dark; }}
:root[data-theme="dark"] [data-page="side-quest"]{ --paper:#2a2c42; --surface:#33354d; --ink:#f0ede8; --muted:#b0adc0; --line:#3e405a; --on-accent:#2a2c42; --chip:#3a3c55; --chip-line:#4a4c65; --dot:transparent; --accent:#d4a843; --accent-ink:#e5b84f; --accent-soft:rgba(212,168,67,.15); --surface-2:#33354d; --gold:#d4a843; --gold-ink:#e5b84f; --gold-soft:rgba(212,168,67,.15); --emerald:#d4a843; --emerald-ink:#e5b84f; --emerald-soft:rgba(212,168,67,.15); --emerald-tint:#33354d; color-scheme:dark; }
/* Side Quest nav/table overrides (dark mode only) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="side-quest"] .nav{background:color-mix(in srgb,#2a2c42 88%,transparent); border-bottom-color:#3e405a}}
:root[data-theme="dark"] [data-page="side-quest"] .nav{background:color-mix(in srgb,#2a2c42 88%,transparent); border-bottom-color:#3e405a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="side-quest"] .cmp{background:#33354d; color:var(--ink)}}
:root[data-theme="dark"] [data-page="side-quest"] .cmp{background:#33354d; color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="side-quest"] .cmp th{color:var(--accent)}}
:root[data-theme="dark"] [data-page="side-quest"] .cmp th{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="side-quest"] .tick.yes{color:#4ade80}}
:root[data-theme="dark"] [data-page="side-quest"] .tick.yes{color:#4ade80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="side-quest"] .tick.no{color:#f87171}}
:root[data-theme="dark"] [data-page="side-quest"] .tick.no{color:#f87171}

/* ---------- lightbox ---------- */
.lightbox-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;cursor:zoom-out}
.lightbox-overlay.open{opacity:1;visibility:visible}
.lightbox-overlay img{max-width:92vw;max-height:90vh;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.5);object-fit:contain}
.lightbox-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:4px 10px;border-radius:6px;transition:background .15s}
.lightbox-close:hover{background:rgba(255,255,255,.15)}

/* ---------- phase navigation ---------- */
.phase-nav-band{border-top:2px solid var(--accent)}
.phase-nav-label{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:18px}
.phase-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.phase-card{all:unset; cursor:pointer; display:flex; flex-direction:column; gap:8px;
  background:var(--surface); border:2px solid var(--line); border-radius:var(--radius);
  padding:clamp(18px,3vw,26px); transition:border-color .2s,transform .2s,box-shadow .2s}
.phase-card:hover{border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 14px 36px -16px color-mix(in srgb,var(--accent) 40%,transparent)}
.phase-card.active{border-color:var(--accent); background:var(--accent-soft)}
.phase-num{font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink)}
.phase-card h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.1rem,2vw,1.35rem); letter-spacing:-.01em; color:var(--ink)}
.phase-card p{color:var(--muted); font-size:.88rem; line-height:1.45; margin:0}
.phase-panel[hidden]{display:none}

/* ---------- step indicators ---------- */
/* A four-up grid rather than a scrolling flex row: the cards carried only
   a label each, so they packed into the left corner and left the band
   half empty. Equal columns fill the width and give each step room for a
   line of explanation. */
.phase-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px}
.step-card{min-width:0; background:var(--ink); color:var(--paper); border-radius:10px;
  padding:16px 18px 18px; display:flex; flex-direction:column; gap:5px;
  border-left:3px solid var(--accent)}
.step-num{font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 65%,transparent)}
.step-title{font-weight:700; font-size:.95rem; line-height:1.3}
.step-card p{font-size:.8rem; line-height:1.55; margin-top:3px;
  color:color-mix(in srgb,var(--paper) 72%,transparent)}
/* intro and close bracket the steps, centred under the centred heading */
.phase-brief{color:var(--muted); font-size:1rem; line-height:1.65; max-width:68ch;
  margin:0 auto 28px; text-align:center}
.phase-close{color:var(--ink); font-family:var(--serif); font-style:italic;
  font-size:1.05rem; line-height:1.6; max-width:60ch; margin:0 auto; text-align:center}
@media (max-width:860px){
  .phase-steps{grid-template-columns:repeat(2,1fr); gap:12px}
  /* full width and flush left, so both align with the cards */
  .phase-brief,.phase-close{text-align:left; max-width:none; margin-inline:0}
  .phase-brief{font-size:.95rem}
}
@media (max-width:520px){
  .phase-steps{grid-template-columns:1fr}
}

/* dark mode step cards */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .step-card{background:var(--surface); color:var(--ink); border-left-color:var(--accent)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .step-num{color:var(--muted)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .step-card p{color:var(--muted)}}
:root[data-theme="dark"] .step-card{background:var(--surface); color:var(--ink); border-left-color:var(--accent)}
:root[data-theme="dark"] .step-num{color:var(--muted)}
:root[data-theme="dark"] .step-card p{color:var(--muted)}

/* ---------- PIF priority badges & scores ---------- */
.pri-badge{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:26px;
  background:var(--ink); color:var(--paper); border-radius:6px; font-size:.7rem; font-weight:800;
  margin-right:12px; letter-spacing:.04em; vertical-align:middle; flex:none}
.pif-score{text-align:right; white-space:nowrap; width:72px; vertical-align:middle; padding-right:18px}
.pif-score strong{font-size:1.4rem; font-weight:700; letter-spacing:-.02em}
.pif-of{font-size:.82rem; color:var(--muted)}

/* ---------- download resource cards ---------- */
.dl-cards{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.dl-card{display:flex; align-items:center; gap:14px; padding:14px 18px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:12px;
  text-decoration:none; color:var(--ink); transition:border-color .2s,transform .15s,box-shadow .2s}
.dl-card:hover{border-color:var(--accent); transform:translateY(-1px);
  box-shadow:0 8px 24px -10px color-mix(in srgb,var(--accent) 30%,transparent)}
.dl-card-icon{flex:none; width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center}
.dl-card-icon.pdf{background:#fee2e2; color:#dc2626}
.dl-card-icon.link{background:#dbeafe; color:#2563eb}
.dl-card-icon.code{background:#f3e8ff; color:#7c3aed}
.dl-card-icon.play{background:#d1fae5; color:#059669}
.dl-card-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.dl-card-title{font-weight:700; font-size:.92rem; line-height:1.3}
.dl-card-meta{font-size:.74rem; color:var(--muted)}
.dl-card-arrow{flex:none; color:var(--muted); transition:color .2s,transform .2s}
.dl-card:hover .dl-card-arrow{color:var(--accent-ink); transform:translateX(3px)}

/* dark mode download cards */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dl-card-icon.pdf{background:#450a0a; color:#fca5a5}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dl-card-icon.link{background:#172554; color:#93c5fd}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dl-card-icon.code{background:#3b0764; color:#d8b4fe}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dl-card-icon.play{background:#052e16; color:#6ee7b7}}
:root[data-theme="dark"] .dl-card-icon.pdf{background:#450a0a; color:#fca5a5}
:root[data-theme="dark"] .dl-card-icon.link{background:#172554; color:#93c5fd}
:root[data-theme="dark"] .dl-card-icon.code{background:#3b0764; color:#d8b4fe}
:root[data-theme="dark"] .dl-card-icon.play{background:#052e16; color:#6ee7b7}

/* ---------- survey stat tiles (Kural) ---------- */
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:6px 0 10px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,28px) clamp(18px,2.5vw,24px)}
.stat-fig{font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,5vw,3rem); letter-spacing:-.02em; color:var(--accent-ink); line-height:1}
.stat-cap{margin-top:10px; color:var(--muted); font-size:.92rem; line-height:1.45}

/* ---------- compose demo mock (Kural) ---------- */
.compose-demo{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.compose-row{padding:clamp(16px,2.4vw,22px) clamp(18px,2.6vw,24px)}
.compose-row + .compose-row{border-top:1px solid var(--line)}
.compose-row.out{background:var(--surface-2)}
.compose-lbl{font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; display:block}
.compose-in{font-size:.95rem; color:var(--ink); line-height:1.5}
.compose-out{font-size:.95rem; color:var(--ink); line-height:1.62; white-space:pre-line}
.compose-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:13px}
.chip.detected{background:var(--accent-soft); border-color:transparent; color:var(--accent-ink); font-weight:700; display:inline-flex; align-items:center; gap:5px}
.chip.detected svg{width:13px; height:13px; flex:none}

@media (max-width:720px){
  .stat-row{grid-template-columns:1fr}
}
@media (max-width:620px){
  .phase-nav{grid-template-columns:1fr}
}

/* Qualifications jump nav */
.qual-jump{padding:28px 0 0;text-align:center}
.qual-jump .wrap{display:flex;align-items:stretch;justify-content:center;gap:16px;flex-wrap:wrap}
.qual-jump-link{flex:1;max-width:220px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:1.35rem;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:.01em;padding:18px 24px;border:2px solid var(--accent);border-radius:10px;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.qual-jump-link:hover,.qual-jump-link:focus-visible{background:var(--panel-green);border-color:var(--panel-green-line);color:#ecfdf5;box-shadow:0 2px 8px rgba(0,0,0,.10)}
@media(max-width:480px){.qual-jump .wrap{gap:10px}.qual-jump-link{font-size:1.1rem;padding:14px 16px;max-width:none}}

/* ---------- about page ----------
   Text is held to a 48rem measure. Two modules sit side by side over a
   principles row; key figures are pulled into a strip under the hero. */
.ab-hero{padding-block:58px 34px}
.ab-hero h1{font-size:clamp(2.3rem,5.6vw,4.2rem); line-height:1.07; max-width:26ch}
.ab-hero h1 .serif{display:block}
.ab-lead{margin-top:24px; max-width:52rem; font-size:1.18rem; line-height:1.7; color:var(--muted)}
.ab-lead strong{color:var(--ink); font-weight:700}

.ab-proof-band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface)}
.ab-proof{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0}
.ab-proof > div{padding:24px 22px; border-left:1px solid var(--line)}
.ab-proof > div:first-child{border-left:0; padding-left:0}
.ab-proof dt{font-family:var(--serif); font-weight:600; font-size:clamp(1.7rem,3.2vw,2.3rem); line-height:1; letter-spacing:-.02em; color:var(--accent-ink); font-variant-numeric:tabular-nums}
.ab-proof dt span{font-family:var(--sans); font-size:.9rem; font-weight:700; color:var(--muted); letter-spacing:0}
.ab-proof dd{margin:8px 0 0; font-size:.86rem; line-height:1.45; color:var(--muted)}

.ab-band{padding-block:64px; border-top:0}
.ab-modules{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.ab-mod{display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--accent); border-radius:var(--radius); padding:clamp(24px,3.2vw,34px)}
.ab-num{font-size:.72rem; font-weight:800; letter-spacing:.16em; color:var(--gold-ink); font-variant-numeric:tabular-nums}
.ab-mod h2,.ab-principles-head h2{font-size:clamp(1.3rem,2.2vw,1.55rem); font-weight:800; letter-spacing:-.02em; line-height:1.2}
.ab-sum{color:var(--muted); line-height:1.7; max-width:calc(188px + 46rem)}
.ab-list{list-style:none; padding:0; margin:4px 0 0; display:flex; flex-direction:column}
.ab-list li{display:grid; grid-template-columns:160px minmax(0,46rem); gap:16px 28px; padding-block:14px; border-top:1px solid var(--line); line-height:1.65; font-size:.95rem; color:var(--muted)}
.ab-list strong{color:var(--ink); font-weight:700}
.ab-k{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); line-height:1.5; padding-top:3px}
.ab-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; padding-top:6px}
.ab-tags .chip{background:var(--gold-soft); border-color:transparent; color:var(--gold-ink); font-weight:700}

/* 01 and 02: soft mint highlight, matching the Power BI strip on Qualifications */
.ab-mod{background:var(--surface-2); border:1px solid var(--line)}
.ab-mod .ab-list li{border-top-color:color-mix(in srgb,var(--accent) 18%,var(--line))}

.ab-principles-wrap{margin-top:56px}
.ab-principles-head{display:flex; align-items:baseline; gap:14px; margin-bottom:22px}
.ab-principles{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.ab-pr{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 1px 2px rgba(17,24,39,.04)}
.ab-pr-ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--ink); color:var(--paper); margin-bottom:4px}
.ab-pr h3{font-size:1.06rem; font-weight:800; letter-spacing:-.01em}
.ab-pr p{color:var(--ink); font-size:.98rem; line-height:1.7}

/* closing bridge: sends the reader on to the project work */
.ab-bridge{padding-block:66px 78px; border-top:1px solid var(--line); text-align:center}
.ab-bridge-title{font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.1; letter-spacing:-.025em; font-weight:400}
.ab-bridge-title .serif{font-family:var(--serif); font-style:italic; font-weight:400}
.ab-bridge-title .bold{font-family:var(--sans); font-weight:800; letter-spacing:-.03em; color:var(--bold-green)}
.ab-bridge-sub{margin:16px auto 0; max-width:46rem; color:var(--muted); font-size:1.06rem; line-height:1.7}
.ab-bridge-actions{margin-top:30px; display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:12px}
.ab-bridge-actions .btn{padding:14px 26px; font-size:.96rem; justify-content:center}
.btn-cta{background:var(--cta-bg); color:var(--cta-ink)}
.btn-cta-ghost{background:transparent; color:var(--cta-bg); border-color:var(--cta-bg)}
.btn-cta-ghost:hover{color:var(--cta-ink); background:var(--cta-bg)}
.btn-cta:hover{color:var(--cta-ink); filter:brightness(1.12); transform:translateY(-1px)}
.btn-cta svg{transition:transform .2s}
.btn-cta:hover svg{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.btn-cta,.btn-cta svg{transition:none}}

/* dark: the principle icon swaps to the accent so it does not invert to white */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ab-pr-ico{background:var(--accent-soft); color:var(--accent-ink)}}
:root[data-theme="dark"] .ab-pr-ico{background:var(--accent-soft); color:var(--accent-ink)}

@media (max-width:900px){
  .ab-modules{grid-template-columns:minmax(0,1fr)}
  .ab-principles{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ab-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-proof > div{padding:20px 16px}
  .ab-proof > div:nth-child(odd){border-left:0; padding-left:0}
  .ab-proof > div:nth-child(n+3){border-top:1px solid var(--line)}
  .ab-band{padding-block:44px}
  .ab-bridge{padding-block:48px 56px}
  .ab-bridge-actions{flex-direction:column; align-items:stretch; max-width:320px; margin-inline:auto}
}
@media (max-width:520px){
  .ab-list li{grid-template-columns:minmax(0,1fr); gap:4px}
}

/* ---------- architecture diagram (inline, no image) ----------
   Two-lane flow: an ingestion lane and a query lane, plus an
   observability footer. Serpentine on desktop, stacked on mobile. */
.arch{
  --arch-a:#1e3a5f; --arch-a-ink:#fff; --arch-a-bg:#f4f7fb; --arch-a-line:#c7d6e8;
  --arch-b:#15603f; --arch-b-ink:#fff; --arch-b-bg:#f2faf6; --arch-b-line:#bde0cd;
  --arch-warn:#b45309; --arch-warn-bg:#fffbeb; --arch-warn-line:#f0c478;
  --arch-stop:#b91c1c; --arch-stop-bg:#fef5f5; --arch-stop-line:#f0b4b4;
  --arch-obs:#5b4bb8; --arch-obs-bg:#f7f6fd; --arch-obs-line:#d6d1f2;
  --arch-node:#fff; --arch-rule:#e2e8f0;
  /* asymmetric on purpose: the diagram belongs to the text above it, so the
     gap below has to be the larger one to close the topic. The .row + .row
     rule cannot do this, since the next row's previous sibling is a figure. */
  margin:34px 0 60px; display:flex; flex-direction:column; gap:18px;
  container-type:inline-size;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .arch{
  --arch-a:#7dabe0; --arch-a-ink:#08182b; --arch-a-bg:rgba(125,171,224,.08); --arch-a-line:rgba(125,171,224,.32);
  --arch-b:#5cc795; --arch-b-ink:#06281c; --arch-b-bg:rgba(92,199,149,.08); --arch-b-line:rgba(92,199,149,.32);
  --arch-warn:#eab308; --arch-warn-bg:rgba(234,179,8,.09); --arch-warn-line:rgba(234,179,8,.38);
  --arch-stop:#f08a8a; --arch-stop-bg:rgba(240,138,138,.09); --arch-stop-line:rgba(240,138,138,.34);
  --arch-obs:#a99cf0; --arch-obs-bg:rgba(169,156,240,.08); --arch-obs-line:rgba(169,156,240,.3);
  --arch-node:var(--surface); --arch-rule:var(--line);
}}
:root[data-theme="dark"] .arch{
  --arch-a:#7dabe0; --arch-a-ink:#08182b; --arch-a-bg:rgba(125,171,224,.08); --arch-a-line:rgba(125,171,224,.32);
  --arch-b:#5cc795; --arch-b-ink:#06281c; --arch-b-bg:rgba(92,199,149,.08); --arch-b-line:rgba(92,199,149,.32);
  --arch-warn:#eab308; --arch-warn-bg:rgba(234,179,8,.09); --arch-warn-line:rgba(234,179,8,.38);
  --arch-stop:#f08a8a; --arch-stop-bg:rgba(240,138,138,.09); --arch-stop-line:rgba(240,138,138,.34);
  --arch-obs:#a99cf0; --arch-obs-bg:rgba(169,156,240,.08); --arch-obs-line:rgba(169,156,240,.3);
  --arch-node:var(--surface); --arch-rule:var(--line);
}

.arch-head{text-align:center; display:flex; flex-direction:column; gap:4px; margin-bottom:2px}
.arch-head h4{font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink)}
.arch-head p{color:var(--muted); font-size:.92rem}

.arch-lane{border:1px solid var(--arch-line); border-radius:16px; background:var(--arch-bg); overflow:hidden}
.arch-lane.a{--arch-c:var(--arch-a); --arch-c-ink:var(--arch-a-ink); --arch-bg:var(--arch-a-bg); --arch-line:var(--arch-a-line)}
.arch-lane.b{--arch-c:var(--arch-b); --arch-c-ink:var(--arch-b-ink); --arch-bg:var(--arch-b-bg); --arch-line:var(--arch-b-line)}
.arch-lane > h5{background:var(--arch-c); color:var(--arch-c-ink); font-size:.76rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; padding:9px 18px}
.arch-body{padding:20px 18px 18px}

.arch-flow{display:grid; gap:30px 26px; list-style:none; padding:0; margin:0}
.arch-lane.a .arch-flow{grid-template-columns:repeat(5,1fr)}
.arch-lane.b .arch-flow{grid-template-columns:repeat(4,1fr)}

.arch-flow li{position:relative; background:var(--arch-node); border:1px solid var(--arch-line);
  border-radius:11px; padding:13px 13px 14px; display:flex; flex-direction:column; gap:5px}
.arch-flow li b{font-size:.84rem; font-weight:800; color:var(--ink); line-height:1.3; display:block}
.arch-flow li b span{color:var(--arch-c); margin-right:4px}
.arch-flow li p{font-size:.745rem; line-height:1.5; color:var(--muted); margin:0}
.arch-flow li em{font-style:normal; font-weight:700; color:var(--ink)}
.arch-flow li.is-guard{border-color:var(--arch-warn-line); background:var(--arch-warn-bg)}
.arch-flow li.is-guard b span{color:var(--arch-warn)}
.arch-flow li.is-stop{border-color:var(--arch-stop-line); background:var(--arch-stop-bg)}
.arch-flow li.is-stop b span{color:var(--arch-stop)}
.arch-flow li .flag{font-size:.72rem; font-weight:700; color:var(--arch-stop)}

/* chevrons sit in the gap; direction set per lane and row */
.arch-flow li::after{content:""; position:absolute; width:11px; height:11px; border-right:2.5px solid var(--arch-c);
  border-bottom:2.5px solid var(--arch-c); opacity:.75}
.arch-flow li:last-child::after{content:none}
.arch-flow li::after{top:50%; right:-19px; transform:translateY(-50%) rotate(-45deg)}
/* lane A: five across, all point right */
/* lane B: serpentine, row 2 reversed */
.arch-lane.b .arch-flow li:nth-child(5){grid-column:4; grid-row:2}
.arch-lane.b .arch-flow li:nth-child(6){grid-column:3; grid-row:2}
.arch-lane.b .arch-flow li:nth-child(7){grid-column:2; grid-row:2}
.arch-lane.b .arch-flow li:nth-child(8){grid-column:1; grid-row:2}
.arch-lane.b .arch-flow li:nth-child(4)::after{top:auto; bottom:-22px; right:50%;
  transform:translateX(50%) rotate(45deg)}
.arch-lane.b .arch-flow li:nth-child(n+5)::after{right:auto; left:-19px;
  transform:translateY(-50%) rotate(135deg)}

.arch-note{margin-top:16px; padding-top:14px; border-top:1px dashed var(--arch-line);
  font-size:.76rem; line-height:1.6; color:var(--muted)}
.arch-note + .arch-note{margin-top:7px; padding-top:0; border-top:0}
.arch-note b{color:var(--ink); font-weight:700}
.arch-note.loop b{color:var(--arch-stop)}

.arch-obs{border:1px solid var(--arch-obs-line); border-radius:16px; background:var(--arch-obs-bg); padding:17px 20px}
.arch-obs h5{font-size:.76rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--arch-obs); margin-bottom:9px}
.arch-obs p{font-size:.78rem; line-height:1.6; color:var(--muted); margin:0}
.arch-obs p + p{margin-top:6px}
.arch-obs b{color:var(--ink); font-weight:700}

/* Two across: serpentine is dropped, so rows read left to right and the
   second node of each row hands down to the next. nth-child(n) keeps the
   specificity level with the desktop rules above, so source order decides. */
@container (max-width:860px){
  .arch-lane.a .arch-flow,.arch-lane.b .arch-flow{grid-template-columns:repeat(2,1fr); gap:28px 22px}
  .arch-lane.b .arch-flow li:nth-child(n){grid-column:auto; grid-row:auto}
  .arch-lane.a .arch-flow li:nth-child(n)::after,
  .arch-lane.b .arch-flow li:nth-child(n)::after{top:50%; bottom:auto; right:-16px; left:auto;
    transform:translateY(-50%) rotate(-45deg)}
  .arch-lane.a .arch-flow li:nth-child(even)::after,
  .arch-lane.b .arch-flow li:nth-child(even)::after{top:auto; bottom:-20px; right:50%; left:auto;
    transform:translateX(50%) rotate(45deg)}
}
@container (max-width:520px){
  .arch-lane.a .arch-flow,.arch-lane.b .arch-flow{grid-template-columns:1fr; gap:26px}
  .arch-lane.a .arch-flow li:nth-child(n)::after,
  .arch-lane.b .arch-flow li:nth-child(n)::after,
  .arch-lane.a .arch-flow li:nth-child(even)::after,
  .arch-lane.b .arch-flow li:nth-child(even)::after{top:auto; bottom:-19px; right:50%; left:auto;
    transform:translateX(50%) rotate(45deg)}
}

/* ---------- figure rows ----------
   An even split of a 1080px row gives a screenshot about 498px, so a
   1280px capture renders near 39% and the UI text inside stops being
   legible. These rows keep the image beside its prose, but widen past
   the wrap with symmetric negative margins and give the image the
   larger column, which lands it near 700px. */
.row.figrow{display:grid; align-items:center;
  grid-template-columns:1fr 1.45fr; gap:clamp(24px,3.2vw,44px);
  margin-inline:calc((100% - min(1240px,100vw - 40px)) / 2)}
.row.figrow > *{min-width:0}
.row.figrow .shot{max-width:none}
/* text stays first in the DOM; flip only moves the image visually */
.row.figrow.flip .shot{order:-1}
/* square shots would tower at full column width */
.row.figrow .shot.cap{max-width:520px; justify-self:center}
/* neutralise the phone-frame variant inside a figure row */
.row.figrow .shot.tall{min-height:0; max-width:none; border-radius:18px}
body{overflow-x:clip}
@media (max-width:860px){
  .row.figrow{grid-template-columns:1fr; gap:20px; margin-inline:0}
  .row.figrow.flip .shot{order:0}
  .row.figrow .shot.cap{max-width:none}
}


/* ---------- home contact card: same green as the contact page feature box ---------- */
.band .contact-card{position:relative; overflow:hidden; background:#064e3b; color:#ecfdf5; border:1px solid #065f46; box-shadow:none}
.band .contact-card::after{content:""; position:absolute; right:-70px; bottom:-90px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.28),transparent 68%); pointer-events:none}
.band .contact-card > *{position:relative; z-index:1}
.band .contact-card h2{color:#fff}
.band .contact-card p{color:rgba(236,253,245,.78)}
.band .contact-card .addr a{color:#6ee7b7}
.band .contact-card .btn-primary{background:#ecfdf5; color:#064e3b}
.band .contact-card .btn-primary:hover{background:#fff; color:#064e3b; filter:none}
.band .contact-card .btn-ghost{background:transparent; color:#ecfdf5; border-color:rgba(236,253,245,.45)}
.band .contact-card .btn-ghost:hover,.band .contact-card .btn-ghost:focus-visible{background:rgba(236,253,245,.12); color:#fff; border-color:#ecfdf5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band .contact-card{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}}
:root[data-theme="dark"] .band .contact-card{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

.qual-jump-link[aria-current="true"]{background:var(--panel-green);border-color:var(--panel-green-line);color:#ecfdf5;box-shadow:0 2px 8px rgba(0,0,0,.10)}

/* ---------- planning notes: larger, reads as an openable panel ---------- */
.board-note{padding:0; margin-top:44px; border-radius:18px; border-left-width:6px; transition:box-shadow .2s,border-color .2s}
.board-note:hover{border-color:var(--accent); box-shadow:0 14px 34px -20px rgba(5,150,105,.45)}
.board-note summary{font-size:clamp(1.1rem,2vw,1.35rem); gap:16px; padding:30px 28px 30px 26px; line-height:1.3}
.board-note summary::before{font-size:1.7em; line-height:1}
.board-note summary::after{content:'\25B8'; flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); font-size:1.1rem; opacity:1}
.board-note[open] summary::after{transform:rotate(90deg); background:var(--accent); color:#fff; border-color:var(--accent)}
.board-note .board-body{margin-top:0; padding:4px 28px 30px 26px}
@media(max-width:560px){.board-note summary{padding:22px 18px 22px 16px; gap:12px}.board-note .board-body{padding:2px 18px 22px 16px}.board-note summary::after{width:38px; height:38px}}

/* ---------- traction panel (native replacement for the slide image) ---------- */
.traction{position:relative; overflow:hidden; background:var(--panel-green); color:#ecfdf5; border:1px solid var(--panel-green-line);
  border-radius:18px; padding:clamp(22px,3.4vw,34px)}
.traction::after{content:""; position:absolute; right:-80px; bottom:-100px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.26),transparent 68%); pointer-events:none}
.traction > *{position:relative; z-index:1}
.tr-kicker{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#facc15; margin:0 0 8px}
.tr-title{font-family:var(--serif); font-weight:600; font-size:clamp(1.35rem,2.6vw,1.75rem); line-height:1.15; letter-spacing:-.01em; color:#fff; margin:0 0 22px}
.tr-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(20px,3vw,32px)}
.tr-col + .tr-col{border-left:1px solid rgba(236,253,245,.18); padding-left:clamp(20px,3vw,32px)}
.tr-lbl{font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(236,253,245,.7); margin:0 0 14px}
.tr-stats{display:flex; flex-direction:column; gap:16px; margin:0}
.tr-stats dt{font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,4.6vw,3rem); line-height:1; color:#6ee7b7; letter-spacing:-.02em}
.tr-stats dd{margin:6px 0 0; font-size:.92rem; color:rgba(236,253,245,.85)}
.tr-src{font-family:var(--serif); font-style:italic; font-size:.84rem; color:rgba(236,253,245,.65); margin:16px 0 0}
.tr-proto{display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-decoration:none; color:#ecfdf5;
  background:rgba(255,255,255,.08); border:1px solid rgba(236,253,245,.22); border-radius:12px; padding:12px 14px; margin-bottom:18px;
  transition:background .2s,border-color .2s}
.tr-proto span{font-weight:700; font-size:.95rem}
.tr-proto b{font-weight:700; font-size:.88rem; color:#6ee7b7}
.tr-proto:hover,.tr-proto:focus-visible{background:rgba(255,255,255,.14); border-color:#6ee7b7; color:#fff}
.tr-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.tr-steps li{position:relative; padding:0 0 18px 26px}
.tr-steps li:last-child{padding-bottom:0}
.tr-steps li::before{content:""; position:absolute; left:0; top:5px; width:11px; height:11px; border-radius:50%; background:#6ee7b7; box-shadow:0 0 0 4px rgba(110,231,183,.2)}
.tr-steps li:not(:last-child)::after{content:""; position:absolute; left:5px; top:20px; bottom:2px; width:1px; background:rgba(236,253,245,.3)}
.tr-n{display:block; font-family:var(--serif); font-weight:600; font-size:1.1rem; color:#fff}
.tr-steps p{margin:3px 0 0; font-size:.9rem; line-height:1.5; color:rgba(236,253,245,.82)}
@media(max-width:560px){.tr-grid{grid-template-columns:1fr}.tr-col + .tr-col{border-left:0; padding-left:0; border-top:1px solid rgba(236,253,245,.18); padding-top:20px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .traction{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}}
:root[data-theme="dark"] .traction{background:color-mix(in srgb,var(--accent) 16%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.tr-proto span,.tr-proto b{white-space:nowrap}
.tr-proto{flex-wrap:wrap; row-gap:2px}
.tr-grid{grid-template-columns:.9fr 1.2fr}

/* ---------- homepage logo strip: one uniform gray tone, no chips ---------- */
.logos .logo-item .co-logo{filter:grayscale(1) contrast(1.15) brightness(.8); opacity:.62; background:none; border-radius:0; padding:0; box-sizing:content-box}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logos .logo-item .co-logo{filter:grayscale(1) invert(1) brightness(1.8); opacity:.68; background:none; border-radius:0; padding:0}}
:root[data-theme="dark"] .logos .logo-item .co-logo{filter:grayscale(1) invert(1) brightness(1.8); opacity:.68; background:none; border-radius:0; padding:0}

/* ---------- qualifications logos: equal visual area, not equal box ---------- */
/* Each mark carries --lw/--lh (its optical size) and is centred in the 140x56 column box. */
.cv-item.has-logo .co-logo{width:140px; height:56px; box-sizing:border-box; object-fit:contain; object-position:center;
  padding:calc((56px - var(--lh,40px)) / 2) calc((140px - var(--lw,100px)) / 2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cv-item.has-logo .co-logo{width:140px; height:56px; box-sizing:border-box;
  padding:calc((56px - var(--lh,40px)) / 2) calc((140px - var(--lw,100px)) / 2)}}
:root[data-theme="dark"] .cv-item.has-logo .co-logo{width:140px; height:56px; box-sizing:border-box;
  padding:calc((56px - var(--lh,40px)) / 2) calc((140px - var(--lw,100px)) / 2)}

/* contact form: name and email side by side above the message */
.tform-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){.tform-row{grid-template-columns:1fr}}

/* project cards: chips and CTA share one baseline at the bottom of every card in a row */
.card .chips{margin-top:auto}
.card .chips + .card-open{margin-top:0}

/* Kittii: business model panel */
.biz{max-width:920px; margin:48px auto 0; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:clamp(22px,3.4vw,36px)}
.biz-head{text-align:center; max-width:58ch; margin:0 auto 24px}
.biz-kicker{display:inline-flex; align-items:center; gap:10px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); margin:0 0 8px}
.biz-flag{font-size:.66rem; letter-spacing:.08em; padding:3px 9px; border-radius:999px; background:var(--gold-soft); color:var(--gold-ink)}
.biz-head h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem,2.8vw,1.85rem); letter-spacing:-.01em; line-height:1.15; color:var(--ink)}
.biz-sub{color:var(--muted); margin:10px 0 0; line-height:1.6}
.biz-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.biz-card{display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:16px; padding:20px 20px 22px; box-shadow:0 1px 2px rgba(17,24,39,.04)}
.biz-who{font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0}
.biz-card h4{font-size:1.08rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); margin:0}
.biz-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:8px 0 4px}
.biz-price span{font-family:var(--serif); font-weight:600; font-size:2.3rem; line-height:1; letter-spacing:-.02em; color:var(--accent-ink)}
.biz-price small{font-size:.86rem; font-weight:600; color:var(--muted)}
.biz-note{font-size:.88rem; line-height:1.55; color:var(--muted); margin:0}
.biz-lines{list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column}
.biz-lines li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-top:1px dashed var(--line); font-size:.92rem; color:var(--ink)}
.biz-lines li:first-child{border-top:0; padding-top:2px}
.biz-lines b{font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--accent-ink); white-space:nowrap}
.biz-lines li:last-child b{font-family:var(--sans); font-size:.78rem; font-weight:700; color:var(--muted)}
.biz-target{display:grid; grid-template-columns:1fr 1fr; margin:18px 0 0; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.biz-target > div{padding:18px 22px; text-align:center}
.biz-target > div + div{border-left:1px solid var(--line)}
.biz-target dt{font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3vw,2rem); line-height:1.1; color:var(--ink); letter-spacing:-.01em}
.biz-target dd{margin:6px 0 0; font-size:.84rem; color:var(--muted)}
@media(max-width:760px){.biz-grid{grid-template-columns:1fr}.biz-target{grid-template-columns:1fr}.biz-target > div + div{border-left:0; border-top:1px solid var(--line)}}

/* admin screenshots: framed and clearly separated when stacked */
.shot-gallery.admin{gap:48px; max-width:820px}
.shot-gallery.admin figure{background:var(--surface-2); border:1px solid var(--line); border-radius:18px; padding:clamp(14px,2.4vw,22px); gap:12px}
.shot-gallery.admin figure:first-child img{max-width:600px; margin-inline:auto}
.shot-gallery.admin figcaption{font-weight:600; color:var(--ink)}

/* HelloFresh: domain advantage callout */
.edge-note{margin:6px 0 4px; background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.edge-note p{margin:0}
.edge-kicker{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.edge-lead{font-family:var(--serif); font-weight:600; font-size:1.15rem; line-height:1.3; color:var(--ink)}
.edge-list{list-style:none; padding:0; margin:2px 0; display:flex; flex-wrap:wrap; gap:8px}
.edge-list li{font-size:.8rem; font-weight:700; padding:5px 12px; border-radius:999px; background:var(--surface); border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); color:var(--accent-ink)}
.edge-list li::before{content:"\2713"; margin-right:6px}
.edge-note .edge-list{flex-direction:row; padding-left:0; color:inherit}
.edge-note .edge-list li{flex:none}
.edge-note .edge-kicker{color:var(--gold-ink)}
.edge-note .edge-lead{color:var(--ink)}

/* HelloFresh: silent churn panel */
.churn{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(20px,3vw,28px); display:flex; flex-direction:column; gap:16px; box-shadow:0 1px 2px rgba(17,24,39,.04)}
.churn-kicker{margin:0; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.churn-track{display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; font-size:.74rem; font-weight:700; text-align:center}
.churn-track .seg{padding:10px 6px; line-height:1.25}
.churn-track .early{background:var(--chip); color:var(--muted); border-radius:10px 0 0 10px}
.churn-track .prof{background:var(--accent-soft); color:var(--accent-ink)}
.churn-track .gone{background:var(--gold-soft); color:var(--gold-ink); border-radius:0 10px 10px 0; position:relative}
.churn-facts{margin:0; display:flex; flex-direction:column}
.churn-facts > div{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.churn-facts dt{font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); padding-top:3px}
.churn-facts dd{margin:0; font-size:.92rem; color:var(--muted); line-height:1.5}
.churn-q{margin:0; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink); text-align:center; padding-top:4px; border-top:1px solid var(--line); padding-top:14px}
/* HelloFresh: prototypes figure in Solution */
.proto-fig{margin:32px auto 0; max-width:902px; display:flex; flex-direction:column; gap:10px}
.proto-fig img{width:100%; height:auto; border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 30px -20px rgba(0,0,0,.4); cursor:zoom-in}
.proto-fig figcaption{text-align:center; font-size:.84rem; color:var(--muted)}

.meta-note{margin:14px auto 0; max-width:var(--narrow); font-size:.92rem; line-height:1.6; color:var(--muted); text-align:center}
.meta-note strong{color:var(--ink)}

/* Kural: Explore the build */
.xb{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px; margin-top:24px; align-items:stretch}
.xb-hero{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--panel-green); border:1px solid var(--panel-green-line); border-radius:20px; padding:clamp(24px,3.4vw,34px);
  color:#ecfdf5; text-decoration:none; min-height:280px; transition:transform .2s,box-shadow .2s}
.xb-hero::after{content:""; position:absolute; right:-80px; bottom:-100px; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(52,211,153,.28),transparent 68%); pointer-events:none}
.xb-hero > *{position:relative; z-index:1}
.xb-hero:hover{color:#ecfdf5; transform:translateY(-2px); box-shadow:0 18px 40px -16px rgba(5,150,105,.45)}
.xb-live{display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#facc15}
.xb-dot{width:8px; height:8px; border-radius:50%; background:#6ee7b7; box-shadow:0 0 0 0 rgba(110,231,183,.6); animation:xbpulse 2s infinite}
@keyframes xbpulse{0%{box-shadow:0 0 0 0 rgba(110,231,183,.55)}70%{box-shadow:0 0 0 9px rgba(110,231,183,0)}100%{box-shadow:0 0 0 0 rgba(110,231,183,0)}}
@media (prefers-reduced-motion:reduce){.xb-dot{animation:none}}
.xb-hero-title{font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,3.6vw,2.4rem); line-height:1.05; letter-spacing:-.01em; color:#fff}
.xb-hero-txt{font-size:.96rem; line-height:1.6; color:rgba(236,253,245,.82); max-width:40ch}
.xb-hero-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8rem; color:rgba(236,253,245,.7); background:rgba(255,255,255,.08); border:1px solid rgba(236,253,245,.18); border-radius:8px; padding:4px 9px}
.xb-hero-cta{margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem;
  background:#ecfdf5; color:#064e3b; border-radius:999px; padding:11px 18px}
.xb-hero-cta svg{transition:transform .2s}
.xb-hero:hover .xb-hero-cta svg{transform:translateX(4px)}
.xb-docs{display:flex; flex-direction:column; gap:10px}
.xb-docs-lbl{margin:0 0 2px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.xb-doc{flex:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; text-decoration:none; color:var(--ink);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.xb-doc:hover{color:var(--ink); border-color:var(--accent); transform:translateX(3px); box-shadow:0 10px 24px -18px rgba(5,150,105,.6)}
.xb-doc-ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink)}
.xb-doc-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.xb-doc-title{font-weight:700; font-size:.98rem}
.xb-doc-desc{font-size:.85rem; color:var(--muted); line-height:1.4}
.xb-doc-meta{font-size:.72rem; font-weight:700; color:var(--muted); background:var(--chip); border:1px solid var(--chip-line); border-radius:999px; padding:4px 10px; white-space:nowrap}
@media(max-width:820px){.xb{grid-template-columns:1fr}.xb-hero{min-height:0}}
@media(max-width:480px){.xb-doc{grid-template-columns:auto 1fr}.xb-doc-meta{grid-column:2; justify-self:start}}

/* ---------- single-page home ----------
   One scrollable page: intro, projects, capabilities, qualifications, about,
   contact. The nav links are in-page anchors with a scroll spy. */
html{scroll-padding-top:64px}
.sp-intro,.sp-sec{scroll-margin-top:0}
.nav-links a[aria-current="true"]{color:var(--accent-ink); background:var(--accent-soft)}
@media (max-width:560px){
  .nav-links{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
}

.sp-sec{padding-block:72px; border-top:1px solid var(--line)}
.sp-sec.band{background:color-mix(in srgb,var(--surface-2) 45%,var(--paper))}
.sp-head{margin-bottom:34px; max-width:64ch}
.sp-head.center{margin-inline:auto; text-align:center; max-width:860px}
#projects{padding-top:48px}
#projects .sp-head{margin-bottom:22px}
.sp-head.center .ct-status{justify-content:center}
.sp-head .eyebrow{margin-bottom:8px}
.sp-head h2{font-size:clamp(1.8rem,3.6vw,2.5rem); line-height:1.12}
.sp-head h2 .serif{font-weight:400}
.sp-head h2 .b,.sp-name .b{font-weight:800; color:var(--bold-green)}
.sp-head > p:not(.eyebrow){color:var(--muted); font-size:1.04rem; margin-top:12px}

/* intro */
.sp-intro{padding-block:44px 48px; background-image:radial-gradient(var(--dot) 1.3px,transparent 1.3px); background-size:22px 22px; background-position:-8px -8px}
.sp-intro-grid{display:grid; grid-template-columns:270px minmax(0,1fr); gap:56px; align-items:center}
.sp-portrait{position:relative; width:100%; padding:0; cursor:pointer; background:var(--surface)}
.sp-intro-copy{display:flex; flex-direction:column; align-items:flex-start; gap:14px; max-width:72ch}
.sp-status{display:inline-flex; align-items:center; gap:9px; padding:6px 13px; border-radius:999px; background:var(--deep-soft); border:1px solid var(--deep-line); color:var(--deep); font-size:.82rem; font-weight:700}
.sp-name{font-size:clamp(2.3rem,5vw,3.5rem); line-height:1.04; letter-spacing:-.025em}
.sp-name .serif{font-weight:400; color:var(--ink)}
.sp-role{font-size:1.14rem; color:var(--ink); font-weight:500; text-wrap:pretty}
.sp-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
.sp-link{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:700; font-size:.9rem; text-decoration:none; transition:background .2s,color .2s,border-color .2s,transform .2s}
.sp-link svg{width:17px; height:17px; flex:none}
.sp-link:hover{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg); transform:translateY(-1px)}
.sp-link.primary{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg)}
.sp-link.primary:hover{filter:brightness(1.12)}
.sp-overview{text-wrap:pretty; color:var(--muted); font-size:1.06rem; line-height:1.7; margin-top:6px; padding-top:18px; border-top:1px solid var(--line)}

/* project cards: cover, title, tags, one-line problem */
.pj-group + .pj-group{margin-top:46px}
.pj-group-title{display:flex; align-items:center; gap:14px; font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.35rem; letter-spacing:0; margin-bottom:18px}
.pj-group-title::before{content:""; width:32px; height:2px; background:var(--accent); flex:none}
.pj-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.pj{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; color:var(--ink); text-decoration:none; transition:transform .25s,box-shadow .25s,border-color .25s}
.pj:hover{color:var(--ink); transform:translateY(-3px); border-color:var(--deep-line); box-shadow:0 22px 44px -24px rgba(6,78,59,.45)}
.pj-cover{position:relative; aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface-2)}
.pj-cover img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.pj:hover .pj-cover img{transform:scale(1.03)}
.pj-badge{position:absolute; z-index:1; top:14px; right:14px; padding:5px 11px; border-radius:999px; background:#064e3b; color:#facc15; font-size:.74rem; font-weight:800; letter-spacing:.02em; box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.pj-body{display:flex; flex-direction:column; gap:12px; padding:20px 22px 22px; flex:1}
.pj-title{font-size:1.28rem; font-weight:800; letter-spacing:-.015em; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.pj-title span{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1rem; color:var(--muted); letter-spacing:0}
.pj-tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:.74rem; font-weight:600; padding:3px 10px; border-radius:6px; white-space:nowrap}
.t-green,.t-gold,.t-blue,.t-rose{background-color:rgba(250,204,21,.2); color:#0F172A}
.pj-desc{color:var(--muted); font-size:.98rem; line-height:1.55}
.pj-open{margin-top:auto; font-size:.88rem}
.pj-open span{display:inline-block; transition:transform .2s}
.pj:hover .pj-open span{transform:translateX(4px)}
/* "Read case study": a clear action with a larger click target */
.pj-open{display:inline-block; align-self:flex-start; padding:8px 0; margin-bottom:-6px; font-weight:600; color:#059669; text-decoration:none; transition:color .2s}
.pj:hover .pj-open, .pj:focus-visible .pj-open{color:#047857; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}
:root[data-theme="dark"] .pj-open{color:#34d399}
:root[data-theme="dark"] .pj:hover .pj-open, :root[data-theme="dark"] .pj:focus-visible .pj-open{color:#6ee7b7}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pj-open{color:#34d399}
  :root:not([data-theme="light"]) .pj:hover .pj-open, :root:not([data-theme="light"]) .pj:focus-visible .pj-open{color:#6ee7b7}
}

.pj-cta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:36px}
.pj-cta-card{position:relative; border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:26px 26px 24px; text-decoration:none; color:var(--ink); display:block; transition:border-color .25s,box-shadow .25s,transform .25s}
.pj-cta-card:hover{border-color:var(--emerald); box-shadow:0 12px 30px rgba(5,150,105,.12); transform:translateY(-3px)}
.pj-cta-tag{font-family:var(--sans); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; font-weight:800; color:var(--emerald-ink); background:var(--emerald-tint); padding:5px 10px; border-radius:999px; display:inline-block; margin-bottom:14px}
.pj-cta-card strong{display:block; font-family:var(--serif); font-size:1.42rem; font-weight:600; line-height:1.2; margin-bottom:6px}
.pj-cta-card p{margin:0; font-size:.9rem; color:var(--muted); max-width:34ch}
.pj-cta-go{position:absolute; right:22px; bottom:22px; width:36px; height:36px; border-radius:50%; background-color:#059669; color:#FFFFFF; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); display:grid; place-items:center; transition:transform .25s, box-shadow .25s}
.pj-cta-go svg{width:16px; height:16px}
.pj-cta-card:hover .pj-cta-go, .pj-cta-go:hover{transform:scale(1.05); box-shadow:0 6px 10px -2px rgba(0,0,0,.18)}

/* qualifications, compact */
.q-block + .q-block{margin-top:40px}
.q-title{display:flex; align-items:center; gap:14px; font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.35rem; letter-spacing:0; margin-bottom:8px}
.q-title::before{content:""; width:32px; height:2px; background:var(--accent); flex:none}
.q-certs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:12px}
.q-cert{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px}
.q-cert-k{font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink)}
.q-cert ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:10px}
.q-cert li{display:flex; flex-direction:column; gap:1px}
.q-cert li strong{font-size:.92rem; font-weight:700; line-height:1.35}
.q-cert li span{font-size:.82rem; color:var(--muted)}
.q-cert-link{margin-top:auto; font-size:.84rem; font-weight:700; text-decoration:none}

/* about, merged with the product philosophy */
.ab2{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:start}
.ab2-story{display:flex; flex-direction:column; gap:16px}
.ab2-story > p{font-size:1.06rem; line-height:1.7; color:var(--muted)}
.ab2-story > p:first-child{color:var(--ink)}
.ab2-proof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:8px 0 0}
.ab2-proof div{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px}
.ab2-proof dt{font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--bold-green); line-height:1.1}
.ab2-proof dd{margin:4px 0 0; font-size:.8rem; color:var(--muted); line-height:1.35}
.ab2-how{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px 26px 22px}
.ab2-how h3{font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.35rem; letter-spacing:0; margin-bottom:14px}
.ab2-list{list-style:none; padding:0; counter-reset:how; display:flex; flex-direction:column}
.ab2-list li{counter-increment:how; position:relative; padding:14px 0 14px 44px; border-top:1px solid var(--line); color:var(--muted); font-size:.97rem; line-height:1.55}
.ab2-list li:first-child{border-top:0; padding-top:4px}
.ab2-list li::before{content:"0" counter(how); position:absolute; left:0; top:14px; font-family:var(--serif); font-weight:600; font-size:1.05rem; color:var(--gold-ink)}
.ab2-list li:first-child::before{top:4px}
.ab2-list strong{color:var(--ink)}

#contact .ct-grid{margin-top:8px}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) :is(.t-green,.t-gold,.t-blue,.t-rose){background-color:rgba(250,204,21,.2); color:#FACC15}
}
:root[data-theme="dark"] :is(.t-green,.t-gold,.t-blue,.t-rose){background-color:rgba(250,204,21,.2); color:#FACC15}

@media (max-width:900px){
  .q-certs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab2{grid-template-columns:minmax(0,1fr); gap:28px}
}
@media (max-width:760px){
  .sp-sec{padding-block:52px}
  .sp-intro{padding-block:36px 44px}
  .sp-intro-grid{grid-template-columns:minmax(0,1fr); gap:26px}
  button.sp-portrait{width:112px; justify-self:start; border-radius:14px}
  button.sp-portrait .portrait-count{display:none}
  .pj-grid,.pj-cta{grid-template-columns:minmax(0,1fr)}
  .ab2-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .q-certs{grid-template-columns:minmax(0,1fr)}
  .sp-links{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; width:100%}
  .sp-link{justify-content:center; padding:9px 4px; font-size:.8rem; gap:5px}
  .sp-link svg{width:14px; height:14px}
}

/* project card: one-line problem and solution */
.pj-ps{margin:0; display:flex; flex-direction:column; gap:5px}
.pj-ps div{display:flex; gap:7px; align-items:baseline}
.pj-ps dt{flex:none; width:64px; font-size:.72rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--gold-ink)}
.pj-ps dd{margin:0; color:var(--ink); font-size:.94rem; line-height:1.45}
.pj-ps div + div dd{color:var(--muted)}
.pj-badge + img{display:block}
.sp-name .emo{font-size:.78em; display:inline-block; transform-origin:70% 70%}

/* work experience: three rows, the rest behind a button */
.q-more-list{border-top:1px solid var(--line)}
.q-more{margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:700; font-size:.88rem; cursor:pointer}
.q-more:hover{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg)}
.q-more[aria-expanded="true"] span{display:inline-block; transform:rotate(180deg)}
.q-more-list[hidden]{display:none}

/* cleaner single page: no rules between sections or rows, plain status line */
.sp .sp-sec{border-top:0}
.sp .sp-overview{border-top:0; padding-top:4px}
.sp .cv-item,.sp .q-more-list{border-top:0}
.sp .cv-item{padding-block:12px}
.sp .sp-status{background:none; border:0; padding:0}
.sp footer{border-top:0}
/* badge position: placed in each cover's empty space (--bx/--by set per card in index.html) */
.pj-cover{container-type:inline-size}
.pj-cover .pj-badge{left:var(--bx,auto); top:var(--by,14px); right:auto; transform:translate(var(--tx,-50%),-50%); white-space:nowrap; font-size:clamp(.56rem,2.2cqi,.74rem); padding:.45em 1em}
/* HelloPM watermark, bottom-right of program project covers */
.pj-mark{position:absolute; z-index:1; right:2.4%; bottom:3.2%; font-size:clamp(.42rem,1.5cqi,.62rem); font-weight:700; letter-spacing:.06em; color:rgba(30,27,75,.88); pointer-events:none; user-select:none}
.pj-mark--light{color:rgba(255,255,255,.96)}
.pj-mark--kural{right:auto; left:3.2%}
.pj-cover .pj-badge--sm{font-size:clamp(.4rem,1.7cqi,.64rem); padding:.4em .85em}

/* ---------- project hero: title, live prototype left, problem right ----------
   Fills the first screen, so the problem and the prototype are seen together. */
.ph-hero{min-height:calc(100svh - 61px); display:flex; padding-block:16px 28px;
  background:radial-gradient(900px 520px at 85% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%)}
.ph-hero > .wrap{width:100%; display:flex; flex-direction:column}
.ph-hero .back{margin-bottom:6px}
.ph-head{text-align:center}
.ph-head .kicker{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink)}
.ph-head h1{font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,4.4vw,3.2rem); line-height:1.02; letter-spacing:-.015em; margin-top:6px}
.ph-head .tagline{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:clamp(1rem,1.7vw,1.18rem); margin-top:6px}
.ph-grid{flex:1; display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:56px; align-items:center; margin-top:20px}

.ph-demo{display:flex; flex-direction:column; align-items:center}
.ph-device{width:100%; max-width:410px; height:clamp(500px,calc(100svh - 285px),760px); display:flex; flex-direction:column;
  border-radius:30px; background:#0f172a; padding:10px; box-shadow:0 30px 60px -26px rgba(15,23,42,.55)}
.ph-bar{display:flex; align-items:center; gap:6px; padding:4px 10px 10px; color:#94a3b8; font-size:.72rem}
.ph-bar span{width:9px; height:9px; border-radius:50%; background:#334155}
.ph-bar span:nth-child(1){background:#f87171}.ph-bar span:nth-child(2){background:#fbbf24}.ph-bar span:nth-child(3){background:#34d399}
.ph-bar em{font-style:normal; margin-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ph-device iframe{flex:1; width:100%; border:0; border-radius:22px; background:#14123a}
.ph-cap{margin-top:12px; font-size:.84rem; color:var(--muted); text-align:center}
.ph-cap a{font-weight:700; text-decoration:none}

.ph-info{display:flex; flex-direction:column; gap:12px; max-width:620px}
.ph-lbl{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.ph-lbl:not(:first-child){margin-top:6px}
.ph-problem{font-family:var(--serif); font-size:clamp(1.18rem,1.75vw,1.36rem); line-height:1.4; color:var(--ink); text-wrap:pretty}
.ph-solution{font-size:1.02rem; line-height:1.6; color:var(--muted)}
.ph-solution strong{color:var(--ink)}
.ph-hl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0}
.ph-hl div{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 13px 11px}
.ph-hl dt{font-family:var(--serif); font-weight:600; font-size:1.4rem; line-height:1.05; color:var(--bold-green)}
.ph-hl dd{margin:6px 0 0; font-size:.8rem; line-height:1.35; color:var(--muted)}
.ph-tools{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:4px}
.ph-tools .chip.tool-ico{padding:5px 11px 5px 8px; font-size:.78rem}
.ph-tools .chip.tool-ico svg{width:16px; height:16px}
.ph-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.ph-link{display:inline-flex; align-items:center; gap:7px; padding:10px 17px; border-radius:999px; border:1.5px solid var(--ink); color:var(--ink); font-weight:700; font-size:.88rem; text-decoration:none; transition:background .2s,color .2s}
.ph-link:first-child{background:var(--cta-bg); border-color:var(--cta-bg); color:var(--cta-ink)}
.ph-link:hover{background:var(--cta-bg); border-color:var(--cta-bg); color:var(--cta-ink)}

@media (max-width:900px){
  .ph-hero{min-height:0}
  .ph-grid{grid-template-columns:minmax(0,1fr); gap:30px}
  .ph-device{height:620px}
  .ph-hl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph-info{order:-1}
}

/* project hero, desktop web apps: a wider browser frame */
.ph-grid.ph-wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px}
.ph-wide .ph-problem{font-size:clamp(1.1rem,1.55vw,1.24rem)}
.ph-wide .ph-solution{font-size:.97rem}
.ph-wide .ph-hl dt{font-size:1.25rem}
.ph-wide .ph-hl div{padding:10px 12px}
.ph-wide .ph-device{max-width:none; border-radius:18px; padding:8px}
.ph-wide .ph-device iframe{border-radius:10px; background:#fff}
.ph-wide .ph-hl{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .ph-grid.ph-wide{grid-template-columns:minmax(0,1fr)} }

/* ---------- capabilities: collapsed cards that expand ---------- */
.cap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; align-items:start}
.cap-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .2s,box-shadow .2s}
.cap-card[open]{border-color:var(--deep-line); box-shadow:0 18px 40px -26px rgba(6,78,59,.4)}
.cap-card summary{list-style:none; cursor:pointer; padding:20px; display:flex; flex-direction:column; gap:10px; position:relative}
.cap-card summary::-webkit-details-marker{display:none}
.cap-card summary:focus-visible{outline:3px solid var(--deep); outline-offset:-3px; border-radius:16px}
.cap-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cap-card .cap-lbl{font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.cap-card .cap-state{font-size:.72rem; font-weight:700; padding:3px 11px; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.cap-h3{font-size:1.1rem; font-weight:800; letter-spacing:-.01em; color:var(--ink); line-height:1.2; padding-right:26px}
.cap-toggle{position:absolute; top:22px; right:18px; width:18px; height:18px; flex:none}
.cap-toggle::before,.cap-toggle::after{content:""; position:absolute; background:var(--deep); border-radius:2px}
.cap-toggle::before{top:8px; left:2px; width:14px; height:2px}
.cap-toggle::after{top:2px; left:8px; width:2px; height:14px; transition:transform .2s}
.cap-card[open] .cap-toggle::after{transform:scaleY(0)}
.cap-body{padding:0 20px 20px}
.cap-body > p{color:var(--muted); font-size:.95rem; line-height:1.55}
.cap-points{list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:9px}
.cap-points li{font-size:.9rem; color:var(--muted); line-height:1.5; padding-left:16px; position:relative}
.cap-points li::before{content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.cap-points strong{color:var(--ink); font-weight:700}
@media (max-width:860px){.cap-grid{grid-template-columns:1fr; gap:12px}}

/* ---------- qualifications: left/right expandable cards ---------- */
#qualifications .sp-head{margin-bottom:14px}
.q-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.q-grid + .q-card-wide{margin-top:16px}
.q-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:border-color .2s,box-shadow .2s}
.q-card[open]{border-color:var(--deep-line); box-shadow:0 18px 40px -26px rgba(6,78,59,.4)}
.q-card summary{list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px}
.q-card summary::-webkit-details-marker{display:none}
.q-card summary:focus-visible{outline:3px solid var(--deep); outline-offset:-3px; border-radius:16px}
.q-card-head{display:flex; flex-direction:column; gap:3px; min-width:0}
.q-card-t{font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.3rem; color:var(--ink); line-height:1.1}
.q-card-sub{font-size:.82rem; color:var(--muted); font-weight:600}
.q-card .cap-toggle{position:relative; top:auto; right:auto}
.q-card-body{padding:2px 20px 18px}
.q-card-body .cv-list{display:flex; flex-direction:column}
.q-card-body .q-certs{margin-top:4px}
@media (max-width:760px){.q-grid{grid-template-columns:1fr}}

/* ---------- intro live clock, top-right ---------- */
.sp-intro-grid{position:relative}
.sp-clock{position:absolute; top:0; right:0; z-index:1; display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.01em}
.sp-clock::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--deep); flex:none}
@media (max-width:760px){.sp-clock{font-size:.72rem; gap:5px}}

/* refinements */
.cap-head{flex-direction:column; align-items:flex-start; gap:8px}
.q-grid{align-items:start}
.q-card-body .cv-item.has-logo{grid-template-columns:60px 1fr; column-gap:14px; row-gap:2px; align-items:start; padding-block:14px}
.q-card-body .cv-item.has-logo .co-logo{grid-row:1 / span 2; width:60px; height:52px; align-self:center}
.q-card-body .cv-item.has-logo .l{grid-column:2; align-self:center}
.q-card-body .cv-item.has-logo .when{grid-column:2; grid-row:2; text-align:left; margin-top:1px; font-size:.82rem}

/* ---------- project card badges: gold, top-left ---------- */
.pj-badge{background:linear-gradient(90deg,#ffe58a,#f7c62f); color:#3d2e00; border:1px solid rgba(255,255,255,.5); box-shadow:0 6px 16px -8px rgba(150,115,0,.45)}

/* ---------- qualifications: icon + logo-preview summaries ---------- */
.q-card summary{flex-direction:column; align-items:stretch; gap:12px; padding:16px 20px}
.q-top{display:flex; align-items:center; gap:13px}
.q-ico{width:40px; height:40px; border-radius:12px; background:var(--surface-2); color:var(--deep); display:grid; place-items:center; flex:none}
.q-ico svg{width:21px; height:21px}
.q-top .q-card-head{flex:1; min-width:0; gap:2px}
.q-logos{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-left:53px}
.q-logos img{height:22px; width:auto; max-width:66px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px 9px; box-sizing:content-box}
.q-card[open] .q-logos{display:none}
@media (max-width:480px){.q-logos{gap:8px}.q-logos img{height:18px; max-width:52px; padding:5px 7px}}

/* ---------- How I work: icon rows ---------- */
.ab2-list li{counter-increment:none; display:flex; gap:14px; align-items:flex-start; padding:15px 0 15px 0; position:static}
.ab2-list li::before{content:none}
.ab2-ico{width:40px; height:40px; border-radius:12px; background:var(--gold-soft); color:var(--gold-ink); display:grid; place-items:center; flex:none}
.ab2-ico svg{width:20px; height:20px}
.ab2-txt{display:flex; flex-direction:column; gap:3px}
.ab2-t{font-weight:800; font-size:1rem; color:var(--ink); letter-spacing:-.005em}
.ab2-d{color:var(--muted); font-size:.95rem; line-height:1.55}

/* ---------- capabilities: roomier cards with icon + strength meter ---------- */
.cap-grid{gap:20px; margin-top:28px; align-items:start}
.cap-card summary{padding:24px; gap:22px; min-height:236px; justify-content:space-between}
.cap-top{display:flex; align-items:center; justify-content:space-between}
.cap-ico{width:44px; height:44px; border-radius:13px; background:var(--surface-2); color:var(--deep); display:grid; place-items:center; flex:none}
.cap-ico svg{width:23px; height:23px}
.cap-top .cap-toggle{position:relative; top:auto; right:auto}
.cap-mid{display:flex; flex-direction:column; gap:8px}
.cap-card .cap-lbl{font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.cap-h3{font-size:1.16rem; line-height:1.25; padding-right:0}
.cap-meter{display:flex; align-items:center; gap:11px}
.cap-dots{display:inline-flex; gap:5px; flex:none}
.cap-dots i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.cap-dots.lvl3 i:nth-child(-n+3),.cap-dots.lvl2 i:nth-child(-n+2),.cap-dots.lvl1 i:nth-child(-n+1){background:var(--accent)}
.cap-state-txt{font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.01em}
.cap-card[open] .cap-meter{display:none}
@media (max-width:860px){.cap-card summary{min-height:0}}
.cap-card[open] summary{min-height:0; justify-content:flex-start; gap:16px; padding-bottom:4px}
/* equal-height cards, roomier gap between the title and the bullets */
.cap-grid{align-items:stretch}
.cap-card{display:flex; flex-direction:column}
.cap-card summary{flex:none}
.cap-card[open] summary{flex:none; padding-bottom:12px}
.cap-card[open] .cap-body{flex:1}
.cap-h3{margin-bottom:6px}
.cap-points{margin-top:16px; gap:12px}

/* ---------- About: heading beside a full-height How I work ---------- */
.ab2{align-items:stretch}
.ab2-left{display:flex; flex-direction:column; gap:26px; min-width:0}
#about .sp-head{margin-bottom:0}
.ab2-how{display:flex; flex-direction:column}
.ab2-how .ab2-list{flex:1; justify-content:space-between}
.ab2-how .ab2-list li{padding-block:18px}
@media (max-width:900px){
  .ab2-left{gap:20px}
  .ab2-how .ab2-list{display:flex; justify-content:flex-start}
  .ab2-how .ab2-list li{padding-block:15px}
}

/* ---------- project hero: problem statement callout in the project's colours ---------- */
.ph-callout{--pc:#059669; --pc-bg:#ecfdf5; background:var(--pc-bg); border:1px solid color-mix(in srgb,var(--pc) 22%,transparent); border-left:5px solid var(--pc); border-radius:14px; padding:18px 22px 20px; display:flex; flex-direction:column; gap:8px}
.ph-callout .ph-lbl{color:var(--pc); margin:0}
.ph-callout .ph-problem{font-size:clamp(1.08rem,1.55vw,1.26rem); line-height:1.45; color:#14213d}
.ph-callout[data-proj="kittii"]{--pc:#1f8a7a; --pc-bg:#e7f6f3}
.ph-callout[data-proj="side-quest"]{--pc:#3730a3; --pc-bg:#eeedfb}
.ph-callout[data-proj="kural"]{--pc:#4f46e5; --pc-bg:#eef0ff}
.ph-callout[data-proj="lumi-cards"]{--pc:#1d4f91; --pc-bg:#e8f0fb}
.ph-callout[data-proj="hellofresh-retention"]{--pc:#4d8a14; --pc-bg:#eef6e3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ph-callout{background:color-mix(in srgb,var(--pc) 16%,var(--surface)); border-color:color-mix(in srgb,var(--pc) 40%,transparent)}
  :root:not([data-theme="light"]) .ph-callout .ph-lbl{color:color-mix(in srgb,var(--pc) 45%,#fff)}
  :root:not([data-theme="light"]) .ph-callout .ph-problem{color:var(--ink)}}
:root[data-theme="dark"] .ph-callout{background:color-mix(in srgb,var(--pc) 16%,var(--surface)); border-color:color-mix(in srgb,var(--pc) 40%,transparent)}
:root[data-theme="dark"] .ph-callout .ph-lbl{color:color-mix(in srgb,var(--pc) 45%,#fff)}
:root[data-theme="dark"] .ph-callout .ph-problem{color:var(--ink)}
.tr-src a{color:#6ee7b7; font-weight:700; font-style:normal; text-decoration:none}
.src-note{font-family:var(--serif); font-style:italic; font-size:.86rem; color:var(--muted,#5b6b80); margin:14px 0 0}
.src-note a{color:#1f8a7a; font-weight:700; font-style:normal; text-decoration:none}
.ph-disclaimer{margin:16px 0 0; font-size:.8rem; line-height:1.5; color:var(--muted); opacity:.85; max-width:52ch}
.cards.one{grid-template-columns:minmax(0,1fr); max-width:720px}

/* about: How I work sits at its natural height; proof tiles lead with the number */
.ab2{align-items:start}
.ab2-how .ab2-list{flex:none; justify-content:flex-start}
.ab2-how .ab2-list li{padding-block:16px}
.ab2-proof div{padding:16px 16px 14px; display:flex; flex-direction:column; gap:6px}
.ab2-proof dt{font-size:2.05rem; line-height:1; letter-spacing:-.01em}
.ab2-proof dd{margin:0; font-size:.74rem; line-height:1.35}

/* contact: booking card sized to its content */
.ct-feature{flex:none; padding:22px 24px 20px; gap:6px}
.ct-feature-ico{width:38px; height:38px; margin-bottom:4px}
.ct-feature-title{font-size:clamp(1.3rem,2.2vw,1.55rem)}
.ct-feature-cta{margin-top:6px; padding-top:0}
.ct-feature::after{width:180px; height:180px; right:-60px; bottom:-80px}
@media (min-width:821px){
  .ct-panel{display:grid; grid-template-rows:auto repeat(4,1fr); gap:12px}
  .ct-panel > .ct-pair{display:contents}
}
.ct-panel .ct-tile{align-items:center}

/* project cards: hook and value proposition */
.pj-hook{margin:0; color:var(--ink); font-size:.95rem; line-height:1.55}

/* hero overview: two short paragraphs */
.sp-overview{line-height:1.7; margin-bottom:2px} /* 2px + the 14px flex gap = 16px between paragraphs */
.sp .sp-overview--2, .sp-overview--2{margin:0; padding-top:0; border-top:0}

/* bottom CTA cards: faint oversized line-art watermark, bottom right */
.pj-cta-card{isolation:isolate; overflow:hidden}
.pj-cta-art{position:absolute; z-index:-1; right:-18px; bottom:-26px; width:190px; height:190px; color:rgba(5,150,105,.07); pointer-events:none; transition:color .25s, transform .4s}
.pj-cta-card:hover .pj-cta-art{color:rgba(5,150,105,.11); transform:translate(-4px,-4px)}
:root[data-theme="dark"] .pj-cta-art{color:rgba(52,211,153,.07)}
:root[data-theme="dark"] .pj-cta-card:hover .pj-cta-art{color:rgba(52,211,153,.11)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pj-cta-art{color:rgba(52,211,153,.07)}}
@media (max-width:560px){ .pj-cta-art{width:140px; height:140px; right:-14px; bottom:-18px} }

/* qualifications: toggle shows a minus when the accordion is open */
.q-card[open] .cap-toggle::after{transform:scaleY(0)}

/* qualifications: company and school logos sized for their 64px column
   (the 140px-column padding was leaving only a few pixels of image) */
:root .q-card-body .cv-item.has-logo{grid-template-columns:64px 1fr}
:root .q-card-body .cv-item.has-logo .co-logo{width:64px; height:48px; padding:6px 8px; box-sizing:border-box; object-fit:contain; object-position:center;
  background:#fff; border:1px solid var(--line); border-radius:10px}

/* about story: explicit leading and paragraph spacing */
.ab2-story > p{line-height:1.7}
.ab2-story > p:first-child, .ab2-story > p:nth-child(2){color:var(--ink)}

/* case study hero: wider container and more space between the two columns */
.ph-hero > .wrap{max-width:1200px}
.ph-grid{gap:88px}
.ph-grid.ph-wide{gap:72px}
@media (max-width:900px){ .ph-grid, .ph-grid.ph-wide{gap:30px} }

/* kittii hero: title block sits inside the left column, above the prototype;
   both columns start at the same top edge */
.ph-split{column-gap:88px; align-items:start; margin-top:28px}
.ph-split .ph-demo .ph-head{text-align:left; width:100%; max-width:410px; margin-bottom:20px}
.ph-split .ph-head .kicker{font-size:.66rem; letter-spacing:.06em}
.ph-split .ph-device{height:clamp(440px,calc(100svh - 400px),700px)}
@media (max-width:900px){
  .ph-split{row-gap:24px}
  .ph-split .ph-demo{display:contents}
  .ph-split .ph-demo .ph-head{order:-2; max-width:none; margin-bottom:0}
  .ph-split .ph-device{height:620px}
}

/* problem statement: regular weight and open leading */
.ph-callout .ph-problem{font-weight:400; line-height:1.65}
.ph-split .ph-demo{align-items:flex-start}
.ph-split .ph-demo .ph-cap{width:100%; max-width:410px; text-align:center}
@media (max-width:900px){ .ph-split .ph-demo{align-items:stretch} }

/* wide (desktop web app) case studies: title spans the whole frame */
.ph-split.ph-wide .ph-demo .ph-head, .ph-split.ph-wide .ph-demo .ph-cap{max-width:none}
.ph-split.ph-wide .ph-demo .ph-cap{text-align:left}
.ph-tools .chip-row-lbl{flex:0 0 100%}

/* kittii research: breathing room in the insight list and metric callouts */
.row-text ul.insight-list{gap:16px}
.row-text li.metric-li{list-style:none; margin-left:-20px; padding:2px 0}
.stat-row{display:flex; align-items:center; gap:16px; margin-top:6px}
.stat-num{flex:none; min-width:84px; font-family:var(--serif); font-weight:700; font-size:2.4rem; line-height:1; letter-spacing:-.01em; color:#059669}
.stat-cap{color:var(--muted)}
@media (max-width:520px){ .stat-num{min-width:72px; font-size:2rem} }

/* kittii market findings: callout intro, micro-headings, spacing */
.row-text p.intro-callout{background:rgba(5,150,105,.08); border-left:4px solid #059669; border-radius:0 12px 12px 0; padding:16px 20px; color:var(--ink)}
.row-text ul.insight-list{gap:20px}
.row-text ul.insight-list li > strong:first-child{color:#0F172A}
:root[data-theme="dark"] .row-text ul.insight-list li > strong:first-child{color:var(--ink)}
:root[data-theme="dark"] .row-text p.intro-callout{background:rgba(5,150,105,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .row-text ul.insight-list li > strong:first-child{color:var(--ink)}
  :root:not([data-theme="light"]) .row-text p.intro-callout{background:rgba(5,150,105,.16)}
}

/* kittii user flows: centred one-line intro above the diagrams */
.flow-intro{text-align:center; max-width:58ch; margin:0 auto 8px; font-size:clamp(1.1rem,1.9vw,1.3rem); line-height:1.5; color:var(--ink); text-wrap:balance}

/* kittii: chicken-and-egg findings as a bento grid of cards */
.trap-head{max-width:760px; margin:0 auto 28px; text-align:center; display:flex; flex-direction:column; gap:12px}
.trap-head .intro-callout{text-align:left; background:rgba(5,150,105,.08); border-left:4px solid #059669; border-radius:0 12px 12px 0; padding:16px 20px; color:var(--ink); margin:0}
.trap-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch}
.trap-grid .phone-shot{grid-column:1; grid-row:1 / span 4; align-self:center; margin:0}
.trap-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid #059669; border-radius:14px; padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px}
.trap-card h4{margin:0; font-size:1.08rem; line-height:1.25; color:#0F172A}
.trap-card p{margin:0; color:var(--muted); line-height:1.65}
.trap-card.trap-wide{grid-column:2 / span 2}
.trap-metric .stat-row{margin-top:2px}
.trap-close{max-width:760px; margin:28px auto 0; text-align:center; color:var(--muted); line-height:1.7}
:root[data-theme="dark"] .trap-card h4{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .trap-card h4{color:var(--ink)}}
@media (max-width:900px){
  .trap-grid{grid-template-columns:minmax(0,1fr)}
  .trap-grid .phone-shot{grid-column:auto; grid-row:auto; order:-1; max-width:260px; margin:0 auto}
  .trap-card.trap-wide{grid-column:auto}
}
.trap-head{max-width:none}
.trap-head h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.75rem); letter-spacing:-.01em; margin:0}
.trap-head .lede{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.02rem; line-height:1.6; margin:0}
.trap-head .intro-callout{max-width:none}

/* kittii business model: balanced cards, micro-stats, bolder targets */
.biz-card{padding-block:22px 24px; gap:8px}
.biz-grid{align-items:stretch}
.biz-signal{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.biz-signal-lbl{margin:0; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.biz-micro{display:flex; align-items:center; gap:12px; background:rgba(5,150,105,.08); border-radius:10px; padding:10px 12px}
.biz-micro b{flex:none; min-width:52px; font-family:var(--serif); font-weight:700; font-size:1.6rem; line-height:1; color:#059669}
.biz-micro span{font-size:.84rem; line-height:1.45; color:var(--muted)}
.biz-micro strong{color:var(--ink); font-weight:700}
.biz-target{background:#fff; border:1px solid color-mix(in srgb,#059669 28%,var(--line)); box-shadow:0 10px 26px -18px rgba(6,78,59,.5)}
.biz-target dt{font-weight:700; font-size:clamp(1.7rem,3.4vw,2.3rem); color:#064e3b}
.biz-target dd{font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem; color:var(--muted)}
:root[data-theme="dark"] .biz-target{background:var(--surface)}
:root[data-theme="dark"] .biz-target dt{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .biz-target{background:var(--surface)} :root:not([data-theme="light"]) .biz-target dt{color:#6ee7b7}}
:root[data-theme="dark"] .biz-micro b{color:#34d399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .biz-micro b{color:#34d399}}

/* kittii research: two chapters, competitor insights and survey validation */
.ins-block{max-width:1000px; margin:0 auto}
.ins-block + .ins-block{margin-top:clamp(48px,7vw,80px)}
.ins-head{text-align:center; display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.ins-eyebrow{margin:0; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.ins-head h3{margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.75rem); letter-spacing:-.01em}
.ins-head .lede{margin:0 auto; max-width:60ch; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.02rem; line-height:1.6}
.ins-block > .shot{max-width:760px; margin:0 auto 24px}
.ins-points{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.ins-point,.sv-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid #059669; border-radius:14px; padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px}
.ins-n{font-family:var(--serif); font-weight:700; font-size:.95rem; color:#059669; letter-spacing:.04em}
.ins-point h4,.sv-card h4{margin:0; font-size:1.02rem; line-height:1.25; color:#0F172A}
.ins-point p,.sv-card p{margin:0; color:var(--muted); line-height:1.65; font-size:.95rem}
.sv-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.sv-card{padding:22px 24px 24px}
.sv-metric .stat-num{min-width:0; font-size:3rem}
.ins-block .src-note{margin:22px auto 0; max-width:none; text-align:center}
:root[data-theme="dark"] .ins-point h4,:root[data-theme="dark"] .sv-card h4{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ins-point h4,:root:not([data-theme="light"]) .sv-card h4{color:var(--ink)}}
@media (max-width:900px){.ins-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ins-points,.sv-grid{grid-template-columns:minmax(0,1fr)}}

/* kittii business model: B2C tiers and B2B venue plans */
.biz-grid{display:none}
.biz-sub-block{margin-top:30px}
.biz-sub-head{text-align:center; margin-bottom:18px; display:flex; flex-direction:column; gap:6px}
.biz-sub-eyebrow{margin:0; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.biz-sub-head h4{margin:0; font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink)}
.biz-sub-head p:last-child:not(.biz-sub-eyebrow){margin:0 auto; max-width:58ch; color:var(--muted); line-height:1.55; font-size:.95rem}
.tier-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.tier{--tc:#059669; background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--tc); border-radius:14px; padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px}
.tier-t2{--tc:#0ea5e9}.tier-t3{--tc:#8b5cf6}.tier-t4{--tc:#f59e0b}
.tier-n{margin:0; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tc)}
.tier h5{margin:0; font-size:1.12rem; font-weight:800; color:#0F172A}
.tier-price{margin:4px 0 2px; font-family:var(--serif); font-weight:700; font-size:2.3rem; line-height:1; letter-spacing:-.02em; color:var(--tc)}
.tier-items{margin:0; color:var(--muted); font-size:.9rem; line-height:1.5; min-height:4.5em}
.tier-feat{margin:8px 0 0; padding-top:10px; border-top:1px dashed var(--line); font-style:italic; font-weight:600; font-size:.9rem; color:var(--ink)}
.tier-win{margin:0; font-size:.82rem; font-weight:700; color:#b45309}
.tier-note{margin:16px auto 0; max-width:70ch; text-align:center; font-size:.9rem; line-height:1.55; color:var(--muted)}
.tier-note strong{color:#b45309}
.venue-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.venue{background:var(--surface); border:1px solid var(--line); border-top:4px solid #059669; border-radius:14px; padding:20px 20px 22px; text-align:center; display:flex; flex-direction:column; gap:6px}
.venue h5{margin:0; font-size:1.05rem; font-weight:800; color:#0F172A}
.venue-price{margin:4px 0 0; font-family:var(--serif); font-weight:700; font-size:2.4rem; line-height:1; letter-spacing:-.02em; color:#059669}
.venue-price small{font-family:var(--sans); font-size:.9rem; font-weight:600; color:var(--muted); margin-left:4px; letter-spacing:0}
.venue-cap{margin:0; color:var(--muted); font-size:.92rem}
.venue-unit{margin:10px auto 0; background:rgba(5,150,105,.1); border-radius:999px; padding:6px 14px; font-size:.84rem; color:var(--muted)}
.venue-unit b{color:#047857; font-size:1rem}
:root[data-theme="dark"] .tier h5,:root[data-theme="dark"] .venue h5{color:var(--ink)}
:root[data-theme="dark"] .tier-win,:root[data-theme="dark"] .tier-note strong{color:#fbbf24}
:root[data-theme="dark"] .venue-price{color:#34d399}
:root[data-theme="dark"] .venue-unit b{color:#6ee7b7}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tier h5,:root:not([data-theme="light"]) .venue h5{color:var(--ink)}
  :root:not([data-theme="light"]) .tier-win,:root:not([data-theme="light"]) .tier-note strong{color:#fbbf24}
  :root:not([data-theme="light"]) .venue-price{color:#34d399}
  :root:not([data-theme="light"]) .venue-unit b{color:#6ee7b7}
}
@media (max-width:900px){.tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tier-grid,.venue-grid{grid-template-columns:minmax(0,1fr)} .tier-items{min-height:0}}

/* kittii: GTM and contest strategy feature card */
.board-note.gtm-card{background:linear-gradient(135deg,rgba(5,150,105,.10),rgba(5,150,105,.02) 60%,var(--surface)); border:1.5px solid #059669; border-left-width:1.5px; border-radius:20px; margin-top:44px; box-shadow:0 18px 40px -28px rgba(6,78,59,.55)}
.board-note.gtm-card:hover{box-shadow:0 22px 46px -24px rgba(6,78,59,.6); transform:translateY(-2px)}
.gtm-card summary{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:22px; padding:28px 30px; cursor:pointer}
.gtm-card summary::before,.gtm-card summary::after{content:none; display:none}
.gtm-ico{width:56px; height:56px; border-radius:16px; background:#059669; color:#fff; display:grid; place-items:center; box-shadow:0 10px 20px -10px rgba(5,150,105,.8)}
.gtm-ico svg{width:28px; height:28px}
.gtm-copy{display:flex; flex-direction:column; gap:6px; min-width:0}
.gtm-kicker{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
.gtm-title{font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.25; letter-spacing:-.01em; color:#0F172A}
.gtm-sub{font-size:.95rem; line-height:1.55; color:var(--muted); max-width:62ch}
.gtm-btn{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px; background:#059669; color:#fff; font-weight:700; font-size:.92rem; white-space:nowrap; box-shadow:0 10px 22px -12px rgba(5,150,105,.9); transition:background .2s, transform .2s, box-shadow .2s}
.gtm-arrow{display:inline-block; transition:transform .2s}
.gtm-btn-close{display:none}
.gtm-card[open] .gtm-btn-open{display:none}
.gtm-card[open] .gtm-btn-close{display:inline}
.gtm-card[open] .gtm-arrow{transform:rotate(90deg)}
.gtm-card summary:hover .gtm-btn{background:#047857; transform:translateY(-1px); box-shadow:0 14px 26px -12px rgba(5,150,105,.95)}
.gtm-card summary:hover .gtm-arrow{transform:translateX(4px)}
.gtm-card[open] summary:hover .gtm-arrow{transform:rotate(90deg)}
.gtm-card summary:focus-visible{outline:3px solid #059669; outline-offset:-3px; border-radius:20px}
:root[data-theme="dark"] .gtm-title{color:var(--ink)}
:root[data-theme="dark"] .gtm-kicker{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gtm-title{color:var(--ink)} :root:not([data-theme="light"]) .gtm-kicker{color:#6ee7b7}}
@media (max-width:760px){
  .gtm-card summary{grid-template-columns:auto minmax(0,1fr); padding:22px 20px; gap:16px}
  .gtm-btn{grid-column:1 / -1; justify-content:center}
  .gtm-ico{width:48px; height:48px}
}
.gtm-sub{font-weight:400}

/* kittii solution: confident MVP intro that leads into the screens */
.mvp-intro{text-align:center; max-width:64ch; margin:0 auto 34px; font-size:clamp(1.05rem,1.8vw,1.22rem); line-height:1.7; color:var(--ink); text-wrap:balance}
.mvp-intro + .gist-lbl{margin-top:0}

/* kittii MVP section: lighter list, whiteboard peek, balanced rows */
.row-text ul.how-list{gap:14px}
.row-text ul.how-list li > strong:first-child{color:#0F172A}
.ph-none{display:none}
.band .wrap > .row:has(.traction){align-items:start}
.peek{margin:clamp(40px,6vw,60px) 0 0; background:linear-gradient(135deg,rgba(5,150,105,.08),rgba(5,150,105,.02) 70%,var(--surface)); border:1px solid color-mix(in srgb,#059669 30%,var(--line)); border-radius:18px; padding:22px 24px 20px}
.peek-head{text-align:center; margin-bottom:16px}
.peek-eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
.peek-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.peek-grid figure{margin:0; display:flex; flex-direction:column; gap:8px}
.peek-grid img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid var(--line); cursor:zoom-in; transition:transform .25s, box-shadow .25s}
.peek-grid img:hover{transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(6,78,59,.6)}
.peek-grid figcaption{text-align:center; font-size:.84rem; font-weight:600; color:var(--muted)}
.peek-cap{margin:16px auto 0; max-width:64ch; text-align:center; font-size:.95rem; line-height:1.6; color:var(--muted)}
.band .wrap > .row.flip{margin-top:clamp(40px,6vw,60px); align-items:center}
:root[data-theme="dark"] .row-text ul.how-list li > strong:first-child{color:var(--ink)}
:root[data-theme="dark"] .peek-eyebrow{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row-text ul.how-list li > strong:first-child{color:var(--ink)} :root:not([data-theme="light"]) .peek-eyebrow{color:#6ee7b7}}
@media (max-width:760px){.peek-grid{grid-template-columns:minmax(0,1fr)}}

/* gtm card inside the narrower role section: button drops under the copy */
.row-wide .gtm-card{margin-top:34px}
.row-wide .gtm-card summary{grid-template-columns:auto minmax(0,1fr); padding:24px 26px; gap:18px 20px}
.row-wide .gtm-card .gtm-btn{grid-column:1 / -1; justify-self:start}

/* kittii: sticky case study index with persistent back control */
:root{--nav-h:61px; --bar-h:54px}
.cs-index{position:sticky; top:var(--nav-h); z-index:30; background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.cs-index-in{max-width:1200px; margin:0 auto; padding:9px max(20px,env(safe-area-inset-left,0px)); display:flex; align-items:center; gap:14px}
.cs-back{flex:none; display:inline-flex; align-items:center; gap:4px; padding:8px 14px 8px 12px; border-radius:999px; font-weight:700; font-size:.86rem; color:var(--ink); text-decoration:none; border:1px solid var(--line); background:var(--surface); transition:background .2s,color .2s,border-color .2s}
.cs-back:hover{background:#059669; color:#fff; border-color:#059669}
.cs-pills{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; flex:1; min-width:0; padding:2px 0}
.cs-pills::-webkit-scrollbar{display:none}
.cs-pills a{flex:none; padding:7px 14px; border-radius:999px; font-weight:600; font-size:.86rem; color:var(--muted); text-decoration:none; border:1px solid transparent; transition:background .2s,color .2s,border-color .2s; white-space:nowrap}
.cs-pills a:hover{color:var(--ink); background:rgba(5,150,105,.08)}
.cs-pills a.is-active{background:#059669; color:#fff; border-color:#059669}
#gtm,#discovery,#insights,#business-model,#solution,#mvp{scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 12px)}
:root[data-theme="dark"] .cs-pills a.is-active{background:#059669; color:#fff}
@media (max-width:560px){.cs-back-t{display:none} .cs-back{padding:8px 12px} .cs-index-in{gap:10px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* side quest research: structured cards, pull-quote and stat hierarchy */
.ev-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid #059669; border-radius:16px; padding:26px 28px 28px; display:flex; flex-direction:column; gap:14px; box-shadow:0 14px 34px -26px rgba(6,78,59,.45)}
.ev-card h3{margin:0}
.ev-card p{margin:0; line-height:1.7}
.ev-eyebrow{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
.ev-key{background:rgba(5,150,105,.08); border-left:4px solid #059669; border-radius:0 12px 12px 0; padding:14px 18px; color:var(--ink)}
.ev-key strong{color:#0F172A}
.ev-quote{margin:0; background:linear-gradient(135deg,rgba(5,150,105,.12),rgba(5,150,105,.04)); border-left:4px solid #059669; border-radius:0 14px 14px 0; padding:18px 22px; font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(1.1rem,1.9vw,1.3rem); line-height:1.5; color:#0F172A}
.ev-stats{display:flex; align-items:stretch; gap:12px}
.ev-stat{flex:1; background:rgba(5,150,105,.1); border:1px solid color-mix(in srgb,#059669 30%,var(--line)); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px}
.ev-stat b{font-family:var(--serif); font-weight:700; font-size:2.6rem; line-height:1; letter-spacing:-.02em; color:#059669}
.ev-stat span{font-size:.86rem; font-weight:600; color:var(--muted)}
.ev-stat-low{background:var(--surface-2,#f3f4f6); border-color:var(--line)}
.ev-stat-low b{color:var(--muted); font-size:2.1rem; align-self:flex-start; margin-top:auto}
.ev-vs{align-self:center; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.evidence + .evidence{margin-top:clamp(28px,4vw,44px)}
:root[data-theme="dark"] .ev-key strong,:root[data-theme="dark"] .ev-quote{color:var(--ink)}
:root[data-theme="dark"] .ev-eyebrow{color:#6ee7b7}
:root[data-theme="dark"] .ev-stat b{color:#34d399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev-key strong,:root:not([data-theme="light"]) .ev-quote{color:var(--ink)} :root:not([data-theme="light"]) .ev-eyebrow{color:#6ee7b7} :root:not([data-theme="light"]) .ev-stat b{color:#34d399}}
@media (max-width:620px){.ev-stats{flex-direction:column} .ev-vs{align-self:flex-start}}
@media (max-width:700px){.evidence .shot{flex:none; width:100%}}

/* side quest audit: scannable findings and a framed comparison card */
.row-text ul.audit-list{gap:16px}
.row-text ul.audit-list li > strong:first-child{color:#0F172A}
.cmp-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid #059669; border-radius:16px; padding:22px 22px 14px; box-shadow:0 14px 34px -26px rgba(6,78,59,.45); align-self:center}
.cmp-card .cmp-eyebrow{margin:0 0 6px; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
.cmp-card .cmp{min-width:0}
.cmp-card .cmp thead th{font-size:.86rem; vertical-align:bottom}
.cmp-card .cmp th:last-child,.cmp-card .cmp td:last-child{background:rgba(5,150,105,.08)}
.cmp-card .cmp tbody tr:last-child td{border-bottom:0}
:root[data-theme="dark"] .row-text ul.audit-list li > strong:first-child{color:var(--ink)}
:root[data-theme="dark"] .cmp-card .cmp-eyebrow{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .row-text ul.audit-list li > strong:first-child{color:var(--ink)} :root:not([data-theme="light"]) .cmp-card .cmp-eyebrow{color:#6ee7b7}}

.ev-card ul.arch-list{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:12px; color:var(--muted); line-height:1.65}
.ev-card ul.arch-list li > strong{color:#0F172A}
.ev-card > p > strong:first-child{color:#0F172A}
:root[data-theme="dark"] .ev-card ul.arch-list li > strong,:root[data-theme="dark"] .ev-card > p > strong:first-child{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev-card ul.arch-list li > strong,:root:not([data-theme="light"]) .ev-card > p > strong:first-child{color:var(--ink)}}

/* side quest pilot: stat tiles, defect callouts, award card */
.pl-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.pl-stat{background:rgba(5,150,105,.1); border:1px solid color-mix(in srgb,#059669 30%,var(--line)); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:4px}
.pl-stat b{font-family:var(--serif); font-weight:700; font-size:2rem; line-height:1; letter-spacing:-.01em; color:#059669}
.pl-stat span{font-size:.84rem; font-weight:600; line-height:1.35; color:var(--muted)}
.pl-stat-low{background:var(--surface-2,#f3f4f6); border-color:var(--line)}
.pl-stat-low b{color:var(--muted)}
.ev-card > p.ev-key + p.ev-key{margin-top:0}
.evidence.ev-award{background:linear-gradient(135deg,rgba(250,204,21,.18),rgba(250,204,21,.05) 60%,var(--surface)); border:1.5px solid #e0b100; border-radius:22px; padding:28px; box-shadow:0 22px 46px -30px rgba(161,120,0,.6); margin-top:clamp(32px,5vw,56px); gap:30px}
.ev-award .shot{flex:0 1 300px}
.ev-award .ev-text{max-width:none; display:flex; flex-direction:column; gap:10px; color:var(--ink)}
.aw-ico{width:56px; height:56px; border-radius:16px; background:#FACC15; color:#3d2e00; display:grid; place-items:center; box-shadow:0 10px 20px -10px rgba(161,120,0,.8)}
.aw-ico svg{width:30px; height:30px}
.aw-kicker{margin:0 !important; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8a6500}
.ev-award .ev-text h3{font-size:clamp(1.3rem,2.6vw,1.75rem); line-height:1.2; margin:0}
.ev-award .ev-text p{font-size:1.02rem; line-height:1.65; color:var(--muted); margin:0}
:root[data-theme="dark"] .pl-stat b{color:#34d399}
:root[data-theme="dark"] .aw-kicker{color:#fde68a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pl-stat b{color:#34d399} :root:not([data-theme="light"]) .aw-kicker{color:#fde68a}}
@media (max-width:700px){.evidence.ev-award{padding:20px} .ev-award .shot{flex:none; width:100%; max-width:320px; margin:0 auto}}

/* side quest reflection: priorities and next project card */
.prio-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.prio-list li{display:flex; align-items:flex-start; gap:12px; line-height:1.6; color:var(--muted)}
.prio-list li strong{color:#0F172A}
.prio-n{flex:none; width:28px; height:28px; border-radius:50%; background:#059669; color:#fff; font-weight:800; font-size:.85rem; display:grid; place-items:center; margin-top:1px}
.next-card{display:flex; align-items:center; justify-content:space-between; gap:28px; background:linear-gradient(135deg,rgba(5,150,105,.14),rgba(5,150,105,.04) 70%,var(--surface)); border:1.5px solid #059669; border-radius:20px; padding:30px 32px; box-shadow:0 18px 40px -28px rgba(6,78,59,.55)}
.nx-kicker{margin:0 0 6px; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
.nx-text h3{margin:0 0 8px; font-family:var(--serif); font-weight:700; font-size:clamp(1.4rem,2.8vw,1.9rem); line-height:1.15; color:#0F172A}
.nx-text p:last-child{margin:0; max-width:56ch; color:var(--muted); line-height:1.6}
.nx-btn{flex:none; display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:999px; background:#059669; color:#fff; font-weight:700; font-size:1rem; text-decoration:none; box-shadow:0 12px 24px -12px rgba(5,150,105,.9); transition:background .2s, transform .2s, box-shadow .2s}
.nx-btn span{transition:transform .2s}
.nx-btn:hover{background:#047857; transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(5,150,105,.95); color:#fff}
.nx-btn:hover span{transform:translateX(4px)}
:root[data-theme="dark"] .prio-list li strong,:root[data-theme="dark"] .nx-text h3{color:var(--ink)}
:root[data-theme="dark"] .nx-kicker{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .prio-list li strong,:root:not([data-theme="light"]) .nx-text h3{color:var(--ink)} :root:not([data-theme="light"]) .nx-kicker{color:#6ee7b7}}
@media (max-width:760px){.next-card{flex-direction:column; align-items:flex-start; padding:24px 22px} .nx-btn{width:100%; justify-content:center}}

#audit,#architecture,#pilot,#reflection{scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 12px)}

/* side quest: research cards side by side, balanced origin story, steady rhythm */
.ev-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch}
.ev-grid .ev-card{height:100%}
.origin-row{align-items:center; gap:clamp(32px,5vw,56px)}
.origin-row .row-text{gap:16px}
.origin-row .row-text h3 + p{margin-top:0}
.origin-row .shot{align-self:center}
.ev-card{gap:16px}
.ev-card .pl-stats{margin:2px 0}
.band .wrap > .ev-grid{margin-top:clamp(28px,4vw,40px)}
@media (max-width:860px){.ev-grid{grid-template-columns:minmax(0,1fr)}}
.ev-grid .ev-card h3{font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,2.2vw,1.45rem); letter-spacing:-.01em; color:var(--ink)}

/* side quest hero: prominent demo notice above the phone */
.ph-notice{display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; max-width:410px; margin:0 0 12px; padding:10px 12px; background:rgba(250,204,21,.18); border:1px solid color-mix(in srgb,#e0b100 55%,transparent); border-radius:14px}
.ph-notice-ico{flex:none; width:30px; height:30px; border-radius:50%; background:#FACC15; color:#3d2e00; display:grid; place-items:center}
.ph-notice-ico svg{width:16px; height:16px}
.ph-notice-txt{flex:1 1 150px; min-width:0; font-size:.84rem; line-height:1.3; color:#3d2e00}
.ph-notice-txt strong{font-weight:800}
.ph-notice-link{flex:none; margin-left:auto; padding:7px 13px; border-radius:999px; background:#0F172A; color:#fff; font-weight:700; font-size:.8rem; text-decoration:none; white-space:nowrap; transition:background .2s, transform .2s}
.ph-notice-link span{display:inline-block; transition:transform .2s}
.ph-notice-link:hover{background:#059669; color:#fff; transform:translateY(-1px)}
.ph-notice-link:hover span{transform:translateX(3px)}
.ph-split .ph-demo:has(.ph-notice) .ph-device{height:clamp(460px,calc(100svh - 440px),700px)}
:root[data-theme="dark"] .ph-notice-txt{color:#fde68a}
:root[data-theme="dark"] .ph-notice-link{background:#FACC15; color:#3d2e00}
:root[data-theme="dark"] .ph-notice-link:hover{background:#fde68a; color:#3d2e00}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ph-notice-txt{color:#fde68a} :root:not([data-theme="light"]) .ph-notice-link{background:#FACC15; color:#3d2e00}}
@media (max-width:900px){.ph-split .ph-demo:has(.ph-notice) .ph-device{height:620px} .ph-notice{max-width:none}}

/* case study pages: site header hands the top edge to the index bar once past the hero */
.nav{transition:transform .3s ease, visibility 0s linear 0s}
.cs-index{transition:top .3s ease, box-shadow .3s ease}
html.cs-collapsed .nav{transform:translateY(-100%); visibility:hidden; transition:transform .3s ease, visibility 0s linear .3s}
html.cs-collapsed .cs-index{top:0; box-shadow:0 8px 22px -16px rgba(15,23,42,.45)}
html.cs-collapsed #gtm,html.cs-collapsed #discovery,html.cs-collapsed #insights,html.cs-collapsed #business-model,html.cs-collapsed #solution,html.cs-collapsed #mvp,
html.cs-collapsed #audit,html.cs-collapsed #architecture,html.cs-collapsed #pilot,html.cs-collapsed #reflection{scroll-margin-top:calc(var(--bar-h) + 12px)}
@media (prefers-reduced-motion:reduce){.nav,.cs-index,html.cs-collapsed .nav{transition:none}}

.ph-solution{line-height:1.7; text-wrap:pretty}

/* side quest hero subtitle: reads as the product definition under the problem card */
.ph-solution.ph-subtitle{font-size:1.1rem; font-weight:500; line-height:1.65; color:var(--ink); max-width:58ch}

/* side quest research: flat layout, one card layer (the stat tiles), plain text blocks */
.ev-grid{gap:clamp(32px,5vw,64px)}
.ev-grid .ev-card{background:none; border:0; border-top:3px solid #059669; border-radius:0; box-shadow:none; padding:20px 0 0; height:auto}
.ev-grid .pl-stats{gap:12px}
.ev-grid .pl-stat{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.ev-grid .pl-stat b{color:#059669}
.ev-grid .ev-key{background:none; border:0; border-radius:0; padding:0; color:var(--muted); line-height:1.7}
.ev-grid .ev-key strong{display:block; margin-bottom:2px; font-size:1.02rem; color:#0F172A}
.ev-grid .ev-quote{background:none; border-left:3px solid #059669; border-radius:0; padding:2px 0 2px 18px}
:root[data-theme="dark"] .ev-grid .ev-key strong{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev-grid .ev-key strong{color:var(--ink)}}

/* side quest architecture and Quest Log: no outer cards, text sits beside its mockup; callouts stay single-layer */
#architecture .ev-card{background:none; border:0; border-radius:0; box-shadow:none; padding:0; gap:14px}
#architecture .evidence{gap:clamp(32px,5vw,64px); align-items:center}
#architecture .evidence + .evidence{margin-top:clamp(48px,7vw,80px)}
#architecture .ev-card .ev-key{background:rgba(5,150,105,.08); border-left:4px solid #059669; border-radius:0 12px 12px 0; padding:14px 18px; margin:4px 0 0}

/* side quest research: single narrative column, read top to bottom */
.ev-grid{grid-template-columns:minmax(0,1fr); max-width:760px; margin-inline:auto; gap:clamp(56px,8vw,88px)}
.ev-grid .ev-card{gap:18px; padding-top:28px}
.ev-grid .ev-card h3{font-size:clamp(1.3rem,2.6vw,1.65rem)}
.ev-grid .ev-card > p{font-size:1.04rem; line-height:1.75}
.ev-grid .pl-stat{padding:18px 20px}
.ev-grid .pl-stat b{font-size:2.3rem}
.ev-grid .ev-key{font-size:1.04rem}
.ev-grid .ev-quote{font-size:clamp(1.2rem,2.2vw,1.45rem); padding-block:4px}
.ev-grid .ev-stat b{font-size:3rem}
.ev-grid .ev-stat-low b{font-size:2.4rem}

/* portrait phone frame for vertical mobile screenshots */
.evidence .shot.shot-phone{flex:0 1 320px; border:0; box-shadow:none; background:none; border-radius:0; overflow:visible; margin-inline:auto}
.evidence .shot.shot-phone:has(img){border:0; box-shadow:none}
.phone-frame{background:#0b0c22; padding:10px; border-radius:46px; box-shadow:0 30px 60px -28px rgba(15,23,42,.6), 0 0 0 1.5px #2b2d52 inset}
.phone-frame img{display:block; width:100%; height:auto; aspect-ratio:780/1688; object-fit:contain; border-radius:36px}
@media (max-width:700px){.evidence .shot.shot-phone{flex:none; width:100%; max-width:300px}}

/* side quest pilot: single narrative column, flat blocks, image closes each block */
.pilot-stack .ev-card .shot{margin-top:10px; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 8px 30px -14px rgba(0,0,0,.25)}
.pilot-stack .ev-card .shot img{display:block; width:100%; height:auto}
.pilot-stack .ev-card > p:not(.ev-eyebrow){margin:0}
/* recognition: medium callout banner, about 80% of the column */
.pilot-stack .ev-recognition{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:22px; width:80%; max-width:608px; margin-top:0; padding:24px 26px; background:linear-gradient(135deg,rgba(250,204,21,.2),rgba(250,204,21,.05) 70%); border:1.5px solid color-mix(in srgb,#e0b100 60%,var(--line)); border-radius:20px; box-shadow:0 22px 44px -30px rgba(161,120,0,.55)}
.pilot-stack .ev-recognition .aw-ico{width:52px; height:52px; border-radius:15px; box-shadow:0 10px 20px -12px rgba(161,120,0,.8)}
.pilot-stack .ev-recognition .aw-ico svg{width:28px; height:28px}
.pilot-stack .ev-recognition .rec-body{display:flex; flex-direction:column; gap:6px; min-width:0}
.pilot-stack .ev-recognition .aw-kicker{font-size:.72rem}
.pilot-stack .ev-recognition h3{font-size:1.24rem; line-height:1.25; margin:0}
.pilot-stack .ev-recognition p:not(.aw-kicker){font-size:.95rem; line-height:1.6; margin:0}
.pilot-stack .ev-recognition .shot{width:150px; margin:0; border-radius:12px; box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
@media (max-width:760px){.pilot-stack .ev-recognition{width:100%; max-width:none}}
@media (max-width:560px){.pilot-stack .ev-recognition{grid-template-columns:auto minmax(0,1fr); gap:16px; padding:20px 18px} .pilot-stack .ev-recognition .shot{grid-column:1 / -1; width:100%; max-width:260px}}

/* hero jump link to the recognition banner */
.ph-link.ph-link-award{background:rgba(250,204,21,.18); border-color:#e0b100}
.ph-link.ph-link-award:hover{background:#FACC15; border-color:#FACC15; color:#3d2e00}
#recognition{scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 12px)}
html.cs-collapsed #recognition{scroll-margin-top:calc(var(--bar-h) + 12px)}

/* side quest reflection: roadmap reads as one column, graphic summarises before the detail */
.pilot-stack .prio-list{gap:18px}
.pilot-stack .prio-list li{font-size:1.04rem; line-height:1.7; gap:14px}
.pilot-stack .prio-list li > div{min-width:0}
.pilot-stack .shot + .prio-list{margin-top:12px}
.pilot-stack .prio-list + .ev-key{margin-top:8px}

/* side quest pilot: direct user quotes as native callout cards */
.pilot-stack .pilot-quote{margin:-4px 0 4px; padding:20px 24px; background:var(--surface); border:1px solid var(--line); border-left:4px solid #059669; border-radius:4px 16px 16px 4px; box-shadow:0 14px 30px -24px rgba(15,23,42,.45)}
.pilot-stack .pilot-quote blockquote{margin:0; font-family:var(--serif); font-size:clamp(1.12rem,2vw,1.28rem); font-weight:500; line-height:1.55; letter-spacing:-.005em; color:var(--ink)}
.pilot-stack .pilot-quote figcaption{margin-top:12px; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.pilot-stack .pilot-quote .pq-note{margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--line); font-size:.92rem; line-height:1.6; color:var(--muted)}
.pilot-stack .pilot-quote .pq-note strong{color:#047857; font-weight:800}
:root[data-theme="dark"] .pilot-stack .pilot-quote .pq-note strong{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pilot-stack .pilot-quote .pq-note strong{color:#6ee7b7}}

/* pilot feedback: quote card is the evidence, headed by a short finding title */
.pilot-stack .pq-head{margin:0; font-family:var(--sans); font-size:1.08rem; font-weight:700; line-height:1.3; color:var(--ink)}
.pilot-stack .pq-head + .pilot-quote{margin-top:-6px}

/* kural case study: index anchors, stacked stat rows, single-column resources */
#problem,#research,#demo,#how-it-works,#competitors,#success{scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 12px)}
html.cs-collapsed #problem,html.cs-collapsed #research,html.cs-collapsed #demo,html.cs-collapsed #how-it-works,html.cs-collapsed #competitors,html.cs-collapsed #success{scroll-margin-top:calc(var(--bar-h) + 12px)}
.pl-stats.pl-stats-rows{grid-template-columns:minmax(0,1fr); gap:12px}
.ev-grid .pl-stats-rows .pl-stat{flex-direction:row; align-items:center; gap:20px; padding:16px 20px}
.ev-grid .pl-stats-rows .pl-stat b{flex:none; min-width:84px; font-size:2.1rem}
.pilot-stack .ev-card .cmp-wrap{margin-top:6px}
.pilot-stack .ev-card .ev-key a{color:inherit; text-decoration:underline; text-underline-offset:3px}
[data-page="kural"] .xb{grid-template-columns:minmax(0,1fr); max-width:760px; margin-inline:auto}
[data-page="kural"] .sec-head{max-width:760px; margin-inline:auto}
@media (max-width:520px){.ev-grid .pl-stats-rows .pl-stat{gap:14px; padding:14px 16px} .ev-grid .pl-stats-rows .pl-stat b{min-width:66px; font-size:1.8rem}}
.ev-grid .pl-stats-rows .pl-stat span{font-size:.96rem; font-weight:600; line-height:1.4}

/* kural: big-number stat cards */
.k-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:2px 0}
.k-cards.k-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-card{display:flex; flex-direction:column; gap:8px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 20px 20px; box-shadow:0 14px 30px -26px rgba(15,23,42,.4)}
.k-card .k-num{font-family:var(--serif); font-weight:700; font-size:clamp(2.5rem,5.4vw,3.3rem); line-height:1; letter-spacing:-.02em; color:#059669}
.k-card .k-src{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
.k-card h4{margin:2px 0 0; font-family:var(--sans); font-size:1.02rem; font-weight:700; line-height:1.3; color:var(--ink)}
.k-card p{margin:0; font-size:.9rem; line-height:1.55; color:var(--muted)}
.k-card.k-fact p{font-size:1rem; font-weight:600; line-height:1.4; color:var(--ink)}
:root[data-theme="dark"] .k-card .k-num{color:#34d399}
:root[data-theme="dark"] .k-card .k-src{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .k-card .k-num{color:#34d399} :root:not([data-theme="light"]) .k-card .k-src{color:#6ee7b7}}
@media (max-width:700px){.k-cards{grid-template-columns:minmax(0,1fr)} .k-cards.k-cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.k-cards.k-cards-2{grid-template-columns:minmax(0,1fr)}}

/* kural: framed previews */
.k-figure{margin:6px 0 0; display:flex; flex-direction:column; gap:10px}
.k-figure figcaption{font-size:.84rem; color:var(--muted)}
.kd{width:10px; height:10px; border-radius:50%; flex:none}
.kd-r{background:#f2575d} .kd-y{background:#f5b82e} .kd-g{background:#3cc98c}
.k-frame{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:0 22px 44px -30px rgba(15,23,42,.55)}
.k-frame-bar{display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2,var(--surface))}
.k-frame-bar em{margin-left:10px; font-style:normal; font-size:.76rem; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px 12px}
.pilot-stack .k-frame .shot{margin:0; border:0; border-radius:0; box-shadow:none}
.pilot-stack .k-frame .shot img{display:block; width:100%; height:auto}

/* kural: composer in three clickable states (radio driven, no script) */
.k-demo{position:relative; display:flex; flex-direction:column; gap:14px}
.k-r{position:absolute; opacity:0; pointer-events:none}
.k-tabs{display:flex; flex-wrap:wrap; gap:8px}
.k-tabs label{cursor:pointer; padding:8px 15px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-size:.84rem; font-weight:700; transition:background .2s,color .2s,border-color .2s}
.k-tabs label:hover{border-color:#4f52e0}
#ks1:checked ~ .k-tabs label[for="ks1"],#ks2:checked ~ .k-tabs label[for="ks2"],#ks3:checked ~ .k-tabs label[for="ks3"]{background:#4f52e0; border-color:#4f52e0; color:#fff}
#ks1:focus-visible ~ .k-tabs label[for="ks1"],#ks2:focus-visible ~ .k-tabs label[for="ks2"],#ks3:focus-visible ~ .k-tabs label[for="ks3"]{outline:3px solid #a5a7f5; outline-offset:2px}
.k-win{background:#f1f0ff; border:1px solid #dcdaf7; border-radius:20px; padding:18px 20px 22px; box-shadow:0 22px 44px -30px rgba(79,82,224,.5); color:#1c1b3a; min-height:420px}
.k-win-bar{display:flex; align-items:center; gap:7px; margin-bottom:16px}
.k-win-bar em{margin-left:6px; font-style:normal; font-size:.82rem; color:#76749a}
.k-badge{margin-left:auto; padding:4px 12px; border-radius:999px; background:#fff; border:1px solid #d9efe2; color:#1f9d55; font-size:.78rem; font-weight:700}
.k-lbl{margin:0 0 8px; font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8a88ab}
.k-thoughts{padding:14px 16px; border-radius:14px; background:#e8e7fb; font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive; font-style:italic; font-size:.95rem; line-height:1.6; color:#3a3957}
.k-polish{display:flex; justify-content:center; margin:16px 0 4px}
.k-polish span{padding:9px 20px; border-radius:999px; background:#4f52e0; color:#fff; font-size:.88rem; font-weight:700; box-shadow:0 10px 22px -10px rgba(79,82,224,.8)}
.k-skel{margin-top:12px; padding:18px; border-radius:14px; background:#fff; border:1px solid #e7e6f7; display:flex; flex-direction:column; gap:10px}
.k-skel i{display:block; height:10px; border-radius:6px; background:#e6e5f6}
.k-skel i:nth-child(2){width:86%} .k-skel i:nth-child(3){width:58%}
.k-draft{margin-top:14px; padding:18px 20px; border-radius:14px; background:#fff; border:1px solid #e7e6f7}
.k-draft p{margin:0 0 10px; font-size:.92rem; line-height:1.6; color:#45445f}
.k-draft p:last-child{margin-bottom:0}
.k-draft .k-subj{font-weight:700; color:#1c1b3a}
.k-s2,.k-s3{display:none}
#ks2:checked ~ .k-win .k-polish,#ks3:checked ~ .k-win .k-draft{display:block}
#ks2:checked ~ .k-win .k-polish{display:flex}
#ks2:checked ~ .k-win .k-skel{display:flex}
#ks3:checked ~ .k-win .k-badge{display:inline-block}
@media (max-width:560px){.k-win{padding:14px 14px 18px; min-height:0}.k-tabs label{padding:7px 12px; font-size:.8rem}}

/* kural: collapsible project brief */
.k-brief{border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 14px 30px -26px rgba(15,23,42,.45); overflow:hidden}
.k-brief summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px}
.k-brief summary::-webkit-details-marker{display:none}
.k-brief summary:focus-visible{outline:3px solid var(--deep); outline-offset:-3px; border-radius:18px}
.k-brief-txt{display:flex; flex-direction:column; gap:4px; min-width:0}
.k-brief-txt b{font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.22rem); font-weight:700; color:var(--ink); line-height:1.3}
.k-brief-txt small{font-size:.88rem; color:var(--muted); line-height:1.4}
.k-brief-ico{flex:none; position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg); transition:background .2s,border-color .2s}
.k-brief-ico::before,.k-brief-ico::after{content:""; position:absolute; left:50%; top:50%; width:14px; height:2px; margin:-1px 0 0 -7px; background:#059669; border-radius:2px; transition:transform .25s ease,background .2s}
.k-brief-ico::after{transform:rotate(90deg)}
.k-brief summary:hover .k-brief-ico{border-color:#059669}
.k-brief[open] .k-brief-ico{background:#059669; border-color:#059669}
.k-brief[open] .k-brief-ico::before,.k-brief[open] .k-brief-ico::after{background:#fff}
.k-brief[open] .k-brief-ico::after{transform:rotate(0)}
.k-brief-body{overflow:hidden}
.k-brief-in{display:flex; flex-direction:column; gap:clamp(40px,6vw,56px); padding:6px 22px 30px; border-top:1px solid var(--line); padding-top:30px}
.k-brief-in .ev-card{margin:0}
@media (max-width:560px){.k-brief summary{padding:16px 16px}.k-brief-in{padding:24px 16px 24px}}
@media (prefers-reduced-motion:reduce){.k-brief-ico,.k-brief-ico::before,.k-brief-ico::after{transition:none}}

/* kural: compact feature grid */
.k-feat{gap:12px}
.k-feat .k-card{padding:18px 18px 18px; gap:6px}
.k-feat .k-card h4{font-size:1.04rem}
.k-feat .k-card p{font-size:.92rem}
@media (max-width:420px){.k-feat{grid-template-columns:minmax(0,1fr)}}

/* connectors between cards */
.k-pipe .k-result{margin-top:4px}

/* kural: unified competitor matrix */
.cx-wrap{width:min(1000px,calc(100vw - 48px)); position:relative; left:50%; transform:translateX(-50%); overflow-x:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 40px -30px rgba(15,23,42,.5)}
.cx{width:100%; min-width:640px; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:.9rem}
.cx th,.cx td{padding:14px 14px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line); line-height:1.4; color:var(--ink)}
.cx tbody tr:last-child th,.cx tbody tr:last-child td{border-bottom:0}
.cx col.c0,.cx thead th:first-child,.cx tbody th{width:19%}
.cx thead th{font-family:var(--serif); font-size:1.08rem; font-weight:700; padding-block:18px; border-bottom:1px solid var(--line)}
.cx tbody th{font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.cx tbody tr:nth-child(n+2) th{font-size:.88rem; letter-spacing:0; text-transform:none; font-weight:600; color:var(--ink)}
.cx tr.cx-good td{font-weight:600}
.cx td:not(.cx-k) .cc-t{display:inline-grid}
.cx tbody tr:nth-child(n+2) td{text-align:center}
.cx thead th:last-child,.cx td.cx-k{text-align:center}
.cx tbody tr:nth-child(1) td.cx-k{text-align:left}
/* emerald winning column */
.cx td.cx-k,.cx th.cx-k{background:color-mix(in srgb,#059669 12%,var(--surface)); border-inline:2px solid #059669}
.cx thead th.cx-k{background:#059669; color:#fff; border-top:0; border-bottom-color:#059669; font-size:1.2rem}
.cx tbody tr:last-child td.cx-k{border-bottom:2px solid #059669}
.cx tr.cx-good td.cx-k{color:var(--ink); font-weight:700}
.cc-t{flex:none; width:24px; height:24px; place-items:center; border-radius:50%; font-size:.8rem; font-weight:800; line-height:1}
.cc-t.n{display:inline-grid; color:var(--muted); background:color-mix(in srgb,var(--muted) 14%,transparent)}
.cc-t.y{display:inline-grid; color:#fff; background:#059669}
@media (max-width:1000px){.cx-wrap{width:min(760px,100%); left:auto; transform:none}}
@media (max-width:560px){.cx th,.cx td{padding:12px 10px; font-size:.84rem}.cx tbody th{position:sticky; left:0; z-index:1; background:var(--surface)}}
@media (max-width:560px){
  .cx{min-width:600px}
  .cx thead th:first-child,.cx tbody th{width:96px}
  .cx thead th.cx-k,.cx td.cx-k{width:108px}
  .cx td.cx-k,.cx th.cx-k{position:sticky; right:0; z-index:2}
  .cx thead th:first-child{position:sticky; left:0; z-index:2; background:var(--surface)}
}

/* kural: compact editorial density (page-scoped) */
[data-page="kural"] .band{padding-block:26px}
[data-page="kural"] .phase{margin-bottom:20px}
[data-page="kural"] .phase h2{font-size:clamp(1.45rem,3vw,2.05rem)}
[data-page="kural"] .ev-grid{gap:clamp(26px,3.4vw,36px)}
[data-page="kural"] .ev-grid .ev-card{gap:9px; padding-top:16px}
[data-page="kural"] .ev-grid .ev-card h3{font-size:clamp(1.2rem,2.3vw,1.45rem); line-height:1.25}
[data-page="kural"] .ev-grid .ev-card > p{font-size:1rem; line-height:1.6}
[data-page="kural"] .ev-grid .ev-key{line-height:1.55}
[data-page="kural"] .ev-grid .ev-key strong{margin-bottom:0; font-size:1rem}
[data-page="kural"] .pilot-stack .ev-card .shot{margin-top:4px}
[data-page="kural"] .k-cards{gap:10px; margin:0}
[data-page="kural"] .k-card{padding:15px 16px 14px; gap:5px}
[data-page="kural"] .k-card .k-num{font-size:clamp(2.1rem,4.4vw,2.7rem)}
[data-page="kural"] .k-card p{line-height:1.45}
[data-page="kural"] .k-feat .k-card{padding:13px 15px 13px; gap:3px}
[data-page="kural"] .k-figure{margin:2px 0 0; gap:6px}
[data-page="kural"] .k-tabs{margin:0 0 8px}
[data-page="kural"] .k-win{min-height:340px; padding-bottom:18px}
[data-page="kural"] .k-brief summary{padding:14px 18px}
[data-page="kural"] .k-brief-in{gap:26px; padding:20px 18px 20px}
[data-page="kural"] .cx th,[data-page="kural"] .cx td{padding:10px 12px}
[data-page="kural"] .cx thead th{padding-block:13px}
[data-page="kural"] .cx tbody tr:nth-child(n+2) th,[data-page="kural"] .cx tbody tr:nth-child(n+2) td{padding-block:8px}
[data-page="kural"] .pilot-stack .prio-list{gap:12px}
[data-page="kural"] .cmp th,[data-page="kural"] .cmp td{padding-block:9px}
@media (max-width:560px){
  [data-page="kural"] .k-win{min-height:0}
  [data-page="kural"] .band{padding-block:22px}
  [data-page="kural"] .cx th,[data-page="kural"] .cx td{padding:9px 9px}
}
[data-page="kural"] .ph-hero{min-height:0; padding-block:12px 20px}
[data-page="kural"] .ph-grid{gap:36px; margin-top:12px}
[data-page="kural"] .sec-head{margin-bottom:0}
[data-page="kural"] .sec-head p{margin-top:4px}
[data-page="kural"] .xb{gap:12px; margin-top:14px}
[data-page="kural"] .xb-hero{padding:22px 24px; gap:8px; min-height:0}
[data-page="kural"] .xb-docs{gap:8px}
[data-page="kural"] .xb-doc{padding:11px 14px}

/* kural competitors: limitation sits under each tool name; tighter intro spacing */
.cx thead th{vertical-align:top}
.cx thead th small{display:block; margin-top:5px; font-family:var(--sans); font-size:.78rem; font-weight:600; line-height:1.35; color:#b91c1c}
.cx thead th.cx-k small{color:rgba(255,255,255,.92)}
:root[data-theme="dark"] .cx thead th:not(.cx-k) small{color:#fca5a5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cx thead th:not(.cx-k) small{color:#fca5a5}}
[data-page="kural"] #competitors .ev-grid{gap:12px}
[data-page="kural"] #competitors .ev-card{padding-bottom:0}

/* kural how it works: tight intro-to-pipeline gap and progressive emphasis */
[data-page="kural"] #how-it-works{padding-block:20px}
[data-page="kural"] #how-it-works .phase{margin-bottom:14px}
[data-page="kural"] #how-it-works .ev-grid{gap:14px}
[data-page="kural"] #how-it-works .ev-card{padding-bottom:0}
/* culminating step: learned memory output */

/* case studies: use wide desktops, keep reading columns narrow */
body:has(.ph-hero){--maxw:1380px}
@media (min-width:1700px){body:has(.ph-hero){--maxw:1440px}}
body:has(.ph-hero) .wrap,body:has(.ph-hero) .nav-in,body:has(.ph-hero) .foot-in,body:has(.ph-hero) .cs-index-in{padding-inline:max(clamp(20px,3.4vw,64px),env(safe-area-inset-left,0px))}
.ph-hero > .wrap{max-width:var(--maxw)}
.cs-index-in{max-width:var(--maxw)}
@media (min-width:1500px){
  body:has(.ph-hero) .ph-grid{gap:clamp(88px,6vw,120px)}
  [data-page="kural"] .cx-wrap{width:min(1120px,calc(100vw - 96px))}
}

/* case studies: readable line length inside the wider container */
body:has(.ph-hero) .trap-head .lede,body:has(.ph-hero) .trap-head .intro-callout,body:has(.ph-hero) .ph-head .kicker,body:has(.ph-hero) .ins-block .src-note{max-width:min(78ch,100%); margin-inline:auto}
body:has(.ph-hero) .trap-head .intro-callout{text-align:left}
body:has(.ph-hero) .row-text > p,body:has(.ph-hero) .row-text > ul,body:has(.ph-hero) .row-text .edge-note p,body:has(.ph-hero) .dark-card p,body:has(.ph-hero) .arch-note,body:has(.ph-hero) .arch-obs p,body:has(.ph-hero) .board-caption{max-width:78ch}

[data-page="kural"] #demo .k-figure{margin-top:0}
[data-page="kural"] #demo .ev-card{gap:10px}

/* kural engine: lighter cards with more whitespace */
[data-page="kural"] #how-it-works{padding-block:26px 30px}
[data-page="kural"] #how-it-works .ev-grid{gap:30px}

/* kural engine: system lifecycle timeline */
.lc{list-style:none; margin:10px 0 6px; padding:0; position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  width:min(1160px,calc(100vw - 48px)); left:50%; transform:translateX(-50%); border-bottom:1px solid var(--line); --p:0}
.lc::before{content:""; position:absolute; left:7px; right:calc(25% - 35px); top:7px; height:1px; background:var(--line)}
.lc::after{content:""; position:absolute; left:7px; top:6px; height:3px; width:var(--p); background:#059669; border-radius:3px; transition:width .6s cubic-bezier(.2,.7,.2,1)}
.lc-stage{position:relative; display:flex; flex-direction:column; gap:8px; min-width:0; padding:0 36px 40px 28px; outline:none; cursor:default}
.lc-stage:first-child{padding-left:0}
.lc-stage + .lc-stage::before{content:""; position:absolute; left:0; top:30px; bottom:30px; width:1px; background:var(--line)}
.lc-stage::after{content:""; position:absolute; left:28px; right:36px; bottom:-1px; height:2px; background:#059669; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lc-stage:first-child::after{left:0}
.lc-node{position:relative; z-index:1; width:15px; height:15px; margin-bottom:22px; border-radius:50%; background:var(--bg); border:1.5px solid color-mix(in srgb,var(--muted) 55%,transparent); transition:background .3s,border-color .3s,box-shadow .3s}
.lc-idx{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; font-weight:600; letter-spacing:.08em; color:var(--muted); transition:color .3s}
.lc-stage h4{margin:0; font-family:var(--sans); font-size:1.3rem; font-weight:800; letter-spacing:-.01em; line-height:1.2; color:var(--ink)}
.lc-stage p{margin:0; max-width:30ch; font-size:.96rem; line-height:1.6; color:var(--muted)}
.lc-stage.is-done .lc-node{border-color:#059669; background:radial-gradient(circle,#059669 0 3px,var(--bg) 3.5px)}
.lc-stage.is-active .lc-node,.lc-stage:hover .lc-node,.lc-stage:focus-visible .lc-node{background:#059669; border-color:#059669; box-shadow:0 0 0 5px color-mix(in srgb,#059669 18%,transparent)}
.lc-stage.is-active .lc-idx,.lc-stage:hover .lc-idx,.lc-stage:focus-visible .lc-idx{color:#047857}
.lc-stage.is-active::after,.lc-stage:hover::after,.lc-stage:focus-visible::after{transform:scaleX(1)}
:root[data-theme="dark"] .lc-stage.is-active .lc-idx,:root[data-theme="dark"] .lc-stage:hover .lc-idx{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lc-stage.is-active .lc-idx,:root:not([data-theme="light"]) .lc-stage:hover .lc-idx{color:#6ee7b7}}
@media (max-width:1000px){.lc-stage{padding-right:24px}.lc-stage h4{font-size:1.2rem}}
@media (max-width:700px){
  .lc{grid-template-columns:minmax(0,1fr); width:100%; left:auto; transform:none; border-bottom:0; padding-left:0}
  .lc::before{left:7px; right:auto; top:7px; bottom:auto; width:1px; height:var(--end,60%)}
  .lc::after{left:6px; top:7px; width:3px; height:var(--p); max-width:none; transition:height .6s cubic-bezier(.2,.7,.2,1)}
  .lc-stage,.lc-stage:first-child{display:grid; grid-template-columns:15px minmax(0,1fr); column-gap:18px; row-gap:4px; padding:0 0 30px 0; border-bottom:0}
  .lc-stage + .lc-stage::before{display:none}
  .lc-stage::after,.lc-stage:first-child::after{display:none}
  .lc-node{grid-row:1 / span 3; margin:3px 0 0}
  .lc-stage > :not(.lc-node){grid-column:2}
  .lc-stage:last-child{padding-bottom:6px}
}
@media (prefers-reduced-motion:reduce){.lc::after,.lc-stage::after,.lc-node,.lc-idx{transition:none}}
[data-page="kural"] #how-it-works .ev-grid{gap:34px}
[data-page="kural"] #how-it-works{padding-block:30px 40px}


/* lumi cards: same compact editorial density as the other case studies (page-scoped) */
[data-page="lumi-cards"] .band{padding-block:26px}
[data-page="lumi-cards"] .phase{margin-bottom:20px}
[data-page="lumi-cards"] .phase h2{font-size:clamp(1.45rem,3vw,2.05rem)}
[data-page="lumi-cards"] .ev-grid{gap:clamp(26px,3.4vw,36px)}
[data-page="lumi-cards"] .ev-grid .ev-card{gap:9px; padding-top:16px}
[data-page="lumi-cards"] .ev-grid .ev-card h3{font-size:clamp(1.2rem,2.3vw,1.45rem); line-height:1.25}
[data-page="lumi-cards"] .ev-grid .ev-card > p{font-size:1rem; line-height:1.6}
[data-page="lumi-cards"] .ev-grid .ev-key{line-height:1.55}
[data-page="lumi-cards"] .ev-grid .ev-key strong{margin-bottom:0; font-size:1rem}
[data-page="lumi-cards"] .pilot-stack .ev-card .shot{margin-top:4px}
[data-page="lumi-cards"] .k-cards{gap:10px; margin:0}
[data-page="lumi-cards"] .k-card{padding:15px 16px 14px; gap:5px}
[data-page="lumi-cards"] .k-card .k-num{font-size:clamp(2.1rem,4.4vw,2.7rem)}
[data-page="lumi-cards"] .k-card p{line-height:1.45}
[data-page="lumi-cards"] .k-feat .k-card{padding:13px 15px 13px; gap:3px}
[data-page="lumi-cards"] .k-figure{margin:2px 0 0; gap:6px}
[data-page="lumi-cards"] .k-tabs{margin:0 0 8px}
[data-page="lumi-cards"] .k-win{min-height:340px; padding-bottom:18px}
[data-page="lumi-cards"] .k-brief summary{padding:14px 18px}
[data-page="lumi-cards"] .k-brief-in{gap:26px; padding:20px 18px 20px}
[data-page="lumi-cards"] .cx th,[data-page="lumi-cards"] .cx td{padding:10px 12px}
[data-page="lumi-cards"] .cx thead th{padding-block:13px}
[data-page="lumi-cards"] .cx tbody tr:nth-child(n+2) th,[data-page="lumi-cards"] .cx tbody tr:nth-child(n+2) td{padding-block:8px}
[data-page="lumi-cards"] .pilot-stack .prio-list{gap:12px}
[data-page="lumi-cards"] .cmp th,[data-page="lumi-cards"] .cmp td{padding-block:9px}
@media (max-width:560px){
  [data-page="lumi-cards"] .k-win{min-height:0}
  [data-page="lumi-cards"] .band{padding-block:22px}
  [data-page="lumi-cards"] .cx th,[data-page="lumi-cards"] .cx td{padding:9px 9px}
}
[data-page="lumi-cards"] .ph-hero{min-height:0; padding-block:12px 20px}
[data-page="lumi-cards"] .ph-grid{gap:36px; margin-top:12px}
[data-page="lumi-cards"] .sec-head{margin-bottom:0}
[data-page="lumi-cards"] .sec-head p{margin-top:4px}
#role,#evals,#impact{scroll-margin-top:calc(var(--nav-h) + var(--bar-h) + 12px)}
html.cs-collapsed #role,html.cs-collapsed #evals,html.cs-collapsed #impact,html.cs-collapsed #reflection{scroll-margin-top:calc(var(--bar-h) + 12px)}

/* wide breakout inside the narrow reading column */
.l-wide{position:relative; left:50%; transform:translateX(-50%); width:min(1160px,calc(100vw - 48px)); min-width:0}
.l-split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,44px); align-items:start}
[data-page="lumi-cards"] .l-split .ev-card{height:auto}
[data-page="lumi-cards"] .l-split .cmp{min-width:0}
[data-page="lumi-cards"] .arch.l-wide{margin:4px 0 0}
[data-page="lumi-cards"] .ev-card > p.l-note,[data-page="lumi-cards"] p.l-note{font-size:.88rem; line-height:1.55; color:var(--muted)}
@media (max-width:860px){.l-split{grid-template-columns:minmax(0,1fr)}}

/* stat cards read as rows inside half width cards */
.l-split .k-cards:not(.k-cards-2):has(.k-num){grid-template-columns:minmax(0,1fr)}
.l-split .k-cards:not(.k-cards-2) .k-card:has(.k-num){display:grid; grid-template-columns:minmax(124px,auto) minmax(0,1fr); grid-template-areas:"num src" "num p"; column-gap:18px; row-gap:2px; align-items:center}
.l-split .k-cards:not(.k-cards-2) .k-card:has(.k-num) .k-num{grid-area:num; font-size:clamp(1.9rem,3vw,2.3rem)}
.l-split .k-cards:not(.k-cards-2) .k-card:has(.k-num) .k-src{grid-area:src; align-self:end}
.l-split .k-cards:not(.k-cards-2) .k-card:has(.k-num) p{grid-area:p; align-self:start}
.l-split .k-cards:has(.k-fact):not(.k-cards-2){grid-template-columns:minmax(0,1fr)}
@media (max-width:480px){
  .l-split .k-cards:not(.k-cards-2) .k-card:has(.k-num){grid-template-columns:minmax(0,1fr); grid-template-areas:"src" "num" "p"; row-gap:4px}
}

/* role: ownership list */

/* golden set table */
.cx-wrap.l-gq{width:min(1160px,calc(100vw - 48px))}
.cx.gq{min-width:900px; table-layout:auto}
.cx.gq thead th{font-family:var(--sans); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); text-align:left}
.cx.gq thead th:last-child{text-align:left}
.cx.gq th[scope="row"]{white-space:nowrap; vertical-align:top; color:var(--accent-ink)}
.cx.gq td{vertical-align:top; font-size:.88rem; line-height:1.5}
.cx.gq td:nth-child(3){font-weight:600}

/* guardrail cards */
.l-gr{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.l-gr .k-card{padding:16px 16px 15px}
@media (max-width:1000px){.l-gr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.l-gr{grid-template-columns:minmax(0,1fr)}}

/* failure mode cards */
.l-fm{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.fm{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; box-shadow:0 14px 30px -26px rgba(15,23,42,.4)}
.fm header{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px}
.fm-n{width:26px; height:26px; border-radius:50%; background:#059669; color:#fff; font-size:.8rem; font-weight:800; display:grid; place-items:center}
.fm h4{margin:0; font-family:var(--sans); font-size:1rem; font-weight:700; line-height:1.3; color:var(--ink)}
.fm dl{margin:0; display:grid; gap:2px}
.fm dt{font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857; margin-top:6px}
.fm dt:first-child{margin-top:0}
.fm dd{margin:0; font-size:.9rem; line-height:1.5; color:var(--muted)}
.sev{font-size:.7rem; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; letter-spacing:.02em}
.sev.crit{color:#b91c1c; background:rgba(185,28,28,.1)}
.sev.high{color:#b45309; background:rgba(180,83,9,.12)}
.sev.ok{color:#047857; background:rgba(5,150,105,.12)}
:root[data-theme="dark"] .sev.crit{color:#f08a8a; background:rgba(240,138,138,.14)}
:root[data-theme="dark"] .sev.high{color:#eab308; background:rgba(234,179,8,.14)}
:root[data-theme="dark"] .sev.ok{color:#34d399; background:rgba(16,185,129,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sev.crit{color:#f08a8a; background:rgba(240,138,138,.14)}
  :root:not([data-theme="light"]) .sev.high{color:#eab308; background:rgba(234,179,8,.14)}
  :root:not([data-theme="light"]) .sev.ok{color:#34d399; background:rgba(16,185,129,.16)}
}
@media (max-width:1000px){.l-fm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.l-fm{grid-template-columns:minmax(0,1fr)}}

/* latency bars */
.l-bars{display:grid; gap:12px; margin:2px 0}
.l-bars > div{display:grid; grid-template-columns:132px minmax(0,1fr) 92px; align-items:center; gap:12px; font-size:.9rem}
.l-bars span{color:var(--muted); font-weight:600}
.l-bars i{display:block; height:14px; width:var(--w); min-width:6px; border-radius:7px; background:var(--chip-line)}
.l-bars i.c{background:#059669}
.l-bars b{font-weight:800; color:var(--ink); white-space:nowrap}
@media (max-width:520px){
  .l-bars > div{grid-template-columns:minmax(0,1fr) auto; row-gap:4px}
  .l-bars i{grid-column:1 / -1; grid-row:2}
}

/* lumi cards: refinements */
[data-page="lumi-cards"] .ev-grid .ev-card.ev-cont{border-top:0; padding-top:0; margin-top:-16px}
[data-page="lumi-cards"] .ev-card .shot{margin-top:12px}
[data-page="lumi-cards"] .l-split .shot.cap{max-width:440px}
.cx.gq tbody tr:nth-child(n+1) th{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--accent-ink)}
.cx.gq tbody tr:nth-child(n+2) td{text-align:left}
.l-bars > div{grid-template-columns:150px minmax(0,1fr) 104px}
.l-bars span{white-space:nowrap}
@media (max-width:1000px){.cx-wrap.l-gq{width:100%}}
@media (max-width:560px){.cx.gq th[scope="row"]{white-space:normal}}
@media (max-width:520px){.l-bars span{white-space:normal}}
@media (max-width:520px){.l-bars b{justify-self:end}}

/* lumi hero: title spans the top, prototype and content stack start on the same line (same pattern as Kittii and Side Quest) */
[data-page="lumi-cards"] .ph-grid.ph-split{column-gap:44px; margin-top:20px; align-items:stretch}
[data-page="lumi-cards"] .ph-head{max-width:none}
[data-page="lumi-cards"] .ph-split .ph-demo{align-self:stretch; align-items:stretch}
[data-page="lumi-cards"] .ph-split .ph-demo .ph-device{flex:1; height:auto; min-height:clamp(460px,calc(100svh - 360px),620px)}
[data-page="lumi-cards"] .ph-split .ph-demo .ph-cap{max-width:none; text-align:center; margin-top:10px}
[data-page="lumi-cards"] .ph-info{max-width:none}
@media (max-width:900px){
  [data-page="lumi-cards"] .ph-split .ph-demo .ph-device{height:560px; min-height:0; flex:none}
}

/* lumi: role and ownership, equal height problem split */

@media (min-width:861px){
  [data-page="lumi-cards"] .l-split-eq{align-items:stretch}
  [data-page="lumi-cards"] .l-split-eq .ev-card{height:100%}
  [data-page="lumi-cards"] .l-split-eq .ev-card > .shot{margin-top:auto}
  [data-page="lumi-cards"] .l-split-eq .ev-card > .l-bottom{margin-top:auto}
}
[data-page="lumi-cards"] .l-bottom{display:flex; flex-direction:column; gap:10px}
@media (min-width:861px){
  [data-page="lumi-cards"] .l-split-eq .l-bottom .cmp th,
  [data-page="lumi-cards"] .l-split-eq .l-bottom .cmp td{padding-top:15px; padding-bottom:15px}
}

/* lumi: problem section, manual lookup flow card and compliance callout */
[data-page="lumi-cards"] #problem .mvp-intro{margin:0 auto 26px}
[data-page="lumi-cards"] .l-flow-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px 26px 22px; display:flex; flex-direction:column; gap:18px}
[data-page="lumi-cards"] .l-flow-head{display:flex; flex-direction:column; gap:3px}
[data-page="lumi-cards"] .l-flow-eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
[data-page="lumi-cards"] .l-flow-sub{font-family:var(--serif); font-weight:600; font-size:clamp(1.15rem,2vw,1.4rem); letter-spacing:-.01em; color:var(--ink)}
[data-page="lumi-cards"] .l-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:34px}
[data-page="lumi-cards"] .l-flow li{position:relative; display:flex; flex-direction:column; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:16px 15px 17px}
[data-page="lumi-cards"] .l-flow li:not(:last-child)::after{content:"\2192"; position:absolute; right:-25px; top:50%; transform:translateY(-50%); width:16px; text-align:center; color:#059669; opacity:.6; font-weight:700; font-size:1rem; line-height:1}
[data-page="lumi-cards"] .l-step-n{width:28px; height:28px; border-radius:50%; background:#059669; color:#fff; display:grid; place-items:center; font-size:.82rem; font-weight:800; margin-bottom:4px}
[data-page="lumi-cards"] .l-step-t{font-weight:700; color:var(--ink); font-size:.96rem; line-height:1.3}
[data-page="lumi-cards"] .l-step-d{color:var(--muted); font-size:.88rem; line-height:1.45}
[data-page="lumi-cards"] .l-flow-bar{margin:0; padding:12px 16px; border-radius:12px; text-align:center; font-weight:700; font-size:.92rem; line-height:1.45; background:#fef3c7; color:#78350f; border:1px solid #fde68a}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-flow-bar,[data-theme="dark"] [data-page="lumi-cards"] .l-flow-bar{background:rgba(245,158,11,.14); color:#fcd34d; border-color:rgba(245,158,11,.35)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-flow-eyebrow{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-flow-bar{background:rgba(245,158,11,.14); color:#fcd34d; border-color:rgba(245,158,11,.35)} :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-flow-eyebrow{color:#6ee7b7}}
@media (max-width:980px){
  [data-page="lumi-cards"] .l-flow{grid-template-columns:minmax(0,1fr); gap:16px}
  [data-page="lumi-cards"] .l-flow li{display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:14px; row-gap:2px; align-items:start}
  [data-page="lumi-cards"] .l-step-n{grid-row:1 / span 2; margin:0}
  [data-page="lumi-cards"] .l-flow li:not(:last-child)::after{content:"\2193"; right:auto; left:21px; top:auto; bottom:-17px; transform:none}
}
[data-page="lumi-cards"] .l-risk{margin:0; background:rgba(5,150,105,.08); border-left:4px solid #059669; border-radius:0 12px 12px 0; padding:14px 18px; color:var(--ink); font-size:.97rem; line-height:1.55}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-risk{background:rgba(5,150,105,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-risk{background:rgba(5,150,105,.16)}}
@media (min-width:861px){
  [data-page="lumi-cards"] .l-split-eq .ev-card > .l-risk{margin-top:auto}
}

/* lumi: tables, vocabulary gap cards, guard phase cards */
[data-page="lumi-cards"] .cmp thead th{color:var(--muted); font-weight:700}
[data-page="lumi-cards"] #research .cmp th,
[data-page="lumi-cards"] #research .cmp td{padding-top:15px; padding-bottom:15px}
[data-page="lumi-cards"] #research .cmp td:first-child{font-weight:600; color:var(--ink)}
[data-page="lumi-cards"] #research .k-cards-2{align-items:stretch; margin-top:6px}
[data-page="lumi-cards"] #research .k-cards-2 .k-card.k-fact{border-color:color-mix(in srgb,var(--ink) 14%,var(--line)); box-shadow:none; gap:9px}
[data-page="lumi-cards"] #research .k-cards-2 .k-card.k-fact .k-src{align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); font-size:.66rem; letter-spacing:.12em}
@media (min-width:861px){
  [data-page="lumi-cards"] #research .l-split-eq .ev-card > .ev-key{margin-top:auto}
}
[data-page="lumi-cards"] #how-it-works .k-card .k-src{color:#059669}
:root[data-theme="dark"] [data-page="lumi-cards"] #how-it-works .k-card .k-src{color:#34d399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] #how-it-works .k-card .k-src{color:#34d399}}
[data-page="lumi-cards"] #how-it-works .ev-grid{gap:0}
[data-page="lumi-cards"] #how-it-works .ev-grid > .ev-card{margin-bottom:2.5rem}
[data-page="lumi-cards"] #how-it-works .ev-card > .k-cards{margin-top:8px}
[data-page="lumi-cards"] #how-it-works .arch{margin-top:1.75rem}

/* lumi architecture: banners, matched card widths, state tints, observability cards */
[data-page="lumi-cards"] .arch{--arch-warn-bg:#fef3c7; --arch-warn-line:#d97706; --arch-stop-bg:#fee2e2; --arch-stop-line:#ef4444}
[data-page="lumi-cards"] .arch-lane.a > h5{background:#0f172a; color:#fff; letter-spacing:.14em}
[data-page="lumi-cards"] .arch-lane.b > h5{background:#064e3b; color:#fff; letter-spacing:.14em}
[data-page="lumi-cards"] .arch-flow{gap:34px 32px}
[data-page="lumi-cards"] .arch-flow li{padding:14px 15px 15px; min-height:144px}
@container (min-width:861px){
  [data-page="lumi-cards"] .arch-flow li::after{right:-22px}
  [data-page="lumi-cards"] .arch-lane.b .arch-flow li:nth-child(4)::after{right:50%; bottom:-24px}
  [data-page="lumi-cards"] .arch-lane.b .arch-flow li:nth-child(n+5)::after{right:auto; left:-22px}
  [data-page="lumi-cards"] .arch-lane.a .arch-flow{grid-template-columns:repeat(5,minmax(0,1fr))}
  [data-page="lumi-cards"] .arch-lane.b .arch-flow{grid-template-columns:repeat(4,calc((100% - 128px) / 5)); justify-content:center}
}
@container (max-width:860px){
  [data-page="lumi-cards"] .arch-flow li{min-height:0}
  [data-page="lumi-cards"] .arch-flow{gap:30px 28px}
  [data-page="lumi-cards"] .arch-flow li:nth-child(n)::after{right:-20px}
  [data-page="lumi-cards"] .arch-flow li:nth-child(even)::after{right:50%; bottom:-22px}
}
@container (max-width:520px){
  [data-page="lumi-cards"] .arch-flow{gap:28px}
  [data-page="lumi-cards"] .arch-flow li:nth-child(n)::after{right:50%; bottom:-21px}
}

[data-page="lumi-cards"] .arch-obs{border:1px solid var(--line); background:var(--surface); border-radius:16px; padding:20px 22px 22px}
[data-page="lumi-cards"] .arch-obs > summary{list-style:none; cursor:pointer; user-select:none; display:flex; align-items:center}
[data-page="lumi-cards"] .arch-obs > summary::-webkit-details-marker{display:none}
[data-page="lumi-cards"] .arch-obs > summary::after{content:""; width:16px; height:16px; margin-left:auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .2s}
[data-page="lumi-cards"] .arch-obs[open] > summary::after{transform:rotate(180deg)}
[data-page="lumi-cards"] .arch-obs > summary h5{color:#047857; letter-spacing:.14em; margin:0}
:root[data-theme="dark"] [data-page="lumi-cards"] .arch-obs > summary h5{color:#6ee7b7}
:root[data-theme="dark"] [data-page="lumi-cards"] .arch-obs > summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .arch-obs > summary h5{color:#6ee7b7}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .arch-obs > summary::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
}
[data-page="lumi-cards"] .obs-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:14px}
[data-page="lumi-cards"] .obs-card{background:var(--arch-node); border:1px solid var(--line); border-radius:12px; padding:16px 18px 17px; display:flex; flex-direction:column; gap:9px}
[data-page="lumi-cards"] .obs-card h6{margin:0; font-size:.88rem; font-weight:800; color:var(--ink); line-height:1.3; display:flex; align-items:center; gap:8px}
[data-page="lumi-cards"] .obs-card h6 span{width:22px; height:22px; border-radius:50%; background:#059669; color:#fff; display:grid; place-items:center; font-size:.72rem; font-weight:800; flex:none}
[data-page="lumi-cards"] .obs-card p,
[data-page="lumi-cards"] .obs-card li{font-size:.8rem; line-height:1.55; color:var(--muted); margin:0}
[data-page="lumi-cards"] .obs-card p + p{margin-top:0}
[data-page="lumi-cards"] .obs-card b{color:var(--ink); font-weight:700}
[data-page="lumi-cards"] .obs-card ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px}
[data-page="lumi-cards"] .obs-card ul.obs-triage{list-style:none; padding:0; flex-direction:row; flex-wrap:wrap; gap:7px}
[data-page="lumi-cards"] .obs-card ul.obs-triage li{background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 11px; font-size:.76rem}
@container (max-width:860px){
  [data-page="lumi-cards"] .obs-grid{grid-template-columns:minmax(0,1fr)}
}

/* lumi evals: metric cards match the hero highlight cards */
[data-page="lumi-cards"] .ph-hl div{transition:border-color .2s, box-shadow .2s, transform .2s}
[data-page="lumi-cards"] #evals .ev-card > .k-cards .k-card{border-radius:14px; padding:10px 12px; gap:6px; box-shadow:none; transition:border-color .2s, box-shadow .2s, transform .2s}
[data-page="lumi-cards"] .ph-hl div:hover,
[data-page="lumi-cards"] #evals .ev-card > .k-cards .k-card:hover{border-color:color-mix(in srgb,#059669 45%,var(--line)); box-shadow:0 12px 24px -18px rgba(6,78,59,.5); transform:translateY(-2px)}
[data-page="lumi-cards"] #evals .k-cards .k-card .k-src{font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
[data-page="lumi-cards"] #evals .k-cards .k-card .k-num{color:#059669}
:root[data-theme="dark"] [data-page="lumi-cards"] #evals .k-cards .k-card .k-num{color:#34d399}
:root[data-theme="dark"] [data-page="lumi-cards"] #evals .k-cards .k-card .k-src{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] #evals .k-cards .k-card .k-num{color:#34d399} :root:not([data-theme="light"]) [data-page="lumi-cards"] #evals .k-cards .k-card .k-src{color:#6ee7b7}}

/* lumi evals: golden set table */
[data-page="lumi-cards"] .cx-wrap.l-gq{border-radius:16px; -webkit-overflow-scrolling:touch}
[data-page="lumi-cards"] .cx-wrap.l-gq:focus-visible{outline:2px solid #059669; outline-offset:2px}
[data-page="lumi-cards"] .cx.gq{table-layout:fixed; min-width:1020px}
[data-page="lumi-cards"] .cx.gq .gq-c1{width:12%}
[data-page="lumi-cards"] .cx.gq .gq-c2{width:28%}
[data-page="lumi-cards"] .cx.gq .gq-c3{width:38%}
[data-page="lumi-cards"] .cx.gq .gq-c4{width:22%}
[data-page="lumi-cards"] .cx.gq thead th{background:var(--surface-2); font-weight:700; padding-block:14px}
[data-page="lumi-cards"] .cx.gq tbody th,
[data-page="lumi-cards"] .cx.gq tbody td{padding:16px 14px; vertical-align:top}
[data-page="lumi-cards"] .cx.gq tbody tr:nth-child(n+1) th{font-size:inherit; letter-spacing:normal; text-transform:none; font-weight:400; display:table-cell}
[data-page="lumi-cards"] .cx.gq th[scope="row"] .gq-n{display:block; font-size:.72rem; font-weight:700; color:var(--muted); letter-spacing:.06em; margin-bottom:6px}
[data-page="lumi-cards"] .cx.gq .gq-t{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em; line-height:1.35; border:1px solid transparent; white-space:nowrap}
[data-page="lumi-cards"] .cx.gq .gq-t.t-ok{background:#e6f4ee; color:#166a4a; border-color:#bfe3d1}
[data-page="lumi-cards"] .cx.gq .gq-t.t-warn{background:#fef3c7; color:#92400e; border-color:#fcd9a0}
[data-page="lumi-cards"] .cx.gq .gq-t.t-rose{background:#fde8ea; color:#9f1d2c; border-color:#f6c4ca}
[data-page="lumi-cards"] .cx.gq .gq-t.t-neutral{background:#eef2f6; color:#475569; border-color:#d9e0e8}
:root[data-theme="dark"] [data-page="lumi-cards"] .cx.gq .gq-t.t-ok{background:rgba(52,211,153,.12); color:#6ee7b7; border-color:rgba(52,211,153,.32)}
:root[data-theme="dark"] [data-page="lumi-cards"] .cx.gq .gq-t.t-warn{background:rgba(245,158,11,.14); color:#fcd34d; border-color:rgba(245,158,11,.35)}
:root[data-theme="dark"] [data-page="lumi-cards"] .cx.gq .gq-t.t-rose{background:rgba(244,114,127,.13); color:#fda4af; border-color:rgba(244,114,127,.34)}
:root[data-theme="dark"] [data-page="lumi-cards"] .cx.gq .gq-t.t-neutral{background:rgba(148,163,184,.14); color:#cbd5e1; border-color:rgba(148,163,184,.3)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .cx.gq .gq-t.t-ok{background:rgba(52,211,153,.12); color:#6ee7b7; border-color:rgba(52,211,153,.32)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .cx.gq .gq-t.t-warn{background:rgba(245,158,11,.14); color:#fcd34d; border-color:rgba(245,158,11,.35)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .cx.gq .gq-t.t-rose{background:rgba(244,114,127,.13); color:#fda4af; border-color:rgba(244,114,127,.34)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .cx.gq .gq-t.t-neutral{background:rgba(148,163,184,.14); color:#cbd5e1; border-color:rgba(148,163,184,.3)}
}

/* lumi evals: who grades callout */
[data-page="lumi-cards"] .l-grade{background:rgba(5,150,105,.06); border:1px solid color-mix(in srgb,#059669 22%,var(--line)); border-left:4px solid #059669; border-radius:0 14px 14px 0; padding:18px 20px 20px; display:flex; flex-direction:column; gap:14px}
[data-page="lumi-cards"] .l-grade-h{margin:0; color:var(--ink); line-height:1.6}
[data-page="lumi-cards"] .l-phases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
[data-page="lumi-cards"] .l-phase{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px 15px; display:flex; flex-direction:column; gap:7px}
[data-page="lumi-cards"] .l-phase-k{display:flex; align-items:center; gap:9px; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#047857}
[data-page="lumi-cards"] .l-phase-k span{width:22px; height:22px; border-radius:50%; background:#059669; color:#fff; display:grid; place-items:center; font-size:.72rem; letter-spacing:0; flex:none}
[data-page="lumi-cards"] .l-phase p{margin:0; font-size:.93rem; line-height:1.55; color:var(--muted)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-grade{background:rgba(5,150,105,.12)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-phase-k{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-grade{background:rgba(5,150,105,.12)} :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-phase-k{color:#6ee7b7}}
@media (max-width:640px){[data-page="lumi-cards"] .l-phases{grid-template-columns:minmax(0,1fr)}}
[data-page="lumi-cards"] .cx.gq thead th:first-child,[data-page="lumi-cards"] .cx.gq tbody th{width:12%}
[data-page="lumi-cards"] .cx.gq thead th:nth-child(2){width:28%}
[data-page="lumi-cards"] .cx.gq thead th:nth-child(3){width:38%}
[data-page="lumi-cards"] .cx.gq thead th:nth-child(4){width:22%}

/* lumi: guardrails, post-generation bar, prototype frame, failure modes */
[data-page="lumi-cards"] .l-gr{gap:14px}
[data-page="lumi-cards"] .l-gr .k-card,
[data-page="lumi-cards"] .fm{border-radius:16px; padding:16px 18px 17px}
[data-page="lumi-cards"] .l-gr .k-card{height:100%}
[data-page="lumi-cards"] .l-post{display:flex; align-items:center; gap:20px; background:rgba(5,150,105,.06); border:1px solid color-mix(in srgb,#059669 24%,var(--line)); border-radius:16px; padding:16px 20px}
[data-page="lumi-cards"] .l-post-badge{flex:none; display:inline-flex; align-items:center; gap:8px; background:#059669; color:#fff; border-radius:999px; padding:8px 14px 8px 11px; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}
[data-page="lumi-cards"] .l-post-badge svg{width:17px; height:17px}
[data-page="lumi-cards"] .l-post-copy{display:flex; flex-direction:column; gap:5px; min-width:0}
[data-page="lumi-cards"] .l-post-copy p{margin:0; font-size:.95rem; line-height:1.55; color:var(--muted)}
[data-page="lumi-cards"] .l-post-copy p strong{color:var(--ink); font-weight:700}
[data-page="lumi-cards"] .l-post-copy .l-post-sub{font-size:.85rem}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-post{background:rgba(5,150,105,.12)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-post{background:rgba(5,150,105,.12)}}
@media (max-width:760px){[data-page="lumi-cards"] .l-post{flex-direction:column; align-items:flex-start; gap:12px}}

[data-page="lumi-cards"] .l-proto{margin:6px 0 0; display:flex; flex-direction:column; gap:12px}
[data-page="lumi-cards"] .l-device{background:#0f172a; border-radius:18px; padding:8px; box-shadow:0 30px 60px -30px rgba(15,23,42,.55)}
[data-page="lumi-cards"] .l-device .ph-bar{padding:2px 8px 8px}
[data-page="lumi-cards"] .l-device img{display:block; width:100%; height:auto; border-radius:10px; background:#fff; cursor:zoom-in}
[data-page="lumi-cards"] .l-proto figcaption{font-size:.88rem; line-height:1.55; color:var(--muted); text-align:center; max-width:64ch; margin:0 auto}
[data-page="lumi-cards"] .l-proto figcaption strong{color:var(--ink)}

[data-page="lumi-cards"] .l-fm{gap:14px; align-items:stretch}
[data-page="lumi-cards"] .fm{height:100%; gap:12px}
[data-page="lumi-cards"] .fm dl{gap:4px}
[data-page="lumi-cards"] .fm dt:not(:first-child){margin-top:12px; padding-top:13px; border-top:1px solid var(--line)}
[data-page="lumi-cards"] .fm dd strong{color:var(--ink); font-weight:700}
[data-page="lumi-cards"] .sev{border:1px solid transparent}
[data-page="lumi-cards"] .sev.crit{color:#b91c1c; background:#fee2e2; border-color:#ef4444}
[data-page="lumi-cards"] .sev.high{color:#92400e; background:#fef3c7; border-color:#d97706}
[data-page="lumi-cards"] .sev.ok{color:#047857; background:#ecfdf5; border-color:#059669}
:root[data-theme="dark"] [data-page="lumi-cards"] .sev.crit{color:#fda4af; background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.55)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sev.high{color:#fcd34d; background:rgba(217,119,6,.16); border-color:rgba(217,119,6,.6)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sev.ok{color:#6ee7b7; background:rgba(5,150,105,.16); border-color:rgba(5,150,105,.6)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sev.crit{color:#fda4af; background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.55)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sev.high{color:#fcd34d; background:rgba(217,119,6,.16); border-color:rgba(217,119,6,.6)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sev.ok{color:#6ee7b7; background:rgba(5,150,105,.16); border-color:rgba(5,150,105,.6)}
}
/* failure mode cards: header, detected and fixed rows align across each grid row */
[data-page="lumi-cards"] .fm{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start}
[data-page="lumi-cards"] .fm dl{display:contents}
[data-page="lumi-cards"] .fm header{align-self:start; margin-bottom:12px}
[data-page="lumi-cards"] .fm-d{align-self:start}
[data-page="lumi-cards"] .fm-f{border-top:1px solid var(--line); padding-top:13px; margin-top:12px; align-self:start}
[data-page="lumi-cards"] .fm dt:not(:first-child){margin-top:0; padding-top:0; border-top:0}
[data-page="lumi-cards"] .fm dt{margin-top:0}
[data-page="lumi-cards"] .fm dd{margin-top:4px}
:root[data-theme="dark"] [data-page="lumi-cards"] .fm dt{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .fm dt{color:#6ee7b7}}

/* lumi impact: metric cards, balanced split, infrastructure callout */
[data-page="lumi-cards"] #impact .ev-card > .k-cards .k-card{border-radius:14px; padding:10px 12px; gap:6px; box-shadow:none; transition:border-color .2s, box-shadow .2s, transform .2s}
[data-page="lumi-cards"] #impact .ev-card > .k-cards .k-card:hover{border-color:color-mix(in srgb,#059669 45%,var(--line)); box-shadow:0 12px 24px -18px rgba(6,78,59,.5); transform:translateY(-2px)}
[data-page="lumi-cards"] #impact .k-cards .k-card .k-src{font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
[data-page="lumi-cards"] #impact .k-cards .k-card .k-num{color:#059669}
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .k-cards .k-card .k-num{color:#34d399}
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .k-cards .k-card .k-src{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .k-cards .k-card .k-num{color:#34d399} :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .k-cards .k-card .k-src{color:#6ee7b7}}

[data-page="lumi-cards"] #impact .l-bars{gap:20px; margin:8px 0 6px}
[data-page="lumi-cards"] #impact .l-bars i{height:16px; border-radius:8px}
@media (min-width:861px){
  [data-page="lumi-cards"] #impact .l-split-eq .ev-card > .l-bars{margin-block:auto}
}

[data-page="lumi-cards"] .l-infra{background:#f0fdf4; border:1px solid color-mix(in srgb,#059669 22%,var(--line)); border-left:5px solid #059669; border-radius:0 16px 16px 0; padding:22px 28px 24px; display:flex; flex-direction:column; gap:8px}
[data-page="lumi-cards"] .l-infra-k{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
[data-page="lumi-cards"] .l-infra h3{margin:0; font-family:var(--serif); font-weight:600; font-size:clamp(1.2rem,2.3vw,1.5rem); line-height:1.3; letter-spacing:-.01em; color:var(--ink)}
[data-page="lumi-cards"] .l-infra p{margin:0; max-width:100ch; font-size:1rem; line-height:1.65; color:var(--muted)}
[data-page="lumi-cards"] .l-infra .l-infra-note{font-size:.88rem}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-infra{background:rgba(5,150,105,.12)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-infra-k{color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-infra{background:rgba(5,150,105,.12)} :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-infra-k{color:#6ee7b7}}
@media (max-width:700px){
  [data-page="lumi-cards"] .l-bars > div{grid-template-columns:minmax(0,1fr) auto; row-gap:6px}
  [data-page="lumi-cards"] .l-bars i{grid-column:1 / -1; grid-row:2}
  [data-page="lumi-cards"] .l-bars b{justify-self:end}
}

/* lumi: running the spec and recognition */
[data-page="lumi-cards"] #running-spec .ev-eyebrow,
[data-page="lumi-cards"] #recognition .ev-eyebrow{color:#059669}
:root[data-theme="dark"] [data-page="lumi-cards"] #running-spec .ev-eyebrow,:root[data-theme="dark"] [data-page="lumi-cards"] #recognition .ev-eyebrow{color:#34d399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] #running-spec .ev-eyebrow,:root:not([data-theme="light"]) [data-page="lumi-cards"] #recognition .ev-eyebrow{color:#34d399}}
[data-page="lumi-cards"] #running-spec .k-cards-2{align-items:stretch}
[data-page="lumi-cards"] #running-spec .l-proto{margin-top:8px}

[data-page="lumi-cards"] .l-assess{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:6px 18px; display:flex; flex-direction:column}
[data-page="lumi-cards"] .l-assess-h{margin:0; padding:12px 0 10px; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line)}
[data-page="lumi-cards"] .l-assess-row{display:flex; flex-direction:column; gap:6px; padding:14px 0 15px}
[data-page="lumi-cards"] .l-assess-row + .l-assess-row{border-top:1px solid var(--line)}
[data-page="lumi-cards"] .l-assess-k{display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:800; color:var(--ink)}
[data-page="lumi-cards"] .l-assess-k i{font-style:normal; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.78rem; line-height:1; color:#fff; flex:none}
[data-page="lumi-cards"] .l-assess-k.ok i{background:#059669}
[data-page="lumi-cards"] .l-assess-k.flag i{background:#d97706}
[data-page="lumi-cards"] .l-assess-row p{margin:0; font-size:.95rem; line-height:1.55; color:var(--muted)}

[data-page="lumi-cards"] .l-board{border:2px solid #0f172a; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 26px 50px -28px rgba(15,23,42,.55); margin-top:4px}
[data-page="lumi-cards"] .l-board img{display:block; width:100%; height:auto; cursor:zoom-in}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-board{border-color:#334155}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-board{border-color:#334155}}
@media (min-width:861px){
  [data-page="lumi-cards"] #recognition .ev-card > .l-assess{margin-top:auto}
}
[data-page="lumi-cards"] #recognition .l-board{width:100%; max-width:450px; margin-inline:auto}
[data-page="lumi-cards"] .l-assess-row{padding:18px 0 19px} [data-page="lumi-cards"] .l-assess-h{padding:14px 0 12px}

/* lumi reflection, scope panel, next project */
[data-page="lumi-cards"] .l-eyebrow{margin:0 0 6px; text-align:center; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#059669}
[data-page="lumi-cards"] .l-sub{margin:0 auto 26px; text-align:center; max-width:64ch; font-size:clamp(1.05rem,1.8vw,1.22rem); line-height:1.6; color:var(--ink)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-eyebrow{color:#34d399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-eyebrow{color:#34d399}}
[data-page="lumi-cards"] .l-reflect{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,44px); align-items:stretch}
[data-page="lumi-cards"] .l-take{display:flex; flex-direction:column; gap:12px}
[data-page="lumi-cards"] .l-take-card{flex:1; background:var(--surface); border:1px solid var(--line); border-left:3px solid #059669; border-radius:14px; padding:16px 20px 17px; display:flex; flex-direction:column; justify-content:center; gap:6px}
[data-page="lumi-cards"] .l-take-k{font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#059669}
[data-page="lumi-cards"] .l-take-card p{margin:0; font-size:.95rem; line-height:1.6; color:var(--muted)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-take-k{color:#34d399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-take-k{color:#34d399}}
[data-page="lumi-cards"] .l-sheet{background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; box-shadow:0 22px 44px -30px rgba(15,23,42,.5); display:flex; align-items:center}
[data-page="lumi-cards"] .l-sheet img{display:block; width:100%; height:auto; border-radius:12px; cursor:zoom-in}
@media (max-width:860px){[data-page="lumi-cards"] .l-reflect{grid-template-columns:minmax(0,1fr)}}

[data-page="lumi-cards"] .l-scope{border:1px solid var(--line); border-left:4px solid var(--lumi-blue); border-radius:0 12px 12px 0; background:color-mix(in srgb, var(--lumi-blue) 5%, var(--surface)); padding:20px 24px 20px 22px; display:flex; align-items:flex-start; gap:14px}
[data-page="lumi-cards"] .l-scope::before{content:""; flex:none; width:22px; height:22px; margin-top:1px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='%231d4f91' stroke-width='1.8'/%3E%3Cpath d='M12 8v0m0 8V11' stroke='%231d4f91' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
[data-page="lumi-cards"] .l-scope p{margin:0; font-size:.84rem; line-height:1.7; color:var(--muted); max-width:120ch}
[data-page="lumi-cards"] .l-scope strong{color:var(--ink); font-weight:700}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-scope{background:color-mix(in srgb, var(--lumi-blue-dk) 8%, var(--surface)); border-color:var(--line); border-left-color:var(--lumi-blue-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-scope::before{filter:brightness(1.8)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-scope{background:color-mix(in srgb, var(--lumi-blue-dk) 8%, var(--surface)); border-color:var(--line); border-left-color:var(--lumi-blue-dk)} :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-scope::before{filter:brightness(1.8)}}

[data-page="lumi-cards"] .l-next .strip{background:#ecfdf5; border:1px solid color-mix(in srgb,#059669 28%,var(--line)); border-radius:18px; padding:26px 30px}
[data-page="lumi-cards"] .l-next .strip h3{color:#064e3b}
[data-page="lumi-cards"] .l-next .strip p{color:#3f5f55}
[data-page="lumi-cards"] .l-next .strip .btn-primary{background:#064e3b; color:#fff; padding:13px 24px; border-radius:999px; font-weight:700; box-shadow:0 10px 22px -12px rgba(6,78,59,.8)}
[data-page="lumi-cards"] .l-next .strip .btn-primary:hover{background:#053f2f; color:#fff; filter:none}
[data-page="lumi-cards"] .l-next .strip .btn-primary span{display:inline-block; transition:transform .2s}
[data-page="lumi-cards"] .l-next .strip .btn-primary:hover span{transform:translateX(3px)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-next .strip{background:rgba(5,150,105,.14)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-next .strip h3{color:var(--ink)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-next .strip p{color:var(--muted)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-next .strip .btn-primary{background:#047857}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-next .strip{background:rgba(5,150,105,.14)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-next .strip h3{color:var(--ink)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-next .strip p{color:var(--muted)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-next .strip .btn-primary{background:#047857}
}

/* lumi hero: title block lives in the left column (same hierarchy as Kittii and Side Quest);
   both columns start on the same top edge */
[data-page="lumi-cards"] .ph-split{align-items:start}
[data-page="lumi-cards"] .ph-split .ph-demo{align-self:stretch}
[data-page="lumi-cards"] .ph-split .ph-info{align-self:start}
[data-page="lumi-cards"] .ph-split .ph-demo .ph-head{width:100%; max-width:none; text-align:left; margin-bottom:16px}
[data-page="lumi-cards"] .ph-split .ph-head .kicker{margin-inline:0; max-width:none; text-align:left}
[data-page="lumi-cards"] .ph-split .ph-head h1{text-align:left}
[data-page="lumi-cards"] .ph-split .ph-head .tagline{text-align:left}
@media (max-width:900px){
  [data-page="lumi-cards"] .ph-split .ph-demo .ph-head{margin-bottom:0}
}

/* lumi manual lookup: compact, centered, denser steps */
[data-page="lumi-cards"] #problem{padding-block:36px 32px}
[data-page="lumi-cards"] #problem .phase{margin-bottom:14px}
[data-page="lumi-cards"] #problem .mvp-intro{margin-bottom:0}
[data-page="lumi-cards"] #problem .ev-grid{margin-top:22px}
[data-page="lumi-cards"] .l-flow-card.l-wide{width:min(880px,calc(100vw - 48px)); padding:20px 22px 18px; gap:14px}
[data-page="lumi-cards"] .l-flow{gap:22px}
[data-page="lumi-cards"] .l-flow li{padding:12px; gap:4px; border-radius:12px}
[data-page="lumi-cards"] .l-flow li:not(:last-child)::after{right:-19px; width:16px; opacity:.4}
[data-page="lumi-cards"] .l-step-n{width:26px; height:26px; font-size:.78rem; margin-bottom:2px}
[data-page="lumi-cards"] .l-step-t{font-size:.9rem; line-height:1.28}
[data-page="lumi-cards"] .l-step-d{font-size:13px; line-height:1.4}
[data-page="lumi-cards"] .l-flow-bar{padding:9px 14px; font-size:.86rem}
@media (max-width:860px){
  [data-page="lumi-cards"] .l-flow-card.l-wide{padding:18px 16px}
  [data-page="lumi-cards"] .l-flow{gap:14px}
  [data-page="lumi-cards"] .l-flow li{padding:12px}
  [data-page="lumi-cards"] .l-flow li:not(:last-child)::after{opacity:.4; bottom:-15px}
}

/* lumi problem: exposure and cost grid constrained to match the Manual Lookup card */
[data-page="lumi-cards"] #problem .l-split.l-wide{width:min(880px,calc(100vw - 48px)); gap:32px}
[data-page="lumi-cards"] #problem .l-split .cmp th:first-child,[data-page="lumi-cards"] #problem .l-split .cmp td:first-child{width:46%}
[data-page="lumi-cards"] #problem .l-split .cmp th:not(:first-child),[data-page="lumi-cards"] #problem .l-split .cmp td:not(:first-child){width:27%}
[data-page="lumi-cards"] #problem .l-split .cmp th,[data-page="lumi-cards"] #problem .l-split .cmp td{padding-inline:8px}
[data-page="lumi-cards"] #problem .l-split .cmp th:first-child,[data-page="lumi-cards"] #problem .l-split .cmp td:first-child{padding-left:0}
[data-page="lumi-cards"] #problem .l-split .ev-card > .l-risk{margin-top:auto}
[data-page="lumi-cards"] #problem .l-split .ev-card > .ev-key:nth-last-of-type(2){margin-bottom:14px}

/* lumi: shared 1024px container for Research and Failure Modes */
[data-page="lumi-cards"] .l-wide.l-w5{width:min(1024px,calc(100vw - 48px))}
[data-page="lumi-cards"] #research .l-split.l-w5{gap:32px}
[data-page="lumi-cards"] #research .cmp{table-layout:fixed}
[data-page="lumi-cards"] #research .cmp th:first-child,[data-page="lumi-cards"] #research .cmp td:first-child{width:35%}
[data-page="lumi-cards"] #research .cmp th:last-child,[data-page="lumi-cards"] #research .cmp td:last-child{width:65%}
[data-page="lumi-cards"] .l-fm.l-w5{gap:20px}
[data-page="lumi-cards"] #evals .ev-card.ev-cont.l-w5{padding-inline:0; background:none; border:0; box-shadow:none}

/* lumi impact: token-cost + latency cards — visible boxes with green hover */
[data-page="lumi-cards"] #impact .l-split-eq .ev-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid #059669; border-radius:16px; padding:28px 28px 24px; box-shadow:0 2px 12px -6px rgba(0,0,0,.08); transition:background .25s, border-color .25s, box-shadow .25s, transform .25s, color .25s}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover{background:#064e3b; border-color:#064e3b; box-shadow:0 16px 32px -16px rgba(6,78,59,.55); transform:translateY(-3px); color:#fff}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover h3,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover p,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .ev-eyebrow,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .cmp th,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .cmp td,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .cmp td strong,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .l-note,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .l-bars span,
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .l-bars b{color:#fff}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .ev-eyebrow{color:#a7f3d0}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .cmp td strong{color:#a7f3d0}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .l-note{color:rgba(255,255,255,.6)}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .l-bars i{background:rgba(255,255,255,.25)}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .l-bars i.c{background:#a7f3d0}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .cmp{border-color:rgba(255,255,255,.15)}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .cmp th{border-color:rgba(255,255,255,.15)}
[data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover .cmp td{border-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .l-split-eq .ev-card{background:var(--surface); border-color:var(--line); border-top-color:#34d399}
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover{background:#047857; border-color:#047857}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .l-split-eq .ev-card{background:var(--surface); border-color:var(--line); border-top-color:#34d399}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .l-split-eq .ev-card:hover{background:#047857; border-color:#047857}
}

/* lumi impact: shared 1024px container for metrics, token and latency split, infrastructure callout */
[data-page="lumi-cards"] #impact .l-split.l-w5{gap:32px}
[data-page="lumi-cards"] #impact .l-cost .k-cards{gap:20px}
[data-page="lumi-cards"] #impact .cmp{table-layout:fixed}
[data-page="lumi-cards"] #impact .cmp th:first-child,[data-page="lumi-cards"] #impact .cmp td:first-child{width:44%}
[data-page="lumi-cards"] #impact .cmp th:nth-child(2),[data-page="lumi-cards"] #impact .cmp td:nth-child(2){width:20%}
[data-page="lumi-cards"] #impact .cmp th:nth-child(3),[data-page="lumi-cards"] #impact .cmp td:nth-child(3){width:36%}
[data-page="lumi-cards"] #impact .cmp th,[data-page="lumi-cards"] #impact .cmp td{padding-inline:8px}
[data-page="lumi-cards"] #impact .cmp th:first-child,[data-page="lumi-cards"] #impact .cmp td:first-child{padding-left:0}
[data-page="lumi-cards"] #impact .l-infra.l-w5 p{max-width:none}

/* lumi recognition: shared 1024px container */
[data-page="lumi-cards"] #recognition.l-w5{gap:32px}
[data-page="lumi-cards"] #impact #recognition > .ev-card{padding:34px 32px 28px; border-top:1px solid var(--line); box-shadow:0 2px 12px -6px rgba(0,0,0,.08)}

/* ===== lumi refactor: scannable primitives (bento, pipeline, matrix, guardrails, dock) ===== */
[data-page="lumi-cards"]{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
[data-page="lumi-cards"] .l-wide.l-w4{width:min(880px,calc(100vw - 48px))}
[data-page="lumi-cards"] code{font-family:var(--mono)}

/* 3. persona risk + metric delta bento */
[data-page="lumi-cards"] .l-bento{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch}
[data-page="lumi-cards"] .bn-col{display:flex; flex-direction:column; gap:12px; min-width:0}
[data-page="lumi-cards"] .bn-k{margin:0; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#047857}
[data-page="lumi-cards"] .bn-persona{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:10px}
[data-page="lumi-cards"] .bn-persona header{display:flex; align-items:center; justify-content:space-between; gap:10px}
[data-page="lumi-cards"] .bn-persona h3{margin:0; font-family:var(--serif); font-weight:600; font-size:1.2rem; letter-spacing:-.01em; color:var(--ink)}
[data-page="lumi-cards"] .bn-pill{font-family:var(--mono); font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); white-space:nowrap}
[data-page="lumi-cards"] .bn-row{margin:0; display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; font-size:.92rem; line-height:1.45; color:var(--muted)}
[data-page="lumi-cards"] .bn-l{font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding-top:3px; color:var(--muted)}
[data-page="lumi-cards"] .bn-row.risk{margin-top:auto; padding-top:10px; border-top:1px solid var(--line); color:var(--ink); font-weight:600}
[data-page="lumi-cards"] .bn-row.risk .bn-l{color:#b45309}
[data-page="lumi-cards"] .bn-stake{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:10px 14px; border-radius:12px; background:#fef3c7; border:1px solid #fde68a; color:#78350f; font-size:.86rem; line-height:1.4; font-weight:600}
[data-page="lumi-cards"] .bn-stake code{display:block; width:100%; font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase}
[data-page="lumi-cards"] .bn-kpi{flex:1; display:flex; flex-direction:column; justify-content:center; gap:4px; background:#ecfdf5; border:1px solid color-mix(in srgb,#059669 28%,var(--line)); border-radius:16px; padding:16px 20px}
[data-page="lumi-cards"] .bn-num{font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,4vw,2.9rem); line-height:1; letter-spacing:-.02em; color:#059669}
[data-page="lumi-cards"] .bn-lbl{font-weight:700; color:var(--ink); font-size:.98rem}
[data-page="lumi-cards"] .bn-kpi code{font-size:.78rem; color:var(--muted)}
[data-page="lumi-cards"] .bn-foot{margin:0; font-size:.8rem; line-height:1.5; color:var(--muted)}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-k{color:#6ee7b7}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-kpi{background:rgba(5,150,105,.14)}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-num{color:#34d399}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-row.risk .bn-l{color:#fbbf24}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-stake{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); color:#fcd34d}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-k{color:#6ee7b7}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-kpi{background:rgba(5,150,105,.14)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-num{color:#34d399}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-row.risk .bn-l{color:#fbbf24}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-stake{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); color:#fcd34d}
}
@media (max-width:760px){[data-page="lumi-cards"] .l-bento{grid-template-columns:minmax(0,1fr)}}

/* 4. dual-lane pipeline */
[data-page="lumi-cards"] .pl-callout{display:flex; align-items:center; gap:14px; background:#ecfdf5; border:1px solid color-mix(in srgb,#059669 30%,var(--line)); border-radius:14px; padding:14px 18px}
[data-page="lumi-cards"] .pl-callout p{margin:0; font-size:1rem; line-height:1.5; color:#064e3b}
[data-page="lumi-cards"] .pl-badge{font-family:var(--mono); font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:#064e3b; color:#fff; padding:4px 10px; border-radius:999px; white-space:nowrap}
[data-page="lumi-cards"] .pl-lane{background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; padding-bottom:18px}
[data-page="lumi-cards"] .pl-lane > summary{display:flex; align-items:center; gap:10px; padding:10px 18px; color:#fff; cursor:pointer; list-style:none; user-select:none}
[data-page="lumi-cards"] .pl-lane > summary::-webkit-details-marker{display:none}
[data-page="lumi-cards"] .pl-lane > summary::after{content:""; width:18px; height:18px; margin-left:auto; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center/contain; transition:transform .2s}
[data-page="lumi-cards"] .pl-lane[open] > summary::after{transform:rotate(180deg)}
[data-page="lumi-cards"] .pl-lane:not([open]){padding-bottom:0}
[data-page="lumi-cards"] .pl-lane.a > summary{background:#0f172a}
[data-page="lumi-cards"] .pl-lane.b > summary{background:#064e3b}
[data-page="lumi-cards"] .pl-lane h5{margin:0; font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
[data-page="lumi-cards"] .pl-tag{font-family:var(--mono); font-size:.66rem; font-weight:700; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.16)}
[data-page="lumi-cards"] .pl-flow{list-style:none; margin:18px 18px 0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:22px}
[data-page="lumi-cards"] .pl-flow li{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:11px 11px 12px; transition:transform .18s, border-color .18s, box-shadow .18s}
[data-page="lumi-cards"] .pl-flow li:hover{transform:translateY(-2px); border-color:#059669; box-shadow:0 12px 22px -16px rgba(6,78,59,.55)}
[data-page="lumi-cards"] .pl-flow li.step:has(+ .step)::after{content:"\2192"; position:absolute; right:-19px; top:50%; transform:translateY(-50%); width:16px; text-align:center; color:#059669; opacity:.55; font-weight:700; line-height:1}
[data-page="lumi-cards"] .pl-n{width:22px; height:22px; border-radius:50%; background:#059669; color:#fff; display:grid; place-items:center; font-size:.72rem; font-weight:800}
[data-page="lumi-cards"] .pl-lane.a .pl-n{background:#1e3a5f}
[data-page="lumi-cards"] .pl-lane.a .pl-flow li.step{background:#1d4f91; border-color:rgba(255,255,255,.15)}
[data-page="lumi-cards"] .pl-lane.a .pl-flow li.step b{color:#fff}
[data-page="lumi-cards"] .pl-lane.a .pl-flow li.step code{color:rgba(255,255,255,.72)}
[data-page="lumi-cards"] .pl-lane.a .pl-n{background:#fff; color:#1d4f91}
[data-page="lumi-cards"] .pl-lane.a .pl-flow li.step:has(+ .step)::after{color:rgba(255,255,255,.55)}
[data-page="lumi-cards"] .pl-lane.a .pl-flow li.step:hover{border-color:rgba(255,255,255,.4); box-shadow:0 12px 22px -16px rgba(29,79,145,.6)}
[data-page="lumi-cards"] .pl-flow b{font-size:.84rem; line-height:1.28; color:var(--ink)}
[data-page="lumi-cards"] .pl-flow code{font-size:.66rem; line-height:1.4; color:var(--muted)}
[data-page="lumi-cards"] .pl-flag{font-family:var(--mono); font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:999px; background:#fef3c7; color:#78350f; border:1px solid #fde68a; margin-top:auto}
[data-page="lumi-cards"] .pl-flag.ok{background:#d1fae5; color:#065f46; border-color:#6ee7b7}
[data-page="lumi-cards"] .pl-flag.stop{background:#fee2e2; color:#991b1b; border-color:#fecaca}
[data-page="lumi-cards"] .pl-flow li.guard{border-color:#f0c478}
[data-page="lumi-cards"] .pl-flow li.key{border-color:#059669; background:#ecfdf5}
[data-page="lumi-cards"] .pl-flow li.stop{border-color:#ef4444; background:#fef2f2}
[data-page="lumi-cards"] .pl-flow li.pl-hook{grid-column:span 2; background:transparent; border:1.5px dashed color-mix(in srgb,#1e3a5f 40%,var(--line)); justify-content:center}
[data-page="lumi-cards"] .pl-flow li.pl-hook:hover{transform:none; box-shadow:none; border-color:#1e3a5f}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-callout{background:rgba(5,150,105,.14)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-callout p{color:var(--ink)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-lane.a .pl-flow li.step{background:#1a4580; border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-lane.a .pl-flow li.step b{color:#fff}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-lane.a .pl-flow li.step code{color:rgba(255,255,255,.6)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-lane.a .pl-n{background:rgba(255,255,255,.9); color:#1a4580}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-flag{background:rgba(245,158,11,.16); color:#fcd34d; border-color:rgba(245,158,11,.35)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-flag.ok{background:rgba(5,150,105,.2); color:#6ee7b7; border-color:rgba(5,150,105,.4)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-flag.stop{background:rgba(240,138,138,.14); color:#f6a5a5; border-color:rgba(240,138,138,.34)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-flow li.guard{border-color:rgba(245,158,11,.4)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-flow li.key{background:rgba(5,150,105,.14)}
:root[data-theme="dark"] [data-page="lumi-cards"] .pl-flow li.stop{background:rgba(240,138,138,.09); border-color:rgba(240,138,138,.45)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-callout{background:rgba(5,150,105,.14)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-callout p{color:var(--ink)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-lane.a .pl-flow li.step{background:#1a4580; border-color:rgba(255,255,255,.1)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-lane.a .pl-flow li.step b{color:#fff}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-lane.a .pl-flow li.step code{color:rgba(255,255,255,.6)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-lane.a .pl-n{background:rgba(255,255,255,.9); color:#1a4580}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-flag{background:rgba(245,158,11,.16); color:#fcd34d; border-color:rgba(245,158,11,.35)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-flag.ok{background:rgba(5,150,105,.2); color:#6ee7b7; border-color:rgba(5,150,105,.4)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-flag.stop{background:rgba(240,138,138,.14); color:#f6a5a5; border-color:rgba(240,138,138,.34)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-flow li.guard{border-color:rgba(245,158,11,.4)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-flow li.key{background:rgba(5,150,105,.14)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .pl-flow li.stop{background:rgba(240,138,138,.09); border-color:rgba(240,138,138,.45)}
}
@media (max-width:1000px){
  [data-page="lumi-cards"] .pl-flow{grid-template-columns:minmax(0,1fr); gap:20px; margin-inline:14px}
  [data-page="lumi-cards"] .pl-flow li{display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:2px; padding:10px 12px}
  [data-page="lumi-cards"] .pl-flow li .pl-n{grid-row:1 / span 2}
  [data-page="lumi-cards"] .pl-flow li b{grid-column:2; grid-row:1}
  [data-page="lumi-cards"] .pl-flow li code{grid-column:2; grid-row:2}
  [data-page="lumi-cards"] .pl-flow li .pl-flag{grid-column:3; grid-row:1 / span 2; margin:0; justify-self:end}
  [data-page="lumi-cards"] .pl-flow li.pl-hook{grid-column:auto; display:flex; flex-direction:column; align-items:flex-start}
  [data-page="lumi-cards"] .pl-flow li.step:has(+ .step)::after{content:"\2193"; right:auto; left:23px; top:auto; bottom:-17px; transform:none}
}

/* 5a. alternatives matrix */
[data-page="lumi-cards"] .mx-card{background:var(--surface); border:1px solid var(--line); border-top:4px solid #059669; border-radius:16px; padding:20px 22px 20px; display:flex; flex-direction:column; gap:12px}
[data-page="lumi-cards"] .mx-head{display:flex; flex-direction:column; gap:4px}
[data-page="lumi-cards"] .mx-head h3{margin:0; font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink)}
[data-page="lumi-cards"] .mx{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0 8px}
[data-page="lumi-cards"] .mx thead th{font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:left; padding:0 14px 2px}
[data-page="lumi-cards"] .mx th:nth-child(1){width:27%}
[data-page="lumi-cards"] .mx th:nth-child(2){width:15%}
[data-page="lumi-cards"] .mx tbody th,[data-page="lumi-cards"] .mx tbody td{padding:13px 14px; background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; font-size:.93rem; line-height:1.45; color:var(--muted)}
[data-page="lumi-cards"] .mx tbody th{border-left:1px solid var(--line); border-radius:12px 0 0 12px; color:var(--ink); font-weight:700}
[data-page="lumi-cards"] .mx tbody td:last-child{border-right:1px solid var(--line); border-radius:0 12px 12px 0}
[data-page="lumi-cards"] .mx tbody th em{display:inline-block; margin-left:6px; font-family:var(--mono); font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:#064e3b; color:#fff; padding:2px 8px; border-radius:999px; vertical-align:2px}
[data-page="lumi-cards"] .mx tr.win th,[data-page="lumi-cards"] .mx tr.win td{background:#ecfdf5; border-color:color-mix(in srgb,#059669 40%,var(--line)); color:#064e3b; font-weight:600}
[data-page="lumi-cards"] .mx tr.win th{box-shadow:inset 4px 0 0 #059669}
[data-page="lumi-cards"] .vd{display:inline-block; font-size:.74rem; font-weight:800; padding:3px 11px; border-radius:999px; letter-spacing:.02em}
[data-page="lumi-cards"] .vd.no{color:#b91c1c; background:rgba(185,28,28,.1)}
[data-page="lumi-cards"] .vd.yes{color:#fff; background:#059669}
[data-page="lumi-cards"] .mx-vocab{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--line)}
[data-page="lumi-cards"] .mx-vocab code{font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#047857; margin-right:4px}
[data-page="lumi-cards"] .mx-chip{display:inline-flex; align-items:baseline; gap:8px; padding:6px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); font-weight:600; font-size:.9rem; color:var(--ink)}
[data-page="lumi-cards"] .mx-chip i{font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
[data-page="lumi-cards"] .mx-arr{color:#059669; font-weight:800}
:root[data-theme="dark"] [data-page="lumi-cards"] .mx tr.win th,:root[data-theme="dark"] [data-page="lumi-cards"] .mx tr.win td{background:rgba(5,150,105,.14); color:var(--ink)}
:root[data-theme="dark"] [data-page="lumi-cards"] .vd.no{color:#f08a8a; background:rgba(240,138,138,.14)}
:root[data-theme="dark"] [data-page="lumi-cards"] .mx-vocab code{color:#6ee7b7}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .mx tr.win th,:root:not([data-theme="light"]) [data-page="lumi-cards"] .mx tr.win td{background:rgba(5,150,105,.14); color:var(--ink)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .vd.no{color:#f08a8a; background:rgba(240,138,138,.14)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .mx-vocab code{color:#6ee7b7}
}
@media (max-width:700px){
  [data-page="lumi-cards"] .mx,[data-page="lumi-cards"] .mx tbody{display:block}
  [data-page="lumi-cards"] .mx thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  [data-page="lumi-cards"] .mx tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; margin-bottom:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); overflow:hidden}
  [data-page="lumi-cards"] .mx tbody th,[data-page="lumi-cards"] .mx tbody td{border:0; border-radius:0; background:transparent}
  [data-page="lumi-cards"] .mx tbody td:last-child{grid-column:1 / -1; padding-top:0; border-radius:0}
  [data-page="lumi-cards"] .mx tr.win{background:#ecfdf5; border-color:color-mix(in srgb,#059669 40%,var(--line))}
  [data-page="lumi-cards"] .mx tr.win th,[data-page="lumi-cards"] .mx tr.win td{background:transparent}
}
@media (max-width:700px) and (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .mx tr.win{background:rgba(5,150,105,.14)}}
@media (max-width:700px){:root[data-theme="dark"] [data-page="lumi-cards"] .mx tr.win{background:rgba(5,150,105,.14)}}

/* 5b. failure mode and guardrail bento */
[data-page="lumi-cards"] .fb-head{display:flex; flex-direction:column; gap:4px}
[data-page="lumi-cards"] .fb-head h3{margin:0; font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink)}
[data-page="lumi-cards"] .fb{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
[data-page="lumi-cards"] .fb-card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 14px 30px -26px rgba(15,23,42,.4); transition:border-color .2s, box-shadow .2s, transform .2s}
[data-page="lumi-cards"] .fb-card:hover{border-color:color-mix(in srgb,#059669 45%,var(--line)); transform:translateY(-2px); box-shadow:0 14px 28px -20px rgba(6,78,59,.5)}
[data-page="lumi-cards"] .fb-top{display:flex; align-items:center; gap:10px}
[data-page="lumi-cards"] .fb-n{width:24px; height:24px; border-radius:50%; background:#059669; color:#fff; font-size:.76rem; font-weight:800; display:grid; place-items:center; flex:none}
[data-page="lumi-cards"] .fb-card h4{margin:0; font-family:var(--sans); font-size:1rem; font-weight:700; line-height:1.3; color:var(--ink)}
[data-page="lumi-cards"] .fb-card h4 small{display:block; font-size:.74rem; font-weight:500; color:var(--muted)}
[data-page="lumi-cards"] .fb-g{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding-top:10px; border-top:1px solid var(--line)}
[data-page="lumi-cards"] .fb-g code{font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:999px; background:rgba(5,150,105,.1); color:#047857}
[data-page="lumi-cards"] .fb-g b{font-size:.95rem; color:var(--ink); line-height:1.3}
[data-page="lumi-cards"] .fb-card > p{margin:0; margin-top:auto; font-size:.88rem; line-height:1.45; color:var(--muted)}
[data-page="lumi-cards"] .fb-foot{margin:0}
:root[data-theme="dark"] [data-page="lumi-cards"] .fb-g code{color:#6ee7b7; background:rgba(5,150,105,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .fb-g code{color:#6ee7b7; background:rgba(5,150,105,.2)}}
@media (max-width:1000px){[data-page="lumi-cards"] .fb{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){[data-page="lumi-cards"] .fb{grid-template-columns:minmax(0,1fr)}}

/* 6. shipped artifacts dock */
[data-page="lumi-cards"] .l-dock-band{padding-block:28px 30px}
[data-page="lumi-cards"] .l-dock-band .l-eyebrow{margin-bottom:14px}
[data-page="lumi-cards"] .dock{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
[data-page="lumi-cards"] .dock-a{display:flex; align-items:center; gap:12px; min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); text-decoration:none; transition:transform .18s, border-color .18s, box-shadow .18s}
[data-page="lumi-cards"] .dock-a:hover,[data-page="lumi-cards"] .dock-a:focus-visible{transform:translateY(-2px); border-color:#059669; box-shadow:0 14px 26px -18px rgba(6,78,59,.55)}
[data-page="lumi-cards"] .dock-ico{width:38px; height:38px; flex:none; border-radius:10px; display:grid; place-items:center; background:#ecfdf5; color:#047857}
[data-page="lumi-cards"] .dock-tx{display:flex; flex-direction:column; gap:2px; min-width:0}
[data-page="lumi-cards"] .dock-tx b{font-size:.95rem; line-height:1.25}
[data-page="lumi-cards"] .dock-tx code{font-size:.7rem; color:var(--muted); overflow-wrap:anywhere}
[data-page="lumi-cards"] .dock-go{margin-left:auto; color:#059669; font-weight:800}
[data-page="lumi-cards"] .dock-a.primary{background:#064e3b; border-color:#064e3b; color:#fff}
[data-page="lumi-cards"] .dock-a.primary .dock-ico{background:rgba(255,255,255,.14); color:#fff}
[data-page="lumi-cards"] .dock-a.primary .dock-tx code,[data-page="lumi-cards"] .dock-a.primary .dock-go{color:#a7f3d0}
:root[data-theme="dark"] [data-page="lumi-cards"] .dock-ico{background:rgba(5,150,105,.2); color:#6ee7b7}
:root[data-theme="dark"] [data-page="lumi-cards"] .dock-a.primary{background:#047857; border-color:#047857}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .dock-ico{background:rgba(5,150,105,.2); color:#6ee7b7}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .dock-a.primary{background:#047857; border-color:#047857}
}
@media (max-width:760px){[data-page="lumi-cards"] .dock{grid-template-columns:minmax(0,1fr)}}
[data-page="lumi-cards"] .fb-top{min-height:38px}

/* de-green pass: neutral surfaces, colour reserved for the numbers and the selected row */
[data-page="lumi-cards"]{--l-neutral-line:#e5e7eb}
:root[data-theme="dark"] [data-page="lumi-cards"]{--l-neutral-line:rgba(255,255,255,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"]{--l-neutral-line:rgba(255,255,255,.14)}}

/* lumi KPI cards: theme blue with white text, numbers pop in lighter accent */
[data-page="lumi-cards"] .bn-kpi{flex:none; background:var(--lumi-blue); border:1px solid var(--lumi-blue); border-radius:16px; padding:14px 20px 15px; gap:3px}
[data-page="lumi-cards"] .bn-num{font-size:clamp(2rem,3.4vw,2.5rem); color:#fff !important}
[data-page="lumi-cards"] .bn-lbl{color:#fff}
[data-page="lumi-cards"] .bn-kpi code{color:rgba(255,255,255,.7)}
[data-page="lumi-cards"] .bn-foot{margin-top:auto; color:rgba(255,255,255,.65)}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-kpi{background:var(--lumi-blue-dk); border-color:var(--lumi-blue-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-num{color:#fff !important}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-lbl{color:#fff}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-kpi code{color:rgba(255,255,255,.7)}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-foot{color:rgba(255,255,255,.65)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-kpi{background:var(--lumi-blue-dk); border-color:var(--lumi-blue-dk)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-num{color:#fff !important}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-lbl{color:#fff}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-kpi code{color:rgba(255,255,255,.7)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-foot{color:rgba(255,255,255,.65)}
}
[data-page="lumi-cards"] .bn-persona{padding:14px 16px; border-color:var(--l-neutral-line)}

[data-page="lumi-cards"] .mx-card{padding:18px 20px 18px; gap:10px}
[data-page="lumi-cards"] .mx{border-spacing:0 6px}
[data-page="lumi-cards"] .mx th:nth-child(1){width:29%}
[data-page="lumi-cards"] .mx th:nth-child(2){width:14%}
[data-page="lumi-cards"] .mx tbody th,[data-page="lumi-cards"] .mx tbody td{background:var(--surface); border-color:var(--l-neutral-line); padding:10px 14px}
[data-page="lumi-cards"] .mx tr.win th,[data-page="lumi-cards"] .mx tr.win td{background:#ecfdf5; border-color:color-mix(in srgb,#059669 40%,var(--l-neutral-line))}
[data-page="lumi-cards"] .vd.no{background:#ffe4e6; color:#9f1239}
:root[data-theme="dark"] [data-page="lumi-cards"] .mx tr.win th,:root[data-theme="dark"] [data-page="lumi-cards"] .mx tr.win td{background:rgba(5,150,105,.14)}
:root[data-theme="dark"] [data-page="lumi-cards"] .vd.no{background:rgba(244,63,94,.16); color:#fda4af}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .mx tr.win th,:root:not([data-theme="light"]) [data-page="lumi-cards"] .mx tr.win td{background:rgba(5,150,105,.14)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .vd.no{background:rgba(244,63,94,.16); color:#fda4af}
}
@media (max-width:700px){
  [data-page="lumi-cards"] .mx tbody tr{background:var(--surface); border-color:var(--l-neutral-line)}
  [data-page="lumi-cards"] .mx tbody th,[data-page="lumi-cards"] .mx tbody td{background:transparent}
}
[data-page="lumi-cards"] .bn-foot{margin-top:2px}
[data-page="lumi-cards"] .bn-pill,[data-page="lumi-cards"] .mx-chip{background:var(--surface); border-color:var(--l-neutral-line)}
@media (max-width:700px){
  [data-page="lumi-cards"] .mx th:nth-child(n),[data-page="lumi-cards"] .mx td:nth-child(n){width:auto}
  [data-page="lumi-cards"] .mx tbody td:last-child,[data-page="lumi-cards"] .mx tbody th{border:0}
}

/* golden set: scenario cards */
[data-page="lumi-cards"] .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
[data-page="lumi-cards"]{--sc-deep:#064e3b; --sc-emerald:#059669; --sc-yellow:#facc15; --sc-line:rgba(6,78,59,.18)}
[data-page="lumi-cards"] .sc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:stretch}
[data-page="lumi-cards"] .sc-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--sc-deep); border-radius:16px; overflow:hidden; box-shadow:0 14px 30px -26px rgba(6,78,59,.22)}
[data-page="lumi-cards"] .sc-head{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:24px 24px 0}
[data-page="lumi-cards"] .sc-l{display:flex; align-items:center; gap:12px; flex:none}
[data-page="lumi-cards"] .sc-n{font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1; color:var(--sc-deep)}
[data-page="lumi-cards"] .sc-pill{display:inline-block; padding:3px 11px; border-radius:999px; font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.02em; line-height:1.35}
[data-page="lumi-cards"] .sc-pill.ok{background:#d1fae5; color:#047857}
[data-page="lumi-cards"] .sc-pill.hi{background:var(--sc-yellow); color:var(--sc-deep)}
[data-page="lumi-cards"] .sc-pill.neutral{background:#fff; color:var(--sc-deep); border:1px solid var(--sc-deep)}
[data-page="lumi-cards"] .sc-tests{margin:0; font-family:var(--sans); font-size:.98rem; font-weight:600; line-height:1.4; color:var(--sc-deep)}
[data-page="lumi-cards"] .sc-prompt{margin:0; display:flex; align-items:flex-start; gap:12px; padding:20px 24px}
[data-page="lumi-cards"] .sc-ico{flex:none; width:26px; height:26px; border-radius:50%; background:#d1fae5; border:1px solid var(--sc-emerald); color:var(--sc-emerald); display:grid; place-items:center}
[data-page="lumi-cards"] .sc-prompt p{margin:0; font-family:var(--sans); font-size:.95rem; line-height:1.5; font-weight:600; color:var(--ink)}
[data-page="lumi-cards"] .sc-exp{margin-top:auto; display:flex; align-items:flex-start; gap:10px; padding:0; background:transparent; border-top:1px solid var(--sc-line)}
[data-page="lumi-cards"] .sc-arr{flex:none; color:var(--sc-deep); font-weight:800; line-height:1.5}
[data-page="lumi-cards"] .sc-exp p{margin:0; font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--muted)}
:root[data-theme="dark"] [data-page="lumi-cards"]{--sc-deep:#6ee7b7; --sc-emerald:#34d399; --sc-yellow:#eab308; --sc-line:rgba(110,231,183,.25)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-card{background:var(--surface); border-color:var(--sc-deep)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-pill.ok{background:rgba(52,211,153,.16); color:#86efac}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-pill.hi{background:rgba(234,179,8,.22); color:#fde68a}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-pill.neutral{background:transparent; color:var(--sc-deep); border-color:var(--sc-deep)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-ico{background:rgba(52,211,153,.14); border-color:var(--sc-emerald); color:var(--sc-emerald)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-exp{border-top-color:rgba(110,231,183,.25)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"]{--sc-deep:#6ee7b7; --sc-emerald:#34d399; --sc-yellow:#eab308; --sc-line:rgba(110,231,183,.25)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-card{background:var(--surface); border-color:var(--sc-deep)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-pill.ok{background:rgba(52,211,153,.16); color:#86efac}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-pill.hi{background:rgba(234,179,8,.22); color:#fde68a}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-pill.neutral{background:transparent; color:var(--sc-deep); border-color:var(--sc-deep)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-ico{background:rgba(52,211,153,.14); border-color:var(--sc-emerald); color:var(--sc-emerald)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-exp{border-top-color:rgba(110,231,183,.25)}
}
@media (max-width:760px){
  [data-page="lumi-cards"] .sc-grid{grid-template-columns:minmax(0,1fr); gap:16px}
}
@media (min-width:761px){
  [data-page="lumi-cards"] .sc-card{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0}
  [data-page="lumi-cards"] .sc-head{align-self:start}
  [data-page="lumi-cards"] .sc-exp{margin-top:0; align-self:stretch}
}

/* roi bento: row-aligned columns (persona card N sits level with KPI card N, stake strip level with footnote) */
[data-page="lumi-cards"] .l-bento{grid-template-rows:auto auto auto auto; row-gap:12px; align-items:stretch}
[data-page="lumi-cards"] .bn-col{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:12px}
[data-page="lumi-cards"] .bn-col > .bn-persona,[data-page="lumi-cards"] .bn-col > .bn-kpi{align-self:stretch}
[data-page="lumi-cards"] .bn-kpi{justify-content:center}
[data-page="lumi-cards"] .bn-foot{margin-top:0; align-self:center}

/* pipeline nodes: shared row tracks so numbers, titles, metadata and flags line up across every card in a lane */
@media (min-width:1001px){
  [data-page="lumi-cards"] .pl-flow{grid-template-rows:auto auto auto auto; column-gap:22px; row-gap:0}
  [data-page="lumi-cards"] .pl-flow li{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:6px; align-content:start; justify-items:start; padding:12px 12px 12px}
  [data-page="lumi-cards"] .pl-flow li .pl-n{grid-row:1}
  [data-page="lumi-cards"] .pl-flow li b{grid-row:2; align-self:start}
  [data-page="lumi-cards"] .pl-flow li code{grid-row:3; align-self:start}
  [data-page="lumi-cards"] .pl-flow li .pl-flag{grid-row:4; align-self:end; margin:0; white-space:nowrap; letter-spacing:0; font-size:.6rem}
  [data-page="lumi-cards"] .pl-flow li.pl-hook{grid-column:span 2; align-content:start}
  [data-page="lumi-cards"] .pl-flow li.pl-hook b{grid-row:2}
  [data-page="lumi-cards"] .pl-flow li.pl-hook code{grid-row:3}
}
@media (min-width:1001px){
  [data-page="lumi-cards"] .pl-flow li .pl-flag{white-space:normal; line-height:1.3; border-radius:10px; max-width:100%; letter-spacing:.02em}
  [data-page="lumi-cards"] .pl-flow li b{font-size:.82rem}
}

/* scenario cards: expandable expected result (content stays visible without JS) */
[data-page="lumi-cards"] .sc-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:-6px}
[data-page="lumi-cards"] .sc-bar[hidden]{display:none}
[data-page="lumi-cards"] .sc-hint{font-size:.82rem; color:var(--muted)}
[data-page="lumi-cards"] .sc-all{font:inherit; font-family:var(--sans); font-size:.8rem; font-weight:700; color:var(--sc-emerald); background:#fff; border:1px solid var(--sc-deep); border-radius:999px; padding:6px 14px; cursor:pointer; transition:border-color .18s, background .18s}
[data-page="lumi-cards"] .sc-all:hover{border-color:var(--sc-emerald)}
[data-page="lumi-cards"] .sc-all:focus-visible,[data-page="lumi-cards"] .sc-tg:focus-visible{outline:2px solid var(--sc-emerald); outline-offset:2px}
[data-page="lumi-cards"] .sc-exp{display:block; padding:0}
[data-page="lumi-cards"] .sc-tg{all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:10px; padding:16px 24px; cursor:default}
[data-page="lumi-cards"] .sc-tl{font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--sc-deep)}
[data-page="lumi-cards"] .sc-chev{display:none; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--sc-deep); border-bottom:2px solid var(--sc-deep); transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s}
[data-page="lumi-cards"] .sc-x p{margin:0; padding:0 24px 20px 46px; font-family:var(--sans); font-size:.9rem; line-height:1.5; color:var(--muted)}
[data-page="lumi-cards"] .sc-js .sc-tg{cursor:pointer}
[data-page="lumi-cards"] .sc-js .sc-tg:hover .sc-tl{color:var(--sc-emerald)}
[data-page="lumi-cards"] .sc-js .sc-chev{display:block}
[data-page="lumi-cards"] .sc-js .sc-card.open .sc-chev{transform:rotate(-135deg) translate(-2px,-2px)}
[data-page="lumi-cards"] .sc-js .sc-x{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease}
[data-page="lumi-cards"] .sc-js .sc-x > p{overflow:hidden; min-height:0; padding-block:0; transition:padding .26s ease}
[data-page="lumi-cards"] .sc-js .sc-card:not(.open) .sc-x{visibility:hidden}
[data-page="lumi-cards"] .sc-js .sc-card.open .sc-x{grid-template-rows:1fr}
[data-page="lumi-cards"] .sc-js .sc-card.open .sc-x > p{padding-bottom:20px}
[data-page="lumi-cards"] .sc-js .sc-card.open{border-color:var(--sc-emerald)}
@media (prefers-reduced-motion:reduce){[data-page="lumi-cards"] .sc-js .sc-x,[data-page="lumi-cards"] .sc-js .sc-x > p,[data-page="lumi-cards"] .sc-chev{transition:none}}

/* impact: data points in the Lumi theme blue instead of green */
[data-page="lumi-cards"]{--lumi-blue:#1d4f91; --lumi-blue-dk:#7dabe0}
[data-page="lumi-cards"] #impact .k-cards .k-card .k-num{color:var(--lumi-blue)}
[data-page="lumi-cards"] #impact .k-cards .k-card .k-src{color:var(--muted)}
[data-page="lumi-cards"] #impact .l-bars i.c{background:var(--lumi-blue)}
[data-page="lumi-cards"] #impact .l-bars i{background:color-mix(in srgb,var(--lumi-blue) 16%,var(--line))}
[data-page="lumi-cards"] #impact .l-bars b{color:var(--lumi-blue)}
[data-page="lumi-cards"] #impact .cmp tbody tr:last-child td:last-child strong{color:var(--lumi-blue)}
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .k-cards .k-card .k-num,
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .l-bars b,
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .cmp tbody tr:last-child td:last-child strong{color:var(--lumi-blue-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .k-cards .k-card .k-src{color:var(--muted)}
:root[data-theme="dark"] [data-page="lumi-cards"] #impact .l-bars i.c{background:var(--lumi-blue-dk)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .k-cards .k-card .k-num,
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .l-bars b,
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .cmp tbody tr:last-child td:last-child strong{color:var(--lumi-blue-dk)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .k-cards .k-card .k-src{color:var(--muted)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #impact .l-bars i.c{background:var(--lumi-blue-dk)}
}

/* lumi: every data point on the page in the theme blue (hero highlights, ROI KPIs, eval metrics) */
[data-page="lumi-cards"] .ph-hl dt,
[data-page="lumi-cards"] .bn-num,
[data-page="lumi-cards"] .k-card .k-num{color:var(--lumi-blue)}
:root[data-theme="dark"] [data-page="lumi-cards"] .ph-hl dt,
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-num,
:root[data-theme="dark"] [data-page="lumi-cards"] .k-card .k-num{color:var(--lumi-blue-dk)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .ph-hl dt,
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-num,
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .k-card .k-num{color:var(--lumi-blue-dk)}
}

/* lumi evals: beat the older #evals green rule; labels neutral */
[data-page="lumi-cards"] #evals .k-cards .k-card .k-num{color:#059669}
[data-page="lumi-cards"] #evals .k-cards .k-card .k-src{color:var(--muted)}
:root[data-theme="dark"] [data-page="lumi-cards"] #evals .k-cards .k-card .k-num{color:#34d399}
:root[data-theme="dark"] [data-page="lumi-cards"] #evals .k-cards .k-card .k-src{color:var(--muted)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #evals .k-cards .k-card .k-num{color:#34d399}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] #evals .k-cards .k-card .k-src{color:var(--muted)}
}

/* lumi scenario cards: Expected result in the deep-green brand accent */
[data-page="lumi-cards"]{--lumi-vio:var(--sc-deep); --lumi-vio-bg:#ecfdf5; --lumi-vio-line:#a7f3d0; --lumi-vio-dk:var(--sc-emerald)}
[data-page="lumi-cards"] .sc-exp{background:transparent; border-top-color:var(--sc-line)}
[data-page="lumi-cards"] .sc-arr{color:var(--lumi-vio)}
[data-page="lumi-cards"] .sc-tl{color:var(--lumi-vio)}
[data-page="lumi-cards"] .sc-js .sc-tg:hover .sc-tl{color:var(--lumi-vio)}
[data-page="lumi-cards"] .sc-chev{border-right-color:var(--lumi-vio); border-bottom-color:var(--lumi-vio)}
[data-page="lumi-cards"] .sc-x p{color:var(--ink)}
[data-page="lumi-cards"] .sc-js .sc-card.open{border-color:color-mix(in srgb,var(--lumi-vio) 45%,var(--l-neutral-line,#e5e7eb))}
[data-page="lumi-cards"] .sc-all{color:var(--lumi-vio)}
[data-page="lumi-cards"] .sc-all:hover{border-color:var(--lumi-vio)}
[data-page="lumi-cards"] .sc-all:focus-visible,[data-page="lumi-cards"] .sc-tg:focus-visible{outline-color:var(--lumi-vio)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-exp{background:transparent; border-top-color:var(--sc-line)}
:root[data-theme="dark"] [data-page="lumi-cards"] :is(.sc-arr,.sc-tl,.sc-all,.sc-js .sc-tg:hover .sc-tl){color:var(--lumi-vio-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-chev{border-right-color:var(--lumi-vio-dk); border-bottom-color:var(--lumi-vio-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-js .sc-card.open{border-color:color-mix(in srgb,var(--lumi-vio-dk) 45%,var(--l-neutral-line,#e5e7eb))}
:root[data-theme="dark"] [data-page="lumi-cards"] .sc-all:hover{border-color:var(--lumi-vio-dk)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-exp{background:transparent; border-top-color:var(--sc-line)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] :is(.sc-arr,.sc-tl,.sc-all,.sc-js .sc-tg:hover .sc-tl){color:var(--lumi-vio-dk)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-chev{border-right-color:var(--lumi-vio-dk); border-bottom-color:var(--lumi-vio-dk)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-js .sc-card.open{border-color:color-mix(in srgb,var(--lumi-vio-dk) 45%,var(--l-neutral-line,#e5e7eb))}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .sc-all:hover{border-color:var(--lumi-vio-dk)}
}
@media (min-width:761px){[data-page="lumi-cards"] .sc-exp{align-self:start}}

/* lumi evals: "Who grades" as an optional disclosure, same violet family as Expected result */
[data-page="lumi-cards"] .l-grade{display:block; padding:0; background:var(--lumi-vio-bg); border:1px solid var(--lumi-vio-line); border-left:4px solid var(--lumi-vio); border-radius:0 14px 14px 0}
[data-page="lumi-cards"] .l-grade-h{list-style:none; display:flex; align-items:flex-start; gap:14px; padding:16px 18px 16px 20px; cursor:pointer}
[data-page="lumi-cards"] .l-grade-h::-webkit-details-marker{display:none}
[data-page="lumi-cards"] .l-grade-t{flex:1; min-width:0}
[data-page="lumi-cards"] .l-grade-c{flex:none; width:8px; height:8px; margin-top:.6em; border-right:2px solid var(--lumi-vio); border-bottom:2px solid var(--lumi-vio); transform:rotate(45deg); transition:transform .22s}
[data-page="lumi-cards"] .l-grade[open] .l-grade-c{transform:rotate(-135deg)}
[data-page="lumi-cards"] .l-grade-h:focus-visible{outline:2px solid var(--lumi-vio); outline-offset:-2px; border-radius:0 12px 12px 0}
[data-page="lumi-cards"] .l-grade .l-phases{padding:0 20px 20px}
[data-page="lumi-cards"] .l-phase-k{color:var(--lumi-vio)}
[data-page="lumi-cards"] .l-phase-k span{background:var(--lumi-vio)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-grade{background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.3); border-left-color:var(--lumi-vio-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-grade-c{border-color:var(--lumi-vio-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-phase-k{color:var(--lumi-vio-dk)}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-phase-k span{background:var(--lumi-vio-dk); color:#0a1e3d}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-grade{background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.3); border-left-color:var(--lumi-vio-dk)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-grade-c{border-color:var(--lumi-vio-dk)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-phase-k{color:var(--lumi-vio-dk)}
  :root:not([data-theme="light"]) [data-page="lumi-cards"] .l-phase-k span{background:var(--lumi-vio-dk); color:#14122b}
}
@media (prefers-reduced-motion:reduce){[data-page="lumi-cards"] .l-grade-c{transition:none}}

/* lumi: post-generation validation, centred 880px callout with badge above the copy */
[data-page="lumi-cards"] .l-post{flex-direction:column; align-items:center; gap:12px; padding:20px 28px 22px; text-align:center}
[data-page="lumi-cards"] .l-post-copy{align-items:center; max-width:680px}
[data-page="lumi-cards"] .l-post-copy{gap:10px; max-width:640px}
[data-page="lumi-cards"] .l-post-copy p{text-wrap:balance}
[data-page="lumi-cards"] .l-post-copy .l-post-sub{max-width:560px; line-height:1.6}

/* lumi impact: "Where the cost sits" as a toggle list */
[data-page="lumi-cards"] .l-tog-list{display:flex; flex-direction:column; gap:8px; margin:6px 0 4px}
[data-page="lumi-cards"] .l-tog{background:var(--surface); border:1px solid color-mix(in srgb,#059669 20%,var(--line)); border-radius:12px}
[data-page="lumi-cards"] .l-tog summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; cursor:pointer; font-weight:700; font-size:.98rem; color:var(--ink); border-radius:12px}
[data-page="lumi-cards"] .l-tog summary::-webkit-details-marker{display:none}
[data-page="lumi-cards"] .l-tog summary:focus-visible{outline:2px solid #059669; outline-offset:2px}
[data-page="lumi-cards"] .l-tog summary i{flex:none; width:8px; height:8px; border-right:2px solid #059669; border-bottom:2px solid #059669; transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s}
[data-page="lumi-cards"] .l-tog[open] summary i{transform:rotate(-135deg) translate(-2px,-2px)}
[data-page="lumi-cards"] .l-tog[open]{border-color:color-mix(in srgb,#059669 40%,var(--line))}
[data-page="lumi-cards"] .l-infra .l-tog p{padding:0 16px 15px; font-size:.95rem; line-height:1.6}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-tog summary i{border-color:#6ee7b7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-tog summary i{border-color:#6ee7b7}}
@media (prefers-reduced-motion:reduce){[data-page="lumi-cards"] .l-tog summary i{transition:none}}

/* lumi recognition: assessment feedback rows as toggles */
[data-page="lumi-cards"] .l-assess-row{display:block; padding:0}
[data-page="lumi-cards"] .l-assess-row summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; cursor:pointer}
[data-page="lumi-cards"] .l-assess-row summary::-webkit-details-marker{display:none}
[data-page="lumi-cards"] .l-assess-row summary:focus-visible{outline:2px solid #059669; outline-offset:2px; border-radius:6px}
[data-page="lumi-cards"] .l-assess-c{flex:none; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s}
[data-page="lumi-cards"] .l-assess-row[open] .l-assess-c{transform:rotate(-135deg) translate(-2px,-2px)}
[data-page="lumi-cards"] .l-assess-row p{padding:0 0 18px}
@media (prefers-reduced-motion:reduce){[data-page="lumi-cards"] .l-assess-c{transition:none}}
@media (min-width:861px){[data-page="lumi-cards"] #recognition .ev-card > .l-assess{margin-top:4px}}

/* lumi reflection: takeaways as toggle rows */
[data-page="lumi-cards"] .l-take{justify-content:flex-start}
[data-page="lumi-cards"] .l-take-card{flex:none; display:block; padding:0}
[data-page="lumi-cards"] .l-take-card summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; cursor:pointer; border-radius:14px}
[data-page="lumi-cards"] .l-take-card summary::-webkit-details-marker{display:none}
[data-page="lumi-cards"] .l-take-card summary:focus-visible{outline:2px solid #059669; outline-offset:2px}
[data-page="lumi-cards"] .l-take-c{flex:none; width:8px; height:8px; border-right:2px solid #059669; border-bottom:2px solid #059669; transform:rotate(45deg) translate(-2px,-2px); transition:transform .22s}
[data-page="lumi-cards"] .l-take-card[open] .l-take-c{transform:rotate(-135deg) translate(-2px,-2px)}
[data-page="lumi-cards"] .l-take-card[open]{border-color:color-mix(in srgb,#059669 40%,var(--line))}
[data-page="lumi-cards"] .l-take-card p{padding:0 20px 18px}
:root[data-theme="dark"] [data-page="lumi-cards"] .l-take-c{border-color:#34d399}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .l-take-c{border-color:#34d399}}
@media (prefers-reduced-motion:reduce){[data-page="lumi-cards"] .l-take-c{transition:none}}
@media (min-width:861px){[data-page="lumi-cards"] .l-take{justify-content:center}}

/* lumi problem: tighter header block (shorter rules, smaller gap, narrower intro) */
[data-page="lumi-cards"] #problem .phase{margin-bottom:18px; gap:clamp(12px,2.4vw,18px)}
[data-page="lumi-cards"] #problem .phase::before,[data-page="lumi-cards"] #problem .phase::after{width:clamp(20px,4vw,48px)}
[data-page="lumi-cards"] #problem .phase h2{font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.2}
[data-page="lumi-cards"] #problem .mvp-intro{max-width:66ch; font-size:clamp(1rem,1.5vw,1.1rem); line-height:1.6; margin:0 auto 22px}

/* lumi personas: consequence/volume tags in the same amber as the Risk label */
[data-page="lumi-cards"] .bn-pill{background:#fef3c7; border-color:#fde68a; color:#b45309}
:root[data-theme="dark"] [data-page="lumi-cards"] .bn-pill{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); color:#fbbf24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-page="lumi-cards"] .bn-pill{background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); color:#fbbf24}}

/* lumi ROI column: KPI cards stretch to match persona card rows */
@media (min-width:761px){
  [data-page="lumi-cards"] .l-bento > .bn-col:last-child{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:12px}
  [data-page="lumi-cards"] .l-bento > .bn-col:last-child > .bn-kpi{align-self:stretch; justify-content:center; padding:18px 24px}
}

/* lumi full-page rhythm: text 760, callouts 880, grids and diagrams 1024 (guardrails, reflection and scope joined the 1024 set) */
[data-page="lumi-cards"] .l-scope p{max-width:none}
/* problem bento: personas flex, ROI column a fixed content-sized rail, no dead space on the right */
@media (min-width:761px){
  [data-page="lumi-cards"] .l-bento{grid-template-columns:minmax(0,1fr) 280px; column-gap:20px}
  [data-page="lumi-cards"] .l-bento > .bn-col:last-child{width:auto; justify-self:stretch}
  [data-page="lumi-cards"] .l-bento > .bn-col:last-child > .bn-k,
  [data-page="lumi-cards"] .l-bento > .bn-col:last-child > .bn-foot{width:auto; min-width:0}
}

/* guardrail cards: label, title and body rows align across the four cards */
@media (min-width:1001px){
  [data-page="lumi-cards"] .l-gr{grid-template-rows:auto auto 1fr}
  [data-page="lumi-cards"] .l-gr .k-card{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:6px; height:auto; align-content:start}
}
[data-page="lumi-cards"] .l-gr .k-card h4{text-wrap:balance}
/* next project strip joins the 1024 column of the dock above it */
[data-page="lumi-cards"] .l-next .strip{max-width:1024px; margin-inline:auto}
@media (min-width:861px){.cap-card[open] .cap-h3{min-height:2.5em}}
.ct-intent{gap:9px; padding-inline:12px}
.ct-intent::after{width:15px; height:15px}

/* contact: compact, centred two-column layout with a tidy sidebar */
.ct-copy-email,.ct-share-copy{min-width:5.9rem}
@media (min-width:981px){
  #contact .ct-grid{max-width:1040px; margin-inline:auto; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:32px; align-items:start}
  #contact .ct-panel{grid-template-rows:none; grid-auto-rows:auto; position:sticky; top:84px}
}
@media (min-width:981px) and (max-width:1100px){
  #contact .ct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:24px}
}
@media (min-width:821px) and (max-width:980px){
  #contact .ct-grid{max-width:640px; margin-inline:auto; grid-template-columns:minmax(0,1fr); gap:20px}
  #contact .ct-panel{grid-template-rows:none; grid-auto-rows:auto}
}

/* Contact email tile on narrow phones: copy button drops below so the full address stays visible */
@media (max-width:440px){
  .ct-email{flex-wrap:wrap; row-gap:10px}
  .ct-email .ct-tile-body{flex:1 1 calc(100% - 54px)}
  .ct-email .ct-tile-val{overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere}
  .ct-email .ct-copy-email{flex:1 1 100%; margin-top:0}
}