/* SignalStag styles.css — alphabetical selectors */

/* Base / resets */
:root { color-scheme: light dark; }
body { background: Canvas; color: CanvasText; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; margin: 0; }
h1, h2 { margin: 0 0 .6rem; }
img { display: block; height: auto; max-width: 100%; }
label { font-weight: 600; }

/* Buttons */
.btn { border: 1px solid color-mix(in oklab, CanvasText, transparent 85%); border-radius: .7rem; color: inherit; display: inline-block; padding: .7rem 1rem; text-decoration: none; }
.btn.primary { background: #2f6f63; border-color: transparent; color: #fff; }
.btn.primary:hover, .btn.primary:focus-visible { filter: brightness(.95); }

/* Cards */
.card { background: Canvas; border: 1px solid color-mix(in oklab, CanvasText, transparent 85%); border-radius: 1rem; display: grid; gap: .75rem; padding: 1rem; }

/* Containers / layout */
.container { margin: auto; max-width: 1100px; padding: 0 1rem; }
.device { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.device img { border-radius: 1.2rem; box-shadow: 0 10px 24px rgba(0,0,0,.06); height: auto; width: min(45%, 420px); }
.feature-list { display: grid; gap: .5rem; padding-left: 1rem; }
.hero { padding: 4rem 0 3rem; }
.lead { font-size: 1.125rem; opacity: .95; }
.muted { background: color-mix(in oklab, CanvasText, transparent 95%); }
.row { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.section { padding: 3rem 0; }

/* Forms */
.hp { height: 0; left: -9999px !important; overflow: hidden; position: absolute !important; width: 0; }
input, textarea { background: color-mix(in oklab, Canvas, CanvasText 2%); border: 1px solid color-mix(in oklab, CanvasText, transparent 85%); border-radius: .7rem; color: inherit; padding: .7rem .8rem; width: 100%; }
input:focus-visible, textarea:focus-visible { outline: 3px solid #2f6f63; outline-offset: 2px; }

/* Headings */
.h1 { font-size: clamp(1.8rem, 2vw + 1.1rem, 3rem); }
.h2 { font-size: clamp(1.3rem, 1.2vw + .9rem, 2rem); }

/* Header / nav */
header.site-header { background: Canvas; border-bottom: 1px solid color-mix(in oklab, CanvasText, transparent 85%); position: sticky; top: 0; }
header .brand { align-items: center; color: inherit; display: inline-flex; font-weight: 700; gap: .5rem; text-decoration: none; }
nav a { border-radius: .5rem; color: inherit; padding: .5rem .6rem; text-decoration: none; }
nav a:hover, nav a:focus-visible { background: color-mix(in oklab, CanvasText, transparent 92%); }
nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }

/* Skip link */
.skip-link { left: -999px; position: absolute; top: -999px; }
.skip-link:focus { background: #2f6f63; border-radius: .5rem; color: #fff; left: 1rem; padding: .5rem .75rem; top: 1rem; }

/* Small text */
.small { font-size: .95rem; opacity: .9; }

/* Footer */
footer { border-top: 1px solid color-mix(in oklab, CanvasText, transparent 85%); padding: 1rem 0; }

/* Utility (optional center class for message pages) */
.center { padding: 6rem 1rem; text-align: center; }