/* Shared styles for Reverbot content sub-pages (support, keys, jev, the mode
   guides, the legal pages, the forms). The palette, the header, the footer and
   the base page background are NOT here: they live in assets/site.css, which
   every page — the home page included — links after this file, so the chrome
   is one copy and cannot drift between pages again. */
:root{
  --card-2:rgba(255,255,255,.055);
  /* The reading column. The header and footer use site.css's 1120px. */
  --maxw:860px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{line-height:1.65;overflow-x:hidden}
a{color:var(--cyan)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15;font-weight:700}
/* Balanced headings: no single word left alone on a heading's last line
   ("…nobody else can / open.", "Home Control: coming / soon"). */
h1{font-size:clamp(2rem,5vw,3rem);text-wrap:balance}
h2{font-size:clamp(1.4rem,3.4vw,2rem);margin-bottom:10px;text-wrap:balance}
h3{font-size:1.12rem;margin-bottom:6px}
p{color:var(--ink-dim)}
/* `*{margin:0}` above also took the space between paragraphs, so two or three
   paragraphs in a row ran together as one block. Zero specificity: anything
   that sets its own margin (.page-hero p, the help guides, inline styles)
   still wins. Not inside forms, whose grid gap already spaces them. */
:where(main section,main .card,main .callout) > p + p{margin-top:10px}
/* Plain bullet lists in the page body: the same dots and dimmed text as
   jev.html's lists. The reset above removed the browser's indent, which left
   the default bullets hanging outside the column, 7px from a phone's edge. */
main section:not(.help-task) > ul:not([class]){list-style:none;margin:12px 0 0}
main section:not(.help-task) > ul:not([class]) > li{position:relative;padding:7px 0 7px 28px;color:var(--ink-dim);line-height:1.6}
main section:not(.help-task) > ul:not([class]) > li::before{content:"";position:absolute;left:4px;top:15px;width:9px;height:9px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.5)}
main section:not(.help-task) > ul:not([class]) > li b{color:var(--ink)}
main section:not(.help-task) > ul:not([class]) + p{margin-top:12px}

/* Hero */
.page-hero{padding:64px 0 24px;text-align:center}
/* Matches index.html: .76rem at .2em tracking made a section label read as
   texture rather than as a word. Wide tracking is what makes small uppercase
   type hard to read, so size and weight go up and tracking comes down. */
.kicker{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:clamp(1.15rem,1.6vw,1.38rem);letter-spacing:.12em;
  font-weight:700;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;text-wrap:balance}
/* The hero label carries the home page's rule on each side
   ("— SPEAK INTO THE WORLD … —"), so the sub-pages' hero reads as the same
   site's. */
.page-hero .kicker{display:flex;align-items:center;justify-content:center;gap:11px}
/* The dot between a kicker's two parts would hang at the end of a phone's
   first line, as index.html's hero kicker would; hidden there the same way. */
@media (max-width:560px){.page-hero .kick-dot{display:none}}
.page-hero .kicker::before,.page-hero .kicker::after{content:"";flex:none;display:inline-block;width:34px;height:3px;
  background:currentColor;opacity:.8;border-radius:2px}
.page-hero p{max-width:620px;margin:16px auto 0;font-size:1.06rem;text-wrap:pretty}

section{padding:26px 0}
.section-lead{color:var(--ink-dim);max-width:640px;margin-bottom:18px;text-wrap:pretty}

/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;margin-bottom:18px}
.card.free{border-color:rgba(52,211,153,.32);background:linear-gradient(160deg,rgba(52,211,153,.06),rgba(255,255,255,.02))}
.card-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.card-head h2,.card-head h3{margin-bottom:0}
.badge{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  border-radius:999px;padding:3px 9px;white-space:nowrap}
.badge.free{color:var(--green);background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.4)}
.badge.paid{color:var(--amber);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.38)}

/* Numbered steps */
ol.steps{list-style:none;counter-reset:s;margin:14px 0 4px}
ol.steps li{counter-increment:s;position:relative;padding:8px 0 8px 42px;color:var(--ink-dim);border-bottom:1px solid var(--line)}
ol.steps li:last-child{border-bottom:none}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:7px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--cyan);
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.4)}
ol.steps li b{color:var(--ink)}
/* nowrap: a pill split over two lines drew two half-borders ("…QW" / "aA"). */
code{font-family:ui-monospace,Menlo,monospace;font-size:.86em;background:rgba(0,0,0,.3);border:1px solid var(--line);
  border-radius:6px;padding:2px 6px;white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.94rem;
  border-radius:999px;padding:10px 18px;transition:transform .15s,box-shadow .2s,border-color .2s}
/* COLOUR ONLY, deliberately. In the page body this class always arrives as
   `class="btn btn-primary"`, and `.btn` above already carries the geometry —
   putting padding or a font size here too would win on the cascade and quietly
   restyle every button on fifteen pages. The header's "Get the app" is
   .nav-cta in site.css, not this. */
.btn-primary{background:linear-gradient(120deg,#0ea5b7,#2563eb);color:#fff;border:1px solid rgba(103,232,249,.35);
  box-shadow:0 0 22px rgba(34,211,238,.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(34,211,238,.4)}
.btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(34,211,238,.5)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

/* Callout */
.callout{border-left:3px solid var(--cyan);background:rgba(34,211,238,.05);border-radius:0 12px 12px 0;
  padding:14px 18px;margin:14px 0;color:var(--ink-dim);font-size:.95rem}
.callout.warn{border-left-color:var(--amber);background:rgba(251,191,36,.06)}
.callout b{color:var(--ink)}

img.shot{max-width:100%;border-radius:14px;border:1px solid var(--line);display:block;margin:14px auto}

/* Feature list (support page) */
.feat{display:grid;grid-template-columns:1fr;gap:14px}
.feat .card{margin-bottom:0}
.mode-tag{font-family:ui-monospace,Menlo,monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(34,211,238,.35);border-radius:999px;padding:3px 9px;margin-left:auto}
.say{margin-top:10px;font-family:ui-monospace,Menlo,monospace;font-size:.82rem;color:var(--ink-faint);
  background:rgba(0,0,0,.26);border:1px solid var(--line);border-radius:10px;padding:9px 13px}
.say b{color:var(--cyan);font-weight:500}

/* FAQ */
details.faq{border:1px solid var(--line);border-radius:12px;padding:2px 16px;margin-bottom:10px;background:var(--card)}
details.faq summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"＋";color:var(--cyan);margin-right:10px;font-weight:400}
details.faq[open] summary::before{content:"－"}
details.faq p{padding:0 0 14px}

/* The space above the footer on these pages. */
footer.site-footer{margin-top:40px}

/* Forms (contact, notify, sms). One copy: the three pages had drifted to
   three gaps, two widths and two button paddings. The submit button is the
   site's primary button — the gradient pill with white text — not a flat
   cyan one with dark text beside a gradient "Get the app". */
.form{display:grid;gap:18px;max-width:560px;margin-top:26px}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;font-weight:600}
.field input,.field textarea,.field select{
  width:100%;font:inherit;color:var(--ink);background:rgba(0,0,0,.28);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.15)
}
.field .hint{font-size:.82rem;color:var(--ink-faint)}
/* Honeypot: never shown, never announced. A bot fills it, a person can't. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:.94rem;border-radius:10px;padding:12px 14px;display:none}
.form-status.show{display:block}
.form-status.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.4);color:#a7f3d0}
.form-status.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.4);color:#fecaca}
button.submit{
  justify-self:start;font:inherit;font-weight:600;cursor:pointer;
  border-radius:999px;padding:12px 24px;color:#fff;
  background:linear-gradient(120deg,#0ea5b7,#2563eb);border:1px solid rgba(103,232,249,.35);
  box-shadow:0 0 22px rgba(34,211,238,.25);transition:transform .15s,box-shadow .2s
}
button.submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 0 32px rgba(34,211,238,.4)}
/* Disabled reads as disabled: flat and quiet, not a dimmed primary button. */
button.submit:disabled{opacity:1;cursor:default;color:var(--ink-faint);background:rgba(255,255,255,.05);
  border-color:var(--line);box-shadow:none;transform:none}

/* The help guides (support.html and the mode-*.html pages) carry their own
   CSS, in the site's colours, generated with the page by
   scripts/lib/render_website_help.py. Change it there: the script rewrites
   that block on every run, and a rule restated here would contradict it. */

/* Paper: a button's gradient does not print, so its white label vanished on
   white paper. It prints in ink instead (dark on paper; see site.css). Last
   in the file, so it outranks button.submit above. */
@media print{.btn-primary,button.submit{color:var(--ink)}}