/* Shared styles for the three "upload without login" landing pages:
   epub-to-audiobook, pdf-to-audiobook and text-to-audiobook. Their markup is
   the same page with different copy, so they share one stylesheet; the few
   things that genuinely differ (the sample-cover gradients, the comparison
   panel's glow tint) are modifiers rather than separate rules.

   Borders use `border-width` + `border-color` with no `border-style`, matching
   what Tailwind's `border-*` utilities did — these are marketing pages, so the
   scoped mini-preflight in app-shell.css does not reach them and those borders
   do not paint. The dropzone is the exception: it sets `border-style: dashed`
   explicitly, exactly as `border-dashed` did, so it does paint. */

.lp-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 1rem;
    padding-right: 1rem;
}

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

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

.lp-hero {
    margin-top: 5rem;
    padding-bottom: 3rem;
}

.lp-hero-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
    text-align: center;
}

.lp-hero-title {
    font-size: 42px;
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.02em;
}

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

@media (min-width: 768px) {
    .lp-hero-title { font-size: 64px; }
}

.lp-hero-sub {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.25rem;
    max-width: 600px;
    font-size: 17px;
    line-height: 1.625;
    color: rgb(82 82 91);
}

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

/* ---------- upload dropzone ---------- */

.lp-drop {
    position: relative;
    margin-top: 2.5rem;
    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;
}

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

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

.lp-file-input { display: none; }

/* The three dropzone states. The script swaps `lp-is-hidden` between them. */
.lp-state-initial {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-state-uploading {
    display: none;
    flex-direction: column;
    align-items: center;
}

.lp-state-uploading.lp-is-active { display: flex; }

.lp-state-success {
    display: none;
    width: 100%;
    max-width: 520px;
}

.lp-state-success.lp-is-active { display: block; }

.lp-drop-title {
    margin-top: 1.25rem;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.lp-drop-sub {
    margin-top: .25rem;
    font-size: 14px;
    color: rgb(113 113 122);
}

.lp-drop-btn {
    margin-top: 1.25rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: rgb(0 0 0);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 14px;
    font-weight: 500;
    color: rgb(255 255 255);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.lp-drop-btn:hover { background-color: rgb(39 39 42); }

.lp-drop-note {
    margin-top: 1rem;
    font-size: 12px;
    color: rgb(113 113 122);
}

/* No `border-style` on purpose. `border-[3px] border-zinc-200 border-t-black`
   only ever set widths and colours, and with preflight disabled and no
   mini-preflight reaching these marketing pages the ring computes to
   `border-style: none` / `border-width: 0` — i.e. it does not paint today.
   Adding `border-style: solid` here would make a previously invisible ring
   appear, so the widths/colours are kept inert exactly as they were. */
.lp-spinner {
    height: 3rem;
    width: 3rem;
    animation: lp-spin 1s linear infinite;
    border-radius: 9999px;
    border-width: 3px;
    border-color: rgb(228 228 231);
    border-top-color: rgb(0 0 0);
}

@keyframes lp-spin {
    to { transform: rotate(1turn); }
}

.lp-uploading-title {
    margin-top: 1rem;
    font-weight: 500;
}

.lp-uploading-sub {
    font-size: .875rem;
    line-height: 1.25rem;
    color: rgb(113 113 122);
}

/* ---------- parsed-file summary card ---------- */

.lp-file-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: 1rem;
    text-align: left;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.lp-file-cover {
    height: 88px;
    width: 4rem;
    flex-shrink: 0;
    border-radius: .5rem;
    background-color: rgb(244 244 245);
    -o-object-fit: cover;
    object-fit: cover;
}

.lp-file-body {
    min-width: 0;
    flex: 1 1 0%;
}

.lp-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.lp-file-tags {
    margin-top: .375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.lp-file-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 9999px;
    background-color: rgb(236 253 245);
    padding: .25rem .5rem;
    font-size: 11px;
    font-weight: 500;
    color: rgb(4 120 87);
}

.lp-file-meta {
    font-size: 12px;
    color: rgb(113 113 122);
}

.lp-file-hint {
    margin-top: .375rem;
    font-size: 12px;
    color: rgb(113 113 122);
}

.lp-file-actions {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.lp-file-action {
    border-radius: .5rem;
    padding: .375rem .75rem;
    font-size: 12px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.lp-file-action:hover { background-color: rgb(244 244 245); }

.lp-file-action--muted { color: rgb(113 113 122); }

.lp-error {
    margin-top: .5rem;
    display: none;
    text-align: left;
    font-size: 13px;
    color: rgb(220 38 38);
}

.lp-error.lp-is-active { display: block; }

.lp-terms {
    margin-top: .75rem;
    font-size: 12px;
    color: rgb(113 113 122);
}

.lp-terms-link { text-decoration-line: underline; }

.lp-terms-link:hover { color: rgb(0 0 0); }

/* ---------- language picker ---------- */

.lp-langs {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2.5rem;
    max-width: 42rem;
    text-align: left;
}

.lp-field-label {
    font-size: 13px;
    font-weight: 500;
    color: rgb(63 63 70);
}

.lp-lang-row {
    margin-top: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* `lang-pill` is also the querySelectorAll hook the picker script uses. */
.lang-pill {
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(212 212 216);
    background-color: rgb(255 255 255);
    padding: .5rem .875rem;
    font-size: 14px;
    color: rgb(63 63 70);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.lang-pill:hover { border-color: rgb(161 161 170); }

.lang-pill--active {
    border-color: rgb(0 0 0);
    background-color: rgb(0 0 0);
    color: rgb(255 255 255);
}

/* Selected pill keeps its solid look on hover. */
.lang-pill--active:hover { border-color: rgb(0 0 0); }

.lp-lang-more-wrap { position: relative; }

.lp-lang-more {
    border-radius: 9999px;
    border-width: 1px;
    border-color: rgb(212 212 216);
    background-color: rgb(255 255 255);
    padding: .5rem .875rem;
    font-size: 14px;
    color: rgb(113 113 122);
}

.lp-lang-more:hover { border-color: rgb(161 161 170); }

.lp-lang-menu {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 10;
    margin-top: .5rem;
    display: none;
    width: 300px;
    transform: translate(-50%, 0);
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: .75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.lp-lang-menu.lp-is-active { display: block; }

.lp-lang-menu-grid {
    display: grid;
    max-height: 240px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    overflow: auto;
    font-size: 13px;
}

/* Menu entries carry `lang-pill` for the picker script, but they are list rows
   rather than pills, so the pill look is unset rather than restyled. They had
   no border, no transition and an inherited size before, and still do. */
.lp-lang-menu .lang-pill {
    border-width: 0;
    border-color: currentColor;
    border-radius: .5rem;
    background-color: transparent;
    padding: .375rem .5rem;
    text-align: left;
    font-size: inherit;
    color: inherit;
    transition-property: all;
    transition-duration: 0s;
    transition-timing-function: ease;
}

.lp-lang-menu .lang-pill:hover { background-color: rgb(250 250 250); }

/* ---------- voice picker ---------- */

.lp-voices {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem;
    max-width: 42rem;
    text-align: left;
}

.lp-voices-head {
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lp-voices-note {
    font-size: 11px;
    color: rgb(113 113 122);
}

.lp-voices-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

@media (min-width: 640px) {
    .lp-voices-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* `voice-btn` is also the querySelectorAll hook the voice script uses. */
.voice-btn {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: .5rem;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgb(228 228 231);
    background-color: rgb(255 255 255);
    padding: .75rem;
    text-align: left;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.voice-btn:hover { border-color: rgb(212 212 216); }

.voice-btn--active {
    border-width: 2px;
    border-color: rgb(0 0 0);
    background-color: rgb(250 250 250);
}

.voice-btn--active:hover { border-color: rgb(0 0 0); }

.lp-voice-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
}

.voice-preview-btn {
    display: grid;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    place-items: center;
    border-radius: 9999px;
    background-color: rgb(228 228 231);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.voice-preview-btn:hover { background-color: rgb(212 212 216); }

/* ---------- convert CTA ---------- */

.lp-convert {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    height: 56px;
    width: 100%;
    max-width: 42rem;
    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;
}

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

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

/* ---------- sample gallery ---------- */

.lp-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.lp-section--top-rule {
    border-top-width: 1px;
    border-color: rgb(244 244 245);
}

.lp-section--y-rule {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-color: rgb(244 244 245);
}

.lp-gallery-head {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lp-gallery-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.lp-gallery-count {
    border-radius: 9999px;
    background-color: rgb(244 244 245);
    padding: .25rem .625rem;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 500;
    color: rgb(82 82 91);
}

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

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

@media (min-width: 1024px) {
    .lp-gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.lp-cover {
    position: relative;
    display: flex;
    aspect-ratio: 3/4;
    cursor: pointer;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1rem;
}

.lp-cover--violet  { background-image: linear-gradient(to bottom right, #7c3aed, #4338ca); }
.lp-cover--amber   { background-image: linear-gradient(to bottom right, #f59e0b, #ea580c); }
.lp-cover--emerald { background-image: linear-gradient(to bottom right, #059669, #0f766e); }
.lp-cover--rose    { background-image: linear-gradient(to bottom right, #f43f5e, #db2777); }
.lp-cover--sky     { background-image: linear-gradient(to bottom right, #0284c7, #1d4ed8); }
.lp-cover--slate   { background-image: linear-gradient(to bottom right, #3f3f46, #18181b); }
.lp-cover--red     { background-image: linear-gradient(to bottom right, #dc2626, #be123c); }

.lp-cover-sheen { position: absolute; inset: 0; }

.lp-cover-badge {
    position: absolute;
    right: .75rem;
    top: .75rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, .7);
    padding: .25rem .5rem;
    font-size: 10px;
    font-weight: 500;
    color: rgb(255 255 255);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.lp-cover-body {
    position: relative;
    z-index: 10;
}

.lp-cover-title {
    font-weight: 600;
    line-height: 1.25;
    color: rgb(255 255 255);
}

.lp-cover-author {
    margin-top: .125rem;
    font-size: 11px;
    color: hsla(0, 0%, 100%, .7);
}

.lp-wave {
    margin-top: .75rem;
    display: flex;
    height: 1.5rem;
    align-items: flex-end;
    gap: 2px;
}

.lp-wave-bar {
    width: 3px;
    border-radius: 9999px;
    background-color: hsla(0, 0%, 100%, .8);
}

.lp-wave-bar--dim { background-color: hsla(0, 0%, 100%, .6); }

/* ---------- feature trio ---------- */

.lp-features {
    display: grid;
    gap: 2rem;
}

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

.lp-feature-icon {
    margin-bottom: 1rem;
    display: grid;
    height: 2.75rem;
    width: 2.75rem;
    place-items: center;
    border-radius: 1rem;
    background-color: rgb(24 24 27);
    color: rgb(255 255 255);
}

.lp-feature-title {
    font-size: 18px;
    font-weight: 600;
}

.lp-feature-text {
    margin-top: .5rem;
    font-size: 15px;
    line-height: 1.625;
    color: rgb(82 82 91);
}

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

.lp-steps-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
}

@media (min-width: 768px) {
    .lp-steps-title { font-size: 32px; }
}

.lp-steps {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    display: grid;
    max-width: 56rem;
    gap: 2rem;
}

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

.lp-step { text-align: center; }

.lp-step-num {
    margin-left: auto;
    margin-right: auto;
    display: grid;
    height: 3rem;
    width: 3rem;
    place-items: center;
    border-radius: 1rem;
    background-color: rgb(0 0 0);
    font-size: 18px;
    font-weight: 700;
    color: rgb(255 255 255);
}

.lp-step-title {
    margin-top: 1rem;
    font-weight: 600;
}

.lp-step-text {
    margin-top: .375rem;
    font-size: 14px;
    color: rgb(82 82 91);
}

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

.lp-compare {
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem;
}

.lp-compare-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.lp-compare-grid {
    margin-top: 2.5rem;
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .lp-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lp-compare-card {
    border-radius: 24px;
    border-width: 1px;
    border-color: rgb(228 228 231);
    padding: 1.5rem;
}

.lp-compare-card--ours {
    position: relative;
    overflow: hidden;
    border-width: 2px;
    border-color: rgb(0 0 0);
    background-color: rgb(250 250 250);
}

.lp-compare-glow {
    position: absolute;
    right: -2.5rem;
    top: -2.5rem;
    height: 8rem;
    width: 8rem;
    border-radius: 9999px;
    filter: blur(64px);
}

.lp-compare-glow--violet  { background-color: rgba(139, 92, 246, .1); }
.lp-compare-glow--red     { background-color: rgba(239, 68, 68, .1); }
.lp-compare-glow--emerald { background-color: rgba(16, 185, 129, .1); }

.lp-compare-head {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lp-compare-icon {
    display: grid;
    height: 2rem;
    width: 2rem;
    place-items: center;
    border-radius: 9999px;
    background-color: rgb(244 244 245);
}

.lp-compare-icon--ours {
    background-color: rgb(0 0 0);
    color: rgb(255 255 255);
}

.lp-compare-name { font-weight: 600; }

.lp-compare-list {
    font-size: 14px;
    color: rgb(82 82 91);
}

.lp-compare-list--ours {
    font-size: 14px;
    color: inherit;
}

/* Was Tailwind's `space-y-3`. */
.lp-compare-list > :not([hidden]) ~ :not([hidden]),
.lp-compare-list--ours > :not([hidden]) ~ :not([hidden]) {
    margin-top: .75rem;
    margin-bottom: 0;
}

.lp-compare-item {
    display: flex;
    gap: .5rem;
}

.lp-compare-mark { color: rgb(161 161 170); }

.lp-compare-mark--ours { color: rgb(5 150 105); }

/* ---------- SEO prose + FAQ ---------- */

.lp-narrow {
    margin-left: auto;
    margin-right: auto;
    max-width: 48rem;
}

.lp-prose-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
}

.lp-prose {
    margin-top: 1rem;
    font-size: 15px;
    line-height: 1.625;
    color: rgb(82 82 91);
}

/* Was Tailwind's `space-y-4`. */
.lp-prose > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem;
    margin-bottom: 0;
}

.lp-faq-title {
    margin-bottom: 2rem;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
}

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

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

.lp-faq-summary {
    display: flex;
    cursor: pointer;
    list-style-type: none;
    align-items: center;
    justify-content: space-between;
}

.lp-faq-q { font-weight: 500; }

.lp-faq-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: rgb(161 161 170);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* Was `group-open:rotate-45` — the plus turns into a cross only when open. */
.lp-faq-item[open] .lp-faq-icon { transform: rotate(45deg); }

.lp-faq-a {
    margin-top: .75rem;
    font-size: 14px;
    color: rgb(82 82 91);
}

/* ---------- state ---------- */

.lp-is-hidden { display: none; }