.en-intro { max-width: 78ch; margin-bottom: 2rem; } /* THE VISITOR'S BAR: a way back to the page this one is linked from, the tag that says what a stranger is looking at, and the language switch. Controls only -- the sentence explaining the service is a paragraph in the page, not cargo pinned to the top of the window. */ .en-visitor { gap: .7rem; } .en-demo { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: .2rem .55rem; border-radius: var(--radius-xs); white-space: nowrap; } .en-demo-what { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0 0 1rem; max-width: 74ch; } /* THE UNCHECKED SHARE LEADS. A page about self-checking that opened with what it HAS checked would be an advertisement; the number worth the largest type is the one nobody else prints. */ .en-headline { font-size: var(--fs-xl); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 .7rem; } .en-sec { margin: 0 0 2.6rem; max-width: 82rem; } .en-lead { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 1rem; max-width: 82ch; line-height: 1.6; } .en-note { font-size: var(--fs-xs); color: var(--muted); margin: .6rem 0 0; max-width: 82ch; } /* The verdict a section closes on: what the measurement MEANS, in the service's own words, set apart from the figures so it cannot be mistaken for one of them. */ .en-verdict { font-size: var(--fs-sm); margin: 1rem 0 0; padding: .75rem .9rem; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); max-width: 82ch; line-height: 1.6; } .en-empty { color: var(--muted); font-size: var(--fs-sm); padding: .9rem 1rem; background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius-sm); } .en-when { font-size: var(--fs-sm); color: var(--warn); margin: .9rem 0 0; } .en-stale { color: var(--warn); } .en-foot { margin-top: 2.4rem; font-style: italic; } /* THE PIPELINE. A numbered column, not a row of boxes: the steps happen in an order and each one consumes the one above it, which a horizontal arrangement on a narrow screen destroys. The class chip on the right is the same colour as the bar in the section below, so "estimated" is recognisable as one idea across both. */ .en-flow { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .1rem; max-width: 82rem; } .en-step { display: grid; grid-template-columns: 1.9rem 1fr auto; align-items: start; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--border); } .en-step-n { font-size: var(--fs-xs); font-weight: 700; line-height: 1.6rem; text-align: center; color: var(--on-accent); background: var(--accent); border-radius: 999px; width: 1.6rem; height: 1.6rem; } .en-step-body b { display: block; font-size: var(--fs-sm); margin-bottom: .25rem; } .en-step-body p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; max-width: 78ch; } .en-step-k { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--muted); white-space: nowrap; } .en-step-k i { width: .55rem; height: .55rem; border-radius: 2px; } @media (max-width: 720px) { .en-step { grid-template-columns: 1.9rem 1fr; } .en-step-k { grid-column: 2; } } .en-bar { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--bg2); margin: 0 0 1rem; } .en-seg { display: block; height: 100%; } .en-split { height: .55rem; margin-top: 1rem; } .en-keys { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .en-keys li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: .45rem; font-size: var(--fs-sm); } .en-keys i { width: .55rem; height: .55rem; border-radius: 2px; align-self: center; } .en-keys small { grid-column: 2 / -1; color: var(--muted); font-size: var(--fs-2xs); line-height: 1.5; } /* THE FIRST COLUMN IS PROSE, so it wraps. The shared table sets every cell to `nowrap`, which is right for a figure and wrong for a sentence: the register's first column carries a key AND the line explaining it, so on a phone that one column was as wide as its longest explanation and the four columns that matter were pushed off the edge. */ .en-table th:first-child, .en-table td:first-child { white-space: normal; min-width: 11rem; } .en-table td:first-child small { display: block; margin-top: .2rem; font-size: var(--fs-2xs); line-height: 1.5; margin-left: 0; } .en-state { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .5rem; border-radius: var(--radius-xs); border: 1px solid currentColor; white-space: nowrap; } .en-s-ok { color: var(--pos); } .en-s-mid { color: var(--warn); } .en-s-bad { color: var(--neg); } .en-s-muted { color: var(--muted); } .en-inuse { font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--on-accent); background: var(--accent); padding: .1rem .4rem; border-radius: var(--radius-xs); margin-left: .45rem; } .en-hbar { fill: var(--accent); opacity: .7; } .en-mark { stroke: var(--neg); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; } .en-layers { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .8rem; max-width: 82ch; } .en-layers li { font-size: var(--fs-sm); line-height: 1.6; } .en-layers b { display: block; } .en-layers span { color: var(--muted); } .en-jrow { display: grid; grid-template-columns: 14rem 1fr auto; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--border); } .en-jrow > b { font-size: var(--fs-sm); } .en-moved { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 720px) { .en-jrow { grid-template-columns: 1fr; gap: .4rem; } .en-keys li { grid-template-columns: auto 1fr; } }