/* Bless Events help. Light theme, Geist, zinc neutrals, one green accent. */
:root {
  color-scheme: light;
  --ink: #09090b;          /* headings */
  --text: #3f3f46;         /* body */
  --muted: #71717a;        /* secondary */
  --line: rgb(9 9 11 / 0.08);
  --line-strong: rgb(9 9 11 / 0.14);
  --well: #fafafa;
  --well-strong: #f4f4f5;
  --brand: #355237;
  --brand-soft: #eef4ee;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --top: 68px;
  --gutter: 20px;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top) + 24px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--text);
  font: 400 16px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 0.9); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.top-inner { display: flex; align-items: center; gap: 24px; height: var(--top); max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.brand { flex-shrink: 0; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand span { font-weight: 400; color: var(--muted); }
.tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; }
.tabs a { padding: 6px 10px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); background: var(--well-strong); }
.top-end { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Search */
.search { position: relative; }
.search input {
  width: 240px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--well-strong); color: var(--ink); font: inherit; font-size: 15px; line-height: 1;
  box-shadow: inset 0 0 0 1px transparent;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--brand-soft); }
.search-results {
  position: absolute; right: 0; top: 44px; z-index: 30; width: min(420px, calc(100vw - 2 * var(--gutter)));
  max-height: min(60vh, 440px); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgb(9 9 11 / 0.12);
}
.search-results a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; line-height: 1.4; }
.search-results a:hover, .search-results a.is-active { background: var(--well-strong); }
.search-results strong { display: block; font-weight: 500; color: var(--ink); font-size: 15px; }
.search-results span { display: block; color: var(--muted); font-size: 13px; }
.search-results .none { padding: 10px; color: var(--muted); font-size: 15px; }

/* Mobile menu: a disclosure, no script needed to open it */
.menu { display: none; }
.menu summary { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 1px; }
.menu summary span { position: relative; }
.menu summary span::before, .menu summary span::after { content: ""; position: absolute; left: 0; }
.menu summary span::before { top: -6px; } .menu summary span::after { top: 6px; }
.menu[open] summary { background: var(--well-strong); }
.menu-panel { position: absolute; top: 100%; left: 0; right: 0; height: calc(100dvh - var(--top)); overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--gutter) 64px; background: #fff; border-top: 1px solid var(--line); }
html.menu-open { overflow: hidden; }
.menu-panel .search { margin-bottom: 24px; }
.menu-panel .search input { width: 100%; height: 44px; font-size: 16px; }
.menu-panel .search-results { position: static; width: auto; max-height: none; margin-top: 8px; box-shadow: 0 0 0 1px var(--line); }

/* Page grid */
.page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
.side, .toc { display: none; }
main { min-width: 0; max-width: 736px; padding: 40px 0 0; }

/* Sidebar nav (also used inside the mobile menu) */
.nav-group + .nav-group { margin-top: 28px; }
.nav-head { display: block; padding: 4px 12px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav-group ul { margin: 4px 0 0; padding: 0; list-style: none; }
.nav-group li a { display: block; padding: 6px 12px; border-radius: 8px; font-size: 15px; line-height: 1.4; color: var(--muted); text-decoration: none; }
.nav-group li a:hover, .nav-head:hover { color: var(--ink); }
.nav-group li a[aria-current] { color: var(--ink); background: var(--well-strong); }
.menu-panel .nav-group li a, .menu-panel .nav-head { font-size: 17px; padding-block: 10px; }
.menu-panel .nav-back { font-size: 15px; padding-block: 6px; }
.menu-panel .nav-area { font-size: 22px; }

/* Article head */
.crumbs { display: flex; gap: 8px; margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.crumbs span { color: var(--line-strong); }
h1 { margin: 0; font-size: clamp(30px, 5vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.lead { margin: 14px 0 0; max-width: 56ch; font-size: 19px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.draft { margin: 24px 0 0; padding: 10px 14px; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: 14px; line-height: 1.5; }
.draft strong { font-weight: 600; }

/* Article body: raw Markdown output, so elements are styled by tag */
.prose { margin-top: 8px; }
.prose > * + * { margin-top: 20px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose figure, .prose table { margin-bottom: 0; }
.prose p, .prose li { text-wrap: pretty; }
.prose h2 { margin: 64px 0 0; padding-top: 32px; border-top: 1px solid var(--line); font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.prose > h2:first-child { margin-top: 32px; }
.prose h3 { margin: 44px 0 0; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose h2, .prose h3 { position: relative; }
.prose .anchor { position: absolute; right: 100%; padding-right: 8px; color: var(--line-strong); text-decoration: none; font-weight: 400; opacity: 0; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus { opacity: 1; }
.prose .anchor:hover { color: var(--brand); }
.prose a { color: var(--brand); font-weight: 500; text-decoration: underline; text-decoration-color: rgb(53 82 55 / 0.3); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose ul { padding-left: 20px; }
.prose ul li::marker { color: var(--line-strong); }
.prose li + li { margin-top: 8px; }
.prose code { font: 500 0.875em var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--well-strong); color: var(--ink); }
/* Long field names (such as Salesforce API names) wrap in a table cell instead of running off a phone screen. */
.updated { margin: 32px 0 0; font-size: 14px; color: var(--muted); }
.prose td code { overflow-wrap: anywhere; word-break: break-word; }

/* Numbered steps */
.prose ol { padding: 0; list-style: none; counter-reset: step; }
/* A list that a screenshot cut in two keeps counting (see _plugins/list_start.rb). */
.prose ol[start="2"] { counter-reset: step 1; }
.prose ol[start="3"] { counter-reset: step 2; }
.prose ol[start="4"] { counter-reset: step 3; }
.prose ol[start="5"] { counter-reset: step 4; }
.prose ol[start="6"] { counter-reset: step 5; }
.prose ol[start="7"] { counter-reset: step 6; }
.prose ol[start="8"] { counter-reset: step 7; }
.prose ol[start="9"] { counter-reset: step 8; }
.prose ol[start="10"] { counter-reset: step 9; }
.prose ol[start="11"] { counter-reset: step 10; }
.prose ol[start="12"] { counter-reset: step 11; }
.prose ol[start="13"] { counter-reset: step 12; }
.prose ol[start="14"] { counter-reset: step 13; }
.prose ol[start="15"] { counter-reset: step 14; }
.prose ol > li { position: relative; padding-left: 44px; counter-increment: step; }
.prose ol > li + li { margin-top: 12px; }
.prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font: 600 13px/26px var(--sans); text-align: center; font-variant-numeric: tabular-nums;
}

/* Notes */
.prose blockquote { margin-left: 0; margin-right: 0; padding: 14px 18px; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 15px; line-height: 1.6; }
.prose blockquote p { margin: 0; }

/* Screenshots sit on a recessed stage */
.shot { margin-left: 0; margin-right: 0; padding: clamp(12px, 3vw, 28px); border-radius: 16px; background: var(--well-strong); }
.shot a { display: block; margin: 0 auto; cursor: zoom-in; }
.shot img { display: block; width: 100%; height: auto; background: #fff; border-radius: min(1.2vw, 10px); outline: 1px solid rgb(9 9 11 / 0.08); outline-offset: -1px; box-shadow: 0 1px 2px rgb(9 9 11 / 0.04), 0 12px 32px -8px rgb(9 9 11 / 0.14); }
.shot-t a { max-width: 520px; }
.shot-p a { max-width: 272px; }
.shot-p img { border-radius: 24px; }

/* Tables: horizontal rules only, scroll sideways when they do not fit */
.prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 1.5; -webkit-overflow-scrolling: touch; }
.prose th, .prose td { padding: 12px 20px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 132px; }
.prose th { font-weight: 500; color: var(--muted); white-space: nowrap; font-size: 14px; }
.prose td:first-child { min-width: 148px; color: var(--ink); }
.prose td strong { font-weight: 600; }

/* Entry cards on the home and guide pages. The whole card is the link. */
.prose .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; margin-top: 32px; padding: 0; list-style: none; }
.prose .cards li { position: relative; margin: 0; padding: 18px 20px 20px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.prose .cards a { color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.prose .cards a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.prose .cards a::after { content: "→"; margin-left: 6px; color: var(--muted); font-weight: 400; }
.prose .cards li:hover { background: var(--well); box-shadow: inset 0 0 0 1px var(--brand); }
.prose .cards li:hover a::after { color: var(--brand); }
.prose .cards span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 1.5; }
/* Areas that are not written yet: flat, and not a link */
.prose .cards li.soon, .prose .cards li.soon:hover { background: var(--well); box-shadow: none; }
.prose .cards li.soon b { color: var(--muted); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.prose .cards li.soon em { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--well-strong); color: var(--muted); font-size: 12px; font-style: normal; font-weight: 500; vertical-align: 2px; }

/* Previous and next */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 72px; }
.pager a { display: block; padding: 14px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-weight: 500; line-height: 1.4; text-decoration: none; }
.pager a:hover { background: var(--well); }
.pager a span { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.pager-next { text-align: right; grid-column: 2; }

.foot { margin-top: 56px; padding: 24px 0 64px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot p { margin: 0; }
.foot a { margin-left: 20px; text-decoration: none; }
.foot p:last-child a:first-child { margin-left: 0; }
.foot a:hover { color: var(--ink); }

/* Tablet and up: the sidebar appears, the menu button goes */
@media (max-width: 1023px) {
  .tabs, .top-end > .search { display: none; }
  .menu { display: block; }
  .prose .anchor { display: none; }
}
@media (min-width: 1024px) {
  .page { grid-template-columns: 232px minmax(0, 1fr); }
  .side { display: block; position: sticky; top: var(--top); align-self: start; max-height: calc(100dvh - var(--top)); overflow-y: auto; padding: 40px 0 40px; margin-left: -12px; }
  main { padding-top: 48px; }
}
/* Header areas. The eight area tabs need about 725px. From 1200 to 1439px the
   tabs tighten and What's new leaves the header (it stays in the footer).
   Below 1200px the menu button holds the areas, and the sidebar stays. */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1439px) {
  .top-inner { gap: 16px; }
  .tabs a { padding: 6px 8px; }
  .top-link { display: none; }
  .top-end > .search input { width: 180px; }
}
@media (max-width: 1199px) {
  .tabs { display: none; }
  .menu { display: block; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .menu-panel .search { display: none; }
}
/* Wide: the "On this page" rail */
@media (min-width: 1280px) {
  .page { grid-template-columns: 232px minmax(0, 736px) minmax(0, 1fr); }
  .toc:not([hidden]) { display: block; position: sticky; top: var(--top); align-self: start; max-height: calc(100dvh - var(--top)); overflow-y: auto; padding: 56px 0 40px; justify-self: end; width: 208px; }
  .toc p { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
  .toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
  .toc a { display: block; margin-left: -1px; padding: 4px 0 4px 14px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; }
  .toc a.sub { padding-left: 26px; }
  .toc a:hover { color: var(--ink); }
  .toc a.is-active { color: var(--ink); border-left-color: var(--brand); }
}
@media (max-width: 479px) {
  .pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; text-align: left; }
}
@media print {
  .top, .side, .toc, .pager, .draft { display: none; }
  .shot { background: none; padding: 0; break-inside: avoid; }
}

/* Area navigation */
.nav-back { display: block; padding: 0 12px; font-size: 13px; color: var(--muted); text-decoration: none; }
.nav-back::before { content: "← "; }
.nav-back:hover { color: var(--ink); }
.nav-area { display: block; margin: 6px 0 24px; padding: 0 12px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
p.nav-head { margin: 0; }
.nav-soon { display: block; padding: 6px 12px; font-size: 15px; line-height: 1.4; color: #a1a1aa; }
.menu-panel .nav-soon { font-size: 17px; padding-block: 9px; }
.crumbs a + span { margin: 0; }

/* Logo, then "Help docs" */
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { display: block; height: 38px; width: auto; }
.brand span { padding-left: 12px; border-left: 1px solid var(--line-strong); font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--muted); }

/* Home page */
.hero-search { margin-top: 28px; }
.hero-search .search input { width: 100%; height: 52px; padding: 0 18px; border-radius: 12px; font-size: 17px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(9 9 11 / 0.04); }
.hero-search .search input:focus { box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-soft); }
.hero-search .search-results { left: 0; right: 0; top: 60px; width: auto; }
.prose .label { margin-top: 56px; font-size: 14px; font-weight: 600; color: var(--ink); }
.prose .label + * { margin-top: 12px; }

/* The featured area: one bordered panel, guides listed inside it */
.prose .feature { border: 1px solid var(--line-strong); border-radius: 16px; overflow: hidden; }
.prose .feature-head { padding: 24px 24px 22px; }
.prose .feature-head h2 { margin: 0; padding: 0; border: 0; font-size: 24px; }
.prose .feature-head h2 a { color: var(--ink); font-weight: inherit; text-decoration: none; }
.prose .feature-head p { margin: 6px 0 0; max-width: 52ch; color: var(--muted); }
.prose .feature-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); background: var(--well); }
.prose .feature-links li { position: relative; margin: 0; padding: 18px 24px 20px; }
.prose .feature-links li + li { border-left: 1px solid var(--line); }
.prose .feature-links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.prose .feature-links a::before { content: ""; position: absolute; inset: 0; }
.prose .feature-links a::after { content: "→"; margin-left: 6px; color: var(--muted); font-weight: 400; }
.prose .feature-links li:hover { background: #fff; }
.prose .feature-links li:hover a::after { color: var(--brand); }
.prose .feature-links span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.prose .feature-foot { margin: 0; padding: 14px 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }

/* Plain link lists: popular tasks, and areas still to come */
.prose .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding: 0; list-style: none; }
.prose .links li { margin: 0; border-top: 1px solid var(--line); }
.prose .links a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; color: var(--ink); font-weight: 500; text-decoration: none; }
.prose .links a small { color: var(--muted); font-size: 14px; font-weight: 400; white-space: nowrap; }
.prose .links a:hover { color: var(--brand); }
.prose .soon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding: 0; list-style: none; }
.prose .soon-list li { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--muted); }
.prose .soon-list b { display: block; font-weight: 500; color: var(--text); }
@media (max-width: 639px) {
  .prose .feature-links, .prose .links, .prose .soon-list { grid-template-columns: minmax(0, 1fr); }
  .prose .feature-links li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* Checklists */
.prose ul.task-list { padding: 0; list-style: none; }
.prose ul.task-list li { position: relative; padding-left: 32px; }
.prose ul.task-list input { position: absolute; left: 0; top: 5px; width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }

/* Header link */
.top-link { padding: 6px 10px; border-radius: 8px; font-size: 15px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.top-link:hover, .top-link[aria-current] { color: var(--ink); }
@media (max-width: 1023px) { .top-link { display: none; } }

/* Was this page helpful? */
.helpful { margin-top: 72px; padding: 20px 24px; border-radius: 14px; background: var(--well); }
.helpful + .pager { margin-top: 24px; }
.helpful p { margin: 0; }
.helpful-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.helpful-ask p, .helpful-more > p:first-child { font-weight: 500; color: var(--ink); }
.helpful-buttons { display: flex; gap: 8px; }
.helpful button { height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }
.helpful button:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.helpful-more { display: grid; gap: 10px; }
.helpful-more[hidden] { display: none; }
.helpful-more label { display: flex; gap: 10px; align-items: baseline; }
.helpful-more input { accent-color: var(--brand); }
.helpful-more textarea { width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font: inherit; resize: vertical; }
.helpful-more textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 3px var(--brand-soft); }
.helpful-more .helpful-note { font-size: 14px; color: var(--muted); }
.helpful-more button[type="submit"] { justify-self: start; background: var(--brand); box-shadow: none; color: #fff; }

/* What's new */
.prose .when { margin-top: 48px; font: 500 13px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.prose .when + h2 { margin-top: 6px; padding-top: 0; border-top: 0; }
@media print { .helpful, .foot { display: none; } }

/* Full-size screenshot overlay */
.zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: clamp(16px, 4vw, 48px); border: 0; background: rgb(9 9 11 / 0.8); cursor: zoom-out; }
.zoom[open] { display: flex; align-items: center; justify-content: center; }
.zoom::backdrop { background: transparent; }
.zoom img { display: block; max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; box-shadow: 0 24px 64px rgb(0 0 0 / 0.4); }
.zoom button { position: fixed; top: 16px; right: 16px; height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: #fff; color: var(--ink); font: 500 15px var(--sans); cursor: pointer; }

/* The night at a glance: one block per phase, who does what inside it */
.prose .timeline { margin-top: 24px; border-top: 1px solid var(--line); }
.prose .timeline section { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.prose .timeline h3 { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.prose .timeline h3 span { display: block; font: 500 12px/1.6 var(--mono); letter-spacing: 0.02em; color: var(--muted); }
.prose .timeline dl { display: grid; gap: 8px; margin: 0; }
.prose .timeline dl div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 2px 16px; }
.prose .timeline dt { font-weight: 500; color: var(--ink); font-size: 15px; line-height: 1.75; }
.prose .timeline dd { margin: 0; font-size: 15px; line-height: 1.75; }
.prose .timeline .anchor { display: none; }
@media (max-width: 639px) {
  .prose .timeline section { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .prose .timeline dl div { grid-template-columns: minmax(0, 1fr); }
  .prose .timeline dt { line-height: 1.4; }
  .prose .timeline dd { font-size: 16px; }
}

/* Phone menu: line the links up with the search box, and end with What's new */
.menu-panel nav { margin: 0 -12px; }
.menu-foot { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.menu-foot a { font-size: 17px; color: var(--muted); text-decoration: none; }

/* Feedback faces */
.helpful button.face { width: 52px; height: 52px; padding: 0; border-radius: 50%; font-size: 28px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: transform 0.12s ease; }
.helpful button.face:hover { transform: scale(1.12); }