/* Direction D v3: Linear's design language on #FFFFFF, in Candor's voice.
   Every value traces to directions/linear-research/LINEAR-SPEC.md (computed from linear.app, 2 Nov 2026),
   mapped to white. Iowan Old Style, the candor.inc homepage serif, sets the page and card titles; Inter sets the rest.
   Monochrome: shape carries meaning (filled check, half circle, cross, dash). No vertical separators: tables read by alignment,
   with one hairline under the column headings. */
@font-face { font-family: "Inter Variable"; src: url(InterVariable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #FFFFFF;
  --t1: #0f1011;   /* titles, links, marks        (Linear #f7f8f8) */
  --t2: #3c3f46;   /* body, check icons           (Linear #d0d6e0) */
  --t3: #6e727a;   /* tabs, byline, crumbs        (Linear #8a8f98) */
  --t4: #a0a3a9;   /* meta, crosses, underlines   (Linear #62666d) */
  --line: #ececee; /* column dividers             (Linear #202122) */
  --line-2: #e1e2e5;
  --sans: "Inter Variable", Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --col: 624px; --wide: 976px; --aside: #e1e2e5;
  --title-size: 58px; --hub-title: 64px; --card-title: 23px; --body-size: 17px; --body-lh: 1.6; --hero-gap: 48px; --row-pad: 12px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--t1); font: 400 15px/1.6 var(--sans); font-feature-settings: "cv01", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; border-radius: 3px; }

/* header */
.site { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); padding: 0 32px; }
.pill { display: flex; align-items: center; gap: 28px; max-width: 1104px; height: 64px; margin: 0 auto; }
.mark { font: 400 23px/1 var(--serif); letter-spacing: -.02em; text-decoration: none; margin-right: auto; }
.site-nav { display: flex; gap: 26px; } .site-nav a { font-size: 14px; color: var(--t3); text-decoration: none; transition: color .1s; }
.site-nav a[aria-current], .site-nav a:hover { color: var(--t1); }
.join { display: inline-block; padding: 7px 15px; border-radius: 999px; background: var(--t1); color: var(--bg); font-size: 14px; font-weight: 510; text-decoration: none; transition: opacity .1s; }
.join:hover { opacity: .86; } .join:active { transform: translateY(1px); }

/* article: crumb, title, art, byline, column (Linear's order) */
.post { padding: 0 32px 128px; }
.title-block { max-width: 940px; margin: 0 auto; padding: 112px 0 0; text-align: center; }
.crumbs { margin: 0 0 18px; font-size: 13px; font-weight: 510; letter-spacing: -.01em; color: var(--t3); } .crumbs a { text-decoration: none; transition: color .1s; } .crumbs a:hover { color: var(--t1); }
.crumbs span { margin: 0 8px; color: var(--t4); }
.title-block h1 { margin: 0; font: 400 clamp(36px, 4.8vw, var(--title-size))/1.04 var(--serif); letter-spacing: -.032em; text-wrap: balance; }
.hero { max-width: var(--wide); margin: var(--hero-gap) auto 0; }
.hero .art { display: block; width: 100%; height: auto; }
.hero .art-phone { display: none; }  /* phones get the drawing cropped to its own bounds (design.phone_box) */
.hero figcaption { max-width: var(--col); margin: 4px auto 0; font-size: 13px; line-height: 1.55; color: var(--t3); text-align: center; text-wrap: balance; }
.hero figcaption a { color: var(--t2); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.byline { margin: var(--hero-gap) 0 0; text-align: center; font-size: 15px; letter-spacing: -.011em; color: var(--t3); } .byline span { margin: 0 10px; color: var(--t4); }
.read { max-width: var(--col); margin: 64px auto 0; font: 400 var(--body-size)/var(--body-lh) var(--sans); color: var(--t2); }
.read p { margin: 0 0 20px; } .read p, .read li { text-wrap: pretty; }
.read .lede { color: var(--t1); }
.read h2 { margin: 56px 0 12px; font: 590 24px/1.33 var(--sans); letter-spacing: -.012em; color: var(--t1); text-wrap: balance; }
.read h3 { margin: 32px 0 8px; font: 590 17px/1.45 var(--sans); letter-spacing: -.008em; color: var(--t1); }
.read ul, .read ol { padding-left: 24px; margin: 12px 0 20px; } .read li { margin: 6px 0; }
.read strong { color: var(--t1); font-weight: 590; }
.read a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--t4); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .25s, text-decoration-color .25s; }
.read a:hover { text-decoration-color: var(--t1); }
.cite { font-size: 11px; font-weight: 510; vertical-align: super; line-height: 0; color: var(--t4) !important; text-decoration: none !important; margin-left: 1px; }
.cite:hover { color: var(--t1) !important; }
sup.src { margin-left: 4px; font-size: 11px; font-weight: 510; line-height: 0; color: var(--t4); } sup.src a { color: inherit !important; text-decoration: none !important; } sup.src a:hover { color: var(--t1) !important; } sup.src a + a::before { content: ""; }
.short { margin: 8px 0 44px; padding-left: 20px; border-left: 1px solid var(--aside); }
.short .label { margin: 0 0 6px; font-size: 13px; font-weight: 590; color: var(--t1); }
.short ul { margin: 0; padding-left: 18px; } .short li { margin: 7px 0; }
.disclosure { font-size: 14px; line-height: 1.55; color: var(--t3); }

/* Type scale (locked): page title 58 serif / section 24 sans 590 / sub-heading 17 sans 590 / body 17 / small 13-14.
   Serif only for page and card titles. Text and headings always sit in the 624px column; only tables break out (Linear). */
.wide-section > .wide-only > .matrix-wrap, .wide-section > .matrix-wrap { width: min(var(--wide), calc(100vw - 64px)); position: relative; left: 50%; transform: translateX(-50%); }
.wide-section > .wide-only > .notes { max-width: var(--col); }
.verdict { margin: 56px 0 48px; } .verdict h2 { margin-top: 0; }
.choose-lede { margin: 0 0 8px !important; color: var(--t3); font-size: 15px; }
.choose { display: grid; gap: 0; }
.pick { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 0 24px; padding: 18px 0; }
.pick + .pick { border-top: 1px solid var(--line); }
.pick h3 { margin: 0; font: 590 17px/1.6 var(--sans); letter-spacing: -.008em; color: var(--t1); }
.pick ul { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.6; color: var(--t2); } .pick li { position: relative; padding-left: 16px; } .pick li + li { margin-top: 6px; }
.pick li::before { content: ""; position: absolute; left: 1px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--t4); }

/* the matrix: no row rules, column dividers, 44px rows, marks with a short qualifier (Linear pricing) */
.matrix-wrap { overflow-x: auto; margin: 28px 0 8px; }
.lx { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; color: var(--t1); }
.lx caption { caption-side: top; text-align: left; padding: 0 0 24px; font-size: 14px; color: var(--t3); }
.lx th, .lx td { padding: var(--row-pad) 24px; text-align: left; vertical-align: top; background: var(--bg); }
.lx td { border: 0; }
.lx thead th { position: sticky; top: 0; z-index: 2; padding-top: 0; padding-bottom: 16px; font-size: 15px; font-weight: 510; color: var(--t1); }
.lx thead th { border-bottom: 1px solid var(--line); }
.lx tbody th { padding-left: 0; width: 26%; font-weight: 400; color: var(--t1); }
.lx tbody tr:first-child > * { padding-top: 16px; }
.lx tr.grp th { padding: 40px 0 10px; font: 590 20px/1.3 var(--sans); letter-spacing: -.012em; border: 0; }
.lx tbody tr.grp:first-child th { padding-top: 8px; }
.lx tr.grp + tr > * { padding-top: 6px; }
.m { display: inline-flex; align-items: flex-start; gap: 10px; }
.i { flex: none; display: inline-flex; margin-top: 3px; }
.i svg { width: 16px; height: 16px; fill: currentColor; }
.i-yes { color: var(--t2); } .i-claim, .i-partly { color: var(--t2); } .i-none { color: var(--t3); } .i-no { color: var(--t4); }
.q { color: var(--t2); }
.key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 28px 0 0 !important; font-size: 13px; color: var(--t3); }
.k { display: inline-flex; align-items: center; gap: 7px; } .k svg { width: 14px; height: 14px; fill: currentColor; }
.k-yes, .k-claim { color: var(--t2); } .k-none { color: var(--t3); } .k-no { color: var(--t4); } .k span, .k { white-space: nowrap; }
.k { color: var(--t3); } .k svg { color: var(--t2); } .k-none svg { color: var(--t3); } .k-no svg { color: var(--t4); }
.notes { list-style: none; padding: 0 !important; margin: 40px 0 0 !important; max-width: var(--col); font-size: 15px; line-height: 1.55; }
.notes li { margin: 0 0 12px; }

/* generic tables inside the article (e.g. "Our data"): same language, no row rules */
.read .table-wrap { overflow-x: auto; margin: 28px 0 36px; }
.read .table-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; line-height: 1.5; color: var(--t1); }
.read .table-wrap caption { caption-side: top; text-align: left; padding: 0 0 16px; font-size: 13.5px; color: var(--t3); }
.read .table-wrap th, .read .table-wrap td { padding: 10px 18px; text-align: left; vertical-align: top; }
.read .table-wrap th:first-child, .read .table-wrap td:first-child { padding-left: 0; }
.read .table-wrap td { color: var(--t2); }
.read .table-wrap thead th { font-weight: 510; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.read .table-wrap tbody th { font-weight: 400; }
.read td[style*="right"], .read th[style*="right"], .val { font-variant-numeric: tabular-nums; }

/* wide generic tables (4+ columns) break out like the matrix */
.read .table-wrap.wide-table { width: min(var(--wide), calc(100vw - 64px)); position: relative; left: 50%; transform: translateX(-50%); }
.read .wide-cards { width: min(var(--wide), calc(100vw - 64px)); position: relative; left: 50%; transform: translateX(-50%); }  /* a ranked hub's by-need cards */
.read .wide-cards .grid { margin-top: 32px; } .read .wide-cards .band { margin-top: 72px; }
.read .wide-cards .card-title, .read .wide-cards .card-dek { margin-bottom: 0; } .read .wide-cards a.card { text-decoration: none; color: inherit; }
/* shortlist entries and template sheets */
#shortlist h3 { margin: 40px 0 8px; font: 590 19px/1.4 var(--sans); letter-spacing: -.012em; }
.sheet { position: relative; margin: 24px 0 32px; }
.sheet pre { margin: 0; padding: 22px 24px; max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; font: 400 13.5px/1.65 ui-monospace, "SF Mono", Menlo, monospace; color: var(--t2); white-space: pre-wrap; }
.copy { position: absolute; top: 12px; right: 12px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); font: 510 12.5px/1.2 var(--sans); color: var(--t2); cursor: pointer; transition: border-color .15s, color .15s; }
.copy:hover { border-color: var(--t4); color: var(--t1); }
/* phone-only HTML figure (the SVG's labels would be ~5px on a phone) */
.phone-fig { display: none; list-style: none; margin: 0; padding: 0; }
.phone-alt { display: none; }
.phone-route { list-style: none; margin: 0 auto; padding: 0; max-width: 260px; }
.phone-route li { position: relative; padding: 12px 16px; margin-bottom: 28px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 15px; color: var(--t2); text-align: center; }
.phone-route li:first-child, .phone-route li:last-child { border-color: var(--t1); color: var(--t1); }
.phone-route li:last-child { margin-bottom: 0; }
.phone-route li:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -24px; height: 20px; border-left: 1px dashed var(--t4); }
.phone-matrix table { width: 100%; border-collapse: collapse; font-size: 13px; }
.phone-matrix th { font-weight: 510; color: var(--t1); padding: 0 4px 10px; text-align: center; }
.phone-matrix tbody th { text-align: left; font-weight: 400; color: var(--t2); padding: 8px 8px 8px 0; border-top: 1px solid var(--line); }
.phone-matrix td { text-align: center; padding: 8px 4px; border-top: 1px solid var(--line); }
.phone-matrix td svg { width: 16px; height: 16px; fill: currentColor; vertical-align: middle; }
.phone-matrix .k-yes, .phone-matrix .k-claim { color: var(--t1); } .phone-matrix .k-none { color: var(--t2); } .phone-matrix .k-no { color: var(--t4); }
.phone-matrix .key { margin-top: 14px !important; }
.phone-fig li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.phone-fig .who { color: var(--t2); } .phone-fig .val { font-weight: 590; color: var(--t1); font-variant-numeric: tabular-nums; }
.phone-fig .dots { grid-column: 1 / -1; display: flex; gap: 4px; } .phone-fig i { flex: 1; max-width: 22px; aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--t1); } .phone-fig i.on { background: var(--t1); }

/* limits, questions, sources */
.limits { margin-top: 64px; padding: 4px 0 4px 20px; border-left: 1px solid var(--aside); } .limits h2 { margin-top: 0; font-size: 17px; }
.faq { margin-top: 64px; } .faq h2 { margin-bottom: 8px; }
.faq details, .sources details { border-bottom: 1px solid var(--line); }
.faq summary, .sources summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 510; color: var(--t1); transition: color .1s; }
.faq summary:hover { color: var(--t2); }
.faq summary, .sources summary { align-items: center; }
.faq summary::after, .sources summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 2px; border-right: 1.5px solid var(--t3); border-bottom: 1.5px solid var(--t3); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
details[open] > summary::after { transform: translateY(2px) rotate(225deg); } summary::-webkit-details-marker { display: none; }
.faq details > div { padding: 0 0 10px; }
.sources { margin-top: 40px; font-size: 13.5px; color: var(--t3); } .sources summary { font-size: 14px; color: var(--t3); }
.sources ol { padding-left: 1.6em; } .sources li { margin: 6px 0; word-break: break-word; }
.sources a { color: var(--t3); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: color .25s; } .sources a:hover { color: var(--t1); }

/* index: Linear's Now, with Iowan titles */
.hub { max-width: 1104px; margin: 0 auto; padding: 96px 32px 128px; }
.hub-head h1 { margin: 0 0 0 -2px; font: 400 var(--hub-title)/1 var(--serif); letter-spacing: -.04em; }
.tabs { display: flex; gap: 24px; margin-top: 28px; overflow-x: auto; }
.tabs a { font-size: 15px; color: var(--t3); text-decoration: none; white-space: nowrap; transition: color .1s; } .tabs a:hover, .tabs a[aria-current] { color: var(--t1); }
.grid { list-style: none; margin: 56px -24px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 72px; }
.grid li { padding: 0 24px; }
.card { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.cover { display: block; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; transition: border-color .25s; }
.cover .art { display: block; width: 100%; height: 100%; }
.card:hover .cover { border-color: var(--line-2); }
.card-title { margin-top: 22px; font: 400 var(--card-title)/1.22 var(--serif); letter-spacing: -.018em; color: var(--t1); text-wrap: balance; transition: color .1s; }
.card:hover .card-title { color: var(--t2); }
.card-dek { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--t3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin-top: auto; padding-top: 28px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--t4); }
.card-meta .arrow { margin-left: 2px; transition: transform .25s; } .card:hover .card-meta .arrow { transform: translateX(3px); }

/* footer */
.site-foot { max-width: 1104px; margin: 0 auto; padding: 48px 32px 64px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; font-size: 14px; color: var(--t3); }
.site-foot .cta-line { margin: 0; flex: 1 1 320px; } .site-foot nav { display: flex; gap: 22px; width: 100%; } .site-foot nav a { text-decoration: none; transition: color .1s; } .site-foot nav a:hover { color: var(--t1); }

.narrow-only { display: none; }
@media (max-width: 1040px) { .wide-section > .wide-only > .matrix-wrap, .wide-section > .matrix-wrap, .read .table-wrap.wide-table { width: calc(100vw - 64px); } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }  }
@media (max-width: 760px) {
  .site { padding: 0 16px; } .site-nav { display: none; }
  .post { padding: 0 16px 88px; } .title-block { padding-top: 56px; } .title-block h1 { font-size: 34px; line-height: 1.08; letter-spacing: -.025em; }
  .hero { margin-top: 32px; } .byline { margin-top: 32px; font-size: 14px; } .read { margin-top: 40px; font-size: 15px; line-height: 1.6; letter-spacing: -.011em; }
  .read h2 { font-size: 21px; }
  .wide-section > .wide-only > .matrix-wrap, .wide-section > .matrix-wrap, .read .table-wrap.wide-table, .read .wide-cards { width: auto; left: auto; transform: none; }
  .hero .art-desk { display: none; } .hero .art-phone { display: block; max-height: 62vh; margin: 0 auto; }
  .hero svg text { display: none; } .hero:has(.phone-fig, .phone-alt) svg.art { display: none; } .phone-alt { display: block; } .phone-fig { display: block; margin-bottom: 8px; }
  .hero figcaption { text-align: left; }
  .wide-only { display: none; } .narrow-only { display: block; }
  .pick { grid-template-columns: 1fr; gap: 6px; }
  .app, .fact { padding: 20px 0 4px; border-top: 1px solid var(--line); }
  .app h3, .fact h4 { margin: 0 0 10px; font: 590 17px/1.4 var(--sans); letter-spacing: -.008em; color: var(--t1); } .fact h4 { font-size: 15px; }
  .app dl, .fact dl { margin: 0; } .app dl div, .fact dl div { display: grid; grid-template-columns: 44% 1fr; gap: 12px; padding: 7px 0; font-size: 14.5px; }
  .app dt, .fact dt { color: var(--t3); } .app dd, .fact dd { margin: 0; color: var(--t1); }
  .app > p { margin: 8px 0 12px; font-size: 14.5px; color: var(--t2); }
  .grp-h { margin: 32px 0 4px; font: 590 19px/1.3 var(--sans); color: var(--t1); }
  .hub { padding: 56px 16px 88px; } .hub-head h1 { font-size: 46px; }
  .grid { grid-template-columns: 1fr; row-gap: 48px; margin: 40px 0 0; } .grid li, .grid li:nth-child(n) { padding: 0; border: 0; }
}
/* production pages: parts the AEO pages carry beyond the approved samples, in the same language */
.cites { font-size: 11px; font-weight: 510; vertical-align: super; line-height: 0; color: var(--t4); } .cites .cite { vertical-align: baseline; font-size: inherit; }
.read :not(pre) > code { font: 400 .88em/1 ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--t1); }
.read blockquote { margin: 24px 0; padding-left: 20px; border-left: 1px solid var(--aside); }
.read .table-wrap tr.grp th { padding: 28px 0 8px; font: 590 15px/1.4 var(--sans); color: var(--t1); border: 0; }
.read .table-wrap tbody tr.grp:first-child th { padding-top: 4px; }
.read .table-wrap.wide-table table { table-layout: fixed; } .read .table-wrap.wide-table tbody th { width: 22%; }
.read .table-wrap td.na { color: var(--t3); }
.facts-table tbody th { width: 34%; color: var(--t3); }
.study-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 36px !important; font-size: 14px; }
.off { color: inherit; }
/* end of an article: related lists and previous / next (Linear's quiet lists) */
.read .document-links { margin-top: 72px; } .read .document-links + .document-links { margin-top: 40px; }
.read .document-links h2 { margin: 0 0 8px; font: 590 13px/1.4 var(--sans); letter-spacing: 0; color: var(--t3); }
.document-links ul { list-style: none; margin: 0; padding: 0; } .document-links li { margin: 0; border-top: 1px solid var(--line); }
.read .document-links a { display: block; padding: 12px 0; font-size: 15px; line-height: 1.5; text-decoration: none; transition: color .1s; } .read .document-links a:hover { color: var(--t2); }
.article-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.read .article-pagination a { display: block; padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; line-height: 1.45; color: var(--t1); text-decoration: none; transition: border-color .25s; }
.read .article-pagination a:hover { border-color: var(--t4); } .article-pagination a span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--t3); }
.article-pagination .prev { grid-column: 1; text-align: left; } .article-pagination .next { grid-column: 2; text-align: right; }
/* indexes: Linear's Now. Cards everywhere; sub-sections are bands (serif heading, three newest cards, View all) */
.hub-head .crumbs { margin: 0 0 20px; }
.hub-head h1 { font-size: clamp(40px, 6vw, var(--hub-title)); max-width: 900px; text-wrap: balance; }
.hub-lede { max-width: var(--col); margin: 28px 0 0; font-size: 17px; line-height: 1.6; color: var(--t2); text-wrap: pretty; }
.hub-lede a { color: var(--t1); text-decoration-color: var(--t4); text-underline-offset: 3px; }
.cover img.art { display: block; width: 100%; height: 100%; object-fit: cover; }
/* comparison covers (Sarthak, 3 Nov): each app's own logo in black, one versus the other, on plain white, no circle or tile.
   A logo is var(--a) * var(--u) wide (--a is the square root of its aspect ratio, from design.logos); --u scales with the box. */
.cover { container-type: inline-size; }
.logos { --u: 13cqw; display: flex; align-items: center; justify-content: center; gap: 5cqw; width: 100%; height: 100%; padding: 0 8cqw; }
.logos.n2 { --u: 13cqw; }
.logos.n3 { --u: 9.6cqw; gap: 3.6cqw; }
.logos .lg { flex: none; display: block; width: calc(var(--a) * var(--u)); height: auto; }
.logos .lg-text { width: auto; font: 400 calc(var(--u) * .5)/1 var(--serif); letter-spacing: -.02em; color: var(--t1); white-space: nowrap; }
.logos .lg-none { font: 510 calc(var(--u) * .34)/1 var(--sans); letter-spacing: -.01em; color: var(--t3); }  /* a plain name, not a logo: grey sans, never the serif Candor uses */
.logos .vs { flex: none; font-size: max(10px, 2.6cqw); font-weight: 510; letter-spacing: .08em; text-transform: uppercase; color: var(--t4); }
.hero-logos { container-type: inline-size; max-width: var(--col); margin-left: auto; margin-right: auto; padding: 56px 0 24px; }
.logos-hero { --u: 11.5cqw; height: auto; padding: 0; gap: 7cqw; }
.logos-hero.n3 { --u: 9cqw; gap: 5cqw; }
.card-dek { text-wrap: pretty; }
.band { margin-top: 120px; }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.band-head h2 { margin: 0; font: 400 40px/1.1 var(--serif); letter-spacing: -.03em; color: var(--t1); }
.view-all { flex: none; font-size: 15px; color: var(--t3); text-decoration: none; transition: color .1s; } .view-all:hover { color: var(--t1); }
.band .grid { margin-top: 40px; }
.hub .hub-rest { margin: 120px 0 0; }
@media (max-width: 760px) {
  .tabs { gap: 18px; } .tabs a { font-size: 14px; }
  .hub-lede { font-size: 15px; } .band { margin-top: 80px; } .band-head h2 { font-size: 30px; } .band .grid { margin-top: 28px; }
  .article-pagination { grid-template-columns: 1fr; } .article-pagination .next { grid-column: auto; text-align: left; }
  .hub .hub-rest { margin-top: 72px; }
}
/* share builds only (share.py): the review notice above the header */
.review-notice { padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--t3); text-align: center; } .review-notice span { margin: 0 6px; color: var(--t4); }
/* phones: a table of 4+ columns keeps readable columns and scrolls inside its own box, not the page (freeze review, 3 Nov) */
.scroll-hint, .menu { display: none; }
@media (max-width: 760px) {
  .scroll-hint { display: block; margin: 28px 0 -16px; font-size: 12.5px; color: var(--t4); }
  /* a fade on whichever edge has more columns behind it (scroll shadows: the white covers ride with the table) */
  .read .table-wrap.wide-table { background:
      linear-gradient(to right, var(--bg) 40%, rgba(255,255,255,0)) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 40%, rgba(255,255,255,0)) right / 32px 100% no-repeat local,
      linear-gradient(to right, rgba(15,16,17,.09), rgba(15,16,17,0)) left / 18px 100% no-repeat scroll,
      linear-gradient(to left, rgba(15,16,17,.09), rgba(15,16,17,0)) right / 18px 100% no-repeat scroll; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; padding: 7px 10px; font-size: 14px; color: var(--t2); border-radius: 8px; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { color: var(--t1); background: var(--line); }
  .menu .site-nav.menu-nav { display: flex; flex-direction: column; gap: 0; position: absolute; right: 0; top: calc(100% + 8px); min-width: 184px;
      padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15,16,17,.08); }
  .menu .site-nav.menu-nav a { padding: 10px 12px; font-size: 15px; color: var(--t1); border-radius: 8px; }
  .menu .site-nav.menu-nav a:hover { background: var(--line); }
}
@media (max-width: 760px) { .read .table-wrap.wide-table table { table-layout: auto; min-width: 640px; } .read .table-wrap.wide-table tbody th { width: auto; min-width: 120px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* a template's "About this template" summary (main AEO, 3 Nov): the question it answers, then who it's for, what it does,
   where it works; read by alignment, one hairline above and below, no vertical rules */
.template-top { margin: 0 0 44px; padding: 20px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tt-q { margin: 0 0 16px; font-family: var(--serif); font-size: 21px; line-height: 1.38; color: var(--t1); text-wrap: balance; }
.template-top dl { display: grid; grid-template-columns: 116px 1fr; gap: 10px 20px; margin: 0; }
.template-top dt { margin: 0; padding-top: 2px; font-size: 13px; font-weight: 590; color: var(--t3); }
.template-top dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--t2); }
@media (max-width: 640px) {
  .template-top dl { grid-template-columns: 1fr; gap: 2px; }
  .template-top dd { margin-bottom: 10px; }
}