/* Shared website header, pricing, and privacy pages. */
/* Anchors and keyboard focus clear the sticky header. Targets carry the offset,
   not page-wide scroll padding, so focusing the header itself never scrolls. */
.marketing-home main :is([id],a[href],button,input,select,textarea,summary,[tabindex]) { scroll-margin-top: calc(var(--site-header-height,80px) + 12px); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Shared navigation: quiet character colors, a tactile hover, one mobile drawer. */
.site-header { position: sticky; top: 0; z-index: 30; height: 80px; gap: 28px; background: #f8fbfff5; border-bottom: 1px solid #e3ebf5; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.site-header .site-brand { gap: 8px; padding-block: 10px; margin-block: -10px; font-size: 27px; letter-spacing: -1.3px; white-space: nowrap; }
.site-header .site-brand img { width: 29px; height: auto; }
.site-header .site-brand:has(.brand-wordmark) { gap:0; min-height:44px; }
.brand-symbol { display:grid; place-items:center; width:44px; height:44px; flex:none; transform-origin:center; transition:transform var(--duration-medium) var(--ease-smooth-out); }
.brand-wordmark { display:block; width:max-content; overflow:visible; font-kerning:none; } /* sized by its own text, so script never shifts it */
.brand-wordmark > span { display:block; width:max-content; padding-left:8px; }
/* Scrolling down reels the letters into the mark from the end of the name;
   scrolling up lets them back out from the start. Layout never changes. */
.brand-letter { display:inline-block; opacity:1; transform:none; transform-origin:0 70%; transition:opacity var(--duration-quick) var(--ease-smooth-out) calc(var(--duration-micro) + var(--letter-index) * 18ms),transform var(--duration-slow) var(--ease-smooth-out) calc(var(--letter-index) * 18ms); }
/* Clear the lettering before navigation takes its space; reverse restores space first. */
.has-get-sumlino .brand-wordmark { pointer-events:none; }
.has-get-sumlino .brand-letter { opacity:0; transform:translateX(calc(-7px * (var(--letter-index) + 1))) scale(.55); transition:opacity var(--duration-quick) var(--ease-smooth-out) calc((6 - var(--letter-index)) * 14ms),transform var(--duration-medium) var(--ease-smooth-out) calc((6 - var(--letter-index)) * 14ms); }
.brand-symbol { position:relative; }
.brand-symbol img { transition:opacity var(--duration-fast),transform var(--duration-slow) var(--ease-smooth-out); }
.brand-face { position:absolute; width:32px; display:block; opacity:0; transform:translateY(3px) scale(.9); transition:opacity var(--duration-fast),transform var(--duration-very-slow) var(--ease-smooth-out); }
.brand-face svg { display:block; width:100%; overflow:visible; }
.brand-face .client-character-crown { transform-origin:64px 40px; transition:transform var(--duration-very-slow) var(--ease-smooth-out); }
.has-get-sumlino .brand-symbol.is-alive img { opacity:0; transform:scale(.92); }
.has-get-sumlino .brand-face { opacity:1; transform:translateY(-1px) rotate(-3deg); }
.has-get-sumlino .brand-face .client-character-crown { transform:translateY(-3px) rotate(2deg); }
@media (hover: hover) and (pointer: fine) { .site-brand:hover .brand-face { transform:translateY(-3px) rotate(3deg); } }
@media (hover: hover) and (pointer: fine) { .site-brand:hover .brand-face .client-character-crown { transform:translateY(-7px) rotate(-3deg); } }
.site-header .site-brand:focus-visible { outline-offset:5px; }
.site-header nav { display: flex; align-items: center; gap: 12px; margin: 0; color: #4f6481; font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.site-header nav a { --nav-tint: #e5efff; --nav-edge: #bdd2f8; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; isolation: isolate; transition: transform var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast); }
.site-header nav a:nth-of-type(2) { --nav-tint: #e4f4ed; --nav-edge: #b9ddce; }
.site-header nav a:nth-of-type(3) { --nav-tint: #f0eafa; --nav-edge: #d8c9ec; }
.site-header nav a::before { content: ''; position: absolute; z-index: -1; inset: 7px 0; border: 1px solid transparent; border-radius: 7px; background: var(--nav-tint); opacity: 0; transition: opacity var(--duration-fast),box-shadow var(--duration-fast),border-color var(--duration-fast); }
.site-header nav a[aria-current="page"]::before { opacity: 1; border-color: var(--nav-edge); }
.site-header nav a[aria-current="page"] { color: #172c4a; }
@media(hover:hover) { .site-header nav a:hover { transform: translateY(-1px); color: #172c4a; } .site-header nav a:hover::before { opacity: 1; border-color: var(--nav-edge); box-shadow: 0 2px 0 var(--nav-edge); } .site-header nav a:nth-of-type(2):hover { transform: translateY(-1px); } }
.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }

.cta-arrow { display: block; flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-fast); }
/* Button system: one capsule family for every call to action, echoing the
   rounded pieces of the Sumlino mark. Variants change colour only; size,
   shape, motion and focus stay shared. Hierarchy comes from colour, not size. */
:root {
  --btn-height: 50px; --btn-pad: 24px; --btn-radius: 999px; --btn-font: 14.5px; --btn-min: 176px;
  --btn-blue: #075cff; --btn-blue-hover: #1467ff;
  --btn-quiet-ink: #1b3354; --btn-quiet-line: #d3dff0;
  --btn-focus: #0a2a63;
}
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-height); padding: 0 var(--btn-pad); border: 1px solid transparent; border-radius: var(--btn-radius); font: 650 var(--btn-font)/1 var(--font-body, Inter, "Segoe UI", Arial, sans-serif); letter-spacing: -.01em; white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transform: translateY(0); transition: transform var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick); }
/* A soft top light and a coloured lift, rather than a hard key edge. */
.btn-primary { --btn-shadow: inset 0 1px 0 #ffffff47, inset 0 -1px 0 #00287a33, 0 1px 2px #063ea533, 0 10px 22px -10px #075cffb3; border-color: #0657f0; background: var(--btn-blue) linear-gradient(180deg, #ffffff24, #ffffff00 62%); color: #fff; box-shadow: var(--btn-shadow); }
.btn-quiet { --btn-shadow: inset 0 1px 0 #fff, 0 1px 2px #1734540f, 0 10px 22px -14px #17345447; border-color: var(--btn-quiet-line); background: #ffffffe0; color: var(--btn-quiet-ink); box-shadow: var(--btn-shadow); }
@media(hover:hover) {
  .btn-primary:hover { --btn-shadow: inset 0 1px 0 #ffffff52, inset 0 -1px 0 #00287a33, 0 2px 4px #063ea533, 0 16px 30px -12px #075cffcc; background-color: var(--btn-blue-hover); transform: translateY(-1px); }
  .btn-quiet:hover { --btn-shadow: inset 0 1px 0 #fff, 0 2px 4px #1734540f, 0 14px 26px -14px #17345452; border-color: #b6cbed; background-color: #fff; color: #0b3f99; transform: translateY(-1px); }
  .btn:hover .cta-arrow { transform: translateX(3px); }
  .btn:hover .cta-arrow-down { transform: translateY(3px); }
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: 80ms; }
/* Two rings, white then navy, stay visible on white pages and on blue buttons. */
.btn:focus-visible { outline: 2px solid var(--btn-focus); outline-offset: 3px; box-shadow: var(--btn-shadow), 0 0 0 3px #fff; }
.btn .cta-arrow { width: 17px; height: 17px; stroke-width: 1.9; }
/* The hero pair is one even unit: the same size, centred on the page's axis. */
@media(min-width:761px) { .marketing-home .hero-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--btn-min), 1fr); width: max-content; gap: 12px; margin-inline: auto; } }
@media(max-width:700px) { :root { --btn-height: 48px; --btn-pad: 16px; --btn-font: 14px; } }
@media(prefers-reduced-motion:reduce) { .btn,.btn .cta-arrow { transition: background-color var(--duration-quick), border-color var(--duration-quick), color var(--duration-quick); } .btn:hover,.btn:active,.btn:hover .cta-arrow { transform: none; } }
/* Beta status sits beside each decision point, in plain facts. */
.beta-note { margin: 14px 0 0; color: #4f6481; font-size: 12px; font-weight: 500; line-height: 1.6; text-align: center; }
.beta-note i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: #20a582; box-shadow: 0 0 0 3px #20a5821f; }
.beta-note-detail::before { content: " · "; }
@media(max-width:620px) { .beta-note-detail { display: block; } .beta-note-detail::before { content: none; } }

.marketing-home .hero .beta-note { max-width: 560px; margin: 16px auto 0; font-size: 12px; }
@media(max-width:620px) { .marketing-home .hero .beta-note { max-width: 300px; font-size: 11.5px; } }
/* The header action is the strongest item in the bar, a size below the hero's. */
.site-header .header-cta { --btn-height: 42px; --btn-pad: 18px; --btn-font: 13.5px; }
@media(max-width:700px) { .site-header .header-cta { --btn-height: 44px; --btn-pad: 14px; --btn-font: 13px; } }
@media(max-width:360px) { .tour-record-preview-client { flex-wrap:wrap; } .tour-record-preview-name { flex:1 1 150px; } .tour-record-preview-client .tour-record-why { margin-left:31px; } }
@media(max-width:360px) { .site-header .header-cta { --btn-pad: 11px; --btn-font: 12.5px; } }
.header-menu { display: none; }
.site-header nav :is(.menu-eyebrow,.menu-extras,.menu-cast) { display: none; }
.site-header a,.header-menu { -webkit-tap-highlight-color: transparent; }
.nav-chevron { display: none; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-chevron path { vector-effect: non-scaling-stroke; }
.ui-arrow { display: inline-block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.12em; }
.site-header a:not(.btn):focus-visible,.header-menu:focus-visible { outline: 2px solid #075cff; outline-offset: 4px; border-radius: 8px; }

.pricing-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 95px 0 90px;
}
.pricing-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.pricing-intro .eyebrow {
  justify-content: center;
}
.pricing-intro h1 {
  margin: 24px 0;
  font-size: clamp(44px, 5.8vw, 74px);
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -0.055em;
}
.pricing-intro h1 em {
  display: block;
  color: var(--blue);
  font-style: normal;
}
/* Each phrase balances on its own line set, so neither strands its last word. */
.pricing-intro h1 br { display: none; }
.pricing-intro > p:last-child {
  max-width: 510px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.pricing-note {
  max-width: 660px;
  margin: 32px auto 0;
  color: #8a96a7;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}
.pricing-answers {
  max-width: 760px;
  margin: 95px auto 0;
}
.pricing-answers h2 {
  font-size: 29px;
  font-weight: 550;
  letter-spacing: -1px;
}
.pricing-answers a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The legal pages center their own 760px column; the shell spans the page
   so the shared header and footer line up with every other page. */
.legal-shell {
  max-width: none;
}
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 84px 0 110px;
}

.legal-page h1 {
  margin: 0;
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -3px;
}
.legal-updated {
  margin: 18px 0 58px;
  color: #8e97a4;
  font-size: 12px;
}
.legal-page section {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.legal-page section h2 {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: -0.25px;
}
.legal-page section p {
  margin: 0;
  color: #5a6574;
  font-size: 14px;
  line-height: 1.75;
}
.legal-back {
  margin-top: 24px;
}

@media (max-width: 620px) {
  
  
  .legal-page {
    padding-top: 48px;
  }
}

/* Homepage navigation stays available without taking over the small-screen story. */
.marketing-home { overflow-x: clip; }
.marketing-home .site-header { position: sticky; top: 0; z-index: 30; width: 100%; height: 80px; padding-inline: max(32px,calc((100vw - 1320px) / 2)); background: #f8fbffed; border-bottom: 1px solid #e3ebf5; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
/* One column for the whole home page: the header's edges, the demo, every
   section and the footer line up on it. Wide screens keep a gutter for the companion. */
.marketing-home { --page-column: min(1120px, calc(100% - clamp(32px, 8vw, 120px))); }
@media(min-width:1100px) { .marketing-home { --page-column: min(1120px, calc(100% - 240px)); } }
.marketing-home main,.marketing-home .site-footer { width: var(--page-column); }

.marketing-home .header-actions { gap: 8px; }

@media(max-width:800px) {
  .marketing-home .site-header { gap: 18px; padding-inline: 20px; }
  .marketing-home .site-header nav { gap: 18px; font-size: 13px; }
  .marketing-home .site-header .site-brand { font-size: 24px; }
  
}
@media(max-width:620px) {
  .marketing-home .hero-actions { width: min(100%,370px); gap: 4px; }
}
/* One header on every page: a full-width bar with its content on the home
   page's 1120px column, so the logo and the button never move between pages. */
:root { --header-column: min(1120px, calc(100% - clamp(32px, 8vw, 120px))); }
@media(min-width:1100px) { :root { --header-column: min(1120px, calc(100% - 240px)); } }
.site-header, .marketing-home .site-header { box-sizing: border-box; width: 100%; max-width: none; margin-inline: 0; padding-inline: calc((100% - var(--header-column)) / 2); }

/* Shared compact header, including founder, pricing, and privacy. */
@media(max-width:800px) {
 .site-header,.marketing-home .site-header { gap: 14px; }
 .site-header nav,.marketing-home .site-header nav { gap: 5px; font-size: 13px; }
 .site-header nav a { padding-inline: 10px; }
}
@media(max-width:700px) {
 .site-header,.marketing-home .site-header { display: flex; flex-wrap: nowrap; position: sticky; height: 68px; min-height: 68px; gap: 6px; width: 100%; padding: 0 14px; }
 .site-header .site-brand,.marketing-home .site-header .site-brand { margin-right: auto; font-size: 22px; gap: 5px; letter-spacing: -1px; }
 .site-header .site-brand img,.marketing-home .site-header .site-brand img { width: 24px; }
 .site-header .header-actions,.marketing-home .header-actions { gap: 4px; margin: 0; }
 
 .js .header-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; gap: 4px; width: 44px; height: 44px; border: 1px solid #dce6f5; border-radius: 11px; background: #ffffffb3; cursor: pointer; }
 .header-menu span { display: block; width: 17px; height: 1.5px; border-radius: 2px; background: #304b70; transition: transform var(--dropdown-open-dur) var(--dropdown-ease),opacity var(--dropdown-close-dur); }
 .header-menu[aria-expanded="true"] span:first-child { transform: translateY(5.5px) rotate(45deg); }
 .header-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
 .header-menu[aria-expanded="true"] span:last-child { transform: translateY(-5.5px) rotate(-45deg); }
 /* The phone menu fills the screen beneath the header row: big links, the
    community links and Get Sumlino, with three characters peeking in from the
    right edge. The sheet slides in from the right edge like a drawer, the
    links settle just behind it, then the extras and the characters follow.
    Closing slides the whole sheet back out to the right, quicker than it came.
    transform and opacity only; nothing here reaches desktop. */
 .js .site-header nav,.js .marketing-home .site-header nav { position: fixed; inset: 0; z-index: -1; width: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; margin: 0; padding: calc(var(--site-header-height, 68px) + 26px) 28px calc(24px + env(safe-area-inset-bottom)); background: #f8fbff; border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; }
 /* Keyframes rather than a resting off-screen transform: a closed sheet parked
    beyond the right edge would widen the page while the frosted bar contains it. */
 .js .site-header nav.t-dropdown { --dropdown-close-dur: 260ms; --sheet-ease: cubic-bezier(.32,.72,0,1); transform: none; opacity: 1; pointer-events: none; transition: none; }
 .js .site-header nav.t-dropdown.is-open { pointer-events: auto; animation: menu-sheet-in 380ms var(--sheet-ease) both; }
 .js .site-header nav.t-dropdown.is-closing { pointer-events: none; animation: menu-sheet-out var(--dropdown-close-dur) cubic-bezier(.4,0,.9,.6) both; }
 .js .site-header nav.is-open,.js .site-header nav.is-closing { visibility: visible; }
 /* The sheet is fixed to the screen, so the bar drops its frosted glass while
    the menu is open or closing, and Get Sumlino steps aside for the one below. */
 .js .site-header:is(.is-menu-open,:has(nav.is-closing)) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-bottom-color: transparent !important; }
 .js .site-header .header-actions { transition: opacity var(--duration-quick) ease-out; }
 .js .site-header.is-menu-open .header-actions { opacity: 0; pointer-events: none; }
 html.has-open-menu { overflow: hidden; }
 .site-header nav > a,.marketing-home .site-header nav > a { justify-content: flex-start; min-height: 0; padding: 5px 0; border-radius: 6px; color: #13233b; font-size: clamp(34px, 10.4vw, 44px); font-weight: 650; line-height: 1.08; letter-spacing: -.045em; }
 .site-header nav > a::before,.site-header nav > a::after { content: none; }
 .site-header nav > a[aria-current="page"],.site-header nav > a.is-going { color: #075cff; }
 .site-header .nav-chevron { display: none; }
 .js .site-header nav > a { opacity: 0; transform: translateX(48px); transition: none; }
 .js .site-header nav.is-open > a { opacity: 1; transform: none; transition: opacity 260ms ease-out var(--row-delay, 70ms),transform 420ms var(--sheet-ease) var(--row-delay, 70ms); }
 .js .site-header nav.is-open > a:nth-of-type(2) { --row-delay: 110ms; }
 .js .site-header nav.is-open > a:nth-of-type(3) { --row-delay: 150ms; }
 .js .site-header nav.is-open > a:nth-of-type(n + 4) { --row-delay: 190ms; }
 .js .site-header nav.is-open > a:active { opacity: .55; transition: opacity 80ms ease-out; }
 .js .site-header nav .menu-eyebrow,.js .site-header nav .menu-label { display: block; margin: 0 0 14px; color: #5d6f88; font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 16px; text-transform: uppercase; }
 .js .site-header nav .menu-extras { display: flex; flex: 1 0 auto; flex-direction: column; align-self: stretch; margin-top: 36px; }
 .js .site-header nav .menu-social { display: flex; gap: 10px; }
 .site-header nav .menu-extras a::before,.site-header nav .menu-extras a::after { content: none; }
 .site-header nav .menu-social a { min-height: 0; padding: 0; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #dce6f5; border-radius: 14px; background: #fff; color: #1c2f4b; }
 .site-header nav .menu-social svg { width: 20px; height: 20px; fill: currentColor; }
 .site-header nav .menu-social a:active { background: #eef3fa; }
 .js .site-header nav .menu-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 32px; }
 .site-header nav .menu-extras :is(.menu-cta, .menu-signin) { justify-content: center; width: 100%; min-height: 54px; padding: 0 22px; font-size: 16px; }
 .site-header nav .menu-note { margin: 0; color: #5d6f88; font-size: 12.5px; line-height: 18px; text-align: center; }
 .js .site-header nav .menu-extras { opacity: 0; transform: translateX(32px); transition: none; }
 .js .site-header nav.is-open .menu-extras { opacity: 1; transform: none; transition: opacity 260ms ease-out 230ms,transform 420ms var(--sheet-ease) 230ms; }
 .js .site-header nav .menu-cast { display: block; position: absolute; z-index: -1; top: calc(var(--site-header-height, 68px) + 62px); right: 0; width: 120px; height: 300px; pointer-events: none; }
 .menu-cast span { position: absolute; right: -28px; display: block; width: 92px; color: var(--character-ink, #075cff); opacity: 0; transform: translateX(130%) rotate(24deg); transition: transform var(--dropdown-close-dur) ease-in,opacity var(--dropdown-close-dur) ease-in; }
 .menu-cast span:nth-child(1) { top: 0; --tilt: -14deg; --cast-delay: 260ms; }
 .menu-cast span:nth-child(2) { top: 104px; right: -38px; width: 80px; --tilt: 12deg; --cast-delay: 330ms; }
 .menu-cast span:nth-child(3) { top: 196px; right: -20px; width: 68px; --tilt: -8deg; --cast-delay: 400ms; }
 .menu-cast svg { display: block; width: 100%; overflow: visible; }
 .js .site-header nav.is-open .menu-cast span { opacity: 1; transform: rotate(var(--tilt)); transition: transform 480ms cubic-bezier(.34,1.4,.64,1) var(--cast-delay),opacity 200ms ease-out var(--cast-delay); }
 /* While closing, everything stays put and rides out with the sheet. */
 .js .site-header nav.is-closing > a,.js .site-header nav.is-closing .menu-extras { opacity: 1; transform: none; transition: none; }
 .js .site-header nav.is-closing .menu-cast span { opacity: 1; transform: rotate(var(--tilt)); transition: none; }
 .site-header nav > a:focus-visible { outline: 2px solid #075cff; outline-offset: 4px; }
 html:not(.js) .site-header { flex-wrap: wrap; height: auto; }
 html:not(.js) .site-header nav { order: 4; width: 100%; }
}
@keyframes menu-sheet-in { from { transform: translateX(100%); } }
@keyframes menu-sheet-out { to { transform: translateX(100%); } }
@media(max-width:360px) {
 .site-header,.marketing-home .site-header { padding-inline: 8px; gap: 3px; }
 .site-header .site-brand,.marketing-home .site-header .site-brand { font-size: 20px; gap: 4px; }
 .site-header .site-brand img,.marketing-home .site-header .site-brand img { width: 22px; }
 
}
/* The primary action arrives on its own; character motion belongs to the brand. */
/* Clear over the hero, frosted once content moves beneath it. */
:is(.js .site-header,.site-header.has-scroll-cta) { background:#f8fbff00; border-bottom-color:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background-color var(--duration-fast) var(--ease-smooth-out),border-color var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out); }
:is(.js .site-header,.site-header.has-scroll-cta):is(.is-scrolled,.is-menu-open) { background:#f8fbffde; border-bottom-color:#cddcef99; box-shadow:0 6px 20px -14px #18365b33; -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); }
@media(max-width:700px) { .site-header.has-scroll-cta:is(.is-scrolled,.is-menu-open) { background:#f8fbffe6; } }
/* Phones and tablets: frosted from the first frame. Switching the glass on
   mid-swipe made iPhone Safari flash the bar and re-tint the status bar, and
   left the first 64px of content sliding under a clear header. Only the
   hairline and the soft shadow arrive once the page has moved. */
@media(max-width:1099px) {
 :is(.js .site-header,.site-header.has-scroll-cta) { background:#f8fbfff7; transition:border-color var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out); }
 @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :is(.js .site-header,.site-header.has-scroll-cta),:is(.js .site-header,.site-header.has-scroll-cta):is(.is-scrolled,.is-menu-open) { background:#f8fbffe6; -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); }
 }
 @media(prefers-reduced-transparency:reduce) {
  :is(.js .site-header,.site-header.has-scroll-cta),:is(.js .site-header,.site-header.has-scroll-cta):is(.is-scrolled,.is-menu-open) { background:#f8fbff; -webkit-backdrop-filter:none; backdrop-filter:none; }
 }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .site-header,.site-header.has-scroll-cta:is(.is-scrolled,.is-menu-open) { background:#f8fbfff7; } }
@media(prefers-reduced-transparency:reduce) { .site-header,.site-header.has-scroll-cta:is(.is-scrolled,.is-menu-open) { background:#f8fbff; -webkit-backdrop-filter:none; backdrop-filter:none; } }
.site-header .header-actions { margin-left:auto; }
/* The header's first state lands without transitions. */
.site-header.is-settling,.site-header.is-settling *,.site-header.is-settling *::before { transition: none !important; }
/* Tablets show Get Sumlino from the top; phones already do. */
@media(min-width:701px) and (max-width:1099px) { .site-header .header-cta-reveal { opacity:1; visibility:visible; transform:none; transition:none; } }
/* Get Sumlino keeps its place, then springs out from the right edge once the
   hero's own Try Sumlino scrolls away. It leaves quickly and without bounce. */
.header-cta-reveal { display:block; flex:none; transform-origin:100% 50%; opacity:0; visibility:hidden; transform:translateX(14px) scale(.82); transition:transform var(--duration-quick) var(--ease-smooth-out),opacity var(--duration-quick) var(--ease-smooth-out),visibility 0s linear var(--duration-quick); }
.has-get-sumlino .header-cta-reveal,.shows-cta .header-cta-reveal { opacity:1; visibility:visible; transform:none; transition:transform var(--duration-very-slow) var(--ease-bounce) var(--duration-micro),opacity var(--duration-fast) var(--ease-smooth-out) var(--duration-micro),visibility 0s; }
/* The links glide into the space the name leaves, on the same clock. */
@media(min-width:701px) {
 /* Starts from rest, so a reversed scroll never snaps the links backward. */
 .site-header nav { transition:transform var(--duration-very-slow) cubic-bezier(.45,0,.2,1); }
 .has-get-sumlino nav { transform:translateX(calc(-1 * var(--wordmark-width,110px))); transition-delay:var(--duration-stagger); }
}
@media(prefers-reduced-motion:reduce) { .header-cta-reveal,.header-cta-reveal *,.brand-wordmark,.brand-letter,.brand-symbol,.brand-symbol * { animation:none!important; transition:none!important; } }
/* Phone navigation stays stable: brand, primary action, menu. */
@media(max-width:700px) {
 .site-header .header-cta-reveal { opacity:1; visibility:visible; transform:none; transition:none; }
 .site-header .brand-letter { opacity:1; transform:none; transition:none; }
 .site-header .brand-face { display:none; }
 .site-header .brand-symbol.is-alive img { opacity:1; transform:none; }
 .site-header .brand-symbol { width:30px; }
 .site-header .brand-wordmark > span { padding-left:5px; }
 .site-header .header-actions { margin-left:auto; }
 .site-header .header-menu { margin-left:6px; }
}
/* Reduced motion on phones: the menu keeps a short fade, without travel or stagger. */
@media(prefers-reduced-motion:reduce) and (max-width:700px) {
 .js .site-header nav.t-dropdown { --dropdown-close-dur: 120ms; opacity: 0; animation: none !important; }
 .js .site-header nav.t-dropdown.is-open { opacity: 1; }
 .js .site-header nav.t-dropdown.is-closing { opacity: 0; }
 .js .site-header nav.t-dropdown,.js .site-header nav.t-dropdown > a,.js .site-header nav .menu-extras { transform: none !important; transition: opacity 120ms ease-out !important; }
 .js .site-header nav .menu-cast span { transform: rotate(var(--tilt)) !important; transition: opacity 120ms ease-out !important; }
}
@media(prefers-reduced-motion:reduce) {
 .t-dropdown,.site-header nav,.site-header nav a,.site-header nav a::before,.header-menu span,.cta-arrow,.site-header.has-scroll-cta,.header-cta-reveal,.site-header .header-cta-reveal .header-cta { transition: none !important; }
 .js .site-header nav a,.js .site-header nav.is-open a,.js .site-header nav.is-open a:active { transform: none; }
 .site-header nav a:hover,.site-header nav a:nth-of-type(2):hover,.site-header .header-cta:hover,.header-cta:hover .cta-arrow,.primary-cta:hover .cta-arrow { transform: none; }
}

/* Integrated QuickBooks drawer: same extension UI, no browser side-panel frame. */
.browser-canvas{position:relative;--preview-drawer-width:360px}.hero-extension-frame{border:0!important;border-radius:18px;box-shadow:0 5px 26px #19345415;margin:10px 10px 10px 0;max-height:calc(100% - 20px)}
.hero-drawer-handle{position:absolute;z-index:2;right:calc(var(--preview-drawer-width) + 10px);top:48%;display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:13px;background:#075cff;color:#fff;font:750 13px/1.2 var(--font-body,system-ui);box-shadow:0 4px 16px #075cff24;pointer-events:none}.hero-drawer-handle .story-character{width:24px;height:23px;color:#fff}
@media(max-width:700px){.hero-drawer-handle{display:none}.hero-extension-frame{margin:0;max-height:none;border-radius:0;box-shadow:none}}

@media(min-width:701px) and (max-width:1120px){.browser-canvas{--preview-drawer-width:320px}}

/* The site reflects the compact QBO drawer handle. */
.hero-drawer-handle{flex-direction:column;gap:7px;width:29px;padding:9px 5px;border:1px solid #cddfff;border-radius:10px;background:#fff;color:#075cff;font-size:11px;box-shadow:0 2px 10px #152f5612}
.hero-drawer-label{writing-mode:vertical-rl;text-orientation:mixed}
.hero-drawer-handle .story-character{width:19px;height:18px;color:#075cff}

/* The installed drawer sits flush against the page edge, with one quiet divider. */
.hero-extension-frame{margin:0;max-height:100%;border-radius:0;box-shadow:none;border-left:1px solid #dde6f2!important}
.hero-drawer-handle{right:var(--preview-drawer-width);border-right:0;border-radius:10px 0 0 10px;box-shadow:none}

/* The familiar beta badge also gives returning visitors a quiet path to updates. */
/* The changelog badge: a quiet "New" tag, sentence-case copy and a hairline
   surface, so it informs without competing with Try Sumlino. Same 36px height,
   so the hero and the headline hop keep their geometry. */
.changelog-link { --learn-shift:2px; --learn-spread:8deg; --learn-in:350ms; --learn-out:350ms; --learn-ease:var(--ease-smooth-out); min-height:36px; }
.marketing-home .hero .changelog-link { gap:10px; padding:4px 13px 4px 4px; border:1px solid #dce5f1; background:#ffffffb8; box-shadow:0 1px 2px #17345408; color:#33496a; font-size:13px; font-weight:520; letter-spacing:-.008em; text-transform:none; transition:border-color var(--duration-fast) var(--ease-smooth-out),background-color var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out); }
.changelog-tag { display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:999px; background:#eaf1ff; color:#0752e0; font-size:11.5px; font-weight:620; letter-spacing:.01em; }
.changelog-link .changelog-announcement { color:#33496a; }
.changelog-link .changelog-badge-detail { position:relative; padding-left:11px; color:#075cff; font-weight:600; }
.changelog-link .changelog-badge-detail::before { content:""; position:absolute; left:0; top:50%; width:1px; height:14px; translate:0 -50%; background:#d5e0ef; }
.marketing-home .hero .changelog-link:hover { border-color:#bcd0ee; background:#fff; color:#33496a; box-shadow:0 1px 2px #17345408,0 6px 18px -10px #075cff40; }
.marketing-home .hero .changelog-link:focus-visible { outline:2px solid #075cff; outline-offset:3px; }
.changelog-link .t-learn-chevron svg { width:14px; height:14px; fill:none; stroke:#075cff; stroke-width:1.6; }
@media(max-width:400px) { .marketing-home .hero .changelog-link { gap:8px; padding-right:11px; font-size:12px; }.changelog-link .changelog-badge-detail { padding-left:9px; } }
/* Narrow phones keep one line: the chevron alone says "see more". */
@media(max-width:374px) { .changelog-link .changelog-badge-detail { display:none; } }
@media(prefers-reduced-motion:reduce) { .brand-wordmark,.brand-wordmark > span,.brand-symbol { transition:none; }.has-get-sumlino .brand-symbol { transform:none; } }
.changelog-link .t-learn-chevron { display:inline-flex; transform:translateX(0); transition:transform var(--learn-out) var(--learn-ease); }
.changelog-link .t-learn-arm { transform-box:view-box; transform-origin:10px 8px; vector-effect:non-scaling-stroke; transition:transform var(--learn-out) var(--learn-ease); }
@media (hover: hover) and (pointer: fine) { .changelog-link:hover .t-learn-chevron { transform:translateX(var(--learn-shift)); transition-duration:var(--learn-in); } }
@media (hover: hover) and (pointer: fine) { .changelog-link:hover .t-learn-arm { transition-duration:var(--learn-in); } }
@media (hover: hover) and (pointer: fine) { .changelog-link:hover .t-learn-arm-top { transform:rotate(var(--learn-spread)); } }
@media (hover: hover) and (pointer: fine) { .changelog-link:hover .t-learn-arm-bot { transform:rotate(calc(var(--learn-spread) * -1)); } }
@media(max-width:700px) { .changelog-link { min-height:44px; } }
@media(prefers-reduced-motion:reduce) { .changelog-link .t-learn-chevron,.changelog-link .t-learn-arm,.marketing-home .hero .changelog-link { transition:none!important; } }

/* Hero hierarchy: the rotating headline, then one line on what Sumlino is.
   The walkthrough directly below shows why it helps. */
.marketing-home .hero-category { margin:20px auto 0; max-width:640px; color:#3d5373; font-size:clamp(17px,1.6vw,21px); font-weight:500; line-height:1.45; letter-spacing:-.012em; text-wrap:balance; }
@media(max-width:620px) { .marketing-home .hero-category { max-width:320px; margin-top:16px; font-size:17px; } }

/* A hands-on story with the same characters and workspace as the product. */
/* The chapter row sits on the hero's centre line, under the buttons. */
.hero-tour .tour-controls { justify-content:center; gap:16px; margin:0 2px 16px; }
.tour-control-label { display:none; }
.hero-tour .tour-chapters { display:flex; gap:6px; }
.hero-tour .tour-chapters button { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid transparent; border-radius:12px; font:550 12px var(--font-body,system-ui); background:#ffffff85; color:#526b8a; cursor:pointer; transition:background var(--duration-fast),border-color var(--duration-fast); }
.hero-tour .tour-chapters button > span { font-size:10px; color:#5e7390; }
.hero-tour .tour-chapters button[aria-pressed="true"] { background:#fff; border-color:#b6cefa; color:#075cff; box-shadow:0 3px 12px #224d8710; }
.hero-tour .tour-chapters button[data-complete="true"] > span { color:#23836d; }
.hero-tour button:focus-visible,.tour-finish:focus-visible { outline:2px solid #075cff; outline-offset:3px; }
.hero-tour .browser-bar { height:52px; padding:9px 15px 0; gap:14px; background:#eaf0f8; align-items:center; }
.hero-tour .browser-bar span { margin-left:0; padding:0; background:none; border-radius:0; }
.tour-window-dots { display:flex; gap:5px; padding-bottom:8px; }
.tour-window-dots i { width:7px; height:7px; border-radius:50%; background:#acbcd0; }
.tour-window-dots i:nth-child(2) { background:#c3cede; }.tour-window-dots i:nth-child(3) { background:#d2dce9; }
.tour-browser-tab { display:flex; align-items:center; gap:9px; height:100%; padding:0 18px; border:1px solid #d8e3f0; border-bottom:0; border-radius:10px 10px 0 0; background:#fcfdff; }
.hero-tour .tour-browser-tab > span:last-child { color:#355273; font-size:11px; }
.hero-tour .tour-tab-mark { color:#075cff; display:flex; width:21px; }.tour-tab-mark svg { width:100%; }
.hero-tour .tour-browser-context { font-size:11px; color:#778aa4; padding-bottom:8px; }
.hero-tour .tour-sandbox-label { margin-left:auto; padding-bottom:8px; font-size:10px; color:#5e7390; }
.marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-canvas { align-items:start; background:radial-gradient(ellipse at 22% 80%,#e4eeff88,transparent 55%),#f8fafd; }
:is(.js .hero-tour,.hero-tour.is-guided) .hero-extension-frame { pointer-events:auto; background:#fff; }
:is(.js .hero-tour,.hero-tour.is-guided) .hero-drawer-handle { display:none; }
.hero-tour .browser-placeholder { text-align:left; }
.hero-tour .tour-report-row span,.hero-tour .tour-report-columns span { font-size:inherit; }
.hero-tour .tour-variance-amount { font-size:16px; }

.tour-report-heading > span { font-size:10px; color:#8093ac; }.tour-report-heading h3 { margin:15px 0 5px; font-size:23px; letter-spacing:-.7px; color:#253d5e; }.tour-report-heading p { margin:0 0 22px; font-size:11px; color:#7187a2; }
.tour-report-columns,.tour-report-row { display:grid; grid-template-columns:minmax(0,1fr) 75px 75px; gap:10px; padding:12px 0; border-bottom:1px solid #e1e9f3; font-size:11px; color:#526b89; }
.tour-report-columns { font-size:10px; color:#8395ad; padding-top:0; }
.tour-report-columns > :not(:first-child),.tour-report-row > :not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }.tour-report-total { font-weight:650; }
.tour-report-helper { margin-top:22px; padding:16px; border:1px solid #ccddfc; border-radius:16px; background:linear-gradient(135deg,#fff,#f0f6ff); box-shadow:0 5px 16px #35578106; }
.tour-report-brand { display:flex; align-items:center; gap:6px; color:#075cff; }.tour-report-brand > span:first-child { display:flex; width:24px; }.tour-report-brand svg { width:100%; }.tour-report-brand strong { font-size:17px; letter-spacing:-.5px; }.tour-report-brand > span:last-child { margin-left:auto; font-size:10px; color:#5375a2; }
.tour-comparison { display:block; margin:14px 0 10px; font-size:10px; color:#7690ae; }
.tour-variance { display:flex; align-items:center; gap:12px; width:100%; padding:13px; background:white; border:1px solid #b8cff3; border-radius:10px; color:#314e70; text-align:left; cursor:pointer; transition:box-shadow var(--duration-fast),border-color var(--duration-fast); }
.tour-variance:hover { box-shadow:0 3px 12px #075cff12; border-color:#689eff; }.tour-variance strong { display:block; font-size:12px; }.tour-variance small { display:block; margin-top:5px; font-size:10px; font-weight:400; color:#7690ab; }.tour-variance-amount { margin-left:auto; font-size:16px; font-weight:650; color:#9b641b; white-space:nowrap; }.tour-variance svg { width:16px; flex:none; fill:none; stroke:#6b86a8; stroke-width:1.6; transition:transform var(--duration-fast) var(--ease-smooth-out); }.tour-variance[aria-expanded="true"] svg { transform:rotate(90deg); }
.tour-variance-reveal { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--duration-fast) var(--ease-smooth-out),opacity var(--duration-fast); }.tour-variance-reveal > div { overflow:hidden; }.tour-variance-reveal p { margin:12px 0 0; font-size:12px; line-height:1.65; color:#506c8c; }.browser-placeholder[data-expanded="true"] .tour-report-scene .tour-variance-reveal,.tour-recon-scene[data-expanded="true"] .tour-variance-reveal { grid-template-rows:1fr; opacity:1; }
.tour-report-disclaimer { font-size:9px; color:#5e7390; line-height:1.6; margin:12px 4px; }
.tour-guide { display:none; }
/* clip, not hidden: a hidden box can still be scrolled by focus or a reveal, which slid the
   embedded panel 4px sideways under a spotlight ring that sits slightly past the edge. */
.marketing-home .hero-tour .browser-canvas { overflow:hidden; overflow:clip; }
.tour-spotlight { position:absolute; z-index:4; pointer-events:none; left:var(--spot-x,0px); top:var(--spot-y,0px); width:var(--spot-w,0px); height:var(--spot-h,0px); border:2px solid #568cff; border-radius:var(--spot-radius,13px); box-shadow:0 0 0 5px #568cff24; }
.tour-spotlight[data-guide-target="true"] { z-index:6; }
.is-guided .tour-guide { position:absolute; inset:0; z-index:5; display:block; pointer-events:none; }
.tour-guide[hidden],.tour-spotlight[hidden] { display:none!important; }
.tour-buddy-flight { position:absolute; z-index:2; left:0; top:0; width:58px; height:66px; pointer-events:none; }
.tour-buddy-button { display:block; width:58px; min-height:58px; padding:0; border:0; border-radius:16px; background:transparent; opacity:1; pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tour-buddy-button:hover,.tour-buddy-button:active { background:transparent; }
.tour-buddy .tour-character-top,.tour-buddy .tour-character-base { transform-box:view-box; transform-origin:64px 56px; }
.tour-buddy svg { overflow:visible; }
.tour-buddy { transition:color 400ms ease-in-out; display:block; width:58px; position:relative; color:var(--character-ink,#075cff); filter:drop-shadow(0 6px 6px #21437518); transform:rotate(-3deg); animation:tour-buddy-drift 3.6s ease-in-out infinite; animation-play-state:paused; }
.tour-buddy-shadow { display:block; position:absolute; bottom:-5px; left:9px; width:40px; height:6px; background:#17356123; border-radius:50%; filter:blur(3px); }
.tour-buddy svg { display:block; width:100%; transform:translate(var(--look-x,0px),var(--look-y,0px)); transition:transform var(--duration-fast) var(--ease-smooth-out); }
.tour-voice { position:absolute; left:0; top:0; width:270px; padding:18px; border:1px solid #d6e3f5; border-radius:16px; background:#fff; box-shadow:0 12px 30px #17345125,0 2px 5px #17345108; pointer-events:auto; transition:transform var(--duration-slow) var(--ease-smooth-out),width var(--duration-slow) var(--ease-smooth-out); }
.tour-voice::after { content:''; position:absolute; width:10px; height:10px; background:#fff; border:solid #d6e3f5; border-width:1px 1px 0 0; }
.tour-guide[data-side="left"] .tour-voice::after { right:-6px; top:calc(50% - 5px); transform:rotate(45deg); }
.tour-guide[data-side="below"] .tour-voice::after { top:-6px; left:22px; transform:rotate(-45deg); }
.tour-spoken { position:relative; }
.tour-voice-space { visibility:hidden; }
.tour-voice-text { position:absolute; inset:0; }
.is-speaking .tour-voice-text::after { content:''; display:inline-block; width:2px; height:1em; margin-left:3px; vertical-align:-2px; background:#075cff; }
.is-speaking .tour-buddy::after { content:''; position:absolute; right:-4px; top:46%; width:3px; height:3px; border-radius:50%; color:var(--character-ink); background:currentColor; box-shadow:4px 0 currentColor,8px 0 currentColor; animation:tour-ink 700ms ease-out infinite; }
.is-speaking .tour-buddy .client-character-crown { animation:tour-talk 420ms ease-in-out infinite alternate; }
@keyframes tour-ink { from { opacity:0; transform:translateX(-4px) scale(.7); } 40% { opacity:.55; } to { opacity:0; transform:translateX(3px) scale(.4); } }
@keyframes tour-talk { to { transform:translateY(-2px) rotate(-1deg); } }
.tour-guide-step { display:block; color:#075cff; font-size:10px; font-weight:650; letter-spacing:.8px; text-transform:uppercase; }
.tour-guide-copy { min-height:86px; }.tour-guide-copy h2 { margin:12px 0 8px; font-size:20px; line-height:1.2; letter-spacing:-.5px; color:#203755; text-wrap:balance; }.tour-guide-copy p { margin:0; color:#5e7390; font-size:13px; line-height:1.6; }
.tour-guide-actions { display:flex; align-items:center; gap:8px; margin-top:12px; }
.tour-guide-actions > :not([hidden]) { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 0; border:0; background:transparent; color:#075cff; font:650 12px var(--font-body,system-ui); cursor:pointer; text-decoration:none; }
.tour-guide-actions > :hover { color:#003bb3; }
.tour-guide-actions .tour-skip { margin-left:auto; min-width:44px; padding:8px 10px; margin-right:-10px; font-weight:450; color:#5e7390; white-space:nowrap; }
.tour-guide-actions [hidden] { display:none; }
.tour-tap-dot { width:7px; height:7px; border-radius:50%; background:#075cff; box-shadow:0 0 0 4px #075cff1a; flex:none; }
.tour-guide[data-complete="true"] .tour-guide-step { color:#22816c; }
.tour-buddy .client-character-eyes { transform-box:fill-box; transform-origin:center; animation:tour-guide-blink 6s ease-in-out infinite; animation-play-state:paused; }
.hero-tour[data-running="true"] .tour-buddy,.hero-tour[data-running="true"] .tour-buddy .client-character-eyes { animation-play-state:running; }
@keyframes tour-buddy-drift { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-5px) rotate(-1deg); } }
@keyframes tour-guide-blink { 0%,45%,49%,100% { transform:scaleY(1); } 47% { transform:scaleY(.15); } }
@media(min-width:761px) and (max-width:900px) {
 .tour-control-label { display:none; }.hero-tour .tour-controls { justify-content:center; }
 .tour-guide-copy h2 { font-size:19px; }
 .tour-report-columns,.tour-report-row { grid-template-columns:minmax(0,1fr) 52px 52px; gap:5px; font-size:10px; }.tour-report-helper { padding:12px; }.tour-variance { padding:10px; gap:7px; }.tour-variance strong { font-size:11px; }.tour-variance-amount { font-size:13px; }.tour-variance small { font-size:9px; }.hero-tour .tour-browser-context { display:none; }
}
@media(max-width:760px) {
 .marketing-home .hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hero-tour .tour-controls { justify-content:center; margin:0 0 12px; }.tour-control-label { display:none; }.hero-tour .tour-chapters { width:100%; gap:3px; }.hero-tour .tour-chapters button { justify-content:center; flex:1; min-height:44px; padding:8px 5px; font-size:11px; gap:4px; }.hero-tour .tour-chapters button > span { display:none; }
 .hero-tour .browser-bar { height:44px; padding:7px 10px 0; gap:10px; }.tour-window-dots { gap:3px; }.tour-window-dots i { width:5px; height:5px; }.tour-browser-tab { padding:0 10px; gap:6px; }.hero-tour .tour-browser-tab > span:last-child { font-size:10px; }.tour-tab-mark { width:18px; }.hero-tour .tour-browser-context,.hero-tour .tour-sandbox-label { display:none; }
 .tour-voice { padding:16px; }.tour-guide-copy { min-height:72px; }.tour-guide-copy h2 { margin:8px 0 5px; font-size:18px; letter-spacing:-.4px; text-wrap:initial; }.tour-guide-copy p { font-size:12px; line-height:1.55; }.tour-guide-actions { margin-top:8px; }.tour-guide-actions > :not([hidden]) { min-height:44px; }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-canvas { min-height:0; }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-placeholder { display:none; padding:20px 16px 22px; }
 .marketing-home .hero-tour[data-scene="review"] .browser-placeholder,.marketing-home .hero-tour[data-scene="reconcile"] .browser-placeholder { display:block; }
 .hero-tour[data-scene="review"] .hero-extension-frame,.hero-tour[data-scene="reconcile"] .hero-extension-frame { display:none; }
 .hero-tour .hero-extension-frame { display:block; border-left:0!important; }
 .tour-comparison { margin-bottom:34px; }
 .tour-report-heading h3 { font-size:20px; }.tour-report-heading p { font-size:10px; }.tour-report-columns,.tour-report-row { grid-template-columns:minmax(0,1fr) 60px 60px; gap:6px; font-size:10px; }.tour-report-helper { margin-top:18px; padding:13px; }.tour-variance { padding:12px 10px; gap:8px; }.tour-variance strong { font-size:11px; }.tour-variance-amount { font-size:15px; }.tour-variance small { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .tour-voice { transition:none; } .tour-buddy,.tour-buddy .client-character-eyes,.is-speaking .tour-buddy .client-character-crown,.is-speaking .tour-buddy::after { animation:none; }.tour-buddy svg { transform:none; transition:none; }.tour-voice,.tour-spotlight,.tour-guide,.tour-variance,.tour-variance svg,.tour-variance-reveal,.hero-tour .tour-chapters button { transition:none; } }

.tour-recon-summary { display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px 0;border-block:1px solid #dfe8f5; }
.tour-recon-summary span { font-size:11px;color:#6b819e; }.tour-recon-summary strong { display:block;margin-top:8px;font-size:21px;letter-spacing:-.5px;color:#2e4c6f; }.tour-recon-summary span:last-child strong { color:#9b641b; }
.tour-recon-intro { font-size:12px;line-height:1.6;color:#607b9b; }
.tour-recon-scene[hidden],.tour-report-scene[hidden] { display:none; }
.tour-voice { transition-duration:var(--duration-slow);transition-timing-function:var(--ease-smooth-out); }
@media(prefers-reduced-motion:reduce) { .tour-voice,.tour-spotlight { transition:none; } }

/* Clearer action hierarchy and crisp, colorful guide artwork. */
.hero-tour .browser-frame { border-color:#cbd9ed; box-shadow:0 24px 60px #20385812,0 3px 8px #20385808; }
.hero-tour .browser-bar { background:#e3eaf4; }
.tour-window-dots i:nth-child(1) { background:#fb655e; }
.tour-window-dots i:nth-child(2) { background:#f5b741; }
.tour-window-dots i:nth-child(3) { background:#37bd82; }
.hero-tour .tour-browser-tab > span:last-child { font-weight:750; color:#243e60; }
.hero-tour .tour-browser-context { display:grid; gap:2px; }
.hero-tour .tour-browser-context b { font-size:11px; color:#365371; }
.hero-tour .tour-browser-context > span { font-size:9px; color:#5e7390; }
.hero-tour .tour-sandbox-label { display:flex; align-items:center; gap:6px; font-weight:650; }
.tour-sandbox-label i { width:5px; height:5px; border-radius:50%; background:#20a582; box-shadow:0 0 0 3px #20a58212; }
.tour-buddy { filter:none; width:64px; }
.tour-buddy-button { width:64px; min-height:64px; }
.tour-buddy-flight { width:64px; }
.tour-buddy svg { isolation:isolate; }
.tour-character-face { stroke:none; }
.tour-character-light { stroke:none; pointer-events:none; }
.tour-buddy svg { filter:drop-shadow(0 2px 1px #18385a14); transform:perspective(var(--tilt-perspective)) translate(var(--look-x,0px),var(--look-y,0px)) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg)); transition:transform var(--tilt-return) var(--tilt-return-ease); }
.tour-buddy.is-gazing svg { transition:none; }
/* The eyes look about in a few steps, a little ahead of the head (product-tour.js, gaze). */
.tour-buddy .tour-character-gaze { transition:transform 140ms ease-out; }
.tour-buddy-button { transform-origin:50% 90%; }
.tour-buddy[data-character="cobalt"] { color:#075cff; }
.tour-buddy[data-character="coral"] { color:#ff6558; }
.tour-buddy[data-character="mint"] { color:#00886e; }
.tour-buddy[data-character="lilac"] { color:#8452e7; }
.tour-buddy-shadow { background:#075cff18; }
.tour-guide-copy h2 { font-weight:800; letter-spacing:-.65px; }
.tour-guide-actions .tour-next,.tour-guide-actions .tour-finish { padding:10px 12px; border-radius:10px; background:#075cff; color:#fff; box-shadow:0 3px 8px #075cff20; }
.tour-guide-actions .tour-finish { font-size:11px; }
.tour-guide-actions svg,.tour-inline-next svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; flex:none; }
.tour-inline-next { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; padding:12px 16px; min-height:44px; border:0; border-radius:10px; background:#075cff; color:#fff; font:700 12px var(--font-body,system-ui); cursor:pointer; transition:background var(--duration-fast),transform var(--duration-fast) var(--ease-smooth-out); }
.tour-inline-next:hover { background:#004cda; }
@media (hover: hover) and (pointer: fine) { .tour-inline-next:hover { transform:translateY(-1px); } }
.tour-variance[aria-disabled="true"] { cursor:default; box-shadow:none; border-color:#d4e2f6; }
.tour-report-scene[data-expanded="true"] .tour-variance-reveal { grid-template-rows:1fr; opacity:1; }
.tour-shortcuts-scene[hidden] { display:none; }
/* Voice step: the bank feed it happens beside, with the row the note is about. */
.tour-notes-scene[hidden] { display:none; }
.tour-notes-scene { animation:tour-scene-in var(--duration-slow) var(--ease-smooth-out) both; }
.tour-notes-feed { margin-top:18px; border:1px solid #e1e8f2; border-radius:14px; background:#fff; overflow:hidden; }
.tour-notes-head,.tour-notes-row { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 16px; font-size:12px; }
.tour-notes-head { padding-block:9px; background:#f6f9fd; color:#7d8fa8; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.tour-notes-row { border-top:1px solid #edf1f7; color:#4c607d; font-variant-numeric:tabular-nums; }
.tour-notes-row span:last-child { text-align:right; }
.tour-notes-row.is-focus { position:relative; background:linear-gradient(90deg,#eef4ff,#f7faff); color:#1b3354; font-weight:600; }
.tour-notes-row.is-focus::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:#075cff; }
.tour-notes-linked { display:flex; align-items:center; gap:8px; margin:14px 0 0; color:#23856d; font-size:12px; font-weight:600; opacity:0; translate:0 4px; transition:opacity var(--duration-slow) var(--ease-smooth-out),translate var(--duration-slow) var(--ease-smooth-out); }
.tour-notes-linked svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.tour-notes-scene.is-saved .tour-notes-linked { opacity:1; translate:0 0; }
@keyframes tour-scene-in { from { opacity:0; translate:0 6px; } }
@media(prefers-reduced-motion:reduce) { .tour-notes-scene,.tour-notes-linked { animation:none; transition:none; } }
.tour-profile-scene[hidden] { display:none; }
.tour-profile-scene { padding:64px 0; }
.tour-profile-character { display:block; width:136px; margin-bottom:30px; }
.tour-profile-character svg { width:100%; }
.tour-profile-scene h3 { font-size:28px; line-height:1.2; letter-spacing:-.8px; color:#243e60; }
.tour-profile-scene p { font-size:13px; line-height:1.7; color:#607895; }
.tour-compare-control { display:flex; gap:9px; align-items:flex-start; padding:10px 0 14px; font-size:11px; color:#345778; cursor:pointer; }
.tour-compare-control input { flex:none; width:16px; height:16px; margin:1px 0 0; accent-color:#075cff; }
.tour-compare-control small { display:block; margin-top:5px; font-size:10px; line-height:1.5; color:#69829e; }
.tour-variance[hidden] { display:none; }
.tour-destination { display:flex; gap:15px; align-items:center; padding:22px 0; border-bottom:1px solid #e0e8f4; }
.tour-destination > span { display:grid; place-items:center; width:36px; height:36px; flex:none; background:#eaf1ff; border-radius:11px; color:#075cff; font-weight:700; }
.tour-destination:nth-child(3) > span { background:#e5f5ee; color:#16775f; }
.tour-destination:nth-child(4) > span { background:#f0eafa; color:#8452c6; }
.tour-destination strong { font-size:16px; letter-spacing:-.3px; color:#294260; }
.tour-destination p { margin:6px 0 0; font-size:12px; color:#607895; }
.tour-shortcut-tip { margin-top:34px; color:#2b4669; font-size:14px; font-weight:700; line-height:1.7; }
.tour-shortcut-tip span { font-size:11px; font-weight:400; color:#6a809b; }
.tour-metrics { margin:20px 0; border:1px solid #d5e3f5; border-radius:12px; overflow:hidden; background:white; }
.tour-metric-tabs { display:flex; padding:4px; background:#eff4fb; gap:3px; }
.tour-metric-tabs button { flex:1; padding:9px 5px; min-height:40px; border:0; border-radius:8px; font:650 10px var(--font-body,system-ui); color:#55718f; background:transparent; cursor:pointer; }
.tour-metric-tabs button[aria-pressed="true"] { color:#075cff; background:white; box-shadow:0 2px 4px #1734540b; }
.tour-metric-reading { display:flex; align-items:center; gap:18px; padding:16px; }
.tour-metric-reading small { display:block; font-size:10px; color:#617e9e; }
.tour-metric-reading strong { display:block; margin-top:5px; font-size:25px; letter-spacing:-1px; color:#244e72; font-variant-numeric:tabular-nums; }
.tour-metric-reading p { margin:0; font-size:11px; line-height:1.6; color:#3f6487; }
.tour-metric-reading p small { margin-top:5px; font-size:9px; }
@media(max-width:900px) { .hero-tour .tour-browser-context { display:none; } .hero-tour .tour-chapters button { padding-inline:9px; } }
@media(max-width:760px) { .hero-tour .tour-sandbox-label { display:none; } .hero-tour .tour-chapters button { font-size:10px; padding-inline:3px; } .tour-metric-reading { padding:13px; gap:12px; } .tour-metric-reading strong { font-size:23px; } .tour-metric-reading p { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .tour-inline-next,.tour-inline-next:hover { transition:none;transform:none; } }
@media(prefers-reduced-motion:reduce) { .tour-buddy svg,.tour-buddy.is-tilting svg { transform:none; transition:none; } }

/* One mobile chapter at a time: the guide stays above the task, never over it. */
@media(max-width:760px) {
 /* While a voice draft is reviewed the stage grows with the coach; the workspace keeps a fixed slice below it. */
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided):is([data-voice-state="ready"],[data-voice-state="posting"]) { height:auto; }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided):is([data-voice-state="ready"],[data-voice-state="posting"]) .browser-canvas { height:auto; }
 :is(.js .hero-tour,.hero-tour.is-guided):is([data-voice-state="ready"],[data-voice-state="posting"]) .hero-extension-frame { flex:none; height:230px; }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-canvas { display:flex; flex-direction:column; background:#fff; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide { position:relative; inset:auto; width:100%; flex:none; border-bottom:1px solid #e0e9f6; background:#fff; }
 .hero-tour .tour-voice { position:relative; padding:16px 16px 12px 92px; border:0; border-radius:0; box-shadow:none; transition:none; }
 .hero-tour .tour-voice::after { display:none; }
 .hero-tour .tour-guide-copy { min-height:0; }
 .hero-tour .tour-guide-copy h2 { font-size:18px; line-height:1.2; }
 .hero-tour .tour-guide-actions { flex-wrap:wrap; gap:4px 10px; }
 .hero-tour .tour-guide-actions .tour-skip { margin-left:auto; }
 .hero-tour .tour-buddy-flight { z-index:2; }
 :is(.js .hero-tour,.hero-tour.is-guided) .hero-extension-frame { width:100%; flex:none; }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-placeholder { width:100%; padding:18px 16px; }
 .hero-tour .tour-report-heading > span,.hero-tour .tour-report-table { display:none; }
 .hero-tour .tour-report-heading h3 { margin:0 0 5px; }
 .hero-tour .tour-report-heading p { margin-bottom:14px; }
 .hero-tour .tour-comparison { margin-bottom:12px; }
 .hero-tour .tour-metrics { margin:12px 0; }
 .hero-tour .tour-report-helper { margin-top:12px; }
 .hero-tour .tour-report-disclaimer { margin-bottom:0; }
 .hero-tour .tour-recon-summary { padding:12px 0; }
 .hero-tour .tour-recon-summary strong { font-size:19px; }
 .hero-tour .tour-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
 .hero-tour .tour-chapters button { font-size:11px; }
}

/* Voice step, wide stage: the coach docks under the bank feed and reads as a pipeline: what you said, what Sumlino took, where it goes. */
.tour-record-col { display:contents; }
.tour-record-col-title { display:none; }
.tour-guide[data-wide="true"] .tour-voice { padding:14px 18px 14px; }
.tour-guide[data-wide="true"] .tour-guide-copy { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title steps" "text steps"; column-gap:22px; align-items:start; min-height:0; padding-right:52px; }
.tour-guide[data-wide="true"] .tour-guide-copy h2 { grid-area:title; margin:6px 0 4px; font-size:19px; }
.tour-guide[data-wide="true"] .tour-guide-copy .tour-spoken { grid-area:text; max-width:46ch; }
.tour-guide[data-wide="true"] .tour-steps { grid-area:steps; align-self:center; margin:0; padding:0 0 0 18px; border-top:0; border-left:1px solid #e6eef9; gap:5px; }
.tour-guide[data-wide="true"] .tour-steps li { font-size:11.5px; white-space:nowrap; }
.tour-guide[data-wide="true"] .tour-guide-actions { position:absolute; top:10px; right:14px; margin:0; }
.tour-guide[data-wide="true"] .tour-guide-actions .tour-skip { margin-left:0; }
.tour-guide[data-wide="true"] .tour-voice-demo { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px 16px; align-items:start; margin-top:12px; padding:10px 12px 10px; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="idle"],[data-state="recording"],[data-state="saved"]) { grid-template-columns:minmax(0,1fr) minmax(0,.55fr); }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="idle"],[data-state="recording"],[data-state="saved"]) .tour-record-col[data-col="took"] { display:none; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="idle"],[data-state="recording"],[data-state="saved"]) .tour-record-col[data-col="goes"] { align-self:center; }
.tour-guide[data-wide="true"] .tour-record-col { display:grid; align-content:start; gap:8px; min-width:0; }
.tour-guide[data-wide="true"] .tour-record-col > * { margin:0; }
.tour-voice-demo[data-resolved="false"] .tour-record-col[data-col="goes"] .tour-record-col-title { display:none !important; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col-title { display:block; color:#7a8ea4; font-size:9px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
/* Where it goes: one row across the bottom with the confirm card, the actions and the one line of truth. */
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col[data-col="goes"] { grid-column:1/-1; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title title" "suggest actions" "caption caption"; align-items:center; gap:6px 12px; padding-top:8px; border-top:1px solid #e3eaf4; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col[data-col="goes"] .tour-record-col-title { grid-area:title; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col[data-col="goes"] .tour-record-suggest { grid-area:suggest; animation:none; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col[data-col="goes"] .tour-record-actions { grid-area:actions; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col[data-col="goes"] .tour-record-caption { grid-area:caption; }
.tour-guide[data-wide="true"] .tour-voice-demo[data-state="processing"] .tour-record-col[data-col="goes"] { grid-template-areas:"title title" "actions actions" "caption caption"; }
.tour-guide[data-wide="true"] .tour-voice { transition:transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)),width var(--duration-slow,400ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-guide[data-wide="true"] .tour-buddy-flight { transition:transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-guide[data-wide="true"] .tour-record-actions { flex-wrap:nowrap; }
.tour-guide[data-wide="true"] .tour-record-actions .tour-record-again { flex:0 0 auto; }
.tour-guide[data-wide="true"] .tour-record-actions button { min-height:40px; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-transcript { padding:8px 10px; font-size:12.5px; line-height:1.6; }
.tour-guide[data-wide="true"] .tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-kicker { margin:0; }
.tour-guide[data-wide="true"] .tour-record-readout { padding:5px 6px; }
.tour-guide[data-wide="true"] .tour-record-row { min-height:23px; }
.tour-guide[data-wide="true"] .tour-voice-demo .tour-record-caption { font-size:9.5px; }

/* Narrow desktop stages: retain the sentence so the suggestions can be checked. */
.tour-guide[data-wide-size="compact"] .tour-guide-copy { grid-template-columns:minmax(0,1fr); grid-template-areas:"title" "text" "steps"; padding-right:44px; }
.tour-guide[data-wide-size="compact"] .tour-steps { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; padding:8px 0 0; border-left:0; border-top:1px solid #e6eef9; }
.tour-guide[data-wide-size="compact"] .tour-steps li { font-size:11px; }
.tour-guide[data-wide-size="compact"] .tour-steps li:not([data-current="true"]) { display:none; }
.tour-guide[data-wide-size="compact"] .tour-record-readout li { min-height:22px; }
.tour-guide[data-wide-size="compact"] .tour-voice { padding:12px 14px; }
.tour-guide[data-wide-size="compact"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) { grid-template-columns:minmax(0,1fr); }
.tour-guide[data-wide-size="compact"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col[data-col="said"] { display:grid; gap:4px; }
.tour-guide[data-wide-size="compact"] .tour-record-transcript { padding:6px 8px; font-size:11px; line-height:1.45; }
.tour-guide[data-wide-size="compact"] .tour-record-row { grid-template-columns:36px minmax(0,.8fr) 10px minmax(0,1.2fr) 10px; column-gap:4px; }
.tour-guide[data-wide-size="compact"] .tour-record-value { overflow-wrap:anywhere; }
.tour-guide[data-wide-size="compact"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col:is([data-col="said"],[data-col="goes"]) .tour-record-col-title { display:none; }
.tour-guide[data-wide-size="compact"] .tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"]) .tour-record-col[data-col="goes"] { grid-template-columns:minmax(0,1fr); grid-template-areas:"title" "suggest" "actions" "caption"; }
.tour-guide[data-wide-size="compact"] .tour-record-actions { flex-wrap:wrap; }
.hero-tour:is([data-voice-state="ready"],[data-voice-state="posting"]) .tour-guide[data-wide-size="compact"] .tour-spoken { display:none; }
.tour-guide[data-wide-size="compact"] .tour-record-preview-body { display:none; }
.tour-guide[data-wide-size="compact"] .tour-record-preview-client { flex-wrap:wrap; }
.tour-guide[data-wide-size="compact"] .tour-record-preview-name { flex:1 1 150px; }
.tour-guide[data-wide-size="compact"] .tour-record-preview-client .tour-record-why { margin-left:31px; }

/* The voice pilot is an explicit, fictional interaction inside the Notes step. */
.tour-voice-demo { margin-top:16px; padding:12px; border:1px solid #e1e9f5; border-radius:13px; background:#f6f8fc; }
.tour-voice-demo[hidden],.tour-record-actions [hidden] { display:none; }
.tour-record-kicker { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; color:#5e7390; font-size:9px; line-height:1.5; }
.tour-record-shortcut { white-space:nowrap; color:#667b8e; }
.tour-record-shortcut kbd { padding:1px 3px; border:1px solid #d7e1e8; border-bottom-width:2px; border-radius:4px; background:#fff; font:inherit; }
/* The recorder as the extension draws it (no character): a slim white pill. The name folds into the drawn S once you speak, thin bars follow it and a timer runs; while it is put into words a short line traces the S, and a saved note gets a check. */
.tour-record-hud { display:flex; align-items:center; gap:10px; min-height:44px; margin:8px 0 10px; padding:6px 14px 6px 14px; border-radius:22px; background:#fff; box-shadow:0 0 0 1px #13233b12,0 10px 28px -10px #1c3a6e33,0 2px 6px #1c3a6e10; }
.tour-record-brand { position:relative; display:grid; align-items:center; flex:none; width:62px; height:24px; }
.tour-record-brand > * { grid-area:1/1; justify-self:start; }
.tour-voice-demo:is([data-state="processing"],[data-state="ready"],[data-state="posting"],[data-state="saved"]) .tour-record-brand { width:22px; }
.tour-record-name { display:inline-flex; color:#13233b; font-size:15px; font-weight:640; letter-spacing:-.035em; line-height:1; white-space:nowrap; }
.tour-record-name i { display:inline-block; font-style:normal; transition:opacity 200ms ease-out,transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-voice-demo:not([data-state="idle"]) .tour-record-name i { opacity:0; transform:translateX(var(--fold,0)); transition-delay:240ms; }
.tour-record-name i:nth-child(2) { --fold:-.47em; } .tour-record-name i:nth-child(3) { --fold:-1.06em; } .tour-record-name i:nth-child(4) { --fold:-1.9em; } .tour-record-name i:nth-child(5) { --fold:-2.14em; } .tour-record-name i:nth-child(6) { --fold:-2.38em; } .tour-record-name i:nth-child(7) { --fold:-2.93em; }
.tour-record-mark { position:relative; display:block; width:21px; height:18px; margin-left:-2px; }
.tour-record-logo { display:block; width:100%; height:100%; overflow:visible; }
.tour-record-logo .tr-fill { fill:#075cff; opacity:0; transition:opacity 220ms ease-out; }
.tour-record-logo :is(.tr-stroke,.tr-trace) { fill:none; stroke:#075cff; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.tour-record-logo :is(.tr-stroke,.tr-trace) path { vector-effect:non-scaling-stroke; }
.tour-record-logo .tr-stroke { stroke-width:1.6; }
.tour-record-logo .tr-stroke path { stroke-dasharray:1 1; stroke-dashoffset:1; }
.tour-record-logo .tr-trace { stroke-width:2; }
.tour-record-logo .tr-trace path { stroke-dasharray:.18 .82; }
.tour-voice-demo:not([data-state="idle"]) .tour-record-logo .tr-fill { opacity:1; transition-delay:860ms; }
.tour-voice-demo[data-state="recording"] .tour-record-logo .tr-stroke { animation:tour-record-stroke 980ms linear 240ms both; }
.tour-voice-demo[data-state="recording"] .tour-record-logo .tr-stroke path { animation:tour-record-draw 720ms cubic-bezier(.65,0,.35,1) 240ms both; }
.tour-voice-demo[data-state="recording"] .tour-record-logo .tr-stroke path + path { animation-delay:360ms; }
.tour-voice-demo[data-state="processing"] .tour-record-logo .tr-fill { opacity:.18; transition-delay:0s; }
.tour-voice-demo[data-state="processing"] .tour-record-logo .tr-trace { opacity:1; }
.tour-voice-demo[data-state="processing"] .tour-record-logo .tr-trace path { animation:tour-record-trace 1.4s linear infinite; }
.tour-voice-demo[data-state="processing"] .tour-record-logo .tr-trace path + path { animation-delay:-.7s; }
.tour-record-badge { position:absolute; right:-6px; bottom:-5px; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:#23856d; color:#fff; box-shadow:0 0 0 2px #fff; opacity:0; transform:scale(.5); transition:opacity var(--duration-quick,150ms) ease-out,transform var(--duration-fast,250ms) cubic-bezier(.34,1.36,.64,1); }
.tour-record-badge svg { width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.tour-voice-demo[data-state="saved"] .tour-record-badge { opacity:1; transform:none; }
.tour-record-reading { display:grid; gap:2px; flex:1; min-width:0; }
.tour-record-status { color:#13233b; font-size:12.5px; font-weight:650; letter-spacing:-.01em; line-height:1.35; }
.tour-record-client { color:#5e7390; font-size:10px; }
.tour-record-meta { display:none; align-items:center; gap:6px; flex:none; color:#5e7390; font-size:12px; font-weight:550; font-variant-numeric:tabular-nums; }
.tour-record-meta > i { width:6px; height:6px; border-radius:50%; background:#075cff; }
.tour-voice-demo[data-state="recording"] .tour-record-meta { display:inline-flex; }
.tour-record-wave { display:flex; align-items:center; gap:2px; height:16px; margin-left:25px; opacity:0; transition:opacity 200ms ease-out; }
.tour-record-wave i { display:block; width:2px; height:var(--wave-height); max-height:16px; border-radius:1px; background:#075cff; opacity:.7; transform:scaleY(.3); }
.tour-voice-demo[data-state="recording"] .tour-record-wave { opacity:1; transition-delay:600ms; }
.tour-voice-demo[data-state="recording"] .tour-record-wave i { animation:tour-sample-wave 680ms ease-in-out infinite alternate; animation-delay:calc(-1 * var(--wave-delay)); }
.hero-tour[data-running="false"] .tour-record-wave i,.hero-tour[data-running="false"] .tour-record-logo .tr-trace path { animation-play-state:paused; }
@keyframes tour-record-stroke { 0%,99% { opacity:1; } 100% { opacity:0; } }
@keyframes tour-record-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes tour-record-trace { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.tour-record-transcript { margin:0 0 10px; padding:9px 11px; border-radius:10px; background:#fff; border:1px solid #e3eaf4; color:#1c2d48; font-size:12.5px; line-height:1.55; }
.tour-record-transcript[hidden] { display:none; }
.tour-record-word { opacity:0; filter:blur(2px); transition:opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),filter var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),background-color var(--duration-fast,250ms),color var(--duration-fast,250ms),box-shadow var(--duration-fast,250ms); border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.tour-record-word.is-heard { opacity:1; filter:none; }
/* Cleanup beat: hesitation strikes through, then collapses out of the sentence. */
.tour-record-filler { display:inline-block; max-width:4em; margin-right:.3em; color:#8a98ad; text-decoration:line-through; text-decoration-color:transparent; overflow:hidden; white-space:nowrap; vertical-align:bottom; transition:opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),filter var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),color var(--duration-fast,250ms),text-decoration-color var(--duration-fast,250ms); }
.tour-record-filler.is-gone { display:none; }
.tour-record-filler.is-heard.is-dropped { max-width:0; margin-right:0; opacity:0; color:#9aa7ba; text-decoration-color:#9aa7ba; transition:color var(--duration-fast,250ms),text-decoration-color var(--duration-fast,250ms),opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out) 420ms,max-width var(--duration-slow,400ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) 420ms,margin-right var(--duration-slow,400ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) 420ms; }
.tour-record-word[data-key].is-lit { background:var(--key-soft); color:var(--key-ink); font-weight:650; box-shadow:0 0 0 3px var(--key-soft); }
[data-key="client"] { --key-soft:#eaf1ff; --key-ink:#0b4fd6; }
[data-key="type"] { --key-soft:#eef2f8; --key-ink:#2d4a74; }
[data-key="date"] { --key-soft:#fff4de; --key-ink:#8a5a06; }
[data-key="priority"] { --key-soft:#ffeae6; --key-ink:#b23d2d; }
[data-key="label"] { --key-soft:#e8f5ef; --key-ink:#1f7258; }
.tour-voice-demo { position:relative; }
/* Once the readout is up it is the status; the hud row returns for Thought saved. A full wide stage keeps it, the sentence column has the room. */
.tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-hud { display:none; }
.tour-guide[data-wide-size="full"] .tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-hud { display:flex; }
/* The shortcut line has done its job once the draft is up. The idle waveform waits until there is a voice to show. */
.tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-kicker { display:none; }
.tour-voice-demo[data-state="idle"] .tour-record-wave { display:none; }
.tour-voice-demo .tour-record-caption:empty { display:none; }
/* Readout: one row per phrase, built in order, each resolving once. Rows are buttons: tap one to see the words behind it and change it. */
.tour-record-readout { display:grid; gap:1px; margin:0 0 6px; padding:4px 6px; list-style:none; border:1px solid #e3eaf4; border-radius:10px; background:#fff; }
.tour-record-readout[hidden] { display:none; }
.tour-record-readout li { border-radius:7px; opacity:0; transform:translateY(4px); transition:opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)),background-color var(--duration-fast,250ms); }
.tour-record-readout li.is-in { opacity:1; transform:none; }
.tour-record-readout li.is-lit { background:color-mix(in srgb,var(--key-soft) 55%,#fff); }
.tour-record-readout li.is-open { background:color-mix(in srgb,var(--key-soft) 85%,#fff); }
.tour-record-row { display:grid; grid-template-columns:40px minmax(0,auto) 12px minmax(0,1fr) 10px; align-items:center; column-gap:5px; width:100%; min-height:22px; padding:1px 5px; border:0; border-radius:7px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:default; -webkit-tap-highlight-color:transparent; }
.tour-record-row:not(:disabled) { cursor:pointer; }
.tour-record-row:not(:disabled):hover { background:color-mix(in srgb,var(--key-soft) 70%,#fff); }
.tour-record-row:focus-visible { outline:2px solid var(--key-ink,#075cff); outline-offset:-2px; }
.tour-record-row small { font-size:8.5px; font-weight:650; letter-spacing:.3px; text-transform:uppercase; color:#8a98ad; transition:color var(--duration-fast,250ms); }
.tour-record-readout li.is-lit small { color:var(--key-ink); }
.tour-record-row code { font:500 9px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#2d4a74; padding:1px 5px; border-radius:5px; background:#f1f5fb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; transition:background-color var(--duration-fast,250ms),color var(--duration-fast,250ms); }
.tour-record-readout li.is-lit code { background:var(--key-soft); color:var(--key-ink); }
.tour-record-row > i { position:relative; height:1px; background:#c9d5e6; transition:background-color var(--duration-fast,250ms); }
.tour-record-row > i::after { content:""; position:absolute; right:-1px; top:-3px; width:5px; height:5px; border-top:1px solid #c9d5e6; border-right:1px solid #c9d5e6; transform:rotate(45deg); transition:border-color var(--duration-fast,250ms); }
.tour-record-readout li.is-lit > .tour-record-row > i { background:var(--key-ink); }
.tour-record-readout li.is-lit > .tour-record-row > i::after { border-color:var(--key-ink); }
.tour-record-row b { position:relative; display:flex; align-items:center; gap:6px; min-width:0; font-size:11px; font-weight:650; color:#1b3354; }
.tour-record-value { display:inline-block; min-width:0; line-height:1.25; opacity:0; transform:translateY(4px); filter:blur(2px); transition:opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)),filter var(--duration-fast,250ms) var(--ease-in-out,ease-in-out); }
.tour-record-readout li.is-lit .tour-record-value { opacity:1; transform:none; filter:none; }
.tour-record-readout li.is-lit .tour-record-value.is-exit { opacity:0; transform:translateY(-3px); filter:blur(2px); transition-duration:var(--duration-quick,150ms); }
.tour-record-readout li.is-lit .tour-record-value.is-enter-start { opacity:0; transform:translateY(3px); filter:blur(2px); transition:none; }
/* Before a row resolves, a quiet placeholder holds its place. */
.tour-record-row b::before { content:""; position:absolute; width:58px; height:6px; border-radius:3px; background:linear-gradient(90deg,#e8eef7 0%,#f6f8fc 50%,#e8eef7 100%); background-size:200% 100%; animation:tour-readout-wait 1.1s linear infinite; }
.tour-record-readout li.is-lit b::before { display:none; }
@keyframes tour-readout-wait { from { background-position:100% 0; } to { background-position:-100% 0; } }
.tour-record-row-chevron { width:12px; height:12px; fill:none; stroke:var(--key-ink,#6a7d98); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity var(--duration-fast,250ms),transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-readout li.is-lit .tour-record-row:not(:disabled) .tour-record-row-chevron { opacity:.55; }
.tour-record-readout li.is-open .tour-record-row-chevron { opacity:1; transform:rotate(180deg); }
/* transitions.dev accordion: the choices unfold under the row, one row at a time. */
.tour-record-edit { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-readout li.is-open .tour-record-edit { grid-template-rows:1fr; }
.tour-record-edit-inner { min-height:0; overflow:hidden; opacity:0; transform:translateY(-3px); transition:opacity var(--duration-quick,150ms) var(--ease-in-out,ease-in-out),transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-readout li.is-open .tour-record-edit-inner { opacity:1; transform:none; transition-delay:60ms; }
.tour-record-edit-hint { display:block; margin:0 5px 5px; color:#5c7290; font-size:9px; line-height:1.4; }
.tour-record-options { display:flex; flex-wrap:wrap; gap:4px; padding:0 5px 7px; }
.tour-record-options button { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid #dbe5f2; border-radius:7px; background:#fff; color:#4e6585; font:600 9.5px var(--font-body,system-ui); cursor:pointer; transition:background-color var(--duration-quick,150ms),border-color var(--duration-quick,150ms),color var(--duration-quick,150ms); }
.tour-record-options button:hover { background:#f4f7fc; }
.tour-record-options button[aria-pressed="true"] { border-color:var(--key-ink); color:var(--key-ink); background:var(--key-soft); }
.tour-record-options button:focus-visible { outline:2px solid #075cff; outline-offset:2px; }
/* The word that matters pulses once as its row resolves, and again whenever its row is opened. */
/* The pulse and the focus ring live on a pseudo-element and animate opacity and scale only; an animated box-shadow repainted the word every frame while the hero was still booting. */
.tour-record-word[data-key] { position:relative; }
.tour-record-word[data-key]::after { content:''; position:absolute; inset:-3px; border-radius:7px; box-shadow:0 0 0 4px var(--key-ink); opacity:0; pointer-events:none; }
.tour-record-word[data-key].is-lit::after { animation:tour-word-pop var(--duration-very-slow,500ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-word[data-key].is-focus::after { animation:tour-word-focus 900ms var(--ease-out,ease-out); }
@keyframes tour-word-pop { 0% { opacity:0; transform:scale(1); } 45% { opacity:.22; transform:scale(1.12); } 100% { opacity:0; transform:scale(1.2); } }
@keyframes tour-word-focus { 0% { opacity:.9; transform:scale(1); } 100% { opacity:0; transform:scale(1.35); } }
@media(prefers-reduced-motion:reduce) { .tour-record-word[data-key]::after { animation:none; } }
/* Where it goes: the item as it will be filed, with the client, the kind and every chip reading from the same draft. */
.tour-record-suggest { display:grid; gap:7px; margin:0 0 8px; padding:7px 8px; border:1px solid #d3dff0; border-radius:11px; background:#fff; animation:tour-suggest-in var(--duration-slow,400ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)) both; }
.tour-record-suggest[hidden] { display:none; }
.tour-record-preview { position:relative; display:grid; gap:6px; min-width:0; }
.tour-record-preview-client { display:flex; align-items:center; gap:7px; min-width:0; opacity:.38; transform:translateY(3px); transition:opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-preview-client.is-lit { opacity:1; transform:none; }
.tour-record-preview-initials { display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:7px; background:#eaf1ff; color:#075cff; font-style:normal; font-size:8px; font-weight:750; letter-spacing:.02em; }
.tour-record-preview-name { display:grid; flex:1; min-width:0; line-height:1.2; }
.tour-record-preview-name b { font-size:11px; font-weight:650; color:#1b3354; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tour-record-preview-name em { font-style:normal; font-size:8.5px; color:#075cff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tour-swap { display:block; transition:opacity var(--duration-quick,150ms) var(--ease-in-out,ease-in-out),transform var(--duration-quick,150ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)),filter var(--duration-quick,150ms) var(--ease-in-out,ease-in-out); }
.tour-swap.is-exit { opacity:0; transform:translateY(-3px); filter:blur(2px); }
.tour-swap.is-enter-start { opacity:0; transform:translateY(3px); filter:blur(2px); transition:none; }
.tour-record-why { flex:none; display:inline-flex; align-items:center; gap:4px; min-height:24px; padding:0 8px; border:1px solid #dbe5f2; border-radius:7px; background:#fff; color:#4e6585; font:600 9px var(--font-body,system-ui); white-space:nowrap; cursor:pointer; transition:background-color var(--duration-quick,150ms),border-color var(--duration-quick,150ms),color var(--duration-quick,150ms); }
.tour-record-why::after { content:""; width:5px; height:5px; margin-top:-2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-why:hover { background:#f4f7fc; }
.tour-record-why[aria-expanded="true"] { border-color:#a9c4f3; color:#0b4fd6; background:#eaf1ff; }
.tour-record-why[aria-expanded="true"]::after { transform:rotate(-135deg); margin-top:2px; }
.tour-record-why:focus-visible { outline:2px solid #075cff; outline-offset:2px; }
/* The scores unfold beneath the client and take the place of the title and chips while open, so the card barely grows. */
.tour-record-preview-body { display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--duration-medium,350ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-preview-body-inner { display:grid; gap:6px; min-height:0; overflow:hidden; opacity:1; transition:opacity var(--duration-quick,150ms) var(--ease-in-out,ease-in-out); }
.tour-record-preview.is-why-open .tour-record-preview-body { grid-template-rows:0fr; }
.tour-record-preview.is-why-open .tour-record-preview-body-inner { opacity:0; }
.tour-record-why-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--duration-medium,350ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-why-panel.is-open { grid-template-rows:1fr; }
.tour-record-why-inner { min-height:0; overflow:hidden; opacity:0; transform:translateY(-4px); transition:opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-why-panel.is-open .tour-record-why-inner { opacity:1; transform:none; transition-delay:80ms; }
.tour-record-why-card { margin:2px 0 0; padding:8px 9px; border:1px solid #dbe5f2; border-radius:9px; background:#f8fafd; }
.tour-record-why-card > small { display:block; font-size:8.5px; font-weight:650; letter-spacing:.4px; text-transform:uppercase; color:#6a7d98; }
.tour-record-scores { display:grid; gap:5px; margin:7px 0 0; padding:0; list-style:none; }
.tour-record-scores li { display:grid; grid-template-columns:minmax(0,1fr) minmax(70px,96px) 32px; align-items:center; gap:8px; color:#4e6585; font-size:10px; }
.tour-record-scores li > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tour-record-scores li:first-child { color:#1b3354; font-weight:650; }
.tour-record-scores i { display:block; height:6px; border-radius:3px; background:#e6edf7; overflow:hidden; }
.tour-record-scores i > b { display:block; height:100%; border-radius:3px; background:#b7c7e0; transform-origin:left; transform:scaleX(0); transition:transform 900ms var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-scores li:first-child i > b { background:#075cff; }
.tour-record-scores li:nth-child(2) i > b { transition-delay:80ms; }
.tour-record-scores li:nth-child(3) i > b { transition-delay:160ms; }
.tour-record-scores li.is-shown i > b { transform:scaleX(var(--score,0)); }
.tour-record-scores strong { font-size:10px; font-weight:650; text-align:right; font-variant-numeric:tabular-nums; }
.tour-record-why-card p { margin:7px 0 0; color:#6a7d98; font-size:9px; line-height:1.5; }
.tour-record-preview-title { display:flex; align-items:baseline; gap:6px; margin:0; min-width:0; color:#1b3354; font-size:11px; font-weight:600; line-height:1.4; }
.tour-record-preview-kind { flex:none; padding:1px 6px; border-radius:5px; background:var(--key-soft,#eef2f8); color:var(--key-ink,#2d4a74); font-size:8.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; opacity:.38; }
.tour-record-preview-kind.is-lit { opacity:1; }
.tour-record-preview-text { min-width:0; }
.tour-record-preview-chips { display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; list-style:none; }
.tour-record-preview-chips li { display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border-radius:6px; background:#f1f5fb; color:#536b8c; font-size:9.5px; font-weight:650; opacity:.38; transform:translateY(3px); transition:opacity var(--duration-fast,250ms) var(--ease-in-out,ease-in-out),transform var(--duration-fast,250ms) var(--ease-smooth-out,cubic-bezier(.22,1,.36,1)); }
.tour-record-preview-chips li.is-lit { opacity:1; transform:none; }
.tour-record-preview-chips [data-tone="due"] { background:#fff4de; color:#8a5a06; }
.tour-record-preview-chips [data-tone="high"] { background:#ffeae6; color:#b23d2d; }
.tour-record-preview-chips [data-tone="medium"] { background:#eaf1ff; color:#0b4fd6; }
.tour-record-preview-chips [data-tone="low"] { background:#e8f5ef; color:#1f7258; }
.tour-record-suggest.is-posted { display:none; }
.tour-voice-demo[data-state="saved"] .tour-record-transcript { display:none; }
/* At ready the sentence stays up beside the readout, slimmer, so the lit words and their rows read together. */
.tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-transcript { margin-bottom:6px; padding:3px 7px 4px; font-size:11px; line-height:1.5; background:#f7f9fc; border-color:#e9eef6; }
.tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-filler { display:none; }
.tour-record-caption[data-error="true"] { color:#9b4f2b; }
@keyframes tour-suggest-in { from { opacity:0; transform:translateY(6px); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
@media(prefers-reduced-motion:reduce) { .tour-record-suggest,.tour-record-word,.tour-record-filler,.tour-record-preview-client,.tour-record-preview-chips li,.tour-record-readout li,.tour-record-readout li *,.tour-record-row b::before,.tour-record-edit,.tour-record-edit-inner,.tour-record-why-panel,.tour-record-why-inner,.tour-record-scores i > b,.tour-swap,.tour-record-preview-body,.tour-record-preview-body-inner { animation:none; transition:none; } }
.tour-record-actions { display:flex; flex-wrap:wrap; gap:7px; }
.tour-record-actions button { display:inline-flex; flex:1; justify-content:center; align-items:center; min-height:40px; padding:9px 8px; border:1px solid #d3dff0; border-radius:8px; color:#2d4a74; background:#fff; font:700 11px var(--font-body,system-ui); white-space:nowrap; cursor:pointer; touch-action:manipulation; }
.tour-record-actions .tour-record-start,.tour-record-actions .tour-record-post { color:#fff; background:#075cff; border-color:#075cff; }
.tour-record-actions .tour-record-again { flex:0 0 auto; }
@media (hover:hover) and (pointer:fine) { .tour-record-actions button:hover { background:#eef3ff; } .tour-record-actions .tour-record-start:hover,.tour-record-actions .tour-record-post:hover { background:#004cdd; } }
.tour-record-actions button:disabled { opacity:.65; cursor:wait; }
.tour-voice-demo .tour-record-caption { margin:9px 0 0; color:#5e7390; font-size:9px; line-height:1.5; }
@keyframes tour-sample-wave { from { transform:scaleY(.25); } to { transform:scaleY(1); } }

/* transitions.dev text-states-swap; variables are shared via motion-tokens.css. */
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
@media(max-width:760px) {
 .hero-tour .tour-voice-demo { margin-left:-76px; }
 .tour-record-kicker { font-size:10px; }
 .tour-record-status { font-size:13px; }
 .tour-record-row { grid-template-columns:36px minmax(0,auto) 10px minmax(0,1fr) 10px; column-gap:4px; }
 .tour-record-row b { font-size:10.5px; }
 .tour-record-row code { font-size:8.5px; }
 .tour-record-client,.tour-voice-demo .tour-record-caption { font-size:10px; }
 .tour-record-actions button { min-height:44px; font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
 .t-text-swap { transition: none !important; }
 .tour-voice-demo[data-state="recording"] .tour-record-wave i { animation:none!important; transform:scaleY(.7); }
 .tour-record-logo *,.tour-record-name i,.tour-record-badge,.tour-record-wave { animation:none!important; transition:none!important; }
 .tour-voice-demo[data-state="recording"] .tour-record-logo .tr-stroke { opacity:0; }
}

/* One viewport, one steady stage. Only the task area scrolls between steps. */
.marketing-home :is(.js .hero-tour,.hero-tour.is-guided) { height:min(850px,calc(100svh - var(--site-header-height,80px) - 28px)); display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; }
:is(.js .hero-tour,.hero-tour.is-guided) .browser-frame { min-height:0; display:grid; grid-template-rows:52px minmax(0,1fr); }
.marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-canvas { height:100%; min-height:0; }
:is(.js .hero-tour,.hero-tour.is-guided) .hero-extension-frame { height:100%; min-height:0; max-height:100%; }
.marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-placeholder { height:max(100px,calc(100% - var(--tour-coach-height,220px))); overflow-y:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; padding:22px 24px; }
:is(.js .hero-tour,.hero-tour.is-guided) figcaption { margin-top:10px; font-size:10px; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-voice { padding:16px; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-copy { min-height:0; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-copy h2 { margin:8px 0 6px; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-copy p { line-height:1.5; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-voice::after { display:none; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-profile-scene { padding:12px 0; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-profile-character { width:88px; margin:12px auto; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-report-table { display:none; }
:is(.js .hero-tour,.hero-tour.is-guided) .tour-voice-demo { margin-top:10px; }
@media(max-width:760px) {
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) { height:min(660px,calc(100svh - var(--site-header-height,68px) - 20px)); }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-controls { min-width:0; margin:0 0 8px; justify-content:start; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters { display:flex; overflow-x:auto; scrollbar-width:none; scroll-padding-inline:4px; gap:4px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters button { flex:none; padding:8px 12px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .browser-frame { grid-template-rows:40px minmax(0,1fr); }
 :is(.js .hero-tour,.hero-tour.is-guided) .browser-bar { height:40px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice { padding:12px 14px 10px 78px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-copy h2 { font-size:17px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-copy p { font-size:12px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-step { font-size:9px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-actions { margin-top:4px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-actions > :not([hidden]) { font-size:12px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-buddy-flight,:is(.js .hero-tour,.hero-tour.is-guided) .tour-buddy-button,:is(.js .hero-tour,.hero-tour.is-guided) .tour-buddy { width:48px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .hero-extension-frame { flex:1; height:0; min-height:0; }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-placeholder { flex:1; min-height:0; height:0; padding:16px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice-demo { margin-left:-64px; padding:8px 10px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-hud { min-height:40px; margin:4px 0 6px; padding:4px 12px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-kicker { font-size:9px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-caption { margin-top:6px; font-size:9px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-status { font-size:12px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-actions button { padding-block:6px; }
 :is(.js .hero-tour,.hero-tour.is-guided)[data-scene="notes"] .tour-spoken { display:none; }
 :is(.js .hero-tour,.hero-tour.is-guided) figcaption { justify-content:center; margin-top:8px; font-size:9px; }
 :is(.js .hero-tour,.hero-tour.is-guided) figcaption b { display:none; }
}
/* The guide travels with its voice; it never leaves a detached speech card. */
:is(.js .hero-tour,.hero-tour.is-guided) .tour-voice { transition:none; }
@media(min-width:761px) {
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide[data-side=left] .tour-voice::after { display:block; top:0; transform:translateY(var(--tour-pointer-y,44px)) rotate(45deg); transition:transform var(--duration-slow) var(--ease-smooth-out); }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice { box-shadow:0 8px 22px #17345112,0 2px 5px #17345106; }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) .browser-placeholder { height:var(--tour-content-height,calc(100% - var(--tour-coach-height,220px))); }
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided)[data-scene=profile] .browser-placeholder { height:100%; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-profile-scene { width:208px; padding:12px 0; }
 .hero-tour .tour-profile-kicker { font-size:8px; font-weight:750; letter-spacing:1.25px; color:#6483ab; }
 .hero-tour .tour-profile-intro h3 { margin:14px 0 10px; font-size:27px; line-height:1.14; letter-spacing:-1px; color:#203b60; }
 .hero-tour .tour-profile-intro p { margin:0; font-size:11px; line-height:1.65; color:#65809f; }
 .tour-client-vignette { position:relative; isolation:isolate; display:block; width:100%; margin-top:26px; padding:18px 14px 14px; border:1px solid #d8e5f7; border-radius:18px; background:#fff; box-shadow:0 12px 28px #3957850b; text-align:center; font:inherit; cursor:pointer; transition:transform var(--duration-fast) var(--ease-smooth-out); }
@media (hover: hover) and (pointer: fine) { .tour-client-vignette:hover { transform:translateY(-3px) rotate(1deg); } }
 .tour-client-vignette::before,.tour-client-vignette::after { content:''; position:absolute; inset:3px; z-index:-1; border:1px solid #d8e5f7; border-radius:17px; background:#e9f1ff; transform:rotate(-5deg) translateY(-5px); }
 .tour-client-vignette::after { inset:0; transform:none; background:linear-gradient(160deg,#fff,#f5f9ff); }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-client-vignette .tour-profile-character { width:70px; margin:0 auto 10px; color:var(--character-ink,#075cff); filter:drop-shadow(0 4px 2px #075cff10); }
 .tour-client-label { display:block; margin:6px 0; font-size:8px; letter-spacing:.75px; text-transform:uppercase; color:#5e7390; }
 .tour-client-vignette strong { display:block; font-size:13px; color:#284363; letter-spacing:-.2px; }
 .tour-client-contents { display:flex; justify-content:center; gap:5px; margin:14px 0; }
 .tour-client-contents span { padding:5px 7px; background:#eaf1ff; color:#416394; border-radius:5px; font-size:8px; }
 .tour-client-contents span:nth-child(2) { background:#e8f5ef; color:#327d68; }
 .tour-client-contents span:nth-child(3) { background:#f1ecfa; color:#7a59ac; }
 .tour-client-saved { display:flex; align-items:center; justify-content:center; gap:5px; padding-top:10px; border-top:1px solid #e6edf7; font-size:8px; color:#5e7390; }
 .tour-client-saved i { width:4px; height:4px; background:#22a383; border-radius:50%; }
}
@media(prefers-reduced-motion:reduce) { .tour-client-vignette,.tour-client-vignette:hover { transition:none; transform:none; }:is(.js .hero-tour,.hero-tour.is-guided) .tour-guide[data-side=left] .tour-voice::after { transition:none; } }
@media(min-width:761px) and (max-width:1100px) {
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-profile-scene { width:100%; padding-top:0; }
 .hero-tour .tour-profile-intro h3 { font-size:23px; margin-top:10px; }
 .hero-tour .tour-profile-intro p,.hero-tour .tour-client-vignette { display:none; }
}

:is(.js .hero-tour,.hero-tour.is-guided) .browser-placeholder:is(:hover,:focus-within) { scrollbar-color:#c4d5ee transparent; }

@media(max-width:760px) {
 :is(.js .hero-tour,.hero-tour.is-guided)[data-picker-open="true"] .tour-spoken,:is(.js .hero-tour,.hero-tour.is-guided)[data-picker-open="true"] .tour-guide-actions { display:none; }
 :is(.js .hero-tour,.hero-tour.is-guided)[data-picker-open="true"] .tour-voice { min-height:78px; }
}

/* Phones: a compact guide leaves the task itself room to breathe. The chapter
   strip fades only at edges hiding another tab, so Reconcile and Follow-up peek in. */
@media(max-width:760px) {
 .marketing-home :is(.js .hero-tour,.hero-tour.is-guided) { height:min(720px,calc(100svh - var(--site-header-height,68px) - 14px)); }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters { scroll-snap-type:x proximity; scroll-padding-inline:24px; padding-right:2px; --strip-fade:28px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters button { scroll-snap-align:center; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters:is([data-more="end"],[data-more="both"]) { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--strip-fade)),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - var(--strip-fade)),transparent); }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters[data-more="start"] { -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--strip-fade)); mask-image:linear-gradient(90deg,transparent,#000 var(--strip-fade)); }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters[data-more="both"] { -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--strip-fade),#000 calc(100% - var(--strip-fade)),transparent); mask-image:linear-gradient(90deg,transparent,#000 var(--strip-fade),#000 calc(100% - var(--strip-fade)),transparent); }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice { padding:10px 12px 6px 60px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-buddy-flight,:is(.js .hero-tour,.hero-tour.is-guided) .tour-buddy-button,:is(.js .hero-tour,.hero-tour.is-guided) .tour-buddy { width:40px; min-height:40px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-buddy-shadow { display:none; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-copy h2 { margin:4px 0 4px; font-size:16px; letter-spacing:-.4px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-copy p { font-size:12px; line-height:1.45; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-actions { margin-top:2px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide-actions > :not([hidden]) { min-height:40px; padding-block:4px; }
 /* A finished step keeps its title and next action; the explanation steps aside. */
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-guide[data-complete="true"] .tour-spoken { display:none; }
 /* The recorder becomes one row: character and status beside the action. */
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice-demo:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 10px; margin:6px 0 0 -48px; padding:8px 10px; }
 :is(.js .hero-tour,.hero-tour.is-guided) :is(.tour-record-kicker,.tour-record-client) { display:none; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-status { font-size:12px; line-height:1.25; text-wrap:balance; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-hud { min-height:36px; margin:0; padding:4px 12px; gap:8px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-suggest,:is(.js .hero-tour,.hero-tour.is-guided) .tour-record-readout,:is(.js .hero-tour,.hero-tour.is-guided) .tour-record-transcript,:is(.js .hero-tour,.hero-tour.is-guided) .tour-voice-demo .tour-record-caption { grid-column:1/-1; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-suggest { margin:0; padding:7px 9px; gap:5px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice-demo .tour-record-caption { margin:0; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-record-actions button { min-height:40px; padding:6px 12px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice-demo:is([data-state="ready"],[data-state="posting"],[data-state="saved"]) .tour-record-actions { grid-column:1/-1; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-voice-demo:is([data-state="ready"],[data-state="posting"]) .tour-record-client { display:none; }
}
@media(max-width:760px) and (prefers-reduced-motion:reduce) { :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters { scroll-snap-type:none; } }

/* The workspace and its guide appear together once connected, so inserting the
   guide never pushes the frame. If the module never arrives, CSS shows the
   canvas anyway. */
.js .marketing-home .hero-tour:not(.is-guided) .browser-canvas { visibility:hidden; animation:tour-canvas-fallback 0s linear 3s forwards; }
.marketing-home .hero-tour.is-guided .browser-canvas { animation:tour-canvas-in var(--duration-fast) var(--ease-smooth-out) both; }
@keyframes tour-canvas-fallback { to { visibility:visible; } }
@keyframes tour-canvas-in { from { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .marketing-home .hero-tour.is-guided .browser-canvas { animation:none; } }

/* Rotating headline. The slot stacks every phrase in one grid cell, so it
   always reserves the longest one on a single line. A Sumlino character hops
   along the baseline: old letters sink just ahead of it, new letters spring up
   behind it on a shared animation clock. Screen readers get the
   stable sentence; the animated layer is hidden from them. */
.marketing-home .headline-wrap { position: relative; max-width: 860px; margin-inline: auto; }
/* Room above the words for the character's skip on larger screens. */
@media(min-width:1100px) { .marketing-home .headline-wrap { padding-top: 14px; } }
.marketing-home .hero .hero-headline { --headline-fit: 11.2; position: relative; }
.headline-visual { display: block; }
/* Not clipped: letters and the runner fade as they move, so nothing depends on a
   clip that some engines stop repainting after many animated turns. */
.headline-slot { position: relative; display: inline-grid; justify-items: center; max-width: 100%; vertical-align: top; white-space: nowrap; font-kerning: none; font-variant-ligatures: none; }
.headline-phrase { grid-area: 1 / 1; visibility: hidden; }
.headline-phrase.is-current,.headline-phrase.is-leaving { visibility: visible; }
.headline-letter { display: inline-block; white-space: pre; }
.headline-probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.headline-runner { position: absolute; z-index: 1; left: 0; bottom: var(--headline-baseline, .2em); width: .62em; color: var(--character-ink, #075cff); pointer-events: none; opacity: 0; transform: translateY(40%); }
.headline-runner-body { display: block; transform-origin: 50% 100%; color: var(--character-ink, #075cff); }
.headline-runner svg { display: block; width: 100%; margin-bottom: -10%; overflow: visible; } /* the artwork's feet sit 10% above its box */
.headline-runner .client-character-crown { transform-box: view-box; }
@media(max-width:620px) {
 /* Narrow screens shrink the headline so the longest phrase still fits on one line. */
 .marketing-home .hero .hero-headline { font-size: min(clamp(34px, 8.7vw, 48px), calc((100vw - 36px) / var(--headline-fit))); }
}
@media(prefers-reduced-motion:reduce) { .headline-runner { display: none; } }
/* Without scripts the chapter row keeps its space but has nothing to drive. */
html:not(.js) .hero-tour .tour-controls { visibility: hidden; }

/* Character splash: one component, coloured by --splash-color. Particles fly
   from the character's centre on a polar path; the character squashes, springs
   and smiles, then settles. Nothing here affects layout. */
.splash { position: absolute; left: 50%; top: 50%; z-index: 3; width: 0; height: 0; pointer-events: none; }
.splash-particle { position: absolute; left: 0; top: 0; display: block; color: color-mix(in srgb, var(--splash-color) var(--tint), white); font: 800 10px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-style: normal; opacity: 0; animation: splash-fly var(--splash-duration) cubic-bezier(.15,.75,.3,1) var(--delay) both; }
.splash-particle.is-capsule { width: 7px; height: 3px; border-radius: 2px; background: currentColor; }
.splash-particle.is-spark { width: 2.5px; height: 8px; border-radius: 2px; background: currentColor; animation-name: splash-ray; }
@keyframes splash-fly {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-.3 * var(--reach))) rotate(calc(-1 * var(--angle))) scale(.3); }
  20%,62% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--reach))) rotate(calc(var(--spin) - var(--angle))) scale(.9); }
}
@keyframes splash-ray {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-.35 * var(--reach))) scaleY(.4); }
  25%,55% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--reach))) scaleY(.6); }
}
svg.is-cheering { transform-origin: 50% 88%; animation: cheer-medium var(--duration-very-slow) cubic-bezier(.3,.7,.4,1) both; }
svg.is-cheering.cheer-soft { animation-name: cheer-soft; }
svg.is-cheering.cheer-strong { animation-name: cheer-strong; animation-duration: 620ms; }
@keyframes cheer-soft { 25% { transform: scale(1.07,.93); } 55% { transform: translateY(-2px) scale(.97,1.04); } }
@keyframes cheer-medium { 22% { transform: translateY(1px) scale(1.13,.86); } 50% { transform: translateY(-4px) scale(.94,1.08); } 75% { transform: scale(1.02,.98); } }
@keyframes cheer-strong { 20% { transform: translateY(1px) scale(1.2,.8); } 46% { transform: translateY(-7px) scale(.9,1.14); } 70% { transform: translateY(1px) scale(1.06,.94); } 86% { transform: scale(.99,1.01); } }
.splash-anchor { position: relative; }
.is-glad { filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 35%, transparent)); }
/* The Sumlino crew inside the sign-up buttons. A clipped strip above the
   button's top edge lets three of them peek out; the burst layer floats free. */
.cta-crew { position: absolute; left: 0; right: 0; bottom: 100%; height: 19px; overflow: hidden; pointer-events: none; }
.cta-peeker { position: absolute; bottom: 0; left: calc(27% + var(--slot) * 23%); width: 24px; margin-left: -12px; transform: translateY(105%) rotate(var(--tilt, 0deg)); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.cta-peeker:nth-child(1) { --tilt: -11deg; }
.cta-peeker:nth-child(2) { --tilt: 3deg; transition-delay: 45ms; }
.cta-peeker:nth-child(3) { --tilt: 12deg; transition-delay: 90ms; }
.cta-peeker svg,.cta-burst-character svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (hover: hover) and (pointer: fine) { .primary-cta:hover .cta-peeker { transform: translateY(40%) rotate(var(--tilt, 0deg)); transition-timing-function: var(--ease-bounce); } }
.primary-cta:focus-visible .cta-peeker { transform: translateY(40%) rotate(var(--tilt, 0deg)); }
.primary-cta.is-spilling .cta-peeker { transform: translateY(105%); transition-duration: 80ms; transition-delay: 0s; }
.cta-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.cta-burst-character { position: absolute; left: 0; top: 0; display: block; width: var(--size, 28px); filter: drop-shadow(0 4px 6px #17345424); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .cta-crew { display: none; } }
/* In the header the burst is clipped short of the first link and the action. */
.splash-clip { position: absolute; inset: -16px -10px -16px -16px; overflow: hidden; pointer-events: none; }
.splash-clip > .splash { left: 38px; top: 38px; }
/* Waking: the logo folds away as the character bounces up; cheering lifts the
   crown; settling lets it come to rest; leaving folds it back the same way. */
.brand-symbol.is-cheering img { opacity: 0; transform: scale(.82) rotate(-6deg); transition: opacity 140ms var(--ease-in-out), transform 300ms var(--ease-smooth-out); }
.brand-symbol.is-cheering .brand-face { opacity: 1; transform: translateY(-3px) rotate(3deg); transition: opacity 160ms var(--ease-in-out), transform 460ms var(--ease-bounce); }
.brand-symbol.is-cheering .brand-face .client-character-crown { transform: translateY(-7px) rotate(-3deg); transition: transform 460ms var(--ease-bounce); }
.brand-symbol.is-cheering.is-settled .brand-face { transform: translateY(-1px) rotate(0deg); transition: transform 520ms var(--ease-bounce); }
.brand-symbol.is-cheering.is-settled .brand-face .client-character-crown { transform: translateY(-2px) rotate(1deg); transition: transform 520ms var(--ease-bounce); }
.has-get-sumlino .brand-symbol.is-cheering.is-settled .brand-face .client-character-crown { transform: translateY(-3px) rotate(2deg); }
.splash-particle.is-glyph { font-size: 11px; }
@media(max-width:700px) { .splash-clip { display: none; } }
@media(prefers-reduced-motion:reduce) { .splash { display: none; } svg.is-cheering { animation: none; } }

/* First-visit reveal, staged like a film's opening shot (site.js decides
   before first paint; page-reveal.js builds the crowd). Every move is a
   transform or opacity animation on the compositor, so it starts with the
   first frame and stays smooth while the page below is still booting.
   Characters pop in from the centre in three depths, then part from the
   centre: near ones rush past the camera, far ones drift into the haze, the
   backdrop dissolves and the hero rises through the gap. Decorative and
   aria-hidden; the whole timeline is CSS, so it ends even if no script runs. */
.reveal-curtain { display: none; }
.reveal-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
html.has-curtain .reveal-curtain { display: block; position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; contain: strict; animation: reveal-done 0s linear 1.95s forwards; }
.reveal-curtain::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 46%, #f4f8ff 0%, #eef4ff 55%, #e4edfd 100%); animation: reveal-backdrop 640ms cubic-bezier(.45,0,.55,1) 600ms both; }
.reveal-crowd { position: absolute; inset: 0; transform-origin: var(--focus-x, 50%) var(--focus-y, 46%); animation: reveal-camera 1.95s cubic-bezier(.3,0,.6,1) both; }
.reveal-character { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; margin: calc(var(--w) * -.5) 0 0 calc(var(--w) * -.5); overflow: visible;
  animation: reveal-pop 440ms cubic-bezier(.34,1.36,.64,1) var(--in) both, reveal-part var(--time) linear var(--out) both; }
.reveal-curtain.is-skipped { opacity: 0; transition: opacity 160ms ease-out; pointer-events: none; }
@keyframes reveal-done { to { visibility: hidden; pointer-events: none; } }
@keyframes reveal-backdrop { from { opacity: 1; } to { opacity: 0; } }
@keyframes reveal-camera { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes reveal-pop { from { scale: 0; } to { scale: 1; } }
/* A small gather toward the centre, then away along the character's own line. */
@keyframes reveal-part {
  from { transform: translate(0, 0) rotate(var(--r)) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.3,0,.4,1); }
  10% { transform: translate(calc(var(--dx) * -.015), calc(var(--dy) * -.015 + 3px)) rotate(var(--r)) scale(1.04, .95); opacity: 1; animation-timing-function: cubic-bezier(.33,0,.67,.55); }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r2)) scale(var(--grow)); opacity: var(--fade); }
}
/* After the opening reveal the hero's entrance waits until the crowd is
   clearing (about 0.76s), so the text and the demo are seen to fade in as the
   last characters leave, with no empty pause between; slightly longer and
   wider-spaced than a return visit. Pure CSS, so it never depends on the
   reveal script finishing; a skip collapses the wait (page-reveal.js). */
html.is-revealing .marketing-home .hero-arrival { --arrival-lead: 760ms; --arrival-fade-time: 560ms; --arrival-rise-time: 760ms; animation-delay: calc(var(--arrival-delay) + var(--arrival-lead)), calc(var(--arrival-delay) + var(--arrival-lead)); }
html.is-revealing .marketing-home .headline-wrap.hero-arrival { --arrival-delay: 80ms; }
html.is-revealing .marketing-home .hero-arrival[data-arrival-stage="1"] { --arrival-delay: 160ms; }
html.is-revealing .marketing-home .hero-arrival[data-arrival-stage="2"] { --arrival-delay: 240ms; }
html.is-revealing .marketing-home .hero-arrival[data-arrival-stage="3"] { --arrival-delay: 390ms; --arrival-fade-time: 700ms; --arrival-rise-time: 880ms; }
@media (prefers-reduced-motion: reduce) { html.has-curtain .reveal-curtain { display: none; } }
/* The few far characters that stay: they glide to the hero's margins and are
   still visible for the instant between the curtain hiding and its removal. */
.reveal-character.is-staying { visibility: visible; animation: reveal-pop 440ms cubic-bezier(.34,1.36,.64,1) var(--in) both, reveal-settle var(--time) linear var(--out) both; }
@keyframes reveal-settle {
  from { transform: translate(0, 0) rotate(var(--r)) scale(1); animation-timing-function: cubic-bezier(.3,0,.4,1); }
  12% { transform: translate(calc(var(--dx) * -.02), calc(var(--dy) * -.02 + 2px)) rotate(var(--r)) scale(1.03, .96); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r2)) scale(var(--grow)); }
}
/* The background cast: hazed, small, beneath the content, floating slowly and
   drifting a few pixels against the scroll. The hero's layer covers the first
   screen exactly, so its members stand where the curtain's survivors stopped. */
.ambient-cast { position: absolute; z-index: -1; top: var(--cast-top, 0px); left: var(--cast-left, 0px); display: block; width: var(--cast-width, 100%); height: var(--cast-height, 100vh); overflow: clip; pointer-events: none; }
.ambient-cast.is-section { top: 0; right: calc((100% - 100vw) / 2); bottom: 0; left: calc((100% - 100vw) / 2); width: auto; height: auto; }
.has-cast { position: relative; isolation: isolate; }
.ambient-character { position: absolute; top: var(--y); left: var(--x); width: var(--w); margin: calc(var(--w) * -.5) 0 0 calc(var(--w) * -.5); color: var(--ink); transform: translate3d(0, calc(var(--scroll, 0) * var(--depth, 0) * 1px), 0) rotate(var(--r, 0deg)); }
.ambient-character svg, .peek-character svg { display: block; width: 100%; height: auto; overflow: visible; }
.ambient-character svg { animation: ambient-float var(--float, 8s) ease-in-out var(--delay, 0s) infinite; }
.ambient-cast.is-resting .ambient-character svg, html.has-curtain .ambient-character svg { animation-play-state: paused; }
html.has-curtain .ambient-character { opacity: 0; }
.ambient-cast:not(.is-handoff) .ambient-character { transition: opacity var(--duration-very-slow) var(--ease-smooth-out); }
.ambient-cast.is-arriving .ambient-character { animation: ambient-arrive 900ms var(--ease-smooth-out) 700ms backwards; }
@keyframes ambient-arrive { from { opacity: 0; } }
@keyframes ambient-float { 0%, 100% { transform: none; } 50% { transform: translateY(-6px) rotate(4deg); } }
@media (max-width: 1099px) { .ambient-cast.is-section { display: none; } }
/* Peeks: a character rises from behind an edge, looks, and ducks back. The
   slot clips at the edge, so it reads as hiding behind the card or the screen. */
.has-peek { position: relative; }
.peek-slot { --peek-w: 52px; position: absolute; z-index: 3; width: var(--peek-w); height: calc(var(--peek-w) * .58); overflow: clip; pointer-events: none; }
.peek-top { bottom: 100%; }
.peek-report { left: calc(50% - var(--peek-w) / 2); }
.peek-edge { top: 18px; left: calc((100% - 100vw) / 2); width: calc(var(--peek-w) * .62); height: calc(var(--peek-w) * 1.12); }
.peek-character { display: block; width: var(--peek-w); color: var(--ink); transform: translateY(104%); transition: transform var(--duration-slow) var(--ease-smooth-out); }
.peek-slot.is-peeking .peek-character { transform: translateY(9%) rotate(-5deg); transition: transform var(--duration-very-slow) var(--ease-bounce); }
.peek-edge .peek-character { transform: translateX(-104%) rotate(30deg); }
.peek-edge.is-peeking .peek-character { transform: translateX(-38%) rotate(16deg); }
@media (max-width: 620px) { .peek-slot { --peek-w: 44px; } .peek-edge { top: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .ambient-character svg { animation: none; }
  .ambient-character { transform: rotate(var(--r, 0deg)); }
  .peek-slot { display: none; }
}

/* Phones: the six walkthrough steps sit in a 3 × 2 segmented grid, so every
   step (Follow-up included) is visible and tappable without a hidden scroll. */
@media(max-width:760px) {
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-controls { justify-content:stretch; }
 :is(.js .hero-tour,.hero-tour.is-guided) :is(.tour-chapters,.tour-chapters[data-more]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; width:100%; overflow:visible; padding:0; -webkit-mask-image:none; mask-image:none; scroll-snap-type:none; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters button { flex:none; justify-content:center; min-width:0; min-height:42px; padding:6px 4px; gap:5px; font-size:12px; white-space:nowrap; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters button:not([aria-pressed="true"]) { border-color:#dfe7f2; background:#ffffffc7; color:#3f5878; }
}
@media(max-width:340px) { :is(.js .hero-tour,.hero-tour.is-guided) .tour-chapters button > span { display:none; } }

/* The embedded panel fades in once it has become the walkthrough's preview. */
.js :is(.hero-extension-frame, #workspace-preview):not(.is-ready) { opacity: 0; }
.js :is(.hero-extension-frame, #workspace-preview) { transition: opacity var(--duration-slow) var(--ease-smooth-out); }
@media (prefers-reduced-motion: reduce) { .js :is(.hero-extension-frame, #workspace-preview) { transition: none; } }

/* Guided sub-steps: each step lists its clicks in order and ticks them as they
   happen, so the visitor always sees what to do next. */
.tour-steps { list-style:none; margin:10px 0 0; padding:10px 0 0; border-top:1px solid #e6eef9; display:grid; gap:6px; }
.tour-steps li { display:flex; align-items:center; gap:9px; font-size:12px; line-height:1.4; color:#5e7390; transition:color var(--duration-fast) var(--ease-smooth-out); }
.tour-steps li[data-current="true"] { color:#203755; font-weight:600; }
.tour-steps li[data-done="true"] { color:#5e7390; }
.tour-steps li[data-done="true"] span { text-decoration:line-through; text-decoration-color:#b9c7d9; }
.tour-step-mark { display:grid; place-items:center; flex:none; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px #c6d2e3; transition:background var(--duration-fast) var(--ease-smooth-out),box-shadow var(--duration-fast) var(--ease-smooth-out); }
.tour-step-mark svg { width:9px; height:9px; overflow:visible; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:15; stroke-dashoffset:15; transition:stroke-dashoffset var(--duration-medium) var(--ease-smooth-out); }
.tour-steps li[data-current="true"] .tour-step-mark { box-shadow:inset 0 0 0 1.5px #075cff,0 0 0 4px #075cff14; }
.tour-steps li[data-done="true"] .tour-step-mark { background:#1d7a62; box-shadow:inset 0 0 0 1.5px #1d7a62; }
.tour-steps li[data-done="true"] .tour-step-mark svg { stroke-dashoffset:0; transition-delay:var(--duration-micro); }
.tour-steps[data-complete="true"] { display:none; }
.tour-tap.is-quiet { color:#5e7390; font-weight:500; }
.tour-tap.is-quiet .tour-tap-dot { display:none; }
:is(.js .hero-tour,.hero-tour.is-guided)[data-picker-open="true"] .tour-steps { display:none; }
/* The highlight names the gesture on the control itself and breathes while it waits. */
.tour-spotlight::before { content:attr(data-hint); position:absolute; z-index:1; left:10px; bottom:calc(100% - 7px); padding:4px 8px; border-radius:999px; background:#075cff; color:#fff; font:650 10px/1 var(--font-body,system-ui); letter-spacing:.2px; white-space:nowrap; box-shadow:0 4px 12px #075cff40; }
.tour-spotlight[data-hint="Done"]::before { background:#1d7a62; box-shadow:0 4px 12px #1d7a6240; }
.tour-spotlight::after { content:''; position:absolute; z-index:0; inset:-2px; border:2px solid #568cff; border-radius:inherit; opacity:0; animation:tour-spot-pulse 2.4s ease-out infinite; animation-play-state:paused; }
.hero-tour[data-running="true"] .tour-spotlight:not([data-hint="Done"])::after { animation-play-state:running; }
@keyframes tour-spot-pulse { 0% { opacity:.6; transform:scale(1); } 70%,100% { opacity:0; transform:scale(1.08); } }
@media(max-width:760px) {
 /* Phones show the one line that matters now, with its place in the step. */
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-steps { margin:4px 0 0; padding:0; border:0; gap:0; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-steps li:not([data-current="true"]) { display:none; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-steps li { font-size:11.5px; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-steps li::before { content:attr(data-pos); flex:none; color:#075cff; font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
 :is(.js .hero-tour,.hero-tour.is-guided) .tour-steps .tour-step-mark { display:none; }
 :is(.js .hero-tour,.hero-tour.is-guided)[data-scene="notes"] .tour-steps { display:none; }
 .tour-spotlight::before { font-size:9px; padding:3px 7px; }
}
@media(prefers-reduced-motion:reduce) { .tour-spotlight::after { animation:none; } .tour-steps li,.tour-step-mark,.tour-step-mark svg { transition:none; } }
/* Autoplay (tour-autoplay.js): a cursor labelled "You" does each step; the
   window bar's button pauses it, and a click inside the stage takes over. */
.hero-tour { --tour-you:#0d7d6c; }
.tour-cursor { position:absolute; left:0; top:0; z-index:12; pointer-events:none; opacity:0; transform:translate(var(--cx,0px),var(--cy,0px)); transition:transform var(--cursor-glide,700ms) cubic-bezier(.45,.05,.15,1),opacity 220ms ease; will-change:transform; }
.tour-cursor.is-snapping { transition:opacity 220ms ease; }
.tour-cursor.is-shown { opacity:1; }
/* The press squeezes toward the tip, so the point never drifts off its target. */
.tour-cursor svg { display:block; width:22px; height:25px; overflow:visible; fill:var(--tour-you); stroke:#fff; stroke-width:1.4; stroke-linejoin:round; filter:drop-shadow(0 2px 4px #0b3d3340); transform-origin:2px 2px; transition:transform 120ms cubic-bezier(.22,1,.36,1); }
.tour-cursor.is-pressing svg { transform:scale(.86); }
.tour-cursor i { position:absolute; left:-9px; top:-9px; width:22px; height:22px; border:2px solid var(--tour-you); border-radius:50%; opacity:0; }
.tour-cursor.is-click i { animation:tour-cursor-click 420ms cubic-bezier(.22,1,.36,1) both; }
.tour-cursor b { position:absolute; left:16px; top:22px; padding:3px 9px 4px; border-radius:4px 10px 10px 10px; background:var(--tour-you); color:#fff; font:650 12px/16px var(--font-body,system-ui); letter-spacing:.01em; white-space:nowrap; box-shadow:0 4px 12px #0b3d332e; }
@keyframes tour-cursor-click { 0% { opacity:.85; transform:scale(.4); } 100% { opacity:0; transform:scale(1.6); } }
/* While the cursor drives, the ring still shows where it is headed; the "Tap here" words wait for the visitor. */
.hero-tour:is([data-autoplay="playing"],[data-autoplay="paused"]) .tour-spotlight::before { display:none; }
.hero-tour .tour-play { position:relative; display:inline-flex; flex:none; align-items:center; gap:6px; height:28px; margin:0 0 8px 12px; padding:0 11px 0 9px; border:1px solid #d3dff0; border-radius:999px; background:#fff; color:#1b3354; font:600 12px/1 var(--font-body,system-ui); box-shadow:0 1px 2px #1734540f; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 120ms cubic-bezier(.22,1,.36,1),background-color 150ms ease,border-color 150ms ease; }
.hero-tour .tour-play::before { content:""; position:absolute; inset:-8px -4px; }
.hero-tour .tour-play[hidden] { display:none; }
.hero-tour .tour-play .t-icon-swap { display:grid; width:10px; height:10px; }
.hero-tour .tour-play svg { display:block; width:10px; height:10px; fill:currentColor; }
/* The label keeps the button's own type, not the browser bar's 9px grey. */
.hero-tour .tour-play .tour-play-label { color:inherit; font-size:inherit; }
.hero-tour .tour-play:active { transform:scale(.96); }
@media (hover:hover) and (pointer:fine) { .hero-tour .tour-play:hover { background:#f4f8ff; border-color:#b6cbed; } }
.hero-tour .tour-play:focus-visible { outline:2px solid #075cff; outline-offset:3px; }
@media(max-width:760px) { .hero-tour .tour-play { margin-left:auto; } }
/* Wide screens: the walkthrough steps a little past the text column, up to
   1280px, keeping 120px either side for the companion and the margin cast
   (the companion rests 106px in from the right edge). Laptops and phones
   keep the column. */
@media(min-width:1280px) { .marketing-home .hero-tour { --tour-width:max(100%,min(1280px,calc(100vw - 240px))); width:var(--tour-width); margin-inline:calc((100% - var(--tour-width)) / 2); } }

/* ---------- Home: trust strip, client cast, how it works, pricing teaser, FAQ ---------- */
.marketing-home .trust-strip { padding: 8px 0 72px; }
.trust-strip .section-heading, .how-section .section-heading, .pricing-teaser .section-heading, .faq-section .section-heading { margin-bottom: 36px; }
.trust-strip .section-heading h2, .how-section .section-heading h2, .pricing-teaser .section-heading h2, .faq-section .section-heading h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -1.2px; margin: 16px 0 0; }
/* One slim line about who builds it, under the section. */
.care-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 28px; max-width: 1040px; margin: 44px auto 0; padding-top: 20px; border-top: 1px solid #e6edf6; }
.care-trust a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: #3e5272; font-size: 13.5px; font-weight: 550; text-decoration: none; transition: color var(--duration-fast) var(--ease-smooth-out); }
.care-trust a span { color: #5e7390; font-weight: 450; }
.care-trust svg { width: 18px; height: 18px; flex: none; overflow: visible; fill: none; stroke: #075cff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.care-trust img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #dbe5f3; }
.care-trust a:focus-visible { outline: 2px solid #075cff; outline-offset: 3px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .care-trust a:hover { color: #075cff; } }
@media (max-width: 900px) { .care-trust { flex-direction: column; gap: 2px; max-width: 600px; margin-top: 32px; } }
/* Why Sumlino: one document that tells the story (the report block below).
   Shared here: the lede, the small characters, the arrival keyframes and the
   slim proof line. careful-work.js adds .is-in once as the section arrives. */
.why-lede { max-width: 560px; margin: 14px auto 0; color: #5e7390; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.why-char { display: block; color: var(--character-ink, #075cff); }
.why-char svg { display: block; width: 100%; height: auto; overflow: visible; }
.trust-strip.is-in .care-trust { animation: why-in 520ms cubic-bezier(.22, 1, .36, 1) 760ms both; }
.js .trust-strip:not(.is-in) .care-trust { opacity: 0; }
@keyframes why-in { from { opacity: 0; translate: 0 22px; scale: .97; } }
@keyframes why-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .trust-strip.is-in .care-trust { animation-name: why-fade; } .care-trust a { transition: none; } }
.trust-strip.is-settled .care-trust, html.is-motion-paused .trust-strip .care-trust { animation: none !important; }
/* The report showcase. Seven pages of the landscape Monthly Review lie in a
   fan on one desk, the cover in the middle and the pages before and after it
   either side. careful-work.js adds .is-in once: the report arrives closed on
   its cover, then folds out. The pages are live report markup in shadow
   roots (.rf-live), scaled by --rf-k, over the page images. Pointing at a page lifts it, nudges its neighbours aside
   and shows the Preview chip, which follows the pointer (careful-work.js
   moves the chip; the body inside it fades and scales here). Any page opens
   the preview dialog, where every page after the cover keeps its headline
   and blurs the rest. On phones the pages sit in one stack instead
   (careful-work.js sets data-pos, 0 on top); a tap shuffles the top page to
   the back. Transform and opacity only. */
.report-fan { max-width: 1040px; margin: 0 auto; }
.rf-desk { position: relative; height: 470px; overflow: hidden; isolation: isolate; }
/* No frame: a faint blue wash behind the open report that fades into the page, and its soft shadow. */
.rf-desk::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 58% at 50% 48%, #e9f0fc, #f8fbff00 72%); }
.rf-desk::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 18%; height: 12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #1c3a7a1c, #1c3a7a00); }
.rf-pages { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.rf-page { --w: 30%; --step: 30%; position: absolute; left: calc(50% - var(--w) / 2); bottom: 30%; width: var(--w); transform-origin: 50% 100%; transform: translate(calc(var(--i) * var(--step) + var(--push, 0%)), calc(var(--drop) + var(--lift, 0%))) rotate(calc(var(--i) * 3.5deg * var(--tilt, 1))) scale(var(--zoom, 1)); transition: transform 340ms cubic-bezier(.22, 1, .36, 1), opacity 200ms ease-out, z-index 0s linear 300ms; }
.rf-page:nth-child(1) { --i: 0; --drop: 0%; z-index: 5; }
.rf-page:nth-child(2) { --i: -3; --drop: 18%; z-index: 1; } .rf-page:nth-child(3) { --i: -2; --drop: 8%; z-index: 2; } .rf-page:nth-child(4) { --i: -1; --drop: 2%; z-index: 3; }
.rf-page:nth-child(5) { --i: 1; --drop: 2%; z-index: 3; } .rf-page:nth-child(6) { --i: 2; --drop: 8%; z-index: 2; } .rf-page:nth-child(7) { --i: 3; --drop: 18%; z-index: 1; }
.rf-open { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #17345414, 0 1px 2px #1734540f, 0 20px 36px -20px #1734546b; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rf-open img { display: block; width: 100%; height: auto; }
/* A live page: the report at its printed size (1056 × 816), scaled to the card. */
.rf-live { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.is-live > img { visibility: hidden; }
.rf-open:focus-visible { outline: 3px solid #075cff; outline-offset: 3px; }
/* The page in hand: lifted, straightened and a little larger; its neighbours
   step aside. careful-work.js marks it .is-active (and the pages either side
   .is-before / .is-after) from a row of still hit areas over the fan, one per
   visible slice, so a page that lifts never moves out from under the pointer.
   It comes to the front at once and goes back only once it has settled. */
.rf-page.is-active, .rf-page:has(.rf-open:focus-visible) { --lift: -12%; --tilt: 0; --zoom: 1.08; z-index: 10; transition-delay: 0s; }
.rf-page.is-before { --push: -7%; } .rf-page.is-after { --push: 7%; }
.rf-page.is-active .rf-open { box-shadow: 0 0 0 1px #075cff33, 0 2px 4px #1734540f, 0 32px 48px -22px #17345480; }
.rf-hits { position: absolute; left: 8%; right: 8%; top: 8%; bottom: 8%; z-index: 15; display: grid; grid-template-columns: 9fr 9fr 9fr 30fr 9fr 9fr 9fr; cursor: pointer; }
@media (hover: hover) and (pointer: fine) and (min-width: 761px) { .rf-open { pointer-events: none; } }
/* The chip that follows the pointer, in the blue of the hero's Sumlino handle. */
.rf-chip { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; will-change: transform; }
.rf-chip-body { display: flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border-radius: 13px; background: #075cff; color: #fff; font: 750 13px/1.2 var(--font-body, Inter, system-ui); white-space: nowrap; box-shadow: 0 6px 18px #075cff40; opacity: 0; transform: scale(.94); transform-origin: 0 0; transition: opacity 150ms ease-out, transform 200ms var(--ease-smooth-out, cubic-bezier(.22, 1, .36, 1)); }
.rf-chip .story-character { width: 20px; color: #fff; }
.rf-desk.is-pointing .rf-chip-body { opacity: 1; transform: none; }
.rf-counter { display: none; }
/* Under the desk, centred like the heading: the page in view, then the button. */
.rf-foot { display: grid; justify-items: center; gap: 14px; margin-top: 20px; text-align: center; }
.rf-label { display: grid; gap: 3px; min-height: 42px; max-width: 560px; margin: 0; }
.rf-label b { color: #13233b; font-size: 15px; font-weight: 650; } .rf-label span { color: #5e7390; font-size: 13.5px; text-wrap: balance; }
.rf-cta { --btn-height: 42px; --btn-pad: 18px; --btn-font: 14px; }
.rf-note { margin: 12px 0 0; color: #5e7390; font-size: 12.5px; text-align: center; }
/* Arrival: the report rises in closed, on its cover, rests a moment, then
   folds out, the pages nearest the cover first. */
.js .trust-strip:not(.is-in) .rf-page { opacity: 0; }
.trust-strip.is-in .rf-page { animation: rf-fold 1500ms cubic-bezier(.22, 1, .36, 1) backwards; }
.trust-strip.is-in .rf-page:nth-child(4), .trust-strip.is-in .rf-page:nth-child(5) { animation-delay: 30ms; }
.trust-strip.is-in .rf-page:nth-child(3), .trust-strip.is-in .rf-page:nth-child(6) { animation-delay: 70ms; }
.trust-strip.is-in .rf-page:nth-child(2), .trust-strip.is-in .rf-page:nth-child(7) { animation-delay: 110ms; }
@keyframes rf-fold {
  0% { opacity: 0; transform: translate(0, 12%) rotate(calc(var(--i) * .7deg)) scale(.96); }
  30% { opacity: 1; transform: translate(0, 0) rotate(calc(var(--i) * .7deg)); }
  50% { opacity: 1; transform: translate(0, 0) rotate(calc(var(--i) * .7deg)); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
}
/* Phones: one stack, the next two pages peeking above the top one. */
@media (max-width: 760px) {
  .rf-desk { height: calc((100vw - 32px) * .64 + 112px); }
  .rf-page { --w: 84%; top: 64px; bottom: auto; transform-origin: 50% 0; transform: none; }
  .rf-page[data-pos="0"] { z-index: 7; }
  .rf-page[data-pos="1"] { z-index: 6; transform: translateY(-15px) scale(.94); }
  .rf-page[data-pos="2"] { z-index: 5; transform: translateY(-28px) scale(.88); }
  .rf-page[data-pos="3"], .rf-page[data-pos="4"], .rf-page[data-pos="5"], .rf-page[data-pos="6"] { z-index: 4; opacity: 0; transform: translateY(-36px) scale(.83); pointer-events: none; }
  .rf-page[data-pos="1"] .rf-open, .rf-page[data-pos="2"] .rf-open { box-shadow: 0 0 0 1px #17345414, 0 1px 2px #1734540f; }
  /* The top page carries a small Next mark, so a tap reads as "next". */
  .rf-page[data-pos="0"] .rf-open::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: #075cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 4px 12px #075cff4d; }
  .rf-counter { position: absolute; left: 50%; bottom: 12px; z-index: 8; transform: translateX(-50%); display: block; padding: 3px 9px; border: 1px solid #dfe7f3; border-radius: 999px; background: #fff; color: #3e5272; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .rf-counter b { color: #13233b; font-weight: 700; }
  .rf-chip, .rf-hits { display: none; }
  .rf-label { min-height: 64px; align-content: start; }
  .trust-strip.is-in .rf-page { animation-name: rf-rise; animation-duration: 760ms; }
  @keyframes rf-rise { 0% { opacity: 0; transform: translateY(14%) scale(.96); } }
}
@media (prefers-reduced-motion: reduce) {
  .trust-strip.is-in .rf-page { animation-name: why-fade; animation-duration: 300ms; }
  .rf-page, .rf-chip-body { transition: opacity 150ms ease-out; }
  .rf-page.is-active, .rf-page:has(.rf-open:focus-visible) { --lift: 0%; --tilt: 1; --zoom: 1; }
  .rf-page.is-before, .rf-page.is-after { --push: 0%; }
}
.trust-strip.is-settled .rf-page, html.is-motion-paused .trust-strip .rf-page { animation: none !important; }
html:has(.rf-viewer[open]) { overflow: hidden; }
/* The preview dialog. */
.rf-viewer { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #dfe7f3; border-radius: 18px; background: #f8fafc; color: #13233b; box-shadow: 0 40px 90px -30px #0d1f3c99; overflow: hidden; }
.rf-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: rf-pop 240ms cubic-bezier(.22, 1, .36, 1); }
.rf-viewer::backdrop { background: #0d1f3c6b; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rf-viewer[open]::backdrop { animation: why-fade 240ms ease-out; }
.rf-viewer.is-closing { animation: rf-out 160ms ease-in forwards; } .rf-viewer.is-closing::backdrop { animation: rf-fade-out 160ms ease-in forwards; }
@keyframes rf-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes rf-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes rf-fade-out { to { opacity: 0; } }
.rf-viewer-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 20px; border-bottom: 1px solid #e6edf6; background: #fff; }
.rf-viewer-name { display: grid; gap: 1px; min-width: 0; } .rf-viewer-name b { font-size: 15px; font-weight: 650; } .rf-viewer-name span { color: #5e7390; font-size: 12.5px; }
.rf-count { margin-left: auto; color: #3e5272; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-close, .rf-step { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #dfe7f3; border-radius: 50%; background: #fff; color: #3e5272; cursor: pointer; transition: background-color 150ms ease-out, opacity 150ms ease-out, transform 150ms var(--ease-smooth-out, ease-out); }
.rf-close svg, .rf-step svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rf-step { width: 42px; height: 42px; box-shadow: 0 1px 2px #1734540f, 0 10px 20px -14px #17345459; }
.rf-step:disabled { opacity: .35; cursor: default; }
.rf-close:focus-visible, .rf-step:focus-visible, .rf-thumb:focus-visible, .rf-lock a:focus-visible { outline: 2px solid #075cff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .rf-close:hover, .rf-step:not(:disabled):hover { background: #f1f5fb; color: #075cff; } .rf-step:not(:disabled):active { transform: scale(.96); } .rf-thumb:hover { opacity: 1; } .rf-lock a:hover { background: #0049d6; } }
.rf-viewer-stage { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 16px; min-height: 0; padding: 20px 18px; }
.rf-sheet { position: relative; width: min(100%, calc((100dvh - 250px) * 1.294)); aspect-ratio: 1056 / 816; margin: 0 auto; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #17345414, 0 2px 4px #1734540f, 0 30px 60px -30px #17345480; overflow: hidden; }
.rf-sheet-img { display: block; width: 100%; height: 100%; }
/* The lower half of every page after the cover, frosted. */
.rf-veil { position: absolute; inset: 46% 0 0; background: linear-gradient(#f6f8fc00, #f6f8fcb8 40%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#0000, #000 16%); mask-image: linear-gradient(#0000, #000 16%); pointer-events: none; }
.rf-viewer[data-page="1"] .rf-veil { display: none; }
.rf-lock { position: absolute; left: 50%; top: 79%; display: grid; justify-items: center; gap: 3px; width: max-content; max-width: calc(100% - 32px); padding: 18px 24px; border: 1px solid #dfe7f3; border-radius: 14px; background: #fffffff2; box-shadow: 0 24px 40px -24px #1734548c; text-align: center; transform: translate(-50%, -50%); }
.rf-lock svg { width: 22px; height: 22px; margin-bottom: 4px; fill: none; stroke: #075cff; stroke-width: 1.6; stroke-linejoin: round; }
.rf-lock b { font-size: 15px; font-weight: 650; } .rf-lock span { color: #5e7390; font-size: 12.5px; }
.rf-lock a { display: inline-flex; align-items: center; min-height: 34px; margin-top: 10px; padding: 0 16px; border-radius: 9px; background: #075cff; color: #fff; font-size: 13px; font-weight: 650; text-decoration: none; transition: background-color 150ms ease-out; }
.rf-viewer[data-page="1"] .rf-lock { display: none; }
.rf-rail { display: flex; gap: 10px; justify-content: center; margin: 0; padding: 12px 16px 14px; border-top: 1px solid #e6edf6; background: #fff; list-style: none; overflow-x: auto; }
.rf-thumb { display: block; width: 88px; padding: 0; border: 0; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px #dfe7f3; opacity: .7; cursor: pointer; overflow: hidden; transition: opacity 150ms ease-out, box-shadow 150ms ease-out; }
.rf-thumb img { display: block; width: 100%; height: auto; }
.rf-thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #075cff; }
@media (prefers-reduced-motion: reduce) { .rf-viewer[open] { animation-name: why-fade; } .rf-viewer.is-closing { animation-name: rf-fade-out; } }
@media (max-width: 640px) {
  .rf-viewer { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
  .rf-viewer-head { gap: 10px; padding: 10px 10px 10px 14px; }
  .rf-viewer-name span { display: none; }
  .rf-viewer-stage { grid-template-columns: minmax(0, 1fr); padding: 14px 10px; }
  .rf-sheet { grid-row: 1; grid-column: 1; width: 100%; }
  .rf-step { position: absolute; top: calc(50% - 18px); z-index: 2; width: 36px; height: 36px; } .rf-step[data-step="-1"] { left: 2px; } .rf-step[data-step="1"] { right: 2px; }
  .rf-lock { left: 8px; right: 8px; top: auto; bottom: 8px; grid-template-columns: minmax(0, 1fr) auto; justify-items: start; gap: 0 10px; width: auto; max-width: none; padding: 8px 8px 8px 12px; border-radius: 10px; text-align: left; transform: none; }
  .rf-lock svg { display: none; } .rf-lock b { font-size: 12.5px; line-height: 1.3; } .rf-lock span { grid-row: 2; font-size: 12px; } .rf-lock a { grid-row: 1 / 3; grid-column: 2; align-self: center; min-height: 32px; margin: 0; padding: 0 12px; }
  .rf-rail { justify-content: flex-start; gap: 8px; padding: 10px; } .rf-thumb { flex: none; width: 64px; }
}

/* How it works: three steps on one line. On wide, tall screens the section
   holds for a short stretch while the reader scrolls: the stage sticks,
   vertically centred, and a spacer below it gives the scroll its length (the
   scroll itself is never intercepted). how-steps.js draws the line across the
   steps with the scroll and lights each step as the line reaches it;
   scrolling back reverses it. Elsewhere each step lights as it scrolls into
   view. Without the script, or with reduced motion, all three simply show. */
.how-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how-step { display: grid; gap: 8px; align-content: start; }
.how-step:not(:last-child) { padding-right: 28px; }
.how-seg { position: relative; display: block; height: 2px; margin: 4px 0 16px; border-radius: 2px; background: #dbe5f3; }
.how-step:not(:last-child) .how-seg { margin-right: -28px; }
.how-seg i { position: absolute; inset: 0; border-radius: inherit; background: #075cff; transform-origin: left center; }
.how-seg::before { content: ""; position: absolute; z-index: 1; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid #075cff; border-radius: 50%; background: #075cff; box-shadow: 0 0 0 4px #075cff1f; transition: background-color var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out); }
.how-step > b { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: #075cff; transition: color var(--duration-fast) var(--ease-smooth-out); }
.how-step > h3 { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; margin: 2px 0 0; font-size: 17px; letter-spacing: -.2px; color: #13233b; }
.how-step > p { margin: 0; color: #5e7390; font-size: 14px; line-height: 1.6; }
/* Each step's picture is a small, faithful copy of the real screen: a browser
   with the side panel at sign-in, one client's month tool by tool, and the
   month-end report going out. Shared pieces first (hw-), then the three pictures. */
.how-section { --hw-ink: #13233b; --hw-muted: #5e7390; --hw-line: #e1e8f2; --hw-soft: #f6f8fb; --hw-blue: #075cff; --hw-good: #18794e; --hw-good-dot: #20a582; --hw-ease: cubic-bezier(.22, 1, .36, 1); }
.how-section .hw-flag { display: inline-flex; align-items: center; height: 19px; margin-left: 8px; padding: 0 7px; border-radius: 5px; background: #fff4dd; color: #8a5a00; font-size: 11px; font-style: normal; font-weight: 650; letter-spacing: 0; vertical-align: 2px; }
.hw-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hw-tick { position: relative; display: grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c3cfe0; }
.hw-tick::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hw-good-dot); opacity: 0; transform: scale(.6); transition: opacity 200ms var(--hw-ease), transform 260ms var(--hw-ease); }
.hw-tick svg { position: relative; width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 13; stroke-dashoffset: 13; transition: stroke-dashoffset 240ms var(--hw-ease) 80ms; }
.is-done > .hw-tick::before, .is-done .hw-tick::before { opacity: 1; transform: none; }
.is-done > .hw-tick svg, .is-done .hw-tick svg { stroke-dashoffset: 0; }
.hw-keys { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--hw-line), 0 10px 22px -14px #17345455; }
.hw-keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 5px; background: var(--hw-soft); box-shadow: inset 0 -1.5px 0 #d5deea, 0 0 0 1px #dfe6ef; color: var(--hw-ink); font: 600 11px/1 Inter, "Segoe UI", sans-serif; transition: transform 150ms var(--hw-ease), background-color 150ms var(--hw-ease), color 150ms var(--hw-ease); }
.hw-keys.is-pressed kbd { transform: translateY(1px); background: #edf3ff; color: var(--hw-blue); box-shadow: inset 0 -.5px 0 #c4d6ff, 0 0 0 1px #c4d6ff; }

/* A browser window: bar, then a QuickBooks page with the side panel beside it. */
.hw-bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-bottom: 1px solid #e3eaf4; background: #fff; color: var(--hw-muted); font-size: 11px; }
.hw-dots { display: flex; gap: 4px; } .hw-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d7dfea; }
.hw-tab { position: relative; flex: 1; min-width: 0; overflow: hidden; color: var(--hw-ink); font-weight: 550; white-space: nowrap; text-overflow: ellipsis; }
.hw-ext, .hw-pin { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #6b7d95; transition: background-color 200ms var(--hw-ease), box-shadow 200ms var(--hw-ease); }
.hw-ext svg { width: 13px; height: 13px; fill: currentColor; }
.hw-pin img { width: 14px; height: auto; }
.hw-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 46%; min-height: 0; overflow: hidden; }
.hw-page { display: grid; align-content: start; gap: 9px; padding: 14px 14px 0; background: #f8fbff; }
.hw-page i { height: 6px; border-radius: 3px; background: #e3e9f2; }
.hw-page i:nth-of-type(2n) { width: 78%; } .hw-page i:nth-of-type(3n) { width: 62%; }
.hw-qb { display: grid; place-items: center; width: 24px; height: 16px; margin-bottom: 2px; border-radius: 4px; background: #e8f6ef; color: #1c7c52; font-size: 8px; font-weight: 700; }
.hw-panel { display: grid; align-content: start; gap: 9px; padding: 0 0 12px; border-left: 1px solid #e3eaf4; background: #fff; box-shadow: -14px 0 24px -22px #17345455; font-family: Inter, "Segoe UI", sans-serif; }
.hw-ptop { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #edf1f7; color: var(--hw-blue); font-size: 13px; letter-spacing: -.2px; }
.hw-ptop b { font-weight: 700; }
.hw-ptop img { width: 16px; height: auto; }
.hw-signin p { margin: 2px 12px 0; color: #3e5272; font-size: 11px; line-height: 1.45; }
.hw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--hw-blue); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.hw-signin .hw-btn { justify-self: start; margin: 2px 12px 0; }
.hw-client { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--hw-ink); }
.hw-client > span:last-child { min-width: 0; }
.hw-client b { display: block; overflow: hidden; font-size: 12px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.hw-client small { display: flex; align-items: center; gap: 4px; color: #1d7a62; font-size: 10.5px; font-weight: 550; white-space: nowrap; }
.hw-client small i { width: 5px; height: 5px; border-radius: 50%; background: var(--hw-good-dot); }
.hw-avatar { display: block; flex: none; width: 26px; padding: 4px 3px; border-radius: 7px; background: #eaf1ff; color: var(--character-ink); }
.hw-ptabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 10px; border-bottom: 1px solid var(--hw-line); color: var(--hw-muted); font-size: 10.5px; text-align: center; }
.hw-ptabs span { padding: 5px 0 6px; white-space: nowrap; }
.hw-ptabs .is-on { color: var(--hw-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--hw-blue); }
.hw-ptabs em { color: #8193ad; font-style: normal; }
.hw-meter { position: relative; display: block; height: 4px; border-radius: 4px; background: #e3e9f2; overflow: hidden; }
.hw-meter i { position: absolute; inset: 0; border-radius: inherit; background: var(--hw-blue); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--hw-ease); }
.hw-todos { display: grid; margin: 0 10px; padding: 0; border-radius: 9px; background: #fff; box-shadow: 0 0 0 1px var(--hw-line); list-style: none; }
.hw-todos li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--hw-ink); font-size: 11px; }
.hw-todos li + li { border-top: 1px solid #edf1f7; }
.hw-todos li > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color 200ms var(--hw-ease); }
.hw-todos li.is-done > span:last-child { color: #8193ad; text-decoration: line-through; }

/* The report: the real cover page with two pages behind it, and its status rail. */
.hw-pages { position: relative; display: block; }
.hw-pages > * { position: absolute; inset: 0; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #dfe7f1, 0 16px 30px -22px #17345466; }
.hw-pages span:nth-child(1) { transform: translate(10px, -8px) rotate(4deg); }
.hw-pages span:nth-child(2) { transform: translate(5px, -4px) rotate(2deg); }
.hw-pages img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-rail { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: rail; }
.hw-rail li { position: relative; display: flex; align-items: center; gap: 8px; color: #8193ad; font-size: 11px; font-weight: 550; transition: color 220ms var(--hw-ease); }
.hw-rail li::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c3cfe0; background: #fff; transition: background-color 220ms var(--hw-ease), box-shadow 220ms var(--hw-ease); }
.hw-rail li.is-on { color: var(--hw-ink); }
.hw-rail li.is-on::before { background: var(--hw-blue); box-shadow: 0 0 0 3px #075cff22; }
.hw-send { position: relative; overflow: hidden; isolation: isolate; }
.hw-send > i { position: absolute; inset: 0; z-index: -1; background: var(--hw-good); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--hw-ease); }
.hw-send > span { display: inline-flex; align-items: center; gap: 5px; transition: opacity 180ms var(--hw-ease), transform 220ms var(--hw-ease); }
.hw-send-b { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(6px); }
.hw-send-b .hw-tick { width: 14px; height: 14px; box-shadow: none; }
.hw-send-b .hw-tick::before { display: none; }
.hw-send-b .hw-tick svg { stroke-dashoffset: 0; }
.is-sent .hw-send > i { transform: none; }
.is-sent .hw-send-a { opacity: 0; transform: translateY(-6px); }
.is-sent .hw-send-b { opacity: 1; transform: none; }

/* A tool row: what it is, what it did, where it lives, and its tick. */
.hw-tools { display: grid; margin: 0; padding: 0; list-style: none; }
.hw-tool { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; padding: 7px 0; color: var(--hw-ink); }
.hw-tool + .hw-tool { border-top: 1px solid #edf1f7; }
.hw-tool > .hw-ico { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: #edf3ff; color: var(--hw-blue); }
.hw-tool b { display: block; font-size: 11.5px; font-weight: 650; }
.hw-tool small { display: block; overflow: hidden; color: var(--hw-muted); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.hw-tool em { padding: 1px 6px; border-radius: 5px; background: var(--hw-soft); color: var(--hw-muted); font-size: 10px; font-style: normal; font-weight: 600; }
.ha-art { position: relative; display: grid; height: 224px; margin: 4px 0 8px; border: 1px solid #dbe5f3; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px #1734540a, 0 18px 34px -26px #17345455; overflow: hidden; font-family: Inter, "Segoe UI", sans-serif; }
.ha-install { grid-template-rows: auto 1fr; }
.ha-install .hw-keys { position: absolute; left: 12px; bottom: 12px; }
/* 02: one client's month, tool by tool. */
.ha-close { align-content: start; gap: 9px; padding: 12px 14px; }
.ha-close-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ha-count { position: relative; display: inline-flex; align-items: baseline; color: var(--hw-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ha-count b { color: var(--hw-ink); font-size: 13px; transition: opacity 200ms var(--hw-ease); }
.ha-count .ha-count-a { position: absolute; left: 0; opacity: 0; }
.ha-close .hw-tool { padding: 5px 0; }
/* 03: the report, approved and marked sent. */
.ha-send { grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 16px 16px 20px; background: linear-gradient(180deg, #f8fbff, #fff 70%); }
.ha-send .hw-pages { aspect-ratio: 640 / 495; }
.ha-send-side { display: grid; gap: 10px; min-width: 0; }
.ha-send-t { margin: 0; }
.ha-send-t b { display: block; color: var(--hw-ink); font-size: 12px; font-weight: 650; }
.ha-send-t small { display: block; color: var(--hw-muted); font-size: 10.5px; }
.ha-send .hw-btn { justify-self: start; height: 26px; padding: 0 10px; font-size: 11px; }
.ha-send .hw-rail { gap: 5px; }

/* Finished frames: without the script, with reduced motion, and once a step lights. */
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-tool .hw-tick::before { opacity: 1; transform: none; }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-tool .hw-tick svg { stroke-dashoffset: 0; }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-meter i { transform: none; }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-rail li { color: var(--hw-ink); }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-rail li::before { background: var(--hw-blue); box-shadow: 0 0 0 3px #075cff22; }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-send > i { transform: none; }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-send-a { opacity: 0; transform: translateY(-6px); }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-send-b { opacity: 1; transform: none; }
:is(.how-section:not(.is-live) .how-step, .how-section .how-step.is-active) .hw-pin { background: #edf3ff; box-shadow: 0 0 0 1.5px #c4d6ff; }

/* Waiting and lighting, only once how-steps.js runs. */
.how-section.is-live .how-step > .ha-art { transition: opacity var(--duration-slow) var(--ease-smooth-out), transform var(--duration-slow) var(--ease-smooth-out), filter var(--duration-slow) var(--ease-smooth-out); }
.how-section.is-live .how-step:not(.is-active) > .ha-art { opacity: .35; transform: translateY(10px); filter: blur(2px); }
.how-section.is-live .how-step:not(.is-active) .hw-flag { opacity: .6; }
.how-section.is-live .ha-install .hw-panel { transition: transform 560ms var(--hw-ease) 260ms; }
.how-section.is-live .how-step:not(.is-active) .ha-install .hw-panel { transform: translateX(104%); transition-delay: 0ms; }
.how-section.is-live .ha-install .hw-pin { transition-delay: 120ms; }
.how-section.is-live .ha-install .hw-keys kbd { transition-delay: 160ms; }
.how-section.is-live .how-step.is-active .ha-install .hw-keys kbd { animation: ha-press 520ms var(--hw-ease) 160ms both; }
@keyframes ha-press { 40% { transform: translateY(1.5px); background-color: #edf3ff; color: #075cff; } }
/* The four tools tick in turn, the count and the meter keep up. */
.how-section.is-live .how-step.is-active .hw-tool:nth-child(1) .hw-tick :is(svg) { transition-delay: 380ms; } .how-section.is-live .how-step.is-active .hw-tool:nth-child(1) .hw-tick::before { transition-delay: 300ms; }
.how-section.is-live .how-step.is-active .hw-tool:nth-child(2) .hw-tick svg { transition-delay: 600ms; } .how-section.is-live .how-step.is-active .hw-tool:nth-child(2) .hw-tick::before { transition-delay: 520ms; }
.how-section.is-live .how-step.is-active .hw-tool:nth-child(3) .hw-tick svg { transition-delay: 820ms; } .how-section.is-live .how-step.is-active .hw-tool:nth-child(3) .hw-tick::before { transition-delay: 740ms; }
.how-section.is-live .how-step.is-active .hw-tool:nth-child(4) .hw-tick svg { transition-delay: 1040ms; } .how-section.is-live .how-step.is-active .hw-tool:nth-child(4) .hw-tick::before { transition-delay: 960ms; }
.how-section.is-live .how-step.is-active .ha-close .hw-meter i { transition: transform 900ms var(--hw-ease) 300ms; }
.how-section.is-live .how-step:not(.is-active) .ha-count-b { opacity: 0; }
.how-section.is-live .how-step:not(.is-active) .ha-count-a { opacity: 1; }
.how-section.is-live .how-step.is-active .ha-count b { transition-delay: 1000ms; }
/* The rail climbs to Marked sent, then the button turns. */
.how-section.is-live .how-step:not(.is-active) .hw-rail li:not(:first-child) { color: #8193ad; }
.how-section.is-live .how-step:not(.is-active) .hw-rail li:not(:first-child)::before { background: #fff; box-shadow: inset 0 0 0 1.5px #c3cfe0; }
.how-section.is-live .how-step:not(.is-active) .hw-rail li:first-child { color: var(--hw-ink); }
.how-section.is-live .how-step:not(.is-active) .hw-rail li:first-child::before { background: var(--hw-blue); }
.how-section.is-live .how-step.is-active .hw-rail li:nth-child(2), .how-section.is-live .how-step.is-active .hw-rail li:nth-child(2)::before { transition-delay: 300ms; }
.how-section.is-live .how-step.is-active .hw-rail li:nth-child(3), .how-section.is-live .how-step.is-active .hw-rail li:nth-child(3)::before { transition-delay: 520ms; }
.how-section.is-live .how-step.is-active .hw-rail li:nth-child(4), .how-section.is-live .how-step.is-active .hw-rail li:nth-child(4)::before { transition-delay: 980ms; }
.how-section.is-live .how-step.is-active .hw-send > i { transition-delay: 760ms; }
.how-section.is-live .how-step.is-active .hw-send > span { transition-delay: 900ms; }

@media (max-width: 800px) {
  .ha-art { height: auto; min-height: 200px; }
  .ha-install { height: 224px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .ha-close .hw-tool em { display: none; }
  .ha-close .hw-tool { grid-template-columns: 26px minmax(0, 1fr) 18px; }
}
@media (max-width: 360px) {
  .ha-install .hw-body { grid-template-columns: minmax(0, 1fr) 58%; }
  .ha-send { grid-template-columns: 40% minmax(0, 1fr); gap: 12px; padding: 16px 12px; }
  .ha-close .hw-tool em { display: none; }
  .ha-close .hw-tool { grid-template-columns: 26px minmax(0, 1fr) 18px; }
}
/* Waiting and lit states, only once how-steps.js is running. The words stay
   sharp and readable at every moment (AA contrast even while waiting); the
   picture, the line, the dot and the step number carry the lighting-up. A
   waiting picture is a ghost of itself and plays its step when it lights. */
.how-section.is-live .how-step > :is(b, h3) { transition: color var(--duration-slow) var(--ease-smooth-out); }
.how-section.is-live .how-step.is-active > h3 { transition-delay: calc(var(--duration-stagger) * 2); }
.how-section.is-live .how-step:not(.is-active) > b { color: #5e7390; }
.how-section.is-live .how-step:not(.is-active) > h3 { color: #4f627d; }
.how-section.is-live .how-step:not(.is-active) .how-seg::before { border-color: #c3d0e2; background-color: #fff; box-shadow: 0 0 0 4px #075cff00; }
.how-section.is-live .how-seg i { transform: scaleX(0); transition: transform var(--duration-very-slow) var(--ease-smooth-out); }
.how-section.is-live .how-step.is-active .how-seg i { transform: scaleX(1); }
.how-section.is-scrolly .how-seg i { transition: none; }
.how-travel { height: 0; }
@media (min-width: 900px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js .how-stage { position: sticky; top: calc(var(--site-header-height, 80px) + max(16px, (100vh - var(--site-header-height, 80px) - var(--how-stage-height, 480px)) / 2)); }
  .js .how-travel { height: 120vh; }
}
@media (prefers-reduced-motion: reduce) {
  .how-section.is-live :is(.how-step > *, .how-seg i, .ha-art, .hw-panel, .hw-pin, .hw-tick svg, .hw-meter i, .hw-rail li, .hw-send > i, .hw-send > span, .ha-count b), .how-section.is-live .how-seg::before, .how-section.is-live .hw-tick::before, .how-section.is-live .hw-rail li::before { transition: none !important; }
  .how-section.is-live .how-step .hw-keys kbd { animation: none !important; }
}
.pricing-teaser { padding: 64px 0 32px; border-top: 1px solid #e1e9f4; }
/* Three plain price facts, in the order they apply: now, if you join now, later. */
.pricing-teaser-card { display: grid; justify-items: center; gap: 24px; max-width: 1040px; margin: 0 auto; }
.price-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin: 0; border: 1px solid #dbe5f3; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px #1734540a, 0 18px 40px -28px #17345433; overflow: hidden; }
.price-fact { display: grid; align-content: start; gap: 10px; padding: 26px 20px 28px; }
.price-fact + .price-fact { border-left: 1px solid #e6edf6; }
.price-fact dt { color: #5e7390; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; }
.price-fact dd { display: grid; gap: 10px; margin: 0; }
.price-fact strong { display: flex; align-items: baseline; gap: 2px; color: #13233b; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -1.2px; font-variant-numeric: tabular-nums; }
.price-fact strong small { color: #5e7390; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.price-fact dd > span { color: #5e7390; font-size: 14px; line-height: 1.6; }
.price-fact.is-founding { background: linear-gradient(180deg, #f2f6ff, #fff 75%); }
.price-fact.is-founding dt, .price-fact.is-founding strong { color: #075cff; }
.faq-section { padding: 56px 0 24px; }
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid #e1e9f4; }
.faq-item { border-bottom: 1px solid #e1e9f4; }
.faq-item h3 { margin: 0; font-size: 16px; }
/* Opens on the standard beat, closes faster: an exit never holds the reader. */
:root { --acc-expand: var(--duration-fast, 250ms); --acc-collapse: var(--duration-quick, 150ms); --acc-chevron: var(--duration-fast, 250ms); --acc-ease: var(--ease-smooth-out, cubic-bezier(.22, 1, .36, 1)); }
.t-acc-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; border: 0; background: none; color: #13233b; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -.1px; text-align: left; cursor: pointer; transition: color var(--duration-quick) var(--ease-out); }
.t-acc-head:focus-visible { outline: 2px solid #075cff; outline-offset: 2px; border-radius: 8px; }
.t-acc-chevron { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #edf3ff; color: #075cff; transition: transform var(--acc-chevron) var(--acc-ease), background-color var(--duration-quick) var(--ease-out); }
.t-acc-chevron svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
@media (hover: hover) and (pointer: fine) { .t-acc-head:hover { color: #075cff; } .t-acc-head:hover .t-acc-chevron { background: #dbe6ff; } }
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner { overflow: hidden; opacity: 0; filter: blur(2px); transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease), visibility 0s linear var(--acc-collapse); }
.t-acc[data-open="true"] .t-acc-panel-inner { opacity: 1; filter: blur(0); transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease); }
/* A closed answer leaves the accessibility tree once it has faded, so a screen reader never reads it under a collapsed question. */
.faq-section .t-acc:not([data-open="true"]) .t-acc-panel-inner { visibility: hidden; }
.t-acc-panel-inner p { margin: 0; padding: 0 40px 20px 2px; color: #5e7390; font-size: 14.5px; line-height: 1.65; max-width: 680px; }
@media (max-width: 800px) {
  .marketing-home .trust-strip { padding: 0 0 52px; }
  .how-steps { grid-template-columns: 1fr; gap: 34px; }
  .how-step:not(:last-child) { padding-right: 0; }
  .how-step:not(:last-child) .how-seg { margin-right: 0; }
  .how-section { padding: 52px 0 32px; }
  .client-cast { margin-top: 40px; padding: 16px 18px; text-align: center; }
  .pricing-teaser { padding: 44px 0 16px; }
  .price-facts { grid-template-columns: 1fr; }
  .price-fact { padding: 20px 22px 22px; }
  .price-fact + .price-fact { border-left: 0; border-top: 1px solid #e6edf6; }
  .pricing-teaser-card .btn-quiet { justify-self: stretch; justify-content: center; }
  .faq-section { padding: 40px 0 8px; }
  .t-acc-head { padding: 15px 0; font-size: 15px; }
  .t-acc-panel-inner p { padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron { transition: none; } }

/* Pause motion (WCAG 2.2.2): a quiet switch under the beta note. site.js wires it
   and remembers the choice; nothing loops for reduced-motion visitors, so it hides. */
.motion-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #5e7390; font: 500 12px/1 var(--font-body, Inter, "Segoe UI", Arial, sans-serif); letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-quick) var(--ease-out), background-color var(--duration-quick) var(--ease-out); }
.marketing-home .hero .motion-toggle { display: flex; width: max-content; margin: 2px auto 0; }
.motion-toggle[hidden], .marketing-home .hero .motion-toggle[hidden] { display: none; }
.motion-toggle .t-icon-swap { width: 12px; height: 12px; }
.motion-toggle svg { display: block; width: 12px; height: 12px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .motion-toggle:hover { color: #1b3354; background: #eaf1fb; } }
.motion-toggle:focus-visible { outline: 2px solid #075cff; outline-offset: 2px; }
/* Footer switch on pages whose characters loop (pricing, founder). Same pause/play icon swap as the hero switch, without the shared tokens. */
.site-footer .motion-toggle { margin: -12px auto -12px -10px; padding-inline: 10px; }
.site-footer .motion-toggle .t-icon-swap { position: relative; display: inline-grid; }
.site-footer .motion-toggle .t-icon { grid-area: 1 / 1; transition: opacity 250ms ease-in-out, filter 250ms ease-in-out, transform 250ms ease-in-out; }
.site-footer .motion-toggle [data-state="a"] .t-icon[data-icon="b"], .site-footer .motion-toggle [data-state="b"] .t-icon[data-icon="a"] { opacity: 0; filter: blur(2px); transform: scale(.25); }
@media (prefers-reduced-motion: reduce) { .motion-toggle, .marketing-home .hero .motion-toggle { display: none; } }
/* While motion is paused every endless loop holds still. One-shot entrances are
   left alone, so nothing freezes half-drawn; scripted loops read the same switch. */
html.is-motion-paused :is(.ambient-character svg, .tour-buddy, .tour-buddy .client-character-eyes, .tour-buddy .client-character-crown, .tour-record-wave i, .tour-record-logo .tr-trace path, .close-character svg, .close-character .client-character-eyes, .story-character .client-character-eyes, .voice-story-wave i, .story-swipe-hint svg, .story-cue svg, .bs-caret, .bs-spinner, .bs-progress i),
html.is-motion-paused .tour-buddy::after,
html.is-motion-paused .tour-spotlight::after,
html.is-motion-paused .tour-record-row b::before { animation-play-state: paused !important; }

/* Fall offer (FALL20). Ships hidden; fall-offer.js shows it until the offer ends.
   Warm brand characters and three drifting leaves; the leaves sway with
   transform only, hold off screen, follow Pause motion and stay still for reduced motion. */
.fall-offer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; max-width: 760px; margin: 0 auto 30px; padding: 18px 24px 18px 18px; border: 1px solid #f3dcc0; border-radius: 22px; background: linear-gradient(135deg, #fff8ee, #fff3e6 60%, #fdeee6); color: #4a3a2a; text-align: left; }
.fall-offer[hidden] { display: none; }
.fall-offer-cast { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 10px 8px 0; }
.fall-offer-cast [data-offer-character] { display: block; width: 46px; color: var(--character-ink, #be8311); }
.fall-offer-cast [data-offer-character]:nth-child(2) { width: 38px; }
.fall-offer-cast svg { display: block; width: 100%; height: auto; overflow: visible; }
.fall-leaf { position: absolute; width: 14px; height: 14px; color: #d0782c; animation: fall-leaf-sway 4.8s ease-in-out infinite; }
.fall-leaf svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.fall-leaf:nth-child(3) { top: -4px; left: 0; }
.fall-leaf:nth-child(4) { top: -10px; left: 44%; width: 11px; height: 11px; color: #be8311; animation-delay: -1.6s; }
.fall-leaf:nth-child(5) { top: 2px; right: -6px; width: 12px; height: 12px; color: #df6355; animation-delay: -3.2s; }
@keyframes fall-leaf-sway { 0%, 100% { transform: translate(0, 0) rotate(-14deg); } 50% { transform: translate(3px, 4px) rotate(12deg); } }
.fall-offer .fall-offer-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 3px 10px; border-radius: 999px; background: #fde3c4; color: #7c4310; font-size: 11.5px; font-weight: 650; letter-spacing: .2px; }
.fall-offer .fall-offer-title { margin: 8px 0 4px; color: #2e2216; font-size: clamp(17px, 1.7vw, 20px); font-weight: 650; letter-spacing: -.3px; line-height: 1.3; }
.fall-offer .fall-offer-text { margin: 0; color: #5f4a35; font-size: 13px; line-height: 1.55; }
.fall-offer-code { padding: 1px 7px; border: 1px dashed #c98a4a; border-radius: 6px; background: #fff; color: #6b3a0c; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; white-space: nowrap; }
.fall-offer .fall-offer-fine { margin: 6px 0 0; color: #74604b; font-size: 12px; line-height: 1.5; }
/* Inside the home pricing teaser the card sits above the price facts. */
.pricing-teaser-card .fall-offer { width: 100%; margin: 0; }
.plan-billing + .fall-offer { margin-top: 4px; }
@media (max-width: 560px) {
  .fall-offer { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 18px 16px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .fall-leaf { animation: none; } }
html.is-motion-paused .fall-leaf { animation-play-state: paused !important; }

/* Fall leaves (same date gate as the offer card). A few leaves drift down
   through the hero once the intro has played, and past the closing cast.
   They sit in front (pointer-events off) because content painted above an
   animating layer gets promoted, which cost scroll frames on slow machines.
   One transform/opacity animation per leaf; they hold off screen (data-loop),
   follow Pause motion, and reduced motion shows still leaves in the hero. */
.fall-leaves { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; contain: strict; }
.fall-leaves[hidden] { display: none; }
.fall-drift { position: absolute; top: -24px; left: var(--x); width: var(--s, 14px); height: var(--s, 14px); color: var(--c, #d0782c); opacity: 0; animation: fall-drift var(--d, 13s) linear var(--delay, 2s) infinite; }
.fall-drift svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes fall-drift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-24deg); }
  8% { opacity: .75; }
  25% { transform: translate3d(calc(var(--dx, 40px) * .25 + 9px), calc(var(--fall, 620px) * .25), 0) rotate(16deg); }
  50% { transform: translate3d(calc(var(--dx, 40px) * .5 - 9px), calc(var(--fall, 620px) * .5), 0) rotate(-22deg); }
  75% { transform: translate3d(calc(var(--dx, 40px) * .75 + 9px), calc(var(--fall, 620px) * .75), 0) rotate(14deg); }
  82% { opacity: .75; }
  100% { opacity: 0; transform: translate3d(var(--dx, 40px), var(--fall, 620px), 0) rotate(-18deg); }
}
.fall-leaves--hero .fall-drift:nth-child(1) { --x: 7%; --s: 18px; --d: 14s; --delay: 1.6s; --dx: 60px; }
.fall-leaves--hero .fall-drift:nth-child(2) { --x: 21%; --s: 14px; --c: #be8311; --d: 12s; --delay: 4.2s; --dx: -30px; }
.fall-leaves--hero .fall-drift:nth-child(3) { --x: 34%; --s: 16px; --c: #df6355; --d: 16s; --delay: 7.4s; --dx: 50px; }
.fall-leaves--hero .fall-drift:nth-child(4) { --x: 55%; --s: 15px; --c: #b5562b; --d: 13s; --delay: 2.8s; --dx: -40px; }
.fall-leaves--hero .fall-drift:nth-child(5) { --x: 68%; --s: 19px; --d: 15s; --delay: 9.6s; --dx: 30px; }
.fall-leaves--hero .fall-drift:nth-child(6) { --x: 82%; --s: 14px; --c: #df6355; --d: 12.5s; --delay: 5.6s; --dx: -55px; }
.fall-leaves--hero .fall-drift:nth-child(7) { --x: 93%; --s: 16px; --c: #be8311; --d: 14.5s; --delay: 3.4s; --dx: -25px; }
/* Past the closing cast: a short fall to the line the characters stand on. */
.fall-leaves--close .fall-drift { --fall: 92px; --s: 11px; }
.fall-leaves--close .fall-drift:nth-child(1) { --x: 12%; --d: 7s; --delay: .4s; --dx: 18px; }
.fall-leaves--close .fall-drift:nth-child(2) { --x: 38%; --c: #be8311; --d: 8.5s; --delay: 3s; --dx: -14px; }
.fall-leaves--close .fall-drift:nth-child(3) { --x: 63%; --c: #df6355; --d: 7.5s; --delay: 1.8s; --dx: 16px; }
.fall-leaves--close .fall-drift:nth-child(4) { --x: 86%; --c: #b5562b; --d: 9s; --delay: 4.6s; --dx: -18px; }
@media (max-width: 560px) { .fall-leaves--hero .fall-drift:nth-child(n+6) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fall-drift { animation: none; opacity: .7; transform: translate3d(0, var(--rest, 90px), 0) rotate(-20deg); }
  .fall-leaves--hero .fall-drift:nth-child(odd) { --rest: 150px; }
  .fall-leaves--close { display: none; }
  /* Still leaves never animate, so they can sit behind the copy. */
  .fall-leaves--hero { z-index: -1; }
}
html.is-motion-paused .fall-drift { animation-play-state: paused !important; }
/* Sign in: the quiet partner of Get Sumlino, the same capsule height, lift and
   press. Phones find it at the end of the menu instead, so the bar stays brand,
   action, menu. */
.site-header .header-signin { --btn-height:42px; --btn-pad:16px; --btn-font:13.5px; gap:7px; padding-left:14px; }
.header-signin .signin-icon { display:block; flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform var(--duration-fast) var(--ease-smooth-out); }
.header-signin .signin-icon path:last-child { transition:transform var(--duration-fast) var(--ease-smooth-out); }
@media(hover:hover) and (pointer:fine) { .header-signin:hover .signin-icon path:last-child { transform:translateX(2px); } }
@media(prefers-reduced-motion:reduce) { .header-signin .signin-icon path:last-child { transition:none; } .header-signin:hover .signin-icon path:last-child { transform:none; } }
/* On the home page Sign in waits with Get Sumlino and springs out with it,
   a beat behind; elsewhere both show from the start. */
.header-signin-reveal { display:block; flex:none; transform-origin:100% 50%; opacity:0; visibility:hidden; transform:translateX(14px) scale(.82); transition:transform var(--duration-quick) var(--ease-smooth-out),opacity var(--duration-quick) var(--ease-smooth-out),visibility 0s linear var(--duration-quick); }
.has-get-sumlino .header-signin-reveal,.shows-cta .header-signin-reveal { opacity:1; visibility:visible; transform:none; transition:transform var(--duration-very-slow) var(--ease-bounce) calc(var(--duration-micro) + 70ms),opacity var(--duration-fast) var(--ease-smooth-out) calc(var(--duration-micro) + 70ms),visibility 0s; }
@media(min-width:701px) and (max-width:1099px) { .site-header .header-signin-reveal { opacity:1; visibility:visible; transform:none; transition:none; } }
/* While it waits it stays in the Tab order, and focus brings it out. */
@media(min-width:1100px) { .site-header:not(.shows-cta) .header-signin-reveal { visibility:visible; pointer-events:none; } .site-header:not(.shows-cta) .header-signin-reveal:focus-within { opacity:1; transform:none; pointer-events:auto; } }
@media(prefers-reduced-motion:reduce) { .header-signin-reveal { transition:none!important; } }
@media(max-width:700px) { .header-signin-reveal { display:none; } }
/* From the first paint until site.js wraps them in their reveals, the home
   page's wide header keeps Sign in and Get Sumlino hidden, so a refresh never
   flashes them before they spring out on scroll. */
@media(min-width:1100px) { .js .marketing-home .header-actions > :is(.header-signin, .header-cta) { opacity:0; visibility:hidden; } }
/* Phones keep Get Sumlino and the menu; Sign in moves into the menu. */
@media(max-width:700px) { .site-header .header-signin { display:none; } }