/* ==========================================================================
   PYLON PRODUCT MOCKUP KIT
   Drawn product UI for marketing pages. Load AFTER pylon.css.
   Put a `container-type:inline-size` frame around each `.mk` (the mockup
   scales itself from the container width; never set sizes in px inside).
   ========================================================================== */
/* ---- product mockups: drawn, not screenshotted. Type scales with the
       container so the same markup reads at any frame width. ---- */
.mk{position:absolute;inset:0;display:flex;flex-direction:column;color:var(--t2);font-size:clamp(8.5px,1.42cqw,14px);line-height:1.45;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#141419,#0b0b0e 58%);--crit:#e2564a;--high:#d99a2b;--med:#7aa2ff;--good:#3ec98a}
.mk::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(130% 85% at 50% -12%,color-mix(in srgb,var(--acc-txt,var(--indigo-txt)) 12%,transparent),transparent 62%)}
.mk>*{position:relative;z-index:1}
.mk-bar .glyph{width:1.05em;height:1.05em;flex:none}
.mk-bar{display:flex;align-items:center;gap:.9em;padding:.8em 1.1em;border-bottom:1px solid var(--rule-2);background:linear-gradient(180deg,#1b1b23,#121217);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);flex:none}
.mk-bar .dot{width:.65em;height:.65em;background:var(--acc);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 75%,transparent);flex:none}
.mk-cr{font-family:var(--mono);font-size:.8em;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mk-cr b{color:var(--t2);font-weight:500}
.mk-cr i{font-style:normal;opacity:.45;margin:0 .35em}
.mk-w{margin-left:auto;display:flex;gap:.45em}
.mk-w i{width:.42em;height:.42em;background:var(--rule);display:block}
.mk-b{flex:1;min-height:0;padding:1.15em;display:flex;flex-direction:column;gap:.95em;overflow:hidden}
.mk-k{display:block;font-family:var(--mono);font-size:.78em;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);margin-bottom:.4em}
.mk-t{display:block;font-size:1.4em;font-weight:500;letter-spacing:-.03em;color:var(--t1);line-height:1.1}
.mk-s{font-family:var(--mono);font-size:.74em;letter-spacing:.16em;text-transform:uppercase;color:var(--t4);margin:1em 0 .5em;flex:none}
.mk-d{margin-top:.7em;color:var(--t3);flex:none}
.mk-k,.mk-t,.chips,.own{flex:none}
.mk-hd{display:grid;gap:.9em;padding:.5em 0;border-bottom:1px solid var(--rule-2);flex:none}
.mk-hd span{font-family:var(--mono);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* surfaces */
.pane-card{border:1px solid var(--rule-2);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
/* status chips */
.pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:.95em;letter-spacing:-.005em;white-space:nowrap;color:var(--t3)}
.pill i{width:.46em;height:.46em;flex:none;background:currentColor;border-radius:50%}
.pill.crit{color:#ff7a6b}
.pill.high{color:#e2a84f}
.pill.med{color:#8aa9ff}
.pill.good{color:#4fc98a}
.pill.acc{color:var(--acc-txt,var(--indigo-txt))}
/* the one boxed element: a framework or reference token */
.chip{display:inline-block;font-family:var(--mono);font-size:.8em;color:var(--t3);border:1px solid var(--rule-2);padding:.3em .55em;white-space:nowrap}
.mat{display:inline-flex;align-items:center;gap:.28em}
.mat i{width:.42em;height:.42em;background:rgba(255,255,255,.14);display:block}
.mat i.on{background:var(--acc);box-shadow:0 0 5px color-mix(in srgb,var(--acc) 60%,transparent)}
.mat u{text-decoration:none;font-family:var(--mono);font-size:.8em;color:var(--t3);margin-left:.45em}
.av{width:2em;height:2em;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.76em;font-weight:600;letter-spacing:.01em;color:#fff;flex:none}
.trk{height:.26em;background:rgba(255,255,255,.08);display:block}
.trk i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc-txt,var(--indigo-txt)));box-shadow:0 0 9px color-mix(in srgb,var(--acc) 55%,transparent)}
.chips{display:flex;flex-wrap:wrap;gap:.4em}
.chips span{font-family:var(--mono);font-size:.72em;letter-spacing:.06em;color:var(--t3);border:1px solid var(--rule-2);background:rgba(255,255,255,.03);padding:.28em .5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* scoped to .mk: the homepage's real tab switcher also owns .tabs */
.mk .tabs{display:flex;gap:1.5em;border-bottom:1px solid var(--rule-2);flex:none;margin-bottom:.2em}
.mk .tabs span{font-family:var(--mono);font-size:.74em;letter-spacing:.14em;text-transform:uppercase;color:var(--t4);padding-bottom:.7em;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.mk .tabs span.on{color:var(--t1);border-bottom-color:var(--acc)}
/* 01 connections */
.cn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em;flex:1;min-height:0}
.cn-c{border:1px solid var(--rule-2);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);padding:.75em;display:flex;flex-direction:column;justify-content:space-between;gap:.5em;min-width:0}
.cn-x{display:flex;justify-content:space-between;gap:.6em;padding:.5em 0;border-top:1px solid var(--rule-3);border-bottom:1px solid var(--rule-3);font-family:var(--mono);font-size:.72em;letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.cn-x b{color:var(--t2);font-weight:500}
.cn-t{display:flex;align-items:center;gap:.6em;min-width:0}
.cn-t img{width:2em;height:2em;object-fit:contain;flex:none}
.cn-n{min-width:0;flex:1}
.cn-n b{display:block;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-n i{display:block;font-style:normal;font-size:.84em;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-c em{font-style:normal;margin-top:auto;font-family:var(--mono);font-size:.7em;letter-spacing:.06em;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-f{display:flex;flex-wrap:wrap;gap:.5em 1.4em;padding-top:.85em;border-top:1px solid var(--rule-2);flex:none}
.cn-f span{font-family:var(--mono);font-size:.74em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.cn-f span b{color:var(--t2);font-weight:500}
/* 02 strategy */
.st3{display:flex;gap:.6em;flex:none}
.st3 div{border:1px solid var(--rule-2);background:rgba(255,255,255,.02);padding:.5em .75em;min-width:4.6em}
.st3 u{display:block;text-decoration:none;font-family:var(--mono);font-size:.64em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-bottom:.35em;white-space:nowrap}
.st3 b{display:block;font-size:1.35em;font-weight:500;letter-spacing:-.04em;color:var(--t1);line-height:1}
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em;flex:1;min-height:0}
.sg-c{border:1px solid var(--rule-2);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);padding:.75em;display:flex;flex-direction:column;gap:.55em;min-width:0}
.sg-c>b{font-weight:500;color:var(--t1);line-height:1.25}
.sg-p{display:flex;gap:1.1em;flex-wrap:wrap}
.sg-pct{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72em;color:var(--t4)}
.sg-l{font-family:var(--mono);font-size:.66em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-top:.35em}
.sg-l.b{margin-top:auto}
.okr{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;padding:.32em 0;border-bottom:1px solid var(--rule-3);font-size:.88em;color:var(--t3)}
.okr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okr em{font-style:normal;font-family:var(--mono);font-size:.84em;color:var(--t2);flex:none}
/* 03 assess */
.mka-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1em;flex:none}
.mka-p{text-align:right;flex:none}
.mka-p b{display:block;font-size:2.1em;font-weight:500;letter-spacing:-.045em;color:var(--t1);line-height:1}
.mka-p b em{font-style:normal;font-size:.46em;color:var(--t4);margin-left:.12em}
.mka-p span{font-family:var(--mono);font-size:.76em;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.mka-f{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75em;padding-top:.95em;border-top:1px solid var(--rule-2);flex:none}
.mka-f div{display:flex;flex-direction:column;gap:.45em;min-width:0}
.mka-f span{font-family:var(--mono);font-size:.74em;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);overflow:hidden;text-overflow:ellipsis}
.mka-f em{font-style:normal;font-family:var(--mono);font-size:.76em;color:var(--t3)}
.mka-l{flex:1;min-height:0;display:flex;flex-direction:column}
.mka-l .mka-r,.mkf-l .mkf-r,.mkc-list .mkc-i{flex:1;min-height:0}
.mkf-l,.mkc-list{flex:1;min-height:0;display:flex;flex-direction:column}
.mka-l .mk-hd,.mka-r{grid-template-columns:minmax(0,1fr) 6.5em 7.5em}
.mka-r{display:grid;align-items:center;gap:1em;padding:.6em 0;border-bottom:1px solid var(--rule-3)}
.mka-r .c b{font-family:var(--mono);font-size:.84em;font-weight:400;color:var(--t4);margin-right:.7em}
.mka-r .c span{color:var(--t2)}
/* 04 controls */
.mkc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding:0;gap:0}
.mkc-l{padding:1.15em;border-right:1px solid var(--rule-2);min-width:0;display:flex;flex-direction:column}
.mkc-r{padding:1.15em;min-width:0;display:flex;flex-direction:column;background:rgba(255,255,255,.015)}
.mkc-i{display:grid;grid-template-columns:3.4em minmax(0,1fr) auto;gap:.75em;align-items:center;padding:.6em .55em;margin:0 -.55em;border-bottom:1px solid var(--rule-3)}
/* was hardcoded indigo rgba(99,102,241,…); driven off --acc so .mkc survives
   its first use on a teal or amber page */
.mkc-i.on{background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 18%,transparent),color-mix(in srgb,var(--acc) 2%,transparent));box-shadow:inset 2px 0 0 var(--acc-txt)}
.mkc-i .id{font-family:var(--mono);font-size:.82em;color:var(--t4)}
.mkc-i .nm{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev{display:flex;justify-content:space-between;align-items:center;gap:.7em;padding:.5em 0;border-bottom:1px solid var(--rule-3);color:var(--t3);flex:none}
.ev span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev em{font-style:normal;font-family:var(--mono);font-size:.78em;color:var(--t4);white-space:nowrap}
/* .grow lets a run of evidence rows share the leftover height of its frame,
   the way .mini-r does, instead of stacking tight and leaving dead space. */
.ev.grow{flex:1;min-height:0}
.own{display:flex;align-items:center;gap:.6em;margin-top:auto;padding-top:.9em;border-top:1px solid var(--rule-2);color:var(--t3);white-space:nowrap}
.own em{font-style:normal;color:var(--t4);margin-left:auto;font-family:var(--mono);font-size:.74em;letter-spacing:.1em;text-transform:uppercase}
/* 05 findings */
.mkf-hd,.mkf-r{grid-template-columns:5.6em minmax(0,1fr) 5.4em 3.4em 6em 2.6em}
.mkf-r{display:grid;align-items:center;gap:.9em;padding:.6em 0;border-bottom:1px solid var(--rule-3)}
.mkf-r .f b{display:block;font-size:1.06em;font-weight:500;letter-spacing:-.015em;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkf-r .f span{display:block;margin-top:.28em;font-family:var(--mono);font-size:.76em;color:var(--t4)}
.mkf-r .fw{font-family:var(--mono);font-size:.78em;color:var(--t4)}
.age{font-family:var(--mono);font-size:.82em;color:var(--t4);text-align:right}
.age.o{color:#ff8f82}
/* 06 projects */
.mkp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75em;align-content:stretch;flex:1;min-height:0}
.mkp-c{display:flex;flex-direction:column;gap:.5em;min-width:0;border:1px solid var(--rule-3);background:rgba(255,255,255,.016);padding:.6em}
.mkp-h{display:flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);padding-bottom:.55em;border-bottom:1px solid var(--rule-2);flex:none}
.mkp-h i{width:.48em;height:.48em;flex:none}
.mkp-h em{font-style:normal;margin-left:auto;color:var(--t3)}
.card{border:1px solid var(--rule-2);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);padding:.6em;display:flex;flex-direction:column;gap:.45em;min-width:0;flex:none}
.card b{font-weight:400;color:var(--t2);line-height:1.3}
.card .f{display:flex;align-items:center;gap:.5em}
.card .tag{font-family:var(--mono);font-size:.72em;color:var(--t4);border:1px solid var(--rule-2);padding:.18em .38em}
.card .flag{font-family:var(--mono);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:#f2b350}
.card.done b{color:var(--t4)}
.mkp-f{display:flex;flex-wrap:wrap;gap:.5em 1.4em;padding-top:.85em;border-top:1px solid var(--rule-2);flex:none}
.mkp-f span{font-family:var(--mono);font-size:.74em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.mkp-f span b{color:var(--t2);font-weight:500}
/* 07 risk */
.mkr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:0;gap:0}
.mkr-l{padding:1.15em;border-right:1px solid var(--rule-2);min-width:0;display:flex;flex-direction:column}
.mkr-r{padding:1.15em;display:flex;flex-direction:column;min-width:0;background:rgba(255,255,255,.015)}
.rk-h{display:flex;align-items:center;gap:1em;flex:none;margin-top:.9em}
.rk-h .id{font-family:var(--mono);font-size:.76em;color:var(--t4);border:1px solid var(--rule-2);padding:.22em .45em;flex:none}
.rk-h b{font-size:1.05em;font-weight:500;letter-spacing:-.03em;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp{display:grid;grid-template-columns:1fr 1fr;gap:1.1em;margin-top:1em;flex:none}
.rp-l{display:block;font-family:var(--mono);font-size:.68em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-bottom:.5em}
.rp-g{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}
.rp-g b{aspect-ratio:1;display:block;background:rgba(255,255,255,.05)}
.rp-g b.g{background:rgba(62,201,138,.16)}
.rp-g b.y{background:rgba(217,154,43,.22)}
.rp-g b.o{background:rgba(217,110,43,.32)}
.rp-g b.r{background:rgba(226,86,74,.4)}
.rp-g b.on{box-shadow:inset 0 0 0 1.5px var(--acc-txt,var(--indigo-txt)),0 0 12px color-mix(in srgb,var(--acc) 55%,transparent)}
.rp-r{display:flex;align-items:center;gap:1em;margin-top:.6em;font-size:.84em;color:var(--t4);flex-wrap:wrap}
.rp-r em{font-style:normal;color:var(--t2);margin:0 -.55em}
.rk-note{margin-top:auto;padding-top:.9em;border-top:1px solid var(--rule-2);font-size:.86em;color:#6fdcaa;flex:none}
.prop{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.42em 0;border-bottom:1px solid var(--rule-3);flex:none}
.prop span{font-family:var(--mono);font-size:.7em;letter-spacing:.1em;text-transform:uppercase;color:var(--t4);white-space:nowrap}
.prop b{font-weight:400;color:var(--t2);text-align:right;line-height:1.35}
.lk{border:1px solid var(--rule-2);background:linear-gradient(180deg,#17171e,#101014);box-shadow:inset 0 1px 0 rgba(255,255,255,.055);padding:.6em;margin-top:.45em;flex:none}
.lk b{display:block;font-weight:400;color:var(--t2);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk i{display:block;font-style:normal;font-family:var(--mono);font-size:.74em;color:var(--t4);margin-top:.25em}
/* roadmap gantt: a quarter axis and labelled bars. Bars are positioned with
   inline left/width percentages so the same markup works at any frame width. */
.gt{flex:1;min-height:0;display:flex;flex-direction:column}
.gt-ax{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:.9em;align-items:center;padding-bottom:.55em;border-bottom:1px solid var(--rule-2);flex:none}
.gt-ax u{text-decoration:none}
.gt-ax div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.gt-ax span{font-family:var(--mono);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--t4)}
.gt-r{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:.9em;align-items:center;padding:.52em 0;border-bottom:1px solid var(--rule-3);flex:1;min-height:0}
.gt-r>b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-t{position:relative;height:.62em;background:rgba(255,255,255,.045)}
.gt-t i{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--acc) 38%,transparent);border-left:2px solid var(--acc-txt,var(--indigo-txt))}
.gt-t i.solid{background:linear-gradient(90deg,var(--acc),var(--acc-txt,var(--indigo-txt)));box-shadow:0 0 10px color-mix(in srgb,var(--acc) 50%,transparent)}
/* score meter: a graded bar that does NOT follow --acc, because the grade is
   the meaning. Pair with .mini-r.c3. */
.mtr{height:.34em;background:rgba(255,255,255,.07);display:block;min-width:0}
.mtr i{display:block;height:100%}
.mtr.good i{background:#3ec98a}
.mtr.mid i{background:#d99a2b}
.mtr.bad i{background:#e2564a}
.sc{font-family:var(--mono);font-size:.88em;text-align:right}
.sc.good{color:#4fc98a}.sc.mid{color:#e2a84f}.sc.bad{color:#ff7a6b}
.st3 div.alert{border-color:color-mix(in srgb,#e2564a 45%,var(--rule-2))}
.st3 div.alert b{color:#ff7a6b}
.mk .tabs span.done{color:var(--t3)}
.mk .tabs span.done::after{content:'✓';margin-left:.4em;color:var(--acc-txt,var(--indigo-txt));font-size:.9em}

/* seat mini-mockups */
.seat .vis{position:relative;aspect-ratio:16/10;border:1px solid var(--rule-2);background:linear-gradient(180deg,#141419,#0b0b0e 58%);overflow:hidden;margin-bottom:1.375rem;container-type:inline-size;transition:border-color .4s var(--e)}
.seat:hover .vis{border-color:color-mix(in srgb,var(--acc) 45%,var(--rule-2))}
.mini{padding:.9em;gap:.6em}
.mini-h{display:flex;justify-content:space-between;align-items:flex-start;gap:.8em;flex:none}
.mini-h .mk-t{font-size:1.15em}
.mini-l{flex:1;min-height:0;display:flex;flex-direction:column}
.mini-r{display:grid;align-items:center;gap:.7em;padding:.42em 0;border-bottom:1px solid var(--rule-3);flex:1;min-height:0}
.mini-r.c3{grid-template-columns:minmax(0,1fr) 4em 2.4em}
.mini-r.c4{grid-template-columns:minmax(0,1fr) 2.2em 2.6em auto}
.mini-r b{font-weight:400;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.mini-r i{font-style:normal;display:block;font-family:var(--mono);font-size:.74em;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-r .m{font-family:var(--mono);font-size:.88em;color:var(--t1);text-align:right}
.mini-r .t{font-family:var(--mono);font-size:.8em;text-align:right}
.mini-r .t.u{color:#6fdcaa}
.mini-r .t.d{color:#ff8f82}
@container (max-width:540px){
.mkc,.mkr{grid-template-columns:1fr}
.mkc-r,.mkr-r{display:none}
.mkc-l,.mkr-l{border-right:0}
.mkf-hd,.mkf-r{grid-template-columns:5em minmax(0,1fr) 2.6em}
.mkf-r .chip,.mkf-r .av,.mkf-r .st,.mkf-hd .h3,.mkf-hd .h4,.mkf-hd .h5{display:none}
.mkp{grid-template-columns:repeat(2,minmax(0,1fr))}
.cn,.sg{grid-template-columns:repeat(2,minmax(0,1fr))}
.rp{grid-template-columns:repeat(2,minmax(0,1fr))}
.mka-f{grid-template-columns:repeat(3,minmax(0,1fr))}
.st3{display:none}
}

/* ---- mockup framing ----------------------------------------------------
   .plate-w  full-width plate that bleeds to the right viewport edge
   .frame    contained mockup, sits inside a grid cell
   Both establish an inline-size container so .mk scales by container query. */
.plate-w{margin-top:clamp(3rem,5vw,4.5rem);position:relative;display:flex;border:1px solid var(--rule-2);border-right:0;background:#0c0c0f;container-type:inline-size;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);margin-right:calc(-1 * (var(--px) + max(0px,(var(--vw,100vw) - var(--max)) / 2)))}
.plate-w .ar,.frame .ar{display:flex;flex:1;min-width:0}
.plate-w .mk,.frame .mk{position:relative;inset:auto;flex:1;min-width:0}
@media(max-width:1024px){.plate-w{margin-right:calc(var(--px) * -1);margin-left:calc(var(--px) * -1);border-left:0}}
.frame{position:relative;display:flex;border:1px solid var(--rule-2);background:#0c0c0f;container-type:inline-size;overflow:hidden;box-shadow:0 30px 70px -34px rgba(0,0,0,.85)}

/* ---- two-up figure row -------------------------------------------------
   Each child spans a frame row and a caption row of the parent grid, so
   frames bottom-align and captions top-align regardless of caption length. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:clamp(3.5rem,6vw,5.5rem) var(--gut);margin-top:clamp(3rem,5vw,4.5rem)}
.duo>*{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:1rem;min-width:0}
@supports not (grid-template-rows:subgrid){.duo>*{display:flex;flex-direction:column;grid-row:auto}.duo .frame{flex:1}}
@media(max-width:900px){.duo{grid-template-columns:1fr;gap:clamp(3rem,6vw,4rem)}.duo>*{grid-row:auto}}
.duo .cap{display:flex;gap:.75rem;align-items:baseline}
.duo .cap p{font-size:.875rem;line-height:1.55;color:var(--t3)}
.duo .cap p b{color:var(--t1);font-weight:500;display:block;margin-bottom:.2rem;font-size:1rem;letter-spacing:-.02em}
.duo .note{display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:2rem 0}
.duo .note p{font-size:clamp(1.125rem,1.7vw,1.375rem);font-weight:500;letter-spacing:-.03em;line-height:1.3;color:var(--t2);max-width:24ch}
.duo .note p b{color:var(--t1);font-weight:500}
.duo .note p.small{font-size:.9375rem;font-weight:400;letter-spacing:0;line-height:1.6;color:var(--t3);max-width:34ch}