/* Loreantz Frame - one stylesheet for every page. */
:root { --bg:#edf1e2; --card:#fbfcf6; --ink:#1f2622; --ink2:#5b6660; --line:#c9d1bd; --accent:#2f6b4f; --err:#b3392f;
        --bar:#2b322e; --bar-ink:#eef2e8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1d2320; --card:#262d29; --ink:#e7ece4; --ink2:#a3ada6; --line:#3a433e; --accent:#7cc39f; --err:#ef8a80;
          --bar:#161b18; }
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
.section, #pricing { scroll-margin-top:16px; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--accent); }
main { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.card { width:100%; max-width:400px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 24px; }
h1 { font-size:22px; margin:0 0 6px; } h2 { font-size:17px; margin:26px 0 4px; }
p  { color:var(--ink2); margin:0 0 18px; line-height:1.45; font-size:15px; }
label { display:block; font-size:13px; color:var(--ink2); margin:14px 0 6px; }
input, select, textarea { width:100%; font-size:16px; padding:11px 13px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
button, .btn { display:block; width:100%; margin-top:16px; font-size:16px; font-weight:600; padding:12px; border:0;
  border-radius:9px; background:var(--accent); color:#fff; cursor:pointer; text-align:center; text-decoration:none; font-family:inherit; }
@media (prefers-color-scheme: dark) { button, .btn { color:#13201a; } }
.alt { background:transparent !important; color:var(--accent) !important; border:1px solid var(--accent) !important; }
button[disabled] { opacity:.6; cursor:default; }
.msg { min-height:22px; margin-top:12px; font-size:14px; color:var(--err); } .msg.ok { color:var(--accent); }
.plan { display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:10px;
  margin-top:10px; cursor:pointer; font-size:16px; }
.plan input { width:auto; margin:0; } .plan b { margin-left:auto; }
.plan:has(input:checked) { border-color:var(--accent); outline:1px solid var(--accent); }
.small { font-size:13px; color:var(--ink2); margin-top:14px; }
.links { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:14px; margin-top:16px; }
.home { display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:600; margin-bottom:18px; }
.logo { width:24px; height:20px; flex:none; }

/* account page */
.status { padding:12px 14px; border-radius:10px; border:1px solid var(--line); margin:12px 0 0; font-size:15px; }
.status.on { border-color:var(--accent); }
.device { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.device span { flex:1; } .device small { display:block; color:var(--ink2); font-size:13px; }
.device button { width:auto; margin:0; padding:8px 12px; font-size:14px; }
hr { border:0; border-top:1px solid var(--line); margin:26px 0 0; }
.menu { margin-top:22px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.menu a { display:flex; align-items:center; gap:12px; padding:14px 16px; color:var(--ink); text-decoration:none;
  border-top:1px solid var(--line); }
.menu a:first-child { border-top:0; }
.menu a:hover { background:var(--bg); }
.menu span { flex:1; font-size:16px; }
.menu small { display:block; color:var(--ink2); font-size:13px; margin-top:2px; }
.menu i { font-style:normal; font-size:22px; color:var(--ink2); line-height:1; }
.back { display:inline-block; font-size:14px; margin-bottom:10px; text-decoration:none; }

/* home page */
.top { background:var(--bar); color:var(--bar-ink); }
.top .in { max-width:1040px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:14px; }
.top .home { color:var(--bar-ink); margin:0; font-size:17px; }
.top nav { margin-left:auto; display:flex; align-items:center; gap:16px; font-size:15px; }
.top nav a { color:var(--bar-ink); text-decoration:none; white-space:nowrap; }
.top .home { white-space:nowrap; }
@media (max-width: 480px) { .top nav { gap:12px; } .top .wide { display:none; } }
.top nav .btn { width:auto; margin:0; padding:8px 14px; font-size:15px; color:#fff; background:var(--accent); }
@media (prefers-color-scheme: dark) { .top nav .btn { color:#13201a; } }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }
.hero { padding:48px 0 28px; max-width:680px; }
.hero h1 { font-size:clamp(30px, 6vw, 44px); line-height:1.1; margin:0 0 14px; letter-spacing:-.01em; }
.hero p { font-size:18px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.cta .btn { width:auto; margin:0; padding:13px 22px; }
.shot { margin:8px 0 0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--card); }
.shot img { display:block; width:100%; height:auto; }
.section { padding:44px 0 0; }
.section > h2 { font-size:24px; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
.tile h3 { margin:0 0 6px; font-size:16px; } .tile p { margin:0; }
.price { text-align:center; }
.price .big { font-size:28px; font-weight:700; color:var(--ink); margin:6px 0 2px; }
.steps { margin:0; padding-left:22px; color:var(--ink2); line-height:1.6; font-size:16px; }
.steps li { margin-bottom:8px; }
footer { max-width:1040px; margin:48px auto 0; padding:22px 16px 40px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--ink2); }
footer a { color:var(--ink2); }

/* terms page */
.doc { max-width:720px; margin:0 auto; padding:32px 16px 0; }
.doc h1 { font-size:28px; } .doc h2 { font-size:20px; margin-top:32px; }
.doc p, .doc li { color:var(--ink); line-height:1.6; font-size:16px; }
.doc ul { padding-left:22px; }