/* =========================================================================
   ATN BRAND — v2

   Loaded after style.css by mu-plugins/atn-brand.php. Nothing in the theme
   is edited to pick it up.

   Contents
     1  Fonts: PP Neue Montreal (body) + Bricolage Grotesque (headings)
     2  Segment colours
     3  Product logos (.atn-plogo)
     4  Product card (.atn-show) and the grid it sits in
     5  Industry tiles
     6  Compare page
     7  Footer wordmark
   ========================================================================= */

/* ============================================================== 1 FONTS == */

/**
 * PP Neue Montreal, from the brand folder. Place the four .woff files at
 *   wp-content/themes/atn-theme-v5-5/fonts/
 * with their original names. There is no Medium in the set, so SemiBold
 * covers 500 through 700; the guide's "Medium" for CTAs renders as
 * SemiBold, which is the nearest cut you have.
 */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-Italic.woff") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-SemiBold.woff") format("woff");
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("fonts/PPNeueMontreal-SemiBolditalic.woff") format("woff");
  font-weight: 500 700; font-style: italic; font-display: swap;
}

:root {
  --font-head: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --track-callout: .15em;   /* guide: call-out text +150 */
  --track-cta: .02em;       /* guide: CTA text +20 */

  /* Defaults; atn-brand.php overrides these per page from the taxonomy. */
  --seg: #3358E0; --seg-ink: #2440B0; --seg-t: #EAEEFC; --seg-on: #FFFFFF;
}

body.atn,
body.atn button,
body.atn input,
body.atn select,
body.atn textarea {
  font-family: var(--font-body);
  font-variation-settings: normal;
}

/* Headings: Bricolage, optical kerning, tracking 0, sentence case. */
body.atn h1, body.atn h2, body.atn h3, body.atn h4,
body.atn .atn-display,
body.atn .atn-wc__title, body.atn .atn-wc__h2,
body.atn .atn-bestfront__wordmark, body.atn .atn-bestfront__leadtitle,
body.atn .atn-bestfront__railhead, body.atn .atn-bestfront__allhead,
body.atn .atn-show__name, body.atn .atn-footer__wordmark {
  font-family: var(--font-head);
  font-kerning: normal;
  letter-spacing: 0;
  text-transform: none;
}

body.atn .atn-wc__kickerlabel,
body.atn .atn-wc__award,
body.atn .atn-bestcard__type,
body.atn .atn-show__cat,
body.atn .atn-lab__stephead {
  letter-spacing: var(--track-callout);
}

body.atn .atn-btn,
body.atn .atn-chip { font-weight: 600; letter-spacing: var(--track-cta); }

/* Justified body text with hyphenation was splitting "busi-nesses" on the
   product page. Left-aligned reads better at this measure. */
body.atn .atn-overview { text-align: left; hyphens: manual; }

/* ======================================================== 2 SEGMENTS == */

/**
 * --cobalt is pointed at the segment's readable ink in the page head, so
 * links, rules and text accents already follow the segment. Fills need the
 * true brand colour and the right text colour on top of it, so they are
 * set here explicitly.
 */
body.atn .atn-btn--accent {
  background: var(--seg); border-color: var(--seg); color: var(--seg-on);
}
body.atn .atn-btn--accent:hover,
body.atn .atn-btn--accent:focus-visible {
  background: var(--seg-ink); border-color: var(--seg-ink); color: #fff;
}

body.atn .atn-wc__ribbon { background: var(--seg); color: var(--seg-on); }
body.atn .atn-wc__box { border-color: var(--seg); }
body.atn .atn-wc__rule { background: var(--seg-t); border-left-color: var(--seg); }
body.atn .atn-wc__angle,
body.atn .atn-wc__flag { background: var(--seg-t); color: var(--seg-ink); }

/* Segment helpers for anything that sets data-seg. */
[data-seg="blue"]   { --c: #3358E0; --ci: #2440B0; --ct: #EAEEFC; --co: #FFFFFF; }
[data-seg="green"]  { --c: #67AD73; --ci: #3B7F48; --ct: #EBF5ED; --co: #FFFFFF; }
[data-seg="yellow"] { --c: #EDCA56; --ci: #8A6A0A; --ct: #FCF5DF; --co: #1D1C1D; }
[data-seg="red"]    { --c: #D44E5B; --ci: #B0323F; --ct: #FBEAEC; --co: #FFFFFF; }

/* ==================================================== 3 PRODUCT LOGOS == */

/**
 * One rule for every product logo. Size is --s, set by the context class,
 * so two classes can never both set width and fight. Radius is a
 * percentage, so it scales with the box.
 */
.atn-plogo {
  --s: 2.75rem;
  display: inline-grid; place-items: center;
  flex: none;
  width: var(--s); height: var(--s);
  border-radius: 24%;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  line-height: 0;
  vertical-align: middle;
}
.atn-plogo .atn-plogo__img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  padding: 13%;
  display: block;
  background: #fff;
}
.atn-plogo .atn-plogo__svg { width: 100%; height: 100%; display: block; }
.atn-plogo--fallback { box-shadow: none; }

/* Sizes by context. */
.atn-plogo.atn-product__logo   { --s: 5.5rem; width: var(--s); height: var(--s); border-radius: 24%; border: 0; }
.atn-plogo.atn-show__logo      { --s: 2.5rem; box-shadow: 0 2px 10px -2px rgba(0,0,0,.35); }
.atn-plogo.atn-wc__logo        { --s: 3.25rem; }
.atn-plogo.atn-vs__plogo       { --s: 4.5rem; margin-bottom: .75rem; }
.atn-plogo.atn-vsrow__logo     { --s: 2.5rem; }
.atn-plogo.atn-bestfront__deallogo { --s: 3.25rem; }

/* The compare page wraps server-rendered logos in its own span. */
.atn-lab__itemlogo, .atn-lab__pilllogo, .atn-lab__collogo { display: inline-block; flex: none; line-height: 0; }
.atn-lab__itemlogo { width: 2.25rem; height: 2.25rem; }
.atn-lab__pilllogo { width: 1.5rem;  height: 1.5rem; }
.atn-lab__collogo  { width: 2.75rem !important; height: 2.75rem !important; background: transparent !important; }
.atn-lab__itemlogo .atn-plogo,
.atn-lab__pilllogo .atn-plogo,
.atn-lab__collogo .atn-plogo { --s: 100%; }
.atn-lab__collogo.is-letter, .atn-lab__itemlogo.is-letter {
  display: grid; place-items: center; border-radius: 24%; background: var(--paper) !important;
  font-weight: 700; line-height: 1;
}

@media (max-width: 880px) {
  .atn-plogo.atn-product__logo { --s: 4.5rem; }
}

/* ========================================================= 4 THE CARD == */

/**
 * The grid. The old one painted var(--line) behind a 1px gap to fake
 * hairlines, which is the grey slab the cards were sitting on. And its
 * default stretch alignment made every card in a row grow to match the one
 * that was opened. Both gone.
 */
body.atn .atn-grid,
body.atn .atn-grid--3,
body.atn .atn-grid--2,
body.atn .atn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: start;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
body.atn .atn-grid > .atn-card { border: 1px solid var(--line); border-radius: 14px; }

.atn-show {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--seg-t);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: .5rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.atn-show:not(.is-open):hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -26px rgba(0,0,0,.45);
}
.atn-show.is-open { box-shadow: 0 14px 34px -24px rgba(0,0,0,.4); }

.atn-show__frame {
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--paper);
}
.atn-show__shot { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.atn-show:hover .atn-show__shot { transform: scale(1.05); }

.atn-show__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%);
}

/* Top row: flag left, View right. They can never meet the name below. */
.atn-show__flag {
  position: absolute; top: .625rem; left: .625rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .55rem; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--seg-ink);
  font-size: .6875rem; font-weight: 600;
}
.atn-show__view {
  position: absolute; top: .625rem; right: .625rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .4rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: .75rem; font-weight: 600; letter-spacing: var(--track-cta);
  box-shadow: 0 2px 10px -3px rgba(0,0,0,.3);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.atn-show__view:hover,
.atn-show__view:focus-visible { background: var(--seg); color: var(--seg-on); transform: translateX(2px); }

.atn-show__plate {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  display: flex; align-items: center; gap: .625rem; min-width: 0;
}
.atn-show__names { display: grid; min-width: 0; gap: .1rem; }
.atn-show__name {
  color: #fff; font-size: 1.0625rem; font-weight: 600; line-height: 1.15;
  font-variation-settings: "wdth" 92, "opsz" 24;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atn-show__cat {
  color: rgba(255,255,255,.8); font-size: .625rem; font-weight: 600; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The meta row: price, industry, and the toggle, all on the tint. */
.atn-show__meta {
  display: flex; align-items: center; gap: .5rem;
  padding: .625rem .375rem .25rem;
}
.atn-show__price { font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
.atn-show__price small { font-weight: 400; color: var(--ink-45); font-size: .75rem; }
.atn-show__seg {
  font-size: .6875rem; font-weight: 600; color: var(--seg-ink);
  padding: .2rem .5rem; border-radius: 999px; background: rgba(255,255,255,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem;
}

/* GeneratePress paints button:hover and button:focus dark on every page.
   That was the black bar under the CCMonet card. Every state is declared. */
body.atn .atn-show__toggle,
body.atn .atn-show__toggle:hover,
body.atn .atn-show__toggle:focus,
body.atn .atn-show__toggle:active {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .3rem;
  height: 2rem; padding: 0 .7rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: .75rem; font-weight: 600; line-height: 1;
  cursor: pointer;
  box-shadow: none;
}
body.atn .atn-show__toggle:hover { border-color: var(--ink); }
body.atn .atn-show__toggle:focus-visible { outline: 2px solid var(--seg); outline-offset: 2px; }
body.atn .atn-show.is-open .atn-show__toggle { background: var(--ink); color: #fff; border-color: var(--ink); }
.atn-show__chev { transition: transform .3s var(--ease); }
.atn-show.is-open .atn-show__chev { transform: rotate(180deg); }

.atn-show__panel { height: 0; overflow: hidden; transition: height .3s var(--ease); }
.atn-show__panelinner { padding: .625rem .375rem .375rem; }

.atn-show__body { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--ink-70); }
.atn-show__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: .625rem 0 0; }
.atn-show__tag {
  padding: .25rem .5rem; border-radius: 7px; background: rgba(255,255,255,.75);
  font-size: .6875rem; color: var(--ink-70); white-space: nowrap;
}
.atn-show__go {
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .75rem; font-size: .8125rem; font-weight: 600; color: var(--seg-ink);
}
.atn-show__go:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ======================================================== 5 TILES == */

.atn-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: .75rem;
  background: transparent; border: 0; border-radius: 0; overflow: visible;
}
.atn-tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  min-height: 8rem; padding: 1.125rem;
  background: var(--seg-t, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.atn-tile::after {
  content: ""; position: absolute; left: 1.125rem; top: 0;
  width: 2rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--seg, var(--ink));
}
.atn-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -22px rgba(0,0,0,.4); background: var(--seg-t, #fff); }
.atn-tile b {
  font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; line-height: 1.15;
  font-variation-settings: "wdth" 92, "opsz" 24;
}
.atn-tile span { display: flex; align-items: center; justify-content: space-between; font-size: .8125rem; color: var(--ink-70); }
.atn-tile .atn-i { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); }
.atn-tile:hover .atn-i { opacity: 1; transform: none; }
.atn-tile__count { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--seg-ink, var(--ink)); }

.atn-tile--soon { background: transparent; border: 1px dashed rgba(0,0,0,.16); }
.atn-tile--soon::after { background: rgba(0,0,0,.14); }
.atn-tile--soon b { color: var(--ink-45); font-weight: 500; }
.atn-tile--soon:hover { background: #fff; }
.atn-tile__soon { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--ink-45); }
.atn-tile__soon::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ink-45);
  animation: atn-pending 2.4s var(--ease) infinite;
}
@keyframes atn-pending { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ==================================================== 6 COMPARE PAGE == */

.atn-lab--v2 { padding-top: clamp(1rem, 2vw, 1.5rem); }

.atn-lab__hero {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.atn-lab__intro { position: sticky; top: 6rem; }
.atn-lab--v2 .atn-lab__title { margin: 0 0 1rem; }
.atn-lab--v2 .atn-lede { max-width: 30em; }

.atn-lab__how { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .625rem; }
.atn-lab__how li { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: var(--ink-70); }
.atn-lab__how b {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .75rem;
}

.atn-lab__picker {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.35);
}

.atn-lab__step + .atn-lab__step { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }

.atn-lab__stephead {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 .75rem;
  font-size: .6875rem; font-weight: 600; text-transform: uppercase; color: var(--ink-45);
}
.atn-lab__stephead p { margin: 0; display: flex; align-items: center; gap: .5rem; }
.atn-lab__stephead b, p.atn-lab__stephead b {
  display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .625rem; margin-right: .5rem; letter-spacing: 0;
}
.atn-lab__stephead [data-lab-catname] { color: var(--ink); }

/* Step 1: category buttons, each in its own segment colour. */
.atn-lab--v2 .atn-lab__cats { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.atn-lab--v2 .atn-lab__cat {
  --c: #3358E0; --ct: #EAEEFC; --co: #fff; --ci: #2440B0;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: var(--ct); color: var(--ci);
  border: 1px solid transparent;
  font-size: .875rem; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.atn-lab--v2 .atn-lab__cat small {
  font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.75); color: var(--ci);
  padding: .1rem .4rem; border-radius: 999px;
}
.atn-lab--v2 .atn-lab__cat:hover { border-color: var(--c); }
.atn-lab--v2 .atn-lab__cat.is-on { background: var(--c); color: var(--co); transform: translateY(-1px); }
.atn-lab--v2 .atn-lab__cat.is-on small { background: rgba(255,255,255,.25); color: var(--co); }

/* Step 2: the tool list. Static, always visible, never a dropdown. */
.atn-lab--v2 .atn-lab__counter {
  font-size: .75rem; font-weight: 600; letter-spacing: 0; color: var(--ink);
  padding: .2rem .55rem; border-radius: 999px; background: var(--paper);
}
.atn-lab__list {
  display: grid; gap: .375rem;
  max-height: 23rem; overflow-y: auto;
  margin: 0 -.25rem; padding: 0 .25rem;
  scrollbar-width: thin;
}

body.atn .atn-lab__item,
body.atn .atn-lab__item:hover,
body.atn .atn-lab__item:focus,
body.atn .atn-lab__item:active {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: .75rem;
  width: 100%; text-align: left;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: .9375rem; line-height: 1.2;
  box-shadow: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
body.atn .atn-lab__item:hover { border-color: var(--ink-45); }
body.atn .atn-lab__item.is-on { border-color: var(--seg); background: var(--seg-t); }
body.atn .atn-lab__item:disabled { opacity: .45; cursor: not-allowed; }
body.atn .atn-lab__item:focus-visible { outline: 2px solid var(--seg); outline-offset: 2px; }

.atn-lab__itemname { font-weight: 600; min-width: 0; }
.atn-lab__itemname small {
  display: block; margin-top: .15rem;
  font-weight: 400; font-size: .75rem; color: var(--ink-45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atn-lab__itemprice { font-size: .8125rem; font-weight: 600; color: var(--ink-70); font-variant-numeric: tabular-nums; }
.atn-lab__itemtick {
  width: 1.25rem; height: 1.25rem; border-radius: 6px;
  border: 1.5px solid var(--ink-45);
  display: grid; place-items: center;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.atn-lab__item.is-on .atn-lab__itemtick { background: var(--seg); border-color: var(--seg); }
.atn-lab__item.is-on .atn-lab__itemtick::after {
  content: ""; width: .35rem; height: .6rem; margin-top: -.12rem;
  border: solid var(--seg-on); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.atn-lab__search { margin-top: .875rem; }
.atn-lab__search summary {
  cursor: pointer; list-style: none; font-size: .8125rem; color: var(--ink-45);
  text-decoration: underline; text-underline-offset: .2em;
}
.atn-lab__search summary::-webkit-details-marker { display: none; }
.atn-lab__search input {
  width: 100%; margin-top: .5rem;
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font-size: .9375rem;
}
.atn-lab__search input:focus { outline: none; border-color: var(--seg); background: #fff; }

.atn-lab--v2 .atn-lab__chosen:not(:empty) { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); min-height: 0; }
.atn-lab--v2 .atn-lab__chosen:empty { display: none; }
.atn-lab--v2 .atn-lab__pill { padding: .25rem .25rem .25rem .3rem; gap: .45rem; }
body.atn .atn-lab__pill button,
body.atn .atn-lab__pill button:hover,
body.atn .atn-lab__pill button:focus { background: transparent; color: inherit; box-shadow: none; }
body.atn .atn-lab__pill button:hover { background: rgba(255,255,255,.7); }

.atn-lab--v2 .atn-lab__note { padding: .5rem .25rem; }

@media (max-width: 980px) {
  .atn-lab__hero { grid-template-columns: 1fr; }
  .atn-lab__intro { position: static; }
  .atn-lab__how { display: none; }
}

/* ===================================================== 7 FOOTER == */

/* The wordmark overflowed its column. Sized to fit the site's max width,
   with room to spare, and never allowed to push past it. */
body.atn .atn-footer__wordmark {
  font-size: clamp(2.75rem, 8.4vw, 7.25rem);
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: clip;
  max-width: 100%;
}

/* ============================================================ calm == */

@media (prefers-reduced-motion: reduce) {
  .atn-show, .atn-show__shot, .atn-show__panel, .atn-show__chev, .atn-show__view,
  .atn-tile, .atn-lab--v2 .atn-lab__cat { transition: none !important; transform: none !important; }
  .atn-tile__soon::before { animation: none; opacity: .6; }
}