/* =============================================================================
   Synapse site pages (landing, terms, privacy) - v4.64.
   -----------------------------------------------------------------------------
   Layout and components only. Colours, typefaces and the lockup come from
   hypnos-brand.css, the Hypnos Medical brand kit's own file, copied verbatim
   (kit v1.1; spec v1.2) - change the kit, not this, for anything brand. The
   simulator (/sim/) has its own dark monitor styling and does not use this.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: #fff;
    color: var(--hm-text);
    font: 400 16px/1.6 var(--hm-sans);
}
a { color: var(--hm-teal); }
a:hover { color: var(--hm-navy); }
:focus-visible { outline: 3px solid var(--hm-teal); outline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--hm-serif); font-weight: 400; color: var(--hm-navy); line-height: 1.2; }

/* --- buttons ---------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 20px; border-radius: 8px;
    font: 600 15px/1.2 var(--hm-sans); text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--hm-teal); color: #fff; }
.btn-primary:hover { background: #166674; color: #fff; }
.btn-navy { background: var(--hm-navy); color: #fff; }
.btn-navy:hover { background: #0b2842; color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-outline { background: #fff; color: var(--hm-navy); border-color: var(--hm-border); }
.btn-outline:hover { border-color: var(--hm-navy); color: var(--hm-navy); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-block { width: 100%; }

/* --- nav (horizontal lockup, on dark) ---------------------------------------- */
.site-nav { background: var(--hm-navy); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.site-nav .hm-lockup { text-decoration: none; }
.site-nav nav { display: flex; align-items: center; gap: 20px; }
.site-nav nav a:not(.btn) { color: #d8e2ec; text-decoration: none; font-size: 14px; }
.site-nav nav a:not(.btn):hover { color: #fff; }
.site-nav .btn { min-height: 36px; padding: 6px 14px; font-size: 14px; }
@media (max-width: 640px) { .site-nav nav a:not(.btn) { display: none; } }

/* --- hero (spec: hero display, one-off) --------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--hm-navy); color: #fff; }
.hero .wrap { position: relative; padding-top: 72px; padding-bottom: 88px; }
.hero-moon {
    position: absolute; right: 16px; top: 40px; width: 240px; height: auto;
    opacity: 0.18; pointer-events: none; user-select: none;
}
.hero h1 { color: #fff; font-size: clamp(48px, 8vw, 80px); margin: 0 0 8px; letter-spacing: -0.01em; }
.hero .lede { font-size: clamp(19px, 2.4vw, 23px); color: #fff; margin: 0 0 16px; max-width: 34em; }
.hero p { color: #c9d6e2; max-width: 38em; margin: 0 0 28px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 640px) {
    .hero .wrap { padding-top: 48px; padding-bottom: 56px; }
    .hero-moon { width: 160px; top: 24px; right: -24px; }
}

/* --- active-access banner ------------------------------------------------------ */
.access-banner { background: #e6f2f4; border-bottom: 1px solid #c4dfe3; }
.access-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.access-banner p { margin: 0; color: var(--hm-navy); }
.access-banner .code { font-family: Consolas, Menlo, monospace; letter-spacing: 0.08em; }

/* --- sections ------------------------------------------------------------------ */
.section { padding: 72px 0; }
.section.alt { background: var(--hm-surface); }
.section h2 { font-size: clamp(28px, 4vw, 36px); margin: 0 0 8px; }
.section .intro { color: var(--hm-muted); margin: 0 0 32px; max-width: 42em; }
@media (max-width: 640px) { .section { padding: 48px 0; } }

/* --- access cards ---------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--hm-border); border-radius: 12px; padding: 24px;
}
.card.featured { border: 2px solid var(--hm-teal); padding: 23px; }
.card .eyebrow { font: 600 12px/1 var(--hm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-teal); margin: 0 0 12px; }
.card h3 { font-size: 24px; margin: 0 0 4px; }
.card .price { font: 400 34px/1.1 var(--hm-serif); color: var(--hm-navy); margin: 8px 0 2px; }
.card .price-note { font-size: 13px; color: var(--hm-muted); margin: 0 0 16px; }
.card ul { margin: 0 0 20px; padding-left: 20px; }
.card li { margin: 4px 0; }
.card .grow { flex: 1; }
.card .fine { font-size: 13px; color: var(--hm-muted); margin: 10px 0 0; text-align: center; }
.redeem-row { display: flex; gap: 8px; }
.redeem-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.06em; font-family: Consolas, Menlo, monospace; }
input, textarea {
    width: 100%; font: 400 16px/1.4 var(--hm-sans); color: var(--hm-text);
    background: #fff; border: 1px solid #b9c7d4; border-radius: 8px; padding: 10px 12px;
}
input:focus, textarea:focus { outline: none; border-color: var(--hm-teal); box-shadow: 0 0 0 3px rgba(27, 122, 138, 0.2); }
label { display: block; font-weight: 600; font-size: 14px; color: var(--hm-navy); margin: 0 0 6px; }
.msg { min-height: 1.4em; font-size: 14px; margin: 10px 0 0; }
.msg.err { color: #a3312b; }
.msg.ok { color: #1d6b3a; }
.scenario-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin: 28px 0 0; }
.included-label { font-size: 14px; color: var(--hm-muted); margin: 0; }
.legend { display: flex; gap: 8px; margin: 0; }
.scenario-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }

/* Free vs premium chips. Free takes the brand teal; premium a warm gold, so the
   pair differs in hue AND lightness, stays distinct for red-green colour
   blindness (no red/green pairing), and gold reads as "special". Names stay
   navy on a pale tint for contrast; the tag repeats the meaning in words. */
.chip { --c-bg: #fff; --c-border: var(--hm-border); --c-dot: var(--hm-dim); --c-ink: var(--hm-navy);
    display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 4px 12px;
    font-size: 14px; line-height: 1.4; color: var(--hm-navy); background: var(--c-bg); border: 1px solid var(--c-border); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-dot); flex: none; }
.chip .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink); }
.chip.free { --c-bg: #e6f2f4; --c-border: #9fcbd3; --c-dot: #1b7a8a; --c-ink: #145d69; }
.chip.premium { --c-bg: #fdf3d8; --c-border: #e3c16f; --c-dot: #c88a0a; --c-ink: #7a5208; }
.legend .chip { font-size: 13px; padding: 2px 10px; }

/* --- purchase result panel ------------------------------------------------------ */
.panel-backdrop {
    position: fixed; inset: 0; background: rgba(15, 53, 87, 0.55);
    display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50;
}
.panel-backdrop.open { display: flex; }
.panel { background: #fff; border-radius: 14px; max-width: 520px; width: 100%; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.panel h2 { font-size: 28px; margin: 0 0 12px; }
.panel .code-box {
    font: 600 26px/1.2 Consolas, Menlo, monospace; letter-spacing: 0.1em; color: var(--hm-navy);
    background: var(--hm-surface); border: 1px dashed #9fb4c6; border-radius: 10px;
    text-align: center; padding: 16px; margin: 16px 0 8px; user-select: all;
}
.panel .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* --- features strip ---------------------------------------------------------------- */
/* Boxed like the access cards above (same 20px gap, radius and padding), so the
   three columns share one grid and edges. */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.feature { background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: 12px; padding: 24px; }
.features h3 { font-size: 21px; margin: 0 0 8px; }
.features p { margin: 0; color: var(--hm-muted); }

/* --- contact ----------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } }
.contact-form .field { margin-bottom: 16px; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- footer (mark alone, on dark, 70%) ------------------------------------------ */
.site-footer { background: var(--hm-navy); color: #b8c6d3; font-size: 14px; }
.site-footer .wrap { padding-top: 36px; padding-bottom: 36px; display: grid; gap: 16px; }
.site-footer .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer .hm-lockup { opacity: 0.7; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: #d8e2ec; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer p { margin: 0; }

/* --- legal pages -------------------------------------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 16px 80px; }
.legal h1 { font-size: clamp(34px, 5vw, 44px); margin: 0 0 4px; }
.legal .updated { color: var(--hm-muted); margin: 0 0 32px; }
.legal h2 { font-size: 23px; margin: 36px 0 8px; }
.legal li { margin: 4px 0; }
.draft-note { background: #fff6e0; border: 1px solid #e8c77a; color: #6b4e0f; border-radius: 8px; padding: 12px 14px; font-size: 14px; margin: 0 0 28px; }