/* site-20260828b.css */
/* LAD 28b — 27b chrome plus night try-it. No leftover /try chat. Do not restyle hero, menu, paste, signin, portal. Geist faces replace Next/Tailwind. */

@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/geist-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/geist-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/geist-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: Geist;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/geist-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-mono-var-latin.woff2") format("woff2");
}


:root {
  --font-geist-sans: "Geist", Arial, Helvetica, sans-serif;
  --font-geist-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ink: #11120f;
  --soft-ink: #666762;
  --paper: #efefed;
  --card: #e2e2df;
  --cream: #f4efe5;
  --amber: #c99154;
  --amber-deep: #8d5b29;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  content: '';
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #07101b;
  pointer-events: none;
  animation: page-fade-from-night .9s cubic-bezier(.22,1,.36,1) both;
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: route-out .28s ease both; }
::view-transition-new(root) { animation: route-in .62s cubic-bezier(.22,1,.36,1) both; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: #8d5b29; }
.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; }
[hidden] { display: none !important; }

.fixa-hero { min-height: 100svh; padding: 12px; background: var(--paper); }
.fixa-hero-photo {
  position: relative;
  min-height: calc(100svh - 24px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  background: url('/lad-hero-desktop-extended-v1.webp') center center / cover no-repeat;
}
.hero-nav {
  position: absolute;
  z-index: 20;
  inset: 24px 24px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.glass-object {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(205,220,232,.08) 55%, rgba(255,255,255,.13));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 12px 36px rgba(0,7,18,.22);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  pointer-events: auto;
}
.glass-object::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 32%, transparent 69%, rgba(255,255,255,.09));
  opacity: .65;
  pointer-events: none;
}
.brand-lockup {
  min-height: 58px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  pointer-events: auto;
}
.brand-lockup img {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.32));
}
.brand-lockup strong { position: relative; z-index: 1; font-size: 14px; letter-spacing: -.02em; }
.menu-cluster { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-top: 6px; }
.menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: visible;
  border-radius: 16px;
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  background: linear-gradient(130deg, rgba(255,255,255,.2), rgba(215,228,239,.075) 52%, rgba(255,255,255,.13)), rgba(7,18,30,.82);
  border-color: rgba(255,255,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(255,255,255,.1), 0 18px 42px rgba(0,4,11,.32);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  transition: transform .24s cubic-bezier(.22,1,.36,1), filter .24s ease, box-shadow .24s ease;
}
.menu-toggle::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -1px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.menu-toggle.open { animation: menu-wobble .62s cubic-bezier(.2,1.35,.35,1); }
.menu-toggle.open::before { animation: bubble-ring .68s ease-out; }
.menu-toggle i {
  position: relative;
  z-index: 1;
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 7px rgba(0,0,0,.45);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.menu-toggle.open i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle.open i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.hero-menu {
  position: absolute;
  top: 54px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.hero-menu a {
  min-height: 43px;
  padding: 0 18px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-18px) scale(.75);
  transform-origin: top right;
  transition-property: opacity, transform, filter, visibility;
  transition-duration: .3s, .52s, .24s, 0s;
  transition-timing-function: ease, cubic-bezier(.2,1.25,.3,1), ease, linear;
  transition-delay: .11s, .11s, 0s, .63s;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  justify-content: center;
  background: linear-gradient(130deg, rgba(255,255,255,.2), rgba(215,228,239,.075) 52%, rgba(255,255,255,.13)), rgba(7,18,30,.88);
  border-color: rgba(255,255,255,.46);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 3px 14px rgba(0,0,0,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(255,255,255,.1), 0 18px 42px rgba(0,4,11,.32);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.hero-menu a:nth-child(1) { min-width: 56px; padding-right: 14px; padding-left: 14px; }
.hero-menu a:nth-child(2) { min-width: 78px; padding-right: 17px; padding-left: 17px; transition-delay: .11s, .11s, 0s, .63s; }
.hero-menu a:nth-child(3) {
  min-width: 124px;
  padding-right: 20px;
  padding-left: 20px;
  transition-delay: .11s, .11s, 0s, .63s;
}
.hero-menu.open { pointer-events: auto; }
.hero-menu:not(.open) a { pointer-events: none; }
.hero-menu.open a { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); transition-delay: 0s, 0s, 0s, 0s; }
.hero-menu.open a:nth-child(2) { transition-delay: .055s, .055s, 0s, 0s; }
.hero-menu.open a:nth-child(3) { transition-delay: .11s, .11s, 0s, 0s; }
@media (hover: hover) {
  .menu-toggle:hover { transform: translateY(-2px); filter: brightness(1.08); }
  .hero-menu.open a:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.08); }
}
.menu-toggle:focus-visible,
.hero-menu.open a:focus-visible {
  outline: 2px solid rgba(255,255,255,.72);
  outline-offset: 3px;
  transform: translateY(-2px);
}
.fixa-hero-copy {
  position: absolute;
  z-index: 2;
  top: clamp(122px, 17vh, 184px);
  left: 0;
  width: 100%;
  padding: 0 clamp(22px, 5vw, 74px);
  text-align: center;
}
.fixa-hero h1 {
  max-width: 1120px;
  margin: 0 auto;
  color: #f7f4eb;
  font-size: clamp(52px, 6.5vw, 104px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.065em;
  text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 7px 28px rgba(0,4,13,.38), 0 25px 60px rgba(0,4,13,.22);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.08));
}
.fixa-hero h1 strong {
  display: inline-block;
  font-weight: 750;
}
.mobile-break { display: none; }
.desktop-space { display: inline; }
.fixa-hero h1 em,
.product-heading h2 em,
.calm-strip h2 em,
.closing-copy h2 em {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.06em;
}
.fixa-try-form {
  position: absolute;
  z-index: 3;
  bottom: clamp(72px, 10vh, 104px);
  left: 50%;
  width: min(720px, calc(100% - 48px));
  min-height: 74px;
  transform: translateX(-50%) perspective(700px) rotateX(2deg);
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.46);
  border-radius: 27px;
  background: linear-gradient(130deg, rgba(255,255,255,.19), rgba(215,228,239,.065) 52%, rgba(255,255,255,.12)), rgba(12,18,24,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.44), inset 0 -1px 0 rgba(255,255,255,.1), 0 18px 42px rgba(0,4,11,.32);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  animation: sidewalk-float 7s ease-in-out 1.1s infinite;
}
.fixa-try-form::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: 9%;
  bottom: -24px;
  left: 9%;
  height: 30px;
  border-radius: 50%;
  background: rgba(151,197,226,.19);
  filter: blur(15px);
  transform: scaleY(.55);
}
.fixa-try-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0 16px;
  color: #fff;
  background: transparent;
  font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}
.fixa-try-form input:focus,
.fixa-try-form input:focus-visible { outline: none; box-shadow: none; }
.fixa-try-form:focus-within {
  border-color: rgba(255,255,255,.54);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.12), 0 20px 46px rgba(0,4,11,.35);
}
.fixa-try-form input::placeholder { color: rgba(255,255,255,.8); }
.fixa-try-form button {
  min-width: 118px;
  align-self: stretch;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 20px;
  background: rgba(246,250,252,.77);
  color: #14202a;
  cursor: pointer;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(0,5,14,.18);
}
@keyframes page-fade-from-night { from { opacity: 1; } to { opacity: 0; } }
@keyframes route-out { to { opacity: 0; filter: blur(2px); } }
@keyframes route-in { from { opacity: 0; } }
@keyframes menu-wobble {
  0% { transform: scale(1); }
  24% { transform: scale(.82, .9); }
  48% { transform: scale(1.13, 1.08); }
  68% { transform: scale(.96, 1.03); }
  84% { transform: scale(1.035, .98); }
  100% { transform: scale(1); }
}
@keyframes bubble-ring { 0% { opacity: .75; transform: scale(.84); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes sidewalk-float { 0%, 100% { transform: translateX(-50%) perspective(700px) rotateX(2deg) translateY(0); } 50% { transform: translateX(-50%) perspective(700px) rotateX(1deg) translateY(-4px); } }

.soft-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  width: fit-content;
  padding: 0 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.035);
  color: #767772;
  font-size: 12px;
}
.intro {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr);
  gap: 6vw;
  align-items: start;
  padding: clamp(105px, 11vw, 160px) clamp(28px, 7vw, 110px) clamp(46px, 6vw, 78px);
}
.intro-copy { max-width: 820px; }
.intro h2 {
  margin: 0;
  font-size: clamp(44px, 5vw, 76px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 500;
}
.intro-copy > p:not(.more-line) {
  max-width: 690px;
  margin: 44px 0 0;
  color: #6d6e69;
  font-size: clamp(24px, 3vw, 45px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.more-line { margin: 10px 0 0; color: #6d6e69; font-size: clamp(24px, 3vw, 45px); line-height: 1.13; letter-spacing: -.04em; }
.more-line span { display: inline-block; padding: 1px 10px 5px; border-radius: 8px; background: #fff; color: #191a17; }

.night-bridge {
  position: relative;
  height: clamp(440px, 55vw, 720px);
  margin: 0 12px;
  border-radius: 26px;
  overflow: hidden;
  background: #090806;
}
.night-bridge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,7,6,.06), transparent 35%, rgba(7,7,6,.08));
  pointer-events: none;
}
.night-bridge img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

.wide-photo {
  position: relative;
  height: min(78vw, 780px);
  min-height: 560px;
  margin: 0 12px;
  overflow: hidden;
  border-radius: 25px;
  background: #24251f;
}
.wide-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,8,.42), transparent 55%), linear-gradient(0deg, rgba(8,9,8,.22), transparent 40%); }
.wide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.wide-photo figcaption { position: absolute; z-index: 2; left: clamp(28px, 6vw, 90px); bottom: clamp(34px, 7vw, 96px); color: #fff; }
.wide-photo figcaption span { display: block; margin-bottom: 18px; font: 700 10px var(--font-geist-mono), monospace; letter-spacing: .16em; }
.wide-photo figcaption strong { display: block; max-width: 680px; font-size: clamp(48px, 6vw, 92px); font-weight: 400; line-height: .9; letter-spacing: -.06em; }

.how { padding: clamp(120px, 14vw, 200px) clamp(28px, 7vw, 110px); background: var(--paper); color: var(--ink); }
.how-heading {
  margin-bottom: 0;
  padding-bottom: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  border-bottom: 1px solid rgba(17,18,15,.14);
  text-align: center;
}
.how-heading p { max-width: 370px; margin: 0 0 18px; color: #666762; font-size: clamp(22px, 2.4vw, 35px); line-height: 1.1; letter-spacing: -.035em; }
.how-heading h2 { margin: 0; font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif; font-size: clamp(52px, 6vw, 86px); line-height: .98; letter-spacing: -.055em; font-weight: 500; }
.step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.step-cards li {
  min-height: 500px;
  padding: 58px 44px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-right: 1px solid rgba(17,18,15,.12);
  background: transparent;
  text-align: center;
}
.step-cards li:first-child { padding-left: 0; }
.step-cards li:last-child { padding-right: 0; border-right: 0; }
.card-icon {
  width: 104px;
  height: 112px;
  display: grid;
  place-items: center;
  color: #11120f;
}
.clipboard-icon { font: 68px/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.workspace-icon { width: 104px; }
.workspace-icon img { width: 88px; height: 88px; object-fit: contain; }
.lad-step-icon img { width: 88px; height: 88px; object-fit: contain; filter: brightness(0); }
.step-cards div > span { display: block; margin-bottom: 20px; color: #858681; font: 10px var(--font-geist-mono), monospace; letter-spacing: .17em; }
.step-cards h3 { max-width: 330px; margin: 0; font-size: clamp(27px, 2.6vw, 41px); line-height: .98; letter-spacing: -.05em; font-weight: 500; }
.step-cards p { max-width: 310px; margin: 24px 0 0; color: #6e6a62; font-size: 16px; line-height: 1.5; }

.product { padding: clamp(110px, 14vw, 190px) 12px 12px; }
.product-heading { max-width: 1180px; margin: 0 auto 90px; padding: 0 clamp(16px, 4vw, 48px); text-align: center; }
.product-heading .soft-pill { margin: 0 auto 28px; }
.product-heading h2 { margin: 0; font-size: clamp(65px, 9vw, 138px); line-height: .86; letter-spacing: -.075em; font-weight: 430; }
.product-heading > p { margin: 32px 0 0; color: #6e6f69; font-size: 16px; }
.demo-stage {
  position: relative;
  min-height: 950px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(360px, 440px) minmax(170px, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 90px);
  padding: 80px clamp(28px, 6vw, 100px);
  overflow: hidden;
  border-radius: 27px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,238,204,.42), transparent 35%),
    #c99358;
}
.demo-stage::before,
.demo-stage::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(74,46,18,.12); }
.demo-stage::before { width: 800px; height: 800px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.demo-stage::after { width: 610px; height: 610px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.demo-note { position: relative; z-index: 3; max-width: 260px; }
.demo-note span { display: block; margin-bottom: 14px; font: 10px var(--font-geist-mono), monospace; letter-spacing: .15em; color: #6f4720; }
.demo-note strong { display: block; font-size: clamp(24px, 2.6vw, 38px); line-height: .98; letter-spacing: -.05em; font-weight: 520; }
.demo-note p { margin: 20px 0 0; color: rgba(42,27,12,.66); font-size: 13px; line-height: 1.5; }
.right-note { justify-self: end; }
.phone-wrap { position: relative; z-index: 5; display: grid; place-items: center; }
.phone-shell {
  position: relative;
  width: 370px;
  height: 760px;
  padding: 10px;
  border: 2px solid #3a3b36;
  border-radius: 61px;
  background: #050604;
  box-shadow: 0 36px 80px rgba(70,39,9,.38), inset 0 0 0 1px #10110e;
}
.phone-island { position: absolute; z-index: 8; top: 18px; left: 50%; width: 104px; height: 29px; transform: translateX(-50%); border-radius: 20px; background: #050604; }
.phone-screen { position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 50px; background: #f1eee6; color: #1c1d19; }
.phone-status { height: 49px; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; font-size: 10px; font-weight: 700; }
.phone-status span:last-child { font-size: 7px; letter-spacing: 2px; }
.app-header { height: 64px; display: grid; grid-template-columns: 34px 1fr 10px; align-items: center; gap: 10px; padding: 0 20px; border-top: 1px solid rgba(44,44,38,.08); border-bottom: 1px solid rgba(44,44,38,.12); }
.mini-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #9f7543; border-radius: 50%; color: #93652f; font-size: 14px; }
.app-header div { min-width: 0; }
.app-header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.app-header small { display: block; margin-top: 2px; color: #7b776e; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #bd742b; box-shadow: 0 0 8px rgba(189,116,43,.55); }
.stage-dots { height: 30px; padding: 13px 20px 0; display: flex; gap: 5px; }
.stage-dots i { flex: 1; height: 2px; background: #d7d1c5; transition: background .3s ease; }
.stage-dots i.done { background: #a56d31; }
.app-body { height: calc(100% - 143px); }
.phone-panel { height: 100%; padding: 24px 22px 25px; display: flex; flex-direction: column; animation: panel-in .28s ease both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(5px); } }
.centered-panel { text-align: center; align-items: center; justify-content: center; padding-bottom: 55px; }
.eyebrow { margin: 0 0 15px; color: #9a6b35; font: 700 9px var(--font-geist-mono), monospace; letter-spacing: .16em; }
.phone-panel h3 { margin: 0; font-size: 30px; line-height: .98; letter-spacing: -.05em; font-weight: 520; }
.centered-panel > p:not(.eyebrow) { max-width: 245px; margin: 14px 0 0; color: #716c63; font-size: 12px; line-height: 1.55; }
.porch-orb { width: 92px; height: 92px; margin: 12px 0 32px; display: grid; place-items: center; color: #895a27; border: 1px solid rgba(145,91,34,.24); border-radius: 50%; background: radial-gradient(circle, rgba(224,163,89,.47), rgba(218,142,60,.12) 45%, transparent 67%); box-shadow: 0 0 52px rgba(204,121,37,.24); font-size: 30px; }
.app-primary { width: 100%; min-height: 48px; margin-top: auto; padding: 0 16px; border: 1px solid #1d1e1a; border-radius: 12px; background: #1d1e1a; color: #f1ebdf; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; transition: background .18s ease; }
.app-primary:hover { background: #34352e; }
.app-primary span { color: #dfa04d; font-size: 18px; }
.text-button { border: 0; background: transparent; color: #7f5930; padding: 12px; margin-top: 18px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font-size: 11px; }
.learn-rings { position: relative; width: 118px; height: 118px; margin: 16px 0 33px; }
.learn-rings i { position: absolute; inset: 0; border: 1px solid rgba(158,105,48,.22); border-radius: 50%; animation: ring 1.45s ease-out infinite; }
.learn-rings i:nth-child(2) { inset: 18px; animation-delay: .18s; }
.learn-rings i:nth-child(3) { inset: 36px; animation-delay: .36s; background: #dba354; }
@keyframes ring { 50% { transform: scale(1.06); border-color: rgba(158,105,48,.48); } }
.facts { margin: 26px 0 20px; border-top: 1px solid #cac3b7; }
.facts div { padding: 13px 0; border-bottom: 1px solid #cac3b7; }
.facts span, .recap-card span { display: block; color: #837e74; font: 8px var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .13em; }
.facts strong, .recap-card strong { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; line-height: 1.25; }
.ready-check { width: 86px; height: 86px; margin: 20px 0 32px; display: grid; place-items: center; border: 1px solid #aa7439; border-radius: 50%; color: #9d682e; font: 34px Georgia, serif; box-shadow: 0 0 45px rgba(196,126,48,.13); }
.call-panel { padding-top: 17px; }
.call-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.call-heading .eyebrow { margin-bottom: 6px; }
.call-heading h3 { font-size: 22px; }
.call-heading > span { color: #8a6439; font: 9px var(--font-geist-mono), monospace; }
.messages { display: flex; flex-direction: column; gap: 8px; margin: 20px -3px 8px; min-height: 264px; max-height: 330px; overflow-y: auto; scrollbar-width: none; }
.messages::-webkit-scrollbar { display: none; }
.messages p { max-width: 84%; margin: 0; padding: 10px 11px; border-radius: 12px; font-size: 10px; line-height: 1.45; }
.shop-message { align-self: flex-start; color: #423f38; background: #dcd6ca; border-bottom-left-radius: 2px !important; }
.caller-message { align-self: flex-end; color: #f3ede2; background: #282923; border-bottom-right-radius: 2px !important; }
.typing { min-width: 41px; letter-spacing: 3px; color: #9b754b; }
.suggestion { margin: auto 0 8px; padding: 9px 10px; border: 1px solid #bfb7a8; border-radius: 8px; background: transparent; color: #514d45; cursor: pointer; text-align: left; font-size: 9px; }
.suggestion span { float: right; color: #9d6b34; }
.message-form { display: grid; grid-template-columns: 1fr 33px; gap: 6px; }
.message-form input { width: 100%; min-width: 0; border: 1px solid #c5beb1; border-radius: 9px; background: rgba(255,255,255,.35); color: #252620; outline: none; padding: 9px; font-size: 10px; }
.message-form input:focus { border-color: #9c6a34; }
.message-form button { border: 0; border-radius: 9px; background: #272822; color: #e9a757; cursor: pointer; }
.recap-button { margin-top: auto; }
.recap-card { margin: 24px 0 16px; border-top: 1px solid #c9c2b5; }
.recap-card div { padding: 12px 0; border-bottom: 1px solid #c9c2b5; }
.recap-card .urgent { color: #9a4e2e; }
.recap-note { padding: 12px; border: 1px solid #bfb6a7; border-radius: 8px; color: #5f5a51; font-size: 9px; line-height: 1.5; }
.recap-note i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #a36c31; }
.restart { align-self: center; margin-top: auto; }
.home-bar { position: absolute; bottom: 8px; left: 50%; width: 112px; height: 4px; transform: translateX(-50%); border-radius: 3px; background: #22231f; opacity: .9; }

.detail-photo {
  position: relative;
  height: min(76vw, 860px);
  min-height: 620px;
  margin: 0 12px 12px;
  overflow: hidden;
  border-radius: 27px;
  background: #151410;
}
.detail-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,7,.72) 0%, rgba(8,8,7,.3) 45%, rgba(8,8,7,.04) 75%);
}
.detail-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detail-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(28px, 7vw, 110px);
  max-width: 790px;
  transform: translateY(-50%);
  color: #f5efe4;
}
.detail-copy > span { display: block; margin-bottom: 26px; color: #d8a05f; font: 700 10px var(--font-geist-mono), monospace; letter-spacing: .16em; }
.detail-copy h2 { margin: 0; font-size: clamp(56px, 7vw, 108px); line-height: .88; letter-spacing: -.07em; font-weight: 430; }
.detail-copy h2 em { color: #e2ad6c; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; }

.calm-strip { min-height: 880px; margin: 0 12px 12px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(100px, 13vw, 190px) clamp(28px, 7vw, 110px); border-radius: 27px; background: #1a1b17; color: #f2eee5; text-align: center; }
.calm-strip > p { margin: 0 0 38px; color: #9c9c94; font-size: 14px; }
.calm-strip h2 { margin: 0; font-size: clamp(60px, 8.5vw, 130px); line-height: .86; letter-spacing: -.075em; font-weight: 430; }
.calm-strip h2 em { color: #dba15d; }

.faq-section {
  padding: clamp(120px, 14vw, 210px) clamp(28px, 7vw, 110px);
  background: #fff;
}
.faq-heading, .faq-list { width: 100%; max-width: 1240px; margin-right: auto; margin-left: auto; }
.faq-heading .soft-pill { margin-bottom: 48px; }
.faq-list { border-top: 1px solid #d9dadd; }
.faq-list details { border-bottom: 1px solid #d9dadd; }
.faq-list summary {
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  color: #181a18;
  cursor: pointer;
  list-style: none;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #c8cbd0; border-radius: 50%; color: #5f6468; font: 300 24px/1 Arial, Helvetica, sans-serif; transition: transform .28s ease, background .28s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); background: #f0f2f3; }
.faq-list details p { max-width: 650px; margin: -7px 62px 30px 0; color: #6d7274; font-size: 16px; line-height: 1.58; }
.faq-list a { text-decoration: underline; text-underline-offset: 3px; }

.closing { display: grid; grid-template-columns: 1.5fr .8fr; gap: 7vw; align-items: end; padding: clamp(100px, 13vw, 190px) clamp(28px, 7vw, 110px); background: #fff; }
.dark-pill {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(52, 61, 69, .13);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(220,229,236,.48) 56%, rgba(255,255,255,.68));
  color: #555b5f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(41,48,54,.05), 4px 5px 0 rgba(39,47,53,.08), 9px 11px 0 rgba(39,47,53,.055), 17px 21px 30px rgba(29,37,44,.2);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}
.dark-pill::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(112deg, rgba(255,255,255,.6), transparent 38%, transparent 72%, rgba(190,205,216,.18));
  pointer-events: none;
}
.closing-copy h2 { max-width: 850px; margin: 34px 0 0; font-size: clamp(70px, 9vw, 138px); line-height: .86; letter-spacing: -.075em; font-weight: 430; }
.closing-copy h2 em { text-shadow: 2px 2px 0 rgba(24,29,31,.16), 5px 5px 0 rgba(24,29,31,.13), 8px 8px 0 rgba(24,29,31,.1), 13px 14px 18px rgba(24,29,31,.24); }
.closing-copy p { margin: 34px 0 0; color: #77736b; font-size: 15px; }
.closing-form { position: relative; overflow: hidden; width: 100%; min-height: 62px; display: flex; padding: 6px; border: 1px solid rgba(52,61,69,.14); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(218,228,235,.36) 58%, rgba(255,255,255,.62)); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(41,48,54,.05), 0 18px 46px rgba(28,36,43,.1); backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%); }
.closing-form::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(112deg, rgba(255,255,255,.58), transparent 36%, transparent 70%, rgba(185,202,214,.17)); pointer-events: none; }
.closing-form input { position: relative; z-index: 1; min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 14px; color: #22231f; background: transparent; font-size: 13px; }
.closing-form button { position: relative; z-index: 1; min-width: 104px; border: 1px solid rgba(255,255,255,.2); border-radius: 13px; background: #050505; color: #fff; cursor: pointer; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.3), 0 8px 22px rgba(5,5,5,.24); backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%); transition: transform .24s ease, box-shadow .24s ease; }
.closing-form button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.14), 0 12px 28px rgba(23,28,30,.24); }
.closing-form:focus-within { border-color: rgba(38,45,50,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(41,48,54,.05), 0 0 0 4px rgba(37,44,49,.07), 0 18px 46px rgba(28,36,43,.1); }
.closing-form input:focus-visible, .closing-form button:focus-visible { outline: 0; }

footer { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: start; gap: 40px; padding: 55px clamp(28px, 7vw, 110px); border-top: 1px solid #e2e2df; background: #fff; color: #706d66; font-size: 11px; line-height: 1.6; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #1d1e1a; }
.footer-brand img { width: 31px; height: 31px; object-fit: contain; filter: brightness(0); }
.footer-brand strong { font-size: 12px; }
footer p { margin: 0; }
.footer-meta { display: flex; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.footer-meta a { text-decoration: underline; text-underline-offset: 3px; }

/* Sign in */
.signin-page {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
}
.auth-brand {
  position: absolute;
  top: 25px;
  left: clamp(22px, 3.6vw, 56px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #141513;
}
.auth-brand img { width: 36px; height: 36px; object-fit: contain; filter: brightness(0); }
.auth-brand strong { font-size: 14px; letter-spacing: -.025em; }
.google-signin {
  min-width: 232px;
  min-height: 52px;
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  padding: 0 16px 0 12px;
  border: 1px solid #747775;
  border-radius: 26px;
  background: #fff;
  color: #1f1f1f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 3px 4px 0 rgba(26,31,34,.09), 8px 10px 24px rgba(24,31,37,.12);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.google-signin img { width: 20px; height: 20px; object-fit: contain; }
.google-signin span { padding-left: 9px; text-align: center; }
.google-signin:hover { transform: translateY(-2px); background: #f8f9fa; box-shadow: 4px 6px 0 rgba(26,31,34,.09), 10px 14px 28px rgba(24,31,37,.14); }

/* Portal */
.portal-page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 18px;
  color: #f5f0e7;
  background:
    radial-gradient(circle at 11% 15%, rgba(235,177,102,.11), transparent 21%),
    radial-gradient(circle at 87% 12%, rgba(120,164,205,.11), transparent 25%),
    linear-gradient(145deg, #05090f, #091421 52%, #070c13);
}
.portal-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .75;
  background-image:
    radial-gradient(circle at 8% 13%, rgba(255,255,255,.68) 0 1px, transparent 1.4px),
    radial-gradient(circle at 29% 8%, rgba(255,255,255,.48) 0 1px, transparent 1.3px),
    radial-gradient(circle at 62% 16%, rgba(255,255,255,.5) 0 1px, transparent 1.4px),
    radial-gradient(circle at 92% 29%, rgba(255,255,255,.42) 0 1px, transparent 1.3px),
    radial-gradient(circle at 19% 67%, rgba(255,255,255,.38) 0 1px, transparent 1.3px),
    radial-gradient(circle at 76% 74%, rgba(255,255,255,.44) 0 1px, transparent 1.3px);
}
.portal-header,
.portal-workspace { position: relative; z-index: 1; width: 100%; max-width: 1460px; margin-right: auto; margin-left: auto; }
.portal-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 16px;
  color: #fff;
}
.portal-brand { width: fit-content; display: flex; align-items: center; gap: 10px; }
.portal-brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 9px rgba(0,0,0,.32)); }
.portal-brand strong { font-size: 14px; letter-spacing: -.025em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.portal-header-actions { display: flex; align-items: center; gap: 8px; }
.portal-indicator {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 15px;
  background: linear-gradient(130deg, rgba(255,255,255,.2), rgba(215,228,239,.08) 52%, rgba(255,255,255,.14)), rgba(7,18,30,.42);
  color: rgba(255,255,255,.76);
  font: 700 10px var(--font-geist-mono), monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,7,18,.22);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.portal-signout {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 15px;
  background: linear-gradient(130deg, rgba(255,255,255,.2), rgba(215,228,239,.08) 52%, rgba(255,255,255,.14)), rgba(7,18,30,.42);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,7,18,.22);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: transform .2s ease, filter .2s ease;
}
.portal-signout:hover { transform: translateY(-2px); filter: brightness(1.12); }
.portal-workspace {
  min-height: calc(100svh - 116px);
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 14px;
  padding-top: 14px;
}
.portal-nav {
  min-height: 690px;
  display: flex;
  flex-direction: column;
  padding: 28px 18px 20px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 27px;
  background: linear-gradient(155deg, rgba(255,255,255,.095), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 24px 65px rgba(0,0,0,.2);
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
}
.portal-nav > p { margin: 0 10px 27px; color: rgba(232,236,238,.46); font: 700 10px var(--font-geist-mono), monospace; letter-spacing: .15em; text-transform: uppercase; }
.portal-nav-items { position: relative; isolation: isolate; display: grid; gap: 8px; }
.portal-nav-items::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 17px;
  background: linear-gradient(130deg, rgba(255,255,255,.22), rgba(201,219,232,.08) 52%, rgba(255,255,255,.14)), rgba(9,21,33,.44);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), inset 0 -1px 0 rgba(255,255,255,.07), 4px 5px 0 rgba(0,0,0,.13), 10px 15px 30px rgba(0,0,0,.2);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  transition: transform .52s cubic-bezier(.2,1.18,.32,1);
}
/* Section highlight positions live in portal-live-20260902.css (four sections). */
.portal-nav-items button {
  position: relative;
  z-index: 1;
  min-height: 56px;
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 17px;
  background: transparent;
  color: rgba(245,246,243,.62);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 650;
  transition: color .28s ease, text-shadow .28s ease;
}
.portal-nav-items button span { color: #b48045; font: 9px var(--font-geist-mono), monospace; letter-spacing: .1em; }
.portal-nav-items button:hover { color: #fff; }
.portal-nav-items button.active {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.58);
}
.portal-nav-note { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 12px 10px 2px; color: rgba(236,239,240,.44); font-size: 11px; }
.portal-nav-note i { width: 7px; height: 7px; border-radius: 50%; background: #bd8240; box-shadow: 0 0 12px rgba(216,156,85,.65); }
.portal-view {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 27px;
  background: #f3f0e9;
  color: #151713;
  box-shadow: inset 0 1px 0 #fff, 8px 9px 0 rgba(0,0,0,.17), 22px 28px 70px rgba(0,0,0,.3);
}
.portal-panel { min-height: 690px; padding: clamp(42px, 6vw, 88px); animation: portal-panel-in .35s cubic-bezier(.22,1,.36,1) both; }
@keyframes portal-panel-in { from { opacity: 0; transform: translateY(8px); } }
.portal-title-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 60px; align-items: end; margin-bottom: 65px; }
.portal-eyebrow { display: block; margin-bottom: 20px; color: #9c6b37; font: 700 10px var(--font-geist-mono), monospace; letter-spacing: .16em; text-transform: uppercase; }
.portal-title-row h1 { margin: 0; font-size: clamp(66px, 7.4vw, 112px); line-height: .82; letter-spacing: -.075em; font-weight: 470; }
.portal-title-row h1 em { color: #a97135; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; }
.portal-title-row > p { max-width: 430px; margin: 0 0 4px; color: #73746e; font-size: 15px; line-height: 1.6; }
.portal-field label,
.role-picker legend,
.phone-setup label { display: block; margin-bottom: 12px; color: #444641; font-size: 12px; font-weight: 750; }
.portal-field textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 24px;
  border: 1px solid #c9c8c1;
  border-radius: 20px;
  outline: 0;
  background: rgba(255,255,255,.66);
  color: #1f211d;
  font-size: 16px;
  line-height: 1.58;
  box-shadow: inset 0 1px 0 #fff, 4px 5px 0 rgba(42,46,45,.06), 12px 16px 34px rgba(35,40,39,.07);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.portal-field textarea::placeholder { color: #92938e; }
.portal-field textarea:focus { border-color: #8a6033; box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(160,109,53,.1), 4px 5px 0 rgba(42,46,45,.06); }
.portal-field > span { display: block; margin-top: 10px; color: #8a8b85; font-size: 11px; }
.role-picker { min-width: 0; margin: 44px 0 0; padding: 0; border: 0; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-grid button {
  min-height: 82px;
  display: grid;
  grid-template-columns: 30px 1fr 28px;
  gap: 6px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #d2d1cb;
  border-radius: 18px;
  background: rgba(255,255,255,.46);
  color: #777972;
  cursor: pointer;
  text-align: left;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.role-grid button > span { color: #a47746; font: 9px var(--font-geist-mono), monospace; }
.role-grid button strong { font-size: 14px; }
.role-grid button i { width: 27px; height: 27px; display: grid; place-items: center; justify-self: end; border: 1px solid #c9c8c1; border-radius: 50%; font-style: normal; }
.role-grid button:hover { transform: translateY(-2px); border-color: #b9b7ae; }
.role-grid button.selected { border-color: #333731; background: #20231f; color: #f5f0e7; box-shadow: 3px 4px 0 rgba(18,21,18,.18), 10px 14px 24px rgba(18,21,18,.11); }
.role-grid button.selected i { border-color: #bc8448; background: #bc8448; color: #171914; }
.portal-actions { display: flex; align-items: center; gap: 20px; margin-top: 36px; }
.portal-primary {
  min-height: 52px;
  padding: 0 23px;
  border: 1px solid #171916;
  border-radius: 16px;
  background: #171916;
  color: #f5f0e7;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 4px 5px 0 rgba(19,22,19,.15), 11px 15px 25px rgba(19,22,19,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.portal-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 5px 7px 0 rgba(19,22,19,.15), 13px 19px 30px rgba(19,22,19,.17); }
.portal-actions p { margin: 0; opacity: 0; color: #63725c; font-size: 12px; transition: opacity .25s ease; }
.portal-actions p.visible { opacity: 1; }
.integration-panel {
  padding: 28px;
  border: 1px solid #cecdc6;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 #fff, 4px 5px 0 rgba(42,46,45,.055), 14px 18px 34px rgba(35,40,39,.06);
}
.integration-topline { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; }
.integration-topline > img { width: 30px; height: 30px; object-fit: contain; }
.integration-topline > strong { font-size: 18px; letter-spacing: -.03em; }
.integration-topline > span:last-child { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 10px; background: #e4e3dd; color: #777973; font: 700 9px var(--font-geist-mono), monospace; letter-spacing: .08em; text-transform: uppercase; }
.integration-panel > p { max-width: 670px; margin: 26px 0 30px; color: #757770; font-size: 14px; line-height: 1.6; }
.status-dot { width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; background: #af7740; box-shadow: 0 0 0 7px rgba(175,119,64,.12); }
.status-dot.is-ok { background: #5d8a4c; box-shadow: 0 0 0 7px rgba(93,138,76,.14); }
.status-dot.is-warn { background: #b15c32; box-shadow: 0 0 0 7px rgba(177,92,50,.14); }
.portal-disabled {
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid #cac9c2;
  border-radius: 14px;
  background: #e7e6e0;
  color: #989992;
  cursor: not-allowed;
  font-size: 12px;
  font-weight: 700;
}
.future-path { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 14px; align-items: center; margin: 48px 0; color: #5e615b; font-size: 12px; }
.future-path i { height: 1px; background: #c7c7c0; }
.setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.phone-glyph { width: 30px; height: 30px; display: grid !important; place-items: center; padding: 0 !important; border-radius: 50% !important; background: #20231f !important; color: #e2a760 !important; font-size: 14px !important; }
.phone-setup label { margin-top: 29px; }
.phone-setup input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #c9c8c1;
  border-radius: 15px;
  outline: 0;
  background: rgba(255,255,255,.75);
  color: #20221e;
  font-size: 16px;
  box-shadow: inset 0 1px 0 #fff;
}
.phone-setup input:focus { border-color: #8a6033; box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(160,109,53,.1); }
.phone-setup .portal-primary { margin-top: 16px; }
.hours-panel { margin-top: 14px; }
.hours-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin: 8px 0 22px;
}
.hours-meta label, .hours-cals label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6d6c66; }
.hours-meta select, .hours-cals select {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid #c9c8c1;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  color: #20221e;
  font-size: 15px;
}
.hours-days { display: grid; gap: 8px; }
.hours-day {
  display: grid;
  grid-template-columns: 22px 92px 1fr 16px 1fr;
  gap: 10px;
  align-items: center;
}
.hours-day input[type="time"] {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #c9c8c1;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
}
.hours-day.is-off input[type="time"] { opacity: .4; }
.hours-cals { margin-top: 22px; display: grid; gap: 10px; }
.hours-hint { margin: 0; color: #757770; font-size: 13px; }
.conflict-row { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.hours-panel .portal-primary { margin-top: 18px; }
.billing-flash {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #d2d1cb;
  border-radius: 14px;
  background: var(--cream);
  color: #5c5850;
  font-size: 13px;
  line-height: 1.45;
}

button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #a56d31; outline-offset: 3px; }
textarea:focus-visible { outline: 2px solid #a56d31; outline-offset: 3px; }

@media (max-width: 980px) {
  .intro { min-height: 650px; grid-template-columns: 1fr; gap: 50px; }
  .step-cards { grid-template-columns: 1fr; }
  .step-cards li { min-height: 360px; padding: 52px 8px; border-right: 0; border-bottom: 1px solid rgba(17,18,15,.12); }
  .step-cards li:first-child { padding-left: 8px; }
  .step-cards li:last-child { padding-right: 8px; border-bottom: 0; }
  .demo-stage { grid-template-columns: 1fr; gap: 38px; padding-top: 70px; padding-bottom: 70px; }
  .demo-note { max-width: 380px; text-align: center; justify-self: center; }
  .right-note { order: 3; }
  .closing { grid-template-columns: 1fr; align-items: start; }
  .closing-form { max-width: 540px; margin-top: 20px; }
  .portal-workspace { grid-template-columns: 210px minmax(0, 1fr); }
  .portal-title-row { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .setup-grid { grid-template-columns: 1fr; }
  .hours-meta { grid-template-columns: 1fr; }
  .hours-day { grid-template-columns: 22px 1fr; }
  .hours-day input[type="time"] { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .fixa-hero { padding: 7px; }
  .fixa-hero-photo {
    min-height: calc(100svh - 14px);
    border-radius: 20px;
    background: url('/lad-hero-mobile-v1.webp') center center / cover no-repeat;
  }
  .hero-nav { inset: 15px 15px auto; align-items: flex-start; }
  .brand-lockup { min-height: 54px; max-width: calc(100vw - 104px); padding: 3px; }
  .brand-lockup img { width: 38px; height: 38px; }
  .brand-lockup strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-toggle { width: 42px; height: 42px; border-radius: 15px; }
  .hero-menu { top: 50px; }
  .hero-menu a { min-height: 41px; padding: 0 15px; border-radius: 17px; }
  .fixa-hero-copy { top: clamp(118px, 16vh, 154px); padding: 0 13px; }
  .fixa-hero h1 { font-size: clamp(43px, 12.5vw, 59px); line-height: .9; }
  .fixa-hero h1 em { margin-left: 0; }
  .mobile-break { display: initial; }
  .desktop-space { display: none; }
  .fixa-try-form { bottom: clamp(54px, 7vh, 68px); width: calc(100% - 44px); min-height: 64px; padding: 9px; border-radius: 23px; transform: translateX(-50%); animation: none; }
  .fixa-try-form input { padding-left: 15px; padding-right: 15px; font-size: 16px; }
  .fixa-try-form button { min-width: 88px; border-radius: 17px; }
  .intro { min-height: auto; padding-top: 100px; padding-bottom: 48px; }
  .intro-copy > p:not(.more-line), .more-line { font-size: 28px; }
  .night-bridge { height: 640px; margin: 0 7px; border: 0; border-radius: 20px; }
  .night-bridge img { object-position: 31% center; }
  .wide-photo { min-height: 640px; height: 82svh; margin: 0 7px; border-radius: 20px; }
  .wide-photo img { object-position: 47% center; }
  .wide-photo figcaption { left: 24px; bottom: 35px; }
  .how { padding: 100px 22px; }
  .how-heading { padding: 0 0 30px; }
  .how-heading h2 { font-size: 65px; }
  .step-cards li { min-height: 350px; padding: 44px 8px; border-radius: 0; }
  .product { padding-left: 7px; padding-right: 7px; }
  .product-heading h2 { font-size: 68px; }
  .demo-stage { min-height: auto; border-radius: 20px; padding: 60px 8px 38px; }
  .demo-stage::before, .demo-stage::after { display: none; }
  .phone-wrap { width: 100%; }
  .phone-shell {
    width: 100%;
    height: 700px;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    box-shadow: 0 22px 55px rgba(64,36,11,.25);
  }
  .phone-island, .phone-status, .home-bar { display: none; }
  .phone-screen { border-radius: 28px; }
  .app-body { height: calc(100% - 94px); }
  .messages { max-height: 350px; }
  .detail-photo { min-height: 760px; height: 88svh; margin: 0 7px 7px; border-radius: 20px; }
  .detail-photo img { object-position: 64% center; }
  .detail-photo::after { background: linear-gradient(180deg, rgba(8,8,7,.1), rgba(8,8,7,.72) 78%, rgba(8,8,7,.86)); }
  .detail-copy { top: auto; right: 24px; bottom: 38px; left: 24px; transform: none; }
  .detail-copy h2 { font-size: 54px; }
  .calm-strip { min-height: 720px; margin: 0 7px 7px; padding-left: 20px; padding-right: 20px; border-radius: 20px; }
  .calm-strip h2 { font-size: 59px; }
  .faq-section { padding: 110px 22px; }
  .faq-heading .soft-pill { margin-bottom: 38px; }
  .faq-list summary { min-height: 84px; grid-template-columns: minmax(0, 1fr) 34px; gap: 18px; padding: 22px 0; font-size: 22px; }
  .faq-list summary::after { width: 32px; height: 32px; }
  .faq-list details p { margin-right: 42px; font-size: 15px; }
  .closing { padding-left: 22px; padding-right: 22px; }
  .closing-form input { font-size: 16px; }
  .closing-copy h2 { font-size: 68px; }
  footer { grid-template-columns: 1fr; gap: 28px; padding-left: 22px; padding-right: 22px; }
  .footer-meta { justify-content: flex-start; }
  .auth-brand { top: 20px; }
  .auth-brand img { width: 34px; height: 34px; }
  .google-signin { min-width: 230px; min-height: 52px; }
  .portal-page { padding: 7px; }
  .portal-header { min-height: 62px; padding: 9px 8px 13px; }
  .portal-brand { min-width: 0; }
  .portal-brand img { width: 34px; height: 34px; }
  .portal-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .portal-indicator { display: none; }
  .portal-signout { min-height: 38px; padding: 0 13px; }
  .portal-workspace { min-height: auto; grid-template-columns: 1fr; gap: 7px; padding-top: 7px; }
  .portal-nav { min-height: 0; padding: 8px; border-radius: 19px; }
  .portal-nav > p, .portal-nav-note { display: none; }
  .portal-nav-items { gap: 5px; }
  .portal-nav-items::before { right: auto; height: 48px; border-radius: 13px; }
  .portal-nav-items button { min-height: 48px; grid-template-columns: 1fr; place-items: center; padding: 0 7px; border-radius: 13px; text-align: center; font-size: 12px; }
  .portal-nav-items button span { display: none; }
  .portal-nav-items button:hover { transform: none; }
  .portal-view { border-radius: 20px; }
  .portal-panel { min-height: calc(100svh - 131px); padding: 48px 21px 55px; }
  .portal-title-row { margin-bottom: 46px; }
  .portal-title-row h1 { font-size: 64px; }
  .portal-title-row > p { font-size: 14px; }
  .portal-field textarea { min-height: 240px; padding: 18px; font-size: 16px; }
  .role-grid { grid-template-columns: 1fr; }
  .role-grid button { min-height: 72px; }
  .portal-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .portal-primary { width: 100%; }
  .integration-panel { padding: 22px 18px; }
  .integration-topline { grid-template-columns: 32px 1fr; }
  .integration-topline > span:last-child { grid-column: 2; width: fit-content; }
  .future-path { grid-template-columns: 1fr; gap: 10px; margin: 36px 0; }
  .future-path i { width: 1px; height: 18px; margin-left: 6px; }
  .portal-disabled { width: 100%; }
}

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


#night-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #07101b;
  pointer-events: none;
  opacity: 0;
}
#night-veil.covering { opacity: 1; pointer-events: auto; }
/* first-paint hold on /signin — must paint night BEFORE the white page is seen */
html.night-hold #night-veil { opacity: 1; }
html.night-ready #night-veil {
  opacity: 0;
  pointer-events: none;
  transition: opacity .62s cubic-bezier(.22,1,.36,1);
}
html.night-depart #night-veil {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .28s ease;
}



/* 28b try-it — night glass on the homepage photo. Hero/menu/paste/signin/portal stay 27b. */
.try-stage {
  padding: 12px;
  background: var(--paper);
  color: #f7f4eb;
}
.try-night {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 24px);
  padding: clamp(48px, 7vw, 92px) clamp(18px, 4vw, 56px) clamp(36px, 5vw, 64px);
  border-radius: 26px;
  background: url('/lad-hero-desktop-extended-v1.webp') center center / cover no-repeat;
}
.try-night::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,16,27,.38), rgba(7,16,27,.62) 42%, rgba(7,16,27,.78));
  pointer-events: none;
}
.try-heading,
.try-panel { position: relative; z-index: 1; max-width: 1180px; margin-left: auto; margin-right: auto; }
.try-heading { margin-bottom: 36px; text-align: left; }
.try-heading .soft-pill,
.night-pill {
  margin: 0 0 18px;
  border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  color: #f7f4eb;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.try-heading h2 {
  margin: 0;
  color: #f7f4eb;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 470;
  text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 8px 28px rgba(0,4,13,.36);
}
.try-heading h2 em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
}
.try-heading > p { margin: 16px 0 0; color: rgba(247,244,235,.78); font-size: 16px; }
.try-kicker {
  margin: 0 0 10px;
  color: rgba(232,198,146,.88);
  font: 700 10px var(--font-geist-mono), monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.try-kicker.light { color: rgba(232,198,146,.86); }
.try-lede { margin: 0 0 24px; color: rgba(247,244,235,.72); font-size: 15px; line-height: 1.5; }
.try-load, .try-error {
  min-height: 260px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 48px 24px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(130deg, rgba(255,255,255,.14), rgba(215,228,239,.06) 52%, rgba(255,255,255,.08)), rgba(7,18,30,.55);
  color: #f7f4eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 18px 42px rgba(0,4,11,.28);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.try-load p, .try-error p { margin: 0; }
.try-load #try-load-status, .try-error #try-error-text {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.045em;
  line-height: 1.1;
}
.try-meter {
  width: min(280px, 70%);
  height: 3px;
  margin: 28px auto 0;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.14);
}
.try-meter i {
  display: block;
  width: 18%;
  height: 100%;
  border-radius: inherit;
  background: #e2b277;
  box-shadow: 0 0 16px rgba(226,178,119,.55);
  transition: width .45s cubic-bezier(.22,1,.36,1);
}
.try-review {
  padding: clamp(22px, 3.6vw, 40px);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 24px;
  background: linear-gradient(130deg, rgba(255,255,255,.16), rgba(215,228,239,.06) 52%, rgba(255,255,255,.09)), rgba(7,18,30,.62);
  color: #f7f4eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 18px 42px rgba(0,4,11,.3);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.try-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.try-span { grid-column: 1 / -1; }
.try-field { display: flex; flex-direction: column; gap: 8px; color: rgba(247,244,235,.78); font-size: 12px; font-weight: 700; }
.try-field small { margin-left: 8px; color: rgba(247,244,235,.5); font-weight: 500; letter-spacing: 0; text-transform: none; }
.try-field[data-found="missing"] small { color: #e2b277; }
.try-field input, .try-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px;
  outline: 0;
  background: rgba(7,18,30,.28);
  color: #fff;
  font: 400 15px var(--font-geist-sans), Arial, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.try-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.try-field input::placeholder, .try-field textarea::placeholder { color: rgba(255,255,255,.45); }
.try-field input:focus, .try-field textarea:focus {
  border-color: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 4px rgba(255,255,255,.08);
}
.try-actions { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.try-continue {
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 18px;
  background: rgba(246,250,252,.77);
  color: #14202a;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(0,5,14,.18);
}
.try-continue:hover { transform: translateY(-1px); }
.try-actions p { margin: 0; color: rgba(247,244,235,.55); font-size: 12px; }
.voice-plate {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.28);
  background: linear-gradient(130deg, rgba(255,255,255,.12), rgba(215,228,239,.05) 52%, rgba(255,255,255,.07)), rgba(7,18,30,.42);
  color: #f7f4eb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.voice-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 14px 20px;
}
.voice-orb {
  position: relative;
  width: 188px;
  height: 188px;
  margin: 12px 0 28px;
  display: grid;
  place-items: center;
}
.voice-orb .ring {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.voice-orb .ring:nth-child(2) { inset: 28px; opacity: .7; }
.voice-orb .ring:nth-child(3) { inset: 48px; opacity: .45; }
.voice-orb .core {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(160deg, rgba(255,255,255,.22), rgba(201,145,84,.35) 55%, rgba(7,18,30,.9));
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 10px 30px rgba(0,0,0,.35),
    0 0 40px rgba(201,145,84,.25);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.voice-wave {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.voice-wave i {
  display: block;
  width: 3px;
  height: 6px;
  border-radius: 99px;
  background: rgba(247,244,235,.8);
  transform-origin: center bottom;
}
.voice-orb.speaking .ring { animation: orb-pulse 1.8s ease-out infinite; }
.voice-orb.speaking .ring:nth-child(2) { animation-delay: .2s; }
.voice-orb.speaking .ring:nth-child(3) { animation-delay: .4s; }
.voice-orb.speaking .core { animation: core-breathe 1.1s ease-in-out infinite; }
.voice-orb.speaking .voice-wave i {
  animation: voice-bar .7s ease-in-out infinite;
  animation-delay: calc(var(--i) * .05s);
}
@keyframes orb-pulse {
  0% { transform: scale(.92); opacity: .55; }
  100% { transform: scale(1.12); opacity: 0; }
}
@keyframes core-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.12); }
}
@keyframes voice-bar {
  0%, 100% { height: 5px; }
  50% { height: 18px; }
}
.voice-context {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.voice-chip {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.voice-chip span {
  display: block;
  color: rgba(247,244,235,.55);
  font: 700 9px var(--font-geist-mono), monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.voice-chip strong {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.voice-chip.is-missing strong { color: rgba(247,244,235,.48); font-weight: 500; }
.voice-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.voice-btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.42);
  background: linear-gradient(130deg, rgba(255,255,255,.2), rgba(215,228,239,.075) 52%, rgba(255,255,255,.13)), rgba(7,18,30,.55);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.voice-btn.quiet { background: transparent; font-weight: 600; }
.voice-script {
  margin: 0;
  padding: 28px 22px;
  max-height: 640px;
  overflow: auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 20px;
  background: rgba(5,9,15,.28);
  border: 1px solid rgba(255,255,255,.12);
}
.voice-line { opacity: 0; transform: translateY(8px); max-width: 92%; }
.voice-line.is-on { opacity: 1; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.voice-line span {
  display: block;
  margin-bottom: 6px;
  color: rgba(247,244,235,.5);
  font: 700 9px var(--font-geist-mono), monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.voice-line p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.015em;
}
.voice-line.is-desk { align-self: flex-start; }
.voice-line.is-caller { align-self: flex-end; text-align: right; }
.voice-line.is-desk p {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.voice-line.is-caller p {
  background: rgba(247,244,235,.92);
  color: #171916;
}
@media (max-width: 980px) {
  .try-grid { grid-template-columns: 1fr; }
  .voice-plate { grid-template-columns: 1fr; padding: 12px; }
  .voice-script { max-height: 420px; }
}
@media (max-width: 700px) {
  .try-stage { padding: 7px; }
  .try-night {
    min-height: calc(100svh - 14px);
    border-radius: 20px;
    padding: 36px 16px 28px;
    background-image: url('/lad-hero-mobile-v1.webp');
  }
  .try-heading { margin-bottom: 22px; }
  .try-heading h2 { font-size: 42px; }
  .try-review { padding: 18px 14px; border-radius: 20px; }
  .try-load, .try-error { min-height: 220px; border-radius: 20px; padding: 36px 16px; }
  .voice-plate { border-radius: 20px; }
  .voice-orb { width: 160px; height: 160px; }
  .voice-context { grid-template-columns: 1fr; }
  .voice-line { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .voice-orb.speaking .ring,
  .voice-orb.speaking .core,
  .voice-orb.speaking .voice-wave i { animation: none !important; }
}

/* night-bridge-20260827.css */
/* Keep the whiteboard checklist in frame. */
.night-bridge {
  height: clamp(520px, 50vw, 860px);
}
.night-bridge img {
  object-position: center 42%;
}

@media (max-width: 700px) {
  .night-bridge {
    height: 640px;
  }
  .night-bridge img {
    object-position: 62% 40%;
  }
}

/* price-try-20260828.css */
/* Price on home + Try it look. Do not restyle hero, menu, signin, portal, or voice. */

.price-section {
  padding: clamp(120px, 14vw, 200px) clamp(28px, 7vw, 110px);
  background: #fff;
  text-align: center;
}

.price-section .soft-pill {
  margin-bottom: 36px;
}

.price-section h2 {
  margin: 0;
  font-size: clamp(60px, 8.5vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.075em;
  font-weight: 430;
  white-space: nowrap;
}

.price-section h2 em {
  color: #a97135;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.36em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.04em;
}

.price-section p {
  max-width: 26rem;
  margin: 28px auto 0;
  color: #73746e;
  font-size: 16px;
  line-height: 1.55;
}

.try-page-nav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  pointer-events: none;
}

.try-page-nav > * {
  pointer-events: auto;
}

.try-back {
  min-height: 42px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
}

.try-night.is-listening {
  padding: 24px 24px 36px;
  background-position: center center;
}

.try-night.is-listening::before {
  background: linear-gradient(180deg, rgba(7, 16, 27, 0.12), rgba(7, 16, 27, 0.28) 48%, rgba(7, 16, 27, 0.5));
}

.try-night.is-listening .try-panel {
  position: static;
  max-width: none;
  min-height: 0;
}

.voice-float {
  position: absolute;
  z-index: 2;
  top: clamp(196px, 30vh, 258px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}

.voice-ask {
  margin: 0 0 18px;
  color: #f7f4eb;
  font-size: clamp(18px, 2.1vw, 24px);
  font-weight: 470;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 7px 28px rgba(0, 4, 13, 0.38),
    0 25px 60px rgba(0, 4, 13, 0.22);
}

.voice-ask em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.04em;
}

.voice-float .voice-orb {
  width: 148px;
  height: 148px;
  margin: 0;
}

.voice-float .voice-orb .core {
  width: 68px;
  height: 68px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.62), transparent 34%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(201, 145, 84, 0.28) 55%, rgba(7, 18, 30, 0.42));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
}

.voice-caption {
  width: min(21.5rem, 38vw);
  min-height: 4.05em;
  margin: 22px 0 0;
  color: #f7f4eb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 2vw, 20px);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 14px rgba(0, 4, 13, 0.5);
}

.voice-caption.is-in {
  animation: caption-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.voice-caption.is-out {
  animation: caption-out 0.48s ease both;
}

@keyframes caption-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes caption-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
  to {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(-8px);
  }
}

.hire-lad {
  position: absolute;
  z-index: 3;
  bottom: clamp(118px, 16vh, 156px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transform: translateX(-50%) perspective(700px) rotateX(2deg);
  animation: sidewalk-float 7s ease-in-out 1.1s infinite;
}

@media (max-width: 700px) {
  .price-section {
    padding: 110px 22px;
  }

  .price-section h2 {
    font-size: 59px;
  }

  .voice-float {
    top: clamp(152px, 23vh, 196px);
  }

  .voice-float .voice-orb {
    width: 132px;
    height: 132px;
  }

  .voice-float .voice-orb .core {
    width: 58px;
    height: 58px;
  }

  .voice-caption {
    width: min(17rem, calc(100vw - 64px));
    font-size: 16px;
  }

  .hire-lad {
    bottom: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-caption.is-in,
  .voice-caption.is-out,
  .hire-lad {
    animation: none !important;
    opacity: 1;
    filter: none;
    transform: translateX(-50%);
  }
}

/* roles-20260828e.css */
/* Roles band, Get started, tighter price/FAQ, night sign-in.
   Do not restyle hero, H1, paste bar, or Try it. */

.price-section {
  padding: 72px clamp(28px, 7vw, 110px) 28px;
  background: #fff;
  text-align: center;
}

.price-section .soft-pill { margin-bottom: 36px; }
.price-section h2 {
  margin: 0;
  font-size: clamp(60px, 8.5vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.075em;
  font-weight: 430;
  white-space: nowrap;
}
.price-section h2 em {
  color: #a97135;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.36em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.04em;
}
.price-section p {
  max-width: 26rem;
  margin: 28px auto 0;
  color: #73746e;
  font-size: 16px;
  line-height: 1.55;
}
@media (max-width: 700px) {
  .price-section h2 { font-size: 59px; }
}


.get-started {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  min-height: 52px;
  margin: 28px auto 0;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 20px;
  background: rgba(246, 250, 252, 0.77);
  color: #14202a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(20, 32, 42, 0.1),
    0 6px 18px rgba(0, 5, 14, 0.14);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.get-started:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(20, 32, 42, 0.12),
    0 10px 24px rgba(0, 5, 14, 0.16);
}

.get-started:active {
  transform: scale(0.96);
}

.roles-section {
  margin: 12px 12px 0;
  padding: 56px clamp(22px, 6vw, 96px) 64px;
  border-radius: 27px;
  background: #07101b;
  color: #f5f0e7;
}

.roles-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.roles-section h2 {
  max-width: 10ch;
  margin: 0 0 40px;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 430;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.roles-stage {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: center;
}

.roles-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  align-self: center;
}

.roles-pill {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 0;
  height: 56px;
  border-radius: 16px;
  background: rgba(246, 250, 252, 0.92);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 28px rgba(0, 4, 13, 0.22);
  transform: translateY(0);
  transition: transform 0.36s ease-out, height 0.36s ease-out;
  pointer-events: none;
}

.roles-rail button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: rgba(245, 240, 231, 0.58);
  text-align: left;
  font: inherit;
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 520;
  letter-spacing: -0.03em;
  line-height: 1.15;
  cursor: pointer;
  transition: color 0.36s ease-out;
}

.roles-rail button.is-active {
  color: #141820;
}

.roles-rail button:focus-visible {
  outline: 2px solid rgba(246, 250, 252, 0.7);
  outline-offset: 3px;
}

.roles-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: rgba(7, 18, 30, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 24px 60px rgba(0, 4, 13, 0.28);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.roles-card-inner {
  display: grid;
  grid-template-columns: minmax(15rem, 0.84fr) minmax(0, 1.16fr);
  gap: 22px 32px;
  align-items: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.36s ease-out, transform 0.36s ease-out;
}

.roles-card-inner.is-leave {
  opacity: 0;
  transform: translateY(14px);
}

.roles-card-inner.is-enter {
  opacity: 0;
  transform: translateY(-16px);
  transition: none;
}

.roles-card-inner > p {
  margin: 0;
  max-width: 22rem;
  color: rgba(245, 240, 231, 0.86);
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 430;
  line-height: 1.38;
  letter-spacing: -0.025em;
}

.role-visual {
  position: relative;
  overflow: hidden;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(4, 10, 18, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.role-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

.role-visual--dispatch {
  overflow: hidden;
}

.role-phone {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(7, 18, 30, 0.82);
  color: #6ee7a8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 6px rgba(110, 231, 168, 0.12),
    0 10px 28px rgba(0, 4, 13, 0.42),
    0 0 22px rgba(80, 210, 140, 0.28);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transform: translateY(-50%);
  pointer-events: none;
}

.role-phone svg {
  display: block;
  width: 22px;
  height: 22px;
}

.role-phone::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6ee7a8;
  box-shadow: 0 0 0 3px rgba(110, 231, 168, 0.28);
  animation: role-phone-live 2.4s ease-in-out infinite;
}

@keyframes role-phone-live {
  0%, 100% { box-shadow: 0 0 0 3px rgba(110, 231, 168, 0.28); }
  50% { box-shadow: 0 0 0 7px rgba(110, 231, 168, 0.05); }
}

.role-cal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 220px;
  min-height: 0;
  padding: 12px 14px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 38%),
    rgba(4, 10, 18, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.role-cal header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
  margin-bottom: 6px;
}

.role-cal header strong {
  color: #f7f4eb;
  font-size: 16px;
  font-weight: 430;
  letter-spacing: -0.04em;
}

.role-cal header span {
  color: #d8a05f;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.role-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: 14px repeat(5, minmax(0, 1fr));
  gap: 2px 2px;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.role-cal-grid b {
  padding: 0;
  color: rgba(245, 240, 231, 0.38);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 14px;
  text-align: center;
  text-transform: uppercase;
}

.role-cal-grid i {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  color: rgba(245, 240, 231, 0.78);
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.role-cal-grid i.is-booked {
  border-radius: 8px;
  background: rgba(246, 250, 252, 0.92);
  color: #141820;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff;
}

.faq-section {
  padding: 48px clamp(28px, 7vw, 110px) clamp(80px, 10vw, 140px);
}

@media (max-width: 1100px) {
  .roles-card-inner {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  .role-visual,
  .role-cal {
    height: 200px;
  }
}

@media (max-width: 860px) {
  .price-section {
    padding: 56px 22px 24px;
  }

  .roles-section {
    margin: 8px 8px 0;
    padding: 40px 18px 36px;
    border-radius: 22px;
  }

  .roles-section h2 {
    max-width: none;
    margin-bottom: 22px;
    font-size: 32px;
  }

  .roles-stage {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .roles-rail {
    display: contents;
  }

  .roles-pill {
    display: none;
  }

  .roles-rail button {
    order: 1;
    width: 100%;
    min-height: 52px;
    padding: 16px 18px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(245, 240, 231, 0.72);
  }

  .roles-rail button[data-role="0"] { order: 1; }
  .roles-rail button[data-role="1"] { order: 3; }
  .roles-rail button[data-role="2"] { order: 5; }

  .roles-rail button.is-active {
    background: rgba(246, 250, 252, 0.92);
    color: #141820;
    box-shadow: inset 0 1px 0 #fff;
  }

  .roles-card {
    order: 2;
    min-height: 0;
    padding: 18px 16px 16px;
  }

  .roles-stage[data-active="0"] .roles-card { order: 2; }
  .roles-stage[data-active="1"] .roles-card { order: 4; }
  .roles-stage[data-active="2"] .roles-card { order: 6; }

  .roles-card-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 12px;
    align-items: start;
  }

  .role-visual,
  .role-cal {
    height: 168px;
    min-height: 0;
  }

  .faq-section {
    padding: 36px 22px 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roles-pill,
  .roles-rail button,
  .roles-card-inner,
  .get-started,
  .role-phone::after {
    transition: none !important;
    animation: none !important;
  }

  .roles-card-inner.is-leave,
  .roles-card-inner.is-enter {
    opacity: 1;
    transform: none;
  }
}

/* Night sign-in — homepage photo + night-glass Google. */
.signin-page {
  background-color: #07101b;
  background-image:
    linear-gradient(180deg, rgba(7, 16, 27, 0.22) 0%, rgba(7, 16, 27, 0.4) 48%, rgba(7, 16, 27, 0.58) 100%),
    url("/lad-hero-desktop-extended-v1.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.signin-page .auth-brand {
  color: #f5f0e7;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.signin-page .auth-brand img {
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.32));
}

.signin-page .google-signin {
  min-width: 248px;
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  background: rgba(7, 18, 30, 0.62);
  color: #f5f0e7;
  font-family: inherit;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 36px rgba(0, 7, 18, 0.32);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.signin-page .google-signin:hover {
  transform: translateY(-2px);
  background: rgba(10, 22, 36, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 40px rgba(0, 7, 18, 0.38);
}

@media (max-width: 700px) {
  .signin-page {
    background-image:
      linear-gradient(180deg, rgba(7, 16, 27, 0.22) 0%, rgba(7, 16, 27, 0.42) 50%, rgba(7, 16, 27, 0.6) 100%),
      url("/lad-hero-mobile-v1.webp");
  }

  .get-started {
    min-width: 132px;
    min-height: 48px;
    border-radius: 17px;
  }
}

/* price-compare-20260828.css */
/* Home price board + Try a demo buttons. Last in the stack. */

.fixa-try-form button,
.closing-form button {
  min-width: 132px;
  padding: 0 18px;
  white-space: nowrap;
}

.price-section {
  padding: 88px clamp(28px, 7vw, 110px) 64px;
}

.price-board {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  gap: clamp(32px, 4.5vw, 64px) clamp(36px, 6vw, 80px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  text-align: left;
}

.price-offer {
  min-width: 0;
}

.price-section .price-kicker {
  max-width: none;
  margin: 0 0 8px;
  color: #a97135;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3.06vw, 46px);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
}

.price-section h2 {
  margin: 0;
}

.cost-compare {
  margin: 0;
  min-width: 0;
}

.cost-row--lad {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cost-row--hire {
  margin-top: 14px;
}

.price-section .cost-label {
  max-width: none;
  margin: 0;
  color: #191a17;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.cost-track {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 3px;
  background: transparent;
}

.cost-row--lad .cost-track {
  width: 18px;
  height: 10px;
}

.cost-row--hire .cost-track,
.cost-track--hire {
  display: flex;
  align-items: center;
  width: 100%;
  height: 58px;
  border-radius: 7px;
  background: #efefed;
}

.cost-track--hire .cost-label {
  position: relative;
  z-index: 1;
  color: #f4efe5;
  font-size: 13px;
  font-weight: 600;
  padding: 0 16px;
}

.cost-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  animation: cost-bar-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cost-bar--lad {
  width: 100%;
  background: #a97135;
}

.cost-bar--hire {
  position: absolute;
  inset: 0;
  width: 100%;
  background: #11120f;
  animation-delay: 0.12s;
  animation-duration: 1.35s;
}

.price-section .cost-note {
  max-width: none;
  margin: 12px 0 0;
  color: #8a8b85;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.price-section .price-foot {
  max-width: 26rem;
  margin: 36px auto 0;
}

@keyframes cost-bar-in {
  from {
    transform: scaleX(0.04);
    opacity: 0.35;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .price-board {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }

  .price-section .price-kicker,
  .price-section .cost-note {
    text-align: center;
  }

  .cost-row--lad {
    justify-content: center;
  }

  .cost-row--hire .cost-track {
    height: 56px;
  }
}

@media (max-width: 700px) {
  .price-section {
    padding: 72px 22px 48px;
  }

  .price-section .cost-label {
    font-size: 12px;
  }

  .cost-track--hire .cost-label {
    font-size: 11px;
    padding: 0 10px;
  }

  .fixa-try-form button,
  .closing-form button {
    min-width: 120px;
    padding: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cost-bar {
    animation: none;
  }
}

/* polish-20260830.css */
/* LAD visual polish — 30 Aug 2026.
   Loaded last so the changes stay isolated from the established 28b visual system. */

/* Demo chrome */
.try-back {
  min-width: 74px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 16px;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.42);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.2), rgba(215, 228, 239, 0.075) 52%, rgba(255, 255, 255, 0.13)),
    rgba(7, 18, 30, 0.78);
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 4, 11, 0.28);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.try-back:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.try-back:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

/* Price comparison */
.price-board {
  grid-template-columns: minmax(330px, 0.85fr) minmax(420px, 1.15fr);
  align-items: center;
}

.price-offer {
  width: fit-content;
  justify-self: start;
}

.price-section h2 {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.4vw, 18px);
}

.price-amount {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.72;
}

.price-inline-kicker {
  display: block;
  margin: 0 0 clamp(16px, 1.5vw, 22px);
  color: #a97135;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 400;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.04em;
}

.price-section h2 em {
  padding-bottom: 0.08em;
}

.cost-compare {
  width: 100%;
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid #deddd6;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 239, 237, 0.72));
  box-shadow:
    inset 0 1px 0 #fff,
    5px 6px 0 rgba(31, 34, 30, 0.05),
    16px 22px 45px rgba(31, 34, 30, 0.08);
}

.cost-row--lad {
  display: block;
}

.cost-row--hire {
  margin-top: 26px;
}

.cost-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.cost-meta span {
  color: #696a64;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.cost-meta strong {
  color: #171916;
  font-size: 13px;
  font-weight: 720;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.cost-track,
.cost-row--lad .cost-track,
.cost-row--hire .cost-track,
.cost-track--hire {
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: #dcddd8;
  box-shadow: inset 0 1px 3px rgba(17, 18, 15, 0.1);
}

.cost-bar {
  height: 100%;
  border-radius: inherit;
}

.cost-bar--lad {
  /* $199 / $12,168, scaled to the 80% employee bar */
  width: 1.31%;
  min-width: 10px;
  background: linear-gradient(90deg, #9e6933, #c58b4c);
  box-shadow: 0 0 16px rgba(169, 113, 53, 0.32);
}

.cost-bar--hire {
  position: static;
  width: 80%;
  background: linear-gradient(90deg, #20231f, #0f110e);
}

.price-section .cost-note {
  max-width: none;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid #d9d8d1;
  color: #73746e;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
}

.price-section .cost-note span {
  display: block;
  margin-top: 4px;
  color: #999a94;
}

/* Jobs LAD can do */
.roles-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(68px, 7vw, 96px);
  padding-bottom: clamp(72px, 8vw, 108px);
  background:
    radial-gradient(circle at 86% 16%, rgba(105, 151, 190, 0.16), transparent 29%),
    radial-gradient(circle at 12% 88%, rgba(201, 145, 84, 0.13), transparent 28%),
    #07101b;
}

.roles-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.48;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.3px),
    radial-gradient(circle at 34% 9%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1.3px),
    radial-gradient(circle at 67% 23%, rgba(255, 255, 255, 0.38) 0 1px, transparent 1.3px),
    radial-gradient(circle at 91% 62%, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.3px);
}

.roles-inner {
  position: relative;
  z-index: 1;
}

.roles-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 42px;
  align-items: end;
  margin-bottom: clamp(42px, 5vw, 64px);
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.roles-eyebrow {
  display: block;
  margin-bottom: 13px;
  color: #d39a5b;
  font: 700 10px var(--font-geist-mono), monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.roles-section .roles-heading h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 68px);
}

.roles-heading > p {
  max-width: 25rem;
  margin: 0 0 4px;
  color: rgba(245, 240, 231, 0.64);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.025em;
}

.roles-stage {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
}

.roles-rail {
  align-self: stretch;
  justify-content: center;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
}

.roles-pill {
  left: 6px;
  right: 6px;
  border-radius: 17px;
  background: linear-gradient(145deg, #fbfbf8, #e9e9e4);
}

.roles-rail button {
  min-height: 76px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 12px;
  align-content: center;
  padding: 14px 18px;
}

.roles-rail button > span {
  grid-row: 1 / span 2;
  align-self: center;
  color: #c58b4c;
  font: 700 9px var(--font-geist-mono), monospace;
  letter-spacing: 0.1em;
}

.roles-rail button > strong {
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 590;
}

.roles-rail button > small {
  color: rgba(245, 240, 231, 0.42);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.roles-rail button.is-active > small {
  color: #71736d;
}

.roles-card {
  min-height: 360px;
  padding: clamp(28px, 3.2vw, 42px);
  border-color: rgba(255, 255, 255, 0.17);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(5, 12, 21, 0.66);
}

.roles-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 160, 95, 0.72), transparent);
}

.roles-card-inner {
  grid-template-columns: minmax(16rem, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(28px, 4vw, 54px);
  min-height: 276px;
}

.role-copy {
  min-width: 0;
}

.role-kicker {
  display: block;
  margin-bottom: 16px;
  color: #d8a05f;
  font: 700 10px var(--font-geist-mono), monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.roles-card-inner .role-copy > p {
  max-width: 24rem;
  margin: 0;
  color: #f4efe5;
  font-size: clamp(22px, 2.25vw, 32px);
  font-weight: 430;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.role-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 22rem;
  margin-top: 25px;
  color: rgba(245, 240, 231, 0.58);
  font-size: 12px;
  line-height: 1.4;
}

.role-proof i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #69d99f;
  box-shadow: 0 0 0 5px rgba(105, 217, 159, 0.1), 0 0 18px rgba(105, 217, 159, 0.32);
}

.role-visual,
.role-cal {
  height: 276px;
  border-radius: 20px;
}

.role-visual img {
  border-radius: 20px;
}

/* Portal setup (role rows in the wizard's More drawer) */
.role-picker-intro {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #d3d2cb;
}

.role-picker-intro .portal-eyebrow {
  margin-bottom: 8px;
}

.role-picker-intro h2 {
  margin: 0;
  color: #22241f;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 480;
  line-height: 1;
  letter-spacing: -0.05em;
}

.role-picker-intro > p {
  max-width: 34rem;
  margin: 0;
  color: #73746e;
  font-size: 14px;
  line-height: 1.55;
}

.more-body .role-grid {
  gap: 12px;
}

.more-body .role-grid > .role-row {
  grid-template-columns: minmax(12.5rem, 14rem) minmax(0, 1fr);
  gap: 10px 32px;
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 #fff, 3px 4px 0 rgba(42, 46, 45, 0.04);
}

.more-body .role-grid > .role-row.selected {
  background:
    radial-gradient(circle at 92% 10%, rgba(201, 145, 84, 0.13), transparent 34%),
    #20231f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    4px 5px 0 rgba(18, 21, 18, 0.16),
    14px 20px 34px rgba(18, 21, 18, 0.11);
}

.role-row-head {
  grid-template-columns: 28px minmax(0, 1fr) auto 28px;
}

.role-row-head strong {
  color: inherit;
  font-size: 16px;
  letter-spacing: -0.025em;
}

.role-tag {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #e8e7e1;
  color: #777972;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.more-body .role-grid > .role-row.selected .role-tag {
  background: rgba(216, 160, 95, 0.14);
  color: #e0ac70;
}

.role-row-copy {
  padding-top: 6px;
}

.role-row-copy b {
  margin-bottom: 12px;
  font-size: 15px;
}

.role-row-copy li {
  font-size: 13px;
  line-height: 1.5;
}

.role-row-copy li + li {
  margin-top: 7px;
}

.coverage-toggle {
  margin-bottom: 12px;
}

.coverage-hint {
  margin-bottom: 13px;
}

@media (max-width: 980px) {
  .price-board {
    grid-template-columns: 1fr;
    gap: 42px;
    text-align: center;
  }

  .price-offer {
    justify-self: center;
  }

  .cost-compare {
    max-width: 680px;
    margin: 0 auto;
  }

  .roles-heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .roles-heading > p {
    max-width: 34rem;
  }
}

@media (max-width: 860px) {
  .roles-section {
    padding: 48px 18px 42px;
  }

  .roles-section .roles-heading h2 {
    font-size: 38px;
  }

  .roles-stage {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 10px;
  }

  .roles-rail button {
    min-height: 64px;
  }

  .roles-card {
    min-height: 0;
    overflow: visible;
    padding: 22px 18px 18px;
  }

  .roles-card-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 16px;
  }

  .roles-card-inner .role-copy > p {
    font-size: 22px;
  }

  .role-visual,
  .role-cal {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 180px;
    aspect-ratio: 16 / 9;
  }

  .role-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .role-picker-intro {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .more-body .role-grid > .role-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 17px;
  }

  .role-row-copy {
    padding-left: 36px;
  }
}

@media (max-width: 700px) {
  .try-back {
    min-width: 66px;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 14px;
  }

  .price-section h2 {
    gap: 8px;
  }

  .price-inline-kicker {
    margin-bottom: 13px;
    font-size: 18px;
  }

  .price-section h2 em {
    padding-bottom: 0.04em;
  }

  .cost-compare {
    padding: 20px 17px;
    border-radius: 20px;
  }

  .cost-meta {
    gap: 12px;
  }

  .cost-meta span,
  .cost-meta strong {
    font-size: 11px;
  }

  .cost-track,
  .cost-row--lad .cost-track,
  .cost-row--hire .cost-track,
  .cost-track--hire {
    height: 20px;
  }

  .price-section .cost-note {
    text-align: center;
  }

  .roles-heading {
    margin-bottom: 26px;
    padding-bottom: 22px;
  }

  .roles-eyebrow {
    margin-bottom: 10px;
  }

  .roles-heading > p {
    font-size: 15px;
  }

  .roles-rail button {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .roles-card-inner .role-copy > p {
    font-size: 20px;
  }

  .role-proof {
    margin-top: 18px;
    font-size: 11px;
  }

  .role-picker-intro h2 {
    font-size: 30px;
  }

  .role-row-head {
    grid-template-columns: 26px minmax(0, 1fr) auto 27px;
    gap: 6px;
  }

  .role-tag {
    padding: 0 7px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .try-back,
  .cost-bar {
    transition: none !important;
    animation: none !important;
  }
}


/* Phones: keep the roles photo in the card. The desktop two-column
   inner grid was still winning and clipping the image off-screen. */
@media (max-width: 860px) {
  .roles-card-inner {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .role-copy,
  .role-visual,
  .role-cal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .role-visual,
  .role-cal {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* mobile-fix-20260830c.css */
/* Cache-busted 30 Aug 2026c. Loaded last so phones drop the cached polish sheet. */

.price-section .cost-bar--lad {
  width: 1.31%;
}

.price-section .cost-bar--hire {
  width: 80%;
}

@media (max-width: 860px) {
  .roles-section .roles-card {
    overflow: visible;
  }

  .roles-section .roles-card-inner {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
    gap: 16px;
    min-height: 0;
  }

  .roles-section .role-copy {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .roles-section .role-visual,
  .roles-section .role-cal {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 180px;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
  }

  .roles-section .role-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* polish-20260830d.css */
/* 30 Aug 2026d — calendar density, night chrome to the screen edge, setup bullets. */

/* Scheduler calendar: size to the dates, even rows. Do not inherit the photo 16:9 box. */
@media (max-width: 860px) {
  .roles-section .role-cal {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    padding: 14px 14px 12px;
  }

  .roles-section .role-cal-grid {
    flex: 0 0 auto;
    grid-template-rows: 16px repeat(5, 28px);
    gap: 4px 2px;
  }
}

/* Kill the paper strip under sign-in and portal on iOS (100svh < visible height). */
html:has(.signin-page),
body:has(.signin-page) {
  background: #07101b;
  min-height: 100%;
  min-height: 100dvh;
}

html:has(.portal-page),
body:has(.portal-page) {
  background: #05090f;
  min-height: 100%;
  min-height: 100dvh;
}

.signin-page,
.portal-page {
  min-height: 100svh;
  min-height: 100dvh;
}

.signin-page {
  background-color: #07101b;
  background-position: center;
  background-size: cover;
}

/* Setup bullets: more room on the right so lines don't run to the card edge. */
.more-body .role-row-copy {
  padding-right: 18px;
}

@media (max-width: 860px) {
  .more-body .role-grid > .role-row {
    padding: 17px 26px 17px 17px;
  }

  .more-body .role-row-copy {
    padding-left: 36px;
    padding-right: 20px;
  }
}

.portal-actions p.is-error {
  color: #b42318;
}

.shop-review {
  margin: 0 0 48px;
}

.shop-review-empty {
  margin: 0 0 18px;
  color: #8a6a3a;
  font-size: 14px;
}

.shop-review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 18px;
}

.shop-review .portal-field input,
.shop-review .portal-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #c9c8c1;
  border-radius: 16px;
  outline: 0;
  background: rgba(255, 255, 255, 0.66);
  color: #1f211d;
  font: inherit;
  box-shadow: inset 0 1px 0 #fff, 4px 5px 0 rgba(42, 46, 45, 0.06);
}

.shop-review .portal-field textarea {
  min-height: 96px;
  padding: 14px 16px;
  resize: vertical;
}

@media (max-width: 700px) {
  .shop-review-grid {
    grid-template-columns: 1fr;
  }
}

/* touch-20260903.css */
/* 3 Sep 2026 — touch targets and small-screen fixes on the public pages. */

/* Header menu links reach 44px on every width. */
.hero-menu a { min-height: 44px; }

/* Footer links: keep the underline text, grow the hit area to 44px. */
.footer-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -12px -6px;
  padding: 0 6px;
}

/* Phone pacing: the home page is nine screens tall. Keep the design, trim the dead air. */
@media (max-width: 700px) {
  .calm-strip { min-height: 560px; }
  .step-cards li { min-height: 300px; padding-top: 40px; padding-bottom: 40px; }
}

/* concierge-demo-20260904.css */
/* 4 Sep 2026 — one clean phone-first product concierge. */

.concierge-night {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px clamp(24px, 4vw, 58px) 30px;
  background-position: center 44%;
}

.concierge-night::before {
  background:
    radial-gradient(circle at 72% 40%, rgba(127, 177, 210, 0.15), transparent 30%),
    linear-gradient(112deg, rgba(4, 11, 20, 0.8), rgba(7, 16, 27, 0.48) 52%, rgba(5, 13, 22, 0.78));
}

.concierge-layout,
.concierge-after {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin-inline: auto;
}

.concierge-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.72fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
  padding: clamp(34px, 7vh, 76px) 0 24px;
}

.concierge-intro {
  max-width: 670px;
}

.concierge-intro h1 {
  margin: 0;
  color: #f8f5ec;
  font-size: clamp(62px, 7.2vw, 108px);
  font-weight: 440;
  line-height: 0.84;
  letter-spacing: -0.078em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 20px 60px rgba(0, 4, 13, 0.35);
}

.concierge-intro h1 em {
  display: inline-block;
  margin-top: 0.06em;
  color: #e9dfcd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.66em;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.055em;
}

.concierge-lede {
  max-width: 560px;
  margin: 28px 0 0;
  color: rgba(247, 244, 235, 0.78);
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.025em;
}

.concierge-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 620px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.concierge-prompts li {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 999px;
  background: rgba(8, 18, 30, 0.38);
  color: rgba(247, 244, 235, 0.78);
  font-size: 12px;
  font-weight: 620;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.concierge-card {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(210, 225, 236, 0.05) 52%, rgba(255, 255, 255, 0.1)),
    rgba(5, 14, 24, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 34px 78px rgba(0, 5, 14, 0.38);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}

.concierge-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.12), transparent 34%, transparent 72%, rgba(199, 143, 80, 0.08));
  pointer-events: none;
}

.concierge-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(247, 244, 235, 0.55);
  font: 650 10px var(--font-geist-mono), monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.concierge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(247, 244, 235, 0.78);
}

.concierge-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9a263;
  box-shadow: 0 0 0 4px rgba(217, 162, 99, 0.12), 0 0 16px rgba(217, 162, 99, 0.65);
}

.concierge-card[data-state="ready"] .concierge-live i {
  background: #99d6ad;
  box-shadow: 0 0 0 4px rgba(153, 214, 173, 0.12), 0 0 16px rgba(153, 214, 173, 0.55);
}

.concierge-phone-mark {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  margin: 46px auto 28px;
}

.concierge-phone-mark i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(226, 167, 96, 0.25);
  border-radius: 50%;
  animation: concierge-ring 3.6s ease-out infinite;
}

.concierge-phone-mark i:nth-child(2) { animation-delay: 1.2s; }
.concierge-phone-mark i:nth-child(3) { animation-delay: 2.4s; }

.concierge-phone-core {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), transparent 36%),
    linear-gradient(150deg, rgba(226, 167, 96, 0.5), rgba(32, 60, 78, 0.58));
  color: #fff8ed;
  font: 720 13px var(--font-geist-mono), monospace;
  letter-spacing: 0.09em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 18px 40px rgba(0, 4, 12, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

@keyframes concierge-ring {
  0% { opacity: 0.72; transform: scale(0.66); }
  76%, 100% { opacity: 0; transform: scale(1.14); }
}

.concierge-ready,
.concierge-unavailable {
  text-align: center;
}

.concierge-card-kicker {
  margin: 0 0 9px;
  color: rgba(247, 244, 235, 0.58);
  font-size: 12px;
}

.concierge-ready h2,
.concierge-unavailable h2 {
  margin: 0;
  color: #f8f5ec;
  font-size: 32px;
  font-weight: 480;
  letter-spacing: -0.055em;
}

.concierge-unavailable > p:not(.concierge-card-kicker) {
  max-width: 290px;
  margin: 14px auto 0;
  color: rgba(247, 244, 235, 0.67);
  font-size: 14px;
  line-height: 1.5;
}

.concierge-call {
  display: none;
}

.concierge-desktop-call {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 26px 0 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background: rgba(1, 8, 15, 0.28);
  text-align: left;
}

.concierge-qr-frame {
  overflow: hidden;
  padding: 7px;
  border-radius: 15px;
  background: #fff;
}

.concierge-qr-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.concierge-desktop-call span,
.concierge-desktop-call strong {
  display: block;
}

.concierge-desktop-call span {
  margin-bottom: 5px;
  color: rgba(247, 244, 235, 0.54);
  font-size: 11px;
}

.concierge-desktop-call strong {
  color: #fff;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.concierge-desktop-call button {
  min-height: 34px;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e2ad6e;
  cursor: pointer;
  font: 700 11px var(--font-geist), sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.concierge-privacy {
  max-width: 330px;
  margin: 17px auto 0;
  color: rgba(247, 244, 235, 0.48);
  font-size: 11px;
  line-height: 1.5;
}

.concierge-email {
  display: block;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(226, 167, 96, 0.22);
  border-radius: 17px;
  background: rgba(226, 167, 96, 0.08);
  color: #f8f5ec;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.concierge-email:hover {
  border-color: rgba(226, 167, 96, 0.42);
  background: rgba(226, 167, 96, 0.12);
  transform: translateY(-1px);
}

.concierge-email span,
.concierge-email strong {
  display: block;
}

.concierge-email span {
  color: rgba(247, 244, 235, 0.56);
  font-size: 11px;
}

.concierge-email strong {
  margin-top: 3px;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.concierge-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: rgba(247, 244, 235, 0.54);
  font-size: 11px;
  text-align: center;
}
.concierge-status:empty {
  display: none;
}

.concierge-after {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.concierge-after h2 {
  margin: 0;
  color: #f8f5ec;
  font-size: clamp(23px, 2.3vw, 32px);
  font-weight: 480;
  letter-spacing: -0.045em;
}

.concierge-after p:not(.try-kicker) {
  margin: 6px 0 0;
  color: rgba(247, 244, 235, 0.58);
  font-size: 12px;
}

.concierge-setup {
  flex: 0 0 auto;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  background: rgba(248, 248, 244, 0.9);
  color: #111923;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(0, 4, 12, 0.24);
}

.concierge-setup span {
  transition: transform 0.2s ease;
}

.concierge-setup:hover span { transform: translateX(3px); }

@media (max-width: 900px) {
  .concierge-layout {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.82fr);
    gap: 34px;
  }
  .concierge-intro h1 { font-size: clamp(58px, 8vw, 78px); }
}

@media (max-width: 700px) {
  .concierge-stage { padding: 7px; }
  .concierge-night {
    min-height: calc(100svh - 14px);
    gap: 20px;
    padding: 15px 15px 22px;
    border-radius: 20px;
    background-image: url('/lad-hero-mobile-v1.webp');
    background-position: center center;
  }
  .concierge-night .try-page-nav {
    min-height: 54px;
  }
  .concierge-layout {
    display: block;
    padding: 32px 0 0;
  }
  .concierge-intro {
    padding: 0 7px;
    text-align: center;
  }
  .concierge-intro h1 {
    font-size: clamp(49px, 14.2vw, 66px);
    line-height: 0.88;
  }
  .concierge-intro h1 em {
    max-width: 340px;
    font-size: 0.59em;
    line-height: 1.02;
  }
  .concierge-lede {
    max-width: 360px;
    margin: 20px auto 0;
    font-size: 16px;
  }
  .concierge-prompts {
    justify-content: center;
    margin: 22px auto 0;
  }
  .concierge-prompts li:nth-child(n+4) { display: none; }
  .concierge-card {
    min-height: 0;
    margin-top: 28px;
    padding: 17px;
    border-radius: 25px;
  }
  .concierge-phone-mark {
    width: 92px;
    height: 92px;
    margin: 26px auto 20px;
  }
  .concierge-phone-core {
    width: 64px;
    height: 64px;
  }
  .concierge-ready h2,
  .concierge-unavailable h2 {
    font-size: 28px;
  }
  .concierge-call {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 19px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(231, 239, 244, 0.86));
    color: #0d1721;
    text-decoration: none;
    box-shadow: inset 0 1px 0 #fff, 0 16px 34px rgba(0, 5, 14, 0.28);
  }
  .concierge-call-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #182939;
    color: #fff;
    font-size: 16px;
  }
  .concierge-call small,
  .concierge-call strong {
    display: block;
    text-align: left;
  }
  .concierge-call small {
    font-size: 11px;
    font-weight: 750;
  }
  .concierge-call strong {
    margin-top: 2px;
    color: #66717a;
    font-size: 12px;
    font-weight: 620;
  }
  .concierge-desktop-call { display: none; }
  .concierge-privacy { margin-top: 13px; }
  .concierge-email {
    margin-top: 15px;
    padding: 12px;
  }
  .concierge-after {
    display: block;
    margin-top: 20px;
    padding: 20px 7px 4px;
    text-align: center;
  }
  .concierge-after p:not(.try-kicker) {
    max-width: 330px;
    margin: 7px auto 0;
  }
  .concierge-setup {
    width: 100%;
    justify-content: center;
    margin-top: 17px;
  }
}

@media (max-width: 380px) {
  .concierge-intro h1 { font-size: 47px; }
  .concierge-prompts li { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .concierge-phone-mark i { animation: none; opacity: 0.35; }
  .concierge-email,
  .concierge-setup span { transition: none; }
}

/* owner-experience-20260904.css */
/* Owner experience (homepage): How it works cards and the demo CTA. Portal rules moved to portal-wizard-20260910.css. */
.how { padding-block: clamp(76px, 9vw, 130px); padding-inline: clamp(24px, 4.5vw, 110px); }
.how-heading { border: 0; padding-bottom: 40px; }
.how .step-cards { gap: 18px; max-width: 1280px; margin-inline: auto; }
.how .step-cards li { min-height: 300px; padding: 26px; align-items: center; justify-content: flex-start; gap: 28px; text-align: center; border: 1px solid #d7d5cd; border-radius: 24px; background: #f3f1ea; box-shadow: inset 0 1px 0 #fff, 0 10px 26px #22281c06; }
.how .step-cards li > div { min-width: 0; max-width: 100%; width: 100%; margin-top: auto; text-align: center; }
.how .card-icon { width: 58px; height: 58px; border: 1px solid #d7d5cd; border-radius: 17px; background: #ffffff80; }
.how .clipboard-icon { font-size: 31px; }
.how .card-icon img { width: 40px; height: 40px; object-fit: contain; }
.how .step-cards div > span { display: block; margin-bottom: 12px; color: #826138; font-size: 11px; text-align: center; }
.how .step-cards h3 { max-width: none; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -.045em; text-align: center; }
.how .step-cards p { max-width: none; margin-top: 10px; color: #595d53; font-size: clamp(13px, 1.3vw, 15px); line-height: 1.45; text-align: center; }
@media (max-width: 980px) {
  .how .step-cards { grid-template-columns: 1fr; gap: 12px; }
  .how .step-cards li { min-height: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; padding: 24px; }
  .how .step-cards li > div { margin-top: 0; }
  .how .step-cards h3 { font-size: 27px; }
  .how .step-cards p { font-size: 15px; }
}
@media (max-width: 540px) {
  .how-heading h2 { font-size: 48px; }
  .how .step-cards li { padding: 21px 18px; gap: 14px; grid-template-columns: 44px minmax(0, 1fr); }
  .how .card-icon { width: 44px; height: 44px; border-radius: 13px; }
  .how .card-icon img { width: 30px; height: 30px; }
  .how .clipboard-icon { font-size: 26px; }
  .how .step-cards h3 { font-size: 27px; }
}
/* Single-action demo entry; no website input or surrounding form bar. */
.demo-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 18px 30px; border: 1px solid #ffffff70; border-radius: 20px; background: #f0f1ef; color: #15212a; font: 650 16px var(--font-geist-sans), sans-serif; text-decoration: none; box-shadow: inset 0 1px 0 #fff, 0 12px 30px #0003; }
.demo-cta:hover { background: #fff; }
.demo-cta:focus-visible { outline: 3px solid #d7ab72; outline-offset: 5px; }
/* Hero: liquid glass under the headline, on the .glass-object tokens, with a white top edge. */
.demo-cta--hero { position: relative; z-index: 3; min-width: 200px; margin-top: clamp(28px, 4.5vh, 44px); border-color: rgba(255,255,255,.5); background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.07) 55%, rgba(255,255,255,.14)), rgba(10,22,36,.34); color: #fff; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(0,4,13,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.1), 0 16px 40px rgba(0,7,18,.3); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, filter .24s ease; }
.demo-cta--hero::after { inset: 1px; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 58%); opacity: 1; }
.demo-cta--hero:hover { background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.1) 55%, rgba(255,255,255,.18)), rgba(10,22,36,.34); transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.12), 0 20px 46px rgba(0,7,18,.34); }
.demo-cta--hero:focus-visible { outline-color: rgba(255,255,255,.85); }
.demo-cta--closing { justify-self: end; background: #171b17; color: #fff; border-color: #171b17; }
.demo-cta--closing:hover { background: #343b31; }
@media (max-width: 700px) {
 .demo-cta--hero { min-height: 56px; min-width: 190px; margin-top: 26px; padding: 14px 26px; }
 .demo-cta--closing { justify-self: start; margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
 .demo-cta--hero, .demo-cta--hero:hover { transition: none; transform: none; }
}

/* ui-polish-20260905.css */
/* 5 Sep 2026 — hero CTA as quiet liquid glass on the roofline, bare step logos,
   and a page bottom that runs into the browser bar instead of stopping at it. */

/* Hero CTA. Same night-glass family as the sign-in Google button: one translucent
   layer, a thin bright rim, no glossy top half. Anchored to the photo so it rests
   just above the roof instead of hanging under the headline. */
.fixa-hero-photo > .demo-cta--hero {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 35%;
  left: 0;
  width: max-content;
  min-width: 212px;
  min-height: 56px;
  margin: 0 auto;
  padding: 0 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 20px;
  background: rgba(8, 19, 32, 0.56);
  color: #f5f0e7;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 1px rgba(0, 4, 13, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 44px rgba(0, 7, 18, 0.36);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    background-color 0.28s ease,
    border-color 0.28s ease;
}

/* Rim light: a soft lens highlight along the top edge, not a two-tone gloss. */
.fixa-hero-photo > .demo-cta--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 70% at 50% -30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.025));
  pointer-events: none;
}

.fixa-hero-photo > .demo-cta--hero::after {
  content: none;
}

.fixa-hero-photo > .demo-cta--hero:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(11, 24, 40, 0.66);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 50px rgba(0, 7, 18, 0.42);
}

.fixa-hero-photo > .demo-cta--hero:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.12s;
}

.fixa-hero-photo > .demo-cta--hero:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .fixa-hero-photo > .demo-cta--hero {
    bottom: 39.5%;
    min-width: 200px;
    min-height: 54px;
    margin: 0 auto;
    padding: 0 30px;
    border-radius: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fixa-hero-photo > .demo-cta--hero,
  .fixa-hero-photo > .demo-cta--hero:hover,
  .fixa-hero-photo > .demo-cta--hero:active {
    transform: none;
    transition: none;
  }
}

/* How it works: the logos stand on their own, larger and centered, no tile behind them. */
.how .card-icon {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 88px;
  align-self: center;
  justify-self: center;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.how .card-icon img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

/* The Drive mark has generous transparent padding in its file; scale it so the
   visible mark matches the phone. */
.how .workspace-icon img {
  width: 108px;
  height: 108px;
}

.how .clipboard-icon {
  font-size: 66px;
  line-height: 1;
}

@media (max-width: 980px) {
  .how .step-cards li {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 26px 24px 24px;
  }

  .how .card-icon {
    min-height: 76px;
  }

  .how .card-icon img {
    width: 76px;
    height: 76px;
  }

  .how .workspace-icon img {
    width: 94px;
    height: 94px;
  }

  .how .clipboard-icon {
    font-size: 58px;
  }
}

@media (max-width: 540px) {
  .how .step-cards li {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 24px 20px 22px;
  }

  .how .card-icon {
    width: auto;
    height: auto;
    min-height: 68px;
    border-radius: 0;
  }

  .how .card-icon img {
    width: 68px;
    height: 68px;
  }

  .how .workspace-icon img {
    width: 84px;
    height: 84px;
  }

  .how .clipboard-icon {
    font-size: 52px;
  }
}

/* Jobs LAD can do. The night card used to float on the paper body colour, so its
   12px frame read as a grey border between two white sections. The wrapper paints
   that frame white; the card itself is unchanged. */
.roles-frame {
  padding: 12px 12px 0;
  background: #fff;
}

.roles-frame > .roles-section {
  margin: 0;
}

/* Rail: the three jobs share the rail height evenly instead of bunching in the
   middle with dead space above and below. The pill reads button offsets, so it
   follows the taller cells. */
@media (min-width: 861px) {
  .roles-rail {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    justify-content: stretch;
    align-content: stretch;
    gap: 6px;
  }

  .roles-rail button {
    height: 100%;
    min-height: 76px;
  }
}

@media (max-width: 700px) {
  .roles-frame {
    padding: 8px 8px 0;
  }
}

/* Home footer. Safari tints its bottom bar from the body background (paper), so a
   white footer ended in a visible step above the bar. Fade the footer from the white
   closing section into the same paper so the page dissolves into the chrome. */
footer {
  border-top: 0;
  background: linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}

/* Sign-in: the photo dissolves into the night colour at the bottom edge, which is
   also the html/body colour and the theme-color, so there is no seam above the bar. */
.signin-page {
  background-image:
    linear-gradient(
      180deg,
      rgba(7, 16, 27, 0.22) 0%,
      rgba(7, 16, 27, 0.4) 48%,
      rgba(7, 16, 27, 0.62) 76%,
      rgba(7, 16, 27, 0.9) 92%,
      #07101b 100%
    ),
    url('/lad-hero-desktop-extended-v1.webp');
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 700px) {
  .signin-page {
    background-image:
      linear-gradient(
        180deg,
        rgba(7, 16, 27, 0.22) 0%,
        rgba(7, 16, 27, 0.42) 50%,
        rgba(7, 16, 27, 0.64) 78%,
        rgba(7, 16, 27, 0.92) 93%,
        #07101b 100%
      ),
      url('/lad-hero-mobile-v1.webp');
  }
}

/* landing-material-20260914.css */
/* Marketing companion to portal-material-20260913.css.
   Scoped to the landing page. The hero photograph, copy, role calendar, and
   full-color step marks retain their existing content and behavior. */
body.landing-polished {
  --landing-ink: #182536;
  --landing-muted: #516378;
  --landing-blue: #0069df;
  --landing-line: rgba(39,66,98,.13);
  --landing-glass: linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,255,255,.28) 55%, rgba(238,248,255,.38));
  --landing-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.24), 0 2px 5px rgba(34,62,98,.035), 0 16px 40px -12px rgba(34,62,98,.18);
  --landing-font: -apple-system, BlinkMacSystemFont, "Geist", "Segoe UI", sans-serif;
  font-family: var(--landing-font);
  color: var(--landing-ink);
  background: radial-gradient(ellipse at 12% 12%, rgba(255,255,255,.85), transparent 52%),
    radial-gradient(ellipse at 94% 38%, rgba(161,198,232,.48), transparent 54%),
    radial-gradient(ellipse at 42% 94%, rgba(244,249,255,.7), transparent 56%),
    linear-gradient(155deg, #e8f2fa, #c9ddf0);
  background-attachment: fixed;
}

/* Preserve the logo position; the right-side menu expands at every viewport. */
.landing-polished .hero-nav {
  inset: 4px 0 auto;
  width: min(1192px, calc(100% - 48px));
  min-height: 58px;
  margin-inline: auto;
  padding: 8px 12px 8px 16px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
.landing-polished .hero-nav .brand-lockup { gap: 6px; align-items: center; }
.landing-polished .hero-nav .brand-lockup img { width: 40px; height: 40px; filter: none; }
.landing-polished .hero-nav .brand-lockup strong {
  font-size: 17px; font-weight: 650; letter-spacing: -.035em;
}
.landing-polished .menu-cluster { margin-top: 0; }
.landing-polished .menu-toggle {
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,9,24,.12);
}
.landing-polished .hero-menu a {
  border-radius: 999px;
  font-family: var(--landing-font); font-weight: 550;
}
.landing-polished .hero-menu { top: 54px; gap: 6px; }
.landing-polished .hero-menu a { min-height: 44px; background: rgba(18,35,55,.92); }
.landing-polished .fixa-hero-photo > .demo-cta--hero {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.64);
  background: linear-gradient(145deg, rgba(255,255,255,.23), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.16), 0 6px 20px rgba(0,9,24,.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
}
.landing-polished .fixa-hero-photo > .demo-cta--hero::before { content: none; }
.landing-polished .fixa-hero-photo > .demo-cta--hero:hover {
  background: linear-gradient(145deg, rgba(255,255,255,.32), rgba(255,255,255,.12));
  transform: none;
}

/* A continuous canvas connects the requested sections without new layout chrome. */
.landing-polished :is(.fixa-hero, .intro, .how, .price-section, .roles-frame, .roles-section, .faq-section, .closing, footer) {
  background: transparent;
  color: var(--landing-ink);
}
.landing-polished :is(.how, .price-section, .faq-section) {
  padding-inline: clamp(24px, 6vw, 96px);
}
.landing-polished :is(.intro h2, .how h2, .roles-heading h2) {
  color: var(--landing-ink); font-weight: 650;
  letter-spacing: -.045em; line-height: 1.1;
}
.landing-polished :is(.intro-copy p, .roles-heading > p) { color: var(--landing-muted); }
.landing-polished .more-line span { background: rgba(0,105,223,.1); color: var(--landing-blue); font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.landing-polished .closing-copy h2 em {
  color: var(--landing-blue);
  text-shadow: 2px 2px 0 rgba(24,29,31,.16), 5px 5px 0 rgba(24,29,31,.13), 8px 8px 0 rgba(24,29,31,.1), 13px 14px 18px rgba(24,29,31,.24);
}
.landing-polished .soft-pill {
  background: var(--landing-glass);
  border: 1px solid rgba(255,255,255,.95);
  color: var(--landing-muted);
  box-shadow: var(--landing-shadow), 0 0 0 1px rgba(39,66,98,.2), 0 6px 18px rgba(34,62,98,.12);
  font-family: var(--landing-font); font-weight: 550;
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  backdrop-filter: blur(24px) saturate(1.35);
}
.landing-polished .dark-pill,
.landing-polished .soft-pill.dark-pill {
  background: var(--landing-glass);
  border: 1px solid rgba(255,255,255,.95);
  color: var(--landing-muted);
  box-shadow: var(--landing-shadow), 0 0 0 1px rgba(39,66,98,.22), 0 8px 22px rgba(34,62,98,.14);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
}
.landing-polished .night-bridge {
  height: auto; aspect-ratio: 1672 / 941;
  margin: 0 12px; border-radius: 24px; overflow: hidden;
  box-shadow: 0 16px 40px -16px rgba(34,62,98,.22);
}
.landing-polished .night-bridge img { width: 100%; height: auto; object-fit: contain; }
.landing-polished :is(.how .step-cards li, .calm-strip, .cost-compare, .roles-card, .faq-list) {
  background: var(--landing-glass);
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 24px;
  box-shadow: var(--landing-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}
.landing-polished .how .step-cards li { padding: 32px 24px; }
.landing-polished .how .step-cards div > span { color: var(--landing-blue); }
.landing-polished .how .step-cards h3 { color: var(--landing-ink); font-weight: 600; }
.landing-polished .how .step-cards p { color: var(--landing-muted); }
/* Do not filter, recolor or place new backgrounds behind the step marks. */

/* Oversized editorial type, with a quiet wash of light through the glass. */
.landing-polished .calm-strip {
  position: relative; isolation: isolate; min-height: 800px;
  padding: clamp(88px, 9vw, 144px) clamp(28px, 5vw, 84px);
  color: var(--landing-ink);
  background: radial-gradient(ellipse at 82% 75%, rgba(112,177,241,.25), transparent 58%),
    radial-gradient(ellipse at 12% 4%, rgba(255,255,255,.9), transparent 60%), var(--landing-glass);
}
.landing-polished .calm-strip::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 68%; aspect-ratio: 1; right: -20%; top: -30%;
  border: 1px solid rgba(255,255,255,.58); border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.08), 0 0 0 96px rgba(255,255,255,.05);
}
.landing-polished .calm-strip > p {
  margin: 0 0 clamp(44px, 5vw, 72px); color: var(--landing-muted);
  font-size: 15px; font-weight: 550; letter-spacing: .015em;
}
.landing-polished .calm-strip h2 {
  display: grid; gap: clamp(16px, 2.2vw, 34px); width: 100%; max-width: 1440px; margin-inline: auto;
  font-size: clamp(54px, 9.1vw, 148px); font-weight: 600;
  line-height: 1.02; letter-spacing: -.065em;
}
.landing-polished .outcome-line { display: block; text-align: left; }
.landing-polished .outcome-line:nth-child(2) { text-align: center; }
.landing-polished .outcome-line:last-child { text-align: right; }
.landing-polished .calm-strip h2 em {
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-weight: 400; color: var(--landing-blue); letter-spacing: -.06em;
}
.landing-polished .price-section h2 { color: var(--landing-ink); font-weight: 600; }
.landing-polished .price-section h2 em,
.landing-polished .price-inline-kicker {
  font-family: var(--landing-font); font-style: normal;
  font-weight: 500; color: var(--landing-muted); letter-spacing: -.035em;
}
.landing-polished .price-inline-kicker { align-self: flex-start; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; }
.landing-polished .cost-meta span { color: var(--landing-muted); }
.landing-polished .cost-meta strong { color: var(--landing-ink); font-weight: 650; }
.landing-polished .cost-track { background: rgba(67,106,150,.1); box-shadow: inset 0 1px 2px rgba(34,62,98,.07); }
.landing-polished .cost-bar--lad { background: linear-gradient(90deg, #087af2, #0068de); box-shadow: none; }
.landing-polished .cost-bar--hire { background: linear-gradient(90deg, #738aa3, #354d69); }
.landing-polished .cost-note { border-color: var(--landing-line); color: var(--landing-muted); }
.landing-polished .get-started,
.landing-polished .demo-cta--closing {
  border: 1px solid rgba(0,91,200,.24); border-radius: 12px;
  background: linear-gradient(#087af2, #0068de); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(0,93,202,.16);
  font-weight: 600; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.landing-polished .get-started:hover,
.landing-polished .demo-cta--closing:hover { background: linear-gradient(#0671e3, #005fcb); transform: none; }

.landing-polished .roles-section { border: 0; }
.landing-polished :is(.roles-section, .roles-card)::before { content: none; }
.landing-polished .roles-heading { border-color: var(--landing-line); }
.landing-polished :is(.roles-eyebrow, .role-kicker) {
  color: var(--landing-blue); font-family: var(--landing-font);
  font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: none;
}
.landing-polished .roles-rail { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); }
.landing-polished .roles-pill {
  background: linear-gradient(145deg, rgba(255,255,255,.6), rgba(255,255,255,.16));
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 6px 14px -6px rgba(34,62,98,.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}
.landing-polished .roles-rail button { color: var(--landing-ink); }
.landing-polished .roles-rail button > span,
.landing-polished .roles-rail button.is-active { color: var(--landing-blue); }
.landing-polished .roles-rail button > small,
.landing-polished .roles-rail button.is-active > small { color: var(--landing-muted); }
.landing-polished .roles-card-inner .role-copy > p {
  color: var(--landing-ink); font-size: clamp(21px, 2vw, 28px);
  font-weight: 550; line-height: 1.3; letter-spacing: -.03em;
}
.landing-polished .role-proof { color: var(--landing-muted); }
.landing-polished .role-proof i { background: var(--landing-blue); box-shadow: 0 0 0 4px rgba(0,105,223,.08); }
.landing-polished .role-visual {
  height: auto; min-height: 0; aspect-ratio: 1672 / 941;
  border: 1px solid rgba(255,255,255,.6); border-radius: 18px;
  background: transparent; box-shadow: 0 4px 14px rgba(34,62,98,.1);
}
.landing-polished .role-visual img { border-radius: inherit; object-fit: cover; }
/* The generated dispatch photograph already contains the incoming-call UI. */
.landing-polished .role-phone { display: none; }
/* Keep the existing calendar illustration and its palette intact. */

.landing-polished .faq-list { padding: 0 28px; }
.landing-polished .faq-list details { border-color: var(--landing-line); }
.landing-polished .faq-list details:last-child { border-bottom: 0; }
.landing-polished .faq-list summary {
  min-height: 86px; color: var(--landing-ink);
  font-size: clamp(19px, 2.1vw, 26px); font-weight: 550; letter-spacing: -.025em;
}
.landing-polished .faq-list summary::after {
  color: var(--landing-blue); border-color: rgba(72,103,140,.2); background: rgba(255,255,255,.3);
}
.landing-polished .faq-list details[open] summary::after { background: rgba(0,105,223,.08); }
.landing-polished .faq-list details p { color: var(--landing-muted); line-height: 1.65; }
.landing-polished :is(a, button, summary):focus-visible { outline: 3px solid var(--landing-blue); outline-offset: 4px; }
.landing-polished .hero-nav :is(a, button):focus-visible { outline-color: #fff; }

@media (max-width: 860px) {
  .landing-polished .roles-rail button { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); }
  .landing-polished .roles-rail button.is-active { background: var(--landing-glass); box-shadow: var(--landing-shadow); }
  .landing-polished .roles-section .role-visual { height: auto; min-height: 0; aspect-ratio: 1672 / 941; }
}
@media (max-width: 720px) {
  .landing-polished .hero-nav { inset: 3px 0 auto; width: calc(100% - 24px); padding: 8px 10px; }
  .landing-polished .hero-nav .brand-lockup img { width: 36px; height: 36px; }
  .landing-polished .hero-nav .brand-lockup strong { font-size: 15px; }
  .landing-polished .hero-menu { top: 54px; gap: 6px; }
  .landing-polished .hero-menu a { min-height: 44px; background: rgba(18,35,55,.92); }
  .landing-polished .night-bridge { margin-inline: 12px; border-radius: 20px; }
  .landing-polished .calm-strip { min-height: 640px; padding: 72px 24px; margin-inline: 12px; }
  .landing-polished .calm-strip h2 { font-size: clamp(42px, 10.8vw, 72px); gap: 30px; letter-spacing: -.055em; }
  .landing-polished .outcome-line { max-width: 100%; }
  .landing-polished .outcome-line span { display: block; }
  .landing-polished .calm-strip::before { width: 140%; right: -85%; top: 10%; }
  .landing-polished .how .step-cards li { padding: 26px 20px; }
  .landing-polished .faq-list { padding-inline: 18px; border-radius: 20px; }
  .landing-polished .faq-list summary { min-height: 76px; gap: 14px; }
  .landing-polished .faq-list details p { margin-right: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing-polished :is(.step-cards li, .calm-strip, .cost-compare, .roles-card, .faq-list, .soft-pill) { background: #eef5fb; }
  .landing-polished .hero-menu a,
  .landing-polished .menu-toggle { background: #233449; }
}
@media (prefers-reduced-transparency: reduce) {
  .landing-polished :is(.step-cards li, .calm-strip, .cost-compare, .roles-card, .faq-list, .soft-pill) {
    background: #eef5fb; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .landing-polished .hero-menu a,
  .landing-polished .menu-toggle { background: #233449; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-polished :is(.hero-menu a, .roles-pill, .roles-card-inner, .get-started, .demo-cta) { transition: none; animation: none; }
}

/* roles-20260915f.css */
/* Scheduler calendar: bring the old dark widget into the current light aesthetic.
   Reverses the "keep the existing calendar illustration and its palette intact" note
   in landing-material-20260914.css, per Andrew's 2026-09-15 direction.
   Liquid glass, more transparent: the card behind shows through; text stays opaque. */
.landing-polished .role-cal {
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14) 55%, rgba(226, 240, 252, 0.3));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.18), 0 2px 5px rgba(34, 62, 98, 0.035), 0 16px 40px -12px rgba(34, 62, 98, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}
.landing-polished .role-cal header strong {
  color: var(--landing-ink, #182536);
  font-weight: 600;
}
.landing-polished .role-cal header span {
  color: var(--landing-blue, #0069df);
}
.landing-polished .role-cal-grid b {
  color: rgba(81, 99, 120, 0.62);
}
.landing-polished .role-cal-grid i {
  color: var(--landing-ink, #182536);
}
.landing-polished .role-cal-grid i.is-booked {
  border-radius: 8px;
  background: linear-gradient(#087af2, #0068de);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(0, 105, 223, 0.32);
}

/* landing-numbers-20260915j.css */
/* Outcomes: responsive type and spacing. Replaces version i without mutating it.
   Chart describes availability: 24 hours x 7 days = 168 hours, not call volume. */
#outcomes.after-hours {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto 12px;
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid #d5e5f3;
  border-radius: 24px;
  background: radial-gradient(ellipse at 100% 0%, #e0effb, transparent 65%),
    linear-gradient(130deg, #f8fbfe, #edf5fc);
  color: var(--landing-ink, #182536);
  font-family: var(--landing-font, Arial, sans-serif);
  text-align: left;
}
#outcomes *, #outcomes *::before, #outcomes *::after { box-sizing: border-box; }
#outcomes :is(p, h2, h3, figure, ul) { margin: 0; }
#outcomes .ah-inner { max-width: 1008px; margin-inline: auto; }
#outcomes .ah-heading { display: block; }
#outcomes h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.04em;
  text-wrap: balance;
}
#outcomes em {
  color: #0069df;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
}
#outcomes h2 em { white-space: nowrap; }
#outcomes .ah-stage {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  margin-top: 36px;
}
#outcomes .ah-stage > * { min-width: 0; }
#outcomes .ah-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
#outcomes .ah-bars > div { display: grid; gap: 10px; text-align: center; }
#outcomes .ah-bars i { display: block; height: 76px; border-radius: 5px 5px 0 0; background: linear-gradient(#3292f5, #0870df); }
#outcomes .ah-bars abbr { color: #516378; font-size: 12px; line-height: 1.4; text-decoration: none; border: 0; font-weight: 500; }
#outcomes .ah-247 { margin-top: 16px; font-size: 14px; font-weight: 700; letter-spacing: .1em; margin-right: -.1em; color: #0069df; text-align: center; }
#outcomes .ah-jobs { margin: 0; }
#outcomes .ah-jobs ul { list-style: none; padding: 0; }
#outcomes .ah-jobs li { display: flex; align-items: flex-start; justify-content: flex-start; gap: 16px; padding: 22px 0; border-bottom: 1px solid #d5e2ef; }
#outcomes .ah-jobs li > div { flex: 1; min-width: 0; }
#outcomes .ah-jobs li:first-child { padding-top: 0; }
#outcomes .ah-jobs li:last-child { border-bottom: 0; padding-bottom: 0; }
#outcomes .ah-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: #fff; color: #0069df; border: 1px solid #d9e8f6; }
#outcomes .ah-icon svg, #outcomes .ah-recap > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#outcomes h3 { font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.025em; }
#outcomes .ah-jobs li p { margin-top: 6px; max-width: 36ch; color: #516378; font-size: 14px; line-height: 1.6; }
#outcomes .ah-recap { display: flex; gap: 14px; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid #d5e2ef; }
#outcomes .ah-recap > svg { color: #0069df; flex-shrink: 0; }
#outcomes .ah-recap p { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .25em; row-gap: 6px; font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -.02em; }
#outcomes .ah-recap p span { margin-left: 12px; font-size: 14px; font-weight: 400; color: #516378; letter-spacing: 0; }
@media (max-width: 900px) {
  #outcomes .ah-stage { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; }
  #outcomes .ah-bars { gap: 8px; }
  #outcomes h3 { font-size: 19px; }
  #outcomes .ah-recap p span { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 700px) {
  #outcomes.after-hours { width: calc(100% - 32px); padding: 30px 24px; border-radius: 20px; }
  #outcomes h2 { font-size: clamp(24px, 6.9vw, 32px); white-space: nowrap; line-height: 1.16; }
  #outcomes .ah-stage { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px; align-items: start; }
  #outcomes .ah-bars { gap: 10px; }
  #outcomes .ah-bars i { height: 56px; }
  #outcomes .ah-jobs { border-top: 1px solid #d5e2ef; padding-top: 26px; }
  #outcomes .ah-jobs li { padding: 20px 0; gap: 14px; }
  #outcomes .ah-icon { flex-basis: 38px; height: 38px; border-radius: 10px; }
  #outcomes h3 { font-size: 20px; }
  #outcomes .ah-jobs li p { font-size: 14px; line-height: 1.55; }
  #outcomes .ah-recap { margin-top: 26px; padding-top: 22px; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  #outcomes .ah-recap > svg { margin-top: 0; }
  #outcomes .ah-recap p { font-size: 18px; justify-content: center; text-align: center; }
  #outcomes .ah-recap p span { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 359px) {
  #outcomes.after-hours { padding-inline: 20px; }
  #outcomes h2 { white-space: normal; }
  #outcomes .ah-bars { gap: 7px; }
  #outcomes .ah-bars abbr { font-size: 11px; }
  #outcomes .ah-jobs li { gap: 10px; }
  #outcomes h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  #outcomes *, #outcomes *::before, #outcomes *::after { animation: none; transition: none; }
}
@media (forced-colors: active) {
  #outcomes .ah-bars i { background: CanvasText; }
  #outcomes .ah-icon, #outcomes .ah-recap, #outcomes .ah-jobs, #outcomes .ah-jobs li { border-color: CanvasText; }
}

/* landing-spacing-20260915k.css */
/* Section rhythm: "Your calls, taken care of" (#outcomes) sits between Pricing
   and FAQ. The page body breathes ~270px desktop / ~160px mobile between
   section content; this card had ~110px / ~70px. Add the air as margins
   OUTSIDE the card so the card's own padding and border are untouched. */
#outcomes.after-hours {
  margin-top: 150px;
  margin-bottom: 165px;
}
@media (max-width: 700px) {
  #outcomes.after-hours {
    margin-top: 80px;
    margin-bottom: 95px;
  }
}

/* hero-anim-20260919f.css */
/* ==========================================================================
   Landing hero animation — BUILD F (2026-09-19).
   Approved mockup: hero-anim-v1.html (gleam travels through the GLYPHS),
   orb ported from orb-listening.html, with Andrew's tweak: the mini orb
   sits centered UNDER the "Try a demo" CTA (not beside it). Build D bumps
   the orb from ~64px to 96px (Andrew: more presence). Build E raises
   the orb's opacity (Andrew: a tad more solidness). Build F pushes the
   orb fully solid AND removes all ambient haze (Andrew: "none of that"
   blue cloud) — the CSS halo is deleted, the canvas wash is gone; only
   the dots remain, each with a tight luminous core.

   Three layers, all scoped to .hero-anim on the landing hero:
   1. Mini listening orb (~96px canvas 2D) below the hero CTA.
   2. Barely-there gleam sweep through the H1 every ~6s. The headline is
      split into two stacked layers by the JS:
        .hero-gleam-back  — absolute, aria-hidden, identical markup, fully
          opaque, keeps the H1's ORIGINAL text-shadow (so no shadow can
          ever show through transparent glyphs — the iOS extruded-text
          bug of build 20260919 cannot regress).
        .hero-gleam-front — in-flow (carries the layout), NO text-shadow;
          glyphs painted with an animated gradient via
          background-clip:text, so the bright band travels through the
          LETTERS, not across a box. @supports-guarded: browsers without
          background-clip:text show plain solid cream (identical to the
          back layer — a visual no-op).
      At rest the band parks fully off the left edge; the headline is
      indistinguishable from the pre-animation styling.
   3. Very slow drift of the hero photo backdrop (JS moves background-position
      in a seamless 2-minute loop, +/-~1.6%, on the real .fixa-hero-photo).

   prefers-reduced-motion: the JS never builds the gleam layers — the H1
   renders exactly the pre-animation styling. Static orb, no drift.

   C replaces the B2 blend-mode overlay (Andrew: it read as a bar sliding
   across the headline box, not the letters catching light).
   ========================================================================== */

/* --- 1. Orb placement: centered, symmetrical, below the hero CTA --------- */
/* The CTA's bottom edge is anchored at bottom:35% (desktop) / 39.5% (mobile);
   the orb hangs 24px beneath it (96px orb + 24px gap = 120px). */
.fixa-hero-photo > .hero-orb {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: calc(35% - 120px);
  display: flex;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
.hero-orb canvas {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  display: block;
}
/* No ambient halo: Andrew killed the blue cloud (build F). The orb reads
   purely from the dots themselves, drawn in the canvas. */
@media (max-width: 700px) {
  .fixa-hero-photo > .hero-orb { bottom: calc(39.5% - 120px); }
}

/* --- 2. H1 gleam: the bright band travels through the LETTERS ----------- */
.hero-anim #hero-title { position: relative; }
/* Back layer: identical markup, fully opaque, inherits the H1's original
   text-shadow — the depth/readability never changes. */
.hero-gleam-back {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
}
/* Front layer: carries the layout, no shadow; the animated gradient paints
   only the glyphs, so the gleam lives ON the letters. */
.hero-gleam-front {
  position: relative;
  display: block;
  margin: 0;
  color: #f7f4eb;       /* no-support fallback: plain solid cream text */
  text-shadow: none;    /* the shadow lives on the back layer only */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-gleam-front {
    background-image: linear-gradient(100deg,
      #f7f4eb 0%, #f7f4eb 42%, #ffffff 50%, #f7f4eb 58%, #f7f4eb 100%);
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-position: 100% 0; /* parked: band fully off the left edge */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    will-change: background-position;
  }
}

/* faq-ask-20260920.css */
/* "Ask anything else?" — Apple-style in-panel chat (2026-09-20).
   iMessage language: blue user bubbles, gray bot bubbles, the three-dot
   typing indicator, a signature light-gray field with a blue circle send
   button, input at the bottom like a real chat. Flat colors, hairlines,
   no gradients, no heavy shadows.
   The item itself stays a plain .faq-list details, identical to its
   siblings: nothing here touches the details or summary. */
.faq-ask-chat {
  max-width: none;
  /* Fill the FAQ card end to end — no dead space on the right. */
  margin: -7px 0 30px;
  display: flex;
  flex-direction: column;
}
.faq-ask-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.faq-ask-thread:empty {
  margin-bottom: 0;
}
/* User question: blue bubble, right. */
.faq-ask-q {
  align-self: flex-end;
  max-width: min(82%, 560px);
  margin: 0;
  padding: 9px 16px;
  border-radius: 19px;
  border-bottom-right-radius: 5px;
  background: #0071e3;
  color: #fff;
  font-size: 16px;
  line-height: 1.45;
  animation: faq-ask-in 0.25s ease-out;
}
/* Bot answer: gray bubble, left. */
.faq-ask-a {
  align-self: flex-start;
  max-width: min(88%, 640px);
  padding: 11px 17px;
  border-radius: 19px;
  border-bottom-left-radius: 5px;
  background: #f5f5f7;
  animation: faq-ask-in 0.25s ease-out;
}
/* Beats .faq-list details p (0,2,1 vs 0,1,2). */
.faq-list .faq-ask-a p {
  margin: 0 0 8px;
  color: #1d1d1f;
  font-size: 16px;
  line-height: 1.5;
}
.faq-list .faq-ask-a p:last-child {
  margin-bottom: 0;
}
.faq-list .faq-ask-a a {
  color: #0071e3;
}
/* Typing indicator: three dots in a gray bubble. */
.faq-ask-row {
  font-size: 16px;
  line-height: 1.5;
}
.faq-ask-loading {
  align-self: flex-start;
  padding: 14px 18px;
  border-radius: 19px;
  border-bottom-left-radius: 5px;
  background: #f5f5f7;
}
.faq-ask-dots {
  display: inline-flex;
  gap: 5px;
}
.faq-ask-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8e8e93;
  animation: faq-dot 1.2s infinite ease-in-out;
}
.faq-ask-dots i:nth-child(2) { animation-delay: 0.15s; }
.faq-ask-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes faq-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
/* Failure: quiet centered note, not a bubble. */
.faq-ask-error {
  align-self: center;
  padding: 4px 0;
  color: #6e6e73;
  font-size: 14px;
  text-align: center;
}
/* Input row: gray field + blue circle send, like iMessage. */
.faq-ask-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.faq-ask-form input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 24px;
  background: #f5f5f7;
  color: #1d1d1f;
  font-size: 16px;
  outline: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-ask-form input::placeholder {
  color: #86868b;
}
.faq-ask-form input:focus {
  background: #fff;
  border-color: #d2d2d7;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14);
}
.faq-ask-form input:disabled {
  opacity: 0.6;
}
.faq-ask-form button {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #0071e3;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.faq-ask-form button:hover:not(:disabled) {
  background: #0077ed;
}
.faq-ask-form button:active:not(:disabled) {
  transform: scale(0.93);
}
.faq-ask-form button:disabled {
  background: #e8e8ed;
  color: #aeaeb2;
  cursor: default;
}
.faq-ask-form button svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Gentle entrance for new bubbles. */
@keyframes faq-ask-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .faq-ask-chat { margin: -7px 0 30px; }
  .faq-ask-q { max-width: 88%; }
  .faq-ask-a { max-width: 94%; }
  .faq-ask-form input { font-size: 16px; }
  .faq-ask-q,
  .faq-list .faq-ask-a p,
  .faq-ask-row { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-ask-dots i,
  .faq-ask-q,
  .faq-ask-a { animation: none; }
}

/* landing-email-20261009.css */
/* Email follow-up role card and the How it works envelope mark.
   Glass, type, and blue come from landing-material-20260914.css. */
.landing-polished .role-lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 220px;
  min-height: 0;
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  background: var(--landing-glass);
  box-shadow: var(--landing-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}
.landing-polished .role-lead header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.landing-polished .role-lead header strong {
  color: var(--landing-ink, #182536);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.landing-polished .role-lead header span {
  color: var(--landing-blue, #0069df);
  font-size: 12px;
  font-weight: 600;
}
.landing-polished .role-lead ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-polished .role-lead li {
  color: var(--landing-ink, #182536);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.landing-polished .role-lead li span {
  display: block;
  margin-top: 2px;
  color: var(--landing-muted, #516378);
  font-size: 12px;
  font-weight: 450;
}
.landing-polished .how .email-step-icon svg {
  width: 108px;
  height: 108px;
  color: var(--landing-blue, #0069df);
}
@media (max-width: 1100px) {
  .landing-polished .role-lead { height: 200px; }
}
@media (max-width: 980px) {
  .landing-polished .how .email-step-icon svg { width: 94px; height: 94px; }
}
@media (max-width: 540px) {
  .landing-polished .how .email-step-icon svg { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-polished .role-lead { transition: none; }
}

/* landing-lead-count-20261010.css */
/* Homepage lead total. Glass, type, and blue come from landing-material-20260914.css. */
.landing-polished .lead-tally {
  position: relative;
  width: min(560px, calc(100% - 48px));
  margin: 28px auto 12px;
  padding: 22px 28px 20px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  background: var(--landing-glass);
  box-shadow: var(--landing-shadow);
  color: var(--landing-ink, #182536);
  font-family: var(--landing-font, "Geist", sans-serif);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}
.landing-polished .lead-tally[hidden] { display: none; }
.landing-polished .lead-tally p { margin: 0; }
.landing-polished .lead-tally-kicker {
  color: var(--landing-blue, #0069df);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.landing-polished .lead-tally-figure {
  margin-top: 8px;
  color: var(--landing-ink, #182536);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.landing-polished .lead-tally:not(.is-shown) .lead-tally-figure { opacity: 0; }
.landing-polished .lead-tally-label {
  margin-top: 10px;
  color: var(--landing-ink, #182536);
  font-size: 16px;
  font-weight: 550;
  letter-spacing: -0.02em;
}
.landing-polished .lead-tally-note {
  margin-top: 6px;
  color: var(--landing-muted, #516378);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: -0.01em;
}
.landing-polished .lead-tally-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 700px) {
  .landing-polished .lead-tally {
    width: calc(100% - 32px);
    margin-top: 20px;
    padding: 18px 18px 16px;
    border-radius: 20px;
  }
  .landing-polished .lead-tally-label { font-size: 15px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing-polished .lead-tally { background: #eef5fb; }
}
@media (prefers-reduced-transparency: reduce) {
  .landing-polished .lead-tally {
    background: #eef5fb;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-polished .lead-tally,
  .landing-polished .lead-tally * {
    animation: none;
    transition: none;
  }
}

/* landing-story-20261013.css */
/* Landing story pass. Heavier glass, a short rise as sections enter. */

.landing-polished .price-includes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.landing-polished .price-includes li {
  margin: 0;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: var(--landing-glass);
  color: var(--landing-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 16px 36px -18px rgba(12, 24, 48, 0.36);
}

.landing-polished :is(.roles-card, .faq-list, .cost-compare, .lead-tally) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 18px 44px -18px rgba(12, 24, 48, 0.32),
    0 48px 90px -40px rgba(8, 16, 32, 0.5);
}

.landing-polished [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-polished [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 700px) {
  .landing-polished .price-includes {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-polished [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* landing-refine-20261014.css */
/* Preserve the pre-pivot material, spacing, and typography. Undo the heavier story shadows. */
.landing-polished .role-lead { height: auto; min-height: 220px; }
@media (max-width: 700px) { .landing-polished .role-lead { min-height: 0; } }

/* Two matching email previews, using the same glass, ink, and blue as Receptionist. */
.landing-polished .role-mail {
  width: 100%; min-width: 0; align-self: center;
  border: 1px solid rgba(255,255,255,.85); border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(255,255,255,.3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px -18px rgba(34,62,98,.2);
  color: var(--landing-ink); overflow: hidden; text-align: left;
}
.landing-polished .role-mail-top {
  display: flex; align-items: center; gap: 10px; padding: 18px 20px;
  border-bottom: 1px solid var(--landing-line);
}
.landing-polished .role-mail-icon {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
  background: rgba(0,105,223,.07); color: var(--landing-blue); border-radius: 12px;
}
.landing-polished .role-mail-icon svg { width: 20px; height: 20px; }
.landing-polished .role-mail-top > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.landing-polished .role-mail-top strong { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.landing-polished .role-mail-top > div span { font-size: 11px; color: var(--landing-muted); line-height: 1.4; }
.landing-polished .role-mail-tag { margin-left: auto; font-size: 10px; color: var(--landing-blue); background: rgba(0,105,223,.07); border-radius: 6px; padding: 5px 7px; white-space: nowrap; }
.landing-polished .role-mail-body { padding: 22px 20px; }
.landing-polished .role-mail-body h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 18px; }
.landing-polished .role-mail-body dl { margin: 0; display: grid; gap: 12px; }
.landing-polished .role-mail-body dl > div { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 12px; }
.landing-polished .role-mail-body dt { font-size: 11px; color: var(--landing-muted); padding-top: 2px; }
.landing-polished .role-mail-body dd { font-size: 13px; line-height: 1.5; margin: 0; }
.landing-polished .role-mail-body p { font-size: 13px; color: var(--landing-muted); line-height: 1.65; margin: 0 0 12px; }
.landing-polished .role-mail-signoff { font-size: 12px; color: var(--landing-ink); }
.landing-polished .role-mail-footer { padding: 14px 20px; border-top: 1px solid var(--landing-line); color: var(--landing-muted); font-size: 10px; line-height: 1.5; display: flex; align-items: center; gap: 7px; }
.landing-polished .role-mail-footer i { height: 5px; width: 5px; border-radius: 50%; background: var(--landing-blue); flex-shrink: 0; }

/* Quiet, consistent outcome rows instead of three unrelated icons. */
.landing-polished #outcomes .ah-jobs ul { margin: 0; display: grid; gap: 12px; }
.landing-polished #outcomes .ah-jobs li {
  padding: 22px !important; border: 1px solid rgba(255,255,255,.8) !important;
  border-radius: 18px; background: var(--landing-glass); gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.landing-polished #outcomes .ah-icon {
  height: 42px; flex-basis: 42px; background: rgba(0,105,223,.07);
  border: 0; border-radius: 14px; box-shadow: none;
}
.landing-polished #outcomes h3 { font-size: 19px; font-weight: 600; line-height: 1.35; }
.landing-polished #outcomes .ah-jobs li p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
@media (max-width: 700px) {
  .landing-polished .role-mail-top { padding: 16px; }
  .landing-polished .role-mail-body { padding: 20px 16px; }
  .landing-polished .role-mail-footer { padding: 12px 16px; }
  .landing-polished #outcomes .ah-jobs { border-top: 0; padding-top: 0; }
  .landing-polished #outcomes .ah-jobs li { padding: 18px 16px !important; gap: 12px; }
  .landing-polished #outcomes h3 { font-size: 18px; }
  .landing-polished #outcomes .ah-icon { flex-basis: 36px; height: 36px; border-radius: 12px; }
}