/* Layout: the page body that sits inside arbitr.ai (site header and footer are supplied by the site). Light bands alternate white and pale grey, with one dark indigo band at the turn of the page. Each section's visual spans the full content width so text and visual stay balanced; every grid reflows to one column. One typeface throughout: Plus Jakarta Sans. Each module carries one accent from the brand's secondary palette. */
.op-page {
  --op-white: var(--surface-card, #FFFFFF);
  --op-grey: var(--whisper, #F5F4FA);
  --op-zebra: #FAF9FD;
  --op-ink: var(--text-primary, #15113A);
  --op-muted: var(--text-secondary, #5C5878);
  --op-rule: var(--border-default, #E4E1EF);
  --op-indigo: var(--indigo, #3D16FA);
  --op-indigo-deep: #2A0FB8;
  --op-lilac: #C4B9FA;
  --op-lilac-wash: #F0EDFF;
  --op-cyan: var(--cyan, #00F0FF);
  --op-cyan-ink: #087C8C;
  --op-gold: var(--gold, #FFBD59);
  --op-gold-wash: #FFF5E5;
  --op-magenta: #E93D82;
  --op-magenta-ink: #C21F65;
  --op-magenta-wash: #FDEBF3;
  --op-dark: var(--surface-inverse, #140A4B);
  --op-dark-2: var(--surface-inverse-elevated, #20126B);
  --op-dark-ink: #F1EEFF;
  --op-dark-muted: #B9B1E6;
  --op-dark-rule: rgba(196,185,250,.22);
  --op-font: var(--font-display, "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif);
  --op-sans: var(--font-sans, "IBM Plex Sans", "Segoe UI", system-ui, sans-serif);
  --op-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
  --op-shadow-sm: 0 1px 2px rgba(21,17,58,.04), 0 4px 12px -6px rgba(21,17,58,.10);
  --op-shadow-md: 0 1px 3px rgba(21,17,58,.05), 0 16px 36px -18px rgba(21,17,58,.22);
  --op-radius: var(--radius-container, 10px);
  --op-measure: 42rem;
  --op-wide: var(--container-max, 72rem);
  --op-gutter: clamp(16px, 4vw, 40px);
  --op-band: clamp(64px, 9vw, 100px);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: #FFFFFF; }
.op-page { background: var(--op-white); color: var(--op-ink); font: 400 16px/1.6 var(--op-sans); -webkit-font-smoothing: antialiased; }
.op-page *, .op-page *::before, .op-page *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
a { color: var(--op-indigo); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--op-indigo); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--op-font); text-wrap: balance; margin: 0; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: manual; }
h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -.028em; max-width: 32ch; }
h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
p { margin: 0; }
sup { font-size: .66em; line-height: 0; margin-left: .12em; font-weight: 600; }
sup a { text-decoration: none; }
.wrap { max-width: var(--op-wide); margin-inline: auto; padding-inline: var(--op-gutter); }
.label { font-family: var(--op-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--op-muted); }

/* Bands */
.band { padding-block: var(--op-band); }
.band.grey { background: var(--op-grey); }
.band.dark { background: radial-gradient(120% 90% at 85% 0%, #2A1590 0%, var(--op-dark) 55%); color: var(--op-dark-ink); }

/* Section heads */
.sec-head { max-width: var(--op-measure); display: grid; gap: 0; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.eyebrow { display: block; font-family: var(--op-sans); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--soft-violet, #6E58F0); margin: 0 0 16px; }
.sec-head p { color: var(--op-muted); font-size: 16px; margin-top: 18px; max-width: 60ch; }
.sec-head p.eyebrow { color: var(--soft-violet, #6E58F0); font-size: 11px; margin: 0 0 16px; max-width: none; }
.dark .sec-head p.eyebrow, .dark .eyebrow { color: var(--op-cyan); font-family: var(--op-mono); font-weight: 500; letter-spacing: .13em; }
.dark .sec-head p { color: var(--op-dark-muted); }
.caption { margin-top: 1rem; font-size: .86rem; color: var(--op-muted); max-width: var(--op-measure); }

/* Hero */
.hero { background: var(--op-white); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero .eyebrow { margin-bottom: 1.1rem; }
.hero h1 { font-size: clamp(38px, 5.2vw, 60px); font-weight: 700; line-height: 1.14; letter-spacing: -.03em; margin-bottom: 1.4rem; }
.hl { background: linear-gradient(to bottom, transparent 16%, var(--indigo-tint-85, #E4DEFF) 16%, var(--indigo-tint-85, #E4DEFF) 90%, transparent 90%); border-radius: 6px; padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.intro { font-size: 18px; line-height: 1.6; max-width: 34rem; color: var(--op-muted); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.75rem; }
.hero-cta span { font: 500 15px/1.4 var(--op-sans); color: var(--op-ink); }
.hero-cta .btn-primary { box-shadow: none; }
.intro strong, .answer strong { color: var(--op-ink); font-weight: 600; }

/* Hero visual: reported panel inside the viewport frame */
.hero-visual { position: relative; }





.reported { padding-block: clamp(48px, 7vw, 80px); }
.rep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 1.5rem 3rem; align-items: center; }
.rep-main { display: grid; gap: 1rem; }
.rep-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; }
.rep-title { color: var(--op-indigo); }
.rep .answer { font-family: var(--op-font); font-weight: 500; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.45; letter-spacing: -.01em; color: var(--op-ink); max-width: 46rem; }
.rep .answer strong { font-weight: 800; color: var(--op-ink); }
.rep .eyebrow { margin-bottom: 4px; }
.rep-points { margin: 0; display: grid; gap: 1.25rem; padding-left: 2.25rem; border-left: 2px solid var(--op-lilac); }
.rep-points > div { display: grid; gap: .15rem; }
.rep-points dt { font-family: var(--op-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--op-muted); }
.rep-points dd { margin: 0; font-family: var(--op-font); font-weight: 700; font-size: 20px; }
.rep-points dd.key { color: var(--op-indigo); }
.rep-foot { font-size: 13px; color: var(--op-muted); }
.rep-foot a { color: var(--op-muted); }
@media (max-width: 760px) { .rep { grid-template-columns: minmax(0, 1fr); } .rep-points { padding-left: 0; border-left: 0; border-top: 1px solid var(--op-rule); padding-top: .9rem; grid-template-columns: 1fr 1fr; } }

/* Hero scene: everyday content seen through the viewport frame */
.hero-visual { position: relative; padding: 0; }
.scene { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; background-color: #EFECFB; background-image: radial-gradient(#D6D0F0 1.2px, transparent 1.3px); background-size: 18px 18px; container-type: inline-size; }
.cloud { position: absolute; inset: 0; }
.tag-w { position: absolute; transform: translate(-50%, -50%); font-family: var(--op-font); font-weight: 700; letter-spacing: -.01em; color: var(--op-ink); background: #fff; border: 1px solid var(--op-rule); border-radius: 999px; padding: .5em 1em; white-space: nowrap; box-shadow: var(--op-shadow-sm); line-height: 1.2; }
.w-a { font-size: 3.7cqw; }
.w-b { font-size: 4.6cqw; }
.w-c { font-size: 4cqw; color: #3B3660; }
.w-d { font-size: 3.3cqw; color: var(--op-muted); }
.tag-w.focus { font-size: 6.8cqw; padding: .42em .95em; border: 2px solid var(--op-magenta); box-shadow: 0 0 0 7px rgba(233,61,130,.12), var(--op-shadow-md); z-index: 1; }
.chip-ui { position: absolute; display: inline-flex; align-items: center; gap: 1.2cqw; font-family: var(--op-sans); font-weight: 600; font-size: clamp(10.5px, 2.3cqw, 13.5px); color: var(--op-ink); background: #fff; border: 1px solid var(--op-indigo); border-radius: 7px; padding: 1.2cqw 2cqw; white-space: nowrap; box-shadow: var(--op-shadow-sm); z-index: 3; }
.chip-ui i { width: 1.6cqw; height: 1.6cqw; min-width: 7px; min-height: 7px; border-radius: 50%; display: inline-block; }
.dot-i { background: var(--op-indigo); } .dot-c { background: #00C8DC; }
.c-date { left: 4%; bottom: 5%; }
.c-region { right: 4%; top: 4%; }



/* Hero image: one photograph per topic cluster, inside the viewport frame */
.hero-img { margin: 0; }
.hero-img img, .img-slot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.img-slot { display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1.5rem; text-align: center; color: #A49CCB; background: linear-gradient(160deg, #EEEBFA 0%, #E2DDF5 100%); border: 1px dashed #C9C1EC; }
.img-slot svg { width: 72px; height: 72px; }
.slot-label { font-family: var(--op-font); font-weight: 700; font-size: 16px; color: #6E66A0; }
.slot-spec { font-family: var(--op-mono); font-size: 10.5px; letter-spacing: .06em; color: #8A82B6; max-width: 26ch; }


/* Hero visual: the page's region, focused, inside the viewport frame, with one example phrase */
.region { position: relative; aspect-ratio: 5 / 4; border-radius: 10px; overflow: hidden; background: #F3F1FC; container-type: inline-size; }
.region svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.region .land { fill: none; stroke: #D2CCEB; stroke-width: 7; stroke-linecap: round; }
.region .reg { fill: none; stroke: var(--op-indigo); stroke-width: 8; stroke-linecap: round; }
.region .pulse { fill: var(--op-indigo); opacity: .16; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
.region .dot { fill: var(--op-indigo); stroke: #fff; stroke-width: 3; }
.region-label { position: absolute; transform: translate(4cqw, -50%); font-family: var(--op-sans); font-weight: 600; font-size: clamp(11px, 2.6cqw, 14px); color: #fff; background: var(--op-indigo); padding: .45em .8em; border-radius: 7px; white-space: nowrap; box-shadow: var(--op-shadow-sm); }
.phrase { position: absolute; left: 6%; top: 9%; font-family: var(--op-font); font-weight: 700; font-size: clamp(16px, 4.6cqw, 26px); letter-spacing: -.01em; color: var(--op-ink); background: #fff; border: 2px solid var(--op-magenta); border-radius: 999px; padding: .4em .95em; box-shadow: 0 0 0 6px rgba(233,61,130,.12), var(--op-shadow-md); white-space: nowrap; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .3; } 100% { transform: scale(1.7); opacity: 0; } }

/* Viewport frame: brand device, square corners, used at most twice per page */
.viewport { position: relative; }
.viewport > .vp { position: absolute; width: 22%; max-width: 110px; height: 34%; max-height: 120px; border: 0 solid var(--op-indigo); pointer-events: none; z-index: 2; }
.viewport > .vp.tl { top: 0; left: 0; border-top-width: 6px; border-left-width: 6px; }
.viewport > .vp.tr { top: 0; right: 0; border-top-width: 6px; border-right-width: 6px; }
.viewport > .vp.bl { bottom: 0; left: 0; border-bottom-width: 6px; border-left-width: 6px; }
.viewport > .vp.br { bottom: 0; right: 0; border-bottom-width: 6px; border-right-width: 6px; }

/* Trust (inline, in How Arbitr helps) */
.trust-inline { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--op-rule); display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.trust-inline .logos { font-family: var(--op-font); font-weight: 800; font-size: 14px; color: #8B87A5; }

.trust { border-block: 1px solid var(--op-rule); background: var(--op-white); }
.trust .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 2.25rem; padding-block: 1.15rem; }
.trust .logos { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; font-size: .98rem; font-weight: 800; color: #8B87A5; letter-spacing: -.01em; }

/* CTA bars */
.cta-bar { background: linear-gradient(100deg, var(--op-indigo) 0%, var(--op-indigo-deep) 100%); color: var(--op-white); padding-block: 1.7rem; }
.cta-bar.soft { background: var(--op-lilac-wash); color: var(--op-ink); border-block: 1px solid var(--op-lilac); }
.cta-bar .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.cta-bar p { font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 10px 18px; font: 600 var(--text-ui-label, 14px)/1 var(--op-sans); border-radius: var(--op-radius); text-decoration: none; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-light { background: var(--op-white); color: var(--op-indigo); }
.btn-primary { background: var(--op-indigo); color: var(--op-white); box-shadow: 0 8px 20px -10px rgba(61,22,250,.7); }
.btn-line { border-color: var(--op-indigo); color: var(--op-indigo); background: var(--op-white); }

/* Commonly confused with (accent: gold) */
.confused { background: var(--op-white); border: 1px solid var(--op-rule); border-top: 4px solid var(--op-gold); border-radius: var(--op-radius); box-shadow: var(--op-shadow-sm); display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) minmax(0, 1fr); }
.confused-name { padding: 1.5rem; background: var(--op-gold-wash); border-right: 1px solid var(--op-rule); display: grid; gap: .45rem; align-content: start; border-bottom-left-radius: var(--op-radius); }
.confused-name h3 { font-size: 1.35rem; font-weight: 800; }
.confused-name .ref { font-size: .82rem; color: var(--op-muted); }
.confused-name a { margin-top: .6rem; font-weight: 700; font-size: .92rem; text-decoration: none; }
.confused-col { padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.confused-col + .confused-col { border-left: 1px solid var(--op-rule); }
@media (max-width: 900px) {
  .confused { grid-template-columns: minmax(0, 1fr); }
  .confused-name { border-right: 0; border-bottom: 1px solid var(--op-rule); border-radius: 0; }
  .confused-col + .confused-col { border-left: 0; border-top: 1px solid var(--op-rule); }
}

/* Phrases to watch out for: a real table (accent: indigo) */
.table-wrap { border-radius: var(--op-radius); overflow: hidden; box-shadow: var(--op-shadow-sm); border: 1px solid var(--op-rule); background: var(--op-white); }
.watch { width: 100%; border-collapse: collapse; font-size: .98rem; }
.watch thead th { background: var(--op-indigo); color: var(--op-white); text-align: left; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .95rem 1.25rem; }
.watch thead th + th { border-left: 1px solid rgba(255,255,255,.2); }
.watch td { padding: 1rem 1.25rem; vertical-align: top; border-top: 1px solid var(--op-rule); }
.watch td + td { border-left: 1px solid var(--op-rule); color: var(--op-muted); }
.watch tbody tr:nth-child(even) td { background: var(--op-zebra); }
.watch td:first-child { width: 44%; font-weight: 700; }
.watch .q { color: var(--op-indigo); }
@media (max-width: 640px) {
  .watch, .watch tbody, .watch tr, .watch td { display: block; width: 100% !important; }
  .watch thead { display: none; }
  .watch tr { border-top: 1px solid var(--op-rule); }
  .watch tbody tr:first-child { border-top: 0; }
  .watch td { border: 0 !important; padding: .9rem 1.1rem 0; }
  .watch td + td { padding: .3rem 1.1rem .9rem; }
}

/* Recent examples (accent: magenta) */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; }
.ex-card { position: relative; background: var(--op-white); border: 1px solid var(--op-rule); border-radius: var(--op-radius); box-shadow: var(--op-shadow-sm); padding: 1.5rem 1.6rem 1.5rem 1.85rem; display: grid; gap: .65rem; align-content: start; overflow: hidden; }
.ex-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--op-magenta); }
.ex-card .tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--op-magenta-ink); }
.ex-card .tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--op-magenta); }
.ex-card p { font-size: 1.15rem; font-weight: 600; line-height: 1.45; }

/* Approved once. Then it travels. */
.travel { position: relative; display: grid; grid-template-columns: minmax(0, 22rem) clamp(48px, 9vw, 120px) minmax(0, 1fr); align-items: center; }
.travel svg.fan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fan path { fill: none; stroke: var(--op-lilac); stroke-opacity: .5; stroke-width: 1.5; }
.fan path.drift { stroke: var(--op-magenta); stroke-opacity: 1; stroke-width: 2; }
.source { grid-column: 1; position: relative; z-index: 1; background: var(--op-white); color: var(--op-ink); border-radius: var(--op-radius); padding: 1.5rem 1.6rem; display: grid; gap: .6rem; box-shadow: 0 0 0 4px rgba(0,240,255,.25), 0 24px 48px -20px rgba(0,0,0,.55); }
.s-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1rem; }
.s-ex { font: 500 11px/1 var(--op-mono, 'IBM Plex Mono', monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--op-muted); }
.s-label { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--op-indigo); }
.s-label::before { content: "✓"; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--op-indigo); color: var(--op-white); font-size: .7rem; letter-spacing: 0; }
.s-claim { font-size: 1.28rem; font-weight: 800; line-height: 1.32; letter-spacing: -.015em; }
.s-meta { font-size: .85rem; color: var(--op-muted); }
.versions { grid-column: 3; position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.version { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem .8rem; padding: .85rem 1.1rem; border: 1px solid var(--op-dark-rule); border-radius: 10px; background: rgba(255,255,255,.05); backdrop-filter: blur(4px); }
.v-icon { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 8px; background: rgba(0,240,255,.1); color: var(--op-cyan); }
.v-tag { font-size: .74rem; font-weight: 600; color: var(--op-dark-muted); }
.chip { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--op-white); background: var(--op-magenta); padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.v-text { grid-column: 2 / -1; font-weight: 600; color: var(--op-dark-ink); }
.gloss { font-weight: 400; font-size: .85rem; color: var(--op-dark-muted); }
.version.drift { border-color: var(--op-magenta); background: rgba(233,61,130,.14); }
.version.drift .v-icon { background: rgba(233,61,130,.2); color: #FF8DB9; }
.bridge { margin-top: clamp(2rem, 5vw, 2.75rem); max-width: 44rem; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); font-weight: 800; line-height: 1.32; letter-spacing: -.02em; }
.dark .caption { color: var(--op-dark-muted); }
@media (max-width: 900px) {
  .travel { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .travel svg.fan { display: none; }
  .versions { grid-column: 1; padding-left: 1.1rem; border-left: 2px solid var(--op-dark-rule); margin-left: .9rem; }
}
.travel .fan path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .8s ease-out, stroke .4s ease 1.2s, stroke-opacity .4s ease 1.2s; }
.travel .version { transition: opacity .4s ease-out .3s, border-color .4s ease 1.3s, background-color .4s ease 1.3s; }
.travel .chip { transition: opacity .4s ease 1.5s; }
.travel.pre .fan path { stroke-dashoffset: 1; }
.travel.pre .fan path.drift { stroke: var(--op-lilac); stroke-opacity: .5; }
.travel.pre .version { opacity: .3; }
.travel.pre .version.drift { border-color: var(--op-dark-rule); background: rgba(255,255,255,.05); }
.travel.pre .chip { opacity: 0; }

/* Where to start (accent: lilac) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.steps li { counter-increment: s; background: var(--op-white); border: 1px solid var(--op-rule); border-radius: var(--op-radius); box-shadow: var(--op-shadow-sm); padding: 1.35rem 1.4rem; display: grid; gap: .45rem; align-content: start; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--op-lilac-wash); border: 1px solid var(--op-lilac); color: var(--op-indigo); font-weight: 800; font-size: .95rem; margin-bottom: .35rem; }
.steps li p { color: var(--op-muted); font-size: .96rem; }

/* How Arbitr helps (accent: cyan) */
.helps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 920px) { .helps-grid { grid-template-columns: minmax(0, 1fr); } }
.helps { display: grid; gap: 1.1rem; }
.help { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .9rem; }
.help .num { grid-row: span 2; width: 2.1rem; height: 2.1rem; border-radius: 8px; display: grid; place-items: center; background: rgba(0,240,255,.16); color: var(--op-cyan-ink); font-weight: 800; font-size: .8rem; }
.help p { color: var(--op-muted); }
.position { margin-top: 1.6rem; font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem); font-weight: 700; line-height: 1.42; letter-spacing: -.01em; }
.helps-grid .btns { margin-top: 1.5rem; }
.app-wrap { position: relative; }
.app-wrap::before { content: ""; position: absolute; inset: 8% -4% -6% 10%; background: radial-gradient(60% 60% at 60% 50%, rgba(0,240,255,.28), rgba(61,22,250,.12) 60%, transparent 75%); filter: blur(10px); z-index: 0; }
.app { position: relative; z-index: 1; background: var(--op-white); border: 1px solid var(--op-rule); border-radius: 14px; box-shadow: var(--op-shadow-md); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: .45rem; padding: .75rem 1rem; border-bottom: 1px solid var(--op-rule); font-size: .76rem; font-weight: 600; color: var(--op-muted); background: var(--op-grey); }
.app-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9D5EA; display: inline-block; }
.app-bar span { margin-left: .5rem; }
.app-body { padding: 1.3rem; display: grid; gap: 1rem; }
.held-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; }
.held-where { font-size: .8rem; font-weight: 600; color: var(--op-muted); }
.held-status { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-magenta-ink); background: var(--op-magenta-wash); padding: .28rem .6rem; border-radius: 999px; }
.held-text { font-size: 1.2rem; font-weight: 700; }
.held-text del { color: var(--op-magenta-ink); text-decoration-thickness: 2px; }
.held-rule { font-size: .9rem; color: var(--op-muted); border-top: 1px dashed var(--op-rule); padding-top: .85rem; display: grid; gap: .2rem; }
.held-rule b { font-size: .8rem; font-weight: 700; color: var(--op-ink); }
.held-suggest { background: rgba(0,240,255,.1); border: 1px solid rgba(0,200,220,.35); border-radius: 8px; padding: .8rem .95rem; font-size: .96rem; font-weight: 500; display: grid; gap: .2rem; }
.held-suggest span { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--op-cyan-ink); }
.held-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--op-muted); }
.held-actions .fake-btn { background: var(--op-indigo); color: var(--op-white); font-weight: 700; padding: .55rem .9rem; border-radius: 6px; font-size: .85rem; }
.app-note { position: relative; z-index: 1; margin-top: .85rem; font-size: .8rem; color: var(--op-muted); }

/* FAQ: heading left, questions right */
.faq-grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: minmax(0, 1fr); } }
.faq-grid .sec-head { position: sticky; top: 1.5rem; margin-bottom: 0; }
.faq-groups { display: grid; gap: 2rem; }
.faq-groups > div > .label { display: block; margin-bottom: .6rem; }
details { background: var(--op-white); border: 1px solid var(--op-rule); border-radius: 10px; margin-bottom: .6rem; transition: box-shadow .15s ease, border-color .15s ease; }
details[open] { box-shadow: var(--op-shadow-sm); border-color: var(--op-lilac); }
summary { cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.2rem; font-weight: 700; font-size: 1.02rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--op-lilac-wash); color: var(--op-indigo); font-weight: 700; }
details[open] summary::after { content: "−"; background: var(--op-indigo); color: var(--op-white); }
.faq-a { padding: 0 1.2rem 1.2rem; display: grid; gap: .75rem; color: var(--op-muted); }
.handoff { color: var(--op-ink); background: var(--op-lilac-wash); border-radius: 8px; padding: .75rem .9rem; font-size: .96rem; }

/* Related regulations */
.rel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.rel-card { background: var(--op-white); border: 1px solid var(--op-rule); border-radius: var(--op-radius); box-shadow: var(--op-shadow-sm); padding: 1.15rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: center; text-decoration: none; color: var(--op-ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.rel-card:hover { border-color: var(--op-indigo); transform: translateY(-2px); box-shadow: var(--op-shadow-md); }
.rel-type { grid-column: 1; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--op-muted); }
.rel-name { grid-column: 1; font-weight: 700; line-height: 1.35; }
.rel-go { grid-column: 2; grid-row: 1 / span 2; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--op-lilac-wash); color: var(--op-indigo); font-weight: 700; }
.rel-card:hover .rel-go { background: var(--op-indigo); color: var(--op-white); }
.rel-card-disabled { color: var(--op-muted); cursor: default; }
.rel-card-disabled .rel-name { color: var(--op-muted); }
.rel-card-disabled:hover { border-color: var(--op-rule); transform: none; box-shadow: var(--op-shadow-sm); }
.rel-go-disabled { width: auto; height: auto; border-radius: 0; background: transparent; color: var(--op-muted); font: 600 11px/1 var(--op-sans); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; justify-self: end; }
.rel-card-disabled:hover .rel-go-disabled { background: transparent; color: var(--op-muted); }



/* Region mini map beside a section heading */
.head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 2rem; align-items: end; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.head-row .sec-head { margin-bottom: 0; }
.mini-map { margin: 0; }
.mini-inner { position: relative; }
.mini-map svg { display: block; width: 100%; height: auto; }
.mini-map .land { fill: none; stroke: #D3CEE8; stroke-width: 2.6; stroke-linecap: round; }
.mini-map .eu { fill: none; stroke: var(--op-indigo); stroke-width: 3.4; stroke-linecap: round; }
.mini-map .pulse { fill: var(--op-indigo); opacity: .14; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
.mini-map .dot { fill: var(--op-indigo); stroke: #fff; stroke-width: 2; }
@media (max-width: 860px) { .head-row { grid-template-columns: minmax(0, 1fr); } .mini-map { max-width: 26rem; } }

/* Related regulations map */
.rmap { position: relative; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); background: var(--op-white); border: 1px solid var(--op-rule); border-radius: var(--op-radius); padding: clamp(12px, 3vw, 28px); box-shadow: var(--op-shadow-sm); }
.rmap-inner { position: relative; }
.rmap-svg { display: block; width: 100%; height: auto; }
.rmap .land { fill: none; stroke: #D3CEE8; stroke-width: 2.6; stroke-linecap: round; }
.rmap .other { fill: none; stroke: var(--op-lilac); stroke-width: 3; stroke-linecap: round; }
.rmap .eu { fill: none; stroke: var(--op-indigo); stroke-width: 3.4; stroke-linecap: round; }
.rmap .pulse { fill: var(--op-indigo); opacity: .14; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
.rmap .dot { fill: var(--op-indigo); stroke: #fff; stroke-width: 2; }
.rmap .dot2 { fill: #8A78F2; stroke: #fff; stroke-width: 2; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .28; } 100% { transform: scale(1.7); opacity: 0; } }
.rpin { position: absolute; font-family: var(--op-sans); font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: 6px; white-space: nowrap; background: var(--op-white); color: var(--op-ink); border: 1px solid var(--op-rule); box-shadow: var(--op-shadow-sm); text-decoration: none; }
a.rpin:hover { border-color: var(--op-indigo); color: var(--op-indigo); }
.rpin.here { background: var(--op-indigo); color: #fff; border-color: var(--op-indigo); }
.rpin.right { transform: translate(14px, -50%); }
.rpin.left { transform: translate(calc(-100% - 12px), -50%); }
.rpin.below { transform: translate(-50%, 12px); }
.rpin.above { transform: translate(-50%, calc(-100% - 12px)); }
@media (max-width: 560px) { .rpin { font-size: 10.5px; padding: 4px 6px; } }


/* v2: enforcement note inside the phrases section */
.enforce { margin-top: clamp(2.5rem, 6vw, 3.5rem); background: var(--op-magenta-wash); border: 1px solid rgba(233,61,130,.25); border-radius: var(--op-radius); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.25rem; }
.enforce-head { display: flex; gap: 1rem; align-items: flex-start; }
.enforce-icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; display: grid; place-items: center; background: var(--op-magenta); color: #fff; }
.enforce-icon svg { width: 1.3rem; height: 1.3rem; }
.enforce-head h3 { font-size: 20px; }
.enforce-head p { color: var(--op-muted); margin-top: .2rem; }
.enforce-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.enf { background: var(--op-white); border: 1px solid var(--op-rule); border-left: 4px solid var(--op-magenta); border-radius: 10px; padding: 1.1rem 1.25rem; display: grid; gap: .35rem; }
.enf-tag { font-family: var(--op-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--op-magenta-ink); }
.enf p { font-weight: 600; font-size: 16.5px; line-height: 1.45; }

/* v2: two options */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; row-gap: .9rem; }
.opt { background: var(--op-white); border: 1px solid var(--op-rule); border-radius: var(--op-radius); box-shadow: var(--op-shadow-sm); padding: 1.6rem 1.7rem 1.75rem; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: .9rem; align-content: start; }
.opt h3 { font-size: 20px; margin-bottom: .2rem; }
.opt-list { list-style: none; margin: 0; padding: 0; display: contents; }
.opt-list li { position: relative; padding-left: 2.1rem; color: var(--op-muted); line-height: 1.55; }
.opt-list li::before { position: absolute; left: 0; top: .12em; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; line-height: 1; }
.opt-list b { color: var(--op-ink); font-weight: 600; }
.opt-manual { border-top: 3px solid var(--op-magenta); }
.opt-manual h3 { color: var(--op-magenta-ink); }
.opt-manual .opt-list li::before { content: "\2715"; background: var(--op-magenta-wash); color: var(--op-magenta-ink); }
.opt-arbitr { border: 2px solid var(--op-indigo); box-shadow: 0 28px 56px -24px rgba(61,22,250,.45), 0 8px 18px -10px rgba(22,10,60,.18); }
.opt-arbitr h3 { color: var(--op-indigo); }
.opt-arbitr .opt-list li::before { content: "\2713"; background: var(--op-indigo); color: var(--op-white); }
@media (max-width: 820px) {
  .options { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .opt { grid-row: auto; grid-template-rows: none; }
  .opt-list { display: grid; gap: .9rem; }
}
.how { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* Sources */
.sources { margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--op-rule); font-size: .8rem; color: var(--op-muted); }
.sources h2 { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--op-muted); }
.sources ol { margin: .75rem 0 0; padding-left: 1.25rem; columns: 2 22rem; column-gap: 2.5rem; }
.sources li { margin-bottom: .35rem; break-inside: avoid; }
.sources a { color: var(--op-muted); }
.disclaimer { margin-top: 1rem; font-size: .75rem; color: var(--op-muted); max-width: 48rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* v0.2 chassis changes (October 13 feedback) */
.op-page { --op-muted: #3B3856; }
.watch td + td, .faq-a, .intro, .sec-head p, .opt-list li { color: var(--op-muted); }
.watch td + td strong, .faq-a strong { color: var(--op-ink); font-weight: 700; }

/* Hero map: a clearer, slower double pulse and a gently floating example bubble */
.region .pulse { fill: #F4A3C5; opacity: .55; animation: pulse-strong 2.8s ease-out infinite; }
.region .pulse2 { animation-delay: 1.4s; }
@keyframes pulse-strong { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }
.region .dot { animation: dot-beat 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dot-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.25); } 24% { transform: scale(1); } }
.phrase { animation: bubble-in .9s cubic-bezier(.2,.8,.2,1) .4s both; }
@keyframes bubble-in { 0% { opacity: 0; transform: translateY(14px) scale(.92); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }

/* Hero on phones: text, then the button on its own line, then the map */
@media (max-width: 920px) {
  .hero-cta { margin-top: 1.4rem; }
  .hero-cta .btn { min-height: 44px; padding-left: 1.4rem; padding-right: 1.4rem; }
  .hero-visual { margin-top: 2rem; }
}

/* Module 2: a shorter, smaller statement */
.answer { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; max-width: 40rem; }

/* Module 4: drift labels say what changed, not that a rule fired */
.v-why { grid-column: 2 / -1; font-size: .82rem; font-weight: 600; color: #FF9CC4; }
.travel .v-why { transition: opacity .4s ease 1.5s; }
.travel.pre .v-why { opacity: 0; }

/* Module 5: cards stay put and line up; the Arbitr card stands out by border and shadow, its points tick in on scroll */
.opt-manual { opacity: .96; }
.opt-arbitr .opt-list li { transition: opacity .45s ease, transform .45s ease; }
.options.pre .opt-arbitr .opt-list li { opacity: 0; transform: translateX(-8px); }
.opt-arbitr .opt-list li:nth-child(2) { transition-delay: .25s; }
.opt-arbitr .opt-list li:nth-child(3) { transition-delay: .5s; }

/* Module 4: once flagged, the drifted versions rise to the top of the list */
.versions .version { will-change: transform; }

/* See also: every card the same size, names held to two lines */
.rel-cards { grid-auto-rows: 1fr; }
.rel-card { height: 100%; min-height: 6.5rem; align-content: center; }
.rel-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }

/* Review-only notes never appear on a published page */
@media (prefers-reduced-motion: reduce) {
  .region .pulse, .region .dot, .phrase { animation: none !important; }
  .options.pre .opt-arbitr .opt-list li { opacity: 1; transform: none; }
}





.rep-points .pt-covers dt { color: var(--op-indigo); }
.rep-points dd.covers { font-family: var(--op-font); font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--op-ink); max-width: 18rem; }
.date-note { display: block; margin-top: .45rem; font-family: var(--op-sans); font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--op-muted); max-width: 18rem; }


/* Mobile pass */
@media (max-width: 760px) {
  /* Module 2 points: who it covers runs full width, then date and region side by side */
  .rep-points { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem 1.25rem; border-left: 0 !important; border-top: 1px solid var(--op-rule); padding: 1.25rem 0 0 !important; margin-top: 1.25rem; }
  .rep-points > div { min-width: 0; }
  .rep-points .pt-covers { grid-column: 1 / -1; }
  .rep-points dd.covers, .date-note { max-width: none; }
  .rep-points dd.covers { font-size: 18px; }
  .rep-points dd.key { font-size: 20px; }
}
@media (max-width: 380px) {
  .rep-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  /* Stacked table rows keep their second column's label */
  .watch td[data-label]::before { content: attr(data-label); display: block; font-family: var(--op-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--op-muted); margin-bottom: .3rem; }
  /* See also cards: same size as each other, less empty space */
  .rel-card { min-height: 5.25rem; }
  .hero h1 { font-size: clamp(32px, 9vw, 40px); }
}


.rep-points > div { align-content: start; }
@media (max-width: 420px) {
  /* Map label sits centred under the pin so it never runs off narrow screens */
  .region-label { transform: translate(-50%, 55%); font-size: 11px; }
  .phrase { font-size: 15px; }
}



/* Wave 1 accessibility patch (Oct 14, 2026): brings the locked template to playbook 2b.5 (WCAG 2.2 AA) and 5b.7 (44px tap targets). Proposed, pending Chris's sign-off. */
.op-page .band.grey .eyebrow { color: #6450ee; }
.op-page .version .chip { background: #d12d70; }
@media (max-width: 760px) { .op-page .btn { min-height: 44px; height: auto; } }