/* ---------------------------------------------------------------------------
   HOME — /en/ and /es/, loaded on top of style.css

   Reads Layer 2 only, like every rule in style.css. The page makes one
   argument, in order: the evidence, the tools for the method, the tools for
   the day, what it connects to, centres, privacy, the blog, the questions and
   the close. See DESIGN.md, "The home page", for the motion rules.

   Motion comes in two kinds and nothing else:
   - Scroll-linked. The hero frame settling, the reading paragraph lighting up,
     the showcase progress line, the integration line, the image reveals. They
     have no duration: the reader's scroll is the clock, so they stop when the
     reader stops. Behind @supports (animation-timeline) and reduced motion.
   - Entering. Headline words, the evidence cards, the bento cells and a few
     rows fade and rise 16px once, in 400ms at most, staggered 60ms. Hidden
     only while html.motion is set, which the page head withdraws if home.js
     never runs.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- basics */

.page-home main {
    overflow-x: clip;
}

/* ------------------------------------------------------- entering motion */

.motion [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-enter) var(--ease-out);
    transition-delay: calc(var(--d, 0) * 60ms);
}

.motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

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

.home-hero {
    position: relative;
    isolation: isolate;
    padding-top: clamp(6.5rem, 9vw, 8.5rem);
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
    background: var(--surface-base);
}

/* The spectrum as light rather than as paint: three soft pools behind the
   headline that drift a little toward the pointer. Gradients, not blur
   filters, so nothing repaints while the page scrolls. */
.aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

.aurora span {
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1;
}

.home-hero .aurora-a {
    width: min(62rem, 90vw);
    top: -28rem;
    left: -18rem;
    background: radial-gradient(closest-side, var(--glow-indigo-soft), transparent);
}

.home-hero .aurora-b {
    width: min(52rem, 80vw);
    top: -18rem;
    right: -16rem;
    background: radial-gradient(closest-side, var(--glow-pink-soft), transparent);
}

.home-hero .aurora-c {
    width: min(48rem, 80vw);
    top: 22rem;
    left: 30%;
    background: radial-gradient(closest-side, var(--glow-teal-soft), transparent);
}

.hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.75rem 4rem;
    align-items: end;
}

.hero-copy .hero-announce {
    grid-column: 1 / -1;
    justify-self: start;
    margin-bottom: 0;
}

.home-hero h1 {
    grid-column: 1 / -1;
    max-width: 17ch;
    margin: 0;
    font-size: clamp(2.6rem, 5.2vw + 0.6rem, 5.4rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--content-primary);
    text-wrap: balance;
}

.hero-lede {
    margin: 0;
    max-width: 38rem;
    font-size: clamp(1.05rem, 0.45vw + 0.95rem, 1.25rem);
    line-height: 1.6;
    color: var(--content-secondary);
    text-wrap: pretty;
}

.hero-side .cta-pair {
    justify-content: flex-start;
}

.hero-side .cta-reassurance.is-offer {
    margin-top: 1.25rem;
}

/* Headline words rise out of their own line box. The gradient word moves as
   one piece, because a transformed child inside background-clip: text does
   not reliably keep the gradient. */
.hw {
    display: inline-block;
    overflow: clip;
    vertical-align: top;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.hw > * {
    display: inline-block;
}

.motion .hw > * {
    transform: translateY(108%);
    transition: transform var(--duration-enter) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 45ms);
}

.motion.hero-in .hw > * {
    transform: none;
}

.motion .hero-rise {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-enter) var(--ease-out);
    transition-delay: calc(240ms + var(--d, 0) * 70ms);
}

.motion.hero-in .hero-rise {
    opacity: 1;
    transform: none;
}

/* The stage: the product, lying back a little, that stands up as the page
   starts to scroll. */
.hero-stage {
    position: relative;
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
    perspective: 1600px;
}

.stage-frame {
    position: relative;
    margin: 0;
    padding: 0.6rem;
    border-radius: calc(var(--radius-3xl) + 0.6rem);
    background: var(--glass-fill);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-modal), 0 40px 120px -40px var(--glow-indigo-shadow);
    /* Hinged on its top edge, so the frame starts where the layout puts it
       and only its lower edge leans away. */
    transform-origin: 50% 0;
}

.stage-frame video,
.stage-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1216 / 720;
    object-fit: cover;
    border-radius: var(--radius-3xl);
    background: var(--surface-sunken);
}

.stage-toggle {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--glass-chrome-border);
    border-radius: 9999px;
    background: var(--surface-inverse);
    color: var(--content-on-inverse);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-base) var(--ease-standard);
}

.stage-toggle:hover {
    background: var(--accent-hover);
}

.stage-toggle:active {
    transform: scale(0.94);
}

.stage-toggle svg {
    width: 18px;
    height: 18px;
}

.stage-toggle .icon-play {
    display: none;
}

.stage-toggle[aria-pressed="true"] .icon-play {
    display: block;
}

.stage-toggle[aria-pressed="true"] .icon-pause {
    display: none;
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
        .stage-frame {
            animation: stage-settle linear both;
            animation-timeline: scroll(root);
            animation-range: 0 70vh;
        }
    }
}

@keyframes stage-settle {
    from {
        transform: rotateX(14deg) scale(0.95);
    }

    to {
        transform: none;
    }
}

@media (max-width: 900px) {
    .hero-copy {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 640px) {
    .stage-frame {
        padding: 0.35rem;
        border-radius: calc(var(--radius-xl) + 0.35rem);
    }

    .stage-frame video,
    .stage-frame img {
        border-radius: var(--radius-xl);
    }

    .stage-toggle {
        right: 0.85rem;
        bottom: 0.85rem;
    }
}

/* -------------------------------------------------------------- evidence */

.ev-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    max-width: 1200px;
}

.ev-intro .hs-title {
    max-width: 22ch;
}

/* The argument, read at the pace of the scroll: words start faint and come
   up to full ink as the paragraph crosses the screen. Without scroll-linked
   animation support it is simply there at full ink. */
.scrub {
    max-width: 58rem;
    font-size: clamp(1.35rem, 1.6vw + 0.85rem, 2.2rem);
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.015em;
    color: var(--content-primary);
    text-wrap: pretty;
    view-timeline-name: --scrub;
}

.ev-intro .btn {
    justify-self: start;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .sw {
            animation: word-ink linear both;
            animation-timeline: --scrub;
            animation-range:
                cover calc(12% + (var(--i) / var(--n)) * 36%)
                cover calc(16% + (var(--i) / var(--n)) * 36%);
        }
    }
}

@keyframes word-ink {
    from {
        opacity: 0.2;
    }

    to {
        opacity: 1;
    }
}

.ev-rail-wrap {
    --rail-pad: max(1.5rem, calc((100% - 1200px) / 2 + 2rem));
    margin-top: clamp(3rem, 6vw, 5rem);
}

.ev-rail-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.rail-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-raised);
    color: var(--content-primary);
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--ease-out),
        border-color var(--duration-base) var(--ease-standard),
        opacity var(--duration-base) var(--ease-standard);
}

.rail-btn svg {
    width: 20px;
    height: 20px;
}

.rail-btn:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.rail-btn:active {
    transform: scale(0.94);
}

.rail-btn:disabled {
    opacity: 0.4;
    cursor: default;
    border-color: var(--border-subtle);
    color: var(--content-tertiary);
}

.ev-rail {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin: 0;
    padding: 0.5rem var(--rail-pad) 1.75rem;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rail-pad);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.ev-rail:focus-visible {
    outline-offset: -4px;
}

.ev-card {
    flex: 0 0 min(25rem, 84vw);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: var(--radius-2xl);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-raised);
}

.ev-figure {
    font-size: clamp(2.75rem, 3vw + 1.5rem, 3.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--accent-text);
}

.ev-card h3 {
    margin-top: 0.85rem;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.ev-solution {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--content-secondary);
}

.ev-solution strong {
    color: var(--content-primary);
    font-weight: 600;
}

.ev-data {
    margin-top: 1.25rem;
    interpolate-size: allow-keywords;
}

.ev-data summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-text);
    cursor: pointer;
}

.ev-data summary::-webkit-details-marker {
    display: none;
}

.ev-data summary svg {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-base) var(--ease-out);
}

.ev-data[open] summary svg {
    transform: rotate(180deg);
}

.ev-data::details-content {
    block-size: 0;
    overflow: clip;
    transition:
        block-size var(--duration-slow) var(--ease-out),
        content-visibility var(--duration-slow) allow-discrete;
}

.ev-data[open]::details-content {
    block-size: auto;
}

.ev-data p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--content-secondary);
}

.ev-data .ev-source {
    font-size: 0.8rem;
    color: var(--content-tertiary);
}

/* -------------------------------------------------------- method showcase */

.showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.showcase-steps {
    position: relative;
    margin: 0;
    padding: 0 0 0 2rem;
    list-style: none;
}

.showcase-steps::before,
.showcase-steps::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 2px;
    background: var(--border-subtle);
}

.showcase-steps::after {
    background: var(--spectrum-gradient);
    transform-origin: 50% 0;
    transform: scaleY(0);
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .showcase-steps::after {
            animation: line-fill linear both;
            animation-timeline: view();
            animation-range: cover 25% cover 75%;
        }
    }
}

@supports not (animation-timeline: view()) {
    .showcase-steps::after {
        display: none;
    }
}

@keyframes line-fill {
    to {
        transform: scaleY(1);
    }
}

.showcase-step {
    min-height: 62vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 2rem;
}

.showcase-step:first-child {
    min-height: 52vh;
}

.showcase-step a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.showcase-step h3 {
    font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.showcase-step p {
    margin-top: 0.85rem;
    max-width: 30rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--content-secondary);
}

.showcase-step .more {
    margin-top: 1.1rem;
}

.motion .showcase-step {
    opacity: 0.38;
    transition: opacity var(--duration-slow) var(--ease-standard);
}

.motion .showcase-step.is-active {
    opacity: 1;
}

.showcase-inline {
    display: none;
}

.showcase-stage {
    position: sticky;
    top: calc(50vh - min(19vw, 18rem));
}

.showcase-frame {
    position: relative;
    aspect-ratio: 3653 / 2160;
    padding: 0;
}

.showcase-frame img {
    position: absolute;
    inset: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    object-fit: cover;
    object-position: 0 0;
    opacity: 0;
    transform: scale(1.04);
    transition:
        opacity var(--duration-enter) var(--ease-out),
        transform var(--duration-enter) var(--ease-out);
}

.showcase-frame img.is-active {
    opacity: 1;
    transform: none;
}

.soon-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: clamp(3rem, 6vw, 5rem);
}

/* Two tiles once a tool ships and leaves the row: they share the width
   rather than leave a third of it empty. */
.soon-row-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.soon-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 1.75rem;
    border-radius: var(--radius-2xl);
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);
}

.soon-tile h3 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.soon-tile p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--content-secondary);
}

.soon-tile .soon-badge {
    margin: 0;
}

.soon-tile .more {
    margin-top: auto;
}

a.soon-tile {
    background: var(--accent-tint);
    border-color: transparent;
}

a.soon-tile p {
    color: var(--accent-on-tint);
}

a.soon-tile:hover {
    border-color: var(--accent);
}

.showcase-close {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.showcase-close p {
    max-width: 44rem;
    color: var(--content-secondary);
    line-height: 1.65;
}

@media (max-width: 900px) {
    .showcase-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .showcase-stage {
        display: none;
    }

    .showcase-steps {
        padding-left: 0;
    }

    .showcase-steps::before,
    .showcase-steps::after {
        display: none;
    }

    .showcase-step {
        min-height: 0;
        padding-block: 0 2.75rem;
    }

    .motion .showcase-step {
        opacity: 1;
    }

    .showcase-inline {
        display: block;
        margin-top: 1.5rem;
    }

    .soon-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ----------------------------------------------------------------- bento */

.bento {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 1.25rem;
}

.bento-cell {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 22rem;
    border-radius: var(--radius-2xl);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.bento-memory {
    grid-column: span 4;
    grid-row: span 2;
    background: linear-gradient(160deg, var(--accent-tint) 0%, var(--surface-raised) 55%);
}

.bento-scheduler,
.bento-meeting {
    grid-column: span 2;
}

.bento-payments {
    grid-column: span 6;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
}

.bento-copy {
    position: relative;
    z-index: 1;
    padding: 2rem 2rem 1.5rem;
}

.bento-copy h3 {
    font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.bento-memory .bento-copy h3 {
    font-size: clamp(1.6rem, 1.4vw + 1rem, 2.4rem);
    letter-spacing: -0.03em;
}

.bento-copy p {
    margin-top: 0.6rem;
    max-width: 34rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--content-secondary);
}

.bento-memory .bento-copy p {
    font-size: 1.05rem;
}

.bento-copy .more {
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* The capture peeks in from the bottom-right edge of its cell. */
.bento-shot {
    margin-top: auto;
    padding-left: 2rem;
    margin-right: -18%;
}

.bento-payments .bento-shot {
    margin: 2rem -8% -2.5rem 0;
    padding-left: 0;
}

/* The tall cell's capture fills whatever height the two cells beside it
   give the row, cropped from its top-left corner, instead of leaving a gap
   above an image of fixed proportion. */
.bento-memory .bento-shot {
    position: relative;
    flex: 1 1 auto;
    min-height: 18rem;
}

.bento-memory .bento-shot img {
    position: absolute;
    left: 2rem;
    top: 0;
    width: calc(100% - 2rem);
    height: 100%;
    object-fit: cover;
    object-position: 0 0;
}

.bento-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg) 0 0 0;
    border: 1px solid var(--border-subtle);
    border-right: 0;
    border-bottom: 0;
    box-shadow: var(--shadow-overlay);
    transform-origin: 0 100%;
    transition: transform var(--duration-enter) var(--ease-out);
}

.bento-payments .bento-shot img {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* Spotlight: a ring of accent that follows the pointer round the border,
   and a faint wash under it. The cell itself never moves. */
.bento-cell::before,
.bento-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.bento-cell::before {
    z-index: 2;
    padding: 1px;
    background: radial-gradient(22rem circle at var(--x, 50%) var(--y, 50%), var(--accent), transparent 60%);
    -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(white 0 0) content-box exclude, linear-gradient(white 0 0);
}

.bento-cell::after {
    z-index: 0;
    background: radial-gradient(30rem circle at var(--x, 50%) var(--y, 50%), var(--glow-indigo-faint), transparent 65%);
}

@media (hover: hover) and (pointer: fine) {
    .bento-cell:hover::before,
    .bento-cell:hover::after {
        opacity: 1;
    }

    .bento-cell:hover .bento-shot img {
        transform: scale(1.02);
    }
}

.plan-note {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 1.5rem 4rem;
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid var(--border-strong);
}

.plan-note h3 {
    font-size: clamp(1.6rem, 1.4vw + 1rem, 2.25rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.plan-note .more {
    margin-top: 1.25rem;
}

.plan-note-body p {
    color: var(--content-secondary);
    line-height: 1.7;
}

.plan-note-body p + p {
    margin-top: 1rem;
}

.plan-note-body .cta-pair {
    justify-content: flex-start;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento-memory,
    .bento-payments {
        grid-column: span 2;
        grid-row: auto;
    }

    .bento-scheduler,
    .bento-meeting {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .bento-memory,
    .bento-payments,
    .bento-scheduler,
    .bento-meeting {
        grid-column: auto;
    }

    .bento-cell {
        min-height: 0;
    }

    .bento-payments {
        grid-template-columns: minmax(0, 1fr);
    }

    .bento-payments .bento-shot {
        margin: 0 -18% 0 0;
        padding-left: 2rem;
    }

    .bento-payments .bento-shot img {
        border-radius: var(--radius-lg) 0 0 0;
        border-right: 0;
        border-bottom: 0;
    }

    .plan-note {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------- integrations */

.int-track {
    position: relative;
}

/* One line runs through the first row of logos and draws itself as the row
   comes up the screen: the tools are connected, not listed. */
.int-line {
    position: absolute;
    left: 2rem;
    right: 2rem;
    top: calc(1.75rem + 28px);
    width: calc(100% - 4rem);
    height: 2px;
    overflow: visible;
    z-index: 0;
}

.int-line path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .int-line path {
            animation: line-draw linear both;
            animation-timeline: view();
            animation-range: entry 40% cover 55%;
        }
    }
}

@keyframes line-draw {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.int-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.int-card {
    padding: 1.5rem;
    border-radius: var(--radius-2xl);
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
}

.int-logo {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-raised);
}

.int-logo svg {
    width: 32px;
    height: 32px;
}

.int-card h3 {
    margin-top: 1.25rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.int-card h3 .soon-badge {
    margin-left: 0.4rem;
    vertical-align: 0.15em;
}

.int-card p {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--content-secondary);
}

.int-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 2rem;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

.int-points .trust-item {
    align-items: flex-start;
    line-height: 1.5;
}

.int-points .trust-item svg {
    margin-top: 0.15rem;
}

.int-docs {
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .int-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* An odd number of logos in two columns leaves one alone: it takes the row. */
    .int-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .int-line {
        display: none;
    }

    .int-points {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .int-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------- centres */

.centers-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.centers-copy .cta-pair {
    justify-content: flex-start;
    margin-top: 2rem;
}

.centers-visual {
    position: relative;
}

/* The list sits over the lower edge of the capture, a sheet laid on the
   screen, instead of beside it as a second column of text. */
.centers-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.75rem;
    width: 92%;
    margin: -5rem 0 0 auto;
    padding: 1.75rem;
    list-style: none;
    border-radius: var(--radius-2xl);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-modal);
}

.centers-list strong {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.centers-list p {
    margin-top: 0.3rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--content-secondary);
}

@media (max-width: 900px) {
    .centers-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .centers-list {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        margin-top: 1rem;
    }
}

/* Image reveals, linked to scroll: the frame opens from a slightly inset
   window as it comes up the screen, and the capture settles inside it. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        [data-clip] {
            animation: clip-open linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }

        [data-clip] img {
            animation: clip-settle linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 50%;
        }
    }
}

@keyframes clip-open {
    from {
        clip-path: inset(8% 5% 8% 5% round var(--radius-3xl));
    }

    to {
        clip-path: inset(-3rem round var(--radius-3xl));
    }
}

@keyframes clip-settle {
    from {
        transform: scale(1.1);
    }

    to {
        transform: none;
    }
}

/* ------------------------------------------------------ privacy (inverse) */

.hs-inverse .aurora-a {
    width: 56rem;
    top: -26rem;
    right: -20rem;
    background: radial-gradient(closest-side, var(--glow-indigo-deep), transparent);
}

.privacy-top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.privacy-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.privacy-pair h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--content-on-inverse);
}

.privacy-pair p {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--content-on-inverse-secondary);
}

.privacy-points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: clamp(3rem, 6vw, 4.5rem) 0 0;
    padding: clamp(2rem, 4vw, 2.75rem) 0 0;
    list-style: none;
    border-top: 1px solid var(--border-on-inverse);
}

.privacy-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--content-on-inverse);
}

.privacy-points svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--content-on-inverse-secondary);
}

@media (max-width: 1024px) {
    .privacy-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .privacy-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .privacy-pair,
    .privacy-points {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------------ blog */

.post-feature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    padding: 0.75rem;
    border-radius: var(--radius-3xl);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.post-feature:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-overlay);
}

.post-feature-img {
    overflow: hidden;
    border-radius: var(--radius-2xl);
}

.post-feature-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--duration-enter) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .post-feature:hover .post-feature-img img {
        transform: scale(1.03);
    }
}

.post-feature-body {
    padding: 1rem 1.5rem 1rem 0;
}

.post-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.85rem;
    color: var(--content-tertiary);
}

.post-feature-meta .post-feature-tag {
    color: var(--accent-text);
    font-weight: 600;
}

.post-feature h3 {
    margin-top: 0.85rem;
    font-size: clamp(1.35rem, 1vw + 1rem, 1.85rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.post-feature p {
    margin-top: 0.85rem;
    line-height: 1.65;
    color: var(--content-secondary);
}

.post-feature .more {
    margin-top: 1.25rem;
}

.blog-head {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .post-feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .post-feature-body {
        padding: 0.5rem 1rem 1.25rem;
    }
}

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

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.faq-aside {
    position: sticky;
    top: calc(7rem + var(--offer-strip-h, 0px));
}

.page-home .faq-list {
    max-width: none;
    margin: 0;
}

.page-home .faq-item {
    margin-bottom: 0.75rem;
    padding: 0 1.5rem;
    interpolate-size: allow-keywords;
    transition: border-color var(--duration-base) var(--ease-standard);
}

.page-home .faq-item[open] {
    border-color: var(--border-strong);
}

.page-home .faq-item summary {
    padding: 1.25rem 0;
}


@media (max-width: 900px) {
    .faq-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .faq-aside {
        position: static;
    }
}

/* --------------------------------------------------------------- closing */

.closing-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem);
    border-radius: calc(var(--radius-3xl) + 0.5rem);
    background: var(--accent);
    color: var(--accent-contrast);
    text-align: center;
}

.closing-panel .aurora-a {
    width: 44rem;
    top: -24rem;
    left: -14rem;
    background: radial-gradient(closest-side, var(--glow-indigo-deep), transparent);
}

.closing-panel .aurora-b {
    width: 40rem;
    bottom: -26rem;
    right: -12rem;
    background: radial-gradient(closest-side, var(--glow-indigo-deep), transparent);
}

.closing-panel h2 {
    max-width: 18ch;
    margin: 0 auto;
    font-size: clamp(2.25rem, 4vw + 0.75rem, 4.25rem);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.closing-panel > p:first-of-type {
    max-width: 40rem;
    margin: 1.5rem auto 0;
    font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
    line-height: 1.6;
}

.closing-panel .cta-pair {
    margin-top: 2.25rem;
}

.btn-on-accent {
    background: var(--surface-raised);
    color: var(--accent-text);
    box-shadow: var(--shadow-overlay);
}

.btn-on-accent:hover {
    background: var(--accent-tint);
    color: var(--accent-on-tint);
}

.btn-outline-on-accent {
    background: transparent;
    color: var(--accent-contrast);
    border: 1px solid var(--glass-chrome-border);
}

.btn-outline-on-accent:hover {
    background: var(--glass-veil);
}

.closing-panel .cta-reassurance {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--accent-contrast);
}

.closing-panel .cta-reassurance a {
    color: var(--accent-contrast);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.closing-panel .cta-reassurance.is-offer {
    border-top-color: var(--glass-chrome-border);
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    .motion [data-reveal],
    .motion .hero-rise,
    .motion .hw > * {
        transform: none;
    }

    .aurora {
        transform: none !important;
    }
}