/* Fonts */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("/assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens - the palette comes from the Survey Magician app */

:root {
    --ink: #222222;
    --ink-muted: #5e5a52;
    --orange: #fa8112;
    --orange-hover: #e87610;
    /* Orange for large text: a touch deeper than the brand orange so headings reach 3:1 on white and cream */
    --orange-text: #de6e0e;
    --cream: #faf3e1;
    --sand: #f5e7c6;
    --amber: #d4a860;
    --white: #ffffff;
    /* Warm light gray for panels that sit next to the cream ones */
    --paper: #f5f3ee;

    /* The app derives this border from its primary color for survey options */
    --orange-border: #fdd2aa;
    /* Translucent, so hover backgrounds read on the transparent header as well as on white */
    --orange-tint: rgb(250 129 18 / 0.12);

    /* The app's "dots" survey texture */
    --texture-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill-opacity='.35'%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%23FA8112'/%3E%3Ccircle cx='24' cy='6' r='1.5' fill='%23D4A860'/%3E%3Ccircle cx='15' cy='18' r='1.5' fill='%23FA8112'/%3E%3Ccircle cx='33' cy='18' r='1.5' fill='%23D4A860'/%3E%3Ccircle cx='6' cy='30' r='1.5' fill='%23FA8112'/%3E%3Ccircle cx='24' cy='30' r='1.5' fill='%23D4A860'/%3E%3C/g%3E%3C/svg%3E");

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Bricolage Grotesque", var(--font-sans);

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    --max-width: 80rem;
    --gutter: clamp(1rem, 4vw, 1.5rem);
    --header-height: 4.5rem;
}

/* Base */

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

[hidden] {
    display: none !important;
}

/* Keeps in-page anchors from landing under the sticky header */
html {
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.container {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--white);
    font-weight: 600;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.75rem 1.625rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 0.15s,
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
}

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

.button--primary {
    background: var(--orange);
    color: var(--ink);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.35),
        0 1px 2px rgb(34 34 34 / 0.12),
        0 8px 20px -8px rgb(250 129 18 / 0.6);
}

.button--primary:hover {
    background: #ff8c22;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.35),
        0 2px 4px rgb(34 34 34 / 0.12),
        0 12px 28px -8px rgb(250 129 18 / 0.7);
}

.button--secondary {
    background: var(--white);
    border-color: rgb(34 34 34 / 0.18);
    color: var(--ink);
    box-shadow: 0 1px 2px rgb(34 34 34 / 0.06);
}

.button--secondary:hover {
    border-color: var(--ink);
    box-shadow: 0 6px 16px -8px rgb(34 34 34 / 0.3);
}

.button--small {
    min-height: 2.5rem;
    padding: 0.5rem 1.125rem;
    font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .button:hover {
        transform: none;
    }
}

/* Brand */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.brand__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgb(250 129 18 / 0.4);
    border-radius: var(--radius-lg);
    background: rgb(250 129 18 / 0.2);
    color: var(--orange);
}

/* Header - sticky; full menu on wide screens, a toggled panel below 52rem */

.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    transition:
        background-color 0.2s,
        box-shadow 0.2s;
}

.site-header[data-scrolled] {
    background: rgb(255 255 255 / 0.85);
    box-shadow: 0 1px 0 var(--sand);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding-block: 1rem;
}

.site-menu {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
    background: var(--orange-tint);
}

.site-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-actions .button {
    border-radius: var(--radius);
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    padding: 0;
    border: 1.5px solid rgb(34 34 34 / 0.18);
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
}

.menu-toggle:hover {
    border-color: var(--ink);
}

.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
    display: none;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__close {
    display: block;
}

@media (max-width: 52rem) {
    .menu-toggle {
        display: flex;
    }

    .site-menu {
        position: absolute;
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 0.5rem var(--gutter) 1.5rem;
        border-bottom: 1px solid var(--sand);
        background: var(--white);
        box-shadow: 0 24px 32px -24px rgb(34 34 34 / 0.25);
    }

    .menu-toggle[aria-expanded="true"] + .site-menu {
        display: flex;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav__list .site-nav__link,
    .site-actions .site-nav__link {
        display: block;
        margin-inline: -0.75rem;
        padding: 0.75rem;
        font-size: 1.0625rem;
    }

    .site-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--sand);
    }
}

/* Sub menus - a panel under the header on wide screens, an expanding section in the small-screen menu */

.site-nav__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.site-nav__trigger[aria-expanded="true"] {
    background: var(--orange-tint);
}

/* Extends the hover area down to the panel so the pointer never leaves the menu on the way */
.site-nav__trigger::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: 1.25rem;
}

/* The arrow flips while the pointer is on the item, its panel included, and stays put for touch and keyboard */
.site-nav__chevron {
    transition: transform 0.2s ease-out;
}

@media (hover: hover) {
    .site-nav__list > li:hover .site-nav__chevron {
        transform: rotate(180deg);
    }
}

.mega {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    border-top: 1px solid var(--sand);
    border-bottom: 2px solid var(--sand);
    background: var(--white);
    box-shadow: 0 24px 32px -24px rgb(34 34 34 / 0.25);
}

.site-nav__trigger[aria-expanded="true"] + .mega {
    display: block;
    animation: mega-in 0.15s ease-out;
}

@keyframes mega-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* The links fade in one after another, the second column a beat after the first */
.site-nav__trigger[aria-expanded="true"] + .mega .mega__list > li {
    animation: mega-item-in 0.3s ease-out both;
    animation-delay: calc(var(--item, 0) * 30ms + var(--group, 0) * 60ms);
}

.mega__group:nth-child(2) {
    --group: 1;
}

.mega__group:nth-child(3) {
    --group: 2;
}

.mega__list > li:nth-child(2) {
    --item: 1;
}

.mega__list > li:nth-child(3) {
    --item: 2;
}

.mega__list > li:nth-child(4) {
    --item: 3;
}

.mega__list > li:nth-child(5) {
    --item: 4;
}

.mega__list > li:nth-child(n + 6) {
    --item: 5;
}

@keyframes mega-item-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.mega__inner {
    display: grid;
    grid-template-columns: repeat(var(--mega-columns), minmax(0, 22rem));
    gap: 2rem;
    padding-block: 2rem 2.5rem;
}

.mega__group--wide {
    grid-column: span 2;
}

.mega__heading {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.mega__list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega__group--wide .mega__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
}

.mega__link {
    display: block;
    margin-inline: -0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background-color 0.15s;
}

.mega__link:hover {
    background: var(--orange-tint);
}

.mega__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
}

.mega__text {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.mega__feature {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius-lg);
    background-color: var(--cream);
    background-image: var(--texture-dots);
    text-decoration: none;
}

.mega__feature-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--orange-text);
}

.mega__feature-text {
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.mega__feature-link {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.mega__feature:hover .mega__feature-link {
    text-decoration-color: var(--ink);
}

.mega__prompt {
    margin-bottom: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--orange-border);
    border-radius: var(--radius);
    background: var(--white);
    font-size: 0.875rem;
}

.mega__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.mega__chips .chip {
    background: var(--white);
}

.mega__meta {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__trigger[aria-expanded="true"] + .mega,
    .site-nav__trigger[aria-expanded="true"] + .mega .mega__list > li {
        animation: none;
    }

    .site-nav__chevron {
        transition: none;
    }
}

@media (max-width: 52rem) {
    .site-nav__list .site-nav__trigger {
        display: flex;
        width: calc(100% + 1.5rem);
        justify-content: space-between;
    }

    .site-nav__trigger::after {
        content: none;
    }

    .mega {
        position: static;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .site-nav__trigger[aria-expanded="true"] + .mega {
        animation: none;
    }

    .mega__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 0.75rem 0 1rem;
    }

    .mega__group--wide {
        grid-column: auto;
    }

    .mega__group--wide .mega__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mega__link {
        margin-inline: 0;
        padding: 0.5rem 0.75rem;
    }

    .mega__text,
    .mega__feature {
        display: none;
    }
}

/* Hero */

/* Fills the screen and starts under the transparent header, with the animated dot field behind the copy */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    margin-top: calc(-1 * var(--header-height));
    padding-block: calc(var(--header-height) + 3rem) 4rem;
    overflow: hidden;
}

.hero > .container {
    position: relative;
    width: 100%;
}

/* Calm behind the centered copy, fading out under the header and into the next section */
.hero__field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image:
        radial-gradient(ellipse 50% 42% at 50% 50%, rgb(0 0 0 / 0.12), #000),
        linear-gradient(to bottom, transparent, #000 20%, #000 72%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(ellipse 50% 42% at 50% 50%, rgb(0 0 0 / 0.12), #000),
        linear-gradient(to bottom, transparent, #000 20%, #000 72%, transparent);
    mask-composite: intersect;
}

.hero__intro {
    display: grid;
    gap: 1.5rem;
    text-align: center;
}

.hero__title {
    font-size: clamp(2.25rem, 3.6vw + 1rem, 4.5rem);
    font-weight: 750;
    font-stretch: 85%;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.hero__lead {
    max-width: 44rem;
    margin: 0 auto;
    font-size: 1.25rem;
    color: var(--ink-muted);
}

.hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* Product mock-ups, used on the showcase pages */

.panel-card {
    width: 100%;
    max-width: 34rem;
    padding: 1.25rem;
    border-radius: 16px;
    background: var(--white);
    box-shadow:
        0 0 0 1px rgb(34 34 34 / 0.06),
        0 24px 48px -24px rgb(34 34 34 / 0.3);
}
.mock-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.mock-label svg,
.mock-suggestion svg {
    flex: none;
    color: var(--orange);
}

.mock-prompt {
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    background: var(--cream);
    font-size: 0.875rem;
    line-height: 1.45;
}

.mock-list {
    display: grid;
    gap: 0.375rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.mock-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--sand);
    border-radius: 8px;
    line-height: 1.3;
}

.mock-tag {
    flex: none;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--cream);
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.mock-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.mock-brand__logo {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--ink);
    color: var(--cream);
    font-size: 0.75rem;
}

.mock-question {
    margin-top: 0.375rem;
    font-size: clamp(1.0625rem, 0.9vw + 0.6rem, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
}

.mock-score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.875rem;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.mock-score span {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-muted);
}

.mock-stack {
    display: flex;
    gap: 2px;
    height: 0.625rem;
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 999px;
}

.mock-stack span:nth-child(1),
.mock-dot--promoters {
    background: var(--orange);
}

.mock-stack span:nth-child(2),
.mock-dot--passives {
    background: var(--amber);
}

.mock-stack span:nth-child(3),
.mock-dot--detractors {
    background: #d9d4cb;
}

.mock-legend {
    display: grid;
    gap: 0.375rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.mock-legend li {
    display: flex;
    justify-content: space-between;
}

.mock-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
}

.mock-meta {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sand);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.mock-questions__n {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--cream);
    font-size: 0.75rem;
    font-weight: 700;
}

.mock-suggestion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 10px;
    background: var(--cream);
    font-size: 0.8125rem;
}

.mock-field-label {
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.mock-field-label:not(:first-child) {
    margin-top: 1.25rem;
}

@media (max-width: 30rem) {
    .mock-list .mock-tag {
        display: none;
    }
}

/* Sections */

.section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.section__header {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1rem 4rem;
    align-items: end;
}

.section__title {
    font-size: clamp(1.875rem, 2.2vw + 1rem, 2.75rem);
}

.section__lead {
    max-width: 30rem;
    font-size: 1.125rem;
    color: var(--ink-muted);
}

@media (max-width: 56rem) {
    .section__header {
        grid-template-columns: minmax(0, 1fr);
    }
}

.chip {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--sand);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.8125rem;
}

/* Templates - categories on the left, a carousel of templates on the right */

.icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.templates {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3.5rem);
    border-radius: 28px;
    background: var(--paper);
}

.templates__tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

/* A category is a pill; the selected one is a card with its description */
.tpl-tab {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 0.625rem;
    align-items: center;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    border: 1px solid rgb(34 34 34 / 0.16);
    border-radius: 24px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}

.tpl-tab:hover {
    border-color: rgb(34 34 34 / 0.32);
    background: var(--white);
}

.tpl-tab__icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1.5px solid rgb(34 34 34 / 0.45);
    border-radius: 50%;
}

.tpl-tab__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.tpl-tab__more {
    display: none;
}

.tpl-tab[aria-selected="true"] {
    grid-template-columns: minmax(0, 1fr);
    align-self: stretch;
    padding: 1.5rem 1.75rem;
    border-color: transparent;
    background: var(--white);
    cursor: default;
}

.tpl-tab[aria-selected="true"] .tpl-tab__icon {
    display: none;
}

.tpl-tab[aria-selected="true"] .tpl-tab__title {
    font-size: 1.25rem;
    font-weight: 700;
}

.tpl-tab[aria-selected="true"] .tpl-tab__more {
    display: block;
    margin-top: 0.5rem;
    color: var(--ink-muted);
}

/* The description rises in once the card has started to grow */
@media (prefers-reduced-motion: no-preference) {
    .tpl-tab[aria-selected="true"] .tpl-tab__text {
        display: block;
        animation: tpl-text-in 0.45s 0.12s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
}

@keyframes tpl-text-in {
    from {
        opacity: 0;
        translate: 0 0.5rem;
    }
}

/*
 * Switching category is a view transition (see tabs.js): the browser snapshots every category, then
 * animates each snapshot's box to its new position and size on the GPU. Snapshots are clipped to the
 * box instead of stretched, so the card's shape grows while its text stays sharp and in place.
 */
::view-transition-group(*) {
    overflow: clip;
    border-radius: 24px;
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(*),
::view-transition-new(*) {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: left top;
    animation-duration: 0.25s;
    animation-timing-function: ease-out;
}

/* The sticky header gets its own snapshot, so it stays layered above the moving categories instead of
   sinking into the page snapshot beneath them. Its frosted blur doesn't carry into a snapshot, so it turns
   opaque for the length of the switch. */
.site-header {
    view-transition-name: site-header;
}

html:active-view-transition .site-header[data-scrolled] {
    background: var(--white);
}

/* The rest of the page, the header and the template cards switch at once; the new cards slide in on their own */
::view-transition-group(root),
::view-transition-group(site-header),
::view-transition-group(morph-panels) {
    overflow: visible;
    border-radius: 0;
    animation: none;
}

::view-transition-old(root),
::view-transition-old(site-header),
::view-transition-old(morph-panels) {
    display: none;
}

::view-transition-new(root),
::view-transition-new(site-header),
::view-transition-new(morph-panels) {
    animation: none;
}

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

/* Carousel - the centered card is full strength, its neighbors peek in faded at the edges */

.carousel {
    --card: min(23rem, 82cqi);
    position: relative;
    container-type: inline-size;
}

.carousel__track {
    position: relative;
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 1.5rem calc((100cqi - var(--card)) / 2) 1.25rem;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

.carousel__arrow {
    position: absolute;
    z-index: 1;
    top: calc(1.5rem + 0.75rem + 7.5rem);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 6px 18px -6px rgb(34 34 34 / 0.35);
    color: var(--ink);
    cursor: pointer;
    translate: 0 -50%;
    transition: opacity 0.15s;
}

.carousel__arrow--prev {
    left: 0.25rem;
}

.carousel__arrow--next {
    right: 0.25rem;
}

.carousel__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.carousel__dots {
    display: flex;
    justify-content: center;
}

.carousel__dot {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.carousel__dot::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgb(34 34 34 / 0.22);
    transition:
        width 0.2s,
        background-color 0.2s;
}

.carousel__dot[aria-current="true"]::before {
    width: 1.25rem;
    background: var(--ink);
}

/* Template card */

.tpl-card {
    display: flex;
    flex: 0 0 var(--card);
    flex-direction: column;
    padding: 0.75rem 0.75rem 1.25rem;
    border-radius: 24px;
    background: var(--white);
    box-shadow:
        0 1px 2px rgb(34 34 34 / 0.04),
        0 16px 40px -20px rgb(34 34 34 / 0.25);
    scroll-snap-align: center;
    transition:
        opacity 0.3s,
        scale 0.3s;
}

.carousel.is-ready .tpl-card:not(.is-active) {
    opacity: 0.45;
    scale: 0.94;
    cursor: pointer;
}

.tpl-card__media {
    position: relative;
    display: grid;
    place-items: center;
    height: 15rem;
    padding: 1rem 1.25rem 3.75rem;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--cream);
    background-image: var(--texture-dots);
}

.tpl-card__title {
    margin: 1.125rem 0.5rem 0;
    font-size: 1.25rem;
}

.tpl-card__text {
    margin: 0.5rem 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

.tpl-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: auto 0.5rem 0;
    padding-top: 1.25rem;
}

.tpl-types {
    display: flex;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tpl-types li {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--sand);
    border-radius: 10px;
    background: var(--cream);
}

.tpl-chip {
    position: absolute;
    bottom: 0.875rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.88);
    box-shadow: 0 6px 18px -8px rgb(34 34 34 / 0.3);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    translate: -50% 0;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.tpl-chip__icon {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--orange);
}

/* Template previews - a miniature of each template's first question */

.tpl-preview {
    width: 100%;
    max-width: 17rem;
    padding: 0.875rem 1rem 1rem;
    border-radius: 12px;
    background: var(--white);
    box-shadow:
        0 0 0 1px rgb(34 34 34 / 0.05),
        0 10px 24px -14px rgb(34 34 34 / 0.35);
}

.tpl-preview__question {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
}

.tpl-scale,
.tpl-choices {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.tpl-scale {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 2px;
}

.tpl-scale li {
    display: grid;
    place-items: center;
    height: 1.375rem;
    border: 1px solid var(--orange-border);
    border-radius: 4px;
    background: #fff6ed;
    color: var(--ink-muted);
    font-size: 0.5625rem;
}

.tpl-scale .is-on {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--ink);
    font-weight: 700;
}

.tpl-choices {
    display: grid;
    gap: 0.3125rem;
    font-size: 0.6875rem;
}

.tpl-choices li {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--orange-border);
    border-radius: 6px;
    background: #fff6ed;
}

.tpl-choices li::before {
    content: "";
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border: 1.5px solid var(--orange);
    border-radius: 50%;
    background: var(--white);
}

.tpl-choices .is-on {
    border-color: var(--orange);
    background: #feead7;
}

.tpl-choices .is-on::before {
    background: radial-gradient(circle, var(--orange) 0 2.5px, var(--white) 3px);
}

.tpl-stars {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.75rem;
    color: var(--orange-border);
}

.tpl-stars .is-on {
    color: var(--orange);
}

.tpl-slider {
    display: block;
    margin-top: 1rem;
}

.tpl-slider__track {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: #feeddd;
}

.tpl-slider__fill {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--orange);
}

.tpl-slider__fill::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--orange);
    border-radius: 50%;
    background: var(--white);
    translate: 0 -50%;
}

.tpl-slider__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.625rem;
    font-size: 0.625rem;
    color: var(--ink-muted);
}

.tpl-text {
    min-height: 3.25rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--orange-border);
    border-radius: 6px;
    background: #fff6ed;
    font-size: 0.6875rem;
    color: var(--ink-muted);
}

@media (prefers-reduced-motion: reduce) {
    .tpl-card,
    .carousel__dot::before {
        transition: none;
    }
}

@media (max-width: 56rem) {
    .templates {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Categories become a row of pills that scrolls sideways */
    .templates__tabs {
        flex-direction: row;
        margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3.5rem));
        padding: 0.25rem clamp(1.25rem, 4vw, 3.5rem);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .templates__tabs::-webkit-scrollbar {
        display: none;
    }

    .tpl-tab {
        flex: none;
    }

    .tpl-tab[aria-selected="true"] {
        grid-template-columns: auto;
        align-self: auto;
        padding: 0.5rem 1.25rem;
        background: var(--ink);
        color: var(--white);
    }

    .tpl-tab[aria-selected="true"] .tpl-tab__title {
        font-size: 1rem;
    }

    .tpl-tab[aria-selected="true"] .tpl-tab__more {
        display: none;
    }
}

/* A newly shown category's templates slide in one after another */
@media (prefers-reduced-motion: no-preference) {
    .templates__panel:not([hidden]) .tpl-card {
        animation: tpl-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }

    .templates__panel:not([hidden]) .tpl-card:nth-child(2) {
        animation-delay: 0.07s;
    }

    .templates__panel:not([hidden]) .tpl-card:nth-child(3) {
        animation-delay: 0.14s;
    }

    .templates__panel:not([hidden]) .tpl-card:nth-child(n + 4) {
        animation-delay: 0.21s;
    }
}

@keyframes tpl-card-in {
    from {
        opacity: 0;
        transform: translateX(2.5rem);
    }
}

/* Showcase - by default the pages are a plain list; showcase.js adds .is-pinned on large screens, where the section
   sticks to the screen and the scroll position picks the page */

.showcase {
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.showcase__top {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.showcase__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The bar under each name fills in orange for the page on screen */
.showcase__link {
    position: relative;
    display: block;
    padding-block: 0.5rem 0.75rem;
    color: var(--ink-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
}

.showcase__link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--sand);
}

.showcase__link::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s var(--ease);
}

.showcase__link:hover,
.showcase__link[aria-current="true"] {
    color: var(--ink);
}

.showcase__link[aria-current="true"]::before {
    transform: scaleX(1);
}

.showcase__stage {
    display: grid;
    gap: 1.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.showcase__page {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3.5rem);
    border: 1px solid var(--sand);
    border-radius: 28px;
    background: var(--page-bg, var(--cream));
}

.showcase__title {
    font-size: clamp(1.625rem, 1.4vw + 1rem, 2.375rem);
}

.showcase__desc {
    max-width: 30rem;
    margin-top: 1rem;
    font-size: 1.0625rem;
    color: var(--ink-muted);
}

.showcase__points {
    display: grid;
    gap: 0.5rem;
    margin: 1.5rem 0 2rem;
    padding: 0;
    list-style: none;
}

.showcase__points li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.showcase__points li::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
            center / 0.75rem no-repeat,
        var(--orange);
}

.showcase__visual {
    display: grid;
    place-items: center;
    min-width: 0;
}

.showcase__visual .panel-card {
    max-width: 30rem;
}

/* Pinned: the section is tall enough to scroll through every page while its inner frame stays on screen */
.showcase.is-pinned {
    height: calc(100svh - var(--header-height) + (var(--pages) - 1) * 70svh);
    padding-block: 0;
}

.showcase.is-pinned .showcase__sticky {
    position: sticky;
    top: var(--header-height);
    height: calc(100svh - var(--header-height));
    overflow: hidden;
}

.showcase.is-pinned .showcase__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1.75rem;
    height: 100%;
    padding-block: 1.5rem 2rem;
}

.showcase.is-pinned .showcase__stage {
    position: relative;
    margin-top: 0;
}

.showcase.is-pinned .showcase__page {
    position: absolute;
    inset: 0;
    box-shadow: 0 -20px 48px -28px rgb(34 34 34 / 0.3);
    transform-origin: 50% 0;
    transition: transform 0.4s var(--ease);
}

/* Waiting below the frame */
.showcase.is-pinned .showcase__page[data-state="next"] {
    transform: translateY(calc(100% + 6rem));
}

/* The page just covered steps back so its top edge peeks out above the new one; older pages sit hidden behind it */
.showcase.is-pinned .showcase__page[data-state="past"],
.showcase.is-pinned .showcase__page[data-state="gone"] {
    transform: translateY(-1.25rem) scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
    .showcase.is-pinned .showcase__page,
    .showcase__link,
    .showcase__link::before {
        transition: none;
    }
}

@media (max-width: 56rem) {
    .showcase__page {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Logic flow mock-up: one question branching into two */
.flow__node {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--white);
    font-size: 0.875rem;
}

.flow__node--main {
    position: relative;
    max-width: 22rem;
    margin-inline: auto;
}

.flow__node--main .mock-tag {
    margin-left: auto;
}

.flow__node--main::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    height: 1.25rem;
    border-left: 2px dashed var(--orange-border);
}

.flow__branches {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}

.flow__branches::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    right: 25%;
    left: 25%;
    border-top: 2px dashed var(--orange-border);
}

.flow__branch {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.625rem;
}

.flow__branch::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    left: 50%;
    height: 1.25rem;
    border-left: 2px dashed var(--orange-border);
}

.flow__rule {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--orange-border);
    border-radius: 999px;
    background: #fff6ed;
    font-size: 0.75rem;
    font-weight: 600;
}

.flow__branch .flow__node {
    width: 100%;
}

/* Design mock-up: a survey in the chosen theme next to its controls */
.design {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.design__preview {
    padding: 1rem;
    border-radius: 12px;
    background:
        radial-gradient(circle, rgb(47 133 90 / 0.18) 1.5px, transparent 2px) 0 0 / 18px 18px,
        #f1f8f4;
}

.design__logo {
    background: #2f855a;
    color: var(--white);
}

.design__preview .mock-question {
    margin-top: 1rem;
    font-size: 0.9375rem;
}

.design__options {
    display: grid;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.design__options li {
    padding: 0.5rem 0.625rem;
    border: 1px solid rgb(47 133 90 / 0.35);
    border-radius: 8px;
    background: var(--white);
}

.design__options .is-on {
    border-color: #2f855a;
    background: rgb(47 133 90 / 0.12);
    font-weight: 600;
}

.design__swatches,
.design__textures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.design__swatches span {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--swatch);
}

.design__swatches .is-on {
    box-shadow:
        0 0 0 2px var(--white),
        0 0 0 4px var(--swatch);
}

.design__textures span {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--sand);
    border-radius: 999px;
    font-size: 0.75rem;
}

.design__textures .is-on {
    border-color: var(--ink);
    font-weight: 600;
}

.design__controls .mock-field-label:not(:first-child) {
    margin-top: 1.25rem;
}

/* AI section - a dark panel that widens from the content width to the full page as it scrolls in (ai-section.js
   sets --expand from 0 to 1). Only its clip-path changes, so the page never re-lays out while it grows. */

.ai {
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --on-dark: rgb(250 243 225 / 0.92);
    --on-dark-muted: rgb(250 243 225 / 0.66);
    --on-dark-line: rgb(250 243 225 / 0.12);
    container-type: inline-size;
    padding-block: clamp(2rem, 5vw, 4rem);
}

.ai__surface {
    --inset-x: calc(max((100cqi - var(--max-width)) / 2, 0px) + var(--gutter));
    position: relative;
    overflow: hidden;
    padding-block: clamp(4.5rem, 9vw, 7.5rem);
    background:
        radial-gradient(70% 60% at 50% 120%, rgb(242 95 58 / 0.18), transparent 70%),
        linear-gradient(160deg, #2b2623 0%, var(--ink) 45%, #1b1a19 100%);
    color: var(--on-dark);
    clip-path: inset(0 calc(var(--inset-x) * (1 - var(--expand, 1))) round calc(2rem * (1 - var(--expand, 1))));
}

/* Faint dots, like the hero, plus an orange spotlight that follows the pointer */
.ai__surface::before,
.ai__surface::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ai__surface::before {
    background: radial-gradient(circle, rgb(250 243 225 / 0.08) 1px, transparent 1.6px) 0 0 / 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000, transparent);
}

.ai__surface::after {
    background: radial-gradient(28rem circle at var(--spot-x, 70%) var(--spot-y, 20%), rgb(250 129 18 / 0.14), transparent 65%);
}

.ai__glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.ai__glow--orange {
    top: -28rem;
    right: -18rem;
    width: 56rem;
    height: 56rem;
    background: radial-gradient(circle, rgb(250 129 18 / 0.34), transparent 65%);
    animation: ai-drift 18s ease-in-out infinite alternate;
}

.ai__glow--coral {
    bottom: -30rem;
    left: -20rem;
    width: 56rem;
    height: 56rem;
    background: radial-gradient(circle, rgb(242 95 58 / 0.24), transparent 65%);
    animation: ai-drift 22s ease-in-out infinite alternate-reverse;
}

.ai__glow--amber {
    top: 35%;
    left: 35%;
    width: 38rem;
    height: 38rem;
    background: radial-gradient(circle, rgb(212 168 96 / 0.14), transparent 65%);
    animation: ai-drift 26s ease-in-out infinite alternate;
}

@keyframes ai-drift {
    to {
        transform: translate(-7rem, 5rem) scale(1.15);
    }
}

.ai__inner {
    position: relative;
    z-index: 1;
    padding-inline: calc(var(--gutter) + clamp(0.5rem, 4vw, 3.5rem));
}

.ai :focus-visible {
    outline-color: var(--cream);
}

.ai__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.5rem 4rem;
    align-items: end;
}

.ai__title {
    font-size: clamp(2rem, 2.6vw + 1rem, 3.25rem);
    color: var(--cream);
}

.ai__lead {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    color: var(--on-dark-muted);
}

/* The heading and copy rise in once the section is on screen (only when the script is running) */
.ai.is-armed .ai__head > * {
    opacity: 0;
    translate: 0 1.5rem;
    transition:
        opacity 0.8s var(--ease),
        translate 0.8s var(--ease);
}

.ai.is-armed .ai__head > :nth-child(2) {
    transition-delay: 0.12s;
}

.ai.is-visible .ai__head > * {
    opacity: 1;
    translate: 0 0;
}

.ai__demo {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ai__tabs {
    display: grid;
    gap: 0.5rem;
}

.ai-tab {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.25rem 1rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 20px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.25s,
        border-color 0.25s;
}

.ai-tab:hover {
    background: rgb(255 255 255 / 0.04);
}

.ai-tab[aria-selected="true"] {
    border-color: var(--on-dark-line);
    background: rgb(255 255 255 / 0.07);
}

.ai-tab__icon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    background: rgb(250 129 18 / 0.14);
    color: var(--orange);
    transition:
        background-color 0.25s,
        color 0.25s;
}

.ai-tab[aria-selected="true"] .ai-tab__icon {
    background: var(--orange);
    color: var(--ink);
}

.ai-tab__title {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--cream);
}

.ai-tab__text {
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

/* Demo window, with a slowly circling orange edge */
@property --ai-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.ai-window {
    position: relative;
    isolation: isolate;
    border-radius: 24px;
    background: rgb(20 19 18 / 0.55);
    box-shadow:
        0 40px 100px -40px rgb(0 0 0 / 0.7),
        inset 0 1px 0 rgb(255 255 255 / 0.06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.ai-window::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--ai-angle),
        var(--on-dark-line) 0 62%,
        rgb(250 129 18 / 0.9) 78%,
        rgb(212 168 96 / 0.8) 86%,
        var(--on-dark-line) 100%
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ai-spin 7s linear infinite;
}

@keyframes ai-spin {
    to {
        --ai-angle: 360deg;
    }
}

.ai-window__bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--on-dark-line);
    font-size: 0.875rem;
    font-weight: 600;
}

.ai-window__pulse {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 0 0 rgb(250 129 18 / 0.6);
    animation: ai-pulse 2s ease-out infinite;
}

@keyframes ai-pulse {
    to {
        box-shadow: 0 0 0 0.625rem rgb(250 129 18 / 0);
    }
}

.ai-window__note {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--on-dark-muted);
}

.ai-window__body {
    min-height: 27rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

.ai-panel:not([hidden]) {
    animation: ai-in 0.45s var(--ease);
}

@keyframes ai-in {
    from {
        opacity: 0;
        translate: 0 0.75rem;
    }
}

/* Shared chips and buttons on dark */
.ai-chips,
.ai-fixes__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ai-chip {
    padding: 0.4375rem 0.875rem;
    border: 1px solid rgb(250 243 225 / 0.18);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.04);
    color: var(--on-dark);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}

.ai-chip:hover {
    border-color: rgb(250 129 18 / 0.7);
    background: rgb(250 129 18 / 0.12);
}

/* Draft a survey */
.ai-prompt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.375rem 0.375rem 1.125rem;
    border: 1px solid rgb(250 243 225 / 0.18);
    border-radius: 999px;
    background: rgb(0 0 0 / 0.25);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.ai-prompt:focus-within {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgb(250 129 18 / 0.2);
}

.ai-prompt__input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--cream);
    font: inherit;
    outline: none;
}

.ai-prompt__input::placeholder {
    color: rgb(250 243 225 / 0.45);
}

.ai-prompt__send {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--orange);
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.2s var(--ease);
}

.ai-prompt__send:hover {
    transform: scale(1.06);
}

.ai-output {
    margin-top: 1.5rem;
}

.ai-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--on-dark-muted);
}

.ai-status svg {
    flex: none;
    color: var(--orange);
}

.ai-status.is-working svg {
    animation: ai-twinkle 1s ease-in-out infinite;
}

@keyframes ai-twinkle {
    50% {
        opacity: 0.35;
        transform: scale(0.8) rotate(20deg);
    }
}

.ai-status.is-done {
    margin-top: 1rem;
    animation: ai-in 0.45s var(--ease);
}

.ai-status a {
    color: var(--cream);
    font-weight: 600;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.ai-skeletons {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.ai-skeletons span {
    height: 3rem;
    border-radius: 14px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0.04) 0%, rgb(255 255 255 / 0.11) 50%, rgb(255 255 255 / 0.04) 100%) 0 0 / 200% 100%;
    animation: ai-shimmer 1.1s linear infinite;
}

.ai-skeletons span:nth-child(2) {
    width: 85%;
}

.ai-skeletons span:nth-child(3) {
    width: 70%;
}

@keyframes ai-shimmer {
    to {
        background-position: -200% 0;
    }
}

.ai-questions {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-question,
.ai-card__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-question {
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--on-dark-line);
    border-radius: 14px;
    background: rgb(255 255 255 / 0.05);
    font-size: 0.9375rem;
    animation: ai-in 0.45s var(--ease);
}

.ai-question__n {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: rgb(250 129 18 / 0.18);
    color: var(--orange);
    font-size: 0.75rem;
    font-weight: 700;
}

.ai-question__text {
    flex: 1;
    min-height: 1.5em;
}

.ai-question__type {
    flex: none;
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgb(250 243 225 / 0.09);
    color: var(--on-dark-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Fix unclear questions */
.ai-fixes {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-fix {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1rem;
    align-items: center;
    padding: 1rem 1.125rem;
    border: 1px solid var(--on-dark-line);
    border-radius: 16px;
    background: rgb(255 255 255 / 0.04);
    transition:
        border-color 0.3s,
        background-color 0.3s;
}

.ai-fix.is-fixed {
    border-color: rgb(250 129 18 / 0.35);
    background: rgb(250 129 18 / 0.06);
}

.ai-fix__issue {
    justify-self: start;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: rgb(242 95 58 / 0.16);
    color: #ffa28c;
    font-size: 0.75rem;
    font-weight: 600;
    transition:
        background-color 0.3s,
        color 0.3s;
}

.ai-fix.is-fixed .ai-fix__issue {
    background: rgb(250 129 18 / 0.18);
    color: var(--orange);
}

.ai-fix__text {
    grid-column: 1;
}

.ai-fix__before {
    background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat;
    transition:
        background-size 0.45s var(--ease),
        color 0.45s;
}

.ai-fix.is-fixed .ai-fix__before {
    background-size: 100% 1.5px;
    color: rgb(250 243 225 / 0.42);
}

.ai-fix__after {
    display: block;
    min-height: 1.6em;
    margin-top: 0.375rem;
    color: var(--cream);
    font-weight: 600;
}

.ai-fix__button {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 0.5rem 1rem;
    border: 1px solid rgb(250 129 18 / 0.7);
    border-radius: 999px;
    background: none;
    color: var(--orange);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.2s,
        color 0.2s;
}

.ai-fix__button:hover:not(:disabled) {
    background: var(--orange);
    color: var(--ink);
}

.ai-fix__button:disabled {
    border-color: transparent;
    color: var(--on-dark-muted);
    cursor: default;
}

/* Ask while you build */
.ai-chat__log {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-height: 19rem;
}

.ai-msg {
    max-width: 88%;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    font-size: 0.9375rem;
    animation: ai-in 0.4s var(--ease);
}

.ai-msg--user {
    justify-self: end;
    border-bottom-right-radius: 6px;
    background: var(--orange);
    color: var(--ink);
    font-weight: 500;
}

.ai-msg--ai {
    justify-self: start;
    border: 1px solid var(--on-dark-line);
    border-bottom-left-radius: 6px;
    background: rgb(255 255 255 / 0.07);
}

.ai-msg--typing {
    display: flex;
    gap: 0.3rem;
    padding-block: 1rem;
}

.ai-msg--typing span {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--on-dark-muted);
    animation: ai-bounce 1s ease-in-out infinite;
}

.ai-msg--typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.ai-msg--typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes ai-bounce {
    30% {
        transform: translateY(-0.3rem);
        opacity: 1;
    }
    60%,
    100% {
        transform: none;
        opacity: 0.5;
    }
}

.ai-card {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.875rem;
    border: 1px solid var(--on-dark-line);
    border-radius: 14px;
    background: rgb(0 0 0 / 0.25);
    animation: ai-in 0.45s var(--ease);
}

.ai-card__rule {
    justify-self: start;
    padding: 0.25rem 0.625rem;
    border: 1px dashed rgb(250 129 18 / 0.6);
    border-radius: 999px;
    color: var(--orange);
    font-size: 0.75rem;
    font-weight: 600;
}

.ai-card__change {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-card__change .ai-card__old::after {
    content: "";
    display: inline-block;
    width: 1.5rem;
    margin-left: 0.75rem;
    border-top: 1.5px solid var(--on-dark-muted);
    vertical-align: middle;
}

.ai-card__old {
    color: rgb(250 243 225 / 0.45);
    text-decoration: line-through;
}

.ai-card__new {
    color: var(--cream);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ai__glow,
    .ai-window::before,
    .ai-window__pulse,
    .ai-skeletons span,
    .ai-status.is-working svg,
    .ai-msg--typing span {
        animation: none;
    }

    .ai.is-armed .ai__head > *,
    .ai-fix__before {
        transition: none;
    }
}

@media (max-width: 56rem) {
    .ai__head,
    .ai__demo {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-window__note {
        display: none;
    }
}

/* Pricing - the plans differ only in their monthly limits, so the cards lead with those as meters */

.pricing-intro {
    position: relative;
    margin-top: calc(-1 * var(--header-height));
    text-align: center;
    isolation: isolate;
    padding-top: 180px;
    padding-bottom: 110px;
}

/* A cream glow and the app's dots, fading out before the cards */
.pricing-intro::before {
    content: "";
    position: absolute;
    inset: 0 0 -12rem;
    z-index: -1;
    background:
        radial-gradient(60% 70% at 50% 0%, rgb(250 243 225 / 0.9), transparent 75%),
        var(--texture-dots);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
    mask-image: linear-gradient(to bottom, #000 40%, transparent);
    pointer-events: none;
}

.pricing-intro__title {
    font-size: clamp(2.5rem, 3.6vw + 1rem, 4.25rem);
    font-weight: 750;
    font-stretch: 85%;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.pricing-intro__lead {
    max-width: 36rem;
    margin: 1.25rem auto 0;
    font-size: 1.25rem;
    color: var(--ink-muted);
}

.pricing-intro__points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 600;
}

.pricing-intro__points li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-intro__points li::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--orange-tint)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23de6e0e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E")
        center / 0.75rem no-repeat;
}

/* Plan cards */

.plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.plan {
    --plan-muted: var(--ink-muted);
    --plan-line: var(--sand);
    --plan-track: rgb(34 34 34 / 0.08);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--plan-line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 1px 2px rgb(34 34 34 / 0.04);
    transition: box-shadow 0.25s;
}

/* The featured plan is dark, like the AI section on the home page */
.plan--featured {
    --plan-muted: rgb(250 243 225 / 0.68);
    --plan-line: rgb(250 243 225 / 0.14);
    --plan-track: rgb(250 243 225 / 0.14);
    overflow: hidden;
    border-color: transparent;
    background:
        radial-gradient(90% 50% at 100% 0%, rgb(250 129 18 / 0.28), transparent 70%),
        linear-gradient(160deg, #2b2623 0%, var(--ink) 45%, #1b1a19 100%);
    color: rgb(250 243 225 / 0.94);
    box-shadow: 0 28px 56px -28px rgb(34 34 34 / 0.6);
}

.plan--featured :focus-visible {
    outline-color: var(--cream);
}

.plan__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.plan__name {
    margin-right: auto;
    font-size: 1.375rem;
}

.plan__badge {
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--orange-tint);
    color: var(--orange-text);
    white-space: nowrap;
}

.plan--featured .plan__badge {
    background: var(--orange);
    color: var(--ink);
}

.plan__tagline {
    min-height: 3em;
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--plan-muted);
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.plan__amount {
    font-family: var(--font-display);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.plan__period {
    font-size: 0.875rem;
    color: var(--plan-muted);
}

.plan__cta {
    width: 100%;
    margin-top: 1.5rem;
}

.plan__section-title {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--plan-line);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--plan-muted);
}

.plan__section-title + * {
    margin-top: 0.875rem;
}

.plan__limits,
.plan__shared {
    display: grid;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.plan__limits {
    gap: 1rem;
}

.meter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.625rem;
    font-size: 0.875rem;
}

.meter__icon {
    color: var(--orange);
}

.meter__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.meter__bar {
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--plan-track);
}

.meter__bar::after {
    content: "";
    display: block;
    width: calc(var(--fill) * 100%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(to right, var(--amber), var(--orange));
    transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
    .meter__bar::after {
        animation: meter-grow 1.1s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes meter-grow {
    from {
        transform: scaleX(0);
    }
}

.plan__shared {
    gap: 0.5rem;
    font-size: 0.875rem;
}

.plan__shared li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.plan__shared-icon {
    flex: none;
    color: var(--orange);
}

/* Lines up with the list text, past the icons */
.plan__more {
    margin-top: 0.5rem;
    padding-left: calc(16px + 0.625rem);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--plan-muted);
}

@media (min-width: 72.01rem) {
    .plan--featured {
        margin-block: -0.75rem;
        padding-block: 2.5rem 2.25rem;
    }
}

@media (max-width: 72rem) {
    .plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .plan__tagline {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .plan {
        transition: none;
    }
}

/* Comparison table - the plan names stay under the header while the features scroll past */

.compare__table {
    width: 100%;
    margin-top: clamp(2rem, 4vw, 3rem);
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.9375rem;
}

.compare__feature-col {
    width: 34%;
}

.compare__table thead > tr > * {
    position: sticky;
    top: var(--header-height);
    z-index: 1;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--sand);
    background: var(--white);
    text-align: center;
    vertical-align: bottom;
}

.compare__table thead .is-featured {
    background: #fff7ef;
    box-shadow: inset 0 3px 0 var(--orange);
}

.compare__plan {
    display: block;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.compare__price {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.compare__per {
    font-weight: 400;
}

.compare__table tbody th,
.compare__table tbody td {
    padding: 0.875rem 0.5rem;
    border-bottom: 1px solid rgb(34 34 34 / 0.07);
}

.compare__table tbody th[scope="row"] {
    padding-left: 0.75rem;
    font-weight: 500;
    text-align: left;
}

.compare__table tbody td {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.compare__table tbody .is-featured {
    background: rgb(250 129 18 / 0.05);
}

.compare__table .compare__group-row th {
    padding: 2.5rem 0.75rem 0.75rem;
    border-bottom-color: var(--sand);
    background: none;
    text-align: left;
}

.compare__group-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
}

.compare__group-note {
    margin-left: 0.75rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    background: var(--orange-tint);
    color: var(--orange-text);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* The limits are what changes between plans, so their rows stand out */
.compare__group--limits tr:not(.compare__group-row) > * {
    background: rgb(250 243 225 / 0.6);
}

.compare__group--limits tr:not(.compare__group-row) > .is-featured {
    background: rgb(250 210 160 / 0.4);
}

.compare__group--limits td {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
}

.compare__check {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--orange-tint);
    color: var(--orange-text);
}

.compare__check svg {
    stroke-width: 3;
}

.compare__table .is-featured .compare__check {
    background: var(--orange);
    color: var(--white);
}

/* The feature rows fade in when the button below the table shows them */
@media (prefers-reduced-motion: no-preference) {
    .compare__group--features {
        animation: compare-reveal 0.4s ease both;
    }
}

@keyframes compare-reveal {
    from {
        opacity: 0;
    }
}

.compare__toggle-row {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.compare__chevron {
    transition: transform 0.2s;
}

.compare__toggle[aria-expanded="true"] .compare__chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .compare__chevron {
        transition: none;
    }
}

@media (max-width: 40rem) {
    .compare__feature-col {
        width: 30%;
    }

    .compare__table {
        font-size: 0.8125rem;
    }

    .compare__table thead > tr > * {
        padding: 0.75rem 0.125rem;
    }

    .compare__plan {
        font-size: 0.875rem;
        font-stretch: 80%;
    }

    .compare__price {
        font-size: 0.75rem;
    }

    .compare__per {
        display: none;
    }

    .compare__table tbody th,
    .compare__table tbody td {
        padding: 0.75rem 0.25rem;
    }

    .compare__table tbody th[scope="row"] {
        padding-left: 0.5rem;
    }

    .compare__group-note {
        display: table;
        margin: 0.375rem 0 0;
    }

    .compare__group--limits td {
        font-size: 0.875rem;
    }
}

/* FAQ - native details elements, which open smoothly where the browser can animate to auto height */

/* The comparison section's bottom padding already separates the two, and the footer brings its own top padding */
.faq {
    padding-top: 0;
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

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

@media (min-width: 56.01rem) {
    .faq__head {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
    }
}

.faq__head .section__lead {
    margin-top: 1rem;
}

.faq__head a {
    color: var(--ink);
    font-weight: 600;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.faq__list {
    border-top: 1px solid var(--sand);
}

.faq__item {
    border-bottom: 1px solid var(--sand);
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

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

.faq__item summary::after {
    content: "";
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cream)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E")
        center / 1rem no-repeat;
    transition:
        transform 0.25s,
        background-color 0.25s;
}

.faq__item summary:hover::after {
    background-color: var(--sand);
}

.faq__item[open] summary::after {
    transform: rotate(45deg);
}

.faq__item p {
    max-width: 40rem;
    padding-bottom: 1.25rem;
    color: var(--ink-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .faq__list {
        interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
        height: 0;
        overflow: hidden;
        transition:
            height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            content-visibility 0.3s allow-discrete;
    }

    .faq__item[open]::details-content {
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq__item summary::after {
        transition: none;
    }
}

@media (max-width: 56rem) {
    .faq__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Feature pages - every page under /features is built from the same blocks: hero with a product mock-up, the
   problem, benefits, steps, highlights, an optional AI callout, use cases, FAQ, related features and a closing CTA */

.feature-hero {
    position: relative;
    margin-top: calc(-1 * var(--header-height));
    padding-block: calc(var(--header-height) + clamp(3rem, 7vw, 5.5rem)) clamp(3rem, 6vw, 4.5rem);
    isolation: isolate;
}

/* The same cream glow and dots as the pricing intro */
.feature-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 70% at 50% 0%, rgb(250 243 225 / 0.9), transparent 75%),
        var(--texture-dots);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
    mask-image: linear-gradient(to bottom, #000 40%, transparent);
    pointer-events: none;
}

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

.feature-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--orange-text);
}

.feature-eyebrow a {
    color: var(--ink-muted);
    text-decoration: none;
}

.feature-eyebrow a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.feature-eyebrow span {
    color: var(--ink-muted);
}

.feature-hero__title {
    margin-top: 1rem;
    font-size: clamp(2.25rem, 2.8vw + 1rem, 3.75rem);
    font-weight: 750;
    font-stretch: 85%;
    line-height: 1;
    letter-spacing: -0.035em;
}

.feature-hero__lead {
    max-width: 36rem;
    margin-top: 1.25rem;
    font-size: 1.1875rem;
    color: var(--ink-muted);
}

.feature-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.feature-hero__visual {
    display: grid;
    place-items: center;
    min-width: 0;
}

.feature-hero__visual .panel-card {
    max-width: 30rem;
}

/* The overview page has no mock-up, so its copy is centered like the pricing intro */
.feature-hero--center {
    text-align: center;
}

.feature-hero--center .feature-eyebrow,
.feature-hero--center .feature-hero__actions {
    justify-content: center;
}

.feature-hero--center .feature-hero__title {
    max-width: 52rem;
    margin-inline: auto;
}

.feature-hero--center .feature-hero__lead {
    margin-inline: auto;
}

@media (max-width: 56rem) {
    .feature-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The problem - one large statement that the benefits below answer */
.feature-problem {
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
}

.feature-problem__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange-text);
}

.feature-problem__label::before {
    content: "";
    width: 2rem;
    border-top: 2px solid var(--orange);
}

.feature-problem__text {
    max-width: 52rem;
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.1vw + 1rem, 2rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

/* Benefits */
.feature-why {
    padding-top: 0;
}

.benefits,
.steps,
.highlights,
.use-cases,
.type-groups {
    display: grid;
    gap: 1.25rem;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    padding: 0;
    list-style: none;
}

.benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.benefit {
    padding: 1.75rem;
    border: 1px solid var(--sand);
    border-radius: 20px;
    background: var(--white);
}

.benefit__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--orange-tint);
    color: var(--orange-text);
}

.benefit__title {
    margin-top: 1.25rem;
    font-size: 1.25rem;
}

.benefit__text {
    margin-top: 0.5rem;
    color: var(--ink-muted);
}

/* How it works - numbered steps joined by the dashed line of the flow mock-up */
.feature-steps {
    background: var(--cream);
}

.steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    counter-reset: step;
}

.step {
    position: relative;
    counter-increment: step;
}

.step::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--orange);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 8px 20px -8px rgb(250 129 18 / 0.6);
}

.step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.375rem;
    right: -1.5rem;
    left: 3.75rem;
    border-top: 2px dashed var(--orange-border);
}

.step__title {
    margin-top: 1.25rem;
    font-size: 1.25rem;
}

.step__text {
    max-width: 22rem;
    margin-top: 0.5rem;
    color: var(--ink-muted);
}

/* Highlights */
.highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.5rem;
}

.highlight {
    padding-top: 1.25rem;
    border-top: 1px solid var(--sand);
}

.highlight__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.125rem;
}

.highlight__title::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
            center / 0.75rem no-repeat,
        var(--orange);
}

.highlight__text {
    margin-top: 0.5rem;
    color: var(--ink-muted);
}

.highlight code {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--cream);
    font-size: 0.9em;
}

/* Question types, in the same four groups as the app's question picker */
.type-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.type-group {
    padding: 1.5rem;
    border: 1px solid var(--sand);
    border-radius: 20px;
}

.type-group__title {
    font-size: 1.25rem;
}

.type-group__list {
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.type-group__name {
    font-weight: 700;
}

.type-group__text {
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

/* A second idea that belongs with the highlights, such as personal links next to email campaigns */
.feature-aside {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem 3rem;
    align-items: center;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--sand);
    border-radius: 20px;
    background: var(--cream);
}

.feature-aside__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange-text);
}

.feature-aside__title {
    margin-top: 0.5rem;
    font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
}

.feature-aside__text {
    font-size: 1.0625rem;
    color: var(--ink-muted);
}

/* AI callout - dark, like the AI section on the home page */
.feature-ai__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 1.5rem 4rem;
    align-items: center;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem);
    border-radius: 28px;
    background:
        radial-gradient(70% 90% at 100% 0%, rgb(250 129 18 / 0.3), transparent 70%),
        radial-gradient(60% 80% at 0% 120%, rgb(242 95 58 / 0.18), transparent 70%),
        linear-gradient(160deg, #2b2623 0%, var(--ink) 45%, #1b1a19 100%);
    color: rgb(250 243 225 / 0.92);
}

.feature-ai__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgb(250 243 225 / 0.08) 1px, transparent 1.6px) 0 0 / 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, #000, transparent);
    mask-image: radial-gradient(ellipse 80% 80% at 30% 40%, #000, transparent);
    pointer-events: none;
}

.feature-ai__card > * {
    position: relative;
}

.feature-ai__card :focus-visible {
    outline-color: var(--cream);
}

.feature-ai__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--orange);
}

.feature-ai__title {
    margin-top: 0.75rem;
    font-size: clamp(1.75rem, 1.8vw + 1rem, 2.5rem);
    color: var(--cream);
}

.feature-ai__text {
    font-size: 1.0625rem;
    color: rgb(250 243 225 / 0.72);
}

.feature-ai__text + .button {
    margin-top: 1.5rem;
}

/* Use cases */
.use-cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.use-case {
    padding: 1.75rem;
    border-radius: 20px;
    background: var(--paper);
}

.use-case__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.use-case__title + .use-case__text {
    margin-top: 0.5rem;
    color: var(--ink-muted);
}

.use-case__text strong {
    color: var(--ink);
}

/* Related features, and the cards on the overview page */
.feature-related {
    padding-top: 0;
}

.feature-related__title {
    font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
}

.feature-index__group + .feature-index__group {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.feature-index__title {
    font-size: clamp(1.625rem, 1.4vw + 1rem, 2.25rem);
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    padding: 0;
    list-style: none;
}

.feature-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 1rem;
    height: 100%;
    padding: 1.25rem 3rem 1.25rem 1.25rem;
    border: 1px solid var(--sand);
    border-radius: 20px;
    background: var(--white);
    text-decoration: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        transform 0.15s;
}

.feature-card:hover {
    border-color: var(--ink);
    box-shadow: 0 12px 28px -16px rgb(34 34 34 / 0.35);
    transform: translateY(-2px);
}

.feature-card__icon {
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: var(--orange-tint);
    color: var(--orange-text);
}

.feature-card__title {
    align-self: end;
    font-weight: 700;
}

.feature-card__text {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ink-muted);
}

.feature-card__arrow {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    color: var(--ink-muted);
    transition:
        color 0.15s,
        transform 0.15s;
}

.feature-card:hover .feature-card__arrow {
    color: var(--orange-text);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .feature-card:hover,
    .feature-card:hover .feature-card__arrow {
        transform: none;
    }
}

/* Closing CTA */
.cta-band {
    padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.cta-band__panel {
    padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--sand);
    border-radius: 28px;
    background:
        radial-gradient(60% 80% at 50% 50%, rgb(250 243 225 / 0.95), transparent 80%),
        var(--texture-dots),
        var(--cream);
    text-align: center;
}

.cta-band__title {
    font-size: clamp(2rem, 2.4vw + 1rem, 3rem);
    font-stretch: 85%;
    letter-spacing: -0.03em;
}

.cta-band__text {
    margin-top: 0.75rem;
    font-size: 1.125rem;
    color: var(--ink-muted);
}

.cta-band .button {
    margin-top: 2rem;
}

@media (max-width: 64rem) {
    .highlights,
    .type-groups,
    .feature-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 56rem) {
    .benefits,
    .steps,
    .use-cases,
    .feature-ai__card,
    .feature-aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .steps {
        gap: 2rem;
    }

    .step:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 40rem) {
    .highlights,
    .type-groups,
    .feature-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mock-up parts used only on the feature pages */
.mock-sub {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-muted);
}

.mock-label .mock-status {
    margin-left: auto;
}

.mock-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--cream);
    color: var(--orange-text);
    font-size: 0.6875rem;
    font-weight: 700;
}

.mock-status::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--orange);
}

.mock-draft {
    margin-top: 0.875rem;
    padding: 0.875rem;
    border: 1px solid var(--orange-border);
    border-radius: 12px;
    background: #fffaf4;
}

.mock-draft__title {
    font-size: 0.875rem;
    font-weight: 700;
}

.mock-draft .mock-list li {
    background: var(--white);
}

.mock-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mock-button {
    display: inline-block;
    flex: none;
    padding: 0.3125rem 0.875rem;
    border: 1px solid rgb(34 34 34 / 0.18);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mock-button--primary {
    border-color: transparent;
    background: var(--orange);
}

.mock-list--numbered li {
    justify-content: flex-start;
}

.mock-list--numbered .mock-tag {
    margin-left: auto;
}

.mock-list li.is-selected {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--orange-tint);
}

.mock-tree {
    display: grid;
    gap: 0.375rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.mock-tree__page {
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    background: var(--paper);
    font-weight: 600;
}

.mock-tree__page.is-open {
    padding-bottom: 0.625rem;
    background: var(--cream);
}

.mock-tree .mock-list {
    margin-top: 0.5rem;
    font-weight: 400;
}

.mock-tree .mock-list li {
    background: var(--white);
}

.mock-pipe {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--orange-tint);
    color: var(--orange-text);
    font-weight: 600;
}

.mock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.mock-field-label + .mock-chips {
    margin-top: 0;
}

.mock-chips span {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--sand);
    border-radius: 999px;
    background: var(--white);
    font-size: 0.75rem;
}

.mock-chips .is-on {
    border-color: var(--orange);
    background: #fff6ed;
    font-weight: 600;
}

.mock-points {
    flex: none;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--orange-tint);
    color: var(--orange-text);
    font-size: 0.6875rem;
    font-weight: 700;
}

.mock-points--minus {
    background: var(--paper);
    color: var(--ink-muted);
}

.mock-link-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.875rem;
    padding: 0.375rem 0.375rem 0.375rem 0.75rem;
    border: 1px solid var(--sand);
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.mock-share {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    margin-top: 1rem;
}

.mock-qr {
    width: 7.5rem;
    padding: 0.375rem;
    border: 1px solid var(--sand);
    border-radius: 12px;
    color: var(--ink);
}

.mock-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.875rem;
}

.mock-stats p {
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    background: var(--cream);
}

.mock-stats strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.1;
}

.mock-stats span {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink-muted);
}

.mock-suggestion .mock-button {
    margin-left: auto;
}

.mock-person {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.mock-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--sand);
    font-size: 0.75rem;
    font-weight: 700;
}

.mock-stars {
    margin-left: auto;
    color: var(--orange);
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

.mock-rows {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.mock-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.625rem;
}

.mock-rows li + li {
    border-top: 1px solid var(--sand);
}

.mock-rows .mock-sub {
    flex: none;
}

.mock-value,
.mock-action {
    font-weight: 600;
}

.mock-action {
    color: var(--orange-text);
}

.mock-toggle {
    position: relative;
    flex: none;
    width: 2.125rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #d9d4cb;
}

.mock-toggle::after {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 2px rgb(34 34 34 / 0.2);
}

.mock-toggle.is-on {
    background: var(--orange);
}

.mock-toggle.is-on::after {
    left: auto;
    right: 0.1875rem;
}

.mock-bars {
    display: grid;
    gap: 0.75rem;
    margin: 0.875rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.mock-bars li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3125rem 0.75rem;
}

.mock-bars li::after {
    content: "";
    grid-column: 1 / -1;
    height: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--orange) var(--value), var(--cream) var(--value));
}

@media (max-width: 30rem) {
    .mock-share {
        grid-template-columns: minmax(0, 1fr);
    }

    .mock-suggestion {
        flex-wrap: wrap;
    }
}

/* Solution pages - the feature page blocks plus pain points, a playbook of ready-to-run surveys and capability
   links. The pages under /solutions start from a team's or an industry's problem, not from the product */

/* The AI callout is followed by sections that bring no top padding of their own */
.feature-ai + .faq,
.feature-ai + .cta-band {
    padding-top: clamp(4rem, 8vw, 6.5rem);
}

/* Sound familiar? - typical situations, shown as speech bubbles */
.solution-pains {
    padding-top: clamp(2rem, 4vw, 3rem);
}

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

.pain__quote {
    position: relative;
    padding: 1.25rem 1.5rem;
    border-radius: 20px 20px 20px 6px;
    background: var(--paper);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.pain__text {
    margin-top: 1rem;
    padding-inline: 0.25rem;
    color: var(--ink-muted);
}

/* Playbook - a card per survey: when to send it, why, example questions and the features it uses */
.solution-playbook {
    background: var(--cream);
}

.playbook {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.play {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--sand);
    border-radius: 20px;
    background: var(--white);
}

.play__title {
    font-size: 1.375rem;
}

.play__when {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--orange-text);
}

.play__when svg {
    flex: none;
}

.play__goal {
    margin-top: 0.75rem;
    color: var(--ink-muted);
}

.play__label {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.play__questions {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.play__questions li {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--sand);
    border-radius: 10px;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* The features sit at the bottom of every card, so cards of different heights still line up */
.play__features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: auto 0 0;
    padding: 1.5rem 0 0;
    list-style: none;
}

.play__features a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--orange-tint);
    color: var(--orange-text);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s;
}

.play__features a:hover {
    background: rgb(250 129 18 / 0.22);
}

/* Built for... - capabilities, each with a link to its feature page */
.highlight__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
}

.highlight__link svg {
    color: var(--orange-text);
    transition: transform 0.15s;
}

.highlight__link:hover {
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.highlight__link:hover svg {
    transform: translateX(3px);
}

/* An example prompt inside the AI callout */
.feature-ai__prompt {
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(250 243 225 / 0.16);
    border-radius: 12px;
    background: rgb(250 243 225 / 0.06);
    color: var(--cream);
    font-size: 0.9375rem;
}

.feature-ai__prompt span {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange);
}

.feature-ai__prompt + .button {
    margin-top: 1.5rem;
}

@media (max-width: 56rem) {
    .pains,
    .playbook {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .highlight__link:hover svg {
        transform: none;
    }
}

/* Mock-up parts used only on the solution pages */
.mock-faces {
    display: flex;
    justify-content: space-between;
    gap: 0.375rem;
    margin-top: 1rem;
}

.mock-faces span {
    display: grid;
    flex: 1;
    place-items: center;
    padding: 0.5rem 0;
    border: 1px solid var(--sand);
    border-radius: 10px;
    color: var(--ink-muted);
}

.mock-faces .is-on {
    border-color: var(--orange);
    background: #fff6ed;
    color: var(--orange-text);
}

.mock-list--rank li {
    background: var(--white);
}

.mock-grip {
    flex: none;
    margin-left: auto;
    color: var(--ink-muted);
}

.mock-matrix {
    width: 100%;
    margin-top: 0.875rem;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.mock-matrix th {
    padding: 0.5rem 0.5rem 0.5rem 0;
    font-weight: 500;
    text-align: left;
}

.mock-matrix td {
    width: 2rem;
    padding: 0.5rem 0;
    text-align: center;
    color: var(--ink-muted);
}

.mock-matrix tbody tr + tr {
    border-top: 1px solid var(--sand);
}

.mock-matrix td span {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 1.5px solid #d9d4cb;
    border-radius: 50%;
    vertical-align: middle;
}

.mock-matrix td .is-on {
    border-color: var(--orange);
    background: radial-gradient(circle, var(--orange) 0 45%, transparent 50%);
}

.mock-rows--email li {
    justify-content: flex-start;
}

.mock-rows--email .mock-sub {
    width: 3.75rem;
}

.mock-email {
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: 12px;
    background: var(--cream);
    font-size: 0.875rem;
    text-align: center;
}

.mock-email .mock-buttons {
    justify-content: center;
}

.mock-stars--large {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    letter-spacing: 0.15em;
}

.mock-input {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sand);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.mock-input + .mock-field-label {
    margin-top: 1rem;
}

.mock-question + .mock-input {
    margin-top: 0.75rem;
}

.mock-share + .mock-faces {
    margin-top: 1.25rem;
}

/* Not found */

.not-found {
    padding-block: clamp(4rem, 12vw, 8rem);
}

.not-found__title {
    font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
}

.not-found__text {
    max-width: 32rem;
    margin-top: 1rem;
    font-size: 1.125rem;
    color: var(--ink-muted);
}

.not-found .button {
    margin-top: 2rem;
}

/* Footer */

.site-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 3rem;
    position: relative;
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.site-footer__tagline {
    max-width: 18rem;
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--ink-muted);
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}

.footer-col__title {
    font-size: 0.875rem;
    font-weight: 600;
}

.footer-col ul,
.footer-legal {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-col ul {
    display: grid;
    gap: 0.625rem;
    margin-top: 1rem;
    font-size: 0.875rem;
}

.footer-col a,
.footer-legal a {
    color: var(--ink-muted);
    text-decoration: none;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.footer-col a:hover,
.footer-legal a:hover {
    color: var(--ink);
    text-decoration-line: underline;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    padding-block: 1.5rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
}

.site-footer__top::before,
.site-footer__bottom::before {
    content: "";
    position: absolute;
    top: 0;
    right: var(--gutter);
    left: var(--gutter);
    height: 1px;
    background: var(--sand);
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

@media (max-width: 56rem) {
    .site-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }

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