/* ── TWO MODES ────────────────────────────────────────── */
.modes{padding:0 32px 80px;max-width:1280px;margin:0 auto;}
.modes .modes-intro{margin-bottom:40px;}
.modes .modes-intro .lab{font-size:10.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 14px;display:flex;align-items:center;gap:14px;}
.modes .modes-intro .lab::after{content:'';flex:1;height:1px;background:var(--rule);}
.modes .modes-intro h2{font-family:var(--font-headline);font-weight:600;font-size:clamp(28px,3vw,40px);line-height:1.06;letter-spacing:-0.022em;color:var(--ink);margin:0;max-width:28ch;}
.modes .modes-intro h2 em{font-style:italic;font-weight:400;color:var(--gold);}
.modes .cards{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid var(--rule);}
.mode-card{padding:40px 40px 44px;background:var(--paper);position:relative;}
.mode-card.alt{background:var(--ink);color:var(--paper);}
.mode-card .mc-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:9999px;font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:28px;}
.mode-card .mc-badge.badge-gold{background:rgba(233,193,118,0.20);color:var(--gold);border:1px solid rgba(233,193,118,0.35);}
.mode-card.alt .mc-badge.badge-gold{background:rgba(233,193,118,0.15);color:var(--gold-pale);border-color:rgba(233,193,118,0.25);}
.mode-card .mc-badge .ico{font-size:14px;}
.mode-card .mc-num{font-family:var(--font-headline);font-style:italic;font-size:13px;font-weight:400;color:var(--ink-muted);margin-bottom:8px;}
.mode-card.alt .mc-num{color:rgba(251,247,236,0.45);}
.mode-card h3{font-family:var(--font-headline);font-weight:600;font-size:clamp(22px,2.4vw,32px);line-height:1.06;letter-spacing:-0.018em;color:var(--ink);margin:0 0 10px;max-width:20ch;}
.mode-card.alt h3{color:var(--paper);}
.mode-card .mc-sub{font-family:var(--font-headline);font-style:italic;font-weight:300;font-size:17px;line-height:1.45;color:var(--gold);margin:0 0 28px;max-width:40ch;}
.mode-card.alt .mc-sub{color:var(--gold-pale);opacity:0.9;}
.mode-card .mc-body{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 28px;max-width:48ch;}
.mode-card.alt .mc-body{color:rgba(251,247,236,0.78);}
.mode-card .mc-body b{color:var(--ink);font-weight:700;}
.mode-card.alt .mc-body b{color:var(--paper);}
.mode-card .mc-features{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.mode-card.alt .mc-features{border-top-color:rgba(255,255,255,0.12);}
.mode-card .mc-features li{display:grid;grid-template-columns:20px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:flex-start;font-size:14px;color:var(--ink-soft);}
.mode-card.alt .mc-features li{border-bottom-color:rgba(255,255,255,0.10);color:rgba(251,247,236,0.82);}
.mode-card .mc-features li .ico{font-size:17px;color:var(--gold);margin-top:1px;}
.mode-card.alt .mc-features li .ico{color:var(--gold-pale);}
.mode-card .mc-features li b{font-weight:700;color:var(--ink);}
.mode-card.alt .mc-features li b{color:var(--paper);}
.mode-card .mc-tag{display:inline-flex;align-items:center;gap:8px;margin-top:28px;padding:10px 18px;font-size:13px;font-weight:700;color:var(--ink-muted);border:1px solid var(--rule);background:var(--cream-dim);}
.mode-card.alt .mc-tag{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.15);color:rgba(251,247,236,0.55);}
.mode-card .mc-tag .ico{font-size:15px;}
.modes .mode-note{display:flex;align-items:center;gap:14px;margin-top:-1px;padding:18px 28px;background:var(--cream-dim);border:1px solid var(--rule);border-top:none;}
.modes .mode-note .ico{font-size:20px;color:var(--gold);flex:none;}
.modes .mode-note p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft);}
.modes .mode-note p b{color:var(--ink);}

@media (max-width:900px){
    .modes .cards{grid-template-columns:1fr;}
}
@media (max-width:680px){
    .modes{padding:0 20px 64px;}
    .mode-card{padding:28px 24px 32px;}
}

/* ── FANE / CHAPTER (mirrors capabilities.css — integration page doesn't load that file) */
.fane{padding:104px 32px;border-top:1px solid var(--rule);}
.fane.alt{background:var(--cream-dim);}
.fane.dark{background:var(--ink);color:var(--paper);}
.fane .inner{max-width:1280px;margin:0 auto;}
.fane .h{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:48px;max-width:980px;}
.fane .h .eyebrow{font-size:11px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-muted);margin:0;}
.fane .h h2{font-family:var(--font-headline);font-weight:600;font-size:clamp(32px,3.6vw,48px);line-height:1.04;letter-spacing:-0.024em;color:var(--ink);margin:0;max-width:22ch;}
.fane .h h2 em{font-style:italic;font-weight:400;color:var(--gold);}
.fane .h .sub{font-family:var(--font-headline);font-style:italic;font-weight:300;font-size:19px;line-height:1.45;color:var(--gold);max-width:62ch;margin:4px 0 0;}
.fane .grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}

/* ── COMPAT TABLE ─────────────────────────────────────── */
.compat{padding:24px 32px 104px;max-width:1280px;margin:0 auto;}
.compat .lab{font-size:10.5px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:14px;display:flex;align-items:center;gap:14px;}
.compat .lab::after{content:'';flex:1;height:1px;background:var(--rule);}
/* Fixed last column so all rows share the same track widths and columns align */
.tbl{border:1px solid var(--rule);background:var(--paper);box-shadow:0 36px 80px -56px rgba(14,23,41,0.35);}
.tbl .thead{display:grid;grid-template-columns:1.3fr 1fr 1.4fr 190px;gap:24px;padding:18px 28px;background:var(--ink);}
.tbl .thead span{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-pale);}
.tbl .thead span:last-child{text-align:right;}
.tbl .trow{display:grid;grid-template-columns:1.3fr 1fr 1.4fr 190px;gap:24px;padding:18px 28px;border-top:1px solid var(--rule);align-items:center;}
.tbl .trow:nth-child(even){background:var(--cream-dim);}
.tbl .trow .sys{font-family:var(--font-headline);font-weight:600;font-size:19px;letter-spacing:-0.012em;color:var(--ink);}
.tbl .trow .sys small{font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:0;color:var(--ink-muted);margin-left:6px;}
.tbl .trow .cell{font-size:14px;color:var(--ink-soft);}
.tbl .trow .cell.muted{color:var(--ink-muted);}
.pill{display:inline-flex;align-items:center;gap:8px;justify-self:end;padding:8px 16px;border-radius:9999px;font-family:var(--font-body);font-size:12.5px;font-weight:700;white-space:nowrap;line-height:1;}
.pill .ico{font-size:15px;}
.pill.ok{background:rgba(61,106,58,0.12);color:var(--green);}
.pill.cfg{background:rgba(233,193,118,0.20);color:var(--gold);}
.pill.contact{background:var(--cream-dim);color:var(--ink-soft);border:1px solid var(--rule);}
.compat .note{display:flex;align-items:center;gap:16px;padding:22px 28px;margin-top:-1px;background:var(--ink);color:var(--paper);}
.compat .note .ico{font-size:22px;color:var(--gold-pale);flex:none;}
.compat .note p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(251,247,236,0.82);}
.compat .note p b{color:var(--paper);font-weight:700;}
.compat .note a{color:var(--gold-pale);font-weight:700;}

/* ── GRAPH + READ-ONLY SPLIT ─────────────────────────── */
.graph .grid2{display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:center;}
.graph .body{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 24px;max-width:52ch;}
.graph .body b{color:var(--ink);font-weight:700;}
.graph .points{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.graph .points li{display:grid;grid-template-columns:22px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:flex-start;}
.graph .points li .ico{color:var(--gold);font-size:18px;margin-top:2px;}
.graph .points li .txt{font-size:14.5px;line-height:1.5;color:var(--ink);}
.graph .points li .txt b{font-weight:700;}

.graph-card{background:var(--paper);border:2px solid var(--gold-soft);padding:40px;box-shadow:0 36px 80px -50px rgba(14,23,41,0.4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}
.graph-card .gicon{width:88px;height:88px;margin-bottom:14px;color:var(--gold);}
.graph-card .gname{font-family:var(--font-headline);font-weight:600;font-size:34px;letter-spacing:-0.02em;color:var(--ink);line-height:1;}
.graph-card .gsub{font-size:18px;color:var(--ink-muted);}
.graph-card .gflow{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center;}
.graph-card .gnode{display:flex;flex-direction:column;align-items:center;gap:8px;}
.graph-card .gnode .b{width:54px;height:54px;border:1px solid var(--rule);background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.graph-card .gnode .b .ico{font-size:24px;}
.graph-card .gnode .b.dark{background:var(--ink);color:var(--gold-pale);border-color:var(--ink);}
.graph-card .gnode small{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted);}
.graph-card .garrow{color:var(--gold);font-size:20px;}

/* ── FOLDER PICKER DEMO ──────────────────────────────── */
.pick .grid2{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;}
.pick .body{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0 0 24px;max-width:52ch;}
.pick .body b{color:var(--ink);font-weight:700;}
.pick .steps{list-style:none;margin:0;padding:0;counter-reset:s;}
.pick .steps li{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--rule);align-items:start;}
.pick .steps li::before{counter-increment:s;content:counter(s);width:34px;height:34px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-headline);font-style:italic;font-size:17px;color:var(--gold);}
.pick .steps li b{display:block;font-size:15px;color:var(--ink);font-weight:700;margin-bottom:3px;}
.pick .steps li span{display:block;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}

.picker{background:var(--paper);border:1px solid var(--rule);box-shadow:0 36px 80px -50px rgba(14,23,41,0.4);}
.picker .ph{display:flex;align-items:center;gap:12px;padding:22px 24px;border-bottom:1px solid var(--rule);}
.picker .ph .ico{font-size:22px;color:var(--ink);}
.picker .ph b{font-family:var(--font-headline);font-weight:600;font-size:22px;letter-spacing:-0.015em;color:var(--ink);}
.picker .root{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--rule-soft);font-size:14px;color:var(--ink-soft);}
.picker .root .ico{font-size:18px;color:var(--ink-muted);}
.picker .lvl{display:flex;align-items:center;gap:12px;padding:14px 24px 14px 44px;font-size:14px;color:var(--ink-soft);}
.picker .lvl .ico{font-size:18px;color:var(--ink-muted);}
.picker .item{display:flex;align-items:center;gap:12px;padding:16px 24px 16px 72px;font-size:15px;color:var(--ink-soft);border-top:1px solid var(--rule-soft);}
.picker .item .ico{font-size:18px;color:var(--ink-muted);}
.picker .item.sel{background:rgba(233,193,118,0.14);}
.picker .item .nm{white-space:nowrap;}
.picker .item.sel .nm{font-weight:700;color:var(--ink);}
.picker .item.sel .ico{color:var(--gold);}
.picker .item.sel .check{margin-left:auto;width:24px;height:24px;border-radius:9999px;background:var(--gold);color:var(--paper);display:flex;align-items:center;justify-content:center;}
.picker .item.sel .check .ico{font-size:15px;color:var(--paper);}
.toast{display:flex;align-items:center;gap:12px;margin-top:18px;padding:16px 22px;background:var(--ink);color:var(--paper);width:max-content;max-width:100%;}
.toast .ico{font-size:18px;color:var(--gold-pale);}
.toast span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;letter-spacing:0.01em;}

/* ── READ-ONLY (dark) + grounded answer ──────────────── */
.ro{padding:104px 32px;background:var(--ink);color:var(--paper);border-top:1px solid var(--rule);}
.ro .inner{max-width:1280px;margin:0 auto;}
.ro .grid2{display:grid;grid-template-columns:0.92fr 1.08fr;gap:64px;align-items:center;}
.ro .eyebrow{font-size:11px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-pale);margin:0 0 18px;}
.ro h2{font-family:var(--font-headline);font-weight:600;font-size:clamp(32px,3.6vw,48px);line-height:1.04;letter-spacing:-0.024em;color:var(--paper);margin:0 0 20px;max-width:18ch;}
.ro h2 em{font-style:italic;font-weight:400;color:var(--gold-pale);}
.ro .sub{font-family:var(--font-headline);font-style:italic;font-weight:300;font-size:19px;line-height:1.45;color:var(--gold-pale);opacity:0.92;max-width:46ch;margin:0 0 28px;}
.ro .points{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,0.12);}
.ro .points li{display:grid;grid-template-columns:22px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.10);align-items:flex-start;}
.ro .points li .ico{color:var(--gold-pale);font-size:18px;margin-top:2px;}
.ro .points li .txt{font-size:14.5px;line-height:1.5;color:rgba(251,247,236,0.88);}
.ro .points li .txt b{color:var(--paper);font-weight:700;}

.read-card{background:var(--paper);color:var(--ink);box-shadow:0 40px 90px -50px rgba(0,0,0,0.6);}
.read-card .stat{padding:30px 32px 26px;border-bottom:1px solid var(--rule);}
.read-card .stat .top{display:flex;align-items:center;gap:10px;font-family:var(--font-headline);font-size:20px;font-weight:600;color:var(--ink);}
.read-card .stat .top .ico{font-size:20px;color:var(--gold);}
.read-card .stat .big{font-family:var(--font-headline);font-weight:600;font-size:68px;line-height:1;letter-spacing:-0.02em;color:var(--ink);margin:10px 0 4px;}
.read-card .stat .cap{font-size:15px;color:var(--ink-soft);margin-bottom:18px;}
.read-card .stat .badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:9999px;background:rgba(61,106,58,0.12);color:var(--green);font-weight:700;font-size:13px;}
.read-card .stat .badge .ico{font-size:16px;}
.read-card .ans{padding:28px 32px 32px;}
.read-card .ans .grounded{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9999px;background:rgba(61,106,58,0.12);color:var(--green);font-weight:700;font-size:12.5px;margin-bottom:18px;}
.read-card .ans .grounded .ico{font-size:15px;}
.read-card .ans p{font-family:var(--font-headline);font-size:21px;line-height:1.5;color:var(--ink);margin:0;letter-spacing:-0.006em;}
.read-card .ans p b{font-weight:700;}
.cite{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1px solid var(--gold-soft);background:var(--gold-bg);font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;vertical-align:baseline;}
.cite .ico{font-size:13px;color:var(--gold);}

@media (max-width:1100px){
    .graph .grid2,.pick .grid2,.ro .grid2{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:760px){
    .tbl .thead{display:none;}
    .tbl .trow{grid-template-columns:1fr auto;gap:8px 16px;padding:16px 18px;}
    .tbl .trow .sys{grid-column:1;}
    .tbl .trow .pill{grid-column:2;grid-row:1;align-self:center;}
    .tbl .trow .cell{grid-column:1/-1;font-size:13px;}
}
@media (max-width:680px){
    .compat{padding:16px 20px 72px;}
    .ro{padding:72px 20px;}
    .graph-card{padding:28px 22px;}
    .read-card .stat .big{font-size:54px;}
    .read-card .ans p{font-size:18px;}
    .picker .item{padding-left:48px;}
}