/* Generated by site/build.py. Edit it there. */
/* The front page's band is 100vw, which counts the scrollbar; clip rather than scroll. */
html, body { overflow-x: clip; }
/* The tagline is one long line in the app, where the header carries no navigation. Here
   it sat beside six nav items and took 358px of an 860px header, which left the nav 17px
   short and dropped "About" onto a second row. Capped so it breaks after "worked" and
   reads as two short lines, which is what buys the nav its one line back. Site-only: the
   app's own header is untouched. */
.brand .tagline { max-width: 21ch; line-height: 1.25; }
.sitenav { display: flex; flex-wrap: wrap; gap: 14px; font-size: .84rem; }
.sitenav a { color: var(--soft); text-decoration: none; }
.sitenav a:hover, .sitenav a[aria-current=page] { color: var(--ink); text-decoration: underline; }
@media (max-width: 560px) {
  .top { flex-direction: column; align-items: flex-start; gap: 7px; }
}
/* These pages' headings. `app.css` sets h2 at 1.15rem, a ratio of 1.08 to the 17px body,
   which is a bold sentence rather than a heading: on `/about/` four sections across 500
   words were invisible until a reader stopped and hunted for them. site.css is loaded
   after app.css and ONLY by these pages, so raising it here leaves every screen of the
   calculator alone. Keep it that way: the app's own h2s sit in forms and cards that are
   sized for a different job. */
h2 { font-size: 1.375rem; font-weight: 700; margin: 1.8em 0 .45em; }
/* And the title above them. `app.css` sets h1 at 1.6rem, a clear step over a 1.15rem h2
   and only 1.16 over the 1.375rem set above, so on a page with four sections the title
   stopped outranking them. The landing pages keep their own larger sizes (`.hero h1`,
   `.band h1`), which this now sits just under rather than far below. */
h1 { font-size: 2rem; letter-spacing: -.015em; }

.hero { margin: 8px 0 26px; }
.hero h1 { font-size: 2.1rem; max-width: 18ch; letter-spacing: -.02em; }
.cta {
  display: inline-block; margin: 6px 0 4px; padding: 12px 22px; border-radius: 999px;
  background: var(--brand); color: var(--navy); text-decoration: none; font-weight: 600;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .95rem;
}
.cta:hover { background: var(--brand-dim); }
.cta-pair { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.cta-pair .cta { margin: 0; }
.ask { font-weight: 600; margin: 18px 0 6px; }
.figures { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 6px 0 2px; }
@media (max-width: 520px) { .figures { grid-template-columns: 1fr; } }
.fig { text-align: center; padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.fig.best { border-color: var(--brand); background: var(--tint); }
.figlab { display: block; font-size: .8rem; color: var(--soft); font-family: ui-sans-serif, system-ui, sans-serif; }
.fignum { display: block; font-size: 1.7rem; font-weight: 600; margin: 6px 0 2px; }
.fig.best .fignum { color: var(--good); }
.figsub { display: block; font-size: .8rem; color: var(--soft); }
.jpick { display: block; font-size: .84rem; color: var(--soft);
  font-family: ui-sans-serif, system-ui, sans-serif; margin: 14px 0 18px; }
.jpick select { display: block; margin-top: 5px; width: 100%; max-width: 22rem;
  padding: 9px 11px; font: inherit; font-size: .95rem; color: var(--ink);
  border: 1px dashed var(--edge); border-radius: var(--radius); background: var(--field); }
.jpick select:focus { border-style: solid; border-color: var(--ink); }
/* The country and the place side by side where there is room for both. */
.wherepick { display: flex; flex-wrap: wrap; gap: 0 18px; }
.wherepick .jpick { flex: 1 1 14rem; max-width: 22rem; }
.jur-fed h4 { margin-top: 11px; }
p.center { text-align: center; }
.jur { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px;
  margin: 0 0 11px; background: var(--card); }
.jur h3 { font-size: 1rem; margin: 0 0 9px; display: flex; flex-wrap: wrap; gap: 9px;
  align-items: baseline; }
.jur h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soft); font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 11px 0 5px; font-weight: 600; }
.jur h4:first-of-type { margin-top: 0; }
.jur ul { margin: 0; padding-left: 1.1rem; font-size: .89rem; }
.jur li { margin: .32em 0; }
.jur ul.does li::marker { color: var(--good); }
.jur ul.infull li::marker { color: var(--ink); }
.jur ul.notdoes li::marker { color: var(--warm); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .76rem;
  font-family: ui-sans-serif, system-ui, sans-serif; border: 1px solid var(--line); }
.pill.supported { background: var(--tint); border-color: var(--good); color: var(--good); }
.pill.beta { background: var(--warm-bg); border-color: var(--warm); color: var(--warm); }
.limits li { margin: .45em 0; }
.draftbar { background: var(--stop); color: var(--card); text-align: center; padding: 7px 12px;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .82rem; }
/* The front page. A navy band that runs the full width of the window, whatever the
   width of <main> it sits inside, and the two ways in as cards that each carry their
   country's measured result. */
.band { background: var(--navy); color: #fff; width: 100vw; margin: -4px 0 34px calc(50% - 50vw);
  padding: 46px 18px 38px;
  background-image: radial-gradient(ellipse at 85% 0%, rgba(29,185,122,.28), transparent 60%); }
.band-in { max-width: 684px; margin: 0 auto; }
.band h1 { color: #fff; font-size: 2.2rem; letter-spacing: -.02em; line-height: 1.15;
  margin: .1em 0 .3em; }
.band .lede { color: #d9e2ec; max-width: 40rem; }
/* The disclaimer directly under the H1: quieter than the lede, and on the navy. */
.band-disc { color: #aebccb; font-size: .84rem; margin: 0 0 1.1em; }
.band .ask { color: #fff; margin-top: 26px; }
.countries { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 8px 0 14px; }
@media (max-width: 620px) { .countries { grid-template-columns: 1fr; } .band h1 { font-size: 1.75rem; } }
.country { display: block; text-decoration: none; color: var(--ink); background: var(--card);
  border-radius: var(--radius); padding: 18px 20px; border: 2px solid transparent;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.country:hover, .country:focus-visible { border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.c-name { display: block; font-weight: 700; font-size: 1.1rem; }
.c-sub { display: block; font-size: .86rem; color: var(--soft); line-height: 1.4; }
/* Each card's household drawn as the bar under every plan's headline (`views.gain_bar`,
   styled by app.css), at the card's own size. */
.country .gain { margin: 14px 0 0; }
.country .gaintop { text-align: left; font-size: 1rem; }
.country .gainkey { font-size: .82rem; color: var(--soft); }
.country .gainkey strong { color: var(--ink); }
.c-go { display: block; margin-top: 12px; font-weight: 600; color: var(--accent);
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: .92rem; }
.band-note { color: #aebccb; font-size: .86rem; }
h2.center { text-align: center; margin-top: 1.8em; }
/* "What optimization is worth": the measured medians, read from the results report by
   `worth()` and drawn by `worth_chart()` as two panels, each on its own scale and every
   bar labelled. Bars are the green of what optimizing adds, thin, square at the baseline
   and rounded at the end; the figures beside them are in ink, not in the bar's colour. */
.worth-intro { text-align: center; color: var(--soft); max-width: 38rem; margin: 0 auto 14px; }
.worth-chart { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 0 0 10px; }
@media (max-width: 620px) { .worth-chart { grid-template-columns: 1fr; } }
.wpanel { margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px 8px; }
.wpanel figcaption { font-weight: 600; font-size: .95rem; margin: 0 0 6px;
  font-family: ui-sans-serif, system-ui, sans-serif; }
/* The household and its figure on one line, the bar the panel's full width under them:
   beside them it had a sixth of the panel, and 2.4% and 5% looked alike. */
.wrow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab val" "bar bar";
  align-items: baseline; gap: 5px 10px; padding: 8px 0; font-family: ui-sans-serif, system-ui, sans-serif; }
.wlab { grid-area: lab; font-size: .9rem; }
.wval { grid-area: val; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.wval small { font-weight: 400; font-size: .78rem; color: var(--soft); margin-left: 7px; }
.wtrack { grid-area: bar; display: block; height: 16px; }
.wfill { display: block; height: 100%; min-width: 3px; background: var(--gain-more);
  border-radius: 0 4px 4px 0; }
@media print { .wfill { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.worth-note { text-align: center; font-size: .84rem; color: var(--soft); }
/* How it works: what a pension pays by the age it starts, a column an age. The age each
   law counts from is a darker step of the same green, so it reads as the reference. */
/* A column's height is a share of the plot alone; its label floats above it, in the
   room the plot's top padding keeps, so a label never squeezes the tallest bars. */
.cols { display: flex; gap: 4px; margin: 6px 0 4px; font-family: ui-sans-serif, system-ui, sans-serif; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cplot { display: flex; align-items: flex-end; justify-content: center; width: 100%;
  height: 150px; padding-top: 1.3em; box-sizing: border-box; }
.cbar { position: relative; display: block; width: 100%; max-width: 24px;
  background: var(--gain-more); border-radius: 4px 4px 0 0; }
.cval { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  padding-bottom: 3px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.cbar.ref { background: var(--good); }
.cage { font-size: .72rem; color: var(--soft); margin-top: 4px; }
@media print { .cbar { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* One card to a row: its title and a line saying what it does on the left, and on the right
   a picture of that part of a real plan (`site/shots.py`), cropped to one shape so the four
   line up, from the top, where each part says what it is. The empty rows above and below
   the words centre them on the picture. On a phone the card stacks in reading order: the
   title, the picture, then the line. */
.features { display: grid; gap: 14px; margin: 10px 0; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 22px;
  grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". shot" "title shot" "blurb shot" ". shot"; }
@media (max-width: 620px) {
  .feature { grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "title" "shot" "blurb"; }
}
figure.feature { margin: 0; }
.feature img { grid-area: shot; align-self: center; display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; }
/* About: the man who built it, beside the lede. The photograph is a full-length snapshot,
   so the frame shows the top of it rather than shipping a second, cropped copy — the same
   browser-side crop as `.feature img` above. Change `object-position` to move the frame. */
.portrait { float: right; width: 200px; margin: 2px 0 14px 20px; }
.portrait img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  object-position: center 5%; border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 520px) { .portrait { float: none; width: 180px; margin: 0 auto 16px; } }

/* About: the front page's own comparison, beside the paragraph that makes the claim it
   settles. The bar is `views.gain_bar` through `_bar`, the app's own function on the
   measured example, so the page shows a household's figures rather than a drawing of
   them. It floats until the column is too narrow to hold both; below that the figure
   reads before the paragraph, which is the order the caption is written for. */
.aside { float: right; width: 310px; margin: 4px 0 18px 26px; }
.aside figcaption { color: var(--soft); font-size: .88rem; line-height: 1.45; margin-top: 10px; }
@media (max-width: 760px) { .aside { float: none; width: auto; margin: 20px 0; } }

/* What it costs: one table per country. Two tables and not one for `worth_chart`'s
   reason -- Canada's prices and the United States' are different numbers in different
   currencies, and a single table would set them side by side as if one were the cheaper.
   One above the other rather than two columns, for that same reason and a plainer one:
   side by side, each table had half of a 720px column, the prices do not wrap, and the
   row labels broke over four and five lines to make room. Each sits in a block of its
   own so the two read as two answers and not one list in two halves.

   The block's border is `--edge` where every other card on the site uses `--line`:
   #2b3b54 on a #14213a card is about 1.6:1, which is enough for a rule BETWEEN rows and
   not enough for an outline AROUND a block -- the first draft of this page was shipped
   past somebody who could barely see it. `--edge` is the palette's own 3.1:1 token, the
   WCAG floor for seeing that something is there (app.css). */
.prices { display: grid; gap: 22px; margin: 16px 0 4px; }
/* Each country in a block of its own, the same card the home page's two routes in and
   the worked example's figures are in (`.country`, `.fig`): the border is what says
   where Canada stops and the United States starts, so the gap does not have to shout. */
.ptable { margin: 0; background: var(--card); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 16px 20px 4px; }
.ptable figcaption { font-weight: 700; margin: 0 0 10px; }
.ptable table { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { text-align: left; padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable thead th { font-size: .78rem; font-weight: 600; color: var(--soft);
  text-transform: uppercase; letter-spacing: .04em; }
.ptable tbody th { font-weight: 600; width: 42%; }
.ptable tbody th em { display: block; font-style: normal; font-weight: 400;
  color: var(--soft); font-size: .84rem; margin-top: 2px; }
.ptable tbody td { white-space: nowrap; }
/* The card's edge closes the last row; a rule there would sit just inside the border. */
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
/* A list of promises reads as prose, not as bullets: the lead clause does the marking. */
ul.plain { list-style: none; padding: 0; margin: .6em 0; }
ul.plain li { margin: 0 0 .75em; }

/* How it works: a chart or a picture with a line saying what it is. */
.howfig { margin: 16px 0; }
.howfig figcaption { font-weight: 600; font-size: .92rem; margin: 0 0 6px;
  font-family: ui-sans-serif, system-ui, sans-serif; }
.howfig.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; }
.howfig.shot figcaption { font-weight: 400; color: var(--soft); font-size: .84rem; margin: 6px 0 0; }
.feature h3 { grid-area: title; color: var(--ink); font-size: 1.02rem; margin: 0 0 6px; }
.feature figcaption { grid-area: blurb; font-size: .92rem; color: var(--soft); margin: 0; }
@media (max-width: 620px) {
  .feature h3 { margin-bottom: 10px; }
  .feature figcaption { margin-top: 10px; }
}
.split { display: grid; gap: 26px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .split { grid-template-columns: 1fr; gap: 0; } }
.split p { font-size: .95rem; }
.closer { text-align: center; background: var(--tint); border-radius: var(--radius);
  padding: 26px 18px; margin: 34px 0 0; }
.closer-h { font-size: 1.3rem; font-weight: 700; margin: 0 0 12px; }
.closer .cta-pair { justify-content: center; }
.limits h3 { color: var(--ink); margin: 1.1em 0 .3em; }
/* What it cannot do: each list a fold, its heading the thing clicked. A fold inside a fold
   is indented and quieter, so the two levels read as two. */
details.fold { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  padding: 13px 16px; margin: 12px 0; }
details.fold > summary { cursor: pointer; font-weight: 600; font-family: ui-sans-serif, system-ui, sans-serif; }
details.fold[open] > summary { margin-bottom: 8px; }
details.fold ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
details.fold li { margin: .4em 0; }
details.sub-fold { background: transparent; margin: 8px 0; padding: 10px 14px; }
details.sub-fold > summary { font-weight: 500; }
footer.site { color: var(--soft); }
footer.site .disc { color: var(--warm); }