/* The guide (/client-approval-for-meta-ads): a reading page on top of legal.css, the site's reading look (founder
   2026-10-11). legal.css gives the top bar, the stage title, the sheet, the contents column and the footer; this file adds
   only what the guide carries beyond it, all in tokens.css colours (support.html carries its one .acts rule inline):
   - the title's two actions: Download checklist (the stage's chosen pill) and Print guide (a veil pill, shown by guide.js);
   - a guide step's check lines (ul.ck, a box to tick before each), its "In Senditor." note and its product pictures;
   - the Request access dialog: site.css's block, copied byte for byte below (visibility.test.mjs holds the two equal), with
     the few base rules it leans on there (button reset, icons, btn-ink);
   - print mode: the same guide, in ink on paper, with no bar, contents, buttons, pictures or footer, and a box before
     every check line. checklist.txt is made from the same headings and lines, so the three never disagree.
   Motion: none beyond the buttons' press (legal.css) and the dialog's own; reduced motion drops the press and the dialog's
   movement, keeps its fades. Nothing here moves on scroll. */

/* ---------- base rules the dialog and the pictures need (site.css's, which legal.css does not carry) ---------- */
/* hidden means hidden, over any display a class gives: the dialog's sent tick and errors, and Print guide with no script */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h3, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn .i { width: 18px; height: 18px; }
.btn-ink { background: var(--chosen); color: var(--on-chosen); }
@media (hover: hover) and (pointer: fine) { .btn-ink:hover { background: var(--chosen-hover); } }

/* ---------- the title's actions, on the stage ---------- */
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 36px auto 0; }
/* the second action: the stage's veil, as the legal pages' section pills wear it */
.btn-veil { background: var(--s-veil); color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-hair); }
@media (hover: hover) and (pointer: fine) { .btn-veil:hover { background: var(--s-veil-2); } }

/* ---------- a step: its check lines, its note, its picture ---------- */
/* the lines to tick: an empty box before each, the size of the text's x-height row; not a control, so nothing to press */
.prose .ck { margin-top: 22px; gap: 14px; }
.prose .ck li { padding-left: 34px; color: var(--ink); }
.prose .ck li::before { left: 0; top: .26em; width: 18px; height: 18px; border-radius: 5px; background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); }
/* "In Senditor.": how the product does this step, set apart from the advice on the page's own quiet ground */
.prose p.in { margin-top: 24px; padding: 16px 20px 17px; border-radius: 16px; background: var(--page); font-size: 16px; line-height: 1.6; }
.prose p.in .mark { display: inline-block; width: 18px; height: 18px; margin: 0 8px -3px 0; }
.prose p.in > em { font-style: normal; font-weight: 600; color: var(--ink); }
.in .mk-up { fill: var(--mark-upper); }
.in .mk-lo { fill: var(--mark-lower); }
/* the product's own screens (the homepage's renders), light or dark with the page; a phone screen at a phone's width */
.fig { margin-top: 32px; }
.fig img { border-radius: 14px; background: var(--page); box-shadow: 0 0 0 1px var(--line), 0 28px 56px -32px var(--lift-2); }
.fig.phone picture { width: min(248px, 100%); }
.fig.phone img { border-radius: 26px; }
.fig figcaption { margin-top: 14px; font: 400 14px/1.5 var(--font); color: var(--ink-2); text-wrap: pretty; }
/* the page's last section: where to go next, not a step */
.prose .next { margin-top: 18px; }

@media (max-width: 860px) {
  .acts { margin-top: 28px; gap: 8px; }
  .prose p.in { padding: 14px 16px 15px; font-size: 15px; }
  .fig.phone picture { width: min(232px, 100%); }
}

/* ---------- the access dialog (founder 2026-10-09, access.js) ----------
   The sheet's own roles, light and dark: a white card on a dimmed page, the inputs at 16 px or more so a phone never
   zooms, every control at least 44 px. It opens in 220 ms (fade and a 8 px rise) and closes in 160 ms; with reduced motion
   it appears and goes at once. On a phone it sits at the top, so the keyboard never covers the field or Send request.
   Two views (founder 2026-10-09, "better words and higher visual quality"): the form, and "Request sent" with a mark, the
   address and Edit. A view enters in 240 ms (fade, 6 px rise; the mark from .9); with reduced motion it only fades.
   Send request sits at the card's foot: when a long message makes the card scroll, it stays on screen over a fade. */
.ax { width: min(440px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 28px;
  background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 40px 90px -30px var(--sheet-shadow); overflow: auto; overscroll-behavior: contain;
  opacity: 1; transform: none; transition: opacity 220ms var(--e-out), transform 220ms var(--e-out); }
.ax::backdrop { background: var(--s-shadow); opacity: 1; transition: opacity 220ms var(--e-out); }
@starting-style { .ax[open] { opacity: 0; transform: translateY(8px) scale(.98); } .ax[open]::backdrop { opacity: 0; } }
.ax.ax-out { opacity: 0; transform: translateY(4px) scale(.99); transition-duration: 160ms; transition-timing-function: ease-out; }
.ax.ax-out::backdrop { opacity: 0; transition-duration: 160ms; }
.ax :focus-visible { outline-color: var(--focus); }
.ax ::selection { background: var(--selection); }
.ax-in { position: relative; padding: 32px; }
.ax h2 { padding-right: 40px; font: 600 30px/1.1 var(--font); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ax-x { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2);
  transition: transform 160ms var(--e-press), background-color 200ms ease, color 200ms ease; }
.ax-x .i { width: 20px; height: 20px; }
.ax-x:active { transform: scale(.94); }
.ax-ask, .ax-done { transition: opacity 240ms var(--e-out), transform 240ms var(--e-out); }
/* only on a switch between the views (data-swap, access.js), never on top of the dialog's own entrance */
@starting-style { .ax[data-swap] .ax-ask, .ax[data-swap] .ax-done { opacity: 0; transform: translateY(6px); } }
.ax-lede { margin-top: 10px; font: 400 16px/1.5 var(--font); color: var(--ink-2); text-wrap: pretty; }
.ax-l { display: block; margin-top: 24px; font: 500 15px/1.35 var(--font); color: var(--ink); }
.ax-g .ax-l { margin-top: 0; }
.ax-opt { font-weight: 400; color: var(--ink-2); }
.ax-f { display: block; box-sizing: border-box; width: 100%; height: 52px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--field); color: var(--ink); font: 400 17px/1 var(--font); transition: border-color 160ms ease; }
.ax-f:focus { border-color: var(--line-2); }
.ax-f:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ax-f[aria-invalid="true"] { border-color: var(--bad); }
.ax-f::placeholder { color: var(--ink-3); opacity: 1; }
/* the message: three rows, growing with its text (field-sizing, or access.js) to six, then it scrolls */
.ax-m { height: auto; min-height: 104px; max-height: 176px; padding: 14px 16px; font-size: 17px; line-height: 1.45; resize: none; field-sizing: content; overflow-y: auto; }
.ax-err { margin-top: 8px; font: 500 14px/1.4 var(--font); color: var(--bad); }
.ax-g { margin-top: 22px; }
.ax-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ax-b button { min-height: 44px; border-radius: 999px; background: var(--page); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font: 550 16px/1 var(--font); font-variant-numeric: tabular-nums; touch-action: manipulation;
  transition: transform 160ms var(--e-press), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.ax-b button:active { transform: scale(.96); }
.ax-b [aria-pressed="true"] { background: var(--chosen); color: var(--on-chosen); box-shadow: none; }
.ax-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ax-act { position: sticky; bottom: 0; z-index: 1; margin: 6px -32px -32px; padding: 22px 32px 32px; background: linear-gradient(to bottom, transparent, var(--sheet) 22px); }
.ax-send { display: flex; width: 100%; touch-action: manipulation; }
.ax-send[aria-disabled="true"] { cursor: progress; }
.ax-send[aria-disabled="true"]:active { transform: none; }
.ax-spin { display: none; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ax-turn 700ms linear infinite; }
.ax-send[aria-disabled="true"] .ax-spin { display: block; }
@keyframes ax-turn { to { transform: rotate(1turn); } }
.ax-fail { margin-top: 14px; font: 400 15px/1.45 var(--font); color: var(--ink-2); }
.ax-fail a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 0; margin: -10px 0; }
/* sent: the mark above the title, the address it went to with Edit, who replies, Done */
.ax-ok { display: block; width: 44px; height: 44px; margin-bottom: 20px; transition: opacity 240ms var(--e-out), transform 240ms var(--e-out); }
.ax-ok circle { fill: var(--icon-success); }
.ax-ok path { fill: none; stroke: var(--icon-glyph); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@starting-style { .ax[data-swap] .ax-ok { opacity: 0; transform: scale(.9); } }
.ax-done { margin-top: 12px; }
.ax-done:focus { outline: none; }
.ax-to { font: 400 17px/1.5 var(--font); color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.ax-to strong { font-weight: 600; }
.ax-edit { display: inline-block; padding: 12px 0; margin: -12px 0; font: inherit; color: var(--ink-2); white-space: nowrap; touch-action: manipulation; }
.ax-edit span { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ax-next { margin-top: 12px; font: 400 15px/1.5 var(--font); color: var(--ink-2); text-wrap: pretty; }
.ax-done .ax-send { margin-top: 28px; }
@media (hover: hover) and (pointer: fine) {
  .ax-x:hover { background: var(--hover); color: var(--ink); }
  .ax-b button:hover { background: var(--hover); }
  .ax-b [aria-pressed="true"]:hover { background: var(--chosen-hover); }
  .ax-edit:hover span { text-decoration-thickness: 2px; }
}
@media (max-width: 600px) {
  .ax { width: calc(100% - 24px); max-height: calc(100dvh - 24px); margin: max(12px, env(safe-area-inset-top, 0px)) auto auto; border-radius: 24px; }
  .ax-in { padding: 24px 20px 20px; }
  .ax h2 { font-size: 26px; }
  .ax-x { top: 12px; right: 10px; }
  .ax-lede { margin-top: 8px; font-size: 15px; }
  .ax-l { margin-top: 20px; }
  .ax-g { margin-top: 18px; }
  .ax-m { min-height: 96px; }
  .ax-act { margin: 4px -20px -20px; padding: 18px 20px 20px; }
  .ax-ok { width: 40px; height: 40px; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ax, .ax::backdrop, .ax-x, .ax-b button, .ax-f { transition: none; }
  .ax-x:active, .ax-b button:active, .ax-send:active { transform: none; }
  .ax-ask, .ax-done, .ax-ok { transition: opacity 200ms ease; }
  @starting-style { .ax[data-swap] .ax-ask, .ax[data-swap] .ax-done, .ax[data-swap] .ax-ok { transform: none; } }
  .ax-spin { animation-duration: 2s; }
}

/* ---------- print: the guide on paper (Print guide, or the browser's own Print) ----------
   Ink on white whatever the screen's scheme: the tokens point at the system's paper and ink, so no colour is restated;
   the brand mark in a note prints in ink and grey. */
@media print {
  :root { color-scheme: light; --stage: Canvas; --sheet: Canvas; --page: Canvas; --ink: CanvasText; --ink-2: CanvasText; --s-ink: CanvasText; --s-ink-2: CanvasText; --s-ink-3: CanvasText; --line: GrayText; --line-2: CanvasText;
    --mark-upper: CanvasText; --mark-lower: GrayText; }
  html, body, .hero, .sheet { background: none; }
  .nav, .skip, .toc, .toc-m, .acts, .foot, .fig, .ax { display: none !important; }
  .hero { padding: 0 0 14pt; text-align: left; }
  h1 { margin: 0; max-width: none; font-size: 24pt; }
  .sub { margin: 6pt 0 0; max-width: none; font-size: 12pt; }
  .date { margin: 6pt 0 0; font-size: 10pt; }
  .sheet { margin: 0; border-radius: 0; box-shadow: none; }
  .doc { display: block; max-width: none; padding: 0; }
  .prose, .prose p, .prose li { font-size: 10.5pt; line-height: 1.5; }
  .prose h2 { margin-top: 16pt; font-size: 14pt; break-after: avoid; }
  .prose p.in { margin-top: 8pt; padding: 0; background: none; font-size: 10.5pt; }
  .prose .ck { gap: 6pt; margin-top: 8pt; }
  .ck li { break-inside: avoid; }
  .ck li::before { border: 1.5px solid CanvasText; border-radius: 3px; box-shadow: none; }
  .prose a { text-decoration: none; }
}