/* Saundy Inspect marketing site. The marketing palette intentionally diverges
   from the product portals' app.css tokens — do not sync these with the apps. */
:root {
    --saundy-blue: #1E85FF;
    --saundy-blue-dark: #1668cc;
    --saundy-ink: #1F2A33;
    --saundy-grey: #9BA8B4;
    --saundy-line: #E7ECF1;
    --saundy-bg: #F6F8FA;
    --saundy-muted: #6B7885;
    --saundy-muted-tint: #5B6875; /* muted text on tinted backgrounds: 5.4:1 on --saundy-bg, where --saundy-muted is only 4.24:1 */
    --saundy-code-bg: #141C2F;

    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-body);
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

    --bs-primary: var(--saundy-blue);
    --bs-body-font-family: var(--font-body);
    --bs-font-monospace: var(--font-mono);
    --bs-secondary-color: var(--saundy-muted);
}

body {
    background: #fff;
    color: var(--saundy-ink);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.pricing-price {
    font-family: var(--font-display);
}

h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -0.5px;
}

::selection {
    background: rgba(30, 133, 255, 0.25);
}

h1:focus {
    outline: none;
}

.accent,
.brand-accent {
    color: var(--saundy-blue);
}

.btn {
    border-radius: 11px;
    font-weight: 600;
    padding: 0.62rem 1.35rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-sm {
    border-radius: 10px;
    padding: 0.45rem 1rem;
}

.btn-primary {
    --bs-btn-bg: var(--saundy-blue);
    --bs-btn-border-color: var(--saundy-blue);
    --bs-btn-hover-bg: var(--saundy-blue-dark);
    --bs-btn-hover-border-color: var(--saundy-blue-dark);
    --bs-btn-active-bg: #135ab3;
    --bs-btn-active-border-color: #135ab3;
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(30, 133, 255, 0.35);
    transform: translateY(-1px);
}

/* Secondary button on light backgrounds. */
.btn-ghost {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--saundy-line);
    --bs-btn-color: var(--saundy-ink);
    --bs-btn-hover-bg: var(--saundy-bg);
    --bs-btn-hover-border-color: var(--saundy-grey);
    --bs-btn-hover-color: var(--saundy-ink);
    --bs-btn-active-bg: var(--saundy-bg);
    --bs-btn-active-border-color: var(--saundy-grey);
    --bs-btn-active-color: var(--saundy-ink);
}

.btn-ghost:hover {
    transform: translateY(-1px);
}

/* Secondary button on the dark CTA band. */
.btn-white {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--saundy-ink);
    --bs-btn-hover-bg: #eef2f6;
    --bs-btn-hover-border-color: #eef2f6;
    --bs-btn-hover-color: var(--saundy-ink);
    --bs-btn-active-bg: #e2e8ee;
    --bs-btn-active-border-color: #e2e8ee;
    --bs-btn-active-color: var(--saundy-ink);
}

.btn-white:hover {
    transform: translateY(-1px);
}

/* ---------- Scroll reveal ----------
   Elements are only hidden once marketing.js adds .reveal-ready to <body>,
   so everything stays visible without JS (and under prefers-reduced-motion,
   where the script bails out early). */
body.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out-soft), transform 0.6s var(--ease-out-soft);
}

body.reveal-ready [data-reveal].in {
    opacity: 1;
    transform: none;
}

body.reveal-ready [data-reveal-delay="1"] { transition-delay: 0.1s; }
body.reveal-ready [data-reveal-delay="2"] { transition-delay: 0.2s; }
body.reveal-ready [data-reveal-delay="3"] { transition-delay: 0.3s; }

/* ---------- Navbar ---------- */
.site-navbar {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--saundy-line);
    min-height: 70px;
}

.site-navbar .navbar-brand {
    color: var(--saundy-ink);
    letter-spacing: -0.4px;
}

.site-navbar .navbar-brand img {
    transition: transform 0.25s var(--ease-out-soft);
}

.site-navbar .navbar-brand:hover img {
    transform: rotate(-8deg) scale(1.08);
}

.site-navbar .navbar-nav .nav-link {
    color: var(--saundy-muted);
    font-weight: 500;
    position: relative;
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link:focus-visible {
    color: var(--saundy-ink);
}

.site-navbar .navbar-nav .nav-link::after {
    background: var(--saundy-blue);
    border-radius: 2px;
    bottom: 2px;
    content: "";
    height: 2px;
    left: 0.5rem;
    position: absolute;
    right: 0.5rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease-out-soft);
}

.site-navbar .navbar-nav .nav-link:hover::after,
.site-navbar .navbar-nav .nav-link:focus-visible::after {
    transform: scaleX(1);
}

/* Translucent blur behind the expanded burger menu is illegible — go solid. */
@media (max-width: 991.98px) {
    .site-navbar {
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Phones: the brand, the trial button and the burger share one row down to
   340px (the button also drops to px-2 and a shorter label in MainLayout). */
@media (max-width: 575.98px) {
    .site-navbar .navbar-toggler {
        padding: 0.25rem 0.5rem;
    }
}

/* ---------- Hero ---------- */
.hero {
    background: radial-gradient(circle at 75% -20%, rgba(30, 133, 255, 0.07), transparent 55%), #fff;
    overflow: hidden;
    padding: 88px 0;
    position: relative;
}

.hero .container {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.25rem);
    letter-spacing: -1.5px;
    line-height: 1.08;
}

.hero .lead {
    color: var(--saundy-muted);
    max-width: 640px;
}

.hero-eyebrow {
    align-items: center;
    background: rgba(30, 133, 255, 0.08);
    border-radius: 999px;
    color: var(--saundy-blue-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    padding: 6px 14px;
}

.hero-eyebrow::before {
    background: var(--saundy-blue);
    border-radius: 50%;
    content: "";
    height: 7px;
    width: 7px;
}

.hero-note {
    color: var(--saundy-muted);
    font-size: 13.5px;
}

.hero-note .bi {
    color: var(--saundy-blue);
}

/* One-time entrance for hero content */
@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.hero-eyebrow { animation: rise-in 0.6s var(--ease-out-soft) both; }
.hero h1 { animation: rise-in 0.6s var(--ease-out-soft) 0.08s both; }
.hero .lead { animation: rise-in 0.6s var(--ease-out-soft) 0.16s both; }
.hero .hero-actions { animation: rise-in 0.6s var(--ease-out-soft) 0.24s both; }
.hero .hero-note { animation: rise-in 0.6s var(--ease-out-soft) 0.3s both; }

.hero-art {
    animation: rise-in 0.7s var(--ease-out-soft) 0.28s both;
}

@keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ---------- Hero preview card (inspection mock) ---------- */
.hero-preview {
    animation: hero-float 7s ease-in-out 1.2s infinite;
    background: #fff;
    border: 1px solid var(--saundy-line);
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(31, 42, 51, 0.10);
    margin-inline: auto;
    max-width: 480px;
    overflow: hidden;
}

.hero-preview .hp-head {
    align-items: center;
    border-bottom: 1px solid var(--saundy-line);
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
}

.hero-preview .hp-addr {
    font-size: 15px;
    font-weight: 600;
}

.hero-preview .hp-meta {
    color: var(--saundy-muted);
    font-size: 12.5px;
}

.hero-preview .hp-badge {
    background: rgba(30, 133, 255, 0.08);
    border-radius: 20px;
    color: var(--saundy-blue-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    white-space: nowrap;
}

.hero-preview .hp-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
}

.hero-preview .hp-defect {
    border: 1px solid var(--saundy-line);
    border-radius: 12px;
    padding: 12px 14px;
}

.hero-preview .hp-defect-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.hero-preview .hp-defect-title {
    font-size: 13.5px;
    font-weight: 600;
}

.hero-preview .hp-defect-desc {
    color: var(--saundy-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.sev-pill {
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
}

.sev-pill.sev-high {
    background: #FCEBEB;
    color: #A32D2D;
}

.sev-pill.sev-med {
    background: #FBEEDA;
    color: #875311;
}

.hero-preview .hp-foot {
    align-items: center;
    border-top: 1px solid var(--saundy-line);
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
}

.hero-preview .hp-rep {
    align-items: center;
    display: flex;
    font-size: 13.5px;
    font-weight: 600;
    gap: 9px;
}

.hero-preview .hp-rep-ico {
    align-items: center;
    background: rgba(30, 133, 255, 0.08);
    border-radius: 8px;
    color: var(--saundy-blue);
    display: inline-flex;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.hero-preview .hp-go {
    color: var(--saundy-blue);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Trust strip ---------- */
.trust-strip {
    background: var(--saundy-bg);
    border-bottom: 1px solid var(--saundy-line);
    border-top: 1px solid var(--saundy-line);
    padding: 30px 0;
}

/* ---------- Sections ---------- */
.section {
    padding: 72px 0;
}

/* Anchor targets (the /features tiles, #pricing and #how on Home) land below the sticky navbar. */
section[id],
.feature-section {
    scroll-margin-top: 86px;
}

.step-number {
    align-items: center;
    background: var(--saundy-ink);
    border-radius: 11px;
    color: white;
    display: inline-flex;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.check-accent {
    color: var(--saundy-blue);
}

.section-tint {
    background: var(--saundy-bg);
}

.section-heading {
    font-weight: 800;
    letter-spacing: -0.8px;
}

.section-sub {
    color: var(--saundy-muted);
    max-width: 640px;
}

/* Muted is only 4.24:1 on the tint; the darker token keeps sub-lines at AA there
   (tinted sections, the scale panel and the Features price panel on it). */
.section-tint .section-sub,
.scale-panel .section-sub {
    color: var(--saundy-muted-tint);
}

.section-head {
    max-width: 640px;
}

/* ---------- Cards ---------- */
.feature-card {
    border: 1px solid var(--saundy-line);
    border-radius: 16px;
    background: white;
    box-shadow: 0 1px 3px rgba(31, 42, 51, 0.05);
    height: 100%;
    padding: 28px;
    transition: transform 0.25s var(--ease-out-soft), box-shadow 0.25s var(--ease-out-soft),
        border-color 0.25s var(--ease-out-soft);
}

.feature-card:hover {
    border-color: rgba(30, 133, 255, 0.45);
    box-shadow: 0 14px 32px rgba(31, 42, 51, 0.10);
    transform: translateY(-4px);
}

.feature-icon {
    align-items: center;
    background: rgba(30, 133, 255, 0.08);
    border-radius: 12px;
    color: var(--saundy-blue);
    display: inline-flex;
    font-size: 22px;
    height: 46px;
    justify-content: center;
    margin-bottom: 16px;
    transition: transform 0.25s var(--ease-out-soft);
    width: 46px;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-4deg);
}

/* ---------- Scale panel ---------- */
.scale-panel {
    background: var(--saundy-bg);
    border: 1px solid var(--saundy-line);
    border-radius: 22px;
    padding: 52px;
}

.scale-row {
    align-items: center;
    background: #fff;
    border: 1px solid var(--saundy-line);
    border-radius: 12px;
    display: flex;
    gap: 14px;
    padding: 14px 16px;
}

.scale-row .scale-ico {
    align-items: center;
    background: rgba(30, 133, 255, 0.08);
    border-radius: 10px;
    color: var(--saundy-blue);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 18px;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.scale-row .scale-title {
    font-size: 14.5px;
    font-weight: 600;
}

.scale-row .scale-sub {
    color: var(--saundy-muted);
    font-size: 13px;
}

@media (max-width: 767.98px) {
    .scale-panel {
        padding: 32px 24px;
    }
}

/* ---------- Pricing ---------- */
.pricing-card {
    border: 1px solid var(--saundy-line);
    border-radius: 18px;
    background: white;
    box-shadow: 0 1px 3px rgba(31, 42, 51, 0.05);
    height: 100%;
    padding: 32px;
    transition: transform 0.25s var(--ease-out-soft), box-shadow 0.25s var(--ease-out-soft),
        border-color 0.25s var(--ease-out-soft);
}

.pricing-card:hover {
    box-shadow: 0 14px 32px rgba(31, 42, 51, 0.10);
    transform: translateY(-4px);
}

.pricing-card.highlighted {
    border: 2px solid var(--saundy-blue);
    box-shadow: 0 12px 32px rgba(30, 133, 255, 0.16);
}

.pricing-card.highlighted:hover {
    box-shadow: 0 16px 40px rgba(30, 133, 255, 0.24);
}

.pricing-price {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -1px;
}

.pricing-unit {
    color: var(--saundy-muted);
    font-size: 0.95rem;
    font-weight: 500;
}

.pricing-card ul li {
    padding: 6px 0;
}

.pricing-card ul li .bi-check-circle-fill {
    color: var(--saundy-blue);
}

/* ---------- CTA band ---------- */
@property --cta-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.cta-band {
    background: var(--saundy-ink);
    border-radius: 24px;
    color: white;
    overflow: hidden;
    padding: 56px 32px;
    position: relative;
}

.cta-band > .container,
.cta-band > :not(.cta-motif) {
    position: relative;
    z-index: 1;
}

/* Rotating gradient ring; browsers without @property show it static. */
.cta-band::before {
    animation: cta-spin 8s linear infinite;
    background: conic-gradient(from var(--cta-angle),
        rgba(30, 133, 255, 0.8), transparent 25%,
        transparent 75%, rgba(30, 133, 255, 0.8));
    border-radius: inherit;
    content: "";
    inset: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

@keyframes cta-spin {
    to { --cta-angle: 360deg; }
}

/* Faint brand motifs in the band corners. */
.cta-motif {
    opacity: 0.45;
    pointer-events: none;
    position: absolute;
    width: 300px;
}

.cta-motif.cta-motif-a {
    bottom: -60px;
    right: -40px;
}

.cta-motif.cta-motif-b {
    left: -50px;
    top: -70px;
    width: 230px;
}

.cta-sub {
    color: rgba(255, 255, 255, 0.65);
}

.cta-eyebrow {
    color: #8FC0FF;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ---------- Blog ---------- */
.blog-card {
    border: 1px solid var(--saundy-line);
    border-radius: 16px;
    background: white;
    box-shadow: 0 1px 3px rgba(31, 42, 51, 0.05);
    display: block;
    height: 100%;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s var(--ease-out-soft), box-shadow 0.25s var(--ease-out-soft),
        border-color 0.25s var(--ease-out-soft);
}

.blog-card:hover {
    border-color: rgba(30, 133, 255, 0.45);
    box-shadow: 0 14px 32px rgba(31, 42, 51, 0.10);
    color: inherit;
    transform: translateY(-4px);
}

.blog-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 400 / 220;
    object-fit: cover;
    border: 1px solid var(--saundy-line);
    border-radius: 12px;
    margin-bottom: 18px;
}

.blog-date {
    color: var(--saundy-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.blog-body {
    max-width: 760px;
}

.blog-body pre {
    background: var(--saundy-code-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #c9d1d9;
    padding: 20px;
    overflow-x: auto;
}

.blog-body pre code {
    font-family: var(--font-mono);
    font-size: 13.5px;
}

.blog-body img {
    max-width: 100%;
}

/* Markdown pipe tables (price ladders and the like). */
.blog-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0 20px;
    font-size: 15px;
}

.blog-body th,
.blog-body td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--saundy-line);
    text-align: left;
    vertical-align: top;
}

.blog-body th {
    color: var(--saundy-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--saundy-bg);
    border-top: 1px solid var(--saundy-line);
    color: var(--saundy-ink);
}

.footer-heading {
    color: var(--saundy-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.footer-link {
    color: var(--saundy-muted);
    display: inline-block;
    padding: 3px 0;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

.footer-muted {
    color: var(--saundy-muted);
}

.footer-tagline {
    font-size: 15px;
    font-weight: 600;
}

.footer-rule {
    border-color: var(--saundy-line) !important;
}

/* ---------- Store badges (StoreBadges component) ---------- */
.store-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.store-badges img {
    display: block;
}

.store-badges-soon {
    color: var(--saundy-muted);
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: var(--saundy-line);
    text-underline-offset: 3px;
}

.store-badges-soon:hover,
.store-badges-soon:focus-visible {
    color: var(--saundy-blue);
    text-decoration-color: currentColor;
}

/* ---------- Forms (register interest; the pricing calculator inherits) ---------- */
.form-label {
    font-weight: 600;
    color: var(--saundy-ink);
}

.form-control,
.form-select {
    border-radius: 11px; /* matches .btn */
    border-color: var(--saundy-line);
}

.form-control {
    padding: 0.55rem 0.85rem;
}

/* Keeps Bootstrap's right padding for the chevron; only the height matches the inputs. */
.form-select {
    padding-bottom: 0.55rem;
    padding-top: 0.55rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--saundy-blue);
    box-shadow: 0 0 0 0.2rem rgba(30, 133, 255, 0.15);
}

/* Honeypot field: off-screen rather than display:none so bots still fill it. */
.ri-field-website {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

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

/* Launch-offer block inside the subscription pricing cards (PromoOffer.razor). */
.promo-note {
    border: 1px solid rgba(30, 133, 255, 0.35);
    background: rgba(30, 133, 255, 0.06);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
    text-align: left;
}

.promo-note-title {
    font-weight: 600;
    color: var(--saundy-blue-dark);
}

.promo-note-meta {
    color: var(--saundy-muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Banner variant: full-width strip above a card row (Home pricing section). */
.promo-note-banner {
    text-align: center;
    padding: 0.9rem 1.25rem;
}

.promo-note-banner .promo-note-title {
    font-size: 1rem;
}

/* ---------- Features page ---------- */
/* Compact hero (Features, Contact): tighter than Home so the first button sits in the first screen. */
.hero--features {
    padding: 64px 0;
}

.hero--features .lead {
    max-width: 560px;
}

@media (max-width: 991.98px) {
    .hero--features {
        padding: 44px 0;
    }
}

/* Stack the two hero buttons full width on phones, primary on top. */
@media (max-width: 575.98px) {
    .hero-actions--stack > .btn {
        flex: 1 1 100%;
    }
}

/* Four-fact strip inside .trust-strip (Home and Features). Ink, not muted: muted is 4.24:1 on the tint. */
.fact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    justify-content: center;
}

.fact-row li {
    align-items: center;
    color: var(--saundy-ink);
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
}

.fact-row li .bi {
    color: var(--saundy-blue);
    font-size: 17px;
}

@media (max-width: 991.98px) {
    .fact-row {
        display: grid;
        gap: 10px 16px;
        grid-template-columns: 1fr 1fr;
    }

    .fact-row li {
        align-items: flex-start;
    }

    .fact-row li .bi {
        flex-shrink: 0;
    }
}

@media (max-width: 575.98px) {
    .fact-row li {
        font-size: 13px;
    }
}

/* Home's facts are longer than Features': from 768 to 1399px (Bootstrap's 1140px
   xl container included) they sit as two centred, content-sized columns instead
   of three-plus-an-orphan. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .fact-row--long {
        display: grid;
        gap: 10px 32px;
        grid-template-columns: repeat(2, max-content);
        justify-content: center;
    }
}

/* Launch-offer pill under the hero price line (Home), rendered only while
   Pricing:Promo is live; links to the pricing section that carries the code. */
.hero-promo {
    align-items: center;
    background: rgba(30, 133, 255, 0.10);
    border-radius: 999px;
    color: var(--saundy-blue-dark);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
    padding: 5px 12px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.hero-promo:hover,
.hero-promo:focus-visible {
    background: rgba(30, 133, 255, 0.18);
    color: var(--saundy-blue-dark);
}

/* The price beside the trial button is the hero's key fact: ink, not muted. */
.hero-note--price {
    color: var(--saundy-ink);
    font-size: 14px;
}

.section-compact {
    padding: 56px 0;
}

@media (max-width: 767.98px) {
    .section-compact {
        padding: 44px 0;
    }
}

/* Feature tiles (the /features bento and the Home audience cards):
   .feature-card supplies the border, radius and hover lift; .feature-section
   supplies the scroll-margin for the anchor ids. */
.feature-tile {
    display: flex;
    flex-direction: column;
    padding: 24px;
}

.feature-tile.is-wide {
    justify-content: center;
}

/* Persistent "you are here" for the ad-landing tile (same numbers as the
   highlighted pricing card). */
.feature-tile.is-landing {
    border: 2px solid var(--saundy-blue);
    box-shadow: 0 12px 32px rgba(30, 133, 255, 0.16);
}

.feature-tile.is-landing:hover {
    box-shadow: 0 16px 40px rgba(30, 133, 255, 0.24);
}

/* Ring on arrival at /features#id. App.razor loads no blazor.web.js, so
   :target behaves natively; reduced-motion collapses the ping to 0.01ms and
   the ring simply persists. */
.feature-tile:target {
    animation: tile-ping 0.9s var(--ease-out-soft) 1;
    border-color: var(--saundy-blue);
    box-shadow: 0 0 0 4px rgba(30, 133, 255, 0.18), 0 14px 32px rgba(31, 42, 51, 0.10);
}

@keyframes tile-ping {
    from { box-shadow: 0 0 0 0 rgba(30, 133, 255, 0.45); }
    to { box-shadow: 0 0 0 4px rgba(30, 133, 255, 0.18), 0 14px 32px rgba(31, 42, 51, 0.10); }
}

.tile-top {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.feature-icon.feature-icon-sm {
    border-radius: 10px;
    flex-shrink: 0;
    font-size: 18px;
    height: 38px;
    margin-bottom: 0;
    width: 38px;
}

.tile-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.25;
    margin: 0;
}

.tile-sub {
    color: var(--saundy-muted);
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 12px;
}

/* Wide tile: copy beside the mock on desktop, stacked (copy, CTA, mock) below. */
.tile-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 992px) {
    .feature-tile.is-wide .tile-title {
        font-size: 1.35rem;
    }

    .tile-inner {
        align-items: center;
        display: grid;
        gap: 28px;
        grid-template-columns: 1.15fr 1fr;
    }
}

.fact-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
}

.fact-chips:last-child {
    margin-bottom: 0;
}

/* Same pairing as .hp-badge (about 4.8:1). */
.fact-chip {
    align-items: flex-start;
    background: rgba(30, 133, 255, 0.08);
    border-radius: 999px;
    color: var(--saundy-blue-dark);
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 600;
    gap: 5px;
    padding: 4px 10px;
}

.fact-chip .bi {
    flex-shrink: 0;
    font-size: 12px;
    line-height: inherit;
}

.tile-cta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 4px;
}

.tile-cta-note {
    color: var(--saundy-muted);
    font-size: 12.5px;
    font-weight: 500;
    margin: 0;
}

.tile-cta-note a {
    color: var(--saundy-blue-dark);
    font-weight: 600;
    white-space: nowrap;
}

.tile-docs {
    align-self: flex-start;
    margin-top: auto;
}

/* Hand-off link at the foot of a Home audience card. */
.tile-link {
    align-self: flex-start;
    color: var(--saundy-blue-dark);
    font-size: 14.5px;
    font-weight: 600;
    margin-top: auto;
    text-decoration: none;
}

.tile-link:hover,
.tile-link:focus-visible {
    color: var(--saundy-blue);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .feature-tile {
        padding: 20px;
    }
}

/* One mock vocabulary for every fake UI on the page, derived from .hero-preview.
   Each mock is role="img" with an aria-label; its internals are aria-hidden. */
.ui-mock {
    background: var(--saundy-bg);
    border: 1px solid var(--saundy-line);
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.4;
    margin-top: 2px; /* with the chips' 14px: slack collects at the tile foot, as on Home */
    overflow: hidden;
    padding: 10px;
}

/* In the wide tile the mock is a grid cell, so no top margin. */
.tile-visual .ui-mock {
    margin-top: 0;
}

.mock-head {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 2px 4px 8px;
}

.mock-head-title {
    color: var(--saundy-ink);
    font-size: 13px;
    font-weight: 700;
}

.mock-head-meta {
    color: var(--saundy-muted-tint);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.mock-head.is-dark {
    background: var(--saundy-ink);
    border-radius: 9px 9px 0 0;
    margin: -10px -10px 8px;
    padding: 10px 12px;
}

.mock-head.is-dark .mock-head-title {
    color: #fff;
}

.mock-head.is-dark .mock-head-meta {
    color: rgba(255, 255, 255, 0.7);
}

.mock-logo {
    align-items: center;
    border: 1.5px dashed rgba(255, 255, 255, 0.55);
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.85);
    display: inline-flex;
    font-size: 9.5px;
    font-weight: 600;
    height: 26px;
    justify-content: center;
    margin-right: 8px;
    padding: 0 8px;
    white-space: nowrap;
}

.mock-row {
    align-items: center;
    background: #fff;
    border: 1px solid var(--saundy-line);
    border-radius: 9px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 8px 10px;
}

.mock-row + .mock-row,
.mock-row + .mock-sig {
    margin-top: 6px;
}

.mock-row.is-wrap {
    flex-wrap: wrap;
}

.mock-row-ico {
    align-items: center;
    background: rgba(30, 133, 255, 0.08);
    border-radius: 7px;
    color: var(--saundy-blue);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 13px;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.mock-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.mock-title {
    color: var(--saundy-ink);
    font-size: 13px;
    font-weight: 600;
}

.mock-title .sev-pill {
    margin-left: 6px;
    vertical-align: 1px;
}

.mock-meta {
    color: var(--saundy-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.mock-pills {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

/* Conditional question: indented child row with an L connector up to its parent. */
.mock-row.is-child {
    margin-left: 22px;
    position: relative;
}

.mock-row.is-child::before {
    border-bottom: 2px solid var(--saundy-grey);
    border-bottom-left-radius: 6px;
    border-left: 2px solid var(--saundy-grey);
    content: "";
    height: calc(50% + 8px);
    left: -14px;
    position: absolute;
    top: -8px;
    width: 10px;
}

.mock-foot {
    align-items: center;
    color: var(--saundy-muted-tint);
    display: flex;
    font-size: 11.5px;
    font-weight: 600;
    gap: 8px;
    justify-content: space-between;
    padding: 8px 4px 0;
}

.mock-chip {
    background: #fff;
    border: 1px solid var(--saundy-line);
    border-radius: 999px;
    color: var(--saundy-muted-tint);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    white-space: nowrap;
}

.mock-chip.is-blue {
    background: rgba(30, 133, 255, 0.10);
    border-color: transparent;
    color: var(--saundy-blue-dark);
}

.mock-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mock-opt {
    background: #fff;
    border: 1px solid var(--saundy-line);
    border-radius: 999px;
    color: var(--saundy-ink);
    display: inline-flex;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
}

.mock-opt.on {
    background: var(--saundy-blue);
    border-color: var(--saundy-blue);
    color: #fff;
}

/* Faux buttons are spans: never focusable, never clickable. */
.mock-btn {
    align-items: center;
    background: var(--saundy-blue);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    justify-content: center;
    padding: 5px 10px;
    pointer-events: none;
    white-space: nowrap;
}

.mock-btn.is-ghost {
    background: #fff;
    border: 1px solid var(--saundy-line);
    color: var(--saundy-ink);
}

.mock-btn.is-block {
    display: flex;
    margin-top: 8px;
    width: 100%;
}

.mock-sig {
    align-items: center;
    background: #fff;
    border: 1px solid var(--saundy-line);
    border-radius: 9px;
    color: var(--saundy-muted);
    display: flex;
    font-size: 11.5px;
    font-weight: 600;
    gap: 10px;
    padding: 6px 10px;
}

.mock-sig-path {
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .ui-mock {
        font-size: 12px;
    }
}

/* State pills beyond the existing sev-high / sev-med (11px/600, AA on their tints). */
.sev-pill.sev-ok {
    background: #E3F5EA;
    color: #1E6B3A;
}

.sev-pill.sev-open {
    background: rgba(30, 133, 255, 0.10);
    color: var(--saundy-blue-dark);
}

/* Cropped phone (mobile-capture.svg, 340x600) rising out of the mobile tile.
   A 2:1 box shows the same slice at every width (viewBox y 0-170: the app
   header and the amber offline pill; the first checklist row starts at 172),
   and it grows into any slack in the row, revealing more phone rather than
   leaving white space. */
.tile-art {
    aspect-ratio: 2 / 1;
    background: linear-gradient(180deg, rgba(30, 133, 255, 0.06), var(--saundy-bg));
    border: 1px solid var(--saundy-line);
    border-radius: 12px;
    flex: 1 0 auto;
    margin-top: 2px;
    overflow: hidden;
}

.tile-art img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    width: 100%;
}

/* Price panel: .scale-panel / .scale-row with an amount line per row. */
.price-row .price-amount {
    color: var(--saundy-ink);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 2px 0;
}

.price-unit {
    color: var(--saundy-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}

/* Struck list price beside the discounted figure while the launch offer is live
   (SubscriptionPrice.razor), and the "with code" line beneath it. */
.pricing-was {
    font-size: 0.5em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--saundy-muted);
    margin-right: 0.15em;
}

.pricing-code {
    color: var(--saundy-blue-dark);
    font-size: 0.9rem;
    font-weight: 600;
}