/* Readable at the size it is displayed. Responsive layouts keep the type scale. */
:root {
  --text-body: 17px;
  --text-action: 16px;
  --text-ui: 14px;
  --text-note: 13px;
}

.header { gap: 34px; }
.desktop-nav { font-size: var(--text-action); gap: 24px; }
.quiet-link { font-size: 15px; }
.header-actions { gap: 22px; }
.button, .button.compact, .hero .button, .real-product-copy .button, .closing .button {
  font-size: var(--text-action);
  min-height: 48px;
}
.text-link{
  font-size: 15px;
  min-height: 40px;
}
/* Original rounded introduction above the hero title, at a readable size. */
.eyebrow-pill { font-size: 14px; min-height: 38px; padding: 8px 14px; }
.hero-intro { font-size: 18px; }
.hero-note { font-size: 15px; line-height: 1.6; margin-top: 18px; }
.product-tabs { max-width: 860px; width: fit-content; padding: 6px; gap: 6px; }
.product-tabs [role=tab] { font-size: 16px; min-height: 50px; padding: 12px 19px; gap: 10px; }
.product-tabs [role=tab] > .icon { width: 18px; height: 18px; }

.section-heading h2, .real-product-copy h2, .closing h2 { margin-top: 0; }
.real-product-copy > p:not(.kicker),
.roles-grid p {
  font-size: var(--text-body);
  line-height: 1.7;
}

/* Framed feature cards; product.css styles their platform screenshots. */
#how-it-works .section-heading { grid-column: 1 / -1; }
.journey-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  margin-top: 44px;
}
.journey-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.journey-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 12px 12px;
}
.journey-card h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.journey-card-copy > p { font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

@media (min-width: 651px) and (max-width: 1050px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .journey-card-copy { align-self: center; }
  .journey-card h3 { font-size: 21px; }
}
@media (max-width: 650px) {
  .journey-grid { grid-template-columns: 1fr; gap: 8px; margin-top: 32px; }
  .journey-card { grid-column: 1 / -1; }

  .journey-card-copy { padding: 14px 12px 12px; }
  .journey-card h3 { font-size: 20px; }
}
 .roles-grid h3 { font-size: 24px; line-height: 1.2; }
.roles-grid h3 { margin-top: 0; }
.role-icon { margin-bottom: 18px; }
.mini-plan, .mini-session, .mini-guidelines { min-height: 220px; height: auto; }
.mini-plan > strong { margin-top: 6px; font-size: 25px; }
.mini-plan > div { margin-top: 24px; }
.tag, .mini-session-tag { font-size: var(--text-note); }
.mini-session-bubble { font-size: 15px; left: 16px; top: 38px; padding: 12px; }
.mini-session > img { width: 185px; }
.mini-session-tag { bottom: 20px; left: 18px; }
.mini-guidelines { padding: 22px 14px; }
.mini-guidelines > strong { font-size: 21px; }
.mini-guidelines > p { font-size: var(--text-ui); margin-top: 10px; }
.document-status { font-size: 12px; white-space: normal; line-height: 1.5; margin-top: 16px; }
.document-status .icon { width: 14px; height: 14px; }
.capability-list { font-size: 15px; line-height: 1.6; }
.capability-list .icon { width: 18px; height: 18px; }
.screen-label { font-size: 14px; padding: 8px 11px; }
.expand-image { font-size: 14px; min-height: 40px; }
.visual-caption { font-size: var(--text-note); line-height: 1.6; flex-wrap: wrap; }
.closing p:not(.kicker) { font-size: var(--text-body); }
.closing-note { font-size: 14px; line-height: 1.6; }
.closing-contact { font-size: 15px; min-height: 38px; }
.footer { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; }
.footer > p { font-size: var(--text-note); }

/* The workspace is a usable interface, not a shrunken screenshot. */

.workspace-panel { padding: 30px 28px; }

@media (max-width: 1100px) {
  .header { padding-inline: 26px; gap: 24px; }
  .desktop-nav { gap: 20px; font-size: 15px; }
  .header-actions .quiet-link { display: none; }

  .real-product-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 38px; }
  .footer { grid-template-columns: auto 1fr; gap: 22px 32px; }
  .footer > a:last-child { justify-self: end; }
}

@media (max-width: 900px) {
  .header .button.compact { font-size: 15px; }
  .product-tabs { width: 100%; }
  .product-tabs [role=tab] { font-size: 15px; padding-inline: 12px; gap: 7px; }

  .workspace-panel { padding: 28px 24px; }

  .real-product-grid { grid-template-columns: 1fr; gap: 32px; }
  .real-product-copy > p:not(.kicker) { max-width: 540px; }
  .intro-section { display: block; }
  .mini-plan, .mini-session, .mini-guidelines { grid-column: 2; grid-row: 1 / 5; min-height: 240px; }
  .roles-grid { gap: 25px; }
  .roles-grid h3 { font-size: 22px; }
  .roles-grid p { font-size: 16px; }
}

@media (max-width: 650px) {
  .header { padding-inline: 18px; gap: 10px; min-height: 76px; }
  .wordmark { width: 120px; }
  .header-actions .button { font-size: 14px; min-height: 44px; padding-inline: 12px; gap: 9px; }
  .header-actions .button > .icon { width: 15px; height: 15px; }
  .menu-toggle { min-height: 44px; min-width: 35px; }
  .mobile-nav a { font-size: 17px; }
  .hero-intro { font-size: 18px; line-height: 1.55; max-width: 345px; }
  .hero-actions { flex-direction: column; max-width: 320px; margin-inline: auto; gap: 10px; }
  .hero .button { font-size: 16px; min-height: 50px; padding-inline: 20px; gap: 18px; }
  .hero-note { font-size: 14px; max-width: 310px; margin-inline: auto; line-height: 1.65; }
  .product-tabs { width: 100%; max-width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 5px; gap: 5px; overflow: visible; }
  .product-tabs [role=tab] { font-size: 15px; min-height: 48px; padding: 11px 8px; gap: 8px; }
  .product-tabs [role=tab] > .icon { width: 16px; height: 16px; }
  .product-wrap { margin-top: 30px; }

  .workspace-panel { padding: 24px 16px; }

  .hero-landscape { height: 1450px; }

  .section-heading h2, .closing h2 { margin-top: 0; }
  .mini-plan, .mini-session, .mini-guidelines { width: 100%; min-height: 220px; height: auto; order: -1; margin-bottom: 22px; }
  .mini-plan { padding: 24px; }
  .mini-plan > strong { font-size: 27px; }
  .mini-plan > div > .tag { font-size: 13px; padding: 4px 8px; }
  .mini-session-bubble { font-size: 15px; top: 40px; left: 18px; padding: 12px; }
  .mini-session-tag { font-size: 13px; bottom: 20px; left: 20px; }
  .mini-session > img { width: 180px; }
  .mini-guidelines { padding: 25px 18px; }
  .mini-guidelines > strong { font-size: 22px; }
  .mini-guidelines > p { font-size: 14px; }
  .document-status { font-size: 12px; margin-top: 16px; padding: 5px 8px; gap: 5px; }
  .document-status .icon { width: 14px; height: 14px; }
  .real-product-copy > p:not(.kicker) { font-size: 17px; }
  .capability-list { font-size: 15px; gap: 16px; }
  .real-product-copy .button { font-size: 15px; }
  .screen-label { font-size: 14px; }
  .expand-image { font-size: 13px; }
  .visual-caption { display: block; font-size: 13px; line-height: 1.7; }
  .visual-caption > span { display: block; }
  .roles-grid > article { padding-top: 24px; }
  .roles-grid h3 { font-size: 24px; margin-top: 0; }
  .roles-grid p { font-size: 17px; }
  .closing p:not(.kicker) { font-size: 17px; max-width: 300px; }
  .closing .button { font-size: 16px; }
  .closing-note { font-size: 14px; }
  .closing-contact { font-size: 15px; }
  .footer { grid-template-columns: 1fr; padding-inline: 24px; gap: 18px; }
  .footer > p { font-size: 13px; justify-self: start; }
}

@media (max-width: 360px) {
  .header { padding-inline: 12px; gap: 7px; }
  .wordmark { width: 105px; }
  .header-actions .button { font-size: 14px; padding-inline: 10px; gap: 7px; }
  .menu-toggle { min-width: 32px; }
  .product-tabs [role=tab] { font-size: 14px; gap: 6px; padding-inline: 6px; }
  .hero-intro { font-size: 18px; }
  .hero-note { font-size: 14px; }
}

/* The hero and desktop navigation share a wider frame than the content. */
:root { --hero-width: 1600px; }
.hero {
  width: min(calc(100% - 48px), var(--hero-width));
  max-width: var(--hero-width);
  margin-inline: auto;
}
@media (min-width: 1101px) {
  .header {
    width: min(calc(100% - 48px), var(--hero-width));
    max-width: var(--hero-width);
    margin-inline: auto;
    padding-inline: 14px;
  }
}
@media (max-width: 650px) {
  .hero { width: calc(100% - 24px); margin-inline: auto; }
}

/* Founderz brings the company story and training figure into the closing banner. Its painted background (412 KB) sits
   at the end of the page, so it waits until site.js marks the section as near (data-defer-bg); until then, and without
   JavaScript, the banner shows its flat lavender. */
.closing.closing-founderz { padding: 58px 24px 60px; scroll-margin-top: 38px; background: #e4e1f5; }
.closing-founderz .closing-landscape {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.closing-founderz.is-near .closing-landscape { background-image: url('founderz-lavender.webp?v=785dcfa0af59'); }
.founderz-closing-logo { display: block; width: 196px; max-width: 70%; height: auto; margin: 0 auto 25px; }
.closing.closing-founderz h2 { max-width: 850px; margin: 0 auto; }
.closing.closing-founderz .founderz-summary { max-width: 630px; margin: 22px auto 0; color: #425d4a; font-size: 18px; line-height: 1.6; }
.closing.closing-founderz .founderz-reach { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; max-width: 650px; margin: 22px auto 0; color: var(--ink); }
.founderz-reach strong { font-size: 40px; font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.founderz-reach span { font-size: 18px; line-height: 1.5; }
.closing.closing-founderz .button { margin-top: 26px; }
@media (max-width: 650px) {
  .closing.closing-founderz { padding: 40px 22px 42px; scroll-margin-top: 24px; }
  .founderz-closing-logo { width: 165px; margin-bottom: 24px; }
  .closing.closing-founderz h2 { font-size: clamp(28px, 7.7vw, 36px); line-height: 1.12; }
  .closing.closing-founderz .founderz-summary { max-width: 350px; font-size: 17px; line-height: 1.6; margin-top: 20px; }
  .closing.closing-founderz .founderz-reach { flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; }
  .founderz-reach strong { font-size: 38px; }
  .founderz-reach span { font-size: 17px; }
}

/* Keep the single illustrated scene below the text on narrow screens. */
@media (max-width: 1000px) {
  .closing.closing-founderz { padding-bottom: clamp(145px, calc(33.333vw + 32px), 310px); }
  .closing-founderz .closing-landscape {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    background-size: 100% auto;
    background-position: center bottom;
    mask-image: linear-gradient(transparent, #000 16%, #000);
  }
}

/* Preserve the whole continuous table when the banner becomes very wide. */
@media (min-width: 1001px) {
  .closing.closing-founderz {
    min-height: calc((100vw - 24px) / 3);
    display: grid;
    align-content: center;
  }
}