/* ==========================================================================
   Section: comparison — "One team. Every channel. Zero guesswork."
   Figma "Home Page" y 9295→10840 (1920 frame) · "Mobile Home" y 6645→7457 (402)
   Eyebrow + two-column header, then a feature-by-feature comparison table:
   feature (name + description) | Media Exchange tick | agency cross | in-house cross,
   with a 2px white rule under every row (none above the first).
   Desktop icon-column centres sit at x=1034 / 1325 / 1610; the column widths
   below (297 / 285 / 352 with a 67px right pad) reproduce exactly that.
   ========================================================================== */

.section--comparison {
  padding-top: 144px;    /* (9295 − 9007 partners bottom) / 2 */
  padding-bottom: 110px; /* (11061 team top − 10840) / 2 */
}
/* variant "service" — Figma "Social Media Advertising" 4506:165: the table is identical (every offset is
   the homepage's − 1072); only the gaps around it differ: 350 above (text-image photo bottom 7873 →
   eyebrow 8223) and 350 below (last rule 9768 → closing-CTA rule 10118), split half each side. */
.section--comparison--service {
  padding-top: min(9.115vw, 175px);
  padding-bottom: min(9.01vw, 173px);   /* 173 + the 2px rule + 175 CTA padding = 350 rule-centre to rule-centre */
}

/* ---- Header ------------------------------------------------------------- */
.section--comparison .comparison__head { margin-top: 32px; }               /* eyebrow bottom 9320 → heading 9352 */
.section--comparison .comparison__title { max-width: 825px; }              /* wraps "EVERY CHANNEL." / "ZERO GUESSWORK." */
.section--comparison .comparison__intro { max-width: 849px; margin-top: 5px; } /* paragraph top 9357 vs heading 9352 */

/* ---- Table ---------------------------------------------------------------- */
.section--comparison .comparison__table {
  width: 100%;
  margin-top: 62px;            /* heading bottom 9580 → logo top 9642 */
  table-layout: fixed;
  border-collapse: separate;   /* rules live on the cells so they travel with a row when it reveals */
  border-spacing: 0;
}

/* Column widths as a share of the 1720px table (297 / 285 / 352); the feature column takes the rest (786) */
.section--comparison .comparison__col--mx      { width: 17.267%; }
.section--comparison .comparison__col--agency  { width: 16.57%; }
.section--comparison .comparison__col--inhouse { width: 20.465%; }

/* Cell reset kept at low specificity (0,1,1) so the class rules below win */
.section--comparison th,
.section--comparison td {
  padding: 0;
  font-weight: inherit;
  text-align: left;
  vertical-align: middle;
}

.section--comparison .comparison__cell { text-align: center; }
.section--comparison .comparison__cell--inhouse { padding-right: 67px; } /* centres content on x=1610 inside 1468→1820 */

/* Header row: logo 162×50 at top, labels 24px uppercase centred over their columns */
.section--comparison .comparison__row--head th {
  padding-bottom: 7px;         /* logo bottom 9692 → row-1 title 9734 = 42 = 7 + 35 */
  vertical-align: top;
}
.section--comparison .comparison__logo {
  width: 162px;
  height: 50px;
  margin-inline: auto;
}
.section--comparison .comparison__col-label {
  display: block;
  height: 46px;                /* two 22.8px lines; a wider fallback font may wrap "IN-HOUSE" to three, which then overflows instead of growing the row */
  margin: 3px auto 0;          /* labels sit 2–5px below the logo top */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: var(--lh-display);
  text-transform: uppercase;
  text-align: center;
}
.section--comparison .comparison__cell--agency  .comparison__col-label { max-width: 170px; } /* Figma text boxes */
.section--comparison .comparison__cell--inhouse .comparison__col-label { max-width: 114px; }

/* Body rows */
.section--comparison .comparison__row td,
.section--comparison .comparison__row th { border-bottom: 2px solid var(--fg); }
.section--comparison .comparison__row--head th { border-bottom: 0; }

.section--comparison .comparison__feature {
  padding: 35px 0 37px;        /* fallback for any extra CMS row: rule → title 35; description → next rule 37 */
}
/* FIGMA-FIDELITY (order-dependent, safe to drop on the CMS — the fallback above then applies):
   the Figma rows are not uniform (rule → title 34–40px, description → rule 31–41px), so each of the
   seven rows carries its own padding to keep every rule and title within a pixel of the design. */
.section--comparison tbody tr:nth-child(1) .comparison__feature { padding: 35px 0 34px; } /* 9734 → rule 9848 */
.section--comparison tbody tr:nth-child(2) .comparison__feature { padding: 36px 0 40px; } /* 9885 → rule 10030 */
.section--comparison tbody tr:nth-child(3) .comparison__feature { padding: 40px 0 34px; } /* 10071 → rule 10185 */
.section--comparison tbody tr:nth-child(4) .comparison__feature { padding: 34px 0 36px; } /* 10220 → rule 10361 */
.section--comparison tbody tr:nth-child(5) .comparison__feature { padding: 34px 0 34px; } /* 10396 → rule 10510 */
.section--comparison tbody tr:nth-child(6) .comparison__feature { padding: 34px 0 31px; } /* 10545 → rule 10659 */
.section--comparison tbody tr:nth-child(6) .comparison__desc    { margin-top: 19px; }     /* "not months" sits 19 below its title, not 16 */
.section--comparison tbody tr:nth-child(7) .comparison__feature { padding: 34px 0 41px; } /* 10694 → rule 10840 */
/* Icons are not always on the row's midline in the Figma (row 1: tick centre 9783.5, crosses 9779.5 vs
   cell middle 9773). A one-sided cell padding shifts a middle-aligned icon by half its value. */
.section--comparison tbody tr:nth-child(1) .comparison__cell      { padding-top: 13px; }
.section--comparison tbody tr:nth-child(1) .comparison__cell--mx  { padding-top: 21px; }
.section--comparison tbody tr:nth-child(2) .comparison__cell      { padding-bottom: 6px; }
.section--comparison tbody tr:nth-child(3) .comparison__cell      { padding-top: 4px; }
.section--comparison tbody tr:nth-child(3) .comparison__cell--mx  { padding-top: 0; padding-bottom: 8px; }
.section--comparison tbody tr:nth-child(6) .comparison__cell      { padding-top: 6px; }
.section--comparison tbody tr:nth-child(6) .comparison__cell--mx  { padding-top: 0; }
.section--comparison tbody tr:nth-child(7) .comparison__cell      { padding-top: 6px; }
.section--comparison tbody tr:nth-child(7) .comparison__cell--mx  { padding-top: 4px; }
.section--comparison .comparison__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-item);   /* 40px */
  line-height: var(--lh-display);
}
.section--comparison .comparison__desc {
  display: block;
  max-width: 703px;
  margin-top: 16px;            /* title bottom → description top */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 25px;           /* Figma rows are 25/50px tall; the 1.24 token (24.8px) drifts the rules up 0.2px per row */
}
.section--comparison .comparison__desc--narrow { max-width: 684px; } /* Figma box is 684 so it wraps after "design," */

.section--comparison .comparison__icon {
  display: block;
  margin-inline: auto;
  overflow: visible;           /* non-scaling 2px strokes may bleed past the box when scaled down */
}
.section--comparison .comparison__icon--yes { width: 35px; height: 35px; }
.section--comparison .comparison__icon--no  { width: 23px; height: 23px; color: var(--fg); }

/* ---- Small laptops (1025–1140): the 24px "TRADITIONAL" label (169px) outgrows its 152–166px column */
@media (max-width: 1140px) {
  .section--comparison .comparison__col-label { font-size: 20px; }   /* ≈141px */
}

/* ---- Tablet: header stacks (base.css), comparison columns tighten -------- */
@media (max-width: 1024px) {
  .section--comparison .comparison__intro { margin-top: 0; }
  .section--comparison .comparison__col--mx,
  .section--comparison .comparison__col--agency,
  .section--comparison .comparison__col--inhouse { width: 140px; }
  .section--comparison .comparison__cell--inhouse { padding-right: 0; }
  .section--comparison .comparison__col-label { font-size: 16px; }
}

/* ---- Small tablets (641–800): three 140px icon columns starved the feature
   column (154px at 641 — names overflowed, descriptions wrapped to 7–8 lines) */
@media (max-width: 800px) {
  .section--comparison .comparison__col--mx,
  .section--comparison .comparison__col--agency,
  .section--comparison .comparison__col--inhouse { width: 90px; }   /* feature column: 304px at 641 */
  .section--comparison .comparison__col-label { font-size: 12px; }  /* "TRADITIONAL" ≈85px inside 90 */
}

/* ---- Mobile (Figma "Mobile Home", 402 wide) ------------------------------ */
@media (max-width: 640px) {
  .section--comparison {
    padding-top: 48px;         /* (6645 − 6549) / 2 */
    padding-bottom: 50px;      /* (7558 − 7457) / 2 */
  }
  .section--comparison--service {
    padding-top: 55px;         /* "Mobile Category" 4148:2776: (6539 − text-image bottom 6428) / 2 */
    padding-bottom: 53px;      /* (closing-CTA rule 7461 − last rule 7351) / 2 − the 2px rule */
  }
  .section--comparison .eyebrow { gap: 16px; }                     /* dot 20→26, text at 42 */
  .section--comparison .comparison__head { margin-top: 15px; row-gap: 19px; } /* eyebrow bottom 6665 → 6680; heading bottom 6782 → 6801 */
  .section--comparison .comparison__title { max-width: none; font-size: 36px; }
  .section--comparison .comparison__intro { max-width: 360px; }

  .section--comparison .comparison__table { margin-top: 44px; }    /* intro bottom 6876 → logo top 6920 */

  /* Icon-column centres at x=197 / 275 / 353 inside the 20→382 content area */
  .section--comparison .comparison__col--mx      { width: 78px; }
  .section--comparison .comparison__col--agency  { width: 78px; }
  .section--comparison .comparison__col--inhouse { width: 68px; }
  .section--comparison .comparison__cell--inhouse { padding-left: 10px; }

  .section--comparison .comparison__row--head th { padding-bottom: 10px; } /* logo bottom 6944 → row-1 title 6972 = 10 + 18 */
  .section--comparison .comparison__logo { width: 23px; height: 23px; }    /* logomark only (Figma crops the wordmark to the X) */
  .section--comparison .comparison__col-label { height: 21px; margin-top: 2px; font-size: 11px; }
  .section--comparison .comparison__cell--agency  .comparison__col-label { max-width: 78px; }
  .section--comparison .comparison__cell--inhouse .comparison__col-label { max-width: 53px; }

  .section--comparison .comparison__feature { padding: 18px 0 17px; } /* fallback for extra CMS rows */
  /* Per-row values from the Figma mobile frame (rows are 94 / 75 / 67 / 64 / 73 / 70 tall, not by line count) */
  .section--comparison tbody tr:nth-child(1) .comparison__feature { padding: 18px 0 23px; } /* 6971 → rule 7014 */
  .section--comparison tbody tr:nth-child(2) .comparison__feature { padding: 17px 0 18px; } /* 7032 → rule 7108 */
  .section--comparison tbody tr:nth-child(3) .comparison__feature { padding: 17px 0 18px; } /* 7126 → rule 7183 */
  .section--comparison tbody tr:nth-child(4) .comparison__feature { padding: 12px 0 15px; } /* 7196 → rule 7250 */
  .section--comparison tbody tr:nth-child(5) .comparison__feature { padding: 20px 0 23px; } /* 7271 → rule 7314 */
  .section--comparison tbody tr:nth-child(6) .comparison__feature { padding: 15px 0 18px; } /* 7330 → rule 7387 */
  .section--comparison tbody tr:nth-child(7) .comparison__feature { padding: 14px 0 16px; } /* 7402 → rule 7457 */
  /* Mobile icons sit on the midline except row 1 (tick centre 6978 vs cell middle 6983.5): reset the desktop nudges */
  .section--comparison tbody tr:nth-child(n) .comparison__cell,
  .section--comparison tbody tr:nth-child(n) .comparison__cell--mx { padding-top: 0; padding-bottom: 0; }
  .section--comparison tbody tr:nth-child(1) .comparison__cell,
  .section--comparison tbody tr:nth-child(1) .comparison__cell--mx { padding-bottom: 10px; }
  .section--comparison .comparison__name {
    max-width: 129px;          /* wraps "one team for / creative + / digital" as in Figma */
    font-size: 20px;
    text-transform: none;
  }
  .section--comparison .comparison__desc { display: none; }

  .section--comparison .comparison__icon--yes { width: 24.5px; height: 24.5px; }
  .section--comparison .comparison__icon--no  { width: 11.5px; height: 11.5px; }
}

/* ---- Small phones (≤375): the 78/78/68 columns leave <100px for the names ----- */
@media (max-width: 375px) {
  .section--comparison .comparison__col--mx,
  .section--comparison .comparison__col--agency { width: 64px; }
  .section--comparison .comparison__col--inhouse { width: 56px; }
  .section--comparison .comparison__name { font-size: 18px; }
  .section--comparison .comparison__col-label { font-size: 9px; }   /* "TRADITIONAL" ≈63px inside 64 */
}


/* ---- Mobile accordion (Emily: "accordion open to reveal subtext when clicked") --
   ≤640px: the row title is the toggle (js/main.js initAccordions); the subtext
   is collapsed until the row is opened, one row open at a time. */
@media (max-width: 640px) {
  .section--comparison [data-accordion] .comparison__feature { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  /* Block-level flex (no inline strut adding ~3–6px to every row) sized to its content; the chevron + gap
     (24px) are added to the 129px Figma text width so the names still wrap as in the design — the chevron
     may run up to 15px into the empty left side of the tick column (at 402: tick x≥185, chevron ends ≤173;
     the 100% + 15px cap keeps it clear of the tick on narrower phones). */
  .section--comparison [data-accordion] .comparison__name {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: min(153px, calc(100% + 15px));
    transition: color .3s ease;
  }
  /* A clear 14×9 chevron (stroked SVG, currentColor) that turns over when open */
  .section--comparison [data-accordion] .comparison__name::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 9px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateY(1px);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
  }
  .section--comparison [data-accordion] .comparison__row.is-open .comparison__name::after { transform: translateY(1px) rotate(180deg); }
  /* The subtext unfolds (max-height) while its text fades in and rises */
  /* Closed rows carry no subtext space at all (margin 0), so they keep the Figma row heights */
  .section--comparison [data-accordion] .comparison__row .comparison__desc {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition:
      max-height .5s cubic-bezier(.22, 1, .36, 1),
      margin-top .5s cubic-bezier(.22, 1, .36, 1),
      opacity .4s ease .05s,
      transform .5s cubic-bezier(.22, 1, .36, 1) .05s;
  }
  .section--comparison [data-accordion] .comparison__row.is-open .comparison__desc {
    max-height: 26em;   /* clears the longest feature copy (~9 lines) at any phone width */
    margin-top: 16px;
    opacity: 1;
    transform: translateY(0);
  }
  .section--comparison [data-accordion] .comparison__row.is-open .comparison__name { color: var(--accent); }
  @media (prefers-reduced-motion: reduce) {
    .section--comparison [data-accordion] .comparison__desc,
    .section--comparison [data-accordion] .comparison__name::after { transition: none; }
  }
}


/* ==========================================================================
   Style "contrast" — a service's own two-column table from the client's v3 docs
   ("Fragmented SEO" vs "The Media Exchange approach"). No Figma frame draws it,
   so it borrows the generic table's language above: the same heading and intro
   column, the 24px uppercase column labels, display-type rows (--fs-item) with
   the generic row padding (35 / 37) and a 2px white rule under every row, and the
   Media Exchange side marked the way the generic MX column is — green label (the
   green logo's colour) and the green tick disc against the other side's white
   cross. Every rule is scoped to .section--comparison--contrast and uses its own
   elements (__side, __point, __mark, __statement), so none of the generic table's
   per-row Figma nudges or column widths can reach it — and it cannot reach them.
   ========================================================================== */

/* ---- Header: no eyebrow (the docs give none), so the heading starts the block */
.section--comparison--contrast .comparison__head { margin-top: 0; }
.section--comparison--contrast .comparison__intro p + p { margin-top: 1.24em; }   /* a blank line between paragraphs */

/* Header guard (1025+, where .grid-2 is two columns; ≤1024 base.css stacks it, so the guard stays above that).
   .grid-2's plain 860fr / 849fr tracks cannot shrink below their content, so one long unbreakable heading
   word ("PERFORMANCE" ≈497px at 64px, "CONSISTENCY,") widened the heading track and pushed the intro right,
   off the Media Exchange column below (SEO 44px at 1025, Organic Social 31px). minmax(0) tracks hold the
   860 : 849 split whatever the heading holds; .grid-2 itself is unchanged everywhere else. */
@media (min-width: 1025px) {
  .section--comparison--contrast .comparison__head { grid-template-columns: minmax(0, 860fr) minmax(0, 849fr); }
}
/* 1025–1140: the 64px --fs-h1 step is too wide for the ≈456–510px heading track ("PERFORMANCE" ≈497px), so the
   heading takes the ≤1024 --fs-h1 step (56px: "PERFORMANCE" ≈435px) and stays inside its track */
@media (min-width: 1025px) and (max-width: 1140px) {
  .section--comparison--contrast .comparison__title { font-size: 56px; }
}

/* ---- Table: two columns on the .grid-2 split, so the Media Exchange column
   starts exactly where the intro paragraph above it does (x=971 at 1920:
   871 of the 1720 content width = 860 + the 11px column gap) */
.section--comparison--contrast .comparison__side {
  vertical-align: top;
  text-align: left;
}
.section--comparison--contrast .comparison__side--left {
  width: 50.64%;   /* 871 / 1720: exact at 1920, ≤2.5px off the intro down to 1025 with the header guard above
                      (table cells ignore a calc() mixing % and px, so the .grid-2 track formula cannot be used
                      here); ≤1024 the header stacks */
  padding-right: min(3.125vw, 60px);   /* keeps a long left statement off the Media Exchange column */
}

/* Column labels: the generic .comparison__col-label type (24px uppercase display), left-aligned over the icons */
.section--comparison--contrast .comparison__side-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: var(--lh-display);
  text-transform: uppercase;
}
.section--comparison--contrast .comparison__side--mx .comparison__side-label { color: var(--accent); }

/* Rows: the generic fallback row padding (rule → text 35, text → rule 37); the 2px rule comes from the
   shared .comparison__row td rule above. The header row keeps the generic 7px (label → first row = 42). */
.section--comparison--contrast tbody .comparison__side {
  padding-top: 35px;
  padding-bottom: 37px;
}

/* One statement = icon + text. The icon sits in a fixed 35px track (the tick's size, so both columns'
   text starts line up) centred on the statement's first line. */
.section--comparison--contrast .comparison__point {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  grid-template-areas: "mark text";
  column-gap: 24px;
  align-items: start;
}
.section--comparison--contrast .comparison__point-label { display: none; grid-area: label; }   /* ≤640 only */
.section--comparison--contrast .comparison__mark {
  grid-area: mark;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(1em * var(--lh-display));   /* one statement line (the mark carries the statement's font-size) */
}
/* The 23px cross sits flush left in its 35px track, so it lines up under its column label the way the 35px
   tick lines up under the green one (centred, it started 6px in from the label). The text start is unchanged.
   The generic icon's auto side margins would keep it centred whatever the flex alignment, so they are zeroed.
   The stacked layout (≤767) centres it again: there the labels sit over the text column, not the icons. */
.section--comparison--contrast .comparison__side--left .comparison__mark { justify-content: flex-start; }
.section--comparison--contrast .comparison__side--left .comparison__mark .comparison__icon { margin-inline: 0; }
.section--comparison--contrast .comparison__mark,
.section--comparison--contrast .comparison__statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-item);   /* the generic feature-name size: 40px at 1920 */
  line-height: var(--lh-display);
}
.section--comparison--contrast .comparison__statement {
  grid-area: text;
  /* Balanced lines: no one-word last line ("look", "goal", "separately") and no break after a compound's hyphen
     ("surface- / level", "brand- / owned") in the 2–5-line display statements, and never an extra line.
     Checked on all 10 pages at 375–1920: `pretty` still left 4–23 one-word last lines per width and split
     "brand-owned" at 1440; `balance` left none. Browsers without support ignore it (plain wrapping). */
  text-wrap: balance;
}

/* ---- Tablet: the header stacks (base.css); the columns narrow, so the statements step down */
@media (max-width: 1024px) {
  .section--comparison--contrast .comparison__point { column-gap: 16px; }
  .section--comparison--contrast .comparison__mark,
  .section--comparison--contrast .comparison__statement { font-size: 26px; }
  .section--comparison--contrast .comparison__side-label { font-size: 20px; }
}
@media (max-width: 800px) {   /* 768–800 only: ≤767 the pairs stack (below) */
  .section--comparison--contrast .comparison__mark,
  .section--comparison--contrast .comparison__statement { font-size: 22px; }
  .section--comparison--contrast .comparison__side-label { font-size: 16px; }
}

/* ---- Stacked (≤767): each pair stacks — the other side, then Media Exchange — each with its column label
   above the statement (mobile row padding and icon sizes from the generic mobile table). It starts at 767,
   not the site's 640 mobile step: side by side at 641–767 the two ≈220–280px columns ran the longer 22px
   statements to 5 lines. The header row is visually hidden (still read as the column headers); the roles in
   the markup keep the table semantics now that the rows and cells are display: block. */
@media (max-width: 767px) {
  .section--comparison--contrast .comparison__table,
  .section--comparison--contrast tbody,
  .section--comparison--contrast tbody .comparison__row,
  .section--comparison--contrast tbody .comparison__side { display: block; width: auto; }

  .section--comparison--contrast .comparison__thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  .section--comparison--contrast tbody .comparison__side--left {
    padding: 18px 0 0;
    border-bottom: 0;                  /* one rule per pair, under the Media Exchange statement */
  }
  .section--comparison--contrast tbody .comparison__side--mx { padding: 16px 0 18px; }

  .section--comparison--contrast .comparison__point {
    grid-template-columns: 24.5px minmax(0, 1fr);   /* the mobile tick's size */
    grid-template-areas: ". label" "mark text";
    column-gap: 14px;
  }
  .section--comparison--contrast .comparison__point-label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    line-height: var(--lh-display);
    text-transform: uppercase;
  }
  .section--comparison--contrast .comparison__side--mx .comparison__point-label { color: var(--accent); }
  .section--comparison--contrast .comparison__side--left .comparison__mark { justify-content: center; }
  .section--comparison--contrast .comparison__side--left .comparison__mark .comparison__icon { margin-inline: auto; }
  .section--comparison--contrast .comparison__mark,
  .section--comparison--contrast .comparison__statement { font-size: 20px; }   /* the generic mobile name size */
  /* The generic mobile icon sizes (set ≤640 above), repeated here so 641–767 stacks with the same icons */
  .section--comparison--contrast .comparison__icon--yes { width: 24.5px; height: 24.5px; }
  .section--comparison--contrast .comparison__icon--no  { width: 11.5px; height: 11.5px; }
}