/* =============================================================================
 * Regilyze — HOMEPAGE STYLES
 * =============================================================================
 * EXTRACTED FROM index.php ON 2026-08-18 (SXO fix S1).
 *
 * WHY. This was 49.6 KB of CSS inlined into a <style> tag in the page body.
 * Inline CSS is never cached: the browser re-downloads and re-parses every byte
 * of it on each page view. Across the public pages the site was re-sending
 * ~92 KB of uncacheable CSS per homepage view (49.6 KB here, 24.7 KB from
 * includes/header.php, 18 KB from includes/footer.php).
 *
 * As an external file under /css/ it is fetched once and then served from cache
 * for a year — .htaccess already sets `Cache-Control: public, max-age=31536000,
 * immutable` for that directory. The ?v= cache-buster on the <link> means a
 * deploy still invalidates it immediately.
 *
 * ORDER IS LOAD-BEARING. The <link> that replaced the <style> sits at the exact
 * same position in the document, which keeps the cascade identical:
 *     styles.min.css → ux-enhancements.css → rgz-shell.css (all in <head>)
 *       → THIS FILE (page body, top)
 *         → rgz-footer.css (page body, bottom)
 * Do not hoist it into <head>: it must stay after rgz-shell.css, and it must
 * stay before rgz-footer.css. It depends on the :root custom properties that
 * rgz-shell.css defines.
 * =============================================================================
 */
/* CRITICAL: Prevent page-wide horizontal overflow.
   Without this, any wide injected element (e.g. the name-check result)
   can stretch the document and force the whole page into a scaled-down view.
   Use `overflow-x: clip` (not `hidden`) so `position: sticky` on the
   header keeps working. `hidden` creates a scroll container that
   neutralises sticky positioning of any descendant element. */
html { overflow-x: clip; max-width: 100%; }
body { overflow-x: clip; max-width: 100%; }
@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* ============================================================
   DESKTOP-SITE-MODE GRACEFUL DEGRADATION
   When mobile/tablet users toggle "Desktop site" in their browser,
   the browser forces a wide viewport (~980-1024px) regardless of
   physical screen size. Our @media queries won't trigger. So these
   styles ensure the desktop layout still renders cleanly:

   1. No element can exceed its parent's width (prevents h-scroll)
   2. Container always has at minimum 16px side padding
   3. Images and media never overflow their wrapper
   4. Long text breaks naturally instead of pushing the layout wider
   ============================================================ */

/* All major content containers must respect viewport width */
.hero, .trust-section, .steps-section, .pricing-section,
.hub-section, .banking-section, .why-section, .reviews-section,
.faq-section {
    max-width: 100%;
    overflow-x: clip;       /* `clip` is like hidden but doesn't create a scroll container */
}
@supports not (overflow-x: clip) {
    .hero, .trust-section, .steps-section, .pricing-section,
    .hub-section, .banking-section, .why-section, .reviews-section,
    .faq-section {
        overflow-x: hidden;
    }
}

/* Images stay within their wrapper at any viewport */
.banking-card-image img,
.hub-card img,
.hero-card img {
    max-width: 100%;
    height: auto;
}

/* Long words / URLs can break to keep layout intact */
.section-title, .hero-title, .faq-question span,
.review-text, .hub-feature span, .banking-logo, .why-desc, .why-title {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.hero::before { display: none !important; }

/* ---- HERO ----------------------------------------------- */
.hero { padding: 56px 0 72px; background: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-white) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero-content { max-width: 560px; }

.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 5px 5px 6px; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-pill); margin-bottom: 18px; animation: fadeSlideIn .6s ease both; }
.hero-badge-pill { padding: 5px 12px; background: var(--accent-orange); color: white; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--radius-pill); }
.hero-badge-text { font-size: 13px; color: var(--text-tertiary); padding-right: 8px; }

.hero-title { font-size: clamp(2.25rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.08; margin-bottom: 16px; letter-spacing: -0.02em; color: var(--text-primary); animation: fadeSlideIn .7s .1s ease both; }
.hero-title-accent { color: var(--accent-orange); position: relative; display: inline-block; }
.hero-title-accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; background: var(--accent-orange); opacity: 0.18; border-radius: 4px; z-index: -1; }

.hero-subtitle { font-size: 1.0625rem; color: var(--text-secondary); margin-bottom: 22px; line-height: 1.7; animation: fadeSlideIn .8s .2s ease both; }
.hero-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 22px; animation: fadeSlideIn .8s .3s ease both; }
.hero-price-label { font-size: 14px; color: var(--text-tertiary); }
.hero-price-value { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.hero-price-note { font-size: 14px; color: var(--text-tertiary); }
.hero-actions { display: flex; gap: 12px; margin-bottom: 22px; animation: fadeSlideIn .8s .4s ease both; flex-wrap: wrap; }
.hero-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
}
/* CRITICAL: constrain SVG icons inside hero buttons globally — works on all viewports */
.hero-actions .btn > svg,
.hero-actions a.btn svg,
.hero-actions button.btn svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; animation: fadeSlideIn .8s .5s ease both; }
.hero-trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.hero-trust-item svg { width: 14px; height: 14px; stroke: var(--accent-green); }

.hero-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: 0 14px 44px rgba(26,26,27,0.08);
    animation: floatIn .9s .2s ease both;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;     /* contain the result panel within the card */
}
.hero-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero-card-icon { width: 44px; height: 44px; background: var(--accent-orange-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.hero-card-icon svg { width: 22px; height: 22px; stroke: var(--accent-orange); }
.hero-card-title { font-size: 1.0625rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.hero-card-subtitle { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }
.form-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px; }

.input-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.form-input {
    flex: 1;
    min-width: 200px;
    padding: 14px 16px;
    font-size: 16px;          /* >= 16px is REQUIRED to prevent iOS Safari auto-zoom on focus */
    background: var(--bg-cream);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: border-color .2s var(--ease), background .2s var(--ease);
    font-family: var(--font-body);
    -webkit-appearance: none;  /* prevent iOS rounded corners override */
    appearance: none;
}
.form-input:focus { outline: none; border-color: var(--accent-orange); background: var(--bg-white); }

.suffix-toggle { position: relative; display: inline-flex; background: var(--bg-cream); border: 2px solid var(--border-light); border-radius: var(--radius-pill); padding: 3px; height: 50px; box-sizing: border-box; }
.suffix-toggle-pill { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); background: var(--text-primary); border-radius: var(--radius-pill); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 0; }
.suffix-toggle-pill.right { transform: translateX(100%); }
.suffix-toggle button { position: relative; z-index: 1; padding: 0 22px; border: 0; background: transparent; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-tertiary); border-radius: var(--radius-pill); transition: color .2s; font-family: var(--font-body); min-width: 78px; }
.suffix-toggle button.active { color: white; }

.name-preview { margin-top: 12px; padding: 10px 14px; background: var(--bg-cream); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-tertiary); display: none; animation: fadeSlideIn .3s ease; }
.name-preview strong { color: var(--text-primary); font-weight: 600; }

.live-validation { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; display: none; animation: fadeSlideIn .25s ease; }
.live-validation.ok   { background: #ECFDF5; border: 1px solid #BBF7D0; color: #166534; }
.live-validation.warn { background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E; }
.live-validation.err  { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.live-validation .lv-icon { display: inline-block; margin-right: 6px; font-weight: 700; }

.form-btn { width: 100%; padding: 16px; font-size: 15px; font-weight: 600; background: var(--accent-orange); color: white; border: none; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-family: var(--font-body); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s var(--ease); }
.form-btn:hover { background: var(--accent-orange-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,107,53,.3); }
.form-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.check-result { margin-top: 18px; padding: 18px; border-radius: var(--radius-lg); animation: slideUp .35s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }
/* The .check-result.available/.unavailable/.warning and .result-* rules that
   sat here were removed (2026-09-06 audit): js/animations.js renders the
   name-check verdict with inline styles and never emits those classes, so
   none of them matched anything. */
/* ============================================================
   FIX: Override animations.js dynamically-injected result panel
   The JS uses inline styles — `!important` here beats them
   because inline styles don't carry !important.
   ============================================================ */

/* Prevent the result panel from breaking page layout */
#checkResult {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
#checkResult * {
    max-width: 100%;
    box-sizing: border-box;
}
#checkResult > div {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Long company names / numbers must wrap, not push the panel wider */
#checkResult strong,
#checkResult span,
#checkResult div {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
/* The action button row — kill the inline `flex` + give proper mobile stacking */
#checkResult > div > div:last-child {
    flex-wrap: wrap !important;
    gap: 10px !important;
}
#checkResult a[href*="checkout"],
#checkResult button[onclick*="resetNameCheck"] {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 13px 16px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
}
#checkResult a[href*="checkout"] span,
#checkResult button[onclick*="resetNameCheck"] span {
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ---- TRUST STRIP (FIXED v2 — premium gradient-filled icons) ---- */
.trust-section {
    padding: 48px 0;
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1100px;
    margin: 0 auto;
}
.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 18px;
    background: var(--bg-cream);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: all .3s var(--ease);
    position: relative;
    overflow: hidden;
}
.trust-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--ti-grad, transparent);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.trust-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(26,26,27,.08);
    border-color: transparent;
    background: var(--bg-white);
}
.trust-item:hover::before { opacity: 1; }

.trust-icon {
    width: 54px; height: 54px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    background: var(--ti-grad);
    box-shadow: 0 8px 20px var(--ti-shadow), inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
    transition: transform .3s var(--ease);
}
.trust-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    pointer-events: none;
}
.trust-item:hover .trust-icon { transform: scale(1.06) rotate(-3deg); }
.trust-icon svg {
    width: 26px; height: 26px;
    fill: white;
    stroke: none;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
}

/* Gradient palettes for each trust card */
.trust-icon.green  { --ti-grad: linear-gradient(135deg, #10B981 0%, #059669 100%); --ti-shadow: rgba(16,185,129,0.35); }
.trust-icon.orange { --ti-grad: linear-gradient(135deg, #FF8E53 0%, #FF6B35 100%); --ti-shadow: rgba(255,107,53,0.35); }
.trust-icon.gold   { --ti-grad: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%); --ti-shadow: rgba(245,158,11,0.35); }
.trust-icon.blue   { --ti-grad: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); --ti-shadow: rgba(37,99,235,0.35); }

.trust-item:has(.trust-icon.green)  { --ti-grad: linear-gradient(90deg, #10B981, #059669); }
.trust-item:has(.trust-icon.orange) { --ti-grad: linear-gradient(90deg, #FF8E53, #FF6B35); }
.trust-item:has(.trust-icon.gold)   { --ti-grad: linear-gradient(90deg, #FBBF24, #F59E0B); }
.trust-item:has(.trust-icon.blue)   { --ti-grad: linear-gradient(90deg, #3B82F6, #2563EB); }

.trust-stat {
    font-size: clamp(1.125rem, 2.4vw, 1.625rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    line-height: 1.15;
    word-break: keep-all;
    text-align: center;
}
.trust-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

/* ---- SECTION HEADER ---- */
.section-header { text-align: center; max-width: 620px; margin: 0 auto 44px; }
.section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--bg-white); border: 1px solid var(--border-light); border-radius: var(--radius-pill); font-size: 12px; color: var(--text-tertiary); margin-bottom: 14px; }
.section-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.section-badge-dot.orange { background: var(--accent-orange); }
.section-badge-dot.green  { background: var(--accent-green); }
.section-title { font-size: clamp(1.75rem, 4vw, 2.375rem); margin-bottom: 12px; letter-spacing: -0.02em; }
.section-subtitle { font-size: 1rem; color: var(--text-secondary); }

/* ---- 4-STEP PROCESS ---- */
.steps-section { padding: 80px 0; background: var(--bg-white); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.steps-grid::before { content: ''; position: absolute; top: 28px; left: 12.5%; right: 12.5%; height: 2px; background: var(--border-light); z-index: 0; }
.step-card { text-align: center; position: relative; z-index: 1; }
.step-number { width: 56px; height: 56px; background: var(--accent-orange); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; margin: 0 auto 16px; box-shadow: 0 6px 18px rgba(255,107,53,.3); transition: transform .2s var(--ease); }
.step-card:hover .step-number { transform: scale(1.06); }
.step-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.step-desc { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; }

/* ---- PRICING ---- */
.pricing-section { padding: 80px 0; background: var(--bg-cream); }
/* Pricing CARD styles now come from the shared component (includes/pricing-cards.php),
   identical to the Services & Checkout pages. Bespoke card CSS removed to keep all
   pricing tables visually consistent and prevent style drift. */

/* ---- HUB SECTION (FIXED — rich dashboard preview) ---- */
.hub-section { padding: 80px 0; background: linear-gradient(135deg, #1A1A1B 0%, #2D2A26 100%); color: white; position: relative; overflow: hidden; }
.hub-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,107,53,0.15) 0%, transparent 70%); pointer-events: none; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hub-content h2 { font-size: clamp(1.75rem, 4vw, 2.375rem); color: white; margin-bottom: 14px; letter-spacing: -0.02em; }
.hub-content h2 span { color: var(--accent-orange); }
.hub-content p { font-size: 1rem; color: rgba(255,255,255,0.7); margin-bottom: 24px; line-height: 1.7; }
.hub-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill); color: #FFD0B8; font-size: 12px; margin-bottom: 16px; }

/* Hub feature checkmarks — premium rounded badge style */
.hub-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 28px; }
.hub-feature {
    display: flex;
    align-items: flex-start;          /* top-align: ticks line up at top with first text line */
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
    line-height: 1.45;
}
.hub-feature span:not(.hub-feature-tick) {
    flex: 1;
    min-width: 0;
}
.hub-feature-tick {
    width: 22px;
    height: 22px;
    margin-top: 1px;                  /* baseline align with first text line */
    border-radius: 50%;
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    box-shadow: 0 4px 10px rgba(16,185,129,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.hub-feature-tick::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 60%);
    pointer-events: none;
}
.hub-feature-tick svg {
    width: 12px; height: 12px;
    stroke: white;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

.hub-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--accent-orange); color: white; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s var(--ease); }
.hub-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,107,53,.4); }

.hub-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: 22px; backdrop-filter: blur(10px); }
.hub-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.hub-card-icon { width: 32px; height: 32px; background: rgba(255,107,53,0.18); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.hub-card-icon svg { width: 16px; height: 16px; stroke: var(--accent-orange); }
.hub-card-title { font-size: 14px; font-weight: 600; color: white; flex: 1; }
.hub-card-status { font-size: 10px; color: #4ADE80; padding: 3px 8px; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.2); border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 4px; }
.hub-card-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:0.5;} }

.hub-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.hub-stat-mini { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); padding: 10px 12px; }
.hub-stat-mini-label { font-size: 9px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 600; }
.hub-stat-mini-value { font-size: 1.25rem; font-weight: 800; color: white; }
.hub-stat-mini-trend { font-size: 10px; color: #4ADE80; margin-top: 2px; }

.hub-services-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.hub-service-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-sm); transition: background .2s; }
.hub-service-row:hover { background: rgba(255,255,255,0.07); }
.hub-service-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-service-icon svg { width: 14px; height: 14px; }
.hub-service-icon.purple { background: rgba(124,58,237,0.2); }
.hub-service-icon.purple svg { stroke: #A78BFA; }
.hub-service-icon.blue   { background: rgba(37,99,235,0.2); }
.hub-service-icon.blue svg { stroke: #60A5FA; }
.hub-service-icon.green  { background: rgba(16,185,129,0.2); }
.hub-service-icon.green svg { stroke: #34D399; }
.hub-service-info { flex: 1; min-width: 0; }
.hub-service-name { font-size: 12px; font-weight: 600; color: white; margin: 0; }
.hub-service-meta { font-size: 10px; color: rgba(255,255,255,0.5); margin: 2px 0 0; }
.hub-service-badge { font-size: 9px; color: #4ADE80; padding: 3px 7px; background: rgba(74,222,128,0.1); border-radius: var(--radius-pill); font-weight: 600; }
.hub-service-badge.warn { color: #FBBF24; background: rgba(251,191,36,0.12); }

.hub-deadline { background: linear-gradient(135deg, rgba(74,222,128,0.1) 0%, rgba(74,222,128,0.04) 100%); border: 1px solid rgba(74,222,128,0.22); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.hub-deadline-icon { width: 28px; height: 28px; background: rgba(74,222,128,0.16); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hub-deadline-icon svg { width: 14px; height: 14px; stroke: #4ADE80; }
.hub-deadline-content { flex: 1; }
.hub-deadline-label { font-size: 9px; color: #4ADE80; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 2px; }
.hub-deadline-text { font-size: 12px; color: white; font-weight: 600; }

/* ---- BANKING (FIXED v3 — HQ images, mobile-only Payoneer) ---- */
.banking-section { padding: 80px 0; background: var(--bg-white); }
.banking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
.banking-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 18px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), opacity .6s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Initial state for reveal animation */
    opacity: 0;
    transform: translateY(24px);
}
.banking-card.revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Reduced-motion users: skip the entrance animation, show immediately */
@media (prefers-reduced-motion: reduce) {
    .banking-card { opacity: 1; transform: none; transition: none; }
}
.banking-card:hover {
    border-color: var(--border-medium);
    box-shadow: 0 14px 32px rgba(26,26,27,.10);
    transform: translateY(-4px);
}
.banking-card-image {
    width: 100%;
    aspect-ratio: 1.6 / 1;          /* credit-card proportions */
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-cream);
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(26,26,27,0.08);
    transition: transform .35s var(--ease);
}
.banking-card:hover .banking-card-image { transform: scale(1.03); }
.banking-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* High-quality scaling on all devices, especially mobile/Retina */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    transform: translateZ(0);          /* force GPU layer for smoother scaling */
}
@supports (image-rendering: high-quality) {
    .banking-card-image img { image-rendering: high-quality; }
}
.banking-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 0 4px 4px;
}
.banking-logo {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.banking-type {
    font-size: 10px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Payoneer is shown only on small screens — kept hidden on desktop / tablet */
.banking-card-mobile-only { display: none !important; }
@media (max-width: 768px) {
    .banking-card-mobile-only { display: flex !important; }
}

/* Per-device visibility (2026-09-07) — an admin can hide an individual bank
   card on a specific screen width (Manage bank partners → "Hide on …"). Used to
   drop an odd-one-out card on the width where it would sit alone, without
   removing it on the others. Breakpoints:
     mobile  ≤ 640px
     tablet  641–1024px
     desktop ≥ 1025px
   !important so it overrides the base `.banking-card` display. */
@media (max-width: 640px) {
    .banking-card.bank-hide-mobile { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .banking-card.bank-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
    .banking-card.bank-hide-desktop { display: none !important; }
}

/* ---- WHY US (FIXED — proper semantic icons) ---- */
.why-section {
    padding: 80px 0;
    background: var(--bg-dark);
    position: relative;
    overflow: hidden;
}
/* Subtle ambient orange glow at bottom-left for warmth (not AI-generic) */
.why-section::before {
    content: '';
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,107,53,0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.why-section .container { position: relative; z-index: 1; }
.why-section .section-title { color: white; }
.why-section .section-subtitle { color: rgba(255,255,255,0.65); }
.why-section .section-badge { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #FFD0B8; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card {
    text-align: center;
    padding: 32px 24px 28px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl);
    transition: all .3s var(--ease);
    position: relative;
}
.why-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.why-card:hover {
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border-color: rgba(255,107,53,0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
.why-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    background: var(--wi-grad, linear-gradient(135deg, #FF8E53 0%, #FF6B35 100%));
    box-shadow: 0 10px 24px var(--wi-shadow, rgba(255,107,53,0.4)), inset 0 1px 0 rgba(255,255,255,0.25);
    position: relative;
    transition: transform .3s var(--ease);
}
.why-icon::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 55%);
    pointer-events: none;
}
.why-card:hover .why-icon { transform: scale(1.08) rotate(-4deg); }
.why-icon svg {
    width: 26px; height: 26px;
    fill: white;
    stroke: none;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* Distinct gradient per Why Us card */
.why-card:nth-child(1) .why-icon { --wi-grad: linear-gradient(135deg, #FF8E53 0%, #FF6B35 100%); --wi-shadow: rgba(255,107,53,0.4); }
.why-card:nth-child(2) .why-icon { --wi-grad: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); --wi-shadow: rgba(37,99,235,0.4); }
.why-card:nth-child(3) .why-icon { --wi-grad: linear-gradient(135deg, #10B981 0%, #059669 100%); --wi-shadow: rgba(16,185,129,0.4); }
.why-card:nth-child(4) .why-icon { --wi-grad: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%); --wi-shadow: rgba(245,158,11,0.4); }
.why-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.why-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.62);
    line-height: 1.6;
    margin: 0;
}

/* ---- REVIEWS (FIXED — equal heights, balanced layout) ---- */
.reviews-section { padding: 80px 0; background: var(--bg-cream); }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.review-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all .3s var(--ease);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.review-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); border-color: var(--border-medium); }
.review-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 18px;
    flex: 1;          /* push author to bottom in equal-height cards */
}
.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
    margin-top: auto;
}
.review-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 1px; }
.review-location { font-size: 11px; color: var(--text-tertiary); }

/* ---- FAQ (FIXED v3 — matches faq.php approach exactly) ---- */
.faq-section { padding: 80px 0; background: var(--bg-white); }
.faq-section .container { max-width: 860px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-section .faq-item {
    background: var(--bg-cream);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all .25s ease;
}
.faq-section .faq-item:hover {
    border-color: var(--accent-orange);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.faq-section .faq-item.active {
    border-color: var(--accent-orange);
    box-shadow: 0 4px 15px rgba(255,107,53,0.15);
    background: var(--bg-white);
}

.faq-section .faq-item .faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    transition: all .2s ease;
}
.faq-section .faq-item .faq-question:hover {
    background: rgba(255,107,53,0.03);
    color: var(--accent-orange);
}
.faq-section .faq-item .faq-question span {
    flex: 1;
    min-width: 0;
}
.faq-section .faq-item .faq-question svg {
    width: 20px;
    height: 20px;
    stroke: var(--accent-orange);
    flex-shrink: 0;
    transition: transform .2s ease;
}
.faq-section .faq-item.active .faq-question svg {
    transform: rotate(45deg);
}

/* FIX #7 (2026-08-10 front-end audit) — TRUNCATED ANSWERS.
   The accordion animated `max-height: 0` -> `max-height: 500px`. On a phone
   (13-15px text, line-height 1.8 => ~24-27px a line) 500px is roughly 18 lines,
   and the "Are there hidden fees?" answer below runs well past that once the
   renewal explanation and the /services#renewals link are included. Everything
   past the 500px mark was silently clipped by `overflow: hidden` — no
   scrollbar, no ellipsis, no hint that the sentence continued. On the one FAQ
   entry that exists to prevent billing surprises, that is the worst possible
   place to hide text.
   The grid `0fr -> 1fr` technique animates to the content's ACTUAL height, so
   answers of any length open fully — and it closes crisply too, instead of
   spending most of the transition animating through empty space.
   Kept in sync with the identical fix in faq.php. */

/* ═══════════════════════════════════════════════════════════════════
   FIX A (2026-08-10) — ACCORDION ANSWERS WERE VISIBLE WHILE CLOSED.

   WHAT WENT WRONG WITH THE GRID TECHNIQUE
   ---------------------------------------
   FIX #7 replaced `max-height` with `grid-template-rows: 0fr -> 1fr`. That
   pattern is correct ONLY when the collapsed child has no padding, because
   `overflow: hidden` clips to the element's PADDING box, not its content box.

   .faq-answer-content carries `padding-top: 1.25rem` and
   `padding-bottom: 1.5rem`. So at `0fr` the content box collapsed to 0 as
   intended, but the padding box was still ~44px tall — and the first line or
   two of the answer rendered inside that padding strip, permanently visible
   under every closed question. Exactly what the screenshots showed.

   The textbook fix is to move the padding onto an inner wrapper, but that
   means new markup in two files and a third revision of the same component.

   WHY max-height IS BACK
   ----------------------
   `max-height` clips reliably regardless of padding, needs no markup change,
   and works in every browser with no @supports fallback. Its only real
   drawback is that the cap must exceed the tallest answer — the ORIGINAL bug
   (FIX #7) was simply that 500px was too small, not that the technique was
   wrong. 1500px is ~55 lines at this font size; the longest answer here is
   about 20 lines on a 360px phone, so there is generous headroom.

   THE !important IS LOAD-BEARING
   ------------------------------
   css/styles.min.css (previous design, still linked from includes/header.php)
   declares `.faq-item.active .faq-answer { max-height: 300px }` at specificity
   (0,3,0). This page's rule has the same specificity, so without !important
   whichever file loads last would win — and that ordering is exactly what
   caused regression R1. !important removes the ambiguity.
   ═══════════════════════════════════════════════════════════════════ */
.faq-section .faq-answer {
    display: block;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease;
}
.faq-section .faq-item.active .faq-answer {
    max-height: 1500px !important;
    transition: max-height 0.45s ease-in;
}
@media (prefers-reduced-motion: reduce) {
    .faq-section .faq-answer,
    .faq-section .faq-item.active .faq-answer { transition: none; }
}
.faq-section .faq-answer-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 0.9375rem;
    border-top: 1px solid #f3f4f6;
    padding-top: 1.25rem;
    animation: faqFadeIn .2s ease-out;
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- CHAT WIDGET ---- */
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 999; }
.chat-btn { width: 56px; height: 56px; background: var(--accent-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 20px rgba(255,107,53,0.4); border: none; transition: all .3s var(--ease); }
.chat-btn:hover { transform: scale(1.1); }
.chat-btn svg { width: 26px; height: 26px; stroke: white; }

/* ============================================================
   RESPONSIVE — fully audited for all viewport sizes
   Default styles target 1280px+ desktop.
   ============================================================ */

/* Mid-laptop / smaller desktop */
@media (max-width: 1280px) {
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
    .banking-grid { grid-template-columns: repeat(3, 1fr); max-width: 920px; }
    .why-grid { gap: 20px; }
    .hub-grid { gap: 40px; }
}

/* Tablet landscape */
@media (max-width: 1024px) {
    .hero-grid, .hub-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-content { text-align: center; max-width: 100%; }
    .hero-actions, .hero-trust { justify-content: center; }

    /* FIX: Center the "From £24.99 + £100 CH fee" price line on tablets too,
       not just on phones. Was only triggering at 768px. */
    .hero-price {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .trust-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .steps-grid::before { display: none; }
    .banking-grid { grid-template-columns: repeat(3, 1fr); max-width: 720px; }
    .why-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }

    /* FIX: Center the hub features list AND center each row's content
       (tick + text) as a group rather than left-aligned within a centered grid */
    .hub-content { text-align: center; }
    .hub-features {
        justify-items: center;       /* centers each grid cell horizontally  */
        max-width: 460px;            /* keeps the 2-column layout compact     */
        margin-left: auto;
        margin-right: auto;
    }
    .hub-feature {
        justify-content: flex-start;  /* tick stays on the left of the text  */
        text-align: left;             /* multi-line wrapping reads naturally */
    }
    .hub-cta { align-self: center; }

    .faq-section .container { max-width: 720px; }
}

/* Tablet portrait / large mobile */
@media (max-width: 768px) {
    .hero { padding: 28px 0 48px; }
    .hero-title { font-size: 1.875rem; }
    .hero-subtitle { font-size: 0.9375rem; }

    /* FIX: Center the price block on mobile */
    .hero-price {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Hero buttons — full-width but properly capped, SVG locked at 18px */
    .hero-actions { flex-direction: column; gap: 10px; align-items: stretch; }
    .hero-actions .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        min-height: 50px;
    }

    .hero-trust { gap: 14px; justify-content: center; }
    .input-row { flex-direction: column; }
    .suffix-toggle { width: 100%; height: 48px; }
    .suffix-toggle button { flex: 1; }
    .trust-grid { grid-template-columns: 1fr 1fr; max-width: 480px; gap: 12px; }
    .steps-grid, .reviews-grid { grid-template-columns: 1fr; }
    .banking-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 500px; }
    .why-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    /* ═══════════════════════════════════════════════════════════════
       CHANGE 2026-08-09 (owner request) — HUB FEATURE TICK-LIST HIDDEN
       ON MOBILE ONLY.

       The seven ticks (VAT & PAYE Registration, Annual Accounts Filing,
       Confirmation Statement, Registered Office Address, Amazon VAT
       Returns, Dedicated Account Manager, 24/7 Compliance Reminders)
       repeat, almost word for word, the paragraph directly above them —
       which already names VAT & PAYE registration, annual accounts,
       confirmation statements, mail forwarding and ID verification. On a
       desktop two-column layout that repetition is cheap: it sits beside
       the dashboard card and fills the column. On a phone everything
       stacks, so the reader gets the same list twice in a row and has to
       scroll past roughly 200px of it to reach the "Explore all services"
       CTA — the one element on this section that does anything.

       Hidden with display:none rather than removed from the markup, so
       the desktop layout is untouched and the content still ships to
       crawlers and to anyone who resizes.

       NOTE: the rules below (grid-template-columns, .hub-feature sizing)
       are now dead weight at this breakpoint. They are deliberately left
       in place so that reverting is a one-line delete of the display:none
       rather than a reconstruction of the mobile grid.
       ═══════════════════════════════════════════════════════════════ */
    .hub-features { display: none !important; }

    /* Retained for the revert path — see the note above. */
    .hub-feature {
        font-size: 12.5px;
        justify-content: flex-start;
        align-items: flex-start;        /* FIX: top-align tick for 2-line items */
        line-height: 1.45;
    }
    .hub-feature span:not(.hub-feature-tick) {
        flex: 1;
        min-width: 0;
    }
    .hub-feature-tick {
        width: 20px; height: 20px;
        margin-top: 1px;                 /* visual baseline alignment with text */
    }
    .hub-feature-tick svg { width: 11px; height: 11px; }
    .hero-card { padding: 22px; }
    .hero-card-header { flex-direction: column; text-align: center; gap: 10px; }
    .section-header { margin-bottom: 32px; }
    .steps-section, .pricing-section, .hub-section, .banking-section, .why-section, .reviews-section, .faq-section { padding: 56px 0; }
    .faq-section .faq-item .faq-question { font-size: 0.9375rem; padding: 1.125rem 1.25rem; }
    .faq-section .faq-answer-content { padding: 0 1.25rem 1.25rem; font-size: 0.875rem; padding-top: 1.125rem; }
    .review-card { padding: 20px; }
    .banking-card { padding: 14px; }
    .trust-item { padding: 22px 14px; }
    .why-card { padding: 24px 18px; }
}

/* Small mobile */
@media (max-width: 480px) {
    .hero-card { padding: 18px 14px; }
    .form-input { padding: 12px 14px; font-size: 16px; }     /* MUST stay 16px to avoid iOS auto-zoom */
    .suffix-toggle button { padding: 0 14px; font-size: 12px; }
    .hero-price-value { font-size: 2rem; }


    /* CRITICAL: Override animations.js inline-styled buttons to stack vertically.
       The injected HTML uses `display:flex; flex:1` per-button which on mobile
       forces them side-by-side and can overflow the viewport. Force column. */
    #checkResult > div > div:last-child {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #checkResult a[href*="checkout"],
    #checkResult button[onclick*="resetNameCheck"] {
        width: 100% !important;
        flex: 1 1 100% !important;
        padding: 14px 18px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }

    /* Tighter padding inside the check-result success/warning/error card */
    .check-result { padding: 14px !important; }

    .reviews-grid { grid-template-columns: 1fr; }
    .banking-grid { grid-template-columns: 1fr 1fr; gap: 12px; max-width: 100%; }
    .banking-card { padding: 12px; }
    .banking-card-image { margin-bottom: 10px; }
    .banking-logo { font-size: 0.875rem; }
    .banking-type { font-size: 9px; }
    .why-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .why-card { padding: 22px 14px; }
    .why-icon { width: 52px; height: 52px; margin-bottom: 14px; }
    .why-icon svg { width: 24px; height: 24px; }
    .why-title { font-size: 0.9375rem; }
    .why-desc { font-size: 12px; }
    .trust-grid { grid-template-columns: 1fr 1fr; gap: 10px; max-width: 100%; }
    .trust-item { padding: 18px 12px; }
    .trust-stat { font-size: 1.375rem; }
    .trust-icon { width: 46px; height: 46px; margin-bottom: 10px; }
    .trust-icon svg { width: 22px; height: 22px; }
    .trust-label { font-size: 10px; }
    .faq-section .faq-item .faq-question { font-size: 14px; padding: 1rem 1.125rem; }
    .faq-section .faq-item .faq-question svg { width: 18px; height: 18px; }
    .faq-section .faq-answer-content { padding: 0 1.125rem 1.125rem; font-size: 13px; padding-top: 1rem; }
    .pricing-card { padding: 24px; }
    .hub-card { padding: 18px; }
    .hub-stat-row { grid-template-columns: 1fr; }
    .hub-feature { font-size: 11px; gap: 8px; }
    .hub-feature-tick { width: 20px; height: 20px; }
    .hub-feature-tick svg { width: 11px; height: 11px; }
}

/* Extra-small phones (iPhone SE, Galaxy Fold etc.) */
@media (max-width: 360px) {
    .hero-title { font-size: 1.625rem; }
    .hero-price-value { font-size: 1.75rem; }
    .section-title { font-size: 1.5rem !important; }
    .why-grid { grid-template-columns: 1fr; }
    .why-card { padding: 24px 18px; }
    .trust-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .trust-item { padding: 14px 10px; }
    .trust-stat { font-size: 1.25rem; }
    .trust-label { font-size: 9px; }
}

/* ============================================================
   LOGOUT CONFIRMATION BANNER
   Shown briefly when user lands on / after logout (?logged_out=1).
   Auto-dismisses after 4s — non-intrusive.
   ============================================================ */
.logout-banner {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 9999;
    background: var(--bg-white, #FFFFFF);
    border: 1px solid var(--border-light, #EAEAEA);
    border-left: 4px solid var(--accent-green, #22C55E);
    border-radius: var(--radius-md, 12px);
    padding: 12px 18px 12px 14px;
    box-shadow: 0 14px 44px rgba(26,26,27,0.12);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary, #1A1A1A);
    max-width: calc(100% - 32px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.logout-banner.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.logout-banner-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(16,185,129,0.3);
}
.logout-banner-icon svg {
    width: 14px; height: 14px;
    stroke: white; fill: none;
    stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.logout-banner-text strong {
    font-weight: 700;
    margin-right: 4px;
}
.logout-banner-text span {
    color: var(--text-secondary, #6B6B6B);
}
.logout-banner-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-tertiary, #9A9A9A);
    padding: 4px;
    margin-left: 4px;
    border-radius: 4px;
    line-height: 0;
    transition: color 0.2s, background 0.2s;
    min-height: auto;
}
.logout-banner-close:hover {
    color: var(--text-primary, #1A1A1A);
    background: var(--bg-cream, #FAF9F7);
}
.logout-banner-close svg { width: 14px; height: 14px; }
@media (max-width: 480px) {
    .logout-banner {
        top: 16px;
        font-size: 13px;
        padding: 10px 14px 10px 12px;
        gap: 8px;
    }
    .logout-banner-icon { width: 24px; height: 24px; }
    .logout-banner-icon svg { width: 12px; height: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LATEST FROM THE BLOG — horizontally-scrollable strip above the FAQ
   (2026-09-07). Self-contained; reuses the shared .section-header. Cards are
   white so they read on the cream section, and the whole strip scrolls sideways
   with snap points. Fully responsive: ~3–4 cards on desktop, one-and-a-peek on
   phones. Tokens carry fallbacks so it renders even if one is missing here.
   ═══════════════════════════════════════════════════════════════════════════ */
.home-blog-section {
    padding: 80px 0;
    background: var(--bg-cream, #FAF9F7);
    max-width: 100%;
    overflow: hidden;               /* contains the scroller; never bleeds the page */
}
.home-blog-section .section-header { margin-bottom: 36px; }

/* The scroll track is full-width; padding-inline lines the first/last card up
   with the centred container on wide screens and falls back to the normal
   gutter on small ones. */
.home-blog-scroller {
    display: flex;
    gap: 20px;
    /* FIX (2026-09-07) — the strip is now a CENTRED block: capped to the same
       width as every other section and auto-margined, so it sits in the middle
       of the page instead of bleeding to the left edge. Cards scroll inside it. */
    max-width: 1200px;
    margin-inline: auto;
    padding-block: 6px 10px;        /* room for card shadow / focus ring */
    padding-inline: var(--space-lg, 24px);
    scroll-padding-inline: var(--space-lg, 24px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    cursor: grab;                   /* hints the strip is draggable */
    /* No visible scrollbar — swipe / trackpad / wheel / drag / arrows only. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.home-blog-scroller.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;         /* free drag, no snap fighting the pointer */
    scroll-behavior: auto;
    user-select: none;
}
.home-blog-scroller.is-dragging a,
.home-blog-scroller.is-dragging img { pointer-events: none; }
.home-blog-scroller::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Arrow controls (desktop / any pointer device) ──────────────────────────
   The strip has no scrollbar, and a mouse can't swipe — so on wider screens
   these buttons are the way to move through the cards. JS adds .has-overflow
   only when the cards actually overflow, so the arrows never show when every
   card already fits, and each arrow hides (opacity 0) at its end of the track. */
.home-blog-viewport {
    position: relative;
    max-width: 1200px;
    margin-inline: auto;
}
.home-blog-nav {
    position: absolute;
    top: 90px;                      /* centred on the ~168px image band */
    transform: translateY(-50%);
    z-index: 4;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-light, #EAEAEA);
    box-shadow: var(--shadow-float, 0 8px 22px rgba(0,0,0,0.12));
    color: var(--text-primary, #1A1A1B);
    display: none;                  /* shown by .has-overflow below */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, opacity .18s ease, border-color .18s ease;
}
.home-blog-nav svg { width: 22px; height: 22px; }
.home-blog-nav.prev { left: 4px; }
.home-blog-nav.next { right: 4px; }
.home-blog-viewport.has-overflow .home-blog-nav { display: flex; }
.home-blog-nav:hover {
    background: var(--accent-orange, #F97316);
    color: #fff;
    border-color: var(--accent-orange, #F97316);
}
.home-blog-nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
    .home-blog-nav { display: none !important; }   /* phones/tablets use swipe */
}

/* ── Swipe cue (same pattern as the Services renewal table) ─────────────────*/
@keyframes scrollHint {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50%      { transform: translateX(8px); opacity: 1; }
}
.home-blog-section .scroll-hint-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 0;
    font-size: 0.8125rem;
    color: var(--text-tertiary, #A1A1AA);
}
.home-blog-section .scroll-hint-mobile svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-orange, #F97316);
    fill: none;
    animation: scrollHint 1.5s ease-in-out infinite;
}
@media (max-width: 768px) {
    .home-blog-section .scroll-hint-mobile { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .home-blog-section .scroll-hint-mobile svg { animation: none; }
}

.home-blog-card {
    flex: 0 0 320px;
    max-width: 84vw;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-light, #EAEAEA);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.06));
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.home-blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-float, 0 12px 28px rgba(0,0,0,0.10));
}
.home-blog-card-media {
    display: block;
    /* FIX (2026-09-07) — show the WHOLE banner, never a centre-crop. The images
       are wide (~40:21); this box matches that ratio and `contain` guarantees
       the full image is visible on every device. The <picture> keeps its own
       blurred LQIP as the background, so the rare image with a different ratio
       gets a soft backdrop in the sliver beside it instead of empty bars. */
    aspect-ratio: 40 / 21;
    background: var(--bg-warm, #F5F3EF);
    overflow: hidden;
}
.home-blog-card-media picture {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-position: center;
}
.home-blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.home-blog-card-ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary, #A1A1AA);
}
.home-blog-card-ph svg { width: 40px; height: 40px; }

.home-blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    flex: 1 1 auto;
}
.home-blog-chip {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.10);
    color: var(--accent-orange, #F97316);
}
.home-blog-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 1.075rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
}
.home-blog-card-title a { color: var(--text-primary, #1A1A1B); text-decoration: none; }
.home-blog-card-title a:hover { color: var(--accent-orange, #F97316); }
.home-blog-card-excerpt {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary, #52525B);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-blog-card-meta {
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.8rem;
    color: var(--text-tertiary, #A1A1AA);
}

.home-blog-actions { margin-top: 28px; text-align: center; }
.home-blog-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent-orange, #F97316);
    text-decoration: none;
    padding: 10px 18px;
    border: 1px solid var(--border-light, #EAEAEA);
    border-radius: 999px;
    background: var(--bg-white, #fff);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.home-blog-all:hover { border-color: var(--accent-orange, #F97316); transform: translateY(-1px); }

@media (max-width: 640px) {
    .home-blog-section { padding: 56px 0; }
    .home-blog-card { flex-basis: 84vw; }
    .home-blog-card-body { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-blog-card,
    .home-blog-all { transition: none; }
    .home-blog-scroller { scroll-behavior: auto; }
}
