:root{
  --bg:        #16130f;   /* varm nära-svart, inte kliniskt blåsvart */
  --bg-2:      #1e1a15;   /* subtil upphöjd yta (fält, knappar) */
  --coral:     #e9573c;   /* varm korall — den enda accenten */
  --coral-lit: #f36a4e;   /* hover/aktiv */
  --ring:      #5e564e;   /* dämpad varm grå — ytterringen, aldrig svart, aldrig korall */
  --ink:       #f3ede5;   /* varm off-white — ordbild + rubrik */
  --muted:     #9a9086;   /* sekundär text */
  --faint:     #6c635a;   /* fotnot, streckat */
  --line:      #2a251f;   /* avgränsningar */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}

/* generativ bakgrund — diskreta ljuspölar bakom allt innehåll (§9-släkt) */
#bg{
  position:fixed;
  inset:0;
  z-index:-1;
  display:block;
  pointer-events:none;
}

a{ color:inherit; }

.wrap{
  flex:1;
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:20px clamp(20px,5vw,32px) 0;
  display:flex;
  flex-direction:column;
}

/* ---- sidhuvud: märke + vitt ordmärke till vänster, wip-etikett till höger ---- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand .wordmark{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.02em;
  color:var(--ink);           /* ordmärket är vitt, inte korall (§5.1) */
  line-height:1;
}
.brand svg{ display:block; }

.wip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.wip .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--coral);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.45; transform:scale(.82); }
  50%    { opacity:1;   transform:scale(1); }
}

/* ---- hjälten: många-till-en, appens tes ritad ---- */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 0 12px;
}
.hero{
  width:min(360px, 82vw);
  margin:0 auto 6px;
}
.hero svg{ width:100%; height:auto; overflow:visible; }
.hero-caption{
  font-size:13px;
  color:var(--faint);
  letter-spacing:.02em;
  margin:0 0 28px;
}

h1{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  font-size:clamp(34px, 8.5vw, 62px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0 0 18px;
  max-width:14ch;
  text-wrap:balance;
}
.lead{
  font-size:clamp(16px, 2.4vw, 19px);
  line-height:1.5;
  color:var(--muted);
  max-width:46ch;
  margin:0 auto 34px;
}
.lead b{ color:var(--ink); font-weight:600; }

/* ---- säg till ---- */
.notify{
  width:100%;
  max-width:440px;
  margin:0 auto;
}
.notify .field{
  display:flex;
  gap:8px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:6px;
  transition:border-color .18s ease;
}
.notify .field:focus-within{ border-color:var(--ring); }
.notify input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  color:var(--ink);
  font:inherit;
  font-size:16px;
  padding:10px 12px;
}
.notify input::placeholder{ color:var(--faint); }
.notify input:focus{ outline:none; }
.notify button{
  flex:0 0 auto;
  border:0;
  border-radius:10px;
  background:var(--coral);
  color:#1a0f0b;
  font-family:"Hanken Grotesk", sans-serif;
  font-weight:600;
  font-size:15px;
  padding:0 18px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transition:background .15s ease, transform .12s ease;
}
.notify button:hover{ background:var(--coral-lit); }
.notify button:active{ transform:translateY(1px); }
.notify button svg{ display:block; }

.notify .msg{
  min-height:20px;
  font-size:14px;
  margin:12px 2px 0;
  color:var(--muted);
  text-align:left;
}
.notify .msg.err{ color:var(--coral-lit); }
.notify .msg.ok{ color:var(--ink); }

/* bekräftat läge: fältet byts mot en lugn rad */
.notify.done .field{ display:none; }
.done-line{ display:none; }
.notify.done + .done-line{
  display:block;
  max-width:440px;
  margin:2px auto 0;
  text-align:center;
  color:var(--ink);
  font-size:16px;
}

.tip{
  margin:34px auto 0;
  font-size:14px;
  color:var(--muted);
  text-align:center;
}
.tip a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px dotted var(--faint);
  padding-bottom:1px;
  white-space:nowrap;
}
.tip a:hover{ border-bottom-color:var(--coral); }

/* honungsfälla — dold för människor, ifylld av bottar */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

.privacy{
  margin:14px auto 0;
  max-width:440px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--faint);
  text-align:center;
}
.privacy a{ color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--faint); }
.privacy a:hover{ border-bottom-color:var(--coral); }

.notify button:disabled{ opacity:.6; cursor:default; }

/* ---- fot ---- */
footer{
  width:100%;
  max-width:760px;
  margin:0 auto;
  padding:26px clamp(20px,5vw,32px);
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:13px;
  color:var(--faint);
}
footer .site{ color:var(--muted); letter-spacing:.01em; }

:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; border-radius:4px; }

@media (max-width:440px){
  .notify .field{ flex-wrap:wrap; }
  .notify button{ width:100%; padding:12px; justify-content:center; }
  footer{ flex-direction:column; align-items:flex-start; gap:6px; }
}

@media (prefers-reduced-motion:reduce){
  .wip .dot{ animation:none; opacity:.9; }
}