@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  --navy: #17204f;
  --ink: #202847;
  --muted: #6d7489;
  --line: #e2e5eb;
  --paper: #f5f6f8;
  --saffron: #dc7134;
  --saffron-dark: #b7522b;
  --green: #287451;
  --shadow: 0 12px 32px rgba(25, 38, 78, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.55 'DM Sans', Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #ecb159; outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topline { height: 34px; padding: 0 max(calc((100% - 1120px) / 2), 24px); display: flex; align-items: center; justify-content: space-between; color: #f6ead8; background: var(--navy); font-size: 11px; }
.topline a { color: #ffd092; text-decoration: none; }
.topline a:hover { text-decoration: underline; }
.site-header { height: 72px; padding: 0 max(calc((100% - 1120px) / 2), 24px); display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e9eaf0; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font: 800 18px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; }
.brand small, .footer-brand small { margin-left: 1px; color: var(--saffron-dark); font-size: 12px; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px 12px 12px 4px; color: #fff; background: linear-gradient(140deg, #eb9d38, #cf5636); box-shadow: 0 4px 10px #dc71343b; font: 800 17px 'Plus Jakarta Sans', sans-serif; }
.header-note { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.header-dot { width: 8px; height: 8px; border-radius: 50%; background: #32906a; box-shadow: 0 0 0 4px #e5f2eb; }
.header-search-link { color: #5e6780; text-decoration: none; font-size: 11px; font-weight: 700; }
.header-search-link:hover { color: var(--saffron-dark); }

main { width: min(100% - 48px, 1050px); margin: 0 auto; padding: 0 0 48px; }
.breadcrumbs { display: flex; align-items: center; gap: 10px; padding: 22px 0 20px; color: #7c8396; font-size: 12px; }
.breadcrumbs a { color: #525d7b; text-decoration: none; }
.breadcrumbs a:hover { color: var(--saffron-dark); text-decoration: underline; }
.page-intro { margin: 0 0 22px; }
.eyebrow { color: var(--saffron-dark); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-mark { margin-right: 5px; color: #d99335; font-size: 13px; }
.page-intro h1 { margin: 4px 0 5px; color: var(--navy); font: 800 29px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; }
.page-intro p { margin: 0; color: var(--muted); font-size: 13px; }

.search-panel, .results-section { overflow: visible; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.search-panel { padding: 24px 28px 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #edf0f3; }
.panel-heading h2 { margin: 0; color: var(--ink); font: 700 18px 'Plus Jakarta Sans', sans-serif; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.panel-stamp { width: 48px; height: 42px; display: grid; place-content: center; border: 1px solid #eedac0; border-radius: 8px; color: #a44d2d; background: #fff8ed; text-align: center; font: 700 8px/1.3 'Plus Jakarta Sans', sans-serif; letter-spacing: .08em; }
.field-label { margin: 21px 0 9px; color: #404963; font-size: 12px; font-weight: 700; }
.search-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 680px; }
.radio-option { min-height: 61px; position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: 1px solid #dfe2e9; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.radio-option:hover { border-color: #bdc4d4; }
.radio-option.selected { border-color: #d9823a; background: #fffaf3; box-shadow: inset 0 0 0 1px #d9823a; }
.radio-option input { position: absolute; opacity: 0; pointer-events: none; }
.radio-mark { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border: 1.5px solid #8991a4; border-radius: 50%; background: #fff; }
.radio-option.selected .radio-mark { border-color: var(--saffron); }
.radio-option.selected .radio-mark::after { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); content: ''; }
.radio-option strong, .radio-option small { display: block; }
.radio-option strong { color: #303a58; font-size: 12px; }
.radio-option small { margin-top: 2px; color: #7a8193; font-size: 10px; }
.kind-switch { display: inline-flex; gap: 4px; margin: 21px 0 0; padding: 4px; border-radius: 8px; background: #f0f1f4; }
.kind-switch[hidden] { display: none; }
.kind-tab { min-width: 130px; padding: 8px 13px; border: 0; border-radius: 6px; color: #596177; background: transparent; font-size: 12px; font-weight: 600; }
.kind-tab.selected { color: #fff; background: var(--navy); box-shadow: 0 2px 6px #17204f2b; }
#search-form { margin-top: 21px; }
#search-form > label { display: block; margin-bottom: 7px; color: #414963; font-size: 12px; font-weight: 700; }
.query-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.input-wrap { position: relative; min-width: 0; }
.query-row input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid #cfd4de; border-radius: 7px; color: #26304e; background: #fff; outline: none; }
.query-row input::placeholder { color: #9aa0ad; }
.query-row input:focus { border-color: #d9823a; box-shadow: 0 0 0 3px #ecb15935; }
.search-button { height: 45px; min-width: 112px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 7px; color: #fff; background: var(--saffron); font-size: 12px; font-weight: 700; box-shadow: 0 3px 8px #dc713435; }
.search-button:hover { background: #c55e2d; }
.search-icon { font-size: 19px; line-height: 1; }
.form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hint { margin: 7px 0 0; color: #7b8294; font-size: 10px; }
.clear-button { margin-top: 6px; padding: 4px 0; border: 0; color: #6b7388; background: transparent; font-size: 11px; }
.clear-button:hover { color: var(--saffron-dark); text-decoration: underline; }
.search-footnote { display: flex; align-items: flex-start; gap: 9px; margin-top: 19px; padding: 12px 13px; border: 1px solid #f0e2ca; border-radius: 7px; color: #6e6658; background: #fffaf0; font-size: 10px; }
.info-mark { width: 16px; height: 16px; flex: 0 0 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #bc7b2d; font: 700 10px Georgia, serif; }

.suggestions { position: absolute; z-index: 10; top: calc(100% + 5px); left: 0; right: 0; max-height: 340px; overflow: auto; border: 1px solid #d9dce4; border-radius: 8px; background: #fff; box-shadow: 0 12px 28px #1a254526; }
.suggestions[hidden] { display: none; }
.suggestion-list { margin: 0; padding: 4px; list-style: none; }
.suggestion-option { width: 100%; display: grid; grid-template-columns: minmax(72px, auto) 1fr auto; align-items: start; gap: 12px; padding: 10px; border: 0; border-radius: 5px; color: var(--ink); background: #fff; text-align: left; }
.suggestion-option:hover, .suggestion-option.active { background: #fff7eb; }
.suggestion-code { color: #a94d2e; font: 700 12px 'Plus Jakarta Sans', sans-serif; }
.suggestion-description { overflow: hidden; color: #39425e; font-size: 11px; text-overflow: ellipsis; }
.suggestion-kind { padding: 2px 6px; border-radius: 10px; color: #51607e; background: #eef1f7; font-size: 9px; }

.results-section { margin-top: 21px; padding: 23px 25px; scroll-margin-top: 18px; }
.results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.results-heading h2 { margin: 4px 0 0; color: var(--navy); font: 700 18px 'Plus Jakarta Sans', sans-serif; }
.result-count { flex: 0 0 auto; padding: 5px 9px; border-radius: 18px; color: #286d50; background: #eaf5ee; font-size: 10px; font-weight: 700; }
.table-scroll { overflow-x: auto; border: 1px solid #e5e7ec; border-radius: 8px; }
.results-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.results-table th { padding: 10px 12px; color: #5e667c; background: #f6f7f9; text-align: left; font-size: 10px; font-weight: 700; white-space: nowrap; }
.results-table td { padding: 11px 12px; border-top: 1px solid #eceef2; color: #35405e; vertical-align: top; font-size: 11px; }
.table-code { padding: 0; border: 0; color: #a84c2e; background: transparent; font: 700 12px 'Plus Jakarta Sans', sans-serif; text-decoration: none; }
.table-code:hover { text-decoration: underline; }
.kind-badge { display: inline-block; padding: 3px 7px; border-radius: 12px; white-space: nowrap; font-size: 9px; font-weight: 700; }
.kind-badge.goods { color: #935021; background: #fff1df; }
.kind-badge.services { color: #236b67; background: #e5f4f1; }
.table-description { min-width: 260px; line-height: 1.5; }
.view-button { padding: 4px 0; border: 0; color: #596581; background: transparent; white-space: nowrap; font-size: 10px; font-weight: 700; text-decoration: none; }
.view-button:hover { color: var(--saffron-dark); text-decoration: underline; }
.detail-panel { margin-top: 18px; padding: 18px; border: 1px solid #eadac4; border-left: 4px solid var(--saffron); border-radius: 8px; background: #fffdf9; }
.detail-panel[hidden] { display: none; }
.detail-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.detail-eyebrow { width: 100%; color: #91643c; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.detail-heading h3 { margin: 0; color: var(--navy); font: 800 20px 'Plus Jakarta Sans', sans-serif; }
.level-badge { padding: 4px 8px; border-radius: 12px; color: #5d6681; background: #eff1f5; font-size: 9px; font-weight: 600; }
.detail-description { margin: 11px 0 0; color: #303a58; font-size: 13px; font-weight: 600; line-height: 1.7; }
.detail-group { margin-top: 17px; }
.detail-group > strong { display: block; margin-bottom: 8px; color: #586078; font-size: 10px; }
.code-path { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.path-chip { padding: 5px 9px; border: 1px solid #dce0e8; border-radius: 5px; color: #4d5773; background: #fff; font: 700 10px 'Plus Jakarta Sans', sans-serif; text-decoration: none; }
.path-chip:not(.current):hover { border-color: #d9823a; color: var(--saffron-dark); }
.path-chip.current { border-color: var(--navy); color: #fff; background: var(--navy); }
.path-separator { color: #a4a9b5; }
.related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.related-code { min-width: 0; display: grid; grid-template-columns: 65px 1fr; gap: 8px; padding: 9px 10px; border: 1px solid #e5e7ed; border-radius: 6px; background: #fff; text-align: left; }
.related-code { color: inherit; text-decoration: none; }
.related-code:hover { border-color: #e0a46b; background: #fff8ef; }
.related-code strong { color: #a64b2d; font: 700 10px 'Plus Jakarta Sans', sans-serif; }
.related-code span { overflow: hidden; color: #58617a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.related-limit { margin: 7px 0 0; color: #7d8393; font-size: 9px; }
.detail-page-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; padding: 8px 11px; border: 1px solid #e8c49e; border-radius: 6px; color: #9d4b2e; background: #fff8ee; text-decoration: none; font-size: 10px; font-weight: 700; }
.detail-page-link:hover { border-color: var(--saffron); background: #fff2df; }
.results-note { margin: 14px 0 0; color: #72798b; font-size: 10px; line-height: 1.6; }

.seo-code-main { width: min(100% - 48px, 920px); margin: 0 auto; padding: 0 0 48px; }
.seo-code-intro { margin: 0 0 18px; padding: 21px 24px; border: 1px solid #e5e7ec; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.seo-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin: 5px 0 9px; }
.seo-title-row h1 { margin: 0; color: var(--navy); font: 800 26px/1.25 'Plus Jakarta Sans', sans-serif; letter-spacing: -.035em; }
.seo-level-badge { padding: 5px 9px; border-radius: 12px; color: #5d6681; background: #eff1f5; font-size: 9px; font-weight: 700; }
.seo-code-description { margin: 0; color: #303a58; font-size: 14px; font-weight: 600; line-height: 1.7; }
.seo-detail-card { margin-top: 15px; padding: 19px 21px; border: 1px solid #e2e5eb; border-radius: 9px; background: #fff; box-shadow: 0 6px 18px rgba(25, 38, 78, .045); }
.seo-section-heading { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; }
.seo-section-heading h2 { margin: 0; color: #303a58; font: 700 14px 'Plus Jakarta Sans', sans-serif; }
.seo-section-heading p { margin: 3px 0 0; color: #798094; font-size: 10px; }
.seo-section-icon { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 8px; color: #a44e2e; background: #fff0df; font-size: 15px; }
.seo-code-path ol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seo-path-link, .seo-path-current { padding: 6px 10px; border: 1px solid #dce0e8; border-radius: 5px; color: #4d5773; background: #fff; font: 700 11px 'Plus Jakarta Sans', sans-serif; text-decoration: none; }
.seo-path-link:hover { border-color: #d9823a; color: var(--saffron-dark); background: #fff8ef; }
.seo-path-current { border-color: var(--navy); color: #fff; background: var(--navy); }
.seo-path-separator { color: #a4a9b5; }
.seo-facts { display: grid; grid-template-columns: .8fr 1.2fr 2fr; gap: 10px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #eceef2; }
.seo-facts div { min-width: 0; }
.seo-facts dt { margin-bottom: 3px; color: #82899a; font-size: 9px; }
.seo-facts dd { margin: 0; color: #414b68; font-size: 10px; font-weight: 600; }
.seo-facts dd a { color: #a84c2e; text-decoration: none; }
.seo-facts dd a:hover { text-decoration: underline; }
.seo-facts dd span { display: block; margin-top: 2px; font-weight: 400; line-height: 1.45; }
.seo-related-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.seo-related-link { min-width: 0; display: grid; grid-template-columns: 70px 1fr; gap: 9px; padding: 9px 10px; border: 1px solid #e5e7ed; border-radius: 6px; color: inherit; background: #fff; text-decoration: none; }
.seo-related-link:hover { border-color: #e0a46b; background: #fff8ef; }
.seo-related-link strong { color: #a64b2d; font: 700 10px 'Plus Jakarta Sans', sans-serif; }
.seo-related-link span { overflow: hidden; color: #58617a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.seo-limit { margin: 9px 0 0; color: #7d8393; font-size: 9px; }
.seo-limit a, .seo-back-link a { color: #a44d2e; text-decoration: none; font-weight: 700; }
.seo-limit a:hover, .seo-back-link a:hover { text-decoration: underline; }
.seo-source-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 15px; padding: 13px 15px; border: 1px solid #f0e1c9; border-radius: 8px; background: #fffaf1; }
.seo-source-note .source-icon { width: 23px; height: 23px; flex: 0 0 23px; font-size: 11px; }
.seo-source-note > div:nth-child(2) { flex: 1; min-width: 0; }
.seo-source-note strong { display: block; color: #55493a; font-size: 10px; }
.seo-source-note p { margin: 3px 0 0; color: #746a5c; font-size: 9px; line-height: 1.55; }
.seo-source-note .seo-source-version { display: block; margin-top: 4px; color: #8a8174; font-size: 8px; }
.seo-source-note > a { flex: 0 0 auto; margin-left: auto; color: #965f2c; text-decoration: none; font-size: 9px; font-weight: 700; }
.seo-source-note > a:hover { text-decoration: underline; }
.seo-back-link { margin: 17px 0 0; font-size: 10px; }
.seo-not-found { margin-top: 22px; padding: 26px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.seo-not-found h1 { margin: 5px 0; color: var(--navy); font: 800 23px 'Plus Jakarta Sans', sans-serif; }
.seo-not-found p { color: var(--muted); font-size: 12px; }
.seo-primary-link { color: #a44d2e; text-decoration: none; font-size: 11px; font-weight: 700; }

.empty-state { display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; padding: 17px 19px; border: 1px solid #eadfcf; border-radius: 9px; background: #fffaf1; }
.empty-state[hidden] { display: none; }
.empty-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; color: #a75230; background: #ffecd4; font-size: 20px; }
.empty-state strong { color: #413b36; font: 700 12px 'Plus Jakarta Sans', sans-serif; }
.empty-state p { margin: 3px 0 8px; color: #746c64; font-size: 11px; }
.official-link { color: #a74b2d; text-decoration: none; font-size: 10px; font-weight: 700; }
.official-link:hover { text-decoration: underline; }
.source-summary { display: flex; align-items: center; gap: 12px; margin-top: 21px; padding: 15px 17px; border: 1px solid #dfe9e4; border-radius: 8px; background: #f8fcf9; }
.source-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; color: #287451; background: #e6f2eb; font-size: 13px; font-weight: 700; }
.source-summary strong { display: block; color: #354a3d; font-size: 11px; }
.source-summary p { margin: 2px 0 0; color: #6f7c73; font-size: 10px; }
.source-summary a { flex: 0 0 auto; margin-left: auto; color: #956028; text-decoration: none; font-size: 10px; font-weight: 700; }
.source-summary a:hover { text-decoration: underline; }

footer { padding: 24px max(calc((100% - 1050px) / 2), 24px); border-top: 1px solid #e3e5e9; background: #fff; }
.footer-top { display: flex; align-items: flex-start; gap: 50px; }
.footer-brand { font-size: 15px; }
.footer-brand .brand-mark { width: 30px; height: 30px; font-size: 14px; }
.footer-status strong { color: #555d72; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.footer-status p { margin: 3px 0 0; color: #6b7387; font-size: 10px; }
.footer-status .small { color: #858b9b; font-size: 9px; }
.legal-note { margin: 17px 0 0; padding-top: 13px; border-top: 1px solid #eceef1; color: #858b99; font-size: 9px; }

@media (max-width: 700px) {
  .topline { padding: 0 16px; font-size: 10px; }
  .site-header { height: 64px; padding: 0 17px; }
  .header-note { font-size: 10px; }
  main { width: min(100% - 30px, 1050px); padding-bottom: 34px; }
  .breadcrumbs { padding: 16px 0; font-size: 10px; }
  .page-intro h1 { font-size: 25px; }
  .search-panel { padding: 19px 17px 16px; }
  .search-modes { grid-template-columns: 1fr; gap: 8px; }
  .radio-option { min-height: 55px; }
  .kind-tab { min-width: 0; flex: 1; padding: 8px 10px; font-size: 11px; }
  .query-row { grid-template-columns: 1fr; gap: 8px; }
  .search-button { width: 100%; }
  .results-section { padding: 19px 14px; }
  .results-heading h2 { font-size: 16px; }
  .related-list { grid-template-columns: 1fr; }
  .seo-code-main { width: min(100% - 30px, 920px); padding-bottom: 34px; }
  .seo-code-intro { padding: 18px 16px; }
  .seo-title-row h1 { font-size: 22px; }
  .seo-code-description { font-size: 12px; }
  .seo-detail-card { padding: 16px 14px; }
  .seo-facts { grid-template-columns: 1fr 1fr; }
  .seo-facts div:last-child { grid-column: 1 / -1; }
  .seo-related-list { grid-template-columns: 1fr; }
  .seo-source-note { flex-wrap: wrap; }
  .seo-source-note > a { margin-left: 34px; }
  .source-summary { align-items: flex-start; flex-wrap: wrap; }
  .source-summary > div:nth-child(2) { flex: 1; min-width: 0; }
  .source-summary a { margin-left: 40px; }
  footer { padding: 21px 17px; }
  .footer-top { gap: 24px; flex-direction: column; }
}

@media (max-width: 390px) {
  .header-note { max-width: 120px; text-align: right; }
  .panel-stamp { width: 42px; height: 38px; }
  .suggestion-option { grid-template-columns: 60px 1fr auto; gap: 8px; }
}

.header-links { display: flex; align-items: center; gap: 23px; }
.header-links > a { color: #a44d2e; text-decoration: none; font-size: 11px; font-weight: 700; }
.header-links > a:hover { text-decoration: underline; }
.guide-promo { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 24px; margin-top: 20px; padding: 22px 25px; overflow: hidden; border: 1px solid #e2e5eb; border-radius: 10px; background: linear-gradient(115deg, #fff8ed 0%, #fff 55%); box-shadow: 0 6px 18px rgba(25, 38, 78, .04); }
.guide-promo-art { min-height: 116px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #17204f; }
.guide-promo-art::before, .guide-promo-art::after { position: absolute; width: 112px; height: 112px; border: 1px solid #ffffff27; border-radius: 50%; content: ''; }
.guide-promo-art::after { width: 78px; height: 78px; }
.guide-promo-art span { z-index: 1; color: #ffd092; font: 800 27px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.06em; }
.guide-promo-art i { position: absolute; right: 20px; width: 5px; height: 5px; border-radius: 50%; background: #e68d3f; }
.guide-promo-art i:nth-of-type(1) { top: 24px; }
.guide-promo-art i:nth-of-type(2) { top: 42px; right: 35px; }
.guide-promo-art i:nth-of-type(3) { bottom: 25px; right: 34px; }
.guide-promo-art i:nth-of-type(4) { bottom: 38px; right: 19px; }
.guide-promo-copy h2 { margin: 4px 0 5px; color: var(--navy); font: 700 17px 'Plus Jakarta Sans', sans-serif; }
.guide-promo-copy p { max-width: 620px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.guide-promo-copy a, .footer-guide-link { display: inline-flex; gap: 8px; margin-top: 11px; color: #a44d2e; text-decoration: none; font-size: 11px; font-weight: 700; }
.guide-promo-copy a:hover, .footer-guide-link:hover { text-decoration: underline; }
.footer-guide-link { display: inline-block; margin-top: 5px; font-size: 10px; }

.guide-main { width: min(100% - 48px, 920px); margin: 0 auto; padding: 0 0 48px; }
.guide-hero { position: relative; overflow: hidden; margin: 0 0 19px; padding: 31px 34px 28px; border: 1px solid #dddfe9; border-radius: 12px; background: radial-gradient(circle at 94% 15%, #ffffff28 0 2px, transparent 3px), radial-gradient(circle at 87% 32%, #ffffff1c 0 2px, transparent 3px), linear-gradient(118deg, #17204f, #243467 68%, #2c5370); box-shadow: var(--shadow); }
.guide-hero::after { position: absolute; top: -83px; right: -21px; width: 280px; height: 280px; border: 1px solid #ffffff19; border-radius: 50%; box-shadow: 0 0 0 26px #ffffff08, 0 0 0 54px #ffffff06; content: ''; pointer-events: none; }
.guide-hero .eyebrow { color: #ffd092; }
.guide-hero h1 { position: relative; z-index: 1; max-width: 690px; margin: 7px 0 10px; color: #fff; font: 800 30px/1.2 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; }
.guide-lede { position: relative; z-index: 1; max-width: 700px; margin: 0; color: #e0e5f3; font-size: 13px; line-height: 1.7; }
.guide-byline { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: #bbc6e0; font-size: 10px; }
.guide-hero-action { position: absolute; z-index: 2; right: 28px; bottom: 27px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #ffffff46; border-radius: 6px; color: #fff; background: #ffffff12; text-decoration: none; font-size: 10px; font-weight: 700; }
.guide-hero-action:hover { background: #ffffff25; }
.guide-content { padding: 2px 25px; border: 1px solid #e2e5eb; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(25, 38, 78, .04); }
.guide-section { padding: 23px 0; border-bottom: 1px solid #eceef2; scroll-margin-top: 18px; }
.guide-section:last-child { border-bottom: 0; }
.guide-section h2, .guide-sources h2 { margin: 4px 0 8px; color: var(--navy); font: 700 19px/1.35 'Plus Jakarta Sans', sans-serif; letter-spacing: -.025em; }
.guide-section > p { max-width: 790px; margin: 7px 0 0; color: #505a73; font-size: 12px; line-height: 1.8; }
.guide-section a, .guide-sources a { color: #a44d2e; text-decoration: none; font-weight: 700; }
.guide-section a:hover, .guide-sources a:hover { text-decoration: underline; }
.guide-code-example { margin-top: 15px; overflow: hidden; border: 1px solid #e1e4ec; border-radius: 9px; background: #fbfcfe; }
.guide-example-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; color: #fff; background: var(--navy); font-size: 10px; font-weight: 700; }
.guide-example-heading a { color: #ffd092; white-space: nowrap; }
.guide-level-row { display: grid; grid-template-columns: 86px 1fr; align-items: stretch; border-top: 1px solid #e8eaf0; }
.guide-digit-count { display: grid; align-content: center; padding: 11px 12px; color: #70798f; font-size: 9px; font-weight: 700; }
.guide-level-row > a { position: relative; display: grid; grid-template-columns: 110px 110px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 12px; border-left: 3px solid #e5a04f; color: inherit; background: #fff; text-decoration: none; }
.guide-level-row:nth-child(3) > a { margin-left: 18px; border-left-color: #d47a3a; background: #fffdfa; }
.guide-level-row:nth-child(4) > a { margin-left: 36px; border-left-color: #ba5932; background: #fff9f4; }
.guide-level-row:nth-child(5) > a { margin-left: 54px; border-left-color: #287451; background: #f7fcf8; }
.guide-level-row > a:hover { filter: brightness(.98); }
.guide-level-row code { color: var(--navy); font: 800 13px 'Plus Jakarta Sans', sans-serif; }
.guide-level-row strong { color: #46506b; font-size: 10px; }
.guide-level-row small { color: #737c90; font-size: 10px; line-height: 1.4; }
.guide-caption { color: #7c8494 !important; font-size: 9px !important; }
.guide-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.guide-compare-grid > div { padding: 13px; border: 1px solid #e7e9ef; border-radius: 7px; background: #fcfcfd; }
.guide-compare-grid h3 { margin: 0 0 4px; color: #a44d2e; font: 800 13px 'Plus Jakarta Sans', sans-serif; }
.guide-compare-grid p { margin: 0; color: #667087; font-size: 10px; line-height: 1.6; }
.guide-steps { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: guide-step; }
.guide-steps li { position: relative; display: grid; grid-template-columns: 175px minmax(0,1fr); gap: 12px; padding: 11px 13px 11px 43px; border: 1px solid #e8eaf0; border-radius: 7px; background: #fff; counter-increment: guide-step; }
.guide-steps li::before { position: absolute; top: 10px; left: 12px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d77c39; content: counter(guide-step); font-size: 9px; font-weight: 700; }
.guide-steps strong { color: #3d4762; font-size: 10px; }
.guide-steps span { color: #667087; font-size: 10px; line-height: 1.55; }
.guide-note { display: grid; gap: 3px; margin-top: 13px; padding: 12px 14px; border-left: 3px solid #d77c39; border-radius: 0 6px 6px 0; color: #675a49; background: #fff8ec; font-size: 10px; line-height: 1.55; }
.guide-note strong { color: #514333; }
.guide-faq { display: grid; gap: 7px; margin-top: 13px; }
.guide-faq details { border: 1px solid #e7e9ef; border-radius: 7px; background: #fff; }
.guide-faq summary { position: relative; padding: 12px 36px 12px 13px; color: #3d4762; cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { position: absolute; top: 10px; right: 13px; color: #a44d2e; content: '+'; font-size: 16px; }
.guide-faq details[open] summary::after { content: '−'; }
.guide-faq details p { margin: 0; padding: 0 13px 13px; color: #697287; font-size: 10px; line-height: 1.7; }
.guide-sources { margin: 18px 0 0; padding: 17px; border: 1px solid #e2e5eb; border-radius: 8px; background: #fff; }
.guide-sources h2 { font-size: 15px; }
.guide-sources ul { display: grid; gap: 7px; margin: 11px 0; padding-left: 18px; color: #a44d2e; font-size: 10px; }
.guide-data-note { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid #eceef2; color: #818797; font-size: 9px; line-height: 1.6; }
.guide-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; padding: 16px 18px; border: 1px solid #ead9c2; border-radius: 8px; background: #fffaf1; }
.guide-bottom-cta strong { color: #3e4862; font: 700 12px 'Plus Jakarta Sans', sans-serif; }
.guide-bottom-cta p { margin: 3px 0 0; color: #737b8c; font-size: 10px; }
.guide-bottom-cta a { flex: 0 0 auto; padding: 9px 11px; border-radius: 6px; color: #fff; background: var(--saffron); text-decoration: none; font-size: 10px; font-weight: 700; }
.guide-bottom-cta a:hover { background: #c55e2d; }
.seo-guide-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 15px; padding: 16px 18px; border: 1px solid #e8d8c2; border-radius: 8px; background: linear-gradient(110deg, #fff9ef, #fff); }
.seo-guide-callout h2 { margin: 3px 0; color: var(--navy); font: 700 13px 'Plus Jakarta Sans', sans-serif; }
.seo-guide-callout p { margin: 0; color: #727b8e; font-size: 9px; }
.seo-guide-callout > a { flex: 0 0 auto; color: #a44d2e; text-decoration: none; font-size: 9px; font-weight: 700; }
.seo-guide-callout > a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .header-links { gap: 10px; }
  .header-links > a { font-size: 10px; }
  .guide-promo { grid-template-columns: 84px 1fr; gap: 13px; padding: 15px; }
  .guide-promo-art { min-height: 94px; }
  .guide-promo-art span { font-size: 22px; }
  .guide-promo-copy h2 { font-size: 14px; }
  .guide-promo-copy p { font-size: 10px; }
  .guide-main { width: min(100% - 30px, 920px); padding-bottom: 34px; }
  .guide-hero { padding: 23px 18px 74px; }
  .guide-hero h1 { font-size: 24px; }
  .guide-lede { font-size: 11px; }
  .guide-hero-action { right: 17px; bottom: 17px; }
  .guide-content { padding: 2px 15px; }
  .guide-section { padding: 19px 0; }
  .guide-section h2 { font-size: 17px; }
  .guide-section > p { font-size: 11px; }
  .guide-example-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .guide-level-row { grid-template-columns: 59px 1fr; }
  .guide-digit-count { padding: 8px 6px; font-size: 8px; }
  .guide-level-row > a { grid-template-columns: 72px 1fr; gap: 2px 8px; padding: 9px 8px; }
  .guide-level-row:nth-child(3) > a { margin-left: 8px; }
  .guide-level-row:nth-child(4) > a { margin-left: 16px; }
  .guide-level-row:nth-child(5) > a { margin-left: 24px; }
  .guide-level-row code { grid-row: span 2; font-size: 11px; }
  .guide-level-row strong { font-size: 9px; }
  .guide-level-row small { grid-column: 2; font-size: 9px; }
  .guide-compare-grid { grid-template-columns: 1fr; }
  .guide-steps li { grid-template-columns: 1fr; gap: 4px; }
  .guide-bottom-cta { align-items: flex-start; flex-direction: column; }
  .seo-guide-callout { align-items: flex-start; flex-direction: column; gap: 9px; }
}