/* ═══ css/theme.css · LIGHT / DARK (9 Oct 2026) ═══════════════════════════════
   GENERATED by build/academia-platform/board/sunset-sites/make_theme_css.py
   from sunset-base.css + sunset-landing.css + theme-layout-landing.css + theme-extra-landing.css.
   Edit THOSE files and run the script; edits made here are lost on the next run.
   Purple stays the default. Everything under html[data-theme="light"] is the
   light version (the brand book's sunset law, board frame N0). js/theme.js sets
   the attribute before the first paint and remembers the visitor's choice.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · the switch button, at the top of the page (both themes) ───────────── */
.themebtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:44px;min-width:44px;
  padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);
  color:#F4EAE6;font:600 14px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s,color .2s,transform .15s}
.themebtn[hidden]{display:none}
.themebtn:hover{border-color:rgba(240,183,96,.65);background:rgba(255,255,255,.08)}
.themebtn:active{transform:scale(.97)}
.themebtn:focus-visible{outline:3px solid #F0B760;outline-offset:2px}
.themebtn__ic{display:block;width:20px;height:20px;flex:none}
@media (max-width:760px){
  .themebtn{width:44px;padding:0}
  .themebtn__t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
html[data-theme="light"] .themebtn{border-color:#4E213E;background:transparent;color:#4E213E}
html[data-theme="light"] .themebtn:hover{background:rgba(76,31,60,.06);border-color:#3A1E2F;color:#3A1E2F}
html[data-theme="light"] .themebtn:focus-visible{outline-color:#DD5A5F}
@media (prefers-reduced-motion:reduce){.themebtn{transition:none}.themebtn:active{transform:none}}

/* ── 1b · this site: where the button sits (both themes, theme-layout-landing.css) ── */
/* ═══ LANDING · where the light/dark button sits in the header (BOTH themes) ═══
   9 Oct 2026. Not scoped: these rules apply in purple and in light alike.
   Rule of the brief: purple must look exactly as before, apart from the button.
   So every change below exists only where the button is really in the header, and
   with JavaScript off (scripting:none, no button at all) the header is the old one.

   Where the button sits (measured with Playwright, both themes, 320-1440 px):
     >= 1041   logo + words, section links, worded button, CTA
     901-1040  the button shows its icon only (its name stays as aria-label/title);
               with its words the section links broke onto 2 lines up to ~1017 px
     761-900   no section links: the worded button joins the CTA on the right
     478-760   the same, icon only (the button's own rule hides the words <= 760)
     381-477   the words «ACADEMY TG TOURS» step aside for the button, the round mark
               stays (logo + words + button + CTA + burger need 478 px)
     360-380   (the words already go here, as before) gaps 8 px instead of 12
     <= 359    no room for a 4th item: the button is in the burger menu only

   From the first paint (fix of 9 Oct, second pass):
   js/theme.js takes the `hidden` attribute off only at DOMContentLoaded, which waits
   for the 9 scripts at the end of <body>. The header was painted without the button
   and on computers the section links then jumped ~200 px left (CLS 0.0015, also on
   the live CDN when coming back from the offer or the privacy page). Now:
     · browsers that report scripts on (scripting:enabled: Chrome 120+, Safari 17+,
       Firefox 113+) show the button from the first paint;
     · older browsers keep its place, invisible, until theme.js shows it: nothing moves;
     · scripting:none (JavaScript off) undoes all of it: no button, the old header.
   A click in the short moment before DOMContentLoaded does nothing yet (theme.js wires
   the clicks then). Remove the button and every rule here can go with it.          */

/* ── the header button from the first paint ── */
@media (min-width:360px){
  .hdr__in > .themebtn[hidden]{display:inline-flex;visibility:hidden}
}
@media (scripting:enabled){
  .hdr__in > .themebtn[hidden]{visibility:visible}
}

/* ── until theme.js writes the name: the name that fits the current theme ──
   (theme-extra-landing.css swaps the two in light mode) */
.themebtn__when-light{display:none}

/* ── 901-1040: icon only ── */
@media (min-width:901px) and (max-width:1040px){
  .hdr__in > .themebtn{width:44px;padding:0}
  .hdr__in > .themebtn .themebtn__t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* ── where the button shows its words: one width for both names ──
   «Светлая версия» is 172.5 px wide, «Тёмная версия» 165.5 px: every press moved the
   section links 6-7 px. 12.5em = 175 px at 14 px, room for the longer name. */
@media (min-width:761px) and (max-width:900px),(min-width:1041px){
  .hdr__in > .themebtn{min-width:12.5em}
}

/* ── 360-900: the button sits with the CTA and the burger on the right ── */
@media (min-width:360px) and (max-width:900px){
  .hdr__in > .themebtn{margin-left:auto}
  .hdr__in > .themebtn ~ .btn{margin-left:0}
}

/* ── 381-477: the words step aside for the button (the mark stays) ── */
@media (min-width:381px) and (max-width:477px){
  .hdr__logo-txt{display:none}
}

/* ── 360-380: 8 px gaps (with 12 px the burger was squeezed to 37 px) ── */
@media (min-width:360px) and (max-width:380px){
  .hdr__in{gap:8px}
}

/* ── <= 359: the header has no button ── */
@media (max-width:359px){
  .hdr__in > .themebtn{display:none}
}

/* ── the copy inside the burger menu, with its name in words: at 900 px and below ── */
.mnav .themebtn--menu{display:none;justify-self:start;width:auto;min-height:48px;margin:6px 0 2px;padding:0 20px;font-size:16px}
.mnav .themebtn--menu .themebtn__t{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
@media (max-width:900px){
  .mnav .themebtn--menu:not([hidden]){display:inline-flex}
}
@media (scripting:enabled) and (max-width:900px){
  .mnav .themebtn--menu{display:inline-flex}
}

/* ── JavaScript off: no button anywhere, the header exactly as before ── */
@media (scripting:none){
  .hdr__in > .themebtn[hidden]{display:none}
}
@media (scripting:none) and (max-width:900px){
  .hdr__in > .themebtn ~ .btn{margin-left:auto}
}
@media (scripting:none) and (min-width:381px) and (max-width:477px){
  .hdr__logo-txt{display:flex}
}
@media (scripting:none) and (min-width:360px) and (max-width:380px){
  .hdr__in{gap:12px}
}

/* ── 2 · the light version: the sunset law, scoped ─────────────────────── */
html[data-theme="light"]{--bg-d:#FEF0E7; --panel-d:#FFFFFF; --band-d:#FFFFFF; --facts-d:#FFFFFF; --txt-d:#3A1E2F; --txt-d-mut:#6E4B55; --line-d:rgba(76,31,60,.14); --lift-d:0 2px 4px rgba(76,31,60,.05),0 16px 40px rgba(76,31,60,.10); --gold-lt:#8A5A2B; --sun-soft:linear-gradient(90deg,#8D6496,#E3878A 52%,#F3C27B);}
html[data-theme="light"]{color-scheme:light}
html[data-theme="light"] body{background:#FEF0E7;color:#6E4B55}
html[data-theme="light"] .btn--gold{color:#3A1E2F}
html[data-theme="light"] .btn--gold:hover{background:#E9A94E}
html[data-theme="light"] .btn--ghost,
html[data-theme="light"] .btn--ghost-light{background:transparent;color:#4E213E;border-color:#4E213E;box-shadow:none}
html[data-theme="light"] .btn--ghost:hover,
html[data-theme="light"] .btn--ghost-light:hover{background:rgba(76,31,60,.06);color:#3A1E2F;border-color:#3A1E2F;box-shadow:none}
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .eyebrow--d{color:#8A5A2B}
html[data-theme="light"] .glow::before{background: radial-gradient(52% 44% at 16% 10%,rgba(243,194,123,.22),rgba(243,194,123,0) 66%), radial-gradient(44% 40% at 88% 90%,rgba(227,135,138,.12),rgba(227,135,138,0) 68%)}
html[data-theme="light"] .glow--gold::before{background: radial-gradient(46% 42% at 80% 12%,rgba(243,194,123,.26),rgba(243,194,123,0) 64%), radial-gradient(56% 48% at 12% 92%,rgba(227,135,138,.12),rgba(227,135,138,0) 68%)}
html[data-theme="light"] .cons{background: radial-gradient(58% 46% at 50% 30%,rgba(243,194,123,.30),rgba(243,194,123,0) 72%), radial-gradient(70% 50% at 50% 112%,rgba(227,135,138,.16),rgba(227,135,138,0) 70%), #FCEADF}
html[data-theme="light"] .cons::before{opacity:.035}
html[data-theme="light"] .tk__pill::before,
html[data-theme="light"] .tk__pill::after{background:var(--sun-soft)}
html[data-theme="light"] .ftr{position:relative;background:#FFFFFF;color:#6E4B55}
html[data-theme="light"] .ftr::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--sun-soft)}
html[data-theme="light"] .ftr h3,
html[data-theme="light"] .ftr h4,
html[data-theme="light"] .ftr__brand span,
html[data-theme="light"] .ftr__motto{color:#8A5A2B}
html[data-theme="light"] .ftr a{color:#4E213E}
html[data-theme="light"] .ftr a:hover,
html[data-theme="light"] .ftr__legal a:hover{color:#3A1E2F}
html[data-theme="light"] .ftr .cc-reopen{color:#4E213E}
html[data-theme="light"] .hdr{background:linear-gradient(90deg,#8D6496,#E3878A 52%,#F3C27B) top/100% 3px no-repeat,rgba(255,255,255,.97)}
html[data-theme="light"] .hdr__logo-txt i{color:#8A5A2B}
html[data-theme="light"] .hdr__burger{background:rgba(76,31,60,.06)}
html[data-theme="light"] .hero{background:#FEF0E7}
html[data-theme="light"] .hero::before{background: linear-gradient(90deg,rgba(254,240,231,0) 22%,rgba(254,240,231,.55) 44%,rgba(254,240,231,.93) 58%,#FEF0E7 74%), linear-gradient(0deg,#FEF0E7 0%,rgba(254,240,231,0) 26%)}
@media (max-width:860px){
  html[data-theme="light"] .hero::before{background:linear-gradient(0deg,#FEF0E7 0,#FEF0E7 32px,rgba(254,240,231,0) min(36vw,220px)) top/100% calc(min(62vw,420px) + 2px) no-repeat}
}
@media (min-width:861px) and (max-width:1227px){
  html[data-theme="light"] .hero::before{background: linear-gradient(90deg,rgba(254,240,231,0) calc(100% - 820px),rgba(254,240,231,.55) calc(100% - 700px),rgba(254,240,231,.93) calc(100% - 610px),#FEF0E7 calc(100% - 560px)), linear-gradient(0deg,#FEF0E7 0%,rgba(254,240,231,0) 26%)}
  html[data-theme="light"] .hero__img img{object-position:56% 35%}
}
@media (min-width:1228px){
  html[data-theme="light"] .hero::before{background: linear-gradient(90deg,rgba(254,240,231,0) 22%,rgba(254,240,231,.55) 40%,rgba(254,240,231,.93) calc(50% - 10px),#FEF0E7 calc(50% + 60px)), linear-gradient(0deg,#FEF0E7 0%,rgba(254,240,231,0) 26%)}
}
html[data-theme="light"] .price-now{color:#4C1F3C}
html[data-theme="light"] .who{background:#FFFFFF;border-color:rgba(76,31,60,.18)}
html[data-theme="light"] .who::before{border-color:#A8826F}
html[data-theme="light"] .who:hover{border-color:#4E213E}
html[data-theme="light"] .days__after{border-top-color:rgba(76,31,60,.2)}
html[data-theme="light"] .days__list li + li{border-left-color:rgba(76,31,60,.2)}
@media (max-width:760px){
  html[data-theme="light"] .days__list li + li{border-top-color:rgba(76,31,60,.2)}
}
html[data-theme="light"] .tcard__who{color:#8A5A2B}
html[data-theme="light"] .keep__input{border-color:#A8826F;background:#FFFFFF}
html[data-theme="light"] .ftr{border-top:0}
html[data-theme="light"] .expert{background:#FFFFFF}
html[data-theme="light"] .ticks li::before{background:#FBEBC9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%238A5A2B' d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center/14px no-repeat}
html[data-theme="light"] .ftr__copy{color:#7E5F67}

/* ── 3 · light-mode extras (states the board screenshots did not show) ───── */
html[data-theme="light"] :focus-visible{outline-color:#DD5A5F}
html[data-theme="light"] .keep__input:focus{outline-color:#DD5A5F;border-color:#4E213E}
html[data-theme="light"] .cons__head .eyebrow{color:#7F5227}
html[data-theme="light"] .mnav{background:rgba(255,255,255,.98);border-top-color:rgba(76,31,60,.12)}
html[data-theme="light"] .mnav a{color:#3A1E2F}
html[data-theme="light"] .mnav a:not(.btn):hover{color:#4E213E}
html[data-theme="light"] .sticky-cta{background:rgba(255,255,255,.98);border-color:rgba(76,31,60,.16); box-shadow:0 2px 4px rgba(76,31,60,.06),0 14px 34px rgba(76,31,60,.18)}
html[data-theme="light"] .sticky-cta__price{color:#6E4B55}
html[data-theme="light"] .sticky-cta__price b{color:#4C1F3C}
html[data-theme="light"] .goldpaper :focus-visible{outline-color:#3A1E2F}
html[data-theme="light"] ::selection{background:#F1D087;color:#3A1E2F}
html[data-theme="light"] .who[aria-pressed="true"]{background:#F0B760;border-color:#F0B760;color:#3A1E2F}
html[data-theme="light"] .who[aria-pressed="true"]::before{border-color:#3A1E2F}
html[data-theme="light"] .sticky-cta__price s{text-decoration-color:#8A5A2B}
html[data-theme="light"] .keep__input::placeholder{color:#7E5F67}
html[data-theme="light"] .pass .price-old{color:rgba(55,21,54,.8)}
html[data-theme="light"] .tk__lbl em{opacity:1}
html[data-theme="light"] .themebtn__when-dark{display:none}
html[data-theme="light"] .themebtn__when-light{display:inline}