/* ==========================================================================
   F26 Mobile Redesign & Polish (2026-10-22)
   Mobile-first improvements for Fall '26 Main Lab
   ========================================================================== */

/* 1. TYPOGRAPHY HARMONIZATION
   Eliminate font chaos (5 different fonts down to 1 coherent JetBrains Mono family) */
:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

body, #page, .f26-ds-hero, .f26-ds-hero h1, .f26-hero-dates {
  font-family: var(--mono) !important;
}

/* Shared header/menu presentation is owned by the parent shell. */

/* Keep the date highlight's inset equal on each wrapped line. */
.s1-sn em > .ed {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 6. HERO: Mobile date lines follow the primary action. */
@media (max-width: 1099px) {
  .f26-hero-dates {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 16px 0 0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #555555 !important;
  }
  .f26-date-prefix {
    display: none !important;
  }
  .f26-hero-dates strong {
    font-weight: 600 !important;
    color: #111111 !important;
  }
  .f26-hero-dates > span {
    color: #777777 !important;
  }
}

/* 7. Keep the signature in the product line without displacing the slogan. */
.f26-hero-product-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  position: relative;
  min-height: 0;
  width: 100%;
}
.f26-hero-product-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  flex-shrink: 0;
}
.f26-hero-harvest-badge {
  display: block;
  flex: 0 0 222px;
  width: 222px;
  height: 138px;
  padding: 0;
  margin: 0;
  transform: rotate(-18deg);
  transform-origin: center;
  background: transparent;
  border: 0;
  position: absolute;
  right: 0;
  top: -96px;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  mix-blend-mode: multiply;
}
.f26-hero-harvest-badge:focus-visible { outline: none; }
.f26-hero-harvest-badge:focus-visible::after {
  content: "";
  position: absolute;
  left: calc(50% - 16px);
  bottom: 4px;
  width: 32px;
  height: 3px;
  background: #0b7082;
  transform: rotate(18deg);
}
#f26-harvest-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 1099px) {
  .f26-hero-product-row {
    gap: 6px;
    min-height: 0;
    max-width: 390px;
    margin: 0;
  }
  .f26-hero-product-name {
    max-width: calc(100% - 140px);
    font-size: clamp(18px, 5vw, 20px);
    line-height: 1.35;
    text-wrap: balance;
    flex-shrink: 1;
  }
  .f26-hero-product-name .f26-product-season {
    display: inline-block;
    white-space: nowrap;
  }
  .f26-hero-harvest-badge {
    flex-basis: 134px;
    width: 134px;
    height: 84px;
    margin: 0;
    right: -4px;
    top: -2px;
  }
}

/* 8. HERO: Mobile display title, centered original eye crop, dates below CTA. */
@media (max-width: 1099px) {
  .lb-hero.lb-hero-plain.f26-ds-hero {
    min-height: auto !important;
    padding: 16px 0 28px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  .f26-ds-hero > .f26-hero-top-copy {
    display: contents !important;
  }
  .f26-hero-dates {
    order: 5 !important;
  }
  .f26-hero-product-row {
    order: 1 !important;
  }
  .f26-ds-hero > .f26-hero-face-slot {
    order: 2 !important;
    --f26-face-top-space: 90px !important;
    width: 204px !important;
    height: 240px !important;
    box-sizing: border-box !important;
    margin: 80px 0 8px !important;
    position: relative !important;
    overflow: hidden !important;
    align-self: center !important;
  }
  .f26-ds-hero h1 {
    order: 3 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: clamp(31px, calc(11.428571vw - 5.571429px), 40px) !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 24px !important;
    letter-spacing: -0.0625em !important;
    text-wrap: balance !important;
  }
  .f26-hero-slogan {
    font-family: inherit !important;
  }
  .f26-hero-slogan > span {
    display: inline-block;
  }
  .f26-ds-hero .ctas {
    order: 4 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .f26-ds-hero .ctas .lb-btn-a {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
  }
}

/* 9. REMOVE UNNECESSARY HORIZONTAL LINE AFTER HERO FACE (Desktop & Mobile) */
.f26-hero-details,
#b-hero-details {
  border-top: none !important;
}
.b-hero,
.lb-hero {
  border-bottom: none !important;
}

/* 10. HERO DETAILS & SPEC STRIP COMPOSITION */
@media (min-width: 1100px) {
  #b-hero-details {
    display: grid;
    grid-template-columns: minmax(0, 3.8fr) minmax(0, 4.2fr);
    gap: 64px;
    align-items: stretch;
    padding-block: 56px 48px;
  }
  #b-hero-details .lb-lede {
    font-size: 16px;
    line-height: 25.6px;
    margin: 0;
  }
  #b-hero-details .f26-offer-spec {
    display: grid;
    align-self: stretch;
    max-width: 500px;
    margin: 0;
  }
  #b-hero-details .f26-spec-strip {
    display: grid;
    grid-template-rows: repeat(4, minmax(min-content, 1fr));
    height: auto;
    min-height: 0;
    gap: 0;
    justify-content: normal;
    margin: 0;
    border-top: none;
    border-bottom: none;
  }
  #b-hero-details[data-f26-line-rhythm] .f26-spec-strip {
    grid-template-rows: repeat(3, minmax(0, 1fr)) var(--f26-last-record-height);
  }
  #b-hero-details[data-f26-line-rhythm] .f26-offer-spec {
    /* The prose supplies the intrinsic height; value glyphs cannot inflate it. */
    contain: size;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  #b-hero-details .f26-spec-row {
    display: grid;
    grid-template-columns: 144px 1fr;
    gap: 16px;
    align-items: first baseline;
    align-content: start;
    min-height: 0;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--hair);
  }
  #b-hero-details .f26-spec-row:not(:last-child) {
    margin-bottom: 12px;
  }
  #b-hero-details .f26-spec-row:last-child {
    border-bottom: none;
  }
  #b-hero-details .f26-spec-row dt {
    font-size: 16px;
    color: var(--graphite);
    line-height: 25.6px;
    margin: 0;
  }
  #b-hero-details .f26-spec-row dd {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    line-height: 25.6px;
    margin: 0;
  }
  #b-hero-details[data-f26-line-rhythm] .f26-spec-row > dt,
  #b-hero-details[data-f26-line-rhythm] .f26-spec-row > dd {
    transform: translateY(var(--f26-rhythm-shift, 0px));
  }
}

@media (max-width: 1099px) {
  #b-hero-details {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 40px;
  }
  #b-hero-details .f26-offer-spec {
    max-width: 100%;
    margin: 0;
  }
  #b-hero-details .f26-spec-strip {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 0;
    border-top: none;
    border-bottom: none;
  }
  #b-hero-details .f26-spec-row {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
  }
  #b-hero-details .f26-spec-row:last-child {
    border-bottom: none;
  }
  #b-hero-details .f26-spec-row dt {
    font-size: 15px;
    color: var(--graphite);
    line-height: 1.5;
    margin: 0;
  }
  #b-hero-details .f26-spec-row dd {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.5;
    margin: 0;
  }
}

/* 11. EDITORIAL COPY: AIM material-system role for the hero lede. */
.aim-editorial-copy p {
  text-align: justify;
  text-align-last: start;
  text-justify: inter-word;
  hanging-punctuation: allow-end;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  letter-spacing: -.0075em;
  word-spacing: 0;
  word-break: normal;
  overflow-wrap: normal;
}
.aim-editorial-copy span.hang { margin-right: -.6ch; }
@media (min-width: 1100px) {
  .aim-editorial-copy p {
    letter-spacing: clamp(-.03em, calc(.15vw - 2.4px), -.015em);
  }
}
@media (max-width: 700px) {
  .aim-editorial-copy p {
    text-align: start;
    text-align-last: auto;
    hanging-punctuation: none;
    /* Stricter native counts prevent the observed two-letter fragments. */
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 4;
    hyphenate-limit-chars: 6 5 4;
  }
}

/* 12. OUTCOMES FLOWERS: +40% height headroom */
.f26-outcomes-art {
  height: 320px !important;
}
@media (max-width: 760px) {
  .f26-outcomes-art {
    height: 280px !important;
  }
}

/* 13. ROOTS METAPHOR: Outcome 06 "Укорениться" & Centered Section CTA */
.f26-roots-metaphor {
  margin: 16px 0 0 0 !important;
  max-width: 280px !important;
  width: 100% !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  border: none !important;
}
.f26-roots-canvas {
  width: 100% !important;
  max-width: 280px !important;
  aspect-ratio: 720 / 480 !important;
  display: block !important;
  background: transparent !important;
}
.f26-roots-canvas svg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
.b-result .f26-section-cta {
  display: flex !important;
  justify-content: center !important;
  margin-top: 40px !important;
}
@media (max-width: 800px) {
  .f26-roots-metaphor {
    margin: 12px auto 0 auto !important;
    max-width: 240px !important;
  }
  .b-result .f26-section-cta {
    margin-top: 24px !important;
  }
}

/* 14. CONTEXT COPY & BEET: accepted prose with the vignette below. */
.f26-orientation .f26-context-intro { display: flow-root; }
.f26-context-intro > .f26-heading { margin-bottom: 24px; }
#b-context .f26-context-intro > .f26-lead {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
#b-context .f26-context-intro > .f26-beet-container {
  display: block;
  float: none;
  clear: both;
  width: 154px;
  height: 198px;
  margin: 24px auto 0;
  position: relative;
  transform: rotate(7deg);
  background: transparent;
}
.f26-beet-canvas-wrap, #f26-beet-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  border: 0;
}
#f26-beet-canvas { cursor: pointer; touch-action: pan-y; }
@media (max-width: 1099px) {
  #b-context .f26-context-intro > .f26-beet-container {
    width: 118px;
    height: 154px;
    margin-top: 20px;
    transform: rotate(10deg);
  }
}

/* 17. Alliums stay anchored to their FAQ row while scroll changes their growth. */
.f26-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 340px);
  gap: 36px;
  align-items: start;
}
.f26-alliums-metaphor {
  width: 100% !important;
  max-width: 320px !important;
  height: 400px !important;
  position: relative !important;
  top: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#f26-alliums-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  cursor: pointer !important;
  background: transparent !important;
}
@media (max-width: 1099px) {
  .lb-faq-root {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    column-gap: 12px;
  }
  .lb-faq-root > .lb-head { grid-column: 1 / -1; }
  .lb-faq-root > .lb-headline { grid-column: 1; grid-row: 2; align-self: center; }
  .f26-faq-layout { display: contents; }
  .f26-faq-layout > .lb-faq-list { grid-column: 1 / -1; grid-row: 3; }
  .lb-faq-root > .f26-section-cta { grid-column: 1 / -1; grid-row: 4; }
  .f26-alliums-metaphor {
    display: block !important;
    position: relative !important;
    top: auto !important;
    grid-column: 2;
    grid-row: 2;
    width: 104px !important;
    height: 132px !important;
    align-self: center;
    margin: 0 0 20px;
  }
}

/* 18. AUDIENCE V3 DESIGN SYSTEM ALIGNMENT (clean typography, no borders, no dots, larger arrows & text) */
.f26-audience-goals .f26-heading {
  color: var(--ink, #1a1a1a) !important;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}
.f26-audience-goals .f26-goal-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
  border-top: none !important;
}
.f26-audience-goals .f26-goal-list > li {
  position: relative !important;
  padding: 0 0 0 28px !important;
  border: none !important;
  border-bottom: none !important;
}
.f26-audience-goals .f26-goal-list > li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--orange) !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}
.f26-audience-goals .f26-goal-list p {
  margin: 0 !important;
  font-size: 16.5px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  letter-spacing: normal !important;
}
.f26-audience-goals .f26-goal-list strong {
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* 19. SPEAKERS BLOCK HARMONY (matching gray borders, height alignment, centered compact button, no CTA) */
.s4-pb-card {
  border: 1px solid var(--line) !important;
  min-height: var(--f26-speaker-pane-height, 366px) !important;
  box-sizing: border-box !important;
}
.s4-pb-grid {
  border-color: var(--line) !important;
}
.s4-pb-more.product-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 24px auto 0 !important;
  min-width: auto !important;
  min-height: 30px !important;
  padding: 5px 16px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  transition: transform 0.16s, filter 0.16s !important;
}
#b-people .f26-section-cta {
  display: none !important;
}

/* 20. REMOVE HARSH BLACK LINE ABOVE EXPERIENCE BLOCK */
.b-experience .org-proof-section {
  border-top: none !important;
  padding-top: 0 !important;
}
.b-experience .org-heading,
.b-experience .org-scope-prose {
  max-width: none;
}
.b-experience .org-ledger-list,
.b-experience .org-ledger-item {
  border: 0;
}

/* 21. TESTIMONIALS PUMPKIN METAPHOR ("Собранный урожай") */
.f26-project-info-label,
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: 0 !important;
}

.f26-testimonials-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
}
.f26-testimonials-copy {
  flex: 1 1 auto;
}
.f26-testimonials-copy .lb-headline {
  margin-bottom: 0 !important;
}
.f26-pumpkin-metaphor {
  flex: 0 0 220px;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: transparent;
  border: none;
  cursor: grab !important;
  user-select: none;
}
.f26-pumpkin-metaphor:active {
  cursor: grabbing !important;
}
#f26-pumpkin-canvas {
  width: 220px;
  height: 150px;
  display: block;
  background: transparent;
  cursor: grab !important;
}
#f26-pumpkin-canvas:active {
  cursor: grabbing !important;
}
.f26-pumpkin-caption {
  margin: 4px 0 0 0 !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.03em !important;
  color: #777777 !important;
  text-transform: lowercase;
  white-space: nowrap;
}
.f26-pumpkin-caption span {
  display: none !important;
}
@media (max-width: 900px) {
  .f26-testimonials-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .f26-pumpkin-metaphor {
    align-self: center;
    width: 200px;
  }
  #f26-pumpkin-canvas {
    width: 200px;
    height: 140px;
  }
}

/* 22. FAQ ACCORDION CLEANUP (no top/bottom outer lines, CTA button below) */
.lb-faq-root .lb-faq-list {
  border-top: none !important;
}
.lb-faq-root .lb-faq-item:last-child {
  border-bottom: none !important;
}
.lb-faq-root .f26-section-cta {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 36px !important;
}






.s4-pb-grid { min-height: var(--f26-speaker-pane-height, 0px) !important; }
.s4-pb-table { min-width: 0; }
.s4-pb-more.product-cta:hover, .s4-pb-more.product-cta:focus-visible {
  transform: none !important;
}

.s4-pb-more.product-cta[hidden] { display: none !important; }

/* Keep the shared foundation separate from a particular lab's seasonal module. */
.s6-yr-foundation-info { display: none; }
.s6-yr-season-context { min-block-size: 42px; }
@media (max-width: 700px) {
  .s6-yr .s6-yr-season-context {
    grid-column: 1 / -1;
    grid-row: 6;
    min-block-size: 32px;
  }
  .s6-yr .s6-yr-foundation-info {
    display: block;
    grid-column: 1 / -1;
    grid-row: 5;
    font-size: 12px;
  }
  .s6-yr-foundation-info > summary {
    cursor: pointer;
    min-height: 32px;
    display: list-item;
    list-style-position: inside;
    color: var(--mute);
  }
  .s6-yr-foundation-info .s6-yr-hk { display: none; }
}
