/* Toria – toria.se
   Built on the Toria brand identity: ink, not black; the signature stroke;
   invoice facts set like a payment slip. Tokens first, change them here. */

/* ---------- Fonts (self-hosted, latin incl. å ä ö) ---------- */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/fonts/FamiljenGrotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/fonts/MartianMono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --paper: #f4f5f1;        /* envelope white */
  --paper-raised: #fdfdfb; /* the sheet */
  --tint: #e4e8f5;         /* envelope security tint */
  --line: #cdd2e2;         /* hairlines */
  --field: var(--paper);   /* form fields; lifted in dark mode, see below */
  --field-line: #8186a0;   /* form field borders, 3:1 */
  --ink: #1b2350;          /* all text: blue-black document ink */
  --ink-muted: #4b5277;
  --signature: #2437b8;    /* the pen: logo stroke, links, one button */
  --signature-strong: #1a2a94;
  --on-signature: #ffffff;
  --lack: #a8321f;         /* sealing wax: overdue, nothing else */
  --lack-soft: #f7e3de;
  --shadow-sheet: 0 1px 0 #1b23500f, 0 12px 24px -16px #1b235033;

  --sans: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", "SF Mono", Menlo, Consolas, monospace;
  --sms: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  /* The collection letter: office paper, not part of the theme (no dark variant) */
  --letter-font: Arial, Helvetica, sans-serif;
  --letter-paper: #fff;
  --letter-ink: #111;
  --letter-muted: #5c5c5c;
  --letter-line: #dcdcdc;
  --letter-rule: #999;
  --letter-dim: 1;
  --inverse: #1b2350;       /* ink band: the closing section */
  --on-inverse: #f4f5f1;
  --on-inverse-muted: #c3c8de;
  --on-inverse-accent: #9aa8ff; /* the pen on an ink band */

  --gutter: 1.25rem;
  --wide: 72rem;
  --measure: 40rem;
  --section: clamp(4rem, 9vw, 6rem);
  --section-tight: clamp(3rem, 6vw, 4.5rem);
  --section-wide: clamp(5rem, 11vw, 8rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10142a;
    --paper-raised: #181d38;
    --tint: #222a4f;
    --bubble: #323b6e;  /* an incoming message sits above the screen, as on a phone */
    --line: #343c66;
    --field: #2a3361;   /* a step above the sheet, so an empty field reads as empty */
    --field-line: #7d82a0;
    --letter-dim: 0.85; /* the white letter shouldn't outshine the SMS */
    --inverse: #070a19;
    --on-inverse: #eceef7;
    --on-inverse-muted: #aab0ce;
    --on-inverse-accent: #9aa8ff;
    --ink: #eceef7;
    --ink-muted: #aab0ce;
    --signature: #9aa8ff;
    --signature-strong: #b8c2ff;
    --on-signature: #10142a;
    --lack: #ff8c75;
    --lack-soft: #3b1d1c;
    --shadow-sheet: 0 1px 0 #00000040, 0 12px 24px -16px #00000099;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--signature);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a { transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--signature-strong); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--signature);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--gutter); top: -3rem; z-index: 10;
  background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem;
}
.skip:focus { top: 0.75rem; }

.wrap {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Field label: the printed label on a payment slip */
.label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fig {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.button {
  display: inline-block;
  background: var(--signature);
  color: var(--on-signature);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  padding: 0.8rem 1.5rem;
  border-radius: 2px;
}
.button:hover { background: var(--signature-strong); color: var(--on-signature); }
/* Hover: the button darkens and lifts a pixel */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button:hover { transform: translateY(-1px); }
}
.button { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .button:active { transform: translateY(1px) scale(0.98); transition-duration: 60ms; }
}

/* ---------- Header ---------- */

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
}
.wordmark { display: block; color: var(--ink); line-height: 0; }
.wordmark svg { height: 2.25rem; width: auto; }
.wordmark .pen { stroke: var(--signature); }
.site-header nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; font-size: 0.95rem; }
/* Phones: button next to the logo, quiet link below */
@media (max-width: 39.99rem) {
  .site-header .wrap { flex-wrap: nowrap; align-items: flex-start; }
  .wordmark { flex-shrink: 0; }
  .site-header nav { flex-wrap: wrap-reverse; justify-content: flex-end; gap: 0.6rem 1.25rem; min-width: 0; }
  /* Short form on phones, so the quiet link stays on one line under the button */
  .site-header nav .nav-quiet { font-size: 0.875rem; white-space: nowrap; }
  .site-header .nav-long { display: none; }
}
@media (min-width: 40rem) { .site-header nav { gap: 0.5rem 1.75rem; font-size: 1rem; } }
.site-header nav a { font-weight: 500; }
/* For the people who got a reminder: present, but quieter than the sales link */
.site-header nav .nav-quiet { color: var(--ink); font-weight: 400; }
.site-header nav .nav-quiet:hover { color: var(--signature); }
.site-header nav a[aria-current="page"] { text-decoration-thickness: 2px; }
.site-header nav .nav-cta {
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.4rem 0.85rem;
}
.site-header nav .nav-cta { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.site-header nav .nav-cta:hover { background: var(--signature); border-color: var(--signature); color: var(--on-signature); }

/* ---------- Message page: every answer visible, no clicking ---------- */

.answers { display: grid; gap: 0; }
.answers > div { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.answers > div:first-child { border-top: 0; padding-top: 0; }
.doc .answers h2 { font-size: 1.35rem; line-height: 1.3; margin: 0 0 0.5rem; }
/* What we never ask for: the first thing a doubtful reader needs */
.doc .answers .never {
  margin: 0 0 0.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--signature);
  color: var(--ink);
  font-weight: 500;
}

.shortcuts { display: grid; gap: 0.75rem; margin: -1rem 0 3rem; }
@media (min-width: 30rem) { .shortcuts { grid-template-columns: repeat(3, 1fr); } }
.shortcuts a {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-raised);
  font-weight: 500;
  text-decoration: none;
}
.shortcuts a { transition: border-color var(--dur-fast) var(--ease-out); }
.shortcuts a:hover { border-color: var(--signature); }

/* The answer a shortcut points to is pulled out as a sheet, and its shortcut stays marked */
.answers > div { scroll-margin-top: 1.5rem; }
.answers > div:target {
  background: var(--paper-raised);
  box-shadow: var(--shadow-sheet);
  border-top-color: transparent;
  padding-inline: 1.25rem;
  margin-inline: -1.25rem;
}
.answers > div:target + div { border-top-color: transparent; }
.answers > div:target h2 { color: var(--signature); }
@media (prefers-reduced-motion: no-preference) {
  .answers > div:target { animation: found 1.6s var(--ease-out); }
}
@keyframes found { from { background: var(--tint); } }
.doc:has(#betala:target) .shortcuts a[href="#betala"],
.doc:has(#fel:target) .shortcuts a[href="#fel"],
.doc:has(#kan-inte-betala:target) .shortcuts a[href="#kan-inte-betala"] {
  border-color: var(--signature);
  box-shadow: inset 0 0 0 1px var(--signature);
}

/* ---------- Hero ---------- */

/* Ledger squares behind the first screen, header included */
.hero { position: relative; isolation: isolate; }
.hero::before {
  --cell: 1.5rem;
  /* A line falls on the left edge of the text column, so the ruling belongs to the page */
  --rule-start: max(var(--gutter), calc(50vw - var(--wide) / 2 + var(--gutter)));
  content: "";
  position: absolute;
  top: -10rem;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  /* It reaches up over the header, so it must not swallow the clicks there */
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: var(--rule-start) 0;
  opacity: 0.18;
  -webkit-mask-image: radial-gradient(85% 70% at 50% 40%, #000 0%, transparent 85%);
  mask-image: radial-gradient(85% 70% at 50% 40%, #000 0%, transparent 85%);
}

.hero {
  display: grid;
  gap: 3rem;
  /* Sized by height as well as width, so the CTA stays above the fold on short laptop screens */
  padding-block: clamp(2rem, min(9vw, 8vh), 6.5rem) var(--section);
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
}
.hero h1 {
  font-size: clamp(2.6rem, min(6.8vw, 11vh), 4.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
/* Break after the comma, or inside each half, never across it */
.hero h1 span { display: inline-block; }
/* The full stop is the pen's drop of ink: it closes the promise */
.hero h1 .dot { font-style: normal; color: var(--signature); }

.hero .lead {
  font-size: clamp(1.15rem, 2.2vw, 1.3rem);
  line-height: 1.5;
  max-width: 32rem;
  margin-top: 1.5rem;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

/* The strongest guarantee, signed with the same tick as Trygghet */
.assurance {
  position: relative;
  margin-top: 1rem;
  padding-left: 1.75rem;
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.assurance::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15rem;
  height: 0.85rem;
  background: var(--signature);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2.5 9 C 4.5 10.4, 6 12, 7.2 14 C 10.4 9.4, 14 5.2, 19.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2.5 9 C 4.5 10.4, 6 12, 7.2 14 C 10.4 9.4, 14 5.2, 19.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The story of one invoice */
.story {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.25rem;
  background: var(--paper-raised);
  box-shadow: var(--shadow-sheet);
}
@media (min-width: 30rem) { .story { padding-inline: 1.75rem; } }
.story > li {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
}
.story > li:first-child { border-top: 0; }
.story .label { padding-top: 0.2rem; }
.inv {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}
.inv-name { font-weight: 500; margin-right: auto; }
.status {
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.status-late { background: var(--lack-soft); color: var(--lack); }
.status-paid { color: var(--signature); padding-inline: 0; }
.tick { width: 2rem; height: 0.8rem; overflow: visible; }
.tick path {
  fill: none;
  stroke: var(--signature);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  /* Overdue lands fast; a beat; the reply is typed and arrives; a longer beat; paid, then signed */
  .story { animation: slip 500ms var(--ease-out) both; }
  .story > li { animation: slip 450ms var(--ease-out) both; }
  .story > li:nth-child(1) { animation-delay: 150ms; }
  .story > li:nth-child(2) { animation-delay: 750ms; }
  .story > li:nth-child(3) { animation-delay: 2300ms; }
  .story .typing { display: inline-flex; animation: typing 950ms linear 850ms both; }
  .story .typing span { animation: dot 450ms var(--ease-in-out) infinite alternate; }
  .story .typing span:nth-child(2) { animation-delay: 150ms; }
  .story .typing span:nth-child(3) { animation-delay: 300ms; }
  .story .sms .bubble:not(.typing) { transform-origin: 0 100%; animation: arrive 380ms var(--ease-out) 1750ms both; }
  .story .tick path { animation: sign 550ms var(--ease-in-out) 2750ms both; }
}
@keyframes sign { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes slip { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes typing { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes dot { from { opacity: 0.3; transform: translateY(1px); } to { transform: translateY(-1px); } }
@keyframes arrive { from { opacity: 0; transform: translateY(0.35rem) scale(0.96); } }

.sms { display: grid; }
.sms > * { grid-area: 1 / 1; }
.typing { display: none; align-self: start; justify-self: start; gap: 0.25rem; padding-block: 0.8rem; }
.typing span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--ink-muted); }

.sms-from { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.4rem; font-family: var(--sms); }
.bubble {
  margin: 0;
  background: var(--bubble, var(--tint));
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  padding: 0.6rem 0.9rem;
  font-family: var(--sms);
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: 24rem;
}
.sms-link { color: var(--signature); text-decoration: underline; text-underline-offset: 0.12em; }

/* ---------- Sections ---------- */

.section { border-top: 1px solid var(--line); padding-block: var(--section); }
.section-tight { padding-block: var(--section-tight); }
.section-wide { padding-block: var(--section-wide); }

/* Surface rhythm: one envelope-tint band, one ink band to close */
.section-tint { background: var(--tint); }
.section-ink { background: var(--inverse); color: var(--on-inverse); }
.section-tint, .section-ink,
.section-tint + .section, .section-ink + .section { border-top-color: transparent; }
.section-ink .big { color: var(--on-inverse-muted); }
.section-ink .form { color: var(--ink); }
.section-ink .statement p { color: var(--on-inverse-muted); }
.section-ink .statement .statement-lead,
.section-ink .statement .statement-answer,
.section-ink .statement .statement-close,
.section-ink .statement strong { color: var(--on-inverse); }
.section-ink .statement .statement-answer::before { background: var(--on-inverse-accent); }
.section-ink .pen-mark path { stroke: var(--on-inverse-accent); }
main:has(> .section-ink:last-child) ~ .site-footer { margin-top: 0; }

/* Statement sections (Problemet, Om Toria): one line to remember, then the reading text */
.statement p { font-size: 1.125rem; line-height: 1.6; color: var(--ink-muted); }
.statement .statement-lead {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
/* The answer mirrors the lead: same size, so problem and solution weigh the same */
.statement .statement-answer {
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2rem 0 0.5rem;
}
.statement .statement-close { color: var(--ink); }
/* Key words: ink and weight, never blue (blue means a link on this site) */
.statement strong { color: var(--ink); font-weight: 600; }
/* The turning point, underlined with the pen from the logo */
.pen-mark { position: relative; white-space: nowrap; view-timeline: --pen; }
.pen-mark svg {
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  bottom: -0.3em;
  width: calc(100% + 0.2em);
  height: 0.45em;
  overflow: visible;
}
.pen-mark path {
  fill: none;
  stroke: var(--signature);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pen-mark path {
      animation: underline var(--ease-in-out) both;
      animation-timeline: --pen;
      animation-range: entry 70% cover 35%;
    }
  }
}
@keyframes underline { from { stroke-dashoffset: 1; } }
.statement .statement-answer::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--signature);
}


/* Text sections: heading left, text in the middle of the page. Wide pieces (.span) take the full row. */
.letter-grid { display: grid; gap: 1.5rem; }
.letter-grid > :not(.span) { max-width: var(--measure); }
@media (min-width: 52rem) {
  .letter-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; align-items: start; }
  .letter-grid > .span,
  .letter-grid:has(> .span) > .section-title { grid-column: 1 / -1; }
}
@media (min-width: 72rem) {
  .letter-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); }
}

.section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.big {
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Steps on a ruled line */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid var(--ink);
  padding-bottom: 2rem;
}
.steps li:last-child { padding-bottom: 0.25rem; }
.steps li::before {
  content: "";
  position: absolute; left: -7px; top: 0.35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
}
.steps li:last-child::before { background: var(--signature); border-color: var(--signature); }
.steps .label { display: block; margin-bottom: 0.3rem; }
.steps .label::after { content: counter(step); margin-left: 0.4em; }
.steps h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.35rem; }
@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
  .steps li { border-left: 0; padding: 1.5rem 2rem 0 0; }
  .steps li::before { left: 0; top: -7px; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 52rem) and (prefers-reduced-motion: no-preference) {
    /* A light track, so the blue pen visibly fills it */
    .steps { position: relative; view-timeline: --steps; border-top-color: var(--line); }
    .steps li::before { animation: reach linear both; animation-timeline: --steps; animation-range: entry 80% cover 55%; }
    .steps li:nth-child(2)::before { animation-name: reach-2; }
    .steps li:nth-child(3)::before { animation-name: reach-3; }
    .steps::before {
      content: "";
      position: absolute;
      top: -2.5px;
      left: 0;
      width: 66.67%;
      height: 3px;
      background: var(--signature);
      transform-origin: left;
      animation: pen linear both;
      animation-timeline: --steps;
      animation-range: entry 80% cover 55%;
    }
  }
}
@supports (animation-timeline: view()) {
  @media (max-width: 51.99rem) and (prefers-reduced-motion: no-preference) {
    /* Each step is drawn as it crosses a reading line at 60% of the screen */
    .steps li { border-left-color: var(--line); view-timeline: --step; }
    .steps li::after {
      content: "";
      position: absolute;
      left: -2px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--signature);
      transform-origin: top;
      animation: pen-down linear both;
      animation-timeline: --step;
      animation-range: entry 40vh entry calc(100% + 40vh);
    }
    .steps li::before {
      z-index: 1;
      animation: reach linear both;
      animation-timeline: --step;
      animation-range: entry 40vh entry calc(100% + 40vh);
    }
  }
}
@keyframes pen-down { from { transform: scaleY(0); } }
@keyframes pen {
  0% { transform: scaleX(0); animation-timing-function: var(--ease-in-out); }
  42%, 58% { transform: scaleX(0.5); animation-timing-function: var(--ease-in-out); }
  100% { transform: scaleX(1); }
}
@keyframes reach { 0% { background: var(--paper); border-color: var(--field-line); } 3%, 100% { background: var(--signature); border-color: var(--signature); } }
@keyframes reach-2 { 0%, 41% { background: var(--paper); border-color: var(--field-line); } 42%, 100% { background: var(--signature); border-color: var(--signature); } }
@keyframes reach-3 { 0%, 98% { background: var(--paper); border-color: var(--field-line); } 100% { background: var(--signature); border-color: var(--signature); } }

/* Skillnaden */
.compare { display: grid; gap: 2.5rem; margin-top: 1rem; }
@media (min-width: 52rem) {
  .compare { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: start; }
}
.compare figure { margin: 0; }
.compare figcaption { margin-bottom: 0.9rem; }

/* The collection letter keeps its own world: office Arial, true black. */
.pile { position: relative; isolation: isolate; filter: brightness(var(--letter-dim)); }
.pile::before, .pile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--letter-paper);
  border: 1px solid var(--letter-line);
}
.pile::before { transform: translate(-0.4rem, 0.5rem) rotate(-1.5deg); }
.pile::after { transform: translate(0.5rem, 0.8rem) rotate(1deg); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pile { view-timeline: --pile; }
    .pile::before, .pile::after {
      animation: fan var(--ease-out) both;
      animation-timeline: --pile;
      animation-range: entry 30% cover 40%;
    }
    .pile::after { animation-range: entry 50% cover 50%; }
  }
}
@keyframes fan { from { transform: none; } }
.letter {
  position: relative;
  background: var(--letter-paper);
  color: var(--letter-ink);
  border: 1px solid var(--letter-line);
  padding: 1.75rem 1.5rem 2rem;
  font-family: var(--letter-font);
  font-size: 0.8rem;
  line-height: 1.5;
}
@media (min-width: 30rem) { .letter { padding: 2.25rem; } }
.letter-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.72rem; color: var(--letter-muted); margin-bottom: 1.75rem; }
.letter-head div:last-child { text-align: right; }
.letter-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; margin: 0 0 1rem; }
.letter table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.1rem; font-variant-numeric: tabular-nums; }
.letter td { padding: 0.2rem 0; border-bottom: 1px solid var(--letter-line); }
.letter td:last-child { text-align: right; }
.letter tr:last-child td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--letter-rule); padding-top: 0.35rem; }
.letter .fine { font-size: 0.7rem; color: var(--letter-muted); margin-top: 1.25rem; }


.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: 3.5rem;
}
.caption-line {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
}

/* Trygghet */
.assurances {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 2.5rem;
}
@media (min-width: 40rem) { .assurances { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .assurances { grid-template-columns: repeat(3, 1fr); } }
.assurances li { border-top: 1px solid var(--line); padding: 1.25rem 0 1.75rem; }
.assurances h3 { position: relative; padding-left: 2rem; font-size: 1.2rem; line-height: 1.3; margin-bottom: 0.4rem; }
/* Each guarantee is signed with the tick from "Betald" in the hero */
.assurances h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.35rem;
  height: 1rem;
  background: var(--signature);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2.5 9 C 4.5 10.4, 6 12, 7.2 14 C 10.4 9.4, 14 5.2, 19.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M2.5 9 C 4.5 10.4, 6 12, 7.2 14 C 10.4 9.4, 14 5.2, 19.5 2' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.assurances p { padding-left: 2rem; }
/* The one centred line on the page: the sum of the guarantees above it */
.section-outro { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; margin-top: 1.5rem; text-wrap: balance; }
.assurances p { color: var(--ink-muted); }

/* För vem */
.who { list-style: none; margin: 0; padding: 0; font-size: 1.2rem; line-height: 1.4; }
.who li { padding-block: 0.7rem; border-bottom: 1px solid var(--line); }
.who li:first-child { padding-top: 0; }
@media (min-width: 40rem) {
  .who { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .who li:nth-child(2) { padding-top: 0; }
  .who li:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd one out takes the full row */
}
/* Accountants are partners, not customers: their own line, with a way in */
.who-partner { margin-top: 1.75rem; color: var(--ink-muted); }
.who-partner a { font-weight: 500; white-space: nowrap; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1rem;
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 500;
}
.faq details:first-child summary { padding-top: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary { position: relative; padding-right: 2rem; transition: color var(--dur-fast) var(--ease-out); }
.faq summary:hover { color: var(--signature); }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: calc(50% - 1px);
  width: 0.75rem;
  height: 2px;
  background: var(--signature);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq details:first-child summary::before, .faq details:first-child summary::after { top: calc(50% - 1px - 0.5rem); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding-bottom: 1.25rem; color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: slip var(--dur-base) var(--ease-out); }

  /* Where the browser can size the open panel, the answer unfolds instead of appearing */
  @supports selector(::details-content) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details[open] p { animation: none; }
    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition:
        block-size var(--dur-base) var(--ease-in-out),
        opacity var(--dur-fast) var(--ease-out),
        content-visibility var(--dur-base) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* Kontakt */
.form {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1.5rem 1.25rem;
  background: var(--paper-raised);
  box-shadow: var(--shadow-sheet);
}
@media (min-width: 30rem) {
  .form { grid-template-columns: 1fr 1fr; padding: 2rem 1.75rem; }
}
.field { display: grid; gap: 0.4rem; }
.field .optional { text-transform: none; letter-spacing: 0; }
.field input {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 2px;
  padding: 0.65rem 0.75rem;
  width: 100%;
}
.field input { transition: border-color var(--dur-fast) var(--ease-out); }
.field input:hover { border-color: var(--ink); }
.field input:focus-visible { outline-offset: 0; border-color: var(--signature); }
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 0.25rem;
}
.form-foot .button { border: 0; font: inherit; font-weight: 500; cursor: pointer; }
.form-foot p { flex: 1 1 14rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted); }

/* ---------- Footer: the one pattern area ---------- */

.site-footer {
  margin-top: var(--section);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M2 6.5 L4 8.2 L8.5 3.2' fill='none' stroke='%23c9d0ec' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-top: 1px solid var(--line);
  padding-block: 3rem;
  font-size: 0.9rem;
}
@media (prefers-color-scheme: dark) {
  .site-footer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M2 6.5 L4 8.2 L8.5 3.2' fill='none' stroke='%23222a4f' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
.footer-card {
  background: var(--paper-raised);
  box-shadow: var(--shadow-sheet);
  padding: 1.75rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 52rem) {
  .footer-card { grid-template-columns: auto 1fr; align-items: center; column-gap: 3rem; }
}
.footer-card .wordmark svg { height: 1.9rem; }
.footer-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: var(--ink-muted); }
/* The company behind the brand: small, quiet, and on every page */
.footer-legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
}
.footer-legal .orgnr { font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; }

/* ---------- Privacy page ---------- */

.doc { padding-block: clamp(2.5rem, 7vw, 4.5rem) 0; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; }
.doc .updated { margin: 0.75rem 0 2.5rem; }
.doc h2 { font-size: 1.35rem; margin: 2.5rem 0 0.6rem; }
.doc ul { padding-left: 1.2rem; margin: 0 0 1em; }
.doc li { margin-bottom: 0.4em; }
.doc article { max-width: var(--measure); }
.next { list-style: none; counter-reset: next; padding: 0; margin: 0 0 2rem; }
.next li { counter-increment: next; display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding-block: 0.9rem; border-top: 1px solid var(--line); margin: 0; }
.next li:last-child { border-bottom: 1px solid var(--line); }
.next li::before { content: counter(next); font-family: var(--mono); font-size: 0.8125rem; color: var(--signature); padding-top: 0.2rem; }

.doc .lead-intro { font-size: clamp(1.15rem, 2.2vw, 1.3rem); line-height: 1.5; margin: 1rem 0 3rem; }

/* ---------- Phones: a CTA bar that appears after the hero and leaves when the form arrives ---------- */

.mobile-cta { display: none; }
@supports (animation-timeline: scroll()) {
  @media (max-width: 39.99rem) {
    body { timeline-scope: --kontakt; }
    #kontakt { view-timeline: --kontakt; }
    .mobile-cta {
      display: block;
      position: fixed;
      inset: auto 0 0 0;
      z-index: 20;
      padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
      background: var(--paper-raised);
      box-shadow: 0 -1px 0 var(--line);
      animation: cta-in linear both, cta-out linear both;
      animation-timeline: scroll(root), --kontakt;
      animation-range: 70vh 85vh, entry 0% entry 30%;
    }
    .mobile-cta .button { display: block; text-align: center; }
  }
}
@keyframes cta-in { from { opacity: 0; visibility: hidden; transform: translateY(100%); } }
@keyframes cta-out { to { opacity: 0; visibility: hidden; transform: translateY(100%); } }