/* OKNO_D7_COMMERCIAL_PILOT_CANDIDATE_R1 — layout for the commercial blocks of the two D7 pages.
   Loaded after d8.css. Every colour is a token d8.css already uses (--gs-teal, --gs-navy, --ok-ink,
   --ok-muted, --ok-card-*); no new palette, gradient, font or button family is introduced, and every
   selector stays inside the d8 page's own class namespace. */

.d7-kicker{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ok-muted);margin:0 0 8px}

/* ---- the offer: introduction and both consultations in one band ---- */
/* The introduction takes the narrower column and the two consultations take the wider one, so the width
   the photograph used to occupy now carries the offer instead of being empty. */
.d7-offer-sec{padding:26px 0 30px}
.d7-offer{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);gap:36px;align-items:start}
.d7-offer__intro .d7-h1{margin:0 0 10px}
.d7-offer__intro .d7-lead{margin:0 0 10px}
.d7-offer__intro .d7-p{margin:0 0 8px}
.d7-hero__income{font-weight:800;color:var(--gs-navy);margin:0}
.d7-consults__h{margin:0 0 2px}
.d7-consults__format{color:var(--ok-muted);margin:0 0 12px}
.d7-offer .d7-grid{margin:0 0 12px}

/* two equal consultations: same width, same surface, same border, same button weight */
.d7-consult__role{color:var(--ok-muted);margin:0 0 6px}
.d7-consult__note{color:var(--ok-muted);margin:0 0 8px}
.d7-consults__free{margin-top:2px}
.d7-consults__freehelp{color:var(--ok-muted);margin:8px 0 0;max-width:62ch}

/* compact trust line directly under the offer */
.d7-trust{padding:0 0 10px}
.d7-trust__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0}
.d7-trust__id{font-weight:800;color:var(--gs-navy)}
.d7-trust__case{color:var(--ok-muted)}
.d7-trust__a{color:var(--gs-teal);font-weight:800;text-decoration:none}
.d7-trust__a:hover{text-decoration:underline}

/* the page's existing photograph, moved to the reference section it actually illustrates */
.d7-who__media{margin-top:18px}
.d7-who__media img{display:block;width:100%;height:auto;border-radius:16px}

/* the calculator entry and the publication date now open the reference material */
.d7-refhead{padding-bottom:0}
.d7-refhead__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:10px}
.d7-refhead__row .d7-updated{margin:0}

.d7-case__note{color:var(--ok-muted);margin:6px 0 0}

/* the local-nav CTA is an anchor now, so it needs the box behaviour the button had */
a.d7-secnav__cta{display:inline-flex;align-items:center;text-decoration:none}

/* the final panel is dark; the consultation cards inside it keep their own light surface,
   so their text must keep the normal ink rather than inherit the panel's white */
.d7-final__panel .d7-grid{text-align:left}
.d7-final__panel .d7-card .d7-p{color:var(--ok-ink)}
.d7-final__panel .d7-card .d7-consult__role,.d7-final__panel .d7-card .d7-consult__note{color:var(--ok-muted)}
.d7-final__panel .d7-card .d7-price{color:var(--gs-teal)}

/* ---- narrow screens: the same markup, tightened so both names and both prices come early ---- */
@media(max-width:900px){
  .d7-offer{grid-template-columns:1fr;gap:16px}
}
@media(max-width:640px){
  .d7-offer-sec{padding:14px 0 18px}
  .d7-offer{gap:12px}
  .d7-offer__intro .d7-h1{margin-bottom:8px}
  .d7-offer__intro .d7-lead{margin-bottom:8px}
  .d7-offer__intro .d7-p{margin-bottom:6px}
  .d7-consults__format{margin-bottom:8px}
  .d7-offer .d7-grid{margin:0 0 10px;gap:10px}
  .d7-offer .d7-card{padding:14px 16px}
  .d7-offer .d7-card h3{margin-bottom:2px}
  .d7-offer .d7-consult__role{margin-bottom:2px}
  .d7-offer .d7-price{margin-bottom:4px}
  .d7-offer .d7-card .d7-p{margin-bottom:6px}
  .d7-offer .d7-consult__note{margin-bottom:6px}
  .d7-offer .d7-card__foot{padding-top:8px}
  .d7-trust__row{gap:4px 10px}
}

/* MOBILE ENTRY RESTORE R1 — the R1.2 rule that switched the shared floating stack off below 640px on this
   page is REMOVED by the owner's decision. It took the attached mobile entry into the widget with it: the
   shell hides the widget's own launcher on the promise that this stack replaces it, so hiding the stack left
   mobile readers with no attached entry at all. Seven in-text CTAs and a drawer item are not a replacement
   for it. The overlap that motivated the rule is handled below by spacing, not by removing the function. */
@media(max-width:640px){
  /* room under the last row of any section so the fixed stack never rests on a control the reader still
     needs; the stack is 3x44px + gaps above the safe-area inset */
  body.d7-page .d7-final{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}

/* ============================================================================================
   OKNO_D7_BALANCED_CONVERSION_R2 — the offer lives in one accordion that is closed until pressed.
   Written in the D7 namespace against the tokens d7.css already defines. No new palette, font or
   button family, and no dependency on the D8 layer.
   ============================================================================================ */

/* the compact hero: route, audience, what OKNO does, two entries — no cards, no prices */
.d7-r2hero{padding:26px 0 22px}
.d7-r2hero__copy{max-width:72ch}
.d7-r2hero__copy .d7-h1{margin:0 0 10px}
.d7-r2hero__copy .d7-lead{margin:0 0 10px}
.d7-r2hero__copy .d7-p{margin:0 0 8px}
.d7-r2hero__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.d7-r2hero__acts .d7-btn{width:auto}

/* the help zone: one heading, one sentence, one closed accordion, one separate support entry */
.d7-help__shell{margin:4px 0 0}
.d7-acc{border:1px solid var(--ok-card-line);border-radius:14px;background:var(--ok-card-surface);overflow:hidden}
.d7-acc__sum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:14px 18px;cursor:pointer;list-style:none;
  font-size:17px;font-weight:800;color:var(--gs-navy)}
.d7-acc__sum::-webkit-details-marker{display:none}
.d7-acc__sum:hover{background:var(--ok-card-surface-quiet)}
.d7-acc__sum:focus-visible{outline:2px solid var(--gs-teal);outline-offset:-2px}
.d7-acc__chev{flex:0 0 auto;width:12px;height:12px;border-right:2px solid var(--gs-teal);border-bottom:2px solid var(--gs-teal);
  transform:rotate(45deg);transition:transform .15s ease;margin-right:4px}
.d7-acc[open] .d7-acc__chev{transform:rotate(225deg)}
.d7-acc__b{padding:4px 18px 18px;border-top:1px solid var(--ok-card-line)}
.d7-acc__b .d7-h3{margin:14px 0 2px}
.d7-acc__b .d7-list{margin-bottom:10px}
.d7-acc__b .d7-consult__role,.d7-acc__b .d7-consult__note{color:var(--ok-muted)}
.d7-acc__more{margin-top:6px}
.d7-acc__more .d7-disc{margin-top:8px}
.d7-help__free{margin-top:12px}
.d7-help__free .d7-consults__freehelp{color:var(--ok-muted);margin:8px 0 0;max-width:62ch}
.d7-help__support{margin-top:22px;padding-top:18px;border-top:1px solid var(--ok-card-line)}
.d7-help__support .d7-h2{margin:0 0 8px}
.d7-help__support .d7-cta-row{margin-top:10px;justify-content:flex-start}

/* the help item in the local navigation is an ordinary link; only the named CTA opens the offer.
   The three ids the earlier layout used keep working as compact in-flow markers on the visible shell,
   offset by the measured height of the sticky header and the local navigation. */
#help,.d7-anchor{scroll-margin-top:var(--d7-anchor-offset,120px)}
.d7-anchor{display:block;height:0;line-height:0;font-size:0}

@media(max-width:900px){
  .d7-acc__b .d7-grid--2{grid-template-columns:1fr}
}
@media(max-width:640px){
  .d7-r2hero{padding:14px 0 16px}
  .d7-r2hero__acts{gap:8px}
  /* the entries fill their own container, never the viewport, and a long Ukrainian label wraps */
  .d7-r2hero__acts .d7-btn,
  .d7-help__free .d7-btn,
  .d7-help__support .d7-cta-row .d7-btn,
  .d7-final .d7-cta-row .d7-btn{width:100%;box-sizing:border-box;justify-content:center;text-align:center;min-height:44px;white-space:normal}
  .d7-final .d7-cta-row{display:flex}
  .d7-acc__sum{min-height:52px;padding:12px 14px;font-size:16px}
  .d7-acc__b{padding:4px 14px 16px}
  .d7-help__support{margin-top:18px}
}

/* The step number was absolutely positioned in the top-right corner over a padding reservation, so a
   heading that wrapped ran straight under it — measured on D7 at every width, both locales. It now owns
   a grid column of its own. The number is kept, its size is unchanged. */
.d7-step{position:static;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding-top:20px}
.d7-step__n{position:static;grid-column:1;grid-row:1;align-self:start}
.d7-step > :not(.d7-step__n){grid-column:2;min-width:0}
.d7-step > h3{margin-top:0}