@charset "UTF-8";
/* Google Translate may inject this feedback tooltip without its own stylesheet.
   Keep that auxiliary panel out of document flow; translated text and toolbar remain available. */
#goog-gt-tt { display: none !important; }
.consent-panel[hidden] { display: none !important; }
.consent-panel { position: fixed; z-index: 1000; right: 24px; bottom: 24px; width: calc(100% - 48px); max-width: 620px; max-height: 75vh; overflow-y: auto; padding: 24px; background: white; border: 1px solid var(--line); border-top: 3px solid var(--brand); box-shadow: 0 8px 40px #0002; }
.consent-panel h2 { margin: 0 0 12px; font-size: 1.375rem; }
.consent-panel p { margin-bottom: 12px; font-size: 1rem; line-height: 1.55; }
.consent-panel a, .cookie-settings { text-decoration: underline; text-underline-offset: 3px; }
.consent-status:empty { display: none; }
.consent-actions { display: flex; gap: 12px; margin-top: 18px; }
.consent-actions button { flex: 1; min-height: 44px; font-size: 1rem; font-weight: 650; }
.consent-close, .cookie-settings { background: transparent; color: var(--ink); border: 0; padding: 0; border-radius: 0; font-size: 1rem; line-height: 1.5; }
.consent-close { margin-top: 14px; text-decoration: underline; }
.consent-close:hover, .cookie-settings:hover { background: transparent; color: var(--brand); }
.integration-form { max-width: 980px; }
.integration-steps { padding-left: 24px; }
.integration-steps li { margin-bottom: 12px; }
.integration-steps a { text-decoration: underline; }
.integration-code { padding: 14px; background: var(--surface); font-family: monospace; overflow-wrap: anywhere; }
@media (max-width: 600px) { .consent-panel { right: 12px; bottom: 12px; width: calc(100% - 24px); padding: 18px; } .consent-actions { flex-direction: column; gap: 10px; } }
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* A shared reading scale; these are design choices, not prescribed Google sizes. */
:root {
  --font-text: "Inter", Arial, sans-serif;
  --text-body: 1.125rem;
  --text-ui: 1rem;
  --text-small: .875rem;
  --text-lead: 1.25rem;
  --text-h1: clamp(1.875rem, 1.583333rem + 1.458333vw, 2.75rem);
  --text-h2: clamp(1.375rem, 1.25rem + .625vw, 1.75rem);
  --text-h3: clamp(1.1875rem, 1.125rem + .3125vw, 1.375rem);
}
html { font-size: 100%; }
body {
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.7;
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
}
button, input, textarea, select { font-family: var(--font-text); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-text);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
h1, .article-body h1, .policy h1, .admin-top h1, .login-panel h1 {
  font-size: var(--text-h1);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.025em;
}
h2, .prose h2, .sources h2, .section-top h2 {
  font-size: var(--text-h2);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -.018em;
}
h3, .card-copy h3 {
  font-size: var(--text-h3);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.012em;
}
h4, h5, h6 { font-size: var(--text-body); line-height: 1.4; font-weight: 600; }
.search-note h2, .trust-inner h2, .aside-help h2,
.panel-heading h2, .form-panel h2, .editorial-note h2 {
  font-size: var(--text-h3);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -.012em;
}
.prose { font-size: var(--text-body); line-height: 1.75; }
.prose p, .prose ul, .prose ol, .prose address {
  max-width: 70ch;
  overflow-wrap: anywhere;
}
.prose p { margin-bottom: 1.25em; }
.prose h2 { margin-top: 1.5em; margin-bottom: .7em; }
.article-summary, .intro { font-size: var(--text-lead); line-height: 1.6; }
.scope, .safety, .card-copy p, .search-note p, .trust-inner p,
.aside-help p, .editorial-note p {
  font-size: var(--text-body);
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.sources p { font-size: var(--text-ui); line-height: 1.65; }
.site-header nav, .header-search, .category-tabs a, .brand-filter,
.text-link, .search-note a, .toc nav, .footer-inner nav,
.admin-sidebar nav a, .admin-filters, table, .form-panel label,
.form-panel input:not([type=checkbox]), .form-panel textarea, .form-panel select,
.login-panel label, .logout button {
  font-size: var(--text-ui);
  line-height: 1.5;
}
.search-form input, .search-form button, .brand-filter select, .brand-filter button {
  font-size: var(--text-ui);
  line-height: 1.5;
}
.eyebrow, .card-copy .eyebrow, .device-label, .code-caption, .note-number,
.quick-codes, .result-count, .breadcrumbs, .article-meta, .page-date,
.footer-inner p, .panel-heading span, .stats span, .field-help,
.table-sub, .status, .sidebar-label {
  font-family: var(--font-text);
  font-size: var(--text-small);
  line-height: 1.55;
}
.eyebrow, .code-caption, .sidebar-label { letter-spacing: .07em; }
.note-number { font-weight: 600; letter-spacing: .04em; }
.quick-codes a, .code-chip, code, pre, kbd, samp {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums slashed-zero;
}
.display-code {
  font-family: var(--font-text);
  font-size: 3.5rem;
  font-weight: 650;
  line-height: 1.2;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.code-chip { font-size: var(--text-ui); line-height: 1.5; font-weight: 650; }
.body-editor { font-family: var(--font-text); font-size: var(--text-ui); line-height: 1.7; }
.site-header nav, .footer-inner nav { flex-wrap: wrap; }
.header-inner, .section-top, .article-kicker, .brand-filter { min-width: 0; }
.article-kicker { flex-wrap: wrap; }
.card-copy, .search-layout > div, .article-body, .admin-main, .login-panel { min-width: 0; }
.search-note, .trust-inner, .footer-inner { overflow-wrap: anywhere; }
.footer-inner .copyright { white-space: normal; }
.article-image { margin: 1.5rem 0 2rem; }
.article-image a { display: block; border-radius: 0; overflow: hidden; }
.article-image a:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.article-image img { display: block; width: 100%; max-width: 100%; height: auto; }
.article-image figcaption { margin-top: .65rem; font-size: var(--text-ui); line-height: 1.6; color: #625e65; overflow-wrap: anywhere; }
.article-image-steps { max-width: 600px; margin: 2rem auto; }
.article-layout { display: block; max-width: 960px; }
.article-contents { margin: -6px 0 22px; padding: 0; border: 0; background: transparent; }
.article-contents summary { display: list-item; width: fit-content; cursor: pointer; font-size: var(--text-ui); font-weight: 600; padding: 5px 0; }
.article-contents nav { margin-top: 10px; }
.article-contents ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 28px; padding-left: 24px; margin: 0 0 18px; font-size: var(--text-ui); line-height: 1.6; }
.article-contents a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.article-faq { margin: 2rem 0; }
.faq-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 17px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.faq-item p { margin: 14px 0 0; }
.article-contents summary:focus-visible, .faq-item summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.code-card, .card-photo, .card-photo img, .article-image img { border-radius: 0; }
.card-photo { display: block; overflow: hidden; }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.card-grid.single-card { grid-template-columns: minmax(0,1fr); }
.home-hero { padding: 48px 0; background: #faf8f7; }
.home-hero .search-layout { grid-template-columns: 1.12fr 1fr; gap: 54px; align-items: center; }
.home-hero h1 { max-width: 620px; }
.hero-source-note { font-size: var(--text-small); line-height: 1.65; color: var(--muted); margin: 24px 0 0; }
.hero-source-note a { text-decoration: underline; text-underline-offset: 3px; }
.home-feature { background: white; border: 1px solid var(--line); min-width: 0; }
.feature-photo, .feature-photo img { display: block; width: 100%; border-radius: 0; }
.feature-photo img { aspect-ratio: 3/2; height: auto; object-fit: cover; }
.feature-copy { padding: 23px 26px 27px; }
.feature-copy .eyebrow { margin-bottom: 9px; }
.feature-copy h2 { font-size: 1.375rem; line-height: 1.35; margin-bottom: 16px; }
.home-topics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-top: 35px; }
.topic-link { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; position: relative; border-bottom: 2px solid var(--ink); padding: 18px 28px 23px 0; }
.topic-link .eyebrow { margin-bottom: 8px; }
.topic-link h2 { font-size: 1.375rem; margin-bottom: 9px; }
.topic-link p:not(.eyebrow) { font-size: var(--text-ui); line-height: 1.6; color: var(--muted); margin: 0; }
.topic-codes { align-self: start; font-size: var(--text-small); color: var(--brand); font-weight: 600; padding-top: 2px; }
.topic-arrow { position: absolute; right: 0; top: 14px; font-size: 22px; }
@media (min-width: 1101px) { .library .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1000px) { .home-hero .search-layout { gap: 30px; } .topic-link { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 720px) { .home-hero { padding: 32px 0; } .home-feature { margin-top: 30px; } .home-topics { grid-template-columns: minmax(0,1fr); gap: 10px; } .feature-copy { padding: 20px; } }
.single-card .code-card { display: grid; grid-template-columns: 1fr 1fr; }
.single-card .card-copy { align-self: center; }
.single-card .card-photo img { height: 100%; }
@media (max-width: 600px) { .single-card .code-card { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .article-contents ol { grid-template-columns: minmax(0,1fr); } }
.login-panel .original-logo { max-width: 100%; }
.login-panel .original-logo img { width: 100%; }
.admin-sidebar .original-logo { max-width: 100%; }
.admin-sidebar .original-logo img { width: calc(100% - 14px); }

@media (max-width: 720px) {
  :root { --text-body: 1.0625rem; --text-lead: 1.1875rem; }
  .site-header nav { gap: 10px 18px; }
  .display-code { font-size: 3rem; }
  .search-form input { flex-basis: 100%; }
  .search-form button { width: 100%; }
  .search-form { flex-wrap: wrap; }
  .section-top { flex-wrap: wrap; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 360px) {
  .policy, .article-layout { padding-top: 30px; }
  .brand-filter select { min-width: 0; flex: 1; }
}

/* Shared footer: grouped links and a separate baseline on every public page. */
.site-footer { padding: 40px 0 0; background: #f8f8f9; }
.site-footer .footer-inner { display: grid; grid-template-columns: minmax(200px,1fr) minmax(0,1.25fr); gap: 48px; align-items: start; }
.site-footer .footer-identity p { font-size: .9375rem; line-height: 1.65; margin: 14px 0 0; }
.site-footer nav.footer-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; max-width: none; margin: 0; }
.footer-link-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.footer-link-group h2 { font-size: .875rem; font-weight: 650; letter-spacing: 0; line-height: 1.5; margin: 0 0 9px; }
.footer-link-group a, .footer-link-group .cookie-settings { display: block; font-size: .875rem; line-height: 1.6; padding: 5px 0; color: var(--muted); text-align: left; overflow-wrap: anywhere; }
.footer-link-group a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 20px; padding-bottom: 22px; margin-top: 30px; position: relative; }
.footer-bottom::before { content: ''; position: absolute; height: 1px; background: var(--line); top: 0; left: 32px; right: 32px; }
.footer-bottom .copyright, .footer-bottom>a { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--muted); white-space: normal; }
.footer-bottom>a { flex-shrink: 0; padding: 5px 0; }
@media(max-width:720px) { .site-footer { padding-top: 30px; } .site-footer .footer-inner { grid-template-columns: minmax(0,1fr); gap: 28px; } .site-footer nav.footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .footer-bottom { margin-top: 26px; } .footer-bottom::before { left: 20px; right: 20px; } }
@media(max-width:360px) { .footer-bottom { flex-wrap: wrap; gap: 8px; } }