:root {
  --ink: #102a43;
  --muted: #587087;
  --blue: #5841d8;
  --blue-dark: #30206f;
  --cyan: #08a9c5;
  --mint: #ddf7ed;
  --green: #087b55;
  --pink: #ef4f91;
  --yellow: #ffd45c;
  --coral: #ff795e;
  --paper: #ffffff;
  --mist: #f3f7fa;
  --line: #dce6ee;
  --shadow: 0 24px 70px rgba(18, 52, 77, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fbfdff; font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
.safety-strip { min-height: 30px; padding: 5px 5vw; display: flex; justify-content: center; gap: 40px; background: #271758; color: #f5efff; font-size: 11px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.safety-strip span + span::before { content: "•"; margin-right: 40px; color: #68b8ef; }
.site-header { height: 72px; padding: 0 clamp(22px, 6vw, 90px); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); position: relative; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-size: 17px; letter-spacing: -.02em; }
.brand-mark { width: 32px; height: 32px; position: relative; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg, var(--blue), #0c86c9); box-shadow: 0 7px 18px rgba(7,94,181,.23); transform: rotate(-4deg); }
.brand-mark i { position: absolute; width: 16px; height: 3px; background: white; border-radius: 3px; }
.brand-mark i:nth-child(2) { transform: rotate(60deg); }.brand-mark i:nth-child(3) { transform: rotate(-60deg); }
.site-header nav { display: flex; align-items: center; gap: 28px; }
.site-header nav a { text-decoration: none; font-size: 13px; font-weight: 700; color: #49637a; }
.version-pill { padding: 6px 10px; background: var(--mist); color: var(--blue); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hero { min-height: 620px; padding: 82px clamp(22px, 7vw, 105px) 74px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 6vw; overflow: hidden; position: relative; background: radial-gradient(circle at 10% 10%, #fff1a9 0, transparent 24%), radial-gradient(circle at 90% 22%, #d9d2ff 0, transparent 34%), radial-gradient(circle at 78% 90%, #c8f4ea 0, transparent 27%), linear-gradient(145deg,#fff 35%,#f8f5ff); border-bottom: 1px solid var(--line); }
.hero::before,.hero::after { content:""; position:absolute; border-radius:50%; opacity:.7; pointer-events:none; animation: drift 8s ease-in-out infinite; }.hero::before{width:36px;height:36px;left:3.5%;top:19%;background:var(--pink);box-shadow:50px 390px 0 -9px var(--cyan),92vw 330px 0 -5px var(--yellow)}.hero::after{width:18px;height:18px;right:4%;top:14%;background:var(--coral);animation-delay:-3s}
.hero-copy { max-width: 660px; position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 26px; height: 2px; background: var(--cyan); }
.hero h1 { margin: 18px 0 20px; max-width: 680px; color: #0c2943; font-size: clamp(42px, 5.2vw, 70px); line-height: 1.03; letter-spacing: -.055em; font-weight: 760; }
.hero h1 em { color: transparent; font-style: normal; background: linear-gradient(100deg,var(--blue),var(--pink),var(--coral)); background-clip:text; -webkit-background-clip:text; }
.hero-copy > p { max-width: 600px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 12px; }
.button { min-height: 46px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; border: 0; border-radius: 8px; text-decoration: none; font-weight: 750; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: linear-gradient(135deg, var(--blue), #0877ca); color: white; box-shadow: 0 12px 27px rgba(7,94,181,.25); }
.button.quiet { background: transparent; color: var(--ink); }
.play { width: 27px; height: 27px; display: grid; place-items: center; background: white; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); font-size: 9px; box-shadow: 0 5px 12px rgba(19,58,84,.08); }
.trust-row { margin-top: 34px; padding-top: 20px; display: flex; gap: 25px; border-top: 1px solid var(--line); color: #5b7081; font-size: 12px; font-weight: 650; }
.trust-row b { margin-right: 5px; color: var(--green); }
.hero-joke { width:max-content; max-width:100%; margin-top:18px; padding:9px 14px 9px 8px; display:flex; align-items:center; gap:7px; color:#5d4267; background:rgba(255,255,255,.72); border:1px solid #eadcf0; border-radius:999px; box-shadow:0 8px 20px rgba(75,45,105,.07); font-size:11px; transform:rotate(-1deg) }.hero-joke span{width:26px;height:26px;display:grid;place-items:center;background:#ffe7f1;border-radius:50%}
.hero-visual { min-height: 430px; position: relative; display: grid; place-items: center; perspective: 1200px; }
.glow { position: absolute; width: 520px; height: 360px; background: radial-gradient(ellipse, rgba(44,173,215,.18), transparent 68%); filter: blur(20px); }
.mini-window { width: min(100%, 535px); padding: 0 18px 18px; position: relative; background: rgba(255,255,255,.96); border: 1px solid rgba(194,180,230,.8); border-radius: 20px; box-shadow: 0 35px 90px rgba(73,49,126,.22); transform: rotateY(-4deg) rotateX(2deg); overflow: hidden; animation: window-float 5s ease-in-out infinite; }
.mini-top { height: 39px; margin: 0 -18px 17px; padding: 0 14px; display: flex; align-items: center; gap: 6px; background: #f3f7fa; border-bottom: 1px solid var(--line); }
.mini-top span { width: 7px; height: 7px; border-radius: 50%; background: #c8d6df; }.mini-top b { margin-left: auto; font-size: 8px; letter-spacing: .15em; color: #7990a3; }
.mini-patient { padding: 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(105deg, #f0f7fc, #fff); border: 1px solid var(--line); border-radius: 10px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; background: #d8edf9; color: var(--blue); border-radius: 10px; font-weight: 850; }.mini-patient div { display: grid; }.mini-patient strong { font-size: 12px; }.mini-patient small { color: var(--muted); font-size: 9px; }.valid-dot { margin-left: auto; width: 24px; height: 24px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 50%; font-size: 11px; }
.mini-grid { margin-top: 11px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 10px; }.mini-doc,.mini-code { min-height: 150px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }.mini-doc small,.mini-code small { color: #7590a5; font-size: 8px; font-weight: 800; letter-spacing: .09em; }.line { height: 5px; margin-top: 10px; background: #e6edf2; border-radius: 4px; }.w85{width:85%}.w70{width:70%}.w90{width:90%}.w55{width:55%}.mini-doc p { margin: 12px 0 0; font-size: 9px; color: #435c70; }.mini-doc mark { padding: 2px 3px; background: #d9f5ed; color: var(--green); border-radius: 2px; }.mini-code { display: flex; flex-direction: column; background: #f7fbfe; border-left: 3px solid var(--blue); }.mini-code strong { margin-top: 10px; color: var(--blue); font-size: 25px; }.mini-code span { font-size: 9px; font-weight: 700; }.mini-code i { margin-top: auto; color: var(--green); font-size: 8px; font-style: normal; }
.mini-quality { margin-top: 10px; padding: 9px 11px; display: flex; justify-content: space-between; background: var(--mint); color: var(--green); border-radius: 8px; font-size: 9px; }.float-card { padding: 10px 14px; position: absolute; display: flex; align-items: center; gap: 9px; background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 15px 35px rgba(24,64,91,.15); }.float-card > span { width: 28px; height: 28px; display: grid; place-items: center; background: #e7f4fb; border-radius: 8px; color: var(--blue); font-weight: 800; }.float-card div { display: grid; }.float-card b { font-size: 10px; }.float-card small { color: var(--muted); font-size: 8px; }.float-one { right: -12px; bottom: 22px; }.float-two { left: -30px; top: 30px; }
.studio-section { padding: 88px clamp(18px, 6vw, 90px); background: #f2f7fa; scroll-margin-top: 20px; }.section-heading { max-width: 1180px; margin: 0 auto 25px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }.section-heading h2,.value-section h2 { margin: 5px 0 0; font-size: clamp(29px,3.5vw,43px); line-height: 1.15; letter-spacing: -.04em; }.section-heading > p { max-width: 390px; margin: 0; color: var(--muted); }.step-label { color: var(--blue); font-size: 10px; font-weight: 850; letter-spacing: .15em; }
.generator-panel { max-width: 1180px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(22,62,88,.08); overflow: hidden; }.generator-panel fieldset { min-width: 0; margin: 0; padding: 24px 28px; border: 0; }.generator-panel fieldset + fieldset { border-top: 1px solid var(--line); }.generator-panel legend { padding: 0; color: #496174; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.generator-panel legend span { margin-right: 10px; color: var(--blue); }
.track-grid { margin-top: 15px; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.track-card { min-height: 78px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; position: relative; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border .2s, background .2s, transform .2s; }.track-card:hover { transform: translateY(-1px); }.track-card.selected { border: 2px solid var(--blue); background: #f6fbff; }.track-card input { position: absolute; opacity: 0; }.track-card > span:nth-of-type(2) { display: grid; }.track-card strong { font-size: 14px; }.track-card small { color: var(--muted); }.track-card > i { width: 17px; height: 17px; margin-left: auto; border: 1px solid #b7c9d7; border-radius: 50%; }.track-card.selected > i { border: 5px solid var(--blue); }.track-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; font-size: 20px; }.track-icon.surgery { color: var(--blue); background: #e4f1fa; }.track-icon.baby { color: #7955a6; background: #f1eafb; }
.control-row { margin-top: 15px; display: grid; grid-template-columns: minmax(280px,1.6fr) minmax(150px,.55fr) minmax(210px,.75fr); gap: 12px; align-items: end; }.select-wrap,.seed-wrap { display: grid; gap: 6px; }.select-wrap > span,.seed-wrap > span { color: #657d90; font-size: 10px; font-weight: 750; }.select-wrap select,.seed-wrap input { width: 100%; height: 49px; padding: 0 13px; color: var(--ink); background: white; border: 1px solid #cbd9e3; border-radius: 7px; outline: none; }.select-wrap select:focus,.seed-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,94,181,.1); }.seed-wrap > div { display: flex; }.seed-wrap input { border-radius: 7px 0 0 7px; }.seed-wrap button { width: 44px; border: 1px solid #cbd9e3; border-left: 0; border-radius: 0 7px 7px 0; background: #f5f8fa; color: var(--blue); cursor: pointer; }.generate-button { min-height: 49px; padding: 0 15px; display: flex; align-items: center; gap: 10px; color: white; background: linear-gradient(135deg,var(--blue),#087dca); border: 0; border-radius: 7px; cursor: pointer; box-shadow: 0 9px 22px rgba(7,94,181,.2); transition: transform .18s; }.generate-button:hover { transform: translateY(-2px); }.generate-button > span:nth-child(2) { display: grid; text-align: left; }.generate-button b { font-size: 13px; }.generate-button small { opacity: .75; font-size: 9px; }.generate-button i { margin-left: auto; font-style: normal; font-size: 18px; }.spark { font-size: 17px; }.generator-foot { min-height: 39px; padding: 0 28px; display: flex; align-items: center; gap: 24px; background: #f8fafc; border-top: 1px solid var(--line); color: #718798; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.generator-foot span:first-child { margin-right: auto; color: var(--green); }.generator-foot i { width: 6px; height: 6px; margin-right: 7px; display: inline-block; background: #20a779; border-radius: 50%; box-shadow: 0 0 0 3px #d7f2e7; }
.loading-panel,.error-panel { max-width: 1180px; min-height: 145px; margin: 22px auto 0; padding: 30px; display: flex; align-items: center; gap: 25px; position: relative; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }.loader-orbit { width: 62px; height: 62px; display: grid; place-items: center; position: relative; border: 1px solid #cfe4f1; border-radius: 50%; }.loader-orbit span { position: absolute; inset: 5px; border: 2px solid transparent; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }.loader-orbit i { color: var(--cyan); font-style: normal; }.loading-panel strong { font-size: 18px; }.loading-panel p { margin: 4px 0 0; color: var(--muted); }.loading-track { height: 3px; position: absolute; left: 0; right: 0; bottom: 0; background: #e9f0f5; }.loading-track span { height: 100%; display: block; background: linear-gradient(90deg,var(--blue),var(--cyan)); animation: load 1.2s ease-in-out infinite; }
@keyframes spin{to{transform:rotate(360deg)}}@keyframes load{0%{width:0}70%{width:85%}100%{width:100%}}
.episode-shell { max-width: 1180px; margin: 22px auto 0; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; animation: reveal .45s ease both; }.episode-toolbar { min-height: 48px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; background: #092e53; color: #d7e7f4; }.episode-toolbar > div { display: flex; align-items: center; gap: 12px; }.synthetic-chip { padding: 4px 8px; background: #0d8e8f; color: white; border-radius: 4px; font-size: 8px; font-weight: 900; letter-spacing: .14em; }.episode-toolbar #episode-id { font: 10px ui-monospace,SFMono-Regular,Menlo,monospace; }.icon-button { padding: 5px 9px; color: #d7e7f4; background: transparent; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; font-size: 9px; cursor: pointer; }.button.export { min-height: 32px; padding: 0 10px; gap: 7px; color: #07365d; background: white; border-radius: 5px; font-size: 10px; }
.episode-hero { padding: 23px 26px; display: grid; grid-template-columns: auto 1fr minmax(230px,.75fr) auto; gap: 15px; align-items: center; background: linear-gradient(110deg,#f8fcff,#eef7fc); border-bottom: 1px solid var(--line); }.patient-avatar { width: 58px; height: 58px; display: grid; place-items: center; color: white; background: linear-gradient(145deg,var(--blue),var(--cyan)); border-radius: 12px; font-size: 22px; font-weight: 850; box-shadow: 0 10px 20px rgba(7,94,181,.18); }.patient-main > span,.episode-title > span { color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }.patient-main h2 { margin: 1px 0; font-size: 21px; letter-spacing: -.025em; }.patient-main p,.episode-title small { margin: 0; color: var(--muted); font-size: 11px; }.episode-title { padding-left: 20px; display: grid; border-left: 1px solid var(--line); }.episode-title strong { font-size: 14px; }.validation-seal { padding: 10px 13px; display: flex; align-items: center; gap: 9px; background: var(--mint); border: 1px solid #bce8d6; border-radius: 8px; color: var(--green); }.validation-seal > span { width: 25px; height: 25px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 50%; }.validation-seal div { display: grid; }.validation-seal strong { font-size: 11px; }.validation-seal small { font-size: 8px; }
.quality-grid { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); }.quality-metric { min-height: 73px; padding: 15px 20px; display: flex; align-items: center; gap: 11px; }.quality-metric + .quality-metric { border-left: 1px solid var(--line); }.metric-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--blue); background: #eaf4fb; border-radius: 8px; font-weight: 850; }.quality-metric div { display: grid; }.quality-metric strong { font-size: 14px; }.quality-metric small { color: var(--muted); font-size: 9px; }.episode-tabs { padding: 0 25px; display: flex; gap: 28px; border-bottom: 1px solid var(--line); }.episode-tabs button { min-height: 49px; padding: 0 2px; position: relative; color: #6b7f90; background: transparent; border: 0; font-size: 11px; font-weight: 750; cursor: pointer; }.episode-tabs button.active { color: var(--blue); }.episode-tabs button.active::after { content:""; height: 2px; position: absolute; left: 0; right: 0; bottom: -1px; background: var(--blue); }.episode-view { display: none; }.episode-view.active { display: block; }.dossier-layout { display: grid; grid-template-columns: minmax(0,1.48fr) minmax(300px,.72fr); }.dossier-layout > div { padding: 24px; background: #fafcfd; }.summary-card { padding: 18px 20px; margin-bottom: 14px; background: #eaf4fb; border-left: 3px solid var(--blue); border-radius: 7px; }.summary-card > span,.document-card header span,.coding-head span,.procedure-note span { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .12em; }.summary-card p { margin: 6px 0 0; color: #344f64; font-size: 12px; }.document-stack { display: grid; gap: 11px; }.document-card { background: white; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }.document-card header { padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf2f5; }.document-card h4 { margin: 2px 0 0; font-size: 13px; }.document-card header small { color: var(--muted); font-size: 8px; }.passages { padding: 12px 15px; }.passage { margin: 0; padding: 7px 9px; color: #415a6c; border: 1px solid transparent; border-radius: 5px; font-size: 11px; transition: all .25s; scroll-margin-top: 100px; }.passage + .passage { margin-top: 3px; }.passage.highlight { color: #0b4b3b; background: #e3f8ef; border-color: #8fd3b7; box-shadow: 0 4px 13px rgba(22,129,92,.11); }.passage.highlight::before { content: "EVIDENCE"; margin-right: 8px; color: var(--green); font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.coding-panel { padding: 24px 20px; border-left: 1px solid var(--line); }.coding-head { display: flex; justify-content: space-between; }.coding-head h3 { margin: 2px 0 0; font-size: 17px; }.coding-head > b { width: 27px; height: 27px; display: grid; place-items: center; color: var(--blue); background: #e8f3fa; border-radius: 50%; font-size: 10px; }.coding-help { margin: 7px 0 15px; color: var(--muted); font-size: 10px; }.code-card { width: 100%; margin-top: 9px; padding: 13px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; text-align: left; background: white; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 7px; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }.code-card:hover,.code-card.active { transform: translateX(-2px); border-color: #79b8df; box-shadow: 0 8px 20px rgba(25,70,101,.1); }.code-system { color: #718798; font-size: 7px; font-weight: 850; letter-spacing: .08em; writing-mode: vertical-rl; transform: rotate(180deg); }.code-main { display: grid; }.code-main strong { color: var(--blue); font-size: 19px; }.code-main span { font-size: 10px; font-weight: 750; }.code-main small { margin-top: 4px; color: var(--muted); font-size: 8px; }.evidence-count { align-self: center; padding: 4px 6px; color: var(--green); background: var(--mint); border-radius: 4px; font-size: 8px; font-weight: 800; }.procedure-note { margin-top: 16px; padding: 12px; background: #f5f8fa; border-radius: 6px; }.procedure-note p { margin: 4px 0 0; color: #526a7c; font-size: 9px; }.source-note { margin-top: 13px; color: #788c9c; font-size: 8px; }.source-note a { color: var(--blue); font-weight: 750; }
.timeline { padding: 30px; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }.timeline-item { padding: 0 18px; position: relative; border-top: 2px solid #cfe0eb; }.timeline-item::before { content:""; width: 12px; height: 12px; position: absolute; top: -7px; left: 17px; background: white; border: 3px solid var(--blue); border-radius: 50%; }.timeline-item time { display: block; margin-top: 17px; color: var(--blue); font-size: 9px; font-weight: 750; }.timeline-item strong { display: block; margin: 4px 0; font-size: 12px; }.timeline-item p { margin: 0; color: var(--muted); font-size: 9px; }.quality-detail { padding: 25px; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.check-card { padding: 15px; display: flex; gap: 10px; background: #f8fbfd; border: 1px solid var(--line); border-radius: 7px; }.check-card > span { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; color: white; background: var(--green); border-radius: 50%; font-size: 9px; }.check-card strong { display: block; font-size: 11px; text-transform: capitalize; }.check-card p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }.safety-notice { min-height: 43px; padding: 10px 24px; display: flex; align-items: center; gap: 10px; color: #625526; background: #fff9e5; border-top: 1px solid #eee2b4; font-size: 9px; }.safety-notice b { padding: 3px 6px; color: #7a5d00; background: #f7e8a8; border-radius: 3px; text-transform: uppercase; }.safety-notice i { margin-left: auto; font-style: normal; }
.error-panel { display: block; color: #742a2a; border-color: #f0b8b8; }.error-panel p { color: #8b4c4c; }.error-panel button { padding: 8px 12px; background: #742a2a; color: white; border: 0; border-radius: 5px; cursor: pointer; }
.value-section { padding: 90px clamp(22px,7vw,105px); text-align: center; background: white; }.value-section > h2 { max-width: 680px; margin: 10px auto 42px; }.value-grid { max-width: 1100px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); text-align: left; gap: 22px; }.value-grid article { padding: 26px; border: 1px solid var(--line); border-radius: 11px; }.value-grid article > span { color: var(--blue); font-size: 10px; font-weight: 850; }.value-grid h3 { margin: 13px 0 8px; font-size: 17px; }.value-grid p { margin: 0; color: var(--muted); font-size: 12px; }
footer { min-height: 100px; padding: 25px clamp(22px,6vw,90px); display: flex; align-items: center; gap: 20px; color: #d8d0ef; background: #271758; }footer span { font-weight: 800; }footer p { margin: 0; }footer small { margin-left: auto; }

/* Market landscape and the slightly less beige personality layer */
.studio-section { background:linear-gradient(180deg,#f2f0ff,#f4fbfa) }.track-card.selected{background:#f5f2ff;box-shadow:0 8px 22px rgba(88,65,216,.09)}.float-one{animation:bob 4s ease-in-out infinite}.float-two{animation:bob 4.6s ease-in-out -1.5s infinite}.generate-button,.button.primary{background:linear-gradient(120deg,var(--blue),#8754db,var(--pink));background-size:180% 180%;animation:gradient-shift 5s ease infinite}.spark{animation:twinkle 1.4s ease-in-out infinite}.version-pill{background:#fff0b9;color:#705000}.track-icon.baby{color:#bd3978;background:#ffe6f2}.track-icon.surgery{color:var(--blue);background:#ebe7ff}
.confetti-layer{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}.confetti{width:10px;height:16px;position:absolute;top:-30px;border-radius:3px;animation:confetti-fall 1.8s cubic-bezier(.18,.8,.35,1) forwards}.success-toast{position:fixed;z-index:110;left:50%;bottom:28px;translate:-50% 0;padding:12px 20px;color:white;background:#271758;border:2px solid #9ee8d1;border-radius:999px;box-shadow:0 16px 40px rgba(39,23,88,.3);font-size:12px;font-weight:800;animation:toast-in .35s ease both}
.landscape-section{padding:96px clamp(22px,7vw,105px);position:relative;overflow:hidden;background:#271758;color:white;scroll-margin-top:20px}.landscape-section::before{content:"";width:420px;height:420px;position:absolute;right:-180px;top:-150px;border:80px solid rgba(255,212,92,.12);border-radius:50%}.landscape-intro{max-width:820px;position:relative}.landscape-intro .step-label{color:#82e1dc}.landscape-intro h2{margin:9px 0 14px;font-size:clamp(34px,4.5vw,58px);line-height:1.02;letter-spacing:-.05em}.landscape-intro>p{max-width:760px;margin:0;color:#d5cee8;font-size:16px}.country-grid{max-width:1180px;margin:42px auto 22px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;position:relative}.country-card{padding:25px;background:white;color:var(--ink);border-radius:20px;box-shadow:0 22px 55px rgba(10,3,35,.2);transition:transform .25s}.country-card:hover{transform:translateY(-5px) rotate(-.3deg)}.country-card.uk:hover{transform:translateY(-5px) rotate(.3deg)}.country-card.usa{border-top:7px solid var(--coral)}.country-card.uk{border-top:7px solid #39c6b0}.country-card>header{display:flex;align-items:center;gap:12px}.flag{width:51px;height:51px;display:grid;place-items:center;background:#f5f2fb;border-radius:15px;font-size:28px}.country-card header div{display:grid}.country-card header small{color:#7f7494;font-size:8px;font-weight:900;letter-spacing:.16em}.country-card h3{margin:0;font-size:21px}.availability{margin-left:auto;padding:5px 9px;border-radius:999px;font-size:8px;text-transform:uppercase;letter-spacing:.07em}.availability.good{color:#8a3b22;background:#ffe7df}.availability.gated{color:#08715f;background:#ddf8f1}.dataset-list{margin:21px 0 16px;display:grid;gap:9px}.dataset-list a{padding:13px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;color:inherit;background:#f8f7fb;border:1px solid #ebe6f2;border-radius:12px;text-decoration:none;transition:transform .18s,background .18s}.dataset-list a:hover{transform:translateX(3px);background:#f2effb}.dataset-icon{width:39px;height:39px;display:grid;place-items:center;color:white;background:var(--blue);border-radius:10px;font-size:10px;font-weight:900}.uk .dataset-icon{background:#098b79}.dataset-list div{display:grid}.dataset-list strong{font-size:12px}.dataset-list p{margin:1px 0 0;color:var(--muted);font-size:9px}.dataset-list em{padding:4px 6px;color:#65577b;background:white;border:1px solid #ddd5e8;border-radius:5px;font-size:7px;font-style:normal;font-weight:850;text-transform:uppercase}.country-take{margin:0;padding:12px 14px;color:#5f536e;background:#fff8dc;border-radius:10px;font-size:10px}.country-take b{color:#3d2a5d}.opportunity-card{max-width:1180px;margin:18px auto;display:grid;grid-template-columns:auto 1.3fr 1fr;gap:24px;align-items:center;padding:25px;background:linear-gradient(120deg,#ffcf55,#ffdf83);color:#30214a;border-radius:20px;box-shadow:0 20px 50px rgba(8,3,25,.2);position:relative}.opportunity-number{width:78px;height:78px;display:grid;place-items:center;background:#30214a;color:#ffdb72;border-radius:22px;font-size:27px;font-weight:900;transform:rotate(-4deg)}.opportunity-card>div:nth-child(2)>span{font-size:8px;font-weight:950;letter-spacing:.15em}.opportunity-card h3{margin:3px 0 4px;font-size:22px}.opportunity-card p{margin:0;font-size:11px}.opportunity-card ul{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;list-style:none}.opportunity-card li{padding:9px;background:rgba(255,255,255,.5);border-radius:9px}.opportunity-card li b,.opportunity-card li span{display:block}.opportunity-card li b{font-size:11px}.opportunity-card li span{font-size:8px}.landscape-note{max-width:1180px;margin:16px auto 0;color:#aaa0c3;font-size:9px}.reveal-on-scroll{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.reveal-on-scroll.visible{opacity:1;transform:none}.country-card:nth-child(2){transition-delay:.12s}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes bob{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes drift{50%{transform:translate(12px,18px) scale(1.08)}}@keyframes window-float{50%{transform:rotateY(-2deg) rotateX(1deg) translateY(-8px)}}@keyframes gradient-shift{50%{background-position:100% 50%}}@keyframes twinkle{50%{transform:rotate(25deg) scale(1.25)}}@keyframes confetti-fall{to{transform:translate(var(--drift),105vh) rotate(720deg);opacity:.2}}@keyframes toast-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 55px; }.hero-visual { margin-top: 20px; }.section-heading { align-items: start; flex-direction: column; gap: 12px; }.control-row { grid-template-columns: 1fr 1fr; }.generate-button { grid-column: 1/-1; }.episode-hero { grid-template-columns: auto 1fr; }.episode-title,.validation-seal { grid-column: span 1; }.quality-grid { grid-template-columns: repeat(2,1fr); }.quality-metric:nth-child(3){border-left:0;border-top:1px solid var(--line)}.quality-metric:nth-child(4){border-top:1px solid var(--line)}.dossier-layout { grid-template-columns: 1fr; }.coding-panel { border: 0; border-top: 1px solid var(--line); }.timeline { grid-template-columns: 1fr; }.timeline-item { padding: 10px 0 10px 25px; border-top: 0; border-left: 2px solid #cfe0eb; }.timeline-item::before { top: 14px; left: -7px; }.timeline-item time { margin: 0; }.value-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .safety-strip span:nth-child(n+2),.site-header nav a { display:none; }.site-header { padding: 0 18px; }.hero { padding: 48px 20px; }.hero h1 { font-size: 42px; }.hero-actions,.trust-row { align-items: stretch; flex-direction: column; }.hero-visual { min-height: 330px; }.float-card { display:none; }.studio-section { padding: 60px 12px; }.track-grid,.control-row { grid-template-columns: 1fr; }.generator-panel fieldset { padding: 20px 16px; }.generator-foot span:not(:first-child){display:none}.episode-toolbar,.episode-hero { padding-left:14px;padding-right:14px}.episode-toolbar #episode-id,.icon-button { display:none; }.episode-hero { grid-template-columns: auto 1fr; }.episode-title { padding: 12px 0 0; grid-column: 1/-1; border: 0; border-top: 1px solid var(--line); }.validation-seal { grid-column: 1/-1; }.quality-grid { grid-template-columns: 1fr 1fr; }.quality-metric { padding: 12px; }.episode-tabs { gap: 12px; overflow-x:auto; }.episode-tabs button { white-space:nowrap}.dossier-layout > div,.coding-panel { padding: 15px; }.quality-detail { grid-template-columns:1fr}.safety-notice i{display:none}.value-section{padding:65px 20px}footer{align-items:flex-start;flex-direction:column}footer small{margin:0} }
.country-card{display:flex;flex-direction:column}.country-take{margin-top:auto}
@media (max-width:900px){.country-grid{grid-template-columns:1fr}.opportunity-card{grid-template-columns:auto 1fr}.opportunity-card ul{grid-column:1/-1}.landscape-section{padding-top:75px;padding-bottom:75px}}
@media (max-width:620px){.hero-joke{width:100%;border-radius:14px}.landscape-section{padding:65px 16px}.landscape-intro h2{font-size:38px}.country-card{padding:17px;border-radius:15px}.country-card>header{align-items:flex-start}.availability{position:absolute;right:27px;margin-top:52px}.dataset-list a{grid-template-columns:auto 1fr}.dataset-list em{grid-column:2}.opportunity-card{grid-template-columns:1fr;padding:20px}.opportunity-number{width:62px;height:62px}.opportunity-card ul{grid-template-columns:1fr 1fr}.success-toast{width:calc(100% - 24px);bottom:12px;text-align:center;border-radius:14px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mini-window,.float-card,.hero::before,.hero::after,.generate-button,.spark,.confetti{animation:none!important}.reveal-on-scroll{opacity:1;transform:none}.button,.country-card,.dataset-list a{transition:none}}