:root{
    --bg:#16171a;
    --bg-alt:#1d1f23;
    --bg-card:#212328;
    --ink:#ece7d8;
    --ink-dim:#9b968b;
    --ink-faint:#6b6862;
    --rule:#34373d;
    --r1:#ece7d8;
    --r2:#b2433a;
    --r3:#2e5c8a;
    --r4:#43785a;
    --r5:#c9a227;
    --font-d:'Spectral',serif;
    --font-b:'Source Sans 3',sans-serif;
    --font-m:'JetBrains Mono',monospace;
    --maxw:780px;
    --nav-maxw:1180px;
    /* Real value set by JS (measureNavHeight() in index.html) once the
       nav actually renders — this 55px is just the pre-JS fallback.
       Needed because .nav's real height varies: bilingual brand text
       wraps differently per language (RU/UK subtitle text is longer
       than EN), and narrow phones wrap the brand + 4 lang buttons +
       audio/Housing buttons onto multiple lines. .tabs-bar sticks right
       below .nav, so if this doesn't match the real height, the tabs
       bar sticks at the wrong offset and ends up hidden behind the
       (taller) nav as soon as both are scrolled to the top together —
       reported by the site owner as "tabs tend to hide on scroll". */
    --nav-height:55px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-b);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--r5);text-decoration:none;}
  a:hover{text-decoration:underline;}
  a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--r5);outline-offset:3px;
  }
  h1,h2,h3{font-family:var(--font-d);font-weight:600;margin:0 0 .5em;letter-spacing:.01em;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
  section{padding:56px 0;border-top:1px solid var(--rule);}
  section:first-of-type{border-top:none;}

  /* NAV */
  .nav{
    position:sticky;top:0;z-index:50;
    background:rgba(22,23,26,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--rule);
  }
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;max-width:var(--nav-maxw);}
  .brand{font-family:var(--font-d);font-weight:600;font-size:16px;letter-spacing:.01em;color:var(--ink);line-height:1.2;}
  .brand small{display:block;font-family:var(--font-b);font-weight:400;font-size:10px;letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;margin-top:4px;}
  .langs{display:flex;gap:4px;}
  .nav-actions{display:flex;align-items:center;gap:6px;}
  .audio-toggle,
  .langs button{
    font-family:var(--font-m);font-size:12px;font-weight:700;letter-spacing:.05em;
    background:none;border:1px solid var(--rule);color:var(--ink-dim);
    padding:6px 9px;border-radius:3px;cursor:pointer;transition:all .15s;
  }
  .audio-toggle:hover,
  .langs button:hover{border-color:var(--ink-dim);color:var(--ink);}
  .audio-toggle[aria-pressed="true"],
  .langs button[aria-pressed="true"]{background:var(--r5);border-color:var(--r5);color:#16171a;}

  /* TABS BAR */
  .tabs-bar{
    background:var(--bg-alt);
    border-bottom:1px solid var(--rule);
    position:sticky;top:var(--nav-height);z-index:45;
  }
  .tabs-bar .wrap{display:flex;gap:6px;padding:8px 22px;max-width:var(--nav-maxw);overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tabs-bar .wrap::-webkit-scrollbar{display:none;}
  .tab-btn{
    font-family:var(--font-b);font-size:13.5px;font-weight:600;
    background:none;border:1px solid transparent;color:var(--ink-dim);
    padding:8px 14px;border-radius:4px;cursor:pointer;white-space:nowrap;transition:all .15s;
  }
  .tab-btn:hover{color:var(--ink);background:rgba(255,255,255,0.04);}
  .tab-btn.active{background:var(--rule);color:var(--r5);}
  .tab-btn--accent{border-color:var(--r5);color:var(--r5);}
  .tab-btn--accent:hover{background:rgba(201,162,39,0.12);color:var(--r5);}
  .tab-btn--accent.active{background:var(--r5);color:var(--bg);}

  /* HERO */
  .hero{padding:64px 0 48px;}
  .hero .eyebrow{font-family:var(--font-m);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--r5);margin-bottom:14px;}
  .hero h1{font-size:clamp(34px,7vw,52px);line-height:1.05;margin-bottom:14px;}
  .hero .tagline{font-size:18px;color:var(--ink-dim);max-width:520px;margin-bottom:30px;}
  /* Main hero CTA — added 10.09.2026 alongside the mission-strip work.
     Text + href both swap per language via updateHeroCta() in the inline
     script (3 of 4 languages point at Družina's schedule, uk points at
     BrnoWalkers instead — see that function's comment for why). Reuses
     the existing .btn.solid look, just needs its own block spacing since
     it now sits between .tagline and .reviews-badge. */
  #heroCta{display:inline-block;margin-bottom:18px;}
  /* Sub-mission line for the Družina/Walkers hero sections (index.html's
     embedded id="druzina"/id="walkers" plus their standalone pages) —
     same manifesto-sourced content as .mission-text below, just inline
     within an existing hero instead of its own section, so it needs its
     own smaller rule rather than reusing .mission-text's centered/
     max-width layout, which assumes a full-width section wrapper. */
  .hero-mission{max-width:520px;font-style:italic;color:var(--ink-dim);font-size:15px;line-height:1.5;margin-bottom:18px;}
  .cord-strip{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-bottom:30px;max-width:340px;}
  .cord-strip span{flex:1;}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
  .btn{
    display:inline-block;font-family:var(--font-b);font-weight:600;font-size:14px;
    padding:13px 22px;border-radius:4px;border:1px solid var(--r5);color:var(--r5);
    background:none;cursor:pointer;transition:all .15s;text-align:center;
  }
  .btn:hover{background:var(--r5);color:#16171a;text-decoration:none;}
  .btn.solid{background:var(--r5);color:#16171a;}
  .btn.solid:hover{background:transparent;color:var(--r5);}

  /* Secondary hero links (Announcements etc.) — deliberately NOT another
     bordered .btn box. Four equal-weight buttons in one row was the single
     biggest source of the "overloaded" complaint (09.09.2026 site-updates) —
     this demotes the secondary actions to plain text so Register/Join stay
     the two things a first-time visitor actually has to choose between.
     Re-applied 13.09.2026 on top of the manifesto/i18n merge — the branch
     that added those didn't have this yet. */
  .hero-ctas-secondary{display:flex;gap:18px;flex-wrap:wrap;margin-top:2px;width:100%;}
  .btn-quiet{
    display:inline-flex;align-items:center;gap:5px;font-family:var(--font-b);
    font-size:13px;font-weight:600;color:var(--ink-dim);text-decoration:none;
    border-bottom:1px solid transparent;padding-bottom:1px;transition:color .15s,border-color .15s;
  }
  .btn-quiet:hover{color:var(--r5);border-color:var(--r5);text-decoration:none;}
  .free-note{margin-top:18px;font-size:13px;color:var(--ink-faint);}
  .reviews-badge{
    display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
    color:var(--r5);text-decoration:none;margin-bottom:18px;
    border:1px solid var(--rule);border-radius:20px;padding:6px 14px;
    background:var(--bg-card);transition:border-color .15s;
  }
  .reviews-badge:hover{border-color:var(--r5);text-decoration:none;}

  .contacts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:8px;}
  .contacts-section{
    grid-column:1/-1;font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--r5);margin:18px 0 2px;padding-top:14px;border-top:1px solid var(--rule);
  }
  .contacts-section:first-child{margin-top:0;padding-top:0;border-top:none;}
  .contact-card{
    display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:6px;
    border:1px solid var(--rule);background:var(--bg-card);text-decoration:none;transition:border-color .15s;
  }
  .contact-card:hover{border-color:var(--r5);text-decoration:none;}
  .contact-card-icon{flex:0 0 auto;color:var(--r5);margin-top:1px;}
  .contact-card-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .contact-card-label{font-size:14px;font-weight:600;color:var(--ink);}
  .contact-card-desc{font-size:12.5px;color:var(--ink-dim);word-break:break-word;}

  .hero-testimonial{border:1px solid var(--rule);border-radius:8px;padding:18px 20px;background:var(--bg-card);max-width:680px;margin-top:22px;}
  .hero-testimonial p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-dim);}
  .hero-testimonial .quote{font-style:italic;color:var(--ink);}
  .hero-testimonial .author{margin-top:12px;font-size:13px;font-weight:700;color:var(--ink);}

  .priority-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px;}
  .priority-card{border:1px solid var(--rule);border-radius:8px;padding:20px;background:var(--bg-card);display:flex;flex-direction:column;gap:12px;}
  .priority-card h3{margin:0;font-size:18px;color:var(--ink);}
  .priority-card p{margin:0;color:var(--ink-dim);line-height:1.7;}
  .priority-card .card-cta{margin-top:auto;}

  .leaderboard-table{width:100%;border-collapse:collapse;margin-top:20px;}
  .leaderboard-table th,.leaderboard-table td{border:1px solid var(--rule);padding:10px 12px;text-align:left;font-size:14px;}
  .leaderboard-table th{background:var(--bg-alt);font-weight:700;color:var(--ink);}
  .leaderboard-note{margin-top:12px;font-size:13px;color:var(--ink-faint);}

  .policy-box{border:1px solid var(--rule);border-radius:8px;padding:18px;background:var(--bg-card);margin-top:16px;}
  .policy-box p{margin:0 0 10px;color:var(--ink-dim);line-height:1.6;}
  .policy-box p:last-child{margin-bottom:0;}

  .best-value-row{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:12px;font-weight:700;color:var(--r5);}
  .best-value-row::before{content:'★';}

  .combo-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:6px;padding:18px 16px;display:flex;flex-direction:column;gap:4px;transition:border-color .15s;position:relative;}
  .combo-card.best-value{border-color:var(--r5);box-shadow:0 18px 40px rgba(0,0,0,.08);}
  .combo-card .combo-badge{position:absolute;top:14px;right:14px;background:var(--r5);color:#16171a;font-size:11px;font-weight:700;padding:6px 10px;border-radius:999px;}

  .hero-icon-btn{display:inline-flex;align-items:center;gap:9px;}
  .hero-icon-btn svg{width:22px;height:22px;flex:0 0 auto;}

  .intro-video-wrap{
    max-width:380px;margin:0 auto;aspect-ratio:9/16;border-radius:8px;overflow:hidden;
    border:1px solid var(--rule);background:#000;
  }
  .intro-video-wrap iframe{width:100%;height:100%;border:0;display:block;}
  @media(min-width:900px){ .intro-video-wrap{max-width:420px;} }

  .acc{border:1px solid var(--rule);border-radius:6px;margin:10px 0;background:var(--bg-card);overflow:hidden;}
  .acc-summary{
    list-style:none;cursor:pointer;padding:14px 18px;font-weight:600;color:var(--ink);
    display:flex;align-items:center;justify-content:space-between;user-select:none;
  }
  .acc-summary::-webkit-details-marker{display:none;}
  .acc-summary::after{
    content:'▾';color:var(--r5);flex:0 0 auto;margin-left:12px;
    transition:transform .2s ease;font-size:13px;
  }
  .acc[open] .acc-summary::after{transform:rotate(-180deg);}
  .acc-summary:hover{color:var(--r5);}
  .acc-body{padding:0 18px 16px;color:var(--ink-dim);}
  .acc-body .tbl-wrap{margin-top:4px;}

  /* Scroll-reveal: секции проявляются при скролле, JS добавляет .is-visible через IntersectionObserver.
     prefers-reduced-motion уважается — у людей с укачиванием/чувствительностью анимация отключается полностью. */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
  @media(prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* Едва заметное дыхание hero-фото и карточек событий — глубина без отвлечения */
  .contact-card, .event-upcoming-card, .fact, .combo-card{
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .contact-card:hover, .event-upcoming-card:hover, .combo-card:hover{
    transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.35);
  }

  /* Тонкий движущийся градиент за hero — очень медленный, не отвлекает от текста */
  .hero{position:relative;overflow:hidden;}
  .hero::before{
    content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;
    background:radial-gradient(circle at 20% 30%, rgba(201,162,39,.10), transparent 45%),
               radial-gradient(circle at 80% 70%, rgba(178,67,58,.10), transparent 45%);
    animation:heroDrift 22s ease-in-out infinite alternate;
  }
  .hero-visuals{
    position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  }
  .hero-visuals svg{width:100%;height:100%;display:block;pointer-events:none;}

  /* ══════════════════════════════════════════════════════════════════
     CHARACTER HERO ART — scholar / ranger / knight photo+video treatment
     Replaces the old abstract line-art SVGs (notebook/pencil, walker
     figure, footman+paladin) with the three commissioned character
     portraits. Družina keeps its ember-particle <canvas> — see below,
     it now overlays the knight photo instead of the old SVG campfire.

     Source art is pre-composed for this exact use: ~30-35% of the left
     edge is already painted pure black in all three images (see
     data-driven object-position values per character below, picked from
     each image's actual brightness centroid) — that's intentional
     negative space for the .wrap text, not an accident of cropping.
     The .hero-scrim gradient is a *safety net* on top of that baked-in
     space, not the primary mechanism — it keeps text legible even where
     object-fit:cover crops differently than the source composition
     (very wide desktop monitors, or the tall/narrow mobile crop).
     ══════════════════════════════════════════════════════════════════ */
  .hero-photo{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  /* Static <img> variant is hidden by default — only shown on mobile
     (in place of the video, to avoid loading video bytes on mobile
     data) and when prefers-reduced-motion is set, see the two media
     queries below. */
  .hero-photo--static{display:none;}

  .hero-photo--scholar{object-position:65% 42%;}
  .hero-photo--ranger{object-position:72% 32%;}
  .hero-photo--knight{object-position:70% 46%;}

  /* Slow Ken Burns drift for the two static portraits (ranger, knight)
     — the scholar doesn't need this, its own video loop already
     supplies motion (rising embers off the book, ambient flicker).
     Very subtle and slow on purpose: this is a backdrop, not the
     focal animation on the page. */
  .hero-photo--kenburns{animation:heroPhotoDrift 26s ease-in-out infinite alternate;}
  .hero-visuals-druzina .hero-photo--kenburns{animation-duration:30s;}
  @keyframes heroPhotoDrift{
    0%{transform:scale(1) translate(0,0);}
    100%{transform:scale(1.06) translate(-1.2%,-1%);}
  }

  /* Scrim: left-to-right for the desktop overlap zone, plus a soft
     top/bottom vignette so headings and CTA buttons never sit directly
     on a bright patch of the painting. Mobile gets a stronger version
     below (text overlaps a much larger share of the image there, since
     the hero is narrower than the art's negative-space zone). */
  .hero-scrim{
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(22,23,26,.82) 20%, rgba(22,23,26,.32) 42%, rgba(22,23,26,0) 62%),
      linear-gradient(180deg, rgba(22,23,26,.5) 0%, rgba(22,23,26,0) 22%, rgba(22,23,26,0) 78%, rgba(22,23,26,.55) 100%);
  }

  /* FIX (site-updates, druzina hero art invisible): this selector used
     to say `position:relative`, which has the same specificity as
     `.hero-visuals{position:absolute;...}` above but comes later in
     the file, so it won it and knocked the whole block out of absolute
     positioning inside .hero. With no in-flow content of its own, the
     block then collapsed to 0 height, and __scene/__canvas below
     (height:100%) collapsed to 0 with it — knight photo + canvas were
     in the DOM but rendered at zero size. .hero-visuals already makes
     this a positioned container (absolute), so no extra rule is
     needed here at all. */
  .hero-visuals-druzina__scene,
  .hero-visuals-druzina__canvas{position:absolute;inset:0;width:100%;height:100%;}
  /* __scene now holds the knight photo (+ .hero-scrim) instead of the
     old hand-drawn SVG campfire scene. __canvas keeps drawing the same
     rising-ember particle loop on top of it (z-index:1) — kept
     deliberately, the knight art has its own painted campfire glow at
     roughly the same spot (see JS: originX/originY in
     drawDruzinaParticles(), tuned to that image), so the embers now
     read as coming from the actual painted fire instead of a
     disconnected effect. */
  .hero-visuals-druzina__canvas{z-index:1;}
  .hero-visuals-druzina__scene{z-index:0;}

  @keyframes heroDrift{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(3%,-3%) scale(1.08);}
  }

  .hero .wrap{position:relative;z-index:1;}

  /* Mobile — DECISION FLAGGED: previously .hero-visuals was display:none
     entirely below 900px (abstract line-art didn't read well behind
     full-width stacked text on a phone). Photo art is common practice
     to keep full-bleed on mobile too (this is standard "hero banner"
     treatment), so it's now kept visible here rather than hidden —
     just dimmed and given a stronger scrim, since on a narrow viewport
     the text column is full width and sits over most of the image, not
     just its left third like on desktop. Video is swapped for the
     static poster frame to avoid burning mobile data on autoplay video
     that's 50% hidden under a scrim anyway. If this reads as too busy
     on a real phone, the one-line fallback is restoring the old
     `.hero-visuals{display:none}` rule — flag it and it's a 30-second
     revert, no markup changes needed. */
  @media (max-width:899px){
    .hero-photo--video{display:none;}
    .hero-photo--static{display:block;}
    .hero-photo{opacity:.5;}
    .hero-photo--kenburns{animation:none;}
    .hero-scrim{
      background:
        linear-gradient(180deg, rgba(22,23,26,.72) 0%, rgba(22,23,26,.5) 45%, rgba(22,23,26,.85) 100%);
    }
  }

  @media(prefers-reduced-motion:reduce){
    .hero::before,
    .hero-visuals *,
    .hero-visuals-druzina__canvas,
    .hero-photo--kenburns{
      animation:none !important;
    }
    .hero-photo--video{display:none;}
    .hero-photo--static{display:block;}
  }

  /* GENERIC */
  .eyebrow-sm{font-family:var(--font-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:10px;}
  h2{font-size:26px;}
  p{margin:0 0 1em;color:var(--ink-dim);}
  p:last-child{margin-bottom:0;}
  strong{color:var(--ink);}
  .lead{font-size:17px;color:var(--ink);margin-bottom:24px;}

  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:8px;}
  .fact{background:var(--bg-card);padding:16px;}
  .fact .v{font-family:var(--font-d);font-size:18px;color:var(--ink);}
  .fact .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px;}

  table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14.5px;}
  th{font-family:var(--font-m);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);font-weight:500;}
  td{padding:13px 12px;border-bottom:1px solid var(--rule);color:var(--ink-dim);vertical-align:top;}
  td strong{color:var(--ink);}
  tr:last-child td{border-bottom:none;}
  .tbl-wrap{overflow-x:auto;}
  /* Grouped sub-header rows inside a price table (e.g. "Packages —
     Individual online") — flat styling instead of an accordion, so every
     price is visible/searchable on page load; see academy/index.html. */
  .tbl-wrap table tr.subhead td{
    padding-top:16px;font-weight:700;font-size:12px;letter-spacing:.02em;
    text-transform:uppercase;color:var(--r5);border-bottom:1px solid var(--rule);
  }

  ul.plain{list-style:none;margin:0;padding:0;}
  ul.plain li{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--ink-dim);}
  ul.plain li:last-child{border-bottom:none;}
  ul.plain li strong{color:var(--ink);}

  .note{font-size:13.5px;color:var(--ink-faint);font-style:italic;margin-top:14px;}

  .callout{
    margin:24px 0;padding:20px 22px;border:1px solid var(--r5);border-radius:4px;
    background:linear-gradient(135deg,rgba(201,162,39,.08),rgba(201,162,39,.02));
    text-align:center;
  }
  .callout .big{font-family:var(--font-d);font-size:22px;color:var(--r5);font-weight:700;}
  .callout p{color:var(--ink);margin-top:6px;font-size:15px;}

  /* ECOSYSTEM GRID LINKS */
  .grid-ctas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px;}
  .card-cta{background:var(--bg-card);padding:24px;border-left:4px solid var(--r5);border-radius:0 4px 4px 0;}
  .card-cta h3{font-size:19px;color:var(--ink);margin-bottom:8px;}
  .card-cta p{font-size:14.5px;margin-bottom:18px;}

  /* RANK LADDER */
  .ladder{position:relative;margin-top:36px;padding-left:54px;}
  .ladder::before{
    content:"";position:absolute;left:14px;top:46px;bottom:0;width:5px;border-radius:3px;
    background:linear-gradient(to bottom,
      var(--r2) 0%, var(--r2) 24%,
      var(--r3) 24%, var(--r3) 48%,
      var(--r4) 48%, var(--r4) 72%,
      var(--r5) 72%, var(--r5) 100%);
    transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
  }
  .ladder.revealed::before{transform:scaleY(1);}
  @media (prefers-reduced-motion: reduce){.ladder::before{transition:none;transform:scaleY(1);}}
  .rank-start{position:absolute;left:0;top:0;width:34px;height:34px;border:2px solid var(--ink-faint);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:11px;color:var(--ink-faint);background:var(--bg);}
  .rank-row{position:relative;padding:22px 0 22px 6px;border-bottom:1px solid var(--rule);}
  .rank-row:last-child{border-bottom:none;}
  .rank-dot{position:absolute;left:-54px;top:24px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-weight:700;font-size:12px;color:#16171a;}
  .rank-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
  .rank-name{font-family:var(--font-d);font-size:21px;font-weight:600;color:var(--ink);}
  .rank-sub{font-size:12.5px;color:var(--ink-faint);}
  .rank-meta{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 10px;font-size:13px;}
  .rank-meta .tag{font-family:var(--font-m);font-size:11px;letter-spacing:.04em;color:var(--ink-faint);text-transform:uppercase;}
  .rank-meta .val{color:var(--ink);}
  .rank-perk{font-size:14.5px;color:var(--ink-dim);}

  /* RULES ACCORDION/BOX */
  .rules-scrollbox {
    background: var(--bg-alt);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 20px;
    max-height: 450px;
    overflow-y: auto;
    font-size: 14px;
    margin-top: 16px;
  }
  .rules-scrollbox h4 {
    font-family: var(--font-m);
    color: var(--r5);
    margin: 18px 0 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .rules-scrollbox h4:first-of-type { margin-top: 0; }
  .rules-scrollbox p, .rules-scrollbox li { color: var(--ink-dim); line-height: 1.5; }

  /* IMAGES */
  .hero-img{
    width:100%;max-width:var(--maxw);margin:0 auto 32px;
    display:block;border-radius:6px;overflow:hidden;
  }
  .hero-img img{
    width:100%;height:auto;display:block;
    max-height:340px;object-fit:cover;object-position:center;
    border-radius:6px;
  }
  .hero-img.wide img{max-height:260px;object-position:center 30%;}
  .photo-float{
    float:right;margin:0 0 18px 24px;
    width:min(280px, 45%);border-radius:6px;overflow:hidden;
  }
  .photo-float img{width:100%;height:200px;object-fit:cover;display:block;border-radius:6px;}
  .photo-full{margin:24px 0;border-radius:6px;overflow:hidden;}
  .photo-full img{width:100%;max-height:300px;object-fit:cover;object-position:center 25%;display:block;border-radius:6px;}
  @media(max-width:560px){.photo-float{float:none;width:100%;margin:0 0 16px;}.photo-float img{height:180px;}}
  .clearfix::after{content:'';display:table;clear:both;}

  /* ANCHOR HEADINGS */
  .anchor-heading{position:relative;scroll-margin-top:110px;}
  .anchor-heading .anchor-link{
    position:absolute;left:-22px;top:50%;transform:translateY(-50%);
    opacity:0;color:var(--ink-faint);font-size:14px;text-decoration:none;
    transition:opacity .15s;
  }
  .anchor-heading:hover .anchor-link{opacity:1;}
  h2.anchor-heading{scroll-margin-top:110px;}
  section[id]{scroll-margin-top:100px;}

  /* EVENT TYPE CARDS */
  .event-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:20px;}
  .event-card{
    background:var(--bg-card);border:1px solid var(--rule);border-radius:6px;
    padding:18px 16px;transition:border-color .15s;
  }
  .event-card:hover{border-color:var(--r5);}
  .event-card .ec-icon{font-size:24px;margin-bottom:8px;}
  .event-card .ec-title{font-family:var(--font-d);font-weight:600;font-size:15px;margin-bottom:6px;}
  .event-card .ec-meta{font-size:12px;color:var(--ink-faint);font-family:var(--font-m);letter-spacing:.05em;margin-bottom:8px;}
  .event-card .ec-desc{font-size:13px;color:var(--ink-dim);line-height:1.5;}

  /* UPCOMING EVENTS — CONVERSION CARDS */
  .upcoming-grid{display:flex;flex-direction:column;gap:18px;margin-top:24px;}
  .event-upcoming-card{
    display:flex;background:var(--bg-card);border:1px solid var(--rule);border-radius:8px;
    overflow:hidden;transition:border-color .15s;
  }
  .event-upcoming-card:hover{border-color:var(--r5);}
  .eu-img{flex:0 0 180px;align-self:stretch;}
  .eu-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:160px;}
  .eu-body{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:6px;}
  .eu-tag{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--r5);}
  .eu-date{font-size:13px;color:var(--ink-dim);font-weight:600;}
  .eu-title{font-family:var(--font-d);font-size:19px;margin:2px 0 4px;color:var(--ink);}
  .eu-desc{font-size:13.5px;color:var(--ink-dim);line-height:1.55;margin:0 0 10px;}
  .eu-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .eu-price{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--r5);}
  .eu-price-note{font-size:12px;color:var(--ink-faint);}
  .eu-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;}
  @media(max-width:560px){
    .event-upcoming-card{flex-direction:column;}
    .eu-img{flex:0 0 140px;}
    .eu-img img{min-height:140px;}
  }

  /* Two separate cards (subscribe CTA, calendar preview) instead of one
     crammed block — each is its own distinct "plate" (site-updates request,
     09.09.2026). */
  .events-empty-stack{display:flex;flex-direction:column;gap:20px;margin-top:24px;}

  /* CALENDAR EMBED — Google Calendar iframe всегда рендерится на белом фоне, поэтому
     заворачиваем в скруглённую светлую карточку, чтобы это выглядело как осознанный
     элемент дизайна, а не чужеродная вставка поверх тёмной темы сайта. */
  .calendar-embed-card{
    border-radius:8px;overflow:hidden;
    border:1px solid var(--rule);background:#fff;
  }
  .calendar-embed-card iframe{display:block;width:100%;}

  .events-status{
    padding:48px 24px;border:2px dashed var(--rule);border-radius:6px;
    text-align:center;color:var(--ink-dim);font-size:14px;
  }
  .eu-price.free { color: #2e9e5b; font-weight:700; }
  .eu-price.donation { color: #c9a227; font-weight:700; }

  .calendar-cta-empty{
    padding:40px 24px;border:2px solid var(--r5);border-radius:8px;
    text-align:center;background:var(--bg-card);
  }
  .calendar-cta-btn{font-size:17px;padding:16px 32px;font-weight:700;}
  .calendar-cta-explain{margin-top:14px;color:var(--ink-dim);font-size:14px;max-width:480px;margin-left:auto;margin-right:auto;}

  /* UPCOMING EVENTS — CONVERSION CARDS END */
  /* REVIEWS */
  .review-rating-note{font-size:14px;color:var(--ink-dim);margin-bottom:20px;}
  .reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
  .review-card{
    display:block;background:var(--bg-card);border:1px solid var(--rule);border-radius:6px;
    overflow:hidden;transition:border-color .15s, transform .15s;
  }
  .review-card:hover{border-color:var(--r5);transform:translateY(-2px);}
  .review-card img{width:100%;height:auto;display:block;}

  /* PORTRAIT */
  .portrait-block{display:flex;gap:24px;align-items:center;margin:24px 0;}
  .portrait-block img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid var(--r5);flex-shrink:0;}
  .portrait-block .portrait-text{flex:1;}
  @media(max-width:520px){.portrait-block{flex-direction:column;text-align:center;}}

  /* ACADEMY SUBJECT CARDS */
  .academy-subjects{display:flex;flex-direction:column;gap:28px;margin-top:8px;}
  .subj-group-title{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--rule);}
  .subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:10px;}
  .subj-card{background:var(--bg-alt);border:1px solid var(--rule);border-radius:6px;padding:14px 14px 12px;transition:border-color .15s;}
  .subj-card:hover{border-color:var(--r5);}
  .subj-icon{font-size:22px;margin-bottom:6px;}
  .subj-name{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;}
  .subj-items{margin:0;padding:0 0 0 14px;font-size:12px;color:var(--ink-dim);line-height:1.6;}
  .subj-items li{margin-bottom:2px;}

  /* PRICING */
  .price-global-note{background:var(--bg-card);border:1px solid var(--rule);border-left:3px solid var(--r5);border-radius:4px;padding:12px 16px;font-size:13.5px;color:var(--ink-dim);margin-bottom:28px;}
  .price-jump-list{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 20px;}
  .price-jump-link{font-size:14px;font-weight:700;color:var(--r5);text-decoration:none;padding:8px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--bg-card);transition:transform .15s ease,background .15s ease;}
  .price-jump-link:hover{background:var(--bg-alt);transform:translateY(-1px);}
  .price-jump{margin:8px 0 18px;font-size:14px}
  .price-jump a{font-weight:700;color:var(--r5);text-decoration:none}
  .price-cats{display:flex;flex-direction:column;gap:32px;}
  .price-cat{border:1px solid var(--rule);border-radius:6px;padding:20px;}
  .price-cat-title{font-size:17px;font-weight:700;margin:0 0 6px;color:var(--ink);}
  .price-cat-sub{font-size:13px;color:var(--ink-faint);margin:0 0 14px;font-style:italic;}
  .price-section-h{font-size:18px;margin:32px 0 8px;color:var(--ink);}
  .combo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px;}
  .combo-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:6px;padding:18px 16px;display:flex;flex-direction:column;gap:4px;transition:border-color .15s;}
  .combo-card:hover{border-color:var(--r5);}
  .combo-id{font-family:var(--font-m);font-size:10px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase;}
  .combo-name{font-size:18px;font-weight:700;color:var(--ink);}
  .combo-desc{font-size:13px;color:var(--ink-dim);line-height:1.5;flex:1;margin:4px 0;}
  .combo-price{font-size:20px;font-weight:700;color:var(--r5);margin-top:8px;}
  .combo-save{font-size:12px;color:#4caf7d;font-family:var(--font-m);}

  /* MEDALS */
  .medals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:24px;}
  .medal-card{
    background:var(--bg-card);border:1px solid var(--rule);border-radius:6px;
    padding:24px 20px;display:flex;flex-direction:column;gap:8px;
    transition:border-color .15s;
  }
  .medal-card:hover{border-color:var(--r5);}
  .medal-icon{font-size:36px;line-height:1;}
  .medal-title{font-family:var(--font-d);font-size:18px;font-weight:700;color:var(--ink);}
  .medal-req{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--r5);margin-bottom:4px;}
  .medal-perks{margin:0;padding:0 0 0 16px;color:var(--ink-dim);font-size:13.5px;line-height:1.6;}
  .medal-perks li{margin-bottom:4px;}
  .medals-ref-note{margin-top:20px;font-size:13px;color:var(--ink-faint);border-left:2px solid var(--rule);padding-left:12px;}

  /* FAQ ACCORDION */
  .faq-category{margin-bottom:10px;}
  .faq-category-label{
    font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-faint);margin:28px 0 10px;
  }
  .faq-item{border:1px solid var(--rule);border-radius:4px;margin-bottom:6px;overflow:hidden;}
  .faq-q{
    width:100%;background:var(--bg-card);border:none;color:var(--ink);
    font-family:var(--font-b);font-size:15px;font-weight:600;
    text-align:left;padding:16px 18px;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    transition:background .15s;
  }
  .faq-q:hover{background:var(--bg-alt);}
  .faq-q .faq-icon{
    flex-shrink:0;width:20px;height:20px;border-radius:50%;
    border:1.5px solid var(--ink-faint);color:var(--ink-faint);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;line-height:1;transition:transform .2s,border-color .2s,color .2s;
  }
  .faq-item.open .faq-icon{transform:rotate(45deg);border-color:var(--r5);color:var(--r5);}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height .3s ease;
    background:var(--bg-alt);
  }
  .faq-a-inner{padding:14px 18px 18px;color:var(--ink-dim);font-size:14.5px;line-height:1.65;}
  .faq-a-inner strong{color:var(--ink);}
  .faq-a-inner ul{margin:8px 0 0 18px;padding:0;}
  .faq-a-inner li{margin-bottom:4px;}

  footer{padding:48px 0 64px;text-align:center;border-top:1px solid var(--rule);}
  footer h2{font-size:24px;}
  .footer-contacts{margin:18px 0;font-size:15px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .footer-fine{font-size:12px;color:var(--ink-faint);margin-top:36px;}

  @media (max-width:560px){
    section{padding:42px 0;}
    .nav .wrap{padding:12px 18px;}
    .ladder{padding-left:46px;}
    .rank-dot{left:-46px;width:26px;height:26px;}
    .medals-grid{grid-template-columns:1fr 1fr;}
    .combo-grid{grid-template-columns:1fr 1fr;}
    .subj-grid{grid-template-columns:1fr 1fr;}
    .event-types{grid-template-columns:1fr 1fr;}
    .reviews-grid{grid-template-columns:1fr;}
    .hero h1{font-size:28px;}
    .hero-ctas{flex-direction:column;align-items:stretch;}
    .hero-ctas .btn{text-align:center;}
    .grid-ctas{grid-template-columns:1fr;}
    .facts{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:380px){
    .medals-grid,.combo-grid,.subj-grid,.event-types{grid-template-columns:1fr;}
  }

  /* ══════════════════════════════════════════════════════════════════
     NEW — Phase 1 static-first migration. These classes were used in
     the static content above but only ever existed in the standalone
     preview files' own <style> blocks, never carried into this real
     stylesheet until now. Caught and fixed during final integration —
     without this block, the hero/pricing static content would render
     unstyled.
     ══════════════════════════════════════════════════════════════════ */

  /* Hero: quiet secondary row (reviews badge + event-alerts ghost pill) */
  .hero-secondary-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:24px;margin-top:22px;}
  .alerts-ghost{
    display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-dim);
    border:1px solid var(--rule);border-radius:20px;padding:6px 14px;background:transparent;
    transition:border-color .15s,color .15s;
  }
  .alerts-ghost:hover{border-color:var(--r5);color:var(--r5);text-decoration:none;}

  /* Hero: venture picker — redesigned this session into photo cards
     (was icon+text only). .venture-card-wrap holds the card itself plus
     a small channel-icons row below it (kept OUTSIDE the <a> — nesting
     an <a> inside another <a> isn't valid HTML). */
  .venture-picker{padding:48px 0 64px;}
  .venture-picker h2.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .venture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px;}
  .venture-card-wrap{display:flex;flex-direction:column;gap:8px;}
  .venture-card{
    display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--rule);
    border-radius:8px;overflow:hidden;text-decoration:none;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  }
  .venture-card:hover{transform:translateY(-3px);border-color:var(--r5);box-shadow:0 8px 24px rgba(0,0,0,.35);text-decoration:none;}
  .venture-photo{aspect-ratio:4/3;overflow:hidden;background:var(--bg-alt);}
  .venture-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .venture-card-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;}
  .venture-card-body h3{font-family:var(--font-d);font-size:18px;margin:0;color:var(--ink);}
  .venture-card-body p{font-size:13px;color:var(--ink-dim);margin:0;line-height:1.5;}
  .venture-icon{width:30px;height:30px;color:var(--r5);}
  .venture-cta{font-size:13px;font-weight:700;color:var(--r5);}
  .venture-channels{display:flex;gap:8px;justify-content:center;}
  .venture-channels a{
    display:flex;align-items:center;justify-content:center;width:32px;height:32px;
    border:1px solid var(--rule);border-radius:6px;color:var(--ink-dim);
    transition:border-color .15s,color .15s;
  }
  .venture-channels a:hover{border-color:var(--r5);color:var(--r5);}

  /* Hero: trust strip — condensed this session from a 4-item icon grid
     into one line (same facts, none dropped, far less vertical space —
     see the "first screen" note in index.html). .trust-grid/.trust-item
     kept defined but unused, same as other dead-but-documented CSS this
     session (cheap to leave, no reason to risk deleting). */
  .trust-strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--bg-alt);padding:14px 22px;}
  .trust-line{max-width:var(--maxw);margin:0 auto;text-align:center;font-size:13px;color:var(--ink-dim);}

  /* Mission strip — added 10.09.2026, sourced from the owner's Drive
     manifesto doc (see index.html comment above the markup for details).
     Sits between the service-pitch hero and the credentials trust-strip:
     a short "why we exist" statement in the display serif, quieter than
     the H1 but distinct from the small-print trust line below it. */
  .mission-strip{padding:8px 22px 32px;text-align:center;}
  .mission-text{max-width:620px;margin:0 auto;font-family:var(--font-d);font-style:italic;font-size:19px;line-height:1.5;color:var(--ink);}
  .trust-grid{
    list-style:none;margin:0;padding:18px 22px;max-width:var(--maxw);margin-left:auto;margin-right:auto;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
  }
  .trust-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-dim);}
  .trust-item svg{flex:0 0 auto;color:var(--r5);width:20px;height:20px;}
  .trust-item .star{font-size:15px;flex:0 0 auto;}

  /* Site-wide sticky mobile CTA */
  .mobile-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(22,23,26,.94);backdrop-filter:blur(8px);border-top:1px solid var(--rule);
    transform:translateY(120%);transition:transform .3s ease;
  }
  .mobile-cta-btn{flex:1;text-align:center;background:var(--r5);color:#16171a;font-weight:700;font-size:14px;padding:13px 0;border-radius:6px;}
  .mobile-cta-icon{flex:0 0 auto;width:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:6px;color:var(--ink);}
  @media(min-width:769px){.mobile-cta{display:none;}}
  @media(prefers-reduced-motion:reduce){.mobile-cta{transition:none;}}

  /* Image fallback for the standalone-preview onerror pattern — kept in
     the real site too since it degrades gracefully if an image path
     is ever wrong, not just useful for the preview files. */
  .photo-slot{background:linear-gradient(135deg, var(--bg-card), var(--bg-alt));}
  .photo-slot.img-fallback{position:relative;}
  .photo-slot.img-fallback::after{
    content:'photo: ' attr(data-alt);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    padding:8px;text-align:center;font-family:var(--font-m);font-size:9px;color:var(--ink-faint);
  }

  /* Pricing: Housing's tier headings (h4 doesn't exist elsewhere) +
     combo card's "best value" detail line */
  .price-cat h4{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--ink);margin:20px 0 8px;}
  .combo-detail{font-size:12px;color:var(--ink-faint);}
  /* ══════════════════════════════════════════════════════════════════
     Service finder — search box + collapsible pricing categories.
     Direct response to "too bulky, hard to find the exact order."
     ══════════════════════════════════════════════════════════════════ */
  .service-finder{padding:0 0 40px;}
  .finder-box{
    display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1.5px solid var(--rule);
    border-radius:10px;padding:14px 18px;transition:border-color .15s;
  }
  .finder-box:focus-within{border-color:var(--r5);}
  .finder-icon{flex:0 0 auto;width:20px;height:20px;color:var(--ink-faint);}
  .finder-input{
    flex:1;background:none;border:none;outline:none;color:var(--ink);font-family:var(--font-b);
    font-size:16px;
  }
  .finder-input::placeholder{color:var(--ink-faint);}
  .finder-results{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
  .finder-result{
    display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg-card);
    border:1px solid var(--rule);border-radius:8px;padding:13px 16px;cursor:pointer;transition:border-color .15s;
  }
  .finder-result:hover{border-color:var(--r5);}
  .finder-result-name{font-size:14.5px;font-weight:600;color:var(--ink);}
  .finder-result-cat{font-size:12px;color:var(--ink-faint);font-family:var(--font-m);margin-top:2px;}
  .finder-result-price{flex:0 0 auto;font-weight:700;color:var(--r5);font-size:14.5px;white-space:nowrap;}
  .finder-empty{margin-top:12px;font-size:13.5px;color:var(--ink-faint);font-style:italic;}

  /* Highlight pulse when the finder jumps to a row — makes the exact
     answer unmistakable instead of landing you in the general area. */
  @keyframes svcHighlight{
    0%{background:rgba(201,162,39,.35);} 100%{background:transparent;}
  }
  .svc-highlight{animation:svcHighlight 2s ease-out;}

  /* Pricing categories collapse behind a summary toggle by default —
     JS-applied uniformly (see collapsePricingCategories()), not
     hand-restructured per category, so it can't drift out of sync with
     any one category's markup. */
  .price-cat-details{margin-top:14px;border-top:1px solid var(--rule);padding-top:14px;}
  .price-cat-summary-toggle{
    list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
    font-weight:600;color:var(--r5);font-size:14px;user-select:none;
  }
  .price-cat-summary-toggle::-webkit-details-marker{display:none;}
  .price-cat-summary-toggle::before{content:'▸';transition:transform .2s ease;font-size:12px;}
  .price-cat-details[open] > .price-cat-summary-toggle::before{transform:rotate(90deg);}