/* ARACGIDER-BRAND-SYSTEM-001 — neutral first, orange signature.
   Supplied artwork is immutable. Compatibility aliases carry neutral roles,
   never a second brand palette. Orange is reserved for small signature details. */
:root{
  --brand-source:#fd4a00;
  --brand-page:#f4eee3;
  --brand-card:#fcf9f3;
  --brand-text:#27231e;
  --brand-text-muted:#625d55;
  --brand-primary:var(--brand-text);
  --brand-primary-hover:#39342d;
  --brand-primary-active:#171512;
  --brand-soft:var(--brand-card);
  --brand-soft-hover:#f5f2ed;
  --brand-border:#d4cdc2;
  --brand-text-on-light:var(--brand-text);
  --brand-focus:var(--brand-text);
  --brand-disabled-bg:#e7e3dc;
  --brand-disabled-text:#68635b;
  --brand-ink:var(--brand-text-on-light);
  --brand-on-primary:#ffffff;
  --brand-tint:var(--brand-soft);
  --paper:var(--brand-page);
  --surface:var(--brand-card);
  --ink:var(--brand-text);
  --ink2:var(--brand-text-muted);
  --ink3:var(--brand-text-muted);
  --gold:var(--brand-ink);
  --gold2:var(--brand-ink);
  --teal:var(--brand-ink);
  --brand:var(--brand-ink);
  --aa-teal:var(--brand-ink);
}
html body .am-brand-header{display:block;width:182px;height:auto;aspect-ratio:950/209;max-width:100%;object-fit:contain;flex:none}
html body .am-brand-footer{display:block;width:154px;height:auto;aspect-ratio:950/209;max-width:100%;object-fit:contain}
.am-brand-footer-link{display:inline-block;margin:0 auto 20px;line-height:1}
.am-brand-footer-link:focus-visible{outline:2px solid var(--brand-ink);outline-offset:4px;border-radius:3px}
/* Simple public footers: one centered stack, without the rich footer's link margin. */
html body .am-simple-footer{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
html body .am-simple-footer>.am-brand-footer-link{display:block;flex:none;margin:0}
html body .am-simple-footer>.am-footer-description{margin:0;padding:0;max-width:100%;font:inherit;color:inherit}
html body .logo,html body .legal-bar-brand,html body .source-brand,html body .hovr-logo{gap:0!important}
/* Clear primary hierarchy without large areas of raw source orange. */
html body :is(#cta,#cmp-cta,#cta-mobile,.cookie-btn.primary,.am-minimal-editor-controls>button,.cmp-personal-apply,.seo-action.primary,.sp-btn.primary):not(:disabled):not(.is-disabled){background:var(--brand-primary)!important;color:var(--brand-on-primary)!important}
html body :is(#cta,#cmp-cta,#cta-mobile,.cookie-btn.primary,.am-minimal-editor-controls>button,.cmp-personal-apply,.seo-action.primary,.sp-btn.primary):not(:disabled):not(.is-disabled):hover{background:var(--brand-primary-hover)!important;color:var(--brand-on-primary)!important}
html body :is(#cta,#cmp-cta,#cta-mobile,.cookie-btn.primary,.am-minimal-editor-controls>button,.cmp-personal-apply,.seo-action.primary,.sp-btn.primary):not(:disabled):not(.is-disabled):active{background:var(--brand-primary-active)!important}
html body :is(.seo-action[data-open-compare],#am-minimal-compare){background:var(--brand-soft)!important;color:var(--brand-text-on-light)!important;border-color:var(--brand-border)!important;box-shadow:none!important}
html body :is(.seo-action[data-open-compare],#am-minimal-compare):hover{background:var(--brand-soft-hover)!important;border-color:var(--brand-text-on-light)!important}
html body :is(#cta,#cmp-cta,#cta-mobile):is(:disabled,.is-disabled){background:var(--brand-disabled-bg)!important;color:var(--brand-disabled-text)!important;box-shadow:none!important}
/* The incomplete single-calculator CTA keeps its neutral label on hover. */
html body:not(.result-mode):not(.compare-mode) .am-sprint2-card #cta:is(:disabled,.is-disabled,[aria-disabled="true"]):hover{color:var(--brand-disabled-text)!important}
/* Existing arrows supply the signature; no new icons, labels or layout. */
html body #cta:not(:disabled):not(.is-disabled) .cta-arr{color:var(--brand-source)!important;background:transparent!important}
html body .seo-action[data-open-compare]::after{color:var(--brand-source)!important}
/* Large headlines and financial typography use neutral ink, including em. */
html body #hero .hero-h,html body #hero .hero-h em{color:var(--brand-text)!important}
/* Links retain readable text; the small hover underline is decorative. */
html body a:hover{text-decoration-color:var(--brand-source)}
/* Focus destinations are headings, not interactive boxes. Keep focus and its
   compact keyboard cue, without a rectangle around the full-width heading. */
html body :is(h1,h2,h3,h4)[tabindex="-1"]:focus{outline:none!important;box-shadow:none!important}
html body :is(h1,h2,h3,h4)[tabindex="-1"]:focus-visible{text-decoration:underline;text-decoration-color:var(--brand-focus);text-underline-offset:5px;text-decoration-thickness:2px}
html body #source-title{text-decoration-line:none}
/* The real input, not its surrounding section, owns the high-contrast cue. */
html body .am-sprint2-card #form :is(select,#s-annual-km):focus-visible{border-color:var(--brand-focus)!important}
html body :is(#cta,#cmp-cta,#cta-mobile,.cookie-btn.primary):focus-visible,
html body #calculator #cta:focus-visible{outline:none!important;box-shadow:inset 0 0 0 2px var(--brand-on-primary)!important}
@media(max-width:767px){html body .am-brand-header{width:136px}}

/* P1 closure only: responsive header, result context and public links. */
@media(max-width:767px){
  html body.compare-mode .page>.hd{display:flex!important;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;height:auto!important;min-height:0;padding-top:20px!important}
  html body.compare-mode .page>.hd :is(.hd-center,.hd-right){position:static!important;transform:none!important;width:auto;flex:none}
  html body.compare-mode .page>.hd .hd-right{margin-left:auto}
  html body.compare-mode .hd-actions{flex-wrap:wrap;gap:8px}
  html body.compare-mode .hd-actions .hd-story-link{font-size:12px!important;min-height:44px;padding:8px 12px!important}
}
html body a{color:var(--brand-text);text-underline-offset:3px;text-decoration-thickness:1px}
html body :is(main,footer,article,section) p a:not(.primary):not(.secondary){text-decoration-line:underline}
html body .foot p.footer-story-cta-wrap a.footer-story-cta{text-decoration-line:none}
html body a:focus-visible{outline:2px solid var(--brand-focus);outline-offset:3px;text-decoration-color:var(--brand-source)}
html body p a[href^="/araclar/"]{display:inline-block;max-width:100%;vertical-align:baseline;overflow-wrap:anywhere}
html body footer a[href^="mailto:"]{overflow-wrap:anywhere}
.am-result-context{max-width:560px;margin:16px auto 0;color:var(--brand-text-muted);font-size:13px;line-height:1.5}
.am-result-context p{margin:4px 0}
.am-result-context button,.cmp-energy-context button{font:inherit;color:var(--brand-text);border:0;background:transparent;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.am-result-context button:focus-visible,.cmp-energy-context button:focus-visible{outline:2px solid var(--brand-focus);outline-offset:3px}
.cmp-energy-context{display:block;max-width:36em;line-height:1.5;margin-top:6px;color:var(--brand-text-muted);font-size:12px}