:root {
  color-scheme: light;
  --ink: #19192a;
  --muted: #70758b;
  --line: #e4e6ed;
  --blue: #3324c8;
  --navy: #13112f;
  font-family: Inter, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f2f0eb; color: var(--ink); }
button { font: inherit; }
.preview { width: min(1600px, 100%); margin: 0 auto; padding: 28px 28px 22px; }
.preview-label { margin: 0 0 12px 2px; font: 600 12px Outfit, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #565966; }
.banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  min-height: 300px;
  max-height: 550px;
  overflow: hidden;
  background: #13171c url("../../../images/valideity/banner-product-cinematic-small-logo.png") center / contain no-repeat;
  isolation: isolate;
}
.screen {
  position: absolute;
  /* Match the angled glass area in the existing banner (2172 × 724 source). */
  left: 51.3%; top: 4.4%; width: 39.1%; height: 84%;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f8f9fc;
  clip-path: polygon(1% 11.6%, 98.5% 0, 100% 100%, 0 97.4%);
}
.app {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 23% 77%;
  width: 100%; height: 100%; overflow: hidden;
  background: #f8f9fc; color: #27283c;
  font-size: clamp(5px, .55vw, 10px); line-height: 1.35;
  transform-origin: 0 0;
}
.sidebar { display: flex; flex-direction: column; min-width: 0; padding: 5.5% 5%; background: #fff; border-right: 1px solid #e8e9f0; }
.brand { display: flex; align-items: center; gap: .55em; color: #202039; font-size: 1.12em; font-weight: 700; }
.brand-mark-img { width: 2em; height: 2em; object-fit: contain; flex: none; }
.workspace { display: flex; align-items: center; gap: .6em; margin: 1.6em 0 1.25em; padding: .7em .5em; border-radius: .6em; background: #f5f6fb; font-size: .82em; font-weight: 600; }
.workspace-avatar, .profile-avatar { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: .65em; background: #3d2ee2; color: white; }
.workspace small, .profile small { display: block; margin-top: .15em; color: #82869a; font-size: .78em; font-weight: 400; }
.side-nav { display: flex; flex-direction: column; gap: .28em; color: #8a8da0; }
.side-nav span { display: flex; align-items: center; gap: .65em; padding: .62em .55em; border-radius: .55em; font-size: 1.05em; }
.side-nav i { font-style: normal; }
.side-nav .selected { background: #f0efff; color: #3528ca; font-weight: 600; }
.credits, .plan { margin-top: auto; padding: .8em .65em; border-radius: .6em; background: #f3f1ff; color: #3c31c2; font-size: .9em; }
.credits span, .plan span { display: block; margin-top: .25em; color: #7c789a; }
.plan { margin-top: .55em; background: #f7f7fa; color: #56566c; }
.profile { display: flex; align-items: center; gap: .6em; margin-top: 1em; padding-top: .8em; border-top: 1px solid #ececf1; font-size: .78em; font-weight: 600; }
.profile-avatar { background: #24224a; }
.workspace-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f8f9fc; }
.topbar { z-index: 2; flex: none; padding: 2.1% 3.1% 0; background: #fff; }
.crumb { display: flex; align-items: center; gap: .55em; color: #85889c; font-size: .78em; white-space: nowrap; }
.run-heading { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: .65em; }
.run-heading small { color: #777b90; font-size: .72em; font-weight: 600; letter-spacing: .04em; }
.active-dot { margin-left: .7em; color: #17985e; font-weight: 600; }
.run-heading h1 { margin: .18em 0 0; font-size: 1.45em; line-height: 1.15; }
.top-actions, .report-actions { display: flex; align-items: center; gap: .45em; }
.top-actions button, .quiet-button { padding: .62em .7em; border: 1px solid #e0e2eb; border-radius: .45em; background: #fff; color: #3e4054; font-size: .75em; white-space: nowrap; }
.top-actions .accent-button { border-color: #3b2ce1; background: #3b2ce1; color: #fff; }
.run-meta { display: flex; gap: 1.1em; margin-top: 1em; color: #84889b; font-size: .72em; }
.tabs { display: flex; align-items: center; gap: .2em; margin-top: 1em; padding: .2em .15em 0; border-top: 1px solid #ececf2; }
.tab { padding: .7em .75em .6em; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #686c80; font-size: .77em; white-space: nowrap; }
.tab b { color: #777b8d; font-size: .85em; }
.tab.is-active { border-bottom-color: #5144ec; color: #382ed2; font-weight: 600; }
.scroll-area { position: relative; flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #d8d9e2 transparent; }
.page-view { padding: 2.4% 3.1% 3.4%; }
.score-strip { display: grid; grid-template-columns: 1.04fr 1fr 1fr 1fr; padding: 1.8% 2.3%; border-radius: .7em; background: var(--navy); color: #fff; }
.score-strip > div { display: flex; flex-direction: column; gap: .18em; padding: 0 1.25em; border-right: 1px solid rgb(255 255 255 / 12%); }
.score-strip > div:first-child { padding-left: 0; }
.score-strip > div:last-child { border: 0; }
.score-strip small { color: #b9b6d5; font-size: .72em; letter-spacing: .04em; text-transform: uppercase; }
.score-strip strong { font-size: 2em; font-weight: 700; line-height: 1.1; }
.score-strip em { color: #c6c5d7; font-size: .77em; font-style: normal; }
.score-strip em.warning { color: #f0a39b; }
.score-meter { width: 85%; height: 3px; margin-top: .1em; border-radius: 8px; background: #383656; }
.score-meter i { display: block; width: 94%; height: 100%; border-radius: 8px; background: #25c68b; }
.version-note { display: flex; align-items: flex-start; gap: .75em; margin-top: 1em; padding: .85em 1em; border: 1px solid #ececf1; border-radius: .7em; background: #fff; font-size: .8em; }
.version-note > b { color: #5448dd; }
.version-note small { display: block; margin-top: .3em; color: #84889b; font-size: .8em; }
.data-panel { margin-top: .9em; padding: .9em 1em; border: 1px solid #e9eaf0; border-radius: .7em; background: #fff; }
.data-panel h2 { margin: 0 0 .6em; font-size: 1.04em; }
.data-row { display: flex; justify-content: space-between; gap: 1.5em; padding: .7em .4em; border-top: 1px solid #eff0f4; color: #85899c; font-size: .83em; }
.data-row b { color: #3c3c4f; font-weight: 600; text-align: right; }
.lower-panel p { margin: .2em 0 .7em; color: #696d80; font-size: .88em; }
.reports { display: flex; flex-direction: column; gap: .9em; }
.report-card { padding: .85em; border: 1px solid #e5e6ed; border-radius: .8em; background: #fff; }
.report-header { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .3em .3em .85em; }
.report-header h2 { margin: 0; font-size: 1.1em; }
.report-header small { display: block; margin-top: .25em; color: #85899b; font-size: .78em; }
.report-actions button { font-size: .76em; }
.share-button { padding: .62em .8em; border: 1px solid #d9d7f7; border-radius: .45em; background: #f2f1ff; color: #3a2dcc; font-weight: 600; }
.report-summary { display: flex; align-items: center; gap: 1em; padding: 1em 1.15em; border-radius: .7em; background: var(--navy); color: #fff; }
.report-ring { display: grid; place-items: center; flex: none; width: 5.7em; height: 5.7em; border-radius: 50%; background: conic-gradient(#887cff 0 94%, rgb(255 255 255 / 15%) 94% 100%); }
.report-ring > div { display: grid; place-content: center; width: 4.65em; height: 4.65em; border-radius: 50%; background: var(--navy); text-align: center; }
.report-ring strong { font-size: 1.65em; line-height: 1; }
.report-ring small { margin-top: .3em; color: #c3c1d8; font-size: .57em; letter-spacing: .08em; }
.summary-copy { min-width: 0; }
.predicted { display: inline-block; padding: .35em .6em; border: 1px solid rgb(255 255 255 / 20%); border-radius: 999px; color: #dedbff; font-size: .68em; font-weight: 700; letter-spacing: .07em; }
.summary-copy p { margin: .6em 0 .2em; color: #dddeea; font-size: .88em; }
.summary-copy > small { color: #a8a7c4; font-size: .75em; }
.report-content { padding: 1em .45em .2em; }
.report-content h3 { margin: 0; font-size: .95em; }
.report-content p { max-width: 70ch; margin: .55em 0; color: #52566b; font-size: .84em; line-height: 1.55; }
.report-content dl { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: .5em; margin: .8em 0 0; }
.report-content dl div { padding: .65em .7em; border-radius: .5em; background: #f5f6fa; }
.report-content dt { color: #85899b; font-size: .72em; }
.report-content dd { margin: .24em 0 0; color: #33354c; font-size: .8em; font-weight: 600; }
.findings-panel h2 { display: flex; align-items: center; gap: .5em; }
.count { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #f2f1ff; color: #4033c7; font-size: .7em; }
.finding-row { display: flex; align-items: flex-start; gap: .7em; padding: .7em 0; border-top: 1px solid #ececf1; }
.finding-mark { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: #fff1e6; color: #bb6f23; font-weight: 700; }
.finding-row b, .finding-row small { display: block; }
.finding-row b { font-size: .84em; }
.finding-row small { margin-top: .2em; color: #777b8f; font-size: .74em; }
.dialog-scrim { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 5%; background: rgb(20 21 38 / 32%); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.dialog-scrim.is-open { opacity: 1; visibility: visible; }
.share-dialog { position: relative; width: min(31em, 92%); padding: 1.5em; border: 1px solid #e4e5eb; border-radius: 1em; background: #fff; box-shadow: 0 18px 60px rgb(15 15 35 / 20%); font-size: clamp(6px, .62vw, 11px); transform: translateY(10px) scale(.985); transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.is-open .share-dialog { transform: translateY(0) scale(1); }
.dialog-close { position: absolute; top: .8em; right: .8em; width: 2em; height: 2em; border: 0; border-radius: 50%; background: #f4f4f7; color: #686b7b; font-size: 1.25em; }
.dialog-heading { display: flex; align-items: flex-start; gap: .8em; padding-right: 1.6em; }
.dialog-icon { display: grid; place-items: center; flex: none; width: 2.7em; height: 2.7em; border-radius: .7em; background: #f0efff; color: #392fd1; }
.dialog-heading h2 { margin: 0; font-size: 1.15em; }
.dialog-heading p { margin: .45em 0 0; color: #6e7285; font-size: .84em; line-height: 1.45; }
.sharing-state { display: flex; align-items: center; gap: .55em; margin: 1.2em 0; padding: .8em .9em; border-radius: .6em; background: #effaf5; color: #404d48; }
.sharing-state > span { width: .7em; height: .7em; border-radius: 50%; background: #15965b; }
.sharing-state p { margin: 0; font-size: .78em; }
.link-card { padding: 1em; border: 1px solid #e4e5ec; border-radius: .65em; background: #fff; }
.link-card > b, .link-card > small { display: block; }
.link-card > b { font-size: .88em; }
.link-card > small { margin-top: .24em; color: #777b8e; font-size: .74em; line-height: 1.4; }
.link-entry { display: flex; gap: .55em; margin-top: .8em; }
.link-entry > span { flex: 1; min-width: 0; overflow: hidden; padding: .7em; border: 1px solid #e3e4eb; border-radius: .45em; background: #f8f8fb; color: #5b5f71; font-size: .8em; white-space: nowrap; }
.link-entry button { display: flex; align-items: center; gap: .45em; padding: .7em .9em; border: 0; border-radius: .45em; background: #372bd6; color: #fff; font-size: .8em; font-weight: 600; white-space: nowrap; }
.link-entry button.is-copied { background: #168553; }
.shared-with { display: flex; align-items: center; gap: .8em; margin-top: .8em; padding: .8em; border: 1px solid #e6e7ed; border-radius: .65em; }
.globe-icon { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: #f1f0ff; color: #372bd1; font-size: 1.1em; }
.shared-with b, .shared-with small { display: block; }
.shared-with b { font-size: .8em; }
.shared-with small { margin-top: .2em; color: #7c8090; font-size: .72em; }
.shared-with i { margin-left: auto; color: #158153; font-size: .75em; font-style: normal; }
.preview-controls { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; color: #55596a; font: 500 12px Inter, Arial, sans-serif; }
.preview-controls span { flex: 1; }
.preview-controls button { padding: 7px 12px; border: 1px solid #d5d4ce; border-radius: 0; background: #f7f5ef; color: #252631; cursor: pointer; }
.preview-controls button:hover { background: #e8e5dd; }
.preview-note { margin: 10px 2px 0; color: #73716b; font: 400 11px/1.5 Inter, Arial, sans-serif; }
.paused *, .paused *::before, .paused *::after { transition: none !important; }

html[data-embed="true"], html[data-embed="true"] body { width: 100%; height: 100%; overflow: hidden; background: #13171c; }
html[data-embed="true"] .preview { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; }
html[data-embed="true"] .preview-label,
html[data-embed="true"] .preview-controls,
html[data-embed="true"] .preview-note { display: none; }
html[data-embed="true"] .banner { width: min(300vh, 300vw); height: 100%; min-height: 0; max-height: none; aspect-ratio: 3 / 1; }
/* In portrait dashboard tiles, bring the full product display into the crop.
   The desktop banner remains the source composition; only its placement shifts. */
@media (max-aspect-ratio: 3 / 2) {
  html[data-embed="true"] .banner { transform: translateX(-50%); }
}

@media (max-width: 850px) {
  .preview { padding: 14px; }
  .banner { min-height: 230px; background-size: auto 100%; background-position: center; }
  .sidebar { padding: 3%; }
  .workspace { margin: 1em 0 .8em; }
  .side-nav { gap: 0; }
  .side-nav span { padding: .45em .35em; }
  .credits, .plan, .profile { display: none; }
  .topbar { padding-top: 1.6%; }
  .top-actions button:first-child, .top-actions button:nth-child(2) { display: none; }
  .run-meta, .tabs { margin-top: .65em; }
  .page-view { padding: 2%; }
  .report-content dl { grid-template-columns: 1fr 1fr; }
  .report-content dl div:last-child { display: none; }
}

@media (max-width: 560px) {
  .preview { padding: 8px; }
  .preview-label { font-size: 10px; }
  .banner { min-height: 190px; background-size: auto 100%; }
  .app { grid-template-columns: 18% 82%; font-size: 5px; }
  .sidebar { padding: 4% 3%; }
  .brand { font-size: 1em; }
  .workspace { padding: .35em; }
  .workspace small, .side-nav i, .profile { display: none; }
  .side-nav span { justify-content: center; }
  .top-actions { display: none; }
  .run-heading h1 { font-size: 1.25em; }
  .tabs { overflow: hidden; }
  .tab { padding: .6em .45em; font-size: .7em; }
  .page-view { padding: 2%; }
  .score-strip { padding: 2%; }
  .score-strip > div { padding: 0 .55em; }
  .report-summary { padding: .7em; }
  .dialog-scrim { padding: 3%; }
  .share-dialog { font-size: 5.5px; }
  .preview-controls { gap: 5px; font-size: 10px; }
  .preview-controls button { padding: 6px 9px; }
  .preview-note { font-size: 9px; }
}

@media (max-width: 480px) {
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}