/* Salesforce reference measured 3 Nov 2026: royal-blue hero, teal highlight, pill
   actions, glass demo frame and sky-backed expanding panels. Tradezur content and
   approved monochrome logo remain our own; Inter is the open licensed typeface. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: italic; font-display: swap; src: url(/fonts/inter-latin-wght-italic.woff2) format("woff2"); }

:root {
  --hdr: 96px;            /* sticky header height; site.js measures the real value */
  --charcoal: #20252b;     /* kit: the approved logo ink; kept for the mark only */
  --blue: #1167f5;         /* v2.1: primary action blue, sampled from the concept */
  --blue-deep: #022ac0;    /* Salesforce deep blue: hero base and hover */
  --blue-ink: #0b5cd5;     /* links on white, 5.2:1 */
  --blue-600: #0b46b4;     /* hero mid stop */
  --night: #061b50;        /* tokens.json: deepest ground */
  --cyan: #20b9ff;         /* tokens.json cyan */
  --navy: #09245b;         /* tokens.json navy: section headings on white */
  --navy-2: #001e5b;
  --ink: #12223f;          /* tokens.json ink */
  --ink-2: #3e4c63;
  --muted: #5c6b80;
  --teal: #04e1cb;
  --lilac: #f3f0ff;        /* tokens.json lightLavender */
  --violet: #742dda;       /* tokens.json violet */
  --magenta: #e92bba;      /* tokens.json magenta */
  --surface-dark: #06205c;  /* v2.1: dark sections are deep blue, not charcoal */
  --green: #17694e;
  --sky-1: #eaf5fe;        /* tokens.json softBlue */
  --sky-2: #90d0fe;        /* stronger sky, dome and section edges */
  --line: rgba(3, 45, 96, .14);
  --white: #fff;
  --go: #17694e;     --go-bg: #eaf3ee;
  --change: #956400; --change-bg: #fdf6e7;
  --stop: #a32222;   --stop-bg: #fdeaea;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --hangul: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", "Nanum Gothic", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", Arial, Helvetica, var(--hangul), ui-sans-serif, system-ui, sans-serif;
  --display: var(--body);
  --shadow-card: 0 2px 4px rgba(3, 45, 96, .06), 0 12px 32px -8px rgba(3, 45, 96, .18);
  --shadow-blue: 0 8px 24px -6px rgba(17, 103, 245, .45);
  --wrap: 1260px;         /* tokens.json maxWidthPx */
}
html[lang="ko"] { --body: var(--hangul); --display: var(--hangul); }
html[lang="ja"] { --body: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; --display: var(--body); }
html[lang="zh-Hans"] { --body: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --display: var(--body); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
html[data-page="viewer"] { scroll-padding-top: calc(var(--hdr) + 58px); }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--body); font-feature-settings: "cv05" 1, "ss01" 1; }
html[lang="ko"] body { word-break: keep-all; line-height: 1.7; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-ink); text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -0.028em; }
h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -0.022em; color: var(--navy); }
h3 { font-size: 21px; line-height: 1.32; letter-spacing: -0.008em; }
html[lang="ko"] h1, html[lang="ko"] h2 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.22; }
html[lang="ko"] h3 { font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 880px; }
.center { text-align: center; }
.caps { font: 600 13px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 12px; }
html[lang="ko"] .caps { letter-spacing: .01em; font-size: 14px; }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); }
.small { font-size: 14.5px; color: var(--muted); }
.mt { margin-top: 18px; }
.mt-h { margin: 22px 0 8px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 14px; z-index: 60; border-radius: 8px; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* banners */
.draft-banner { background: #fdf6e7; color: #7a5200; font-size: 14.5px; padding: 8px 16px; text-align: center; }
.lang-hint { background: var(--sky-1); font-size: 15px; padding: 8px 0; }
.lang-hint .wrap { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.lang-hint button { font: inherit; font-size: 14px; background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; }

/* header: white bar, mark left, green pill right */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--white); transition: box-shadow .2s var(--ease); }
.site-header.scrolled { box-shadow: 0 2px 12px rgba(32, 37, 43, .10); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: flex; white-space: nowrap; align-items: center; gap: 10px; text-decoration: none; color: var(--charcoal); margin-right: auto; }
.brand:hover { color: var(--navy); }
.brand .mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand b { font: 600 20px/1 var(--display); letter-spacing: -0.01em; font-family: var(--display); }
.brand span { font: 500 13px/1 var(--hangul); color: var(--muted); }
.brand b { letter-spacing: -0.005em; }
.nav { display: none; gap: 26px; font-size: 15.5px; }
.nav a { white-space: nowrap; color: var(--ink); text-decoration: none; position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .2s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.lang { display: flex; gap: 4px; font-size: 14px; flex-wrap: wrap; }
.lang a, .lang strong { white-space: nowrap; padding: 6px 10px; border-radius: 9999px; text-decoration: none; }
.lang strong { background: var(--sky-1); color: var(--navy); font-weight: 600; }
.lang a { color: var(--ink-2); }
.lang a:hover { background: var(--sky-1); color: var(--navy); }
/* Six languages share one compact control so translated navigation has room. */
.language-menu { position: relative; flex-shrink: 0; }
.language-menu summary { cursor: pointer; padding: 8px 12px; border-radius: 9999px; color: var(--navy); background: var(--sky-1); white-space: nowrap; }
.language-menu .lang { position: absolute; right: 0; top: 100%; min-width: 170px; padding: 8px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(32, 37, 43, .14); flex-direction: column; }
.site-header .language-menu .lang { width: auto; }

.site-header .head-cta { display: none; white-space: nowrap; }
@media (min-width: 1240px) { .nav { display: flex; } }
@media (min-width: 720px) { .site-header .head-cta { display: inline-flex; } }

/* buttons: Salesforce pills (v2.1 keeps the pill shape and gives the filled button the blue back) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px; border-radius: 9999px; font: 600 16px/1.2 var(--body); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-white { background: var(--white); color: var(--blue-deep); border-color: var(--white); }
.btn-white:hover { background: var(--sky-1); color: var(--blue-deep); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.btn-glass { background: rgba(255, 255, 255, .18); color: var(--navy); border-color: rgba(3, 45, 96, .2); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255, 255, 255, .3); color: var(--navy); }
/* v2.1: the filled action is blue #1167F5 again (2.1 rules 3 and 7), not charcoal. */
.btn-blue { background: var(--blue); color: var(--white); border-color: var(--blue); }
.btn-blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); box-shadow: var(--shadow-blue); }
.hero-on-dark .btn-glass { color: var(--white); border-color: rgba(255, 255, 255, .45); }
.hero-on-dark .btn-glass:hover { background: rgba(255, 255, 255, .12); color: var(--white); border-color: var(--white); }
.btn-green { background: var(--blue); color: var(--white); min-height: 44px; padding: 10px 22px; font-size: 15px; }
.btn-green:hover { background: var(--blue-deep); color: var(--white); box-shadow: var(--shadow-blue); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* hero: white surface, charcoal headline (Brand Kit v1.0 digital interface). The dark variant
   below carries white type on the charcoal bands. */
.hero { position: relative; overflow: hidden; color: var(--charcoal); background: linear-gradient(180deg, var(--sky-1), var(--white) 78%); padding: 56px 0 48px; text-align: center; border-bottom: 1px solid var(--line); }
.hero h1 { color: var(--charcoal); max-width: 1000px; margin: 0 auto; font-size: clamp(34px, 4.3vw, 52px); font-weight: 600; line-height: 1.14; letter-spacing: -0.02em; }
html[lang="ko"] .hero h1 { max-width: 1000px; font-size: clamp(30px, 4.6vw, 52px); font-weight: 700; }
.hero h1 .hl { color: var(--blue); }
.hero .lede { color: var(--ink-2); max-width: 56ch; margin: 18px auto 0; }
.hero .caps { color: var(--muted); }
.hero .intro-line { margin: 22px auto 0; font-size: 15px; color: var(--muted); max-width: 56ch; }
.sparkle { display: none; }
.hero-on-dark, .hero-on-dark h1, .hero-on-dark h2 { color: var(--white); }
.hero-on-dark h1 .hl { color: var(--white); }
.hero-on-dark .lede, .hero-on-dark .intro-line { color: rgba(255, 255, 255, .88); }
.hero-on-dark .caps { color: rgba(255, 255, 255, .78); }
.hero-on-dark .hero-facts > div { border-color: rgba(255, 255, 255, .30); }
.hero-on-dark .hero-facts dt { color: rgba(255, 255, 255, .78); }
.hero-on-dark .hero-facts dd { color: var(--white); }
/* Dark bands carry white actions: the charcoal CTA would disappear on charcoal. */
.contact-band .btn-white, .hero-on-dark .btn-white { background: var(--white); color: var(--charcoal); border-color: var(--white); }
.contact-band .btn-white:hover, .hero-on-dark .btn-white:hover { background: var(--sky-1); border-color: var(--sky-1); color: var(--charcoal); }
.contact-band .btn-glass, .hero-on-dark .btn-glass { color: var(--white); border-color: rgba(255, 255, 255, .45); background: transparent; }
.contact-band .btn-glass:hover, .hero-on-dark .btn-glass:hover { background: rgba(255, 255, 255, .12); color: var(--white); border-color: var(--white); }
/* The interactive blue is too dark on charcoal (2.3:1), so dark surfaces use the pale tint of
   the same blue (7.2:1). White stays for non-interactive text. */
.contact-band a:not(.btn), .hero-on-dark a:not(.btn) { color: #8fb0ff; text-decoration-color: rgba(143, 176, 255, .6); }
.contact-band a:not(.btn):hover, .hero-on-dark a:not(.btn):hover { color: #c7d2ee; }
.contact-band .copy-btn { color: var(--white); border-color: rgba(255,255,255,.45); }
@keyframes sparkFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: .9; } 50% { transform: scale(.75) rotate(12deg); opacity: .45; } }

/* demo frame: neutral card with pill tabs and an auto-advancing report preview */
.demo { margin: 56px auto 0; max-width: 1080px; padding: 14px; border-radius: 16px 16px 0 0; background: var(--white); border: 1px solid var(--line); border-bottom: 0; box-shadow: var(--shadow-card); text-align: left; color: var(--ink); }
.demo-bar { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 4px 4px 12px; scrollbar-width: none; }
.demo-bar::-webkit-scrollbar { display: none; }
.tab { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: 2px solid transparent; background: var(--sky-1); font: 500 15px/1 var(--body); color: var(--navy); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.tab:hover { background: var(--white); }
.tab[aria-selected="true"] { background: var(--white); border-color: var(--charcoal); box-shadow: 0 2px 8px rgba(32, 37, 43, .10); }
.tab .ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 700 11px/1 var(--body); color: var(--white); }
.tab .prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--blue); }
.tab[aria-selected="true"] .prog { animation: prog var(--dur, 6s) linear forwards; }
.demo.paused .tab .prog { animation-play-state: paused; }
@keyframes prog { to { width: 100%; } }
.demo-ctrl { margin-left: auto; display: flex; gap: 6px; flex: none; }
.round { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(32, 37, 43, .12); background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.round:hover { background: var(--sky-1); }
.round:active { transform: scale(.94); }
.stage { position: relative; background: var(--white); border-radius: 22px 22px 0 0; min-height: 380px; overflow: hidden; }
.panel { display: none; padding: 28px; animation: panelIn .45s var(--ease); }
.panel.on { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 18px; }
.panel-head h3 { color: var(--navy); font-size: 22px; }
.panel-head .tag { font-size: 13px; color: var(--muted); background: var(--sky-1); padding: 4px 10px; border-radius: 9999px; }
.panel p { color: var(--ink-2); font-size: 16px; }
.panel .grid2 { display: grid; gap: 20px; }
@media (min-width: 860px) { .panel { padding: 34px 40px; } .panel .grid2 { grid-template-columns: 1.1fr 1fr; gap: 36px; } }
.mini { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mini td, .mini th { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mini th { font: 600 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.mini .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini tr.total td { font-weight: 700; color: var(--navy); border-top: 2px solid var(--navy); }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.bar { height: 14px; border-radius: 9999px; background: var(--sky-1); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); width: 0; transition: width 1.1s var(--ease); }
.panel.on .bar i { width: var(--w); }
.bar-label { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { padding: 6px 12px; border-radius: 9999px; background: var(--sky-1); color: var(--navy); font-size: 14px; }
.chips li.top { background: var(--navy); color: var(--white); }

/* decision states (used in the demo, the sample and the cards) */
.states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.states li { text-align: center; padding: 12px 6px; border-radius: 14px; font: 600 15px/1.2 var(--display); color: var(--muted); background: #f3f3f3; border: 2px solid transparent; }
.states li .k { display: block; font: 500 11px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 3px; }
.states li.on.go { background: var(--go-bg); color: var(--go); border-color: var(--go); }
.states li.on.change { background: var(--change-bg); color: var(--change); border-color: var(--change); animation: pulseRing 2.4s var(--ease) infinite; }
.states li.on.stop { background: var(--stop-bg); color: var(--stop); border-color: var(--stop); }
@keyframes pulseRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(149, 100, 0, .30); } 50% { box-shadow: 0 0 0 7px rgba(149, 100, 0, 0); } }
.reason { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); }

/* marquee: the official sources we read (no client logos) */
.sources { background: var(--sky-1); color: var(--charcoal); padding: 34px 0 0; text-align: center; border-top: 1px solid var(--line); }
.sources > .dome { margin-top: 40px; }
.sources h2 { color: var(--charcoal); font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 22px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: slideLeft 85s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee span { flex: none; padding: 10px 18px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); color: var(--ink-2); font: 500 14.5px/1 var(--body); white-space: nowrap; }
@keyframes slideLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* section heads */
.sec-head { text-align: center; max-width: 900px; margin: 0 auto 44px; }
.sec-head h2 .blue { color: var(--blue-deep); display: block; }
body[data-page="home"] .sec-head h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.04; font-weight: 500; }
html[lang="ko"] body[data-page="home"] .sec-head h2 { line-height: 1.2; font-weight: 600; }
.sec-head .lede { margin: 32px auto 0; max-width: 768px; color: var(--navy); font-size: 20px; line-height: 1.5; }
section.band { padding: 88px 0; }
@media (min-width: 960px) { section.band { padding: 112px 0; } }

/* who: white cards */
.cards3 { display: grid; gap: 20px; }
@media (min-width: 860px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--white); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-card); border: 1px solid rgba(32, 37, 43, .06); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(32, 37, 43, .08), 0 22px 44px -10px rgba(32, 37, 43, .14); }
.card .icon { width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-dark); color: var(--white); margin-bottom: 18px; }
.card h3 { color: var(--navy); margin-bottom: 8px; }
.card p { margin: 0; color: var(--ink-2); font-size: 16px; }
.notfor { margin: 28px auto 0; max-width: 760px; text-align: center; color: var(--ink-2); font-size: 16px; }

/* sky section with sticky stacking cards */
.sky { background: linear-gradient(var(--sky-1), var(--sky-2)); }
.stack { position: relative; max-width: 1152px; margin: 0 auto; }
.stack::after { content: ""; display: none; height: 100vh; }
.stack.stack-ready::after { display: block; }
.sanchor { display: block; height: 0; scroll-margin-top: calc(var(--hdr) + 16px - 84px); }
.stack-ready .sanchor { scroll-margin-top: calc(var(--stack-top, 112px) + var(--i) * 46px - 84px); }
.scard { position: relative; top: auto; z-index: var(--i); margin-bottom: 64px; border-radius: 12px; border: 1px solid var(--line); color: var(--charcoal); overflow: hidden; background: var(--white); box-shadow: var(--shadow-card); transform-origin: top center; will-change: transform; }
.stack-ready .scard { position: sticky; top: calc(var(--stack-top) + var(--i) * 46px); transform: translateY(var(--card-lift, 0px)) scale(var(--card-scale, 1)); }
.scard.g1 { --bg: var(--white); --sh: 32, 37, 43; }
.scard.g2 { --bg: var(--white); --sh: 32, 37, 43; }
.scard.g3 { --bg: var(--white); --sh: 32, 37, 43; }
.scard.g4 { --bg: var(--white); --sh: 32, 37, 43; }
.scard.g2, .scard.g3, .scard.g4 { box-shadow: 0 1px 2px rgba(var(--sh), .05), 0 16px 32px -18px rgba(var(--sh), .22); }
/* Compact title appears after the following card reaches its sticky line. */
.scard .strip { position: absolute; inset: 0 0 auto; z-index: 2; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 32px; background: var(--sky-1); border-bottom: 1px solid var(--line); color: var(--charcoal); text-decoration: none; opacity: 0; pointer-events: none; }
.scard .strip-t { font: 500 17px/1.2 var(--display); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard .strip:hover .strip-t { color: var(--charcoal); }
.scard .strip-l { display: inline-flex; align-items: center; gap: 12px; font: 500 16px/1 var(--display); white-space: nowrap; }
.scard.covered .strip { opacity: 1; pointer-events: auto; }
.scard.covered .strip-t { animation: dockTitle .3s .2s cubic-bezier(.45,.04,.1,.7) both; }
.scard.covered .strip-l { animation: dockLabel .6s .1s cubic-bezier(.45,.04,.1,.7) both; }
@keyframes dockTitle { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes dockLabel { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) { .stack-ready .scard.covered:hover { --card-lift: -10px; } }
/* round glossy step icon (our own glyphs) */
.sico { flex: none; width: 36px; height: 36px; border-radius: 9999px; display: grid; place-items: center; background: var(--sky-1); border: 1px solid var(--line); color: var(--charcoal); }
.sico svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sico.big { width: 80px; height: 80px; background: var(--surface-dark); color: var(--white); border-color: var(--charcoal); box-shadow: none; }
.sico.big svg { width: 50%; height: 50%; stroke-width: 2; }
.scard .strip .sico { width: 40px; height: 40px; }
.scard .shead { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12px; padding: 24px 24px 0; }
.scard h3 { font: 600 clamp(24px, 2.4vw, 30px)/1.25 var(--display); color: var(--charcoal); letter-spacing: -0.015em; max-width: 42rem; margin: 0; }
.scard .slabel { display: flex; align-items: center; gap: 16px; margin-left: auto; text-align: right; }
.scard .slabel-t { display: flex; flex-direction: column; gap: 2px; }
.scard .slabel-t b { font: 500 18px/1.3 var(--display); }
.scard .slabel-t span { font-size: 16px; color: var(--muted); }
.scard .body { display: grid; gap: 32px; padding: 24px 24px 32px; }
.scard .body.body--single { grid-template-columns: minmax(0, 1fr); }
.scard:has(.body--single) .shead { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.scard .body--single .side { max-width: none; padding: 24px; border-radius: 10px; box-shadow: none; background: var(--white); }
.scard .body--single .stage-k { color: var(--blue-ink); margin-bottom: 12px; }
.scard .body--single .stage-out { color: var(--navy); }
@media (max-width: 899px) {
  .scard:has(.body--single) .slabel { flex-shrink: 0; gap: 10px; }
  .scard:has(.body--single) .slabel-t { white-space: nowrap; }
  .scard:has(.body--single) h3 { min-width: 0; font-size: clamp(24px, 7vw, 28px); }
  .scard .strip { padding: 0 16px; gap: 8px; }
  .scard .strip-t { font-size: 14px; }
  .scard .strip-l { font-size: 12px; gap: 6px; }
  .scard .strip .sico { width: 28px; height: 28px; }
}
.scard .stage-k { margin: 0 0 12px; font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scard .stage-out { margin: 0; max-width: 40ch; font: 500 clamp(20px, 2vw, 25px)/1.3 var(--display); color: var(--charcoal); }
.scard .sleft { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.scard .sleft > * { margin: 0; }
.scard p { color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 52ch; }
/* right-hand visual: a white product-style panel, like the layered UI on salesforce.com */
.scard .side { position: relative; align-self: center; justify-self: center; width: 100%; max-width: 470px; background: var(--sky-1); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 26px; box-shadow: none; }
.scard .side .side-h { color: var(--muted); }
.scard .side ul.docs li { background: var(--white); color: var(--charcoal); }
.scard .side .doc-ico { background: var(--blue); }
.scard .side .doc-ico::after { background: repeating-linear-gradient(var(--white) 0 2px, transparent 2px 4px); opacity: .9; }
.scard .side ol.work span { color: var(--ink-2); }
.scard .side ol.work b { color: var(--navy); }
.scard .side .side-reason { color: var(--ink); }
.scard .side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15px; }
.scard .side dt { color: var(--muted); font-weight: 600; }
.scard .side dd { margin: 0; }
@media (min-width: 900px) {
  .scard .shead { flex-direction: row; align-items: center; justify-content: space-between; padding: 64px 64px 24px; }
  .scard .body { grid-template-columns: 1fr 1fr; align-items: center; padding: 0 64px 64px; min-height: 0; }
  .scard .strip { display: flex; }
}

@media (max-width: 899px) { .sico.big { width: 40px; height: 40px; } .scard .slabel-t b { font-size: 14px; } .scard .slabel-t span { font-size: 13px; } }
/* Outcome-led cards use the same hierarchy and proportions as the reference. */
.scard .side .stage-artifact { color: var(--navy); font-size: 22px; line-height: 1.35; margin: 0 0 20px; }
.scard .stage-details { padding: 0; margin: 0; list-style: none; }
.scard .stage-details li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.scard .side dt { color: #53616d; }
@media (min-width: 900px) {
  .scard .shead h3 { max-width: 560px; font-size: 40px; line-height: 1.15; }
  .scard .body { gap: 40px; }
  .scard .sleft { align-self: start; }
}
@media (max-width: 899px) {
  .scard .shead { gap: 14px; }
  .scard .shead h3 { font-size: 26px; line-height: 1.18; }
  .scard .body { padding-top: 20px; gap: 20px; }
  .scard .body > .side { display: none; }
  .scard .sleft { gap: 20px; }
  .scard .sleft > p { font-size: 16px; line-height: 1.5; }
  .scard .sleft > .tick { display: none; }
  .scard .sleft > .btn { width: 100%; justify-content: center; font-size: 15px; padding: 16px 20px; }
}

/* fixed step rail on the left, visible only while the stack is on screen */
.srail { display: none; }
@media (min-width: 1380px) and (min-height: 640px) {
  .srail { display: flex; position: fixed; left: 32px; top: 50%; z-index: 30; flex-direction: column; align-items: center; gap: 8px; padding: 4px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .2); backdrop-filter: blur(16px); opacity: var(--rail-in, 0); pointer-events: none; transform: translate(calc(-100px * (1 - var(--rail-in, 0))), -50%); }
  .srail.on { pointer-events: auto; }
  .srail a { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9999px; color: var(--navy); text-decoration: none; font: 500 14px/1 var(--display); transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
  .srail a:hover { background: rgba(3, 45, 96, .1); }
  .srail a[aria-current="step"] { transform: scale(1.1); background: rgba(255, 255, 255, .94); box-shadow: 0 4px 10px rgba(32, 37, 43, .12); }
  .srail .sico { width: 32px; height: 32px; }
  .srail .rl { display: none; }
}
@media (min-width: 1500px) and (min-height: 640px) {
  .srail { align-items: flex-start; gap: 12px; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .srail a { padding: 8px 18px 8px 8px; }
  .srail a:not([aria-current="step"]) .sico { display: none; }
  .srail a:not([aria-current="step"]) { padding: 8px 12px; }
  .srail .rl { display: inline; }
}

/* deliverables grid */
.parts { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; counter-reset: part; }
@media (min-width: 720px) { .parts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .parts { grid-template-columns: repeat(3, 1fr); } }
.parts li { counter-increment: part; margin: 0; }
.parts .card { height: 100%; }
.parts .card::before { content: counter(part, decimal-leading-zero); display: inline-block; font: 600 14px/1 var(--body); color: var(--blue-ink); background: var(--sky-1); padding: 6px 10px; border-radius: 9999px; margin-bottom: 14px; }
.ai-line { text-align: center; margin: 36px auto 0; max-width: 64ch; color: var(--ink-2); }

/* price */
.price-grid { display: grid; gap: 20px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 860px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price { background: var(--white); border-radius: 28px; padding: 32px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; }
.price.feature { background: var(--surface-dark); color: var(--white); border: 1px solid var(--charcoal); box-shadow: var(--shadow-card); }
.price h3 { color: inherit; }
.price.feature h3, .price.feature .amt { color: var(--white); }
.price .amt { font: 600 clamp(44px, 5vw, 60px)/1 var(--display); letter-spacing: -0.03em; color: var(--navy); }
.price.feature .amt { color: var(--white); }
.price p { margin: 0; color: var(--ink-2); font-size: 16px; }
.price.feature p { color: rgba(255, 255, 255, .9); }
.price ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15.5px; }
.price ul li { padding-left: 26px; position: relative; }
.price ul li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); color: var(--blue); }
.price:not(.feature) ul li::before { color: var(--green); }
.promise { max-width: 1000px; margin: 24px auto 0; background: var(--white); border-radius: 22px; padding: 22px 26px; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; box-shadow: var(--shadow-card); }
.promise .icon { width: 44px; height: 44px; border-radius: 14px; background: var(--go-bg); color: var(--go); display: grid; place-items: center; }
.promise p { margin: 0; color: var(--ink-2); }
.fine { max-width: 1000px; margin: 18px auto 0; font-size: 15px; color: var(--navy); text-align: center; }

/* The monthly note expands from an inset navy panel as it enters the viewport. */
.note-shell { background: linear-gradient(var(--sky-2), var(--sky-1)); }
.note-band { background: var(--surface-dark); color: var(--white); }
section.note-band { padding: 96px 40px; }
.note-band > .wrap { max-width: 1200px; }
.note-band .sec-head h2, .note-band .sec-head .lede, .note-band .caps { color: var(--white); }
body[data-page="home"] .note-band .sec-head h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.25; }
.js .note-band { clip-path: inset(var(--clip-y, 32px) var(--clip-x, 64px) round 32px); }
.js .note-band:focus-within { clip-path: none; }
@media (max-width: 759px) { section.note-band { padding: 64px 0; } }
.note-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .note-grid { grid-template-columns: 1fr 1.25fr; align-items: start; } }
.glass { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 26px; padding: 26px; backdrop-filter: blur(8px); }
.glass h3 { margin-bottom: 10px; color: var(--white); font-size: 18px; }
.glass ul { margin: 0; padding-left: 1.1em; font-size: 15px; color: var(--white); }
.glass li { margin: 6px 0; }
.glass a { color: var(--white); }
.glass .ph { background: rgba(255, 233, 168, .95); }
.form { background: var(--white); color: var(--ink); border-radius: 28px; padding: 28px; display: grid; gap: 18px; box-shadow: 0 30px 60px -20px rgba(32, 37, 43, .14); }
.fields { display: grid; gap: 14px; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fields .field:first-child { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 15px; font-weight: 600; color: var(--navy); }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input { font: inherit; font-size: 16px; padding: 12px 16px; min-height: 50px; border: 1px solid #939393; border-radius: 12px; background: var(--white); color: var(--ink); width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:hover { border-color: var(--navy); }
.field input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .25); }
.consent { border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin: 0; background: #f5f7f9; }
.consent legend { font: 600 13px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--blue-ink); padding: 0 6px; }
html[lang="ko"] .consent legend { text-transform: none; letter-spacing: 0; font-size: 14px; }
.consent .box { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-weight: 600; color: var(--navy); cursor: pointer; }
.consent input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blue); }
.consent dl { margin: 14px 0 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); }
.consent dt { font-weight: 600; color: var(--ink); }
.consent dd { margin: 0; }
@media (min-width: 720px) { .consent dl { grid-template-columns: 150px 1fr; } }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.status { min-height: 1.4em; margin: 0; font-size: 15px; }
.status.ok { color: var(--go); }
.status.err { color: var(--stop); }

/* FAQ accordion */
.faq { max-width: 900px; margin: 0 auto; }
.faq h2 { font-size: clamp(32px, 3vw, 40px); line-height: 1.2; color: var(--navy-2); text-align: center; margin-bottom: 36px; }
.faq details { border-bottom: 1px solid var(--line); color: var(--ink-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font: 500 clamp(17px, 1.6vw, 19px)/1.4 var(--display); color: var(--charcoal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 28px; height: 28px; position: relative; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 6px; right: 6px; top: 13px; height: 2px; background: var(--blue); border-radius: 2px; transition: transform .25s var(--ease); }
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] summary .plus::after { transform: rotate(0); }
.faq summary:hover { color: var(--blue); }
.faq .ans, .faq details[open] .ans { padding: 0 4px 22px; color: var(--ink-2); max-width: 70ch; animation: panelIn .3s var(--ease); }

/* contact band */
.contact { background: var(--surface-dark); color: var(--white); border-radius: 12px; padding: 40px 28px; display: grid; gap: 26px; border: 1px solid rgba(255, 255, 255, .18); }
.contact h2 { color: var(--white); }
.contact .lede { color: rgba(255, 255, 255, .9); margin-top: 12px; }
.contact .email-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.contact .addr { font: 600 clamp(18px, 2vw, 24px)/1.2 var(--display); user-select: all; word-break: break-all; }
.copy-btn { font: 500 14px/1 var(--body); padding: 10px 16px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .40); background: rgba(255, 255, 255, .10); color: var(--white); cursor: pointer; transition: background-color .2s var(--ease); }
.copy-btn:hover { background: rgba(255, 255, 255, .22); }
.contact dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 15.5px; }
.contact dt { color: rgba(255, 255, 255, .7); }
.contact dd { margin: 0; }
.contact .ph { background: rgba(255, 233, 168, .95); }
@media (min-width: 900px) { .contact { grid-template-columns: 1.1fr 1fr; padding: 56px; align-items: center; } }

/* owner placeholders: visible in preview, blocked by tools/prelaunch-check.mjs */
.ph { background: #f5f7f9; color: #6b4a00; padding: 0 5px; border-radius: 4px; font: 500 .9em/1.4 ui-monospace, Menlo, monospace; }

/* reveal on scroll and hero load sequence */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .6s cubic-bezier(.32,.72,0,1), transform .6s cubic-bezier(.32,.72,0,1); transition-delay: var(--d, 0s); }
.js .sec-head.reveal { transform: translateY(60px); }
.js .reveal.in { opacity: 1; transform: none; }
.js .hero .rise { opacity: 0; transform: translateY(18px); animation: rise .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .demo.rise { animation-duration: 1s; }

/* sample and simple pages */
.page { padding: 56px 0 96px; background: linear-gradient(var(--sky-1), var(--white) 420px); }
.page h1 { font-size: clamp(32px, 4.4vw, 52px); color: var(--navy); margin: 8px 0 18px; }
.sample-flag { background: var(--navy); color: var(--white); font-size: 14.5px; padding: 10px 16px; text-align: center; }
.sample-flag b { color: var(--white); }
.doc { background: var(--white); border-radius: 26px; padding: 26px; margin-top: 22px; box-shadow: var(--shadow-card); border: 1px solid rgba(32, 37, 43, .06); }
@media (min-width: 860px) { .doc { padding: 40px 44px; } }
.executive-page { scroll-margin-top: calc(var(--hdr) + 16px - 84px); }
.doc h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 16px; }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 15px; margin: 0 0 26px; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; }
.facts { counter-reset: f; list-style: none; padding: 0; margin: 0; }
.facts li { counter-increment: f; padding: 14px 0 14px 46px; border-top: 1px solid var(--line); position: relative; }
.facts li::before { content: counter(f); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-dark); color: var(--white); font: 600 13px/30px var(--body); text-align: center; }
.callout { margin-top: 18px; padding: 16px 20px; background: var(--sky-1); border-radius: 16px; font-size: 15.5px; color: var(--navy); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 560px; }
th, td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--line); }
thead th { font: 600 12.5px/1.3 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 2px solid var(--navy); }
html[lang="ko"] thead th { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 700; color: var(--navy); border-top: 2px solid var(--navy); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill.yes { background: var(--change-bg); color: var(--change); }
.pill.no { background: #f3f3f3; color: var(--muted); }
.pill.risk { background: var(--stop-bg); color: var(--stop); }
.options { display: grid; gap: 14px; }
@media (min-width: 860px) { .options { grid-template-columns: repeat(3, 1fr); } }
.opt-card { border-radius: 20px; padding: 20px; background: #f5f7f9; border: 2px solid transparent; }
.opt-card.rec { border-color: var(--blue); background: var(--white); box-shadow: var(--shadow-card); }
.opt-card h3 { font-size: 17px; color: var(--navy); margin-bottom: 6px; }
.opt-card p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.page .actions { justify-content: flex-start; }

/* footer: white columns, navy bottom bar */
.site-footer { background: var(--white); border-top: 1px solid var(--line); font-size: 15px; }
.site-footer .cols { display: grid; gap: 28px; padding: 48px 24px 40px; }
@media (min-width: 860px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { margin: 0 0 12px; font: 600 15px/1.3 var(--body); color: var(--navy); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--blue-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .who { color: var(--ink-2); }
.site-footer .who .brand { margin-bottom: 14px; }
.site-footer .bottom { background: var(--navy); color: rgba(255, 255, 255, .85); font-size: 13.5px; }
.site-footer .bottom .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; padding-bottom: 16px; }
.site-footer .bottom a { color: var(--white); }
.site-footer .bottom .ph { background: #3d4650; color: #f3e6b8; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero .rise { opacity: 1; transform: none; }
  .scard { transform: none !important; }
}
.demo .i-play { display: none; }
.demo .is-play .i-play { display: inline; }
.demo .is-play .i-pause { display: none; }
.panel .grid2 { grid-template-columns: minmax(0, 1fr); }
.panel .grid2 > * { min-width: 0; }
.mini td, .mini th { overflow-wrap: anywhere; }
@media (min-width: 860px) { .panel .grid2 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
/* The controller enables mobile stacking only when cards fit below the header. */

/* menu button below 1240px (the full nav shows from 1240px) */
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; }
.menu-btn:hover { background: var(--sky-1); }
.mnav { border-top: 1px solid var(--line); background: var(--white); }
.mnav .wrap { display: grid; padding-top: 8px; padding-bottom: 14px; }
.mnav a { display: block; padding: 12px 0; color: var(--navy); text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--line); }
.mnav a:last-child { border-bottom: 0; }
@media (min-width: 1240px) { .menu-btn, .mnav { display: none !important; } }
.scard .note-line { font-size: 15px; color: var(--muted); margin-top: 6px; }
.contact .intro-line { color: rgba(255, 255, 255, .9); font-size: 15px; margin: 14px 0 0; }
@media (max-width: 479px) { .site-header .brand span { display: none; } .site-header .wrap { gap: 12px; } }
.demo { --dur: 9s; }
.scard h3 { margin-bottom: 14px; }

/* round 5: richer cards (owner: Salesforce cards carry substantial content) */
.card.rich { display: flex; flex-direction: column; gap: 10px; padding: 32px; }
.card.rich h3 { font-size: 23px; margin: 0; }
.card.rich .btn { align-self: flex-start; margin-top: auto; }
ul.tick { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 9px; font-size: 15.5px; color: var(--ink-2); }
ul.tick li { position: relative; padding-left: 28px; }
ul.tick li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 9999px; background: var(--sky-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
ul.tick.light { color: rgba(255, 255, 255, .95); margin-top: 18px; }
ul.tick.light li::before { background-color: rgba(255, 255, 255, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.market-strip { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; margin: 32px auto 0; }
.pill-mk { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 9999px; background: var(--navy); color: var(--white); font: 600 14.5px/1.2 var(--body); }
.pill-mk::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--white); }
.mk-note { color: var(--ink-2); font-size: 15px; }

/* step-card side artefacts */
.scard .side-h, .next .side-h { font: 600 12.5px/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; margin: 0 0 14px; color: var(--muted); }
.scard ul.docs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.scard ul.docs li { display: flex; gap: 12px; align-items: center; background: var(--sky-1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 15px; }
.doc-ico { flex: none; width: 22px; height: 26px; border-radius: 4px; background: var(--white); position: relative; }
.doc-ico::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 10px; background: repeating-linear-gradient(var(--blue) 0 2px, transparent 2px 4px); opacity: .7; }
.scard .side.paper { background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 40px -12px rgba(32, 37, 43, .18); transform: none; }
.scard .paper-h { font: 600 13px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 12px; }
.scard .paper-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; font-size: 15px; }
.scard .paper-dl dt { color: var(--muted); font-weight: 400; }
.scard .paper-dl dd { margin: 0; color: var(--navy); font-weight: 600; }
.paper-btn { display: inline-block; background: var(--blue); color: var(--white); border-radius: 9999px; padding: 8px 18px; font: 500 14px/1.2 var(--body); }
.scard ol.work { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; counter-reset: w; }
.scard ol.work li { counter-increment: w; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; font-size: 14.5px; }
.scard ol.work li::before { content: counter(w); grid-row: span 2; width: 26px; height: 26px; border-radius: 9999px; background: var(--surface-dark); color: var(--white); display: grid; place-items: center; font: 700 12px/1 var(--body); }
.scard ol.work b { font-weight: 600; }
.scard ol.work span { color: var(--muted); }
.scard .side .states { margin: 0 0 12px; }
.side-reason { font-size: 14.5px; color: var(--ink-2); margin: 0 0 14px; }
.btn-sm { min-height: 42px; padding: 9px 20px; font-size: 15px; }

/* Resource cards: alternating wide and narrow tiles on the reference's purple gradient. */
#check { background: var(--sky-1); }
.dome { display: block; width: 100%; max-width: none; height: 80px; margin-bottom: -1px; }
.resources, .contact-band { background: var(--surface-dark); color: var(--white); }
.resources .sec-head h2, .resources .sec-head h2 .blue, .resources .sec-head .lede, .resources .caps { color: var(--white); }
.resources .res.reveal { transition: opacity .6s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.res-grid { display: grid; gap: 24px; }
.res { display: flex; flex-direction: column; gap: 20px; background: #20252b; border: 0; border-radius: 16px; padding: 32px; min-height: 420px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); color: var(--navy); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.res h3 { color: var(--navy); font-size: clamp(28px, 2.92vw, 42px); line-height: 1.15; font-weight: 400; margin: 0; }
.res p { margin: 0; color: var(--navy); font-size: 18px; line-height: 1.625; }
.resources .res:nth-child(2), .resources .res:nth-child(5) { background: var(--blue); color: var(--white); }
.resources .res:nth-child(3) { background: #20252b; color: var(--white); }
.resources .res:nth-child(4) { background: var(--teal); }
.resources .res:nth-child(2) h3, .resources .res:nth-child(2) p,
.resources .res:nth-child(3) h3, .resources .res:nth-child(3) p,
.resources .res:nth-child(5) h3, .resources .res:nth-child(5) p { color: var(--white); }
@media (min-width: 1100px) {
  .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res.feature, .res:nth-child(4) { grid-column: span 2; }
  .res:last-child { grid-column: 1 / -1; min-height: 360px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res.feature { grid-column: 1 / -1; }
}
@media (hover: hover) {
  .res.in:hover { transform: scale(1.02); box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .35); }
}
.res-tag { align-self: flex-start; font: 600 12.5px/1.2 var(--body); padding: 5px 11px; border-radius: 9999px; background: #eaf3ee; color: #17694e; }
.res-tag.soon { background: var(--sky-1); color: var(--navy); }
.res.feature, .res.feature:hover { color: var(--navy); }
.res-doc { margin: 10px 0 4px; background: var(--white); border-radius: 16px; padding: 18px 20px; display: grid; gap: 9px; transform: rotate(1deg); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .5); }
.res-doc span { height: 8px; border-radius: 4px; background: #e3e8ee; }
.res-doc span.short { width: 55%; }
.res-doc span.hl { height: 26px; width: 46%; background: var(--change-bg); border: 2px solid var(--change); border-radius: 9999px; }
.res-more { margin-top: auto; font-weight: 600; }
.res-label { font-size: 13px; color: var(--navy); }
.next { margin-top: 28px; background: var(--sky-1); border-radius: 24px; padding: 24px 28px; }
.next .side-h { color: var(--navy); }
.next ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }
@media (min-width: 860px) { .next ul { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.self { background: linear-gradient(180deg, var(--sky-1), var(--sky-2)); }
.card.live { border: 2px solid var(--blue); }

/* Docking is reversible: the full heading yields to the compact title only after the next sticky line. */
.scard h3 { opacity: 1; transform: translateY(0); transition: opacity .6s .1s cubic-bezier(.34,1.56,.64,1), transform .6s .1s cubic-bezier(.34,1.56,.64,1); }
.scard.covered h3 { opacity: 0; transform: translateY(10px); }
.scard .slabel b, .scard .slabel .sico { transition: opacity .3s; }
.scard.covered .slabel b, .scard.covered .slabel .sico { opacity: 0; }
.srail a[aria-current="step"] .sico { animation: railIcon .3s ease-out both; }
@keyframes railIcon { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.js .resources .res.reveal { transform: scale(.8); transition: opacity .4s cubic-bezier(.32,.72,0,1), transform .4s cubic-bezier(.32,.72,0,1); transition-delay: var(--d, 0s); }
.js .resources .res.reveal.in { transform: scale(1); }
@media (hover: hover) { .js .resources .res.reveal.in:hover { transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .js .resources .res.reveal { opacity: 1; transform: none; } }

/* Full-width closing invitation, retaining the existing contact details. */
section.contact-band { position: relative; padding: 96px 0 0; }
.contact-band .contact { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0 0 80px; grid-template-columns: 1fr; text-align: center; max-width: 1000px; margin: auto; }
.contact-band h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.contact-band .lede, .contact-band .intro-line { max-width: 768px; margin: 24px auto 0; }
.contact-band .email-line { justify-content: center; }
.contact-band dl { max-width: 560px; margin: auto; text-align: left; }
.contact-band .sparkle { top: 100px; left: 6%; }
.contact-band .sparkle.s2 { top: 280px; left: auto; right: 6%; }
/* The closing contact band keeps the recorded scroll-driven clip. The old newsletter band is
   gone, so the current contact band carries the same inset-to-full-width motion. */
.js [data-scroll-band] { clip-path: inset(var(--clip-y, 32px) var(--clip-x, 64px) round 32px); }
.js [data-scroll-band]:focus-within { clip-path: none; }
@media (max-width: 767px) { .js [data-scroll-band] { clip-path: inset(var(--clip-y, 16px) var(--clip-x, 16px) round 24px); } }
@media (prefers-reduced-motion: reduce) { .js [data-scroll-band] { clip-path: none; } }

/* Glass-frame tabs enter in sequence, matching the reference's 60px horizontal arrival. */
.js .demo:not(.tabs-in) .tab { opacity: 0; transform: translateX(60px); }
.js .demo.tabs-in .tab { animation: tabArrival .3s ease-out both; }
.js .demo.tabs-in .tab:nth-child(2) { animation-delay: .1s; }
.js .demo.tabs-in .tab:nth-child(3) { animation-delay: .2s; }
.js .demo.tabs-in .tab:nth-child(4) { animation-delay: .3s; }
.js .demo.tabs-in .tab:nth-child(5) { animation-delay: .4s; }
.js .demo.tabs-in .tab:nth-child(6) { animation-delay: .5s; }
@keyframes tabArrival { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .demo:not(.tabs-in) .tab { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .js .sec-head.reveal { opacity: 1; transform: none; } }

/* Brand marks, Brand Kit v1.0 (3 Nov 2026): the supplied SVG, referenced exactly as delivered.
   The file is 1750x377 (aspect 4.6429), so 48px draws it 222.8px wide, above the kit's 220 CSS px
   minimum, with the wordmark's cap height at about 24px against 15.5px nav text. Nothing is
   retyped, traced, recoloured or filtered. */
.brand-logo { height: 48px; width: auto; flex-shrink: 0; margin-left: 0; }
/* Footer mark: 300px, measured to fit the 342px footer column at 390px. The tagline stays text
   beneath it, because the supplied artwork carries no tagline. */
.brand-logo-footer { height: auto; width: 300px; max-width: 100%; }
.brand-tagline { margin: 0 0 14px; font: 500 15px/1.35 var(--body); color: var(--ink-2); }
.site-header > .wrap { max-width: 1600px; min-height: 96px; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
@media (min-width: 1240px) and (max-width: 1439px) { .site-header .nav { display: none; } .site-header .menu-btn { display: inline-flex; } .site-header .mnav:not([hidden]) { display: block !important; } }
@media (max-width: 759px) {
  /* One row: the mark keeps the kit's 220px minimum, then the language control and the menu. */
  .site-header > .wrap { flex-wrap: nowrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
  .brand-logo { width: clamp(220px, 58vw, 240px); height: auto; }
  .language-menu summary { padding: 7px 10px; font-size: 13px; }
  .site-header .brand { order: 0; margin-right: auto; }
  .site-header .menu-btn { order: 1; }
  .site-header .lang { order: 2; width: 100%; justify-content: center; }
  .site-header .head-cta { display: none; }
}

/* hero fact strip and the independent-check block (30 Oct 2026) */
.hero-facts { display: grid; gap: 0; margin: 34px auto 0; max-width: 780px; text-align: left; }
@media (min-width: 800px) { .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.hero-facts > div { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .35); }
.hero-facts dt { font: 600 12px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.hero-facts dd { margin: 8px 0 0; font: 500 18px/1.35 var(--display); color: var(--white); }
html[lang="ko"] .hero-facts dd { font-size: 17px; letter-spacing: -.01em; }
.two-col { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .two-col { grid-template-columns: 1.3fr .7fr; gap: 48px; } }
.two-col .facts li b { display: block; margin-bottom: 4px; color: var(--navy); }
.side-card { background: var(--white); border: 1px solid rgba(32, 37, 43, .08); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-card); }
.side-card p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.side-card p:last-child { margin-bottom: 0; }
.side-card .side-h { font: 600 13px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 14px; }
.who-checks .cards3 { margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* Deal Readiness Viewer (31 Oct 2026). Static, evidence-led, no tabs. */
/* ------------------------------------------------------------------ */
.vw-hero { background: var(--surface-dark); color: var(--white); padding: 64px 0 56px; }
.vw-hero .caps { color: var(--teal); }
.vw-hero h1 { color: var(--white); max-width: 20ch; font-size: clamp(34px, 4.6vw, 62px); font-weight: 400; }
.vw-hero .lede { color: rgba(255, 255, 255, .92); max-width: 62ch; margin-top: 18px; }
.vw-meta { display: grid; gap: 18px; margin: 34px 0 0; }
@media (min-width: 820px) { .vw-meta { grid-template-columns: repeat(3, 1fr); gap: 34px; } }
.vw-meta > div { border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 12px; }
.vw-meta dt { font: 600 11.5px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.vw-meta dd { margin: 7px 0 0; font: 500 16.5px/1.4 var(--display); color: var(--white); }
.vw-flag { margin: 30px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; padding: 14px 18px; max-width: 900px; }
.vw-flag b { color: var(--white); }

/* provenance markers: the three evidence types are labelled wherever they appear */
.prov { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.prov::before { content: ""; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.prov-source::before { background: var(--blue); }
.prov-record::before { background: repeating-linear-gradient(45deg, var(--navy) 0 2px, transparent 2px 4px); border: 1px solid var(--navy); width: 10px; height: 10px; }
.prov-assumption::before { background: var(--white); border: 1.5px dashed var(--navy); width: 10px; height: 10px; }
.vw-hero .prov { color: rgba(255, 255, 255, .9); }
.vw-hero .prov-record::before { background: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 4px); border-color: #fff; }
.vw-hero .prov-assumption::before { background: transparent; border-color: #fff; }

.vw-opening { padding: 48px 0 0; }
.vw-legend { display: grid; gap: 16px; padding: 20px 0 28px; border-bottom: 1px solid var(--line); }
@media (min-width: 820px) { .vw-legend { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.vw-legend-item p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.vw-priority-card { margin-top: 32px; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 24px; padding: 26px 28px; box-shadow: inset 5px 0 0 var(--stop), var(--shadow-card); }
.vw-priority-card .caps { color: var(--stop); }
.vw-priority-grid { display: grid; gap: 22px; margin-top: 6px; }
@media (min-width: 900px) { .vw-priority-grid { grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; } }
.vw-priority-card h2 { font-size: clamp(26px, 3vw, 38px); }
.vw-priority-card p { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; }
.vw-priority-dl { margin: 0; display: grid; gap: 14px; }
.vw-priority-dl > div { border-top: 1px solid var(--line); padding-top: 10px; }
.vw-priority-dl dt { font: 600 11.5px/1.2 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.vw-priority-dl dd { margin: 6px 0 0; font-size: 16px; color: var(--navy); font-weight: 500; }
.vw-priority-note { margin: 20px 0 0; font-size: 14.5px; color: var(--muted); }

/* sticky question bar: plain links, so it works with JavaScript disabled */
.vw-toc { position: sticky; top: var(--hdr); z-index: 30; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); margin-top: 36px; }
.vw-toc .wrap { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.vw-toc .wrap::-webkit-scrollbar { display: none; }
.vw-toc ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 8px 0; }
.vw-toc a { display: inline-flex; align-items: baseline; gap: 7px; padding: 8px 12px; border-radius: 9999px; font: 600 14.5px/1.2 var(--body); color: var(--navy); text-decoration: none; white-space: nowrap; }
.vw-toc a:hover { background: var(--sky-1); color: var(--navy); }
.vw-toc a[aria-current="true"] { background: var(--navy); color: var(--white); }
.vw-toc a[aria-current="true"] .vw-num { color: var(--white); }
.vw-num { font: 600 11.5px/1 var(--body); letter-spacing: .08em; color: var(--blue-ink); }

.vw-chapter { padding: 72px 0; }
@media (min-width: 960px) { .vw-chapter { padding: 96px 0; } }
.vw-chapter.vw-alt { background: var(--sky-1); }
.vw-chead { max-width: 860px; margin-bottom: 36px; }
.vw-chead h2 { font-size: clamp(27px, 3.6vw, 44px); }
.vw-chead .lede { margin-top: 16px; max-width: 64ch; color: var(--ink-2); }
.vw-takeaway { margin: 34px 0 0; max-width: 860px; padding: 18px 22px; background: var(--white); border-radius: 16px; border: 1px solid rgba(3, 45, 96, .1); font-size: 16px; color: var(--navy); }
.vw-alt .vw-takeaway { background: rgba(255, 255, 255, .75); }

/* claims */
.vw-claims { display: grid; gap: 18px; }
@media (min-width: 940px) { .vw-claims { grid-template-columns: repeat(3, 1fr); } }
.vw-claim { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; }
.vw-claim-top { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-bottom: 14px; }
.vw-claim h3 { font: 500 19px/1.35 var(--display); color: var(--navy); }
.vw-record { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.vw-q { margin: 12px 0 0; font-size: 15px; color: var(--navy); }

/* details blocks */
.vw-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 4px; }
.vw-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 6px; font: 600 15px/1.35 var(--body); color: var(--blue-ink); }
.vw-more > summary::-webkit-details-marker { display: none; }
.vw-more > summary::after { content: "+"; font: 400 22px/1 var(--body); color: var(--blue-ink); flex: none; }
.vw-more[open] > summary::after { content: "\2212"; }
.vw-more > summary:hover { color: var(--navy); }
.vw-more > *:not(summary) { margin-top: 12px; }
.vw-dl { margin: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .vw-dl { grid-template-columns: 190px 1fr; gap: 10px 18px; } }
.vw-dl dt { font: 600 12px/1.35 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vw-dl dd { margin: 0; font-size: 15px; color: var(--ink-2); }

/* rules */
.vw-rules { display: grid; gap: 12px; }
.vw-rule { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 20px; padding: 20px 22px; display: grid; gap: 4px; }
@media (min-width: 800px) { .vw-rule { grid-template-columns: 1fr auto; align-items: start; gap: 6px 24px; } .vw-rule .vw-more { grid-column: 1 / -1; } }
.vw-rule h3 { font: 500 18px/1.35 var(--display); color: var(--navy); }
.vw-rule-side { justify-self: start; }
.vw-rule .small { margin: 4px 0 0; }
.vw-jump { font-size: 14px; margin: 10px 0 0; }

/* pills: semantic states used by the viewer */
.pill.s-ok { background: var(--go-bg); color: var(--go); }
.pill.s-warn { background: var(--change-bg); color: var(--change); }
.pill.s-risk { background: var(--stop-bg); color: var(--stop); }
.pill.s-none { background: #f1f1f1; color: #555; }

/* landed cost */
.vw-basis { font-size: 15px; color: var(--muted); margin: -12px 0 20px; }
.vw-scenarios { display: grid; gap: 18px; }
@media (min-width: 820px) { .vw-scenarios { grid-template-columns: 1fr 1fr; gap: 24px; } }
.vw-scenario { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 24px; padding: 26px 28px; box-shadow: 0 1px 2px rgba(32, 37, 43, .05), 0 10px 24px -14px rgba(3, 45, 96, .25); }
.vw-scenario.is-worse { background: var(--surface-dark); color: var(--white); border-color: transparent; box-shadow: var(--shadow-card); }
.vw-scenario-label { margin: 0; font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.vw-scenario.is-worse .vw-scenario-label { color: var(--teal); }
.vw-scenario-amt { margin: 12px 0 0; font: 600 clamp(32px, 4vw, 46px)/1 var(--display); letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.vw-scenario.is-worse .vw-scenario-amt { color: var(--white); }
.vw-scenario-note { margin: 8px 0 18px; font-size: 14px; color: var(--muted); }
.vw-scenario.is-worse .vw-scenario-note { color: rgba(255, 255, 255, .8); }
.vw-scenario-dl { margin: 0; display: grid; gap: 8px; }
.vw-scenario-dl > div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 8px; font-size: 15px; }
.vw-scenario.is-worse .vw-scenario-dl > div { border-color: rgba(255, 255, 255, .22); }
.vw-scenario-dl dt { color: var(--muted); }
.vw-scenario.is-worse .vw-scenario-dl dt { color: rgba(255, 255, 255, .78); }
.vw-scenario-dl dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.vw-difference { margin: 22px 0 0; display: inline-block; background: var(--change-bg); color: #7a5200; border-radius: 9999px; padding: 10px 18px; font-size: 15.5px; }
.vw-difference b { color: #7a5200; }
.vw-working { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: #f5f7fa; border-radius: 10px; padding: 10px 12px; color: var(--navy); }
.vw-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.vw-limit { margin: 22px 0 0; max-width: 860px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.vw-lede-small { max-width: 70ch; color: var(--ink-2); font-size: 17px; }

/* importer status */
.vw-activity { margin-bottom: 28px; background: var(--white); border-radius: 20px; border: 1px solid rgba(3, 45, 96, .1); }
.vw-activity table { min-width: 640px; }
.vw-finding { background: var(--white); border-radius: 24px; border: 1px solid rgba(3, 45, 96, .1); padding: 26px 28px; box-shadow: inset 5px 0 0 var(--change), var(--shadow-card); }
.vw-finding .caps { color: var(--change); }
.vw-finding h3 { font-size: clamp(22px, 2.6vw, 30px); color: var(--navy); margin-bottom: 12px; }
.vw-finding p { font-size: 16px; color: var(--ink-2); }
.vw-precision { background: var(--sky-1); border-radius: 14px; padding: 14px 16px; font-size: 15px !important; }

/* terms and tables */
.vw-terms { min-width: 660px; background: var(--white); }
.vw-terms th[scope="row"] { font-weight: 600; color: var(--navy); width: 22%; }
.vw-steps { min-width: 560px; }

/* unknowns */
.vw-grid-unknown { display: grid; gap: 16px; }
@media (min-width: 880px) { .vw-grid-unknown { grid-template-columns: 1fr 1fr; } }
.vw-unknown { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 20px; padding: 22px; }
.vw-unknown-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vw-unknown h3 { font: 500 17.5px/1.35 var(--display); color: var(--navy); }
.vw-unknown p { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.vw-why { color: var(--navy) !important; }

/* findings */
.vw-findings { background: var(--white); }
.vw-priority-inline { background: #fbfcfd; color: var(--navy); border: 1px solid #d7dfe4; border-radius: 8px; padding: 28px 30px; display: grid; gap: 24px; margin-bottom: 28px; }
@media (min-width: 900px) { .vw-priority-inline { grid-template-columns: .8fr 1.2fr; align-items: start; gap: 40px; } }
.vw-priority-inline .caps { color: var(--muted); }
.vw-priority-inline h3 { font-size: clamp(24px, 3vw, 34px); color: var(--navy); }
.vw-priority-inline .vw-priority-dl > div { border-color: #d7dfe4; }
.vw-priority-inline .vw-priority-dl dt { color: var(--muted); }
.vw-priority-inline .vw-priority-dl dd { color: var(--navy); }
.vw-grid-3 { display: grid; gap: 16px; }
@media (min-width: 900px) { .vw-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.vw-finding-card { background: var(--sky-1); border-radius: 20px; padding: 22px; border: 1px solid rgba(32, 37, 43, .06); }
.vw-finding-card h3 { font: 500 18px/1.35 var(--display); color: var(--navy); margin: 10px 0 8px; }
.vw-finding-card p { margin: 0; font-size: 15px; color: var(--ink-2); }
.vw-sub { margin: 40px 0 16px; font-size: 22px; color: var(--navy); }
.vw-cta { margin-top: 36px; background: var(--sky-1); color: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; padding: 30px; display: grid; gap: 22px; }
@media (min-width: 860px) { .vw-cta { grid-template-columns: 1.2fr auto; align-items: center; } }
.vw-cta h3 { color: var(--white); font-size: 24px; }
.vw-cta h3 { color: var(--charcoal); }
.vw-cta p { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; }
.vw-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* evidence ledger */
.vw-ledger { padding: 72px 0; background: var(--sky-1); }
@media (min-width: 960px) { .vw-ledger { padding: 96px 0; } }
.vw-ledger h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 14px; }
.vw-ledger-list { display: grid; gap: 10px; margin-top: 26px; }
.vw-ledger-item { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 16px; padding: 16px 20px; }
.vw-ledger-item > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.vw-ledger-item > summary::-webkit-details-marker { display: none; }
.vw-ledger-name { font: 600 16px/1.4 var(--body); color: var(--navy); }
.vw-ledger-item[open] > summary { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }

/* homepage preview (replaces the six-tab carousel) */
.vw-preview { display: grid; gap: 0; max-width: 1040px; margin: 44px auto 0; background: var(--white); border-radius: 28px; box-shadow: var(--shadow-card); overflow: hidden; border: 1px solid rgba(32, 37, 43, .08); }
@media (min-width: 860px) { .vw-preview { grid-template-columns: 1.35fr .65fr; } }
.vw-preview-main { padding: 30px 32px; }
.vw-preview-top { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.vw-preview-label { font: 600 11.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vw-preview-case { margin: 0 0 6px; font: 600 13px/1.4 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--blue-ink); }
.vw-preview h3 { font-size: clamp(24px, 3vw, 34px); color: var(--navy); }
.vw-preview-detail { margin: 12px 0 0; font-size: 16px; color: var(--ink-2); max-width: 52ch; }
.vw-preview-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.vw-preview-chips li { font: 500 13px/1.2 var(--body); color: var(--navy); background: var(--sky-1); border-radius: 9999px; padding: 7px 13px; }
.vw-preview-side { background: var(--surface-dark); color: var(--white); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.vw-preview-kicker { margin: 0; font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.vw-preview-side p:not(.vw-preview-kicker) { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .9); }
.vw-preview-alt { color: rgba(255, 255, 255, .9); font-size: 14.5px; }

@media (max-width: 899px) {
  .vw-hero { padding: 44px 0 40px; }
  .vw-chapter { padding: 52px 0; }
  .vw-ledger { padding: 52px 0; }
  .vw-priority-card { padding: 22px; }
}

/* hero product preview: the example card, on the blue gradient */
.vw-hero-preview { max-width: 900px; margin: 34px auto 0; text-align: left; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 24px; padding: 22px 24px; backdrop-filter: blur(10px); color: var(--white); }
.vw-hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vw-hp-label { font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.vw-hp-illus { font: 600 11.5px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--white); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); border-radius: 6px; padding: 4px 10px; }
.vw-hp-dl { display: grid; gap: 14px; margin: 18px 0 0; }
@media (min-width: 640px) { .vw-hp-dl { grid-template-columns: 1fr 1fr; gap: 24px; } }
.vw-hp-dl dt { font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.vw-hp-dl dd { margin: 5px 0 0; font: 500 17px/1.35 var(--display); color: var(--white); }
.vw-hp-finding { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .22); }
.vw-hp-finding .pill { font-size: 13.5px; padding: 5px 12px; }
.vw-hp-sub { font-size: 14.5px; color: rgba(255, 255, 255, .88); }
.vw-hp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.vw-hp-chips li { font: 500 12.5px/1.2 var(--body); color: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .32); border-radius: 9999px; padding: 6px 11px; }
.vw-hp-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 14.5px; }
.vw-hp-foot span { color: rgba(255, 255, 255, .78); }
.vw-hp-foot a { color: var(--white); font-weight: 600; text-decoration: none; }
.vw-hp-foot a:hover { color: var(--teal); }
.price .amt-sm { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.02em; }
.vw-ledger-item > summary::after { content: "+"; font: 400 20px/1 var(--body); color: var(--blue-ink); margin-left: auto; }
.vw-ledger-item[open] > summary::after { content: "\2212"; }
/* Long labels must not widen their containers on narrow screens. */
.vw-ledger-list, .vw-ledger-item, .vw-claims, .vw-claim, .vw-grid-unknown, .vw-unknown,
.vw-grid-3, .vw-finding-card, .vw-rules, .vw-rule, .vw-scenarios, .vw-scenario, .vw-meta > div { min-width: 0; }
.vw-ledger-item > summary, .vw-ledger-name, .vw-ledger-item .pill { min-width: 0; }
.vw-ledger-item .pill { white-space: normal; }
/* Phones: the hero has to leave room for the example card. */
@media (max-width: 640px) {
  .hero { padding: 38px 0 32px; }
  .hero h1 { font-size: clamp(28px, 7.4vw, 38px); }
  .hero .lede { font-size: 17px; margin-top: 14px; }
  .hero .actions { margin-top: 20px; }
  .vw-hero-preview { margin-top: 26px; padding: 18px; }
  .vw-hp-dl dd { font-size: 16px; }
  .vw-chead h2 { font-size: clamp(24px, 6.4vw, 32px); }
}

/* Viewer revision after review, 31 Oct 2026: question-led rules, evidence chain, grouped unknowns. */
.vw-consequence { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.vw-rule .vw-more { margin-top: 12px; }
.vw-applic { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; background: var(--sky-1); border-radius: 12px; padding: 10px 12px; margin: 0 0 4px; }
.vw-applic .prov { flex: none; }
.vw-applic-text { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.vw-others { margin-top: 18px; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 20px; padding: 6px 22px 18px; }
.vw-others > summary { padding: 16px 0 8px; font-size: 16px; }
.vw-rules-compact { margin-top: 10px; }
.vw-rule.is-compact { border-radius: 16px; padding: 16px 18px; }
.vw-rule.is-compact h3 { font-size: 16.5px; }

.vw-chain-wrap { margin: 30px 0 0; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 22px; padding: 22px 24px; }
.vw-chain { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.vw-chain li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.vw-chain li:first-child { border-top: 0; padding-top: 4px; }
.vw-chain-num { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--white); font: 600 13px/26px var(--body); text-align: center; }
.vw-chain b { font: 600 12px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); }
.vw-chain p { margin: 4px 0 0; font-size: 15.5px; color: var(--ink-2); }

.vw-nextq-wrap { margin-top: 26px; }
.vw-nextq-list { display: grid; gap: 10px; }
@media (min-width: 820px) { .vw-nextq-list { grid-template-columns: repeat(3, 1fr); } }
.vw-nextq { display: block; background: var(--white); border: 1px solid rgba(32, 37, 43, .10); border-radius: 16px; padding: 14px 16px; font: 500 15.5px/1.4 var(--display); color: var(--navy); text-decoration: none; }
.vw-nextq:hover { border-color: var(--blue); color: var(--blue-deep); }
.vw-nextq-note { margin: 12px 0 0; font-size: 14.5px; color: var(--muted); }

.vw-terms-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .vw-terms-grid { grid-template-columns: repeat(3, 1fr); } }
.vw-term { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-card); }
.vw-term h3 { font: 500 19px/1.35 var(--display); color: var(--navy); }
.vw-term p { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }
.vw-term-draft b, .vw-term-why b { color: var(--navy); }

.vw-unknown-groups { display: grid; gap: 26px; }
@media (min-width: 980px) { .vw-unknown-groups { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.vw-unknown-group { display: grid; gap: 12px; align-content: start; }
.vw-unknown-group > h3 { font: 600 14px/1.3 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--blue-ink); }
.vw-unknown h4 { margin: 0; font: 500 16.5px/1.35 var(--display); color: var(--navy); }

.vw-changes { display: grid; gap: 12px; }
.vw-change { background: var(--sky-1); border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; }
.vw-change-c { margin: 2px 0 0; font-size: 15.5px; color: var(--navy); }
.vw-change-e { margin: 0; font-size: 15px; color: var(--ink-2); }

.vw-hold { display: inline-block; margin: 4px 0 0; font: 600 13px/1 var(--body); letter-spacing: .14em; color: #7a5200; background: var(--change-bg); border-radius: 8px; padding: 8px 12px; }
.vw-hold-sm { margin-bottom: 10px; color: #7a5200; }
.vw-priority-inline .vw-hold { background: var(--change-bg); color: #7a5200; }
.vw-priority-status { margin: 10px 0 0 !important; font-size: 13.5px !important; color: var(--muted) !important; }
.vw-priority-inline .vw-priority-status { color: rgba(255, 255, 255, .75) !important; }
.vw-hp-title { margin: 14px 0 0; font: 500 clamp(21px, 2.4vw, 27px)/1.25 var(--display); color: var(--white); letter-spacing: -.01em; }
.vw-cta p.vw-cta-new { margin-top: 12px; font-size: 14px; color: var(--muted); }
@media (min-width: 900px) { .vw-changes { grid-template-columns: 1fr 1fr; } }
/* Hero and example card: keep the question and its status inside the first viewport. */
.hero { padding: 46px 0 40px; }
.hero h1 { font-size: clamp(32px, 4vw, 56px); }
.hero .lede { font-size: 18px; margin-top: 14px; max-width: 54ch; }
.hero .actions { margin-top: 20px; }
.vw-hero-preview { margin-top: 26px; padding: 18px 20px; }
.vw-hp-title { margin-top: 10px; font-size: clamp(20px, 2.2vw, 25px); }
.vw-hp-dl { margin-top: 14px; gap: 12px; }
.vw-hp-finding { margin-top: 14px; padding-top: 12px; }
.vw-hp-foot { margin-top: 12px; padding-top: 10px; }

/* Homepage: the six questions as doorways into the viewer. */
.vw-chapter-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .vw-chapter-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .vw-chapter-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.vw-chapter-card { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 20px; padding: 22px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(32, 37, 43, .05), 0 12px 28px -18px rgba(3, 45, 96, .3); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.vw-chapter-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(32, 37, 43, .08), 0 22px 40px -18px rgba(3, 45, 96, .35); color: inherit; }
.vw-chapter-num { font: 600 12px/1 var(--body); letter-spacing: .1em; color: var(--blue-ink); }
.vw-chapter-card h3 { font: 500 20px/1.3 var(--display); color: var(--navy); }
.vw-chapter-card p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.vw-chapter-go { margin-top: auto; padding-top: 8px; font: 600 14.5px/1.2 var(--body); color: var(--blue-ink); }
.vw-chapter-note { margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--navy); }
.vw-dl dd .pill, .vw-applic .pill { white-space: normal; }

/* ------------------------------------------------------------------ */
/* Slice B pages: /check/, /about/, rebuilt homepage (31 Oct 2026)     */
/* ------------------------------------------------------------------ */
.page-hero { background: linear-gradient(180deg, var(--sky-1), #f5f7f9); padding: 64px 0 56px; border-bottom: 1px solid rgba(32, 37, 43, .08); }
.page-hero h1 { color: var(--navy); font-size: clamp(32px, 4.2vw, 56px); max-width: 22ch; }
.page-hero .lede { margin-top: 18px; max-width: 62ch; color: var(--ink-2); }
.page-hero .actions { margin-top: 26px; }
.page-facts { display: grid; gap: 18px; margin: 38px 0 0; }
@media (min-width: 820px) { .page-facts { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.page-facts > div { border-top: 1px solid rgba(32, 37, 43, .12); padding-top: 12px; }
.page-facts dt { font: 600 11.5px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.page-facts dd { margin: 7px 0 0; font: 500 17px/1.4 var(--display); color: var(--navy); }

/* when to use the check */
.when-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .when-grid { grid-template-columns: repeat(3, 1fr); } }
.when-card { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.when-trigger { margin: 0 0 10px; font: 600 12.5px/1.4 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--change); }
.when-card h3 { font: 500 21px/1.3 var(--display); color: var(--navy); }
.when-card p { margin: 10px 0 0; font-size: 15.5px; color: var(--ink-2); }
.when-link { margin-top: auto; padding-top: 16px; font: 600 14.5px/1.2 var(--body); color: var(--blue-ink); text-decoration: none; }
.when-link:hover { color: var(--navy); }

/* method summary */
.method-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: m; }
@media (min-width: 900px) { .method-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
.method-card { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 24px; padding: 26px; box-shadow: var(--shadow-card); }
.method-num { font: 600 12px/1 var(--body); letter-spacing: .12em; color: var(--blue-ink); }
.method-label { margin: 8px 0 6px; font: 600 12.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.method-card h3 { font: 500 20px/1.3 var(--display); color: var(--navy); }
.method-card p { margin: 10px 0 0; font-size: 15.5px; color: var(--ink-2); }
.method-artifact { padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px !important; color: var(--navy) !important; }
.method-artifact b { color: var(--blue-ink); }

/* six parts */
.parts-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .parts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .parts-grid { grid-template-columns: repeat(3, 1fr); } }
.part { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 20px; padding: 22px; }
.part-num { font: 600 12px/1 var(--body); letter-spacing: .12em; color: var(--blue-ink); }
.part h3 { margin: 8px 0 6px; font: 500 18px/1.3 var(--display); color: var(--navy); }
.part p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* report extract */
.report-extract { max-width: 1040px; margin: 0 auto; background: var(--white); border: 1px solid rgba(32, 37, 43, .10); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-card); }
.re-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; background: var(--navy); color: var(--white); }
.re-label { margin: 0; font: 600 11.5px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.re-case { margin: 6px 0 0; font: 500 16px/1.4 var(--display); color: var(--white); }
.re-chip { font: 600 11px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--white); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .34); border-radius: 6px; padding: 5px 11px; white-space: nowrap; }
.re-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .re-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.re-row { padding: 22px 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* The status pill is nowrap by default; inside a phone-width column that would force the
   whole grid wider than its card and clip the right-hand side (measured 375px, 31 Oct). */
.re-tag .pill { white-space: normal; }
@media (min-width: 900px) { .re-row { border-top: 0; border-left: 1px solid var(--line); } .re-row:first-child { border-left: 0; } }
.re-k { margin: 0; font: 600 11.5px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.re-q { margin: 0; font: 500 17px/1.35 var(--display); color: var(--navy); }
.re-d { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.re-tag { margin: auto 0 0; }
.re-foot { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; padding: 16px 24px; background: var(--sky-1); font-size: 13.5px; color: var(--muted); }
.re-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; min-width: 0; }
.re-links a { white-space: nowrap; }

/* eligibility */
.elig-grid { display: grid; gap: 18px; }
@media (min-width: 960px) { .elig-grid { grid-template-columns: repeat(3, 1fr); } }
.elig-col { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 22px; padding: 24px; box-shadow: var(--shadow-card); }
.elig-col h3 { font: 500 19px/1.3 var(--display); color: var(--navy); margin-bottom: 12px; }
.elig-col .tick li, .elig-col .cross li, .limits-list li, .side-card .tick li { font-size: 15px; }
.elig-col.is-decline { box-shadow: inset 5px 0 0 var(--change), var(--shadow-card); }
.cross { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cross li { position: relative; padding-left: 26px; color: var(--ink-2); }
.cross li::before { content: "\00D7"; position: absolute; left: 4px; top: -1px; color: var(--stop); font-weight: 700; font-size: 17px; }
.elig-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* limits and not-for */
.limits-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.limits-list li { position: relative; padding-left: 26px; color: var(--ink-2); }
.limits-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 2px; background: var(--stop); }
.notfor-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .notfor-grid { grid-template-columns: 1fr 1fr; } }
.notfor-item { background: #f5f7f9; border-radius: 18px; padding: 20px 22px; }
.notfor-item h3 { font: 500 17.5px/1.3 var(--display); color: var(--navy); margin-bottom: 6px; }
.notfor-item p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* about */
.about-facts { margin: 0; display: grid; gap: 10px; font-size: 15px; }
.about-facts dt { font: 600 11.5px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.about-facts dd { margin: 0 0 6px; color: var(--navy); }
.new-band { background: linear-gradient(180deg, var(--sky-1), var(--white)); }
.new-band h2 { margin-bottom: 14px; }
.side-link { display: inline-block; margin-top: 8px; font: 600 14.5px/1.2 var(--body); }
.faq-more { margin-top: 26px; text-align: center; font-size: 15px; color: var(--navy); }

/* viewer doorways: concrete finding line under each question */
.vw-chapter-title { margin: 0; font: 600 12px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) !important; }
.vw-chapter-finding { margin: 0; font-size: 14.5px !important; color: var(--blue-ink) !important; }
.page-hero .actions { justify-content: flex-start; }
.page-hero .actions .btn { text-align: center; }
.when-trigger { margin: 8px 0 12px !important; padding-left: 12px; border-left: 3px solid var(--change); font: 500 14.5px/1.45 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink-2) !important; }

/* How the work is done: what you bring, what we check, what you hold.
   Three boxes in one belt, then a four-stop rail that carries the dates, so the picture
   stays three boxes wide while the four stages stay visible. */
.flow { margin-top: 36px; }
.flow-belt { display: grid; gap: 12px; }
.flow-belt + .stack { margin-top: 40px; }
.flow-node { background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 24px; padding: 24px; box-shadow: var(--shadow-card); }
.flow-k { margin: 0 0 8px; font: 600 12px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.flow-node h3 { margin: 0 0 14px; font-size: 22px; line-height: 1.25; color: var(--navy); }
.flow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.flow-list li { position: relative; padding-left: 18px; }
.flow-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 9999px; background: var(--blue); }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--blue); }
.flow-arrow svg { width: 26px; height: 26px; transform: rotate(90deg); }
.flow-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.flow-chips span { padding: 6px 13px; border: 1px solid rgba(29, 78, 216, .28); border-radius: 9999px; background: #f5f7f9; color: var(--navy); font: 600 13.5px/1.25 var(--body); }
.flow-note { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.flow-node--out { background: linear-gradient(155deg, #20252b, #15181c); border-color: transparent; }
.flow-node--out .flow-k { color: var(--teal); }
.flow-node--out h3 { color: var(--white); }
.flow-node--out .flow-list { color: rgba(255, 255, 255, .92); }
.flow-node--out .flow-list li::before { background: var(--teal); }
.flow-foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); color: var(--white); font: 600 12.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; }

.flow-rail { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; }
.flow-rail li { position: relative; padding-top: 18px; border-top: 2px solid rgba(32, 37, 43, .12); }
.flow-rail li::before { content: ""; position: absolute; top: -7px; left: 0; width: 11px; height: 11px; border-radius: 9999px; background: var(--blue); }
.flow-rail-n { font: 600 12px/1 var(--body); letter-spacing: .1em; color: var(--blue-ink); }
.flow-rail-t { margin: 6px 0 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.flow-rail-t b { font: 600 17px/1.3 var(--display); color: var(--navy); }
.flow-rail-t span { font: 600 12.5px/1.3 var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.flow-rail-o { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

.flow-terms { margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(32, 37, 43, .12); display: grid; gap: 18px; }
.flow-terms b { display: block; margin-bottom: 4px; font: 600 15.5px/1.35 var(--body); color: var(--navy); }
.flow-terms span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.flow-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.flow-link { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; border-bottom: 2px solid currentColor; font: 500 16px/1.2 var(--body); color: var(--navy); text-decoration: none; }
.flow-link:hover { color: var(--blue-ink); }

@media (min-width: 640px) and (max-width: 899px) { .flow-rail { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .flow-belt { grid-template-columns: 1fr 46px 1.25fr 46px 1fr; align-items: stretch; }
  .flow-arrow svg { transform: none; }
  .flow-rail { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .flow-rail li { padding-right: 22px; }
  .flow-terms { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

/* ------------------------------------------------------------------ */
/* Insights: hub, articles and the editorial standard (31 Oct 2026)    */
/* ------------------------------------------------------------------ */
.ins-group { margin-bottom: 56px; }
.ins-group-head { max-width: 760px; margin-bottom: 22px; }
.ins-group-head h2 { font-size: clamp(24px, 2.8vw, 34px); }
.ins-group-head p { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; }
.ins-grid { display: grid; gap: 18px; }
@media (min-width: 860px) { .ins-grid { grid-template-columns: 1fr 1fr; } }
.ins-card { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 22px; padding: 26px; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.ins-card:hover { transform: translateY(-4px); color: inherit; }
.ins-kind { font: 600 11.5px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.ins-card h3 { font: 500 22px/1.3 var(--display); color: var(--navy); }
.ins-card p { margin: 0; font-size: 15.5px; color: var(--ink-2); }
.ins-meta { margin-top: auto; padding-top: 14px; font: 500 13.5px/1.3 var(--body); color: var(--muted); }
.ins-go { font: 600 14.5px/1.2 var(--body); color: var(--blue-ink); }
.ins-standard { background: var(--sky-1); border-radius: 22px; padding: 26px 28px; max-width: 1000px; }
.ins-standard .caps { margin-bottom: 12px; }
.ins-standard ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15.5px; color: var(--ink-2); }

.art-head { background: linear-gradient(180deg, var(--sky-1), #f5f7f9); padding: 56px 0 40px; border-bottom: 1px solid rgba(32, 37, 43, .08); }
.art-head h1 { font-size: clamp(30px, 3.8vw, 46px); color: var(--navy); }
.art-meta { display: grid; gap: 14px; margin: 26px 0 0; }
@media (min-width: 760px) { .art-meta { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.art-meta > div { border-top: 1px solid rgba(32, 37, 43, .12); padding-top: 10px; }
.art-meta dt { font: 600 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.art-meta dd { margin: 6px 0 0; font-size: 15px; color: var(--navy); }
.art-body { padding: 48px 24px 72px; }
.art-body h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 40px 0 12px; }
.art-body p { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.art-drop { font-size: 19px !important; color: var(--navy) !important; line-height: 1.6 !important; }
.art-list { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 10px; font-size: 16px; color: var(--ink-2); }
.art-list b { color: var(--navy); }
.art-numbered { padding-left: 26px; }
.art-numbered li { padding-left: 4px; }
.art-table { overflow-x: auto; margin: 18px 0; }
.art-table table { min-width: 620px; background: var(--white); border: 1px solid rgba(32, 37, 43, .10); border-radius: 16px; }
.art-table th { font: 600 11.5px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--sky-1); }
.art-table td, .art-table th { padding: 12px 14px; vertical-align: top; font-size: 14.5px; }
.art-table td:first-child { font-weight: 600; color: var(--navy); }
.art-callout { margin: 26px 0; padding: 20px 22px; background: var(--sky-1); border-left: 4px solid var(--blue); border-radius: 0 16px 16px 0; }
.art-callout p { margin: 0; font-size: 16px; color: var(--navy); }
.art-steps { margin: 0 0 10px; padding-left: 22px; display: grid; gap: 10px; font-size: 16px; color: var(--ink-2); }
.art-steps b { color: var(--navy); }
.art-scope { display: grid; gap: 20px; margin: 48px 0 0; padding: 26px; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 22px; box-shadow: var(--shadow-card); }
@media (min-width: 760px) { .art-scope { grid-template-columns: 1fr 1fr; gap: 34px; } }
.art-scope h2 { font-size: 19px !important; margin: 0 0 12px !important; }
.art-scope .tick, .art-scope .cross { font-size: 15px; }
.art-foot { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.art-checked { font-size: 14px !important; color: var(--muted) !important; }
.art-rel { margin-top: 18px; }
.art-rel ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; font-size: 15.5px; }

.flow-intro { max-width: 760px; margin: 0 auto 26px; font: 600 17px/1.5 var(--body); color: var(--navy); text-align: center; }
.flow-node { display: flex; flex-direction: column; }
.flow-note, .flow-foot { margin-top: auto; }
.flow-note { padding-top: 14px; border-top: 1px solid var(--line); }
.flow-node--check .flow-chips { margin-bottom: 16px; }
.flow-arrow svg { width: 30px; height: 30px; }
.art-head .lede { margin-top: 18px; }
@media (max-width: 759px) {
  .art-table::before { content: "Scroll the table →"; display: block; font: 600 11.5px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
}

.flow-node--out .flow-list { margin-bottom: 16px; }
.insights-band { border-top: 1px solid rgba(32, 37, 43, .08); }
.ins-mini-grid { display: grid; gap: 14px; }
@media (min-width: 860px) { .ins-mini-grid { grid-template-columns: repeat(3, 1fr); } }
.ins-mini { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 20px; padding: 22px; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); }
.ins-mini:hover { color: inherit; transform: translateY(-3px); }
.ins-mini h3 { font: 500 18px/1.35 var(--display); color: var(--navy); }
.ins-more { margin: 22px 0 0; text-align: center; font: 600 15px/1.4 var(--body); }
.vw-related { margin: 16px 0 0; font-size: 15.5px; color: var(--navy); }
.vw-related b { color: var(--blue-ink); }
.site-footer h2.fcol { margin: 0 0 10px; font: 600 13px/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.vw-hp-title { margin: 10px 0 0; }

/* The four barriers: the reader's own questions, in the order they get expensive. */
.flow-barriers { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; counter-reset: b; }
.flow-barriers li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.flow-barriers li::before { counter-increment: b; content: "0" counter(b); position: absolute; left: 0; top: 1px; font: 600 11px/1.6 var(--body); letter-spacing: .08em; color: var(--blue-ink); }
.flow-barriers b { display: block; font: 600 15px/1.3 var(--body); color: var(--navy); }

.flow-foot--light { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--blue-ink); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 14px; }
/* /check/ facts: four items, including what the buyer receives. */
@media (min-width: 980px) { .page-facts { grid-template-columns: repeat(4, 1fr); gap: 26px; } }
/* Homepage: the independence argument collapsed to one sentence. */
.method-independent { max-width: 900px; margin: 34px auto 0; padding: 18px 22px; background: var(--white); border: 1px solid rgba(3, 45, 96, .1); border-radius: 16px; font-size: 16px; color: var(--ink-2); box-shadow: var(--shadow-card); }
.method-independent b { color: var(--navy); }

/* ------------------------------------------------------------------ */
/* Conversion pass, 31 October 2026.                                   */
/* Split hero with the illustrative HOLD decision, the claim-to-        */
/* decision chain, and the plain statement on specialist review.       */
/* ------------------------------------------------------------------ */

/* Hero: copy left, product right. The decision is visible without scrolling. */
.hero.hero-split { text-align: left; padding: 52px 0 56px; }
.hero-grid { display: grid; gap: 36px; align-items: start; }
.hero-split .hero-copy { min-width: 0; }
.hero-split h1 { margin: 0; max-width: 20ch; font-size: clamp(34px, 4.3vw, 56px); line-height: 1.07; }
.hero-split h1 .hl { display: block; }
html[lang="ko"] .hero-split h1 { max-width: 17ch; font-size: clamp(30px, 4vw, 52px); line-height: 1.22; }
.hero-split .lede { margin: 18px 0 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 19px); }
.hero-split .hero-facts { margin: 28px 0 0; max-width: 100%; }
@media (min-width: 620px) { .hero-split .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.hero-split .hero-facts dd { font-size: 17px; }
.hero-split .actions { justify-content: flex-start; margin-top: 28px; }
.hero-decision { min-width: 0; }
/* Phones: keep the price, the offer and the call to action above the product panel. */
@media (max-width: 619px) {
  .hero-split .hero-facts { margin-top: 22px; gap: 0; }
  .hero-split .hero-facts > div { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; }
  .hero-split .hero-facts dt { flex: none; width: 108px; }
  .hero-split .hero-facts dd { margin: 0; font-size: 15.5px; }
  .hero-split .actions { margin-top: 22px; }
  .hero-split .actions .btn { padding-left: 22px; padding-right: 22px; }
  .hero-split .lede { font-size: 17px; }
}
@media (min-width: 1000px) {
  .hero.hero-split { padding: 60px 0 68px; }
  .hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 44px; align-items: center; }
}

/* Light case workspace. App bar, case context, decision, aligned evidence ledger, next
   action. Caveats sit outside the frame in .dp-fine. */
.dp-shell { min-width: 0; }
.dp { background: var(--white); color: var(--navy); border: 1px solid #d7dfe4; border-radius: 10px; max-width: 620px; overflow: hidden; box-shadow: 0 28px 56px -34px rgba(32, 37, 43, .35); }
.dp-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; background: #f5f7f9; border-bottom: 1px solid #d7dfe4; }
.dp-brand { font: 600 10.5px/1.3 var(--body); letter-spacing: .11em; text-transform: uppercase; color: var(--navy); }
.dp-sep { color: #7a8794; padding: 0 3px; }
.dp-ref { flex: 1 1 220px; min-width: 0; font: 500 11.5px/1.4 var(--body); color: var(--muted); }
.dp-nav { display: flex; flex-wrap: wrap; gap: 3px 14px; padding: 7px 14px; border-bottom: 1px solid #e7ecf2; background: var(--white); }
.dp-nav a { font: 600 10.5px/1.35 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--blue-ink); text-decoration: none; }
.dp-nav a:hover { color: var(--navy); text-decoration: underline; }
.dp-main { padding: 14px 16px 13px; }
.dp-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; }
.dp-kicker { margin: 0; font: 600 10px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dp-case { margin: 4px 0 0; font: 600 15.5px/1.35 var(--body); color: var(--navy); }
.dp-product { margin: 3px 0 0; font: 400 12px/1.45 var(--body); color: var(--muted); }
.dp-state { text-align: right; border-left: 1px solid #e1e7ee; padding-left: 14px; }
.dp-state-k { display: block; font: 600 9.5px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dp-verdict { display: inline-block; margin: 5px 0 0; font: 700 15px/1 var(--body); letter-spacing: .16em; color: #7a5200; background: #faf0d8; border: 1px solid #e2cf9e; border-radius: 4px; padding: 7px 11px; }
.dp-decision { margin: 13px 0 0; font: 600 clamp(18px, 1.6vw, 22px)/1.3 var(--body); color: var(--navy); letter-spacing: -.01em; }
.dp-reason { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.dp-line-task { background: #f7f9fa; }
.dp-line-task .dp-k { color: var(--blue-ink); }
.dp-ledger { margin-top: 13px; border: 1px solid #d7dfe4; border-radius: 6px; overflow: hidden; }
.dp-ledger-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 6px 12px; background: #f5f7f9; border-bottom: 1px solid #d7dfe4; font: 600 9.5px/1.35 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dp-line { display: grid; grid-template-columns: 116px minmax(0, 1fr) 14px; gap: 4px 12px; align-items: baseline; padding: 8px 12px; border-top: 1px solid #e7ecf2; text-decoration: none; color: var(--navy); }
.dp-line:first-of-type { border-top: 0; }
.dp-line:hover { background: #f7f9fa; }
.dp-k { font: 600 10px/1.45 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.dp-v { font: 500 13px/1.45 var(--body); color: var(--navy); }
.dp-go { font: 600 13px/1 var(--body); color: var(--blue-ink); text-align: right; }
.dp-foot { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid #e1e7ee; }
.dp-foot a { font: 600 12.5px/1.3 var(--body); color: var(--blue-ink); text-decoration: none; }
.dp-foot a:hover { color: var(--navy); text-decoration: underline; }
.dp-foot a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.dp-fine { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.dp-fine b { color: var(--ink-2); }
.hero-decision .dp { max-width: none; }
.hero-decision .dp-fine { color: rgba(255, 255, 255, .86); }
.hero-decision .dp-fine b { color: var(--white); }
@media (max-width: 560px) {
  .dp { border-radius: 8px; }
  .dp-context { grid-template-columns: 1fr; }
  .dp-state { text-align: left; border-left: 0; padding-left: 0; border-top: 1px solid #e1e7ee; padding-top: 8px; }
  .dp-verdict { margin-top: 3px; }
}
@media (max-width: 420px) {
  .dp-line { grid-template-columns: minmax(0, 1fr) 14px; }
  .dp-k, .dp-v { grid-column: 1; }
  .dp-go { grid-column: 2; grid-row: 1 / span 2; }
}

/* Worked-example chain: Claim to Decision as a light record, five aligned steps. */
.ec { background: var(--white); border: 1px solid #d7dfe4; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 44px -30px rgba(32, 37, 43, .28); }
.ec-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 10px 16px; background: #f5f7f9; border-bottom: 1px solid #d7dfe4; }
.ec-brand { font: 600 10.5px/1.3 var(--body); letter-spacing: .11em; text-transform: uppercase; color: var(--navy); }
.ec-ref { font: 500 11.5px/1.4 var(--body); color: var(--muted); }
.ec-case { padding: 12px 16px 13px; border-bottom: 1px solid #e7ecf2; }
.ec-case-t { margin: 0; font: 600 14.5px/1.4 var(--body); color: var(--navy); }
.ec-case-o { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ec-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.ec-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; padding: 11px 16px; border-top: 1px solid #e7ecf2; }
.ec-step:first-child { border-top: 0; }
.ec-n { grid-row: span 2; font: 600 11px/1.5 var(--body); letter-spacing: .08em; color: var(--blue-ink); }
.ec-step b { font: 600 10px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
.ec-step p { grid-column: 2; margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ec-step.is-decision { background: #fdf6e7; }
.ec-step.is-decision b, .ec-step.is-decision .ec-n { color: #7a5200; }
.ec-step.is-decision p { color: var(--navy); font-weight: 500; }
@media (min-width: 1080px) {
  .ec-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ec-step { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px; border-top: 0; border-left: 1px solid #e7ecf2; }
  .ec-step:first-child { border-left: 0; }
  .ec-step p { grid-column: 1; }
  .ec-n { grid-row: auto; }
}
.ec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #d7dfe4; background: #fbfcfd; }
.ec-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ec-alt { font: 600 13.5px/1.3 var(--body); }
.ec-fine { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.ec-fine b { color: var(--ink-2); }
@media (max-width: 620px) { .ec { border-radius: 8px; } }

/* The decision path: compact aligned segments, not pills. */
.decision-path { list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; margin: 18px 0 0; padding: 0; border: 1px solid #d7dfe4; border-radius: 6px; overflow: hidden; }
.decision-path li { font: 600 10px/1.35 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--navy); background: var(--white); padding: 8px 12px; border-left: 1px solid #e7ecf2; }
.decision-path li:first-child { border-left: 0; }
.decision-path li.is-decision { margin-left: auto; background: #faf0d8; color: #7a5200; border-left: 1px solid #e2cf9e; }
.vw-hold-lg { font: 700 15px/1 var(--body); letter-spacing: .16em; padding: 8px 12px; border-radius: 4px; border: 1px solid #e2cf9e; }
.vw-priority-card .vw-priority-reason { margin: 12px 0 0; font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--navy); }
.vw-priority-inline .vw-priority-reason { margin: 10px 0 0 !important; font-size: 15.5px !important; line-height: 1.5 !important; color: var(--navy) !important; }

/* Specialist review: stated where the buyer meets it, not buried on /about/. */
.reviewer-status { max-width: 900px; margin: 32px auto 0; background: var(--sky-1); border: 1px solid rgba(3, 45, 96, .1); border-radius: 18px; padding: 20px 24px; }
.reviewer-status .rs-k { margin: 0 0 8px; font: 600 11.5px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.reviewer-status p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* Homepage short guides, folded into the questions section. */
.mini-insights { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--line); }
.mini-insights .ins-mini-grid { margin-top: 18px; }

/* Contrast settings retained for contact bands outside the homepage closing flow. */
.hero { background: linear-gradient(180deg, var(--sky-1), var(--white) 78%); }
.contact-band { background:
    radial-gradient(92% 70% at 50% 104%, rgba(172, 48, 186, .55), rgba(172, 48, 186, 0) 64%),
    linear-gradient(158deg, #041430 0%, #0a2f8f 52%, #3f1a8c 100%); }
.hero-split .hero-facts dt { color: var(--white); }
.btn-glass { background: var(--white); color: var(--charcoal); border-color: var(--charcoal); }
.btn-glass:hover { background: var(--sky-1); color: var(--charcoal); }
.hero-on-dark .btn-glass, .contact-band .btn-glass { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45); }
/* The default blue focus ring is invisible on the blue and purple bands; use white there. */
.hero :focus-visible, .contact-band :focus-visible, .vw-hero :focus-visible { outline-color: var(--white); }

/* Light workspace pass for the report extract and the viewer priority finding: fine borders,
   aligned ledger rows, compact labels. All extract text and caveats are unchanged. */
.re-shell { max-width: 1040px; margin: 0 auto; }
.report-extract { background: var(--white); border: 1px solid #d7dfe4; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 44px -32px rgba(1, 14, 38, .4); }
.re-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 18px; background: #f5f7f9; border-bottom: 1px solid #d7dfe4; color: var(--navy); }
.re-label { margin: 0; font: 600 10px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.re-case { margin: 3px 0 0; font: 600 14.5px/1.4 var(--body); color: var(--navy); }
.re-row { padding: 14px 18px; gap: 6px; border-top-color: #e7ecf2; }
.re-k { font: 600 9.5px/1.35 var(--body); letter-spacing: .12em; }
.re-q { font: 600 15px/1.35 var(--body); }
.re-d { font-size: 12.5px; line-height: 1.55; }
.re-foot { justify-content: flex-end; padding: 11px 18px; background: #fbfcfd; border-top: 1px solid #d7dfe4; font-size: 12.5px; }
.re-links a { font-size: 12.5px; }
.re-fine { max-width: 1040px; margin: 8px auto 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.re-fine b { color: var(--ink-2); }

.vw-priority-card { margin-top: 28px; background: #fbfcfd; border: 1px solid #d7dfe4; border-radius: 8px; padding: 20px 22px; box-shadow: none; }
.vw-priority-card .caps { color: var(--change); }
.vw-priority-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin: -20px -22px 16px; padding: 9px 16px; background: #f5f7f9; border-bottom: 1px solid #d7dfe4; border-radius: 8px 8px 0 0; }
.vw-priority-bar .caps { margin: 0; }
.vw-priority-ref { font: 500 11.5px/1.4 var(--body); color: var(--muted); }
.vw-priority-card h2 { font-size: clamp(24px, 2.6vw, 32px); }
.vw-priority-card p { margin: 8px 0 0; color: var(--ink-2); font-size: 14.5px; }
.vw-priority-card .vw-hold { color: #7a5200; }
.vw-priority-card .vw-hold + h2,
.vw-priority-inline .vw-hold + h3 { margin-top: 16px; }
.vw-priority-dl { margin: 0; display: grid; gap: 0; border: 1px solid #d7dfe4; border-radius: 6px; overflow: hidden; }
.vw-priority-dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 2px 12px; border-top: 1px solid #e7ecf2; padding: 9px 12px; }
.vw-priority-dl > div:first-child { border-top: 0; }
.vw-priority-dl dt { font: 600 10px/1.45 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.vw-priority-dl dd { margin: 0; font-size: 13px; line-height: 1.45; color: var(--navy); font-weight: 500; }
.vw-priority-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .vw-priority-dl > div { grid-template-columns: 1fr; }
  .vw-priority-bar { margin: -20px -22px 14px; }
}

/* Restrained hover feedback on the current homepage cards. Movement is one or two pixels and
   stops under reduced motion; the card content and links are unchanged. */
@media (hover: hover) {
  .when-card, .price, .flow-node { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
  .when-card:hover, .price:hover, .flow-node:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(32, 37, 43, .08), 0 22px 44px -14px rgba(32, 37, 43, .14); }
  .when-link, .vw-chapter-go { transition: transform .2s var(--ease); }
  .when-card:hover .when-link, .vw-chapter-card:hover .vw-chapter-go { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .when-card, .price, .flow-node, .when-link, .vw-chapter-go { transition: none; }
  .when-card:hover, .price:hover, .flow-node:hover { transform: none; }
  .when-card:hover .when-link, .vw-chapter-card:hover .vw-chapter-go { transform: none; }
}


/* ---------- Home hero: Salesforce-fidelity composition (v2.2, 3 Nov 2026) ----------
   SUPERSEDES the v2.1 hero *composition* only. Palette, logo, copy claims and disclosures are
   unchanged. The v2.1 rules produced a process diagram: four equal cards between the headline
   and the CTAs, a 76px cap and a flat gradient ground. The corrected first screen is one
   dominant headline, one short proposition, two pill CTAs, a slim facts strip, and a large
   dimensional Decision File stage that runs past the lower edge of a 1440x900 viewport.
   The four decision questions moved to .steps-band, below the stage. */
.hero-cinema {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 64px 0 64px; text-align: center; color: var(--white); border-bottom: 0;
  background: #022ac0;
}
.hero-cinema .sparkle { display: none; }
.hero-cinema .hero-lead { max-width: 1088px; }
.hero-cinema .hero-lead > .caps { display: none; }
.hero-cinema h1 {
  margin: 0 auto; max-width: 1024px;
  font-size: clamp(2.5rem, 8vw, 4.25rem); font-weight: 400;
  line-height: 1.05; letter-spacing: -0.03em; color: var(--white);
  text-wrap: normal;
}
.hero-cinema h1 .hl { display: block; color: var(--teal); }
@media (min-width: 900px) {
  .hero-cinema h1 { font-size: clamp(3.6rem, 5.6vw, 5rem); line-height: 1.1; letter-spacing: -0.025em; }
}
/* CJK scripts set denser than Latin, so the display size steps down and the leading opens up.
   Without this a 14-character Japanese headline breaks mid-word at 88px. */
html[lang="ko"] .hero-cinema h1, html[lang="ja"] .hero-cinema h1, html[lang="zh-Hans"] .hero-cinema h1 {
  font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.16; letter-spacing: -0.01em;
}
@media (min-width: 900px) {
  html[lang="ko"] .hero-cinema h1 { font-size: clamp(2.6rem, 4.4vw, 3.75rem); line-height: 1.2; letter-spacing: -0.02em; }
  html[lang="ja"] .hero-cinema h1, html[lang="zh-Hans"] .hero-cinema h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1.18; }
}
.hero-cinema .lede { margin: 32px auto 0; max-width: 850px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: #e8f1ff; }
.hero-cinema .actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.hero-cinema .actions .btn { min-height: 56px; padding: 16px 32px; font-size: 16.5px; display: inline-flex; align-items: center; gap: 10px; }
/* Reference-matched action hierarchy: the primary reads high-contrast white, the secondary is
   an outlined translucent pill. Both keep pill geometry and the 56px target size. */
.hero-cinema .actions .btn-blue { background: var(--white); color: #032d60; border-color: var(--white); box-shadow: none; }
.hero-cinema .actions .btn-blue:hover { background: #eef5ff; color: var(--navy); box-shadow: 0 18px 40px -14px rgba(1, 8, 32, .62); }
.hero-cinema .actions .btn-white { background: rgba(255, 255, 255, .15); color: var(--white); border-color: rgba(255, 255, 255, .15); backdrop-filter: blur(8px); }
.hero-cinema .actions .btn-white:hover { background: rgba(255, 255, 255, .26); color: var(--white); border-color: rgba(255, 255, 255, .7); box-shadow: 0 14px 32px -14px rgba(1, 8, 32, .5); }
/* Slim facts strip: price, deliverable and scope, one hairline row, no card weight. */
.hero-cinema .hero-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 34px;
  margin: 36px auto 0; max-width: 920px; padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .24);
}
.hero-cinema .hero-strip > div { display: flex; align-items: baseline; gap: 10px; padding: 0; border: 0; }
.hero-cinema .hero-strip dt { font: 600 10.5px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(232, 241, 255, .74); }
.hero-cinema .hero-strip dd { margin: 0; font: 600 13.5px/1.35 var(--body); color: var(--white); }
/* The layered product stage. */
.hero-stage-wrap { margin-top: 76px; }
.hero-stage {
  position: relative; max-width: 1180px; margin: 0 auto; overflow: hidden;
  border-radius: 34px; text-align: left; color: var(--ink);
  background: linear-gradient(158deg, #f8fbff 0%, #e8f1ff 48%, #dbe9ff 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 44px 90px -34px rgba(1, 8, 32, .72);
}
.hero-stage::before {
  content: ""; position: absolute; inset: auto -10% -34% 38%; height: 62%; border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(32, 185, 255, .26), transparent); filter: blur(28px); pointer-events: none;
}
.stage-bar { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: rgba(255, 255, 255, .74); border-bottom: 1px solid #d3e3fa; }
.stage-dots { flex: none; width: 9px; height: 9px; margin-right: 26px; border-radius: 50%; background: #ffd9a8; box-shadow: 14px 0 0 #c3d6f2, 28px 0 0 #c3d6f2; }
.stage-case { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1.4 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--navy); }
.stage-case span { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.chip-hold { margin-left: auto; padding: 6px 13px; border-radius: 9999px; background: #ffedd4; color: #8d510a; font: 600 11.5px/1 var(--body); letter-spacing: .09em; }
.stage-body { position: relative; display: grid; gap: 26px; padding: 26px 20px 24px; }
@media (min-width: 900px) {
  .stage-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 0; padding: 42px 44px 30px; }
}
.stage-doc {
  position: relative; z-index: 2; background: var(--white); border-radius: 22px; padding: 24px 22px 26px;
  box-shadow: 0 26px 60px -24px rgba(4, 20, 60, .45), 0 2px 6px rgba(4, 20, 60, .06);
}
@media (min-width: 900px) { .stage-doc { transform: rotate(-0.6deg); padding: 28px 30px 30px; } }
.stage-doc .caps { color: var(--blue); }
.stage-rows { margin: 14px 0 0; display: grid; }
.stage-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line); }
.stage-rows dt { font-size: 14.5px; color: var(--ink-2); }
.stage-rows dd { margin: 0; font: 700 17px/1.3 var(--display); color: var(--navy); text-align: right; }
.stage-rows .is-flag { margin: 0 -12px; padding-left: 12px; padding-right: 12px; background: #fff8ec; border-radius: 10px; }
.stage-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 16px; font-weight: 600; color: var(--blue); text-decoration: none; }
.stage-link:hover { text-decoration: underline; }
/* No z-index or transform here: either would create a stacking context and trap the image's
   multiply blend against its own transparent backdrop. Painting order alone puts the doc on top. */
.stage-art { margin: 0; }
/* The product illustration is a white-background render. Multiply drops the white into the
   stage's pale gradient, so the valve stands on the surface instead of inside a second card. */
.stage-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
@media (min-width: 900px) { .stage-art { max-width: 430px; justify-self: end; margin-left: -70px; } }
.stage-note { position: relative; margin: 0; padding: 0 20px 22px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
@media (min-width: 900px) { .stage-note { padding: 0 46px 26px; } }
/* The four decision questions, now a full section of richer cards below the stage. */
.steps-band { padding: 88px 0 96px; background: linear-gradient(180deg, var(--white) 0%, #eaf5ff 100%); }
.steps-head { display: grid; gap: 26px; }
@media (min-width: 960px) { .steps-head { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 64px; align-items: end; } }
.steps-head .caps { color: var(--blue); }
.steps-head h2 { margin-top: 12px; max-width: 20ch; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -0.028em; color: var(--navy); }
.steps-copy p { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--ink-2); }
.steps-note { margin: 34px 0 0; max-width: 78ch; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.steps { display: grid; gap: 18px; margin: 48px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.steps li { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 26px 24px 28px; box-shadow: var(--shadow-card); }
.steps .n { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9999px; background: var(--sky-1); color: var(--blue-deep); font: 700 12.5px/1 var(--body); letter-spacing: .04em; }
.steps b { display: block; margin: 16px 0 8px; font: 700 19px/1.25 var(--display); letter-spacing: -0.012em; color: var(--navy); }
.steps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (hover: hover) {
  .steps li { transition: transform .3s ease, box-shadow .3s ease; }
  .steps li:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(3, 45, 96, .08), 0 26px 50px -16px rgba(3, 45, 96, .22); }
}
@media (prefers-reduced-motion: reduce) {
  .steps li { transition: none; }
  .steps li:hover { transform: none; }
}
.film-band { padding: 56px 0 76px; background: linear-gradient(115deg, #eaf5ff 0%, #f3f0ff 75%, #fff5fc 100%); }
.film-band .sec-head { text-align: center; max-width: 820px; margin: 0 auto 28px; }
.film-band .sec-head .lede { margin: 16px auto 0; max-width: 60ch; }
.film-band .hero-demo-head { color: var(--navy); }
.film-band .hero-provenance { margin: 18px auto 0; text-align: center; }
.film-band .hero-demo { max-width: 1152px; }
.hero-cinema .hero-demo-head { margin: 64px auto 20px; max-width: 860px; font-size: clamp(19px, 2vw, 25px); line-height: 1.35; font-weight: 600; color: var(--charcoal); letter-spacing: -0.01em; }
.hero-demo { position: relative; max-width: 1152px; margin: 0 auto; padding: 12px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.demo-screen { border-radius: 10px; overflow: hidden; background: var(--surface-dark); box-shadow: inset 0 0 0 1px rgba(32, 37, 43, .10); }
.hero-film { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--surface-dark); }
.demo-controls { display: none; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 2px 6px 12px; }
.demo-play { width: 44px; height: 44px; border-radius: 9999px; border: 0; background: var(--surface-dark); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.demo-play:hover { background: #101417; }
/* Play/pause glyph rebuilt after the hero restyle: bars when playing, triangle when paused. */
.demo-play-icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.hero-demo.is-paused .demo-play-icon { border: 0; width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.demo-chapters button { min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); font: 500 13.5px/1 var(--body); color: var(--charcoal); cursor: pointer; }
.demo-chapters button:hover, .demo-chapters button.is-current { background: var(--sky-1); color: var(--charcoal); border-color: var(--charcoal); }
.demo-progress i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .15s linear; }
.demo-restart { border: 0; background: transparent; color: var(--blue); font: 600 13px/1 var(--body); cursor: pointer; padding: 8px; }
.demo-restart:hover { color: var(--blue-deep); }
.demo-link { margin-left: auto; font: 600 14px/1 var(--body); color: var(--charcoal); text-decoration: none; }
.demo-link:hover { color: var(--blue); text-decoration: underline; }
.hero-provenance { max-width: 1152px; margin: 16px auto 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.hero-film-text { max-width: 900px; margin: 14px auto 0; color: var(--muted); font-size: 13.5px; text-align: left; }
.hero-film-text summary { cursor: pointer; color: var(--charcoal); font-weight: 600; text-align: center; }
.hero-film-text p { margin: 10px 0 0; line-height: 1.6; }
.hero-cinema + #method { padding-top: 64px; }
.hero-arch { position: relative; height: 80px; margin-top: 52px; }
.hero-arch svg { display: block; width: 100%; height: 80px; }
@media (max-width: 899px) {
  .hero-cinema .lede { max-width: 640px; }
  .hero-stage .stage-body { grid-template-columns: minmax(0, 1fr); }
}
/* Tablet: the three facts wrap to two rows inside a centred flex row, leaving the third item
   stranded. Below 900px they become three left-aligned rows instead. */
@media (min-width: 720px) and (max-width: 899px) {
  .hero-cinema .hero-strip { display: grid; gap: 6px; max-width: 100%; }
  .hero-cinema .hero-strip > div { justify-content: space-between; }
}
@media (max-width: 719px) {
  /* Phone composition is set separately: the eyebrow is dropped (the header already carries the
     brand line), the headline keeps a 40-54px display size, and the stage reaches the fold. */
  .hero-cinema { padding: 24px 0 56px; }
  .hero-cinema .caps { display: none; }
  .hero-cinema h1 { margin-top: 6px; line-height: 1.03; }
  .hero-cinema .lede { margin-top: 14px; font-size: 16px; line-height: 1.5; }
  .hero-cinema .actions { gap: 10px; margin-top: 18px; }
  .hero-cinema .actions .btn { width: 100%; min-height: 52px; padding: 14px 22px; font-size: 16px; }
  .hero-cinema .hero-strip { display: grid; gap: 8px; margin-top: 20px; padding-top: 12px; max-width: 100%; }
  .hero-cinema .hero-strip > div { justify-content: space-between; padding: 2px 0; }
  .hero-cinema .hero-strip dt { font-size: 10px; }
  .hero-cinema .hero-strip dd { font-size: 12.5px; }
  .hero-stage-wrap { margin-top: 34px; }
  .hero-stage { border-radius: 26px; }
  .stage-bar { padding: 12px 14px; gap: 10px; }
  .stage-case { flex-wrap: wrap; gap: 6px; font-size: 11px; }
  .stage-body { padding: 18px 14px; gap: 18px; }
  .stage-doc { padding: 20px 18px 22px; }
  .stage-rows dd { font-size: 15.5px; }
  .stage-note { padding: 0 14px 18px; font-size: 12px; }
  .steps-band { padding: 64px 0 72px; }
  .steps-head h2 { font-size: clamp(28px, 6.4vw, 38px); }
  .steps-copy p { font-size: 16.5px; }
  .steps { margin-top: 32px; gap: 14px; }
  .steps li { padding: 22px 20px 24px; }
  .hero-demo { border-radius: 22px; padding: 8px; }
  .demo-controls { gap: 8px; }
  .demo-chapters { order: 3; width: 100%; }
  .demo-link { margin-left: 0; }
  .hero-provenance { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema .rise { animation: none !important; opacity: 1 !important; transform: none !important; }
}

.hero-demo.is-enhanced .demo-controls { display: flex; }
.hero-demo .demo-chapters { order: -1; margin-right: auto; }
.hero-demo .demo-progress { position: absolute; bottom: 12px; left: 12px; width: calc(100% - 24px); min-width: 0; height: 3px; }
.hero-demo .demo-time { display: none; }
.hero-demo .demo-restart { width: 40px; height: 40px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); font-size: 22px; padding: 0; }
.hero-demo .demo-link { margin-left: 0; background: var(--surface-dark); color: #fff; padding: 12px 20px; border-radius: 8px; }
.hero-demo .demo-chapters button.is-current { background: var(--sky-1); color: var(--charcoal); border-color: var(--charcoal); box-shadow: none; }
.hero-cinema + #method .scard .shead h3 { font-size: 30px; line-height: 1.25; }
.case-report { margin-top: 28px; }
.contact-band .case-report { margin-top: 34px; padding: 32px; background: var(--white); border-radius: 12px; text-align: left; }
.contact-band .case-report summary { color: var(--charcoal); font-size: 17px; }
.contact-band .case-report .caps { color: var(--blue-ink); }
.contact-band .case-report .lede { color: var(--ink-2); }
.contact-band .case-report h2, .contact-band .case-report h2 .blue, .contact-band .case-report h3 { color: var(--charcoal); }
.contact-band .case-report details { border-bottom: 1px solid var(--line); color: var(--ink-2); }
.contact-band .case-report details > summary { color: var(--charcoal); font: 500 16.5px/1.45 var(--body); padding: 16px 0; cursor: pointer; }
.contact-band .case-report .ans { color: var(--ink-2); font-size: 15.5px; padding: 0 0 16px; max-width: 78ch; }
.contact-band .case-report .plus { flex: none; width: 24px; height: 24px; position: relative; display: inline-block; margin-left: auto; }
.contact-band .case-report a:not(.btn) { color: var(--blue); }
.contact-band .case-report .dp { background: var(--white); }
@media (max-width: 719px) { .contact-band .case-report { padding: 22px 18px; margin-top: 26px; } }
.case-report summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.case-report .dp-shell { margin-top: 20px; }
.case-report .dp { max-width: none; }
@media (max-width: 719px) {
  .hero-demo .demo-chapters { flex-wrap: nowrap; overflow-x: auto; width: 100%; flex-basis: 100%; }
  .hero-demo .demo-chapters button { flex-shrink: 0; }
  .hero-cinema + #method .scard .shead h3 { font-size: 26px; line-height: 1.18; }
}

/* ------------------------------------------------------------------ */
/* Homepage presentation pass: illustrated flagship, staged entry,     */
/* decorative depth and an asymmetric mini-insight bento.              */
/* ------------------------------------------------------------------ */

/* 1. Flagship check: one wide illustrated panel, two smaller cards. */
.cards3.feature-grid { grid-template-columns: minmax(0, 1fr); }
.feature-grid .feature-lead { position: relative; overflow: hidden; display: grid; gap: 30px; padding: 32px; min-height: 300px; background: var(--surface-dark); border-color: var(--charcoal); }
.feature-grid .feature-lead::before { display: none; }
.feature-grid .feature-lead::after { display: none; }
.feature-lead-copy, .feature-art { position: relative; z-index: 1; }
.feature-grid .feature-lead h3 { color: var(--white); font-size: clamp(27px, 3vw, 38px); margin-bottom: 12px; }
.feature-grid .feature-lead p { color: rgba(255, 255, 255, .88); font-size: 17px; line-height: 1.62; }
.feature-art { justify-self: center; width: min(100%, 380px); }
.feature-art svg { width: 100%; height: auto; overflow: visible; }
.feature-art .art-depth, .feature-small-art .art-depth { transform-box: fill-box; transform-origin: center; will-change: transform; }
.feature-grid .feature-small { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 16px; }
.feature-small-art { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 10px; background: var(--white); border: 1px solid var(--line); }
.feature-small-art svg { width: 64px; height: 64px; }
@media (min-width: 860px) {
  .cards3.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid .feature-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.04fr) minmax(270px, .96fr); align-items: center; padding: 46px 48px; min-height: 340px; }
  .feature-grid .feature-small { grid-template-columns: 92px minmax(0, 1fr); gap: 20px; padding: 28px; }
}
@media (max-width: 520px) {
  .feature-grid .feature-lead { padding: 28px 24px; }
  .feature-grid .feature-small { grid-template-columns: minmax(0, 1fr); }
}

/* 2. What you receive: the report extract and its cost bars enter once. */
.js .re-shell.reveal { transform: none; }
.js .re-shell .report-extract { transform: translateY(40px) scale(.96); transition: transform .7s cubic-bezier(.32,.72,0,1); }
.js .re-shell.in .report-extract { transform: none; }
.js .re-shell .ws-track > span { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.32,.72,0,1) .15s; }
.js .re-shell.in .ws-track > span { transform: scaleX(1); }
.js .re-shell .ws-cost-row.is-rejected .ws-track > span { transition-delay: .3s; }

/* 4. Hero chapters: one sequenced arrival, scoped to the film controls. */
.js .hero-demo .demo-chapters button { opacity: 0; transform: translateX(-20px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.js .hero-demo.chapters-in .demo-chapters button { opacity: 1; transform: none; }
.js .hero-demo.chapters-in .demo-chapters button:nth-child(2) { transition-delay: .07s; }
.js .hero-demo.chapters-in .demo-chapters button:nth-child(3) { transition-delay: .14s; }
.js .hero-demo.chapters-in .demo-chapters button:nth-child(4) { transition-delay: .21s; }

/* 5. Short guides: asymmetric bento with original decorative accents. */
.mini-insights .ins-mini { position: relative; overflow: hidden; isolation: isolate; }
.mini-insights .ins-mini > * { position: relative; z-index: 1; }
.mini-insights .ins-mini::before { display: none; }
.mini-insights .ins-mini:nth-child(1) { background: var(--surface-dark); color: var(--white); border-color: var(--charcoal); }
.mini-insights .ins-mini:nth-child(1) h3 { color: var(--white); }
.mini-insights .ins-mini:nth-child(1) .ins-kind { color: var(--teal); }
.mini-insights .ins-mini:nth-child(1) .ins-meta { color: rgba(255, 255, 255, .78); }
.mini-insights .ins-mini:nth-child(1)::before { display: none; }
.mini-insights .ins-mini:nth-child(2)::before { display: none; }
.mini-insights .ins-mini:nth-child(3) { border-top: 2px solid var(--charcoal); }
@media (min-width: 860px) {
  .mini-insights .ins-mini-grid { grid-template-columns: 1.45fr .85fr; gap: 16px; }
  .mini-insights .ins-mini:nth-child(1) { grid-row: span 2; padding: 32px; }
  .mini-insights .ins-mini:nth-child(1)::after {
    content: ""; position: absolute; right: 40px; bottom: 70px; width: 150px; height: 168px; z-index: 0;
    border-radius: 12px; transform: rotate(-8deg); pointer-events: none;
    background: linear-gradient(#20252b, #20252b) 24px 28px / 74px 8px no-repeat,
      repeating-linear-gradient(transparent 0 12px, #d7e9ff 12px 17px) 24px 50px / 102px 64px no-repeat,
      linear-gradient(#1d4ed8, #1d4ed8) 24px 132px / 48px 10px no-repeat, #fff;
    box-shadow: -14px 12px 0 rgba(255,255,255,.16), 0 20px 40px rgba(0,0,0,.18);
  }
  .mini-insights .ins-mini:nth-child(2) { padding: 24px; }
  .mini-insights .ins-mini:nth-child(3) { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .re-shell .report-extract,
  .js .re-shell .ws-track > span,
  .js #example .ec-steps .ec-step,
  .js #example .ec-steps::before,
  .js .hero-demo .demo-chapters button { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .feature-art .art-depth, .js .feature-small-art .art-depth { transform: none !important; }
}

/* Compact scope strip in the logo-strip position: text and small original document icons. */
.scope-strip { background: var(--white); border-top: 1px solid rgba(32, 37, 43, .08); border-bottom: 1px solid rgba(32, 37, 43, .08); padding: 20px 0; }
.scope-strip .wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 36px; }
.scope-label { margin: 0; font: 600 11.5px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scope-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; }
.scope-list li { display: flex; align-items: center; gap: 9px; font: 500 14.5px/1.35 var(--body); color: var(--navy); }
.scope-list svg { width: 18px; height: 18px; flex: none; color: var(--blue-ink); }

/* The three expanding panels. The wrapper is the stable measured bound; only the inner navy
   panel is clipped and translated, and every value comes from site.js. */
.expand-scene { position: relative; background: var(--sky-1); scroll-margin-top: 84px; }
.expand-scene + .expand-scene { padding-top: 28px; }
.expand-band { position: relative; color: var(--white); padding: 96px 0;
  background: linear-gradient(.19deg, #001e5b .17%, #022ac0 82.83%, #066afe 110.46%, #00b3ff 150.63%, #90d0fe 179.53%, #eaf5fe 207.43%); }
.js .expand-band, .js [data-surface-panel] { clip-path: inset(var(--panel-inset-y, 0px) var(--panel-inset-x, 0px) round var(--panel-radius, 32px)); transform: translateY(var(--panel-y, 0px)); }
.expand-band:focus-within, [data-surface-panel]:focus-within { clip-path: none; }
.expand-inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.expand-head { display: grid; gap: 16px 56px; }
.expand-kicker { margin: 0; font: 600 13px/1.4 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--teal); }
.expand-h { color: var(--white); font-size: clamp(32px, 6.4vw, 42px); line-height: 1.18; letter-spacing: -.025em; }
.expand-h span { display: block; color: var(--sky-2); }
.expand-lede { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.expand-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) {
  .expand-oneup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
  .expand-oneup .expand-media, .expand-oneup .expand-flow-wrap, .expand-oneup .expand-diagram-wrap { margin: 0; }
  .expand-h { font-size: 42px; line-height: 52px; }
  .expand-oneup .expand-flow, .expand-oneup .expand-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .expand-oneup .expand-flow li + li, .expand-oneup .expand-diagram li + li { margin-left: 0; }
  .expand-oneup .expand-flow li + li::before, .expand-oneup .expand-diagram li + li::before { display: none; }
}

/* Report film and its transcript. */
.expand-media { margin: 48px 0 0; }
.expand-media video { display: block; width: 100%; height: auto; border-radius: 22px; background: #001431; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .65); }
.expand-media figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.expand-label { margin: 0; font: 600 11.5px/1.4 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--teal); }
.expand-film-text, .expand-extract { margin-top: 22px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; background: rgba(255, 255, 255, .07); }
.expand-film-text summary, .expand-extract summary { cursor: pointer; padding: 16px 20px; font: 600 15px/1.45 var(--body); color: var(--white); }
.expand-film-text p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.expand-extract[open] { background: transparent; border-color: transparent; padding: 0; }
.expand-paper { padding: 6px 0 0; }
.expand-band .re-fine, .expand-band .ec-fine { color: rgba(255, 255, 255, .78); }
.expand-band .re-fine b, .expand-band .ec-fine b { color: var(--white); }

.expand-sub { margin: 44px 0 16px; font: 600 12px/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.expand-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.expand-chips li { padding: 9px 18px; border-radius: 9999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); font: 500 14.5px/1.25 var(--body); color: var(--white); }

/* Three feature columns, five principles, connected links and the responsibilities diagram. */
.expand-features { display: grid; gap: 30px; margin-top: 36px; }
.expand-feature { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 22px; }
.expand-feature h3 { margin: 0 0 10px; color: var(--white); font-size: 22px; }
.expand-feature p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.6; }
.expand-ico { width: 34px; height: 34px; margin-bottom: 12px; color: var(--teal); }
@media (min-width: 860px) { .expand-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

.expand-standard { margin: 52px 0 0; padding: 34px 38px; border-radius: 26px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.expand-statement { margin: 12px 0 0; max-width: 30ch; font: 600 clamp(24px, 2.6vw, 32px)/1.28 var(--display); letter-spacing: -.015em; color: var(--white); }
.expand-support { margin: 14px 0 0; max-width: 60ch; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .84); }
.expand-standard.is-hold .expand-label { color: #ffd08a; }

.expand-foot { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.expand-foot .btn { flex: 0 1 auto; max-width: 100%; text-align: center; }
.expand-note { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.expand-note a { color: var(--white); }
.expand-coverage { margin: 28px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

.expand-flow-wrap { margin-top: 44px; }
.expand-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; }
.expand-flag { margin: 0; padding: 6px 12px; border-radius: 9999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); font: 600 11.5px/1.35 var(--body); letter-spacing: .05em; text-transform: uppercase; color: var(--white); }
.expand-flow { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.expand-flow li { position: relative; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.expand-flow b { display: block; margin-bottom: 6px; font-size: 17px; color: var(--white); }
.expand-flow p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.expand-flow .flow-n { display: block; margin-bottom: 8px; font: 600 11px/1.3 var(--body); letter-spacing: .1em; color: var(--teal); }
.expand-flow-wrap > .expand-note { margin-top: 14px; }
@media (min-width: 820px) {
  .expand-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .expand-flow li + li { margin-left: 20px; }
  .expand-flow li + li::before { content: "\2192"; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: 17px; }
}

.expand-links { list-style: none; margin: 0; padding: 0; display: grid; }
.expand-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; border-bottom: 1px solid rgba(255, 255, 255, .24); color: var(--white); text-decoration: none; font: 500 17px/1.35 var(--body); }
.expand-links a:hover { color: var(--teal); }
@media (min-width: 760px) { .expand-links { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

.expand-diagram-wrap { margin-top: 44px; }
.expand-diagram { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.expand-diagram li { position: relative; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24); }
.expand-diagram .expand-ico { margin-bottom: 8px; }
.expand-diagram b { display: block; margin-bottom: 6px; font-size: 17px; color: var(--white); }
.expand-diagram p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
@media (min-width: 900px) {
  .expand-diagram { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .expand-diagram li + li { margin-left: 20px; }
  .expand-diagram li + li::before { content: "\2192"; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); color: var(--teal); font-size: 17px; }
}

.expand-principles { display: grid; gap: 26px; margin-top: 42px; }
.expand-principle { border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 18px; }
.expand-principle h3 { margin: 0 0 8px; color: var(--white); font-size: 19px; }
.expand-principle p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.expand-principle a { font: 500 14.5px/1.35 var(--body); color: var(--teal); }
@media (min-width: 700px) and (max-width: 1099px) { .expand-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .expand-principles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; } }

.expand-commit { margin: 46px 0 0; max-width: 26ch; font: 600 clamp(24px, 2.8vw, 34px)/1.26 var(--display); letter-spacing: -.015em; color: var(--white); }
.expand-band .reviewer-status { margin-top: 32px; padding: 26px 30px; border-radius: 20px; background: var(--white); color: var(--ink-2); }
.expand-band .reviewer-status p { margin: 0; }
.expand-band .reviewer-status .rs-k { color: var(--blue); }

/* Reused white-card markup inside a navy panel: deliberately neutralise the old card shadow
   and hover lift rather than inheriting the white-page treatment. */
.expand-band .card.rich { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); box-shadow: none; color: var(--white); }
.expand-band .card.rich p { color: rgba(255, 255, 255, .86); }
/* Lists and cards that inherit the light-page ink must invert on the charcoal band. */
.expand-band .tick, .expand-band ul.tick li, .expand-band .mk-note, .expand-band .monitoring-state-layout { color: rgba(255, 255, 255, .9); }
.expand-band .tick li::before, .expand-band ul.tick li::before { background-color: rgba(255, 255, 255, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.expand-band .monitoring-state, .expand-band .flow-node { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .92); }
.expand-band .monitoring-state h3, .expand-band .monitoring-state h4, .expand-band .flow-node b { color: var(--white); }

@media (max-width: 759px) {
  .expand-band { padding: 64px 0; }
  .expand-inner { padding: 0 20px; }
  .expand-standard { padding: 26px 22px; }
  .expand-standard, .expand-flow-wrap, .expand-diagram-wrap, .expand-features { margin-top: 30px; }
  .expand-foot { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .expand-band, .js [data-surface-panel] { clip-path: none !important; transform: none !important; }
}

/* Educational film strip: native horizontal scroll with two substantive cards. Controls are
   hidden until site.js runs; the track itself stays scrollable by hand without JavaScript. */
.film-section { padding: 96px 0; }
.film-strip { position: relative; margin-top: 8px; }
.film-track { display: flex; gap: 24px; overflow-x: auto; padding: 4px 0 18px; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.film-card { flex: 0 0 min(680px, 88vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--white); border: 1px solid rgba(32, 37, 43, .08); border-radius: 28px; box-shadow: var(--shadow-card); scroll-margin-top: 96px; }
.film-k { margin: 0; font: 600 11.5px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); }
.film-card h3 { margin: 0; color: var(--navy); font-size: clamp(21px, 2.2vw, 25px); }
.film-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.film-card video { display: block; width: 100%; height: auto; margin-top: 4px; border-radius: 18px; background: #001431; }
.film-text { margin-top: 8px; border-top: 1px solid rgba(32, 37, 43, .10); }
.film-text summary { cursor: pointer; padding: 12px 0 4px; font: 500 14.5px/1.4 var(--body); color: var(--blue-ink); }
.film-text p { padding: 4px 0 6px; font-size: 14.5px; }
.film-strip-controls { display: none; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.js .film-strip-controls, .film-strip.is-ready .film-strip-controls { display: flex; }
.film-btn { width: 48px; height: 48px; border-radius: 9999px; border: 1px solid rgba(3, 45, 96, .22); background: var(--white); color: var(--navy); font-size: 19px; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.film-btn:hover { background: var(--navy); color: var(--white); }
.film-btn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 759px) {
  .film-section { padding: 64px 0; }
  .film-card { padding: 18px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .film-track { scroll-behavior: auto; } }

/* Wide service-terms panel in the analyst-recognition position: price, eligible scope,
   delivery, named review and written proposal, with two concise eligibility columns. */
.terms-band { padding: 96px 0; }
.terms-panel { display: grid; gap: 36px; padding: 40px 28px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); scroll-margin-top: 96px; }
@media (min-width: 1000px) { .terms-panel { grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 56px; } }
.terms-lead h2 { color: var(--navy); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; }
.terms-lead h2 span { display: block; color: var(--blue-deep); }
.terms-amt { margin: 18px 0 8px; font: 600 clamp(48px, 5.4vw, 64px)/1 var(--display); letter-spacing: -.03em; color: var(--navy); }
.terms-price-note { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.terms-facts { display: grid; gap: 14px; margin: 26px 0 0; }
.terms-facts div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(32, 37, 43, .10); }
.terms-facts dt { font: 600 11.5px/1.35 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); }
.terms-facts dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.terms-elig { display: grid; gap: 24px; align-content: start; }
@media (min-width: 620px) { .terms-elig { grid-template-columns: 1fr 1fr; } }
.terms-col h3 { margin: 0 0 10px; color: var(--navy); font-size: 20px; }
.terms-col ul { margin-top: 0; }
@media (max-width: 759px) { .terms-band { padding: 64px 0; } }

/* Learning library: Guides / Articles / Watch. Without JavaScript every panel is visible;
   site.js hides the inactive ones only after it has wired the tab semantics. */
.lib { max-width: 1152px; margin: 0 auto; }
.lib .sec-head { margin-bottom: 34px; }
.lib-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 32px; }
.lib-tablist button { font: 500 16px/1.2 var(--body); padding: 12px 24px; border-radius: 9999px; border: 1px solid rgba(32, 37, 43, .12); background: var(--white); color: var(--navy); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.lib-tablist button:hover { border-color: var(--navy); }
.lib-tablist button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.lib-panels { margin-top: 4px; }
.lib-grid { display: grid; gap: 18px; }
@media (min-width: 860px) {
  .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lib-card.is-feature { grid-column: span 2; }
}
.lib-card { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 24px; background: var(--white); border: 1px solid rgba(32, 37, 43, .08); box-shadow: var(--shadow-card); text-decoration: none; color: inherit; }
.lib-card:hover { color: inherit; }
.lib-card h3 { margin: 0; color: var(--navy); font-size: 21px; line-height: 1.3; }
.lib-card p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.lib-card .lib-kind { font: 600 11.5px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); }
.lib-card .lib-meta { margin-top: auto; padding-top: 8px; font: 600 12.5px/1.4 var(--body); color: var(--muted); }
.lib-card.is-feature { background: var(--surface-dark); border-color: var(--charcoal); }
.lib-card.is-feature h3, .lib-card.is-feature p, .lib-card.is-feature .lib-meta { color: var(--white); }
.lib-card.is-feature .lib-kind { color: var(--teal); }
.lib-poster { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: 16px; overflow: hidden; background: #001431; }
.lib-poster img { width: 100%; height: 100%; object-fit: cover; }
.lib-dur { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 9999px; background: rgba(0, 12, 32, .8); font: 600 11.5px/1.3 var(--body); color: var(--white); }
@media (max-width: 759px) {
  .lib-card { padding: 20px; }
  .lib-tablist button { padding: 10px 18px; font-size: 15px; }
}

/* Contact details on the navy band stay readable. */
.contact .fine, .contact-fields { color: rgba(255, 255, 255, .84); }
.contact-fields { margin: 16px 0 8px; font: 500 14.5px/1.5 var(--body); }

/* The learning shelf follows the reference's large-left, two-right resource composition. */
@media (min-width: 860px) {
  #lib-panel-guides .lib-grid { grid-template-columns: 1.4fr 1fr; }
  #lib-panel-guides .lib-card.is-feature { grid-column: 1; grid-row: span 2; position: relative; overflow: hidden; isolation: isolate; }
  #lib-panel-guides .lib-card.is-feature > * { position: relative; z-index: 1; }
  #lib-panel-guides .lib-card.is-feature::after { content: ""; position: absolute; right: 30px; bottom: 58px; width: 140px; height: 156px; z-index: 0; border-radius: 12px; transform: rotate(-8deg); pointer-events: none; background: linear-gradient(#20252b, #20252b) 20px 25px / 72px 8px no-repeat, repeating-linear-gradient(transparent 0 12px, #d7e9ff 12px 17px) 20px 46px / 100px 58px no-repeat, linear-gradient(#1d4ed8, #1d4ed8) 20px 122px / 48px 9px no-repeat, #fff; box-shadow: -14px 12px 0 #ffffff29, 0 20px 40px #0000002e; }
  #lib-panel-articles .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#example .expand-band { z-index: 3; }
#dimensions .expand-band { z-index: 2; }
#fit .expand-band { z-index: 1; }
.expand-dome { position: absolute; left: 0; bottom: -1px; width: 100%; height: 80px; pointer-events: none; }
.film-section { background: var(--sky-1); }

/* Approved evidence-to-commitment copy in the reference's content slots. */
.expand-h .blue { color: var(--sky-2); }
.expand-feature ul { margin: 0; padding-left: 20px; }
.expand-feature li { margin-bottom: 20px; font-size: 17px; line-height: 1.6; }
.expand-standard .side-h { color: var(--teal); }
.expand-inner > .fine { color: #ffffffd9; }
.expand-oneup .expand-visual .ec { margin: 0; }
.expand-oneup .expand-visual .ec-steps { grid-template-columns: 1fr; }
.expand-oneup .expand-visual .ec-step { border-right: 0; border-bottom: 1px solid #e7ecf2; }
.expand-band .case-report summary { color: var(--white); }
.evidence-principles { list-style: none; padding: 0; display: grid; gap: 22px; }
.evidence-principles li { border-top: 1px solid #ffffff45; padding-top: 18px; font-size: 16px; line-height: 1.6; }
.evidence-principles strong { display: block; margin-bottom: 8px; color: var(--teal); }
.monitoring-versions .card.rich, .monitoring-state-layout .side-card { background: #ffffff12; border: 1px solid #ffffff45; color: var(--white); box-shadow: none; }
.monitoring-versions .card.rich h3, .monitoring-state-layout h3 { color: var(--white); }
.monitoring-versions .card.rich p, .monitoring-versions .card.rich li { color: #ffffffe6; }
.monitoring-versions .card.rich .fine { color: #ffffffc7; text-align: left; margin: 0; }
.monitoring-versions .tick li::before { color: var(--sky-2); }
.monitoring-state-layout { display: grid; gap: 28px; }
.monitoring-state-layout h3 { font-size: 23px; margin-bottom: 20px; }
.monitoring-state-layout .tick { display: grid; gap: 18px; list-style: none; padding: 0; }
.monitoring-state-layout .tick li { padding: 18px; margin: 0; border-top: 2px solid var(--sky-2); background: #ffffff0d; font-size: 15px; line-height: 1.6; }
.monitoring-state-layout .tick li::before { content: none; }
.monitoring-state-layout .tick strong { display: block; margin-bottom: 8px; color: var(--white); }
.monitoring-state-layout .side-card { border-color: #ffd08a; padding: 22px; }
.monitoring-state-layout .side-h { color: #ffd08a; }
@media (min-width: 900px) {
  .evidence-principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .monitoring-state-layout { grid-template-columns: minmax(0, 4fr) minmax(210px, 1.2fr); align-items: start; }
  .monitoring-state-layout .tick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 960px) { .monitoring-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Existing card and button system, with labelled fields for the discussion request. */
.deal-enquiry { margin-top: 32px; color: var(--navy); background: var(--white); }
.deal-enquiry label { display: grid; gap: 8px; font-weight: 600; }
.deal-enquiry input { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--navy); font: inherit; }
.deal-enquiry input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.deal-enquiry .two-col { margin: 24px 0; }
.deal-enquiry [hidden] { display: none; }
.deal-enquiry-option { margin-top: 32px; }
.deal-enquiry-option > summary { color: inherit; cursor: pointer; font-weight: 600; }
#inside .side-card { margin-top: 32px; }
#reconsider { margin-top: 32px; color: var(--navy); }

/* Hero-to-demo flow follows the reference; detailed evidence follows below. */
.hero-film-section { margin-top: 80px; }
.hero-film-section .sec-head { margin: 0 auto 32px; }
.hero-film-section .sec-head .caps { display: none; }
body[data-page="home"] .hero-cinema .hero-film-section h2 { color: var(--white); font-size: clamp(26px, 3vw, 34px); font-weight: 500; line-height: 1.25; }
.hero-film-section .hero-demo { padding: 16px; border-radius: 30px; background: linear-gradient(115deg, #ffffff99, #ffffffdd); border: 2px solid #ffffff66; box-shadow: 0 18px 48px #001e5b33; }
.hero-film-section .demo-controls { padding: 0 0 16px; }
.hero-film-section .demo-chapters { display: flex; gap: 8px; }
.hero-film-section .demo-chapters button { min-height: 48px; padding: 0 22px; border-radius: 9999px; background: #ffffffa6; border-color: transparent; color: #032d60; }
.hero-film-section .demo-chapters button.is-current { background: white; border-color: var(--teal); box-shadow: 0 4px 16px #022ac026; }
.hero-film-section .demo-restart, .hero-film-section .demo-link { border-radius: 9999px; }
.hero-film-section .hero-provenance, .hero-film-section .hero-film-text { color: #ffffffd9; }
.hero-film-section .hero-film-text summary { color: var(--white); }
.hero-film-section .lede { font-size: 15px; margin-top: 24px; }
.decision-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.decision-facts dt { color: var(--muted); font-size: 12px; }
.decision-facts dd { margin: 6px 0 0; color: var(--navy); font-size: 16px; }
@media (max-width: 719px) {
  .hero-cinema { padding-top: 48px; }
  .hero-film-section { margin-top: 56px; }
  .hero-film-section .hero-demo { padding: 8px; border-radius: 20px; }
  .hero-film-section .demo-chapters button { padding: 0 14px; min-height: 44px; }
  .hero-film-section .demo-link { padding: 12px 14px; font-size: 12px; }
  .decision-facts { display: grid; justify-content: start; gap: 20px; }
}

/* Buyer guidance uses the established Salesforce hero and expanding-container system. */
.hero-cinema .hero-lead > .caps { display: block; margin: 0 0 20px; color: #ffffffd9; }
.hero-offer { margin: 24px auto 0; max-width: 850px; font-size: 14px; line-height: 1.6; color: #ffffffed; }
.hero-offer a { color: inherit; text-underline-offset: 3px; }
.expand-feature a { display: inline-block; margin-top: 12px; color: var(--white); text-underline-offset: 4px; }
#fit .evidence-principles { margin-top: 48px; }
@media (min-width: 900px) { #fit .evidence-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .hero-cinema .hero-lead > .caps { font-size: 11px; margin-bottom: 16px; }
  .hero-offer { font-size: 13px; }
}

/* Salesforce full-page flow, measured 3 Nov 2026: the resource cards and closing
   invitation share one vertical blue-to-lilac ground. The FAQ starts after the white
   curve, rather than being hidden in a white box inside the contact section. */
.closing-flow { background: linear-gradient(180deg, #022ac0 0%, #d17dfe 100%); }
.closing-flow .insights-band { background: transparent; border: 0; padding-top: 96px; }
.closing-flow .insights-band .sec-head h2,
.closing-flow .insights-band .sec-head .blue,
.closing-flow .insights-band .caps { color: var(--white); }
.closing-flow .ins-card { border: 0; border-radius: 24px; padding: 32px; }
.closing-flow .ins-more a { color: var(--white); }
.closing-flow .contact-band { background: transparent; color: var(--navy-2); }
.closing-flow .contact-band .sec-head h2 { color: var(--white); font-weight: 400; }
.closing-flow .contact-band .sec-head .caps { color: var(--white); }
.closing-flow .contact-band .contact { color: var(--navy-2); background: var(--white); padding: 32px; border-radius: 28px; }
.closing-flow .contact .lede, .closing-flow .contact .fine,
.closing-flow .contact .intro-line, .closing-flow .contact dt { color: var(--ink-2); }
.closing-flow .contact-band a:not(.btn) { color: var(--navy-2); }
.closing-flow .contact-band .copy-btn { color: var(--navy-2); border-color: var(--line); background: var(--sky-1); }
.closing-flow .contact-band .btn-white { color: var(--white); background: var(--blue-ink); border-color: var(--blue-ink); }
.closing-flow .contact-band .btn-glass { color: var(--navy-2); background: var(--sky-1); border-color: var(--line); }
.closing-flow .contact-band :focus-visible { outline-color: var(--navy-2); }
.closing-flow .contact-band .sparkle { color: #ffd83e; }
.closing-flow .contact-band .sparkle.s2 { color: #ff73bd; }
.closing-flow .dome { height: clamp(64px, 7.8vw, 140px); margin-top: 64px; }
.home-faq { background: var(--white); padding: 64px 0 96px; }
body[data-page="home"] .home-faq .sec-head h2 { color: var(--navy-2); font-size: clamp(32px, 3vw, 42px); line-height: 1.2; }
.home-faq .sec-head .blue { color: inherit; }
.home-faq .faq { max-width: 960px; }
.home-faq details { border-bottom-color: #0000004d; }
.home-faq summary { color: var(--navy-2); padding: 24px 0; }
.home-faq .plus { border-radius: 50%; background: #eaf5fe; }
@media (max-width: 767px) {
  .closing-flow .insights-band { padding-top: 64px; }
  .closing-flow .ins-card { padding: 24px; }
  .home-faq { padding: 48px 0 64px; }
}

/* One sky ground keeps supporting content and all three expanding panels connected. */
.evidence-flow { background: linear-gradient(180deg, #eaf5fe 0%, #90d0fe 50%, #eaf5fe 100%); }
.evidence-flow #inside, .evidence-flow .expand-scene, .evidence-flow #who { background: transparent; }

.closing-flow .lib .sec-head h2, .closing-flow .lib .sec-head .blue,
.closing-flow .lib .sec-head .lede, .closing-flow .lib .caps { color: var(--white); }
.lib-watch video { width: 100%; height: auto; border-radius: 16px; margin-top: auto; background: #001e5b; }
.lib-watch { scroll-margin-top: 112px; }

/* ==========================================================================
   Salesforce AP reference fidelity, 3 Nov 2026 (owner-directed).
   One coherent block: every reference homepage component mapped to Tradezur
   content. Measured gradients, radii and pill controls from the live page.
   Existing blue/teal tokens, brand SVG and disclosures are reused.
   ========================================================================== */

.fid-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 1. header: tools and account position, compact mobile reference row */
.site-header .head-account { display: none; width: 40px; height: 40px; border-radius: 9999px; border: 1px solid var(--line); color: var(--navy); align-items: center; justify-content: center; flex: none; }
.site-header .head-cta { background: #4b8455; border-color: #4b8455; color: white; }
.site-header .head-cta:hover { background: #32643b; border-color: #32643b; }
.site-header .head-account:hover { background: var(--sky-1); color: var(--blue-deep); }
@media (min-width: 720px) { .site-header .head-account { display: inline-flex; } }
@media (max-width: 759px) {
  .site-header > .wrap { min-height: 56px; padding: 8px 12px; gap: 6px; flex-wrap: nowrap; }
  .site-header .menu-btn { order: 0; flex: 0 0 28px; width: 28px; height: 32px; border: 0; border-radius: 0; padding: 0; }
  .site-header .brand { order: 1; margin-right: auto; }
  .brand-logo { width: 124px; height: auto; min-width: 0; }
  .site-header .language-menu { order: 2; }
  .site-header .language-menu summary { width: 24px; height: 30px; padding: 0; font-size: 0; display: grid; place-items: center; background: none; }
  .site-header .language-menu summary::before { content: "🌐"; font-size: 18px; line-height: 1; }
  .site-header .language-menu summary::marker { content: ""; }
  .site-header .language-menu summary::-webkit-details-marker { display: none; }
  .site-header .head-cta { display: inline-flex; order: 4; min-height: 30px; padding: 7px 12px; font-size: 12px; flex: none; max-width: calc(100vw - 248px); overflow: hidden; text-overflow: ellipsis; display: block; }
  .site-header .head-account { display: inline-flex; order: 3; width: 24px; height: 30px; border: 0; }
  .site-header .lang { order: 4; width: auto; }
}

/* 2. hero: centred royal blue, 80/88 desktop and 40/42 mobile, cyan last line */
.fid-hero.hero-cinema {
  background:
    linear-gradient(180deg, #022ac0 5%, #066afe 100%);
  color: var(--white);
  text-align: center;
  padding: 92px 0 64px;
  border-bottom: 0;
}
.fid-hero .hero-lead { max-width: 1080px; margin: 0 auto; }
.fid-hero h1 { color: var(--white); font-size: 80px; line-height: 88px; letter-spacing: -0.03em; max-width: 1000px; margin: 0 auto; }
.fid-hero h1 .hl { display: block; color: #04e1cb; }
.fid-hero .hero-lead > .caps { display: none; }
.fid-hero h1 { font-weight: 500; }
.fid-hero .lede { color: #e8f1ff; max-width: 760px; font-size: 20px; line-height: 1.55; margin: 26px auto 0; }
.fid-hero .caps { color: rgba(232, 241, 255, .82); }
.fid-hero .hip { color: #e8f1ff; }
.fid-hero .hero-offer { color: rgba(232, 241, 255, .82); margin: 26px auto 0; max-width: 900px; font-size: 14.5px; }
.fid-hero .hero-offer a { color: #cfe3ff; }
.fid-hero .actions { justify-content: center; }
@media (max-width: 767px) {
  .fid-hero.hero-cinema { padding: 44px 0 48px; }
  .fid-hero h1 { font-size: 40px; line-height: 42px; letter-spacing: -0.02em; }
  .fid-hero .lede { font-size: 17px; margin-top: 18px; }
  .fid-hero .actions .btn { width: 100%; }
}

/* 3. demonstration glass frame with product tabs, prev/next, pause and drawer */
.fid-glass { position: relative; border-radius: 28px; padding: 14px; background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 40px 90px -40px rgba(1, 8, 32, .75); backdrop-filter: blur(14px); }
.fid-demo-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 6px 12px; }
.fid-demo-bar .demo-chapters { display: flex; flex-wrap: wrap; gap: 6px; }
.fid-demo-bar .demo-chapters button { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: var(--white); border-radius: 9999px; padding: 9px 16px; font: 600 13.5px/1 var(--body); cursor: pointer; }
.fid-demo-bar .demo-chapters button.is-current { background: var(--white); color: #032d60; border-color: var(--white); }
.fid-demo-nav { display: flex; gap: 6px; margin-left: auto; }
.fid-demo-nav button { width: 38px; height: 38px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: var(--white); display: grid; place-items: center; cursor: pointer; }
.fid-glass .hero-demo { margin: 0; box-shadow: 0 30px 70px -30px rgba(1, 8, 32, .85); }

/* 4. relationship strip: real AIR APAC / Exeter Labs relationships only */
.fid-logos { background: #066afe; color: white; padding: 40px 0 calc(clamp(40px, 6vw, 100px) + 24px); }
.fid-logos .fid-eyebrow { color: white; }
.fid-logos .fid-rel { background: #ffffff18; border-color: #ffffff55; color: white; }
.fid-eyebrow { font: 600 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0 0 16px; }
.fid-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fid-marquee-track { display: flex; gap: 18px; width: max-content; animation: fid-marquee 85s linear infinite; }
.fid-marquee.is-paused .fid-marquee-track { animation-play-state: paused; }
.fid-rel { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 9999px; background: #f7fafc; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; max-width: 560px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fid-rel .fid-mark { height: 22px; width: auto; }
.fid-marquee.is-paused .fid-marquee-track { animation-play-state: paused; }
.fid-marquee-pause { margin: 14px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9999px; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; font: 600 12.5px/1 var(--body); }
@keyframes fid-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 5. five gradient product cards, sticky stack and mobile label rails */
.fid-products { position: relative; padding: 84px 0; background: linear-gradient(180deg, #eaf5fe, #90d0fe); }
.fid-products::before { content: ""; position: absolute; inset: auto 0 100%; height: clamp(40px, 6vw, 100px); background: #eaf5fe; clip-path: ellipse(65% 100% at 50% 100%); pointer-events: none; }
.fid-stack { position: relative; max-width: 1152px; margin: 0 auto; }
.fid-rail { display: none; }
@media (min-width: 1380px) and (min-height: 640px) {
  .fid-rail { display: flex; position: fixed; left: 32px; top: 50%; z-index: 30; flex-direction: column; align-items: center; gap: 8px; padding: 4px; border: 1px solid #ffffff66; border-radius: 9999px; background: #ffffff33; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%); }
  .fid-rail.on { opacity: 1; visibility: visible; pointer-events: auto; }
  .fid-rail a { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 9999px; color: #032d60; font: 600 16px/1.3 var(--body); text-decoration: none; }
  .fid-rail .fid-rail-label { display: none; }
  .fid-rail .fid-ico { width: 32px; height: 32px; color: #022ac0; background: #eaf5fe; border: 0; }
  .fid-rail a:hover, .fid-rail a:focus-visible { background: #ffffff88; }
}
@media (min-width: 1500px) and (min-height: 640px) {
  .fid-rail { align-items: flex-start; gap: 12px; padding: 0; border: 0; background: none; max-width: 270px; }
  .fid-rail a { padding: 8px 12px; }
  .fid-rail .fid-rail-label { display: inline; }
  .fid-rail a:not([aria-current="step"]) .fid-ico { display: none; }
}
.fid-cards { display: block; padding-bottom: 0; }
.fid-stack.is-stacking .fid-cards::after { content: ""; display: block; height: 100vh; }
.fid-card { position: relative; margin-bottom: 64px; scroll-margin-top: calc(var(--hdr) + 16px + var(--i) * 46px - 84px); transform-origin: top center; border-radius: 30px; padding: 30px; color: var(--white); box-shadow: 0 30px 60px -28px rgba(0, 20, 70, .6); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.fid-card h3 { color: var(--white); font-size: 28px; line-height: 1.2; margin: 0; }
.fid-card p { margin: 0; color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.55; max-width: 52ch; }
.fid-card .btn { width: 100%; align-self: flex-start; margin-top: 6px; }
.fid-card-top { display: flex; min-height: 32px; align-items: center; justify-content: space-between; }
.fid-ico { flex: none; width: 32px; height: 32px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; }
.fid-ico svg { width: 18px; height: 18px; }
.fid-card-art { margin-top: 6px; }
.fid-card-art svg { width: 100%; max-width: 420px; height: auto; }
.fid-card:nth-child(1) { background: linear-gradient(270deg, #066afe, #001e5b); }
.fid-card:nth-child(2) { background: linear-gradient(270deg, #3451de, #001e4a); }
.fid-card:nth-child(3) { background: linear-gradient(270deg, #066afe, #001e5b); }
.fid-card:nth-child(4) { background: linear-gradient(270deg, #1f827c, #023434); }
.fid-card:nth-child(5) { background: linear-gradient(270deg, #5867e8, #321d71); }
@media (min-width: 1024px) {
  .fid-cards { gap: 28px; }
  .fid-stack.is-stacking .fid-card { position: sticky; top: calc(var(--hdr) + 16px + var(--i) * 46px); transform: scale(var(--card-scale, 1)); }
}
@media (max-width: 1023px) {
  .fid-card { padding: 24px; border-radius: 30px; }
  .fid-card h3 { font-size: 28px; }
}

.fid-card-strip { display: none; }
.fid-stack.is-stacking .fid-card.covered .fid-card-strip { position: absolute; inset: 0 0 auto; height: 46px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: white; text-decoration: none; font-size: 14px; background: inherit; }
.fid-card-strip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fid-card-strip .fid-card-label { white-space: nowrap; font-size: 13px; }
@media (max-width: 1023px) { .fid-cards { padding-bottom: 0; } }

/* 6. ecosystem: intro and two split dark blue panels with chips and quote */
.fid-eco-grid { display: grid; gap: 22px; }
@media (min-width: 960px) { .fid-eco-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; } .fid-eco-panel > h3 { grid-column: 1 / -1; } .fid-eco-panel .fid-quote { grid-column: 1 / -1; } }
.fid-eco-panel { background: linear-gradient(270deg, #066afe, #001e5b); color: var(--white); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.fid-eco-panel h3 { color: var(--white); font-size: 24px; }
.fid-eco-panel h4 { color: var(--cyan); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.fid-eco-panel p, .fid-eco-panel li { color: rgba(255,255,255,.86); font-size: 15.5px; }
.fid-eco-panel a:not(.btn) { color: #cfe3ff; }
.fid-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; }
.fid-chips li { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); border-radius: 9999px; padding: 8px 14px; font: 600 13px/1.2 var(--body); color: var(--white); }
.fid-cols { display: grid; gap: 16px; }
@media (min-width: 620px) { .fid-cols { grid-template-columns: repeat(3, 1fr); } }
.fid-quote { margin: 6px 0 0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.28); border-radius: 18px; padding: 20px; }
.fid-quote blockquote { margin: 0; }
.fid-quote blockquote p { color: var(--white); font-size: 17px; line-height: 1.5; }
.fid-quote figcaption { margin-top: 12px; display: grid; gap: 2px; font-size: 13px; color: rgba(255,255,255,.75); }
.fid-quote figcaption b { color: var(--cyan); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.fid-quote .btn { margin-top: 14px; }

/* 7. values panel */
.fid-values { position: relative; background: linear-gradient(180deg, #022ac0, #061b50); padding: 80px 0 120px; color: white; }
.fid-values-exit { position: absolute; inset: auto 0 -1px; width: 100%; height: clamp(36px, 5vw, 80px); pointer-events: none; }
body[data-page="home"] .fid-values h2, .fid-values .caps { color: white; }
.fid-values-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .fid-values-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.fid-values-grid h3 { color: #04e1cb; margin-top: 22px; }
.fid-values-grid h3:first-child { margin-top: 0; }
.fid-values-grid p { color: white; }
.fid-values-visual { width: min(480px, 80%); height: auto; margin: 24px auto 48px; color: #04e1cb; }
.fid-values-foot { margin-top: 42px; background: var(--blue-deep); color: var(--white); border-radius: 26px; padding: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: space-between; }
.fid-values-foot p { margin: 0; max-width: 760px; color: rgba(255,255,255,.9); }

/* 8. customer-story carousel with dark lower captions and white pills */
.fid-stories { background: linear-gradient(180deg, #eaf5fe, #90d0fe); padding: 84px 0; }
.fid-carousel { position: relative; }
.fid-slides { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 8px; }
.fid-slides.is-continuous { scroll-snap-type: none; }
.fid-slides::-webkit-scrollbar { display: none; }
.fid-slide { flex: 0 0 86%; max-width: 860px; scroll-snap-align: center; margin: 0; border-radius: 26px; overflow: hidden; background: var(--surface-dark); box-shadow: var(--shadow-card); }
@media (max-width: 767px) { .fid-slide { flex-basis: 92%; } }
.fid-slide img { width: 100%; height: 320px; object-fit: contain; background: #d9edff; }
.fid-slide figcaption { display: grid; gap: 8px; padding: 22px 24px 24px; color: var(--white); background: #061b50; }
.fid-slide figcaption b { font-size: 20px; }
.fid-slide figcaption span { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.5; }
.fid-slide figcaption .btn { justify-self: start; margin-top: 6px; }
.fid-carousel-controls { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.fid-carousel-controls button { width: 42px; height: 42px; border-radius: 9999px; border: 1px solid var(--line); background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.fid-carousel-controls button:hover { background: var(--sky-1); }

/* 9. recognition band with explicit editorial placeholder */
body[data-page="home"] #who { background: linear-gradient(180deg, transparent, #90d0fe); }
.fid-recognition { position: relative; background: linear-gradient(180deg, #90d0fe 50%, #022ac0 50%); padding: clamp(96px, 10vw, 160px) 0; }
.fid-proof-ground { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 64px); max-width: 1440px; height: 100%; border-radius: 20px; pointer-events: none; }
.fid-recognition > .wrap { position: relative; padding-inline: 64px; }
@media (max-width: 767px) {
  .fid-proof-ground { width: calc(100% - 32px); }
  .fid-recognition > .wrap { padding-inline: 40px; }
}
.fid-recognition-grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .fid-recognition-grid { grid-template-columns: 1.25fr .75fr; gap: 60px; } }
.fid-recognition h2 { font-size: clamp(34px, 4vw, 56px); margin: 10px 0 16px; }
.fid-recognition .lede { max-width: 620px; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.fid-recognition .btn { margin-top: 22px; }
.fid-badge { color: var(--blue-deep); justify-self: center; width: min(280px, 70vw); }
.fid-badge svg { width: 100%; height: auto; }

/* 10. lower ground: continuous royal to lilac, tabs and four resource tiles */
.fid-lower { background: transparent; padding: 96px 0 104px; color: var(--white); }
.fid-lower .sec-head h2, .fid-lower .sec-head .lede, .fid-lower .sec-head .caps { color: var(--white); }
.fid-lower .sec-head .caps { color: rgba(255,255,255,.78); }
.fid-lower .sec-head h2 .blue { color: #c8f4ff; }
.fid-lower .sec-head .lede { color: rgba(255,255,255,.9); }
.fid-lower .btn-white { background: var(--white); color: var(--blue-deep); }
.fid-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 34px 0 26px; }
.fid-tabs button { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: var(--white); border-radius: 9999px; padding: 10px 20px; font: 600 14px/1 var(--body); cursor: pointer; }
.fid-tabs button[aria-selected="true"] { background: var(--white); color: var(--blue-deep); border-color: var(--white); }
.fid-tiles { display: grid; gap: 18px; }
@media (min-width: 720px) { .fid-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) {
  .fid-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .fid-tile:first-child, .fid-tile:nth-child(4) { grid-column: span 2; }
}
.fid-tile { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 300px; border-radius: 24px; padding: 22px; color: var(--navy); text-decoration: none; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.fid-tile:hover { transform: scale(1.02); box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); color: var(--navy); }
.fid-tile:hover b, .fid-tile:focus-visible b { text-decoration: underline; text-underline-offset: .14em; }
.fid-tile b { font: 600 20px/1.25 var(--display); letter-spacing: -.01em; position: relative; z-index: 1; }
.fid-tile img { position: absolute; inset: auto 0 0 0; width: 100%; height: 46%; object-fit: cover; opacity: .9; }
.fid-tile-yellow { background: #ffcf00; }
.fid-tile-blue, .fid-tile-blue:hover { background: #0658ee; color: white; }
.fid-tile-photo { background: #092653; color: white; }
.fid-tile-photo:hover { color: white; }
.fid-tile-photo img { height: 100%; opacity: .3; }
.fid-tile-teal { background: #04e1bd; }
.fid-chip { align-self: flex-start; background: rgba(255,255,255,.72); border: 1px solid rgba(0,20,70,.12); border-radius: 9999px; padding: 6px 12px; font: 600 11.5px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; position: relative; z-index: 1; }
.fid-arrow { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 9999px; background: var(--white); color: var(--navy); display: grid; place-items: center; z-index: 1; }
.fid-tile-blue .fid-chip, .fid-tile-photo .fid-chip { color: #032d60; }
.fid-lower-note { color: rgba(255,255,255,.8); margin-top: 22px; text-align: center; }

/* 13. footer: sitemap columns and dark legal bar */
.site-footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 860px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.f-legal { background: #061b50; color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.6; }
.f-legal .wrap { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 18px 24px; align-items: center; }
.f-legal a { color: #cfe3ff; }
.f-legal .f-langs { flex-basis: 100%; color: rgba(255,255,255,.7); }

/* 14. floating contact help pill, dismissible bubble and expandable panel */
.fid-help { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; justify-items: end; gap: 10px; }
.fid-help-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 12px 22px; border-radius: 9999px; border: 0; background: var(--blue-deep); color: var(--white); font: 600 15px/1 var(--body); box-shadow: 0 18px 40px -14px rgba(1, 8, 32, .8); cursor: pointer; }
.fid-help-pill:hover { background: #032d60; }
.fid-help-bubble, .fid-help-panel { width: min(340px, calc(100vw - 36px)); background: var(--white); color: var(--ink); border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 30px 70px -24px rgba(1, 8, 32, .55); padding: 18px 20px; }
.fid-help-bubble { display: flex; gap: 10px; align-items: flex-start; }
.fid-help-bubble p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.fid-help-bubble button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; flex: none; }
.fid-help-panel h2 { font-size: 20px; margin: 0 0 8px; }
.fid-help-panel p { font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; }
.fid-help-panel ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.fid-help-panel > button { border: 1px solid var(--line); background: var(--white); color: var(--navy); border-radius: 9999px; padding: 8px 16px; font: 600 13px/1 var(--body); cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .fid-marquee-track { animation: none; }
  .fid-tile:hover, .fid-card:hover { transform: none; }
}

/* Reference controls and visual slots, verified at 390, 768 and 1440px. */
.fid-demo-bar { flex-wrap: nowrap; }
.fid-demo-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.fid-demo-tabs::-webkit-scrollbar { display: none; }
.fid-demo-tabs button { flex: none; border: 0; border-radius: 9999px; padding: 14px 20px; background: #ffffff55; color: #032d60; font: 600 14px/1.2 var(--body); cursor: pointer; }
.fid-demo-tabs button[aria-selected="true"] { background: white; box-shadow: inset 0 0 0 2px #b34ef9; }
.fid-demo-nav { flex: none; }
.fid-demo-nav button { background: white; color: #032d60; }
.fid-demo-evidence { background: white; color: #032d60; border-radius: 22px; padding: 28px; display: grid; gap: 24px; align-items: center; min-height: 480px; text-align: left; }
.fid-demo-evidence img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 14px; }
.fid-demo-evidence h3 { font-size: 28px; margin-bottom: 16px; }
.fid-demo-evidence p { line-height: 1.6; }
.fid-demo-evidence .btn { margin-top: 12px; }
.fid-card-art img { width: 100%; height: auto; object-fit: contain; }
.fid-card-label { font: 600 15px/1.2 var(--body); color: white; }
.fid-eco-visual { width: 100%; height: auto; border-radius: 20px; }
.fid-rail a[aria-current="step"] { background: white; box-shadow: 0 8px 16px #032d6014; }
.fid-close-details { max-width: 1100px; margin: 32px auto 0; }
.fid-close-details > summary { width: fit-content; margin: 0 auto 32px; padding: 16px 32px; border-radius: 9999px; background: white; color: #032d60; cursor: pointer; font-weight: 600; }
.closing-flow .contact-band .sec-head { max-width: 800px; margin: 0 auto 32px; text-align: center; }
.closing-flow .contact-band .sec-head h2 { font-size: clamp(40px, 4vw, 64px); line-height: 1.1; }
.fid-marquee-track { align-items: center; }
.fid-rel { border: 0; border-radius: 0; background: none; font-size: 24px; font-weight: 600; max-width: none; overflow: visible; }
.fid-rel small { font-size: 12px; font-weight: 400; }
.fid-marquee-pause { display: flex; }
@media (min-width: 960px) {
  .fid-demo-evidence { grid-template-columns: 1fr 1fr; }
  .fid-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 24px 32px; min-height: 600px; padding: 64px; }
  .fid-card-top { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 12px; }
  .fid-card h3 { font-size: 44px; font-weight: 500; grid-row: 1; }
  .fid-card > .btn { width: fit-content; grid-row: 3; align-self: start; }
  .fid-card h3, .fid-card p, .fid-card > .btn { grid-column: 1; }
  .fid-card-art { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
@media (max-width: 767px) {
  .fid-hero.hero-cinema { padding-top: 48px; }
  .fid-hero .wrap { padding-left: 16px; padding-right: 16px; }
  .fid-hero .lede { margin-top: 32px; font-size: 18px; }
  .fid-hero .actions { margin-top: 32px; gap: 16px; }
  .fid-hero .hero-film-section { margin-top: 80px; }
  .fid-glass { padding: 10px; border-radius: 24px; }
  .fid-demo-evidence { padding: 20px; min-height: 420px; }
  .fid-demo-tabs button { padding: 12px 16px; }
  .fid-demo-nav { gap: 4px; }
  .fid-demo-nav button { width: 32px; height: 32px; }
  .fid-card { gap: 16px; }
  .fid-card h3 { font-size: 28px; }
  .fid-card-art { margin-top: 16px; }
  .fid-card-art img { max-height: 190px; object-fit: cover; object-position: top; }
  .fid-tiles { gap: 24px; }
  .fid-tile { min-height: 360px; padding: 28px; }
  .fid-tile b { font-size: 28px; }
  .fid-eco-panel { padding: 24px; }
}
@media (max-width: 359px) { .site-header .brand-logo { width: 100px; } .site-header .head-cta { font-size: 11px; padding: 7px 9px; } .site-header > .wrap { gap: 4px; padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) { .fid-card { position: relative; top: auto; } }

.fid-tile:not(.fid-tile-photo) img { position: relative; inset: auto; width: calc(100% + 44px); max-width: none; height: 180px; margin: auto -22px -22px; object-fit: contain; }
.fid-tile .fid-chip { max-width: calc(100% - 34px); line-height: 1.2; }
.f-worldwide { margin-right: auto; position: relative; }
.f-worldwide summary { background: transparent; cursor: pointer; color: white; padding: 8px 12px; border: 1px solid #ffffff66; border-radius: 9999px; }
.f-connect { display: flex; gap: 12px; margin-top: 20px; }
.f-connect a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
@media (max-width: 767px) { .fid-tile:not(.fid-tile-photo) img { width: calc(100% + 56px); margin: auto -28px -28px; height: 190px; } }

.f-worldwide .language-menu .lang { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; background: #061b50; }
.f-worldwide .lang a, .f-worldwide .lang strong { color: white; }
.f-worldwide .lang strong, .f-worldwide .lang a:hover { background: #ffffff22; }

.head-contact { display: none; color: var(--navy); text-align: center; font-size: 13px; line-height: 1.45; white-space: nowrap; }
@media (min-width: 1440px) { .head-contact { display: grid; } }

/* Measured Salesforce motion states; time-based interpolations are approximations. */
.fid-rail { opacity: var(--rail-in, 0); transform: translateX(calc(-100px * (1 - var(--rail-in, 0)))) translateY(-50%); }
.fid-rail.on { opacity: var(--rail-in, 1); }
.fid-rail a { transition: transform .3s ease, background-color .3s ease; }
.fid-rail a[aria-current="step"] { transform: scale(1.1); }
.fid-stack.is-stacking .fid-card { position: sticky; top: calc(var(--stack-top) + var(--i) * var(--stack-step)); transform: scale(var(--card-scale, 1)); }
.fid-stack.is-stacking .fid-card h3, .fid-stack.is-stacking .fid-card-top { transition: opacity .3s ease, transform .3s ease; }
.fid-stack.is-stacking .fid-card.covered h3 { opacity: 0; transform: translateY(10px); }
.fid-stack.is-stacking .fid-card.covered .fid-card-top { opacity: 0; }
.fid-stack.is-stacking .fid-card-strip { position: absolute; inset: 0 0 auto; height: var(--stack-step); padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: white; text-decoration: none; font-size: 14px; background: inherit; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.fid-card-strip > span:first-child { margin-right: auto; }
.fid-card-strip > .fid-ico { width: 24px; height: 24px; flex: none; }
.fid-stack.is-stacking .fid-card.covered .fid-card-strip { height: var(--stack-step); opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 767px) {
  .fid-card-art { display: none; }
  .fid-card { scroll-margin-top: calc(88px + var(--i) * 26px - 84px); }
  .fid-stack.is-stacking .fid-card-strip { padding-inline: 24px; font-size: 12px; }
  .fid-stack.is-stacking .fid-card-strip .fid-card-label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .fid-rail a, .fid-card h3, .fid-card-top, .fid-card-strip { transition: none !important; }
}

.fid-demo-tabs button { transition: background-color .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1); }
.js .fid-demo-tabs:not(.tabs-in) button { opacity: 0; transform: translateX(60px); }
.js .fid-demo-tabs.tabs-in button { animation: tabArrival .3s ease-out both; animation-delay: calc(var(--tab-index) * .1s); }
.fid-tabs button { transition: background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1); }
.js .fid-badge.reveal { transform: translateY(60px); }
.js .fid-badge.reveal.in { transform: none; }
.fid-values { border-radius: 30px 30px 0 0; }
@media (max-width: 767px) { .fid-stack.is-stacking .fid-card-strip > span:first-child { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .fid-demo-tabs button { animation: none; opacity: 1; transform: none; }
  .js .fid-badge.reveal { transform: none; }
}

.fid-glass-spark { position: absolute; z-index: 2; pointer-events: none; width: 28px; height: 28px; top: 24%; left: -14px; background: #04e1cb; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: sparkFloat 6s ease-in-out infinite; }
.fid-glass-spark:nth-child(2) { left: auto; right: -14px; top: 58%; background: #ff73bd; animation-delay: 1.5s; }
.fid-glass-spark:nth-child(3) { left: 80%; top: -14px; background: #ffd83e; animation-delay: 2.5s; }
@media (prefers-reduced-motion: reduce) { .fid-glass-spark { animation: none; } }

/* The owner movie retains decorative symbols around the closing invitation. */
.closing-flow .contact-band .sparkle { display: block; position: absolute; width: 32px; height: 32px; pointer-events: none; animation: sparkFloat 6s ease-in-out infinite; }
.closing-flow .contact-band .sparkle.s2 { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .closing-flow .contact-band .sparkle { animation: none; } }

/* Reuse surface expansion for the movie's two ecosystem panels and values. */
.fid-eco-grid { width: 100vw; margin-left: calc(50% - 50vw); }
.fid-surface-scene { position: relative; }
.fid-eco-panel { border-radius: 0; padding: 64px max(32px, calc((100vw - 1200px) / 2)); }
.fid-values[data-surface-panel] { --panel-radius: 30px 30px 0 0; }
@media (max-width: 767px) { .fid-eco-panel { padding: 48px 32px; } }
@media (min-width: 960px) {
  .fid-eco-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .fid-eco-panel .fid-eco-visual { grid-column: 2; grid-row: 2 / span 3; align-self: center; }
  .fid-eco-panel .fid-chips { grid-column: 1; }
  .fid-eco-panel .fid-cols { grid-column: 1 / -1; }
}
.fid-eco-grid > .fid-surface-scene:first-child { z-index: 2; }
.fid-eco-grid > .fid-surface-scene:nth-child(2) { z-index: 1; }
@media (min-width: 768px) { .fid-values > .wrap { padding-inline: 32px; } }
@media (max-width: 767px) { .fid-help-bubble { display: none; } }

/* Early opportunity illustration inside the retained glass frame and report page. */
.opportunity-preview{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:40px;background:var(--sky,#eaf5fe);color:var(--ink,#12223f);border-radius:24px}
.hero .opportunity-preview .caps,.opportunity-preview .caps{color:var(--blue-ink)}
.opportunity-summary :is(h2,h3){font-size:clamp(24px,3vw,36px);line-height:1.16;margin:16px 0}
.opportunity-signals :is(h3,h4){font-size:18px;margin:0 0 6px;color:var(--navy,#09245b)}
.opportunity-preview p{margin:0 0 16px}.opportunity-status{display:inline-block;font-weight:700;color:#704b00;background:#fff2cc;border-radius:8px;padding:8px 12px;letter-spacing:.06em}
.opportunity-signals{display:grid;grid-template-columns:1fr 1fr;gap:16px}.opportunity-signals>div{padding:20px;background:#fff;border:1px solid #d3e3fa;border-radius:16px}.opportunity-signals p{font-size:16px;line-height:1.5;margin:0}.opportunity-disclosure{padding:16px 24px;margin:0;color:var(--ink,#12223f);background:#fff;border-radius:0 0 20px 20px}
.hero .opportunity-disclosure{max-width:none}
@media(max-width:767px){.opportunity-preview{grid-template-columns:1fr;padding:24px;gap:24px}.opportunity-signals{grid-template-columns:1fr}.hero .opportunity-preview .caps,.opportunity-preview .caps{color:var(--blue-ink)}
.opportunity-summary :is(h2,h3){font-size:28px}}

/* Decision-first previews retain the glass frame and expanding-section geometry. */
.opportunity-preview { text-align: left; gap: 28px; padding: 32px; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: center; }
.opportunity-preview .opportunity-summary p { font-size: 16px; line-height: 1.55; }
.opportunity-preview .opportunity-status { font-size: 12px; margin-bottom: 0; }
.opportunity-signals { gap: 12px; }
.opportunity-signals > div { padding: 16px; }
.opportunity-signals .opportunity-map { grid-column: 1 / -1; padding: 0; background: none; border: 0; }
.opportunity-map svg { display: block; width: 100%; height: auto; max-height: 155px; }
.opportunity-signals > div:nth-child(3) { border-style: dashed; }
.opportunity-signals > div:nth-child(4) { grid-column: 1 / -1; }
.opportunity-signals > div:last-child { grid-column: 1 / -1; border-left: 4px solid var(--blue); }
.opportunity-signals :is(h3,h4) { font-size: 15px; line-height: 1.3; }
.opportunity-signals p { font-size: 14px; line-height: 1.5; }
.opportunity-preview .opportunity-summary .caps { font-size: 11px; }
.case-dashboard { color: var(--navy); border-radius: 20px; }
.case-dashboard .ec-bar { padding: 12px 18px; }
.case-dashboard .opportunity-status { margin: 0; font-size: 11px; padding: 6px 10px; }
.case-dashboard .ec-case { padding: 14px 18px; }
.case-verdict { padding: 14px 18px; background: #fff6df; border-bottom: 1px solid #e9dfc8; }
.case-verdict b { font-size: 18px; line-height: 1.3; }
.case-verdict p { margin: 5px 0 0; font-size: 12px; }
.case-dashboard-grid { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 12px; padding: 16px; background: #eef5fd; }
.case-dashboard-grid > div { min-width: 0; border-radius: 14px; background: white; padding: 16px; }
.case-dashboard-grid p { font-size: 11px; line-height: 1.5; margin: 8px 0; }
.case-dashboard-grid a { font-size: 11px; }
.case-review { text-align: center; }
.case-review > b { display: block; font-size: 12px; line-height: 1.4; }
.case-dial { width: 98px; height: 98px; margin: 0 auto 12px; border-radius: 50%; padding: 9px; background: conic-gradient(var(--blue) var(--resolved), #deebfb 0); }
.case-dial strong { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: white; font-size: 25px; }
.case-cost h3 { margin: 0 0 16px; font-size: 14px; line-height: 1.3; }
.case-cost-row { margin: 12px 0; }
.case-cost-row > div:first-child { display: flex; gap: 5px; justify-content: space-between; flex-wrap: wrap; font-size: 10px; line-height: 1.4; margin-bottom: 6px; }
.case-cost-track { height: 14px; border-radius: 4px; background: #edf3fa; overflow: hidden; }
.case-cost-track span { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.case-cost-row:nth-child(3) .case-cost-track span { background: #032d60; }
.case-cost-axis { display: flex; justify-content: space-between; font-size: 9px; color: #536780; }
.case-dashboard-grid .case-delta { margin-bottom: 0; font-size: 20px; font-weight: 700; color: var(--blue-ink); }
.case-dashboard-grid .case-next { grid-column: 1 / -1; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 2px 12px; border-left: 4px solid var(--blue); }
.case-next-icon { grid-row: span 3; color: var(--blue-ink); font-size: 28px; }
.case-next b { font-size: 12px; }
.case-next strong { font-size: 11px; grid-column: 3; grid-row: 1; }
.case-next p { grid-column: 2 / -1; margin: 3px 0 0; }
.case-reasoning summary { padding: 12px 18px; font-size: 12px; font-weight: 600; cursor: pointer; }
.case-dashboard .ec-steps { grid-template-columns: 1fr; }
.case-dashboard .ec-step { grid-template-columns: 24px minmax(0,1fr); border-left: 0; padding: 12px 18px; }
.case-dashboard .ec-step p { grid-column: 2; }
.case-dashboard .ec-n { grid-row: span 2; }
.case-dashboard .ec-links { gap: 10px 16px; }
.case-dashboard .ec-foot .btn { font-size: 12px; padding: 10px 16px; }
.case-dashboard .ec-alt { font-size: 11px; }
@media (min-width: 1080px) { #example .expand-oneup { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 40px; } }
@media (max-width: 767px) {
  .opportunity-preview { grid-template-columns: minmax(0,1fr); padding: 22px; gap: 16px; }
  .opportunity-signals { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .opportunity-signals > div { padding: 12px; }
  .opportunity-signals > div:nth-child(4) { grid-column: 1 / -1; }
  .case-dashboard-grid { padding: 10px; gap: 10px; grid-template-columns: minmax(0,1fr); }
  .case-dashboard-grid .case-review { display: grid; grid-template-columns: 90px minmax(0,1fr); text-align: left; gap: 0 16px; align-items: center; }
  .case-review .case-dial { grid-row: span 3; width: 84px; height: 84px; margin: 0; }
  .case-dashboard-grid .case-next { grid-template-columns: 24px minmax(0,1fr); }
  .case-next strong { grid-column: 2; grid-row: auto; }
  .case-cost-row > div:first-child { font-size: 12px; }
  .case-dashboard-grid p, .case-dashboard-grid a { font-size: 12px; }
  .case-cost h3 { font-size: 16px; }
}

.case-claims { display: grid; grid-template-columns: auto 1fr 1fr; gap: 14px; padding: 14px 18px; align-items: center; background: white; font-size: 10px; }
.case-claims > b { font-size: 11px; }
.case-claims > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; }
.case-claims i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: #e6eef8; overflow: hidden; }
.case-claims i span { display: block; height: 100%; background: var(--blue); }
.case-claims > div:last-child i span { background: #9c710c; }
@media (max-width:767px) { .case-claims { grid-template-columns: 1fr 1fr; } .case-claims > b { grid-column: 1 / -1; } }

/* Reviewed assessment excerpt and dated public-record preview. */
#fid-card-3 .clarify-demo{display:block;margin:0;align-self:start;background:#fff;color:#12223f;border:1px solid #d3e3fa;border-radius:16px;padding:20px;text-align:left;box-shadow:0 10px 28px #061b500d;font-size:15px;line-height:1.4}
.clarify-demo figcaption{font-weight:700;font-size:18px;line-height:1.25;color:#061b50;margin-bottom:16px}
.clarify-consequence{padding:12px;background:#fff4d9;border-left:3px solid #956400;display:flex;gap:8px;flex-direction:column;color:#061b50}
.clarify-consequence strong{font-size:12px;letter-spacing:.08em;color:#956400}
.clarify-consequence span{font-size:16px;font-weight:650}
.clarify-action{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13px}
.clarify-action b{color:#061b50;font-size:14px}
.clarify-action strong{color:#061b50;font-weight:650}
.clarify-disclosure{display:block;margin-top:12px;color:#5c6b80;font-size:11px;line-height:1.4}
.clarify-fields{margin:0 0 14px}
.clarify-fields>div{padding:9px 0;border-bottom:1px solid #d3e3fa}
.clarify-fields dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#5c6b80;font-weight:700;margin-bottom:3px}
.clarify-fields dd{margin:0;font-size:14px;color:#12223f}
#recognition .record-preview{background:#fff;padding:28px;border:1px solid #d3e3fa;border-radius:18px;color:#12223f;text-align:left;box-shadow:0 12px 32px #061b500d;width:100%;max-width:540px}
#recognition .record-preview p{color:#12223f;font-size:15px;line-height:1.45;margin:12px 0}
#recognition .record-preview .record-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#5c6b80;margin-top:0}
#recognition .record-preview h3{font-size:26px;line-height:1.15;color:#061b50;margin:12px 0 20px}
.record-preview dl{margin:0;display:grid;gap:10px}
.record-preview dl>div{padding:12px;background:#eaf5fe;border-left:3px solid #1167f5}
.record-preview dt{font-size:14px;font-weight:700;line-height:1.3}
.record-preview dd{margin:4px 0 0;font-size:15px}
#recognition .record-preview .record-limit{font-size:13px;border-top:1px solid #d3e3fa;padding-top:12px}
.record-preview a{color:var(--blue-ink);font-weight:650;font-size:14px;text-decoration:underline}
.record-preview small{display:block;color:#5c6b80;font-size:11px;line-height:1.4;margin-top:14px}
@media(max-width:959px){#fid-card-3 .clarify-demo{width:100%;padding:16px;box-sizing:border-box}#recognition .record-preview{padding:22px}}
@media(max-width:767px){#fid-card-3 .clarify-demo{display:block;margin-top:0;padding:14px;border-radius:12px}.clarify-demo figcaption{font-size:17px;margin-bottom:10px}.clarify-consequence{padding:10px;gap:4px}.clarify-consequence span{font-size:15px}.clarify-action{font-size:12px;gap:5px;margin-top:10px}.clarify-disclosure{margin-top:9px}.clarify-fields>div{padding:7px 0}.clarify-fields dd{font-size:13px}#recognition .record-preview h3{font-size:23px}}
@media(min-width:960px){#fid-card-3 .clarify-excerpt{padding:16px}.clarify-excerpt .clarify-fields>div{padding:7px 0}.clarify-excerpt figcaption{margin-bottom:12px}}
#recognition .fid-badge{width:100%;max-width:540px}
#recognition .record-preview{box-sizing:border-box}

/* Tradezur editorial visuals: dimensional anchors beside readable evidence, not simulated proof. */
.tz-visual { margin: 0; padding: 24px; border-radius: 20px; background: #eaf5fe; color: #12223f; text-align: left; font: 400 15px/1.45 var(--body); min-width: 0; }
.tz-visual b, .tz-visual strong { color: #061b50; }
.tz-visual > img { display: block; width: 100%; height: 180px; object-fit: contain; }
.tz-visual-note { position: relative; border: 1px solid #d3e3fa; border-radius: 12px; padding: 18px; background: white; }
.tz-visual-note > b { display: block; margin-bottom: 12px; }
.tz-visual-fields { margin: 0; }
.tz-visual-fields > div { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; padding: 10px 0; border-top: 1px solid #d3e3fa; }
.tz-visual-fields dt { color: #5c6b80; font-size: 13px; }
.tz-visual-fields dd { margin: 0; }
.tz-visual small { display: block; font-size: 12px; line-height: 1.5; color: #5c6b80; margin-top: 12px; }
.tz-visual-status { display: inline-block; width: fit-content; font-size: 18px; letter-spacing: .07em; padding: 7px 12px; background: #fff3d6; border-left: 4px solid #956400; margin-top: 12px; }
.tz-visual :is(p,ol) { color: inherit; font-size: inherit; margin: 12px 0; }
.tz-visual-anchor img { display: block; width: 100%; height: 120px; object-fit: contain; }
.tz-outcomes { display: grid; gap: 8px; }
.tz-outcomes > div { padding: 12px 16px; background: white; border-left: 4px solid #1167f5; display: grid; grid-template-columns: 70px 1fr; gap: 12px; }
.tz-outcomes > div:nth-child(2) { border-color: #956400; }
.tz-outcomes > div:nth-child(3) { border-color: #5c6b80; }
.tz-action-head { display: grid; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #c7d9f0; }
.tz-action-chain, .tz-role-chain { padding: 0; list-style: none; }
.tz-action-chain li, .tz-role-chain li { color: #12223f; position: relative; display: grid; gap: 6px; background: white; padding: 16px; border: 1px solid #d3e3fa; border-radius: 12px; }
.tz-action-chain li + li, .tz-role-chain li + li { margin-top: 24px; }
.tz-action-chain li + li::before, .tz-role-chain li + li::before { content: "↓"; color: #1167f5; position: absolute; top: -27px; left: 22px; font-size: 20px; }
.tz-role-boundary { padding: 16px; border-top: 2px dashed #8ca9cf; display: grid; gap: 8px; }
.tz-evidence-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tz-evidence-pair > div { background: white; border-radius: 12px; padding: 20px; border-top: 4px solid #1167f5; }
.tz-evidence-pair > div + div { border-color: #956400; }
.tz-cash-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 24px; }
.tz-cash-row i { grid-column: 1/-1; display: block; height: 24px; width: var(--cash); background: #1167f5; border-radius: 0 5px 5px 0; }
.tz-cash-row + .tz-cash-row i { background: #061b50; }
.tz-cash-axis { display: flex; justify-content: space-between; font-size: 12px; color: #5c6b80; margin-top: 8px; }
.tz-cash-delta { margin-top: 20px; padding-top: 16px; border-top: 1px solid #c7d9f0; font-weight: 700; font-size: 24px; }
.tz-card-visual { display: block; }
.tz-card-visual .tz-visual { padding: 20px; }
.tz-card-visual .tz-visual > img { height: 130px; }
.tz-card-visual .tz-visual-note { padding: 14px; }
.tz-card-visual .tz-visual-fields > div { padding: 8px 0; }
.tz-card-visual .tz-visual-opportunity .tz-visual-fields > div { grid-template-columns: 1fr; gap: 3px; }
.fid-demo-evidence > .tz-visual { align-self: center; }
.fid-eco-visual .tz-visual { background: #d9edff; }
.tz-principles-visual { max-width: 800px; margin: 24px auto 48px; }
.fid-slide > .tz-visual { min-height: 340px; border-radius: 0; }
.fid-slide > .tz-visual-opportunity { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
.fid-slide > .tz-visual-opportunity > img { height: 260px; }
.fid-slide > .tz-visual-hold { padding-inline: max(24px, 8%); }
.tz-tile-visual { margin-top: 24px; }
.tz-tile-visual .tz-visual { padding: 16px; border-radius: 14px; font-size: 14px; }
.tz-tile-visual .tz-visual > img, .tz-tile-visual .tz-visual small, .tz-tile-visual .tz-visual-note > b { display: none; }
.tz-tile-visual .tz-visual-note { border: 0; padding: 0; background: transparent; }
.tz-tile-visual .tz-visual-fields > div { grid-template-columns: 1fr; gap: 2px; }
.tz-tile-visual .tz-visual-fields > div:not(:first-child), .tz-tile-visual .tz-role-chain li:not(:first-child) { display: none; }
.tz-tile-visual .tz-role-boundary { margin-top: 16px; padding: 12px 0 0; }
.tz-tile-visual .tz-action-chain li + li { margin-top: 12px; }
.tz-tile-visual .tz-action-chain li + li::before { display: none; }
.tz-tile-visual .tz-cash-row { margin-top: 16px; }
.tz-tile-visual .tz-cash-delta { font-size: 20px; margin-top: 12px; padding-top: 8px; }
.tz-hub-visual { margin: -4px -4px 20px; }
.tz-hub-visual .tz-visual { font-size: 14px; padding: 18px; }
.tz-hub-visual .tz-visual > img { height: 110px; }
.tz-hub-visual .tz-visual-fields > div { grid-template-columns: 1fr; gap: 2px; }
.tz-hub-visual .tz-visual-note { padding: 12px; }
@media (max-width: 767px) {
  .fid-card-art.tz-card-visual { display: block; margin-top: 24px; }
  .tz-card-visual .tz-visual { padding: 16px; }
  .tz-visual-fields > div { grid-template-columns: 1fr; gap: 4px; }
  .tz-evidence-pair { grid-template-columns: 1fr; }
  .tz-visual { padding: 20px; }
  .tz-cash-row { grid-template-columns: 1fr; gap: 4px; }
  .tz-cash-row i { grid-column: 1; }
  .fid-slide > .tz-visual-opportunity { grid-template-columns: 1fr; gap: 12px; }
  .fid-slide > .tz-visual-opportunity > img { height: 120px; }
  .tz-outcomes > div { grid-template-columns: 1fr; gap: 4px; }
}
.tz-card-visual .tz-visual-action { font-size: 14px; padding: 16px; }
.tz-card-visual .tz-action-head { gap: 8px; padding-bottom: 12px; }
.tz-card-visual .tz-action-chain li { padding: 12px; }
.tz-tile-visual .tz-visual-opportunity .tz-visual-fields > div,
.tz-tile-visual .tz-visual-requests .tz-visual-fields > div { display: grid; }
.tz-tile-visual .tz-visual-advisers .tz-visual-fields > div { display: grid; grid-template-columns: 1fr; }
.tz-tile-visual .tz-visual b { font-size: 14px; }

/* Resource previews retain each linked case’s question, owner and deadline. */
.tz-tile-visual .tz-visual-distributor-question .tz-visual-fields > div,
.tz-tile-visual .tz-visual-exclusivity-gap .tz-visual-fields > div { display: grid; }

/* Product-first specimens: one document surface, evidence and gaps in place. */
.tz-report-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:18px; margin-bottom:10px; border-bottom:2px solid #061b50; font-size:12px; font-weight:650; letter-spacing:.035em; }
.tz-visual .tz-report-heading p { margin:0; font-size:12px; }
.tz-report-heading .tz-visual-status { margin:0; font-size:13px; flex:none; }
.tz-visual { background:#fff; border:1px solid #c7d9f0; box-shadow:0 12px 32px #061b5008; }
.tz-visual-note,.tz-card-visual .tz-visual-note { border:0; border-radius:0; padding:8px 0 0; background:transparent; }
.tz-visual-fields > div { padding:12px 0; }
.tz-visual-fields dt { font-weight:550; }
.tz-visual-status { font-size:14px; line-height:1.3; letter-spacing:.04em; border:0; border-radius:5px; }
.tz-visual strong.tz-visual-status { color:#704b00; }
.tz-visual-opportunity .tz-visual-fields > div:last-child,.tz-visual-requests .tz-visual-fields > div:nth-child(2) { border-left:3px solid #b47d10; padding-left:12px; background:#fff9ed; }
.tz-outcomes { gap:0; }
.tz-outcomes > div { border-left:3px solid #3e7d5b; border-bottom:1px solid #d3e3fa; padding:18px 16px; grid-template-columns:70px 1fr; }
.tz-outcomes > div:nth-child(2) { background:#fff9ed; border-color:#b47d10; }
.tz-outcomes > div:nth-child(3) { border-left-color:#7c8796; border-bottom-color:transparent; }
.tz-role-chain li,.tz-action-chain li { background:#f5f9fe; box-shadow:none; }
.tz-evidence-pair > div { border-radius:0; background:transparent; padding:16px 12px 8px; }
.fid-eco-visual .tz-visual { background:white; }
.fid-slide > .tz-visual-opportunity { display:block; padding:28px 36px; }
.tz-visual-sources .tz-visual-fields { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.tz-visual-sources .tz-visual-fields > div { display:block; border-top:0; border-left:3px solid #1167f5; padding:0 0 0 16px; }
.tz-visual-sources .tz-visual-fields > div + div { border-color:#56865d; }
.tz-visual-sources .tz-visual-fields dt { margin-bottom:12px; }
.tz-article-scene { max-width:920px; margin:32px auto; }
.tz-article-scene .tz-visual { padding:32px; }
.tz-article-scene .tz-visual-exclusivity-gap > b { display:block; font-size:22px; }
.tz-tile-visual .tz-report-heading { font-size:11px; padding-bottom:12px; }
.tz-tile-visual .tz-visual-note { padding-top:0; }
.tz-tile-visual .tz-visual-fields > div { padding:8px 0; }
/* The opening demonstration reads as a single assessment ledger. */
.opportunity-signals { background:white; border:1px solid #c7d9f0; border-radius:16px; padding:22px; gap:0 20px; box-shadow:0 12px 32px #061b5008; }
.opportunity-signals > div { border:0; border-radius:0; padding:18px 0; border-top:1px solid #d3e3fa; }
.opportunity-signals .opportunity-record { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 18px; color:#526780; }
.opportunity-signals .opportunity-record p { font-size:11px; line-height:1.4; letter-spacing:.04em; font-weight:650; }
.opportunity-signals .opportunity-record-status { color:#704b00; background:#fff2cc; padding:6px 9px; border-radius:5px; }
.opportunity-signals > div:nth-child(3) { border-style:solid; }
.opportunity-signals > div:last-child { padding:16px; margin-top:4px; background:#eff5ff; border:0; border-left:3px solid #1167f5; border-radius:0 8px 8px 0; }
.opportunity-preview .opportunity-summary .opportunity-status { margin-bottom:16px; }
@media(max-width:767px) {
 .opportunity-signals { padding:18px; grid-template-columns:minmax(0,1fr); }
 .opportunity-signals > div { padding:14px 0; grid-column:1/-1; }
 .opportunity-signals > div:last-child { padding:14px; }
 .tz-report-heading { gap:10px; }
 .tz-visual-sources .tz-visual-fields { grid-template-columns:1fr; gap:20px; }
 .tz-article-scene .tz-visual { padding:22px; }
 .fid-slide > .tz-visual-opportunity { padding:24px; }
 .tz-outcomes > div { grid-template-columns:1fr; gap:4px; }
}

/* A single featured article uses the full editorial width. */
@media(min-width:860px) {
 .ins-grid > .ins-card:only-child { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:12px 36px; align-items:start; }
 .ins-grid > .ins-card:only-child .tz-hub-visual { grid-row:1/5; margin:0; }
 .ins-grid > .ins-card:only-child h3 { margin-top:20px; font-size:30px; }
}
.tz-visual-sources .tz-visual-fields dt { color:#061b50; font-size:16px; min-height:3em; }
.tz-visual-exclusivity-gap .tz-visual-fields > div:first-child { background:#fff9ed; border-left:3px solid #b47d10; padding-left:12px; }

.page-hero > .wrap > .fine { text-align:left; max-width:78ch; margin:24px 0; color:var(--ink-2); }

/* Product scenes: context, decisive finding and consequence share a visual path. */
.tz-visual:has(> .tz-product-scene) { background:transparent; border:0; box-shadow:none; padding:0; }
.tz-card-visual .tz-visual:has(> .tz-product-scene) { padding:0; }
.tz-product-scene { position:relative; isolation:isolate; padding:12px 4px 4px; color:#061b50; font-size:15px; line-height:1.4; }
.tz-product-scene::before { content:""; position:absolute; z-index:-1; inset:12% -5% 0; background:radial-gradient(ellipse,#90d0fe55,transparent 68%); pointer-events:none; }
.tz-product-scene :is(b,strong) { color:#061b50; }
.tz-product-scene small { margin:0 0 6px; color:#49617d; font-size:12px; font-weight:550; }
.tz-scene-context,.tz-scene-finding,.tz-scene-next { border:1px solid #ffffffb3; border-radius:18px; box-shadow:0 16px 32px #00153726,inset 0 1px 0 #ffffffc9; }
.tz-scene-context { width:82%; background:linear-gradient(125deg,#edf7fff5,#d0e2ffed); overflow:hidden; }
.tz-scene-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid #617fb322; background:#ffffff70; }
.tz-scene-bar > b, .tz-scene-context .tz-scene-bar > div { margin-right:auto; }
.tz-scene-mark { display:grid; place-items:center; width:32px; height:32px; flex:none; background:#0b5cd5; border:1px solid #8ab8ff; border-radius:10px; color:white; font-size:22px; box-shadow:0 3px 7px #061b501c; }
.tz-scene-content { padding:18px 20px 32px; }
.tz-scene-content > b { display:block; font-size:18px; font-weight:550; }
.tz-scene-finding { overflow:hidden; position:relative; width:84%; margin:-16px 0 0 auto; background:linear-gradient(130deg,#fffefa,#fff2d9); }
.tz-scene-finding .tz-scene-bar { padding:14px 16px; }
.tz-scene-finding .tz-visual-status { margin:0; font-size:12px; padding:6px 8px; background:#f9e1a5; color:#704b00; }
.tz-visual .tz-scene-finding p { margin:0; padding:16px 18px 24px; font-size:16px; }
.tz-scene-next { position:relative; display:flex; align-items:center; gap:12px; width:76%; margin:-8px 3% 0 auto; padding:16px; background:linear-gradient(120deg,#fff,#eaf5fe); }
.tz-scene-next b { display:block; font-size:15px; font-weight:600; }
.tz-scene-next .tz-scene-mark { border-radius:50%; background:#0b5cd5; }
.tz-product-scene .tz-scene-caption { display:block; text-align:left; font-size:10px; margin:16px 0 0; color:inherit; opacity:.8; }
.fid-card-art .tz-scene-caption { color:white; }
.fid-card-top .fid-ico { width:58px; height:58px; border:0; border-radius:16px; background:linear-gradient(135deg,#ffffff45,#90d0fe30); box-shadow:inset 0 1px 1px #ffffff80,0 5px 16px #00153720; }
.fid-card-top .fid-ico svg { width:34px; height:34px; }
.fid-card-top .fid-card-label { font-size:18px; }
@media(max-width:767px) {
 .tz-product-scene { font-size:13px; padding-top:8px; }
 .tz-scene-bar { padding:12px; gap:8px; }
 .tz-scene-content { padding:14px 14px 24px; }
 .tz-scene-content > b { font-size:15px; }
 .tz-scene-context { width:88%; }
 .tz-scene-finding { width:94%; margin-top:-10px; }
 .tz-visual .tz-scene-finding p { font-size:14px; padding:12px 14px 20px; }
 .tz-scene-finding .tz-scene-bar { padding:12px; flex-wrap:wrap; }
 .tz-scene-next { width:90%; margin-right:0; padding:12px; }
 .tz-scene-next b { font-size:13px; }
 .fid-card-top .fid-ico { width:46px; height:46px; }
 .fid-card-top .fid-card-label { font-size:16px; }
}

.tz-scene-mark::before { content:"↗"; }
.tz-scene-next .tz-scene-mark::before { content:"→"; }
.tz-scene-records { margin-top:22px; height:7px; width:80%; background:linear-gradient(90deg,#9bb9e34a 45%,transparent 45% 49%,#9bb9e34a 49% 76%,transparent 76% 80%,#9bb9e34a 80%); border-radius:6px; }

.tz-scene-bar > div:first-of-type { font-weight:650; }
.tz-scene-followup { font-size:14px; }
.tz-scene-followup span { display:block; margin-top:4px; }
.tz-scene-kicker { font-size:11px; font-weight:550; color:#49617d; margin-bottom:6px; }

/* A plan, a recommendation and an owned action have different silhouettes. */
.tz-scene-scope .tz-scene-context { width:96%; margin:0 auto; }
.tz-scene-scope .tz-report-heading { padding:20px; background:#ffffff80; margin:0; }
.tz-scene-scope .tz-visual-note { padding:20px; }
.tz-scene-scope .tz-visual-note > b { font-size:20px; margin-bottom:20px; }
.tz-scene-scope .tz-visual-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tz-scene-scope .tz-visual-fields > div { display:block; background:#ffffffa6; border:1px solid #fff; border-radius:12px; padding:16px; }
.tz-scene-scope dt { margin-bottom:8px; }
.tz-scene-scope dd { font-size:15px; font-weight:600; }
.tz-scene-outcomes .tz-report-heading { color:white; border:0; margin:0 0 24px; }
.tz-scene-outcomes .tz-report-heading p { font-size:16px; font-weight:550; }
.tz-scene-outcomes .tz-outcomes { gap:16px; padding:0 4px 12px; }
.tz-scene-outcomes .tz-outcomes > div { position:relative; display:grid; grid-template-columns:84px 1fr; gap:16px; width:90%; padding:22px; border:1px solid #ffffffb3; border-radius:16px; background:linear-gradient(120deg,#f7fbff,#dceaff); box-shadow:0 12px 28px #00153726; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(2) { margin-left:auto; background:linear-gradient(120deg,#fffdf4,#ffe5a7); border-color:#ffe6a9; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(3) { background:linear-gradient(120deg,#f3f6fa,#dce3ef); }
.tz-scene-outcomes .tz-outcomes b { font-size:20px; }
.tz-scene-outcomes .tz-outcomes span { font-size:15px; }
.tz-scene-action .tz-action-head { position:relative; width:84%; padding:22px 22px 32px; border:1px solid #ffffffb3; border-radius:18px; background:linear-gradient(125deg,#fffef9,#ffedc3); box-shadow:0 16px 32px #00153726; }
.tz-scene-action .tz-action-head .tz-visual-status { margin:0; }
.tz-scene-action .tz-action-head > span { font-size:20px; font-weight:550; }
.tz-visual .tz-scene-action .tz-action-chain { position:relative; width:88%; margin:-12px 0 0 auto; }
.tz-scene-action .tz-action-chain li { padding:20px; background:linear-gradient(125deg,#f7fbff,#dceaff); border:1px solid #ffffffb3; border-radius:16px; box-shadow:0 12px 28px #00153726; }
.tz-scene-action .tz-action-chain li + li { margin:12px 0 0 12%; background:#f5fbff; }
.tz-scene-action .tz-action-chain li + li::before { display:none; }
.tz-scene-action .tz-action-chain li:first-child b { font-size:17px; }
.tz-scene-action .tz-action-chain li:first-child span { font-size:15px; }
/* The decision excerpt surfaces the consequence above its supporting record. */
#fid-card-3 .clarify-excerpt { position:relative; padding:0; background:transparent; border:0; box-shadow:none; }
.clarify-excerpt figcaption { color:white; font-size:15px; margin:0 0 16px; }
.clarify-excerpt .clarify-fields { width:86%; margin:0; padding:16px 20px 30px; border:1px solid #ffffffb3; border-radius:18px; background:linear-gradient(125deg,#edf7ff,#cedffd); box-shadow:0 16px 32px #00153726; }
.clarify-excerpt .clarify-fields dt { text-transform:none; letter-spacing:0; font-weight:550; }
.clarify-excerpt .clarify-fields > div { padding:8px 0; }
.clarify-excerpt .clarify-consequence { position:relative; width:90%; margin:-16px 0 0 auto; padding:20px; border:1px solid #ffe6ad; border-radius:16px; background:linear-gradient(125deg,#fffdf5,#ffe7b3); box-shadow:0 14px 28px #00153726; }
.clarify-excerpt .clarify-action { position:relative; width:84%; margin:12px 3% 0 auto; padding:18px; border:1px solid #ffffffb3; border-radius:16px; background:linear-gradient(125deg,#fff,#e5f2ff); box-shadow:0 12px 28px #00153726; }
.clarify-excerpt .clarify-disclosure { color:white; }
/* Shared marketing excerpts retain content-specific structure and readable evidence. */
.tz-visual:not(:has(> .tz-product-scene)) { background:linear-gradient(125deg,#f7fbff,#dfecfc); border:1px solid #fff; box-shadow:0 14px 32px #061b501a,inset 0 1px 0 #fff; }
.tz-visual-advisers .tz-visual-fields { display:grid; gap:10px; margin-top:16px; }
.tz-visual-advisers .tz-visual-fields > div { background:#ffffffad; padding:12px 16px; border:1px solid #fff; border-radius:12px; }
.tz-visual-accountability .tz-visual-fields { margin:16px 0; padding:4px 16px; background:#ffffffa3; border:1px solid #fff; border-radius:12px; }
.tz-visual-accountability > p { border-top:1px solid #a3bbdc; padding-top:16px; font-weight:550; }
.tz-visual .tz-role-chain li { background:linear-gradient(125deg,#fff,#e1eeff); border-color:white; box-shadow:0 8px 18px #061b5012; }
.tz-role-chain li:nth-child(2) { margin-left:6%; }
.tz-role-chain li:nth-child(3) { margin-left:12%; }
.tz-visual-evidence .tz-evidence-pair > div { border:1px solid white; border-radius:12px; padding:16px; background:#f7fbff; }
.tz-visual-evidence .tz-evidence-pair > div + div { background:#fff3d9; }
.tz-visual-evidence > .tz-visual-status { position:relative; margin-left:12%; box-shadow:0 6px 14px #061b5012; }
.tz-visual-hold > .tz-visual-status { display:block; margin:20px 0 12px; font-size:24px; }
.tz-visual-hold > p { font-size:20px; font-weight:550; }
.tz-visual-hold .tz-visual-fields { padding:0 16px; background:#ffffffad; border-radius:12px; }
.tz-visual-exclusivity-gap > b { font-size:18px; }
.tz-visual-exclusivity-gap .tz-visual-fields { margin-top:16px; }
.tz-visual-exclusivity-gap .tz-visual-fields > div:first-child { background:#fff1d5; padding:16px; border:1px solid #ffdfa0; border-radius:12px; box-shadow:0 6px 14px #061b5010; }
.tz-visual-sources { background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.tz-visual-sources .tz-visual-fields > div { padding:20px; border:1px solid #fff; border-radius:16px; background:linear-gradient(125deg,#f7fbff,#dbe9fc); box-shadow:0 10px 24px #061b5017; }
.tz-visual-sources .tz-visual-fields > div + div { border-color:#fff; margin-top:24px; }
.tz-visual-requests .tz-visual-fields > div:last-child { margin:12px 0 0 8%; padding:14px; border:1px solid #fff; background:#e0eeff; border-radius:12px; box-shadow:0 8px 18px #061b5012; }
.tz-visual-terms .tz-visual-fields > div:nth-child(2) { background:#fff1d5; padding:12px; border:1px solid #ffdfa0; border-radius:10px; }
/* The opening example shares the evidence/finding/action hierarchy. */
.opportunity-signals { padding:0; background:transparent; border:0; box-shadow:none; gap:0; }
.opportunity-signals > div { background:linear-gradient(125deg,#f8fcff,#deebfc); padding:18px 22px; border:1px solid #fff; }
.opportunity-signals .opportunity-record { padding:16px 22px; border-radius:18px 18px 0 0; background:#edf5ff; }
.opportunity-signals > div:nth-child(2) { border-radius:0 0 0 18px; padding-bottom:28px; }
.opportunity-signals > div:nth-child(3) { position:relative; margin:0 0 -10px -14px; border-radius:0 0 18px 18px; background:linear-gradient(125deg,#fffdf4,#ffe8b6); box-shadow:0 12px 24px #061b5017; }
.opportunity-signals > div:nth-child(4) { width:92%; padding-top:28px; border-radius:0 0 18px 18px; }
.opportunity-signals > div:last-child { position:relative; width:92%; margin:12px 0 0 auto; padding:18px 22px; background:linear-gradient(125deg,#fff,#dcecff); border:1px solid #fff; border-radius:16px; box-shadow:0 12px 24px #061b5017; }
@media(max-width:767px) {
 .tz-scene-scope .tz-visual-note { padding:14px; }
 .tz-scene-scope .tz-visual-fields > div { padding:12px; }
 .tz-scene-scope .tz-visual-fields { gap:8px; }
 .tz-scene-scope dd { font-size:13px; }
 .tz-scene-outcomes .tz-outcomes > div { grid-template-columns:1fr; gap:6px; padding:18px; }
 .tz-scene-outcomes .tz-outcomes b { font-size:18px; }
 .tz-scene-outcomes .tz-outcomes span { font-size:14px; }
 .tz-scene-action .tz-action-head { width:92%; padding:18px 18px 28px; }
 .tz-scene-action .tz-action-head > span { font-size:17px; }
 .tz-visual .tz-scene-action .tz-action-chain { width:94%; }
 .tz-scene-action .tz-action-chain li { padding:16px; }
 .tz-scene-action .tz-action-chain li:first-child span { font-size:14px; }
 .clarify-excerpt .clarify-fields { width:92%; padding:14px 16px 26px; }
 .clarify-excerpt .clarify-consequence { width:94%; padding:16px; }
 .clarify-excerpt .clarify-action { width:90%; padding:16px; margin-right:0; }
 .opportunity-signals > div { padding:16px; }
 .opportunity-signals > div:nth-child(3) { width:94%; margin:-12px 0 0 auto; border-radius:16px; }
 .opportunity-signals > div:nth-child(4) { width:94%; margin:-6px auto 0 0; padding-top:22px; }
 .opportunity-signals > div:last-child { width:94%; padding:16px; }
}
/* Smaller marketing slots preserve the finding and action, with compact in-flow panels. */
:is(.tz-tile-visual,.tz-hub-visual) .tz-product-scene { padding:0; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-context { width:92%; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-bar { padding:10px 12px; font-size:12px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-mark { width:24px; height:24px; font-size:18px; border-radius:7px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-content { padding:12px 12px 22px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-content b { font-size:14px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-product-scene small:not(.tz-scene-caption) { display:block; font-size:11px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-records { display:none; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-finding { width:94%; margin-top:-10px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-finding p { padding:12px 12px 20px; font-size:13px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-next { width:94%; padding:12px; margin-right:0; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-next b { font-size:13px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-followup { font-size:12px; }
.fid-slide > .tz-visual:has(> .tz-product-scene) { padding:28px; }
.fid-slide .tz-scene-opportunity { max-width:520px; margin:auto; }
/* Short desktop screens keep the full deck within its existing docking steps. */
@media(min-width:1024px) and (max-height:950px) {
 .fid-card { padding:48px; gap:20px 32px; }
 .fid-card h3 { font-size:40px; }
 .clarify-excerpt .clarify-fields { width:94%; padding:12px 16px 22px; }
 .clarify-excerpt .clarify-fields > div { padding:6px 0; }
 .clarify-excerpt .clarify-fields dd { font-size:13px; line-height:1.35; }
 .clarify-excerpt .clarify-consequence { padding:16px; }
 .clarify-excerpt .clarify-action { padding:14px 16px; }
 .tz-scene-action .tz-action-head { width:90%; padding:18px 20px 28px; }
 .tz-scene-action .tz-action-head > span { font-size:18px; }
 .tz-scene-action .tz-action-chain li { padding:16px; }
 .tz-visual .tz-scene-action .tz-action-chain { width:94%; }
 .tz-scene-action .tz-action-chain li + li { margin-left:6%; }
}

/* Authored illustrated pieces carry category, uncertainty and direction. */
.fid-card-top .fid-art-identifier { width:94px; height:94px; background:transparent; box-shadow:none; border:0; border-radius:0; }
.fid-art-identifier img { display:block; width:100%; height:100%; object-fit:contain; }
.fid-rail .fid-art-identifier img,.fid-card-strip .fid-art-identifier img { width:100%; height:100%; object-fit:contain; }
.tz-float-art { position:absolute; z-index:2; object-fit:contain; pointer-events:none; filter:drop-shadow(0 8px 10px #00153720); }
.tz-scene-opportunity { padding-top:12px; padding-right:36px; }
.tz-scene-opportunity .tz-scene-context { width:80%; }
.tz-scene-opportunity .tz-float-question { width:82px; height:82px; top:7%; right:-4px; transform:rotate(12deg); }
.tz-scene-opportunity .tz-float-arrow { width:66px; height:66px; bottom:11%; left:0; transform:rotate(-12deg); }
@media(max-width:767px) {
 .fid-card-top .fid-art-identifier { width:68px; height:68px; }
 .tz-scene-opportunity { padding-right:16px; }
 .tz-scene-opportunity .tz-float-question { width:54px; height:54px; right:0; top:7%; }
 .tz-scene-opportunity .tz-float-arrow { width:44px; height:44px; left:-5px; bottom:14%; }
}
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-opportunity { padding-right:16px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-opportunity .tz-float-question { width:48px; height:48px; right:0; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-opportunity .tz-float-arrow { width:40px; height:40px; left:-4px; }

/* Floating objects share the subject of the native excerpt, outside its text. */
.tz-scene-scope { padding:24px 28px 0 0; }
.tz-scene-scope .tz-float-scope { width:105px; height:105px; right:-12px; top:-30px; transform:rotate(10deg); }
.tz-scene-outcomes { padding-right:30px; }
.tz-scene-outcomes .tz-float-paths { width:98px; height:98px; right:-26px; bottom:0; transform:rotate(8deg); }
.tz-scene-action { padding-right:30px; }
.tz-scene-action .tz-float-deadline { width:86px; height:86px; right:-20px; bottom:24px; transform:rotate(9deg); }
.clarify-excerpt .tz-decision-question { width:70px; height:70px; right:-24px; top:38%; transform:rotate(12deg); }
@media(max-width:767px) {
 .tz-scene-scope { padding:18px 18px 0 0; }
 .tz-scene-scope .tz-float-scope { width:70px; height:70px; top:-22px; right:-4px; }
 .tz-scene-outcomes,.tz-scene-action { padding-right:20px; }
 .tz-scene-outcomes .tz-float-paths { width:64px; height:64px; right:-10px; bottom:-8px; }
 .tz-scene-action .tz-float-deadline { width:58px; height:58px; right:-10px; bottom:-6px; }
 .clarify-excerpt .tz-decision-question { width:50px; height:50px; right:-10px; top:38%; }
}
:is(.tz-tile-visual,.tz-hub-visual) .tz-float-scope { width:62px; height:62px; top:-22px; right:-8px; }

/* Reference-led scene silhouettes: a source, a gap and an accountable handoff. */
.tz-scene-opportunity { padding:20px 8px 0 0; }
.tz-scene-opportunity .tz-scene-context { width:62%; min-height:300px; border-radius:20px 20px 12px 20px; }
.tz-scene-opportunity .tz-scene-content { padding:16px 20px 74px; }
.tz-scene-opportunity .tz-scene-content::before { width:60px; height:60px; margin-bottom:16px; }
.tz-scene-opportunity .tz-scene-content > b { font-size:16px; }
.tz-scene-opportunity .tz-scene-finding { width:72%; margin:-104px 0 0 auto; border-radius:16px; }
.tz-scene-opportunity .tz-scene-next { width:88%; margin:16px 0 0 auto; padding:14px 16px; border-radius:14px; }
.tz-scene-opportunity .tz-scene-next::before { width:36px; height:36px; }
.tz-scene-opportunity .tz-float-question { width:88px; height:88px; right:2%; top:7%; }
.tz-scene-opportunity .tz-float-arrow { width:68px; height:68px; left:0; bottom:8%; }
.tz-scene-scope .tz-scene-context { width:96%; border-radius:20px; background:linear-gradient(135deg,#f5fbfff5,#b4d8f2e8); }
.tz-scene-scope .tz-visual-note { position:relative; padding:20px; }
.tz-scene-scope .tz-visual-note::before { float:left; margin:0 12px 12px 0; }
.tz-scene-scope .tz-visual-note > b { display:block; min-height:48px; padding-top:9px; }
.tz-scene-scope .tz-visual-fields { clear:both; padding:14px; border:2px dashed #638bb8; border-radius:16px; }
.tz-scene-scope .tz-visual-fields > div { border-radius:8px; padding:12px; box-shadow:0 4px 10px #061b5010; }
.tz-scene-outcomes .tz-outcomes { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:12px 0; }
.tz-scene-outcomes .tz-outcomes > div { display:flex; flex-direction:column; gap:12px; width:100%; margin:0; padding:20px; border-radius:20px; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(1) { background:linear-gradient(145deg,#e9fff7,#acdcd1); }
.tz-scene-outcomes .tz-outcomes > div:nth-child(2) { margin-top:44px; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(3) { grid-column:1 / -1; flex-direction:row; align-items:center; width:88%; padding:18px; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(3) span { flex:1; }
.tz-scene-outcomes .tz-outcomes b { font-size:21px; }
.tz-scene-outcomes .tz-outcomes span { font-size:14px; }
.tz-scene-outcomes .tz-outcomes > div::before { width:42px; height:42px; }
.tz-scene-action .tz-action-head { width:82%; border-radius:20px 20px 12px 20px; }
.tz-visual .tz-scene-action .tz-action-chain { width:88%; margin:16px 0 0 auto; }
.tz-scene-action .tz-action-chain li { position:relative; padding:18px 18px 18px 70px; border-radius:14px; }
.tz-scene-action .tz-action-chain li::before { position:absolute; width:36px; height:36px; left:18px; top:20px; }
.tz-scene-action .tz-action-chain li + li { margin:16px 0 0 8%; background:linear-gradient(125deg,#e9fffa,#c4eae4); }
#fid-card-3 .clarify-fields { width:70%; padding-bottom:50px; border-radius:20px; }
#fid-card-3 .clarify-fields > div { padding:10px 0; }
#fid-card-3 .clarify-consequence { width:76%; margin:-32px 0 0 auto; border-radius:14px; }
#fid-card-3 .clarify-action { width:88%; margin-top:16px; border-radius:14px; }
@media(min-width:1024px) {
 .fid-card { grid-template-rows:auto auto auto; align-content:center; min-height:580px; }
 .fid-card h3 { max-width:14ch; }
 .fid-card > p { font-size:18px; line-height:1.65; }
 .fid-card > .btn { min-height:58px; padding:18px 26px; margin-top:8px; }
 .fid-card-art { align-self:center; }
}
@media(max-width:767px) {
 .tz-scene-opportunity .tz-scene-context { width:72%; min-height:260px; }
 .tz-scene-opportunity .tz-scene-content { padding:14px 14px 68px; }
 .tz-scene-opportunity .tz-scene-content::before { width:44px; height:44px; margin-bottom:12px; }
 .tz-scene-opportunity .tz-scene-content > b { font-size:14px; }
 .tz-scene-opportunity .tz-scene-finding { width:88%; margin-top:-64px; }
 .tz-scene-opportunity .tz-scene-next { width:92%; padding:12px; }
 .tz-scene-opportunity .tz-float-question { width:58px; height:58px; top:8%; right:0; }
 .tz-scene-opportunity .tz-float-arrow { width:42px; height:42px; left:-7px; bottom:13%; }
 .tz-scene-scope .tz-visual-fields { padding:8px; }
 .tz-scene-scope .tz-visual-fields > div { padding:10px; }
 .tz-scene-outcomes .tz-outcomes > div { padding:16px; }
 .tz-scene-outcomes .tz-outcomes > div:nth-child(3) { width:94%; flex-wrap:wrap; }
 .tz-scene-outcomes .tz-outcomes > div:nth-child(3) span { flex-basis:100%; }
 .tz-scene-action .tz-action-head { width:92%; }
 .tz-visual .tz-scene-action .tz-action-chain { width:94%; }
 .tz-scene-action .tz-action-chain li { padding-left:58px; }
 .tz-scene-action .tz-action-chain li::before { width:30px; height:30px; left:14px; }
 #fid-card-3 .clarify-fields { width:86%; padding-bottom:42px; }
 #fid-card-3 .clarify-consequence { width:94%; margin-top:-22px; }
 #fid-card-3 .clarify-action { width:94%; }
}
/* Compact reusable previews keep the same hierarchy without tiny glyphs. */
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-content::before { width:32px; height:32px; margin-bottom:8px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-opportunity .tz-scene-context { min-height:0; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-scene-opportunity .tz-scene-finding { margin-top:-32px; width:92%; }
.tz-scene-opportunity .tz-scene-content::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205h18l10%2010v32H12z%20M30%205v12h10%20M20%2027h12%20M20%2034h12%20M20%2041h7%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tz-scene-opportunity .tz-scene-next::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2217%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M12%2044v-5a14%2014%200%200%201%2028%200v5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tz-scene-scope .tz-visual-note::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2020V8h12%20M32%208h12v12%20M44%2032v12H32%20M20%2044H8V32%20M18%2026h16%20M26%2018v16%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(1)::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2040l30-30%20M19%2010h21v21%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(2)::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2223%22%20r%3D%2214%22%2F%3E%3Cpath%20d%3D%22M34%2034l10%2010%20M23%2015v10%20M23%2030v1%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tz-scene-outcomes .tz-outcomes > div:nth-child(3)::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2012v28%20M34%2012v28%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tz-scene-action .tz-action-chain li:first-child::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2217%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22M12%2044v-5a14%2014%200%200%201%2028%200v5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.tz-scene-action .tz-action-chain li:last-child::before { content:""; display:block; flex:none; width:48px; height:48px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2052%2052%22%20fill%3D%22none%22%20stroke%3D%22%230b5cd5%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%2212%22%20width%3D%2236%22%20height%3D%2232%22%20rx%3D%225%22%2F%3E%3Cpath%20d%3D%22M8%2023h36%20M17%207v10%20M35%207v10%20M18%2033l5%205%2011-10%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }

.fid-card-copy { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.fid-card-copy > .btn { width:fit-content; margin-top:8px; }
@media(min-width:960px) {
 .fid-card { grid-template-rows:auto 1fr; align-content:start; }
 .fid-card-copy { grid-column:1; grid-row:1 / 3; padding-top:4px; }
 .fid-card-copy > p { font-size:18px; line-height:1.65; }
 .fid-card-copy > .btn { min-height:58px; padding:18px 26px; }
 .fid-card-art { grid-column:2; grid-row:2; }
}
@media(min-width:960px) and (max-height:950px) {
 .fid-card { min-height:580px; gap:12px 32px; }
 .fid-card-top .fid-art-identifier { width:78px; height:78px; }
 .tz-scene-opportunity .tz-scene-content { padding:12px 16px 64px; }
 .tz-scene-opportunity .tz-scene-content::before { width:40px; height:40px; margin-bottom:8px; }
 .tz-scene-opportunity .tz-scene-content > b { font-size:14px; }
 .tz-scene-opportunity .tz-scene-context { min-height:260px; }
 .tz-scene-opportunity .tz-scene-finding { margin-top:-80px; }
 .tz-scene-opportunity .tz-scene-finding .tz-scene-bar { padding:10px 12px; }
 .tz-scene-opportunity .tz-scene-finding p { font-size:14px; padding:12px; }
 .tz-scene-opportunity .tz-scene-next { padding:12px; }
 .tz-scene-opportunity .tz-scene-followup { font-size:12px; }
 .tz-scene-opportunity .tz-scene-next b { font-size:14px; }
 .tz-scene-opportunity .tz-scene-kicker { margin-bottom:2px; }
 #fid-card-3 .clarify-fields { width:84%; padding:12px 16px 32px; }
 #fid-card-3 .clarify-fields > div { padding:6px 0; }
 #fid-card-3 .clarify-consequence { width:80%; margin-top:-18px; padding:14px; }
 #fid-card-3 .clarify-action { margin-top:12px; padding:12px 16px; }
 .tz-scene-action .tz-action-chain li { padding-top:14px; padding-bottom:14px; }
 .tz-scene-action .tz-action-chain li + li { margin-top:12px; }
}

/* The same source and scope assemblies reflow in their service, story and editorial slots. */
.fid-card-art.tz-card-visual, .tz-visual-scope, .tz-visual-opportunity, .tz-visual-action, .tz-visual-outcomes { container-type:inline-size; }

/* A tall source sheet and its attached finding; only the blank right margin overlaps. */
.tz-visual-opportunity .tz-scene-opportunity { display:grid; grid-template-columns:43% 8% 49%; align-items:start; padding:12px 3px 0; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-context { grid-area:1/1/3/3; width:auto; min-height:0; border-radius:16px 16px 9px 16px; box-shadow:3px 5px 0 #aac5ed,0 16px 26px #061b5033; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-bar { padding:11px 13px; gap:7px; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-content { padding:14px 19% 30px 15px; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-content::before { width:36px; height:40px; margin-bottom:10px; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-finding { grid-area:1/2/2/4; width:auto; margin:64px 0 0; border-radius:15px 15px 5px 5px; box-shadow:0 10px 20px #00153730; }
.fid-card .tz-scene-finding .tz-scene-bar { flex-wrap:wrap; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-finding p { padding:10px 14px 14px; font-size:14px; line-height:1.4; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-next { grid-area:2/2/3/4; width:auto; margin:5px 4px 0 8px; padding:11px 13px; border-radius:5px 5px 14px 14px; background:linear-gradient(135deg,#eefafff5,#cbecfff2); }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-next::before { display:none; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-followup { font-size:13px; }
.tz-visual-opportunity .tz-scene-opportunity .tz-float-question { grid-area:1/2/2/4; width:65px; height:65px; top:0; right:12%; }
.tz-visual-opportunity .tz-scene-opportunity .tz-float-arrow { grid-area:2/2/3/4; width:42px; height:42px; left:-37px; top:12px; bottom:auto; }
.tz-visual-opportunity .tz-scene-opportunity .tz-scene-caption { grid-column:1/-1; }

/* The four native terms are printed on the actual front faces of the resin assembly. */
.tz-visual-scope .tz-scene-scope { padding:12px 2% 8px; }
.tz-visual-scope .tz-scene-scope .tz-float-scope { display:none; }
.tz-visual-scope .tz-scene-scope .tz-scene-context { width:auto; overflow:visible; border:0; border-radius:0; box-shadow:none; background:none; }
.tz-visual-scope .tz-scene-scope .tz-report-heading { margin:0 0 21px 6%; padding:0; border:0; background:none; }
.tz-visual-scope .tz-scene-scope .tz-report-heading p { color:white; font-size:14px; }
.tz-visual-scope .tz-scene-scope .tz-visual-note { display:grid; isolation:isolate; padding:0; }
.tz-visual-scope .tz-scene-scope .tz-visual-note::before { display:none; }
.tz-visual-scope .tz-scene-scope .tz-visual-fields { position:relative; isolation:isolate; grid-row:1; display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:0; min-height:clamp(192px,44cqw,228px); width:96%; margin:0; padding:0 9% 0 7%; border:0; }
.tz-visual-scope .tz-scene-scope .tz-visual-fields::before { content:""; position:absolute; z-index:-1; inset:-28% 0 auto; height:147%; background:url("/img/card-art/scope-assembly.webp") center / 100% 100% no-repeat; filter:drop-shadow(1px 12px 8px #07174166); }
.tz-visual-scope .tz-scene-scope .tz-visual-fields > div { display:grid; grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr); align-items:center; gap:12px; margin:0; padding:5px 0; border:0; border-radius:0; background:none; box-shadow:none; }
.tz-visual-scope .tz-scene-scope dt,.tz-visual-scope .tz-scene-scope dd { margin:0; color:#071c42; line-height:1.18; }
.tz-visual-scope .tz-scene-scope dt { font-size:13px; font-weight:600; }
.tz-visual-scope .tz-scene-scope dd { font-size:15px; font-weight:700; }
.tz-visual-scope .tz-scene-scope .tz-visual-fields > div:first-child :is(dt,dd) { color:white; text-shadow:0 1px 2px #093589; }
.tz-visual-scope .tz-scene-scope .tz-visual-note > b { grid-row:2; z-index:1; justify-self:end; max-width:83%; min-height:0; margin:4px 0 0; padding:10px 18px; border:1px solid #e6ffff; border-radius:8px 9px 12px 9px; color:#092757; background:linear-gradient(130deg,#f4feff,#c7f2fc 60%,#9bd8e9); box-shadow:inset 2px 2px 0 #fff9,2px 4px 0 #4194b8,0 9px 15px #071c4266; font-size:16px; }

/* The raised lens touches the source record. The larger question sits on the decision leaf. */
#fid-card-3 .clarify-excerpt { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); grid-template-rows:auto auto auto; align-items:start; align-self:center; isolation:isolate; padding:10px 3px 0 10px; margin-top:4px; }
#fid-card-3 .clarify-excerpt::before { display:none; }
#fid-card-3 .clarify-excerpt figcaption { grid-area:1/1; z-index:1; width:fit-content; max-width:100%; margin:0 0 -1px 9px; padding:7px 11px; border:1px solid #d2eaff; border-bottom:0; border-radius:9px 11px 0 0; background:#e7f3ff; color:#263f63; font-size:13px; }
#fid-card-3 .clarify-source { grid-area:2/1; position:relative; isolation:isolate; }
#fid-card-3 .clarify-source::before { content:""; position:absolute; z-index:-1; inset:1px 4px -3px -3px; border:1px solid #98bfef; border-radius:8px 10px 14px 8px; background:linear-gradient(115deg,#699bd3,#29559a); transform:rotate(-3deg); transform-origin:70% 80%; box-shadow:0 12px 21px #081d4d55; }
#fid-card-3 .clarify-fields { width:auto; padding:6px 13px 14px 15px; border:1px solid #e1f2ff; border-radius:5px 11px 13px 8px; background:linear-gradient(100deg,#f9fdff,#e5f1ff 78%,#c6d9f2); box-shadow:1px 3px 0 #aac2dd,2px 5px 0 #8aaacc; }
#fid-card-3 .clarify-fields > div { position:relative; padding:9px 0; border-bottom:1px solid #afc4db; }
#fid-card-3 .clarify-fields > div:first-child { padding-left:32px; }
#fid-card-3 .clarify-fields > div:last-child { margin:6px -4px 0; padding:8px; border:0; border-radius:6px; background:#fff3dba6; }
#fid-card-3 .clarify-fields dd { font-size:13px; line-height:1.38; }
#fid-card-3 .tz-decision-source { top:7px; left:-19px; width:64px; height:64px; transform:rotate(-12deg); filter:drop-shadow(1px 6px 4px #18365c55); }
#fid-card-3 .clarify-output { grid-area:2/2; position:relative; z-index:1; margin:47px 0 0 -4px; border:1px solid #e3f4ff; border-radius:6px 13px 14px 6px; background:linear-gradient(105deg,#d4e7f5,#f8fcff 12%,#e1f0fa); box-shadow:2px 4px 0 #9bb6d8,3px 6px 0 #719ac4,-7px 12px 19px #09255255; }
#fid-card-3 .tz-decision-question { top:-77px; right:10%; width:87px; height:87px; transform:rotate(8deg); filter:drop-shadow(3px 8px 6px #19337050); }
#fid-card-3 .clarify-consequence { width:auto; margin:-1px -2px 0 -2px; padding:12px 13px; border-radius:6px 12px 8px 4px; border-left:3px solid #c68721; box-shadow:1px 3px 0 #ac8e5080,0 6px 11px #34455826; }
#fid-card-3 .clarify-consequence span { font-size:15px; line-height:1.3; }
#fid-card-3 .clarify-action { width:auto; margin:0; padding:13px 14px 15px; gap:5px; border:0; border-radius:0; background:none; box-shadow:none; }
#fid-card-3 .clarify-action strong { padding-top:6px; border-top:1px solid #a9c1db; }
#fid-card-3 .clarify-disclosure { grid-column:1/-1; margin:18px 0 0; }

/* Three parallel alternatives, each seated in its own translucent socket. */
.tz-visual-outcomes .tz-scene-outcomes { padding:16px 0; }
.tz-visual-outcomes .tz-scene-outcomes .tz-report-heading { margin:0 0 16px; padding:0; }
.tz-visual-outcomes .tz-scene-outcomes .tz-outcomes { grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,3cqw,18px); padding:12px 0; align-items:start; }
.tz-visual-outcomes .tz-scene-outcomes .tz-outcomes > div { display:grid; grid-template-columns:1fr; gap:7px; align-items:start; grid-column:auto; width:auto; min-width:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
.tz-visual-outcomes .tz-scene-outcomes .tz-outcomes > div::before { display:none; }
.tz-visual-outcomes .tz-scene-outcomes .tz-outcomes > div:nth-child(2) { margin-top:22px; }
.tz-visual-outcomes .tz-scene-outcomes .tz-outcomes b,.tz-visual-outcomes .tz-scene-outcomes .tz-outcomes span { color:white; }
.tz-path-copy,.tz-handoff-copy { display:grid; gap:5px; }
.tz-visual-outcomes .tz-scene-outcomes .tz-path-copy span { font-size:14px; line-height:1.4; }
.tz-outcomes .tz-path-object { display:grid; place-items:center; position:relative; isolation:isolate; width:100%; height:clamp(75px,20cqw,104px); margin-bottom:8px; border:1px solid #e2ffff80; border-radius:21px; background:linear-gradient(140deg,#edffff38,#bff3f71a 60%,#b0e5ee38); box-shadow:inset 0 1px 0 #fff8,1px 4px 0 #86bdbd7a,0 10px 14px #042c3452; }
.tz-outcomes .tz-path-object img { position:absolute; inset:5% 10%; width:80%; height:90%; margin:0; object-fit:contain; filter:drop-shadow(1px 5px 4px #032d6044); }
.tz-outcomes .tz-path-object::after { content:""; position:absolute; z-index:-1; left:22%; right:16%; bottom:12%; height:12%; border-radius:50%; background:#0b405d38; filter:blur(4px); }
.tz-outcomes .tz-path-pause::before { content:""; width:13%; height:51%; margin-right:22%; transform:rotate(9deg) skewY(-7deg); border:1px solid #8ad5ff; border-radius:5px; background:linear-gradient(110deg,#caf8ff -5%,#91d6ff 12%,#2860e3 39%,#203cbb); box-shadow:3px 3px 0 #19358b,clamp(15px,5cqw,28px) 0 0 #4d88fa,clamp(18px,5.6cqw,31px) 3px 0 #234795; }

/* A request enters the shared glass stage, reaches its named owner and exits at the calendar. */
.tz-visual-action .tz-scene-action { padding:10px 3% 0 2%; }
.tz-visual-action .tz-scene-action::before { inset:29px 4% 53px 7%; border:1px solid #cbd7ff80; border-radius:22px; background:linear-gradient(125deg,#eaf0ff36,#a2aeff21 58%,#c3d7ff33); box-shadow:inset 2px 2px 0 #f6faff29,3px 5px 0 #a4bbfa38,0 16px 23px #19285d36; }
.tz-visual-action .tz-scene-action .tz-action-head { z-index:1; width:77%; margin:0 0 0 4%; padding:12px 15px; border-radius:14px 15px 15px 4px; box-shadow:2px 3px 0 #cbb780a8,0 9px 16px #15285638; }
.tz-visual-action .tz-scene-action .tz-action-head > span { font-size:16px; }
.tz-visual-action .tz-scene-action .tz-action-chain { width:87%; margin:11px 0 0 auto; padding:0; }
.tz-visual-action .tz-scene-action .tz-action-chain li { position:relative; width:auto; margin:0; padding:14px 15px 14px clamp(50px,13cqw,65px); border:1px solid #c2d9fdab; border-radius:16px 16px 4px 16px; background:linear-gradient(115deg,#224591,#3057b2 70%,#305298); box-shadow:inset 0 1px 0 #fff5,2px 3px 0 #233d76,0 11px 19px #0a204451; }
.tz-visual-action .tz-scene-action .tz-handoff-copy :is(b,span) { color:white; }
.tz-visual-action .tz-scene-action .tz-action-chain li:first-child span { font-size:14px; }
.tz-visual-action .tz-scene-action .tz-action-chain li:first-child::before { z-index:1; width:clamp(78px,24cqw,120px); height:clamp(78px,24cqw,120px); left:clamp(-68px,-13cqw,-36px); top:50%; transform:translateY(-49%); background:url("/img/card-art/handoff-owner.webp") center / contain no-repeat; filter:drop-shadow(3px 7px 4px #14245155); }
.tz-visual-action .tz-scene-action .tz-float-deadline { left:11%; right:auto; top:-23px; bottom:auto; width:31px; height:31px; transform:scaleY(-1) rotate(-12deg); }
.tz-visual-action .tz-scene-action .tz-action-chain li + li { width:91%; min-height:56px; margin:11px 2% 0 auto; padding:11px clamp(46px,12cqw,65px) 11px 15px; align-content:center; border:1px solid #c5f4f0; border-radius:12px 3px 12px 12px; background:linear-gradient(115deg,#effffb,#bde8ed); box-shadow:2px 4px 0 #6eafc9,0 8px 15px #14214a44; }
.tz-visual-action .tz-scene-action .tz-action-chain li:last-child::before { display:block; width:clamp(54px,16cqw,86px); height:clamp(54px,16cqw,86px); top:50%; left:auto; right:-4%; transform:translateY(-51%) rotate(5deg); background:url("/img/card-art/deadline-clock.webp") center / contain no-repeat; filter:drop-shadow(2px 5px 3px #13295855); }

@container (max-width:389px) {
 .tz-visual-opportunity .tz-scene-opportunity { display:block; padding:7px 1px 0; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-scene-context { width:78%; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-scene-content { padding:12px 15px 26px; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-scene-content::before { float:left; width:29px; height:34px; margin:0 7px 4px 0; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-scene-content > b { clear:both; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-scene-finding { width:88%; margin:-13px 0 0 auto; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-scene-next { width:84%; margin:4px 3px 0 auto; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-float-question { top:24px; right:-1%; width:20%; height:auto; }
 .tz-visual-opportunity .tz-scene-opportunity .tz-float-arrow { display:none; }
 .tz-visual-scope .tz-scene-scope { padding-inline:0; }
 .tz-visual-scope .tz-scene-scope .tz-visual-fields { width:100%; }
 .tz-visual-scope .tz-scene-scope .tz-visual-fields > div { gap:7px; }
 .tz-visual-scope .tz-scene-scope dd { font-size:14px; }
 .tz-visual-outcomes .tz-scene-outcomes .tz-outcomes { grid-template-columns:1fr; gap:16px; }
 .tz-visual-outcomes .tz-scene-outcomes .tz-outcomes > div { grid-template-columns:66px 1fr; column-gap:15px; row-gap:2px; margin:0; }
 .tz-outcomes .tz-path-object { height:60px; margin:0; border-radius:13px; }
 .tz-path-copy { gap:2px; }
 .tz-visual-action .tz-scene-action .tz-action-head { width:88%; margin-left:1%; }
 .tz-visual-action .tz-scene-action .tz-action-chain { width:88%; }
 .tz-visual-action .tz-scene-action .tz-action-chain li:first-child { padding-right:11px; padding-left:44px; }
}
@media(max-width:540px) {
 #fid-card-3 .clarify-excerpt { grid-template-columns:1fr; padding-left:7px; }
 #fid-card-3 .clarify-source { grid-area:2/1; width:94%; }
 #fid-card-3 .clarify-fields { padding:4px 12px 13px; }
 #fid-card-3 .clarify-fields > div { padding-block:5px; }
 #fid-card-3 .clarify-fields > div:first-child { padding-left:29px; }
 #fid-card-3 .tz-decision-source { width:53px; height:53px; left:-15px; }
 #fid-card-3 .clarify-output { grid-area:3/1; width:90%; margin:7px 0 0 auto; }
 #fid-card-3 .tz-decision-question { top:-9px; right:auto; left:-34px; width:54px; height:54px; }
 #fid-card-3 .clarify-consequence { padding:11px 14px 11px 22px; }
 #fid-card-3 .clarify-action { padding:11px 14px 14px; }
}


/* Principles: the clipped source supports the foreground question and finding. */
.tz-visual-evidence:has(> .tz-proof-scene) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.tz-proof-scene {
  display: grid;
  grid-template-columns: 48% 4% 48%;
  max-width: 720px;
  margin: 0 auto;
  isolation: isolate;
}
.tz-proof-source {
  grid-area: 1 / 1 / 2 / 3;
  align-self: start;
  position: relative;
  padding: 31% 19% 24% 25%;
  background: url("/img/card-art/source-clip.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(3px 12px 6px #00134566);
}
.tz-proof-source > * { transform: rotate(-7deg); }
.tz-proof-source > b, .tz-proof-finding > b { display: block; font-size: 1.2em; }
.tz-proof-scene .tz-proof-source p, .tz-proof-scene .tz-proof-finding p { margin: 6px 0; }
.tz-proof-finding {
  grid-area: 1 / 2 / 2 / 4;
  align-self: end;
  position: relative;
  margin: 17% 0 0;
  padding: 25px 8% 20px;
  border: 1px solid #efffff;
  border-radius: 18px 18px 18px 4px;
  color: #112849;
  background: linear-gradient(120deg,#f8ffff,#d4fbfa 70%,#a8e5eb);
  box-shadow: inset 2px 2px 1px #fff, 2px 5px 0 #459bb4, 3px 8px 0 #185782, 4px 15px 18px #00164866;
}
.tz-proof-finding::before {
  content: "";
  position: absolute;
  width: 23%;
  aspect-ratio: 1;
  right: 5%;
  bottom: calc(100% - 12px);
  background: url("/img/card-art/question-v2.webp") center / contain no-repeat;
  filter: drop-shadow(2px 6px 3px #001e4a55);
}
.tz-proof-finding .tz-visual-status {
  margin: 7px 0 0;
  background: #ffedbf;
  border: 1px solid #fff3d9;
  box-shadow: 0 2px 0 #c79e57;
}
.tz-proof-conclusion {
  grid-column: 1 / -1;
  margin: 26px 0 0 15%;
  padding-left: 16px;
  border-left: 3px solid #63e4dd;
  color: white;
}
.tz-proof-conclusion p { margin: 0; font-weight: 600; }
.tz-proof-conclusion small { margin-top: 4px; color: #cde5ff; }
@media (max-width: 600px) {
  .tz-proof-scene { grid-template-columns: 12% 76% 12%; max-width: 380px; }
  .tz-proof-source { grid-column: 1 / 3; padding-bottom: 20%; }
  .tz-proof-finding { grid-area: 2 / 2 / 3 / 4; margin-top: -12%; padding: 18px; }
  .tz-proof-finding::before { right: 0; }
  .tz-proof-conclusion { margin-left: 8%; }
}

/* Marketing scenes keep the source, the finding and their connecting object independent. */
.tz-visual:has(> .tz-editorial-scene) {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.tz-editorial-scene {
  --paper: linear-gradient(115deg,#fffcf4,#f7f0de 72%,#ede2cf);
  --glass: linear-gradient(120deg,#f3ffff,#d2f4fa 65%,#b6dfea);
  --rim: inset 1px 1px 0 #fff, 1px 3px 0 #92afc4, 2px 5px 0 #668dac, 1px 12px 18px #092c5a23;
  --object: url("/img/card-art/source-clip.webp");
  --source-inset: clamp(64px, calc(30% + 10px), 158px);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 670px;
  margin-inline: auto;
  padding: 12px 5px 12px 2px;
  color: #122743;
  text-align: left;
  overflow-wrap: anywhere;
}
.tz-editorial-scene :is(.tz-source-leaf,.tz-finding-leaf) {
  position: relative;
  width: 90%;
  margin: 0;
  padding: 20px 7% 24px var(--source-inset);
  border: 1px solid #fff9df;
  border-radius: 4px 14px 10px 5px;
  background: var(--paper);
  box-shadow: 1px 2px 0 #b9b09c, 2px 4px 0 #f6eedc, 3px 6px 0 #afbec5, 2px 13px 20px #092c5a25;
}
.tz-source-leaf::before {
  content: "";
  position: absolute;
  width: 30%;
  max-width: 142px;
  aspect-ratio: 1;
  top: 8%;
  left: -2%;
  background: var(--object) center / contain no-repeat;
  filter: drop-shadow(2px 6px 3px #16375338);
}
.tz-source-leaf > b, .tz-editorial-scene > .tz-scene-title {
  display: block;
  font-size: 1.12em;
  line-height: 1.25;
  margin: 0 0 .7em;
}
.tz-editorial-scene .tz-finding-leaf {
  width: 84%;
  margin: -8px 0 0 auto;
  padding: 16px 6%;
  border-color: #efffff;
  border-radius: 12px 12px 14px 4px;
  background: var(--glass);
  box-shadow: var(--rim);
}
.tz-editorial-scene :is(.tz-source-leaf,.tz-finding-leaf) .tz-visual-fields {
  display: grid;
  gap: 9px;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
}
.tz-editorial-scene :is(.tz-source-leaf,.tz-finding-leaf) .tz-visual-fields > div {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.tz-editorial-scene dt { font-size: .86em; color: #3c5269; font-weight: 600; }
.tz-editorial-scene dd { margin: 2px 0 0; line-height: 1.35; }
.tz-editorial-scene .tz-finding-leaf dt { color: #17496b; }
.tz-editorial-scene .tz-visual-status { margin: 0 0 8px; }
.tz-editorial-scene .tz-report-heading { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid #b5b0a0; }
.tz-editorial-scene .tz-report-heading > p { margin: 0; }
.tz-editorial-scene .tz-report-heading .tz-visual-status { margin: 0; }
.tz-editorial-scene .tz-scene-foot {
  display: block;
  width: fit-content;
  max-width: 92%;
  margin: 18px auto 0 4%;
  padding: 6px 12px;
  border-left: 3px solid #3f94b7;
  color: #193a54;
  background: #f2f9ff;
  font-size: .87em;
}
.tz-visual-distributor-question .tz-editorial-scene, .tz-visual-hold .tz-editorial-scene { --object: url("/img/card-art/question-v2.webp"); }
.tz-visual-terms .tz-editorial-scene { --object: url("/img/card-art/deadline-v2.webp"); }
.tz-visual-requests .tz-editorial-scene { --object: url("/img/card-art/analysis-v2.webp"); }
.tz-visual-accountability .tz-editorial-scene { --object: url("/img/card-art/handoff-owner.webp"); }
.tz-visual-accountability .tz-source-leaf { background: linear-gradient(118deg,#244c99,#0d3074); color: white; padding-block: 26px 32px; }
.tz-visual-accountability .tz-source-leaf :is(b,dt) { color: #d9f3ff; }
.tz-visual-accountability .tz-source-leaf dd { font-size: 1.5em; font-weight: 700; }
.tz-visual-accountability .tz-finding-leaf { width: 74%; }
.tz-visual-hold .tz-source-leaf > p { font-size: 1.18em; font-weight: 650; margin: 4px 0 10px; }
.tz-visual-exclusivity-gap .tz-source-leaf .tz-visual-fields > div:first-child,
.tz-visual-requests .tz-source-leaf .tz-visual-fields > div:last-child,
.tz-visual-terms .tz-source-leaf .tz-visual-fields > div:last-child { border-left: 3px solid #c38c31; padding-left: 8px; }
.tz-visual-exclusivity-gap .tz-finding-leaf > p { font-weight: 600; margin: 10px 0 0; }
.tz-visual-exclusivity-gap .tz-source-leaf::before { transform: rotate(-8deg); }
.tz-visual-requests .tz-source-leaf::before { top: 16%; transform: rotate(-10deg); }

/* Three advisers fork from one question. Each label sits on its own branch. */
.tz-visual-advisers .tz-editorial-scene { padding-inline-start: 19%; }
.tz-visual-advisers .tz-editorial-scene::before {
  content: ""; position: absolute; left: 0; top: 28%; width: 23%; aspect-ratio: .8;
  background: url("/img/card-art/paths-v2.webp") center / contain no-repeat;
  filter: drop-shadow(2px 5px 3px #123b6b30);
}
.tz-visual-advisers .tz-editorial-scene .tz-visual-fields { display: grid; gap: 8px; margin: 0; }
.tz-visual-advisers .tz-editorial-scene .tz-visual-fields > div {
  display: block; padding: 9px 15px; margin: 0 8% 0 0; background: var(--glass);
  border: 1px solid #edffff; border-radius: 6px 18px 18px 6px; box-shadow: var(--rim);
}
.tz-visual-advisers .tz-editorial-scene .tz-visual-fields > div:nth-child(2) { margin-inline: 4%; }
.tz-visual-advisers .tz-editorial-scene .tz-visual-fields > div:last-child { margin-inline: 8% 0; }
.tz-visual-advisers .tz-editorial-scene dt { color: #082b5b; font-size: 1em; font-weight: 700; }
.tz-visual-advisers .tz-editorial-scene > .tz-scene-title { padding: 6px 12px; width: fit-content; background: #143f87; color: white; border-radius: 3px 9px 9px 3px; }

/* Member authorisation passes through the association to the independent analyst. */
.fid-eco-visual .tz-editorial-scene { max-width: 800px; }
.tz-editorial-scene .tz-role-chain { position: relative; display: grid; gap: 13px; margin: 0; padding: 9px 3% 12px 16%; }
.tz-editorial-scene .tz-role-chain::before {
  content: ""; position: absolute; width: 25%; aspect-ratio: 1; top: 18%; left: 0; z-index: 1;
  background: url("/img/card-art/introduction-v2.webp") center / contain no-repeat; filter: drop-shadow(3px 8px 3px #06295c55);
}
.tz-editorial-scene .tz-role-chain li {
  width: 84%; margin: 0; padding: 13px 14px 13px max(16%,40px); border: 1px solid #e9ffff;
  border-radius: 8px 16px 16px 5px; gap: 2px; background: var(--glass); box-shadow: var(--rim);
}
.tz-editorial-scene .tz-role-chain li:nth-child(2) { margin-left: 8%; background: #c5e7ff; }
.tz-editorial-scene .tz-role-chain li:nth-child(3) { margin-left: 16%; background: #e7faff; }
.tz-editorial-scene .tz-role-chain li + li::before {
  content: ""; position: absolute; top: -13px; left: 15%; width: 12px; height: 13px;
  background: linear-gradient(90deg,#19438d,#96ecff,#1699ba); border-radius: 0 0 3px 3px;
}
.tz-editorial-scene .tz-role-boundary {
  width: 78%; margin: 7px 0 0 auto; gap: 4px; padding: 14px 16px; color: white;
  border: 0; border-left: 3px solid #51d8d3; background: #133f85; border-radius: 2px 12px 12px 2px;
}
.tz-editorial-scene .tz-role-boundary b { color: white; }

/* Each source is its own physical record; the second represents multiple references. */
.tz-visual-sources .tz-editorial-scene .tz-visual-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2%; }
.tz-visual-sources .tz-editorial-scene .tz-visual-fields > div {
  align-self: start; position: relative; padding: 30% 15% 22% 25%; margin: 0; border: 0; border-radius: 0;
  background: url("/img/card-art/source-clip.webp") center / 100% 100% no-repeat;
  box-shadow: none; filter: drop-shadow(2px 7px 5px #1e3c602e);
}
.tz-visual-sources .tz-editorial-scene .tz-visual-fields > div + div { margin: 22px 0 0; }
.tz-visual-sources .tz-editorial-scene dt { font-size: 1em; min-height: 0; margin-bottom: 6px; font-weight: 700; }
.tz-visual-sources .tz-editorial-scene :is(dt,dd) { transform: rotate(-6deg); }

/* The chart retains a common zero and scale. The difference leaves the measuring board as a ticket. */
.tz-cost-board {
  position: relative; width: 94%; padding: 17px 6% 22px; margin: 0;
  border: 1px solid #e8fcff; border-top: 5px solid #76d3df; border-radius: 10px 16px 8px 5px;
  background: linear-gradient(120deg,#fbffff,#d9edf6); box-shadow: var(--rim);
}
.tz-cost-board > b { display: flex; align-items: center; gap: 10px; }
.tz-cost-board > b::before {
  content: ""; width: clamp(38px,12%,64px); aspect-ratio: 1; flex: none;
  background: url("/img/card-art/source-clip.webp") center / contain no-repeat; transform: rotate(-8deg);
}
.tz-cost-board .tz-cash-row { grid-template-columns: 1fr auto; margin-top: 10px; gap: 4px; }
.tz-cost-board .tz-cash-row i { grid-column: 1/-1; border-radius: 1px 5px 5px 1px; height: 14px; background: linear-gradient(#497ff5,#225acf 35%,#1643a2 92%,#122c72); }
.tz-cost-board .tz-cash-row + .tz-cash-row i { background: linear-gradient(#43c8d7,#1e809b 38%,#1b667d 90%,#0c485c); }
.tz-cost-result { position: relative; width: fit-content; max-width: 92%; margin: -8px 1% 0 auto; padding: 12px 18px; border-radius: 7px 12px 12px 4px; color: white; background: linear-gradient(120deg,#123e87,#164f9b); box-shadow: 1px 4px 0 #0d3165,1px 10px 14px #183b612b; }
.tz-cost-result .tz-cash-delta { border: 0; margin: 0; padding: 0; color: white; font-size: 1.3em; }
.tz-cost-result small { color: #e7f7ff; margin-top: 2px; }
.fid-slide > .tz-visual:has(> .tz-editorial-scene) { padding: clamp(20px,4vw,48px); background: linear-gradient(135deg,#d6effc,#b9daee); }
.fid-slide > .tz-visual-opportunity { background: linear-gradient(135deg,#d6effc,#b9daee); }
.fid-slide .tz-scene-opportunity .tz-float-art { background: transparent; }
@media (max-width: 600px) {
  .tz-visual-sources .tz-editorial-scene .tz-visual-fields { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .tz-visual-sources .tz-editorial-scene .tz-visual-fields > div { width: 94%; padding: 29% 15% 21% 24%; }
  .tz-visual-sources .tz-editorial-scene .tz-visual-fields > div + div { margin: -14px 0 0 auto; }
  .tz-editorial-scene .tz-role-chain { padding-left: 10%; }
  .tz-editorial-scene .tz-role-chain::before { width: 22%; left: -2%; }
  .tz-cost-board .tz-cash-row { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .tz-cost-board .tz-cash-row i { flex: none; }
}

/* Linked resource tiles and articles use a readable close crop of the same assembly. */
:is(.tz-tile-visual,.tz-hub-visual) .tz-editorial-scene { font-size: 14px; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-source-leaf { width: 94%; padding: 15px 5% 21px var(--source-inset); }
:is(.tz-tile-visual,.tz-hub-visual) .tz-finding-leaf { width: 88%; padding: 11px 5%; }
:is(.tz-tile-visual,.tz-hub-visual) .tz-editorial-scene .tz-visual-fields > div { padding-block: 0; }
.tz-tile-visual .tz-editorial-scene .tz-scene-foot, .tz-tile-visual .tz-cost-result small { display: block; }
.tz-tile-visual .tz-scene-opportunity img.tz-float-art { position: absolute; inset-inline-start: auto; margin: 0; object-fit: contain; background: none; }
.tz-tile-visual .tz-scene-opportunity img.tz-float-arrow { inset-inline-start: -18px; }
.tz-tile-visual .tz-scene-opportunity .tz-scene-caption { display: block; }
.tz-hub-visual .tz-scene-opportunity .tz-scene-caption, .fid-slide .tz-scene-opportunity .tz-scene-caption { color: #213c5e; }
.tz-tile-visual .tz-scene-opportunity .tz-scene-caption { width: fit-content; padding: 3px 7px; color: #25415a; background: #edf7ff; border-radius: 4px; }
.tz-visual-scope .tz-scene-scope .tz-report-heading p { color: #09295b; }
.fid-card .tz-visual-scope .tz-scene-scope .tz-report-heading p { color: white; }

/* The opening demonstration connects an introduction record to the outstanding question and owner. */
.opportunity-preview .opportunity-signals {
  display: block;
  padding: 10px 2px;
  align-self: center;
  isolation: isolate;
}
.opportunity-signals > .opportunity-record:first-child {
  display: block;
  position: relative;
  width: 89%;
  margin: 0;
  padding: 18px 8% 25px max(21%,58px);
  border: 1px solid #fffcf2;
  border-radius: 4px 16px 10px 5px;
  background: linear-gradient(115deg,#fffef5,#f0e7d6);
  box-shadow: 1px 3px 0 #bdb29f,2px 5px 0 #ebdfcd,2px 10px 15px #14375725;
}
.opportunity-signals > .opportunity-record::before {
  content: ""; position: absolute; width: 27%; aspect-ratio: 1; top: 8%; left: -2%;
  background: url("/img/card-art/introduction-v2.webp") center / contain no-repeat;
  filter: drop-shadow(2px 6px 3px #162c4c38);
}
.opportunity-signals .opportunity-record > p:first-child { margin-bottom: 6px; color: #4b5d72; font-size: 12px; }
.opportunity-signals .opportunity-record > p:last-child { color: #122743; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.opportunity-signals > .opportunity-gap:nth-child(2) {
  position: relative; width: 83%; margin: -9px 1% 0 auto; padding: 16px 6%;
  border: 1px solid #fff6d7; border-radius: 14px 14px 12px 4px;
  background: linear-gradient(120deg,#fffdf3,#ffe7b2); box-shadow: inset 1px 1px 0 #fff, 2px 4px 0 #cfb581,2px 11px 15px #12395e28;
}
.opportunity-signals .opportunity-gap .opportunity-record-status { float: right; margin: 0 0 7px 7px; padding: 5px 7px; font-size: 11px; line-height: 1.1; background: #f6d797; font-weight: 750; }
.opportunity-signals .opportunity-gap p + :is(h3,h4) { margin-top: 10px; }
.opportunity-signals > .opportunity-owner:last-child {
  width: 88%; margin: 11px auto 0 5%; padding: 14px 6% 14px max(19%,52px);
  background: linear-gradient(115deg,#f9ffff,#c6edf2); border-radius: 12px 4px 14px 12px; box-shadow: inset 1px 1px 0 white,2px 4px 0 #6da5bd,1px 10px 16px #153b6826;
}
.opportunity-signals .opportunity-owner::before {
  content: ""; position: absolute; width: 22%; max-width: 94px; aspect-ratio: 1; top: 50%; left: -2%; transform: translateY(-52%);
  background: url("/img/card-art/handoff-owner.webp") center / contain no-repeat; filter: drop-shadow(2px 4px 3px #16385c3b);
}

/* The two named entities have separate identity slips above the research and its source limits. */
#recognition .record-preview { padding: 4px 4px 14px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.record-identity { position: relative; isolation: isolate; padding: 0 1% 10px; }
#recognition .record-identity h3 { padding-right: 18%; margin-bottom: 16px; }
.record-identity::after {
  content: ""; position: absolute; width: 18%; max-width: 78px; aspect-ratio: 1; right: 1%; top: 3%; transform: rotate(10deg);
  background: url("/img/card-art/analysis-v2.webp") center / contain no-repeat; filter: drop-shadow(2px 6px 4px #0932593d);
}
.record-identity dl { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 7px; }
.record-identity dl > div { padding: 17px 10px 23px; border: 1px solid #fffbed; border-top: 4px solid #397cb6; border-radius: 3px 10px 5px 5px; background: linear-gradient(130deg,#fffcf1,#efe6d5); box-shadow: 1px 3px 0 #b8af9e,2px 5px 0 #ecdfcd,1px 10px 13px #19345725; }
.record-identity dl > div + div { margin-top: 18px; border-top-color: #258f9e; }
.record-identity dd strong { display: block; font-size: 1.2em; }
.record-reading { position: relative; margin: -5px 1% 0 4%; padding: 8px 18px 16px; border: 1px solid #efffff; border-radius: 12px 12px 12px 3px; background: linear-gradient(130deg,#fff,#dbedf4); box-shadow: 2px 4px 0 #95b0c4,1px 11px 16px #173b5f24; }

/* In the expanding case the evidence and controls stay intact in the instrument.
   The verdict and its named handoff are the two projected surfaces. */
.expand-visual .case-dashboard { overflow: visible; border: 1px solid #d4e8fc; box-shadow: 3px 6px 0 #829fbd,5px 10px 0 #275698,2px 21px 28px #06234e47; }
.expand-visual .case-dashboard .ec-bar { border-radius: 20px 20px 0 0; background: linear-gradient(110deg,#f1faff,#d2e6f3); }
.expand-visual .case-dashboard .ec-foot { border-radius: 0 0 20px 20px; }
.expand-visual .case-verdict { position: relative; width: 95%; margin: 6px 0 10px auto; padding: 13px 18px 13px max(18%,58px); background: linear-gradient(120deg,#fffaf0,#ffe6b6); border: 1px solid #fff2d2; border-radius: 8px 0 0 4px; box-shadow: 1px 3px 0 #c6a775,0 7px 10px #183d5d24; }
.expand-visual .case-verdict::before { content: ""; position: absolute; width: 16%; max-width: 68px; aspect-ratio: 1; inset: 50% auto auto 1%; transform: translateY(-50%); background: url("/img/card-art/question-v2.webp") center / contain no-repeat; filter: drop-shadow(1px 3px 2px #17365530); }
.expand-visual .case-dashboard-grid .case-next { grid-template-columns: minmax(38px,13%) minmax(0,1fr) auto; border: 1px solid #edffff; background: linear-gradient(120deg,#f6feff,#c6eaf1); box-shadow: 1px 3px 0 #89acbf; }
.expand-visual .case-next-icon { align-self: stretch; font-size: 0; background: url("/img/card-art/handoff-owner.webp") center / contain no-repeat; }
@media (max-width: 600px) {
  .expand-visual .case-dashboard-grid .case-next { grid-template-columns: minmax(40px,17%) minmax(0,1fr); }
  .record-identity dl { gap: 5px; }
  .record-identity dt { overflow-wrap: anywhere; }
}


/* Captions and exposed branch labels travel across both light and dark grounds. */
.tz-proof-conclusion { background: #103b77; border-radius: 0 8px 8px 0; padding: 8px 15px; width: fit-content; max-width: 90%; }
.tz-principles-visual .tz-proof-conclusion { background: transparent; }
.tz-visual :is(.tz-scene-caption,.tz-scene-scope .tz-report-heading p) { width: fit-content; max-width: 100%; }
.tz-visual .tz-product-scene .tz-scene-caption { padding: 3px 8px; color: #183854; background: #e9f5ff; border-radius: 5px; opacity: 1; }
.fid-card .tz-visual .tz-product-scene .tz-scene-caption { padding: 0; background: none; color: white; }
.tz-visual-outcomes .tz-path-copy { padding: 7px 9px; background: #184d68; border-radius: 4px 10px 10px 4px; }
.fid-card .tz-visual-outcomes .tz-path-copy { background: none; padding: 0; }
.tz-visual-outcomes .tz-report-heading p, .tz-visual-scope .tz-scene-scope .tz-report-heading p { padding: 5px 9px; background: #174b79; color: white; border-radius: 4px; }
.fid-card :is(.tz-visual-outcomes,.tz-visual-scope) .tz-report-heading p { background: none; padding: 0; }

/* The linked guide sets the question being asked of the same evidence record. */
.ins-card[href$="/distributor-risks/"] .tz-visual-requests .tz-editorial-scene { --object: url("/img/card-art/question-v2.webp"); }
.ins-card[href$="/distributor-check-costs/"] .tz-visual-requests .tz-editorial-scene { --object: url("/img/card-art/scope-v2.webp"); }
.ins-card[href$="/before-first-shipment/"] .tz-visual-requests .tz-editorial-scene { --object: url("/img/card-art/deadline-clock.webp"); }
.ins-card[href$="/documents-to-request/"] .tz-visual-requests .tz-editorial-scene { --object: url("/img/card-art/source-clip.webp"); }