/* Google Sans, served from this site (SIL Open Font License, see /fonts/google-sans/OFL.txt). One variable
   file per script covers weights 400-700; the browser downloads a file only when the page uses its characters. */
/* latin */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/google-sans/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;
}

/* latin-ext */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/google-sans/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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* vietnamese */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/google-sans/vietnamese.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* cyrillic */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/google-sans/cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* cyrillic-ext */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/google-sans/cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* greek */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/google-sans/greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* thai */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/google-sans/thai.woff2") format("woff2");
    unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

/* Theme tokens. Light is the default; dark applies when the visitor chooses it (data-theme on <html>)
   or, with no saved choice, when the operating system prefers it. */
:root {
    --bg: #fff;
    --surface: #fff;
    --surface-tint: #faf9ff;
    --ink: #161622;
    --muted: #625f70;
    --faint: #8b8997;
    --text-soft: #454451;
    --text-body: #585765;
    --line: #e7e6ef;
    --field-line: #d8d6e4;
    --mist: #f7f6fb;
    --purple: #6c3df4;
    --purple-dark: #5527db;
    --chip: #f0ecff;
    --chip-hover: #e5deff;
    --chip-ink: #5a35d6;
    --chip-ink-strong: #4321b5;
    --badge-bg: #f5f2ff;
    --badge-line: #ded9ff;
    --nav-bg: rgba(255,255,255,.94);
    --nav-ink: #555463;
    --shadow: rgba(34,24,72,.11);
    --dot-ring: #d8f7e8;
    --error: #c13655;
    --success-bg: #e7f8ef;
    --success-ink: #155c3d;
    --danger-bg: #fff0f2;
    --danger-ink: #9b2640;
    --info-bg: #edf3ff;
    --info-ink: #314d8a;
    --hero-bg: radial-gradient(circle at 92% 18%, #e8ddff 0, transparent 26%), radial-gradient(circle at 2% 96%, #ede8ff 0, transparent 28%), linear-gradient(135deg, #fbfaff, #f5f2ff);
    color-scheme: light;
    --font-sans: "Google Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    background: var(--bg);
    font-family: var(--font-sans);
}

.container {
    width: min(100% - 2rem, 1180px);
    margin: 0 auto;
}

.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
}

    .row > [class*="col-"] {
        grid-column: span 12;
        min-width: 0;
    }

.g-3 {
    gap: 1rem;
}

.g-4 {
    gap: 1.5rem;
}

.d-none {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.form-control, .form-select {
    width: 100%;
    min-height: 42px;
    padding: .65rem .75rem;
    color: var(--ink);
    border: 1px solid var(--field-line);
    border-radius: 8px;
    background: var(--surface);
    font: inherit;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.alert-success {
    color: var(--success-ink);
    background: var(--success-bg);
}

.alert-danger {
    color: var(--danger-ink);
    background: var(--danger-bg);
}

.alert-info {
    color: var(--info-ink);
    background: var(--info-bg);
}

.site-container {
    max-width: 1180px;
}

.site-nav {
    min-height: 76px;
    border-bottom: 1px solid var(--line);
    background: var(--nav-bg);
}

.nav-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink) !important;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.045em;
    text-decoration: none;
}

.brand-mark {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: none;
}

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

.nav-link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    color: var(--nav-ink) !important;
    font-size: .9rem;
    font-weight: 650;
    text-decoration: none;
}

    .nav-link:hover {
        color: var(--purple) !important;
    }

.nav-badge {
    display: inline-block;
    padding: .35rem .62rem;
    border: 1px solid var(--badge-line);
    border-radius: 99px;
    color: var(--purple-dark);
    background: var(--badge-bg);
    font-size: .73rem;
    font-weight: 700;
}

.language-form select {
    min-height: 32px;
    max-width: 145px;
    padding: .3rem .45rem;
    border: 1px solid var(--badge-line);
    border-radius: 8px;
    color: var(--nav-ink);
    background: var(--surface-tint);
    font: inherit;
    font-size: .78rem;
}

.page-shell {
    flex: 1;
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 4.75rem 5.5% 5rem;
    border-radius: 28px;
    margin-top: 1rem;
    background: var(--hero-bg);
}

.eyebrow, .card-kicker {
    margin: 0 0 .8rem;
    color: var(--purple);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

    .eyebrow span {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: .45rem;
        border-radius: 50%;
        background: #21c77a;
        box-shadow: 0 0 0 4px var(--dot-ring);
    }

.hero h1 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(3.1rem, 4.7vw, 4.8rem);
    font-weight: 820;
    letter-spacing: -.075em;
    line-height: .95;
}

    .hero h1 em {
        color: var(--purple);
        font-style: normal;
    }

.hero-copy {
    max-width: 560px;
    margin: 1.55rem 0;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.65;
}

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.3rem;
    color: var(--text-soft);
    font-size: .83rem;
    font-weight: 650;
}

.hero-orb {
    display: grid;
    width: 244px;
    height: 244px;
    margin-left: auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #6c3df4, #b9a5ff, #fff, #6c3df4);
    box-shadow: 0 26px 70px rgba(87,44,206,.18);
}

.hero-orb-inner {
    display: flex;
    width: 202px;
    height: 202px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 9px solid rgba(255,255,255,.7);
    border-radius: 50%;
    color: #fff;
    background: #171526;
}

    .hero-orb-inner span {
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .16em;
    }

    .hero-orb-inner strong {
        font-size: 3.5rem;
        letter-spacing: -.1em;
        line-height: 1;
    }

    .hero-orb-inner small {
        margin-top: .5rem;
        color: #bdb8d8;
        font-size: .55rem;
        letter-spacing: .12em;
    }

.download-card {
    position: relative;
    z-index: 1;
    max-width: 840px;
    margin: -1.5rem auto 0;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 24px 60px var(--shadow);
}

.card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

    .card-heading h2 {
        margin: 0;
        font-size: 1.28rem;
        font-weight: 780;
        letter-spacing: -.035em;
    }

.secure-label {
    padding: .38rem .6rem;
    border-radius: 8px;
    color: var(--chip-ink);
    background: var(--chip);
    font-size: .72rem;
    font-weight: 700;
}

.link-field {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .45rem .45rem 1rem;
    border: 1px solid var(--field-line);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .2s, box-shadow .2s;
}

    .link-field:focus-within {
        border-color: var(--purple);
        box-shadow: 0 0 0 4px rgba(108,61,244,.1);
    }

.link-icon {
    color: var(--purple);
    font-size: 1.2rem;
}

.link-field .form-control {
    min-width: 0;
    border: 0;
    box-shadow: none !important;
    font-size: .96rem;
}

.btn {
    border-radius: 9px;
    font-weight: 750;
}

.btn-primary {
    color: #fff;
    border-color: var(--purple);
    background: var(--purple);
}

    .btn-primary:hover, .btn-primary:focus {
        color: #fff;
        border-color: var(--purple-dark);
        background: var(--purple-dark);
    }

.link-field .btn {
    flex: 0 0 auto;
    padding: .75rem 1rem;
}

.input-help {
    margin-top: .5rem;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.5;
}

    .input-help a {
        color: var(--purple);
        font-weight: 700;
        text-decoration: none;
    }

        .input-help a:hover {
            text-decoration: underline;
        }

.form-text {
    min-height: 1.3rem;
    margin-top: .5rem;
    color: var(--error);
    font-weight: 600;
}

/* The preview: a 9:16 poster like TikTok's player on the left, the post and its download choices on the right. */
.video-info {
    display: grid;
    grid-template-columns: 132px minmax(0,1fr);
    gap: 1.6rem;
    margin-top: 1.55rem;
    padding-top: 1.55rem;
    border-top: 1px solid var(--line);
}

.video-poster {
    position: relative;
    align-self: start;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 14px;
    background: var(--mist);
}

.video-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.poster-badge {
    position: absolute;
    left: .5rem;
    padding: .18rem .45rem;
    border-radius: 6px;
    color: #fff;
    background: rgba(22,22,34,.74);
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.poster-kind {
    top: .5rem;
}

.poster-duration {
    bottom: .5rem;
}

.video-details {
    min-width: 0;
}

.video-creator {
    margin: 0;
    color: var(--purple);
    font-size: .85rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* dir="auto" lets right-to-left captions (Arabic, Hebrew, Urdu) read and align correctly. */
.preview-title {
    display: -webkit-box;
    margin: .3rem 0 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 760;
    letter-spacing: -.02em;
    line-height: 1.38;
    text-align: start;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* "Save as" and "Quality" share one label column so the controls start on the same line. */
.choice-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0,22rem);
    align-items: center;
    gap: .9rem;
    margin-top: .8rem;
}

.preview-title + .choice-row, .preview-title + .d-none + .choice-row {
    margin-top: 1.5rem;
}

.choice-label {
    color: var(--text-soft);
    font-size: .85rem;
    font-weight: 700;
}

/* Video and MP3 are two equal buttons as wide as the Quality menu; the chosen one takes the brand tint. */
.segmented {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: .5rem;
}

.segment {
    position: relative;
    margin: 0;
    cursor: pointer;
}

    .segment input {
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .segment span {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        min-height: 42px;
        padding: .45rem .9rem;
        border: 1px solid var(--field-line);
        border-radius: 8px;
        color: var(--text-soft);
        background: var(--surface);
        font-size: .9rem;
        font-weight: 700;
        white-space: nowrap;
        transition: border-color .15s, background-color .15s, color .15s;
    }

    .segment .icon {
        flex: none;
        width: 18px;
        height: 18px;
    }

    .segment:hover span {
        border-color: var(--purple);
    }

    .segment input:checked + span {
        border-color: var(--purple);
        color: var(--chip-ink-strong);
        background: var(--chip);
        box-shadow: inset 0 0 0 1px var(--purple);
    }

    .segment input:focus-visible + span {
        outline: 2px solid var(--purple);
        outline-offset: 2px;
    }

.form-select {
    min-height: 42px;
    border-color: var(--field-line);
    font-size: .87rem;
}

    .form-select:focus {
        border-color: var(--purple);
        box-shadow: 0 0 0 4px rgba(108,61,244,.1);
    }

/* Photo posts: the one thing to know before downloading, so it gets a tinted notice of its own. */
.audio-only-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: 1.5rem 0 0;
    padding: .85rem 1rem;
    border: 1px solid var(--badge-line);
    border-radius: 10px;
    color: var(--text-soft);
    background: var(--badge-bg);
    font-size: .92rem;
    line-height: 1.5;
}

    .audio-only-note .icon {
        flex: none;
        width: 20px;
        height: 20px;
        margin-top: .1rem;
        color: var(--purple);
    }

    .audio-only-note strong {
        color: var(--ink);
    }

.download-button {
    width: 100%;
    margin-top: 1.5rem;
    padding: .72rem 1rem;
}

.alert {
    margin: 1rem 0 0;
    padding: .7rem .9rem;
    border: 0;
    border-radius: 10px;
    font-size: .9rem;
}

.privacy-note {
    margin: 1.35rem 0 0;
    color: var(--faint);
    font-size: .74rem;
}

.how-it-works, .faq {
    padding: 5.5rem 0 0;
}

.faq {
    padding-bottom: 5.25rem;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.45rem;
}

    .section-heading h2 {
        max-width: 500px;
        margin: 0;
        font-size: clamp(1.65rem,3vw,2.2rem);
        font-weight: 800;
        letter-spacing: -.055em;
    }

    .section-heading > p {
        max-width: 280px;
        margin: 0;
        color: var(--muted);
        font-size: .9rem;
        line-height: 1.5;
    }

.how-it-works article, .faq article {
    height: 100%;
    padding: 1.45rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

    .how-it-works article span {
        display: inline-grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 8px;
        color: var(--purple);
        background: var(--chip);
        font-size: .72rem;
        font-weight: 800;
    }

.how-it-works h3, .faq h3 {
    margin: 1.1rem 0 .42rem;
    font-size: 1rem;
    font-weight: 780;
}

.faq h3 {
    margin-top: 0;
}

.how-it-works p, .faq p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.55;
}

.usage-notice {
    margin-top: 5.5rem;
}

    .usage-notice > div > div {
        display: flex;
        gap: 1rem;
        margin: auto;
        padding: 1.15rem 1.3rem;
        border: 1px solid var(--badge-line);
        border-radius: 14px;
        background: var(--surface-tint);
    }

.notice-icon {
    display: grid;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--purple);
    background: var(--chip);
    font-size: .78rem;
    font-weight: 800;
}

.usage-notice h2 {
    margin: 0 0 .25rem;
    font-size: .9rem;
    font-weight: 780;
}

.usage-notice p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.55;
}

.btn-paste {
    border: 0;
    color: var(--chip-ink);
    background: var(--chip);
    font-size: .8rem;
}

    .btn-paste:hover {
        color: var(--chip-ink-strong);
        background: var(--chip-hover);
    }

.feature-section, .device-guides {
    padding: 5.5rem 0 0;
}

.feature-grid article {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.feature-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid var(--badge-line);
    border-radius: 13px;
    color: var(--chip-ink);
    background: var(--chip);
}

    .feature-icon .icon {
        display: block;
        width: 26px;
        height: 26px;
    }

.feature-grid h3 {
    margin: 1rem 0 .35rem;
    font-size: 1rem;
    font-weight: 780;
}

.feature-grid p {
    margin: 0;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.55;
}

.guide-card {
    display: grid;
    grid-template-columns: 120px minmax(0,1fr);
    gap: 1.35rem;
    align-items: center;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--surface), var(--surface-tint));
}

    .guide-card h3 {
        margin: .25rem 0 .5rem;
        font-size: 1.1rem;
        font-weight: 790;
    }

    .guide-card p:not(.guide-label) {
        margin: 0 0 .75rem;
        color: var(--muted);
        font-size: .85rem;
        line-height: 1.55;
    }

    .guide-card a, .guide-page a:not(.btn) {
        color: var(--purple);
        font-size: .84rem;
        font-weight: 760;
        text-decoration: none;
    }

.guide-label {
    margin: 0;
    color: var(--purple);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.guide-art {
    position: relative;
    height: 118px;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(145deg, #6c3df4, #b39cff);
}

.phone-art::before {
    position: absolute;
    inset: 13px 33px;
    border: 5px solid #fff;
    border-radius: 15px;
    content: "";
}

.phone-art span {
    position: absolute;
    width: 26px;
    height: 5px;
    left: 47px;
    border-radius: 99px;
    background: var(--surface);
}

    .phone-art span:nth-child(1) {
        top: 34px;
    }

    .phone-art span:nth-child(2) {
        top: 51px;
        width: 38px;
    }

    .phone-art span:nth-child(3) {
        top: 68px;
        width: 31px;
    }

.desktop-art::before {
    position: absolute;
    top: 26px;
    right: 15px;
    left: 15px;
    height: 61px;
    border: 5px solid #fff;
    border-radius: 7px;
    content: "";
}

.desktop-art::after {
    position: absolute;
    right: 34px;
    bottom: 19px;
    left: 34px;
    height: 5px;
    border-radius: 99px;
    background: var(--surface);
    content: "";
}

.faq-list {
    margin: 0;
}

    .faq-list details {
        margin-bottom: .7rem;
        padding: 0 1.15rem;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--surface);
    }

    .faq-list summary {
        display: flex;
        align-items: center;
        min-height: 58px;
        cursor: pointer;
        font-size: .91rem;
        font-weight: 720;
        list-style: none;
    }

        .faq-list summary::after {
            margin-left: auto;
            color: var(--purple);
            content: "+";
            font-size: 1.2rem;
        }

    .faq-list details[open] summary::after {
        content: "−";
    }

    .faq-list p {
        max-width: 700px;
        margin: 0 0 1rem;
        color: var(--muted);
        font-size: .86rem;
        line-height: 1.6;
    }

.legal-page, .guide-page {
    max-width: 800px;
    padding: 5rem 0;
}

    .legal-page h1, .guide-page h1 {
        margin: 0 0 1rem;
        font-size: clamp(2.25rem, 5vw, 3.6rem);
        font-weight: 820;
        letter-spacing: -.065em;
    }

    .legal-page .lead, .guide-page .lead {
        max-width: 650px;
        color: var(--muted);
        font-size: 1.08rem;
        line-height: 1.7;
    }

    .legal-page h2, .guide-page h2 {
        margin: 2.3rem 0 .7rem;
        font-size: 1.25rem;
        font-weight: 800;
    }

    .legal-page p, .guide-page p, .guide-page li {
        color: var(--text-body);
        line-height: 1.7;
    }

    .guide-page .btn {
        margin-top: .65rem;
        padding: .75rem 1rem;
    }

    .guide-page aside {
        margin-top: 2rem;
        padding: 1rem 1.2rem;
        border-radius: 10px;
        color: var(--chip-ink);
        background: var(--badge-bg);
        font-size: .88rem;
    }

.button-spinner {
    display: none;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin .65s linear infinite;
}

.btn.is-loading .button-spinner {
    display: inline-block;
}

.btn.is-loading .button-icon {
    display: none;
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (min-width: 768px) {
    .row > .col-md-4 {
        grid-column: span 4;
    }

    .row > .col-md-6 {
        grid-column: span 6;
    }
}

@media (min-width: 992px) {
    .row > .col-lg-5 {
        grid-column: span 5;
    }

    .row > .col-lg-7 {
        grid-column: span 7;
    }

    .row > .col-lg-8 {
        grid-column: span 8;
    }

    .row > .col-lg-9 {
        grid-column: span 9;
    }

    .row > .col-lg-10 {
        grid-column: 1 / -1;
    }

    .row > .col-xl-7 {
        grid-column: 3 / span 8;
    }

    .align-items-center {
        align-items: center;
    }

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

@media (max-width: 767px) {
    .site-nav {
        min-height: 0;
    }

    .nav-inner {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
        padding-top: .7rem;
        padding-bottom: .7rem;
    }

    .brand {
        align-self: flex-start;
    }

    .site-links, .site-links ul {
        width: 100%;
    }

        .site-links ul {
            flex-wrap: wrap;
            gap: .35rem .75rem;
        }

    .nav-link {
        min-height: 28px;
        font-size: .82rem;
    }

    .language-form {
        margin-left: auto;
    }

        .language-form select {
            max-width: 100%;
        }

    .hero {
        padding: 4rem 1.3rem 4.4rem;
        border-radius: 22px;
    }

    .download-card {
        margin-top: -1.6rem;
        padding: 1.3rem;
    }

    .link-field {
        flex-wrap: wrap;
        padding: .6rem;
    }

        /* Link box and Paste share the first row; Preview video takes the full second row. */
        .link-field .form-control {
            flex: 1 1 0;
            width: auto;
            padding-right: 0;
        }

        .link-field .btn {
            width: auto;
        }

        .link-field .btn-primary {
            flex-basis: 100%;
            width: 100%;
        }


    .video-info {
        grid-template-columns: 92px minmax(0,1fr);
        gap: .3rem 1rem;
    }

    /* The details box dissolves so the choices and button can span both columns under the poster. */
    .video-details {
        display: contents;
    }

    .video-creator, .preview-title {
        grid-column: 2;
    }

    .video-creator {
        grid-row: 1;
        align-self: end;
    }

    .preview-title {
        grid-row: 2;
        align-self: start;
        margin-top: 0;
    }

    .video-poster {
        grid-row: 1 / span 2;
    }

    .choice-row, .audio-only-note, .download-button, .video-info .alert {
        grid-column: 1 / -1;
    }

    .choice-row {
        grid-template-columns: 5.5rem minmax(0,1fr);
        margin-top: .5rem;
    }

    .preview-title + .choice-row, .preview-title + .d-none + .choice-row, .audio-only-note, .download-button {
        margin-top: 1.1rem;
    }

    .video-info .alert {
        margin-top: .6rem;
    }

    .section-heading {
        display: block;
    }

        .section-heading > p {
            margin-top: .8rem;
        }

    .guide-card {
        grid-template-columns: 92px minmax(0,1fr);
        padding: 1.15rem;
    }

    .guide-art {
        height: 100px;
    }

    .phone-art::before {
        inset: 11px 24px;
    }

    .phone-art span {
        left: 34px;
    }

    .nav-badge {
        display: none;
    }
}

@media (max-width: 450px) {
    .hero h1 {
        font-size: 2.8rem;
    }

    .card-heading {
        display: block;
    }

    .secure-label {
        display: inline-block;
        margin-top: .75rem;
    }


    .how-it-works {
        padding-top: 4rem;
    }

    /* Too narrow for a label beside two buttons: each label sits above its control. */
    .choice-row {
        grid-template-columns: minmax(0,1fr);
        gap: .4rem;
    }
}

/* ---------- dark theme ---------- */
:root[data-theme="dark"] {
    --bg: #0f0e17;
    --surface: #17161f;
    --surface-tint: #1c1a28;
    --ink: #ecebf3;
    --muted: #a9a6b8;
    --faint: #8c89a0;
    --text-soft: #c9c6d8;
    --text-body: #bdbacd;
    --line: #2b2938;
    --field-line: #3a3750;
    --mist: #1f1d2b;
    --purple: #7c55ff;
    --purple-dark: #6a42f0;
    --chip: #2a2342;
    --chip-hover: #352b56;
    --chip-ink: #c9b8ff;
    --chip-ink-strong: #ddd1ff;
    --badge-bg: #221c38;
    --badge-line: #3b3160;
    --nav-bg: rgba(15,14,23,.92);
    --nav-ink: #c9c6d8;
    --shadow: rgba(0,0,0,.45);
    --dot-ring: #12382a;
    --error: #ff7a93;
    --success-bg: #10281d;
    --success-ink: #7fe0b0;
    --danger-bg: #2d1219;
    --danger-ink: #ff9fb2;
    --info-bg: #121c33;
    --info-ink: #9fb8ff;
    --hero-bg: radial-gradient(circle at 92% 18%, rgba(124,85,255,.28) 0, transparent 30%), radial-gradient(circle at 2% 96%, rgba(124,85,255,.16) 0, transparent 30%), linear-gradient(135deg, #17142a, #1b1733);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f0e17;
        --surface: #17161f;
        --surface-tint: #1c1a28;
        --ink: #ecebf3;
        --muted: #a9a6b8;
        --faint: #8c89a0;
        --text-soft: #c9c6d8;
        --text-body: #bdbacd;
        --line: #2b2938;
        --field-line: #3a3750;
        --mist: #1f1d2b;
        --purple: #7c55ff;
        --purple-dark: #6a42f0;
        --chip: #2a2342;
        --chip-hover: #352b56;
        --chip-ink: #c9b8ff;
        --chip-ink-strong: #ddd1ff;
        --badge-bg: #221c38;
        --badge-line: #3b3160;
        --nav-bg: rgba(15,14,23,.92);
        --nav-ink: #c9c6d8;
        --shadow: rgba(0,0,0,.45);
        --dot-ring: #12382a;
        --error: #ff7a93;
        --success-bg: #10281d;
        --success-ink: #7fe0b0;
        --danger-bg: #2d1219;
        --danger-ink: #ff9fb2;
        --info-bg: #121c33;
        --info-ink: #9fb8ff;
        --hero-bg: radial-gradient(circle at 92% 18%, rgba(124,85,255,.28) 0, transparent 30%), radial-gradient(circle at 2% 96%, rgba(124,85,255,.16) 0, transparent 30%), linear-gradient(135deg, #17142a, #1b1733);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] .hero-orb-inner {
    border-color: rgba(255,255,255,.14);
}

/* ---------- theme toggle ---------- */
.theme-toggle {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--badge-line);
    border-radius: 9px;
    color: var(--nav-ink);
    background: var(--surface-tint);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

    .theme-toggle:hover {
        color: var(--purple);
        border-color: var(--purple);
    }

    .theme-toggle:focus-visible {
        outline: 3px solid var(--purple);
        outline-offset: 2px;
    }

    .theme-toggle .theme-icon-dark {
        display: none;
    }

:root[data-theme="dark"] .theme-toggle .theme-icon-light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-icon-dark {
    display: inline;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-light {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle .theme-icon-dark {
        display: inline;
    }
}

/* Section labels stay purple everywhere; more specific paragraph rules (.how-it-works p, .faq p,
   .guide-page p) otherwise turned some of them grey. */
.section-heading .eyebrow, .section-heading .card-kicker, .how-it-works .eyebrow, .faq .eyebrow, .guide-page .card-kicker, .legal-page .card-kicker {
    color: var(--purple);
}

/* ---------- card elevation ----------
   Every card sits on a soft layered shadow so it separates from the page in both themes. Dark mode
   uses deeper shadows plus a lighter edge, because a shadow alone barely shows on a dark background. */
:root {
    --card-shadow: 0 1px 2px rgba(22,22,34,.05), 0 8px 24px rgba(34,24,72,.08);
    --card-shadow-hover: 0 2px 4px rgba(22,22,34,.06), 0 16px 36px rgba(34,24,72,.14);
    --card-line: #e3e1ed;
}
:root[data-theme="dark"] { --card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.42); --card-shadow-hover: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55); --card-line: #353149; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.42); --card-shadow-hover: 0 2px 4px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.55); --card-line: #353149; } }

.how-it-works article, .faq article, .feature-grid article, .guide-card, .faq-list details, .usage-notice > div > div {
    border-color: var(--card-line);
    box-shadow: var(--card-shadow);
}
.guide-card { transition: box-shadow .2s, transform .2s; }
.guide-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }

/* Content cards lift slightly and pick up the brand tint under the pointer. */
.feature-grid article, .how-it-works article, .visual-steps > li {
    transition: box-shadow .2s, transform .2s, border-color .2s;
}

.feature-grid .feature-icon {
    transition: background .2s;
}

/* Wider than g-3 so neighbouring cards, and their hover lift, have room to breathe. */
.row.feature-grid {
    gap: 1.5rem;
}

@media (hover: hover) {
    .feature-grid article:hover, .how-it-works article:hover, .visual-steps > li:hover {
        border-color: var(--badge-line);
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-3px);
    }

    .feature-grid article:hover .feature-icon {
        background: var(--chip-hover);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-grid article, .how-it-works article, .visual-steps > li, .segment span {
        transition: none;
    }

    .feature-grid article:hover, .how-it-works article:hover, .visual-steps > li:hover {
        transform: none;
    }
}

/* ---------- home page content ----------
   Long-form sections from the home page copy: plain text blocks, paired text cards, the step and
   quality lists, the troubleshooting table and FAQ questions written as headings. */
.hero-home h1 {
    max-width: 760px;
    font-size: clamp(2.5rem, 4.3vw, 4rem);
    line-height: 1.02;
}

ul.hero-trust, .step-list, .home-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-section {
    padding: 5rem 0 0;
}

.home-prose h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.65rem,3vw,2.2rem);
    font-weight: 800;
    letter-spacing: -.055em;
}

.home-prose p:not(.card-kicker) {
    max-width: 860px;
    margin: 0 0 1rem;
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.75;
}

/* A plain list in the running text reads like the paragraphs around it. */
.home-prose > ol, .home-prose > ul {
    max-width: 860px;
    margin: 0 0 1rem;
    padding-left: 1.4rem;
    color: var(--text-body);
    line-height: 1.75;
}

    .home-prose > ol > li + li, .home-prose > ul > li + li {
        margin-top: .5rem;
    }

.home-prose > div > p:last-child, .home-prose > p:last-child {
    margin-bottom: 0;
}

.home-prose + .home-list {
    margin-top: 1.6rem;
}

.home-prose strong, .home-card strong, .feature-grid strong, .how-it-works strong, .faq-list strong {
    color: var(--ink);
    font-weight: 750;
}

.home-prose a, .feature-grid p a, .section-heading > p a {
    color: var(--purple);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-card {
    height: 100%;
    padding: 1.75rem;
    border: 1px solid var(--card-line);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--surface), var(--surface-tint));
    box-shadow: var(--card-shadow);
}

    .home-card h2 {
        font-size: clamp(1.3rem,2.2vw,1.6rem);
        letter-spacing: -.04em;
    }

    .home-card p:not(.card-kicker) {
        font-size: .93rem;
    }

.how-it-works .step-title, .feature-grid .feature-title {
    margin: 1.1rem 0 .42rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 780;
}

.feature-grid .feature-title {
    margin-top: 1rem;
    margin-bottom: .35rem;
}

.feature-grid article {
    display: flex;
    flex-direction: column;
}

.feature-grid .card-link {
    margin-top: auto;
    padding-top: .9rem;
    color: var(--purple);
    font-size: .84rem;
    font-weight: 760;
    text-decoration: none;
}

    .feature-grid .card-link:hover {
        text-decoration: underline;
    }

.section-heading > p {
    max-width: 360px;
}

.home-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--card-line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.home-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .9rem;
}

    .home-table th, .home-table td {
        padding: .95rem 1.15rem;
        border-bottom: 1px solid var(--line);
        text-align: left;
        vertical-align: top;
        line-height: 1.55;
    }

    .home-table thead th {
        color: var(--purple);
        background: var(--surface-tint);
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .home-table tbody th {
        color: var(--ink);
        font-weight: 750;
    }

    .home-table td {
        color: var(--text-body);
    }

    .home-table tbody tr:last-child > * {
        border-bottom: 0;
    }

.faq-list summary h3 {
    margin: 0;
    padding-right: 1rem;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 720;
    line-height: 1.4;
}

.usage-notice .notice-title {
    margin: 0 0 .25rem;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 780;
}

.step-shot {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto 1.1rem;
    border: 1px solid var(--card-line);
    border-radius: 14px;
    background: var(--mist);
}

/* A page's featured picture: one wide image that sums up its guide. */
.feature-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.75rem 0 0;
    border: 1px solid var(--card-line);
    border-radius: 18px;
    background: var(--mist);
}

    /* In running text it lines up with the paragraphs' width. */
    .home-prose > .feature-image {
        max-width: 860px;
        margin-bottom: .5rem;
    }

/* An introduction with its featured picture: text and picture side by side on wide screens, so the section
   fills the same width as the step cards below; stacked on narrower ones. */
@media (min-width: 992px) {
    .home-prose.intro-split {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        column-gap: 3rem;
        align-items: center;
    }

        .home-prose.intro-split > .feature-image {
            max-width: none;
            margin: 0;
        }
}

/* The note under the five step cards. */
.how-it-works .steps-note {
    max-width: 760px;
    margin: 1.75rem auto 0;
    color: var(--text-body);
    font-size: .98rem;
    line-height: 1.7;
    text-align: center;
}

    .how-it-works .steps-note a {
        color: var(--purple);
        font-weight: 750;
        text-decoration: none;
        white-space: nowrap;
    }

        .how-it-works .steps-note a:hover {
            text-decoration: underline;
        }

/* Visual guide steps (iPhone page): a picture beside each step, stacked on phones. */
.visual-steps {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

    .visual-steps > li {
        display: grid;
        grid-template-columns: 260px minmax(0,1fr);
        gap: 1.75rem;
        align-items: center;
        margin-bottom: 1.25rem;
        padding: 1.25rem;
        border: 1px solid var(--card-line);
        border-radius: 18px;
        background: var(--surface);
        box-shadow: var(--card-shadow);
    }

    .visual-steps .step-shot {
        margin: 0;
    }

    .visual-steps .step-number {
        display: inline-grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 8px;
        color: var(--purple);
        background: var(--chip);
        font-size: .72rem;
        font-weight: 800;
    }

    .visual-steps > li.no-shot {
        grid-template-columns: minmax(0,1fr);
    }

    /* 16:10 desktop pictures (PC page) get a wider picture column. */
    .visual-steps.wide-shots > li {
        grid-template-columns: 440px minmax(0,1fr);
    }

        .visual-steps.wide-shots > li.no-shot {
            grid-template-columns: minmax(0,1fr);
        }

    .visual-steps.wide-shots .step-shot {
        max-width: 440px;
    }

    .visual-steps h3 {
        margin: .8rem 0 .55rem;
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: -.02em;
    }

    .how-it-works .visual-steps p {
        margin: 0 0 .55rem;
        color: var(--text-body);
        font-size: .96rem;
        line-height: 1.65;
    }

        .how-it-works .visual-steps p:last-child {
            margin-bottom: 0;
        }

    .visual-steps a, .feature-grid p a {
        color: var(--purple);
        font-weight: 700;
    }

/* A place in the Files app or Settings, such as "Files → Downloads". */
.path-chip {
    display: inline-block;
    padding: .1rem .55rem;
    border: 1px solid var(--badge-line);
    border-radius: 7px;
    color: var(--chip-ink);
    background: var(--badge-bg);
    font-size: .9em;
    font-weight: 700;
    white-space: nowrap;
}

/* A short sequence of taps shown as chips joined by arrows. */
.flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

    .flow-chips span {
        padding: .35rem .8rem;
        border-radius: 999px;
        color: var(--chip-ink);
        background: var(--chip);
        font-size: .9rem;
        font-weight: 750;
    }

        .flow-chips span + span::before {
            margin-right: .5rem;
            color: var(--faint);
            content: "→";
        }

.feature-grid article p + p {
    margin-top: .5rem;
}

.home-after-list {
    margin-top: 1.4rem;
}

@media (max-width: 767px) {
    .visual-steps > li, .visual-steps.wide-shots > li {
        grid-template-columns: 1fr;
    }

    .visual-steps > li {
        gap: 1rem;
    }

    .visual-steps .step-shot {
        margin: 0 auto;
    }
}

@media (min-width: 992px) {
    .row > .col-lg-3 {
        grid-column: span 3;
    }

    .row > .col-lg-4 {
        grid-column: span 4;
    }

    .row > .col-lg-6 {
        grid-column: span 6;
    }

    .step-list > li:nth-child(4):nth-last-child(2) {
        grid-column: 3 / span 4;
    }
}

@media (max-width: 767px) {
    .home-section {
        padding-top: 3.5rem;
    }

    .home-card {
        padding: 1.35rem;
    }

    /* On phones each table row becomes a small card, so nothing has to scroll sideways. */
    .home-table {
        min-width: 0;
    }

        .home-table thead {
            display: none;
        }

        .home-table tr, .home-table th, .home-table td {
            display: block;
        }

        .home-table tbody tr {
            padding: .35rem 0;
            border-bottom: 1px solid var(--line);
        }

            .home-table tbody tr:last-child {
                border-bottom: 0;
            }

        .home-table tbody th, .home-table td {
            padding: .35rem 1.1rem;
            border-bottom: 0;
        }

        .home-table td::before {
            display: block;
            color: var(--purple);
            content: attr(data-label);
            font-size: .68rem;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
        }
}

/* Links inside guide paragraphs keep the paragraph's text size. */
.guide-page p a:not(.btn) {
    font-size: inherit;
}

/* ---------- footer ----------
   Brand and tagline, then columns of site links, then a bottom bar. Columns stack on phones. */
.footer {
    margin-top: auto;
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: var(--surface-tint);
    font-size: .88rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0,1.6fr) repeat(3, minmax(0,1fr));
    gap: 2.5rem;
    padding: 3.5rem 0 2.5rem;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.03em;
    text-decoration: none;
}

.footer-brand p {
    max-width: 380px;
    margin: 1rem 0 0;
    color: var(--muted);
    line-height: 1.65;
}

    .footer-brand p a {
        color: var(--purple);
        font-weight: 700;
        text-decoration: none;
    }

.footer-title {
    margin: .35rem 0 .9rem;
    color: var(--ink);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

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

.footer-col li + li {
    margin-top: .15rem;
}

.footer-col a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: .3rem;
    color: var(--muted);
    font-weight: 650;
    text-decoration: none;
}

.footer a:hover, .footer-brand p a:hover {
    color: var(--purple);
}

.footer-col .footer-more {
    color: var(--purple);
    font-weight: 750;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--line);
    font-size: .8rem;
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 2rem 1.25rem;
        padding-top: 2.5rem;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 991px) {
    .visual-steps.wide-shots > li {
        grid-template-columns: 1fr;
    }

    .visual-steps.wide-shots .step-shot {
        margin: 0 auto;
    }
}

/* Long pages: the browser skips style, layout and paint for sections that are still far below the screen
   and does that work as they scroll near. contain-intrinsic-size reserves a stand-in height (remembered
   once a section has been shown), so the scrollbar and #anchors stay stable. */
main > .home-section, main > .feature-section, main > .how-it-works, main > .faq, main > .usage-notice {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/* content-visibility also clips painting to the section's box, and the cards run to the box's edges, so
   their shadows (and the hover lift) were cut off flat at the sides and along the bottom. Extra padding
   gives the shadows room inside the box, and matching negative margins keep the layout where it was.
   Sideways the room is limited to the page gutter: 1rem is always free (.container), and wide screens
   have space for more. The FAQ section already ends with enough bottom padding. */
main > .home-section, main > .feature-section, main > .how-it-works, main > .faq, main > .usage-notice {
    --shadow-room: 1rem;
    padding-inline: var(--shadow-room);
    margin-inline: calc(-1 * var(--shadow-room));
}

main > .home-section, main > .feature-section, main > .how-it-works, main > .usage-notice {
    padding-bottom: 3.5rem;
    margin-bottom: -3.5rem;
}

@media (min-width: 1300px) {
    main > .home-section, main > .feature-section, main > .how-it-works, main > .faq, main > .usage-notice {
        --shadow-room: 2.5rem;
    }
}