:root {
    /* Brand Identity (Authority Navy) */
    --primary-color: #0A2540;
    --secondary-color: #334E68;
    --accent-color: #2E5C8A;
    --main-bg: #ffffff;
    --alt-bg: #F5F1EB; /* Warm off-white */
    --main-text: #1a1a1a;
    --muted-text: #4F6479; /* 5.4:1 or better on the warm backgrounds */
    --border-stroke: #e1e8ed;
    --sharp-radius: 2px;

    /* The design system (st- classes, at the end of this file) */
    --st-wine: #7b2d3b;
    --st-wine-hover: #5e2230;
    --st-ink-muted: #3f566d;
    --st-offwhite: #f5f1eb; /* every light text and light button on the dark bands */
    --st-display: 'Plus Jakarta Sans', Outfit, -apple-system, BlinkMacSystemFont, sans-serif;
    --st-section: clamp(64px, 9vw, 112px);
}


/* BASE STYLES: body text is Outfit and every heading is Plus Jakarta Sans, both
   self-hosted in cms/css/fonts.css. Weights and sizes come from the design system
   classes at the end of this file. */
body.site-body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--main-text);
    background-color: var(--alt-bg);
    line-height: 1.6;
}

.site-body h1, .site-body h2, .site-body h3, .site-body h4, .site-body h5, .site-body h6 {
    font-family: 'Plus Jakarta Sans', Outfit, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* BETA WARNING BAR */
.bg-dark.text-white {
    background-color: var(--primary-color) !important;
}

/* On narrow phones the wordmark, the chat button and the menu icon share one row:
   the wordmark and the button tighten so the menu icon does not wrap below. */
.navbar .nav-cta-phone { padding-left: 1rem; padding-right: 1rem; }

@media (max-width: 419.98px) {
    .navbar .site-brand span { font-size: 0.85rem; letter-spacing: 0.5px; }
    .navbar .nav-cta-phone { padding-left: 0.6rem; padding-right: 0.6rem; font-size: 0.8125rem; }
    .navbar .navbar-toggler { padding: 0.25rem 0.5rem; }
}

/* On the narrowest phones only the logo mark shows, so the row still fits. */
@media (max-width: 359.98px) {
    .navbar .site-brand span { display: none; }
}

/* SKIP LINK: hidden until a keyboard user tabs to it, then shown over the navbar. */
.skip-link:focus {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: var(--main-bg);
    color: var(--primary-color);
    font-weight: 600;
    border: 2px solid var(--primary-color);
    border-radius: var(--sharp-radius);
}

/* The main region takes focus from the skip link without drawing a ring round the page. */
#main-content:focus { outline: none; }

/* NAVIGATION */
.navbar {
    padding: 1.2rem 0;
    box-shadow: 0 1px 8px rgba(10, 37, 64, 0.06);
    background-color: var(--main-bg);
}

.site-brand { color: var(--primary-color); text-decoration: none; }

.site-brand img {
    max-height: 32px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.site-brand span {
    font-family: 'Plus Jakarta Sans', Outfit, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    text-transform: uppercase;
}

.nav-link {
    font-family: 'Plus Jakarta Sans', Outfit, sans-serif;
    color: var(--secondary-color);
    font-weight: 500;
    transition: color 0.2s ease;
}

.navbar .nav-link,
.navbar .st-btn {
    white-space: nowrap;
}

/* Wide spacing between the menu links makes them easier to read. Between 1200px, where
   the menu icon stops, and 1400px, where the container grows, the seven links and the
   button only fit on one row with closer spacing. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar { --bs-navbar-nav-link-padding-x: 0.45rem; }
}
@media (min-width: 1400px) {
    .navbar { --bs-navbar-nav-link-padding-x: 1rem; }
}

.nav-link:hover {
    color: var(--primary-color);
}

/* BUTTONS */
.btn {
    border-radius: var(--sharp-radius);
    padding: 0.8rem 1.8rem;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
    letter-spacing: 0.5px;
}

/* Bootstrap Overrides */
.rounded-pill {
    border-radius: 50rem !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--main-bg);
}

.btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
}

.btn-outline-primary {
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    background-color: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--main-bg);
}

.btn-outline-secondary {
    border: 1.5px solid var(--border-stroke);
    color: var(--secondary-color);
    background-color: var(--main-bg);
}

.btn-outline-secondary:hover {
    border-color: var(--secondary-color);
    color: var(--primary-color);
}

/* HERO BENTO (Layout) */
.hero-bento {
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: 5rem 0 4rem;
    position: relative;
    background-image: url("../images/hero-image.60eb0ea8bda2.webp");
    background-size: cover;
    background-position: center;
}

.features-section-bg {
    background-color: #f3ede3;
    background-blend-mode: multiply; /* warms the grey texture to a soft stone */
    background-image: url("../images/home-background.7d05cda6bf1b.webp");
    background-size: cover;
    background-position: center;
}

/* Specific text context for hero background */
.hero-bento-dark-text .hero-headline,
.hero-bento-dark-text .hero-sub {
    color: white;
}
.hero-bento-dark-text .text-muted {
    color: white !important;
    opacity: 0.7;
}
.hero-bento-dark-text .hero-sub { opacity: 0.85; }


.hero-headline {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.hero-sub {
    font-size: 1.15rem;
    color: var(--secondary-color);
    max-width: 480px; /* constrained for landing page alongside bento grid */
    line-height: 1.6;
}

/* Full-width variant — used on pages where text spans the whole container */
.hero-sub-wide {
    max-width: 100%;
}


/* BENTO GRID */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem; 
}

/* Base Bento Card */
.bento-card {
    background: white;
    border: 1px solid var(--border-stroke);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    will-change: transform, box-shadow;
}

/* Hover lift effect */
.bento-card:hover {
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.1);
    transform: translateY(-2px);
}

/* Bento utilities */
.bento-card-dark {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.bento-card-accent {
    background: var(--alt-bg);
}

/* Spanning classes */
.bento-span-2-col { grid-column: span 2; }
.bento-span-2-row { grid-row: span 2; }
.bento-span-3-col { grid-column: span 3; }


/* Bento Content Styles */
.bento-icon {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

/* Dark card icon color variation */
.bento-card-dark .bento-icon {
    color: rgba(255,255,255,0.8);
}

.bento-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--muted-text);
    margin-bottom: 0.3rem;
}

/* Dark card label color variation */
.bento-card-dark .bento-label {
    color: rgba(255,255,255,0.6);
}

.bento-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.bento-title-light {
    color: white;
}

.bento-title-lg {
    font-size: 1.3rem;
    line-height: 1.25;
    color: white;
}

/* Body text on dark bento cards */
.bento-body-muted {
    color: rgba(255, 255, 255, 0.75);
}

/* Icon on dark bento cards */
.mosaic-icon-light {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Wide bento card — used for the pricing banner; inner div handles padding */
.bento-card-wide {
    padding: 0;
}

/* Accent-dark card — accent-color background, white text */
.bento-card-accent-dark {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.bento-card-accent-dark .bento-label { color: rgba(255,255,255,0.6); }
.bento-card-accent-dark .bento-title { color: white; }
.bento-card-accent-dark .bento-body-muted { color: rgba(255,255,255,0.75); }

/* Mini job preview card (used on dark bento cards) */
.mini-job-card {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 0.9rem 1rem;
}

.mini-job-title {
    font-weight: 700;
    color: white;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.mini-job-meta {
    color: rgba(255,255,255,0.7);
    font-size: 0.78rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Skeleton loader bars */
.bento-bar {
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    margin-top: 0.5rem;
}

.bento-bar-short {
    width: 70%;
    margin-top: 0.25rem;
}


/* Bootstrap utility overrides */
.bg-white { background-color: var(--main-bg) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.text-white { color: white !important; }
.text-success { color: #28a745 !important; }
.text-info { color: #17a2b8 !important; }

/* Radii overrides */
.rounded-4 { border-radius: 1rem !important; }
.rounded-5 { border-radius: 2rem !important; }

/* shadows */
.shadow { box-shadow: 0 1rem 3rem rgba(10, 37, 64, 0.1) !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(10, 37, 64, 0.05) !important; }


/* FEATURE LABELS */
.feature-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--muted-text);
    letter-spacing: 1.5px;
    display: block;
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em;
}

.brand-title {
    color: var(--primary-color);
    font-weight: 700;
}

.lead {
    font-size: 1.15rem;
    line-height: 1.6;
}

/* BRAND LINK — inline link style */
.brand-link {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.brand-link:hover {
    color: var(--primary-color);
}


/* FEATURE LISTS (About Page) */
.feature-title { color: var(--accent-color); font-weight: 700; }
.feature-list { list-style: none; padding-left: 0; }
.feature-list li { font-size: 1.05rem; padding: 0.8rem 0; color: var(--primary-color); font-weight: 500;}
.feature-list li::before { content: "•"; color: var(--accent-color); font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;}


/* BOOTSTRAP FORM OVERRIDES */
/* Selects are listed alongside inputs so a dropdown is the same height and
   carries the same corners as the text box beside it. Left out, they keep
   Bootstrap's own padding and 6px radius and sit visibly shorter. The extra
   right padding leaves room for the chevron Bootstrap draws as a background
   image, which the shared padding would otherwise sit under. */
.form-control,
.form-select {
    border: 1px solid var(--border-stroke);
    border-radius: var(--sharp-radius);
    padding: 0.8rem 1rem;
}

.form-select {
    padding-right: 2.5rem;
    background-position: right 1rem center;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent-color);
    box-shadow: none;
}


/* LANDING PAGE SECTIONS */
.member-section {
    background-color: var(--main-bg);
}


/* SIGNUP / AUTH PAGE LAYOUTS */
.signup-page-wrapper {
    padding: 4rem 0;
}

.login-max-width {
    max-width: 500px;
}

.signup-card, .system-note {
    background: var(--main-bg);
    border: 1px solid var(--border-stroke);
    border-radius: var(--sharp-radius);
    padding: 2rem;
}

.success-icon { color: #28a745; }
.text-danger { color: #dc3545 !important; }


/* LEGAL PAGES */
/* The privacy page's header, until that page moves onto the design system. */
.legal-header {
    background-color: var(--alt-bg);
    padding: 4rem 0;
}

.legal-title {
    color: var(--primary-color);
    font-weight: 700;
}

/* The four legal pages, listed beside each of them (_legal_links.html). */
.legal-sidebar {
    position: sticky;
    top: 6rem;
    padding: 1.5rem;
    background: var(--st-offwhite);
    border-radius: 4px;
}

.legal-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-links li {
    padding: 0.35rem 0;
    font-size: 0.9375rem;
}

.legal-links a {
    color: var(--st-ink-muted);
    text-decoration: none;
}

.legal-links a:hover,
.legal-links a:focus-visible {
    color: var(--st-wine);
    text-decoration: underline;
}

.legal-body {
    line-height: 1.8;
    color: var(--main-text);
}

.legal-body h2,
.legal-body h3 {
    color: var(--primary-color);
    font-weight: 500;
}

.legal-body h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.5rem;
}

.legal-body h3 {
    margin: 2rem 0 0.75rem;
    font-size: 1.2rem;
}

.legal-body > h2:first-child {
    margin-top: 0;
}

/* Tables of cookies and sub-processors scroll sideways on a phone rather than the page. */
.legal-table-wrap {
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.legal-table th,
.legal-table td {
    padding: 0.75rem;
    border: 1px solid var(--border-stroke);
    text-align: left;
    vertical-align: top;
}

.legal-table thead th {
    background: var(--st-offwhite);
    color: var(--primary-color);
    font-family: var(--st-display);
    font-weight: 500;
}


/* FAQ PAGE */
.faq-section-heading {
    color: var(--primary-color);
}


/* SITE FOOTER */
.site-footer {
    background-color: var(--alt-bg);
    padding: 4rem 0 2rem;
}

.footer-heading {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.footer-link {
    color: var(--muted-text);
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    overflow-wrap: anywhere;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--accent-color);
}

.footer-email {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    display: block;
    /* The address carries a <wbr> after the @ so it breaks there first. This is
       the backstop for a column narrower still: only 'anywhere' reduces the
       element's min-content width, which is what forces the column open and
       scrolls the page sideways. */
    overflow-wrap: anywhere;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.footer-email:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-tagline {
    font-size: 0.875rem;
    color: var(--muted-text);
}

.footer-copy {
    font-size: 0.85rem;
    color: var(--muted-text);
    margin-bottom: 0;
}


/* TEMPLATE SELECT PAGE */
/* Column flex so .template-card-body can absorb the spare height a shorter
   card gains from its taller row siblings, and push its CTAs to the bottom.
   Without it the two buttons sit at a different height in every card as soon
   as one description wraps. */
.template-card-new {
    border: 1px solid var(--border-stroke);
    border-radius: 12px;
    overflow: hidden;
    background: white;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

/* Every design pops the same way wherever it appears on the marketing pages. */
.template-card-new:hover {
    box-shadow: 0 16px 36px rgba(10, 37, 64, 0.2);
    transform: scale(1.03);
}

/* Square, to match the 900x900 preview_*.webp design pictures exactly.
   A square image in a square box means object-fit: cover crops nothing —
   the whole screenshot shows at every breakpoint, just scaled down. That
   matters most on mobile, where the card is the full viewport width and a
   hero-only crop reads as a colour field rather than a website.
   cover/top are kept as the safe failure mode if a non-square image is
   ever dropped in; marketing/tests/test_design_preview_images.py guards
   the squareness so that fallback should never be needed. */
.template-thumb-wrap {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;          /* never squash the picture to fit a flex card */
    aspect-ratio: 1 / 1;
    background: var(--alt-bg);
    display: block;
}

.template-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: filter 0.2s ease;
    background: var(--alt-bg);
}

.template-thumb-fade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* One second after the pointer arrives, the card's second picture fades in. */
@media (hover: hover) {
    .template-card-new:hover .template-thumb-fade {
        opacity: 1;
        transition: opacity 0.8s ease 1s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .template-card-new:hover .template-thumb-fade { transition: none; }
}

.template-thumb-wrap:hover .template-thumb {
    filter: brightness(1.05);
}

/* Hover preview (template-preview.js). The clip is the top 1440x900 of the
   demo at the same scale as the square picture, so it lies exactly over the top
   62.5% of it (16:10 of a square's width) and the rest of the picture stays.
   Pointer events pass through to the card's link. */
.template-media {
    position: relative;
}

.template-clip {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    pointer-events: none;
}

.template-clip[hidden] {
    display: none;
}

.template-clip-play {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50rem;
    background: rgba(10, 37, 64, 0.88);
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', Outfit, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.template-clip-play:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* A pointer can hover, so the button appears on hover and focus; on a touch
   screen it is always there, since there is no hover to start a preview. */
@media (hover: hover) {
    .template-clip-play {
        opacity: 0;
        transition: opacity 0.15s ease;
    }

    .template-media:hover .template-clip-play,
    .template-media:focus-within .template-clip-play {
        opacity: 1;
    }
}

/* While the clip plays the button steps aside; it keeps its place, and focus,
   so a keyboard visitor is not moved. It comes after the hover and focus rules
   above and is more specific than they are, so they cannot bring it back. */
.template-media .template-clip-play.is-playing {
    opacity: 0;
    pointer-events: none;
}

/* Filter buttons (template-filter.js). Hidden until the script has wired
   them, so without JavaScript every card shows and nothing looks broken. */
.template-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.template-filters[hidden],
.template-filter-status[hidden] {
    display: none;
}

.template-filter {
    min-height: 44px;
    padding: 0.4rem 1rem;
    border: 1px solid var(--border-stroke);
    border-radius: 50rem;
    background: #ffffff;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.template-filter:hover {
    border-color: var(--primary-color);
}

.template-filter[aria-pressed="true"] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

.template-filter:focus-visible,
.template-name-link:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.template-filter-status {
    margin: 0 0 1.25rem;
    font-size: 0.9375rem;
    color: var(--st-ink-muted);
}

.template-item[hidden] {
    display: none;
}

/* Name, purpose and tags above the picture. */
.template-card-head {
    padding: 1.1rem 1.4rem 0.9rem;
}

.template-name-link {
    color: inherit;
    text-decoration: none;
}

.template-name-link:hover {
    text-decoration: underline;
}

.template-labels {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--muted-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.template-labels li {
    /* Set on the item itself: the section's default size for list items would otherwise win. */
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--border-stroke);
    border-radius: 50rem;
    background: var(--alt-bg);
}

.template-card-body {
    padding: 1rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* On the designs page the name, purpose and labels come first: the heading takes any
   spare height, so the pictures and buttons line up across each row. */
.template-list .template-card-head { flex: 1 0 auto; }
.template-list .template-card-body { flex: 0 0 auto; }

/* margin-top: auto pins the CTAs to the bottom of the card; padding-top keeps
   a minimum gap from the description when there is no spare height to absorb.
   Deliberately not Bootstrap's `mt-3 mt-auto` — those two set the same
   property and the winner would depend on utility source order. */
.template-card-actions {
    margin-top: auto;
    padding-top: 1rem;
}

.template-name {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 0.1rem;
}

/* Feature badges on intro section */
.badge-feature {
    display: inline-flex;
    align-items: center;
    background: white;
    border: 1px solid var(--border-stroke);
    border-radius: 50rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary-color);
}

.badge-single-page {
    display: inline-block;
    background: var(--alt-bg);
    border: 1px solid var(--border-stroke);
    border-radius: 50rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--muted-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.text-brand { color: var(--primary-color); }

.intro-sub { max-width: 520px; }

/* FEATURES SECTION — feature cards on brick background */

.features-section {
    position: relative;
}

/* Subtle overlay so text reads cleanly against the brick texture */
.features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.features-section .container {
    position: relative;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.feature-card-span-2 { grid-column: span 2; }

/* Base feature card */
.feature-card {
    border-radius: 12px;
    padding: 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 280px;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(10, 37, 64, 0.15);
}

/* Dark variant — matches bento-card-dark */
.feature-card-dark {
    background: var(--primary-color);
    color: white;
}

/* Light variant — matches bento-card-accent */
.feature-card-light {
    background: white;
    border: 1px solid var(--border-stroke);
}

.feature-card-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.feature-card-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.25rem;
    line-height: 1;
}

.feature-card-icon-accent {
    color: var(--primary-color);
}

.feature-card-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.1rem;
}

.feature-card-light .feature-card-label {
    color: var(--muted-text);
}

.feature-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: white;
    margin-bottom: 0;
    letter-spacing: -0.02em;
}

.feature-card-title-dark {
    color: var(--primary-color);
}

.feature-card-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.feature-card-body-dark {
    color: var(--secondary-color);
}

/* Decorative rule at bottom of dark cards */
.feature-card-rule {
    height: 3px;
    width: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    margin-top: 1.5rem;
}

/* HOW IT WORKS STEPS */

.how-it-works-step { padding: 2rem; height: 100%; }
.step-number-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; background: var(--primary-color);
    color: white; border-radius: 50%; font-weight: 700; margin-bottom: 1rem;
}


/* RESPONSIVE DESIGN (Media Queries) */

@media (max-width: 991px) {
    .hero-bento { padding: 3rem 0; min-height: auto; }
    
    /* Stack bento cards in 2 columns on tablets */
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Reset row span so cards don't overlap strangely */
    .bento-span-2-row { grid-row: span 1; }
    .bento-span-3-col { grid-column: span 2; }
}

@media (max-width: 575px) {
    /* Stack cards in a single column on mobile */
    .bento-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    
    /* Reset all spans */
    .bento-span-2-col { grid-column: span 1; }
    .bento-span-2-row { grid-row: span 1; }
    .bento-span-3-col { grid-column: span 1; }
    .feature-card-span-2 { grid-column: span 1; }
    
    .feature-card { min-height: auto; }
}


/* SCROLL REVEAL — JS-driven (scroll-reveal-marketing.js adds .is-visible)
 * .fade-up starts hidden and translated; .fade-up.is-visible transitions to visible.
 * Stagger delay is set via data-reveal-delay attribute (read by the JS).
 * prefers-reduced-motion is handled in the JS — no transition fires at all. */

.fade-up {
    opacity: 0;
    transform: translateY(24px) scale(0.99);
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Honeypot field — hidden from real users, bots auto-fill it.
   position:absolute + left:-9999px moves it off-screen without
   display:none, which some bots detect and skip. */
.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.last-used-badge {
    font-size: 0.65rem;
}

.template-preview-iframe {
    border: 0;
    height: 100%;
    width: 100%;
}

/* Bootstrap sizes a .row's negative side margins from --bs-gutter-x, and .g-5
   raises it to 3rem, so the row pulls 24px wider than its column box on each
   side while the .container's own 1.5rem gives only 12px of padding to absorb
   it. Below 576px the container is full-bleed with no slack and the page
   scrolls sideways by 12px. These columns stack at this width, so the
   horizontal gutter is unused; .g-5's vertical gutter is untouched. The tenant
   and Aldenvere stylesheets carry the same rule for their own scopes. */
@media (max-width: 575.98px) {
    .container > .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* Plan choice on the signup, Google setup and wizard account forms */
.signup-plan-choice { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.signup-plan-legend { margin-bottom: 0.5rem; font-family: var(--st-display); font-size: 0.9375rem; font-weight: 500; color: var(--primary-color); }
.signup-plan-option {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 1rem; margin-bottom: 0.5rem;
    border: 1px solid rgba(10, 37, 64, 0.2); border-radius: 4px; background: #fff;
}
.signup-plan-option:has(input:checked) { border-color: var(--st-wine); box-shadow: inset 0 0 0 1px var(--st-wine); }
.signup-plan-option label { display: flex; flex-direction: column; cursor: pointer; }
.signup-plan-name { font-family: var(--st-display); font-weight: 500; color: var(--primary-color); }
.signup-plan-summary, .signup-plan-price, .signup-plan-pages { font-size: 0.9375rem; color: var(--st-ink-muted); }

/* BESPOKE PAGE */
.bespoke-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
}

.bespoke-showcase img {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-stroke);
    border-radius: var(--sharp-radius);
}

.bespoke-showcase a:hover img {
    box-shadow: 0 16px 36px rgba(10, 37, 64, 0.2);
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .template-card-new,
    .bespoke-showcase img { transition: none; }
}

/* Contact page: the photograph above the contact details, in a landscape frame. */
.contact-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* Clears the sticky navigation when the page jumps to the form. */
#send-a-message { scroll-margin-top: 5rem; }

/* Clears the sticky navigation when the page jumps to the form. */
.bespoke-chat { scroll-margin-top: 5rem; }

@media (max-width: 767px) {
    .bespoke-showcase { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DESIGN SYSTEM
   The classes every marketing page is built from, all prefixed `st-`. Pages
   style their content with these and use Bootstrap for layout only (see
   CLAUDE.md, Frontend implementation). Headings, labels and buttons use Plus
   Jakarta Sans at medium weight and body text is Outfit, both self-hosted in
   cms/css/fonts.css. One text scale: hero introductions 21px, all other
   section text 18px, small print 15px.
   ========================================================================== */

/* Section backgrounds */
.st-section { padding: var(--st-section) 0; }
.st-plaster { background-color: #f3ede3; background-blend-mode: multiply; background-image: url("../images/plaster-texture.bd1f70be4d15.webp"); background-size: cover; background-position: center; }
.st-brick { background-color: #f4f1ea; background-image: url("../images/brick-texture.c650f29f71c8.webp"); background-size: cover; background-position: center; }
.st-white { background-color: #fffcf8; }
.st-offwhite { background-color: var(--st-offwhite); }
.st-navy { background-color: var(--primary-color); color: var(--st-offwhite); }
.st-wine-band { background-color: var(--st-wine); color: var(--st-offwhite); }

/* Type: labels, headings, introductions and notes.
   Section text defaults to 18px; :where() keeps this rule weaker than any class below. */
:where(.st-section) p, :where(.st-section) li { font-size: 1.125rem; line-height: 1.65; }

.st-label { font-family: var(--st-display); font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--st-wine); font-weight: 500; margin: 0 0 0.75rem; }
.st-navy .st-label, .st-wine-band .st-label { color: var(--st-offwhite); }

.st-h1, .st-h2, .st-h3 { font-family: var(--st-display); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; color: var(--primary-color); margin: 0; }
.st-h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.st-h2 { font-size: clamp(1.875rem, 4vw, 3.125rem); }
.st-h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.st-navy .st-h1, .st-navy .st-h2, .st-wine-band .st-h2 { color: var(--st-offwhite); }

.st-lede { font-size: 1.125rem; line-height: 1.65; color: var(--st-ink-muted); max-width: 36em; margin: 0; }
.st-hero .st-lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.6; }
.st-lede + .st-lede { margin-top: 1.25rem; }
.st-navy .st-lede, .st-wine-band .st-lede { color: var(--st-offwhite); }

/* Smaller supporting text: notes under a section, card descriptions. */
.st-note, .st-prose .st-note { font-size: 0.9375rem; line-height: 1.6; color: var(--st-ink-muted); max-width: 40rem; }
.st-navy .st-note, .st-wine-band .st-note { color: var(--st-offwhite); }

/* A plain list: no bullets, no numbers and no lines between items. */
.st-list { margin: 0; padding: 0; list-style: none; }
.st-list li { font-size: 1.125rem; line-height: 1.65; }
.st-list li + li { margin-top: 0.6rem; }
.st-navy strong, .st-wine-band strong { color: var(--st-offwhite); }

/* Buttons and links */
.st-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 0 1.75rem; background: var(--st-wine); color: #fff; text-decoration: none; font-family: var(--st-display); font-weight: 500; border-radius: var(--sharp-radius); border: 0; transition: background-color 0.2s ease, transform 0.2s ease; }
.st-btn:hover, .st-btn:focus-visible { background: var(--st-wine-hover); color: #fff; transform: translateY(-1px); }
/* A button waiting on something (a form's security check) shows but cannot be pressed. */
.st-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.st-btn:disabled:hover { background: var(--st-wine); }
.st-btn-sm { min-height: 40px; padding: 0 1rem; font-size: 0.875rem; }
.st-btn-light { background: var(--st-offwhite); color: var(--st-wine); }
.st-btn-light:hover, .st-btn-light:focus-visible { background: #f3ede3; color: var(--st-wine); }
/* The second choice beside a wine button, on a light background */
.st-btn-outline { background: transparent; color: var(--st-wine); box-shadow: inset 0 0 0 2px var(--st-wine); }
.st-btn-outline:hover, .st-btn-outline:focus-visible { background: var(--st-wine); color: #fff; }
.st-link { color: var(--primary-color); font-weight: 600; text-underline-offset: 4px; }
.st-navy .st-link, .st-wine-band .st-link { color: var(--st-offwhite); }

.st-section a:focus-visible, .st-btn:focus-visible { outline: 3px solid var(--st-wine); outline-offset: 3px; }
.st-navy a:focus-visible, .st-wine-band a:focus-visible { outline-color: var(--st-offwhite); }

/* Hero, on painted brick: text alone, or text beside pictures (st-hero-split) */
.st-hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem); }
.st-hero-copy { max-width: 56rem; }
.st-hero .st-h1 { margin-bottom: 1.5rem; }
.st-hero-split .st-h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.st-close .st-actions .st-btn { margin-top: 0; }
.st-navy.st-close .st-link { color: var(--st-offwhite); }

/* Points and prose */
.st-points { display: grid; gap: 3rem; }
.st-points p, .st-points .st-h3 { margin: 0; }
.st-points .st-h3 { margin-bottom: 0.75rem; }
.st-points p { font-size: 1.125rem; line-height: 1.65; color: var(--st-ink-muted); }
.st-navy .st-points p, .st-navy .st-h3 { color: var(--st-offwhite); }
@media (min-width: 800px) { .st-points { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; } }

.st-two { display: grid; gap: 2rem; }
/* Columns may shrink below their longest word, and a long web address breaks rather than widening the page. */
.st-two > * { min-width: 0; }
.st-block .st-h3, .st-block p { overflow-wrap: anywhere; }
@media (min-width: 960px) { .st-two { grid-template-columns: 5fr 6fr; gap: 4.5rem; align-items: start; } }
.st-prose p { margin: 0; font-size: 1.125rem; line-height: 1.65; }
.st-prose p + p { margin-top: 1.25rem; }
/* The steps of "How it works" share the introduction's size and colour, with the key words in wine. */
.st-how p { font-size: 1.125rem; line-height: 1.65; color: var(--st-ink-muted); max-width: 36em; margin: 0; }
.st-how p + p { margin-top: 1.25rem; }
.st-how strong { color: var(--st-wine); font-weight: 600; }
.st-wine-band .st-how p { color: var(--st-offwhite); }
.st-wine-band .st-how strong { color: var(--st-offwhite); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Closing sections and buttons set apart from the text above them */
.st-wine-band .st-btn { margin-top: 2rem; }
.st-band-btn { margin-top: 2rem; }
.st-close .st-h2 { max-width: 14em; }
.st-close p { font-size: 1.125rem; line-height: 1.65; color: var(--st-ink-muted); margin: 1rem 0 0; max-width: 32em; }
.st-navy.st-close p { color: var(--st-offwhite); }
.st-close .st-btn { margin-top: 2rem; }

/* Text blocks: a small heading over its paragraph, stacked in the right-hand column of
   a two-column section (questions, working together). */
.bespoke-showcase-intro { margin-bottom: 2.5rem; }
.st-block + .st-block { margin-top: 2rem; }
.st-block .st-h3 { margin-bottom: 0.5rem; }
.st-block p { font-size: 1.125rem; line-height: 1.65; color: var(--st-ink-muted); margin: 0; max-width: 40rem; }
.st-block p + p { margin-top: 1rem; }

/* Designs strip: slow drift, with a visible pause control */
.st-reel { overflow: hidden; margin-top: 2.5rem; }
.st-reel-track { display: flex; gap: 1.5rem; width: max-content; margin: 0; padding: 0; list-style: none; animation: st-drift 60s linear infinite; }
.st-reel.is-paused .st-reel-track, .st-reel:hover .st-reel-track, .st-reel:focus-within .st-reel-track { animation-play-state: paused; }
.st-reel-item { width: 220px; flex: none; }
.st-reel-item a { display: block; color: inherit; text-decoration: none; }
.st-reel-item img { display: block; width: 100%; height: auto; border: 1px solid var(--border-stroke); border-radius: 4px; transition: transform 0.3s ease; }
.st-reel-item a:hover img, .st-reel-item a:focus-visible img { transform: translateY(-6px); }
.st-reel-controls { display: flex; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.st-pause { min-height: 44px; padding: 0 1rem; background: transparent; border: 0; box-shadow: inset 0 0 0 2px var(--st-wine); border-radius: var(--sharp-radius); color: var(--st-wine); font-family: var(--st-display); font-weight: 500; }
.st-pause:hover, .st-pause:focus-visible { background: var(--st-wine); color: #fff; }
@keyframes st-drift { to { transform: translateX(calc(-50% - 0.75rem)); } }

/* The cookie banner is shared with tenant sites, where its button takes the tenant's
   brand colour. On the marketing site it takes the wine accent and the navy link. */
.site-body #pp-cookie-banner { --brand-primary: var(--st-wine); --brand-hero-text: #fff; }
.site-body .pp-cookie-link, .site-body .pp-cookie-link:hover { color: var(--primary-color); }

/* Cards: a light panel on a textured or coloured background (plans, contact details, forms). */
.st-card { padding: 2rem; background: #fffcf8; border: 1px solid rgba(10, 37, 64, 0.1); border-radius: 4px; box-shadow: 0 8px 24px rgba(10, 37, 64, 0.08); }

/* Form fields on the marketing site's own tools. */
.st-field-label { display: block; margin-bottom: 0.4rem; font-family: var(--st-display); font-weight: 500; font-size: 0.9375rem; color: var(--primary-color); }
.st-field-optional { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; color: var(--st-ink-muted); }
.st-field { display: block; width: 100%; min-height: 48px; padding: 0.65rem 0.9rem; font: inherit; font-size: 1.125rem; color: var(--main-text); background: #fff; border: 1px solid rgba(10, 37, 64, 0.25); border-radius: 4px; }
.st-field::placeholder { color: var(--st-ink-muted); opacity: 0.75; }
.st-field:focus { outline: 3px solid var(--st-wine); outline-offset: 1px; border-color: var(--st-wine); }

/* Account pages (log in, password reset, sign up): one card on the plaster. */
.st-account-card { max-width: 32rem; margin-inline: auto; }
.st-account-title { margin: 0 0 0.75rem; }
.st-account-icon { display: block; margin-bottom: 1rem; font-size: 2.5rem; line-height: 1; color: var(--primary-color); }
.st-account-icon-problem { color: var(--st-wine); }
.st-account-or { margin: 1.25rem 0; text-align: center; font-size: 0.9375rem; color: var(--st-ink-muted); }
.st-account-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(10, 37, 64, 0.1); }
.st-btn-block { display: flex; width: 100%; gap: 0.6rem; }
.st-btn-google svg { flex: none; }
.st-tag { display: inline-block; margin-left: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 50rem; background: var(--st-offwhite); color: var(--st-ink-muted); font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.8125rem; font-weight: 400; }

/* Form rows drawn by _fields.html. */
.st-form-row { margin-bottom: 1.25rem; }
.st-field[aria-invalid="true"] { border-color: var(--st-wine); }
.st-field-error, .st-field-error p { margin-top: 0.4rem; font-size: 0.9375rem; color: var(--st-wine); }
.st-check { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; }
.st-check-input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--st-wine); }
.st-check-label { font-size: 0.9375rem; line-height: 1.5; color: var(--main-text); cursor: pointer; }

/* A password field with its Show / Hide button joined on (tenant_signup.js). */
.st-field-group { display: flex; }
.st-field-group .st-field { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.st-field-toggle { flex: none; padding: 0 1rem; border: 1px solid rgba(10, 37, 64, 0.25); border-left: 0; border-radius: 0 4px 4px 0; background: var(--st-offwhite); color: var(--primary-color); font-family: var(--st-display); font-weight: 500; }
.st-field-toggle:hover { background: #ebe5db; }
.st-field-toggle:focus-visible { outline: 3px solid var(--st-wine); outline-offset: 1px; }

/* Password strength (tenant_signup.js sets data-strength and is-met). */
.st-strength { margin: -0.25rem 0 1.25rem; }
.st-strength-head { display: flex; justify-content: space-between; margin: 0 0 0.4rem; font-size: 0.9375rem; color: var(--st-ink-muted); }
.st-strength-track { height: 6px; overflow: hidden; border-radius: 3px; background: var(--st-offwhite); }
.st-strength-bar { width: 0; height: 100%; background: var(--st-ink-muted); transition: width 0.2s ease; }
.st-strength-bar[data-strength="weak"] { background: var(--st-wine); }
.st-strength-bar[data-strength="fair"] { background: #b7791f; }
.st-strength-bar[data-strength="good"] { background: var(--primary-color); }
.st-strength-bar[data-strength="strong"] { background: #2f6f4e; }
#password-strength-label[data-strength="weak"] { color: var(--st-wine); }
#password-strength-label[data-strength="strong"] { color: #2f6f4e; }
.st-strength-list { margin: 0.6rem 0 0; padding-left: 1.25rem; font-size: 0.9375rem; color: var(--st-ink-muted); }
.st-strength-list li { font-size: 0.9375rem; }
.st-strength-list li.is-met { color: #2f6f4e; }

/* Waiting: the security check, and setting up a new site. */
.st-turnstile-wait { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1rem; }
.st-turnstile-wait .st-note { margin: 0; }
.st-spinner { display: inline-block; flex: none; width: 1rem; height: 1rem; border: 2px solid rgba(10, 37, 64, 0.2); border-top-color: var(--st-wine); border-radius: 50%; animation: st-spin 0.7s linear infinite; }
.st-spinner-light { border-color: rgba(255, 255, 255, 0.4); border-top-color: #fff; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-progress { height: 8px; overflow: hidden; border-radius: 4px; background: var(--st-offwhite); }
.st-progress-bar { width: 0; height: 100%; background: var(--st-wine); transition: width 0.4s ease; }

/* Three steps side by side, each a picture and a short title. A phone sits in a box the
   shape of the other pictures, so the titles line up. */
.st-journey { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.st-journey-pic { display: block; width: 100%; height: auto; border: 1px solid var(--border-stroke); border-radius: 10px; background: var(--main-bg); }
.st-journey-title { margin: 1.25rem 0 0.5rem; }
.st-journey-phone { display: flex; justify-content: center; aspect-ratio: 4 / 3; }
.st-journey-phone .st-phone { height: 100%; }
.st-journey-phone .st-phone img { width: auto; height: 100%; }
@media (max-width: 767px) { .st-journey { grid-template-columns: 1fr; } }

/* Short points, each in a soft tile of its own. */
.st-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.st-tile { display: flex; align-items: center; min-height: 5.5rem; padding: 1.25rem 1.5rem; background: var(--st-offwhite); border-radius: 4px; color: var(--primary-color); line-height: 1.45; }

/* The home hero: the headline alone, large, with room around it. */
.st-hero-big { padding: clamp(5rem, 11vw, 9.5rem) 0 clamp(5rem, 12vw, 10rem); }
.st-hero-big .st-h1 { max-width: 12.5em; margin-bottom: 2rem; font-size: clamp(2.75rem, 6.5vw, 5.75rem); line-height: 1.04; letter-spacing: -0.03em; }
.st-hero-big .st-lede { max-width: 38rem; }

/* Words and a picture side by side, centred against each other. The words come first,
   so a phone reads them before the picture; st-pair-flip puts the picture first on a
   wide screen, and st-pair-wide gives a picture that needs reading the larger share. */
.st-pair { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 992px) {
    .st-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; }
    .st-pair-flip > :last-child { order: -1; }
    .st-pair-wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; }
}

/* The audit report as a narrow page whose foot fades out, as if it carries on. */
.st-report { max-width: 27.5rem; margin-inline: auto; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }

/* A screenshot that runs off the edge of the page: it shows enough to read without
   crowding the words. --st-edge is the distance from the container to the window edge,
   so the frame reaches it at every width; the picture keeps its own size and is cut
   where the frame ends. The section clips anything past the window. */
:root { --st-edge: 0px; }
.st-bleed { overflow-x: clip; }
@media (min-width: 992px) {
    :root { --st-edge: calc((100vw - 960px) / 2 + 12px); }
    .st-bleed-right, .st-bleed-left { width: calc(100% + var(--st-edge)); }
    .st-bleed-left { margin-left: calc(-1 * var(--st-edge)); }
    .st-bleed-right img, .st-bleed-left img { width: max(52rem, 100%); max-width: none; }
    .st-bleed-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .st-bleed-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}
@media (min-width: 1200px) { :root { --st-edge: calc((100vw - 1140px) / 2 + 12px); } }
@media (min-width: 1400px) { :root { --st-edge: calc((100vw - 1320px) / 2 + 12px); } }

/* Points as cards on a dark band, each led by a piece of the product. */
.st-point-cards { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .st-point-cards { grid-template-columns: repeat(3, 1fr); } }
.st-point-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.st-point-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; background: #fff; }
.st-point-card-body { padding: 1.5rem; }
.st-point-card .st-h3 { margin: 0 0 0.75rem; color: var(--st-offwhite); }
.st-point-card p { margin: 0; font-size: 1.125rem; line-height: 1.65; color: var(--st-offwhite); }

/* Short steps as cards that lift a little under the pointer. No numbers: the list keeps
   their order for anyone reading it out. */
.st-step-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.st-step-card { display: flex; align-items: center; min-height: 7.5rem; padding: 1.5rem; border-radius: 6px; background: var(--st-offwhite); color: var(--primary-color); font-size: 1.125rem; line-height: 1.45; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.st-step-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(10, 37, 64, 0.12); }
.st-recording-wide { max-width: 60rem; margin-inline: auto; }

/* Silent screen recordings, framed like the screenshots, with a button to pause them. */
.st-recording video { display: block; width: 100%; height: auto; }

/* Pictures. Frames are drawn in CSS so the screenshots stay plain images. */
.st-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.st-browser { padding-top: 1.1rem; overflow: hidden; background: var(--primary-color); border-radius: 10px; box-shadow: 0 12px 32px rgba(10, 37, 64, 0.15); }
.st-browser img { display: block; width: 100%; height: auto; }
.st-phone { overflow: hidden; border: 6px solid #1d2733; border-radius: 22px; background: #1d2733; box-shadow: 0 18px 36px rgba(10, 37, 64, 0.3); }
.st-phone img { display: block; width: 100%; height: auto; }

/* Plan cards, shared by the pricing and builder pages. */
.st-plan-price { margin: 0 0 1.25rem; font-family: var(--st-display); font-weight: 500; font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--primary-color); }
.st-plan-period { margin-left: 0.25rem; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1rem; letter-spacing: 0; color: var(--st-ink-muted); }
.st-plan-features { margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--st-ink-muted); }
.st-plan-features li { padding: 0.3rem 0; font-size: 0.9375rem; line-height: 1.5; }

/* Messages from the server (a saved form, an expired link). The box keeps Bootstrap's
   `alert` class only so its close button can dismiss it. */
.st-message { position: relative; display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1rem; padding: 1rem 3.25rem 1rem 1.25rem; background: #fffcf8; color: var(--main-text); border: 0; border-left: 4px solid var(--primary-color); border-radius: var(--sharp-radius); box-shadow: 0 1px 8px rgba(10, 37, 64, 0.06); }
.st-message-error, .st-message-warning { border-left-color: var(--st-wine); }
.st-message-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--primary-color); border-radius: var(--sharp-radius); }
.st-message-close:hover, .st-message-close:focus-visible { background: var(--st-offwhite); }
.st-message-close:focus-visible { outline: 3px solid var(--st-wine); outline-offset: 2px; }
.modal-header .st-message-close { position: static; flex-shrink: 0; margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
    /* Nothing drifts, so the strip is scrolled by hand: the outer frame scrolls, and the
       second pass that only exists for the loop is dropped. */
    .st-reel { overflow-x: auto; }
    .st-reel-track { animation: none; }
    .st-reel-item[aria-hidden="true"] { display: none; }
    .st-btn, .st-reel-item img { transition: none; }
    .st-spinner { animation-duration: 2s; }
    .st-step-card { transition: none; }
    .st-step-card:hover { transform: none; }
    .st-strength-bar, .st-progress-bar { transition: none; }
    .st-pause { display: none; }
    /* A recording waits for its button instead of playing, so the button stays. */
    .st-recording .st-pause { display: inline-flex; align-items: center; }
}