on the origin to 34rem, which is right for a page of prose and wrong for the full-bleed landing page. Scoping beats making the landing page fight the cascade with overrides. */ .doc { display: flex; flex-direction: column; min-height: 100vh; } .doc header { border-bottom: 1px solid var(--rule); padding: 1.1rem 1.25rem; margin-bottom: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .doc header > * { max-width: var(--measure); } .doc .brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; } /* Option D, chosen 2026-08-18: stay in the mono voice, but commit to it. The wordmark was 11-12px at weight 500 with .26em tracking, which made it the smallest text in its own header -- the nav links beside it were 13px -- and put it in the same register as the 33 other mono labels on the page. Bigger, heavier and less tracked, so it reads as an identity rather than one more caption. */ .doc .brand span { font: 700 15px/1 var(--mono); letter-spacing: .14em; color: var(--ink); } .doc .brand { gap: .65rem; } .doc main { flex: 1; max-width: var(--measure); margin: 0 auto; padding: 0 1.25rem 4rem; width: 100%; } /* An eyebrow sitting directly under a bordered header needs the space the old margin-collapsed layout gave it for free. */ .doc main > .eyebrow:first-child { margin-top: 0; } h1, h2, h3 { font-weight: 500; text-wrap: balance; letter-spacing: -.01em; } h1 { font-size: 2rem; margin: 0 0 .75rem; } h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; } h3 { font-size: 1rem; margin: 1.5rem 0 .25rem; } .eyebrow { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); margin: 0 0 .5rem; } a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } label { display: block; font: 600 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); } input[type="email"], input[type="password"] { width: 100%; padding: .6rem .7rem; margin: .25rem 0 1rem; font-family: var(--mono); font-size: 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--field-border); } input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; } button { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .8rem 1.2rem; cursor: pointer; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } .error { border-left: 2px solid var(--oxide); padding: .5rem .75rem; margin: 0 0 1rem; background: var(--canvas); } .doc footer { border-top: 1px solid var(--rule); padding: 1.5rem 1.25rem 2.5rem; font: 400 13px/1.6 var(--mono); color: var(--graphite); } .doc .foot-links { display: flex; gap: 1.25rem; max-width: var(--measure); margin: 0 auto; } .doc .foot-note { max-width: var(--measure); margin: .9rem auto 0; font-family: var(--serif); font-size: 13px; color: var(--stone); } /* Section rhythm for the signed-in service page. Each block is a thing you can act on, so it reads as a block rather than as a run of paragraphs. */ .panel { border: 1px solid var(--rule); background: var(--paper); padding: 1.25rem 1.25rem 1.4rem; margin: 0 0 1.25rem; } .panel h2 { margin-top: 0; } .panel p:last-child { margin-bottom: 0; } /* The base rule. `.muted` was only ever defined as `.panel .muted` and `fieldset .muted`, so a bare `

` -- which twelve templates use -- had no styling at all and rendered as full-weight body text. The contextual rules below are more specific and still win where they apply, so this changes colour only for the cases that were getting nothing. */ .muted { color: var(--graphite); } .panel .muted { color: var(--graphite); font-size: 15px; } .signed-in { font: 400 12px/1.6 var(--mono); color: var(--graphite); margin: 0 0 1.75rem; } @media print { body { background: #fff; } footer, .skip-to-content { display: none; } } ul.plain { list-style: none; padding: 0; margin: 0 0 .75rem; } ul.plain li { padding: .35rem 0; border-bottom: 1px solid var(--rule); font-size: 15px; } ul.plain li:last-child { border-bottom: none; } /* Buttons inside a panel form: block, so they stop wrapping alongside a full-width input. And the destructive-ish second choice is quieter than the primary one -- two identical heavy buttons make the reader stop and parse. */ .panel form { margin-top: .9rem; } .panel form button { display: block; margin-top: .7rem; } .panel form + form { margin-top: .5rem; } button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--field-border); } button.secondary:hover { border-color: var(--graphite); } /* ---- Vendor form -------------------------------------------------------- */ /* email and password were the only fields that existed when the input rule above was written, so a text or time input fell back to the browser's default width: about a third of the column, next to full-width siblings. Selecting by type rather than widening `input` deliberately -- a checkbox must not become 100% wide. */ input[type="text"] { width: 100%; padding: .6rem .7rem; margin: .25rem 0 1.3rem; font-family: var(--mono); font-size: 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--field-border); } /* A clock face is a fixed size, so a full-column time input reads as a mistake. */ input[type="time"] { padding: .6rem .7rem; margin: .25rem 0 1.3rem; font-family: var(--mono); font-size: 15px; background: var(--paper); color: var(--ink); border: 1px solid var(--field-border); } /* A fieldset carries heavy browser chrome -- a grey box with a notch cut for the legend -- and there is no other box anywhere in this design. Reset to a plain labelled group. */ fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; } legend { padding: 0; margin-bottom: .5rem; font: 600 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); } fieldset .muted { font-size: 14px; margin: 0 0 .7rem; } /* A checkbox's label is a choice a person reads, not the name of a field. The global `label` rule is uppercase 11px mono, which is right above an input and wrong beside a tick: "WEDNESDAY" in mono reads as system output. */ label.check { display: flex; align-items: baseline; gap: .55rem; font: 400 15px/1.9 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); } label.check input { margin: 0; } /* ---- Vendor list -------------------------------------------------------- */ /* A paused vendor stays listed, because hidden a customer cannot tell whether they paused it or lost it. It must not read with the same weight as one we are actively checking, though, so the whole row steps back. */ ul.plain li.paused { color: var(--graphite); } ul.plain li.paused strong { font-weight: 400; } /* Edit and Pause are one decision about one vendor, so they sit on one line. The global `.panel form button { display: block }` rule stacked them. */ .row-actions { display: flex; align-items: center; gap: 1rem; margin-top: .45rem; } .row-actions form { margin: 0; } .row-actions button { padding: .4rem .75rem; font-size: 11px; } ul.plain li { padding: .7rem 0; } /* A note that explains a field must not outweigh the field's own label. Only `fieldset .muted` was covered above, so the note under the time inputs sat at full body size and read as the most important sentence on the form. */ form > .muted { font-size: 14px; margin: -.6rem 0 1.5rem; } /* The forgot form sits inside the sign-in page rather than behind a link, because navigating away mid-linking is a named drop-off in Ring's UX guide and the pending nonce lives on that session. Closed by default so it does not compete with the thing most people came to do. */ details.inline-reset { margin: 1.4rem 0 0; } details.inline-reset summary { cursor: pointer; font: 600 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); } details.inline-reset summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } details.inline-reset form { margin-top: .9rem; }