:root {
  --ecu-bg: #f4f6f2;
  --ecu-surface: #ffffff;
  --ecu-ink: #1c2620;
  --ecu-muted: #56645b;
  --ecu-line: #cbd5cd;
  --ecu-cta: #155c42;
  --ecu-cta-hover: #0f4934;
  --ecu-focus: #155c42;
  --ecu-signal: #d9ef62;
  --ecu-caution: #a53f2b;
  --ecu-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ecu-font-display: "Avenir Next", "Trebuchet MS", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body.ecu-body {
  margin: 0;
  background: var(--ecu-bg);
  color: var(--ecu-ink);
  font-family: var(--ecu-font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 3px solid var(--ecu-focus); outline-offset: 3px; }
a { color: var(--ecu-cta); text-underline-offset: .18em; }
a:hover { color: var(--ecu-cta-hover); }
img { display: block; max-width: 100%; height: auto; }
.ecu-wrap { width: min(100% - 2.5rem, 76rem); margin-inline: auto; padding-inline: 0; }

.ecu-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ecu-line);
  background: #fff;
}
.ecu-article > .ecu-header { position: static; top: auto; z-index: auto; background: transparent; border-bottom: 0; }
.ecu-header__in { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ecu-logo { display: inline-flex; flex-direction: column; gap: .2rem; color: var(--ecu-ink); text-decoration: none; flex: 0 0 auto; }
.ecu-logo__word { font: 800 1.2rem/1 var(--ecu-font-display); }
.ecu-ticks--logo { display: block; width: 4.5rem; height: .45rem; border-top: 1px solid var(--ecu-cta); background: repeating-linear-gradient(90deg, var(--ecu-cta) 0 1px, transparent 1px 7px); }
.ecu-nav { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2vw, 2.3rem); }
.ecu-nav a, .ecu-drawer__nav a { color: var(--ecu-ink); font-size: .94rem; font-weight: 650; text-decoration: none; }
.ecu-nav a:hover, .ecu-drawer__nav a:hover { color: var(--ecu-cta); text-decoration: underline; text-underline-offset: .3em; }
.ecu-menu-btn { display: none; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--ecu-line); background: var(--ecu-surface); color: var(--ecu-ink); cursor: pointer; }
.ecu-drawer { position: static; inset: auto; z-index: auto; padding: .25rem 0 1rem; background: var(--ecu-surface); }
.ecu-drawer__nav { width: min(100% - 2.5rem, 76rem); margin-inline: auto; display: grid; }
.ecu-drawer__nav a { padding: .8rem 0; border-top: 1px solid var(--ecu-line); }

.ecu-page { width: min(100% - 2.5rem, 76rem); margin: 0 auto; padding: 3.25rem 0 5rem; }
.ecu-article { max-width: 52rem; margin-inline: auto; }
.ecu-page h1, .ecu-article h1, .ecu-h1 {
  max-width: 19ch;
  margin: 0 0 1.25rem;
  color: var(--ecu-ink);
  font: 800 3rem/1.08 var(--ecu-font-display);
  letter-spacing: 0;
}
.ecu-page h2, .ecu-article h2, .ecu-h2 {
  margin: 2.7rem 0 .8rem;
  color: var(--ecu-ink);
  font: 750 1.65rem/1.2 var(--ecu-font-display);
  letter-spacing: 0;
}
.ecu-page h3, .ecu-article h3 { margin: 1.8rem 0 .55rem; font: 750 1.18rem/1.3 var(--ecu-font-display); }
.ecu-page p, .ecu-article p { max-width: 70ch; margin: 0 0 1rem; }
.ecu-page li, .ecu-article li { max-width: 70ch; }
.ecu-ingress, .ecu-lead, .ecu-intro, .ecu-article__lead {
  color: var(--ecu-muted);
  font-size: 1.16rem;
  line-height: 1.55;
  margin: 0 0 1.35rem;
}
.ecu-answer, .ecu-answer__lead, .ecu-answer__text, .ecu-answer-text {
  max-width: 70ch;
  margin: 1.5rem 0 1.8rem;
  padding: .85rem 1.15rem;
  border-left: 4px solid var(--ecu-cta);
  background: var(--ecu-surface);
  color: var(--ecu-ink);
  font-size: 1.04rem;
  line-height: 1.55;
}
.ecu-answer p, .ecu-answer__lead p, .ecu-answer__text p, .ecu-answer-text p { margin: 0; }
.ecu-note, .ecu-caption, .ecu-sources, .ecu-related { color: var(--ecu-muted); font-size: .9rem; }
.ecu-list { margin: 1rem 0 1.6rem; padding-left: 1.25rem; list-style: disc; }
.ecu-list li { padding: .22rem 0 .22rem .25rem; }
.ecu-section { margin: 2.6rem 0; }
.ecu-section > h2:first-child { margin-top: 0; }
.ecu-page a:not(.btn-primary):not(.product-card__cta) { text-decoration-thickness: .08em; }

.ecu-table-wrap { margin: 1.5rem 0 1.75rem; border-top: 2px solid var(--ecu-ink); border-bottom: 1px solid var(--ecu-line); overflow-x: auto; }
.ecu-table { width: 100%; border-collapse: collapse; background: var(--ecu-surface); }
.ecu-table th, .ecu-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--ecu-line); text-align: left; vertical-align: top; }
.ecu-table thead th { background-image: none; background-color: #edf1ec; color: var(--ecu-muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.ecu-table td:first-child { width: 22%; font-weight: 700; }
.ecu-faq { border-top: 1px solid var(--ecu-line); padding: .8rem 0; }
.ecu-faq:last-child { border-bottom: 1px solid var(--ecu-line); }
.ecu-faq summary { cursor: pointer; font-weight: 700; padding: .15rem 0; }
.ecu-faq[open] summary { margin-bottom: .65rem; }
.ecu-faq p { margin-bottom: .2rem; }

.product-card { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0,1fr); gap: 1.5rem; margin: 1rem 0 1.5rem; border-block: 1px solid var(--ecu-line); background: var(--ecu-surface); }
.product-card__media { min-height: 16rem; background: #edf1ec; }
.product-card__media img { width: 100%; height: 100%; min-height: 16rem; object-fit: contain; }
.product-card__body { display: flex; flex-direction: column; gap: .7rem; padding: 1.25rem 1.25rem 1.25rem 0; }
.product-card__name { margin: 0; font: 750 1.25rem/1.25 var(--ecu-font-display); }
.product-card__verdict { margin: 0; }
.product-card__price { margin: .2rem 0 0; font-weight: 700; }
.product-card__pricedate, .product-card__merchant, .product-card__limit, .product-card__disclosure { display: block; color: var(--ecu-muted); font-size: .87rem; font-weight: 400; }
.btn-primary, .product-card__cta, .el-home-link {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .72rem 1.15rem;
  border: 1px solid var(--ecu-cta);
  border-radius: 2px;
  background: var(--ecu-cta);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.btn-primary:hover, .product-card__cta:hover, .el-home-link:hover { background: var(--ecu-cta-hover); color: #fff; }

.el-front { width: min(100% - 2.5rem, 76rem); margin: 0 auto; padding: 3.5rem 0 5rem; }
.el-home-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(20rem,.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; padding: 1rem 0 3.25rem; border-bottom: 1px solid var(--ecu-line); }
.el-home-copy { max-width: 36rem; padding-top: .45rem; }
.el-home-copy h1 { max-width: 13ch; margin: 0 0 1rem; color: var(--ecu-ink); font: 800 3.4rem/1.05 var(--ecu-font-display); letter-spacing: 0; }
.el-home-copy .el-intro { max-width: 42ch; margin: 0 0 1.5rem; color: var(--ecu-muted); font-size: 1.2rem; line-height: 1.55; }
.el-home-copy .el-home-link { margin-top: .2rem; }
.el-route-board { padding-top: .25rem; border-top: 5px solid var(--ecu-cta); }
.el-route-board h2 { margin: .85rem 0 .5rem; font: 750 1.15rem/1.35 var(--ecu-font-display); }
.el-route-list { margin: 0; padding: 0; list-style: none; counter-reset: route; }
.el-route-list li { counter-increment: route; border-top: 1px solid var(--ecu-line); }
.el-route-list li:last-child { border-bottom: 1px solid var(--ecu-line); }
.el-route-list a { position: relative; display: grid; grid-template-columns: 1.8rem minmax(0,1fr) auto; gap: .2rem .65rem; align-items: start; padding: .78rem 0; color: var(--ecu-ink); text-decoration: none; }
.el-route-list a::before { content: counter(route, decimal-leading-zero); grid-row: span 2; color: var(--ecu-cta); font: 750 .78rem/1.7 var(--ecu-font-display); }
.el-route-title { font-weight: 720; line-height: 1.35; }
.el-route-note { grid-column: 2; color: var(--ecu-muted); font-size: .88rem; line-height: 1.4; }
.el-route-arrow { grid-column: 3; grid-row: 1 / span 2; color: var(--ecu-cta); font-size: 1.1rem; }
.el-route-list a:hover .el-route-title { text-decoration: underline; text-underline-offset: .2em; }
.el-section { padding: 3rem 0; border-bottom: 1px solid var(--ecu-line); }
.el-section h2 { max-width: 24ch; margin: 0 0 1rem; font: 750 1.8rem/1.18 var(--ecu-font-display); }
.el-section > p { max-width: 68ch; color: var(--ecu-muted); }
.el-topic-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 3rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.el-topic-list li { border-top: 1px solid var(--ecu-line); }
.el-topic-list li:last-child { border-bottom: 1px solid var(--ecu-line); }
.el-topic-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; color: var(--ecu-ink); font-weight: 680; text-decoration: none; }
.el-topic-list a::after { content: "→"; flex: 0 0 auto; color: var(--ecu-cta); }
.el-topic-list a:hover { color: var(--ecu-cta); }
.el-highlight { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 1.2rem; padding: 1.2rem 0; border-block: 1px solid var(--ecu-cta); }
.el-highlight p { max-width: 55ch; margin: 0; }
.el-highlight strong { display: block; margin-bottom: .2rem; font: 750 1.08rem/1.3 var(--ecu-font-display); }

.ecu-footer { margin-top: 2rem; background: #173b2d; color: #f3f6ef; }
.ecu-footer__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; padding-block: 2.75rem; }
.ecu-footer__brand p { max-width: 30ch; color: #d2ded4; }
.ecu-footer__head { margin: 0 0 .6rem; color: #d9ef62; font: 750 .8rem/1.3 var(--ecu-font-display); letter-spacing: .07em; text-transform: uppercase; }
.ecu-footer ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.ecu-footer a { color: #f3f6ef; text-decoration: underline; text-underline-offset: .2em; }
.ecu-footer a:hover { color: var(--ecu-signal); }
.ecu-footer__legal { padding-block: 1rem 1.4rem; border-top: 1px solid #4a685b; color: #d2ded4; font-size: .84rem; }
.ecu-footer__legal p { margin: 0; }
.ecu-error { max-width: 48rem; }
.ecu-error__code { color: var(--ecu-line); font: 800 4rem/1 var(--ecu-font-display); }
.ecu-error__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ecu-limit-note { padding: .25rem 0 .25rem 1rem; border-left: 3px solid var(--ecu-signal); color: var(--ecu-muted); }
.ecu-body [id] { scroll-margin-top: 5.5rem; }
.ecu-sticky { z-index: 60; display: flex; position: fixed; inset: auto 0 0; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom,0px)); border-top: 2px solid var(--ecu-ink); background: var(--ecu-surface); color: var(--ecu-ink); text-decoration: none; }
.ecu-sticky__text, .ecu-sticky > span { font-weight: 700; }
.ecu-sticky__btn, .ecu-sticky > a { padding: .6rem .85rem; background: var(--ecu-cta); color: white; font-weight: 700; }
.ecu-sticky--hidden { pointer-events: none; transform: translateY(110%); }
html.ecu-has-sticky body.ecu-body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom,0px)); }

@media (max-width: 800px) {
  .ecu-wrap, .ecu-page, .el-front { width: min(100% - 2rem, 44rem); }
  .ecu-header__in { min-height: 4.15rem; gap: 1rem; }
  .ecu-nav { display: none; }
  .ecu-menu-btn { display: grid; }
  .ecu-page, .el-front { padding-top: 2rem; }
  .ecu-page h1, .ecu-article h1, .ecu-h1 { max-width: 17ch; font-size: 2.2rem; line-height: 1.08; }
  .ecu-page h2, .ecu-article h2, .ecu-h2 { margin-top: 2.1rem; font-size: 1.4rem; }
  .ecu-ingress, .ecu-lead, .ecu-intro, .ecu-article__lead { font-size: 1.05rem; }
  .el-home-hero { grid-template-columns: 1fr; gap: 2rem; padding: 0 0 2.25rem; }
  .el-home-copy h1 { max-width: 15ch; font-size: 2.35rem; }
  .el-home-copy .el-intro { font-size: 1.05rem; }
  .el-route-board { max-width: none; }
  .el-route-list a { padding-block: .72rem; }
  .el-section { padding: 2.25rem 0; }
  .el-topic-list { grid-template-columns: 1fr; gap: 0; }
  .el-highlight { align-items: flex-start; flex-direction: column; gap: .9rem; }
  .product-card { grid-template-columns: 1fr; gap: 0; }
  .product-card__media, .product-card__media img { min-height: 13rem; max-height: 20rem; }
  .product-card__body { padding: 1rem; }
  .ecu-footer__in { grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-block: 2rem; }
  .ecu-footer__brand { grid-column: 1 / -1; }
  .ecu-table-wrap { overflow: visible; border-top-width: 2px; }
  .ecu-table, .ecu-table tbody, .ecu-table tr, .ecu-table td { display: block; width: 100%; }
  .ecu-table caption { display: block; width: 100%; box-sizing: border-box; padding: .75rem .7rem; text-align: left; color: var(--ecu-muted); font-size: .85rem; line-height: 1.5; }
  .ecu-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .ecu-table tr { padding: .4rem 0; border-bottom: 1px solid var(--ecu-line); }
  .ecu-table td { display: grid; grid-template-columns: minmax(6.5rem, .7fr) minmax(0, 1.3fr); gap: .75rem; padding: .6rem .7rem; border: 0; }
  .ecu-table td:first-child { width: auto; background: #edf1ec; }
  .ecu-table td::before { content: attr(data-th); color: var(--ecu-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; }
}
@media (max-width: 480px) {
  .ecu-answer, .ecu-answer__lead, .ecu-answer__text, .ecu-answer-text { margin-block: 1.1rem; padding: .75rem .85rem; font-size: 1rem; }
  .ecu-footer__in { grid-template-columns: 1fr; }
  .ecu-footer__brand { grid-column: auto; }
  .ecu-table td { grid-template-columns: 1fr; gap: .1rem; }
}

/* Compact model choices: real product photography beside the buying verdict. */
.ecu-comparison .ecu-article { max-width: 68rem; }
.ecu-comparison .ecu-section { padding: 0; }
.ecu-comparison .ecu-disclosure { color: var(--ecu-muted); font-size: .85rem; }
.ecu-choices { display: grid; gap: 1.5rem; }
.ecu-choice { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); border: 1px solid var(--ecu-line); background: #fff; }
.ecu-choice__media { align-self: start; aspect-ratio: 3 / 2; overflow: hidden; background: #fff; }
.ecu-choice__media img { width: 100%; height: 100%; object-fit: cover; }
.ecu-choice__body { padding: 1.5rem; border-left: 1px solid var(--ecu-line); }
.ecu-choice__body .ecu-choice__verdict { color: var(--ecu-cta); font-size: .87rem; font-weight: 750; }
.ecu-comparison .ecu-choice h3 { margin: 0 0 1rem; font-size: 1.5rem; }
.ecu-choice__body p { font-size: .96rem; line-height: 1.55; }
.ecu-choice__body p:last-child { margin-bottom: 0; }
.ecu-sticky .ecu-sticky__btn, .ecu-sticky > a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; line-height: 1.2; text-decoration: none; }
.ecu-sticky:hover { color: var(--ecu-ink); }
@media (min-width: 900px) {
  .ecu-sticky { display: none; }
  html.ecu-has-sticky body.ecu-body { padding-bottom: 0; }
}
@media (max-width: 800px) {
  .ecu-choice { grid-template-columns: minmax(0,1fr); }
  .ecu-choice__body { padding: 1.15rem; border-left: 0; border-top: 1px solid var(--ecu-line); }
  .ecu-comparison .ecu-choice h3 { font-size: 1.3rem; }
  .ecu-choice .product-card__cta { width: 100%; box-sizing: border-box; }
  .ecu-comparison .ecu-table tbody th { display: block; padding: .7rem; border: 0; background: #edf1ec; }
  .ecu-sticky { gap: .65rem; padding-inline: 1rem; font-size: .86rem; }
}

.ecu-comparison h2::after, .ecu-comparison h3::after { display: none; }
.ecu-comparison .ecu-choice { border-radius: .75rem; overflow: hidden; box-shadow: 0 3px 16px rgb(28 45 36 / 5%); }
.ecu-choice__media--studio { align-self: center; padding: 1rem; }
.ecu-choice__media--studio img { object-fit: contain; }
.ecu-choice__media--studio figcaption { margin-top: .4rem; font-size: .75rem; line-height: 1.35; color: var(--ecu-muted); }
.ecu-comparison .ecu-answer { border-radius: .65rem; }
.ecu-compare-nav { display: flex; flex-wrap: wrap; gap: .65rem; margin: 1.25rem 0 2rem; }
.ecu-compare-nav a { padding: .55rem .85rem; background: #fff; border: 1px solid var(--ecu-line); border-radius: .35rem; font-size: .9rem; font-weight: 650; }
.ecu-compare-nav a[aria-current="page"] { color: #fff; background: var(--ecu-cta); border-color: var(--ecu-cta); }
.ecu-comparison .ecu-choice__price { margin: .65rem 0; color: var(--ecu-ink); font-size: 1.35rem; font-weight: 750; }
@media (max-width: 899px) { .ecu-choice__media--studio { width: 100%; box-sizing: border-box; } }

/* Generic editorial images, separate from the product cards. */
.ecu-article-image { max-width: 52rem; margin: 1.5rem auto 2rem; }
.ecu-article-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ecu-article-image figcaption { padding-top: .55rem; color: var(--ecu-muted); font-size: .86rem; line-height: 1.5; }

/* Keep ordinary cost-guide sections in the article rhythm. */
.ecu-cost-guide .ecu-section { padding-block: 0; }