/*
 * AnimeRadar v2.4.227 - AnimeRadar App (#view-app.app-2026)
 *
 * Umsetzung der Referenz Referenzbilder/Seitendesigns/App.png
 * (1484 x 1060, Desktop links, Mobil rechts im Smartphone-Mockup).
 * Bildkoordinaten der Vorlage entsprechen CSS-Pixeln: Inhaltsspalte 858 px
 * (lokaler Vergleichsviewport 1099 px), Hero 691 hoch, unterer Banner 162
 * hoch, Abstand 8. CTA 246 x 48, Store-Badges 172/179 x 54.
 * Mobilseite der Vorlage ist 318 px breit (Hero-Panel) und wird mit dem
 * Faktor 366/318 auf die Inhaltsbreite bei 390 px umgerechnet.
 *
 * V2.4.233: Die vier Feature-Punkte unter den Store-Badges wurden auf
 * Wunsch entfernt. Die Hero-Hoehe bleibt bei min-height 691, weil sie von
 * der Geraetedarstellung bestimmt wird: das vordere Smartphone reicht
 * gedreht bis 675 px unter die Hero-Oberkante. Ein Absenken wuerde es
 * anschneiden und die Referenzgeometrie aus App.png verletzen. Unter den
 * Badges bleibt deshalb bewusst Freiflaeche. Mobil (.ap-hero ist dort
 * display: contents) rueckt der Banner ueber seinen eigenen margin-top
 * von 17 px nach oben, ohne weitere Regel.
 *
 * Alle Regeln sind auf #view-app.app-2026 begrenzt. Die alte Datei
 * material-reference-app-v2-4-194.css bleibt geladen, ihre Selektoren
 * (.app-gm-hero, .app-gm-card, .app-gm-phone ...) kommen im neuen Markup
 * nicht mehr vor.
 *
 * Artwork-Ebene: .ap-hero-art (--ap-hero-art) ist bewusst leer. Ein
 * spaeteres Bild wird ueber die Custom Property auf #view-app gesetzt, ohne
 * das Layout zu veraendern:
 *   #view-app.app-2026 { --ap-hero-art: url("assets/...webp"); }
 *
 * Der frueher hier beschriebene untere Banner (.ap-banner) ist seit
 * V2.4.235 entfernt; Markup, Regeln und Tokens dazu sind geloescht.
 *
 * Die Smartphone-Darstellung ist wie bisher eine HTML/CSS-Komponente. Das
 * Logo in der App-Leiste ist das Original der Website
 * (assets/splash/animeradar-radar-transparent-v1.png). Echte App-Screenshots
 * liegen nicht im Projekt; die Displays zeigen eine schematische Oberflaeche
 * mit echten Bezeichnungen der Anwendung und ohne erfundene Titel oder
 * Bewertungen.
 */

/* ========================================================================== */
/* Grundwerte                                                                 */
/* ========================================================================== */

#view-app.app-2026 {
  --ap-radius: 12px;
  --ap-line: rgba(255, 255, 255, .07);
  --ap-line-strong: rgba(255, 255, 255, .11);
  --ap-hero-bg: #0d0b0e;
  --ap-card-bg: #121215;
  --ap-text: #ffffff;
  --ap-soft: #e6e4e8;
  --ap-muted: #aaaab2;
  --ap-dim: #c9c9cf;
  --ap-red: #ea202d;
  --ap-red-bright: #fb2234;
  --ap-red-glow: rgba(228, 30, 54, .78);
  --ap-badge-bg: #000000;
  --ap-badge-line: #3f3e40;
  /* Reservierte Artwork-Ebenen, absichtlich leer. */
  --ap-hero-art: none;
  width: 100%;
  min-width: 0;
  color: var(--ap-text);
}

#view-app.app-2026.active {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 24px;
  padding-bottom: 22px;
}

#view-app.app-2026 *,
#view-app.app-2026 *::before,
#view-app.app-2026 *::after {
  box-sizing: border-box;
}

#view-app.app-2026 :where(h1, h2, h3, p, ul, li) {
  margin: 0;
  padding: 0;
}

#view-app.app-2026 ul {
  list-style: none;
}

#view-app.app-2026 svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#view-app.app-2026 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================== */
/* Hero                                                                       */
/* ========================================================================== */

#view-app.app-2026 .ap-hero {
  position: relative;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  align-content: start;
  min-height: 691px;
  padding: 49px 24px 15px 29px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ap-line-strong);
  border-radius: var(--ap-radius);
  background:
    radial-gradient(58% 64% at 90% 10%, rgba(126, 16, 36, .34) 0%, rgba(126, 16, 36, 0) 72%),
    radial-gradient(46% 52% at 102% 84%, rgba(112, 14, 32, .3) 0%, rgba(112, 14, 32, 0) 72%),
    var(--ap-hero-bg);
}

/* Leere Artwork-Ebene ueber die ganze Flaeche. Ohne Bild unsichtbar, Layout
   bleibt gleich. Der Verlauf haelt spaeter die Textflaeche links dunkel. */
#view-app.app-2026 .ap-hero-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  background-image: var(--ap-hero-art);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 62% 40%;
  pointer-events: none;
}

#view-app.app-2026 .ap-hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 11, 14, .94) 0%, rgba(13, 11, 14, .84) 34%, rgba(13, 11, 14, .34) 58%, rgba(13, 11, 14, .1) 100%),
    linear-gradient(180deg, rgba(13, 11, 14, .12) 0%, rgba(13, 11, 14, 0) 30%, rgba(13, 11, 14, .32) 100%);
}

#view-app.app-2026 .ap-hero-copy {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  align-content: start;
  min-width: 0;
}

#view-app.app-2026 .ap-eyebrow {
  margin: 0 0 4px;
  color: var(--ap-red-bright);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#view-app.app-2026 .ap-hero-title {
  margin: 0 0 13px;
  color: var(--ap-text);
  font-family: var(--font-display, inherit);
  font-size: 56px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -.02em;
  white-space: nowrap;
}

#view-app.app-2026 .ap-hero-lead {
  max-width: 380px;
  margin: 0 0 21px;
  color: var(--ap-soft);
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
}

/* CTA - der bestehende Android-Download (#androidDownloadButton)

   Der Abstand nach oben stand frueher an .ap-hero-lead (margin-bottom: 21px).
   Seit der Banner-Vereinheitlichung setzt
   material-account-banners-v2-4-267.css auf .ar-standard-banner-description
   ein `margin: 0 !important`; der Lead hat damit keinen unteren Abstand mehr
   und der Knopf sass direkt an der Textkante. Gemessen: 0 px auf Desktop,
   Mobile und in der App.

   Der Abstand wird deshalb hier am Knopf selbst gefuehrt - die Banner-Regel
   bleibt unangetastet, und der Rest des Bereichs aendert sich nicht. */
#view-app.app-2026 .ap-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  justify-self: start;
  width: auto;
  min-width: 246px;
  max-width: none;
  height: 48px;
  min-height: 0;
  margin: 21px 0 19px;
  padding: 0 34px;
  border: 0;
  border-radius: 8px;
  background: var(--ap-red);
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(234, 32, 45, .28);
  transition: background-color .16s ease, transform .16s ease;
}

#view-app.app-2026 .ap-cta:hover,
#view-app.app-2026 .ap-cta:focus-visible {
  background: #f22a37;
  color: #ffffff;
  text-decoration: none;
}

#view-app.app-2026 .ap-cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

#view-app.app-2026 .ap-cta svg {
  width: 10px;
  height: 14px;
  stroke-width: 2.6;
}

#view-app.app-2026 .ap-cta.is-disabled {
  cursor: default;
  opacity: .75;
  box-shadow: none;
}

#view-app.app-2026 .ap-cta.is-disabled:hover {
  background: var(--ap-red);
}

/* Store-Badges - im Projekt gibt es keine Store-Links, daher keine Ziele. */
#view-app.app-2026 .ap-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

#view-app.app-2026 .ap-store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 14px;
  border: 1px solid var(--ap-badge-line);
  border-radius: 9px;
  background: var(--ap-badge-bg);
  color: #ffffff;
}

#view-app.app-2026 .ap-store-apple {
  gap: 13px;
  min-width: 172px;
  padding: 0 25px 0 12px;
}

#view-app.app-2026 .ap-store-google {
  gap: 2px;
  min-width: 179px;
  padding: 0 16px 0 12px;
}

#view-app.app-2026 .ap-store-mark {
  display: block;
  flex: none;
  width: 24px;
  height: 31px;
}

#view-app.app-2026 .ap-store-google .ap-store-mark {
  width: 27px;
}

#view-app.app-2026 .ap-store-mark svg {
  width: 100%;
  height: 100%;
  stroke: none;
}

#view-app.app-2026 .ap-store-apple .ap-store-mark svg {
  fill: #ffffff;
}

#view-app.app-2026 .ap-store-text {
  display: grid;
  gap: 0;
  line-height: 1;
}

#view-app.app-2026 .ap-store-text small {
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  line-height: 12px;
}

#view-app.app-2026 .ap-store-google .ap-store-text small {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#view-app.app-2026 .ap-store-text strong {
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ========================================================================== */
/* Smartphone-Darstellung (rechts im Hero)                                     */
/* ========================================================================== */

#view-app.app-2026 .ap-stage {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 408px;
  right: 0;
  pointer-events: none;
}

/* Roter Lichtschein hinter den Geraeten; gehoert zur Geraetedarstellung,
   nicht zur Artwork-Ebene, und bleibt bei spaeterem Hintergrundbild. */
#view-app.app-2026 .ap-glow {
  position: absolute;
  top: -2px;
  left: calc(56% - 360px);
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 36, 62, .9) 0%, rgba(226, 30, 56, .62) 26%, rgba(186, 20, 46, .34) 48%, rgba(130, 12, 34, .1) 64%, rgba(120, 12, 32, 0) 72%);
  filter: blur(10px);
}

#view-app.app-2026 .ap-glow-back {
  top: 220px;
  left: calc(56% - 80px);
  width: 560px;
  height: 560px;
  opacity: .75;
}

#view-app.app-2026 .ap-phone {
  position: absolute;
  width: 260px;
  height: 592px;
  border-radius: 42px;
  background: #07070a;
  box-shadow:
    inset 0 0 0 2px #3c3c43,
    inset 0 0 0 4px #0b0b0e,
    0 0 0 1.5px rgba(255, 110, 124, .42),
    0 0 26px rgba(255, 46, 70, .62),
    0 0 70px rgba(214, 26, 52, .4),
    0 36px 70px rgba(0, 0, 0, .66);
  transform-origin: center;
}

#view-app.app-2026 .ap-phone-front {
  z-index: 2;
  top: 63px;
  left: calc(56% - 130px);
  transform: rotate(11deg);
}

#view-app.app-2026 .ap-phone-back {
  z-index: 1;
  top: 253px;
  left: calc(56% + 80px);
  transform: rotate(10deg);
}

#view-app.app-2026 .ap-screen {
  position: absolute;
  inset: 9px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(180deg, #0c0b0f 0%, #09090b 100%);
  color: #f7f3f4;
}

#view-app.app-2026 .ap-island {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 50%;
  width: 74px;
  height: 22px;
  border-radius: 12px;
  background: #000000;
  transform: translateX(-50%);
}

#view-app.app-2026 .ap-status {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  height: 42px;
  padding: 14px 20px 0;
}

#view-app.app-2026 .ap-status i {
  display: block;
  background: #ffffff;
}

#view-app.app-2026 .ap-status-signal {
  width: 14px;
  height: 9px;
  background:
    linear-gradient(#ffffff, #ffffff) 0 100% / 2px 3px no-repeat,
    linear-gradient(#ffffff, #ffffff) 4px 100% / 2px 5px no-repeat,
    linear-gradient(#ffffff, #ffffff) 8px 100% / 2px 7px no-repeat,
    linear-gradient(#ffffff, #ffffff) 12px 100% / 2px 9px no-repeat;
  background-color: transparent !important;
}

#view-app.app-2026 .ap-status-wifi {
  width: 12px;
  height: 9px;
  border-radius: 12px 12px 2px 2px;
  clip-path: polygon(50% 100%, 0 25%, 100% 25%);
}

#view-app.app-2026 .ap-status-battery {
  width: 20px;
  height: 9px;
  border-radius: 3px;
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9);
  position: relative;
}

#view-app.app-2026 .ap-status-battery::after {
  content: '';
  position: absolute;
  inset: 2.5px 5px 2.5px 2.5px;
  border-radius: 1px;
  background: #ffffff;
}

#view-app.app-2026 .ap-app-bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 2px 14px 8px;
}

#view-app.app-2026 .ap-app-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #f7f3f4;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

#view-app.app-2026 .ap-app-brand img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  background: transparent;
}

#view-app.app-2026 .ap-app-bar svg {
  width: 16px;
  height: 16px;
  color: #f7f3f4;
}

#view-app.app-2026 .ap-app-hero {
  position: relative;
  display: grid;
  flex: none;
  align-content: start;
  gap: 4px;
  height: 262px;
  margin: 6px 10px 0;
  padding: 16px 14px;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(70, 10, 24, .38) 0%, rgba(10, 8, 12, .42) 62%, rgba(9, 9, 11, .96) 100%),
    url("assets/bleach-hero-460-v232.webp") center 28% / cover no-repeat,
    #1a0b12;
}

#view-app.app-2026 .ap-app-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 50% at 82% 60%, rgba(214, 26, 52, .3) 0%, rgba(214, 26, 52, 0) 70%);
  pointer-events: none;
}

#view-app.app-2026 .ap-app-hero > * {
  position: relative;
  z-index: 1;
}

#view-app.app-2026 .ap-app-eyebrow {
  color: var(--ap-red-bright);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#view-app.app-2026 .ap-app-hero strong {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
}

#view-app.app-2026 .ap-app-hero-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 400;
}

#view-app.app-2026 .ap-app-play {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}

#view-app.app-2026 .ap-app-play svg {
  width: 9px;
  height: 9px;
  stroke-width: 2.4;
}

#view-app.app-2026 .ap-app-row {
  display: grid;
  flex: none;
  gap: 6px;
  margin: 12px 12px 0;
}

#view-app.app-2026 .ap-app-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 700;
}

#view-app.app-2026 .ap-app-row-head svg {
  width: 8px;
  height: 8px;
  stroke-width: 2.2;
  opacity: .7;
}

#view-app.app-2026 .ap-app-tiles {
  display: grid;
  grid-template-columns: repeat(4, 46px);
  gap: 7px;
}

#view-app.app-2026 .ap-app-tile {
  display: grid;
  gap: 3px;
}

#view-app.app-2026 .ap-app-tile i {
  display: block;
  height: 60px;
  border-radius: 6px;
  background: linear-gradient(160deg, #3a1f3f 0%, #1a1620 60%, #101014 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

#view-app.app-2026 .ap-app-tile:nth-child(2) i {
  background: linear-gradient(160deg, #2a3a55 0%, #171a26 60%, #101014 100%);
}

#view-app.app-2026 .ap-app-tile:nth-child(3) i {
  background: linear-gradient(160deg, #5a1a26 0%, #241418 60%, #101014 100%);
}

#view-app.app-2026 .ap-app-tile:nth-child(4) i {
  background: linear-gradient(160deg, #4a3a1c 0%, #221c14 60%, #101014 100%);
}

#view-app.app-2026 .ap-app-tile b {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .42);
}

#view-app.app-2026 .ap-app-tile b + b {
  width: 16px;
  background: rgba(251, 34, 52, .7);
}

#view-app.app-2026 .ap-app-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  margin-top: auto;
  padding: 6px 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: #0a0a0c;
}

#view-app.app-2026 .ap-app-tab {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 0 4px;
  border-radius: 10px;
  color: #d7d2d4;
  font-size: 6.5px;
  font-weight: 600;
}

#view-app.app-2026 .ap-app-tab svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.9;
}

#view-app.app-2026 .ap-app-tab.is-active {
  color: var(--ap-red-bright);
  background: rgba(228, 30, 54, .16);
}

#view-app.app-2026 .ap-home-bar {
  position: absolute;
  z-index: 3;
  bottom: 6px;
  left: 50%;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);
  transform: translateX(-50%);
}

/* Zweites Geraet: Entdecken-Ansicht */
#view-app.app-2026 .ap-app-title {
  flex: none;
  margin: 8px 14px 0;
  font-size: 19px;
  font-weight: 800;
}

#view-app.app-2026 .ap-app-pills {
  display: flex;
  flex: none;
  gap: 6px;
  margin: 10px 14px 0;
}

#view-app.app-2026 .ap-app-pills span {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  font-size: 7.5px;
  font-weight: 600;
  white-space: nowrap;
}

#view-app.app-2026 .ap-app-grid {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 14px 0;
}

#view-app.app-2026 .ap-app-grid .ap-app-tile i {
  height: 86px;
}

/* ========================================================================== */
/* Schmalere Desktops: Geraete verkleinern, damit sie die Textspalte nicht    */
/* ueberdecken.                                                               */
/* ========================================================================== */

@media (min-width: 960px) and (max-width: 1060px) {
  #view-app.app-2026 .ap-phone-front {
    transform: rotate(11deg) scale(.86);
  }

  #view-app.app-2026 .ap-phone-back {
    transform: rotate(10deg) scale(.86);
  }

  #view-app.app-2026 .ap-glow {
    transform: scale(.86);
  }
}

@media (min-width: 960px) and (max-width: 1040px) {
  #view-app.app-2026 .ap-phone-front,
  #view-app.app-2026 .ap-phone-back {
    left: calc(50% - 130px);
  }

  #view-app.app-2026 .ap-phone-back {
    left: calc(50% + 58px);
  }

  #view-app.app-2026 .ap-glow {
    left: calc(50% - 360px);
  }
}

/* ========================================================================== */
/* Mobil (Vorlage rechts, Faktor 366/318)                                     */
/* ========================================================================== */

@media (max-width: 959px) {
  #view-app.app-2026.active {
    gap: 0;
    padding: 0 0 8px;
  }

  /* Der Hero-Rahmen loest sich auf: das Panel ist mobil die Textspalte,
     die Feature-Cards liegen wie in der Vorlage ausserhalb darunter. */
  #view-app.app-2026 .ap-hero {
    display: contents;
  }

  #view-app.app-2026 .ap-hero-art,
  #view-app.app-2026 .ap-stage {
    display: none;
  }

  #view-app.app-2026 .ap-hero-copy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 36px 18px 12px;
    border: 1px solid var(--ap-line-strong);
    border-radius: var(--ap-radius);
    background:
      radial-gradient(70% 46% at 100% 0%, rgba(126, 16, 36, .4) 0%, rgba(126, 16, 36, 0) 72%),
      radial-gradient(60% 40% at 0% 100%, rgba(112, 14, 32, .22) 0%, rgba(112, 14, 32, 0) 70%),
      var(--ap-hero-bg);
  }

  /* Mobile Artwork-Ebene: liest dieselbe Custom Property --ap-hero-art.
     Ohne Bild unsichtbar, Layout bleibt gleich. */
  #view-app.app-2026 .ap-hero-copy::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
      linear-gradient(180deg, rgba(13, 11, 14, .2) 0%, rgba(13, 11, 14, .78) 42%, rgba(13, 11, 14, .96) 70%),
      linear-gradient(90deg, rgba(13, 11, 14, .88) 0%, rgba(13, 11, 14, .4) 50%, rgba(13, 11, 14, .1) 100%),
      var(--ap-hero-art);
    background-repeat: no-repeat;
    background-size: auto, auto, cover;
    background-position: 0 0, 0 0, 70% 0;
    pointer-events: none;
  }

  #view-app.app-2026 .ap-eyebrow {
    margin-bottom: 5px;
  }

  #view-app.app-2026 .ap-hero-title {
    margin-bottom: 10px;
    font-size: clamp(30px, 10.2vw, 39px);
    line-height: 1.05;
  }

  #view-app.app-2026 .ap-hero-lead {
    max-width: none;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 21px;
  }

  #view-app.app-2026 .ap-cta {
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    height: 46px;
    margin-top: 14px;
    margin-bottom: 18px;
    padding: 0 20px;
  }

  #view-app.app-2026 .ap-cta svg {
    display: none;
  }

  #view-app.app-2026 .ap-stores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
  }

  #view-app.app-2026 .ap-store {
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 46px;
    padding: 0 10px;
  }

  #view-app.app-2026 .ap-store-mark {
    width: 22px;
    height: 26px;
  }

  #view-app.app-2026 .ap-store-text small {
    font-size: 10px;
    line-height: 11px;
  }

  #view-app.app-2026 .ap-store-google .ap-store-text small {
    font-size: 9px;
  }

  #view-app.app-2026 .ap-store-text strong {
    font-size: 19px;
    line-height: 21px;
  }

}

@media (max-width: 359px) {
  #view-app.app-2026 .ap-hero {
    padding: 32px 14px 12px;
  }

  #view-app.app-2026 .ap-stores {
    gap: 8px;
  }

  #view-app.app-2026 .ap-store {
    gap: 6px;
    padding: 0 6px;
  }

  #view-app.app-2026 .ap-store-text strong {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #view-app.app-2026 .ap-cta {
    transition: none;
  }
}