/* DefendGuard subscriber portal — V2 design system (paper / forest / serif). */
:root{
  --paper:#F2EDE3; --paper-2:#E8E0CF; --surface:#FBF8F1;
  --ink:#16140F; --ink-soft:#5F594F; --ink-mute:#7E786C;
  --rule:rgba(22,20,15,.10); --rule-strong:rgba(22,20,15,.24);
  --forest:#1F4332; --forest-deep:#142B20; --forest-soft:#E5ECE6;
  --marigold:#C8924A; --marigold-deep:#8A5A1C; --marigold-soft:#F4E6CF;
  --terracotta:#B23A1F; --terracotta-soft:#F5E1DA;
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Geist',ui-sans-serif,-apple-system,system-ui,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',monospace;
  --foot-h:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:calc(var(--foot-h) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
a{color:var(--forest); text-underline-offset:3px}
a:hover{color:var(--forest-deep)}
:focus-visible{outline:3px solid var(--marigold); outline-offset:2px; border-radius:6px}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:8px; z-index:100}
.skip:focus{left:8px}

/* ── Header ───────────────────────────────────────── */
.top{border-bottom:1px solid var(--rule); background:var(--paper)}
.top-in{max-width:680px; margin:0 auto; padding:16px 20px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:9px; white-space:nowrap; color:var(--ink); text-decoration:none; font-family:var(--serif); font-size:25px; line-height:1; letter-spacing:-.01em}
.brand em{color:var(--forest); font-style:italic}
.brand small{font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-soft); letter-spacing:0}
.mark{width:24px; height:24px; fill:var(--forest); flex:none}
.mark .tick{fill:none; stroke:var(--paper); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.lang{display:flex; align-items:center; gap:2px}
.lang a{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); text-decoration:none; padding:10px 8px; border-radius:8px; min-width:44px; text-align:center}
.lang a[aria-current]{color:var(--ink); background:var(--paper-2)}
.lang a.out{font-family:var(--sans); letter-spacing:0; font-size:13px; min-width:0; margin-left:2px}
.price-strip{max-width:680px; margin:0 auto; padding:0 20px 12px; font-size:13.5px; color:var(--ink-soft)}
.price-strip strong{color:var(--ink); font-weight:600}

/* ── Content ──────────────────────────────────────── */
.wrap{width:100%; max-width:680px; margin:0 auto; padding:28px 20px 36px; flex:1}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 12px}
h1,h2{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:44px; line-height:1.02; margin-bottom:14px}
h2{font-size:30px; line-height:1.08; margin-bottom:10px}
h1 em,h2 em{color:var(--forest); font-style:italic}
h3{font-size:15px; font-weight:600; margin:0 0 6px}
.lede{font-size:17px; color:var(--ink-soft); margin:0 0 24px; max-width:56ch}
p{margin:0 0 12px}
.muted{color:var(--ink-soft)}
.mono-inline{font-family:var(--mono); letter-spacing:.03em; color:var(--ink)}
.small{font-size:14px}
.stack > * + *{margin-top:16px}
.section{margin-top:28px}
.section-sm{margin-top:14px}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:20px; padding:22px}
.card + .card{margin-top:16px}
.card.tight{padding:18px}
.card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px}

/* ── Buttons ──────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:12px 24px; border-radius:999px; border:1px solid transparent;
  font:500 15.5px/1.2 var(--sans); text-decoration:none; cursor:pointer;
  background:var(--forest); color:var(--paper); touch-action:manipulation;
  transition:background-color .15s ease, transform .1s ease, opacity .15s ease;
}
.btn:hover{background:var(--forest-deep); color:var(--paper)}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none}
.btn.block{display:flex; width:100%}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--paper-2); color:var(--ink)}
.btn.danger{background:var(--terracotta); color:#fff}
.btn.danger:hover{background:#8E2D17; color:#fff}
.btn.cancel{background:transparent; color:var(--terracotta); border-color:rgba(178,58,31,.45); font-weight:600}
.btn.cancel:hover{background:var(--terracotta-soft); color:#8E2D17}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.form-foot{margin:16px 0 0; text-align:center; font-size:14.5px}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--forest); text-decoration:underline; text-underline-offset:3px; cursor:pointer}

/* ── Forms ────────────────────────────────────────── */
form{margin:0}
.field{margin-bottom:18px}
.field label{display:block; font-size:14.5px; font-weight:500; margin-bottom:7px}
.field input,.field textarea{
  width:100%; min-height:52px; padding:13px 16px; border-radius:14px;
  border:1px solid var(--rule-strong); background:#fff; color:var(--ink);
  font:400 16px/1.4 var(--sans); transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:140px; resize:vertical; line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:#8C8679}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(31,67,50,.16)}
.field.has-err input,.field.has-err textarea{border-color:var(--terracotta)}
.hint{font-size:13.5px; color:var(--ink-mute); margin:7px 0 0}
.err{font-size:14px; color:var(--terracotta); margin:7px 0 0; font-weight:500}
.pw{position:relative}
.pw input{padding-right:96px}
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  min-height:40px; min-width:76px; padding:0 12px; border:0; border-radius:10px;
  background:transparent; color:var(--forest); font:500 14px var(--sans); cursor:pointer;
}
.pw-toggle:hover{background:var(--forest-soft)}

/* ── Alerts ───────────────────────────────────────── */
.alert{border-radius:16px; padding:14px 16px; margin:0 0 18px; font-size:15px; border:1px solid}
.alert.ok{background:var(--forest-soft); border-color:rgba(31,67,50,.2); color:var(--forest-deep)}
.alert.bad{background:var(--terracotta-soft); border-color:rgba(178,58,31,.25); color:#7A2512}
.alert.info{background:var(--marigold-soft); border-color:rgba(200,146,74,.35); color:#5C3D12}

/* ── Status / key-values ──────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:5px 11px; border-radius:999px; background:var(--paper-2); color:var(--ink); white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85}
.pill.on{background:var(--forest-soft); color:var(--forest)}
.pill.off{background:var(--terracotta-soft); color:var(--terracotta)}
.pill.wait{background:var(--marigold-soft); color:var(--marigold-deep)}
.kv{margin:0; display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:10px 18px; font-size:15px}
.kv dt{color:var(--ink-soft)}
.kv dd{margin:0; font-weight:500; text-align:right; overflow-wrap:anywhere}
.kv .mono{font-family:var(--mono); font-weight:400; letter-spacing:.02em}
.list-links{list-style:none; margin:16px 0 0; padding:0; border-top:1px solid var(--rule)}
.list-links li{border-bottom:1px solid var(--rule)}
.list-links a{display:flex; justify-content:space-between; align-items:center; min-height:52px; text-decoration:none; color:var(--ink); font-weight:500}
.list-links a::after{content:"›"; font-size:22px; color:var(--ink-mute)}
.list-links a:hover{color:var(--forest)}

/* ── Analysis result ──────────────────────────────── */
.verdict{border-radius:20px; padding:22px; border:1px solid}
.verdict .v-word{font-family:var(--serif); font-size:36px; line-height:1; margin:0 0 8px}
.verdict.fraud{background:var(--terracotta-soft); border-color:rgba(178,58,31,.3)}
.verdict.fraud .v-word{color:var(--terracotta)}
.verdict.suspect{background:var(--marigold-soft); border-color:rgba(200,146,74,.4)}
.verdict.suspect .v-word{color:var(--marigold-deep)}
.verdict.clean{background:var(--forest-soft); border-color:rgba(31,67,50,.25)}
.verdict.clean .v-word{color:var(--forest)}
.meter{height:6px; border-radius:999px; background:rgba(22,20,15,.08); overflow:hidden; margin:10px 0 16px}
.meter svg{display:block; width:100%; height:6px}
.verdict.fraud .meter{color:var(--terracotta)}
.verdict.suspect .meter{color:var(--marigold)}
.verdict.clean .meter{color:var(--forest)}
.signals{margin:0 0 14px; padding-left:20px}
.signals li{margin-bottom:4px}
.quote{font-size:14.5px; color:var(--ink-soft); background:rgba(255,255,255,.55); border-radius:12px; padding:12px 14px; margin:0 0 14px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:9em; overflow:auto}

.history{list-style:none; margin:0; padding:0}
.history li{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--rule)}
.history li:first-child{border-top:0}
.history .h-txt{flex:1; min-width:0}
.history .h-snip{display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.history .h-meta{display:block; font-family:var(--mono); font-size:11.5px; color:var(--ink-mute); letter-spacing:.04em; margin-top:2px}
.dot{width:10px; height:10px; border-radius:50%; margin-top:7px; flex:none}
.dot.fraud{background:var(--terracotta)} .dot.suspect{background:var(--marigold)} .dot.clean{background:var(--forest)}

/* ── Stores ───────────────────────────────────────── */
.stores{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.store{display:flex; align-items:center; gap:10px; min-height:54px; padding:8px 14px; border-radius:14px; background:var(--ink); color:var(--paper); text-decoration:none; font-size:14px; font-weight:500; line-height:1.15}
.store:hover{background:#2A2720; color:var(--paper)}
.store svg{width:22px; height:22px; fill:currentColor; flex:none}
.store small{display:block; font-size:10.5px; font-weight:400; opacity:.75}
.store[aria-disabled="true"]{background:var(--paper-2); color:var(--ink-soft); pointer-events:none}

/* ── Credentials (welcome) ────────────────────────── */
.creds{display:grid; gap:10px; margin:14px 0}
.cred{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--rule-strong)}
.cred span{color:var(--ink-soft); font-size:14px}
.cred strong{font-family:var(--mono); font-size:19px; font-weight:500; letter-spacing:.04em; overflow-wrap:anywhere}

/* ── Legal pages ──────────────────────────────────── */
.legal h2{font-size:24px; margin:28px 0 8px}
.legal h3{margin-top:18px}
.legal p,.legal li{color:#2E2A22; font-size:15.5px}
.legal ul{padding-left:20px; margin:0 0 12px}
.legal .upd{font-family:var(--mono); font-size:12px; color:var(--ink-mute); margin-top:24px}
.features{list-style:none; padding:0; margin:18px 0}
.features li{display:flex; gap:10px; align-items:flex-start; padding:7px 0}
.features li::before{content:""; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%; background:var(--forest-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%231F4332' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.faq{display:grid; gap:10px; margin-top:8px}
.faq details{padding:0}
.faq summary{list-style:none; cursor:pointer; padding:16px 44px 16px 18px; font-weight:600; font-size:15.5px; position:relative; min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--ink-mute); font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq-a{padding:0 18px 6px; color:#2E2A22; font-size:15px}
.price-big{font-family:var(--serif); font-size:52px; line-height:1; letter-spacing:-.02em; margin:6px 0 6px}
.center{text-align:center}
.icon-badge{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px}
.icon-badge svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.icon-badge.ok{background:var(--forest-soft); color:var(--forest)}
.icon-badge.bad{background:var(--terracotta-soft); color:var(--terracotta)}
.icon-badge.info{background:var(--marigold-soft); color:var(--marigold-deep)}
.preline{white-space:pre-line}

/* ── Footer (MEO: fixed, on every page) ───────────── */
.legal-line{max-width:680px; margin:0 auto; padding:0 20px 18px; font-size:12px; color:var(--ink-mute); text-align:center}
.legal-line a{color:inherit}
.meo-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--forest-deep); padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 0 rgba(0,0,0,.08), 0 -8px 24px rgba(20,43,32,.10);
}
.meo-foot a{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:var(--foot-h); padding:6px 4px; color:#F2EDE3; text-decoration:none;
  font-size:12.5px; font-weight:500; line-height:1.2;
}
.meo-foot a + a{border-left:1px solid rgba(242,237,227,.14)}
.meo-foot a:hover{background:rgba(242,237,227,.08); color:#fff}
.meo-foot a[aria-current]{color:#fff; text-decoration:underline; text-underline-offset:4px}

@media (min-width:720px){
  h1{font-size:58px}
  h2{font-size:34px}
  .wrap{padding-top:40px}
  .meo-foot a{font-size:14px}
}
@media (max-width:359px){
  h1{font-size:38px}
  .stores{grid-template-columns:1fr}
  .meo-foot a{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}