/*
Theme Name:   AI Tech Network v5
Theme URI:    https://aitechnetwork.co
Description:  AI software directory. Editorial catalogue restyle: one typeface, black on porcelain, one cobalt accent, custom icon set. Child of GeneratePress.
Author:       AI Tech Network
Template:     generatepress
Version:      5.3.1
Text Domain:  atn
*/

/* =========================================================================
   AI TECH NETWORK — v5

   A buying guide that looks like a catalogue, not a SaaS landing page.

   One typeface. Bricolage Grotesque is a variable family with a width axis,
   so display sizes are set condensed and tight, reading sizes are set normal.
   The same letterforms carry the whole site; the contrast is width, not
   family.

   Two colours plus one. Black ink on porcelain white, and a single cobalt
   for anything that is a verdict, a pick, or an action. Nothing else gets
   colour. If it is blue, it matters.

   Shape encodes role. Containers are 6px. Actions are pills. Logos are 14px.
   Hairlines are 1px black at 12% so they stay crisp on every screen.
   ========================================================================= */

:root {
  --paper:     #F6F6F4;
  --white:     #FFFFFF;
  --ink:       #000000;
  --ink-70:    rgba(0,0,0,.70);
  --ink-45:    rgba(0,0,0,.45);
  --line:      rgba(0,0,0,.12);
  --line-soft: rgba(0,0,0,.07);
  --cobalt:    #2038FF;
  --cobalt-d:  #1526C7;
  --cobalt-t:  #E9ECFF;

  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  --r-box:  6px;
  --r-logo: 14px;
  --r-pill: 999px;

  --wrap: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ------------------------------------------------------------ reset-ish */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.atn {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  font-variation-settings: "wdth" 100, "opsz" 14;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

body.atn a { color: inherit; text-decoration: none; }
body.atn img { max-width: 100%; height: auto; display: block; }
body.atn button, body.atn input { font: inherit; color: inherit; }
body.atn :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 2px; }

/* GeneratePress chrome we do not use. */
body.atn .site-header, body.atn .site-footer, body.atn .generate-back-to-top { display: none !important; }
body.atn .site, body.atn .site-content, body.atn #page { max-width: none; padding: 0; margin: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
a.sr-only:focus { position: fixed !important; top: 1rem; left: 1rem; width: auto; height: auto; padding: .625rem 1rem; background: var(--ink); color: var(--white); clip: auto; z-index: 999; border-radius: var(--r-pill); }

/* --------------------------------------------------------------- icons */

.atn-i { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -.3em; flex: none; }
.atn-i--sm { width: 1em; height: 1em; }
.atn-i--lg { width: 1.5em; height: 1.5em; }

/* ---------------------------------------------------------------- type */

.atn-display {
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.03em;
  font-variation-settings: "wdth" 80, "opsz" 96;
  margin: 0;
  text-wrap: balance;
}
.atn-d1 { font-size: clamp(3.5rem, 9.5vw, 8.75rem); font-weight: 700; font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -.035em; }
.atn-d2 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); }
.atn-d3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-variation-settings: "wdth" 85, "opsz" 48; letter-spacing: -.025em; line-height: 1; }
.atn-d4 { font-size: 1.375rem; font-weight: 600; font-variation-settings: "wdth" 92, "opsz" 24; letter-spacing: -.015em; line-height: 1.15; }

.atn-lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-70);
  max-width: 34em;
  margin: 0;
  font-variation-settings: "wdth" 96, "opsz" 18;
}
.atn-meta {
  font-size: .875rem;
  color: var(--ink-45);
  font-variant-numeric: tabular-nums;
}
.atn-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- layout */

.atn-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.atn-narrow { max-width: 42rem; }

#atn-main { min-height: 60vh; }

/* Section head: heading left, one action right, a rule under both. */
.atn-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}
.atn-section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.atn-section-head p { margin: .5rem 0 0; color: var(--ink-45); max-width: 30em; }
.atn-more {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-weight: 600; font-size: .9375rem; padding-bottom: .125rem;
  border-bottom: 1px solid var(--ink);
}
.atn-more .atn-i { transition: transform .25s var(--ease); }
.atn-more:hover .atn-i { transform: translateX(3px); }

/* ---------------------------------------------------------------- header */

.atn-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,246,244,.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.atn-header.is-stuck { border-bottom-color: var(--line); }
.atn-header__bar {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: 4.25rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem;
}

.atn-logo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em;
  font-variation-settings: "wdth" 88, "opsz" 24;
}
.atn-logo__mark {
  width: 1.75rem; height: 1.75rem; border-radius: 7px; background: var(--ink); color: var(--white);
  display: grid; place-items: center;
}
.atn-logo__mark .atn-i { width: 1rem; height: 1rem; vertical-align: 0; }

.atn-nav { display: flex; align-items: center; gap: .25rem; justify-content: center; }
.atn-nav__item { position: relative; }
.atn-nav__link {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem .875rem; border-radius: var(--r-pill);
  font-weight: 500; font-size: .9375rem; color: var(--ink-70);
  transition: background .15s, color .15s;
}
.atn-nav__link .atn-i { width: .875rem; height: .875rem; opacity: .5; }
.atn-nav__link:hover, .atn-nav__item:focus-within .atn-nav__link, .atn-nav__item:hover .atn-nav__link { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

/* Menus: a flat white panel, hairline, a clear column structure. */
.atn-mega {
  position: absolute; top: calc(100% + .75rem); left: 50%; transform: translateX(-50%) translateY(-4px);
  min-width: 44rem; background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s .18s;
  padding: 1.5rem 1.5rem 1.25rem;
}
.atn-nav__item:hover .atn-mega, .atn-nav__item:focus-within .atn-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.atn-mega__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; }
.atn-mega__col h3 { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 600; }
.atn-mega__col h3 a:hover { color: var(--cobalt); }
.atn-mega__col ul { list-style: none; margin: 0; padding: 0; }
.atn-mega__col li a { display: block; padding: .3rem 0; font-size: .9rem; color: var(--ink-70); }
.atn-mega__col li a:hover { color: var(--cobalt); }
.atn-mega__foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; }
.atn-mega__foot a { font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }

.atn-header__end { display: flex; align-items: center; gap: .5rem; }
.atn-header__search {
  padding: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; display: grid; place-items: center; cursor: pointer;
}
.atn-header__search:hover { background: var(--white); border-color: var(--ink); }
.atn-header__search .atn-i { vertical-align: 0; width: 1.1rem; height: 1.1rem; }

.atn-burger {
  padding: 0; display: none; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; place-items: center; cursor: pointer;
}
.atn-burger .atn-i { width: 1.1rem; height: 1.1rem; vertical-align: 0; }
.atn-burger .atn-i + .atn-i { display: none; }
.atn-burger[aria-expanded="true"] .atn-i:first-child { display: none; }
.atn-burger[aria-expanded="true"] .atn-i + .atn-i { display: block; }

/* Buttons. Pills are actions; that is the only thing pills are. */
.atn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: var(--r-pill);
  font-weight: 600; font-size: .9375rem; line-height: 1; white-space: nowrap;
  border: 1px solid var(--ink); background: var(--ink); color: var(--white);
  cursor: pointer; transition: transform .15s var(--ease), background .15s, color .15s, border-color .15s;
}
.atn-btn:hover { background: var(--cobalt); border-color: var(--cobalt); }
.atn-btn:active { transform: scale(.98); }
.atn-btn--ghost { background: transparent; color: var(--ink); }
.atn-btn--ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.atn-btn--accent { background: var(--cobalt); border-color: var(--cobalt); }
.atn-btn--accent:hover { background: var(--cobalt-d); border-color: var(--cobalt-d); }
.atn-btn--lg { padding: .95rem 1.5rem; font-size: 1.0625rem; }
.atn-btn--block { width: 100%; }
.atn-btn .atn-i { width: 1.05em; height: 1.05em; vertical-align: 0; }

/* Legacy class from atn_cta(): keep it looking like a button. */
.atn-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .95rem 1.5rem; border-radius: var(--r-pill); font-weight: 600; font-size: 1.0625rem; line-height: 1;
  border: 1px solid var(--cobalt); background: var(--cobalt); color: var(--white);
  transition: background .15s, transform .15s var(--ease);
}
.atn-cta:hover { background: var(--cobalt-d); }
.atn-cta:active { transform: scale(.98); }
.atn-cta--ghost { background: transparent; color: var(--ink); border-color: var(--ink); margin-top: .5rem; }
.atn-cta--ghost:hover { background: var(--ink); color: var(--white); }

/* ----------------------------------------------------------- search bar */

.atn-search {
  display: flex; align-items: stretch;
  background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r-box);
  overflow: hidden; transition: box-shadow .15s;
}
.atn-search:focus-within { box-shadow: 0 0 0 4px var(--cobalt-t); border-color: var(--cobalt); }
.atn-search__ico { display: grid; place-items: center; padding: 0 0 0 1.25rem; color: var(--ink-45); }
.atn-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 1.1rem 1rem;
  font-size: 1.125rem; font-variation-settings: "wdth" 96, "opsz" 18;
}
.atn-search input::placeholder { color: var(--ink-45); }
.atn-search input:focus { outline: none; }
.atn-search button {
  border: 0; background: var(--ink); color: var(--white); padding: 0 1.5rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem; transition: background .15s;
}
.atn-search button:hover { background: var(--cobalt); }
.atn-search--big input { padding: 1.5rem 1.25rem; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.atn-search--big .atn-search__ico { padding-left: 1.5rem; }
.atn-search--big .atn-search__ico .atn-i { width: 1.5rem; height: 1.5rem; }
.atn-search--big button { padding: 0 2rem; font-size: 1.0625rem; }

/* Search overlay, opened from the header. */
.atn-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(246,246,244,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: none; align-items: flex-start; justify-content: center; padding: 12vh var(--gutter) 2rem;
}
.atn-overlay.is-open { display: flex; }
.atn-overlay__box { width: 100%; max-width: 48rem; }
.atn-overlay__hint { display: flex; justify-content: space-between; margin-top: 1rem; color: var(--ink-45); font-size: .875rem; }
.atn-overlay__hint button { padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; color: var(--ink-70); }

/* ------------------------------------------------------------------ hero */

.atn-hero { padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.atn-hero__grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem 4rem; align-items: end; }
.atn-hero__h { margin: 0; }
.atn-hero__h span { display: block; }
.atn-hero__h .is-quiet { color: var(--ink-45); font-weight: 500; }

/* The index. Three live numbers, stacked, set small so the headline stays in charge. */
.atn-index { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; min-width: 12rem; }
.atn-index li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.atn-index li:last-child { border-bottom: 1px solid var(--line); }
.atn-index b { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.atn-index span { color: var(--ink-45); font-size: .9375rem; }

.atn-hero__search { margin-top: clamp(1.75rem, 4vw, 3rem); }
.atn-hero__sub { margin-top: 1rem; display: flex; align-items: center; gap: .75rem 1.5rem; flex-wrap: wrap; color: var(--ink-45); font-size: .9375rem; }
.atn-hero__sub a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--line); }
.atn-hero__sub a:hover { border-color: var(--ink); }

/* Industries as a horizontal strip that scrolls on touch. */
.atn-strip { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.atn-strip__scroll { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
.atn-strip__scroll::-webkit-scrollbar { display: none; }
.atn-chip {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: .55rem .95rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white);
  font-size: .9rem; font-weight: 500; transition: border-color .15s, background .15s;
}
.atn-chip:hover { border-color: var(--ink); }
.atn-chip small { color: var(--ink-45); font-variant-numeric: tabular-nums; font-size: .8125rem; }
.atn-chip--soon { color: var(--ink-45); background: transparent; }

/* --------------------------------------------------------------- cards */

.atn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.atn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.atn-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Product card. A shelf tile: hairline-separated cells rather than floating boxes. */
.atn-card {
  position: relative; background: var(--white); padding: 1.375rem 1.375rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; min-height: 15rem;
  transition: background .2s;
}
.atn-card:hover { background: #FBFBFA; }
.atn-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.atn-card__logo {
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-logo); overflow: hidden; background: var(--paper); border: 1px solid var(--line-soft);
  display: grid; place-items: center; flex: none;
}
.atn-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.atn-card__logo span { font-weight: 700; font-size: 1.375rem; font-variation-settings: "wdth" 80, "opsz" 32; }
.atn-card__flag {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 500;
  padding: .3rem .6rem .3rem .5rem; border-radius: var(--r-pill); border: 1px solid var(--line);
}
.atn-card__flag--free { color: var(--cobalt); border-color: var(--cobalt-t); background: var(--cobalt-t); }
.atn-card__flag .atn-i { width: .9rem; height: .9rem; vertical-align: 0; }
.atn-card__title { margin: 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; font-variation-settings: "wdth" 92, "opsz" 24; }
.atn-card__title a::after { content: ""; position: absolute; inset: 0; }
.atn-card__title a:hover { color: var(--cobalt); }
.atn-card__tagline { margin: .25rem 0 0; color: var(--ink-70); font-size: .9375rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.atn-card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-top: .875rem; border-top: 1px solid var(--line-soft); }
.atn-card__price { font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.atn-card__price small { font-weight: 400; color: var(--ink-45); font-size: .8125rem; margin-left: .1rem; }
.atn-card__cat { font-size: .8125rem; color: var(--ink-45); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Answer card: title-led. */
.atn-card--answer .atn-card__title { font-size: 1.25rem; }
.atn-card--answer .atn-card__q { width: 2rem; height: 2rem; border-radius: var(--r-pill); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-70); }
.atn-card--answer .atn-card__q .atn-i { vertical-align: 0; width: 1rem; height: 1rem; }

/* ------------------------------------------------------------ tiles */

.atn-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.atn-tile {
  position: relative; background: var(--white); padding: 1.375rem 1.25rem; min-height: 8.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; transition: background .2s;
}
.atn-tile:hover { background: var(--cobalt-t); }
.atn-tile b { font-weight: 600; font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.2; font-variation-settings: "wdth" 92, "opsz" 24; }
.atn-tile span { font-size: .875rem; color: var(--ink-45); display: flex; align-items: center; justify-content: space-between; }
.atn-tile .atn-i { opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s, transform .2s var(--ease); }
.atn-tile:hover .atn-i { opacity: 1; transform: none; }
.atn-tile--soon { background: transparent; }
.atn-tile--soon b { color: var(--ink-45); }
.atn-tile--soon:hover { background: var(--white); }

/* -------------------------------------------------------------- rows */

.atn-rows { border-top: 1px solid var(--line); }
.atn-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: center;
  padding: 1.375rem 0; border-bottom: 1px solid var(--line); position: relative;
}
.atn-row__title { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; font-variation-settings: "wdth" 92, "opsz" 24; }
.atn-row__title a::after { content: ""; position: absolute; inset: 0; }
.atn-row__title a:hover { color: var(--cobalt); }
.atn-row p { margin: 0; color: var(--ink-70); font-size: .9375rem; max-width: 60ch; }
.atn-row__end { display: flex; align-items: center; gap: 1.25rem; color: var(--ink-45); font-size: .875rem; }
.atn-row__end .atn-i { color: var(--ink); }

/* Matchup row: A vs B rendered as two logos and a divider. */
.atn-vsrow { grid-template-columns: auto 1fr auto; }
.atn-vsrow__pair { display: flex; align-items: center; gap: .375rem; }
.atn-vsrow__pair .atn-card__logo { width: 2.5rem; height: 2.5rem; border-radius: 10px; }
.atn-vsrow__pair .atn-card__logo span { font-size: 1rem; }
.atn-vsrow__pair i { font-style: normal; font-size: .75rem; font-weight: 600; color: var(--ink-45); padding: 0 .25rem; }

/* ------------------------------------------------------------- archive */

.atn-archive__head { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.atn-archive__head .atn-lede { margin-top: 1.125rem; }
.atn-archive__count { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: .875rem; }
.atn-archive__count b { font-variant-numeric: tabular-nums; }
.atn-archive__layout { display: grid; grid-template-columns: 15rem 1fr; gap: 3rem; padding-bottom: clamp(3rem, 6vw, 5rem); align-items: start; }

.atn-filters { position: sticky; top: 5.5rem; display: grid; gap: 1.75rem; }
.atn-filter h2 { margin: 0 0 .625rem; font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.atn-filter h2 .atn-i { width: .95rem; height: .95rem; color: var(--ink-45); }
.atn-filter ul { list-style: none; margin: 0; padding: 0; }
.atn-filter li a { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; font-size: .9rem; color: var(--ink-70); border-bottom: 1px solid var(--line-soft); }
.atn-filter li a:hover { color: var(--cobalt); }
.atn-filter li a span { color: var(--ink-45); font-variant-numeric: tabular-nums; }
.atn-filter li a.is-current { color: var(--cobalt); font-weight: 600; }

.atn-pagination { display: flex; justify-content: center; gap: .375rem; margin-top: 2.5rem; flex-wrap: wrap; }
.atn-pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem;
  border-radius: var(--r-pill); border: 1px solid var(--line); font-weight: 500; font-size: .9375rem; background: var(--white);
}
.atn-pagination .page-numbers.current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.atn-pagination a.page-numbers:hover { border-color: var(--ink); }
.atn-pagination .dots { border: 0; background: transparent; }

.atn-empty {
  padding: 2.25rem; border: 1px dashed var(--line); border-radius: 8px; background: var(--white); max-width: 44rem;
}
.atn-empty b { display: block; font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; letter-spacing: -.015em; }
.atn-empty p { margin: 0; color: var(--ink-70); }
.atn-empty a { color: var(--cobalt); font-weight: 600; }

/* ---------------------------------------------------------- breadcrumb */

.atn-crumb { display: flex; align-items: center; gap: .5rem; padding: 1.5rem 0 0; font-size: .875rem; color: var(--ink-45); flex-wrap: wrap; }
.atn-crumb a { color: var(--ink-70); }
.atn-crumb a:hover { color: var(--cobalt); }
.atn-crumb .atn-i { width: .8rem; height: .8rem; color: var(--ink-45); vertical-align: -.1em; }
.atn-crumb .atn-i--home { width: .95rem; height: .95rem; }

/* ------------------------------------------------------------- product */

.atn-product__head {
  display: grid; grid-template-columns: 1fr 20rem; gap: 2rem 4rem; align-items: start;
  padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line);
}
.atn-product__ident { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.atn-product__logo {
  width: 5.5rem; height: 5.5rem; border-radius: 22px; overflow: hidden; background: var(--white); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.atn-product__logo img { width: 100%; height: 100%; object-fit: cover; }
.atn-product__logo span { font-weight: 700; font-size: 2.25rem; font-variation-settings: "wdth" 80, "opsz" 48; }
.atn-product__company { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-45); font-size: .9375rem; margin-bottom: .5rem; }
.atn-product__company .atn-i { width: .95rem; height: .95rem; }
.atn-product__tagline { margin: 1rem 0 1.25rem; }

.atn-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.atn-chips li a, .atn-chips li > span {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white); font-size: .875rem; font-weight: 500; transition: border-color .15s;
}
.atn-chips li a:hover { border-color: var(--ink); }

/* Buy box. The one place the accent is allowed to be a whole surface. */
.atn-buybox {
  position: sticky; top: 5.5rem; background: var(--white); border: 1.5px solid var(--ink); border-radius: 10px; padding: 1.5rem;
}
.atn-buybox__label { font-size: .875rem; color: var(--ink-45); margin: 0; }
.atn-buybox__price { font-size: 3rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; margin: .25rem 0 .375rem; font-variation-settings: "wdth" 80, "opsz" 64; font-variant-numeric: tabular-nums; }
.atn-buybox__price small { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-45); font-variation-settings: "wdth" 100, "opsz" 14; margin-left: .25rem; }
.atn-buybox__note { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-70); margin: 0 0 1.25rem; }
.atn-buybox__note .atn-i { color: var(--cobalt); }
.atn-buybox__facts { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.atn-buybox__facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.atn-buybox__facts li span:first-child { color: var(--ink-45); }
.atn-buybox__facts li span:last-child { font-weight: 500; text-align: right; }

.atn-product__body { display: grid; grid-template-columns: 1fr 20rem; gap: 3rem 4rem; padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 4rem); }
.atn-product__main > section { padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.atn-product__main > section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.atn-h { display: flex; align-items: center; gap: .625rem; margin: 0 0 1.25rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "wdth" 88, "opsz" 32; }
.atn-h .atn-i { width: 1.15rem; height: 1.15rem; color: var(--ink-45); }
.atn-overview { font-size: 1.125rem; line-height: 1.55; margin: 0; max-width: 62ch; color: var(--ink); font-variation-settings: "wdth" 96, "opsz" 18; }

/* Strengths and limitations. Two columns, plus and minus icons carry the meaning so both stay black. */
.atn-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.atn-verdict > div { background: var(--white); padding: 1.375rem 1.5rem; }
.atn-verdict h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.atn-verdict ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.atn-verdict li { display: grid; grid-template-columns: 1rem 1fr; gap: .75rem; font-size: .9375rem; line-height: 1.45; color: var(--ink-70); }
.atn-verdict li .atn-i { width: 1rem; height: 1rem; margin-top: .2rem; vertical-align: 0; }
.atn-pros h3 .atn-i, .atn-pros li .atn-i { color: var(--cobalt); }

/* Tables */
.atn-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.atn-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.atn-table th, .atn-table td { text-align: left; padding: .875rem 1.125rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.atn-table thead th { font-weight: 600; font-size: .8125rem; color: var(--ink-45); background: var(--paper); border-bottom: 1px solid var(--line); }
.atn-table tbody tr:last-child td, .atn-table tbody tr:last-child th { border-bottom: 0; }
.atn-table tbody th { font-weight: 500; color: var(--ink-70); }
.atn-table td:first-child, .atn-table tbody th { white-space: nowrap; }
.atn-table--pricing td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.atn-table--pricing td:last-child { color: var(--ink-70); }

/* Features grid */
.atn-featurelist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.atn-featurelist > div { background: var(--white); padding: 1.25rem 1.375rem; }
.atn-featurelist h3 { margin: 0 0 .375rem; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.atn-featurelist h3 .atn-i { width: .75rem; height: .75rem; color: var(--cobalt); }
.atn-featurelist p { margin: 0; color: var(--ink-70); font-size: .9375rem; line-height: 1.45; }

/* Aside blocks */
.atn-aside { display: grid; gap: 1.5rem; align-content: start; }
.atn-aside__block { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 1.25rem 1.375rem; }
.atn-aside__block h2 { margin: 0 0 .875rem; font-size: .9375rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.atn-aside__block h2 .atn-i { width: 1rem; height: 1rem; color: var(--ink-45); }
.atn-aside__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.atn-aside__block ul.atn-chips { display: flex; gap: .375rem; }
.atn-aside__block li { font-size: .9375rem; color: var(--ink-70); line-height: 1.4; }
.atn-aside__block--bestfor { background: var(--cobalt-t); border-color: transparent; }
.atn-aside__block--bestfor h2 .atn-i { color: var(--cobalt); }
.atn-aside__block--bestfor li { color: var(--ink); display: grid; grid-template-columns: .9rem 1fr; gap: .5rem; }
.atn-aside__block--bestfor li .atn-i { width: .9rem; height: .9rem; color: var(--cobalt); margin-top: .2rem; vertical-align: 0; }

/* Body copy inside written sections */
.atn-body { font-size: 1.0625rem; line-height: 1.6; font-variation-settings: "wdth" 96, "opsz" 18; }
.atn-body p { margin: 0 0 1.25rem; }
.atn-body h2, .atn-body h3 { letter-spacing: -.02em; line-height: 1.15; margin: 2rem 0 .75rem; font-variation-settings: "wdth" 88, "opsz" 32; }
.atn-body h2 { font-size: 1.625rem; }
.atn-body h3 { font-size: 1.25rem; }
.atn-body ul, .atn-body ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.atn-body li { margin-bottom: .375rem; }
.atn-body a { color: var(--cobalt); border-bottom: 1px solid var(--cobalt-t); }
.atn-body a:hover { border-color: var(--cobalt); }
.atn-body blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 2px solid var(--ink); font-size: 1.125rem; }
.atn-body img { border-radius: 8px; border: 1px solid var(--line); }
.atn-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9375rem; }
.atn-body th, .atn-body td { padding: .625rem .75rem; border-bottom: 1px solid var(--line); text-align: left; }

/* ------------------------------------------------------------- compare */

.atn-compare__head { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.atn-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; align-items: stretch; }
.atn-vs__side { background: var(--white); padding: 2rem; display: grid; gap: .625rem; align-content: start; }
.atn-vs__logo { width: 4.5rem; height: 4.5rem; border-radius: 18px; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; overflow: hidden; margin-bottom: .5rem; }
.atn-vs__logo img { width: 100%; height: 100%; object-fit: cover; }
.atn-vs__logo span { font-weight: 700; font-size: 1.75rem; font-variation-settings: "wdth" 80, "opsz" 48; }
.atn-vs__name { margin: 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; font-variation-settings: "wdth" 85, "opsz" 48; }
.atn-vs__name a:hover { color: var(--cobalt); }
.atn-vs__tagline { margin: 0; color: var(--ink-70); font-size: .9375rem; }
.atn-vs__price { margin: .5rem 0 .875rem; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variation-settings: "wdth" 80, "opsz" 48; font-variant-numeric: tabular-nums; }
.atn-vs__price small { font-size: .9375rem; font-weight: 400; color: var(--ink-45); letter-spacing: 0; font-variation-settings: "wdth" 100, "opsz" 14; }
.atn-vs__mark { background: var(--white); display: grid; place-items: center; padding: 0 1.5rem; font-weight: 700; font-size: 2.5rem; letter-spacing: -.04em; color: var(--ink-45); font-variation-settings: "wdth" 75, "opsz" 64; }

.atn-verdictbox { margin-top: 2rem; background: var(--cobalt); color: var(--white); border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.atn-verdictbox .atn-i { width: 1.75rem; height: 1.75rem; vertical-align: 0; margin-top: .125rem; }
.atn-verdictbox h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; opacity: .85; }
.atn-verdictbox p { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.4; letter-spacing: -.01em; font-variation-settings: "wdth" 92, "opsz" 24; max-width: 60ch; }

.atn-compare__section { padding-top: clamp(2rem, 4vw, 3rem); }
.atn-compare__section > .atn-display { margin-bottom: 1.25rem; }
.atn-table--vs thead th:not(:first-child) { color: var(--ink); font-size: 1rem; }
.atn-table--vs tbody th { position: sticky; left: 0; background: var(--white); }

.atn-faq { border-top: 1px solid var(--line); }
.atn-faq:last-of-type { border-bottom: 1px solid var(--line); }
.atn-faq summary { list-style: none; cursor: pointer; padding: 1.125rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; }
.atn-faq summary::-webkit-details-marker { display: none; }
.atn-faq summary .atn-i { transition: transform .25s var(--ease); color: var(--ink-45); }
.atn-faq[open] summary .atn-i { transform: rotate(180deg); }
.atn-faq > div { padding: 0 0 1.25rem; color: var(--ink-70); }
.atn-faq > div p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- answers */

.atn-answer__head { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.atn-answer__meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ------------------------------------------------------------- 404 */

.atn-404 { padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.atn-404 .atn-lede { margin-top: 1.25rem; }
.atn-404 .atn-search { margin-top: 2rem; max-width: 40rem; }

/* --------------------------------------------------------------- footer */

.atn-footer { background: var(--ink); color: var(--white); margin-top: clamp(3rem, 6vw, 5rem); }
.atn-footer__top { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem 2rem; }
.atn-footer__brand p { margin: 1rem 0 0; color: rgba(255,255,255,.6); max-width: 30ch; font-size: .9375rem; }
.atn-footer .atn-logo__mark { background: var(--white); color: var(--ink); }
.atn-footer h3 { margin: 0 0 .875rem; font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.5); }
.atn-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.atn-footer li a { color: rgba(255,255,255,.85); font-size: .9375rem; }
.atn-footer li a:hover { color: var(--white); text-decoration: underline; text-underline-offset: .2em; }
.atn-footer__wordmark {
  font-weight: 700; letter-spacing: -.045em; line-height: .85; font-variation-settings: "wdth" 75, "opsz" 96;
  font-size: clamp(3.5rem, 12vw, 11rem); color: var(--white); padding: 1rem 0 0; margin: 0; white-space: nowrap; overflow: hidden;
}
.atn-footer__base { border-top: 1px solid rgba(255,255,255,.15); padding: 1.25rem 0 1.5rem; display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; color: rgba(255,255,255,.5); font-size: .8125rem; }
.atn-footer__base address { font-style: normal; }

/* ------------------------------------------------------------- motion */

/* The one orchestrated moment: the hero headline settles in. */
@keyframes atn-rise { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
.atn-hero__h span { animation: atn-rise .7s var(--ease) both; }
.atn-hero__h span:nth-child(2) { animation-delay: .08s; }
.atn-hero__h span:nth-child(3) { animation-delay: .16s; }
.atn-hero__search, .atn-index, .atn-hero__sub { animation: atn-rise .7s var(--ease) .24s both; }
@media (prefers-reduced-motion: reduce) {
  .atn-hero__h span, .atn-hero__search, .atn-index, .atn-hero__sub { animation: none; }
  .atn-i, .atn-more .atn-i, .atn-tile .atn-i { transition: none; }
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .atn-grid { grid-template-columns: repeat(3, 1fr); }
  .atn-mega { min-width: 38rem; }
}

@media (max-width: 1020px) {
  .atn-product__head, .atn-product__body { grid-template-columns: 1fr; }
  .atn-buybox { position: static; }
  .atn-aside { grid-template-columns: 1fr 1fr; }
  .atn-archive__layout { grid-template-columns: 12.5rem 1fr; gap: 2rem; }
  .atn-hero__grid { grid-template-columns: 1fr; }
  .atn-index { grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; }
  .atn-index li { flex-direction: column; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--line); }
  .atn-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .atn-header__bar { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .atn-nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: .75rem var(--gutter) 1.25rem;
  }
  .atn-header__bar.is-open .atn-nav { display: flex; }
  .atn-nav__link { padding: .875rem .25rem; font-size: 1.125rem; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .atn-nav__link:hover, .atn-nav__item:hover .atn-nav__link, .atn-nav__item:focus-within .atn-nav__link { background: transparent; box-shadow: none; }
  .atn-mega { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; border: 0; box-shadow: none; padding: .5rem 0 1rem; background: transparent; }
  .atn-mega__cols { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .atn-mega__foot { display: none; }
  .atn-burger { display: grid; }
  .atn-header__cta { display: none; }
  .atn-grid, .atn-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .atn-tiles { grid-template-columns: repeat(2, 1fr); }
  .atn-archive__layout { grid-template-columns: 1fr; }
  .atn-filters { position: static; display: flex; flex-wrap: wrap; gap: .5rem; }
  .atn-filter h2 { display: none; }
  .atn-filter ul { display: contents; }
  .atn-filter li a { border: 1px solid var(--line); background: var(--white); border-radius: var(--r-pill); padding: .4rem .8rem; gap: .4rem; }
  .atn-verdict, .atn-featurelist { grid-template-columns: 1fr; }
  .atn-vs { grid-template-columns: 1fr; }
  .atn-vs__mark { padding: .75rem; font-size: 1.5rem; }
  .atn-vsrow { grid-template-columns: 1fr; }
  .atn-row { grid-template-columns: 1fr; }
  .atn-verdictbox { grid-template-columns: 1fr; }
  .atn-search--big input { padding: 1.1rem 1rem; font-size: 1.125rem; }
  .atn-search--big button span { display: none; }
  .atn-search--big button { padding: 0 1.25rem; }
}

@media (max-width: 520px) {
  .atn-grid, .atn-grid--3, .atn-grid--2 { grid-template-columns: 1fr; }
  .atn-aside { grid-template-columns: 1fr; }
  .atn-index { grid-template-columns: 1fr; }
  .atn-product__ident { grid-template-columns: 1fr; }
  .atn-product__logo { width: 4.5rem; height: 4.5rem; }
  .atn-footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .atn-section-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   v5.1 — button colour fix, images, fluid hero, live search, 3D touches
   ========================================================================= */

/* GeneratePress sets a:hover colour at (0,1,1). Actions must stay white. */
body.atn .atn-btn, body.atn .atn-btn:hover, body.atn .atn-btn:focus,
body.atn .atn-cta, body.atn .atn-cta:hover, body.atn .atn-cta:focus,
body.atn .atn-search button, body.atn .atn-search button:hover { color: var(--white); }
body.atn .atn-btn--ghost, body.atn .atn-cta--ghost { color: var(--ink); }
body.atn .atn-btn--ghost:hover, body.atn .atn-cta--ghost:hover, body.atn .atn-btn--ghost:focus, body.atn .atn-cta--ghost:focus { color: var(--white); }
body.atn .atn-header__search { color: var(--ink); }

/* Wordmark without the mark */
.atn-logo { font-size: 1.25rem; }

/* ---- card with artwork */
.atn-card { padding: 0; min-height: 0; gap: 0; transform-style: preserve-3d; transition: background .2s, transform .35s var(--ease); will-change: transform; }
.atn-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.atn-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.atn-card:hover .atn-card__media img { transform: scale(1.04); }
.atn-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28)); pointer-events: none; }
.atn-card__media .atn-card__logo {
  position: absolute; left: 1rem; bottom: -1.25rem; z-index: 2; width: 3rem; height: 3rem;
  background: var(--white); border: 1px solid var(--line); box-shadow: 0 6px 16px -8px rgba(0,0,0,.35);
}
.atn-card__media .atn-card__flag { position: absolute; top: .875rem; right: .875rem; z-index: 2; background: var(--white); border-color: transparent; }
.atn-card__media .atn-card__flag--free { background: var(--cobalt); color: var(--white); }
.atn-card__body { padding: 2rem 1.375rem .75rem; }
.atn-card__foot { margin: 0 1.375rem 1.125rem; padding-top: .75rem; }

/* ---- hero with fluid */
.atn-hero { position: relative; overflow: hidden; padding: 0; }
.atn-hero__inner { position: relative; z-index: 2; padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.atn-fluid, .atn-fluid__fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.atn-fluid { display: block; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.atn-fluid.is-fallback { display: none; }
.atn-fluid__fallback { display: none; background:
  radial-gradient(60% 70% at 88% 30%, var(--cobalt) 0%, rgba(32,56,255,.6) 30%, rgba(32,56,255,0) 70%),
  radial-gradient(40% 50% at 65% 80%, rgba(32,56,255,.55) 0%, rgba(32,56,255,0) 70%),
  radial-gradient(30% 30% at 78% 55%, #fff 0%, rgba(255,255,255,0) 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  animation: atn-drift 14s ease-in-out infinite alternate;
}
.atn-fluid.is-fallback + .atn-fluid__fallback { display: block; }
@keyframes atn-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .atn-fluid__fallback { animation: none; } }

/* Headline and search need to stay legible over blue on the right. */
.atn-index li { border-color: rgba(0,0,0,.18); }
.atn-index b, .atn-index span { color: var(--ink); }
.atn-hero__sub span { color: var(--ink-70); }
.atn-chip { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(255,255,255,.85); }

/* ---- search overlay: live results */
.atn-overlay { align-items: flex-start; padding-top: 10vh; overflow-y: auto; }
.atn-overlay__box { max-width: 52rem; }
.atn-overlay__results { margin-top: .75rem; min-height: 0; }
.atn-overlay__results.is-loading { opacity: .6; }
.atn-results { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.atn-results li + li { border-top: 1px solid var(--line-soft); }
.atn-results a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .875rem 1.125rem; font-weight: 500; }
.atn-results a:hover, .atn-results a:focus { background: var(--cobalt-t); color: var(--cobalt); outline: none; }
.atn-results small { color: var(--ink-45); font-size: .8125rem; }
.atn-overlay__none { margin: 0; padding: 1rem 1.125rem; background: var(--white); border: 1px dashed var(--line); border-radius: 8px; color: var(--ink-70); }
.atn-header__search { text-decoration: none; }

/* ---- tilt targets */
[data-atn-tilt] { transition: transform .35s var(--ease); will-change: transform; }
.atn-buybox[data-atn-tilt], .atn-vs__side[data-atn-tilt] { transform-style: preserve-3d; }

/* =========================================================================
   v5.2 — logo placement, product shot, soft field on archives, essays
   ========================================================================= */

/* Card logo: top-left, clear of every edge. */
.atn-card__media .atn-card__logo { top: .875rem; left: .875rem; bottom: auto; }
.atn-card__body { padding: 1.25rem 1.375rem .75rem; }

/* Product page: the shot lives in the aside so it never crowds the copy. */
.atn-shot { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); transform-style: preserve-3d; }
.atn-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.atn-shot figcaption { padding: .75rem 1rem; font-size: .875rem; font-weight: 600; border-top: 1px solid var(--line-soft); }
.atn-shot figcaption span { font-weight: 400; color: var(--ink-45); }

/* Archive heads: a quiet version of the hero field, faded hard at the bottom. */
.atn-archive__head--field { position: relative; }
.atn-archive__head--field > *:not(.atn-fluid) { position: relative; z-index: 1; }
.atn-fluid--soft {
  position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); width: auto; top: -1rem; bottom: 0; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.atn-fluid--soft.is-fallback { display: block; background: radial-gradient(50% 80% at 90% 20%, rgba(32,56,255,.18), rgba(32,56,255,0) 70%); }
.atn-archive__count { background: rgba(255,255,255,.85); }

/* Comparison essays: each written section is a boxed piece with its own heading. */
.atn-essays { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.atn-essay { background: var(--white); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem 3rem; }
.atn-essay h3 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variation-settings: "wdth" 85, "opsz" 32; position: sticky; top: 5.5rem; align-self: start; }
.atn-essay .atn-body { max-width: 62ch; }
.atn-essay .atn-body p:last-child { margin-bottom: 0; }
.atn-essay .atn-body strong { font-weight: 600; }
@media (max-width: 880px) { .atn-essay { grid-template-columns: 1fr; gap: .75rem; } .atn-essay h3 { position: static; } }

/* =========================================================================
   v5.3 — the comparison builder

   Scoped entirely under .atn-lab. Nothing above this block is touched.

   The palette widens here and only here. Five accents, assigned per column
   slot rather than per product, so colours stay put while tools come and go.
   Each accent is used three ways: the column's gradient head, a hairline on
   its cells, and the tint behind a winning value.

   Layout is one grid inside one scroller. The label column is sticky, the
   product columns have a minimum width, so five columns scroll horizontally
   on a phone with the row labels still visible. There is no separate mobile
   markup to fall out of sync.
   ========================================================================= */

.atn-lab {
  --lab-label: 11.5rem;
  --lab-col: 15rem;
  --a: var(--cobalt);
  --a-soft: var(--cobalt-t);
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.atn-lab [data-accent="cobalt"]  { --a: #2038FF; --a-soft: #E9ECFF; --a-deep: #0D1A9E; }
.atn-lab [data-accent="violet"]  { --a: #7C3AED; --a-soft: #F1E9FF; --a-deep: #4C1D95; }
.atn-lab [data-accent="teal"]    { --a: #009B8E; --a-soft: #DEF5F2; --a-deep: #04564F; }
.atn-lab [data-accent="amber"]   { --a: #C2410C; --a-soft: #FFEDE2; --a-deep: #7C2D12; }
.atn-lab [data-accent="magenta"] { --a: #D01A72; --a-soft: #FFE6F2; --a-deep: #7A0D42; }

/* ---------------------------------------------------------------- header */

.atn-lab__head {
  display: grid; grid-template-columns: 1fr 26rem; gap: 2rem 4rem; align-items: start;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.atn-lab__eyebrow {
  margin: 0 0 .875rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cobalt); display: inline-flex; align-items: center; gap: .5rem;
}
.atn-lab__eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--cobalt); }
.atn-lab__title { margin: 0 0 1rem; }
.atn-lab__head .atn-lede { max-width: 30em; }

/* ---------------------------------------------------------------- picker */

.atn-lab__pickerwrap { position: relative; }
.atn-lab__field {
  display: flex; align-items: center; gap: .625rem;
  background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r-box);
  padding: 0 .875rem 0 1rem; height: 3.5rem; transition: box-shadow .15s, border-color .15s;
}
.atn-lab__field:focus-within { border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--cobalt-t); }
.atn-lab__fieldico { display: grid; place-items: center; color: var(--ink-45); }
.atn-lab__fieldico .atn-i { vertical-align: 0; }
.atn-lab__field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; font-size: 1rem; }
.atn-lab__field input:focus { outline: none; }
.atn-lab__counter {
  font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-45);
  background: var(--paper); border-radius: var(--r-pill); padding: .25rem .5rem;
}

.atn-lab__results {
  position: absolute; left: 0; right: 0; top: calc(3.5rem + .5rem); z-index: 30;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.3);
  max-height: 20rem; overflow-y: auto; padding: .375rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s var(--ease), visibility 0s .15s;
}
.atn-lab.is-searching .atn-lab__results { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.atn-lab__opt {
  width: 100%; display: grid; grid-template-columns: 2rem 1fr auto auto; align-items: center; gap: .75rem;
  padding: .5rem .625rem; border: 0; background: transparent; border-radius: 7px; cursor: pointer; text-align: left;
}
.atn-lab__opt:hover, .atn-lab__opt:focus-visible { background: var(--cobalt-t); outline: none; }
.atn-lab__optini {
  width: 2rem; height: 2rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-soft);
  display: grid; place-items: center; font-weight: 700; font-size: .9375rem;
}
.atn-lab__optname { font-weight: 600; font-size: .9375rem; min-width: 0; }
.atn-lab__optname small { display: block; font-weight: 400; font-size: .8125rem; color: var(--ink-45); }
.atn-lab__optprice { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--ink-70); }
.atn-lab__optadd { width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill); background: var(--ink); color: var(--white); display: grid; place-items: center; font-size: 1rem; line-height: 1; }
.atn-lab__opt:hover .atn-lab__optadd { background: var(--cobalt); }
.atn-lab__note { margin: 0; padding: .875rem 1rem; color: var(--ink-45); font-size: .9rem; }

.atn-lab__chosen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; min-height: 2rem; }
.atn-lab__pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .4rem;
  border-radius: var(--r-pill); background: var(--a-soft); color: var(--a-deep, var(--a)); font-size: .875rem; font-weight: 600;
  animation: atn-pop .3s var(--ease) both;
}
.atn-lab__pill b {
  width: 1.5rem; height: 1.5rem; border-radius: var(--r-pill); background: var(--a); color: #fff;
  display: grid; place-items: center; font-size: .75rem;
}
.atn-lab__pill button {
  width: 1.5rem; height: 1.5rem; border: 0; border-radius: var(--r-pill); background: transparent;
  color: inherit; cursor: pointer; font-size: 1.125rem; line-height: 1; padding: 0; opacity: .5;
}
.atn-lab__pill button:hover { opacity: 1; background: rgba(255,255,255,.7); }
@keyframes atn-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------- empty state */

.atn-lab__empty, .atn-lab__loading {
  border: 1px dashed var(--line); border-radius: 12px; background: var(--white);
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; text-align: center; color: var(--ink-45);
}
.atn-lab__empty p, .atn-lab__loading { margin: 0; font-size: 1.0625rem; }
.atn-lab__slots { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1.25rem; }
.atn-lab__slots i {
  width: 3.5rem; height: 4.5rem; border-radius: 8px; border: 1.5px dashed var(--line);
  transform: perspective(500px) rotateY(12deg); transition: all .4s var(--ease);
}
.atn-lab__slots i:nth-child(2) { transform: perspective(500px) rotateY(0deg); }
.atn-lab__slots i:nth-child(3) { transform: perspective(500px) rotateY(-12deg); }
.atn-lab__slots i.is-on { border-style: solid; border-color: var(--cobalt); background: var(--cobalt-t); }

/* ---------------------------------------------------------------- matrix */

.atn-lab__matrix {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  scrollbar-width: thin;
}
.atn-lab__matrix:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.atn-lab__grid { min-width: min-content; }

.atn-lab__row { display: grid; border-top: 1px solid var(--line-soft); }
.atn-lab__row:first-child { border-top: 0; }

.atn-lab__label {
  position: sticky; left: 0; z-index: 3; background: var(--paper);
  border-right: 1px solid var(--line); padding: 1rem 1.125rem;
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .8125rem; font-weight: 600; color: var(--ink-70);
}
.atn-lab__label .atn-i { color: var(--ink-45); margin-top: .1rem; }
.atn-lab__label--head { align-items: flex-end; padding-bottom: 1.25rem; color: var(--ink-45); font-weight: 500; }

/* Column head: a gradient plate over the product shot, tilting to the cursor. */
.atn-lab__col {
  position: relative; overflow: hidden; margin: .5rem; border-radius: 12px; isolation: isolate;
  background: var(--a); color: var(--white);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.6);
  animation: atn-lift .45s var(--ease) both;
}
.atn-lab__col:hover { box-shadow: 0 24px 44px -22px rgba(0,0,0,.55); }
@keyframes atn-lift { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.atn-lab__colshot {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: .28; filter: saturate(.4); z-index: -2;
}
.atn-lab__col::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at var(--gx, 30%) var(--gy, 10%), rgba(255,255,255,.4), rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--a) 10%, var(--a-deep, var(--a)) 100%);
  opacity: .93;
}
.atn-lab__colbody { padding: 1.125rem 1.125rem 1.25rem; display: grid; gap: .5rem; }
.atn-lab__collogo {
  width: 2.75rem; height: 2.75rem; border-radius: 12px; background: rgba(255,255,255,.95); color: var(--a-deep, var(--a));
  display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; overflow: hidden;
}
.atn-lab__collogo img { width: 100%; height: 100%; object-fit: cover; }
.atn-lab__col h3 { margin: .25rem 0 0; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
.atn-lab__col h3 a { color: inherit; }
.atn-lab__col h3 a:hover { text-decoration: underline; text-underline-offset: .15em; }
.atn-lab__col p {
  margin: 0; font-size: .875rem; line-height: 1.4; color: rgba(255,255,255,.85);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.45em;
}
.atn-lab__cta {
  margin-top: .375rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--white); color: var(--a-deep, var(--a)); font-weight: 600; font-size: .875rem;
  padding: .5rem .875rem; border-radius: var(--r-pill); transition: transform .15s var(--ease);
}
.atn-lab__cta:hover { transform: translateY(-1px); }
.atn-lab__cta .atn-i { vertical-align: 0; }
.atn-lab__drop {
  position: absolute; top: .625rem; right: .625rem; z-index: 2;
  width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: rgba(255,255,255,.22); color: var(--white); font-size: 1.125rem; line-height: 1; padding: 0;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.atn-lab__drop:hover { background: var(--white); color: var(--ink); }

/* Cells */
.atn-lab__cell {
  padding: 1rem 1.125rem; border-left: 1px solid var(--line-soft); font-size: .9375rem; min-width: 0;
  position: relative;
}
.atn-lab__row:not(.atn-lab__row--head) .atn-lab__cell::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--a); opacity: 0; transition: opacity .2s;
}
.atn-lab__row:hover .atn-lab__cell::before { opacity: .35; }
.atn-lab__row:hover .atn-lab__label { background: var(--white); }
.atn-lab__cellname { display: none; }

.atn-lab__price, .atn-lab__score { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: inline-block; }
.atn-lab__price small, .atn-lab__score small { font-size: .8125rem; font-weight: 400; color: var(--ink-45); letter-spacing: 0; }
.atn-lab__price.is-best, .atn-lab__score.is-best { color: var(--a); }
.atn-lab__badge {
  display: inline-block; margin-left: .5rem; vertical-align: .3em;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--a); color: var(--white); padding: .2rem .45rem; border-radius: var(--r-pill);
}
.atn-lab__bar { display: block; height: 4px; border-radius: 2px; background: var(--paper); margin-top: .5rem; overflow: hidden; max-width: 8rem; }
.atn-lab__bar i { display: block; height: 100%; background: var(--a); border-radius: 2px; }

.atn-lab__plans { display: grid; gap: .375rem; }
.atn-lab__yes { display: inline-flex; align-items: center; gap: .375rem; font-weight: 500; color: var(--a); }
.atn-lab__none { color: var(--ink-45); }
.atn-lab__plain { color: var(--ink-70); }

.atn-lab__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.atn-lab__tag {
  display: inline-block; padding: .2rem .5rem; border-radius: var(--r-pill);
  background: var(--a-soft); color: var(--a-deep, var(--a)); font-size: .8125rem; font-weight: 500;
}
.atn-lab__tag--more { background: transparent; border: 1px dashed var(--line); color: var(--ink-45); }

.atn-lab__bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.atn-lab__bullets li { display: grid; grid-template-columns: .9rem 1fr; gap: .5rem; font-size: .875rem; line-height: 1.4; color: var(--ink-70); }
.atn-lab__bullets li .atn-i { margin-top: .2rem; vertical-align: 0; color: var(--ink-45); }
.atn-lab__bullets.is-good li .atn-i { color: var(--a); }

.atn-lab__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.atn-lab__tiers li { display: flex; justify-content: space-between; gap: .75rem; font-size: .875rem; border-bottom: 1px solid var(--line-soft); padding-bottom: .3rem; }
.atn-lab__tiers li:last-child { border-bottom: 0; }
.atn-lab__tiers span { color: var(--ink-70); }
.atn-lab__tiers b { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .atn-lab__col, .atn-lab__pill { animation: none; }
  .atn-lab__col, .atn-lab__cta, .atn-lab__slots i { transition: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1020px) {
  .atn-lab__head { grid-template-columns: 1fr; gap: 1.5rem; }
  .atn-lab__pickerwrap { max-width: 34rem; }
}

@media (max-width: 720px) {
  /* Labels stop being a column and become a heading above each row, so a
     narrow screen never has to hold two things side by side to be read. */
  .atn-lab { --lab-label: 0; --lab-col: 13.5rem; }
  .atn-lab__matrix { border-radius: 10px; }
  .atn-lab__row { grid-template-columns: none !important; display: block; padding-bottom: .25rem; }
  .atn-lab__label {
    position: static; border-right: 0; border-bottom: 1px solid var(--line-soft);
    padding: .75rem 1rem; background: var(--paper); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  }
  .atn-lab__label--head { display: none; }
  .atn-lab__row--head, .atn-lab__row:not(.atn-lab__row--head) {
    display: block;
  }
  /* Cells within one row scroll together, snapping tool by tool. */
  .atn-lab__row > .atn-lab__cell, .atn-lab__row--head > .atn-lab__col { display: inline-block; vertical-align: top; }
  .atn-lab__row { white-space: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .atn-lab__row::-webkit-scrollbar { display: none; }
  .atn-lab__row > .atn-lab__cell { width: 15rem; white-space: normal; scroll-snap-align: start; border-left: 0; border-right: 1px solid var(--line-soft); }
  .atn-lab__row--head > .atn-lab__col { width: 15rem; white-space: normal; scroll-snap-align: start; }
  .atn-lab__label { white-space: normal; }
  .atn-lab__cellname {
    display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--a); margin-bottom: .375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .atn-lab__price, .atn-lab__score { font-size: 1.25rem; }
}

/* =========================================================================
   v5.3.1 — four corrections
   ========================================================================= */

/* 1. The lab's own buttons sit on light surfaces, so they must not inherit
      the white text the site's primary actions use. Stated explicitly here
      because the inherited rule is more specific than the component. */
body.atn .atn-lab__cta,
body.atn .atn-lab__cta:hover,
body.atn .atn-lab__cta:focus { color: var(--a-deep, var(--a)); background: var(--white); }
body.atn .atn-lab__opt,
body.atn .atn-lab__opt:hover { color: var(--ink); }
body.atn .atn-lab__optadd { color: var(--white); }
body.atn .atn-lab__drop { color: var(--white); }
body.atn .atn-lab__drop:hover { color: var(--ink); background: var(--white); }
body.atn .atn-lab__pill button { color: inherit; }

/* 2. The last column in the matrix had no gutter of its own, so long values
      ran to the scroller's edge. Give the grid a trailing rail. */
.atn-lab__grid { padding-right: 1px; }
.atn-lab__row > .atn-lab__cell:last-child,
.atn-lab__row--head > .atn-lab__col:last-child { padding-right: 1.5rem; }
.atn-lab__row--head > .atn-lab__col:last-child { padding-right: 0; margin-right: 1rem; }
.atn-lab__cell { padding-right: 1.375rem; }
.atn-lab__tiers li { padding-right: .25rem; }
.atn-lab__tiers b { padding-left: .5rem; }

/* 3 & 4. Justified measure for the two places that run as body copy: the
      tool card standfirst, and the written sections of a comparison. Hyphens
      are on, otherwise justification opens rivers at these widths. */
.atn-card__tagline,
.atn-essay .atn-body p,
.atn-compare__section .atn-body p,
.atn-product__main .atn-body p,
.atn-overview {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.atn-card__tagline { hyphens: none; -webkit-hyphens: none; }

/* A justified last line still reads as ragged, which is correct; but very
   narrow columns justify badly, so fall back to flush left there. */
@media (max-width: 560px) {
  .atn-card__tagline, .atn-essay .atn-body p, .atn-compare__section .atn-body p,
  .atn-product__main .atn-body p, .atn-overview { text-align: left; hyphens: none; -webkit-hyphens: none; }
}