@font-face {
  font-family: Roboto;
  src: url("assets/roboto-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("assets/roboto-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("assets/roboto-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --navy: #091f2c;
  --navy-raised: #102b39;
  --gold: #bc9e72;
  --gold-ink: #755a36;
  --paper: #f7f6f3;
  --sand: #f1e9df;
  --body: #50524e;
  --line: #d9d9d6;
  --white: #fff;
  --container: 1256px;
  font-family: Roboto, Arial, sans-serif;
  font-synthesis: none;
  font-size: 16px;
  color: var(--navy);
  background: var(--paper);
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
figure, p, h1, h2, h3, dd, dl { margin: 0; }
p, li, dd { line-height: 1.57; }
button, summary { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid #886638; outline-offset: 4px; }
.header :focus-visible, .hero :focus-visible, .closing :focus-visible, .footer :focus-visible {
  outline-color: #e8cfa6;
}
.container { width: min(var(--container), calc(100% - 112px)); margin-inline: auto; }
.skip {
  position: fixed;
  inset: 12px auto auto 12px;
  z-index: 5;
  padding: 12px 18px;
  background: var(--white);
  transform: translateY(-150%);
}
.skip:focus { transform: translateY(0); }

.header { background: var(--navy); color: var(--white); }
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 34px;
  align-items: center;
  min-height: 82px;
  border-bottom: 1px solid #ffffff23;
}
.brand { display: inline-block; justify-self: start; text-decoration: none; border-radius: 4px; }
.brand img { object-fit: contain; }
.desktop-nav { display: flex; gap: clamp(19px, 2.7vw, 42px); align-items: center; }
.desktop-nav a, .footer nav a { text-decoration: none; font-size: .94rem; color: #e3e7e8; }
.desktop-nav a:hover, .footer nav a:hover { color: #e8cfa6; }
.header-cta { justify-self: end; }
.mobile-nav { display: none; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
  width: fit-content;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.25;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.button span, .text-link span { font-size: 1.12em; }
.button-outline { border-color: #b7c5c781; color: var(--white); }
.button-outline:hover { background: #ffffff14; border-color: #e3e7e8; }
.button-gold { background: var(--gold); color: var(--navy); }
.button-gold:hover { background: #d4b98f; }
.button-navy { background: var(--navy); color: var(--white); }
.button-navy:hover { background: #193949; }

.hero {
  position: relative;
  overflow: clip;
  color: var(--white);
  background: radial-gradient(ellipse at 86% 35%, #193744 0%, transparent 56%), var(--navy);
}
.hero-inner {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(24px, 4.1vw, 66px);
  align-items: center;
  padding-block: clamp(60px, 7vw, 102px) clamp(55px, 6.4vw, 92px);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-ink);
  font-size: .79rem;
  font-weight: 700;
  letter-spacing: .105em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 17px;
}
.eyebrow span { display: inline-block; width: 21px; height: 1px; background: currentColor; }
.eyebrow-light { color: #e2c399; }
.hero h1 {
  max-width: 9em;
  font-size: clamp(3.1rem, 5.25vw, 5.1rem);
  font-weight: 700;
  letter-spacing: -.064em;
  line-height: 1.01;
  text-wrap: balance;
}
.hero h1 em { color: #e2c399; font-style: normal; }
.hero-lead { max-width: 29em; color: #dce4e6; margin: 24px 0 28px; font-size: clamp(1.05rem, 1.5vw, 1.23rem); }
.actions { display: flex; gap: 14px 21px; align-items: center; flex-wrap: wrap; }
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--white);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #c4d3d98c;
}
.hero-link:hover { text-decoration-color: #fff; }
.hero-product { min-width: 0; }
.browser-frame {
  border: 1px solid #ffffff38;
  border-radius: 13px;
  overflow: hidden;
  background: #f8f8f6;
  box-shadow: 0 22px 70px #0007;
}
.browser-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 11px 14px;
  background: #102a38;
  color: #f3f3f1;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .015em;
}
.browser-bar b { font-weight: 400; padding-inline: 3px; color: var(--gold); }
.browser-dots { display: flex; align-items: center; gap: 4px; }
.browser-dots i { width: 6px; height: 6px; background: #80929a; border-radius: 50%; }
.browser-dots i:first-child { background: var(--gold); }
.browser-frame img { width: 100%; height: auto; aspect-ratio: 1440 / 900; }
.hero-product figcaption { color: #bfced2; font-size: .8rem; margin-top: 12px; text-align: right; }

.context-band { border-bottom: 1px solid var(--line); background: var(--white); }
.context-inner { display: flex; justify-content: center; text-align: center; }
.context-demo { padding: 21px 0 23px; text-decoration: none; }
.context-demo:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.context-inner span { display: block; color: var(--body); margin-bottom: 6px; font-size: .86rem; }
.context-inner strong { display: block; font-size: clamp(.96rem, 1.4vw, 1.15rem); font-weight: 700; }
.context-inner i { color: var(--gold-ink); font-style: normal; padding-inline: 4px; }

.section { padding-block: clamp(57px, 7vw, 104px); scroll-margin-top: 20px; }
.section-heading h2, .closing h2 {
  font-size: clamp(2.15rem, 3.6vw, 3.55rem);
  letter-spacing: -.052em;
  line-height: 1.045;
  font-weight: 700;
  text-wrap: balance;
}
.section-heading p:not(.eyebrow), .closing p { color: var(--body); font-size: 1.06rem; }
.section-heading h2 + p { margin-top: 18px; }
.split-heading {
  display: grid;
  grid-template-columns: 1.28fr .72fr;
  gap: 22px clamp(28px, 6vw, 85px);
  align-items: end;
  margin-bottom: 38px;
}
.split-heading > p { padding-bottom: 2px; max-width: 27em; }

.journey { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.journey article { padding: 28px clamp(17px, 2.8vw, 44px) 0 0; }
.journey article + article { padding-left: clamp(17px, 2.8vw, 44px); border-left: 1px solid var(--line); }
.step-index { display: block; color: var(--gold-ink); font-size: .89rem; font-weight: 700; margin-bottom: 15px; letter-spacing: .08em; }
.journey h3, .feature-grid h3, .segment-cards h3, .benefit-grid h3 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 9px; }
.journey p, .feature-grid p, .benefit-grid p { color: var(--body); }

.showcase { background: var(--sand); }
.showcase-layout { display: grid; grid-template-columns: minmax(235px, .44fr) minmax(0, 1fr); gap: clamp(21px, 4vw, 53px); align-items: start; }
.showcase-options, .showcase-tabs { display: grid; gap: 9px; }
.showcase-options button {
  min-height: 77px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: 1px solid #c9b9a5;
  border-radius: 9px;
  text-align: left;
  color: var(--navy);
  cursor: pointer;
}
.showcase-options button:hover { border-color: var(--gold-ink); }
.showcase-options button[aria-selected="true"] { background: var(--white); border-color: #b2936b; }
.showcase-options strong, .showcase-options small { display: block; }
.showcase-options strong { font-size: 1rem; margin-bottom: 4px; }
.showcase-options small { color: var(--body); font-size: .84rem; line-height: 1.4; }
.tab-number { color: var(--gold-ink); font-size: .77rem; font-weight: 700; align-self: start; margin-top: 4px; }
.tab-arrow { color: var(--gold-ink); }
.showcase-options > a { margin-top: 10px; }
.showcase-screens figure {
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid #c8bcad;
  background: var(--white);
  box-shadow: 0 15px 38px #35251422;
}
.showcase-screens img { width: 100%; height: auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.feature-grid article { padding: 25px 26px 26px 0; border-bottom: 1px solid var(--line); }
.feature-grid article:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); padding-left: 26px; }
.feature-grid article::before { display: block; content: ""; width: 26px; height: 3px; margin-bottom: 18px; border-radius: 5px; background: var(--gold); }

.ai-section { background: var(--sand); }
.ai-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 6vw, 84px); align-items: center; }
.ai-benefits { margin-top: 25px; border-top: 1px solid #c9b9a5; }
.ai-benefits > div { padding-block: 14px; border-bottom: 1px solid #c9b9a5; }
.ai-benefits h3, .ai-example dt { font-size: 1.08rem; margin-bottom: 4px; font-weight: 700; }
.ai-benefits p, .ai-example dd, .ai-example-footer p { color: var(--body); }
.ai-example {
  overflow: hidden;
  background: var(--white);
  border: 1px solid #c8bcad;
  border-radius: 13px;
  box-shadow: 0 15px 38px #35251418;
}
.ai-example-header { background: var(--navy); color: var(--white); padding: 22px clamp(18px, 3vw, 30px); }
.ai-example-header p { color: #e2c399; font-size: .86rem; font-weight: 700; margin-bottom: 5px; }
.ai-example-header h3 { font-size: clamp(1.25rem, 2.2vw, 1.68rem); letter-spacing: -.025em; }
.ai-example dl, .ai-example-footer { padding-inline: clamp(18px, 3vw, 30px); }
.ai-example dl > div { padding-block: 15px; border-bottom: 1px solid var(--line); }
.ai-example-footer { padding-block: 16px 21px; }
.ai-example-footer .text-link { margin-top: 11px; }
.ai-example-footer .ai-demo-hint { font-size: .87rem; margin-top: 6px; }

.segment-section { background: var(--navy); color: var(--white); }
.segment-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(25px, 6vw, 85px); align-items: center; }
.segment-layout .section-heading p:not(.eyebrow) { color: #d5e0e2; }
.segment-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.segment-cards article { background: var(--navy-raised); border: 1px solid #47606c; border-radius: 13px; padding: 23px; }
.segment-cards h3 { color: #eed7b5; }
.segment-cards p { color: #e4eaec; font-size: .98rem; }

.privacy-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 7vw, 106px); align-items: start; }
.privacy-layout .section-heading .text-link { margin-top: 18px; }
.privacy-controls { border-top: 1px solid var(--line); }
.privacy-controls dl > div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.privacy-controls dt { font-size: 1.12rem; font-weight: 700; margin-bottom: 6px; }
.privacy-controls dd { color: var(--body); }
.text-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: .92rem;
  font-weight: 700;
}
.text-link:hover { color: var(--gold-ink); }

.benefits { background: #fff; border-block: 1px solid var(--line); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefit-grid article {
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid #b2936b;
  border-radius: 12px;
  background: var(--paper);
}
.benefit-grid h3 { font-size: 1.48rem; }
.benefits-link { margin-top: 22px; }

.faq-layout { display: grid; grid-template-columns: .67fr 1.33fr; gap: 26px clamp(30px, 6vw, 90px); align-items: start; }
.questions { border-top: 1px solid var(--line); }
.questions details { border-bottom: 1px solid var(--line); }
.questions summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  list-style: none;
  font-weight: 700;
  cursor: pointer;
}
.questions summary::-webkit-details-marker, .mobile-nav summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--gold-ink); font-size: 1.4rem; font-weight: 400; }
.questions details[open] summary::after { content: "−"; }
.questions p { color: var(--body); padding: 0 24px 17px 0; }

.closing { background: var(--navy); color: var(--white); }
.closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: clamp(39px, 6vw, 77px); }
.closing h2 { margin-bottom: 12px; }
.closing p { color: #d7e0e2; }
.closing .button { flex-shrink: 0; }
.footer { background: var(--navy); color: #d7e0e2; }
.footer-inner { display: flex; align-items: center; gap: 12px 22px; min-height: 82px; border-top: 1px solid #ffffff32; }
.footer p { font-size: .88rem; }
.footer nav { display: flex; gap: 19px; margin-left: auto; }

@media (max-width: 1000px) {
  .container { width: min(var(--container), calc(100% - 64px)); }
  .header-inner { grid-template-columns: auto 1fr auto; gap: 18px; }
  .desktop-nav { justify-content: center; gap: 17px; }
  .hero-inner { gap: 25px; }
  .hero h1 { font-size: clamp(2.9rem, 6.3vw, 4.3rem); }
  .segment-cards { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .header-inner { grid-template-columns: 1fr auto; min-height: 64px; position: relative; }
  .header .brand img { width: 128px; height: auto; }
  .desktop-nav, .header-cta { display: none; }
  .mobile-nav { display: block; z-index: 2; }
  .mobile-nav summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 9px;
    list-style: none;
    cursor: pointer;
    border: 1px solid #ffffff55;
    border-radius: 7px;
  }
  .mobile-nav nav {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline: 0;
    padding: 8px;
    background: var(--navy-raised);
    border: 1px solid #ffffff55;
    border-radius: 8px;
    box-shadow: 0 12px 30px #0006;
  }
  .mobile-nav nav a { display: block; padding: 11px; text-decoration: none; border-radius: 5px; }
  .mobile-nav nav a:hover { background: #ffffff14; }
}

@media (max-width: 760px) {
  .container { width: calc(100% - 36px); }
  .hero-inner, .split-heading, .showcase-layout, .ai-layout, .segment-layout, .privacy-layout, .faq-layout { grid-template-columns: 1fr; }
  .hero-inner { padding-block: 45px 37px; gap: 31px; }
  .hero h1 { font-size: clamp(2.85rem, 8.7vw, 4rem); text-wrap: initial; }
  .hero-lead { margin: 18px 0 21px; }
  .hero-product figcaption { margin-top: 8px; }
  .context-demo { padding: 15px 0; }
  .context-inner span { margin-bottom: 3px; }
  .split-heading { margin-bottom: 24px; }
  .journey, .feature-grid, .benefit-grid { grid-template-columns: 1fr; }
  .journey article, .journey article + article, .feature-grid article, .feature-grid article:not(:nth-child(3n + 1)) {
    padding: 18px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .step-index, .feature-grid article::before { margin-bottom: 9px; }
  .segment-cards { grid-template-columns: repeat(2, 1fr); }
  .segment-cards article { padding: 15px; }
  .closing-inner, .footer-inner { align-items: flex-start; flex-direction: column; }
  .footer-inner { padding-block: 20px; }
  .footer nav { margin-left: 0; flex-wrap: wrap; }
}

@media (max-width: 410px) {
  .segment-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .button { transition: none; }
}