/* Orzoni, the inner pages: How it works, Pricing, the Tally connector, the
   policies, About, Contact, the walk-through, signing in, and the guides.
   Loaded after site.css on those pages only. It uses site.css's tokens and
   shared pieces (band, headline, btn, card, pill, faq, the frames) and adds
   what only these pages need, every class beginning pg-.
   Order: pieces several pages share, then page by page, the guides, phones,
   less motion. */
/* Some of the pieces here (steps, tabs, tables, alerts, the progress line)
   are adapted from MIT-licensed components,
   Copyright (c) 2026 Elia Kuratli. The licence is in THIRD-PARTY-NOTICES.md. */

/* ---------- pieces several of these pages share ---------- */

/* the top of a page that carries something beside its words */
.pg-lead { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.pg-lead .sub { max-width: 60ch; }
.pg-lead .acts { margin-top: 32px; }
.pg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.pg-two.mid { align-items: center; }
.pg-two.lean { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.pg-stack { display: grid; gap: 24px; align-content: start; }
.pg-stack > .sec-head { margin-bottom: 8px; }
.pg-lead + .band, .lead + .band, .lead + .pg-pricing > .band:first-child { padding-top: 8px; }
.pg-with { margin-bottom: 20px; }
.pg-more { gap: 8px 28px; }

/* a strip of things side by side, parted by hairlines, with no box round each */
.pg-strip { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-block: 1px solid var(--border); }
.pg-strip.four { --n: 4; }
.pg-strip > li { display: grid; gap: 8px; align-content: start; padding: 32px clamp(20px, 2.6vw, 36px) 36px; }
.pg-strip > li + li { border-left: 1px solid var(--border); }
.pg-strip > li:first-child { padding-left: 0; }
.pg-strip > li:last-child { padding-right: 0; }
.pg-strip .ico, .pg-strip .brand { margin-bottom: 10px; color: var(--indigo); }
.pg-strip .brand img { width: auto; height: 22px; }
.pg-strip h3 { color: var(--ink); font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.pg-strip p { color: var(--text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* things side by side, each in a card of its own: a sign, a line, a few sentences, and the way on */
.pg-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.pg-cards.two { --n: 2; }
.pg-card { display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-card > .ico, .pg-card > .brand, .pg-card > .pg-dir { margin-bottom: 10px; }
.pg-card > .ico { color: var(--indigo); }
.pg-card > .brand img { width: auto; height: 22px; }
.pg-card h3 { color: var(--ink); font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.pg-cards.two .pg-card h3 { font-size: var(--t-h3); }
.pg-card p { color: var(--text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.pg-card .more { margin-top: auto; padding-top: 8px; font-size: var(--t-small); }
/* which way something moves: from, an arrow, to */
.pg-dir { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--indigo); color: #fff; font-size: var(--t-small); font-weight: 500; line-height: 1.3; }
.pg-dir .ico { margin: 0; color: var(--accent); }
@media (max-width: 899px) { .pg-cards { --n: 2; } }
@media (max-width: 639px) { .pg-cards, .pg-cards.two { --n: 1; } }
.band-dark .pg-strip .ico { color: var(--accent); }

/* a note set apart from the words round it: a sign, a line in the ink's own weight, and what follows */
.pg-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.pg-note > .ico { margin-top: 2px; color: var(--indigo); }
.pg-note > div { min-width: 0; }
.pg-note b { color: var(--ink); }
.pg-note + .pg-note { margin-top: 12px; }

/* numbered steps down a line: the marker, the name of the step, and what it asks */
.pg-steps { --mark: 28px; display: grid; counter-reset: pg-step; }
.pg-step { position: relative; display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: 16px; padding-bottom: 26px; counter-increment: pg-step; }
.pg-step:last-child { padding-bottom: 0; }
.pg-step::before { content: counter(pg-step); position: relative; z-index: 1; display: grid; width: var(--mark); height: var(--mark); place-items: center; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--ink); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
/* the line keeps a clear gap from the marker above and the one below */
.pg-step:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--mark) + 6px); bottom: 6px; left: calc(var(--mark) / 2 - 1px); width: 2px; border-radius: var(--radius-pill); background: var(--border); }
.pg-step-text { min-width: 0; padding-top: 3px; }
.pg-step h3 { color: var(--ink); font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
.pg-step p { margin-top: 4px; color: var(--text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.pg-step .more { margin-top: 6px; font-size: var(--t-small); }
.pg-step.is-first::before { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
/* on a phone a step is its name until it is pressed (see pages.js); the button is drawn only where the script is */
.pg-step-more { display: none; }

/* pictures stepping across, the last the largest */
.pg-cascade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.pg-cascade .shot { grid-row: 1; grid-column: 1 / span 6; }
.pg-cascade .shot:nth-child(2) { grid-column: 4 / span 6; margin-top: 14%; }
.pg-cascade .shot:nth-child(3) { grid-column: 7 / span 6; margin-top: 28%; }
.pg-cascade .shot-in { border-radius: var(--radius-control); box-shadow: var(--shadow-raised); }

/* a table of two or three columns on a white card, parted by hairlines */
.pg-table { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.pg-table th, .pg-table td { padding: 16px 24px; text-align: left; vertical-align: top; border-top: 1px solid var(--border-subtle); }
.pg-table thead th { border-top: 0; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--t-small); font-weight: 500; }
.pg-table tbody th, .pg-table td strong { color: var(--ink); font-weight: 500; }
.pg-table td { color: var(--text-secondary); }
.pg-table tbody tr:first-child > * { border-top-color: var(--border); }
@media (hover: hover) and (pointer: fine) { .pg-table tbody tr:hover > * { background: var(--surface-muted); } }

/* one card that asks one thing: words at the left, what to press at the right */
.pg-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-callout h3 { color: var(--ink); font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.02em; }
.pg-callout p { margin-top: 8px; max-width: 62ch; color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }
.pg-callout .acts { justify-content: flex-end; }

/* a short list of facts under a heading: the name, then the value */
.pg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.pg-facts dt { color: var(--text-muted); font-size: var(--text-xs); }
.pg-facts dd { margin-top: 2px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- How it works ---------- */

/* what Orzoni promises about staying the same as Tally: a line down the left, a tick at each, and beside each the fear it rules out, struck through */
.pg-line { --mark: 28px; display: grid; }
.pg-line > li { position: relative; display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: 18px; padding-bottom: 30px; }
.pg-line > li:last-child { padding-bottom: 0; }
.pg-line-mark { position: relative; z-index: 1; display: grid; width: var(--mark); height: var(--mark); place-items: center; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--accent); }
.pg-line > li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--mark) + 5px); bottom: 5px; left: calc(var(--mark) / 2 - .5px); width: 1px; background: var(--border-strong); }
.pg-line-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 2px; }
.pg-line h3 { color: var(--ink); font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.pg-line p { margin-top: 6px; max-width: 58ch; color: var(--text-secondary); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.pg-struck { color: var(--text-secondary); font-size: var(--t-small); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; white-space: nowrap; }
.pg-prove { position: sticky; top: calc(var(--head) + 40px); }

/* how a count travels: four stops on one line, each handing on to the next */
.pg-flow { --mark: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: pg-stop; }
.pg-flow > li { position: relative; display: grid; gap: 8px; align-content: start; padding-right: 28px; counter-increment: pg-stop; }
.pg-flow > li::before { content: counter(pg-stop); position: relative; z-index: 1; display: grid; width: var(--mark); height: var(--mark); place-items: center; margin-bottom: 12px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--ink); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
.pg-flow > li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--mark) / 2 - 1px); left: calc(var(--mark) + 8px); right: 8px; height: 2px; border-radius: var(--radius-pill); background: var(--border-strong); }
.pg-flow > li.is-here::before { background: var(--accent); box-shadow: none; color: var(--accent-ink); }
.pg-flow h3 { color: var(--ink); font-size: 18px; line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.pg-flow p { color: var(--text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* ---------- Pricing ---------- */

/* The two plans, of which one is in hand. Each is a real radio button, so it
   works with no script: the ring that glides between them, the column the
   table tints and the figure on the meter all follow whichever is checked. */
.pg-plans { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pg-plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.pg-plan-pick { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.pg-plan-pick input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pg-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-plan h3 { color: var(--ink); font-size: 20px; line-height: 1.25; letter-spacing: -.02em; }
/* the round mark that says which is chosen */
.pg-plan-dot { display: grid; width: 20px; height: 20px; flex: none; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 50%; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.pg-plan-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); transform: scale(0); transition: transform var(--duration-spring) var(--ease-spring); }
.pg-plan:has(input:checked) .pg-plan-dot { border-color: var(--indigo); background: var(--indigo); }
.pg-plan:has(input:checked) .pg-plan-dot::after { transform: none; }
.pg-plan:has(input:checked) { background: color-mix(in oklab, var(--indigo) 3%, var(--surface)); }
.pg-plan:has(input:focus-visible) { outline: 2px solid var(--focus-outline); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pg-plan:not(:has(input:checked)):hover { border-color: var(--border-strong); } }
.pg-price { display: flex; align-items: baseline; gap: 10px; color: var(--ink); font-size: var(--t-fig); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pg-price small { color: var(--text-secondary); font-size: var(--t-body); font-weight: 400; letter-spacing: var(--tracking-body); }
.pg-plan-about { color: var(--text-secondary); line-height: 1.5; }
.pg-ticks { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); }
.pg-ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; color: var(--text); font-size: 15px; line-height: 1.45; }
.pg-ticks .ico { margin-top: 2px; color: var(--ok); }
.pg-plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; }
/* what is paid today, in the same type as the price */
.pg-plan-today { display: grid; gap: 3px; color: var(--indigo); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pg-plan-today small { color: var(--text-secondary); font-size: var(--t-small); font-weight: 400; letter-spacing: var(--tracking-body); }
.pg-plan-foot .btn { position: relative; z-index: 2; }
/* the one moving part: a ring over the chosen card's own line, so the card never changes size */
.pg-ring { position: absolute; z-index: 3; top: 0; left: 0; width: calc((100% - 16px) / 2); height: 100%; border: 1.5px solid var(--indigo); border-radius: var(--radius-panel); pointer-events: none; transition: transform var(--duration-spring) var(--ease-spring); }
.pg-plans:has(.pg-plan:nth-of-type(2) input:checked) .pg-ring { transform: translateX(calc(100% + 16px)); }
@supports not selector(:has(*)) { .pg-ring { display: none; } }

.pg-promise { max-width: 64ch; margin: 32px auto 0; color: var(--text); font-size: var(--t-lede); line-height: 1.5; text-align: center; text-wrap: pretty; }
.pg-promise b { color: var(--ink); }
.pg-tax { margin-top: 10px; color: var(--text-secondary); font-size: var(--t-small); text-align: center; }
.pg-tax .made { margin-left: 14px; }


/* the two plans row by row: the column of the plan in hand stands on a tint */
.pg-compare { --band: color-mix(in oklab, var(--indigo) 5%, var(--surface)); --grid: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)); overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-compare-pick { display: none; }
.pg-compare table { display: block; width: 100%; font-size: 15px; line-height: 1.45; }
.pg-compare thead, .pg-compare tbody { display: block; }
.pg-compare tr { display: grid; grid-template-columns: var(--grid); }
.pg-compare thead { position: sticky; z-index: 2; top: var(--head); background: color-mix(in oklab, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--border); }
.pg-compare thead th { display: grid; align-content: end; justify-items: center; gap: 2px; min-height: 84px; padding: 16px 12px; color: var(--ink); font-size: var(--t-body); font-weight: 500; text-align: center; }
.pg-compare thead th span { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.pg-compare tbody th { display: grid; align-content: center; min-height: 54px; padding: 12px 16px 12px 24px; color: var(--text); font-weight: 400; text-align: left; }
.pg-compare td { display: grid; place-items: center; padding: 8px; color: var(--ink); font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.pg-compare tbody tr > * { border-top: 1px solid var(--border-subtle); transition: background-color var(--duration-standard) var(--ease-standard); }
.pg-compare tr.pg-sect { grid-template-columns: minmax(0, 1fr); }
.pg-compare tr.pg-sect th { min-height: 0; padding: 28px 24px 10px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
.pg-compare tr.pg-sect + tr > * { border-top-color: var(--border); }
.pg-yes { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); }
.pg-pricing:has(#pg-plan-0:checked) .pg-compare :is(td, thead th):nth-child(2),
.pg-pricing:has(#pg-plan-1:checked) .pg-compare :is(td, thead th):nth-child(3) { background: var(--band); }
.pg-pricing:has(#pg-plan-0:checked) .pg-compare td:nth-child(2) .pg-yes,
.pg-pricing:has(#pg-plan-1:checked) .pg-compare td:nth-child(3) .pg-yes { background: var(--indigo); color: var(--surface); }
@media (hover: hover) and (pointer: fine) { .pg-compare tbody tr:not(.pg-group):hover > th { background: var(--surface-muted); } }

.pg-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; margin-top: 32px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.pg-terms li { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 12px; }
.pg-terms li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--border-strong); }
.pg-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.pg-faq .sec-head { position: sticky; top: calc(var(--head) + 40px); margin-bottom: 0; }

/* ---------- the Tally connector ---------- */
.pg-get { display: grid; gap: 20px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-get-name { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; }
.pg-get-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: var(--indigo); color: var(--accent); }
.pg-get-name b { display: block; color: var(--ink); font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.pg-get-name span { display: block; color: var(--text-secondary); font-size: var(--t-small); overflow-wrap: anywhere; }
.pg-get-how { color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }
.pg-get-how b { color: var(--ink); }
.pg-sum { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-muted); }
.pg-sum code { min-width: 0; flex: 1; padding: 0; overflow-x: auto; background: none; color: var(--ink); font-size: 13px; white-space: nowrap; scrollbar-width: none; }

/* Safe to install: what Windows asks, drawn small, with where to press */
.pg-safe { display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-safe h2 { color: var(--ink); font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.02em; }
.pg-safe > p { color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }
.pg-safe > p b { color: var(--ink); }
/* our own drawing of a notice with two presses in it. Not a picture of anyone's window. */
.pg-prompt { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 10px; align-items: center; color: var(--text-muted); }
.pg-prompt-box { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; gap: 7px; min-height: 132px; padding: 14px; border-radius: var(--radius-control); background: var(--indigo); }
.pg-prompt-box i { height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--surface) 26%, transparent); }
.pg-prompt-box i:first-child { width: 62%; height: 8px; margin-bottom: 3px; background: color-mix(in oklab, var(--surface) 62%, transparent); }
.pg-prompt-box i:nth-child(3) { width: 78%; }
.pg-prompt-press { display: inline-flex; align-items: center; align-self: start; gap: 6px; width: fit-content; margin-top: 4px; color: var(--surface); font-size: var(--text-xs); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pg-prompt-row { display: flex; flex-wrap: wrap; align-self: end; justify-content: flex-end; gap: 6px; }
.pg-prompt-btn { display: inline-flex; min-height: 24px; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid color-mix(in oklab, var(--surface) 40%, transparent); color: var(--surface); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.pg-prompt-btn.is-it { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.pg-prompt-n { display: grid; width: 16px; height: 16px; flex: none; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 500; line-height: 1; text-decoration: none; }
.pg-prompt-btn.is-it .pg-prompt-n { background: var(--accent-ink); color: var(--accent); }
.pg-safe-facts { display: grid; gap: 12px; }
.pg-safe-facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.pg-safe-facts .ico { margin-top: 2px; color: var(--ok); }
.pg-safe-facts b { color: var(--ink); }
.pg-safe-links { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--border); }

.pg-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 64px); border-top: 1px solid var(--border); }
.pg-needs li { padding: 22px 0; border-bottom: 1px solid var(--border); }
.pg-needs b { display: block; color: var(--ink); font-size: 17px; letter-spacing: -.015em; }
.pg-needs p { margin-top: 4px; color: var(--text-secondary); font-size: 15px; line-height: 1.55; text-wrap: pretty; }

/* ---------- the policies, Security, About: long reading beside a list of its parts ---------- */
.pg-doc { display: grid; grid-template-columns: 216px minmax(0, 700px); gap: clamp(40px, 6vw, 88px); align-items: start; }
.pg-doc-nav { position: sticky; top: calc(var(--head) + 32px); display: grid; gap: 2px; max-height: calc(100dvh - var(--head) - 64px); overflow-y: auto; scrollbar-width: none; }
.pg-doc-nav b { padding: 0 12px 8px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
.pg-doc-nav a { display: flex; min-height: 36px; align-items: center; padding: 6px 12px; border-radius: 12px; color: var(--text-secondary); font-size: var(--t-small); font-weight: 500; line-height: 1.3; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.pg-doc-nav a:hover { color: var(--ink); background: var(--wash); }
.pg-doc-nav a[aria-current], .pg-doc-nav a.is-here { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
/* on a narrow window the list folds away under one line */
.pg-doc-fold { display: none; }
.pg-prose { min-width: 0; color: var(--text); font-size: 17px; line-height: 1.7; }
.pg-prose h2 { margin: 56px 0 12px; scroll-margin-top: calc(var(--head) + 24px); color: var(--ink); font-size: 26px; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.pg-prose > h2:first-child, .pg-prose > .pg-note + h2, .pg-prose > .pg-brief + h2 { margin-top: 0; }
.pg-prose h3 { margin: 32px 0 8px; color: var(--ink); font-size: 19px; letter-spacing: -.015em; }
.pg-prose p + p, .pg-prose ul + p, .pg-prose ol + p, .pg-prose p + ul, .pg-prose p + ol, .pg-prose .pg-scroll + p, .pg-prose p + .pg-check { margin-top: 16px; }
.pg-prose ul:not([class]) { display: grid; gap: 8px; padding-left: 22px; list-style: disc; }
.pg-prose ul:not([class]) li::marker { color: var(--text-muted); }
.pg-prose ol:not([class]) { display: grid; gap: 8px; padding-left: 26px; list-style: decimal; }
.pg-prose ol:not([class]) li::marker { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pg-prose a:not([class]) { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.pg-prose a:not([class]):hover { text-decoration-color: currentColor; }
.pg-prose strong { color: var(--ink); font-weight: 500; }
.pg-prose > .pg-note { margin-bottom: 40px; }
.pg-prose table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.pg-prose th, .pg-prose td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.pg-prose thead th { color: var(--ink); border-bottom-color: var(--border-strong); }
.pg-scroll { overflow-x: auto; }
.pg-scroll table { min-width: 560px; }
/* the short answer at the head of a page */
.pg-brief { display: grid; margin-bottom: 48px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); font-size: var(--t-body); }
.pg-brief > div { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 24px; padding: 18px 24px; }
.pg-brief > div + div { border-top: 1px solid var(--border-subtle); }
.pg-brief dt { color: var(--ink); font-weight: 500; line-height: 1.5; }
.pg-brief dd { color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
/* a detail of the business still to be filled in, marked so it cannot be missed */
.pg-blank { padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
/* "how to check": beside a claim, where to see it for yourself */
.pg-check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--surface-muted); color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.pg-check .ico { margin-top: 2px; color: var(--tally); }
.pg-check b { color: var(--ink); }
.pg-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-bottom: 40px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-proof p { min-width: 0; flex: 1 1 320px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }

/* About: what we hold ourselves to, set like the numbered terms of a bill */
.pg-clauses { display: grid; counter-reset: pg-clause; border-top: 1px solid var(--border); }
.pg-clauses > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 22px 0; border-bottom: 1px solid var(--border); counter-increment: pg-clause; }
.pg-clauses > li::before { content: counter(pg-clause); grid-row: span 3; color: var(--wait); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pg-clauses h3 { margin: 0; color: var(--ink); font-size: 19px; letter-spacing: -.015em; }
.pg-clauses p { color: var(--text-secondary); font-size: var(--t-body); line-height: 1.6; }
.pg-clauses .pg-how { color: var(--text-muted); font-size: 15px; }
.pg-clauses .pg-how b { color: var(--text-secondary); font-weight: 500; }
.pg-stand { display: grid; gap: 0; border-top: 1px solid var(--border); }
.pg-stand > li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--t-body); line-height: 1.55; }
.pg-stand > li > span:last-child { color: var(--text-secondary); }
.pg-stand .pill { justify-self: start; }

/* Contact: the ways to reach us, each a card that is one link */
.pg-reach { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pg-way { display: grid; gap: 6px; align-content: start; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-way .ico, .pg-way .brand { margin-bottom: 10px; color: var(--indigo); }
.pg-way h2 { color: var(--text-secondary); font-size: var(--t-small); font-weight: 500; }
.pg-way .pg-way-val { color: var(--ink); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pg-way .pg-way-val a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.pg-way p { color: var(--text-secondary); font-size: 15px; line-height: 1.55; }
.pg-who { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.pg-who dl { display: grid; gap: 12px; margin-top: 16px; }
.pg-who dl > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; font-size: 15px; line-height: 1.5; }
.pg-who dt { color: var(--text-secondary); }
.pg-who dd { color: var(--ink); }
.pg-wa { gap: 10px; }

/* signing in, and linking a computer: one surface, words beside a picture */
.pg-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--surface); }
.pg-entry-text { display: grid; gap: 24px; align-content: center; padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 64px); }
.pg-entry-text h1.headline { font-size: var(--t-page); }
.pg-entry-text .sub { margin-top: -8px; }
.pg-entry-acts { display: grid; gap: 12px; max-width: 360px; }
.pg-entry-foot { display: grid; gap: 8px; padding-top: 24px; border-top: 1px solid var(--border); }
.pg-entry-pic { display: grid; place-items: end center; padding: 56px 32px 0; background: var(--paper-2); }
.pg-entry-pic .phone { width: min(300px, 100%); margin-bottom: -64px; }
.pg-entry-pic.flat { place-items: center; padding: 48px; }
.pg-entry-pic.flat .shot { width: 100%; max-width: 420px; }

/* the walk-through: what happens, beside the form */
.pg-walk .talk-ways { display: grid; gap: 12px; }
.pg-walk .talk-ways > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; align-items: start; }
.pg-walk .talk-ways .ico { margin-top: 2px; color: var(--indigo); }
.pg-walk .talk-ways dt { color: var(--text-secondary); font-size: var(--t-small); }
.pg-walk .talk-ways dd { color: var(--ink); font-weight: 500; }
.pg-walk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 72px); align-items: start; }

/* ---------- the guides: the list of them ---------- */
.pg-search { position: relative; display: block; max-width: 620px; margin-top: 32px; }
.pg-search > .ico { position: absolute; top: 50%; left: 18px; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.pg-search input { display: block; width: 100%; height: 56px; padding: 0 52px 0 50px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: 17px; -webkit-appearance: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.pg-search input::placeholder { color: var(--text-muted); }
.pg-search input::-webkit-search-cancel-button { display: none; }
.pg-search input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 4px color-mix(in oklab, var(--indigo) 12%, transparent); }
.pg-search-clear { position: absolute; top: 50%; right: 10px; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text-muted); transform: translateY(-50%); }
.pg-search-clear:hover { background: var(--wash); color: var(--ink); }
.pg-search input:placeholder-shown ~ .pg-search-clear { display: none; }
.pg-answers { max-width: 760px; margin-top: 16px; }
.pg-answers:empty { display: none; }
.pg-tries { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; color: var(--text-muted); font-size: var(--t-small); }
.pg-try { min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-size: var(--t-small); transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.pg-try:hover { border-color: var(--border-strong); color: var(--ink); }

.pg-first { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: pg-first; }
.pg-first a { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); counter-increment: pg-first; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.pg-first a::before { content: counter(pg-first); display: grid; width: 28px; height: 28px; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 500; }
.pg-first b { color: var(--ink); font-size: 19px; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.pg-first p { color: var(--text-secondary); font-size: var(--t-small); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.pg-first .more { margin-top: auto; padding-top: 8px; font-size: var(--t-small); }
@media (hover: hover) and (pointer: fine) { .pg-first a:hover { border-color: var(--border-strong); background: var(--surface-muted); } }

/* the sections, as chips, for a thumb */
.pg-chips { display: none; }
.pg-groups { transition: opacity var(--duration-fast) var(--ease-standard); }
.pg-groups.is-back { opacity: .32; }
.pg-group { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 24px clamp(32px, 6vw, 80px); padding: 48px 0; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--head) + 16px); }
.pg-group h2 { color: var(--ink); font-size: 26px; line-height: 1.2; letter-spacing: -.025em; }
.pg-group > div > p { margin-top: 8px; max-width: 32ch; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.pg-group-n { display: block; margin-top: 12px; color: var(--text-muted); font-size: var(--text-xs); }
.pg-list { display: grid; }
.pg-list a { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border-subtle); transition: background-color var(--duration-fast) var(--ease-standard); }
.pg-list a:first-child { border-top-color: transparent; }
.pg-list b { color: var(--ink); font-size: 17px; letter-spacing: -.015em; }
.pg-list p { grid-column: 1; color: var(--text-secondary); font-size: var(--t-small); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pg-list .ico { grid-row: 1 / span 2; grid-column: 2; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) { .pg-list a:hover b { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; } .pg-list a:hover .ico { color: var(--ink); transform: translateX(3px); } }
.pg-also { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pg-also a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
.pg-also a:hover { border-color: var(--border-strong); }
.pg-also small { color: var(--text-muted); font-size: var(--text-xs); }
.pg-also b { color: var(--ink); font-size: var(--t-body); line-height: 1.35; text-wrap: pretty; }

/* ---------- the guides: one guide ---------- */
/* how far down the guide you are: a hairline under the header that fills as the page is read */
.pg-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .pg-progress { position: fixed; z-index: 39; top: var(--head); left: 0; right: 0; display: block; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center; animation: pg-read linear both; animation-timeline: scroll(root block); pointer-events: none; }
  @keyframes pg-read { to { transform: none; } }
}
.pg-guide { display: grid; grid-template-columns: 232px minmax(0, 720px) minmax(0, 208px); gap: clamp(32px, 4vw, 64px); align-items: start; padding-block: 32px clamp(64px, 8vw, 112px); }
.pg-rail { position: sticky; top: calc(var(--head) + 24px); display: grid; gap: 1px; max-height: calc(100dvh - var(--head) - 48px); padding-right: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.pg-rail h2 { margin: 18px 0 4px; padding: 0 10px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
.pg-rail h2:first-child { margin-top: 0; }
.pg-rail a { display: block; padding: 7px 10px; border-radius: 10px; color: var(--text-secondary); font-size: var(--t-small); line-height: 1.35; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.pg-rail a:hover { color: var(--ink); background: var(--wash); }
.pg-rail a[aria-current] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-weight: 500; }
.pg-toc { position: sticky; top: calc(var(--head) + 24px); display: grid; gap: 1px; max-height: calc(100dvh - var(--head) - 48px); overflow-y: auto; scrollbar-width: none; }
.pg-toc b { margin-bottom: 8px; color: var(--ink); font-size: var(--t-small); }
.pg-toc a { padding: 6px 0 6px 14px; border-left: 2px solid var(--border); color: var(--text-secondary); font-size: var(--t-small); line-height: 1.35; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.pg-toc a:hover { color: var(--ink); }
.pg-toc a.is-here { border-left-color: var(--accent); color: var(--ink); font-weight: 500; }
.pg-tools { position: relative; display: none; }
/* "On this page", folded: a button, and under it the parts of the guide */
.pg-tool-toc { position: static; }
.pg-tool-toc summary { list-style: none; cursor: pointer; }
.pg-tool-toc summary::-webkit-details-marker { display: none; }
.pg-tool-toc nav { position: absolute; z-index: 6; top: calc(100% + 8px); left: 0; display: grid; width: min(340px, calc(100vw - var(--gut) * 2)); max-height: 60dvh; padding: 8px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); box-shadow: var(--shadow-floating); }
.pg-tool-toc nav a { display: flex; min-height: 44px; align-items: center; padding: 6px 12px; border-radius: 10px; color: var(--text-secondary); font-size: 15px; line-height: 1.35; }
.pg-tool-toc nav a:hover { background: var(--wash); color: var(--ink); }
/* the list of all guides, when it is shown in the sheet */
.sheet-body .pg-rail { position: static; display: grid; max-height: none; padding: 0; overflow: visible; }
.sheet-body .pg-rail a { padding: 11px 10px; font-size: 15px; }
.pg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--t-small); }
.pg-crumbs a { color: var(--text-secondary); }
.pg-crumbs a:hover { color: var(--ink); }
.pg-article { min-width: 0; }
.pg-article > h1 { margin-top: 16px; color: var(--ink); font-size: clamp(32px, 4vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: var(--tracking-display); text-wrap: balance; }
.pg-intro { margin-top: 16px; color: var(--text-secondary); font-size: 19px; line-height: 1.5; text-wrap: pretty; }
.pg-time { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--text-muted); font-size: var(--t-small); }

/* the words of a guide, as its text file is turned into a page (site/src/markdown.mjs). Set for reading: a wider line, larger type, room between things. */
.pg-body { margin-top: 40px; color: var(--text); font-size: 17px; line-height: 1.7; }
.pg-body > * + * { margin-top: 20px; }
.pg-body h2 { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--head) + 8px); color: var(--ink); font-size: 28px; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.pg-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pg-body h3 { margin-top: 40px; scroll-margin-top: calc(var(--head) + 24px); color: var(--ink); font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.pg-body h2 + *, .pg-body h3 + * { margin-top: 14px; }
.pg-body p { text-wrap: pretty; }
.pg-body strong { color: var(--ink); font-weight: 500; }
.pg-body a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; transition: text-decoration-color var(--duration-fast) var(--ease-standard); }
.pg-body a:hover { text-decoration-color: currentColor; }
.pg-body ul { display: grid; gap: 10px; padding-left: 22px; list-style: disc; }
.pg-body ul li::marker { color: var(--text-muted); }
.pg-body li > * + * { margin-top: 12px; }
/* numbered steps: the number in a marker, a line joining one to the next */
.pg-body ol.g-steps { --mark: 28px; display: grid; gap: 0; counter-reset: g-step; }
.pg-body ol.g-steps > li { position: relative; display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: 16px; padding-bottom: 18px; counter-increment: g-step; }
.pg-body ol.g-steps > li:last-child { padding-bottom: 0; }
.pg-body ol.g-steps > li::before { content: counter(g-step); position: relative; z-index: 1; display: grid; width: var(--mark); height: var(--mark); place-items: center; margin-top: 1px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--ink); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.pg-body ol.g-steps > li:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--mark) + 7px); bottom: 5px; left: calc(var(--mark) / 2 - 1px); width: 2px; border-radius: 2px; background: var(--border); }
.pg-body ol.g-steps > li > div { min-width: 0; }
.pg-body ol.g-steps > li > div > * + * { margin-top: 14px; }
/* a picture of a screen, in a drawn window; pressing it opens it large (pages.js) */
.g-shot { margin-block: 28px; }
.g-shot .g-shot-in { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); cursor: zoom-in; }
.g-shot img { width: 100%; }
.g-shot figcaption { margin-top: 10px; color: var(--text-muted); font-size: var(--t-small); line-height: 1.5; text-wrap: pretty; }
.g-shot.phone { max-width: 320px; margin-inline: auto; }
.g-shot.phone .g-shot-in { padding: 8px; border: 0; border-radius: 40px; background: var(--bezel); }
.g-shot.phone img { border-radius: 32px; }
.g-shot.phone figcaption { text-align: center; }
/* a boxed note: Good to know, Tip, Take care, Coming next */
.g-note { display: grid; gap: 6px; padding: 18px 20px 18px 52px; position: relative; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
.g-note::before { content: ""; position: absolute; top: 20px; left: 20px; width: 20px; height: 20px; background: var(--indigo); -webkit-mask: var(--sign) center / contain no-repeat; mask: var(--sign) center / contain no-repeat; }
.g-note { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 9.2v4.300M10 6.500h.010'/%3E%3C/svg%3E"); }
.g-note.tip { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.500 14.500h5M8.300 17h3.400M10 3a4.800 4.800 0 0 0-2.800 8.700c.5.400.8 1 .8 1.600h4c0-.6.300-1.200.8-1.600A4.800 4.800 0 0 0 10 3Z'/%3E%3C/svg%3E"); border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface)); }
.g-note.tip::before { background: var(--wait); }
.g-note.warning { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.200 17.300 16H2.700L10 3.200ZM10 8.200v3.600M10 14h.010'/%3E%3C/svg%3E"); border-color: color-mix(in oklab, var(--wait) 30%, var(--border)); background: color-mix(in oklab, var(--wait) 6%, var(--surface)); }
.g-note.warning::before { background: var(--wait); }
.g-note.soon { --sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 6v4.300l2.800 1.700'/%3E%3C/svg%3E"); background: var(--surface-muted); }
.g-note > b { color: var(--ink); font-size: 15px; }
.g-note > * + * { margin-top: 0; }
/* a table: on a wide page, columns on a card */
.g-table { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.g-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.g-table th, .g-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--border-subtle); }
.g-table thead th { border-top: 0; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--t-small); font-weight: 500; white-space: nowrap; }
.g-table tbody tr:first-child > * { border-top-color: var(--border); }
.g-table td:first-child { color: var(--ink); }
.g-table td { color: var(--text-secondary); overflow-wrap: break-word; }
.g-table td strong { color: var(--ink); }
.g-table td:empty::after { content: "\2013"; color: var(--text-muted); }
.pg-also-read { margin-top: 56px; padding: 24px 28px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
.pg-also-read h2 { color: var(--ink); font-size: var(--t-body); font-weight: 500; }
.pg-also-read ul { display: grid; gap: 2px; margin-top: 10px; }
.pg-also-read a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 10px 0; color: var(--ink); font-weight: 500; line-height: 1.4; }
.pg-also-read li + li a { border-top: 1px solid var(--border-subtle); }
.pg-also-read .ico { color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-standard); }
.pg-also-read a:hover .ico { transform: translateX(3px); }
.pg-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pg-next a { display: grid; gap: 4px; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.pg-next a:hover { border-color: var(--border-strong); background: var(--surface-muted); }
.pg-next a:last-child { text-align: right; }
.pg-next small { color: var(--text-muted); font-size: var(--text-xs); }
.pg-next b { color: var(--ink); font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
.pg-help { margin-top: 32px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.pg-help a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }
/* a picture opened large: it fills the window, and a press anywhere puts it back */
.pg-zoom { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: color-mix(in oklab, var(--bezel) 92%, transparent); overflow: auto; overscroll-behavior: contain; cursor: zoom-out; }
.pg-zoom::backdrop { background: none; }
.pg-zoom[open] { display: grid; animation: pg-zoom-in var(--duration-standard) var(--ease-enter); }
.pg-zoom img { width: auto; max-width: none; height: auto; margin: auto; padding: 56px 16px 24px; }
.pg-zoom.is-fit img { width: 100%; max-width: 1280px; }
.pg-zoom-close { position: fixed; top: 12px; right: 12px; z-index: 1; }
@keyframes pg-zoom-in { from { opacity: 0; } }

/* (the ask box's answers, made by assets/ask.js, are styled in site.css: the front page has the box too) */

/* ---------- narrower windows ---------- */
@media (max-width: 1179px) {
  /* the list of all guides leaves the side and waits behind a button */
  .pg-guide { grid-template-columns: minmax(0, 720px) minmax(0, 208px); justify-content: center; }
  .pg-rail { display: none; }
  .pg-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
  .pg-tools .pg-tool-toc { display: none; }
}
@media (max-width: 1023px) {
  .pg-guide { grid-template-columns: minmax(0, 720px); }
  .pg-guide > .pg-toc { display: none; }
  .pg-tools .pg-tool-toc { display: inline-flex; }
  .pg-first { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-first a { min-height: 0; }
  .pg-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; }
  .pg-flow > li:nth-child(2)::after { display: none; }
  .pg-doc { grid-template-columns: minmax(0, 700px); }
  .pg-doc-nav { display: none; }
  .pg-doc-fold { display: block; margin-bottom: 32px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
  .pg-doc-fold summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 16px; color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
  .pg-doc-fold summary::-webkit-details-marker { display: none; }
  .pg-doc-fold summary .ico { color: var(--text-muted); transform: rotate(90deg); transition: transform var(--duration-standard) var(--ease-standard); }
  .pg-doc-fold[open] summary .ico { transform: rotate(-90deg); }
  .pg-doc-fold nav { display: grid; padding: 4px 8px 10px; }
  .pg-doc-fold nav a { display: flex; min-height: 44px; align-items: center; padding: 0 8px; border-radius: 10px; color: var(--text-secondary); font-size: 15px; }
  .pg-doc-fold nav a[aria-current] { color: var(--ink); font-weight: 500; }
}
@media (max-width: 1023px) and (min-width: 800px) {
  /* four in a row become two rows of two */
  .pg-strip.four { --n: 2; }
  .pg-strip.four > li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pg-strip.four > li:nth-child(even) { padding-right: 0; }
  .pg-strip.four > li:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 899px) {
  .pg-walk > .walk { order: -1; }
  .pg-two, .pg-two.lean, .pg-faq, .pg-walk { grid-template-columns: minmax(0, 1fr); }
  .pg-faq .sec-head, .pg-prove { position: static; }
  .pg-callout { grid-template-columns: minmax(0, 1fr); }
  .pg-callout .acts { justify-content: flex-start; }
  .pg-entry { grid-template-columns: minmax(0, 1fr); }
  .pg-entry-pic { padding-top: 40px; }
  .pg-entry-pic .phone { width: min(240px, 100%); margin-bottom: -120px; }
  .pg-cascade { max-width: 520px; }
  .pg-group { grid-template-columns: minmax(0, 1fr); padding: 36px 0; }
  .pg-group > div > p { max-width: none; }
}
@media (max-width: 799px) {
  .pg-strip { grid-template-columns: minmax(0, 1fr); }
  .pg-strip > li, .pg-strip > li:first-child, .pg-strip > li:last-child { padding: 24px 0 26px; }
  .pg-strip > li + li { border-left: 0; border-top: 1px solid var(--border); }
  .pg-strip .ico, .pg-strip .brand { margin-bottom: 4px; }
  .pg-needs, .pg-terms { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- phones: designed for a thumb, not squeezed ---------- */
@media (max-width: 719px) {
  /* the plans stack, and the ring glides down instead of across */
  .pg-plans { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; }
  .pg-ring { width: 100%; height: calc((100% - 12px) / 2); }
  .pg-plans:has(.pg-plan:nth-of-type(2) input:checked) .pg-ring { transform: translateY(calc(100% + 12px)); }
  .pg-plan { gap: 14px; }
  /* The comparison shows one plan at a time: a picker that stays in view, then
     every row as a line with its answer at the right. Both plans hold the same
     things, so two columns of ticks would only be a squeezed desktop. */
  .pg-compare { overflow: visible; border: 0; border-radius: 0; background: none; }
  .pg-compare-pick { position: sticky; z-index: 3; top: calc(var(--head) + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-bottom: 12px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-control); background: color-mix(in oklab, var(--surface-muted) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-raised); }
  .pg-compare-pick label { display: grid; min-height: 44px; place-items: center; align-content: center; padding: 4px 8px; border: 1px solid transparent; border-radius: 14px; color: var(--text-muted); font-size: var(--t-small); font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
  .pg-compare-pick small { font-size: var(--text-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
  .pg-pricing:has(#pg-plan-0:checked) .pg-compare-pick label:nth-child(1),
  .pg-pricing:has(#pg-plan-1:checked) .pg-compare-pick label:nth-child(2) { border-color: var(--border); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-resting); }
  .pg-compare table { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface); }
  .pg-compare thead { display: none; }
  .pg-compare tr { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-compare tbody th { min-height: 50px; padding: 12px 8px 12px 18px; font-size: 15px; }
  .pg-compare td { padding: 8px 18px 8px 8px; background: none !important; }
  .pg-compare tr.pg-sect th { padding: 24px 18px 8px; }
  .pg-compare tbody tr.pg-sect:first-child th { padding-top: 16px; }
  /* only the column of the plan in hand */
  .pg-compare td:nth-child(3) { display: none; }
  .pg-pricing:has(#pg-plan-1:checked) .pg-compare td:nth-child(2) { display: none; }
  .pg-pricing:has(#pg-plan-1:checked) .pg-compare td:nth-child(3) { display: grid; }
  @supports not selector(:has(*)) { .pg-compare-pick { display: none; } }

  /* a wide table of two columns becomes a list: the name, and under it what goes with it */
  .pg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pg-table table, .pg-table tbody, .pg-table tr, .pg-table td, .pg-table th { display: block; }
  .pg-table tr { padding: 16px 18px; border-top: 1px solid var(--border-subtle); }
  .pg-table tbody tr:first-child { border-top: 0; }
  .pg-table th, .pg-table td { padding: 0; border: 0; }
  .pg-table td + td { margin-top: 4px; }

  /* a guide's table becomes a run of cards: the first cell names the card, and
     each of the others sits under the name of its column (markdown.mjs gives each cell that name) */
  .g-table { overflow: visible; border: 0; border-radius: 0; background: none; }
  .g-table table, .g-table tbody, .g-table tr, .g-table td { display: block; }
  .g-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .g-table tbody { display: grid; gap: 10px; }
  .g-table tr { padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
  .g-table td, .g-table tbody tr:first-child > * { padding: 0; border: 0; }
  .g-table td:first-child { font-size: 16px; font-weight: 500; line-height: 1.4; }
  .g-table td + td { margin-top: 12px; }
  .g-table td + td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
  .g-table td[data-label=""]::before { display: none; }
  .g-table td:empty { display: none; }

  .pg-guide { padding-top: 16px; }
  .pg-body { font-size: 17px; }
  .pg-body h2 { margin-top: 48px; padding-top: 28px; font-size: 24px; }
  .pg-next { grid-template-columns: minmax(0, 1fr); }
  .pg-next a:last-child { text-align: left; }
  .g-shot { margin-inline: calc(var(--gut) * -0.5); }
  .g-shot.phone { margin-inline: auto; }
  .g-shot figcaption { padding-inline: calc(var(--gut) * 0.5); }

  /* the sections of the guides as chips that stay under the header and travel sideways */
  .pg-chips { position: sticky; z-index: 5; top: var(--head); display: flex; gap: 8px; margin: 0 calc(var(--gut) * -1) 8px; padding: 10px var(--gut); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: color-mix(in oklab, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .pg-chips::-webkit-scrollbar { display: none; }
  .pg-chips a { display: inline-flex; flex: none; min-height: 36px; align-items: center; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-size: var(--t-small); font-weight: 500; white-space: nowrap; }
  .pg-chips a.is-here { border-color: var(--indigo); background: var(--indigo); color: var(--surface); }
  .pg-group { scroll-margin-top: calc(var(--head) + 64px); }
  .pg-first { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pg-first::-webkit-scrollbar { display: none; }
  .pg-first a { scroll-snap-align: center; min-height: 176px; }
  .pg-search input { height: 54px; font-size: 16px; }
  .pg-list a { padding: 14px 0; }

  /* the count's four stops run down one line, as steps do */
  .pg-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pg-flow > li { grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: 16px; padding: 0 0 26px; }
  .pg-flow > li::before { grid-row: 1 / span 2; margin: 0; }
  .pg-flow > li > * { grid-column: 2; }
  .pg-flow > li:not(:last-child)::after, .pg-flow > li:nth-child(2)::after { display: block; top: calc(var(--mark) + 6px); bottom: 6px; left: calc(var(--mark) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .pg-flow h3 { padding-top: 4px; }

  /* a step is its name until it is pressed, so six steps fit one screen (only where the script runs) */
  .js .pg-steps.is-folding .pg-step-more { position: absolute; inset: 0 0 auto 0; z-index: 2; display: block; width: 100%; height: 44px; padding: 0; border: 0; background: none; }
  .js .pg-steps.is-folding .pg-step h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
  .js .pg-steps.is-folding .pg-step h3::after { content: ""; width: 8px; height: 8px; flex: none; margin-right: 4px; border-right: 1.6px solid var(--text-muted); border-bottom: 1.6px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--duration-standard) var(--ease-standard); }
  .js .pg-steps.is-folding .pg-step.is-open h3::after { transform: rotate(-135deg); }
  .js .pg-steps.is-folding .pg-step-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--ease-standard); }
  .js .pg-steps.is-folding .pg-step-fold > div { min-height: 0; overflow: hidden; }
  .js .pg-steps.is-folding .pg-step.is-open .pg-step-fold { grid-template-rows: 1fr; }
  .js .pg-steps.is-folding .pg-step { padding-bottom: 18px; }

  .pg-brief > div, .pg-who dl > div, .pg-stand > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pg-clauses > li { grid-template-columns: 32px minmax(0, 1fr); }
  .pg-prose { font-size: 16px; }
  .pg-prose h2 { margin-top: 44px; font-size: 23px; }
  .pg-prompt { grid-template-columns: minmax(0, 1fr); }
  .pg-prompt > .ico { justify-self: center; transform: rotate(90deg); }
  .pg-line p { font-size: 15px; }
}

/* ---------- anyone who has asked for less motion gets the end state, with no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .pg-ring, .pg-plan, .pg-plan-dot, .pg-plan-dot::after, .pg-compare tbody tr > *, .pg-yes, .pg-flow > li::before, .pg-groups, .pg-list a, .pg-list .ico, .pg-steps .pg-step-fold, .pg-step h3::after, .pg-toc a { transition: none !important; }
  .pg-zoom[open] { animation: none; }
  .pg-progress { display: none; }
}