:root {
  --navy: #1b3e72;
  --navy-deep: #0d2444;
  --navy-ink: #07162d;
  --card-navy: linear-gradient(155deg, #214f89 0%, #102b50 62%, #0b1d38 100%);
  --card-blue: linear-gradient(155deg, #5b9df2, #327ae3);
  --card-royal: linear-gradient(150deg, #4a8de7, #285fbc);
  --blue: #19a9f2;
  --blue-soft: #dff3ff;
  --yellow: #ffc857;
  --yellow-soft: #fff1bd;
  --green: #19a9f2;
  --paper: #f7f7f4;
  --cream: #eef0ec;
  --warm: #f7f7f4;
  --white: #fff;
  --text: #22262d;
  --muted: #707680;
  --line: rgba(27, 62, 114, 0.14);
  --line-dark: rgba(255, 255, 255, 0.16);
  --shadow: 0 28px 70px rgba(7, 22, 45, 0.14);
  --shadow-small: 0 15px 36px rgba(7, 22, 45, 0.1);
  --page: min(1280px, calc(100vw - 48px));
  --footer-height: 500px;
}

* { box-sizing: border-box; }
html { max-width: 100%; }
body { margin: 0; max-width: 100%; overflow-x: hidden; color: var(--text); background: var(--navy-ink); font-family: "Manrope", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
site-header, site-footer { display: contents; }
/* A page-height clip drops parts of sticky/translated layers in WebKit. Keep
   clipping local to each illustration and round only the final section. */
main { position: relative; z-index: 2; background: var(--paper); }
main > section:last-child { border-radius: inherit; }
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.ui-icon { display: inline-block; width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -.18em; overflow: visible; }
::selection { color: var(--navy); background: var(--yellow); }

.page-shell { width: var(--page); margin-inline: auto; }
.section { padding: 130px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 11px 16px; border-radius: 999px; color: var(--navy); background: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.whatsapp-fab {
  position: fixed;
  z-index: 900;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: var(--white);
  background: #25d366;
  box-shadow: 0 12px 30px rgba(11, 77, 36, 0.28);
  transition: transform 300ms ease, box-shadow 300ms ease, background 180ms ease;
}
.whatsapp-fab svg { width: 32px; height: 32px; }
.whatsapp-fab:hover { background: #20bd5a; box-shadow: 0 16px 36px rgba(11, 77, 36, 0.36); transform: translateY(-3px) scale(1.04); }
.whatsapp-fab:active { transform: translateY(0) scale(0.97); }

@media (max-width: 560px) {
  .whatsapp-fab {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
  }
  .whatsapp-fab svg { width: 29px; height: 29px; }
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Onest", "Manrope", Arial, sans-serif; }
h1, h2 { letter-spacing: -0.06em; }
h2 { margin-bottom: 24px; font-size: clamp(3.2rem, 5.5vw, 5.65rem); line-height: 0.98; }
h1 em, h2 em { font-style: normal; }
p { line-height: 1.65; }
.eyebrow, .card-label { margin: 0 0 19px; color: #5d6470; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.eyebrow--light { color: rgba(255, 255, 255, 0.57); }
.card-label { margin-bottom: 7px; font-size: 0.57rem; }
.text-link { display: inline-flex; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid currentColor; color: var(--navy); font-size: 0.79rem; font-weight: 800; }

.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 0 23px; border: 1px solid transparent; border-radius: 15px; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.button--light { color: var(--navy); background: var(--white); box-shadow: 0 13px 28px rgba(4, 17, 36, 0.2); }
.button--outline { border-color: rgba(255, 255, 255, 0.3); color: var(--white); background: rgba(255, 255, 255, 0.07); }
.button--nav { min-height: 43px; padding-inline: 19px; border-radius: 999px; color: var(--white); background: var(--navy); }

/* Floating navigation */
.site-header { position: fixed; z-index: 100; top: 18px; left: 0; width: 100%; pointer-events: none; }
.nav { display: grid; grid-template-columns: auto 1fr; align-items: center; width: min(1060px, calc(100% - 36px)); min-height: 68px; margin: 0 auto; padding: 8px 11px 8px 25px; border: 1px solid rgba(27, 62, 114, 0.1); border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 13px 38px rgba(7, 22, 45, 0.12); pointer-events: auto; backdrop-filter: blur(15px); }
.brand { display: inline-flex; align-items: center; }
.brand img { width: 124px; height: auto; }
.nav-menu { display: flex; align-items: center; justify-content: space-between; min-width: 0; margin-left: 42px; }
.nav-links, .nav-actions { display: flex; align-items: center; }
.nav-links { gap: 26px; }
.nav-links a, .login-link { color: #3f4650; font-size: 0.7rem; font-weight: 750; }
.nav-actions { gap: 19px; }
.nav-toggle { display: none; }

/* Hero */
.hero { min-height: 980px; padding: 108px 0 34px; color: var(--white); background: var(--paper); }
.hero-shell { position: relative; min-height: 780px; padding: 28px 42px 36px; overflow: hidden; border-radius: 42px; background: var(--navy-deep); }
.hero-shell::before { position: absolute; top: 88px; right: -85px; width: 330px; height: 330px; border: 72px solid rgba(25, 169, 242, 0.14); border-radius: 50%; content: ""; }
.hero-shell::after { position: absolute; right: -190px; bottom: -330px; width: 820px; height: 820px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 50%; box-shadow: 0 0 0 95px rgba(255, 255, 255, 0.025), 0 0 0 190px rgba(255, 255, 255, 0.018); content: ""; }
.award-line { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 39px; margin-bottom: 25px; border-bottom: 1px solid rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.69); }
.award-line > span { color: var(--yellow); font-size: 0.9rem; }
.award-line p { margin: 0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; }
.award-line i { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.22); }
.hero-grid { position: relative; z-index: 3; display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: center; gap: 28px; min-height: 670px; }
.hero-copy { position: relative; z-index: 5; padding: 20px 0 38px; }
.hero h1 { max-width: 610px; margin: 0; font-family: "Archivo Black", "Onest", sans-serif; font-size: clamp(3.8rem, 6.35vw, 6.8rem); font-weight: 400; line-height: 0.93; letter-spacing: -0.065em; }
.hero h1 em { display: block; color: var(--yellow); }
.hero-lede { max-width: 590px; margin: 31px 0 0; color: rgba(255, 255, 255, 0.68); font-size: 1.01rem; line-height: 1.75; }
.hero-actions { display: flex; gap: 10px; margin-top: 29px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 13px 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.hero-facts li { display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.66); font-size: 0.65rem; font-weight: 700; }
.hero-facts span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--navy-deep); background: var(--yellow); font-size: 0.52rem; }

.hero-demo { position: relative; min-height: 630px; }
.hero-demo::before { position: absolute; top: 50%; left: 52%; width: 510px; height: 510px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 50%; content: ""; transform: translate(-50%, -50%); }
.desktop-view { position: absolute; top: 44px; right: 1%; width: 75%; height: 335px; overflow: hidden; border: 7px solid #16212f; border-radius: 18px; color: #17202d; background: #fff; box-shadow: 0 35px 65px rgba(0, 0, 0, 0.33); transform: rotate(2deg); transform-origin: center; }
.desktop-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; background: #e9edf1; }
.desktop-bar i { width: 6px; height: 6px; border-radius: 50%; background: #b2bac2; }
.desktop-bar span { margin-left: 6px; color: #6b737d; font-size: 0.46rem; font-weight: 750; }
.desktop-body { display: grid; grid-template-columns: 88px 1fr; height: calc(100% - 30px); }
.desktop-body aside { display: flex; flex-direction: column; gap: 8px; padding: 14px 9px; color: #777f88; background: #f4f6f7; font-size: 0.49rem; }
.desktop-body aside b { margin-bottom: 6px; color: #27313e; }
.desktop-body aside span { padding: 6px; border-radius: 6px; }
.desktop-body aside .is-active { color: var(--navy); background: #dff2ff; font-weight: 800; }
.desktop-chat { padding: 16px; }
.desktop-chat > small { display: block; margin-bottom: 13px; color: #9da3aa; font-size: 0.43rem; font-weight: 800; text-align: center; }
.desktop-chat p { max-width: 75%; margin: 0 0 12px; padding: 10px; border-radius: 6px 13px 13px; background: #f2f4f5; font-size: 0.54rem; line-height: 1.45; }
.desktop-chat b { display: block; margin-bottom: 4px; font-size: 0.49rem; }
.desktop-chat .desktop-reply { margin-left: auto; color: #153659; background: #e1f2ff; }
.phone-view { position: absolute; z-index: 3; right: 20%; bottom: -11px; width: 245px; filter: drop-shadow(0 33px 40px rgba(0, 0, 0, 0.34)); }
.hero-message { position: absolute; z-index: 6; top: 180px; left: -3%; display: grid; grid-template-columns: 35px 1fr; gap: 9px; width: 315px; padding: 14px; border: 1px solid rgba(27, 62, 114, 0.13); border-radius: 18px; color: var(--text); background: #fff; box-shadow: var(--shadow); transform: rotate(-3deg); }
.avatar { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--yellow-soft); font-size: 0.54rem; font-weight: 800; }
.avatar--peach { color: var(--navy); background: var(--yellow-soft); }
.avatar--blue { color: #12476b; background: #d8f1ff; }
.hero-message p { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 5px; font-size: 0.55rem; }
.hero-message p small { color: #9198a0; font-size: 0.44rem; }
.hero-message > div > span { display: block; font-size: 0.62rem; line-height: 1.45; }
.voice-line { display: grid; grid-template-columns: 20px 1fr 25px; align-items: center; gap: 7px; margin-top: 9px; }
.voice-line i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 0.45rem; font-style: normal; }
.voice-line b { height: 9px; background: repeating-linear-gradient(90deg, #b9c0c7 0 2px, transparent 2px 4px); }
.voice-line small { color: #9299a1; font-size: 0.45rem; }
.hero-processing { position: absolute; z-index: 8; top: 345px; left: 5%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; color: rgba(255, 255, 255, 0.76); background: rgba(7, 22, 45, 0.86); font-size: 0.49rem; font-weight: 750; box-shadow: var(--shadow-small); }
.hero-processing span { width: 8px; height: 8px; border: 2px solid rgba(255, 255, 255, 0.34); border-top-color: var(--yellow); border-radius: 50%; }
.hero-outputs { position: absolute; z-index: 7; right: 0; bottom: 24px; width: 300px; }
.output-card { position: relative; width: 100%; padding: 14px 16px; border: 1px solid rgba(27, 62, 114, 0.12); border-radius: 16px; color: var(--text); background: #fff; box-shadow: var(--shadow-small); }
.output-card + .output-card { margin-top: 9px; }
.output-card p { margin: 0 0 6px; color: var(--navy); font-size: 0.43rem; font-weight: 800; letter-spacing: 0.12em; }
.output-card b, .output-card small { display: block; }
.output-card b { font-size: 0.67rem; }
.output-card small { margin-top: 4px; color: #858b93; font-size: 0.48rem; }
.output-card--task { transform: rotate(2.5deg); }
.output-card--schedule { left: -18px; background: #fff7da; transform: rotate(-1.5deg); }
.output-card--record { left: 8px; background: #e5f5ff; transform: rotate(1deg); }
.hero-demo-label { position: absolute; right: 5px; bottom: -16px; display: flex; align-items: center; gap: 9px; margin: 0; color: rgba(255, 255, 255, 0.45); font-size: 0.46rem; font-weight: 800; letter-spacing: 0.1em; }
.hero-demo-label i { color: var(--yellow); font-style: normal; }
.backers { display: grid; grid-template-columns: auto repeat(4, 1fr); align-items: center; gap: 25px; min-height: 102px; color: #69707a; }
.backers span { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.15em; }
.backers b { color: #38404a; font: 750 0.85rem "Onest", sans-serif; text-align: center; }

/* Editorial statement */
.manifesto { padding: 175px 0 165px; background: var(--paper); }
.manifesto-inner { text-align: center; }
.manifesto h2 { max-width: 1140px; margin-inline: auto; font-size: clamp(3.7rem, 6.8vw, 7rem); }
.manifesto h2 em { color: var(--navy); }
.manifesto p { max-width: 650px; margin: 34px auto 0; color: var(--muted); font-size: 1.05rem; }

/* Shared headings */
.section-heading--split { display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: end; gap: 90px; margin-bottom: 66px; }
.section-heading--split h2 { max-width: 790px; margin-bottom: 0; }
.section-heading--split h2 em { color: var(--navy); }
.section-heading--split > p { margin: 0 0 4px; color: var(--muted); font-size: 0.97rem; }

/* Guided work flow */
.how { background: var(--cream); }
.guided-flow { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 18px; }
.flow-steps { display: grid; align-content: stretch; }
.flow-steps button { display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: 0 12px; padding: 21px 18px; border: 0; border-top: 1px solid #ced3d0; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.flow-steps button:last-child { border-bottom: 1px solid #ced3d0; }
.flow-steps button[aria-selected="true"] { border-radius: 16px; color: var(--navy); background: var(--white); box-shadow: var(--shadow-small); }
.flow-steps button > span { grid-row: 1 / span 2; color: #92989d; font-size: 0.58rem; font-weight: 800; }
.flow-steps button b { font-size: 0.82rem; }
.flow-steps button small { margin-top: 5px; color: var(--muted); font-size: 0.64rem; line-height: 1.5; }
.flow-stage { min-width: 0; padding: 21px; border: 1px solid #d9ddda; border-radius: 30px; background: var(--white); box-shadow: var(--shadow); }
.flow-stage-top { display: flex; align-items: center; gap: 9px; padding: 0 2px 18px; border-bottom: 1px solid var(--line); font-size: 0.66rem; }
.flow-stage-top small { margin-left: auto; color: #969ca2; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.flow-diagram { display: grid; grid-template-columns: 1fr 105px 1fr; align-items: center; gap: 14px; min-height: 520px; padding: 30px 8px; overflow: hidden; }
.flow-input-card, .flow-result-card { border: 1px solid var(--line); border-radius: 22px; background: #fafbfa; box-shadow: var(--shadow-small); }
.flow-input-card { display: grid; grid-template-columns: 35px 1fr; gap: 10px; padding: 18px; }
.flow-input-card .card-label { grid-column: 1 / -1; }
.flow-input-card b { font-size: 0.65rem; }
.flow-input-card div > p { margin: 5px 0 7px; font-size: 0.69rem; line-height: 1.5; }
.flow-input-card div > small { color: var(--muted); font-size: 0.5rem; }
.flow-engine { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; }
.onsite-orb, .onsite-mark { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 14px; color: var(--white); background: var(--navy); font-size: 0.58rem; font-weight: 800; box-shadow: 0 12px 25px rgba(27, 62, 114, 0.23); }
.flow-engine p { margin: 0; color: var(--muted); font-size: 0.52rem; line-height: 1.35; }
.flow-engine i { position: absolute; z-index: -1; top: 22px; left: -36px; width: 175px; height: 1px; background: #cbd2d7; }
.flow-engine i::after { position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-top: 1px solid #98a1a9; border-right: 1px solid #98a1a9; content: ""; transform: rotate(45deg); }
.flow-result-card { padding: 19px; background: #eef8ff; }
.flow-result-card h3 { margin: 10px 0 14px; font-size: 1.2rem; letter-spacing: -0.035em; }
.flow-result-card ul { margin: 0; padding: 0; list-style: none; }
.flow-result-card li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(27, 62, 114, 0.12); font-size: 0.59rem; }
.flow-result-card li span { color: var(--muted); }
.flow-result-card button { width: 100%; margin-top: 13px; padding: 10px; border: 0; border-radius: 999px; color: #fff; background: var(--navy); font-size: 0.61rem; font-weight: 800; cursor: pointer; }
.flow-progress { height: 3px; overflow: hidden; border-radius: 999px; background: #e2e5e2; }
.flow-progress i { display: block; width: 25%; height: 100%; background: var(--yellow); transform-origin: left center; }

/* Horizontal feature cards */
.features { overflow: hidden; background: var(--paper); }
.feature-rail-wrap { width: 100%; }
.feature-rail { display: flex; gap: 18px; width: 100%; padding: 0 max(24px, calc((100vw - min(1280px, 100vw - 48px)) / 2)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.feature-rail::-webkit-scrollbar { display: none; }
.feature-card { flex: 0 0 min(425px, calc(100vw - 54px)); min-height: 595px; padding: 20px 20px 28px; border: 1px solid var(--line); border-radius: 30px; background: var(--white); box-shadow: var(--shadow-small); scroll-snap-align: start; }
.feature-graphic { position: relative; height: 340px; margin-bottom: 27px; overflow: hidden; border-radius: 20px; }
.feature-card > .card-label { color: var(--navy); }
.feature-card > h3 { margin: 8px 0 11px; font-size: 1.46rem; line-height: 1.1; letter-spacing: -0.04em; }
.feature-card > p:last-child { margin: 0; color: var(--muted); font-size: 0.76rem; }
.task-graphic { padding: 43px 25px; background: #dff3ff; }
.mini-message, .mini-task { position: relative; padding: 15px; border: 1px solid rgba(27, 62, 114, 0.12); border-radius: 16px; background: #fff; box-shadow: var(--shadow-small); }
.mini-message { display: flex; align-items: center; gap: 10px; transform: rotate(-3deg); }
.mini-message span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--yellow-soft); font-size: 0.48rem; font-weight: 800; }
.mini-message p { margin: 0; font-size: 0.67rem; }
.mini-task { width: 82%; margin: 24px 0 0 auto; background: #fff8db; transform: rotate(2deg); }
.mini-task small, .mini-task b, .mini-task span { display: block; }
.mini-task small { color: var(--navy); font-size: 0.47rem; font-weight: 800; letter-spacing: 0.12em; }
.mini-task b { margin-top: 9px; font-size: 0.77rem; }
.mini-task span { margin-top: 6px; color: var(--muted); font-size: 0.56rem; }
.form-graphic { padding: 25px; color: #24303b; background: #e4f4ff; }
.form-graphic > p { margin: 0 0 20px; }
.form-graphic small, .form-graphic b { display: block; }
.form-graphic small { color: #516c82; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.1em; }
.form-graphic b { margin-top: 6px; font-size: 0.89rem; }
.form-graphic label { display: grid; gap: 6px; margin-top: 12px; color: #526b7f; font-size: 0.56rem; font-weight: 750; }
.form-graphic label span { padding: 11px; border: 1px solid #bfd9e9; border-radius: 10px; color: #263b4a; background: rgba(255, 255, 255, 0.8); font-size: 0.62rem; }
.form-graphic button { width: 100%; margin-top: 17px; padding: 10px; border: 0; border-radius: 999px; color: #fff; background: var(--navy); font-size: 0.6rem; font-weight: 800; }
.search-graphic { padding: 29px 23px; color: #fff; background: var(--navy-deep); }
.search-graphic > p { width: 78%; margin: 0 0 17px auto; padding: 11px 14px; border-radius: 15px 15px 3px 15px; color: var(--text); background: #fff; font-size: 0.62rem; }
.search-graphic > div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 16px; background: rgba(255, 255, 255, 0.08); }
.search-graphic .onsite-mark { width: 36px; height: 36px; background: var(--blue); }
.search-graphic b { font-size: 0.62rem; line-height: 1.4; }
.search-graphic div small { color: var(--yellow); font-size: 0.48rem; }
.search-graphic ul { display: grid; gap: 7px; margin: 14px 0 0 46px; padding: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.54rem; list-style: none; }
.search-graphic li { padding-bottom: 7px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.plan-graphic { background: #dff3ff; }
.plan-graphic img:first-child { position: absolute; inset: -7% 0 0; width: 100%; height: 115%; object-fit: cover; opacity: 0.9; }
.plan-graphic img:nth-child(2) { position: absolute; top: 19%; left: 41%; width: 63px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.18)); }
.plan-graphic span { position: absolute; right: 17px; bottom: 17px; padding: 10px 13px; border-radius: 12px; color: var(--navy); background: #fff; box-shadow: var(--shadow-small); font-size: 0.59rem; font-weight: 800; }
.dashboard-graphic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 24px; background: #fff2d0; }
.dashboard-graphic > div { padding: 15px; border: 1px solid rgba(27, 62, 114, 0.11); border-radius: 15px; background: rgba(255, 255, 255, 0.73); }
.dashboard-graphic small, .dashboard-graphic b, .dashboard-graphic div span { display: block; }
.dashboard-graphic small { color: #82765a; font-size: 0.47rem; font-weight: 800; letter-spacing: 0.1em; }
.dashboard-graphic b { margin-top: 15px; color: var(--navy); font-size: 1.7rem; }
.dashboard-graphic div span { margin-top: 5px; color: var(--navy); font-size: 0.53rem; font-weight: 800; }
.dashboard-graphic > p { grid-column: 1 / -1; display: flex; align-items: end; gap: 8px; height: 150px; margin: 0; padding: 18px; border-radius: 15px; background: rgba(255, 255, 255, 0.7); }
.dashboard-graphic > p span { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--navy); }
.dashboard-graphic > p span:nth-child(even) { background: var(--blue); }
.rail-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; }
.rail-controls p { margin: 0; color: var(--muted); font-size: 0.61rem; }
.rail-controls div { display: flex; gap: 8px; }
.rail-controls button { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--navy); background: #fff; font-size: 1rem; cursor: pointer; }

/* Industries */
.industries { color: #fff; background: var(--navy-deep); }
.industry-heading { max-width: 1100px; }
.industry-heading h2 { font-size: clamp(4rem, 8vw, 8.2rem); }
.industry-heading h2 em { display: inline-block; color: var(--yellow); }
.industry-heading > p:last-child { max-width: 760px; margin-bottom: 58px; color: rgba(255, 255, 255, 0.63); font-size: 1rem; }
.industry-stage { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 560px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 32px; background: rgba(255, 255, 255, 0.05); }
.industry-photo { position: relative; display: grid; min-height: 560px; place-items: center; overflow: hidden; background: var(--blue-soft); }
.industry-photo::before { position: absolute; top: -120px; left: -90px; width: 340px; height: 340px; border: 65px solid rgba(27, 62, 114, 0.08); border-radius: 50%; content: ""; }
.industry-photo::after { position: absolute; right: -105px; bottom: -125px; width: 390px; height: 390px; border: 1px solid rgba(27, 62, 114, 0.16); border-radius: 50%; box-shadow: 0 0 0 70px rgba(27, 62, 114, 0.045), 0 0 0 140px rgba(27, 62, 114, 0.025); content: ""; }
.industry-photo--facilities, .industry-photo--property, .industry-photo--healthcare { background: #fff5d0; }
.industry-photo--hospitality, .industry-photo--design, .industry-photo--it { background: #f7f7f4; }
.industry-photo--franchises { background: #dff3ff; }
.industry-scene { position: relative; z-index: 2; width: min(470px, calc(100% - 70px)); min-height: 390px; padding: 23px; border: 1px solid rgba(27, 62, 114, 0.14); border-radius: 25px; color: var(--text); background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow); }
.scene-top { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 9px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.scene-top > span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.scene-top b { font-size: 0.68rem; }
.scene-top small { color: var(--muted); font-size: 0.45rem; font-weight: 800; letter-spacing: 0.1em; }
.scene-plan { position: relative; height: 205px; margin-top: 18px; overflow: hidden; border-radius: 15px; background: #edf0ed; }
.scene-plan i { position: absolute; border: 2px solid rgba(27, 62, 114, 0.18); }
.scene-plan i:nth-child(1) { inset: 20px 48% 90px 20px; }
.scene-plan i:nth-child(2) { inset: 20px 20px 30px 55%; }
.scene-plan i:nth-child(3) { inset: 128px 55% 20px 20px; }
.scene-plan i:nth-child(4) { top: 61px; left: 37%; width: 42%; height: 2px; border-width: 1px 0 0; transform: rotate(24deg); }
.scene-plan > span { position: absolute; top: 75px; left: 54%; display: grid; width: 40px; height: 49px; place-items: center; border-radius: 20px 20px 20px 4px; color: var(--navy); background: var(--yellow); font-size: 0.57rem; font-weight: 800; box-shadow: 0 8px 18px rgba(27, 62, 114, 0.18); transform: rotate(-45deg); }
.scene-plan > span::first-letter { transform: rotate(45deg); }
.scene-task { position: absolute; right: 24px; bottom: 20px; width: 58%; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff8db; box-shadow: var(--shadow-small); transform: rotate(2deg); }
.scene-task small, .scene-task b, .scene-task span { display: block; }
.scene-task small { color: var(--navy); font-size: 0.44rem; font-weight: 800; letter-spacing: 0.1em; }
.scene-task b { margin-top: 7px; font-size: 0.63rem; }
.scene-task span { margin-top: 5px; color: var(--muted); font-size: 0.48rem; }
.industry-message { position: absolute; z-index: 2; right: 28px; bottom: 27px; display: flex; align-items: center; gap: 10px; width: min(350px, calc(100% - 54px)); padding: 14px; border-radius: 17px; color: var(--text); background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.industry-message p { margin: 0; }
.industry-message b, .industry-message small { display: block; }
.industry-message b { font-size: 0.68rem; }
.industry-message small { margin-top: 4px; color: var(--muted); font-size: 0.52rem; }
.industry-outcomes { display: flex; flex-direction: column; justify-content: center; padding: 50px; }
.industry-outcomes .card-label { color: #7dccf2; }
.industry-outcomes h3 { margin: 10px 0 24px; font-size: clamp(2rem, 3.4vw, 3.8rem); line-height: 1.02; letter-spacing: -0.05em; }
.industry-outcomes ul { display: grid; gap: 0; margin: 0 0 32px; padding: 0; list-style: none; }
.industry-outcomes li { padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.68); font-size: 0.72rem; }
.industry-outcomes .text-link { align-self: flex-start; color: var(--yellow); }
.industry-tabs { display: flex; gap: 8px; margin-top: 22px; padding-bottom: 7px; overflow-x: auto; scrollbar-width: none; }
.industry-tabs::-webkit-scrollbar { display: none; }
.industry-tabs button { flex: 0 0 auto; min-height: 46px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; color: rgba(255, 255, 255, 0.62); background: transparent; font-size: 0.62rem; font-weight: 750; cursor: pointer; }
.industry-tabs button[aria-selected="true"] { border-color: var(--yellow); color: var(--navy-deep); background: var(--yellow); }

/* External communication */
.external { background: var(--warm); }
.external-grid { display: grid; grid-template-columns: 0.88fr 1.12fr; align-items: center; gap: 85px; }
.external-copy h2 em { color: var(--navy); }
.external-copy > p:not(.eyebrow):not(.channel-note) { color: var(--muted); font-size: 0.96rem; }
.external-copy ul { display: grid; gap: 11px; margin: 30px 0; padding: 0; list-style: none; }
.external-copy li { display: flex; align-items: center; gap: 9px; color: #4d555e; font-size: 0.73rem; }
.external-copy li span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 0.55rem; font-weight: 800; }
.channel-note { display: inline-flex; margin: 0; padding: 9px 12px; border-radius: 999px; color: var(--navy); background: var(--blue-soft); font-size: 0.6rem; font-weight: 800; }
.comms-board { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; min-height: 570px; padding: 30px; overflow: hidden; border-radius: 32px; background: var(--navy-deep); box-shadow: var(--shadow); }
.comms-card { min-width: 0; min-height: 330px; padding: 24px; border-radius: 23px; color: var(--text); background: #fff; }
.comms-card > b { display: block; margin: 30px 0 24px; font-size: 1.1rem; }
.comms-card > div { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; }
.comms-card > div p { margin: 0; padding: 10px; border-radius: 5px 13px 13px; background: #f1f3f4; font-size: 0.59rem; line-height: 1.45; }
.comms-card--external { background: var(--yellow-soft); }
.comms-card--external > div p { background: #fff; }
.comms-card--external > small { display: block; margin: 20px 0 0 44px; color: var(--navy); font-size: 0.52rem; }
.wa-dot { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border-radius: 11px; color: #fff; background: var(--blue); font-size: 0.48rem; font-weight: 800; }
.comms-bridge { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; color: #fff; text-align: center; }
.comms-bridge b { font-size: 0.58rem; line-height: 1.5; }
.comms-bridge i { position: absolute; z-index: -1; top: 22px; left: -45px; width: 210px; height: 1px; background: rgba(255, 255, 255, 0.3); }
.comms-bridge .onsite-orb { background: var(--yellow); color: var(--navy); }

/* Integrations */
.integrations { background: var(--paper); }
.integrations-inner { text-align: center; }
.integrations h2 { max-width: 1000px; margin-inline: auto; }
.integrations-inner > p:not(.eyebrow) { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: 0.96rem; }
.integration-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 940px; margin: 56px auto 0; }
.integration-logos article { display: flex; align-items: center; gap: 18px; min-height: 150px; padding: 25px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-small); text-align: left; }
.integration-logos article > span { display: grid; flex: 0 0 auto; width: 72px; height: 72px; place-items: center; border-radius: 20px; color: #fff; background: #1567ad; font: 800 1.15rem "Onest", sans-serif; }
.integration-logos article > .procore-mark { color: #25282d; background: #f4b73f; }
.integration-logos b, .integration-logos small { display: block; }
.integration-logos b { font-size: 0.92rem; }
.integration-logos small { margin-top: 6px; color: var(--muted); font-size: 0.61rem; }

/* Comparison */
.compare { background: var(--cream); }
.comparison-mobile-cue { display: none; }
.comparison-wrap { overflow-x: auto; border: 1px solid #d6d9d6; border-radius: 28px; background: #fff; box-shadow: var(--shadow-small); }
.comparison-wrap table { width: 100%; min-width: 1140px; border-collapse: collapse; table-layout: fixed; }
.comparison-wrap th, .comparison-wrap td { padding: 18px 16px; border-right: 1px solid #e0e3e0; border-bottom: 1px solid #e0e3e0; vertical-align: middle; font-size: 0.66rem; line-height: 1.45; text-align: left; }
.comparison-wrap th:last-child, .comparison-wrap td:last-child { border-right: 0; }
.comparison-wrap tbody tr:last-child th, .comparison-wrap tbody tr:last-child td { border-bottom: 0; }
.comparison-wrap thead th { height: 82px; color: #666d75; background: #f5f6f4; font-size: 0.64rem; }
.comparison-wrap thead th:first-child { width: 250px; }
.comparison-wrap tbody th { color: var(--navy); background: #fafbf9; font-size: 0.65rem; }
.comparison-wrap .onsite-column { color: var(--navy); background: #fff4c8; }
.comparison-wrap thead .onsite-column { color: var(--navy); background: var(--yellow); font: 800 1rem "Onest", sans-serif; }
.comparison-note { margin: 13px 4px 0; color: #898f95; font-size: 0.56rem; }

/* Pricing */
.pricing { color: #fff; background: var(--navy-deep); }
.pricing-heading { max-width: 920px; }
.pricing-heading h2 em { color: var(--yellow); }
.pricing-heading > p:last-child { max-width: 650px; color: rgba(255, 255, 255, 0.62); }
.pricing-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; margin-top: 60px; }
.pricing-rail article { position: relative; display: flex; min-height: 370px; flex-direction: column; padding: 25px 21px 21px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 24px; background: rgba(255, 255, 255, 0.06); }
.pricing-rail article > p { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 0.66rem; font-weight: 750; }
.pricing-rail h3 { margin: 60px 0 0; font-size: clamp(2.5rem, 3.7vw, 4.4rem); line-height: 1; letter-spacing: -0.06em; }
.pricing-rail sup { margin-right: 2px; color: var(--yellow); font-size: 0.95rem; vertical-align: top; }
.pricing-rail article > small { min-height: 35px; margin-top: 10px; color: rgba(255, 255, 255, 0.5); font-size: 0.57rem; line-height: 1.45; }
.pricing-rail .button { margin-top: auto; }
.button--price { min-height: 47px; color: var(--navy-deep); background: #fff; }
.pricing-card--popular { border-color: var(--yellow) !important; background: var(--yellow) !important; color: var(--navy-deep); }
.pricing-card--popular > span { position: absolute; top: 20px; right: 18px; padding: 5px 8px; border-radius: 999px; color: #fff; background: var(--navy-deep); font-size: 0.45rem; font-weight: 800; letter-spacing: 0.08em; }
.pricing-card--popular > p, .pricing-card--popular > small { color: rgba(13, 36, 68, 0.66) !important; }
.pricing-card--popular sup { color: var(--navy); }
.pricing-card--popular .button { color: #fff; background: var(--navy-deep); }
.pricing-rail .contact-price { max-width: 160px; font-size: 2.5rem; }

/* Security */
.security { background: var(--paper); }
.security-card { position: relative; display: grid; grid-template-columns: 0.95fr 0.35fr 1.1fr; align-items: center; gap: 48px; min-height: 680px; padding: 64px; overflow: hidden; border-radius: 40px; color: #fff; background: var(--navy-deep); box-shadow: var(--shadow); }
.security-card::before { position: absolute; top: -290px; left: 47%; width: 550px; height: 550px; border: 70px solid rgba(255, 255, 255, 0.035); border-radius: 50%; content: ""; }
.security-copy { position: relative; z-index: 2; }
.security-copy h2 { font-size: clamp(3rem, 4.7vw, 5rem); }
.security-copy > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.63); }
.security-copy .button { margin-top: 20px; }
.security-seal { position: relative; z-index: 2; display: grid; width: 145px; height: 185px; place-items: center; align-content: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 72px 72px 28px 28px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.035); text-align: center; }
.security-seal span, .security-seal small { color: rgba(255, 255, 255, 0.61); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.18em; }
.security-seal b { margin: -2px 0; color: var(--yellow); font-size: 4.2rem; line-height: 1; }
.security-flows { position: relative; z-index: 2; display: grid; gap: 11px; }
.security-flows article { padding: 20px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: rgba(255, 255, 255, 0.055); }
.security-flows article > span { color: rgba(255, 255, 255, 0.37); font-size: 0.51rem; font-weight: 800; }
.security-flows p { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 17px 0 0; }
.security-flows b { padding: 7px 9px; border-radius: 999px; color: rgba(255, 255, 255, 0.84); background: rgba(255, 255, 255, 0.08); font-size: 0.56rem; }
.security-flows i { color: var(--yellow); font-style: normal; font-size: 0.62rem; }

/* FAQ and CTA */
.faq { background: var(--paper); }
.faq-grid { display: grid; grid-template-columns: 0.68fr 1.32fr; align-items: start; gap: 90px; }
.faq-heading { position: sticky; top: 110px; }
.faq-heading h2 { font-size: clamp(3rem, 4.8vw, 4.8rem); }
.faq-heading > p:not(.eyebrow) { color: var(--muted); }
.faq-list { border-top: 1px solid #cfd3d2; }
.faq-list details { border-bottom: 1px solid #cfd3d2; }
.faq-list summary { display: grid; grid-template-columns: 1fr 25px; align-items: center; gap: 20px; padding: 25px 0; font-size: 0.98rem; font-weight: 750; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { position: relative; width: 22px; height: 22px; }
.faq-list summary span::before, .faq-list summary span::after { position: absolute; top: 10px; left: 4px; width: 14px; height: 1px; background: var(--navy); content: ""; }
.faq-list summary span::after { transform: rotate(90deg); }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 730px; margin: -3px 45px 27px 0; color: var(--muted); font-size: 0.82rem; }
.final-cta { padding: 150px 0; color: var(--navy-deep); background: var(--yellow); }
.final-inner { text-align: center; }
.final-inner h2 { max-width: 1100px; margin-inline: auto; font-size: clamp(3.8rem, 6.8vw, 7rem); }
.final-inner .eyebrow { color: rgba(13, 36, 68, 0.58); }
.final-inner h2 em { color: var(--blue); }
.final-inner > p:not(.eyebrow) { max-width: 680px; margin: 0 auto 28px; color: rgba(13, 36, 68, 0.72); }
.final-inner .button--light { color: #fff; background: var(--navy-deep); }

/* Normal-flow footer: never keep it composited behind the scrolling page. */
.footer { position: relative; min-height: var(--footer-height); padding: 70px 0 25px; color: #aab3bf; background: var(--navy-ink); }
.footer-top { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; }
.footer-brand .brand { padding: 0; border-radius: 0; background: transparent; }
.footer-brand .brand img { width: 150px; height: auto; }
.footer-brand h2 { max-width: 650px; margin: 45px 0 0; color: #fff; font-size: clamp(2.7rem, 4.5vw, 5rem); }
.footer-brand h2::first-line { color: var(--yellow); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.footer-links > div { display: flex; flex-direction: column; gap: 11px; font-size: 0.67rem; }
.footer-links b { margin-bottom: 9px; color: #fff; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 57px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #718096; font-size: 0.58rem; }
.footer-bottom div { display: flex; gap: 20px; }

/* Initial states are made visible by JS after Anime.js is available */
.js-motion [data-hero-reveal], .js-motion [data-reveal] { opacity: 0; }

@media (max-width: 1100px) {
  .nav-links { gap: 17px; }
  .hero-shell { padding-inline: 30px; }
  .hero h1 { font-size: clamp(3.5rem, 6.2vw, 5.3rem); }
  .hero-grid { grid-template-columns: 0.9fr 1.1fr; }
  .hero-message { left: -5%; width: 270px; }
  .phone-view { right: 12%; }
  .hero-outputs { width: 270px; }
  .section-heading--split { gap: 55px; }
  .guided-flow { grid-template-columns: 0.63fr 1.37fr; }
  .external-grid { gap: 50px; }
  .comms-board { grid-template-columns: 1fr 85px 1fr; padding: 22px; }
  .comms-bridge i { left: -46px; width: 174px; }
  .pricing-rail { overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
  .pricing-rail article { min-width: 220px; }
  .security-card { grid-template-columns: 0.95fr 0.35fr 1.1fr; gap: 25px; padding: 45px; }
}

@media (max-width: 960px) {
  :root { --footer-height: 610px; }
  .nav { display: flex; justify-content: space-between; padding-left: 20px; }
  .nav-toggle { display: grid; width: 44px; height: 44px; place-items: center; align-content: center; gap: 5px; border: 0; border-radius: 50%; color: #fff; background: var(--navy); cursor: pointer; }
  .nav-toggle i { width: 17px; height: 1.5px; background: currentColor; }
  .nav-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.2px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.2px) rotate(-45deg); }
  .nav-menu { position: absolute; top: 77px; left: 0; right: 0; display: none; margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: var(--shadow); }
  .nav-menu.is-open { display: block; }
  .nav-links { align-items: stretch; flex-direction: column; gap: 0; }
  .nav-links a { padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 0.79rem; }
  .nav-actions { justify-content: space-between; margin-top: 18px; }
  .hero { min-height: 935px; }
  .hero-shell { min-height: 750px; }
  .hero-grid { grid-template-columns: 0.9fr 1.1fr; gap: 10px; }
  .hero h1 { font-size: clamp(3.2rem, 6.5vw, 4.2rem); }
  .hero-lede { font-size: 0.88rem; }
  .hero-demo { min-height: 600px; }
  .desktop-view { width: 88%; }
  .phone-view { right: 6%; width: 210px; }
  .hero-message { top: 170px; left: -10%; width: 240px; }
  .hero-processing { left: -2%; }
  .hero-outputs { right: -6%; width: 240px; }
  .guided-flow { grid-template-columns: 1fr; }
  .flow-steps { grid-template-columns: repeat(4, 1fr); }
  .flow-steps button { grid-template-columns: 1fr; border-right: 1px solid #ced3d0; border-bottom: 1px solid #ced3d0; }
  .flow-steps button > span { grid-row: auto; }
  .flow-steps button small { display: none; }
  .flow-diagram { min-height: 470px; }
  .industry-stage { grid-template-columns: 1fr 0.8fr; }
  .industry-outcomes { padding: 34px; }
  .external-grid { grid-template-columns: 1fr; }
  .external-copy { max-width: 720px; }
  .comms-board { max-width: 750px; }
  .security-card { grid-template-columns: 1fr 150px; }
  .security-flows { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .security-flows p { align-items: flex-start; flex-direction: column; }
  .security-flows i { transform: rotate(90deg); }
  .faq-grid { grid-template-columns: 1fr; gap: 55px; }
  .faq-heading { position: static; max-width: 680px; }
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .footer-brand h2 { margin-top: 28px; font-size: 3rem; }
}

@media (max-width: 760px) {
  :root { --page: calc(100vw - 28px); --footer-height: 745px; }
  .section { padding: 90px 0; }
  h2 { font-size: clamp(2.8rem, 13vw, 4.5rem); }
  .hero { min-height: 1320px; padding-top: 96px; }
  .hero-shell { min-height: 1195px; padding: 22px 18px 30px; border-radius: 29px; }
  .award-line { flex-wrap: wrap; gap: 8px 12px; justify-content: flex-start; min-height: 57px; padding: 7px 3px 12px; }
  .award-line p { font-size: 0.49rem; }
  .hero-grid { display: block; }
  .hero-copy { padding: 30px 2px 0; }
  .hero h1 { max-width: 600px; font-size: clamp(3.45rem, 15.5vw, 5.3rem); }
  .hero-lede { margin-top: 25px; font-size: 0.86rem; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 320px; }
  .hero-facts { gap: 10px 15px; }
  .hero-demo { min-height: 600px; margin-top: 37px; }
  .desktop-view { top: 25px; right: -3%; width: 89%; height: 270px; }
  .phone-view { right: 13%; bottom: -20px; width: 195px; }
  .hero-message { top: 132px; left: -2%; width: min(270px, 72vw); }
  .hero-processing { top: 293px; left: 1%; }
  .hero-outputs { right: -2%; bottom: 23px; width: min(250px, 69vw); }
  .output-card { padding: 12px 14px; }
  .hero-demo-label { right: 0; bottom: -6px; }
  .backers { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 26px 8px; text-align: center; }
  .backers span { grid-column: 1 / -1; }
  .backers b { font-size: 0.73rem; }
  .manifesto { padding: 110px 0 105px; }
  .manifesto h2 { font-size: clamp(3rem, 13.5vw, 5rem); }
  .manifesto p { font-size: 0.9rem; }
  .section-heading--split { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .flow-steps { display: flex; overflow-x: auto; scrollbar-width: none; }
  .flow-steps button { flex: 0 0 165px; min-height: 100px; }
  .flow-stage { padding: 15px; }
  .flow-diagram { grid-template-columns: 1fr; gap: 25px; min-height: 690px; padding: 22px 3px; }
  .flow-engine i { top: -35px; left: 50%; width: 1px; height: 105px; }
  .flow-engine i::after { top: auto; right: -3px; bottom: 0; transform: rotate(135deg); }
  .flow-engine p { max-width: 145px; }
  .feature-card { min-height: 565px; }
  .feature-graphic { height: 315px; }
  .rail-controls p { display: none; }
  .rail-controls { justify-content: flex-end; }
  .industry-heading h2 { font-size: clamp(3.3rem, 15vw, 5.7rem); }
  .industry-stage { grid-template-columns: 1fr; }
  .industry-photo { min-height: 440px; }
  .industry-outcomes { padding: 30px 24px 36px; }
  .industry-tabs { margin-inline: -14px; padding-inline: 14px; }
  .comms-board { grid-template-columns: 1fr; gap: 24px; min-height: 850px; padding: 17px; }
  .comms-card { min-height: 290px; }
  .comms-bridge { min-height: 100px; }
  .comms-bridge i { top: -30px; left: 50%; width: 1px; height: 160px; }
  .integration-logos { grid-template-columns: 1fr; }
  .comparison-mobile-cue { display: flex; justify-content: space-between; margin: -12px 0 12px; color: var(--muted); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .comparison-wrap { border-radius: 21px; }
  .pricing-rail { display: flex; margin-inline: -14px; padding-inline: 14px; scroll-snap-type: x mandatory; }
  .pricing-rail article { flex: 0 0 255px; min-height: 360px; scroll-snap-align: center; }
  .security-card { grid-template-columns: 1fr; gap: 38px; min-height: 1050px; padding: 36px 24px; border-radius: 30px; }
  .security-seal { width: 125px; height: 160px; }
  .security-flows { grid-column: auto; grid-template-columns: 1fr; }
  .security-flows p { flex-direction: row; }
  .security-flows i { transform: none; }
  .faq-list summary { padding: 22px 0; font-size: 0.88rem; }
  .faq-list details p { margin-right: 25px; font-size: 0.77rem; }
  .final-cta { padding: 105px 0; }
  .final-inner h2 { font-size: clamp(3.2rem, 13.5vw, 5rem); }
  .footer { padding-top: 55px; }
  .footer-brand h2 { font-size: 2.7rem; }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; margin-top: 40px; }
}

@media (max-width: 430px) {
  :root { --footer-height: 780px; }
  .hero { min-height: 1360px; }
  .hero-shell { min-height: 1240px; }
  .hero h1 { font-size: 3.35rem; }
  .hero-demo { margin-top: 43px; }
  .hero-message { width: 78vw; }
  .phone-view { right: 5%; }
  .hero-outputs { width: 72vw; }
  .award-line i { display: none; }
  .award-line p:last-child { width: 100%; margin-left: 20px; }
  .feature-card { flex-basis: calc(100vw - 40px); }
  .feature-graphic { height: 300px; }
  .industry-photo { min-height: 380px; }
  .security-flows p { align-items: flex-start; flex-direction: column; }
  .security-flows i { transform: rotate(90deg); }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-hero-reveal], .js-motion [data-reveal] { opacity: 1; }
}

/* September simplification pass */
.brand img { width: 131px; height: 40px; object-fit: contain; }

.hero { min-height: auto; padding: 0; color: var(--white); background: var(--navy-deep); }
.hero-shell.page-shell { width: 100%; min-height: 100svh; padding: 125px max(28px, calc((100vw - 1280px) / 2)) 42px; border-radius: 0; background: var(--navy-deep); }
.hero-shell::before, .hero-shell::after, .hero-demo::before { display: none; }
.hero-grid { width: 100%; max-width: 1280px; min-height: calc(100svh - 167px); margin: 0 auto; grid-template-columns: 0.95fr 1.05fr; gap: 44px; }
.hero-copy { padding: 25px 0 46px; }
.hero-lede { max-width: 625px; color: rgba(255, 255, 255, 0.75); }
.hero-demo { min-height: 650px; }
.phone-view { right: 19%; bottom: -35px; width: 270px; filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.3)); transform: none; }
.phone-view img { width: 100%; height: auto; }
.hero-message { top: 160px; left: 0; transform: none; }
.hero-processing { top: 326px; left: 7%; }
.hero-outputs { right: 0; bottom: 55px; }
.output-card, .output-card--task, .output-card--schedule, .output-card--record { transform: none; }
.output-card--schedule { left: 0; }
.output-card--record { left: 0; }
.hero-demo-label { right: 0; bottom: 13px; }
.award-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 35px; margin-top: 18px; padding: 8px 12px; border-radius: 999px; color: var(--navy-deep); background: var(--yellow); }
.award-badge > span { font-size: 0.72rem; }
.award-badge p { margin: 0; font-size: 0.48rem; font-weight: 850; letter-spacing: 0.09em; }
.award-badge i { width: 1px; height: 12px; background: rgba(13, 36, 68, 0.25); }
.backers { color: rgba(255, 255, 255, 0.55); }
.backers b { color: rgba(255, 255, 255, 0.82); }

.statement { display: grid; min-height: 88svh; place-items: center; padding: 120px 0; }
.statement--problem, .statement--answer { color: var(--text); background: #fff; }
.statement-inner { text-align: center; }
.statement h2 { max-width: 1120px; margin: 0 auto; font-size: clamp(4rem, 7.7vw, 8.3rem); line-height: 0.98; }
.statement--problem h2 em { color: var(--navy); }
.statement--answer h2 { font-size: clamp(3.4rem, 6.3vw, 6.8rem); }
.statement--answer h2 em { color: var(--navy); }
.js-motion [data-statement] { opacity: 0; transform: translateY(45px); }

.features { position: relative; min-height: 100svh; overflow: visible; background: var(--paper); }
.feature-sticky { position: sticky; top: 0; display: flex; height: 100svh; align-items: center; overflow: hidden; }
.feature-rail-wrap { width: 100%; }
.feature-rail { width: max-content; overflow: visible; padding-right: max(24px, calc((100vw - min(1280px, 100vw - 48px)) / 2)); cursor: default; will-change: transform; }
.feature-card { min-height: min(610px, calc(100svh - 150px)); transform-origin: center; will-change: transform; }
.feature-progress { height: 4px; margin-top: 28px; overflow: hidden; border-radius: 999px; background: rgba(27, 62, 114, 0.1); }
.feature-progress i { display: block; width: 100%; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left center; }
.features.is-static { height: auto !important; padding: 90px 0; }
.features.is-static .feature-sticky { position: static; display: block; height: auto; overflow: visible; }
.features.is-static .feature-rail { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; }

.customer-quote { padding: 0 0 130px; background: var(--warm); }
.quote-card { padding: 75px 80px; border-radius: 36px; color: var(--navy-deep); background: var(--yellow); }
.quote-card > p { margin-bottom: 28px; font-size: 0.61rem; font-weight: 850; letter-spacing: 0.14em; }
.quote-card blockquote { max-width: 1050px; margin: 0; font: 750 clamp(2.3rem, 4.7vw, 5rem)/1.08 "Onest", sans-serif; letter-spacing: -0.05em; }
.quote-card > div { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(13, 36, 68, 0.2); }
.quote-card cite { font-size: 0.76rem; font-style: normal; font-weight: 800; }
.quote-card small { color: rgba(13, 36, 68, 0.62); font-size: 0.56rem; }

.workflows { background: var(--paper); }
.workflow-intro { max-width: 1050px; }
.workflow-intro h2 em { color: var(--navy); }
.workflow-intro > p:last-child { max-width: 760px; color: var(--muted); font-size: 1rem; }
.workflow-layout { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 18px; margin-top: 62px; }
.template-library, .workflow-examples { min-height: 500px; border: 1px solid var(--line); border-radius: 32px; background: #fff; }
.template-library { padding: 38px; background: var(--blue-soft); }
.template-pills { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; margin-top: 70px; }
.template-pills span { padding: 13px 16px; border: 1px solid rgba(27, 62, 114, 0.15); border-radius: 999px; color: var(--navy); background: #fff; font-size: 0.72rem; font-weight: 750; }
.template-pills span:last-child { color: #fff; background: var(--navy); }
.workflow-examples { display: grid; align-content: center; gap: 12px; padding: 30px; }
.workflow-examples article { padding: 22px; border: 1px solid var(--line); border-radius: 19px; background: var(--paper); }
.workflow-examples article > span { color: var(--navy); font-size: 0.55rem; font-weight: 850; letter-spacing: 0.12em; }
.workflow-examples p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 15px 0 0; }
.workflow-examples b { padding: 8px 10px; border-radius: 999px; color: var(--navy); background: #fff; font-size: 0.61rem; }
.workflow-examples i { color: var(--navy); font-style: normal; }
.tool-strip { margin-top: 18px; padding: 32px 38px; border-radius: 28px; color: #fff; background: var(--navy-deep); }
.tool-strip > p { margin-bottom: 24px; color: rgba(255, 255, 255, 0.56); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.14em; }
.tool-strip > div { display: flex; flex-wrap: wrap; gap: 9px; }
.tool-strip span { padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; font-size: 0.68rem; font-weight: 750; }
.tool-strip span:last-child { color: var(--navy-deep); background: var(--yellow); }

.comparison-wrap table { min-width: 1140px; }

.roi { color: #fff; background: var(--navy-deep); }
.roi-heading { max-width: 980px; }
.roi-heading h2 em { color: var(--yellow); }
.roi-heading > p:last-child { max-width: 720px; color: rgba(255, 255, 255, 0.65); }
.roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 62px 0 30px; }
.roi-grid article { min-height: 315px; padding: 30px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 27px; background: rgba(255, 255, 255, 0.06); }
.roi-grid span { color: var(--yellow); font-size: 0.57rem; font-weight: 850; letter-spacing: 0.14em; }
.roi-grid h3 { margin: 32px 0 22px; font-size: 1.6rem; line-height: 1.05; letter-spacing: -0.04em; }
.roi-grid p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.76rem; }

.pricing { color: var(--text); background: var(--paper); }
.pricing-heading h2 em { color: var(--navy); }
.pricing-heading > p:last-child { color: var(--muted); }
.pricing-rail article { border-color: var(--line); color: var(--text); background: #fff; box-shadow: var(--shadow-small); }
.pricing-rail article > p { color: var(--navy); }
.pricing-rail article > small { color: var(--muted); }
.pricing-rail h3 { margin-top: 66px; font-size: clamp(2.1rem, 3vw, 3.3rem); }
.pricing-rail .button--price { color: #fff; background: var(--navy); }
.pricing-card--free { border-color: var(--yellow) !important; color: var(--navy-deep) !important; background: var(--yellow) !important; }
.pricing-card--free > span { position: absolute; top: 19px; right: 18px; padding: 6px 9px; border-radius: 999px; color: #fff; background: var(--navy-deep); font-size: 0.49rem; font-weight: 850; letter-spacing: 0.1em; }
.pricing-card--free > p, .pricing-card--free > small { color: rgba(13, 36, 68, 0.7) !important; }
.pricing-card--free .button { color: #fff; background: var(--navy-deep); }

.security { padding-top: 130px; background: var(--paper); }
.security-card { display: block; min-height: auto; padding: 100px 72px 70px; border-radius: 44px; background: var(--navy-deep); }
.security-card::before { display: none; }
.security-copy { max-width: 1060px; margin: 0 auto; text-align: center; }
.security-kicker { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: 32px; }
.security-kicker p { margin: 0; color: rgba(255, 255, 255, 0.56); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.14em; }
.security-seal { display: inline-flex; width: auto; height: auto; min-height: 30px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: var(--navy-deep); background: var(--yellow); box-shadow: none; font-size: 0.51rem; font-weight: 850; letter-spacing: 0.1em; }
.security-copy h2 { font-size: clamp(4rem, 6.7vw, 7.1rem); }
.security-copy h2 em { color: var(--yellow); }
.security-copy > p:not(.eyebrow) { max-width: 780px; margin-right: auto; margin-left: auto; color: rgba(255, 255, 255, 0.68); font-size: 0.96rem; }
.security-flows { grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 70px; }
.security-flows article { min-height: 230px; padding: 26px; border-radius: 23px; }
.security-flows article > span { color: var(--yellow); }
.security-flows h3 { margin: 60px 0 10px; font-size: 1.15rem; letter-spacing: -0.035em; }
.security-flows p { display: block; margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.7rem; line-height: 1.6; }

.final-cta { padding: 150px 0; color: #fff; background: var(--navy); }
.final-inner .eyebrow { color: rgba(255, 255, 255, 0.58); }
.final-inner h2 em { color: var(--yellow); }
.final-inner > p:not(.eyebrow) { color: rgba(255, 255, 255, 0.7); }
.final-inner .button--light { color: var(--navy-deep); background: var(--yellow); }

@media (max-width: 1100px) {
  .hero-grid { gap: 16px; }
  .phone-view { right: 12%; }
  .hero-message { left: -3%; }
  .workflow-layout { grid-template-columns: 1fr; }
  .template-library, .workflow-examples { min-height: 390px; }
  .pricing-rail { display: flex; overflow-x: auto; margin-inline: -14px; margin-bottom: -38px; padding: 14px 14px 38px; scroll-padding-inline: 14px; }
}

@media (max-width: 960px) {
  .hero-shell.page-shell { padding-inline: 30px; }
  .hero-grid { grid-template-columns: 0.92fr 1.08fr; }
  .phone-view { right: 4%; width: 225px; }
  .hero-outputs { right: -4%; }
  .security-flows { grid-column: auto; }
}

@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero-shell.page-shell { min-height: 1120px; padding: 105px 18px 32px; }
  .hero-grid { display: block; min-height: auto; }
  .hero-copy { padding-top: 20px; }
  .hero-demo { min-height: 570px; margin-top: 22px; }
  .phone-view { right: 7%; bottom: -18px; width: 195px; }
  .hero-message { top: 105px; left: 0; }
  .hero-processing { top: 265px; left: 2%; }
  .hero-outputs { right: 0; bottom: 28px; }
  .hero-demo-label { bottom: -5px; }
  .award-badge { flex-wrap: wrap; max-width: 310px; border-radius: 16px; }
  .award-badge i { display: none; }
  .award-badge p:last-child { width: 100%; padding-left: 20px; }
  .backers { min-height: 145px; padding: 28px 8px; }
  .statement { min-height: 76svh; padding: 90px 0; }
  .statement h2, .statement--answer h2 { font-size: clamp(3.1rem, 14.3vw, 5rem); }
  .features { min-height: auto !important; padding: 90px 0; }
  .feature-sticky { position: static; display: block; height: auto; overflow: visible; }
  .feature-rail { width: 100%; overflow-x: auto; padding: 0 14px; scroll-snap-type: x mandatory; }
  .feature-card { min-height: 565px; transform: none !important; }
  .feature-progress { display: none; }
  .quote-card { padding: 50px 28px; border-radius: 28px; }
  .quote-card > div { align-items: flex-start; flex-direction: column; }
  .workflow-intro > p:last-child { font-size: 0.88rem; }
  .template-library, .workflow-examples { min-height: auto; padding: 25px; border-radius: 25px; }
  .template-pills { margin-top: 40px; }
  .workflow-examples p { align-items: flex-start; flex-direction: column; }
  .workflow-examples i { transform: rotate(90deg); }
  .tool-strip { padding: 28px 24px; }
  .roi-grid { grid-template-columns: 1fr; }
  .roi-grid article { min-height: 240px; }
  .roi-grid h3 { margin-top: 32px; }
  .pricing-rail article { min-height: 340px; }
  .security-card { min-height: auto; padding: 72px 25px 35px; }
  .security-copy h2 { font-size: clamp(3.1rem, 13vw, 5rem); }
  .security-kicker { align-items: flex-start; flex-direction: column; }
  .security-flows { grid-template-columns: 1fr; margin-top: 50px; }
  .security-flows article { min-height: 210px; }
  .security-flows h3 { margin-top: 55px; }
}

/* Stacked hero with animated communication flow */
.hero-shell.page-shell {
  min-height: 1090px;
  padding: 112px max(24px, calc((100vw - 1440px) / 2)) 0;
}
.hero-grid {
  display: block;
  width: 100%;
  max-width: 1440px;
  min-height: auto;
}
.hero-copy {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 0;
  text-align: center;
}
.hero h1 {
  max-width: 1280px;
  margin-inline: auto;
  font-size: clamp(3.85rem, 5.15vw, 5.55rem);
  line-height: 0.92;
}
.hero-lede {
  max-width: 790px;
  margin: 30px auto 0;
  font-size: 1.03rem;
  line-height: 1.68;
}
.hero-headline { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; --phrase-color: #ffc857; }
.hero .hero-headline h1 { display: flex; align-items: center; justify-content: center; gap: .3em; font-size: clamp(1rem, 4.6vw, 5rem); white-space: nowrap; }
.hero-headline[data-tone="peach"] { --phrase-color: #ff9566; }
.hero-headline[data-tone="mint"] { --phrase-color: #55dca0; }
.hero-phrase-pill { display: flex; flex: 0 0 auto; width: fit-content; max-width: 100%; margin: 0; padding: .08em .22em .12em; border-radius: 999px; color: var(--navy-deep); background: var(--phrase-color); font-size: .88em; line-height: 1.15; transition: background-color 520ms ease; }
.hero-phrase-window { position: relative; overflow: hidden; }
.hero-phrase-window > span { display: block; white-space: nowrap; }
[data-hero-previous] { position: absolute; top: 0; left: 0; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero-phrase-pill { transition: none; }
}
.hero-actions { justify-content: center; }
.award-badge { margin-inline: auto; }
.hero-demo {
  position: relative;
  width: min(1440px, calc(100vw - 32px));
  min-height: 690px;
  margin: 20px auto 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-ambient span {
  position: absolute;
  display: block;
  width: 125%;
  height: 170px;
  left: -12%;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.62;
  will-change: transform;
}
.hero-ambient span:nth-child(1) {
  top: 185px;
  background: linear-gradient(90deg, transparent 2%, rgba(25, 169, 242, 0.08) 18%, rgba(25, 169, 242, 0.62) 46%, rgba(255, 200, 87, 0.32) 70%, transparent 98%);
  transform: rotate(-7deg) scaleX(1.08);
  animation: hero-ribbon-one 11s ease-in-out infinite alternate;
}
.hero-ambient span:nth-child(2) {
  top: 285px;
  background: linear-gradient(90deg, transparent 4%, rgba(255, 200, 87, 0.15) 24%, rgba(25, 169, 242, 0.4) 54%, rgba(255, 255, 255, 0.13) 78%, transparent 97%);
  transform: rotate(8deg) scaleX(1.06);
  animation: hero-ribbon-two 13s ease-in-out infinite alternate;
}
.hero-ambient span:nth-child(3) {
  top: 245px;
  left: 30%;
  width: 42%;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 169, 242, 0.38), rgba(25, 169, 242, 0.08) 48%, transparent 72%);
  filter: blur(46px);
  animation: hero-glow 8s ease-in-out infinite alternate;
}
@keyframes hero-ribbon-one {
  from { transform: translate3d(-3%, 14px, 0) rotate(-7deg) scaleX(1.08); }
  to { transform: translate3d(4%, -18px, 0) rotate(-2deg) scaleX(1.15); }
}
@keyframes hero-ribbon-two {
  from { transform: translate3d(4%, -12px, 0) rotate(8deg) scaleX(1.06); }
  to { transform: translate3d(-5%, 20px, 0) rotate(3deg) scaleX(1.15); }
}
@keyframes hero-glow {
  from { transform: translate3d(-6%, -8px, 0) scale(0.9); opacity: 0.35; }
  to { transform: translate3d(8%, 14px, 0) scale(1.12); opacity: 0.7; }
}
.hero-flow-lines {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero-flow-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 5 12;
  animation: hero-flow-dash 13s linear infinite;
}
.hero-flow-lines path:nth-child(n + 4) { stroke: rgba(255, 200, 87, 0.3); animation-direction: reverse; }
@keyframes hero-flow-dash { to { stroke-dashoffset: -170; } }
.phone-view {
  z-index: 3;
  right: 50%;
  bottom: -50px;
  width: 360px;
  transform: translateX(50%);
  filter: drop-shadow(0 34px 45px rgba(0, 0, 0, 0.35));
}
.hero-inputs {
  position: absolute;
  z-index: 6;
  top: 42px;
  left: 2%;
  width: 350px;
}
.hero-flow-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  padding: 15px 17px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 22px 50px rgba(2, 15, 33, 0.2);
  backdrop-filter: blur(15px);
}
.hero-flow-card + .hero-flow-card { margin-top: 28px; }
.hero-flow-card--voice { margin-left: 54px; }
.hero-flow-card--photo { margin-left: 7px; }
.hero-flow-card p { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 5px; font-size: 0.66rem; }
.hero-flow-card p small { color: #8b929b; font-size: 0.5rem; }
.hero-flow-card > div > span { display: block; font-size: 0.7rem; line-height: 1.45; }
.flow-type {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--navy-deep);
  background: var(--yellow);
  font-size: 0.77rem;
  font-weight: 900;
}
.flow-type--voice { color: #fff; background: var(--blue); }
.voice-wave { display: flex; height: 20px; align-items: center; gap: 3px; }
.voice-wave i { width: 3px; height: 7px; border-radius: 99px; background: #99a4af; }
.voice-wave i:nth-child(2n) { height: 13px; }
.voice-wave i:nth-child(3n) { height: 18px; }
.raw-photo {
  position: relative;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(135deg, #d5d2cb, #f2efe8 52%, #c0c3c3);
}
.raw-photo::before, .raw-photo::after, .raw-photo i {
  position: absolute;
  content: "";
  background: #656b70;
  transform-origin: top center;
}
.raw-photo::before { top: 3px; left: 34px; width: 2px; height: 35px; transform: rotate(27deg); }
.raw-photo::after { top: 25px; left: 24px; width: 2px; height: 27px; transform: rotate(-34deg); }
.raw-photo i { top: 31px; left: 34px; width: 1px; height: 20px; transform: rotate(52deg); }
.hero-processing {
  z-index: 8;
  top: 26px;
  left: 50%;
  padding: 10px 15px;
  color: #fff;
  background: rgba(7, 22, 45, 0.88);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}
.hero-outputs {
  z-index: 7;
  top: 62px;
  right: 2%;
  bottom: auto;
  width: 350px;
}
.output-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 15px 17px;
  border-color: rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 22px 50px rgba(2, 15, 33, 0.2);
  backdrop-filter: blur(15px);
}
.output-card + .output-card { margin-top: 28px; }
.output-card--record { right: 48px; left: auto; background: rgba(229, 245, 255, 0.96); }
.output-card--report { right: 2px; background: rgba(255, 247, 218, 0.97); }
.output-card p { margin-bottom: 4px; }
.output-card b { font-size: 0.73rem; }
.output-card small { font-size: 0.52rem; }
.flow-type--record { color: #fff; background: var(--blue); }
.flow-type--report { background: #a7efd5; }
.hero-demo-label {
  z-index: 9;
  right: 50%;
  bottom: 20px;
  gap: 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.5rem;
  transform: translateX(50%);
}
.backers {
  min-height: 112px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.52);
  background: var(--navy-deep);
}
.backers b { color: rgba(255, 255, 255, 0.78); }

@media (max-width: 1100px) {
  .hero-shell.page-shell { min-height: 1060px; }
  .hero h1 { font-size: clamp(3.75rem, 6.7vw, 4.7rem); }
  .hero-demo { min-height: 650px; }
  .phone-view { right: 50%; width: 330px; }
  .hero-inputs, .hero-outputs { width: 300px; }
  .hero-inputs { left: 0; }
  .hero-outputs { right: 0; }
  .hero-flow-card--voice { margin-left: 24px; }
  .output-card--record { right: 22px; }
}

@media (max-width: 760px) {
  .hero-shell.page-shell {
    min-height: auto;
    padding: 112px 18px 0;
  }
  .hero-copy { padding: 18px 0 0; }
  .hero h1 { font-size: clamp(1.6rem, 8.5vw, 3.65rem); line-height: 0.95; }
  .hero-lede { margin-top: 24px; font-size: 0.86rem; line-height: 1.65; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .button { min-width: 0; padding-inline: 13px; }
  .award-badge { margin-top: 16px; }
  .hero-demo {
    width: calc(100vw - 14px);
    min-height: 650px;
    margin-top: 24px;
  }
  .phone-view { right: 50%; bottom: -42px; width: 210px; }
  .hero-inputs { top: 118px; left: 0; width: 172px; }
  .hero-outputs { top: 142px; right: 0; width: 176px; }
  .hero-flow-card, .output-card { min-height: 69px; padding: 10px; border-radius: 15px; gap: 8px; }
  .hero-flow-card + .hero-flow-card, .output-card + .output-card { margin-top: 26px; }
  .hero-flow-card--voice { margin-left: 0; }
  .hero-flow-card--photo { margin-left: 7px; }
  .output-card--record { right: 0; }
  .hero-flow-card p, .output-card p { display: block; margin-bottom: 3px; font-size: 0.48rem; }
  .hero-flow-card p small { display: none; }
  .hero-flow-card > div > span, .output-card b { font-size: 0.52rem; line-height: 1.35; }
  .output-card small { display: none; }
  .avatar, .flow-type { width: 30px; height: 30px; font-size: 0.48rem; }
  .raw-photo { width: 38px; height: 38px; border-radius: 9px; }
  .voice-wave { height: 13px; gap: 2px; }
  .voice-wave i { width: 2px; max-height: 13px; }
  .hero-processing { top: 72px; max-width: 190px; font-size: 0.44rem; white-space: nowrap; }
  .hero-flow-lines { opacity: 0.62; }
  .hero-demo-label { bottom: 12px; width: 100%; justify-content: center; font-size: 0.42rem; }
  .hero-ambient span { height: 110px; filter: blur(26px); }
  .hero-ambient span:nth-child(1) { top: 285px; }
  .hero-ambient span:nth-child(2) { top: 365px; }
  .backers { min-height: 145px; padding: 28px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ambient span, .hero-flow-lines path { animation: none; }
}

/* Compact glass navigation and scroll-linked statement reveal */
.site-header { top: 14px; }
.nav {
  width: min(920px, calc(100% - 28px));
  min-height: 56px;
  padding: 6px 8px 6px 18px;
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(7, 22, 45, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}
.brand img { width: 108px; height: 32px; }
.nav-menu { margin-left: 30px; }
.nav-links { gap: 20px; }
.nav-links a, .login-link { font-size: 0.62rem; }
.nav-actions { gap: 15px; }
.button--nav { min-height: 38px; padding-inline: 17px; font-size: 0.68rem; }

.statement h2, .statement--answer h2 {
  max-width: 980px;
  font-size: clamp(2.8rem, 4.8vw, 5rem);
  line-height: 1.03;
}
.js-motion [data-statement] { opacity: 1; transform: none; }
.statement-word { display: inline-block; white-space: nowrap; }
.statement-char {
  display: inline-block;
  opacity: 0.08;
  will-change: opacity;
}

@media (max-width: 960px) {
  .nav { padding-left: 16px; }
  .nav-toggle { width: 38px; height: 38px; }
  .nav-menu {
    top: 65px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}

@media (max-width: 760px) {
  .statement h2, .statement--answer h2 { font-size: clamp(2.25rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .statement-char { opacity: 1; }
}

/* Browser comment refinement pass */
.nav {
  width: min(800px, calc(100% - 44px));
  min-height: 50px;
  padding: 5px 7px 5px 15px;
}
.brand img { width: 96px; height: 29px; }
.nav-menu { margin-left: 24px; }
.nav-links { gap: 17px; }
.nav-links a, .login-link { font-size: 0.58rem; }
.button--nav { min-height: 35px; padding-inline: 15px; font-size: 0.62rem; }

.hero { background: #fff; }
.hero-card {
  position: relative;
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  color: #fff;
  background: var(--navy-deep);
  transform-origin: top center;
  will-change: transform, border-radius;
}
.hero-shell.page-shell, .hero-card .backers { background: transparent; }

.statement--problem h2 em,
.statement--answer h2 em { color: var(--text); }

.feature-rail { gap: 200px; }
.feature-card {
  min-height: min(590px, calc(100svh - 150px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  will-change: auto;
}
.feature-graphic {
  height: 355px;
  border: 1px solid rgba(27, 62, 114, 0.12);
  border-radius: 28px;
  box-shadow: 0 28px 60px rgba(7, 22, 45, 0.12);
}
.feature-card > .card-label,
.feature-card > h3,
.feature-card > p:last-child { padding-inline: 6px; }
.task-graphic { background: linear-gradient(145deg, #e8f7ff, #c7e9fc); }
.mini-message, .mini-task { transform: none; }
.mini-message { border-radius: 22px 22px 8px 22px; }
.mini-task { border-radius: 12px; box-shadow: 0 16px 30px rgba(144, 115, 23, 0.11); }
.form-graphic { background: linear-gradient(160deg, #fff8d9 0%, #ffe69a 100%); }
.form-graphic label span { border-color: rgba(87, 70, 16, 0.15); }
.search-graphic { border-color: rgba(255, 255, 255, 0.1); background: radial-gradient(circle at 76% 15%, #1d4b79 0, var(--navy-deep) 47%); }
.plan-graphic { border-color: #bdd1dc; background: #e7edf0; }
.plan-graphic::after { position: absolute; inset: 14px; border: 1px solid rgba(27, 62, 114, 0.18); border-radius: 17px; content: ""; pointer-events: none; }
.dashboard-graphic { border-color: #d5cff4; background: linear-gradient(150deg, #f1efff, #dedaff); }
.dashboard-graphic > p span:nth-child(odd) { background: #6049bf; }
.dashboard-graphic > p span:nth-child(even) { background: var(--yellow); }

.usage-stats { padding: 34px 0 110px; background: var(--paper); }
.stats-banner {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  align-items: center;
  gap: 28px;
  padding: 34px 42px;
  border-radius: 28px;
  color: #fff;
  background: var(--navy-deep);
}
.stats-banner > p { margin: 0; color: rgba(255,255,255,.57); font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.stats-banner > div { display: grid; gap: 3px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,.16); }
.stats-banner strong { color: var(--yellow); font: 800 clamp(2rem,3vw,3.15rem)/1 "Onest",sans-serif; letter-spacing: -.055em; }
.stats-banner span { color: rgba(255,255,255,.65); font-size: .68rem; }

.brain { position: relative; height: 230svh; overflow: clip; color: var(--text); background: #fff; }
.brain-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.brain-intro { position: absolute; z-index: 4; top: 9svh; left: 50%; text-align: center; transform: translateX(-50%); }
.brain-intro h2 { max-width: 900px; margin-inline: auto; font-size: clamp(3.2rem, 5.7vw, 6rem); }
.brain-intro h2 em { color: var(--navy); }
.brain-intro > p:last-child { max-width: 700px; margin-inline: auto; color: var(--muted); font-size: 1rem; }
.brain-network { position: absolute; z-index: 2; inset: 0; overflow: hidden; }
.brain-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.brain.is-network-disabled .brain-canvas,
.brain.is-network-disabled .brain-node { display: none !important; }
.brain-expansion {
  --brain-expansion-x: 50%;
  --brain-expansion-y: 58%;
  --brain-expansion-radius: 0px;
  position: absolute;
  z-index: 4;
  inset: 0;
  background: var(--navy-deep);
  clip-path: circle(var(--brain-expansion-radius) at var(--brain-expansion-x) var(--brain-expansion-y));
  pointer-events: none;
  will-change: clip-path;
}
.brain-network svg { position: absolute; inset: 17% 7% 2%; width: 86%; height: 79%; opacity: .6; }
.brain-network path { fill: none; stroke: rgba(27,62,114,.28); stroke-width: 1.4; stroke-dasharray: 7 10; }
.brain-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; min-width: 126px; padding: 12px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy); background: rgba(255,255,255,.94); box-shadow: var(--shadow-small); font-size: .72rem; font-weight: 800; }
.brain-node i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 9px; color: #fff; background: var(--navy); font-size: .6rem; font-style: normal; }
.brain-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 10;
  width: 210px;
  padding: 10px 12px;
  border-radius: 11px;
  color: #fff;
  background: var(--navy-deep);
  box-shadow: 0 12px 28px rgba(7, 22, 45, .22);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  pointer-events: none;
}
.brain-tooltip::after { position: absolute; top: 100%; left: 50%; border: 6px solid transparent; border-top-color: var(--navy-deep); content: ""; transform: translateX(-50%); }
.brain-node:hover, .brain-node:focus-visible { z-index: 8; }
.brain-node:hover .brain-tooltip, .brain-node:focus-visible .brain-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.brain-node:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.brain-node--messages .brain-tooltip,
.brain-node--reports .brain-tooltip,
.brain-node--schedules .brain-tooltip { left: 0; transform: translateY(6px); }
.brain-node--messages:hover .brain-tooltip,
.brain-node--messages:focus-visible .brain-tooltip,
.brain-node--reports:hover .brain-tooltip,
.brain-node--reports:focus-visible .brain-tooltip,
.brain-node--schedules:hover .brain-tooltip,
.brain-node--schedules:focus-visible .brain-tooltip { transform: translateY(0); }
.brain-node--forms .brain-tooltip,
.brain-node--photos .brain-tooltip,
.brain-node--tasks .brain-tooltip { right: 0; left: auto; transform: translateY(6px); }
.brain-node--forms:hover .brain-tooltip,
.brain-node--forms:focus-visible .brain-tooltip,
.brain-node--photos:hover .brain-tooltip,
.brain-node--photos:focus-visible .brain-tooltip,
.brain-node--tasks:hover .brain-tooltip,
.brain-node--tasks:focus-visible .brain-tooltip { transform: translateY(0); }
.brain-node--messages { top: 22%; left: 8%; }
.brain-node--files { top: 14%; left: 45%; }
.brain-node--forms { top: 22%; right: 8%; }
.brain-node--photos { top: 48%; right: 4%; }
.brain-node--tasks { right: 10%; bottom: 13%; }
.brain-node--decisions { bottom: 7%; left: 44%; }
.brain-node--schedules { bottom: 13%; left: 9%; }
.brain-node--reports { top: 48%; left: 4%; }
.brain-core { position: absolute; z-index: 5; top: 57%; left: 50%; display: grid; width: 190px; height: 190px; place-items: center; align-content: center; gap: 11px; border-radius: 50%; color: #fff; background: var(--navy-deep); box-shadow: 0 25px 70px rgba(7,22,45,.24); text-align: center; transform: translate(-50%,-50%); transform-origin: center; }
.brain-core span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: var(--navy-deep); background: var(--yellow); font-size: .7rem; font-weight: 900; }
.brain-core b { font-size: .78rem; line-height: 1.25; }
.brain-end { position: absolute; z-index: 6; top: 50%; left: 50%; width: min(940px,calc(100% - 40px)); color: #fff; opacity: 0; text-align: center; transform: translate(-50%,-42%); pointer-events: none; }
.brain-end p { margin-bottom: 20px; color: var(--yellow); font-size: .67rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.brain-end h2 { margin: 0; font-size: clamp(3.3rem,6vw,6.4rem); }

.team-love { background: #fff; }
.team-love-heading { display: grid; grid-template-columns: .55fr 1.45fr; align-items: end; gap: 60px; margin-bottom: 55px; }
.team-love-heading h2 { max-width: 880px; margin: 0; }
.team-love-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.team-love-grid article { grid-column: span 2; min-height: 300px; padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--paper); }
.team-love-grid article:nth-child(4) { grid-column: 2 / span 2; }
.team-love-grid article > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: #fff; background: var(--navy); font-size: .75rem; font-weight: 850; }
.team-love-grid h3 { margin: 85px 0 12px; font-size: 1.35rem; letter-spacing: -.035em; }
.team-love-grid p { margin: 0; color: var(--muted); font-size: .78rem; }

.roi-grid strong { display: block; color: var(--yellow); font: 800 clamp(3.2rem,5vw,5.8rem)/.95 "Onest",sans-serif; letter-spacing: -.065em; }
.roi-grid h3 { margin-top: 32px; }
.roi-note { margin: -8px 0 40px; max-width: 800px; color: rgba(255,255,255,.65); font-size: .78rem; line-height: 1.6; }
.roi-eyebrow { margin: 0 0 22px; color: var(--yellow); font-size: .7rem; font-weight: 800; letter-spacing: .14em; }
.roi-grid article > span { display: block; margin-top: 14px; font-size: .62rem; }
.roi-grid dl { margin: 0; }
.roi-grid dl > div + div { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.roi-grid dt { margin-bottom: 8px; color: #fff; font-size: .75rem; font-weight: 800; }
.roi-grid dd { margin: 0; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.65; }
.roi-value { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 36px; padding-top: 38px; border-top: 1px solid rgba(255,255,255,.2); }
.roi-value h3 { margin: 0; font-size: 1.7rem; line-height: 1.2; letter-spacing: -.04em; }
.roi-value h3 em { color: var(--yellow); font-style: normal; }
.roi-value h4 { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.4; }
.roi-value p { margin: 0; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.65; }
@media (max-width: 760px) {
  .roi-value { grid-template-columns: 1fr; gap: 28px; }
}

.security-card {
  position: relative;
  display: grid;
  min-height: 760px;
  place-items: center;
  padding: 95px 70px;
  isolation: isolate;
  border-radius: 52px;
  background: linear-gradient(145deg,#202735 0%,#14383a 100%);
}
.security-card::before {
  position: absolute;
  z-index: -2;
  top: 8%;
  left: 50%;
  display: block;
  width: min(46vw,520px);
  height: min(31vw,350px);
  border: min(8vw,92px) solid rgba(255,255,255,.035);
  border-bottom: 0;
  border-radius: 260px 260px 0 0;
  content: "";
  transform: translateX(-50%);
}
.security-card::after { position: absolute; z-index: -2; top: 35%; left: 50%; width: min(64vw,720px); height: 51%; border-radius: 80px; background: rgba(255,255,255,.035); content: ""; transform: translateX(-50%); }
.security-copy { position: relative; z-index: 2; max-width: 900px; }
.security-copy h2 { font-size: clamp(3.4rem,6vw,6.4rem); }
.security-copy > p:not(.eyebrow) { max-width: 690px; }
.security-kicker { justify-content: center; }
.security-flows { display: none; }

.journal { background: #fff; }
.journal-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; margin-bottom: 56px; }
.journal-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -10px; }
.journal-heading h2 { margin: 0; }
.journal-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.journal-grid a { display: flex; min-height: 390px; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 28px; background: var(--paper); transition: transform .25s ease,background .25s ease; }
.journal-grid a:hover { background: var(--blue-soft); transform: translateY(-6px); }
.journal-grid a:nth-child(2) { background: var(--yellow-soft); }
.journal-grid a:nth-child(3) { color: #fff; background: var(--navy-deep); }
.journal-grid span { color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.journal-grid a:nth-child(3) span,.journal-grid a:nth-child(3) p { color: rgba(255,255,255,.58); }
.journal-grid h3 { margin: 105px 0 15px; font-size: clamp(1.8rem,2.7vw,3rem); line-height: 1; letter-spacing: -.05em; }
.journal-grid p { margin: 0; color: var(--muted); font-size: .78rem; }
.journal-grid b { margin-top: auto; font-size: .7rem; }
.footer-brand h2::first-line { color: #fff; }

@media (max-width: 1100px) {
  .stats-banner { grid-template-columns: 1fr repeat(3,1fr); padding-inline: 28px; }
  .stats-banner > div { padding-left: 18px; }
  .team-love-grid article { grid-column: span 3; }
  .team-love-grid article:nth-child(4) { grid-column: span 3; }
  .team-love-grid article:last-child { grid-column: 2 / span 4; }
}

@media (max-width: 960px) {
  .nav { width: min(600px, calc(100% - 44px)); }
  .nav-toggle { width: 35px; height: 35px; }
  .nav-menu { top: 59px; }
  .stats-banner { grid-template-columns: repeat(3,1fr); }
  .stats-banner > p { grid-column: 1 / -1; }
  .stats-banner > div:first-of-type { padding-left: 0; border-left: 0; }
  .brain-intro { top: 8svh; }
  .brain-core { top: 59%; }
  .team-love-heading { grid-template-columns: 1fr; gap: 8px; }
  .journal-grid { grid-template-columns: 1fr 1fr; }
  .journal-grid a:last-child { grid-column: 1 / -1; min-height: 330px; }
}

@media (max-width: 760px) {
  .nav { width: min(600px, calc(100% - 36px)); }
  .hero-card { border-radius: 0; }
  .feature-rail { gap: 26px; }
  .feature-card { flex-basis: calc(100vw - 56px); min-height: 540px; }
  .feature-graphic { height: 320px; }
  .usage-stats { padding-bottom: 80px; }
  .stats-banner { grid-template-columns: 1fr; gap: 21px; padding: 28px; }
  .stats-banner > p { grid-column: auto; }
  .stats-banner > div, .stats-banner > div:first-of-type { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); border-left: 0; }
  .brain { height: 190svh; }
  .brain-intro { top: 8svh; }
  .brain-intro h2 { font-size: clamp(2.65rem,12vw,4rem); }
  .brain-intro > p:last-child { font-size: .84rem; }
  .brain-network svg { inset: 27% -20% 2%; width: 140%; height: 66%; }
  .brain-node { min-width: auto; padding: 9px 11px; font-size: .58rem; }
  .brain-node i { width: 22px; height: 22px; }
  .brain-node--messages { top: 42%; left: 3%; }
  .brain-node--files { top: 34%; left: 40%; }
  .brain-node--forms { top: 42%; right: 3%; }
  .brain-node--photos { top: 59%; right: -2%; }
  .brain-node--tasks { right: 2%; bottom: 6%; }
  .brain-node--decisions { bottom: 1%; left: 35%; }
  .brain-node--schedules { bottom: 6%; left: 1%; }
  .brain-node--reports { top: 59%; left: -2%; }
  .brain-core { top: 66%; width: 145px; height: 145px; }
  .brain-end h2 { font-size: clamp(2.6rem,11vw,4rem); }
  .team-love-grid { grid-template-columns: 1fr; }
  .team-love-grid article,.team-love-grid article:nth-child(4),.team-love-grid article:last-child { grid-column: auto; min-height: 270px; }
  .team-love-grid h3 { margin-top: 65px; }
  .roi-grid h3 { margin-top: 32px; }
  .security-card { min-height: 690px; padding: 70px 25px; border-radius: 34px; }
  .security-card::before { width: 68vw; height: 45vw; border-width: 13vw; }
  .security-card::after { top: 31%; width: 78vw; height: 56%; border-radius: 45px; }
  .security-kicker { align-items: center; flex-direction: column; }
  .security-copy h2 { font-size: clamp(2.8rem,12vw,4.4rem); }
  .journal-heading { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-grid a,.journal-grid a:last-child { grid-column: auto; min-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card { transform: none !important; border-radius: 0 !important; }
  .brain { height: auto; padding: 110px 0; }
  .brain-sticky { position: relative; height: 850px; }
  .brain-intro { position: relative; top: 0; }
  .brain-core { transform: translate(-50%,-50%) !important; }
  .brain-end { display: none; }
}

/* September positioning: static hero, parallax, persona workflows */
html { scroll-behavior: smooth; }
.nav {
  width: min(780px, calc(100% - 44px));
  min-height: 58px;
  padding: 7px 9px 7px 18px;
}
.nav > .brand img { width: 110px; height: 33px; }
.nav-menu { margin-left: 30px; }
.nav-links { gap: 26px; }
.nav-links a, .login-link { font-size: .68rem; }
.nav-actions { gap: 17px; }
.button--nav { min-height: 40px; padding-inline: 18px; font-size: .7rem; }

@media (min-width: 961px) {
  .nav {
    grid-template-columns: 1fr auto 1fr;
    width: 60%;
    min-width: 640px;
    min-height: 72px;
    padding: 9px 24px;
  }
  .nav-menu { display: contents; }
  .nav-links { justify-self: center; }
  .nav-actions { justify-self: end; }
  .nav > .brand img { width: 131px; height: 40px; }
  .nav-links a, .login-link { font-size: .85rem; }
  .button--nav { min-height: 48px; padding-inline: 24px; font-size: .85rem; }
}

.hero-card,
.hero-shell.page-shell {
  background: var(--navy-deep);
}
.hero-shell.page-shell { min-height: 1174px; }
.hero-copy { padding-top: 84px; }
@media (max-width: 760px) {
  .hero-copy { padding-top: 58px; }
}
.hero-ambient span,
.hero-flow-lines path { animation: none !important; }
.hero-ambient { opacity: .48; }
.hero-processing { display: none; }
.js-motion [data-hero-reveal] { opacity: 1 !important; transform: none !important; }
.hero-copy,
.hero-demo { will-change: transform; }
.hero-recognition {
  position: fixed;
  z-index: 12;
  top: calc(100svh - 90px);
  left: max(100px, calc((100vw - 1280px) / 2));
  display: flex;
  align-items: center;
  gap: 0;
  max-width: calc(100% - 56px);
  color: var(--navy-deep);
  will-change: opacity;
}
.hero-recognition__emoji {
  position: relative;
  z-index: 2;
  display: block;
  margin-right: -7px;
  font-size: 2.45rem;
  line-height: 1;
  filter: drop-shadow(0 8px 10px rgba(7,22,45,.2));
  transform: translate(-8px,-2px) rotate(-13deg);
  transform-origin: 60% 70%;
}
.hero-recognition__pill {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 19px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 10px 30px rgba(7,22,45,.12);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}
.hero-recognition__award { display: flex; align-items: center; gap: 7px; }
.hero-recognition__award img { width: 36px; height: 36px; object-fit: contain; }
.hero-recognition__award:first-child img { width: 40px; }
.hero-recognition b { display: block; width: 92px; font-size: .5rem; line-height: 1.25; letter-spacing: .045em; text-transform: uppercase; }
.hero-recognition__award:last-child b { width: 85px; }
.hero-recognition__pill > i { flex: 0 0 1px; width: 1px; height: 27px; background: rgba(13,36,68,.18); }

.features,
.feature-sticky { background: #fff; }

.consolidation-graphic {
  display: grid;
  grid-template-columns: .9fr 1.15fr .9fr;
  align-items: center;
  gap: 13px;
  padding: 26px;
  background: linear-gradient(145deg,#f4f8fb,#e7f2f8);
}
.source-stack,.action-stack { display: grid; gap: 11px; }
.source-stack span,.action-stack span { padding: 11px 9px; border: 1px solid rgba(27,62,114,.12); border-radius: 12px; color: var(--navy); background: #fff; box-shadow: 0 8px 20px rgba(7,22,45,.07); font-size: .56rem; font-weight: 800; text-align: center; }
.action-stack span { color: #fff; background: var(--navy); }
.consolidation-core { position: relative; display: grid; min-height: 150px; place-items: center; align-content: center; gap: 6px; padding: 15px; border-radius: 24px; color: #fff; background: var(--navy-deep); text-align: center; }
.consolidation-core::before,.consolidation-core::after { position: absolute; top: 50%; width: 14px; height: 1px; background: rgba(27,62,114,.35); content:""; }
.consolidation-core::before { right: 100%; }
.consolidation-core::after { left: 100%; }
.consolidation-core small { color: rgba(255,255,255,.55); font-size: .43rem; font-weight: 850; letter-spacing: .1em; }
.consolidation-core b { font-size: 1.15rem; }
.consolidation-core i { color: var(--yellow); font-size: .51rem; font-style: normal; }

.search-graphic { display: block; padding: 24px; background: linear-gradient(155deg,#102b50,#0b1d38); }
.search-graphic > div { display: flex; padding: 0; border: 0; background: transparent; }
.search-graphic .search-top { align-items: center; gap: 10px; }
.search-top small { color: rgba(255,255,255,.5); font-size: .48rem; font-weight: 850; letter-spacing: .12em; }
.search-graphic > .search-prompt { width: 100%; margin: 28px 0 12px; padding: 16px 18px; border-radius: 18px 18px 6px 18px; color: var(--text); background: #fff; font-size: .74rem; font-weight: 750; }
.search-graphic > .search-answer { display: grid; gap: 9px; padding: 19px; border: 1px solid rgba(255,255,255,.15); border-radius: 19px; background: rgba(255,255,255,.08); }
.search-answer small { color: var(--yellow); font-size: .44rem; font-weight: 850; letter-spacing: .12em; }
.search-answer b { font-size: .71rem; line-height: 1.5; }
.search-graphic > .search-sources { display: flex; gap: 7px; margin-top: 13px; }
.search-sources span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.62); font-size: .48rem; }

.record-graphic { padding: 25px; color: #fff; background: linear-gradient(145deg,#1b3e72,#0d2444); }
.record-head { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; padding-bottom: 19px; border-bottom: 1px solid rgba(255,255,255,.14); }
.record-head > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--navy-deep); background: var(--yellow); font-size: .6rem; font-weight: 900; }
.record-head p { margin: 0; }
.record-head small,.record-head b { display:block; }
.record-head small { color: rgba(255,255,255,.48); font-size: .43rem; font-weight: 850; letter-spacing: .1em; }
.record-head b { margin-top: 4px; font-size: .72rem; }
.record-head i { padding: 6px 8px; border-radius: 999px; color: #9fe0c6; background: rgba(159,224,198,.12); font-size: .48rem; font-style: normal; }
.record-graphic ul { display:grid; gap:0; margin:18px 0; padding:0; list-style:none; }
.record-graphic li { display:flex; align-items:center; gap:10px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.62); font-size:.57rem; }
.record-graphic li span { width:62px; color:#fff; font:800 .9rem "Onest",sans-serif; }
.record-foot { display:flex; flex-wrap:wrap; gap:7px; }
.record-foot span { padding:7px 9px; border-radius:999px; color:rgba(255,255,255,.68); background:rgba(255,255,255,.09); font-size:.45rem; }

.industries { background: linear-gradient(180deg,#0d2444,#07162d); }
.industry-heading { max-width: 1180px; }
.industry-heading h2 { font-size: clamp(3.8rem,7vw,7.3rem); }
.industry-stage { background: rgba(255,255,255,.065); }
.industry-photo--project_manager { background:#dff3ff; }
.industry-photo--site_team { background:#fff0bd; }
.industry-photo--operations { background:#e9f5eb; }
.industry-photo--leadership { background:#efedff; }
.industry-photo--external { background:#f4f5f7; }
.industry-tabs { gap: 10px; }
.industry-tabs button { min-height: 50px; padding-inline: 20px; font-size:.68rem; }

.investors { padding-block: 42px; background: #fff; }
.investor-strip {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  align-items: center;
  gap: 26px;
  min-height: 108px;
  padding: 24px 36px;
  border: 1px solid rgba(27,62,114,.12);
  border-radius: 24px;
  color: var(--navy);
  background: #f5f8fb;
}
.investor-strip span { font-size: .55rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.investor-strip b { font: 750 .84rem "Onest",sans-serif; text-align: center; }

/* Portrait feature stories — visual direction drawn from the supplied mobile frames */
.features {
  --feature-card-width: min(410px, calc(100vw - 72px));
}
.feature-rail {
  gap: clamp(120px, 14vw, 210px);
  padding-inline: calc((100vw - var(--feature-card-width)) / 2);
}
.feature-card {
  flex-basis: var(--feature-card-width);
  min-height: min(740px, calc(100svh - 105px));
  scroll-snap-align: center;
  perspective: 1200px;
}
.feature-graphic {
  height: min(490px, calc(100svh - 305px));
  min-height: 420px;
  margin-bottom: 32px;
  overflow: visible;
  border: 0;
  border-radius: 34px;
  box-shadow: 0 32px 80px rgba(7,22,45,.17);
  transform: perspective(1100px) rotateX(var(--pointer-y,0deg)) rotateY(calc(var(--scroll-tilt,0deg) + var(--pointer-x,0deg))) translateY(var(--card-lift,0px));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out, box-shadow 260ms ease, filter 260ms ease;
}
.feature-card:hover { --card-lift: -9px; }
.feature-card:hover .feature-graphic { box-shadow: 0 44px 96px rgba(7,22,45,.24); filter: saturate(1.06); }
.feature-card > h3 { margin: 0 0 15px; padding-inline: 4px; font-size: clamp(1.75rem,2.2vw,2.2rem); line-height: 1.04; }
.feature-card > p:last-child { padding-inline: 4px; font-size: .86rem; line-height: 1.62; }
.graphic-orbit { position: absolute; z-index: 0; display: block; width: 190px; height: 190px; border: 42px solid currentColor; border-radius: 50%; opacity: .2; pointer-events: none; transform: translateZ(-20px); }
.graphic-orbit--cyan { color: #32c2ff; }
.graphic-orbit--yellow { color: var(--yellow); }
.graphic-orbit--blue { color: #5f96f4; }

.task-graphic { padding: 0; background: var(--card-navy); }
.task-graphic .graphic-orbit { top: -74px; right: -68px; }
.task-graphic .mini-message { position: absolute; top: 78px; left: -28px; width: 88%; border: 2px solid #22b5ff; transform: translateZ(54px) translate3d(var(--scroll-shift-soft-reverse,0px),0,0) rotate(-2deg); }
.task-graphic .mini-task { position: absolute; top: 205px; right: -26px; width: 85%; margin: 0; border: 2px solid #ffad18; background: #fff; transform: translateZ(78px) translate3d(var(--scroll-shift-soft,0px),0,0) rotate(2deg); }
.task-graphic .mini-task small { color: #d47800; }
.mini-status { position: absolute; z-index: 3; bottom: 58px; left: 34px; display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: 16px; color: var(--navy-deep); background: var(--yellow); box-shadow: 0 18px 36px rgba(5,16,32,.3); transform: translateZ(95px) rotate(-3deg); }
.mini-status b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #fff; background: var(--navy); }
.mini-status span { font-size: .64rem; font-weight: 850; }

.consolidation-graphic { background: var(--card-blue); }
.consolidation-graphic .graphic-orbit { right: -80px; bottom: -68px; }
.consolidation-graphic .source-stack { margin-left: -25px; transform: translateZ(55px) translateX(var(--scroll-shift-soft-reverse,0px)); }
.consolidation-graphic .consolidation-core { border: 1px solid rgba(255,255,255,.2); box-shadow: 0 24px 52px rgba(15,49,104,.28); transform: translateZ(85px); }
.consolidation-graphic .action-stack { margin-right: -30px; transform: translateZ(65px) translateX(var(--scroll-shift-soft,0px)); }
.consolidation-graphic .source-stack span,
.consolidation-graphic .action-stack span { border: 1px solid rgba(255,255,255,.3); }

.search-graphic { padding: 34px 28px; background: linear-gradient(155deg,#ddecff,#b8d6ff); }
.search-graphic .graphic-orbit { top: -82px; left: -72px; }
.search-graphic .search-top { position: relative; z-index: 2; color: var(--navy); transform: translateZ(45px); }
.search-graphic .search-top small { color: rgba(27,62,114,.62); }
.search-graphic > .search-prompt { position: relative; z-index: 2; width: 104%; margin: 42px 0 16px -13%; border: 2px solid #22b5ff; box-shadow: 0 18px 36px rgba(24,75,135,.16); transform: translateZ(72px) translateX(var(--scroll-shift-reverse,0px)); }
.search-graphic > .search-answer { position: relative; z-index: 3; width: 104%; margin-left: 9%; border: 2px solid #ffad18; color: var(--text); background: #fff; box-shadow: 0 22px 45px rgba(24,75,135,.2); transform: translateZ(94px) translateX(var(--scroll-shift,0px)); }
.search-graphic > .search-sources { position: absolute; z-index: 4; right: -18px; bottom: 42px; transform: translateZ(110px) rotate(-2deg); }
.search-sources span { border-color: rgba(27,62,114,.13); color: var(--navy); background: #fff; box-shadow: 0 10px 22px rgba(24,75,135,.12); }

.plan-graphic { background: #ccdef5; }
.plan-graphic .graphic-orbit { right: -68px; bottom: -70px; }
.plan-graphic > .graphic-orbit { padding: 0; border-radius: 50%; color: #32c2ff; background: transparent; box-shadow: none; }
.plan-graphic > img:first-of-type { inset: 0; width: 100%; height: 100%; border-radius: 34px; object-fit: cover; clip-path: inset(0 round 34px); transform: translateZ(12px) scale(1.03); }
.plan-graphic > img:nth-of-type(2) { top: 23%; left: 45%; width: 74px; transform: translateZ(75px) translateX(var(--scroll-shift-soft,0px)); }
.plan-graphic > .plan-location { right: -18px; bottom: 90px; border: 2px solid #ffad18; transform: translateZ(90px) rotate(2deg); }
.plan-photo { position: absolute; z-index: 4; bottom: -25px; left: -25px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; width: 58%; padding: 15px; border: 2px solid #22b5ff; border-radius: 18px; color: var(--text); background: #fff; box-shadow: 0 24px 48px rgba(7,22,45,.2); transform: translateZ(105px) rotate(-3deg); }
.plan-photo > span { position: static; grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; box-shadow: none; }
.plan-photo b { font-size: .64rem; }
.plan-photo small { color: var(--muted); font-size: .5rem; }

.record-graphic { background: var(--card-royal); }
.record-graphic .graphic-orbit { top: -73px; right: -72px; }
.record-graphic .record-head { position: relative; z-index: 2; transform: translateZ(55px); }
.record-graphic ul { position: relative; z-index: 2; width: 106%; margin-left: -9%; padding: 8px 20px; border-radius: 20px; background: rgba(13,36,68,.92); box-shadow: 0 22px 48px rgba(13,36,68,.25); transform: translateZ(82px) translateX(var(--scroll-shift-reverse,0px)); }
.record-graphic .record-foot { position: absolute; z-index: 4; right: -20px; bottom: 34px; width: 72%; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 20px 42px rgba(13,36,68,.2); transform: translateZ(105px) rotate(2deg); }
.record-graphic .record-foot span { color: var(--navy); background: var(--blue-soft); }

.mail-dot { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: #4d8de8; font-size: .65rem; font-weight: 900; }
.comms-card strong { display: block; margin-bottom: 3px; color: var(--navy); font-size: .5rem; }
.external-copy h2 { font-size: clamp(3.4rem,5.4vw,5.6rem); }
.external-copy > p:not(.eyebrow):not(.channel-note) { font-size: 1rem; }
.external-copy li { font-size: .78rem; }

.workflows { margin-top: -1px; color: #fff; background: var(--navy-deep); }
.workflow-intro { max-width: 1120px; }
.workflow-intro h2 em { color: var(--yellow); }
.workflow-intro > p:last-child { max-width: 810px; color: rgba(255,255,255,.67); }
.action-flows { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 64px; }
.action-story { min-height: 650px; padding: 27px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 34px; color: var(--navy-deep); background: #dceaff; }
.action-story--leave { background: #f1f5fb; }
.action-story--quote { background: #5b96e7; }
.action-story__head { min-height: 128px; padding-bottom: 24px; border-bottom: 1px solid rgba(13,36,68,.15); }
.action-story__head > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: var(--navy); font-size: .6rem; font-weight: 900; }
.action-story__head h3 { margin: 18px 0 0; font-size: 1.55rem; line-height: 1.08; letter-spacing: -.045em; }
.action-thread { position: relative; display: grid; gap: 15px; padding-top: 30px; }
.action-message,.action-followup,.action-proof,.action-approval,.action-ai,.action-result { margin: 0; border-radius: 18px; box-shadow: 0 15px 34px rgba(13,36,68,.12); }
.action-message { width: 94%; padding: 16px; background: #fff; font-size: .72rem; line-height: 1.5; }
.action-message small,.action-ai small { display: block; margin-bottom: 8px; color: #66809e; font-size: .48rem; font-weight: 850; letter-spacing: .11em; }
.action-ai { display: grid; grid-template-columns: 38px 1fr; gap: 11px; margin-left: 9%; padding: 16px; color: #fff; background: var(--navy-deep); }
.action-ai > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--navy-deep); background: var(--yellow); font-size: .58rem; font-weight: 900; }
.action-ai p { margin: 0; }
.action-ai small { color: var(--yellow); }
.action-ai b,.action-ai em { display: block; }
.action-ai b { font-size: .7rem; line-height: 1.35; }
.action-ai em { margin-top: 7px; color: rgba(255,255,255,.58); font-size: .53rem; font-style: normal; line-height: 1.45; }
.action-proof,.action-approval,.action-followup { width: 86%; padding: 14px 15px; background: #fff; }
.action-proof { display: grid; grid-template-columns: 30px 1fr; margin-left: -10px; border: 2px solid #22b5ff; transform: rotate(-2deg); }
.action-proof > span { grid-row: 1 / 3; }
.action-proof b,.action-proof small,.action-approval b,.action-approval span { display: block; }
.action-proof b,.action-approval b { font-size: .65rem; }
.action-proof small,.action-approval span { color: var(--muted); font-size: .5rem; }
.action-approval { margin-left: auto; border: 2px solid #ffad18; transform: rotate(2deg); }
.action-followup { margin-left: -10px; font-size: .68rem; line-height: 1.45; transform: rotate(-2deg); }
.action-result { margin-top: 4px; padding: 16px; border: 2px solid #ffad18; background: #fff6d8; }
.action-result b,.action-result span { display: block; }
.action-result b { color: var(--navy); font-size: .72rem; }
.action-result span { margin-top: 5px; color: #68717b; font-size: .54rem; line-height: 1.4; }
.action-story--quote .action-story__head { color: #fff; border-color: rgba(255,255,255,.22); }
.tool-strip { margin-top: 20px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); }

@media (max-width: 960px) {
  .nav { width: min(680px, calc(100% - 44px)); }
  .nav-toggle { width: 40px; height: 40px; }
  .nav-menu { top: 68px; }
  .hero-recognition { top: calc(100svh - 86px); }
  .action-flows { grid-template-columns: 1fr; }
  .action-story { min-height: auto; }
}

@media (max-width: 760px) {
  .hero-shell.page-shell { min-height: 1194px; }
  .features { --feature-card-width: min(390px, calc(100vw - 48px)); }
  .feature-rail { gap: 70px; padding-inline: calc((100vw - var(--feature-card-width)) / 2); }
  .feature-card { min-height: 650px; }
  .feature-graphic { height: 430px; min-height: 430px; }
  .hero-recognition { top: calc(100svh - 151px); right: 12px; left: 20px; width: auto; max-width: none; }
  .hero-recognition__emoji { margin-right: -10px; font-size: 2.6rem; transform: translate(-3px,-5px) rotate(-14deg); }
  .hero-recognition__pill { width: 100%; min-height: 78px; gap: 10px; padding: 9px 13px 9px 20px; border-radius: 24px; }
  .hero-recognition__award { flex: 1 1 0; min-width: 0; gap: 7px; }
  .hero-recognition__award img { flex: 0 0 auto; width: 36px; height: 36px; }
  .hero-recognition__award:first-child img { width: 40px; }
  .hero-recognition b { max-width: 92px; font-size: .44rem; line-height: 1.35; letter-spacing: .055em; }
  .hero-recognition__pill > i { height: 36px; }
  .consolidation-graphic { grid-template-columns: .85fr 1.15fr .85fr; padding:17px; }
  .source-stack span,.action-stack span { padding-inline:5px; font-size:.48rem; }
  .consolidation-core { min-height:135px; padding:10px; }
  .investor-strip { grid-template-columns: repeat(2,1fr); gap: 20px; padding: 28px 22px; }
  .investor-strip span { grid-column: 1 / -1; text-align: center; }
  .investor-strip b { font-size: .7rem; }
  .external-copy h2 { font-size: clamp(2.8rem,12vw,4.1rem); }
  .action-flows { margin-top: 44px; }
  .action-story { padding: 23px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy,.hero-demo,.hero-recognition { transform:none !important; opacity:1 !important; }
  .feature-graphic { transform:none !important; transition:none !important; }
}

/* Calm role-led product story */
.industries { color:var(--text); background:#fff; }
.industry-heading { max-width:800px; margin:0 auto 34px; text-align:center; }
.industry-heading h2 { font-size:clamp(2.5rem,4.4vw,4rem); line-height:1.06; }
.industry-heading > p:last-child { max-width:650px; margin:0 auto; color:#586576; font-size:1rem; }
.industry-tabs { justify-content:center; flex-wrap:wrap; margin:0 0 32px; gap:10px; }
.industry-tabs button { min-height:48px; padding:12px 20px; color:var(--navy); background:#fff; border:1px solid #cbd5e1; font-size:.9rem; }
.industry-tabs button[aria-selected="true"] { color:#fff; background:var(--navy); border-color:var(--navy); }
.industry-stage { grid-template-columns:1fr 1fr; max-width:1120px; min-height:0; margin:auto; background:#f6f8fb; border-color:#dce3eb; border-radius:28px; }
.industry-outcomes { padding:40px; min-width:0; }
.industry-outcomes h3 { font-size:clamp(1.7rem,2.7vw,2.5rem); margin:0 0 20px; }
.industry-outcomes > p { color:#586576; font-size:1rem; }
.industry-outcomes li { padding:15px 0; color:var(--navy); border-color:#d3deeb; font-size:.95rem; }
.industry-outcomes .text-link { color:var(--navy); font-size:.95rem; }
.role-example { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:40px; background:#edf3fa; }
.role-chat,.role-result { padding:24px; border-radius:20px; background:#fff; border:1px solid #cfdaea; }
.role-chat > span,.role-result > span { color:#5c6d81; font-size:.8rem; }
.role-chat p { margin:12px 0 0; font-size:1.05rem; font-weight:650; }
.role-arrow { padding:14px; text-align:center; color:var(--navy); font-size:1.4rem; }
.role-result { background:var(--navy); color:#fff; }
.role-result > span { color:#ffc857; }
.role-result h4 { margin:12px 0; font-size:1.15rem; }
.role-result p { margin:0; font-size:.95rem; color:#e1eafa; }
.role-source { margin:20px 0 0; color:#5c6d81; font-size:.8rem; text-align:center; }
.feature-graphic,.feature-card:hover .feature-graphic { filter:none; transform:none; transition:none; box-shadow:0 16px 38px rgba(7,22,45,.12); }
.feature-card:hover { --card-lift:0px; }
.feature-graphic > * { transform:none !important; }
.task-graphic .mini-message { left:24px; width:calc(100% - 48px); }
.task-graphic .mini-task { right:24px; width:calc(100% - 48px); }
.consolidation-graphic .source-stack,.consolidation-graphic .action-stack { margin:0; }
.search-graphic > .search-prompt,.search-graphic > .search-answer { width:100%; margin-left:0; }
.search-graphic > .search-sources { right:24px; }
.record-graphic ul { width:100%; margin-left:0; }
.record-graphic .record-foot { right:24px; width:calc(100% - 48px); }
.plan-graphic > .plan-location { right:20px; }
.plan-photo { left:20px; bottom:-12px; }
.feature-card > p:last-child { font-size:1rem; }
.feature-graphic .mini-message p,.feature-graphic .mini-task b,.search-graphic b { font-size:.9rem; }
.voice-wave { display:flex; align-items:center; gap:3px; min-height:40px; margin:6px 0 12px; color:var(--blue); }
.voice-wave > span { margin-right:7px; }
.voice-wave i { display:block; width:3px; height:var(--wave); background:currentColor; border-radius:3px; }
.voice-wave time { margin-left:auto; font-size:.75rem; color:var(--navy); }
.action-story__head > span { background:transparent; font-size:1.8rem; width:44px; height:44px; }
.team-love-heading { display:block; }
.team-love-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.team-love-grid article,.team-love-grid article:nth-child(4),.team-love-grid article:last-child { grid-column:auto; background:var(--navy); color:#fff; }
.team-love-grid article:nth-child(2) { background:#19a9f2; color:#07162d; }
.team-love-grid article:nth-child(3) { background:#ffc857; color:#07162d; }
.team-love-grid article:nth-child(4) { background:#1b3e72; }
.team-love-grid h3 { color:inherit; }
.team-love-grid p { color:inherit; opacity:1; font-size:1rem; }
.team-love-grid article > span { background:#fff; color:var(--navy); }
.journal-heading { grid-template-columns:1fr auto; align-items:end; }
.journal-heading h2 { grid-column:1; }
.journal-heading > a { grid-column:2; }
.statement { min-height:65svh; }
.feature-swipe-hint { display:none; }
@media(max-width:900px) {
 .industry-stage { grid-template-columns:1fr; }
 .industry-outcomes,.role-example { padding:28px; }
}
@media(max-width:760px) {
 .industry-tabs { flex-wrap:nowrap; justify-content:flex-start; }
 .industry-tabs button { white-space:nowrap; }
 .team-love-grid { grid-template-columns:1fr; }
 .journal-heading { display:block; }
 .feature-swipe-hint { display:block; margin:24px; text-align:center; color:var(--navy); font-size:.9rem; }
 .feature-graphic { min-height:430px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .feature-graphic * { transform:none !important; transition:none !important; }
}

/* Static product illustration around the OnSite phone. */
.hero-demo {
  min-height: 790px;
  overflow: visible;
}
.hero-ambient { opacity: .34; }
.hero-flow-lines { display: none; }
.phone-view {
  z-index: 6;
  bottom: 28px;
  width: 350px;
}
.hero-stream {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}
.hero-stream > * {
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  opacity: 0;
  margin: 0;
  will-change: auto;
}
.hero-stream--in > img {
  width: auto;
  height: auto;
  animation: none;
}
.hero-stream--in > img:nth-child(1) { width: 260px; }
.hero-stream--in > img:nth-child(2) { width: 292px; }
.hero-stream--in > img:nth-child(3) { width: 170px; }
.hero-stream--in > img:nth-child(4) { width: 292px; }
.hero-stream--in > img:nth-child(5) { width: 188px; }

.hero-output-card,
.hero-output-plan {
  animation: none;
}
.hero-output-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  width: 285px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 21px;
  color: var(--text);
  background: #fff;
  box-shadow: 0 22px 50px rgba(2,15,33,.25);
}
.hero-output-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: var(--navy-deep);
  background: var(--yellow);
  font-size: .82rem;
  font-weight: 900;
}
.hero-output-card p { margin: 0 0 4px; color: #66809e; font-size: .48rem; font-weight: 850; letter-spacing: .1em; }
.hero-output-card b { display: block; font-size: .76rem; }
.hero-output-card small { display: block; margin-top: 3px; color: #75808d; font-size: .52rem; }
.hero-output-card--automation > span { color: #fff; background: #169fe7; }
.hero-output-card--report > span { background: #ffc857; }
.hero-output-plan {
  width: 190px;
  padding: 0;
}
.hero-output-plan img { display: block; width: 100%; height: auto; }
.hero-output-plan figcaption {
  position: absolute;
  right: 5px;
  bottom: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 8px 18px rgba(2,15,33,.22);
  font-size: .5rem;
  font-weight: 800;
}

/* Strong product colors and connected tools */
.team-love-grid article,
.team-love-grid article:nth-child(4),
.team-love-grid article:last-child {
  border-color: transparent;
  color: #fff;
  background: #123a67;
}
.team-love-grid article:nth-child(2) { color: #fff; background: #087cc7; }
.team-love-grid article:nth-child(3) { color: var(--navy-deep); background: #ffb31a; }
.team-love-grid article:nth-child(4) { color: #fff; background: #071f3e; }
.team-love-grid article > span {
  color: inherit;
  background: rgba(255,255,255,.16);
  font-size: 1.35rem;
}
.team-love .tool-strip { margin-top: 18px; background: var(--navy-deep); }

@media (max-width: 1100px) {
  .hero-demo { min-height: 730px; }
  .phone-view { width: 320px; }
}

@media (max-width: 760px) {
  .hero-demo { min-height: 620px; }
  .phone-view { bottom: 64px; width: 220px; }
  .hero-stream--in > img:nth-child(1),
  .hero-stream--in > img:nth-child(2),
  .hero-stream--in > img:nth-child(4) { width: 168px; }
  .hero-stream--in > img:nth-child(3),
  .hero-stream--in > img:nth-child(5),
  .hero-output-plan { width: 118px; }
  .hero-output-card { grid-template-columns: 30px minmax(0,1fr); width: 175px; min-height: 68px; padding: 10px; gap: 8px; border-radius: 15px; }
  .hero-output-card > span { width: 30px; height: 30px; font-size: .55rem; }
  .hero-output-card p { font-size: .38rem; }
  .hero-output-card b { font-size: .55rem; }
  .hero-output-card small { display: none; }
}

/* Browser review refinements: consistent framing, compact glass cards, and connected network */
.hero-card {
  border-radius: 48px;
}

.feature-card {
  min-height: min(575px, calc(100svh - 120px));
}
.feature-graphic,
.feature-card:hover .feature-graphic {
  height: 365px;
  min-height: 365px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .56);
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(128, 157, 199, .16),
    0 18px 44px rgba(7, 22, 45, .14);
}
.task-graphic .mini-message { top: 54px; }
.task-graphic .mini-task { top: 160px; }
.task-graphic .mini-status { bottom: 30px; }

.brain-network svg {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .82;
}
.brain-network svg { display: none; }
.brain-network .brain-links path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: none;
}
.brain-network .brain-links--primary path {
  stroke: url(#brain-link-gradient);
  stroke-width: 1.8;
  opacity: .58;
}
.brain-network .brain-links--secondary path {
  stroke: rgba(128, 157, 199, .38);
  stroke-width: 1.15;
  opacity: .72;
}
.brain-node {
  border-color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 16px 42px rgba(18, 50, 88, .13);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  animation: brain-node-float 5.4s ease-in-out infinite;
}
.brain-node i {
  color: inherit;
  background: rgba(27, 62, 114, .09);
  font-size: .92rem;
}
.brain-node:nth-of-type(2n) { animation-delay: -1.7s; }
.brain-node:nth-of-type(3n) { animation-delay: -3.4s; }
@keyframes brain-node-float {
  0%, 100% { translate: 0 -4px; }
  50% { translate: 0 6px; }
}
.brain-core {
  border: 0;
  background: var(--navy-deep);
  box-shadow: 0 20px 52px rgba(7, 22, 45, .22);
}
.brain-core img {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(2, 15, 33, .28));
}

.team-love-grid article,
.team-love-grid article:nth-child(2),
.team-love-grid article:nth-child(3),
.team-love-grid article:nth-child(4),
.team-love-grid article:last-child,
.love-storage,
.love-language,
.love-files,
.love-mobile,
.love-anywhere {
  position: relative;
  overflow: visible;
  min-height: 290px;
  padding: 110px 32px 32px;
  border-color: rgba(255, 255, 255, .56);
  color: #fff;
  background: var(--card-navy);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 18px 45px rgba(7, 22, 45, .1);
}
.team-love-grid article:nth-child(2) {
  background: var(--card-blue);
  color: #030e1d;
}
.team-love-grid article:nth-child(3) {
  background: var(--card-royal);
  color: #fff;
}
.team-love-grid article:nth-child(4) {
  background: #285fbc;
}
.team-love-grid article > span {
  position: absolute;
  top: -24px;
  left: 24px;
  width: 116px;
  height: 116px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 5.4rem;
  line-height: 1;
  filter: drop-shadow(0 12px 9px rgba(7, 22, 45, .24));
  transform: rotate(-12deg);
}
.team-love-grid { gap: 44px 24px; padding-top: 20px; }
.team-love-grid article:nth-child(2) > span { transform: rotate(12deg); }
.team-love-grid article:nth-child(3) > span { transform: rotate(-9deg); }
.team-love-grid article:nth-child(4) > span { transform: rotate(14deg); }
.team-love-grid h3 { margin-top: 16px; }

.team-love .tool-strip {
  border-color: rgba(255, 255, 255, .17);
  background: linear-gradient(145deg, #102b50, #071a33);
}
.tool-strip > div {
  align-items: center;
}
.tool-strip .tool-logo {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, .17);
  color: #fff;
  background: rgba(255, 255, 255, .065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.tool-strip .tool-logo img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.tool-strip .tool-logo b {
  font-size: .68rem;
  font-weight: 750;
  white-space: nowrap;
}
.tool-strip .tool-logo--procore img {
  width: 112px;
  height: 22px;
}
.tool-strip .tool-logo--more {
  border-color: var(--yellow);
  color: var(--navy-deep);
  background: var(--yellow);
  font-size: .68rem;
  font-weight: 800;
}

.whatsapp-fab__prompt {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  width: max-content;
  max-width: min(280px, calc(100vw - 100px));
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  color: var(--navy-deep);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 30px rgba(7, 22, 45, .18);
  font-size: .72rem;
  font-weight: 750;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  translate: 8px -50%;
  transition: opacity 180ms ease, translate 220ms ease;
}
.whatsapp-fab:hover .whatsapp-fab__prompt,
.whatsapp-fab:focus-visible .whatsapp-fab__prompt {
  opacity: 1;
  translate: 0 -50%;
}

@media (max-width: 760px) {
  .hero-card { border-radius: 32px; }
  .feature-card { min-height: 525px; }
  .feature-graphic,
  .feature-card:hover .feature-graphic {
    height: 330px;
    min-height: 330px;
  }
  .task-graphic .mini-message { top: 42px; }
  .task-graphic .mini-task { top: 140px; }
  .task-graphic .mini-status { bottom: 24px; }
  .brain-network svg {
    inset: 24% -4% 0;
    width: 108%;
    height: 75%;
  }
  .brain-node--files { top: 39%; }
  .brain-core img { width: 72px; }
  .tool-strip .tool-logo { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card { border-radius: 48px !important; }
  .brain-node { animation: none; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hero-card { border-radius: 32px !important; }
}

/* A sentence to choose, with the people behind each situation. */
.situation-section { padding-block: 112px 96px; }
[data-situation-section] {
  --situation-panel-copy: var(--paper);
  --situation-panel-line: var(--line);
}
.situation-heading { position: relative; z-index: 3; max-width: 1120px; margin: 0 auto 32px; text-align: center; }
.situation-sentence { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.situation-heading h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.2; }
.situation-picker { position: relative; display: inline-block; max-width: 100%; }
.situation-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; min-height: 48px; padding: 9px 16px 10px 20px; border: 1px solid #b9cee7; border-radius: 999px; color: var(--navy); background: #eaf2fc; font-family: "Onest", "Manrope", sans-serif; font-size: clamp(1.3rem, 2.5vw, 2.2rem); font-weight: 650; line-height: 1.2; letter-spacing: -.045em; cursor: pointer; transition: background 180ms, border-color 180ms, box-shadow 180ms; }
.situation-phrase-window { position: relative; display: grid; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.situation-phrase-window::after { content: none; }
.situation-phrase-window > span { grid-area: 1 / 1; }
[data-situation-previous] { position: absolute; top: 0; left: 0; opacity: 0; }
.situation-trigger:hover, .situation-trigger[aria-expanded="true"] { background: #dfeafa; border-color: var(--navy); box-shadow: 0 5px 20px #1b3e7210; }
.situation-trigger svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms; }
.situation-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.situation-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 5; width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid #d6e0ed; border-radius: 22px; background: #fff; box-shadow: 0 20px 60px #0d244426; text-align: left; }
.situation-menu[hidden] { display: none; }
.situation-emoji { flex: 0 0 auto; font-size: 1.1em; line-height: 1.2; letter-spacing: 0; filter: drop-shadow(0 3px 3px #0d244424); }
.situation-menu button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 11px 14px; border: 0; border-radius: 14px; text-align: left; background: #fff; color: var(--text); cursor: pointer; }
.situation-menu button:hover, .situation-menu button:focus-visible { background: #f0f5fb; }
.situation-menu button:focus-visible { outline-offset: -3px; }
.situation-menu button[aria-selected="true"] { background: #eaf2fc; color: var(--navy); }
.situation-menu b, .situation-menu small { display: block; }
.situation-menu b { font-size: 1rem; font-weight: 750; }
.situation-menu small { margin-top: 3px; color: #586576; font-size: .875rem; line-height: 1.35; }
.situation-check { opacity: 0; font-size: 1.2rem; }
.situation-menu [aria-selected="true"] .situation-check { opacity: 1; }
.situation-panel { display: grid; grid-template-columns: 1.08fr 1fr; max-width: 1120px; min-height: 700px; margin: auto; overflow: hidden; border: 1px solid #d6e0ed; border-radius: 28px; background: #fff; }
.situation-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 42px; }
.situation-copy h3 { max-width: 490px; margin: 0 0 18px; font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.13; letter-spacing: -.045em; }
.situation-copy > p { margin: 0 0 26px; color: #586576; font-size: 1rem; }
.situation-example { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: 42px; border-left: 1px solid #d6e0ed; background: #f0f5fb; }
.situation-label { display: block; margin: 0 0 14px; color: #53677f; font-size: .875rem; font-weight: 650; }
.situation-example blockquote { margin: 10px 0 26px; font-family: "Onest", "Manrope", sans-serif; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 650; line-height: 1.4; letter-spacing: -.03em; }
.situation-example > p { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--navy); font-size: 1rem; }
.situation-ai-response { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.situation-ai-response .mock-ai-label { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: .8rem; }
.situation-ai-response .ai-icon { width: 22px; height: 22px; }
.situation-ai-response > p { margin: 15px 0; color: #253b56; font-size: .95rem; line-height: 1.6; }
.situation-evidence { display: flex; flex-wrap: wrap; gap: 7px; }
.situation-evidence span { padding: 5px 9px; border-radius: 999px; color: #245d8c; background: #e6f3ff; font-size: .73rem; font-weight: 650; }
.situation-example > .situation-action { width: 100%; margin-top: 18px; padding: 16px 0 0; border-top: 1px solid #d6e0ed; border-radius: 0; color: var(--navy); background: transparent; font-size: .88rem; line-height: 1.45; }
.situation-example .text-link { margin-top: 38px; font-size: .9375rem; }
.situation-answer-mark { font-size: 1.3rem; }
.situation-copy .text-link { font-size: .9375rem; }
.situation-people { width: 100%; min-width: 0; padding-top: 22px; border-top: 1px solid #d6e0ed; }
.situation-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.persona-choice { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 6px 12px 6px 6px; border: 1px solid #cedaea; border-radius: 999px; background: #fff; text-align: left; font-size: .875rem; font-weight: 650; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; }
.persona-choice:hover { border-color: #7799c3; }
.persona-choice[aria-pressed="true"] { color: #fff; border-color: var(--navy); background: var(--navy); }
.persona-emoji { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 50%; background: #eef3fa; font-size: 1.15rem; }
.persona-choice[aria-pressed="true"] .persona-emoji { background: #fff; }
.persona-arrow { display: none; }
.persona-choice[aria-pressed="true"] .persona-arrow { color: var(--yellow); }
.persona-detail { min-height: 150px; padding: 20px 2px 0; }
.persona-detail h4 { margin: 0 0 7px; color: var(--navy); font-size: .9375rem; font-weight: 750; }
.persona-detail ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: #4c6079; font-size: .92rem; line-height: 1.45; }
.persona-detail li { position: relative; padding-left: 20px; }
.persona-detail li::before { position: absolute; left: 0; color: #1f9ee5; font-weight: 800; content: "✓"; }
@media (max-width: 960px) {
  .situation-copy, .situation-example { padding: 30px; }
  .situation-panel { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 760px) {
  .situation-section { padding-block: 72px 60px; }
  .situation-heading { margin-bottom: 28px; }
  .situation-heading h2 { font-size: 1.5rem; }
  .situation-trigger { min-height: 46px; gap: 10px; padding: 9px 14px 10px 16px; font-size: 1.25rem; }
  .situation-trigger svg { flex-basis: 20px; width: 20px; height: 20px; }
  .situation-menu { right: 50%; width: calc(100vw - 32px); transform: translateX(50%); }
  .situation-panel { grid-template-columns: 1fr; border-radius: 22px; }
  .situation-copy, .situation-example { padding: 26px; }
  .situation-copy { min-height: 570px; }
  .situation-example { min-height: 340px; border-left: 0; border-top: 1px solid #d6e0ed; }
  .persona-detail { min-height: 118px; }
  .situation-copy h3 { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .situation-trigger, .situation-trigger svg, .persona-choice { transition: none; }
}

/* Final browser-review adjustments */
.hero-card { border-radius: 0 0 48px 48px !important; }
.feature-progress i { background: #b8bec6; }

/* Keep the recognition badge tucked against the left edge; its trophy aligns with the floating chat control. */
.hero-recognition { left: 28px; }
.hero-recognition__emoji { margin-right: -12px; transform: translate(-5px, -2px) rotate(-13deg); }

.situation-trigger { gap: 7px; }
.situation-copy { background: transparent; }
.situation-panel { transition: transform 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease; }
@media (hover: hover) {
  .situation-panel:hover { transform: scale(1.008); box-shadow: 0 20px 48px rgba(13, 36, 68, .1); }
}
.situation-panel.is-swapping { overflow: clip; }

.team-love-grid article:nth-child(2), .team-love-grid article:nth-child(2) h3, .team-love-grid article:nth-child(2) p { color: #fff; }
.team-love .tool-strip { margin-top: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.team-love .tool-strip > p { color: #53677f; }
.team-love .tool-logo { border-color: rgba(27, 62, 114, .2); color: var(--navy); background: #fff; box-shadow: none; }
.team-love .tool-logo--autodesk,
.team-love .tool-logo--procore { border-color: var(--navy-deep); color: #fff; background: var(--navy-deep); }
.team-love .tool-logo--autodesk img { width: 25px; height: 25px; }
.team-love .tool-logo--more { border-color: var(--yellow); color: var(--navy-deep); background: var(--yellow); }

.team-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 72px; }
.team-quotes article { display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; padding: 28px; border: 1px solid #d6e0ed; border-radius: 22px; color: var(--navy-deep); background: #f0f5fb; }
.team-quotes blockquote { margin: 0; font: 650 clamp(1.15rem, 1.65vw, 1.5rem)/1.22 "Onest", sans-serif; letter-spacing: -.035em; }
.team-quotes cite { margin-top: 26px; color: var(--navy); font-size: .75rem; font-style: normal; font-weight: 800; }
.team-quotes cite span { color: #586576; font-weight: 600; }

/* The labels form an irregular 2D ring; site.js keeps nodes and links synchronized. */
.brain-core { top: 62%; }
.brain-node {
  animation: none;
  width: 148px;
  min-width: 148px;
  height: 52px;
  justify-content: flex-start;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  will-change: auto;
  transition: box-shadow 240ms ease, filter 240ms ease;
}
.brain-network.is-attracting .brain-node { filter: saturate(1.025) brightness(1.008); }
.brain-node--location { top: 35%; left: 18%; }

@media (max-width: 760px) {
  .hero-card { border-radius: 0 0 32px 32px !important; }
  .hero-recognition { left: 20px; }
  .brain-core { top: 66%; }
  .brain-node { width: 122px; min-width: 122px; height: 44px; }
  .team-quotes { grid-template-columns: 1fr; margin-top: 54px; }
  .team-quotes article { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .situation-panel, .brain-network svg, .brain-node { transition: none; }
  .brain-network svg { display: block; }
  .brain-canvas { display: none; }
}

/* Browser-review pass: lighter social surfaces and source-aligned editorial cards. */
main { border-radius: 0 0 68px 68px; }
.brain { height: auto; }
.brain-intro {
  position: relative;
  top: auto;
  left: auto;
  padding-top: clamp(96px, 12svh, 150px);
  padding-bottom: clamp(70px, 10svh, 120px);
  opacity: 1 !important;
  transform: none !important;
}
.brain-stage { position: relative; height: 190svh; }
.brain-stage .brain-sticky { position: sticky; top: 0; height: 100svh; }
.nav { transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }
.nav.nav--on-dark {
  border-color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 13px 38px rgba(7, 22, 45, .17);
}
.nav .brand-logo--light { display: none; }
.nav.nav--hero {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav--hero .brand-logo--default { display: none; }
.nav--hero .brand-logo--light { display: block; }
.nav--hero .nav-toggle i { background: #f3f6fb; }
@media (min-width: 1101px) {
  .nav--hero .nav-links a, .nav--hero .login-link { color: #e4ebf5; }
  .nav--hero .nav-links a:hover, .nav--hero .login-link:hover { color: #fff; }
  .nav--hero .button--nav { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

.situation-trigger {
  --situation-pill: #f0eade;
  --situation-pill-hover: #e6e0d1;
  --situation-pill-text: var(--text);
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  gap: 8px;
  padding: 4px 12px 6px 10px;
  border: 0;
  color: var(--situation-pill-text);
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.06em;
  box-shadow: none;
  background: var(--situation-pill);
}
.situation-trigger:hover,
.situation-trigger[aria-expanded="true"] { border: 0; background: var(--situation-pill-hover); box-shadow: none; }
.situation-trigger svg { flex-basis: .75em; width: .75em; height: .75em; }
.situation-emoji { font-size: 1.08em; }
.situation-panel { border: 1px solid var(--situation-panel-line); background: var(--situation-panel-copy); box-shadow: none; transition: background-color 420ms ease, border-color 420ms ease; }
.situation-example { border: 0; border-left: 1px solid var(--situation-panel-line); background: transparent; transition: border-color 420ms ease; }
@media (hover: hover) {
  .situation-panel:hover { transform: none; box-shadow: none; }
}

@media (max-width: 760px) {
  .situation-example { border-top: 1px solid var(--situation-panel-line); border-left: 0; }
}

.team-love .tool-strip > p { text-align: center; }
.team-love .tool-strip > div { justify-content: center; }
.team-love .tool-logo--autodesk,
.team-love .tool-logo--procore {
  border-color: rgba(27, 62, 114, .2);
  color: var(--navy);
  background: #fff;
}
.team-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote-person { display: flex; align-items: center; gap: 13px; margin-top: 30px; }
.quote-avatar {
  display: grid;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  color: rgba(13, 36, 68, .48);
  background: linear-gradient(145deg, #d8e2ef, #aebfd4);
  box-shadow: 0 6px 18px rgba(13, 36, 68, .14);
  font-size: .67rem;
  font-weight: 850;
}
.team-quotes .quote-person cite { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.team-quotes .quote-person cite span { display: block; }

.journal { padding-bottom: 180px; background: #fff; }
.journal-heading { align-items: end; margin-bottom: 46px; }
.journal-heading .eyebrow { margin: 0 0 12px; }
.journal-heading h2 { max-width: 820px; font-size: clamp(3.2rem, 5.6vw, 5.7rem); }
.journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.journal-grid .journal-card {
  display: flex;
  min-height: 520px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  color: var(--text);
  background: var(--paper);
  transition: transform .25s ease, box-shadow .25s ease;
}
.journal-grid a.journal-card,
.journal-grid a.journal-card:nth-child(2),
.journal-grid a.journal-card:nth-child(3) { color: var(--text); background: var(--paper); }
.journal-grid .journal-card:hover { color: var(--text); background: var(--paper); box-shadow: var(--shadow-small); transform: translateY(-4px); }
.journal-grid .journal-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.12fr .88fr; min-height: 430px; }
.journal-media {
  position: relative;
  display: block;
  flex: 0 0 235px;
  min-height: 235px;
  overflow: hidden;
  background: linear-gradient(145deg, #c9d9ed, #7899c5);
}
.journal-media::after { position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 19px; content: ""; }
.journal-media--two { background: linear-gradient(145deg, #dce7f3, #9eb4cd); }
.journal-media--three { background: linear-gradient(145deg, #d7d5cb, #9fa69e); }
.journal-media--four { background: linear-gradient(145deg, #ffe8a5, #d2a74c); }
.journal-media--five { background: linear-gradient(145deg, #7fa1d4, #1b3e72); }
.journal-media i {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  color: rgba(13,36,68,.66);
  font-size: .64rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.journal-media--five i { color: rgba(255,255,255,.7); }
.journal-grid .journal-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 30px;
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.journal-grid .journal-body small { color: var(--muted); font-size: .67rem; font-weight: 750; }
.journal-grid .journal-body h3 { margin: 28px 0 16px; font-size: clamp(1.8rem, 2.8vw, 3rem); }
.journal-grid .journal-body p { color: var(--muted); font-size: .82rem; line-height: 1.65; }
.journal-grid .journal-body b { margin-top: auto; padding-top: 28px; color: var(--navy); font-size: .72rem; }

@media (max-width: 760px) {
  main { border-radius: 0 0 36px 36px; }
  .brain-intro { padding-top: 90px; padding-bottom: 64px; }
  .brain-stage { height: 170svh; }
  .situation-trigger { min-height: 44px; padding: 4px 10px 5px 8px; font-size: 1.5rem; }
  .team-quotes { grid-template-columns: 1fr; }
  .journal { padding-bottom: 120px; }
  .journal-heading { display: grid; grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .journal-grid .journal-card--feature { grid-column: auto; display: flex; }
  .journal-grid .journal-card { min-height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  .situation-panel, .situation-example { transition: none; }
  .brain-stage { height: auto; }
  .brain-stage .brain-sticky { position: relative; height: 850px; }
}

/* About us */
.about-page { background: var(--navy-ink); }
.about-main { margin-bottom: 0; background: var(--paper); }
.about-page .nav-links a[aria-current="page"] { color: var(--navy); }
.about-page .nav-links a[aria-current="page"]::after { display: block; width: 100%; height: 2px; margin-top: 4px; border-radius: 99px; background: var(--yellow); content: ""; }
.about-team { padding-top: 190px; background: var(--paper); }
.about-team__heading { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(48px, 8vw, 110px); margin-bottom: 78px; }
.about-team__heading .eyebrow { margin-bottom: 22px; }
.about-team__heading h1 { max-width: 800px; margin: 0; font-family: "Archivo Black", "Onest", sans-serif; font-size: clamp(4rem, 7.7vw, 7.8rem); font-weight: 400; line-height: .9; letter-spacing: -.068em; }
.about-team__heading h1 em { display: block; color: var(--navy); font-style: normal; }
.about-team__heading > p { max-width: 560px; margin: 0 0 5px; color: #626b78; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.75; }
.about-team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.team-card { display: grid; grid-template-columns: minmax(190px, .78fr) 1.22fr; min-height: 410px; overflow: hidden; border: 1px solid rgba(27, 62, 114, .13); border-radius: 30px; background: #fff; box-shadow: 0 20px 55px rgba(7, 22, 45, .07); }
.team-card__portrait { position: relative; min-height: 100%; overflow: hidden; background: var(--navy); }
.team-card__portrait img { width: 100%; height: 100%; min-height: 410px; object-fit: cover; filter: saturate(.92) contrast(1.02); transition: transform 600ms cubic-bezier(.22, 1, .36, 1), filter 400ms ease; }
.team-card:hover .team-card__portrait img { filter: saturate(1.04) contrast(1.02); transform: scale(1.035); }
.team-card__body { display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; }
.team-card__body h3 { margin: 0; color: var(--navy-deep); font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.05; letter-spacing: -.045em; }
.team-card__role { margin: 10px 0 26px; color: var(--navy); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.team-card__body > p:last-child { margin: 0; color: #626b78; font-size: .86rem; line-height: 1.7; }
.team-card--yellow .team-card__portrait { background: var(--yellow); }
.team-card--blue .team-card__portrait { background: var(--blue); }
.team-card--royal .team-card__portrait { background: #4a8de7; }
.team-card--navy .team-card__portrait { background: var(--navy-deep); }
.about-cta { padding-top: 0; background: var(--paper); }
.about-cta__panel { padding: clamp(52px, 8vw, 92px); overflow: hidden; border-radius: 34px; color: #fff; background: linear-gradient(140deg, #214f89, #0d2444 68%); }
.about-cta h2 { max-width: 850px; margin-bottom: 38px; }
.about-cta .button { min-width: 170px; }
.about-footer { position: static; min-height: var(--footer-height); }

@media (max-width: 1080px) {
  .team-card { grid-template-columns: 1fr; }
  .team-card__portrait, .team-card__portrait img { min-height: 360px; }
  .team-card__body { min-height: 310px; }
}

@media (max-width: 760px) {
  .about-team { padding-top: 150px; }
  .about-team__heading { grid-template-columns: 1fr; gap: 28px; margin-bottom: 52px; }
  .about-team__heading h1 { font-size: clamp(3.35rem, 16vw, 5rem); }
  .about-team__heading > p { font-size: 1rem; }
  .about-team__grid { grid-template-columns: 1fr; gap: 20px; }
  .team-card { border-radius: 24px; }
  .team-card__portrait, .team-card__portrait img { min-height: 360px; }
  .team-card__body { min-height: auto; padding: 28px; }
  .team-card__body > p:last-child { font-size: .95rem; }
  .about-cta__panel { border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-card__portrait img { transition: none; }
  .team-card:hover .team-card__portrait img { transform: none; }
}

/* Keep the opening illustration inexpensive at fullscreen sizes. */
.hero-demo { --hero-device-width: 350px; }
.hero-stream {
  inset: 155px auto auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: min(23vw, 292px);
}
.hero-stream--in { right: calc(50% + var(--hero-device-width) / 2 + 20px); }
.hero-stream--out { left: calc(50% + var(--hero-device-width) / 2 + 20px); }
.hero-stream > * {
  position: relative;
  inset: auto;
  max-width: 100%;
  opacity: 1;
  transform: none;
  will-change: auto;
}
.hero-stream > :nth-child(n + 3) { display: none; }
/* These surfaces no longer need to sample and blur the scene behind them. */
.hero-demo .hero-output-card {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(2, 15, 33, .14);
}
@media (max-width: 1100px) {
  .hero-demo { --hero-device-width: 320px; }
  .hero-stream { top: 145px; width: calc((100% - var(--hero-device-width)) / 2 - 24px); }
  .hero-stream--in { right: calc(50% + var(--hero-device-width) / 2 + 8px); }
  .hero-stream--out { left: calc(50% + var(--hero-device-width) / 2 + 8px); }
  .hero-demo .hero-output-card { grid-template-columns: minmax(0, 1fr); padding: 12px; }
}
@media (max-width: 760px) {
  .hero-stream { display: none; }
}

/* September browser review: stronger positioning, security proof, and live backer marks. */
.hero { position: relative; }
.hero-recognition { gap: 12px; }
.hero-recognition__emoji {
  margin-right: 0;
  transform: translate(0, -2px) rotate(-13deg);
}

@media (min-width: 761px) {
  .feature-sticky {
    align-items: center;
    padding-block: 72px 32px;
  }
  .feature-card { min-height: 0; }
  .feature-graphic,
  .feature-card:hover .feature-graphic {
    height: min(465px, calc(100svh - 330px));
    min-height: 400px;
  }
  .feature-progress { margin-top: 20px; }
}

.external-copy .channel-note {
  display: block;
  max-width: 620px;
  margin: 4px 0 0;
  padding: 15px 17px;
  border-radius: 16px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.55;
}
.external-copy .channel-note strong { color: var(--navy-deep); }
.external-cta { margin-top: 20px; }

.security-card {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: auto;
  padding: 96px 72px 64px;
  isolation: isolate;
  text-align: center;
}
.security-card::before,
.security-card::after { display: none !important; }
.security-lock-art {
  position: absolute;
  z-index: -1;
  top: 43%;
  left: 50%;
  width: min(42%, 430px);
  max-height: 66%;
  opacity: .055;
  filter: invert(1);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.security-copy {
  width: min(100%, 980px);
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.security-copy > p:not(.eyebrow) { max-width: 710px; }
.security-flows {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 9px;
  margin-top: 42px;
  text-align: left;
}
.security-flows article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 96px;
  align-content: center;
  column-gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 22px;
  background: rgba(255, 255, 255, .075);
  backdrop-filter: blur(3px);
}
.security-flows article > span {
  display: block;
  grid-row: 1 / 3;
  align-self: center;
  color: inherit;
  font-size: .92rem;
  line-height: 1;
  text-align: center;
}
.security-flows h3 {
  margin: 0 0 3px;
  font-size: .82rem;
  letter-spacing: -.025em;
}
.security-flows p {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, .66);
  font-size: .6rem;
  line-height: 1.4;
}

.investors { background: #fff; }
.investor-strip {
  min-height: 126px;
  border-color: rgba(181, 201, 232, .18);
  color: #b5c9e8;
  background: #00234b;
  box-shadow: 0 24px 55px rgba(7, 22, 45, .13);
}
.investor-strip > span { font-family: "Manrope", Arial, sans-serif; }
.investor-strip > a {
  display: grid;
  min-height: 58px;
  place-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background-color 180ms ease, transform 180ms ease;
}
.investor-strip > a:hover {
  background: rgba(181, 201, 232, .08);
  transform: translateY(-2px);
}
.investor-strip img {
  width: auto;
  max-width: min(100%, 170px);
  height: auto;
  max-height: 38px;
}

@media (max-width: 960px) {
  .security-card { padding-inline: 42px; }
  .security-flows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero-shell.page-shell { min-height: 1250px; }
  .hero-recognition {
    position: absolute;
    top: 370px;
    right: 18px;
    left: 18px;
    width: auto;
    max-width: none;
    gap: 9px;
  }
  .hero-recognition__emoji {
    flex: 0 0 auto;
    margin-right: 0;
    font-size: 2.4rem;
    transform: rotate(-13deg);
  }
  .hero-recognition__pill {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    gap: 7px;
    padding-right: 10px;
    padding-left: 11px;
  }
  .hero-recognition__award { gap: 5px; }
  .hero-recognition__award img,
  .hero-recognition__award:first-child img { width: 32px; height: 32px; }
  .hero-recognition b,
  .hero-recognition__award:last-child b { width: 72px; font-size: .4rem; }
  .security-card { padding: 70px 24px 34px; }
  .security-lock-art { top: 25%; width: 64%; max-height: 38%; }
  .security-flows { grid-template-columns: 1fr; gap: 8px; margin-top: 36px; }
  .security-flows article { min-height: 88px; }
  .investor-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .investor-strip > span { grid-column: 1 / -1; }
  .investor-strip > a { min-height: 66px; padding: 12px; }
  .investor-strip img { max-width: min(100%, 150px); max-height: 34px; }
}

/* Browser review: readable comparisons and static layouts when cards cannot fit. */
.comparison-wrap th, .comparison-wrap td,
.comparison-wrap tbody th, .comparison-wrap thead th { font-size: .85rem; }
.security-card { background: linear-gradient(180deg, #1b3e72 0%, #173660 42%, #102b50 72%, #0d2444 100%); }
.features.is-static .feature-rail { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 64px; padding: 32px 36px; overflow: visible; transform: none; }
.features.is-static .feature-card { flex: none; width: min(100%, 460px); min-height: 0; }
.features.is-static .feature-progress, .features.is-static .feature-swipe-hint { display: none; }
@media (max-width: 760px), (max-height: 799px) {
  .feature-sticky { position: static; height: auto; padding-block: 32px; }
  .feature-rail { flex-direction: column; align-items: center; width: 100%; gap: 64px; padding: 32px 36px; }
  .feature-card { flex: none; width: min(100%, 460px); min-height: 0; }
}
@media (max-width: 760px) {
  .hero-recognition { top: auto; bottom: 24px; left: 50%; right: auto; width: max-content; max-width: calc(100% - 24px); translate: -50% 0; gap: 9px; }
  .hero-recognition__pill { flex: none; width: auto; min-height: 58px; padding: 7px 11px; border-radius: 999px; }
  .hero-recognition__award { flex: none; }
  .hero-recognition__pill > i { height: 27px; }
}
.team-love-grid .love-anywhere > span { display: flex; align-items: center; width: auto; gap: 10px; white-space: nowrap; font-size: 4.4rem; }
/* Keep all navigation labels on one line; collapse before the links crowd. */
.nav-links a, .nav-actions a { white-space:nowrap; }
@media(min-width:1101px) { .nav { min-width:780px; } }
@media(max-width:1100px) {
 .nav { display:flex; justify-content:space-between; width:min(780px,calc(100% - 44px)); min-width:0; min-height:58px; padding:7px 9px 7px 20px; }
 .nav-toggle { display:grid; width:40px; height:40px; place-items:center; align-content:center; gap:5px; border:0; border-radius:50%; color:#fff; background:var(--navy); cursor:pointer; }
 .nav-toggle i { width:17px; height:1.5px; background:currentColor; }
 .nav-toggle[aria-expanded=true] i:first-of-type { transform:translateY(3.2px) rotate(45deg); }
 .nav-toggle[aria-expanded=true] i:last-of-type { transform:translateY(-3.2px) rotate(-45deg); }
 .nav-menu { position:absolute; top:68px; left:0; right:0; display:none; margin:0; padding:22px; border:1px solid var(--line); border-radius:25px; background:#fff; box-shadow:var(--shadow); }
 .nav-menu.is-open { display:block; }
 .nav-links { align-items:stretch; flex-direction:column; gap:0; }
 .nav-links a { padding:12px 2px; border-bottom:1px solid var(--line); font-size:.85rem; }
 .nav-actions { justify-content:space-between; margin-top:18px; }
}

/* Shared navigation spans the viewport with a small outer gutter. */
.site-header .nav { width: calc(100% - 36px); min-width: 0; }
@media (min-width: 1101px) {
  .site-header .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header .nav-menu { display: contents; }
}

/* Compact navigation, with room for all five links on desktop. */
.site-header .nav { min-height: 63px; padding: 10px 18px; }
.site-header .nav > .brand img { width: 108px; height: 33px; }
.site-header .button--nav { min-height: 38px; padding-inline: 18px; }
.site-header .login-link .ui-icon { width: 16px; height: 16px; vertical-align: middle; }
@media (min-width: 1101px) {
  .site-header .nav { width: calc((100% - 36px) * .85); grid-template-columns: auto 1fr auto; }
  .site-header .nav-links { gap: clamp(14px, 1.7vw, 26px); }
  .site-header .nav-links a, .site-header .login-link, .site-header .button--nav { font-size: .78rem; }
}
.site-header .login-link .ui-icon { fill: none; }