body { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.mk a:focus-visible, .mk button:focus-visible, .wl:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.bar { background: var(--ink); color: var(--bg); font: 500 13.5px/20px var(--font-text); }
.bar a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.nav { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.navlink { color: var(--ink-muted); text-decoration: none; font: 500 14px/20px var(--font-text); }
.navlink:hover { color: var(--ink); }
.btn2 { height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 14px/20px var(--font-text); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.btn2:hover { border-color: var(--ink-muted); background: var(--surface-hover); }
.btn1 { height: 40px; padding: 0 16px; border-radius: 8px; border: 0; background: var(--volt); color: var(--on-volt); font: 650 14px/20px var(--font-text); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; transition: transform var(--dur-instant) var(--ease-spring), box-shadow var(--dur-fast); }
.btn1:hover { box-shadow: var(--shadow-glow); }
.signin { height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink); font: 600 14px/20px var(--font-text); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; transition: background-color var(--dur-fast); }
.signin:hover { background: var(--surface-hover); }
.signin:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn1:active { transform: scale(0.97); }
.switch { position: relative; width: 48px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; flex: none; } /* 48x44 tap target; the 40x22 track below is drawn inside it */
.switch::before { content: ""; position: absolute; left: 4px; top: 11px; width: 40px; height: 22px; box-sizing: border-box; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-sunken); }
.switch span { position: absolute; top: 14px; left: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform var(--dur-base) var(--ease-spring); }
.switch:focus-visible { border-radius: 999px; }
.switch-night span { transform: translateX(18px); }
.meta { font: 450 12.5px/18px var(--font-mono); color: var(--ink-muted); }
.kicker { font: 600 13px/18px var(--font-text); color: var(--volt-text); }
.h1 { margin: 0; font: 760 68px/1.0 var(--font-display); letter-spacing: -0.035em; }
.h2 { margin: 0; font: 720 42px/1.05 var(--font-display); letter-spacing: -0.03em; }
.h3 { margin: 0; font: 680 22px/28px var(--font-display); letter-spacing: -0.015em; }
.lede { margin: 0; font: 400 19px/29px var(--font-text); color: var(--ink-muted); }
.body { margin: 0; font: 400 16px/25px var(--font-text); color: var(--ink-muted); }
.wl { display: flex; align-items: center; height: 48px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); overflow: hidden; max-width: 480px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.wl:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--volt-soft); outline: none; }
.wl input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px/22px var(--font-text); padding: 0 14px; }
.wl input::placeholder { color: var(--ink-muted); }
.wl button { height: 100%; padding: 0 18px; border: 0; background: var(--volt); color: var(--on-volt); font: 650 14.5px/20px var(--font-text); cursor: pointer; white-space: nowrap; }
.wl-err { border-color: var(--flare-text); }
.err { font: 500 13px/18px var(--font-text); color: var(--flare-text); }
.ok { display: flex; align-items: center; gap: 10px; font: 500 15px/22px var(--font-text); animation: aq-toast-in var(--dur-slow) var(--ease-spring) both; }
.ok-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--volt); color: var(--on-volt); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ok-dot path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: aq-draw var(--dur-slow) var(--ease-out) 120ms forwards; }
.pain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.pain > div { padding: 24px 28px 0 0; }
.pain > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.pain .n { font: 720 15px/20px var(--font-mono); color: var(--ink-muted); }
.tabs { display: inline-flex; padding: 4px; border-radius: 10px; background: var(--surface-sunken); border: 1px solid var(--line); position: relative; }
.tabs button { height: 36px; padding: 0 18px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-muted); font: 600 14px/20px var(--font-text); cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.tabs .on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.aud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; animation: aq-row-in var(--dur-slow) var(--ease-out) both; }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font: 400 15.5px/23px var(--font-text); color: var(--ink); }
.checks li:last-child { border-bottom: 1px solid var(--line); }
.checks li small { display: block; color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.ck { width: 20px; height: 20px; border-radius: 50%; background: var(--volt); color: var(--on-volt); display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; font: 800 11px/1 var(--font-text); }
.mod { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.mod-rev .mod-text { order: 2; }
.mod-text { display: flex; flex-direction: column; gap: 14px; }
.mod-text ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mod-text li { display: flex; gap: 10px; font: 400 15px/22px var(--font-text); color: var(--ink); }
.mod-text li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--volt-text); margin-top: 8px; flex: none; }
.vis { border-radius: 12px; border: 1px solid var(--line); background: var(--surface-sunken); padding: 28px; min-height: 260px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.lane { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 10px; font: 500 12px/16px var(--font-text); color: var(--ink-muted); }
.lane-track { position: relative; height: 34px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.blk { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; padding: 0 8px; font: 600 11px/24px var(--font-text); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ai3 > div { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font: 550 14px/36px var(--font-text); color: var(--ink); }
.grp { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); align-items: start; }
.grp > span { font: 600 14px/36px var(--font-text); color: var(--ink-muted); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; background: var(--surface-sunken); color: var(--ink-muted); font: 600 10.5px/20px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.sec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.sec-grid > div { padding: 18px 18px 18px 0; font: 400 14px/21px var(--font-text); color: var(--ink-muted); }
.sec-grid > div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.sec-grid b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.price { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.faq { border-top: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 16px; padding: 20px 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 600 17px/24px var(--font-text); }
.faq-q i { margin-left: auto; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); transition: transform var(--dur-base) var(--ease-out); font-style: normal; font-size: 20px; flex: none; }
.faq-open .faq-q i { transform: rotate(45deg); }
.faq-a { padding: 0 48px 22px 0; font: 400 15.5px/24px var(--font-text); color: var(--ink-muted); animation: aq-row-in var(--dur-base) var(--ease-out) both; }
.final { border-radius: 16px; background: var(--ink); color: var(--bg); padding: 64px 56px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.final .h2 { color: var(--bg); }
.final p { margin: 0; font: 400 17px/26px var(--font-text); opacity: 0.75; }
.final .wl { background: var(--bg); border-color: transparent; }
.final .wl input { color: var(--ink); }
.final .ok { color: var(--bg); }
.final .err { color: var(--flare); }
.final a.lnk { color: var(--bg); font: 600 14px/20px var(--font-text); }
.foot h4 { margin: 0 0 10px; font: 600 13px/18px var(--font-text); color: var(--ink); }
.foot a { display: block; color: var(--ink-muted); text-decoration: none; font: 400 14px/26px var(--font-text); }
.foot a:hover { color: var(--ink); }
@media (max-width: 980px) {
  .wrap { padding: 0 20px; }
  .h1 { font-size: 42px; } .h2 { font-size: 30px; }
  .hero, .aud, .mod, .price, .final { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
  .mod-rev .mod-text { order: 0; }
  .pain, .ai3, .sec-grid, .footcols { grid-template-columns: minmax(0, 1fr) !important; }
  .pain > div + div, .sec-grid > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .pain > div { padding: 20px 0; }
  .grp { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .navlinks, .nav .navcontact { display: none !important; }
  .nav > .wrap { gap: 10px !important; }
  .final { padding: 36px 22px; }
  .vis { padding: 18px; }
}
[hidden] { display: none !important; }
@media (max-width: 400px) { .nav > .wrap { gap: 6px !important; } .signin { padding: 0 6px; } .nav .btn1 { padding: 0 10px; font-size: 13px; } }

.foot .fh { margin: 0 0 10px; font: 600 13px/18px var(--font-text); color: var(--ink); }
.consent { margin: 0; max-width: 480px; font: 400 12.5px/18px var(--font-text); color: var(--ink-muted); }
.consent a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.final .consent { color: var(--bg); opacity: 0.75; }
.skip { position: absolute; left: 8px; top: -48px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--volt); color: var(--on-volt); font: 650 14px/20px var(--font-text); text-decoration: none; }
.skip:focus { top: 8px; }

/* ===== UX pass ===== */
#solutions { --sp: 152px; } #product { --sp: 160px; } #ai { --sp: 176px; } #integrations { --sp: 144px; } #pricing { --sp: 136px; } #faq { --sp: 128px; } #walkthrough { --sp: 104px; }
.h1 { font-size: clamp(36px, 4.5vw, 72px); line-height: 1; letter-spacing: -0.04em; }
.h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.035em; max-width: 18ch; }
.h3.big { font-size: 26px; line-height: 31px; letter-spacing: -0.02em; }
.lede { max-width: 34em; }
.hero > div:first-child { padding-right: 8px; }

/* nav */
.nav { transition: box-shadow var(--dur-base) var(--ease-out); }
.nav.scrolled { box-shadow: var(--shadow-lift); }
.navlink { position: relative; padding: 6px 0; transition: color var(--dur-fast); }
.navind { position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; border-radius: 2px; background: var(--volt-text); opacity: 0; transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.navind.on { opacity: 1; }
.btn1 { position: relative; overflow: hidden; }
.btn1::after, .wl button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.btn1:hover::after, .wl button:hover::after { transform: translateX(120%); transition: transform 640ms var(--ease-out); }
.btn1:active { transform: scale(0.96); }
.wl button { position: relative; overflow: hidden; }
.btn1.fake, .btn2.fake { cursor: default; pointer-events: none; gap: 8px; }
.btn2.fake { height: 34px; } .btn1.fake { height: 34px; }


/* problem: live glyphs */
.pain { border-top: 0; gap: 32px; }
.pain > div, .pain > div + div { padding: 0; border: 0; }
.glyph { height: 84px; display: flex; align-items: center; margin-bottom: 18px; }
.pain .h3 { margin: 0 0 8px; }
.gbar { width: 100%; max-width: 220px; height: 8px; border-radius: 4px; background: var(--surface-sunken); border: 1px solid var(--line); overflow: hidden; }
.gbar i { display: block; height: 100%; width: 100%; background: var(--volt-text); border-radius: 4px; }
.gcap { margin-left: 12px; font: 450 12.5px/18px var(--font-mono); color: var(--ink-muted); min-width: 7ch; }
.pain.run .gbar i { animation: gbar 5.4s linear backwards; }
@keyframes gbar { from { width: 0; } }
.chat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.chat p { margin: 0; padding: 0 11px; border-radius: 10px 10px 10px 3px; background: var(--surface); border: 1px solid var(--line); font: 450 13px/20px var(--font-text); color: var(--ink); }
.pain.run .chat p { animation: aq-row-in var(--dur-slow) var(--ease-out) backwards; }
.pain.run .chat p:nth-child(2) { animation-delay: 900ms; } .pain.run .chat p:nth-child(3) { animation-delay: 1800ms; }

/* audience tabs: sliding thumb */
.tabs .on { background: transparent; box-shadow: none; }
.tabs button { position: relative; z-index: 1; }
.tabthumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-card); transition: transform var(--dur-slow) var(--ease-spring), width var(--dur-slow) var(--ease-spring); }
.tabs .on { color: var(--ink); }
.aud { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

/* tour */
.tour-title { margin-bottom: 48px; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.tour-steps { position: relative; padding-left: 40px; --fill: 0px; }
.tour-steps::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.tour-steps::after { content: ""; position: absolute; left: 6px; top: 8px; width: 2px; height: var(--fill); background: var(--volt-text); border-radius: 2px; transition: height var(--dur-slow) var(--ease-out); }
.tstep { position: relative; min-height: 350px; display: flex; flex-direction: column; gap: 14px; justify-content: center; opacity: 0.38; transition: opacity var(--dur-base) var(--ease-out); }
.tstep.on { opacity: 1; }
.tstep::before { content: ""; position: absolute; left: -40px; top: calc(50% - var(--half, 0px)); width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transition: background-color var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-spring); display: none; }
.tstep ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tstep li { display: flex; gap: 10px; font: 400 15px/22px var(--font-text); color: var(--ink); }
.tstep li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--volt-text); margin-top: 8px; flex: none; }
.tdot { position: absolute; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transition: background-color var(--dur-base), border-color var(--dur-base), transform var(--dur-base) var(--ease-spring); }
.tdot.reached { background: var(--volt); border-color: var(--volt-text); }
.tdot.now { transform: scale(1.3); animation: aq-ping 1.8s var(--ease-out) infinite; }
.tour-stage { position: sticky; top: max(96px, calc(50vh - 300px)); }

/* AI */
.ai-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: center; }
.ai-copy { display: flex; flex-direction: column; gap: 16px; }

/* integrations: plain type, not chips */
.chips { gap: 4px 22px; }
.chip { height: auto; padding: 0; border: 0; background: transparent; font: 600 22px/34px var(--font-display); letter-spacing: -0.015em; color: var(--ink-muted); transition: color var(--dur-fast); }
.chip:hover { color: var(--ink); }

/* FAQ: animated height */
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.faq-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a { min-height: 0; overflow: hidden; visibility: hidden; padding: 0; animation: none; transition: visibility 0s linear var(--dur-base); }
.faq-open .faq-a { visibility: visible; transition-delay: 0s; }
.faq-a p { margin: 0; padding: 0 48px 22px 0; font: 400 15.5px/24px var(--font-text); color: var(--ink-muted); }

/* theme change: circular reveal */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: aq-reveal 640ms var(--ease-out); }
@keyframes aq-reveal { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 0)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 0)); } }

@media (max-width: 980px) {
  .tour-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tstep { min-height: 54vh; }
  .ai-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .h2 { max-width: none; }
  .glyph { height: 72px; }
  .chip { font-size: 19px; }
  #solutions, #product, #ai, #integrations, #pricing, #faq, #walkthrough { --sp: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.mk { overflow: clip !important; }
.tstep { opacity: 1; transition: none; }
.tstep .big, .tstep li { color: var(--ink-muted); transition: color var(--dur-base) var(--ease-out); }
.tstep.on .big, .tstep.on li { color: var(--ink); }

/* wide screens: the layout grows with the viewport and never leaves its column */
@media (min-width: 1800px) { .wrap { max-width: 1480px; } }
@media (min-width: 2300px) { .wrap { max-width: 1720px; } }
.hero > div, .tour-grid > *, .ai-grid > *, .aud > * { min-width: 0; }

/* hero: one orchestrated entrance on load */
.hero > div:first-child > * { animation: hero-rise 560ms var(--ease-out) backwards; }
.hero > div:first-child > :nth-child(2) { animation-delay: 60ms; } .hero > div:first-child > :nth-child(3) { animation-delay: 120ms; }
.hero > div:first-child > :nth-child(4) { animation-delay: 180ms; } .hero > div:first-child > :nth-child(5) { animation-delay: 240ms; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes hero-slide { from { opacity: 0; transform: translateX(24px); } }
.foot .meta a { display: inline; line-height: inherit; }

/* alignment pass 2026-10-07: sample notes, approval chain, approval decision, pricing calculator */
.samplenote { display: block; padding: 0 18px 14px; margin: 0; }
.fineprint { margin: 18px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.chain { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.chain .step { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-muted); font: 550 12.5px/26px var(--font-text); }
.chain .step.done { background: var(--volt-soft); color: var(--volt-text); }
.chain .step.done::before { content: "✓"; font-weight: 800; font-size: 11px; }
.chain .step.now { background: var(--amber-soft); color: var(--amber-text); }
.calc { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.calc-l { font: 600 14px/20px var(--font-text); color: var(--ink-muted); }
.calc-in { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 14px; align-items: center; }
.calc-in input[type="range"] { width: 100%; accent-color: var(--volt-text); margin: 0; }
.calc-in input[type="number"] { height: 40px; width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sunken); color: var(--ink); font: 600 16px/24px var(--font-text); padding: 0 10px; }
.calc input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc-out { display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.calc-out b { font: 740 44px/48px var(--font-display); letter-spacing: -0.02em; }
.calc-out span { font: 400 15px/22px var(--font-text); color: var(--ink-muted); }
.calc-bd { margin: 0; font: 400 14px/21px var(--font-text); color: var(--ink-muted); }
.price .checks b { font-weight: 650; }

/* Signup CTAs (D-123): one primary action per place; open mode swaps the label and target on the server */
.cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.tag { white-space: nowrap; }


/* mobile: the announcement bar goes; the header keeps the one Sign up link */
@media (max-width: 767px) { .bar { display: none; } }
/* Home: the guides and comparisons links. */
.learn-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.learn-links a { color: var(--volt-text); font-weight: 600; text-decoration: none; }
.learn-links a:hover { text-decoration: underline; }
/* Six top-nav links (Compare added): between the mobile breakpoint and 1180px the row is tight, so the gaps shrink and Contact us
   (also in the footer and the page end) is hidden, keeping Sign in and the trial button whole. */
@media (min-width: 981px) and (max-width: 1180px) {
  .nav > .wrap, .nav .nav-row { gap: 18px !important; }
  .navlinks { gap: 16px !important; }
  .nav .navcontact { display: none !important; }
}

/* touch targets: 44px header buttons, logo, breadcrumbs and footer links on phones */
@media (max-width: 760px) {
  .nav .btn1, .nav .signin { height: 44px; }
  .nav .wrap > a:first-child { min-height: 44px; }
  .btn1:not(.fake), .btn2:not(.fake) { min-height: 44px; }
  .tabs button { min-height: 44px; }
  .crumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .foot a { padding: 9px 0; }
  .foot .meta a { padding: 0; }
  .aq-seg button { min-height: 44px; }
}

/* Mobile and touch: a calm, static page. No scroll-linked rail, no dimmed or hidden content, no sticky stage. */
@media (max-width: 980px), (pointer: coarse) {
  .tour-stage, .tdot { display: none !important; }
  .tour-grid { display: block; }
  .tour-title { margin-bottom: 24px; }
  .tour-steps { padding-left: 0; }
  .tour-steps::before, .tour-steps::after, .tstep::before { display: none !important; }
  .tstep { min-height: 0; opacity: 1; padding: 20px 0; justify-content: flex-start; border-top: 1px solid var(--line); }
  .tstep:first-child { border-top: 0; padding-top: 0; }
  .tstep .big, .tstep li { color: var(--ink); transition: none; }
  .tstep .big { font-size: 26px; line-height: 32px; }
  .tstep .tshot { display: flex; }
  #solutions, #product, #ai, #integrations, #pricing, #faq, #walkthrough { --sp: 64px; }
}
/* Header on phones: the trial button always fits on one line */
@media (max-width: 520px) {
  .nav > .wrap { gap: 6px !important; }
  .nav .signin { padding: 0 6px; }
  .nav .btn1 { padding: 0 12px; font-size: 13px; letter-spacing: 0; white-space: nowrap; flex: none; }
}
@media (max-width: 380px) { .nav .btn1 { padding: 0 9px; font-size: 12.5px; } .nav .signin { padding: 0 4px; font-size: 13px; } }

/* Mobile menu: a <details> disclosure under 981px, where the top links are hidden (markup: scripts/build-seo.mjs mobileNav, behaviour: menu.js) */
.mnav { display: none; flex: none; }
.mnav-btn { list-style: none; cursor: pointer; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--ink); border: 1px solid var(--line-strong); background: var(--surface); }
.mnav-btn::-webkit-details-marker { display: none; }
.mnav-btn:hover { background: var(--surface-hover); }
.mnav-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mnav-ico, .mnav-ico::before, .mnav-ico::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.mnav-ico { position: relative; }
.mnav-ico::before, .mnav-ico::after { content: ""; position: absolute; left: 0; }
.mnav-ico::before { top: -6px; } .mnav-ico::after { top: 6px; }
.mnav[open] .mnav-ico { background: transparent; }
.mnav[open] .mnav-ico::before { top: 0; transform: rotate(45deg); } .mnav[open] .mnav-ico::after { top: 0; transform: rotate(-45deg); }
.mnav-panel { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: 8px 20px 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lift); max-height: calc(100vh - 80px); overflow-y: auto; }
.mnav-panel a { display: flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; font: 600 16px/24px var(--font-text); border-bottom: 1px solid var(--line); }
.mnav-panel a:last-child { border-bottom: 0; }
.mnav-panel a:hover { color: var(--volt-text); }
.mnav-panel a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 980px) { .mnav { display: block; } }
@media (min-width: 521px) { .mnav-signin { display: none !important; } }
@media (max-width: 520px) { .nav .signin { display: none; } }

/* ===== Home Phase 1 (conversion pass) ===== */
/* Hero: one headline, one line of support, one primary action with its micro-copy and a quiet second link */
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-act { display: flex; flex-direction: column; gap: 10px; }
.hero-act .cta-row { gap: 12px 24px; }
.hero-link { color: var(--ink); font: 600 15px/24px var(--font-text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.hero-link:hover { text-decoration-color: var(--ink); }
.hero-fine { margin: 0; font: 450 13.5px/20px var(--font-text); color: var(--ink-muted); }
/* Header: Contact us is a quiet text link so the trial button is the one filled action */
.navcontact { color: var(--ink-muted); font: 500 14px/20px var(--font-text); text-decoration: none; padding: 10px 4px; white-space: nowrap; }
.navcontact:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Compact trial band (home: after the pricing section, data-cta="band"; content pages: mid page, data-cta="mid") */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 22px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg, 16px); background: var(--surface-sunken); }
.cta-band-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cta-band .cta-band-title { margin: 0; max-width: none; font: 700 22px/28px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.cta-band .cta-band-fine { margin: 0; max-width: none; font: 450 13px/20px var(--font-mono); color: var(--ink-muted); }
.cta-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta-band .btn1 { color: var(--on-volt); text-decoration: none; }
.cta-band .btn2 { color: var(--ink); text-decoration: none; }
/* The tour had no top spacing of its own (the --sp variable only applies to sections that set padding-top inline) */
.tour { padding-top: 96px; }

/* Phones: the hero starts higher, so the sample queue sits right under the trial button */
@media (max-width: 980px) {
  .hero { padding-top: 28px !important; padding-bottom: 8px !important; }
  .hero-copy { gap: 16px; }
  .tour { padding-top: 56px; }
  .cta-band { padding: 20px; }
}
@media (max-width: 520px) { .cta-band-actions { width: 100%; } .cta-band-actions .btn1, .cta-band-actions .btn2 { flex: 1 1 100%; justify-content: center; } }

/* Touch targets: every link, button and field is at least 44px high on a phone or touch screen (checked by scripts/check-tap-targets.mjs).
   Links inside running text keep their line height: vertical padding on an inline box adds hit area without moving the lines,
   and a matching negative side margin keeps short words from shifting. */
@media (max-width: 760px), (pointer: coarse) {
  .body a, .consent a, .fineprint a, .samplenote a, .lnk, .hero-link { padding: 13px 8px; margin: 0 -8px; }
  .foot .meta a { padding: 13px 8px; margin: 0 -8px; }
  .crumbs a { padding: 12px 8px; margin: -12px -8px; }
  .learn-links { gap: 0 22px; }
  .learn-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; }
  .calc-in input[type="number"] { height: 44px; }
  .calc-in input[type="range"] { height: 44px; }
  .faq-q { min-height: 44px; }
}

/* ===== Home Phase 2: real product screenshots, one window frame for every page ===== */
/* The frame: a refined browser window (rounded, hairline border, shadow from the theme's pop token). The screenshot already carries the
   app's own top bar, so the chrome is just a slim strip with three dots. Images have width/height (no layout shift) and swap by theme. */
.frame { margin: 0; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.frame-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); opacity: 0.5; }
.frame-screen { display: block; background: var(--bg); }
.shot-light, .shot-dark { display: block; width: 100%; height: auto; }
.shot-dark { display: none; }
.mk[data-theme="night"] .shot-light { display: none; }
.mk[data-theme="night"] .shot-dark { display: block; }
.phone { margin: 0; padding: 5px; border-radius: 24px; background: var(--on-volt); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), var(--shadow-pop); }
.phone-screen { border-radius: 19px; overflow: hidden; background: var(--bg); }
.shotset { min-width: 0; }
.shotset > .samplenote, .shotset .tile-copy > .samplenote { padding: 0; margin-top: 14px; }

/* hero: the real queue in a window, the client portal on a phone overlapping its corner. The entrance is a slide only (no opacity), so it never delays first paint. */
.hero-visual { min-width: 0; }
.hero-stage { position: relative; padding-bottom: 44px; animation: hero-slide 640ms var(--ease-out) backwards; }
.hero-stage > .frame { box-shadow: var(--shadow-pop), 0 0 90px -24px color-mix(in srgb, var(--volt) 55%, transparent); }
.hero-stage .phone { position: absolute; right: -26px; bottom: 0; width: 21%; min-width: 96px; max-width: 150px; }
@keyframes hero-slide { from { transform: translateX(24px); } }

/* proof strip: four verified facts */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof > div { padding: 22px 24px 22px 0; display: flex; flex-direction: column; gap: 4px; }
.proof > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.proof b { font: 650 15px/21px var(--font-text); color: var(--ink); }
.proof span { font: 400 13.5px/20px var(--font-text); color: var(--ink-muted); }

/* audience tabs: copy and the checklist on the left, the matching screenshot on the right */
.aud-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.aud-shot { align-self: start; }

/* tour: three steps, the pinned stage crossfades between real screenshots (opacity only) */
.stage-set { display: grid; position: relative; padding-bottom: 28px; }
.pane { grid-area: 1 / 1; position: relative; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
.pane.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.pane .phone { position: absolute; right: -14px; bottom: -28px; width: 20%; max-width: 140px; }
.tour-stage > .samplenote { margin-top: 0; }
.tshot { display: none; flex-direction: column; margin-top: 18px; }
.tshot-stage { position: relative; padding-bottom: 20px; }
.tshot-stage .phone { position: absolute; right: -4px; bottom: 0; width: 27%; max-width: 118px; }
.steplink { align-self: flex-start; color: var(--volt-text); font: 650 15px/24px var(--font-text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.steplink:hover { text-decoration-color: var(--volt-text); }
.steplink:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.tour-more { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line); }
.tile-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; align-items: flex-start; }
.tile-copy .h3 { margin: 0; }

/* AI: the real draft with its tag, and three one-line points */
.ai-points { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ai-points li { padding: 14px 0; border-top: 1px solid var(--line); font: 400 16px/25px var(--font-text); color: var(--ink-muted); }
.ai-points li:last-child { border-bottom: 1px solid var(--line); }
.ai-points b { color: var(--ink); font-weight: 650; }
.ai-more { font-size: 14.5px; line-height: 22px; }
.ai-more a { color: var(--volt-text); font-weight: 650; }
.ai-shot { display: flex; flex-direction: column; }
.ai-stage { position: relative; max-width: 620px; margin: 0 auto; width: 100%; }
.shot-chip { position: absolute; right: 16px; top: -15px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--ink); color: var(--bg); font: 600 12.5px/18px var(--font-text); box-shadow: var(--shadow-lift); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); }

@media (max-width: 980px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof > div { padding: 16px 16px 16px 0; }
  .proof > div + div { padding-left: 16px; }
  .proof > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .proof > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero-stage { padding-bottom: 20px; }
  .hero-stage .phone { right: 8px; width: 24%; min-width: 88px; max-width: 120px; }
  .tour-more { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; padding-top: 32px; }
  .ai-stage { max-width: 480px; }
}
@media (prefers-reduced-motion: reduce) { .hero-stage { animation: none; } }

/* hero headline: 62px at most, so the concrete two-sentence headline sets in four lines beside the product, not five */
.hero .h1 { font-size: clamp(36px, 3.7vw, 62px); line-height: 1.02; }
@media (max-width: 980px) { .hero .h1 { font-size: 42px; } .frame-bar { height: 22px; } }

/* the same frame on content pages (MSP and internal IT heroes, pricing, the features hub) */
.page-shot { margin: 8px 0 0; }
.page-shot > .samplenote { padding: 0; margin-top: 14px; }
.page-stage { position: relative; padding-bottom: 22px; }
.page-stage .phone { position: absolute; right: 18px; bottom: 0; width: 17%; max-width: 140px; min-width: 84px; }
.cards > li:has(> .card-shot) { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); column-gap: 22px; row-gap: 6px; align-items: start; align-content: center; }
.cards > li:has(> .card-shot) > .card-shot { grid-row: 1 / span 2; }
.card-shot .frame { box-shadow: none; border-radius: 10px; }
.card-shot .frame-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-shot .shot-light, .card-shot .shot-dark { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@media (max-width: 640px) { .cards > li:has(> .card-shot) { grid-template-columns: minmax(0, 1fr); } .cards > li:has(> .card-shot) > .card-shot { grid-row: auto; } }

/* ===== Product screenshots placed in content (D-302): a framed screenshot with a short caption ===== */
/* .shotfig = frame + picture + caption. Tall screenshots show an `--ar` window cut from `--y` down (the same file, nothing redrawn) with a fade at
   the bottom edge, and the caption's "View full size" link opens the whole file. A small dialog is capped at `--max` and centred. */
.shotfig { margin: 8px 0; min-width: 0; }
.shotfig > .frame { border-radius: 12px; }
.shotfig-narrow { max-width: var(--max); margin-inline: auto; }
.shotfig .frame-screen { position: relative; }
.shotfig-crop .frame-screen { aspect-ratio: var(--ar); overflow: hidden; }
.shotfig-crop .shot-light, .shotfig-crop .shot-dark { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 0%); }
.shotfig-crop .frame-screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg)); }
.frame-doc { background: var(--surface-sunken); padding: 14px 14px 0; }
.frame-doc .frame-screen { background: transparent; }
.frame-doc .shot-light, .frame-doc .shot-dark { border: 1px solid var(--line); border-bottom: 0; border-radius: 4px 4px 0 0; }
.shotfig-crop.shotfig .frame-doc .frame-screen::after { height: 72px; background: linear-gradient(to bottom, transparent, var(--surface-sunken)); }
.shotfig > .phone { max-width: 260px; margin-inline: auto; }
.shotfig > figcaption.samplenote { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px; padding: 0; margin-top: 12px; }
.shotfig > figcaption > span { flex: 1 1 18em; min-width: 0; }
.shotfig .shot-full { flex: none; color: var(--volt-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.shotfig .shot-full:hover { color: var(--ink); }
.shotfig .shot-full:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.shot-full-dark { display: none !important; }
.mk[data-theme="night"] .shot-full-light { display: none !important; }
.mk[data-theme="night"] .shot-full-dark { display: inline !important; }

/* touch: the tour links and the tile link get the same 44px hit area as the other text links */
@media (max-width: 760px), (pointer: coarse) { .steplink { display: inline-flex; align-items: center; min-height: 44px; } }