/*
    actoremail.com - everything on top of the purchased Maieum theme.

    style.css is the theme as bought, edited in exactly one respect: its
    fifteen `url(img/...)` references became `url(../img/...)` because it now
    lives in /css/ rather than at the root. Nothing else in it was touched, so
    it can still be diffed against the original.

    Four theme rules this file has to work around, all of them global:

      li  { list-style: none }        every ordered list here restores its own
      p   { margin-bottom: 0 !important }   hence the explicit margins below
      a   { border: 2px solid transparent } eats 4px out of every inline link
      header { position: fixed }      nothing in flow clears it on its own

    The last one is the important one. The theme only ever had a full-height
    hero under that header, so no page needed to clear it. Every page here
    except the homepage does, and every one of them also needs the header to
    have a background, because the theme leaves it transparent until you
    scroll and white-on-white is not a menu.

    ---------------------------------------------------------------------------
    Every icon rule below names BOTH `i` and `svg`, and has to.

    The theme ships Font Awesome twice: a 4.7.0 stylesheet, and 5.0.6's
    SVG-with-JS build. This site's markup uses the FA5 classes, and that build
    does not style the <i> - it REPLACES it with an <svg>. So an `i` selector
    matches for exactly as long as it takes the script to run, and then stops.

    That is not a subtle failure. The arrows in the flow diagram were set to
    40px and rendered at 14; the green ticks in the hero card came out gray.
    Both looked like styling that had simply not been written.

    An FA svg carries the same classes it replaced plus `svg-inline--fa`, and
    the default preserveAspectRatio means a fixed width will letterbox rather
    than stretch it.
    ---------------------------------------------------------------------------
*/

:root {
    --ae-purple: #8982f7;
    --ae-blue: #4cb5ff;
    --ae-ink: #05022a;
    --ae-muted: #6b6b86;
    --ae-line: #e7e7f3;
    --ae-wash: #f7f7fd;
    --ae-good: #1aa179;
    --ae-warn: #d97706;
    --ae-bad: #d64550;

    /* The fixed header's height. Every top offset on the site reads this one
       number so they cannot drift apart. */
    --ae-header: 92px;
}

/* ------------------------------------------------------------------ shell */

.ae-wordmark {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: #fff;
}

/*  The homepage has a dark hero behind the header, so the theme's transparent
    default is right there and only there. */
.ae-site:not(.ae-page-home) header,
.ae-app header {
    background: linear-gradient(135deg, rgb(76, 181, 255) 0%, rgb(137, 130, 247) 100%);
}

.ae-nav-button {
    border: 2px solid rgba(255, 255, 255, .6) !important;
    border-radius: 100px;
    padding: 4px 18px !important;
}
.ae-nav-button:hover { background: rgba(255, 255, 255, .15); }

.navbar-nav .nav-item.active .nav-link { color: #fff; font-weight: 600; }

/*  The theme centers the left menu absolutely, which collides with a longer
    member-area menu on a narrow laptop. */
.ae-app .left-menu { position: static; transform: none; }

.ae-flash { padding: 16px 0; color: #fff; font-weight: 600; margin-top: var(--ae-header); }
.ae-site:not(.ae-page-home) .ae-flash,
.ae-app .ae-flash { margin-top: 0; }
.ae-flash-success { background: var(--ae-good); }
.ae-flash-error   { background: var(--ae-bad); }

/* ------------------------------------------------------------------- hero */

/*  `#slider.ae-hero`, not `.ae-hero`. The theme sets `#slider { height: 100vh }`
    in style.css, outside any media query, and an id outranks a class - so the
    plain class rule never applied and the hero has been locked to exactly the
    viewport height the whole time. That was invisible at desktop, where the
    content happens to fit. Once the envelope was added and the layout started
    stacking, the hero's contents overflowed a box that could not grow, and the
    envelope painted straight over the section below it. */
#slider.ae-hero { height: auto; min-height: 100vh; padding-bottom: 90px; }
.ae-hero .slider-content { height: auto; padding-top: calc(var(--ae-header) + 70px); }
.ae-hero .verticle-align-tm { position: static; transform: none; }

.ae-hero .slider-title { font-size: 3.4em; line-height: 1.15; margin-bottom: 24px; }
.ae-hero .slider-text { margin-bottom: 34px !important; max-width: 34em; font-size: 1.15em; }

/*  A strikethrough that stays legible at hero size - a plain line-through on
    3.4em text renders as a hairline and reads as a rendering fault. */
.ae-strike { position: relative; white-space: nowrap; opacity: .75; }
.ae-strike:after {
    content: "";
    position: absolute;
    left: -2%; right: -2%; top: 52%;
    height: 6px;
    border-radius: 3px;
    background: #fff;
    transform: rotate(-2.5deg);
}

.ae-hero-link { color: #fff !important; margin-left: 26px; text-decoration: underline; }

/* ------------------------------------------------- the envelope, and the card

   On load the flap folds open and the card rises out of the envelope and
   settles on top of it. Three plain divs, no image: the flap has to fold on its
   own top edge, and the card has to pass IN FRONT of the pocket and BEHIND the
   flap, which no flat illustration can do.

   The resting state written here is the FINISHED state, and the keyframes run
   from the closed state to it. That ordering is the whole safety story: a
   browser that never runs the animation shows an open envelope with the card
   out, rather than the product's headline card sealed inside one that never
   opens. Never express the closed state as the base and "reveal" it.

   The geometry is load-bearing, so the numbers are explained rather than
   tuned by eye:

     the envelope is WIDER than the card (-5% each side) because a card tucked
     inside one narrower than itself shows its own edges sticking out of the
     sides, and the illusion dies instantly;

     --ae-card-tuck is chosen so the tucked card sits entirely inside the band
     the flap and the pocket cover between them. The closed flap covers the
     envelope's top 60% and the pocket covers from 34% down, so the two overlap
     and there is no gap for the card to show through;

     z-index is stepped inside the keyframes, which is legal (it animates in
     discrete jumps). The card starts BELOW the pocket and ends ABOVE it, which
     is what "slides out and goes on top" means.
*/
/*  padding-bottom does two jobs: it lets the envelope hang below the card, and
    it is what sets the envelope's TOP, since the envelope is anchored to the
    stage's bottom. That in turn decides how much of the open flap shows above
    the card.

    Measured on a 1568px viewport: card 289 tall, envelope 326, flap projecting
    168 above the envelope's top edge. At 118px the flap's peak landed at y=51
    with the header ending at y=53, so the envelope's tip was tucked under the
    navigation. 150px drops it to about y=111: clear of the header, and still
    ~55px of triangle showing above the card, which is what makes it read as an
    open envelope rather than a rectangle. */
.ae-stage {
    position: relative;
    margin-top: calc(var(--ae-header) + 70px);
    padding-bottom: 150px;

    /*  Must land the tucked card inside the band the flap and pocket cover
        between them. With the numbers above that band is 113px to 150px of
        travel; below it the card's top shows above the closed flap, above it
        its bottom drops out under the pocket. */
    --ae-card-tuck: 132px;
}

/*  Sized from the CARD, not from an aspect ratio.
    ---------------------------------------------------------------------------
    This started as `aspect-ratio: 3/2`, which ties the envelope's height to the
    COLUMN's width - and the column's width and the card's height move
    independently. The card gets taller as the column narrows, because the
    address wraps. So the two cross over, and wherever they do the envelope
    becomes shorter than the thing it is supposed to contain, there is no tuck
    distance that hides it, and the card's top edge sits above the closed flap.

    That was not one bug. It was 360px, then 1024px, then whatever width was
    tested next: chasing it with per-breakpoint ratios is endless, because the
    ratio is not the thing that has to hold.

    Anchoring top and bottom instead makes the height derive from the card:

        height = card height + padding-bottom - 40

    which is taller than the card by (padding-bottom - 40) at EVERY width, with
    no arithmetic to re-check. The valid tuck range collapses to a constant
    [40px, padding-bottom], and the aspect ratio is free to vary, which is fine
    - envelopes are not one shape, and the flap and pocket are proportional so
    they follow it. */
.ae-envelope {
    position: absolute;
    left: -5%; right: -5%;
    top: 40px;
    bottom: 0;
    perspective: 1100px;
}

.ae-env-back, .ae-env-front, .ae-env-flap { position: absolute; }

.ae-env-back {
    inset: 0;
    z-index: 2;
    border-radius: 14px;
    background: linear-gradient(155deg, #f7f7fd 0%, #e2e2f2 100%);
    box-shadow: 0 26px 55px rgba(5, 2, 42, .3);
}
/*  The inside of the envelope, darker at the top where the opening is. */
.ae-env-back:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(5, 2, 42, .17) 0%, rgba(5, 2, 42, 0) 58%);
}

/*  The V-shaped front pocket. drop-shadow rather than box-shadow: box-shadow
    ignores clip-path and would draw a rectangle, drop-shadow follows the V and
    lets it cast onto the card behind it. */
.ae-env-front {
    inset: 0;
    z-index: 3;
    border-radius: 14px;
    background: linear-gradient(180deg, #efeff9 0%, #dadaee 100%);
    /*  Starts at 22% rather than 34% so the closed flap has less to reach down
        to. The flap's height is what pushes its open peak up toward the header,
        so the shallower the pocket's shoulders, the shorter the flap can be
        while still meeting them. */
    clip-path: polygon(0 22%, 50% 64%, 100% 22%, 100% 100%, 0 100%);
    filter: drop-shadow(0 -4px 8px rgba(5, 2, 42, .13));
}

/*  Resting state: folded open and behind the envelope, so it reads as the peak
    above an open envelope. rotateX on the top edge flips the triangle, which is
    why it points down in the clip-path and up on screen. */
.ae-env-flap {
    left: 0; right: 0; top: 0;
    /*  A floor in pixels, not a plain percentage.
        The flap's height decides two things at once: how far down it reaches
        when closed (it must pass the pocket's shoulders at 22%, or there is a
        gap for the tucked card to show through) and how far its peak projects
        UP when open, which is what collides with the header. A percentage of an
        envelope whose height now follows the card meant both moved whenever the
        card did. 132px covers 22% of any envelope this layout produces, and
        projects a constant ~125px, so the peak stays put. The 26% is a backstop
        if the card ever grows far beyond today's content. */
    height: max(132px, 26%);
    z-index: 1;
    transform-origin: top center;
    transform: rotateX(-162deg);
    background: linear-gradient(180deg, #e7e7f5 0%, #fafaff 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    animation: ae-flap-open .62s cubic-bezier(.55, .06, .68, .19) .18s both;
}

@keyframes ae-flap-open {
    /*  Closed, and above everything - this is what seals the card in. */
    0%   { transform: rotateX(0deg);    z-index: 8; }
    /*  Past vertical it is behind the envelope, so it drops in one step
        rather than trying to interpolate a stacking order. */
    54%  { z-index: 8; }
    55%  { z-index: 1; }
    100% { transform: rotateX(-162deg); z-index: 1; }
}

.ae-hero-card {
    position: relative;
    z-index: 6;
    background: rgba(255, 255, 255, .97);
    border-radius: 18px;
    padding: 34px 30px;
    box-shadow: 0 24px 60px rgba(5, 2, 42, .28);
    animation: ae-card-rise .95s cubic-bezier(.22, 1, .36, 1) .66s both;
}

@keyframes ae-card-rise {
    0%   { transform: translateY(var(--ae-card-tuck)) scale(.93); z-index: 2; }
    /*  Clear of the pocket's top edge by here, so it can come forward. */
    58%  { z-index: 2; }
    59%  { z-index: 6; }
    100% { transform: translateY(0) scale(1); z-index: 6; }
}

/*  Not a nicety. The card is the one element on this page carrying the
    product's actual proposition, and an animation that moves it is exactly
    what someone who asked for less motion asked to be spared. */
@media (prefers-reduced-motion: reduce) {
    .ae-env-flap, .ae-hero-card { animation: none; }
}
.ae-hero-card-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    font-weight: 700;
    color: var(--ae-muted);
    margin-bottom: 12px;
}
.ae-hero-address {
    font-size: 1.55em;
    font-weight: 700;
    color: var(--ae-ink);
    word-break: break-word;
    line-height: 1.3;
}
.ae-hero-at { color: var(--ae-purple); }
.ae-hero-domain { color: var(--ae-purple); }
.ae-hero-facts { margin-top: 22px !important; border-top: 1px solid var(--ae-line); padding-top: 18px; }
.ae-hero-facts li { padding: 6px 0; color: var(--ae-muted); }
.ae-hero-facts i, .ae-hero-facts svg { color: var(--ae-good); margin-right: 10px; }

/* ------------------------------------------------- the flow diagram (big) */

.ae-flow-section { padding: 100px 0; }

.ae-flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.ae-flow-step {
    flex: 1 1 0;
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 18px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(5, 2, 42, .05);
}
.ae-flow-step-us {
    border-color: var(--ae-purple);
    background: linear-gradient(160deg, #fff 0%, var(--ae-wash) 100%);
}
.ae-flow-icon {
    width: 84px; height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    color: #fff;
    background: linear-gradient(135deg, var(--ae-blue) 0%, var(--ae-purple) 100%);
}
.ae-flow-step h3 { font-size: 1.3em; margin-bottom: 14px; }
.ae-flow-detail { color: var(--ae-muted); line-height: 1.7; }
.ae-flow-address {
    display: inline-block;
    margin-top: 8px;
    color: var(--ae-ink);
    background: var(--ae-wash);
    border-radius: 8px;
    padding: 4px 10px;
    font-size: .93em;
    /*  break-word, not break-all: an address that has to wrap should break
        where it runs out of room, not split "actoremail.com" into
        "actoremail.co" and "m" while there is still space on the line. */
    word-break: break-word;
}

.ae-flow-arrow {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ae-purple);
}
.ae-flow-arrow i, .ae-flow-arrow svg { font-size: 40px; }
.ae-flow-arrow span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ae-muted);
    margin-top: 8px;
}

.ae-flow-reverse {
    display: flex;
    gap: 26px;
    align-items: flex-start;
    margin-top: 46px;
    background: var(--ae-ink);
    color: #fff;
    border-radius: 18px;
    padding: 34px 38px;
}
.ae-flow-reverse-icon {
    flex: 0 0 62px; height: 62px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    background: rgba(255, 255, 255, .12);
}
.ae-flow-reverse-text h3 { margin-bottom: 10px; }
.ae-flow-reverse-text p { color: rgba(255, 255, 255, .82); }
.ae-flow-reverse-text a { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- domains */

.ae-domains-section { padding: 90px 0; background: var(--ae-wash); }

.ae-domain-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ae-domain-chip {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 100px;
    padding: 12px 24px;
    font-weight: 600;
}
.ae-domain-chip-universal { border-color: var(--ae-purple); }
.ae-domain-name { color: var(--ae-ink); }
.ae-domain-tag {
    margin-left: 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ae-purple);
}
.ae-domains-more { text-align: center; margin-top: 34px !important; }

.ae-domain-detail-section { padding: 70px 0 90px; }
.ae-domain-card {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 26px;
    height: calc(100% - 26px);
}
.ae-domain-card-universal { border-color: var(--ae-purple); }
.ae-domain-card h3 { font-size: 1.4em; margin-bottom: 12px; word-break: break-all; }
.ae-domain-card p { color: var(--ae-muted); margin-bottom: 16px !important; }
.ae-domain-example {
    display: inline-block;
    background: var(--ae-wash);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--ae-muted);
    word-break: break-all;
}

/* ------------------------------------------------------------ step lists */

.ae-sendas-section { padding: 90px 0; }

.ae-steps-wrap {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 18px;
    padding: 38px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(5, 2, 42, .05);
}
.ae-steps-wrap-caveat { border-color: #f3dfc0; background: #fffdf7; }

.ae-steps-header { display: flex; gap: 20px; align-items: center; margin-bottom: 26px; }
.ae-steps-header i, .ae-steps-header svg { font-size: 38px; color: var(--ae-purple); flex: 0 0 auto; }
.ae-steps-header h3 { margin-bottom: 4px; }
.ae-steps-header p { color: var(--ae-muted); }

.ae-steps { counter-reset: none; padding-left: 0; }
.ae-steps li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid var(--ae-line);
}
.ae-steps li:first-child { border-top: none; }
.ae-step-number {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--ae-blue) 0%, var(--ae-purple) 100%);
}
.ae-step-text { flex: 1 1 auto; line-height: 1.65; }
.ae-steps-plain .ae-step-number { background: var(--ae-ink); }

.ae-steps-after {
    margin-top: 20px !important;
    padding: 14px 18px;
    background: var(--ae-wash);
    border-radius: 10px;
    color: var(--ae-ink);
}
.ae-steps-after i, .ae-steps-after svg { color: var(--ae-good); margin-right: 8px; }
.ae-steps-wrap-caveat .ae-steps-after i, .ae-steps-wrap-caveat .ae-steps-after svg { color: var(--ae-warn); }
.ae-steps-note { margin-top: 14px !important; color: var(--ae-muted); font-size: 14px; }

/* -------------------------------------------------------- provider groups */

.ae-providers-section { padding: 90px 0; background: var(--ae-wash); }

.ae-provider-column {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 18px;
    padding: 30px;
    height: 100%;
    margin-bottom: 26px;
}
.ae-provider-best { border-color: var(--ae-purple); }
.ae-provider-ok   { border-color: #f3dfc0; }
.ae-provider-no   { border-color: var(--ae-line); background: #fbfbfd; }

.ae-provider-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
    color: #fff;
    background: var(--ae-muted);
}
.ae-provider-best .ae-provider-badge { background: linear-gradient(135deg, var(--ae-blue), var(--ae-purple)); }
.ae-provider-ok   .ae-provider-badge { background: var(--ae-warn); }

.ae-provider-column-head { margin-bottom: 20px; }
.ae-provider-column-head h4 { font-size: 1.25em; margin-bottom: 8px; }
.ae-provider-column-head p { color: var(--ae-muted); font-size: 14px; }

/*  Name on one line, note on the next.
    These are three columns on a 1140px grid, so a right-aligned note never had
    room: "Free Gmail and Google Workspace" broke after "Google" and hung the
    last word under itself, and "Outlook desktop app" did the same on the left.
    Two clean lines beat two ragged ones. */
.ae-provider-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 12px;
    padding: 12px 0;
    border-top: 1px solid var(--ae-line);
}
.ae-provider-list i, .ae-provider-list svg { color: var(--ae-purple); width: 20px; flex: 0 0 20px; }
.ae-provider-no .ae-provider-list i, .ae-provider-no .ae-provider-list svg { color: var(--ae-muted); }
.ae-provider-name { font-weight: 600; flex: 1 1 auto; }
.ae-provider-note {
    flex: 1 1 100%;
    margin-left: 32px;
    color: var(--ae-muted);
    font-size: 13px;
    line-height: 1.5;
}
.ae-providers-more { text-align: center; margin-top: 40px !important; }

.ae-provider-detail-section { padding: 70px 0 90px; }
.ae-nope-card {
    background: #fbfbfd;
    border: 2px solid var(--ae-line);
    border-radius: 16px;
    padding: 26px;
    margin-bottom: 24px;
    height: calc(100% - 24px);
}
.ae-nope-card h3 { font-size: 1.25em; margin-bottom: 10px; }
.ae-nope-card i, .ae-nope-card svg { color: var(--ae-muted); margin-right: 8px; }
.ae-nope-card p { color: var(--ae-muted); }

/* ------------------------------------------------------------------ SMTP */

.ae-smtp-section { padding: 60px 0 20px; }
.ae-smtp-card {
    background: var(--ae-ink);
    color: #fff;
    border-radius: 18px;
    padding: 40px;
}
.ae-smtp-card h2 { margin-bottom: 12px; }
.ae-smtp-intro { color: rgba(255, 255, 255, .78); margin-bottom: 26px !important; }
.ae-smtp-card .ae-smtp-grid dt { color: rgba(255, 255, 255, .6); }
.ae-smtp-card .ae-smtp-grid dd { color: #fff; }
.ae-smtp-card .ae-smtp-grid > div { border-color: rgba(255, 255, 255, .12); }
.ae-smtp-card code { background: rgba(255, 255, 255, .12); color: #fff; }
.ae-smtp-card .ae-smtp-why { color: rgba(255, 255, 255, .7); }

.ae-smtp-grid { margin: 0; }
.ae-smtp-grid > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 14px 0;
    border-top: 1px solid var(--ae-line);
}
.ae-smtp-grid > div:first-child { border-top: none; }
.ae-smtp-grid dt {
    flex: 0 0 210px;
    margin: 0;
    font-weight: 600;
    color: var(--ae-muted);
}
.ae-smtp-grid dd { flex: 1 1 200px; margin: 0; word-break: break-word; }

code {
    background: var(--ae-wash);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 14px;
    color: var(--ae-ink);
}
code[data-copy] { cursor: pointer; }
code[data-copy]:hover { outline: 2px solid var(--ae-purple); }

.ae-secret { letter-spacing: .06em; }
.ae-smtp-why { margin-top: 20px !important; color: var(--ae-muted); font-size: 14px; }
.ae-smtp-why i, .ae-smtp-why svg { margin-right: 8px; }

/* --------------------------------------------------------------- pricing */

.ae-price-section { padding: 90px 0; }
.ae-price-card {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 18px;
    padding: 40px 34px;
    text-align: center;
    margin-bottom: 26px;
    height: calc(100% - 26px);
}
.ae-price-card-free { border-color: var(--ae-purple); }
.ae-price-card h3 { font-size: 1.3em; margin-bottom: 16px; }
.ae-price-figure {
    font-size: 4em;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--ae-purple), var(--ae-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ae-price-once { display: block; color: var(--ae-muted); font-size: 13px; margin-bottom: 20px; }
.ae-price-card p { color: var(--ae-muted); margin: 18px 0 26px !important; }
.ae-price-list { text-align: left; margin: 22px 0 !important; }
.ae-price-list li { padding: 8px 0; color: var(--ae-muted); }
.ae-price-list i, .ae-price-list svg { color: var(--ae-good); margin-right: 10px; }

.ae-price-promise { margin-top: 60px; text-align: center; }
.ae-price-promise h3 { margin-bottom: 30px; }
.ae-price-promise h4 { font-size: 1.15em; margin-bottom: 10px; }
.ae-price-promise i, .ae-price-promise svg { color: var(--ae-purple); margin-right: 8px; }
.ae-price-promise p { color: var(--ae-muted); margin-bottom: 24px !important; }

/* -------------------------------------------------------- generic page bits */

.ae-page-head {
    padding: calc(var(--ae-header) + 60px) 0 60px;
    background: linear-gradient(135deg, rgb(76, 181, 255) 0%, rgb(137, 130, 247) 100%);
    color: #fff;
    text-align: center;
}
.ae-page-head-tight { padding-bottom: 40px; }
.ae-page-head h1 { margin-bottom: 14px; }
.ae-page-head p { color: rgba(255, 255, 255, .88); max-width: 42em; margin: 0 auto !important; }

.ae-section-heading { margin: 50px 0 10px; }
.ae-section-sub { color: var(--ae-muted); margin-bottom: 28px !important; max-width: 46em; }

.ae-cta-strip {
    margin-top: 50px;
    text-align: center;
    background: var(--ae-wash);
    border-radius: 18px;
    padding: 40px;
}
.ae-cta-strip p { margin-bottom: 20px !important; font-size: 1.15em; }

.ae-callout {
    background: var(--ae-wash);
    border-left: 5px solid var(--ae-purple);
    border-radius: 12px;
    padding: 26px 30px;
    margin: 30px 0;
}
.ae-callout h3 { font-size: 1.2em; margin-bottom: 10px; }
.ae-callout h3 i, .ae-callout h3 svg { color: var(--ae-purple); margin-right: 8px; }
.ae-callout p { color: var(--ae-muted); margin-bottom: 16px !important; }
.ae-callout-warn { background: #fffaf0; border-left-color: var(--ae-warn); }
.ae-callout-warn h3 i, .ae-callout-warn h3 svg { color: var(--ae-warn); }
.ae-callout-new { background: #f1fbf7; border-left-color: var(--ae-good); }
.ae-callout-new h3 i, .ae-callout-new h3 svg { color: var(--ae-good); }

.ae-plain-list li { padding: 6px 0; color: var(--ae-muted); }
.ae-plain-list i, .ae-plain-list svg { color: var(--ae-purple); margin: 0 8px; }

.ae-ok   { color: var(--ae-good); font-weight: 600; }
.ae-warn { color: var(--ae-warn); font-weight: 600; }

/* -------------------------------------------------------------------- FAQ */

.ae-faq-section { padding: 70px 0 90px; }
.ae-faq-item {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}
.ae-faq-item summary {
    cursor: pointer;
    padding: 22px 26px;
    font-weight: 600;
    font-size: 1.1em;
    list-style: none;
    position: relative;
    padding-right: 60px;
}
.ae-faq-item summary::-webkit-details-marker { display: none; }
.ae-faq-item summary:after {
    content: "+";
    position: absolute;
    right: 26px; top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    color: var(--ae-purple);
}
.ae-faq-item[open] summary:after { content: "\2013"; }
.ae-faq-answer { padding: 0 26px 24px; color: var(--ae-muted); }

/* ------------------------------------------------------------------ legal */

.ae-legal-section { padding: 60px 0 90px; }
.ae-legal { max-width: 46em; margin: 0 auto; }
.ae-legal h2 { font-size: 1.4em; margin: 36px 0 12px; }
.ae-legal p { color: var(--ae-muted); margin-bottom: 14px !important; }
.ae-legal ul { margin: 14px 0 !important; }
.ae-legal li { color: var(--ae-muted); padding: 5px 0 5px 22px; position: relative; }
.ae-legal li:before { content: "\2022"; position: absolute; left: 4px; color: var(--ae-purple); }

/* ------------------------------------------------------------------ forms */

.ae-form-section { padding: 60px 0 90px; }
.ae-site.ae-page-login .ae-form-section,
.ae-site.ae-page-forgot .ae-form-section,
.ae-site.ae-page-contact .ae-form-section { padding-top: calc(var(--ae-header) + 60px); }

.ae-form-card {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 14px 40px rgba(5, 2, 42, .06);
}
.ae-form-card-center { text-align: center; }
.ae-form-card h1 { font-size: 2em; margin-bottom: 14px; }
.ae-form-lead { color: var(--ae-muted); margin-bottom: 24px !important; }
.ae-form-note {
    background: var(--ae-wash);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--ae-muted);
    margin-bottom: 22px !important;
}
.ae-form-foot { margin-top: 22px !important; text-align: center; color: var(--ae-muted); font-size: 14px; }

label {
    display: block;
    font-weight: 600;
    margin: 18px 0 7px;
    font-size: 14px;
}

input[type=text], input[type=email], input[type=password], select, textarea {
    width: 100%;
    border: 2px solid var(--ae-line);
    border-radius: 10px;
    padding: 12px 15px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ae-ink);
    background: #fff;
    transition: border-color .2s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ae-purple); }

.ae-field-hint { display: block; margin-top: 7px; font-size: 13px; color: var(--ae-muted); }
.ae-form-row { display: flex; gap: 16px; }
.ae-form-row > div { flex: 1 1 0; }

.ae-form-card .pt-button, .ae-panel .pt-button { margin-top: 26px; border: none; }

.ae-error, .ae-success {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px !important;
    font-weight: 600;
}
.ae-error   { background: #fdeced; color: var(--ae-bad); }
.ae-success { background: #eafaf3; color: var(--ae-good); }

/*  Off-screen rather than display:none - a bot that checks for the latter
    still fills this in. */
.ae-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ----------------------------------------------------------------- payment */

.ae-pay-block { margin-top: 30px; border-top: 2px solid var(--ae-line); padding-top: 26px; }
.ae-pay-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    font-size: 1.1em;
}
.ae-pay-total strong { font-size: 1.6em; color: var(--ae-purple); }
.ae-pay-button:disabled { opacity: .5; cursor: not-allowed; }
.ae-pay-note { margin-top: 16px !important; font-size: 13px; color: var(--ae-muted); text-align: center; }
.ae-pay-note i, .ae-pay-note svg { margin-right: 6px; color: var(--ae-good); }

/* -------------------------------------------------------------- member area */

.ae-app-head {
    padding: calc(var(--ae-header) + 44px) 0 44px;
    background: linear-gradient(135deg, rgb(76, 181, 255) 0%, rgb(137, 130, 247) 100%);
    color: #fff;
}
.ae-app-head h1 { margin-bottom: 8px; }
.ae-app-head p { color: rgba(255, 255, 255, .88); }

.ae-app-body { padding: 44px 0 90px; }

.ae-panel {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 18px;
    padding: 34px;
    margin-bottom: 26px;
}
.ae-panel h2 { font-size: 1.5em; margin-bottom: 10px; }
.ae-panel-lead { color: var(--ae-muted); margin-bottom: 22px !important; }
.ae-panel-create { border-color: var(--ae-purple); }

.ae-empty { text-align: center; padding: 60px 20px; }
.ae-empty-icon {
    width: 84px; height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: #fff;
    background: linear-gradient(135deg, var(--ae-blue) 0%, var(--ae-purple) 100%);
}
.ae-empty h2 { margin-bottom: 12px; }
.ae-empty p { color: var(--ae-muted); margin-bottom: 26px !important; }

.ae-address-card {
    display: block;
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 26px;
    height: calc(100% - 26px);
    color: inherit;
}
.ae-address-card-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    background: var(--ae-good);
    border-radius: 100px;
    padding: 3px 10px;
    margin-bottom: 12px;
}
.ae-address-card h3 { font-size: 1.2em; word-break: break-all; margin-bottom: 10px; }
.ae-address-card-flow { color: var(--ae-muted); font-size: 14px; word-break: break-all; }
.ae-address-card-flow i, .ae-address-card-flow svg { color: var(--ae-purple); margin-right: 6px; }
.ae-address-card-status { margin: 14px 0 !important; font-size: 14px; }
.ae-address-card-add { text-align: center; border-style: dashed; }
.ae-address-card-add:hover { border-color: var(--ae-purple); }
.ae-address-card-add p { color: var(--ae-muted); font-size: 14px; }

.ae-create-form .ae-create-address { display: flex; align-items: center; gap: 10px; }
.ae-create-address input { flex: 1 1 45%; font-size: 1.15em; font-weight: 600; }
.ae-create-address select { flex: 1 1 55%; font-size: 1.05em; }
.ae-create-at { font-size: 1.5em; font-weight: 700; color: var(--ae-purple); }

.ae-address-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--ae-line);
    padding-bottom: 16px;
    margin-bottom: 22px;
}
.ae-address-panel-head h3 { font-size: 1.4em; word-break: break-all; }
.ae-address-since { color: var(--ae-muted); font-size: 13px; }

.ae-inline-row { display: flex; gap: 10px; }
.ae-inline-row input { flex: 1 1 auto; }

.ae-mini-button {
    display: inline-block;
    border: 2px solid var(--ae-line);
    background: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ae-ink);
    white-space: nowrap;
    cursor: pointer;
}
.ae-mini-button:hover { border-color: var(--ae-purple); color: var(--ae-purple); }
.ae-mini-button-danger { border-color: #f3c9cd; color: var(--ae-bad); }
.ae-mini-button-danger:hover { border-color: var(--ae-bad); color: var(--ae-bad); }

.ae-danger { margin-top: 26px; border-top: 2px solid var(--ae-line); padding-top: 18px; }
.ae-danger > summary {
    cursor: pointer;
    color: var(--ae-bad);
    font-weight: 600;
    font-size: 14px;
}
.ae-danger-body { padding-top: 16px; }
.ae-danger-body p { color: var(--ae-muted); margin-bottom: 14px !important; font-size: 14px; }

.ae-address-switch { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.ae-address-switch > span { color: var(--ae-muted); font-size: 14px; }
.ae-switch-chip {
    border: 2px solid var(--ae-line);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ae-ink);
}
.ae-switch-chip-on { border-color: var(--ae-purple); color: var(--ae-purple); }

.ae-guide {
    background: #fff;
    border: 2px solid var(--ae-line);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
}
.ae-guide-caveat { border-color: #f3dfc0; }
.ae-guide > summary {
    cursor: pointer;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    flex-wrap: wrap;
}
.ae-guide > summary::-webkit-details-marker { display: none; }
.ae-guide > summary i, .ae-guide > summary svg { color: var(--ae-purple); font-size: 22px; }
.ae-guide-name { font-weight: 600; font-size: 1.1em; }
.ae-guide-note { color: var(--ae-muted); font-size: 13px; margin-left: auto; }
.ae-guide-body { padding: 0 26px 24px; }

.ae-smtp-panel .ae-smtp-grid { margin-top: 10px; }

.ae-thanks-tick {
    width: 76px; height: 76px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    color: #fff;
    background: var(--ae-good);
}
.ae-form-card-center .ae-steps { text-align: left; margin: 26px 0 !important; }

/* ----------------------------------------------------------------- footer */

.ae-footer-blurb { color: rgba(255, 255, 255, .7); margin-top: 16px !important; }

/* ------------------------------------------------------------- responsive */

/* --------------------------------------------------- collapsed navigation

   Bootstrap's `navbar-expand-lg` collapses the menu at 991.98px. The theme
   only styles the collapsed bar from 768px down. In the 223px between those
   two the hamburger is showing while `.left-menu` is still
   `position: absolute; left: 49%; transform: translateX(-50%)` and the header
   still has no background at all - so the links stack on top of each other,
   half off the side, over whatever the page happens to be showing.

   Below 768px the theme did give the header a background, but the open menu
   was still just loose links with nothing behind them. Both are fixed here at
   Bootstrap's real breakpoint, which is the one that decides when a hamburger
   appears and therefore the only one that matters.
*/
@media (max-width: 991.98px) {

    /*  The homepage deliberately has a transparent header over its hero. That
        is right for a bar of links and wrong for an open menu panel, and at
        this width there is always a hamburger, so it applies everywhere. */
    header,
    header.black {
        background: linear-gradient(135deg, rgb(76, 181, 255) 0%, rgb(137, 130, 247) 100%);
    }

    .navbar { padding: .4rem 0; }

    /*  The two halves of the bar are absolutely positioned and floated at
        desktop. Neither survives being stacked. */
    .left-menu,
    .right-menu {
        position: static;
        left: auto;
        float: none;
        transform: none;
        text-align: left;
    }

    /*  A real panel, edge to edge, instead of links floating on the page.
        Negative margins pull it out to the container's gutters so the tint
        reaches both edges. */
    .navbar-collapse {
        margin: 12px -15px 0;
        padding: 4px 15px 16px;
        background: rgba(5, 2, 42, .26);
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .navbar-nav .nav-item,
    .right-menu .nav-item { width: 100%; }

    .navbar-light .navbar-nav .nav-link,
    .right-menu .nav-link {
        display: block;
        margin: 0;
        padding: 13px 2px !important;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
    }
    .right-menu .nav-item:last-child .nav-link { border-bottom: none; }

    /*  The pill keeps its shape rather than stretching into a full-width slab,
        which at this size reads as a section header rather than a button.

        Written as `.right-menu .nav-link.ae-nav-button` and not just
        `.ae-nav-button`: the rule above it that turns every nav link into a
        full-width block is `.right-menu .nav-link`, two classes, and a single
        class cannot outrank it. The button stretched edge to edge until this
        matched its specificity. */
    .right-menu .nav-link.ae-nav-button {
        display: inline-block;
        width: auto;
        margin-top: 14px;
        padding: 11px 28px !important;
        border-color: #fff !important;
        background: rgba(255, 255, 255, .18);
    }

    .navbar-toggler { padding: 5px 10px; }
}

@media (max-width: 991px) {

    :root { --ae-header: 78px; }

    /*  Same id-beats-class trap as the base rule. The theme adds a second
        `#slider { height: 100vh }` at 768px too. */
    #slider.ae-hero { min-height: 0; padding-bottom: 60px; }

    /*  70px of breathing room under a fixed header is right when the hero is
        two columns side by side. Stacked, it is 70px on top of a hero that is
        already about 1300px tall on a phone, before anyone has read a word. */
    .ae-hero .slider-content { padding-top: calc(var(--ae-header) + 28px); }

    .ae-hero .slider-title { font-size: 2.4em; }

    /*  Capped and centered. Below 992px the hero column goes full width, and
        an envelope sized off that is 957px wide and 638px tall sitting behind
        a 289px card - measured at 900px, where it filled most of the viewport
        and stopped reading as an envelope at all. The card looks better at
        this width anyway; it does not need 870px to say one address. */
    /*  The top margin has to clear the open flap, not just look like a gap.
        The peak is a transform, so it overflows the stage's box upward by
        about 100px and paints over whatever is above it - here the hero's
        "See how it works" link, which it was slicing in half at 768 and 900.
        Nothing stacks it out of the way either: the envelope's parts carry
        z-index 1 to 3 and the CTA above carries none. */
    .ae-stage {
        max-width: 460px;
        margin: 130px auto 0;
        padding-bottom: 130px;
        --ae-card-tuck: 122px;
    }

    /*  The flow stops being a row and becomes a column, and the arrows have to
        turn with it or they point off the side of the screen. */
    .ae-flow { flex-direction: column; }
    .ae-flow-arrow { flex: 0 0 auto; padding: 6px 0; }
    .ae-flow-arrow i, .ae-flow-arrow svg { transform: rotate(90deg); }
    .ae-flow-reverse { flex-direction: column; }

    .ae-form-row { flex-direction: column; gap: 0; }
    .ae-create-form .ae-create-address { flex-direction: column; align-items: stretch; }
    .ae-create-at { display: none; }

    .ae-provider-note { margin-left: 0; }
    .ae-smtp-grid dt { flex-basis: 100%; }
    .ae-guide-note { margin-left: 0; flex-basis: 100%; }

    .ae-app .left-menu { position: static; transform: none; }
}

@media (max-width: 575px) {

    /*  "See how it works" sits beside the button at desktop. At this width the
        two do not fit on one line, and it was wrapping mid-phrase around the
        pill: "See how it" on one line and "works" under it, hard against the
        button's edge. Its own line instead. */
    .ae-hero-link { display: block; margin: 22px 0 0; }

    /*  Same 24px the other cards drop to at this width. */
    .ae-hero-card { padding: 24px 20px; }

    .ae-page-head h1, .ae-app-head h1 { font-size: 2em; }
    .ae-panel, .ae-form-card, .ae-steps-wrap, .ae-smtp-card { padding: 24px 20px; }
    .ae-inline-row { flex-direction: column; }
    .ae-hero-address { font-size: 1.2em; }
}