/* Shared by index.html, privacy.html and terms.html. Served from disk by Caddy out of
   /srv/strawberrybear alongside them — see packages/infra/deploy/Caddyfile.

   Deliberately NOT used by the opt-in receipt pages that the `strawberry` service
   renders (packages/strawberry/src/server.ts): those carry their own inline styles so a
   consent confirmation still reads correctly even if this file is missing. */

:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  color: #1a1a1a;
  background: #fff;
  margin: 0;
  padding: 1.25rem;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 720px; margin: 0 auto; }
header { padding: 1rem 0 1.5rem; border-bottom: 1px solid #e5e5e5; }
h1 { font-size: 1.7rem; margin: 0 0 .35rem; }
h2 { font-size: 1.25rem; margin: 2.25rem 0 .5rem; padding-top: .5rem; }
h3 { font-size: 1rem; margin: 1.25rem 0 .35rem; }
p, li { font-size: 1rem; }
ul, ol { padding-left: 1.25rem; }
a { color: #b0004e; }
.lead { font-size: 1.05rem; color: #333; margin: 0; }
.biz { font-size: .95rem; color: #444; margin: .6rem 0 0; }
.verbatim {
  border-left: 4px solid #b0004e;
  background: #faf0f4;
  padding: .75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 6px 6px 0;
}
.script {
  border-left: 4px solid #b0004e;
  background: #faf0f4;
  padding: .35rem 1rem;
  margin: 1rem 0;
  border-radius: 0 6px 6px 0;
}
.script p { margin: .75rem 0; }
.samples li { margin: .5rem 0; }
.kw { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* The opt-in box. Boxed and above the fold on purpose: a carrier reviewing this
   number needs to find the consent mechanism without hunting for it. */
.optin {
  border: 2px solid #b0004e;
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.35rem;
  margin: 1.75rem 0 .5rem;
  background: #fff8fb;
  scroll-margin-top: 1rem;
}
.optin h2 { margin-top: .25rem; }
.optin .consent { font-size: .92rem; color: #333; }
.field { margin: .9rem 0; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.optin input[type="tel"] {
  width: 100%; max-width: 22rem; padding: .6rem .7rem; font-size: 1rem;
  border: 1px solid #c9c9c9; border-radius: 6px; background: #fff; color: #1a1a1a;
}
.check { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; }
.check input { margin-top: .35rem; width: 1.05rem; height: 1.05rem; flex: none; }
/* "This is optional" is the whole point of the box being un-required — it should read
   as reassurance, not fine print. */
.optional { font-size: .92rem; color: #333; margin: 0 0 1.1rem; }
.optin button {
  font-size: 1rem; font-weight: 600; padding: .65rem 1.4rem; border: 0;
  border-radius: 6px; background: #b0004e; color: #fff; cursor: pointer;
}
.optin button:hover { background: #8c003e; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.result { margin: .9rem 0 0; font-weight: 600; }
.result.ok { color: #0a7c4a; }
.result.error { color: #b0004e; }
.hint { font-size: .85rem; color: #666; margin: .3rem 0 0; }
footer {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e5e5;
  font-size: .9rem; color: #555;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (prefers-color-scheme: dark) {
  body { color: #e8e8e8; background: #141414; }
  header, footer { border-color: #333; }
  .lead { color: #ccc; }
  .biz { color: #bbb; }
  footer { color: #aaa; }
  a { color: #ff8fbf; }
  .verbatim, .script { background: #241017; border-left-color: #ff8fbf; }
  .optin { background: #1d1015; border-color: #ff8fbf; }
  .optin .consent, .optional { color: #ccc; }
  .optin input[type="tel"] { background: #0e0e0e; color: #e8e8e8; border-color: #444; }
  .optin button { background: #ff8fbf; color: #1a1a1a; }
  .optin button:hover { background: #ffa9cd; }
  .result.ok { color: #4cd08a; }
  .result.error { color: #ff8fbf; }
  .hint { color: #999; }
}