/* Vertical identities share the presentation's navy, glass and generous type.
   Existing illustration, hover and scroll animation rules stay in styles.css. */
.v-page {
  --v-ink: #08233c;
  --v-text: #172c44;
  --v-muted: #526277;
  --v-tint: color-mix(in srgb, var(--v-a) 8%, #fff);
  --v-line: color-mix(in srgb, var(--v-b) 15%, #dce4eb);
  --v-dark-accent: color-mix(in srgb, var(--v-b) 47%, #08233c);
  background: var(--v-tint);
  color: var(--v-text);
}
.v-page main { overflow: clip; isolation: isolate; }
.v-page .hero-vertical {
  min-height: 760px;
  padding-block: 34px 86px;
  background: radial-gradient(ellipse at 5% 0%, color-mix(in srgb, var(--v-a) 70%, white), transparent 60%), linear-gradient(120deg, var(--v-a) 8%, color-mix(in srgb, var(--v-b) 32%, var(--v-a)) 100%);
  color: var(--v-ink);
}
.v-page .hero-vertical .hero-ask-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 36px 54px;
  align-items: center;
  text-align: left;
}
.v-breadcrumb { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--v-ink); font-size: 14px; }
.v-breadcrumb a { color: color-mix(in srgb, var(--v-ink) 80%, transparent); }
.v-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.v-breadcrumb [aria-current] { font-weight: 650; }
.v-hero-copy { min-width: 0; padding-block: 12px; }
.v-page .hero-vertical .hero-eyebrow {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 24px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--v-ink) 16%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, white 24%, transparent);
  color: var(--v-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.4;
  white-space: normal;
}
.v-page .hero-eyebrow .icon { width: 21px; height: 21px; }
.v-page .hero-vertical h1 {
  max-width: 14ch;
  margin: 0 0 22px;
  padding: 0;
  background: none;
  color: var(--v-ink);
  -webkit-text-fill-color: currentColor;
  font-size: clamp(48px, 4.75vw, 70px);
  font-weight: 760;
  line-height: 1.045;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.v-page .hero-vertical .hero-sub { max-width: 560px; color: var(--v-ink); font-size: 18px; line-height: 1.65; }
.v-page .hero-cta { justify-content: flex-start; gap: 12px; margin-top: 30px; }
.v-page .hero-cta .button { min-height: 54px; padding: 15px 21px; border-radius: 12px; font-size: 16px; }
.v-page .button.primary { background: linear-gradient(120deg, var(--v-a), color-mix(in srgb, var(--v-b) 32%, var(--v-a))); color: var(--v-ink); border-color: transparent; }
.v-page .button.primary:hover { background: linear-gradient(120deg, var(--v-a), color-mix(in srgb, var(--v-b) 32%, var(--v-a))); color: var(--v-ink); }
.v-page .hero-vertical .button.primary { background: #08233c; color: #fff; border-color: #08233c; box-shadow: 0 8px 24px color-mix(in srgb, var(--v-ink) 18%, transparent); }
.v-page .hero-vertical .button.primary:hover { background: #123c58; color: #fff; border-color: #123c58; }
.v-page .hero-vertical .button.secondary { background: color-mix(in srgb, #fff 25%, transparent); color: var(--v-ink); border-color: color-mix(in srgb, var(--v-ink) 35%, transparent); }
.v-page .hero-vertical .button.secondary:hover { background: color-mix(in srgb, #fff 45%, transparent); color: var(--v-ink); border-color: var(--v-ink); }
.v-hero-note { margin-top: 17px; color: var(--v-ink); font-size: 14px; line-height: 1.5; }
.v-hero-art {
  min-width: 0;
  padding: 24px;
  border: 1px solid color-mix(in srgb, #fff 50%, transparent);
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--v-b) 30%, #08203e), #061a36 76%);
  color: #fff;
  box-shadow: 0 30px 70px color-mix(in srgb, var(--v-ink) 25%, transparent), inset 0 1px 0 #ffffff30;
}
.v-art-header { display: flex; align-items: center; gap: 8px; color: #d3e3f2; font-size: 12px; font-weight: 500; }
.v-art-header > span:last-child { margin-left: auto; color: #a7bfd4; font-variant-numeric: tabular-nums; }
.v-art-dot { width: 6px; height: 6px; flex: none; border-radius: 100%; background: var(--v-a); box-shadow: 0 0 12px var(--v-a); }
.v-page .hero-vertical .vs-art { width: 100%; margin: 16px 0 8px; aspect-ratio: 6 / 5; }
.v-art-caption { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid color-mix(in srgb, var(--v-a) 30%, transparent); border-radius: 15px; background: #ffffff08; }
.v-art-caption > .icon { width: 29px; height: 29px; color: var(--v-a); }
.v-art-caption div { flex: 1; min-width: 0; }
.v-art-caption div > span { display: block; margin-bottom: 4px; color: #b6cbdc; font-size: 12px; line-height: 1.4; }
.v-art-caption strong { display: block; color: #fff; font-size: 16px; font-weight: 620; line-height: 1.4; }
.v-art-caption > span { color: var(--v-a); font-size: 23px; }
.v-page .hero-vertical .scroll-hint { color: var(--v-ink); font-size: 12px; }
.v-section-nav { border-bottom: 1px solid var(--v-line); background: #fff; }
.v-section-nav > div { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.v-section-nav span { margin-right: auto; font-size: 17px; font-weight: 700; }
.v-section-nav a { padding: 18px 0; color: var(--v-muted); font-size: 14px; font-weight: 550; }
.v-section-nav a:hover { color: var(--v-dark-accent); }
.v-page .section { padding-block: 88px; border-color: var(--v-line); }
.v-page .section h2 { color: var(--v-text); font-size: clamp(32px, 3.4vw, 44px); font-weight: 720; line-height: 1.13; letter-spacing: -0.035em; }
.v-page .section-heading { align-items: start; gap: 16px; margin-bottom: 40px; }
.v-page .section-heading > p { max-width: 560px; padding-top: 0; color: var(--v-muted); font-size: 17px; line-height: 1.65; }
.v-page .eyebrow { color: var(--v-dark-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
.v-page .section-heading .eyebrow { margin-bottom: 15px; }
.v-overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.v-overview-title { margin: 0 0 18px; font-size: 23px; font-weight: 640; line-height: 1.3; }
.v-page .v-intro { max-width: 62ch; font-size: 17px; line-height: 1.8; color: var(--v-muted); }
.v-example-panel { padding: 27px; border: 1px solid var(--v-line); border-radius: 22px; background: color-mix(in srgb, var(--v-a) 15%, white); }
.v-page .v-examples { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 18px 0 0; }
.v-page .v-examples li { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--v-b) 10%, #fff); border-radius: 12px; background: #fff; color: var(--v-text); }
.v-page .v-examples li::before, .v-page .v-examples li::after { content: none; }
.v-example-label { display: block; margin-bottom: 7px; color: var(--v-dark-accent); font-size: 12px; font-weight: 650; letter-spacing: 0.055em; text-transform: uppercase; }
.v-examples li p { font-size: 16px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.v-page .v-grid { gap: 20px; margin-top: 52px; }
.v-capabilities { margin-top: 24px; }
.v-capabilities > summary { width: fit-content; cursor: pointer; }
.v-capabilities > summary::after { content: "+"; margin-left: 12px; }
.v-capabilities[open] > summary::after { content: "−"; }
.v-page .v-card { gap: 16px; padding: 28px; border: 1px solid var(--v-line); border-top: 3px solid var(--v-b); border-radius: 20px; background: #fff; box-shadow: 0 8px 26px #08233c04; }
.v-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v-page .v-stamp { width: 40px; height: 40px; background: linear-gradient(135deg, var(--v-a), color-mix(in srgb, var(--v-b) 32%, var(--v-a))); color: var(--v-ink); border-radius: 12px; font-size: 13px; font-weight: 700; }
.v-skill-status { color: var(--v-dark-accent); font-size: 12px; font-weight: 600; }
.v-page .v-card h3 { color: var(--v-text); font-size: 21px; line-height: 1.3; letter-spacing: -0.025em; font-weight: 650; }
.v-page .v-card p { color: var(--v-muted); font-size: 16px; line-height: 1.65; }
.v-page .v-card.is-soon { background: color-mix(in srgb, var(--v-a) 5%, #f9fbfd); border-top-color: color-mix(in srgb, var(--v-a) 48%, white); }
.v-page .v-card.is-soon .v-stamp { background: color-mix(in srgb, var(--v-a) 16%, white); color: var(--v-dark-accent); }
.v-page .v-card .pill { margin-top: auto; background: #fff; color: var(--v-dark-accent); border-color: var(--v-line); font-size: 12px; letter-spacing: 0.035em; }
.v-page #how { position: relative; }
.v-page #how::before { content: ""; position: absolute; inset: 0 calc((min(var(--mh-container), 100vw - var(--mh-gutter) * 2) - 100vw) / 2); z-index: -1; background: #fff; }
.v-page .v-steps { gap: 24px; margin-top: 0; }
.v-page .v-step { padding: 28px; border: 1px solid var(--v-line); border-radius: 20px; background: color-mix(in srgb, var(--v-a) 12%, white); }
.v-page .v-step::before { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px; border-radius: 100%; background: var(--v-ink); color: #fff; font-size: 13px; }
.v-page .v-step h3 { margin-bottom: 13px; color: var(--v-text); font-size: 22px; line-height: 1.3; font-weight: 650; }
.v-page .v-step p { color: var(--v-muted); font-size: 16px; line-height: 1.7; }
.v-page .v-promises { gap: 24px; margin-top: 25px; }
.v-page .v-promise { padding: 21px 0; border: 0; border-top: 1px solid var(--v-line); border-radius: 0; }
.v-page .v-promise b { color: var(--v-text); font-size: 18px; font-weight: 650; }
.v-page .v-promise span { color: var(--v-muted); font-size: 16px; }
.v-page #pricing.section-alt::before { background: color-mix(in srgb, var(--v-a) 10%, #f3f7fb); }
.v-page .v-prices { gap: 24px; margin-top: 0; }
.v-page .v-price { gap: 22px; padding: 32px; border: 1px solid var(--v-line); border-radius: 20px; background: #fff; }
.v-page .v-price.is-this { background: linear-gradient(140deg, var(--v-a), color-mix(in srgb, var(--v-b) 32%, var(--v-a))); border-color: transparent; box-shadow: 0 14px 35px color-mix(in srgb, var(--v-b) 16%, transparent); }
.v-page .v-price strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--v-text); font-size: 46px; font-weight: 750; line-height: 1.1; letter-spacing: -0.04em; }
.v-page .v-price strong small { color: var(--v-muted); font-size: 14px; }
.v-page .v-price p { color: var(--v-muted); font-size: 16px; line-height: 1.7; }
.v-page .v-price .eyebrow { color: var(--v-dark-accent); font-size: 12px; line-height: 1.4; }
.v-page .v-price.is-this :is(p, strong, strong small, .eyebrow) { color: var(--v-ink); }
.v-page .v-note { max-width: 960px; margin-top: 26px; color: var(--v-muted); font-size: 14px; line-height: 1.7; }
.v-page .v-more { gap: 16px; margin-top: 0; }
.v-page .v-more a { position: relative; gap: 11px; padding: 23px; border-color: color-mix(in srgb, var(--more-b) 20%, #e4eaf1); border-radius: 18px; background: color-mix(in srgb, var(--more-a) 13%, #fff); }
.v-page .v-more a:hover { border-color: var(--more-b); }
.v-page .v-more .v-more-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 12px; color: var(--v-ink); background: linear-gradient(135deg, var(--more-a), var(--more-b)); }
.v-more-icon .icon { width: 23px; height: 23px; }
.v-page .v-more strong { color: var(--v-text); font-size: 19px; }
.v-page .v-more span { color: var(--v-muted); font-size: 15px; line-height: 1.5; }
.v-page .v-more .v-more-arrow { position: absolute; top: 28px; right: 22px; color: var(--v-text); font-size: 21px; }
.v-page .v-cta-section { position: relative; margin-top: 0; margin-bottom: 80px; padding: 64px 40px; border: 1px solid color-mix(in srgb, var(--v-a) 40%, transparent); border-radius: 28px; background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--v-b) 35%, transparent), transparent 65%), #071d3b; }
.v-page .v-cta-section .section-heading { margin-bottom: 28px; }
.v-page .v-cta-section .eyebrow { color: var(--v-a); }
.v-page .v-cta-section h2 { color: #fff; }
.v-page .v-cta-section .section-heading > p { padding-top: 0; color: #bbccdf; }
.v-page .v-cta .button { padding: 16px 24px; font-size: 16px; }
.v-page .v-cta .button.secondary { background: #ffffff08; border-color: #ffffff35; color: #fff; }
.v-page .v-cta .button.secondary:hover { border-color: var(--v-a); }
.v-page .nav-verticals a[aria-current="page"] { color: var(--v-dark-accent); text-decoration: underline; text-decoration-color: var(--v-b); text-decoration-thickness: 3px; text-underline-offset: 8px; }

@media (max-width: 1100px) {
  .v-page .hero-vertical { min-height: 700px; }
  .v-page .hero-vertical .hero-ask-inner { gap: 30px; grid-template-columns: 1.15fr 1fr; }
  .v-page .hero-vertical h1 { font-size: 54px; }
  .v-hero-art { padding: 18px; }
  .v-page .v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-overview { gap: 32px; }
  .v-page .v-prices, .v-page .v-steps, .v-page .v-promises { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .v-page .v-price, .v-page .v-step { padding: 24px; }
  .v-page .v-price strong { font-size: 40px; }
}
@media (max-width: 800px) {
  .v-page .hero-vertical { flex-direction: column; min-height: 0; padding-block: 24px 45px; }
  .v-page .hero-vertical .hero-ask-inner { grid-template-columns: 1fr; gap: 30px; }
  .v-breadcrumb { font-size: 12px; gap: 10px; }
  .v-hero-copy { padding: 0; }
  .v-page .hero-vertical h1 { max-width: 17ch; font-size: clamp(42px, 7vw, 60px); }
  .v-page .hero-vertical .hero-eyebrow { margin-bottom: 20px; }
  .v-page .hero-vertical .hero-sub { max-width: 620px; font-size: 17px; }
  .v-page .hero-cta { margin-top: 24px; }
  .v-page .hero-cta .button { width: auto; }
  .v-hero-art { width: min(100%, 500px); margin-inline: auto; padding: 22px; }
  .v-page .hero-vertical .vs-art { width: min(100%, 400px); margin-inline: auto; margin-top: 12px; }
  .v-page .hero-vertical .scroll-hint { position: relative; inset: auto; transform: none; margin-top: 28px; }
  .v-section-nav > div { gap: 25px; min-height: 64px; overflow-x: auto; }
  .v-section-nav span { display: none; }
  .v-section-nav a { flex-shrink: 0; padding-block: 19px; font-size: 13px; }
  .v-page .section { padding-block: 64px; }
  .v-page .section-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
  .v-page .section-heading > p { max-width: 640px; padding: 0; }
  .v-overview { grid-template-columns: 1fr; gap: 28px; }
  .v-page .v-intro { font-size: 16px; line-height: 1.75; }
  .v-page .v-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-page .v-prices, .v-page .v-steps, .v-page .v-promises { grid-template-columns: 1fr; }
  .v-page .v-card { padding: 24px; }
  .v-page .v-promises { gap: 0; }
  .v-page .v-promise { padding: 20px 0; }
  .v-page .v-cta-section { padding: 48px 24px; margin-bottom: 56px; }
  .v-page .v-cta .button { width: 100%; }
}
@media (max-width: 480px) {
  .v-page .hero-vertical h1 { font-size: 43px; letter-spacing: -0.045em; }
  .v-page .hero-vertical .hero-eyebrow { font-size: 12px; padding: 8px 11px; }
  .v-page .hero-cta { gap: 10px; }
  .v-page .hero-cta .button { width: 100%; }
  .v-hero-note { text-align: center; font-size: 12px; }
  .v-hero-art { padding: 17px; border-radius: 22px; }
  .v-art-header { font-size: 12px; }
  .v-art-caption { padding: 14px; gap: 10px; }
  .v-art-caption strong { font-size: 15px; }
  .v-page .v-grid, .v-page .v-examples, .v-page .v-more { grid-template-columns: 1fr; }
  .v-example-panel { padding: 22px; }
  .v-page .v-grid { margin-top: 32px; }
  .v-page .v-card h3 { font-size: 22px; }
  .v-page .v-more a { padding: 21px; }
  .v-page .v-more .v-more-icon { margin-bottom: 4px; }
}

/* The hero scene of each vertical (vertical_scenes.js): its job, drawn in the card's navy and the vertical's colour.
   .a marks what the timeline moves; .ox/.oy/.ob set where it grows from. */
.vs-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.vs-art .a { transform-box: fill-box; transform-origin: center; }
.vs-art .a.ox { transform-origin: 0 50%; }
.vs-art .a.oy, .vs-art .a.ob { transform-origin: 50% 100%; }
.vs-art text { font-family: inherit; }
.vs-art .p { fill: #ffffff0f; stroke: color-mix(in srgb, var(--v-a) 55%, transparent); stroke-width: 1.2; }
.vs-art .p2 { fill: #ffffff12; stroke: #ffffff26; stroke-width: 1; }
.vs-art .paper { fill: #12305a; stroke: color-mix(in srgb, var(--v-a) 60%, transparent); stroke-width: 1.2; }
.vs-art .board { fill: #ffffff0a; stroke: #ffffff2e; stroke-width: 1; }
.vs-art .l { fill: #d7e6f6; fill-opacity: 0.32; }
.vs-art .l2 { fill: #eef5fc; fill-opacity: 0.78; }
.vs-art .ac { fill: var(--v-a); }
.vs-art .ab { fill: var(--v-b); }
.vs-art .at { fill: var(--v-a); fill-opacity: 0.24; }
.vs-art .t { fill: #eef5fc; font-size: 10px; font-weight: 650; letter-spacing: -0.01em; }
.vs-art .t.big { font-size: 14px; font-weight: 700; }
.vs-art .t.sm { font-size: 7.5px; font-weight: 700; }
.vs-art .t.wide { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
.vs-art .tm { fill: #a9c0d6; font-size: 8px; font-weight: 500; }
.vs-art .xs { font-size: 6px; }
.vs-art .ta { fill: var(--v-a); font-size: 8px; font-weight: 700; letter-spacing: 0.02em; }
.vs-art .tk { fill: #061a36; font-size: 8px; font-weight: 700; }
.vs-art .tk2 { fill: #061a36; fill-opacity: 0.72; font-size: 7.5px; font-weight: 600; }
.vs-art .tw { fill: #fff; font-size: 8px; font-weight: 700; }
.vs-art .sep { fill: none; stroke: #ffffff2e; stroke-width: 1; }
.vs-art .dash { fill: none; stroke: #ffffff3a; stroke-width: 1; stroke-dasharray: 4 3; }
.vs-art .fold { fill: none; stroke: color-mix(in srgb, var(--v-a) 60%, transparent); stroke-width: 1.2; }
.vs-art .ico, .vs-art .tickc, .vs-art .sig, .vs-art .wire, .vs-art .hl, .vs-art .ring, .vs-art .seal, .vs-art .seal2 { fill: none; stroke: var(--v-a); stroke-linecap: round; stroke-linejoin: round; }
.vs-art .ico { stroke-width: 1.5; }
.vs-art .tick { fill: none; stroke: #061a36; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vs-art .tickc { stroke-width: 2; }
.vs-art .sig { stroke-width: 1.8; }
.vs-art .wire { stroke-width: 1.4; stroke-opacity: 0.8; }
.vs-art .hl { stroke-width: 1.6; }
.vs-art .ring { stroke: #eef5fc; stroke-width: 1.6; }
.vs-art .seal { stroke-width: 2; }
.vs-art .seal2 { stroke-width: 1; stroke-dasharray: 2 1.6; }
.vs-art .tickc, .vs-art .sig, .vs-art .wire, .vs-art .mark, .vs-art .trend { stroke-dasharray: 1; }
.vs-art .strike { fill: none; stroke: #ff6b6b; stroke-width: 1.6; stroke-linecap: round; }
.vs-art .trend { fill: none; stroke: #eef5fc; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vs-art .chip { fill: var(--v-a); fill-opacity: 0.16; stroke: color-mix(in srgb, var(--v-a) 60%, transparent); stroke-width: 1; }
.vs-art .box { fill: none; stroke: #ffffff55; stroke-width: 1.2; }
.vs-art .bubble { fill: #eef5fc; }
.vs-art .cursor { fill: #fff; stroke: #061a36; stroke-width: 1.2; stroke-linejoin: round; }
.vs-art .mark { fill: none; stroke: #eef5fc; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vs-art .mark-ink { fill: none; stroke: #061a36; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.vs-art .sel { fill: none; stroke: #eef5fc; stroke-opacity: 0.8; stroke-width: 1; }
.vs-art .hnd { fill: #fff; stroke: var(--v-b); stroke-width: 1; }
.vs-art .folder { fill: var(--v-a); fill-opacity: 0.22; stroke: var(--v-a); stroke-width: 1.2; }
.vs-art .flap { fill: var(--v-a); }
.vs-art .sw0 { fill: var(--v-a); }
.vs-art .sw1 { fill: var(--v-b); }
.vs-art .sw2 { fill: #061a36; stroke: #ffffff45; stroke-width: 1; }
.vs-art .sw3 { fill: #f6efe4; }
.vs-art .sw4 { fill: #ff8fb1; }
.vs-art .sw5 { fill: #5ac8fa; }