/**
 * home-demo-port.css
 *
 * CSS ported verbatim from homepage-demo.html (the validated reference).
 * Applies only on the front page (loaded conditionally by assets.php).
 *
 * Scope:
 *   - All class names match homepage-demo.html exactly
 *   - Neutralises WordPress global style interference for home components
 *   - No re-interpretation; values copied from the demo source
 */

/* ── WordPress / FSE interference resets (home-specific) ──────────────────── */

/* Reset WP default link styles within homepage components */
.ri-homepage a, .ri-homepage a:hover, .ri-homepage a:visited {
  color: inherit;
  text-decoration: none;
}

/* Force correct font-family / base size for homepage components */
.ri-homepage {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #0b1724;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  background:
    linear-gradient(90deg, rgba(3,13,23,.97) 0%, rgba(3,13,23,.93) 37%, rgba(3,13,23,.12) 65%, rgba(3,13,23,.78) 100%),
    #061524;
  color: #fff;
  min-height: clamp(356px, 30vw, 470px);
  position: relative;
  overflow: hidden;
}
.hero .container {
  position: relative;
  min-height: clamp(356px, 30vw, 470px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.14fr) minmax(0, 1fr);
  grid-template-rows: minmax(clamp(356px, 30vw, 470px), auto);
  min-height: clamp(356px, 30vw, 470px);
  overflow: hidden;
}

/* Hero left col — copy — flex column so stats flow below buttons without collision */
.hero-copy {
  display: flex;
  flex-direction: column;
  padding: 31px 0 25px;
  position: relative;
  z-index: 3;
}

.kicker {
  font-size: 10px;
  color: #4386ff;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 13px;
}

.hero h1 {
  font-size: clamp(54px, 4.6vw, 76px);
  line-height: .98;
  letter-spacing: -2.6px;
  margin: 0 0 13px;
  font-weight: 850;
}
.hero h1 .grad {
  background: linear-gradient(90deg, #3c8cff 3%, #654cff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.5;
  color: #e5ebf3;
  max-width: min(460px, 95%);
  margin: 0 0 18px;
}

.hero-buttons {
  display: flex;
  gap: 14px;
}

.btn {
  padding: 11px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 10px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(90deg, #633dff, #3f8bff);
  color: #fff;
}
.btn-outline {
  border: 1px solid #63809b;
  color: #fff;
}

/* Stats — flex row, 18px below the CTA buttons */
.stats {
  display: flex;
  gap: 30px;
  margin-top: 18px;
  flex-shrink: 0;
}
.stat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 72px;
}
.stat-icon {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(135deg, #7650ff, #3d81ff);
  box-shadow: 0 0 14px rgba(82,103,255,.65);
  flex-shrink: 0;
}
.stat strong {
  display: block;
  font-size: 14px;
  line-height: 1;
}
.stat small {
  font-size: 8px;
  color: #c8d3df;
  white-space: nowrap;
}

/* Hero centre col — image */
.hero-media {
  position: relative;
  overflow: hidden;
  height: clamp(356px, 30vw, 470px);
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #061524 0%, transparent 24%, transparent 76%, #061524 100%);
  pointer-events: none;
}
.hero-media .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  display: block;
}

/* Handnote annotation */
.handnote {
  position: absolute;
  z-index: 2;
  left: 17px;
  bottom: 70px;
  transform: rotate(-9deg);
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  font-size: 16px;
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
}
.handnote::after {
  content: "↗";
  font-size: 31px;
  display: block;
  margin-left: 38px;
  margin-top: 3px;
  transform: rotate(20deg);
}

/* Hero right col — rail */
.hero-rail {
  padding: 31px 0 0 14px;
  position: relative;
  z-index: 3;
  overflow: hidden;
}

/* À la une label */
.headline-label {
  position: absolute;
  top: 20px;
  right: 0;
  background: #071625;
  color: #4587ff;
  border: 1px solid #294d73;
  font-size: 7px;
  letter-spacing: .7px;
  padding: 3px 8px;
  border-radius: 10px;
}

/* Headline card — display:grid with 3 span children (no div-in-a issue) */
.headline {
  border: 1px solid #365b7f;
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(5,17,29,.82);
  display: grid;
  grid-template-columns: 49px 1fr 11px;
  gap: 10px;
  align-items: center;
  min-height: 81px;
  text-decoration: none;
  color: #fff;
  transition: border-color .15s;
}
.headline:hover { border-color: #5b8ab0; }
.headline:focus-visible { outline: 2px solid #4386ff; outline-offset: 2px; }
.fi-headline {
  width: 49px;
  height: 49px;
  border-radius: 5px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0c4a6e 0%, #1d4ed8 55%, #a78bfa 100%);
  overflow: hidden;
  display: block;
}
.fi-headline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.headline strong {
  font-size: 9px;
  line-height: 1.35;
  display: block;
}
.headline small {
  display: block;
  color: #8ca0b6;
  font-size: 7px;
  margin-top: 7px;
}
.arrow { font-size: 17px; }

/* Rail adslot */
.hero-ad {
  height: 181px;
  margin-top: 19px;
}

/* ── AdSlots (generic placeholder style) ────────────────────────────────── */

.ad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #f7faff, #eef3ff);
  color: #486387;
}
.ad strong {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}
.ad span { font-size: 8px; }
.pill {
  font-size: 6px;
  margin-top: 18px;
  border: 1px solid #84a0c4;
  padding: 3px 8px;
  border-radius: 10px;
}
.side-ad  { height: 134px; margin-bottom: 14px; }
.tall-ad  { height: 160px; margin-bottom: 23px; }

/* ── Categories ─────────────────────────────────────────────────────────── */

.categories { padding: 16px 0 28px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}
.section-head h2 {
  font-size: clamp(12px, 0.9vw, 16px);
  margin: 0;
  font-weight: 800;
  letter-spacing: -.18px;
}
.section-head h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 3px solid #4386ff;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}
.section-link {
  font-size: 8px;
  color: #3f76ff;
  text-decoration: none;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 7px;
}
.cat {
  height: clamp(84px, 6.5vw, 110px);
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.cat:hover { border-color: #4386ff; background: #f0f4ff; }
.cat:focus-visible { outline: 2px solid #4386ff; outline-offset: 2px; }
.cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eef1ff;
  color: #4a68ff;
  margin-bottom: 8px;
  flex-shrink: 0;
  transition: background .15s;
}
.cat:hover .cat-icon { background: #dde4ff; }
.cat-icon svg { width: 22px; height: 22px; }
.cat-icon .ri-nav-icon { filter: saturate(0.85) brightness(0.95); transition: filter 170ms ease; }
.cat:hover .cat-icon .ri-nav-icon { filter: saturate(1) brightness(1.05) drop-shadow(0 0 4px rgba(91,128,255,.45)); }
.cat strong { font-size: 9px; }
.cat small  { font-size: 8px; color: #8c9aae; margin-top: 4px; }

/* ── Body grid — maincol + sidebar ─────────────────────────────────────── */

.body-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.75fr) minmax(248px, 1fr);
  gap: 16px;
  align-items: start;
}
.maincol { min-width: 0; }
.sidebar  { min-width: 0; }

/* ── Featured comparison ────────────────────────────────────────────────── */

/* position:relative allows the stretched .feat-link::after to cover the card */
.featured {
  border: 1px solid #dfe7f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(13,31,52,.08);
  padding: 11px;
  display: grid;
  grid-template-columns: minmax(0, 0.77fr) minmax(0, 1fr);
  gap: 17px;
  min-height: clamp(209px, 17vw, 290px);
  position: relative;
  transition: border-color .15s;
}
.featured:hover { border-color: #b0c2d4; }
.featured:focus-within { outline: 2px solid #4386ff; outline-offset: 2px; border-radius: 8px; }
.feat-link {
  text-decoration: none;
  color: inherit;
}
/* Stretched link — covers the entire .featured card */
.feat-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 8px;
}
.featured-image {
  height: clamp(188px, 14vw, 260px);
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.feat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  border-radius: 6px;
}
.badge {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 3px 7px;
  border-radius: 10px;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  background: linear-gradient(90deg, #7a43ff, #6138d9);
}
.featured-copy {
  padding: 18px 0 8px;
  position: relative;
}
.eyebrow {
  font-size: 8px;
  color: #376cff;
  font-weight: 800;
  text-transform: uppercase;
}
.featured h2 {
  font-size: clamp(21px, 1.7vw, 30px);
  line-height: 1.1;
  margin: 10px 0 10px;
  letter-spacing: -.45px;
}
.featured p {
  font-size: 11px;
  line-height: 1.55;
  color: #5e7897;
  max-width: 290px;
  margin: 0;
}
.meta {
  font-size: 7px;
  color: #56708b;
  position: absolute;
  bottom: 11px;
}
.circle-arrow {
  position: absolute;
  right: 4px;
  bottom: 2px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  background: linear-gradient(135deg, #6439ff, #3e7bff);
}

/* ── Latest articles head ────────────────────────────────────────────────── */

.latest-head {
  margin-top: 18px;
  margin-bottom: 12px;
}
.latest-head h2::before { border-radius: 2px; }
.latest-head h2::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: #4c6dff;
  margin-top: 3px;
}

/* ── Article grid ────────────────────────────────────────────────────────── */

.article-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.card {
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 10px rgba(20,42,66,.05);
  min-height: 224px;
  position: relative;
  transition: border-color .15s;
}
.card:hover { border-color: #b0c2d4; }
.card:focus-within { outline: 2px solid #4386ff; outline-offset: 2px; border-radius: 7px; }
/* Stretched link — card-link::after covers the entire .card */
.card-link {
  text-decoration: none;
  color: inherit;
}
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.thumb {
  height: clamp(85px, 7vw, 130px);
  position: relative;
  overflow: hidden;
}
.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.card-body { padding: 9px 10px; }
.card h3 {
  font-size: 10px;
  line-height: 1.3;
  margin: 0 0 10px;
  letter-spacing: -.12px;
}
.card p {
  font-size: 8px;
  line-height: 1.5;
  color: #778ba2;
  margin: 0;
}
.card .meta { left: 10px; bottom: 8px; }
.go {
  position: absolute;
  right: 9px;
  bottom: 7px;
  color: #4972ff;
  font-size: 13px;
}

/* ── Sidebar — newsbox ───────────────────────────────────────────────────── */

.newsbox {
  background: #071827;
  color: #fff;
  border-radius: 7px;
  padding: 13px 14px;
  margin-bottom: 14px;
  min-height: 132px;
}
.newsbox-top {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
}
.newsicon {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  border: 1px solid #2b5f90;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.newsbox strong { font-size: 11px; line-height: 1.3; }
.newsbox p      { font-size: 7px; color: #9eb1c5; margin: 0; }
.newsform {
  display: grid;
  grid-template-columns: 1fr 86px;
  gap: 10px;
  margin-top: 9px;
}
.newsform input {
  height: 37px;
  border: 0;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 8px;
}
.newsform button {
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  background: linear-gradient(90deg, #7045ff, #833dff);
  cursor: pointer;
}

/* ── Sidebar — top tools ─────────────────────────────────────────────────── */

.tools {
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  padding: 11px 10px;
  margin-bottom: 14px;
  min-height: 249px;
}
.tools h3 {
  font-size: 10px;
  margin: 0 0 11px;
  letter-spacing: -.08px;
}
.tool {
  display: grid;
  grid-template-columns: 18px 26px 1fr auto;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
  line-height: 1.4;
  position: relative; /* for stretched tool-link */
  border-radius: 4px;
}
/* Stretched-link covers the whole tool row */
.tool-link { text-decoration: none; color: inherit; }
.tool-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 4px; }
.tool:has(.tool-link):hover { background: rgba(255,255,255,.05); }
.tool:has(.tool-link):focus-within { outline: 2px solid #4386ff; outline-offset: 2px; }
.rank {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #edf3ff;
  display: grid;
  place-items: center;
  font-size: 7px;
  color: #4b65a0;
}
.tool-logo {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  background: #e9eff6;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 10px;
  overflow: hidden;
}
.tool-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tool strong { font-size: 8px; display: block; letter-spacing: -.08px; }
.tool small  { font-size: 7px; color: #8191a6; }
.rating { font-size: 8px; font-weight: 700; color: #1a2b3c; }
.rating::before { content: "★"; color: #ffba00; margin-right: 3px; }

/* ── Hubs (dark section, inside .maincol) ────────────────────────────────── */

.hubs {
  margin-top: 17px;
  background: linear-gradient(180deg, #071a2a, #071725);
  color: #fff;
  border-radius: 7px;
  padding: 13px 14px 14px;
}
.hubs .section-head { margin-bottom: 17px; }
.hubs .section-head h2::before { border-radius: 2px; border-color: #6da8ff; }
.hub-sub {
  font-size: 8px;
  color: #9caebe;
  margin-left: 25px;
  margin-top: -8px;
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  margin-top: 13px;
}
.hub {
  border: 1px solid #17344e;
  background: #0b2033;
  border-radius: 6px;
  overflow: hidden;
  min-height: 143px;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative; /* for stretched hub-link */
  transition: border-color .15s;
}
.hub:hover { border-color: #2a4a68; }
.hub:focus-within { outline: 2px solid #4386ff; outline-offset: 2px; border-radius: 6px; }
.hub-link { text-decoration: none; color: inherit; }
.hub-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hub-header {
  width: 100%;
  height: clamp(65px, 5.5vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
  position: relative;
  overflow: hidden;
}
.hub-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.22) 0%, transparent 65%);
  pointer-events: none;
}
.hub-header .ri-hub-brand-svg {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.25));
}
.hub-header__initials {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.hub-body { padding: 9px; }
.hub h3 { font-size: 9px; margin: 0 0 6px; letter-spacing: -.08px; color: #fff; }
.hub p  { font-size: 7px; line-height: 1.4; color: #aebac8; margin: 0 0 7px; }
.hub small { font-size: 7px; color: #7a97b2; }

/* ── Popular comparisons (inside .maincol) ───────────────────────────────── */

.popular { padding: 17px 0 18px; }
.pop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pop {
  border: 1px solid #dfe7f0;
  border-radius: 7px;
  min-height: 82px;
  padding: 11px;
  display: grid;
  grid-template-columns: 27px 1fr 11px;
  gap: 9px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.pop:hover { border-color: #b0c2d4; background: #f8fafc; }
.pop:focus-visible { outline: 2px solid #4386ff; outline-offset: 2px; }
.pop-logo {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #e9f6f4;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 11px;
}
.pop-body   { min-width: 0; }
.pop strong { font-size: 8px; line-height: 1.3; letter-spacing: -.08px; display: block; }
.pop small  { font-size: 7px; color: #7890aa; display: block; margin-top: 4px; line-height: 1.4; }
.pop-arrow  { font-size: 13px; color: #9fb0c2; margin-top: 4px; }

/* ── wpautop injection suppression ───────────────────────────────────────── */
/* core/shortcode block applies wpautop() which injects empty <p> elements   */
/* between block-level sections and wraps inline elements in <p> wrappers.   */

/* 1. Kill gap-causing empty <p> elements between top-level sections */
.ri-homepage > p:empty  { display: none; }
.ri-homepage > p        { display: none; } /* all direct p children are wpautop artefacts */

/* 2. Kill stale body-grid / maincol guard (kept for belt-and-suspenders) */
.body-grid > p:empty,
.maincol   > p:empty { display: none; }

/* 3. Inside .tool rows: wpautop wraps the <span class="rating"> in <p>.     */
/* display:contents makes the <p> transparent to grid layout so .rating      */
/* remains a direct grid item on the same row as rank, logo, and info.       */
.tool > p { display: contents; }

/* 4. footer-main: wpautop injects <p> between logo/nav/social → extra grid items */
.footer-main > p { display: none; }

/* 4. Hub: wpautop injects an empty <p> between img and hub-body AND wraps   */
/* the <small> count in a <p> inside hub-body. Kill all empty p in hub.      */
/* last-child margin reset removes the trailing margin on the count wrapper.  */
.hub p:empty            { display: none; }
.hub-body > p:last-child { margin-bottom: 0; }
.hub-body > p > small   { font-size: 7px; color: #7a97b2; }

/* 5. All section-heads: wpautop wraps the <a class="section-link"> in <p>.   */
/* display:contents makes the <p> transparent to flex layout so the <a>       */
/* becomes a direct flex item at its natural 10px height (vs 18px p box).    */
.section-head > p       { display: contents; }

/* Title clamping — prevents very long titles from breaking card layout */
.pop strong,
.card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pop card excerpt: real content much longer than demo stubs — clamp to 2 lines */
.pop small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Image fallback ──────────────────────────────────────────────────────── */

.thumb-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8f0fe, #d5e3f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fa4c0;
}

/* ── Mobile overrides (home-specific only) ───────────────────────────────── */
/* Container, utility, mainnav, footer mobile rules → shell-port.css          */

@media (max-width: 899px) {
  /* Hide elements tagged for mobile suppression */
  .ri-hide-mobile { display: none !important; }

  /* Hero: let height be driven by content, not min-height */
  .hero, .hero .container { min-height: auto; }
  .hero-grid  { display: block; }
  .hero-copy  { padding: 24px 0 18px; }
  .hero h1    { font-size: 34px; }
  .hero-media { height: 220px; }
  .handnote   { display: none; }
  .hero-rail  { display: none; }

  /* Stats */
  .stats { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; }

  /* Grids */
  .cat-grid       { grid-template-columns: repeat(4, 1fr); }
  .body-grid      { display: block; }
  .featured       { grid-template-columns: 1fr; }
  .featured-image { height: 180px; }
  .article-grid   { grid-template-columns: 1fr 1fr; }
  .thumb          { height: 110px; }
  .hub-grid, .pop-grid { grid-template-columns: 1fr 1fr; }

  /* Hubs IA — secondary text legibility on mobile */
  .hub h3    { font-size: 11px; }
  .hub p     { font-size: 11px; line-height: 1.5; }
  .hub small { font-size: 10px; }
  .hub-body > p > small { font-size: 10px; }

  /* Comparatifs à découvrir — secondary text legibility on mobile */
  .pop strong { font-size: 12px; line-height: 1.4; }
  .pop small  { font-size: 11px; line-height: 1.4; }

  /* Sidebar absent from mobile MASTER */
  .sidebar { display: none; }
}

/* ── prefers-reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cat, .pop, .hub, .featured, .card, .headline, .tool {
    transition: none;
  }
}