/* OKNO_D8_COMMERCIAL_PILOT_R1_1 — layout for the commercial blocks of the two D8 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. */

.d8-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. */
.d8-offer-sec{padding:26px 0 30px}
.d8-offer{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr);gap:36px;align-items:start}
.d8-offer__intro .d8-h1{margin:0 0 10px}
.d8-offer__intro .d8-lead{margin:0 0 10px}
.d8-offer__intro .d8-p{margin:0 0 8px}
.d8-hero__income{font-weight:800;color:var(--gs-navy);margin:0}
.d8-consults__h{margin:0 0 2px}
.d8-consults__format{color:var(--ok-muted);margin:0 0 12px}
.d8-offer .d8-grid{margin:0 0 12px}

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

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

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

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

.d8-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.d8-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 */
.d8-final__panel .d8-grid{text-align:left}
.d8-final__panel .d8-card .d8-p{color:var(--ok-ink)}
.d8-final__panel .d8-card .d8-consult__role,.d8-final__panel .d8-card .d8-consult__note{color:var(--ok-muted)}
.d8-final__panel .d8-card .d8-price{color:var(--gs-teal)}

/* ---- narrow screens: the same markup, tightened so both names and both prices come early ---- */
@media(max-width:900px){
  .d8-offer{grid-template-columns:1fr;gap:16px}
}
@media(max-width:640px){
  .d8-offer-sec{padding:14px 0 18px}
  .d8-offer{gap:12px}
  .d8-offer__intro .d8-h1{margin-bottom:8px}
  .d8-offer__intro .d8-lead{margin-bottom:8px}
  .d8-offer__intro .d8-p{margin-bottom:6px}
  .d8-consults__format{margin-bottom:8px}
  .d8-offer .d8-grid{margin:0 0 10px;gap:10px}
  .d8-offer .d8-card{padding:14px 16px}
  .d8-offer .d8-card h3{margin-bottom:2px}
  .d8-offer .d8-consult__role{margin-bottom:2px}
  .d8-offer .d8-price{margin-bottom:4px}
  .d8-offer .d8-card .d8-p{margin-bottom:6px}
  .d8-offer .d8-consult__note{margin-bottom:6px}
  .d8-offer .d8-card__foot{padding-top:8px}
  .d8-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.d8-page .d8-final{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
}

/* ============================================================================================
   OKNO_D8_BALANCED_CONVERSION_R2 — the offer lives in one accordion that is closed by default.
   This file stays the single owner of the published /d8-commercial.css. The R1 two-column offer
   rules above are no longer reached: that markup is gone, and R2 emits .d8-r2hero instead.
   Colours are the tokens d8.css already defines; no new palette, gradient, font or button family.
   ============================================================================================ */

/* first screen: the route, who it is for, the figure, what OKNO does, one verifiable proof */
.d8-r2hero{padding:26px 0 24px}
.d8-r2hero__copy{max-width:74ch}
.d8-r2hero__copy .d8-h1{margin:0 0 10px}
.d8-r2hero__copy .d8-lead{margin:0 0 10px}
.d8-r2hero__copy .d8-p{margin:0 0 10px}
.d8-hero__income{font-weight:800;color:var(--gs-navy)}
.d8-r2hero__inc{color:var(--gs-teal);font-weight:800;text-decoration:underline;white-space:nowrap}
.d8-r2trust{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;color:var(--ok-muted)}
.d8-r2trust .d8-trust__id{font-weight:800;color:var(--gs-navy)}
.d8-r2trust .d8-trust__a{color:var(--gs-teal);font-weight:800;text-decoration:none}
.d8-r2trust .d8-trust__a:hover{text-decoration:underline}
.d8-r2hero__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.d8-r2hero__acts .d8-btn{width:auto}

/* the help zone: one heading, one sentence, one closed accordion, one separate support entry */
.d8-help__shell{margin:4px 0 0}
.d8-acc{border:1px solid var(--ok-card-line);border-radius:14px;background:var(--ok-card-surface);overflow:hidden}
.d8-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)}
.d8-acc__sum::-webkit-details-marker{display:none}
.d8-acc__sum:hover{background:var(--ok-card-surface-quiet)}
.d8-acc__sum:focus-visible{outline:2px solid var(--gs-teal);outline-offset:-2px}
.d8-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}
.d8-acc[open] .d8-acc__chev{transform:rotate(225deg)}
.d8-acc__b{padding:4px 18px 18px;border-top:1px solid var(--ok-card-line)}
.d8-acc__b .d8-h3{margin:14px 0 2px}
.d8-acc__b .d8-list{margin-bottom:10px}
.d8-acc__more{margin-top:6px}
.d8-acc__more .d8-disc{margin-top:8px}
.d8-help__free{margin-top:12px}
.d8-help__free .d8-consults__freehelp{color:var(--ok-muted);margin:8px 0 0;max-width:62ch}
.d8-help__support{margin-top:22px;padding-top:18px;border-top:1px solid var(--ok-card-line)}
.d8-help__supporth{margin:0 0 8px;order:-1}
.d8-help__support{display:flex;flex-direction:column}
.d8-help__support .d8-cta-row{margin-top:4px}

/* the local navigation gains a help entry that opens the accordion instead of jumping blindly */
.d8-nav__help{background:none;border:none;font:inherit;cursor:pointer}
/* R2.1: the help item is an ordinary link to the help zone, and the three fragment ids kept from the
   earlier layout are compact in-flow markers on its visible shell. Both are normal anchor targets and
   are offset by the measured height of the sticky header and the local navigation. */
#help,.d8-anchor{scroll-margin-top:var(--d8-anchor-offset,120px)}
.d8-anchor{display:block;height:0;line-height:0;font-size:0}
button.d8-secnav__cta{font:inherit}

/* consultant cards keep their shape inside the accordion */
.d8-acc__b .d8-consult__role{color:var(--ok-muted);margin:0 0 6px}
.d8-acc__b .d8-consult__note{color:var(--ok-muted);margin:0 0 8px}

@media(max-width:900px){
  .d8-acc__b .d8-grid--2{grid-template-columns:1fr}
}
@media(max-width:640px){
  .d8-r2hero{padding:14px 0 16px}
  .d8-r2hero__acts{gap:8px}
  .d8-r2hero__acts .d8-btn{width:100%}
  .d8-acc__sum{min-height:52px;padding:12px 14px;font-size:16px}
  .d8-acc__b{padding:4px 14px 16px}
  .d8-help__support{margin-top:18px}
}

/* ============================================================================================
   OKNO_D8_OWNER_REVIEW_CONTENT_UI_R3 — the owner's review of the two live D8 pages.
   Layout only, scoped to D8. No new palette, font or button family; the tokens below already exist.
   ============================================================================================ */

/* The formal requirement reads as a short quiet callout, and the two OKNO notes reuse the card system
   so nothing new is invented for them. Both are always visible: the point of the review was that a
   material qualification must not hide inside a closed disclosure. */
.d8-note{background:var(--ok-card-surface-quiet);border:1px solid var(--ok-card-line);border-radius:14px;padding:14px 16px;margin:2px 0 14px}
.d8-note .d8-h3{margin:0 0 6px}
.d8-note .d8-p:last-child{margin-bottom:0}
.d8-practice__label{font-size:13px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--ok-muted);margin:16px 0 8px}
.d8-practice__c h3{margin:0 0 6px}

/* D05: the kept two-column income table must fit a 320px screen. d8.css gives every .d8-table a
   min-width of 420px, which is right for the wide tables elsewhere on the page and wrong for this one:
   it forced a horizontal scroll inside .d8-tablewrap. The override is scoped to this table only — the
   other tables keep their own behaviour — and it makes the label column wrap instead of shrinking type. */
#income .d8-table{min-width:0;table-layout:fixed}
#income .d8-table th,#income .d8-table td{overflow-wrap:anywhere;word-break:normal}
#income .d8-table th:first-child,#income .d8-table td:first-child{width:58%}
#income .d8-tablewrap{overflow-x:visible}

/* D14: the step number was position:absolute in the top-right corner over a padding reservation, so a
   heading that wrapped to two lines ran straight under it. The number now owns a grid column of its
   own and can never overlap the text; it is not removed, and its size is unchanged. */
.d8-step{position:static;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding-top:20px}
.d8-step__n{position:static;grid-column:1;grid-row:1;align-self:start}
.d8-step > :not(.d8-step__n){grid-column:2;min-width:0}
.d8-step > h3{margin-top:0}

/* D21: five cards left after the review. A fixed four-column grid left three empty cells, so the row
   is laid out with flexible cards that share the available width instead. */
#problems .d8-grid{display:flex;flex-wrap:wrap;gap:16px}
#problems .d8-grid > .d8-card{flex:1 1 260px;min-width:0}

/* D10: on a phone the two named entries in the help zone fill the width of their own container — not
   the viewport, and never past the page gutter. Long Ukrainian labels wrap instead of being clipped. */
@media(max-width:640px){
  .d8-help__free .d8-btn,.d8-help__support .d8-cta-row .d8-btn{width:100%;box-sizing:border-box;justify-content:center;text-align:center;min-height:44px;white-space:normal}
  .d8-help__support .d8-cta-row{display:flex}
  /* D15: the setup heading and its cards get the ordinary gutter and wrap naturally */
  #setup .d8-h2{overflow-wrap:break-word;hyphens:manual}
  #setup .d8-grid{gap:12px}
}