/*
 * Polish layer, loaded after main.css.
 *
 * main.css is generated from main.scss (20k lines, with a .map), so editing it
 * directly would be lost on the next SCSS build. Everything here is additive
 * and scoped; when the SCSS is next rebuilt these rules should be folded into
 * it and this file removed.
 */

/* ---- type scale ------------------------------------------------------- */
/* Large display text was set with the same loose line-height as body copy,
   which makes multi-line headlines float apart. */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.site-header h1.display-3 {
    max-width: 19ch;
}

.lead {
    line-height: 1.6;
}

/* Long measures are hard to read; cap body copy inside marketing sections. */
.section p.lead {
    max-width: 62ch;
}

.section .text-center p.lead,
.section p.lead.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* ---- section rhythm --------------------------------------------------- */
.section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 767.98px) {
    .section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .display-3 {
        font-size: calc(1.9rem + 2.4vw);
    }

    .display-5, .display-6 {
        font-size: calc(1.4rem + 1.6vw);
    }
}

/* ---- hero ------------------------------------------------------------- */
.hero-shot {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.2);
    background: #fff;
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
    transition: transform 400ms ease;
}

.hero-shot:hover {
    transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
}

.hero-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* the little browser bar above the screenshot, so it reads as "in an app" */
.hero-shot .hero-shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #f1f1f5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.hero-shot .hero-shot-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d6d6de;
}

.hero-shot .hero-shot-bar .hero-shot-url {
    width: auto;
    height: auto;
    border-radius: 5px;
    background: #fff;
    color: #9a9aa8;
    font-size: 11px;
    padding: 2px 10px;
    margin-left: 8px;
    flex: 1;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991.98px) {
    .hero-shot {
        transform: none;
        margin-top: 2.5rem;
    }
}

/* ---- code cards ------------------------------------------------------- */
/* A developer product should show code the way an editor does. */
.code-card {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.82rem;
    line-height: 1.65;
    margin-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
}

.code-card code {
    color: inherit;
    background: none;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: block;
    padding-left: 1.6em;
    text-indent: -1.6em;
}

.code-card .c-com { color: #94a3b8; }
.code-card .c-str { color: #9ae6b4; }
.code-card .c-key { color: #8BC4EC; }
.code-card .c-fn  { color: #8ecbff; }

.code-card::-webkit-scrollbar { height: 8px; }
.code-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 4px; }

/* ---- cards ------------------------------------------------------------ */
.card.shadow-sm {
    border-radius: 12px;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.card.shadow-sm:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.12) !important;
}

/* ---- buttons ---------------------------------------------------------- */
.btn {
    font-weight: 500;
}

.btn-lg,
.site-header .btn {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
}

/* Secondary hero buttons: outlined in white on the saturated background,
   filling to white on hover. (The old markup used .bg-white with white text,
   which was invisible.) */
.btn-hero-ghost {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(2px);
}

.btn-hero-ghost:hover,
.btn-hero-ghost:focus {
    background: #fff;
    border-color: #fff;
    color: var(--primary);
}

/* ---- focus visibility -------------------------------------------------- */
/* Keyboard users could not see where they were. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

body:not(.nav-dark) main a:focus-visible,
body:not(.nav-dark) main button:focus-visible,
main .btn:focus-visible {
    outline-color: var(--primary);
}

/* ---- motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .hero-shot {
        transform: none;
    }
}

/* ---- design system: section intros ------------------------------------ */
.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.65rem;
}

.section-intro {
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 3rem;
}

.section-intro p {
    color: #4b5563;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* ---- design system: product screenshots -------------------------------- */
.shot {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.13);
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
}

.shot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #f4f4f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.shot-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9d9e2;
}

.shot video {
    display: block;
    width: 100%;
    height: auto;
}

/* A recording of the product carries its own window chrome and its own
   backdrop, so the card around a screenshot would show only as a white rim. */
.shot-video {
    background: transparent;
    border: 0;
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
}

/* ---- design system: price cards ---------------------------------------- */
.plan-group + .plan-group {
    margin-top: 3.5rem;
}

.plan-group-head {
    margin-bottom: 1.5rem;
}

.price-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.1);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.1);
}

.price-card-featured {
    border-color: var(--primary);
    box-shadow: 0 16px 38px rgba(0, 120, 212, 0.16);
}

.price-card-flag {
    position: absolute;
    top: -0.75rem;
    left: 1.5rem;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.price-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.price-card-price {
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.price-card-unit {
    color: #8a8a99;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.price-card-for {
    font-size: 0.92rem;
    margin-bottom: 1.1rem;
}

.price-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    color: #5f5f70;
}

.price-card-list li {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    line-height: 1.45;
}

.price-card-list .mdi {
    color: var(--primary);
    flex: 0 0 auto;
}

/* ---- design system: feature cards -------------------------------------- */
.feature-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 14px;
    padding: 1.5rem;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.1);
}

.feature-card .mdi {
    font-size: 1.75rem;
    color: var(--primary);
}

.feature-card h5 {
    font-size: 1.02rem;
    margin: 0.65rem 0 0.4rem;
}

.feature-card p {
    color: #4b5563;
    font-size: 0.92rem;
    margin-bottom: 0;
}

/* ---- comparison table -------------------------------------------------- */
.compare-table th {
    font-size: 0.92rem;
    font-weight: 600;
    border-bottom-width: 1px;
    vertical-align: top;
}

.compare-table td {
    font-size: 1rem;
}

.compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.compare-table td:last-child {
    color: var(--primary);
}

/* ---- numbered step lists ----------------------------------------------- */
.step-list {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.step-list > li {
    counter-increment: step;
    position: relative;
    padding-left: 2.35rem;
    padding-bottom: 1.1rem;
}

.step-list > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the connecting line between steps */
.step-list > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.78rem;
    top: 1.9rem;
    bottom: 0.25rem;
    width: 1px;
    background: rgba(0, 120, 212, 0.22);
}

.step-list > li > p {
    color: #4b5563;
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.step-list .code-card {
    font-size: 0.86rem;
}

/* a roomier step list for a full walkthrough */
.step-list-lg > li {
    padding-left: 3rem;
    padding-bottom: 1.75rem;
}

.step-list-lg > li::before {
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
}

.step-list-lg > li:not(:last-child)::after {
    left: 0.98rem;
    top: 2.35rem;
}

.step-list-lg > li > strong {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.35rem;
}

.step-list-lg > li > p {
    font-size: 0.97rem;
}

.step-list-lg .code-card {
    margin-top: 0.75rem;
}

/* ---- plain-language list ----------------------------------------------- */
.plain-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plain-list > li {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(16, 24, 40, 0.07);
}

.plain-list > li:last-child {
    border-bottom: 0;
}

.plain-list .mdi {
    font-size: 1.5rem;
    color: var(--primary);
    line-height: 1.4;
}

.plain-list strong {
    display: block;
    margin-bottom: 0.15rem;
}

.plain-list span {
    color: #4b5563;
    font-size: 0.95rem;
}

/* ---- hero height -------------------------------------------------------- */
/* The hero asked for calc(100vh - 300px), which on a tall monitor left a very
   large empty band under the text. Cap it. */
.site-header > .section:first-child {
    min-height: min(calc(100vh - 160px), 720px) !important;
    display: flex;
    align-items: center;
}

@media (max-width: 991.98px) {
    .site-header > .section:first-child {
        min-height: 0 !important;
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }
}

/* ---- Solutions mega-menu ------------------------------------------------ */
/* Sixteen destinations have to be scannable in the second or two a visitor
   hovers, so each one is a single row: icon, name, one short line. */
.navbar-nav .mega-menu .container {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.mega-head {
    margin: 0 0 1.25rem;
    color: #4b5563;
    font-size: 0.95rem;
}

.mega-group {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b8b9a;
}

/* main.css stretches every anchor inside .solutions to the full height of its
   column, which was right when each link sat in its own grid cell and wrong
   now that they are stacked in two lists. */
.header-nav .solutions .mega-link {
    height: auto;
}

.mega-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    margin: 0 -0.65rem 0.15rem;
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.mega-link:hover,
.mega-link:focus-visible {
    background: rgba(0, 120, 212, 0.08);
    text-decoration: none;
    color: inherit;
}

.mega-link i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    font-size: 1.15rem;
    line-height: 1;
    color: #0078D4;
}

.mega-link span {
    display: block;
    min-width: 0;
}

.mega-link strong {
    display: block;
    font-size: 0.94rem;
    font-weight: 600;
    color: #1f2033;
}

.mega-link small {
    display: block;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #74748a;
}

.mega-aside {
    background: #f7f7fb;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 991.98px) {
    .mega-aside {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
}

/* ---- support index ------------------------------------------------------ */
.support-search {
    position: relative;
}

.support-search i {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: #8b8b9a;
    pointer-events: none;
}

.support-search input {
    height: 3.25rem;
    padding-left: 2.85rem;
    border-radius: 999px;
    font-size: 1rem;
}

.support-group + .support-group {
    margin-top: 3rem;
}

.support-group-title {
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.support-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.support-card:hover,
.support-card:focus-visible {
    border-color: rgba(0, 120, 212, 0.45);
    box-shadow: 0 10px 24px rgba(31, 32, 51, 0.08);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.support-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
}

.support-card p {
    margin: 0 0 0.9rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4b5563;
}

.support-card-more {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0078D4;
}

.support-card-more i {
    transition: transform 0.15s ease;
}

.support-card:hover .support-card-more i {
    transform: translateX(3px);
}

.support-list .no-result {
    display: none;
}

.support-list .no-result.no-items {
    display: block;
}

/* The Solutions panel is positioned against the header, which puts its top
   edge 8px below the bottom of the menu item that opens it. Moving the pointer
   down towards the links crossed that dead band, :hover was lost on the item
   and the panel shut before the pointer arrived. A transparent strip above the
   panel bridges the gap; it collapses with the panel when that is closed, and
   it sits below the nav links, so it never intercepts a click on them. */
.header-nav .navbar .navbar-nav li.dropdown.mega-menu .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

/* ---- solution pages ----------------------------------------------------- */
.solution-hero {
    color: #fff;
    background: linear-gradient(135deg, #0A4C8B 0%, #0078D4 45%, #2B93E0 100%);
    padding-top: 6rem;
    padding-bottom: 5rem;
}

.solution-hero .eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.solution-hero .lead {
    color: rgba(255, 255, 255, 0.92);
    max-width: 62ch;
}

.solution-for {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.92rem;
}

.blueprint {
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.blueprint-head {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #fafafd;
}

.blueprint-head h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.blueprint-head h3 i {
    color: #0078D4;
    margin-right: 0.35rem;
}

.blueprint-head p {
    margin: 0;
    font-size: 0.875rem;
    color: #4b5563;
}

.blueprint-table {
    width: 100%;
    margin: 0;
    font-size: 0.9rem;
}

.blueprint-table th {
    padding: 0.55rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b8b9a;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.blueprint-table td {
    padding: 0.6rem 1.25rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.blueprint-table tr:last-child td {
    border-bottom: 0;
}

.blueprint-table td strong {
    display: block;
    font-weight: 600;
    color: #1f2033;
}

.blueprint-table td span {
    display: block;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #74748a;
}

.blueprint-table td code {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    background: rgba(0, 120, 212, 0.09);
    color: #0F6CBD;
    font-size: 0.78rem;
    white-space: nowrap;
}

.blueprint-table td:last-child {
    width: 1%;
    white-space: nowrap;
}

.honest-box {
    padding: 1.75rem;
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    background: #fffdf7;
}

.honest-box h2 i {
    color: #f59e0b;
    margin-right: 0.3rem;
}

.honest-box ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #4b4b5a;
}

.honest-box li + li {
    margin-top: 0.5rem;
}

.related-box {
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: #fff;
}

.related-box a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: #1f2033;
    font-weight: 500;
}

.related-box a:last-child {
    border-bottom: 0;
}

.related-box a:hover {
    color: #0F6CBD;
}

.related-box a i {
    color: #9c9cae;
    transition: transform 0.15s ease;
}

.related-box a:hover i {
    color: #0F6CBD;
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .solution-hero {
        padding-top: 4rem;
        padding-bottom: 3.5rem;
    }

    .blueprint-table th,
    .blueprint-table td {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ---- highlight animation ------------------------------------------------ */
/* The highlight bar behind an animated phrase is a fixed 23px (13px in the
   "small" variant), which was sized for body text. Behind a display heading it
   lands halfway up the letters and reads as a rendering glitch rather than a
   highlighter stroke. Size it from the text instead, and sit it on the
   baseline. */
[text-animation]::before {
    height: 0.42em;
    bottom: 0.02em;
    border-radius: 3px;
}

[text-animation].animation-small::before {
    height: 0.3em;
}

/* The view switcher under "Work efficiently at any scale" is a scrollable pill
   with its scrollbar hidden, so on a wide screen the last tab was simply cut
   off with nothing to say it could be scrolled. Let it wrap where there is
   room; keep the scroll behaviour on narrow screens. */
@media (min-width: 992px) {
    .slider-with-navigation .slider-navigation {
        overflow-x: visible;
    }

    .slider-with-navigation .slider-navigation .slider-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ---- phone-width overflows ---------------------------------------------- */
/* The set-up chooser is a horizontally scrolling strip of fixed-width tiles.
   On a phone the strip itself hung off the page rather than scrolling inside
   it, which put a horizontal scrollbar on the whole document. */
@media (max-width: 575.98px) {
    .wizard-chooser {
        max-width: 100%;
        scrollbar-width: none;
    }

    .wizard-chooser::-webkit-scrollbar {
        display: none;
    }

    /* The quote mark on a testimonial is positioned 19px outside its card,
       which has room in the gutter on a desktop and none on a phone. */
    .testimonials .testimonial .testimonial-content .testimonial-icon {
        left: 0;
    }
}

/* ---- hero demo: the question on one side, what it did on the other ------ */
/*
 * The hero used to be a screenshot of a grid, which showed what the product
 * looks like and not what it does. This is the same claim as the pitch, made
 * where a visitor arrives: somebody asks a question in a chat, and the data
 * on the right answers it and then changes.
 *
 * It is text and CSS, no images and no library, so it weighs almost nothing
 * and stays readable with the animation switched off: every line of the
 * conversation and every row of the grid is in the markup, and the script
 * only reveals them in order.
 */
.hero-demo {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .hero-demo {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hero-demo-panel {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.hero-demo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #f1f1f5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 11px;
    color: #4b5563;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.hero-demo-bar .hero-demo-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d6d6de;
    flex: none;
}

.hero-demo-bar .hero-demo-where {
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- the conversation --------------------------------------------------- */

.hero-demo-chat {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-end;
    background: #fbfbfd;
}

/*
 * The markup holds the FINISHED state: the whole conversation, the rows
 * already updated. The script rewinds it and plays it forward, which is why
 * the hero still makes sense with no JavaScript at all, and why none of this
 * depends on the script having run.
 */
.hero-demo-turn {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 13px;
    font-size: 14px;
    line-height: 1.45;
    color: #1d1b2a;
    background: #efeff4;
}

.hero-demo.is-animated .hero-demo-turn {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 260ms ease, transform 260ms ease;
}

.hero-demo.is-animated .hero-demo-turn.is-shown {
    opacity: 1;
    transform: none;
}

.hero-demo-turn.from-person {
    align-self: flex-end;
    background: #0078D4;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.hero-demo-turn.from-assistant {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.hero-demo-turn .hero-demo-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 1px;
    vertical-align: -2px;
    background: currentColor;
    opacity: 0;
}

.hero-demo-turn.is-typing .hero-demo-caret {
    opacity: 1;
    animation: heroDemoBlink 900ms steps(1) infinite;
}

@keyframes heroDemoBlink {
    50% { opacity: 0; }
}

.hero-demo-thinking {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.hero-demo-thinking span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8FB8DA;
    animation: heroDemoThink 1200ms ease-in-out infinite;
}

.hero-demo-thinking span:nth-child(2) { animation-delay: 150ms; }
.hero-demo-thinking span:nth-child(3) { animation-delay: 300ms; }

@keyframes heroDemoThink {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-3px); opacity: 1; }
}

/* ---- the data ----------------------------------------------------------- */

.hero-demo-sheet {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hero-demo-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #ededf2;
    min-height: 37px;
    font-size: 12px;
    color: #8a8a99;
}

.hero-demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #E5F1FB;
    color: #0F6CBD;
    font-weight: 600;
}

.hero-demo.is-animated .hero-demo-chip {
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.hero-demo.is-animated .hero-demo-chip.is-shown {
    opacity: 1;
    transform: none;
}

.hero-demo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #27243a;
    table-layout: fixed;
}

.hero-demo-table th {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9a9aa8;
    padding: 6px 12px;
    border-bottom: 1px solid #ededf2;
    white-space: nowrap;
}

.hero-demo-table td {
    padding: 7px 12px;
    border-bottom: 1px solid #f4f4f8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-demo-table tbody tr {
    transition: opacity 300ms ease, background-color 300ms ease;
}

/* Rows the question did not ask about stay visible but step back, so the
   answer can be checked against what is on screen rather than taken on faith. */
.hero-demo-table tbody tr[data-hero-row="other"],
.hero-demo-table tbody tr.is-dimmed {
    opacity: 0.25;
}

/* While the script is playing, the rows start unfiltered and are narrowed in
   time with the reply. */
.hero-demo.is-animated .hero-demo-table tbody tr[data-hero-row="other"]:not(.is-dimmed) {
    opacity: 1;
}

.hero-demo-table tbody tr[data-hero-row="match"],
.hero-demo-table tbody tr.is-picked {
    background: #F4FAFF;
}

.hero-demo.is-animated .hero-demo-table tbody tr[data-hero-row="match"]:not(.is-picked) {
    background: transparent;
}

.hero-demo-table tbody tr.is-changed {
    animation: heroDemoTouched 1400ms ease;
}

@keyframes heroDemoTouched {
    0% { background: #D4EAFA; }
    100% { background: #F4FAFF; }
}

.hero-demo-overdue {
    color: #b4452f;
    font-weight: 600;
}

.hero-demo-owner span,
.hero-demo-flag {
    display: inline-block;
    transition: opacity 220ms ease;
}

.hero-demo-owner .is-empty { color: #c3c3cf; }

/* Hidden by opacity alone it still took its width, which pushed the date in
   the same cell into an ellipsis: a truncated "23 days ago..." undoes the
   point of showing a real value. */
.hero-demo-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fdecec;
    color: #b4452f;
    font-size: 11px;
    font-weight: 600;
}

.hero-demo.is-animated .hero-demo-flag { display: none; }

.hero-demo.is-animated .hero-demo-flag.is-shown {
    display: inline-block;
    animation: heroDemoArrive 240ms ease both;
}

@keyframes heroDemoArrive {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: none; }
}

.hero-demo-foot {
    margin-top: auto;
    padding: 7px 12px;
    border-top: 1px solid #ededf2;
    font-size: 12px;
    color: #8a8a99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.hero-demo-saved {
    color: #2e7d55;
    font-weight: 600;
}

.hero-demo.is-animated .hero-demo-saved {
    opacity: 0;
    transition: opacity 240ms ease;
}

.hero-demo.is-animated .hero-demo-saved.is-shown { opacity: 1; }

@media (max-width: 575.98px) {
    .hero-demo-panel { min-height: 0; }
    .hero-demo-table .hero-demo-secondary { display: none; }
    .hero-demo-table th,
    .hero-demo-table td { padding-left: 9px; padding-right: 9px; }
}

/* Nobody should be made to watch something move. With motion turned down the
   markup already holds the finished conversation and the updated rows, and
   the script leaves them alone. */
/*
 * Less motion, not less story. This used to force the finished state on
 * screen and stop, which meant anyone with animations switched off, a common
 * setting, never saw the one thing the hero is for. Now the sequence still
 * runs: lines arrive whole instead of being typed, rows change without a
 * pulse, nothing slides, and it plays once rather than looping.
 */
@media (prefers-reduced-motion: reduce) {
    .hero-demo.is-animated .hero-demo-turn,
    .hero-demo.is-animated .hero-demo-chip,
    .hero-demo.is-animated .hero-demo-saved {
        transform: none !important;
        transition: none !important;
    }

    .hero-demo-table tbody tr { transition: none; }
    .hero-demo-table tbody tr.is-changed { animation: none; }
    .hero-demo.is-animated .hero-demo-flag.is-shown { animation: none; }
    .hero-demo-turn.is-typing .hero-demo-caret { animation: none; opacity: 0; }
    .hero-demo-thinking span { animation: none; }
}

/* The hero now carries the demo, so the copy above it has to leave room: the
   question and the data it changes are the point, and they belong on the first
   screen rather than below it. */
.section.hero-with-demo {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.site-header .hero-with-demo h1.display-3 {
    max-width: 20ch;
    font-size: calc(1.9rem + 1.9vw);
}

@media (min-width: 1400px) {
    .site-header .hero-with-demo h1.display-3 {
        font-size: 3.6rem;
    }
}

/* Fixed columns keep the rows from reflowing as values change, but they have
   to be wide enough for the longest value: a date that reads "23 days ago..."
   undoes the point of showing real data. */
.hero-demo-table th:nth-child(1), .hero-demo-table td:nth-child(1) { width: 27%; }
.hero-demo-table th:nth-child(2), .hero-demo-table td:nth-child(2) { width: 15%; }
.hero-demo-table th:nth-child(3), .hero-demo-table td:nth-child(3) { width: 15%; }
.hero-demo-table th:nth-child(4), .hero-demo-table td:nth-child(4) { width: 26%; }
.hero-demo-table th:nth-child(5), .hero-demo-table td:nth-child(5) { width: 17%; }

@media (max-width: 575.98px) {
    .hero-demo-table th:nth-child(1), .hero-demo-table td:nth-child(1) { width: 40%; }
    .hero-demo-table th:nth-child(4), .hero-demo-table td:nth-child(4) { width: 34%; }
    .hero-demo-table th:nth-child(5), .hero-demo-table td:nth-child(5) { width: 26%; }
}

/* Stacked on a phone, the conversation pushed the data off the screen, which
   leaves half the story untold. The chat is anchored to its last message, so
   capping it keeps the newest lines and brings the rows up into view. */
@media (max-width: 991.98px) {
    .hero-demo-panel .hero-demo-chat {
        max-height: 215px;
        overflow: hidden;
        /* Cut square, the oldest message looks like a rendering fault rather
           than a conversation that started further up. */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
        mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
    }
}

/* ---- hero demo: a longer conversation ----------------------------------- */
/*
 * With eight turns the chat is taller than the sheet beside it, so it behaves
 * like a real one: anchored to the newest message, the older ones scrolled off
 * the top. Cut square that looks like a fault, so the top edge fades.
 */
.hero-demo-chat {
    overflow: hidden;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 34px);
}

/* A reminder belongs to the row it was asked about, next to the date it
   watches. */
.hero-demo-remind {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #FFF4E5;
    color: #8A5B00;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.hero-demo.is-animated .hero-demo-remind { display: none; }

.hero-demo.is-animated .hero-demo-remind.is-shown {
    display: inline-block;
    animation: heroDemoArrive 240ms ease both;
}

.hero-demo-total {
    color: #27243a;
    font-weight: 600;
}

.hero-demo.is-animated .hero-demo-total {
    opacity: 0;
    transition: opacity 240ms ease;
}

.hero-demo.is-animated .hero-demo-total.is-shown { opacity: 1; }

/* The reminder shares the Due cell with the date and the flag, which needs
   the room back from its neighbours. */
.hero-demo-table th:nth-child(2), .hero-demo-table td:nth-child(2) { width: 13%; }
.hero-demo-table th:nth-child(3), .hero-demo-table td:nth-child(3) { width: 13%; }
.hero-demo-table th:nth-child(4), .hero-demo-table td:nth-child(4) { width: 32%; }

@media (prefers-reduced-motion: reduce) {
    .hero-demo.is-animated .hero-demo-remind.is-shown { animation: none; }
    .hero-demo.is-animated .hero-demo-total { transition: none; }
}

/* A chat window is a fixed box that older messages scroll out of, not a box
   that grows until it has swallowed the page. Both panels take the same
   height so the pair reads as one unit, and the sheet keeps its shape. */
@media (min-width: 992px) {
    .hero-demo-panel {
        height: 352px;
        min-height: 0;
    }
}

/* The Due cell carries a date, a flag and sometimes a reminder, so it needs
   the room; nothing else in the row is close to its limit. */
.hero-demo-table th:nth-child(1), .hero-demo-table td:nth-child(1) { width: 22%; }
.hero-demo-table th:nth-child(4), .hero-demo-table td:nth-child(4) { width: 36%; }
.hero-demo-table th:nth-child(5), .hero-demo-table td:nth-child(5) { width: 16%; }

/* ---- hero demo: room for the whole conversation ------------------------- */
/*
 * Capping the chat at the height of a six-row sheet meant only the last three
 * messages were ever on screen: the exchange that sets the whole thing up had
 * always scrolled away by the time anyone read it. The window is tall enough
 * for all eight turns now, the sheet has the records to match it, and the
 * copy above gives up the space.
 */
@media (min-width: 992px) {
    .hero-demo-panel {
        height: 462px;
    }
}

.hero-demo-chat {
    gap: 8px;
    padding: 14px 16px;
}

.hero-demo-turn {
    font-size: 13px;
    padding: 9px 12px;
}

.section.hero-with-demo {
    padding-top: 1.75rem;
    padding-bottom: 2.5rem;
}

.site-header .hero-with-demo .lead {
    margin-bottom: 1.25rem !important;
}

.hero-demo-table td {
    padding: 6px 12px;
}

/* The conversation is the hero, so the words above it give up the last of
   their room: on a short laptop screen the final reply was landing just
   below the fold. */
.section.hero-with-demo {
    padding-top: 1rem;
}

.site-header .hero-with-demo h1.display-3 {
    font-size: calc(1.7rem + 1.7vw);
    margin-bottom: 0.5rem;
}

@media (min-width: 1400px) {
    .site-header .hero-with-demo h1.display-3 {
        font-size: 3.2rem;
    }
}

.site-header .hero-with-demo .lead {
    margin-top: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* Stacked on a phone there is no pairing to preserve: the page scrolls, so
   the whole conversation is shown and the sheet follows it. Clipping it there
   only hid the exchange that sets everything up. */
@media (max-width: 991.98px) {
    .hero-demo-panel .hero-demo-chat {
        max-height: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* ---- solution pages: embed it, and ask it ------------------------------- */
/* The code on these pages is read, not copied in a hurry, so it is set small
   and quiet rather than as a hero block. */
.solution-code {
    background: #f4f5f7;
    border: 1px solid #e3e5e9;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.solution-code code {
    color: #27243a;
    background: none;
    padding: 0;
}

.solution-asks {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.solution-asks li {
    position: relative;
    padding: 8px 12px 8px 34px;
    margin-bottom: 6px;
    background: #E5F1FB;
    border-radius: 10px;
    color: #27243a;
}

.solution-asks li:before {
    content: "\201C";
    position: absolute;
    left: 13px;
    top: 6px;
    font-size: 20px;
    line-height: 1.4;
    color: #0078D4;
}

/* The demonstration needs a darker band behind it, the way the hero does, or
   the white panels have nothing to sit on. */
.section.bg-dark-soft {
    background: #0F2742;
}

.section.bg-dark-soft .section-intro .eyebrow { color: #7FC0F0; }
.section.bg-dark-soft .section-intro h2 { color: #fff; }
.section.bg-dark-soft .section-intro p { color: rgba(255, 255, 255, 0.75); }

/* On a solution page the demo is not competing with a headline, so it can
   take the height it needs for its conversation. */
@media (min-width: 992px) {
    .section.bg-dark-soft .hero-demo-panel { height: 392px; }
}

/* ---- solution pages: the demonstration is the hero ----------------------- */
/* People arrive to see whether this is useful, not to read about it, so the
   working thing is the first thing, and the words wait their turn. */
.solution-hero.has-demo {
    padding-bottom: 3.5rem;
}

.solution-hero.has-demo .lead {
    max-width: 62ch;
}

.solution-demo {
    margin-top: 2.5rem;
}

.solution-demo .hero-demo-panel {
    box-shadow: 0 24px 60px rgba(8, 24, 44, 0.35), 0 2px 6px rgba(8, 24, 44, 0.2);
}

.solution-demo-caption {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

@media (min-width: 992px) {
    .solution-demo .hero-demo-panel { height: 372px; }
}

.solution-hero .hero-shot {
    max-width: 900px;
}

/* ---- solution pages: short by default ----------------------------------- */
/* Everything is still on the page, it just waits to be asked for. */
.solution-more {
    max-width: 1140px;
    margin: 0 auto;
    border-top: 1px solid #e3e5e9;
}

.solution-more > summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.solution-more > summary::-webkit-details-marker { display: none; }

.solution-more > summary span {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0078D4;
}

.solution-more > summary span:after {
    content: " \203A";
    display: inline-block;
    transition: transform 160ms ease;
}

.solution-more[open] > summary span:after { transform: rotate(90deg); }

.solution-more > summary small { color: #4b5563; }

/* Inside the disclosure the sections lose their outer rhythm, or opening it
   drops the reader into a page of air. */
.solution-more .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.blueprint-columns > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0078D4;
    border-top: 1px solid #eceef2;
}

.blueprint-columns > summary::-webkit-details-marker { display: none; }

.blueprint-columns > summary:after {
    content: " \203A";
    display: inline-block;
    transition: transform 160ms ease;
}

.blueprint-columns[open] > summary:after { transform: rotate(90deg); }

/* ---- the e-mail the reminder sends -------------------------------------- */
/*
 * A reminder that only shows a pill on a row is a promise. This is the thing
 * that actually reaches the person, and it is docked on the sheet it came
 * from so it is obvious which server sent it.
 */
.hero-demo-sheet { position: relative; }

.hero-demo-email {
    position: absolute;
    right: 12px;
    bottom: 46px;
    width: 268px;
    max-width: calc(100% - 24px);
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #dfe3ea;
    border-left: 3px solid #0078D4;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(8, 24, 44, 0.18);
    z-index: 2;
}

.hero-demo.is-animated .hero-demo-email {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 260ms ease, transform 260ms ease;
}

.hero-demo.is-animated .hero-demo-email.is-shown {
    opacity: 1;
    transform: none;
}

.hero-demo-email-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #8a8a99;
    margin-bottom: 6px;
}

.hero-demo-email-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0078D4;
    flex: none;
}

.hero-demo-email-time { margin-left: auto; }

.hero-demo-email-subject {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 600;
    color: #1d1b2a;
    line-height: 1.35;
}

.hero-demo-email-body {
    margin: 0;
    font-size: 12px;
    color: #4b5563;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .hero-demo.is-animated .hero-demo-email { transition: none; transform: none; }
}

@media (max-width: 575.98px) {
    .hero-demo-email { position: static; width: auto; margin: 10px 12px; }
}

/* ---------------------------------------------------------------------------
   Template gallery

   The gallery was a column of plain text links beside a grid of thumbnails in
   loud coloured frames, with titles in link blue and descriptions of any
   length, so the rows never lined up. It is now one toolbar and one grid of
   even cards: the thumbnail is cropped to a fixed ratio, the description is
   clamped to three lines and the tags are chips, so a row reads as a row.
   --------------------------------------------------------------------------- */

.gallery-head {
    max-width: 46rem;
    margin-bottom: 2.25rem;
}

.template-gallery .gallery-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.gallery-search {
    position: relative;
    flex: 1 1 18rem;
    max-width: 24rem;
}

.gallery-search i {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 1.15rem;
    pointer-events: none;
}

.gallery-search input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.7rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gallery-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}

.gallery-count {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.gallery-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.gallery-pill {
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #374151;
    border-radius: 999px;
    padding: 0.42rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.gallery-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.gallery-pill.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.gallery-pill-count {
    font-size: 0.75rem;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}

.gallery-pill.is-active .gallery-pill-count {
    opacity: 0.85;
}

.gallery-pill-split {
    width: 1px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.12);
    margin: 0.15rem 0.4rem;
}

.templates-list .card-item[hidden] {
    display: none !important;
}

.template-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.template-card:hover,
.template-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(0, 120, 212, 0.35);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.1);
    color: inherit;
}

/* The shipped thumbnails are screenshots of different heights with a coloured
   frame baked in, so they are cropped to one ratio from the top, where the
   toolbar and the first rows are. */
.template-card-shot {
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: #f3f4f6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.template-card-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.template-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.1rem 1.15rem 1.2rem;
    flex: 1 1 auto;
}

.template-card-title {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.35;
    color: #111827;
}

.template-card-text {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.4rem;
}

.template-card-tag {
    font-size: 0.72rem;
    font-weight: 500;
    color: #4b5563;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    white-space: nowrap;
}

/* Kept in the card so the filter can match a tag, never shown. */
.template-card-match {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.gallery-empty {
    text-align: center;
    padding: 3.5rem 1rem;
}

.gallery-empty i {
    font-size: 2.5rem;
    color: #d1d5db;
    display: block;
    margin-bottom: 0.5rem;
}

.preview-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.92rem;
    margin-bottom: 2rem;
}

.preview-back:hover {
    color: var(--primary);
}

.template-preview-shot {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.1);
}

.template-preview-shot img {
    width: 100%;
    height: auto;
    display: block;
}

.template-preview-frame {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

.template-preview-frame iframe {
    display: block;
    border: 0;
}

@media (max-width: 767.98px) {
    .gallery-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0 1rem 0.25rem;
    }

    .gallery-pills::-webkit-scrollbar {
        display: none;
    }

    .gallery-pill,
    .gallery-pill-split {
        flex: 0 0 auto;
    }
}

/* ---------------------------------------------------------------------------
   Long-form reading

   The developer page is the one page people actually read rather than scan,
   and it was the hardest to: body text in a purple-tinted grey at 15.5px with
   1.5 leading, running 783px to the line - about a hundred characters, where
   sixty to seventy-five is comfortable - with inline code in Bootstrap's
   default pink. Prose is now capped to its own measure while code blocks keep
   the full width of the column.
   --------------------------------------------------------------------------- */

.step-list-lg > li > p,
.step-list-lg > li > ul,
.step-list > li > p {
    font-size: 1rem;
    line-height: 1.7;
    max-width: 38rem;
}

.step-list-lg > li > strong {
    color: #111827;
}

/* Inline code reads as a quiet chip, not as an error. Code inside a block
   keeps the block's own colours. */
code {
    color: #0f172a;
    background: #f1f5f9;
    border-radius: 5px;
    padding: 0.12em 0.36em;
    font-size: 0.875em;
}

pre code,
.code-card code,
.solution-code code {
    color: inherit;
    font-size: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* the reset above clears the padding that carries the hanging indent for
   wrapped code lines, so it is restated here */
.code-card code {
    padding-left: 1.6em;
    text-indent: -1.6em;
}

.code-card {
    font-size: 0.86rem;
    line-height: 1.7;
}

/* The troubleshooting list sat off the page's left edge and ran the full
   width; it is prose, so it reads like the rest of the prose. */
.alert.alert-light ul {
    max-width: 38rem;
    margin-bottom: 0;
}

.alert.alert-light li + li {
    margin-top: 0.35rem;
}

/* ---------------------------------------------------------------------------
   Rhythm and card headings

   A hero is written as <section class="section pb-0"> wrapping a .section-intro.
   The section already removes its own padding below, but the intro still added
   three more rems, so every page opened with a hole between the headline and
   the first real section. And a feature card's heading was set in size only, so
   it inherited a light weight and read as body text rather than as a title.
   --------------------------------------------------------------------------- */

.section.pb-0 > .section-intro:last-child,
.section.pb-0 > .container > .section-intro:last-child {
    margin-bottom: 0;
}

.feature-card h5 {
    font-weight: 600;
    color: #111827;
}

/* ---------------------------------------------------------------------------
   Sign in

   The oldest-looking page on the site, and the one every user sees: a flat grey
   panel with 5px corners, each field split into a bordered icon square plus an
   input, and the first two inputs welded together by corner overrides. The
   markup is left alone because the form's behaviour hangs off its classes; this
   just makes each field one rounded control with the icon inside it, and puts
   the form on a white card.
   --------------------------------------------------------------------------- */

.sign-in-page {
    background: #f8fafc;
}

.sign-in-page .form-sign-in .form {
    background: #ffffff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.08);
}

.sign-in-page .form-sign-in .input-group {
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sign-in-page .form-sign-in .input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}

.sign-in-page .form-sign-in .input-group-text {
    background: transparent;
    border: 0;
    padding: 0 0.3rem 0 0.85rem;
}

.sign-in-page .form-sign-in .form-control {
    border: 0;
    border-radius: 0;
    padding: 0.72rem 0.9rem 0.72rem 0.45rem;
}

.sign-in-page .form-sign-in .form-control:focus {
    box-shadow: none;
}

.sign-in-page .form-sign-in h1 {
    font-weight: 700;
}

/* the social buttons came in a size larger than the one they sit under */
.sign-in-page .btn-lg {
    font-size: 1rem;
    padding: 0.7rem 1.25rem;
}

.sign-in-page a {
    text-decoration: none;
}

.sign-in-page a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Report an issue

   The form sat on a pale blue panel with square corners while its submit
   button was a full pill. Same treatment as the sign-in card: white, rounded,
   with controls that match the button they sit above.
   --------------------------------------------------------------------------- */

.page-feedback main {
    padding: 4rem 0 5rem;
}

.feedback-card {
    background: #ffffff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.07);
}

.feedback-card .card-body {
    padding: 2rem 1.5rem;
}

.page-feedback .form-control,
.page-feedback .form-select {
    border-radius: 10px;
    padding: 0.62rem 0.85rem;
}

.page-feedback .form-control:focus,
.page-feedback .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15);
}

.page-feedback label {
    font-weight: 600;
    color: #111827;
}

.page-feedback .form-group small {
    margin-bottom: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Help articles and CMS pages

   page.phtml renders all 41 support articles plus terms and privacy. Its h1 was
   centred over left-aligned body text, and the body headings came out the same
   size as the title, so an article had no hierarchy to scan. The content is
   author-written HTML, so everything here is styled by element.
   --------------------------------------------------------------------------- */

.article-head {
    margin-bottom: 1.75rem;
}

.article-head h1 {
    font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.5rem);
    line-height: 1.2;
    margin: 0;
}

.article-head .preview-back {
    margin-bottom: 1rem;
}

.custom-page {
    color: #374151;
    font-size: 1rem;
    line-height: 1.75;
}

.custom-page h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 2.25rem 0 0.75rem;
}

.custom-page h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin: 1.75rem 0 0.6rem;
}

.custom-page h4,
.custom-page h5 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    margin: 1.5rem 0 0.5rem;
}

.custom-page p {
    margin-bottom: 1rem;
}

.custom-page ul,
.custom-page ol {
    margin-bottom: 1.1rem;
    padding-left: 1.3rem;
}

.custom-page li {
    margin-bottom: 0.3rem;
}

.custom-page li > ul,
.custom-page li > ol {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}

/* Screenshots inside an article are the point of the article, so they get a
   frame rather than floating loose in the text. */
.custom-page img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(16, 24, 40, 0.1);
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
    margin: 1.25rem 0;
}

.custom-page a.image {
    display: inline-block;
    line-height: 0;
}

.custom-page table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
}

.custom-page table th,
.custom-page table td {
    border: 1px solid rgba(16, 24, 40, 0.1);
    padding: 0.55rem 0.7rem;
    text-align: left;
}

.custom-page table th {
    background: #f8fafc;
    font-weight: 600;
}

.custom-page blockquote {
    margin: 1.25rem 0;
    padding: 0.75rem 1.1rem;
    border-left: 3px solid var(--primary);
    background: #f8fafc;
    border-radius: 0 10px 10px 0;
    color: #4b5563;
}

/* The articles were written with <h1> for their section headings, so a page
   carries several of them and they rendered at title size. Styled as the
   section headings they are; the duplicate heading level is a content fix,
   not a CSS one. */
.custom-page h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 2.25rem 0 0.75rem;
    line-height: 1.3;
}

.custom-page > h1:first-child {
    margin-top: 0;
}

/* Pasted from a word processor: inline spans carry their own sizing and
   families, which fight the article's typography. */
.custom-page span[style] {
    font-size: inherit;
    font-family: inherit;
}

/* ---------------------------------------------------------------------------
   Solution page: how you start

   Placed straight after the demo, because that is the moment somebody decides.
   One card, three steps, one button.
   --------------------------------------------------------------------------- */

.solution-start {
    padding-top: 0;
}

.start-card {
    max-width: 52rem;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.07);
    padding: 2.5rem;
}

.start-steps {
    counter-reset: start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.start-steps > li {
    counter-increment: start;
    position: relative;
    padding-left: 3rem;
    padding-bottom: 1.35rem;
}

.start-steps > li:last-child {
    padding-bottom: 0;
}

.start-steps > li::before {
    content: counter(start);
    position: absolute;
    left: 0;
    top: -2px;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.start-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.98rem;
    top: 2.35rem;
    bottom: 0.3rem;
    width: 1px;
    background: rgba(0, 120, 212, 0.25);
}

.start-steps > li strong {
    display: block;
    font-size: 1.05rem;
    color: #111827;
    margin-bottom: 0.15rem;
}

.start-steps > li span {
    display: block;
    color: #4b5563;
    line-height: 1.65;
    max-width: 38rem;
}

@media (max-width: 575.98px) {
    .start-card {
        padding: 1.6rem 1.25rem;
        border-radius: 14px;
    }
}

/* ---- The table screen on SvGrid Base (bases with editor = 'base') ----------
   The table takes the page, as in SvGrid's demos and Airtable: no side menu
   (its sections are tabs in the header), no card around the table, no room
   kept for the classic screen's sheet tabs at the bottom. */
.page-database-view .js-panel.artavolo-new-screen .content {
  padding-left: 0;
  padding-right: 0;
}
.page-database-view .artavolo-new-screen .content .apps-navigation-holder {
  display: none !important;
}
.page-database-view .artavolo-new-screen .content .content-data-holder {
  height: 100% !important;
  margin-left: 0;
  margin-right: 0;
}
.page-database-view .artavolo-new-screen .content .content-data-holder > .col {
  padding-left: 0;
  padding-right: 0;
}
.page-database-view .artavolo-new-screen .content .content-right {
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  border-top: 1px solid var(--bs-border-color, #e5e7eb);
}
.page-database-view .artavolo-sections {
  gap: 2px;
  margin-left: 1rem;
}
.page-database-view .artavolo-sections a {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--bs-body-color, #1f2937);
  text-decoration: none;
  white-space: nowrap;
}
.page-database-view .artavolo-sections a:hover {
  background: rgba(0, 0, 0, 0.05);
}
.page-database-view .artavolo-sections a.active {
  background: rgba(45, 127, 249, 0.12);
  color: #1d5fd1;
  font-weight: 600;
}
/* A table in a dark colour (Settings, Appearance) darkens the header: white sections on it. */
.page-database-view:not([light-colors]) .artavolo-sections a {
  color: rgba(255, 255, 255, 0.85);
}
.page-database-view:not([light-colors]) .artavolo-sections a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.page-database-view:not([light-colors]) .artavolo-sections a.active {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
@media screen and (max-width: 767px) {
  .page-database-view .artavolo-sections {
    overflow-x: auto;
    max-width: 55vw;
  }
}
/* ---- colour choosers without Smart ----------------------------------- */
/* The note card's and the label manager's colour dot open the palette
   through a plain button laid over the dot (smart-drop-down-button did). */
.note-color-toggle,
.color-chooser-toggle {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 100%;
    background: transparent;
    cursor: pointer;
    z-index: 1;
}
.notes .decoration-right-panel .note-colors {
    position: relative;
    width: 14px;
    height: 14px;
}
.color-chooser .js-labels-manager-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 0 0 0;
}

/* ---- messages (showAlert) -------------------------------------------- */
.artavolo-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.artavolo-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    color: #fff;
    background: #a4262c;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    font-size: 14px;
    line-height: 1.4;
    pointer-events: auto;
    transition: opacity 0.2s, transform 0.2s;
}
.artavolo-toast-success { background: #107c41; }
.artavolo-toast-info { background: #0f6cbd; }
.artavolo-toast-warn { background: #8a5a00; }
.artavolo-toast-text { flex: 1 1 auto; overflow-wrap: anywhere; }
.artavolo-toast .btn-close { flex: 0 0 auto; margin-top: 2px; }
.artavolo-toast.is-leaving { opacity: 0; transform: translateX(12px); }

/* ---- what smart.default.css gave every page ---------------------------- */
/* The Smart library is no longer loaded, but main.css still reads its theme
   variables (dots, accents, scroll bars) and its .form-control look. These are
   smart.default.css's own values, so pages look as they did. */
:root {
    --smart-primary-rgb: 0, 92, 153;
    --smart-primary: rgb(var(--smart-primary-rgb));
    --smart-primary-color: #ffffff;
    --smart-primary-color-rgb: 255, 255, 255;
    --smart-secondary-rgb: 45, 45, 48;
    --smart-secondary: rgb(var(--smart-secondary-rgb));
    --smart-light-rgb: 255, 255, 255;
    --smart-light: rgb(var(--smart-light-rgb));
    --smart-background: #fefefe;
    --smart-background-color: #5A5A5A;
    --smart-color: #333;
    --smart-border: #E0E0E0;
    --smart-border-radius: 4px;
    --smart-surface: #F5F5F5;
    --smart-surface-color: #323232;
    --smart-font-family: Roboto, "Helvetica Neue", sans-serif;
    --smart-font-size: 14px;
    --smart-editor-height: 30px;
    --smart-editor-width: 250px;
    --smart-elevation-1: 0 0 2px 0 rgba(0, 0, 0, .14), 0 2px 2px 0 rgba(0, 0, 0, .12), 0 1px 3px 0 rgba(0, 0, 0, .2);
    --smart-ui-state-hover: #ebebeb;
    --smart-ui-state-color-hover: #333;
    --smart-ui-state-selected: rgba(var(--smart-primary-rgb), .1);
    --smart-ui-state-color-selected: var(--smart-primary);
    --smart-ui-state-border-selected: rgba(var(--smart-primary-rgb), .1);
    --smart-scroll-bar-size: 18px;
    --smart-scroll-bar-background: #F1F1F1;
    --smart-scroll-bar-thumb-background: #C1C1C1;
    --smart-scroll-bar-thumb-background-hover: #A8A8A8;
}
.form-control {
    border-radius: var(--smart-border-radius);
    height: auto;
    width: 100%;
    color: #495057;
    background-color: var(--smart-background);
    background-clip: padding-box;
    border: 1px solid var(--smart-border);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-control:focus {
    color: var(--smart-color);
    background-color: var(--smart-background);
    border-color: var(--smart-primary);
    outline: 0;
    z-index: 3;
}

/* ---- the switch from Airtable (home page, /airtable) ---------------------- */
.section.switch-hero {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}
.site-header .switch-hero h1.display-3 {
    max-width: 16ch;
    font-size: calc(1.8rem + 1.7vw);
}
@media (min-width: 1400px) {
    .site-header .switch-hero h1.display-3 {
        font-size: 3.4rem;
    }
}
/* An import's report, drawn in the hero: what a switcher gets back. */
.switch-report {
    background: #fff;
    color: #0f172a;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.35);
    overflow: hidden;
    font-size: 14px;
}
.switch-report-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}
.switch-report-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}
.switch-report-time {
    margin-left: auto;
    color: #64748b;
    font-size: 13px;
}
.switch-report-table {
    width: 100%;
    border-collapse: collapse;
}
.switch-report-table th,
.switch-report-table td {
    padding: 8px 18px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}
.switch-report-table th {
    font-weight: 500;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.switch-report-table td:nth-child(2),
.switch-report-table td:nth-child(3) {
    font-variant-numeric: tabular-nums;
}
.switch-ok {
    color: #15803d;
    font-weight: 600;
}
.switch-note {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
}
.switch-report-checks {
    padding: 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.switch-report-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    color: #475569;
    font-size: 13px;
}
.switch-report-button {
    background: var(--primary, #0b5cad);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 575px) {
    .switch-report-table th:nth-child(2),
    .switch-report-table td:nth-child(2) {
        display: none;
    }
    .switch-report-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}
.switch-step {
    height: 100%;
    padding: 1.5rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #fff;
}
.switch-step h5 {
    margin-top: 0.75rem;
}
.switch-step p {
    color: #475569;
    margin-bottom: 0;
}
.switch-step-number {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary, #0b5cad);
    color: #fff;
    font-weight: 700;
}
.switch-numbers {
    background: #0f172a;
    color: #e2e8f0;
}
.switch-numbers .section-intro h2,
.switch-numbers .section-intro p {
    color: #fff;
}
.switch-numbers .eyebrow {
    color: #93c5fd;
}
.switch-numbers .text-muted {
    color: #94a3b8 !important;
}
.switch-number {
    height: 100%;
    padding: 1.75rem 1.25rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.switch-number strong {
    display: block;
    font-size: 3rem;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.switch-number span {
    color: #cbd5e1;
}
.switch-kept {
    list-style: none;
    padding: 0;
    margin: 0;
}
.switch-kept li {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
}
.switch-kept li .mdi {
    font-size: 20px;
    line-height: 1.2;
}

/* "Switch from Airtable" in the top bar: the way in for most visitors. A pill
   in the bar's own text colour, so it reads on the blue hero and on white. */
.navbar .nav-switch {
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
    margin-right: 0.25rem;
    white-space: nowrap;
}
/* The switch pages' header is as tall as its hero (the old one asked for 185vh). */
.site-header.switch-header {
    min-height: 0;
    padding-bottom: 4rem;
    background-image: radial-gradient(1200px 500px at 85% 0%, rgba(96, 165, 250, 0.35), transparent 60%), linear-gradient(135deg, #0a2e6e 0%, #0b5cad 55%, #1a73d1 100%);
    background-color: #0b5cad;
}
/* Artavolo is the middle column in the switch pages' comparisons. */
.switch-header ~ section .compare-table td:last-child,
.compare-table.switch-compare td:last-child {
    color: inherit;
}
.compare-table.switch-compare td:nth-child(2) {
    color: var(--primary);
}
/* The comparison's rows where Airtable is ahead, said plainly but quieter. */
.compare-table tr.switch-ahead td {
    color: #475569;
}

/* ---- product-led pages (home, /platform, /airtable) ---------------------- */
/* White hero, a big dark headline, two buttons and the product right under
   them: the layout Airtable users know from the tool they are leaving. */
.mk-hero {
    background: #fff;
    padding: 4.5rem 0 0;
    text-align: center;
    overflow: hidden;
}
.mk-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef4ff;
    color: #0b4fa3;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
a.mk-pill:hover {
    background: #e0ebff;
    color: #0b4fa3;
}
.mk-title {
    font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: #0f172a;
    max-width: 18ch;
    margin: 0 auto 1.25rem;
}
.mk-lead {
    font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
    line-height: 1.55;
    color: #475569;
    max-width: 62ch;
    margin: 0 auto 2rem;
}
.mk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.mk-actions .btn {
    border-radius: 10px;
}
.mk-note {
    margin: 1rem 0 0;
    color: #64748b;
    font-size: 0.92rem;
}
.mk-shot {
    margin: 3.5rem auto 0;
    max-width: 1180px;
    padding: 0 0.5rem;
}
.mk-hero .mk-shot .mk-frame {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: -1px;
}
.mk-frame {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.mk-frame-bar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.mk-frame-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.mk-frame img {
    display: block;
    width: 100%;
    height: auto;
}
.mk-ticks {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.mk-ticks li {
    padding: 4px 0;
    color: #334155;
}
.mk-ticks .mdi {
    color: #16a34a;
}
.mk-link-card {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}
.mk-link-card:hover {
    color: #0f172a;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}
.mk-link-card > .mdi:first-child {
    font-size: 26px;
    color: var(--primary, #0b5cad);
}
.mk-link-card span {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mk-link-card small {
    color: #64748b;
}
.mk-link-arrow {
    color: #94a3b8;
}
.mk-cta {
    background: #f1f6ff;
}
/* Tabs over one product shot: Grid, Board, Calendar, Record, Agents. */
.mk-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: #f1f5f9;
    margin: 0 auto 1.5rem;
}
.mk-tabs button {
    border: 0;
    background: transparent;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    color: #475569;
}
.mk-tabs button.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.mk-tab-text {
    max-width: 60ch;
    margin: 0 auto 1.5rem;
    color: #475569;
}
.mk-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    padding: 1.75rem 0;
    color: #475569;
    font-weight: 500;
    border-bottom: 1px solid #eef2f7;
}
.mk-trust .mdi {
    color: var(--primary, #0b5cad);
    margin-right: 6px;
}
@media (max-width: 575px) {
    .mk-hero {
        padding-top: 2.5rem;
    }
    .mk-shot {
        margin-top: 2rem;
    }
}

/* The Platform menu: the parts of the product with a line each, and where to start. */
.dropdown-menu.mk-mega {
    padding: 14px;
    min-width: 660px;
}
.dropdown-menu.mk-mega.show {
    display: flex;
    gap: 14px;
}
.mk-mega-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mk-mega-col:first-child {
    flex: 1.4;
}
.mk-mega-side {
    flex: 1;
    border-left: 1px solid #eef2f7;
    padding-left: 14px;
}
.mk-mega-head {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    padding: 4px 12px 8px;
}
.mk-mega-item {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    white-space: normal;
    border-radius: 8px;
    padding: 8px 12px;
}
.mk-mega-item .mdi {
    font-size: 20px;
    line-height: 1.2;
    color: var(--primary, #0b5cad);
}
.mk-mega-item span {
    display: flex;
    flex-direction: column;
    font-weight: 600;
}
.mk-mega-item small {
    font-weight: 400;
    color: #64748b;
}
@media (max-width: 991.98px) {
    .dropdown-menu.mk-mega {
        min-width: 0;
    }
    .dropdown-menu.mk-mega.show {
        flex-direction: column;
    }
    .mk-mega-side {
        border-left: 0;
        padding-left: 0;
    }
}
/* Shown by hover on wide screens (main.css), as a two-column panel either way. */
@media (min-width: 992px) {
    .header-nav .navbar .navbar-nav li.dropdown:hover > .dropdown-menu.mk-mega,
    .header-nav .smart-select:hover > .dropdown-menu.mk-mega {
        display: flex;
        gap: 14px;
    }
}
.mk-mega-inner {
    display: flex;
    gap: 14px;
}
@media (max-width: 991.98px) {
    .mk-mega-inner {
        flex-direction: column;
    }
}

/* The move, step by step, beside the import report. */
.mk-steps {
    list-style: none;
    counter-reset: mk-step;
    padding: 0;
    margin: 0;
}
.mk-steps li {
    counter-increment: mk-step;
    position: relative;
    padding: 0 0 1.25rem 3.25rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mk-steps li::before {
    content: counter(mk-step);
    position: absolute;
    left: 0;
    top: -2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #eef4ff;
    color: #0b4fa3;
    font-weight: 700;
}
.mk-steps li span {
    color: #475569;
}
/* After the white product hero the start card sits below the screen, not pulled up over it. */
.mk-hero + .solution-start {
    padding-top: 3.5rem;
}
.mk-hero + .solution-start .start-card {
    margin-top: 0 !important;
}

/* ======================================================================
   The public website, in the rhythm Airtable users know (body.mk-site):
   a neutral grotesk, regular-weight near-black headlines, dark buttons with
   12px corners, quiet cards, and pastel panels for features. Our own name,
   logo, blue for links and accents; the app itself is not touched.
   ====================================================================== */
.mk-site {
    --mk-ink: #1d1f25;
    --mk-ink-soft: #4b5160;
    --mk-dark: #181d26;
    --mk-line: #e6e6e3;
    --mk-cream: #f7f5f0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mk-ink);
    background: #fff;
}
.mk-site h1, .mk-site h2, .mk-site h3, .mk-site h4, .mk-site h5,
.mk-site .display-5, .mk-site .display-6 {
    font-family: inherit;
    color: var(--mk-ink);
}
.mk-site .mk-title {
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--mk-ink);
}
.mk-site h2.display-6,
.mk-site .display-6 {
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.mk-site h5,
.mk-site .h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
}
.mk-site p,
.mk-site .lead,
.mk-site .mk-lead {
    color: var(--mk-ink-soft);
}
.mk-site .eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mk-ink-soft, #4b5160);
}
/* Buttons: dark and quiet, as on airtable.com. */
.mk-site .btn {
    border-radius: 12px;
    font-weight: 500;
}
.mk-site .btn-lg {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
}
.mk-site .btn-primary,
.mk-btn-dark {
    background: var(--mk-dark, #181d26) !important;
    border: 1px solid var(--mk-dark, #181d26) !important;
    color: #fff !important;
}
.mk-site .btn-primary:hover,
.mk-btn-dark:hover {
    background: #333a46 !important;
    border-color: #333a46 !important;
    color: #fff !important;
}
.mk-site .btn-outline-dark,
.mk-site .btn-outline-primary,
.mk-btn-outline {
    background: #fff !important;
    border: 1px solid var(--mk-dark, #181d26) !important;
    color: var(--mk-dark, #181d26) !important;
}
.mk-site .btn-outline-dark:hover,
.mk-site .btn-outline-primary:hover,
.mk-btn-outline:hover {
    background: #f3f3f1 !important;
    color: var(--mk-dark, #181d26) !important;
}
.mk-btn-dark.btn-sm,
.mk-btn-outline.btn-sm {
    border-radius: 12px;
    padding: 0.5rem 1rem;
    font-size: 0.92rem;
    font-weight: 500;
    align-items: center;
}
.mk-login {
    color: var(--mk-ink, #1d1f25);
    text-decoration: none;
    font-size: 0.95rem;
    padding: 0 0.25rem;
}
.mk-login:hover {
    color: var(--primary, #0b5cad);
}
/* The announcement bar over the navigation. */
.mk-announce {
    background: #f3f2ee;
    text-align: center;
    font-size: 0.88rem;
    padding: 8px 16px;
    border-bottom: 1px solid #ebeae5;
}
.mk-announce a {
    color: #1d1f25;
    text-decoration: none;
}
.mk-announce a span {
    color: var(--primary, #0b5cad);
    font-weight: 500;
    white-space: nowrap;
}
/* Navigation: plain, regular weight. */
.mk-site .header-nav {
    background: #fff;
    box-shadow: none;
    border-bottom: 1px solid #efeeea;
}
.mk-site .header-nav .nav-link {
    color: var(--mk-ink) !important;
    font-weight: 400;
    font-size: 0.97rem;
}
.mk-site .header-nav .nav-link:hover {
    color: var(--primary, #0b5cad) !important;
}
/* Section backgrounds: white and a warm off-white, not grey. */
.mk-site .bg-light {
    background-color: var(--mk-cream) !important;
}
.mk-site .mk-cta {
    background: var(--mk-cream);
}
/* Cards: hairline borders, soft corners, no heavy shadow. */
.mk-site .feature-card {
    border: 1px solid var(--mk-line);
    border-radius: 16px;
    box-shadow: none;
    background: #fff;
    padding: 1.6rem;
}
.mk-site .feature-card:hover {
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
    transform: none;
}
.mk-site .feature-card .mdi {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #eef3ff;
    color: var(--primary, #0b5cad);
    font-size: 22px;
    margin-bottom: 0.9rem;
}
.mk-site .feature-card h5 {
    font-size: 1.08rem;
}
.mk-site .mk-link-card {
    border-color: var(--mk-line);
    border-radius: 14px;
}
.mk-site .mk-pill {
    background: #f3f2ee;
    color: var(--mk-ink);
    font-weight: 500;
}
.mk-site a.mk-pill:hover {
    background: #ebeae5;
    color: var(--mk-ink);
}
.mk-site .mk-frame {
    border-radius: 16px;
    border-color: var(--mk-line);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
}
.mk-site .accordion-item {
    border-color: var(--mk-line);
}
.mk-site .accordion-button {
    font-weight: 500;
    color: var(--mk-ink);
}
.mk-site .accordion-button:not(.collapsed) {
    background: var(--mk-cream);
    color: var(--mk-ink);
    box-shadow: none;
}
.mk-site .compare-table {
    --bs-table-bg: transparent;
}
.mk-site footer,
.mk-site .footer {
    background: var(--mk-cream);
}
.mk-site .header-nav .navbar {
    box-shadow: none;
    border-bottom: 1px solid #efeeea;
}
.mk-btn-dark,
.mk-btn-outline,
.mk-login {
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Numbered list beside a large pastel panel (partials/mk-features.phtml),
   the feature layout of airtable.com.
   ------------------------------------------------------------------ */
.mk-features {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
    text-align: left;
}
.mk-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mk-line, #e6e6e3);
}
.mk-features-list li {
    border-bottom: 1px solid var(--mk-line, #e6e6e3);
}
.mk-features-list button {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 18px 4px;
    border: 0;
    background: none;
    color: var(--mk-ink-soft, #4b5160);
    font-size: 1.125rem;
    font-weight: 500;
    text-align: left;
    transition: color .15s ease;
}
.mk-features-list button:hover,
.mk-features-list button.is-active {
    color: var(--mk-ink, #1d1f25);
}
.mk-features-list .mk-num {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: #9aa0ab;
    min-width: 1.4em;
}
.mk-features-list button.is-active .mk-num {
    color: var(--mk-ink, #1d1f25);
}
.mk-features-panel {
    border-radius: 24px;
    padding: 40px 40px 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.mk-features-panel[hidden] {
    display: none;
}
.mk-features-panel.mk-tone-0 { background: #dfeefb; }
.mk-features-panel.mk-tone-1 { background: #fde7e1; }
.mk-features-panel.mk-tone-2 { background: #e3f2e1; }
.mk-features-panel.mk-tone-3 { background: #f6efe3; }
.mk-features-panel.mk-tone-4 { background: #ece6fb; }
.mk-features-text {
    max-width: 640px;
}
.mk-features-text h3 {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    color: var(--mk-ink, #1d1f25);
}
.mk-features-text p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--mk-ink-soft, #4b5160);
}
.mk-features-text .mk-ticks {
    margin: 0;
}
.mk-features-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 30px rgba(24, 29, 38, .10);
}
@media (max-width: 991.98px) {
    .mk-features {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mk-features-list {
        display: flex;
        overflow-x: auto;
        border: 0;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .mk-features-list li {
        border: 0;
        flex: 0 0 auto;
    }
    .mk-features-list button {
        padding: 8px 14px;
        border: 1px solid var(--mk-line, #e6e6e3);
        border-radius: 999px;
        font-size: .95rem;
    }
    .mk-features-list button.is-active {
        background: var(--mk-dark, #181d26);
        border-color: var(--mk-dark, #181d26);
        color: #fff;
    }
    .mk-features-list button.is-active .mk-num {
        color: #fff;
    }
    .mk-features-panel {
        padding: 24px 20px 0;
        border-radius: 18px;
    }
    .mk-features-text h3 {
        font-size: 1.3rem;
    }
}

/* Text links in the page read dark, underlined on hover, as on airtable.com. */
.mk-site main a.fw-semibold {
    color: var(--mk-ink, #1d1f25);
    text-decoration: none;
}
.mk-site main a.fw-semibold:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Pricing in airtable.com's quiet palette: ink, not brand blue. */
.mk-site .price-card {
    border-color: var(--mk-line, #e6e6e3);
    border-radius: 16px;
}
.mk-site .price-card-featured {
    border: 2px solid var(--mk-dark, #181d26);
    box-shadow: 0 16px 38px rgba(24, 29, 38, 0.10);
}
.mk-site .price-card-flag {
    background: var(--mk-dark, #181d26);
    letter-spacing: 0;
}
.mk-site .price-card-name,
.mk-site .price-card-price {
    font-weight: 500;
    color: var(--mk-ink, #1d1f25);
}
.mk-site .price-card-list {
    color: var(--mk-ink-soft, #4b5160);
}
.mk-site .price-card-list .mdi,
.mk-site .mk-ticks .mdi {
    color: var(--mk-ink, #1d1f25);
}
.mk-site .alert-primary {
    background: var(--mk-cream, #f7f5f0);
    color: var(--mk-ink, #1d1f25);
    border: 1px solid var(--mk-line, #e6e6e3) !important;
    border-radius: 16px;
}

/* Inter, self-hosted (assets/fonts/inter, SIL Open Font License): variable, 400 to 600. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   The top menu as on airtable.com: the full width of the window, the
   menu beside the logo in medium weight with small grey chevrons, the
   buttons at the far right, a taller bar, an announcement that closes.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    .mk-site .header-nav .mk-nav-inner {
        max-width: none;
        padding: 0 32px !important;
        min-height: 76px;
    }
    .mk-site .header-nav .navbar-brand {
        margin-right: 28px;
        padding-left: 0 !important;
    }
    .mk-site .header-nav .navbar-nav > li > .nav-link {
        font-size: 16px;
        font-weight: 500;
        padding: 8px 12px !important;
        letter-spacing: -0.005em;
    }
}
.mk-site .header-nav {
    border-bottom: 0;
}
.mk-site .header-nav.sticky {
    box-shadow: 0 1px 0 #ecebe7;
}
.mk-site .header-nav .navbar {
    border-bottom: 0;
}
.mk-site .header-nav .navbar-brand img {
    height: 34px;
    margin-top: -3px;
}
.mk-site .header-nav .nav-link:hover {
    color: var(--mk-ink, #1d1f25) !important;
    opacity: .72;
}
.mk-site .header-nav .dropdown-toggle::after {
    width: 12px;
    height: 12px;
    margin-left: 6px;
    background-color: #9aa0ab;
    transform: rotate(-90deg);
    transition: transform .15s ease;
}
.mk-site .header-nav .dropdown:hover .dropdown-toggle::after,
.mk-site .header-nav .dropdown-toggle.show::after {
    transform: rotate(0deg);
}
.mk-site .header-nav .mk-btn-dark.btn-sm,
.mk-site .header-nav .mk-btn-outline.btn-sm {
    height: 48px;
    padding: 0 22px;
    font-size: 16px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
}
.mk-site .header-nav .mk-btn-dark.btn-sm {
    margin-right: 14px !important;
}
.mk-site .header-nav .mk-login {
    font-size: 16px;
    font-weight: 500;
    padding: 0 6px;
}
.mk-site .header-nav .mk-login:hover {
    color: var(--mk-ink, #1d1f25);
    opacity: .72;
}
.mk-announce {
    position: relative;
    padding: 10px 48px;
    font-size: 15px;
    background: #f4f3ef;
    border-bottom: 0;
}
.mk-announce a span {
    color: #1b4ea2;
}
.mk-announce-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #4b5160;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
}
.mk-announce-close:hover {
    color: #1d1f25;
}
.mk-announce[hidden] {
    display: none;
}
@media (max-width: 991.98px) {
    .mk-site .header-nav .mk-btn-dark.btn-sm {
        height: 40px;
        padding: 0 14px;
        font-size: 15px;
    }
    .mk-announce {
        padding: 8px 40px 8px 16px;
        font-size: 13.5px;
        text-align: left;
    }
}
@media (min-width: 992px) {
    .mk-site .header-nav .navbar .navbar-nav > li {
        padding: 0;
    }
    .mk-site .header-nav .navbar-nav > li > .nav-link {
        padding: 8px 11px !important;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .mk-site .header-nav .mk-nav-inner {
        padding: 0 20px !important;
    }
    .mk-site .header-nav .navbar-brand {
        margin-right: 12px;
    }
    .mk-site .header-nav .navbar-nav > li > .nav-link {
        font-size: 15px;
        padding: 8px 8px !important;
    }
}
/* "What's new" only where the bar has room for it. */
.mk-site .header-nav .mk-nav-new {
    display: none;
}
@media (min-width: 1320px) {
    .mk-site .header-nav .mk-nav-new {
        display: list-item;
    }
}
/* Phones: logo, a dark "Sign up for free" and a dark menu icon, as on airtable.com. */
.mk-site .header-nav .navbar-toggler-icon {
    background-color: var(--mk-ink, #1d1f25);
}
@media (max-width: 991.98px) {
    .mk-site .header-nav nav .navbar-end .mk-btn-dark.sign-up-desktop {
        display: inline-flex !important;
        height: 38px;
        padding: 0 14px;
        font-size: 14px;
        margin-right: 8px !important;
    }
    .mk-site .header-nav .navbar-brand img {
        height: 28px;
    }
}
@media (max-width: 359.98px) {
    .mk-site .header-nav nav .navbar-end .mk-btn-dark.sign-up-desktop {
        padding: 0 10px;
        font-size: 13px;
    }
}

/* ------------------------------------------------------------------
   The open menu, as on airtable.com (header.phtml, .mk-menu): opens on
   click; the item turns blue and underlined; a panel under the bar from
   the left edge, links on the left in large type, one promoted page on
   a tinted panel to the right; the rest of the page dimmed.
   ------------------------------------------------------------------ */
.header-nav .mk-menu > .dropdown-toggle.show,
.mk-site .header-nav .mk-menu > .nav-link:hover {
    color: #1b4ea2 !important;
    opacity: 1;
}
.header-nav .mk-menu > .dropdown-toggle.show::after {
    background-color: #1b4ea2;
}
.mk-site .header-nav .mk-menu:hover > .dropdown-toggle:not(.show)::after {
    transform: rotate(-90deg);
}
.mk-site .header-nav .mk-menu > .dropdown-toggle.show::after {
    transform: rotate(0deg);
}
.mk-panel-head {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5f6573;
    margin-bottom: 14px;
}
.mk-panel-head::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d5d7dc;
}
.mk-panel-item {
    display: grid;
    grid-template-columns: 1fr;
    padding: 9px 0;
    text-decoration: none;
    color: var(--mk-ink, #1d1f25);
}
.mk-panel-item.has-icon {
    grid-template-columns: 36px 1fr;
}
.mk-panel-item.has-icon .mdi {
    grid-row: span 2;
    font-size: 22px;
    line-height: 1.1;
}
.mk-panel-title {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.mk-panel-text {
    font-size: 15px;
    color: #5f6573;
    line-height: 1.4;
}
.mk-panel-item:hover .mk-panel-title {
    color: #1b4ea2;
}
.mk-panel-item.is-short {
    padding: 7px 0;
}
.mk-panel-item.is-short .mk-panel-title {
    font-size: 17px;
}
.mk-panel-all {
    display: inline-block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--mk-ink, #1d1f25);
    text-decoration: none;
}
.mk-panel-all:hover {
    color: #1b4ea2;
}
.mk-ico-0 { color: #d63fa6; }
.mk-ico-1 { color: #7c5ce0; }
.mk-ico-2 { color: #e8505b; }
.mk-ico-3 { color: #12807a; }
.mk-ico-4 { color: #e09a1b; }
.mk-ico-5 { color: #2d6fd6; }
.mk-panel-promo {
    display: none;
}

@media (min-width: 992px) {
    .header-nav .navbar {
        position: relative;
    }
    .header-nav .navbar .container-lg,
    .header-nav .navbar .navbar-collapse,
    .header-nav .navbar .navbar-nav,
    .header-nav .navbar .navbar-nav > li.mk-menu {
        position: static;
    }
    .header-nav .navbar .navbar-nav > li.mk-menu > .dropdown-menu.mk-panel {
        display: none;
        position: absolute;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        width: min(1200px, 100vw);
        max-height: calc(100vh - 130px);
        margin: 0 !important;
        padding: 0;
        border: 0;
        border-radius: 0 0 16px 0;
        box-shadow: 0 24px 48px rgba(24, 29, 38, .14);
        background: #fff;
        overflow: hidden;
        transform: none !important;
        opacity: 1 !important;
    }
    .header-nav .navbar .navbar-nav > li.mk-menu > .dropdown-menu.mk-panel.show {
        display: grid;
        grid-template-columns: 1fr 440px;
    }
    .mk-panel-main {
        display: grid;
        gap: 0 48px;
        padding: 36px 48px 40px;
        overflow-y: auto;
        align-content: start;
    }
    .mk-panel-cols-2 {
        grid-template-columns: 1fr 1fr;
    }
    .mk-panel-cols-wide {
        grid-template-columns: 1.7fr 1fr;
    }
    .mk-panel-promo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 52px 44px 0;
        background: linear-gradient(180deg, #eaf4fb 0%, #d7e9f6 100%);
        overflow: hidden;
    }
    .mk-panel-kicker {
        font-size: 14px;
        color: #5f6573;
        margin-bottom: 10px;
    }
    .mk-panel-title-lg {
        font-size: 40px;
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: #0f5f93;
        margin-bottom: 20px;
    }
    .mk-panel-promo p {
        font-size: 17px;
        line-height: 1.45;
        color: var(--mk-ink, #1d1f25);
        margin-bottom: 24px;
    }
    .mk-panel-promo .btn {
        height: 48px;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 500;
        background: transparent !important;
    }
    .mk-panel-promo img {
        display: block;
        width: 130%;
        max-width: none;
        margin-top: 36px;
        border-radius: 12px 0 0 0;
        box-shadow: 0 -4px 30px rgba(24, 29, 38, .12);
    }
    /* The underline under the open item, on the bottom edge of the bar. */
    .header-nav .navbar-nav > li.mk-menu > .dropdown-toggle {
        position: relative;
    }
    .header-nav .navbar-nav > li.mk-menu > .dropdown-toggle.show::before {
        content: "";
        position: absolute;
        left: 11px;
        right: 11px;
        bottom: -18px;
        height: 2px;
        background: #1b4ea2;
    }
    /* The page behind, dimmed; a click on it closes the menu (Bootstrap). */
    .header-nav.mk-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(24, 29, 38, .32);
        z-index: -1;
    }
}

/* Phones and tablets: the links in the collapsed menu, one column. */
@media (max-width: 991.98px) {
    .header-nav .navbar-nav > li.mk-menu > .dropdown-menu.mk-panel {
        border: 0;
        box-shadow: none;
        padding: 4px 16px 12px;
        transform: none !important;
        opacity: 1 !important;
    }
    .header-nav .navbar-nav > li.mk-menu > .dropdown-menu.mk-panel:not(.show) {
        display: none !important;
    }
    .mk-panel-head {
        margin: 12px 0 6px;
    }
    .mk-panel-title {
        font-size: 17px;
    }
    .mk-panel-text {
        font-size: 14px;
    }
    .header-nav .navbar-nav .mk-panel a.mk-panel-item,
    .header-nav .navbar-nav .mk-panel a.mk-panel-all {
        padding: 7px 0 !important;
        font-size: inherit;
    }
}
/* The announcement bar in airtable.com's pale blue. */
.mk-announce {
    background: #eef4fc;
}
.mk-site .header-nav .navbar-nav > li > .nav-link:hover {
    color: #1b4ea2 !important;
    opacity: 1;
}
.mk-site .header-nav .navbar .navbar-toggler .navbar-toggler-icon,
.mk-site .header-nav .navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: var(--mk-ink, #1d1f25);
}

/* ------------------------------------------------------------------
   The footer, as on airtable.com (partials/footer.phtml).
   ------------------------------------------------------------------ */
footer.mk-footer,
.mk-site footer.mk-footer {
    background: #fff;
    border-top: 0;
    padding: 0;
    color: var(--mk-ink, #1d1f25);
    font-size: 15px;
}
.mk-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.mk-footer-top {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 56px 0 22px;
    border-bottom: 1px solid #dcdcd8;
}
.mk-footer-logo img {
    height: 30px;
    width: auto;
    display: block;
}
.mk-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 28px;
    flex: 1;
}
.mk-footer-nav a {
    color: var(--mk-ink, #1d1f25);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
}
.mk-footer-share {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #6b7180;
    font-size: 13px;
}
.mk-footer-share a {
    color: #6b7180;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}
.mk-footer-nav a:hover,
.mk-footer-share a:hover,
.mk-footer-cols a:hover,
.mk-footer-legal a:hover {
    color: #1b4ea2;
}
.mk-footer-cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    padding: 36px 0 56px;
}
.mk-footer-cols h5 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--mk-ink, #1d1f25);
    letter-spacing: 0;
}
.mk-footer-cols ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mk-footer-cols li {
    margin-bottom: 10px;
}
.mk-footer-cols a {
    color: #333843;
    text-decoration: none;
}
.mk-footer-cols .mk-footer-more {
    display: inline-block;
    margin-top: 2px;
    font-weight: 600;
    color: var(--mk-ink, #1d1f25);
}
.mk-footer-legal {
    background: #f4f4f2;
    padding: 18px 0;
    font-size: 13.5px;
    color: #4b5160;
}
.mk-footer-legal .mk-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
}
.mk-footer-legal nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
}
.mk-footer-legal a {
    color: #333843;
    text-decoration: none;
    font-weight: 500;
}
@media (max-width: 991.98px) {
    .mk-footer-top {
        flex-wrap: wrap;
        gap: 20px;
        padding-top: 40px;
    }
    .mk-footer-nav {
        flex-basis: 100%;
        order: 3;
    }
    .mk-footer-share {
        margin-left: auto;
    }
    .mk-footer-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 24px;
    }
}
@media (max-width: 575.98px) {
    .mk-footer-inner {
        padding: 0 20px;
    }
    .mk-footer-share span {
        display: none;
    }
}

/* The closing call to action: a left-aligned card with a hairline, as
   "Start building with Airtable" is. */
.mk-site .mk-cta {
    background: #fff !important;
    padding-top: 24px;
}
.mk-site .mk-cta > .container {
    border: 1px solid #dcdcd8;
    border-radius: 16px;
    padding: 56px 56px;
    text-align: left !important;
}
.mk-site .mk-cta h2 {
    font-size: 2.4rem;
    font-weight: 400 !important;
    letter-spacing: -0.03em;
}
.mk-site .mk-cta .lead {
    font-size: 1.1rem;
    max-width: 720px;
}
.mk-site .mk-cta .mk-actions {
    justify-content: flex-start !important;
}
@media (max-width: 767.98px) {
    .mk-site .mk-cta > .container {
        padding: 36px 24px;
        width: calc(100% - 32px);
    }
    .mk-site .mk-cta h2 {
        font-size: 1.8rem;
    }
}

/* Headings as on airtable.com: regular weight, section headings to the left. */
.mk-site .mk-title {
    font-weight: 400;
    letter-spacing: -0.04em;
}
.mk-site h2.display-6,
.mk-site .display-6,
.mk-site h2.display-5 {
    font-weight: 400 !important;
    letter-spacing: -0.03em;
}
.mk-site .section-intro {
    text-align: left;
    margin-left: 0;
    max-width: 52rem;
}
/* Where what follows is centred (a question list, a table), the heading stays centred with it. */
.mk-site .container:has(> .row.justify-content-center) > .section-intro,
.mk-site .container:has(> .accordion) > .section-intro,
.mk-site .switch-numbers .section-intro {
    text-align: center;
    margin-left: auto;
}

/* The dark block: a rounded card inset from the edges, not a full-width band. */
.mk-site .switch-numbers {
    background: #fff;
}
.mk-site .switch-numbers > .container {
    background: var(--mk-dark, #181d26);
    border-radius: 24px;
    padding: 64px 56px;
}
@media (max-width: 767.98px) {
    .mk-site .switch-numbers > .container {
        padding: 40px 20px;
        width: calc(100% - 32px);
    }
}

/* One cream panel: a statement on the left, ticked points by group on the right. */
.mk-bigpanel {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    background: var(--mk-cream, #f7f5f0);
    border-radius: 24px;
    padding: 56px;
}
.mk-bigpanel-lead .mdi {
    font-size: 34px;
    color: #12807a;
    display: block;
    margin-bottom: 18px;
}
.mk-bigpanel-lead h2 {
    font-size: 2.1rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 16px;
}
.mk-bigpanel-lead p {
    color: var(--mk-ink-soft, #4b5160);
    font-size: 1.05rem;
}
.mk-bigpanel-groups {
    display: grid;
    gap: 28px;
}
.mk-bigpanel-groups h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e0d8;
}
.mk-bigpanel-groups .mk-ticks {
    margin: 0;
}
.mk-bigpanel-groups .mk-ticks li {
    font-size: 0.97rem;
}
@media (max-width: 991.98px) {
    .mk-bigpanel {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 22px;
    }
    .mk-bigpanel-lead h2 {
        font-size: 1.7rem;
    }
}
.mk-site h1.display-5 {
    font-weight: 400 !important;
    letter-spacing: -0.04em;
}

/* ------------------------------------------------------------------
   Templates (browse-templates.phtml), as airtable.com/templates:
   a sidebar with search and categories, tiles, featured cards and a
   row of cards per category; each template on its own page.
   ------------------------------------------------------------------ */
.tpl-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.tpl-hero {
    padding: 64px 0 40px;
}
.tpl-title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 14px;
    color: var(--mk-ink, #1d1f25);
}
.tpl-lead {
    font-size: 1.2rem;
    color: var(--mk-ink-soft, #4b5160);
    max-width: 640px;
    margin: 0;
}
.tpl-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
    padding-bottom: 64px;
}
.tpl-side {
    position: sticky;
    top: 96px;
}
.tpl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d5d7dc;
    border-radius: 999px;
    padding: 0 14px;
    height: 40px;
    margin-bottom: 24px;
    background: #fff;
}
.tpl-search .mdi {
    color: #6b7180;
    font-size: 18px;
}
.tpl-search input {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    background: transparent;
}
.tpl-search:focus-within {
    border-color: #1b4ea2;
    box-shadow: 0 0 0 3px rgba(27, 78, 162, .12);
}
.tpl-side-group {
    margin-bottom: 22px;
}
.tpl-side-head {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #6b7180;
    margin-bottom: 8px;
}
.tpl-side ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tpl-side li a {
    display: block;
    padding: 5px 0;
    color: var(--mk-ink, #1d1f25);
    text-decoration: none;
    font-size: 15px;
}
.tpl-side li a:hover {
    color: #1b4ea2;
}
.tpl-side li a.is-active {
    font-weight: 600;
    color: #1b4ea2;
}
.tpl-side-switch {
    border-top: 1px solid var(--mk-line, #e6e6e3);
    padding-top: 20px;
}
.tpl-side-switch .btn {
    border-radius: 999px !important;
    margin-bottom: 8px;
}
.tpl-side-switch small {
    display: block;
    color: #6b7180;
    font-size: 13px;
    line-height: 1.4;
}
.tpl-tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(118px, 1fr);
    gap: 10px;
    margin-bottom: 48px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.tpl-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 12px;
    border-radius: 16px;
    background: #f4f4f2;
    color: var(--mk-ink, #1d1f25);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
    transition: background .15s ease, transform .15s ease;
}
.tpl-tile .mdi {
    font-size: 28px;
    color: #1b4ea2;
}
.tpl-tile:nth-child(5n+2) .mdi { color: #d63fa6; }
.tpl-tile:nth-child(5n+3) .mdi { color: #7c5ce0; }
.tpl-tile:nth-child(5n+4) .mdi { color: #12807a; }
.tpl-tile:nth-child(5n+5) .mdi { color: #e09a1b; }
.tpl-tile:hover {
    background: #ecebe7;
    transform: translateY(-2px);
    color: var(--mk-ink, #1d1f25);
}
.tpl-h2,
.tpl-section-head h2 {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--mk-ink, #1d1f25);
}
.tpl-h2 {
    margin-bottom: 20px;
}
.tpl-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 56px 0 20px;
}
.tpl-main > .tpl-section-head:first-child,
.tpl-results .tpl-section-head {
    margin-top: 0;
}
.tpl-section-head[hidden] {
    display: none;
}
.tpl-section-head a {
    color: var(--mk-ink, #1d1f25);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
}
.tpl-section-head a:hover {
    color: #1b4ea2;
}
.tpl-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tpl-feature {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: stretch;
    min-height: 230px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: var(--mk-ink, #1d1f25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tpl-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(24, 29, 38, .10);
    color: var(--mk-ink, #1d1f25);
}
.tpl-feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 28px;
}
.tpl-feature-title {
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.tpl-feature-blurb {
    font-size: 15px;
    color: var(--mk-ink-soft, #4b5160);
}
.tpl-feature-shot {
    display: block;
    padding: 28px 0 0;
    overflow: hidden;
}
.tpl-feature-shot img {
    display: block;
    width: 160%;
    max-width: none;
    border-radius: 10px 0 0 0;
    box-shadow: 0 -2px 20px rgba(24, 29, 38, .12);
}
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
}
.tpl-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: var(--mk-ink, #1d1f25);
}
.tpl-card[hidden],
.tpl-results[hidden],
[data-tpl-home][hidden],
.tpl-empty[hidden] {
    display: none;
}
.tpl-card-shot {
    display: block;
    aspect-ratio: 16 / 11;
    border-radius: 16px;
    padding: 18px 18px 0;
    overflow: hidden;
    margin-bottom: 8px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tpl-card-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -2px 16px rgba(24, 29, 38, .10);
}
.tpl-card:hover .tpl-card-shot {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(24, 29, 38, .10);
}
.tpl-card-title {
    font-weight: 600;
    font-size: 16px;
}
.tpl-card:hover .tpl-card-title {
    color: #1b4ea2;
}
.tpl-card-text {
    font-size: 14.5px;
    color: var(--mk-ink-soft, #4b5160);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tpl-tone-0 { background: linear-gradient(160deg, #e3effc, #cfe2f8); }
.tpl-tone-1 { background: linear-gradient(160deg, #fdebe5, #f9d7cc); }
.tpl-tone-2 { background: linear-gradient(160deg, #e5f4e3, #cfe9cb); }
.tpl-tone-3 { background: linear-gradient(160deg, #f8f1e4, #efe1c7); }
.tpl-tone-4 { background: linear-gradient(160deg, #eee8fc, #ddd2f7); }
.tpl-empty {
    padding: 48px 0;
}
.tpl-empty h3 {
    font-size: 1.3rem;
    font-weight: 500;
}
.tpl-empty p {
    color: var(--mk-ink-soft, #4b5160);
}

/* One template */
.tpl-detail {
    padding: 36px 0 56px;
}
.tpl-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    margin-bottom: 32px;
}
.tpl-crumbs a {
    color: #4b5160;
    text-decoration: none;
}
.tpl-crumbs a:hover {
    color: #1b4ea2;
}
.tpl-crumbs .mdi {
    color: #9aa0ab;
}
.tpl-detail-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
    align-items: center;
}
.tpl-use {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 32px;
}
.tpl-use .btn {
    height: 52px;
    display: inline-flex;
    align-items: center;
    border-radius: 12px;
    padding: 0 26px;
    font-weight: 500;
}
.tpl-facts {
    margin: 0;
    border-top: 1px solid var(--mk-line, #e6e6e3);
}
.tpl-facts > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mk-line, #e6e6e3);
    font-size: 15px;
}
.tpl-facts dt {
    font-weight: 500;
    color: #6b7180;
}
.tpl-facts dd {
    margin: 0;
}
.tpl-facts a {
    color: var(--mk-ink, #1d1f25);
}
.tpl-detail-shot,
.tpl-second-shot {
    border-radius: 24px;
    padding: 36px 36px 0;
    overflow: hidden;
}
.tpl-detail-shot img,
.tpl-second-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 30px rgba(24, 29, 38, .14);
}
.tpl-about {
    padding: 56px 0;
    background: var(--mk-cream, #f7f5f0);
}
.tpl-about-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 56px;
}
.tpl-about-text {
    font-size: 1.1rem;
    color: var(--mk-ink-soft, #4b5160);
    margin-bottom: 20px;
}
.tpl-tables {
    display: grid;
    gap: 14px;
}
.tpl-table {
    background: #fff;
    border: 1px solid var(--mk-line, #e6e6e3);
    border-radius: 16px;
    padding: 18px 20px;
}
.tpl-table-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.tpl-table-head .mdi {
    color: #1b4ea2;
    font-size: 20px;
}
.tpl-table-head strong {
    font-weight: 600;
}
.tpl-table-head span {
    margin-left: auto;
    color: #6b7180;
    font-size: 14px;
}
.tpl-table-fields,
.tpl-table-views {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tpl-table-fields {
    margin-bottom: 10px;
}
.tpl-table-fields span {
    background: #f4f4f2;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 13.5px;
}
.tpl-table-fields .is-more {
    background: transparent;
    color: #6b7180;
}
.tpl-table-views span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    color: #4b5160;
    padding: 3px 10px 3px 8px;
    border: 1px solid var(--mk-line, #e6e6e3);
    border-radius: 999px;
}
.tpl-table-views .mdi {
    color: #1b4ea2;
}
.tpl-second {
    padding: 56px 0 0;
}
.tpl-related {
    padding: 8px 0 32px;
}

@media (max-width: 1099.98px) {
    .tpl-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tpl-featured {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 991.98px) {
    .tpl-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tpl-side {
        position: static;
    }
    .tpl-side-group ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .tpl-side li a {
        border: 1px solid var(--mk-line, #e6e6e3);
        border-radius: 999px;
        padding: 5px 12px;
        font-size: 14px;
    }
    .tpl-side li a.is-active {
        background: var(--mk-dark, #181d26);
        border-color: var(--mk-dark, #181d26);
        color: #fff;
    }
    .tpl-side-switch {
        display: none;
    }
    .tpl-detail-grid,
    .tpl-about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
@media (max-width: 575.98px) {
    .tpl-wrap {
        padding: 0 16px;
    }
    .tpl-hero {
        padding: 40px 0 24px;
    }
    .tpl-grid {
        grid-template-columns: 1fr;
    }
    .tpl-feature {
        grid-template-columns: 1fr;
    }
    .tpl-feature-shot {
        padding: 0 0 0 24px;
    }
    .tpl-detail-shot,
    .tpl-second-shot {
        padding: 18px 18px 0;
        border-radius: 18px;
    }
    .tpl-h2,
    .tpl-section-head h2 {
        font-size: 1.6rem;
    }
}

/* Grid columns may shrink below their content, so the scrolling tile row stays inside the page. */
.tpl-main,
.tpl-side,
.tpl-detail-text,
.tpl-detail-shot {
    min-width: 0;
}

/* The product video in the home hero sits in the same frame as the screenshots. */
.mk-frame .mk-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 900;
    background: #fff;
}

/* "Play with sound" over the home hero video. */
.mk-frame {
    position: relative;
}
.mk-sound {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 9px 16px 9px 13px;
    background: rgba(24, 29, 38, .86);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    backdrop-filter: blur(4px);
    transition: background .15s ease;
}
.mk-sound:hover {
    background: rgba(24, 29, 38, 1);
}
.mk-sound .mdi {
    font-size: 18px;
    line-height: 1;
}
@media (max-width: 575.98px) {
    .mk-sound {
        left: 8px;
        bottom: 8px;
        padding: 6px 12px 6px 10px;
        font-size: 13px;
    }
}
.mk-sound[hidden] {
    display: none;
}

/* ------------------------------------------------------------------
   Home after signing in (index.phtml): the greeting, getting started
   and "Start building", as Airtable's home has them.
   ------------------------------------------------------------------ */
.home-head {
    margin: 12px 0 22px;
}
.home-title {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
    color: #1d1f25;
}
.home-date {
    margin: 2px 0 0;
    color: #6b7180;
    font-size: 15px;
}
.home-h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1d1f25;
}
.home-onboarding {
    border: 1px solid #e6e6e3;
    border-radius: 16px;
    background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 70%);
    padding: 20px 22px 8px;
    margin-bottom: 28px;
}
.home-onboarding-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.home-onboarding-head h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 2px;
    color: #1d1f25;
}
.home-onboarding-head p {
    margin: 0;
    color: #4b5160;
    font-size: 14.5px;
}
.home-onboarding-bar {
    height: 6px;
    border-radius: 999px;
    background: #e8ecf3;
    margin: 14px 0 6px;
    overflow: hidden;
}
.home-onboarding-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #1b4ea2;
    transition: width .4s ease;
}
.home-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.home-steps li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid #eef0f3;
}
.home-steps li:first-child {
    border-top: 0;
}
.home-step-mark {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #1b4ea2;
    background: #e6eefb;
}
.home-steps li.is-done .home-step-mark {
    background: #1f9d55;
    color: #fff;
    font-size: 16px;
}
.home-step-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.home-step-text strong {
    font-weight: 600;
    font-size: 15px;
    color: #1d1f25;
}
.home-step-text span {
    font-size: 14px;
    color: #6b7180;
}
.home-steps li.is-done .home-step-text strong {
    color: #6b7180;
    text-decoration: line-through;
    text-decoration-color: rgba(107, 113, 128, .5);
}
.home-step-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.home-btn-dark,
.home-btn-light {
    border-radius: 10px !important;
    font-weight: 500;
    padding: 6px 14px;
    white-space: nowrap;
}
.home-btn-dark {
    background: #181d26;
    border: 1px solid #181d26;
    color: #fff;
}
.home-btn-dark:hover {
    background: #333a46;
    color: #fff;
}
.home-btn-light {
    background: #fff;
    border: 1px solid #d5d7dc;
    color: #1d1f25;
}
.home-btn-light:hover {
    background: #f3f3f1;
    color: #1d1f25;
}
.home-start {
    margin-bottom: 36px;
}
.home-start-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.home-start-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid #e6e6e3;
    border-radius: 14px;
    background: #fff;
    color: #1d1f25;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.home-start-card:hover {
    border-color: #d5d7dc;
    box-shadow: 0 10px 24px rgba(24, 29, 38, .08);
    transform: translateY(-2px);
    color: #1d1f25;
}
.home-start-card strong {
    font-weight: 600;
    font-size: 15px;
}
.home-start-card > span:last-child {
    font-size: 13.5px;
    color: #6b7180;
    line-height: 1.4;
}
.home-start-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 8px;
}
.home-start-icon.is-blue { background: #e3effc; color: #1b4ea2; }
.home-start-icon.is-pink { background: #fbe4f1; color: #c2185b; }
.home-start-icon.is-green { background: #e3f4e1; color: #1f7a3f; }
.home-start-icon.is-amber { background: #fbf0dc; color: #a15c00; }
@media (max-width: 1199.98px) {
    .home-start-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575.98px) {
    .home-title {
        font-size: 1.6rem;
    }
    .home-steps li {
        flex-wrap: wrap;
    }
    .home-step-actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 42px;
    }
    .home-start-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .home-start-card > span:last-child {
        display: none;
    }
}

/* The app menu, signed in (header.phtml, $appHeader). */
.header-nav .app-nav .nav-link {
    font-weight: 500;
    color: #1d1f25 !important;
    white-space: nowrap;
}
.header-nav .app-nav .nav-link.is-current {
    color: #1b4ea2 !important;
}