:root{
  --tangerine:#c7521a; --tangerine-top:#d65e21; --tangerine-bottom:#ad4212;
  --sky:#5ca8d6; --gold:#fabd33;
  --ink:#2b2118; --ink-soft:#6d5f52;
  --paper-top:#f3ece1; --paper-bottom:#e8dcc9;
  --card:#fffaf2; --line:#ddd0bc;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--paper-top),var(--paper-bottom)) fixed;
  min-height:100vh;
}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* ---- header ---- */
header{background:linear-gradient(180deg,var(--tangerine-top),var(--tangerine-bottom));
  border-bottom:3px solid var(--sky)}
.bar{display:flex;align-items:center;justify-content:space-between;
  max-width:960px;margin:0 auto;padding:18px 24px;gap:16px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none}
.mark b{font-weight:800;letter-spacing:.30em;font-size:19px}
.mark i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:block}
nav{display:flex;gap:20px}
nav a{color:#fff;opacity:.9;text-decoration:none;font-size:14px;font-weight:600}
nav a:hover{opacity:1;text-decoration:underline}

/* ---- hero ---- */
.hero{text-align:center;padding:64px 0 40px}
.hero h1{font-size:clamp(34px,5.5vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hero p{color:var(--ink-soft);font-size:clamp(17px,2.2vw,20px);max-width:620px;margin:18px auto 0}
.rule{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 26px}
.rule span{height:3px;width:104px;background:var(--gold);opacity:.55}
.rule i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.badge{display:inline-block;margin-top:28px;padding:11px 22px;border-radius:999px;
  background:var(--tangerine);color:#fff;font-weight:700;font-size:15px}
.note{margin-top:12px;font-size:13px;color:var(--ink-soft)}

/* ---- shots ---- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:28px 0 8px}
figure{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
figure img{width:100%;height:auto;display:block}
figcaption{padding:12px 16px;font-size:14px;font-weight:600;color:var(--ink-soft)}

/* ---- features ---- */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:44px 0}
.feat div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.feat h3{font-size:16px;margin-bottom:6px}
.feat p{font-size:14px;color:var(--ink-soft)}

/* ---- legal pages ---- */
.legal{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,4vw,44px);margin:44px 0}
.legal h1{font-size:30px;margin-bottom:6px}
.legal .updated{color:var(--ink-soft);font-size:14px;margin-bottom:26px}
.legal h2{font-size:18px;margin:28px 0 8px}
.legal p,.legal li{color:var(--ink-soft);margin-bottom:10px}
.legal ul{padding-left:22px}
.legal strong{color:var(--ink)}

footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 44px;
  text-align:center;color:var(--ink-soft);font-size:13px}
footer a{color:var(--tangerine);font-weight:600;text-decoration:none}
footer a:hover{text-decoration:underline}

@media (prefers-color-scheme:dark){
  :root{--ink:#f0e7db;--ink-soft:#b3a695;--paper-top:#241d17;--paper-bottom:#191410;
        --card:#2c241d;--line:#3d3228}
}

/* ---- language switcher ---- */
.lang{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;font-weight:600}
.lang option{color:#2b2118;background:#fff}

/* ---- support form ---- */
.form{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.form input,.form textarea{font:inherit;padding:11px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper-top);color:var(--ink);width:100%}
.form input:focus,.form textarea:focus{outline:2px solid var(--sky);outline-offset:1px}
.form fieldset{border:1px solid var(--line);border-radius:12px;padding:16px}
.form legend{font-size:13px;font-weight:700;color:var(--ink-soft);padding:0 6px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.form button{align-self:flex-start;background:var(--tangerine);color:#fff;border:0;
  border-radius:999px;padding:12px 30px;font:inherit;font-weight:700;cursor:pointer}
.form button:hover{background:var(--tangerine-bottom)}
.form button:disabled{opacity:.6;cursor:default}
.msg{font-size:14px;font-weight:600;padding:10px 0}
.msg.ok{color:#2e7d32}
.msg.err{color:#c62828}
.enonly{background:rgba(92,168,214,.14);border-left:3px solid var(--sky);
  padding:10px 14px;border-radius:6px;font-size:14px;margin-bottom:22px}
.feat div p{font-size:15px;color:var(--ink-soft)}

/* ---- embed=1: the app opens /support inside a WKWebView sheet that already has its
   own title bar and Done button, so the site chrome would be a second, confusing one. */
html.embed header, html.embed footer{display:none}
html.embed .legal{margin-top:18px}

/* Body links use the brand tangerine, not the browser default blue. */
.legal a, main a:not(.badge):not(.mark){color:var(--tangerine);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}
.legal a:hover, main a:not(.badge):not(.mark):hover{color:var(--tangerine-bottom)}