/*
  Worn In — wornin.app

  The look of the 1.2.3 App Store images (owner, 27 Oct 2026): a light canvas,
  dark app screens in a drawn iPhone that fades into the page from the bottom,
  a soft violet and lime glow behind headlines and the top of the phones, and
  one key word per headline on the lime marker (ink on lime, never lime text).

  Light only. One system font stack, as in the app. Electric Violet appears
  once per page as a colour (the sizing pill); in the glow it is only a tint.
*/

:root {
  color-scheme: light;

  --canvas: #F7F8F5;
  --band: #F1F3EE;
  --card: #FFFFFF;
  --ink: #121314;
  --ink-2: #5A5E59;
  --line: #DDE1D8;
  --lime: #C1FF38;           /* the marker and filled lime surfaces */
  --lime-ink: #4F6A00;       /* lime as text on light backgrounds */
  --lime-soft: #EEF8D2;
  --violet: #A130CD;
  --violet-soft: #F3E6F8;
  --glow-violet: rgb(206 138 250 / 0.55);
  --glow-lime: rgb(193 255 56 / 0.5);

  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 1160px;
  --gutter: clamp(16px, 5vw, 64px);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: var(--lime-ink);
  text-decoration: none;
}

a:hover {
  color: var(--ink);
}

.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--canvas);
  font-weight: 600;
  font-size: 15px;
}

.skip-link:focus {
  top: 12px;
  color: var(--canvas);
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.center {
  text-align: center;
}

/* ---------- Type ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--lime-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.center .eyebrow {
  justify-content: center;
}

.tag {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h2 {
  margin-bottom: 20px;
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* The lime marker behind one key word of a headline, as on the store images. */
.hl {
  white-space: nowrap;
  padding: 0 0.1em;
  margin: 0 -0.04em;
  background: linear-gradient(transparent 0 40%, var(--lime) 40% 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.copy p:not(.eyebrow) {
  max-width: 460px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.copy p:not(.eyebrow) + p {
  margin-top: 14px;
}

.center .copy p {
  margin-inline: auto;
}

.fine {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-top: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.logo:hover {
  color: var(--ink);
}

.logo svg {
  width: auto;
  height: 1.12em;
  fill: currentColor;
  stroke: currentColor;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 420px) {
  .status {
    font-size: 11px;
    letter-spacing: 0.03em;
  }
}

.status::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgb(18 19 20 / 0.12);
}

/* ---------- Glow ----------
   Two soft radial tints, violet on the left and lime on the right, behind a
   headline or the top of a phone. Decorative; never behind small grey text. */

.glow {
  position: relative;
  isolation: isolate;
}

/* Glows may spill past their box, but never past the page's sides. */
main > section {
  overflow-x: clip;
}

.glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--glow-inset, 0);
  background:
    radial-gradient(closest-side, var(--glow-violet), transparent) var(--glow-v-x, -12%) var(--glow-v-y, 30%) / var(--glow-size, 46% 62%) no-repeat,
    radial-gradient(closest-side, var(--glow-lime), transparent) var(--glow-l-x, 112%) var(--glow-l-y, 8%) / var(--glow-size, 46% 62%) no-repeat;
  pointer-events: none;
}

/* ---------- Buttons ---------- */

.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.button:hover {
  color: #FFFFFF;
  opacity: 0.86;
  transform: translateY(-1px);
}

.button--ghost {
  border: 1px solid rgb(18 19 20 / 0.14);
  background: rgb(255 255 255 / 0.7);
  color: var(--ink);
}

.button--ghost:hover {
  color: var(--ink);
}

.button svg {
  width: 16px;
  height: 16px;
}

.note {
  color: var(--ink-2);
  font-size: 14px;
}

/* ---------- Hero ---------- */

.hero {
  --glow-inset: -120px 0 0;
  --glow-size: 52% 58%;
  --glow-v-x: -16%;
  --glow-v-y: 16%;
  --glow-l-x: 116%;
  --glow-l-y: 0%;
  padding-top: clamp(44px, 8vw, 96px);
  text-align: center;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero h1 {
  max-width: 980px;
  margin-bottom: 22px;
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero .lede {
  max-width: 560px;
  margin-bottom: 32px;
  color: var(--ink-2);
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.45;
  text-wrap: pretty;
}

.hero .cta-row {
  justify-content: center;
}

.hero .note {
  margin-top: 18px;
}

.hero__stage {
  display: flex;
  justify-content: center;
  margin-top: clamp(44px, 6vw, 72px);
  padding-bottom: 8px;
}

.language-note {
  max-width: 560px;
  margin: 8px auto 0;
  text-wrap: pretty;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(64px, 9vw, 120px);
}

.section--rule {
  border-top: 1px solid var(--line);
}

.band {
  border-block: 1px solid var(--line);
  background: var(--band);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}

.split__media {
  display: flex;
  justify-content: center;
  --glow-inset: -40px -20% 30%;
  --glow-size: 62% 70%;
  --glow-v-x: 0%;
  --glow-v-y: 20%;
  --glow-l-x: 100%;
  --glow-l-y: 0%;
}

@media (min-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }

  .split--flip .split__media {
    order: -1;
  }
}

.split h2 {
  font-size: clamp(32px, 4vw, 52px);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.facts li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- Phone ----------
   An iPhone drawn in CSS (no Apple artwork): a titanium rim, a black bezel,
   the Dynamic Island and the side buttons. Sizes are in container units of
   the phone's width, so one rule draws every size. The bottom fades into
   whatever is behind it, as on the store images. */

.phone {
  --w: 340px;
  flex-shrink: 0;
  width: min(var(--w), 78vw);
  padding-inline: 1.6%;
  container-type: inline-size;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 56%, transparent 97%);
}

.phone--lg {
  --w: 390px;
  width: min(var(--w), 82vw);
}

.phone__body {
  position: relative;
  padding: 3.3cqi 3.3cqi 0;
  border: 0.85cqi solid transparent;
  border-bottom: 0;
  border-radius: 16.8cqi 16.8cqi 0 0;
  background:
    linear-gradient(#0B0B0C, #0B0B0C) padding-box,
    linear-gradient(160deg, #C9CCCF 0%, #6B6E72 18%, #2E3033 40%, #43464A 70%, #A9ACB0 100%) border-box;
  box-shadow: 0 2.4cqi 7cqi -2cqi rgb(18 19 20 / 0.35);
}

/* Action button and volume buttons on the left, side button on the right. */
.phone__body::before,
.phone__body::after {
  content: "";
  position: absolute;
  width: 1.1cqi;
  border-radius: 0.6cqi;
  background: linear-gradient(90deg, #5D6064, #9A9DA1);
}

.phone__body::before {
  left: -1.75cqi;
  top: 27cqi;
  height: 8cqi;
  box-shadow: 0 13cqi 0 0 #7B7E82, 0 27cqi 0 0 #7B7E82;
}

.phone__body::after {
  right: -1.75cqi;
  top: 42cqi;
  height: 19cqi;
  background: linear-gradient(270deg, #5D6064, #9A9DA1);
}

.phone__screen {
  position: relative;
  aspect-ratio: 690 / 1202;
  overflow: hidden;
  border-radius: 12.6cqi 12.6cqi 0 0;
  background: #0B0B0B;
}

/* Dynamic Island */
.phone__screen::after {
  content: "";
  position: absolute;
  top: 2.5cqi;
  left: 50%;
  width: 28.6cqi;
  height: 8.4cqi;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}

.phone__screen picture,
.phone__screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Home Screen with widgets (inside a phone) ---------- */

.phone--home .phone__screen {
  aspect-ratio: 690 / 1010;
}

.home {
  height: 100%;
  background:
    radial-gradient(70% 45% at 0% 22%, #3B2C5E, transparent 72%),
    radial-gradient(65% 45% at 100% 62%, #1F3218, transparent 72%),
    linear-gradient(#141418, #0B0C0D);
}

.home__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.6cqi 7.5cqi 0 10.5cqi;
  color: #FFFFFF;
  font-size: 4.1cqi;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.home__status svg {
  width: 17cqi;
  height: auto;
}

.home__widgets {
  display: grid;
  gap: 5.2cqi;
  padding: 11cqi 7.3cqi 0;
}

.home__widgets img {
  display: block;
  width: 100%;
  height: auto;
}

.home__widgets .w-small {
  width: 35.9cqi;
}

/* ---------- Widgets list ---------- */

.widget-list {
  display: grid;
  gap: 0;
  max-width: 460px;
  margin-top: 28px;
}

.widget-list li {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
}

.widget-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.widget-list strong {
  color: var(--ink);
  font-weight: 600;
}

.lock-widget {
  display: block;
  width: 172px;
  height: auto;
  margin-top: 12px;
  filter: drop-shadow(0 10px 18px rgb(18 19 20 / 0.18));
}

/* ---------- Add a pair ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
  max-width: 880px;
  margin: 44px auto 0;
  text-align: left;
}

.step {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
}

.step svg {
  width: 24px;
  height: 24px;
  margin-bottom: 14px;
  color: var(--ink);
}

.step h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.step p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

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

.fit-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 280px));
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
  text-align: left;
}

.fit-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
}

.fit-card__label {
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fit-card__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.fit-card__meta {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

.pill {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lime-soft);
  color: var(--lime-ink);
  font-size: 12px;
  font-weight: 600;
}

/* The page's one violet accent. */
.pill--violet {
  background: var(--violet-soft);
  color: var(--violet);
}

.fit-note {
  margin-top: 28px;
}

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

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 48px auto 0;
}

.feature {
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
}

.feature__icon {
  width: 26px;
  height: 26px;
  margin-bottom: 20px;
  color: var(--ink);
}

.feature h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.feature p {
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* iPhone Duo: one small line and one small picture. */
.duo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  max-width: 760px;
  margin: 40px auto 0;
}

.duo picture {
  flex: 0 1 300px;
}

.duo img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 60%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 60%, transparent 97%);
  mask-composite: intersect;
}

.duo__text {
  flex: 1 1 280px;
}

.duo h3 {
  margin-bottom: 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.duo p {
  max-width: 460px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Plans ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  max-width: 880px;
  margin: 48px auto 0;
  text-align: left;
}

.plan {
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
}

.plan--pro {
  border-color: var(--ink);
  box-shadow: 0 18px 40px -24px rgb(18 19 20 / 0.35);
}

.plan__name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.plan__meta {
  margin: 4px 0 22px;
  color: var(--ink-2);
  font-size: 15px;
}

.plan__lead {
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.45;
}

.checks svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  padding: 2px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
}

.plans-note {
  max-width: 620px;
  margin: 24px auto 0;
}

/* ---------- Privacy ---------- */

.privacy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.privacy h2 {
  margin-bottom: 36px;
}

.privacy li {
  padding: 15px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.privacy li:last-child {
  border-bottom: 1px solid var(--line);
}

.privacy strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: calc(720px + 2 * var(--gutter));
}

.faq h2 {
  margin-bottom: 32px;
  text-align: center;
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.faq details p {
  padding: 0 32px 20px 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Closing and footer ---------- */

.closing {
  --glow-size: 50% 90%;
  --glow-v-x: -6%;
  --glow-v-y: 50%;
  --glow-l-x: 106%;
  --glow-l-y: 50%;
  border-top: 1px solid var(--line);
}

.closing__inner {
  max-width: 860px;
  margin-inline: auto;
  padding-block: clamp(80px, 11vw, 140px);
  text-align: center;
}

.closing h2 {
  margin-bottom: 28px;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.035em;
}

.closing p {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
}

.site-footer {
  display: grid;
  gap: 20px;
  padding-block: 36px 48px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.site-footer .logo {
  font-size: 16px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
}

.site-footer nav a {
  color: var(--ink-2);
}

.site-footer nav a:hover {
  color: var(--ink);
}

.site-footer__legal {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.legal-notice h2 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0;
}

.legal-notice address {
  font-style: normal;
}

/* ---------- Document pages (privacy, terms, support) ----------
   One reading column. Headings, lists and the publisher's address
   use the same ink and scale as the rest of the site. */

.doc {
  max-width: calc(680px + 2 * var(--gutter));
  padding-block: clamp(56px, 10vw, 120px);
}

.doc h1 {
  margin-bottom: 24px;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.doc p {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

.doc p + p {
  margin-top: 14px;
}

.doc .doc__meta {
  margin-bottom: 32px;
  font-size: 14px;
}

.doc h2 {
  margin: 56px 0 16px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
}

.doc h3 {
  margin: 32px 0 10px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.doc ul,
.doc ol {
  margin-top: 14px;
  padding-left: 24px;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.6;
  list-style: disc;
  text-wrap: pretty;
}

.doc ol {
  list-style: decimal;
}

.doc li + li {
  margin-top: 8px;
}

.doc ul + p,
.doc ol + p,
.doc address + p {
  margin-top: 14px;
}

.doc address {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 18px;
  font-style: normal;
  line-height: 1.6;
}

.doc strong {
  color: var(--ink);
  font-weight: 600;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button,
  .faq summary::after {
    transition: none;
  }

  .button:hover {
    transform: none;
  }
}