/* AlgoSync: precision software. Shared tokens, semantic components, native motion. */
:root {
  --ink:#172b2b;
  --muted:#556664;
  --subtle:#5d6c66;
  --paper:#fafbf8;
  --surface:#edf1ed;
  --card:#fff;
  --line:#d8e0d9;
  --teal:#3c7f86;
  --teal-text:#2b696b;
  --teal-pale:#e2efea;
  --mint:#c7edda;
  --night:#172b2b;
  --night-muted:#bbcdc6;
  --radius:14px;
  --shadow:0 20px 60px -28px #102d2930;
  color-scheme:light
}
:root.dark {
  --ink:#ecf3ec;
  --muted:#b5c4be;
  --subtle:#acbcb5;
  --paper:#101c1b;
  --surface:#172624;
  --card:#1b2e2a;
  --line:#354a43;
  --teal:#91c8bd;
  --teal-text:#a8dccc;
  --teal-pale:#243f36;
  --shadow:0 20px 60px -28px #0009;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--muted);
  font:15px/1.65 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--teal-text)
}
button {
  font:inherit;
  cursor:pointer
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
img,svg {
  max-width:100%
}
img {
  display:block
}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}
figure,p,h1,h2,h3 {
  margin:0
}
p+p {
  margin-top:16px
}
h1,h2,h3,strong {
  color:var(--ink)
}
h1,h2,h3 {
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.06
}
h1 {
  font-size:clamp(45px,6.4vw,88px)
}
h2 {
  font-size:clamp(34px,4vw,54px)
}
h3 {
  font-size:26px;
  letter-spacing:-.035em;
  line-height:1.2
}
strong {
  font-weight:600
}
::selection {
  background:var(--mint);
  color:var(--night)
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:5px
}
#main:focus {
  outline:none
}
.container {
  max-width:1320px;
  margin:auto;
  padding-inline:48px
}
.section {
  padding-block:104px
}
.section-tinted {
  background:var(--surface)
}
.eyebrow,.micro-label {
  font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;
  color:var(--teal-text);
  text-transform:uppercase
}
.eyebrow {
  margin-bottom:23px
}
.micro-label {
  font-size:10px;
  letter-spacing:.06em
}
.example-label {
  font-size:10px;
  letter-spacing:.01em;
  color:var(--subtle)
}
.accent-heading {
  color:var(--teal-text)
}
.muted-heading {
  color:var(--subtle)
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:64px;
  margin-bottom:46px
}
.section-heading>p {
  max-width:390px;
  font-size:16px
}
.section-heading h2 {
  max-width:780px
}
.section-intro {
  font-size:18px;
  line-height:1.75;
  margin-top:25px;
  max-width:560px
}
.section-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:26px;
  font-size:12px
}
.text-link {
  display:inline-flex;
  gap:22px;
  align-items:center;
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  min-height:44px
}
.text-link span {
  font-size:20px;
  transition:transform .2s
}
.text-link:hover span {
  transform:translate(3px,-2px)
}
.button-row {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  align-items:center;
  margin-top:28px
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:35px;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:7px;
  min-height:52px;
  padding:14px 23px;
  font-size:13px;
  line-height:1.4;
  font-weight:600;
  transition:background .2s,transform .2s
}
.button:hover {
  background:var(--teal-text);
  color:var(--paper);
  transform:translateY(-2px)
}
.button span {
  font-size:20px
}
.button-small {
  min-height:44px;
  padding:10px 18px;
  gap:18px;
  font-size:12px
}
.button-outline {
  background:transparent;
  color:var(--ink);
  border-color:var(--line)
}
.button-outline:hover {
  background:var(--surface);
  color:var(--ink)
}
.button-teal {
  background:var(--teal-text);
  border-color:var(--teal-text);
  color:var(--paper)
}
.button-mint {
  background:var(--mint);
  border-color:var(--mint);
  color:var(--night)
}
.button-mint:hover {
  background:#dff8eb;
  color:var(--night)
}
.quiet-link {
  display:block;
  font-size:13px;
  margin-top:24px
}
.status-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:currentColor;
  border-radius:50%;
  flex:none
}
.small-badge,.state,.record-status {
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  border-radius:4px;
  padding:4px 8px;
  font-size:10px;
  line-height:1.5;
  background:var(--teal-pale);
  color:var(--teal-text)
}
.badge-neutral {
  color:var(--muted);
  background:var(--surface)
}
.state-mint {
  background:#e3f3e8;
  color:#286344
}
.state-neutral {
  background:#edf0ed;
  color:#506158
}
.state-amber {
  background:#f7ebd4;
  color:#7d591a
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.skip-link {
  position:fixed;
  z-index:1000;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:var(--paper);
  padding:12px 20px
}
.skip-link:focus {
  top:10px
}
/* Navigation and footer */
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.site-header.is-scrolled {
  box-shadow:0 4px 16px #102d2908
}
.nav-shell {
  display:flex;
  height:80px;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ink);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.04em;
  white-space:nowrap
}
.brand img {
  object-fit:contain;
  flex:none
}
.dark .brand img,.dark .product-logo {
  filter:brightness(1.6)
}
.primary-nav {
  display:flex;
  gap:30px;
  align-items:center;
  font-size:12px;
  font-weight:500
}
.primary-nav a {
  min-height:44px;
  display:flex;
  align-items:center
}
.primary-nav a[aria-current] {
  color:var(--teal-text)
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:22px
}
.login-link {
  font-size:12px;
  min-height:44px;
  display:flex;
  align-items:center
}
.theme-switch {
  display:flex
}
.theme-switch button {
  border:0;
  background:transparent;
  width:32px;
  height:44px;
  display:grid;
  place-items:center;
  color:var(--muted);
  border-radius:5px
}
.theme-switch button[aria-pressed=true] {
  color:var(--teal-text);
  background:var(--surface)
}
.theme-switch svg {
  width:15px;
  height:15px
}
.menu-toggle,.mobile-login {
  display:none!important
}
.site-footer {
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:60px 0 24px
}
.footer-top {
  display:grid;
  grid-template-columns:2fr 1.2fr 1fr;
  gap:65px;
  padding-bottom:50px
}
.footer-top p {
  font-size:13px;
  margin-top:22px
}
.footer-links {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-size:13px;
  gap:8px
}
.footer-links .eyebrow {
  margin-bottom:8px
}
.footer-links a {
  padding-block:5px
}
.footer-bottom {
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  padding-top:24px;
  border-top:1px solid var(--line)
}
.footer-bottom>div {
  display:flex;
  gap:24px
}
.footer-signoff {
  display:flex;
  gap:9px;
  align-items:center
}
/* Flagship hero and replaceable product evidence */
.hero {
  padding:76px 0 0
}
.home-hero-heading>.eyebrow {
  display:flex;
  align-items:center;
  gap:16px
}
.product-wordmark {
  font-family:Inter,sans-serif;
  font-size:16px;
  font-weight:600;
  text-transform:none;
  letter-spacing:-.035em;
  padding-right:17px;
  border-right:1px solid var(--line);
  color:var(--ink)
}
.home-hero h1 {
  font-size:clamp(64px,7.8vw,112px);
  line-height:.98;
  letter-spacing:-.065em
}
.hero-intro-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:48px;
  margin:28px 0 44px
}
.hero-description {
  font-size:17px;
  line-height:1.7;
  max-width:580px
}
.hero-intro-row .button-row {
  margin:0;
  flex:none
}
.product-stage {
  background:var(--night);
  color:var(--night-muted);
  padding:22px 22px 14px;
  border-radius:14px;
  box-shadow:0 28px 50px -36px #163c3560;
  overflow:hidden
}
.stage-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 5px 20px;
  font:10px/1.5 ui-monospace,monospace;
  letter-spacing:.08em
}
.stage-caption>span:first-child {
  display:flex;
  align-items:center;
  gap:10px;
  color:#cfebda
}
.stage-caption .example-label {
  color:#b6c9c1;
  font-family:Inter,sans-serif
}
.product-window {
  border:1px solid #51625b;
  border-radius:7px;
  overflow:hidden;
  background:#fcfdfa;
  color:#5c6d61;
  box-shadow:0 12px 40px #0002
}
.product-window strong {
  color:#263c32
}
.product-window-bar {
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid #dce4dc;
  padding:13px 20px;
  font-size:10px
}
.window-brand {
  display:flex;
  align-items:center;
  gap:8px;
  color:#263c32;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.04em
}
.product-window-bar>span:nth-child(2) {
  display:flex;
  gap:15px
}
.workspace-avatar {
  margin-left:auto;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  background:#e4eee6;
  border-radius:50%;
  font-size:9px;
  color:#3b594b
}
.product-window-body {
  display:grid;
  grid-template-columns:155px minmax(0,1fr) 265px;
  min-height:314px
}
.workspace-rail {
  display:flex;
  flex-direction:column;
  gap:5px;
  border-right:1px solid #dce4dc;
  padding:22px 10px;
  background:#f3f6f1;
  font-size:10px
}
.workspace-rail>span {
  padding:8px
}
.workspace-rail .rail-caption {
  font:8px ui-monospace,monospace;
  letter-spacing:.1em;
  margin-bottom:5px
}
.rail-selected {
  background:#e1eee3;
  color:#285940;
  border-radius:4px
}
.workspace-rail .rail-bottom {
  margin-top:auto;
  font-size:9px;
  color:#5f7061
}
.repair-record {
  padding:24px
}
.record-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px
}
.record-top>div {
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:11px
}
.record-top strong {
  font-size:23px;
  letter-spacing:-.03em
}
.product-window .micro-label {
  color:#567261
}
.repair-fields {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:24px 0
}
.repair-fields>div {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:10px
}
.repair-fields strong {
  font-size:11px;
  font-weight:500
}
.repair-track {
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:9px;
  margin:24px 0
}
.repair-track>span {
  padding-top:12px;
  border-top:3px solid #e2e8e1;
  flex:1
}
.repair-track .complete {
  border-color:#88b498;
  color:#54745d
}
.repair-track .current {
  border-color:#2d7251;
  color:#2d7251;
  font-weight:600
}
.record-update {
  padding:16px 18px;
  background:#f0f4ed;
  border-radius:5px
}
.record-update p {
  font-size:11px;
  line-height:1.6;
  margin:8px 0 13px;
  color:#425c4a
}
.record-update>div {
  display:flex;
  gap:8px
}
.connected-records {
  border-left:1px solid #dce4dc;
  padding:22px 20px
}
.connected-heading {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:600;
  color:#435a4a;
  margin-bottom:20px
}
.connected-item {
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #e3e9e1
}
.connection-icon {
  color:#356d50;
  background:#edf3e9;
  border:1px solid #dde6d8;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:5px;
  font-size:15px;
  flex:none
}
.connected-item>div {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:9px
}
.connected-item strong {
  font-size:11px;
  font-weight:500
}
.record-precision {
  font-size:9px;
  line-height:1.7;
  margin-top:18px
}
.stage-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:14px 4px 0;
  font-size:9px
}
.product-capabilities {
  display:flex;
  justify-content:space-between;
  padding:28px 8px;
  border-bottom:1px solid var(--line);
  font:10px/1.5 ui-monospace,monospace;
  letter-spacing:.08em;
  color:var(--muted)
}
/* Connected customer/shop experience */
.experience-pair {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:20px
}
.experience-pair article {
  border-radius:12px;
  padding:35px 40px
}
.shop-experience {
  background:var(--surface)
}
.customer-experience {
  background:var(--teal-pale)
}
.experience-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.experience-heading .eyebrow {
  margin:0
}
.experience-pair h3 {
  font-size:34px;
  margin:25px 0
}
.experience-pair article>p {
  font-size:13px;
  max-width:440px;
  margin-top:24px
}
.shop-record {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:7px;
  padding:24px;
  margin-top:42px
}
.shop-record-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:13px
}
.shop-record dl {
  margin:16px 0 0
}
.shop-record dl>div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:11px
}
.shop-record dt {
  color:var(--subtle)
}
.shop-record dd {
  margin:0;
  text-align:right;
  color:var(--ink)
}
.customer-tracker {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  max-width:330px;
  margin:0 auto;
  padding:24px;
  box-shadow:var(--shadow)
}
.tracker-brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  margin-bottom:24px;
  color:var(--ink);
  font-weight:600
}
.customer-tracker>strong {
  font-size:20px;
  line-height:1.3;
  display:block;
  letter-spacing:-.035em;
  margin:10px 0 17px
}
.tracker-progress {
  display:flex;
  gap:4px;
  margin:20px 0
}
.tracker-progress i {
  height:4px;
  background:var(--teal);
  border-radius:3px;
  flex:1
}
.tracker-progress i:last-child {
  background:var(--line)
}
.tracker-estimate {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
  gap:10px
}
.customer-tracker>p:last-child {
  font-size:11px;
  margin-top:14px;
  line-height:1.7
}
/* Management composition */
.operations-bento {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:18px
}
.operations-bento article {
  padding:34px;
  border-radius:10px;
  overflow:hidden
}
.operations-bento h3 {
  font-size:30px;
  margin-bottom:15px
}
.operations-bento article>p:not(.eyebrow) {
  font-size:13px;
  max-width:430px
}
.bento-intelligence {
  background:var(--night);
  color:var(--night-muted)
}
.bento-intelligence h3,.bento-intelligence strong {
  color:#f2f7ee
}
.bento-top {
  display:flex;
  justify-content:space-between;
  gap:18px
}
.bento-intelligence .eyebrow {
  color:#b9e0c9
}
.bento-intelligence .example-label {
  color:#b6c9c1
}
.intelligence-metrics {
  display:flex;
  margin:35px 0;
  gap:32px
}
.intelligence-metrics>div {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px
}
.intelligence-metrics strong {
  font-size:46px;
  font-weight:400;
  letter-spacing:-.05em;
  line-height:1
}
.intelligence-metrics span {
  font-size:10px
}
.intelligence-footer {
  border-top:1px solid #3a5148;
  padding-top:18px;
  font-size:10px;
  display:flex;
  gap:10px;
  align-items:center
}
.bento-attention,.bento-fleet {
  background:var(--card);
  border:1px solid var(--line)
}
.attention-example {
  display:flex;
  gap:14px;
  background:var(--surface);
  padding:18px;
  border-radius:6px;
  margin:25px 0
}
.attention-example>span {
  width:27px;
  height:27px;
  border:1px solid #a18e68;
  color:#8b6a31;
  border-radius:50%;
  text-align:center;
  flex:none
}
.attention-example>div {
  display:flex;
  flex-direction:column;
  font-size:12px;
  gap:3px
}
.attention-example small {
  font-size:10px
}
.fleet-example {
  display:flex;
  align-items:center;
  gap:15px;
  border-block:1px solid var(--line);
  padding:23px 0;
  margin:27px 0
}
.fleet-key {
  font-size:32px;
  color:var(--teal-text)
}
.fleet-example>div {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  flex:1
}
.fleet-example small {
  font-size:10px
}
.bento-brief {
  background:#e1ead8;
  color:#4a6044
}
.bento-brief h3 {
  color:#233d2a
}
.bento-brief .eyebrow {
  color:#526b45
}
.bento-brief .text-link {
  color:#233d2a;
  margin-top:22px
}
/* AI product scene */
.home-ai {
  background:var(--night);
  color:var(--night-muted)
}
.ai-feature {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:85px
}
.home-ai h2,.home-ai strong {
  color:#f1f7ef
}
.home-ai .eyebrow {
  color:#afd5c0
}
.home-ai .button {
  margin-top:30px
}
.ai-guardrail {
  font-size:11px;
  margin-top:27px!important;
  line-height:1.8
}
.call-composition {
  border:1px solid #50665a;
  border-radius:12px;
  background:#21382e;
  box-shadow:0 25px 60px #0002;
  padding:27px
}
.call-title {
  display:flex;
  align-items:center;
  gap:13px;
  border-bottom:1px solid #405b4c;
  padding-bottom:23px
}
.phone-symbol {
  height:42px;
  width:42px;
  display:grid;
  place-items:center;
  background:#d0edda;
  color:#244f37;
  border-radius:9px;
  font-size:24px
}
.call-title>div {
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:11px;
  flex:1
}
.call-title strong {
  font-size:16px
}
.call-title .example-label {
  color:#b8ccbe
}
.call-context {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:23px 0;
  font-size:11px
}
.call-context .micro-label {
  color:#a9cbb6
}
.call-context strong {
  font-size:13px
}
.call-dialogue {
  display:flex;
  flex-direction:column;
  gap:13px
}
.call-dialogue p {
  border:1px solid #53685c;
  border-radius:7px;
  padding:17px;
  font-size:13px;
  color:#d7e8da;
  margin:0
}
.call-dialogue p:first-child {
  margin-right:30px
}
.call-dialogue p:last-child {
  margin-left:30px;
  background:#304c3b;
  border-color:#547b5e
}
.call-dialogue span {
  display:block;
  font:9px/1.4 ui-monospace,monospace;
  color:#b8d2bf;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.06em
}
.call-outcome {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:23px;
  font-size:10px
}
.call-outcome>span {
  font-size:28px;
  color:#a4cfb1
}
.call-outcome>div {
  display:flex;
  flex-direction:column;
  gap:5px
}
.call-outcome strong {
  font-size:11px;
  font-weight:500
}
/* Plans, company, conversion */
.plan-ladder {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden
}
.plan-ladder>a {
  padding:30px;
  position:relative
}
.plan-ladder>a+a {
  border-left:1px solid var(--line)
}
.plan-ladder h3 {
  font-size:24px
}
.plan-ladder p {
  font-size:12px;
  margin-top:12px
}
.ladder-price {
  display:block;
  color:var(--ink);
  font-size:28px;
  letter-spacing:-.03em;
  margin-top:35px
}
.ladder-price small {
  font-size:11px;
  letter-spacing:0;
  color:var(--muted)
}
.ladder-arrow {
  position:absolute;
  bottom:31px;
  right:28px;
  font-size:23px;
  color:var(--ink)
}
.ladder-pro {
  background:var(--teal-pale)
}
.company-section {
  background:var(--surface)
}
.company-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:110px
}
.company-grid>div>p:last-child {
  max-width:480px;
  margin-top:25px
}
.growth-aside {
  border-left:1px solid var(--line);
  padding:15px 0 0 60px
}
.growth-aside p {
  font-size:14px;
  margin:24px 0
}
.closing-cta {
  text-align:center;
  background:radial-gradient(ellipse at 50% 120%,var(--teal-pale),transparent 65%)
}
.closing-cta h2 {
  font-size:clamp(38px,4.4vw,62px)
}
.closing-cta p:not(.eyebrow) {
  max-width:510px;
  margin:25px auto
}
.closing-cta .button {
  margin-top:10px
}
/* Product detail: chapters and operational evidence */
.product-hero .hero-copy {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  column-gap:70px;
  align-items:start;
  padding-bottom:45px
}
.product-hero .hero-copy>.eyebrow {
  grid-column:1/-1
}
.product-hero h1 {
  grid-column:1;
  grid-row:2/5;
  font-size:clamp(48px,5.7vw,80px)
}
.product-hero .hero-description {
  margin:0;
  grid-column:2;
  font-size:17px
}
.product-hero .button-row,.product-hero .hero-fine-print {
  grid-column:2
}
.hero-fine-print {
  font-size:11px;
  margin-top:20px
}
.product-subnav {
  border-bottom:1px solid var(--line);
  background:var(--surface)
}
.product-subnav>.container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:20px;
  gap:25px
}
.product-subnav nav {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  font-size:12px
}
.product-subnav nav a {
  min-height:44px;
  display:flex;
  align-items:center
}
.product-subnav strong {
  font-size:13px
}
.product-story {
  padding-block:100px
}
.story-layout {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px;
  align-items:start
}
.story-copy>h2 {
  margin-bottom:40px
}
.story-chapter {
  padding:65px 0;
  border-top:1px solid var(--line);
  min-height:290px
}
.story-chapter h3 {
  font-size:34px;
  margin-bottom:22px
}
.story-chapter p {
  max-width:410px;
  font-size:15px
}
.story-chapter .eyebrow {
  margin-bottom:18px
}
.story-chapter.is-current h3 {
  color:var(--teal-text)
}
.story-stage {
  position:sticky;
  top:130px;
  align-self:start;
  background:var(--night);
  padding:20px;
  border-radius:12px;
  margin-top:70px;
  color:#d0dfd5
}
.story-controls {
  display:flex;
  gap:5px;
  margin-bottom:18px;
  flex-wrap:wrap
}
.story-controls button {
  flex:1;
  background:transparent;
  border:1px solid #476052;
  color:#c3d8c9;
  min-height:44px;
  padding:8px;
  font-size:11px;
  border-radius:5px
}
.story-controls button[aria-pressed=true] {
  background:#c7e7d1;
  border-color:#c7e7d1;
  color:#25452f
}
.story-panel {
  background:var(--card);
  color:var(--muted);
  border-radius:7px;
  padding:28px;
  min-height:380px
}
.story-panel+.story-panel {
  margin-top:18px
}
.story-enhanced .story-panel+.story-panel {
  margin-top:0
}
.stage-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
  font-size:11px
}
.record-heading {
  font-size:23px;
  line-height:1.3;
  color:var(--ink);
  letter-spacing:-.03em;
  margin-bottom:12px
}
.record-heading strong {
  display:block
}
.record-meta {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:12px;
  margin-bottom:22px
}
.record-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:12px
}
.record-row strong {
  text-align:right
}
.record-row span {
  color:var(--muted)
}
.story-panel>p {
  font-size:12px;
  margin-top:22px
}
.story-stage>p,.story-stage>figcaption {
  font-size:10px;
  color:#c0d3c6;
  margin-top:18px
}
.ledger-item {
  display:flex;
  gap:15px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}
.ledger-time {
  font:10px/1.7 ui-monospace,monospace;
  color:var(--subtle);
  min-width:38px
}
.ledger-copy {
  flex:1;
  min-width:0;
  font-size:12px
}
.ledger-copy strong {
  display:block;
  font-size:13px;
  margin-bottom:4px
}
.ledger-copy p {
  font-size:12px;
  line-height:1.6
}
.ledger-state {
  font-size:10px;
  align-self:flex-start;
  white-space:nowrap;
  color:var(--teal-text)
}
.fleet-assignment {
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  margin-top:20px;
  font-size:13px
}
.fleet-assignment strong {
  display:block;
  margin:5px 0
}
.fleet-assignment p {
  font-size:12px
}
.attention-item {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.attention-item strong {
  font-size:13px;
  display:block
}
.attention-item p {
  font-size:11px
}
.experience-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.experience-side {
  padding:32px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px
}
.experience-side h3 {
  margin:14px 0 24px;
  font-size:29px
}
.experience-side p {
  font-size:14px
}
.experience-side ul {
  list-style:none;
  padding:0;
  margin:22px 0 0
}
.experience-side li {
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:13px
}
.communication-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:80px;
  align-items:center
}
.communication-layout h3 {
  margin:24px 0 16px
}
.communication-ledger {
  padding:30px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  box-shadow:var(--shadow)
}
.communication-ledger .ledger-item:last-child {
  border:0
}
.intelligence-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:22px
}
.intelligence-card {
  border-top:2px solid var(--teal);
  padding-top:24px
}
.intelligence-card h3 {
  margin:15px 0 20px
}
.intelligence-card p,.intelligence-card li {
  font-size:13px
}
.intelligence-card ul {
  padding-left:18px
}
.metric-strip {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin:20px 0
}
.metric-strip>div {
  padding:18px;
  background:var(--card);
  display:flex;
  flex-direction:column;
  font-size:10px
}
.metric-strip strong {
  font-size:24px;
  font-weight:500
}
/* Pricing and native comparisons */
.pricing-hero {
  text-align:center;
  padding:80px 0 48px
}
.pricing-hero h1 {
  font-size:clamp(44px,5.1vw,72px)
}
.pricing-hero .hero-description {
  margin:25px auto;
  max-width:620px
}
.pricing-context {
  display:flex;
  justify-content:center;
  gap:28px;
  font-size:11px;
  margin-top:28px
}
.plans-section {
  padding:0 0 80px
}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:stretch
}
.plan-card {
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:30px
}
.plan-featured {
  background:var(--night);
  color:var(--night-muted);
  border-color:var(--night)
}
.plan-featured h3,.plan-featured strong,.plan-featured .price {
  color:#f2f7ee
}
.plan-featured .eyebrow {
  color:#bdddc8
}
.plan-featured .button {
  background:var(--mint);
  border-color:var(--mint);
  color:var(--night)
}
.plan-featured .small-badge {
  background:#365442;
  color:#cce6d3
}
.plan-icon {
  height:34px;
  width:34px;
  color:var(--teal-text);
  margin-bottom:22px
}
.plan-icon svg {
  width:25px;
  height:25px
}
.plan-label {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-height:47px;
  margin-bottom:16px
}
.plan-label .eyebrow {
  margin:0;
  font-size:10px
}
.plan-card h3 {
  font-size:38px
}
.plan-description {
  font-size:14px;
  line-height:1.6;
  margin-top:15px;
  min-height:48px
}
.price {
  font-size:46px;
  color:var(--ink);
  letter-spacing:-.055em;
  line-height:1.2;
  margin:28px 0 9px
}
.price span {
  font-size:11px;
  color:var(--muted);
  letter-spacing:0;
  padding-left:6px
}
.plan-featured .price span {
  color:var(--night-muted)
}
.setup-line {
  font-size:11px
}
.plan-card .button {
  width:100%;
  margin:25px 0;
  gap:20px
}
.includes-label {
  font-size:12px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-weight:600
}
.plan-featured .includes-label {
  border-color:#425b4b
}
.check-list {
  list-style:none;
  margin:19px 0 0;
  padding:0
}
.check-list li {
  position:relative;
  padding:0 0 14px 21px;
  font-size:12px;
  line-height:1.6
}
.check-list li::before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--teal-text)
}
.plan-featured .check-list li::before {
  color:#b3dabc
}
.plan-note {
  font-size:11px;
  margin-top:20px
}
.pricing-footnote {
  font-size:11px;
  margin-top:25px
}
.plan-comparison {
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--card);
  overflow:hidden
}
.plan-comparison>summary {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:25px;
  cursor:pointer;
  color:var(--ink);
  font-size:14px;
  min-height:70px;
  list-style:none
}
.plan-comparison summary::after,.faq-list summary::after {
  content:'+';
  font-size:22px;
  color:var(--teal-text);
  flex:none
}
.plan-comparison[open] summary::after,.faq-list details[open] summary::after {
  content:'−'
}
.plan-comparison summary small {
  font-size:10px;
  color:var(--muted);
  margin-left:15px
}
.comparison-scroll {
  overflow-x:auto
}
.comparison-table {
  border-collapse:collapse;
  width:100%;
  min-width:560px;
  text-align:left;
  font-size:12px
}
.comparison-table th,.comparison-table td {
  padding:16px 22px;
  border-top:1px solid var(--line)
}
.comparison-table thead th {
  color:var(--ink);
  background:var(--surface)
}
.comparison-table th[scope=row] {
  font-weight:500;
  color:var(--ink);
  width:48%
}
.comparison-table td {
  text-align:center
}
.comparison-table thead th:not(:first-child) {
  text-align:center
}
.comparison-table .category-row th {
  background:var(--surface);
  font-size:11px;
  color:var(--teal-text)
}
.comparison-note {
  font-size:11px;
  margin-top:20px
}
.setup-callout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center
}
.setup-price {
  font-size:44px;
  color:var(--ink);
  letter-spacing:-.04em
}
.setup-callout p {
  font-size:14px
}
.setup-callout .text-link {
  margin-top:20px
}
.faq-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:80px
}
.faq-list details {
  border-top:1px solid var(--line)
}
.faq-list details:last-child {
  border-bottom:1px solid var(--line)
}
.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:22px 0;
  cursor:pointer;
  list-style:none;
  font-size:14px;
  color:var(--ink)
}
summary::-webkit-details-marker {
  display:none
}
.faq-list p {
  padding:0 35px 24px 0;
  font-size:13px
}
.three-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px
}
.three-steps h3 {
  margin:20px 0 15px
}
.three-steps p {
  font-size:14px
}
/* Secondary service and retained booking flows */
.growth-hero {
  padding-bottom:80px
}
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}
.growth-hero h1 {
  font-size:clamp(44px,4.6vw,66px)
}
.growth-hero .hero-description {
  margin-top:25px
}
.pill-label {
  font-size:11px
}
.growth-system-preview {
  padding:32px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px
}
.preview-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.preview-label .eyebrow {
  font-size:9px;
  margin:0
}
.pipeline-source,.pipeline-destination {
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--card);
  padding:20px;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:12px
}
.pipeline-source {
  margin-top:30px
}
.pipeline-source>div,.pipeline-destination>div {
  display:flex;
  flex-direction:column;
  gap:6px
}
.mini-icon,.delivery-check {
  font-size:23px;
  color:var(--teal-text)
}
.pipeline-connector {
  height:25px;
  width:1px;
  background:var(--teal);
  margin:auto
}
.pipeline-core {
  background:var(--card);
  border:1px solid var(--teal);
  border-radius:6px
}
.pipeline-core-header {
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--ink)
}
.pipeline-core-header .status-dot {
  margin-left:auto;
  color:var(--teal-text)
}
.pipeline-stages>div {
  display:grid;
  grid-template-columns:25px 1fr;
  padding:17px;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.pipeline-stages small {
  grid-column:2;
  font-size:10px
}
.pipeline-stages>div>span {
  grid-row:1/3;
  font:10px ui-monospace,monospace;
  color:var(--teal-text)
}
.pipeline-destination {
  background:var(--teal-pale)
}
.pipeline-destination span {
  font-size:10px
}
.growth-system-preview figcaption {
  font-size:9px;
  text-align:center;
  margin-top:22px
}
.distinction-strip {
  background:var(--surface);
  border-block:1px solid var(--line);
  padding-block:24px
}
.distinction-strip>.container {
  display:flex;
  gap:35px;
  justify-content:space-between;
  align-items:center
}
.distinction-strip .eyebrow {
  margin:0;
  flex:none
}
.distinction-strip p {
  font-size:12px
}
.distinction-strip a {
  color:var(--teal-text)
}
.capability-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px
}
.capability-card {
  padding:26px 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column
}
.step-number {
  font:11px/1.5 ui-monospace,monospace;
  color:var(--teal-text)
}
.capability-card h3 {
  margin:22px 0 18px
}
.capability-card p {
  font-size:13px
}
.capability-tag {
  display:block;
  margin-top:auto;
  padding-top:25px;
  font-size:10px;
  color:var(--teal-text)
}
.split-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center
}
.split-content .text-link {
  margin-top:24px
}
.scope-card {
  background:var(--card);
  padding:35px;
  border:1px solid var(--line);
  border-radius:9px
}
.feature-list {
  list-style:none;
  padding:0;
  margin:20px 0 0
}
.feature-list li {
  display:flex;
  flex-direction:column;
  padding:18px 0;
  border-top:1px solid var(--line);
  font-size:12px;
  gap:8px
}
.workflow-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px
}
.workflow-grid article {
  border-top:1px solid var(--line);
  padding-top:23px
}
.workflow-grid h3 {
  font-size:22px;
  margin:22px 0 16px
}
.workflow-grid p {
  font-size:13px
}
.booking-choice {
  min-height:70vh
}
.booking-intro {
  text-align:center;
  max-width:750px;
  margin:0 auto 48px
}
.booking-intro h1 {
  font-size:clamp(38px,4.4vw,60px)
}
.booking-intro p {
  font-size:16px;
  margin-top:24px
}
.solution-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.booking-choices {
  max-width:900px;
  margin:auto
}
.solution-card {
  padding:40px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  transition:transform .2s,border-color .2s
}
.solution-card:hover {
  transform:translateY(-3px);
  border-color:var(--teal)
}
.solution-card.flagship {
  background:var(--teal-pale)
}
.booking-choice-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.booking-choice-card h2 {
  font-size:34px
}
.booking-choice-card p {
  font-size:15px;
  margin:22px 0 40px
}
.booking-choice-card .text-link {
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  width:100%
}
.booking-page {
  padding:38px 0 80px
}
.booking-container {
  max-width:1120px
}
.booking-back {
  margin-bottom:32px
}
.booking-calendar {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden
}
.booking-calendar iframe {
  display:block;
  width:100%;
  border:0;
  min-height:850px
}
.booking-fallback {
  font-size:12px;
  text-align:center;
  margin-top:25px
}
.booking-fallback a {
  text-decoration:underline;
  text-underline-offset:4px
}
.booking-expectations {
  display:flex;
  justify-content:center;
  gap:25px;
  flex-wrap:wrap;
  font-size:12px;
  margin:24px auto
}
/* Native reveals never gate content; only a short settling motion once visible. */
.reveal.is-visible {
  animation:settle-in .5s ease both
}
.story-enhanced .story-panel:not([hidden]) {
  animation:panel-in .3s ease both
}
@keyframes settle-in {
  from {
    transform:translateY(12px)
  }
  to {
    transform:translateY(0)
  }
}
@keyframes panel-in {
  from {
    opacity:.65;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:1100px) {
  .container {
    padding-inline:32px
  }
  .nav-shell {
    gap:20px
  }
  .primary-nav {
    gap:20px
  }
  .nav-actions {
    gap:14px
  }
  .theme-switch button {
    width:28px
  }
  .hero-intro-row {
    align-items:flex-start
  }
  .hero-intro-row .button-row {
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }
  .product-window-body {
    grid-template-columns:125px minmax(0,1fr) 225px
  }
  .repair-record {
    padding:20px
  }
  .connected-records {
    padding:20px 14px
  }
  .record-top strong {
    font-size:20px
  }
  .ai-feature,.story-layout,.communication-layout {
    gap:45px
  }
  .company-grid {
    gap:60px
  }
  .product-hero .hero-copy {
    gap:35px
  }
  .plan-card {
    padding:24px
  }
  .intelligence-grid {
    grid-template-columns:1.2fr 1fr
  }
  .intelligence-card:last-child {
    grid-column:1/-1
  }
  .hero-grid {
    gap:35px
  }
}
@media(max-width:1060px) {
  .nav-enhanced .menu-toggle {
    display:grid!important;
    place-items:center;
    order:3;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:6px;
    background:transparent;
    color:var(--ink)
  }
  .menu-lines,.menu-lines::after {
    display:block;
    height:1px;
    width:17px;
    background:currentColor
  }
  .menu-lines::after {
    content:'';
    transform:translateY(6px)
  }
  .menu-lines {
    transform:translateY(-3px)
  }
  .nav-actions {
    margin-left:auto
  }
  .primary-nav {
    flex-wrap:wrap
  }
  .nav-enhanced .primary-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:79px;
    padding:22px 32px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:flex-start;
    gap:0
  }
  .nav-enhanced .primary-nav.is-open {
    display:flex
  }
  .mobile-login {
    display:flex!important
  }
  .login-link {
    display:none
  }
  .primary-nav a {
    min-height:46px
  }
  .theme-switch button {
    width:34px
  }
  .nav-shell {
    flex-wrap:wrap;
    height:auto;
    min-height:80px;
    padding-block:12px
  }
  .nav-enhanced .nav-shell {
    height:80px;
    padding-block:0;
    flex-wrap:nowrap
  }
}
@media(max-width:800px) {
  .section {
    padding-block:72px
  }
  .hero {
    padding-top:50px
  }
  .home-hero h1 {
    font-size:78px
  }
  .section-heading {
    display:block;
    margin-bottom:32px
  }
  .section-heading>p,.section-heading>.text-link {
    margin-top:25px
  }
  .hero-intro-row {
    display:block;
    margin-top:25px
  }
  .hero-intro-row .button-row {
    flex-direction:row;
    align-items:center;
    gap:24px;
    margin-top:25px
  }
  .product-window-body {
    grid-template-columns:minmax(0,1fr) 220px
  }
  .workspace-rail {
    display:none
  }
  .product-window-bar {
    gap:25px
  }
  .product-capabilities {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    font-size:9px
  }
  .stage-bottom>span:last-child {
    display:none
  }
  .experience-pair {
    gap:14px
  }
  .experience-pair article {
    padding:26px
  }
  .experience-pair h3 {
    font-size:28px
  }
  .shop-record {
    padding:17px
  }
  .shop-record dl>div {
    display:block
  }
  .shop-record dd {
    text-align:left;
    margin-top:5px
  }
  .shop-record {
    margin-top:28px
  }
  .shop-record-top {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }
  .operations-bento article {
    padding:26px
  }
  .intelligence-metrics {
    gap:15px
  }
  .intelligence-metrics strong {
    font-size:37px
  }
  .ai-feature {
    gap:35px
  }
  .call-composition {
    padding:22px
  }
  .call-title .example-label {
    font-size:9px
  }
  .plan-ladder>a {
    padding:24px
  }
  .plan-ladder h3 {
    font-size:21px
  }
  .ladder-price {
    font-size:26px
  }
  .ladder-arrow {
    right:20px;
    bottom:24px
  }
  .company-grid {
    gap:40px
  }
  .growth-aside {
    padding-left:35px
  }
  .footer-top {
    gap:30px;
    grid-template-columns:1.5fr 1.3fr 1fr
  }
  .footer-signoff {
    display:none
  }
  .product-hero .hero-copy {
    display:block
  }
  .product-hero .hero-description {
    margin-top:25px
  }
  .product-hero h1 {
    font-size:64px
  }
  .product-subnav>.container {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding-block:14px
  }
  .product-subnav nav {
    gap:20px
  }
  .story-layout {
    grid-template-columns:1fr;
    gap:25px
  }
  .story-stage {
    position:static;
    margin-top:0
  }
  .story-copy {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .story-copy>.eyebrow,.story-copy>h2,.story-copy>.section-heading {
    grid-column:1/-1
  }
  .story-chapter {
    padding:25px 0;
    min-height:0
  }
  .story-chapter h3 {
    font-size:27px;
    margin-bottom:15px
  }
  .story-chapter p {
    font-size:13px
  }
  .story-panel {
    min-height:340px
  }
  .communication-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .pricing-grid {
    gap:12px
  }
  .plan-card {
    padding:22px 18px
  }
  .plan-label {
    min-height:65px;
    align-content:start
  }
  .plan-description {
    font-size:13px;
    min-height:65px
  }
  .price {
    font-size:38px
  }
  .check-list li {
    font-size:11px
  }
  .plan-card .button {
    font-size:11px;
    gap:10px;
    padding-inline:12px
  }
  .faq-grid,.setup-callout {
    gap:40px
  }
  .hero-grid,.split-content {
    grid-template-columns:1fr;
    gap:40px
  }
  .growth-system-preview {
    max-width:640px;
    width:100%;
    margin:auto
  }
  .growth-hero {
    padding-bottom:55px
  }
  .capability-grid {
    gap:25px;
    grid-template-columns:1fr 1fr
  }
  .distinction-strip>.container {
    flex-direction:column;
    gap:12px;
    align-items:flex-start
  }
  .workflow-grid {
    grid-template-columns:1fr 1fr
  }
  .scope-card {
    padding:28px
  }
  .booking-intro {
    margin-bottom:30px
  }
  .solution-card {
    padding:28px
  }
  .three-steps {
    gap:25px
  }
}
@media(max-width:600px) {
  .container {
    padding-inline:22px
  }
  .section {
    padding-block:60px
  }
  .nav-enhanced .nav-shell {
    height:70px
  }
  .brand {
    font-size:18px;
    gap:8px
  }
  .brand img {
    width:26px;
    height:26px
  }
  .nav-actions {
    gap:8px
  }
  .nav-actions>.button {
    font-size:11px;
    padding:11px 13px;
    min-height:44px;
    gap:0
  }
  .nav-actions>.button span {
    display:none
  }
  .nav-enhanced .menu-toggle {
    width:44px;
    height:44px
  }
  .nav-enhanced .primary-nav {
    top:69px;
    padding:18px 22px
  }
  .theme-switch {
    display:none;
    position:absolute;
    top:89px;
    right:22px;
    z-index:2
  }
  .site-header:has(.is-open) .theme-switch {
    display:flex
  }
  .theme-switch button {
    width:35px
  }
  .hero {
    padding-top:40px
  }
  .home-hero-heading>.eyebrow {
    gap:12px;
    font-size:9px
  }
  .product-wordmark {
    font-size:15px;
    padding-right:12px
  }
  .home-hero h1 {
    font-size:clamp(51px,13.2vw,78px);
    letter-spacing:-.065em;
    line-height:1.02
  }
  .hero-description {
    font-size:15px;
    line-height:1.7
  }
  .hero-description br {
    display:none
  }
  .hero-intro-row {
    margin:24px 0 30px
  }
  .hero-intro-row .button-row {
    gap:21px
  }
  .button {
    min-height:48px;
    padding:13px 17px;
    gap:20px;
    font-size:12px
  }
  .text-link {
    font-size:12px;
    gap:12px
  }
  .eyebrow {
    font-size:10px;
    margin-bottom:18px
  }
  .product-stage {
    padding:16px 12px 13px;
    border-radius:9px;
    margin-inline:-7px
  }
  .stage-caption {
    display:block;
    padding:0 2px 14px;
    font-size:8px
  }
  .stage-caption .example-label {
    display:block;
    margin-top:8px;
    font-size:9px
  }
  .product-window-bar {
    padding:12px;
    gap:20px
  }
  .product-window-bar>span:nth-child(2) {
    display:none
  }
  .product-window-body {
    display:block;
    min-height:0
  }
  .repair-record {
    padding:19px 15px
  }
  .record-top strong {
    font-size:20px
  }
  .record-top>div {
    font-size:10px
  }
  .record-top>.state {
    font-size:8px;
    margin-top:4px
  }
  .repair-fields {
    gap:15px;
    margin:20px 0;
    grid-template-columns:1fr 1fr
  }
  .repair-fields>div {
    font-size:10px
  }
  .repair-fields>div:last-child {
    display:none
  }
  .repair-track {
    font-size:8px;
    margin:22px 0
  }
  .repair-track>span {
    padding-top:9px
  }
  .record-update {
    padding:13px
  }
  .record-update p {
    font-size:10px
  }
  .record-update .state {
    font-size:8px
  }
  .connected-records {
    padding:15px;
    border-top:1px solid #dce4dc;
    border-left:0;
    background:#f3f6ef
  }
  .connected-heading {
    margin-bottom:0;
    font-size:10px
  }
  .connected-records .connected-item {
    padding:10px 0
  }
  .connected-records .connected-item:nth-child(2),.connected-records .connected-item:nth-child(4),.record-precision {
    display:none
  }
  .connected-records .connected-item {
    border:0;
    padding-bottom:0
  }
  .connected-item>div {
    font-size:10px
  }
  .connected-item strong {
    font-size:11px
  }
  .stage-bottom {
    font-size:8px;
    margin-top:12px
  }
  .product-capabilities {
    font-size:8px;
    padding-block:23px;
    gap:13px
  }
  .section-heading h2 {
    font-size:35px
  }
  .section-heading>p {
    font-size:14px;
    line-height:1.7;
    margin-top:21px
  }
  .experience-pair {
    grid-template-columns:1fr
  }
  .experience-pair article {
    padding:27px 24px
  }
  .experience-pair h3 {
    font-size:30px;
    margin:22px 0
  }
  .experience-pair h3 br {
    display:none
  }
  .experience-pair article>p {
    font-size:12px
  }
  .experience-heading .eyebrow {
    font-size:9px
  }
  .shop-record {
    padding:18px;
    margin-top:20px
  }
  .shop-record-top {
    flex-direction:row;
    align-items:center
  }
  .shop-record dl>div {
    display:flex;
    font-size:10px;
    padding:12px 0
  }
  .shop-record dd {
    text-align:right;
    margin:0
  }
  .customer-tracker {
    max-width:none;
    padding:23px
  }
  .customer-tracker>strong {
    font-size:23px
  }
  .operations-bento {
    grid-template-columns:1fr;
    gap:13px
  }
  .operations-bento article {
    padding:26px
  }
  .operations-bento h3 {
    font-size:29px
  }
  .bento-intelligence .eyebrow {
    font-size:9px
  }
  .bento-top .example-label {
    font-size:9px
  }
  .intelligence-metrics strong {
    font-size:40px
  }
  .bento-attention h3 br,.bento-brief h3 br {
    display:none
  }
  .attention-example {
    margin:23px 0
  }
  .bento-brief .text-link {
    margin-top:15px
  }
  .ai-feature {
    grid-template-columns:1fr;
    gap:35px
  }
  .home-ai h2 {
    font-size:43px
  }
  .section-intro {
    font-size:15px;
    line-height:1.75;
    margin-top:22px
  }
  .ai-guardrail {
    margin-top:20px!important
  }
  .call-composition {
    padding:24px 20px
  }
  .call-dialogue p {
    font-size:12px
  }
  .call-dialogue p:first-child {
    margin-right:16px
  }
  .call-dialogue p:last-child {
    margin-left:16px
  }
  .plan-ladder {
    grid-template-columns:1fr
  }
  .plan-ladder>a {
    padding:25px
  }
  .plan-ladder>a+a {
    border-left:0;
    border-top:1px solid var(--line)
  }
  .plan-ladder h3 {
    font-size:25px
  }
  .plan-ladder .eyebrow {
    margin-bottom:12px
  }
  .ladder-price {
    margin-top:22px;
    font-size:30px
  }
  .ladder-arrow {
    bottom:27px;
    right:25px
  }
  .section-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
    font-size:10px;
    margin-top:20px
  }
  .company-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .company-grid h2 {
    font-size:36px
  }
  .company-grid>div>p:last-child {
    font-size:14px
  }
  .growth-aside {
    border-left:0;
    border-top:1px solid var(--line);
    padding:28px 0 0
  }
  .growth-aside h3 {
    font-size:26px
  }
  .growth-aside p {
    margin:18px 0;
    font-size:13px
  }
  .closing-cta h2 {
    font-size:37px
  }
  .closing-cta p:not(.eyebrow) {
    font-size:14px;
    margin:22px auto
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:30px;
    padding-bottom:30px
  }
  .footer-top>div:first-child {
    grid-column:1/-1
  }
  .footer-links {
    font-size:11px;
    gap:5px
  }
  .footer-top p {
    font-size:12px;
    margin-top:16px
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    font-size:10px;
    padding-top:24px
  }
  .site-footer {
    padding-top:40px
  }
  .product-hero .hero-copy {
    padding-bottom:30px
  }
  .product-hero h1 {
    font-size:clamp(43px,11vw,60px)
  }
  .product-hero .hero-description {
    font-size:15px;
    margin-top:22px
  }
  .product-hero .button-row {
    gap:19px;
    margin-top:24px
  }
  .product-subnav nav {
    gap:5px 22px;
    font-size:10px
  }
  .product-subnav strong {
    display:none
  }
  .product-subnav>.container {
    padding-block:10px
  }
  .product-story {
    padding-block:60px
  }
  .story-copy {
    display:block
  }
  .story-copy>h2 {
    font-size:36px
  }
  .story-chapter {
    padding:24px 0
  }
  .story-chapter h3 {
    font-size:27px
  }
  .story-chapter p {
    font-size:13px
  }
  .story-stage {
    padding:14px;
    margin-inline:-5px
  }
  .story-controls {
    gap:4px
  }
  .story-controls button {
    font-size:9px;
    padding:7px 5px;
    min-width:0
  }
  .story-panel {
    padding:22px 18px;
    min-height:360px
  }
  .story-stage>p {
    font-size:9px
  }
  .stage-topline {
    gap:10px;
    font-size:10px
  }
  .record-heading {
    font-size:22px
  }
  .record-row {
    font-size:11px
  }
  .record-meta {
    font-size:11px
  }
  .experience-grid {
    grid-template-columns:1fr
  }
  .experience-side {
    padding:26px
  }
  .experience-side h3 {
    font-size:28px
  }
  .communication-layout {
    gap:28px
  }
  .communication-ledger {
    padding:22px 18px
  }
  .ledger-item {
    gap:10px
  }
  .ledger-time {
    font-size:9px;
    min-width:30px
  }
  .ledger-copy strong {
    font-size:12px
  }
  .ledger-copy p {
    font-size:11px
  }
  .ledger-state {
    font-size:9px
  }
  .intelligence-grid {
    grid-template-columns:1fr;
    gap:30px
  }
  .intelligence-card:last-child {
    grid-column:auto
  }
  .intelligence-card h3 {
    font-size:27px
  }
  .pricing-hero {
    padding:46px 0 32px
  }
  .pricing-hero h1 {
    font-size:43px
  }
  .pricing-hero .hero-description {
    font-size:14px;
    margin:22px auto
  }
  .pricing-context {
    flex-wrap:wrap;
    gap:8px 18px;
    font-size:10px;
    margin-top:20px
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:17px
  }
  .plan-card {
    padding:28px
  }
  .plan-label {
    min-height:0;
    margin-bottom:20px
  }
  .plan-card h3 {
    font-size:36px
  }
  .plan-description {
    min-height:0;
    font-size:14px;
    margin-top:12px;
    max-width:270px
  }
  .price {
    font-size:45px;
    margin:24px 0 7px
  }
  .plan-card .button {
    font-size:12px;
    margin:23px 0
  }
  .includes-label {
    font-size:12px
  }
  .check-list li {
    font-size:12px
  }
  .plan-icon {
    display:none
  }
  .plan-note {
    font-size:11px
  }
  .pricing-footnote {
    font-size:10px
  }
  .plans-section {
    padding-bottom:60px
  }
  .plan-comparison>summary {
    padding:22px 18px;
    font-size:12px;
    align-items:center
  }
  .plan-comparison summary small {
    display:block;
    margin:5px 0 0;
    font-size:9px
  }
  .comparison-table {
    min-width:510px;
    font-size:11px
  }
  .comparison-table th,.comparison-table td {
    padding:14px
  }
  .comparison-note {
    font-size:11px
  }
  .setup-callout,.faq-grid,.three-steps {
    grid-template-columns:1fr;
    gap:28px
  }
  .faq-list summary {
    font-size:13px
  }
  .faq-list p {
    font-size:12px
  }
  .growth-hero h1 {
    font-size:44px
  }
  .growth-system-preview {
    padding:22px 18px
  }
  .preview-label {
    align-items:flex-start
  }
  .preview-label .eyebrow {
    font-size:8px
  }
  .preview-label .small-badge {
    font-size:8px
  }
  .capability-grid {
    grid-template-columns:1fr;
    gap:10px
  }
  .capability-card {
    padding:25px 0
  }
  .capability-card h3 {
    margin:15px 0 14px
  }
  .capability-tag {
    padding-top:18px
  }
  .scope-card {
    padding:25px
  }
  .workflow-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .workflow-grid h3 {
    margin:14px 0 13px
  }
  .hero-grid {
    gap:35px
  }
  .booking-choice {
    padding-top:45px
  }
  .booking-intro h1 {
    font-size:37px
  }
  .booking-intro p {
    font-size:14px
  }
  .solution-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .booking-choice-card h2 {
    font-size:31px
  }
  .booking-choice-card p {
    font-size:14px;
    margin:20px 0 25px
  }
  .booking-page {
    padding-top:25px
  }
  .booking-back {
    margin-bottom:23px
  }
  .booking-calendar {
    margin-inline:-8px
  }
  .booking-fallback {
    font-size:11px
  }
  .booking-expectations {
    gap:10px;
    font-size:11px
  }
}
@media(max-width:360px) {
  .container {
    padding-inline:18px
  }
  .nav-shell {
    gap:8px
  }
  .brand {
    font-size:16px;
    gap:6px
  }
  .brand img {
    width:23px;
    height:23px
  }
  .nav-actions>.button {
    padding-inline:10px;
    font-size:10px
  }
  .nav-enhanced .menu-toggle {
    width:40px
  }
  .home-hero-heading>.eyebrow {
    font-size:8px;
    gap:10px
  }
  .home-hero h1 {
    font-size:50px
  }
  .hero-intro-row .button-row {
    gap:12px
  }
  .hero-intro-row .button-row .button {
    gap:11px;
    padding-inline:14px
  }
  .text-link {
    font-size:11px
  }
  .record-top strong {
    font-size:18px
  }
  .record-top>.state {
    padding:3px 5px;
    font-size:7px
  }
  .experience-pair article {
    padding:23px 19px
  }
  .shop-record dl>div {
    font-size:9px
  }
  .bento-top {
    gap:10px
  }
  .bento-top .example-label {
    font-size:8px
  }
  .intelligence-metrics span {
    font-size:9px
  }
  .intelligence-metrics strong {
    font-size:35px
  }
  .operations-bento article {
    padding:24px 21px
  }
  .fleet-example {
    gap:10px
  }
  .fleet-example>div {
    font-size:11px
  }
  .fleet-example .state {
    font-size:9px
  }
  .stage-bottom {
    font-size:7px
  }
  .call-composition {
    padding:22px 17px
  }
  .call-outcome strong {
    font-size:10px
  }
  .section-heading h2 {
    font-size:32px
  }
  .pricing-hero h1 {
    font-size:38px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .button:hover,.solution-card:hover,.text-link:hover span {
    transform:none
  }
}
/* Detail-page compositions share the same type and state system. */
.chapter-number {
  display:block;
  font:11px/1.5 ui-monospace,monospace;
  color:var(--teal-text);
  margin-bottom:23px;
  text-transform:uppercase;
  letter-spacing:.07em
}
.chapter-detail {
  font-size:12px!important;
  color:var(--subtle);
  margin-top:20px
}
.story-controls {
  display:none
}
.story-enhanced .story-controls {
  display:flex
}
.record-heading h3 {
  font-size:29px;
  line-height:1.1;
  margin:16px 0
}
.record-heading>p {
  font-size:12px;
  letter-spacing:0;
  font-weight:400;
  color:var(--muted)
}
.record-note {
  padding:17px;
  background:var(--surface);
  margin-top:16px;
  border-radius:5px
}
.record-note p {
  font-size:11px;
  line-height:1.6;
  margin:8px 0
}
.note-visibility {
  font-size:9px;
  color:var(--subtle)
}
.record-connections {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px;
  font-size:9px;
  color:var(--teal-text)
}
.record-connections span {
  background:var(--teal-pale);
  padding:5px 8px;
  border-radius:3px
}
.transport-need {
  font-size:11px;
  margin:20px 0
}
.transport-need strong {
  display:block;
  margin:8px 0;
  font-size:15px
}
.transport-need p {
  font-size:11px
}
.attention-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ac8752;
  flex:none;
  margin-top:7px
}
.attention-item>div {
  flex:1
}
.stage-topline .eyebrow {
  font-size:9px;
  margin:0
}
.record-heading .record-status {
  font-size:9px;
  letter-spacing:0
}
.state-success {
  color:var(--teal-text)
}
.state-pending {
  color:var(--subtle)
}
.experience-section {
  background:var(--surface)
}
.customer-side {
  background:var(--teal-pale)
}
.customer-stage strong {
  display:block;
  font-size:25px;
  letter-spacing:-.04em;
  margin-top:8px
}
.customer-progress {
  display:flex;
  gap:8px;
  list-style:none;
  padding:0;
  margin:28px 0;
  font-size:9px
}
.customer-progress li {
  flex:1;
  padding-top:13px;
  border-top:3px solid var(--line)
}
.customer-progress .complete {
  border-color:var(--teal)
}
.customer-progress .current {
  border-color:var(--teal-text);
  color:var(--ink)
}
.customer-update {
  margin:22px 0;
  padding:18px 20px;
  border-left:2px solid var(--teal);
  font-size:13px;
  background:var(--card)
}
.experience-detail {
  margin-top:22px;
  font-size:13px!important
}
.experience-caption {
  font-size:11px!important;
  color:var(--subtle)
}
.quick-update-strip {
  display:flex;
  gap:35px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:30px
}
.quick-update-strip .eyebrow {
  margin:0;
  flex:none
}
.quick-update-strip p {
  font-size:13px
}
.precision-note {
  padding-top:28px;
  margin-top:30px;
  border-top:1px solid var(--line)
}
.precision-note .eyebrow {
  margin-bottom:12px
}
.precision-note h3 {
  font-size:24px;
  margin:0 0 14px
}
.precision-note p {
  font-size:13px
}
.communication-ledger .ledger-copy h3 {
  font-size:16px;
  letter-spacing:-.02em;
  line-height:1.4;
  margin:6px 0
}
.communication-ledger .ledger-state {
  font-size:9px;
  max-width:65px;
  white-space:normal;
  text-align:right
}
.communication-ledger figcaption {
  font-size:10px;
  margin-top:22px
}
.section-deep {
  background:var(--surface)
}
.metric-strip strong {
  font-size:18px;
  letter-spacing:-.025em;
  margin-top:5px
}
.attention-list {
  list-style:none;
  padding:0!important;
  margin:25px 0
}
.attention-list li {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.daily-brief-card {
  padding:24px;
  background:var(--teal-pale);
  border-top-color:var(--teal)
}
.brief-footer {
  display:block;
  font:10px/1.5 ui-monospace,monospace;
  margin-top:30px;
  color:var(--teal-text)
}
.section-footnote {
  margin-top:25px;
  font-size:11px
}
.product-demo-band {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:30px 0;
  border-top:1px solid var(--line);
  margin-top:35px
}
.product-demo-band h3 {
  font-size:25px;
  margin-bottom:12px
}
.product-demo-band p {
  font-size:13px;
  max-width:600px
}
.product-demo-band .button {
  flex:none
}
.pricing-phone-flow {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px
}
.pricing-phone-flow li {
  border-top:1px solid var(--line);
  padding-top:25px
}
.pricing-phone-flow h3 {
  font-size:23px;
  margin:20px 0 16px
}
.pricing-phone-flow p {
  font-size:13px
}
.comparison-wrap {
  overflow:auto
}
.comparison-table caption {
  text-align:left;
  padding:18px 24px;
  font-size:12px;
  color:var(--ink)
}
.comparison-table th span {
  display:block;
  font-size:10px;
  margin-top:5px;
  color:var(--muted)
}
.table-group th {
  background:var(--surface);
  color:var(--teal-text);
  font-size:11px;
  text-align:left
}
.not-included {
  color:var(--subtle)
}
.setup-callout .setup-price {
  font-size:44px;
  line-height:1.3;
  margin-bottom:20px
}
.setup-price span {
  display:block;
  font-size:12px;
  letter-spacing:0;
  color:var(--muted)
}
@media(max-width:800px) {
  .story-chapter .chapter-number {
    margin-bottom:15px
  }
  .pricing-phone-flow {
    grid-template-columns:1fr 1fr
  }
  .quick-update-strip {
    align-items:flex-start
  }
  .product-demo-band {
    align-items:flex-start;
    flex-direction:column
  }
  .story-enhanced .story-copy {
    display:block
  }
  .story-enhanced .story-chapter {
    min-height:230px
  }
  .story-stage {
    width:100%
  }
  .story-enhanced .story-layout {
    gap:10px
  }
}
@media(max-width:600px) {
  .story-enhanced .story-chapter {
    min-height:275px;
    padding:25px 0 10px
  }
  .record-heading h3 {
    font-size:28px
  }
  .experience-side .record-row {
    font-size:10px
  }
  .quick-update-strip {
    flex-direction:column;
    gap:14px
  }
  .quick-update-strip p {
    font-size:12px
  }
  .communication-ledger .stage-topline {
    display:block
  }
  .communication-ledger .stage-topline .example-label {
    display:block;
    margin-top:8px
  }
  .communication-ledger .ledger-state {
    font-size:8px;
    max-width:52px
  }
  .communication-ledger .ledger-copy h3 {
    font-size:14px
  }
  .pricing-phone-flow {
    grid-template-columns:1fr;
    gap:22px
  }
  .pricing-phone-flow li {
    padding-top:22px
  }
  .pricing-phone-flow h3 {
    margin:15px 0 12px
  }
  .product-demo-band h3 {
    font-size:24px
  }
}
/* Keep controls comfortably tappable and the featured plan icon legible. */
.theme-switch button {
  width:44px;
  height:44px
}
.plan-featured .plan-icon {
  color:#b9ddc7
}
@media(max-width:360px) {
  .nav-enhanced .menu-toggle {
    width:44px
  }
}
@media(max-width:600px) {
  .story-enhanced .story-controls {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .story-controls button {
    font-size:12px;
    min-height:44px;
  }
}

/* Interaction pass: a single light field, connected surfaces, finite motion. */
.theme-changing body,.theme-changing .site-header,.theme-changing .section,.theme-changing .site-footer,.theme-changing .plan-card{transition:background-color .24s,color .24s,border-color .24s}
.site-header{transition:box-shadow .25s,border-color .25s}
.primary-nav a{position:relative}
.primary-nav a::after{content:"";position:absolute;bottom:7px;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.primary-nav a:hover::after,.primary-nav a:focus-visible::after,.primary-nav a[aria-current]::after{transform:scaleX(1)}
.theme-switch button{transition:background .2s,box-shadow .2s,transform .2s}
.theme-switch button:hover,.theme-switch button:focus-visible{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.theme-switch button:active{transform:scale(.94)}
.button{transition:background .2s,transform .2s,box-shadow .2s}
.button>span,.text-link>span{transition:transform .22s}
.button:hover>span,.button:focus-visible>span,.text-link:focus-visible>span{transform:translate(3px,-2px)}
.button:focus-visible{box-shadow:0 0 0 6px var(--teal-pale)}
.button:active{transform:translateY(0) scale(.98)}
.text-link:active>span{transform:translateX(5px)}
.faq-list details[open],.plan-comparison[open]{border-color:var(--teal)}
.faq-list details[open]>p{animation:detail-enter .25s ease both}
.faq-list summary:hover,.plan-comparison summary:hover{color:var(--teal-text)}
.plan-card,.solution-card{transition:border-color .25s,box-shadow .25s,transform .25s}
.plan-card:focus-within,.plan-card.is-layer-selected{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal-pale),0 20px 45px -35px #1d504c80;transform:translateY(-5px)}
.plan-featured.is-layer-selected{box-shadow:0 0 0 3px #91bba7,0 20px 45px -25px #173c3b60}
.solution-card:focus-within{border-color:var(--teal);transform:translateY(-3px)}
.hero{position:relative;isolation:isolate;background:linear-gradient(180deg,var(--paper) 34%,var(--surface) 87%,var(--paper));overflow:clip}
.hero::before{content:"";position:absolute;inset:20% -20% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 65% 65%,#82c8ad35,transparent 55%)}
.hero::after{content:"";position:absolute;inset:35% 0 0;z-index:-1;pointer-events:none;background-image:linear-gradient(#75988910 1px,transparent 1px),linear-gradient(90deg,#75988910 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 50%,transparent)}
.product-stage{position:relative;isolation:isolate;perspective:1400px;box-shadow:0 38px 75px -40px #164d405e,0 0 0 1px #86af9b33;background:radial-gradient(ellipse at 72% 10%,#345b4d,#172b2b 70%)}
.product-window{transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s;transform:rotateX(calc(var(--depth-y,0) * -1.2deg)) rotateY(calc(var(--depth-x,0) * 1.2deg));transform-origin:center}
.product-stage.is-pointed .product-window{box-shadow:0 24px 48px #0004}
.connection-controls{display:flex;align-items:center;gap:8px;margin:0 0 20px}
.connection-controls>span{font:10px/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.09em;margin-right:auto;color:#c2d8cd}
.connection-controls button{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:44px;border:1px solid #658575;border-radius:6px;padding:10px 15px;background:#203b31;color:#d4e7db;font-size:12px;transition:color .2s,background .2s,border-color .2s}
.connection-controls button[aria-pressed=true]{background:#c7edda;color:#173b2e;border-color:#c7edda}
.connection-controls button>span{font-size:17px}
.connection-controls button:hover{border-color:#c7edda}
.connection-controls button:focus-visible{outline-color:#c7edda}
.hero-detail-stack{background:#eef4eb;min-width:0}
.connection-preview{margin-top:20px}
.connection-preview+.connection-preview{padding-top:20px;border-top:1px solid #d7e2d6}
.connection-enhanced .connection-preview{border:0;padding-top:0;animation:connection-enter .36s cubic-bezier(.2,.8,.2,1) both}
.connection-symbol{display:grid;place-items:center;width:40px;height:40px;background:#dcebdc;color:#2e654b;border:1px solid #bbd3be;border-radius:10px;font-size:24px;box-shadow:0 7px 12px -8px #294d3980;margin-bottom:16px}
.connection-preview>.micro-label{font-size:9px;letter-spacing:.04em;display:block}
.connection-preview>strong{display:block;font-size:19px;line-height:1.3;letter-spacing:-.035em;margin:8px 0 18px}
.connection-fact{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #d5e2d3;font-size:10px}
.connection-fact>b{font-weight:500;color:#285d42;text-align:right}
.connection-preview>p{font-size:10px;line-height:1.7;margin-top:16px;color:#4c6253}
.connection-route{display:flex;align-items:center;gap:16px;margin:25px 16px 22px;color:#c7edda;font:11px/1.5 ui-monospace,monospace;transition:transform .32s;transform:translateX(calc(var(--depth-x,0) * -3px))}
.route-node{display:flex;align-items:center;gap:9px;white-space:nowrap}
.route-node i{width:7px;height:7px;background:#b8e7cc;border-radius:2px;box-shadow:0 0 16px #a8e4bb80}
.route-wire{flex:1;height:1px;position:relative;background:linear-gradient(90deg,#5c8b76,#c7edda);transform-origin:left}
.route-wire::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid #c7edda;border-right:1px solid #c7edda;transform:rotate(45deg)}
[data-connection=communication] .record-update{box-shadow:inset 3px 0 #3b8460;background:#e4efe0}
[data-connection=fleet] .repair-fields>div:last-child{background:#e4efe0;box-shadow:0 0 0 8px #e4efe0;border-radius:2px}
[data-connection=phone] .record-top{background:#e4efe0;box-shadow:0 0 0 10px #e4efe0;border-radius:2px}
.record-update,.record-top,.repair-fields>div{transition:background .25s,box-shadow .25s}
.hero .stage-bottom{border-top:1px solid #55716455;padding-top:12px}
.home-hero .product-stage.is-visible{animation:product-focus .8s cubic-bezier(.16,1,.3,1) both}
.connected-section{position:relative;background:radial-gradient(ellipse at 10% 0%,#a2c6b415,transparent 50%)}
.perspective-controls{display:flex;align-items:center;gap:12px;margin-bottom:22px;max-width:550px}
.perspective-controls>span{font:10px/1.4 ui-monospace,monospace;color:var(--subtle);white-space:nowrap}
.perspective-controls button{flex:1;display:flex;justify-content:space-between;gap:15px;min-height:44px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:12px;transition:background .2s,color .2s}
.perspective-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.perspective-enhanced>article{position:relative;transition:box-shadow .25s,border-color .25s}
.perspective-enhanced>article.is-perspective{box-shadow:inset 0 3px var(--teal)}
.perspective-enhanced>article.is-perspective .customer-stage,.perspective-enhanced>article.is-perspective .shop-record{animation:detail-enter .3s ease both}
.operations-bento.is-visible .intelligence-metrics>div{animation:metric-focus .6s cubic-bezier(.2,.8,.2,1) both}
.operations-bento.is-visible .intelligence-metrics>div:nth-child(2){animation-delay:.12s}
.operations-bento.is-visible .intelligence-metrics>div:nth-child(3){animation-delay:.24s}
.home-ai .call-composition.is-visible{animation:connection-enter .6s cubic-bezier(.2,.8,.2,1) both}
.story-progress{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#bedbcb;font:10px/1.4 ui-monospace,monospace}
.story-progress-track{height:2px;flex:1;background:#486054;overflow:hidden}
.story-progress-track i{display:block;width:100%;height:100%;background:#c7edda;transform:scaleX(var(--story-progress,.25));transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.story-current-label{min-width:90px;text-align:right}
.story-stage{box-shadow:0 30px 65px -35px #173c3b75;background:radial-gradient(ellipse at top right,#365b49,var(--night) 65%)}
.story-enhanced .story-panel{min-height:525px}
.story-enhanced .story-panel:not([hidden]){animation:story-arrive .42s cubic-bezier(.2,.8,.2,1) both}
.story-enhanced .story-panel:not([hidden])>.record-row,.story-enhanced .story-panel:not([hidden]) .ledger-item,.story-enhanced .story-panel:not([hidden]) .fleet-assignment,.story-enhanced .story-panel:not([hidden]) .attention-item{animation:detail-enter .42s .08s ease both}
.story-chapter{transition:border-color .3s}
.story-chapter.is-current{border-color:var(--teal)}
.story-chapter.is-current .chapter-number{display:flex;align-items:center;gap:14px}
.story-chapter.is-current .chapter-number::before{content:"";width:24px;height:1px;background:var(--teal)}
.product-story[data-direction=back]{--story-slide:-18px}
.product-story[data-direction=forward]{--story-slide:18px}
.communication-section{background:linear-gradient(135deg,var(--paper) 20%,var(--surface));position:relative}
.communication-explorer{padding:32px;box-shadow:0 28px 55px -35px #234a3d60;overflow:hidden}
.ledger-intro{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin:30px 0}
.ledger-intro h3{font-size:30px}
.ledger-intro p{font-size:11px;max-width:110px}
.event-timeline{list-style:none;padding:0;margin:0;position:relative}
.event-timeline::before{content:"";position:absolute;left:41px;top:28px;bottom:30px;width:1px;background:var(--line)}
.event-timeline>li{position:relative;display:grid;grid-template-columns:57px minmax(0,1fr);align-items:start}
.event-time{font:10px/1.5 ui-monospace,monospace;padding-top:29px;color:var(--subtle);position:relative}
.event-time::after{content:"";position:absolute;width:7px;height:7px;right:12px;top:32px;border:1px solid var(--teal);background:var(--card);border-radius:50%;box-shadow:0 0 0 4px var(--card)}
.event-timeline>li:has(details[open]) .event-time::after{background:var(--teal);box-shadow:0 0 0 4px var(--teal-pale)}
.communication-event{border-bottom:1px solid var(--line);min-width:0}
.communication-event summary{list-style:none;display:flex;align-items:center;gap:10px;padding:20px 0;cursor:pointer;min-height:80px}
.communication-event summary::-webkit-details-marker{display:none}
.communication-event summary>span:first-child{flex:1;min-width:0}
.communication-event summary .micro-label{display:block;font-size:9px;margin-bottom:5px;color:var(--teal-text)}
.communication-event summary strong{font-size:14px;line-height:1.4;display:block}
.event-state{font-size:9px;padding:4px 6px;border:1px solid var(--line);border-radius:4px;color:var(--muted);background:var(--surface)}
.event-state.delivered-state{color:#286344;background:#e3f3e8;border-color:#bfd7c6}
.event-state.queued-state{color:#79551b;background:#f7ebd4;border-color:#e1d0ae}
.event-plus{font-size:20px;color:var(--teal-text);transition:transform .25s}
.communication-event[open] .event-plus{transform:rotate(45deg)}
.communication-event[open] summary strong{color:var(--teal-text)}
.event-detail{padding:0 5px 22px 0;animation:detail-enter .28s ease both}
.event-detail p{font-size:12px;line-height:1.8}
.event-connection{display:block;margin-top:14px;color:var(--teal-text);font:10px/1.6 ui-monospace,monospace}
.event-detail .text-link{font-size:11px;margin-top:10px}
.capability-progression{display:grid;grid-template-columns:1fr 1fr;gap:18px 45px;align-items:center;padding:28px 32px;margin-bottom:40px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(120deg,var(--surface),var(--paper))}
.capability-controls{display:flex;align-items:center;gap:10px}
.capability-controls button{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;min-height:46px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:5px;font:10px ui-monospace,monospace;transition:background .2s,border-color .2s}
.capability-controls button strong{font:500 16px Inter,sans-serif;color:inherit}
.capability-controls button[aria-pressed=true]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.capability-description{font-size:13px;max-width:390px;min-height:44px;display:flex;align-items:center}
.capability-layers{display:flex;gap:8px;grid-column:1/-1}
.capability-layers span{flex:1;padding:8px 12px;border-top:2px solid var(--line);font-size:11px;color:var(--subtle);transition:border-color .3s,background .3s}
.capability-layers .is-included{border-color:var(--teal);background:var(--teal-pale);color:var(--teal-text)}
@keyframes connection-enter{from{opacity:.4;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes story-arrive{from{opacity:.45;transform:translateX(var(--story-slide,18px)) scale(.985)}to{opacity:1;transform:none}}
@keyframes detail-enter{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes product-focus{from{transform:perspective(1400px) rotateX(3deg) translateY(18px);opacity:.8}to{transform:none;opacity:1}}
@keyframes metric-focus{from{transform:translateY(7px);opacity:.5}to{transform:none;opacity:1}}
@media(hover:hover) and (pointer:fine){.operations-bento a:focus-visible,.plan-ladder>a:hover{background:var(--teal-pale)}.plan-card:hover{border-color:var(--teal)}.bento-intelligence:hover .intelligence-metrics strong{color:#d6f2df}.bento-attention:hover .attention-example{border-color:var(--teal)}}
@media(max-width:1060px){.nav-enhanced .primary-nav.is-open{animation:detail-enter .2s ease both}}
@media(max-width:1100px) and (min-width:601px){.hero-detail-stack{display:block}.product-window-body{grid-template-columns:minmax(0,1fr) 240px}.workspace-rail{display:none}}
@media(max-width:800px){.story-enhanced .story-panel{min-height:475px}.story-stage{margin-top:0}.perspective-enhanced{grid-template-columns:1fr}.perspective-enhanced>article:not([hidden]){animation:detail-enter .25s ease both}.capability-progression{grid-template-columns:1fr;gap:15px;padding:23px}.capability-description{min-height:44px;max-width:none}.connection-controls>span{display:none}}
@media(max-width:600px){.connection-controls{gap:5px;margin-bottom:14px}.connection-controls button{flex:1;justify-content:center;padding:9px 5px;gap:4px;font-size:11px}.connection-controls button>span{display:none}.connection-controls button:first-of-type{flex:1.5}.connection-route{gap:7px;margin:20px 2px;font-size:9px}.route-node{gap:5px}.route-node i{display:none}.route-wire{min-width:9px}.hero-detail-stack{display:block;padding:18px}.connection-preview{margin-top:10px}.connection-preview>strong{font-size:21px;margin:5px 0 14px}.connection-preview>strong br{display:none}.connection-preview .connection-symbol{float:right;width:34px;height:34px;margin:0 0 10px 10px}.connection-fact{font-size:11px;padding:7px 0}.connection-preview>p{font-size:11px;margin-top:12px}.connection-enhanced .connection-preview{min-height:218px}.hero .stage-bottom{font-size:8px}.perspective-controls{gap:8px}.perspective-controls>span{display:none}.perspective-controls button{padding:12px;font-size:12px}.story-progress{font-size:10px;gap:8px}.story-current-label{min-width:83px}.story-enhanced .story-panel{min-height:480px}.communication-explorer{padding:23px 17px}.ledger-intro{display:block;margin:25px 0 10px}.ledger-intro h3{font-size:27px}.ledger-intro p{max-width:none;margin-top:12px}.event-timeline>li{grid-template-columns:35px minmax(0,1fr)}.event-timeline::before{left:25px}.event-time{font-size:8px;right:5px}.event-time::after{right:0;width:5px;height:5px;top:32px}.communication-event summary{flex-wrap:wrap;gap:5px;padding:20px 0}.communication-event summary>span:first-child{flex-basis:calc(100% - 25px)}.communication-event summary .micro-label{font-size:9px}.communication-event summary strong{font-size:14px}.event-plus{order:1}.event-state{order:2;font-size:10px;margin-top:4px}.event-detail p{font-size:12px}.capability-progression{padding:18px;margin-bottom:28px}.capability-controls{gap:5px}.capability-controls button{gap:7px;padding:10px 5px}.capability-layers{gap:5px}.capability-layers span{font-size:10px;padding:8px 5px}.plan-card.is-layer-selected{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.product-window,.connection-route,.plan-card.is-layer-selected{transform:none!important}.theme-changing *,body *,body *::before,body *::after{animation:none!important;transition:none!important}.product-stage{--depth-x:0;--depth-y:0}}

/* AI Concierge: a manual five-part example, with a complete static baseline. */
.concierge-showcase {
  position:relative;
  overflow:hidden;
  background:#152c2b;
  color:#bdd0c7;
  isolation:isolate;
}
.concierge-showcase::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 85% 42%,#46756138,transparent 58%),linear-gradient(135deg,#28494122,transparent 45%);
}
.concierge-showcase .section-heading h2 {color:#f0f6ef}
.concierge-showcase .section-heading .eyebrow {color:#a7d9c5}
.concierge-showcase .section-heading>p {color:#bdd0c7}
.cq-flow {display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:74px;align-items:start;margin-top:64px}
.cq-guide {min-width:0;padding-top:6px}
.cq-example-label {font:11px/1.5 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#b5e2cb}
.cq-example-label>span {display:inline-block;margin-right:8px;font-size:19px}
.cq-guide-intro {font-size:26px;line-height:1.25;letter-spacing:-.03em;color:#e1eee3;margin-top:23px!important;margin-bottom:30px}
.cq-steps {list-style:none;margin:0;padding:0}
.cq-steps>li {border-top:1px solid #35504a;padding:16px 0}
.cq-step-copy h3 {font-size:22px;color:#eef6ee;margin-bottom:12px}
.cq-step-copy p {font-size:13px;line-height:1.75;color:#bfd0c8}
.cq-static-number {color:#91b4a4;font:12px ui-monospace,monospace;letter-spacing:.04em}
.cq-step-button {width:100%;min-height:52px;display:flex;align-items:center;gap:18px;border:0;background:none;color:#aec5bb;text-align:left;padding:7px 0;transition:color 180ms ease}
.cq-step-number {font:12px/1 ui-monospace,monospace;color:#8fae9e}
.cq-step-name {font-size:21px;line-height:1.2;letter-spacing:-.03em}
.cq-step-arrow {margin-left:auto;color:#91bea7;opacity:0;transform:translate(-4px,4px);transition:opacity 180ms,transform 180ms}
.cq-step-button:hover,.cq-step-button[aria-pressed=true] {color:#e7f6df}
.cq-step-button[aria-pressed=true] .cq-step-number {color:#c8e9b4}
.cq-step-button[aria-pressed=true] .cq-step-arrow,.cq-step-button:focus-visible .cq-step-arrow {opacity:1;transform:none}
.cq-step-button:focus-visible,.cq-next:focus-visible {outline:3px solid #bfe8c8;outline-offset:6px}
.cq-enhanced .cq-steps>li {padding:0}
.cq-enhanced .cq-step-copy {padding:0 24px 23px 33px}
.cq-enhanced .cq-step-copy h3 {display:none}
.cq-enhanced .cq-static-number {display:none}
.cq-stage {min-width:0;position:relative;background:#203b33;border:1px solid #4c6c5c;border-radius:14px;padding:13px;box-shadow:0 30px 100px -45px #050f0cbb,0 0 85px -45px #a8dba74d}
.cq-stage::before {content:"";position:absolute;top:24px;right:-12px;bottom:24px;width:12px;z-index:-1;background:#355144;border:1px solid #56705a;border-radius:0 8px 8px 0}
.cq-stage-bar {display:flex;justify-content:space-between;gap:14px;padding:5px 6px 16px;font:10px/1.5 ui-monospace,monospace;letter-spacing:.04em;color:#bed6c5}
.cq-stage-bar>span:last-child {font-family:inherit;color:#b6cbbc;letter-spacing:0}
.cq-caller {display:flex;gap:13px;align-items:center;padding:19px 18px 22px;color:#d7e9dc}
.cq-caller>div {min-width:0}
.cq-caller>div>span {display:block;font-size:11px;color:#b1c9ba;margin-bottom:4px}
.cq-caller strong {font-size:15px;font-weight:500;color:#e7f2e8;letter-spacing:-.015em;line-height:1.35;display:block}
.cq-phone-icon {width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid #68846b;border-radius:50%;background:#344e3b;color:#d1ecc5}
.cq-phone-icon svg {width:19px;height:19px}
.cq-context-tag {margin-left:auto;text-align:right;font:10px/1.7 ui-monospace,monospace;color:#c5d8c8}
.cq-scene {border-radius:8px;background:#edf2e8;position:relative;overflow:hidden;color:#536859}
.cq-panel {position:relative;overflow:hidden;padding:37px 34px 30px;border-top:1px solid #cbd9cd;isolation:isolate}
.cq-panel:first-child {border-top:0}
.cq-panel[hidden] {display:none!important}
.cq-panel-index {position:absolute;right:10px;top:-21px;z-index:-1;font-size:178px;line-height:1;letter-spacing:-.1em;color:#dce8d9;pointer-events:none}
.cq-panel-eyebrow {position:relative;font:10px/1.5 ui-monospace,monospace;letter-spacing:.055em;text-transform:uppercase;color:#446651;max-width:85%;min-height:30px}
.cq-panel h3 {position:relative;color:#193c2f;font-size:clamp(29px,2.7vw,39px);line-height:1.1;margin-top:12px;margin-bottom:31px;letter-spacing:-.045em}
.cq-identity {display:grid;gap:1px;background:#cbd9c9;border:1px solid #cbd9c9;border-radius:8px;overflow:hidden}
.cq-identity>div {padding:15px 18px;background:#f9fbf6}
.cq-identity span {display:block;font-size:11px;margin-bottom:3px;color:#5f7566}
.cq-identity strong {font-size:18px;color:#244832;font-weight:500;letter-spacing:-.025em}
.cq-boundary {display:flex;align-items:flex-start;gap:14px;margin-top:26px}
.cq-boundary>span {font-size:25px;line-height:1;color:#598866}
.cq-boundary p,.cq-panel-note {font-size:12px;line-height:1.7;color:#486450}
.cq-panel-note {margin-top:23px!important}
.cq-repair-card {padding:21px 21px 4px;background:#fbfcf8;border:1px solid #c4d4c3;border-radius:8px;box-shadow:0 12px 25px -20px #25432e55}
.cq-record-title {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}
.cq-record-title strong {font-size:17px;color:#244832}
.cq-record-title>span {font-size:9px;color:#456e4d;background:#e1eddd;padding:5px 7px;border-radius:3px;text-align:center}
.cq-repair-card dl {margin:0}
.cq-repair-card dl>div {display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid #dce4d6;font-size:11px;line-height:1.5}
.cq-repair-card dd {margin:0;text-align:right;color:#244832;font-weight:500}
.cq-answer {background:#dce9d4;border:1px solid #bdd0b7;border-radius:8px;padding:22px}
.cq-small-label {font:10px ui-monospace,monospace;letter-spacing:.06em;color:#52744f;text-transform:uppercase}
.cq-answer p {font-size:25px;line-height:1.3;letter-spacing:-.035em;color:#23482c;margin:12px 0}
.cq-answer strong {color:#23482c;font-weight:500}
.cq-answer-note {display:block;font-size:11px;color:#4c6b4e}
.cq-request {display:flex;gap:13px;align-items:flex-start;padding:20px 0 0}
.cq-request-icon {width:32px;height:32px;display:grid;place-items:center;flex:none;background:#fff;border:1px solid #d2dfcb;border-radius:6px;color:#416b41}
.cq-request strong {display:block;color:#244832;font-size:13px;margin-bottom:5px}
.cq-request div>span {font-size:12px;line-height:1.6;color:#536d55;display:block}
.cq-transfer-route {display:flex;align-items:flex-start;margin:43px 0 40px;gap:12px}
.cq-transfer-route>div {flex:0 1 130px;text-align:center}
.cq-route-icon {width:68px;height:68px;display:grid;place-items:center;font-size:30px;background:#fff;border:1px solid #c2d3bb;border-radius:15px;margin:0 auto 15px;color:#3d6440}
.cq-route-destination {background:#d3e5ca;border-color:#b1c7a4;font-size:35px}
.cq-transfer-route strong {font-size:12px;line-height:1.6;color:#34563b;font-weight:500;display:block}
.cq-route-line {position:relative;display:block;flex:1;height:1px;background:#b8cdb0;margin-top:34px;min-width:12px}
.cq-route-line::after {content:"";position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1px solid #73916d;border-right:1px solid #73916d;transform:rotate(45deg)}
.cq-route-line i {display:block;width:100%;height:2px;background:#5c8955;transform-origin:left}
.cq-history-card {border:1px solid #b8ceb1;border-radius:8px;overflow:hidden;background:#f9fbf5;box-shadow:0 14px 30px -20px #40603b44}
.cq-history-heading {display:flex;gap:12px;align-items:center;padding:19px 19px 18px;background:#e1edda}
.cq-history-icon {color:#577b4c;font-size:28px}
.cq-history-heading>div>span {font-size:10px;display:block;color:#56764e;margin-bottom:3px}
.cq-history-heading strong {display:block;font-size:16px;color:#315331}
.cq-history-badge {margin-left:auto;color:#53764b;font-size:10px}
.cq-history-card>p {font-size:14px;line-height:1.6;padding:22px 19px;color:#325035}
.cq-history-links {display:flex;align-items:center;gap:10px;padding:0 19px 22px;font:10px/1.5 ui-monospace,monospace;color:#53754d}
.cq-history-links i {flex:1;height:1px;background:#bdd1b4}
.cq-stage-footer {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 9px 12px}
.cq-stage-footer>div {display:flex;align-items:center;gap:12px;flex:1;max-width:180px}
.cq-counter {font:11px ui-monospace,monospace;color:#bcd5bd;white-space:nowrap}
.cq-progress {height:2px;flex:1;min-width:24px;background:#42634d}
.cq-progress i {height:2px;display:block;width:100%;background:#c3e7ab;transform:scaleX(.2);transform-origin:left;transition:transform 420ms cubic-bezier(.2,.75,.25,1)}
.cq-next {flex:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 15px;min-height:46px;border:1px solid #7f9d7a;border-radius:5px;background:#cce5ba;color:#1f3d28;font-size:12px;font-weight:500;line-height:1.4;text-align:left;transition:background 160ms}
.cq-next>span {font-size:18px;transition:transform 160ms}
.cq-next:hover {background:#e1f2d7}
.cq-next:hover>span,.cq-next:focus-visible>span {transform:translateX(3px)}
.cq-next:active {background:#bdd6aa}
.cq-disclosure {font:9px/1.6 ui-monospace,monospace;letter-spacing:.02em;color:#a8c0ae;padding:11px 7px 1px}
.cq-enhanced .cq-panel {min-height:460px;border:0}
.cq-trust {display:grid;grid-template-columns:.7fr 1.3fr;gap:74px;align-items:start;border-top:1px solid #3d574b;margin-top:50px;padding-top:29px}
.cq-trust h3 {color:#dfeddf;font-size:22px;line-height:1.25}
.cq-trust p {color:#b3c9bd;font-size:12px;line-height:1.8;max-width:620px}
@media(max-width:1050px) {
  .cq-flow,.cq-trust {gap:35px;grid-template-columns:minmax(200px,.65fr) minmax(0,1.35fr)}
  .cq-panel {padding:28px 25px}
  .cq-context-tag {display:none}
  .cq-stage-footer {gap:12px}
  .cq-stage-footer>div {max-width:100px}
}
@media(max-width:800px) {
  .cq-flow {display:block;margin-top:37px}
  .cq-guide {margin-bottom:28px}
  .cq-guide-intro {font-size:24px;margin-top:16px!important;margin-bottom:24px}
  .cq-guide-intro br {display:none}
  .cq-enhanced .cq-steps {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
  .cq-enhanced .cq-steps>li {display:contents}
  .cq-enhanced .cq-step-button {grid-row:1;min-height:54px;justify-content:center;border-top:1px solid #426052;border-bottom:2px solid #426052;padding:10px 0;gap:0}
  .cq-enhanced .cq-step-button[aria-pressed=true] {border-bottom-color:#c5e7b3;background:#2d493b}
  .cq-enhanced .cq-step-name {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cq-enhanced .cq-step-arrow {display:none}
  .cq-enhanced .cq-step-number {font-size:17px}
  .cq-enhanced .cq-step-copy {grid-column:1/-1;grid-row:2;padding:23px 0 0;min-height:134px}
  .cq-enhanced .cq-step-copy h3 {display:block;font-size:25px;margin-bottom:12px}
  .cq-step-copy p {max-width:580px;font-size:13px}
  .cq-stage {max-width:640px;margin:auto}
  .cq-stage::before {display:none}
  .cq-context-tag {display:block}
  .cq-enhanced .cq-panel {min-height:425px}
  .cq-panel h3 {font-size:35px}
  .cq-stage-footer>div {max-width:155px}
  .cq-trust {display:block;margin-top:32px;padding-top:25px}
  .cq-trust h3 {font-size:23px;margin-bottom:17px}
}
@media(max-width:450px) {
  .cq-stage {padding:9px;border-radius:10px;margin-inline:-5px}
  .cq-stage-bar {font-size:9px;gap:9px;padding:5px 4px 10px}
  .cq-stage-bar>span:first-child {max-width:145px}
  .cq-caller {padding:12px 5px 20px;gap:10px}
  .cq-phone-icon {width:34px;height:34px}
  .cq-caller strong {font-size:14px}
  .cq-context-tag {display:none}
  .cq-panel {padding:28px 21px 25px}
  .cq-enhanced .cq-panel {min-height:430px}
  .cq-panel-index {font-size:145px;top:-12px;right:7px}
  .cq-panel-eyebrow {font-size:9px;min-height:30px;max-width:88%}
  .cq-panel h3 {font-size:29px;margin-top:11px;margin-bottom:27px}
  .cq-identity>div {padding:13px 14px}
  .cq-identity strong {font-size:17px}
  .cq-boundary {gap:10px;margin-top:23px}
  .cq-boundary p,.cq-panel-note {font-size:11px}
  .cq-repair-card {padding:16px 14px 4px}
  .cq-record-title {display:block;margin-bottom:13px}
  .cq-record-title>span {display:inline-block;margin-top:9px}
  .cq-repair-card dl>div {font-size:10px;gap:12px;padding:11px 0}
  .cq-answer {padding:18px}
  .cq-answer p {font-size:23px}
  .cq-request {gap:10px}
  .cq-request div>span {font-size:11px}
  .cq-transfer-route {gap:10px}
  .cq-route-icon {width:58px;height:58px}
  .cq-route-line {margin-top:29px}
  .cq-transfer-route>div {flex-basis:105px}
  .cq-history-heading {padding:15px 13px;gap:10px}
  .cq-history-heading strong {font-size:15px}
  .cq-history-card>p {padding:19px 14px;font-size:13px}
  .cq-history-links {padding:0 14px 19px;gap:7px;font-size:9px}
  .cq-stage-footer {padding:18px 3px 9px;gap:15px;flex-wrap:wrap}
  .cq-stage-footer>div {max-width:none;flex:none;width:100%}
  .cq-progress {max-width:110px}
  .cq-next {width:100%;font-size:13px;min-height:48px}
  .cq-disclosure {padding:9px 3px 2px;font-size:8px}
}
@media(prefers-reduced-motion:reduce) {
  .cq-step-button,.cq-step-arrow,.cq-progress i,.cq-next,.cq-next>span {transition:none!important}
}
/* Short screens retain the full scene without trapping its lower controls. */
@media(min-width:801px) and (max-height:850px){.story-stage{top:95px;padding:16px}.story-enhanced .story-panel{min-height:0;padding:22px}.story-stage>p{margin-block:12px 0}}
@media(min-width:801px) and (max-height:650px){.story-stage{position:static}}

.communication-event summary:focus-visible{outline-offset:-3px;border-radius:4px}
.capability-jump{grid-column:2;grid-row:2;font-size:12px;justify-self:start;min-height:44px}
.capability-progression .capability-layers{grid-column:1;grid-row:2}
@media(max-width:800px){.capability-jump{grid-column:1;grid-row:3}.capability-progression .capability-layers{grid-column:1;grid-row:4}}
@media(min-width:801px) and (max-height:850px){.story-stage{position:static;margin-top:0}.story-chapter{min-height:0}.story-layout{align-items:start}}