/* From resistance.dog/src/components/ResistanceToolsFeature.astro. */

  .rta-feature {
    --rta-screen-bg: #191f2d;
    padding-block: 96px 88px;
    scroll-margin-top: 100px;
  }
  .rta-heading { max-width: 680px; margin: 0 auto 38px; text-align: center; }
  .rta-heading h2 { margin: 0 0 14px; color: var(--fg); font-family: var(--display); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
  .rta-heading p { margin: 0; color: var(--fg); font-family: var(--body); font-size: clamp(1.0625rem, 1.65vw, 1.375rem); font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
  .rta-heading p span { color: var(--blue); }
  .rta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .rta-card { min-width: 0; margin: 0; }
  .rta-panel { position: relative; aspect-ratio: .84; overflow: hidden; border-radius: 32px; background: linear-gradient(160deg, #185fc4 0%, var(--blue) 62%, #80c3ff 100%); isolation: isolate; }
  .rta-phone { position: absolute; top: 30px; left: 20px; right: 20px; aspect-ratio: 390/844; box-sizing: border-box; padding: 7px; border: 1px solid #9b9c9e; border-radius: 48px; background: linear-gradient(100deg, #242528 0%, #090a0c 3%, #111214 49%, #08090b 97%, #45464a 100%); box-shadow: inset 0 0 0 1px #1d1e21, inset 0 0 0 3px #63646b66, 0 0 0 1px #15171b, 0 22px 44px #08225355; }
  .rta-phone-display { position: relative; height: 100%; overflow: hidden; border-radius: 40px; background: var(--rta-screen-bg); box-shadow: 0 0 0 1px #000; isolation: isolate; }
  .rta-phone-island { position: absolute; top: 10px; left: 50%; z-index: 2; width: 88px; height: 23px; transform: translateX(-50%); border-radius: 999px; background: #050507; box-shadow: inset 0 1px 1px #343439; }
  .rta-phone-island::after { content: ''; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #36516d 0%, #142236 30%, #06080d 60%); box-shadow: 0 0 0 1px #131722; }
  .rta-phone-key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #17181b, #76777b, #27282b); }
  .rta-phone-key-volume { top: 104px; left: -4px; height: 52px; box-shadow: 0 62px 0 #494a4e; }
  .rta-phone-key-power { top: 149px; right: -4px; height: 69px; }
  .rta-window { position: absolute; inset: 44px 0 auto; height: calc(700px * var(--rta-screen-scale, .85)); overflow: hidden; background: var(--rta-screen-bg); }
  .rta-window iframe { display: block; width: 390px; height: 700px; border: 0; background: var(--rta-screen-bg); transform: scale(var(--rta-screen-scale, .85)); transform-origin: top left; pointer-events: none; }
  .rta-domain-artwork { position: absolute; top: var(--rta-domain-art-top, 216px); right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; }
  .rta-domain-art { position: absolute; display: block; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 18px; outline: 1px solid #ffffff33; box-shadow: 0 22px 30px #06152766, 0 4px 8px #07152744; }
  .rta-domain-art-ton { top: 0; left: -2%; z-index: 2; width: calc(var(--rta-domain-card-size, 230px) * .9); transform: rotate(-9deg); }
  .rta-domain-art-tme { top: calc(var(--rta-domain-card-size, 230px) * .13); right: -2%; z-index: 1; width: var(--rta-domain-card-size, 230px); transform: rotate(8deg); }
  .rta-card figcaption { padding: 22px 8px 0; text-align: center; }
  .rta-card h3 { margin: 0; color: var(--fg); font-family: var(--display); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
  .rta-actions { display: flex; justify-content: center; margin-top: 32px; }
  .rta-actions > .btn { gap: 10px; font-weight: 800; }
  .rta-actions svg { flex-shrink: 0; }

  @media (max-width: 900px) {
    .rta-feature { padding-block: 64px 56px; }
    .rta-heading { margin-bottom: 28px; }
    .rta-grid { grid-template-columns: 1fr; gap: 32px; max-width: 410px; margin-inline: auto; }
    .rta-panel { aspect-ratio: .9; border-radius: 28px; }
    .rta-phone { top: 26px; }
    .rta-card figcaption { padding-top: 18px; }
    .rta-card h3 { font-size: 1.125rem; }
    .rta-actions { margin-top: 28px; }
    .rta-actions > .btn { min-height: 48px; }
  }

.rta-actions > .btn { min-width: 190px; text-decoration: none; }