/* The product page (Package UI-2, part 4): what anyone sees at the root before signing in. It loads with the page and
   holds only what the page needs; the app's own stylesheet comes with the app. Brand v5: forest for actions, Marcellus
   for titles, Atkinson Hyperlegible Next for everything else. Every rule is under #site, so nothing reaches the app.
   SITE-2 (Oct 30, "more professional and high end"): an editorial page. Paper, ink, forest and one rule colour; the
   drawing set leads; columns divided by whitespace and fine rules, not cards; one type scale; no motion. */
html[data-mode='site'] #root, html[data-mode='app'] #site { display: none; }
html[data-mode='site'] body { margin: 0; background: #f7f7f3; }

#site {
  --forest-900: #0b2218; --forest-800: #113524; --forest: #17432f; --forest-600: #1f5a3f; --forest-100: #e8f3ec;
  --ivory: #efeadb; --on-forest-2: #c9d6cc; --flag-ink: #a6420c;
  --paper: #f7f7f3; --sheet: #ffffff; --ink: #0f1c15; --ink-2: #33413a; --muted: #3e5248; --rule: #d8dcd4; --field: #7f8b82;
  --font: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  /* One type scale: display, section title, large, body, small. */
  --t-display: clamp(2.375rem, 4.4vw, 3.5rem); --t-title: clamp(1.75rem, 2.6vw, 2.125rem); --t-large: 1.1875rem; --t-small: 0.875rem;
  --measure: 36rem; --section: clamp(4rem, 8vw, 6.5rem);
  --paper-shadow: 0 1px 2px rgb(15 28 21 / 0.06), 0 14px 34px -18px rgb(15 28 21 / 0.28);
  --sh-4: 0 24px 60px -12px rgb(11 34 24 / 0.45), 0 0 0 1px rgb(15 28 21 / 0.06);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; background: var(--paper);
}
#site *, #site *::before, #site *::after { box-sizing: border-box; }
#site img { display: block; max-width: 100%; height: auto; }
#site a { color: var(--forest-600); text-underline-offset: 3px; }
#site :focus-visible { outline: 2px solid var(--forest-600); outline-offset: 3px; border-radius: 2px; }
#site .wrap { width: min(72rem, 100% - 2rem); margin: 0 auto; }
#site h1, #site h2 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-wrap: balance; }
#site h2 { font-size: var(--t-title); line-height: 1.2; }
#site h3 { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
#site p, #site figcaption { margin: 0; text-wrap: pretty; }
#site .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: forest fills the one action; outlined for the second; ivory where it sits on forest. */
#site .button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.875rem; padding: 0.6rem 1.35rem; border: 0;
  border-radius: 8px; font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; }
#site .button.primary { background: var(--forest); color: #fff; }
#site .button.primary:hover { background: var(--forest-800); }
#site .button.secondary { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
#site .button.secondary:hover { background: var(--forest-100); }
#site .button.light { background: var(--ivory); color: var(--forest-800); }
#site .button.light:hover { background: #fff; }

/* Top bar: paper, the logo, a rule under it. */
#site .top { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--rule); }
#site .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
#site .top .brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
#site .top .brand img { width: 7.75rem; height: auto; }
#site .top nav { display: flex; align-items: center; gap: 1.5rem; }
#site .top .signin { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-size: 0.9375rem; text-decoration: none; }
#site .top .signin:hover { text-decoration: underline; }
#site .top .button { min-height: 2.5rem; padding: 0.4rem 1rem; font-size: 0.9375rem; }
/* The product's pages, beside the logo. Below 760px the footer's page list does this job. */
#site .top .menu { margin: 0 auto 0 1rem; }
#site .top .menu a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); font-size: 0.9375rem; text-decoration: none; }
#site .top .menu a:hover { text-decoration: underline; }
@media (max-width: 760px) { #site .top .menu { display: none; } }

/* Hero: the words on the left; the drawing set on the right, a sheet of paper with the estimate laid over it. */
#site .hero { padding: clamp(3rem, 7vw, 5.5rem) 0 var(--section); }
#site .hero .wrap { display: grid; grid-template-columns: minmax(0, 24.5rem) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 3.5rem); align-items: center; }
#site .hero h1 { font-size: var(--t-display); line-height: 1.08; }
#site .hero .lead { margin-top: 1.5rem; font-size: var(--t-large); line-height: 1.55; color: var(--ink); }
#site .hero .intro > p:not(.lead) { margin-top: 1rem; color: var(--muted); }
#site .hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2.25rem; }
#site .text-link { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--forest); font-weight: 700; }
#site .text-link:hover { color: var(--forest-800); }
#site .drawing { position: relative; margin: 0; padding: 0 1rem 5.5rem 0; }
#site .drawing a { display: block; }
#site .drawing .sheet { width: min(100%, 40rem); background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--paper-shadow); }
#site .drawing .doc { position: absolute; left: 0; bottom: 1.5rem; width: min(16rem, 38%); aspect-ratio: 600 / 720; overflow: hidden;
  background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--paper-shadow); }
#site .drawing figcaption { position: absolute; left: 0; bottom: 0; width: min(28rem, 70%); color: var(--muted); font-size: 0.8125rem; text-align: left; }
/* The crew's day as a readable card, not a tiny screenshot over the drawing. */
#site .drawing .phone { position: absolute; right: 0; top: 1.25rem; width: 16.5rem; max-width: 46%; padding: 0.9rem 1rem 1rem; overflow: visible;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 1.1rem; box-shadow: var(--paper-shadow); color: var(--ink); }
#site .drawing .phone-meta, #site .drawing .phone-note { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
#site .drawing .phone-stop { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.55rem; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
#site .drawing .phone-n { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--forest); color: #fff; font-size: 0.75rem; font-weight: 700; }
#site .drawing .phone-stop strong { display: block; font-size: 0.95rem; }
#site .drawing .phone-stop span, #site .drawing .phone-addr { display: block; margin-top: 0.15rem; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; }

/* Section heads: the title, then at most one short paragraph. */
#site section > .wrap > h2 + .intro, #site section > .wrap > h2 + p { margin-top: 1rem; max-width: var(--measure); color: var(--muted); }

/* Who it's for: three columns under one rule. */
#site .audience > .wrap, #site .flow > .wrap, #site .proof > .wrap, #site .roles > .wrap, #site .compare > .wrap, #site .faq > .wrap { border-top: 1px solid var(--rule); padding-top: 3rem; }
#site .audience { padding: 0 0 var(--section); }
#site .columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 4rem; margin-top: 2.25rem; }
#site .columns h3 { margin-bottom: 0.5rem; }
#site .columns p { color: var(--ink-2); }

/* One drawing does the job: five rows, number, step, words and a plate. */
#site .flow { padding: 0 0 var(--section); }
#site .steps { margin: 2.75rem 0 0; padding: 0; list-style: none; counter-reset: step; }
#site .steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 9rem minmax(0, 1fr) 17rem; gap: 0 2rem; align-items: start;
  padding: 2rem 0; border-top: 1px solid var(--rule); }
#site .steps li::before { content: counter(step); color: var(--muted); font-size: var(--t-small); line-height: 1.6rem; }
#site .steps h3 { line-height: 1.6rem; }
#site .steps p { max-width: 30rem; color: var(--ink-2); }
#site .plate { margin: 0; }
#site .plate figcaption { margin-top: 0.5rem; color: var(--muted); font-size: var(--t-small); line-height: 1.45; }
#site .crop { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--sheet); border: 1px solid var(--rule); }
#site .crop img { width: 100%; }
/* Crops of the full sheets, by the region shown (in the 2400 x 1600 sheet): the patio on L-103, the seat wall section on L-501. */
#site .crop.draw img { width: 250%; max-width: none; margin: -79.1667% 0 0 -50%; }
#site .crop.detail img { width: 300%; max-width: none; margin: -6.25% 0 0 -60%; }
#site .crop.show img { width: 107.143%; max-width: none; margin-left: -3.571%; }   /* the picture without its printed caption strip */

/* The sample design: the words, then three sheets of the set. */
#site .proof { padding: 0 0 var(--section); }
#site .proof .text { max-width: var(--measure); }
#site .proof .text p { margin-top: 1rem; color: var(--ink-2); }
#site .proof .text p:last-child { margin-top: 1.75rem; }
#site .set { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; }
#site .set figure { margin: 0; }
#site .set img { background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--paper-shadow); }
#site .set figcaption { margin-top: 0.75rem; color: var(--muted); font-size: var(--t-small); }

/* The rest of the company: one row per job, the words on the left and the screen on the right. */
#site .roles { padding: 0 0 var(--section); }
#site .roles > .wrap > .intro { margin-bottom: 1.5rem; }
#site .role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 4rem; align-items: start; padding: 3rem 0; border-top: 1px solid var(--rule); }
#site .role .text { max-width: var(--measure); }
#site .role .who { margin-bottom: 0.4rem; color: var(--muted); font-size: var(--t-small); }
#site .role h3 { margin-bottom: 0.9rem; font-size: var(--t-large); }
#site .role .text > p + p { margin-top: 0.85rem; }
#site .role .text > p:not(.who) { color: var(--ink-2); }
#site ul { margin: 1rem 0 0; padding: 0; list-style: none; }
#site li { color: var(--ink-2); }
#site .role li, #site .switch li, #site .facts li { position: relative; padding: 0.3rem 0 0.3rem 1.25rem; }
#site .role li::before, #site .switch li::before, #site .facts li::before { content: ''; position: absolute; left: 0; top: 1.05rem; width: 0.55rem; height: 1px; background: var(--ink-2); }
#site .frame { justify-self: end; width: fit-content; max-width: 100%; background: var(--sheet); border: 1px solid var(--rule); }
#site .frame a { display: block; }
#site .frame img { max-height: 30rem; width: auto; }
#site .role-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 4rem; border-top: 1px solid var(--rule); }
#site .role.stack { display: block; border-top: 0; }
#site .role.wide { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
#site .screen { background: var(--sheet); border: 1px solid var(--rule); }
#site .screen a { display: block; }
#site .screen img { display: block; width: 100%; height: auto; }
#site .role.stack .screen { margin-top: 1.75rem; }
#site .film { margin: 0 0 1rem; }
#site .film video { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: var(--sheet); border: 1px solid var(--rule); }
#site .film figcaption { margin-top: 0.5rem; color: var(--muted); font-size: var(--t-small); }

/* Two programs, or one: a flat table, Canopy's column in forest. */
#site .compare { padding: 0 0 var(--section); }
#site .compare table { width: 100%; margin-top: 2rem; border-collapse: collapse; font-size: 1rem; }
#site .compare th, #site .compare td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
#site .compare thead th { color: var(--muted); font-size: var(--t-small); font-weight: 400; border-bottom-color: var(--ink-2); }
#site .compare tbody th { font-weight: 400; color: var(--ink); width: 34%; }
#site .compare td { color: var(--ink-2); }
#site .compare thead th:last-child, #site .compare td:last-child { color: var(--forest); font-weight: 700; }
#site .compare .note { margin-top: 1rem; max-width: var(--measure); color: var(--muted); font-size: var(--t-small); }

/* Data and limits, pricing and the company: two columns under a rule. */
#site .switch, #site .facts { padding: 0 0 var(--section); }
#site .switch .wrap, #site .facts .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 4rem; border-top: 1px solid var(--rule); padding-top: 3rem; }
#site .switch .wrap > div, #site .facts .wrap > div { max-width: var(--measure); }
#site .switch h2, #site .facts h2 { margin-bottom: 1rem; }
/* BILLING-1 hold (core/plans.ts PUBLIC_PRICES): while the flag is off the price block is left out of the HTML.
   When it is on, boot hides the hold sentence. */
html[data-public-prices='on'] #site .price-hold { display: none; }
#site .switch p, #site .facts p { color: var(--ink-2); }

/* Questions: a fine rule between them, the answer under the question. */
#site .faq { padding: 0 0 var(--section); }
#site .faq .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 4rem; }
#site .faq .list { border-bottom: 1px solid var(--rule); }
#site .faq details { border-top: 1px solid var(--rule); }
#site .faq details:first-child { border-top: 0; }
#site .faq summary { position: relative; display: block; padding: 1.1rem 2rem 1.1rem 0; font-weight: 500; cursor: pointer; list-style: none; }
#site .faq summary::-webkit-details-marker { display: none; }
#site .faq summary::before, #site .faq summary::after { content: ''; position: absolute; right: 0.25rem; top: 50%; width: 0.7rem; height: 1px; background: var(--muted); }
#site .faq summary::after { transform: rotate(90deg); }
#site .faq details[open] summary::after { display: none; }
#site .faq summary:hover { color: var(--forest); }
#site .faq details p { max-width: var(--measure); padding: 0 0 1.35rem; color: var(--ink-2); }

/* The closing ask and the footer: the brand's forest, once. */
#site .ask { padding: var(--section) 0 3.5rem; background: var(--forest-900); color: var(--ivory); }
#site .ask .wrap > h2 + p { margin: 1rem 0 2rem; max-width: var(--measure); color: var(--on-forest-2); }

#site footer { padding: 2rem 0 3rem; background: var(--forest-900); color: var(--on-forest-2); font-size: 0.9375rem; }
#site footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid rgb(239 234 219 / 0.14); padding-top: 2rem; }
#site footer img { width: 7.5rem; }
#site footer a { color: var(--ivory); }
#site footer nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
#site footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
#site footer .legal { flex-basis: 100%; margin: 0; font-size: var(--t-small); }

/* Request a demo: the same form as the sign-in page's, in a dialog. */
#site dialog { width: min(34rem, 100% - 1.5rem); max-height: calc(100dvh - 1.5rem); padding: 0; border: 0; border-radius: 12px; background: var(--sheet); color: var(--ink); box-shadow: var(--sh-4); }
#site dialog::backdrop { background: rgb(11 34 24 / 0.55); }
#site dialog form, #site dialog .sent { padding: 1.75rem 1.75rem 1.5rem; }
#site dialog .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
#site dialog h2 { margin: 0 0 0.35rem; font-size: 1.75rem; }
#site dialog .x { flex: none; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.75rem 0 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
#site dialog .x:hover { background: var(--forest-100); color: var(--forest); }
#site dialog .intro { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.9375rem; }
#site .field { margin: 0 0 0.9rem; }
#site .field label { display: block; margin: 0 0 0.3rem; font-size: 0.9375rem; font-weight: 500; }
#site .field .opt { color: var(--muted); font-weight: 400; }
#site .field input, #site .field select, #site .field textarea { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; border: 1px solid var(--field); border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-size: 1rem; }
#site .field textarea { min-height: 5rem; resize: vertical; }
#site .field input:focus, #site .field select:focus, #site .field textarea:focus { outline: none; border-color: var(--forest-600); box-shadow: 0 0 0 3px rgb(31 90 63 / 0.18); }
#site .field .error { margin: 0.3rem 0 0; font-size: 0.9375rem; }
#site .field input[aria-invalid="true"] { border-color: var(--flag-ink); }
#site .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#site .error { margin: 0 0 0.9rem; color: var(--flag-ink); font-weight: 500; }
#site dialog .button { width: 100%; margin-top: 0.25rem; }
#site .notice { margin: 0.9rem 0 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
#site .sent p { margin: 0 0 1.25rem; color: var(--ink-2); }

@media (max-width: 1000px) {
  #site .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  #site .hero .intro { max-width: var(--measure); }
  #site .steps li { grid-template-columns: 2rem minmax(0, 1fr) 15rem; }
  #site .steps li > h3 { grid-column: 2; }
  #site .steps li > p { grid-column: 2; margin-top: 0.4rem; }
  #site .steps li > .plate { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 760px) {
  #site { font-size: 1rem; }
  #site .columns, #site .set, #site .switch .wrap, #site .facts .wrap, #site .faq .wrap, #site .role-pair { grid-template-columns: minmax(0, 1fr); }
  #site .columns { gap: 2rem; }
  #site .set { gap: 1.75rem; }
  #site .role { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2.5rem 0; }
  #site .frame { justify-self: start; }
  #site .frame img { max-height: 26rem; }
  #site .role-pair { gap: 0; }
  #site .role.stack + .role.stack { border-top: 1px solid var(--rule); }
  #site .steps li { grid-template-columns: 1.75rem minmax(0, 1fr); padding: 1.75rem 0; }
  #site .steps li > .plate { grid-column: 2; grid-row: auto; margin-top: 1.25rem; }
  #site .drawing { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; padding: 0; }
  #site .drawing .sheet, #site .drawing .doc, #site .drawing .phone { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; max-width: none; margin: 0; }
  #site .drawing .doc { aspect-ratio: 3 / 4; max-height: 22rem; }
  #site .drawing .phone { max-width: 22rem; }
  #site .drawing figcaption { position: static; width: auto; margin: 0; }
}
@media (max-width: 600px) {
  #site .top .wrap { min-height: 3.75rem; }
  #site .top .brand img { width: 6.75rem; }
  #site .top nav { gap: 1rem; }
  #site .top .button { padding: 0.4rem 0.75rem; font-size: 0.875rem; }
  #site .hero .actions .button { width: 100%; }
  #site .compare table { font-size: 0.875rem; }
  #site .compare th, #site .compare td { padding: 0.65rem 0.5rem 0.65rem 0; }
  #site .compare tbody th { width: auto; }
  #site dialog form, #site dialog .sent { padding: 1.35rem 1.15rem 1.15rem; }
}

/* Inner marketing pages. The product page does not use these classes, so its layout is unchanged.
   They reuse the same type scale, the 72rem wrap, the ruled section, the screenshot frame and the forest ask. */
#site .skip { position: absolute; left: 0.75rem; top: -4rem; z-index: 6; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 8px; background: var(--forest); color: #fff; font-weight: 700; text-decoration: none; }
#site .skip:focus { top: 0.75rem; }
#site .hero.plain { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
#site .hero.plain .wrap { grid-template-columns: minmax(0, 1fr); }
#site .hero.plain .intro { max-width: 40rem; }
#site .hero.plain .hero-still { margin: 2.5rem 0 0; }
#site .block { padding: 0 0 var(--section); }
#site .block > .wrap { border-top: 1px solid var(--rule); padding-top: 3rem; }
#site .block > .wrap > h2 + p, #site .block .prose p { margin-top: 1rem; max-width: var(--measure); color: var(--ink-2); }
#site .block .prose h2 { margin-top: 2.5rem; }
#site .block .prose > h2:first-child { margin-top: 0; }
#site .updated { color: var(--muted); font-size: var(--t-small); }
#site .guide-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
#site .guide-list:empty { display: none; }
#site .guide-list a { display: block; padding: 1rem 0; border-bottom: 1px solid var(--rule); font-weight: 700; }
#site .guide-list li:has(span) { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
#site .guide-list li:has(span) a { padding: 0; border: 0; }
#site .guide-list span { display: block; margin-top: 0.25rem; max-width: var(--measure); color: var(--muted); }
#site .block .prose h2 + p { margin-top: 1rem; }
#site .block .prose ul { margin-top: 1rem; }
/* MARKETING-1: the guide and switch pages' long-form parts: subheads, numbered steps, a table, the short answer and the letters. */
#site .prose.long { max-width: 44rem; }
#site .prose.long h3 { margin-top: 2rem; }
#site .prose.long h3 + p, #site .prose.long h3 + ul, #site .prose.long h3 + ol { margin-top: 0.5rem; }
#site .prose.long ol { margin-top: 1rem; padding-left: 1.5rem; }
#site .prose.long li { max-width: var(--measure); color: var(--ink-2); }
#site .prose.long li + li { margin-top: 0.35rem; }
#site .prose.long .answer { padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule); }
#site .prose.long .answer h2 { font-size: var(--t-large); font-family: var(--font); font-weight: 700; }
#site .prose.long .answer p { font-size: var(--t-large); color: var(--ink); }
#site .prose.long .answer + h2 { margin-top: 3rem; }
#site .prose.long .table { margin-top: 1.25rem; overflow-x: auto; }
#site .prose.long table { width: 100%; border-collapse: collapse; font-size: 1rem; }
#site .prose.long th, #site .prose.long td { padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; color: var(--ink-2); }
#site .prose.long thead th { color: var(--muted); font-size: var(--t-small); font-weight: 400; border-bottom-color: var(--ink-2); }
#site .prose.long .label { margin-top: 0.75rem; color: var(--muted); font-size: var(--t-small); }
#site .prose.long .letter { margin-top: 0.75rem; padding: 1.25rem 1.5rem; background: var(--sheet); border: 1px solid var(--rule); }
#site .prose.long .letter p { margin-top: 0; max-width: none; }
#site .prose.long .letter p + p, #site .prose.long .letter ul + p { margin-top: 0.75rem; }
#site .prose.long .letter ul { margin: 0.75rem 0 0; }
#site .prose.long figure { margin: 1.5rem 0 0; }
#site .prose.long figcaption { margin-top: 0.5rem; color: var(--muted); font-size: var(--t-small); }
#site .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
#site .shot { background: var(--sheet); border: 1px solid var(--rule); }
#site .shot img, #site .shot video { display: block; width: 100%; height: auto; }
#site figure.wide { margin: 2rem 0 0; }
#site figure.wide figcaption, #site .pair figcaption { margin-top: 0.5rem; color: var(--muted); font-size: var(--t-small); }
#site .figures { display: flex; flex-wrap: wrap; margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
#site .figures li { flex: 1 1 10rem; padding: 1rem 1.25rem 1rem 0; }
#site .figures li::before { content: none; }
#site .figures li + li { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
#site .figures b { display: block; font-family: var(--font-display); font-size: var(--t-title); font-weight: 400; color: var(--ink); line-height: 1.2; }
#site .figures span { color: var(--muted); font-size: var(--t-small); }
#site .sheets { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2rem 0 0; padding: 0; }
#site .sheets > li { padding: 0; }
#site .sheets > li::before { content: none; }
#site .sheets a { display: block; color: var(--ink); text-decoration: none; }
#site .sheets img { background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--paper-shadow); }
#site .sheets span { display: block; margin-top: 0.75rem; color: var(--muted); font-size: var(--t-small); line-height: 1.45; }
#site .sheets b { color: var(--ink); font-weight: 700; margin-right: 0.35rem; }
#site .sheets .what { margin-top: 0.15rem; }
#site .downloads { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 1.5rem; }
#site .downloads a:not(.button) { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
#site .note { margin-top: 1.5rem; max-width: var(--measure); color: var(--muted); font-size: var(--t-small); }
#site footer a[aria-current='page'] { font-weight: 700; text-decoration: none; }
@media (max-width: 760px) {
  #site .pair, #site .sheets { grid-template-columns: minmax(0, 1fr); }
  #site .sheets { gap: 1.75rem; }
  #site .figures li + li { border-left: 0; padding-left: 0; }
  #site .figures li { flex-basis: calc(50% - 0.5rem); }
}