@font-face { font-family: 'Hanken Grotesk'; src: url('./fonts/HankenGrotesk-Variable.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --font: 'Hanken Grotesk', sans-serif;
  --ink: #142536;
  --muted: #536274;
  --blue: #3776ce;
  --blue-text: #2f6dbd;
  --blue-hover: #2b62af;
  --line: #dce2e9;
  --soft: #f4f6f9;
  --blue-soft: #edf4fd;
  --link-hover-bg: #a3a3a3;
  --link-hover-ink: #142536;
  --header-height: 61px;
  --green: #226544;
  --ui-font: var(--font);
  --ui-ink: var(--ink);
  --ui-secondary: var(--muted);
  --ui-link: var(--blue-text);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; font-family: var(--font); font-synthesis: none; }
body { margin: 0; background: #fff; color: var(--ink); font-size: 17px; line-height: 1.6; }
h1, h2, h3, p, figure, ul, ol, dl { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(42px, 4.6vw, 64px); }
h2 { font-size: clamp(32px, 3.3vw, 44px); }
h3 { font-size: 28px; }
a { color: var(--blue-text); text-underline-offset: 4px; text-decoration-thickness: 1px; }
button, input, select { font: inherit; }
button, summary { cursor: pointer; }
button { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
svg { flex: none; vertical-align: middle; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: #dceafa; }
input, textarea { caret-color: var(--blue); }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.shell { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 300; left: 16px; top: 12px; padding: 12px 18px; background: #fff; color: var(--blue); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 90px; min-height: 32px; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .16s ease, border-color .16s ease; }
.button > svg { width: 14px; height: 14px; }
.button:not(.penny-call) > svg { display: none; }
.button-primary { background: #1c75b9; color: #fff; }
.button-primary:hover { background: #1c75b9; }
.button-primary:active { background: #1c75b9; }
.button-secondary { border-color: #aab7c7; color: var(--ink); background: #fff; }
.button-secondary:hover { border-color: var(--blue); background: var(--blue-soft); }
.button-inverse { background: #fff; color: var(--ink); }
.button-inverse:hover { background: #e2edfb; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-block: 6px; border: 0; background: transparent; color: var(--blue-text); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; }
.text-link > svg { width: 14px; height: 14px; }
.site-offer { background: #b91c1c; color: #fff; }
.site-offer-inner { display: flex; align-items: center; justify-content: center; gap: 9px; padding-block: 8px; }
.site-offer svg { display: block; width: 18px; height: 18px; }
.site-offer p { font-size: 14px; font-weight: 500; line-height: 20px; text-wrap: pretty; }
.site-offer strong { font-weight: 650; }
.site-offer a { margin-left: 10px; color: inherit; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.site-offer a:hover { text-decoration-thickness: 2px; }
.site-offer a:focus-visible { outline-color: #fff; outline-offset: 3px; }
.site-navigation { --ink: #f5f7fa; --muted: #c2c8d0; --line: #303030; --blue-text: #A5C4EB; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: #000; color: var(--ink); }
.navigation-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 60px; }
.navigation-inner > .brand { min-width: 0; }
.home-route .navigation-inner { width: min(1440px, calc(100% - 80px)); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 24px; font-weight: 700; letter-spacing: -.025em; text-decoration: none; }
.brand-logo { display: block; width: 230px; height: auto; }
.desktop-navigation { display: flex; align-items: center; gap: 4px; }
.desktop-navigation a, .login-link { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.desktop-navigation a[aria-current] { color: var(--blue-text); }
.desktop-navigation a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.navigation-end { display: flex; align-items: center; gap: 8px; }
.navigation-cta { min-height: 32px; padding: 7px 12px; line-height: 1; }
.navigation-menu { display: none; position: relative; }
.navigation-menu summary { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-weight: 500; line-height: 1.2; list-style: none; }
.navigation-menu summary svg { width: 14px; height: 14px; }
.navigation-menu summary::-webkit-details-marker { display: none; }
.menu-close-icon { display: none; }
.menu-panel { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; height: 100dvh; padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: #000; }
.menu-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 20px; width: min(100%, 640px); min-height: 44px; margin-inline: auto; }
.menu-header .brand { min-width: 0; }
.menu-header .brand-logo { width: 188px; }
.menu-close { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; transition: color .16s ease; }
.menu-close:is(:hover, :focus-visible) { color: var(--blue-text); }
.menu-links { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.4dvh, 24px); min-height: 340px; padding-block: 48px; }
.menu-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 12px; color: var(--ink); font-size: clamp(28px, 4vw, 36px); font-weight: 400; line-height: 1.25; letter-spacing: -.025em; text-decoration: none; transition: color .16s ease; }
.menu-links a[aria-current] { color: var(--blue-text); }
.menu-links a:is(:hover, :focus-visible) { color: var(--blue-text); }
.menu-utilities { display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; }
.menu-utilities a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; text-decoration: none; transition: color .16s ease; }
.menu-utilities .menu-trial { color: var(--blue-text); }
.menu-utilities a:is(:hover, :focus-visible) { color: var(--blue-text); }
html:has(.navigation-menu[open]) { overflow: hidden; }
.navigation-menu[open] .menu-open-icon { display: none; }
.navigation-menu[open] .menu-close-icon { display: block; }
/* Keep the native summary available as a close control without JavaScript. */
.navigation-menu[open]:not([data-enhanced]) > summary { position: fixed; z-index: 71; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; font-size: 0; }
.navigation-menu[open][data-enhanced] > summary { display: none; }
@media (max-height: 520px) {
  .menu-links { min-height: 0; gap: 8px; padding-block: 16px; }
  .menu-links a { font-size: 28px; }
}
@property --hero-drift-x { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --hero-drift-y { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes hero-mesh-drift {
  from { --hero-drift-x: -3%; --hero-drift-y: 0%; }
  to { --hero-drift-x: 3%; --hero-drift-y: 2%; }
}
.hero {
  position: relative;
  overflow: hidden;
}
.pricing-closing {
  --muted: #425368;
  --hero-blue-pool: #549ce675 0%, #549ce64d 22%, #76c6e824 45%, #76c6e800 74%;
  background-color: #fff;
  /* Blue, cyan and soft-blue pools frame the copy and define the hero's bottom edge. */
  background-image:
    radial-gradient(ellipse 48% 68% at 40% 46%, #fffffff2 0%, #ffffffb3 42%, #fff0 78%),
    radial-gradient(ellipse 36% 30% at calc(50% + var(--hero-drift-x)) calc(108% + var(--hero-drift-y)), var(--hero-blue-pool)),
    radial-gradient(ellipse 42% 60% at calc(0% + var(--hero-drift-x)) calc(12% + var(--hero-drift-y)), #3776ce7a 0%, #3776ce52 20%, #3776ce24 40%, #3776ce00 74%),
    radial-gradient(ellipse 30% 44% at calc(104% + var(--hero-drift-x)) calc(16% + var(--hero-drift-y)), #A5C4EB40 0%, #A5C4EB2e 22%, #A5C4EB14 45%, #A5C4EB00 74%),
    radial-gradient(ellipse 28% 46% at calc(64% + var(--hero-drift-x)) calc(-8% + var(--hero-drift-y)), #6acae157 0%, #6acae138 25%, #6acae11a 48%, #6acae100 76%),
    radial-gradient(ellipse 40% 58% at calc(104% + var(--hero-drift-x)) calc(72% + var(--hero-drift-y)), var(--hero-blue-pool)),
    radial-gradient(ellipse 40% 42% at calc(0% + var(--hero-drift-x)) calc(108% + var(--hero-drift-y)), #A5C4EB40 0%, #A5C4EB2e 22%, #A5C4EB14 45%, #A5C4EB00 76%);
  animation: hero-mesh-drift 24s ease-in-out infinite alternate;
}
.hero { --muted: #425368; --hero-offer-height: 36px; --hero-benefits-height: 65px; isolation: isolate; background: #fff; color: var(--ink); animation: none; }
.hero .button:focus-visible { outline-color: #3776ce; }
.hero-layout { position: relative; z-index: 1; display: grid; width: min(1440px, calc(100% - 80px)); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; min-height: calc(100vh - var(--header-height) - var(--hero-offer-height) - var(--hero-benefits-height)); min-height: calc(100dvh - var(--header-height) - var(--hero-offer-height) - var(--hero-benefits-height)); padding-block: 40px; }
.hero-copy { max-width: 700px; }
.hero-copy h1 { max-width: 700px; font-size: clamp(32px, 2.8vw, 38px); }
.hero-heading-accent { color: var(--blue); }
.hero-description { max-width: 56ch; margin-top: 24px; color: var(--muted); font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 30px; }
.hero-actions .button-secondary { background: #fff; color: #000; border-color: #000; }
.hero-actions .button-secondary:is(:hover, :active) { background: #f4f6f9; color: #000; border-color: #000; }
.hero-actions .button-secondary:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.action-note { margin-top: 14px; color: var(--muted); font-size: 14px; }
.hero-availability { margin-top: 28px; color: var(--muted); font-size: 14px; }
.agent-flow { min-width: 0; }
.hero-devices { position: relative; isolation: isolate; min-width: 0; height: 660px; height: clamp(320px, calc(100dvh - var(--header-height) - var(--hero-offer-height) - var(--hero-benefits-height) - 80px), 660px); }
@media (min-width: 1100px) and (max-height: 700px) {
  .hero-layout { padding-block: 20px; }
  .hero-devices { height: clamp(280px, calc(100dvh - var(--header-height) - var(--hero-offer-height) - var(--hero-benefits-height) - 40px), 660px); }
}
.hero-devices .hero-phone { position: absolute; z-index: 2; bottom: 0; right: -2%; width: 38%; height: 82%; }
.hero-devices .hero-phone .flow-stage { height: 100%; }
.hero-laptop { position: absolute; z-index: 1; left: -23%; bottom: -1%; width: 133%; height: 110%; }
.laptop-stage { position: relative; width: 100%; height: 100%; }
.hero-laptop model-viewer { opacity: 0; display: block; width: 100%; height: 100%; background: transparent; --poster-color: transparent; }
.flow-stage { position: relative; width: 100%; height: 600px; }
.agent-flow[data-ready] [data-flow-stage] { touch-action: none; cursor: grab; user-select: none; }
.agent-flow[data-dragging] [data-flow-stage] { cursor: grabbing; }
.flow-stage:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 4px; border-radius: 6px; }
.flow-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.flow-stage model-viewer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: transparent; opacity: 0; --poster-color: transparent; }
.agent-flow[data-ready] model-viewer { opacity: 1; }
.agent-flow > figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.flow-controls { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.flow-reset { min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.flow-reset:hover { background: var(--blue-soft); color: var(--blue-text); }
.flow-controls > p { font-size: 12px; color: var(--muted); }
.cube-controls { display: grid; justify-items: center; gap: 10px; }
.cube-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cube-faces button { min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.4; }
.cube-faces button:hover, .cube-faces button[aria-pressed="true"] { background: var(--blue-soft); color: var(--blue-text); }
.cube-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.cube-tools > p { color: var(--muted); font-size: 12px; }
@media (max-width: 599px), (pointer: coarse) { .cube-faces button { min-height: 44px; } }
@media (max-width: 599px), (pointer: coarse) { .flow-reset { min-height: 44px; } }
.flow-pause { position: absolute; top: 0; right: 0; }
.flow-routes { display: flex; align-items: center; gap: 8px; }
.flow-routes button, .flow-pause { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.4; }
.flow-pause svg { width: 12px; height: 12px; }
.flow-routes button[data-flow-route="answer"] { --route-ink: #2f6dbd; --route-tint: #edf4fd; }
.flow-routes button[data-flow-route="booking"] { --route-ink: #086f62; --route-tint: #eaf7f3; }
.flow-routes button[data-flow-route="message"] { --route-ink: #7952b8; --route-tint: #f3effa; }
.flow-routes button[data-flow-route="handoff"] { --route-ink: #965b17; --route-tint: #fbf3e8; }
.flow-routes button { color: var(--route-ink); }
.flow-routes button:hover { color: var(--route-ink); background: var(--route-tint); }
.flow-pause:hover { color: var(--blue-text); background: var(--blue-soft); }
.flow-routes button[aria-checked="true"] { color: var(--route-ink); background: var(--route-tint); font-weight: 600; }
.flow-fallback { position: absolute; inset: 0; }
.flow-fallback img { display: block; width: 100%; height: 100%; object-fit: contain; }
.benefit-strip { --ink: #f5f7fa; --muted: #c2c8d0; --line: #303030; --blue-text: #A5C4EB; border-bottom: 1px solid var(--line); background: #000; color: var(--ink); }
.benefit-strip-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 24px; min-height: calc(var(--hero-benefits-height, 65px) - 1px); padding: 12px 0; list-style: none; }
.benefit-strip-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.benefit-strip-list li > div { align-self: flex-start; }
.benefit-strip-list li + li { border-left: 1px solid var(--line); padding-left: 24px; }
.benefit-strip-icon { display: grid; flex: none; place-items: center; width: 24px; height: 32px; color: var(--blue-text); }
.benefit-strip-icon svg { width: 22px; height: 22px; }
.benefit-strip h2 { font-size: 14px; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; text-wrap: pretty; }
.benefit-strip p { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.product-section { padding-block: 124px 88px; background: var(--soft); }
.section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 64px; }
.section-intro p { max-width: 54ch; color: var(--muted); font-size: 18px; line-height: 1.65; }
.product-tour { margin-top: 56px; }
.product-tablist { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1fr); gap: 0; width: min(100%, 376px); padding: 6px; margin-bottom: 24px; margin-inline: 0; border: 1px solid #dce5ef; border-radius: 12px; background: #fff; box-shadow: 0 6px 14px #0000000a; }
.product-tablist::before { content: ''; position: absolute; z-index: -1; inset: 6px auto 6px 6px; width: calc((100% - 12px) / 2.75); border-radius: 8px; background: var(--logo-button-gradient, url("branding/logo-gradient-light.svg")) center / 100% 100%; box-shadow: inset 0 1px 2px #fff8, inset 0 -1px 2px #0001; transform-origin: left center; transform: translateX(0) scaleX(1); transition: transform .38s cubic-bezier(.16, 1, .3, 1); }
.product-tablist:has([data-product-tab="workflows"][aria-selected="true"])::before { transform: translateX(100%) scaleX(.75); }
.product-tablist:has([data-product-tab="assistant"][aria-selected="true"])::before { transform: translateX(175%) scaleX(1); }
.product-tablist button { position: relative; min-width: 0; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.25; transition: color .18s ease; }
.product-tablist button:hover { color: var(--blue-text); }
.product-tablist button[aria-selected="true"] { color: #fff; }
.product-tablist button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .product-tablist::before { transition: none; } }
.product-panel { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.5fr); gap: 48px; align-items: center; }
.product-panel + .product-panel { margin-top: 48px; }
.product-tour.is-ready .product-panel { margin-top: 0; }
/* Align the tab menu and feature copy along their shared left edge. */
@supports (grid-template-rows: subgrid) {
  .product-tour.is-ready { --product-column-gap: 48px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--product-column-gap); }
  .product-tour.is-ready .product-tablist { grid-area: 1 / 1; z-index: 1; justify-self: start; align-self: end; margin-bottom: 24px; }
  .product-tour.is-ready .product-panel { grid-area: 1 / 1 / 3 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 0; column-gap: inherit; }
  .product-tour.is-ready .product-copy { grid-area: 2 / 1; align-self: start; }
  .product-tour.is-ready .product-figure { grid-area: 1 / 2 / 3 / 3; align-self: center; }
  @media (max-width: 1099px) {
    .product-tour.is-ready { --product-column-gap: 32px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
    .product-tour.is-ready .product-tablist button { font-size: 13px; padding-inline: 8px; }
  }
  @media (max-width: 899px) {
    .product-tour.is-ready { display: block; }
    .product-tour.is-ready .product-panel { grid-template-columns: 1fr; grid-template-rows: auto; gap: 28px; }
    .product-tour.is-ready .product-copy, .product-tour.is-ready .product-figure { grid-area: auto; align-self: auto; }
  }
  @media (max-width: 599px) {
    .product-tour.is-ready .product-tablist button { font-size: 12px; padding-inline: 6px; }
  }
}

.product-copy { text-align: left; }
.product-copy h3 { font-size: 30px; }
.product-copy > p { margin-top: 20px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.plain-list { display: grid; gap: 10px; margin-top: 22px; padding-left: 20px; color: var(--ink); font-size: 15px; }
.plain-list li::marker { color: var(--blue); }
.product-copy > :is(.text-link, .button) { margin-top: 24px; }
.product-figure > a { display: block; border: 1px solid #ccd5e1; border-radius: 12px; overflow: hidden; background: #fff; }
.product-figure figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.product-figure figcaption a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; font-weight: 500; text-decoration: none; }
.product-figure figcaption a svg { width: 14px; height: 14px; }
.setup-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 100px; padding-block: 96px; }
.setup-section > div > p { max-width: 46ch; margin-top: 24px; color: var(--muted); font-size: 18px; }
.setup-section :is(.text-link, .button) { margin-top: 24px; }
.setup-list { list-style: none; padding: 0; counter-reset: setup; }
.setup-list li { position: relative; padding: 0 0 28px 44px; counter-increment: setup; }
.setup-list li::before { content: counter(setup); position: absolute; left: 0; top: 1px; color: var(--blue); font-size: 22px; font-weight: 700; }
.setup-list li + li { padding-top: 24px; border-top: 1px solid var(--line); }
.setup-list li + li::before { top: 25px; }
.setup-list li:last-child { padding-bottom: 0; }
.setup-list h3 { font-size: 23px; letter-spacing: -.02em; }
.setup-list p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.integrations-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 100px; padding-block: 0 96px; }
.integrations-copy p { max-width: 50ch; margin-top: 24px; color: var(--muted); font-size: 18px; }
.integrations-copy :is(.text-link, .button) { margin-top: 18px; }
.integration-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; padding: 32px 0; list-style: none; }
.integration-list li { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 64px; font-size: 15px; font-weight: 600; }
.integration-list img { width: min(160px, 100%); max-height: 36px; object-fit: contain; object-position: left; }
.integration-list li:first-child img { width: 30px; height: 30px; }
.pricing-preview { --ink: #f5f7fa; --muted: #c2c8d0; padding-block: 28px; background: #000; color: var(--ink); }
.pricing-preview-inner { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.pricing-preview h2 { font-size: 38px; }
.pricing-preview p { max-width: 60ch; margin-top: 12px; color: var(--muted); font-size: 17px; }
.pricing-preview .button { flex: none; }
.pricing-preview .button:focus-visible { outline-color: #fff; }
.contact-section { padding-block: 96px 80px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 100px; }
.contact-info { min-width: 0; }
.contact-info h2 { font-size: 38px; }
.contact-intro { max-width: 36ch; margin-top: 24px; color: var(--muted); font-size: 18px; }
.contact-details { margin-top: 32px; font-style: normal; }
.contact-details p { font-size: 15px; font-weight: 600; }
.contact-details .text-link { margin: 4px 0 0; font-size: 17px; }
.contact-help { max-width: 360px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-help h3 { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.contact-help p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.contact-help .text-link { margin: 8px 0 0; }
.contact-form-panel { min-width: 0; }
.contact-form-panel > h3 { font-size: 23px; letter-spacing: -.02em; }
.contact-form { display: grid; gap: 24px; margin-top: 24px; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.contact-field { display: grid; gap: 8px; min-width: 0; }
.contact-field label { font-size: 15px; font-weight: 500; }
.contact-field input, .contact-field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid #aab8c8; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; transition: border-color .16s ease; }
.contact-field textarea { min-height: 160px; resize: vertical; }
.contact-field textarea::placeholder { color: var(--muted); opacity: 1; }
.contact-field input:hover, .contact-field textarea:hover { border-color: #7d91a7; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { border-color: var(--blue); }
.contact-field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.contact-actions { display: flex; align-items: center; }
.contact-submit:disabled { opacity: .7; cursor: wait; }
.contact-status { color: var(--muted); font-size: 15px; }
.contact-status[data-state="error"] { color: #932626; }
.contact-status[data-state="success"] { color: var(--green); }
.faq-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; padding-block: 16px 96px; }
.contact-section + .faq-section { padding-top: 72px; border-top: 1px solid var(--line); }
.faq-intro h2 { font-size: 38px; }
.faq-intro > p { margin-top: 24px; color: var(--muted); }
.faq-intro .faq-contact { margin-top: 32px; font-size: 15px; }
.faq-contact a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; }
:is(.faq-contact a, .contact-info .text-link, .product-copy .text-link, .setup-section .text-link, .integrations-copy .text-link) { padding-inline: 0; border-radius: 0; background: transparent; text-decoration: none; transition: color .16s ease; }
:is(.faq-contact a, .contact-info .text-link, .product-copy .text-link, .setup-section .text-link, .integrations-copy .text-link):is(:hover, :focus-visible) { background: transparent; color: var(--blue); }
:is(.faq-contact a, .contact-info .text-link, .product-copy .text-link, .setup-section .text-link, .integrations-copy .text-link):focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.faq-group + .faq-group { margin-top: 30px; }
.faq-group h3 { margin-bottom: 8px; color: var(--muted); font-size: 17px; font-weight: 650; letter-spacing: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; padding-block: 14px; font-size: 15px; font-weight: 500; line-height: 1.45; list-style: none; }
.faq-toggle::-webkit-details-marker { display: none; }
.faq-toggle:hover { color: var(--blue); }
.faq-icon { flex: none; font-size: 18px; font-weight: 400; color: var(--blue); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 32px 22px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.closing-section, .site-footer { --ink: #f5f7fa; --muted: #b9c2ce; --blue-text: #90b9f2; --line: #242424; background: #000; color: var(--ink); color-scheme: dark; }
.closing-section { --newsletter-model-size: 136px; padding-block: 128px 64px; border-bottom: 1px solid var(--line); border-radius: 50% 50% 0 0 / 48px 48px 0 0; }
.closing-section ::selection, .site-footer ::selection { background: var(--blue-text); color: #000; }
.closing-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 80px; text-align: left; }
.closing-inner h2 { font-size: clamp(40px, 3.5vw, 50px); line-height: 1.1; }
.closing-inner h2 span { color: var(--blue-text); }
.newsletter-copy > p { max-width: 44ch; margin-top: 22px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.closing-inner .newsletter-form { width: min(540px, 100%); padding-top: 88px; justify-self: end; }
.newsletter-email-field { position: relative; min-width: 0; }
/* The square model has 9.7% transparent space below its feet. */
.newsletter-art { position: absolute; inset-inline-end: 4px; bottom: calc(100% - var(--newsletter-model-size) * .097); width: var(--newsletter-model-size); aspect-ratio: 1; clip-path: inset(0 0 9.7%); pointer-events: none; }
.newsletter-art .newsletter-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.site-footer { padding-top: 60px; }
.site-footer a:focus-visible { outline-color: var(--blue-text); }
.site-footer a:not(.brand):is(:hover, :focus-visible) { color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .7fr) minmax(0, .8fr); gap: 64px; padding-bottom: 48px; }
.footer-brand > p { margin-top: 20px; color: var(--muted); font-size: 16px; }
.footer-brand > a:last-of-type { display: inline-flex; min-height: 44px; align-items: center; margin-top: 10px; font-size: 15px; text-decoration: none; }
.footer-grid nav { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; }
.footer-grid nav h2 { margin-bottom: 14px; font-size: 17px; font-weight: 650; letter-spacing: 0; }
.footer-grid nav a { display: flex; align-items: center; min-height: 40px; color: var(--muted); font-size: 15px; text-decoration: none; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--muted); text-decoration: none; }
.site-footer a:not(.brand) { min-height: 32px; padding: 6px 0; background: transparent; color: var(--muted); font-size: 14px; font-weight: 400; text-decoration: none; transition: color .16s ease; }
.footer-bottom a svg { width: 14px; height: 14px; }
.newsletter-form > label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 500; }
.newsletter-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.newsletter-form input[type="email"] { width: 100%; min-width: 0; min-height: 52px; padding: 13px 16px; border: 1px solid #647084; border-radius: 8px; background: #171717; color: var(--ink); caret-color: var(--blue-text); font-size: 16px; line-height: 1.5; transition: border-color .16s ease; }
.newsletter-form input[type="email"]:hover { border-color: #91a2ba; }
.newsletter-form input[type="email"]:focus-visible { border-color: var(--blue-text); }
.newsletter-form :is(input, button):focus-visible { outline-color: var(--blue-text); }
.newsletter-form input::placeholder { color: var(--muted); opacity: 1; }
.newsletter-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.newsletter-consent { margin-top: 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.newsletter-fields .newsletter-submit { align-self: center; justify-self: stretch; min-height: 32px; padding-inline: 12px; border-radius: 6px; white-space: nowrap; }
.newsletter-submit:disabled { cursor: wait; opacity: .7; }
.newsletter-status { margin-top: 14px; color: var(--muted); font-size: 14px; }
.newsletter-status[data-state="error"] { color: #ffaba4; }
.newsletter-status[data-state="success"] { color: #8cddad; }
html.penny-dialog-open { overflow: hidden; }
.penny-dialog { position: fixed; width: min(560px, calc(100% - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 32px; border: 0; border-radius: 14px; overflow-y: auto; background: #fff; color: var(--ink); box-shadow: 0 24px 80px #0003; }
.penny-dialog::backdrop { background: #142536a6; }
.penny-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; }
.penny-close svg { width: 16px; height: 16px; }
.penny-close:hover { background: var(--soft); }
.penny-heading { display: flex; align-items: flex-start; gap: 16px; padding-right: 28px; }
.penny-heading h2 { font-size: 30px; }
.penny-heading p { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.penny-wave { display: flex; align-items: center; justify-content: center; gap: 3px; width: 32px; height: 32px; flex: none; margin-top: 2px; color: var(--blue); }
.penny-wave i { display: block; width: 3px; height: 12px; border-radius: 2px; background: currentColor; }
.penny-wave i:nth-child(2), .penny-wave i:nth-child(4) { height: 20px; }
.penny-wave i:nth-child(3) { height: 28px; }
.penny-bar { display: flex; align-items: stretch; gap: 12px; margin-top: 28px; }
.penny-pick { position: relative; min-width: 0; flex: 1; }
.penny-pick select { width: 100%; height: 50px; padding: 10px 34px 10px 16px; appearance: none; border: 1px solid #aab7c7; border-radius: 8px; background: #fff; color: var(--ink); font-size: 16px; }
.penny-dot { display: none; }
.penny-chev { position: absolute; right: 12px; top: 17px; pointer-events: none; color: var(--muted); }
.penny-call { flex: none; align-self: center; }
.penny-demo-hint { margin-top: 20px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.penny-under { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.penny-status { color: var(--muted); font-size: 14px; }
.penny-mute { min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 13px; }
.penny-note { margin-top: 12px; color: var(--muted); font-size: 14px; }
.penny-log { display: grid; gap: 14px; max-height: 260px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); overflow-y: auto; font-size: 15px; }
.penny-line span:first-child { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.penny-dialog.is-live .penny-call, .penny-dialog.is-connecting .penny-call { background: #a3322a; }
.pricing-main { padding-block: 56px 32px; }
.pricing-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.pricing-head h1 { font-size: clamp(44px, 4.2vw, 60px); }
.pricing-head h1 span { color: var(--blue); }
.pricing-intro { max-width: 62ch; }
.pricing-intro > p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.pricing-intro .availability-note { margin-top: 18px; font-size: 14px; line-height: 1.6; }
.pricing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 48px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.launch-offer { display: grid; gap: 6px; max-width: 62ch; color: var(--muted); font-size: 14px; line-height: 1.6; }
.launch-offer .launch-offer-label { color: var(--blue-text); font-size: 15px; font-weight: 650; }
.launch-offer strong { color: var(--ink); font-weight: 700; }
.billing-controls { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 10px; max-width: 320px; }
.billing { display: flex; flex: none; gap: 4px; padding: 4px; border: 1px solid #cbd5e2; border-radius: 6px; background: var(--soft); }
.billing button { min-height: 32px; padding: 6px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.4; }
.billing button[aria-checked="true"] { border-color: #cbd5e2; background: #fff; color: var(--blue); font-weight: 600; }
.billing-status { color: var(--muted); font-size: 12px; line-height: 1.5; text-align: right; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; border-block: 1px solid #bdc9d9; }
.plan { min-width: 0; padding: 30px; background: #fff; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan-popular { background: var(--blue-soft); }
.plan-head h3 { font-size: 28px; }
.plan-blurb { min-height: 44px; margin-top: 10px; color: var(--muted); font-size: 15px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; font-variant-numeric: tabular-nums; }
.plan-price strong { font-size: 44px; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.plan-per { color: var(--muted); font-size: 16px; }
.plan-note { min-height: 66px; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.plan-stats { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 18px; padding-block: 18px; border-block: 1px solid var(--line); }
.plan-stats dt { font-size: 26px; font-weight: 700; line-height: 1.2; }
.plan-stats dd { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.plan-cta { width: fit-content; margin-top: 24px; }
.plan-lead { margin-top: 24px; font-size: 15px; font-weight: 650; }
.plan-points { display: grid; gap: 12px; margin-top: 16px; padding: 0; list-style: none; }
.plan-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.plan-points svg { flex: none; margin-top: 3px; color: var(--blue); }
.enterprise { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; margin-top: 36px; padding: 30px; background: var(--soft); }
.enterprise-copy h3 { font-size: 28px; }
.enterprise-copy p { max-width: 50ch; margin-top: 14px; color: var(--muted); font-size: 17px; }
.enterprise-cta { margin-top: 16px; }
.enterprise-points { display: grid; gap: 10px; align-content: center; padding-left: 20px; font-size: 15px; }
.pricing-foot { max-width: 90ch; margin-top: 24px; color: var(--muted); font-size: 15px; }
.comparison-section { padding-block: 16px 80px; }
.comparison-hint { display: none; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.comparison-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #9aabc0 var(--soft); overscroll-behavior-x: contain; }
.plan-comparison { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.plan-comparison th, .plan-comparison td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: center; }
.plan-comparison thead th { background: var(--soft); color: var(--ink); font-size: 17px; font-weight: 700; }
.plan-comparison th:first-child { width: 38%; text-align: left; font-weight: 600; }
.comparison-explainer { max-width: 80ch; margin-top: 24px; color: var(--muted); font-size: 15px; }
.pricing-closing { padding-block: 72px 80px; }
.pricing-closing-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.pricing-closing h2 { font-size: clamp(36px, 3.4vw, 48px); }
.pricing-closing h2 span { color: var(--blue-text); }
.pricing-closing-copy p { max-width: 48ch; color: var(--muted); font-size: 18px; line-height: 1.65; }
.pricing-closing-copy .button { margin-top: 24px; }
.demo-hub { padding-block: 76px 80px; }
.demo-hub-heading { max-width: 800px; }
.demo-hub-heading > p { max-width: 58ch; margin-top: 24px; color: var(--muted); font-size: 20px; }
.demo-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; margin-top: 56px; border-block: 1px solid var(--line); }
.demo-choices section { padding-block: 32px; }
.demo-choices h2 { font-size: 30px; }
.demo-choices section > p { max-width: 56ch; min-height: 86px; margin-top: 18px; color: var(--muted); font-size: 17px; }
.demo-choices .button { margin-top: 24px; }
.demo-choices section .choice-note { min-height: 0; margin-top: 16px; font-size: 14px; }
.demo-hub-availability { max-width: 760px; margin-top: 36px; }
.demo-hub-availability > strong { font-size: 18px; font-weight: 650; }
.demo-hub-availability p { margin-top: 12px; color: var(--muted); font-size: 16px; }
.demo-hub-availability .text-link { margin: 18px 28px 0 0; }
@media (max-width: 1099px) {
  .shell { width: calc(100% - 56px); }
  .home-route .navigation-inner { width: calc(100% - 56px); }
  .navigation-inner { gap: 20px; }
  .desktop-navigation { gap: 20px; }
  .navigation-end { gap: 18px; }
  .hero-copy { max-width: 570px; }
  .hero h1 { font-size: 48px; }
  .hero-description { font-size: 18px; }
  .hero-layout { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding-block: 56px 44px; }
  .hero-devices { width: min(760px, 100%); height: min(660px, 84vw); margin-inline: auto; }
  .hero-devices .hero-phone { right: 2%; }
  .hero-laptop { left: -6%; width: 112%; height: 110%; }
  .agent-flow { width: min(760px, 100%); margin-inline: auto; }
  .flow-stage { height: min(650px, 88vw); }
  .section-intro { gap: 48px; }
  .product-panel { gap: 32px; }
  .setup-section, .integrations-section { gap: 56px; }
  .faq-section { gap: 48px; }
  .plan { padding: 24px; }
  .plan-price strong { font-size: 38px; }
}
@media (max-width: 899px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; }
  .contact-info > div:first-child { grid-row: 1 / 3; }
  .contact-details { margin-top: 0; }
  .contact-help { margin-top: 0; padding-top: 20px; }
}
@media (max-width: 899px) {
  .desktop-navigation, .login-link { display: none; }
  .navigation-menu { display: block; }
  .hero-copy { max-width: 650px; }
  .hero h1 { font-size: 56px; }
  .hero-description { font-size: 20px; }
  .benefit-strip-list { grid-template-columns: 1fr; gap: 8px; padding-block: 12px; }
  .benefit-strip-list li + li { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 8px; }
  .section-intro, .product-panel, .setup-section, .integrations-section, .faq-section { grid-template-columns: 1fr; }
  .section-intro { gap: 24px; }
  .product-copy { max-width: 580px; }
  .product-figure { width: 100%; }
  .setup-section, .integrations-section { gap: 40px; }
  .integration-list { max-width: 600px; padding-block: 0; }
  .pricing-preview-inner { align-items: flex-start; flex-direction: column; gap: 20px; }
  .faq-section { gap: 36px; }
  .faq-intro { max-width: 580px; }
  .closing-inner { grid-template-columns: 1fr; gap: 32px; }
  .closing-inner .newsletter-form { justify-self: start; }
  .closing-inner h2 { font-size: 40px; }
  .newsletter-copy > p { font-size: 17px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
  .pricing-head { grid-template-columns: 1fr; gap: 24px; }
  .pricing-closing-inner { grid-template-columns: 1fr; gap: 24px; }
  .pricing-head h1 { font-size: 52px; }
  .pricing-intro { max-width: 68ch; }
  .pricing-toolbar { align-items: flex-start; gap: 28px; }
  .billing-controls { max-width: 280px; }
  .plan-grid { grid-template-columns: 1fr; border-bottom: 0; }
  .plan { padding: 28px; border-bottom: 1px solid var(--line); }
  .plan + .plan { border-left: 0; }
  .plan-blurb, .plan-note { min-height: 0; }
  .plan-price strong { font-size: 44px; }
  .plan-stats { max-width: 480px; }
  .plan-cta { width: fit-content; }
  .enterprise { grid-template-columns: 1fr; gap: 28px; }
  .demo-choices { gap: 40px; }
  .demo-choices section > p { min-height: 0; }
}
@media (max-width: 599px) {
  html { scroll-padding-top: 80px; }
  .shell { width: calc(100% - 40px); }
  .home-route .navigation-inner { width: calc(100% - 40px); }
  .navigation-inner { gap: 12px; }
  .brand { gap: 6px; font-size: 22px; }
  .brand-logo { width: 210px; }
  .navigation-cta { display: none; }
  .navigation-end { gap: 0; }
  .navigation-menu summary { padding-inline: 10px; }
  .hero-layout { padding-block: 42px 32px; gap: 22px; }
  .hero-devices { height: clamp(300px, 84vw, 470px); }
  .flow-stage { height: clamp(260px, 88vw, 480px); }
  .hero-phone .flow-stage { height: clamp(420px, 130vw, 540px); }
  .flow-routes { gap: 0; }
  .flow-routes button, .flow-pause { padding-inline: 7px; font-size: 12px; }
  .flow-controls { position: relative; flex-wrap: nowrap; }
  .flow-pause { position: absolute; top: -44px; right: 0; }
  .flow-controls { gap: 4px; }
  .hero h1 { font-size: clamp(38px, 10vw, 48px); }
  .hero-description { margin-top: 20px; font-size: 18px; }
  .hero-description br { display: none; }
  .hero-actions { gap: 12px 18px; margin-top: 26px; }
  .hero-actions .button { flex: none; }
  .hero-availability { max-width: 34ch; margin-top: 20px; }
  .product-section { padding-block: 72px 56px; }
  h2 { font-size: 34px; }
  .section-intro h2 { font-size: 36px; }
  .section-intro p { font-size: 17px; }
  .product-tour { margin-top: 30px; }
  .product-tablist { gap: 0; margin-bottom: 28px; }
  .product-tablist button { padding-inline: 6px; font-size: 12px; }
  .product-copy h3 { font-size: 29px; }
  .product-panel { gap: 28px; }
  .product-figure figcaption { gap: 4px; font-size: 13px; }
  .setup-section { padding-block: 56px; }
  .setup-section > div > p, .integrations-copy p { font-size: 17px; }
  .setup-list h3 { font-size: 22px; }
  .setup-list li { padding-left: 36px; }
  .integrations-section { padding-bottom: 56px; }
  .integration-list { gap: 20px 24px; }
  .integration-list li { font-size: 14px; }
  .integration-list img { max-height: 30px; }
  .pricing-preview h2, .closing-inner h2 { font-size: 34px; }
  .pricing-preview p, .newsletter-copy > p { font-size: 17px; }
  .contact-section { padding-block: 56px; }
  .contact-info { display: block; }
  .contact-info h2 { font-size: 34px; }
  .contact-intro { margin-top: 16px; font-size: 16px; }
  .contact-details { margin-top: 24px; }
  .contact-help { margin-top: 24px; }
  .contact-form-panel > h3 { font-size: 23px; }
  .contact-fields { grid-template-columns: 1fr; }
  .faq-section { padding-block: 0 56px; }
  .contact-section + .faq-section { padding-top: 56px; }
  .faq-intro h2 { font-size: 34px; }
  .faq-toggle { font-size: 15px; }
  .closing-section { --newsletter-model-size: 112px; padding-block: 80px 48px; border-top-left-radius: 50% 28px; border-top-right-radius: 50% 28px; }
  .closing-inner { grid-template-columns: 1fr; gap: 24px; }
  .newsletter-copy > p { margin-top: 16px; }
  .closing-inner .newsletter-form { padding-top: 64px; }
  .newsletter-fields { grid-template-columns: 1fr; }
  .newsletter-submit { justify-self: stretch; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-bottom: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; gap: 12px; font-size: 13px; }
  .penny-dialog { width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: 24px; }
  .penny-heading { display: block; padding-right: 30px; }
  .penny-wave { margin-bottom: 16px; }
  .penny-heading h2 { font-size: 28px; }
  .penny-bar { flex-direction: column; }
  .penny-call { align-self: flex-start; }
  .pricing-main { padding-top: 36px; }
  .pricing-head { gap: 20px; }
  .pricing-head h1 { font-size: clamp(36px, 10vw, 42px); }
  .pricing-intro > p { font-size: 17px; }
  .pricing-intro .availability-note { margin-top: 16px; font-size: 14px; }
  .pricing-toolbar { flex-direction: column; gap: 24px; margin-top: 28px; }
  .billing-controls { width: 100%; max-width: none; align-items: stretch; }
  .billing-status { text-align: left; }
  .billing { width: 100%; gap: 2px; }
  .billing button { flex: 1; padding-inline: 8px; }
  .plan { padding: 26px 20px; }
  .plan-cta { width: fit-content; }
  .enterprise { padding: 24px 20px; }
  .comparison-section { padding-block: 16px 56px; }
  .pricing-closing { padding-block: 48px 56px; }
  .pricing-closing-inner { gap: 20px; }
  .pricing-closing h2 { font-size: clamp(30px, 8.5vw, 36px); }
  .pricing-closing-copy p { font-size: 17px; }
  .comparison-hint { display: block; }
  .plan-comparison th:first-child { position: sticky; left: 0; z-index: 1; min-width: 165px; width: 165px; border-right: 1px solid var(--line); background: #fff; }
  .plan-comparison thead th:first-child { background: var(--soft); }
  .plan-comparison th, .plan-comparison td { padding: 14px 16px; }
  .demo-hub { padding-block: 44px 56px; }
  .demo-hub-heading h1 { font-size: 46px; }
  .demo-hub-heading > p { font-size: 18px; }
  .demo-choices { grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
  .demo-choices section + section { border-top: 1px solid var(--line); }
  .demo-choices h2 { font-size: 29px; }
  .demo-choices .button { width: fit-content; }
  .demo-hub-availability .text-link { margin: 14px 0 0; display: flex; width: fit-content; }
}
/* Text actions and navigation share a compact, hover-only gray button surface. */
:is(.text-link, .desktop-navigation a, .login-link,
    .product-figure figcaption a, .contact-email a, .faq-contact a,
    .help-topics a, .help-answer-link) {
  padding: 6px 10px;
  border-radius: 6px;
  background: transparent;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.desktop-navigation a[aria-current] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
@media (hover: hover) {
  :is(.text-link, .desktop-navigation a, .login-link,
      .product-figure figcaption a, .contact-email a, .faq-contact a,
      .help-topics a, .help-answer-link):hover {
    background: var(--link-hover-bg);
    color: var(--link-hover-ink);
    text-decoration: none;
  }
}
/* Compact labels and proportions, with comfortable touch targets. */
@media (max-width: 899px), (pointer: coarse) {
  .button, .newsletter-fields .newsletter-submit, .text-link, .navigation-menu summary, .desktop-navigation a, .login-link,
  .flow-routes button, .flow-pause, .product-tablist button, .billing button,
  .product-figure figcaption a, .contact-email a, .faq-contact a, .site-footer a:not(.brand),
  .penny-mute { min-height: 44px; }
  .penny-close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}