/* =============================================================================
   modern.css — contemporary SaaS styling layer for ScanLikely
   =============================================================================

   Loaded AFTER styles.css so it overrides without editing the base sheet.
   That keeps this reversible: delete the one <link> and the site returns
   exactly to its previous appearance.

   Design direction taken from the structural vocabulary of current SaaS
   marketing sites (fluid oversized type, pill eyebrows, soft blurred colour
   orbs, layered shadows, generous rhythm). The PALETTE stays ScanLikely's own
   coral and navy: the patterns are what read as modern, not the hue.

   Currently scoped to the homepage. Roll out further only after reviewing it
   rendered.
   ========================================================================== */

:root {
    /* --- Fluid type scale -------------------------------------------------
       clamp(min, preferred, max) so headings scale with the viewport instead
       of stepping at breakpoints. This is the single biggest contributor to a
       modern feel. */
    --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);
    --fs-h2:      clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
    --fs-h3:      clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
    --fs-lead:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);

    /* --- Rhythm ------------------------------------------------------------
       One variable drives vertical section spacing, so the page breathes
       consistently rather than each section inventing its own padding. */
    --section-y:  clamp(4rem, 2.5rem + 6vw, 7.5rem);
    --stack-sm:   0.75rem;
    --stack-md:   1.5rem;
    --stack-lg:   2.5rem;

    /* --- Larger radii ------------------------------------------------------ */
    --r-pill: 9999px;
    --r-sm:   12px;
    --r-md:   18px;
    --r-lg:   28px;

    /* --- Layered soft shadows ---------------------------------------------
       Stacked low-opacity shadows read softer than one hard shadow. */
    --shadow-sm:
        0 1px 2px rgba(11, 16, 32, 0.04),
        0 2px 8px rgba(11, 16, 32, 0.04);
    --shadow-md:
        0 2px 4px rgba(11, 16, 32, 0.03),
        0 8px 24px rgba(11, 16, 32, 0.07);
    --shadow-lg:
        0 4px 8px rgba(11, 16, 32, 0.03),
        0 16px 48px rgba(11, 16, 32, 0.10);
    --shadow-brand:
        0 8px 28px rgba(255, 107, 110, 0.28);

    /* --- Coral for TEXT on light backgrounds -------------------------------
       --primary-brand / --primary-brand-dark are fill colours. As text on
       white they measure 2.77:1 and 2.98:1, both below the 4.5:1 AA floor.
       This darker tone reads as the same brand coral and clears AA at 4.88:1.
       Use it for any coral text, link, or outline chip on a light surface. */
    --coral-ink: #ce3b34;

    /* --- Coral for BUTTON FILLS -------------------------------------------
       Bright coral (#ff6b6e) cannot carry white text: 2.77:1. Dark text on it
       measures 6.44:1 and passes on paper, but reads muddy in practice, because
       coral is a saturated mid-tone (L*64) and the hue contrast against navy is
       low. A deeper coral with white text is both more legible and more obviously
       a button. Bright coral stays for orbs, borders, markers and accents. */
    --coral-btn: #c4352f;
    --coral-btn-hover: #b02a24;
}

/* =============================================================================
   Typography
   ========================================================================== */

.hero-title {
    font-size: var(--fs-display);
    line-height: 1.04;
    /* Tight tracking on large type is what stops big headlines looking naive. */
    letter-spacing: -0.035em;
    font-weight: 700;
    margin-bottom: var(--stack-md);
    text-wrap: balance;
}

.hero-title .gradient-text {
    display: block;
    background: linear-gradient(100deg,
        var(--sl-coral-500) 0%,
        var(--sl-coral-400) 45%,
        var(--sl-blue-500) 115%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-subtitle {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--sl-slate-600);
    max-width: 46ch;
    text-wrap: pretty;
}

.section-title {
    font-size: var(--fs-h2);
    line-height: 1.12;
    letter-spacing: -0.028em;
    font-weight: 700;
    text-wrap: balance;
}

.section-subtitle {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--sl-slate-600);
    text-wrap: pretty;
}

/* =============================================================================
   Section rhythm
   ========================================================================== */

.features-section,
.comparison-section,
.content-types-section,
.sl-guides-section,
.partner-recs-section,
.enterprise-section,
.download-section,
.url-analyzer-section,
.metrics-section {
    padding-block: var(--section-y);
}

.hero {
    padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    /* Establishes the containing block for the blurred orbs below. */
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* --- Blurred colour orbs --------------------------------------------------
   The signature effect on current SaaS sites: large, heavily blurred colour
   fields behind the hero that add depth without a background image. Purely
   decorative and pointer-events:none so they never intercept a click. */
.hero::before,
.hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
    opacity: 0.5;
}

.hero::before {
    width: min(46vw, 520px);
    aspect-ratio: 1;
    top: -14%;
    right: -8%;
    background: radial-gradient(circle,
        var(--sl-coral-400) 0%,
        rgba(255, 126, 118, 0) 70%);
}

.hero::after {
    width: min(38vw, 440px);
    aspect-ratio: 1;
    bottom: -22%;
    left: -10%;
    background: radial-gradient(circle,
        var(--sl-blue-500) 0%,
        rgba(43, 110, 210, 0) 70%);
    opacity: 0.32;
}

/* Alternating section tint gives the page a rhythm without hard rules. */
.features-section,
.content-types-section,
.download-section {
    background: linear-gradient(180deg, var(--sl-slate-100) 0%, var(--sl-white) 100%);
}

/* =============================================================================
   Pill eyebrow badge
   ========================================================================== */

.sl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    margin-bottom: var(--stack-sm);
    border: 1px solid rgba(255, 107, 110, 0.28);
    border-radius: var(--r-pill);
    background: rgba(255, 107, 110, 0.08);
    color: var(--coral-ink);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.sl-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-brand);
    box-shadow: 0 0 0 3px rgba(255, 107, 110, 0.22);
}

/* =============================================================================
   Buttons
   ========================================================================== */

.btn {
    border-radius: var(--r-pill);
    padding: 0.85rem 1.6rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    min-height: 48px;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.18s ease,
                background 0.18s ease;
}

.btn-primary {
    background: var(--primary-brand);
    box-shadow: var(--shadow-brand);
}

.btn-primary:hover {
    background: var(--primary-brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 107, 110, 0.34);
}

.btn-secondary {
    background: var(--sl-white);
    color: var(--sl-slate-900);
    border: 1px solid var(--sl-border);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--sl-slate-300);
}

.sl-btn {
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-brand);
}

/* =============================================================================
   Cards
   ========================================================================== */

.feature-card,
.content-type-card,
.sl-guide-card,
.comparison-card,
.metric-card {
    border-radius: var(--r-md);
    border: 1px solid var(--sl-border);
    background: var(--sl-surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.22s ease,
                border-color 0.22s ease;
}

.feature-card:hover,
.content-type-card:hover,
.sl-guide-card:hover,
.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 107, 110, 0.35);
}

.sl-guide-card {
    padding: 1.6rem;
}

.sl-guide-card h3 {
    font-size: var(--fs-h3);
    letter-spacing: -0.015em;
}

/* =============================================================================
   Navigation — slim, translucent, sticky
   ========================================================================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 800;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(11, 16, 32, 0.06);
    box-shadow: none;
}

.nav-link {
    font-size: 0.925rem;
    border-radius: var(--r-pill);
    padding-inline: 0.7rem;
}

.nav-link.cta-link {
    padding: 0.5rem 1.1rem;
}

/* =============================================================================
   Hero supporting elements
   ========================================================================== */

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--stack-sm);
    margin-top: var(--stack-lg);
}

.phone-mockup .phone-image {
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

/* =============================================================================
   Motion + accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .btn,
    .feature-card,
    .content-type-card,
    .sl-guide-card,
    .metric-card {
        transition: none;
    }
    .btn:hover,
    .feature-card:hover,
    .content-type-card:hover,
    .sl-guide-card:hover,
    .metric-card:hover {
        transform: none;
    }
}

/* Orbs are decorative; drop them where the user has asked for less contrast
   or where a solid background matters more than depth. */
@media (prefers-contrast: more) {
    .hero::before,
    .hero::after {
        display: none;
    }
}

/* --- Hero capability list -------------------------------------------------
   Replaces the old "hero-stats" block, which presented "Smart" and "Safe" as
   if they were figures. Concrete checks read better and are actually true. */
.sl-hero-points {
    list-style: none;
    padding: 0;
    margin: var(--stack-md) 0 0;
    display: grid;
    gap: 0.6rem;
    max-width: 46ch;
}

.sl-hero-points li {
    position: relative;
    padding-left: 1.9rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sl-slate-700);
}

.sl-hero-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: rgba(255, 107, 110, 0.14);
    /* Checkmark drawn with a background image so no icon font is required. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff5f5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.8rem;
}

/* =============================================================================
   Guide / article pages
   =============================================================================
   Applies to the six QR safety guides and the extracted blog posts. These
   share a .page-content > .page-header > .content-section structure and have
   no hero image, so the orbs sit behind the article header instead.
   ========================================================================== */

.page-content {
    position: relative;
    overflow-x: clip;
    isolation: isolate;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Same decorative treatment as the homepage hero, scaled down: an article
   header is a quieter moment than a landing hero. */
.page-content.article::before,
.page-content.article::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
}

.page-content.article::before {
    width: min(42vw, 460px);
    aspect-ratio: 1;
    top: -12%;
    right: -12%;
    opacity: 0.38;
    background: radial-gradient(circle,
        var(--sl-coral-400) 0%,
        rgba(255, 126, 118, 0) 70%);
}

.page-content.article::after {
    width: min(34vw, 380px);
    aspect-ratio: 1;
    top: 18%;
    left: -14%;
    opacity: 0.24;
    background: radial-gradient(circle,
        var(--sl-blue-500) 0%,
        rgba(43, 110, 210, 0) 70%);
}

/* --- Article header -------------------------------------------------------
   Left-aligned rather than centred. Centred headings read as a landing page;
   these are documents someone arrived at with a question. */
.article .page-header {
    text-align: left;
    max-width: 800px;
    margin: 0 auto var(--stack-lg);
}

.article .page-header h1 {
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -0.032em;
    font-weight: 700;
    margin-bottom: var(--stack-sm);
    text-wrap: balance;
}

.article .page-header .page-subtitle {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--sl-slate-600);
    max-width: 62ch;
    /* Base rule centres this with auto margins; articles are left-aligned. */
    margin-inline: 0;
    text-wrap: pretty;
}

.sl-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: var(--stack-sm);
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--sl-border);
    border-radius: var(--r-pill);
    background: var(--sl-slate-100);
    color: var(--sl-slate-600);
    font-size: 0.78rem;
    font-weight: 500;
}

/* --- Article body ---------------------------------------------------------
   Measure capped near 70 characters. Long scam-guide paragraphs are much
   easier to read when the line length is controlled. */
.article .content-section {
    max-width: 70ch;
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--sl-slate-700);
}

.article .content-section > p {
    margin-bottom: 1.15em;
    text-wrap: pretty;
}

.article .content-section h2 {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.022em;
    font-weight: 700;
    margin-top: 2.4em;
    margin-bottom: 0.6em;
    color: var(--sl-heading);
}

.article .content-section h3 {
    font-size: var(--fs-h3);
    line-height: 1.3;
    letter-spacing: -0.012em;
    font-weight: 650;
    margin-top: 1.9em;
    margin-bottom: 0.45em;
    color: var(--sl-heading);
}

.article .content-section ul,
.article .content-section ol {
    margin: 0 0 1.3em;
    padding-left: 1.35em;
}

.article .content-section li {
    margin-bottom: 0.55em;
    padding-left: 0.2em;
}

.article .content-section li::marker {
    color: var(--primary-brand);
    font-weight: 600;
}

/* :not() guards so a button placed inside prose is never restyled as a link.
   blog.html previously carried .article and its card buttons inherited this
   rule at higher specificity, rendering coral text on a coral fill at 1.10:1. */
.article .content-section a:not(.sl-btn):not(.btn):not(.app-store-btn):not(.btn-primary):not(.btn-secondary) {
    color: var(--coral-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 107, 110, 0.45);
    transition: text-decoration-color 0.15s ease;
}

.article .content-section a:not(.sl-btn):not(.btn):not(.app-store-btn):hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

.article .content-section code {
    padding: 0.15em 0.4em;
    border-radius: 6px;
    background: var(--sl-slate-100);
    border: 1px solid var(--sl-border);
    font-size: 0.9em;
    word-break: break-word;
}

/* --- Above-fold CTA -------------------------------------------------------- */
.sl-cta-inline {
    border: 1px solid var(--sl-border);
    border-left-width: 4px;
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    background: linear-gradient(135deg,
        rgba(255, 107, 110, 0.06) 0%,
        var(--sl-slate-100) 100%);
}

/* --- Related guides -------------------------------------------------------- */
.sl-related {
    max-width: 70ch;
}

.sl-related h2 {
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}

.sl-related ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.sl-related li a {
    display: block;
    padding: 0.7rem 0.9rem;
    border-radius: var(--r-sm);
    color: var(--sl-slate-700);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.sl-related li a:hover {
    background: var(--sl-slate-100);
    transform: translateX(3px);
    color: var(--coral-ink);
}

/* --- Sticky mobile CTA ----------------------------------------------------- */
.sl-sticky-cta {
    border-top: 1px solid rgba(11, 16, 32, 0.08);
    box-shadow: 0 -6px 24px rgba(11, 16, 32, 0.10);
}

@media (prefers-contrast: more) {
    .page-content.article::before,
    .page-content.article::after {
        display: none;
    }
}

/* =============================================================================
   Non-article page heroes
   =============================================================================
   advertise (.ad-hero), url-expansion-guide (.hero-simple), certification
   (.cert-hero) and enterprise (.enterprise-hero) each have their own hero
   markup. They get the same orb + type treatment, applied per-hero rather than
   through .page-content.
   ========================================================================== */

.ad-hero,
.hero-simple,
.cert-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem);
}

.ad-hero::before,
.hero-simple::before,
.cert-hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
    opacity: 0.4;
    width: min(44vw, 480px);
    aspect-ratio: 1;
    top: -16%;
    right: -10%;
    background: radial-gradient(circle,
        var(--sl-coral-400) 0%,
        rgba(255, 126, 118, 0) 70%);
}

.ad-hero::after,
.hero-simple::after,
.cert-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
    opacity: 0.26;
    width: min(36vw, 400px);
    aspect-ratio: 1;
    bottom: -20%;
    left: -12%;
    background: radial-gradient(circle,
        var(--sl-blue-500) 0%,
        rgba(43, 110, 210, 0) 70%);
}

.ad-hero h1,
.hero-simple h1,
.cert-hero h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

/* --- Enterprise hero: dark background, so the orbs need more presence and a
       different blend to register at all. ---------------------------------- */
.enterprise-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.enterprise-hero::before,
.enterprise-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.enterprise-hero::before {
    width: min(46vw, 520px);
    aspect-ratio: 1;
    top: -18%;
    right: -8%;
    opacity: 0.34;
    background: radial-gradient(circle,
        var(--sl-coral-500) 0%,
        rgba(255, 107, 110, 0) 70%);
}

.enterprise-hero::after {
    width: min(38vw, 430px);
    aspect-ratio: 1;
    bottom: -24%;
    left: -10%;
    opacity: 0.30;
    background: radial-gradient(circle,
        var(--sl-blue-700) 0%,
        rgba(26, 91, 184, 0) 70%);
}

.enterprise-hero .hero-title {
    font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem);
}

/* =============================================================================
   Card grids on non-article pages
   ========================================================================== */

.problem-card,
.partner-card,
.audience-card,
.deletion-card,
.tech-card,
.value-card,
.package-card,
.placement-card,
.cert-framework-card,
.enterprise-feature-card,
.blog-post {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.22s ease;
}

.problem-card:hover,
.partner-card:hover,
.audience-card:hover,
.package-card:hover,
.placement-card:hover,
.blog-post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* =============================================================================
   Forms and utility shells
   =============================================================================
   Login, signup, exam, and account pages are functional, not marketing. They
   get typography, radii and focus states only: no orbs, no measure changes,
   nothing that could disturb a working form layout.
   ========================================================================== */

.cert-resume-shell input,
.cert-account-shell input,
.cert-exam-shell input,
.enterprise-contact-form input,
.enterprise-contact-form select,
.enterprise-contact-form textarea,
.modal-form input,
.modal-form select,
.modal-form textarea {
    border-radius: var(--r-sm);
    /* 16px stops iOS zooming the viewport on focus. */
    font-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cert-resume-shell input:focus,
.cert-account-shell input:focus,
.enterprise-contact-form input:focus,
.enterprise-contact-form select:focus,
.enterprise-contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-brand);
    box-shadow: var(--sl-focus);
}

.cert-status-notice,
.sl-contact-form {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

@media (prefers-contrast: more) {
    .ad-hero::before, .ad-hero::after,
    .hero-simple::before, .hero-simple::after,
    .cert-hero::before, .cert-hero::after,
    .enterprise-hero::before, .enterprise-hero::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .problem-card, .partner-card, .audience-card,
    .package-card, .placement-card, .blog-post {
        transition: none;
    }
    .problem-card:hover, .partner-card:hover, .audience-card:hover,
    .package-card:hover, .placement-card:hover, .blog-post:hover {
        transform: none;
    }
}

/* =============================================================================
   Campaign landing pages (/free-cash, /scanmyshirt)
   =============================================================================
   These two carry their own self-contained <style> block, which loads AFTER
   this file and therefore wins on any shared selector. That is deliberate:
   their bespoke campaign design should not be overridden.

   Only additive rules go here. The hero ::before / ::after pseudo-elements are
   unused by both pages, so the orbs attach cleanly without touching anything
   the campaign design already defines.

   Both pages are noindex, so this is presentation only with no SEO effect.
   ========================================================================== */

.ca-wrap,
.sms-wrap {
    position: relative;
    isolation: isolate;
}

.ca-hero,
.sms-hero {
    position: relative;
    isolation: isolate;
}

.ca-hero::before,
.sms-hero::before,
.ca-hero::after,
.sms-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(72px);
}

/* Narrow single-column layout (760px), so the orbs sit wider than the wrap and
   bleed past its edges. vw units rather than % keep them anchored to the
   viewport instead of the narrow column. */
.ca-hero::before,
.sms-hero::before {
    width: min(70vw, 460px);
    aspect-ratio: 1;
    top: -22%;
    right: -32%;
    opacity: 0.42;
    background: radial-gradient(circle,
        var(--sl-coral-400) 0%,
        rgba(255, 126, 118, 0) 70%);
}

.ca-hero::after,
.sms-hero::after {
    width: min(58vw, 390px);
    aspect-ratio: 1;
    bottom: -30%;
    left: -30%;
    opacity: 0.26;
    background: radial-gradient(circle,
        var(--sl-blue-500) 0%,
        rgba(43, 110, 210, 0) 70%);
}

/* The wrap clips horizontally so the bleeding orbs never create a horizontal
   scrollbar on a phone. overflow-x: clip rather than hidden, so any sticky or
   position:sticky descendant keeps working. */
.ca-wrap,
.sms-wrap {
    overflow-x: clip;
}

/* Layered shadows on the campaign cards, matching the rest of the site. */
.ca-benefits > *,
.ca-steps > *,
.ca-signup,
.ca-form,
.sms-facts > *,
.sms-download {
    box-shadow: var(--shadow-sm);
}

.ca-hero-cta,
.sms-download a {
    box-shadow: var(--shadow-brand);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.18s ease;
}

.ca-hero-cta:hover,
.sms-download a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 107, 110, 0.34);
}

@media (prefers-contrast: more) {
    .ca-hero::before, .ca-hero::after,
    .sms-hero::before, .sms-hero::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-hero-cta,
    .sms-download a {
        transition: none;
    }
    .ca-hero-cta:hover,
    .sms-download a:hover {
        transform: none;
    }
}

/* =============================================================================
   Contrast fixes
   =============================================================================
   The site does not implement a real dark mode: the page background stays
   light regardless of the OS setting. Any @media (prefers-color-scheme: dark)
   rule therefore recolours components on a still-white page. That is what put
   white text on white buttons. Those blocks have been removed rather than
   extended; the rules below pin the affected components explicitly so no
   inherited or leftover rule can wash them out again.
   ========================================================================== */

/* --- Secondary / outline buttons -----------------------------------------
   styles.css declares .btn-secondary twice, the later one setting a slate
   background with white text. Pinned here for every state so the label is
   always legible, whatever the OS colour-scheme preference. */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: var(--sl-white);
    /* 10.35:1 on white */
    color: var(--sl-slate-700);
    border: 1px solid var(--sl-slate-300);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: var(--sl-slate-100);
    /* 17.85:1 on the slate-100 hover fill */
    color: var(--sl-slate-900);
    border-color: var(--sl-slate-500);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:visited {
    color: var(--sl-slate-700);
}

.btn-outline {
    background: transparent;
    color: var(--sl-slate-700);
    border: 1px solid var(--sl-slate-300);
}

.btn-outline:hover {
    background: var(--sl-slate-100);
    color: var(--sl-slate-900);
}

/* Primary buttons: coral is only legible in reverse, never as text on white. */
.btn-primary,
.btn-primary:visited {
    background: var(--primary-brand);
    color: var(--sl-white);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--primary-brand-dark);
    color: var(--sl-white);
}

/* --- Navigation -----------------------------------------------------------
   The translucent nav sits over whatever scrolls beneath it, so the link
   colour is pinned to a value that clears AA against the lightened backdrop
   rather than relying on inheritance. */
.navbar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(11, 16, 32, 0.08);
}

.nav-link,
.nav-link:visited {
    /* 7.58:1 on the nav backdrop */
    color: var(--sl-slate-600);
    font-weight: 550;
}

.nav-link:hover,
.nav-link:focus-visible {
    /* 17.85:1 */
    color: var(--sl-slate-900);
}

/* The download CTA is reversed out, so it needs the opposite treatment. */

.brand-text {
    color: var(--sl-slate-900);
}

/* --- Store badge links ---------------------------------------------------- */
.app-store-btn,
.app-store-btn:visited,
.app-store-btn:hover {
    color: inherit;
    text-decoration: none;
}

/* =============================================================================
   Coral buttons: deeper fill, white label
   =============================================================================
   White on bright coral is 2.77:1 and fails. Dark text on bright coral is
   6.44:1 and passes the formula, but reads poorly: coral is a loud, saturated
   mid-tone and dark navy on it looks muddy at small sizes.

   Deepening the fill and returning to a white label gives 5.39:1, a wider
   perceived-lightness gap, and far higher hue contrast. Brand coral is
   unchanged everywhere it is not carrying text.
   ========================================================================== */

.btn-primary,
.btn-primary:visited,
.btn-blocked,
.sl-btn,
.sl-btn:visited,
.email-link,
.email-link:visited,
.newsletter-btn,
.cert-step-num,
.enterprise-badge,
.ca-hero-cta,
.ca-hero-cta:visited,
.cert-cta-banner .btn-primary,
.cert-result-badge.fail {
    background: var(--coral-btn);
    /* 5.39:1 */
    color: var(--sl-white);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.sl-btn:hover,
.sl-btn:focus-visible,
.email-link:hover,
.newsletter-btn:hover,
.ca-hero-cta:hover,
.cert-cta-banner .btn-primary:hover {
    /* 6.56:1 */
    background: var(--coral-btn-hover);
    color: var(--sl-white);
}

.nav-link.cta-link,
.nav-link.cta-link:visited {
    background: var(--coral-btn) !important;
    color: var(--sl-white) !important;
}

.nav-link.cta-link:hover,
.nav-link.cta-link:focus-visible {
    background: var(--coral-btn-hover) !important;
    color: var(--sl-white) !important;
}

.post-category {
    background: transparent;
}

.social-icon:hover {
    background: var(--coral-btn);
    color: var(--sl-white);
}

/* Icons follow the label. */
.btn-primary svg, .btn-primary i,
.sl-btn svg, .sl-btn i,
.ca-hero-cta svg {
    color: currentColor;
    stroke: currentColor;
}

/* Shadow retinted to the deeper fill so the glow does not look detached. */
.btn-primary,
.sl-btn,
.ca-hero-cta,
.nav-link.cta-link {
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(196, 53, 47, 0.26);
}

.btn-primary:hover,
.sl-btn:hover,
.ca-hero-cta:hover {
    box-shadow: 0 12px 30px rgba(196, 53, 47, 0.32);
}



/* Icons inside coral buttons inherit the label colour so they do not stay
   white against the fill. */
.btn-primary svg,
.btn-primary i,
.sl-btn svg,
.sl-btn i,
.ca-hero-cta svg {
    color: currentColor;
    stroke: currentColor;
}

/* Dark text needs a touch more weight on a saturated fill to hold its edge. */
.btn-primary,
.sl-btn,
.ca-hero-cta,
.nav-link.cta-link {
    font-weight: 650;
}

/* =============================================================================
   Blog index cards
   =============================================================================
   Each card carried two coral fills: the category pill and the "Read the full
   post" button. Two solid brand blocks in one small card compete for the same
   attention and neither wins.

   One focal point per card. The category becomes a quiet outline chip, and the
   coral fill belongs to the action.

   The headline link was also entirely unstyled, so it rendered browser blue
   and turned purple once visited.
   ========================================================================== */

.post-title {
    font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
    line-height: 1.28;
    letter-spacing: -0.018em;
    font-weight: 700;
    margin: 0.35rem 0 0.6rem;
}

.post-title a,
.post-title a:visited {
    color: var(--sl-slate-900);
    text-decoration: none;
    transition: color 0.15s ease;
}

.post-title a:hover,
.post-title a:focus-visible {
    /* 4.88:1 on white */
    color: var(--coral-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Category: outline chip rather than a second coral fill. */
.post-category {
    background: transparent;
    /* 4.88:1 on white */
    color: var(--coral-ink);
    border: 1px solid rgba(206, 59, 52, 0.35);
    border-radius: var(--r-pill);
    padding: 0.24rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.post-date {
    font-size: 0.82rem;
    color: var(--sl-slate-500);
}

.post-excerpt {
    color: var(--sl-slate-600);
    line-height: 1.62;
    margin-bottom: 0;
}

.blog-post {
    padding: 1.6rem;
    border: 1px solid var(--sl-border);
}

.post-footer {
    margin-top: 1.1rem;
    padding-top: 0;
    border-top: none;
}

/* The one coral element in the card. */
.blog-post .sl-btn {
    font-size: 0.925rem;
    padding: 0.6rem 1.15rem;
    min-height: 42px;
}

/* Whole card is clickable-feeling on hover, without nesting links. */
.blog-post:hover .post-title a {
    color: var(--coral-ink);
}