/* Public purpose, legal pages and footer links used for OAuth verification. */
.platform-purpose {
    position: relative;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: clamp(72px, 9vw, 140px) 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(249,115,22,.09), transparent 35%),
        rgba(255,255,255,.01);
}
.purpose-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 7vw, 110px);
    align-items: start;
}
.purpose-heading h2 {
    font-size: clamp(38px, 5.6vw, 82px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 800;
}
.purpose-copy > p {
    color: var(--text-sec);
    line-height: 1.75;
    font-size: clamp(15px, 1.2vw, 18px);
    margin-bottom: 18px;
}
.purpose-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 34px 0;
}
.purpose-steps article {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    background: rgba(255,255,255,.018);
}
.purpose-steps span {
    display: block;
    color: var(--orange);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    margin-bottom: 14px;
}
.purpose-steps strong {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
}
.purpose-steps p {
    color: var(--text-sec);
    line-height: 1.55;
    font-size: 13px;
}
.purpose-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.text-action {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-sec);
    padding: 12px 4px;
}
.text-action:hover { color: var(--orange); }

.legal-page {
    min-height: 70vh;
    padding: clamp(130px, 14vw, 190px) 0 clamp(80px, 10vw, 140px);
}
.legal-wrap { max-width: 980px; }
.legal-page h1 {
    font-size: clamp(48px, 8vw, 96px);
    line-height: .95;
    letter-spacing: -.055em;
    margin-bottom: 18px;
}
.legal-updated {
    color: var(--text-sec);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 34px;
}
.legal-summary {
    border: 1px solid rgba(249,115,22,.36);
    border-left: 4px solid var(--orange);
    border-radius: 8px;
    padding: 22px 24px;
    margin-bottom: 36px;
    background: rgba(249,115,22,.055);
}
.legal-summary strong { display: block; margin-bottom: 8px; }
.legal-summary p { color: var(--text-sec); line-height: 1.65; }
.legal-content {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: clamp(24px, 5vw, 54px);
    background: rgba(255,255,255,.015);
}
.legal-content h2 {
    font-size: clamp(21px, 2.3vw, 30px);
    margin-top: 38px;
    margin-bottom: 14px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p,
.legal-content li {
    color: var(--text-sec);
    font-size: 15px;
    line-height: 1.8;
}
.legal-content p + p { margin-top: 14px; }
.legal-content ul { padding-left: 22px; margin: 12px 0 18px; }
.legal-content li + li { margin-top: 8px; }
.legal-content a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

.footer-legal-row {
    max-width: 1400px;
    margin: 0 auto;
    padding: 25px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}
.footer-legal a {
    color: var(--text-sec);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.footer-legal a:hover { color: var(--orange); }
.footer-google-note {
    max-width: 590px;
    color: var(--text-muted, #64748b);
    font-size: 11px;
    line-height: 1.55;
    text-align: right;
}

@media (max-width: 900px) {
    .purpose-grid { grid-template-columns: 1fr; }
    .purpose-steps { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .platform-purpose { padding: 70px 0; }
    .purpose-actions .btn { width: 100%; justify-content: center; }
    .text-action { width: 100%; text-align: center; }
    .legal-page { padding-top: 110px; }
    .legal-content { padding: 24px 20px; }
    .footer-legal-row { flex-direction: column; }
    .footer-google-note { text-align: left; }
}

/* ============================================================
   OAuth review-first public homepage
   The app purpose and requested Google/YouTube data use are shown
   immediately in server-rendered HTML, before any login is required.
   ============================================================ */
.app-hero {
    position: relative;
    min-height: 100vh;
    padding: clamp(118px, 13vw, 178px) 0 clamp(70px, 9vw, 120px);
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(135deg, rgba(249,115,22,.045), transparent 45%),
        var(--base);
}
.app-hero-glow {
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    filter: blur(95px);
    pointer-events: none;
    opacity: .22;
}
.app-hero-glow-orange { right: -180px; top: -150px; background: var(--orange); }
.app-hero-glow-purple { left: -260px; bottom: -280px; background: var(--purple); opacity: .14; }
.app-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: clamp(36px, 6vw, 92px);
    align-items: center;
}
.app-kicker,
.data-use-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--orange);
}
.app-hero-copy h1 {
    max-width: 880px;
    margin-top: 20px;
    font-family: 'Cabinet Grotesk', 'Manrope', sans-serif;
    font-size: clamp(50px, 7.15vw, 112px);
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: uppercase;
    font-weight: 900;
}
.app-hero-copy h1 span { color: var(--orange); }
.app-hero-lead {
    max-width: 790px;
    margin-top: 30px;
    color: var(--text-sec);
    font-size: clamp(16px, 1.32vw, 20px);
    line-height: 1.75;
}
.app-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}
.app-hero-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 24px;
}
.app-hero-legal a {
    color: var(--text-sec);
    text-decoration: underline;
    text-underline-offset: 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.app-hero-legal a:hover { color: var(--orange); }
.data-use-card {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: clamp(24px, 3vw, 38px);
    background: rgba(5,21,24,.84);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 28px 90px rgba(0,0,0,.28);
}
.data-use-card h2 {
    margin-top: 10px;
    font-size: clamp(25px, 2.7vw, 40px);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.data-use-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
    margin-top: 24px;
}
.data-use-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    color: var(--text);
    font-weight: 800;
    background: rgba(255,255,255,.045);
}
.data-use-icon.youtube { color: var(--orange); }
.data-use-item strong { display: block; margin-bottom: 6px; font-size: 15px; }
.data-use-item p,
.data-use-footnote {
    color: var(--text-sec);
    font-size: 13px;
    line-height: 1.65;
}
.read-only-limit {
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(249,115,22,.3);
    border-radius: 9px;
    background: rgba(249,115,22,.05);
}
.read-only-limit strong { font-size: 13px; }
.read-only-limit ul {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--text-sec);
    font-size: 12px;
    line-height: 1.8;
}
.data-use-footnote {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.how-platform-works {
    padding: clamp(72px, 9vw, 132px) 0;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.012);
}
.purpose-section-head {
    align-items: end;
}
.purpose-intro {
    max-width: 550px;
    color: var(--text-sec);
    line-height: 1.7;
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 40px;
}
.how-grid article {
    min-width: 0;
    padding: 22px 20px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(255,255,255,.015);
}
.how-grid article > span {
    color: var(--orange);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: .12em;
}
.how-grid h3 {
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.2;
}
.how-grid p {
    margin-top: 10px;
    color: var(--text-sec);
    font-size: 13px;
    line-height: 1.6;
}
.public-empty-card {
    grid-column: 1 / -1;
    padding: clamp(28px, 5vw, 54px);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.015);
}
.public-empty-card h3 { font-size: clamp(25px, 3vw, 42px); }
.public-empty-card > p:not(.eyebrow) {
    max-width: 650px;
    margin: 12px 0 24px;
    color: var(--text-sec);
    line-height: 1.7;
}
.creator-section {
    padding: clamp(72px, 9vw, 130px) 0;
    border-top: 1px solid var(--border);
}
.creator-grid {
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    gap: clamp(32px, 7vw, 100px);
    align-items: center;
}
.creator-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.creator-image img { width: 100%; height: 100%; object-fit: cover; }
.creator-copy h2 {
    font-size: clamp(38px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -.045em;
}
.creator-copy > p:not(.eyebrow) {
    max-width: 720px;
    margin: 24px 0 28px;
    color: var(--text-sec);
    font-size: 16px;
    line-height: 1.75;
}
.footer-app-summary {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 26px;
    border-top: 1px solid var(--border);
}
.footer-app-summary strong { font-size: 15px; }
.footer-app-summary p {
    max-width: 800px;
    color: var(--text-sec);
    font-size: 12px;
    line-height: 1.65;
}

@media (max-width: 1120px) {
    .app-hero-grid { grid-template-columns: 1fr; }
    .data-use-card { max-width: 760px; }
    .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .app-hero { min-height: auto; padding-top: 108px; }
    .app-hero-copy h1 { font-size: clamp(45px, 14vw, 70px); }
    .app-hero-actions { flex-direction: column; }
    .app-hero-actions .btn { width: 100%; justify-content: center; }
    .app-hero-legal { gap: 14px 18px; }
    .how-grid { grid-template-columns: 1fr; }
    .purpose-section-head { flex-direction: column; align-items: flex-start; }
    .purpose-intro { max-width: none; }
    .creator-grid { grid-template-columns: 1fr; }
    .creator-image { max-width: 520px; }
    .footer-app-summary { grid-template-columns: 1fr; }
}