/* mobile.oudayet.com — one stylesheet for the hub and every app site.

   The design is Batch Alarm Creator's: black ground, grey cards, one accent per
   app. Dark only. Each page sets its app's four accent tokens in a small inline
   <style> (written by build.py from app.json); everything else lives here, so a
   fix lands on every site at once. Linked as /assets/site.css?v=<hash>. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-latin-var.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;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    --bg: #000000;
    --bg-alt: #0A0A0A;
    --card: #1C1C1E;
    --card-hover: #2C2C2E;
    --border: #38383A;
    --text: #FFFFFF;
    /* 6.9:1 on --card, 8.0:1 on --bg-alt */
    --text-secondary: #A1A1A8;
    --success-text: #34C759;
    /* Per app (inline <style>): the accent, the end of its gradient, the accent
       as text (>= 4.5:1 on --card), and the text that sits ON the accent. */
    --accent: #FF9500;
    --accent-2: #FF6B00;
    --accent-text: #FF9500;
    --on-accent: #000000;
    --nav-h: 73px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html {
    scroll-behavior: smooth;
    /* anchor jumps land below the fixed nav, never under it */
    scroll-padding-top: calc(var(--nav-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: clip;
}

img, video, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------------------------------------------------------------- nav */

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

/* 72px + the 1px border = --nav-h at every width. Batch's bar once wrapped to
   91-119px between 769 and 999px and covered the top of every page. */
.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    height: 72px;
    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: var(--text);
}

.nav-logo-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

.nav-logo-text {
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: var(--text);
}

.menu-btn {
    display: none;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
}

.menu-btn svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.menu-btn .icon-close,
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
    display: none;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 999;
    flex-direction: column;
    gap: 4px;
    padding: 12px 24px 20px;
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0;
}

/* The links stop fitting next to the logo below 1024px: the menu takes over. */
@media (max-width: 1023px) {
    .nav-links { display: none; }
    .menu-btn { display: grid; }
}

@media (min-width: 1024px) {
    .mobile-nav.open { display: none; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--on-accent);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 40px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn-secondary {
    background-color: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover { background-color: var(--card-hover); }

.btn svg { flex: none; }

/* ---------------------------------------------------------------- hero */

.hero {
    position: relative;
    padding: calc(var(--nav-h) + 88px) 0 100px;
    text-align: center;
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background-color: rgba(28, 28, 30, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 14px;
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success-text);
}

.hero h1 {
    text-wrap: balance;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--text) 0%, #C7C7CC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* An app headline is "line<br><span class=accent>line</span>". Chrome will not
   balance a paragraph that holds a <br>, so the accent line is its own block. */
.hero--media h1 br { display: none; }
.hero--media h1 .accent { display: block; }

.hero h1 .accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    max-width: 600px;
    margin: 0 auto 36px;
    font-size: 19px;
    color: var(--text-secondary);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px 48px;
    margin-top: 52px;
}

/* <dt> (label) comes first for screen readers; the number shows on top. In a
   reversed column flex-end is the top, so a one-line label lines up with two. */
.stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.hero-stats dd,
.hero-stats dt { margin: 0; }

.stat-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--accent-text);
}

.stat-label {
    margin-top: 4px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* The hero loop (mobile/hero/) sits in the page grid beside the copy. The page
   shows what the loop draws (hero.video.box, measured from its frames) and a
   margin round it that fades out; the box itself lines up with the page: its
   right edge on the container's, which is the nav's, and its middle on the
   copy's middle. The crop numbers (--hero-*) come per page from the build, in
   the accent <style>. Below 1200px the loop goes under the copy, centred. */
.hero--media {
    display: flex;
    align-items: center;
    min-height: min(100svh, 860px);
    padding: calc(var(--nav-h) + 72px) 0 110px;
    text-align: left;
    background: #000000;
}

.hero-inner { width: 100%; }

.hero--media .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.hero--media .hero-copy { max-width: 580px; }

.hero--media .hero-subtitle {
    max-width: 540px;
    margin: 0 0 36px;
}

.hero--media .hero-buttons,
.hero--media .hero-stats { justify-content: flex-start; }

.hero-visual { position: relative; }

/* The margin hangs outside the column on both sides, so the box meets its edges. */
.hero-media {
    position: relative;
    width: calc(100% * (1 + 2 * var(--hero-bleed, 0)));
    margin-left: calc(-100% * var(--hero-bleed, 0));
    aspect-ratio: var(--hero-ratio, 16 / 9);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--hero-fade-x, 0%), #000 calc(100% - var(--hero-fade-x, 0%)), transparent), linear-gradient(to bottom, transparent, #000 var(--hero-fade-y, 0%), #000 calc(100% - var(--hero-fade-y, 0%)), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 var(--hero-fade-x, 0%), #000 calc(100% - var(--hero-fade-x, 0%)), transparent), linear-gradient(to bottom, transparent, #000 var(--hero-fade-y, 0%), #000 calc(100% - var(--hero-fade-y, 0%)), transparent);
    mask-composite: intersect;
}

.hero-video {
    position: absolute;
    left: var(--hero-left, 0);
    top: var(--hero-top, 0);
    display: block;
    width: var(--hero-width, 100%);
    max-width: none;
    height: auto;
}

/* under the box's bottom-right corner, never on top of its story */
.hero-motion-toggle {
    position: absolute;
    right: 0;
    top: calc(100% + 16px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background-color: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.hero-motion-toggle:hover { background-color: rgba(0, 0, 0, 0.8); }
.hero-motion-toggle svg { fill: currentColor; }
.hero-motion-toggle .icon-play,
.hero-motion-toggle.is-paused .icon-pause { display: none; }
.hero-motion-toggle.is-paused .icon-play { display: block; }

@media (max-width: 1199px) {
    .hero--media {
        min-height: 0;
        padding: calc(var(--nav-h) + 48px) 0 96px;
        text-align: center;
    }
    .hero--media .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .hero--media .hero-copy { margin: 0 auto; }
    .hero--media .hero-subtitle { margin: 0 auto 32px; }
    .hero--media .hero-buttons,
    .hero--media .hero-stats { justify-content: center; }
    .hero-visual { justify-self: center; width: min(100%, 560px); }
}

@media (max-width: 520px) {
    .hero { padding-bottom: 72px; }
    .hero-subtitle { font-size: 17px; }
    .hero-buttons .btn { width: 100%; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
    .stat-value { font-size: 22px; }
    .stat-label { font-size: 13px; }
}

/* ---------------------------------------------------------------- sections */

.section { padding: 100px 0; }
/* Every other section sits on the lighter ground, counted from the hero, so
   an app without one of the optional sections still alternates cleanly. */
.section--alt,
main > section.section:nth-of-type(even) { background-color: var(--bg-alt); }

.section-header {
    max-width: 680px;
    margin: 0 auto 56px;
    text-align: center;
}

.section-label {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-text);
}

.section-title {
    text-wrap: balance;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
}

.section-subtitle a,
.text-link {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 768px) {
    .section { padding: 72px 0; }
    .section-header { margin-bottom: 40px; }
    .section-subtitle { font-size: 16px; }
}

/* ---------------------------------------------------------------- features */

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.feature-card {
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--card);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
    .feature-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent);
    }
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    font-size: 28px;
    line-height: 1;
}

.feature-title {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 10px;
}

.feature-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.features-extras {
    max-width: 760px;
    margin: 36px auto 0;
    text-align: center;
    font-size: 15px;
    color: var(--text-secondary);
}

@media (max-width: 1000px) {
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .features-grid { grid-template-columns: minmax(0, 1fr); }
    .feature-card { padding: 26px 22px; }
}

/* ---------------------------------------------------------------- how it works */

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    list-style: none;
}

.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.step { text-align: center; }

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--on-accent);
    font-size: 24px;
    font-weight: 700;
}

.step-title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 10px;
}

.step-text {
    font-size: 15px;
    color: var(--text-secondary);
}

@media (max-width: 1000px) {
    .steps,
    .steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .steps--3 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 560px) {
    .steps,
    .steps--5 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* ---------------------------------------------------------------- languages */

.languages-grid {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
}

.language-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background-color: var(--card);
    font-size: 14px;
    font-weight: 500;
}

.language-tag img {
    width: 24px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
}

/* ---------------------------------------------------------------- pricing */

/* One card per plan: what is free, and what the paid tier adds and how it is
   sold. Every app has this section, so every app answers "what does it cost". */
.plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    max-width: 880px;
    margin: 0 auto;
}

.plans--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

/* Each card is two rows of the parent grid (head, list), so the lists of two
   cards start on one line however many lines a head takes. */
.plan {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-self: stretch;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background-color: var(--card);
}

.plan--highlight {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
        var(--card);
}

.plan-name {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.plan-price {
    margin-top: 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--accent-text);
}

.plan-note {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.plan-items {
    list-style: none;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.plan-items li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #E5E5EA;
}

.plan-items li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--success-text);
}

.plans-footnote {
    max-width: 880px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
}

@media (max-width: 720px) {
    .plans { grid-template-columns: minmax(0, 1fr); }
    .plan { padding: 26px 22px; }
}

/* ---------------------------------------------------------------- good to know */

.notes {
    list-style: none;
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.notes li {
    position: relative;
    padding: 18px 20px 18px 50px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background-color: var(--card);
    font-size: 15px;
    color: #E5E5EA;
}

.notes li::before {
    content: "i";
    position: absolute;
    left: 20px;
    top: 17px;
    font: italic 700 18px/1.3 Georgia, serif;
    color: var(--accent-text);
}

@media (max-width: 720px) {
    .notes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- privacy */

.privacy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
}

.privacy-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--card);
}

.privacy-icon {
    flex: none;
    width: 24px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--success-text);
}

.privacy-icon--info { color: var(--text-secondary); font-style: italic; font-family: Georgia, serif; }

.privacy-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.privacy-card p {
    font-size: 14px;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .privacy-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- screenshot rail */

.shots-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 8px max(24px, calc((100% - 1152px) / 2)) 28px;
}

/* A real scroller, so a shot that has gone by can be swiped, scrolled or
   stepped back to. Without JS (or with reduced motion) it is a plain rail;
   site.js turns it into the endless loop. */
.shots-viewport::-webkit-scrollbar { display: none; }

.shots-viewport:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: -2px;
}

.shots-viewport.is-looping {
    padding-inline: 0;
    /* fade the edges so shots enter and leave rather than being cut */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.shots-track {
    display: flex;
    width: max-content;
}

/* Spacing is margin, not gap, on purpose: the loop moves by whole sets, and a
   gap would sit between the copies but not at the ends, so the loop would jump. */
.shot {
    flex: 0 0 auto;
    width: 210px;
    margin-right: 28px;
    text-align: center;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px;
    border: 6px solid #1A1A1D;
    background-color: #000000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
}

.shot figcaption {
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Back / pause / forward, below the rail: on a phone an arrow over it would
   sit on the very shot it is meant to reveal. */
.shots-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
}

.shots-controls[hidden],
.shots-btn[hidden] { display: none; }

.shots-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* a button's edge needs 3:1 to be seen: text-secondary, not the border token */
    border: 1px solid var(--text-secondary);
    background-color: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

@media (hover: hover) {
    .shots-btn:hover { border-color: var(--text); }
}

.shots-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shots-toggle svg { fill: currentColor; stroke: none; }
.shots-toggle .icon-play,
.shots-toggle.is-paused .icon-pause { display: none; }
.shots-toggle.is-paused .icon-play { display: block; }

@media (max-width: 520px) {
    .shot { width: 180px; margin-right: 20px; }
}

/* ---------------------------------------------------------------- call to action */

.cta {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent-2) 5%, transparent));
}

.cta h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.cta p {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

/* The Google Play button, drawn inline: no third-party badge image. */
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 205px;
    min-height: 60px;
    padding: 10px 22px;
    border: 1px solid #A6A6A6;
    border-radius: 12px;
    background: #000000;
    color: #FFFFFF;
    text-align: left;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.store-btn:hover {
    transform: translateY(-2px);
    border-color: #FFFFFF;
}

.store-btn .lines { display: flex; flex-direction: column; line-height: 1.15; }
.store-btn small { font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
.store-btn strong { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- footer */

.site-footer {
    padding: 60px 0 30px;
    border-top: 1px solid var(--border);
    background-color: var(--card);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h2 {
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.footer-section ul { list-style: none; }
.footer-section li { margin-bottom: 12px; }

.footer-section a {
    color: var(--text);
    font-size: 15px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer-section a:hover { color: var(--accent-text); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-secondary);
}

.footer-bottom a { color: var(--text-secondary); text-decoration: none; }
.footer-bottom a:hover { color: var(--text); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 24px; }

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

@media (max-width: 520px) {
    .footer-content { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom nav { justify-content: center; }
}

/* ---------------------------------------------------------------- legal pages */

.legal-hero {
    padding: calc(var(--nav-h) + 72px) 0 48px;
    text-align: center;
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%);
}

.legal-hero .section-header { margin-bottom: 0; }
.legal-hero .section-title { font-size: clamp(32px, 5vw, 48px); }

.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background-color: var(--card);
    color: var(--text-secondary);
    font-size: 14px;
}

/* The policy text is the app's own, moved word for word. build.py wraps each
   top-level section of a flat policy in a .card so every app reads the same. */
.legal-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 100px;
    line-height: 1.7;
    color: #E5E5EA;
}

.legal-content .card {
    margin-bottom: 20px;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background-color: var(--card);
}

.legal-content h2 {
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.legal-content h3 {
    margin: 24px 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}

.legal-content p { margin-bottom: 12px; }
.legal-content ul,
.legal-content ol { margin: 0 0 12px 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content strong { font-weight: 600; color: var(--text); }

.legal-content a,
.legal-content .definition-term,
.legal-content .right-title {
    color: var(--accent-text);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.legal-content a { text-decoration: underline; text-underline-offset: 3px; }

.legal-content .highlight-box,
.legal-content .contact-info,
.legal-content .highlight,
.legal-content .callout {
    margin: 16px 0;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    background-color: var(--bg);
}

.legal-content .highlight p:last-child,
.legal-content .callout p:last-child { margin-bottom: 0; }

.legal-content .lead { font-size: 17px; color: var(--text); }
.legal-content .highlight-title { margin-bottom: 6px; font-weight: 700; color: var(--text); }
.legal-content .success-text { color: var(--success-text); font-weight: 600; }

/* Give It Up's policies carry their own title and date line under the header. */
.legal-content .page-title { margin-bottom: 4px; font-size: 20px; font-weight: 700; color: var(--text); }
.legal-content .page-meta { margin-bottom: 16px; color: var(--text-secondary); font-size: 14px; }

.legal-content .gdpr-rights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.legal-content .right-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background-color: var(--bg);
}

.legal-content .right-title { display: block; margin-bottom: 8px; }

.legal-content .section-divider {
    height: 1px;
    margin: 24px 0;
    background-color: var(--border);
}

.legal-content table {
    width: 100%;
    margin: 12px 0 20px;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-content .table-wrap { overflow-x: auto; }

.legal-content th,
.legal-content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.legal-content th { color: var(--text); font-weight: 600; }

.legal-content .badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text);
}

.legal-content .badge-yes { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.legal-content .badge-local { background-color: rgba(108, 72, 255, 0.28); }

@media (max-width: 768px) {
    .legal-hero { padding: calc(var(--nav-h) + 48px) 0 32px; }
    .legal-content { padding: 0 16px 72px; }
    .legal-content .card { padding: 22px; }
    .legal-content .gdpr-rights { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 404 */

.notfound {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 64px) 0 80px;
    text-align: center;
    background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%);
}

.notfound .code {
    font-size: clamp(72px, 14vw, 140px);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.notfound h1 { margin: 16px 0 12px; font-size: clamp(26px, 4vw, 36px); }
.notfound p { margin: 0 auto 32px; max-width: 520px; color: var(--text-secondary); }

/* ---------------------------------------------------------------- hub */

.app-group { margin-bottom: 64px; }
.app-group:last-child { margin-bottom: 0; }

.app-group-title {
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    list-style: none;
}

.app-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background-color: var(--card);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
    .app-card:hover {
        transform: translateY(-4px);
        border-color: var(--app-accent, var(--accent));
    }
}

.app-card-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.app-card-head img {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 16px;
}

.app-card h4 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.app-card h4 a { text-decoration: none; }
/* the whole card opens the app's site; its two links sit above this layer */
.app-card h4 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.app-card { position: relative; }

.app-card-tag {
    font-size: 13px;
    color: var(--text-secondary);
}

.app-card p {
    flex: 1;
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 22px;
}

.app-card-links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.app-card-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* Each card's button in its own app's colour: the accent text on a tint of the
   accent, filled with the accent on hover. accent_text is checked by the build
   at 4.5:1 on the card; axe re-measures it on the tint. */
.app-card-links .site-link {
    border: 1px solid color-mix(in srgb, var(--app-accent, var(--accent)) 45%, transparent);
    background: color-mix(in srgb, var(--app-accent, var(--accent)) 12%, var(--card));
    color: var(--app-accent-text, var(--accent-text));
    transition: background-color 0.2s ease, color 0.2s ease;
}

.app-card-links .site-link:hover,
.app-card-links .site-link:focus-visible {
    background: var(--app-accent, var(--accent));
    color: var(--app-on-accent, var(--on-accent));
}

.app-card-links .play-link {
    border: 1px solid var(--border);
    color: var(--text);
}

.app-card-links .play-link:hover { background-color: var(--card-hover); }

@media (max-width: 1000px) {
    .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .app-grid { grid-template-columns: minmax(0, 1fr); }
    .app-card { padding: 24px 22px; }
}

/* ---------------------------------------------------------------- accessibility */

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    padding: 12px 18px;
    border-radius: 10px;
    background-color: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    text-decoration: none;
}

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

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--accent-text);
    outline-offset: 3px;
}

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