/* Per-language landing page ("Create an audiobook in <language>").

   This page shares the upload card, language pills, voice picker and section
   rules with the other landing pages, so it loads landing.css first and this
   file only carries what is specific to it.

   Same border convention as the rest: `border-width` + `border-color` with no
   `border-style`, so these borders stay inert on marketing pages exactly as
   the Tailwind utilities did. The dropzone states `dashed` explicitly. */

/* ---------- page sections ---------- */

.lg-hero {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 6rem;
    padding-top: 1rem;
}

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

.lg-hero-title {
    margin-top: 1rem;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.025em;
}

@media (min-width: 640px) {
    .lg-hero-title { font-size: 44px; }
}

.lg-hero-sub {
    margin-left: auto;
    margin-right: auto;
    margin-top: .75rem;
    max-width: 36rem;
    font-size: 15px;
    color: rgb(82 82 91);
}

@media (min-width: 640px) {
    .lg-hero-sub { font-size: 16px; }
}

.lg-band {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: rgb(244 244 245);
    background-color: rgb(250 250 250);
}

.lg-band--top {
    border-top-width: 1px;
    border-color: rgb(244 244 245);
}

.lg-section-3xl {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
    padding: 5rem 1.5rem;
}

.lg-section-3xl--center { text-align: center; }

.lg-section-4xl {
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem;
    padding: 5rem 1.5rem;
}

.lg-section-5xl {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem;
    padding: 5rem 1.5rem;
}

@media (min-width: 768px) {
    .lg-section-5xl {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

/* ---------- headings ---------- */

.lg-h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.lg-h2--md32 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
}

@media (min-width: 768px) {
    .lg-h2--md32 { font-size: 32px; }
}

.lg-h2--md36 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.025em;
}

@media (min-width: 768px) {
    .lg-h2--md36 { font-size: 36px; }
}

.lg-h2--center { text-align: center; }

.lg-lead {
    margin-top: 1rem;
    font-size: 17px;
    line-height: 1.625;
    color: rgb(82 82 91);
}

.lg-note-2 {
    margin-top: .5rem;
    color: rgb(82 82 91);
}

.lg-note-3 {
    margin-top: .75rem;
    color: rgb(82 82 91);
}

/* ---------- upload card ---------- */

/* Same dropzone as the other landing pages, but spaced for this layout. */
.lg-drop {
    position: relative;
    margin-top: 2rem;
    display: flex;
    min-height: 320px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    border-width: 2px;
    border-style: dashed;
    border-color: rgb(212 212 216);
    background-color: rgb(250 250 250);
    padding: 1.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .2s;
}

.lg-drop:hover {
    border-color: rgb(161 161 170);
    background-color: hsla(240, 5%, 96%, .5);
}

@media (min-width: 640px) {
    .lg-drop { padding: 2rem; }
}

.lg-field {
    margin-top: 1.5rem;
    text-align: left;
}

.lg-convert {
    margin-top: 1.5rem;
    height: 56px;
    width: 100%;
    cursor: not-allowed;
    border-radius: 1rem;
    background-color: rgb(228 228 231);
    font-size: 16px;
    font-weight: 600;
    color: rgb(161 161 170);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.lg-convert--ready {
    cursor: pointer;
    background-color: rgb(0 0 0);
    color: rgb(255 255 255);
}

.lg-convert--ready:hover { background-color: rgb(39 39 42); }

/* ---------- feature / step trios ---------- */

.lg-trio {
    display: grid;
    gap: 3rem;
}

@media (min-width: 768px) {
    .lg-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lg-trio--tight {
    display: grid;
    gap: 3rem;
}

@media (min-width: 768px) {
    .lg-trio--tight {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

.lg-trio--spaced {
    margin-top: 3rem;
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .lg-trio--spaced {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
    }
}

.lg-icon-square {
    margin-bottom: 1.25rem;
    display: flex;
    height: 2.5rem;
    width: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    background-color: rgb(24 24 27);
    color: rgb(255 255 255);
}

.lg-step-num {
    display: flex;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(0 0 0);
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgb(255 255 255);
}

.lg-item-title {
    margin-top: 1rem;
    font-size: 18px;
    font-weight: 500;
}

.lg-subhead {
    font-size: 20px;
    font-weight: 600;
}

/* ---------- comparison table ---------- */

.lg-table {
    margin-top: 2.5rem;
    overflow: hidden;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
}

.lg-table-head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(250 250 250);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: rgb(113 113 122);
}

.lg-table-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom-width: 1px;
    border-color: rgb(244 244 245);
}

.lg-table-row--last {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lg-cell { padding: 1rem; }

.lg-cell-label {
    padding: 1rem;
    font-size: 15px;
    font-weight: 500;
}

.lg-cell-value {
    padding: 1rem;
    font-size: 15px;
}

.lg-cell-muted {
    padding: 1rem;
    font-size: 15px;
    color: rgb(113 113 122);
}

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

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

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

/* `faq-btn` / `faq-content` / `faq-item` are the accordion script's hooks. */
.faq-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    text-align: left;
}

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

.lg-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;
}

.faq-content {
    display: none;
    padding-bottom: 1.25rem;
    padding-right: 2rem;
    font-size: 15px;
    color: rgb(82 82 91);
}

.faq-content.lg-is-open { display: block; }