/* ---------- Animated hero demo ---------- */

.hero-demo {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 56px 32px;
    isolation: isolate;
}

/* Full-bleed hero hue (Lovable-style): near-white top, with two soft "hills" of colour at the
   left and right edges and a valley between them (currently only the right hill is shown). Each hill is deepest dark purple at its core
   and shifts through violet to blue as it fades out. The layers are NOT clipped at the bottom of
   the hero: they continue underneath the next section and fade away at their full size.
   Blurred and mixed in Oklab so the transitions stay smooth.

   R is the blob radius (vertical). Layer geometry, measured from the hero's bottom edge + 50px:
   - ::before = right hill (centre lifted 0.5R), spans -1.5R .. +0.15R (tail masked out)
   The left hill and the blue centre glow are currently removed. */
.hero {
    --hero-purple-deep: #2a0b5e;
    --hero-purple: #5a2cc4;
    --hero-violet: #8f78f5;
    --hero-blue: #7c9bfb;
    --hero-blue-0: rgba(124, 155, 251, 0);
    --hill-stops:
        var(--hero-purple-deep) 0%, var(--hero-purple-deep) 8%, var(--hero-purple) 22%,
        var(--hero-violet) 40%, var(--hero-blue) 58%,
        rgba(124, 155, 251, 0.45) 74%, rgba(124, 155, 251, 0.14) 88%, var(--hero-blue-0) 100%;
    --R: calc(50% + 50px);

    position: relative;
    /* clip the gradient layers at the left/right edges only; below the hero they keep going and
       extend the page, so the hill fades out into blank space instead of being cut off */
    overflow-x: clip;
    overflow-y: visible;
    padding-bottom: 48px;
    /* faint square grid that fades out at the top and bottom of the hero */
    --grid-line: #eceef3;
    --grid-size: 50px;
    background:
        linear-gradient(180deg, #fbfcff 0, rgba(251, 252, 255, 0) 220px),
        linear-gradient(0deg, #ffffff 0, rgba(255, 255, 255, 0) 280px),
        linear-gradient(var(--grid-line) 1px, transparent 1px) center top / var(--grid-size) var(--grid-size),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) center top / var(--grid-size) var(--grid-size),
        linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
}

.hero > * {
    position: relative;
    z-index: 1;
}

/* TEMP HIDDEN: hero gradient (right hill). Remove this comment wrapper to restore.
.hero::before {
    content: "";
    position: absolute;
    left: -80px;
    right: -80px;
    z-index: 0;
    pointer-events: none;
    filter: blur(22px);
}

.hero::before {
    bottom: calc(-50px - var(--R) * 0.15);
    height: calc(var(--R) * 1.65);
    background: radial-gradient(62% 60.61% at 96% 60.61%, var(--hill-stops));
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

@supports (background: radial-gradient(in oklab, red, blue)) {
    .hero::before {
        background: radial-gradient(in oklab 62% 60.61% at 96% 60.61%, var(--hill-stops));
    }
}
*/

@media (max-width: 600px) {
    .hero { padding-bottom: 32px; }
}

.hd-window {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 60px -20px rgba(40, 40, 120, 0.35), 0 8px 20px -8px rgba(40, 40, 120, 0.18);
    overflow: hidden;
}

.hd-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f1f4;
    background: #fafafb;
}

.hd-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.hd-dot:nth-child(1) { background: #ff5f57; }
.hd-dot:nth-child(2) { background: #febc2e; }
.hd-dot:nth-child(3) { background: #28c840; }

.hd-title {
    margin-left: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
}

.hd-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

/* ----- input ----- */

.hd-input {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 10px 10px 18px;
    border: 1.5px solid #b6b8bc;
    border-radius: 16px;
    background: #fff;
    transition: border-color 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hd-input.is-active {
    border-color: #1058ea;
    box-shadow: 0 0 0 4px rgba(16, 88, 234, 0.12);
}

.hd-text {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.35;
    color: #111;
    overflow-wrap: anywhere;
}

.hd-placeholder {
    color: #9ca3af;
}

.hd-text .hl {
    border-radius: 5px;
    transition: background-color 200ms ease, color 200ms ease;
}

.hd-text .hl.on { background: #dbe6ff; color: #1058ea; }
.hd-text .hl.on.place { background: #fde8d4; color: #b4530a; }

.hd-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: #1058ea;
    animation: hd-blink 1s steps(1) infinite;
}

.hd-input:not(.is-active) .hd-caret {
    display: none;
}

@keyframes hd-blink {
    50% { opacity: 0; }
}

.hd-send {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #d9dbe1;
    color: #fff;
    transition: background-color 200ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hd-send.ready { background: #3454e0; }
.hd-send.press { transform: scale(0.95); }

/* ----- parsed card ----- */

.hd-parsed {
    min-height: 126px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #eef2ff;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 250ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hd-parsed.show {
    opacity: 1;
    transform: none;
}

.hd-parsed.leave {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    transition-duration: 180ms;
}

.hd-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1058ea;
}

.hd-kind::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.hd-parsed-title {
    margin: 6px 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
}

.hd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}

.hd-chip {
    padding: 4px 11px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1058ea;
    background: #fff;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(6px) scale(0.9);
    animation: hd-pop 220ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.hd-chip.place { color: #b4530a; }

@keyframes hd-pop {
    to { opacity: 1; transform: none; }
}

/* ----- day list ----- */

.hd-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: opacity 0.4s;
}

.hd-list.fade { opacity: 0; }

.hd-group {
    padding: 10px 0;
    border-top: 1px solid #eef0f3;
}

.hd-group h4 {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
}

.hd-group ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* skeleton placeholder while a group is empty */
.hd-group ul:empty::before {
    content: "";
    display: block;
    width: 55%;
    height: 12px;
    margin: 4px 0;
    border-radius: 6px;
    background: #f1f2f5;
}

.hd-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 0.92rem;
    color: #111;
    background: #f6f8ff;
    border-radius: 10px;
    animation: hd-drop 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}

.hd-item span:last-child {
    flex: none;
    font-size: 0.8rem;
    color: #6b7280;
}

@keyframes hd-drop {
    from { opacity: 0; transform: translateY(-10px); background: #dbe6ff; }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
    /* the base stylesheet hides .how-it-works-section on tablet/mobile; keep the demo visible */
    .how-it-works-section {
        display: flex;
        padding: 72px 0 0;
    }
}

@media (max-width: 480px) {
    .hero-demo { padding: 28px 12px; }
    .hd-body { padding: 14px; }
    .hd-text { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hd-caret { animation: none; }
    .hd-chip, .hd-item { animation: none; opacity: 1; transform: none; }
    .hd-parsed { transition: none; }
}

/* Single-column hero at every width: headline, intro and sign-up form stacked and centred. */
.main-section {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    min-height: unset;
    padding-top: 48px;
    padding-bottom: 48px;
}

.text-section {
    width: 100%;
    align-items: center;
    text-align: center;
}

.how-it-works-section {
    flex: 0 0 auto;
    width: 100%;
}

.how-it-works-section {
    display: flex;
    justify-content: center;
    padding: 72px 0 72px;
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* cool off-white tint so the white step cards stand out; the tint fades in from the white hero
       above and back out to the white footer below */
    background:
        linear-gradient(180deg, #ffffff 0, rgba(255, 255, 255, 0) 160px),
        linear-gradient(0deg, #ffffff 0, rgba(255, 255, 255, 0) 72px),
        #f3f5f9;
}

.phone-stack {
    --ph: min(75vh, 620px, 90vw);
    --fit: calc(100vw - var(--page-gutter) * 2);
    margin-right: 0;
}

/* "Think it.", "Type it." and "Done." each on their own line; sized so the longest line fits the column. */
.headline-row h1,
.text-section > h1 {
    font-size: clamp(3rem, 20.4cqi, 7.2rem);
    white-space: nowrap;
}

/* full-width section like the hero; the inner container matches .main-section's width and gutters */
.how-it-works-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: calc(1440px + var(--page-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

/* left-aligned heading and lede above the step cards */
.hiw-header {
    --hiw-header-gap: clamp(40px, 7vw, 104px);
    position: relative;
    margin-bottom: var(--hiw-header-gap);
}

/* faint grid only around the heading: full section width, from the top of the section down to
   where the cards start, fading in at the top and out before the cards */
.hiw-header::before {
    /* a step darker than the section's #f3f5f9 tint so the lines actually show */
    --grid-line: #dde2ec;
    --grid-size: 50px;
    content: "";
    position: absolute;
    z-index: -1;
    top: -72px;
    bottom: calc(var(--hiw-header-gap) * -1);
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px) center top / var(--grid-size) var(--grid-size),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) center top / var(--grid-size) var(--grid-size);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 100%);
}

.hiw-title {
    margin: 0 0 24px;
    font-family: 'Wix Madefor Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    color: #111;
}

.hiw-lede {
    margin: 0;
    max-width: 40rem;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    line-height: 1.6;
    color: #6b7280;
}

/* pull quote under the lede: large upright text in a regular weight with the opening quote mark
   hung outside the left edge so the letters line up with the lede, and a small, quiet attribution */
.hiw-quote {
    max-width: 30rem;
    margin: clamp(72px, 8vw, 120px) 0 0;
}

.hiw-quote blockquote {
    margin: 0;
}

.hiw-quote blockquote p {
    margin: 0;
    font-family: 'Wix Madefor Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #111;
    hanging-punctuation: first;
}

@supports not (hanging-punctuation: first) {
    .hiw-quote blockquote p {
        text-indent: -0.4em;
    }
}

.hiw-quote figcaption {
    margin-top: 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #9ca3af;
    text-align: right;
}

.hiw-quote figcaption::before {
    content: "\2014\00a0";
}

.hiw-quote cite {
    font-style: italic;
}

/* the copy under the carousel only shows on phones */
.hiw-quote--below {
    display: none;
}

/* stacked deck: the active card in front, its neighbours peek out behind it on either side */
.hiw-carousel {
    display: grid;
    grid-template-columns: auto minmax(0, 680px) auto;
    grid-template-areas:
        "prev stack next"
        ".    dots  .";
    justify-content: center;
    align-items: center;
    column-gap: clamp(12px, 3vw, 48px);
    row-gap: clamp(24px, 3vw, 40px);
}

.hiw-steps {
    grid-area: stack;
    display: grid;
    justify-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    touch-action: pan-y;
    user-select: none;
}

.hiw-card {
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    grid-area: 1 / 1;
    width: min(78%, 480px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 40px;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.hiw-card[data-pos="0"] {
    z-index: 3;
    box-shadow: 0 24px 60px -24px rgba(17, 24, 39, 0.18);
}

.hiw-card[data-pos="1"],
.hiw-card[data-pos="-1"] {
    z-index: 2;
    opacity: 0.55;
    cursor: pointer;
}

.hiw-card[data-pos="1"] {
    transform: translateX(18%) scale(0.88);
}

.hiw-card[data-pos="-1"] {
    transform: translateX(-18%) scale(0.88);
}

/* any further cards wait, hidden, right behind the front one */
.hiw-card:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="-1"]) {
    z-index: 1;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.hiw-nav {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    padding: 0;
    color: #fff;
    background: #111;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.hiw-prev { grid-area: prev; }
.hiw-next { grid-area: next; }

.hiw-nav svg {
    width: 16.5px;
    height: 16.5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (hover: hover) {
    .hiw-nav:hover {
        background: #333;
    }
}

.hiw-nav:active {
    transform: scale(0.94);
}

.hiw-dots {
    grid-area: dots;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hiw-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: #d1d5db;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.hiw-dot[aria-current="step"] {
    width: 24px;
    background: #3454e0;
}

@media (prefers-reduced-motion: reduce) {
    .hiw-card,
    .hiw-dot {
        transition: none;
    }
}

.hiw-copy {
    padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(28px, 3vw, 44px);
}

.hiw-copy h3 {
    margin: 0 0 16px;
    font-family: 'Wix Madefor Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    font-weight: 700;
    color: #111;
}

.hiw-copy p {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.5;
    color: #6b7280;
}

/* the phone's top half shows; the rest is clipped by the card */
.hiw-media {
    display: flex;
    justify-content: center;
    height: clamp(300px, 28vw, 400px);
    overflow: hidden;
}

.hiw-media .phone-demo {
    flex: none;
    height: auto;
    width: 64%;
    max-width: 300px;
    align-self: flex-start;
    margin-top: clamp(20px, 2.4vw, 36px);
    filter: none;
}

/* the phone's bottom half shows instead; the top is clipped */
.hiw-media--bottom .phone-demo {
    align-self: flex-end;
    margin-top: 0;
    margin-bottom: clamp(20px, 2.4vw, 36px);
}

/* desktop: heading and lede on the left, the deck beside them on the right; below 960px they stack */
@media (min-width: 961px) {
    .how-it-works-inner {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        column-gap: clamp(32px, 5vw, 96px); /* keep in step with --col-gap on .hiw-header::before */
        align-items: center;
    }

    /* stretch to the deck's height so the background grid spans the whole row; the heading and lede
       sit at the top */
    .hiw-header {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 0;
    }

    /* runs from the left edge of the screen to where the deck's column starts: full strength
       behind the text, fading out over the last stretch so none of it sits behind the deck */
    .hiw-header::before {
        --col-gap: clamp(32px, 5vw, 96px);
        bottom: 0;
        left: calc(var(--page-gutter) * -1 - max(0px, (100vw - 1440px - var(--page-gutter) * 2) / 2));
        right: calc(var(--col-gap) * -1);
        width: auto;
        transform: none;
        -webkit-mask-image:
            linear-gradient(180deg, transparent 0, #000 96px, #000 80%, transparent 100%),
            linear-gradient(90deg, #000 calc(100% - var(--col-gap) - 120px), transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(180deg, transparent 0, #000 96px, #000 80%, transparent 100%),
            linear-gradient(90deg, #000 calc(100% - var(--col-gap) - 120px), transparent 100%);
        mask-composite: intersect;
    }

    /* arrows sit under the deck, grouped with the dots between them */
    .hiw-carousel {
        grid-template-columns: 1fr auto auto auto 1fr;
        grid-template-areas:
            "stack stack stack stack stack"
            ".     prev  dots  next  .";
        justify-content: stretch;
        column-gap: 20px;
    }

    .hiw-card {
        width: min(80%, 440px);
    }
}

/* on phones the arrows move below the deck, either side of the dots */
@media (max-width: 640px) {
    .hiw-carousel {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "stack stack stack"
            "prev  dots  next";
    }

    .hiw-card {
        width: 82%;
        border-radius: 32px;
    }

    .hiw-card[data-pos="1"] {
        transform: translateX(14%) scale(0.9);
    }

    .hiw-card[data-pos="-1"] {
        transform: translateX(-14%) scale(0.9);
    }

    .hiw-nav {
        width: 33px;
        height: 33px;
    }

    .hiw-media {
        height: 340px;
    }

    .hiw-media .phone-demo {
        width: min(64%, 260px);
    }

    /* heading and lede centred; the quote moves from under the lede to under the carousel */
    .hiw-header {
        text-align: center;
    }

    .hiw-lede {
        margin: 0 auto;
    }

    .hiw-header .hiw-quote {
        display: none;
    }

    .hiw-quote--below {
        display: block;
        margin: 56px auto 0;
        text-align: center;
    }

    .hiw-quote--below blockquote p {
        hanging-punctuation: none;
        text-indent: 0;
    }

    .hiw-quote--below figcaption {
        text-align: center;
    }
}

/* product display: same tinted, full-width band as How it works, with the heading above a row of three cards */
.product-display {
    display: flex;
    justify-content: center;
    padding: 72px 0;
    position: relative;
    isolation: isolate;
    overflow: clip;
    background:
        linear-gradient(180deg, #ffffff 0, rgba(255, 255, 255, 0) 160px),
        linear-gradient(0deg, #ffffff 0, rgba(255, 255, 255, 0) 72px),
        #f3f5f9;
}

.pd-inner {
    width: 100%;
    max-width: calc(1440px + var(--page-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

.pd-header {
    --pd-header-gap: clamp(40px, 7vw, 104px);
    position: relative;
    margin-bottom: var(--pd-header-gap);
    text-align: center;
}

/* the same faint grid as the How it works heading, fading out before the cards */
.pd-header::before {
    --grid-line: #e8ebf2;
    --grid-size: 50px;
    content: "";
    position: absolute;
    z-index: -1;
    top: -72px;
    bottom: calc(var(--pd-header-gap) * -1);
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px) center top / var(--grid-size) var(--grid-size),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) center top / var(--grid-size) var(--grid-size);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 120px, #000 55%, transparent 100%);
}

.pd-title {
    margin: 0 0 24px;
    font-family: 'Wix Madefor Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.05;
    color: #111;
}

.pd-lede {
    margin: 0 auto;
    max-width: 40rem;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    line-height: 1.6;
    color: #6b7280;
}

/* three equal cards; text on top, then the full phone underneath */
.pd-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 32px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* each card spans two shared rows (copy, media) so the phones line up even when a title wraps */
.pd-card {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 40px;
}

.pd-copy {
    padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px);
}

.pd-copy h3 {
    margin: 0 0 16px;
    font-family: 'Wix Madefor Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.5rem, 2.3vw, 2.1rem);
    font-weight: 700;
    color: #111;
}

.pd-copy p {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.5;
    color: #6b7280;
}

/* the whole phone shows; the card grows to fit it */
.pd-media {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: clamp(24px, 3vw, 44px);
}

.pd-media .phone-demo {
    flex: none;
    height: auto;
    width: 64%;
    max-width: 300px;
    filter: none;
}

/* two cards per row on tablets with the third underneath, one per row on phones */
@media (max-width: 960px) {
    .pd-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .pd-card {
        border-radius: 32px;
    }

    .pd-media .phone-demo {
        width: min(64%, 260px);
    }
}