/* =========================================================
Streamline · site components for the full rebuild.
Extends tokens.css + main.css (same design system); only adds
components the locked content needs.
========================================================= */
/* ---------- Page wipe between pages (gable-edged) ---------- */
.page-wipe { position: fixed; inset: 0; z-index: 170; background: #0f3c52; pointer-events: none; clip-path: polygon(0% 100%, 0% 112%, 50% 100%, 100% 112%, 100% 100%); }
.page-wipe::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 32px; margin: -16px 0 0 -32px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2 12.5 12 2.5l10 10' fill='none' stroke='%23f79520' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html.wipe-in .page-wipe { clip-path: polygon(0% 0%, 100% 0%, 100% 112%, 50% 100%, 0% 112%); }
html.rm .page-wipe { display: none; }
/* ---------- Header: glass pill + mega menus ---------- */
.nav-pill { gap: 14px; }
.nav-main { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nm-item { position: relative; display: flex; align-items: center; }
.nm-top { font-family: var(--font-label); font-weight: 500; font-size: 14.5px; padding: 9px 12px; border-radius: var(--r-pill); color: var(--ink); transition: background var(--d-hover), color var(--d-hover); }
.nm-top:hover, .nm-item:focus-within > .nm-top { background: color-mix(in oklch, var(--ink) 9%, transparent); }
.nm-top[aria-current="page"] { background: color-mix(in oklch, var(--ink) 11%, transparent); }
.nm-caret { width: 22px; height: 30px; margin-left: -8px; border: 0; background: none; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; border-radius: 6px; }
.chev { width: 10px; height: 10px; transition: transform var(--d-ui) var(--ease-out-expo); }
.nm-item:hover .chev, .nm-item.open .chev { transform: rotate(180deg); }
/* Dropdowns. Menus with 3+ groups (Features, Case Studies) span the whole pill; smaller ones sit under their item. */
.nav-pill { position: relative; }
.nav-main, .nm-item { align-self: stretch; } /* items fill the pill's height, so every dropdown hangs the same distance below it */
.nm-static { position: static; }
span.nm-top { cursor: default; }
/* The hover pill wraps the dropdown caret too: the label makes room on its right and the caret sits inside it */
.has-menu > .nm-top { padding-right: 30px; }
.has-menu > .nm-caret { position: relative; margin-left: -28px; margin-right: 6px; }
.nm-item:hover > .nm-top, .nm-item.open > .nm-top { background: color-mix(in oklch, var(--ink) 9%, transparent); }
@media (max-width: 1280px) { .has-menu > .nm-top { padding-right: 27px; } .has-menu > .nm-caret { margin-left: -25px; margin-right: 3px; } }
.mega { position: absolute; z-index: 2; top: calc(100% + 10px); left: -20px; min-width: 300px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--d-hover), transform var(--d-ui) var(--ease-out-expo), visibility 0s linear var(--d-hover); }
.mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.mega-full { left: 0; right: 0; }
.mega-wide:not(.mega-full) { width: max-content; }
.nm-item:hover .mega, .nm-item.open .mega, .nm-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-inner { background: #ffffff; color: #0f3c52; border: 1px solid rgb(15 60 82 / .1); border-radius: 22px; box-shadow: 0 2px 6px rgb(8 34 47 / .06), 0 40px 80px -30px rgb(8 34 47 / .45); padding: 10px; display: flex; gap: 10px; max-height: calc(100svh - 120px); overflow: auto; }
.mega-cols { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; padding: 14px 8px 10px; }
.mega-wide .mega-cols { grid-template-columns: repeat(var(--cols), minmax(200px, auto)); }
.mega-group { display: flex; flex-direction: column; min-width: 0; }
.mega-group-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #477901; }
.mega-group-title::before { content: ""; width: 14px; height: 8px; flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2 12.5 12 2.5l10 10' fill='none' stroke='%238cc540' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
a.mega-group-title:hover { text-decoration: underline; text-underline-offset: .2em; }
.mega-group-desc { margin: 6px 0 0; padding: 0 12px; font-size: 13px; line-height: 1.4; color: #5b7380; }
.mega-group > .mega-list { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgb(15 60 82 / .08); }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 1px; min-width: 0; }
.mega-list a { position: relative; display: block; padding: 7px 30px 7px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.35; color: #0f3c52; transition: background var(--d-micro), color var(--d-micro); }
.mega-list a::after { content: "→"; position: absolute; right: 12px; top: 7px; color: #477901; opacity: 0; transform: translateX(-4px); transition: opacity var(--d-micro), transform var(--d-hover) var(--ease-out-expo); }
.mega-list a:hover, .mega-list a:focus-visible { background: #f2f7ec; }
.mega-list a:hover::after, .mega-list a:focus-visible::after { opacity: 1; transform: none; }
.mega-list a[aria-current="page"] { background: #f2f7ec; font-weight: 600; }
/* Promo card (live's highlighted item: Leo AI, "5, 50, Or 500 units") */
.mega-promo { flex: 0 0 280px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 220px; padding: 22px; border-radius: 16px; color: #ffffff; text-decoration: none; position: relative; overflow: hidden; isolation: isolate;
background: radial-gradient(110% 80% at 100% 0%, rgb(140 197 64 / .38), transparent 62%), radial-gradient(90% 70% at 0% 100%, rgb(247 149 32 / .18), transparent 60%), #0f3c52; transition: transform var(--d-hover) var(--ease-out-expo), box-shadow var(--d-hover); }
.mega-promo::before { content: ""; position: absolute; top: 22px; left: 22px; width: 40px; height: 22px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M2 12.5 12 2.5l10 10' fill='none' stroke='%23f79520' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.mega-promo::after { content: ""; position: absolute; z-index: -1; right: -34px; top: 18px; width: 190px; height: 190px; opacity: .09; background: url("../assets/img/Streamline_Mark_Light.svg") center / contain no-repeat; transition: transform var(--d-ui) var(--ease-out-expo); }
.mega-promo:hover::after { transform: translateX(-6px) rotate(-4deg); }
.mega-promo:hover, .mega-promo:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgb(8 34 47 / .6); }
.promo-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.promo-title .arr { width: 16px; height: 16px; margin-left: 6px; vertical-align: -2px; color: #8cc540; transition: transform var(--d-hover) var(--ease-out-expo); }
.mega-promo:hover .arr, .mega-promo:focus-visible .arr, .mob-promo:hover .arr { transform: translateX(4px); }
.promo-text { display: block; font-size: 14px; line-height: 1.45; color: #b9cfdb; }
.promo-title .nowrap { white-space: nowrap; }
@media (max-width: 1280px) {
.mega-promo { flex-basis: 200px; padding: 18px; } .promo-title { font-size: 17px; }
.mega-cols { gap: 4px; padding-inline: 2px; }
.mega-group-title { font-size: 11px; letter-spacing: .06em; padding-inline: 10px; }
.mega-group-desc { padding-inline: 10px; }
.mega-list a { padding: 6px 20px 6px 10px; font-size: 14px; }
.mega-list a::after { right: 6px; top: 6px; }
}
.nav-cta { flex-shrink: 0; }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-border); background: none; cursor: pointer; position: relative; }
.nav-burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--d-ui) var(--ease-out-expo); }
.nav-burger span:first-child { top: 17px; } .nav-burger span:last-child { top: 25px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-nav { position: fixed; inset: 0; z-index: 99; background: #0f3c52; color: #ffffff; padding: 100px var(--pad) calc(48px + env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mob-root { list-style: none; margin: 0; padding: 0; }
.mob-root > li { border-bottom: 1px solid rgb(255 255 255 / .12); }
.mob-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: 30px; letter-spacing: -0.02em; cursor: pointer; list-style: none; color: #ffffff; }
.mob-top::-webkit-details-marker { display: none; }
details[open] > .mob-top .chev { transform: rotate(180deg); }
.mob-list, .mob-sub ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.mob-list a { display: block; padding: 8px 0; color: #b9cfdb; font-size: 16px; }
.mob-list a:hover { color: #8cc540; }
.mob-sub { margin-top: 10px; padding-left: 14px; border-left: 1px solid rgb(255 255 255 / .15); }
.mob-sub-title { color: #8cc540 !important; font-weight: 600; }
p.mob-sub-title { margin: 0; padding: 8px 0 0; font-family: var(--font-label); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
.mob-sub-desc { margin: 2px 0 4px; font-size: 13.5px; color: rgb(255 255 255 / .55); }
.mob-list .mob-promo { display: grid; gap: 6px; margin-top: 14px; padding: 16px 18px; border-radius: 14px; color: #ffffff; background: radial-gradient(120% 90% at 100% 0%, rgb(140 197 64 / .25), transparent 60%), rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); }
.mob-promo .promo-title { font-size: 17px; }
.mob-cta { margin-top: 28px; }
body.mnav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
body.mnav-open .progress { visibility: hidden; }
@media (max-width: 1100px) {
.nav-main, .nav-cta { display: none; }
.nav-burger { display: block; margin-left: auto; }
.nav-pill { height: 58px; }
}
/* ---------- Photo gallery + lightbox ---------- */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.gal-item { display: block; position: relative; overflow: hidden; border-radius: 12px; background: #e8eef2; aspect-ratio: 400 / 284; }
.gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-ui) var(--ease-out-expo), filter var(--d-hover); }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.04); filter: brightness(1.05); }
.gal-item:focus-visible { outline: 3px solid #0b79b3; outline-offset: 2px; }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .gal-item { border-radius: 8px; } }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(6 22 31 / .94); color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgb(6 22 31 / .6); }
.lb-figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 56px 72px 16px; gap: 12px; }
.lb-figure img { max-width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; border-radius: 6px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .6); }
.lb-figure figcaption { display: flex; gap: 16px; align-items: baseline; justify-content: center; font-size: 14px; color: rgb(255 255 255 / .8); text-align: center; }
.lb-count { color: rgb(255 255 255 / .55); font-size: 12px; }
.lb-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .08); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; transition: background var(--d-micro); }
.lb-btn:hover, .lb-btn:focus-visible { background: rgb(255 255 255 / .2); }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); } .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 14px; top: 14px; font-size: 26px; }
@media (max-width: 640px) { .lb-figure { padding: 60px 8px 16px; } .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; } .lb-figure img { max-height: calc(100dvh - 170px); } }
/* ---------- Type scale inside content bands ---------- */
.band .h2, .phero-tail .h2, .showcase .h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); line-height: .98; margin: 0 0 .5em; }
.h3 { font-size: clamp(1.45rem, 2.3vw, 2.2rem); line-height: 1.05; }
.h4, .h5, .h6 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.h4 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); } .h5 { font-size: 1.2rem; } .h6 { font-size: 1.1rem; }
.h1x { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(2.2rem, 4.8vw, 4.2rem); line-height: 1; margin: 1.2em 0 .5em; }
.band h3, .band h4, .band h5, .band h6 { margin: 0 0 .5em; }
.band p { color: var(--ink-muted); }
.band strong { color: var(--ink); font-weight: 650; }
.inline-img { display: inline-block; max-height: 1.6em; vertical-align: middle; }
/* ---------- Page hero ---------- */
.phero { position: relative; overflow: clip; padding-block: 150px clamp(64px, 9vh, 110px); }
.phero .hero-title { font-size: clamp(2.6rem, 6.4vw, 6.4rem); line-height: .94; max-width: 17ch; margin: 0 0 var(--s-6); color: var(--ink); }
.phero .lead { max-width: 52ch; margin-bottom: var(--s-6); color: var(--ink-muted); }
.phero .hero-p { color: var(--ink-muted); max-width: 64ch; }
.phero-grid.layout-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: center; }
.phero-shot { margin: var(--s-8) auto 0; margin-bottom: 0; }
.phero-shot .hero-shot-tilt img { max-height: 620px; width: 100%; object-fit: contain; }
.phero-light-shot .hero-shot-tilt, .phero[data-theme="light"] .hero-shot-tilt { background: linear-gradient(160deg, #20607f, #0b3144 70%); }
.phero-tail { margin-top: var(--s-7); max-width: 900px; }
.phero-plain .prose { padding-top: 0; }
.phero-slim { padding-bottom: 40px; }
.phero-post .hero-title { font-size: clamp(2.2rem, 5vw, 4.6rem); max-width: 24ch; }
.post-date { color: var(--ink-muted); margin-top: 8px; }
.post-cats { margin-bottom: var(--s-5); }
.post-hero-img { max-width: 1000px; }
.home-kicker { font-family: var(--font-serif); font-style: italic; color: #8cc540; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1; margin: 0 0 .1em; }
.home-hero .hero-title { font-size: var(--fs-mega); line-height: .86; margin-bottom: var(--s-6); color: #ffffff; }
/* The kicker and the H1 sit side by side in the title block and flow as one headline (the H1 is only the main words) */
.home-title > .home-kicker, .home-title > h1 { display: inline; }
.home-title > h1 { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; padding: 0; }
.home-hero .hero-row { grid-template-columns: 1fr; }
.home-hero .hero-copy { grid-column: 1 / -1; }
.home-hero .hero-shot figcaption { margin-top: 20px; }
.shot-caption { display: inline-flex; gap: 12px; align-items: center; color: #ffffff; }
.shot-caption .gable { color: #8cc540; font-size: 22px; }
.home-hero + section::before { display: none; }
.home-hero + .band { padding-top: calc(var(--section-y) + 120px); }
.showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: var(--s-8); }
.show-card { border-radius: var(--r-media); overflow: hidden; background: rgb(255 255 255 / .05); border: 1px solid var(--line); display: flex; flex-direction: column; }
.show-media { margin: 0; background: #ffffff; aspect-ratio: 16 / 9; overflow: hidden; }
.show-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms var(--ease-out-expo); }
.show-card:hover .show-media img { transform: scale(1.04); }
.show-body { padding: 24px 28px 28px; }
.show-body .h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); margin-bottom: 16px; }
/* ---------- Bands ---------- */
.band { position: relative; }
.band-cta { padding: 0; }
.section-head { display: block; margin-bottom: var(--s-7); max-width: 900px; }
.section-head p { font-size: var(--fs-lead); line-height: 1.35; }
/* ---------- Prose ---------- */
.prose { max-width: 800px; }
.prose > * + * { margin-top: 1em; }
.prose p { max-width: 72ch; }
/* Intro paragraphs in a card band sit between a full-width heading and a full-width card row: span the same width
instead of the 62ch default, which left them stranded on the left (/features/leo-ai/ and 8 other pages) */
.band-cards .wrap > p { max-width: none; }
.prose .h2 { margin-top: 1.5em; }
.prose .h3, .prose .h4 { margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose-long { font-size: 16px; }
.prose-long .h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.prose a.u-link, .card-body a.u-link, .split-text a.u-link, .q-attr a.u-link { color: var(--accent-ink); }
.media { margin: var(--s-6) 0; border-radius: var(--r-media); overflow: hidden; background: #ffffff; border: 1px solid var(--line); }
.media img { width: 100%; height: auto; max-height: 640px; object-fit: contain; }
.media-inline { float: right; max-width: 280px; margin: 0 0 16px 24px; border: 0; background: none; }
.prose .media-inline img { max-height: 220px; }
.pull { margin: var(--s-6) 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--accent); }
.pull p { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--ink) !important; margin: 0 0 .4em; }
.pull strong { font-weight: 400; }
.pull .inline-img { float: right; max-height: 120px; margin: 0 0 12px 16px; }
.checklist { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 10px; }
.checklist > li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; color: var(--ink-muted); }
.checklist > li > .gable { color: var(--accent-ink); font-size: 14px; transform: rotate(90deg) translateX(-2px); }
.checklist .sublist { grid-column: 2; list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.checklist .sublist li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.checklist .sublist .gable { color: var(--ink-muted); font-size: 11px; transform: rotate(90deg); }
ol.steps { counter-reset: s; }
ol.steps > li > .gable { display: none; }
ol.steps > li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-label); font-size: 12px; color: var(--accent-ink); font-weight: 600; }
.table-wrap { overflow-x: auto; margin: var(--s-6) 0; border: 1px solid var(--line); border-radius: var(--r-card); background: #ffffff; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; }
.dtable th { text-align: left; font-family: var(--font-label); font-weight: 600; font-size: 13px; color: var(--ink); background: #f1f5f9; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.dtable td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink-muted); vertical-align: top; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable td:first-child { color: var(--ink); font-weight: 600; }
.tick { color: #477901; font-weight: 700; font-size: 1.1em; }
.cross { color: #b3261e; font-weight: 700; }
.pn-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; margin: var(--s-6) 0; }
.pn-links .motif-link { padding: 0; }
.pn-next { margin-left: auto; }
.todo { font-family: var(--font-label); font-size: 13.5px; color: #a84300 !important; background: rgb(199 80 0 / .07); border: 1px dashed rgb(199 80 0 / .45); border-radius: var(--r-chip); padding: 10px 14px; }
.todo-panel { display: grid; gap: 20px; justify-items: start; }
.todo-panel .vfacade { width: 100%; }
/* ---------- Split rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split + .split { margin-top: clamp(64px, 10vh, 120px); }
.split-solo { grid-template-columns: minmax(0, 820px); }
.split-media .media { margin: 0; box-shadow: var(--shadow-long); }
.split-media .media img { max-height: 560px; }
.split-text > :first-child { margin-top: 0; }
.split-text .cta-row { margin-top: var(--s-5); }
/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: var(--s-6) 0; }
.card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.card { position: relative; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; display: flex; flex-direction: column; gap: 10px; transition: transform var(--d-ui) var(--ease-out-expo), box-shadow var(--d-ui), border-color var(--d-hover); }
[data-theme="dark"] .card { background: rgb(255 255 255 / .05); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-long); }
.card-title { margin: 0 !important; font-size: clamp(1.2rem, 1.6vw, 1.5rem) !important; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; color: var(--ink); }
.card-body > :first-child { margin-top: 0; }
.card-body p:last-child { margin-bottom: 0; }
.card-body .cta-row { margin-top: auto; padding-top: 10px; }
.card-media { margin: -26px -26px 12px; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f5f9; border-radius: var(--r-card) var(--r-card) 0 0; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.grid-links { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.card-link { flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; }
.card-link:hover { background: #0f3c52; border-color: #0f3c52; }
.card-link:hover .card-title { color: #ffffff; }
.card-link:hover .card-arrow { color: #8cc540; transform: translate(2px, -2px); }
.card-arrow { margin-left: auto; color: var(--accent-ink); transition: transform var(--d-hover) var(--ease-out-expo); }
.f-icon { width: 40px; height: 40px; border-radius: 10px; background: #0f3c52; display: grid; place-items: center; flex-shrink: 0; color: #8cc540; }
.f-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-link:nth-child(3n+2) .f-icon { background: var(--brand-2); color: #ffffff; }
.card-link:nth-child(3n) .f-icon { background: var(--accent); color: #0f3c52; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card-stat { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0 0; }
.card-stat:hover { transform: none; box-shadow: none; }
.stat-big { font-family: var(--font-serif) !important; font-weight: 400 !important; font-size: clamp(2.8rem, 5vw, 4.6rem) !important; line-height: .95; letter-spacing: -0.02em; color: var(--accent-ink); margin: 0 !important; }
.stat-big strong { font-weight: 400; color: inherit; }
.grid-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card-tile { padding: 20px; gap: 16px; min-height: 130px; justify-content: space-between; }
.tile-n { color: var(--accent-ink); font-size: 12px; }
/* ---------- Quotes ---------- */
.qgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.qgrid-one { grid-template-columns: minmax(0, 900px); }
.qcard { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.qcard blockquote { margin: 0; }
.qcard blockquote p { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; color: var(--ink) !important; margin: 0 0 .5em; }
.qgrid-one .qcard blockquote p { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; }
.q-attr { display: flex; align-items: center; gap: 14px; }
.q-attr p { margin: 0; font-size: 14px; color: var(--ink-muted); }
.q-attr strong { color: var(--ink); }
.q-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.q-logo { max-height: 36px; width: auto; margin-left: auto; flex: 0 0 auto; }
.qtrack { grid-auto-columns: minmax(340px, 34%); }
.qtrack .qcard { scroll-snap-align: start; min-height: 320px; }
/* ---------- Posts / case studies ---------- */
.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; margin: var(--s-6) 0; }
.post-card { display: flex; flex-direction: column; gap: 12px; }
.post-media { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; background: #0f3c52; display: block; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out-expo); }
.post-card:hover .post-media img { transform: scale(1.04); }
.post-media-blank { display: grid; place-items: center; color: #8cc540; font-size: 40px; background: linear-gradient(160deg, #20607f, #0f3c52); }
.post-title { font-family: var(--font-display) !important; font-stretch: var(--display-stretch); font-weight: 600 !important; font-size: clamp(1.25rem, 1.7vw, 1.6rem) !important; line-height: 1.12 !important; letter-spacing: -0.015em; margin: 4px 0 0 !important; }
.post-title a { color: var(--ink); }
.post-meta p { margin: 0 0 .4em; font-size: 15px; }
.post-after { margin-top: var(--s-7); }
.recent { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: 640px; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); align-items: start; }
.post-layout .recent { margin-top: 0; position: sticky; top: 110px; }
.post-layout > * { min-width: 0; } /* the one-column phone layout must not grow to a wide embed's width */
.related-videos { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.related-videos .post-grid { margin-bottom: 0; }
.wp-content img { max-width: 100%; height: auto; border-radius: var(--r-card); }
/* ---------- Integration marketplace ---------- */
.cat-chips { list-style: none; margin: 0 0 var(--s-7); padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 88px; z-index: 5; background: var(--surface-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 20px; }
.chip-link { cursor: pointer; }
.cat-title { scroll-margin-top: 170px; margin-top: var(--s-8) !important; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.logo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.logo-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: transform var(--d-ui) var(--ease-out-expo), box-shadow var(--d-ui); }
.logo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-long); }
.logo-box { height: 96px; border-radius: 8px; background: #fff; display: grid; place-items: center; padding: 12px; margin-bottom: 6px; border: 1px solid rgb(15 60 82 / .06); }
.logo-box img { max-height: 70px; max-width: 80%; width: auto; object-fit: contain; }
.logo-name { margin: 0 !important; color: var(--ink) !important; font-weight: 650; }
.logo-card p { font-size: 14.5px; margin: 0; }
/* ---------- FAQ ---------- */
.band-faq .accordion { border-top: 1px solid var(--line); max-width: 960px; margin-bottom: var(--s-7); }
.acc-h { margin: 0 !important; font-size: inherit !important; }
.acc-panel .prose-in, .acc-panel > div > * { max-width: 72ch; }
.acc-panel p { padding-bottom: 0; }
.acc-panel > div > :last-child { padding-bottom: 24px; margin-bottom: 0; }
.acc.open .acc-icon { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: #0f3c52; }
/* ---------- Video facade ---------- */
.vfacade, .vframe { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-media); overflow: hidden; background: #c9d3da; box-shadow: var(--shadow-long); }
.vframe iframe, .vframe video, .vfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.calc-frame iframe { display: block; width: 100%; border: 0; }
.vposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vplay { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.vplay-btn { width: 56px; height: 56px; border-radius: 50%; background: rgb(15 60 82 / .72); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgb(0 0 0 / .28), 0 0 0 1px rgb(255 255 255 / .35); transition: transform var(--d-ui) var(--ease-out-expo), background var(--d-hover); font-size: 22px; }
.vplay-btn .gable { transform: rotate(90deg) translateY(-2px); }
.vplay:hover .vplay-btn { transform: scale(1.08); background: var(--cta); }
.vfacade-todo { display: grid; place-items: center; }
@media (max-width: 767px) { .vplay-btn { width: 48px; height: 48px; font-size: 18px; } }
/* ---------- Home ---------- */
.home-trust .marquee { margin: var(--s-6) 0; }
.home-trust .marquee-set img { height: 56px; max-width: 170px; }
.trust-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.trust-foot p { margin: 0; font-size: var(--fs-lead); color: var(--ink); }
.home-diff .manifesto-text { max-width: 26ch; margin: 0 0 var(--s-7); color: var(--ink); }
.diff-video { max-width: 1100px; }
.inc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgb(255 255 255 / .12); border-radius: var(--r-media); overflow: hidden; }
.inc-tile { background: #0f3c52; padding: 34px 28px; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.02; letter-spacing: -0.02em; color: #ffffff; transition: background var(--d-hover); }
.inc-tile .gable { color: #8cc540; font-size: 20px; }
.inc-tile:hover { background: #0b3144; }
.inc-foot { margin-top: var(--s-7); display: grid; gap: 6px; }
.inc-foot p { margin: 0; font-size: var(--fs-lead); color: #ffffff; }
.inc-foot p:last-child { margin-top: 18px; font-size: 1rem; }
.inc-foot a { color: #8cc540; }
.status-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-8); align-items: center; }
.status-copy p { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.status-copy strong { color: var(--accent-ink); font-weight: inherit; }
.kb .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-6); }
.tab { padding: 11px 20px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #ffffff; color: var(--ink); font-family: var(--font-label); font-weight: 500; font-size: 15px; cursor: pointer; transition: background var(--d-hover), color var(--d-hover), border-color var(--d-hover); }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { background: #0f3c52; color: #ffffff; border-color: #0f3c52; }
/* the box ends where the text does: 78 characters a line (readable), plus its padding (content-box) */
.kb-panel { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-media); padding: clamp(24px, 4vw, 56px); box-sizing: content-box; max-width: 78ch; }
.kb-panel > * { max-width: 78ch; }
/* ---------- Forms ---------- */
.form-card { background: #ffffff; color: #0f3c52; border: 1px solid rgb(15 60 82 / .1); border-radius: var(--r-media); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow-long); max-width: 760px; scroll-margin-top: 110px; }
.phero .form-card { margin-top: var(--s-6); }
.lead-form { display: grid; gap: 18px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ffield { display: grid; gap: 6px; }
.ffield.full { grid-column: 1 / -1; }
.ffield label { font-family: var(--font-label); font-size: 13px; font-weight: 500; color: #0f3c52; }
.ffield input, .ffield select { width: 100%; height: 50px; padding: 0 14px; border-radius: 10px; border: 1px solid rgb(15 60 82 / .16); background: #fff; font: inherit; font-size: 16px; color: #0f3c52; transition: border-color var(--d-hover), box-shadow var(--d-hover); }
.ffield select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%230f2b39' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; }
.ffield input:focus, .ffield select:focus { outline: none; border-color: #0b79b3; box-shadow: 0 0 0 3px rgb(11 121 179 / .25); }
.ffield.invalid input, .ffield.invalid select { border-color: #b3261e; }
.ffield.shake { animation: shake 300ms var(--ease-out-quart); }
.radio-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.radio-opt, .check-opt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgb(15 60 82 / .14); border-radius: 10px; cursor: pointer; font-size: 15px; color: #0f3c52; background: #fff; }
.radio-opt:has(input:checked) { border-color: #0b79b3; box-shadow: 0 0 0 3px rgb(11 121 179 / .2); }
.radio-opt input, .check-opt input { margin-top: 3px; accent-color: #0b79b3; }
.check-opt { border: 0; padding: 0; background: none; }
.ffield textarea { width: 100%; min-height: 110px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgb(15 60 82 / .16); background: #fff; font: inherit; font-size: 16px; color: #0f3c52; resize: vertical; transition: border-color var(--d-hover), box-shadow var(--d-hover); }
.ffield textarea:focus { outline: none; border-color: #0b79b3; box-shadow: 0 0 0 3px rgb(11 121 179 / .25); }
.ffield.invalid textarea, .check-group.invalid legend, .ffield.invalid .check-opt span { border-color: #b3261e; color: #b3261e; }
.check-group { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.check-group legend { width: 100%; margin-bottom: 8px; padding: 0; font-family: var(--font-label); font-size: 13px; font-weight: 500; color: #0f3c52; }
.form-rule { border: 0; border-top: 1px solid rgb(15 60 82 / .12); margin: 8px 0 0; }
.form-group-title { margin: 0; font-family: var(--font-label); font-weight: 600; color: #0f3c52; }
.form-consent { font-size: 13px; color: #444444 !important; margin: 0; }
.form-consent a { text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.lead-form .form-error { margin: 0; min-height: 1.2em; color: #b3261e; font-family: var(--font-label); font-size: 13px; }
.lead-form .btn-block { width: 100%; justify-content: space-between; }
.popup { width: min(720px, calc(100vw - 32px)); }
.popup .form-box { padding: clamp(24px, 4vw, 40px); }
.popup .form-card { box-shadow: none; border: 0; padding: 0; background: none; margin-top: 16px; }
.popup .pop-title { margin: 0 0 8px; }
.popup p { color: #444444; margin: 0 0 4px; }
/* ---------- Footer additions ---------- */
.footer-top { grid-template-columns: 1.3fr repeat(4, 1fr); }
.fcol-connect p { color: var(--ink-muted); margin: 0 0 10px; font-size: 15px; }
.fcol-connect p a { color: var(--ink); }
.follow { margin: 0 0 8px !important; }
.fcol-connect .socials { margin: 0 0 20px !important; }
.fcol h3.caps { text-transform: uppercase; letter-spacing: .04em; }
.fcol ul { font-size: 14.5px; gap: 8px; }
.privacy-icon { display: inline-block; vertical-align: middle; margin-left: 4px; }
.footer-legal .legal-links { gap: 12px; }
@media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr 1fr; } .fcol-connect { grid-column: 1 / -1; } }
/* ---------- Intro (logo mark, no text) ---------- */
.intro-mark { width: 96px; height: 96px; margin: 0 auto 20px; display: block; }
.intro-skip { font-size: 18px; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
/* ---------- CTA band: long sentences ---------- */
.cta-title-md { font-size: clamp(2.2rem, 5.6vw, 5.4rem) !important; line-height: .95 !important; max-width: 20ch; margin: 0 0 var(--s-5) !important; color: #ffffff !important; }
.cta-sub { color: #dbeaf3 !important; font-size: var(--fs-lead); margin: 0 0 var(--s-6); }
.cta .cta-actions { margin-top: var(--s-6); }
.cta a.u-link { color: #ffffff; }
/* ---------- 404 ---------- */
.nf { padding-top: 200px; min-height: 70svh; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.phero { padding-top: 120px; }
.phero-grid.layout-split, .split, .status-grid, .post-layout { grid-template-columns: 1fr; }
.split-media { order: -1; }
.showcase { grid-template-columns: 1fr; }
.inc-grid { grid-template-columns: 1fr 1fr; }
.fgrid { grid-template-columns: 1fr; }
.media-inline { float: none; margin: 16px 0; max-width: 100%; }
.qtrack { grid-auto-columns: 86%; }
.cat-chips { position: static; }
.post-layout .recent { position: static; }
}
@media (max-width: 600px) {
.inc-grid { grid-template-columns: 1fr; }
.inc-tile { min-height: 0; }
.home-hero .hero-title { font-size: clamp(3rem, 15vw, 5rem); }
}
/* ---------- Fix pass ---------- */
.home-hero { min-height: min(100svh, 1100px); }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: inherit; color: inherit; }
.card-icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 6px; }
.cards-after { margin-top: var(--s-6); }
/* ---------- Header logo: large enough to read "by inhabit" ---------- */
.nav-pill { height: 76px; padding-left: 26px; }
.nav.is-compact .nav-pill { height: 68px; }
.nav-logo { width: 260px; height: 50px; }
@media (max-width: 1280px) { .nav-logo { width: 230px; height: 45px; } .nm-top { padding: 9px 9px; } }
@media (max-width: 1100px) { .nav-pill { height: 66px; padding-left: 18px; } .nav-logo { width: 200px; height: 39px; } }
@media (max-width: 400px) { .nav-logo { width: 180px; height: 35px; } }
.phero { padding-top: 170px; }
/* Buttons in narrow cards wrap instead of overflowing */
.btn { max-width: 100%; }
.card .btn, .card-grid .btn { white-space: normal; height: auto; min-height: 52px; padding-block: 7px; text-align: left; }
.card .btn .roll, .card-grid .btn .roll { height: auto; overflow: visible; }
.card .btn .roll-b, .card-grid .btn .roll-b { display: none; }
.card .btn:hover .roll > span, .card-grid .btn:hover .roll > span { transform: none; }
/* ---------- Light cards keep dark text even inside dark sections (white-on-white otherwise) ---------- */
.qcard, .quote-card, .logo-card, .kb-panel { --ink: #0f3c52; --ink-muted: #444444; --line: rgb(15 60 82 / .12); --accent-ink: #477901; color: var(--ink); }
[data-theme="dark"] .qcard { --ink: #ffffff; --ink-muted: rgb(255 255 255 / .75); --line: rgb(255 255 255 / .15); background: rgb(255 255 255 / .06); border-color: var(--line); color: var(--ink); }
/* Carousel arrows at either end */
.cbtn:disabled { opacity: .35; cursor: default; }
/* ---------- Box grid: runs of short labels (report lists, "What's included") ---------- */
.box-grid { list-style: none; margin: var(--s-5) 0 var(--s-7); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.box { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 18px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); font-weight: 600; font-size: 15.5px; line-height: 1.3; box-shadow: 0 1px 2px rgb(15 60 82 / .05); transition: border-color var(--d-hover), transform var(--d-hover) var(--ease-out-expo), box-shadow var(--d-hover); }
[data-bg="light"] .box { background: #f7f9fb; }
.box .gable { flex-shrink: 0; color: var(--accent-ink); font-size: 18px; }
.box span { overflow-wrap: anywhere; }
.box:hover { border-color: rgb(140 197 64 / .7); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgb(15 60 82 / .35); }
[data-theme="dark"] .box { background: rgb(255 255 255 / .05); color: var(--ink); }
[data-theme="dark"] .box .gable { color: var(--accent); }
.prose .box-grid { max-width: none; }
/* =========================================================
Rebuild review fixes (2026-09-30)
========================================================= */
/* ---- Wide screens: everything lines up with the content column ---- */
section + section::before { left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); }
.nav-pill { width: min(calc(var(--max) - 2 * var(--pad)), 100%); }
.home-hero .hero-shot { margin-left: 0; margin-right: auto; margin-bottom: 0; }
.home-hero + .band { padding-top: var(--section-y); }
.home-hero { padding-bottom: var(--s-9); }
.caption-link { display: inline-flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.caption-link:hover span, .caption-link:focus-visible span { text-decoration: underline; text-underline-offset: .18em; }
.home-quotes .carousel-track { margin-right: calc(50% - 50vw); padding-right: var(--pad); }
.footer .wrap { container-type: inline-size; }
.lockup { font-size: clamp(2.3rem, 9.2cqi, 10.6rem); }
.lockup-tag { font-size: clamp(.62rem, 1.3cqi, 1.5rem); }
html.rm .marquee-track, html.rm .marquee-set { justify-content: flex-start; }
/* ---- Headings and titles never overflow their box ---- */
h1, h2, h3, h4, .hero-title, .card-title, .post-title, .logo-name { overflow-wrap: break-word; }
/* partner blurbs start with long domain names ("EmeraldCoastByOwner.com"): let them wrap in narrow cards */
.logo-card p { overflow-wrap: anywhere; }
.card-grid .card-title, .post-grid .post-title { min-height: 2lh; text-wrap: balance; }
.grid-links .card-title { min-height: 0; }
/* ---- Grids: stat captions line up; no lonely last rows ---- */
.grid-stats > .card-stat { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 12px; align-content: start; }
.stat-cap > :last-child { margin-bottom: 0; }
@media (min-width: 1090px) {
.post-grid { grid-template-columns: repeat(3, 1fr); }
.post-grid:has(> .post-card:nth-child(10):last-child) > .post-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; column-gap: 32px; align-items: center; }
.post-grid:has(> .post-card:nth-child(10):last-child) > .post-card:first-child .post-media { grid-row: span 3; margin-bottom: 0; }
.grid-tiles:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) and (max-width: 1089px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
.grid-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.grid-links > .card { flex: 0 1 calc((100% - 36px) / 4); min-width: 0; }
@media (max-width: 1100px) { .grid-links > .card { flex-basis: calc((100% - 24px) / 3); } }
@media (max-width: 760px) { .grid-links > .card { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 340px) { .grid-links > .card { flex-basis: 100%; } }
.card-multi .card-also { margin: 6px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); }
.card-link:hover .card-also { color: #b9cfdb; }
/* ---- Home: one headline per section, no empty right third, compact "What's Included?" ---- */
.home-diff .manifesto-text { font-family: var(--font-body); font-stretch: 100%; font-weight: 400; font-size: var(--fs-lead); line-height: 1.45; letter-spacing: 0; max-width: 48ch; margin: var(--s-4) 0 0; }
.diff-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.diff-grid .diff-video { max-width: none; }
@media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; } }
.inc-tile { min-height: 0; padding: 0; justify-content: flex-start; }
.inc-link { color: inherit; text-decoration: none; position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px 48px 22px 22px; transition: background var(--d-hover); }
.inc-link:hover, .inc-link:focus-visible { background: #0b3144; }
.inc-name { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.15; }
.inc-blurb { font-family: var(--font-body); font-stretch: 100%; font-size: 14.5px; line-height: 1.4; font-weight: 400; letter-spacing: 0; color: #b9cfdb; }
.inc-arrow { position: absolute; top: 20px; right: 20px; color: #8cc540; transition: transform var(--d-hover) var(--ease-out-expo); }
.inc-link:hover .inc-arrow { transform: translate(2px, -2px); }
.inc-foot .cta-row { margin-top: var(--s-5); }
@media (max-width: 700px) { .inc-grid { grid-template-columns: 1fr; } .inc-link { padding: 16px 44px 16px 18px; } }
@media (min-width: 1024px) {
.kb { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: var(--s-6); align-items: start; }
.kb .tabs { grid-column: 1; grid-row: 1; flex-direction: column; flex-wrap: nowrap; margin: 0; position: sticky; top: 110px; }
.kb .tab { text-align: left; justify-content: flex-start; }
.kb-panel { grid-column: 2; grid-row: 1; } /* one panel shows at a time: all share row 1, so no empty rows below it */
}
.particle { opacity: .35; }
.particle:nth-child(n+5) { display: none; }
/* ---- Form pages: copy + proof left, form right (sticky); phones: headline, form, proof ---- */
.form-split { display: grid; gap: var(--s-6); }
.fs-copy .hero-title { margin-bottom: var(--s-5); }
@media (min-width: 1024px) {
.form-split { grid-template-columns: 7fr 5fr; grid-template-areas: "copy form" "rest form"; column-gap: clamp(32px, 4vw, 64px); align-items: start; }
.fs-copy { grid-area: copy; }
.fs-form { grid-area: form; position: sticky; top: 110px; }
.fs-rest { grid-area: rest; }
.fs-rest .qgrid { grid-template-columns: 1fr; }
}
.ffield-state[hidden] { display: none; }
/* ---- Testimonials: roomier type, even cards (no clamping, so every word stays visible) ---- */
.qcard blockquote p { font-size: 20px; line-height: 1.35; }
.qtrack .qcard { height: 100%; }
/* ---- Footer ---- */
.fcol h3.caps { text-transform: none; letter-spacing: -0.01em; }
.socials { flex-wrap: nowrap !important; gap: 6px !important; }
.socials a { width: 38px; height: 38px; flex-shrink: 0; }
/* ---- Popup: brochure option; phones get a small slide-in instead of a full-screen form ---- */
.pop-alt { margin: 14px 0 0; font-size: 14.5px; text-align: center; color: #444444 !important; }
.slidein { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 150; background: #ffffff; color: #0f3c52; border: 1px solid rgb(15 60 82 / .12); border-radius: 18px; padding: 18px 44px 18px 18px; box-shadow: 0 24px 60px -20px rgb(8 34 47 / .55); transform: translateY(calc(100% + 24px)); transition: transform var(--d-ui) var(--ease-out-expo); }
.slidein.show { transform: none; }
.slidein p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; color: #444444; }
.slidein .slidein-title { color: #0f3c52; font-size: 17px; }
.slidein-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px; }
.slidein-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f5f9; color: #0f3c52; font-size: 20px; cursor: pointer; }
/* ---- Phones: sticky "Book a Call" bar after the hero ---- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklch, #0f3c52 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(100%); transition: transform var(--d-ui) var(--ease-out-expo); }
.mbar.show { transform: none; }
.mbar .btn { width: 100%; justify-content: space-between; }
@media (min-width: 768px) { .mbar { display: none !important; } }
@media (max-width: 767px) { .footer { padding-bottom: 76px; } }
/* ---- 404 ---- */
.nf .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ffield[data-country-field]:has(+ .ffield-state[hidden]) { grid-column: 1 / -1; }
/* ---- Pricing: context beside the quote form ---- */
.price-proof { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.price-kicker { font-size: var(--fs-lead); color: var(--ink); margin: 0 0 4px; }
.price-promise { font-weight: 600; color: var(--accent-ink); margin: 0 0 var(--s-6); }
.price-label { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--s-4); }
.price-logos { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-bottom: var(--s-6); }
.price-logos img { height: 38px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1) brightness(3); opacity: .75; }
[data-theme="light"] .price-logos img { filter: grayscale(1); opacity: .6; }
.price-call { margin: 0; color: var(--ink-muted); }
/* ---- Imported blog posts: WordPress "cta-button" links look like buttons ---- */
.wp-content a.cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: var(--r-pill); background: var(--cta); color: var(--on-cta) !important; font-weight: 650; text-decoration: none; }
.wp-content a.cta-button:hover { background: var(--cta-hover); }
/* Older posts hand-style buttons inline (white on teal #00a9ba or light green #8dc442: 2.1-2.8:1 contrast);
give them the site's button colours */
.wp-content a[style*="background"] { background: var(--cta) !important; color: var(--on-cta) !important; border-radius: var(--r-pill) !important; }
.wp-content a[style*="background"] * { color: inherit !important; }
.wp-content a[style*="background"]:hover { background: var(--cta-hover) !important; }
.wp-content .aligncenter { display: block; margin-inline: auto; text-align: center; }
.wp-content img { max-width: 100%; height: auto; }
.wp-content iframe { max-width: 100%; }
/* Video embeds fill the reading column at 16:9 (WordPress gives them a fixed 560x315) */
.wp-content iframe:is([src*="youtube.com"], [src*="youtu.be"], [src*="vimeo.com"]) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-media); margin-block: var(--s-5); }
/* WordPress's floated images (case-study callouts) sit beside the text, as on live */
.wp-content .alignright { float: right; margin: 6px 0 var(--s-4) var(--s-6); max-width: min(45%, 340px); }
.wp-content .alignleft { float: left; margin: 6px var(--s-6) var(--s-4) 0; max-width: min(45%, 340px); }
.wp-content :is(h2, h3, blockquote) { clear: both; }
@media (max-width: 640px) {
.wp-content :is(.alignright, .alignleft) { float: none; display: block; margin: var(--s-4) auto; max-width: 100%; }
}
.post-back { margin: 0 0 var(--s-4); font-size: 15px; }
/* Case studies (case_study_page): the story in one reading column, callout graphics beside it */
.case-body, .case-body p { max-width: none; }
.case-body .cs-callout { float: right; width: min(42%, 320px); margin: 6px 0 var(--s-4) var(--s-6); }
.case-body .cs-callout img { display: block; width: 100%; height: auto; border-radius: var(--r-card); box-shadow: var(--shadow-long); }
.case-body :is(h2, h3) { clear: both; }
.case-body h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); margin-top: var(--s-7); }
.case-body .vframe { margin-block: var(--s-5) var(--s-6); clear: both; }
.case-body .cta-row { margin-top: var(--s-5); }
@media (max-width: 640px) {
.case-body .cs-callout { float: none; width: min(100%, 360px); margin: var(--s-4) auto; }
}
/* WordPress video embeds carry a fixed width (style="width: 1080px"): without this, phones zoom the whole post out */
.wp-content :is(.wp-video, video, embed, object, figure) { max-width: 100%; }
.wp-content video { height: auto; }
.price-logos img, [data-theme="light"] .price-logos img { height: 44px; max-width: 140px; padding: 8px 12px; background: #ffffff; border-radius: 10px; filter: grayscale(1); opacity: .9; box-sizing: content-box; }
.fs-rest .h2 { font-size: var(--fs-h3); margin-top: var(--s-6); }
.fs-rest > :first-child .h2:first-child, .fs-rest .prose > .h2:first-child { margin-top: 0; }
/* ---- No cut-off words at any width: long button labels wrap; long URLs and titles break ---- */
.btn { height: auto; min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.btn-xl { min-height: 72px; }
.roll { height: auto; min-width: 0; flex: 0 1 auto; white-space: normal; text-align: left; }
.btn .btn-icon { flex-shrink: 0; }
.prose, .wp-content, .pn-links, .ml-t, .footer-legal, .table-wrap td { overflow-wrap: anywhere; }
.inc-foot a.btn, .inc-foot a.btn:hover { color: var(--on-cta); }
.socials a:hover { color: #0f3c52; }
/* Card grids with 5+ cards: rows of four, last row centered (no lonely card hanging left) */
.grid-cards:not(.cols-2):has(> .card:nth-child(5)) { display: flex; flex-wrap: wrap; justify-content: center; }
.grid-cards:not(.cols-2):has(> .card:nth-child(5)) > .card { flex: 0 1 calc((100% - 48px) / 4); min-width: 0; }
@media (max-width: 1100px) { .grid-cards:not(.cols-2):has(> .card:nth-child(5)) > .card { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 760px) { .grid-cards:not(.cols-2):has(> .card:nth-child(5)) > .card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .grid-cards:not(.cols-2):has(> .card:nth-child(5)) > .card { flex-basis: 100%; } }
/* Split-text masks (GSAP SplitText, overflow: clip) are exactly one line (or one letter) in size, which sliced off
descenders (g, y, p) and accents, and, sideways, letters whose ink runs past their width: the tail of a "y"
and the curve of a "?" in the condensed display face (Firefox measured them narrower than it draws them).
Grow the clip box on every side without moving the text. */
[data-hero-split] [style*="overflow: clip"], [data-reveal-text] [style*="overflow: clip"], .cta-title [style*="overflow: clip"], .featured blockquote [style*="overflow: clip"] { padding: .14em .2em .26em; margin: -.14em -.2em -.26em; }
/* Same sideways room for the rolling button and menu labels (they clip top and bottom for the roll itself) */
.roll, .menu-roll { padding-inline: .12em; margin-inline: -.12em; }
/* ---- Feature link cards: every piece of text has its own row/column, so nothing spills or gets cut.
Desktop: icon | title | arrow, with "Also: …" under the title. Phones: icon + arrow on top,
then the title and "Also: …" at full card width. ---- */
.card-link { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "icon title arrow" ". also also"; align-items: center; column-gap: 14px; row-gap: 4px; }
.card-link > .f-icon { grid-area: icon; }
.card-link > .card-title { grid-area: title; min-width: 0; overflow-wrap: break-word; }
.card-link > .card-arrow { grid-area: arrow; margin-left: 0; align-self: start; }
.card-link > .card-also { grid-area: also; margin: 0; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 760px) {
.card-link { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "icon arrow" "title title" "also also"; align-items: start; row-gap: 10px; padding: 16px; }
.card-link > .card-title { font-size: 17px !important; line-height: 1.2; }
.card-link > .card-also { margin-top: -4px; }
}
/* =========================================================
Responsive audit fixes (2026-10-06): 16 viewports, 320px phones to 3440px ultrawide.
Order matters: later blocks refine earlier ones for the same selectors.
========================================================= */
/* ---- Hero spacing. The phone value was overridden by a later unconditional 170px rule. ---- */
@media (max-width: 900px) { .phero { padding-top: 112px; } }
.phero .layout-stack .hero-title { max-width: 24ch; }
@media (max-width: 480px) { .phero .hero-title { font-size: clamp(2.1rem, 9.5vw, 2.6rem); } }
@media (max-width: 600px) { body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .phero .lead { font-size: 17px; line-height: 1.5; } }
@media (min-width: 1025px) and (max-height: 820px) {
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .phero .hero-title { font-size: clamp(3.2rem, 5vw, 4.6rem); }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .phero .lead { font-size: 1.15rem; max-width: 62ch; }
}
/* Short laptops: the home CTA stays above the fold */
@media (min-width: 901px) and (max-height: 820px) { .home-hero .hero-title { font-size: min(var(--fs-mega), 17svh); } }
/* Landscape phones (short screens): headline, lead and CTA fit the first screen */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
.phero { padding-top: 100px; padding-bottom: 40px; }
.phero .hero-title { font-size: clamp(1.9rem, 4.4vw + .5rem, 2.75rem); max-width: none; margin-bottom: 12px; }
.phero .hero-eyebrow { margin-bottom: 6px; }
.phero .lead { font-size: 1.05rem; margin-bottom: 12px; }
.phero .hero-p { font-size: .95rem; margin-bottom: 12px; }
.post-cats { margin-bottom: 12px; }
.form-split { row-gap: 16px; }
.home-hero { padding-top: 96px; min-height: 0; }
.home-hero .hero-title { font-size: clamp(2rem, 12svh, 4.5rem); margin-bottom: 12px; }
.home-hero .lead { margin-bottom: 16px; }
}
/* ---- Section rhythm on phones: less empty padding around short bands ---- */
@media (max-width: 767px) { :root { --section-y: clamp(56px, 9vh, 80px); } }
@media (max-height: 500px) and (orientation: landscape) { :root { --section-y: 56px; } }
.phero-post, .phero-slim, .phero:has(+ .band-posts) { padding-bottom: clamp(28px, 4vh, 56px); }
.phero-post + .band, .phero-slim + .band, .phero + .band-posts { padding-top: clamp(40px, 6vh, 88px); }
.band-posts:has(+ .band-posts) { padding-bottom: clamp(24px, 3vh, 48px); }
.band-posts + .band-posts { padding-top: clamp(24px, 3vh, 48px); }
.band-posts + .band-posts::before { display: none; }
.phero.phero-slim.nf { min-height: 0; padding-bottom: var(--s-8); }
/* ---- Footer on phones: 44px tap targets, no half-empty rows ---- */
.socials .ext { display: none; }
@media (max-width: 767px) {
.fcol ul { gap: 0; }
.fcol ul a { display: inline-block; padding: 10px 0; }
.fcol ul a.u-link::after { bottom: 8px; }
.footer-legal a, .footer-legal .rm-toggle { display: inline-block; padding: 12px 0; }
.footer-legal .u-link::after { bottom: 10px; }
.socials { flex-wrap: wrap !important; }
.socials a { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
.footer-top > .fcol:nth-child(4), .footer-top > .fcol-connect { grid-column: 1 / -1; }
.footer-top > .fcol:nth-child(4) ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
}
/* ---- Tap targets elsewhere on phones ---- */
@media (max-width: 767px) {
.pn-links { row-gap: 4px; }
.pn-links .motif-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; }
.split-text a.u-link { display: inline-block; padding-block: 9px; }
.price-call a[href^="tel"], .fs-rest .prose a[href^="tel"] { position: relative; }
.price-call a[href^="tel"]::before, .fs-rest .prose a[href^="tel"]::before { content: ""; position: absolute; inset: -11px -6px; }
}
.lead-form .check-opt { min-height: 44px; align-items: center; padding: 8px 0; }
.lead-form .check-opt input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; }
@media (max-width: 767px) and (max-height: 500px) {
.mbar { left: auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mbar .btn { width: auto; min-height: 44px; }
}
@media (max-width: 359px) { .cta-actions .btn-xl { padding-left: 22px; font-size: 16px; } .cta-actions .btn-xl .btn-icon { width: 46px; height: 46px; } }
/* ---- Card grids: readable column counts, no lonely last cards ---- */
.card-grid .card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
@media (max-width: 560px) { .card-grid .card-title { min-height: 0; } }
@media (max-width: 699px) { .post-grid .post-title { min-height: 0; } }
@media (min-width: 561px) and (max-width: 1023px) { .grid-cards:not(.cols-2):has(> .card:nth-child(5)) > .card { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1024px) { .grid-cards:not(.cols-2):has(> .card:nth-child(9):last-child) > .card { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 1101px) { .grid-cards:not(.cols-2):has(> .card:nth-child(6)):not(:has(> .card:nth-child(7))) > .card { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 700px) { .card-grid.cols-2:has(> .card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .card-grid.cols-2:has(> .card:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1100px) { .grid-links:has(> .card:nth-child(4):last-child) > .card { flex-basis: calc((100% - 12px) / 2); } }
@media (min-width: 701px) and (max-width: 900px) { .inc-grid > .inc-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 900px) { .showcase { grid-template-columns: 1fr 1fr; } .show-body { padding: 18px 20px 22px; } }
.mega-wide .mega-list { align-content: start; }
.grid-tiles:has(> .card-tile:nth-child(10)) > .card:not(.card-tile) { grid-column: 1 / -1; }
@media (max-width: 560px) {
.grid-tiles:has(> .card-tile:nth-child(10)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid-tiles:has(> .card-tile:nth-child(10)) > .card-tile { min-height: 92px; padding: 14px; gap: 10px; }
}
@media (max-width: 559px) {
.logo-cards { gap: 10px; }
.logo-card { padding: 14px; gap: 6px; }
.logo-box { height: 64px; padding: 8px; margin-bottom: 2px; }
.logo-box img { max-height: 46px; }
}
.fs-rest .qgrid > .qcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .grid-stats .stat-big { font-size: clamp(2.6rem, 4.2vw, 4.6rem) !important; }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .band-cards figure.media { max-width: 1186px; }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .band-prose + .band-cards .card-grid { margin-top: var(--s-6); }
/* ---- Feature/case-study media and splits ---- */
.wrap > figure.media { max-width: 960px; margin-inline: auto; }
.wrap > .split ~ .vfacade { max-width: 1024px; margin-inline: auto; }
.band-quotes .qgrid + .cta-row { margin: 24px 0; }
@media (min-width: 640px) and (max-width: 900px) and (orientation: landscape) {
.split:not(.split-solo) { grid-template-columns: 1fr 1fr; gap: 32px; }
.split:not(.split-solo) > .split-media { order: 0; }
}
@media (min-width: 901px) {
.phero-tail-wide { max-width: none; }
.phero-tail-wide .split:not(.split-solo) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.phero-tail-wide .split.media-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.phero-tail-wide .split-media { position: sticky; top: 120px; }
.phero-tail-wide .split-text { max-width: 72ch; }
}
.phero-tail-wide > .vfacade { max-width: 1000px; margin-top: var(--s-7); }
.phero-tail-wide > .vfacade + .vfacade { margin-top: 24px; }
.phero-tail .split-text .h3 { margin: 1.1em 0 .45em; }
.phero-tail .split-text > .h3:first-child, .phero-tail .split-text .h2 + .h3 { margin-top: 0; }
.phero:has(.phero-tail-wide) .hero-bg { bottom: auto; height: min(100%, 560px); }
@media (max-height: 500px) and (orientation: landscape) {
.phero-tail-wide > .vfacade { max-width: calc((100svh - 40px) * 16 / 9); }
.post-body .vfacade, .post-body .vframe { width: min(100%, calc((100svh - 110px) * 16 / 9)); }
}
.phero-copy .h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; margin: 1.2em 0 .45em; }
.cta-title-long { line-height: 1.02 !important; }
@media (max-width: 767px) { .cta-title-long { font-size: clamp(1.55rem, 6.2vw, 2rem) !important; line-height: 1.08 !important; max-width: none; } }
@media (min-width: 1024px) { .cta-title-long { max-width: 28ch; font-size: clamp(2.4rem, 3.6vw, 4rem) !important; } }
/* ---- Partner logos and review badges (v2 lander): a tidy row instead of floats spilling out ---- */
.prose { display: flow-root; }
.prose > .media-inline:has(+ .media-inline), .prose > .media-inline + .media-inline { float: none; display: inline-flex; align-items: center; vertical-align: middle; width: auto; max-width: min(42%, 200px); margin: 12px 28px 12px 0; }
.prose > .media-inline:has(+ .media-inline) img, .prose > .media-inline + .media-inline img { max-height: 56px; width: auto; max-width: 100%; }
.band-rows > .wrap > .media:has(+ .media), .band-rows > .wrap > .media + .media { display: inline-block; vertical-align: middle; width: min(100%, 320px); margin: 12px 20px 12px 0; }
.band-rows > .wrap > .media:has(+ .media) img, .band-rows > .wrap > .media + .media img { max-height: 120px; width: auto; }
/* ---- Integration Marketplace category bar ---- */
.cat-title { scroll-margin-top: 240px; }
@media (min-width: 901px) and (max-height: 860px) {
.cat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.cat-chips > li { flex: none; }
}
@media (max-width: 900px) {
.cat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding: 8px; border-radius: 16px; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips > li { flex: none; }
.cat-chips .chip-link, .post-cats .chip-link { min-height: 40px; padding: 8px 14px; display: inline-flex; align-items: center; }
.cat-title { scroll-margin-top: 110px; }
}
@media (max-width: 900px) and (min-height: 500px) { .cat-chips { position: sticky; top: 88px; z-index: 5; } .cat-title { scroll-margin-top: 160px; } }
/* ---- Forms ---- */
.fgrid > .ffield { grid-template-rows: 1fr auto; }
.fgrid > .ffield > label { align-self: end; }
@media (min-width: 560px) and (max-width: 900px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) and (max-width: 1439px) { .fs-form .ffield[data-country-field], .fs-form .ffield-state { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .phero .fs-form .form-card { margin-top: 0; } .fs-copy > :last-child { margin-bottom: 0; } }
.lead-form { position: relative; }
.lead-form .form-error:empty { position: absolute; min-height: 0; margin: 0; }
.form-lead { margin-bottom: var(--s-4); }
.form-lead > :is(h1, h2, h3, h4, h5, h6) { font-size: clamp(1.4rem, 2vw, 1.9rem) !important; line-height: 1.15; margin: 0 0 6px; }
.form-lead > p { margin: 0 0 4px; color: var(--ink-muted); }
@media (max-width: 767px) {
.price-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.price-logos img, [data-theme="light"] .price-logos img { width: 100%; max-width: none; height: 60px; box-sizing: border-box; padding: 8px 12px; }
}
.phero .glow-b { max-width: 1100px; max-height: 1100px; }
.phero .hero-bg { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* ---- Blog and video listings ---- */
@media (min-width: 1090px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) and (max-width: 1089px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.post-media img { object-fit: contain; }
.post-grid + .pn-links { justify-content: center; margin-top: var(--s-7); }
.post-after { margin-top: var(--s-5); }
@media (min-width: 700px) and (max-width: 1089px) {
.post-grid:has(> .post-card:nth-child(3):last-child) > .post-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: 20px; row-gap: 12px; }
.post-grid:has(> .post-card:nth-child(3):last-child) > .post-card:last-child .post-media { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
.post-grid:has(> .post-card:nth-child(3):last-child) > .post-card:last-child .post-title { grid-column: 2; grid-row: 2; }
.post-grid:has(> .post-card:nth-child(3):last-child) > .post-card:last-child .post-meta { grid-column: 2; grid-row: 3; }
}
@media (min-width: 1090px) {
.post-grid:has(> .post-card:nth-child(10):last-child) > .post-card:first-child { grid-template-rows: 1fr auto auto 1fr; }
.post-grid:has(> .post-card:nth-child(10):last-child) > .post-card:first-child .post-media { grid-row: 1 / -1; grid-column: 1; }
.post-grid:has(> .post-card:nth-child(10):last-child) > .post-card:first-child .post-title { grid-row: 2; grid-column: 2; }
.post-grid:has(> .post-card:nth-child(10):last-child) > .post-card:first-child .post-meta { grid-row: 3; grid-column: 2; }
}
body[data-page="/video/"] .phero-copy .h2 { font-size: clamp(1.35rem, 2.4vw, 2.2rem); line-height: 1.12; margin: var(--s-5) 0 4px; }
body[data-page="/video/"] .phero-copy [data-hero-seq] + .hero-p { margin-top: 0; font-size: 15px; }
/* ---- Imported WordPress posts: stray
s and colors ---- */
.wp-content > br, .wp-content ul > br, .wp-content ol > br { display: none; }
.wp-content { color: var(--ink-muted); }
.wp-content :is(h1, h2, h3, h4, h5, h6) { color: var(--ink); }
.wp-content > ul, .wp-content > ol { max-width: 72ch; }
/* ---- Tables: words never split mid-word (the table scrolls inside .table-wrap instead) ---- */
.table-wrap td, .table-wrap th { overflow-wrap: normal; word-break: normal; }
/* ---- Responsive audit, round 2 (verification follow-ups) ---- */
/* Footer: keep social glyphs centred (the padded-link rule also matched .socials a) */
@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
.fcol .socials a, .fcol ul.socials a { display: grid; place-items: center; padding: 0; }
.fcol .socials a::after { display: none; }
.fcol-connect p a { display: inline-block; padding: 10px 0; }
.fcol-connect p a.u-link::after { bottom: 8px; }
.footer .lockup-tag { font-size: 12px; letter-spacing: .3em; }
}
/* Landscape phones (844x390 etc.) get the same footer tap targets as portrait phones */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px) {
.fcol ul { gap: 0; }
.fcol ul:not(.socials) a { display: inline-block; padding: 10px 0; }
.fcol ul a.u-link::after { bottom: 8px; }
.footer-legal a, .footer-legal .rm-toggle { display: inline-block; padding: 12px 0; }
.footer-legal .u-link::after { bottom: 10px; }
.socials a { width: 44px; height: 44px; }
}
/* Small tap targets found after round 1 */
@media (max-width: 767px) {
.shot-caption .caption-link { min-height: 44px; align-items: center; }
.split-text p a.u-link { display: inline; padding-block: 10px; }
.split-text p a.u-link::after { bottom: 8px; }
.post-grid .post-title a { display: inline-block; padding-block: 8px; margin-block: -8px; }
body[data-page="/video/"] .phero-copy .h2 a { display: inline-block; padding-block: 8px; }
body[data-page="/video/"] .phero-copy .h2 { margin-top: var(--s-4); }
.post-after a { display: inline-flex; align-items: center; min-height: 44px; }
.form-lead a[href^="tel"] { position: relative; display: inline-block; padding-block: 11px; }
}
/* Small or landscape phones: the main button comes straight after the headline so it is on the first screen
(all copy still follows directly below it) */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1100px), (max-width: 480px) and (max-height: 760px), (max-width: 900px) and (max-height: 700px) {
.phero .phero-copy:has(> .cta-row) { display: flex; flex-direction: column; }
.phero .phero-copy > .cta-row { order: 1; margin: 0 0 20px; }
.phero .phero-copy > :not(.hero-eyebrow):not(.hero-title):not(.cta-row):not(.pn-links) { order: 2; }
}
@media (max-width: 480px) {
.fs-copy .hero-title { max-width: none; }
body[data-page="/property-management-software-lander/"] .phero .hero-title { font-size: clamp(1.8rem, 8.4vw, 2.2rem); }
}
/* Long CTA headline on tablets and landscape phones */
@media (min-width: 768px) and (max-width: 1023px) { .cta-title-long { font-size: clamp(1.9rem, 3.8vw, 2.4rem) !important; max-width: 30ch; } }
@media (max-height: 500px) and (orientation: landscape) { .cta-title-long { font-size: clamp(1.5rem, 3.4vw, 1.9rem) !important; max-width: 34ch; } }
/* Features overview: 17 long descriptions get readable widths at every size */
@media (min-width: 561px) and (max-width: 699px) { body[data-page="/features/"] .grid-cards:has(> .card:nth-child(17)) > .card { flex-basis: 100%; } }
@media (min-width: 1024px) and (max-width: 1279px) { body[data-page="/features/"] .grid-cards:has(> .card:nth-child(17)) > .card { flex-basis: calc((100% - 16px) / 2); } }
@media (min-width: 1280px) and (max-width: 1599px) { body[data-page="/features/"] .grid-cards:has(> .card:nth-child(17)) > .card { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 540px) and (max-width: 639px) and (orientation: landscape) { .showcase { grid-template-columns: 1fr 1fr; } .show-body { padding: 14px 16px 18px; } }
@media (min-width: 560px) and (max-width: 639px) and (orientation: landscape) and (max-height: 500px) {
.split:not(.split-solo) { grid-template-columns: 1fr 1fr; gap: 24px; }
.split:not(.split-solo) > .split-media { order: 0; }
}
/* Case study on landscape phones: keep text wide and the image top-aligned (round-1 landscape rule made it a narrow column) */
@media (min-width: 560px) and (max-width: 900px) and (orientation: landscape) {
.phero-tail-wide .split:not(.split-solo) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.phero-tail-wide .split.media-first { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.phero-tail-wide .split-media { position: sticky; top: 96px; }
}
@media (min-width: 1024px) {
.phero-tail-wide:has(> .vfacade + .vfacade) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.phero-tail-wide:has(> .vfacade + .vfacade) > :not(.vfacade) { grid-column: 1 / -1; }
.phero-tail-wide > .vfacade + .vfacade { margin-top: var(--s-7); }
}
/* Leo AI: the toolkit intro and its 6 agent cards read as one section */
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .band-prose:has(+ .band-cards + .band-cards) { padding-bottom: 0; }
/* flow-root keeps the card grids' margins inside the grey bands; collapsed through them, they showed the body's
scroll-driven color as white stripes between the rows */
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) :is(.band-prose + .band-cards, .band-prose + .band-cards + .band-cards) { background-color: #f1f5f9; display: flow-root; }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) :is(.band-prose + .band-cards, .band-prose + .band-cards + .band-cards)::before { display: none; }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .band-prose + .band-cards { padding-top: 0; padding-bottom: 0; }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .band-prose + .band-cards + .band-cards { padding-top: 16px; }
body:is([data-page="/features/leo-ai/"], [data-page="/features/leo-ai-lander/"]) .band-prose + .band-cards + .band-cards .card-grid { margin-top: 0; }
/* Integration Marketplace on phones: logo beside its text, not a 200px-tall card per partner */
@media (max-width: 559px) {
.logo-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
.logo-card .logo-box { grid-row: 1 / span 3; height: 64px; margin: 0; }
.logo-card > p { grid-column: 2; }
.logo-card p { font-size: 14px; }
}
/* Form pages on short desktops: the submit button fits the first screen */
@media (min-width: 1024px) and (max-height: 860px) {
.phero-form { padding-top: 120px; }
.phero .fs-form .form-card { margin-top: 12px; padding: 24px 28px; }
.fs-form .fgrid { row-gap: 10px; }
.fs-form .fgrid input, .fs-form .fgrid select { height: 44px; min-height: 44px; }
}
@media (min-width: 1024px) { .fs-copy .hero-title { font-size: clamp(3rem, 4.8vw, 5.5rem); max-width: none; } }
/* v2 lander review badges: no overflow on 320px phones, no empty white boxes */
.band-rows > .wrap > .media:has(+ .media), .band-rows > .wrap > .media + .media { width: fit-content; max-width: 100%; background: none; border: 0; }
@media (max-width: 559px) { .band-rows > .wrap > .media:has(+ .media), .band-rows > .wrap > .media + .media { margin-right: 0; } }
/* Landing pages: OTA logos / review badges in one row, figure stats, list beside its intro */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px clamp(24px, 4vw, 56px); margin: var(--s-5) 0; }
.logo-row img { height: 44px; width: auto; max-width: 170px; object-fit: contain; }
.band-quotes .logo-row { margin-top: var(--s-6); }
.band-quotes .logo-row img { height: 80px; max-width: 200px; }
.prose:has(> .logo-row) { max-width: none; text-align: center; }
.prose:has(> .logo-row) > p { max-width: 62ch; margin-inline: auto; }
.stat-row { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 24px 0 0; border-top: 1px solid var(--line); }
.stat-fig { font-family: var(--font-serif); font-size: clamp(2.8rem, 5vw, 4.4rem); line-height: .95; letter-spacing: -0.02em; color: var(--accent-ink); }
.stat-unit { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.stat-cap { color: var(--ink-muted); line-height: 1.45; }
.prose:has(> .stat-row) { max-width: none; }
.prose:has(> .stat-row) > p { font-size: 13px; color: var(--ink-muted); }
.prose:has(> .box-grid), .prose:has(> .table-wrap) { max-width: none; }
.split-list { display: grid; gap: var(--s-5) clamp(32px, 5vw, 80px); }
@media (min-width: 900px) { .split-list { grid-template-columns: 1fr 1fr; align-items: start; } }
.split-list .list, .split-list ul { margin-top: 0; }
.rows-tail { max-width: 480px; margin: var(--s-6) auto 0; }
@media (min-width: 900px) {
.band-rows:has(.rows-tail) .split { grid-template-columns: 1fr 1fr; align-items: center; }
.band-rows:has(.rows-tail) .split-media .media { max-width: 460px; margin-inline: auto; }
.band-rows:has(.rows-tail) .split + .split { margin-top: var(--s-5); }
}
.band:has(> .wrap > .prose:only-child > .logo-row) { padding-block: var(--s-6); }
@media (min-width: 1024px) { .form-split { grid-template-rows: auto 1fr; } }
.band-form-split { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .band-form-split { grid-template-columns: 7fr 5fr; column-gap: clamp(32px, 4vw, 64px); align-items: start; } }
.bfs-copy .prose { max-width: none; }
.bfs-form > .h3:first-child, .bfs-form > .h4:first-child { margin-top: 0; }
.qcard .q-logo { filter: brightness(0); opacity: .45; }
@media (max-width: 560px) { .q-attr:has(.q-logo) { flex-wrap: wrap; } .q-attr .q-logo { margin-left: 66px; } }
/* /get-streamline-vacation-rental-software-4867/: live's one-at-a-time testimonial slider and Difference accordion */
.tslider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 2vw, 24px); max-width: 1000px; margin: var(--s-5) auto 0; }
.tsl-track { grid-auto-columns: 100%; gap: 16px; padding: 0; }
.tslide { scroll-snap-align: start; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; }
.tsl-portrait { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 6px 24px rgba(15, 60, 82, .18); position: relative; z-index: 1; margin-right: -40px; align-self: start; margin-top: 28px; }
.tsl-card { border-radius: var(--r-card); overflow: hidden; background: #eef1f4; }
.tsl-card blockquote { margin: 0; padding: 36px 40px 32px 64px; }
.tsl-card blockquote p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; font-style: italic; color: var(--ink); margin: 0; }
.tsl-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #0f3c52; color: #fff; padding: 20px 40px 20px 64px; }
.tsl-name p { margin: 0; color: #fff; font-size: 15px; line-height: 1.4; }
.tsl-name strong { color: #fff; }
.tsl-logo { max-height: 40px; max-width: 200px; width: auto; }
.tslider .cbtn { border-color: var(--line); color: var(--ink); }
@media (max-width: 700px) {
.tslider { grid-template-columns: 1fr 1fr; }
.tsl-track { grid-column: 1 / -1; grid-row: 1; }
.tslider [data-prev] { justify-self: end; } .tslider [data-next] { justify-self: start; }
.tslide { grid-template-columns: 1fr; justify-items: center; }
.tsl-portrait { width: 110px; height: 110px; margin: 0 0 -40px; }
.tsl-card blockquote { padding: 52px 24px 24px; }
.tsl-foot { padding: 16px 24px; flex-wrap: wrap; }
}
.dif-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .dif-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); } }
.band-difference .dif-acc { grid-column: auto; max-width: none; margin: 0; }
.dif-acc .acc-btn { justify-content: flex-start; gap: 16px; }
.dif-acc .acc-icon { margin-left: auto; }
.dif-n { font-family: var(--font-serif); font-size: 2.2rem; line-height: 1; color: var(--accent-ink); min-width: 2ch; }
.dif-t { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.dif-acc .acc-panel .media { max-width: 340px; margin: var(--s-3) 0 0 !important; background: none; border: 0; box-shadow: none; }
.dif-wheel .media { max-width: 440px; margin: 0 auto; background: none; border: 0; box-shadow: none; }
.tsl-portrait { background: none; padding: 0; }
/* /vacation-rental-software-streamline-v2/: feature tiles with live's icons (icon beside the name) */
.card-tile-fa { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; min-height: 0; padding: 22px 20px; }
.tile-fa { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(35, 141, 193, .1); color: #238dc1; }
.tile-fa svg { width: 22px; height: 22px; }
.card-tile-fa .card-title { margin: 0 !important; align-self: center; }
/* Imported posts: loose text pulled out of broken s keeps the paragraph measure */
.post-body .wp-content { max-width: 72ch; }
.wp-content > :is(h2, h3, h4) { margin-bottom: .5em; }