/* ==================================================================
   mythoswin.de.com - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   1. Ivory marble ground taken from the footer of the supplied
      screens, a deep aubergine sidebar, amethyst from the gems in the
      VIP crowns for buttons and links, antique gold from the tile
      frames as second colour.
   2. Philosopher headings over Jost body text.
   3. Sections are white cards with a thin gold rule on top and a
      small faceted gem before each H2; tables have aubergine heads.
   ================================================================== */

:root {
  --font-display: 'Philosopher', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --myd-aub: #231537;
  --myd-aub-2: #341f52;
  --myd-ame: #6b3fa0;
  --myd-ame-d: #4e2a7a;
  --myd-ame-wash: rgba(107, 63, 160, 0.08);
  --myd-gold: #a77a22;
  --myd-gold-l: #e2c27c;
  --myd-gold-line: rgba(167, 122, 34, 0.45);
  --myd-ink: #1d1630;
  --myd-muted: #574d68;
  --myd-ivory: #f7f2e9;
  --myd-btn: linear-gradient(180deg, #8355c0 0%, #6b3fa0 55%, #5a3290 100%);
}

body {
  background:
    radial-gradient(900px 420px at 85% -80px, rgba(167, 122, 34, 0.10), transparent 70%),
    radial-gradient(700px 500px at 0% 100%, rgba(107, 63, 160, 0.06), transparent 70%),
    var(--color-bg, #f5f1e8);
  color: var(--myd-ink);
}

/* ---- 1. Sidebar (dark aubergine) -------------------------------- */
.wi-sidebar {
  background: linear-gradient(180deg, #2c1a45 0%, #231537 60%, #1b102b 100%);
  color: var(--myd-ivory);
}
@media (min-width: 1025px) {
  .wi-sidebar { border-right: 3px solid var(--myd-gold-line); }
  .wi-main { min-width: 0; margin-inline: auto; }
}
.wi-sidebar__logo-img { max-width: 210px; height: auto; }
.wi-sidebar__nav-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--myd-gold-l);
}
.wi-sidebar__nav a {
  font-family: var(--font-body);
  font-weight: 500;
  color: #ebe3f5;
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.wi-sidebar__nav a:hover { background: rgba(226, 194, 124, 0.10); color: #ffffff; }
.wi-sidebar__nav a.active {
  background: rgba(124, 77, 191, 0.32);
  border-left-color: var(--myd-gold-l);
  color: #ffffff;
}
.wi-sidebar__nav-icon {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(226, 194, 124, 0.14);
  color: #f0d79a; font-size: 0.86rem; font-family: 'Segoe UI Symbol', 'DejaVu Sans', sans-serif;
}
.wi-sidebar__cta a {
  background: var(--myd-btn);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--myd-gold-l);
}
.wi-sidebar__cta-sub { color: #f0e6fb; font-family: var(--font-body); }
.wi-sidebar * { border-color: rgba(226, 194, 124, 0.18); }
.wi-sidebar p, .wi-sidebar span, .wi-sidebar small { color: #d9cfe6; }
.wi-sidebar .wi-sidebar__cta a span { color: inherit; }

/* ---- 2. Type ---------------------------------------------------- */
h1, h2, h3,
.wi-hero__h1,
.wi-page-header h1,
.wi-faq-accordion__title,
.wi-payments__title,
.cta-banner h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1px;
  text-transform: none;
  hyphens: none;
}
h1, .wi-hero__h1, .wi-page-header h1 { line-height: 1.15; }
h2 { line-height: 1.24; color: var(--myd-ink); }
h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--myd-ame-d); }

.wi-main p, .wi-main li, .wi-main td, .wi-main th {
  font-family: var(--font-body);
  overflow-wrap: break-word;
  hyphens: manual;
}
.wi-main p, .wi-main li { font-size: 1.02rem; line-height: 1.72; color: var(--myd-ink); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) {
  color: var(--myd-ame);
  font-weight: 500;
  text-decoration-color: rgba(107, 63, 160, 0.45);
  text-underline-offset: 3px;
}

/* ---- 3. Section cards ------------------------------------------- */
.wi-main .content-section .container {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border, #ddd2bd);
  border-top: 3px solid var(--myd-gold-line);
  border-radius: 6px;
  padding: 1.6rem 1.8rem 1.3rem;
  box-shadow: 0 6px 20px rgba(35, 21, 55, 0.06);
}
.wi-main .content-section { padding-top: 0.85rem; padding-bottom: 0.85rem; }

.wi-main .content-section .container > h2 {
  position: relative;
  padding-left: 1.9rem;
  margin: 0.2rem 0 1rem;
  font-size: clamp(23px, 2.1vw, 30px);
  color: var(--myd-ink);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute; left: 0; top: 0.3em;
  width: 1.05rem; height: 0.95rem;
  background: linear-gradient(135deg, #b28ce8 0%, #7c4dbf 50%, #4e2a7a 100%);
  clip-path: polygon(25% 0, 75% 0, 100% 35%, 50% 100%, 0 35%);
}

/* ---- 4. Hero (stays dark) --------------------------------------- */
.wi-hero { color: #ffffff; }
.wi-hero::before {
  background: linear-gradient(95deg, rgba(27, 16, 43, 0.95) 0%, rgba(35, 21, 55, 0.78) 58%, rgba(35, 21, 55, 0.18) 100%);
}
.wi-hero__eyebrow {
  color: var(--myd-gold-l);
  background: rgba(226, 194, 124, 0.10);
  border: 1px solid rgba(226, 194, 124, 0.45);
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.6px;
}
.wi-hero__h1 { color: #ffffff; font-size: clamp(27px, 2.9vw, 40px); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.wi-hero p, .wi-hero__sub, .wi-hero__subhead { color: #e9e1f3; }
.wi-hero__trust, .wi-hero__trust li, .wi-hero__trust span { color: #ece5f5; }
.wi-hero__cta--primary {
  background: var(--myd-btn);
  color: #ffffff;
  border: 1px solid var(--myd-gold-l);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(107, 63, 160, 0.35);
  font-family: var(--font-body);
  font-weight: 600;
}
.wi-hero__cta--primary:hover { background: #7f52b8; }
.wi-hero__cta--ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(226, 194, 124, 0.6); color: #ffffff; border-radius: 8px; }
.wi-hero__trust-dot { background: var(--myd-gold-l); }

.wi-page-header { border-bottom: 2px solid var(--myd-gold-line); }
.wi-page-header h1 { color: var(--myd-ink); }
.wi-page-header p { color: var(--myd-muted); }
.wi-page-header__eyebrow {
  color: var(--myd-gold);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ---- 5. Supplied screens ---------------------------------------- */
.shot {
  margin: 0 0 1rem;
  padding: 0;
  background: radial-gradient(closest-side, rgba(107, 63, 160, 0.10) 0%, rgba(245, 241, 232, 0) 100%);
  filter: drop-shadow(0 14px 18px rgba(35, 21, 55, 0.28));
}
.shot img { display: block; width: 100%; height: auto; }
@media (min-width: 761px) {
  .shot { width: 280px; max-width: 38%; }
  .shot--right { float: right; margin-left: 1.8rem; }
  .shot--left  { float: left;  margin-right: 1.8rem; }
}
@media (max-width: 760px) {
  .shot { width: 100%; max-width: 290px; margin-inline: auto; float: none; }
}
.wi-main .content-section .container::after { content: ""; display: block; clear: both; }
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { display: flow-root; }
.wi-main .content-section .container > ul li::marker { color: var(--myd-gold); }
.wi-main .content-section .container > ol li::marker { color: var(--myd-ame); font-weight: 700; }
.wi-main .content-section .container > p,
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { max-width: none; }

/* ---- 6. Tables -------------------------------------------------- */
.tw {
  margin: 1.3rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-2, #c9b892);
  border-radius: 6px;
  background: #ffffff;
  display: flow-root;
}
.tw > table { width: 100%; margin: 0; border-collapse: collapse; min-width: 28rem; font-size: 0.94rem; }
.tw caption {
  caption-side: top;
  text-align: left;
  padding: 0.65rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--myd-ame-d);
  background: #faf7f0;
  border-bottom: 1px solid var(--color-border, #ddd2bd);
}
.wi-main .tw thead th,
.tw thead th {
  text-align: left;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--myd-aub-2);
}
.tw tbody td {
  padding: 0.58rem 1rem;
  border-bottom: 1px solid #ece4d4;
  vertical-align: top;
  color: var(--myd-ink);
}
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(even) td { background: #faf7f0; }
.tw tbody td:first-child { font-weight: 600; color: var(--myd-ink); }
@media (max-width: 620px) {
  .tw > table { min-width: 0; font-size: 0.86rem; }
  .tw thead th, .tw tbody td { padding: 0.5rem 0.6rem; }
}

/* ---- 7. CTA banner, payments, FAQ ------------------------------- */
.cta-banner {
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(226, 194, 124, 0.20), transparent 60%),
    linear-gradient(135deg, #341f52 0%, #231537 100%);
  border: 1px solid var(--myd-gold-line);
  border-radius: 8px;
  color: #ffffff;
}
.cta-banner h2 { color: #ffffff; }
.cta-banner p { color: #e6ddf1; }
.cta-banner .btn--primary,
.btn--primary {
  background: var(--myd-btn);
  color: #ffffff;
  border: 1px solid var(--myd-gold-l);
  border-radius: 8px;
}
.cta-banner .container--narrow p { max-width: 42rem; margin-left: auto; margin-right: auto; }

/* Payment strip sits on an aubergine plate so the brand-tinted names
   from theme4.css (white Apple Pay, Mastercard) stay readable. */
.wi-payments {
  background: linear-gradient(180deg, #2c1a45 0%, #231537 100%);
  border: 1px solid var(--myd-gold-line);
  border-radius: 8px;
}
.wi-payments__title { color: #ffffff; }
.wi-payments__strip { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
.wi-payments__strip .wi-pay { flex: 1 1 auto; border-radius: 6px; border: 1px solid rgba(226, 194, 124, 0.30); background: rgba(255, 255, 255, 0.05); }
.wi-pay__name { color: #f3eefa; font-weight: 600; }
.wi-pay--sol .wi-pay__name { color: #9fe7d0; letter-spacing: 0.4px; }
.wi-payments__link { color: var(--myd-gold-l); }
@media (max-width: 520px) { .wi-payments__strip .wi-pay { min-width: 88px; } }

.wi-faq-accordion, .wi-faq-accordion h2 { color: var(--myd-ink); }
.wi-faq-item { border-color: var(--color-border, #ddd2bd); background: #ffffff; }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 600; color: var(--myd-ink); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--myd-ame); }
.wi-faq-item__answer, .wi-faq-item__answer p { color: var(--myd-ink); }
.wi-faq-chevron { color: var(--myd-gold); }

/* ---- 8. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: var(--myd-btn);
  color: #ffffff;
  border: 1px solid var(--myd-gold-l);
  border-radius: 8px;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { background: #ffffff; border: 1px solid var(--myd-gold-line); color: var(--myd-ink); border-radius: 8px; }
.wi-mobile-topbar { background: rgba(35, 21, 55, 0.97); border-bottom: 2px solid var(--myd-gold-line); }
.wi-mobile-topbar .wi-mobile-topbar__signin { color: #ffffff; border-color: rgba(226, 194, 124, 0.55); }
.wi-mobile-topbar button, .wi-mobile-topbar svg { color: #ffffff; }

.sticky-cta { background: rgba(35, 21, 55, 0.97); border-top: 2px solid var(--myd-gold-l); color: #ffffff; }
.sticky-cta__text, .sticky-cta__text span { color: #e9e1f3; }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: var(--myd-gold-l); }
@media (max-width: 640px) {
  .sticky-cta__text > span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.82rem; line-height: 1.25; }
  .sticky-cta__text { min-width: 0; }
  .sticky-cta .container { gap: 0.6rem; }
  .sticky-cta .btn { white-space: nowrap; }
  .wi-main .content-section .container { padding: 1.3rem 1rem 1rem; }
}

.wi-footer { border-top: 3px solid var(--myd-gold-line); }
.wi-footer__cols a:hover { color: var(--myd-ame); }
.content-section[id], .wi-main h2[id] { scroll-margin-top: 80px; }

@media (min-width: 1300px) { .wi-main { max-width: 1080px; } }

.wi-main .content-section h2,
.wi-main .wi-faq-accordion h2,
.wi-main .cta-banner h2,
.wi-main .wi-payments__title { text-transform: none; letter-spacing: 0.1px; font-weight: 700; }

/* ---- 9. Mobile bar contrast and hero spacing -------------------- */
.wi-hamburger span { background: #f0e6fb; }
.wi-hamburger { border-color: rgba(226, 194, 124, 0.45); }
@media (max-width: 1024px) {
  .wi-hero { padding-top: 84px; }
}

/* ---- 10. Footer logo plate (ivory wordmark needs a dark ground) - */
.wi-footer__logo {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2c1a45 0%, #231537 100%);
  border: 1px solid var(--myd-gold-line);
}