/* Field notes (blog): index, post template and the code-built thumbnails. Sized on the 1920px Figma frame. */
:root {
  --px: calc(100vw / 1920);
  --ink: #15000b;
  --hot: #ff4da0;
  --rose: #e7b3c9;
  --blush: #fdf2f7;
  --mauve: #b99aa8;
  --grey: #5a5a5a;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero */
.blog-hero {
  position: relative;
  min-height: calc(900 * var(--px));
  padding: calc(177 * var(--px)) calc(40 * var(--px)) calc(140 * var(--px));
  display: grid;
  grid-template-columns: 1fr calc(380 * var(--px));
  grid-template-rows: auto 1fr;
  align-items: end;
  column-gap: calc(80 * var(--px));
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.blog-hero_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.blog-hero_crumbs { grid-column: 1 / -1; align-self: start; color: #ffd0e4; font-size: calc(13 * var(--px)); }
.blog-hero_crumbs a { color: inherit; text-decoration: none; }
.blog-hero_crumbs a:hover { color: #fff; }
.blog-hero_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(76 * var(--px)); line-height: 1.09; letter-spacing: -0.01em; }
.blog-hero_lead { margin: 0 0 calc(10 * var(--px)); font-size: calc(18 * var(--px)); line-height: 1.5; }

/* Stripes band: the home page's strip reveal as a fixed-height band that fills into the dark listing */
.strip-reveal_component.is-band { height: calc(341 * var(--px)); z-index: 1; background-color: #fff; }
.strip-reveal_component.is-band .strip-reveal_sticky { position: relative; height: 100%; }

/* Section label in the site's style */
.blog-label { display: flex; flex-direction: column; gap: calc(3 * var(--px)); width: auto; font-size: calc(13 * var(--px)); }
.blog-label p { margin: 0; }

/* Listing */
.notes { background-color: var(--ink); color: #fff; padding: calc(56 * var(--px)) calc(40 * var(--px)) calc(140 * var(--px)); display: flex; flex-direction: column; gap: calc(72 * var(--px)); }
.notes .blog-label p:last-child { color: #e9d6df; }
.notes_head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(24 * var(--px)); }
.notes_filters { display: flex; flex-wrap: wrap; gap: calc(12 * var(--px)); }
.notes_filter { font-size: calc(13 * var(--px)); color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .25); padding: calc(11 * var(--px)) calc(20 * var(--px)); cursor: pointer; transition: background-color .25s ease, border-color .25s ease; }
.notes_filter:hover { border-color: rgba(255, 255, 255, .6); }
.notes_filter.is-active { background-color: var(--primary); border-color: var(--primary); }
.notes_filter:focus-visible, .note-card_link:focus-visible, .note_toc-link:focus-visible, .note_faq-q:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.notes_count { justify-self: end; margin: 0; color: var(--mauve); font-size: calc(13 * var(--px)); }
.notes_all { justify-self: end; grid-column: 3; color: #fff; text-decoration: none; font-size: calc(13 * var(--px)); }
.notes_all:hover { color: var(--hot); }
.notes_divider { height: 1px; background-color: rgba(255, 255, 255, .15); }
.notes_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(88 * var(--px)) calc(41 * var(--px)); }
.notes_empty { margin: 0; color: var(--mauve); font-size: calc(13 * var(--px)); }
[data-note-card][hidden], .notes_divider[hidden] { display: none; }

.note-feature { display: grid; grid-template-columns: calc(1060 * var(--px)) 1fr; gap: calc(80 * var(--px)); align-items: center; }
.note-feature_thumb { display: block; }
.note-feature_copy { display: flex; flex-direction: column; align-items: flex-start; gap: calc(28 * var(--px)); }
.note-feature_meta { display: flex; align-items: center; gap: calc(16 * var(--px)); font-size: calc(13 * var(--px)); }
.note-feature_chip { background: #fff; color: var(--ink); padding: calc(5 * var(--px)) calc(10 * var(--px)); }
.note-feature_meta .is-cat { color: var(--hot); }
.note-feature_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(52 * var(--px)); line-height: 1.1; letter-spacing: -0.02em; }
.note-feature_title a { color: inherit; text-decoration: none; }
.note-feature_excerpt { margin: 0; font-size: calc(20 * var(--px)); line-height: 1.5; color: rgba(233, 214, 223, .8); }
.note-feature_by { margin: 0; color: var(--mauve); font-size: calc(13 * var(--px)); }
.note-feature_btn { column-gap: calc(40 * var(--px)); }

.note-card_link { display: flex; flex-direction: column; gap: calc(20 * var(--px)); color: inherit; text-decoration: none; }
.note-card_meta { display: flex; justify-content: space-between; gap: 1em; font-size: calc(12 * var(--px)); color: var(--mauve); }
.note-card_meta .is-cat { color: var(--hot); }
.note-card_title { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: calc(26 * var(--px)); line-height: 1.25; letter-spacing: -0.01em; transition: color .25s ease; }
.note-card_excerpt { margin: 0; font-size: calc(16 * var(--px)); line-height: 1.5; color: rgba(233, 214, 223, .75); }
a.note-card_link:hover .note-card_title, .note-feature:hover .note-feature_title { color: #ffd0e4; }
.note-card.is-soon .note-card_meta span:last-child { color: var(--hot); }

/* Thumbnails: everything inside scales with the card width (1 unit = 1px at the 586px Figma card) */
.thumb { position: relative; aspect-ratio: 586 / 366; overflow: hidden; container-type: inline-size; background-color: #5a0030; }
.thumb_inner { --u: calc(100cqw / 586); position: absolute; inset: 0; }
.thumb_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb_wm { position: absolute; left: 51.19%; top: -10.38%; width: 75.09%; height: 114.49%; max-width: none; }
.thumb_art { position: absolute; left: 38.57%; top: 15.3%; width: 58.02%; height: 71.04%; }
.thumb_svg { display: block; width: 100%; height: 100%; overflow: visible; }
.thumb_note { position: absolute; margin: 0; font-family: var(--font-mono); font-size: calc(9 * var(--u)); line-height: 1.3; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.thumb_note.is-hot { color: var(--hot); }
.thumb_note.is-dim { color: rgba(255, 255, 255, .6); }
.thumb_note.is-mid { color: rgba(255, 255, 255, .5); }
.thumb_note.is-faint { color: rgba(255, 255, 255, .38); }
.thumb_lockup { position: absolute; left: 3.41%; top: 5.46%; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)); background-color: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: calc(2 * var(--u)); backdrop-filter: blur(calc(7 * var(--u))); -webkit-backdrop-filter: blur(calc(7 * var(--u))); }
.thumb_v { width: calc(16.8 * var(--u)); height: calc(16 * var(--u)); display: block; }
.thumb_x, .thumb_plus { font-family: var(--font-body); line-height: 1; color: rgba(255, 255, 255, .55); font-size: calc(14 * var(--u)); }
.thumb_plus { color: rgba(255, 255, 255, .45); font-size: calc(13 * var(--u)); }
.thumb_logo { display: block; height: calc(var(--h) * var(--u)); width: calc(var(--w) * var(--u)); max-width: none; }
.thumb_rule { width: 1px; height: calc(14 * var(--u)); background-color: rgba(255, 255, 255, .35); }
.thumb_tag { font-family: var(--font-mono); font-size: calc(11 * var(--u)); line-height: 1; color: rgba(255, 255, 255, .9); }
.thumb_label { position: absolute; left: 3.41%; top: 73.22%; margin: 0; font-family: var(--font-mono); font-size: calc(9 * var(--u)); text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.thumb_title { position: absolute; left: 3.41%; top: 78.14%; width: calc(210 * var(--u)); margin: 0; font-family: var(--font-body); font-size: calc(28 * var(--u)); line-height: 1.04; letter-spacing: calc(-0.56 * var(--u)); color: #fff; }
.thumb [data-forms-label] { transition: color .3s ease; }
.thumb .t-box-fill, .thumb .is-open .t-tick, .thumb .t-runner { opacity: 0; }

/* Post */
.note { background-color: #fff; color: #0a0a0a; padding: calc(40 * var(--px)) calc(40 * var(--px)) calc(160 * var(--px)); display: flex; flex-direction: column; gap: calc(96 * var(--px)); }
.note .blog-label { padding-bottom: calc(32 * var(--px)); }
.note .blog-label p:last-child { color: #0a0a0a; }
.note_meta { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--rose); border-bottom: 1px solid var(--rose); }
.note_meta-cell { display: flex; flex-direction: column; gap: calc(14 * var(--px)); padding: calc(28 * var(--px)) 0; }
.note_meta-cell + .note_meta-cell { border-left: 1px solid var(--rose); padding-left: calc(24 * var(--px)); }
.note_meta dt { color: var(--grey); font-size: calc(13 * var(--px)); }
.note_meta dd { margin: 0; font-size: calc(24 * var(--px)); line-height: 1.2; }
.note_body { display: grid; grid-template-columns: calc(400 * var(--px)) calc(840 * var(--px)) 1fr; gap: calc(80 * var(--px)); align-items: start; }
.note_toc, .note_aside { position: sticky; top: calc(120 * var(--px)); }
.note_toc-label { margin: 0 0 calc(20 * var(--px)); color: var(--grey); font-size: calc(13 * var(--px)); }
.note_toc-list { list-style: none; margin: 0; padding: 0; }
.note_toc-link { display: flex; align-items: center; gap: calc(16 * var(--px)); padding: calc(14 * var(--px)) 0; border-top: 1px solid var(--rose); color: var(--grey); text-decoration: none; font-size: calc(17 * var(--px)); transition: color .25s ease; }
.note_toc-link::after { content: ""; width: calc(8 * var(--px)); height: calc(8 * var(--px)); background-color: var(--primary); transform: scale(0); transition: transform .3s ease; flex-shrink: 0; }
.note_toc-link:hover, .note_toc-link.is-active { color: #0a0a0a; }
.note_toc-link.is-active::after { transform: scale(1); }
.note_toc-num { color: var(--primary); font-size: calc(13 * var(--px)); }
.note_share { display: flex; flex-direction: column; gap: calc(12 * var(--px)); padding-top: calc(24 * var(--px)); font-size: calc(13 * var(--px)); }
.note_share-label { margin: 0; color: var(--grey); }
.note_share-links { margin: 0; display: flex; flex-wrap: wrap; gap: calc(12 * var(--px)); white-space: pre; }
.note_share-links a, .note_share-links button { color: #0a0a0a; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.note_share-links a:hover, .note_share-links button:hover { color: var(--primary); }

.note_article { display: flex; flex-direction: column; gap: calc(36 * var(--px)); min-width: 0; }
.note_article > * { margin: 0; }
.note_lead { font-size: calc(28 * var(--px)); line-height: 1.4; letter-spacing: -0.01em; }
.note_article p:not([class]), .note_list li { font-size: calc(20 * var(--px)); line-height: 1.65; color: rgba(10, 10, 10, .8); }
.note_article strong { color: #0a0a0a; font-weight: 500; }
.note_h2 { display: flex; align-items: baseline; gap: calc(20 * var(--px)); padding-top: calc(32 * var(--px)); font-family: var(--font-body); font-weight: 400; font-size: calc(44 * var(--px)); line-height: 1.15; letter-spacing: -0.02em; scroll-margin-top: calc(120 * var(--px)); }
.note_h2-num { color: var(--primary); font-size: calc(14 * var(--px)); letter-spacing: 0; }
.note_article h3 { font-family: var(--font-body); font-weight: 400; font-size: calc(28 * var(--px)); line-height: 1.3; letter-spacing: -0.01em; margin-top: calc(8 * var(--px)); }
.note_verdict { background-color: var(--blush); border: 1px solid var(--rose); padding: calc(36 * var(--px)); display: flex; flex-direction: column; gap: calc(20 * var(--px)); }
.note_verdict-label { margin: 0; color: var(--primary); font-size: calc(13 * var(--px)); }
.note_verdict ul, .note_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(14 * var(--px)); }
.note_verdict li, .note_list li { position: relative; padding-left: calc(24 * var(--px)); }
.note_verdict li { font-size: calc(19 * var(--px)); line-height: 1.5; }
.note_verdict li::before, .note_list li::before { content: ""; position: absolute; left: 0; top: .6em; width: calc(8 * var(--px)); height: calc(8 * var(--px)); background-color: var(--primary); }
.note_table-wrap { overflow-x: auto; }
.note_table { width: 100%; border-collapse: collapse; border: 1px solid var(--rose); font-size: calc(17 * var(--px)); line-height: 1.4; }
.note_table th, .note_table td { text-align: left; font-weight: 400; padding: calc(18 * var(--px)) calc(20 * var(--px)); vertical-align: top; }
.note_table thead th { background-color: var(--ink); color: #fff; font-family: var(--font-mono); font-size: calc(13 * var(--px)); text-transform: uppercase; letter-spacing: .04em; }
.note_table thead th:last-child { color: var(--hot); }
.note_table tbody tr { border-top: 1px solid var(--rose); }
.note_table tbody th { width: calc(260 * var(--px)); color: var(--grey); }
.note_table tbody td:last-child { background-color: var(--blush); }
.note_quote { border-left: 3px solid var(--primary); padding: calc(8 * var(--px)) 0 calc(8 * var(--px)) calc(36 * var(--px)); display: flex; flex-direction: column; gap: calc(20 * var(--px)); }
.note_quote p { margin: 0; font-size: calc(34 * var(--px)); line-height: 1.3; letter-spacing: -0.01em; color: #0a0a0a; }
.note_quote footer { color: var(--grey); font-size: calc(13 * var(--px)); }
.note_figure { display: flex; flex-direction: column; gap: calc(14 * var(--px)); }
.note_caption { color: var(--grey); font-size: calc(12 * var(--px)); }
.note_faq { border-bottom: 1px solid var(--rose); }
.note_faq-item { border-top: 1px solid var(--rose); }
.note_faq-q { display: flex; align-items: center; gap: calc(24 * var(--px)); padding: calc(24 * var(--px)) 0; cursor: pointer; list-style: none; font-size: calc(22 * var(--px)); line-height: 1.3; }
.note_faq-q::-webkit-details-marker { display: none; }
.note_faq-q > span:first-child { flex: 1; }
.note_faq-icon { position: relative; width: calc(18 * var(--px)); height: calc(18 * var(--px)); flex-shrink: 0; }
.note_faq-icon::before, .note_faq-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background-color: var(--primary); transition: transform .3s ease; }
.note_faq-icon::after { transform: rotate(90deg); }
.note_faq-item[open] .note_faq-icon::after { transform: rotate(0deg); }
.note_faq-a { padding-bottom: calc(24 * var(--px)); }
.note_faq-a p { margin: 0; font-size: calc(18 * var(--px)); line-height: 1.6; color: rgba(10, 10, 10, .75); }

.note_cta { background-color: var(--ink); color: #fff; padding: calc(32 * var(--px)); display: flex; flex-direction: column; gap: calc(24 * var(--px)); }
.note_cta-label { margin: 0; color: var(--hot); font-size: calc(13 * var(--px)); }
.note_cta-text { margin: 0; font-size: calc(26 * var(--px)); line-height: 1.3; letter-spacing: -0.01em; }
.note_cta-btn { width: 100%; }

.notes.is-related { padding-bottom: calc(120 * var(--px)); }

/* Tablet and phone */
@media screen and (max-width: 991px) {
  :root { --px: calc(100vw / 820); }
  .blog-hero { min-height: 0; padding: calc(150 * var(--px)) 5vw calc(90 * var(--px)); grid-template-columns: 1fr; row-gap: calc(28 * var(--px)); }
  .blog-hero_crumbs { margin-bottom: calc(150 * var(--px)); font-size: calc(14 * var(--px)); }
  .blog-hero_title { font-size: calc(72 * var(--px)); }
  .blog-hero_lead { font-size: calc(20 * var(--px)); max-width: 34em; }
  .blog-label { font-size: calc(14 * var(--px)); }
  .strip-reveal_component.is-band { height: calc(200 * var(--px)); }
  .notes { padding: calc(64 * var(--px)) 5vw calc(110 * var(--px)); gap: calc(56 * var(--px)); }
  .notes_head { grid-template-columns: 1fr auto; row-gap: calc(28 * var(--px)); }
  .notes_filters { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; margin: 0 -5vw; padding: 0 5vw; scrollbar-width: none; }
  .notes_filters::-webkit-scrollbar { display: none; }
  .notes_filter { font-size: calc(14 * var(--px)); padding: calc(12 * var(--px)) calc(18 * var(--px)); flex-shrink: 0; }
  .notes_count, .notes_all { grid-column: 2; grid-row: 1; font-size: calc(14 * var(--px)); }
  .note-feature { grid-template-columns: 1fr; gap: calc(32 * var(--px)); }
  .note-feature_copy { gap: calc(22 * var(--px)); }
  .note-feature_meta, .note-feature_by { font-size: calc(14 * var(--px)); }
  .note-feature_title { font-size: calc(46 * var(--px)); }
  .note-feature_excerpt { font-size: calc(19 * var(--px)); }
  .notes_grid { grid-template-columns: repeat(2, 1fr); gap: calc(64 * var(--px)) calc(28 * var(--px)); }
  .note-card_link { gap: calc(16 * var(--px)); }
  .note-card_meta { font-size: calc(13 * var(--px)); }
  .note-card_title { font-size: calc(26 * var(--px)); }
  .note-card_excerpt { font-size: calc(17 * var(--px)); }

  .note { padding: calc(48 * var(--px)) 5vw calc(110 * var(--px)); gap: calc(56 * var(--px)); }
  .note_meta { grid-template-columns: repeat(2, 1fr); }
  .note_meta-cell:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--rose); }
  .note_meta-cell:nth-child(4) { border-top: 1px solid var(--rose); }
  .note_meta dt { font-size: calc(13 * var(--px)); }
  .note_meta dd { font-size: calc(24 * var(--px)); }
  .note_body { grid-template-columns: 1fr; gap: calc(48 * var(--px)); }
  .note_toc, .note_aside { position: static; }
  .note_toc-label, .note_share, .note_toc-num { font-size: calc(13 * var(--px)); }
  .note_toc-link { font-size: calc(19 * var(--px)); }
  .note_toc-link::after { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
  .note_article { gap: calc(28 * var(--px)); }
  .note_lead { font-size: calc(28 * var(--px)); }
  .note_article p:not([class]), .note_list li { font-size: calc(19 * var(--px)); }
  .note_h2 { font-size: calc(40 * var(--px)); padding-top: calc(24 * var(--px)); }
  .note_h2-num { font-size: calc(14 * var(--px)); }
  .note_article h3 { font-size: calc(26 * var(--px)); }
  .note_verdict { padding: calc(28 * var(--px)); }
  .note_verdict li { font-size: calc(19 * var(--px)); }
  .note_verdict li, .note_list li { padding-left: calc(22 * var(--px)); }
  .note_table { font-size: calc(16 * var(--px)); min-width: 560px; }
  .note_table thead th { font-size: calc(13 * var(--px)); }
  .note_table tbody th { width: 30%; }
  .note_quote { padding-left: calc(24 * var(--px)); }
  .note_quote p { font-size: calc(30 * var(--px)); }
  .note_quote footer, .note_caption { font-size: calc(13 * var(--px)); }
  .note_faq-q { font-size: calc(21 * var(--px)); }
  .note_faq-icon { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
  .note_faq-a p { font-size: calc(18 * var(--px)); }
  .note_cta { padding: calc(28 * var(--px)); }
  .note_cta-label { font-size: calc(13 * var(--px)); }
  .note_cta-text { font-size: calc(26 * var(--px)); }
}
@media screen and (max-width: 767px) {
  :root { --px: calc(100vw / 390); }
  .blog-hero { padding-top: calc(110 * var(--px)); padding-bottom: calc(56 * var(--px)); }
  .blog-hero_crumbs { margin-bottom: calc(90 * var(--px)); font-size: calc(11 * var(--px)); }
  .blog-hero_title { font-size: calc(42 * var(--px)); }
  .blog-hero_lead { font-size: calc(16 * var(--px)); }
  .blog-label, .notes_count, .notes_all, .notes_filter { font-size: calc(11 * var(--px)); }
  .strip-reveal_component.is-band { height: calc(110 * var(--px)); }
  .notes { padding-top: calc(48 * var(--px)); padding-bottom: calc(80 * var(--px)); gap: calc(40 * var(--px)); }
  .notes_filter { padding: calc(9 * var(--px)) calc(14 * var(--px)); }
  .note-feature_meta, .note-feature_by { font-size: calc(11 * var(--px)); }
  .note-feature_title { font-size: calc(30 * var(--px)); }
  .note-feature_excerpt { font-size: calc(16 * var(--px)); }
  .note-feature_btn { font-size: calc(17 * var(--px)); padding: calc(14 * var(--px)) calc(18 * var(--px)); }
  .notes_grid { grid-template-columns: 1fr; gap: calc(48 * var(--px)); }
  .note-card_link { gap: calc(14 * var(--px)); }
  .note-card_meta { font-size: calc(11 * var(--px)); }
  .note-card_title { font-size: calc(22 * var(--px)); }
  .note-card_excerpt { font-size: calc(15 * var(--px)); }

  .note { padding-top: calc(36 * var(--px)); padding-bottom: calc(80 * var(--px)); gap: calc(40 * var(--px)); }
  .note .blog-label { padding-bottom: calc(20 * var(--px)); }
  .note_meta-cell { padding: calc(18 * var(--px)) 0; gap: calc(8 * var(--px)); }
  .note_meta-cell:nth-child(even) { padding-left: calc(16 * var(--px)); }
  .note_meta dt, .note_toc-label, .note_share, .note_toc-num, .note_verdict-label, .note_cta-label { font-size: calc(11 * var(--px)); }
  .note_meta dd { font-size: calc(18 * var(--px)); }
  .note_body { gap: calc(40 * var(--px)); }
  .note_toc-link { font-size: calc(16 * var(--px)); padding: calc(12 * var(--px)) 0; gap: calc(12 * var(--px)); }
  .note_toc-link::after { width: calc(6 * var(--px)); height: calc(6 * var(--px)); }
  .note_article { gap: calc(22 * var(--px)); }
  .note_lead { font-size: calc(21 * var(--px)); }
  .note_article p:not([class]), .note_list li { font-size: calc(16 * var(--px)); }
  .note_h2 { font-size: calc(28 * var(--px)); gap: calc(12 * var(--px)); padding-top: calc(16 * var(--px)); }
  .note_h2-num { font-size: calc(11 * var(--px)); }
  .note_article h3 { font-size: calc(21 * var(--px)); }
  .note_verdict { padding: calc(20 * var(--px)); gap: calc(14 * var(--px)); }
  .note_verdict li { font-size: calc(16 * var(--px)); }
  .note_verdict li, .note_list li { padding-left: calc(18 * var(--px)); }
  .note_verdict li::before, .note_list li::before { width: calc(6 * var(--px)); height: calc(6 * var(--px)); }
  .note_table { font-size: calc(14 * var(--px)); }
  .note_table th, .note_table td { padding: calc(12 * var(--px)) calc(12 * var(--px)); }
  .note_table thead th { font-size: calc(11 * var(--px)); }
  .note_quote { padding-left: calc(18 * var(--px)); gap: calc(12 * var(--px)); }
  .note_quote p { font-size: calc(22 * var(--px)); }
  .note_quote footer, .note_caption { font-size: calc(11 * var(--px)); }
  .note_faq-q { font-size: calc(18 * var(--px)); padding: calc(18 * var(--px)) 0; }
  .note_faq-icon { width: calc(14 * var(--px)); height: calc(14 * var(--px)); }
  .note_faq-a { padding-bottom: calc(18 * var(--px)); }
  .note_faq-a p { font-size: calc(16 * var(--px)); }
  .note_cta { padding: calc(22 * var(--px)); gap: calc(18 * var(--px)); }
  .note_cta-text { font-size: calc(21 * var(--px)); }
  .note_cta-btn { font-size: calc(17 * var(--px)); padding: calc(14 * var(--px)) calc(18 * var(--px)); }
}