.nav { gap: 22px; }
.language-picker { position: relative; flex-shrink: 0; font-size: 12px; }
.language-picker summary { display: flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 650; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.language-picker nav { position: absolute; right: 0; top: calc(100% + 8px); width: 180px; background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 48px #2026261a; }
.language-picker nav a { display: block; border-radius: 4px; padding: 7px 12px; }
.language-picker nav a:hover, .language-picker [aria-current] { background: var(--paper); color: #a43b10; }
summary:focus-visible { outline: 3px solid #b54314; outline-offset: 4px; }
.footer-languages { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 24px 0; border-top: 1px solid #ffffff25; font-size: 12px; }
.footer-languages [aria-current] { color: var(--accent); }
.plan-section { background: var(--paper); }
.feature-screenshot { display: block; overflow: hidden; border-radius: 9px; border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 40px #2026260a; }
.feature-screenshot img { width: 100%; height: auto; }
.detail-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 38px; margin-top: 40px; }
.detail-columns article { padding-top: 24px; border-top: 1px solid #c9cec4; }
.detail-columns h3 { font-size: 23px; margin-bottom: 16px; }
.detail-columns p { color: var(--muted); font-size: 14px; }
.agent-question { display: flex; align-items: center; gap: 22px; border: 1px solid #ffffff35; border-radius: 10px; padding: 24px 30px; margin: 0 0 40px; background: #ffffff08; }
.agent-question > span { font-size: 36px; color: var(--accent); }
.agent-question p { color: #a9b7ae; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.agent-question blockquote { margin: 8px 0 0; font-size: clamp(19px,2vw,29px); line-height: 1.3; letter-spacing: -.02em; }
.sharing-section { background: #f7f8f3; }
.sharing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; }
.sharing-grid article { display: flex; flex-direction: column; align-items: flex-start; padding-top: 24px; border-top: 1px solid #cdd1c6; }
.sharing-label { color: #9d3e18; font-size: 11px; font-weight: 700; letter-spacing: .13em; margin-bottom: 20px; }
.sharing-grid h3 { font-size: 27px; margin-bottom: 18px; }
.sharing-grid p { font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.sharing-grid .text-link { margin-top: auto; font-size: 12px; }
.sharing-images { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 46px; }
.sharing-images figure { margin: 0; min-width: 0; }
.sharing-images .feature-screenshot { aspect-ratio: 1.85; display: flex; align-items: center; }
.sharing-images .feature-screenshot img { object-fit: contain; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.connection-grid article { border: 1px solid var(--line); padding: 34px; border-radius: 8px; background: white; }
.connection-symbol { color: #b54314; font-size: 32px; }
.connection-grid h3 { margin: 16px 0; font-size: 34px; }
.connection-grid p { color: var(--muted); font-size: 15px; margin-bottom: 26px; max-width: 480px; }
.provider-section { margin-top: 60px; }
.provider-section > h3 { margin-bottom: 30px; font-size: 27px; max-width: 600px; }
.provider-section .integration-options { grid-template-columns: repeat(5,minmax(0,1fr)); }
.provider-section .integration-options article { min-height: 148px; }
.provider-section .integration-options article > span { font-size: 11px; line-height: 1.5; }
.provider-logo { width: min(100%,144px); height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.provider-logo img { max-width: 130px; }
/* Frame the supplied logos without changing their original image files. */
.provider-logo.provider-padded img, .provider-logo.provider-unit4 img { width: 100%; max-width: none; height: 100%; object-fit: cover; }
.provider-logo.provider-unit4 img { transform: scale(1.35); }
.provider-section .integration-options > p { font-size: 12px; }
.gallery-variants { display: flex; justify-content: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.gallery-variants[hidden] { display: none; }
.gallery-variants button { min-height: 44px; padding: 9px 20px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.gallery-variants button[aria-pressed="true"] { border-color: #aa3b10; color: #922f0a; background: #fff0e8; }
.gallery-variants button:focus-visible { outline: 3px solid #b54314; outline-offset: 3px; }
.gallery-main.is-portrait img { object-position: center; }
.gallery-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.gallery-categories button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); font: inherit; font-size: 13px; }
.gallery-categories button span { font-size: 10px; opacity: .7; }
.gallery-categories button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: white; }
.gallery-thumbs { grid-template-columns: repeat(5,minmax(0,1fr)); }
.gallery-thumb[hidden] { display: none; }
.lightbox-image-wrap img.is-portrait { width: min(100%,420px); margin-inline: auto; }
.employee-section { background: #f2f4eb; border-block: 1px solid #dce2cf; }
.employee-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px,7vw,110px); align-items: center; }
.employee-visual { margin: 0; text-align: center; min-width: 0; padding: 24px 0; background: radial-gradient(ellipse at center,#dae3c7 0,transparent 68%); }
.employee-phone { display: block; width: min(100%,330px); margin-inline: auto; overflow: hidden; border: 8px solid #252d2c; border-radius: 38px; background: #f8fafc; box-shadow: 0 30px 60px #24302828,0 3px 0 #66736a inset; }
.phone-speaker { height: 24px; display: grid; place-items: center; background: #f8fafc; }
.phone-speaker span { display: block; width: 66px; height: 6px; border-radius: 10px; background: #252d2c; }
.phone-home { height: 20px; display: grid; place-items: center; background: #fff; }
.phone-home span { width: 86px; height: 4px; background: #252d2c; border-radius: 8px; }
.employee-screen { margin: 0; aspect-ratio: 390 / 720; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #99a5a0 #f8fafc; }
.employee-screen[hidden] { display: none; }
.employee-screen:focus-visible { outline-offset: -3px; }
.employee-phone img { display: block; width: 100%; max-width: 100%; height: auto; }
.employee-capture { width: 100%; overflow: hidden; }
.employee-phone-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 58px; background: #fff; border-top: 1px solid #e2e8f0; }
.employee-phone-nav button { min-width: 0; min-height: 58px; border: 0; border-top: 2px solid transparent; background: #fff; padding: 7px 2px 5px; display: flex; flex-direction: column; align-items: center; gap: 5px; color: #475569; font-size: 8px; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere; }
.employee-phone-nav button[aria-pressed="true"] { color: #b54314; border-top-color: #ed6c36; background: #fffaf7; }
.employee-phone-nav button:focus-visible { outline-offset: -3px; }
.employee-phone-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.employee-scroll-hint { max-width: 330px; margin: 22px auto 0; font-size: 12px; color: #4c614b; }
.desktop-links { gap: 18px; }
.desktop-links a { white-space: nowrap; }
.employee-caption { max-width: 360px; margin: 22px auto 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.employee-copy { min-width: 0; }
.employee-current-description { display: none; }
.employee-copy h2 { max-width: 650px; margin-bottom: 26px; }
.employee-views { display: grid; gap: 10px; margin: 28px 0; }
.employee-choice { display: flex; align-items: flex-start; gap: 15px; padding: 16px 18px; border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.employee-choice[aria-pressed="true"] { border-color: #b4c297; background: #fff; box-shadow: 0 5px 18px #24302808; }
.employee-choice-number { padding-top: 3px; font-size: 11px; color: #66734f; }
.employee-choice strong { display: block; font-size: 19px; margin-bottom: 5px; }
.employee-choice strong + span { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }
.employee-choice-arrow { margin-left: auto; color: #66734f; }
.employee-choice:focus-visible { outline: 3px solid #b54314; outline-offset: 3px; }
.price-profile-link { font-size: 12px; margin: 0 0 20px; text-decoration: underline; text-underline-offset: 4px; }
.price-card h3 { font-size: clamp(24px,2.1vw,32px); overflow-wrap: anywhere; }
.hero h1 { overflow-wrap: anywhere; }
.function-grid article { min-width: 0; }
@media (max-width: 1280px) {
  .desktop-links { gap: 18px; }
}
@media (min-width: 1024px) and (max-width: 1050px) {
  .desktop-links { display: flex; }
  .menu-toggle { display: none; }
  .nav-actions { margin-left: 0; }
}
@media (min-width: 1024px) and (max-width: 1150px) {
  .nav { gap: 16px; }
  .desktop-links, .nav-actions { gap: 14px; }
  .nav-actions .button { display: none; }
}
@media (max-width: 1050px) {
  .gallery-thumbs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .language-picker { margin-left: auto; }
  .nav-actions { margin-left: auto; }
  .nav-actions + .language-picker { margin-left: 0; }
  .sharing-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
  .provider-section .integration-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-columns { gap: 24px; }
}
@media (max-width: 760px) {
  .gallery-thumbs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-categories { gap: 6px; }
  .gallery-categories button { padding: 9px 12px; font-size: 12px; }
  .employee-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .employee-copy { display: contents; }
  .employee-views { order: 1; grid-template-columns: 1fr 1fr; margin: 24px 0 12px; }
  .employee-choice { padding: 12px; border-color: #dce2cf; min-height: 48px; align-items: center; }
  .employee-choice strong { font-size: 15px; margin: 0; }
  .employee-choice-number, .employee-choice-arrow, .employee-choice strong + span { display: none; }
  .employee-current-description { display: block; order: 2; color: var(--muted); font-size: 13px; min-height: 64px; }
  .employee-visual { order: 3; padding: 18px 0 26px; }
  .employee-copy > .button { order: 4; align-self: flex-start; }
  .nav { gap: 16px; }
  .nav-actions { display: none; }
  .nav-actions + .language-picker { margin-left: auto; }
  .detail-columns { grid-template-columns: 1fr; gap: 25px; }
  .detail-columns article { padding-top: 20px; }
  .detail-columns h3 { font-size: 23px; margin-bottom: 10px; }
  .agent-question { padding: 20px; gap: 15px; }
  .agent-question > span { font-size: 28px; }
  .sharing-grid, .sharing-images, .connection-grid { grid-template-columns: 1fr; }
  .sharing-grid { gap: 28px; }
  .sharing-grid h3 { font-size: 26px; margin-bottom: 12px; }
  .sharing-label { margin-bottom: 12px; }
  .sharing-grid p { margin-bottom: 18px; }
  .connection-grid article { padding: 26px; }
  .connection-grid h3 { font-size: 29px; }
  .provider-section .integration-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .price-card h3 { font-size: 30px; }
  .lightbox-controls { flex-wrap: wrap; justify-content: space-between; }
  .lightbox-controls p { order: 3; flex-basis: 100%; text-align: center; }
  .hero h1 { font-size: clamp(36px,8.4vw,55px); }
}

/* Readability floor: no visible marketing text under 12px, captions 13px,
   and body copy in feature lists and price cards at 15px. The simulated
   phone navigation inside the employee mockup is exempt. */
body .eyebrow, body .hero .eyebrow, .product-bar span, .hero-bottom span, .hero-bottom a, .item-number, .function-number,
.agent-question p, .gallery-categories button span, .gallery-toolbar span, .gallery-toolbar .gallery-expand,
.gallery-controls span, .gallery-thumb span, .sharing-label, .plan-label, .employee-choice-number,
.founder-details span, .footer-bottom span, .provider-section .integration-options article > span { font-size: 12px; }
.image-note, .employee-caption, .proof-inner .text-link, .provider-section .integration-options > p { font-size: 13px; }
.function-group summary small { font-size: 14px; }
.function-grid p, .price-card li { font-size: 15px; line-height: 1.55; }

.desktop-links a.is-active { color: #b54314; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.gallery-thumb > .thumb-image { background: #e6e9e0; }

/* Touch targets: at least 44px tall on phones, without changing text size. */
@media (max-width: 760px) {
  .brand { min-height: 44px; }
  .menu-toggle { width: 44px; height: 44px; }
  .language-picker a, .site-footer nav a, .footer-contact a { display: flex; align-items: center; min-height: 44px; }
  .footer-languages a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .hero-bottom a, .text-link, .gallery-expand, .price-profile-link, .api-page-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .gallery-controls .gallery-prev, .gallery-controls .gallery-next { width: 44px; height: 44px; }
  .api-details summary { min-height: 44px; }
}

/* Shorter phone layout: swipeable rows for thumbnails and price cards, feature
   groups start collapsed (see main.js), the sharing screenshots stay in the
   gallery, and the plan screenshot is cropped so its text is legible. */
@media (max-width: 760px) {
  .gallery-thumbs, .pricing-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin-inline: -16px; padding: 4px 16px 12px; scrollbar-width: thin; }
  .gallery-thumbs { grid-auto-columns: 42%; gap: 10px; }
  .pricing-grid { grid-auto-columns: 84%; gap: 12px; align-items: stretch; }
  .gallery-thumb, .price-card { scroll-snap-align: start; }
  .sharing-images { display: none; }
  .plan-section .feature-screenshot { aspect-ratio: 4 / 3; }
  .plan-section .feature-screenshot img { height: 100%; object-fit: cover; object-position: left top; }
  .provider-section .integration-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .provider-section .integration-options article { min-height: 118px; padding-inline: 6px; }
}

/* Strip under the hero: a dark band that carries on from the hero, with three
   equal statements separated by fine rules and an orange accent on each. */
.proof-strip { background: #1b2322; border-bottom: 0; padding: 56px 0 60px; color: #fff; }
.proof-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 0; }
.proof-stat { min-width: 0; padding: 4px 40px; border-left: 1px solid #ffffff1f; }
.proof-stat:first-child { padding-left: 0; border-left: 0; }
.proof-stat:last-child { padding-right: 0; }
.proof-stat::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: 22px; border-radius: 2px; background: var(--accent); }
.proof-value { font-size: clamp(28px,2.7vw,40px); font-weight: 550; letter-spacing: -0.045em; line-height: 1.08; color: #fff; overflow-wrap: break-word; hyphens: auto; }
.proof-label { margin-top: 8px; font-size: 15px; font-weight: 600; color: #ff915b; }
.proof-text { margin-top: 14px; max-width: 330px; font-size: 15px; line-height: 1.55; color: #c3d0c2; }
.hero-description strong { color: #fff; font-weight: 650; }

/* Tailoring section: white, between the paper-coloured integrations and pricing. */
.tailor-section { background: #fff; }
.pricing { background: var(--paper); }
.tailor-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 36px; }
.tailor-grid .benefit { min-width: 0; }
.tailor-grid .benefit h3 { padding-right: 28px; overflow-wrap: break-word; hyphens: auto; }
.tailor-cta { display: flex; align-items: center; gap: 24px; margin-top: 54px; }
.tailor-cta p { color: var(--muted); font-size: 15px; max-width: 520px; }
.pricing-note { margin-top: 28px; font-size: 13px; }
@media (max-width: 1050px) {
  .tailor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .tailor-grid { grid-template-columns: 1fr; gap: 30px; }
  .tailor-cta { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 40px; }
}
@media (max-width: 1050px) {
  .proof-stat { padding-inline: 24px; }
}
@media (max-width: 640px) {
  .proof-strip { padding: 40px 0 44px; }
  .proof-stats { grid-template-columns: 1fr; }
  .proof-stat, .proof-stat:first-child, .proof-stat:last-child { padding: 0; border-left: 0; }
  .proof-stat + .proof-stat { border-top: 1px solid #ffffff1f; margin-top: 26px; padding-top: 26px; }
  .proof-stat::before { margin-bottom: 16px; }
  .proof-value { font-size: 30px; }
  .proof-text { margin-top: 10px; max-width: none; }
}