:root {
  color-scheme: light;
  --ink:#161512; --cream:#FFFBF3; --gold:#9A8560; --silver:#CDC7BA; --silver-deep:#3A3731; --line:#3A3731;
  --bg:#FFFBF3; --card:rgba(255,251,243,.62); --bad:#6e2a24; --good:#2d5340;
}
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:18px/1.5 Palatino, "Palatino Linotype", "Iowan Old Style", Georgia, serif; }
body::before { content:""; position:fixed; inset:0 auto auto 0; width:240px; height:240px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, rgba(154,133,96,.28), transparent 68%); transform:translate(calc(var(--mx, -200px) - 120px), calc(var(--my, -200px) - 120px)); }
a { color:var(--gold); }
.skip { position:absolute; left:-999px; }
.skip:focus { left:8px; top:8px; background:var(--cream); padding:6px; }
.top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:16px clamp(16px, 4vw, 40px); border-bottom:1px solid var(--silver); background:rgba(255,251,243,.8); position:sticky; top:0; z-index:2; }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--ink); }
.brand img { display:block; max-width:100%; }
.word { height:36px; width:auto; }
.nav-toggle { display:none; }
nav { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.btn, button.btn { background:var(--cream); color:var(--ink); border:1px solid var(--silver-deep); border-radius:999px; padding:10px 18px; box-shadow:0 8px 18px rgba(22,21,18,.08); font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { box-shadow:0 10px 22px rgba(154,133,96,.28); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
main { padding:clamp(16px, 4vw, 48px); max-width:1120px; margin:0 auto; }
.card { background:var(--card); border:1px solid rgba(205,199,186,.9); border-radius:22px; padding:clamp(16px, 3vw, 28px); margin-bottom:16px; backdrop-filter:blur(16px); box-shadow:0 10px 30px rgba(22,21,18,.04); }
.hero { display:grid; gap:8px; justify-items:start; }
.hero-mark { width:min(220px, 46vw); height:auto; }
.kicker { letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-size:.78rem; margin:0; }
.hero h1 { font-size:clamp(2rem, 5vw, 3.4rem); line-height:1.15; margin:.2rem 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.feature h2 { margin-top:0; }
.also { color:var(--silver-deep); font-size:.85rem; }
label, .field { display:block; margin:12px 0; }
input, select, textarea { width:min(100%, 460px); max-width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--silver-deep); border-radius:12px; background:rgba(255,251,243,.9); color:var(--ink); font:inherit; }
.pwbox { position:relative; display:inline-block; width:min(100%, 460px); }
.pwbox input { width:100%; padding-right:76px; }
.pwbox .eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--gold); font:inherit; cursor:pointer; padding:6px 8px; }
.check { display:flex; gap:8px; align-items:center; }
.banner { padding:10px 12px; border-radius:12px; border:1px solid var(--silver-deep); }
.bad { background:rgba(110,42,36,.08); }
.good { background:rgba(45,83,64,.1); }
.shell { display:grid; grid-template-columns:minmax(160px, 220px) minmax(0, 1fr); gap:16px; }
aside { display:flex; flex-direction:column; gap:6px; }
aside a { text-decoration:none; color:var(--ink); padding:8px 10px; border-radius:12px; border:1px solid transparent; }
aside a:hover, aside a:focus-visible { border-color:var(--silver); background:rgba(255,251,243,.8); }
table { width:100%; border-collapse:collapse; }
td { border-bottom:1px solid var(--silver); padding:8px; }
@media (max-width:800px) {
  .nav-toggle { display:inline-block; }
  nav { display:none; width:100%; }
  nav.open { display:flex; }
  .shell { grid-template-columns:1fr; }
  .top { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { display:none; }
  * { scroll-behavior:auto !important; transition:none !important; }
}