/* Call Maggie: direction C, "the front desk". Teal, ivory, brass, sage. Young Serif and Figtree.
   One futuristic thing on the page: Maggie as a hologram on the hero's stage. Everything else is warm and plain. */
:root {
  --teal: #0F3D3E; --teal-2: #155052; --stage: #082426; --ivory: #F7F3EA; --brass: #C8962E; --brass-2: #A97C22;
  --sage: #DCE6DF; --sage-2: #CBD9D0; --ink: #14211F; --mute: #4E5D5A; --line: #D3DDD6; --white: #FFFFFF;
  --amp: 0; /* how loudly Maggie is speaking, 0 to 1, set by app.js */
  --mic: 0; /* how loudly the visitor is speaking, 0 to 1 */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: Figtree, "Segoe UI", system-ui, sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--teal); }
h1, h2, h3 { font-family: "Young Serif", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; margin: 0 0 .5em; }
h1 { font-size: clamp(36px, 3.5vw, 50px); }
h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: 23px; line-height: 1.2; }
p { margin: 0 0 1em; }
.wrap { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
.mute { color: var(--mute); }
.lede { font-size: clamp(18px, 2vw, 21px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 17px; border: 0; cursor: pointer; text-decoration: none; font-family: inherit; transition: background .15s ease, transform .15s ease; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--brass); color: var(--ink); }
.btn.primary:hover { background: #D9A63A; }
.btn.ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.btn.ghost:hover { background: rgba(255, 255, 255, .08); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.btn svg { width: 20px; height: 20px; }
.on-teal { background: var(--teal); color: var(--ivory); }
.on-teal a { color: var(--ivory); }
.on-sage { background: var(--sage); }
.skip { position: absolute; left: -999px; top: 0; background: var(--brass); color: var(--ink); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; top: 12px; }

/* Header */
header { background: var(--teal); color: var(--ivory); position: sticky; top: 0; z-index: 20; }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 12px; font-family: "Young Serif", Georgia, serif; font-size: 22px; color: var(--ivory); text-decoration: none; white-space: nowrap; }
.logo img { width: 34px; height: 34px; border-radius: 9px; }
nav { display: flex; gap: 22px; align-items: center; }
nav a { color: var(--ivory); opacity: .88; font-weight: 500; font-size: 16px; text-decoration: none; padding: 12px 2px; }
nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
nav .btn { padding: 10px 18px; font-size: 15px; }
@media (max-width: 820px) { nav a:not(.btn) { display: none; } }

/* Hero: the stage. Teal, darker where she stands. */
.hero { background: linear-gradient(180deg, var(--teal) 0%, var(--stage) 100%); color: var(--ivory); padding: 56px 0 60px; position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.hero .lede { color: rgba(247, 243, 234, .92); max-width: 540px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.hero .ring { opacity: .9; font-weight: 500; }
.hero .ring b { font-weight: 700; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 32px; } .hero { padding: 36px 0 48px; } }

/* The hologram. Her own colours, translucent, standing in light. The ids and classes inside are read by app.js.
   The light under her and the halo that grows with her voice are the hologram itself, not decoration. */
.stage { position: relative; width: min(100%, 440px); margin: 0 auto; aspect-ratio: 4 / 5; }
.holo { position: absolute; inset: 0; border-radius: 220px 220px 28px 28px; overflow: hidden; background: radial-gradient(ellipse 70% 55% at 50% 70%, rgba(200, 150, 46, .22) 0%, rgba(21, 80, 82, .35) 45%, var(--stage) 100%); box-shadow: 0 0 calc(36px + var(--amp) * 70px) rgba(200, 150, 46, calc(.18 + var(--amp) * .35)), inset 0 0 0 1px rgba(247, 243, 234, .14); transition: box-shadow .12s linear; }
.holo .person { position: absolute; inset: 0; background-size: cover; background-position: 50% 18%; filter: contrast(1.06) saturate(1.05) brightness(calc(1.02 + var(--amp) * .25)); mix-blend-mode: screen; opacity: .88; transform: scale(calc(1 + var(--amp) * .015)) translateY(calc(var(--amp) * -2px)); transition: filter .08s linear, transform .12s ease-out, opacity .6s ease; }
.holo .person.listening { opacity: 0; }
.holo.is-listening .person.listening { opacity: .88; }
.holo.is-listening .person.idle { opacity: 0; }
.holo .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 5px); pointer-events: none; mix-blend-mode: multiply; z-index: 3; }
.holo .sweep { position: absolute; left: 0; right: 0; height: 18%; top: -20%; background: linear-gradient(180deg, transparent, rgba(247, 243, 234, .16), transparent); animation: sweep 5.5s linear infinite; pointer-events: none; z-index: 3; }
@keyframes sweep { to { top: 110% } }
.holo .flicker { position: absolute; inset: 0; background: rgba(247, 243, 234, .05); animation: flicker 3.1s steps(1) infinite; pointer-events: none; z-index: 3; }
@keyframes flicker { 0%, 92%, 100% { opacity: 0 } 93% { opacity: 1 } 95% { opacity: 0 } 97% { opacity: .6 } }
.holo .base { position: absolute; left: 10%; right: 10%; bottom: 6%; height: 14px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(200, 150, 46, calc(.6 + var(--amp) * .4)), transparent 70%); filter: blur(4px); }
.holo .rings { position: absolute; inset: 0; pointer-events: none; }
.holo .rings i { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(247, 243, 234, .35); transform: translate(-50%, -40%) scale(calc(.9 + var(--amp) * .15)); opacity: calc(.14 + var(--amp) * .6); transition: transform .1s linear, opacity .1s linear; }
.holo .rings i:nth-child(2) { width: 86%; transform: translate(-50%, -40%) scale(calc(.95 + var(--amp) * .25)); opacity: calc(.08 + var(--amp) * .4); }
.holo .mic { position: absolute; left: 50%; bottom: 14%; width: 60%; height: 3px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(247, 243, 234, calc(.15 + var(--mic) * .7)), transparent); opacity: 0; transition: opacity .4s; }
.holo.is-listening .mic { opacity: 1; }
.caption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(247, 243, 234, .94); color: var(--ink); font-size: 15px; line-height: 1.4; min-height: 46px; z-index: 4; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.caption b { color: var(--teal); font-weight: 700; margin-right: 6px; }
.caption .you { color: var(--mute); }
.hud { position: absolute; top: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 4; pointer-events: none; }
.state { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(8, 36, 38, .75); font-size: 13px; font-weight: 700; color: var(--ivory); border: 1px solid rgba(247, 243, 234, .25); z-index: 4; }
.state i { width: 8px; height: 8px; border-radius: 50%; background: var(--brass); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 50% { opacity: .4 } }
.state.off i { animation: none; background: rgba(247, 243, 234, .5); }
.timer { padding: 7px 12px; border-radius: 999px; background: rgba(8, 36, 38, .75); font-size: 13px; font-weight: 700; color: var(--ivory); border: 1px solid rgba(247, 243, 234, .25); font-variant-numeric: tabular-nums; z-index: 4; }
.timer:empty { display: none; }
.stage .cta { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); white-space: nowrap; z-index: 5; }
.stage .cta .btn { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.hang { background: #B23A3A !important; color: #fff !important; }
.note { font-size: 14px; color: rgba(247, 243, 234, .8); text-align: center; margin-top: 46px; }

/* Sections */
section { padding: 88px 0; }
section.tight { padding: 60px 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .grid3, .grid2 { grid-template-columns: 1fr; } }
.tile { background: var(--sage); border-radius: 14px; padding: 22px 24px; }
.tile h3 { font-family: Figtree, sans-serif; font-weight: 700; font-size: 18px; color: var(--teal); margin: 0 0 6px; }
.tile p { margin: 0; }
.on-sage .tile { background: var(--ivory); }

/* The problem */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 760px) { .scenes { grid-template-columns: 1fr; } }
.scene { background: var(--sage); border-radius: 16px; padding: 24px; display: grid; gap: 6px; align-content: start; }
.scene .who { font-family: "Young Serif", Georgia, serif; font-size: 22px; }
.scene .missed { color: #9B3B2E; font-weight: 700; font-size: 15px; margin-top: 8px; }

/* The diary */
.diary-block { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .diary-block { grid-template-columns: 1fr; } }
.diary { background: var(--ivory); border-radius: 18px; padding: 22px; box-shadow: 0 18px 50px rgba(15, 61, 62, .12); }
.diary .day { display: flex; justify-content: space-between; font-weight: 700; color: var(--teal); border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 6px; }
.diary .slot { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 16px; align-items: start; }
.diary time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mute); }
.diary .slot.new { background: var(--sage); margin: 6px -22px; padding: 12px 22px; border-radius: 10px; border-bottom: 0; }
.diary .tag { display: inline-block; background: var(--teal); color: var(--ivory); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: 1px; }
.diary .slot.quiet { color: var(--mute); }

/* Who it's for */
.kinds { display: grid; gap: 18px; }
.kind { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; background: var(--sage); border-radius: 18px; padding: 28px; align-items: start; }
@media (max-width: 860px) { .kind { grid-template-columns: 1fr; } }
.kind h3 { margin-bottom: 10px; }
.kind .quote { font-family: "Young Serif", Georgia, serif; font-size: 21px; line-height: 1.35; color: var(--teal); margin: 0 0 8px; }
.kind ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.kind li { padding-left: 26px; position: relative; }
.kind li::before { content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--brass); }
.kind .fits { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.kind .fits a { font-weight: 700; padding: 10px 0; display: inline-block; }
.everyone { background: var(--ivory); border: 1.5px solid var(--line); border-radius: 14px; padding: 18px 22px; margin-top: 6px; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--ivory); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; position: relative; }
.plan .rule { height: 6px; border-radius: 999px; background: var(--brass); width: 64px; margin-bottom: 18px; }
.plan.hot { background: var(--teal); color: var(--ivory); }
.plan.hot .rule { width: 100%; }
.plan.hot .mute { color: rgba(247, 243, 234, .8); }
.plan .name { font-family: "Young Serif", Georgia, serif; font-size: 22px; }
.plan .price { font-family: "Young Serif", Georgia, serif; font-size: 52px; letter-spacing: -0.02em; margin: 6px 0 0; line-height: 1; }
.plan .price small { font-family: Figtree, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.plan .mins { margin: 8px 0 14px; }
.plan .for { margin-bottom: 14px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; font-size: 16px; }
.plan li { padding-left: 24px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); }
.plan .btn { margin-top: auto; }
.plan.hot .btn.primary { background: var(--brass); color: var(--ink); }
.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 900px) { .terms { grid-template-columns: 1fr 1fr; } }
.terms div { font-size: 15px; color: var(--mute); }
.terms b { display: block; color: var(--ink); margin-bottom: 4px; }

/* Compare */
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { color: var(--mute); font-weight: 700; font-size: 15px; }
.compare tr.me td { font-weight: 700; color: var(--teal); }
.tablewrap { overflow-x: auto; }

/* FAQ */
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
summary::after { content: "+"; color: var(--brass); font-size: 24px; font-weight: 400; }
details[open] summary::after { content: "\2013"; }
details p { margin: 12px 0 0; }

/* Teams page */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.panel { background: var(--ivory); border-radius: 18px; padding: 26px; }
.panel.dev { border: 2px dashed var(--brass); background: transparent; }
.flag { display: inline-block; background: var(--brass); color: var(--ink); font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.panel ul { padding-left: 20px; margin: 0; }
.panel li { margin: 6px 0; }
.contact { background: var(--sage); border-radius: 18px; padding: 26px; display: grid; gap: 10px; }
.contact a { font-weight: 700; }

/* Final */
.final { text-align: center; }
.final .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

footer { background: var(--teal); color: rgba(247, 243, 234, .85); padding: 40px 0; font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
footer nav { flex-wrap: wrap; }
footer nav a { font-size: 15px; display: inline; }
footer .logo { font-size: 19px; }

/* The opening (intro.js), in the site's colours */
.intro { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse 70% 60% at 50% 40%, #11484A 0%, var(--stage) 70%); cursor: pointer; transition: opacity .9s ease; }
.intro.out { opacity: 0; pointer-events: none; }
.intro canvas { position: absolute; inset: 0; }
.intro-word { position: absolute; left: 50%; top: 88%; transform: translate(-50%, 10px); display: flex; align-items: center; gap: 14px; font-family: "Young Serif", Georgia, serif; font-size: clamp(30px, 5vw, 54px); color: var(--ivory); opacity: 0; transition: opacity .7s ease, transform .7s ease; white-space: nowrap; }
.intro-word img { width: .95em; height: .95em; border-radius: 22%; }
.intro-word b { color: var(--brass); font-weight: 400; }
.intro.word .intro-word { opacity: 1; transform: translate(-50%, 0); }
.intro-skip { position: absolute; right: 24px; bottom: 20px; color: rgba(247, 243, 234, .7); font-size: 13px; font-weight: 700; }
body.intro-on { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .holo .sweep, .holo .flicker, .state i { animation: none; } }

/* The portrait arch on the trade pages and the larger-companies page: Maggie as she is, no hologram. */
.arch { width: min(100%, 380px); margin: 0 auto; aspect-ratio: 4 / 5; border-radius: 190px 190px 24px 24px; overflow: hidden; background: var(--stage); box-shadow: inset 0 0 0 1px rgba(247, 243, 234, .14), 0 14px 40px rgba(0, 0, 0, .25); }
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
@media (max-width: 900px) { .arch { width: min(100%, 280px); } }

/* Things a thumb has to hit: the question rows and the footer links reach 44px. */
summary { min-height: 44px; box-sizing: border-box; }
footer nav a { padding: 12px 0; }

/* Call mode: while a call is on, the stage takes the whole screen and the figure of points replaces the portrait. */
body.callmode { overflow: hidden; }
body.callmode .stage { position: fixed; inset: 0; width: auto; max-width: none; aspect-ratio: auto; margin: 0; z-index: 90; background: var(--stage); animation: callin .5s ease; }
@keyframes callin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
body.callmode .holo { border-radius: 0; box-shadow: none; background: radial-gradient(ellipse 60% 70% at 50% 60%, rgba(200, 150, 46, calc(.08 + var(--amp) * .22)) 0%, #0E3A3B 40%, var(--stage) 100%); }
body.callmode .holo .person, body.callmode .holo .rings, body.callmode .holo .base { display: none; }
body.callmode .holo .live { position: absolute; inset: 0; overflow: hidden; } /* no z-index: the pictures must blend with the stage behind them */
/* Every picture sits in the same frame: her standing still, the sit-down clip, the idle loop, the still that stands in for them. */
body.callmode .holo .live img, body.callmode .holo .live video { position: absolute; left: 50%; top: 4%; height: 110%; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 30%; object-fit: cover; opacity: 0; transition: opacity .5s ease, transform 1.1s cubic-bezier(.4, 0, .2, 1); }
body.callmode .holo .live .sit, body.callmode .holo .live .loop, body.callmode .holo .live .greet, body.callmode .holo .live .refuse, body.callmode .holo .live .still { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 100%); mask-composite: intersect; } /* the office fades out at its edges, like a projection, instead of ending in a hard rectangle */
body.callmode .holo .live .stand { mix-blend-mode: screen; clip-path: inset(100% 0 0 0); transition: clip-path 1s ease-out, opacity .4s ease; }
body.callmode .holo .live.in.standing .stand { opacity: .88; clip-path: inset(0 0 0 0); }
body.callmode .holo .live.sitting .stand { opacity: 0; transition: opacity .25s ease .1s; }
body.callmode .holo .live.sitting .sit { opacity: .92; }
body.callmode .holo .live.holding .loop { opacity: .92; }
body.callmode .holo .live.holding.greeting .greet { opacity: .92; transition: opacity .25s ease; }
body.callmode .holo .live.holding.greeting .loop { opacity: 0; transition: opacity .25s ease; }
body.callmode .holo .live.holding.refusing .refuse { opacity: .92; transition: opacity .25s ease; }
body.callmode .holo .live.holding.refusing .loop, body.callmode .holo .live.holding.refusing .greet { opacity: 0; transition: opacity .25s ease; }
body.callmode .holo .live.holding .sit { opacity: 0; transition: opacity .7s ease; }
body.callmode .holo .live.holding.no-loop .still, body.callmode .holo .live.holding .still:only-of-type { opacity: .92; }
body.callmode .holo .live.push img, body.callmode .holo .live.push video { transform: translateX(-50%) scale(1.22); }
body.callmode .holo .live.skipped img, body.callmode .holo .live.skipped video { transition: opacity .3s ease, transform 0s; }
body.callmode .holo .live .scanline { position: absolute; left: 0; right: 0; height: 18%; bottom: -18%; background: linear-gradient(180deg, transparent, rgba(247, 243, 234, .28) 50%, transparent); opacity: 0; pointer-events: none; }
body.callmode .holo .live.in.standing .scanline { animation: callreveal 1.05s ease-out forwards; }
@keyframes callreveal { from { bottom: -18%; opacity: 1; } 85% { opacity: 1; } to { bottom: 100%; opacity: 0; } }
body.callmode .holo .live .sweepband { position: absolute; top: 0; bottom: 0; width: 16%; left: -16%; background: linear-gradient(90deg, transparent, rgba(247, 243, 234, .22) 50%, transparent); opacity: 0; pointer-events: none; }
body.callmode .holo .live .sweepband.go { animation: callsweep .7s ease-out forwards; }
@keyframes callsweep { from { left: -16%; opacity: 1; } to { left: 100%; opacity: 0; } }
body.callmode .holo .floorglow { position: absolute; left: 50%; bottom: 0; width: 80vw; height: 34vh; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(200, 150, 46, calc(.22 + var(--amp) * .4)) 0%, rgba(200, 150, 46, 0) 70%); z-index: 1; pointer-events: none; }
@media (max-width: 760px) { body.callmode .holo .live img, body.callmode .holo .live video { height: 100%; top: 0; transform-origin: 50% 26%; } body.callmode .holo .live.push img, body.callmode .holo .live.push video { transform: translateX(-50%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { body.callmode .holo .live img, body.callmode .holo .live video { transition: opacity .3s ease; } body.callmode .holo .live.in.standing .scanline, body.callmode .holo .live .sweepband.go { animation: none; } }
body.callmode .caption { left: 50%; right: auto; transform: translateX(-50%); width: min(92%, 720px); bottom: 104px; font-size: 17px; padding: 14px 18px; }
body.callmode .stage .cta { bottom: 32px; }
body.callmode #hint { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); width: min(92%, 640px); z-index: 91; margin: 0; }
@media (prefers-reduced-motion: reduce) { body.callmode .stage { animation: none; } }

/* Phones get a short home page; the detail lives on its own pages. Desktops keep the full page. */
.phone-only { display: none; }
@media (max-width: 760px) { .phone-only { display: block; } .desk-only { display: none !important; } }
.short { display: grid; gap: 10px; margin-top: 18px; }
.short a.row { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--sage); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--ink); font-weight: 700; min-height: 44px; }
.short a.row span { color: var(--mute); font-weight: 400; font-size: 15px; text-align: right; flex-shrink: 0; }
.short a.row small { display: block; color: var(--mute); font-weight: 400; font-size: 15px; margin-top: 2px; }
.on-sage .short a.row { background: var(--ivory); }

/* "Hear her answer as your business" (index.html #yours, yours.js). */
.yours { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.yours input { flex: 1 1 260px; font: inherit; font-size: 17px; padding: 14px 18px; border-radius: 999px; border: 1.5px solid rgba(20, 33, 31, .25); background: #fff; color: var(--ink); min-width: 0; }
.yours input:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yours-out { margin-top: 18px; }
.yours-err { background: #fff; border: 1px solid rgba(200, 150, 46, .55); padding: 12px 16px; border-radius: 10px; }
.learned { background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 0 rgba(20, 33, 31, .08); }
.learned-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 20px; }
.learned-head span { font-size: 16px; opacity: .7; }
.learned .small { font-size: 14px; opacity: .75; margin: 8px 0 0; }
.learned-services { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.learned-services li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(20, 33, 31, .1); padding: 6px 0; font-size: 15px; }
.learned-services li span { opacity: .7; white-space: nowrap; }
.learned .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.learned .btn.ghost { color: var(--teal); }
.learned .btn[disabled] { opacity: .5; cursor: default; }
@media (max-width: 600px) { .learned-services { grid-template-columns: 1fr; } .learned .actions .btn { width: 100%; } }
/* The stage takes the industry's tone once a preview is made (yours.js sets data-industry on body). */
body[data-industry="clinic"] .hero, body[data-industry="dentist"] .hero, body[data-industry="vet"] .hero { background: linear-gradient(180deg, #3F3A4A 0%, #171420 100%); }
body[data-industry="salon"] .hero, body[data-industry="barber"] .hero { background: linear-gradient(180deg, #4A2743 0%, #1C0F1A 100%); }
body[data-industry="plumbing"] .hero, body[data-industry="electrical"] .hero, body[data-industry="building"] .hero, body[data-industry="locksmith"] .hero, body[data-industry="garage"] .hero, body[data-industry="cleaning"] .hero, body[data-industry="gardening"] .hero { background: linear-gradient(180deg, #2A3B45 0%, #10191F 100%); }

/* The questions, answered in Maggie's voice (faq.js). */
#faq summary .speak { display: inline-block; width: 18px; height: 18px; margin-left: 10px; vertical-align: -3px; border-radius: 50%; background: var(--brass); position: relative; opacity: .85; }
#faq summary .speak::after { content: ""; position: absolute; left: 6px; top: 5px; width: 7px; height: 8px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
#faq details.speaking summary .speak { animation: speakpulse 1s ease-in-out infinite; }
#faq details.speaking summary .speak::after { left: 5px; width: 3px; height: 8px; clip-path: none; box-shadow: 5px 0 0 var(--ink); }
@keyframes speakpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
#faq p .fw { transition: color .25s ease; }
#faq details.speaking p .fw { color: rgba(20, 33, 31, .3); }
#faq details.speaking p .fw.on { color: inherit; }
@media (prefers-reduced-motion: reduce) { #faq details.speaking summary .speak { animation: none; } #faq details.speaking p .fw { color: inherit; } }
/* Her portrait beside an answer she is saying (faq.js). */
#faq details .maggie-answer { float: left; width: 132px; aspect-ratio: 3 / 4; margin: 4px 18px 6px 0; border-radius: 14px; overflow: hidden; background: var(--stage); box-shadow: 0 0 0 2px var(--brass), 0 8px 24px rgba(20, 33, 31, .18); }
#faq details .maggie-answer video { width: 100%; height: 100%; object-fit: cover; display: block; }
#faq details p::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) { #faq details .maggie-answer { width: 96px; margin-right: 12px; } }