/* Every colour and every family on this page is a custom property, and the value written here
   is what the page looked like before any brand existed. A product whose brand record is
   approved has `class="brand"` on its body and one `<style>` block after this file that sets
   the same properties from `brand.colors` and `brand.fonts` (game design spec 18); a product
   without one keeps these defaults exactly. The print block below is the deliberate exception:
   the handoff sheet prints black on white whatever a brand says. */
:root { --accent: #2563eb; --accent-ink: #ffffff; --bg: #ffffff; --card: #ffffff; --ink: #111827; --muted: #4b5563; --line: #e5e7eb; --signature: #8c6415; --max: 42rem; --radius: 12px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-display: var(--font-text);
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.theme-quest { --accent: #b9861f; --bg: #fbf7ef; --card: #fffdf8; --ink: #1f1a12; --muted: #5c5242; --line: #e9dfc9; }
.theme-care  { --accent: #1f6f5f; --bg: #ffffff; --card: #f7faf9; --ink: #17201f; --muted: #4f5d5a; --line: #dfe7e4; font-size: 19px; }
.theme-helm  { --accent: #1d4ed8; --bg: #f4f6fb; --card: #ffffff; --ink: #0b1220; --muted: #465066; --line: #d9deea; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.55 var(--font-text); }
code, kbd, samp, pre { font-family: var(--font-mono); }
section, footer { max-width: var(--max); margin: 0 auto; padding: 2.5rem 1.25rem; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.15; margin: 0 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); line-height: 1.2; margin: 0 0 1rem; }
h3 { font-size: 1.1rem; margin: 0 0 .25rem; }
p { margin: 0 0 1rem; }
.subhead { font-size: 1.15rem; color: var(--muted); }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); margin-top: 1.5rem; border: 1px solid var(--line); }
.cta { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 700; padding: .9rem 1.4rem; border-radius: 10px; font-size: 1.05rem; }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.refund { margin: .5rem 0 0; font-size: .95rem; color: var(--muted); }
.problem { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.problem-line { font-size: 1.25rem; margin: 0 0 .5rem; }
.feature { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.feature:last-child { border-bottom: 0; }
.plans { display: grid; gap: 1rem; }
.plans-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .plans-2 { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; position: relative; }
.plan.popular { border-color: var(--accent); }
.badge { position: absolute; top: -.7rem; right: 1rem; background: var(--accent); color: var(--accent-ink); font-size: .75rem; padding: .2rem .6rem; border-radius: 999px; }
.price s { color: var(--muted); }
.price strong { display: block; font-size: 1.3rem; }
.total { font-weight: 700; margin: 0; }
.renews, .offer-end, .access { color: var(--muted); font-size: .95rem; }
.plan ul { padding-left: 1.2rem; margin: .75rem 0; }
.plan-link { display: inline-block; margin-top: .5rem; color: var(--accent); font-weight: 600; }
details { border-bottom: 1px solid var(--line); padding: .6rem 0; }
summary { cursor: pointer; font-weight: 600; }
.founder p { max-width: 36rem; }
.sig { font-weight: 700; }
.final { text-align: center; padding-bottom: 4rem; }
.site-footer { color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); }

/* the brand lockup: only a product whose brand record is approved and carries a mark or an
   icon has a header at all, so nothing here touches a page without one */
.site-header { max-width: var(--max); margin: 0 auto; padding: 1.25rem 1.25rem 0; }
.site-header .lockup { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-name { font-weight: 700; }
.brand-mark svg { display: block; height: 1.9rem; width: auto; }
.site-footer .brand-mark { display: inline-block; vertical-align: -.25em; }
.site-footer .brand-mark svg { height: 1.15rem; }
.site-icon { width: 2.2rem; height: 2.2rem; margin: 0; border-radius: 22%; border: 1px solid var(--line); }

/* printable handoff sheet */
.template-intro { padding-bottom: 1rem; }
.print-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.cta-print { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; font: inherit; font-weight: 700; padding: .8rem 1.3rem; cursor: pointer; }
.cta-print:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.print-hint { color: var(--muted); font-size: .95rem; }
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.25rem; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; margin-bottom: 1rem; }
.sheet-title { font-size: 1.25rem; margin: 0; }
.sheet-for { color: var(--muted); font-size: .9rem; flex: 1 1 12rem; display: flex; align-items: baseline; gap: .4rem; }
.field { margin-bottom: 1rem; }
.field-label { font-weight: 700; font-size: 1rem; }
.field-hint { color: var(--muted); font-size: .85rem; margin-bottom: .35rem; }
.rule { border-bottom: 1px solid var(--line); height: 1.5rem; }
.rule.short { flex: 1 1 auto; height: 1.1rem; }
.sheet-note { color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.sheet-source { color: var(--muted); font-size: .75rem; margin-top: .25rem; }
.template-back { padding-top: 1rem; }

@media print {
  /* deliberately literal colours: a printed sheet is black on white whatever the brand is */
  html, body { background: #fff; color: #000; font-size: 10.5pt; }
  #template-intro, #template-back, .site-header, .site-footer { display: none; }
  section.sheet { max-width: none; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; page-break-inside: avoid; break-inside: avoid; }
  .sheet-title { font-size: 13pt; }
  .sheet-head { border-bottom: 2px solid #000; }
  .field { margin-bottom: 8pt; }
  .field-label { font-size: 10.5pt; }
  .field-hint { font-size: 8pt; color: #444; }
  .rule { height: 17pt; border-bottom: 1px solid #999; }
  .sheet-note, .sheet-source { color: #444; }
}
@page { size: auto; margin: 12mm; }

/* articles */
/* An article ends in a source list, and a source is a raw URL: one word, 120 characters long,
   that no measure can hold. Unbroken, the longest of them made the Care Hand-Off article 988px
   wide inside a 390px phone, so every line of prose on the page scrolled sideways and the
   headline ran off the edge. `break-word` only breaks a word that would otherwise overflow, so
   no other line on any article moves. */
.article { max-width: var(--max); margin: 0 auto; padding: 2.5rem 1.25rem;
           overflow-wrap: break-word; }
.article h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
.article ul { padding-left: 1.2rem; }
.article li { margin-bottom: .5rem; }
.byline { color: var(--muted); font-size: .95rem; margin-bottom: 1.5rem; }
.template-cta { background: var(--card); border: 1px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.75rem 0; }
.template-cta-line { margin: 0; font-weight: 700; }
.template-cta-line a { color: var(--accent); }
.template-cta-note { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.article-back { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.articles ul { padding-left: 1.2rem; }
.articles li { margin-bottom: .5rem; }

/* waitlist mode: the email form that stands in for the checkout CTA */
.cta-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.cta-form input { flex: 1 1 14rem; min-width: 0; font: inherit; padding: .9rem 1rem; border: 2px solid var(--muted); border-radius: 10px; background: var(--bg); color: var(--ink); }
.cta-form input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cta-form button.cta { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.cta-form button.cta[disabled] { opacity: .6; cursor: default; }
.form-message { margin: .6rem 0 0; font-weight: 700; }
.form-message.bad { color: var(--muted); font-weight: 400; }
.privacy { margin: .5rem 0 0; font-size: .95rem; color: var(--muted); }

/* --- the press -----------------------------------------------------------------------------
   The craft bar is Emil Kowalski's (`.agents/skills/emil-design-eng`), brought to the shared
   layer 2026-09-13 after the two product pages got it on 2026-09-11. A pressable element with
   no press state is a default no product should have to opt out of: until this block the CTA,
   the print button and the waitlist button gave no sign they had been heard until the network
   answered. 140ms is inside the 100 to 160ms the bar allows for button feedback and 0.98 is the
   quiet end of its 0.95 to 0.98 range. Only `transform` is animated, so nothing here touches
   layout or paint, and the curve is the strong ease-out the bar asks for rather than a built-in
   one, which is too weak to read as intentional at this duration. A brand that wants its own
   curve overrides these three rules; a product that names nothing now has a button that
   answers. There is no `:hover` anywhere in this file, so there is nothing here to gate behind
   `@media (hover: hover)`. */
.cta, .cta-print, .cta-form button.cta { transition: transform 140ms var(--ease-out); }
.cta:active, .cta-print:active, .cta-form button.cta:active { transform: scale(.98); }
/* the button that has just been used is not pressable any more, so it dims instead of pressing */
.cta-form button.cta[disabled] { transition: opacity 140ms ease; }
.cta-form button.cta[disabled]:active { transform: none; }
/* gentler, not zero. The press keeps its feedback as opacity, because a button that stops
   answering is a regression, not an accommodation. */
@media (prefers-reduced-motion: reduce) {
  .cta, .cta-print, .cta-form button.cta { transition: opacity 140ms ease; }
  .cta:active, .cta-print:active, .cta-form button.cta:active { transform: none; opacity: .86; }
}

/* the optional landing sections (spec 4.2a, 2026-09-09). Every rule here is for a section a
   content file has to ask for by name, so a page that names none of them is unchanged. */

/* who_for: four one-sentence cards, straight under the hero */
.who { max-width: 52rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.who h2 { font-size: 1.15rem; color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
.who-cards { display: grid; gap: .75rem; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .who-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .who-cards { grid-template-columns: repeat(4, 1fr); } }
.who-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.who-card h3 { font-size: .95rem; margin: 0 0 .35rem; color: var(--accent); }
.who-card p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.45; }

/* proof_band: four cells under the hero, carrying the promises the page used to repeat */
.wide { max-width: 60rem; }
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
        padding-top: 1.5rem; padding-bottom: 1.5rem; }
.band-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
@media (min-width: 760px) { .band-cells { grid-template-columns: repeat(4, 1fr); } }
.band-cell { text-align: center; }
.band-cell b { display: block; font-size: 1.05rem; }
.band-cell span { display: block; color: var(--muted); font-size: .9rem; line-height: 1.35; }

/* deal_row: one readable row of the deal, earn on the left and spend on the right */
.deal { padding-top: 2rem; padding-bottom: 1rem; }
.deal-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
            padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center;
            justify-content: center; gap: .6rem 1.25rem; font-size: 1.15rem; }
.deal-row .arrow { color: var(--accent); font-weight: 700; }
.deal-row b { color: var(--signature); white-space: nowrap; }
.deal-note { text-align: center; color: var(--muted); font-size: .95rem; margin: .75rem 0 0; }

/* steps: the numbered strip that stands where the problem lines stood */
.steps h2 { font-size: 1.15rem; color: var(--muted); font-weight: 600; margin-bottom: 1.25rem; }
.step-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.steps-note { color: var(--muted); font-size: .95rem; margin: 0; }
.step { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.step:last-child { border-bottom: 0; }
.step-n { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
          font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.step p { margin: .2rem 0 0; font-size: 1.05rem; }

/* walkthrough: numbered steps, each on its own render, alternating left and right */
.walkthrough { padding-top: 2rem; }
.walk-step { display: grid; gap: 1.25rem; align-items: center; padding: 1.5rem 0;
             border-bottom: 1px solid var(--line); }
.walk-step:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .walk-step { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .walk-step:nth-child(even) .walk-shot { order: 2; }
}
.walk-shot img { margin-top: 0; border: 1px solid var(--line); background: var(--card); }
.walk-step h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.walk-step h3 .n { color: var(--accent); }
.walk-step p { color: var(--muted); margin: 0; }

/* objections_grid: the objection cells as a grid rather than a stack */
.features-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .features-grid { grid-template-columns: 1fr 1fr; } }
.features-grid .feature { background: var(--card); border: 1px solid var(--line);
                          border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.features-grid .feature:last-child { border-bottom: 1px solid var(--line); }
.features-grid .feature h3 { font-size: 1.05rem; }
.features-grid .feature p { margin: 0; color: var(--muted); font-size: .98rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; font-weight: 700;
           color: var(--muted); margin: 0 0 .4rem; }

/* price_badges: the no-card and refund lines as pills beside the price */
.price-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start;
             justify-content: space-between; }
.price-col { flex: 1 1 18rem; min-width: 0; }
.price-col p:last-child { margin-bottom: 0; }
.plan ul.badges { flex: 0 1 auto; list-style: none; margin: 0; padding: 0; display: flex;
                  flex-direction: column; align-items: flex-end; gap: .4rem; }
.badges li { border: 1px solid var(--accent); color: var(--accent); background: var(--bg); border-radius: 999px;
             font-size: .8rem; font-weight: 700; padding: .3rem .7rem; line-height: 1.3; }

/* the brand motifs (game design spec 18). A brand names one of these in `brand.extras` and the
   body carries `brand-<motif>`; every rule below is painted out of that brand's own tokens, so
   nothing here belongs to one product and a page that names no motif is untouched. */

/* paper_grain: a woven hairline texture over the page ground, so parchment reads as paper
   rather than as a flat fill. Drawn from the ink, never from a named colour, and how much of
   the ink is `--grain`: two percent is a sheet of writing paper, four is a board. A layout
   block names it; a brand that names nothing keeps the two percent this always was. */
.brand-paper-grain { background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) var(--grain, 2%), transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) calc(var(--grain, 2%) * .75), transparent) 0 1px, transparent 1px 4px);
  background-attachment: fixed; }
/* the banded sections stand a shade darker than the page, mixed from the page's own ink and
   paper. The proof band takes a hatch across it as well: it is the board, and the board is
   woven. */
.brand-paper-grain .band, .brand-paper-grain .who {
  background-color: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.brand-paper-grain .band {
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bg) 62%, transparent) 0 2px, transparent 2px 9px); }

/* square_corners: for a brand whose ground is paper. Paper has corners, not radii. */
.brand-square-corners { --radius: 2px; }
.brand-square-corners .cta,
.brand-square-corners .cta-print,
.brand-square-corners .cta-form input,
.brand-square-corners .cta-form button.cta,
.brand-square-corners .plan-link,
.brand-square-corners .template-cta { border-radius: 2px; }
.brand-square-corners .badge,
.brand-square-corners .badges li { border-radius: 2px; }
.brand-square-corners .step-n { border-radius: 2px; }

/* folded_corner: every card is a page with its top right corner turned back. The corner is cut
   away, so the page ground shows through the notch, and the flap lying just inside the cut is a
   shade of the card's own ink. Neither needs a colour the brand did not already name. `--ear`
   is how far back the corner is turned: 23px on a card, the size the mock draws it. */
.brand-folded-corner .who-card,
.brand-folded-corner .plan,
.brand-folded-corner .features-grid .feature,
.brand-folded-corner .sheet { --ear: 1.45rem; position: relative; border-top-right-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--ear)) 0, 100% var(--ear), 100% 100%, 0 100%); }
.brand-folded-corner .who-card::after,
.brand-folded-corner .plan::after,
.brand-folded-corner .features-grid .feature::after,
.brand-folded-corner .sheet::after {
  content: ""; position: absolute; top: 0; right: 0; width: var(--ear); height: var(--ear);
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--ink) 9%, var(--card)) 50%); }

/* five_line_rule: five stacked hairlines of uneven length, the hero divider. The last line takes
   `--flag` when the brand names one and the accent when it does not. */
.brand-five-line-rule .five-line {
  width: 4.625rem; height: 30px; margin: .6rem 0 1.5rem; background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--signature), var(--signature)),
    linear-gradient(var(--signature), var(--signature)),
    linear-gradient(var(--signature), var(--signature)),
    linear-gradient(var(--signature), var(--signature)),
    linear-gradient(var(--flag, var(--accent)), var(--flag, var(--accent)));
  background-size: 100% 2px, 76% 2px, 86% 2px, 54% 2px, 35% 2px;
  background-position: 0 0, 0 7px, 0 14px, 0 21px, 0 28px; }

/* wax_seal: the seal goes on the card that got finished, not beside it. `.sealed` wraps the hero
   picture and takes its exact box, so the wax sits on the picture's own top right corner and
   hangs a fifth of itself off it, the way a seal sits on the corner of a card. Its size is
   `--wax`, which follows the viewport: the card on a phone is half the card on a desk, and a
   seal that did not come down with it would cover the line it sits beside. The wax is `--seal`
   when the brand names one and the signature when it does not. */
.brand-wax-seal .hero .sealed { position: relative; display: flow-root;
  --wax: clamp(1.75rem, 3.75vw, 3rem); }
.brand-wax-seal .hero .sealed::before,
.brand-wax-seal .hero .sealed::after { content: ""; position: absolute; z-index: 2; }
.brand-wax-seal .hero .sealed::before {
  width: var(--wax); height: var(--wax); border-radius: 50%;
  top: calc(var(--wax) / -5); right: calc(var(--wax) / -5);
  background: var(--seal, var(--signature));
  box-shadow: 0 5px 11px color-mix(in srgb, var(--seal, var(--signature)) 34%, transparent),
              inset 0 0 0 .1em color-mix(in srgb, var(--bg) 24%, transparent); }
.brand-wax-seal .hero .sealed::after {
  width: calc(var(--wax) * .35); height: calc(var(--wax) * .183);
  top: calc(var(--wax) * .208); right: calc(var(--wax) * .125);
  transform: rotate(-45deg); border: calc(var(--wax) * .0625) solid
    color-mix(in srgb, var(--bg) 82%, var(--seal, var(--signature)));
  border-top: 0; border-right: 0; border-radius: 0 0 0 2px; }
.brand-wax-seal .hero .sealed img { position: relative; z-index: 1; }

/* --- the layout block (game design spec 18, amended 2026-09-10) -------------------------- */

/* A mock is not only a palette, so `brand.layout` (or `layout:` in the content file) names the
   shape of the page as well: which hero the product leads with, how tall a render may stand
   beside its caption, how heavy the paper grain is, how wide the page reads, and whether its
   rules are hairlines or ink. Every rule below is keyed off a class the body carries only when
   something asked for it, or off a token nothing sets by default, so a product that names no
   layout gets exactly the page it got before any of this existed. */

/* the link colour. `:where()` costs no specificity, so this sets the colour of the links the
   page never styled -- the Reading list, the founder's note, the footer address -- and loses to
   every rule that already names one. A brand that carries no `link` colour falls back to its
   signature, and a page with no brand at all is left with the browser's own blue. */
:where(.brand) a { color: var(--link, var(--signature, revert)); }

/* how wide "wide" is. 60rem is what it has always been. */
.wide { max-width: var(--wide, 60rem); }

/* a banded section on a page that names a layout is the full width of the window, the way a band
   printed across a sheet is, and only what is inside it keeps the measure. */
.brand-layout .band, .brand-layout .who { max-width: none; }
.brand-layout .band > *, .brand-layout .who > * {
  max-width: var(--wide, 60rem); margin-left: auto; margin-right: auto; }

/* a page that names a layout is wider than the reading column, so the mark and the footer line
   up with the widest thing on it rather than floating in the middle of a 42rem column. */
.brand-layout .site-header { max-width: none; }
.brand-layout .site-header .lockup { width: min(100%, var(--wide, 60rem)); margin: 0 auto;
  justify-content: flex-start; }
.brand-layout .site-footer { max-width: var(--wide, 60rem); }

/* hero: split, board and note. The headline, the form and the picture stop being one column and
   become two: what the page says on the left, the object it is about on the right. `board` pins
   the object to the board with a second card behind it; `note` lays a second sheet behind it as
   if pulled off a pad. Under 900px all three are the stack they always were. */
.hero-say > :first-child { margin-top: 0; }
.hero-object { position: relative; margin-top: 1.75rem; }
.hero-object img { margin-top: 0; position: relative; z-index: 1; }
.brand-hero-board .hero-object img,
.brand-hero-note .hero-object img { border: 0; border-radius: 0; background: transparent;
  filter: drop-shadow(0 16px 30px color-mix(in srgb, var(--ink) 16%, transparent)); }
/* the sheet behind: mixed from the page's own ink and paper, never a colour of its own */
.brand-hero-board .hero-object::before,
.brand-hero-note .hero-object::before {
  content: ""; position: absolute; z-index: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
.brand-hero-board .hero-object::before { inset: 1.1rem 1.1rem -1.1rem -1.1rem; transform: rotate(-2.4deg); }
.brand-hero-note .hero-object::before { inset: .9rem -1.1rem -1.1rem 1.1rem; transform: rotate(1.1deg); }
@media (min-width: 900px) {
  .brand-hero-split .hero, .brand-hero-board .hero, .brand-hero-note .hero {
    display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.2rem; align-items: start; }
  .hero-object { margin-top: .4rem; }
}

/* the renders in the walkthrough. A picture beside two lines of caption should not tower over
   them: the shot is taken out of the flow, so the row is as tall as the words beside it and the
   render fits inside that, never shorter than `--shot-min` and never taller than `--shot-max`. */
.brand-layout .walk-shot img { max-height: var(--shot-max, 20rem); width: auto;
  margin-left: auto; margin-right: auto; }
@media (min-width: 760px) {
  .brand-layout .walk-shot { position: relative; align-self: stretch;
    min-height: var(--shot-min, 15rem); }
  .brand-layout .walk-shot img { position: absolute; inset: 0; margin: auto; max-height: 100%; }
}

/* shots: bare. A render that draws its own frame -- a phone, a card, a sheet -- is an object on
   the page, not a picture in a box, so the box the builder puts round every picture comes off. */
.brand-shots-bare .walk-shot img { border: 0; border-radius: 0; background: transparent;
  filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--ink) 16%, transparent)); }

/* rules: ink. For a brand whose page is paper: the bands are divided by a 2px rule in the ink,
   the way a printed sheet is, rather than by the hairline a screen would use. The masthead rule
   runs the width of the page, so the header stops being a column and the lockup keeps the
   measure. */
.brand-rules-ink .site-header { max-width: none; padding-bottom: .9rem;
  border-bottom: 2px solid var(--ink); }
.brand-rules-ink .who, .brand-rules-ink .band, .brand-rules-ink .problem {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.brand-rules-ink .steps-note { border-top: 2px solid var(--ink); padding-top: .75rem; }

/* numerals: serif. The step number stops being a filled counter and becomes a figure set in the
   display face, which is what a numbered list on paper looks like. */
.brand-numerals-serif .step { align-items: baseline; gap: 1.1rem; }
.brand-numerals-serif .step-n { width: 2.1rem; height: auto; border-radius: 0; background: none;
  color: var(--signature); font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  line-height: 1; display: block; }

/* steps: aside. The heading stands to the left of the numbered list instead of over it, and it
   is a heading again rather than an eyebrow. */
.brand-steps-aside .steps h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink);
  font-weight: 700; }
@media (min-width: 760px) {
  .brand-steps-aside .steps { max-width: var(--wide, 60rem); display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: .5rem 3rem; }
  .brand-steps-aside .steps h2 { grid-row: 1 / span 2; margin: 0; max-width: 9em; }
  .brand-steps-aside .steps .step-list, .brand-steps-aside .steps .steps-note { grid-column: 2; }
}