/* Light versions of the editorial components shared by /press and /partners
   (the .slow-tech-*, .press-*, .partner-* and .lead-* blocks in styles.css).
   Loaded after styles.css and site-light.css, scoped to body.site-light so the
   dark originals keep working anywhere they're still used. The partner map and
   stamp illustrations keep their own colors: they depict the app. */

.site-light.slow-tech-page {
    background: var(--paper);
}

/* Labels above headings: quiet, sentence case, not shouted */
.site-light .slow-tech-eyebrow,
.site-light .slow-tech-kicker,
.site-light .press-stats-title {
    color: var(--violet);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.95rem;
    font-weight: 800;
}

.site-light .slow-tech-hero h1,
.site-light .slow-tech-section h2 {
    color: var(--heading);
}

.site-light .slow-tech-deck,
.site-light .slow-tech-copy,
.site-light .slow-tech-section-head > p:last-child,
.site-light .slow-tech-cta p,
.site-light .slow-tech-card p,
.site-light .slow-tech-faq p,
.site-light .partner-format p,
.site-light .partner-proof-body p:last-child,
.site-light .partner-package ul,
.site-light .press-kit-list {
    color: var(--ink-soft);
}

/* Buttons match the nav call to action */
.site-light .slow-tech-button {
    background: var(--gold);
    color: var(--heading);
}

.site-light .slow-tech-button:hover,
.site-light .slow-tech-button:focus-visible {
    background: #FFD12E;
    box-shadow: 0 8px 22px rgba(31, 30, 150, 0.16);
}

.site-light .slow-tech-button-secondary {
    border-color: rgba(31, 30, 150, 0.28);
    background: var(--surface);
    color: var(--heading);
}

.site-light .slow-tech-button:focus-visible,
.site-light .slow-tech-card a:focus-visible,
.site-light .slow-tech-story a:focus-visible,
.site-light .slow-tech-copy a:focus-visible,
.site-light .press-copy-button:focus-visible,
.site-light .lead-form a:focus-visible,
.site-light .press-kit a:focus-visible,
.site-light .press-contact a:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 3px;
}

/* Links in running text */
.site-light .slow-tech-copy a,
.site-light .slow-tech-story a,
.site-light .press-kit-note a,
.site-light .press-contact p a,
.site-light .lead-form-fineprint a,
.site-light .lead-form-status a {
    color: var(--heading);
    text-decoration-color: var(--gold);
}

/* Cards */
.site-light .slow-tech-card,
.site-light .slow-tech-story,
.site-light .slow-tech-faq details,
.site-light .press-fact,
.site-light .partner-format,
.site-light .partner-package,
.site-light .press-kit {
    border: 1px solid var(--line);
    background: var(--surface);
}

.site-light .slow-tech-card h3,
.site-light .slow-tech-story h3,
.site-light .slow-tech-faq summary,
.site-light .partner-format h3,
.site-light .press-fact dd {
    color: var(--ink);
}

.site-light .slow-tech-card-number {
    background: var(--gold);
    color: var(--heading);
}

.site-light .slow-tech-story-source,
.site-light .press-fact dt,
.site-light .partner-package-name {
    color: var(--heading);
}

.site-light .press-story-date,
.site-light .press-kit-note,
.site-light .lead-form-fineprint {
    color: var(--ink-soft) !important;
}

.site-light .slow-tech-cta,
.site-light .partner-proof {
    border: 1px solid rgba(253, 193, 0, 0.55);
    background: var(--surface);
}

.site-light .partner-package-highlight {
    border-color: var(--gold);
    background: #FFF9E6;
}

.site-light .partner-format-example {
    color: #7A5B00 !important;
}

.site-light .media-kit-proof-stat {
    color: var(--heading);
}

/* Press: the numbers band is the page's one bold panel, in night-sky indigo */
.site-light .press-stats {
    border: 0;
    background: var(--indigo);
}

.site-light .press-stats-title {
    color: var(--gold);
}

.site-light .press-stat dd {
    color: #FFFFFF;
}

.site-light .press-stat dt {
    color: rgba(255, 255, 255, 0.8);
}

.site-light .press-stat + .press-stat {
    border-left-color: rgba(255, 255, 255, 0.16);
}

.site-light .press-stats-note {
    color: rgba(255, 255, 255, 0.66);
}

.site-light .press-timeline li {
    border-top-color: var(--gold);
    background: var(--surface);
}

.site-light .press-timeline li:last-child {
    background: #FFF6D9;
}

.site-light .press-timeline-date {
    color: #7A5B00;
}

.site-light .press-timeline-text {
    color: var(--ink);
}

.site-light .press-boilerplate {
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    background: var(--surface);
}

.site-light .press-boilerplate p {
    color: var(--ink);
}

.site-light .press-copy-button {
    border-color: rgba(31, 30, 150, 0.3);
    color: var(--heading);
}

.site-light .press-copy-button:hover,
.site-light .press-copy-button:focus-visible {
    background: rgba(31, 30, 150, 0.06);
}

.site-light .press-kit-preview {
    background: var(--indigo);
}

.site-light .press-kit-list li::marker {
    color: var(--heading);
}

/* Lead forms */
.site-light .lead-form-intro,
.site-light .lead-form-status {
    color: var(--ink) !important;
}

.site-light .lead-form-status.is-error,
.site-light .lead-field [aria-invalid="true"] {
    color: #B42318 !important;
    border-color: #B42318;
}

.site-light .lead-field {
    color: var(--ink);
}

.site-light .lead-field em {
    color: var(--ink-soft);
}

.site-light .lead-field input,
.site-light .lead-field select,
.site-light .lead-field textarea {
    border: 1px solid rgba(31, 30, 150, 0.22);
    background-color: var(--surface);
    color: var(--ink);
}

.site-light .lead-field select {
    background-image: linear-gradient(45deg, transparent 50%, var(--indigo) 50%), linear-gradient(135deg, var(--indigo) 50%, transparent 50%);
}

.site-light .lead-field select option {
    background: var(--surface);
}

.site-light .lead-field input:focus-visible,
.site-light .lead-field select:focus-visible,
.site-light .lead-field textarea:focus-visible,
.site-light .lead-choices input:focus-visible {
    outline: 3px solid var(--violet);
    border-color: var(--violet);
}

.site-light .lead-choices label {
    border: 1px solid rgba(31, 30, 150, 0.22);
    background: var(--surface);
    color: var(--ink);
}

.site-light .lead-choices label:has(input:checked) {
    border-color: var(--indigo);
    background: rgba(31, 30, 150, 0.06);
}

/* /download and the 404 page (which also hands invite and profile links to the apps) */
.site-light .hero-title {
    color: var(--heading);
}

.site-light .brand-highlight {
    background: none;
    color: inherit;
    text-shadow: none;
    -webkit-text-fill-color: currentColor;
}

/* One centred column: title, then the store badges */
.site-light.app-handoff .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.site-light.app-handoff .text-content {
    max-width: 36rem;
}

.site-light.app-handoff .hero-section {
    padding: 64px 0 80px;
}

.site-light .handoff-bird {
    display: block;
    width: 140px;
    height: auto;
    margin: 0 auto 8px;
}

.site-light .handoff-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.site-light .hero-subtitle {
    color: var(--ink-soft);
}

.site-light .hero-subtitle a {
    color: var(--heading);
}

/* ---- Design review 2026-09-28 ---- */

/* Same content width and left-aligned hero as the topic pages */
.site-light .slow-tech-article {
    width: min(100%, 1200px);
}

.site-light .slow-tech-hero {
    max-width: 50rem;
    margin-inline: 0;
    text-align: left;
}

.site-light .slow-tech-hero .slow-tech-actions {
    justify-content: flex-start;
}

/* Dates, outlets and milestones in plain case */
.site-light .slow-tech-story-source,
.site-light .press-story-date,
.site-light .press-timeline-date {
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.95rem;
}

/* One button weight */
.site-light .slow-tech-button {
    font-weight: 800;
}

/* Partner illustrations on a light sky; the map card keeps the app's own look */
.site-light .partner-visual {
    background: linear-gradient(180deg, #BFE2F7 0%, #DCEFFA 100%);
}

.site-light .partner-visual-map {
    background:
        radial-gradient(ellipse 40% 30% at 22% 40%, rgba(120, 190, 140, 0.28), transparent 70%),
        radial-gradient(ellipse 30% 26% at 70% 70%, rgba(120, 190, 140, 0.22), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0) 0 0 / 18px 18px,
        linear-gradient(160deg, #173A6B 0%, #0E2140 100%);
}

/* Packages: two by two until there's room for four */
@media (max-width: 1100px) {
    .site-light .partner-packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .site-light .partner-packages {
        grid-template-columns: minmax(0, 1fr);
    }
}

.site-light .slow-tech-hero .slow-tech-deck {
    margin-inline: 0;
}

/* ---- Handoff pages (/download, and 404.html's /invite and /profile views): one card ----
   Styling only: every id, inline style the scripts set and injected link still works. */
.site-light.app-handoff .hero-section {
    padding: 104px 0 72px;
}

.site-light.app-handoff .content-wrapper {
    max-width: 30rem;
    margin: 0 auto;
    padding: 28px 24px 32px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(31, 30, 150, 0.1);
    gap: 0;
}

.site-light.app-handoff .text-content {
    max-width: none;
}

.site-light.app-handoff .handoff-bird {
    width: 120px;
    margin: -100px auto 6px;
}

.site-light.app-handoff .hero-title {
    font-size: clamp(2rem, 6vw, 2.6rem);
    line-height: 1.08;
    text-wrap: balance;
}

.site-light.app-handoff .hero-subtitle {
    margin: 12px 0 0;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* The invite code, as a postage-style ticket */
.site-light.app-handoff #invite-code-display {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 20px;
    border: 2px dashed var(--gold);
    border-radius: 14px;
    background: rgba(253, 193, 0, 0.1);
    color: var(--heading);
    font-size: 1.7rem !important;
    font-weight: 900;
    letter-spacing: 0.14em !important;
}

/* Store links the scripts inject: badges on desktop, text links on phones */
.site-light.app-handoff #profile-store-links,
.site-light.app-handoff #invite-store-links,
.site-light.app-handoff .phone-mockup .store-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.site-light.app-handoff #profile-store-links a:not(.app-store-badge):not(.google-play-badge),
.site-light.app-handoff #invite-store-links a:not(.app-store-badge):not(.google-play-badge) {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--indigo);
    font-weight: 800;
    text-decoration: none;
}

.site-light.app-handoff .phone-mockup {
    width: 100%;
    margin-top: 4px;
}

.site-light.app-handoff .store-badges img {
    height: 48px;
    width: auto;
}

/* The not-found view keeps its own open layout (no card) */
.site-light.app-handoff .content-wrapper:has(#notfound-view:not([style*="none"])) {
    max-width: 44rem;
    border: 0;
    background: none;
    box-shadow: none;
}

.site-light.app-handoff .content-wrapper:has(#notfound-view:not([style*="none"])) .handoff-bird {
    margin-top: 0;
}

@media (max-width: 520px) {
    .site-light.app-handoff .store-badges img,
    .site-light.app-handoff #profile-store-links img,
    .site-light.app-handoff #invite-store-links img {
        height: 42px !important;
    }

    .site-light.app-handoff .content-wrapper {
        padding-inline: 18px;
    }
}

/* Partner "stickers and stamps" card: a real app sticker next to the stamps, plus a
   die-cut placeholder showing where a brand's own sticker would go */
.site-light .partner-real-sticker {
    width: 84px;
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
    transform: rotate(-8deg);
}

.site-light .partner-sticker {
    display: grid;
    flex: none;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 5px solid #FFFFFF;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.22);
    color: var(--indigo);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-10deg);
}