:root {
  --product-ink: #172033;
  --product-muted: #59677a;
  --product-paper: #f7f7f3;
  --product-surface: #fff;
  --product-line: rgba(23, 32, 51, .13);
  --product-blue: #0879d1;
  --product-blue-deep: #075ea6;
  --product-aqua: #dff5f7;
  --product-lilac: #eee9fb;
  --product-warm: #fff2e6;
}

.product-page { background: var(--product-paper); color: var(--product-ink); }
.product-page .site-header { position: relative; z-index: 4; max-width: 1240px; margin: 0 auto; padding: 18px 28px; border: 0; background: transparent; box-shadow: none; }
.product-page .brand { color: var(--product-ink); }
.product-page .primary-nav a { color: #425066; font-weight: 650; }
.product-page .primary-nav a:hover { color: var(--product-blue); }
.product-page .header-cta { background: var(--product-ink); border-color: var(--product-ink); color: #fff; }
.product-page .header-cta:hover { background: var(--product-blue-deep); border-color: var(--product-blue-deep); }
.product-page main { overflow: hidden; }
.product-wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.product-hero { padding: clamp(38px, 7vw, 86px) 0 clamp(62px, 8vw, 104px); background: radial-gradient(68% 80% at 90% 0%, var(--product-lilac), transparent 65%), linear-gradient(170deg, #fbfaf8, #f7f7f3); }
.product-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--product-blue-deep); font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.product-eyebrow::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #2aa7d3; box-shadow: 0 0 0 5px rgba(42, 167, 211, .13); }
.product-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); align-items: center; gap: clamp(40px, 7vw, 90px); }
.product-hero h1 { max-width: 650px; margin: 13px 0 18px; color: #101827; font-size: clamp(2.65rem, 5.5vw, 5.2rem); line-height: .98; letter-spacing: -.067em; }
.product-lead { max-width: 590px; margin: 0; color: #455166; font-size: clamp(1.05rem, 1.8vw, 1.28rem); line-height: 1.58; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.product-page .product-button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 12px 19px; border: 1px solid var(--product-blue); border-radius: 10px; background: var(--product-blue); color: #fff; font-size: .98rem; font-weight: 760; box-shadow: 0 10px 26px rgba(8, 121, 209, .18); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.product-page .product-button:hover { background: var(--product-blue-deep); box-shadow: 0 14px 30px rgba(8, 94, 166, .24); transform: translateY(-1px); }
.product-page .product-button.secondary { background: rgba(255,255,255,.72); border-color: #bfc8d4; color: var(--product-ink); box-shadow: none; }
.product-page .product-button.secondary:hover { background: #fff; border-color: #8999ad; }
.product-fineprint { margin: 0; color: #687488; font-size: .83rem; }
.product-demo { position: relative; isolation: isolate; padding: 15px; border: 1px solid rgba(23, 32, 51, .14); border-radius: 26px; background: rgba(255,255,255,.76); box-shadow: 0 30px 60px rgba(41, 61, 89, .14); }
.product-demo::before { content: ''; position: absolute; z-index: -1; inset: 18% -9% -12% 18%; border-radius: 50%; background: rgba(66, 185, 211, .17); filter: blur(34px); }
.product-demo img { display: block; width: 100%; border-radius: 15px; background: #111b27; }
.product-demo figcaption { display: flex; gap: 10px; align-items: baseline; padding: 14px 7px 3px; color: #5d6879; font-size: .86rem; }
.product-demo figcaption strong { color: var(--product-ink); font-size: .92rem; }
.product-section { padding: clamp(66px, 8vw, 108px) 0; }
.product-section.alt { background: #eaf3f4; }
.product-section.tint { background: linear-gradient(130deg, #f6f0ff, #edf7f7); }
.product-section-head { max-width: 720px; margin-bottom: 32px; }
.product-section-head h2 { margin: 0 0 12px; color: #121b2b; font-size: clamp(2rem, 3.8vw, 3.35rem); line-height: 1.04; letter-spacing: -.052em; }
.product-section-head p { max-width: 660px; margin: 0; color: var(--product-muted); font-size: 1.08rem; }
.product-truth { display: grid; grid-template-columns: 42px 1fr; gap: 16px; max-width: 980px; padding: 23px 25px; border: 1px solid #e5bd80; border-radius: 16px; background: #fff8ef; }
.product-truth-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f7c56a; color: #513400; font-weight: 900; }
.product-truth h2 { margin: 0 0 7px; font-size: 1.11rem; letter-spacing: -.01em; }
.product-truth p { margin: 0; color: #68583e; }
.product-scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.scenario-card { padding: 28px; border: 1px solid var(--product-line); border-radius: 20px; background: rgba(255,255,255,.77); }
.scenario-card.primary { background: #15263b; border-color: #15263b; color: #fff; }
.scenario-step { display: inline-block; margin-bottom: 18px; color: #67758a; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.scenario-card.primary .scenario-step { color: #9cdaf1; }
.scenario-card h3 { margin: 0 0 10px; font-size: 1.38rem; letter-spacing: -.035em; }
.scenario-card p { margin: 0; color: #607084; }
.scenario-card.primary p { color: #d2dde8; }
.scenario-card strong { color: inherit; }
.product-shot-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(205px, .65fr); gap: 20px; align-items: stretch; }
.product-shot { display: flex; flex-direction: column; min-height: 100%; padding: 14px; border: 1px solid var(--product-line); border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(43,60,85,.06); }
.product-shot img { display: block; width: 100%; border-radius: 12px; object-fit: cover; object-position: top; }
.product-shot.tall img { height: 360px; object-fit: cover; object-position: top; }
.product-shot figcaption { padding: 15px 7px 5px; color: var(--product-muted); font-size: .9rem; }
.product-shot figcaption strong { display: block; margin-bottom: 2px; color: var(--product-ink); font-size: 1rem; }
.product-setup { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: setup; }
.setup-step { position: relative; min-height: 186px; padding: 24px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--product-line); counter-increment: setup; }
.setup-step::before { content: '0' counter(setup); display: block; margin-bottom: 28px; color: #9bcce0; font-size: 1.15rem; font-weight: 850; letter-spacing: .03em; }
.setup-step h3 { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: -.025em; }
.setup-step p { margin: 0; color: var(--product-muted); font-size: .94rem; }
.product-platforms { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.platform-card { display: flex; flex-direction: column; min-height: 198px; padding: 20px; border: 1px solid var(--product-line); border-radius: 17px; background: rgba(255,255,255,.82); }
.platform-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: auto; border-radius: 10px; background: var(--product-aqua); color: #116f97; font-weight: 850; }
.platform-card h3 { margin: 22px 0 4px; font-size: 1.05rem; letter-spacing: -.02em; }
.platform-card p { min-height: 42px; margin: 0 0 16px; color: var(--product-muted); font-size: .82rem; line-height: 1.42; }
.platform-card a { color: var(--product-blue-deep); font-size: .87rem; font-weight: 780; }
.product-price { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: center; padding: clamp(28px, 4vw, 46px); border-radius: 22px; background: #101c2c; color: #fff; }
.product-price .product-eyebrow { color: #8bd1eb; }
.product-price h2 { max-width: 460px; margin: 12px 0 0; font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.03; letter-spacing: -.05em; }
.price-list { margin: 0; padding: 0; list-style: none; }
.price-list li { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.14); color: #d2dbe5; }
.price-list strong { color: #fff; }
.product-reading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reading-card { display: flex; flex-direction: column; min-height: 190px; padding: 23px; border-radius: 18px; background: #fff; border: 1px solid var(--product-line); }
.reading-card span { color: #68778c; font-size: .77rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.reading-card h3 { margin: 17px 0; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.03em; }
.reading-card a { margin-top: auto; color: var(--product-blue-deep); font-weight: 780; }
.product-end { padding: clamp(68px, 8vw, 108px) 0; background: #101c2c; color: #fff; text-align: center; }
.product-end h2 { max-width: 700px; margin: 0 auto 16px; font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.02; letter-spacing: -.06em; }
.product-end p { max-width: 635px; margin: 0 auto 26px; color: #cad7e5; font-size: 1.07rem; }
.product-end .product-actions { justify-content: center; }
.product-end .secondary { border-color: rgba(255,255,255,.3); background: transparent; color: #fff; }
.product-measurement { margin: 23px auto 0; color: #8ea4ba; font-size: .79rem; }
.product-footer { max-width: 1240px; margin: 0 auto; padding: 30px 28px 42px; background: #101c2c; color: #b8c7d5; font-size: .86rem; }
.product-footer a { color: #fff; }

@media (max-width: 900px) {
  .product-hero-grid, .product-price { grid-template-columns: 1fr; }
  .product-hero h1 { max-width: 760px; }
  .product-demo { max-width: 680px; }
  .product-platforms { grid-template-columns: repeat(3, 1fr); }
  .product-setup { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 690px) {
  .product-page .site-header { padding: 13px 20px; }
  .product-page .primary-nav { background: #fff; }
  .product-wrap { width: min(100% - 28px, 1160px); }
  .product-hero { padding-top: 34px; }
  .product-hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .product-actions { display: grid; grid-template-columns: 1fr; }
  .product-button { width: 100%; }
  .product-scenario-grid, .product-shot-grid, .product-reading { grid-template-columns: 1fr; }
  .product-shot.tall img { height: 300px; }
  .product-platforms { grid-template-columns: repeat(2, 1fr); }
  .product-setup { grid-template-columns: 1fr; }
  .setup-step { min-height: auto; }
  .product-price { padding: 28px 22px; gap: 24px; }
  .price-list li { display: block; }
  .price-list strong { display: block; margin-top: 3px; }
}