/* ==========================================================================
   Solved Telephony design system

   Shares the structure, type scale, and components of the AgentTech 2.0
   stylesheet so the Solved family reads as one system. The dark base color
   is this site's own: --brand / --brand-deep / --ink, paired with the
   shared cream.

   Fonts are self-hosted: Instrument Serif (display) and Figtree (UI).
   Both OFL licensed.

   Radius system: media tiles 20px, small UI cards 16px, thumbnails 10px,
   inputs + buttons full pill.
   ========================================================================== */

@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Instrument Serif';
    src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('../fonts/figtree-latin.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand: #0f3b40;
    --brand-deep: #082a2e;
    --ink: #04191c;
    --ink-rgb: 4, 25, 28;
    --cream: #faf4e8;
    --cream-deep: #f1e5cd;
    --white: #fffdf9;

    --text-on-cream: #0f3b40;
    --muted-on-cream: #4a6367;
    --text-on-brand: #fffdf9;
    --muted-on-brand: rgba(255, 253, 249, 0.74);
    --line-on-cream: rgba(15, 59, 64, 0.14);
    --line-on-brand: rgba(255, 253, 249, 0.14);

    --grad: linear-gradient(90deg, #2dd4bf 0%, #38bdf8 50%, #f4a23a 100%);

    --r-tile: 20px;
    --r-card: 16px;
    --r-thumb: 10px;
    --r-pill: 999px;

    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --container: 1280px;
    --gutter: clamp(16px, 4vw, 40px);
    --section: clamp(72px, 9vw, 128px);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-nav: 0 8px 30px rgba(4, 25, 28, 0.12);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font: 400 1rem/1.6 var(--font-sans);
    color: var(--text-on-cream);
    background: var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img, picture { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: 16px; top: -100px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--white);
    color: var(--brand);
    border-radius: var(--r-pill);
    font-weight: 600;
}
.skip-link:focus { top: 12px; }

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

section[id] { scroll-margin-top: 96px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    font: 500 0.9375rem/1 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s var(--ease), background-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 0.875rem; }

.btn-brand { background: var(--brand); color: var(--white); }
.btn-brand:hover { background: var(--brand-deep); }

.btn-white { background: var(--white); color: var(--brand); }
.btn-white:hover { background: #ffffff; box-shadow: 0 6px 20px rgba(4, 25, 28, 0.18); }

.btn[disabled] { opacity: 0.6; cursor: progress; }

/* --------------------------------------------------------------------------
   Announcement bar + floating pill nav
   -------------------------------------------------------------------------- */
.announce {
    background: var(--brand-deep);
    color: var(--muted-on-brand);
    font-size: 0.8125rem;
    text-align: center;
    padding: 9px var(--gutter);
}
.announce a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}

/* Out of flow so it adds no height; leaves the viewport after 1px of scroll. */
.nav-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
}

/* Zero-height sticky wrapper: the pill floats over the hero and stays pinned.
   The 12px offset lives on the container as padding (not margin) so it cannot
   collapse out of the wrapper and open a gap above the hero. */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 0;
}
.site-nav > .container { padding-top: 12px; }

.nav-pill {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 60px;
    padding: 0 10px 0 18px;
    background: var(--white);
    border-radius: var(--r-pill);
    box-shadow: 0 1px 0 rgba(15, 59, 64, 0.06), 0 4px 16px rgba(4, 25, 28, 0.08);
    transition: box-shadow 0.3s var(--ease);
}
.site-nav.is-scrolled .nav-pill { box-shadow: 0 1px 0 rgba(15, 59, 64, 0.06), var(--shadow-nav); }

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--brand);
}
.nav-brand img { height: 26px; width: auto; }
.nav-brand span {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 2px;
}
.nav-links a {
    display: inline-block;
    padding: 8px 12px;
    border-radius: var(--r-pill);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    transition: background-color 0.2s;
}
.nav-links a:hover { background: rgba(15, 59, 64, 0.06); }

.nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-text {
    padding: 8px 12px;
    border-radius: var(--r-pill);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.nav-text:hover { background: rgba(15, 59, 64, 0.06); }

/* Hide on scroll down, reveal on scroll up (see site.js). */
.nav-pill, .nav-menu {
    transition: transform 0.35s var(--ease), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-nav.is-hidden .nav-pill, .site-nav.is-hidden .nav-menu {
    transform: translateY(-130%);
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .nav-pill, .nav-menu { transition: none; }
}

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    color: var(--brand);
}
.nav-toggle:hover { background: rgba(15, 59, 64, 0.06); }

.nav-menu {
    margin-top: 8px;
    padding: 10px;
    background: var(--white);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-nav);
}
.nav-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--r-thumb);
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.nav-menu a:hover { background: rgba(15, 59, 64, 0.06); }
.nav-menu .btn { display: flex; margin: 8px 4px 4px; }

.nav-item { position: relative; }
.nav-drop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    font: 500 0.9375rem/1.5 var(--font-sans);
    color: var(--brand);
    cursor: pointer;
}
.nav-drop:hover, .nav-drop[aria-expanded="true"] { background: rgba(15, 59, 64, 0.06); }
.nav-drop i { font-size: 14px; transition: transform 0.25s var(--ease); }
.nav-drop[aria-expanded="true"] i { transform: rotate(180deg); }
.nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: -8px;
    min-width: 320px;
    padding: 8px;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--shadow-nav);
    z-index: 5;
}
.nav-dropdown a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--r-thumb);
    text-decoration: none;
    color: var(--brand);
}
.nav-dropdown a:hover { background: rgba(15, 59, 64, 0.06); }
.nav-dropdown a strong { display: block; font-weight: 600; font-size: 0.9375rem; }
.nav-dropdown a span { display: block; font-size: 0.8125rem; color: var(--muted-on-cream); margin-top: 2px; }
.nav-menu .nav-group { padding: 12px 14px 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-cream); }
.nav-menu .nav-sub { padding-left: 28px; }

@media (max-width: 1023px) {
    .nav-links, .nav-text { display: none; }
    .nav-toggle { display: inline-grid; place-items: center; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(540px, 78svh, 760px);
    background: var(--ink);
    color: var(--text-on-brand);
    overflow: hidden;
}
.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
    z-index: -2;
}
.hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(4, 25, 28, 0.55) 0%, rgba(4, 25, 28, 0.12) 45%, rgba(4, 25, 28, 0.6) 100%),
        linear-gradient(90deg, rgba(4, 25, 28, 0.6) 0%, rgba(4, 25, 28, 0) 62%);
}

.hero-inner {
    position: relative;
    padding-top: 112px;
    padding-bottom: 120px;
}
.hero h1 {
    font: 400 clamp(3rem, 5.8vw, 5.25rem)/1.02 var(--font-display);
    letter-spacing: -0.005em;
    max-width: 14ch;
    margin-bottom: 18px;
    text-wrap: balance;
}
.hero-sub {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.55;
    color: rgba(255, 253, 249, 0.88);
    max-width: 46ch;
    margin-bottom: 28px;
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.hero-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--white);
    text-underline-offset: 3px;
}

.hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 360px;
    margin-top: 40px;
    padding: 12px 20px 12px 12px;
    border-radius: var(--r-card);
    background: rgba(4, 25, 28, 0.62);
    border: 1px solid rgba(255, 253, 249, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--text-on-brand);
    text-decoration: none;
    transition: background-color 0.2s, transform 0.3s var(--ease);
}
.hero-card:hover { background: rgba(4, 25, 28, 0.78); transform: translateY(-2px); }
.hero-card img {
    width: 84px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--r-thumb);
    flex: none;
}
.hero-card strong { display: block; font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
.hero-card span span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--muted-on-brand); white-space: nowrap; }

@media (min-width: 900px) {
    .hero-card {
        position: absolute;
        right: var(--gutter);
        bottom: 32px;
        margin-top: 0;
    }
}
@media (prefers-reduced-transparency: reduce) {
    .hero-card { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   Statement (centered serif with one gradient phrase)
   -------------------------------------------------------------------------- */
.statement {
    background: var(--cream);
    color: var(--text-on-cream);
    text-align: center;
    padding: var(--section) 0 clamp(40px, 5vw, 64px);
}
.statement h2 {
    font: 400 clamp(2rem, 3.8vw, 3.25rem)/1.15 var(--font-display);
    letter-spacing: 0;
    max-width: 24ch;
    margin: 0 auto;
    text-wrap: balance;
}
.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --------------------------------------------------------------------------
   Bento image tiles
   -------------------------------------------------------------------------- */
.bento {
    background: var(--cream);
    padding: clamp(24px, 3vw, 40px) 0 clamp(140px, 16vw, 220px);
}
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}
/* Each tile is a <button> that opens its feature dialog. */
.tile {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    min-height: 320px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-tile);
    overflow: hidden;
    background: var(--brand);
    color: var(--text-on-brand);
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.7s var(--ease);
}
.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(4, 25, 28, 0.62) 0%, rgba(4, 25, 28, 0) 48%);
}
.tile h3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px 76px 0 24px;
    font: 500 clamp(1.125rem, 1.4vw, 1.375rem)/1.3 var(--font-sans);
    max-width: 30ch;
}
.tile-open {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 253, 249, 0.16);
    border: 1px solid rgba(255, 253, 249, 0.3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 18px;
    transition: background-color 0.2s;
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); }
.tile:hover .tile-open, .tile:focus-visible .tile-open { background: rgba(255, 253, 249, 0.32); }
.tile:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Tile widths on the 12-column bento. */
.tile-w12 { grid-column: span 12; min-height: 380px; }
.tile-w8 { grid-column: span 8; min-height: 380px; }
.tile-w7 { grid-column: span 7; min-height: 380px; }
.tile-w6 { grid-column: span 6; min-height: 340px; }
.tile-w5 { grid-column: span 5; min-height: 380px; }
.tile-w4 { grid-column: span 4; }
.tile-w3 { grid-column: span 3; min-height: 300px; }

@media (max-width: 900px) {
    .tile-w12, .tile-w8, .tile-w7, .tile-w6, .tile-w5 { grid-column: 1 / -1; min-height: 260px; }
    .tile-w4, .tile-w3 { grid-column: span 6; min-height: 240px; }
}
@media (max-width: 560px) {
    .tile-w4, .tile-w3 { grid-column: 1 / -1; min-height: 240px; }
}

/* Lifecycle strip (platform / commissions pages). */
.lifecycle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lifecycle li {
    position: relative;
    padding: 20px 18px 18px;
    border-radius: var(--r-card);
    background: rgba(255, 253, 249, 0.06);
    border: 1px solid var(--line-on-brand);
}
.lifecycle li strong { display: block; font: 400 1.5rem/1.1 var(--font-display); margin-bottom: 8px; }
.lifecycle li span { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--muted-on-brand); }
.lifecycle li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px;
    width: 12px;
    height: 1px;
    background: var(--line-on-brand);
}
@media (max-width: 900px) { .lifecycle { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lifecycle li:nth-child(3n)::after { display: none; } }
@media (max-width: 560px) { .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lifecycle li::after { display: none; } }

/* Simple definition table (roles). */
.def-table { width: 100%; border-collapse: collapse; }
.def-table th, .def-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-on-cream); }
.def-table th { width: 30%; font-weight: 600; }
.def-table td { color: var(--muted-on-cream); font-size: 0.9375rem; line-height: 1.55; }
.def-table tr:last-child th, .def-table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Feature dialog (Hatch-style: blurred cream backdrop, brand panel, image on
   top, title, then label + description pairs)
   -------------------------------------------------------------------------- */
.feature-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-tile);
    background: var(--brand-deep);
    color: var(--text-on-brand);
    box-shadow: 0 40px 100px rgba(4, 25, 28, 0.35);
    overflow: hidden;
}
.feature-dialog:focus, .feature-dialog:focus-visible { outline: none; }
.feature-dialog::backdrop {
    background: rgba(250, 244, 232, 0.55);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
@media (prefers-reduced-transparency: reduce) {
    .feature-dialog::backdrop { background: rgba(250, 244, 232, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.feature-scroll {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 40px 40px 36px;
    scrollbar-width: thin;
}
.feature-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 253, 249, 0.25);
    background: rgba(8, 42, 46, 0.7);
    color: var(--white);
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.feature-close:hover { background: rgba(255, 253, 249, 0.16); }
.feature-scroll img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r-card);
    margin-bottom: 26px;
}
.feature-scroll h2 {
    font: 500 1.5rem/1.2 var(--font-sans);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.feature-lede {
    color: var(--muted-on-brand);
    line-height: 1.55;
    margin-bottom: 26px;
}
.feature-scroll dl {
    display: grid;
    gap: 18px;
    margin: 0;
}
.feature-scroll dt { font-weight: 600; font-size: 0.9375rem; margin-bottom: 3px; }
.feature-scroll dd { margin: 0; color: var(--muted-on-brand); font-size: 0.9375rem; line-height: 1.55; }
.feature-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 30px;
}
.feature-actions a:not(.btn) {
    font-size: 0.9375rem;
    color: var(--white);
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .feature-dialog[open] { animation: dialog-in 0.35s var(--ease); }
    .feature-dialog[open]::backdrop { animation: backdrop-in 0.35s var(--ease); }
}
@keyframes dialog-in {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
}
@keyframes backdrop-in {
    from { opacity: 0; }
}

body.modal-open { overflow: hidden; }

@media (max-width: 560px) {
    .feature-scroll { padding: 28px 22px 26px; }
}

/* --------------------------------------------------------------------------
   Arch (brand dome rising into the cream)
   -------------------------------------------------------------------------- */
/* The dome (::before) is wider than the viewport; clip horizontally at <main>
   so it never creates a horizontal scrollbar (clip keeps sticky/vertical overflow intact). */
main { overflow-x: clip; }
.arch {
    position: relative;
    background: var(--brand);
    color: var(--text-on-brand);
    text-align: center;
    padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 10vw, 128px);
}
.arch::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: max(170%, 1200px);
    height: clamp(160px, 20vw, 300px);
    transform: translate(-50%, -50%);
    background: var(--brand);
    border-radius: 50%;
}
.arch .container { position: relative; }
.arch h2 {
    font: 400 clamp(2rem, 3.6vw, 3.25rem)/1.12 var(--font-display);
    letter-spacing: -0.01em;
    max-width: 24ch;
    margin: 0 auto 18px;
    text-wrap: balance;
}
.arch p {
    color: var(--muted-on-brand);
    font-size: 1.0625rem;
    max-width: 58ch;
    margin: 0 auto 32px;
}
.arch-link {
    display: inline-block;
    margin-top: 44px;
    font-size: 0.8125rem;
    color: var(--muted-on-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.arch-link:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Workflow (light-to-brand gradient, 4 columns)
   Gradient stops are in px so the light band only covers the heading, no
   matter how tall the section gets on mobile.
   -------------------------------------------------------------------------- */
.flow {
    position: relative;
    color: var(--text-on-brand);
    padding: var(--section) 0;
    background: linear-gradient(180deg, #e6f2f1 0, #cfe5e3 200px, #1d5a5e 480px, var(--brand) 620px);
}
.flow-head {
    text-align: center;
    color: var(--brand);
    max-width: 60ch;
    margin: 0 auto clamp(40px, 5vw, 64px);
}
.flow-head h2 {
    font: 500 clamp(1.875rem, 3vw, 2.625rem)/1.15 var(--font-sans);
    letter-spacing: -0.015em;
    margin-bottom: 14px;
    text-wrap: balance;
}
.flow-head p { color: #3e5457; font-size: 1.0625rem; }

.flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.step { text-align: center; }
.step-visual {
    aspect-ratio: 4 / 5;
    margin-bottom: 20px;
    border-radius: var(--r-tile);
    overflow: hidden;
    background: var(--brand-deep);
    box-shadow: 0 24px 60px rgba(4, 25, 28, 0.35);
}
.step-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}
.step:hover .step-visual img { transform: scale(1.03); }
.step h3 { font: 600 1.0625rem/1.3 var(--font-sans); margin-bottom: 8px; }
.step p { color: var(--muted-on-brand); font-size: 0.9375rem; line-height: 1.55; }

@media (max-width: 900px) { .flow-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .flow-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */
.quote {
    background: var(--brand);
    color: var(--text-on-brand);
    text-align: center;
    padding: var(--section) 0;
}
.quote blockquote {
    font: 400 clamp(1.75rem, 3vw, 2.75rem)/1.25 var(--font-display);
    letter-spacing: -0.005em;
    max-width: 32ch;
    margin: 0 auto;
    text-wrap: balance;
}
.quote figcaption {
    margin-top: 28px;
    color: var(--muted-on-brand);
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Included (horizontal rail of feature cards)
   -------------------------------------------------------------------------- */
.included {
    background: var(--brand);
    color: var(--text-on-brand);
    padding: 0 0 var(--section);
}
.included-head {
    text-align: center;
    max-width: 62ch;
    margin: 0 auto clamp(28px, 3vw, 40px);
}
.included-head h2 {
    font: 500 clamp(1.875rem, 3vw, 2.625rem)/1.15 var(--font-sans);
    letter-spacing: -0.015em;
    margin-bottom: 14px;
    text-wrap: balance;
}
.included-head p { color: var(--muted-on-brand); font-size: 1.0625rem; }

/* Fanned card carousel: an endless hand of cards. The track is a fixed-height
   stage; site.js positions every card with a transform from its distance to
   the center (x offset, drop, lean, scale). Five cards show at desktop width,
   the outer two clipped by the viewport and the stage bottom, like Hatch's. */
.fan {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.fan-track {
    position: relative;
    height: 560px;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.fan-track.is-grabbing { cursor: grabbing; }
.fan-track:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.fan-card {
    position: absolute;
    top: 40px;
    left: calc(50% - 160px);
    width: 320px;
    height: 420px;
    isolation: isolate;
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 253, 249, 0.14);
    border-radius: var(--r-tile);
    overflow: hidden;
    background: var(--brand-deep);
    color: var(--text-on-brand);
    text-align: left;
    cursor: inherit;
    transform-origin: 50% 50%;
    box-shadow: 0 30px 70px rgba(4, 25, 28, 0.55);
    -webkit-appearance: none;
    appearance: none;
}
.fan-card.is-center { cursor: pointer; }
.fan-card picture, .fan-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}
.fan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(4, 25, 28, 0) 40%, rgba(4, 25, 28, 0.55) 72%, rgba(4, 25, 28, 0.9) 100%);
}
.fan-card:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.fan-card-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 22px 22px;
}
.fan-card-text strong { display: block; font: 600 1.125rem/1.25 var(--font-sans); margin-bottom: 6px; }
.fan-card-text span { display: block; font-size: 0.875rem; line-height: 1.45; color: rgba(255, 253, 249, 0.8); }
@media (max-width: 640px) {
    .fan-track { height: 430px; }
    .fan-card { top: 28px; left: calc(50% - 120px); width: 240px; height: 320px; }
}

.usage {
    text-align: center;
    color: var(--muted-on-brand);
    font-size: 0.9375rem;
    max-width: 70ch;
    margin: 8px auto 0;
}
.usage a { color: var(--white); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Compare table
   -------------------------------------------------------------------------- */
.compare {
    background: var(--cream);
    color: var(--text-on-cream);
    padding: var(--section) 0 clamp(48px, 6vw, 80px);
}
.compare-head {
    text-align: center;
    margin-bottom: clamp(36px, 4vw, 56px);
}
.compare-head h2 {
    font: 500 clamp(1.875rem, 3vw, 2.625rem)/1.15 var(--font-sans);
    letter-spacing: -0.015em;
    margin-bottom: 22px;
}

.table-wrap { overflow-x: auto; }
.cmp {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}
.cmp th, .cmp td {
    padding: 18px 16px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--line-on-cream);
}
.cmp th:first-child, .cmp td:first-child {
    text-align: left;
    width: 34%;
}
.cmp thead th { border-bottom: 0; padding-bottom: 10px; }
.cmp thead th small {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted-on-cream);
}
.cmp thead th strong {
    display: block;
    font: 400 clamp(1.5rem, 2.2vw, 2rem)/1 var(--font-display);
}
.cmp thead th em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--muted-on-cream);
}
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:first-child { font-size: 0.9375rem; }
.cmp th:nth-child(2), .cmp td:nth-child(2) { background: rgba(255, 253, 249, 0.8); }
.cmp thead th:nth-child(2) { border-radius: var(--r-card) var(--r-card) 0 0; }
.cmp tbody tr:last-child td:nth-child(2) { border-radius: 0 0 var(--r-card) var(--r-card); }
.cmp .yes { font-size: 20px; color: var(--brand); }
.cmp .no { font-size: 18px; color: rgba(15, 59, 64, 0.35); }

.compare-note {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8125rem;
    color: var(--muted-on-cream);
}
.compare-note a { color: var(--brand); }

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */
.newsletter {
    background: var(--cream);
    color: var(--text-on-cream);
    text-align: center;
    padding: clamp(48px, 6vw, 80px) 0 var(--section);
}
.newsletter h2 {
    font: 400 clamp(1.875rem, 3.2vw, 2.75rem)/1.15 var(--font-display);
    max-width: 24ch;
    margin: 0 auto 28px;
    text-wrap: balance;
}
.nl-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    max-width: 540px;
    margin: 0 auto;
}
.nl-field {
    flex: 1 1 260px;
    text-align: left;
}
.nl-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand);
}
.nl-field input {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(15, 59, 64, 0.32);
    background: var(--white);
    color: var(--brand);
    font: 400 1rem var(--font-sans);
}
.nl-field input::placeholder { color: #64777a; }
.nl-field input:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.nl-msg {
    min-height: 1.5em;
    margin-top: 14px;
    font-size: 0.9375rem;
}
.nl-msg.ok { color: #1f6b3a; }
.nl-msg.err { color: #9b2c2c; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
    background: var(--brand);
    color: var(--text-on-brand);
    padding: var(--section) 0;
}
.faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 5vw, 80px);
}
.faq-eyebrow {
    margin-bottom: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-on-brand);
}
.faq h2 {
    font: 400 clamp(2rem, 3.2vw, 2.75rem)/1.12 var(--font-display);
    letter-spacing: -0.01em;
}
.faq details { border-bottom: 1px solid var(--line-on-brand); }
.faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    font: 500 1.0625rem/1.4 var(--font-sans);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; font-size: 18px; transition: transform 0.3s var(--ease); }
.faq details[open] summary i { transform: rotate(180deg); }
.faq details p {
    max-width: 70ch;
    margin: 0 0 22px;
    color: var(--muted-on-brand);
    line-height: 1.6;
}
.faq-more {
    margin-top: 24px;
    font-size: 0.9375rem;
    color: var(--muted-on-brand);
}
.faq-more a { color: var(--white); text-underline-offset: 3px; }

@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
    background: var(--brand-deep);
    color: var(--muted-on-brand);
    padding: clamp(56px, 7vw, 88px) 0 36px;
    border-top: 1px solid var(--line-on-brand);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 32px;
}
.footer-brand img { height: 88px; width: auto; }
.footer-brand p {
    max-width: 32ch;
    margin-top: 20px;
    font-size: 0.9375rem;
    line-height: 1.55;
}
.footer .footer-badges {
    display: flex;
    gap: 14px;
    margin-top: 24px;
}
.footer-badges li { display: block; }
.footer-badges a {
    display: block;
    border-radius: 50%;
    transition: transform 0.2s ease;
}
.footer-badges a:hover { transform: translateY(-2px); }
.footer-badges img {
    display: block;
    width: 84px;
    height: 84px;
}
.footer h3 {
    margin-bottom: 18px;
    font: 600 0.9375rem/1 var(--font-sans);
    color: var(--white);
}
.footer ul { display: grid; gap: 10px; }
.footer a {
    font-size: 0.9375rem;
    color: var(--muted-on-brand);
    text-decoration: none;
}
.footer a:hover { color: var(--white); }
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line-on-brand);
    font-size: 0.8125rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom a { font-size: 0.8125rem; }

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Scroll reveal (only when JS is present, only without reduced motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
        transition-delay: calc(var(--i, 0) * 80ms);
    }
    .js [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   Interior pages: shared layout primitives used by every non-home page and
   by the components in includes/components and includes/blog.
   ========================================================================== */

/* Section wrappers. Interior pages alternate cream, deep cream, and brand. */
.section { padding: var(--section) 0; }
.section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.section-cream { background: var(--cream); color: var(--text-on-cream); }
.section-cream-deep { background: var(--cream-deep); color: var(--text-on-cream); }
.section-brand { background: var(--brand); color: var(--text-on-brand); }
.section-brand-deep { background: var(--brand-deep); color: var(--text-on-brand); }
.section + .section-cream.section-cream, .section-cream + .section-cream { border-top: 1px solid var(--line-on-cream); }

.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.medium { max-width: 980px; margin-left: auto; margin-right: auto; }

/* Section heading block: headline stacked over one short paragraph. */
.section-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(36px, 4vw, 56px); }
.section-head h2, .title-serif {
    font: 400 clamp(1.875rem, 3.2vw, 2.75rem)/1.15 var(--font-display);
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.section-head.is-sans h2, .title-sans {
    font: 500 clamp(1.75rem, 2.8vw, 2.5rem)/1.15 var(--font-sans);
    letter-spacing: -0.015em;
}
.section-head p { margin-top: 14px; font-size: 1.0625rem; }
.section-cream .section-head p, .section-cream-deep .section-head p { color: var(--muted-on-cream); }
.section-brand .section-head p, .section-brand-deep .section-head p { color: var(--muted-on-brand); }
.section-head.is-left { text-align: left; margin-left: 0; }

/* Interior page hero: brand so the announcement bar, pill nav, and hero read
   as one block. Serif h1, optional meta line (blog), lede, and actions. */
.page-hero {
    background: var(--brand);
    color: var(--text-on-brand);
    padding: clamp(112px, 12vw, 150px) 0 clamp(56px, 7vw, 88px);
}
.page-hero.is-cream { background: var(--cream); color: var(--text-on-cream); }
.page-hero .container { max-width: 980px; }
.page-hero.is-wide .container { max-width: var(--container); }
.page-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: var(--muted-on-brand);
}
.page-hero.is-cream .page-hero-meta { color: var(--muted-on-cream); }
.page-hero-meta .pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-on-brand);
    font-weight: 600;
    color: var(--text-on-brand);
}
.page-hero.is-cream .page-hero-meta .pill { border-color: var(--line-on-cream); color: var(--text-on-cream); }
.page-hero-meta a { color: inherit; text-decoration: none; }
.page-hero-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-hero h1 {
    font: 400 clamp(2.5rem, 5vw, 4.25rem)/1.05 var(--font-display);
    letter-spacing: -0.005em;
    max-width: 22ch;
    text-wrap: balance;
}
.page-hero.is-center { text-align: center; }
.page-hero.is-center h1, .page-hero.is-center .page-hero-lede { margin-left: auto; margin-right: auto; }
.page-hero.is-center .page-hero-meta, .page-hero.is-center .page-hero-actions { justify-content: center; }
.page-hero-lede {
    margin-top: 18px;
    max-width: 60ch;
    font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
    line-height: 1.55;
    color: var(--muted-on-brand);
}
.page-hero.is-cream .page-hero-lede { color: var(--muted-on-cream); }
.page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 28px;
}
.page-hero-actions a:not(.btn) {
    font-size: 0.9375rem;
    font-weight: 500;
    color: inherit;
    text-underline-offset: 3px;
}
.page-hero-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-size: 0.9375rem;
}
.page-hero-byline .avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 253, 249, 0.12);
    border: 1px solid var(--line-on-brand);
    font: 600 0.875rem var(--font-sans);
}
.page-hero-byline strong { display: block; font-weight: 600; }
.page-hero-byline span { color: var(--muted-on-brand); font-size: 0.875rem; }

/* Long-form typography for articles, docs, legal pages, solutions copy. */
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
    margin-top: 2.2em;
    font: 500 clamp(1.5rem, 2.2vw, 1.875rem)/1.2 var(--font-sans);
    letter-spacing: -0.015em;
}
.prose h3 {
    margin-top: 1.8em;
    font: 600 1.1875rem/1.3 var(--font-sans);
}
.prose h4 { margin-top: 1.5em; font: 600 1.0625rem/1.4 var(--font-sans); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.6em; }
.prose p, .prose li { color: var(--text-on-cream); }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 59, 64, 0.35); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--muted-on-cream); }
.prose strong { font-weight: 600; }
.prose blockquote {
    margin: 1.6em 0;
    padding: 0 0 0 1.25em;
    border-left: 2px solid var(--brand);
    font: 400 1.25rem/1.45 var(--font-display);
}
.prose hr { border: 0; border-top: 1px solid var(--line-on-cream); margin: 2.4em 0; }
.prose img { border-radius: var(--r-card); }
.prose figure figcaption { margin-top: 8px; font-size: 0.875rem; color: var(--muted-on-cream); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-on-cream); }
.prose th { font-weight: 600; }
.prose code {
    padding: 0.1em 0.4em;
    border-radius: 6px;
    background: rgba(15, 59, 64, 0.08);
    font-size: 0.9em;
}
.prose pre {
    padding: 18px 20px;
    border-radius: var(--r-card);
    background: var(--brand-deep);
    color: var(--white);
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
}
.prose pre code { padding: 0; background: none; font-size: inherit; }
.prose .lead { font-size: 1.1875rem; color: var(--muted-on-cream); }
.section-brand .prose p, .section-brand .prose li, .section-brand .prose a { color: var(--text-on-brand); }

/* Callout: one soft tinted box, used for key takeaways and notes. */
.callout {
    padding: 22px 26px;
    border-radius: var(--r-card);
    background: var(--cream-deep);
    border: 1px solid var(--line-on-cream);
}
.callout > * + * { margin-top: 0.6em; }
.callout h3, .callout h4 { margin-top: 0; }
.callout.is-brand { background: var(--brand); color: var(--text-on-brand); border-color: transparent; }
.callout.is-brand p, .callout.is-brand li { color: var(--text-on-brand); }

/* Check list (Phosphor check icon per item). */
.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.check-list li i { flex: none; margin-top: 3px; font-size: 20px; color: var(--brand); }
.section-brand .check-list li i, .callout.is-brand .check-list li i { color: var(--white); }

/* Two-column split: copy on one side, a panel or list on the other. */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Stat panel: brand card with serif numbers. */
.stat-panel {
    padding: clamp(28px, 3vw, 40px);
    border-radius: var(--r-tile);
    background: var(--brand);
    color: var(--text-on-brand);
}
.stat-panel h3 { font: 600 1.0625rem/1.3 var(--font-sans); margin-bottom: 22px; }
.stat-panel dl { display: grid; gap: 20px; margin: 0; }
.stat-panel dt { font: 400 clamp(1.75rem, 2.6vw, 2.25rem)/1 var(--font-display); }
.stat-panel dd { margin: 6px 0 0; color: var(--muted-on-brand); font-size: 0.9375rem; }

/* Price stack (pricing-savings component). */
.price-stack { display: grid; gap: 12px; }
.price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--r-card);
    border: 1px solid var(--line-on-cream);
    background: var(--white);
}
.price-row span { color: var(--muted-on-cream); font-size: 0.9375rem; }
.price-row strong { font: 400 1.5rem/1 var(--font-display); white-space: nowrap; }
.price-row.is-total { background: var(--brand); color: var(--text-on-brand); border-color: transparent; }
.price-row.is-total span { color: var(--muted-on-brand); }
.price-row.is-total strong { font-size: 1.75rem; }

/* Link card grid (related solutions, related articles, listing pages). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.link-card.is-compact { padding: 18px 20px; gap: 6px; }
.link-card.is-compact h3 { font-size: 1rem; }
@media (max-width: 900px) { .card-grid.is-3, .card-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid.is-2, .card-grid.is-3, .card-grid.is-4 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .card-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .card-grid.is-3 { grid-template-columns: 1fr; } }
.link-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: var(--r-tile);
    border: 1px solid var(--line-on-cream);
    background: var(--white);
    color: var(--text-on-cream);
    text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.link-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15, 59, 64, 0.1); }
.link-card .meta { font-size: 0.8125rem; color: var(--muted-on-cream); }
.link-card h3, .link-card h4 { font: 600 1.0625rem/1.35 var(--font-sans); }
.link-card p { color: var(--muted-on-cream); font-size: 0.9375rem; line-height: 1.5; }
.link-card .more { margin-top: auto; padding-top: 6px; font-size: 0.9375rem; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.section-brand .link-card, .section-brand-deep .link-card {
    background: rgba(255, 253, 249, 0.06);
    border-color: var(--line-on-brand);
    color: var(--text-on-brand);
}
.section-brand .link-card .meta, .section-brand .link-card p { color: var(--muted-on-brand); }
.section-brand .link-card:hover { box-shadow: none; background: rgba(255, 253, 249, 0.1); }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: inherit; text-underline-offset: 3px; }
.center { text-align: center; }
.mt-lg { margin-top: clamp(28px, 3vw, 40px); }

/* References list. */
.refs { counter-reset: ref; display: grid; gap: 12px; }
.refs li { display: flex; align-items: flex-start; gap: 14px; font-size: 0.9375rem; line-height: 1.5; }
.refs li::before {
    counter-increment: ref;
    content: counter(ref);
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--brand);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
}
.refs a { color: var(--brand); text-underline-offset: 3px; }
.refs .source { margin-left: 8px; font-size: 0.75rem; font-weight: 600; color: var(--muted-on-cream); }

/* Comparison table variant with text cells and optional notes. */
.cmp .cell-note { display: block; margin-top: 4px; font-size: 0.8125rem; font-weight: 400; color: var(--muted-on-cream); }
.cmp .cell-note a { color: var(--brand); }
.cmp .is-positive { font-weight: 600; color: var(--brand); }
.cmp .is-negative { color: rgba(15, 59, 64, 0.5); }
.cmp .is-neutral { color: var(--muted-on-cream); }
.cmp-caption { text-align: center; margin-top: 16px; font-size: 0.8125rem; color: var(--muted-on-cream); }

/* CTA band. */
.cta-band {
    background: var(--brand);
    color: var(--text-on-brand);
    text-align: center;
    padding: var(--section) 0;
}
.cta-band h2 {
    font: 400 clamp(2rem, 3.4vw, 3rem)/1.12 var(--font-display);
    letter-spacing: -0.01em;
    max-width: 24ch;
    margin: 0 auto 16px;
    text-wrap: balance;
}
.cta-band p { color: var(--muted-on-brand); font-size: 1.0625rem; max-width: 58ch; margin: 0 auto 30px; }
.cta-band .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 24px; }
.cta-band .actions a:not(.btn) { color: var(--white); font-size: 0.9375rem; font-weight: 500; text-underline-offset: 3px; }
.section-brand + .cta-band, .section-brand-deep + .cta-band { border-top: 1px solid var(--line-on-brand); }

/* Blog article layout. */
.article-body { padding: clamp(48px, 6vw, 80px) 0 var(--section); }
.article-footer { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line-on-cream); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 0.9375rem; color: var(--muted-on-cream); }
.recent-list { display: grid; gap: 16px; }
.recent-list a { font-weight: 500; color: var(--text-on-cream); text-decoration: none; }
.recent-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recent-list span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted-on-cream); }

/* Forms on interior pages (contact, demo, careers). */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; }
.field input, .field select, .field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: var(--r-card);
    border: 1px solid rgba(15, 59, 64, 0.32);
    background: var(--white);
    color: var(--brand);
    font: 400 1rem/1.4 var(--font-sans);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #64777a; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.field .help { margin-top: 6px; font-size: 0.8125rem; color: var(--muted-on-cream); }
.field .error { margin-top: 6px; font-size: 0.8125rem; color: #9b2c2c; }
.form-status { min-height: 1.5em; margin-top: 14px; font-size: 0.9375rem; }
.form-status.ok { color: #1f6b3a; }
.form-status.err { color: #9b2c2c; }

/* Converted 1.0 stat rows and card rows inside articles. */
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.prose .grid-auto > * + * { margin-top: 0; }
.is-stat { text-align: center; }
.stat-value { font: 400 clamp(1.75rem, 2.4vw, 2.25rem)/1.1 var(--font-display); }
.stat-label { font-size: 0.875rem; color: var(--muted-on-cream); }
.callout .stat-value + .stat-label, .callout .stat-label + .stat-label { margin-top: 4px; }
.callout.is-brand .stat-label { color: var(--muted-on-brand); }

/* Callout internals (converted 1.0 boxes). */
.prose .callout > * + * { margin-top: 0.85em; }
.prose .callout > :first-child { margin-top: 0; }
.prose .callout > * + h2, .prose .callout > * + h3, .prose .callout > * + h4 { margin-top: 1.2em; }
.prose .callout h2 { font-size: 1.375rem; }
.prose .callout h3 { font-size: 1.125rem; }
.prose .callout p, .prose .callout li { font-size: 1rem; }
.callout .callout { background: var(--white); }
.callout.is-brand h2, .callout.is-brand h3, .callout.is-brand h4, .callout.is-brand a { color: var(--text-on-brand); }
.callout.is-brand .callout { background: rgba(255, 253, 249, 0.08); border-color: rgba(255, 253, 249, 0.14); }
.callout.is-brand .callout p, .callout.is-brand .callout li { color: var(--text-on-brand); }
.callout.is-brand .check-list li i { color: var(--white); }
.eyebrow {
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-on-cream);
}
.callout.is-brand .eyebrow, .section-brand .eyebrow, .arch .eyebrow { color: var(--muted-on-brand); }

/* About */
.team-card { padding: clamp(24px, 3vw, 32px); background: var(--white); }
.team-card .avatar { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: var(--brand); color: var(--white); font: 400 1.5rem/1 var(--font-display); }
.team-card h3 { font-size: 1.125rem; }
.team-card .team-role { margin: 4px 0 12px; font-size: 0.875rem; font-weight: 600; color: var(--muted-on-cream); }
.team-card p { font-size: 0.9375rem; line-height: 1.55; }
.team-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.875rem; font-weight: 600; color: var(--brand); text-decoration: none; }
.team-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.timeline { list-style: none; margin: 0 auto; padding: 0; text-align: left; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line-on-brand); }
.timeline li:last-child { border-bottom: 1px solid var(--line-on-brand); }
.timeline-date { font: 600 0.8125rem/1.5 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-on-brand); padding-top: 4px; }
.timeline h3 { font: 600 1.0625rem/1.35 var(--font-sans); margin-bottom: 6px; }
.timeline h3 a { color: var(--white); text-decoration: none; }
.timeline h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.arch .timeline p { margin: 0; max-width: none; font-size: 0.9375rem; line-height: 1.55; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 1fr; gap: 6px; } }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 40px; }
.pager-pages { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pager-btn, .pager-num { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-on-cream); background: var(--white); color: var(--brand); font: 600 0.875rem/1 var(--font-sans); text-decoration: none; }
.pager-num { padding: 0; width: 40px; }
.pager-btn:hover, .pager-num:hover { border-color: var(--brand); }
.pager-num.is-current { background: var(--brand); color: var(--white); border-color: var(--brand); }
.pager-btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* Demo booking */
.booking-card { padding: clamp(24px, 3vw, 40px); background: var(--white); border: 1px solid var(--line-on-cream); border-radius: var(--r-tile); }
.booking-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
.booking-card .help { margin-bottom: 20px; }
.booking-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.day-btn { display: grid; gap: 2px; padding: 14px 10px; text-align: center; background: var(--cream); border: 2px solid var(--line-on-cream); border-radius: var(--r-card); color: var(--text-on-cream); text-decoration: none; font: inherit; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.day-btn:hover, .day-btn:focus-visible { border-color: var(--brand); background: var(--white); }
.day-dow { font-size: 0.8125rem; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; }
.day-num { font: 400 1.75rem/1.1 var(--font-display); }
.day-mon { font-size: 0.8125rem; color: var(--muted-on-cream); }
.booking-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.time-btn { display: block; padding: 12px; text-align: center; background: var(--cream); border: 2px solid var(--line-on-cream); border-radius: var(--r-thumb); color: var(--text-on-cream); font: 600 0.9375rem/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.time-btn:hover, .time-btn:focus-visible { border-color: var(--brand); background: var(--white); }
.booking-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 16px; margin: 0 0 18px; background: rgba(15, 59, 64, 0.06); border-radius: var(--r-thumb); font-weight: 600; color: var(--brand); font-size: 0.9375rem; }
.booking-summary i { vertical-align: -2px; margin-right: 4px; }
.booking-empty { text-align: center; padding: 28px 0; color: var(--muted-on-cream); }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; background: none; border: 0; padding: 0; font: 600 0.9375rem/1 var(--font-sans); color: var(--brand); text-decoration: none; cursor: pointer; }
.back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.booking-success { text-align: center; }
.booking-success .icon-badge.is-round { border-radius: 50%; width: 64px; height: 64px; margin: 0 auto 16px; background: #1f8a4c; }
.booking-success .icon-badge.is-round i { font-size: 30px; }
.booking-success .booking-summary { display: inline-flex; margin: 12px 0 18px; }
.booking-success .btn { margin-top: 10px; }
.booking-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.booking-person { display: grid; gap: 4px; padding: 16px 18px; background: var(--cream); border: 2px solid var(--line-on-cream); border-radius: var(--r-card); color: var(--text-on-cream); text-decoration: none; }
.booking-person span { font-size: 0.875rem; color: var(--muted-on-cream); }
.booking-person:hover { border-color: var(--brand); background: var(--white); }
.booking .form-status.err { margin-bottom: 16px; }

/* Careers */
button.link-card { text-align: left; font: inherit; cursor: pointer; width: 100%; }
.feature-dialog.is-light { background: var(--cream); color: var(--text-on-cream); width: min(680px, calc(100vw - 32px)); }
.feature-dialog.is-light .feature-close { color: var(--brand); background: rgba(15, 59, 64, 0.06); }
.feature-dialog.is-light .feature-close:hover { background: rgba(15, 59, 64, 0.12); }
.feature-dialog.is-light .eyebrow { color: var(--muted-on-cream); }
.feature-dialog .eyebrow { margin-bottom: 8px; }
.feature-dialog .feature-scroll .check-list li span { color: var(--muted-on-brand); font-size: 0.9375rem; }
.field input[type="file"] { padding: 9px 12px; background: var(--white); }
.field .is-invalid, .field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { outline: 2px solid #9b2c2c; outline-offset: 1px; }
.radio-row { display: flex; gap: 20px; padding-top: 4px; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9375rem; margin: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Security */
.trust-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 44px); }
.trust-card h2 { font-size: 1.5rem; margin-bottom: 10px; }
.trust-card p { color: var(--muted-on-brand); }
.trust-badges { display: flex; gap: 16px; }
.trust-badges img { width: 110px; height: 110px; }
@media (max-width: 720px) { .trust-card { grid-template-columns: 1fr; } }

/* API */
.code-block { padding: 22px 24px; background: var(--ink); color: var(--text-on-brand); border-color: rgba(255, 253, 249, 0.12); overflow-x: auto; }
.code-block p { margin: 0; white-space: nowrap; font-size: 0.875rem; line-height: 1.7; color: var(--text-on-brand); }
.api-grid .callout { background: var(--white); }
@media (max-width: 1100px) { .api-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* System status */
.status-banner { display: flex; align-items: center; gap: 22px; padding: clamp(24px, 3vw, 36px); }
.status-banner h2 { font-size: 1.5rem; margin-bottom: 6px; }
.status-banner p { margin: 0; color: var(--muted-on-brand); }
.status-dot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 26px; color: var(--white); }
.status-dot.is-operational { background: #1f8a4c; }
.status-dot.is-degraded { background: #c77800; }
.status-list { display: grid; gap: 10px; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; background: var(--white); border: 1px solid var(--line-on-cream); border-radius: var(--r-card); }
.status-row h3 { font: 600 1rem/1.3 var(--font-sans); }
.status-row p { margin: 4px 0 0; font-size: 0.875rem; color: var(--muted-on-cream); }
.status-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; }
.status-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-pill.is-operational { background: rgba(31, 138, 76, 0.12); color: #1f6b3a; }
.status-pill.is-degraded, .status-pill.is-maintenance { background: rgba(244, 162, 58, 0.18); color: #7a4b00; }
.status-pill.is-outage { background: rgba(155, 44, 44, 0.12); color: #9b2c2c; }
@media (max-width: 640px) { .status-row { flex-direction: column; align-items: flex-start; } .status-banner { flex-direction: column; align-items: flex-start; } }

/* Documentation */
.docs-cat { padding: 26px 28px; background: var(--white); }
.docs-cat h3 { font: 600 1.0625rem/1.3 var(--font-sans); margin-bottom: 14px; }
.docs-list { display: grid; gap: 8px; }
.docs-list a { display: flex; align-items: flex-start; gap: 8px; color: var(--text-on-cream); text-decoration: none; font-size: 0.9375rem; line-height: 1.45; }
.docs-list a i { flex: none; margin-top: 3px; color: var(--brand); }
.docs-list a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; background: var(--cream-deep); padding: 2px 6px; border-radius: 6px; }

/* Help center */
.lookup-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.lookup-form .lookup-submit .btn { height: 48px; }
@media (max-width: 720px) { .lookup-form { grid-template-columns: 1fr; } }
.ticket-card { padding: clamp(24px, 3vw, 40px); background: var(--white); }
.ticket-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ticket-head h2 { font-size: 1.5rem; }
.ticket-subject { padding: 18px 0; margin: 18px 0; border-top: 1px solid var(--line-on-cream); border-bottom: 1px solid var(--line-on-cream); }
.ticket-subject h3 { font: 600 1.125rem/1.35 var(--font-sans); }
.ticket-msg { padding: 18px 20px; border-radius: var(--r-thumb); margin-top: 12px; background: var(--cream); border-left: 4px solid var(--line-on-cream); }
.ticket-msg.is-support { background: rgba(15, 59, 64, 0.06); border-left-color: var(--brand); }
.ticket-msg-meta { font-size: 0.8125rem; font-weight: 600; color: var(--muted-on-cream); margin-bottom: 6px; }
.ticket-wait { margin-top: 18px; padding: 16px; text-align: center; border-radius: var(--r-thumb); background: var(--cream-deep); color: var(--muted-on-cream); }
.tag.is-open { background: rgba(45, 212, 191, 0.16); color: var(--brand); }
.tag.is-in_progress { background: rgba(244, 162, 58, 0.18); color: #7a4b00; }
.tag.is-resolved { background: rgba(31, 107, 58, 0.14); color: #1f6b3a; }
.tag.is-closed { background: var(--cream-deep); color: var(--muted-on-cream); }
.link-card .icon-badge { margin-bottom: 4px; }

/* Comparison pages (vs-page.php) */
.verdict { padding: clamp(28px, 4vw, 44px); }
.verdict-summary {
    font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.45 var(--font-display);
    letter-spacing: -0.005em;
}
.verdict-summary strong { font-weight: 400; color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 253, 249, 0.35); text-underline-offset: 4px; }
.verdict-note { margin-top: 18px; color: var(--muted-on-brand); line-height: 1.55; }
.verdict-grid { margin-top: 26px; }
.verdict-grid .callout h3 { font: 600 0.9375rem/1.3 var(--font-sans); }
.verdict-grid .callout p { font-size: 0.9375rem; line-height: 1.5; }
.choose-grid .callout { padding: clamp(24px, 3vw, 36px); }
.choose-grid .callout h3 { font: 600 1.125rem/1.3 var(--font-sans); margin-bottom: 18px; }
.callout .callout.is-brand { background: var(--brand); border-color: transparent; }
.callout.is-brand a.btn-white, .callout.is-brand a.btn-white:hover, .arch a.btn-white, .section-brand a.btn-white, .section-brand-deep a.btn-white, .faq a.btn-white { color: var(--brand); }
.tag.is-brand { background: var(--brand); color: var(--white); }
.prose p > i.ph:first-child, .prose li > i.ph:first-child { margin-right: 6px; vertical-align: -2px; }
.price-row .price-name { display: block; font: 600 1rem/1.3 var(--font-sans); white-space: normal; color: var(--text-on-cream); margin-bottom: 2px; }
.price-stack.is-dark .price-row .price-name { color: var(--text-on-brand); }
.price-stack.is-dark .price-row.is-total .price-name, .price-row.is-total .price-name { color: inherit; }
.price-stack.is-dark .price-row.is-total .price-name { color: var(--brand); }
.callout.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; line-height: 1.65; }
.callout.is-mono p { font-family: inherit; font-size: inherit; }

/* Fixed-column grids preserved from 1.0 markup; collapse on small screens. */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prose .grid-2 > * + *, .prose .grid-3 > * + *, .prose .grid-4 > * + * { margin-top: 0; }
.prose .grid-2 + *, .prose .grid-3 + *, .prose .grid-4 + *, .prose .grid-auto + * { margin-top: 2em; }
.grid-2 > .callout, .grid-3 > .callout, .grid-4 > .callout, .grid-auto > .callout { height: 100%; }
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand);
    color: var(--white);
    margin-bottom: 14px;
}
.icon-badge i { font-size: 22px; }
.callout.is-brand .icon-badge { background: rgba(255, 253, 249, 0.12); }
.prose .icon-badge + h3, .prose .icon-badge + h4 { margin-top: 0; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Inline badges. */
.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: rgba(15, 59, 64, 0.08);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}
.callout.is-brand .tag, .section-brand .tag { background: rgba(255, 253, 249, 0.14); color: var(--text-on-brand); }

/* Lists and splits inside the brand dome section. */
.arch .lifecycle, .arch .split { margin-top: clamp(32px, 4vw, 48px); text-align: left; }
.arch .check-list li i { color: var(--white); }
.arch .lifecycle li strong, .arch .lifecycle li span, .arch .check-list li { color: var(--text-on-brand); }
.arch .lifecycle li span { color: var(--muted-on-brand); }

/* Ordered lists styled as strips or numbered refs manage their own markers. */
ol.lifecycle, ol.refs { list-style: none; padding: 0; margin: 0; }

/* Pricing page. */
.price-hero { text-align: center; max-width: 60ch; margin: 0 auto clamp(32px, 4vw, 48px); }
.price-hero-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-on-cream); margin-bottom: 12px; }
.price-hero-amount { font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1 var(--font-display); color: var(--brand); }
.price-hero-amount span { display: block; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; margin-bottom: 8px; }
.price-hero-sub { margin: 18px auto 26px; font-size: 1.0625rem; color: var(--muted-on-cream); }
.usage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; }
@media (max-width: 640px) { .usage-grid { grid-template-columns: 1fr 1fr; } }
.price-note { margin-top: 14px; font-size: 0.8125rem; line-height: 1.5; color: var(--muted-on-cream); }
.usage-grid div { padding: 20px; border-radius: var(--r-card); background: var(--white); border: 1px solid var(--line-on-cream); text-align: center; }
.usage-grid strong { display: block; font: 400 1.75rem/1 var(--font-display); margin-bottom: 6px; }
.usage-grid span { font-size: 0.875rem; color: var(--muted-on-cream); }
@media (max-width: 800px) { .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-stack.is-dark .price-row { background: rgba(255, 253, 249, 0.06); border-color: var(--line-on-brand); color: var(--text-on-brand); }
.price-stack.is-dark .price-row span { color: var(--muted-on-brand); }
.price-stack.is-dark .price-row.is-total { background: var(--white); color: var(--brand); }
.price-stack.is-dark .price-row.is-total span, .price-stack.is-dark .price-row.is-total span strong { color: var(--brand); }
.cmp-wide { min-width: 960px; font-size: 0.875rem; }
.cmp-wide th, .cmp-wide td { padding: 14px 10px; }
.cmp-wide thead th { font-size: 0.75rem; font-weight: 600; color: var(--muted-on-cream); text-align: center; }
.cmp-wide tbody th { text-align: left; font-weight: 600; }
.cmp-wide tbody th a { color: var(--brand); text-underline-offset: 3px; }
.cmp-wide th:nth-child(2), .cmp-wide td:nth-child(2) { background: transparent; }
.cmp-wide tr.is-lead { background: rgba(255, 253, 249, 0.85); }
.tco-card { padding: 24px; border-radius: var(--r-tile); background: var(--white); border: 1px solid var(--line-on-cream); }
.tco-card.is-featured { background: var(--brand); color: var(--text-on-brand); border-color: transparent; }
.tco-seats { font: 600 1.0625rem/1 var(--font-sans); margin-bottom: 18px; }
.tco-card dl { margin: 0 0 18px; display: grid; gap: 10px; }
.tco-card dt { font-size: 0.8125rem; color: var(--muted-on-cream); }
.tco-card.is-featured dt { color: var(--muted-on-brand); }
.tco-card dd { margin: 2px 0 0; font-weight: 600; }
.tco-savings { padding-top: 16px; border-top: 1px solid var(--line-on-cream); }
.tco-card.is-featured .tco-savings { border-color: var(--line-on-brand); }
.tco-savings strong { display: block; font: 400 2rem/1 var(--font-display); }
.tco-savings span { font-size: 0.8125rem; color: var(--muted-on-cream); }
.tco-card.is-featured .tco-savings span { color: var(--muted-on-brand); }

/* Contact page. */
.contact-list { display: grid; gap: 14px; margin: 0; }
.contact-list dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted-on-cream); }
.contact-list dd { margin: 2px 0 0; }
.contact-list a { color: var(--brand); text-underline-offset: 3px; }

/* Topic chips (blog). */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips-label { font-size: 0.8125rem; font-weight: 600; color: var(--muted-on-cream); margin-right: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-on-cream);
    background: var(--white);
    color: var(--brand);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}
.chip span { font-size: 0.75rem; color: var(--muted-on-cream); }
.chip:hover { border-color: var(--brand); }
.chip.is-active { background: var(--brand); color: var(--white); border-color: var(--brand); }
.chip.is-active span { color: var(--muted-on-brand); }
.section-brand .chip, .page-hero .chip { background: rgba(255, 253, 249, 0.08); border-color: var(--line-on-brand); color: var(--text-on-brand); }
.section-brand .chip span, .page-hero .chip span { color: var(--muted-on-brand); }

/* Blog index: featured post. */
.featured-post {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}
.featured-post .callout.is-brand { padding: clamp(28px, 3vw, 44px); }
.featured-post .callout.is-brand h2 { font: 400 clamp(1.75rem, 2.8vw, 2.5rem)/1.12 var(--font-display); color: var(--text-on-brand); margin: 10px 0 14px; }
.featured-post .callout.is-brand p { color: var(--muted-on-brand); }
.featured-post .meta { font-size: 0.8125rem; color: var(--muted-on-brand); }
@media (max-width: 900px) { .featured-post { grid-template-columns: 1fr; } }

/* Search field inline with the page hero. */
.hero-search { display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; margin-top: 28px; }
.hero-search input {
    flex: 1 1 260px;
    height: 48px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 253, 249, 0.3);
    background: rgba(255, 253, 249, 0.08);
    color: var(--text-on-brand);
    font: 400 1rem var(--font-sans);
}
.hero-search input::placeholder { color: rgba(255, 253, 249, 0.6); }
.hero-search input:focus { outline: 2px solid var(--white); outline-offset: 2px; }

/* Tags never stretch when they land directly in a grid. */
.grid-2 > .tag, .grid-3 > .tag, .grid-4 > .tag, .grid-auto > .tag { justify-self: start; align-self: start; }

/* ==========================================================================
   Solved Telephony additions
   Components the wholesale telephony site needs that the AgentTech product
   site does not: the published rate card, the network/coverage strip, and
   the inline brand lockup.
   ========================================================================== */

/* Inline SVG lockup in the nav and footer; inherits the surrounding color. */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-lockup svg { flex: none; width: 26px; height: 26px; }
.brand-lockup .brand-words { display: grid; line-height: 1; }
.brand-lockup .brand-words b { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.brand-lockup .brand-words i { font-style: normal; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.62; margin-top: 3px; }
.footer-brand .brand-lockup svg { width: 44px; height: 44px; }
.footer-brand .brand-lockup .brand-words b { font-size: 1.125rem; }
.footer-brand .brand-lockup .brand-words i { font-size: 0.75rem; }

/* Published rate card. One table per service group; the rate is the emphasis
   and an optional note sits under it. */
.rate-group + .rate-group { margin-top: clamp(28px, 3vw, 44px); }
.rate-group h3 { font: 600 1.0625rem/1.3 var(--font-sans); margin-bottom: 14px; }
.rate-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; }
.rate-table thead th {
    padding: 0 14px 10px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-on-cream);
    border-bottom: 1px solid var(--line-on-cream);
}
.rate-table tbody th { padding: 15px 14px; text-align: left; font-weight: 500; vertical-align: top; border-bottom: 1px solid var(--line-on-cream); }
.rate-table td { padding: 15px 14px; vertical-align: top; border-bottom: 1px solid var(--line-on-cream); }
.rate-table tbody tr:last-child th, .rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table tbody tr:hover { background: rgba(15, 59, 64, 0.03); }
.rate { display: block; font: 600 1rem/1.3 var(--font-sans); white-space: nowrap; }
.rate.is-free { color: #1f6b3a; }
.rate-note { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--muted-on-cream); white-space: normal; }
.rate-table sup { font-size: 0.6875rem; color: var(--muted-on-cream); }
.rate-footnote { margin-top: 16px; font-size: 0.8125rem; line-height: 1.55; color: var(--muted-on-cream); }
.rate-footnote sup { font-weight: 600; }
.section-brand .rate-table thead th, .section-brand .rate-note, .section-brand .rate-table sup { color: var(--muted-on-brand); }
.section-brand .rate-table thead th, .section-brand .rate-table tbody th, .section-brand .rate-table td { border-color: var(--line-on-brand); }
.section-brand .rate-table tbody tr:hover { background: rgba(255, 253, 249, 0.04); }

/* Network strip: coverage and capacity numbers above the fold on the stack pages. */
.net-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-on-brand); border-radius: var(--r-card); overflow: hidden; }
.net-strip div { padding: 22px 20px; background: var(--brand); }
.net-strip strong { display: block; font: 400 clamp(1.75rem, 2.6vw, 2.25rem)/1 var(--font-display); margin-bottom: 6px; }
.net-strip span { font-size: 0.875rem; color: var(--muted-on-brand); }
.section-cream .net-strip, .section-cream-deep .net-strip { background: var(--line-on-cream); }
.section-cream .net-strip div, .section-cream-deep .net-strip div { background: var(--white); }
.section-cream .net-strip span, .section-cream-deep .net-strip span { color: var(--muted-on-cream); }
@media (max-width: 900px) { .net-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Layer diagram on the platform page: the stack from carriers up to products. */
.layers { display: grid; gap: 10px; counter-reset: layer; }
.layer {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    align-items: start;
    padding: 22px 24px;
    border-radius: var(--r-card);
    background: rgba(255, 253, 249, 0.06);
    border: 1px solid var(--line-on-brand);
}
.layer-num { counter-increment: layer; font: 400 1.5rem/1 var(--font-display); color: var(--muted-on-brand); padding-top: 2px; }
.layer h3 { font: 600 1.0625rem/1.3 var(--font-sans); margin-bottom: 6px; }
.layer p { color: var(--muted-on-brand); font-size: 0.9375rem; line-height: 1.55; margin: 0; }
.layer .chips { margin-top: 12px; }
@media (max-width: 560px) { .layer { grid-template-columns: 1fr; gap: 8px; } }

/* Icon badges sit on the brand base inside dark sections, where the solid
   brand fill would disappear. */
.section-brand .icon-badge, .section-brand-deep .icon-badge, .arch .icon-badge, .flow .icon-badge {
    background: rgba(255, 253, 249, 0.12);
}

/* A callout that needs to lift off a cream section rather than tint into it. */
.callout.is-white { background: var(--white); }

/* Numbered strips with fewer than six steps: fill the row instead of leaving
   the right half empty, and still collapse cleanly on a phone. */
.lifecycle.is-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lifecycle.is-auto li:not(:last-child)::after { display: none; }

/* Standalone photography in a split section, matching the tile radius. */
.split-media { border-radius: var(--r-tile); overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Status notice, for anything pre-launch or pending approval. */
.beta-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: var(--r-card); background: rgba(45, 212, 191, 0.12); border: 1px solid rgba(45, 212, 191, 0.32); font-size: 0.9375rem; line-height: 1.55; }
.beta-note i { flex: none; margin-top: 2px; font-size: 20px; color: #0f766e; }
.beta-note strong { font-weight: 600; }
.beta-note a { color: inherit; text-underline-offset: 3px; }
.section-brand .beta-note, .section-brand-deep .beta-note, .page-hero .beta-note, .arch .beta-note { background: rgba(45, 212, 191, 0.16); border-color: rgba(45, 212, 191, 0.36); color: var(--text-on-brand); }
.section-brand .beta-note i, .page-hero .beta-note i, .arch .beta-note i { color: #7fe8dc; }
.page-hero .beta-note { max-width: 62ch; margin-top: 26px; }

/* Tier cards. Three across, the middle one featured. */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.tier { display: flex; flex-direction: column; gap: 14px; padding: clamp(26px, 3vw, 36px); border-radius: var(--r-tile); border: 1px solid var(--line-on-cream); background: var(--white); }
.tier.is-featured { background: var(--brand); color: var(--text-on-brand); border-color: transparent; box-shadow: 0 24px 60px rgba(var(--ink-rgb, 0, 0, 0), 0.18); }
.tier-name { font: 600 1.0625rem/1.3 var(--font-sans); }
.tier-price { font: 400 clamp(2rem, 3vw, 2.75rem)/1 var(--font-display); }
.tier-price span { display: block; margin-top: 8px; font-size: 0.875rem; font-family: var(--font-sans); color: var(--muted-on-cream); }
.tier.is-featured .tier-price span { color: var(--muted-on-brand); }
.tier-for { font-size: 0.9375rem; line-height: 1.55; color: var(--muted-on-cream); }
.tier.is-featured .tier-for { color: var(--muted-on-brand); }
.tier .check-list { margin-top: 4px; font-size: 0.9375rem; }
.tier .check-list li i { font-size: 18px; }
.tier .btn { margin-top: auto; }
.tier-flag { align-self: flex-start; }
@media (max-width: 960px) { .tiers { grid-template-columns: 1fr; } }

/* Availability matrix with stage pills. */
.matrix { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9375rem; }
.matrix thead th { padding: 0 14px 10px; text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-cream); border-bottom: 1px solid var(--line-on-cream); }
.matrix tbody th { padding: 15px 14px; text-align: left; font-weight: 500; border-bottom: 1px solid var(--line-on-cream); }
.matrix td { padding: 15px 14px; vertical-align: top; border-bottom: 1px solid var(--line-on-cream); color: var(--muted-on-cream); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.stage { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.stage::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stage.is-live { background: rgba(31, 138, 76, 0.14); color: #1f6b3a; }
.stage.is-beta { background: rgba(45, 212, 191, 0.16); color: #0f766e; }
.stage.is-build { background: rgba(244, 162, 58, 0.18); color: #7a4b00; }
.stage.is-planned { background: var(--cream-deep); color: var(--muted-on-cream); }

/* Numbered path, one step per row. */
.stepper { display: grid; gap: 0; counter-reset: step; }
.stepper li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--line-on-cream); }
.stepper li:last-child { border-bottom: 1px solid var(--line-on-cream); }
.stepper .step-num { counter-increment: step; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--white); font: 400 1.25rem/1 var(--font-display); }
.stepper h3 { font: 600 1.0625rem/1.35 var(--font-sans); margin-bottom: 6px; }
.stepper p { color: var(--muted-on-cream); font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.section-brand .stepper li, .section-brand .stepper li:last-child, .arch .stepper li, .arch .stepper li:last-child { border-color: var(--line-on-brand); }
.section-brand .stepper p, .arch .stepper p { color: var(--muted-on-brand); }
.arch .stepper { margin-top: clamp(32px, 4vw, 48px); text-align: left; }
.arch .stepper .step-num { background: rgba(255, 253, 249, 0.12); border: 1px solid var(--line-on-brand); }
@media (max-width: 560px) { .stepper li { grid-template-columns: 1fr; gap: 10px; } }

/* A bare .callout or .matrix dropped onto a brand section would put light text
   on a cream box. These variants make both safe anywhere, so a page does not
   have to route around them. */
.section-brand .callout:not(.is-white):not(.is-brand),
.section-brand-deep .callout:not(.is-white):not(.is-brand),
.arch .callout:not(.is-white):not(.is-brand) {
    background: rgba(255, 253, 249, 0.06);
    border-color: var(--line-on-brand);
    color: var(--text-on-brand);
}
.section-brand .callout:not(.is-white) p, .section-brand .callout:not(.is-white) li,
.arch .callout:not(.is-white) p, .arch .callout:not(.is-white) li { color: var(--text-on-brand); }
.section-brand .matrix thead th, .section-brand-deep .matrix thead th,
.section-brand .matrix td, .section-brand-deep .matrix td { color: var(--muted-on-brand); }
.section-brand .matrix thead th, .section-brand .matrix tbody th, .section-brand .matrix td,
.section-brand-deep .matrix thead th, .section-brand-deep .matrix tbody th, .section-brand-deep .matrix td {
    border-color: var(--line-on-brand);
}
.section-brand .stage.is-planned, .section-brand-deep .stage.is-planned {
    background: rgba(255, 253, 249, 0.14);
    color: var(--text-on-brand);
}