/* fit.css — every main section fills one screen on desktop monitors and never
   needs scrolling inside it. Sizes follow the smaller of screen width and
   screen height, so short laptop screens (13") and tall monitors both fit. */

:root { --nav-h: 54px; --fit-pad: clamp(20px, 5vh, 72px); }
body.has-pnav { --nav-h: 108px; }

@media (min-width: 901px) and (min-height: 560px) {
  html { scroll-padding-top: var(--nav-h); }

  main > section {
    min-height: calc(100svh - var(--nav-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--fit-pad) !important;
    box-sizing: border-box;
  }
  main > section > .wrap { width: 100%; }

  /* shared type scale tied to screen height as well as width */
  main h2 { font-size: clamp(28px, min(4.2vw, 6.4vh), 64px) !important; line-height: 1.06; }
  main .sub { font-size: clamp(16px, min(1.5vw, 2.3vh), 22px) !important; }
  .section-label { margin-bottom: clamp(6px, 1.2vh, 14px); }

  /* hero */
  .hero h1 { font-size: clamp(36px, min(5vw, 7.4vh), 88px) !important; }
  .hero .sub { margin-top: clamp(12px, 2.2vh, 24px) !important; }
  .hero-cta { margin-top: clamp(12px, 2.4vh, 28px) !important; }
  .hero-copy { max-width: min(720px, 100%); }
  #hero-shift { zoom: clamp(.78, calc(100vh / 1000px), 1.35); }
}

/* ---------- homepage ---------- */
.products .prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(16px, 4vh, 40px); }
.prod { display: flex; flex-direction: column; gap: 8px; border-radius: 22px; padding: clamp(18px, 3.2vh, 32px) clamp(16px, 1.6vw, 26px); text-decoration: none; border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; min-height: clamp(160px, 30vh, 340px); }
.prod:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20, 30, 80, .14); text-decoration: none; }
.prod.dark { background: #141B3D; color: #F5F5F7; border-color: transparent; }
.prod.light { background: var(--bg2, #F5F5F7); color: var(--ink); }
.prod .status { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #F0996A; margin: 0; }
.prod.light .status { color: var(--link); }
.prod h3 { font-size: clamp(24px, min(2.4vw, 4vh), 40px); line-height: 1.1; margin: 4px 0 0; }
.prod .tag { font-size: clamp(15px, min(1.2vw, 2vh), 19px); line-height: 1.4; margin: 0; opacity: .85; }
.prod .more { margin-top: auto; padding-top: 12px; font-weight: 600; color: #8FA3F7; }
.prod.light .more { color: var(--link); }
@media (max-width: 900px) { .products .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .products .prod-grid { grid-template-columns: 1fr; } .prod { min-height: 0; } }

@media (min-width: 901px) and (min-height: 560px) {
  /* live demo: the sample app takes whatever height is left on screen */
  main > section.demos { height: calc(100svh - var(--nav-h)); }
  .demos .wrap { flex: 1; min-height: 0; }
  .demos h2 { margin-top: 0; }
  .demos .sub { margin-top: 6px !important; }
  .demos h2 { max-width: none !important; }
  .demos .demo-tabs { margin-top: clamp(8px, 1.6vh, 18px); align-self: flex-start; }
  .demos .app-stage { flex: 1 1 auto; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; width: 100%; margin: clamp(8px, 1.6vh, 16px) auto 0 !important; }
  .demos .app-stage iframe { height: 100% !important; min-height: 0 !important; }
  .demos .demo-foot { margin-top: 8px !important; flex: none; }
  main > section.demos { padding-block: clamp(16px, 3.5vh, 48px) !important; }

  .promise .triple { margin-top: clamp(20px, 5vh, 56px) !important; }
  .promise .triple .num { font-size: clamp(32px, min(4vw, 6vh), 56px) !important; margin-bottom: clamp(8px, 1.6vh, 16px) !important; }
}

.steps-row { list-style: none; padding: 0; margin: clamp(20px, 5vh, 56px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.steps-row li { padding: clamp(14px, 2.6vh, 28px) 24px 0 0; text-align: left; }
.steps-row .n { font-size: clamp(28px, min(3vw, 5vh), 48px); font-weight: 700; color: var(--blue); letter-spacing: -.04em; line-height: 1; }
.steps-row h3 { font-size: clamp(20px, min(1.8vw, 3vh), 28px); margin: 10px 0 6px; }
.steps-row p { color: var(--soft); font-size: clamp(15px, min(1.2vw, 2vh), 18px); margin: 0; }
.steps .quote { margin: clamp(24px, 6vh, 72px) 0 0; padding-left: 20px; border-left: 3px solid var(--blue); text-align: left; }
.steps .quote blockquote { margin: 0; font-size: clamp(20px, min(2vw, 3.4vh), 32px); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.steps .quote figcaption { margin-top: 10px; color: var(--soft); font-size: 15px; }
@media (max-width: 760px) { .steps-row { grid-template-columns: 1fr 1fr; row-gap: 20px; } }

@media (min-width: 901px) and (min-height: 560px) {
  .faq .wrap { max-width: 760px; }
  .faq h2 { margin-bottom: clamp(10px, 2.4vh, 28px) !important; }
  .faq summary { font-size: clamp(16px, min(1.4vw, 2.4vh), 20px) !important; padding-block: clamp(8px, 1.8vh, 18px) !important; }
  .faq details p { padding-bottom: clamp(8px, 1.6vh, 18px) !important; margin: 0; }

  .contact .sub { margin-bottom: clamp(8px, 2vh, 22px) !important; }
  .contact-form { margin-top: clamp(8px, 2vh, 20px) !important; gap: clamp(6px, 1.2vh, 10px) !important; }
  .contact-form textarea { min-height: clamp(52px, 9vh, 96px) !important; }
  .contact-alt { margin-top: clamp(10px, 2vh, 20px) !important; }
}

/* contact: intro left, form right */
@media (min-width: 901px) {
  .contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 80px); align-items: center; text-align: left; }
  .contact .contact-intro h2, .contact .contact-intro .sub { text-align: left; margin-left: 0; }
  .contact .contact-form { margin: 0 !important; max-width: none; }
  .contact .contact-alt { text-align: left; }
}
@media (min-width: 901px) and (min-height: 560px) {
  .contact-form .turnstile-wrap { min-height: 0 !important; margin: 0 !important; }
}

/* product pages have a second sticky bar */
body:has(.pnav) { --nav-h: 56px; }
@media (min-width: 901px) {
  body:has(.pnav) .gnav { position: relative; top: auto; }
  body:has(.pnav) .pnav { top: 0 !important; }
}

/* ---------- product pages ---------- */
@media (min-width: 901px) and (min-height: 560px) {
  /* hero chat / mock windows never taller than the screen */
  .hero-chat .thread { height: calc(100svh - var(--nav-h) - 2 * var(--fit-pad) - 240px) !important; max-height: 560px; min-height: 200px; }
  main h2.big { font-size: clamp(28px, min(4.2vw, 6.4vh), 64px) !important; }
  main section .lead, main section > .wrap > p:not(.kicker):not(.note) { font-size: clamp(15px, min(1.3vw, 2.2vh), 20px); }

  /* embedded sample app fills what is left of the screen */
  #look { height: calc(100svh - var(--nav-h)); padding-block: clamp(16px, 3.5vh, 48px) !important; }
  #look .wrap { flex: 1; min-height: 0; }
  #look .app-stage { min-height: 0 !important; width: 100%; margin: 0 !important; }

  /* long example table scrolls inside its card */
  .formula-sec .screen { margin-top: clamp(14px, 3vh, 40px) !important; max-height: calc(100svh - var(--nav-h) - 2 * var(--fit-pad) - clamp(260px, 40vh, 400px)); overflow: auto; }
  .formula-sec .screen thead th { position: sticky; top: 0; background: inherit; z-index: 1; }

  /* feature rows */

  /* problem cards: one row of four */
  #why .grid, #why .cards, #why .cmp { gap: 14px !important; }

  /* contact: intro left, form right */
  #contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 4vw, 72px); align-items: center; text-align: left; }
  #contact .wrap { grid-auto-rows: min-content; align-content: center; row-gap: 0 !important; }
  #contact .wrap > *:not(form) { grid-column: 1; text-align: left; margin-left: 0; justify-self: start; }
  #contact .wrap > form { grid-column: 2; grid-row: 1 / span 12; align-self: center; margin: 0 !important; max-width: none; }
  #contact .copy-state:empty { display: none; }
  #contact p.email { margin-top: clamp(8px, 2vh, 24px) !important; }
  #contact button.copy { margin-top: 8px !important; }
}
@media (min-width: 901px) and (min-height: 560px) {
  main > section > .wrap { padding-block: clamp(14px, 3.2vh, 48px) !important; }
  main section .sub { margin-top: clamp(6px, 1.4vh, 18px) !important; }
  .formula-sec .note { padding-top: 6px !important; }
  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-top: clamp(16px, 4vh, 60px) !important; gap: 14px !important; }
  .grid4 .card { padding: clamp(14px, 2.6vh, 34px) clamp(14px, 1.4vw, 24px) !important; text-align: left; }
}
@media (min-width: 901px) and (min-height: 560px) {
  /* phone screenshots shrink to the screen height */
  main section .shots figure.phone { width: min(300px, calc((100svh - var(--nav-h) - 2 * var(--fit-pad) - clamp(370px, 52vh, 540px)) * 0.46 + 22px)) !important; }
  main section .shots { margin-top: clamp(12px, 3vh, 48px) !important; }
  .hero figure.phone { width: min(300px, calc((100svh - var(--nav-h) - 2 * var(--fit-pad) - 170px) * 0.46 + 22px)) !important; }
  .hero figure.phone { margin-top: 0 !important; }
  .hero .ai-points { margin-top: clamp(10px, 2vh, 22px) !important; }
  .hero .hero-links { margin-top: clamp(14px, 2.6vh, 28px) !important; }
  .hero .lead { margin-top: clamp(8px, 1.8vh, 18px) !important; }
  .hero .mark { height: clamp(36px, 6vh, 56px) !important; width: auto !important; }
  .hero .console { max-height: calc(100svh - var(--nav-h) - 2 * var(--fit-pad) - 20px); overflow: hidden; }
}

/* about page: one screen */
@media (min-width: 901px) and (min-height: 560px) {
  main.about-fit { min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(16px, 4vh, 56px) !important; }
  main.about-fit h1 { font-size: clamp(32px, min(4vw, 6vh), 56px) !important; }
  main.about-fit .lede { font-size: clamp(16px, min(1.4vw, 2.3vh), 21px) !important; }
  main.about-fit h2 { font-size: clamp(18px, min(1.6vw, 2.8vh), 24px) !important; margin-top: clamp(12px, 2.6vh, 32px) !important; }
  main.about-fit .content p { font-size: clamp(15px, min(1.2vw, 2vh), 18px); margin-top: 6px; }
}

/* primary buttons: solid and high-contrast (they looked disabled) */
.pill::before { background: var(--blue) !important; border-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.pill:hover::before { background: color-mix(in srgb, var(--blue) 82%, #000) !important; }
.pill { color: #fff !important; }

/* about page used the browser's default serif font */
.prose-page, .prose-page h1, .prose-page h2, .prose-page p { font-family: var(--font, "IBM Plex Sans", system-ui, sans-serif); }
/* keep product heroes side by side in any desktop-sized window */
@media (min-width: 901px) and (min-height: 560px) {
  .hero .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; gap: clamp(24px, 3.5vw, 56px) !important; }
}
/* product pages: at the top of the page both bars are visible, so the first screen is shorter */
@media (min-width: 901px) and (min-height: 560px) {
  body:has(.pnav) main > section:first-of-type { min-height: calc(100svh - 110px); }
}

/* =====================================================================
   v2 — distinct section backgrounds with smooth blends, full-width app
   view, merged feature grids, richer cards.
   ===================================================================== */
:root {
  --tone-a: #F7F8FC;      /* cool white */
  --tone-b: #E9EDF7;      /* light blue-grey */
  --tone-warm: #FBF4EC;   /* warm sand */
  --tone-dark: #0E1533;   /* deep navy, frames the app */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tone-a: #1B2130;
    --tone-b: #232A3B;
    --tone-warm: #2A241C;
  }
}
:root[data-theme="dark"] {
  --tone-a: #1B2130;
  --tone-b: #232A3B;
  --tone-warm: #2A241C;
}
main > section[data-tone] {
  position: relative;
  background: linear-gradient(180deg, var(--prev, var(--tone)) 0, var(--tone) var(--blend, 120px)) !important;
  border: 0 !important;
}
main > section[data-tone="a"] { --tone: var(--tone-a); }
main > section[data-tone="b"] { --tone: var(--tone-b); }
main > section[data-tone="warm"] { --tone: var(--tone-warm); }
main > section[data-tone="dark"] {
  --tone: var(--tone-dark);
  --ink: #E9ECF5;
  --soft: #B8C0D9;
  --link: #C9D3FF;
  --blue: #9FB0FF;
  color: #E9ECF5;
}
/* cards that stay light need dark type even when the page is in dark mode */
.features-grid .feature,
.steps-row li,
.prod.light {
  color: #2E3440;
  --ink: #2E3440;
  --soft: #5B6577;
  --link: #1C39BB;
  --blue: #1C39BB;
}
.prod.light { background: #F4F5F7; }
/* the fixed ambient wash stays behind the coloured sections */
.ambient-wash { z-index: -1; }

/* ---------- app view: the app is the hero of the section ---------- */
.appview .wrap { max-width: none !important; padding-inline: 20px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
@media (min-width: 901px) {
  .appview .wrap { padding-inline: clamp(28px, 3vw, 56px) !important; }
}
.appview-head { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 16px; flex-wrap: wrap; text-align: left; margin: 0; width: 100%; max-width: none; }
.appview-head h2 { color: #fff; font-size: clamp(22px, min(1.7vw, 3vh), 28px) !important; margin: 0 !important; max-width: none !important; text-align: left; line-height: 1.15; }
.appview-head p { margin: 0; color: #B8C0D9; font-size: 14px; line-height: 1.45; text-align: left; }
.appview .section-label, .appview .kicker { color: #9FB0FF !important; margin: 0 !important; font-size: 13px !important; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.appview .demo-tabs { margin: 0 !important; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.appview .demo-tabs button { color: #C9D1EA; padding: 8px 10px; font-size: 13px; text-align: left; }
.appview .demo-tabs button[aria-selected="true"] { background: #fff !important; color: var(--tone-dark) !important; }
.appview .app-stage { width: 100% !important; max-width: none !important; margin: 12px 0 0 !important; border-radius: 14px !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 30px 80px rgba(0,0,0,.45) !important; }
.appview .demo-foot { width: 100%; max-width: none; margin: 14px 0 0 !important; color: #A9B2CC; text-align: left; }
.appview .demo-foot a { color: #C9D3FF; }
@media (min-width: 901px) and (min-height: 560px) {
  main > section.appview { height: calc(100svh - var(--nav-h)); padding-block: clamp(20px, 3vh, 36px) !important; }
  section.appview > .wrap:has(.app-stage) {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: 20px;
    align-items: stretch;
    align-content: stretch;
    flex: 1;
    min-height: 0;
    height: 100%;
  }
  section.appview .appview-head { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  section.appview .demo-foot { grid-column: 1; grid-row: 2; align-self: start; }
  section.appview .app-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
  }
  section.appview .app-stage iframe { height: 100% !important; min-height: 0 !important; }
}
@media (max-width: 900px) {
  section.appview .app-stage { height: min(72vh, 680px) !important; }
}

/* CountIn: copy beside large phone screens */
.appview-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 72px); align-items: center; max-width: 1400px; margin: 0 auto; width: 100%; text-align: left; flex: 1; min-height: 0; }
.appview-split .av-copy h2 { color: #fff; text-align: left; }
.appview-split .av-copy .sub, .appview-split .av-copy .note { color: #B8C0D9 !important; text-align: left; margin-left: 0; }
.appview-split .av-copy .pill { margin-top: clamp(12px, 2.4vh, 24px); }
.appview-split .shots { margin: 0 !important; justify-content: center; }
.appview-split figure.phone figcaption { color: #A9B2CC; }
@media (min-width: 901px) and (min-height: 560px) {
  main section.appview .appview-split figure.phone { width: min(340px, calc((100svh - var(--nav-h) - 2 * var(--fit-pad) - 110px) * 0.46 + 22px)) !important; }
}
@media (max-width: 900px) { .appview-split { grid-template-columns: 1fr; } }

/* ---------- merged feature grids ---------- */
.features-grid .wrap > .kicker { text-align: center; }
.features-grid .fgrid { display: grid; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(10px, 2vh, 24px); }
.features-grid.cols-2 .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features-grid.cols-3 .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features-grid .feature { display: flex !important; flex-direction: column; justify-content: flex-start; gap: clamp(10px, 2vh, 20px); margin: 0 !important; padding: clamp(14px, 2.4vh, 28px) !important; background: #fff; border: 1px solid #DCE1EE; border-radius: 20px; box-shadow: 0 10px 30px rgba(20, 30, 80, .06); text-align: left; grid-template-columns: none !important; }
.features-grid .feature > div:not(.panel) h3 { font-size: clamp(18px, min(1.6vw, 2.8vh), 26px) !important; margin: 4px 0 6px; }
.features-grid .feature > div:not(.panel) p { font-size: clamp(14px, min(1.05vw, 1.9vh), 16px) !important; }
.features-grid .feature .panel { margin: 0 !important; max-width: none !important; width: 100%; }
.features-grid .feature .panel .row { padding-block: clamp(6px, 1.1vh, 12px) !important; }
@media (max-width: 900px) { .features-grid.cols-3 .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .features-grid .fgrid { grid-template-columns: 1fr !important; } }

/* ---------- homepage: richer product cards and steps ---------- */
.prod .pts { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; font-size: clamp(13px, min(1vw, 1.8vh), 15px); }
.prod .pts li { padding-left: 18px; position: relative; opacity: .9; }
.prod .pts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #F0996A; }
.prod.light .pts li::before { background: var(--blue); }
.steps-row li { background: #fff; border: 1px solid #DCE1EE; border-radius: 18px; padding: clamp(14px, 2.4vh, 26px) clamp(14px, 1.4vw, 22px) !important; margin-right: 0; }
.steps-row { gap: 14px !important; border-top: 0 !important; }
.steps-row .get { margin-top: 10px !important; color: var(--ink) !important; }
.steps-row .time { margin-top: 10px !important; font-size: 13px !important; font-weight: 600; color: var(--link) !important; }

.features-grid .feature > .panel { order: 2; }
.features-grid .wrap > h2 { text-align: center; margin: 4px 0 0; }

/* FAQ and founding: two columns so the section reads as a full page */
@media (min-width: 901px) {
  main > section.faq .wrap { max-width: 1200px !important; display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; text-align: left; }
  main > section.faq .wrap > h2 { grid-column: 1; grid-row: 1 / span 20; text-align: left !important; position: sticky; top: 0; }
  main > section.faq .wrap > .faq-intro { grid-column: 1; }
  main > section.faq .wrap > details { grid-column: 2; }
  #founding .wrap { max-width: 1200px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; text-align: left; }
  #founding .wrap > :not(ol):not(.offer):not(.plan) { grid-column: 1; text-align: left !important; margin-left: 0 !important; }
  #founding .wrap > ol, #founding .wrap > .offer, #founding .wrap > .plan { grid-column: 2; grid-row: 1 / span 6; margin: 0 !important; }
}
.faq-intro { color: var(--soft); font-size: clamp(15px, min(1.2vw, 2vh), 18px); margin: 10px 0 0 !important; text-align: left; }
@media (min-width: 901px) { main > section.faq .wrap > h2 { grid-row: auto; position: static; align-self: end; } main > section.faq .wrap > .faq-intro { align-self: start; } main > section.faq .wrap { grid-auto-flow: dense; } }
.features-grid .wrap { max-width: 1240px !important; }

.features-grid .feature > div { min-width: 0; max-width: 100%; }
@media (min-width: 901px) { #contact .wrap:not(:has(form)) { display: block !important; text-align: center; max-width: 760px; } #contact .wrap:not(:has(form)) > * { justify-self: center; text-align: center !important; margin-inline: auto !important; } }

/* content eases in when a section scrolls into view (only when JS runs) */
html.fx main > section > .wrap { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.fx main > section.in-view > .wrap { opacity: 1; transform: none; }
main > section[data-tone] { transition: background-color .6s ease; }

/* hero: one app for the whole formula lifecycle */
.hero.hero-v2 { overflow: visible; }
.hero-v2 .hero-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important; gap: clamp(28px, 4vw, 64px) !important; align-items: center; }
.hero-v2 .hero-copy { max-width: 620px; }
.hero-v2 h1 { font-size: clamp(30px, min(3.4vw, 6vh), 62px) !important; line-height: 1.06; letter-spacing: -.03em; }
.hero-v2 h1 span { color: var(--link); }
.hero-v2 .sub { font-size: clamp(15px, min(1.25vw, 2.2vh), 20px) !important; max-width: 560px; }
.hero-v2 .hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-shot { position: relative; min-width: 0; }
.hero-shot .browser { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(14, 21, 51, .08); box-shadow: 0 24px 60px rgba(20, 30, 80, .16); }
.hero-shot .browser img { display: block; width: 100%; height: auto; }
.callouts { list-style: none; margin: 0; padding: 0; }
.callouts li { position: absolute; display: flex; gap: 9px; align-items: flex-start; background: #0E1533; color: #E9ECF5; border-radius: 12px; padding: 8px 12px 8px 9px; font-size: clamp(11px, .85vw, 13px); line-height: 1.3; box-shadow: 0 14px 34px rgba(14, 21, 51, .35); max-width: 230px; z-index: 2; }
.callouts li b { display: block; color: #fff; font-size: clamp(12px, .95vw, 14px); margin-bottom: 2px; }
.callouts .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #F0996A; color: #0E1533; font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.callouts .c1 { top: 15%; right: -3%; }
.callouts .c2 { bottom: 2.5%; left: 27%; }
.callouts .c3 { top: 24%; left: 31%; }
.callouts .c4 { top: -5%; right: 9%; }
@media (prefers-reduced-motion: no-preference) {
  .callouts li { opacity: 0; transform: translateY(10px) scale(.96); animation: callout-in .5s cubic-bezier(.2,.7,.2,1) forwards; }
  .callouts .c1 { animation-delay: .8s; } .callouts .c2 { animation-delay: 1.5s; } .callouts .c3 { animation-delay: 2.2s; } .callouts .c4 { animation-delay: 2.9s; }
  @keyframes callout-in { to { opacity: 1; transform: none; } }
}
@media (max-width: 900px) {
  .hero-v2 .hero-grid { grid-template-columns: 1fr !important; }
  .callouts li { position: static; max-width: none; margin-top: 8px; }
}

/* =====================================================================
   v5 — two-product hero, facts line, fixed button colour
   ===================================================================== */
.hero-switch { display: inline-flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(28, 57, 187, .07); border: 1px solid rgba(28, 57, 187, .14); margin-bottom: clamp(14px, 2.6vh, 26px); }
.hero-switch button { font: inherit; border: 0; background: transparent; cursor: pointer; text-align: left; padding: 7px 14px; border-radius: 10px; color: var(--soft); display: flex; flex-direction: column; line-height: 1.2; }
.hero-switch button b { font-size: 15px; color: var(--ink); }
.hero-switch button span { font-size: 12px; }
.hero-switch button[aria-selected="true"] { background: #fff; box-shadow: 0 4px 14px rgba(20, 30, 80, .12); }
.hero-switch button[aria-selected="true"] b { color: #1C39BB; }
.hero-switch button:focus-visible { outline: 2px solid #1C39BB; outline-offset: 2px; }
.hero-v2 .h1 { font-size: clamp(30px, min(3.4vw, 6vh), 62px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; margin: 0; color: var(--ink); }
.hero-v2 .h1 span { color: var(--link); }
.slide-copy:not([hidden]) { animation: slide-in .5s ease; }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-more { margin: clamp(10px, 1.8vh, 16px) 0 0; font-size: 14px; color: var(--soft); }
.hero-facts { list-style: none; padding: 0; margin: clamp(14px, 2.6vh, 28px) 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--soft); }
.hero-facts li { position: relative; padding-left: 18px; }
.hero-facts li::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: #2F9E6F; box-shadow: 0 0 0 3px rgba(47,158,111,.15); }

/* the two screenshots share one place and cross-fade */
.hero-shot { display: grid; }
.hero-shot .slide-shot { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.hero-shot .slide-shot.is-on { opacity: 1; visibility: visible; }
.hero-shot .slide-shot:not(.is-on) .callouts li { animation: none; opacity: 0; }
.callouts.q .c1 { top: 13%; right: 12%; left: auto; bottom: auto; }
.callouts.q .c2 { top: 61%; left: -4%; right: auto; bottom: auto; }
.callouts.q .c3 { bottom: 2%; right: 2%; top: auto; left: auto; }
.callouts.q .c4 { top: -5%; right: 9%; left: auto; bottom: auto; }
@media (max-width: 900px) {
  .hero-switch { display: flex; width: 100%; }
  .hero-switch button { flex: 1; }
}

/* primary buttons keep one strong blue in every section and in dark mode */
.pill::before, main > section[data-tone="dark"] .pill::before, .pnav .pill::before { background: #1C39BB !important; }
.pill:hover::before { background: #152C93 !important; }
.pill, .pill .pill-in { color: #fff !important; }
@media (prefers-color-scheme: dark) { .hero-switch button[aria-selected="true"] { background: #2A3247; } .hero-switch button[aria-selected="true"] b { color: #C9D3FF; } }
:root[data-theme="dark"] .hero-switch button[aria-selected="true"] { background: #2A3247; }

/* feature cards: compact panels so the section fits at full size */
.features-grid .feature .panel { padding: clamp(10px, 1.6vh, 18px) !important; gap: 6px !important; }
.features-grid .feature .panel .row { padding: clamp(5px, .9vh, 9px) 12px !important; min-height: 0 !important; margin: 0 !important; }
.features-grid .feature .panel .row + .row { margin-top: 6px !important; }
.features-grid .feature .panel .src { padding: clamp(8px, 1.4vh, 14px) 14px !important; margin-bottom: 6px !important; }
.features-grid .feature > div:not(.panel) p.k { margin-top: 0 !important; }
.features-grid .feature > div:not(.panel) p { margin-top: 6px !important; }
@media (min-width: 901px) and (min-height: 560px) {
  main > section.features-grid { padding-block: clamp(10px, 2.6vh, 36px) !important; }
  main > section.features-grid > .wrap { padding-block: 0 !important; }
  .features-grid .wrap > h2 { margin-bottom: 0 !important; }
  .features-grid .feature { padding: clamp(12px, 2vh, 24px) !important; gap: clamp(8px, 1.4vh, 16px) !important; }
}

/* step flows: cards, plus a live example running through the same steps */
.flow { gap: 12px !important; border-top: 0 !important; margin-top: clamp(14px, 3vh, 36px) !important; }
.flow li { background: #fff; border: 1px solid #DCE1EE; border-radius: 16px; padding: clamp(12px, 2vh, 20px) clamp(12px, 1.2vw, 18px) !important; color: #2E3440; }
.flow li h4 { font-size: clamp(16px, min(1.4vw, 2.4vh), 21px) !important; color: #2E3440; }
.flow li p { font-size: clamp(13px, min(1vw, 1.8vh), 15px) !important; color: #5B6577 !important; margin: 0; }
.flow .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FBE7DC; color: #B5481A !important; font-size: 13px !important; }
.tracker { margin-top: clamp(14px, 2.8vh, 32px); background: #0E1533; color: #E9ECF5; border-radius: 18px; padding: clamp(14px, 2.4vh, 24px) clamp(16px, 1.8vw, 28px); text-align: left; box-shadow: 0 20px 50px rgba(14, 21, 51, .25); }
.tr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14px; color: #B8C0D9; }
.tr-head b { color: #fff; font-size: 16px; }
.tr-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0E1533; background: #F0996A; padding: 3px 8px; border-radius: 999px; }
.tr-due { margin-left: auto; color: #F0996A; font-weight: 600; }
.tr-steps { list-style: none; margin: clamp(12px, 2vh, 20px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.tr-steps::before { content: ""; position: absolute; left: 7px; right: 7px; top: 7px; height: 2px; background: rgba(255,255,255,.15); }
.tr-steps li { position: relative; display: flex; flex-direction: column; gap: 3px; padding-top: 24px; font-size: 13px; }
.tr-steps .dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #2A3352; border: 2px solid #4A5578; }
.tr-steps li.done .dot { background: #2F9E6F; border-color: #2F9E6F; }
.tr-steps li.now .dot { background: #F0996A; border-color: #F0996A; box-shadow: 0 0 0 5px rgba(240,153,106,.25); }
.tr-steps b { color: #fff; font-size: 14px; }
.tr-steps li:not(.done):not(.now) b { color: #A9B2CC; }
.tr-steps small { color: #A9B2CC; font-size: 12px; line-height: 1.35; }
@media (max-width: 860px) { .tr-steps { grid-template-columns: 1fr 1fr; } .tr-steps::before { display: none; } .tr-due { margin-left: 0; } }
@media (prefers-reduced-motion: no-preference) { .tr-steps li.now .dot { animation: pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 50% { box-shadow: 0 0 0 9px rgba(240,153,106,0); } } }

/* =====================================================================
   v6 — company-first hero, both apps shown together
   ===================================================================== */
@media (min-width: 901px) { .hero-v6 .hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important; } }
@media (max-width: 900px) { .hero-v6 .hero-grid { grid-template-columns: 1fr !important; } .stack-tag { font-size: 11px; padding: 5px 9px; } .stack-tag b { font-size: 13px; } }
.hero-v6 h1 { font-size: clamp(32px, min(3.8vw, 6.6vh), 68px) !important; }
.hero-stack { position: relative; aspect-ratio: 1 / .7; min-width: 0; width: 100%; }
.stack-card { position: absolute; width: 82%; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(14, 21, 51, .08); box-shadow: 0 30px 70px rgba(20, 30, 80, .20); transition: transform .4s ease, box-shadow .4s ease; text-decoration: none; }
.stack-card img { display: block; width: 100%; height: auto; }
.stack-card.back { top: 0; right: 0; transform: scale(.96); transform-origin: top right; opacity: .97; }
.stack-card.front { bottom: 0; left: 0; }
.stack-card:hover, .stack-card:focus-visible { transform: translateY(-6px); box-shadow: 0 40px 90px rgba(20, 30, 80, .28); z-index: 3; text-decoration: none; }
.stack-card.back:hover, .stack-card.back:focus-visible { transform: scale(.96) translateY(-6px); }
.stack-tag { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; background: #0E1533; color: #B8C0D9; border-radius: 10px; padding: 7px 12px; font-size: 12px; line-height: 1.25; box-shadow: 0 10px 24px rgba(14, 21, 51, .35); }
.stack-tag b { color: #fff; font-size: 14px; }
.stack-card.back .stack-tag { left: auto; right: 12px; bottom: auto; top: 12px; }
@media (min-width: 901px) and (min-height: 560px) {
  .hero-stack { width: min(100%, calc((100svh - var(--nav-h) - 2 * var(--fit-pad) - 10px) / .7)); justify-self: end; }
}
@media (max-width: 900px) {
  .hero-stack { margin-top: 12px; }
}