/* Approved homepage composition; shared chrome and form styling live in shared.css. */
:root {
  color-scheme:dark;
  --bg:#091321;
  --surface:#102034;
  --deep:#0b1828;
  --line:#2c4057;
  --text:#f2f6fc;
  --muted:#b4c3d6;
  --accent:#bfdcff;
  --amber:#f1c087;
  --font:"Avenir Next","Segoe UI",Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6
}
button, a {
  -webkit-tap-highlight-color:transparent
}
button {
  font:inherit;
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button, a {
  touch-action:manipulation
}
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline:3px solid #c2ddff;
  outline-offset:5px
}
button:hover, a:hover {
  color:#fff
}
img {
  max-width:100%;
  height:auto;
  display:block
}
button {
  color:inherit
}
h1, h2, h3, h4, p, figure {
  margin:0
}
button {
  border:0
}
button:disabled {
  cursor:default
}
.wrap {
  width:min(1280px,calc(100% - 96px));
  margin-inline:auto
}
.skip {
  position:absolute;
  top:-100px;
  left:24px;
  z-index:20;
  background:var(--text);
  color:var(--bg);
  padding:12px 20px
}
.skip:focus {
  top:12px
}
.header {
  min-height:100px;
  display:flex;
  align-items:center;
  gap:36px;
  border-bottom:1px solid #233247
}
.brand {
  flex-shrink:0
}
.brand img {
  width:177px;
  height:auto
}
.desktop-nav {
  display:flex;
  gap:34px;
  margin-left:auto;
  margin-right:20px;
  font-size:0.875rem;
  color:#c3cede
}
.desktop-nav a:hover {
  text-decoration:underline;
  text-underline-offset:6px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:25px;
  min-height:52px;
  padding:13px 22px;
  background:var(--accent);
  color:#0a192a;
  font-weight:600;
  font-size:0.9375rem;
  border:1px solid var(--accent);
  border-radius:6px;
  transition:background .16s,box-shadow .16s
}
.button:hover {
  background:#dbebff;
  color:#0a192a;
  box-shadow:0 4px 24px #7eb9ff20
}
.button span {
  font-size:1.25rem;
  line-height:1
}
.button-small {
  min-height:44px;
  padding:9px 17px;
  font-size:0.875rem
}
.button-outline {
  background:transparent;
  color:var(--text);
  border-color:#526b89
}
.button-outline:hover {
  background:#1c354e;
  color:#fff
}
.mobile-nav {
  display:none
}
.eyebrow {
  font-size:0.75rem;
  line-height:1.6;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px
}
.intro {
  font-size:1.125rem;
  line-height:1.7;
  color:var(--muted);
  max-width:440px
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:transparent;
  padding:4px 0;
  color:#dceaff;
  font-size:0.875rem;
  font-weight:600;
  min-height:40px
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.sample {
  margin-left:auto;
  color:var(--muted);
  font-size:0.75rem;
  font-weight:400;
  white-space:nowrap
}
.small-label {
  font-size:0.75rem;
  letter-spacing:1.4px;
  line-height:1.7;
  color:var(--muted);
  font-weight:600
}
.scope {
  font-size:0.75rem;
  border:1px solid #425a76;
  padding:5px 9px;
  border-radius:4px;
  white-space:nowrap;
  color:#c8d5e6
}
.status {
  color:var(--amber);
  background:#362f29;
  border:1px solid #6a5540;
  border-radius:4px;
  padding:4px 8px;
  font-size:0.75rem;
  line-height:1.6;
  white-space:nowrap
}
.integrations {
  border-top:1px solid #2a3c51;
  padding:27px 0 33px;
  display:flex;
  align-items:center;
  gap:50px
}
.integrations p {
  font-size:0.8125rem;
  line-height:1.6;
  color:var(--muted);
  min-width:180px
}
.integrations strong {
  font-weight:500;
  color:var(--text)
}
.integrations ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex:1;
  justify-content:space-between;
  gap:30px
}
.integrations li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1rem;
  font-weight:550;
  color:#d1dcec;
  white-space:nowrap
}
.integrations img {
  opacity:.85
}
.walkthrough {
  background:#102034;
  border-top:1px solid #2a3c51;
  padding:85px 0 55px
}
.section-heading {
  display:block
}
.section-heading h2 {
  font-size:clamp(32px,3.2vw,45px);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-1.5px;
  margin-top:18px
}
.section-heading h2 span {
  color:#b4cce8
}
.section-heading>p {
  max-width:62ch;
  color:var(--muted);
  font-size:1rem;
  line-height:1.8;
  margin:18px 0 0
}
.demo-layout {
  margin-top:45px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:65px;
  align-items:start
}
.step {
  display:flex;
  align-items:flex-start;
  gap:18px;
  text-align:left;
  width:100%;
  padding:22px 18px 22px 0;
  background:transparent;
  border-top:1px solid #354b64;
  border-radius:0;
  position:relative
}
.step[aria-pressed=true] {
  padding-left:18px;
  background:#1c324b;
  border-top-color:#8fadcfff;
  border-left:2px solid var(--accent)
}
.step-number {
  color:#aec2db;
  font-size:0.8125rem;
  margin-top:4px;
  font-variant-numeric:tabular-nums
}
.step strong {
  font-size:1.0625rem;
  font-weight:550;
  display:block
}
.step small {
  font-size:0.875rem;
  color:var(--muted);
  line-height:1.7;
  display:block;
  margin-top:7px;
  max-width:260px
}
.step-arrow {
  margin-left:auto;
  color:var(--accent);
  font-size:1.375rem;
  opacity:0
}
.step[aria-pressed=true] .step-arrow {
  opacity:1
}
.example-note {
  font-size:0.75rem;
  line-height:1.8;
  color:var(--muted);
  padding:19px 0 0
}
.detail-panel {
  background:#0b1828;
  border:1px solid #3b526d;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 20px 45px #0002
}
.detail-top {
  padding:14px 25px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border-bottom:1px solid #2c4057;
  color:var(--muted);
  font-size:0.75rem;
  letter-spacing:1.5px
}
.detail-top .sample {
  letter-spacing:0
}
.detail-title {
  padding:25px 27px 23px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.detail-title h3 {
  font-size:1.75rem;
  font-weight:500;
  letter-spacing:-.7px
}
.example-stage {
  padding:0 27px 25px;
  min-height:328px
}
.example-stage h4 {
  font-size:1.125rem;
  font-weight:550;
  letter-spacing:-.3px
}
.example-stage>p {
  font-size:0.875rem;
  line-height:1.8;
  color:var(--muted);
  margin-top:7px
}
.facts {
  margin:20px 0;
  font-size:0.8125rem
}
.facts>div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  border-top:1px solid #293d53;
  padding:11px 0
}
.facts dt {
  color:var(--muted)
}
.facts dd {
  margin:0;
  text-align:right
}
.check {
  color:#aad7cf;
  margin-right:5px
}
.amber {
  color:var(--amber)
}
.callout {
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:#162c42;
  padding:14px 16px;
  border-radius:5px
}
.callout>span {
  width:20px;
  height:20px;
  flex-shrink:0;
  border:1px solid #819bb7;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:0.75rem;
  line-height:1;
  margin-top:3px;
  color:var(--accent)
}
.callout p {
  font-size:0.8125rem;
  line-height:1.7;
  color:var(--muted)
}
.callout strong {
  color:#e1ebf8;
  font-weight:500
}
.detail-footer {
  background:#102236;
  border-top:1px solid #2c4057;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 25px;
  font-size:0.75rem;
  color:var(--muted)
}
.next-step {
  background:transparent;
  padding:7px 0;
  color:var(--accent);
  font-size:0.8125rem;
  min-height:40px
}
.next-step span {
  margin-left:12px
}
.screen-reference {
  margin-top:45px;
  border-top:1px solid #354b64;
  padding-top:30px;
  display:flex;
  align-items:center;
  gap:25px
}
.screen-button {
  padding:0;
  background:transparent;
  position:relative;
  width:165px;
  flex-shrink:0;
  border:1px solid #59708b;
  border-radius:5px;
  overflow:hidden
}
.screen-button img {
  width:100%;
  height:auto
}
.screen-button>span {
  position:absolute;
  bottom:0;
  right:0;
  background:#bfdcff;
  color:#0b1828;
  padding:1px 9px;
  font-size:1.25rem
}
.screen-reference h3 {
  font-size:1.1875rem;
  font-weight:500;
  margin-top:4px
}
.screen-reference p:not(.small-label) {
  font-size:0.875rem;
  color:var(--muted);
  margin-top:3px
}
.screen-reference .button {
  margin-left:auto;
  font-size:0.875rem
}
.screen-reference .text-link {
  margin-top:4px
}
dialog {
  width:min(1600px,calc(100% - 40px));
  max-height:calc(100dvh - 40px);
  padding:0;
  color:var(--text);
  background:#0b1828;
  border:1px solid #57708c;
  border-radius:10px;
  box-shadow:0 30px 90px #0008
}
dialog::backdrop {
  background:#030b16e8
}
body:has(dialog[open]) {
  overflow:hidden
}
.dialog-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 24px
}
.dialog-header h2 {
  font-size:1.3125rem;
  font-weight:500
}
.dialog-header p, .dialog-hint {
  font-size:0.8125rem;
  color:var(--muted)
}
.screen-scroll {
  overflow:auto;
  max-height:calc(100dvh - 220px);
  background:#030b15
}
.screen-scroll img {
  width:1536px;
  max-width:none
}
.dialog-hint {
  padding:12px 24px
}
[hidden] {
  display:none!important
}
@media(max-width:1100px) {
.wrap {
    width:calc(100% - 56px)
  }
.desktop-nav {
    gap:22px;
    margin-right:0
  }
.header {
    gap:25px
  }
.scope {
    display:none
  }
.integrations {
    gap:25px
  }
.integrations ul {
    gap:20px
  }
.integrations li {
    font-size:0.875rem
  }
.integrations p {
    min-width:145px
  }
.integrations li img {
    width:22px;
    height:22px
  }
.demo-layout {
    gap:35px;
    grid-template-columns:.8fr 1.2fr
  }
.screen-reference {
    gap:20px
  }
.screen-reference .button {
    max-width:210px
  }
.screen-reference h3 {
    font-size:1.125rem
  }
}
@media(max-width:850px) {
.intro {
    max-width:530px
  }
.scope {
    display:block
  }
.integrations {
    align-items:flex-start;
    gap:25px
  }
.integrations ul {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 26px
  }
.integrations p {
    min-width:180px
  }
.integrations li {
    font-size:0.9375rem
  }
.demo-layout {
    grid-template-columns:1fr;
    gap:28px
  }
.steps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px
  }
.step {
    padding:15px 10px;
    flex-direction:column;
    gap:8px;
    height:100%
  }
.step[aria-pressed=true] {
    padding:15px 10px;
    border-left:0;
    border-top:2px solid var(--accent)
  }
.step-arrow {
    display:none
  }
.step strong {
    font-size:0.9375rem
  }
.step small {
    font-size:0.8125rem
  }
.example-note {
    grid-column:1/-1;
    padding-top:0
  }
.example-note br {
    display:none
  }
.detail-panel {
    max-width:100%;
    width:100%
  }
.example-stage {
    min-height:0
  }
.screen-reference {
    flex-wrap:wrap
  }
.screen-reference .button {
    margin-left:190px;
    max-width:none
  }
}
@media(max-width:620px) {
.wrap {
    width:calc(100% - 40px)
  }
.header {
    min-height:82px;
    gap:12px;
    flex-wrap:wrap;
    padding:18px 0
  }
.brand img {
    width:145px
  }
.header>.button {
    margin-left:auto;
    font-size:0.75rem;
    padding:9px 11px;
    gap:9px;
    min-height:42px
  }
.desktop-nav {
    display:none
  }
.mobile-nav {
    display:block;
    position:relative;
    width:100%;
    font-size:0.8125rem;
    color:var(--muted)
  }
.mobile-nav summary {
    cursor:pointer;
    width:max-content;
    min-height:30px;
    padding:3px 0
  }
.mobile-nav nav {
    display:flex;
    gap:25px;
    flex-wrap:wrap;
    padding:12px 0 5px
  }
.mobile-nav nav a {
    min-height:38px;
    display:flex;
    align-items:center
  }
.eyebrow {
    font-size:0.75rem;
    letter-spacing:1.3px
  }
.intro {
    font-size:1rem;
    line-height:1.8
  }
.button {
    font-size:0.875rem;
    gap:18px;
    padding:12px 16px
  }
.text-link {
    font-size:0.8125rem
  }
.small-label {
    font-size:0.75rem;
    letter-spacing:1px
  }
.scope {
    display:none
  }
.integrations {
    display:block;
    padding:24px 0 30px
  }
.integrations p {
    font-size:0.8125rem;
    margin-bottom:20px
  }
.integrations p br {
    display:none
  }
.integrations p strong::before {
    content:" "
  }
.integrations ul {
    gap:20px 16px
  }
.integrations li {
    font-size:0.8125rem;
    gap:9px
  }
.walkthrough {
    padding:45px 0 35px
  }
.section-heading h2 {
    font-size:2rem;
    line-height:1.23;
    letter-spacing:-1px;
    margin-top:17px
  }
.section-heading>p {
    font-size:0.9375rem;
    margin-top:18px
  }
.demo-layout {
    margin-top:28px;
    gap:22px
  }
.steps {
    display:flex;
    flex-direction:column;
    gap:0
  }
.step, .step[aria-pressed=true] {
    padding:15px 12px;
    flex-direction:row;
    gap:15px
  }
.step[aria-pressed=true] {
    border-top:1px solid #8fadcfff;
    border-left:2px solid var(--accent)
  }
.step small {
    font-size:0.8125rem;
    margin-top:4px;
    max-width:260px
  }
.step strong {
    font-size:0.9375rem
  }
.step-number {
    font-size:0.75rem
  }
.example-note {
    padding:15px 0 0;
    font-size:0.75rem
  }
.detail-top {
    padding:13px 17px;
    font-size:0.75rem;
    letter-spacing:1px
  }
.detail-top .sample {
    font-size:0.75rem
  }
.detail-title {
    padding:20px 18px
  }
.detail-title h3 {
    font-size:1.625rem
  }
.detail-title .status {
    font-size:0.75rem
  }
.example-stage {
    padding:0 18px 20px
  }
.example-stage h4 {
    font-size:1.0625rem
  }
.example-stage>p {
    font-size:0.875rem
  }
.facts {
    font-size:0.75rem
  }
.facts>div {
    gap:12px;
    align-items:flex-start
  }
.facts dt {
    flex:0 0 37%
  }
.facts dd {
    max-width:62%
  }
.callout {
    padding:12px;
    gap:9px
  }
.callout p {
    font-size:0.75rem
  }
.detail-footer {
    padding:11px 18px;
    font-size:0.75rem;
    gap:8px
  }
.next-step {
    font-size:0.75rem
  }
.next-step span {
    margin-left:6px
  }
.screen-reference {
    margin-top:30px;
    gap:20px
  }
.screen-button {
    width:100%;
    max-height:210px
  }
.screen-button img {
    width:100%;
    height:210px;
    object-fit:cover;
    object-position:top
  }
.screen-reference .button {
    margin-left:0
  }
.screen-reference .small-label {
    font-size:0.75rem
  }
.screen-reference h3 {
    font-size:1.1875rem
  }
dialog {
    width:calc(100% - 20px);
    max-height:calc(100dvh - 20px)
  }
.dialog-header {
    padding:15px;
    gap:12px
  }
.dialog-header h2 {
    font-size:1.125rem
  }
.dialog-header p {
    font-size:0.75rem
  }
.dialog-header .button {
    padding:9px 12px;
    gap:10px;
    min-height:42px
  }
.dialog-hint {
    font-size:0.75rem;
    padding:12px 15px
  }
}
@media(prefers-reduced-motion:reduce) {
html {
    scroll-behavior:auto
  }
*, *::before, *::after {
    transition:none!important;
    animation:none!important
  }
}
.status, .facts, .next-step, .text-link, .step small {
  font-size:0.875rem
}
.integrations img[src$="okta.svg"] {
  filter:brightness(0) invert(1)
}
@media(max-width:620px) {
.header>.button {
    font-size:0.875rem
  }
.facts>div {
    flex-direction:column;
    gap:3px
  }
.facts dd {
    max-width:100%;
    text-align:left
  }
.detail-footer {
    flex-wrap:wrap
  }
.header .brand img {
    width:128px
  }
}
.header { position: relative; z-index: 5; }
.ga-hero { overflow: clip; }
@media (max-width: 380px) {
.ga-hero__title { font-size: clamp(1.4rem, 7.5vw, 1.85rem); }
}
.platform-intro { padding-block: 80px 65px; }
.platform-opening { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.platform-opening h2, .partner-section h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 500; line-height: 1.18; letter-spacing: -1.3px; margin: 20px 0; }
.platform-opening h2 span, .partner-section h2 span { color: var(--accent); }
.platform-opening .intro { font-size: 1rem; max-width: 490px; }
.platform-opening .text-link { margin-top: 22px; }
.relationship-view { margin: 0; padding: 22px 0; }
.record-sources { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.record-sources > span { font-size: .875rem; border: 1px solid #455d78; border-radius: 5px; padding: 12px 5px; text-align: center; background: #112237; }
.record-connectors { height: 28px; width: 77%; margin: auto; border: 1px solid #526d8c; border-top: 0; position: relative; }
.record-connectors::before, .record-connectors::after { content: ''; position: absolute; top: 0; height: 28px; border-left: 1px solid #526d8c; }
.record-connectors::before { left: 33.33%; }
.record-connectors::after { left: 66.66%; }
.correlation-core { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 26px; padding: 20px 15px; position: relative; border: 1px solid #6587b0; border-radius: 7px; background: linear-gradient(115deg, #263f5d, #112237); }
.correlation-core::before { content: ''; height: 27px; position: absolute; bottom: 100%; left: 50%; border-left: 1px solid #526d8c; }
.correlation-core strong { font-size: 1rem; font-weight: 550; }
.correlation-core p { font-size: .875rem; color: var(--muted); margin-top: 3px; }
.record-stem { height: 25px; width: 1px; background: #526d8c; margin: auto; }
.record-outcome { text-align: center; padding: 17px 10px; border: 1px solid #334c68; border-radius: 7px; background: #0d1c2e; }
.record-outcome strong { display: block; font-size: 1.125rem; font-weight: 500; margin: 5px 0; }
.record-outcome p { font-size: .875rem; color: var(--muted); }
.relationship-view figcaption { font-size: .75rem; text-align: center; color: var(--muted); margin-top: 17px; }
.platform-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; margin-top: 52px; }
.platform-questions article { padding-top: 25px; border-top: 1px solid #435873; }
.question-number { font-size: .75rem; color: var(--accent); letter-spacing: 1.2px; }
.platform-questions h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 550; margin: 15px 0 12px; letter-spacing: -.4px; }
.platform-questions p { font-size: 1rem; color: var(--muted); line-height: 1.8; }
.platform-questions ul { list-style: none; padding: 0; margin: 22px 0 0; }
.platform-questions li { margin: 8px 0; }
.platform-questions a { font-size: .875rem; color: #d7e8fe; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.platform-questions a:hover { text-decoration: underline; text-underline-offset: 4px; }
.scenario-tabs { display: flex; gap: 32px; margin-top: 36px; border-bottom: 1px solid #455d79; }
.scenario-tabs button { background: transparent; color: var(--muted); font-size: 1rem; padding: 15px 0; border-bottom: 3px solid transparent; }
.scenario-tabs button[aria-selected=true] { color: var(--text); border-bottom-color: var(--accent); }
.example-context { min-width: 0; }
.example-context .steps { margin-top: 30px; }
.scenario-intro { display: block; }
.scenario-intro h3 { font-weight: 500; font-size: 1.25rem; }
.scenario-intro p { margin-top: 7px; font-size: .875rem; color: var(--muted); }
.scenario-intro .sample { display: inline-block; margin-top: 10px; }
#scenario-panel:focus-visible { outline-offset: 8px; }
#scenario-panel .demo-layout { margin-top: 30px; }
.example-stage { min-height: 350px; }
.partner-section { padding-block: 70px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 65px; align-items: center; border-top: 1px solid #354b64; }
.partner-section p:not(.eyebrow) { max-width: 590px; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.partner-actions { display: flex; flex-direction: column; align-items: flex-start; justify-self: end; gap: 15px; }
@media(max-width: 1100px) {
.platform-opening { gap: 40px; }
.record-sources { gap: 8px; }
.platform-questions { gap: 25px; }


}
@media(max-width: 850px) {
.platform-opening { grid-template-columns: 1fr; gap: 20px; }
.platform-opening .intro { max-width: 620px; }
.relationship-view { width: min(100%, 590px); margin-inline: auto; }
.platform-questions { grid-template-columns: 1fr; gap: 15px; margin-top: 25px; }
.platform-questions article { padding-bottom: 12px; }
.platform-questions p { max-width: 610px; }
.platform-questions ul { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 14px; }
.platform-questions li { margin: 0; }
.example-stage { min-height: 0; }
.partner-section { gap: 30px; grid-template-columns: 1fr; }
.partner-actions { justify-self: start; }
}
@media(max-width: 620px) {
.platform-intro { padding-block: 45px 30px; }
.platform-opening h2 { font-size: 2rem; }
.record-sources { gap: 5px; }
.record-sources > span { font-size: .75rem; padding-inline: 3px; }
.correlation-core { padding: 15px 10px; gap: 12px; }
.correlation-core strong { font-size: .875rem; }
.correlation-core p, .record-outcome p { font-size: .75rem; }
.platform-questions ul { display: block; }
.platform-questions a { min-height: 42px; }
.scenario-tabs { gap: 0; justify-content: space-between; }
.scenario-tabs button { font-size: .875rem; padding-inline: 4px; }
.scenario-intro h3 { font-size: 1.125rem; }
.scenario-intro .sample { white-space: normal; }
.partner-section { padding-block: 40px; }
.partner-section h2 { font-size: 2rem; }
.partner-actions .text-link { gap: 10px; }
}
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon { display: block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.core-logo { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; }
.next-step { display: inline-flex; align-items: center; gap: 10px; }
.next-step span { margin-left: 0; }
.screen-button > span { display: grid; place-items: center; padding: 9px; }
.step-arrow { padding-top: 4px; }
:root { --cta-bg: #315fd0; --cta-hover: #284eae; }
.button:not(.button-outline), .ga-hero .ga-button--primary {
  background: var(--cta-bg); border: 1px solid var(--cta-bg); color: #fff;
  border-radius: 6px; font-size: .9375rem; font-weight: 600; letter-spacing: 0;
  min-height: 48px; padding: 12px 20px; box-shadow: none;
}
.button:not(.button-outline):hover, .ga-hero .ga-button--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); box-shadow: none; }
.button:not(.button-outline):focus-visible, .ga-hero .ga-button:focus-visible { outline: 3px solid #c2ddff; outline-offset: 5px; box-shadow: none; }
.ga-hero .ga-button--secondary, .button-outline { border-radius: 6px; min-height: 48px; background: transparent; border: 1px solid #69819f; color: var(--text); box-shadow: none; }
.ga-hero .ga-button--secondary:hover, .button-outline:hover { background: #1c354e; color: #fff; }
.header .button-small { min-height: 44px; padding: 9px 16px; font-size: .875rem; }
.platform-opening h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.screen-reference { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 18px 38px; padding-top: 35px; margin-top: 40px; }
.screen-reference .screen-button { grid-row: span 2; width: 100%; max-height: none; aspect-ratio: 16 / 10; background: #061220; border-color: #526d8c; border-radius: 7px; }
.screen-reference .screen-button img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.screen-reference > div { align-self: end; }
.screen-reference .button { justify-self: start; align-self: start; margin: 0; max-width: none; }
.screen-reference h3 { font-size: 1.375rem; line-height: 1.4; margin-block: 8px; }
.screen-reference .reference-description { font-size: 1rem; line-height: 1.8; }
.screen-reference .image-note { font-size: .75rem; margin-top: 14px; color: var(--muted); }
.screen-reference .text-link { margin-top: 14px; }
.evaluation-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 65px; border-top: 1px solid #354b64; }
.evaluation-section h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.2; font-weight: 500; letter-spacing: -1px; margin: 18px 0; }
.evaluation-section h2 span { color: var(--accent); }
.evaluation-section > div > p:not(.eyebrow) { font-size: 1rem; color: var(--muted); line-height: 1.8; max-width: 450px; }
.evaluation-links a { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 20px 0; border-top: 1px solid #354b64; }
.evaluation-links a:first-child { padding-top: 0; border: 0; }
.evaluation-links a:hover h3 { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.evaluation-links h3 { font-size: 1rem; font-weight: 600; }
.evaluation-links p { font-size: .875rem; color: var(--muted); margin-top: 6px; line-height: 1.8; }
.demo-topics { display: flex; flex-wrap: wrap; gap: 10px 25px; list-style: none; padding: 0; margin: 24px 0 0; font-size: .8125rem; color: #c8d8ec; }
.demo-topics li { padding-left: 12px; border-left: 2px solid #668bc3; }
.site-footer { border-top: 1px solid #354b64; background: #08111d; }
.footer-main { display: grid; grid-template-columns: 1fr 2fr; gap: 90px; padding-block: 55px 40px; }
.footer-brand p { color: var(--muted); font-size: .875rem; max-width: 250px; margin-top: 20px; }
.footer-navigation { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.footer-navigation h2 { font-size: .875rem; font-weight: 600; margin-bottom: 13px; }
.footer-navigation a { display: block; font-size: .875rem; color: var(--muted); padding-block: 7px; }
.footer-navigation a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { border-top: 1px solid #293b50; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; padding-block: 22px; font-size: .75rem; color: var(--muted); }
.footer-bottom > span { margin-left: auto; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 8px; }
@media(max-width: 1100px) {
.evaluation-section { gap: 40px; }
.screen-reference { gap: 18px 25px; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.footer-main { gap: 40px; }
}
@media(max-width: 850px) {
.screen-reference { grid-template-columns: 1fr; gap: 20px; }
.screen-reference .screen-button { grid-row: auto; }
.evaluation-section { grid-template-columns: 1fr; gap: 28px; }
.footer-main { grid-template-columns: 1fr; gap: 30px; }
.footer-brand p { max-width: 400px; }
}
@media(max-width: 620px) {
.header .button-small { font-size: .8125rem; padding-inline: 11px; }
.platform-opening h2 { font-size: 2rem; }
.screen-reference .reference-description { font-size: .9375rem; }
.evaluation-section { padding-block: 40px; }
.evaluation-section h2 { font-size: 2rem; }
.demo-topics { flex-direction: column; gap: 12px; }
.footer-main { padding-block: 35px 25px; }
.footer-navigation { grid-template-columns: 1fr 1fr; gap: 25px; }
.footer-bottom { display: block; }
.footer-bottom > span { display: block; margin-block: 10px; }
}