:root {
  --ink: #111315;
  --ink-soft: #191c1f;
  --charcoal: #25292d;
  --steel: #5e686f;
  --line: #d8dbdd;
  --paper: #f3f0e9;
  --paper-bright: #fbfaf6;
  --red: #ef3e42;
  --red-dark: #c9212a;
  --red-pale: #ffe8e5;
  --blueprint: #406a7a;
  --white: #ffffff;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 70px rgba(9, 12, 14, 0.14);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  background: var(--paper-bright);
  color: var(--ink);
  font-family: "Barlow", "Arial Narrow", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body::selection { background: var(--red); color: var(--white); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #6f0d14; }
.skip-link { position: fixed; z-index: 100; left: 18px; top: 14px; padding: 10px 14px; border-radius: 5px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 800; transform: translateY(-180%); transition: transform 140ms ease; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 16px clamp(24px, 4vw, 68px);
  color: var(--white);
}

.brand-link { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 54px; height: 38px; object-fit: contain; }
.brand-type { display: grid; line-height: 1; }
.brand-type strong { font-size: 19px; letter-spacing: 0.1em; font-weight: 800; }
.brand-type small {
  margin-top: 5px;
  color: #afb5ba;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-nav { display: flex; align-items: center; gap: 28px; color: #d9dde0; font-size: 14px; font-weight: 600; }
.desktop-nav a, .login-link { transition: color 160ms ease; }
.desktop-nav a:hover, .login-link:hover { color: var(--white); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.login-link { color: #d9dde0; font-size: 14px; font-weight: 600; }

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 0 18px; font-size: 13px; }
.button-red { background: var(--red-dark); color: var(--white); box-shadow: 0 10px 30px rgba(201, 33, 42, 0.28); }
.button-red:hover { background: #a9151d; box-shadow: 0 14px 34px rgba(169, 21, 29, 0.38); }
.button-ghost { border-color: #656b70; color: var(--white); background: rgba(255, 255, 255, 0.04); }
.button-ghost:hover { background: rgba(255, 255, 255, 0.1); }

.hero {
  position: relative;
  min-height: 820px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.83fr) minmax(520px, 1.17fr);
  align-items: center;
  gap: clamp(45px, 6vw, 100px);
  padding: 150px max(6vw, calc((100vw - 1420px) / 2)) 96px;
  background: var(--ink);
  color: var(--white);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  background: linear-gradient(90deg, var(--red) 0 24%, transparent 24% 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000 0, transparent 76%);
}

.hero-orbit { position: absolute; border: 1px solid rgba(239, 62, 66, 0.4); border-radius: 50%; }
.hero-orbit::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 20px var(--red);
}
.hero-orbit-one { width: 660px; height: 660px; right: -270px; top: 40px; }
.hero-orbit-one::before { left: 105px; top: 72px; }
.hero-orbit-two { width: 390px; height: 390px; right: -130px; top: 175px; border-color: rgba(255, 255, 255, 0.12); }
.hero-orbit-two::before { left: 24px; top: 84px; background: #cad0d4; box-shadow: none; }

.hero-copy, .hero-product { position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 16px;
  color: var(--red-dark);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow-light { color: #ff7477; }
.hero h1, .section-heading h2, .tour-copy h3 { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; }
.hero h1 { max-width: 730px; font-size: clamp(48px, 5.1vw, 80px); }
.hero-lead { max-width: 630px; margin: 28px 0 0; color: #c9ced2; font-size: clamp(18px, 1.35vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trial-note { display: flex; flex-wrap: wrap; gap: 9px; margin: 17px 0 0; color: #9da4aa; font-size: 13px; }
.hero-product { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); }

.screen-frame { overflow: hidden; margin: 0; border: 1px solid #3a3f43; border-radius: var(--radius-md); background: #111416; box-shadow: var(--shadow-soft); }
.screen-frame-hero { box-shadow: -28px 38px 90px rgba(0, 0, 0, 0.44); }
.screen-topbar {
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  border-bottom: 1px solid #34383b;
  color: #aeb5ba;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.screen-dots { display: flex; gap: 6px; }
.screen-dots i { width: 7px; height: 7px; border-radius: 50%; background: #52585c; }
.screen-dots i:first-child { background: var(--red); }
.screen-status { justify-self: end; color: #7aa7b7; }
.screen-body { display: block; padding: 12px; background: #e9eaeb; }
.screen-body img { display: block; width: 100%; height: auto; max-height: none; }

.proof-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1180px;
  margin: -43px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-bright);
  box-shadow: 0 18px 50px rgba(16, 18, 20, 0.12);
}
.proof-strip > div { min-height: 86px; display: grid; align-content: center; padding: 16px 28px; border-right: 1px solid var(--line); }
.proof-strip > div:last-child { border-right: 0; }
.proof-strip strong { font-size: 18px; line-height: 1.2; }
.proof-strip span { margin-top: 3px; color: var(--steel); font-size: 13px; }

.section-pad { padding: 130px max(6vw, calc((100vw - 1280px) / 2)); }
.section-heading h2 { max-width: 820px; font-size: clamp(43px, 4.6vw, 70px); }
.section-heading-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr); align-items: end; gap: 70px; }
.section-heading-split > p, .centered > p { margin: 0 0 5px; color: var(--steel); font-size: 18px; line-height: 1.65; }

.workflow { background: var(--paper-bright); }
.workflow-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 78px 0 0; padding: 0; list-style: none; }
.workflow-list li { position: relative; min-height: 250px; padding: 0 28px 0 0; }
.workflow-number {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--red);
  border-radius: 50%;
  background: var(--paper-bright);
  color: var(--red-dark);
  font-size: 13px;
  font-weight: 800;
}
.workflow-line { position: absolute; z-index: 1; top: 23px; left: 48px; width: calc(100% - 48px); height: 1px; background: repeating-linear-gradient(90deg, var(--red) 0 8px, transparent 8px 13px); }
.workflow-list h3 { margin: 28px 0 10px; font-size: 21px; line-height: 1.2; }
.workflow-list p { margin: 0; color: var(--steel); font-size: 15px; line-height: 1.55; }
.honesty-note { display: flex; align-items: flex-start; gap: 14px; max-width: 850px; margin-top: 58px; padding: 18px 22px; border-left: 3px solid var(--blueprint); background: #edf3f4; color: #3e5057; }
.honesty-note p { margin: 0; font-size: 14px; }
.honesty-icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--blueprint); border-radius: 50%; font-size: 12px; font-weight: 800; }

.tour-section { position: relative; overflow: hidden; background: var(--ink-soft); color: var(--white); }
.tour-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 42px 42px;
}
.tour-section > * { position: relative; z-index: 1; }
.centered { max-width: 860px; margin: 0 auto; text-align: center; }
.centered h2 { margin-inline: auto; }
.centered > p { margin-top: 22px; color: #aeb5ba; }
.tour-tabs { max-width: 1180px; margin: 60px auto 0; }
.tour-tablist { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid #42474b; border-radius: 9px 9px 0 0; background: #111416; }
.tour-tab { position: relative; cursor: pointer; }
.tour-tab input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tour-tab span { min-height: 54px; display: grid; place-items: center; border-right: 1px solid #42474b; color: #9ba2a7; font-size: 14px; font-weight: 700; transition: background 160ms ease, color 160ms ease; }
.tour-tab:last-child span { border-right: 0; }
.tour-tab input:focus-visible + span { outline: 3px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 6px #6f0d14; }
.tour-tab input:checked + span { background: var(--red-dark); color: var(--white); }
.tour-panels { position: relative; }
.tour-panel {
  display: none;
  grid-template-columns: minmax(280px, 0.58fr) minmax(500px, 1.42fr);
  align-items: center;
  gap: 60px;
  padding: 56px;
  border: 1px solid #42474b;
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: #23272a;
}
.tour-tabs:has(#tour-jobs:checked) .tour-panel-jobs,
.tour-tabs:has(#tour-overview:checked) .tour-panel-overview,
.tour-tabs:has(#tour-sections:checked) .tour-panel-sections,
.tour-tabs:has(#tour-takeoff:checked) .tour-panel-takeoff,
.tour-tabs:has(#tour-catalog:checked) .tour-panel-catalog,
.tour-tabs:has(#tour-recap:checked) .tour-panel-recap,
.tour-tabs:has(#tour-proposal:checked) .tour-panel-proposal { display: grid; }
@supports not selector(:has(*)) {
  .tour-panel:first-child { display: grid; }
}
.tour-copy h3 { font-size: clamp(34px, 3vw, 49px); }
.tour-copy > p:not(.eyebrow) { margin: 22px 0; color: #b8bec2; line-height: 1.65; }
.tour-copy a { display: inline-flex; color: #ff7b7e; font-size: 14px; font-weight: 700; }
.tour-copy a::after { content: "→"; margin-left: 8px; }

.button-dark { background: var(--ink); color: var(--white); box-shadow: 0 10px 28px rgba(17, 19, 21, 0.16); }
.button-dark:hover { background: #000; box-shadow: 0 14px 34px rgba(17, 19, 21, 0.24); }
.learning-posts-actions { display: flex; justify-content: center; margin-top: 36px; }

.fit-section { background: var(--paper); }
.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 68px; }
.fit-card { position: relative; overflow: hidden; padding: clamp(34px, 4vw, 58px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-bright); }
.fit-card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -105px; bottom: -110px; border: 1px solid rgba(17, 19, 21, 0.08); border-radius: 50%; }
.fit-card-positive { border-top: 5px solid var(--red); }
.fit-card-neutral { border-top: 5px solid var(--blueprint); }
.fit-symbol { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 38px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 20px; font-weight: 800; }
.fit-card-positive .fit-symbol { background: var(--red); }
.fit-card h3 { max-width: 520px; margin: 0 0 28px; font-size: clamp(30px, 3vw, 43px); line-height: 1.06; letter-spacing: -0.03em; }
.fit-card ul { display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.fit-card li { position: relative; padding-left: 24px; color: #4c555b; }
.fit-card li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.fit-card-neutral li::before { background: var(--blueprint); }

.capabilities { position: relative; overflow: hidden; background: var(--ink); color: var(--white); }
.capabilities::before { content: ""; position: absolute; inset: 0; opacity: 0.12; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(180deg, #000, transparent 82%); }
.capabilities > * { position: relative; z-index: 1; }
.centered-dark > p { color: #aeb5ba; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 1220px; margin: 70px auto 0; border: 1px solid #393e42; border-radius: var(--radius-md); overflow: hidden; background: #393e42; }
.capability-grid article { min-height: 300px; padding: 38px; background: #191c1f; transition: background 180ms ease, transform 180ms ease; }
.capability-grid article:hover { background: #202427; }
.capability-grid article > span { display: inline-flex; margin-bottom: 54px; color: #ff6f73; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; }
.capability-grid h3 { margin: 0 0 13px; font-size: 25px; line-height: 1.15; }
.capability-grid p { margin: 0; color: #aeb5ba; font-size: 15px; line-height: 1.65; }

.proof-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr); align-items: center; gap: clamp(60px, 9vw, 130px); background: var(--paper); }
.proof-copy blockquote,
.proof-copy .trust-statement { max-width: 820px; margin: 20px 0 28px; font-size: clamp(38px, 4vw, 62px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
.quote-source { margin: 0; color: var(--steel); font-size: 14px; font-weight: 600; }
.rating-card { display: block; padding: 40px; border-radius: var(--radius-lg); background: var(--ink); color: var(--white); box-shadow: var(--shadow-soft); transition: transform 180ms ease, box-shadow 180ms ease; }
.rating-card:hover { transform: translateY(-5px); box-shadow: 0 28px 80px rgba(9, 12, 14, 0.22); }
.rating-label { margin: 0 0 32px; color: #ff7b7e; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.rating-main { display: flex; align-items: baseline; gap: 15px; padding-bottom: 28px; border-bottom: 1px solid #383d41; }
.rating-main strong { font-size: 82px; line-height: 0.9; letter-spacing: -0.05em; }
.rating-main span { color: #aeb5ba; font-size: 14px; }
.rating-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.rating-breakdown span { display: grid; color: #929ba1; font-size: 12px; }
.rating-breakdown b { color: var(--white); font-size: 21px; }
.rating-card small { color: #d4d8db; font-weight: 600; }

.pricing-section { background: var(--paper-bright); }
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 68px; }
.price-grid.price-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.price-card { display: flex; flex-direction: column; min-height: 380px; padding: 38px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 12px 36px rgba(17, 19, 21, 0.06); }
.trial-card { border-color: var(--red); background: linear-gradient(150deg, #fff 0 62%, var(--red-pale)); }
.price-kicker { margin: 0; color: var(--red-dark); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.price { display: flex; align-items: flex-start; margin: 28px 0 12px; line-height: 1; }
.price sup { margin: 7px 4px 0 0; font-size: 25px; font-weight: 700; }
.price strong { font-size: clamp(60px, 6vw, 82px); letter-spacing: -0.055em; }
.price span { align-self: flex-end; margin: 0 0 10px 8px; color: var(--steel); font-size: 15px; }
.price-card > p:not(.price-kicker) { margin: 0 0 30px; color: var(--steel); }
.price-card .button { width: 100%; margin-top: auto; }
.pricing-note { max-width: 850px; margin: 26px auto 0; color: var(--steel); text-align: center; font-size: 14px; }

.learn-section { display: grid; grid-template-columns: minmax(320px, 0.72fr) minmax(560px, 1.28fr); gap: clamp(60px, 9vw, 130px); align-items: start; background: #26343a; color: var(--white); }
.learn-intro { position: sticky; top: 110px; }
.learn-intro h2 { margin: 0; font-size: clamp(42px, 4.5vw, 66px); line-height: 0.98; letter-spacing: -0.04em; }
.learn-intro > p:not(.eyebrow) { margin: 26px 0 34px; color: #c0c9cd; }
.learn-cards { display: grid; gap: 15px; }
.learn-cards a { position: relative; display: block; padding: 34px 72px 34px 34px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-md); background: rgba(255,255,255,.045); transition: transform 180ms ease, background 180ms ease; }
.learn-cards a::after { content: "↗"; position: absolute; right: 32px; top: 30px; color: #ff7477; font-size: 24px; }
.learn-cards a:hover { transform: translateX(6px); background: rgba(255,255,255,.085); }
.learn-cards span { color: #ff8588; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.learn-cards h3 { margin: 12px 0 8px; font-size: 27px; line-height: 1.15; }
.learn-cards p { margin: 0; color: #bfc7cb; font-size: 15px; }

.faq-section { background: var(--paper); }
.faq-section .section-heading > .eyebrow { color: var(--red-dark); }
.faq-list { max-width: 940px; margin: 62px auto 0; border-top: 1px solid #bfc4c6; }
.faq-list details { border-bottom: 1px solid #bfc4c6; }
.faq-list summary { position: relative; cursor: pointer; list-style: none; padding: 27px 58px 27px 0; font-size: 21px; font-weight: 700; line-height: 1.3; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 22px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #aeb4b7; border-radius: 50%; color: var(--red-dark); font-size: 23px; font-weight: 500; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 800px; margin: -7px 0 28px; color: #4e585e; line-height: 1.7; }

.final-cta { position: relative; overflow: hidden; display: grid; justify-items: center; padding: 130px 24px; background: var(--ink); color: var(--white); text-align: center; }
.final-cta-grid { position: absolute; inset: 0; opacity: 0.18; background-image: radial-gradient(circle at 50% 40%, rgba(239,62,66,.45), transparent 27%), linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; }
.final-cta > *:not(.final-cta-grid) { position: relative; z-index: 1; }
.final-cta h2 { max-width: 940px; margin: 0; font-size: clamp(48px, 6vw, 84px); line-height: 0.95; letter-spacing: -0.05em; }
.final-cta > p:not(.eyebrow) { margin: 25px 0 0; color: #b9c0c4; font-size: 19px; }
.final-cta .hero-actions { justify-content: center; }

.site-footer { padding: 80px max(6vw, calc((100vw - 1280px) / 2)) 28px; background: #0b0d0e; color: var(--white); }
.footer-main { display: grid; grid-template-columns: 1.4fr 0.7fr 0.9fr 1fr; gap: 65px; }
.footer-main > div:first-child > p { max-width: 360px; margin: 25px 0 0; color: #8e979c; font-size: 14px; }
.footer-main nav, .footer-contact { display: grid; align-content: start; gap: 11px; }
.footer-main nav strong, .footer-contact strong { margin-bottom: 7px; color: #f6f5f0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-main nav a, .footer-contact a { color: #8e979c; font-size: 14px; transition: color 160ms ease; }
.footer-main nav a:hover, .footer-contact a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 65px; padding-top: 23px; border-top: 1px solid #24282b; color: #727b80; font-size: 12px; }
.mobile-trial-bar { display: none; }
.mobile-nav { position: relative; display: none; }
.mobile-nav summary { cursor: pointer; list-style: none; padding: 8px 10px; color: #d9dde0; font-size: 13px; font-weight: 700; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: " +"; color: #ff7477; }
.mobile-nav[open] summary::after { content: " −"; }
.mobile-nav nav { position: absolute; right: 0; top: 48px; width: 230px; display: grid; padding: 12px; border: 1px solid #3f4549; border-radius: 9px; background: #111416; box-shadow: 0 20px 45px rgba(0,0,0,.36); }
.mobile-nav nav a { padding: 12px 13px; border-radius: 5px; color: #e3e6e8; font-size: 14px; font-weight: 600; }
.mobile-nav nav a:hover, .mobile-nav nav a:focus-visible { background: #272b2e; color: var(--white); }
.mobile-nav summary { min-height: 44px; display: inline-grid; place-items: center; padding: 0 10px; }
.mobile-nav-login { color: #ff8588 !important; font-weight: 800 !important; }

.interior-page { background: var(--paper-bright); }
.interior-header {
  position: relative;
  z-index: 20;
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 16px max(6vw, calc((100vw - 1420px) / 2));
  background: #0d0f10;
  color: var(--white);
}
.interior-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
  align-items: center;
  gap: clamp(60px, 9vw, 130px);
  min-height: 650px;
  padding: 100px max(6vw, calc((100vw - 1280px) / 2)) 120px;
  background: var(--ink);
  color: var(--white);
}
.interior-grid { position: absolute; inset: 0; opacity: .15; background-image: radial-gradient(circle at 82% 38%, rgba(239,62,66,.55), transparent 20%), linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: auto, 52px 52px, 52px 52px; }
.interior-hero > *:not(.interior-grid) { position: relative; z-index: 1; }
.rr-breadcrumbs { margin-bottom: 48px; color: #aeb5b9; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.rr-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.rr-breadcrumbs li { display: inline-flex; align-items: center; }
.rr-breadcrumbs li + li::before { content: "/"; margin-right: 7px; color: #ff777a; }
.rr-breadcrumbs a { color: #f4f6f7; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rr-breadcrumbs a:hover { color: #ff9b9e; }
.rr-breadcrumbs [aria-current="page"] { color: #aeb5b9; }
.interior-hero h1 { max-width: 900px; margin: 0; font-size: clamp(52px, 6vw, 88px); line-height: .94; letter-spacing: -.05em; }
.interior-hero-copy > p:not(.eyebrow) { max-width: 780px; margin: 28px 0 0; color: #c2c8cc; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.6; }
.interior-highlight-card { padding: 38px; border: 1px solid #4a5054; border-radius: var(--radius-md); background: rgba(23,26,28,.88); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.interior-highlight-card > p { margin: 0 0 26px; color: #ff777a; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.interior-highlight-card ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.interior-highlight-card li { position: relative; padding: 18px 0 18px 28px; border-top: 1px solid #363b3e; color: #e3e6e8; font-weight: 600; }
.interior-highlight-card li::before { content: ""; position: absolute; left: 0; top: 27px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 16px rgba(239,62,66,.6); }
.interior-price-band { padding: 95px max(6vw, calc((100vw - 1180px) / 2)); background: var(--paper); }
.interior-price-band .price-grid { margin-top: 0; }
.interior-sections { padding: 130px max(6vw, calc((100vw - 1180px) / 2)); background: var(--paper-bright); }
.interior-sections-intro { display: grid; grid-template-columns: .5fr 1.5fr; align-items: end; gap: 50px; margin-bottom: 64px; }
.interior-sections-intro .eyebrow { margin: 0 0 7px; }
.interior-sections-intro h2 { margin: 0; font-size: clamp(43px, 5vw, 70px); line-height: .98; letter-spacing: -.045em; }
.interior-section-list { display: grid; gap: 20px; }
.interior-section-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 34px; padding: clamp(32px, 5vw, 62px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 12px 40px rgba(17,19,21,.045); }
.interior-section-card:has(.interior-screen) { grid-template-columns: 74px minmax(280px, .7fr) minmax(390px, 1.3fr); align-items: center; }
.interior-number { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--red); border-radius: 50%; color: var(--red-dark); font-size: 13px; font-weight: 800; }
.interior-section-card h3 { margin: 0 0 15px; font-size: clamp(30px, 3.2vw, 47px); line-height: 1.03; letter-spacing: -.035em; }
.interior-section-card p { max-width: 740px; margin: 0; color: #505a60; line-height: 1.7; }
.interior-section-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 0; padding: 0; list-style: none; }
.interior-section-card li { padding: 7px 12px; border: 1px solid #cbd0d2; border-radius: 99px; color: #485359; background: #f7f7f4; font-size: 13px; font-weight: 600; }
.interior-section-card aside { max-width: 700px; margin-top: 24px; padding: 15px 18px; border-left: 3px solid var(--blueprint); background: #edf3f4; color: #3e5057; font-size: 14px; font-weight: 600; }
.interior-screen { min-width: 0; }
.interior-screen .screen-body { min-height: 0; }
.interior-final-cta { display: grid; justify-items: center; padding: 120px 24px; background: #26343a; color: var(--white); text-align: center; }
.interior-final-cta h2 { max-width: 900px; margin: 0; font-size: clamp(46px, 5.8vw, 78px); line-height: .97; letter-spacing: -.05em; }
.interior-final-cta > p:not(.eyebrow) { margin: 22px 0 34px; color: #c5cdd0; font-size: 18px; }

@media (max-width: 1120px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .login-link { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 145px; }
  .hero-copy { max-width: 780px; }
  .hero-product { width: min(920px, 100%); margin: 0 auto; transform: none; }
  .proof-strip { max-width: calc(100% - 48px); }
  .workflow-list { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .workflow-list li { min-height: 220px; }
  .workflow-list li:nth-child(3) .workflow-line { display: none; }
  .tour-panel { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-section { grid-template-columns: 1fr; }
  .rating-card { max-width: 600px; }
  .learn-section { grid-template-columns: 1fr; }
  .learn-intro { position: static; max-width: 750px; }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
  .interior-header { grid-template-columns: 1fr auto; }
  .interior-hero { grid-template-columns: 1fr; }
  .interior-highlight-card { max-width: 680px; }
  .interior-section-card:has(.interior-screen) { grid-template-columns: 74px 1fr; }
  .interior-screen { grid-column: 2; }
}

@media (max-width: 760px) {
  .site-header { min-height: 72px; padding: 12px 20px; }
  .brand-mark { width: 45px; height: 32px; }
  .brand-type strong { font-size: 16px; }
  .brand-type small, .login-link { display: none; }
  .button-small { min-height: 44px; padding-inline: 14px; }
  .site-header .header-actions > .button, .interior-header .header-actions > .button { display: none; }
  .hero { min-height: auto; gap: 60px; padding: 126px 20px 88px; }
  .hero h1 { font-size: clamp(43px, 13vw, 60px); }
  .hero-lead { font-size: 18px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .screen-topbar { grid-template-columns: auto 1fr; }
  .screen-status { display: none; }
  .screen-body { min-height: 0; padding: 6px; }
  .proof-strip { grid-template-columns: 1fr 1fr; margin-top: -34px; }
  .proof-strip > div { min-height: 76px; padding: 13px 16px; }
  .proof-strip > div:nth-child(2) { border-right: 0; }
  .proof-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-pad { padding: 94px 20px; }
  .section-heading-split { grid-template-columns: 1fr; gap: 24px; }
  .section-heading h2 { font-size: 43px; }
  .workflow-list { grid-template-columns: 1fr; gap: 0; margin-top: 54px; }
  .workflow-list li { min-height: 0; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 0 0 38px; }
  .workflow-list h3 { margin-top: 0; }
  .workflow-line, .workflow-list li:nth-child(3) .workflow-line {
    top: 48px;
    left: 23px;
    width: 1px;
    height: calc(100% - 48px);
    display: block;
    background: repeating-linear-gradient(180deg, var(--red) 0 8px, transparent 8px 13px);
  }
  .workflow-list li:last-child .workflow-line { display: none; }
  .honesty-note { margin-top: 10px; }
  .tour-tabs { margin-top: 44px; }
  .tour-tablist { grid-template-columns: repeat(3, 1fr); overflow: hidden; }
  .tour-tab span { border-bottom: 1px solid #42474b; }
  .tour-panel { gap: 35px; padding: 28px 20px 20px; }
  .fit-grid, .capability-grid, .price-grid, .price-grid.price-grid-two { grid-template-columns: 1fr; }
  .fit-card { padding: 34px 25px; }
  .capability-grid article { min-height: 0; }
  .proof-copy blockquote, .proof-copy .trust-statement { font-size: 38px; }
  .rating-card { padding: 30px 24px; }
  .rating-main strong { font-size: 66px; }
  .rating-breakdown { gap: 8px; }
  .price-card { min-height: 340px; padding: 31px 25px; }
  .learn-section { gap: 48px; }
  .learn-cards a { padding: 29px 55px 29px 24px; }
  .learn-cards a::after { right: 23px; }
  .faq-list summary { font-size: 18px; }
  .final-cta { padding: 100px 20px 114px; }
  .site-footer { padding: 70px 20px 96px; }
	.footer-main nav a, .footer-contact a { min-height: 44px; display: flex; align-items: center; }
  .footer-main { grid-template-columns: 1fr; gap: 45px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .mobile-trial-bar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 52px; display: grid; place-items: center; border-radius: 6px; background: var(--red-dark); color: var(--white); box-shadow: 0 14px 40px rgba(0,0,0,.34); font-size: 15px; font-weight: 800; }
	html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
	:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { scroll-margin-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .interior-header { min-height: 72px; padding: 12px 20px; }
  .interior-hero { min-height: auto; gap: 45px; padding: 78px 20px 86px; }
  .rr-breadcrumbs { margin-bottom: 38px; }
  .interior-hero h1 { font-size: clamp(46px, 13vw, 62px); }
  .interior-highlight-card { padding: 28px 23px; }
  .interior-price-band { padding: 80px 20px; }
  .interior-sections { padding: 90px 20px; }
  .interior-sections-intro { grid-template-columns: 1fr; gap: 11px; margin-bottom: 44px; }
  .interior-section-card, .interior-section-card:has(.interior-screen) { grid-template-columns: 1fr; gap: 24px; padding: 30px 23px; }
  .interior-screen { grid-column: 1; }
  .interior-final-cta { padding: 95px 20px 110px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}