:root {
    /* Primary Brand Colors */
    --midnight-navy: #102542;
    --cool-sky-blue: #8EAFDB;
    --fresh-emerald-green: #07AA59;
    /* WCAG-AA emerald for text, links and primary-button backgrounds:
       5.7:1 on white / 5.27:1 on canvas (the brand #07AA59 only reaches ~3:1,
       so it is kept for large graphical accents only) */
    --green-text: #067A43;
    /* Primary-button hover shade — separate token so the dark-theme
       --green-text remap (mint, for text legibility) can't brighten CTAs */
    --green-btn-hover: #067A43;
    --frost-white: #EFF7F9;
    
    /* Secondary Brand Colors */
    --deep-slate-blue: #232E38;
    --cool-mist-blue: #7FA6C6;
    --minty-fresh-green: #87D99F;  /* per visual-style-guide.md */
    
    /* Legacy color mappings for compatibility */
    --primary-blue: var(--midnight-navy);
    --primary-accent: var(--fresh-emerald-green);
    --white: #ffffff;

    /* Refined gray scale */
    --gray-100: var(--frost-white);
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: var(--deep-slate-blue);
    --gray-800: var(--midnight-navy);
    --gray-900: #1a202c;

    /* Canvas — soft tinted off-white instead of stark white.
       Cool/neutral so it sits under the navy palette. */
    --canvas: #F4F6F8;
    --canvas-warm: #EDF1F4;
    --surface: #ffffff;
    --hairline: rgba(16, 37, 66, 0.10);

    /* Primary text ink — midnight navy in light mode, frost white in dark mode
       (flipped via the [data-theme="dark"] block at the end of this file) */
    --ink: var(--midnight-navy);
    color-scheme: light;

    /* Type scale — big display steps, tight leading */
    --display-1: clamp(2.5rem, 6vw, 5.5rem);
    --display-2: clamp(2rem, 4.8vw, 4rem);
    --display-3: clamp(1.75rem, 2.6vw, 2.5rem);
    --leading-display: 1.06;

    /* Radii — pills and soft cards */
    --r-pill: 999px;
    --r-card: 24px;
    --r-card-lg: 32px;

    /* Vertical rhythm — generous */
    --section-y: clamp(6.5rem, 12vw, 11rem);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Self-hosted fonts — no third-party requests, GDPR-friendly. */
@font-face {
    font-family: 'Garet';
    /* Subset containing only the "Compeas" wordmark glyphs */
    src: url('fonts/garet-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.65;
    color: var(--gray-800);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

/* Typography hierarchy with geometric fonts */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Display type — oversized, tight, confident */
.hero-title,
.section-title,
.cta-title,
.page-hero-title {
    letter-spacing: -0.022em;
    line-height: var(--leading-display);
    font-weight: 700;
    text-wrap: balance;
}

/* Swedish stacks diacritics (å ä ö) on top of the cap height and runs longer
   compounds, so it needs looser tracking and an extra notch of leading before
   an umlaut touches the descenders above it. */
:lang(sv) .hero-title,
:lang(sv) .section-title,
:lang(sv) .cta-title,
:lang(sv) .page-hero-title {
    letter-spacing: -0.008em;
    line-height: 1.1;
}

:lang(sv) h1,
:lang(sv) h2,
:lang(sv) h3,
:lang(sv) h4,
:lang(sv) h5,
:lang(sv) h6 {
    letter-spacing: -0.01em;
}

/* Long unbreakable words (notably Swedish compounds like "Nyckelfunktioner")
   must not push the page wider than narrow viewports: hyphenate when the
   browser has a dictionary, break mid-word as a last resort. Also shrinks
   min-content so grid tracks can't be stretched (WCAG 1.4.10 reflow). */
@media (max-width: 767.98px) {
    .hero-title,
    .section-title,
    .cta-title,
    .page-hero-title {
        hyphens: auto;
        /* NOT `anywhere`: that breaks any word that doesn't fit, mid-syllable
           and with no hyphen ("männ/iskor"). `break-word` only intervenes when
           a word cannot fit on a line by itself. */
        overflow-wrap: break-word;
    }
}

/* Small uppercase eyebrow above headlines */
.eyebrow {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-text);
    margin-bottom: 1.25rem;
}

.eyebrow-light {
    color: rgba(255, 255, 255, 0.65);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Organic blob accent — Wint-style soft shape */
.blob {
    position: absolute;
    border-radius: 42% 58% 63% 37% / 47% 41% 59% 53%;
    pointer-events: none;
    z-index: 0;
}

@keyframes blobDrift {
    0%, 100% { border-radius: 42% 58% 63% 37% / 47% 41% 59% 53%; transform: translate(0, 0) rotate(0deg); }
    50%      { border-radius: 58% 42% 37% 63% / 41% 59% 41% 59%; transform: translate(0, -14px) rotate(4deg); }
}

.blob-animated {
    animation: blobDrift 14s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
    .blob-animated { animation: none; }
    .product-showcase-visual:hover .product-showcase-image { transform: none; }
    .hero-caret { animation: none; } /* script.js also skips the typewriter entirely */
}

/* Navigation */
.navbar {
    background: rgba(244, 246, 248, 0.82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

/* Hairline only once the page has scrolled */
.navbar.is-scrolled {
    border-bottom-color: var(--hairline);
    background: rgba(244, 246, 248, 0.94);
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0;
    gap: 2rem;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.logo-image {
    height: 32px;
    width: auto;
}

.logo-text {
    font-family: 'Garet', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ink);
}

.nav-menu {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Nav items sit in soft pills that fill on hover */
.nav-menu .nav-link {
    padding: 0.6rem 1.1rem;
    border-radius: var(--r-pill);
}

.nav-link {
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
    transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.nav-menu .nav-link:hover {
    color: var(--ink);
    background: rgba(16, 37, 66, 0.06);
}

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

/* Dropdown menus */
.nav-item {
    position: relative;
}

.nav-item > .nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Chevron indicator for dropdown parents */
.nav-item > .nav-link::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s var(--ease);
    opacity: 0.6;
}

.nav-item:hover > .nav-link::after {
    transform: rotate(-135deg);
    margin-top: 4px;
    opacity: 1;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 0.5rem;
    box-shadow: 0 12px 32px rgba(16, 37, 66, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    z-index: 1001;
}

.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: block;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
    font-size: 0.9375rem;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
    white-space: nowrap;
}

.dropdown-link:hover {
    color: var(--ink);
    background: rgba(16, 37, 66, 0.06);
}

.dropdown-link.active {
    color: var(--green-text);
    font-weight: 600;
}

/* Touch-friendly dropdown persistence (toggled by script.js on coarse pointers) */
.nav-item.dropdown-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-actions .nav-link {
    padding: 0.6rem 0.9rem;
}

/* .btn.nav-cta needs two classes to outrank the bare .btn sizing below
   (base rule appears later in source order) */
.nav-actions .btn,
.btn.nav-cta {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* "Log in" beside Get started: a text link in the nav's pill style, leading to
   grc.compeas.com, where a visitor finds their organisation's address.
   Hidden until the first customer is in the login directory (the KV namespace
   inloggningslistan, see DEPLOYMENT.md §10):
   until then the page finds no one. Delete display: none to show it again. */
.nav-actions .nav-login {
    display: none;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.nav-actions .nav-login:hover {
    background: rgba(16, 37, 66, 0.06);
}

/* The desktop bar now carries logo, five dropdowns, EN/SV, the theme toggle,
   Log in and Get started. At the pills' roomier mobile spacing that is ~120px
   wider than the 1200px container — it stuck out past the page's right edge
   and past the viewport just above the hamburger breakpoint — so the gaps and
   pill padding tighten on desktop only. Measured widths: EN 1147px, SV 1137px
   of the 1152px available. Re-measure if a nav item is added. */
@media (min-width: 1240px) {
    .nav-wrapper {
        gap: 1rem;
    }

    .nav-menu .nav-link {
        padding: 0.6rem 0.8rem;
    }

    .navbar .lang-link {
        padding: 0.4rem 0.55rem;
    }
}

/* Person icon in nav */
.nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.nav-link-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.nav-link-icon:hover {
    background: rgba(16, 37, 66, 0.06);
    color: var(--ink);
}

.nav-link-icon.active {
    color: var(--green-text);
}

@media (max-width: 1239.98px) {
    .nav-link-icon {
        padding: 0.75rem;
    }
    .nav-link-icon svg {
        width: 22px;
        height: 22px;
    }
}

.mobile-menu-toggle span {
    width: 25px;
    height: 2px;
    background: var(--ink);
    transition: all 0.3s ease;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease),
                box-shadow 0.3s var(--ease), color 0.3s var(--ease),
                border-color 0.3s var(--ease);
    cursor: pointer;
    border: none;
    font-size: 1rem;
    line-height: 1.2;
}

.btn-primary {
    background: var(--fresh-emerald-green);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--green-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(7, 170, 89, 0.28);
}

/* Soft-tinted nav CTA, in the spirit of Wint's "Kom igång" */
.btn-soft {
    background: rgba(16, 37, 66, 0.07);
    color: var(--ink);
    padding: 0.85rem 1.6rem;
}

.btn-soft:hover {
    background: rgba(16, 37, 66, 0.12);
    transform: translateY(-1px);
}

/* Solid navy — the moodboard's primary dark pill */
.btn-navy {
    background: var(--midnight-navy);
    color: var(--white);
}

.btn-navy:hover {
    background: #1b3760;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 37, 66, 0.25);
}

/* Outlined pill on light backgrounds */
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--midnight-navy);
}

.btn-ghost:hover {
    background: var(--midnight-navy);
    color: var(--white);
    transform: translateY(-2px);
}

/* Arrow-circle CTA from the brand moodboard */
.btn-arrow {
    padding-right: 0.5rem;
}

.btn-arrow .arrow-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: currentColor;
    transition: transform 0.3s var(--ease);
}

.btn-arrow .arrow-circle svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* Icon takes the button's own background so it reads out of the filled circle */
.btn-navy.btn-arrow .arrow-circle svg,
.btn-primary.btn-arrow .arrow-circle svg { color: var(--midnight-navy); }

.btn-white.btn-arrow .arrow-circle svg,
.btn-ghost.btn-arrow .arrow-circle svg { color: var(--white); }

.btn-ghost.btn-arrow:hover .arrow-circle svg { color: var(--midnight-navy); }

.btn-arrow:hover .arrow-circle {
    transform: translateX(4px);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-secondary:hover {
    background: var(--white);
    color: var(--midnight-navy);
}

.btn-white {
    background: var(--white);
    color: var(--primary-blue);
}

.btn-white:hover {
    background: var(--gray-100);
    transform: translateY(-1px);
}

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

.btn-outline-white:hover {
    background: var(--white);
    color: var(--primary-blue);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* Hero Section */
.hero {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0 var(--section-y);
    display: flex;
    align-items: center;
    background: var(--canvas);
    color: var(--ink);
    overflow: hidden;
}

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

/* Soft organic accent behind the hero visual */
.hero-blob {
    width: 560px;
    height: 560px;
    background: radial-gradient(circle at 30% 30%,
                rgba(142, 175, 219, 0.38),
                rgba(142, 175, 219, 0) 70%);
    top: -80px;
    right: -140px;
}

.hero-blob-2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at 40% 40%,
                rgba(7, 170, 89, 0.20),
                rgba(7, 170, 89, 0.04) 70%);
    bottom: -120px;
    left: -100px;
    animation-delay: -6s;
}

.hero-wrapper {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}

.hero-content {
    max-width: none;
    animation: fadeIn 0.8s ease-out;
}

.hero-title {
    font-size: var(--display-1);
    color: var(--ink);
    margin-bottom: 1.75rem;
    font-weight: 800;
}

/* Typewriter hero word (script.js retypes data-words) — inline-block so a
   word containing a space ("ISO 27001…") can't break mid-typing; inherits
   the headline font and colour unchanged. */
.hero-rotate {
    display: inline-block;
}

/* Static tail of the hero title ("Made Easy" / "förenklat") — always on its
   own line so it never re-wraps (jumps) as the rotating word changes length */
.hero-title-tail {
    display: block;
}

/* Typewriter caret — inserted by script.js only (never for reduced-motion /
   no-JS). Brand emerald (decorative element, aria-hidden); blinks while
   typing, fades away (.is-done) once the final word has been typed. */
.hero-caret {
    display: inline-block;
    width: 3px;
    height: 0.82em;
    margin-left: 0.08em;
    background: var(--fresh-emerald-green);
    transform: translateY(0.1em); /* optical alignment with the cap height */
    animation: caretBlink 1.1s step-end infinite;
}

.hero-caret.is-done {
    animation: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

@keyframes caretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--gray-600);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    font-weight: 400;
    max-width: 38ch;
}

/* Circular check bullets, Wint-style */
.hero-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 2.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hero-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.45;
}

.benefit-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fresh-emerald-green);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.benefit-check svg {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 3.5rem;
    flex-wrap: wrap;
}

.hero-actions .btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.hero-actions .btn svg {
    transition: transform 0.3s ease;
}

.hero-actions .btn:hover svg {
    transform: translateX(4px);
}

.hero-stats {
    display: flex;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-top: 2.5rem;
    border-top: 1px solid var(--hairline);
}

.stat-item {
    text-align: left;
}

.stat-number {
    font-family: 'Poppins', sans-serif;
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* Stats keep light treatment inside dark sections */

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-image-wrapper {
    position: relative;
    display: inline-block;
    animation: heroFloat 7s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.hero-main-image {
    width: 100%;
    max-width: 700px;
    height: auto;
    border-radius: var(--r-card-lg);
    box-shadow: 0 30px 70px rgba(16, 37, 66, 0.18);
    display: block;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
}

/* Subtle hover lift, mirroring the product-showcase hover */
.hero-image-wrapper:hover .hero-main-image {
    transform: scale(1.015);
    box-shadow: 0 42px 90px rgba(16, 37, 66, 0.24);
}

@media (prefers-reduced-motion: reduce) {
    .hero-image-wrapper { animation: none; }
    .hero-main-image { transition: none; }
}

/* Navy card floating on the light canvas */

/* ============================================================
   HERO — Hands holding laptop mockup (replaces hero-logo card)
   ============================================================ */

/* Showcase hands — realistic, larger, presenting the device */

/* Subtle lift on hover for the showcase presentation effect */

/* Floating "Allt ingår!"-style badge */

.dashboard-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
    margin-left: auto;
}

/* Trust Section */
.trust-section {
    padding: 4rem 0;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
    border-top: 1px solid var(--hairline);
}

.trust-content {
    text-align: center;
}

.trust-label {
    color: var(--gray-600);
    margin-bottom: 2.5rem;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.trust-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.trust-logo {
    color: var(--gray-500);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    transition: color 0.3s var(--ease), transform 0.3s var(--ease);
    padding: 0.75rem 1.25rem;
    background: var(--surface);
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
}

.trust-logo:hover {
    color: var(--ink);
    transform: translateY(-2px);
    border-color: rgba(16, 37, 66, 0.15);
}

/* Features Section */
.features {
    padding: var(--section-y) 0;
    background: var(--surface);
}

.section-header {
    text-align: center;
    margin-bottom: clamp(4rem, 7vw, 6rem);
    /* Display headings need room to settle on two lines; 720px forced most
       of them onto three. The subtitle keeps its own narrower measure. */
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: var(--display-2);
    color: var(--ink);
    margin-bottom: 1.25rem;
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--gray-600);
    line-height: 1.65;
    text-wrap: pretty;
    max-width: 44rem;
    margin-inline: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.feature-card {
    background: var(--surface);
    padding: 2.5rem;
    border-radius: var(--r-card-lg);
    border: 1px solid var(--hairline);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
                border-color 0.4s var(--ease);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(16, 37, 66, 0.08);
    border-color: var(--cool-mist-blue);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(7, 170, 89, 0.12) 0%, rgba(135, 217, 159, 0.2) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.feature-icon svg {
    width: 26px;
    height: 26px;
    color: var(--green-text);
}



.feature-title {
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.625rem;
    text-wrap: balance;
}

.feature-description {
    color: var(--gray-600);
    line-height: 1.65;
}

/* CTA Section */
/* CTA as an inset rounded navy card on the canvas */
.cta-section {
    padding: var(--section-y) 0;
    background: var(--canvas);
    color: var(--white);
}

.cta-content {
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    background: var(--midnight-navy);
    border-radius: var(--r-card-lg);
    padding: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
}

.cta-content > * { position: relative; z-index: 1; }

/* Light-theme variant for the CTA card (e.g. book page bottom banner) */
.cta-content-light {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--hairline);
    box-shadow: 0 20px 48px rgba(16, 37, 66, 0.08);
}

.cta-content-light .cta-subtitle {
    color: var(--gray-600);
}

.cta-title {
    font-size: var(--display-2);
    margin-bottom: 1.25rem;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
}

.cta-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    max-width: 54ch;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    background: var(--midnight-navy);
    color: rgba(255, 255, 255, 0.6);
    padding: clamp(4rem, 7vw, 6rem) 0 2rem;
}

.footer .footer-link {
    color: rgba(255, 255, 255, 0.6);
}

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

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-heading {
    letter-spacing: 0.02em;
    color: var(--white);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-link {
    color: var(--gray-400);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
    padding-top: 2rem;
}

.footer-bottom {
    padding-top: 1.25rem;
    /* No divider rule. The footer is midnight navy in both themes, but
       --gray-800 flips: it resolves to --midnight-navy in light (invisible
       against the footer) and #EAF1F8 in dark (near-white on navy). The line
       was therefore never the quiet separator it was meant to be. */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-links {
    display: flex;
    /* Wraps at every width, not just on phones: five text links plus two
       icons no longer fit beside the copyright on a portrait tablet. The
       2rem column gap is preserved for the desktop case where it does. */
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: center;
}

.footer-link-icon {
    display: inline-flex;
    align-items: center;
}

/* Responsive Design */
/* The desktop navbar needs ~1220px to lay out (logo + five dropdowns + theme
   toggle + the Get started button). Below that it overflowed the page instead
   of collapsing, so the nav switches to the hamburger here — well above the
   768px phone breakpoint the rest of the layout uses. */
@media (max-width: 1239.98px) {
    .nav-menu {
        display: none;
    }

    .nav-actions {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }
}

/* The bottom row carries five text links plus the copyright. Below roughly a
   laptop width they stop fitting on one line, and wrapping them in place
   leaves a ragged orphan. Stack and centre the whole row instead. */
@media (max-width: 1023.98px) {
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-bottom-links {
        justify-content: center;
        gap: 0.75rem 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .hero {
        padding: 3rem 0 4rem;
        min-height: auto;
    }

    .hero-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: left;
    }

    .hero-content {
        max-width: 100%;
        order: 1;
    }

    .hero-visual {
        order: 2;
    }

    /* Badge tucks in rather than hanging off the edge on small screens */
    .hero-subtitle {
        font-size: 1.0625rem;
        max-width: 100%;
    }

    .hero-stats {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .feature-card { padding: 2rem; }

    .cta-content { padding: 3rem 1.5rem; }

    /* Blobs are decoration — keep them from causing overflow */
    .hero-blob, .hero-blob-2 { opacity: 0.6; }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
    
    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .stat-number {
        font-size: 2.25rem;
    }

    .hero-logo-image {
        width: 120px;
        margin-bottom: 1.5rem;
    }

    .hero-logo-text {
        font-size: 2rem;
    }

    .hero-tagline {
        font-size: 1rem;
    }

    .hero-hands-composition {
        max-width: 420px;
    }

    .hand {
        width: 110px;
        height: 100px;
    }

    .hand-left { left: -22px; }
    .hand-right { right: -22px; }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .trust-logos {
        gap: 1.5rem;
    }
    
    .cta-actions {
        flex-direction: column;
        width: 100%;
        padding: 0 1rem;
    }
    
    .cta-actions .btn {
        width: 100%;
    }
    
    .footer-social {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* The links row must wrap too — otherwise its fixed 2rem gaps make it
       wider than a phone viewport and cause horizontal scrolling. */
    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 1.25rem;
    }
}

/* Page Hero Styles */
/* Light, airy page hero to match the home hero */
.page-hero {
    padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
    background: var(--canvas);
    color: var(--ink);
    text-align: center;
    position: relative;
    overflow: hidden;
}

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

.page-hero::after {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    right: -160px;
    top: -220px;
    border-radius: 42% 58% 63% 37% / 47% 41% 59% 53%;
    background: radial-gradient(circle at 35% 35%,
                rgba(142, 175, 219, 0.28),
                rgba(142, 175, 219, 0) 70%);
    pointer-events: none;
}

.page-hero-content {
    max-width: 820px;
    margin: 0 auto;
}

/* Explicit section spacing variants — preferred over fragile sibling selectors */
.section {
    padding: var(--section-y) 0;
}

.section-alt {
    padding: var(--section-y) 0;
    background: var(--surface);
}

.section-compact {
    padding-top: clamp(2.5rem, 4vw, 4rem) !important;
}

/* Legacy: page hero supplies breathing room for the immediately following section.
   If an element is ever inserted between the hero and the first section,
   add .section-compact to that section instead. */
.page-hero + section {
    padding-top: clamp(2.5rem, 4vw, 4rem);
}

.page-hero-title {
    font-size: var(--display-2);
    margin-bottom: 1.5rem;
}

.page-hero-subtitle {
    font-size: 1.1875rem;
    color: var(--gray-600);
    line-height: 1.65;
    max-width: 60ch;
    margin: 0 auto;
    text-wrap: pretty;
}

/* Active Navigation Link */
.nav-link.active {
    color: var(--green-text);
    font-weight: 600;
}

/* Features Overview */
.features-overview {
    padding: var(--section-y) 0;
}

/* Product showcase (features page platform screenshot) */
.product-showcase {
    padding-top: clamp(2rem, 4vw, 3rem);
}

.product-showcase-visual {
    max-width: 1040px;
    margin: 0 auto;
}

.product-showcase-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-card-lg);
    box-shadow: 0 30px 70px rgba(16, 37, 66, 0.18),
                0 8px 20px rgba(16, 37, 66, 0.08);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Hover: gentle lift and a hint of emerald glow, matching the card hovers */
.product-showcase-visual:hover .product-showcase-image {
    transform: translateY(-6px);
    box-shadow: 0 44px 90px rgba(16, 37, 66, 0.24),
                0 12px 36px rgba(7, 170, 89, 0.16);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.feature-list li {
    padding: 0.5rem 0;
    color: var(--gray-600);
    position: relative;
    padding-left: 1.5rem;
}

.feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green-text);
    font-weight: bold;
}

/* Compliance Frameworks */
.compliance-frameworks {
    padding: var(--section-y) 0;
    background: var(--canvas-warm);
}

.frameworks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.framework-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--r-card);
    border: 1px solid var(--gray-200);
}

.framework-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.framework-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
}

.framework-badge {
    background: var(--green-text);
    color: var(--white);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.framework-description {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.framework-details h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.framework-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.framework-list li {
    padding: 0.5rem 0;
    color: var(--gray-600);
    position: relative;
    padding-left: 1.5rem;
}

.framework-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--green-text);
    font-weight: bold;
}

.framework-timeline {
    background: rgba(7, 170, 89, 0.1);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid var(--fresh-emerald-green);
    color: var(--ink);
    font-size: 0.875rem;
}

/* Process Steps */

/* Pricing Plans */
.pricing-plans {
    padding: var(--section-y) 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--r-card);
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    border-color: var(--green-text);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pricing-card.featured {
    border-color: var(--green-text);
    transform: scale(1.05);
}

.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fresh-emerald-green);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.plan-header {
    text-align: center;
    margin-bottom: 2rem;
}

.plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
}

.plan-price {
    margin-bottom: 1rem;
}

.price-amount {
    font-size: 3rem;
    font-weight: 700;
    color: var(--ink);
}

.price-period {
    color: var(--gray-600);
    font-size: 1rem;
}

.plan-description {
    color: var(--gray-600);
    line-height: 1.6;
}

.plan-features h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.features-list li {
    padding: 0.75rem 0;
    color: var(--gray-600);
    position: relative;
    padding-left: 1.5rem;
    border-bottom: 1px solid var(--gray-100);
}

.features-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green-text);
    font-weight: bold;
}

.features-list li:last-child {
    border-bottom: none;
}

.plan-action {
    text-align: center;
}

/* Add-ons */
.pricing-addons {
    padding: var(--section-y) 0;
    background: var(--canvas-warm);
}

.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.addon-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--r-card);
    text-align: center;
    border: 1px solid var(--gray-200);
}

.addon-icon {
    width: 60px;
    height: 60px;
    background: rgba(7, 170, 89, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.addon-icon svg {
    width: 30px;
    height: 30px;
    color: var(--green-text);
}

.addon-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
}

.addon-description {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.addon-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-text);
}

/* FAQ */
.pricing-faq, .contact-faq {
    padding: var(--section-y) 0;
}

.faq-grid {
    display: grid;
    /* min() keeps the 400px floor from overflowing narrow viewports */
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 2rem;
}

.faq-item {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--r-card);
    border: 1px solid var(--gray-200);
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
    text-wrap: balance;
}

.faq-answer {
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* About page styles */
.about-mission {
    padding: var(--section-y) 0;
}

.mission-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.mission-content--single {
    grid-template-columns: 1fr;
    max-width: 720px;
}

.mission-description {
    color: var(--gray-600);
    line-height: 1.8;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.mission-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-values {
    padding: var(--section-y) 0;
    background: var(--canvas-warm);
}

.values-grid {
    display: grid;
    /* min() keeps the 300px floor from overflowing 320px viewports
       (WCAG 1.4.10 reflow) — cards simply go full-width there */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

/* Four-card grids (the framework and partner-benefit sets) would otherwise
   wrap 3 + 1 and leave an orphan under a card-sized hole. A lower floor lets
   all four share one row; min() keeps the 1.4.10 reflow guard intact. */
.values-grid.is-four {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.value-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--r-card);
    border: 1px solid var(--hairline);
    text-align: center;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
                border-color 0.4s var(--ease);
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(16, 37, 66, 0.08);
    border-color: var(--cool-mist-blue);
}

.value-card--book {
    background: var(--white);
    border-color: rgba(7, 170, 89, 0.2);
}

.value-card--book:hover {
    border-color: var(--fresh-emerald-green);
}

.value-card--book .value-description a {
    color: var(--green-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.value-card--book .value-description a:hover {
    text-decoration: underline;
}

.value-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(7, 170, 89, 0.12) 0%, rgba(135, 217, 159, 0.2) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.value-icon svg {
    width: 26px;
    height: 26px;
    color: var(--green-text);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.value-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
}

.value-description {
    color: var(--gray-600);
    line-height: 1.6;
}

/* Stack the two-column mission layout on phones — otherwise the stat
   column's min-content (long words like "Accelerated") forces the grid
   wider than the viewport and the page scrolls sideways */
@media (max-width: 767.98px) {
    .mission-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.about-team {
    padding: var(--section-y) 0;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-member {
    text-align: center;
}

.member-photo {
    margin-bottom: 1.5rem;
}

/* Enterprise CEO headshot — circular, crisp, subtle shadow */
.member-photo-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(16, 37, 66, 0.14);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.team-member:hover .member-photo-img {
    transform: scale(1.04);
    box-shadow: 0 8px 28px rgba(16, 37, 66, 0.18);
}

.placeholder-photo {
    width: 120px;
    height: 120px;
    background: var(--cool-sky-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
}

.member-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.member-title {
    color: var(--green-text);
    font-weight: 600;
    margin-bottom: 1rem;
}

.member-bio {
    color: var(--gray-600);
    line-height: 1.6;
}

.about-info {
    padding: 3rem 0;
    background: var(--canvas-warm);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.info-card {
    text-align: center;
}

.info-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.info-detail {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}

.careers-cta {
    padding: var(--section-y) 0;
    background: var(--midnight-navy);
    color: var(--white);
    text-align: center;
}

/* Contact page styles */
.contact-options {
    padding: var(--section-y) 0;
}

.contact-grid {
    display: grid;
    /* min() keeps the 300px floor from overflowing 320px viewports */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
}

.contact-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--r-card);
    text-align: center;
    border: 1px solid var(--gray-200);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: rgba(7, 170, 89, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.contact-icon svg {
    width: 30px;
    height: 30px;
    color: var(--green-text);
}

.contact-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
    text-wrap: balance;
}

.contact-description {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.contact-action {
    color: var(--green-text);
    text-decoration: none;
    font-weight: 600;
}

.contact-action:hover {
    text-decoration: underline;
}

/* Contact Form */
.contact-form-section {
    padding: var(--section-y) 0;
    background: var(--canvas-warm);
}

.contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 3rem;
    border-radius: var(--r-card);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-header {
    text-align: center;
    margin-bottom: 3rem;
}

.form-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
    text-wrap: balance;
}

.form-subtitle {
    color: var(--gray-600);
    line-height: 1.6;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-label {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.form-input, .form-select, .form-textarea {
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: var(--white);
    color: var(--ink);
}

.form-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23102542' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.75rem;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--green-text);
}

.form-error {
    display: none;
    color: #C53030;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.form-group.has-error .form-error {
    display: block;
}

.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
    border-color: #C53030;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--gray-600);
    line-height: 1.5;
}

/* The label text is one flex item, so inline links and "(optional)" stay
   part of the sentence instead of becoming separate, gap-spaced items */
.checkbox-text {
    flex: 1 1 auto;
    min-width: 0;
}

.signup-checkbox-label {
    font-size: 0.8125rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.5rem;
}

.signup-checkbox-label a {
    white-space: nowrap;
}

/* Mobile forms: stack two-column rows, let the GDPR consent label wrap
   (nowrap would force the whole line wider than the screen), and trim
   the form card padding on narrow viewports */
@media (max-width: 767.98px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .signup-checkbox-label {
        flex-wrap: wrap;
        white-space: normal;
        align-items: flex-start;
    }

    .signup-checkbox-label a {
        white-space: normal;
    }

    /* Consent labels: let the policy link drop to its own line — as an
       unbreakable flex item ("integritetspolicyn") it otherwise overflows */
    .checkbox-label {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .contact-form-wrapper {
        padding: 2rem 1.5rem;
    }
}

.checkbox-input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
}

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.btn-full {
    width: 100%;
}

/* Office Info */
.office-info {
    padding: var(--section-y) 0;
}

.office-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.office-card {
    text-align: center;
    padding: 2rem;
}

.office-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
}

.office-details p {
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.office-details a {
    color: var(--green-text);
    text-decoration: none;
    font-weight: 500;
}

.office-details a:hover {
    text-decoration: underline;
}

/* Login page styles */
.login-section {
    min-height: 80vh;
    padding: var(--section-y) 0;
    display: flex;
    align-items: center;
}

/* Signup side panel (classes instead of inline styles). Two classes: the
   bare .login-visual rule later in this file sets text-align: center, so
   this selector must outrank it — otherwise the panel copy renders centered
   and wrapped list items indent unevenly next to their check icons. */
.login-visual.signup-visual {
    order: 1;
    text-align: left;
}

.signup-visual .visual-content {
    max-width: 480px;
    margin: 0;
}

.signup-visual .visual-title {
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
}

.signup-visual .visual-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.signup-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.signup-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.5;
}

.signup-form-order {
    order: 2;
}

/* Honeypot field — visually hidden but present in the DOM */
.form-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.login-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.login-form-container {
    max-width: 400px;
    margin: 0 auto;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--gray-600);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-visual {
    background: var(--midnight-navy);
    color: var(--white);
    padding: 3rem;
    border-radius: var(--r-card);
    text-align: center;
}

.visual-content {
    max-width: 400px;
    margin: 0 auto;
}

.visual-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.visual-description {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Mobile signup: stack the two-column layout — form (with the h1) first,
   marketing panel below — and shrink the panel's title/padding so nothing
   exceeds narrow viewports */
@media (max-width: 767.98px) {
    .login-wrapper {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .signup-form-order { order: 1; }
    .signup-visual { order: 2; }

    .signup-visual .visual-title {
        font-size: 1.75rem;
    }

    .login-visual {
        padding: 2rem;
    }
}

/* ===== grc.compeas.com and auditor.compeas.com — login and relay pages ===== */
/* Rendered by functions/_product-login.js. No site nav or footer: a product's
   login page is the logo, EN/SV and one card, with the theme following the OS
   (product-login.js) since the page carries no theme toggle. */
.product-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
}

.product-login-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.product-login main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
}

.product-login-section {
    width: 100%;
    padding: clamp(1.5rem, 7vh, 5rem) 0;
}

.product-login-card {
    max-width: 440px;
    margin: 0 auto;
    padding: 2.5rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    box-shadow: 0 10px 30px rgba(16, 37, 66, 0.08);
}

.product-login-card .login-title {
    font-size: 1.75rem;
    text-wrap: balance;
}

.product-login-card .login-subtitle {
    text-wrap: pretty;
}

.product-login-card .form-error {
    line-height: 1.5;
}

/* Form controls do not inherit the page font by default */
.product-login button,
.product-login input {
    font-family: inherit;
}

.product-login-second-language {
    margin: 2rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--hairline);
}

.product-login-hint {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--gray-600);
}

.product-login .form-error a,
.product-login-hint a,
.product-login-footer a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.product-login-footer {
    padding: 1.5rem 0 2rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--gray-500);
}

@media (max-width: 767.98px) {
    .product-login-card {
        padding: 2rem 1.25rem;
    }

    .product-login-card .login-title {
        font-size: 1.5rem;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll-triggered reveals (Intersection Observer in script.js) */
.js-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.4s var(--ease);
}

.js-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays once the parent grid enters the viewport */
.js-reveal.is-visible:nth-child(1) { transition-delay: 0.08s; }
.js-reveal.is-visible:nth-child(2) { transition-delay: 0.16s; }
.js-reveal.is-visible:nth-child(3) { transition-delay: 0.24s; }
.js-reveal.is-visible:nth-child(4) { transition-delay: 0.32s; }
.js-reveal.is-visible:nth-child(5) { transition-delay: 0.40s; }
.js-reveal.is-visible:nth-child(6) { transition-delay: 0.48s; }
.js-reveal.is-visible:nth-child(7) { transition-delay: 0.56s; }
.js-reveal.is-visible:nth-child(8) { transition-delay: 0.64s; }

/* ===== Accessibility ===== */

/* Removed from view, kept for screen readers and heading structure. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip-to-content link — hidden until focused */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1100;
    background: var(--midnight-navy);
    color: var(--white);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 12px 12px;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s var(--ease);
}

.skip-link:focus-visible {
    top: 0;
    color: var(--white);
}

/* Clear keyboard focus for every interactive element */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--green-text);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Anchor targets must clear the fixed navbar */
[id] {
    scroll-margin-top: 110px;
}

/* The hamburger is a <button> — strip its default chrome */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0.5rem;
}

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

/* ===== Mobile menu open state (lives here, not in script.js) ===== */
@media (max-width: 1239.98px) {
    /* Must come after the unscoped ".mobile-menu-toggle { display: none }"
       above — same specificity, later rule wins, so the hamburger is only
       visible inside the mobile breakpoint. */
    .mobile-menu-toggle {
        display: flex;
    }

    /* The wrapper wraps so the open menu, language switcher and actions
       stack as full-width rows inside the sticky navbar — no absolute
       positioning, so the panels can never overlap. */
    .navbar .nav-wrapper {
        flex-wrap: wrap;
        row-gap: 0;
        column-gap: 0.75rem;
    }

    /* Get started stays visible in the header, right next to the hamburger
       (.btn.nav-cta = two classes, outranks the later bare .btn rule) */
    .btn.nav-cta {
        margin-left: auto;
        padding: 0.5rem 0.9rem;
        font-size: 0.875rem;
    }

    /* Slightly smaller wordmark so logo + CTA + hamburger fit one row */
    .logo-text {
        font-size: 1.3rem;
    }

    .nav-menu.active,
    .nav-actions.active {
        display: flex;
        position: static;
        flex-basis: 100%;
        flex-direction: column;
        padding: 0.5rem 0 1rem;
        background: transparent;
        box-shadow: none;
        z-index: 100;
    }

    .nav-menu.active {
        order: 10;
    }

    /* Theme toggle shares the EN/SV row (same order, next in DOM order) and
       sits at the row's right edge — flex-basis: auto undoes the 100% basis
       from the shared ".nav-menu.active, .nav-actions.active" rule above */
    .nav-actions.active {
        order: 11;
        flex-basis: auto;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem 0;
        border-top: 1px solid var(--hairline);
    }

    .nav-item {
        width: 100%;
    }

    .nav-item > .nav-link::after {
        margin-left: auto;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0 0 0 0.75rem;
        min-width: auto;
        background: transparent;
        /* Collapsed by default — tapping the parent link toggles
           .dropdown-open (script.js), turning the menu into an accordion */
        display: none;
    }

    .nav-item.dropdown-open .dropdown-menu {
        display: block;
    }

    /* Chevron points up while the section is expanded */
    .nav-item.dropdown-open > .nav-link::after {
        transform: rotate(-135deg);
        margin-top: 4px;
        opacity: 1;
    }

    .dropdown-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Hamburger → X: bars are 2px tall with 4px gaps, so their centers sit
       at 1/7/13px — shifting the outer bars by exactly ±6px centres them on
       the button's middle line before rotating, giving a symmetric X */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* EN/SV only appears inside the open menu (never in the collapsed
       header) — the sibling selector reveals it when .nav-menu is active.
       (.navbar prefix: the unscoped .lang-switcher rule lives near the end
       of this file and would otherwise win on source order.)
       flex: 1 1 auto lets the row absorb the free space so the theme toggle
       (same order, next in DOM) is pinned to the right edge of the same row. */
    .navbar .lang-switcher {
        display: none;
        order: 11;
        flex: 1 1 auto;
        padding: 0.75rem 0;
        border-top: 1px solid var(--hairline);
        justify-content: flex-start;
    }

    .nav-menu.active ~ .lang-switcher {
        display: flex;
    }
}

/* Very small screens (<360px): drop the wordmark and keep just the logo
   mark, so logo + Get started + hamburger all fit in the header */
@media (max-width: 359.98px) {
    .logo-text {
        display: none;
    }
}

/* ===== Cookie consent banner ===== */
.cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 1000;
    width: min(680px, calc(100% - 2rem));
    background: var(--midnight-navy);
    color: var(--white);
    border-radius: var(--r-card);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 20px 50px rgba(16, 37, 66, 0.35);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.cookie-banner-text {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.cookie-banner-text a {
    color: var(--minty-fresh-green);
}

.cookie-banner-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-banner-actions button {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}

.cookie-accept {
    background: var(--fresh-emerald-green);
    color: var(--white);
    border: 0;
}

.cookie-accept:hover {
    filter: brightness(1.1);
}

/* Decline is styled with equal visual weight to Accept (EDPB symmetry) */
.cookie-decline {
    background: var(--white);
    color: var(--midnight-navy);
    border: 0;
}

.cookie-decline:hover {
    filter: brightness(0.94);
}

@media (max-width: 640px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .cookie-banner-actions {
        justify-content: center;
    }
}

/* ===== Legal pages (privacy / terms) ===== */
.legal-section {
    padding-bottom: var(--section-y);
}

.legal-content {
    max-width: 760px;
    margin: 0 auto;
}

/* Wider variant for table-heavy documents (subprocessors etc.) */
.legal-content-wide {
    max-width: 900px;
}

.legal-content h2 {
    font-size: 1.5rem;
    color: var(--ink);
    margin: 2.5rem 0 1rem;
}

.legal-content h3 {
    font-size: 1.125rem;
    color: var(--ink);
    margin: 1.5rem 0 0.75rem;
}

.legal-content p,
.legal-content ul {
    color: var(--gray-600);
    margin-bottom: 1rem;
    line-height: 1.7;
}

.legal-content ul {
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: var(--green-text);
}

.legal-updated {
    color: var(--gray-500);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/* Tables inside legal documents (cookie list, retention schedule, subprocessors) */
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.75rem;
    font-size: 0.95rem;
}

.legal-table th {
    text-align: left;
    color: var(--ink);
    font-weight: 600;
    padding: 0.65rem 0.9rem;
    border-bottom: 2px solid var(--hairline);
}

.legal-table td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--hairline);
    color: var(--gray-600);
    vertical-align: top;
}

/* Comparison tables carry more columns than the legal ones and must not push
   the page sideways on a phone; the note under them is a provenance line, so
   it reads quieter than body copy. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-note {
    font-size: 0.85rem;
    color: var(--gray-500);
    line-height: 1.6;
    margin-top: -0.75rem;
}

.legal-table code {
    font-size: 0.85em;
    background: var(--canvas);
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
}

/* Fixed-layout variant (subprocessors): shared column widths keep the tables
   in every section aligned with each other */
.legal-table-fixed {
    table-layout: fixed;
}

.legal-table-fixed .col-vendor {
    width: 24%;
}

.legal-table-fixed .col-purpose {
    width: 44%;
}

.legal-table-fixed .col-location {
    width: 32%;
}

.legal-table-fixed th,
.legal-table-fixed td {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ===== Security page ===== */
.security-status {
    padding-bottom: var(--section-y);
}

/* Compliance roadmap status badges */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.status-badge-active {
    background: rgba(7, 170, 89, 0.14);
    color: var(--green-text);
}

.status-badge-roadmap {
    background: rgba(142, 175, 219, 0.25);
    color: var(--ink);
}

/* Whitepaper showcase card — cover image + download info */
.whitepaper-showcase {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem;
}

.whitepaper-showcase-image {
    display: block;
    position: relative;
    border-radius: var(--r-card);
    overflow: hidden;
    /* Multi-layer shadow for realistic depth */
    box-shadow:
        0 2px 4px rgba(16, 37, 66, 0.06),
        0 12px 24px rgba(16, 37, 66, 0.10),
        0 32px 64px rgba(16, 37, 66, 0.14);
    transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
    line-height: 0;
    /* Straight when idle */
    transform: translateY(0);
}

.whitepaper-showcase-image:hover {
    /* Lift up and tilt slightly toward the viewer (upwards) */
    transform: perspective(1200px) rotateX(-4deg) translateY(-8px);
    box-shadow:
        0 6px 12px rgba(16, 37, 66, 0.08),
        0 20px 40px rgba(16, 37, 66, 0.14),
        0 48px 96px rgba(16, 37, 66, 0.20);
}

.whitepaper-showcover {
    width: 100%;
    height: auto;
    display: block;
}

/* Page-edge effect — subtle left-side highlight simulating paper thickness */
.whitepaper-showcase-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
}

.whitepaper-showcase-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.whitepaper-showcase-content .security-status-title {
    font-size: 1.5rem;
    margin-bottom: 0;
    text-wrap: balance;
}

.whitepaper-showcase-content .security-status-description {
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .whitepaper-showcase {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .whitepaper-showcase-image {
        max-width: 280px;
        margin: 0 auto;
        /* Keep straight on small screens; simpler shadows for performance */
        transform: none;
        box-shadow:
            0 2px 4px rgba(16, 37, 66, 0.06),
            0 12px 24px rgba(16, 37, 66, 0.10),
            0 24px 48px rgba(16, 37, 66, 0.12);
    }
    .whitepaper-showcase-image:hover {
        transform: translateY(-4px);
    }
    .whitepaper-showcase-content .cta-actions {
        justify-content: center;
    }
}

/* Dark mode: subtle border so the light cover stands out on dark canvas */
[data-theme="dark"] .whitepaper-showcase-image {
    border: 1px solid var(--hairline);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.20),
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 32px 64px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .whitepaper-showcase-image:hover {
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.25),
        0 20px 40px rgba(0, 0, 0, 0.30),
        0 48px 96px rgba(0, 0, 0, 0.35);
}

/* ===== Book page ===== */
.book-showcase {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.5rem;
    padding: 3rem;
}

.book-showcase .whitepaper-showcase-image {
    max-width: 420px;
    margin: 0 auto;
}

.book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.book-meta-item {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--green-text);
    background: rgba(7, 170, 89, 0.10);
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.book-cta-actions {
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .book-showcase {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    .book-showcase .whitepaper-showcase-image {
        max-width: 260px;
    }
}

/* Book page — inside pages preview gallery */
.book-pages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.book-page-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s var(--ease);
}

.book-page-card:hover {
    transform: translateY(-4px);
}

.book-page-frame {
    display: block;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(16, 37, 66, 0.06),
        0 8px 16px rgba(16, 37, 66, 0.08),
        0 16px 32px rgba(16, 37, 66, 0.10);
    transition: box-shadow 0.35s var(--ease);
    line-height: 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.book-page-card:hover .book-page-frame {
    box-shadow:
        0 4px 8px rgba(16, 37, 66, 0.08),
        0 12px 24px rgba(16, 37, 66, 0.12),
        0 24px 48px rgba(16, 37, 66, 0.16);
}

.book-page-image {
    width: 100%;
    height: auto;
    display: block;
}

.book-page-caption {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
}

@media (max-width: 640px) {
    .book-pages-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 360px;
    }
}

[data-theme="dark"] .book-page-frame {
    border: 1px solid var(--hairline);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.20),
        0 16px 32px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .book-page-card:hover .book-page-frame {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.20),
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 24px 48px rgba(0, 0, 0, 0.30);
}

/* Book page — author section */
.book-author {
    padding: var(--section-y) 0;
}

.book-author-content {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2.5rem;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
}

.book-author-photo {
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(16, 37, 66, 0.06),
        0 8px 16px rgba(16, 37, 66, 0.08),
        0 16px 32px rgba(16, 37, 66, 0.10);
    line-height: 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
    aspect-ratio: 1;
}

.book-author-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.book-author-bio .author-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.25rem;
    text-wrap: balance;
}

.book-author-bio .author-role {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--green-text);
    margin-bottom: 1rem;
    display: block;
}

.book-author-bio p {
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.book-author-bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .book-author-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .book-author-photo {
        max-width: 180px;
        margin: 0 auto;
    }
}

/* Book page — audience section */
.book-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.book-audience-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.book-audience-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 4px 8px rgba(16, 37, 66, 0.06),
        0 12px 24px rgba(16, 37, 66, 0.10),
        0 24px 48px rgba(16, 37, 66, 0.12);
}

.book-audience-icon {
    width: 48px;
    height: 48px;
    color: var(--green-text);
    margin: 0 auto 1rem;
}

.book-audience-icon svg {
    width: 100%;
    height: 100%;
}

.book-audience-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.5rem;
    text-wrap: balance;
}

.book-audience-description {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.6;
    text-wrap: pretty;
}

@media (max-width: 900px) {
    .book-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .book-audience-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Book page — contents section */
.book-contents-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}

.book-contents-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 1.25rem 1.5rem;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.book-contents-item:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 8px rgba(16, 37, 66, 0.06),
        0 12px 24px rgba(16, 37, 66, 0.10);
}

.book-contents-number {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fresh-emerald-green);
    line-height: 1;
    flex-shrink: 0;
    min-width: 2rem;
    text-align: center;
}

.book-contents-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.book-contents-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    text-wrap: balance;
}

.book-contents-desc {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.5;
    text-wrap: pretty;
}

@media (max-width: 640px) {
    .book-contents-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark mode overrides for new book sections */
[data-theme="dark"] .book-author-photo {
    border: 1px solid var(--hairline);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.20),
        0 16px 32px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .book-audience-card {
    background: var(--surface);
    border-color: var(--hairline);
}

[data-theme="dark"] .book-audience-card:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.20),
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 24px 48px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .book-contents-item {
    background: var(--surface);
    border-color: var(--hairline);
}

[data-theme="dark"] .book-contents-item:hover {
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.20),
        0 12px 24px rgba(0, 0, 0, 0.25);
}

/* 404 page */
.nav-actions-static {
    display: flex !important;
}

/* ===== Print ===== */
@media print {
    .navbar,
    .cookie-banner,
    .skip-link,
    .hero-actions,
    .cta-actions,
    .footer-bottom-links,
    .footer-social,
    .blob {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .cta-section,
    .page-hero,
    .hero {
        padding: 1.5rem 0 !important;
        background: #fff !important;
    }

    .section-title,
    .cta-title,
    .page-hero-title,
    .footer-heading {
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444;
    }

    .feature-card,
    .security-status-card,
    .step-card {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
    }
}

.error-hero .page-hero-content {
    text-align: center;
    margin: 0 auto;
}

.error-hero .cta-actions {
    justify-content: center;
    margin-top: 2rem;
}

/* Trust resources link strip */
.trust-resources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    padding-bottom: var(--section-y);
}

.trust-resources a {
    color: var(--green-text);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
}

.trust-resources a:hover {
    border-bottom-color: currentColor;
}

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

.security-status-card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 2rem;
}

.security-status-title {
    color: var(--ink);
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.security-status-description {
    color: var(--gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.security-status-description a {
    color: var(--green-text);
}

.security-disclosure {
    padding-bottom: var(--section-y);
}

.security-disclosure-card {
    background: var(--canvas-warm);
    border-radius: var(--r-card-lg);
    padding: 3rem;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.security-disclosure-card .section-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.security-disclosure-card p {
    color: var(--gray-600);
    line-height: 1.7;
}

.security-disclosure-card a {
    color: var(--green-text);
    font-weight: 600;
}

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

/* ===== Blog ===== */
.blog-card {
    position: relative;
}

.blog-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green-text);
    background: rgba(7, 170, 89, 0.1);
    border-radius: var(--r-pill);
    padding: 0.3rem 0.85rem;
    margin-bottom: 1rem;
}

/* ===== Newsroom ===== */

/* Roomier grid for the listing (fewer, bigger cards) */
.newsroom-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
}

/* Linked card (published article) */
.blog-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Visual card header — navy block with editorial series number for guides;
   swap in an <img> for news/press photos */
.blog-card-visual {
    height: 176px;
    border-radius: var(--r-card);
    margin-bottom: 1.75rem;
    background: var(--midnight-navy);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem 1.75rem;
    overflow: hidden;
}

.blog-card-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--frost-white);
}

.blog-card-number-dot {
    color: var(--fresh-emerald-green);
}

.blog-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cards carrying real artwork: the numeral placeholder needed the inner
   padding to sit bottom-left, an edge-to-edge image does not. */
.blog-card-visual.has-art {
    padding: 0;
    display: block;
}

.blog-card-visual.has-art picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Featured (first) card: full-width with taller visual on desktop */
@media (min-width: 900px) {
    .newsroom-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .newsroom-grid > .blog-card-link:first-child {
        grid-column: 1 / -1;
    }

    .newsroom-grid > .blog-card-link:first-child .blog-card-visual {
        height: 300px;
    }

    .newsroom-grid > .blog-card-link:first-child .blog-card-number {
        font-size: 4.5rem;
    }
}

/* Dark mode: the brand-navy block is nearly identical to the dark card
   surface — lift it with a lighter navy gradient and a hairline border */
[data-theme="dark"] .blog-card-visual {
    background: linear-gradient(135deg, #1e3a61 0%, #17304f 100%);
    border: 1px solid var(--hairline);
}

[data-theme="dark"] .blog-badge {
    background: rgba(135, 217, 159, 0.16);
    color: var(--green-text);
}

.blog-card-link .feature-title {
    color: var(--ink);
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.blog-card-meta .blog-badge {
    margin-bottom: 0;
}

.blog-card-date {
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.blog-card-more {
    margin-top: auto;
    padding-top: 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--green-text);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-card-link:hover .blog-card-more {
    text-decoration: underline;
}

/* Article pages */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--gray-600);
}

.article-meta .article-author {
    color: var(--ink);
    font-weight: 600;
}

.article-meta .article-meta-sep {
    color: var(--hairline-strong, var(--gray-600));
}

.article-body {
    max-width: 68ch;
    margin: 0 auto;
    padding-bottom: var(--section-y);
}

.article-body h2 {
    font-size: 1.5rem;
    margin: 2.75rem 0 1rem;
}

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

.article-body p {
    margin-bottom: 1.25rem;
}

.article-body ul,
.article-body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.article-body li {
    margin-bottom: 0.5rem;
}

.article-body strong {
    font-weight: 600;
}

/* In-article callout (e.g. book cross-reference) */
.article-callout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-lg);
    padding: 2rem 2.5rem;
    margin: 2.75rem 0;
}

.article-callout p {
    margin-bottom: 0;
}

.article-callout .cta-actions {
    margin-top: 0.25rem;
}

/* Back link above the article */
.article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--green-text);
    text-decoration: none;
}

.article-back:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .article-callout {
        padding: 1.5rem;
    }
}

/* Thank-you page: centered callout */
.thanks-callout {
    text-align: center;
    align-items: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.thanks-callout .book-meta {
    justify-content: center;
}

/* ===== How it Works (Wint-inspired) ===== */
.how-it-works {
    padding: var(--section-y) 0;
    background: var(--canvas);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.step-card {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--surface);
    border-radius: var(--r-card-lg);
    border: 1px solid var(--hairline);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
                border-color 0.4s var(--ease);
}

.step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(16, 37, 66, 0.08);
    border-color: var(--cool-mist-blue);
}

.step-number {
    width: 56px;
    height: 56px;
    background: var(--minty-fresh-green);
    color: var(--midnight-navy);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-family: 'Poppins', sans-serif;
}

.step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.step-description {
    color: var(--gray-600);
    line-height: 1.65;
    font-size: 0.9375rem;
}

/* ===== Why Compeas (Differentiators) ===== */
.why-compeas {
    padding: var(--section-y) 0;
    background: var(--surface);
}

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

.differentiator-card {
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: var(--r-card-lg);
    border: 1px solid var(--hairline);
    background: var(--surface);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.differentiator-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(16, 37, 66, 0.08);
    border-color: rgba(16, 37, 66, 0.15);
}

.differentiator-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(7, 170, 89, 0.12) 0%, rgba(135, 217, 159, 0.2) 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.differentiator-icon svg {
    width: 28px;
    height: 28px;
    color: var(--green-text);
}

.differentiator-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.differentiator-description {
    color: var(--gray-600);
    line-height: 1.65;
    font-size: 0.9375rem;
}

@media (max-width: 900px) {
    .differentiators-grid {
        grid-template-columns: 1fr;
    }
    .differentiator-card {
        padding: 2rem 1.5rem;
    }
}

/* ===== Language Switcher ===== */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lang-link {
    padding: 0.4rem 0.75rem;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--gray-500);
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lang-link:hover {
    color: var(--ink);
    background: rgba(16, 37, 66, 0.06);
}

.lang-link.active {
    color: var(--ink);
    background: rgba(16, 37, 66, 0.1);
    font-weight: 600;
}

/* ============================================================
   FRAMEWORK ENGINE — "Manage once. Comply across frameworks."
   One control card on the left, the frameworks it satisfies on
   the right, joined by bezier connectors that script.js measures
   and injects. Below 900px the SVG is dropped and the diagram
   becomes a simple vertical flow.
   ============================================================ */
.framework-engine {
    padding: var(--section-y) 0;
    background: var(--canvas);
}

/* For pages where the preceding section is transparent (and so sits on the
   canvas already) — gives the engine its own band, as on the Frameworks page. */
.framework-engine--tinted {
    background: var(--canvas-warm);
}

.engine-diagram {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr minmax(220px, 260px);
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

.engine-source {
    background: var(--midnight-navy);
    border-radius: var(--r-card);
    padding: 2rem 1.75rem;
    box-shadow: 0 20px 50px rgba(16, 37, 66, 0.18);
    position: relative;
    z-index: 2;
}

.engine-source-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--minty-fresh-green);
    margin-bottom: 0.625rem;
}

.engine-source-title {
    color: var(--white);
    font-size: 1.375rem;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.engine-source-text {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
}

/* Connector layer — spans the whole diagram; paths come from script.js */
.engine-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.engine-links path {
    fill: none;
    stroke: var(--gray-300);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

/* One connector carries a travelling dash, to suggest reuse flowing outward */
.engine-links path.is-flowing {
    stroke: var(--fresh-emerald-green);
    stroke-dasharray: 5 7;
    animation: engine-dashflow 1.6s linear infinite;
}

@keyframes engine-dashflow {
    to { stroke-dashoffset: -24; }
}

.engine-targets {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
}

.engine-target {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
    padding: 0.75rem 1.375rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(16, 37, 66, 0.05),
                0 6px 16px -8px rgba(16, 37, 66, 0.12);
}

.engine-target svg {
    width: 15px;
    height: 15px;
    color: var(--fresh-emerald-green);
    flex-shrink: 0;
}

.engine-payoff {
    text-align: center;
    margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
    font-size: clamp(1.1875rem, 2vw, 1.4375rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.engine-payoff em {
    font-style: normal;
    color: var(--green-text);
}

/* ============================================================
   PLATFORM SHOWCASE — alternating screenshot / copy rows
   Screenshots use the same rounded-and-lifted treatment as
   .product-showcase-image on the Products page.
   ============================================================ */
.platform-showcase {
    padding: var(--section-y) 0;
    background: var(--canvas);
}

.showcase-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.showcase-row + .showcase-row {
    margin-top: clamp(4rem, 8vw, 6.5rem);
}

/* Second row mirrors the first so the eye zig-zags down the page */
.showcase-row.is-flipped .showcase-visual {
    order: 2;
}

.showcase-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-card-lg);
    box-shadow: 0 30px 70px rgba(16, 37, 66, 0.18),
                0 8px 20px rgba(16, 37, 66, 0.08);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.showcase-visual:hover .showcase-image {
    transform: translateY(-6px);
    box-shadow: 0 44px 90px rgba(16, 37, 66, 0.24),
                0 12px 36px rgba(7, 170, 89, 0.16);
}

.showcase-title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    color: var(--ink);
    margin: 0 0 1rem;
    line-height: 1.15;
}

.showcase-text {
    color: var(--gray-600);
    margin: 0 0 1.25rem;
    max-width: 30rem;
}

.showcase-copy .feature-list {
    margin-bottom: 1.75rem;
}

/* Underline on hover only, matching .article-back and .blog-card-link */
.showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--green-text);
    text-decoration: none;
}

.showcase-link:hover {
    text-decoration: underline;
}

.showcase-link svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.25s var(--ease);
}

.showcase-link:hover svg {
    transform: translateX(4px);
}

/* ============================================================
   LAW TIMELINE — dated milestones for a piece of legislation.
   A rail with a node per date; the milestone that has not yet
   landed is marked .is-next and carries the emerald accent.
   ============================================================ */
.law-alert {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    border-radius: var(--r-card);
    background: rgba(7, 170, 89, 0.08);
    border: 1px solid rgba(7, 170, 89, 0.28);
}

.law-alert svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    color: var(--green-text);
    margin-top: 0.125rem;
}

.law-alert-date {
    display: block;
    font-weight: 700;
    color: var(--green-text);
    margin-bottom: 0.25rem;
}

.law-alert p {
    color: var(--gray-600);
    margin: 0;
}

.law-timeline {
    max-width: 46rem;
    margin: 0 auto;
    position: relative;
    padding-left: 2.25rem;
}

/* The rail sits under the nodes, hence the negative z-index sibling order. */
.law-timeline::before {
    content: "";
    position: absolute;
    left: 0.4375rem;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    background: var(--hairline);
}

.law-milestone {
    position: relative;
    padding-bottom: 2.25rem;
}

.law-milestone:last-child {
    padding-bottom: 0;
}

.law-milestone::before {
    content: "";
    position: absolute;
    left: -2.25rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 2px solid var(--gray-300);
}

.law-milestone.is-next::before {
    background: var(--fresh-emerald-green);
    border-color: var(--fresh-emerald-green);
    box-shadow: 0 0 0 5px rgba(7, 170, 89, 0.16);
}

.law-milestone-date {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.375rem;
}

.law-milestone.is-next .law-milestone-date {
    color: var(--green-text);
}

.law-milestone-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.375rem;
}

.law-milestone p {
    color: var(--gray-600);
    margin: 0;
    max-width: 34rem;
}

/* Scope table — plain rows, no card chrome, so it reads as reference. */
.law-facts {
    max-width: 46rem;
    margin: 0 auto;
    border-top: 1px solid var(--hairline);
}

.law-fact {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--hairline);
}

.law-fact dt {
    font-weight: 600;
    color: var(--ink);
}

.law-fact dd {
    margin: 0;
    color: var(--gray-600);
}

.law-sources {
    max-width: 46rem;
    margin: 0 auto;
    font-size: 0.9375rem;
    color: var(--gray-500);
}

/* Content links inside these blocks are classless, so they would otherwise
   render as browser-blue. Scoped rather than global: the site-wide
   `main a:not([class])` fix lives on the polish branch and is not merged yet. */
.law-sources a,
.law-fact dt a,
.law-fact dd a {
    color: var(--green-text);
    font-weight: 500;
    text-decoration: none;
}

.law-sources a:hover,
.law-fact dt a:hover,
.law-fact dd a:hover {
    text-decoration: underline;
}

.law-sources li {
    margin-bottom: 0.5rem;
}

@media (max-width: 700px) {
    .law-fact {
        grid-template-columns: 1fr;
        gap: 0.375rem;
    }
}

/* ============================================================
   COMPARISON — the traditional approach set against Compeas
   Muted column on the left, brand column on the right, so the
   eye lands on the Compeas side last.
   ============================================================ */
.comparison {
    padding: var(--section-y) 0;
    background: var(--canvas-warm);
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 940px;
    margin: 0 auto;
}

.comparison-col {
    border-radius: var(--r-card);
    padding: 2rem 1.875rem;
}

.comparison-heading {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 1.375rem;
}

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

.comparison-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8125rem 0;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--hairline);
}

.comparison-list li:last-child {
    border-bottom: none;
}

.comparison-list svg {
    width: 1.0625rem;
    height: 1.0625rem;
    flex-shrink: 0;
}

.comparison-col--traditional {
    background: var(--surface);
    border: 1px solid var(--hairline);
}

.comparison-col--traditional .comparison-heading {
    color: var(--gray-500);
}

.comparison-col--traditional .comparison-list li {
    color: var(--gray-500);
}

.comparison-col--compeas {
    background: var(--midnight-navy);
    box-shadow: 0 24px 60px rgba(16, 37, 66, 0.2);
}

.comparison-col--compeas .comparison-heading {
    color: var(--minty-fresh-green);
}

.comparison-col--compeas .comparison-list li {
    color: rgba(255, 255, 255, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    font-weight: 500;
}

.comparison-col--compeas .comparison-list svg {
    color: var(--minty-fresh-green);
}

/* ============================================================
   FOUNDER — the people behind the product
   ============================================================ */
.founder {
    padding: var(--section-y) 0;
    background: var(--surface);
}

.founder-grid {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
    max-width: 1020px;
    margin: 0 auto;
}

/* The portrait asset is a circular cut-out, so it is presented as a
   circle — in a square frame its transparent corners read as a sticker
   pasted onto the page. */
.founder-portrait {
    position: relative;
    width: min(20rem, 100%);
    margin: 0 auto;
    aspect-ratio: 1;
}

.founder-portrait-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    background: var(--frost-white);
    box-shadow: 0 24px 60px rgba(16, 37, 66, 0.18);
}

/* Hairline sitting exactly on the portrait edge. Held off it, the ring left a
   band of page colour between itself and the photo's own light ground, which
   read as two mismatched circles rather than one framed portrait. */
.founder-portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(16, 37, 66, 0.12);
    pointer-events: none;
}

.founder-quote {
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 1.5rem;
}

.founder-quote::before {
    content: "\201C";
    display: block;
    font-size: 4rem;
    line-height: 0.6;
    color: var(--fresh-emerald-green);
    margin-bottom: 1.125rem;
}

.founder-text {
    color: var(--gray-600);
    margin: 0;
    max-width: 35rem;
}

.founder-signature {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 1.75rem;
}

.founder-signature-name {
    display: block;
    font-weight: 600;
    color: var(--ink);
}

.founder-signature-role {
    display: block;
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* Holds a hyphenated compound together, so a headline never ends a line on a
   hyphen ("Er compliance-" / "status"), which reads as a typo. */
.nowrap {
    white-space: nowrap;
}

/* Below this the longest compound cannot fit a line at any cost, and holding it
   together pushes the page into horizontal scroll — so let it break instead
   (WCAG 1.4.10 reflow beats the cosmetic hyphen). */
@media (max-width: 379.98px) {
    .nowrap {
        white-space: normal;
    }
}

/* ===== Responsive for new sections ===== */
@media (max-width: 900px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .step-card {
        padding: 2rem 1.5rem;
    }

    /* Engine collapses to a vertical flow — the measured connectors
       only make sense side by side, so drop them for a single rule */
    .engine-diagram {
        grid-template-columns: 1fr;
        max-width: 30rem;
    }

    .engine-links {
        display: none;
    }

    .engine-source {
        margin-bottom: 2.125rem;
    }

    .engine-targets {
        position: relative;
        padding-top: 2.125rem;
    }

    .engine-targets::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 2.125rem;
        background: var(--gray-300);
    }

    .showcase-row {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Keep the screenshot above its copy on every row once stacked */
    .showcase-row.is-flipped .showcase-visual {
        order: 0;
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .founder-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .founder-text {
        margin-inline: auto;
    }

    .founder-signature {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .engine-links path.is-flowing {
        animation: none;
        stroke-dasharray: none;
    }
}
/* ============================================================
   DARK THEME — activated via [data-theme="dark"] on <html>
   (set by script.js: OS preference default, manual toggle in
   the navbar, persisted in localStorage under 'compeas-theme')
   ============================================================ */

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Brand ink flips to frost white; minty green keeps links AA-legible */
    --ink: #EAF1F8;
    --green-text: #87D99F;
    /* CTA hover: a notch lighter than the base emerald for dark-mode
       affordance, but still saturated — never the minty text shade */
    --green-btn-hover: #12C170;

    /* Deep navy surfaces — darker than the brand navy sections,
       so footer/CTA cards still read as intentional accents */
    --canvas: #0B1526;
    --canvas-warm: #101D33;
    --surface: #152A46;
    --hairline: rgba(255, 255, 255, 0.12);

    /* Inverted gray scale */
    --gray-100: #182C49;
    --gray-200: #2A3F5E;
    --gray-300: #3D5578;
    --gray-400: #7E93B0;
    --gray-500: #97ABC6;
    --gray-600: #B3C3D8;
    --gray-700: #D5E0EE;
    --gray-800: #EAF1F8;
    --gray-900: #F3F7FC;
}

/* Gentle cross-fade when the theme flips */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar — dark frosted glass */
[data-theme="dark"] .navbar {
    background: rgba(11, 21, 38, 0.82);
}
[data-theme="dark"] .navbar.is-scrolled {
    background: rgba(11, 21, 38, 0.94);
}

/* Navy-tinted hover washes become white-tinted */
[data-theme="dark"] .nav-menu .nav-link:hover,
[data-theme="dark"] .nav-actions .nav-login:hover,
[data-theme="dark"] .dropdown-link:hover,
[data-theme="dark"] .nav-link-icon:hover,
[data-theme="dark"] .lang-link:hover {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .lang-link.active {
    background: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .btn-soft {
    background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .btn-soft:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Ghost button: light outline, light hover fill */
[data-theme="dark"] .btn-ghost {
    border-color: var(--ink);
}
[data-theme="dark"] .btn-ghost:hover {
    background: var(--ink);
    color: var(--canvas);
}

/* Components that hardcode white card backgrounds */
[data-theme="dark"] .framework-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .addon-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .value-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .contact-form-wrapper {
    background: var(--surface);
}

/* Form fields — recessed dark wells with light text */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background-color: var(--canvas-warm);
    color: var(--ink);
}
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23EFF7F9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
/* The opened dropdown list must follow the theme too
   (Windows browsers don't inherit color-scheme into the popup) */
[data-theme="dark"] .form-select option {
    background-color: var(--surface);
    color: var(--ink);
}
[data-theme="dark"] .form-error {
    color: #FF8080;
}
[data-theme="dark"] .form-group.has-error .form-input,
[data-theme="dark"] .form-group.has-error .form-select,
[data-theme="dark"] .form-group.has-error .form-textarea {
    border-color: #FF8080;
}

/* Small green pill badges: mint text on mint tint (dark-mode badge idiom) */
[data-theme="dark"] .framework-badge {
    background: rgba(135, 217, 159, 0.16);
    color: var(--green-text);
}

/* Navy buttons on dark cards need a hairline to stay visible */
[data-theme="dark"] .btn-navy {
    border: 1px solid var(--hairline);
}

/* Subtle separation for the light product screenshot on dark canvas */
[data-theme="dark"] .hero-main-image {
    border: 1px solid var(--hairline);
}

[data-theme="dark"] .product-showcase-image {
    border: 1px solid var(--hairline);
}

/* Navy shadows vanish on the dark canvas — deepen and highlight in mint instead */
[data-theme="dark"] .product-showcase-visual:hover .product-showcase-image {
    box-shadow: 0 44px 90px rgba(0, 0, 0, 0.55),
                0 12px 36px rgba(135, 217, 159, 0.18);
}

[data-theme="dark"] .hero-image-wrapper:hover .hero-main-image {
    box-shadow: 0 44px 90px rgba(0, 0, 0, 0.55),
                0 12px 36px rgba(135, 217, 159, 0.18);
}

/* Theme toggle button in the navbar */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--gray-700);
    cursor: pointer;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.theme-toggle:hover {
    background: rgba(16, 37, 66, 0.06);
    color: var(--ink);
}
[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}
.theme-toggle svg {
    width: 20px;
    height: 20px;
}
/* Sun shows in light mode (click → go dark), moon in dark mode */
.theme-toggle .icon-moon {
    display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

@media print {
    .theme-toggle {
        display: none;
    }
}

/* Framework engine — the navy source card stays navy (same convention as
   .cta-content), but the target pills and screenshots need lifting off the
   dark canvas the way .product-showcase-image does. */
[data-theme="dark"] .engine-source {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .engine-target {
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .showcase-image {
    border: 1px solid var(--hairline);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45),
                0 8px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .showcase-visual:hover .showcase-image {
    box-shadow: 0 44px 90px rgba(0, 0, 0, 0.55),
                0 12px 36px rgba(135, 217, 159, 0.18);
}

/* Founder portrait — the cut-out sits on a light disc, so on the dark
   canvas it needs a deeper shadow and a softer ring than the emerald. */
[data-theme="dark"] .founder-portrait-img {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* The portrait's light ground already separates itself from the dark canvas,
   so the hairline only needs to soften that edge, not draw it. */
[data-theme="dark"] .founder-portrait::after {
    border-color: rgba(16, 37, 66, 0.18);
}

[data-theme="dark"] .comparison-col--compeas {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .law-alert {
    background: rgba(135, 217, 159, 0.10);
    border-color: rgba(135, 217, 159, 0.3);
}

[data-theme="dark"] .law-milestone::before {
    background: var(--surface);
    border-color: var(--gray-500);
}

[data-theme="dark"] .law-milestone.is-next::before {
    background: var(--fresh-emerald-green);
    border-color: var(--fresh-emerald-green);
}

/* ===== Tables inside newsroom articles =====
   The site only styled .legal-table. An article table therefore rendered with
   no rules, no padding and centred headings — it read as broken markup.
   Row labels are <th scope="row">, so the first column carries weight without
   <strong> inside every cell. The wrapper scrolls instead of the page body. */
.article-table { overflow-x: auto; margin: 1.75rem 0 2rem; -webkit-overflow-scrolling: touch; }
.article-body table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.95rem; table-layout: fixed; }
/* Etikettkolumnen behöver mindre plats än datakolumnerna. Bredden sätts här
   och inte med <col style>, eftersom CSP:n är style-src 'self' utan
   unsafe-inline — ett style-attribut hade ignorerats tyst. */
.article-body table th:first-child, .article-body table td:first-child { width: 21%; }
.article-body thead th { text-align: left; font-weight: 600; color: var(--ink); padding: 0.7rem 0.9rem 0.6rem; border-bottom: 2px solid var(--hairline); }
.article-body tbody th { text-align: left; font-weight: 600; color: var(--ink); padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.article-body tbody td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--hairline); color: var(--gray-600); vertical-align: top; }
.article-body tbody tr:last-child th, .article-body tbody tr:last-child td { border-bottom: none; }

/* ===== Newsletter signup =====
   Inline form in the newsroom CTA. Uses the existing light CTA variant so the
   shared form controls keep their normal light-surface styling — and because
   the newsroom grid above is already four navy blocks; a fifth flattens it. */
.nl-form { max-width: 32rem; margin: 0 auto; text-align: left; }
.nl-row { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.nl-row .form-group { flex: 1 1 15rem; margin-bottom: 0; }
.nl-row .btn { flex: 0 0 auto; align-self: flex-end; }
.nl-consent { margin-top: 1.25rem; }
.nl-consent .checkbox-text { font-size: 0.9375rem; }
.nl-alt { margin-top: 1.75rem; font-size: 0.9375rem; color: var(--gray-600); text-align: center; }

/* Bekräftelseraden på tack- och nedladdningssidan. Dold tills ?nl=1 säger att
   personen kryssade i marknadsföringsrutan på formuläret (se script.js).
   Utan den är dubbel opt-in osynlig: rutan kryssas, sidan säger ingenting,
   och bekräftelsemejlet som dyker upp en stund senare blir oförklarat. Bara
   temavariabler här, så den följer med i mörkt läge utan egen [data-theme]. */
.nl-notice {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    padding: 0.9rem 1.15rem;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--green-text);
    border-radius: 0.5rem;
    background: var(--surface);
    color: var(--gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    text-align: left;
}
.nl-notice strong { color: var(--ink); }

/* The secondary button is white-on-transparent, sized for the navy CTA card.
   On .cta-content-light that is white on white — invisible. Re-tint from the
   theme tokens so it reads on both grounds and in both themes. */
/* .btn-secondary är vit text på genomskinlig botten, dimensionerad för det
   navyfärgade CTA-kortet. På ljus botten blir den vitt på vitt — osynlig.
   Varje ljus yta som använder den behöver därför den här omtoningen. */
.cta-content-light .btn-secondary,
.sub-actions .btn-secondary { color: var(--ink); border-color: var(--ink); }
.cta-content-light .btn-secondary:hover,
.sub-actions .btn-secondary:hover { background: var(--ink); color: var(--surface); }

/* Action block on Function-rendered pages (confirm unsubscribe). Without the
   margin the primary button sits flush against the back link. */
.page-action { margin: 0 0 1rem; }

/* ===== Internal subscriber view (/subscribers, behind Cloudflare Access) =====
   Not a public page. Reuses .legal-table and .status-badge so it reads as part
   of the same system; only the layout around them is new. */
.sub-title { font-size: var(--display-3, 2.25rem); margin: 0.35rem 0 0.5rem; }
.sub-meta { color: var(--gray-600); font-size: 0.9375rem; margin: 0 0 2rem; }
.sub-tiles { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2.25rem; }
.sub-tile { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
            padding: 1.1rem 1.5rem; min-width: 8.5rem; }
.sub-tile-n { display: block; font-size: 1.9rem; font-weight: 700; color: var(--ink);
              line-height: 1.1; font-variant-numeric: tabular-nums; }
.sub-tile-l { display: block; font-size: 0.8125rem; color: var(--gray-600); margin-top: 0.15rem; }
/* Wide table on a narrow screen scrolls inside its own box, not the page. */
.sub-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sub-table-wrap .legal-table { min-width: 46rem; }
.sub-table-wrap .legal-table td { font-variant-numeric: tabular-nums; }
.sub-who { display: flex; align-items: center; gap: 0.7rem; }
.sub-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain;
            background: var(--surface); border: 1px solid var(--hairline); flex-shrink: 0; }
.sub-who-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sub-who-text strong { color: var(--ink); font-weight: 600; }
.sub-email { font-size: 0.8125rem; color: var(--gray-600); }
.status-badge-muted { background: rgba(110, 122, 137, 0.16); color: var(--gray-600); }
.sub-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }

/* ===== Prissidan (/pricing, /sv/pricing) =====
   Egen namnrymd (.pr-*) i stället för de gamla .pricing-card-reglerna, som
   skalade det framhävda kortet och lyfte korten vid hover — rörelse som får
   en prissida att se ut som en kampanj snarare än ett avtal. Bara tema-
   variabler, så mörkt läge följer med; det navyfärgade kortet och panelen
   håller sig navy i båda teman, som .cta-content. */
.pr-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.pr-plan {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 2.25rem 2rem 2rem;
}
.pr-plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2rem; /* märket i det framhävda kortet ska inte flytta ned rubriken */
    margin-bottom: 1.75rem;
}
.pr-plan-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.pr-plan-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-pill);
    background: rgba(135, 217, 159, 0.18);
    color: var(--minty-fresh-green);
    white-space: nowrap;
}
.pr-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.pr-amount {
    font-size: clamp(2rem, 3.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pr-per {
    font-size: 1rem;
    color: var(--gray-600);
}
.pr-first {
    font-size: 0.9375rem;
    color: var(--gray-600);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--hairline);
}
.pr-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}
.pr-list li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: 0.7rem;
    align-items: start;
    color: var(--gray-600);
    line-height: 1.5;
}
.pr-check {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    color: var(--green-text);
}
.pr-plan .btn { margin-top: auto; }

.pr-plan.is-featured {
    background: var(--midnight-navy);
    border-color: var(--midnight-navy);
    box-shadow: 0 30px 70px -30px rgba(16, 37, 66, 0.55);
}
.pr-plan.is-featured .pr-plan-name,
.pr-plan.is-featured .pr-amount { color: var(--white); }
.pr-plan.is-featured .pr-per,
.pr-plan.is-featured .pr-first,
.pr-plan.is-featured .pr-list li { color: rgba(255, 255, 255, 0.72); }
.pr-plan.is-featured .pr-first { border-bottom-color: rgba(255, 255, 255, 0.14); }
.pr-plan.is-featured .pr-check { color: var(--minty-fresh-green); }
.pr-plan:not(.is-featured) .pr-plan-tag { color: var(--green-text); }

.pr-fine {
    max-width: 44rem;
    margin: 2rem auto 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.pr-inc-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 3.5rem;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    overflow: hidden;
}
.pr-inc {
    background: var(--surface);
    padding: 2rem 1.75rem;
}
.pr-inc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(7, 170, 89, 0.10);
    color: var(--green-text);
    margin-bottom: 1.25rem;
}
.pr-inc-icon svg { width: 1.35rem; height: 1.35rem; }
.pr-inc-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.5rem;
}
.pr-inc-text {
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.55;
}

.pr-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.pr-panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card-lg);
    padding: clamp(2rem, 4vw, 3rem);
}
.pr-panel-title {
    font-size: var(--display-3);
    hyphens: manual;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 1rem;
}
.pr-panel-lead {
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 1.75rem;
}
.pr-panel-close {
    font-weight: 600;
    color: var(--ink);
}
.pr-panel-navy {
    background: var(--midnight-navy);
    border-color: var(--midnight-navy);
    display: flex;
    flex-direction: column;
}
.pr-panel-navy .pr-panel-title { color: var(--white); }
.pr-stats {
    display: grid;
    gap: 1rem;
    margin: 1rem 0 1.75rem;
}
.pr-stat {
    display: grid;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.pr-stat-n {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pr-stat:first-child .pr-stat-n { color: var(--minty-fresh-green); }
.pr-stat-l {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
}
.pr-panel-note {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 1.5rem;
}
.pr-panel-link {
    margin-top: auto;
    color: var(--minty-fresh-green);
    font-weight: 600;
    text-decoration: none;
}
.pr-panel-link:hover { text-decoration: underline; }

/* Navy-korten försvinner mot den mörka bakgrunden utan kant och djupare skugga */
[data-theme="dark"] .pr-plan.is-featured,
[data-theme="dark"] .pr-panel-navy {
    border-color: rgba(135, 217, 159, 0.35);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
/* Spökknappen har en navy kant, som är osynlig på mörk yta */
[data-theme="dark"] .pr-plan .btn-ghost { border-color: var(--ink); }

@media (max-width: 1024px) {
    .pr-plans { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
    .pr-inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .pr-inc-grid { grid-template-columns: minmax(0, 1fr); }
    .pr-plan { padding: 1.75rem 1.5rem; }
}

/* ===== Integrationssidan (/integrations, /sv/integrations) =====
   Korten efterliknar integrationssidan i appen: loggruta, namn och kategori,
   statusbricka, beskrivning, antal tester och en grå fot med en navyfärgad
   Connect-knapp. Loggorna är märkenas egna färger och ligger därför på vit
   botten i båda teman. Testlistan är <details>, så sidan behöver inget skript. */
.int-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    max-width: 68rem;
    margin: 3rem auto 0;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    overflow: hidden;
}
.int-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    text-align: center;
}
.int-stat dd {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.int-stat dt {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.4;
}

.int-grid-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 1.25rem;
}
.int-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.int-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 37, 66, 0.04), 0 12px 32px -18px rgba(16, 37, 66, 0.18);
    scroll-margin-top: 6rem;
}
.int-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.75rem 1.75rem 1.5rem;
}
.int-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.int-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(16, 37, 66, 0.10);
    box-shadow: 0 1px 2px rgba(16, 37, 66, 0.06);
    flex-shrink: 0;
}
.int-logo img { width: 2rem; height: 2rem; display: block; }
.int-name-wrap { min-width: 0; padding-top: 0.2rem; }
.int-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}
.int-cat {
    font-size: 0.9375rem;
    color: var(--gray-500);
    margin: 0.2rem 0 0;
}
.int-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(7, 170, 89, 0.28);
    border-radius: var(--r-pill);
    background: rgba(7, 170, 89, 0.07);
    color: var(--green-text);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.int-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--fresh-emerald-green);
}
.int-desc {
    color: var(--gray-600);
    font-size: 0.975rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}
.int-tests {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: auto 0 0;
    color: var(--gray-600);
    font-size: 0.975rem;
    line-height: 1.5;
}
.int-tests strong { color: var(--ink); font-weight: 600; }
.int-shield {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--green-text);
}
.int-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.75rem;
    background: var(--canvas);
    border-top: 1px solid var(--hairline);
}
.int-access {
    font-size: 0.875rem;
    color: var(--gray-500);
}
.int-connect {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.9rem 0.6rem 1.15rem;
    border-radius: 10px;
    background: var(--midnight-navy);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s var(--ease);
}
.int-connect:hover { background: #1C3B66; }
.int-connect:focus-visible { outline: 2px solid var(--fresh-emerald-green); outline-offset: 2px; }
.int-chev { width: 1rem; height: 1rem; }

.int-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 3.5rem 0 0;
    padding: 0;
}
.int-step {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    padding: 2rem 1.75rem;
}
.int-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(7, 170, 89, 0.10);
    color: var(--green-text);
}
.int-step-icon svg { width: 1.35rem; height: 1.35rem; }
.int-step-num {
    position: absolute;
    top: 2rem;
    right: 1.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}
.int-step-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
    margin: 1.25rem 0 0.5rem;
}
.int-step-text {
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.6;
}
.int-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin: 2.5rem 0 0;
    padding: 0;
}
.int-trust li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9375rem;
    color: var(--gray-600);
}
.int-trust svg { width: 1.1rem; height: 1.1rem; color: var(--green-text); flex-shrink: 0; }
.int-trust strong { color: var(--ink); font-weight: 600; }

.int-acc {
    display: grid;
    gap: 0.75rem;
    max-width: 56rem;
    margin: 3rem auto 0;
}
.int-acc-item {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow: hidden;
}
.int-acc-item summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    cursor: pointer;
    list-style: none;
}
.int-acc-item summary::-webkit-details-marker { display: none; }
.int-acc-item summary:hover { background: rgba(16, 37, 66, 0.025); }
.int-acc-item summary:focus-visible { outline: 2px solid var(--fresh-emerald-green); outline-offset: -2px; }
.int-logo-sm { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.int-logo-sm img { width: 1.25rem; height: 1.25rem; }
.int-acc-name { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.int-acc-count {
    font-size: 0.8125rem;
    color: var(--gray-600);
    background: var(--canvas);
    border-radius: var(--r-pill);
    padding: 0.2rem 0.7rem;
    white-space: nowrap;
}
.int-acc-chev { width: 1.25rem; height: 1.25rem; color: var(--gray-500); transition: transform 0.2s var(--ease); }
.int-acc-item[open] .int-acc-chev { transform: rotate(180deg); }
.int-acc-body {
    padding: 0.25rem 1.25rem 1.25rem;
    border-top: 1px solid var(--hairline);
}
.int-test-list { list-style: none; margin: 0; padding: 0; }
.int-test-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
}
.int-test-name { color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.int-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
    max-width: 45%;
}
.int-chip {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--green-text);
    background: rgba(7, 170, 89, 0.08);
    border-radius: 6px;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.int-acc-note {
    margin: 1rem 0;
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.6;
}
.int-tool-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
}
.int-tool-list li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--ink);
    font-size: 0.9375rem;
}
.int-tool-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--fresh-emerald-green);
}
.int-acc-how {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--gray-500);
}
.int-acc-how strong { color: var(--gray-700); font-weight: 600; }

/* Mörkt läge: navy försvinner mot den mörka ytan, så knappen blir en ljusare
   blå. Loggrutan förblir vit så att märkenas färger stämmer. */
[data-theme="dark"] .int-card { box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .int-logo { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
[data-theme="dark"] .int-connect { background: #2F6BC6; }
[data-theme="dark"] .int-connect:hover { background: #3B7BDA; }
[data-theme="dark"] .int-acc-item summary:hover { background: rgba(255, 255, 255, 0.03); }

@media (max-width: 1024px) {
    .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .int-steps { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-inline: auto; }
    .int-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .int-stat { padding: 1rem 0.6rem; }
    .int-stat dd { font-size: 1.15rem; overflow-wrap: anywhere; }
    .int-grid { grid-template-columns: minmax(0, 1fr); }
    .int-card-body { padding: 1.5rem 1.25rem 1.25rem; }
    .int-foot { padding: 0.9rem 1.25rem; }
    .int-test-list li { flex-direction: column; gap: 0.4rem; }
    .int-chips { justify-content: flex-start; max-width: none; }
    .int-tool-list { grid-template-columns: minmax(0, 1fr); }
    .int-acc-item summary { gap: 0.75rem; padding: 0.85rem 1rem; }
}