/* ==================================================
   HOME PAGE (v2) — same look as /app/dashboard
   Loaded only by layout/home-v2.blade.php. Every rule is
   scoped to .f2h-* or body.f2h-page so the shared landing
   CSS (global.css / newMainIndex.css) and the other website
   pages are untouched.
   ================================================== */

body.f2h-page {
    --f2h-ink: #101828;
    --f2h-text: #2E2E2E;
    --f2h-muted: #5D5D5D;
    --f2h-line: #E2E8F0;
    --f2h-purple: #7F56D9;
    --f2h-purple-hover: #6941C6;
    --f2h-purple-light: #F4F3FF;
    --f2h-green: #3F9142;
    --f2h-gradient: linear-gradient(90deg, #69C0FC 0%, #B255FE 35%, #E86A5E 70%, #EF944E 100%);
    --f2h-ring: conic-gradient(from var(--f2h-angle), #69C0FC 0deg, #7F56D9 70deg, #B255FE 140deg, #E86A5E 210deg, #EF944E 280deg, #69C0FC 360deg);
    --f2h-glass: rgba(255, 255, 255, 0.8);
    --f2h-radius: 23px;
    --f2h-header-h: 68px;

    /* Re-theme the shared landing CSS (login/signup modal, footer) from red to the /app purple */
    --primary-font: 'Inter', sans-serif;
    --primary-color: #7F56D9;
    --link-color: #7F56D9;
    --btn-primary-bg-color: #7F56D9;
    --btn-primary-bg-color-hover: #6941C6;

    margin: 0;
    color: var(--f2h-text);
    /* Same soft gradient as the /app dashboard */
    background: linear-gradient(180deg, #C7D9FC 0%, #E5D8FB 35%, #F9D6E3 70%, #FCE2D7 100%) fixed;
    -webkit-font-smoothing: antialiased;
}

body.f2h-page::-webkit-scrollbar-thumb {
    background: #B9A4F0;
}

.f2h-header,
.f2h-main {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.f2h-main h1,
.f2h-main h2,
.f2h-main p {
    font-family: inherit;
    margin: 0;
}

.f2h-main img {
    max-width: 100%;
}

.f2h-wrap {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.f2h-gradient-text {
    background: var(--f2h-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.f2h-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: var(--f2h-purple);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.f2h-glass {
    background: var(--f2h-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--f2h-radius);
}

/* ---------- Buttons ---------- */
.f2h-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    /* same radius as the /app .fb-btn */
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.f2h-btn:hover,
.f2h-btn:focus {
    text-decoration: none;
}

.f2h-btn--lg {
    height: 50px;
    padding: 0 26px;
    font-size: 15px;
    border-radius: 10px;
}

.f2h-btn--primary {
    background: var(--f2h-purple);
    color: #FFFFFF;
    box-shadow: 0 8px 20px rgba(127, 86, 217, 0.28);
}

/* header "Signup": same box as the old "Signup Free" label, text centred */
.f2h-header__actions .f2h-btn--primary {
    min-width: 119px;
}

.f2h-btn--primary:hover,
.f2h-btn--primary:focus {
    background: var(--f2h-purple-hover);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.f2h-btn--ghost {
    background: rgba(255, 255, 255, 0.85);
    border-color: #FFFFFF;
    color: var(--f2h-text);
}

.f2h-btn--ghost:hover,
.f2h-btn--ghost:focus {
    background: #FFFFFF;
    color: var(--f2h-purple);
    border-color: #D9CCF7;
}

.f2h-btn--white {
    background: #FFFFFF;
    color: var(--f2h-purple);
}

.f2h-btn--white:hover,
.f2h-btn--white:focus {
    color: var(--f2h-purple-hover);
    transform: translateY(-1px);
}

.f2h-btn--outline-white {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
    color: #FFFFFF;
}

.f2h-btn--outline-white:hover,
.f2h-btn--outline-white:focus {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}

/* ---------- Header ---------- */
.f2h-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* white bar + #E9EDEF line, like the /app .fb-navbar */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #E9EDEF;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.f2h-header.is-scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 6px 24px rgba(16, 24, 40, 0.06);
}

.f2h-header__row {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--f2h-header-h);
}

.f2h-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* logo_new.svg (the /app dashboard wordmark) has built-in top/bottom space, so 44px tall ≈ the app's 145px width */
.f2h-brand img {
    display: block;
    height: 44px;
    width: auto;
}

.f2h-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
}

.f2h-nav__item {
    position: relative;
}

.f2h-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--f2h-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.f2h-nav__link:hover,
.f2h-nav__link:focus,
.f2h-nav__item.is-open > .f2h-nav__link {
    background: rgba(127, 86, 217, 0.08);
    color: var(--f2h-purple);
    text-decoration: none;
}

.f2h-nav__link svg {
    transition: transform 0.2s ease;
}

.f2h-nav__item.is-open > .f2h-nav__link svg {
    transform: rotate(180deg);
}

.f2h-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: 340px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--f2h-line);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Invisible bridge so the menu stays open while the pointer moves down to it */
.f2h-drop::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.f2h-nav__item.is-open > .f2h-drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (hover: hover) and (min-width: 1025px) {
    .f2h-nav__item--drop:hover > .f2h-drop {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

.f2h-drop__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--f2h-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
}
/* items without a hint line (Pricing menu): title centred against the icon, menu kept narrow */
.f2h-drop__item:not(:has(small)) { align-items: center; }
.f2h-drop--compact { width: 260px; }

.f2h-drop__item:hover,
.f2h-drop__item:focus {
    background: var(--f2h-purple-light);
    color: var(--f2h-text);
    text-decoration: none;
}

.f2h-drop__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid var(--f2h-line);
}

.f2h-drop__icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.f2h-drop__item strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--f2h-ink);
}

.f2h-drop__item small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--f2h-muted);
    white-space: nowrap; /* one short line per item; the copy is written to fit */
    overflow: hidden;
    text-overflow: ellipsis;
}

.f2h-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.f2h-burger {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
}

.f2h-burger span,
.f2h-burger span::before,
.f2h-burger span::after {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: var(--f2h-text);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.f2h-burger span {
    top: 50%;
    margin-top: -1px;
}

.f2h-burger span::before,
.f2h-burger span::after {
    content: '';
    left: 0;
    margin-left: 0;
}

.f2h-burger span::before { top: -6px; }
.f2h-burger span::after { top: 6px; }

.f2h-menu-open .f2h-burger span { background: transparent; }
.f2h-menu-open .f2h-burger span::before { transform: translateY(6px) rotate(45deg); }
.f2h-menu-open .f2h-burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.f2h-main {
    overflow-x: hidden;
}

.f2h-hero {
    position: relative;
    padding: 64px 0 48px;
}

.f2h-blobs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* The hero's blobs are clipped by the section's bottom edge, which sits right under the stats row: fade them
   out towards it so there is no hard colour band above the certifications */
.f2h-hero > .f2h-blobs {
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Static on purpose — the dashboard dropped its blob animation because of CPU cost */
.f2h-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.75;
}

.f2h-blob--1 { width: 460px; height: 460px; left: -120px; top: -140px; background: #C1A8ED; }
.f2h-blob--2 { width: 420px; height: 420px; right: -80px; top: 40px; background: #A8D4F5; }
.f2h-blob--3 { width: 380px; height: 380px; left: 35%; bottom: -160px; background: #F5B8C9; }
.f2h-blob--4 { width: 300px; height: 300px; right: 18%; bottom: -60px; background: #FAD3B5; }

/* dashboard-style card around the hero */
.f2h-hero__card {
    padding: 32px 40px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--f2h-radius);
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .f2h-hero__card { padding: 24px 18px; }
}

.f2h-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
}

/* one size rule: scales with the viewport so "Signup & Test Bulk SMS" stays on its own line on desktop */
.f2h-hero__title {
    margin-top: 18px !important;
    font-size: clamp(30px, 3.5vw, 56px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--f2h-ink);
}

.f2h-hero__lead {
    margin-top: 18px !important;
    max-width: 560px;
    font-size: 18px;
    line-height: 28px;
    color: var(--f2h-muted);
}

.f2h-credit {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
    padding: 12px 20px 12px 12px;
    border-radius: 16px;
    background: var(--f2h-glass);
    border: 1px solid #FFFFFF;
    position: relative;
    isolation: isolate;
}

.f2h-credit__amount {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 52px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--f2h-gradient);
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 700;
}

.f2h-credit__text {
    font-size: 13.5px;
    line-height: 19px;
    color: var(--f2h-muted);
}

.f2h-credit__text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--f2h-ink);
}

.f2h-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* Dashboard preview */
.f2h-hero__visual {
    position: relative;
}

/* hero globe: same SVG as the modal. Its grid lines are white, so a soft disc (the modal's
   lavender-to-peach) sits behind it; the globe fills ~95% of the SVG, hence the 95% stop */
.f2h-hero-globe {
    width: 100%;
    /* as big as the first screen allows: header + card chrome take ~230px (the stats row may sit below the fold) */
    max-width: clamp(300px, calc(100vh - 230px), 620px);
    min-width: 300px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background: radial-gradient(circle closest-side, #E4D9FA 0%, #EEDFF5 55%, #FBE1E3 94%, transparent 95.5%);
}

.f2h-hero-globe object {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Card with the dashboard's spinning colour ring on hover */
@property --f2h-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

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

.f2h-channel {
    --f2h-angle: 0deg;
    position: relative;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #FFFFFF;
    border-radius: 12px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.f2h-channel::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: var(--f2h-ring);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.f2h-channel:hover {
    background: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px rgba(127, 86, 217, 0.14), 0 0 18px rgba(105, 192, 252, 0.12);
    transform: translateY(-2px);
}

.f2h-channel:hover::before {
    opacity: 1;
    animation: f2h-ring-spin 2.8s linear infinite;
}

/* Stats */
.f2h-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 56px;
    padding: 22px 8px;
    background: var(--f2h-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
}

.f2h-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    text-align: center;
}

.f2h-stat + .f2h-stat {
    border-left: 1px solid var(--f2h-line);
}

.f2h-stat__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 34px;
    color: var(--f2h-ink);
}

.f2h-stat__label {
    font-size: 14px;
    color: var(--f2h-muted);
}

/* ---------- Sections ---------- */
.f2h-section {
    position: relative;
    padding: 64px 0;
}

.f2h-section--tight {
    padding: 32px 0;
}

.f2h-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    text-align: center;
}

.f2h-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--f2h-ink);
}

.f2h-title--sm {
    margin-top: 10px !important;
    font-size: 26px;
}

.f2h-sub {
    max-width: 620px;
    font-size: 16px;
    line-height: 24px;
    color: var(--f2h-muted);
}

.f2h-eyebrow {
    margin: 0 0 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--f2h-muted);
}

/* Certifications: auto-sliding logo strip (the old home's slick slider look: 4 equal slides in view,
   each logo centred in its slide at its own max width; the scroller script in home.blade.php drives the drift) */
.f2h-trust__block {
    min-width: 0;
    padding: 26px 32px;
    background: var(--f2h-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
}

.f2h-trust__block .f2h-eyebrow {
    text-align: center;
}

.f2h-logos {
    --f2h-logos-per-view: 4;
    --f2h-logos-gap: 24px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.f2h-logos__track {
    display: flex;
    align-items: center;
    gap: var(--f2h-logos-gap);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.f2h-logos__track::-webkit-scrollbar {
    display: none;
}

.f2h-logo {
    flex: 0 0 calc((100% - (var(--f2h-logos-per-view) - 1) * var(--f2h-logos-gap)) / var(--f2h-logos-per-view));
    display: flex;
    align-items: center;
    justify-content: center;
    /* as tall as the old slick slides: the square badge/VAPT files need the height to reach their 200px width */
    height: 200px;
    padding: 0 12px;
    box-sizing: border-box;
}

.f2h-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, var(--f2h-logo-w, 220px));
    max-height: 200px;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .f2h-logos { --f2h-logos-per-view: 3; }
}

@media (max-width: 767px) {
    .f2h-logo { height: 140px; }
    .f2h-logo img { max-height: 140px; }
}

@media (max-width: 575px) {
    .f2h-logos { --f2h-logos-per-view: 2; --f2h-logos-gap: 16px; }
}

/* Channels */
.f2h-channels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.f2h-channel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 24px 22px;
    border-radius: 18px;
    text-decoration: none;
    color: var(--f2h-text);
}

.f2h-channel:hover,
.f2h-channel:focus {
    text-decoration: none;
    color: var(--f2h-text);
}

/* icon + name row with the arrow pushed to the right */
.f2h-channel__head {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.f2h-channel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #EEF4FF 0%, #F4F3FF 50%, #FDF2FA 100%);
}

.f2h-channel__icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.f2h-channel__title {
    flex: 1;
    min-width: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--f2h-ink);
}

/* nudges while the card is hovered, like the old .home-feature-block title chevron */
.f2h-channel__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F4F3FF;
    color: var(--f2h-purple);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.f2h-channel:hover .f2h-channel__arrow,
.f2h-channel:focus .f2h-channel__arrow,
.f2h-integration:hover .f2h-channel__arrow,
.f2h-integration:focus .f2h-channel__arrow {
    background: var(--f2h-purple);
    color: #FFFFFF;
    animation: f2h-arrow-nudge 1.1s ease-in-out infinite;
}

@keyframes f2h-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-channel:hover .f2h-channel__arrow,
    .f2h-integration:hover .f2h-channel__arrow { animation: none; transform: translateX(4px); }
}

.f2h-channel__text {
    margin-top: 14px !important;
    font-size: 14.5px;
    line-height: 22px;
    color: var(--f2h-muted);
    flex: 1;
}

/* CTA banners */
.f2h-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--f2h-radius);
}

.f2h-cta--price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 44px;
    background: var(--f2h-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.f2h-cta__title {
    display: block;
    position: relative;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--f2h-ink);
}

.f2h-cta__text {
    position: relative;
    margin-top: 8px !important;
    font-size: 16px;
    color: var(--f2h-muted);
}

.f2h-cta__actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.f2h-cta--final {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 32px;
    text-align: center;
    background: var(--f2h-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.f2h-cta--final .f2h-cta__title {
    font-size: 40px;
}

.f2h-cta--final .f2h-cta__actions {
    margin-top: 28px;
    justify-content: center;
}


/* Audience — flex so a short last row stays centred */
.f2h-audience {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.f2h-audience__card {
    flex: 1 1 calc(20% - 13px);
    min-width: 0;
    padding: 24px 20px;
    border-radius: 18px;
    background: var(--f2h-glass);
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.f2h-audience__card:hover {
    background: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(127, 86, 217, 0.12);
}

.f2h-audience__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid var(--f2h-line);
}

.f2h-audience__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.f2h-audience__title {
    display: block;
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--f2h-ink);
}

.f2h-audience__card p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 21px;
    color: var(--f2h-muted);
}

/* Integrations */
.f2h-integrations {
    padding: 32px 36px 36px;
}

.f2h-integrations__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* ---------- Footer re-skin (home page only) ----------
   footerindex.blade.php is shared with the other website pages (dark footer there).
   Here it becomes a light glass card like the /app dashboard. */
/* ---------- Footer (shared partial footerindex.blade.php, re-skinned here only) ----------
   Sits on the page gradient and fades into white, so there is no hard edge under the last section;
   the four columns are a grid (brand column a little wider) instead of the stock 25% bootstrap columns. */
body.f2h-page footer {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 0;
    border: 0;
}

body.f2h-page .footer-main {
    padding: 0;
    background: #FFFFFF;
    border: 0;
}

body.f2h-page .footer-main > .container {
    width: 100%;
    max-width: 1360px;
    padding: 64px 64px 28px; /* columns sit well inside the page edge, like the hero card's inner padding */
    background: none;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
}

body.f2h-page .footer-main .row {
    display: grid;
    /* brand column sizes to its content so it ends flush with the right edge (same gap as the left) */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 1fr) auto;
    gap: 32px 40px;
    margin: 0;
}

body.f2h-page .footer-main .row > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
}

/* copyright + FAQ rows span the whole grid */
body.f2h-page .footer-main .row > .col-md-12,
body.f2h-page .footer-main .row > .col-12 {
    grid-column: 1 / -1;
}

body.f2h-page .footer-main,
body.f2h-page .footer-main a {
    color: var(--f2h-text);
}

body.f2h-page .footer-main a:hover,
body.f2h-page .footer-main a:focus {
    color: var(--f2h-purple);
    text-decoration: none;
}

body.f2h-page .ft-widget {
    margin: 0;
}

body.f2h-page .ft-widget .ft-title {
    position: relative;
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 20px;
    color: var(--f2h-ink);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

body.f2h-page .ft-widget .ft-title::before {
    width: 28px;
    height: 3px;
    border: 0;
    border-radius: 3px;
    background: var(--f2h-gradient);
}

body.f2h-page .ft-widget .ft-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.f2h-page .ft-widget .ft-nav li + li {
    margin-top: 0;
}

body.f2h-page .ft-widget .ft-nav li a {
    display: inline-block;
    font-size: 14.5px;
    line-height: 32px;
    color: var(--f2h-muted);
    transition: color 0.15s ease;
}

body.f2h-page .ft-widget .ft-nav li a:hover {
    color: var(--f2h-purple);
}

/* apps without a page yet (Campaign, Voice Call) */
body.f2h-page .ft-widget .ft-nav li .ft-nav__soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    line-height: 32px;
    color: var(--f2h-muted);
}
body.f2h-page .ft-widget .ft-nav li .ft-nav__soon em {
    padding: 1px 8px;
    border-radius: 10px;
    background: #F4F3FF;
    color: var(--f2h-purple);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
}

/* brand column */
body.f2h-page .ft-widget .ft-logo-box {
    display: inline-block;
    max-width: 170px;
    margin-bottom: 18px;
}

body.f2h-page .ft-widget .ft-logo-box img {
    display: block;
    height: 46px;
    width: auto;
}

body.f2h-page .ft-widget .icn-link-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 14.5px;
}

body.f2h-page .ft-widget .icn-link-block .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--f2h-purple-light);
}

body.f2h-page .ft-widget .icn-link-block .icon svg {
    width: 18px;
    height: 18px;
}

body.f2h-page .ft-widget .icn-link-block .icon svg,
body.f2h-page .ft-widget .icn-link-block .icon svg path {
    fill: var(--f2h-purple);
}

body.f2h-page .ft-widget .icn-link-block a {
    color: var(--f2h-text);
    font-weight: 500;
}

body.f2h-page .ft-widget .social-link-block {
    margin-top: 24px;
}

body.f2h-page .ft-widget .social-link-block .title {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--f2h-ink);
}

body.f2h-page .ft-widget .social-link-block ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px;
    padding: 0;
    margin: 0;
    list-style: none;
}

body.f2h-page .ft-widget .social-link-block a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--f2h-line);
    color: var(--f2h-muted);
    opacity: 1;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

body.f2h-page .ft-widget .social-link-block a:hover {
    background: #FFFFFF;
    border-color: #D0D5DD;
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
}

/* outline icons on the channel cards (API SMS) weigh the same as the filled ones next to them */
.f2h-channel__icon svg {
    stroke-width: 2.6;
    transform: scale(1.15);
}

/* Every channel icon draws at the size of the SMS bubble (which fills its canvas edge to edge).
   The scale undoes each file's own inner padding (measured ink extent at 30px):
   OTP 95%, RCS 97%, Quick SMS 94%, Campaign 81%, Voice 80%, code outline 87%.
   Applies to the channel cards and the header Channels menu alike. */
.f2h-channel__icon img,
.f2h-drop__icon img {
    transform-origin: 50% 50%;
}
.f2h-channel__icon img[src*="tabler-icon-otp-chat"],
.f2h-drop__icon img[src*="tabler-icon-otp-chat"]    { transform: scale(1.05); }
.f2h-channel__icon img[src*="rcs_1"],
.f2h-drop__icon img[src*="rcs_1"]                   { transform: scale(1.03); }
.f2h-channel__icon img[src*="quick-sms-arrow"],
.f2h-drop__icon img[src*="quick-sms-arrow"]         { transform: scale(1.06); }
.f2h-channel__icon img[src*="campaign-megaphone"],
.f2h-drop__icon img[src*="campaign-megaphone"]      { transform: scale(1.22); }
.f2h-channel__icon img[src*="voice-call"],
.f2h-drop__icon img[src*="voice-call"]              { transform: scale(1.24); }

/* official brand logos (inline SVG in footerindex.blade.php) */
body.f2h-page .ft-widget .social-link-block a .social-logo {
    display: block;
}

/* Meta Business Partner badge: a small bordered card, same family as the social buttons above it */
body.f2h-page .meta-business-block {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    padding: 8px 14px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--f2h-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
body.f2h-page .meta-business-block img { display: block; width: auto; height: 36px; max-width: 100px; object-fit: contain; }

body.f2h-page .copyright-text {
    margin-top: 20px;
    padding: 22px 0 0;
    border-top: 1px solid var(--f2h-line);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: var(--f2h-muted);
}

body.f2h-page .copyright-text a {
    color: var(--f2h-purple);
    font-weight: 500;
}

/* FAQ: accordion (script in home.blade.php) - the shared CSS forces every answer open with !important,
   so the closed state needs !important too; before the script runs, the first answer shows */
body.f2h-page .ft-faq-main {
    margin-top: 24px;
    padding-top: 28px;
    border-top: 1px solid var(--f2h-line);
}

body.f2h-page .ft-faq-main .ft-faq-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--f2h-ink);
    margin-bottom: 20px;
}

body.f2h-page .ft-faq-main .faq-list {
    background: #FFFFFF;
    border: 1px solid var(--f2h-line);
    border-radius: 12px;
    overflow: hidden;
}

body.f2h-page .ft-faq-main .faq-list + .faq-list {
    margin-top: 10px;
    border-top: 1px solid var(--f2h-line);
}

body.f2h-page .ft-faq-main .faq-list .faq-head {
    position: relative;
    padding: 16px 52px 16px 20px;
    cursor: pointer;
}

body.f2h-page .ft-faq-main .faq-list .faq-head:hover .title {
    color: var(--f2h-purple);
}

body.f2h-page .ft-faq-main .faq-head::before {
    display: none;
}

/* chevron: points down when closed, up when open */
body.f2h-page .ft-faq-main .faq-head::after {
    content: '';
    display: block;
    opacity: 1;
    position: absolute;
    top: 50%;
    right: 22px;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    background: none;
    border: 0 solid var(--f2h-purple);
    border-width: 0 2px 2px 0;
    border-radius: 1px;
    transform: rotate(45deg);
    transition: transform 0.25s ease, margin-top 0.25s ease;
}

body.f2h-page .ft-faq-main .faq-head.active::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

body.f2h-page .ft-faq-main .faq-list .faq-head .title {
    margin: 0;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 22px;
    color: var(--f2h-ink);
}

body.f2h-page .ft-faq-main .faq-list .faq-body {
    display: none !important;
    padding: 0 20px 18px;
}

body.f2h-page .ft-faq-main .faq-head.active + .faq-body,
body.f2h-page .ft-faq-main:not(.f2h-faq-ready) .ft-faq-title + .faq-list .faq-body {
    display: block !important;
    animation: f2h-faq-open 0.25s ease;
}

@keyframes f2h-faq-open {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

body.f2h-page .ft-faq-main .faq-list .faq-body :is(p, li, td, th) {
    font-size: 14.5px;
    line-height: 23px;
    color: var(--f2h-muted);
}

body.f2h-page .ft-faq-main .faq-list .faq-body a {
    color: var(--f2h-purple);
}

/* Price table — same look as the /app .fb-table */
body.f2h-page .ft-faq-main .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
}

body.f2h-page .ft-faq-main table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

body.f2h-page .ft-faq-main table :is(th, td) {
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid #E8E8E8;
    text-align: left;
    white-space: nowrap;
}

body.f2h-page .ft-faq-main thead :is(th, td) {
    background: #F9FAFB;
    color: var(--f2h-ink);
    font-weight: 600;
}

body.f2h-page .ft-faq-main tbody tr:last-child td {
    border-bottom: 0;
}

body.f2h-page .ft-faq-main tbody tr:hover td {
    background: #FBFAFF;
}

/* ---------- Responsive ---------- */
/* Large desktops (1600px+): a little more room, like the dashboard's 1423px card */
@media (min-width: 1600px) {
    .f2h-wrap { max-width: 1440px; }
    body.f2h-page .footer-main > .container { max-width: 1440px; }
    .f2h-hero { padding-top: 80px; }
}

@media (max-width: 1280px) {
    .f2h-nav__link { padding: 0 9px; }
    .f2h-header__row { gap: 16px; }
}

@media (max-width: 1200px) {
    .f2h-hero__grid { gap: 40px; }
    .f2h-audience__card { flex-basis: calc(33.333% - 11px); }
}

/* Tablet + phone: burger menu, stacked hero */
@media (max-width: 1024px) {
    .f2h-burger { display: inline-block; }

    /* absolute, not fixed: the header's backdrop-filter makes it the containing block anyway */
    .f2h-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100vh - var(--f2h-header-h));
        height: calc(100dvh - var(--f2h-header-h));
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 16px 24px 32px;
        background: #FFFFFF;
        border-top: 1px solid #E9EDEF;
        box-sizing: border-box;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .f2h-menu-open .f2h-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .f2h-menu-open,
    .f2h-menu-open body {
        overflow: hidden;
    }

    .f2h-header__actions { margin-left: auto; }

    .f2h-nav__item + .f2h-nav__item {
        border-top: 1px solid #F1F3F5;
    }

    .f2h-nav__link {
        width: 100%;
        justify-content: space-between;
        height: 52px;
        padding: 0 8px;
        font-size: 16px;
    }

    .f2h-drop {
        position: static;
        width: auto;
        padding: 0 0 10px;
        border: 0;
        box-shadow: none;
        background: transparent;
        transform: none;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    .f2h-drop::before { display: none; }

    .f2h-nav__item.is-open > .f2h-drop {
        display: block;
        transform: none;
    }

    .f2h-hero { padding-top: 48px; }

    .f2h-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .f2h-hero__copy {
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
    }

    .f2h-hero__lead { margin-left: auto !important; margin-right: auto !important; }
    .f2h-hero__cta { justify-content: center; }

    .f2h-hero__visual {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
    }

    .f2h-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .f2h-cta--price {
        flex-direction: column;
        align-items: flex-start;
    }

    /* footer: 2 x 2 columns */
    body.f2h-page .footer-main .row {
        grid-template-columns: 1fr 1fr;
        gap: 28px 32px;
    }
}

@media (max-width: 767px) {
    body.f2h-page { --f2h-header-h: 60px; }

    .f2h-wrap { padding: 0 16px; }
    .f2h-hide-xs { display: none; }
    .f2h-brand img { height: 38px; }
    .f2h-header__actions { gap: 8px; }
    .f2h-nav { padding: 12px 16px 28px; }

    .f2h-hero { padding: 32px 0 36px; }
    .f2h-hero__lead { font-size: 16px; line-height: 24px; }
    .f2h-credit { text-align: left; margin-top: 22px; }
    .f2h-credit__amount { min-width: 56px; height: 46px; font-size: 19px; }
    /* phones: one action per row, the signup button first and full width, the meeting link centred under it */
    .f2h-hero__cta { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 24px; }
    .f2h-hero__cta .f2h-btn { flex: 1 1 auto; width: 100%; justify-content: center; }
    .f2h-hero__cta .f2h-hero__cta-link { justify-content: center; width: 100%; height: 48px; }

    .f2h-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
        margin-top: 32px;
    }

    .f2h-stat + .f2h-stat { border-left: 0; }
    .f2h-stat:nth-child(even) { border-left: 1px solid var(--f2h-line); }
    .f2h-stat__value { font-size: 22px; line-height: 28px; }
    .f2h-stat__label { font-size: 13px; }

    .f2h-section { padding: 44px 0; }
    .f2h-section--tight { padding: 16px 0; }
    .f2h-head { margin-bottom: 28px; }
    .f2h-title { font-size: 28px; }
    .f2h-title--sm { font-size: 22px; }
    .f2h-sub { font-size: 15px; }

    .f2h-trust__block { padding: 20px 16px; }

    .f2h-channels { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .f2h-channel { padding: 22px 20px 20px; }
    .f2h-audience__card { flex-basis: 100%; }

    .f2h-cta--price { padding: 28px 22px; }
    .f2h-cta__title,
    .f2h-cta--final .f2h-cta__title { font-size: 26px; }
    .f2h-cta--final { padding: 44px 20px; }
    .f2h-cta__actions { width: 100%; }
    .f2h-cta__actions .f2h-btn { flex: 1 1 auto; }

    .f2h-integrations { padding: 24px 16px; }
    .f2h-integrations__head { flex-direction: column; align-items: flex-start; }

    body.f2h-page footer { padding-bottom: 16px; }

    body.f2h-page .footer-main > .container {
        padding: 28px 16px 22px;
    }

    body.f2h-page .footer-main > .container { padding-top: 44px; }

    /* contact + social column spans the full width under the link lists */
    body.f2h-page .footer-main .row > [class*=col-md-3]:nth-child(4) {
        grid-column: 1 / -1;
    }

    body.f2h-page .ft-faq-main .ft-faq-title { font-size: 20px; }
    body.f2h-page .ft-faq-main .faq-list .faq-head { padding: 14px 44px 14px 16px; }
    body.f2h-page .ft-faq-main .faq-list .faq-head .title { font-size: 14.5px; }
    body.f2h-page .ft-faq-main .faq-list .faq-body { padding: 0 16px 16px; }
}

/* Small phones */
@media (max-width: 400px) {
    .f2h-brand img { height: 34px; }
    .f2h-header__actions .f2h-btn { padding: 0 12px; }
    .f2h-stat__value { font-size: 19px; }

    body.f2h-page .footer-main .row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-channel:hover::before {
        animation: none;
    }

}

/* Tablet: 4 stats in one row get too tight below ~900px */
@media (min-width: 768px) and (max-width: 900px) {
    .f2h-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
    .f2h-stat + .f2h-stat { border-left: 0; }
    .f2h-stat:nth-child(even) { border-left: 1px solid var(--f2h-line); }
}

/* Header sits on white: outline the ghost button like the /app secondary button */
.f2h-header .f2h-btn--ghost {
    border-color: var(--f2h-line);
}

.f2h-nav__signup { display: none; }

@media (max-width: 1024px) {
    .f2h-nav__signup {
        display: flex;
        margin-top: 16px;
        flex-shrink: 0;
    }
}

/* ---------- Login / signup modal (shared all-modal.blade.php), home page only ----------
   The left image (bulk-sms-service-provider-4.webp) has the old coral colour baked in,
   so it is replaced with the dashboard gradient + the animated globe (data-2-v2.svg = the old
   hero globe with white grid lines) and the ₹50 offer underneath. */
body.f2h-page .loginSignupModal .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

body.f2h-page .loginSignupModal-grid .image-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 20% 15%, rgba(193, 168, 237, 0.9) 0, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(250, 211, 181, 0.9) 0, transparent 45%),
        linear-gradient(180deg, #C7D9FC 0%, #E5D8FB 35%, #F9D6E3 70%, #FCE2D7 100%);
}

body.f2h-page .f2h-modal-globe {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
}

/* tablet/phone: no room for the globe column; the form takes the whole modal
   (newMainIndex.css hides .image-block below 992px, but the flex rule above outranks it) */
@media (max-width: 991.98px) {
    body.f2h-page .loginSignupModal-grid .image-block { display: none; }
    body.f2h-page .loginSignupModal-grid .form-block { width: 100%; }
}

body.f2h-page .f2h-modal-globe object {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Fast2SMS wordmark under the globe */
body.f2h-page .f2h-modal-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* logo_new.svg has empty space above the wordmark; the negative top margin pulls it up to the globe.
   No negative bottom margin: the bolt's tail hangs below the wordmark. */
body.f2h-page .f2h-modal-caption img {
    display: block;
    width: 260px;
    height: auto;
    margin: -16px 0 0;
}

body.f2h-page .loginSignupModal .title-form-group .title {
    color: var(--f2h-ink);
    font-weight: 700;
}

body.f2h-page .loginSignupModal .form-control,
body.f2h-page .loginSignupModal .icon-input-group {
    border-radius: 8px;
}

body.f2h-page .loginSignupModal .form-control:focus {
    border-color: var(--f2h-purple);
    box-shadow: 0 0 0 3px rgba(127, 86, 217, 0.15);
}

body.f2h-page .loginSignupModal .btn {
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

body.f2h-page .loginSignupModal .btn-close {
    color: var(--f2h-muted);
}

/* every validation message under a field is red (global.css paints .error in --primary-color,
   which is purple on this page; .input_error had no colour at all) */
body.f2h-page .loginSignupModal .form-group .error,
body.f2h-page .loginSignupModal em.error,
body.f2h-page .loginSignupModal .input_error,
body.f2h-page .loginSignupModal .text-danger,
body.f2h-page .loginSignupModal .mobile-otp-error,
body.f2h-page .loginSignupModal .email-otp-error {
    color: #DC3545; /* same red the modal's own stylesheet uses for validate errors */
}

/* …and they sit in the flow under their field (global.css floats .error 18px below the input, where it
   collides with the next label). Same layout the modal's own <style> gives the signup box. */
body.f2h-page .loginSignupModal .form-group .error,
body.f2h-page .loginSignupModal em.error,
body.f2h-page .loginSignupModal label.error,
body.f2h-page .loginSignupModal .input_error {
    display: block;
    position: static;
    margin: 6px 0 0;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
}

/* the +91 mobile group is a flex row and jquery-validate drops the error inside it: wrap it onto its own
   full-width line and keep the absolutely positioned "+91" box at the input's height */
body.f2h-page .loginSignupModal .icon-input-group {
    flex-wrap: wrap;
}

body.f2h-page .loginSignupModal .icon-input-group .error {
    flex: 0 0 100%;
}

body.f2h-page .loginSignupModal .icon-input-group .text {
    bottom: auto;
    height: 45px;
}

/* the "custom rates" request box (#loginSignupModal1) is a short single-column form: it sizes to its content
   instead of inheriting the 600px scrolling form block of the login/signup modal */
body.f2h-page #loginSignupModal1 .modal-dialog { max-width: 560px; }
body.f2h-page #loginSignupModal1 .loginSignupModal-grid .form-block { height: auto; max-height: none; overflow: visible; }
body.f2h-page #loginSignupModal1 .modal-body { overflow: visible; }
body.f2h-page #loginSignupModal1 .loginSignup-box { padding: 40px 44px 36px; }
@media (max-height: 760px) {
    body.f2h-page #loginSignupModal1 .modal-body { overflow-y: auto; }
}
@media (max-width: 575.98px) {
    body.f2h-page #loginSignupModal1 .loginSignup-box { padding: 28px 20px 24px; }
}

/* the modal's scroll areas use the same thin two-tone scrollbar as the page */
body.f2h-page .loginSignupModal .modal-body,
body.f2h-page .loginSignupModal .form-block {
    scrollbar-width: thin;
    scrollbar-color: #B9A4F0 #DDDDDD;
}

body.f2h-page .loginSignupModal .modal-body::-webkit-scrollbar,
body.f2h-page .loginSignupModal .form-block::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
    background-color: #DDDDDD;
}

body.f2h-page .loginSignupModal .modal-body::-webkit-scrollbar-thumb,
body.f2h-page .loginSignupModal .form-block::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #B9A4F0;
}
/* ---------- Icon tints (replace the old red landing icons) ----------
   Same hues as the /app icons: SMS blue, WhatsApp green, brand purple, etc. */
.f2h-tint--purple { color: #7F56D9; }
.f2h-tint--blue   { color: #1556CF; }
.f2h-tint--green  { color: #0E9384; }
.f2h-tint--orange { color: #D97706; } /* the /app Settings orange (--settings-primary) */
.f2h-tint--pink   { color: #C11574; }

.f2h-tint--purple:is(.f2h-audience__icon, .f2h-drop__icon) { background: #F4F3FF; border-color: #E9E3FD; }
.f2h-tint--blue:is(.f2h-audience__icon, .f2h-drop__icon)   { background: #EFF4FF; border-color: #DCE6FD; }
.f2h-tint--green:is(.f2h-audience__icon, .f2h-drop__icon)  { background: #F0FDF9; border-color: #CCF3E8; }
.f2h-tint--orange:is(.f2h-audience__icon, .f2h-drop__icon) { background: #FFF6ED; border-color: #FDE5CC; }
.f2h-tint--pink:is(.f2h-audience__icon, .f2h-drop__icon)   { background: #FDF2FA; border-color: #FBDDF0; }

.f2h-channel__icon > span,
.f2h-audience__icon svg,
.f2h-drop__icon svg {
    display: flex;
}

/* ---------- All integrations ---------- */
.f2h-integration {
    --f2h-angle: 0deg;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #FFFFFF;
    border-radius: 14px;
    color: var(--f2h-text);
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* same spinning colour ring as the app cards */
.f2h-integration::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: var(--f2h-ring);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.f2h-integration:hover,
.f2h-integration:focus {
    background: #FFFFFF;
    border-color: transparent;
    color: var(--f2h-text);
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(127, 86, 217, 0.14), 0 0 18px rgba(105, 192, 252, 0.12);
    transform: translateY(-2px);
}

.f2h-integration:hover::before {
    opacity: 1;
    animation: f2h-ring-spin 2.8s linear infinite;
}

.f2h-integration .f2h-channel__head {
    gap: 12px;
}

.f2h-integration .f2h-channel__arrow {
    width: 28px;
    height: 28px;
}

.f2h-integration__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--f2h-line);
    overflow: hidden;
}

.f2h-integration__logo img {
    max-width: 34px;
    max-height: 30px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.f2h-integration__name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: var(--f2h-ink);
}

.f2h-integration__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 12px;
    flex: 1;
    font-size: 13px;
    line-height: 19px;
    color: var(--f2h-muted);
}

@media (max-width: 767px) {
    .f2h-integration { padding: 14px 14px 12px; }
    .f2h-integration__text { -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-integration:hover::before { animation: none; }
}

/* Integrations: horizontal strip paged by the two arrows (home.blade.php script) */
.f2h-scroller {
    position: relative;
    /* room for the hover lift + ring, which the track's overflow would clip */
    padding: 6px 0 8px;
    margin: -6px 0 -8px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.f2h-scroller__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 0 8px;
    margin: -6px 0 -8px;
}

.f2h-scroller__track::-webkit-scrollbar {
    display: none;
}

.f2h-scroller__track .f2h-integration {
    flex: 0 0 260px;
    width: 260px;
    box-sizing: border-box;
}

.f2h-scroller__nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.f2h-scroller__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--f2h-line);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--f2h-purple);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.f2h-scroller__arrow:hover,
.f2h-scroller__arrow:focus-visible {
    background: var(--f2h-purple);
    color: #FFFFFF;
    outline: none;
}

.f2h-scroller__arrow.is-hidden {
    opacity: 0.35;
    pointer-events: none;
}

/* nudge until the first scroll / click so the strip reads as scrollable */
.f2h-scroller__arrow.is-nudge {
    animation: f2h-scroller-nudge 2.6s ease-in-out infinite;
}

@keyframes f2h-scroller-nudge {
    0%, 100% { transform: translateX(0); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12); }
    50% { transform: translateX(5px); box-shadow: 0 8px 24px rgba(127, 86, 217, 0.3); }
}

@media (max-width: 767px) {
    .f2h-scroller__track .f2h-integration { flex-basis: 220px; width: 220px; }
    .f2h-scroller__arrow { width: 38px; height: 38px; }
    .f2h-scroller__nav { width: 100%; }
    .f2h-scroller__nav .f2h-btn { margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .f2h-scroller__arrow.is-nudge { animation: none; }
}

/* Send OTP / Verify buttons: all-modal.blade.php hard-codes #ff3b30 in its own <style> block,
   so the colour variables above don't reach them. Error messages (#dc3545) stay red on purpose. */
body.f2h-page .loginSignupModal .inline-input-btn {
    border-color: var(--f2h-purple);
    color: var(--f2h-purple);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
}

body.f2h-page .loginSignupModal .inline-input-btn:hover {
    background: var(--f2h-purple);
    border-color: var(--f2h-purple);
    color: #FFFFFF;
}

body.f2h-page .loginSignupModal .inline-input-btn:disabled,
body.f2h-page .loginSignupModal .inline-input-btn:disabled:hover {
    border-color: #ccc;
    color: #999;
    background: transparent;
}

/* "Resend in 30s" countdown (inline style="color: #ff3b30") */
body.f2h-page .loginSignupModal :is(.mobile-timer-msg, .email-timer-msg) > span {
    color: var(--f2h-purple) !important;
}

/* ---------- All channels: wide Channels menu + "Coming soon" ---------- */
@media (min-width: 1025px) {
    .f2h-drop--wide {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 6px;
        width: 640px;
    }
}

.f2h-drop__item.is-soon {
    cursor: default;
}

.f2h-drop__item.is-soon:hover {
    background: transparent;
}

.f2h-soon {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--f2h-purple-light);
    color: var(--f2h-purple);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px;
    vertical-align: 1px;
    white-space: nowrap;
}

/* not a link yet: no lift or colour ring */
.f2h-channel.is-soon {
    cursor: default;
}

.f2h-channel.is-soon:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: #FFFFFF;
    box-shadow: none;
    transform: none;
}

.f2h-channel.is-soon:hover::before {
    opacity: 0;
    animation: none;
}


/* 8 cards: 4 x 2 on desktop, 2 x 4 below that (3 columns would leave two cards alone) */
@media (max-width: 1200px) {
    .f2h-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .f2h-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: 2 compact cards per row (8 cards one per row made the page ~9000px long) */
@media (max-width: 767px) {
    .f2h-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .f2h-channel { padding: 18px 14px 14px; border-radius: 14px; }
    .f2h-channel__icon { width: 40px; height: 40px; border-radius: 11px; }
    .f2h-channel__icon img, .f2h-channel__icon svg { width: 22px; height: 22px; }
    .f2h-channel__head { gap: 10px; }
    .f2h-channel__title { font-size: 15px; line-height: 20px; overflow-wrap: anywhere; } /* "WhatsApp Business API" in a 2-up card */
    .f2h-channel__arrow { width: 28px; height: 28px; }
    .f2h-channel__text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-top: 6px !important;
        font-size: 13px;
        line-height: 19px;
    }
}

/* Very narrow phones: still one per row */
@media (max-width: 359px) {
    .f2h-channels { grid-template-columns: minmax(0, 1fr); }
}

/* Menu entries that only make sense on phones (their header link is hidden there) */
.f2h-nav__item--phone { display: none; }

@media (max-width: 767px) {
    .f2h-nav__item--phone { display: block; }
}

/* ---------- Hero, signup-first ----------
   The offer (₹50 free credit) leads, the headline is bigger, and the signup
   is an inline mobile-number form, so the first action on the page is to sign up. */
.f2h-hero {
    position: relative;
    padding: 80px 0 60px;
}

/* faint dot grid + one soft glow behind the preview, both fading out downwards */
.f2h-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 60% at 86% 32%, rgba(127, 86, 217, 0.10) 0%, transparent 70%),
        radial-gradient(rgba(16, 24, 40, 0.07) 1px, transparent 1px);
    background-size: auto, 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}

.f2h-hero > .f2h-wrap {
    position: relative;
    z-index: 1;
}

.f2h-offer {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--f2h-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    font-size: 15px;
    font-weight: 600;
    color: var(--f2h-ink);
}

.f2h-offer__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #12B76A;
    box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.16);
}

.f2h-offer em {
    font-style: normal;
    color: var(--f2h-muted);
    font-weight: 500;
}

.f2h-hero__lead {
    max-width: 560px;
}

/* Inline signup: +91 | number | Signup Now */
.f2h-hero__trust {
    margin-top: 18px;
}

@media (max-width: 1200px) {
}

@media (max-width: 1024px) {
}

@media (max-width: 767px) {
    .f2h-hero { padding: 40px 0 44px; }
    .f2h-offer { font-size: 12.5px; }
}

@media (max-width: 400px) {
}

/* Hero: primary button, trust line, quiet secondary links */
.f2h-btn__arrow {
    display: inline-flex;
    transition: transform 0.2s ease;
}

.f2h-btn--hero {
    background: linear-gradient(180deg, #8B62E8 0%, #7047D6 100%);
    border: 1px solid #6338CC;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 1px 2px rgba(16, 24, 40, 0.12),
        0 10px 24px rgba(112, 71, 214, 0.30);
    font-weight: 600;
}

.f2h-btn--hero:hover,
.f2h-btn--hero:focus {
    background: linear-gradient(180deg, #7F56D9 0%, #6338CC 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 1px 2px rgba(16, 24, 40, 0.12),
        0 14px 30px rgba(112, 71, 214, 0.38);
    transform: translateY(-1px);
}

.f2h-btn--hero:hover .f2h-btn__arrow {
    transform: translateX(3px);
}

.f2h-hero__cta .f2h-btn--hero {
    height: 56px;
    padding: 0 26px 0 30px;
    border-radius: 12px;
    font-size: 18.5px;
}

/* "Schedule Meeting" as a text link right beside the Signup button, like the old home */
.f2h-hero__cta-link {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: #344054;
    text-decoration: none;
    white-space: nowrap;
}

.f2h-hero__cta-link:hover,
.f2h-hero__cta-link:focus {
    color: var(--f2h-purple-hover);
    text-decoration: none;
}

.f2h-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.f2h-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #475467;
}

.f2h-hero__trust svg {
    color: #12B76A;
}

.f2h-hero__links {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px !important;
    font-size: 14.5px;
    color: #98A2B3;
}

.f2h-hero__links a {
    font-weight: 600;
    color: #475467;
    text-decoration: none;
}

.f2h-hero__links a:hover,
.f2h-hero__links a:focus {
    color: var(--f2h-purple-hover);
    text-decoration: underline;
    text-underline-offset: 5px;
}

@media (max-width: 1024px) {
    .f2h-hero__trust,
    .f2h-hero__links { justify-content: center; }
}

@media (max-width: 767px) {
    .f2h-hero__trust { gap: 8px 14px; }
    .f2h-hero__trust li { font-size: 13px; }
    .f2h-hero__links { flex-wrap: wrap; justify-content: center; }
}

/* Headline in plain dark text (like the old page): the Signup button is the only colour on the left,
   so that's where the eye lands. The gradient stays only in the dashboard preview greeting. */
.f2h-hero__title .f2h-gradient-text {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

/* Reassurance under the signup field; the error line replaces it while a bad number is shown */
.f2h-hero__trust {
    margin-top: 16px;
}

@media (max-width: 1024px) {
}

/* Under the form: just the OTP hint and one quiet "look around first" line */
.f2h-hero__links {
    margin-top: 26px !important;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.f2h-hero__links > span:first-child {
    color: #667085;
    font-weight: 500;
}

.f2h-hero__lead {
    max-width: 520px;
}

/* Headline: two lines on desktop ("Signup & test bulk SMS / service for free") */
@media (min-width: 1201px) {
}



/* Less dead space between the header and the hero, and between the stats row and the certifications */
.f2h-hero {
    padding-top: 40px;
    padding-bottom: 24px;
}

@media (min-width: 1600px) {
    .f2h-hero { padding-top: 32px; }
}

@media (max-width: 1024px) {
    .f2h-hero { padding-top: 36px; }
}

/* Desktop: the hero card fills the first screen (header + its own top padding taken off), copy and globe
   centred in it, so the stats row and everything below only appear on scroll */
@media (min-width: 1025px) {
    .f2h-hero__card {
        display: flex;
        align-items: center;
        min-height: calc(100vh - var(--f2h-header-h) - 40px);
    }

    .f2h-hero__grid {
        width: 100%;
        align-items: center;
        /* a little more of the row to the globe: the two-line title needs ~600px, the globe takes the rest */
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .f2h-hero-globe {
        /* sized to the first screen, but never below 440px (a short window - DevTools open, small laptop -
           then just scrolls a little rather than showing a tiny globe) */
        max-width: clamp(440px, calc(100vh - 200px), 720px);
    }
}

/* Large desktops: the hero alone may run wider than the other sections, so the globe reaches its height cap */
@media (min-width: 1600px) {
    .f2h-hero > .f2h-wrap { max-width: 1560px; }
    .f2h-hero__card { min-height: calc(100vh - var(--f2h-header-h) - 32px); }
}

@media (max-width: 767px) {
    .f2h-hero { padding-top: 28px; }
}

/* Desktop: a little air between the sticky header and the hero card; a short step down to the certifications */
@media (min-width: 1025px) {
    .f2h-hero {
        padding-top: 32px;
        padding-bottom: 20px;
    }

    .f2h-hero__grid {
        align-content: center;
    }

    .f2h-stats {
        margin-top: 8px;
    }
}

/* ==================================================
   Signup buttons styled like the dashboard's "Add Amount":
   white pill, dark text, the same animated colour ring (spins on hover).
   Applies to every .f2h-btn--primary on the page (hero, header, banner, final).
   ================================================== */
@property --f2h-cta-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

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

.f2h-btn--primary,
.f2h-btn--primary:hover,
.f2h-btn--primary:focus,
.f2h-btn--hero,
.f2h-btn--hero:hover,
.f2h-btn--hero:focus {
    --f2h-cta-angle: 0deg;
    position: relative;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid transparent;
    color: #101828;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 2px 8px rgba(16, 24, 40, 0.06);
    transform: none;
}

.f2h-btn--primary::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--f2h-cta-angle),
        #69C0FC 0deg,
        #7F56D9 70deg,
        #B255FE 140deg,
        #E86A5E 210deg,
        #EF944E 280deg,
        #69C0FC 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.f2h-btn--primary > * {
    position: relative;
    z-index: 1;
}

.f2h-btn--primary:hover,
.f2h-btn--primary:focus {
    background: #FFFFFF;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 4px 14px rgba(178, 85, 254, 0.22),
        0 0 18px rgba(105, 192, 252, 0.18);
}

.f2h-btn--primary:hover::before,
.f2h-btn--primary:focus::before {
    animation: f2h-cta-ring-spin 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .f2h-btn--primary::before {
        animation: none !important;
    }
}


/* "Who can use" cards: same colour ring on hover as the channel cards */
.f2h-audience__card {
    --f2h-angle: 0deg;
    position: relative;
    isolation: isolate;
    border-color: #FFFFFF;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.f2h-audience__card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 2px;
    background: var(--f2h-ring);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.f2h-audience__card > * {
    position: relative;
    z-index: 1;
}

.f2h-audience__card:hover {
    background: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 22px rgba(127, 86, 217, 0.14), 0 0 18px rgba(105, 192, 252, 0.12);
    transform: translateY(-2px);
}

.f2h-audience__card:hover::before {
    opacity: 1;
    animation: f2h-ring-spin 2.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .f2h-audience__card:hover::before { animation: none; }
}

/* ==================================================
   Fixed header. The shared landing CSS sets overflow-x:hidden on html/body,
   which stops position:sticky from working, so the header is fixed and the
   page is padded down by its height. The mobile menu (position:absolute,
   top:100%) hangs off the header and still works.
   ================================================== */
.f2h-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

body.f2h-page {
    padding-top: var(--f2h-header-h);
}

/* a modal's backdrop must still cover the header */
body.f2h-page .modal {
    z-index: 1050;
}

/* global.css gives html/body.modal-open "height: 100%", which shrinks the page to one screen and
   throws the scroll position back to the top; overflow: hidden alone keeps the page where it was */
html.modal-open:has(> body.f2h-page),
body.f2h-page.modal-open {
    height: auto;
}

/* 1 Nov 2026 accessibility (Lighthouse): pinch-zoom is allowed again (no maximum-scale in the viewport tag).
   iOS Safari zooms into a focused field whose text is under 16px, so form fields use 16px there only. */
@supports (-webkit-touch-callout: none) {
    body.f2h-page input,
    body.f2h-page select,
    body.f2h-page textarea {
        font-size: 16px;
    }
}