/* VTE demo, layout pass (Paula, 7 Oct 2026). CSS only, loaded after the page's own styles.
Nothing in index.html, consumption.js, guided-tour.js, profiles.js or server.py changes; the two
include lines in index.html are the whole wiring. Written as successive passes, each appended
below the previous one, so the cascade order is the review order; it can be flattened later.
What it does:
1. The side rail is James's; numbers 1-5 without the zero, divider blue on hover, active section in blue.
2. The hero is one blue slab with the site's four-mode line diagram (assets/demo-ux-art.svg).
3. Try product: Connect your wallet is the one filled button; the question card is light.
4. Request section as three steps (choose, run, follow); cases in the VTE mode colours.
5. Profiles, mechanism walkthrough, five mechanisms and defenses: compact cards, icons, one blue per state.
6. Help marks ("?") from demo-ux.js; touch targets 44 px; mobile pass at the end of the file. */
header.topbar{margin:0; padding:10px 0; border-bottom:0;}
header.topbar .topbar-kicker{font-size:12px;}
header.topbar .controls .ctl-btn{font-size:13px; min-height:36px;}
@media (max-width:620px){header.topbar .controls .ctl-btn{min-height:44px}}
/* 2. hero */
section.intro.intro-short{padding:8px 0 0;}
.intro-short .hero-copy{padding:40px; border-radius:16px;}
.intro-short .hero-copy .eyebrow{display:inline-flex; align-self:flex-start; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none;}
.intro-short .hero-copy h1.hero{font-size:clamp(28px,4.2vw,42px); line-height:1.12; letter-spacing:-.02em; max-width:18em;}
.intro-short .hero-copy .lede{font-size:18px; color:#a5bff0; max-width:36em;}
.intro-short .hero-hooks{font-size:14px; line-height:1.5; gap:6px;}
.hero-copy #heroTry{align-self:flex-start; min-height:48px; padding:0 22px; background:#fff; color:var(--accent-deep); font-size:16px;}
.hero-copy #heroTry:hover{background:#a5bff0;}
/* 3. the guided card (James's four steps): ruled columns, one filled button */
.guided-panel{padding:24px 0 0;}
#sec-guided .panel-card{padding:24px; box-shadow:none; border:1px solid var(--line); border-radius:16px;}
.guided-tour-kicker{font-size:13px; letter-spacing:0; text-transform:none; color:var(--accent); font-weight:600;}
.guided-tour-title{font-size:clamp(24px,3vw,34px); letter-spacing:-.02em;}
.guided-tour-lede, .guided-truth{font-size:14px; color:var(--ink-dim);}
.guided-value-card{border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:20px;}
.guided-steps{gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.guided-step{border:0; border-left:1px solid var(--line); border-radius:0; background:var(--surface); padding:18px;}
.guided-step:first-child{border-left:0;}
.guided-step.is-current{background:var(--accent-wash);}
.guided-step h3{font-size:16px;}
.guided-step p{font-size:14px; color:var(--ink-dim);}
.guided-step .btn:not(.btn-primary){min-height:40px;}
/* 4. request flow and wallet */
#sec-requests{padding-top:24px;}
.panel-card{border:1px solid var(--line); box-shadow:none; border-radius:16px;}
.cx-notice, .cx-banner{background:transparent; border:0; border-left:3px solid var(--accent); border-radius:0; padding:6px 14px; color:var(--ink-dim); font-size:14px; line-height:1.5;}
.cx-notice[role="alert"], .cx-error, .cx-banner.bad{border-left-color:var(--ink); color:var(--ink);}
.cx-truth, .cx-muted{color:var(--ink-dim); font-size:13px;}
.cx-role-fold{border:0; margin:0 0 12px; padding:0;}
.cx-role-fold > summary{display:none;}
.cx-role-fold > .cx-bar{display:flex;}
.cx-tabs .ctl-btn{min-height:40px; padding:0 16px; font-size:14px;}
.cx-item{min-height:44px; padding:12px 14px; border-radius:10px;}
.cx-item.on{border-color:var(--accent); background:var(--accent-wash);}
.cx-item small{font-size:13px;}
.cx-card{border:1px solid var(--line); border-radius:12px; box-shadow:none;}
.cx-card h3{font-size:17px;}
.cx-progress li{font-size:13px; padding:8px 10px;}
.cx-progress li.done{border-top-color:var(--accent); color:var(--accent);}
.cx-progress li.current{border-top-color:var(--accent); color:var(--accent);}
.cx-progress li.error{border-top-color:var(--ink); color:var(--ink);}
.cx-share-url{font-size:13px;}
.wl-panel{border:1px solid var(--line); border-radius:12px;}
.btn.sm, .btn.ghost.sm{min-height:36px; font-size:14px;}
.btn.ghost{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);}
/* 5. reference sections */
#sec-profiles, #sec-defenses{padding:24px 0 0;}
.how-fold{margin:24px 0 0;}
.prose-drawer > summary{font-size:15px; color:var(--ink); padding:14px 20px;}
footer.site{margin-top:32px; padding:20px 0 0; font-size:13px; color:var(--ink-dim);}
footer.site p{font-size:13px;}
.legal-proofline span{font-size:13px; padding:5px 12px;}
/* phone */
@media (max-width:1080px){
}
@media (max-width:640px){
.intro-short .hero-copy{padding:26px 20px;}
.intro-short .hero-copy .lede{font-size:16px;}
.hero-copy #heroTry{width:100%;}
.guided-steps{grid-template-columns:1fr;}
.guided-step{border-left:0; border-top:1px solid var(--line);}
.guided-step:first-child{border-top:0;}
#sec-guided .panel-card, .panel-card{padding:16px; border-radius:14px;}
}
/* ── James's guided card ("Try product"), restyled in place ──
One blue. The step cards sit in one ruled row with a line that fills as the steps
are done. The current step's button is the one filled button; the others are outlines.
The value card is a slab with the animated VTE mark. Nothing in the script changes. */
#sec-guided .panel-card{padding:0; border:0; background:transparent; box-shadow:none;}
.guided-tour{gap:20px;}
.guided-tour-head{align-items:center; padding:0 4px;}
.guided-tour-kicker{font-size:13px; letter-spacing:0; text-transform:none; font-weight:600;}
.guided-tour-title{font-size:clamp(26px,3.2vw,36px); letter-spacing:-.02em;}
.guided-tour-lede{font-size:15px;}
.guided-tour-head > div:last-child{display:grid; gap:8px; justify-items:start;}
.guided-tour-head .btn{min-height:44px; padding:0 20px; font-size:15px;}
.guided-truth{border-left-color:var(--accent); font-size:13px; color:var(--ink-dim);}
/* value card as a slab with the mark */
.guided-value-card{position:relative; overflow:hidden; border:0; border-radius:16px; padding:28px 28px 28px 108px; color:#fff;
background:radial-gradient(90% 120% at 88% 0%, rgba(70,96,206,.55), transparent 60%), var(--brand-deep, #28398c);}
.guided-value-card::before{content:""; position:absolute; left:28px; top:28px; width:56px; height:56px; border-radius:14px;
background:rgba(255,255,255,.12) url("data:image/svg+xml;utf8,") center/30px no-repeat;
animation:ux-pulse 2.6s ease-in-out infinite;}
.guided-value-card::after{content:""; position:absolute; left:28px; top:28px; width:56px; height:56px; border-radius:14px; border:1.5px solid rgba(165,191,240,.6); animation:ux-ring 2.6s ease-out infinite;}
@keyframes ux-pulse{0%,100%{background-color:rgba(255,255,255,.12);} 50%{background-color:rgba(255,255,255,.22);}}
@keyframes ux-ring{0%{transform:scale(1); opacity:.8;} 100%{transform:scale(1.55); opacity:0;}}
.guided-value-grid{gap:28px;}
.guided-value-grid h3{color:#a5bff0; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;}
.guided-value-grid p{color:rgba(255,255,255,.88); font-size:15px;}
.guided-value-controls label{color:#d7e0fb;}
.guided-value-controls select,.guided-value-controls input{min-height:44px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff; font-size:15px; border-radius:8px;}
.guided-value-controls select option{color:var(--ink);}
.guided-answer{border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.1); color:#fff;}
.guided-value-grid .btn, .guided-value-grid .btn.ghost.sm{min-height:44px; padding:0 18px; border:0; background:#fff; color:var(--accent-deep); font-size:15px; font-weight:600;}
.guided-value-grid .btn:hover{background:#a5bff0; color:var(--accent-deep);}
.guided-value-title{color:#fff;} .guided-value-lede{color:rgba(255,255,255,.88);}
/* the four steps: one ruled row, a progress line on top */
.guided-steps{position:relative; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding-top:18px; border-top:0;}
.guided-steps::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--line);}
.guided-step{position:relative; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; padding:16px 18px 18px;}
.guided-step:first-child{border-left:0; padding-left:0;}
.guided-step::before{display:inline-grid; place-items:center; width:26px; height:26px; margin-bottom:4px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-dim); font-family:inherit; font-size:13px;}
.guided-step::after{content:""; position:absolute; left:0; right:0; top:-18px; height:2px; background:transparent; transition:background .3s;}
.guided-step.is-done::before{border-color:var(--accent); color:var(--accent);}
.guided-step.is-done::after{background:var(--accent);}
.guided-step.is-current{border-color:var(--line); box-shadow:none;}
.guided-step.is-current::before{background:var(--accent); border-color:var(--accent); color:#fff;}
.guided-step.is-current::after{background:var(--accent); animation:ux-fill .6s ease-out;}
@keyframes ux-fill{from{transform:scaleX(0); transform-origin:left;} to{transform:scaleX(1); transform-origin:left;}}
.guided-step h3{font-size:17px;}
.guided-step p{font-size:14px;}
.guided-step .btn, .guided-step .btn.ghost.sm{min-height:40px; padding:0 16px; font-size:14px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);}
.guided-step.is-current .btn{border-color:var(--accent); background:var(--accent); color:#fff;}
.guided-step.is-current .btn:hover{background:var(--accent-deep);}
.guided-step .btn:hover{border-color:var(--accent); color:var(--accent);}
.guided-nextbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 16px; margin:0 0 12px; border:1px solid var(--accent); border-radius:12px; background:var(--accent-wash);}
.guided-nextbar.is-error{border-color:var(--critical, #b3261e);}
.guided-nextbar-kicker{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent);}
.guided-nextbar .btn{min-height:48px; padding:0 24px; font-size:16px; background:var(--accent); color:#fff; border:1px solid transparent;}
.guided-nextbar .btn:hover{background:var(--accent-deep); color:#fff;}
.guided-nextbar .btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line-strong, #c9d2e6); min-height:44px; font-size:14px;}
.guided-nextbar-label{font-size:17px;}
.guided-nextbar-note{font-size:14px; color:var(--ink-dim);}
.guided-nextbar.is-error .guided-nextbar-note{color:var(--critical, #b3261e);}
@media (max-width:720px){.guided-nextbar .btn{width:100%;} .guided-nextbar{padding:12px;}}
.guided-step-state{display:inline-block; margin:0 0 6px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line-strong, #c9d2e6); color:var(--ink-dim);}
.guided-step-state[data-guided-state="current"]{background:var(--accent); border-color:var(--accent); color:#fff;}
.guided-step-state[data-guided-state="done"]{background:var(--accent-wash); border-color:var(--accent); color:var(--accent);}
.guided-step-actions{display:flex; flex-wrap:wrap; gap:8px;}
.guided-step-actions .btn{margin-top:12px;}
.guided-step.is-current .btn:hover{color:#fff;}
.guided-party input, .guided-share input{min-height:40px; font-size:13px; border-radius:8px;}
.guided-party-status.is-valid{color:var(--accent);} .guided-party-status.is-invalid{color:var(--ink);}
.guided-next{font-size:13px !important; color:var(--ink-dim);}
@media (prefers-reduced-motion:reduce){.guided-value-card::before,.guided-value-card::after,.guided-step.is-current::after{animation:none;}}
@media (max-width:980px){.guided-steps{grid-template-columns:repeat(2,minmax(0,1fr));} .guided-step:nth-child(3){border-left:0; padding-left:0;} .guided-step:nth-child(n+3){border-top:1px solid var(--line); margin-top:8px; padding-top:16px;} .guided-step::after{display:none;} .guided-steps::before{display:none;}}
@media (max-width:640px){.guided-steps{grid-template-columns:1fr;} .guided-step{border-left:0; padding-left:0; border-top:1px solid var(--line);} .guided-step:first-child{border-top:0;} .guided-value-card{padding:88px 20px 24px;} .guided-value-card::before,.guided-value-card::after{left:20px; top:20px;}}
/* fixes after the first render */
.guided-step.is-current{background:transparent;}
.guided-step.is-current::before{box-shadow:0 0 0 4px var(--accent-wash);}
.guided-step .btn, .guided-step .btn.ghost.sm{margin-top:12px;}
.guided-step.is-current .btn{min-height:44px; padding:0 20px; font-size:15px;}
.guided-value-card .guided-value-grid .btn{margin-top:4px;}
/* the hero button is a link into the card; the card's "Connect" is the main action */
.hero-copy #heroTry{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55); min-height:44px; font-size:15px;}
.hero-copy #heroTry:hover{background:rgba(255,255,255,.12); color:#fff;}
.guided-tour-head .btn{min-height:48px; padding:0 24px; font-size:16px;}
/* status pill in the status row reads as a pill, not a button */
header.topbar .controls .ctl-btn{border:1px solid var(--line); border-radius:999px; background:var(--surface); padding:0 12px; cursor:default;}
/* ── Round 3: Connect placement, step padding (side menu is James's, untouched) ── */
/* status row: kicker left, status pill right, tighter */
header.topbar{padding:14px 0 6px;}
/* Connect: the head stacks title and action on the left; the button sits under the lede, flush,
with its note in one line beside it. No floating block on the right. */
.guided-tour-head{display:grid; grid-template-columns:1fr; gap:12px; padding:0;}
.guided-tour-head > div:last-child{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; justify-items:start;}
.guided-tour-head .btn{min-height:48px; padding:0 26px; font-size:16px;}
.guided-truth{border-left:0; padding-left:0; max-width:52ch;}
/* step cards: equal padding on all four, first one included */
.guided-steps{padding-top:18px; border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px;}
.guided-step{padding:18px 20px 20px;}
.guided-step:first-child{padding-left:20px;}
.guided-steps::before{left:0; right:0;}
@media (max-width:640px){
.guided-step, .guided-step:first-child{padding:16px;}
.guided-tour-head .btn{width:100%;}
}
/* ── Wallet card: reads as the step that follows "Try product" ── */
#sec-requests{padding-top:16px;}
#cxWalletRoot{position:relative; border:1px solid var(--line); border-radius:16px; padding:28px 28px 28px 96px; scroll-margin-top:84px;}
#cxWalletRoot::before{content:""; position:absolute; left:28px; top:28px; width:48px; height:48px; border-radius:12px; background:var(--accent-wash) url("data:image/svg+xml;utf8,") center/24px no-repeat;}
#cxWalletRoot h3{font-size:20px; letter-spacing:-.01em; margin:0 0 6px;}
#cxWalletRoot .cx-notice{margin:12px 0;}
#cxWalletRoot p{font-size:14px; color:var(--ink-dim);}
#cxWalletRoot .btn{min-height:48px; padding:0 26px; font-size:16px; margin-top:8px;}
#cxWalletRoot .btn[disabled]{opacity:.45;}
#cxWalletRoot.is-target{box-shadow:0 0 0 3px var(--accent-wash); border-color:var(--accent);}
@media (max-width:640px){#cxWalletRoot{padding:80px 16px 20px;} #cxWalletRoot::before{left:16px; top:16px;} #cxWalletRoot .btn{width:100%;}}
/* ── Value card, round 4: icon centred in its own column, three ruled columns,
custom select with its own chevron, Open beside the select ── */
.guided-value-card{padding:28px 32px 28px 120px; min-height:0;}
.guided-value-card::before,.guided-value-card::after{top:50%; left:32px; margin-top:-28px;}
.guided-value-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:0; align-items:start;}
.guided-value-grid article{padding:0 28px; min-width:0;}
.guided-value-grid article:first-child{padding-left:0;}
.guided-value-grid article+article{border-left:1px solid rgba(255,255,255,.16);}
.guided-value-grid article:last-child{padding-right:0;}
.guided-value-grid h3{margin:0 0 12px; line-height:1.2;}
.guided-value-grid p{margin:0; line-height:1.5;}
.guided-value-grid article:first-child{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; align-content:flex-start; gap:10px;}
.guided-value-grid article:first-child h3{flex:0 0 100%;}
.guided-value-controls{flex:1 1 280px; margin:0;}
.guided-value-controls select{width:100%; height:44px; min-height:44px; margin:0; padding:0 42px 0 14px; appearance:none; -webkit-appearance:none; border:1px solid rgba(255,255,255,.4); border-radius:8px; background:rgba(255,255,255,.1) url("data:image/svg+xml;utf8,") right 14px center/14px no-repeat; color:#fff; font:inherit; font-size:15px; line-height:44px; box-shadow:none; outline:0;}
.guided-value-controls select:hover{border-color:rgba(255,255,255,.7);}
.guided-value-controls select:focus-visible{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25);}
.guided-value-card .guided-value-grid .btn, .guided-value-card .guided-value-grid .btn.ghost.sm{margin:0; height:44px; min-height:44px; padding:0 20px; border-radius:8px; flex:0 0 auto;}
@media (max-width:1080px){.guided-value-grid{grid-template-columns:1fr;} .guided-value-grid article{padding:16px 0;} .guided-value-grid article+article{border-left:0; border-top:1px solid rgba(255,255,255,.16);} .guided-value-grid article:first-child{padding-top:0;} .guided-value-grid article:last-child{padding-bottom:0;}}
@media (max-width:640px){.guided-value-card{padding:104px 20px 24px;} .guided-value-card::before,.guided-value-card::after{top:24px; left:20px; margin-top:0;} .guided-value-controls{flex-basis:100%;} .guided-value-card .guided-value-grid .btn{width:100%;}}
/* ── Round 5: value card goes quiet (light) so Connect is the one filled button; Consent gets room ── */
.guided-value-card{background:var(--surface); border:1px solid var(--line); color:var(--ink);}
.guided-value-card::before{background-color:var(--accent-wash); background-image:url("data:image/svg+xml;utf8,"); animation:ux-pulse-light 2.6s ease-in-out infinite;}
.guided-value-card::after{border-color:rgba(51,73,179,.45);}
@keyframes ux-pulse-light{0%,100%{background-color:var(--accent-wash);} 50%{background-color:rgba(51,73,179,.22);}}
.guided-value-grid h3{color:var(--ink-dim);}
.guided-value-grid p{color:var(--ink);}
.guided-value-grid article+article{border-left-color:var(--line);}
.guided-value-controls select{background-color:#fff; background-image:url("data:image/svg+xml;utf8,"); color:var(--ink); border-color:var(--line-strong, #c9d2e6);}
.guided-value-controls select:hover{border-color:var(--accent);}
.guided-value-controls select:focus-visible{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);}
.guided-value-card .guided-value-grid .btn, .guided-value-card .guided-value-grid .btn.ghost.sm{background:transparent; border:1px solid var(--accent); color:var(--accent);}
.guided-value-card .guided-value-grid .btn:hover{background:var(--accent-wash); color:var(--accent-deep);}
.guided-steps{grid-template-columns:1fr 1.6fr 1fr 1fr;}
@media (max-width:1080px){.guided-value-grid article+article{border-top-color:var(--line);}}
@media (max-width:640px){.guided-steps{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.guided-value-card::before{animation:none;}}
#guided-party{border:1px solid var(--line-strong, #c9d2e6); border-radius:8px; min-height:44px; padding:0 14px; box-shadow:none; font-size:14px;}
#guided-party:focus-visible{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); outline:0;}
/* ── Hero: copy left, the website's VTE line diagram on the right (four modes light in turn).
The diagram is assets/demo-ux-art.svg, animated by its own stylesheet; loaded as a background, so no markup. ── */
.intro-short .hero-copy{position:relative; overflow:hidden; padding:36px 44% 36px 40px; min-height:0; gap:12px; justify-content:center;
background:radial-gradient(70% 120% at 100% 50%, rgba(70,96,206,.6), transparent 65%), var(--brand-deep, #28398c);}
.intro-short .hero-copy::before{content:""; position:absolute; top:50%; right:32px; width:calc(44% - 40px); max-width:460px; aspect-ratio:640/220; transform:translateY(-50%);
background:url("demo-ux-art.svg") center/contain no-repeat; opacity:.95;}
.intro-short .hero-copy::after{content:""; position:absolute; top:24px; right:32px; bottom:24px; width:calc(44% - 40px); max-width:460px; border:1px solid rgba(165,191,240,.26); border-radius:14px; background:rgba(165,191,240,.07); pointer-events:none;}
.intro-short .hero-copy::before{z-index:1;}
.intro-short .hero-copy .eyebrow{position:relative; z-index:1; background:#fff; color:var(--accent-deep, #28398c); font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.02em; padding:5px 12px;}
.intro-short .hero-copy h1.hero{font-size:clamp(22px,2.4vw,30px); line-height:1.15; max-width:22em;}
.intro-short .hero-copy .lede{font-size:15px; line-height:1.5; max-width:40em;}
.intro-short .hero-hooks{font-size:13px; line-height:1.45; gap:4px; max-width:46em;}
.hero-copy #heroTry{min-height:42px; font-size:14px; padding:0 18px;}
@media (max-width:1080px){.intro-short .hero-copy{padding:28px 24px 0;} .intro-short .hero-copy::before{position:relative; top:auto; right:auto; transform:none; width:100%; max-width:520px; margin:8px auto 0; order:9;} .intro-short .hero-copy::after{display:none;} .intro-short .hero-copy{padding-bottom:28px;}}
@media (max-width:640px){.intro-short .hero-copy{padding:22px 18px 22px;} .intro-short .hero-copy h1.hero{font-size:22px;}}
/* ── Side menu (James's markup): numbers 1–5 without the leading zero, drawn with a CSS counter in a small
ring; the flows link keeps its arrow. Labels 14px, rows 40px. ── */
.side-nav{counter-reset:nav; gap:4px;}
.side-link{grid-template-columns:24px minmax(0,1fr); gap:12px; padding:9px 12px; font-size:14px; line-height:1.3; color:var(--ink-dim);}
.side-link:not([href="flows.html"]){counter-increment:nav;}
.side-link .sl-num{font-size:0; letter-spacing:0; width:24px; height:24px; border-radius:50%; border:1px solid var(--line-strong, #c9d2e6); background:var(--surface); display:inline-flex; align-items:center; justify-content:center;}
.side-link:not([href="flows.html"]) .sl-num::before{content:counter(nav); font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-dim); line-height:1;}
.side-link[href="flows.html"] .sl-num{font-size:13px; color:var(--accent); border-color:var(--accent-wash); background:var(--accent-wash);}
.side-link .sl-num::after{display:none;}
.side-link:hover{background:var(--accent-wash); color:var(--ink);}
.side-link:hover .sl-num{border-color:var(--accent);}
.side-link.is-active{background:var(--accent-wash); color:var(--accent-deep, #28398c);}
.side-link.is-active .sl-num{background:var(--accent); border-color:var(--accent);}
.side-link.is-active .sl-num::before{color:#fff;}
.side-link.is-active::before{display:none;}
.side-foot .seg .ctl-btn{min-height:40px; font-size:13px;}
@media (max-width:1080px){.side-link{padding:8px 10px;} .side-link > span:last-child{display:none;}}
/* hero: more air — bigger padding, wider gap between lines, narrower measure, diagram a touch smaller */
.intro-short .hero-copy{padding:52px 44% 52px 52px; gap:16px;}
.intro-short .hero-copy h1.hero{max-width:17em; margin:4px 0 0;}
.intro-short .hero-copy .lede{max-width:34em; margin:0;}
.intro-short .hero-hooks{max-width:38em; gap:8px; margin:4px 0 0;}
.hero-copy #heroTry{margin-top:8px;}
.intro-short .hero-copy::before,.intro-short .hero-copy::after{width:calc(44% - 72px); max-width:420px; right:48px;}
.intro-short .hero-copy::after{top:40px; bottom:40px;}
@media (max-width:1080px){.intro-short .hero-copy{padding:32px 28px 32px;} .intro-short .hero-copy::before{width:100%; max-width:520px; right:auto;}}
@media (max-width:640px){.intro-short .hero-copy{padding:24px 18px;}}
/* side menu: plain numbers, no ring */
.side-link{grid-template-columns:16px minmax(0,1fr); gap:10px;}
.side-link .sl-num, .side-link[href="flows.html"] .sl-num, .side-link.is-active .sl-num, .side-link:hover .sl-num{width:auto; height:auto; border:0; border-radius:0; background:none; justify-content:flex-start;}
.side-link:not([href="flows.html"]) .sl-num::before{font-size:12px; font-weight:600; color:var(--ink-faint, #8a94ad);}
.side-link.is-active .sl-num::before{color:var(--accent);}
.side-link[href="flows.html"] .sl-num{font-size:13px; color:var(--accent);}
@media (max-width:1080px){.side-link{grid-template-columns:auto; padding:8px 12px;} .side-link:not([href="flows.html"]) .sl-num::before{font-size:14px;}}
/* side menu: a thin divider after the number (James's ::after), blue on hover and when active */
.side-link .sl-num{position:relative; overflow:visible;}
.side-link .sl-num::after{display:block; right:-7px; top:50%; transform:translateY(-50%); width:1px; height:12px; background:var(--line-strong, #c9d2e6);}
.side-link:hover .sl-num::after, .side-link.is-active .sl-num::after{background:var(--accent);}
.side-link:hover{color:var(--accent); background:transparent;}
.side-link:hover .sl-num::before, .side-link:hover .sl-num{color:var(--accent);}
.side-link.is-active{background:var(--accent-wash);}
/* ── Request section ("Ask, consent, answer, evidence"): one grid, flat cards, three role columns,
layers as a readable list, one primary action. CSS only on James's classes. ── */
#cxWalletRoot .cx-card.wl-panel{border:0; box-shadow:none; padding:0; margin:0; background:transparent;}
#cxWalletRoot .cx-bar{margin:0;}
#cxRequestsRoot{padding:32px 32px 28px;}
#cxRequestsRoot .block-title{font-size:24px; letter-spacing:-.01em; margin:0 0 8px;}
#cxRequestsRoot .cx-lede{font-size:15px; line-height:1.5; max-width:64ch; margin:0 0 16px;}
#cxRequestsRoot > .cx-notice{margin:0 0 20px;}
/* role switch: a quiet text row, not a box */
.cx-role-fold > summary{display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; font-size:13px; font-weight:600; color:var(--accent); padding:0; margin:0 0 8px; width:max-content;}
.cx-role-fold > summary::-webkit-details-marker{display:none;}
.cx-role-fold > summary::after{content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); margin-left:2px; transition:transform .15s;}
.cx-role-fold[open] > summary::after{transform:rotate(45deg);}
.cx-role-fold .cx-tabs .ctl-btn{min-height:36px; padding:0 14px; font-size:13px;}
.cx-two-screen-toggle{margin:0 0 20px;}
.cx-two-screen-toggle .btn.ghost.sm{min-height:36px; font-size:13px; padding:0 14px;}
/* grid and cards */
.cx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:20px;}
.cx-col{gap:16px;}
.cx-card{box-shadow:none; border-radius:14px; padding:22px 24px;}
.cx-card h3{font-size:17px; margin:0 0 6px;}
.cx-card h4{font-size:12px; letter-spacing:.06em; color:var(--ink-faint); margin:20px 0 10px;}
.cx-card p{font-size:14px; line-height:1.5;}
.cx-card .cx-muted{font-size:13px;}
/* who is who: three roles side by side, label / does / ledger party */
.cx-card.cx-who{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 20px;}
.cx-card.cx-who > h3, .cx-card.cx-who > p{grid-column:1 / -1;}
.cx-card.cx-who > p.cx-muted{margin-bottom:14px;}
.cx-card.cx-who > div{border-top:2px solid var(--accent); padding-top:12px;}
.cx-card.cx-who > div > p{margin:0 0 4px;}
.cx-card.cx-who > div > p:first-child{font-size:14px; line-height:1.35;}
.cx-card.cx-who > div > p:first-child strong{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px;}
.cx-card.cx-who > div > p.cx-muted{font-size:13px;}
.cx-card.cx-who > div > p.cx-muted code{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:100%; vertical-align:bottom;}
.cx-card.cx-who > p.cx-truth{margin:16px 0 0; font-size:12px;}
/* who you are: three rows, label above text */
.cx-role{gap:14px;}
.cx-role > div{border-left:2px solid var(--accent); padding-left:14px; font-size:14px; line-height:1.5;}
.cx-role b{font-size:11px; letter-spacing:.08em; margin-bottom:3px; color:var(--accent);}
/* new request: case list */
.cx-item{padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.4; align-items:flex-start;}
.cx-item small{font-size:12px; margin-top:2px;}
.cx-item > span:last-child, .cx-item code{flex:0 0 auto; font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); background:var(--accent-wash); border:0; border-radius:999px; padding:4px 9px; white-space:nowrap;}
.cx-item.on{box-shadow:inset 0 0 0 1px var(--accent);}
/* four layers: a numbered list in body type, not monospace */
.cx-steps.cx-layers{font-family:inherit; font-size:13px; line-height:1.5; color:var(--ink-dim); display:grid; gap:6px; counter-reset:layer; margin:0;}
.cx-steps.cx-layers li{position:relative; padding-left:26px; counter-increment:layer;}
.cx-steps.cx-layers li::before{content:counter(layer); position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; background:var(--accent-wash); color:var(--accent); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.cx-steps.cx-layers li b, .cx-steps.cx-layers li strong{color:var(--ink);}
#cxRequestsRoot .cx-card .cx-notice{margin:16px 0; font-size:13px;}
.cx-check{font-size:14px; margin:16px 0 12px;}
#cxRequestsRoot .cx-bar{gap:10px; margin-bottom:12px;}
#cxQuickCheck{min-height:46px; padding:0 22px; font-size:15px;}
#cxQuickCheck + .btn.ghost{min-height:46px; font-size:14px;}
details.cx-policy{border:1px solid var(--line); border-radius:10px; padding:0 14px; margin:12px 0;}
details.cx-policy > summary{font-size:13px; font-weight:600; padding:10px 0; cursor:pointer; color:var(--ink);}
@media (max-width:1080px){.cx-grid{grid-template-columns:1fr;} .cx-card.cx-who{grid-template-columns:1fr; gap:14px;} .cx-card.cx-who > div{border-top:0; border-left:2px solid var(--accent); padding:0 0 0 14px;}}
@media (max-width:640px){#cxRequestsRoot{padding:20px 16px;} .cx-card{padding:16px;} #cxQuickCheck, #cxQuickCheck + .btn.ghost{width:100%;}}
/* who-is-who spans the full width above the two columns; the left column's other cards sit under it */
@media (min-width:1081px){
.cx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); grid-auto-rows:auto; align-items:start;}
.cx-grid > .cx-col:first-child{display:contents;}
.cx-grid > .cx-col:first-child > *{grid-column:1;}
.cx-grid > .cx-col:first-child > .cx-card.cx-who{grid-column:1 / -1; grid-row:1;}
.cx-grid > .cx-col:last-child{grid-column:2; grid-row:2 / span 6;}
.cx-card.cx-who{grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 28px;}
.cx-card.cx-who > div > p.cx-muted code{max-width:none;}
}
/* Connect button reads "Connect your wallet" (ES: "Conecta tu wallet"). Layout-only: the dictionary string
stays James's ("Connect." / "Conecta."); the longer label is drawn by CSS until he changes guided-tour.js. */
#cxGuidedRoot .guided-tour-head .btn{font-size:0; line-height:0;}
#cxGuidedRoot .guided-tour-head .btn::after{content:"Connect your wallet"; font-size:16px; line-height:1;}
html[lang="es"] #cxGuidedRoot .guided-tour-head .btn::after{content:"Conecta tu wallet";}
/* menu: more air between the divider and the label */
.side-link{grid-template-columns:18px minmax(0,1fr); gap:16px;}
.side-link .sl-num::after{right:-9px;}
/* ── Top row: the kicker is not repeated. It moves under the logo in the side menu as a tag;
the status row keeps "Team-operated Canton participant" and the backend pill. ── */
header.topbar .topbar-dot, header.topbar .topbar-kicker{display:none;}
header.topbar .topbar-id strong{font-size:13px; font-weight:500; color:var(--ink-dim);}
.sidebar .brand{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:20px;}
.sidebar .brand::after{content:"VTE · Veridex Threshold Evidence"; display:inline-block; padding:4px 10px; border-radius:999px; background:var(--accent-wash); color:var(--accent); font-size:11.5px; font-weight:600; letter-spacing:.01em; line-height:1.3; white-space:nowrap;}
@media (max-width:1080px){.sidebar .brand{flex-direction:row; align-items:center; gap:12px; margin-bottom:0;} .sidebar .brand::after{font-size:11px;}}
@media (max-width:640px){.sidebar .brand::after{display:none;}}
/* the tag lives in the side menu now; the hero does not repeat it */
.intro-short .hero-copy .eyebrow{display:none;}
.intro-short .hero-copy h1.hero{margin-top:0;}
/* menu: divider centred in a 24px gap, 12px from the number and 12px from the label */
.side-link{grid-template-columns:18px minmax(0,1fr); gap:24px;}
.side-link .sl-num::after{right:-12px; height:14px;}
/* ── One scroll, no dropdowns: the opened folds read as sections. Summaries become headings; no marker, no hand cursor. ── */
.cx-role-fold > summary{display:none;}
.prose-drawer > summary, .how-fold > summary{cursor:default; pointer-events:none; padding-left:0;}
.prose-drawer > summary::before, .how-fold > summary::before{display:none;}
.prose-drawer > summary:hover{color:inherit;}
.how-fold{border:0; background:transparent; margin:40px 0 0;}
.how-fold > summary{font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--ink); padding:0 0 8px;}
.how-fold-body{padding:0; border-top:0;}
.prose-drawer{border:0; background:transparent;}
.prose-drawer > summary{font-size:17px; font-weight:600; color:var(--ink); padding:16px 0 4px;}
.prose-drawer-body{border-top:0; padding:0;}
.prose-drawer.inline > summary{font-size:14px; font-weight:600; padding:12px 0 2px;}
.prose-drawer-body > *:first-child{margin-top:8px;}
/* status row: subject on the left as a quiet label, backend pill on the right, both on one 44px line */
header.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 10px; min-height:44px;}
header.topbar .topbar-id{display:flex; align-items:center; gap:8px; min-width:0;}
header.topbar .topbar-id strong{font-size:13px; font-weight:600; color:var(--ink-dim); letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
header.topbar .topbar-id strong::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); margin-right:8px; vertical-align:1px;}
header.topbar .controls{margin:0;}
header.topbar .controls .ctl-btn{min-height:32px; font-size:12.5px; padding:0 12px 0 10px; color:var(--ink-dim);}
@media (max-width:640px){header.topbar{flex-wrap:wrap;} header.topbar .topbar-id strong{white-space:normal;}}
/* ── Walkthrough: empty states read as quiet notes, not broken grids ── */
.matrix-scroll:has(tbody:empty) table{display:none;}
.matrix-scroll:has(tbody:empty)::after{content:"Run a case below and this grid fills with what each answer gives away."; display:block; padding:16px 18px; border:1px dashed var(--line-strong, #c9d2e6); border-radius:10px; color:var(--ink-faint); font-size:14px;}
html[lang="es"] .matrix-scroll:has(tbody:empty)::after{content:"Lanza un caso abajo y esta tabla se rellena con lo que revela cada respuesta.";}
.matrix-card{padding:28px 32px;}
.matrix-title{font-size:24px; letter-spacing:-.01em; margin:0 0 8px;}
.matrix-sub{font-size:15px; line-height:1.5; max-width:64ch; margin:0 0 20px;}
.matrix-never{font-size:15px; margin:20px 0 16px;}
.engine-cta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;}
.engine-cta .btn{min-height:46px; font-size:15px;}
.engine-cta .cta-note{flex:1 1 100%; font-size:13px; color:var(--ink-faint); line-height:1.5; margin-top:4px;}
/* case: the summary strip is hidden while the fields are open and it has nothing to say */
.case-summary:has(.case-summary-id:empty){border:0; padding:0; background:transparent; justify-content:flex-end; min-height:0;}
.case-summary .btn.ghost.sm{min-height:40px; font-size:14px;}
#sec-case .block-title{font-size:24px;}
.case-summary-hint, .scope-note{font-size:13px; color:var(--ink-faint);}
/* side menu: the active section reads in blue */
.side-link.is-active{color:var(--accent); background:transparent;}
.side-link.is-active > span:last-child{color:var(--accent); font-weight:600;}
.side-link.is-active .sl-num::before{color:var(--accent);}
/* "How the mechanism works" as a real section title; "Read the full explanation" stays a fold, styled as a card */
.how-fold > summary{font-size:32px; line-height:1.15; letter-spacing:-.02em; padding:0 0 12px; margin:0 0 20px; border-bottom:1px solid var(--line);}
#sec-mechanism .prose-drawer:not(.inline){border:1px solid var(--line); border-radius:14px; background:var(--surface); margin:20px 0 0;}
#sec-mechanism .prose-drawer:not(.inline) > summary{pointer-events:auto; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; font-size:16px; font-weight:600; color:var(--ink);}
#sec-mechanism .prose-drawer:not(.inline) > summary::after{content:""; width:8px; height:8px; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg); margin-right:4px; transition:transform .15s;}
#sec-mechanism .prose-drawer:not(.inline)[open] > summary::after{transform:rotate(-135deg);}
#sec-mechanism .prose-drawer:not(.inline) > summary:hover{color:var(--accent);}
#sec-mechanism .prose-drawer:not(.inline) .prose-drawer-body{padding:0 20px 20px; border-top:1px solid var(--line);}
#sec-mechanism .prose-drawer:not(.inline) .prose-drawer-body > *:first-child{margin-top:16px;}
/* ── Every select on the page: one custom field, chevron inside the box, 44px, same padding as inputs ── */
main select, .field select, .cx-form select{appearance:none; -webkit-appearance:none; height:44px; min-height:44px; padding:0 42px 0 14px; border:1px solid var(--line-strong, #c9d2e6); border-radius:8px; background:var(--surface) url("data:image/svg+xml;utf8,") right 14px center/14px no-repeat; color:var(--ink); font:inherit; font-size:14px; line-height:44px; box-shadow:none; cursor:pointer;}
main select:hover{border-color:var(--accent);}
main select:focus-visible{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);}
main .field input[type="text"], main .field input[type="number"], main .field input:not([type]), .cx-form .field input{height:44px; min-height:44px; padding:0 14px; border:1px solid var(--line-strong, #c9d2e6); border-radius:8px; font-size:14px; box-shadow:none;}
main .field input:focus-visible{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);}
main .field > label{font-size:13px; font-weight:600; color:var(--ink-dim); margin-bottom:6px; display:block;}
.mode-card .field-row{gap:14px 20px; margin:16px 0;}
.mode-card .field{min-width:0;}
.mode-card{padding:24px 26px;}
.mode-card > .btn, .mode-card .btn{min-height:44px;}
.mode-card .mode-kicker{display:none;} /* the P-number is already the tag beside the title */
.mode-card .mode-title{margin:0;}
.mode-card .field-row{margin-top:20px;}
/* ── Mechanism diagram: the four steps light in turn along a flowing line (the website's four-step motion).
Hover pauses the sequence and lights the step under the pointer. Base tiles are quiet; only the lit one is blue. ── */
.mech{padding:24px 28px 28px; box-shadow:none; border:1px solid var(--line); border-radius:16px;}
.mech-zones{margin-bottom:14px;}
.mech-zone{border-radius:999px; padding:5px 12px; font-family:inherit; font-size:11px; letter-spacing:.08em;}
.mech-flow{gap:28px; overflow:visible;}
.mech-step, .mech-step.private, .mech-step.boundary, .mech-step.public{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 18px; gap:10px; overflow:visible;
transition:border-color .25s, box-shadow .25s, transform .25s, background-color .25s;}
.mech-icon, .mech-step.public .mech-icon{width:40px; height:40px; border-radius:10px; background:var(--surface); border:1px solid var(--line-strong, #c9d2e6); color:var(--accent); transition:background-color .25s, color .25s, border-color .25s;}
.mech-icon svg{width:20px; height:20px;}
.mech-t{font-size:16px;}
.mech-d{font-size:13.5px; line-height:1.45;}
/* connector between tiles: a dashed line that flows left to right */
.mech-step + .mech-step::before{content:""; position:absolute; left:-28px; top:40px; width:28px; height:2px;
background:repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px); opacity:.55; animation:ux-dash .7s linear infinite;}
/* the public tile keeps a small marker so the boundary is still readable when nothing is lit */
.mech-step.public::after{content:""; position:absolute; right:14px; top:14px; width:8px; height:8px; border-radius:50%; background:var(--accent);}
/* sequence: 10s loop, each step holds the light for ~2s */
@keyframes ux-mech-lit{0%,25%,100%{border-color:var(--line); background:var(--surface); box-shadow:none; transform:none;}
4%,21%{border-color:var(--accent); background:var(--accent-wash); box-shadow:0 10px 24px rgba(51,73,179,.14); transform:translateY(-4px);}}
@keyframes ux-mech-ico{0%,25%,100%{background:var(--surface); color:var(--accent); border-color:var(--line-strong, #c9d2e6);}
4%,21%{background:var(--accent); color:#fff; border-color:var(--accent);}}
@keyframes ux-dash{to{background-position:10px 0;}}
@media (prefers-reduced-motion:no-preference){
.mech-step{animation:ux-mech-lit 10s ease-in-out infinite backwards;}
.mech-step .mech-icon{animation:ux-mech-ico 10s ease-in-out infinite backwards;}
.mech-step:nth-child(2), .mech-step:nth-child(2) .mech-icon{animation-delay:2.5s;}
.mech-step:nth-child(3), .mech-step:nth-child(3) .mech-icon{animation-delay:5s;}
.mech-step:nth-child(4), .mech-step:nth-child(4) .mech-icon{animation-delay:7.5s;}
.mech-flow:hover .mech-step, .mech-flow:hover .mech-icon{animation-play-state:paused;}
}
.mech-flow:hover .mech-step{border-color:var(--line); background:var(--surface); box-shadow:none; transform:none;}
.mech-flow:hover .mech-icon{background:var(--surface); color:var(--accent); border-color:var(--line-strong, #c9d2e6);}
.mech-flow .mech-step:hover{border-color:var(--accent); background:var(--accent-wash); box-shadow:0 10px 24px rgba(51,73,179,.14); transform:translateY(-4px);}
.mech-flow .mech-step:hover .mech-icon{background:var(--accent); color:#fff; border-color:var(--accent);}
@media (prefers-reduced-motion:reduce){.mech-step + .mech-step::before{animation:none;} .mech-step.public{border-color:var(--accent); background:var(--accent-wash);} .mech-step.public .mech-icon{background:var(--accent); color:#fff;}}
@media (max-width:980px){.mech-flow{gap:16px;} .mech-step + .mech-step::before{display:none;}}
/* a marker on the lit step's icon (appears with the step, same timing) */
.mech-step .mech-icon{position:relative; overflow:visible;}
.mech-step .mech-icon::after{content:""; position:absolute; top:-7px; right:-7px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--accent); box-sizing:border-box; box-shadow:0 0 0 3px rgba(51,73,179,.18); opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s;}
@keyframes ux-mech-mark{0%,25%,100%{opacity:0; transform:scale(.6);} 4%,21%{opacity:1; transform:scale(1);}}
@media (prefers-reduced-motion:no-preference){
.mech-step .mech-icon::after{animation:ux-mech-mark 10s ease-in-out infinite backwards;}
.mech-step:nth-child(2) .mech-icon::after{animation-delay:2.5s;} .mech-step:nth-child(3) .mech-icon::after{animation-delay:5s;} .mech-step:nth-child(4) .mech-icon::after{animation-delay:7.5s;}
.mech-flow:hover .mech-icon::after{animation-play-state:paused; opacity:0;}
}
.mech-flow .mech-step:hover .mech-icon::after{opacity:1; transform:scale(1);}
/* side menu tag: square corners, full width of the rail, quieter */
.sidebar .brand{gap:12px; margin-bottom:24px; align-items:stretch;}
.sidebar .brand::after{border-radius:6px; padding:7px 10px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; white-space:normal; text-align:center; line-height:1.3; border:1px solid var(--accent-wash); background:var(--accent-wash); color:var(--accent-deep, #28398c);}
/* five mechanisms: air between the intro note and the cards */
#sec-mechanisms .mech-note, #sec-mechanisms .modes-grid{margin-top:0;}
#sec-mechanisms .modes-grid{margin-top:28px;}
/* an odd last card takes the whole row, so the five cards leave no empty cell where the sixth used to be */
#sec-mechanisms .modes-grid > .mode-card:last-child:nth-child(odd){grid-column:1 / -1;}
#sec-mechanisms .mech-note{margin-bottom:28px;}
#sec-mechanisms .scope-note{margin:0 0 28px; font-size:14px; line-height:1.5;}
/* side menu tag: left-aligned like the logo and the menu */
.sidebar .brand::after{text-align:left; align-self:flex-start;}
/* ── Defenses: each defense is a card with a shield mark and a number; each attempt is its own tile with an icon;
facts as a labelled grid; the contract's literal text as a code block; blue for every state. ── */
#cxDefensesRoot{padding:32px;}
#cxDefensesRoot .block-title{font-size:24px; letter-spacing:-.01em; margin:0 0 8px;}
#cxDefensesRoot .cx-lede{font-size:15px; max-width:64ch; margin:0 0 16px;}
#cxDefensesRoot > .cx-bar{margin-bottom:8px;}
#cxDefensesRoot > p.cx-muted{margin:0 0 20px; font-size:13px;}
.cx-def{gap:20px;}
.cx-def > .cx-card{position:relative; padding:24px 26px 24px 82px; border-radius:14px; counter-increment:def;}
.cx-def{counter-reset:def;}
.cx-def > .cx-card::before{content:""; position:absolute; left:26px; top:24px; width:40px; height:40px; border-radius:10px; background:var(--accent-wash) url("data:image/svg+xml;utf8,") center/22px no-repeat;}
.cx-def > .cx-card > h3{font-size:18px; line-height:1.3; margin:8px 0 6px; padding-right:0;}
.cx-def > .cx-card > p{font-size:14px; color:var(--ink-dim); margin:0 0 12px;}
/* chips: one blue */
.cx-def .chip, .cx-def .chip.good, .cx-def .chip.live{display:inline-flex; align-items:center; gap:6px; margin:0 0 10px; padding:4px 10px; border-radius:999px; border:1px solid var(--accent-wash); background:var(--accent-wash); color:var(--accent-deep, #28398c); font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.01em;}
.cx-def .chip.good::before{content:""; width:14px; height:14px; background:url("data:image/svg+xml;utf8,") center/contain no-repeat;}
.cx-def .cx-banner, .cx-def .cx-banner.good{background:transparent; border:0; border-left:3px solid var(--accent); border-radius:0; padding:4px 0 4px 14px; margin:4px 0 18px; color:var(--ink); font-size:14px;}
.cx-def .cx-banner.bad{border-left-color:var(--critical, #b42318); color:var(--ink);}
/* attempts as tiles */
.cx-attempt{border:1px solid var(--line); border-top:1px solid var(--line); border-radius:12px; background:var(--plane, #f4f6fb); padding:18px 20px 16px 58px; margin:0 0 12px; position:relative;}
.cx-attempt::before{content:""; position:absolute; left:18px; top:18px; width:26px; height:26px; border-radius:8px; border:1px solid var(--line-strong, #c9d2e6); background:var(--surface) url("data:image/svg+xml;utf8,") center/16px no-repeat;}
.cx-attempt:not(:has(h4))::before{background-image:url("data:image/svg+xml;utf8,");}
.cx-attempt h4{margin:0 0 6px; font-size:12px; letter-spacing:.06em; color:var(--ink-faint); line-height:26px;}
.cx-attempt > p{font-size:14px; margin:0 0 10px; color:var(--ink-dim);}
.cx-attempt > p strong{color:var(--ink);}
.cx-attempt:not(:has(h4)) > p:first-child{line-height:26px; margin-bottom:6px;}
.cx-attempt .chip{margin:0 0 12px;}
.cx-kv{grid-template-columns:160px minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden; margin:0 0 14px;}
.cx-kv dt, .cx-kv dd{padding:7px 12px; border-top:1px solid var(--line); font-size:13px;}
.cx-kv dt:first-of-type, .cx-kv dd:first-of-type{border-top:0;}
.cx-kv dt{font-size:12px; font-weight:600; color:var(--ink-faint);}
.cx-kv dd{font-family:var(--mono, ui-monospace, monospace); color:var(--ink);}
.cx-attempt > p.cx-muted{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;}
.cx-literal{font-size:12px; line-height:1.55; background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:8px; padding:10px 14px; margin:0 0 12px; color:var(--ink-dim); white-space:pre-wrap;}
.cx-counts{font-size:12px; margin:0;}
.cx-ref{display:grid; grid-template-columns:90px minmax(0,1fr) auto; align-items:center; gap:10px; margin:6px 0 0; padding:8px 12px; background:var(--surface); border:1px solid var(--line); border-radius:8px;}
.cx-ref span{min-width:0; font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-faint);}
.cx-ref code{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink);}
.cx-ref .btn.ghost.sm{min-height:32px; padding:0 12px; font-size:12px;}
.cx-def .cx-truth{margin:8px 0 0; font-size:13px; color:var(--ink-faint);}
@media (max-width:640px){#cxDefensesRoot{padding:20px 16px;} .cx-def > .cx-card{padding:72px 16px 20px;} .cx-def > .cx-card::before{left:16px; top:20px;} .cx-attempt{padding:56px 14px 14px;} .cx-attempt::before{left:14px; top:14px;} .cx-kv{grid-template-columns:1fr;} .cx-kv dd{border-top:0; padding-top:0;} .cx-ref{grid-template-columns:1fr auto;} .cx-ref span{grid-column:1 / -1;}}
/* menu: the flows link gets a play-in-circle icon instead of the arrow glyph */
.side-link[href="flows.html"] .sl-num{font-size:0; width:18px; height:18px; background:url("data:image/svg+xml;utf8,") center/18px no-repeat; display:inline-block;}
.side-link[href="flows.html"]:hover .sl-num{background-image:url("data:image/svg+xml;utf8,");}
/* ── New request: the VTE product colours. Cases and layers come in a fixed order from consumption.js
(cases: Match, Match, Trade Check, Reveal; layers: Match, Policy, Reveal, Trade Check), so the mode colour
and icon are set by position. Reveal #3349b3 · Policy #6d4bd1 · Trade Check #0d8f84 · Match #0b7fc4. ── */
.cx-list > li:nth-child(1) .cx-item, .cx-list > li:nth-child(2) .cx-item, .cx-layers > li:nth-child(1){--m:#0b7fc4; --mi:url("data:image/svg+xml;utf8,");}
.cx-list > li:nth-child(3) .cx-item, .cx-layers > li:nth-child(4){--m:#0d8f84; --mi:url("data:image/svg+xml;utf8,");}
.cx-list > li:nth-child(4) .cx-item, .cx-layers > li:nth-child(3){--m:#3349b3; --mi:url("data:image/svg+xml;utf8,");}
.cx-layers > li:nth-child(2){--m:#6d4bd1; --mi:url("data:image/svg+xml;utf8,");}
/* case buttons: a colour edge, the mode pill in its colour with its icon */
.cx-grid .cx-item{position:relative; padding:14px 16px 14px 20px; border-radius:10px; background:var(--surface); border:1px solid var(--line); overflow:hidden; gap:14px;}
.cx-grid .cx-item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--m, var(--accent)); opacity:.55;}
.cx-grid .cx-item:hover{border-color:var(--m, var(--accent));}
.cx-grid .cx-item.on{border-color:var(--m, var(--accent)); box-shadow:inset 0 0 0 1px var(--m, var(--accent)); background:color-mix(in srgb, var(--m, var(--accent)) 6%, white);}
.cx-grid .cx-item.on::before{opacity:1;}
.cx-grid .cx-item > span:first-child strong{display:block; font-size:14px; line-height:1.4; color:var(--ink);}
.cx-grid .cx-item small{font-size:12px; color:var(--ink-faint);}
.cx-grid .cx-item .chip, .cx-grid .cx-item .chip.idle{display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; margin:0; padding:5px 10px 5px 8px; border-radius:999px; border:1px solid color-mix(in srgb, var(--m, var(--accent)) 30%, white); background:color-mix(in srgb, var(--m, var(--accent)) 10%, white); color:var(--m, var(--accent)); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;}
.cx-grid .cx-item .chip::before{content:""; width:14px; height:14px; background:var(--mi) center/contain no-repeat;}
/* layers: the number ring in the mode colour, the mode name in its colour */
.cx-steps.cx-layers li{padding-left:34px;}
.cx-steps.cx-layers li::before{width:22px; height:22px; top:0; background:color-mix(in srgb, var(--m, var(--accent)) 12%, white); color:var(--m, var(--accent)); font-size:11px;}
.cx-steps.cx-layers li strong{color:var(--m, var(--accent));}
/* actions: Quick check in the Match colour (it runs Match first) */
#cxQuickCheck{background:#0b7fc4; border-color:#0b7fc4;}
#cxQuickCheck:hover{background:#0a6fab;}
.cx-check{padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--plane, #f4f6fb); margin:16px 0 14px;}
.cx-check input{accent-color:#0d8f84; width:16px; height:16px;}
/* ── Request section, rebuilt as one column that reads top to bottom:
Who is who → Who you are (three across) → New request (cases 2×2, layers 4 across, one action row) → Your requests. ── */
@media (min-width:1081px){
.cx-grid{grid-template-columns:1fr; gap:20px;}
.cx-grid > .cx-col:first-child, .cx-grid > .cx-col:last-child{display:contents;}
.cx-grid > .cx-col > *{grid-column:1 / -1; grid-row:auto;}
.cx-grid > .cx-col:first-child > .cx-card.cx-who{grid-row:auto;}
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3){order:10;} /* Your requests last */
.cx-grid > .cx-col:last-child > *{order:5;}
}
/* who you are: three statements across */
.cx-card:has(> .cx-role){padding:22px 26px;}
.cx-role{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
.cx-role > div{border-left:2px solid var(--accent); padding-left:14px; font-size:14px; line-height:1.5;}
/* new request */
.cx-grid .cx-col:last-child > .cx-card{padding:26px 28px 24px;}
.cx-grid .cx-col:last-child > .cx-card > h3{font-size:20px; margin:0 0 4px;}
.cx-grid .cx-col:last-child > .cx-card > h4{margin:22px 0 12px;}
.cx-grid .cx-col:last-child > .cx-card > h4:first-of-type{margin-top:12px;}
.cx-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.cx-grid .cx-item{display:flex; flex-direction:column; align-items:flex-start; gap:10px; height:100%; padding:16px 18px 16px 22px; cursor:pointer;}
.cx-grid .cx-item > span:first-child{order:2;}
.cx-grid .cx-item > .chip{order:1;}
.cx-grid .cx-item > span:first-child strong{font-size:15px; line-height:1.4; margin-bottom:4px;}
.cx-grid .cx-item small{font-size:12.5px;}
.cx-steps.cx-layers{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.cx-steps.cx-layers li{padding:14px 14px 14px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:13px; line-height:1.45;}
.cx-steps.cx-layers li::before{position:static; display:inline-flex; width:22px; height:22px; margin:0 0 8px;}
.cx-steps.cx-layers li strong{display:block; margin-bottom:4px; font-size:13px;}
#cxRequestsRoot .cx-card .cx-notice{margin:18px 0 0; font-size:13.5px;}
/* one action row: checkbox left, buttons right, notes under */
.cx-check{display:inline-flex; margin:18px 12px 12px 0; vertical-align:middle;}
#cxRequestsRoot .cx-card > .cx-bar{display:flex; gap:10px; margin:0 0 12px;}
#cxRequestsRoot .cx-card > p.cx-muted{font-size:13px; line-height:1.5; max-width:80ch; margin:0 0 6px;}
details.cx-policy{margin:16px 0 0;}
@media (max-width:1080px){.cx-role{grid-template-columns:1fr; gap:14px;} .cx-list, .cx-steps.cx-layers{grid-template-columns:1fr;}}
@media (min-width:641px) and (max-width:1080px){.cx-steps.cx-layers{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* ── Simpler: the action first. Order is New request → Who is who (quiet strip) → Your requests.
"Who you are" is dropped (the role switch already says it); the demo notice is a quiet line. ── */
.cx-grid{display:grid; grid-template-columns:1fr;}
.cx-grid > .cx-col:first-child, .cx-grid > .cx-col:last-child{display:contents;}
.cx-grid > .cx-col > *{grid-column:1 / -1; grid-row:auto;}
.cx-grid > .cx-col:last-child > *{order:1;}
.cx-grid > .cx-col:first-child > .cx-card.cx-who{order:2;}
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3){order:3;}
.cx-card:has(> .cx-role){display:none;}
#cxRequestsRoot > .cx-notice{border:0; padding:0; margin:0 0 18px; font-size:13px; color:var(--ink-faint); max-width:80ch;}
#cxRequestsRoot .cx-lede{margin-bottom:8px;}
/* role switch and the two-screen toggle on one line */
.cx-role-fold{display:inline-block; vertical-align:middle; margin:0 16px 20px 0;}
.cx-role-fold > .cx-bar{margin:0;}
.cx-two-screen-toggle{display:inline-flex; vertical-align:middle; margin:0 0 20px;}
.cx-two-screen-toggle .btn.ghost.sm{border:0; padding:0 4px; color:var(--accent); text-decoration:underline; text-underline-offset:3px; background:transparent;}
/* new request: cases are the hero; layers a compact row */
.cx-grid .cx-col:last-child > .cx-card{padding:28px 30px 26px;}
.cx-grid .cx-col:last-child > .cx-card > h3{font-size:22px;}
.cx-grid .cx-col:last-child > .cx-card > h4:first-of-type{font-size:12px; margin-top:16px;}
.cx-grid .cx-item{padding:18px 20px 18px 24px; gap:12px;}
.cx-grid .cx-item > span:first-child strong{font-size:16px;}
.cx-steps.cx-layers li{padding:12px 14px; font-size:12.5px; background:var(--plane, #f4f6fb); border-color:transparent;}
.cx-steps.cx-layers li::before{width:20px; height:20px; margin-bottom:6px;}
.cx-steps.cx-layers li strong{font-size:12.5px;}
#cxRequestsRoot .cx-card .cx-notice{margin-top:16px; font-size:13px; color:var(--ink-faint); border-left-color:var(--line-strong, #c9d2e6);}
/* action row: checkbox and buttons share one line; notes small under */
#cxRequestsRoot .cx-card > .cx-check{margin:20px 0 10px;}
#cxRequestsRoot .cx-card > p.cx-muted{font-size:12.5px; color:var(--ink-faint);}
#cxRequestsRoot .cx-card > p.cx-muted:last-child{margin-top:8px;}
/* who is who: a quiet strip, no card chrome */
.cx-card.cx-who{border:0; background:transparent; padding:8px 4px 0; border-top:1px solid var(--line); border-radius:0;}
.cx-card.cx-who > h3{font-size:15px; margin:16px 0 4px;}
.cx-card.cx-who > p.cx-muted{margin-bottom:12px;}
.cx-card.cx-who > div{border-top:0; border-left:2px solid var(--line-strong, #c9d2e6); padding:0 0 0 14px;}
.cx-card.cx-who > div > p:first-child strong{color:var(--ink-faint);}
.cx-card.cx-who > div > p:first-child{font-size:14px; color:var(--ink);}
.cx-card.cx-who > div > p.cx-muted{font-size:12.5px;}
/* your requests: quiet card */
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3){padding:20px 24px;}
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3) h3{font-size:16px;}
/* ── Request section, pass 3: no boxes inside the panel. Blocks are separated by space and one hairline,
not by white cards. Cases are large tiles on a soft plane with the mode icon; the action row is a band. ── */
#cxRequestsRoot{padding:40px 40px 32px;}
#cxRequestsRoot .block-title{font-size:28px; margin-bottom:10px;}
#cxRequestsRoot .cx-lede{font-size:16px; max-width:60ch; margin-bottom:10px;}
#cxRequestsRoot > .cx-notice{margin-bottom:24px;}
.cx-role-fold, .cx-two-screen-toggle{margin-bottom:32px;}
.cx-grid{gap:0;}
.cx-grid .cx-card, .cx-grid .cx-col:last-child > .cx-card{border:0; background:transparent; border-radius:0; padding:0; box-shadow:none;}
.cx-grid .cx-col:last-child > .cx-card{padding:0 0 40px; border-bottom:1px solid var(--line); margin-bottom:32px;}
.cx-grid .cx-col:last-child > .cx-card > h3{font-size:22px; margin:0 0 4px;}
.cx-grid .cx-col:last-child > .cx-card > h4{margin:28px 0 14px;}
.cx-grid .cx-col:last-child > .cx-card > h4:first-of-type{margin-top:20px;}
/* cases: large tiles, icon in a ring, 24px padding, 20px gap */
.cx-list{gap:20px;}
.cx-grid .cx-item{padding:24px 26px 22px 28px; gap:14px; border-radius:14px; background:var(--plane, #f4f6fb); border-color:transparent;}
.cx-grid .cx-item::before{width:5px;}
.cx-grid .cx-item:hover{background:#fff; border-color:var(--m);}
.cx-grid .cx-item.on{background:#fff; border-color:var(--m); box-shadow:0 0 0 1px var(--m), 0 10px 26px rgba(15,23,42,.06);}
.cx-grid .cx-item .chip{padding:7px 12px 7px 9px; font-size:11.5px;}
.cx-grid .cx-item .chip::before{width:16px; height:16px;}
.cx-grid .cx-item > span:first-child strong{font-size:17px; line-height:1.35; margin-bottom:6px;}
.cx-grid .cx-item small{font-size:13px;}
/* layers: one quiet row, no boxes */
.cx-steps.cx-layers{gap:24px;}
.cx-steps.cx-layers li{padding:0; background:transparent; border:0; font-size:13px; line-height:1.5; color:var(--ink-dim);}
.cx-steps.cx-layers li::before{margin-bottom:8px;}
.cx-steps.cx-layers li strong{font-size:13.5px; margin-bottom:6px;}
#cxRequestsRoot .cx-card .cx-notice{margin:24px 0 0; max-width:90ch;}
/* the action band */
#cxRequestsRoot .cx-card > .cx-check{display:flex; width:auto; margin:28px 0 14px; padding:0; border:0; background:transparent; font-size:15px;}
#cxRequestsRoot .cx-card > .cx-bar{margin:0 0 14px; gap:12px;}
#cxQuickCheck, #cxQuickCheck + .btn.ghost{min-height:50px; padding:0 24px; font-size:15px; border-radius:10px;}
#cxRequestsRoot .cx-card > p.cx-muted{max-width:72ch;}
details.cx-policy{margin-top:20px; max-width:72ch;}
/* who is who: strip, more air */
.cx-card.cx-who{border-top:0; padding:0 0 32px; margin-bottom:32px; border-bottom:1px solid var(--line);}
.cx-card.cx-who > h3{font-size:18px; margin:0 0 4px;}
.cx-card.cx-who > p.cx-muted{margin-bottom:18px;}
.cx-card.cx-who > div{border-left:2px solid var(--line-strong, #c9d2e6); padding-left:16px;}
.cx-card.cx-who > div > p{margin-bottom:6px;}
/* your requests */
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3){padding:0;}
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3) h3{font-size:18px; margin-bottom:6px;}
@media (max-width:640px){#cxRequestsRoot{padding:24px 16px;}}
/* ── Request section, pass 4: three steps a first-time visitor can follow.
1 Choose the question · 2 Run the check · 3 Follow the request. Explanatory text is hidden here
(it stays in the mechanism walkthrough); party names are a compact line. Labels are CSS text (EN/ES). ── */
#cxRequestsRoot .cx-lede, #cxRequestsRoot > .cx-notice{display:none;}
#cxRequestsRoot .block-title{margin-bottom:20px;}
/* step strip under the title */
.cx-grid .cx-col:last-child > .cx-card::before{content:"1 Choose the question › 2 Run the check › 3 Follow the request"; display:block; white-space:pre; margin:0 0 28px; padding:12px 16px; border-radius:10px; background:var(--accent-wash); color:var(--accent-deep, #28398c); font-size:13px; font-weight:600; letter-spacing:.01em;}
html[lang="es"] .cx-grid .cx-col:last-child > .cx-card::before{content:"1 Elige la pregunta › 2 Lanza la comprobación › 3 Sigue la solicitud";}
.cx-grid .cx-col:last-child > .cx-card > h3{display:none;}
/* step 1 */
.cx-grid .cx-col:last-child > .cx-card > h4:first-of-type{font-size:0; margin:0 0 14px;}
.cx-grid .cx-col:last-child > .cx-card > h4:first-of-type::before{content:"1 · Choose the question"; font-size:18px; font-weight:700; letter-spacing:-.01em; text-transform:none; color:var(--ink);}
html[lang="es"] .cx-grid .cx-col:last-child > .cx-card > h4:first-of-type::before{content:"1 · Elige la pregunta";}
/* the layers block and the mode notice are walkthrough material: not here */
.cx-grid .cx-col:last-child > .cx-card > h4:nth-of-type(2), .cx-steps.cx-layers, #cxRequestsRoot .cx-card .cx-notice{display:none;}
/* step 2: the run */
#cxRequestsRoot .cx-card > .cx-check{flex-wrap:wrap; margin:36px 0 14px; gap:8px 10px;}
#cxRequestsRoot .cx-card > .cx-check::before{content:"2 · Run the check"; flex:0 0 100%; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin-bottom:6px;}
html[lang="es"] #cxRequestsRoot .cx-card > .cx-check::before{content:"2 · Lanza la comprobación";}
#cxRequestsRoot .cx-card > .cx-bar{margin:0 0 10px;}
.cx-grid .cx-col:last-child > .cx-card > p.cx-muted:first-of-type{display:none;} /* "No wallet signature" is said in the Try product card */
#cxRequestsRoot .cx-card > p.cx-muted{font-size:12.5px; max-width:64ch;}
details.cx-policy{margin-top:14px;}
.cx-grid .cx-col:last-child > .cx-card{padding-bottom:36px;}
/* who is who: one compact line of three */
.cx-card.cx-who{padding:0 0 28px; margin-bottom:28px;}
.cx-card.cx-who > h3{font-size:0; margin:0 0 12px;}
.cx-card.cx-who > h3::before{content:"Who is in this case"; font-size:14px; font-weight:600; color:var(--ink-dim);}
html[lang="es"] .cx-card.cx-who > h3::before{content:"Quién participa en este caso";}
.cx-card.cx-who > p.cx-muted, .cx-card.cx-who > p.cx-truth, .cx-card.cx-who > div > p.cx-muted{display:none;}
.cx-card.cx-who > div{border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--plane, #f4f6fb);}
.cx-card.cx-who > div > p:first-child{margin:0; font-size:14px;}
.cx-card.cx-who > div > p:first-child strong{margin-bottom:2px;}
/* step 3 */
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3) h3{font-size:0;}
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3) h3::before{content:"3 · Follow the request"; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
html[lang="es"] .cx-grid > .cx-col:first-child > .cx-card:nth-child(3) h3::before{content:"3 · Sigue la solicitud";}
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3) .cx-muted{font-size:14px;}
/* no repeats: the Try product card already says "Ask. Consent. Answer. Evidence." and the three step headings
already name the steps, so the section title and the step strip are not shown */
#cxRequestsRoot .block-title{display:none;}
.cx-grid .cx-col:last-child > .cx-card::before{display:none;}
#cxRequestsRoot{padding-top:32px;}
.cx-role-fold, .cx-two-screen-toggle{margin-bottom:24px;}
/* ── Mode colours everywhere the four glyphs appear (additive = Reveal, categorical = Policy, dvp = Trade Check, floor = Match) ── */
.glyph.g-a, [data-card="card-additive"], [data-mode="additive"]{--m:#3349b3;}
.glyph.g-c, [data-card="card-categorical"], [data-mode="categorical"]{--m:#6d4bd1;}
.glyph.g-d, [data-card="card-dvp"], [data-mode="dvp"]{--m:#0d8f84;}
.glyph.g-f, [data-card="card-floor"], [data-mode="floor"]{--m:#0b7fc4;}
.glyph.g-a, .glyph.g-c, .glyph.g-d, .glyph.g-f{background:var(--m);}
/* the disclosure matrix: each row in its mode colour, filled dot = crosses, ring = stays private */
.matrix tbody tr{border-top:1px solid var(--line);}
.matrix tbody tr:hover{background:color-mix(in srgb, var(--m, var(--accent)) 6%, transparent); box-shadow:inset 3px 0 0 var(--m, var(--accent));}
.matrix .mx-jump:hover{background:transparent;}
.matrix .mx-name{color:var(--m, var(--ink)); font-size:15px;}
.matrix .mx-ask{font-size:12.5px;}
.matrix .mx-cell{text-align:center; padding:14px 8px;}
.matrix .mx-mark{display:inline-block; width:14px; height:14px; border-radius:50%; font-size:0; vertical-align:middle;}
.matrix .mx-cell.cross .mx-mark{background:var(--m, var(--accent));}
.matrix .mx-cell.private .mx-mark{background:transparent; border:2px solid var(--m, var(--accent)); opacity:.55;}
.matrix .mx-cell.na .mx-mark{width:6px; height:6px; background:var(--line-strong, #c9d2e6);}
.matrix thead th{font-size:11px; letter-spacing:.08em; color:var(--ink-faint); padding:8px 8px 10px; text-align:center;}
.matrix thead th:first-child{text-align:left;}
/* legend line under the grid uses the same marks */
.matrix-never{font-size:14px;}
.matrix .mx-cell, .matrix .mx-cell.cross, .matrix .mx-cell.private, .matrix .mx-cell.na{background:none;} /* the dot carries the meaning, not a grey cell */
.matrix thead th{font-family:inherit; font-weight:600;}
/* ── Help marks: a "?" after the hard parts; a short box on hover, focus or click ── */
.ux-help-wrap{position:relative; display:inline-block; vertical-align:middle; margin-left:8px; line-height:1;}
.ux-help{width:20px; height:20px; padding:0; border-radius:50%; border:1.5px solid var(--accent); background:#fff; color:var(--accent); font:700 12px/1 inherit; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;}
.ux-help:hover, .ux-help-wrap.open .ux-help{background:var(--accent); color:#fff;}
.ux-help:focus-visible{outline:0; box-shadow:0 0 0 3px var(--accent-wash);}
.ux-help-box{display:none; position:absolute; left:0; top:calc(100% + 10px); z-index:40; width:min(340px, 80vw); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 12px 30px rgba(15,23,42,.12); color:var(--ink); font-family:inherit; font-size:13.5px; font-weight:400; line-height:1.5; letter-spacing:0; text-transform:none; text-align:left; white-space:normal;}
.ux-help-box::before{content:""; position:absolute; left:6px; top:-6px; width:10px; height:10px; background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg);}
.ux-help-wrap.open .ux-help-box, .ux-help-wrap:hover .ux-help-box, .ux-help-wrap:focus-within .ux-help-box{display:block;}
h2 .ux-help-wrap, h3 .ux-help-wrap{margin-left:10px;}
.cx-tabs + .ux-help-wrap, .cx-check + .ux-help-wrap, .cx-bar + .ux-help-wrap{margin-left:10px;}
#cxRequestsRoot .cx-card > .cx-bar + .ux-help-wrap{margin:-6px 0 14px;}
.cx-role-fold .cx-bar{display:inline-flex; align-items:center;}
@media (max-width:640px){.ux-help-box{left:auto; right:0; width:min(320px, calc(100vw - 40px));} .ux-help-box::before{left:auto; right:6px;}}
/* tiles: content vertically centred and the same in all four; buttons in the brand blue */
.cx-grid .cx-item{justify-content:center; align-content:center; gap:12px;}
.cx-grid .cx-item > span:first-child{margin:0;}
#cxQuickCheck{background:var(--accent); border-color:var(--accent);}
#cxQuickCheck:hover{background:var(--accent-deep, #28398c);}
.cx-check input{accent-color:var(--accent);}
/* help marks: smaller, and the box opens on click or keyboard focus only (no hover flicker) */
.ux-help{width:16px; height:16px; border-width:1px; font-size:10px;}
.ux-help-wrap{margin-left:6px;}
h2 .ux-help-wrap, h3 .ux-help-wrap{margin-left:8px; vertical-align:2px;}
.ux-help-wrap:hover .ux-help-box{display:none;}
.ux-help-wrap.open .ux-help-box, .ux-help-wrap:focus-within .ux-help-box{display:block;}
.ux-help-wrap:focus-within:not(.open) .ux-help-box{display:none;}
.ux-help-wrap.open .ux-help-box{display:block;}
/* help boxes must not be clipped by their card */
.guided-value-card, .cx-card, .panel-card, .mech, .matrix-card{overflow:visible;}
.guided-value-grid article:first-child h3 .ux-help-wrap .ux-help-box{top:calc(100% + 12px); z-index:60;}
/* the help mark of step 2 sits on the checkbox line, not in the air */
#cxRequestsRoot .cx-card > .cx-check > .ux-help-wrap{flex:0 0 auto; margin-left:4px;}
#cxRequestsRoot .cx-card > .cx-check > .ux-help-wrap .ux-help-box{width:min(420px, 80vw);}
/* five mechanisms: the list breathes before the note, the note before the cards */
#sec-mechanisms .mech-list{margin:8px 0 0;}
#sec-mechanisms .mech-list li{padding:6px 0;}
#sec-mechanisms .scope-note{margin:28px 0 32px; padding-top:20px; border-top:1px solid var(--line); max-width:80ch;}
/* ── Profiles: title row, one quiet notice, party cards in a grid (what the live demo renders) ── */
#pfRoot{padding:32px;}
#pfRoot > .cx-bar{display:flex; align-items:center; justify-content:space-between; margin:0 0 8px;}
#pfRoot .cx-pf-title{font-size:24px; letter-spacing:-.01em;}
#pfRoot #pfRefresh{min-height:36px; padding:0 14px; border-radius:8px; font-size:13px; font-weight:600;}
#pfRoot .cx-lede{font-size:15px; max-width:64ch; margin:0 0 10px;}
#pfRoot > .cx-notice{border:0; padding:0; margin:0 0 16px; font-size:13px; color:var(--ink-faint); max-width:80ch;}
#pfRoot .cx-banner.bad{border:1px solid var(--line); border-left:3px solid var(--critical, #b42318); background:var(--plane, #f4f6fb); color:var(--ink); border-radius:10px; padding:12px 14px; font-size:14px;}
#pfRoot > p.cx-muted{font-size:13px;}
.cx-pf-grid{gap:16px; margin-top:20px;}
.cx-card.cx-pf-card{border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:20px 22px;}
.cx-pf-card h3{font-size:17px; margin:0 0 4px;}
.cx-pf-card > p.cx-muted{margin:0 0 12px; font-size:12px;}
.cx-pf-card > p.cx-muted code{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--ink-faint);}
.cx-pf-card .cx-kv{display:grid; grid-template-columns:1fr; gap:0; border:0; background:transparent; overflow:visible; margin:0;}
.cx-pf-card .cx-kv dt, .cx-pf-card .cx-kv dd{padding:0; border:0;}
.cx-pf-card .cx-kv dt{margin:12px 0 4px; font-size:11px; letter-spacing:.08em; color:var(--ink-faint);}
.cx-pf-card .cx-kv dd{font-family:inherit; font-size:14px; color:var(--ink);}
.cx-pf-card .cx-kv dd p.cx-muted{font-size:13px; margin:4px 0 0;}
.cx-pf-card .chip{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--accent-wash); background:var(--accent-wash); color:var(--accent-deep, #28398c); font-family:inherit; font-size:12px; font-weight:600;}
.cx-pf-card .chip.bad, .cx-pf-card .chip.revoked{border-color:#f3d4d0; background:#fbeeec; color:var(--critical, #b42318);}
.cx-pf-modes{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px;}
.cx-pf-modes li{padding:4px 10px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; color:var(--ink-dim); background:var(--plane, #f4f6fb);}
.cx-pf-card .cx-ref{margin-top:6px;}
#pfRoot .cx-truth{margin-top:16px; font-size:13px; color:var(--ink-faint);}
@media (max-width:640px){#pfRoot{padding:20px 16px;}}
/* ── Profiles, pass 2: compact cards with a role icon, label/value rows, chips; cards do not stretch ── */
.cx-pf-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:16px; align-items:start;}
.cx-card.cx-pf-card{position:relative; padding:18px 20px 16px 66px;}
.cx-card.cx-pf-card::before{content:""; position:absolute; left:18px; top:18px; width:34px; height:34px; border-radius:9px; background:var(--accent-wash) center/18px no-repeat;
background-image:url("data:image/svg+xml;utf8,");}
.cx-pf-card[data-profile*="rely"]::before, .cx-pf-card[data-profile*="counter"]::before{background-image:url("data:image/svg+xml;utf8,");}
.cx-pf-card[data-profile*="subject"]::before{background-image:url("data:image/svg+xml;utf8,");}
.cx-pf-card[data-profile*="source"]::before{background-image:url("data:image/svg+xml;utf8,");}
.cx-pf-card[data-profile*="author"]::before, .cx-pf-card[data-profile*="approv"]::before{background-image:url("data:image/svg+xml;utf8,");}
.cx-pf-card[data-profile*="gov"]::before, .cx-pf-card[data-profile*="operator"]::before{background-image:url("data:image/svg+xml;utf8,");}
.cx-pf-card[data-profile="aggregators"]::before{background-image:url("data:image/svg+xml;utf8,");}
.cx-pf-card h3{font-size:16px; line-height:1.3; margin:2px 0 2px;}
.cx-pf-card > p.cx-muted{margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.cx-pf-card > p.cx-muted code{font-size:11.5px;}
.cx-pf-card .cx-kv{grid-template-columns:112px minmax(0,1fr); gap:10px 12px; align-items:start;}
.cx-pf-card .cx-kv dt{margin:0; padding-top:4px; font-size:10.5px; line-height:1.3;}
.cx-pf-card .cx-kv dd{font-size:13px; line-height:1.45;}
.cx-pf-card .cx-kv dd p.cx-muted{font-size:12px; line-height:1.45; margin:4px 0 0;}
.cx-pf-card .chip.idle + p.cx-muted{display:none;} /* "not applicable" needs no footnote */
.cx-pf-card .chip{padding:3px 9px; font-size:11.5px; border-radius:999px;}
.cx-pf-card .chip.idle{background:transparent; border-color:var(--line-strong, #c9d2e6); color:var(--ink-faint); font-weight:500;}
.cx-pf-card .chip.illustrative{background:#fff; border-color:var(--accent); color:var(--accent);}
.cx-pf-card .chip.bad{border-color:#f3d4d0; background:#fbeeec; color:var(--critical, #b42318);}
.cx-pf-modes li{font-size:12px; padding:3px 9px;}
.cx-pf-card .cx-ref{display:block; padding:0; border:0; background:transparent; margin:0;}
.cx-pf-card .cx-ref span{display:none;}
.cx-pf-card .cx-ref code{display:block; font-size:11px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cx-pf-card .cx-ref .btn{display:none;}
.cx-pf-card dd code{font-size:11px; color:var(--ink-faint);}
@media (max-width:640px){.cx-card.cx-pf-card{padding:64px 16px 16px;} .cx-card.cx-pf-card::before{left:16px; top:16px;} .cx-pf-card .cx-kv{grid-template-columns:1fr; gap:6px 0;} .cx-pf-card .cx-kv dt{padding-top:6px;}}
.cx-pf-modes{flex-direction:column; gap:4px;}
.cx-pf-modes li{padding:0 0 0 18px; border:0; background:none; font-size:12.5px; color:var(--ink); position:relative;}
.cx-pf-modes li::before{content:""; position:absolute; left:0; top:5px; width:8px; height:8px; border-radius:50%; background:var(--accent);}
/* ── "How the mechanism works" is the one fold: closed by default, a large clickable head with a chevron.
Inside it nothing folds: "Read the full explanation" is open and reads as a heading. ── */
.how-fold > summary{pointer-events:auto; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 28px; margin:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); font-size:24px;}
.how-fold > summary::after{content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); margin:0 6px 6px 0; transition:transform .2s;}
.how-fold[open] > summary{border-radius:16px 16px 0 0; border-bottom:0;}
.how-fold[open] > summary::after{transform:rotate(-135deg); margin:6px 6px 0 0;}
.how-fold > summary:hover{color:var(--accent);}
.how-fold-body{border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; padding:8px 28px 28px; background:var(--plane, #f4f6fb);}
#sec-mechanism .prose-drawer:not(.inline){border:0; background:transparent; margin:28px 0 0;}
#sec-mechanism .prose-drawer:not(.inline) > summary{pointer-events:none; cursor:default; display:block; padding:0 0 8px; font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--ink);}
#sec-mechanism .prose-drawer:not(.inline) > summary::after{display:none;}
#sec-mechanism .prose-drawer:not(.inline) .prose-drawer-body{padding:0; border-top:0;}
#sec-mechanism .prose-drawer:not(.inline) .prose-drawer-body > *:first-child{margin-top:8px;}
#sec-mechanism .prose-drawer:not(.inline) > summary{display:none;} /* the h2 inside ("What you're actually looking at") is the heading */
#sec-mechanism .prose-drawer:not(.inline) .prose-drawer-body > h2.plain-title{margin-top:0; font-size:22px;}
/* ── Policy details: a proper form. Fields in a 4-column grid with labels that stay on one line,
the bands as a small table (name · lower bound) with the same 44px fields. ── */
details.cx-policy{border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:0; max-width:none;}
details.cx-policy > summary{padding:14px 18px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;}
details.cx-policy > summary::-webkit-details-marker{display:none;}
details.cx-policy > summary::after{content:""; width:8px; height:8px; border-right:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(45deg); margin-right:4px; transition:transform .15s;}
details.cx-policy[open] > summary{border-bottom:1px solid var(--line);}
details.cx-policy[open] > summary::after{transform:rotate(-135deg);}
details.cx-policy > p.cx-muted{margin:14px 18px 4px; font-size:13px;}
details.cx-policy .cx-form{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px 16px; padding:10px 18px 18px;}
details.cx-policy .cx-form .field{display:flex; flex-direction:column; gap:6px; min-width:0;}
details.cx-policy .cx-form .field label{font-size:12.5px; font-weight:600; color:var(--ink-dim); line-height:1.3; margin:0; min-height:2.6em; display:flex; align-items:flex-end;}
details.cx-policy .cx-form .field input{height:44px; min-height:44px; padding:0 14px; border:1px solid var(--line-strong, #c9d2e6); border-radius:8px; font-size:14px; width:100%; box-shadow:none;}
details.cx-policy h4{margin:6px 18px 10px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--ink);}
details.cx-policy .cx-rows{display:grid; gap:10px; padding:0 18px 18px;}
details.cx-policy .cx-rows::before{content:"Name · Lower bound"; white-space:pre; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint);}
html[lang="es"] details.cx-policy .cx-rows::before{content:"Nombre · Límite inferior";}
details.cx-policy .cx-row{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; gap:10px; align-items:center;}
details.cx-policy .cx-row input{height:44px; min-height:44px; padding:0 14px; border:1px solid var(--line-strong, #c9d2e6); border-radius:8px; font-size:14px; width:100%; box-shadow:none; margin:0;}
details.cx-policy .cx-row input:focus-visible{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);}
details.cx-policy .cx-row > span:empty{display:none;}
@media (max-width:1080px){details.cx-policy .cx-form{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:640px){details.cx-policy .cx-form{grid-template-columns:1fr;} details.cx-policy .cx-form .field label{min-height:0;}}
/* help marks: no transitions or hover states that could flash; the mark is static until clicked */
.ux-help{transition:none;}
.ux-help:hover{background:#fff; color:var(--accent); border-color:var(--accent);}
.ux-help-wrap.open .ux-help{background:var(--accent); color:#fff;}
.ux-help-box{transition:none;}
/* ── QA fixes ── */
/* help mark keeps its 16px circle whatever button rules apply around it */
button.ux-help, .guided-tour-head button.ux-help, .cx-card button.ux-help{width:16px; height:16px; min-width:0; min-height:0; max-height:16px; padding:0; margin:0; border-radius:50%; line-height:1; flex:0 0 auto; box-shadow:none;}
/* phone and tablet: the side strip fits the width — brand, language switch and the six links wrap into rows */
@media (max-width:1080px){
.sidebar{flex-wrap:wrap; overflow:visible; row-gap:8px; padding:12px 16px;}
.sidebar .brand{margin:0;}
.side-nav{flex:1 1 100%; order:3; display:flex; flex-wrap:wrap; gap:4px 2px;}
.side-link{grid-template-columns:auto; padding:8px 8px; min-height:40px;}
.side-link:not([href="flows.html"]) .sl-num::before{font-size:14px;}
.side-foot{order:2; margin-left:auto; width:auto;}
.side-switches .seg .ctl-btn{min-height:36px; min-width:44px;}
}
@media (max-width:620px){.side-switches .seg .ctl-btn{min-height:44px}}
@media (max-width:620px){
.sidebar{align-items:center;}
.sidebar .brand img{width:120px;}
.side-nav{justify-content:space-between;}
.side-foot{flex:1 1 100%; order:4;}
.side-foot .seg{width:100%;}
}
/* ═══════════ Mobile pass (≤640px): smaller type, tighter cards, one column everywhere, full-width actions ═══════════ */
@media (max-width:640px){
html{font-size:14px;}
body, .cx-card p, .cx-lede, .matrix-sub, p{font-size:14px; line-height:1.5;}
h2, .block-title, #cxRequestsRoot .block-title, #cxDefensesRoot .block-title, #pfRoot .cx-pf-title, .matrix-title, #sec-case .block-title{font-size:20px !important; line-height:1.2;}
.panel-card, #cxRequestsRoot, #cxDefensesRoot, #pfRoot, .matrix-card, .mode-card, .cx-def > .cx-card{padding:18px 16px !important;}
/* top: status row */
header.topbar{padding:10px 0 8px;}
header.topbar .topbar-id strong{font-size:12.5px;}
header.topbar .controls .ctl-btn{font-size:12px; min-height:30px; white-space:normal; line-height:1.3; padding:6px 10px 6px 8px;}
/* hero */
.intro-short .hero-copy{padding:22px 16px 20px; gap:12px;}
.intro-short .hero-copy h1.hero{font-size:22px; line-height:1.15;}
.intro-short .hero-copy .lede{font-size:14px;}
.intro-short .hero-hooks{font-size:12.5px; gap:6px;}
.intro-short .hero-copy::before{margin:4px auto 0; max-width:300px;}
.hero-copy #heroTry{min-height:44px; font-size:14px; margin-top:4px;}
/* try product */
#cxGuidedRoot .guided-tour-kicker{font-size:12px;}
#cxGuidedRoot .guided-tour-title{font-size:24px; line-height:1.15; margin:4px 0 6px;}
#cxGuidedRoot .guided-tour-lede{font-size:14px;}
.guided-tour-head .btn{min-height:46px; font-size:15px;}
.guided-truth{font-size:12.5px;}
.guided-value-card{padding:16px !important;}
.guided-value-card::before, .guided-value-card::after{position:static; display:block; width:44px; height:44px; margin:0 0 10px; border-radius:11px; background-size:24px;}
.guided-value-card::after{display:none;}
.guided-value-grid h3{font-size:11.5px; margin-bottom:8px;}
.guided-value-grid p{font-size:14px;}
.guided-value-grid article{padding:12px 0;}
.guided-value-controls select{height:42px; min-height:42px; font-size:14px; line-height:42px;}
.guided-value-card .guided-value-grid .btn{height:42px; min-height:42px; font-size:14px;}
.guided-steps{border-radius:0 0 12px 12px;}
.guided-step, .guided-step:first-child{padding:14px 14px 16px;}
.guided-step::before{width:26px; height:26px; font-size:11px;}
.guided-step h3{font-size:16px; margin:8px 0 4px;}
.guided-step p{font-size:13.5px;}
.guided-step .btn{min-height:40px; font-size:13.5px;}
#guided-party{min-height:40px; font-size:13px;}
/* wallet card */
#cxWalletRoot{padding:16px !important;}
#cxWalletRoot::before{position:static; display:block; width:40px; height:40px; margin:0 0 10px; background-size:20px;}
#cxWalletRoot h3{font-size:18px;}
#cxWalletRoot .cx-notice, #cxWalletRoot p{font-size:13px;}
#cxWalletRoot .btn{width:100%; min-height:46px; font-size:15px;}
/* request section */
.cx-role-fold{display:block; margin:0 0 6px;}
.cx-role-fold .cx-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.cx-role-fold .cx-tabs{display:inline-flex; flex-wrap:wrap; width:auto;}
.cx-role-fold .cx-tabs .ctl-btn{min-height:34px; padding:0 10px; font-size:12.5px;}
.cx-two-screen-toggle{display:block; margin:0 0 18px;}
.cx-two-screen-toggle .btn.ghost.sm{font-size:13px; padding:0;}
.cx-grid .cx-col:last-child > .cx-card > h4:first-of-type::before, #cxRequestsRoot .cx-card > .cx-check::before, .cx-grid > .cx-col:first-child > .cx-card:nth-child(3) h3::before{font-size:17px;}
.cx-list{gap:12px;}
.cx-grid .cx-item{padding:16px 16px 16px 20px; gap:10px;}
.cx-grid .cx-item > span:first-child strong{font-size:15px;}
.cx-grid .cx-item small{font-size:12px;}
.cx-grid .cx-item .chip{font-size:10.5px; padding:5px 9px 5px 7px;}
#cxRequestsRoot .cx-card > .cx-check{margin:24px 0 10px; font-size:14px;}
#cxRequestsRoot .cx-card > .cx-bar{flex-direction:column; align-items:stretch; gap:8px;}
#cxQuickCheck, #cxQuickCheck + .btn.ghost{width:100%; min-height:46px; font-size:14px; padding:10px 14px; line-height:1.3; height:auto;}
#cxRequestsRoot .cx-card > p.cx-muted{font-size:12px;}
details.cx-policy > summary{font-size:13.5px; padding:12px 14px;}
details.cx-policy .cx-form{padding:8px 14px 14px; gap:10px;}
details.cx-policy .cx-form .field input, details.cx-policy .cx-row input{height:40px; min-height:40px; font-size:13.5px;}
details.cx-policy h4{margin:4px 14px 8px; font-size:13.5px;}
details.cx-policy .cx-rows{padding:0 14px 14px;}
.cx-card.cx-who{padding:0 0 20px; margin-bottom:20px;}
.cx-card.cx-who > h3::before{font-size:13px;}
.cx-card.cx-who > div{padding:10px 12px; margin-bottom:8px;}
.cx-card.cx-who > div > p:first-child{font-size:13.5px;}
.cx-grid > .cx-col:first-child > .cx-card:nth-child(3) .cx-muted{font-size:13px;}
/* profiles */
#pfRoot > .cx-bar{flex-wrap:wrap; gap:8px;}
#pfRoot .cx-lede{font-size:14px;}
#pfRoot > .cx-notice{font-size:12px;}
#pfRoot #pfRefresh{min-height:32px; font-size:12.5px;}
.cx-pf-grid{grid-template-columns:1fr; gap:12px;}
.cx-card.cx-pf-card{padding:56px 14px 14px !important;}
/* mechanism walkthrough */
.how-fold > summary{padding:16px 16px; font-size:18px; border-radius:12px;}
.how-fold-body{padding:4px 12px 16px; border-radius:0 0 12px 12px;}
.mech{padding:14px 12px !important;}
.mech-flow{gap:10px;}
.mech-step, .mech-step.private, .mech-step.boundary, .mech-step.public{padding:14px; gap:6px; border-radius:10px;}
.mech-tag{font-size:9.5px; letter-spacing:.06em; padding:3px 8px;}
.mech-icon, .mech-step.public .mech-icon{width:32px; height:32px; border-radius:8px;}
.mech-icon svg{width:16px; height:16px;}
.mech-t{font-size:15px;}
.mech-d{font-size:13px;}
.mech-step .mech-icon::after{width:11px; height:11px; top:-5px; right:-5px; border-width:2.5px;}
#sec-mechanism .prose-drawer:not(.inline) .prose-drawer-body > h2.plain-title{font-size:20px;}
.expl li h3, .expl h3{font-size:16px;}
.expl p, .expl li{font-size:14px;}
.matrix-card{padding:18px 14px !important;}
.matrix-sub{font-size:14px; margin-bottom:14px;}
.matrix-scroll:has(tbody:empty)::after{font-size:13px; padding:12px;}
.matrix .mx-name{font-size:13.5px;} .matrix .mx-ask{display:none;} .mx-row-head{min-width:150px;}
.matrix .mx-cell{padding:10px 6px;} .matrix .mx-mark{width:11px; height:11px;}
.matrix thead th{font-size:9.5px; letter-spacing:.04em; padding:6px 4px;}
.matrix-never{font-size:13.5px;}
.engine-cta .btn{width:100%; min-height:44px; font-size:14px; height:auto; padding:10px 14px; line-height:1.3;}
.engine-cta .cta-note{font-size:12px;}
.case-summary .btn.ghost.sm{min-height:36px; font-size:13px;}
.case-summary-hint, .scope-note{font-size:12px;}
/* five mechanisms */
#sec-mechanisms .mech-list li{font-size:13.5px; padding:4px 0;}
#sec-mechanisms .scope-note{margin:16px 0 20px; padding-top:14px; font-size:13px;}
.mode-card{padding:16px 14px !important;}
.mode-card .mode-title{font-size:17px;}
.mode-card .field-row{grid-template-columns:1fr; gap:10px; margin:12px 0;}
main select, .field select, .cx-form select, main .field input[type="text"], main .field input[type="number"], main .field input:not([type]){height:40px; min-height:40px; font-size:13.5px; line-height:40px;}
.mode-card .btn{width:100%; min-height:44px; font-size:14px; height:auto; padding:10px 14px; line-height:1.3;}
.mode-card p, .mode-card .mech-note{font-size:13.5px;}
/* defenses */
#cxDefensesRoot .cx-lede{font-size:14px;}
#cxDefensesRoot > .cx-bar{flex-wrap:wrap; gap:8px;}
#cxDefensesRoot .cx-tabs .ctl-btn{min-height:34px; font-size:12.5px; padding:0 10px;}
#cxDefensesRoot > p.cx-muted{font-size:12px;}
.cx-def > .cx-card{padding:60px 14px 16px !important;}
.cx-def > .cx-card::before{left:14px; top:16px; width:34px; height:34px; background-size:19px;}
.cx-def > .cx-card > h3{font-size:16px;}
.cx-def > .cx-card > p{font-size:13.5px;}
.cx-def .cx-card .btn{width:100%; min-height:44px; font-size:14px;}
.cx-attempt{padding:48px 12px 12px;}
.cx-attempt::before{left:12px; top:12px;}
.cx-attempt h4{font-size:11px;}
.cx-attempt > p{font-size:13.5px;}
.cx-literal{font-size:11px; padding:8px 10px;}
.cx-kv dt, .cx-kv dd{font-size:12.5px; padding:6px 10px;}
/* legal / footer */
footer, .site-foot, #sec-legal{font-size:13px;}
#sec-legal .prose-drawer-body p, #sec-legal p{font-size:13px;}
/* help boxes */
.ux-help-box{font-size:13px; padding:10px 12px;}
}
/* James's own "?" buttons (case form, position panel, toggles): same 16px circle as ours, in blue, never stretched */
button.help-btn{width:16px; height:16px; min-width:0; min-height:0; max-height:16px; padding:0; border:1px solid var(--accent); background:#fff; color:var(--accent); font-size:10px; border-radius:50%; transition:none; flex:0 0 auto; margin-left:6px;}
button.help-btn:hover{background:#fff; color:var(--accent);}
button.help-btn[aria-expanded="true"]{background:var(--accent); color:#fff;}
.help-pop{border-color:var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(15,23,42,.12);}
.label-row{display:flex; align-items:center; gap:0;}
@media (max-width:640px){
/* the disclosure grid scrolls sideways inside its card, with a hint */
.matrix-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -14px; padding:0 14px;}
.matrix{min-width:520px;}
.matrix-wrap::before{content:"Swipe to see all columns"; display:block; font-size:11px; color:var(--ink-faint); margin:0 0 6px;}
html[lang="es"] .matrix-wrap::before{content:"Desliza para ver todas las columnas";}
.matrix-scroll:has(tbody:empty){margin:0; padding:0;} .matrix-scroll:has(tbody:empty) + *{display:none;}
/* position panel and custodian rows: fields stack, remove button beside the number */
.pos-grid{grid-template-columns:1fr; gap:16px;}
.pos-col .row, .pos-col .cx-row, .addrow, .catrow{display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px;}
.pos-col input{height:40px; min-height:40px; font-size:13.5px;}
.pos-col .btn.ghost.sm, .pos-col button.row-remove{min-height:40px; height:40px; width:44px; padding:0;}
.pos-thresholds{grid-template-columns:1fr; gap:10px;}
.pos-head{flex-wrap:wrap; gap:6px;}
.pos-total, .pos-head strong{font-size:22px;}
.pos-agree{font-size:13px; padding:10px 12px;}
/* composer */
.compose .btn, .engine-cta .btn, #composeBtn, .answers .btn{width:100%;}
.toggle-row{flex-wrap:wrap; gap:8px;}
.toggle-label{font-size:14px;}
.toggle-note, .toggle-row p{font-size:12.5px;}
/* answer cards */
.answers .answer-card, .answer{padding:14px;}
.answer h3, .answer-card h3{font-size:16px;}
.chip, .pill{font-size:11px;}
/* mode pills row */
.mode-pills, .modes-row{flex-wrap:wrap; gap:6px;}
}
@media (max-width:640px){
/* "+ add custodian" / "+ add category": one line, full width, outline */
#add-addrow, #cat-addrow, .pos-col > .btn.ghost.sm, .pos-add{display:flex; width:100%; justify-content:center; white-space:nowrap; min-height:40px; height:40px; padding:0 12px; margin:6px 0 4px; border:1px dashed var(--line-strong, #c9d2e6); border-radius:8px; font-size:13.5px;}
/* "Show: Live / Recorded" stays one row */
#cxDefensesRoot > .cx-bar{display:flex; align-items:center; gap:8px;}
#cxDefensesRoot .cx-tabs{display:inline-flex; width:auto;}
#cxDefensesRoot .cx-tabs .ctl-btn{white-space:nowrap;}
/* role switch: same */
.cx-role-fold .cx-tabs .ctl-btn{white-space:nowrap;}
/* the "?" after the Show tabs sits on the line */
#cxDefensesRoot > .cx-bar > .ux-help-wrap{margin-left:2px;}
}
@media (max-width:640px){
/* tab groups stay one row (James's phone rule stacks them 100% each) */
.cx-tabs, #cxDefensesRoot .cx-tabs, .cx-role-fold .cx-tabs{display:inline-flex; flex-wrap:nowrap; width:auto; max-width:100%;}
.cx-tabs .ctl-btn, #cxDefensesRoot .cx-tabs .ctl-btn, .cx-role-fold .cx-tabs .ctl-btn{flex:0 0 auto; min-height:36px;}
.cx-role-fold .cx-tabs{flex-wrap:wrap;}
#cxDefensesRoot > .cx-bar > .cx-muted{font-size:13px;}
}