/* The home page. Broadsheet tokens (see the design project's ds/broadsheet.css),
   with the page's own ground: paper white on a warm grey. */
:root {
  --bg: #ffffff;
  --ground: #e9e7e3;
  --surface: #ffffff;
  --pane: #e4e1dc;
  --text: #201e1d;
  --text-2: #2b2725;
  --text-3: #3a3532;
  --text-4: #524c48;
  --accent: #0088b0;
  --accent-600: #1186ac;
  --accent-700: #006786;
  --divider: color-mix(in srgb, #201e1d 16%, transparent);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 2px;
}

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

html { background: var(--ground); }
body {
  margin: 0;
  color: var(--text);
  font: 15px/1.55 var(--sans);
  background: var(--bg);
  max-width: 1080px;
  margin-inline: auto;
  min-height: 100vh;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
[x-cloak] { display: none !important; }

h1, h5 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; }
a { color: var(--accent); text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* — top bar — */
.top {
  display: flex; align-items: center; gap: 26px;
  padding: 18px 44px; font-size: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--serif); font-weight: 600; font-size: 17.5px; letter-spacing: -.005em;
  margin-right: auto; color: inherit; text-decoration: none;
}
/* The lettermark: a 1em square of accent, the two letters reversed out of
   it at half the box, semibold serif. Sized in em so the same rule serves
   the nav (26px) and the footer (20px). */
.brand .mark {
  display: grid; place-items: center; width: 1em; height: 1em; font-size: 26px;
  background: var(--accent); color: var(--bg); line-height: 1; flex: none;
}
.brand .mark > span { font-size: .48em; letter-spacing: -.005em; }
.brand .tld { font-weight: 400; color: #6a6460; }
.foot-col .brand .mark { font-size: 20px; }
.top nav { display: flex; align-items: center; gap: 26px; }
.top nav a { color: inherit; text-decoration: none; }
.top nav a:hover { color: var(--accent); }
.top nav a.btn { color: var(--bg); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 1.2;
  color: var(--text); background: transparent; border: 1px solid transparent;
  padding: 10px 18px; border-radius: var(--radius);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-600); }
.btn-primary:active { background: var(--accent-700); }
.btn-secondary { border-color: var(--divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.actions .btn { font-size: 15px; padding: 12px 22px; }

/* — main — */
main { padding: 0 44px 56px; }
h1 {
  font-size: 52px; line-height: 1.05; margin: 26px 0 0; max-width: 24ch;
  text-wrap: pretty;
}
.lede { font-size: 18.5px; line-height: 1.5; max-width: 62ch; margin: 16px 0 0; color: var(--text-2); }

.try {
  display: grid; grid-template-columns: 336px 1fr; gap: 34px;
  margin-top: 34px; align-items: start;
}
.controls { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; }
.control-label, .field > label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 7px; }

/* — segmented control — */
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--divider); border-radius: var(--radius);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt + .seg-opt { border-left: 1px solid var(--divider); }
.seg-opt:has(input:checked) { background: var(--accent); color: var(--bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.swatch { padding: 6px 8px; }
.swatch span { display: block; width: 20px; height: 20px; }
.seg-swatches .seg-opt:has(input:checked) { background: var(--text); }

/* — field — */
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--text); caret-color: var(--accent); background: var(--surface);
  border: 1px solid var(--divider); border-radius: var(--radius);
}
.input::placeholder { color: #6a6460; opacity: 1; }
.input:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.input:focus-visible { border-color: var(--accent); outline-offset: 0; }

.aside { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.actions { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.fine { font-size: 12.5px; color: var(--text-4); }
.error { margin: 0; font-size: 12.5px; color: #8f1428; white-space: pre-line; }

/* — the pane — */
.pane {
  background: var(--pane); padding: 30px; display: flex; justify-content: center;
  position: relative; min-height: 598px;
}
.paper {
  width: 380px; height: 538px; overflow: hidden; flex: none;
  background: transparent;
  /* It is a button now, so the browser's own button costume has to go. */
  padding: 0; border: 0; font: inherit; color: inherit; text-align: left;
  cursor: zoom-in; display: block;
}
.paper:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.paper canvas.page { display: block; box-shadow: 0 1px 6px rgba(32,30,29,.2); }
.paper.waiting { background: #fff; opacity: .6; }
/* ── The preview, big ─────────────────────────────────────────────────────
   380 pixels of A4 is enough to judge a layout and not enough to read one, so
   the sheet opens to fit the window. Dark ground, because the thing being
   looked at is a white page and anything lighter competes with it. */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: color-mix(in srgb, #201e1d 82%, transparent);
  cursor: zoom-out;
}
.lightbox-sheet { cursor: default; }
.lightbox-sheet canvas.page {
  display: block; box-shadow: 0 8px 40px rgba(0,0,0,.45);
}
.lightbox-close {
  position: absolute; top: 14px; right: 18px;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 300 30px/1 var(--sans); color: #fff; opacity: .75;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 900px) { .lightbox { padding: 12px; } }

.pager {
  position: absolute; right: 16px; bottom: 16px; display: flex; gap: 10px; align-items: center;
  background: #fff; box-shadow: 0 1px 6px rgba(32,30,29,.2); padding: 5px 11px;
  font-size: 12px; color: var(--text-4);
}

/* — the four points — */
.points {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 46px;
}
.tick { width: 24px; height: 2px; background: var(--accent); margin-bottom: 8px; }
.points h5 { font-size: 15px; margin: 0 0 4px; }
.points p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* — closing — */
.closing { margin-top: 52px; }
.pull {
  font-family: var(--serif); font-size: 22px; line-height: 1.5; max-width: 44ch; margin: 0 0 16px;
}

/* — footer — */
/* Two columns side by side, always: the questions column takes what is left
   and its titles wrap, rather than the whole column dropping under the first
   one and carrying its divider and indent along. Stacks only on phones. */
.foot {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 40px 0;
  padding: 32px 44px 44px; border-top: 1px solid #d0ccc7;
  font-size: 13px;
}
.foot-col { display: flex; flex-direction: column; gap: 8px; }
/* A hairline between the footer columns, and between the two question columns. */
.foot > .foot-col + .foot-col { border-left: 1px solid #d0ccc7; padding-left: 56px; margin-left: 56px; }
.foot-grid { columns: 2; column-gap: 48px; column-rule: 1px solid #d0ccc7; }
.foot-grid a { display: block; margin-bottom: 8px; break-inside: avoid; }
@media (max-width: 900px) {
  .foot { grid-template-columns: 1fr; }
  .foot > .foot-col + .foot-col { border-left: 0; padding-left: 0; margin-left: 0; }
  .foot-grid { columns: 1; }
}
.foot-col .brand { margin: 0 0 4px; font-size: 16px; }
.foot a { color: var(--text-3); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot-head { font-weight: 600; color: var(--text); margin-bottom: 2px; }
/* The other language, set apart from the page links above it: it does not go
   to another page of this site, it goes to the other one. */
.foot-lang { margin-top: 10px; }
@media (max-width: 900px) { .foot { padding-inline: 20px; gap: 28px 40px; } }

/* — narrower screens: stack — */
@media (max-width: 900px) {
  .top { padding: 14px 20px; gap: 16px; flex-wrap: wrap; }
  /* Wrap the nav by whole links rather than inside them. Without the
     nowrap, "Vragen over facturen" broke across two lines mid-phrase and
     the row read as four ragged blocks instead of a list of links. */
  .top nav { gap: 12px 16px; flex-wrap: wrap; justify-content: flex-end; }
  .top nav a { white-space: nowrap; }
  main { padding: 0 20px 40px; }
  h1 { font-size: 38px; }
  .try { grid-template-columns: 1fr; }
  .pane { padding: 16px; min-height: 0; }
  .paper { width: min(380px, 100%); height: auto; aspect-ratio: 380 / 538; }
  .points { grid-template-columns: repeat(2, 1fr); }
  .foot { padding-inline: 20px; }
}
@media (max-width: 520px) {
  .points { grid-template-columns: 1fr; }
}

/* — the information article (factuureisen) — */
.article { padding: 8px 44px 64px; max-width: 760px; }
.article h1 { font-size: 44px; line-height: 1.05; margin: 24px 0 0; }
.article .lede { font-size: 18px; line-height: 1.55; max-width: none; color: var(--text-2); margin-top: 18px; }
.article h2 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 36px 0 8px; }
.article h3 { font-family: var(--serif); font-weight: 600; font-size: 18px; margin: 28px 0 6px; }
.article p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 12px; }
.article ul { margin: 0 0 12px; padding-left: 20px; }
.article li { font-size: 15.5px; line-height: 1.6; color: var(--text-2); margin: 0 0 6px; }
.article a { color: var(--accent-700); }
.article .source { margin-top: 40px; padding: 20px 24px; background: var(--pane); border-radius: var(--radius); }
.article .source h2 { margin-top: 0; }
.article .fine { font-size: 13px; color: var(--text-4); margin-top: 8px; }
.article .cta { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot a { color: inherit; }
@media (max-width: 900px) { .article { padding: 8px 20px 40px; } .article h1 { font-size: 34px; } }

.article .crumb { font-size: 13px; color: var(--text-4); margin: 8px 0 0; }
.article .crumb a { color: var(--accent-700); }
/* On the FAQ hub the questions are links — make that obvious. */
.article h2 a { color: var(--accent-700); text-decoration: none; }
.article h2 a::after { content: " ›"; color: var(--accent); }
.article h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.article .more { margin: 6px 0 0; font-size: 14px; }
.article .more a { color: var(--accent-700); }

/* — forms: log in, register, reset, the account page — */
.stack { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; max-width: 440px; }
.stack .field { margin: 0; }
.stack .field > label { font-size: 13px; color: var(--text-3); margin-bottom: 7px; }
.stack .input { min-height: 40px; }
.stack label.inline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.stack .actions { flex-direction: row; align-items: center; gap: 18px; margin-top: 8px; }
.stack .actions .btn { align-self: auto; }
.article h2 + .stack { margin-top: 14px; }
.article .stack + h2 { margin-top: 44px; }
.notice { margin: 16px 0 0; padding: 12px 16px; background: var(--pane); border-radius: var(--radius); font-size: 14px; }
.article .stack + .fine, .article form + .fine { margin-top: 24px; }

/* Inside .article the link colour (accent) must not repaint the buttons.
   Order matters — the primary rule comes last so it wins over .btn. */
.article .btn { color: var(--text); }
.article .btn-primary { color: var(--bg); }

/* — the pricing page (design 2a: hairline columns, the paid rung on a tint,
     then the full comparison) — */
.pricing { padding: 0 44px 64px; }
.pricing h1 { font-size: 58px; line-height: 1.03; margin: 22px 0 0; max-width: 20ch; }
.pricing .lede { font-size: 18.5px; line-height: 1.5; max-width: 60ch; margin: 20px 0 0; }
.pricing .kicker { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); }
.pricing .fine { font-size: 12.5px; line-height: 1.45; color: var(--text-4); margin: 6px 0 0; }
.form-errors { margin: 20px 0 0; padding: 12px 16px; list-style: none; background: #fff1f4; color: #8f1428; font-size: 14px; border-radius: var(--radius); }

.pricing .currency { display: flex; align-items: center; gap: 12px; margin: 28px 0 -16px; font-size: 13px; color: var(--text-4); }
.pricing .currency .seg-opt { text-decoration: none; color: inherit; font-weight: 500; }
.pricing .currency .seg-opt[aria-current] { background: var(--accent); color: var(--bg); }
.compare .word { font-size: 13px; color: var(--text-3); }

/* Three columns on one rule: a hairline between the free two, the paid one
   on a tint with a heavier rule that sits over the shared one. */
.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 56px; border-top: 1px solid var(--text); align-items: start;
}
.tier { display: flex; flex-direction: column; padding: 22px 26px; min-height: 236px; }
.tier:first-child { padding-left: 0; }
.tier + .tier { border-left: 1px solid #d0ccc7; }
.tier-paid { background: #e9f8ff; margin-top: -1px; border-top: 3px solid var(--accent); border-left: 0; }
.tier-paid .kicker { color: var(--accent-700); }
.tier .price { font-family: var(--serif); font-size: 34px; line-height: 1; margin: 10px 0 0; }
.tier .price .per { font-family: var(--sans); font-size: 15px; color: var(--text-4); }
.tier p { margin: 14px 0 20px; font-size: 14px; line-height: 1.6; color: var(--text-2); flex: 1; text-wrap: pretty; }
.tier .cta form { margin: 0; }
.tier .go { font-size: 14px; font-weight: 600; }
.tier .note { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-4); max-width: 32ch; flex: none; }
.tier .fine { margin-top: 4px; }

/* The comparison. */
.compare { width: 100%; border-collapse: collapse; margin-top: 52px; font-size: 14px; }
.compare th {
  padding: 0 0 9px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-4); font-weight: 400; text-align: center; width: 18%;
}
.compare th.what { text-align: left; width: 46%; }
.compare th.paid { color: var(--accent-700); font-weight: 600; }
.compare td { padding: 11px 0; border-top: 1px solid #d0ccc7; text-align: center; color: var(--text-2); }
.compare td:first-child { text-align: left; }
.compare tbody tr:first-child td { border-top-color: var(--text); }
.compare tbody tr:last-child td { border-bottom: 1px solid #d0ccc7; }
.compare .yes { color: var(--accent); vertical-align: middle; }
.compare .no { display: inline-block; width: 11px; height: 1px; background: #9b9797; vertical-align: middle; }

/* Or buy just one. */
.packs { margin-top: 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.packs .pack-title { font-family: var(--serif); font-size: 21px; line-height: 1.45; margin: 12px 0 0; max-width: 30ch; text-wrap: pretty; }
.packs-why p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-3); max-width: 40ch; text-wrap: pretty; }
.packs-list { display: flex; flex-direction: column; padding-top: 22px; margin: 0; }
.pack { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid #d0ccc7; }
.pack:last-child { border-bottom: 1px solid #d0ccc7; }
.pack-name { font-family: var(--serif); font-size: 18px; }
.pack-price { font-size: 14px; color: var(--text-4); margin-right: auto; }
.pack-email { margin: 0 0 18px; }
.pack-email .field span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 7px; }
.pack-email .fine { margin-top: 6px; }

@media (max-width: 900px) {
  .pricing { padding: 0 20px 40px; }
  .pricing h1 { font-size: 40px; }
  .tiers { grid-template-columns: 1fr; border-top: 0; }
  /* Stacked, so every rule that divided the columns has to go — including the
     one between siblings. `.tier + .tier` is two classes and outranks `.tier`,
     so clearing the border there left it standing: a stray hairline down the
     left of all three tiers. */
  .tier, .tier:first-child, .tier + .tier {
    padding: 22px 0; min-height: 0; border-left: 0;
    border-top: 1px solid #d0ccc7;
  }
  /* The paid one keeps the accent rule that marks it out — the rule above
     repainted it grey, which is the whole reason it looked like the other
     two. And its tint runs to the screen edges rather than sitting inset,
     so the text inside it stays on the same left margin as every other
     tier instead of stepping in by its own padding. */
  .tiers .tier-paid {
    border-top: 3px solid var(--accent);
    margin-top: 0;
    margin-inline: -20px;
    padding: 22px 20px;
  }
  .compare th:not(.what), .compare td:not(:first-child) { width: 16%; }
  .packs { grid-template-columns: 1fr; gap: 24px; }
}

/* Phone widths: three tick columns and a feature column is a lot to ask of
   350 CSS pixels, and it showed. The column headings are uppercase with a
   tenth of an em of tracking, which is what made "ZONDER ACCOUNT" and "MET
   ACCOUNT" wrap — and with no horizontal padding on the cells, their second
   lines met in the middle and read as one word, ACCOUNTACCOUNT. "BETAALD"
   sat hard against the right edge for the same reason.
   
   Tracking is the first thing to go: it exists to make small caps legible at
   a comfortable size, and at this size it only steals width. Then a little
   padding, so two headings can never touch whatever they do, and a narrower
   feature column to pay for it. */
@media (max-width: 560px) {
  .compare { font-size: 13px; }
  .compare th {
    font-size: 9.5px; letter-spacing: .03em; padding-inline: 5px;
    hyphens: none;
  }
  .compare th.what { width: 40%; padding-left: 0; padding-right: 10px; }
  .compare th:not(.what), .compare td:not(:first-child) { width: 20%; padding-inline: 5px; }
  .compare td:first-child { padding-right: 10px; }
}

/* What the year is per month. Quiet and directly under the price, because it
   is an arithmetic aside rather than a second thing for sale — a monthly
   figure set like a price would read as a plan you can subscribe to, and
   there is no such plan. */
.tier .permonth {
  margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-4);
  flex: none;
}

/* The credit already paid, coming off the year. Quiet: it is good news, and
   good news shouted reads as a sales tactic. */
.offset { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--accent-ink, #00637f); }

/* ── The account page ──────────────────────────────────────────────────────
   Broadsheet, as the design project draws it: the page opens on a masthead
   rule rather than a card, the two things an account holds sit side by side,
   and everything that is merely *status* — the plan, the credit, the saved
   notice — lives on one line between two rules instead of taking a heading
   each. What is left is a page you can read the state of without scrolling.

   The bedrijfsgegevens form is the wide column because it is the reason to
   have an account at all; profile, password and payments are the narrow one
   because they are things you touch once. */
.account { padding: 8px 44px 72px; }

.account-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.account-head h1 {
  font-size: 38px; line-height: 1; margin: 18px 0 0; letter-spacing: -.015em;
}
.account-who {
  display: flex; align-items: center; gap: 18px;
  font-size: 13px; color: var(--text-4); padding-bottom: 2px;
}
.account-who form { margin: 0; }
.account-who .btn { font-size: 13px; padding: 7px 15px; }

/* Two weights of rule, and the difference carries meaning: the heavy one is
   the masthead, the hairline closes the status line under it. */
.rule-heavy { height: 2px; background: var(--text); margin-top: 16px; }
.rule-hair { height: 1px; background: #d9d5d1; }

.account-status {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; padding: 11px 0;
  font-size: 13.5px; color: var(--text-2);
}
.account-status .facts {
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
}
/* The label sits inline before its value, quieter than it — a caption, not a
   heading. Two spaces of air between them rather than a colon. */
.account-status .what { color: var(--text-4); margin-right: 8px; }
.account-status a { font-size: 13.5px; white-space: nowrap; }

.account-notice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 0 0; font-size: 13.5px; color: var(--text-2);
}
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: .02em; padding: 3px 10px; border-radius: 1.5px;
}
.tag-accent { background: #e9f8ff; color: #004961; }

.account-cols {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px;
  align-items: start; margin-top: 34px;
}
.account-cols > * { min-width: 0; }
.account-side { display: flex; flex-direction: column; gap: 34px; }

.account h2 {
  font-family: var(--serif); font-weight: 600; font-size: 23px;
  line-height: 1.1; margin: 0; letter-spacing: -.015em;
}
.account h3 {
  font-family: var(--serif); font-weight: 600; font-size: 17px;
  line-height: 1.1; margin: 0; letter-spacing: -.01em;
}
.account-intro {
  font-size: 13.5px; line-height: 1.5; color: var(--text-4);
  margin: 7px 0 0; max-width: 54ch; text-wrap: pretty;
}

.account form { display: flex; flex-direction: column; gap: 18px; }
.account-side form { gap: 14px; }

/* Two to a row, and the two that are a sentence rather than a value — the
   name and the address — take the whole width. */
.account-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.account-fields .wide { grid-column: span 2; }
.account .field { gap: 0; }
.account .field > label { font-size: 13px; color: var(--text-3); margin-bottom: 5px; }
.account .input { font-size: 14px; padding: 8px 10px; background: var(--bg); }
.account textarea.input { min-height: 0; line-height: 1.45; resize: vertical; }
.account .hint { font-size: 12px; color: #6a6460; margin: 5px 0 0; }
.account .save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.account .save .btn { font-size: 14px; padding: 9px 20px; }
.account-side .btn { font-size: 13.5px; padding: 8px 16px; }

/* The password form is closed until asked for. <details> rather than a
   toggle in script: the site has no build step and this is exactly the
   element's job — it also means the fields are still findable by a browser's
   own search, which a display:none panel is not. */
.pw { display: flex; flex-direction: column; gap: 14px; }
.pw > summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; cursor: pointer; list-style: none;
}
.pw > summary::-webkit-details-marker { display: none; }
.pw > summary::after {
  content: attr(data-open); font-size: 13px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.pw[open] > summary::after { content: attr(data-close); }
.pw > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Quieter than the design system's table: no uppercase, no borders, no row
   hover. It is three columns of fact on a page that already has two rules
   doing the structural work. */
.account .table { width: 100%; border-collapse: collapse; }
.account .table th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: #453f3c; padding: 0 0 7px;
}
.account .table td { padding: 9px 0; font-size: 13.5px; }
.account .table td.when, .account .table td.what { white-space: nowrap; }
.account .table td.status { color: var(--text-4); }
.account .empty { font-size: 13.5px; color: var(--text-4); margin: 0; }

@media (max-width: 900px) {
  .account { padding: 0 20px 48px; }
  .account-cols { grid-template-columns: 1fr; gap: 38px; }
  .account-head h1 { font-size: 32px; }
}

@media (max-width: 560px) {
  .account-fields { grid-template-columns: 1fr; }
  .account-fields .wide { grid-column: span 1; }
}