@layer reset, tokens, frame, modules, states, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; background: #000; }
  body { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button, a, summary { -webkit-tap-highlight-color: transparent; }
  img { display: block; max-inline-size: 100%; }
  table { border-collapse: collapse; border-spacing: 0; }
  :where(h1, h2, h3, p, ul, ol, dl, figure) { margin-block: 0; }
  :where(ul, ol) { padding-inline-start: 1.2em; }
}

@layer modules {
  [data-ui="account-actions"] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  [data-ui="account-actions"] button { padding: 10px 12px; border: 1px solid var(--black); background: var(--yellow); color: var(--black); font-size: 13px; font-weight: 700; }
  [data-ui="account-actions"] button[data-variant="quiet"] { background: transparent; color: inherit; }
  account-panel { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--black); }
  account-panel[hidden] { display: none; }
  [data-ui="account-backdrop"] { position: absolute; inset: 0; background: rgb(0 0 0 / 72%); }
  [data-ui="account-dialog"] { position: relative; z-index: 1; inline-size: min(100%, 720px); max-block-size: min(90vh, 860px); overflow: auto; padding: 40px; background: var(--paper); box-shadow: 0 24px 80px rgb(0 0 0 / 35%); }
  [data-ui="account-close"] { position: absolute; inset-block-start: 16px; inset-inline-end: 16px; inline-size: 40px; block-size: 40px; border: 0; background: transparent; color: var(--black); font-size: 32px; line-height: 1; }
  [data-ui="account-eyebrow"] { margin-block-end: 12px; color: var(--red); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  [data-ui="account-dialog"] h2 { max-inline-size: 16ch; margin-block-end: 28px; font-size: clamp(2.5rem, 6vw, 4.8rem); letter-spacing: -.06em; line-height: .95; }
  [data-ui="account-switcher"] { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 24px; }
  [data-ui="account-switcher"] button, [data-ui="account-dialog"] form > button, [data-ui="account-profile-head"] button { padding: 12px 18px; border: 1px solid var(--black); background: transparent; color: var(--black); font-weight: 700; }
  [data-ui="account-switcher"] button[data-account-action="show-signin"], [data-ui="account-switcher"] button[data-account-action="show-signup"]:focus-visible, [data-ui="account-dialog"] button[data-variant="primary"] { background: var(--black); color: var(--white); }
  [data-ui="account-form"] { display: grid; gap: 18px; }
  [data-ui="account-field"] { display: grid; gap: 7px; }
  [data-ui="account-field"] label { font-size: 14px; font-weight: 700; }
  [data-ui="account-field"] input, [data-ui="account-field"] textarea { inline-size: 100%; padding: 12px 14px; border: 1px solid var(--black); background: var(--white); color: var(--black); }
  [data-ui="account-field"] span { min-block-size: 1.2em; color: var(--red); font-size: 13px; }
  [data-ui="account-grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  [data-ui="account-profile-head"] { display: flex; gap: 20px; align-items: center; margin-block-end: 24px; }
  [data-ui="account-profile-head"] img { inline-size: 88px; block-size: 88px; border-radius: 50%; object-fit: cover; background: var(--yellow); animation: account-avatar-in .35s ease-out; }
  [data-ui="account-greeting"] { margin-block-end: 10px; font-size: 20px; font-weight: 700; }
  [data-ui="account-status"] { min-block-size: 1.5em; margin-block-start: 20px; font-weight: 700; }
  [data-ui="account-status"][data-state="error"] { color: var(--red); }
  [data-ui="account-status"][data-state="success"] { color: #176b35; }
  @keyframes account-avatar-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
  @media (max-width: 820px) {
    [data-ui="account-actions"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 16px; }
    [data-ui="account-actions"] button { inline-size: 100%; }
    [data-ui="account-dialog"] { padding: 28px 20px; }
    [data-ui="account-grid"] { grid-template-columns: 1fr; }
  }
}

@layer tokens {
  :root {
    --black: #000000;
    --ink: #111111;
    --paper: #EDEDED;
    --white: #FFFFFF;
    --yellow: #FCCF06;
    --red: #F10302;
    --blue: #1618F5;
    --pink: #F35AA6;
    --line: #535353;
    --muted: #A1A1A1;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 56px;
    --space-6: 80px;
    --focus: #8BE8FF;
    --speed: 180ms;
  }
}

@layer frame {
  :where(body) {
    background: var(--black);
    color: var(--white);
    font-family: Cantarell, "Segoe UI", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    overflow-x: hidden;
  }
  :where(a) { color: inherit; text-underline-offset: 0.16em; }
  :where(a:hover) { color: var(--yellow); }
  :where(button, input, select, textarea) { border: 1px solid currentColor; border-radius: 0; }
  :where(button, input, select, textarea):focus-visible, :where(a, summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
  :where(button) { cursor: pointer; }
  .skip-link { position: fixed; z-index: 100; inset-block-start: 12px; inset-inline-start: 12px; padding: 12px 16px; background: var(--yellow); color: var(--black); transform: translateY(-150%); }
  .skip-link:focus { transform: none; }
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  editorial-frame { display: block; min-block-size: 100vh; }
  [data-ui="rail"] { display: grid; grid-template-columns: 312px minmax(0, 1fr) auto; gap: 24px; align-items: center; min-block-size: 140px; padding: 26px max(18px, calc((100vw - 1720px) / 2)); background: var(--black); color: var(--white); }
  [data-ui="brand"] { inline-size: 312px; }
  [data-ui="brand"] a { display: block; inline-size: 312px; aspect-ratio: 2.15; background: url("../playcomparepro-media/playcomparepro-feature-04.avif") center / contain no-repeat; color: transparent; text-decoration: none; }
  [data-ui="brand"] a span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-ui="scope"] { display: none; }
  [data-ui="primary-nav"] { justify-self: end; min-inline-size: min(100%, 804px); padding: 9px 12px; background: var(--yellow); color: #484848; }
  [data-ui="primary-nav"] ul { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; }
  [data-ui="primary-nav"] a { display: block; padding: 14px 12px; color: #484848; font-size: 16px; text-decoration: none; white-space: nowrap; }
  [data-ui="primary-nav"] a:hover, [data-ui="primary-nav"] a[aria-current="page"] { background: var(--red); color: var(--white); }
  [data-ui="rail-contact"] { justify-self: center; margin: 0; font-size: 14px; white-space: nowrap; }
  [data-ui="rail-contact"] span { display: none; }
  [data-ui="rail-contact"] a { color: var(--white); text-decoration: none; }
  [data-ui="rail-toggle"], [data-ui="veil"] { display: none; }
  [data-ui="stage"] { min-inline-size: 0; }
  [data-ui="mastline"] { display: flex; justify-content: space-between; gap: 24px; padding: 10px max(18px, calc((100vw - 1720px) / 2)); border-block: 1px solid #2b2b2b; background: var(--black); color: #bcbcbc; font-size: 13px; }
  [data-ui="mastline"] > div { display: flex; gap: 20px; align-items: center; }
  [data-ui="current-label"] { color: var(--yellow); letter-spacing: .08em; text-transform: uppercase; }
  [data-ui="crumbs"] ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
  [data-ui="crumbs"] li:not(:last-child)::after { content: "/"; margin-inline-start: 10px; color: var(--muted); }
  [data-ui="crumbs"] a { color: #bcbcbc; }
  [data-ui="review-date"] { white-space: nowrap; }
  main { max-inline-size: 1920px; margin-inline: auto; }
  main > * { padding: 80px max(18px, calc((100vw - 1720px) / 2)); }
  main :where(p, li, dd) { max-inline-size: 78ch; }
  main :where(h1, h2, h3) { text-wrap: balance; }
  main :where(h1) { max-inline-size: 18ch; margin-block-end: 24px; font-size: clamp(3.5rem, 6.8vw, 6rem); font-weight: 700; letter-spacing: -.06em; line-height: .98; }
  main :where(h2) { max-inline-size: 18ch; margin-block-end: 24px; font-size: clamp(2.2rem, 4.8vw, 5rem); font-weight: 700; letter-spacing: -.06em; line-height: .98; }
  main :where(h3) { margin-block-end: 18px; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.05; }
  main :where(p + p) { margin-block-start: 24px; }
  main :where(ul, ol) { margin-block-start: 18px; }
  main :where(li + li) { margin-block-start: 12px; }
  main :where(a:not([data-ui="action"])) { font-weight: 700; }
  comparison-console { display: block; container-type: inline-size; }
  [data-ui="eyebrow"], [data-ui="section-mark"] { margin-block-end: 24px; color: var(--yellow); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  [data-ui="action"] { display: inline-flex; min-block-size: 54px; align-items: center; justify-content: center; padding: 8px 24px; background: var(--red); color: var(--white) !important; font-weight: 700; text-decoration: none; }
  [data-ui="action"]:hover { background: var(--yellow); color: var(--black) !important; }
  [data-ui="footer"] { display: grid; gap: 24px; padding: 64px max(18px, calc((100vw - 1560px) / 2)); background: var(--paper); color: var(--black); }
  [data-ui="footer"] p { max-inline-size: 100%; }
  [data-ui="footer"] a { color: var(--black); }
  [data-ui="footer-links"] ul { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; }
  [data-ui="footer-meta"] { font-size: 14px; }
  consent-shelf[hidden] { display: none; }
  consent-shelf { position: fixed; z-index: 60; inset-inline: 0; inset-block-end: 0; display: block; padding: 16px max(18px, calc((100vw - 1720px) / 2)); border-block-start: 2px solid var(--yellow); background: var(--black); color: var(--white); }
  [data-ui="consent-layout"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
  [data-ui="consent-title"] { margin-block-end: 4px; color: var(--yellow); font-size: 18px; }
  [data-ui="consent-copy"] { max-inline-size: 90ch; font-size: 13px; }
  [data-ui="consent-actions"] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  [data-ui="consent-actions"] button, [data-ui="consent-save"] { min-block-size: 44px; padding: 8px 14px; border-color: var(--white); background: transparent; color: var(--white); }
  [data-ui="consent-actions"] button:first-child { background: var(--red); }
  [data-ui="consent-actions"] button:hover, [data-ui="consent-save"]:hover { background: var(--white); color: var(--black); }
  [data-ui="consent-options"] { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid #444; font-size: 14px; }
  [data-ui="consent-options"] label { display: flex; gap: 8px; align-items: center; }
  [data-ui="consent-options"] input { accent-color: var(--yellow); }
}

@layer modules {
  [data-ui="lead"] { min-block-size: 830px; padding-block: 72px 120px; background: var(--black); }
  [data-ui="lead"] > div { max-inline-size: 1720px; margin-inline: auto; }
  [data-ui="lead-copy"] { max-inline-size: 76ch; font-size: 20px; }
  [data-ui="lead-link"] { display: inline-block; margin-block-start: 24px; color: var(--yellow) !important; }
  [data-ui="visual-strip"] { padding-block: 0; background: var(--black); }
  [data-ui="visual-strip"] img { inline-size: 100%; max-block-size: 764px; object-fit: cover; }
  [data-ui="comparison-console"] { background: var(--paper); color: var(--black); }
  [data-ui="comparison-console"] h2 { max-inline-size: 22ch; }
  [data-ui="comparison-console"] :where(a, dt) { color: var(--red); }
  [data-ui="comparison-wrap"] { margin-block-start: 40px; overflow-x: auto; border-block: 1px solid var(--black); }
  [data-ui="comparison-table"] { inline-size: 100%; min-inline-size: 940px; font-size: 15px; }
  [data-ui="comparison-table"] :where(th, td) { padding: 16px; border-block-end: 1px solid #888; text-align: start; vertical-align: top; }
  [data-ui="comparison-table"] thead th { background: var(--black); color: var(--white); }
  [data-ui="comparison-table"] tbody th { background: var(--yellow); }
  [data-ui="comparison-table"] tbody tr:nth-child(even) td { background: #d3d3d3; }
  [data-ui="comparison-table"] tbody tr[data-focus="true"] td, [data-ui="comparison-table"] tbody tr[data-focus="true"] th { box-shadow: inset 6px 0 0 var(--red); }
  [data-ui="term-legend"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-block-start: 24px; background: #777; }
  [data-ui="term-legend"] div { padding: 16px; background: var(--white); }
  [data-ui="term-legend"] dt { font-weight: 700; }
  [data-ui="term-legend"] dd { margin-block-start: 8px; font-size: 14px; }
  [data-ui="scenario-board"] { background: var(--black); }
  [data-ui="scenario-picker"] fieldset { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; padding: 0; border: 0; }
  [data-ui="scenario-picker"] label { display: inline-flex; min-block-size: 48px; align-items: center; gap: 8px; padding: 10px 16px; background: var(--yellow); color: var(--black); cursor: pointer; }
  [data-ui="scenario-picker"] label:has(input:checked) { background: var(--red); color: var(--white); }
  [data-ui="scenario-note"] { margin-block-start: 24px; color: #ddd; }
  [data-ui="ledger"] { background: var(--paper); color: var(--black); }
  [data-ui="ledger"] dl { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr); margin-block-start: 32px; border-block-start: 1px solid var(--black); }
  [data-ui="ledger"] dl div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding-block: 16px; border-block-end: 1px solid #888; }
  [data-ui="diagnostic"] { background: var(--black); }
  [data-ui="diagnostic-grid"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-start: 40px; }
  [data-ui="diagnostic-grid"] article { min-block-size: 100%; padding: 24px; background: var(--paper); color: var(--black); }
  [data-ui="diagnostic-grid"] article:nth-child(2) { background: var(--yellow); }
  [data-ui="diagnostic-grid"] article:nth-child(3) { background: var(--red); color: var(--white); }
  [data-ui="diagnostic-grid"] article:nth-child(4) { background: #2c2c2c; color: var(--white); }
  [data-ui="boundaries"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; background: var(--yellow); color: var(--black); }
  [data-ui="boundaries"] h2 { color: var(--black); }
  [data-ui="revision"] { background: var(--black); }
  [data-ui="directional"] { background: var(--black); padding-block-end: 140px; }
  [data-ui="directional"] ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
  [data-ui="directional"] a { display: block; min-block-size: 100%; padding: 24px; background: var(--red); text-decoration: none; }
  [data-ui="directional"] a:hover { background: var(--yellow); color: var(--black); }
  [data-ui="directional"] strong, [data-ui="directional"] span { display: block; }
  [data-ui="directional"] span { margin-block-start: 10px; }
  [data-ui="quality"], [data-ui="recommendations"], [data-ui="faq"] { background: var(--paper); color: var(--black); }
  [data-ui="quality"] > div, [data-ui="benefits"] > div, [data-ui="recommendations"] > div, [data-ui="faq"] > div, [data-ui="contact-stage"] > div { max-inline-size: 1720px; margin-inline: auto; }
  [data-ui="feature-row"] { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: end; margin-block-start: 56px; }
  [data-ui="feature-row"]:nth-of-type(odd) { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  [data-ui="feature-row"] > div { min-block-size: 170px; }
  [data-ui="feature-row"] > div:first-child { display: flex; flex-direction: column; gap: 24px; justify-content: flex-end; }
  [data-ui="feature-row"] h3 { margin: 0; padding: 16px 24px; background: var(--yellow); font-size: 36px; line-height: 1.1; }
  [data-ui="feature-row"] p { padding-inline: 24px; }
  [data-ui="feature-row"] img { inline-size: 100%; block-size: 192px; object-fit: cover; }
  [data-ui="benefits"] { background: var(--black); color: var(--white); }
  [data-ui="benefit-grid"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-block-start: 56px; }
  [data-ui="benefit-grid"] article { min-block-size: 544px; padding: 24px; background: var(--paper); color: var(--black); }
  [data-ui="benefit-grid"] article:nth-child(2) { background: var(--yellow); }
  [data-ui="benefit-grid"] article:nth-child(3) { background: var(--red); color: var(--white); }
  [data-ui="benefit-grid"] article:nth-child(4) { background: var(--pink); color: var(--black); }
  [data-ui="benefit-number"] { display: block; margin-block-end: 24px; font-size: 26px; font-weight: 700; }
  [data-ui="benefit-grid"] img { inline-size: 100%; block-size: 157px; margin-block-start: 32px; object-fit: cover; }
  [data-ui="wide-intro"] { background: var(--black); }
  [data-ui="wide-intro"] > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; max-inline-size: 1720px; margin-inline: auto; align-items: center; }
  [data-ui="wide-intro"] img { inline-size: 100%; margin-block-start: 56px; max-block-size: 764px; object-fit: cover; }
  [data-ui="recommendation-list"] { display: grid; gap: 32px; margin-block-start: 56px; }
  [data-ui="recommendation-entry"] { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: center; padding: 56px; background: var(--paper); color: var(--black); }
  [data-ui="recommendation-entry"]:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  [data-ui="recommendation-entry"] img { inline-size: 100%; block-size: 365px; object-fit: cover; }
  [data-ui="recommendation-entry"] h3 { font-size: 32px; }
  [data-ui="recommendation-entry"] ul { margin-block: 24px; }
  [data-ui="recommendation-entry"] a { display: inline-flex; min-block-size: 54px; align-items: center; padding: 8px 24px; background: var(--red); color: var(--white); text-decoration: none; }
  [data-ui="faq"] details { padding: 24px; border-block-end: 1px solid #8d8d8d; }
  [data-ui="faq"] summary { display: flex; min-block-size: 44px; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font-size: 24px; font-weight: 700; }
  [data-ui="faq"] summary::after { content: "+"; color: var(--red); font-size: 30px; }
  [data-ui="faq"] details[open] summary::after { content: "−"; }
  [data-ui="faq"] details > div { padding-block: 24px 8px; }
  [data-ui="contact-stage"] { background: var(--black); }
  [data-ui="contact-stage"] > div { max-inline-size: 808px; }
  [data-ui="contact-preview"] { display: grid; gap: 16px; margin-block: 56px; }
  [data-ui="contact-preview"] div { display: grid; gap: 16px; }
  [data-ui="contact-preview"] strong { font-weight: 400; }
  [data-ui="contact-preview"] span { display: block; padding: 16px 24px; border: 1px solid var(--white); color: #919191; }
  [data-ui="contact-stage"] [data-ui="action"] { margin-block-start: 24px; }
}

@layer states {
  [data-ui="rail"][data-open="true"] { transform: none; }
  [data-ui="veil"][data-visible="true"] { display: none; }
  [data-ui="comparison-table"] tbody tr[data-focus="false"] { opacity: .8; }
  [data-ui="form-status"][data-state="error"], [data-ui="delivery-error"] { padding: 16px; border-inline-start: 6px solid var(--red); background: #ffd6d6; color: var(--black); }
  [aria-invalid="true"] { border-color: var(--red); }
  [data-ui="field-error"] { display: block; margin-block-start: 6px; color: var(--red); font-size: 14px; }
  @container (max-width: 760px) {
    [data-ui="comparison-wrap"] { overflow: visible; }
    [data-ui="comparison-table"] { min-inline-size: 0; }
    [data-ui="comparison-table"], [data-ui="comparison-table"] tbody, [data-ui="comparison-table"] tr, [data-ui="comparison-table"] td, [data-ui="comparison-table"] th { display: block; inline-size: 100%; }
    [data-ui="comparison-table"] thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    [data-ui="comparison-table"] tbody tr { margin-block: 24px; border: 1px solid var(--black); }
    [data-ui="comparison-table"] tbody td { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(0, 1.5fr); gap: 12px; }
    [data-ui="comparison-table"] tbody td::before { content: attr(data-label); font-size: 13px; font-weight: 700; text-transform: uppercase; }
  }
  @media (max-width: 1099px) {
    [data-ui="rail"] { grid-template-columns: minmax(220px, 1fr) auto; min-block-size: auto; padding-block: 18px; }
    [data-ui="brand"], [data-ui="brand"] a { inline-size: 240px; }
    [data-ui="rail-contact"] { grid-column: 2; grid-row: 1; }
    [data-ui="primary-nav"] { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; min-inline-size: 0; }
    [data-ui="primary-nav"] ul { justify-content: flex-start; }
    [data-ui="mastline"] { font-size: 12px; }
    [data-ui="diagnostic-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 700px) {
    :where(body) { font-size: 16px; }
    [data-ui="rail"] { display: block; padding: 16px 12px; }
    [data-ui="brand"], [data-ui="brand"] a { inline-size: 210px; }
    [data-ui="rail-contact"] { display: none; }
    [data-ui="primary-nav"] { margin-block-start: 16px; overflow-x: auto; }
    [data-ui="primary-nav"] ul { flex-wrap: nowrap; justify-content: flex-start; }
    [data-ui="mastline"] { display: block; padding-inline: 12px; }
    [data-ui="mastline"] > div { display: block; }
    [data-ui="mastline"] > div + time { display: block; margin-block-start: 6px; }
    main > * { padding-inline: 18px; }
    [data-ui="term-legend"], [data-ui="diagnostic-grid"], [data-ui="directional"] ul { grid-template-columns: 1fr; }
    [data-ui="feature-row"], [data-ui="feature-row"]:nth-of-type(odd), [data-ui="wide-intro"] > div, [data-ui="recommendation-entry"], [data-ui="recommendation-entry"]:nth-child(even) { grid-template-columns: 1fr; }
    [data-ui="benefit-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-ui="recommendation-entry"] { padding: 24px; }
    [data-ui="ledger"] dl { grid-template-columns: 1fr; }
    [data-ui="ledger"] dl div { grid-template-columns: 1fr; gap: 8px; }
    [data-ui="boundaries"] { grid-template-columns: 1fr; }
    [data-ui="consent-layout"], [data-ui="consent-options"] { grid-template-columns: 1fr; }
    [data-ui="consent-actions"] { justify-content: flex-start; }
  }
  @media (max-width: 480px) {
    main :where(h1) { font-size: clamp(2.8rem, 14vw, 4.5rem); }
    main :where(h2) { font-size: clamp(2rem, 11vw, 3.4rem); }
    [data-ui="scenario-picker"] fieldset { display: grid; }
    [data-ui="scenario-picker"] label { inline-size: 100%; }
    [data-ui="benefit-grid"] { grid-template-columns: 1fr; }
    [data-ui="feature-row"] h3 { font-size: 28px; }
    [data-ui="recommendation-entry"] img { block-size: 240px; }
  }
}

@layer utilities {
  [hidden] { display: none !important; }
  @media print {
    [data-ui="rail"], [data-ui="mastline"], consent-shelf { display: none !important; }
    editorial-frame { display: block; }
    main > * { break-inside: avoid; }
    a { color: inherit !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
}

@layer home-overrides {
  .figma-home {
    --home-paper: #ededed;
    --home-yellow: #ffd20a;
    --home-red: #f10302;
    --home-blue: #1618f5;
    --home-pink: #f35aa6;
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
  }

  .figma-home [data-ui="rail"] {
    display: grid;
    grid-template-columns: 312px minmax(180px, 1fr) 804px;
    gap: 40px;
    align-items: center;
    min-block-size: 165px;
    padding: 26px max(18px, calc((100vw - 1720px) / 2));
  }

  .figma-home [data-ui="brand"],
  .figma-home [data-ui="brand"] a {
    inline-size: 312px;
    block-size: 113px;
  }

  .figma-home [data-ui="brand"] a {
    display: grid;
    place-items: center;
    background: none;
  }

  .figma-home .home-brand-logo {
    display: block;
    inline-size: 312px;
    block-size: 113px;
    object-fit: contain;
  }

  .figma-home [data-ui="brand"] a span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .figma-home [data-ui="rail-contact"] {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
    font-size: 16px;
  }

  .figma-home [data-ui="primary-nav"] {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-inline-size: 804px;
    padding: 9px 11px;
    background: var(--home-yellow);
  }

  .figma-home [data-ui="primary-nav"] ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
  }

  .figma-home [data-ui="primary-nav"] a {
    min-block-size: 54px;
    padding: 14px 24px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
  }

  .figma-home [data-ui="primary-nav"] a:hover,
  .figma-home [data-ui="primary-nav"] a[aria-current="page"] {
    background: var(--home-red);
    color: #fff;
  }

  .figma-home main {
    max-inline-size: none;
  }

  .figma-home main > section {
    padding: 140px max(18px, calc((100vw - 1720px) / 2));
  }

  .figma-home .home-container {
    max-inline-size: 1720px;
    margin-inline: auto;
  }

  .figma-home h1,
  .figma-home h2,
  .figma-home h3,
  .figma-home p,
  .figma-home ul {
    max-inline-size: none;
  }

  .figma-home h1,
  .figma-home h2 {
    letter-spacing: -.065em;
    line-height: .98;
  }

  .figma-home h1 {
    max-inline-size: none;
    margin: 0;
    font-size: clamp(3.5rem, 5vw, 6rem);
  }

  .figma-home h2 {
    max-inline-size: 18ch;
    margin: 0 0 56px;
    font-size: clamp(3.2rem, 4.65vw, 6rem);
  }

  .figma-home h3 {
    margin: 0;
    line-height: 1.08;
  }

  .figma-home p,
  .figma-home li {
    font-size: 18px;
    line-height: 1.35;
  }

  .figma-home .home-hero {
    padding: 54px 0 0;
    background: #000;
  }

  .figma-home .home-hero-title {
    padding-inline: max(18px, calc((100vw - 1652px) / 2));
    padding-block-end: 70px;
  }

  .figma-home .home-full-image {
    display: block;
    inline-size: 100%;
    block-size: 764px;
    object-fit: cover;
  }

  .figma-home .home-quality {
    background: linear-gradient(#000 0 300px, var(--home-paper) 300px 100%);
    color: #000;
  }

  .figma-home .home-quality h2,
  .figma-home .home-recommendations h2,
  .figma-home .home-benefits h2,
  .figma-home .home-standards h2,
  .figma-home .home-trust h2,
  .figma-home .home-catalog h2,
  .figma-home .home-wide h2,
  .figma-home .home-user-value h2,
  .figma-home .home-useful h2,
  .figma-home .home-faq h2,
  .figma-home .home-community h2,
  .figma-home .home-tips h2,
  .figma-home .home-contact h2 {
    color: #fff;
  }

  .figma-home .home-quality h2,
  .figma-home .home-recommendations h2,
  .figma-home .home-benefits h2,
  .figma-home .home-standards h2,
  .figma-home .home-catalog h2,
  .figma-home .home-wide h2,
  .figma-home .home-user-value h2,
  .figma-home .home-useful h2,
  .figma-home .home-faq h2,
  .figma-home .home-community h2,
  .figma-home .home-tips h2,
  .figma-home .home-contact h2 {
    max-inline-size: none;
  }

  .figma-home .home-trust h2 { max-inline-size: 24ch; }

  .figma-home .quality-rows {
    display: grid;
    gap: 56px;
  }

  .figma-home .quality-row {
    display: grid;
    grid-template-columns: minmax(0, 759fr) minmax(0, 862fr);
    gap: 40px;
    align-items: center;
  }

  .figma-home .quality-row:nth-child(2) {
    grid-template-columns: minmax(0, 771fr) minmax(0, 829fr);
  }

  .figma-home .quality-copy h3 {
    padding: 16px 24px;
    background: var(--home-yellow);
    color: #000;
    font-size: 30px;
    text-align: center;
  }

  .figma-home .quality-copy p {
    padding: 24px 28px 0;
  }

  .figma-home .quality-row > img {
    display: block;
    inline-size: 100%;
    block-size: 170px;
    object-fit: cover;
  }

  .figma-home .quality-row:nth-child(2) > img {
    block-size: 168px;
  }

  .figma-home .quality-row:nth-child(3) > img {
    block-size: 192px;
  }

  .figma-home .home-recommendations,
  .figma-home .home-benefits,
  .figma-home .home-standards,
  .figma-home .home-trust,
  .figma-home .home-catalog,
  .figma-home .home-wide,
  .figma-home .home-faq,
  .figma-home .home-community,
  .figma-home .home-contact {
    background: #000;
  }

  .figma-home .recommendation-feature {
    display: grid;
    grid-template-columns: minmax(0, 739fr) minmax(0, 957fr);
    min-block-size: 542px;
  }

  .figma-home .recommendation-feature-image,
  .figma-home .recommendation-feature-copy {
    min-inline-size: 0;
  }

  .figma-home .recommendation-feature-image {
    overflow: hidden;
  }

  .figma-home .recommendation-feature-image img {
    display: block;
    inline-size: 100%;
    block-size: 542px;
    object-fit: cover;
    object-position: left center;
  }

  .figma-home .recommendation-feature-copy {
    padding: 24px;
    background: var(--home-blue);
  }

  .figma-home .recommendation-feature-copy article + article {
    margin-block-start: 24px;
  }

  .figma-home .recommendation-feature-copy h3 {
    display: flex;
    gap: 18px;
    align-items: center;
    color: #fff;
    font-size: 26px;
  }

  .figma-home .recommendation-feature-copy h3 img {
    inline-size: 54px;
    block-size: 37px;
    object-fit: contain;
  }

  .figma-home .recommendation-feature-copy p {
    margin: 18px 0 0;
    color: #fff;
  }

  .figma-home .benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
  }

  .figma-home .benefit-grid article {
    display: flex;
    min-block-size: 544px;
    flex-direction: column;
    padding: 24px;
    background: var(--home-paper);
    color: #000;
  }

  .figma-home .benefit-grid article span {
    display: block;
    margin-block-end: 28px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
  }

  .figma-home .benefit-grid h3 {
    font-size: 24px;
  }

  .figma-home .benefit-grid p {
    margin-block-start: 36px;
  }

  .figma-home .benefit-grid img {
    inline-size: 100%;
    block-size: 157px;
    margin-block-start: auto;
    object-fit: cover;
  }

  .figma-home .home-standards h2,
  .figma-home .home-trust h2,
  .figma-home .home-catalog h2,
  .figma-home .home-faq h2,
  .figma-home .home-community h2,
  .figma-home .home-tips h2,
  .figma-home .home-contact h2 {
    max-inline-size: 100%;
  }

  .figma-home .standards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 56px;
  }

  .figma-home .standards-grid article {
    min-block-size: 316px;
    padding: 30px 52px;
    background: var(--home-yellow);
    color: #000;
  }

  .figma-home .standards-grid article:nth-child(2),
  .figma-home .standards-grid article:nth-child(4) {
    margin-block-start: 130px;
  }

  .figma-home .standards-grid small {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
  }

  .figma-home .standards-grid h3 {
    margin-block-start: 36px;
    font-size: 28px;
  }

  .figma-home .standards-grid span {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    margin-block-start: 28px;
    border-radius: 50%;
    background: var(--home-paper);
    color: var(--home-red);
    font-size: 32px;
  }

  .figma-home .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .figma-home .trust-grid article {
    display: flex;
    min-block-size: 556px;
    flex-direction: column;
    background: var(--home-paper);
    color: #000;
  }

  .figma-home .trust-grid article:nth-child(2) { margin-block-start: 0; }
  .figma-home .trust-grid article:nth-child(3) { margin-block-start: 4px; }
  .figma-home .trust-grid article:nth-child(4) { margin-block-start: 0; }

  .figma-home .trust-grid img {
    display: block;
    inline-size: 100%;
    block-size: 300px;
    object-fit: cover;
    background: var(--home-blue);
  }

  .figma-home .trust-grid article:nth-child(2) img { background: var(--home-yellow); }
  .figma-home .trust-grid article:nth-child(3) img { background: var(--home-red); }
  .figma-home .trust-grid article:nth-child(4) img { background: var(--home-pink); }

  .figma-home .trust-grid h3,
  .figma-home .trust-grid p {
    padding-inline: 24px;
  }

  .figma-home .trust-grid h3 {
    margin-block-start: 24px;
    font-size: 22px;
  }

  .figma-home .trust-grid p {
    margin-block-start: 24px;
  }

  .figma-home .catalog-list {
    display: grid;
    gap: 10px;
  }

  .figma-home .catalog-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-block-size: 477px;
    gap: 56px;
    align-items: center;
    padding: 56px;
    background: var(--home-paper);
    color: #000;
  }

  .figma-home .catalog-entry.catalog-featured {
    background: var(--home-yellow);
  }

  .figma-home .catalog-entry > img {
    display: block;
    inline-size: 100%;
    block-size: 365px;
    object-fit: cover;
    box-shadow: 0 12px 20px rgb(0 0 0 / 20%);
  }

  .figma-home .catalog-entry h3 {
    font-size: 30px;
  }

  .figma-home .catalog-entry ul {
    display: grid;
    gap: 16px;
    margin: 28px 0;
    padding: 0;
    list-style: none;
  }

  .figma-home .catalog-entry li {
    position: relative;
    padding-inline-start: 42px;
    font-size: 14px;
  }

  .figma-home .catalog-entry li::before {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    inline-size: 28px;
    block-size: 28px;
    border: 2px solid #000;
    border-radius: 50%;
    color: var(--home-yellow);
    content: "";
  }

  .figma-home .catalog-entry a {
    display: inline-flex;
    min-block-size: 54px;
    align-items: center;
    padding: 8px 24px;
    background: var(--home-red);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
  }

  .figma-home .catalog-entry a:hover { background: #000; }
  .figma-home .catalog-entry:nth-child(even) > img { order: 2; }

  .figma-home .home-wide {
    padding-inline: 0;
    background: #000;
  }

  .figma-home .home-wide-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    padding: 0 max(18px, calc((100vw - 1720px) / 2)) 72px;
    align-items: center;
  }

  .figma-home .home-wide-copy h2 { margin: 0; }
  .figma-home .home-wide-copy p { margin: 0; color: #fff; }

  .figma-home .home-user-value {
    background: linear-gradient(#000 0 300px, var(--home-paper) 300px 100%);
    color: #000;
  }

  .figma-home .value-rows {
    display: grid;
    gap: 56px;
  }

  .figma-home .value-rows article {
    display: grid;
    grid-template-columns: minmax(0, 759fr) minmax(0, 862fr);
    gap: 40px;
    align-items: center;
  }

  .figma-home .value-rows article:nth-child(2) {
    grid-template-columns: minmax(0, 771fr) minmax(0, 829fr);
  }

  .figma-home .value-rows article:nth-child(2) > img { order: 2; }

  .figma-home .value-rows h3 {
    padding: 16px 24px;
    background: var(--home-yellow);
    font-size: 28px;
    text-align: center;
  }

  .figma-home .value-rows p { padding: 24px 28px 0; }

  .figma-home .value-rows img {
    display: block;
    inline-size: 100%;
    block-size: 340px;
    object-fit: cover;
  }

  .figma-home .home-useful {
    background: var(--home-yellow);
    color: #000;
  }

  .figma-home .home-useful h2 { color: #000; }

  .figma-home .useful-grid {
    display: grid;
    grid-template-columns: minmax(0, 957fr) minmax(0, 739fr);
    gap: 24px;
    align-items: stretch;
  }

  .figma-home .useful-grid > div {
    display: grid;
    gap: 24px;
  }

  .figma-home .useful-grid article {
    padding: 24px;
    background: var(--home-yellow);
  }

  .figma-home .useful-grid article + article { border-block-start: 1px solid #000; }
  .figma-home .useful-grid h3 { font-size: 24px; }
  .figma-home .useful-grid p { margin-block-start: 24px; }

  .figma-home .useful-grid > img {
    display: block;
    inline-size: 100%;
    block-size: 600px;
    object-fit: cover;
  }

  .figma-home .home-faq { color: #000; }

  .figma-home .home-faq disclosure-ledger {
    display: grid;
    gap: 32px;
  }

  .figma-home .home-faq details {
    padding: 24px;
    background: var(--home-paper);
  }

  .figma-home .home-faq summary {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    align-items: center;
    min-block-size: 54px;
    color: #000;
    font-size: 24px;
    font-weight: 700;
  }

  .figma-home .home-faq summary span { font-size: 18px; }
  .figma-home .home-faq details p { margin: 32px 0; }
  .figma-home .home-faq details img { display: block; inline-size: 100%; block-size: 157px; object-fit: cover; }

  .figma-home .home-community { color: #000; }

  .figma-home .community-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 56px;
  }

  .figma-home .community-grid article {
    min-block-size: 300px;
    padding: 52px;
    background: var(--home-yellow);
  }

  .figma-home .community-grid article:nth-child(2),
  .figma-home .community-grid article:nth-child(4) { margin-block-start: 130px; }

  .figma-home .community-grid h3 { font-size: 28px; }
  .figma-home .community-grid p { margin-block-start: 28px; }

  .figma-home .home-tips { background: #000; }

  .figma-home .tips-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .figma-home .tips-grid article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-block-size: 302px;
    background: var(--home-paper);
    color: #000;
  }

  .figma-home .tips-grid img {
    display: block;
    inline-size: 100%;
    block-size: 302px;
    object-fit: cover;
  }

  .figma-home .tips-grid article div { padding: 24px; }
  .figma-home .tips-grid h3 { font-size: 24px; }
  .figma-home .tips-grid p { margin-block-start: 32px; }

  .figma-home .home-contact { color: #fff; }

  .figma-home .home-contact .home-container { max-inline-size: 1720px; }
  .figma-home .home-contact h2 { margin-block-end: 56px; }
  .figma-home .home-contact inquiry-panel { display: block; max-inline-size: 808px; margin-inline: auto; }
  .figma-home .home-contact form { display: grid; gap: 24px; }
  .figma-home .home-form-field { display: grid; gap: 16px; }
  .figma-home .home-form-field label { font-size: 18px; }
  .figma-home .home-form-field input,
  .figma-home .home-form-field textarea {
    inline-size: 100%;
    min-block-size: 56px;
    padding: 16px 24px;
    border: 1px solid #fff;
    background: #000;
    color: #fff;
    font: inherit;
  }

  .figma-home .home-form-field textarea { min-block-size: 110px; resize: vertical; }
  .figma-home .home-form-field ::placeholder { color: #aaa; }
  .figma-home .home-consent { font-size: 13px; }
  .figma-home .home-consent a { color: var(--home-yellow); }
  .figma-home .honeypot { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
  .figma-home .home-contact form > button { justify-self: center; min-block-size: 54px; padding: 8px 64px; border: 0; background: var(--home-red); color: #fff; font-size: 18px; font-weight: 700; }
  .figma-home .home-contact form > button:hover { background: var(--home-yellow); color: #000; }

  .figma-home [data-ui="footer"] {
    min-block-size: 708px;
    padding: 64px max(18px, calc((100vw - 1560px) / 2));
    background: var(--home-paper);
    color: #000;
  }

  .figma-home .home-footer-inner { max-inline-size: 1560px; margin-inline: auto; }
  .figma-home .home-footer-links { display: grid; grid-template-columns: 1fr 312px 1fr; gap: 32px; align-items: center; min-block-size: 156px; }
  .figma-home .home-footer-links nav { display: flex; gap: 24px; align-items: center; }
  .figma-home .home-footer-links nav:last-child { justify-content: flex-end; }
  .figma-home .home-footer-links a { color: #000; font-weight: 400; text-decoration: none; }
  .figma-home .home-footer-links img { inline-size: 312px; block-size: 156px; object-fit: contain; }
  .figma-home .home-footer-address { margin-block-start: 56px; }
  .figma-home .home-footer-address p { font-size: 18px; }
  .figma-home .home-footer-address p + p { margin-block-start: 24px; }
  .figma-home .home-footer-address a { color: #000; }
  .figma-home [data-ui="footer-meta"] { margin-block-start: 72px; font-size: 14px; }

  .figma-home .trust-grid img { block-size: auto; object-fit: contain; }
  .figma-home .catalog-entry .catalog-image-link { display: block; grid-column: 2; background: transparent; padding: 0; }
  .figma-home .catalog-entry .catalog-image-link img { display: block; inline-size: 100%; block-size: 365px; object-fit: cover; box-shadow: 0 12px 20px rgb(0 0 0 / 20%); }
  .figma-home .catalog-entry:not(.catalog-featured) .catalog-image-link { grid-column: 1; }
  .figma-home .catalog-entry .catalog-image-link:hover { background: transparent; opacity: .92; }
  .figma-home .home-useful h3 { display: flex; gap: 24px; align-items: center; }
  .figma-home .home-useful h3 img { flex: 0 0 57px; inline-size: 57px; block-size: 56px; object-fit: contain; }
  .figma-home .community-grid small { display: block; font-size: 13px; text-transform: uppercase; }
  .figma-home .community-grid h3 { margin-block-start: 36px; }
  .figma-home .community-grid article { display: flex; flex-direction: column; }
  .figma-home .community-grid article img { display: block; inline-size: 56px; block-size: 56px; margin-block-start: auto; object-fit: contain; }
  .figma-home .community-grid article:nth-child(6) { margin-block-start: 130px; }
  .figma-home .tips-grid article:nth-child(5) { grid-column: 1 / -1; inline-size: min(840px, 100%); justify-self: center; }
  .figma-home .home-footer-address { text-align: center; }
  .figma-home .home-footer-address p { font-size: 44px; font-weight: 700; line-height: 1.1; }
  .figma-home .home-footer-note { margin-block-start: 54px; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; }
  .figma-home [data-ui="footer-meta"] { margin-block-start: 68px; text-align: center; font-size: 16px; }

  @media (max-width: 1200px) {
    .figma-home [data-ui="rail"] { grid-template-columns: 240px minmax(120px, 1fr) minmax(0, 1fr); gap: 20px; }
    .figma-home [data-ui="brand"], .figma-home [data-ui="brand"] a, .figma-home .home-brand-logo { inline-size: 240px; block-size: 100px; }
    .figma-home [data-ui="primary-nav"] { min-inline-size: 0; }
    .figma-home [data-ui="primary-nav"] a { padding-inline: 12px; }
    .figma-home .catalog-entry { gap: 32px; padding: 32px; }
  }

  @media (max-width: 1400px) and (min-width: 821px) {
    .figma-home [data-ui="primary-nav"] { overflow-x: auto; }
  }

  @media (max-width: 820px) {
    .figma-home [data-ui="rail"] { display: block; padding-block: 16px; overflow: hidden; }
    .figma-home [data-ui="brand"], .figma-home [data-ui="brand"] a, .figma-home .home-brand-logo { inline-size: 240px; block-size: 92px; }
    .figma-home [data-ui="rail-contact"] { display: none; }
    .figma-home [data-ui="primary-nav"] { inline-size: 100%; max-inline-size: 100%; margin-block-start: 16px; overflow: hidden; }
    .figma-home [data-ui="primary-nav"] ul { flex-wrap: wrap; justify-content: flex-start; }
    .figma-home main > section { padding-block: 88px; }
    .figma-home .home-hero { padding-block-start: 40px; }
    .figma-home .home-hero-title { padding-block-end: 48px; }
    .figma-home .home-full-image { block-size: 420px; }
    .figma-home .quality-row, .figma-home .quality-row:nth-child(2), .figma-home .recommendation-feature, .figma-home .home-wide-copy, .figma-home .value-rows article, .figma-home .value-rows article:nth-child(2), .figma-home .useful-grid { grid-template-columns: 1fr; }
    .figma-home .quality-row > img, .figma-home .quality-row:nth-child(2) > img, .figma-home .quality-row:nth-child(3) > img, .figma-home .recommendation-feature-image img, .figma-home .value-rows img, .figma-home .useful-grid > img { block-size: 300px; }
    .figma-home .recommendation-feature-copy { padding: 24px; }
    .figma-home .benefit-grid, .figma-home .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .figma-home .standards-grid, .figma-home .community-grid, .figma-home .tips-grid { grid-template-columns: 1fr; }
    .figma-home .standards-grid article:nth-child(2), .figma-home .standards-grid article:nth-child(4), .figma-home .community-grid article:nth-child(2), .figma-home .community-grid article:nth-child(4) { margin-block-start: 0; }
    .figma-home .catalog-entry { grid-template-columns: 1fr; }
    .figma-home .catalog-entry .catalog-image-link,
    .figma-home .catalog-entry:not(.catalog-featured) .catalog-image-link { grid-column: 1; }
    .figma-home .catalog-entry .catalog-image-link img { block-size: 300px; }
    .figma-home .home-footer-links { grid-template-columns: 1fr; gap: 24px; }
    .figma-home .home-footer-links img { order: -1; }
    .figma-home .home-footer-links nav, .figma-home .home-footer-links nav:last-child { justify-content: flex-start; flex-wrap: wrap; }
    .figma-home .community-grid article:nth-child(6) { margin-block-start: 0; }
    .figma-home .home-footer-address p { font-size: 32px; }
  }

  @media (max-width: 520px) {
    .figma-home h1 { font-size: 3.4rem; }
    .figma-home h2 { font-size: 3rem; }
    .figma-home .benefit-grid, .figma-home .trust-grid { grid-template-columns: 1fr; }
    .figma-home .quality-copy h3, .figma-home .value-rows h3 { font-size: 24px; }
    .figma-home .quality-copy p, .figma-home .value-rows p { padding-inline: 0; }
    .figma-home .home-full-image { block-size: 280px; }
    .figma-home .catalog-entry { padding: 24px; }
    .figma-home .catalog-entry .catalog-image-link img { block-size: 230px; }
    .figma-home .tips-grid article { grid-template-columns: 1fr; }
    .figma-home .tips-grid img { block-size: 220px; }
    .figma-home .home-contact h2 { font-size: 3rem; }
  }

  .figma-shell {
    --home-paper: #ededed;
    --home-yellow: #ffd20a;
    --home-red: #f10302;
    background: #000;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
  }

  .figma-shell [data-ui="rail"] {
    display: grid;
    grid-template-columns: 312px minmax(180px, 1fr) 804px;
    gap: 40px;
    align-items: center;
    min-block-size: 165px;
    padding: 26px max(18px, calc((100vw - 1720px) / 2));
  }

  .figma-shell [data-ui="brand"],
  .figma-shell [data-ui="brand"] a {
    inline-size: 312px;
    block-size: 113px;
  }

  .figma-shell [data-ui="brand"] a {
    display: grid;
    place-items: center;
    background: none;
  }

  .figma-shell .home-brand-logo {
    display: block;
    inline-size: 312px;
    block-size: 113px;
    object-fit: contain;
  }

  .figma-shell [data-ui="brand"] a span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .figma-shell [data-ui="rail-contact"] {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
    font-size: 16px;
  }

  .figma-shell [data-ui="primary-nav"] {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-inline-size: 804px;
    padding: 9px 11px;
    background: var(--home-yellow);
  }

  .figma-shell [data-ui="primary-nav"] ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
  }

  .figma-shell [data-ui="primary-nav"] a {
    min-block-size: 54px;
    padding: 14px 24px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
  }

  .figma-shell [data-ui="primary-nav"] a:hover,
  .figma-shell [data-ui="primary-nav"] a[aria-current="page"] {
    background: var(--home-red);
    color: #fff;
  }

  .figma-shell [data-ui="mastline"] { display: none; }
  .figma-shell [data-ui="stage"] { min-inline-size: 0; }

  .figma-shell [data-ui="footer"] {
    min-block-size: 708px;
    padding: 64px max(18px, calc((100vw - 1560px) / 2));
    background: var(--home-paper);
    color: #000;
  }

  .figma-shell .home-footer-inner { max-inline-size: 1560px; margin-inline: auto; }
  .figma-shell .home-footer-links { display: grid; grid-template-columns: 1fr 312px 1fr; gap: 32px; align-items: center; min-block-size: 156px; }
  .figma-shell .home-footer-links nav { display: flex; gap: 24px; align-items: center; }
  .figma-shell .home-footer-links nav:last-child { justify-content: flex-end; }
  .figma-shell .home-footer-links a { color: #000; font-weight: 400; text-decoration: none; }
  .figma-shell .home-footer-links img { inline-size: 312px; block-size: 156px; object-fit: contain; }
  .figma-shell .home-footer-address { margin-block-start: 56px; text-align: center; }
  .figma-shell .home-footer-address p { font-size: 44px; font-weight: 700; line-height: 1.1; }
  .figma-shell .home-footer-address p + p { margin-block-start: 24px; }
  .figma-shell .home-footer-address a { color: #000; }
  .figma-shell .home-footer-note { margin-block-start: 54px; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; }
  .figma-shell [data-ui="footer-meta"] { margin-block-start: 68px; text-align: center; font-size: 16px; }

  @media (max-width: 1200px) {
    .figma-shell [data-ui="rail"] { grid-template-columns: 240px minmax(120px, 1fr) minmax(0, 1fr); gap: 20px; }
    .figma-shell [data-ui="brand"], .figma-shell [data-ui="brand"] a, .figma-shell .home-brand-logo { inline-size: 240px; block-size: 100px; }
    .figma-shell [data-ui="primary-nav"] { min-inline-size: 0; }
    .figma-shell [data-ui="primary-nav"] a { padding-inline: 12px; }
  }

  @media (max-width: 820px) {
    .figma-shell [data-ui="rail"] { display: block; padding-block: 16px; overflow: hidden; }
    .figma-shell [data-ui="brand"], .figma-shell [data-ui="brand"] a, .figma-shell .home-brand-logo { inline-size: 240px; block-size: 92px; }
    .figma-shell [data-ui="rail-contact"] { display: none; }
    .figma-shell [data-ui="primary-nav"] { inline-size: 100%; max-inline-size: 100%; margin-block-start: 16px; overflow: hidden; }
    .figma-shell [data-ui="primary-nav"] ul { flex-wrap: wrap; justify-content: flex-start; }
    .figma-shell [data-ui="primary-nav"] a { padding-inline: 12px; }
    .figma-shell [data-ui="footer"] { min-block-size: 0; }
    .figma-shell .home-footer-links { grid-template-columns: 1fr; gap: 24px; }
    .figma-shell .home-footer-links img { order: -1; }
    .figma-shell .home-footer-links nav, .figma-shell .home-footer-links nav:last-child { justify-content: flex-start; flex-wrap: wrap; }
    .figma-shell .home-footer-address p { font-size: 32px; }
    .figma-home :where(h1, h2, h3), .figma-shell main :where(h1, h2, h3) { overflow-wrap: anywhere; }
  }

  @media (max-width: 820px) {
    .figma-home [data-ui="rail"], .figma-shell [data-ui="rail"] { position: relative; z-index: 30; overflow: visible; }
    .figma-home [data-ui="rail-toggle"], .figma-shell [data-ui="rail-toggle"] {
      position: absolute;
      inset-block-start: 16px;
      inset-inline-end: 12px;
      z-index: 2;
      display: inline-flex;
      inline-size: 48px;
      block-size: 48px;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--yellow);
      background: var(--black);
      color: var(--yellow);
      font-size: 0;
    }
    .figma-home [data-ui="rail-toggle"]::before, .figma-shell [data-ui="rail-toggle"]::before {
      inline-size: 24px;
      block-size: 2px;
      background: currentColor;
      box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
      content: "";
    }
    .figma-home [data-ui="rail-toggle"][aria-expanded="true"]::before, .figma-shell [data-ui="rail-toggle"][aria-expanded="true"]::before {
      box-shadow: none;
      transform: rotate(45deg);
    }
    .figma-home [data-ui="rail-toggle"][aria-expanded="true"]::after, .figma-shell [data-ui="rail-toggle"][aria-expanded="true"]::after {
      position: absolute;
      inline-size: 24px;
      block-size: 2px;
      background: currentColor;
      content: "";
      transform: rotate(-45deg);
    }
    .figma-home [data-ui="primary-nav"], .figma-shell [data-ui="primary-nav"] { display: none; }
    .figma-home [data-ui="rail"][data-open="true"] [data-ui="primary-nav"], .figma-shell [data-ui="rail"][data-open="true"] [data-ui="primary-nav"] {
      display: block;
      margin-block-start: 16px;
    }
    .figma-home [data-ui="veil"][data-visible="true"], .figma-shell [data-ui="veil"][data-visible="true"] {
      position: fixed;
      z-index: 20;
      display: block;
      inset: 0;
      background: rgb(0 0 0 / 68%);
    }
  }
}