/* =====================================================================
   GPass public landing page, "Daylight"
   Namespaced gpl-* and loaded only by _Host, alongside site.css. Nothing
   here touches the authenticated app, and nothing in site.css styles gpl-*.

   DIRECTION
   This replaces the previous dark "mail room at night" page. Same product,
   same blue, opposite ground. The page is now paper in daylight: a cool
   white sheet with a spectrum of coloured light blooming behind the hero
   and the closing CTA, the way sun through a window throws colour onto a
   desk. Legibility stops being the hard problem the ferrofluid made it, so
   the backdrop can finally be colourful without ever sitting under copy.

   THE GLOW (replaces the ferrofluid)
   Five stacked radial ellipses: a soft envelope, brand blue dead centre,
   violet left, teal right, and a warm rose low under the middle. Each is
   its own radial so the hues mix optically as overlapping light rather
   than banding like a linear gradient. mix-blend-mode: multiply keeps the
   overlaps saturated; without it four low-alpha layers over white wash
   toward grey exactly where they meet. No WebGL, no canvas, no GL context
   to lose, and nothing to hide on touch devices.

   GOTCHA: the glow's ancestors must NOT create an isolated stacking
   context. The old .gpl-page set `isolation: isolate` for the fixed
   ferrofluid layers; that would make these lobes blend against the section
   instead of the page and the colour would go flat. It is deliberately
   gone. Do not reintroduce it, or a transform/filter on .gpl-page.

   ACCENT
   One accent, --ac #2F6FEB, the same blue the authed app uses for actions
   and the same blue as the logo, so marketing and product read as one
   product. Violet, teal and rose appear ONLY as backdrop light and in the
   brand mark. They are never used for text, borders, or state.

   DEPTH
   Light mode, so the old glass-on-ink strategy is gone: hairline border
   plus a whisper shadow on cards, and one real elevation shadow reserved
   for the two things that genuinely float, the hero rotation card and the
   menu panel. One strategy, never mixed.

   TYPE SCALE
   Sized for 150% Windows scaling, which is what this audience runs, so the
   effective viewport is ~1280x590 rather than a full 1920. The page has
   exactly ONE type peak, the hero h1 at 56px max. Section titles top out
   at 37, the end CTA at 42, the menu panel's items at 34.

   GOTCHA: clamp() math needs whitespace around + and -, or the whole
   declaration is dropped and the size silently inherits. Always write
   clamp(34px, 2.4vw + 20px, 52px), never the unspaced form.
   ===================================================================== */

.gpl-page {
    /* accent */
    --ac: #2F6FEB;
    --ac-dark: #1E4FBF;
    --ac-light: #6BA1FF;
    --ac-wash: rgba(47, 111, 235, .08);
    --ac-ring: rgba(47, 111, 235, .28);

    /* backdrop spectrum. Light only, never applied to text or borders. */
    --spec-violet: #8B5CF6;
    --spec-teal: #14B8BE;
    --spec-rose: #F472B6;

    /* the sheet. Neutrals are biased cool so they agree with the accent
       instead of fighting it; a pure grey here reads as unconsidered. */
    --paper: #F7F9FC;
    --surface: #FFFFFF;
    --inset: #F1F5FA;

    /* text hierarchy: primary / secondary / tertiary */
    --tx: #0B1220;
    --tx2: #47536B;
    --tx3: #77839A;

    /* hairlines */
    --line: #E2E8F2;
    --line-strong: #CBD5E6;

    /* semantic, kept separate from the accent */
    --ok: #15803D;
    --ok-wash: rgba(21, 128, 61, .10);
    --signal: #C77700;
    --signal-wash: rgba(245, 165, 36, .14);

    /* elevation. Light mode needs real shadow; the dark page did not. */
    --lift-card: 0 1px 2px rgba(11, 18, 32, .04);
    --lift-float: 0 1px 2px rgba(11, 18, 32, .04), 0 18px 44px -18px rgba(11, 18, 32, .20), 0 40px 80px -40px rgba(47, 111, 235, .28);
    --lift-pop: 0 1px 2px rgba(11, 18, 32, .06), 0 24px 48px -20px rgba(11, 18, 32, .28);

    /* rhythm, 4px base */
    --gutter: clamp(20px, 5vw, 64px);
    --radius: 10px;
    --radius-lg: 16px;

    /* motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    /* TYPE
       Geist for everything read as language, Geist Mono for everything read
       as a value: section numbers, feature indices, kickers, plan names,
       sender counts. That split is what makes the page read as instrument
       rather than brochure. Both load from Google Fonts in _Host, scoped to
       this class so the authed app keeps its own stack. The fallbacks are
       listed so a blocked CDN degrades to the old look instead of to Times.

       NOTE: prices deliberately do NOT use the mono face. See .gpl-plan-amt. */
    --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    position: relative;
    min-height: 100vh;
    padding-top: 64px;              /* the header is fixed */
    background: var(--paper);
    color: var(--tx);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: "ss01", "cv01";   /* Geist's straighter l and single-storey a */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.gpl-page *,
.gpl-page *::before,
.gpl-page *::after { box-sizing: border-box; }

.gpl-page ::selection { background: var(--ac); color: #fff; }

.gpl-page h1,
.gpl-page h2,
.gpl-page h3 { text-wrap: balance; margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 700; }
.gpl-page p { text-wrap: pretty; margin: 0; }
.gpl-page ul, .gpl-page ol { margin: 0; padding: 0; list-style: none; }
.gpl-page a { color: inherit; text-decoration: none; }

.gpl-page :focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 3px;
    border-radius: 5px;
}

/* App.razor runs <FocusOnNavigate Selector="h1" />, which gives the hero
   heading tabindex="-1" and focuses it on every navigation so a screen
   reader starts at the top of the new page. Chrome then matches
   :focus-visible on it and the rule above draws a ring around the whole
   headline, which is the first thing a visitor sees.
   The heading is not interactive and nobody can tab to it, so the ring
   communicates nothing. Dropping it here leaves the announcement intact
   and every real control still ringed. */
.gpl-page h1:focus, .gpl-page h1:focus-visible { outline: none; }

/* Restated: site.css and the app shell both ship resets that a flex or grid
   child can otherwise out-specify, leaving a [hidden] element visible. */
.gpl-page [hidden] { display: none !important; }

.gpl-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gpl-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: var(--gutter); }
.gpl-ico { width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------------
   The glow
   Used twice: rising behind the hero, and under the closing CTA.
   --------------------------------------------------------------------- */
.gpl-glow { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 0; }
.gpl-glow-top { top: 0; }
.gpl-glow-below { bottom: -128px; }

.gpl-glow > * {
    position: absolute;
    left: 50%;
    border-radius: 50%;
    mix-blend-mode: multiply;
}

.gpl-glow-wide {
    width: 62%; height: 256px; transform: translateX(-50%) scale(2.5);
    background: radial-gradient(ellipse at center, rgba(123, 168, 255, .34) 10%, rgba(123, 168, 255, 0) 62%);
}
.gpl-glow-core {
    width: 38%; height: 128px; transform: translateX(-50%) scale(2);
    background: radial-gradient(ellipse at center, rgba(47, 111, 235, .30) 10%, rgba(47, 111, 235, 0) 60%);
}
.gpl-glow-violet {
    width: 34%; height: 150px; transform: translateX(-132%) scale(2.1);
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, .30) 8%, rgba(139, 92, 246, 0) 62%);
}
.gpl-glow-teal {
    width: 34%; height: 150px; transform: translateX(30%) scale(2.1);
    background: radial-gradient(ellipse at center, rgba(20, 184, 190, .26) 8%, rgba(20, 184, 190, 0) 62%);
}
.gpl-glow-rose {
    width: 30%; height: 110px; top: 92px; transform: translateX(-50%) scale(2.2);
    background: radial-gradient(ellipse at center, rgba(244, 114, 182, .24) 8%, rgba(244, 114, 182, 0) 64%);
}

@media (min-width: 640px) {
    .gpl-glow-wide { height: 512px; }
    .gpl-glow-core { height: 256px; }
    .gpl-glow-violet, .gpl-glow-teal { height: 300px; }
    .gpl-glow-rose { height: 220px; top: 170px; }
}

/* ---------------------------------------------------------------------
   Brand mark, used in the header and the footer
   --------------------------------------------------------------------- */
.gpl-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; font-size: 17px; color: var(--tx); }
.gpl-brand-mark { width: 28px; height: 28px; display: block; object-fit: contain; flex: none; }
.gpl-brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.gpl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding-inline: 20px; border-radius: 9px;
    font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
    letter-spacing: -.01em;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    text-decoration: none;
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
                background-color .18s ease, border-color .18s ease, color .18s ease;
}
.gpl-btn:active { transform: scale(.985); }

.gpl-btn-primary {
    background: var(--ac); color: #fff;
    box-shadow: 0 1px 2px rgba(11, 18, 32, .10), 0 6px 18px rgba(47, 111, 235, .26);
}
.gpl-btn-primary:hover {
    background: var(--ac-dark); transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(11, 18, 32, .12), 0 10px 26px rgba(47, 111, 235, .32);
}

.gpl-btn-outline,
.gpl-btn-ghost { background: var(--surface); color: var(--tx); border-color: var(--line-strong); }
.gpl-btn-outline:hover,
.gpl-btn-ghost:hover { border-color: var(--ac-ring); color: var(--ac-dark); }

/* The header sign-in pill. Kept small so it never rivals the primary CTA. */
.gpl-btn-solid { background: var(--surface); color: var(--tx); border-color: var(--line-strong); height: 38px; padding-inline: 16px; font-size: 13.5px; }
.gpl-btn-solid:hover { border-color: var(--ac-ring); color: var(--ac-dark); }

.gpl-btn-lg { height: 50px; padding-inline: 26px; font-size: 15.5px; }
.gpl-gmark { width: 17px; height: 17px; flex: none; }

/* ---------------------------------------------------------------------
   Header + staggered menu
   Ported from the StaggeredMenu component without GSAP. Every tween in the
   original timeline is a CSS transition here, with the same offsets and the
   same curves: power4.out -> cubic-bezier(.165,.84,.44,1), power3.in ->
   cubic-bezier(.55,.055,.675,.19). Blazor only toggles one class, so there
   is no animation engine to keep in sync with a re-render.

   The wrapper spans the viewport with pointer-events off; only the header
   bar and the panel take input, so the page beneath stays clickable.
   --------------------------------------------------------------------- */
.gpl-sm {
    position: fixed; inset: 0; z-index: 60;
    pointer-events: none; overflow: hidden;
}

.gpl-sm-header {
    position: absolute; top: 0; left: 0; width: 100%; z-index: 20;
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease;
}
.gpl-sm-header.is-stuck {
    background: rgba(247, 249, 252, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--line);
}
/* While the panel is open the bar must not tint the white panel behind it. */
.gpl-sm.is-open .gpl-sm-header {
    background: transparent; border-bottom-color: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}

.gpl-sm-bar { display: flex; align-items: center; gap: 16px; height: 64px; }
.gpl-sm-bar > * { pointer-events: auto; }
.gpl-sm-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }

/* toggle: rolling Menu/Close label plus a plus that spins into a cross */
.gpl-sm-toggle {
    position: relative; display: inline-flex; align-items: center; gap: 9px;
    background: none; border: 0; padding: 6px 2px; cursor: pointer;
    font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
    color: var(--tx);
}
.gpl-sm-textwrap {
    position: relative; display: inline-block; height: 1em; overflow: hidden;
    white-space: nowrap; text-align: left; width: var(--gpl-sm-tw, 3.4em);
}
.gpl-sm-textinner { display: flex; flex-direction: column; line-height: 1; }
.gpl-sm-line { display: block; height: 1em; line-height: 1; }

.gpl-sm-icon {
    position: relative; width: 15px; height: 15px; flex: none;
    transition: transform .8s cubic-bezier(.165, .84, .44, 1);
}
.gpl-sm.is-open .gpl-sm-icon { transform: rotate(225deg); }
.gpl-sm-iconline {
    position: absolute; left: 50%; top: 50%; width: 100%; height: 2px;
    background: currentColor; border-radius: 2px; transform: translate(-50%, -50%);
}
.gpl-sm-iconline-v { transform: translate(-50%, -50%) rotate(90deg); }

/* prelayers + panel, parked offscreen until opened */
.gpl-sm-prelayers {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 5;
    width: clamp(300px, 38vw, 460px); pointer-events: none;
}
.gpl-sm-prelayer, .gpl-sm-panel {
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.55, .055, .675, .19);
}
.gpl-sm-prelayer { position: absolute; inset: 0; }

.gpl-sm-panel {
    position: absolute; top: 0; right: 0; z-index: 10; height: 100%;
    width: clamp(300px, 38vw, 460px);
    background: var(--surface);
    border-left: 1px solid var(--line);
    display: flex; flex-direction: column;
    padding: 88px 32px 32px;
    overflow-y: auto; overscroll-behavior: contain;
    pointer-events: none;
    box-shadow: -30px 0 60px -30px rgba(11, 18, 32, .28);
}
.gpl-sm.is-open .gpl-sm-panel { pointer-events: auto; }

/* Opening: layers lead, panel follows. Offsets are the original timeline's,
   converted from seconds to transition-delay. */
.gpl-sm.is-open .gpl-sm-prelayer,
.gpl-sm.is-open .gpl-sm-panel { transform: translateX(0); }
.gpl-sm.is-open .gpl-sm-prelayer { transition: transform .5s cubic-bezier(.165, .84, .44, 1); }
.gpl-sm.is-open .gpl-sm-prelayer:nth-child(1) { transition-delay: 0s; }
.gpl-sm.is-open .gpl-sm-prelayer:nth-child(2) { transition-delay: .07s; }
.gpl-sm.is-open .gpl-sm-panel { transition: transform .65s cubic-bezier(.165, .84, .44, 1) .15s; }

.gpl-sm-inner { flex: 1; display: flex; flex-direction: column; gap: 24px; }

/* MENU ROWS
   Every row is one grid with a fixed 40px numeral column on the right, so
   the numerals form a true vertical column no matter how long the label is
   or whether it wraps. The first version pinned the numeral to the label
   box with `position: absolute; right: .2em` on an inline-block item, which
   meant every row placed its numeral at a different x, and a wrapping label
   ("How it works") threw its numeral clean off the baseline.

   Rows are a uniform 60px min-height with symmetrical 10px padding and
   hairline separators, so spacing stays even whether a label wraps or not. */
.gpl-sm-list { display: flex; flex-direction: column; }

.gpl-sm-itemwrap {
    position: relative;
    border-bottom: 1px solid var(--line);
    overflow: hidden;                /* clips the label's rise */
}
.gpl-sm-itemwrap:first-child { border-top: 1px solid var(--line); }

.gpl-sm-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: clamp(26px, 2.2vw + 12px, 34px);
    font-weight: 700;
    letter-spacing: -.032em;
    line-height: 1.06;
    color: var(--tx);
    text-align: left;
    cursor: pointer;
    transition: color .25s ease;
}
.gpl-sm-item:hover,
.gpl-sm-item:focus-visible { color: var(--ac); }

.gpl-sm-itemlabel {
    display: block;
    transform-origin: 50% 100%;
    transform: translateY(140%) rotate(8deg);
    transition: transform 1s cubic-bezier(.165, .84, .44, 1);
}
.gpl-sm.is-open .gpl-sm-itemlabel { transform: none; }

/* The numeral sits in its own column, top-aligned to the label's first line
   and right-aligned to a shared edge, which is what makes 01..07 read as a
   column rather than as scattered marks. */
.gpl-sm-num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    color: var(--ac);
    text-align: right;
    font-variant-numeric: tabular-nums;
    align-self: start;
    margin-top: .5em;
    opacity: 0;
    transition: opacity .6s cubic-bezier(.33, 1, .68, 1);
    user-select: none;
}
.gpl-sm.is-open .gpl-sm-num { opacity: 1; }

/* item stagger 0.1s each from itemsStart ~0.25s; numerals 0.08s each from
   itemsStart + 0.1, both taken from the original GSAP timeline */
.gpl-sm-list li:nth-child(1) .gpl-sm-itemlabel { transition-delay: .25s; }
.gpl-sm-list li:nth-child(2) .gpl-sm-itemlabel { transition-delay: .35s; }
.gpl-sm-list li:nth-child(3) .gpl-sm-itemlabel { transition-delay: .45s; }
.gpl-sm-list li:nth-child(4) .gpl-sm-itemlabel { transition-delay: .55s; }
.gpl-sm-list li:nth-child(5) .gpl-sm-itemlabel { transition-delay: .65s; }
.gpl-sm-list li:nth-child(6) .gpl-sm-itemlabel { transition-delay: .75s; }
.gpl-sm-list li:nth-child(7) .gpl-sm-itemlabel { transition-delay: .85s; }
.gpl-sm.is-open .gpl-sm-list li:nth-child(1) .gpl-sm-num { transition-delay: .35s; }
.gpl-sm.is-open .gpl-sm-list li:nth-child(2) .gpl-sm-num { transition-delay: .43s; }
.gpl-sm.is-open .gpl-sm-list li:nth-child(3) .gpl-sm-num { transition-delay: .51s; }
.gpl-sm.is-open .gpl-sm-list li:nth-child(4) .gpl-sm-num { transition-delay: .59s; }
.gpl-sm.is-open .gpl-sm-list li:nth-child(5) .gpl-sm-num { transition-delay: .67s; }
.gpl-sm.is-open .gpl-sm-list li:nth-child(6) .gpl-sm-num { transition-delay: .75s; }
.gpl-sm.is-open .gpl-sm-list li:nth-child(7) .gpl-sm-num { transition-delay: .83s; }

/* The CTA the header gives up on small screens has to live somewhere. */
.gpl-sm-cta { display: flex; flex-direction: column; gap: 10px; }
.gpl-sm-cta .gpl-btn { width: 100%; }

.gpl-sm-tail { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 11px; }
.gpl-sm-tail-title {
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ac-dark);
    opacity: 0; transition: opacity .5s ease;
}
.gpl-sm.is-open .gpl-sm-tail-title { opacity: 1; transition-delay: .41s; }
.gpl-sm-tail-list { display: flex; flex-wrap: wrap; gap: 18px; }
.gpl-sm-tail-list a {
    font-size: 15.5px; font-weight: 500; color: var(--tx2);
    opacity: 0; transform: translateY(25px);
    transition: opacity .55s cubic-bezier(.33, 1, .68, 1),
                transform .55s cubic-bezier(.33, 1, .68, 1), color .25s ease;
}
.gpl-sm.is-open .gpl-sm-tail-list a { opacity: 1; transform: none; }
.gpl-sm.is-open .gpl-sm-tail-list a:nth-child(1) { transition-delay: .45s; }
.gpl-sm.is-open .gpl-sm-tail-list a:nth-child(2) { transition-delay: .53s; }
.gpl-sm.is-open .gpl-sm-tail-list a:nth-child(3) { transition-delay: .61s; }
.gpl-sm-tail-list:hover a:not(:hover) { opacity: .35; }
.gpl-sm-tail-list a:hover { color: var(--ac); }

.gpl-sm-scrim {
    position: absolute; inset: 0; z-index: 4;
    background: rgba(11, 18, 32, .34); opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
}
.gpl-sm.is-open .gpl-sm-scrim { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------
   Section furniture
   --------------------------------------------------------------------- */
.gpl-section { position: relative; padding-block: clamp(64px, 7vw, 104px); }
.gpl-section-alt { background: var(--surface); border-block: 1px solid var(--line); }
/* Kept for the standalone tab routes (/pricing style deep links). */
.gpl-section-top { padding-top: clamp(44px, 6vw, 72px); }

.gpl-seclabel {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ac-dark);
    margin-bottom: 12px;
}
.gpl-secnum { color: var(--tx3); font-variant-numeric: tabular-nums; }
.gpl-secrule { flex: 1; height: 1px; background: var(--line); max-width: 120px; }

.gpl-sechead { max-width: 680px; margin-bottom: 44px; }
.gpl-sectitle { font-size: clamp(27px, 2.2vw + 14px, 37px); }
.gpl-accent { color: var(--ac-dark); }
.gpl-seclede { margin-top: 12px; font-size: 17px; color: var(--tx2); max-width: 62ch; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.gpl-hero {
    position: relative; overflow: hidden;
    padding-top: clamp(56px, 6vw, 84px);
    padding-bottom: clamp(64px, 7vw, 96px);
}
.gpl-hero-inner {
    position: relative; z-index: 1;
    display: grid; gap: clamp(40px, 5vw, 68px);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
}
.gpl-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.gpl-h1 { font-size: clamp(36px, 3.1vw + 20px, 56px); letter-spacing: -.032em; }
.gpl-hero-lede { font-size: 17.5px; color: var(--tx2); max-width: 54ch; }
.gpl-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.gpl-hero-note { font-size: 13.5px; color: var(--tx3); display: flex; align-items: center; gap: 7px; }
.gpl-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 3px var(--ok-wash); flex: none;
}

/* HERO FOCAL: the rotation ticker
   The one thing only true of GPass is that a campaign is not sent by an
   account, it is sent by a pool taking turns. So the hero shows the pool
   working rather than a screenshot of a dashboard. */
.gpl-rot {
    position: relative; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--lift-float);
    overflow: hidden;
}
.gpl-rot-bar { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.gpl-rot-title { font-size: 13.5px; font-weight: 600; }
.gpl-rot-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tx3);
}
.gpl-rot-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); }

.gpl-rot-list { padding: 6px; display: flex; flex-direction: column; }
.gpl-sender {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 9px;
    transition: background-color .35s ease;
}
.gpl-sender.is-on { background: var(--ac-wash); }
.gpl-sender-i { font-family: var(--font-mono); font-size: 11.5px; color: var(--tx3); }
.gpl-sender.is-on .gpl-sender-i { color: var(--ac-dark); }
.gpl-sender-addr { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpl-sender-meta { display: flex; align-items: center; gap: 10px; }
.gpl-sender-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--tx2); font-variant-numeric: tabular-nums; }
.gpl-sender-state {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tx3); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
    background: var(--paper); min-width: 74px; text-align: center;
}
.gpl-sender.is-on .gpl-sender-state { color: #fff; background: var(--ac); border-color: var(--ac); }

.gpl-rot-foot {
    display: flex; align-items: baseline; gap: 10px;
    padding: 14px 16px; border-top: 1px solid var(--line); background: var(--paper);
}
.gpl-rot-num { font-family: var(--font-mono); font-size: 21px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gpl-rot-lbl { font-size: 13px; color: var(--tx3); }
.gpl-rot-rate { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--signal); background: var(--signal-wash); padding: 3px 9px; border-radius: 999px; }

/* ---------------------------------------------------------------------
   Tagline strip
   --------------------------------------------------------------------- */
.gpl-tags {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border-block: 1px solid var(--line);
}
.gpl-tag {
    background: var(--surface); padding: 30px clamp(20px, 3vw, 34px);
    display: flex; flex-direction: column; gap: 8px;
}
.gpl-tag-kicker {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ac-dark);
}
.gpl-tag-claim { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.gpl-tag-support { font-size: 14.5px; color: var(--tx2); }

/* ---------------------------------------------------------------------
   Features
   --------------------------------------------------------------------- */
.gpl-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gpl-fcell {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 24px; display: flex; flex-direction: column; gap: 11px;
    box-shadow: var(--lift-card);
    transition: border-color .2s ease, box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.gpl-fcell:hover {
    border-color: var(--ac-ring); transform: translateY(-2px);
    box-shadow: 0 10px 30px -14px rgba(47, 111, 235, .34);
}
.gpl-fcell-head { display: flex; align-items: center; gap: 11px; }
.gpl-fico {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: var(--ac-wash); color: var(--ac-dark); flex: none; padding: 8px;
}
.gpl-fidx { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--tx3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.gpl-ftitle { font-size: 16.5px; letter-spacing: -.015em; }
.gpl-fbody { font-size: 14.5px; color: var(--tx2); }

/* ---------------------------------------------------------------------
   Tour: an auto-advancing stepper
   Ported from the React Bits <Stepper /> to plain CSS plus a small driver
   in gp-landing.js. Two changes for a marketing page rather than a wizard:
   it drives itself 1 to 4 and loops, because nobody clicks "Continue" to
   learn what a product does; and there is no Back/Complete footer, the
   timing bar under the panel is the only affordance and doubles as the
   progress readout. Clicking a dot hands control to the reader for good.
   --------------------------------------------------------------------- */
.gpl-stepper { display: flex; flex-direction: column; gap: 26px; }
.gpl-steprail { display: flex; align-items: center; }

.gpl-stepdot {
    position: relative; flex: none; padding: 0; border: 0; background: none;
    cursor: pointer; font-family: inherit; border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
}
.gpl-stepdot-in {
    width: 34px; height: 34px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--surface); border: 1.5px solid var(--line-strong);
    color: var(--tx3); font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out),
                color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.gpl-stepdot:hover .gpl-stepdot-in { border-color: var(--ac-ring); }
.gpl-stepdot[data-state="active"] .gpl-stepdot-in {
    background: var(--ac); border-color: var(--ac); color: #fff;
    transform: scale(1.06); box-shadow: 0 0 0 5px var(--ac-wash);
}
.gpl-stepdot[data-state="done"] .gpl-stepdot-in { background: var(--ac); border-color: var(--ac); color: #fff; }

/* The three glyph states share the circle and cross-fade in place. */
.gpl-stepdot-num, .gpl-stepdot-dot, .gpl-stepdot-check {
    grid-area: 1 / 1; transition: opacity .22s ease, transform .22s var(--ease-out);
}
.gpl-stepdot-dot { width: 11px; height: 11px; border-radius: 999px; background: #fff; }
.gpl-stepdot-check { width: 16px; height: 16px; color: #fff; }
.gpl-stepdot[data-state="todo"] .gpl-stepdot-dot,
.gpl-stepdot[data-state="todo"] .gpl-stepdot-check,
.gpl-stepdot[data-state="active"] .gpl-stepdot-num,
.gpl-stepdot[data-state="active"] .gpl-stepdot-check,
.gpl-stepdot[data-state="done"] .gpl-stepdot-num,
.gpl-stepdot[data-state="done"] .gpl-stepdot-dot { opacity: 0; transform: scale(.6); }

/* The tick draws itself in rather than appearing, matching the original's
   pathLength tween. 26 covers the path's length with room to spare. */
.gpl-stepdot-check path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .34s ease-out .08s; }
.gpl-stepdot[data-state="done"] .gpl-stepdot-check path { stroke-dashoffset: 0; }

.gpl-stepline { flex: 1; height: 2px; margin-inline: 10px; border-radius: 2px; background: var(--line); overflow: hidden; }
.gpl-stepline-in { display: block; height: 100%; width: 100%; background: var(--ac); transform-origin: left center; transform: scaleX(0); transition: transform .45s var(--ease-out); }
.gpl-stepline[data-state="done"] .gpl-stepline-in { transform: scaleX(1); }

/* Panel. Height is animated on the wrapper while the panels are stacked
   absolutely, which is how the React version avoids a jump. CSS cannot ease
   from `auto`, so gp-landing.js sets the explicit height. */
.gpl-stepview { position: relative; overflow: hidden; transition: height .42s var(--ease-out); }
.gpl-steppanel {
    position: absolute; inset: 0 0 auto 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(24px, 4vw, 52px); align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity .34s ease, transform .42s var(--ease-out);
}
.gpl-steppanel[data-dir="next"] { transform: translateX(34px); }
.gpl-steppanel[data-dir="prev"] { transform: translateX(-34px); }
.gpl-steppanel.is-current { position: relative; opacity: 1; transform: none; pointer-events: auto; }

.gpl-steppanel-copy { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
.gpl-steppanel-n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ac-dark); }
.gpl-steppanel-copy h3 { font-size: clamp(21px, 1.5vw + 13px, 27px); }
.gpl-steppanel-copy p { font-size: 16px; color: var(--tx2); max-width: 48ch; }

/* Each step gets a small true-to-product vignette, so the panel shows the
   step rather than restating the heading. */
.gpl-vig {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px;
}
.gpl-vig-row { display: flex; align-items: center; gap: 10px; }
.gpl-vig-row + .gpl-vig-row { padding-top: 10px; border-top: 1px solid var(--line); }
.gpl-vig-ico {
    width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--line); color: var(--tx2); flex: none; padding: 6px;
}
.gpl-vig-k { color: var(--tx2); }
.gpl-vig-v { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--tx); font-variant-numeric: tabular-nums; }
.gpl-vig-v-ok { color: var(--ok); }
.gpl-vig-mail {
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; line-height: 1.55;
}
.gpl-vig-sub { font-weight: 600; font-size: 13.5px; }
.gpl-vig-body { font-size: 13px; color: var(--tx2); }
.gpl-mtag { font-family: var(--font-mono); font-size: 12.5px; background: var(--ac-wash); color: var(--ac-dark); padding: 1px 5px; border-radius: 4px; }

/* Timing bar. Also the pause affordance: it stops on hover and disappears
   entirely once the reader has clicked a dot. */
.gpl-steptimer { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.gpl-steptimer i { display: block; height: 100%; width: 100%; background: var(--ac-ring); transform-origin: left center; transform: scaleX(0); }
.gpl-stepper.is-running .gpl-steptimer i { animation: gpl-tick 3800ms linear forwards; }
.gpl-stepper.is-paused .gpl-steptimer i { animation-play-state: paused; }
.gpl-stepper.is-manual .gpl-steptimer { opacity: 0; }
@keyframes gpl-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------------
   Use cases
   --------------------------------------------------------------------- */
.gpl-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gpl-use {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 24px; display: flex; flex-direction: column; gap: 11px;
    box-shadow: var(--lift-card);
    transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.gpl-use:hover { border-color: var(--ac-ring); transform: translateY(-2px); box-shadow: 0 10px 30px -14px rgba(47, 111, 235, .34); }
.gpl-use-ico {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: var(--ac-wash); color: var(--ac-dark); flex: none; padding: 8px;
}
.gpl-use-title { font-size: 16.5px; }
.gpl-use-body { font-size: 14.5px; color: var(--tx2); }
.gpl-use-points { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.gpl-use-points li { font-size: 13.5px; color: var(--tx3); padding-left: 16px; position: relative; }
.gpl-use-points li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--ac-ring);
}

/* ---------------------------------------------------------------------
   Pricing
   The cycle switch and country picker mirror Billing.razor's control rail,
   so a visitor meets the same two controls in the same order after signup.
   --------------------------------------------------------------------- */
.gpl-pricebar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 28px;
    margin-bottom: 30px;
}
.gpl-pricefield { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gpl-pricelabel {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tx3);
}

.gpl-seg {
    display: flex; gap: 2px; padding: 3px; border-radius: 10px;
    background: rgba(11, 18, 32, .06); width: max-content;
}
.gpl-seg button {
    border: 0; background: transparent; cursor: pointer;
    min-height: 34px; padding: 6px 18px; border-radius: 7px;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tx2);
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gpl-seg button[aria-selected="true"] {
    background: var(--surface); color: var(--tx);
    box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(11, 18, 32, .08);
}
.gpl-seg button:active { transform: scale(.97); }
.gpl-seg-save { margin-left: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ok); letter-spacing: .04em; }

/* CURRENCY SWITCH
   Two buttons, not a country list. The price has exactly two values, so a
   249-row picker asked the visitor for information that never changed the
   answer, and leaned on 500 vendored PNGs to do it. Both flags here are
   inline SVG, so there is nothing left to 404. */
.gpl-cur button { display: inline-flex; align-items: center; gap: 8px; }
.gpl-cur-ico { flex: none; display: block; }
.gpl-seg-cur {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--tx3); letter-spacing: .04em;
}
.gpl-cur button[aria-selected="true"] .gpl-seg-cur { color: var(--tx2); }

/* plan cards */
.gpl-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.gpl-plan {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px; display: flex; flex-direction: column; gap: 18px;
    box-shadow: var(--lift-card);
}
.gpl-plan-featured { border-color: var(--ac); box-shadow: 0 20px 50px -24px rgba(47, 111, 235, .42); }
.gpl-plan-head { display: flex; flex-direction: column; gap: 6px; }
.gpl-plan-row { display: flex; align-items: center; gap: 10px; }
.gpl-plan-name { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); }
.gpl-plan-ribbon {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    background: var(--ac); color: #fff; padding: 3px 9px; border-radius: 999px; margin-left: auto;
}

/* PRICE TYPE
   The figure sits on the display sans, not the mono face. Mono read as a
   code sample rather than an amount. Lining tabular figures keep the three
   cards' digits on a shared baseline grid and stop the number reflowing by
   a pixel when the currency or cycle switches. */
.gpl-plan-price { display: flex; align-items: baseline; gap: 5px; }
.gpl-plan-cur { font-size: 20px; font-weight: 600; color: var(--tx2); align-self: flex-start; margin-top: .32em; }
.gpl-plan-amt {
    font-family: var(--font);
    font-size: clamp(31px, 2.1vw + 18px, 39px);
    font-weight: 700; letter-spacing: -.035em; line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}
.gpl-plan-cad { font-size: 14px; color: var(--tx3); }
.gpl-plan-save { font-size: 12.5px; color: var(--ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.gpl-plan-senders { font-size: 14px; color: var(--tx2); }
.gpl-plan-senders b { font-variant-numeric: tabular-nums; color: var(--tx); font-weight: 700; }
.gpl-plan-features { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--tx2); flex: 1; }
.gpl-plan-features li { display: flex; gap: 9px; align-items: flex-start; }
.gpl-check { flex: none; width: 13px; height: 13px; margin-top: 3px; color: var(--ac); }
.gpl-plan-cta { width: 100%; }
.gpl-plan-note { margin-top: 26px; font-size: 14px; color: var(--tx3); }
.gpl-plan-note a { color: var(--ac-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------
   Blog
   --------------------------------------------------------------------- */
.gpl-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gpl-post {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 24px; display: flex; flex-direction: column; gap: 11px;
    box-shadow: var(--lift-card);
    transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.gpl-post:hover { border-color: var(--ac-ring); transform: translateY(-2px); box-shadow: 0 10px 30px -14px rgba(47, 111, 235, .34); }
.gpl-post-ico {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    background: var(--ac-wash); color: var(--ac-dark); flex: none; padding: 8px;
}
.gpl-post-title { font-size: 16.5px; }
.gpl-post-excerpt { font-size: 14.5px; color: var(--tx2); flex: 1; }
.gpl-post-link { font-size: 14px; font-weight: 600; color: var(--ac-dark); display: inline-flex; align-items: center; gap: 6px; }
.gpl-post-arrow { transition: transform .2s var(--ease-out); }
.gpl-post:hover .gpl-post-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   FAQ, native <details>
   --------------------------------------------------------------------- */
.gpl-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; max-width: 980px; }
.gpl-faq-item { border-bottom: 1px solid var(--line); }
.gpl-faq-q {
    list-style: none; cursor: pointer; padding: 17px 0; font-size: 15.5px; font-weight: 600;
    display: flex; align-items: center; gap: 14px;
    transition: color .18s var(--ease-out);
}
.gpl-faq-q::-webkit-details-marker { display: none; }
.gpl-faq-q:hover { color: var(--ac-dark); }
.gpl-faq-sign {
    margin-left: auto; flex: none; width: 9px; height: 9px;
    border-right: 1.6px solid var(--tx3); border-bottom: 1.6px solid var(--tx3);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s var(--ease-out);
}
.gpl-faq-item[open] .gpl-faq-sign { transform: rotate(-135deg) translate(-3px, -3px); }
.gpl-faq-item[open] .gpl-faq-q { color: var(--ac-dark); }
.gpl-faq-a p { padding-bottom: 18px; font-size: 14.5px; color: var(--tx2); max-width: 58ch; }
.gpl-faq-item[open] .gpl-faq-a { animation: gpl-faq-in .22s var(--ease-out) both; }
@keyframes gpl-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------
   Closing CTA, a close, not a second hero
   --------------------------------------------------------------------- */
.gpl-endcta { position: relative; overflow: hidden; text-align: center; padding-block: clamp(72px, 8vw, 116px); }
.gpl-endcta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.gpl-endcta-title { font-size: clamp(29px, 2.6vw + 15px, 42px); letter-spacing: -.028em; }
.gpl-endcta-body { font-size: 17px; color: var(--tx2); max-width: 50ch; }
.gpl-endcta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.gpl-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 34px; }
.gpl-footer-inner { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.gpl-footer-links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; font-size: 14px; }
.gpl-flink {
    background: none; border: 0; padding: 0; font-family: inherit; font-size: 14px;
    color: var(--tx2); cursor: pointer; transition: color .18s var(--ease-out);
}
.gpl-flink:hover { color: var(--tx); }
.gpl-footer-legal { font-size: 13.5px; color: var(--tx3); }

/* ---------------------------------------------------------------------
   Motion
   The reveal is now a plain IntersectionObserver in gp-landing.js rather
   than GSAP ScrollTrigger, so the resting state is a normal class and
   nothing is left invisible if the script never loads.
   --------------------------------------------------------------------- */
.gpl-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.gpl-reveal.is-in { opacity: 1; transform: none; }
/* If JS never runs, show everything rather than leaving a blank page. */
.gpl-page:not(.gpl-motion-ready) .gpl-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
    .gpl-rot-pulse { animation: gpl-pulse 1.6s ease-in-out infinite; }
    .gpl-hero-copy > *, .gpl-rot { opacity: 0; animation: gpl-rise .7s var(--ease-out) forwards; }
    .gpl-hero-copy > *:nth-child(1) { animation-delay: .05s; }
    .gpl-hero-copy > *:nth-child(2) { animation-delay: .13s; }
    .gpl-hero-copy > *:nth-child(3) { animation-delay: .21s; }
    .gpl-hero-copy > *:nth-child(4) { animation-delay: .29s; }
    .gpl-rot { animation-delay: .24s; }
}
@keyframes gpl-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
@keyframes gpl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Responsive pass
   Remember the audience runs 150% Windows scaling, so these breakpoints
   hit at smaller effective widths than the raw numbers suggest.
   ===================================================================== */

@media (max-width: 1024px) {
    .gpl-sechead { margin-bottom: 34px; }
    .gpl-features, .gpl-uses, .gpl-posts { grid-template-columns: repeat(2, 1fr); }
    .gpl-plans { gap: 16px; }
}

@media (max-width: 940px) {
    .gpl-hero-inner { grid-template-columns: 1fr; }
    .gpl-plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .gpl-plan-featured { order: -1; }   /* lead with the recommended plan */
}

@media (max-width: 860px) {
    .gpl-tags { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .gpl-steppanel { grid-template-columns: 1fr; gap: 24px; }
    .gpl-faq { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .gpl-sm-prelayers, .gpl-sm-panel { width: 100%; }
    .gpl-sm-panel { border-left: 0; }
    .gpl-sm-headercta { display: none; }
}

@media (max-width: 640px) {
    .gpl-features, .gpl-uses, .gpl-posts { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .gpl-page { padding-top: 58px; }
    .gpl-sm-bar { height: 58px; }

    .gpl-section { padding-block: 52px; }
    .gpl-sechead { margin-bottom: 28px; }
    .gpl-hero { padding-top: 40px; padding-bottom: 52px; }

    /* Full-width actions read as tap targets rather than as inline links. */
    .gpl-hero-cta, .gpl-endcta-actions { flex-direction: column; align-items: stretch; width: 100%; }
    .gpl-hero-cta .gpl-btn, .gpl-endcta-actions .gpl-btn { width: 100%; }
    .gpl-hero-lede { font-size: 16.5px; }

    /* The rotation card is the densest thing on the page, so it gets the
       most trimming: tighter rows, and a footer that wraps instead of
       squeezing the count against the inbox rate. */
    .gpl-sender { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 9px; padding: 10px 8px; }
    .gpl-sender-addr { font-size: 13px; }
    .gpl-sender-state { min-width: 62px; font-size: 9.5px; padding: 2px 6px; }
    .gpl-sender-count { font-size: 11.5px; }
    .gpl-rot-foot { flex-wrap: wrap; row-gap: 8px; }
    .gpl-rot-rate { margin-left: 0; }
    .gpl-rot-lbl { font-size: 12.5px; }

    .gpl-fcell, .gpl-use, .gpl-post { padding: 20px; }
    .gpl-plan { padding: 22px; }
    .gpl-vig { padding: 13px; }

    .gpl-stepper { gap: 20px; }
    .gpl-stepdot-in { width: 30px; height: 30px; font-size: 12px; }
    .gpl-stepline { margin-inline: 7px; }

    .gpl-pricebar { gap: 16px; }
    .gpl-pricefield { width: 100%; }
    .gpl-seg { width: 100%; }
    .gpl-seg button { flex: 1; justify-content: center; }
    /* Narrow phones: the currency code is the first thing to go, the flag
       and the word carry the meaning on their own. */
    .gpl-cur button { padding-inline: 10px; }
    .gpl-seg-cur { display: none; }

    .gpl-faq-q { font-size: 15px; }
    .gpl-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .gpl-footer-links { margin-left: 0; gap: 16px; }
}

/* Narrow phones. Stop the sender rows collapsing into ellipsis soup. */
@media (max-width: 380px) {
    .gpl-sender-state { display: none; }
    .gpl-sender.is-on .gpl-sender-i { font-weight: 700; }
    .gpl-rot-num { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
    .gpl-page *,
    .gpl-page *::before,
    .gpl-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    /* Never leave content hidden waiting for an animation that will not run. */
    .gpl-reveal { opacity: 1; transform: none; }
    .gpl-hero-copy > *, .gpl-rot { opacity: 1; animation: none; }
    .gpl-sm-itemlabel { transform: none; }
    .gpl-sm-num, .gpl-sm-tail-title, .gpl-sm-tail-list a { opacity: 1; transform: none; }
}