/* Shared styles for the landing page and privacy policy pages. */

@font-face {
    font-family: "Bungee";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/bungee-400.woff2") format("woff2");
}

.display {
    font-family: "Bungee", "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
    font-weight: 400;
}

:root {
    --bg: #fbfbfa;
    --panel: #ffffff;
    --footer-bg: #f1f1ef;
    --ink: #1a1a1a;
    --muted: #63666b;
    --divider: #e4e4e2;
    --blue: #2456c4;
    --blue-hover: #1c4499;
    --blue-bg: #e2eafa;

    --fresh: #1f8f63;
    --fresh-bg: #e3f0e9;
    --upcoming: #b4740a;
    --upcoming-bg: #f6ebd8;
    --hiatus: #7a7e85;
    --hiatus-bg: #eaeaea;
    --ended: #b03b32;
    --ended-bg: #f4e4e1;
    --accent2: #7c5cbf;
    --accent2-bg: #efe8fa;

    --shadow: rgba(20, 30, 50, 0.08);
    --shadow-strong: rgba(20, 30, 50, 0.24);

    /* Matches the toolbar icon (public/assets.svg) exactly. Used on the
       hero, which stays this dark tone regardless of page theme. */
    --icon-fresh: #57ab5a;
    --icon-upcoming: #e0a23f;
    --icon-hiatus: #99a4b0;
    --icon-ended: #e5534b;
    --icon-bg: #22272e;
}

/* --bg sits below the hero/footer tone; --panel sits above both. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1c2128;
        --panel: #2d333b;
        --footer-bg: #22272e;
        --ink: #cdd9e5;
        --muted: #909dab;
        --divider: #444c56;
        --blue: #589ff7;
        --blue-hover: #6cb0ff;
        --blue-bg: rgba(88, 159, 247, 0.1);

        --fresh: #57ab5a;
        --fresh-bg: rgba(87, 171, 90, 0.1);
        --upcoming: #e0a23f;
        --upcoming-bg: rgba(224, 162, 63, 0.1);
        --hiatus: #99a4b0;
        --hiatus-bg: rgba(153, 164, 176, 0.1);
        --ended: #e5534b;
        --ended-bg: rgba(229, 83, 75, 0.1);
        --accent2: #b39ddb;
        --accent2-bg: rgba(179, 157, 219, 0.1);

        --shadow: rgba(0, 0, 0, 0.24);
        --shadow-strong: rgba(0, 0, 0, 0.45);
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
}

main {
    flex: 1;
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue-hover);
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

/* The default outline colour falls below 3:1 against the fixed-dark
   background these sections share with the hero, so all three use the
   same accent blue as the extension's own dark theme instead. */
.hero :focus-visible,
.store :focus-visible,
.not-found :focus-visible {
    outline-color: #539bf5;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 100;
    background: var(--panel);
    color: var(--ink);
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid var(--divider);
    box-shadow: 0 4px 14px var(--shadow);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 12px;
}

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.btn-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Fixed colours, not --blue: that token lightens in dark mode. */
.btn-primary {
    background: #2456c4;
    color: #fff;
}

.btn-primary:hover {
    background: #1c4499;
    color: #fff;
}

.btn-ghost {
    background: var(--panel);
    color: var(--ink);
    border: 1.5px solid var(--divider);
}

.btn-ghost:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.btn-dark {
    background: #323942;
    color: #ececea;
}

.btn-dark:hover {
    background: #3a4249;
    color: #ececea;
}

/* === Hero =============================================================== */

.hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: var(--icon-bg);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
}

.hero-pattern {
    position: absolute;
    top: -60px;
    right: -60px;
    display: grid;
    grid-template-columns: repeat(6, 44px);
    gap: 14px;
    opacity: 0.25;
    transform: rotate(8deg);
}

.hero-pattern div {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.hero-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 140px 24px 120px;
    position: relative;
    text-align: center;
}

.hero h1 {
    color: #ececea;
    font-size: 56px;
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 0 0 18px;
}

.hero p {
    color: #adbac7;
    font-size: 19px;
    margin: 0 0 36px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.colour-bars {
    display: flex;
    height: 10px;
    position: relative;
    z-index: 2;
}

.colour-bars span {
    flex: 1;
}

/* === Sticky CTA bar ======================================================= */

.sticky-cta {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--divider);
    box-shadow: 0 2px 10px var(--shadow);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.2s ease, visibility 0s linear 0s;
}

.sticky-cta-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 15px;
}

.sticky-cta-brand img {
    display: block;
}

.sticky-cta .btn {
    padding: 8px 16px;
    font-size: 14px;
}

/* === Screenshot ========================================================== */

.screenshot-frame {
    width: 340px;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 50px var(--shadow-strong);
    overflow: hidden;
    border: 1.5px solid var(--divider);
    background: var(--panel);
    position: relative;
    /* Safari sometimes fails to clip a child to overflow:hidden + border-radius
       (WebKit compositing quirk); the mask forces a correct clip regardless. */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Invisible on purpose: an earlier visible version of this dot seemed to
   affect whether Safari clipped the screenshot correctly. Removing the lazy
   loading on the image is the real suspected fix, but this costs nothing to
   keep as a second line of defence while that gets confirmed in real Safari. */
.screenshot-frame::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
}

.screenshot-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* === Features ============================================================ */

.features {
    padding: 96px 0;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

.features::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
    background-image: radial-gradient(var(--divider) 1px, transparent 1px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
}

.features .wrap {
    position: relative;
    z-index: 1;
}

.features h2 {
    font-size: 26px;
    margin: 0 0 40px;
    text-align: center;
}

.feature-spotlight {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 880px;
    margin: 48px auto 0;
    text-align: left;
}

.feature-spotlight--reverse {
    flex-direction: row-reverse;
}

.feature-spotlight-media {
    flex-shrink: 0;
}

.feature-spotlight-text {
    flex: 1;
}

.feature-spotlight-text h3 {
    font-size: 30px;
    margin: 0 0 18px;
}

.feature-spotlight-text p,
.feature-spotlight-text li {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.5;
}

.feature-spotlight-text p {
    margin: 0;
}

.feature-spotlight-text ul {
    margin: 0;
    padding-left: 22px;
}

.feature-spotlight-text li {
    margin-bottom: 14px;
}

.feature-spotlight-text li:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .feature-spotlight,
    .feature-spotlight--reverse {
        flex-direction: column;
        margin-top: 40px;
    }
}

/* === FAQ ==================================================================== */

.faq {
    padding: 96px 0;
    background: var(--panel);
    position: relative;
    overflow: hidden;
}

.faq::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

.faq .wrap {
    position: relative;
    z-index: 1;
}

.faq h2 {
    font-size: 26px;
    margin: 0 0 32px;
    text-align: center;
}

.faq-item {
    max-width: 640px;
    margin: 0 auto 36px;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item h3 {
    font-size: 20px;
    margin: 0 0 10px;
}

.faq-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
}

.faq-item p {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.5;
}

/* === Privacy & permissions =============================================== */

.privacy {
    padding: 96px 0;
    background: var(--bg);
    text-align: center;
}

.privacy h2 {
    font-size: 26px;
    margin: 0 0 16px;
}

.privacy-intro {
    font-size: 17px;
    color: var(--muted);
    margin: 0 auto;
    max-width: 56ch;
}

.permissions-heading {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 48px 0 20px;
}

.permissions {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 720px;
}

.permissions li {
    background: var(--panel);
    border: 1.5px solid var(--divider);
    border-radius: 12px;
    padding: 22px 20px;
    text-align: left;
}

.permissions h4 {
    display: flex;
    align-items: center;
    font-size: 17px;
    margin: 0 0 8px;
}

.permission-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
}

.permissions p {
    margin: 0 0 14px;
    font-size: 15.5px;
    color: var(--muted);
}

.permissions code {
    display: block;
    width: fit-content;
    margin: 0 auto;
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: var(--blue-bg);
    padding: 3px 7px;
    border-radius: 5px;
}

.privacy-links {
    margin: 40px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.privacy-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1.5px solid var(--divider);
    background: var(--panel);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 14.5px;
}

.privacy-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.privacy-links a:hover {
    border-color: var(--blue);
    color: var(--blue);
}

@media (max-width: 640px) {
    .permissions {
        grid-template-columns: 1fr;
    }
}

.store {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 160px 0;
    background: var(--icon-bg);
    text-align: center;
}

.store::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* Watermark of the app icon itself (rounded square + four dots), repeated and rotated like .hero-pattern. */
.store::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg transform='rotate(15 70 70)'%3E%3Crect x='28' y='28' width='84' height='84' rx='20' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='12' fill='%2357ab5a'/%3E%3Ccircle cx='90' cy='50' r='12' fill='%23e0a23f'/%3E%3Ccircle cx='50' cy='90' r='12' fill='%2399a4b0'/%3E%3Ccircle cx='90' cy='90' r='12' fill='%23e5534b'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 140px 140px;
    background-position: -55px -85px;
}

.store .wrap {
    position: relative;
    z-index: 1;
}

.store-heading {
    color: #ececea;
    font-size: 40px;
    margin: 0 0 20px;
}

.store-tagline {
    color: #ececea;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 14px;
}

.store-coming-soon {
    color: #adbac7;
    font-size: 15px;
    margin: 0 0 48px;
}

.store-badges {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.store-badge {
    display: block;
    width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.store a:hover .store-badge {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .store-badge {
        transition: none;
    }
}

/* === Footer =============================================================== */

footer {
    background: var(--footer-bg);
    border-top: 1px solid var(--divider);
}

.footer-inner {
    padding: 32px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-brand img {
    display: block;
    border-radius: 5px;
}

.footer-brand strong {
    display: block;
    font-size: 14px;
    color: var(--ink);
}

.footer-meta {
    font-size: 13px;
    color: var(--muted);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-text-links {
    display: flex;
    gap: 20px;
}

.footer-text-links a {
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}

.footer-text-links a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.footer-links {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-left: 1px solid var(--divider);
    padding-left: 16px;
}

.footer-links a {
    display: inline-flex;
    padding: 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--muted);
}

.footer-links a:hover {
    color: var(--blue);
    background: var(--blue-bg);
}

.footer-icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 880px) {
    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .hero h1 {
        font-size: 32px;
    }
    .hero p {
        font-size: 17px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
    .hero-pattern {
        display: none;
    }
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
    .footer-brand {
        flex-direction: column;
    }
    .footer-right {
        flex-direction: column;
    }
    .footer-links {
        border-left: none;
        padding-left: 0;
    }
}

/* === Policy page (privacy.html) ========================================== */

.policy-header {
    padding: 24px 0;
}

.policy-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--divider);
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.policy-back-link:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.policy {
    padding: 24px 0 72px;
}

.policy .wrap {
    max-width: 720px;
}

.policy h1 {
    font-size: 40px;
    margin: 0 0 10px;
}

.policy .updated {
    color: var(--muted);
    font-size: 15px;
    margin: 0 0 32px;
}

.policy h2 {
    font-size: 22px;
    margin: 40px 0 12px;
}

.policy p,
.policy li {
    font-size: 17px;
}

.policy ul {
    padding-left: 22px;
}

.policy code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14.5px;
    background: var(--blue-bg);
    padding: 1px 5px;
    border-radius: 4px;
}

.policy .summary {
    background: var(--panel);
    border: 1px solid var(--divider);
    border-radius: 10px;
    padding: 20px 22px;
    margin: 0;
}

/* === 404 page ============================================================= */

.not-found {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 120px 0 140px;
    background: var(--icon-bg);
    text-align: center;
}

.not-found::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
}

/* Same icon watermark as .store::after, own crop offset so the two pages don't line up identically. */
.not-found::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg transform='rotate(15 70 70)'%3E%3Crect x='28' y='28' width='84' height='84' rx='20' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='12' fill='%2357ab5a'/%3E%3Ccircle cx='90' cy='50' r='12' fill='%23e0a23f'/%3E%3Ccircle cx='50' cy='90' r='12' fill='%2399a4b0'/%3E%3Ccircle cx='90' cy='90' r='12' fill='%23e5534b'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 140px 140px;
    background-position: -100px -60px;
}

.not-found .wrap {
    position: relative;
    z-index: 1;
    max-width: 480px;
}

.not-found-badge {
    margin-bottom: 20px;
}

.not-found h1 {
    color: #ececea;
    font-size: 44px;
    margin: 0 0 14px;
}

.not-found p {
    color: #adbac7;
    font-size: 17px;
    margin: 0 0 28px;
}

@media (max-width: 640px) {
    .not-found h1 {
        font-size: 34px;
    }
}

.policy .summary p {
    margin: 0;
}