/* Nimble use-case demo pages. Tokens from Nimble Brand Guide 2.24.26 (p14). */
/* Metric-matched local fallbacks keep text from moving when the web fonts arrive. */
@font-face { font-family: Roobert; src: url(../assets/fonts/Roobert-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Roobert; src: url(../assets/fonts/Roobert-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Roobert; src: url(../assets/fonts/Roobert-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(../assets/fonts/DMSans-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(../assets/fonts/DMSans-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(../assets/fonts/DMSans-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'); size-adjust: 103.14%; ascent-override: 96.18%; descent-override: 30.06%; line-gap-override: 0%; }
@font-face { font-family: 'Roobert Fallback'; src: local('Arial'); size-adjust: 100.58%; ascent-override: 89.09%; descent-override: 20.28%; line-gap-override: 0%; }

:root {
  --purple: #6665EC;
  --purple-deep: #5B4BE0;
  --lavender: #C4C5FE;
  --lavender-pale: #EEEEFF;
  --yellow: #FBEE23;
  --yellow-light: #FFF470;
  --yellow-wash: #FFFBD1;
  --green: #81E58A;
  --green-fg: #2E7D32;
  --green-bg: #E7F3E8;
  --red-fg: #C8323F;
  --red-bg: #FCE8EA;
  --black: #0B0B0B;
  --ink: #2A2F3A;
  --body: #4A4F55;
  --muted: #8A9099;
  --hairline: #E8E8EA;
  --surface: #F6F7F9;
  --white: #FFFFFF;
  --display: Roobert, 'Roobert Fallback', 'Host Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sans: 'DM Sans', 'DM Sans Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: var(--sans);
  --shadow-card: 0 8px 24px rgba(24,24,32,.08), 0 1px 3px rgba(24,24,32,.06);
  --shadow-panel: 0 24px 64px rgba(24,24,32,.10), 0 2px 8px rgba(24,24,32,.05);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }
.mono { font-family: var(--mono); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav .logo img { height: 18px; width: auto; }
.nav .crumb { display: flex; align-items: center; gap: 14px; }
.nav .crumb span { font-size: 13px; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--hairline); }
.nav .links { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.nav .links a { text-decoration: none; color: var(--body); }
.nav .links a:hover { color: var(--black); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap; transition: transform .16s var(--ease-out), background .16s, border-color .16s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--purple); color: var(--white) !important; }
.btn-primary:hover { background: var(--purple-deep); }
.btn-ghost { background: var(--white); border-color: var(--hairline); color: var(--black) !important; }
.btn-ghost:hover { border-color: #cfd1d6; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 7px; }

/* ---------- Hero / demo ---------- */
.hero { position: relative; padding: 56px 0 48px; background: linear-gradient(180deg, var(--yellow-wash) 0%, rgba(255,251,209,0) 520px); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--body); background: var(--white); border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 12px 7px 10px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf55; box-shadow: 0 0 0 0 rgba(47,191,85,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,191,85,.45); } 70% { box-shadow: 0 0 0 7px rgba(47,191,85,0); } 100% { box-shadow: 0 0 0 0 rgba(47,191,85,0); } }
.hero h1 { font: 500 clamp(30px, 4.2vw, 44px)/1.08 var(--display); letter-spacing: -0.025em; color: var(--black); margin: 0 0 16px; text-wrap: balance; }
.hero .sub { font-size: 16px; color: var(--body); max-width: 620px; margin: 0 0 20px; text-wrap: balance; }
.hero-head { position: relative; z-index: 6; transition: opacity .3s var(--ease-out), max-height .4s var(--ease-out), margin .4s var(--ease-out); max-height: 900px; }
.hero-head.collapsing { overflow: hidden; }
.chatting .hero-head { opacity: 0; max-height: 0; margin: 0; overflow: hidden; pointer-events: none; }
.chatting .hero { padding-top: 32px; }

/* Thread */
.thread { display: flex; flex-direction: column; gap: 28px; }
.thread:empty { display: none; }
.thread + .composer-wrap { margin-top: 28px; }
.msg-user { align-self: flex-end; max-width: 80%; background: var(--black); color: var(--white); padding: 12px 16px; border-radius: 14px 14px 4px 14px; font-size: 15px; }

/* Composer */
.composer { background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--shadow-panel); padding: 14px 14px 12px 18px; transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: var(--purple); }
.composer textarea { width: 100%; border: 0; outline: 0; resize: none; font: 400 17px/1.5 var(--sans); color: var(--black); background: transparent; min-height: 52px; max-height: 200px; padding: 4px 0; }
.composer textarea::placeholder { color: var(--muted); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.composer-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 12px/1 var(--mono); color: var(--muted); }
.tool-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 6px; background: var(--surface); color: var(--body); }
.tool-pill svg { width: 12px; height: 12px; }
.send { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--purple); color: var(--white); display: grid; place-items: center; flex: none; transition: transform .16s var(--ease-out), background .16s, opacity .16s; }
.send:hover { background: var(--purple-deep); }
.send:active { transform: scale(.94); }
.send:disabled { opacity: .35; cursor: not-allowed; }
.send svg { width: 18px; height: 18px; }

.ideas { margin-top: 22px; }
.ideas-label { font: 500 13px/1 var(--sans); color: var(--muted); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 11px; font-size: 13px; line-height: 1.4; color: var(--ink); text-align: left; transition: border-color .16s, background .16s, transform .16s var(--ease-out); }
.chip:hover { border-color: var(--lavender); background: var(--lavender-pale); }
.chip:active { transform: scale(.97); }
.chip .k { font: 500 11px/1 var(--mono); color: var(--purple); text-transform: uppercase; letter-spacing: .04em; }
.chatting .ideas { display: none; }

/* ---------- Response card ---------- */
.resp { background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; animation: rise .4s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.resp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.resp-title { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--black); }
.resp-title img { width: 22px; height: 22px; }
.stats { display: flex; gap: 18px; font: 400 12px/1 var(--mono); color: var(--muted); }
.stats b { color: var(--black); font-weight: 500; font-variant-numeric: tabular-nums; }

.steps { padding: 14px 20px; display: grid; gap: 10px; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.step { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; font-size: 14px; }
.step .ico { width: 18px; height: 18px; margin-top: 2px; display: grid; place-items: center; }
.step .ico .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lavender); border-top-color: var(--purple); animation: spin .8s linear infinite; }
.step .ico .ok { width: 16px; height: 16px; border-radius: 50%; background: var(--green); display: grid; place-items: center; }
.step .ico .ok svg { width: 10px; height: 10px; }
.step .ico .wait { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #c9ccd2; }
.step .ico .bad { width: 16px; height: 16px; border-radius: 50%; background: var(--red-bg); color: var(--red-fg); font: 600 11px/16px var(--sans); text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.step .name { color: var(--black); font-weight: 500; }
.step .name em { font-style: normal; font: 400 12px var(--mono); color: var(--muted); margin-left: 8px; }
.step .detail { color: var(--body); font-size: 13px; margin-top: 2px; min-height: 20px; }
.step .detail .ticker { display: inline-block; animation: fade .3s var(--ease-out); }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.step .t { font: 400 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 3px; }

.section { padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.section:last-child { border-bottom: 0; }
.sec-label { display: flex; align-items: center; justify-content: space-between; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* Sources grid */
.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.src { display: block; text-decoration: none; border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; transition: border-color .16s, background .16s; animation: rise .35s var(--ease-out) both; min-width: 0; }
.src:hover { border-color: var(--lavender); background: var(--lavender-pale); }
.src .dom { display: flex; align-items: center; gap: 7px; font: 400 12px/1 var(--mono); color: var(--muted); margin-bottom: 6px; min-width: 0; }
.src .dom img { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.src .dom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src .ttl { font-size: 13.5px; line-height: 1.35; color: var(--black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more-src { margin-top: 10px; background: none; border: 0; padding: 0; font-size: 13px; color: var(--purple); }

/* Memo */
.verdict { background: linear-gradient(180deg, var(--yellow-wash), #fff); border: 1px solid #F3E89A; border-radius: 12px; padding: 16px 18px; color: var(--black); font-size: 15.5px; line-height: 1.55; }
.verdict .sec-label { margin-bottom: 8px; color: #8a7a10; }
.flags { margin-top: 14px; border: 1px solid #F3C6CB; background: var(--red-bg); border-radius: 12px; padding: 14px 16px; }
.flags .sec-label { color: var(--red-fg); margin-bottom: 8px; }
.memo-grid { display: grid; gap: 22px; margin-top: 22px; }
.memo-sec h4 { font: 500 15px/1.3 var(--display); color: var(--black); margin: 0 0 8px; letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
.memo-sec h4 .n { font: 400 11px var(--mono); color: var(--muted); }
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.claim { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.claims .claim:first-child { border-top: 0; }
.flags .claim { border-top-color: #F3C6CB; }
.cite { display: inline-flex; align-items: center; gap: 6px; font: 400 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; text-decoration: none; }
.cite img { width: 12px; height: 12px; border-radius: 2px; }
.cite:hover { color: var(--purple); }
.cite .d { background: var(--surface); padding: 3px 6px; border-radius: 4px; color: var(--body); }
.verdict .lead.clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.verdict .more-src { margin-top: 8px; }
.conf { text-transform: none; letter-spacing: 0; padding: 4px 8px; border-radius: 999px; background: #fff; border: 1px solid #F3E89A; color: var(--body); }
.conf-high { border-color: #BFE8C6; color: var(--green-fg); }
.memo-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0 6px; }
.mtab { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hairline); background: var(--white); border-radius: 999px; padding: 7px 12px; font-size: 13.5px; color: var(--body); transition: background .16s, border-color .16s, color .16s; }
.mtab span { font: 400 11px var(--mono); color: var(--muted); }
.mtab:hover { border-color: #cfd1d6; color: var(--black); }
.mtab[aria-selected="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.mtab[aria-selected="true"] span { color: #b9bdc4; }
.mtab.flag { color: var(--red-fg); border-color: #F3C6CB; }
.mtab.flag[aria-selected="true"] { background: var(--red-fg); border-color: var(--red-fg); color: #fff; }
.mtab.flag[aria-selected="true"] span { color: #ffd6da; }
.mpanel { animation: fade .25s var(--ease-out); }
.missing-note { font-size: 13.5px; color: var(--muted); margin: 10px 0 4px; }
.missing { display: flex; flex-wrap: wrap; gap: 6px; }
.missing span { font: 400 12px var(--mono); background: var(--surface); color: var(--body); padding: 5px 8px; border-radius: 6px; }
.answer-text { font-size: 15px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }

.resp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--surface); }
.resp-actions .left { display: flex; gap: 8px; flex-wrap: wrap; }
.followups { padding: 14px 20px 18px; border-top: 1px solid var(--hairline); }
.code-drawer { display: none; border-top: 1px solid var(--hairline); background: #0f1115; }
.code-drawer.open { display: block; }
.code-drawer pre { margin: 0; padding: 18px 20px; overflow-x: auto; font: 400 12.5px/1.6 var(--mono); color: #d7dae0; }
.code-drawer .tok-k { color: #C4C5FE; } .code-drawer .tok-s { color: #FFF470; } .code-drawer .tok-c { color: #6b7280; }
.err { color: var(--red-fg); font-size: 14px; }
.skeleton { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef0f3, #f7f8fa, #eef0f3); background-size: 200% 100%; animation: shimmer 1.4s infinite; margin: 8px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Sections below the demo ---------- */
.band { padding: 96px 0; }
.band.alt { background: var(--surface); }
.band h2 { font: 500 clamp(30px, 4vw, 42px)/1.1 var(--display); letter-spacing: -0.02em; color: var(--black); margin: 0 0 14px; text-wrap: balance; }
.band .lede { color: var(--body); font-size: 17px; max-width: 640px; margin: 0 0 40px; }
.kicker { font: 500 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--purple); margin-bottom: 16px; }

/* Onboard your agent — mirrors the nimbleway.com light-variant dropdown */
.hero-onboard { margin: 0 0 36px; }
.ob { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 360px; }
.ob-trigger { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 10px 12px 10px 18px; border-radius: 999px; border: 1px solid rgba(212,212,214,.55); background: rgba(229,231,235,.36); color: var(--black); cursor: pointer; font: 500 16px/1.5 var(--sans); letter-spacing: -0.02em; transition: border-color .4s, background .4s; user-select: none; -webkit-tap-highlight-color: transparent; }
.ob-trigger:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ob-left { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ob-left svg { width: 22px; height: 22px; flex: none; }
.ob-divider { width: 1px; align-self: stretch; background: #d4d4d6; margin-left: auto; }
.ob-right { display: flex; align-items: center; gap: 8px; }
.ob-logos { display: flex; gap: 3px; }
.ob-logos img { width: 28px; height: 28px; }
.ob-arrow { display: flex; width: 22px; height: 22px; transition: transform .4s var(--ease-out); }
.ob-arrow svg { width: 100%; height: 100%; }
.ob[data-state="open"] .ob-arrow { transform: rotate(180deg); }
.ob[data-state="open"] .ob-trigger { border-color: #d9d9d9; }
@media (hover: hover) and (pointer: fine) { .ob-trigger:hover { border-color: #d9d9d9; } }
.ob-panel { position: absolute; z-index: 15; top: calc(100% + 8px); left: 0; width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.ob[data-state="open"] .ob-panel { grid-template-rows: 1fr; }
.ob-clip { overflow: hidden; min-height: 0; }
.ob-list { display: flex; flex-direction: column; gap: 6px; padding: 5px; margin: 0; list-style: none; background: #E5E7EB; border: 1px solid rgba(212,212,214,.55); border-radius: 12px; box-shadow: var(--shadow-card); }
.ob-link { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 14px; border-radius: 9px; background: #E5E7EB; border: 0; color: var(--black); text-decoration: none; font: 500 15px/1.5 var(--sans); text-align: left; transition: background .3s; }
@media (hover: hover) and (pointer: fine) { .ob-link:hover { background: #D4D4D6; } }
.ob-link-left { display: flex; align-items: center; gap: 12px; }
.ob-link-left img { width: 28px; height: 28px; }
.ob-copy-ico { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.ob-copy-ico svg { width: 16px; height: 16px; }
.ob-link-arrow { width: 22px; height: 22px; flex: none; }
.ob-sep { height: 1px; background: #d4d4d6; margin: 0 6px; }
.resp-actions .ob { max-width: 320px; }
.resp-actions .ob-trigger { padding: 6px 8px 6px 14px; font-size: 14px; background: var(--white); }
.resp-actions .ob-logos img { width: 22px; height: 22px; }
.resp-actions .ob-panel { top: auto; bottom: calc(100% + 8px); }

/* Shimmer on the headline phrase: black with a yellow band passing through */
.shimmer {
  background: linear-gradient(100deg, var(--black) 0%, var(--black) 30%, #A99A00 46%, #C4B400 54%, var(--black) 72%, var(--black) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--black);
}

/* Benchmark — same card as nimbleway.com/use-cases/finance */
.bench-section { padding: 24px 0 96px; }
.bench-card { background: #fff; border: 1px solid #f1f1ee; border-radius: 32px; padding: 50px 42px 45px; box-shadow: 0 25px 60px rgba(20,20,10,.06); }
.bench-title { text-align: center; font: 500 clamp(28px, 3.4vw, 36px)/1.1 var(--display); letter-spacing: -0.02em; color: var(--black); margin: 0 auto; max-width: 760px; text-wrap: balance; }
.bench-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); align-items: center; column-gap: 70px; margin-top: 30px; }
.bench-text { color: var(--black); font-size: 16px; line-height: 1.55; margin: 0; }
.bench-chart { width: 100%; height: auto; display: block; }
.gh-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--black); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .16s, color .16s; }
.gh-link svg { width: 18px; height: 18px; }
.gh-link:hover { color: var(--purple); border-bottom-color: currentColor; }

/* CTA + footer */
.cta { padding: 96px 0; text-align: center; background: linear-gradient(180deg, #fff 0%, var(--lavender-pale) 100%); }
.cta h2 { font: 500 clamp(30px, 4.5vw, 46px)/1.08 var(--display); letter-spacing: -0.02em; color: var(--black); margin: 0 0 14px; }
.cta p { color: var(--body); margin: 0 auto 28px; max-width: 520px; }
.cta .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.foot { background: var(--black); color: #9aa0a8; padding: 36px 0; font-size: 13px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot img { height: 16px; width: auto; }
.foot a { color: #9aa0a8; text-decoration: none; margin-left: 20px; }
.foot a:hover { color: #fff; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: var(--black); color: #fff; font-size: 13px; padding: 10px 14px; border-radius: 8px; opacity: 0; transition: opacity .2s, transform .25s var(--ease-out); pointer-events: none; z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .bench-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .bench-card { padding: 36px 24px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .hero { padding-top: 44px; }
  .ob-logos img { width: 24px; height: 24px; }
  .stats { gap: 12px; }
  .claim { grid-template-columns: 1fr; gap: 4px; }
  .msg-user { max-width: 92%; }
  .band { padding: 72px 0; }
}
@media (hover: none) { .chip:hover, .src:hover { background: var(--white); border-color: var(--hairline); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Try-in-your-agent: short metallic gold stroke at the top-left, fading early ---------- */
.hero-onboard .ob-trigger {
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    /* soften the lower half so the metal rides the top edge */
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,.9) 100%) border-box,
    /* metal: dark bronze, polished gold, bronze, soft gold glint, then gone by ~45% */
    linear-gradient(90deg, #5E450C 0%, #9C7A22 8%, #E6C766 16%, #A57F24 24%, #D9B652 32%, rgba(150,116,34,.55) 42%, rgba(190,156,58,.2) 52%, rgba(190,156,58,0) 60%) border-box;
  box-shadow: 0 4px 14px rgba(122,92,18,.06);
}
@media (hover: hover) and (pointer: fine) {
  .hero-onboard .ob-trigger:hover { box-shadow: 0 8px 24px rgba(122,92,18,.14); }
}

/* ---------- Hero background options (body[data-bg]) ---------- */
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }

/* 2 · Grid: engineering grid fading out, sun-like glow top right */
[data-bg="grid"] .hero { background: radial-gradient(70% 90% at 92% -10%, rgba(251,238,35,.65) 0%, rgba(255,244,112,.25) 35%, rgba(255,255,255,0) 65%), #fff; }
[data-bg="grid"] .hero::before {
  background-image: linear-gradient(rgba(11,11,11,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(11,11,11,.09) 1px, transparent 1px);
  background-size: 44px 44px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(90% 70% at 50% 0%, #000 30%, transparent 75%);
}

/* 3 · Aurora: soft yellow + lavender light with film grain */
[data-bg="aurora"] .hero { background:
  radial-gradient(45% 60% at 8% 0%, rgba(251,238,35,.75) 0%, rgba(251,238,35,0) 70%),
  radial-gradient(40% 55% at 95% 8%, rgba(196,197,254,.8) 0%, rgba(196,197,254,0) 70%),
  radial-gradient(50% 45% at 55% 55%, rgba(255,244,112,.35) 0%, rgba(255,244,112,0) 70%),
  #fff; }
[data-bg="aurora"] .hero::before {
  opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* 4 · Flag: brand film backdrop with a giant outlined Nimble flag */
[data-bg="flag"] .hero { background: linear-gradient(180deg, #FFF470 0%, #FFFBD1 45%, #fff 100%); overflow: hidden; }
[data-bg="flag"] .hero::before {
  inset: 70px -4% auto auto; width: min(520px, 55vw); height: 450px;
  background: url(../img/flag-mark.svg) no-repeat center / contain; opacity: .55;
}

/* 5 · Dark: black hero, yellow light from below, white type */
[data-bg="dark"] .nav { background: rgba(11,11,11,.82); }
[data-bg="dark"] .nav.scrolled { border-bottom-color: #22252c; }
[data-bg="dark"] .nav .logo img { filter: invert(1); }
[data-bg="dark"] .hero { background: radial-gradient(60% 55% at 50% 108%, rgba(251,238,35,.45) 0%, rgba(251,238,35,.08) 45%, rgba(11,11,11,0) 70%), #0B0B0B; }
[data-bg="dark"] .hero::before {
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 20%, #000, transparent 80%); mask-image: radial-gradient(80% 60% at 50% 20%, #000, transparent 80%);
}
[data-bg="dark"] .hero h1 { color: #fff; }
[data-bg="dark"] .shimmer { background: linear-gradient(100deg, #fff 0%, #fff 28%, #FBEE23 46%, #FFF470 56%, #fff 74%, #fff 100%); -webkit-background-clip: text; background-clip: text; }
[data-bg="dark"] .hero .sub { color: #B9BDC4; }
[data-bg="dark"] .hero-onboard .ob-trigger { background: linear-gradient(#15171c, #15171c) padding-box, linear-gradient(90deg, #7A5C12 0%, #A9852A 10%, #D2AF4A 22%, #C29B36 34%, rgba(168,132,40,.75) 46%, rgba(190,156,58,.35) 62%, rgba(190,156,58,0) 80%) border-box; color: #fff; }
[data-bg="dark"] .hero-onboard .ob-divider { background: #2c2f36; }
[data-bg="dark"] .ideas-label { color: #8A9099; }
[data-bg="dark"] .hero .chip { background: rgba(255,255,255,.04); border-color: #2a2d34; color: #E5E7EB; }
[data-bg="dark"] .hero .chip:hover { background: rgba(251,238,35,.08); border-color: rgba(251,238,35,.45); }
[data-bg="dark"] .composer { border-color: #2a2d34; box-shadow: 0 24px 64px rgba(0,0,0,.5); }
[data-bg="dark"] .msg-user { background: #fff; color: var(--black); }

/* Review-only switcher */
.bg-switch { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; align-items: center; gap: 2px; padding: 4px; background: rgba(11,11,11,.9); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); font: 500 12px/1 var(--sans); }
.bg-switch span { color: #8A9099; padding: 0 8px 0 6px; }
.bg-switch button { flex: none; white-space: nowrap; border: 0; background: transparent; color: #E5E7EB; padding: 7px 10px; border-radius: 7px; }
.bg-switch button:hover { background: #22252c; }
.bg-switch button[aria-pressed="true"] { background: #FBEE23; color: #0B0B0B; }

.hero { overflow-x: clip; }

/* =================== Step flow =================== */
.flow { list-style: none; margin: 8px 0 0; padding: 0; }
.fstep { display: grid; grid-template-columns: 36px 1fr; gap: 20px; position: relative; padding-bottom: 44px; }
.fstep:last-child { padding-bottom: 0; }
.rail { position: relative; display: flex; justify-content: center; }
.rail::after { content: ""; position: absolute; top: 40px; bottom: -44px; left: 50%; width: 1px; background: var(--hairline); transform: translateX(-50%); }
.fstep:last-child .rail::after { display: none; }
.num { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--mono); background: var(--yellow); color: var(--black); transition: background .3s, color .3s, box-shadow .3s; }
.fstep.is-locked .num { background: var(--white); color: var(--muted); box-shadow: inset 0 0 0 1px var(--hairline); }
.fstep.is-done .num { background: var(--black); color: var(--yellow); }
.fhead h3 { font: 500 20px/1.25 var(--display); letter-spacing: -0.01em; color: var(--black); margin: 4px 0 4px; }
.fhead p { margin: 0 0 16px; color: var(--body); font-size: 15px; }
.fstep.is-locked .fhead h3 { color: var(--muted); }
.fstep.is-locked .fhead p { color: #b0b4ba; }
.fstep.is-locked .fcontent { display: none; }
.fstep:not(.is-locked) .locked-card { display: none; }
.locked-card { border: 1px dashed #d9dbe0; border-radius: 8px; padding: 28px 20px; text-align: center; color: var(--muted); font-size: 14px; background: rgba(255,255,255,.5); }
.fcontent { animation: rise .4s var(--ease-out) both; }

/* Step 1: picker */
.picker { position: relative; }
.field { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 6px 6px 14px; box-shadow: var(--shadow-card); transition: border-color .16s; }
.field:focus-within { border-color: var(--purple); }
.field-ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 17px/1.4 var(--sans); color: var(--black); padding: 10px 0; }
.field input::placeholder { color: var(--muted); }
.go { width: 40px; height: 40px; flex: none; border: 0; border-radius: 6px; background: var(--purple); color: #fff; display: grid; place-items: center; transition: background .16s, opacity .16s, transform .16s var(--ease-out); }
.go:hover { background: var(--purple-deep); }
.go:active { transform: scale(.95); }
.go:disabled { opacity: .35; cursor: not-allowed; }
.go svg { width: 18px; height: 18px; }
.ac { position: absolute; z-index: 12; left: 0; right: 0; top: 58px; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--shadow-panel); }
.ac li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px; cursor: pointer; }
.ac li[aria-selected="true"], .ac li:hover { background: var(--surface); }
.ac img { width: 24px; height: 24px; border-radius: 5px; flex: none; background: var(--surface); }
.ac .nm { font-weight: 500; color: var(--black); font-size: 15px; }
.ac .dm { font: 400 12.5px var(--mono); color: var(--muted); margin-left: auto; }
.ac .hint { font-size: 13px; color: var(--muted); padding: 8px 10px; cursor: default; }
.try { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--muted); }
.try span { margin-right: 2px; }
.try button { border: 1px solid var(--hairline); background: var(--white); border-radius: 6px; padding: 5px 10px; font-size: 13px; color: var(--ink); transition: border-color .16s, background .16s; }
.try button:hover { border-color: var(--lavender); background: var(--lavender-pale); }

/* Company card */
.cocard { background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--shadow-card); padding: 18px 20px; animation: rise .35s var(--ease-out) both; }
.co-top { display: flex; align-items: center; gap: 14px; }
.co-top img { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--hairline); background: #fff; padding: 4px; flex: none; }
.co-top .nm { font: 500 18px/1.2 var(--display); color: var(--black); }
.co-top .dm { font: 400 13px var(--mono); color: var(--muted); text-decoration: none; }
.co-top .dm:hover { color: var(--purple); }
.co-top .change { margin-left: auto; background: none; border: 0; color: var(--purple); font-size: 13px; padding: 4px; }
.co-desc { margin: 12px 0 0; color: var(--ink); font-size: 15px; }
.co-news { margin-top: 16px; }
.co-news .lbl { font: 500 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; }
.co-news a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); text-decoration: none; color: var(--ink); font-size: 14px; }
.co-news a:first-of-type { border-top: 0; }
.co-news a:hover .t { color: var(--purple); }
.co-news a .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-news a .s { display: inline-flex; align-items: center; gap: 6px; font: 400 12px var(--mono); color: var(--muted); flex: none; }
.co-news a .s img { width: 12px; height: 12px; border-radius: 2px; }

/* Step 2: areas */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.area { position: relative; text-align: left; background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; padding: 14px 14px 16px; transition: border-color .16s, box-shadow .16s, background .16s, transform .16s var(--ease-out); }
.area:active { transform: scale(.98); }
.area .ai { width: 30px; height: 30px; border-radius: 6px; background: var(--surface); display: grid; place-items: center; color: var(--ink); margin-bottom: 12px; transition: background .16s; }
.area .ai svg { width: 17px; height: 17px; }
.area b { display: block; font: 500 15px/1.3 var(--display); color: var(--black); margin-bottom: 4px; }
.area span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--body); }
.area .tick { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c9ccd2; display: grid; place-items: center; transition: background .16s, border-color .16s; }
.area .tick svg { width: 11px; height: 11px; opacity: 0; }
.area[aria-pressed="true"] { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.area[aria-pressed="true"] .ai { background: var(--yellow); }
.area[aria-pressed="true"] .tick { background: var(--black); border-color: var(--black); }
.area[aria-pressed="true"] .tick svg { opacity: 1; }
.area:disabled { cursor: default; }
.run-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.run { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 8px; }
.run:disabled { opacity: .4; cursor: not-allowed; }
.run-note { font: 400 12.5px var(--mono); color: var(--muted); }

/* Step 3: results */
.overview { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 12px/1 var(--mono); color: var(--muted); margin-bottom: 12px; }
.overview b { color: var(--black); font-weight: 500; font-variant-numeric: tabular-nums; }
.rtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rtab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); background: var(--white); border-radius: 8px; padding: 8px 12px; font-size: 14px; color: var(--body); transition: background .16s, border-color .16s, color .16s; }
.rtab:hover { color: var(--black); border-color: #cfd1d6; }
.rtab[aria-selected="true"] { background: var(--black); border-color: var(--black); color: #fff; }
.rtab .st { display: inline-grid; place-items: center; min-width: 18px; height: 18px; font: 500 11px/1 var(--mono); }
.rtab .st .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lavender); border-top-color: var(--purple); animation: spin .8s linear infinite; }
.rtab .st .cnt { padding: 3px 6px; border-radius: 4px; background: var(--surface); color: var(--body); }
.rtab[aria-selected="true"] .st .cnt { background: #2a2d34; color: #e5e7eb; }
.rtab .st .flagc { padding: 3px 6px; border-radius: 4px; background: var(--red-bg); color: var(--red-fg); margin-left: 4px; }
.rpanel { background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden; }
.rp-status { padding: 16px 18px; display: grid; gap: 8px; font-size: 14px; color: var(--body); background: var(--surface); border-bottom: 1px solid var(--hairline); }
.rp-status .line { display: flex; align-items: center; gap: 10px; animation: fade .3s var(--ease-out); }
.rp-status .line .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lavender); border-top-color: var(--purple); animation: spin .8s linear infinite; flex: none; }
.rp-status .line .ok { width: 12px; height: 12px; border-radius: 50%; background: var(--green); flex: none; }
.rp-status img { width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; }
.rp-body { padding: 18px; }
.rp-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-sources a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--hairline); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; color: var(--ink); text-decoration: none; animation: rise .3s var(--ease-out) both; }
.rp-sources a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.rp-sources a:hover { border-color: var(--lavender); background: var(--lavender-pale); }
.rp-sources img { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.rp-label { font: 500 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.rp-label:first-child { margin-top: 0; }
.rp-summary { background: linear-gradient(180deg, var(--yellow-wash), #fff); border: 1px solid #F3E89A; border-radius: 8px; padding: 14px 16px; color: var(--black); font-size: 15px; line-height: 1.55; }
.rp-flags { border: 1px solid #F3C6CB; background: var(--red-bg); border-radius: 8px; padding: 4px 14px; margin-top: 12px; }
.rp-flags .claim { border-top-color: #F3C6CB; }
.rp-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--hairline); background: var(--surface); }
.rp-foot .meta { font: 400 12px var(--mono); color: var(--muted); }
.rp-foot .left { display: flex; gap: 8px; }

/* Step 4 */
.ask { box-shadow: none; }
#askChips { margin-top: 10px; }
#answers { display: grid; gap: 14px; margin-top: 16px; }
.ans-q { font-weight: 500; color: var(--black); font-size: 15px; margin-bottom: 8px; }

@media (max-width: 860px) { .areas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .fstep { grid-template-columns: 28px 1fr; gap: 12px; }
  .num { width: 28px; height: 28px; font-size: 12px; }
  .rail::after { top: 34px; }
  .areas { grid-template-columns: 1fr 1fr; gap: 8px; }
  .area span { display: none; }
  .co-news a .s span { display: none; }
}
#s1 { z-index: 5; } #s2, #s3, #s4 { z-index: 1; }
[hidden] { display: none !important; }
.rtab { white-space: nowrap; } .rtab .st { display: inline-flex; align-items: center; gap: 4px; } .rtab .st .flagc { margin-left: 0; }
@media (max-width: 560px) { .rtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .rtabs::-webkit-scrollbar { display: none; } .rtab { flex: none; } }

.fhead h3:last-child { margin-bottom: 14px; }

/* ---------- Area icons: black-to-yellow gradient strokes ---------- */
.area .ai { background: var(--surface); }
.area[aria-pressed="true"] .ai { background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); }
.area .ai svg { width: 19px; height: 19px; }

/* ---------- Loading ---------- */
.loading { background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--shadow-card); padding: 22px 22px 18px; margin-bottom: 18px; }
.ld-top { display: flex; align-items: center; gap: 14px; }
.ld-top b { display: block; font: 500 17px/1.3 var(--display); color: var(--black); }
.ld-meta { font: 400 12.5px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.ld-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #EDEBD0; border-top-color: #0B0B0B; border-right-color: #C9B800; animation: spin .9s linear infinite; flex: none; display: inline-block; }
.ld-spin.sm { width: 12px; height: 12px; border-width: 2px; vertical-align: -1px; margin-right: 6px; }
.ld-list { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ld-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); transition: color .3s; }
.ld-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #E2E4E8; transition: background .3s; animation: breathe 1.4s ease-in-out infinite; }
.ld-list li.ok { color: var(--ink); } .ld-list li.ok .dot { background: #2fbf55; animation: none; }
.ld-list li.bad { color: var(--red-fg); } .ld-list li.bad .dot { background: var(--red-fg); animation: none; }
@keyframes breathe { 50% { background: #C9CCD2; } }

/* ---------- Report ---------- */
.report { display: grid; gap: 14px; }
.report:empty { display: none; }
.rp-k { font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.rp-verdict { background: linear-gradient(180deg, var(--yellow-wash), #fff 85%); border: 1px solid #F0E59A; border-radius: 8px; padding: 18px 20px; animation: rise .4s var(--ease-out) both; }
.rp-verdict .rp-k { color: #8a7a10; }
.rp-verdict p { margin: 0; font: 400 17px/1.55 var(--sans); color: var(--black); text-wrap: pretty; }
.rp-overview { background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; padding: 18px 20px; animation: rise .4s var(--ease-out) both; }
.rp-overview p { margin: 0 0 14px; color: var(--ink); font-size: 15px; }
.rp-overview dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; margin: 0; }
.rp-overview dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.rp-overview dd { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--black); }
.rp-sec { background: var(--white); border: 1px solid var(--hairline); border-radius: 8px; padding: 18px 20px; animation: rise .4s var(--ease-out) both; }
.rp-sec h4 { display: flex; align-items: center; gap: 10px; font: 500 17px/1.3 var(--display); color: var(--black); margin: 0 0 10px; }
.rp-sec h4 svg { width: 20px; height: 20px; flex: none; }
.rp-sec .sum { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.rp-flags, .rp-pts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.rp-flags li, .rp-pts li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.rp-pts li { grid-template-columns: 1fr auto; }
.rp-pts li::before { content: none; }
.rp-flags li { color: var(--black); }
.rp-flags .fl { color: var(--red-fg); font-size: 13px; }
.rp-flags { background: var(--red-bg); border-radius: 6px; padding: 2px 12px; border: 1px solid #F3C6CB; }
.rp-flags li:first-child { border-top: 0; }
.rp-flags li { border-top-color: #F3C6CB; }
.linkbtn { background: none; border: 0; padding: 0; margin-top: 8px; color: var(--purple); font-size: 13.5px; }
.linkbtn:hover { text-decoration: underline; }
.muted { color: var(--muted) !important; }

/* ---------- Step 4 handoff ---------- */
.handoff { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.handoff-ob { flex: 1 1 300px; max-width: 360px; }
.handoff-ob .ob { max-width: none; }
.handoff-copy { height: 50px; border-radius: 999px; padding: 0 20px; }

@media (max-width: 560px) {
  .rp-flags li { grid-template-columns: auto 1fr; } .rp-flags li .cite { grid-column: 2; }
  .rp-pts li { grid-template-columns: 1fr; gap: 4px; }
  .rp-overview dl { grid-template-columns: 1fr 1fr; }
}

/* ---------- More hero background options ---------- */
/* 6 · Dots: fine dot grid fading down, warm glow top left */
[data-bg="dots"] .hero { background: radial-gradient(55% 70% at 0% 0%, rgba(251,238,35,.45) 0%, rgba(251,238,35,0) 70%), #fff; }
[data-bg="dots"] .hero::before { background-image: radial-gradient(rgba(11,11,11,.16) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, transparent 70%); }

/* 7 · Horizon: white sky, a wide yellow sunrise glowing up from behind the steps */
[data-bg="horizon"] .hero { background: radial-gradient(120% 60% at 50% 100%, rgba(251,238,35,.55) 0%, rgba(255,244,112,.25) 35%, rgba(255,255,255,0) 70%), #fff; }
[data-bg="horizon"] .hero::before { background: linear-gradient(180deg, transparent 0%, transparent 62%, rgba(201,184,0,.18) 62.2%, transparent 62.6%); }

/* 8 · Spotlight: a soft yellow pool of light behind the headline */
[data-bg="spotlight"] .hero { background: radial-gradient(38% 30% at 42% 10%, rgba(251,238,35,.6) 0%, rgba(251,238,35,.18) 50%, rgba(251,238,35,0) 100%), #fff; }

/* 9 · Paper: warm off-white with grain and thin ruled lines */
[data-bg="paper"] .hero { background: #FBFAF4; }
[data-bg="paper"] .hero::before { opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), repeating-linear-gradient(180deg, transparent 0 39px, rgba(201,184,0,.12) 39px 40px); }

/* 10 · Mesh: yellow, lavender and white blended like a soft mesh gradient */
[data-bg="mesh"] .hero { background:
  radial-gradient(40% 50% at 15% 10%, rgba(251,238,35,.7) 0%, rgba(251,238,35,0) 70%),
  radial-gradient(35% 45% at 85% 5%, rgba(196,197,254,.75) 0%, rgba(196,197,254,0) 70%),
  radial-gradient(45% 40% at 70% 55%, rgba(255,244,112,.4) 0%, rgba(255,244,112,0) 70%),
  radial-gradient(40% 40% at 10% 70%, rgba(196,197,254,.35) 0%, rgba(196,197,254,0) 70%),
  #fff; }
.fbody { min-width: 0; }
.cite { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rp-flags li, .rp-pts li { min-width: 0; }
.rp-flags .tx, .rp-pts .tx, .rp-overview dd { overflow-wrap: anywhere; }

/* Stacked agent logos on the dropdown trigger */
.ob-logos { display: flex; gap: 0; align-items: center; }
.ob-logos img { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(11,11,11,.18); position: relative; }
.ob-logos img + img { margin-left: -9px; }
.ob-logos img:nth-child(1) { z-index: 3; } .ob-logos img:nth-child(2) { z-index: 2; } .ob-logos img:nth-child(3) { z-index: 1; }
.ob-right { gap: 10px; }
.resp-actions .ob-logos img, .handoff .ob-logos img { width: 24px; height: 24px; }
[data-bg="dark"] .ob-logos img { box-shadow: 0 0 0 2px #15171c, 0 1px 3px rgba(0,0,0,.4); }
@media (max-width: 560px) { .ob-logos img { width: 22px; height: 22px; } .ob-logos img + img { margin-left: -7px; } }
.ob-logos img { width: 28px; height: 28px; padding: 4px; box-sizing: border-box; object-fit: contain; border-radius: 50%; background: #fff; border: 1px solid #E3E4E8; box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(11,11,11,.10); }
.ob-logos img + img { margin-left: -10px; }
.handoff .ob-logos img { width: 26px; height: 26px; }
@media (max-width: 560px) { .ob-logos img { width: 24px; height: 24px; padding: 3px; } .ob-logos img + img { margin-left: -8px; } }

.try button { display: inline-flex; align-items: center; gap: 6px; }
.try button img { width: 14px; height: 14px; border-radius: 3px; flex: none; }

/* ---------- Step 2: compact area chips ---------- */
.areas { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
.area { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--white); text-align: left; }
.area .ai { width: 28px; height: 28px; margin: 0; border-radius: 6px; display: grid; place-items: center; background: var(--surface); flex: none; }
.area .ai svg { width: 17px; height: 17px; }
.area b { margin: 0; font: 500 14.5px/1.2 var(--sans); color: var(--black); white-space: nowrap; }
.area .tick { position: static; width: 16px; height: 16px; border-radius: 4px; margin-left: 4px; flex: none; }
.area .tick svg { width: 10px; height: 10px; }
.area[aria-pressed="true"] { border-color: var(--black); box-shadow: none; }
.area[aria-pressed="true"] .ai { background: #FFFBD6; box-shadow: none; }
.area:hover { border-color: #cfd1d6; }
.area[aria-pressed="true"]:hover { border-color: var(--black); }
@media (max-width: 560px) { .areas { gap: 6px; } .area b { font-size: 14px; } }
@media (max-width: 560px) { .area { gap: 7px; padding: 5px 7px 5px 5px; } .area .ai { width: 24px; height: 24px; } .area .ai svg { width: 15px; height: 15px; } .area b { font-size: 13.5px; } .area .tick { margin-left: 2px; } }
.area[aria-pressed="true"] .ai { background: var(--surface); }
/* Primary buttons in black instead of purple */
.btn-primary, .go { background: var(--black); color: #fff; }
.btn-primary:hover, .go:hover { background: #2A2F3A; }
.go:disabled { background: var(--black); opacity: .25; }

/* ---------- One typeface: DM Sans everywhere (no mono) ---------- */
:root { --mono: var(--sans); }
.co-news .lbl, .rp-k { text-transform: none; letter-spacing: 0; font: 600 13px/1.2 var(--sans); color: var(--ink); }
.rp-verdict .rp-k { color: #6b5d00; }
.co-top .dm, .ac .dm, .cite, .co-news a .s, .ld-meta { letter-spacing: 0; }

/* Grid background: a subtle yellow glow only around the hero, tapering off below */
[data-bg="grid"] .hero { background: radial-gradient(900px 520px at 82% -140px, rgba(251,238,35,.34) 0%, rgba(255,244,112,.12) 45%, rgba(255,255,255,0) 75%), #fff; }
.loading { padding: 18px 20px; }

/* Squarer corners on rectangular surfaces */
.field, .ac, .cocard, .locked-card, .area, .loading, .rp-verdict, .rp-overview, .rp-sec, .try button, .run, .btn:not(.handoff-copy), .go, .area .ai, .co-top img, .ac img { border-radius: 4px; }
.ac li { border-radius: 3px; }

/* ---------- Wider page: steps stay narrow, findings use the full width ---------- */
.hero > .wrap.narrow { max-width: 1120px; }
.hero-head, #s1 .fcontent, #s2 .fcontent, #s4 .fcontent, .fstep .locked-card { max-width: 760px; }

/* ---------- Findings: bento report ---------- */
.loading { max-width: 760px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.b-card { background: var(--white); border: 1px solid var(--hairline); border-radius: 4px; padding: 14px 16px; min-width: 0; animation: rise .35s var(--ease-out) both; }
.b-k { font: 600 12px/1.2 var(--sans); color: var(--muted); margin-bottom: 8px; }
.b-verdict { grid-column: span 8; }
.b-verdict p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--black); text-wrap: pretty; }
.b-overview { grid-column: span 4; }
.b-overview .b-what { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.b-overview dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.b-overview dt { font-size: 11.5px; color: var(--muted); }
.b-overview dd { margin: 1px 0 0; font-size: 13px; font-weight: 500; color: var(--black); overflow-wrap: anywhere; }
.b-area { grid-column: span 6; display: flex; flex-direction: column; max-height: 440px; padding: 0; }
.b-area.wide { grid-column: span 12; }
.b-area h4 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px 10px; font: 500 14.5px/1.3 var(--display); color: var(--black); border-bottom: 1px solid var(--hairline); flex: none; }
.b-area h4 svg { width: 16px; height: 16px; flex: none; }
.b-meta { margin-left: auto; font: 400 11.5px var(--sans); color: var(--muted); white-space: nowrap; }
.b-area > .muted { padding: 12px 16px; margin: 0; font-size: 13px; }
.b-body { overflow-y: auto; padding: 10px 16px 14px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d6d8dc transparent; }
.b-sum { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.b-list { list-style: none; margin: 4px 0 0; padding: 0; }
.b-list li { display: grid; grid-template-columns: 12px 1fr; gap: 6px; padding: 5px 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); border-top: 1px solid #F1F2F4; }
.b-list li:first-child { border-top: 0; }
.b-list .dot { width: 4px; height: 4px; border-radius: 50%; background: #B9BDC4; margin: 8px 0 0 3px; }
.b-flags li { color: var(--black); }
.b-flags .fl { color: var(--red-fg); font-size: 11px; line-height: 19px; }
.b-flags + .b-list { margin-top: 6px; border-top: 1px solid var(--hairline); padding-top: 4px; }

/* Source dot + tooltip */
.sd { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 1px solid #DCDEE2; vertical-align: -3px; margin-left: 3px; transition: border-color .15s, transform .15s var(--ease-out); }
.sd img { width: 9px; height: 9px; border-radius: 2px; }
.sd:hover, .sd:focus-visible { border-color: var(--black); transform: scale(1.12); outline: none; }
.sd-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--black); color: #fff; font: 500 11.5px/1 var(--sans); padding: 6px 8px; border-radius: 4px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

@media (max-width: 860px) {
  .b-verdict, .b-overview, .b-area { grid-column: span 12; }
}
@media (max-width: 560px) {
  .b-area { max-height: none; }
  .b-body { overflow: visible; }
}

/* Plain background: no grid, no glow */
[data-bg="plain"] .hero { background: #fff; }
[data-bg="plain"] .hero::before, [data-bg="plain"] .hero::after { content: none; }
/* Bento: spans come from inline styles; stack on small screens */
@media (max-width: 860px) { .bento > .b-card { grid-column: span 12 !important; } }
.b-overview dl { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
/* Step 4: actions + sign-up CTA */
.handoff-copy { display: inline-flex; align-items: center; gap: 8px; height: 50px; }
.handoff-copy svg { width: 16px; height: 16px; }
.signup-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--white); max-width: 760px; }
.signup-cta b { display: block; font: 500 15px/1.3 var(--display); color: var(--black); margin-bottom: 2px; }
.signup-cta span { font-size: 13.5px; color: var(--body); }
.signup-cta .btn { height: 40px; padding: 0 18px; flex: none; }
/* Bento: slightly stronger separation, slightly larger titles */
.b-card { border-color: #DCDEE2; }
.b-area h4 { border-bottom-color: #E4E6E9; font-size: 16px; gap: 9px; padding: 13px 16px 11px; }
.b-area h4 svg { width: 18px; height: 18px; }
.b-k { font-size: 13.5px; }

/* Credit risk call badge (in the Credit view card) */
.b-verdict .b-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.risk { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--sans); padding: 5px 9px 5px 7px; border-radius: 4px; border: 1px solid; }
.risk-bars { display: inline-flex; gap: 2px; }
.risk-bars i { width: 4px; height: 12px; border-radius: 1px; background: #E2E4E8; }
.risk-1 { color: #1E7A3C; border-color: #BFE3C9; background: #F1FAF3; } .risk-1 .risk-bars i.on { background: #2FA45A; }
.risk-2 { color: #7A6100; border-color: #EBDD9A; background: #FDF9E6; } .risk-2 .risk-bars i.on { background: #C9A800; }
.risk-3 { color: #A04A00; border-color: #F2CDA8; background: #FEF4EA; } .risk-3 .risk-bars i.on { background: #E07A1F; }
.risk-4 { color: #B3202D; border-color: #F3C2C7; background: #FDEEF0; } .risk-4 .risk-bars i.on { background: #D33A48; }

/* ---------- Hero animation header: paper gradient + tilted board ---------- */
.hero-visual { position: relative; height: 440px; margin: 0 0 40px; border-radius: 10px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 80% at 15% 20%, #FFF6C8 0%, rgba(255,246,200,0) 60%),
    radial-gradient(55% 75% at 85% 15%, #ECEBFF 0%, rgba(236,235,255,0) 62%),
    radial-gradient(70% 90% at 60% 100%, #FBEFE2 0%, rgba(251,239,226,0) 60%),
    #F7F5EF; }
.hero-visual::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .45; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .32  0 0 0 0 .28  0 0 0 .42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hv-stage { position: absolute; inset: 0; z-index: 1; perspective: 1500px; perspective-origin: 50% 0%; }
.hv-plane { position: absolute; left: 4%; right: 4%; top: 26px; bottom: -40px; border-radius: 14px; background: #FDFDFC;
  background-image: radial-gradient(rgba(11,11,11,.09) 1px, transparent 1.2px); background-size: 16px 16px;
  box-shadow: 0 30px 70px rgba(40,36,20,.16), 0 2px 6px rgba(40,36,20,.06), inset 0 0 0 1px rgba(11,11,11,.05);
  transform: rotateX(17deg) rotateZ(-2deg); transform-origin: 50% 0%; }
.hv-plane canvas { position: absolute; inset: 8px 8px 40px; width: calc(100% - 16px); height: calc(100% - 48px); }
@media (max-width: 860px) { .hero-visual { height: 320px; } .hv-plane { left: 2%; right: 2%; } }
@media (max-width: 560px) { .hero-visual { height: 230px; margin-bottom: 28px; border-radius: 8px; } .hv-plane { top: 18px; bottom: -40px; transform: rotateX(18deg) rotateZ(-2deg); } .hv-plane canvas { inset: 6px 4px 40px; width: calc(100% - 8px); height: calc(100% - 46px); } }

/* ---------- Hero: text left, abstract halftone animation right (no background) ---------- */
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 32px; align-items: center; margin-bottom: 8px; }
.hero-top .hero-head { max-width: 620px; }
.hero-visual { height: 420px; margin: 0; background: none; border-radius: 0; overflow: visible; }
.hero-visual::before { content: none; }
.hero-visual canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 960px) { .hero-top { grid-template-columns: 1fr; gap: 8px; } .hero-visual { order: -1; height: 300px; } }
@media (max-width: 560px) { .hero-visual { height: 240px; } }

.hero-visual { height: 380px; }
@media (max-width: 960px) { .hero-visual { height: 280px; } }
@media (max-width: 560px) { .hero-visual { height: 230px; } }

/* Sign-up: just the button */
.signup-cta { display: block; padding: 0; border: 0; background: none; margin-top: 14px; }

/* ---------- Step 2: who is the check for ---------- */
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.role { text-align: left; background: var(--white); border: 1px solid var(--hairline); border-radius: 4px; padding: 11px 14px; transition: border-color .16s, background .16s; }
.role b { display: block; font: 500 14.5px/1.3 var(--display); color: var(--black); }
.role em { display: block; font-style: normal; font-size: 12px; line-height: 1.45; color: var(--body); margin-top: 6px; }
.role:hover { border-color: #cfd1d6; }
.role[aria-pressed="true"] { border-color: var(--black); background: #FAFAF7; box-shadow: inset 0 0 0 1px var(--black); }
.role:disabled { cursor: default; }
.role-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; font-size: 13px; }
.role-alt .linkbtn { margin: 0; font-size: 13px; text-decoration: none; }
@media (max-width: 560px) { .roles { grid-template-columns: 1fr; } }

/* Lens-specific report pieces */
.b-rec { margin-top: 14px; padding: 10px 12px; background: #F7F7F4; border-radius: 4px; }
.b-rec .b-k { margin-bottom: 4px; }
.b-rec p { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; color: var(--black); }
.b-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ECEDEF; }
.b-cases p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.b-cal li { grid-template-columns: 74px 1fr; }
.b-cal .when { font: 600 11.5px/1.5 var(--sans); color: var(--black); background: #F4F5F7; border-radius: 3px; padding: 1px 6px; align-self: start; text-align: center; white-space: nowrap; }
.b-questions ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--black); }
.b-overview dd { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .b-cases { grid-template-columns: 1fr; } }

/* ---------- Hero background: yellow fading to transparent (default; ?bg=plain to compare) ---------- */
[data-bg="yellow"] { background: linear-gradient(180deg, rgba(242,213,0,.42) 0px, rgba(242,213,0,.3) 70px, rgba(242,213,0,.17) 150px, rgba(242,213,0,.07) 230px, rgba(242,213,0,0) 300px) no-repeat, #fff; }
[data-bg="yellow"] .hero { background: transparent; }
[data-bg="yellow"] .hero::before, [data-bg="yellow"] .hero::after { content: none; }
[data-bg="yellow"] .nav:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- background options under review (?bg=<name>; switch them from the demo hub) ---------- */
body[data-bg^="y-"] .hero, body[data-bg^="w-"] .hero { background: transparent; }
body[data-bg^="y-"] .hero::before, body[data-bg^="y-"] .hero::after, body[data-bg^="w-"] .hero::before, body[data-bg^="w-"] .hero::after { content: none; }
body[data-bg^="y-"] .nav:not(.scrolled), body[data-bg^="w-"] .nav:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-bg="y-soft"] { background: linear-gradient(180deg, rgba(242,213,0,.42) 0px, rgba(242,213,0,.3) 70px, rgba(242,213,0,.17) 150px, rgba(242,213,0,.07) 230px, rgba(242,213,0,0) 300px) no-repeat, #fff; }
[data-bg="y-strong"] { background: linear-gradient(180deg, rgba(242,213,0,.55) 0px, rgba(242,213,0,.42) 110px, rgba(242,213,0,0) 220px) no-repeat, #fff; }
[data-bg="y-long"] { background: linear-gradient(180deg, rgba(251,238,35,.42) 0px, rgba(251,238,35,.16) 300px, rgba(251,238,35,0) 640px) no-repeat, #fff; }
[data-bg="y-pale"] { background: linear-gradient(180deg, rgba(251,238,35,.22) 0px, rgba(251,238,35,.08) 220px, rgba(251,238,35,0) 420px) no-repeat, #fff; }
[data-bg="y-band"] { background: linear-gradient(180deg, #F2D500 0px, #F2D500 5px, rgba(242,213,0,.2) 5px, rgba(242,213,0,.06) 160px, rgba(242,213,0,0) 260px) no-repeat, #fff; }
[data-bg="y-center"] { background: radial-gradient(1100px 440px at 50% -90px, rgba(242,213,0,.42), rgba(242,213,0,0) 70%) no-repeat, #fff; }
[data-bg="y-corner"] { background: radial-gradient(900px 560px at 0% 0%, rgba(242,213,0,.36), rgba(242,213,0,0) 70%) no-repeat, #fff; }
[data-bg="y-right"] { background: radial-gradient(640px 520px at 76% 230px, rgba(242,213,0,.30), rgba(242,213,0,0) 70%) no-repeat, #fff; }
[data-bg="y-sunrise"] { background: linear-gradient(180deg, rgba(242,213,0,.34) 0px, rgba(255,176,0,.10) 190px, rgba(255,176,0,0) 360px) no-repeat, #fff; }
body[data-bg="y-dots"] .hero::before, body[data-bg="y-dots-fine"] .hero::before, body[data-bg="y-dots-corner"] .hero::before { content: ""; }
[data-bg="y-dots"] .hero::before { background-image: radial-gradient(rgba(214,182,0,.55) 1.2px, transparent 1.6px); background-size: 11px 11px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, transparent 62%); }
[data-bg="y-dots-fine"] .hero::before { background-image: radial-gradient(rgba(214,182,0,.5) .9px, transparent 1.2px); background-size: 6px 6px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%); }
[data-bg="y-dots-corner"] .hero::before { background-image: radial-gradient(rgba(214,182,0,.6) 1.3px, transparent 1.7px); background-size: 10px 10px; -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%); }
[data-bg="w-cream"] { background: linear-gradient(180deg, #FFF9DC 0px, #FFFDF3 260px, #fff 560px) no-repeat, #fff; }
[data-bg="w-grey"] { background: linear-gradient(180deg, #F2F2EF 0px, #F8F8F6 240px, #fff 480px) no-repeat, #fff; }