/* ============================================================================
   Landing-page sections: hero, trust strip, stats, feature grid, process steps,
   destination mosaic and the closing call to action.

   Shared by the homepage and every product landing page, which is why the hero
   takes its image from a CSS variable set inline per page rather than having a
   class per product.
   ========================================================================== */

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

.pt-hero {
    position: relative;
    /* Pulled up under the transparent header rather than sitting below it, so
       the photograph runs to the very top of the page. */
    margin-top: calc(-1 * var(--pt-header-h) - 38px);
    padding-top: calc(var(--pt-header-h) + 38px);
    min-height: clamp(520px, 74vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--pt-ink-800);
}

.pt-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.pt-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A very slow drift gives the hero life without the jarring feel of a
       Ken Burns pan. Disabled wholesale by the reduced-motion block. */
    animation: pt-hero-drift 28s ease-in-out infinite alternate;
}

@keyframes pt-hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

/* Two scrims, not one: a vertical gradient anchors the headline against the
   bottom of the frame, and a left-weighted one keeps the copy legible when the
   photograph happens to be bright on that side. */
.pt-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(4, 25, 26, .90) 0%, rgba(4, 25, 26, .62) 42%, rgba(4, 25, 26, .28) 72%, rgba(4, 25, 26, .45) 100%),
        linear-gradient(180deg, rgba(4, 25, 26, .55) 0%, transparent 32%, rgba(4, 25, 26, .55) 100%);
}

/* A soft chartreuse bloom behind the copy — the one place the accent gets any
   real area, and only at 12% opacity. */
.pt-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 18%;
    left: -6%;
    width: 46vw;
    height: 46vw;
    max-width: 620px;
    max-height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 214, 62, .14), transparent 68%);
    pointer-events: none;
}

.pt-hero__inner {
    position: relative;
    width: 100%;
    /* Less on top than underneath: the hero already clears the header via
       .pt-hero's padding-top, so a symmetrical block here stacked two lots of
       space between the nav and the headline and left the band looking empty. */
    padding-block: clamp(1rem, 2.5vw, 2rem) clamp(3rem, 7vw, 5.5rem);
}

/* ----------------------------------------------------- split home hero --- */
/* The homepage hero is deliberately not the same component as the other six
   landing-page heroes: those carry a search card that overlaps the bottom
   edge by a tuned negative margin (see --hero-card-overlap), so reshaping
   .pt-hero itself would misalign six other pages. The homepage has no search
   card, so it gets its own composition — a solid ink gradient instead of a
   bled photograph, and a tilted photo collage instead of a single frame —
   which is also the single biggest lever for making the homepage stop
   reading as "the same template, different colour." */
.pt-hero--split {
    background: radial-gradient(120% 140% at 8% 0%, var(--pt-ink-600) 0%, var(--pt-ink-800) 46%, var(--pt-ink-900) 100%);
}

.pt-hero--split::before {
    top: 8%;
    left: auto;
    right: -10%;
    background: radial-gradient(circle, rgba(243, 144, 43, .16), transparent 68%);
}

.pt-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
}

@media (min-width: 960px) {
    .pt-hero-grid { grid-template-columns: minmax(360px, 1fr) minmax(340px, 46%); }
}

/* Curved seam instead of a hard rectangular edge where the dark hero meets
   the next (paper) section — a small detail, but a flat line there is the
   single most "default template" tell on a full-bleed dark hero. */
/* The divider is a sibling of the hero, not a child, so the transparent half of
   its wave shows the page background rather than the hero above it — which left
   the curve invisible and the seam looking like a straight cut. Painting it in
   the hero's closing colour restores the shape: dark above the wave, the next
   section's colour below it. */
/* Painted in the NEXT section's colour, with the wave drawn as the dark shape
   on top of it — the inverse of the obvious arrangement, and deliberately so.
   With a dark background and the light wave filled to the box's bottom edge,
   the last row of pixels antialiases against that dark backing and leaves a
   hairline across the full width. Inverting means any such row is already the
   light colour and simply disappears into the band below. */
.pt-hero-divider { position: relative; line-height: 0; margin-top: -2px; background: var(--pt-blue-050); }
.pt-hero-divider svg { display: block; width: 100%; height: clamp(36px, 6vw, 72px); }

.pt-hero__copy { max-width: 42rem; color: #fff; }

.pt-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .95rem .4rem .5rem;
    margin-bottom: 1.15rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--pt-radius-pill);
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: var(--pt-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pt-hero__eyebrow svg { width: 15px; height: 15px; color: var(--pt-lime-500); }

/* Cross-fade target for hero-tagline.js. Plain opacity swap, not a stacked
   layout, so there's no reserved-width guess for text of varying length. */
.pt-hero__eyebrow [data-tagline-rotator] { transition: opacity .32s var(--pt-ease); }

.pt-hero h1 {
    color: #fff;
    margin-bottom: 1rem;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(4, 25, 26, .35);
}

/* h1 is already the serif display face (see theme.css); the emphasized word
   flips to italic in the accent orange so it still reads as a deliberate
   accent against the upright serif around it, not just more heading. */
.pt-hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--pt-lime-500);
    letter-spacing: -0.01em;
}

.pt-hero__lede {
    font-size: clamp(1rem, .5vw + .95rem, 1.2rem);
    color: rgba(255, 255, 255, .84);
    max-width: 34rem;
    margin-bottom: 1.75rem;
    text-wrap: pretty;
}

.pt-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -- trust strip under the hero copy -------------------------------------- */

.pt-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.pt-hero__trust-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: rgba(255, 255, 255, .82);
    font-size: var(--pt-text-sm);
}

.pt-hero__trust-item svg { width: 18px; height: 18px; color: var(--pt-lime-500); flex: none; }
.pt-hero__trust-item strong { display: block; color: #fff; font-family: var(--pt-font-display); font-size: var(--pt-text-base); }

/* -- compact hero for interior landing pages ------------------------------ */

.pt-hero--compact { min-height: clamp(400px, 54vh, 540px); }
.pt-hero--compact .pt-hero__copy { max-width: 46rem; }

/* The product landing pages float a search card up over the bottom of the hero
   (see .flight-search-card / .pt-searchcard, both of which use a negative top
   margin). On the taller homepage hero there is room to spare; on the compact
   one the card landed straight on top of the trust strip, hiding the figures and
   clipping the last line of the lede. This reserves the space the card takes. */
.pt-hero--compact .pt-hero__inner { padding-bottom: clamp(5rem, 8vw, 7rem); }

/* --------------------------------------------------------- search card --- */

/* Floats over the seam between the hero and the next section. */
.pt-searchcard {
    position: relative;
    z-index: 5;
    margin-top: clamp(-4rem, -5vw, -3rem);
    margin-bottom: var(--pt-gap-xl);
    padding: clamp(1.1rem, 2vw, 1.6rem);
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--pt-radius-xl);
    box-shadow: var(--pt-shadow-xl);
}

.pt-searchcard__tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: var(--pt-gap);
    overflow-x: auto;
    scrollbar-width: none;
}

.pt-searchcard__tabs::-webkit-scrollbar { display: none; }

.pt-searchcard__tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border: 0;
    border-radius: var(--pt-radius-pill);
    background: transparent;
    color: var(--pt-slate-600);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s var(--pt-ease), color .2s var(--pt-ease);
}

.pt-searchcard__tab svg { width: 16px; height: 16px; }
.pt-searchcard__tab:hover { background: var(--pt-blue-050); color: var(--pt-blue-700); }

.pt-searchcard__tab.is-active {
    background: var(--pt-ink-800);
    color: #fff;
}

.pt-searchform {
    display: grid;
    gap: .6rem;
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .pt-searchform {
        grid-template-columns: 1.6fr 1fr 1fr 1.1fr auto;
        align-items: end;
    }
}

.pt-searchfield {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .85rem;
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    background: var(--pt-paper);
    transition: border-color .2s var(--pt-ease), box-shadow .2s var(--pt-ease);
    min-height: 62px;
    justify-content: center;
}

.pt-searchfield:focus-within { border-color: var(--pt-blue-500); box-shadow: var(--pt-ring); }

.pt-searchfield__label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-xs);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pt-searchfield__label svg { width: 13px; height: 13px; color: var(--pt-blue-600); }

.pt-searchfield input,
.pt-searchfield select,
.pt-searchfield button.pt-searchfield__value {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    color: var(--pt-heading);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-md);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.pt-searchfield input { cursor: text; }
.pt-searchfield input:focus,
.pt-searchfield select:focus { outline: none; }
.pt-searchfield input::placeholder { color: var(--pt-slate-400); font-weight: 500; }

/* Stacked on a phone, the submit is the last row and should read as the end of
   the form rather than a button floating at half width. */
.pt-searchform__submit { align-self: stretch; }
.pt-searchform__submit .pt-btn { width: 100%; }

@media (min-width: 720px) {
    .pt-searchform__submit .pt-btn { width: auto; }
}

.pt-searchform__submit .pt-btn {
    height: 100%;
    min-height: 62px;
    padding-inline: 1.75rem;
    border-radius: var(--pt-radius);
}

/* -- typeahead ------------------------------------------------------------ */

.pt-typeahead {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    z-index: 40;
    max-height: 340px;
    overflow-y: auto;
    padding: .35rem;
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-xl);
    display: none;
}

.pt-typeahead.is-open { display: block; }

.pt-typeahead__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .55rem .6rem;
    border: 0;
    border-radius: var(--pt-radius-sm);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--pt-ease);
}

.pt-typeahead__item:hover,
.pt-typeahead__item.is-active { background: var(--pt-blue-050); }

.pt-typeahead__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--pt-sand-deep);
    color: var(--pt-blue-600);
}

.pt-typeahead__icon svg { width: 15px; height: 15px; }

.pt-typeahead__text { min-width: 0; }
.pt-typeahead__text strong { display: block; font-size: var(--pt-text-base); color: var(--pt-heading); font-weight: 600; }
.pt-typeahead__text small { display: block; font-size: var(--pt-text-xs); color: var(--pt-text-faint); }
.pt-typeahead__count { margin-left: auto; font-size: var(--pt-text-xs); color: var(--pt-text-faint); flex: none; }
.pt-typeahead__empty { padding: 1rem; text-align: center; color: var(--pt-text-faint); font-size: var(--pt-text-sm); }

/* -- guest stepper popover ------------------------------------------------ */

.pt-guests { position: relative; }

.pt-guests__panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 40;
    width: min(300px, 88vw);
    padding: .85rem;
    background: var(--pt-paper);
    border: 1px solid var(--pt-line);
    border-radius: var(--pt-radius);
    box-shadow: var(--pt-shadow-xl);
    display: none;
}

.pt-guests__panel.is-open { display: block; }

.pt-guests__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
}

.pt-guests__row + .pt-guests__row { border-top: 1px solid var(--pt-line-soft); }
.pt-guests__row strong { display: block; font-size: var(--pt-text-base); color: var(--pt-heading); }
.pt-guests__row small { color: var(--pt-text-faint); font-size: var(--pt-text-xs); }

.pt-stepper { display: flex; align-items: center; gap: .5rem; }

.pt-stepper button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pt-line);
    border-radius: 50%;
    background: var(--pt-paper);
    color: var(--pt-blue-600);
    cursor: pointer;
    transition: border-color .18s var(--pt-ease), background .18s var(--pt-ease);
}

.pt-stepper button:hover:not(:disabled) { border-color: var(--pt-blue-500); background: var(--pt-blue-050); }
.pt-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.pt-stepper button svg { width: 14px; height: 14px; }
.pt-stepper output { min-width: 1.5rem; text-align: center; font-family: var(--pt-font-display); font-weight: 700; }

/* --------------------------------------------------------------- stats --- */

.pt-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pt-gap-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(135deg, var(--pt-ink-800), var(--pt-ink-600));
    color: #fff;
    box-shadow: var(--pt-shadow-lg);
    position: relative;
    overflow: hidden;
}

/* Faint chartreuse rule along the top edge — the same accent motif as the
   eyebrow, applied at architecture scale. */
.pt-stats::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--pt-lime-500), var(--pt-blue-500) 55%, transparent);
}

.pt-stat { text-align: center; }

.pt-stat__value {
    display: block;
    font-family: var(--pt-font-display);
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
}

.pt-stat__label {
    display: block;
    margin-top: .35rem;
    font-size: var(--pt-text-sm);
    color: rgba(255, 255, 255, .66);
}

/* ------------------------------------------------------------ features --- */

.pt-features { display: grid; gap: var(--pt-gap-lg); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.pt-feature {
    position: relative;
    padding: var(--pt-gap-lg);
    background: var(--pt-paper);
    border: 1px solid var(--pt-line-soft);
    border-radius: var(--pt-radius-lg);
    transition: transform .3s var(--pt-ease-out), box-shadow .3s var(--pt-ease-out), border-color .3s var(--pt-ease);
    overflow: hidden;
}

.pt-feature::after {
    content: "";
    position: absolute;
    left: var(--pt-gap-lg);
    bottom: 0;
    width: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--pt-lime-500), var(--pt-blue-500));
    transition: width .4s var(--pt-ease-out);
}

.pt-feature:hover {
    transform: translateY(-5px);
    border-color: var(--pt-blue-200);
    box-shadow: var(--pt-shadow-lg);
}

.pt-feature:hover::after { width: 44px; }

.pt-feature__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--pt-gap);
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pt-blue-100), var(--pt-lime-100));
    color: var(--pt-blue-700);
}

.pt-feature__icon svg { width: 22px; height: 22px; }

.pt-feature h3 { font-size: var(--pt-text-lg); margin-bottom: .3rem; }
.pt-feature p { margin: 0; color: var(--pt-text-muted); font-size: var(--pt-text-base); }

/* ------------------------------------------------------------- getaway --- */
/* "Plan Your Perfect Getaway": an asymmetric split — a full-height photo on
   one side, the pitch and a three-point checklist on the other — rather than
   the plain icon grid .pt-features already covers elsewhere on the homepage,
   so the two sections read as distinct rather than repeating the same layout
   twice on one page. */

.pt-getaway__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pt-gap-xl);
    align-items: center;
}

@media (min-width: 900px) {
    .pt-getaway__inner { grid-template-columns: minmax(320px, 42%) 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
}

.pt-getaway__media {
    position: relative;
    border-radius: 40px 14px 40px 14px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--pt-shadow-lg);
}

.pt-getaway__media img { width: 100%; height: 100%; object-fit: cover; }

.pt-getaway__points {
    display: flex;
    flex-direction: column;
    gap: var(--pt-gap-lg);
    list-style: none;
    margin: 0 0 var(--pt-gap-xl);
    padding: 0;
}

.pt-getaway__points li { display: flex; align-items: flex-start; gap: var(--pt-gap); }

.pt-getaway__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pt-blue-100), var(--pt-lime-100));
    color: var(--pt-blue-700);
}

.pt-getaway__icon svg { width: 20px; height: 20px; }

.pt-getaway__points strong {
    display: block;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-lg);
    color: var(--pt-heading);
    margin-bottom: .2rem;
}

.pt-getaway__points small {
    display: block;
    font-size: var(--pt-text-base);
    color: var(--pt-text-muted);
    line-height: 1.6;
}

/* --------------------------------------------------------------- steps --- */

.pt-steps {
    display: grid;
    gap: var(--pt-gap-xl);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    counter-reset: pt-step;
    position: relative;
}

.pt-step { position: relative; counter-increment: pt-step; padding-top: .5rem; }

.pt-step__num {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--pt-gap);
    border-radius: 50%;
    border: 1px dashed var(--pt-blue-200);
    background: var(--pt-paper);
    font-family: var(--pt-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pt-blue-600);
}

.pt-step__num::before { content: "0" counter(pt-step); }

.pt-step h3 { font-size: var(--pt-text-lg); }
.pt-step p { color: var(--pt-text-muted); margin: 0; }

/* Connecting dashes between the steps, desktop only — on a stacked mobile
   layout a horizontal rule would point nowhere. */
@media (min-width: 860px) {
    .pt-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 26px;
        left: 64px;
        right: -1.5rem;
        border-top: 1px dashed var(--pt-line);
    }
}

/* ------------------------------------------------------------- mosaic ---- */

/* Destination grid where the first tile is double-height — breaks the
   monotony of an even grid without needing bespoke markup per page. */
.pt-mosaic {
    display: grid;
    gap: var(--pt-gap);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 780px) {
    /* dense packing so a set of three or five tiles closes its own gaps rather
       than leaving holes where the sixth would have gone. */
    .pt-mosaic {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 230px;
        grid-auto-flow: dense;
    }

    /* The feature tile only earns its double square when there are enough
       tiles to build a block around it. */
    .pt-mosaic > :first-child:nth-last-child(n+4) { grid-column: span 2; grid-row: span 2; }
    .pt-mosaic > :nth-child(6):nth-last-child(1) { grid-column: span 2; }
}

.pt-tile {
    position: relative;
    display: block;
    min-height: 230px;
    /* Same asymmetric-corner signature as .pt-card (theme.css) — every photo
       surface on the site cuts the same two corners, so the shape itself
       reads as brand rather than "rounded-rectangle, like everything else." */
    border-radius: 30px 10px 30px 10px;
    overflow: hidden;
    background: var(--pt-ink-700);
    isolation: isolate;
}

.pt-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform .8s var(--pt-ease-out);
}

.pt-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 25, 26, .1) 30%, rgba(4, 25, 26, .82));
    transition: background .4s var(--pt-ease);
}

.pt-tile:hover img { transform: scale(1.08); }
.pt-tile:hover::after { background: linear-gradient(180deg, rgba(11, 74, 72, .25) 20%, rgba(4, 25, 26, .88)); }

.pt-tile__body {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: var(--pt-gap);
    color: #fff;
}

.pt-tile__body h3 { color: #fff; font-size: var(--pt-text-lg); margin: 0 0 .15rem; }
.pt-tile__body p { margin: 0; font-size: var(--pt-text-sm); color: rgba(255, 255, 255, .78); }

.pt-tile__go {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-sm);
    font-weight: 600;
    color: var(--pt-lime-500);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--pt-ease), transform .3s var(--pt-ease-out);
}

.pt-tile__go svg { width: 15px; height: 15px; }
.pt-tile:hover .pt-tile__go { opacity: 1; transform: none; }

/* ------------------------------------------------------------ cta band --- */

.pt-cta {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    border-radius: var(--pt-radius-xl);
    background: linear-gradient(120deg, var(--pt-ink-900), var(--pt-blue-800) 65%, var(--pt-blue-700));
    color: #fff;
    overflow: hidden;
    text-align: center;
}

/* Concentric rings, drawn in CSS rather than shipped as an image. */
.pt-cta::before,
.pt-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .1);
    pointer-events: none;
}

.pt-cta::before { width: 420px; height: 420px; top: -180px; right: -120px; }
.pt-cta::after { width: 300px; height: 300px; bottom: -160px; left: -80px; border-color: rgba(196, 214, 62, .2); }

.pt-cta__inner { position: relative; z-index: 1; max-width: 42rem; margin-inline: auto; }
.pt-cta h2 { color: #fff; }
.pt-cta h2 em { font-family: var(--pt-font-accent); font-style: italic; font-weight: 400; color: var(--pt-lime-500); }
.pt-cta p { color: rgba(255, 255, 255, .78); font-size: var(--pt-text-lg); margin-bottom: var(--pt-gap-lg); }

.pt-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    .pt-hero__media img { animation: none; }
}