/* Shared styles for the public pages (landing + legal). Same palette and
   fonts as the app and the old web app, so the brand carries over. */
:root{
  --bg:#14120F;
  --panel:#1D1A16;
  --panel2:#24201B;
  --line:rgba(243,237,228,0.12);
  --red:#E8622C;
  --teal:#6FA8A0;
  --text:#FEE4BF;
  --muted:#AFA492;
  --muted2:#7D7362;
  --glass-bg:rgba(38,34,28,0.5);
  --glass-border:rgba(243,237,228,0.16);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F3EFE7;
    --panel:#FFFFFF;
    --panel2:#EAE4D8;
    --line:rgba(30,25,18,0.14);
    --red:#C94E1F;
    --teal:#3E7D74;
    --text:#1E1912;
    --muted:#5C5344;
    --muted2:#8C8171;
    --glass-bg:rgba(255,255,255,0.6);
    --glass-border:rgba(30,25,18,0.1);
  }
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Cairo', sans-serif; line-height:1.75; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--red);}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}

/* header */
header{border-bottom:1px solid var(--line); padding:16px 0; position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.head{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none;}
.brand-mark{width:34px; height:34px; border-radius:8px; flex-shrink:0; color:#fff; font-size:14px;
  background:linear-gradient(145deg, var(--red), color-mix(in srgb, var(--red) 55%, black));
  display:flex; align-items:center; justify-content:center;}
.brand-name{font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:19px; letter-spacing:0.3px; text-transform:uppercase; line-height:1.1;}
.brand-name small{display:block; font-family:'Cairo', sans-serif; font-size:11px; color:var(--muted2); font-weight:600; text-transform:none; letter-spacing:0;}
nav{display:flex; gap:22px;}
nav a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;}
nav a:hover{color:var(--text);}
@media (max-width:640px){ nav{display:none;} }

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:12px; font-family:'Cairo', sans-serif;
  font-size:15px; font-weight:700; text-decoration:none; border:1px solid var(--line); color:var(--text); background:var(--panel);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;}
.btn:hover{transform:translateY(-1px); border-color:var(--red);}
.btn-accent{background:var(--red); border-color:var(--red); color:#fff;}
.btn-accent:hover{box-shadow:0 10px 24px -8px color-mix(in srgb, var(--red) 70%, transparent);}
.btn[aria-disabled="true"]{opacity:.55; pointer-events:none;}
.btn svg{width:20px; height:20px; flex-shrink:0;}
.btn .btn-lines{display:flex; flex-direction:column; line-height:1.2; text-align:start;}
.btn .btn-lines small{font-size:11px; font-weight:600; opacity:.8;}

/* sections */
.section{padding:72px 0; border-bottom:1px solid var(--line);}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--red);
  background:var(--panel2); border:1px solid var(--line); padding:4px 14px; border-radius:999px; margin-bottom:18px;}
.eyebrow::before{content:'●'; font-size:8px;}
h1{font-size:clamp(34px, 6vw, 56px); font-weight:800; line-height:1.25;}
h1 em{font-style:normal; color:var(--red);}
h2{font-size:clamp(26px, 4vw, 34px); font-weight:800; line-height:1.3; margin-bottom:10px;}
h3{font-size:18px; font-weight:700; line-height:1.4;}
.lead{color:var(--muted); font-size:17px; max-width:560px; margin-top:16px;}
.section-sub{color:var(--muted); max-width:560px; margin-bottom:36px;}

.card{background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:16px; padding:22px;
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);}
.card p{color:var(--muted); font-size:15px; margin-top:6px;}
.icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  background:color-mix(in srgb, var(--red) 14%, transparent); color:var(--red);}
.icon svg{width:22px; height:22px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px;}

/* footer */
footer{padding:36px 0 48px;}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;}
.foot-links{display:flex; flex-wrap:wrap; gap:18px;}
.foot-links a{color:var(--muted); text-decoration:none; font-size:14px;}
.foot-links a:hover{color:var(--text);}
.foot small{color:var(--muted2); font-size:13px;}

/* legal pages */
.doc{max-width:760px; padding:56px 20px 72px; margin:0 auto;}
.doc h1{font-size:clamp(28px, 5vw, 40px); margin-bottom:6px;}
.doc .updated{color:var(--muted2); font-size:14px; margin-bottom:36px;}
.doc h2{font-size:21px; margin:34px 0 10px;}
.doc p, .doc li{color:var(--muted); font-size:16px;}
.doc p + p{margin-top:10px;}
.doc ul, .doc ol{padding-inline-start:22px; margin-top:8px;}
.doc li{margin-bottom:6px;}
.doc strong{color:var(--text);}
.steps{counter-reset:s; list-style:none; padding:0 !important;}
.steps li{counter-increment:s; position:relative; padding-inline-start:44px; margin-bottom:14px; min-height:32px;}
.steps li::before{content:counter(s); position:absolute; inset-inline-start:0; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--red); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px;}

[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:6px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }