/*
 * Public site (landing page) — Premium SaaS Design System.
 * Built on app.css tokens with theme-adaptive glassmorphism,
 * ambient illumination, multi-layer depth, and micro-interactions.
 */

.site {
    --site-container-max: 1440px;
    --site-container-pad: 1.5rem;
    --site-header-h: 76px;
    --site-radius: 24px;
    --site-violet: 124, 108, 242;
    --site-cyan: 6, 182, 212;
    --site-wash:
        radial-gradient(75rem 40rem at 85% -10%, rgba(var(--c-primary-rgb), .16), transparent 60%),
        radial-gradient(60rem 35rem at 10% 5%, rgba(var(--site-violet), .13), transparent 55%),
        radial-gradient(40rem 25rem at 50% 25%, rgba(var(--site-cyan), .08), transparent 60%);
    --site-dark-bg: linear-gradient(160deg, #0b1a2a 0%, #081421 55%, #050d17 100%);
    --site-band-bg:
        radial-gradient(circle at 12% 20%, rgba(var(--c-primary-rgb), .25), transparent 50%),
        radial-gradient(circle at 88% 80%, rgba(var(--site-violet), .2), transparent 50%),
        linear-gradient(150deg, #081a2b 0%, #0b253d 48%, #051322 100%);
    background: var(--c-surface);
}

@media (min-width: 1600px) {
    .site {
        --site-container-max: 1520px;
        --site-container-pad: 2rem;
    }
}

@media (max-width: 575.98px) {
    .site {
        --site-container-pad: 1rem;
    }
}

.site-container {
    width: 100%;
    max-width: var(--site-container-max, 1440px);
    margin-inline: auto;
    padding-inline: var(--site-container-pad, 1.5rem);
}
.site-skip { position: fixed; top: .5rem; inset-inline-start: .5rem; z-index: 1100; padding: .5rem .9rem; border-radius: 8px; background: var(--c-surface); box-shadow: var(--shadow-lg); }
.site section[id] { scroll-margin-top: calc(var(--site-header-h) + 16px); }
.site h2 { font-weight: 700; line-height: 1.35; letter-spacing: -.01em; text-wrap: balance; }

/* ----------------------------------------------------------- buttons & ctas */
.btn-pill {
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-x: 1.35rem;
    font-weight: 600;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: all .24s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, box-shadow;
}
.btn-pill.btn-lg {
    --bs-btn-padding-x: 1.75rem;
    min-height: 52px;
    font-size: 1.02rem;
}
.btn-pill .bi-chevron-left {
    font-size: .88em;
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-pill:hover .bi-chevron-left {
    transform: translateX(-4px);
}

.btn-primary {
    color: #ffffff !important;
    background-color: var(--c-primary) !important;
    background-image: linear-gradient(135deg, #0099cc 0%, #00779f 100%) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    box-shadow: 0 4px 18px rgba(var(--c-primary-rgb), .45), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
.btn-primary:hover {
    color: #ffffff !important;
    background-color: var(--c-primary-strong) !important;
    background-image: linear-gradient(135deg, #06b2ec 0%, #008cb9 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -2px rgba(var(--c-primary-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--c-primary-rgb), .35) !important;
}

.btn-ghost {
    color: var(--c-ink) !important;
    background-color: color-mix(in srgb, var(--c-surface) 80%, transparent) !important;
    border-color: var(--c-line) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
}
.btn-ghost:hover {
    color: var(--c-ink) !important;
    background-color: var(--c-surface) !important;
    border-color: rgba(var(--c-primary-rgb), .45) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
[data-bs-theme="dark"] .btn-ghost {
    color: #f1f5f9 !important;
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
}
[data-bs-theme="dark"] .btn-ghost:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, .15) !important;
    border-color: var(--c-primary) !important;
}

.btn-white {
    color: #081a2b !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .08);
}
.btn-white:hover {
    color: #081a2b !important;
    background-color: #f3f8fb !important;
    border-color: #f3f8fb !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(255, 255, 255, .35), 0 4px 10px rgba(0, 0, 0, .12);
}

.btn-outline-light {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    backdrop-filter: blur(8px);
}
.btn-outline-light:hover {
    color: #081a2b !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, .2);
}

/* ------------------------------------------------------------- pills & badges */
.site-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .42rem 1.05rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-surface);
    color: var(--c-ink-2);
    font-size: .88rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all .2s ease;
}
.site-pill i { color: var(--c-primary); }

.site-pill--section {
    margin-bottom: 1rem;
    background: var(--c-primary-soft);
    border-color: transparent;
    color: var(--c-primary-ink);
    font-size: .84rem;
    box-shadow: none;
}
.site-pill--section i { color: inherit; }
[data-bs-theme="dark"] .site-pill--section {
    background: rgba(var(--c-primary-rgb), .18);
    color: #38bdf8;
    border: 1px solid rgba(var(--c-primary-rgb), .3);
}

.site-pill--success {
    border-color: transparent;
    background: var(--c-success-soft);
    color: var(--c-success-ink);
    box-shadow: none;
}
.site-pill--success i { color: inherit; }

.site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1.85rem; }
.site-actions--center { justify-content: center; }

/* ---------------------------------------------------------------- check lists */
.site-checks { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.site-checks li { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.7; }
.site-checks i { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: .15rem; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary-ink); font-size: .8rem; }

.site-checks--grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .85rem 1.5rem; }
.site-checks--light li { color: rgba(255, 255, 255, .94); }
.site-checks--light i { background: rgba(255, 255, 255, .18); color: #fff; }
.site-checks--cards li {
    padding: .7rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    transition: background-color .2s ease, transform .2s ease;
}
.site-checks--cards li:hover {
    background: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------ product screens */
.site-shot { display: block; width: 100%; height: auto; }
.site-shot--dark, [data-bs-theme="dark"] .site-shot--light { display: none; }
[data-bs-theme="dark"] .site-shot--dark { display: block; }

/* realistic macOS window mockup */
.site-window {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: 20px;
    background: var(--c-surface);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .7),
        0 25px 65px -12px rgba(10, 25, 45, .18),
        0 8px 24px -6px rgba(10, 25, 45, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}
[data-bs-theme="dark"] .site-window {
    border-color: rgba(255, 255, 255, .12);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08),
        0 30px 80px -15px rgba(0, 0, 0, .6),
        0 10px 30px -5px rgba(0, 0, 0, .4);
}
.site-window__bar {
    direction: ltr;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    height: 42px;
    padding: 0 1.1rem;
    border-bottom: 1px solid var(--c-line-soft);
    background: var(--c-surface-2);
}
.site-window__dots { display: flex; align-items: center; gap: .45rem; }
.site-window__dot { width: 11px; height: 11px; border-radius: 50%; opacity: .9; }
.site-window__dot--close { background: #ff5f56; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.site-window__dot--min { background: #ffbd2e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.site-window__dot--max { background: #27c93f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.site-window__address {
    margin-inline: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 1.1rem;
    border-radius: 999px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    color: var(--c-ink-3);
    font-size: .78rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}
.site-window__address i { color: var(--c-success); font-size: .85em; }
.site-window__spacer { width: 50px; }

/* smartphone mockup */
.site-phone {
    overflow: hidden;
    width: 100%;
    padding: 9px;
    border-radius: 36px;
    background: #0d1722;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow:
        0 30px 80px rgba(5, 15, 25, .45),
        inset 0 0 0 2px rgba(255, 255, 255, .08);
}
.site-phone .site-shot { border-radius: 28px; }

/* ----------------------------------------------------------------- header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding-top: var(--safe-top);
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
    border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
    background: color-mix(in srgb, var(--c-surface) 85%, transparent);
    backdrop-filter: saturate(1.6) blur(16px);
    border-bottom-color: rgba(var(--c-primary-rgb), .12);
    box-shadow: 0 8px 30px -8px rgba(10, 25, 45, .08);
}
.site-header__bar { position: relative; display: flex; align-items: center; gap: 1rem; height: var(--site-header-h); }
.site-header__brand {
    flex: none;
    transition: transform .2s ease;
}
.site-header__brand:hover {
    transform: scale(1.02);
}
.site-nav {
    display: flex;
    align-items: center;
    gap: .2rem;
    margin-inline: auto;
    padding: .35rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-surface) 82%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .04);
}
.site-nav a {
    padding: .48rem .75rem;
    border-radius: 999px;
    color: var(--c-ink-2);
    font-weight: 600;
    font-size: .92rem;
    white-space: nowrap;
    transition: background-color .18s, color .18s, transform .18s;
}
.site-nav a:hover, .site-nav a:focus-visible {
    background: var(--c-line-soft);
    color: var(--c-ink);
}
.site-nav__actions { display: none; }
.site-header__actions { display: flex; align-items: center; gap: .5rem; }
.site-header__actions .btn { white-space: nowrap; }
.site-header__menu { display: none; }
/* the menu behind its button below 1200px: its six links and the two buttons need the whole
   1200px row (they wrapped on two lines from 1100px) */
@media (max-width: 1199.98px) {
    .site-nav { display: none; position: absolute; inset: calc(100% + .25rem) 0 auto; flex-direction: column; align-items: stretch; gap: .2rem; margin: 0; padding: .75rem; border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-lg); }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: .75rem 1rem; border-radius: 12px; }
    .site-nav__actions { display: grid; gap: .5rem; padding-top: .6rem; border-top: 1px solid var(--c-line-soft); }
    .site-nav__actions .btn { padding: .65rem 1rem; color: inherit; }
    .site-nav__actions .btn-primary { color: #fff; }
    .site-header__actions { margin-inline-start: auto; }
    .site-header__menu { display: inline-grid; }
}
@media (max-width: 419.98px) {
    .site-header .brand-mark small { display: none; }
}

/* until the screen leaves room beside the picture (1280px), the floating cards stay inside it */

@media (max-width: 767.98px) {
    
    .site-window__bar { height: 32px; }
    .site-window { border-radius: 14px; }
    .site-window__spacer { display: none; }
}

/* --------------------------------------------------------------- sections */
.site-section { padding: clamp(3.8rem, 8.5vw, 7rem) 0; }
.site-section--tint { background: var(--c-canvas); }

/* ----------------------------------------------------- live queue band */
.site-band {
    position: relative;
    overflow: hidden;
    padding: clamp(3.8rem, 8.5vw, 6.5rem) 0;
    background: var(--site-band-bg);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-band__glow {
    position: absolute;
    inset: -20% -20% auto auto;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c-primary-rgb), .28), transparent 65%);
    pointer-events: none;
}
.site-band::before {
    content: ""; position: absolute; inset: -30% auto auto -10%; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%);
    pointer-events: none;
}
.site-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 992px) { .site-band__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.site-band h2 { margin: 1rem 0 .8rem; color: #fff; font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
.site-band p { max-width: 60ch; margin: 0 0 1.75rem; color: rgba(255, 255, 255, .88); font-size: 1.08rem; line-height: 1.95; }
.site-band__visual { position: relative; display: grid; place-items: center; padding: 1.5rem 0; }
.site-orb {
    position: absolute;
    width: min(440px, 92%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .32), rgba(var(--c-primary-rgb), .25) 50%, transparent 70%);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 0 80px 20px rgba(var(--c-primary-rgb), .28), inset 0 0 40px rgba(255, 255, 255, .15);
    animation: orbBreathe 8s ease-in-out infinite alternate;
}
.site-orb-ring {
    position: absolute;
    width: min(500px, 105%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, .15);
    animation: ringSpin 30s linear infinite;
    pointer-events: none;
}
@keyframes orbBreathe {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.06); opacity: 1; }
}
@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.site-band .site-phone { position: relative; max-width: 270px; }

/* ------------------------------------------------------------- features stack */
.site-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 992px) { .site-features { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; } }
.site-features__intro h2 { margin: 0; font-size: clamp(1.85rem, 4vw, 2.9rem); }
.site-features__intro p { margin: 1rem 0 1.85rem; color: var(--c-ink-2); font-size: 1.08rem; line-height: 1.95; }
@media (min-width: 992px) { .site-features__intro { position: sticky; top: calc(var(--site-header-h) + 3rem); } }
.site-features__stack { display: grid; gap: 1.35rem; }
.site-module {
    --tone: linear-gradient(140deg, #0f8b8d, #0b6470);
    padding: clamp(1.5rem, 3.2vw, 2.25rem);
    border-radius: var(--site-radius);
    background: var(--tone);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        0 20px 45px -8px rgba(10, 25, 40, .22),
        inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .25s ease, box-shadow .25s ease;
}
@media (min-width: 992px) {
    .site-module { position: sticky; top: calc(var(--site-header-h) + 1.5rem); min-height: 280px; }
    .site-module:nth-child(2) { top: calc(var(--site-header-h) + 2.25rem); }
    .site-module:nth-child(3) { top: calc(var(--site-header-h) + 3rem); }
    .site-module:nth-child(4) { top: calc(var(--site-header-h) + 3.75rem); }
    .site-module:nth-child(5) { top: calc(var(--site-header-h) + 4.5rem); }
    .site-module:nth-child(6) { top: calc(var(--site-header-h) + 5.25rem); }
    .site-module:nth-child(7) { top: calc(var(--site-header-h) + 6rem); }
}
.site-module--teal { --tone: linear-gradient(140deg, #0d9488, #0f766e); }
.site-module--indigo { --tone: linear-gradient(140deg, #4f46e5, #3730a3); }
.site-module--slate { --tone: linear-gradient(140deg, #334155, #1e293b); }
.site-module--navy { --tone: linear-gradient(140deg, #1e40af, #1e3a8a); }
.site-module--amber { --tone: linear-gradient(140deg, #d97706, #b45309); }
.site-module--rose { --tone: linear-gradient(140deg, #e11d48, #be123c); }
.site-module--violet { --tone: linear-gradient(140deg, #7c3aed, #5b21b6); }
.site-module__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.site-module__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    font-size: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
    transition: transform .3s ease;
}
.site-module:hover .site-module__icon {
    transform: scale(1.08) rotate(-4deg);
}
.site-module h3 { margin: 0; color: #fff; font-size: 1.35rem; font-weight: 700; }
.site-module p { margin: 0 0 1.15rem; color: rgba(255, 255, 255, .9); line-height: 1.9; }

/* ------------------------------------------------------------- control & team */
.site-dark {
    position: relative;
    overflow: hidden;
    padding: clamp(3.8rem, 8.5vw, 6.5rem) 0;
    background: var(--site-dark-bg);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-dark::after {
    content: ""; position: absolute; inset: auto -10% -40% auto; width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c-primary-rgb), .35), transparent 65%);
    pointer-events: none;
}
.site-dark__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 992px) { .site-dark__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site-dark h2 { margin: 0; color: #fff; font-size: clamp(1.75rem, 3.8vw, 2.7rem); }
.site-dark__subtitle { margin: .5rem 0 1rem; color: #fff; font-size: 1.15rem; font-weight: 600; }
.site-dark p { color: rgba(255, 255, 255, .82); line-height: 1.95; }
.site-dark .site-checks { margin: 1.5rem 0 2rem; }
.site-dark__visual { position: relative; padding: 2rem 1rem 3rem; }
.site-window--tilt {
    border-color: rgba(255, 255, 255, .15);
    transform: perspective(1400px) rotateY(8deg) rotateX(2deg);
    box-shadow: 0 35px 80px -10px rgba(0, 0, 0, .7);
}
.site-member {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem 1rem .65rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    color: #17212f;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
    font-size: .88rem;
    transition: transform .25s ease;
}
.site-member:hover { transform: translateY(-3px); }
.site-member small { display: block; color: #5b6777; font-size: .76rem; }
.site-member__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 700; }
.site-member--1 { top: 0; inset-inline-start: 6%; }
.site-member--2 { bottom: .5rem; inset-inline-end: 8%; }
.site-member--2 .site-member__avatar { background: #7b3fc4; }
.site-lock {
    position: absolute;
    top: 42%;
    inset-inline-end: -.25rem;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: linear-gradient(140deg, #22c1c3, var(--c-primary));
    color: #fff;
    font-size: 1.7rem;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .1), 0 20px 45px rgba(0, 0, 0, .45);
    animation: lockPulse 3.5s ease-in-out infinite;
}
@keyframes lockPulse {
    0%, 100% { box-shadow: 0 0 0 8px rgba(0, 145, 194, .2), 0 0 30px rgba(0, 145, 194, .4); }
    50% { box-shadow: 0 0 0 16px rgba(0, 145, 194, .08), 0 0 50px rgba(0, 145, 194, .6); }
}
@media (max-width: 575.98px) { .site-member { font-size: .78rem; } .site-lock { width: 54px; height: 54px; } }

/* ----------------------------------------------------------------- app phones */
.site-phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 3.5vw, 2.75rem); }
.site-phones__item { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: min(250px, 30%); transition: transform .3s ease; }
.site-phones__item:nth-child(2) { width: min(280px, 34%); }
.site-phones__item:nth-child(odd) { margin-bottom: 2rem; }
@media (min-width: 768px) {
    .site-phones__item:first-child { transform: perspective(1000px) rotateY(-8deg) rotateX(2deg) translateY(8px); }
    .site-phones__item:last-child { transform: perspective(1000px) rotateY(8deg) rotateX(2deg) translateY(8px); }
    .site-phones__item:nth-child(2) { transform: scale(1.05) translateY(-8px); z-index: 2; }
    .site-phones:hover .site-phones__item:first-child { transform: perspective(1000px) rotateY(-4deg) rotateX(1deg) translateY(4px); }
    .site-phones:hover .site-phones__item:last-child { transform: perspective(1000px) rotateY(4deg) rotateX(1deg) translateY(4px); }
}

@media (max-width: 767.98px) {
    .site-phones__item:not(:nth-child(2)) { display: none; }
    .site-phones__item:nth-child(2) { width: min(270px, 78%); }
}
.site-install { margin-top: 2.5rem; text-align: center; }
.site-install p { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1rem 0 0; color: var(--c-ink-2); }

/* ------------------------------------------------------------- support tiles */
.site-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
@media (min-width: 768px) { .site-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 310px;
    padding: 1.85rem;
    border-radius: var(--site-radius);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: 0 20px 45px -8px rgba(10, 25, 40, .2);
    transition: transform .25s ease, box-shadow .25s ease;
}
.site-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 60px -10px rgba(10, 25, 40, .28);
}
.site-tile--1 { background: linear-gradient(160deg, #38455a, #101927); }
.site-tile--2 { background: linear-gradient(160deg, #16a34a, #065f46); }
.site-tile--3 { background: linear-gradient(160deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 40%, #081624)); }
.site-tile::before { content: ""; position: absolute; inset: -30% -30% auto auto; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 65%); }
.site-tile__icon {
    position: absolute;
    top: 1.85rem;
    inset-inline-start: 1.85rem;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 22px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    font-size: 2.1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .14);
}
.site-tile h3 { margin: 0 0 .5rem; color: #fff; font-size: 1.5rem; font-weight: 700; }
.site-tile p { margin: 0; color: rgba(255, 255, 255, .9); line-height: 1.9; }

/* ----------------------------------------------------------------- personas */
.site-personas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem; }
@media (min-width: 992px) { .site-personas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-persona {
    overflow: hidden;
    border: 1px solid var(--c-line);
    border-radius: var(--site-radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-persona:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--c-primary-rgb), .4);
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, .08);
}
.site-persona__head { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.6rem; background: linear-gradient(135deg, rgba(var(--c-primary-rgb), .16), rgba(var(--site-violet), .12)); }
.site-persona__head span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--c-surface); color: var(--c-primary); font-size: 1.45rem; box-shadow: var(--shadow-sm); }
.site-persona h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.site-persona .site-checks { padding: 1.5rem 1.6rem 1.75rem; color: var(--c-ink-2); }

/* three plans side by side from 992px; on a tablet two, the last one across under them (it carries
   the extra branch and member prices, too long for a third of a tablet) */

/* ----------------------------------------------------------------- footer */
.site-footer {
    background: #09121c;
    color: rgba(255, 255, 255, .75);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: clamp(2.75rem, 6vw, 4.5rem) 2rem; }
.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand, .site-footer__grid > div:last-child { grid-column: 1 / -1; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__grid > div:last-child { grid-column: auto; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .site-footer__brand { grid-column: auto; } }
.site-footer .brand-mark strong { color: #fff; }
.site-footer .brand-mark small { color: rgba(255, 255, 255, .6); }
.site-footer__brand p { max-width: 46ch; margin: 1rem 0 1.25rem; font-size: .92rem; line-height: 1.95; color: rgba(255, 255, 255, .72); }
.site-footer h2 { margin: 0 0 1.15rem; color: #fff; font-size: 1.05rem; font-weight: 700; }
.site-footer nav { display: grid; align-content: start; gap: .65rem; }
.site-footer a { color: rgba(255, 255, 255, .75); font-size: .94rem; transition: color .18s, transform .18s; }
.site-footer a:hover { color: #fff; transform: translateX(-2px); }
.site-footer__social { display: flex; gap: .6rem; }
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    font-size: 1.1rem;
    transition: all .2s ease;
}
.site-footer__social a:hover {
    border-color: var(--c-primary);
    background: rgba(var(--c-primary-rgb), .18);
    color: #fff;
    transform: translateY(-2px);
}
.site-footer__contact { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.site-footer__contact a { display: inline-flex; align-items: center; gap: .65rem; }
.site-footer__contact i { color: #fff; }
.site-footer__bottom { padding-block: 1.2rem calc(1.2rem + var(--safe-bottom)); border-top: 1px solid rgba(255, 255, 255, .08); font-size: .84rem; text-align: center; }

/* ----------------------------------------------------- floating contact fab */
.site-fab {
    position: fixed;
    inset: auto auto calc(1.25rem + var(--safe-bottom)) 1.25rem;
    z-index: 1020;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .45);
    transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .22s ease;
}
.site-fab:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 14px 34px rgba(37, 211, 102, .55);
    color: #fff;
}
/* phones: out of the way while the hero's buttons are on screen (js/site.js) */
@media (max-width: 575.98px) {
    .site-fab { transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease, box-shadow .22s ease; }
    .site-fab.is-tucked { opacity: 0; transform: translateY(140%); pointer-events: none; }
}
.site .net-banner { inset-block-end: 16px; }

@media (prefers-reduced-motion: reduce) {
    .site-window--tilt, .site-phones__item { transform: none !important; }
    .site-orb, .site-orb-ring, .site-lock { animation: none !important; }
    .site-fab { transition: none !important; }
}
@media print { .site-header, .site-fab, .site-band__visual, .site-dark__visual, .site-phones { display: none !important; } }

/* =================================================================== blog */
.site-page-head { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.75rem, 4vw, 2.75rem); background: var(--site-wash), var(--c-surface); }
.site-page-head h1 { margin: .9rem 0 .6rem; font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 600; line-height: 1.4; text-wrap: balance; }
.site-page-head p { max-width: 62ch; margin: 0; color: var(--c-ink-2); font-size: 1.08rem; line-height: 1.95; }
.site-page-head--article h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.site-container--article { max-width: 1120px; }

.site-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; color: var(--c-ink-3); font-size: .88rem; }
.site-crumbs a { color: var(--c-ink-2); }
.site-crumbs a:hover { color: var(--c-primary-ink); }
.site-crumbs i { font-size: .7rem; }
.site-crumbs [aria-current] { overflow: hidden; max-width: 40ch; color: var(--c-ink-3); text-overflow: ellipsis; white-space: nowrap; }

/* article cards */
.site-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.25rem; }

.site-blog { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.site-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.25rem; color: var(--c-ink-3); }

/* an article */
.site-article__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; color: var(--c-ink-3); font-size: .88rem; }
.site-article__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.site-article__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 1120px; padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); }
@media (min-width: 992px) {
    .site-article__layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 3rem; align-items: start; }
    .site-article__aside { order: 2; position: sticky; top: calc(var(--site-header-h) + 1.5rem); }
}
.site-article__main { min-width: 0; max-width: 760px; }

.site-toc { border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); }
.site-toc summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1.1rem; font-weight: 600; cursor: pointer; list-style: none; }
.site-toc summary::-webkit-details-marker { display: none; }
.site-toc summary::after { content: "\f282"; /* bi-chevron-down */ font-family: "bootstrap-icons"; font-size: .8rem; color: var(--c-ink-3); transition: transform .2s; }
.site-toc[open] summary::after { transform: rotate(180deg); }
.site-toc ol { display: grid; gap: .1rem; margin: 0; padding: 0 .6rem .8rem; list-style: none; counter-reset: toc; }
.site-toc li { counter-increment: toc; }
.site-toc a { display: flex; gap: .55rem; padding: .45rem .5rem; border-radius: 8px; color: var(--c-ink-2); font-size: .9rem; line-height: 1.6; }
.site-toc a::before { content: counter(toc); flex: none; color: var(--c-primary-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.site-toc a:hover { background: var(--c-line-soft); color: var(--c-ink); }

.site-share { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; color: var(--c-ink-3); font-size: .85rem; }
.site-share span { margin-inline-end: .25rem; }
.site-share a, .site-share button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); color: var(--c-ink-2); font-size: 1rem; transition: all .15s; }
.site-share a:hover, .site-share button:hover { border-color: var(--c-primary); color: var(--c-primary-ink); }
.site-share button.is-copied { border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-success-ink); }

.site-summary { margin-bottom: 2rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(var(--c-primary-rgb), .3); border-inline-start: 4px solid var(--c-primary); border-radius: var(--radius-lg); background: var(--c-primary-tint); }
.site-summary h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 600; color: var(--c-primary-ink); }
.site-summary ul { display: grid; gap: .45rem; margin: 0; padding-inline-start: 1.2rem; color: var(--c-ink); line-height: 1.85; }

/* the article's body, written in Markdown */
.site-prose { color: var(--c-ink); font-size: 1.07rem; line-height: 2.05; overflow-wrap: break-word; }
.site-prose > :first-child { margin-top: 0; }
.site-prose h2 { margin: 2.6rem 0 .9rem; font-size: clamp(1.35rem, 2.6vw, 1.65rem); font-weight: 600; line-height: 1.55; scroll-margin-top: calc(var(--site-header-h) + 1rem); }
.site-prose h3 { margin: 2rem 0 .6rem; font-size: 1.2rem; font-weight: 600; line-height: 1.6; scroll-margin-top: calc(var(--site-header-h) + 1rem); }
.site-prose p { margin: 0 0 1.15rem; }
.site-prose ul, .site-prose ol { display: grid; gap: .45rem; margin: 0 0 1.25rem; padding-inline-start: 1.4rem; }
.site-prose li::marker { color: var(--c-primary); font-weight: 600; }
.site-prose a { color: var(--c-primary-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.site-prose strong { font-weight: 600; }
.site-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-inline-start: 4px solid var(--c-accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--c-accent-soft); color: var(--c-ink); }
[dir="rtl"] .site-prose blockquote { border-radius: var(--radius) 0 0 var(--radius); }
.site-prose blockquote > :last-child { margin-bottom: 0; }
.site-prose hr { margin: 2.5rem 0; border-color: var(--c-line); opacity: 1; }
.site-prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.site-prose code { padding: .1rem .35rem; border-radius: 6px; background: var(--c-line-soft); color: var(--c-ink); font-size: .9em; }
.site-prose table { display: block; overflow-x: auto; width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .95rem; line-height: 1.75; }
.site-prose th, .site-prose td { padding: .7rem .9rem; border: 1px solid var(--c-line); text-align: start; vertical-align: top; }
.site-prose th { background: var(--c-surface-2); font-weight: 600; white-space: nowrap; }

.site-article__faq { margin-top: 2.75rem; }
.site-article__faq h2 { margin: 0 0 1.1rem; font-size: clamp(1.35rem, 2.6vw, 1.65rem); font-weight: 600; }

.site-article__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 2.75rem; padding: 1.5rem 1.6rem; border-radius: var(--site-radius); background: var(--site-band-bg); color: #fff; }
.site-article__cta img { flex: none; padding: 5px; border-radius: 16px; background: #fff; }
.site-article__cta div { flex: 1 1 260px; }
.site-article__cta h2 { margin: 0 0 .3rem; color: #fff; font-size: 1.2rem; font-weight: 600; }
.site-article__cta p { margin: 0; color: rgba(255, 255, 255, .85); font-size: .95rem; line-height: 1.8; }

.site-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.site-tags li { padding: .3rem .85rem; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-ink-2); font-size: .85rem; }

.site-nav a[aria-current="page"] { background: var(--c-primary-soft); color: var(--c-primary-ink); }
@media print { .site-article__aside, .site-article__cta, .site-share { display: none !important; } }

/* ----------------------------------------------------- fields of each specialty (sections/fit) */
.site-fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.site-fit h2 { margin: .9rem 0 0; font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
.site-fit__lead { margin: .85rem 0 1.5rem; color: var(--c-ink-2); font-size: 1.08rem; line-height: 1.95; }
.site-fit__steps { display: grid; gap: .9rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.site-fit__steps li { display: flex; align-items: flex-start; gap: .85rem; }
.site-fit__steps b { display: block; font-size: 1.02rem; }
.site-fit__steps small { display: block; color: var(--c-ink-3); font-size: .92rem; line-height: 1.7; }
.site-fit__number { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--c-primary), rgb(var(--site-cyan))); color: #fff; font-weight: 700; box-shadow: 0 10px 20px -10px rgba(var(--c-primary-rgb), .8); }

.site-fit__visual { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: clamp(1rem, 3vw, 1.75rem); border-radius: var(--site-radius); background: radial-gradient(30rem 18rem at 80% 0%, rgba(var(--c-primary-rgb), .14), transparent 70%), radial-gradient(24rem 16rem at 10% 100%, rgba(var(--site-violet), .12), transparent 70%), var(--c-surface-2); border: 1px solid var(--c-line); }
.site-fit__screen, .site-fit__paper { border-radius: 16px; box-shadow: 0 18px 40px -22px rgba(16, 24, 40, .45); }
.site-fit__screen { display: grid; gap: .55rem; padding: .9rem; border: 1px solid var(--c-line); background: var(--c-surface); }
.site-fit__title { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; color: var(--c-ink-2); font-size: .85rem; font-weight: 700; }
.site-fit__title i { color: var(--c-primary); }
.site-fit__field span { display: block; margin-bottom: .2rem; color: var(--c-ink-3); font-size: .76rem; font-weight: 600; }
.site-fit__field b { display: block; padding: .45rem .65rem; border: 1.5px solid rgba(var(--c-primary-rgb), .5); border-radius: 10px; background: rgba(var(--c-primary-rgb), .06); font-size: .9rem; }
.site-fit__arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-primary); color: #fff; box-shadow: 0 10px 22px -10px rgba(var(--c-primary-rgb), .9); }
.site-fit__paper { overflow: hidden; background: #fff; color: #1b2430; }
.site-fit__paper-head { display: flex; align-items: center; justify-content: space-between; padding: .65rem .8rem; border-bottom: 2px solid var(--c-primary); font-size: .85rem; }
.site-fit__paper-head i { color: var(--c-primary); font-family: Georgia, serif; font-style: italic; font-weight: 700; direction: ltr; }
.site-fit__paper-body { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: .7rem; padding: .8rem; }
.site-fit__lines { display: grid; align-content: start; gap: .55rem; padding-top: .2rem; }
.site-fit__lines i { display: block; height: 7px; border-radius: 4px; background: #e6eaf0; }
.site-fit__lines i:nth-child(2) { width: 75%; }
.site-fit__lines i:nth-child(4) { width: 55%; }
.site-fit__printed { display: grid; gap: .4rem; padding-inline-start: .6rem; border-inline-start: 1px solid #dfe4ea; }
.site-fit__printed small { display: block; color: #6b7686; font-size: .68rem; }
.site-fit__printed b { display: block; font-size: .8rem; }
@media (max-width: 991.98px) {
    .site-fit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .site-fit__visual { grid-template-columns: minmax(0, 1fr); }
    .site-fit__arrow { justify-self: center; transform: rotate(-90deg); }
}

/* ------------------------------------------------------------------ touch targets
   A fingertip needs about 40px. On a phone, or any touch screen, the share buttons grow to it, the
   breadcrumbs reach further than they show (padding given back by a negative margin) and the
   footer's links take the space that was between them. A desktop with a mouse keeps its sizes. */
@media (max-width: 575.98px), (pointer: coarse) {
    .site-share a, .site-share button { width: 40px; height: 40px; }
    .site-nav a { min-height: 40px; }
    .site-crumbs a { padding-block: .55rem; margin-block: -.55rem; }
    .site-footer nav { gap: 0; }
    .site-footer nav h2 { margin-bottom: 1.3rem; }
    .site-footer nav a { padding-block: .5rem; }
}

/* ==========================================================================
   Brand Watermark & Ambient Decorative Engine
   ========================================================================== */
.brand-watermark {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    color: var(--c-primary, #0091c2);
    transition: opacity .3s ease;
}
.brand-watermark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-watermark--blog-head,
.brand-watermark--article-head {
    top: -20%;
    inset-inline-end: -8%;
    width: 450px;
    height: auto;
    opacity: 0.5;
}

.brand-watermark--auth-aside {
    bottom: -15%;
    inset-inline-start: -15%;
    width: 620px;
    height: auto;
    opacity: 0.55;
    filter: drop-shadow(0 0 60px rgba(126, 224, 238, 0.35));
    animation: wmFloat 10s ease-in-out infinite alternate;
}

.brand-watermark--auth-main {
    top: -15%;
    inset-inline-end: -15%;
    width: 420px;
    height: auto;
    opacity: 0.3;
}

@keyframes wmFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-16px) rotate(2deg); }
}

/* ==========================================================================
   Section Background Watermarks (Premium Ambient Branding)
   ========================================================================== */
.site-section-wm {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transition: opacity .3s ease, transform .4s ease;
}

/* 1. Hero text watermark */
.site-section-wm--hero-text {
    top: -14%;
    inset-inline-start: -8%;
    width: clamp(340px, 44vw, 640px);
    height: auto;
    opacity: 0.08;
    filter: drop-shadow(0 0 60px rgba(0, 153, 204, 0.2));
}
[data-bs-theme="dark"] .site-section-wm--hero-text {
    opacity: 0.14;
    filter: drop-shadow(0 0 80px rgba(6, 182, 212, 0.35));
}

/* 2. About section watermark */
.site-section-wm--about {
    top: -8%;
    inset-inline-start: -6%;
    width: clamp(420px, 46vw, 760px);
    height: auto;
    opacity: 0.08;
    filter: drop-shadow(0 0 70px rgba(0, 153, 204, 0.18));
}
[data-bs-theme="dark"] .site-section-wm--about {
    opacity: 0.16;
    filter: drop-shadow(0 0 90px rgba(6, 182, 212, 0.35));
}

/* 3. Security / Compliance watermark */
.site-section-wm--security {
    top: -8%;
    inset-inline-start: -6%;
    width: clamp(480px, 52vw, 860px);
    height: auto;
    opacity: 0.12;
    filter: drop-shadow(0 0 80px rgba(0, 153, 204, 0.25));
}
[data-bs-theme="dark"] .site-section-wm--security {
    opacity: 0.2;
    filter: drop-shadow(0 0 110px rgba(6, 182, 212, 0.45));
}

/* 4. Plans section watermark */
.site-section-wm--plans {
    top: -10%;
    inset-inline-start: -6%;
    width: clamp(460px, 50vw, 820px);
    height: auto;
    opacity: 0.08;
    filter: drop-shadow(0 0 70px rgba(0, 153, 204, 0.18));
}
[data-bs-theme="dark"] .site-section-wm--plans {
    opacity: 0.16;
    filter: drop-shadow(0 0 90px rgba(6, 182, 212, 0.35));
}

/* 5. CTA section watermark */
.site-section-wm--cta {
    top: -15%;
    inset-inline-start: -6%;
    width: clamp(380px, 45vw, 720px);
    height: auto;
    opacity: 0.14;
    filter: drop-shadow(0 0 80px rgba(6, 182, 212, 0.35));
}
[data-bs-theme="dark"] .site-section-wm--cta {
    opacity: 0.24;
    filter: drop-shadow(0 0 100px rgba(6, 182, 212, 0.5));
}

/* ==========================================================================
   Alternating 2-Column Feature Sections
   ========================================================================== */
.site-section--feature-row {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    overflow: hidden;
}
.site-feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}
@media (min-width: 992px) {
    .site-feature-row {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 4.5rem;
    }
    .site-feature-row--reversed .site-feature-row__visual {
        order: 2;
    }
    .site-feature-row--reversed .site-feature-row__content {
        order: 1;
    }
}
.site-feature-row__visual {
    position: relative;
}
.site-feature-card-frame {
    position: relative;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-primary-rgb), .08), rgba(var(--site-violet), .06));
    border: 1px solid var(--c-line);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.site-feature-badge {
    position: absolute;
    bottom: 1.25rem;
    inset-inline-start: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    font-size: .85rem;
    font-weight: 700;
    color: var(--c-primary-ink);
}
[data-bs-theme="dark"] .site-feature-badge {
    background: rgba(15, 23, 42, .92);
    color: #38bdf8;
    border: 1px solid rgba(255, 255, 255, .15);
}

.site-feature-row__content h2 {
    font-size: clamp(1.75rem, 3.8vw, 2.5rem);
    margin: 1rem 0 .85rem;
    line-height: 1.3;
}
.site-feature-row__lead {
    font-size: 1.08rem;
    color: var(--c-ink-2);
    line-height: 1.95;
    margin-bottom: 1.5rem;
}
.site-feature-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    margin-top: 1.75rem;
}

/* Feature 2: Prescription Preview Overlay */
.site-fit-preview-card {
    position: absolute;
    bottom: -1rem;
    inset-inline-end: 1rem;
    width: min(290px, 85%);
    background: #ffffff;
    color: #17212f;
    border-radius: 18px;
    border: 1px solid rgba(var(--c-primary-rgb), .3);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, .2);
    padding: .9rem 1.1rem;
    z-index: 3;
}
.site-fit-preview-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--c-primary);
    padding-bottom: .45rem;
    margin-bottom: .6rem;
    font-weight: 700;
    font-size: .92rem;
}
.site-fit-preview-card__rx {
    color: var(--c-primary);
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1.25rem;
}
.site-fit-preview-card__fields {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.site-fit-preview-chip {
    padding: .25rem .55rem;
    border-radius: 8px;
    background: var(--c-primary-soft);
    font-size: .78rem;
}
.site-fit-preview-chip small {
    display: block;
    color: var(--c-primary-ink);
}

/* Feature 3: QR camera upload preview badge */
.site-qr-preview-badge {
    position: absolute;
    bottom: 1.5rem;
    inset-inline-start: 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.15rem;
    border-radius: 18px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, .15);
    z-index: 3;
}
.site-qr-preview-badge__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 1.35rem;
}
.site-qr-preview-badge__text b {
    display: block;
    font-size: .92rem;
}
.site-qr-preview-badge__text small {
    display: block;
    color: var(--c-ink-3);
    font-size: .78rem;
}

.site-features-subgrid {
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0;
}
.site-subfeature-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, border-color .2s ease;
}
.site-subfeature-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--c-primary-rgb), .4);
}
.site-subfeature-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #fff;
    font-size: 1.25rem;
    flex: none;
}
.site-subfeature-card__icon.tone-teal { background: linear-gradient(135deg, #0d9488, #0f766e); }
.site-subfeature-card__icon.tone-indigo { background: linear-gradient(135deg, #4f46e5, #3730a3); }
.site-subfeature-card__icon.tone-slate { background: linear-gradient(135deg, #334155, #1e293b); }
.site-subfeature-card h4 {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    font-weight: 700;
}
.site-subfeature-card p {
    margin: 0;
    color: var(--c-ink-2);
    font-size: .88rem;
    line-height: 1.7;
}

/* side by side from 992px: a tablet's third is too narrow for their words */

/* ==========================================================================
   Blog Editorial Layout
   ========================================================================== */
/* the headers and the plans section hold a brand watermark (components/brand/watermark) placed past
   their edge: each one is its watermark's frame and cuts it there, as the landing's other sections do;
   left to the page, it sat at the top of the page and made it scroll sideways */
.site-page-head--blog,
.site-page-head--article {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Editorial direction: every section of the landing page (and the blog's article cards)
   Type is the design: Alexandria for the headlines, very large, two weights in one title; one block
   of the brand's colour that the hero's headline runs onto; each section named by a small heading,
   its number in a chip; numbers in thin large figures; flat surfaces with few shadows, hairlines
   instead of cards. On app.css's tokens, light and dark.
   ========================================================================== */
@font-face { font-family: "Cliniro Display"; font-weight: 200 900; font-display: swap; src: url("../fonts/alexandria-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cliniro Display"; font-weight: 200 900; font-display: swap; src: url("../fonts/alexandria-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.site {
    --ed-display: "Cliniro Display", "Mosaed Sans", system-ui, sans-serif;
    --ed-ink: #0b1018;
    --ed-ink-2: #4a5465;
    --ed-ink-3: #8a93a3;
    --ed-accent: var(--c-primary);
    --ed-on-accent: #fff;
    --ed-line: color-mix(in srgb, var(--ed-ink) 12%, transparent);
    /* the hero's block of colour: this share of the page's row, from its left */
    --ed-split: .42;
}
[data-bs-theme="dark"] .site { --ed-ink: #eef2f7; --ed-ink-2: #b4bdca; --ed-ink-3: #7d8796; }

/* a small note in parentheses, as a designer's annotation (the hero) */
.ed-note { display: inline-flex; align-items: center; gap: .35rem; color: var(--ed-ink-2); font-family: var(--ed-display); font-size: .84rem; font-weight: 400; }
.ed-note--light { color: var(--ed-ink-3); }
/* a section's small heading (x-site.kicker): its number in a chip of the brand's colour, then its name */
.ed-kicker { display: inline-flex; align-items: center; gap: .6rem; color: var(--ed-ink-2); font: 600 .86rem/1.5 var(--ed-display); }
.ed-kicker__num { display: inline-grid; place-items: center; min-width: 2.15rem; height: 1.65rem; padding: 0 .5rem; border-radius: 999px; background: color-mix(in srgb, var(--ed-accent) 14%, transparent); color: var(--ed-accent); font: 700 .76rem/1 var(--ed-display); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------- Hero Premium Elements */
/* Pill Badge */
.ed-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .42rem 1.05rem;
    border-radius: 9999px;
    font-family: var(--ed-display);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(135deg, rgba(0, 153, 204, 0.08) 0%, rgba(0, 153, 204, 0.02) 100%);
    border: 1px solid rgba(0, 153, 204, 0.22);
    color: #0284c7;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px -2px rgba(0, 153, 204, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ed-hero__badge:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 153, 204, 0.4);
    box-shadow: 0 6px 18px -2px rgba(0, 153, 204, 0.2);
}
[data-bs-theme="dark"] .ed-hero__badge {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(6, 182, 212, 0.04) 100%);
    border: 1px solid rgba(6, 182, 212, 0.28);
    color: #e0f2fe;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px -2px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
[data-bs-theme="dark"] .ed-hero__badge:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 6px 24px -2px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ed-hero__badge-pulse {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}
.ed-hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ed-accent);
    box-shadow: 0 0 8px var(--ed-accent);
}
.ed-hero__badge-pulse::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--ed-accent);
    opacity: .4;
    animation: ed-pulse-ring 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}
@keyframes ed-pulse-ring {
    0% { transform: scale(0.8); opacity: 0.8; }
    70% { transform: scale(2.2); opacity: 0; }
    100% { transform: scale(2.2); opacity: 0; }
}

.ed-hero__badge-text {
    letter-spacing: -0.01em;
}
.ed-hero__meta-year {
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .06em;
    opacity: .85;
}

/* Action Buttons */
.ed-btn {
    display: inline-flex;
    align-items: center;
    gap: .95rem;
    min-height: 56px;
    padding-block: .4rem;
    padding-inline: 1.6rem .45rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #00b4d8 0%, var(--ed-accent) 55%, color-mix(in srgb, var(--ed-accent) 80%, #000) 100%);
    color: #ffffff !important;
    font-family: var(--ed-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 10px 28px -4px rgba(var(--c-primary-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.ed-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform .6s ease;
}
.ed-btn:hover::after {
    transform: translateX(100%);
}
.ed-btn:hover, .ed-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px -4px rgba(var(--c-primary-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #ffffff !important;
}
.ed-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(var(--c-primary-rgb), 0.4);
}
.ed-btn i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--ed-accent);
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ed-btn:hover i {
    transform: rotate(-45deg) scale(1.04);
}

/* Secondary Hero Glass Button */
.ed-hero__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 56px;
    padding-block: .4rem;
    padding-inline: .55rem 1.4rem;
    border-radius: 9999px;
    font-family: var(--ed-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    transition: all .24s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: #0f172a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.ed-hero__btn-secondary:hover {
    background: #ffffff;
    border-color: rgba(0, 153, 204, 0.45);
    color: #0284c7 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 153, 204, 0.16);
}
.ed-hero__btn-secondary:active {
    transform: translateY(0);
}
[data-bs-theme="dark"] .ed-hero__btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f1f5f9 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
[data-bs-theme="dark"] .ed-hero__btn-secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(6, 182, 212, 0.5);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.22);
}
.ed-hero__btn-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transition: all .22s ease;
    background: rgba(0, 153, 204, 0.1);
    border: 1px solid rgba(0, 153, 204, 0.2);
    color: var(--ed-accent);
}
.ed-hero__btn-secondary:hover .ed-hero__btn-icon {
    background: rgba(0, 153, 204, 0.2);
    transform: scale(1.06);
}
[data-bs-theme="dark"] .ed-hero__btn-icon {
    background: rgba(6, 182, 212, 0.16);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #38bdf8;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}
[data-bs-theme="dark"] .ed-hero__btn-secondary:hover .ed-hero__btn-icon {
    background: rgba(6, 182, 212, 0.28);
    transform: scale(1.06);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
}
.ed-hero__btn-icon i {
    font-size: 1.15rem;
    margin-inline-start: 2px;
}

.ed-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--ed-ink); font-family: var(--ed-display); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.ed-link:hover { color: var(--ed-accent); }

/* a point of a picture, named */
.ed-pin { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding-block: .45rem; padding-inline: .7rem .9rem; border-radius: 999px; background: var(--c-surface); color: var(--ed-ink); box-shadow: 0 12px 30px -14px rgba(11, 16, 24, .45); font: 600 .82rem/1.2 var(--ed-display); white-space: nowrap; }
.ed-pin::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ed-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ed-accent) 22%, transparent); }

/* ---------------------------------------------------------------- hero */
.ed-hero { position: relative; overflow: clip; padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(3rem, 6vw, 5rem); background: var(--c-surface); }
.ed-hero__block { display: none; }
.ed-hero__frame { position: relative; }
.ed-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }

/* Hero Headline */
.ed-hero__title {
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    font-family: var(--ed-display);
    font-size: clamp(2.2rem, 8.8vw, 3.6rem);
    line-height: 1.25;
    text-wrap: balance;
    letter-spacing: -0.015em;
}

/* Brand Name in Title */
.ed-hero__brand-name {
    display: block;
    font-weight: 900;
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: .12em;
    background: linear-gradient(135deg, #0284c7 0%, #0099cc 55%, #0369a1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 18px rgba(0, 153, 204, 0.28));
}
[data-bs-theme="dark"] .ed-hero__brand-name {
    background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 45%, #0284c7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 28px rgba(6, 182, 212, 0.45));
}

.ed-hero__title-strong {
    display: block;
    font-weight: 800;
    background: linear-gradient(180deg, #09131f 15%, #1e293b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-bs-theme="dark"] .ed-hero__title-strong {
    background: linear-gradient(180deg, #ffffff 15%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 24px rgba(255, 255, 255, 0.06));
}

.ed-hero__title-light {
    display: inline-block;
    font-weight: 800;
    margin-top: .18em;
    background: linear-gradient(180deg, #1e293b 15%, #475569 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
[data-bs-theme="dark"] .ed-hero__title-light {
    background: linear-gradient(180deg, #e2e8f0 15%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 18px rgba(255, 255, 255, 0.04));
}

.ed-hero__body { display: grid; gap: 2.5rem; }
.ed-hero__text {
    position: relative;
    z-index: 2;
}
.ed-hero__text > :not(.site-section-wm) {
    position: relative;
    z-index: 2;
}
.ed-hero__text > .site-section-wm {
    position: absolute;
    z-index: 1;
}

/* Ambient glow on hero text */
.ed-hero__text::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -12%;
    inset-inline-start: -15%;
    width: 130%;
    height: 120%;
    background: radial-gradient(circle at 40% 30%, rgba(var(--c-primary-rgb), 0.08), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.ed-hero__lead {
    max-width: 44ch;
    margin: 0 0 1.85rem;
    color: var(--ed-ink-2);
    font-size: clamp(1.02rem, 1.25vw, 1.16rem);
    line-height: 1.95;
    letter-spacing: -0.01em;
}
[data-bs-theme="dark"] .ed-hero__lead {
    color: rgba(226, 232, 240, 0.88);
}

.ed-hero__lead-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    margin-inline-start: .35rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .92em;
    vertical-align: middle;
    transition: all .2s ease;
    background: rgba(0, 153, 204, 0.08);
    border: 1px solid rgba(0, 153, 204, 0.22);
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(0, 153, 204, 0.1);
}
[data-bs-theme="dark"] .ed-hero__lead-pill {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.28);
    color: #38bdf8;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}
.ed-hero__lead-pill i {
    font-size: .95em;
    color: inherit;
}

.ed-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.35rem;
}

/* Assurances row */
.ed-hero__assure {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem 1.2rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
}
.ed-hero__assure-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    font-weight: 500;
    color: #475569;
    transition: color .2s ease;
}
[data-bs-theme="dark"] .ed-hero__assure-item {
    color: #cbd5e1;
}
.ed-hero__assure-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: .8rem;
    flex-shrink: 0;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
    transition: transform .2s ease;
}
[data-bs-theme="dark"] .ed-hero__assure-icon {
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: #34d399;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}
.ed-hero__assure-item:hover .ed-hero__assure-icon {
    transform: scale(1.15);
}

/* Feature Points Micro-Cards */
.ed-hero__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin: 2.25rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--ed-line);
    list-style: none;
}
.ed-hero__point-card {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1.05rem .95rem;
    border-radius: 16px;
    transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.ed-hero__point-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 153, 204, 0.35);
    box-shadow: 0 8px 24px rgba(0, 153, 204, 0.12);
}
[data-bs-theme="dark"] .ed-hero__point-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}
[data-bs-theme="dark"] .ed-hero__point-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 10px 28px -4px rgba(6, 182, 212, 0.2);
}

.ed-hero__point-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1.15rem;
    transition: all .22s ease;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(0, 153, 204, 0.12) 0%, rgba(0, 153, 204, 0.03) 100%);
    border: 1px solid rgba(0, 153, 204, 0.22);
    color: var(--ed-accent);
    box-shadow: 0 4px 12px rgba(0, 153, 204, 0.12);
}
.ed-hero__point-card:hover .ed-hero__point-icon {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 153, 204, 0.2);
}
[data-bs-theme="dark"] .ed-hero__point-icon {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.06) 100%);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #38bdf8;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25);
}
[data-bs-theme="dark"] .ed-hero__point-card:hover .ed-hero__point-icon {
    transform: scale(1.08);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3) 0%, rgba(6, 182, 212, 0.12) 100%);
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.4);
}

.ed-hero__point-label {
    font-family: var(--ed-display);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.5;
    color: #1e293b;
}
[data-bs-theme="dark"] .ed-hero__point-label {
    color: #e2e8f0;
}

/* The scene: a doctor standing on the brand's colour, cut at its foot, the mark behind his head as a
   halo in a soft light; the dashboard floats in front of him at the waist, the points named around.
   Here (a phone, a tablet) the scene is a block of its own under the words, everything kept inside it. */
.ed-hero__shot { position: relative; isolation: isolate; min-height: clamp(380px, 100vw, 600px); margin: 0; overflow: hidden; border-radius: 28px;
    background: radial-gradient(70% 55% at 30% 30%, rgba(255, 255, 255, .2), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--ed-accent) 88%, #fff), var(--ed-accent) 55%, color-mix(in srgb, var(--ed-accent) 82%, #000)); }
.ed-hero__person { position: absolute; z-index: 1; bottom: 0; inset-inline-end: 4%; height: 94%; aspect-ratio: 906 / 1505; }
/* the light he stands in */
.ed-hero__person::before { content: ""; position: absolute; z-index: -1; top: -4%; left: 50%; width: 175%; aspect-ratio: 1.1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 60%, transparent); translate: -50% 0; }
.ed-hero__doctor { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 24px 40px rgba(6, 30, 48, .35)); }
/* the mark in white hairlines across the top corner, cut by the edge it is drawn on */
.ed-hero__scene-mark, .ed-hero__block-mark { aspect-ratio: 1; color: #fff; opacity: .26; }
.ed-hero__scene-mark { top: -16%; inset-inline-end: -22%; width: 82%; }
.ed-hero__window { position: absolute; z-index: 2; bottom: 7%; inset-inline-start: 4%; width: 68%; box-shadow: 0 30px 60px -24px rgba(6, 24, 40, .55); }
.ed-pin { z-index: 3; }
.ed-pin--live { top: 9%; inset-inline-start: 5%; }
.ed-pin--rx { top: 30%; inset-inline-end: 3%; }
.ed-pin--qr { bottom: 6%; inset-inline-end: 4%; }
.ed-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--ed-line); }
.ed-stats div { display: flex; flex-direction: column-reverse; gap: .35rem; }
.ed-stats dd { margin: 0; color: var(--ed-ink); font: 200 clamp(2.4rem, 4vw, 3.4rem)/1 var(--ed-display); }
.ed-stats dt { color: var(--ed-ink-2); font-weight: 500; }

/* Responsive: Tablets & Phones */
@media (max-width: 767.98px) {
    .ed-hero__points {
        grid-template-columns: 1fr;
        gap: .65rem;
    }
    .ed-hero__point-card {
        flex-direction: row;
        align-items: center;
        gap: .85rem;
        padding: .8rem 1rem;
    }
    .ed-hero__point-icon {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }
    .ed-hero__point-label {
        font-size: .88rem;
    }
}

@media (max-width: 575.98px) {
    .ed-pin { display: none; }
    .ed-hero__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .65rem;
        margin-bottom: 1.15rem;
    }
    .ed-hero__badge {
        font-size: .82rem;
        padding: .38rem .95rem;
        width: fit-content;
        max-width: 100%;
    }
    .ed-hero__meta-year {
        display: none;
    }
    .ed-hero__brand-name {
        font-size: clamp(2.4rem, 10vw, 3.2rem);
        line-height: 1.15;
        margin-bottom: .08em;
    }
    .ed-hero__title {
        font-size: clamp(1.75rem, 7.2vw, 2.3rem);
        line-height: 1.25;
        margin-bottom: 1.15rem;
    }
    .ed-hero__lead {
        font-size: clamp(.95rem, 3.7vw, 1.05rem);
        line-height: 1.82;
        margin-bottom: 1.35rem;
    }
    .ed-hero__lead-pill {
        display: inline-flex;
        margin-top: .35rem;
    }
    .ed-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        width: 100%;
    }
    .ed-hero__actions .ed-btn,
    .ed-hero__actions .ed-hero__btn-secondary {
        width: 100%;
        justify-content: space-between;
        min-height: 52px;
        padding-inline: 1.4rem .45rem;
    }
    .ed-hero__assure {
        gap: .45rem .85rem;
        margin-top: 1.1rem;
    }
    .ed-hero__assure-item {
        font-size: .82rem;
    }
    /* a phone: the doctor larger, the window narrower beside him */
    .ed-hero__person { inset-inline-end: -4%; height: 96%; }
    .ed-hero__window { bottom: 6%; width: 64%; border-radius: 14px; }
}

/* On a wide screen: the block of colour from the page's left edge to its share of the row (the same
   point, computed the same way, where the headline's letters turn white), the picture on it. */
@media (min-width: 992px) {
    /* the scene stands on the block's foot: the hero ends there, the words keep their own room below */
    .ed-hero { padding-top: clamp(1.5rem, 2.6vw, 2.5rem); padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
    .ed-hero__meta { margin-bottom: clamp(.85rem, 1.6vw, 1.4rem); }
    /* the text ends at the buttons with no excess bottom padding */
    .ed-hero__text { display: flex; flex-direction: column; padding-bottom: 0; }
    .ed-hero__points { margin-top: auto; }
    .ed-hero__block {
        display: block; position: absolute; inset-block: 0 clamp(1.5rem, 2.5vw, 2.25rem); inset-inline-end: 0;
        width: calc((100% - min(var(--site-container-max, 1440px), 100%)) / 2 + var(--site-container-pad, 1.5rem) + var(--ed-split) * (min(var(--site-container-max, 1440px), 100%) - calc(2 * var(--site-container-pad, 1.5rem))));
        overflow: hidden; border-end-start-radius: 44px; background: var(--ed-accent);
    }
    .ed-hero__vertical { position: absolute; inset-block-end: 2rem; inset-inline-end: 1rem; display: none; color: rgba(255, 255, 255, .55); font: 500 .76rem/1 var(--ed-display); letter-spacing: .32em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
    .ed-hero__meta .ed-note--light { color: rgba(255, 255, 255, .78); }
    .ed-hero__brand-name {
        font-size: clamp(2.8rem, 4.4vw, 4.6rem);
        line-height: 1.15;
        margin-bottom: .12em;
    }
    .ed-hero__title {
        margin-bottom: clamp(1.1rem, 2vw, 1.75rem);
        font-size: clamp(2.4rem, 3.8vw, 3.8rem);
        line-height: 1.2;
        max-width: calc((1 - var(--ed-split)) * 100% - 1.5rem);
    }
    /* the bold lines kept on the page's side of the block, broken into even lines: no word split by its edge */
    .ed-hero__title-strong { max-width: calc((1 - var(--ed-split)) * 100% - 1.5rem); }
    /* the light line goes on from where the bold ones start */
    .ed-hero__title-light { margin-top: .18em; }
    .ed-hero__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; }
    /* on the block itself now: matches height of text ending at buttons, scene flows naturally */
    .ed-hero__shot { min-height: 0; height: 100%; position: relative; overflow: visible; border-radius: 0; background: none; }
    /* the words in fewer, fuller lines */
    .ed-hero__lead { max-width: 46ch; margin-bottom: 1.5rem; }
    .ed-hero__scene-mark { display: none; }
    .ed-hero__block-mark { top: -10rem; inset-inline-end: -11rem; width: clamp(540px, 46vw, 760px); opacity: .24; }
    .ed-hero__person {
        position: absolute;
        z-index: 1;
        bottom: 0;
        inset-inline-end: 8%;
        height: clamp(450px, 34vw, 510px);
        aspect-ratio: 906 / 1505;
        transition: transform .3s ease;
    }
    .ed-hero__window {
        position: absolute;
        z-index: 2;
        bottom: 0;
        inset-inline-start: -1%;
        width: clamp(350px, 27vw, 420px);
        box-shadow: 0 24px 50px -16px rgba(6, 24, 40, .65);
    }
    .ed-pin--live { top: -45px; inset-inline-start: 8%; }
    .ed-pin--rx { top: -50px; inset-inline-end: 4%; }
    .ed-pin--qr { bottom: 10%; inset-inline-end: 2%; }
}
/* the name down the block's edge, where the page's margin leaves it room */
@media (min-width: 1200px) { .ed-hero__vertical { display: block; } }

/* ---------------------------------------------------------- what it is */
.ed-section { padding: clamp(4rem, 9vw, 8rem) 0; }
/* every other section on the canvas tint, so two neighbours never share a ground: hero, about (tint),
   live, fit (tint), features, control (tint), security, specialties, tour (tint), how, app, plans (tint),
   questions, articles (tint), the last call */
.ed-about {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--c-canvas);
}
.ed-about > .site-container {
    position: relative;
    z-index: 1;
}
.ed-about__grid { display: grid; gap: 2rem; }
.site .ed-title { margin: .9rem 0 0; color: var(--ed-ink); font-family: var(--ed-display); font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 300; line-height: 1.12; }
.site .ed-title strong { color: var(--ed-accent); font-weight: 800; }
.ed-statement {
    margin: 0; font-family: var(--ed-display); font-size: clamp(1.3rem, 2.5vw, 2.05rem); font-weight: 500; line-height: 1.7;
    /* fades line after line */
    background: linear-gradient(180deg, var(--ed-ink) 30%, color-mix(in srgb, var(--ed-ink) 32%, transparent) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ed-inline-icons { display: inline-flex; margin-inline-start: .35rem; vertical-align: middle; }
.ed-inline-icons i { display: grid; place-items: center; width: 1.75em; height: 1.75em; margin-inline-start: -.4em; border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 3px var(--c-surface), inset 0 0 0 1px var(--ed-line); color: var(--ed-accent); font-size: .62em; }
.ed-about__more { max-width: 62ch; margin: 2rem 0 0; color: var(--ed-ink-2); line-height: 1.95; }
.ed-about__more .ed-kicker { margin-inline-end: .35rem; color: var(--ed-accent); }
.ed-values { display: grid; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; border-top: 1px solid var(--ed-line); list-style: none; }
.ed-values li { padding: 1.75rem 0; border-bottom: 1px solid var(--ed-line); }
.ed-num { display: block; color: var(--ed-accent); font: 200 clamp(3.2rem, 6vw, 5.2rem)/1 var(--ed-display); }
.ed-values h3 { margin: 1.25rem 0 .5rem; color: var(--ed-ink); font-family: var(--ed-display); font-size: 1.2rem; font-weight: 600; }
.ed-values p { margin: 0; color: var(--ed-ink-2); line-height: 1.85; }
@media (min-width: 992px) {
    .ed-about__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 4rem; align-items: start; }
    .ed-values { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ed-line); }
    .ed-values li { padding: 2rem 0 2.25rem; border-bottom: 0; }
    .ed-values li + li { padding-inline-start: 2rem; border-inline-start: 1px solid var(--ed-line); }
    .ed-values li:not(:last-child) { padding-inline-end: 2rem; }
}

/* -------------------------------------------------------- feature rows */
.site-section--feature-row .site-feature-row__content h2 { margin: 1rem 0; color: var(--ed-ink); font-family: var(--ed-display); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 700; line-height: 1.28; letter-spacing: 0; }
.site-section--feature-row .site-feature-row__lead { color: var(--ed-ink-2); font-size: clamp(1.02rem, 1.25vw, 1.14rem); }
.site-section--feature-row .site-feature-card-frame { padding: clamp(1.25rem, 3vw, 2.5rem); border: 0; border-radius: 32px; background: var(--ed-accent); box-shadow: none; }
.site-section--feature-row .site-feature-card-frame > .brand-watermark { display: none; }
.site-section--feature-row .site-subfeature-card { padding: 1.1rem 0; border: 0; border-top: 1px solid var(--ed-line); border-radius: 0; background: none; box-shadow: none; }
.site-section--feature-row .site-subfeature-card:hover { transform: none; }
.site-section--feature-row .site-subfeature-card__icon { width: auto; height: auto; background: none; color: var(--ed-accent); font-size: 1.35rem; }
.site-section--feature-row .site-feature-row__actions .btn-pill.btn-primary { gap: .8rem; min-height: 52px; padding-block: .35rem; padding-inline: 1.35rem .4rem; border: 0; background: var(--ed-accent); box-shadow: none; font-family: var(--ed-display); }
.site-section--feature-row .site-feature-row__actions .btn-pill.btn-primary i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ed-accent); }

/* the points beside a screen: tiles, each check in a chip of the brand's colour */
.site-section--feature-row .site-checks--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .75rem; margin: 1.75rem 0 2rem; }
.site-section--feature-row .site-checks--cards li { align-items: center; gap: .8rem; min-height: 62px; padding: .75rem .9rem; border: 1px solid var(--ed-line); border-radius: 18px; background: var(--c-surface); backdrop-filter: none; box-shadow: 0 16px 32px -26px rgba(11, 16, 24, .5); color: var(--ed-ink); font: 600 .94rem/1.55 var(--ed-display); transition: border-color .2s, box-shadow .2s, transform .2s; }
.site-section--feature-row .site-checks--cards li:hover { border-color: color-mix(in srgb, var(--ed-accent) 40%, transparent); background: var(--c-surface); box-shadow: 0 20px 36px -24px color-mix(in srgb, var(--ed-accent) 65%, transparent); transform: translateY(-2px); }
.site-section--feature-row .site-checks--cards i { width: 34px; height: 34px; margin: 0; border-radius: 11px; background: linear-gradient(140deg, color-mix(in srgb, var(--ed-accent) 75%, #fff), var(--ed-accent)); color: #fff; font-size: 1.05rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -8px color-mix(in srgb, var(--ed-accent) 80%, transparent); }

/* the labels of a screen, above it at its frame's corners (the window is z-index 1) */
.site-section--feature-row .site-feature-badge,
.site-section--feature-row .site-member { z-index: 2; border: 1px solid var(--ed-line); background: var(--c-surface); backdrop-filter: none; box-shadow: 0 18px 40px -16px rgba(11, 16, 24, .55); color: var(--ed-ink); font-family: var(--ed-display); }
.site-section--feature-row .site-feature-badge { bottom: clamp(.6rem, 1.6vw, 1rem); inset-inline-start: clamp(.6rem, 2vw, 1.25rem); gap: .55rem; padding-block: .55rem; padding-inline: .8rem 1rem; font-size: .84rem; font-weight: 600; }
.site-section--feature-row .site-feature-badge i { color: var(--ed-accent); }
.site-section--feature-row .site-member { gap: .6rem; padding-block: .4rem; padding-inline: .4rem 1.1rem; font-size: .88rem; }
.site-section--feature-row .site-member small { color: var(--ed-ink-2); font-size: .74rem; }
.site-section--feature-row .site-member__avatar { width: 34px; height: 34px; font-size: .9rem; }
.site-section--feature-row .site-member--1 { top: clamp(.6rem, 1.6vw, 1rem); inset-inline-start: clamp(.6rem, 2vw, 1.25rem); }
.site-section--feature-row .site-member--2 { bottom: clamp(.6rem, 1.6vw, 1rem); inset-inline-end: clamp(.6rem, 2vw, 1.25rem); }
/* the prescription and the upload cards: inside the frame like the labels, in the same type */
.site-section--feature-row .site-fit-preview-card,
.site-section--feature-row .site-qr-preview-badge { bottom: clamp(.6rem, 1.6vw, 1.25rem); border: 1px solid var(--ed-line); background: var(--c-surface); box-shadow: 0 22px 44px -18px rgba(11, 16, 24, .55); color: var(--ed-ink); font-family: var(--ed-display); }
.site-section--feature-row .site-fit-preview-card { inset-inline-end: clamp(.6rem, 2vw, 1.25rem); }
.site-section--feature-row .site-qr-preview-badge { inset-inline-start: clamp(.6rem, 2vw, 1.25rem); }
.site-section--feature-row .site-fit-preview-card__head { border-bottom-color: var(--ed-accent); }
.site-section--feature-row .site-fit-preview-chip { color: var(--ed-ink); }
/* a phone's screen is too small to lay labels over */
@media (max-width: 575.98px) {
    .site-section--feature-row .site-feature-badge, .site-section--feature-row .site-member,
    .site-section--feature-row .site-fit-preview-card, .site-section--feature-row .site-qr-preview-badge { display: none; }
}

/* Side by side: the frame as tall as the words beside it (they set the row's height), the window
   rising from its foot, the screen in it large enough to read and cut at its far side — the side a
   right-to-left screen ends on (object-position: right is its start). */
@media (min-width: 992px) {
    .site-section--feature-row .site-feature-row { align-items: stretch; }
    .site-section--feature-row .site-feature-row__visual { min-height: 520px; }
    .site-section--feature-row .site-feature-card-frame { position: absolute; inset: 0; display: flex; flex-direction: column; padding-bottom: 0; }
    .site-section--feature-row .site-feature-card-frame > .site-window { display: flex; flex: 1; flex-direction: column; min-height: 0; border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
    .site-section--feature-row .site-feature-card-frame .site-window__bar { flex: none; }
    .site-section--feature-row .site-feature-card-frame .site-shot { flex: 1 1 0; min-height: 0; height: 100%; object-fit: cover; object-position: right top; }
}

/* buttons on a block of colour or a dark panel */
.ed-btn--light { background: #fff !important; color: #0b1018 !important; }
.ed-btn--light i { background: var(--ed-accent); color: #fff; }
.ed-btn--light:hover, .ed-btn--light:focus-visible { background: color-mix(in srgb, #fff 86%, var(--ed-accent)) !important; color: #0b1018 !important; }
.ed-link--light { color: #fff; }
.ed-link--light:hover { color: color-mix(in srgb, var(--ed-accent) 50%, #fff); }

/* ------------------------------------------------- a section's head (shared) */
.site-head { display: grid; gap: 1rem; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.site .site-head h2 { margin: 0; color: var(--ed-ink); font-family: var(--ed-display); font-size: clamp(2.1rem, 4.6vw, 3.8rem); font-weight: 700; line-height: 1.24; letter-spacing: 0; text-wrap: balance; }
.site-head p { max-width: 52ch; margin: 0; color: var(--ed-ink-2); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.95; }
/* the small heading runs on into a hairline across the page */
.site-head .ed-kicker { display: flex; gap: .6rem; }
.site-head .ed-kicker::after { content: ""; flex: 1; align-self: center; height: 1px; margin-inline-start: .4rem; background: var(--ed-line); }
.site-head--light .ed-kicker::after { background: rgba(255, 255, 255, .2); }
/* side by side on a wide screen: the title (room for two lines), and the words about it at its foot
   behind a hairline */
@media (min-width: 992px) {
    .site-head { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); align-items: end; }
    .site-head > .ed-kicker { grid-column: 1 / -1; }
    .site-head > p { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--ed-line); }
    .site-head--light > p { border-color: rgba(255, 255, 255, .22); }
}
.site-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.site-head--row > div { display: grid; gap: 1rem; }
.site .site-head--light h2 { color: #fff; }
.site-head--light p { color: rgba(255, 255, 255, .78); }
.site-head--light .ed-kicker { color: rgba(255, 255, 255, .78); }
.site-head--light .ed-kicker__num { background: rgba(255, 255, 255, .18); color: #fff; }

/* ------------------------------------------------- the examination row's steps */
.site-fit-steps-list { display: grid; margin: 1.5rem 0; padding: 0; border-top: 1px solid var(--ed-line); list-style: none; }
.site-fit-steps-list li { display: flex; align-items: baseline; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ed-line); }
.site-fit-step-num { flex: none; min-width: 2.4ch; color: var(--ed-accent); font: 200 2rem/1 var(--ed-display); }
.site-fit-steps-list b { display: block; color: var(--ed-ink); font: 600 1.05rem/1.45 var(--ed-display); }
.site-fit-steps-list p { margin: .3rem 0 0; color: var(--ed-ink-2); font-size: .92rem; line-height: 1.8; }
.site-fit-majors-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; color: var(--ed-ink-2); font-size: .9rem; }
.site-fit-majors-label { color: var(--ed-ink); font-weight: 600; }
.site-fit__majors { display: flex; flex-wrap: wrap; gap: .3rem 0; margin: 0; padding: 0; list-style: none; }
.site-fit__majors li + li::before { content: "/"; margin-inline: .55rem; color: var(--ed-accent); }

/* ------------------------------------------------- a photograph behind a dark panel (x-site.backdrop) */
/* On the panel's far side (inline-end: the left of this right-to-left page), greyscale, tinted with the
   brand's colour, fading toward the words; on a phone across the top, fading down. */
.ed-backdrop { position: absolute; z-index: 0; inset-block: 0 auto; inset-inline: 0; height: min(62%, 520px); overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 25%, transparent 100%); mask-image: linear-gradient(to bottom, #000 25%, transparent 100%); }
.ed-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; opacity: .22; }
.ed-backdrop::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ed-accent) 55%, transparent); mix-blend-mode: color; }
@media (min-width: 992px) {
    .ed-backdrop { inset-block: 0; inset-inline: auto 0; width: 56%; height: auto;
        -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 100%); mask-image: linear-gradient(to right, #000 35%, transparent 100%); }
    .ed-backdrop img { opacity: .38; }
}

/* ------------------------------------------------- security: a dark panel set into the page */
.ed-dark { position: relative; isolation: isolate; overflow: hidden; margin: 0 clamp(.75rem, 2vw, 1.5rem); padding: clamp(3.5rem, 7vw, 6rem) 0; border-radius: clamp(28px, 4vw, 44px); background: #0b1018; color: rgba(255, 255, 255, .8); }
[data-bs-theme="dark"] .ed-dark { background: #05080c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ed-dark > .site-container { position: relative; z-index: 1; }
/* the photograph only behind the title: faded down too, before the strip and the measures */
@media (min-width: 992px) {
    .ed-dark__photo { height: 64%;
        -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 100%), linear-gradient(to bottom, #000 45%, transparent 100%); -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, #000 35%, transparent 100%), linear-gradient(to bottom, #000 45%, transparent 100%); mask-composite: intersect; }
}
.ed-dark__head { grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-bottom: 0; }
.ed-dark__head p, .ed-dark__head > p { max-width: 58ch; padding-inline-start: 0; border: 0; }
/* the figure and the standards: one strip of even cells between hairlines */
.ed-dark__strip { display: grid; margin: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2.5rem, 5vw, 3.5rem); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); }
.ed-dark__stat { display: grid; align-content: center; gap: .6rem; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ed-dark__stat b { justify-self: start; color: color-mix(in srgb, var(--ed-accent) 45%, #fff); font: 200 clamp(2.8rem, 5vw, 3.7rem)/1 var(--ed-display); white-space: nowrap; }
.ed-dark__stat span { max-width: 24ch; color: rgba(255, 255, 255, .78); font: 500 1rem/1.65 var(--ed-display); }
.ed-dark__badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ed-dark__badges li { display: grid; align-content: start; gap: .3rem; min-width: 0; padding: 1.35rem clamp(1rem, 2.5vw, 1.5rem); }
.ed-dark__badges li:nth-child(even) { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.ed-dark__badges li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .12); }
.ed-dark__badges i { margin-bottom: .45rem; color: color-mix(in srgb, var(--ed-accent) 55%, #fff); font-size: 1.25rem; line-height: 1; }
/* a title in Latin letters (dir="auto") stands at the cell's start like the icon and the words under it */
.ed-dark__badges b { justify-self: start; color: #fff; font: 600 1rem/1.35 var(--ed-display); overflow-wrap: anywhere; }
.ed-dark__badges small { color: rgba(255, 255, 255, .6); font-size: .82rem; line-height: 1.6; }
.ed-dark__grid { display: grid; border-top: 1px solid rgba(255, 255, 255, .12); }
.ed-dark__grid article { padding: 1.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ed-dark__grid i { color: color-mix(in srgb, var(--ed-accent) 70%, #fff); font-size: 1.4rem; }
.ed-dark__grid h3 { margin: 1rem 0 .5rem; color: #fff; font: 600 1.15rem/1.4 var(--ed-display); }
.ed-dark__grid p { margin: 0; color: rgba(255, 255, 255, .66); font-size: .95rem; line-height: 1.85; }
@media (min-width: 768px) {
    .ed-dark__badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ed-dark__badges li + li { border-inline-start: 1px solid rgba(255, 255, 255, .12); }
    .ed-dark__badges li:nth-child(n + 3) { border-top: 0; }
    .ed-dark__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (min-width: 992px) {
    .ed-dark__strip { grid-template-columns: minmax(0, 1.5fr) minmax(0, 4fr); }
    .ed-dark__stat { border-bottom: 0; border-inline-end: 1px solid rgba(255, 255, 255, .12); }
    .ed-dark__badges li { padding-block: 1.75rem; }
    .ed-dark__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; }
}

/* ------------------------------------------------- specialties */
.ed-professions__grid { display: grid; gap: 1.25rem; }
.ed-profession { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .9rem; overflow: hidden; padding: 1.6rem 1.5rem 1.4rem; border: 1px solid var(--ed-line); border-radius: 26px; background: var(--c-surface); box-shadow: 0 26px 50px -40px rgba(11, 16, 24, .45); transition: border-color .25s, box-shadow .25s, transform .25s; }
/* a wash of the brand's colour behind the card's top corner */
.ed-profession::before { content: ""; position: absolute; z-index: -1; top: -45%; inset-inline-start: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ed-accent) 13%, transparent), transparent); transition: transform .45s; }
.ed-profession:hover { border-color: color-mix(in srgb, var(--ed-accent) 40%, transparent); box-shadow: 0 30px 56px -36px color-mix(in srgb, var(--ed-accent) 60%, transparent); transform: translateY(-4px); }
.ed-profession:hover::before { transform: scale(1.25); }
.ed-profession__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.ed-profession__icon { display: grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(140deg, color-mix(in srgb, var(--ed-accent) 72%, #fff), var(--ed-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 26px -12px color-mix(in srgb, var(--ed-accent) 85%, transparent); color: #fff; font-size: 1.5rem; transition: transform .3s; }
.ed-profession:hover .ed-profession__icon { transform: rotate(-6deg) scale(1.05); }
.ed-profession__num { color: color-mix(in srgb, var(--ed-accent) 55%, transparent); font: 200 2.6rem/1 var(--ed-display); }
.ed-profession h3 { margin: 0; color: var(--ed-ink); font: 700 1.22rem/1.45 var(--ed-display); }
.ed-profession p { margin: 0; color: var(--ed-ink-2); font-size: .92rem; line-height: 1.85; }
/* what the dashboard gives it, ticked on a panel of the page's tint */
.ed-profession ul { display: grid; gap: .55rem; margin: .25rem 0 .35rem; padding: 1rem 1.1rem; border-radius: 18px; background: var(--c-canvas); color: var(--ed-ink); font-size: .9rem; list-style: none; }
.ed-profession li { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.6; }
.ed-profession li i { flex: none; color: var(--ed-accent); font-size: 1rem; line-height: 1.45; }
.ed-profession .ed-link { margin-top: auto; }
@media (min-width: 768px) { .ed-professions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ed-professions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------- the tour: tabs as words, the screen on a block */
.ed-tour, .ed-plans, .ed-blog {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--c-canvas);
}
.ed-tour > .site-container,
.ed-plans > .site-container,
.ed-blog > .site-container {
    position: relative;
    z-index: 1;
}
.ed-how, .ed-faq { background: var(--c-surface); }
.site-tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.site-tour__tabs { display: flex; gap: 0 1.75rem; overflow-x: auto; border-bottom: 1px solid var(--ed-line); scrollbar-width: none; }
.site-tour__tabs::-webkit-scrollbar { display: none; }
.site-tour__tabs button { display: inline-flex; flex: none; align-items: center; gap: .5rem; min-height: 48px; margin-bottom: -1px; padding: .5rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ed-ink-3); font: 600 1rem/1.3 var(--ed-display); white-space: nowrap; cursor: pointer; }
/* each tab's icon in a chip, filled with the brand's colour on the open one */
.site-tour__tabs button i { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--ed-accent) 11%, var(--c-surface)); color: var(--ed-accent); font-size: 1rem; transition: background-color .2s, color .2s; }
.site-tour__tabs button:hover { color: var(--ed-ink); }
.site-tour__tabs button[aria-selected="true"] { border-bottom-color: var(--ed-accent); color: var(--ed-ink); }
.site-tour__tabs button[aria-selected="true"] i { background: var(--ed-accent); color: #fff; }
/* the screen on a block of the brand's colour, lit from its top corner */
.site-tour__stage { padding: clamp(1rem, 3vw, 2.5rem); border-radius: 32px; background: radial-gradient(80% 60% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--ed-accent) 88%, #fff), var(--ed-accent) 45%, color-mix(in srgb, var(--ed-accent) 80%, #000)); box-shadow: 0 44px 80px -54px color-mix(in srgb, var(--ed-accent) 90%, transparent); }
.site-tour__panel { margin: 0; }
.site-tour__panel figcaption { display: flex; align-items: baseline; gap: .65rem; margin-top: 1.25rem; color: rgba(255, 255, 255, .9); font-size: .98rem; line-height: 1.8; }
.site-tour__panel figcaption::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: rgba(255, 255, 255, .6); transform: translateY(-.3em); }
/* on a wide screen the tabs are rows down the side, the open one raised on a card */
@media (min-width: 992px) {
    .site-tour { grid-template-columns: 270px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
    .site-tour__tabs { flex-direction: column; gap: .4rem; overflow: visible; border-bottom: 0; }
    .site-tour__tabs button { justify-content: flex-start; gap: .8rem; min-height: 60px; margin: 0; padding: .6rem .85rem; border: 1px solid transparent; border-radius: 18px; transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s; }
    .site-tour__tabs button[aria-selected="true"] { border-color: var(--ed-line); background: var(--c-surface); box-shadow: 0 20px 40px -28px rgba(11, 16, 24, .5); }
}

/* ------------------------------------------------- how it works: four steps joined by a line */
.ed-steps { display: grid; margin: 0; padding: 0; list-style: none; }
.ed-step { position: relative; display: grid; align-content: start; gap: .5rem; padding-block: 0 2.25rem; padding-inline-start: 4.75rem; }
/* the dashed line from this step's node to the next: down the side here, across on a wide screen */
.ed-step:not(:last-child)::before { content: ""; position: absolute; top: 64px; bottom: 8px; inset-inline-start: 28px; border-inline-start: 1px dashed color-mix(in srgb, var(--ed-accent) 50%, transparent); }
.ed-step__node { position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid color-mix(in srgb, var(--ed-accent) 30%, transparent); border-radius: 50%; background: var(--c-surface); box-shadow: 0 0 0 7px color-mix(in srgb, var(--ed-accent) 7%, transparent), 0 16px 30px -18px color-mix(in srgb, var(--ed-accent) 80%, transparent); color: var(--ed-accent); font-size: 1.35rem; transition: background-color .25s, color .25s, transform .25s; }
.ed-step:hover .ed-step__node { background: var(--ed-accent); color: #fff; transform: scale(1.06); }
.ed-step__meta { display: flex; align-items: center; gap: .55rem; color: var(--ed-ink-2); font: 500 .84rem/1.4 var(--ed-display); }
.ed-step__num { color: var(--ed-accent); font-weight: 600; }
.ed-step__num + span::before { content: "/"; margin-inline-end: .55rem; color: var(--ed-ink-3); }
.ed-step h3 { margin: .15rem 0 0; color: var(--ed-ink); font: 700 1.18rem/1.45 var(--ed-display); }
.ed-step p { margin: 0; color: var(--ed-ink-2); font-size: .94rem; line-height: 1.85; }
@media (min-width: 992px) {
    .ed-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; }
    .ed-step { padding: 5.25rem 0 0; }
    .ed-step:not(:last-child)::before { top: 28px; bottom: auto; inset-inline: 76px calc(-2rem + 12px); border-inline-start: 0; border-top: 1px dashed color-mix(in srgb, var(--ed-accent) 50%, transparent); }
}

/* ------------------------------------------------- the app: a block of the brand's colour */
.ed-app { position: relative; isolation: isolate; margin: 0 clamp(.75rem, 2vw, 1.5rem); padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; border-radius: clamp(28px, 4vw, 44px);
    /* lit from below, behind the phones, and a little from the top corner */
    background: radial-gradient(70% 50% at 50% 100%, rgba(255, 255, 255, .24), transparent 70%), radial-gradient(45% 40% at 100% 0%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(180deg, var(--ed-accent), color-mix(in srgb, var(--ed-accent) 76%, #000)); }
.ed-app__facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: calc(clamp(2.5rem, 5vw, 4rem) * -.45) 0 clamp(2.5rem, 5vw, 3.75rem); padding: 0; list-style: none; }
.ed-app__facts li { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .45rem 1rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font: 500 .9rem/1.3 var(--ed-display); }
.ed-app__facts i { color: rgba(255, 255, 255, .85); }
.ed-app .site-phones { position: relative; }
/* the light the phones stand in */
.ed-app .site-phones::before { content: ""; position: absolute; z-index: -1; inset-inline: 8%; bottom: -3rem; height: 55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .32), transparent); }
.ed-app > .site-container { position: relative; z-index: 1; }
/* the mark behind the phones, centred on them, cut by the block's foot */
.ed-app__mark { left: 50%; bottom: -14%; width: min(960px, 125%); aspect-ratio: 1; translate: -50% 0; color: #fff; opacity: .22; }
.site-callout { display: inline-flex; align-items: center; gap: .5rem; padding-block: .45rem; padding-inline: .75rem .9rem; border-radius: 999px; background: #fff; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .45); color: #0b1018; font: 600 .82rem/1.2 var(--ed-display); white-space: nowrap; }
.site-callout i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ed-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ed-accent) 25%, transparent); }
.ed-app .site-install p { color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------- plans */
.site-plans-guarantee-grid { display: grid; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--ed-line); }
.site-guarantee-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--ed-line); }
.site-guarantee-card__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--ed-accent) 11%, var(--c-surface)); color: var(--ed-accent); font-size: 1.2rem; line-height: 1; }
.site-guarantee-card h4 { margin: 0 0 .35rem; color: var(--ed-ink); font: 600 1.08rem/1.4 var(--ed-display); }
.site-guarantee-card--highlight h4 { color: var(--ed-accent); }
.site-guarantee-card p { margin: 0; color: var(--ed-ink-2); font-size: .92rem; line-height: 1.8; }
.site-plans { display: grid; gap: 1.25rem; max-width: 1060px; margin-inline: auto; align-items: stretch; }
.site-plan { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 2rem 1.75rem 1.75rem; border: 1px solid var(--ed-line); border-radius: 28px; background: var(--c-surface); }
.site-plan { box-shadow: 0 26px 50px -40px rgba(11, 16, 24, .45); transition: transform .25s, box-shadow .25s, border-color .25s; }
.site-plan:hover { border-color: color-mix(in srgb, var(--ed-accent) 35%, transparent); transform: translateY(-4px); }
.site-plan__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: .25rem; border-radius: 15px; background: color-mix(in srgb, var(--ed-accent) 11%, var(--c-surface)); color: var(--ed-accent); font-size: 1.35rem; }
.site-plan h3 { margin: 0; color: var(--ed-ink); font: 700 1.35rem/1.3 var(--ed-display); }
.site-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: .25rem 0 0; }
.site-plan__price b { color: var(--ed-ink); font: 200 clamp(3rem, 5vw, 4.2rem)/1 var(--ed-display); }
.site-plan__price span { color: var(--ed-ink-2); font-size: .92rem; }
.site-plan__note, .site-plan > p { margin: 0; color: var(--ed-ink-2); font-size: .92rem; line-height: 1.8; }
.site-plan__list { display: grid; gap: .55rem; margin: .75rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--ed-line); color: var(--ed-ink-2); font-size: .92rem; list-style: none; }
.site-plan__list li { display: flex; align-items: flex-start; gap: .5rem; }
.site-plan__list i { padding-top: .2rem; color: var(--ed-accent); font-size: .95rem; }
.site-plan__extras { display: grid; margin: .5rem 0 0; border-top: 1px solid var(--ed-line); }
.site-plan__extras > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--ed-line); }
.site-plan__extras dt { display: flex; align-items: center; gap: .45rem; color: var(--ed-ink); font-size: .92rem; font-weight: 600; }
.site-plan__extras dt i { color: var(--ed-accent); }
.site-plan__extras dd { margin: 0; color: var(--ed-ink-3); font-size: .85rem; white-space: nowrap; }
.site-plan__extras dd b { color: var(--ed-ink); font: 600 1.15rem var(--ed-display); }
/* the button at the card's foot, whatever is above it (Bootstrap's mt-4 says !important) */
.site-plan > .btn { min-height: 50px; margin-top: auto !important; border-radius: 999px; font-family: var(--ed-display); font-weight: 600; }
.site-plan > .btn-ghost { border: 1px solid var(--ed-ink); background: transparent; color: var(--ed-ink); }
.site-plan > .btn-ghost:hover, .site-plan > .btn-ghost:focus-visible { background: var(--ed-ink); color: var(--c-surface); }
/* the yearly plan: lit, raised above the other two, a glow of its colour under it */
.site-plan--featured { border-color: transparent; background: radial-gradient(90% 60% at 100% 0%, rgba(255, 255, 255, .24), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--ed-accent) 85%, #fff), var(--ed-accent) 50%, color-mix(in srgb, var(--ed-accent) 78%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 44px 70px -38px color-mix(in srgb, var(--ed-accent) 90%, transparent); }
.site-plan--featured .site-plan__icon { background: rgba(255, 255, 255, .18); }
.site-plan--featured:hover { border-color: transparent; }
/* what a clinic adds to a plan, drawn as an add-on: dashed, on the page's ground */
.site-plan--extras { border: 1px dashed color-mix(in srgb, var(--ed-ink) 24%, transparent); background: transparent; box-shadow: none; }
.site-plan--featured h3, .site-plan--featured .site-plan__price b, .site-plan--featured .site-plan__icon, .site-plan--featured .site-plan__list i { color: #fff; }
.site-plan--featured .site-plan__price span, .site-plan--featured .site-plan__note, .site-plan--featured > p, .site-plan--featured .site-plan__list { color: rgba(255, 255, 255, .84); }
.site-plan--featured .site-plan__list { border-top-color: rgba(255, 255, 255, .24); }
.site-plan--featured > .btn-primary { border: 0; background: #fff; box-shadow: none; color: var(--ed-accent); }
.site-plan__badge { position: absolute; top: 1.25rem; inset-inline-end: 1.25rem; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px; background: #fff; color: var(--ed-accent); font: 600 .78rem/1.2 var(--ed-display); }
/* three side by side from 992px; on a tablet two, the last one across under them (it carries the
   extra branch and member prices, too long for a third of a tablet) */
@media (min-width: 768px) { .site-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-plans > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 992px) {
    .site-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 1rem; }
    .site-plan--featured { transform: translateY(-16px); }
    .site-plan--featured:hover { transform: translateY(-20px); }
    .site-plans > :last-child:nth-child(odd) { grid-column: auto; }
    .site-plans-guarantee-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ed-line); }
    .site-guarantee-card { border-bottom: 0; }
    .site-guarantee-card + .site-guarantee-card { padding-inline-start: 2rem; border-inline-start: 1px solid var(--ed-line); }
    .site-guarantee-card:not(:last-child) { padding-inline-end: 2rem; }
}

/* ------------------------------------------------- questions: the two words huge and faint behind */
.ed-faq { position: relative; overflow: clip; }
.ed-faq__ghost {
    position: absolute; top: clamp(1.5rem, 4vw, 3rem); inset-inline: 0; overflow: hidden; pointer-events: none; user-select: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ed-accent) 24%, transparent), color-mix(in srgb, var(--ed-accent) 6%, transparent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font: 800 clamp(3.5rem, 14vw, 12rem)/1.4 var(--ed-display); text-align: center; white-space: nowrap;
}
.ed-faq__grid { position: relative; display: grid; gap: 2rem; padding-top: clamp(2.75rem, 8vw, 7rem); }
.ed-faq .site-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.ed-faq .site-head > p { padding-inline-start: 0; border: 0; }
.site-faq { display: grid; border-top: 1px solid var(--ed-line); }
.site-faq details { border-bottom: 1px solid var(--ed-line); }
.site-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 0; cursor: pointer; list-style: none; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary h3 { margin: 0; color: var(--ed-ink); font: 600 clamp(1.02rem, 1.5vw, 1.2rem)/1.5 var(--ed-display); }
.site-faq summary i { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ed-line); border-radius: 50%; color: var(--ed-ink); transition: transform .25s, background-color .2s, color .2s; }
.site-faq details[open] summary i { transform: rotate(45deg); border-color: var(--ed-accent); background: var(--ed-accent); color: #fff; }
.site-faq details p { max-width: 62ch; margin: 0 0 1.5rem; color: var(--ed-ink-2); line-height: 1.95; }
@media (min-width: 992px) {
    .ed-faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
    .ed-faq__grid > .site-head { position: sticky; top: calc(var(--site-header-h) + 2rem); }
    .ed-faq__more { grid-column: 2; }
}

/* ------------------------------------------------- articles: cards with a cover, the whole card a link */
.site-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; }
.site-post-card { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: .7rem .7rem 1.35rem; border: 1px solid var(--ed-line); border-radius: 26px; background: var(--c-surface); box-shadow: 0 26px 50px -40px rgba(11, 16, 24, .45); transition: transform .25s, box-shadow .25s, border-color .25s; }
.site-post-card:hover { border-color: color-mix(in srgb, var(--ed-accent) 35%, transparent); box-shadow: 0 30px 56px -36px color-mix(in srgb, var(--ed-accent) 60%, transparent); transform: translateY(-4px); }
.site-post-card > :not(.site-post-card__cover) { margin-inline: .8rem; }
/* the cover: the article's tag set large on rings of the brand's colour, from a different corner on each */
.site-post-card__cover { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-height: 168px; margin-bottom: .45rem; padding: 1.1rem 1.2rem; overflow: hidden; border-radius: 19px; color: #fff;
    background: repeating-radial-gradient(circle at 100% 0, rgba(255, 255, 255, .15) 0 1px, transparent 1px 26px), linear-gradient(140deg, color-mix(in srgb, var(--ed-accent) 70%, #fff), var(--ed-accent) 55%, color-mix(in srgb, var(--ed-accent) 75%, #000)); }
.site-post-card:nth-child(3n + 2) .site-post-card__cover { background: repeating-radial-gradient(circle at 0 100%, rgba(255, 255, 255, .15) 0 1px, transparent 1px 26px), linear-gradient(200deg, color-mix(in srgb, var(--ed-accent) 70%, #fff), var(--ed-accent) 55%, color-mix(in srgb, var(--ed-accent) 75%, #000)); }
.site-post-card:nth-child(3n) .site-post-card__cover { background: repeating-radial-gradient(circle at 50% 130%, rgba(255, 255, 255, .15) 0 1px, transparent 1px 26px), linear-gradient(160deg, color-mix(in srgb, var(--ed-accent) 70%, #fff), var(--ed-accent) 55%, color-mix(in srgb, var(--ed-accent) 75%, #000)); }
.site-post-card__tag { color: #fff; font: 700 clamp(1.2rem, 1.8vw, 1.5rem)/1.35 var(--ed-display); }
.site-post-card__cover i { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ed-accent); transition: transform .25s; }
.site-post-card:hover .site-post-card__cover i { transform: rotate(-45deg); }
.site-post-card h3 { margin: 0; font: 700 clamp(1.12rem, 1.5vw, 1.3rem)/1.55 var(--ed-display); }
.site-post-card h3 a { color: var(--ed-ink); text-decoration: none; }
.site-post-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.site-post-card:hover h3 a { color: var(--ed-accent); }
.site-post-card p { margin: 0; color: var(--ed-ink-2); font-size: .93rem; line-height: 1.85; }
.site-post-card footer { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .25rem; color: var(--ed-ink-3); font-size: .82rem; }
/* the newest article on the blog's first page: across the row, its cover beside the words */
.site-post-card--featured { grid-column: 1 / -1; }
.site-post-card--featured .site-post-card__cover { min-height: 220px; }
.site-post-card--featured .site-post-card__tag { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.site-post-card--featured h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
@media (min-width: 768px) {
    .site-post-card--featured { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: 1.25rem; align-content: start; }
    .site-post-card--featured .site-post-card__cover { grid-row: 1 / 4; grid-column: 1; min-height: 300px; margin: 0; }
    .site-post-card--featured > :not(.site-post-card__cover) { grid-column: 2; margin-inline: 1rem 1.5rem; }
    .site-post-card--featured h3 { margin-top: 1.25rem; }
}

/* ------------------------------------------------- the last call: a dark panel, the name huge behind */
.ed-cta { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3.5rem, 7vw, 6rem); background: var(--c-surface); }
.ed-cta__box { position: relative; display: grid; justify-items: start; gap: 1.5rem; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem); border-radius: clamp(28px, 4vw, 44px); color: rgba(255, 255, 255, .8);
    /* the brand's colour glowing in from the top corner and, fainter, from the foot */
    background: radial-gradient(55% 65% at 100% 0%, color-mix(in srgb, var(--ed-accent) 34%, transparent), transparent 70%), radial-gradient(45% 55% at 0% 100%, color-mix(in srgb, var(--ed-accent) 16%, transparent), transparent 70%), #0b1018; }
[data-bs-theme="dark"] .ed-cta__box { background: radial-gradient(55% 65% at 100% 0%, color-mix(in srgb, var(--ed-accent) 30%, transparent), transparent 70%), radial-gradient(45% 55% at 0% 100%, color-mix(in srgb, var(--ed-accent) 14%, transparent), transparent 70%), #05080c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ed-cta__box > :not(.ed-cta__ghost, .ed-backdrop, .site-section-wm) { position: relative; z-index: 1; }
.ed-cta__ghost {
    position: absolute; inset-inline: 0; bottom: -.2em; overflow: hidden; pointer-events: none; user-select: none;
    /* the name faint, fading out toward the words over it */
    background: linear-gradient(90deg, var(--ed-accent), color-mix(in srgb, var(--ed-accent) 45%, #fff) 55%, color-mix(in srgb, var(--ed-accent) 30%, transparent));
    -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .22;
    -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 90%); mask-image: linear-gradient(to top, #000 15%, transparent 90%);
    font: 800 clamp(6rem, 22vw, 19rem)/1 var(--ed-display); text-align: center; white-space: nowrap;
}
.site .ed-cta__title { margin: 0; color: #fff; font-family: var(--ed-display); font-size: clamp(2.2rem, 5.5vw, 4.6rem); line-height: 1.22; }
.ed-cta__title-strong { display: block; font-weight: 800; }
.ed-cta__title-light { display: block; color: color-mix(in srgb, var(--ed-accent) 50%, #fff); font-weight: 300; }
.ed-cta__text { max-width: 48ch; margin: 0; color: rgba(255, 255, 255, .72); font-size: 1.05rem; line-height: 1.9; }
.ed-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .5rem; }
/* the ways to reach the team: cells of glass, the icon in a ring */
.ed-cta__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .75rem; width: 100%; margin: clamp(1.25rem, 3vw, 2.5rem) 0 0; font-style: normal; }
.ed-cta__contact a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .85rem; padding: .85rem 1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; transition: background-color .2s, border-color .2s; }
.ed-cta__contact a:hover { border-color: color-mix(in srgb, var(--ed-accent) 60%, transparent); background: rgba(255, 255, 255, .08); }
.ed-cta__contact a:hover b { color: color-mix(in srgb, var(--ed-accent) 50%, #fff); }
.ed-cta__contact small { display: contents; color: rgba(255, 255, 255, .6); font-size: .8rem; }
.ed-cta__contact small i { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; color: color-mix(in srgb, var(--ed-accent) 50%, #fff); font-size: 1.05rem; }
/* a number or an address reads left to right, but stands at the cell's start under its label */
.ed-cta__contact b { grid-column: 2; justify-self: start; font: 600 1.02rem/1.3 var(--ed-display); overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .ed-cta__actions .ed-btn { flex: 1 1 auto; justify-content: space-between; } }

/* the blog's own page heads in the headlines' face */
.site .site-page-head h1 { font-family: var(--ed-display); font-weight: 700; line-height: 1.3; }

/* ------------------------------------------------- reading, on any screen */
/* titles in balanced lines, paragraphs without a lone last word */
.site h1, .site h2, .site h3 { text-wrap: balance; }
.site p, .site li { text-wrap: pretty; }
/* a phone: titles of a size it holds, the long statement and the large figures smaller, the words
   of a section's head at an even reading size */
@media (max-width: 575.98px) {
    .site .ed-title { font-size: clamp(1.95rem, 8.6vw, 2.35rem); line-height: 1.22; }
    .site .site-head h2, .site .site-section--feature-row .site-feature-row__content h2 { font-size: clamp(1.7rem, 7.6vw, 2.05rem); line-height: 1.34; }
    .site .ed-cta__title { font-size: clamp(1.85rem, 8vw, 2.25rem); }
    .ed-statement { font-size: clamp(1.08rem, 4.9vw, 1.28rem); line-height: 1.85; }
    .ed-num { font-size: 2.6rem; }
    .site-head { gap: .85rem; }
    .site-head p { font-size: 1rem; line-height: 1.9; }
}