/* ============================================================================
   SealedWith — designsystemet för den engelska relanseringen.
   En yta, ett bläck, en stark färg. Skalet ändras aldrig; bara innehållet.
   Typsnitten är self-hostade (fonts/), ingen tredjepart, ingen extra rundtur.
   ========================================================================== */

@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fg-400.woff2) format('woff2');}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fg-500.woff2) format('woff2');}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fg-600.woff2) format('woff2');}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/fg-700.woff2) format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/caveat-500.woff2) format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/caveat-600.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dmmono-400.woff2) format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dmmono-500.woff2) format('woff2');}

:root{
  --paper:#EEEDE5;      /* botten */
  --card:#F8F7F1;       /* ytan innehållet ligger på */
  --ink:#1A2230;        /* all text — blått, inte svart */
  --ink-2:#6A7386;      /* underrubriker, etiketter */
  --ink-3:#9AA1AC;      /* svagaste graden */
  --wax:#8E3628;        /* enda starka färgen */
  --foil:#A7ABB2;       /* skrapytan */
  --line:rgba(24,35,56,.13);
  --line-soft:rgba(24,35,56,.07);
  --field:rgba(24,35,56,.045);
  --sans:'Familjen Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Caveat','Segoe Script',cursive;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:16px;
  --lift:0 24px 44px -26px rgba(24,35,56,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── App-ytan ────────────────────────────────────────────────────────────
   En skärm, ingen scroll, inget sidchrome. dvh så adressfältet i mobilen
   inte klipper foten. Innehållet håller sig innanför safe-area. */
.app{
  position:relative;display:flex;flex-direction:column;
  height:100vh;height:100dvh;overflow:hidden;
  width:100%;max-width:460px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 18px);
}
.app-head{flex:none;text-align:center}
.app-body{flex:1;min-height:0;display:flex;flex-direction:column}
.app-foot{flex:none}

/* ── Typografi ──────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
h1{font-size:clamp(28px,7.4vw,34px)}
h2{font-size:clamp(22px,5.6vw,26px)}
p{margin:0}
.lede{color:var(--ink-2);font-size:15.5px;line-height:1.5}
.eyebrow{
  font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)
}
.fine{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)
}
.hand{font-family:var(--hand);font-weight:600;line-height:1.15;letter-spacing:0}

/* ── Ordmärket ──────────────────────────────────────────────────────────── */
/* Ordbilden ar det enda pa sajten som ar riktigt svart. Allt annat ar
   blackblatt; markets uppgift ar att vara markets, inte att smalta in. */
.wordmark{display:inline-flex;align-items:center;gap:7px;color:#000;text-decoration:none}
.wordmark svg{display:block;width:19px;height:19px}
.wordmark b{font-weight:700;letter-spacing:.18em;font-size:10.5px;text-transform:uppercase}

/* ── Knappen ────────────────────────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:17px 20px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--ink);color:#FCF9F2;
  font-family:inherit;font-weight:700;font-size:16.5px;letter-spacing:-.005em;
  text-decoration:none;box-shadow:0 8px 18px -14px rgba(26,34,48,.7);
  transition:filter .16s ease,transform .12s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn[disabled]{opacity:.45;cursor:default;box-shadow:none}
.btn-quiet{
  background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none;
  font-weight:600;
}
.microlink{
  display:block;width:100%;margin-top:10px;padding:8px;border:0;background:none;
  cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--ink-2);text-align:center;
  text-decoration:none;
}
.microlink:hover{color:var(--ink)}

/* ── Fält ───────────────────────────────────────────────────────────────── */
.field{
  width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:14px;
  background:var(--field);color:var(--ink);font-family:inherit;font-size:16px;
  -webkit-appearance:none;appearance:none;
}
.field:focus{outline:none;border-color:var(--ink);background:var(--card)}
.field::placeholder{color:var(--ink-3)}

/* ── Kuvertets framsida ──────────────────────────────────────
   Samma ritning på skärmen som i länkförhandsvisningen — en enda komposition
   som båda läser ur samma tal.

   Beskyddet mot beskärning är inbyggt i layouten: Slack och Discord visar en
   kvadrat, inte 1200×630. Därför ligger ALLT innehåll innanför de mittersta
   52 procenten av bredden (24cqw–76cqw), och kanterna är bara papper. Flytta
   aldrig ut något hitåt utan att köra beskärningstestet igen. */
.envcard{
  container-type:inline-size;position:relative;aspect-ratio:1200/630;overflow:hidden;
  background:radial-gradient(120% 150% at 14% 6%,#FBF9F3 0%,#F2EFE5 52%,#E6E2D5 100%);
  color:var(--ink);
}
.envcard::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Adressen langst ut till vanster, frimarket uppe i hogra hornet — som pa ett
   kuvert. Det bryter mot det gamla beskarningstestet (allt inom 24-76 %) och
   det ar ett medvetet byte: i den kvadrat en del chattklienter visar kapas nu
   en flik av frimarket, men namnen — det enda innehallet — star kvar. Ett
   frimarke som halvsyns lases som ett frimarke. Ett kuvert med allt hopklamt
   pa mitten lases inte som ett kuvert.
   Vansterstalld alltid, sa att sidan runtomkring inte kan andra det. */
.envcard .addr{position:absolute;left:10cqw;top:26cqw;right:8cqw;text-align:left}
.envcard .k{font-family:var(--mono);font-size:2.4cqw;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);line-height:1}
.envcard .nm{font-family:var(--hand);font-weight:600;font-size:7.2cqw;line-height:1;
  margin-top:.8cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envcard .frm{margin-top:2.2cqw}
.envcard .frm .nm{font-size:4.4cqw;margin-top:.8cqw}
/* Domänen står som avsändarrad högst upp — inte i foten, där adressen bor. */
/* Domänen stod tidigare som avsändarrad högst upp till vänster. Borttagen:
   plattformarna visar ändå adressen under förhandsvisningen, och kuvertet blir
   lugnare utan. Regeln ligger kvar som spår om den ska tillbaka. */
.envcard .waves{position:absolute;left:55cqw;top:10.5cqw;width:24cqw;opacity:.3}
.envcard .waves svg{display:block;width:100%;height:auto}
/* Frimärket i hörnet, där ett frimärke sitter. */
.envcard .post{position:absolute;left:79cqw;top:5cqw;width:13cqw}
.envcard .post svg{display:block;width:100%;height:auto;
  filter:drop-shadow(0 1cqw 1.4cqw rgba(24,35,56,.16))}
/* Annulleringssigillet ar borttaget. Det satt snett over frimarkets horn och
   lastes som en klick vax pa market, inte som en stampel. Poststampelns vagor
   gor jobbet ensamma. Regeln ligger kvar som spar om den ska tillbaka. */

/* Sprickorna i sigillet tands en och en medan man trycker. */
.crk{opacity:0;transition:opacity .2s}

/* ── Textsidorna ──────────────────────────────────────────────────────────
   Villkor, integritet, hjälp. Enda platsen på sajten där scroll är rätt: här
   ska man läsa, inte handla. Samma papper och samma bläck som resten, men en
   spalt att vila i i stället för en app-yta. */
.doc{max-width:640px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 22px) 22px calc(env(safe-area-inset-bottom) + 40px)}
.docbar{display:flex;justify-content:center;margin-bottom:44px}
.doc h1{font-size:clamp(30px,8vw,40px);margin:0 0 10px}
.doc .meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.doc .lede{font-size:18px;line-height:1.55;color:var(--ink-2);margin-top:22px}
.doc h2{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25;margin:40px 0 10px}
.doc p{font-size:15.5px;line-height:1.68;margin:0 0 13px}
.doc ul{margin:0 0 13px;padding:0;list-style:none}
.doc li{position:relative;font-size:15.5px;line-height:1.62;margin:0 0 9px;padding-left:19px}
.doc li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;
  border-radius:50%;background:var(--ink-3)}
.doc strong{font-weight:700}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line)}
.doc a:hover{text-decoration-color:var(--ink-2)}
/* Knappen ar en lank har och skulle annars arva textsidans understrykning och
   blackfarg — bläck pa black. */
.doc a.btn{color:#FCF9F2;text-decoration:none}
.doc .wordmark,.doc .docfoot a{text-decoration:none}
.doc .note{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 19px;margin:24px 0}
.doc .note p:last-child{margin:0}

/* Stegen i "How it works". Siffran är en poststämpel, inte en punktlista.
   ALLT scopat under .doc: `.step` heter samma sak i skapandeflödet, och utan
   scopet fick varje steg där en numrerad boll och 46 px indrag. */
.doc .steps{counter-reset:s;margin:30px 0 0}
.doc .step{position:relative;padding-left:46px;margin-bottom:28px}
.doc .step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.doc .step h2{margin:3px 0 7px;font-size:17.5px}
.doc .step p:last-child{margin-bottom:0}
.doc .btn{margin-top:34px}

/* Formuläret på kontaktsidan. */
.doc label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:18px 0 7px}
.doc textarea.field{min-height:150px;resize:vertical;line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formmsg{margin-top:14px;font-size:14.5px;line-height:1.5;min-height:21px}
.formmsg.ok{color:var(--ink)}
.formmsg.err{color:var(--wax)}

.docfoot{margin-top:58px;padding-top:22px;border-top:1px solid var(--line-soft);text-align:center}
.docfoot .links{display:flex;flex-wrap:wrap;justify-content:center;gap:17px}
.docfoot a{font-size:12.5px;color:var(--ink-3);text-decoration:none}
.docfoot a:hover{color:var(--ink-2)}
.docfoot .fine{margin-top:18px;line-height:1.7}

/* Raden som säger att det finns en röst i meddelandet. Ikon och text som ett
   block, centrerat på skärmen men vänsterställt inuti — så att ögat får en
   kant att läsa från i stället för två rader som svävar. Bläck, inte grått:
   den bär information, till skillnad från ledtråden ovanför. */
.vnote{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:14px auto 0;color:var(--ink);font-size:14px;font-weight:600}
.vnote[hidden]{display:none}
.vnote svg{width:17px;height:17px;flex:none}
.vnote span{text-align:left}

/* ── Småsidorna ──────────────────────────────────────────────────────────
   Nyckeln (/key/), öppna med kod (/open/), avregistrering. Samma skal som
   skärmen direkt efter förseglingen: en smal spalt, ordbilden överst, och
   innehållet i rutor. De är samma sorts ärende vid olika tillfällen och ska
   kännas som en plats.

   ALLT är scopat under .page. `.note`, `.lede`, `.dot` och `.err` finns redan
   på andra ytor med annan betydelse — en oscopad regel här hade ändrat dem.
   Kolla alltid mot de andra sidorna innan ett generiskt klassnamn hamnar här. */
.page{max-width:520px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 40px)}
.page .pbar{display:flex;justify-content:center;margin-bottom:34px}
.page h1{font-size:clamp(28px,7.5vw,36px);text-align:center;margin:0}
.page .lede{margin:10px 0 0;text-align:center;color:var(--ink-2);font-size:15.5px;line-height:1.55}

.page .box{margin-top:18px;padding:17px 17px 18px;border:1px solid var(--line);
  border-radius:18px;background:var(--card)}
.page .blabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.page .code{margin:9px 0 14px;font-family:var(--mono);font-size:16px;line-height:1.35;
  color:var(--ink);word-break:break-all;user-select:all}
.page .box .btn{width:100%}
.page .box .field{margin:9px 0 0}
.page .box .field+.btn{margin-top:12px}
.page .note{margin-top:11px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.page .err{margin-top:10px;font-size:13.5px;color:var(--wax);font-weight:600}
.page .ok{margin-top:10px;font-size:13.5px;color:var(--ink);font-weight:600}
.page .or{margin:20px 0 2px;text-align:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.page .homelink{margin-top:28px}
.page .hidden{display:none !important}

/* Statusraden på nyckelsidan: en prick och en mening, inget som ser ut som en
   instrumentpanel. */
.page .stat{display:flex;align-items:flex-start;gap:11px;margin-top:26px;
  padding:16px 17px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.page .dot{flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;background:var(--ink-3)}
.page .dot.open{background:var(--wax)}
.page .stat b{display:block;font-size:16px;line-height:1.35}
.page .stat span{display:block;margin-top:2px;color:var(--ink-2);font-size:14px;line-height:1.5}

/* Den enda vaxröda knappen i tjänsten: den som tar tillbaka ett meddelande. */
.page .danger{border-color:rgba(142,54,40,.28)}
.page .danger .blabel{color:var(--wax)}
.page .btn-danger{background:transparent;color:var(--wax);
  border:1px solid rgba(142,54,40,.45);box-shadow:none;font-weight:700}