/* Landing page — the only public surface. Same ink, stone and type as the
   app (style.css loads first); this file only sets the page's shape.
   Nothing here needs a network request. */

:root {
  --landing-max: 64rem;
}

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Top bar ──────────────────────────────────────────────────────── */
.landing-top { background: var(--stone); }

.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: 56px;
}

/* Wordmark: the mark at cap height beside the name, a size up from the
   app bar because this is the front door. */
.landing-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.landing-wordmark .logo { width: 38px; height: 38px; }

/* ── Buttons are the app's .btn; the hero one is just larger ──────── */
.btn.landing-btn-lg { height: 46px; padding: 0 1.5rem; font-size: 13px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.landing-hero { padding-block: 4rem 5rem; }

/* The two-panel strip above the question: the same man before and after,
   captioned in the label voice. The panels are line art with their own
   drawn frame, so no border here. Always two columns, phones included:
   the before/after only reads as a pair when both are in view. Capped
   short of the section width so it does not dwarf the question under it,
   and centred. */
.landing-strip {
  max-width: 44rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.landing-strip figure { margin: 0; }

.landing-strip img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-strip figcaption {
  margin-top: 0.75rem;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}

.landing-hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
}

/* The second half of the question: same display voice as the h1, a size
   down and in the dim ink, so it trails off the line above rather than
   competing with it. */
.landing-followup {
  margin-top: 0.75rem;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--dim);
  max-width: 26ch;
}

.landing-lede {
  margin-top: 1.5rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--dim);
  max-width: 52ch;
}

/* The punchy one-liners around the lede: same size as the lede, in ink,
   so they read as spoken rather than explanatory. */
.landing-shout {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.landing-shout + .landing-lede { margin-top: 0.75rem; }

/* The offer, right above the button: one line, the price in ink, the
   fine print tight underneath (the price's own bottom margin is zeroed so
   the two margins do not collapse to the larger one). */
.landing-price, .landing-price-note { color: var(--dim); max-width: 52ch; }
.landing-price { margin: 2.5rem 0 0; font-size: var(--text-md); line-height: 1.4; max-width: none; }
/* The price itself is the one number on the page, so it gets the display
   size of the question's second half; the words around it stay body-sized
   and sit on the same baseline. */
.landing-price strong { font-size: clamp(1.4rem, 3vw, 1.85rem); letter-spacing: -0.02em; white-space: nowrap; }
.landing-price-note { margin-top: 0.4rem; font-size: var(--text-sm); line-height: 1.5; }

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

.landing-cta-note {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The waiting list in the hero: a field and a button on one line, the
   label above in the label voice, the note under. The field is the app's
   own .form-control on --stone next to the filled button, the same pair
   the login form makes. Nothing here is a new color: the complaint is
   the app's --bad tone behind ink, like every other message. */
.landing-join { display: block; margin-top: 2rem; }
.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: 480px;
}
.landing-join-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  height: 46px;
}
.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.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--ok);
  font-size: var(--text-md);
  line-height: 1.5;
  max-width: 52ch;
}
.landing-join-done strong { font-weight: 600; }
/* 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;
}

/* ── Savings calculator ───────────────────────────────────────────── */
/* Under the hero, on the same paper, set off by one line. Inputs to the
   left, the answer to the right; on a narrow screen the answer follows. */
.landing-calc {
  border-top: 1px solid var(--line-soft);
  padding-block: 4rem 4.5rem;
}

.landing-calc-lede {
  margin-top: 0.75rem;
  max-width: 52ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--dim);
}

/* Three rows in the left column (tabs, per år/per månad, the inputs) and
   the answer in the right column on the third row, so the card and the
   answer's top rule start on the same line. The rows' spacing is the
   children's own margins, not the grid's. */
.calc {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 4rem;
  align-items: start;
}
.calc-tabs, .calc-period, .calc-in { grid-column: 1; }
.calc-out { grid-column: 2; grid-row: 3; }

/* The two tabs, "Jag har eget företag" and "Jag fakturerar utan företag":
   plain text on one rule, the open one in ink with the rule drawn under
   it, the other dimmed. Text buttons, not the app's buttons, so they read
   as a choice of page rather than an action. */
.calc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.calc-tab {
  margin: 0 0 -1px;
  padding: 0.6rem 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--dim);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.calc-tab:hover { color: var(--ink); }
.calc-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.calc-tab:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

/* Per år / per månad: two of the app's small buttons, the chosen one
   filled, the way a pressed button reads. */
.calc-period { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.calc-period .btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* The open tab's inputs in a card of their own, headed "Utgifter idag" or
   "Fakturering idag", so the sliders read as what the visitor pays now and
   the years slider, outside the card, as the question about the future.
   The app's card: paper, one line, the large radius. */
.calc-panel {
  padding: 1.1rem 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.calc-panel-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 500;
  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: the label's size and colour in the
   reading face, so it sits under the label rather than over it. */
.calc-hint {
  margin: -0.35rem 0 0.75rem;
  max-width: 52ch;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--dim);
}

/* What the second tab asks of the visitor, under the sliders and shown on
   that tab only: a short paragraph in the reading face, a size up from the
   hints since it is a message rather than an instruction for a field. */
.calc-note {
  margin: 1.75rem 0 0;
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--dim);
}
/* "F-skatt" stays on one line; a break after the hyphen reads as "F". */
.calc-nowrap { white-space: nowrap; }

.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 the app's outline-button thumb on it: a ring
   that fills with ink on hover, like every other control. */
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  margin: 0;
  background: var(--line);
  outline: none;
  cursor: pointer;
}
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  transition: background 120ms ease;
}
.calc-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px 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 is the app's, 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-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  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, the saving itself 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.85rem 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, in the reading
   face and a size down, so the key stays one short label. */
.calc-out-why {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font);
  font-size: var(--text-xs);
  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.6rem, 3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.calc-out-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--dim);
}

/* The years slider lives here, under the fund figure it feeds, spaced
   like the rows above it rather than like the inputs on the left. Its
   unit is alone in this column, so it needs no shared width: the row
   ends flush with the amounts above it. */
.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: 2rem; max-width: 62ch; }

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

.landing-band h2,
.landing-calc h2,
.landing-plain h2 {
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
}

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

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

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

.landing-card h3 .badge { vertical-align: 2px; }

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

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

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

/* Emphasis anywhere on the page: ink, one weight up, never bold. */
.landing strong { color: var(--ink); font-weight: 500; }

.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: #ddd;
  padding-block: 2rem;
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.landing-foot-inner {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

@media (max-width: 56rem) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-out { grid-column: 1; grid-row: auto; margin-top: 2rem; }
}

@media (max-width: 40rem) {
  /* One line for the name beside the button: a size down, mark to match. */
  .landing-wordmark { font-size: 1.0625rem; gap: 0.5rem; }
  .landing-wordmark .logo { width: 30px; height: 30px; }
  .landing-hero { padding-block: 2.5rem 3rem; }
  .landing-strip { gap: 0.75rem; margin-bottom: 2.5rem; }
  .landing-calc { padding-block: 3rem; }
  /* Both tabs on one line at phone width: a size down, closer together. */
  .calc-tabs { gap: 0 1.1rem; }
  .calc-tab { font-size: var(--text); padding-block: 0.5rem; }
  .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; }
}