@epicbagel/saas-kit 1.31.0 → 1.33.0

package/src/styles/components/poster.css

@@ -0,0 +1,1449 @@
+/* Poster — the presentation of primitives/poster.tsx: a one-page marketing
+ * poster with oversized type, full-bleed bands in paper, ink or one primary
+ * colour, and thin rules. Every selector lands on a poster part's
+ * data-slot. The shell's colours and font come from PosterShell's props, as
+ * custom properties, else the palette's tokens. In the components layer, so a
+ * consumer's utility classes still win.
+ *
+ * The layout is a quiet editorial grid: wide outer margins, headlines at full
+ * size, the lines under them held to a reading measure, and a rhythm set by a
+ * few spacing steps that grow with the screen. Every block with columns shares
+ * one gap, so their edges line up down the page, and what names a thing (an
+ * eyebrow, a label, a byline) is set as a small capital label, so the type
+ * either speaks or labels. */
+@layer components {
+  [data-slot="poster-shell"] {
+    --poster-paper: hsl(var(--background));
+    --poster-ink: hsl(var(--foreground));
+    --poster-primary: hsl(var(--primary));
+    --poster-on-primary: hsl(var(--primary-foreground));
+    --poster-mute: hsl(var(--muted-foreground));
+    --poster-wash: hsl(var(--muted));
+    --poster-font: var(--font-sans);
+    /* The grid: an outer margin that grows with the screen (24px on a phone,
+     * about 120px at 1440), the widest the content runs, and the one gap
+     * between columns. */
+    --poster-gutter: max(clamp(24px, calc(9vw - 12px), 152px), env(safe-area-inset-left, 0px));
+    --poster-gutter-end: max(clamp(24px, calc(9vw - 12px), 152px), env(safe-area-inset-right, 0px));
+    --poster-max: 1920px;
+    --poster-gap: clamp(20px, 3.4vw, 56px);
+    --poster-header: clamp(60px, 5vw, 76px);
+    /* Type: display sizes for titles, reading sizes for the lines under them. */
+    --poster-punch: clamp(52px, 10.4vw, 168px);
+    --poster-head: clamp(40px, 7.4vw, 120px);
+    --poster-large: clamp(26px, 3.6vw, 56px);
+    --poster-mid: clamp(21px, 2.6vw, 38px);
+    --poster-copy: clamp(19px, 2.05vw, 30px);
+    --poster-body: clamp(17px, 1.4vw, 20px);
+    /* Space, in steps: a label to what it labels, a title to its lines, text to
+     * a block, a block to a new part, and a band's own padding. */
+    --poster-space-s: clamp(14px, 1.6vw, 24px);
+    --poster-space-m: clamp(20px, 2.8vw, 44px);
+    --poster-space-l: clamp(28px, 4.4vw, 68px);
+    --poster-space-xl: clamp(48px, 7.8vw, 120px);
+    --poster-space-2xl: clamp(64px, 10.4vw, 160px);
+    --poster-space-band: clamp(80px, 13.6vw, 208px);
+    /* A secondary rule: the text's own colour, faint, so it works on any band. */
+    --poster-hairline: color-mix(in srgb, currentColor 24%, transparent);
+    min-height: 100vh;
+    background: var(--poster-paper);
+    color: var(--poster-ink);
+    font: 400 16px/1.45 var(--poster-font);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Under a notch, the page shows through nothing as it scrolls. */
+  [data-slot="poster-shell"]::before {
+    content: "";
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 10;
+    height: env(safe-area-inset-top, 0px);
+    background: var(--poster-paper);
+  }
+
+  [data-slot="poster-shell"] :focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 3px;
+  }
+
+  [data-slot="poster-shell"] button {
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    padding: 0;
+    text-align: left;
+  }
+
+  /* Full-bleed parts keep their content inside the margins, and inside the
+   * widest the content runs on a very wide screen. */
+  :is([data-slot="poster-banner"], [data-slot="poster-header"], [data-slot="poster-hero"], [data-slot="poster-band"]) {
+    padding-left: max(var(--poster-gutter), calc((100% - var(--poster-max)) / 2));
+    padding-right: max(var(--poster-gutter-end), calc((100% - var(--poster-max)) / 2));
+  }
+
+  /* What names a thing: a small capital label. */
+  :is(
+    [data-slot="poster-eyebrow"],
+    [data-slot="poster-range-label"],
+    [data-slot="poster-figure-label"],
+    [data-slot="poster-cost-label"],
+    [data-slot="poster-column-heading"]:not(h3),
+    [data-slot="poster-next-label"],
+    [data-slot="poster-person-name"],
+    [data-slot="poster-quote-by"],
+    [data-slot="poster-footnote"],
+    [data-slot="poster-fact-term"],
+    [data-slot="poster-more-link"],
+    [data-slot="poster-column-link"],
+    [data-slot="poster-disclosure-summary"]
+  ),
+  :is([data-slot="poster-step"], [data-slot="poster-flow-step"])::before {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.35;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  /* Solid buttons: a small capital label on ink. */
+  :is(
+    [data-slot="poster-header-action"],
+    [data-slot="poster-shell"] [data-slot="poster-copy-button"],
+    [data-slot="poster-call-action"]
+  ) {
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  /* Banner: an announcement strip above the header, in the primary colour,
+   * the whole of it one link. It clears a notch itself, as the header below
+   * it does once it sticks. */
+  [data-slot="poster-banner"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 4px 16px;
+    min-height: 44px;
+    margin-top: env(safe-area-inset-top, 0px);
+    padding-block: 10px;
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+    font-size: 15px;
+    line-height: 1.3;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  /* Its action: a small capital label, underlined. */
+  [data-slot="poster-banner-action"] {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 5px;
+  }
+
+  [data-slot="poster-banner"]:hover [data-slot="poster-banner-action"] {
+    text-decoration-thickness: 2px;
+  }
+
+  [data-slot="poster-banner"]:focus-visible {
+    outline: 2px solid var(--poster-ink);
+    outline-offset: -4px;
+  }
+
+  /* Header */
+  [data-slot="poster-header"] {
+    position: sticky;
+    top: env(safe-area-inset-top, 0px);
+    z-index: 9;
+    display: flex;
+    height: var(--poster-header);
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--poster-ink);
+    background: var(--poster-paper);
+    font-size: 14px;
+  }
+
+  [data-slot="poster-mark"] {
+    font-weight: 800;
+    font-size: 21px;
+    letter-spacing: 0.14em;
+    text-decoration: none;
+  }
+
+  [data-slot="poster-header-action"] {
+    padding: 12px 18px;
+    background: var(--poster-ink);
+    color: var(--poster-paper);
+    text-decoration: none;
+    transition: background-color 0.2s;
+  }
+
+  [data-slot="poster-header-action"]:hover {
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+  }
+
+  /* The header's pages: a row before the action, or a Menu under 900px. */
+  [data-slot="poster-nav"] {
+    margin-left: auto;
+    margin-right: clamp(16px, 2.4vw, 36px);
+  }
+
+  :is([data-slot="poster-nav-list"], [data-slot="poster-nav-panel"]) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  [data-slot="poster-nav-list"] {
+    display: flex;
+    align-items: center;
+    gap: clamp(20px, 2.4vw, 36px);
+  }
+
+  :is([data-slot="poster-nav-link"], [data-slot="poster-nav-toggle"]) {
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: inherit;
+    text-decoration: none;
+    text-underline-offset: 6px;
+    text-decoration-thickness: 1px;
+  }
+
+  [data-slot="poster-nav-link"]:is(:hover, [aria-current="page"]) {
+    text-decoration-line: underline;
+  }
+
+  :is([data-slot="poster-nav-link"], [data-slot="poster-nav-toggle"]):focus-visible {
+    outline: 2px solid var(--poster-primary);
+    outline-offset: 4px;
+  }
+
+  [data-slot="poster-nav-menu"] {
+    display: none;
+  }
+
+  [data-slot="poster-nav-toggle"] {
+    display: flex;
+    min-height: 44px;
+    align-items: center;
+    cursor: pointer;
+    list-style: none;
+  }
+
+  [data-slot="poster-nav-toggle"]::-webkit-details-marker {
+    display: none;
+  }
+
+  [data-slot="poster-nav-menu"][open] [data-slot="poster-nav-toggle"] {
+    text-decoration-line: underline;
+  }
+
+  [data-slot="poster-nav-panel"] {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    display: grid;
+    padding: 8px max(var(--poster-gutter-end), calc((100% - var(--poster-max)) / 2)) 24px max(var(--poster-gutter), calc((100% - var(--poster-max)) / 2));
+    border-bottom: 1px solid var(--poster-ink);
+    background: var(--poster-paper);
+  }
+
+  [data-slot="poster-nav-panel"] [data-slot="poster-nav-link"] {
+    display: flex;
+    min-height: 52px;
+    align-items: center;
+    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+    font-size: 14px;
+  }
+
+  @media (max-width: 899.98px) {
+    [data-slot="poster-nav-list"] {
+      display: none;
+    }
+
+    [data-slot="poster-nav-menu"] {
+      display: block;
+    }
+  }
+
+  /* Hero */
+  [data-slot="poster-hero"] {
+    padding-block: clamp(48px, 7vw, 120px) clamp(48px, 6.2vw, 104px);
+  }
+
+  [data-slot="poster-hero-title"] {
+    font-weight: 400;
+    font-size: var(--poster-punch);
+    line-height: 0.96;
+    letter-spacing: -0.05em;
+  }
+
+  [data-slot="poster-hero"][data-variant="page"] [data-slot="poster-hero-title"] {
+    max-width: 12em;
+    font-size: clamp(44px, 10.4vw, 168px);
+    font-weight: 500;
+    letter-spacing: -0.045em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-hero-description"] {
+    max-width: 18em;
+    margin-top: var(--poster-space-l);
+    font-size: var(--poster-mid);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-hero"] [data-slot="poster-eyebrow"] {
+    margin-bottom: var(--poster-space-l);
+  }
+
+  [data-slot="poster-hero-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 16px 32px;
+    margin-top: var(--poster-space-l);
+  }
+
+  [data-slot="poster-action"] {
+    display: inline-flex;
+    min-height: 44px;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: inherit;
+    text-decoration: none;
+    text-underline-offset: 6px;
+    text-decoration-thickness: 1px;
+  }
+
+  [data-slot="poster-action"][data-variant="solid"] {
+    padding: 16px 22px;
+    background: var(--poster-ink);
+    color: var(--poster-paper);
+    transition: background-color 0.2s;
+  }
+
+  [data-slot="poster-action"][data-variant="solid"]:hover {
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+  }
+
+  [data-slot="poster-action"][data-variant="quiet"] {
+    text-decoration-line: underline;
+  }
+
+  [data-slot="poster-action"][data-variant="quiet"]:hover {
+    color: var(--poster-primary);
+  }
+
+  [data-slot="poster-action"]:focus-visible {
+    outline: 2px solid var(--poster-primary);
+    outline-offset: 4px;
+  }
+
+  /* Switch: two halves, each with the page's own margin on its outer side. */
+  [data-slot="poster-switch"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    border-block: 1px solid var(--poster-ink);
+  }
+
+  [data-slot="poster-shell"] [data-slot="poster-switch-option"] {
+    position: relative;
+    isolation: isolate;
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    padding-top: clamp(20px, 3.4vw, 52px);
+    padding-bottom: clamp(22px, 3.6vw, 56px);
+    padding-left: var(--poster-gutter);
+    padding-right: var(--poster-gutter-end);
+    transition: color 0.25s;
+  }
+
+  [data-slot="poster-shell"] [data-slot="poster-switch-option"]:first-child {
+    padding-left: max(var(--poster-gutter), calc(100% - var(--poster-max) / 2));
+  }
+
+  [data-slot="poster-shell"] [data-slot="poster-switch-option"]:last-child {
+    padding-right: max(var(--poster-gutter-end), calc(100% - var(--poster-max) / 2));
+  }
+
+  [data-slot="poster-switch-option"] + [data-slot="poster-switch-option"] {
+    border-left: 1px solid var(--poster-ink);
+  }
+
+  [data-slot="poster-switch-option"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--poster-primary);
+    transform: scaleY(0);
+    transform-origin: bottom;
+    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
+  }
+
+  [data-slot="poster-switch-option"]:not([aria-pressed="true"]):hover::before {
+    transform: scaleY(0.06);
+  }
+
+  [data-slot="poster-switch-option"][aria-pressed="true"] {
+    color: var(--poster-on-primary);
+  }
+
+  [data-slot="poster-switch-option"][aria-pressed="true"]::before {
+    transform: none;
+  }
+
+  [data-slot="poster-switch-title"] {
+    display: block;
+    font-weight: 500;
+    font-size: clamp(30px, 4.3vw, 66px);
+    line-height: 1;
+    letter-spacing: -0.045em;
+  }
+
+  [data-slot="poster-switch-hint"] {
+    display: block;
+    margin-top: clamp(8px, 1vw, 14px);
+    font-size: clamp(14px, 1.4vw, 20px);
+    line-height: 1.3;
+    text-wrap: balance;
+  }
+
+  /* Bands */
+  [data-slot="poster-band"] {
+    padding-block: var(--poster-space-band);
+    scroll-margin-top: calc(var(--poster-header) + env(safe-area-inset-top, 0px));
+  }
+
+  [data-slot="poster-band"][data-padding="loose"] {
+    padding-block: clamp(96px, 15.3vw, 232px);
+  }
+
+  [data-slot="poster-band"][data-padding="top"] {
+    padding-block: var(--poster-space-band) 0;
+  }
+
+  [data-slot="poster-band"][data-padding="end"] {
+    padding-block: var(--poster-space-band) clamp(24px, 2.8vw, 40px);
+  }
+
+  [data-slot="poster-band"][data-tone="ink"] {
+    background: var(--poster-ink);
+    color: var(--poster-paper);
+  }
+
+  [data-slot="poster-band"][data-tone="primary"] {
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+  }
+
+  [data-slot="poster-eyebrow"] {
+    display: block;
+    margin-bottom: var(--poster-space-m);
+  }
+
+  [data-slot="poster-title"] {
+    font-weight: 500;
+    font-size: var(--poster-head);
+    line-height: 1;
+    letter-spacing: -0.045em;
+  }
+
+  [data-slot="poster-title"][data-size="punch"] {
+    font-size: var(--poster-punch);
+    line-height: 0.96;
+  }
+
+  [data-slot="poster-title"][data-wrap="balance"] {
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-title"][data-size="end"] {
+    font-size: clamp(34px, 6.2vw, 96px);
+    line-height: 1;
+  }
+
+  :is([data-slot="poster-kicker"], [data-slot="poster-lead"]) {
+    font-size: var(--poster-large);
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-kicker"] {
+    max-width: 22em;
+    margin-bottom: var(--poster-space-m);
+  }
+
+  [data-slot="poster-lead"] {
+    max-width: 19em;
+    margin-top: var(--poster-space-l);
+  }
+
+  [data-slot="poster-lead"]:first-child {
+    margin-top: 0;
+  }
+
+  [data-slot="poster-description"] {
+    max-width: 17em;
+    margin-top: var(--poster-space-l);
+    font-size: var(--poster-mid);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-after"] {
+    max-width: 17em;
+    margin-top: var(--poster-space-m);
+    font-size: var(--poster-mid);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+  }
+
+  [data-slot="poster-subhead"] {
+    max-width: 18em;
+    margin-top: var(--poster-space-2xl);
+    font-weight: 500;
+    font-size: var(--poster-large);
+    line-height: 1.04;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-statement"] {
+    margin-top: var(--poster-space-xl);
+    font-size: var(--poster-mid);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+  }
+
+  /* Calculator */
+  [data-slot="poster-calculator"] {
+    margin-top: var(--poster-space-xl);
+  }
+
+  :is([data-slot="poster-ranges"], [data-slot="poster-figures"]) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--poster-space-l) var(--poster-gap);
+  }
+
+  :is([data-slot="poster-range-label"], [data-slot="poster-figure-label"]) {
+    display: block;
+  }
+
+  [data-slot="poster-range-value"] {
+    display: block;
+    margin-top: clamp(8px, 1vw, 14px);
+    font-size: var(--poster-mid);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  [data-slot="poster-range-input"] {
+    -webkit-appearance: none;
+    appearance: none;
+    display: block;
+    width: 100%;
+    height: 32px;
+    margin: 10px 0 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  [data-slot="poster-range-input"]::-webkit-slider-runnable-track {
+    height: 1px;
+    background: currentColor;
+  }
+
+  [data-slot="poster-range-input"]::-moz-range-track {
+    height: 1px;
+    background: currentColor;
+  }
+
+  [data-slot="poster-range-input"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    margin-top: -9px;
+    border: 0;
+    border-radius: 0;
+    background: currentColor;
+  }
+
+  [data-slot="poster-range-input"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border: 0;
+    border-radius: 0;
+    background: currentColor;
+  }
+
+  [data-slot="poster-figures"] {
+    margin-top: var(--poster-space-xl);
+    padding-top: var(--poster-space-s);
+    border-top: 1px solid currentColor;
+  }
+
+  [data-slot="poster-figures"][data-columns="1"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  [data-slot="poster-figure-value"] {
+    display: block;
+    margin-top: var(--poster-space-m);
+    font-weight: 400;
+    font-size: clamp(46px, 8vw, 128px);
+    line-height: 1;
+    letter-spacing: -0.045em;
+    overflow-wrap: anywhere;
+  }
+
+  [data-slot="poster-small-print"] {
+    max-width: 40em;
+    margin-top: var(--poster-space-l);
+    color: color-mix(in srgb, currentColor 80%, transparent);
+    font-size: 15px;
+    line-height: 1.45;
+    text-wrap: pretty;
+  }
+
+  @media (max-width: 640px) {
+    :is([data-slot="poster-ranges"], [data-slot="poster-figures"]) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  /* Columns */
+  [data-slot="poster-columns"] {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--poster-space-l) var(--poster-gap);
+    margin-top: var(--poster-space-l);
+  }
+
+  [data-slot="poster-columns"][data-variant="labelled"] [data-slot="poster-column-heading"] {
+    display: block;
+    margin-bottom: var(--poster-space-s);
+  }
+
+  [data-slot="poster-columns"][data-variant="labelled"] [data-slot="poster-column-text"] {
+    font-size: var(--poster-copy);
+    line-height: 1.2;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-columns"][data-variant="titled"] {
+    margin-top: 0;
+  }
+
+  [data-slot="poster-columns"][data-variant="titled"] [data-slot="poster-column-heading"] {
+    font-weight: 400;
+    font-size: var(--poster-mid);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  [data-slot="poster-columns"][data-variant="titled"] [data-slot="poster-column-text"] {
+    margin-top: var(--poster-space-s);
+    font-size: var(--poster-body);
+    line-height: 1.4;
+  }
+
+  /* Ticks: a ruled grid on the columns' own gap. */
+  [data-slot="poster-ticks"] {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    column-gap: var(--poster-gap);
+    margin-top: var(--poster-space-l);
+    border-top: 1px solid currentColor;
+  }
+
+  [data-slot="poster-ticks"][data-spacing="tight"] {
+    margin-top: var(--poster-space-m);
+  }
+
+  [data-slot="poster-tick"] {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 12px;
+    padding-block: clamp(14px, 1.4vw, 20px);
+    border-bottom: 1px solid var(--poster-hairline);
+    font-size: var(--poster-body);
+    line-height: 1.25;
+  }
+
+  [data-slot="poster-tick"]::before {
+    content: "";
+    flex: none;
+    width: 10px;
+    height: 10px;
+    background: var(--poster-primary);
+  }
+
+  @media (max-width: 900px) {
+    [data-slot="poster-ticks"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 760px) {
+    [data-slot="poster-columns"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  /* Disclosure */
+  [data-slot="poster-disclosure"] {
+    margin-top: var(--poster-space-l);
+    border-top: 1px solid currentColor;
+  }
+
+  [data-slot="poster-disclosure-summary"] {
+    display: flex;
+    cursor: pointer;
+    list-style: none;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding-block: clamp(14px, 1.5vw, 20px);
+  }
+
+  [data-slot="poster-disclosure-summary"]::-webkit-details-marker {
+    display: none;
+  }
+
+  [data-slot="poster-disclosure-summary"]::after {
+    content: "+";
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: 0;
+  }
+
+  [data-slot="poster-disclosure"][open] > [data-slot="poster-disclosure-summary"]::after {
+    content: "\2212";
+  }
+
+  [data-slot="poster-disclosure-body"] {
+    padding-bottom: var(--poster-space-s);
+  }
+
+  /* Facts and people: a label beside a line, on the four-column grid. */
+  :is([data-slot="poster-fact"], [data-slot="poster-person"]) {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    align-items: baseline;
+    gap: 8px var(--poster-gap);
+    padding-block: clamp(16px, 1.9vw, 28px);
+    border-top: 1px solid currentColor;
+  }
+
+  :is([data-slot="poster-fact-detail"], [data-slot="poster-person-bio"]) {
+    grid-column: 2 / -1;
+  }
+
+  [data-slot="poster-fact-detail"] {
+    max-width: 30em;
+    font-size: var(--poster-copy);
+    line-height: 1.2;
+    letter-spacing: -0.015em;
+  }
+
+  [data-slot="poster-note"] {
+    max-width: 34em;
+    margin-top: var(--poster-space-m);
+    font-size: var(--poster-body);
+    line-height: 1.4;
+  }
+
+  /* Numbered steps */
+  [data-slot="poster-flow"] {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--poster-space-m) var(--poster-gap);
+    counter-reset: poster-step;
+  }
+
+  [data-slot="poster-flow-step"] {
+    counter-increment: poster-step;
+    font-size: var(--poster-body);
+    line-height: 1.3;
+  }
+
+  [data-slot="poster-flow-step"]::before {
+    content: counter(poster-step, decimal-leading-zero);
+    display: block;
+    margin-bottom: var(--poster-space-s);
+  }
+
+  [data-slot="poster-steps"] {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--poster-space-l) var(--poster-gap);
+    margin-top: var(--poster-space-xl);
+    counter-reset: poster-step;
+  }
+
+  [data-slot="poster-step"] {
+    min-width: 0;
+    counter-increment: poster-step;
+    padding-top: var(--poster-space-s);
+    border-top: 1px solid currentColor;
+    font-size: var(--poster-copy);
+    line-height: 1.16;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-step"]::before {
+    content: counter(poster-step, decimal-leading-zero);
+    display: block;
+    margin-bottom: var(--poster-space-l);
+  }
+
+  [data-slot="poster-steps"][data-layout="four"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  [data-slot="poster-steps"][data-layout="four"] [data-slot="poster-step"]::before {
+    margin-bottom: var(--poster-space-m);
+  }
+
+  /* Call list */
+  [data-slot="poster-calls"] {
+    max-width: calc(var(--poster-mid) * 17);
+    margin-top: var(--poster-space-l);
+    border-top: 1px solid currentColor;
+  }
+
+  [data-slot="poster-call"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding-block: 12px;
+    border-bottom: 1px solid var(--poster-hairline);
+    font-size: var(--poster-body);
+  }
+
+  [data-slot="poster-call-action"] {
+    padding: 9px 18px;
+    background: var(--poster-on-primary);
+    color: var(--poster-primary);
+  }
+
+  /* Cost and copy */
+  [data-slot="poster-cost"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: var(--poster-space-m) var(--poster-gap);
+    margin-top: var(--poster-space-xl);
+    padding-top: var(--poster-space-s);
+    border-top: 1px solid currentColor;
+  }
+
+  [data-slot="poster-cost-label"] {
+    display: block;
+    margin-bottom: var(--poster-space-m);
+  }
+
+  [data-slot="poster-cost-statement"] {
+    max-width: 17em;
+    font-size: var(--poster-large);
+    line-height: 1.06;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-copy"] {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px 24px;
+  }
+
+  [data-slot="poster-copy"][data-placement="block"] {
+    margin-top: var(--poster-space-l);
+  }
+
+  [data-slot="poster-copy-text"] {
+    min-width: 0;
+    font-size: var(--poster-body);
+    user-select: all;
+    overflow-wrap: anywhere;
+  }
+
+  [data-slot="poster-shell"] [data-slot="poster-copy-button"] {
+    padding: 15px 22px;
+    background: var(--poster-ink);
+    color: var(--poster-paper);
+    transition: background-color 0.2s;
+  }
+
+  [data-slot="poster-shell"] [data-slot="poster-copy-button"]:hover {
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+  }
+
+  /* People and the foot */
+  [data-slot="poster-people"] {
+    margin-top: var(--poster-space-xl);
+  }
+
+  [data-slot="poster-person-bio"] {
+    max-width: 24em;
+    font-weight: 400;
+    font-size: var(--poster-mid);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-footnote"] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 8px 24px;
+    margin-top: var(--poster-space-2xl);
+    padding-top: var(--poster-space-s);
+    border-top: 1px solid var(--poster-hairline);
+  }
+
+  @media (max-width: 760px) {
+    :is([data-slot="poster-fact"], [data-slot="poster-person"]) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :is([data-slot="poster-fact-detail"], [data-slot="poster-person-bio"]) {
+      grid-column: auto;
+    }
+
+    [data-slot="poster-flow"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    :is([data-slot="poster-steps"], [data-slot="poster-cost"]) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    [data-slot="poster-step"]::before {
+      margin-bottom: var(--poster-space-s);
+    }
+  }
+
+  /* Column links and ruled columns */
+  [data-slot="poster-column-link"] {
+    display: inline-block;
+    margin-top: var(--poster-space-s);
+    padding-block: 4px;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 5px;
+  }
+
+  [data-slot="poster-column-link"]:hover {
+    text-decoration-thickness: 2px;
+  }
+
+  [data-slot="poster-columns"][data-variant="ruled"] {
+    margin-top: var(--poster-space-xl);
+  }
+
+  [data-slot="poster-columns"][data-variant="ruled"] [data-slot="poster-column"] {
+    padding-top: var(--poster-space-s);
+    border-top: 1px solid currentColor;
+  }
+
+  [data-slot="poster-columns"][data-variant="ruled"] [data-slot="poster-column-text"] {
+    margin-top: var(--poster-space-l);
+    font-size: var(--poster-copy);
+    line-height: 1.2;
+    letter-spacing: -0.015em;
+    text-wrap: balance;
+  }
+
+  /* Links to other pages */
+  [data-slot="poster-more-link"] {
+    display: flex;
+    max-width: calc(var(--poster-mid) * 17);
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-top: var(--poster-space-l);
+    padding-block: clamp(14px, 1.5vw, 20px);
+    border-top: 1px solid currentColor;
+    border-bottom: 1px solid var(--poster-hairline);
+    text-decoration: none;
+  }
+
+  [data-slot="poster-more-link"]::after {
+    content: "+";
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: 0;
+    transition: transform 0.25s;
+  }
+
+  [data-slot="poster-more-link"]:hover::after {
+    transform: rotate(90deg);
+  }
+
+  [data-slot="poster-calls"] + [data-slot="poster-more-link"] {
+    margin-top: var(--poster-space-m);
+  }
+
+  [data-slot="poster-next-link"] {
+    display: block;
+    margin-top: var(--poster-space-2xl);
+    padding-top: var(--poster-space-s);
+    border-top: 1px solid currentColor;
+    font-size: var(--poster-head);
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: -0.045em;
+    text-decoration: none;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-next-link"]:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 0.04em;
+    text-underline-offset: 0.1em;
+  }
+
+  [data-slot="poster-next-label"] {
+    display: block;
+    margin-bottom: var(--poster-space-l);
+  }
+
+  [data-slot="poster-text-link"] {
+    text-decoration: underline;
+  }
+
+  /* A break between sentences on a wider screen: an empty block, so each part
+   * either side is a block of its own, balanced alone. */
+  [data-slot="poster-break"] {
+    display: none;
+  }
+
+  @media (min-width: 760px) {
+    [data-slot="poster-break"] {
+      display: block;
+    }
+  }
+
+  /* Quotes, figures and claims */
+  [data-slot="poster-quote"] {
+    max-width: 15em;
+    margin: 0;
+    font-size: var(--poster-head);
+    font-weight: 500;
+    line-height: 1.02;
+    letter-spacing: -0.04em;
+    text-wrap: balance;
+  }
+
+  [data-slot="poster-quote"][data-size="small"] {
+    max-width: 18em;
+    margin-top: var(--poster-space-xl);
+    font-size: var(--poster-large);
+    font-weight: 400;
+    line-height: 1.12;
+    letter-spacing: -0.03em;
+  }
+
+  [data-slot="poster-quote-by"] {
+    margin-top: var(--poster-space-m);
+  }
+
+  [data-slot="poster-stats"] {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: var(--poster-space-l) var(--poster-gap);
+  }
+
+  [data-slot="poster-stats"][data-columns="2"] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  [data-slot="poster-stat"] {
+    min-width: 0;
+    padding-top: var(--poster-space-s);
+    border-top: 1px solid currentColor;
+  }
+
+  [data-slot="poster-stat-value"] {
+    font-size: var(--poster-large);
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: -0.04em;
+  }
+
+  [data-slot="poster-stat-label"] {
+    margin-top: var(--poster-space-s);
+    font-size: var(--poster-body);
+    line-height: 1.3;
+  }
+
+  [data-slot="poster-claims"] {
+    display: grid;
+    gap: 0.3em;
+    margin-top: var(--poster-space-xl);
+    font-size: var(--poster-large);
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+  }
+
+  [data-slot="poster-claims"] [data-slot="poster-text-link"] {
+    text-underline-offset: 0.12em;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (max-width: 900px) {
+    [data-slot="poster-steps"][data-layout="four"],
+    [data-slot="poster-stats"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  /* A mock-up of a product's screen */
+  [data-slot="poster-screen"] {
+    margin-top: var(--poster-space-xl);
+    border: 1px solid var(--poster-ink);
+    background: var(--poster-paper);
+    color: var(--poster-ink);
+    font-size: 16px;
+    line-height: 1.35;
+  }
+
+  [data-slot="poster-screen-bar"] {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 14px clamp(16px, 1.7vw, 24px);
+    border-bottom: 1px solid var(--poster-ink);
+    font-size: 14px;
+  }
+
+  [data-slot="poster-screen-tabs"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    padding: 12px clamp(16px, 1.7vw, 24px);
+    border-bottom: 1px solid var(--poster-ink);
+    font-size: 14px;
+  }
+
+  [data-slot="poster-screen-tabs"] b {
+    font-weight: 700;
+    box-shadow: 0 13px 0 -11px var(--poster-ink);
+  }
+
+  [data-slot="poster-screen-split"] {
+    display: grid;
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  }
+
+  [data-slot="poster-screen-split"][data-ratio="4:8"] {
+    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
+  }
+
+  [data-slot="poster-screen-split"] > * {
+    min-width: 0;
+    padding: clamp(16px, 2.2vw, 32px);
+  }
+
+  [data-slot="poster-screen-split"] > * + * {
+    border-left: 1px solid var(--poster-ink);
+  }
+
+  [data-slot="poster-screen-split"] > [data-slot="poster-screen-queue"] {
+    padding: 0;
+  }
+
+  [data-slot="poster-screen-message"] {
+    padding: 12px 14px;
+    background: var(--poster-wash);
+  }
+
+  [data-slot="poster-screen-message"] small {
+    display: block;
+    margin-bottom: 4px;
+    color: var(--poster-mute);
+    font-size: 14px;
+  }
+
+  [data-slot="poster-screen-message"][data-variant="asked"] {
+    margin-top: 14px;
+    border: 1px solid var(--poster-ink);
+    background: none;
+  }
+
+  :is([data-slot="poster-screen-trace"], [data-slot="poster-screen-evidence"]) {
+    display: grid;
+    gap: 6px;
+  }
+
+  [data-slot="poster-screen-trace"] {
+    margin-top: 14px;
+    font-size: 14px;
+  }
+
+  [data-slot="poster-screen-evidence"] {
+    margin-top: 16px;
+  }
+
+  :is([data-slot="poster-screen-trace"], [data-slot="poster-screen-evidence"]) li {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  :is([data-slot="poster-screen-trace"], [data-slot="poster-screen-evidence"]) li::before {
+    content: "";
+    flex: none;
+    width: 9px;
+    height: 9px;
+    background: var(--poster-ink);
+  }
+
+  [data-slot="poster-screen-evidence"] li::before {
+    background: var(--poster-primary);
+  }
+
+  [data-slot="poster-screen-lead"] {
+    margin-bottom: 12px;
+    font-size: 20px;
+  }
+
+  [data-slot="poster-screen-person"] {
+    display: grid;
+    grid-template-columns: 36px minmax(0, 1fr) auto;
+    gap: 12px;
+    padding-block: 12px;
+    border-top: 1px solid var(--poster-ink);
+  }
+
+  [data-slot="poster-initials"] {
+    display: grid;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    background: var(--poster-ink);
+    color: var(--poster-paper);
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  [data-slot="poster-screen-person"] b {
+    display: block;
+    font-weight: 600;
+  }
+
+  [data-slot="poster-screen-person"] :is(span:not([data-slot]), em) {
+    display: block;
+    font-size: 14px;
+    font-style: normal;
+  }
+
+  [data-slot="poster-screen-person"] em {
+    color: var(--poster-mute);
+  }
+
+  [data-slot="poster-grade"] {
+    display: inline-grid;
+    flex: none;
+    width: 26px;
+    height: 26px;
+    place-items: center;
+    border: 1px solid var(--poster-ink);
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  [data-slot="poster-grade"][data-top] {
+    border-color: var(--poster-primary);
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+  }
+
+  [data-slot="poster-screen-queue-item"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0 12px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--poster-ink);
+  }
+
+  [data-slot="poster-screen-queue-item"][data-selected] {
+    background: var(--poster-wash);
+  }
+
+  [data-slot="poster-screen-queue-item"] b {
+    font-weight: 600;
+  }
+
+  [data-slot="poster-screen-queue-item"] span:not([data-slot]) {
+    grid-column: 1;
+    color: var(--poster-mute);
+    font-size: 14px;
+  }
+
+  [data-slot="poster-screen-queue-item"] [data-slot="poster-grade"] {
+    grid-column: 2;
+    grid-row: 1 / 3;
+  }
+
+  [data-slot="poster-screen-detail"] h3 {
+    margin: 0;
+    font-weight: 500;
+    font-size: var(--poster-mid);
+    letter-spacing: -0.02em;
+  }
+
+  [data-slot="poster-screen-detail-line"] {
+    margin-top: 6px;
+    color: var(--poster-mute);
+  }
+
+  [data-slot="poster-screen-decide"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 24px;
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  [data-slot="poster-screen-decide"] b {
+    padding: 11px 18px;
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+    font-weight: 700;
+  }
+
+  [data-slot="poster-screen-decide"] span {
+    padding: 10px 16px;
+    border: 1px solid var(--poster-ink);
+  }
+
+  [data-slot="poster-screen-row"] {
+    display: grid;
+    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto 96px;
+    align-items: center;
+    gap: 14px;
+    padding: 14px clamp(16px, 1.7vw, 24px);
+    border-bottom: 1px solid var(--poster-ink);
+  }
+
+  [data-slot="poster-screen-row"]:last-child {
+    border-bottom: 0;
+  }
+
+  [data-slot="poster-screen-row"] b {
+    font-weight: 600;
+  }
+
+  [data-slot="poster-screen-row"] span:not([data-slot]) {
+    font-size: 14px;
+  }
+
+  [data-slot="poster-screen-row"] em {
+    padding: 9px 8px;
+    background: var(--poster-primary);
+    color: var(--poster-on-primary);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    text-align: center;
+  }
+
+  [data-slot="poster-screen-row"] em[data-needs-you] {
+    padding: 8px;
+    border: 1px solid var(--poster-ink);
+    background: none;
+    color: var(--poster-ink);
+  }
+
+  [data-slot="poster-mock-note"] {
+    margin-top: 12px;
+    color: color-mix(in srgb, currentColor 62%, transparent);
+    font-size: 14px;
+  }
+
+  @media (max-width: 760px) {
+    [data-slot="poster-screen-split"],
+    [data-slot="poster-screen-split"][data-ratio="4:8"] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    [data-slot="poster-screen-split"] > * + * {
+      border-left: 0;
+      border-top: 1px solid var(--poster-ink);
+    }
+  }
+
+  @media (max-width: 640px) {
+    [data-slot="poster-screen-row"] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    [data-slot="poster-screen-row"] span:not([data-slot]) {
+      grid-column: 1 / -1;
+      grid-row: 2;
+    }
+
+    [data-slot="poster-screen-row"] em {
+      grid-column: 1 / -1;
+      grid-row: 3;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="poster-shell"] *,
+    [data-slot="poster-shell"] *::before,
+    [data-slot="poster-shell"] *::after {
+      transition: none !important;
+    }
+  }
+}