:root {
  --canvas: #F8F4EC; --surface: #FFFDF8; --sunken: #EFE7D8; --ink: #2A2522; --ink2: #6B625A; --ink3: #8F857B;
  --hair: #E3D9C8; --gold: #A8823E; --goldText: #86662B;
}
@media (prefers-color-scheme: dark) {
  :root { --canvas: #0F1420; --surface: #171D2B; --sunken: #1E2536; --ink: #F2EDE4; --ink2: #A9A296; --ink3: #7C8495;
          --hair: #2A3245; --gold: #D4B373; --goldText: #DCC08A; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink);
       font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 48px 20px 64px; }
h1, h2, h3, .serif { font-family: "New York", ui-serif, Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { font-size: 40px; margin: 0 0 8px; letter-spacing: -0.5px; }
h2 { font-size: 24px; margin: 36px 0 8px; }
p, li { color: var(--ink2); }
a { color: var(--goldText); }
img { max-width: 100%; display: block; }
.rule { width: 32px; height: 1px; background: var(--gold); margin: 16px 0 24px; }
.center { text-align: center; }
.center .rule { margin-left: auto; margin-right: auto; }
.seal { width: 112px; height: 112px; border-radius: 50%; border: 1.5px solid var(--gold); margin: 0 auto 28px;
        display: flex; align-items: center; justify-content: center; font: italic 48px ui-serif, Georgia, serif; color: var(--goldText);
        box-shadow: inset 0 0 0 7px var(--canvas), inset 0 0 0 7.5px color-mix(in srgb, var(--gold) 40%, transparent); }
.card { background: var(--surface); border: 0.5px solid var(--hair); border-radius: 16px; padding: 24px; margin: 28px 0; }
.code { font: 500 30px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px; color: var(--ink); margin: 6px 0 4px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink3); }
.button { display: block; text-align: center; text-decoration: none; padding: 15px 20px; border-radius: 999px;
          font-weight: 600; margin-top: 12px; border: 1px solid var(--hair); color: var(--ink); background: transparent; width: 100%; font-size: 17px; cursor: pointer; }
.button.primary { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
@media (prefers-color-scheme: dark) { .button.primary { background: var(--gold); border-color: var(--gold); color: #0F1420; } }
small, .muted { color: var(--ink3); font-size: 14px; }
footer { margin-top: 48px; font-size: 14px; color: var(--ink3); }

/* Landing page */
.landing { max-width: 1040px; }
.hero { text-align: center; padding: 24px 0 8px; }
.hero h1 { font-size: clamp(44px, 9vw, 72px); }
.hero .tagline { font-family: ui-serif, Georgia, serif; font-style: italic; font-size: clamp(20px, 3.4vw, 26px); color: var(--ink2); margin: 0 auto 8px; max-width: 560px; }
.hero .lead { max-width: 520px; margin: 0 auto 24px; }
.cta { max-width: 320px; margin: 0 auto; }
.phones { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; align-items: flex-start; margin: 56px 0 8px; padding: 0 4px; }
.phone { flex: 0 1 288px; border-radius: 36px; overflow: hidden; border: 1px solid var(--hair); background: var(--surface);
         box-shadow: 0 1px 0 var(--hair), 0 24px 48px -32px rgba(42, 37, 34, 0.35); }
.phone img { width: 100%; height: auto; }
.caption { text-align: center; font-size: 13px; color: var(--ink3); margin-top: 12px; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 56px 0 0; }
.feature { background: var(--surface); border: 0.5px solid var(--hair); border-radius: 16px; padding: 22px; text-align: left; }
.feature h3 { font-size: 21px; margin: 6px 0 6px; color: var(--ink); }
.feature p { margin: 0; font-size: 15px; }
.privacy-note { text-align: center; margin: 56px auto 0; max-width: 560px; }
.site-footer { text-align: center; border-top: 0.5px solid var(--hair); padding-top: 24px; }
.site-footer a { margin: 0 6px; }
@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  .phones { gap: 24px; }
  .phone { flex: 0 1 320px; border-radius: 28px; }
  .phone:nth-child(3) { display: block; }
  .phone:nth-child(2) { transform: none; }
}