:root {
  --about-ink: #1e1e22;
  --about-paper: #f4f0e9;
  --about-pink: #ef4ea2;
  --about-yellow: #fdcc00;
  --about-muted: #625f63;
  --about-line: rgb(30 30 34 / 18%);
  --about-shell-width: 1560px;
}

.about-page {
  min-width: 320px;
  background: var(--about-paper);
  color: var(--about-ink);
  font-family: "Involve", Arial, sans-serif;
}

.about-page a { color: inherit; }
.about-page button, .about-page input, .about-page textarea { font: inherit; }
.about-page button { color: inherit; }
.about-page :focus-visible { outline: 3px solid var(--about-pink); outline-offset: 4px; }

.about-shell[data-homepage-region="01-header-hero"] {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  height: 7.25rem;
  min-height: 7.25rem !important;
  background: var(--about-paper) !important;
  color: var(--about-ink);
}

.about-shell[data-homepage-region="01-header-hero"] > [data-homepage-region-content] {
  width: 100%;
  height: 100%;
  min-height: 7.25rem;
  background: var(--about-paper) !important;
  background-image: none !important;
}

.about-shell[data-homepage-region="01-header-hero"] .site-nav {
  width: min(100% - 2rem, var(--about-shell-width));
  min-height: 7.25rem;
  margin-inline: auto;
  background: var(--about-paper);
}

.about-shell[data-homepage-region="01-header-hero"] .brand,
.about-shell[data-homepage-region="01-header-hero"] .brand img { width: 5.25rem; height: 5.25rem; }
.about-shell[data-homepage-region="01-header-hero"] .phone,
.about-shell[data-homepage-region="01-header-hero"] .navigation-link,
.about-shell[data-homepage-region="01-header-hero"] .auth-link { color: var(--about-ink); }
.about-shell[data-homepage-region="01-header-hero"] .navigation-link:hover,
.about-shell[data-homepage-region="01-header-hero"] .navigation-link:focus-visible,
.about-shell[data-homepage-region="01-header-hero"] .phone:hover,
.about-shell[data-homepage-region="01-header-hero"] .phone:focus-visible,
.about-shell[data-homepage-region="01-header-hero"] .auth-link:hover,
.about-shell[data-homepage-region="01-header-hero"] .auth-link:focus-visible { color: var(--about-pink); }
.about-shell[data-homepage-region="01-header-hero"] .auth-link-primary { background: var(--about-pink); color: #fff; }
.about-shell[data-homepage-region="01-header-hero"] .auth-link-primary:hover,
.about-shell[data-homepage-region="01-header-hero"] .auth-link-primary:focus-visible { background: var(--about-ink); color: #fff; }
.about-shell[data-homepage-region="01-header-hero"] .nav-toggle { border-color: var(--about-ink); color: var(--about-ink); }

.about-main { display: block; }
.about-section { position: relative; width: min(100% - 2rem, 1560px); margin-inline: auto; }
.about-kicker { margin: 0; color: var(--about-pink); font-size: .78rem; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.about-section h1, .about-section h2, .about-section h3 { margin: 0; font-weight: 700; letter-spacing: -.055em; }
.about-section h1 em, .about-section h2 em { color: var(--about-pink); font-style: normal; }
.about-hero { display: grid; min-height: 44rem; grid-template-columns: minmax(0, .82fr) minmax(24rem, 1.18fr); gap: clamp(2rem, 7vw, 8rem); align-items: center; padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 7vw, 7rem); background: var(--about-ink); color: #fff; }
.about-hero__copy { position: relative; z-index: 1; max-width: 37rem; }
.about-hero__copy .about-kicker { color: var(--about-yellow); }
.about-hero h1 { margin-top: 1.4rem; font-size: clamp(3.4rem, 6vw, 6.5rem); line-height: .92; }
.about-hero__lead { max-width: 31rem; margin: 2rem 0 0; color: rgb(255 255 255 / 80%); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; }
.about-hero__figure { position: relative; margin: 0; }
.about-hero__figure::before { position: absolute; top: -1.5rem; right: -1.5rem; width: 7rem; height: 7rem; border: 1px solid var(--about-yellow); content: ""; }
.about-hero__figure img { position: relative; display: block; width: 100%; height: min(33rem, 42vw); min-height: 20rem; object-fit: cover; }
.about-hero__figure figcaption { margin-top: .9rem; color: rgb(255 255 255 / 65%); font-size: .83rem; letter-spacing: .02em; }
.about-button { display: inline-flex; min-height: 3.35rem; align-items: center; justify-content: center; gap: .8rem; margin-top: 2.3rem; padding: .85rem 1.35rem; border: 1px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.about-button:hover { transform: translateY(-2px); }
.about-button--light { background: #fff; color: var(--about-ink) !important; }
.about-button--light:hover { background: var(--about-yellow); }
.about-button--dark { background: var(--about-ink); color: #fff !important; }
.about-button--dark:hover { background: var(--about-pink); }
.about-button--pink { background: var(--about-pink); color: #fff !important; }
.about-button--pink:hover { background: var(--about-ink); }

.about-principles { display: grid; grid-template-columns: 4rem minmax(18rem, .85fr) minmax(20rem, 1fr); gap: clamp(2rem, 6vw, 8rem); padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 7vw, 7rem); }
.about-section__index { color: var(--about-pink); font-size: .8rem; font-weight: 700; letter-spacing: .1em; }
.about-section__heading h2, .about-rhythm__intro h2, .about-selection__header h2, .about-offers h2, .about-transparency h2, .about-contact h2 { margin-top: 1.2rem; font-size: clamp(2.6rem, 4.3vw, 5rem); line-height: .98; }
.about-principles__body { max-width: 38rem; padding-top: 2.5rem; }
.about-principles__body p, .about-clarity__copy > p:not(.about-kicker), .about-offers__top > p, .about-transparency__content > p, .about-contact__copy > p:not(.about-kicker) { margin: 0; color: var(--about-muted); font-size: 1.08rem; line-height: 1.72; }
.about-principles__body p + p { margin-top: 1.25rem; }
.about-principles__note { display: grid; grid-template-columns: auto auto; gap: .15rem .75rem; align-items: center; margin-top: 2.25rem; padding-top: 1.2rem; border-top: 1px solid var(--about-line); font-size: .9rem; }
.about-principles__dot { grid-row: span 2; width: .8rem; height: .8rem; border-radius: 50%; background: var(--about-pink); }
.about-principles__note strong { font-size: .95rem; }
.about-principles__note span:last-child { color: var(--about-muted); }

.about-clarity { display: grid; grid-template-columns: minmax(18rem, .95fr) minmax(20rem, 1.05fr); gap: clamp(3rem, 8vw, 10rem); align-items: center; padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 7vw, 7rem); background: #e8e0d7; }
.about-clarity__visual { position: relative; max-width: 34rem; }
.about-clarity__visual img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.about-clarity__stamp { position: absolute; right: -1.2rem; bottom: -1.2rem; display: grid; width: 5.5rem; height: 5.5rem; place-content: center; border-radius: 50%; background: var(--about-yellow); color: var(--about-ink); font-size: .85rem; font-weight: 700; line-height: 1.05; text-align: center; }
.about-clarity__copy { max-width: 38rem; }
.about-clarity__copy h2 { margin: 1.25rem 0 2rem; font-size: clamp(2.7rem, 4.6vw, 5rem); line-height: .98; }
.about-checklist { display: grid; gap: 0; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.about-checklist li { display: flex; gap: .8rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--about-line); font-size: .98rem; font-weight: 700; }
.about-checklist li:last-child { border-bottom: 1px solid var(--about-line); }
.about-checklist li > span:first-child { color: var(--about-pink); }

.about-rhythm { display: grid; grid-template-columns: minmax(15rem, .7fr) minmax(30rem, 1.3fr); gap: clamp(2rem, 7vw, 8rem); padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 7vw, 7rem); }
.about-rhythm__intro h2 { font-size: clamp(2.6rem, 4.4vw, 4.8rem); }
.about-rhythm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
.about-rhythm__card { min-height: 20rem; display: flex; flex-direction: column; padding: 1.5rem; }
.about-rhythm__card--pink { background: var(--about-pink); color: #fff; }
.about-rhythm__card--yellow { background: var(--about-yellow); }
.about-rhythm__card--ink { background: var(--about-ink); color: #fff; }
.about-rhythm__number { font-size: .8rem; font-weight: 700; }
.about-rhythm__card h3 { margin-top: auto; font-size: 1.65rem; line-height: 1; letter-spacing: -.04em; }
.about-rhythm__card p { margin: .9rem 0 0; font-size: .95rem; line-height: 1.5; opacity: .8; }

.about-selection { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(20rem, 1.2fr); gap: clamp(3rem, 9vw, 11rem); padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 7vw, 7rem); background: #fff; }
.about-selection__header { align-self: start; }
.about-text-link { display: inline-flex; gap: .8rem; margin-top: 2.3rem; border-bottom: 1px solid currentColor; padding-bottom: .25rem; font-size: .95rem; font-weight: 700; text-decoration: none; }
.about-text-link:hover { color: var(--about-pink); }
.about-selection__list { display: grid; }
.about-selection__item { display: grid; grid-template-columns: 3.3rem 1fr; gap: 1rem; padding: 1.35rem 0; border-top: 1px solid var(--about-line); }
.about-selection__item:last-child { border-bottom: 1px solid var(--about-line); }
.about-selection__item > span { color: var(--about-pink); font-size: .8rem; font-weight: 700; }
.about-selection__item h3 { font-size: 1.4rem; letter-spacing: -.035em; }
.about-selection__item p { max-width: 32rem; margin: .55rem 0 0; color: var(--about-muted); font-size: .96rem; line-height: 1.5; }

.about-offers { padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 7vw, 7rem); background: var(--about-yellow); }
.about-offers__top { display: grid; grid-template-columns: minmax(18rem, .95fr) minmax(18rem, 1.05fr); gap: clamp(2rem, 9vw, 11rem); align-items: end; }
.about-offers__top > p { max-width: 31rem; color: var(--about-ink); }
.about-offers__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 4rem; }
.about-offers__links a { display: flex; min-height: 9rem; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid var(--about-ink); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.about-offers__links a:hover { background: var(--about-ink); color: #fff; }
.about-offers__links a span { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.about-offers__links strong { font-size: 1.15rem; letter-spacing: -.03em; }
.about-offers__links b { float: right; font-size: 1.35rem; font-weight: 400; }

.about-transparency { display: grid; grid-template-columns: minmax(7rem, .35fr) minmax(20rem, 1fr) minmax(12rem, .65fr); gap: clamp(2rem, 6vw, 8rem); padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 7vw, 7rem); }
.about-transparency__label { display: flex; gap: 1rem; align-items: flex-start; }
.about-transparency__line { width: 2.3rem; height: 1px; margin-top: .45rem; background: var(--about-pink); }
.about-transparency__content { max-width: 42rem; }
.about-transparency__content > p { max-width: 34rem; margin-top: 2rem; }
.about-transparency__aside { align-self: end; padding: 1.25rem 0 0; border-top: 1px solid var(--about-line); }
.about-transparency__aside > span { display: block; color: var(--about-pink); font-family: Georgia, serif; font-size: 3.5rem; line-height: .5; }
.about-transparency__aside p { margin: 1rem 0 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }

.about-contact { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(18rem, .75fr); gap: clamp(3rem, 10vw, 13rem); padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 7vw, 7rem); background: var(--about-pink); color: #fff; }
.about-contact .about-kicker { color: var(--about-yellow); }
.about-contact h2 { font-size: clamp(3rem, 5vw, 5.5rem); }
.about-contact__copy > p:not(.about-kicker) { max-width: 25rem; margin-top: 1.8rem; color: rgb(255 255 255 / 82%); }
.about-contact__details { align-self: end; }
.about-contact__details a { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 0; border-top: 1px solid rgb(255 255 255 / 40%); text-decoration: none; }
.about-contact__details a:hover strong { color: var(--about-yellow); }
.about-contact__details a span { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.about-contact__details a strong { font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.035em; }
.about-contact__details p { margin: 1.5rem 0 0; color: rgb(255 255 255 / 78%); font-size: .95rem; line-height: 1.6; }

.about-footer[data-homepage-region="15-footer"] { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; background: #1d1d21; color: #fff; }
.about-footer[data-homepage-region="15-footer"] > [data-homepage-region-content] { width: min(100% - 2rem, var(--about-shell-width)); min-height: 0; margin-inline: auto; padding-block: clamp(3rem, 7vw, 7rem); }
.about-footer .spielquora-footer__top { min-height: 0; }
.about-footer .spielquora-footer__link { color: inherit; text-decoration: none; }
.about-footer .spielquora-footer__link:hover, .about-footer .spielquora-footer__link:focus-visible { color: var(--about-yellow); }
.about-footer__settings { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: inherit; }

.about-account { width: min(100% - 2rem, 38rem); max-height: calc(100vh - 2rem); padding: 0; border: 0; background: transparent; color: var(--about-ink); }
.about-account::backdrop { background: rgb(30 30 34 / 72%); }
.about-account__panel { position: relative; max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1.5rem, 5vw, 3rem); background: var(--about-paper); box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 24%); }
.about-account__close { position: absolute; top: 1rem; right: 1rem; width: 2.3rem; height: 2.3rem; border: 0; background: transparent; cursor: pointer; font-size: 1.8rem; line-height: 1; }
.about-account h2 { margin: 1rem 0 1.5rem; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.05em; }
.about-account__form { display: grid; gap: .55rem; }
.about-account__hint { margin: 0 0 .75rem; color: var(--about-muted); line-height: 1.5; }
.about-account__form label { font-size: .85rem; font-weight: 700; }
.about-account__form input, .about-account__form textarea { width: 100%; border: 1px solid var(--about-line); padding: .75rem .8rem; background: #fff; color: var(--about-ink); }
.about-account__form textarea { min-height: 6rem; resize: vertical; }
.about-account__profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.about-account__profile-grid > div { display: grid; gap: .55rem; }
.about-account__error { min-height: 1.3rem; margin: .25rem 0; color: #a61b54; font-size: .88rem; }
.about-account__submit, .about-account__switch { min-height: 2.8rem; border: 1px solid var(--about-ink); padding: .7rem 1rem; cursor: pointer; font-weight: 700; }
.about-account__submit { background: var(--about-pink); color: #fff; }
.about-account__submit:hover { background: var(--about-ink); }
.about-account__switch { background: transparent; }
.about-account__switch:hover { color: var(--about-pink); }
.about-account__avatar { display: block; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; animation: about-avatar-in .35s ease both; }
.about-account__form[hidden], .about-account[hidden] { display: none; }
@keyframes about-avatar-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 980px) {
  .about-hero { grid-template-columns: 1fr 1fr; gap: 2rem; padding-inline: clamp(1.5rem, 5vw, 4rem); }
  .about-principles, .about-rhythm, .about-selection { grid-template-columns: 1fr 1.5fr; gap: 2.5rem; padding-inline: clamp(1.5rem, 5vw, 4rem); }
  .about-principles { grid-template-columns: 3rem 1fr; }
  .about-principles__body { grid-column: 2; padding-top: 0; }
  .about-clarity, .about-transparency, .about-contact { padding-inline: clamp(1.5rem, 5vw, 4rem); }
  .about-clarity { gap: 3rem; }
  .about-rhythm__grid { grid-column: 1 / -1; }
  .about-offers { padding-inline: clamp(1.5rem, 5vw, 4rem); }
  .about-transparency { grid-template-columns: 1fr 1.8fr; }
  .about-transparency__aside { grid-column: 2; }
}

@media (max-width: 640px) {
  .about-section h1, .about-section h2, .about-section h3 { overflow-wrap: anywhere; }
  .about-section h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .about-shell[data-homepage-region="01-header-hero"], .about-shell[data-homepage-region="01-header-hero"] > [data-homepage-region-content], .about-shell[data-homepage-region="01-header-hero"] .site-nav { height: 5.75rem; min-height: 5.75rem !important; }
  .about-shell[data-homepage-region="01-header-hero"] .site-nav { width: calc(100% - 1.5rem); }
  .about-shell[data-homepage-region="01-header-hero"] .brand, .about-shell[data-homepage-region="01-header-hero"] .brand img { width: 4.3rem; height: 4.3rem; }
  .about-hero { display: block; min-height: 0; padding: 4rem 1.25rem 3rem; }
  .about-hero h1 { font-size: clamp(2.6rem, 12.5vw, 4.8rem); }
  .about-hero__figure { margin-top: 3.5rem; }
  .about-hero__figure img { height: 19rem; }
  .about-hero__figure::before { top: -.75rem; right: -.75rem; width: 4rem; height: 4rem; }
  .about-section__index { margin-bottom: 1.5rem; }
  .about-principles, .about-clarity, .about-rhythm, .about-selection, .about-transparency, .about-contact { display: block; padding: 4.5rem 1.25rem; }
  .about-principles__body { margin-top: 2rem; }
  .about-clarity__visual { max-width: none; }
  .about-clarity__copy { margin-top: 3rem; }
  .about-rhythm__grid, .about-offers__links { display: grid; grid-template-columns: 1fr; margin-top: 2.5rem; }
  .about-rhythm__card { min-height: 15rem; }
  .about-selection__list { margin-top: 2.5rem; }
  .about-offers__top { display: block; }
  .about-offers__top > p { margin-top: 2rem; }
  .about-offers__links { margin-top: 2.5rem; }
  .about-transparency__label { margin-bottom: 2rem; }
  .about-transparency__content > p { margin-top: 1.5rem; }
  .about-transparency__aside { margin-top: 3rem; }
  .about-contact__details { margin-top: 3rem; }
  .about-footer .spielquora-footer__top { gap: 2.25rem; }
  .about-footer .spielquora-footer__nav--secondary { gap: 1rem; }
  .about-footer .spielquora-footer__link { font-size: 1rem; }
  .about-footer__settings { text-align: center; }
  .about-account__profile-grid { grid-template-columns: 1fr; }
}

/* Helper-page shell corrections: keep the copied shell opaque and let its
   footer navigation form readable rows at the reported tablet width. */
[data-helper-shell="header"] {
  background: var(--about-paper) !important;
}

[data-helper-shell="header"] > header {
  background: var(--about-paper);
}

[data-homepage-region="15-footer"] .spielquora-footer__top {
  min-width: 0;
}

@media (max-width: 980px) {
  [data-homepage-region="15-footer"] .spielquora-footer__top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  [data-homepage-region="15-footer"] .spielquora-footer__nav {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding-top: 0;
  }
}