/* Landing page — the only public surface. style.css loads first; this file
   gives the page the brand's own look: cream paper, near-black ink with a
   green cast, one deep green for the band that speaks up, Inter for
   everything. Calm and plain, with the confidence in the type rather than
   in decoration. See docs/stilguide.md. Nothing here needs a network
   request. */

/* The palette is scoped to the page: the app keeps its own. Every control
   from style.css (.btn, .form-control, .badge) reads these variables, so
   they follow without being restyled one by one. */
.landing {
  --ink: #17241e;
  --paper: #f2efe7;
  --card: #faf8f3;
  --stone: #e6e1d5;
  --dim: #56655d;
  --green: #1d3a2e;
  --on-green: #f2efe7;
  --on-green-dim: #bfcdc4;
  --line: rgba(23, 36, 30, 0.16);
  --line-soft: rgba(23, 36, 30, 0.08);
  --hover: #ebe7dc;
  --landing-max: 68rem;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
}

/* Labels and buttons in the reading face here, not the app's monospace:
   the page talks, it does not point at fields in a ledger. */
.landing .label,
.landing .btn {
  font-family: var(--font);
  letter-spacing: 0.01em;
}
.landing .label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.landing .btn {
  text-transform: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}
.landing .btn-sm { font-size: 13px; }
.btn.landing-btn-lg { height: 48px; padding: 0 1.6rem; font-size: 15px; }

/* ── Top bar ──────────────────────────────────────────────────────── */
.landing-top { border-bottom: 1px solid var(--line-soft); }

.landing-top-inner,
.landing-section {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

.landing-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

/* The wordmark is the logo: "tjänat" heavy and tight, ".se" lighter in
   the dim ink. Ordinary dots over the ä; the typeface draws them. */
.landing-wordmark {
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.landing-wordmark-name { font-weight: 800; letter-spacing: -0.045em; }
.landing-wordmark-tld { font-weight: 500; letter-spacing: -0.02em; color: var(--dim); }

/* ── Hero ─────────────────────────────────────────────────────────── */
/* The promise on the left, the price card on the right: what you keep,
   and what it costs to keep it. One column on narrow screens, card under. */
.landing-hero {
  padding-block: 5rem 5.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.landing-eyebrow {
  margin: 0 0 1.25rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The headline is the poster: heavy, tight, large. */
.landing-hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 13ch;
  text-wrap: balance;
}

.landing-sub {
  margin-top: 1.25rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.landing-lede {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--dim);
  max-width: 48ch;
}

.landing-cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.landing-cta-note {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--dim);
}

/* The price card: a lighter sheet on the paper, the one number on the
   page at display size, then what it covers as a quiet ruled list. */
.landing-price-card {
  margin-top: 0.5rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.landing-price-card .label { margin: 0; }
.landing-price-figure {
  margin: 0.6rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.landing-price-figure strong {
  font-size: clamp(3rem, 6vw, 3.75rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1;
}
.landing-price-sub { margin-top: 0.35rem; color: var(--dim); font-size: var(--text-md); }

.landing-included {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.landing-included li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-md);
  line-height: 1.4;
}

.landing-price-note {
  margin-top: 1rem;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--dim);
  max-width: 52ch;
}

/* The waiting list in the hero: a field and a button on one line, the
   label above, the note under. The complaint and the thank-you are the
   app's tones behind ink, like every other message. */
.landing-join { display: block; }
.landing-join-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.landing-join-row {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 500px;
}
.landing-join-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 48px;
  padding-inline: 1rem;
  font-size: var(--text-md);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.landing-join-row .form-control:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.landing-join-row .btn { flex: 0 0 auto; white-space: nowrap; }
.landing-join-err {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
  background: var(--bad);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.landing-join-done {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--ok);
  font-size: var(--text-md);
  line-height: 1.5;
  max-width: 52ch;
}
/* The trap field. Off the page rather than display:none, since some form
   fillers skip what is not displayed and fill what merely is not visible. */
.landing-join-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── The challenger band ──────────────────────────────────────────── */
/* The one place the page raises its voice: deep green, the line about
   who should be making money, and the three words underneath. */
.landing-challenge {
  background: var(--green);
  color: var(--on-green);
  padding-block: 5rem;
}
.landing-challenge h2 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}
.landing-challenge > .landing-section > p {
  margin-top: 1.25rem;
  max-width: 58ch;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--on-green-dim);
}
.landing-promises {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.landing-promise {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(242, 239, 231, 0.25);
}
.landing-promise h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.landing-promise p {
  margin-top: 0.5rem;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--on-green-dim);
}

/* ── Section headings ─────────────────────────────────────────────── */
.landing-band h2,
.landing-calc h2,
.landing-extras h2,
.landing-plain h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* ── What usually comes on top ────────────────────────────────────── */
/* Right under the challenger band, as its evidence: one row per fee, what
   the big programs charge, and "Ingår" in the column that is ours. Rules
   between rows only, like the list on the price card. On a phone each row
   becomes a small block: the thing, then their price, then ours. */
.landing-extras { padding-top: 5rem; }

.landing-extras-lede {
  margin-top: 1rem;
  max-width: 58ch;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--dim);
}

.landing-extras-table {
  margin-top: 2rem;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.landing-extras-table th,
.landing-extras-table td {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.landing-extras-table thead th {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  border-bottom-color: var(--line);
}
.landing-extras-table tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.landing-extras-table td { color: var(--dim); }
.landing-extras-table .landing-extras-ours {
  padding-right: 0;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}
.landing-extras-table thead th:last-child { white-space: nowrap; }
.landing-extras .landing-price-note { margin-top: 1.25rem; max-width: 62ch; }

/* ── Savings calculator ───────────────────────────────────────────── */
/* Inputs to the left, the answer to the right; on a narrow screen the
   answer follows. */
.landing-calc { padding-block: 5rem; }

.landing-calc-lede {
  margin-top: 0.9rem;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--dim);
}

/* Two rows in the left column (per år/per månad, the inputs) and the
   answer in the right column on the second row, so the card and the
   answer's top rule start on the same line. */
.calc {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 4rem;
  align-items: start;
}
.calc-period, .calc-in { grid-column: 1; }
.calc-out { grid-column: 2; grid-row: 2; }

/* Per år / per månad: two small buttons, the chosen one filled. */
.calc-period { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.calc-period .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* The inputs in a card of their own, headed "Det du betalar idag", so the
   sliders read as what the visitor pays now and the years slider, outside
   the card, as the question about the future. */
.calc-panel {
  padding: 1.25rem 1.4rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.calc-panel-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.calc-panel-title + .calc-row { margin-top: 1.25rem; }

.calc-row { margin-top: 1.75rem; }
.calc-row label { display: block; margin-bottom: 0.6rem; }
/* What to count in, under the label. */
.calc-hint {
  margin: -0.35rem 0 0.75rem;
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--dim);
}

.calc-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem auto;
  gap: 0.75rem;
  align-items: center;
}

/* The slider is a line with a ring on it that fills with ink on hover. */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin: 0;
  background: var(--line);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--ink);
  transition: background 120ms ease;
}
.calc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--ink);
  transition: background 120ms ease;
}
.calc-range:hover::-webkit-slider-thumb,
.calc-range:focus-visible::-webkit-slider-thumb { background: var(--ink); }
.calc-range:hover::-moz-range-thumb,
.calc-range:focus-visible::-moz-range-thumb { background: var(--ink); }

/* The field, right-aligned because it holds an amount. */
.calc-number {
  max-width: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.calc-number::-webkit-outer-spin-button,
.calc-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.calc-unit {
  font-size: var(--text-sm);
  color: var(--dim);
  white-space: nowrap;
  /* As wide as the widest unit, so the fields above each other line up
     whether the unit is "kr/mån" or "år". */
  min-width: 3.4rem;
}

/* The answer: key/value rows like a report, the amounts in a column on
   the right, what you keep a size up. The rows the script hides carry the
   hidden attribute, which the display rules below would otherwise
   override. */
.calc [hidden] { display: none !important; }
.calc-out-rows { margin: 0; border-top: 1px solid var(--line); }
.calc-out-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.calc-out-rows dt { max-width: 30ch; line-height: 1.5; }
/* The parenthesis under a key: how the figure was reached. */
.calc-out-why {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.calc-out-rows dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}
.calc-out-main dd {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.calc-out-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dim);
}

/* The years slider lives here, under the fund figure it feeds. */
.calc-out .calc-row-years { margin-top: 1.25rem; }
.calc-out .calc-unit { min-width: 0; }

.calc-out-none {
  margin-top: 1rem;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--dim);
}

.landing-calc .landing-price-note { margin-top: 2.25rem; max-width: 62ch; }

/* ── Feature grid ─────────────────────────────────────────────────── */
.landing-band {
  background: var(--stone);
  padding-block: 5rem;
}

.landing-grid {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.landing-card {
  background: var(--card);
  border-radius: 14px;
  padding: 1.5rem;
}

.landing-card h3 {
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.landing-card h3 .badge { vertical-align: 2px; font-family: var(--font); font-weight: 600; }

.landing-card p {
  font-size: var(--text);
  line-height: 1.6;
  color: var(--dim);
}

/* ── Plain prose section ──────────────────────────────────────────── */
.landing-plain { padding-block: 5rem; }

.landing-plain p {
  margin-top: 1rem;
  max-width: 62ch;
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--dim);
}

/* Emphasis in running text: ink, a weight up. */
.landing-plain strong,
.landing-join-done strong { color: var(--ink); font-weight: 600; }

.landing-list {
  margin-top: 1.25rem;
  padding-left: 1.1rem;
  max-width: 62ch;
  font-size: var(--text-md);
  color: var(--dim);
  line-height: 1.7;
}

.landing-list li { margin-top: 0.6rem; }

/* ── Footer ───────────────────────────────────────────────────────── */
.landing-foot {
  margin-top: auto;
  background: var(--ink);
  color: var(--on-green-dim);
  padding-block: 2.25rem;
  font-size: var(--text-sm);
}

.landing-foot-inner {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
}
.landing-foot-mark {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--paper);
}
.landing-foot-mark span { font-weight: 500; color: var(--on-green-dim); }

@media (max-width: 56rem) {
  .landing-hero { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .landing-price-card { margin-top: 0; max-width: 32rem; }
  .landing-promises { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-out { grid-column: 1; grid-row: auto; margin-top: 2rem; }
}

@media (max-width: 40rem) {
  .landing-top-inner,
  .landing-section,
  .landing-foot-inner { padding: 0 1rem; }
  .landing-top-inner { min-height: 60px; }
  .landing-wordmark { font-size: 1.4rem; }
  .landing-hero { padding-block: 2.75rem 3.5rem; }
  .landing-challenge,
  .landing-calc,
  .landing-band,
  .landing-plain { padding-block: 3.5rem; }
  .landing-extras { padding-top: 3.5rem; }
  .landing-extras-table thead th:first-child { display: none; }
  .landing-extras-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .landing-extras-table th,
  .landing-extras-table td { padding: 0; border: 0; }
  .landing-extras-table tbody th { width: auto; }
  .landing-extras-table td:not(.landing-extras-ours) { grid-column: 1; grid-row: 2; margin-top: 0.2rem; }
  .landing-extras-table .landing-extras-ours { grid-column: 2; grid-row: 1; }
  .landing-price-card { padding: 1.4rem 1.25rem 1.25rem; }
  .calc-panel { padding: 1rem 1rem 1.25rem; }
  .calc-controls { grid-template-columns: minmax(0, 1fr) auto; }
  .calc-controls .calc-range { grid-column: 1 / -1; }
  .calc-out-rows dt { max-width: 22ch; }
  .landing-cta { flex-direction: column; align-items: stretch; }
  .landing-cta .btn { width: 100%; }
  .landing-join-form { align-items: stretch; }
  .landing-join-row { flex-direction: column; max-width: none; }
}