/* Landing composition. Shared colors, typography and controls are in site.css. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); align-items: center; column-gap: 28px; width: min(calc(100% - var(--gutter) * 2), 1320px); min-height: min(820px, calc(100svh - 86px)); padding-block: 48px 64px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 78% 35%, var(--surface-blue), transparent 65%), radial-gradient(ellipse at 90% 70%, var(--surface-violet), transparent 60%); }
.hero::before, .showcase-art::before, .flow-brand::before, .local-app::before { mask-image: var(--ambient-mask); }
.hero-copy { position: relative; z-index: 1; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 11px; color: var(--text-on-brand); }
.accent-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gradient); }
.hero-description { max-width: 430px; margin-block: 28px 32px; color: var(--text-secondary); font-size: 18px; line-height: 1.7; }
.hero-art { position: relative; isolation: isolate; min-width: 0; }
.hero-art .product-visual { max-width: 720px; }
.hero-art .ambient-glow { inset: -18% max(-8%, calc(8px - var(--gutter))) -14%; opacity: 1; }
.product-visual { width: 100%; max-width: 100%; margin-inline: auto; position: relative; }
.product-image { display: block; width: 100%; height: auto; object-fit: contain; }
.asset-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 0.91; padding: 28px 16px; background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px dashed color-mix(in srgb, var(--accent-violet) 35%, var(--border)); border-radius: 18px; box-shadow: 0 24px 65px var(--shadow-color); text-align: center; }
.placeholder-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-secondary); }
.placeholder-symbol { display: block; margin: 30px 0 22px; font-size: 46px; color: var(--accent-violet); opacity: .65; line-height: 1; }
.placeholder-name { font-size: 19px; font-weight: 500; letter-spacing: -.025em; }
.placeholder-note { margin-top: 7px; color: var(--text-secondary); font-size: 12px; }
.how-section { text-align: center; border-top: 1px solid var(--border); padding-block: clamp(56px, 7vw, 112px) clamp(32px, 4vw, 64px); }
.how-description { max-width: 600px; margin-inline: auto; }
.file-flow { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 660px; margin: 36px auto 36px; padding: 0; list-style: none; }
.file-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 16px; font-weight: 500; }
.flow-arrow { position: absolute; left: calc(100% - 10px); top: 23px; color: var(--text-muted); opacity: .7; font-size: 20px; font-weight: 400; line-height: 1; }
.flow-icon { display: inline-flex; width: 76px; height: 76px; justify-content: center; align-items: center; font-size: 36px; color: var(--text-secondary); }
.flow-brand, .local-app { position: relative; isolation: isolate; }
.flow-brand .app-mark { width: 62px; height: 62px; }
.flow-brand::before, .local-app::before { content: ""; position: absolute; inset: -18px; background: var(--ambient-cool); opacity: .24; z-index: -1; pointer-events: none; }
.local-app::before { inset: -28px -8px -4px; opacity: .8; }
.showcase { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 64px; padding-block: clamp(40px, 5vw, 72px); }
.showcase-copy { max-width: 430px; }
.showcase-copy .section-description { margin-top: 26px; }
.showcase-art { position: relative; isolation: isolate; padding: 0; min-width: 0; }
.showcase-art::before { content: ""; position: absolute; inset: -18% max(-8%, calc(8px - var(--gutter))); z-index: -1; pointer-events: none; background: var(--ambient-cool); mask-image: var(--field-mask); opacity: .9; }
.folders-art::before { background: var(--ambient-warm); opacity: .95; }
.recent-art .product-visual { max-width: 560px; margin-inline: auto 0; }
.action-list { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 15px; font-size: 15px; }
.action-list li { display: flex; align-items: center; gap: 14px; }
.action-list .hx-icon { color: var(--accent-blue); font-size: 20px; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .action-list .hx-icon::before { background: var(--brand-gradient-secondary); background-clip: text; -webkit-background-clip: text; color: transparent; }
}
.showcase-reversed { width: min(calc(100% - var(--gutter) * 2), 1320px); grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); padding-block: clamp(32px, 4vw, 60px) clamp(48px, 6vw, 96px); }
.showcase-reversed .showcase-copy { grid-column: 2; grid-row: 1; }
.showcase-reversed .showcase-art { grid-column: 1; grid-row: 1; padding: 0; }
.product-visual-wide { max-width: 760px; }
.product-visual-wide .asset-placeholder { aspect-ratio: 1.3; background: var(--alternate-bg); box-shadow: none; }
.folder-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; color: var(--text-secondary); }
.folder-list li { display: flex; align-items: center; gap: 9px; }
.folder-list .hx-icon { color: var(--accent-blue); }
.lightweight-section { border-top: 1px solid var(--border); padding-block: clamp(44px, 7vw, 104px); }
.lightweight-section h2 { max-width: 700px; }
.quiet-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 48px; }
.quiet-features > div > .hx-icon { display: block; margin-bottom: 24px; font-size: 32px; line-height: 1; color: var(--accent-blue); }
.quiet-features > div:nth-child(1) > .hx-icon { color: var(--brand-cyan); }
.quiet-features > div:nth-child(3) > .hx-icon { color: var(--brand-violet); }
.quiet-features > div:nth-child(4) > .hx-icon { color: var(--brand-magenta); }
.quiet-features p { margin-top: 11px; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.privacy-section { --text-secondary: var(--text-on-brand); position: relative; background: radial-gradient(ellipse at 0% 5%, var(--privacy-cyan), transparent 65%), radial-gradient(ellipse at 60% 15%, var(--privacy-blue), transparent 65%), radial-gradient(ellipse at 90% 80%, var(--privacy-magenta), transparent 60%), radial-gradient(ellipse at 65% 85%, var(--privacy-violet), transparent 75%), var(--surface-brand); }
.privacy-inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 90px; }
.privacy-section h2 { font-size: 27px; letter-spacing: -.035em; }
.privacy-statement { font-size: clamp(49px, 5.4vw, 76px); line-height: 1.12; font-weight: 600; letter-spacing: -.055em; margin-top: 28px; }
.privacy-detail { padding-top: 50px; }
.local-diagram { display: grid; grid-template-columns: 1fr 50px 1fr; align-items: center; text-align: center; border: 1px solid var(--border); border-radius: 50% / 45%; padding: 45px 32px 30px; margin-bottom: 35px; }
.local-mac, .local-app { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); }
.local-mac > .hx-icon { font-size: 54px; line-height: 1; color: var(--text-primary); }
.local-app .app-mark { width: 48px; height: 48px; font-size: 29px; }
.local-connection { color: var(--accent-violet); font-size: 25px; margin-top: -28px; }
.local-boundary { grid-column: 1 / -1; font-size: 11px; margin-top: 28px; color: var(--text-secondary); }
.privacy-detail > p { font-size: 17px; }
.purchase-section { text-align: center; padding-block: clamp(40px, 7vw, 104px); }
.purchase-section h2 { font-size: clamp(48px, 5.6vw, 78px); }
.purchase-lead { margin: 28px 0 5px; font-weight: 500; }
.purchase-section .section-description { font-size: 16px; }
.purchase-section .store-cta { margin-top: 32px; }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; border-top: 1px solid var(--border); padding-block: clamp(52px, 7vw, 96px) clamp(28px, 4vw, 56px); }
.faq-intro h2 { font-size: 43px; }
.support-note, .text-link { display: block; font-size: 14px; margin-top: 24px; color: var(--text-secondary); }
.text-link { text-decoration: underline; text-underline-offset: 5px; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list details:first-child { border-top: 1px solid var(--border); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--text-muted); font-size: 23px; line-height: 1; flex-shrink: 0; align-self: center; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { padding: 0 28px 24px 0; color: var(--text-secondary); font-size: 15px; }
.final-cta { position: relative; isolation: isolate; overflow: clip; text-align: center; padding-block: clamp(32px, 4vw, 64px) clamp(56px, 6vw, 88px); }
.final-cta .ambient-glow { inset: -8% 0 -10%; opacity: .78; }
.final-inner { position: relative; }
.final-cta .purchase-note { color: var(--text-primary); }
.final-inner > .app-mark { width: 94px; height: 94px; font-size: 40px; margin-bottom: 28px; }
.final-inner h2 { font-size: clamp(46px, 5.2vw, 72px); }
.final-inner .store-cta-coming-soon { width: min(100%, 340px); }
.final-inner .store-cta { margin-top: 28px; max-width: 100%; text-align: left; }
@media (min-width: 1100px) {
    .hero { min-height: min(756px, calc(100svh - 150px)); padding-top: 16px; }
}
@media (min-width: 1500px) { .hero { min-height: 716px; } }
@media (max-width: 1000px) {
    .how-section { padding-block: 48px 24px; }
    .showcase { padding-block: 32px; }
    .showcase-reversed { padding-block: 24px 40px; }
    .lightweight-section { padding-block: 44px; }
    .purchase-section { padding-block: 32px; }
    .faq-section { padding-top: 44px; }
    .final-cta { padding-top: 24px; }
    .hero { gap: 20px; }
    .hero-art { padding: 0; }
    .hero h1 { font-size: clamp(48px, 6.5vw, 68px); }
    .showcase { gap: 45px; }
    .showcase-art { padding: 0; }
    .quiet-features { grid-template-columns: repeat(2, 1fr); gap: 44px 60px; }
    .privacy-inner { gap: 45px; }
    .local-diagram { padding-inline: 20px; }
    .faq-section { gap: 48px; }
}
@media (min-width: 701px) and (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 36px; padding-block: 40px; }
    .hero-copy { max-width: 560px; }
    .hero-art { width: min(100%, 640px); margin-inline: auto; }
    .hero h1 { font-size: 68px; }
    .showcase-reversed { grid-template-columns: 1fr; gap: 40px; }
    .showcase-reversed .showcase-copy { grid-column: 1; grid-row: 1; max-width: 560px; }
    .showcase-reversed .showcase-art { grid-column: 1; grid-row: 2; width: min(100%, 720px); margin-inline: auto; }
}
@media (max-width: 700px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-block: 44px; gap: 42px; }
    .hero h1 { font-size: clamp(47px, 9.9vw, 67px); }
    .hero-description { font-size: 17px; max-width: 430px; margin-block: 24px 27px; }
    .hero .eyebrow { font-size: 10px; letter-spacing: .1em; }
    .hero-art { width: 100%; margin-inline: auto; padding: 0; }

    .hero-art .ambient-glow { inset: -12% -5%; opacity: .9; background-position: center; }
    .showcase-art::before { inset: -14% -5%; opacity: .66; }
    .how-section h2 { font-size: clamp(34px, 7.7vw, 50px); }
    .file-flow { margin-block: 35px; }
    .file-flow li { font-size: 14px; gap: 16px; }
    .flow-arrow { font-size: 18px; top: 19px; left: calc(100% - 9px); }
    .flow-icon { width: 54px; height: 56px; font-size: 29px; }
    .flow-brand .app-mark { width: 46px; height: 46px; }
    .section-description { font-size: 17px; }
    .showcase, .showcase-reversed { grid-template-columns: 1fr; gap: 32px; }
    .showcase-copy { max-width: 480px; }
    .showcase-reversed .showcase-copy, .showcase-reversed .showcase-art { grid-column: auto; grid-row: auto; }
    .showcase-art { width: 100%; padding: 0; }
    .showcase h2 { max-width: 420px; }
    .action-list { flex-direction: row; flex-wrap: wrap; gap: 15px 22px; font-size: 13px; }
    .action-list li { gap: 7px; }
    .quiet-features { gap: 32px 25px; margin-top: 32px; }
    .quiet-features h3 { font-size: 17px; }
    .quiet-features p { font-size: 14px; }
    .privacy-section { padding-block: 52px; }
    .privacy-inner { grid-template-columns: 1fr; gap: 35px; }
    .privacy-statement { font-size: clamp(55px, 12vw, 75px); }
    .privacy-detail { padding: 0; max-width: 440px; }
    .local-diagram { max-width: 360px; padding: 32px 30px 26px; }
    .faq-section { grid-template-columns: 1fr; gap: 28px; }
    .faq-intro h2 { font-size: 38px; max-width: 340px; }
    .faq-list summary { font-size: 15px; padding-block: 22px; }

    .final-cta .ambient-glow { inset: 0 -4%; opacity: .62; }
}
@media (forced-colors: active) {
    .gradient-text, .action-list .hx-icon::before { background: none; color: CanvasText; }
    .ambient-glow, .hero::before, .showcase-art::before, .flow-brand::before, .local-app::before { display: none; }
    a.store-cta::before { display: none; }
    .store-cta, .app-mark-placeholder { border: 1px solid ButtonText; }
}

@media (max-width: 600px) {
    .hero { gap: 28px; }
    /* Use the space outside text margins without cropping the transparent assets. */
    .hero-art .product-visual, .recent-art .product-visual {
        width: calc(100% + var(--gutter) * 2 - 8px); max-width: none;
        margin-inline: calc(4px - var(--gutter));
    }
    .folders-art .product-visual {
        width: calc(100% + var(--gutter) * 2); max-width: none;
        margin-inline: calc(-1 * var(--gutter));
    }
    .file-flow { grid-template-columns: 1fr; row-gap: 20px; margin-block: 28px; }
    .file-flow li { gap: 4px; font-size: 15px; }
    .file-flow .flow-icon { height: 52px; }
    .flow-brand .app-mark { width: 50px; height: 50px; }
    .file-flow .flow-arrow { top: calc(100% + 1px); left: calc(50% - 9px); transform: rotate(90deg); }
    .action-list, .folder-list { font-size: 15px; }
    .quiet-features { row-gap: 38px; }
    .quiet-features p { font-size: 15px; }
    .hero .purchase-note, .purchase-section .purchase-note, .final-cta .purchase-note { font-size: 14px; }
    .faq-intro .text-link { font-size: 16px; min-height: 44px; }
    .faq-section .faq-list summary { font-size: 16px; min-height: 52px; }
    .faq-section .faq-list details p { font-size: 16px; }
    /* Existing 16–17px body copy and Privacy composition already read comfortably. */
}