/* ============================================================
   All Email Login Access - Landing Page Stylesheet
   ============================================================ */

/* ------------------------------- Design Tokens ------------------------------- */
:root {
    --brand: #1a73e8;
    --brand-light: #2196f3;
    --brand-dark: #0b57d0;
    --brand-soft: #e8f1fe;

    --ink: #0d1b2a;
    --ink-soft: #24384f;
    --muted: #5c718b;

    --bg: #ffffff;
    --bg-soft: #f4f8ff;
    --surface: #ffffff;
    --border: #e2ebf8;

    --star: #f5a623;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 26px;

    --shadow-sm: 0 2px 10px rgba(13, 27, 42, .06);
    --shadow: 0 12px 34px rgba(13, 27, 42, .09);
    --shadow-lg: 0 26px 60px rgba(11, 87, 208, .18);
    /* the one hover treatment: lift plus a brand-tinted glow, so nothing
       has to redraw its border on hover */
    --shadow-hover: 0 8px 20px rgba(11, 87, 208, .12), 0 2px 6px rgba(13, 27, 42, .05);

    --wrap: 1320px;
    --header-h: 72px;

    --sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand: #6ea8fe;
        --brand-light: #4d94ff;
        --brand-dark: #93c0ff;
        --brand-soft: #16233a;

        --ink: #eef4fc;
        --ink-soft: #cddcef;
        --muted: #97a9c0;

        --bg: #0b1220;
        --bg-soft: #0f1a2c;
        --surface: #121e33;
        --border: #21314d;

        --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
        --shadow: 0 12px 34px rgba(0, 0, 0, .45);
        --shadow-lg: 0 26px 60px rgba(0, 0, 0, .55);
        --shadow-hover: 0 8px 20px rgba(0, 0, 0, .38), 0 0 0 1px rgba(90, 160, 255, .12);
    }
}

/* ------------------------------- Base ------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 14px);
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--brand);
    text-decoration: none;
}

h1,
h2,
h3,
h4 {
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 .5em;
    letter-spacing: -.02em;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
}

h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.35rem);
}

h3 {
    font-size: clamp(1.02rem, .97rem + .26vw, 1.14rem);
}

p {
    margin: 0 0 1rem;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    /* matches Bootstrap's half-gutter, so a .row's negative margins land
       exactly on the wrap edge instead of bleeding past it */
    padding-inline: 24px;
}

.section {
    padding: clamp(56px, 8vw, 96px) 0;
}

.section--soft {
    background: var(--bg-soft);
    border-block: 1px solid var(--border);
}

.section-head {
    max-width: 720px;
    margin: 0 auto clamp(34px, 5vw, 54px);
    text-align: center;
}

.section-head p {
    color: var(--muted);
    font-size: clamp(.95rem, .9rem + .32vw, 1.08rem);
    line-height: 1.6;
    margin: 0;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: clamp(.72rem, .69rem + .15vw, .8rem);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* ------------------------------- Cursors ------------------------------- */
/* Browsers give <button> a default arrow, so every control states its own
   cursor. Decorative glyphs and chip-shaped labels opt out of the I-beam so
   they do not read as selectable text or as something you can click. */

/* controls */
.btn,
.nav-toggle,
.btn-close,
.to-top {
    cursor: pointer;
}

/* opens the screenshot full size */
.shot {
    cursor: zoom-in;
}

/* decorative icon tiles and glyphs - nothing to select, nothing to click */
.card__icon,
.stat__ico,
.stat__stars,
.step__num,
.contact__icon,
.contact__row-ico,
.contact__row-arrow,
.service i,
.eyebrow,
.pill {
    cursor: default;
}

/* ------------------------------- Buttons ------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(11px, 1.6vw, 13px) clamp(20px, 3vw, 26px);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: clamp(.9rem, .86rem + .22vw, 1rem);
    font-weight: 650;
    font-family: inherit;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn--primary {
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #fff;
    box-shadow: 0 10px 26px rgba(26, 115, 232, .32);
}

.btn--primary:hover {
    box-shadow: 0 8px 18px rgba(26, 115, 232, .26);
}

.btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var(--brand-soft);
    color: var(--brand-dark);
    box-shadow: var(--shadow-sm);
}

/* Google Play badge: keeps the official layout - four-colour logo, small line
   over large - but wears the site's blue instead of the stock black chip.
   Declared after .btn--primary so it wins on buttons carrying both classes. */
.btn--store {
    gap: 12px;
    padding: 8px 20px 8px 16px;
    border-radius: 999px;
    border-color: transparent;
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #fff;
    box-shadow: 0 8px 20px rgba(26, 115, 232, .28);
    text-align: left;
    line-height: 1.15;
}

.btn--store:hover,
.btn--store:focus-visible {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand-light));
    color: #fff;
    box-shadow: 0 8px 18px rgba(26, 115, 232, .34);
}

/* the logo needs a light disc to stay legible on the blue */
.btn--store__logo {
    padding: 4px;
    border-radius: 50%;
    background: #fff;
    box-sizing: content-box;
}

.btn--store small {
    display: block;
    font-size: .63rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .9;
}

.btn--store strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
}

.btn svg {
    flex: none;
}

/* ------------------------------- Header ------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

@supports (backdrop-filter: blur(10px)) {
    .header {
        background: color-mix(in srgb, var(--bg) 86%, transparent);
        backdrop-filter: saturate(180%) blur(14px);
    }
}

.header.is-stuck {
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.header__inner {
    position: relative;
    height: var(--header-h);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    /* .navbar adds vertical padding; --header-h already sets the height */
    padding-top: 0;
    padding-bottom: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 750;
    color: var(--ink);
    letter-spacing: -.02em;
    white-space: nowrap;
}

.brand img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav__list a {
    display: block;
    padding: 10px 17px;
    border-radius: 999px;
    color: var(--muted);
    font-size: .94rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease;
}

.nav__list a:hover,
.nav__list a.is-active {
    color: var(--brand-dark);
    background: var(--brand-soft);
}

/* The brand sits left, the menu closes off the right edge. Bootstrap
   gives .navbar-collapse flex-grow:1, so the row is already full width
   and margin-left:auto has nothing to push against - the alignment has
   to come from justify-content. */
.sitenav {
    justify-content: flex-end;
}

.nav-toggle {
    display: inline-flex;
    margin-left: auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--ink);
    transition: background .2s ease, border-color .2s ease;
}

/* Bootstrap ships `.navbar-toggler:focus { box-shadow: 0 0 0 .25rem }` with no
   colour, so the ring falls back to currentColor - a near-black band on tap.
   Kill it, and show a brand ring only for keyboard users. */
.nav-toggle:focus,
.nav-toggle:active {
    box-shadow: none;
    outline: 0;
}

.nav-toggle:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
    color: var(--brand-dark);
}

/* ------------------------------- Hero ------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 8vw, 96px);
    background:
        radial-gradient(900px 420px at 12% -10%, var(--brand-soft), transparent 70%),
        radial-gradient(760px 420px at 92% 8%, rgba(33, 150, 243, .13), transparent 72%);
}

.hero h1 {
    margin-bottom: 18px;
}

.hero h1 span {
    background: linear-gradient(120deg, var(--brand-light), var(--brand-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero__lead {
    font-size: clamp(1rem, .94rem + .34vw, 1.14rem);
    color: var(--muted);
    max-width: 56ch;
    margin-bottom: 26px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 30px;
}

/* Three real screens: the main one front and centre, the other two
   tucked in behind it on either side. The negative margins pull the
   flanks under the lead so the trio reads as one cluster. */
.hero-shots {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-shots__item {
    position: relative;
    display: block;
    flex: none;
    border-radius: 18px;
    overflow: hidden;
    background: var(--surface);
}

.hero-shots__item img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-shots__item--lead {
    z-index: 2;
    width: 46%;
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    animation: heroFloat 6s ease-in-out infinite;
}

.hero-shots__item--left,
.hero-shots__item--right {
    z-index: 1;
    width: 34%;
    box-shadow: 0 16px 34px rgba(13, 27, 42, .16);
}

.hero-shots__item--left {
    margin-right: -7%;
    transform: translateY(6%) rotate(-5deg);
}

.hero-shots__item--right {
    margin-left: -7%;
    transform: translateY(6%) rotate(5deg);
}

@keyframes heroFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* ------------------------------- How It Works ------------------------------- */
.step {
    height: 100%;
    padding: 28px 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.step__num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--brand-light), var(--brand-dark));
    color: #fff;
    font-size: 1.08rem;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(26, 115, 232, .3);
}

.step h3 {
    margin: 0 0 9px;
    font-size: 1.08rem;
    font-weight: 700;
}

.step p {
    margin: 0;
    color: var(--muted);
    font-size: .96rem;
    line-height: 1.7;
}

/* ------------------------------- Stats ------------------------------- */
.stats {
    margin-top: clamp(40px, 6vw, 64px);
}

/* four independent tiles: every one has the same icon + value + label
   shape, so the rating tile's extra star line cannot knock the row out
   of alignment the way it did when they shared one bar */
.stat {
    display: flex;
    align-items: center;
    gap: clamp(11px, 1.6vw, 15px);
    padding: clamp(14px, 1.9vw, 19px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease;
}

.stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.stat__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(38px, 7vw, 46px);
    height: clamp(38px, 7vw, 46px);
    border-radius: clamp(11px, 2vw, 14px);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.stat__ico svg {
    width: clamp(18px, 3.4vw, 22px);
    height: clamp(18px, 3.4vw, 22px);
}

.stat__body {
    min-width: 0;
}

.stat__value {
    display: block;
    font-size: clamp(1.12rem, .96rem + .72vw, 1.5rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
}

.stat__label {
    display: block;
    margin-top: 3px;
    font-size: clamp(.75rem, .72rem + .14vw, .82rem);
    line-height: 1.35;
    color: var(--muted);
}

.stat__stars {
    color: var(--star);
    letter-spacing: 1px;
}

/* ------------------------------- Overview ------------------------------- */
.overview__body p {
    font-size: 1.04rem;
    color: var(--muted);
}

.overview__body strong {
    color: var(--ink);
}

.overview__card {
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.overview__card h3 {
    margin-bottom: 16px;
}

.spec {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--border);
    font-size: .92rem;
}

.spec:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.spec dt {
    color: var(--muted);
}

.spec dd {
    margin: 0;
    font-weight: 650;
    color: var(--ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.pill {
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .8rem;
    font-weight: 650;
}

/* ------------------------------- Cards ------------------------------- */
.fcard {
    padding: 26px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.fcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.card__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.fcard h3 {
    margin-bottom: 8px;
}

.fcard p {
    margin: 0;
    font-size: .94rem;
    color: var(--muted);
}

/* ------------------------------- Services ------------------------------- */
.service {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: .92rem;
    font-weight: 650;
    color: var(--ink);
}

.service i {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: .78rem;
    font-style: normal;
    font-weight: 700;
}

/* ------------------------------- Why list ------------------------------- */
.why__item {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 18px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: .97rem;
    color: var(--ink-soft);
}

.why svg {
    flex: none;
    margin-top: 3px;
    color: var(--brand);
}

/* ------------------------------- Download CTA ------------------------------- */
.cta {
    position: relative;
    overflow: hidden;
    padding: clamp(38px, 6vw, 62px);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #0b57d0, #2196f3);
    color: #fff;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.cta h2 {
    color: #fff;
}

.cta p {
    max-width: 60ch;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, .9);
    font-size: 1.05rem;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.cta .btn--primary {
    background: #fff;
    color: #0b57d0;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}

/* .cta .btn--primary above would repaint the badge white - same
   specificity, so this has to come after it to keep the badge black */
.cta .btn--store {
    background: #fff;
    color: var(--brand-dark);
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.cta .btn--store:hover,
.cta .btn--store:focus-visible {
    background: #fff;
    color: var(--brand-dark);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

/* on white the logo needs no disc behind it */
.cta .btn--store__logo {
    padding: 0;
    background: none;
}

.cta .btn--ghost {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    box-shadow: none;
}

.cta .btn--ghost:hover,
.cta .btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .26);
    color: #fff;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .16);
}

/* ------------------------------- Footer ------------------------------- */
.footer {
    padding: clamp(44px, 6vw, 68px) 0 26px;
    border-top: 1px solid var(--border);
    background: var(--bg-soft);
    font-size: .9rem;
    color: var(--muted);
}

.footer__brand {
    margin-bottom: 14px;
}

.footer__about {
    /* nothing follows it in the column now, so no trailing space */
    margin: 0;
    max-width: 42ch;
    line-height: 1.7;
    color: var(--muted);
}

.footer__title {
    margin: 0 0 14px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}

.footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
}

.footer__list a {
    color: var(--muted);
    font-weight: 600;
    transition: color .18s ease;
}

.footer__list a:hover,
.footer__list a:focus-visible {
    color: var(--brand-dark);
}

.footer__mail {
    display: inline-block;
    /* same treatment as the Explore / Product links beside it */
    color: var(--muted);
    font-weight: 600;
    overflow-wrap: anywhere;
    transition: color .18s ease;
}

.footer__mail:hover,
.footer__mail:focus-visible {
    color: var(--brand-dark);
    outline: none;
}

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    margin-top: clamp(30px, 4vw, 44px);
    padding-top: 22px;
    border-top: 1px solid var(--border);
    font-size: .85rem;
}

.footer__bar p {
    margin: 0;
}

/* ------------------------------- Contact Us ------------------------------- */
.heading-line {
    position: relative;
    padding-bottom: 18px;
    font-weight: 750;
}

.heading-line::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-light), var(--brand-dark));
    transform: translateX(-50%);
    transition: width .6s cubic-bezier(.22, .9, .3, 1) .15s;
}

.reveal.is-visible .heading-line::after,
.heading-line.is-visible::after {
    width: 68px;
}

.contact {
    max-width: 980px;
    margin-inline: auto;
}

/* --- primary email panel --- */
.contact__main {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(28px, 3.6vw, 42px) clamp(22px, 3vw, 34px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(460px 240px at 50% -12%, var(--brand-soft), transparent 72%),
        var(--surface);
    box-shadow: var(--shadow);
}

.contact__icon {
    width: clamp(46px, 9vw, 56px);
    height: clamp(46px, 9vw, 56px);
    margin-bottom: clamp(18px, 2.6vw, 24px);
    border-radius: clamp(14px, 2.6vw, 17px);
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(140deg, var(--brand-light), var(--brand-dark));
    box-shadow: 0 8px 20px rgba(26, 115, 232, .34);
    animation: contactFloat 3.4s ease-in-out infinite;
}

.contact__icon svg {
    width: clamp(21px, 4.2vw, 25px);
    height: clamp(21px, 4.2vw, 25px);
}

@keyframes contactFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.contact__label {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact__mail {
    display: block;
    margin-top: 7px;
    font-size: clamp(1.02rem, .88rem + .66vw, 1.38rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--ink);
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.contact__mail:hover {
    color: var(--brand-dark);
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 13px);
    width: 100%;
    margin-top: clamp(22px, 3vw, 30px);
}

.contact__actions .btn {
    min-width: min(240px, 100%);
}

/* --- secondary links panel --- */
.contact__side {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.8vw, 28px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: var(--shadow-sm);
}

.contact__side-title {
    margin: 0 0 clamp(12px, 2vw, 16px);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact__rows {
    display: grid;
    gap: 10px;
    align-content: start;
}

.contact__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    transition: transform .22s ease, box-shadow .22s ease;
}

.contact__row:hover,
.contact__row:focus-visible {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
    outline: none;
}

.contact__row-ico {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--bg-soft);
    border: 1px solid var(--border);
}

.contact__row-ico svg {
    width: 19px;
    height: 19px;
}

.contact__row-ico--tint {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand-dark);
}

.contact__row-meta {
    min-width: 0;
}

.contact__row-meta strong {
    display: block;
    font-size: .93rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--ink);
}

.contact__row-meta small {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--muted);
}

.contact__row-arrow {
    flex: none;
    width: 17px;
    height: 17px;
    color: var(--muted);
    transition: transform .22s ease, color .22s ease;
}

.contact__row:hover .contact__row-arrow {
    transform: translateX(3px);
    color: var(--brand);
}

/* ------------------------------- App Screenshots ------------------------------- */
.shot {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.shot:hover,
.shot:focus-visible {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
    outline: none;
}

.shot picture,
.shot img {
    display: block;
    width: 100%;
    height: auto;
}

.shot__caption {
    margin: 12px 0 0;
    text-align: center;
    font-size: clamp(.8rem, .76rem + .2vw, .9rem);
    font-weight: 600;
    color: var(--muted);
    line-height: 1.4;
}

.shot-modal .modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.shot-modal .modal-header {
    border-bottom: 1px solid var(--border);
}

.shot-modal .modal-title {
    margin: 0;
    font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
}

.shot-modal .modal-body {
    text-align: center;
}

.shot-modal .modal-body img {
    width: auto;
    max-width: 100%;
    /* keep the whole phone shot on screen on short viewports */
    max-height: 72vh;
    height: auto;
    /* the global `img { display: block }` means text-align on the body
       cannot centre this - a block needs its own auto margins */
    margin-inline: auto;
    border-radius: var(--radius);
}

/* ------------------------------- Legal Pages ------------------------------- */
.legal-hero {
    padding: clamp(46px, 6vw, 78px) 0 clamp(34px, 4vw, 52px);
    text-align: center;
    background:
        radial-gradient(900px 380px at 15% -20%, var(--brand-soft), transparent 70%),
        radial-gradient(760px 380px at 88% 0%, rgba(33, 150, 243, .12), transparent 72%);
}

.legal-hero h1 {
    font-size: clamp(1.85rem, 4.2vw, 2.85rem);
    margin-bottom: 14px;
}

.legal-hero p {
    max-width: 62ch;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.03rem;
}

.legal-body {
    padding: clamp(34px, 5vw, 62px) 0 clamp(56px, 8vw, 90px);
}

.legal-doc {
    max-width: 880px;
    margin-inline: auto;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: .98rem;
}

.legal-doc h2 {
    margin: 2.1em 0 .85em;
    padding-bottom: .5em;
    border-bottom: 1px solid var(--border);
    font-size: clamp(1.14rem, 2.2vw, 1.32rem);
    font-weight: 700;
    letter-spacing: -.01em;
    scroll-margin-top: calc(var(--header-h) + 20px);
}

.legal-doc > h2:first-child {
    margin-top: 0;
}

.legal-doc h3 {
    position: relative;
    margin: 1.9em 0 .7em;
    padding-left: 14px;
    font-size: 1.04rem;
    font-weight: 700;
    color: var(--ink);
    scroll-margin-top: calc(var(--header-h) + 20px);
}

.legal-doc h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-light), var(--brand-dark));
}

.legal-doc h2 + h3 {
    margin-top: 1.2em;
}

.legal-doc p {
    margin: 0 0 1.05em;
    color: var(--muted);
    line-height: 1.75;
}

.legal-doc strong {
    color: var(--ink);
    font-weight: 650;
}

.legal-doc a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(26, 115, 232, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .18s ease;
    overflow-wrap: anywhere;
}

.legal-doc a:hover {
    text-decoration-color: currentColor;
}

.legal-doc ul {
    margin: 0 0 1.15em;
    padding: 0;
    list-style: none;
}

.legal-doc li {
    position: relative;
    margin-bottom: .5em;
    padding-left: 23px;
    color: var(--muted);
    line-height: 1.7;
}

.legal-doc li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: .67em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand);
}

/* Quill indent levels used by the source content */
.legal-doc li.ql-indent-1 {
    padding-left: 47px;
}

.legal-doc li.ql-indent-1::before {
    left: 29px;
}

.legal-doc li.ql-indent-2 {
    padding-left: 71px;
}

.legal-doc li.ql-indent-2::before {
    left: 53px;
}

.legal-doc p.ql-indent-1 {
    padding-left: 24px;
}

.legal-doc p.ql-indent-2 {
    padding-left: 48px;
}

.legal-doc p.ql-indent-3 {
    padding-left: 72px;
}

/* Collapse the empty spacer paragraphs the editor emits */
.legal-doc p:has(> br:only-child) {
    display: none;
}

.legal-back {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

/* ------------------------------- Back To Top ------------------------------- */
.to-top {
    position: fixed;
    right: clamp(16px, 2.6vw, 26px);
    bottom: clamp(16px, 2.6vw, 26px);
    z-index: 60;
    display: grid;
    place-items: center;
    width: clamp(42px, 8vw, 48px);
    height: clamp(42px, 8vw, 48px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #fff;
    box-shadow: 0 8px 20px rgba(26, 115, 232, .32);
    /* parked out of the way until the page is scrolled */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, box-shadow .25s ease;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top.is-visible:hover,
.to-top.is-visible:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(26, 115, 232, .42);
    outline: none;
}

.to-top svg {
    width: clamp(18px, 3.4vw, 21px);
    height: clamp(18px, 3.4vw, 21px);
}

/* ------------------------------- Reveal Animation ------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    /* --d is set per item by the script so siblings cascade in */
    transition-delay: var(--d, 0s);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Columns of a grid animate one after another rather than all at once */
.row > .reveal,
.row > * > .reveal {
    transition-delay: var(--d, 0s);
}

/* Counting stats tick up once, when the block first scrolls into view */
.stat strong {
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }

    .btn:hover,
    .to-top.is-visible:hover,
    .fcard:hover,
    .stat:hover,
    .step:hover,
    .shot:hover,
    .contact__row:hover {
        transform: none;
    }

    .hero-shots__item--lead,
    .contact__icon {
        animation: none;
    }

    .heading-line::after {
        width: 68px;
        transition: none;
    }
}

/* ------------------------------- Responsive ------------------------------- */
@media (max-width: 991.98px) {

    .contact {
        max-width: 620px;
    }

    .sitenav {
        position: absolute;
        top: calc(var(--header-h) - 6px);
        left: 0;
        right: 0;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow);
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .nav__list a {
        padding: 12px 14px;
        border-radius: 12px;
    }
}

@media (max-width: 640px) {

    .hero__actions .btn,
    .cta__actions .btn,
    .contact__actions .btn {
        width: 100%;
    }

}

/* Phone footer: the four blocks stack, so centring them keeps one axis
   instead of a left-aligned stack under a centred copyright line. */
@media (max-width: 575.98px) {
    .footer {
        text-align: center;
    }

    .footer__top {
        --bs-gutter-y: 30px;
    }

    .footer__brand {
        justify-content: center;
    }

    .footer__about {
        margin-inline: auto;
        max-width: 36ch;
    }

    .footer__list {
        align-items: center;
    }

    .footer__list--inline {
        justify-content: center;
        margin-top: 16px;
    }

    /* rule off the contact block so it does not run into the link columns */
    .footer__top > div:last-child {
        padding-top: 26px;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 430px) {

    /* reclaim gutter so the brand and burger fit a 320px screen */
    .wrap {
        padding-inline: 16px;
    }

    .header__inner {
        gap: 10px;
    }

    /* below this the flanking screens are too small to read, so the
       lead screen carries the hero on its own */
    .hero-shots__item--left,
    .hero-shots__item--right {
        display: none;
    }

    .hero-shots__item--lead {
        width: 72%;
    }

    .brand {
        gap: 9px;
        font-size: .9rem;
    }

    .brand img {
        width: 32px;
        height: 32px;
    }
}