/* Marketing home page.

   Loaded from home.html's extra_css block, i.e. after site-chrome.css — the
   slot the Tailwind build used to hold.

   Section order: hero → distribution strip → sample carousel → how it works →
   features → voices → languages → cost comparison → credit packs → FAQ →
   closing CTA.

   Every section wraps its content in `.home-shell`, which is the single source
   of the page's 1140px measure. Section elements themselves only carry
   background and vertical rhythm, so a full-bleed band and a boxed one stay
   aligned to the same gutters.

   Headings: the hero's `.heading-serif` (EB Garamond) is the page's heading
   voice, so every section title carries it too. Card-level titles stay in
   Inter — the size contrast between an editorial section head and a 15px card
   label is what keeps the hierarchy readable. */

/* ---------- scoped preflight ----------
   app-shell.css establishes `border-style: solid` only for the app shell, so
   on marketing pages a `border-width` with no `border-style` paints nothing
   and bare <button>s keep the browser's own chrome. This page opts into the
   same floor for itself, which is why every border below can be written as
   width + colour and why the voice/language cards render as flat surfaces
   rather than as UA buttons. Zero specificity via :where(): a floor, not an
   override. */

:where(body.home-page) :where(*, ::before, ::after) {
    border-width: 0;
    border-style: solid;
    border-color: #e4e4e7;
}

:where(body.home-page) :where(button, [type='button']) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

/* The FAQ rows use their own chevron, so the native disclosure triangle goes. */
.home-faq-item > summary { list-style: none; }
.home-faq-item > summary::-webkit-details-marker { display: none; }

/* ---------- shared shell + section furniture ---------- */

.home-shell {
    margin-left: auto;
    margin-right: auto;
    max-width: 1140px;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .home-shell {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.home-section-head {
    max-width: 42rem;
    margin-bottom: 2.5rem;
}

.home-section-title {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
}

@media (min-width: 640px) {
    .home-section-title { font-size: 40px; }
}

.home-section-sub {
    margin-top: .75rem;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(113 113 122);
}

/* ---------- shared buttons ---------- */

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 9999px;
    padding: 1em 1.6em;
    font-size: 14px;
    font-weight: 500;
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-btn--dark {
    background-color: rgb(0 0 0);
    color: rgb(255 255 255);
}

.home-btn--dark:hover { background-color: rgb(39 39 42); }

.home-btn--ghost {
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    color: rgb(24 24 27);
}

.home-btn--ghost:hover {
    border-color: rgb(161 161 170);
    background-color: rgb(250 250 250);
}

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

.home-hero {
    margin-top: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    .home-hero {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.home-hero-inner {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 4rem;
}

.home-hero-title {
    font-size: 64px !important;
    line-height: .95;
    letter-spacing: -.03em;
}

@media (max-width: 768px) {
    .home-hero-title { font-size: 28px !important }
}

.home-hero-sub {
    margin-top: 1.5rem;
    max-width: 34rem;
    font-size: 17px;
    line-height: 1.6;
    color: rgb(82 82 91);
}

@media (max-width: 768px) {
    .home-hero-sub { margin-top: 1rem; font-size: 15px; }
}

.home-hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.home-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    background-color: rgb(0 0 0);
    font-size: 14px;
    font-weight: 500;
    color: rgb(255 255 255);
    padding: 1em 1.5em;
    transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}

.home-hero-cta:hover { background-color: rgb(39 39 42); }

.home-hero-cta2 {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    padding: 1em 1.5em;
    font-size: 14px;
    font-weight: 500;
    color: rgb(24 24 27);
    transition-property: border-color, background-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-hero-cta2:hover {
    border-color: rgb(161 161 170);
    background-color: rgb(250 250 250);
}

@media (max-width: 768px) {
    .home-hero-cta,
    .home-hero-cta2 { padding: .8em 1.2em; font-size: 12px; }
}

.home-hero-points {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    list-style: none;
}

.home-hero-point {
    position: relative;
    padding-left: 1.25rem;
    font-size: 13px;
    color: rgb(113 113 122);
}

.home-hero-point::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: rgb(16 185 129);
}

/* ---------- distribution strip ---------- */

.home-strip {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: rgb(244 244 245);
    background-color: rgb(250 250 250);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.home-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
}

.home-strip-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgb(161 161 170);
}

.home-strip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    list-style: none;
}

.home-strip-item {
    font-size: 14px;
    font-weight: 500;
    color: rgb(82 82 91);
}

/* ---------- examples carousel ---------- */

.home-gallery {
    padding-top: 4rem;
    padding-bottom: 4rem;
    scroll-margin-top: 5rem;
}

@media (min-width: 640px) {
    .home-gallery {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.home-gallery-stage {
    position: relative;
    max-width: 820px;
}

.home-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    transform: translate(0, -50%);
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    transition-property: color, background-color, border-color, box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-gallery-nav:hover {
    background-color: rgb(250 250 250);
    border-color: rgb(161 161 170);
}

.home-gallery-nav--prev { left: 0; }
.home-gallery-nav--next { right: 0; }

@media (min-width: 640px) {
    .home-gallery-nav {
        height: 2.5rem;
        width: 2.5rem;
    }
}

.home-gallery-frame {
    margin-left: 2.75rem;
    margin-right: 2.75rem;
    overflow: hidden;
    border-radius: 28px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
}

@media (min-width: 640px) {
    .home-gallery-frame {
        margin-left: 3.5rem;
        margin-right: 3.5rem;
    }
}

.home-gallery-track {
    display: flex;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .5s;
}

/* Also the querySelectorAll hook the carousel script iterates. */
.book-gallery-slide {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .book-gallery-slide {
        flex-direction: row;
        gap: 1.75rem;
        padding: 2.5rem;
        text-align: left;
    }
}

.home-gallery-cover {
    aspect-ratio: 2/3;
    width: 120px;
    flex-shrink: 0;
    border-radius: 1rem;
    -o-object-fit: cover;
    object-fit: cover;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}

@media (min-width: 640px) {
    .home-gallery-cover { width: 180px; }
}

.home-gallery-copy { min-width: 0; }

.home-gallery-tag {
    display: inline-block;
    margin-bottom: .625rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgb(161 161 170);
}

.home-gallery-book {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
}

@media (min-width: 640px) {
    .home-gallery-book { font-size: 38px; }
}

.home-gallery-author {
    margin-top: .375rem;
    font-size: 14px;
    color: rgb(113 113 122);
}

@media (min-width: 640px) {
    .home-gallery-author { font-size: 15px; }
}

/* Also the per-slide hook the script swaps play/pause markup into. */
.gallery-play-btn {
    margin-top: 1rem;
    display: inline-flex;
    height: 2.5rem;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    background-color: rgb(0 0 0);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 13px;
    font-weight: 500;
    color: rgb(255 255 255);
    transition-property: background-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.gallery-play-btn:hover { background-color: rgb(39 39 42); }

@media (min-width: 640px) {
    .gallery-play-btn {
        margin-top: 1.25rem;
        height: 2.75rem;
        font-size: 14px;
    }
}

.home-gallery-dots {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

/* Inactive is the default; the script flips the modifier as slides change. */
.gallery-dot {
    height: .625rem;
    width: .625rem;
    border-radius: 9999px;
    background-color: rgb(212 212 216);
    transition-property: background-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.gallery-dot--active { background-color: rgb(24 24 27); }

.home-gallery-caption {
    margin-top: 1rem;
    max-width: 820px;
    text-align: center;
    font-size: 12px;
    color: rgb(113 113 122);
}

/* ---------- how it works ---------- */

.home-steps {
    border-top-width: 1px;
    border-color: rgb(244 244 245);
    background-color: rgb(250 250 250);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .home-steps {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.home-steps-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
    list-style: none;
}

@media (min-width: 640px) {
    .home-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .home-steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-step {
    border-radius: 20px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: 1.75rem 1.5rem;
}

.home-step-num {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(24 24 27);
    font-size: 13px;
    font-weight: 600;
    color: rgb(255 255 255);
}

.home-step-title {
    margin-top: 1.125rem;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.home-step-text {
    margin-top: .625rem;
    font-size: 14px;
    line-height: 1.6;
    color: rgb(82 82 91);
}

.home-steps-cta {
    margin-top: 2.5rem;
}

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

.home-features {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .home-features {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem 2.5rem;
}

@media (min-width: 640px) {
    .home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .home-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-feature-icon {
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(250 250 250);
    color: rgb(24 24 27);
}

.home-feature-title {
    margin-top: 1.125rem;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.home-feature-text {
    margin-top: .625rem;
    font-size: 14px;
    line-height: 1.65;
    color: rgb(82 82 91);
}

/* ---------- voices ---------- */

.home-voices {
    border-top-width: 1px;
    border-color: rgb(244 244 245);
    background-color: rgb(250 250 250);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .home-voices {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.home-voice-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 640px) {
    .home-voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .home-voice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-voice {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .75rem;
    border-radius: 16px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: .875rem 1rem;
    transition-property: border-color, box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-voice:hover {
    border-color: rgb(161 161 170);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}

.home-voice.is-playing { border-color: rgb(24 24 27); }

.home-voice-avatar { flex-shrink: 0; }

.home-voice-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.home-voice-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-voice-meta {
    margin-top: .125rem;
    font-size: 12px;
    color: rgb(113 113 122);
}

.home-voice-play {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(244 244 245);
    color: rgb(24 24 27);
    transition-property: background-color, color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-voice:hover .home-voice-play,
.home-voice.is-playing .home-voice-play {
    background-color: rgb(24 24 27);
    color: rgb(255 255 255);
}

.home-voices-foot { margin-top: 2rem; }

/* ---------- languages ---------- */

.home-langs {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: rgb(244 244 245);
    background-color: rgb(255 255 255);
}

.home-langs-inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .home-langs-inner {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

/* Same book, four narrations. The covers already carry the title and the
   country flag, so the card is nothing but the artwork with a transport
   control floated over its centre. */
.home-multi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .home-multi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-multi {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    transition-property: box-shadow, transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-multi:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }

.home-multi-cover {
    display: block;
    aspect-ratio: 1/1;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Scrim behind the icon: the covers run from pale to saturated, and a plain
   white glyph disappears against the light ones. */
.home-multi-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    height: 3.25rem;
    width: 3.25rem;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(24, 24, 27, .45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: rgb(255 255 255);
    transition-property: background-color, transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-multi:hover .home-multi-play,
.home-multi.is-playing .home-multi-play {
    background-color: rgba(24, 24, 27, .7);
    transform: translate(-50%, -50%) scale(1.06);
}

/* Play until it plays, pause while it does — swapped in CSS so the shared
   sample player only has to toggle one class. */
.home-multi-icon--pause { display: none; }
.home-multi.is-playing .home-multi-icon--play { display: none; }
.home-multi.is-playing .home-multi-icon--pause { display: block; }

.home-langs-subhead {
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgb(161 161 170);
}

/* Three marquee rows rather than a 47-cell grid: the point is to show the
   breadth without spending half a screen on it.

   Each row's track holds its languages twice and travels exactly one copy's
   width, so the moment the animation restarts the second copy is sitting where
   the first began and the seam is invisible. That exactness is why the gap
   between chips is a margin on each chip and not `gap` on the track — a `gap`
   would add one extra space between the two copies that the 50% travel does
   not account for, and the loop would visibly jump. */

.home-lang-row {
    overflow: hidden;
    /* Chips dissolve at both ends instead of being guillotined by the edge. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.home-lang-row + .home-lang-row { margin-top: .625rem; }

.home-lang-marquee {
    display: flex;
    width: max-content;
    animation: home-lang-scroll 64s linear infinite;
}

/* The middle row runs the other way, so the three read as a weave rather than
   as one block sliding sideways. */
.home-lang-marquee--reverse { animation-direction: reverse; }

/* Hovering to read a language name shouldn't be a moving target. */
.home-lang-row:hover .home-lang-marquee,
.home-lang-row:focus-within .home-lang-marquee { animation-play-state: paused; }

@keyframes home-lang-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .home-lang-marquee { animation: none; }
    .home-lang-row { overflow-x: auto; }
}

.home-lang {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .625rem;
    margin-right: .625rem;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: .75rem 1rem;
    transition-property: border-color, box-shadow;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-lang:hover {
    border-color: rgb(161 161 170);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

/* Flag sprites come from css/flags.css, sized off the label next to them —
   the same vendored set the studio's language picker uses, because Chrome on
   Windows renders flag emoji as bare letter pairs. */
.home-lang-flag { font-size: 15px; }

.home-lang-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* ---------- cost comparison ---------- */

.home-compare {
    background-color: rgb(250 250 250);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .home-compare {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

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

@media (min-width: 900px) {
    .home-compare-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-compare-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: 2rem 1.75rem;
}

.home-compare-card--ours {
    border-width: 2px;
    border-color: rgb(24 24 27);
}

.home-compare-badge {
    position: absolute;
    top: -.875rem;
    left: 1.75rem;
    border-radius: 9999px;
    background-color: rgb(24 24 27);
    padding: .375rem .875rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .025em;
    color: rgb(255 255 255);
}

.home-compare-name {
    font-size: 14px;
    font-weight: 500;
    color: rgb(113 113 122);
}

/* Our own column names itself in full ink — the two it is measured against
   stay muted, so the eye lands on the price row that matters. */
.home-compare-card--ours .home-compare-name { color: rgb(24 24 27); }

.home-compare-price {
    margin-top: .5rem;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.home-compare-list {
    margin-top: 1.75rem;
    list-style: none;
}

.home-compare-item {
    position: relative;
    padding-left: 1.6rem;
    font-size: 14px;
    line-height: 1.5;
    color: rgb(82 82 91);
}

.home-compare-item + .home-compare-item { margin-top: .75rem; }

.home-compare-item::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.home-compare-item--no::before {
    content: '✕';
    color: rgb(212 212 216);
}

.home-compare-item--yes::before {
    content: '✓';
    color: rgb(16 185 129);
}

/* ---------- credit packs ---------- */

.home-pricing {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .home-pricing {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.home-pricing-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    align-items: flex-start;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .home-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .home-pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: 2rem;
    padding-top: 2.25rem;
}

.home-plan--featured {
    border-width: 2px;
    border-color: rgb(24 24 27);
}

.home-plan-badge {
    position: absolute;
    top: -.875rem;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
    border-radius: 9999px;
    background-color: rgb(24 24 27);
    padding: .375rem .875rem;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .025em;
    color: rgb(255 255 255);
}

.home-plan-label {
    font-size: 14px;
    font-weight: 500;
    color: rgb(113 113 122);
}

.home-plan-price {
    margin-top: .75rem;
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
}

.home-plan-minutes {
    margin-top: .625rem;
    font-size: 14px;
    color: rgb(113 113 122);
}

.home-plan-features {
    margin-top: 1.5rem;
    font-size: 13px;
    color: rgb(82 82 91);
    list-style: none;
}

/* Was Tailwind's `space-y-2.5`. */
.home-plan-features > :not([hidden]) ~ :not([hidden]) {
    margin-top: .625rem;
    margin-bottom: 0;
}

.home-plan-feature {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.home-plan-check {
    flex-shrink: 0;
    color: rgb(16 185 129);
}

.home-plan-cta {
    margin-top: 2rem;
    display: flex;
    height: 3rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(244 244 245);
    font-size: 14px;
    font-weight: 600;
    color: rgb(24 24 27);
    transition-property: background-color, color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.home-plan-cta:hover { background-color: rgb(228 228 231); }

.home-plan-cta--featured {
    background-color: rgb(24 24 27);
    color: rgb(255 255 255);
}

.home-plan-cta--featured:hover { background-color: rgb(0 0 0); }

.home-pricing-note {
    margin-top: 2rem;
    text-align: center;
    font-size: 14px;
    color: rgb(113 113 122);
}

.home-pricing-link {
    font-weight: 500;
    color: rgb(24 24 27);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.home-faq {
    border-top-width: 1px;
    border-color: rgb(244 244 245);
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .home-faq {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }
}

.home-faq-inner { max-width: 48rem; }

.home-faq-title {
    margin-bottom: 2.5rem;
    text-align: center;
}

.home-faq-list {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: rgb(228 228 231);
}

/* Was Tailwind's `divide-y divide-zinc-200`. */
.home-faq-list > :not([hidden]) ~ :not([hidden]) {
    border-top-width: 1px;
    border-bottom-width: 0;
    border-color: rgb(228 228 231);
}

.home-faq-item {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.home-faq-summary {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.home-faq-q {
    font-size: 16px;
    font-weight: 500;
}

.home-faq-chevron {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    color: rgb(161 161 170);
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* Was Tailwind's `group-open:rotate-180` — only while the details is open. */
.home-faq-item[open] .home-faq-chevron { transform: rotate(180deg); }

.home-faq-a {
    margin-top: .75rem;
    padding-right: 1.5rem;
    font-size: 14px;
    line-height: 1.625;
    color: rgb(82 82 91);
}

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

.home-final {
    padding-bottom: 5rem;
}

.home-final-card {
    border-radius: 32px;
    background-color: rgb(24 24 27);
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: rgb(255 255 255);
}

@media (min-width: 640px) {
    .home-final-card { padding: 5rem 3rem; }
}

.home-final-title {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
}

@media (min-width: 640px) {
    .home-final-title { font-size: 48px; }
}

.home-final-sub {
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-size: 16px;
    color: rgb(212 212 216);
}

.home-final .home-hero-cta {
    background-color: rgb(255 255 255);
    color: rgb(24 24 27);
}

.home-final .home-hero-cta:hover { background-color: rgb(228 228 231); }

.home-final-note {
    margin-top: 1.5rem;
    font-size: 13px;
    color: rgb(161 161 170);
}