/* Ring The Alarm: pages at patoispal.com/ringthealarm.
   Dark moulded case, a lit green display, red / gold / green where it counts. */
:root {
    --case: #121110;
    --case-2: #1b1917;
    --ink: #f1ece2;
    --ink-soft: #a39c8f;
    --lcd: #9be22f;
    --lcd-ink: #10200a;
    --red: #CE1126;
    --gold: #FED100;
    --green: #009B3A;
    --display: 'Anton', 'DIN Condensed', Impact, sans-serif;
    --body: 'Nunito', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--case); }
body {
    font-family: var(--body);
    color: var(--ink);
    background:
        radial-gradient(1200px 700px at 50% -120px, rgba(155, 226, 47, 0.16), transparent 70%),
        var(--case);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.brand img { width: 44px; height: 44px; border-radius: 11px; }
.nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
    display: inline-block; padding: 9px 18px; border-radius: 999px; text-decoration: none;
    font-weight: 800; font-size: 0.95rem; border: 2px solid rgba(241, 236, 226, 0.22);
}
.pill:hover { border-color: rgba(241, 236, 226, 0.6); }
.pill--solid { background: var(--gold); color: #121110; border-color: var(--gold); }

/* Hero */
.hero { text-align: center; padding: 40px 0 30px; }
.hero .icon { width: 132px; height: 132px; border-radius: 30px; margin: 0 auto 26px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); }
.title { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 0.95; font-size: clamp(3rem, 9vw, 6.4rem); letter-spacing: 0.01em; }
.lede { max-width: 640px; margin: 18px auto 0; font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--ink-soft); font-weight: 800; }

/* The display: a strip of lit LCD glass. */
.lcd {
    display: inline-block; margin: 28px auto 0; padding: 12px 26px; border-radius: 10px;
    background: radial-gradient(circle at 40% 40%, #b6f548, var(--lcd) 55%, #6fb219);
    color: var(--lcd-ink); font-family: 'Courier New', monospace; font-weight: 700;
    font-size: clamp(1.4rem, 4vw, 2.2rem); letter-spacing: 0.18em;
    box-shadow: 0 0 0 4px #0a0a09, 0 0 50px rgba(155, 226, 47, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.cta { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.store {
    display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: 14px;
    background: #fff; color: #111; text-decoration: none; font-weight: 900; font-size: 1.1rem;
}
.store svg { width: 24px; height: 24px; }
.price { color: var(--ink-soft); font-size: 0.95rem; font-weight: 700; }

/* Screenshot rail */
.rail {
    display: flex; gap: 18px; overflow-x: auto; padding: 30px 20px 36px; scroll-snap-type: x mandatory;
    max-width: 1320px; margin: 0 auto;
}
.rail img { width: 250px; flex: 0 0 auto; border-radius: 26px; scroll-snap-align: center; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }

/* Features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; padding: 20px 0 50px; }
.feature { background: var(--case-2); border: 1px solid rgba(241, 236, 226, 0.08); border-radius: 22px; padding: 26px; }
.feature h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; margin-bottom: 8px; }
.feature p { color: var(--ink-soft); font-weight: 700; }
.feature .tag { display: inline-block; margin-bottom: 12px; width: 44px; height: 8px; border-radius: 4px; }

/* Text pages (privacy, support) */
.page-head { padding: 30px 0 10px; }
.page-head .title { font-size: clamp(2.8rem, 8vw, 5rem); }
.doc { max-width: 720px; padding: 10px 0 60px; }
.doc h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 1.9em 0 0.4em; line-height: 1.1; }
.doc h2:first-child { margin-top: 0.6em; }
.doc p, .doc li { color: #d9d3c7; font-weight: 600; }
.doc p { margin-bottom: 1em; }
.doc ul { padding-left: 1.2em; margin-bottom: 1em; }
.doc li { margin-bottom: 0.45em; }
.doc a { color: var(--gold); text-underline-offset: 3px; }
.doc .effective { margin-top: 2.4em; color: var(--ink-soft); }
.doc details { background: var(--case-2); border: 1px solid rgba(241, 236, 226, 0.08); border-radius: 16px; padding: 16px 20px; margin-bottom: 12px; }
.doc summary { cursor: pointer; font-weight: 900; font-size: 1.08rem; color: var(--ink); }
.doc details p, .doc details ul { margin-top: 10px; margin-bottom: 0; }
.contact { background: var(--gold); color: #121110; border-radius: 22px; padding: 26px; margin: 20px 0 30px; }
.contact h2 { margin: 0 0 6px !important; color: #121110; }
.contact p { color: #121110; font-weight: 800; margin: 0; }
.contact a { color: #121110; }

/* Footer */
.footer { border-top: 1px solid rgba(241, 236, 226, 0.1); padding: 28px 0 40px; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: space-between; align-items: center; color: var(--ink-soft); font-weight: 700; font-size: 0.95rem; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
.stripe { height: 8px; background: linear-gradient(90deg, var(--red) 0 33.3%, var(--gold) 33.3% 66.6%, var(--green) 66.6%); }

@media (max-width: 520px) {
    .nav { padding: 16px 0; }
    .brand span { display: none; }
    .rail img { width: 210px; }
}