/* ============================================================
   SOULA · home (consumer) — rebuild layer
   Loaded AFTER v4.css. Holds the live "Mirror" micro-interaction
   (the on-page taste of value that replaces product mockups) +
   the make-interfaces-feel-better polish pass. Brand tokens only.
   ============================================================ */

/* ---------- feel-better: global polish ---------- */
html{ -webkit-font-smoothing: antialiased; }
body{ text-rendering: optimizeLegibility; }

/* body text: avoid orphans (headings already use text-wrap:balance in v4.css) */
.lead, .arch-for, .mode-when, .diff-card p, .libcat-card p, .review p, .privacy-card p{ text-wrap: pretty; }

/* dynamically-read numbers shouldn't shift width */
.founder-stat-num, .cost-num, .case-metric .num, .trust-mini strong,
.fc-mini strong, .pm-prog-v2-counter, .proof-strip strong{ font-variant-numeric: tabular-nums; }

/* tactile feedback — interruptible, exact properties (never transition:all) */
.btn, .all-link, .store, .store-talk{
  transition-property: transform, background-color, color, box-shadow, border-color;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.btn:active, .all-link:active, .store:active, .store-talk:active,
a.pill-link:active, .libcat-card:active{ transform: scale(.96); }

/* staggered reveals inside the key grids — split, ~70ms apart */
.arch-grid > .reveal:nth-child(2), .modes-grid > .reveal:nth-child(2),
.libcat-grid > .reveal:nth-child(2), .reviews-grid > .reveal:nth-child(2),
.diff-grid > .reveal:nth-child(2), .privacy-grid > .reveal:nth-child(2){ transition-delay: .07s; }
.arch-grid > .reveal:nth-child(3), .modes-grid > .reveal:nth-child(3),
.libcat-grid > .reveal:nth-child(3), .reviews-grid > .reveal:nth-child(3),
.diff-grid > .reveal:nth-child(3), .privacy-grid > .reveal:nth-child(3){ transition-delay: .14s; }
.arch-grid > .reveal:nth-child(4), .reviews-grid > .reveal:nth-child(4),
.privacy-grid > .reveal:nth-child(4){ transition-delay: .21s; }
.reviews-grid > .reveal:nth-child(5){ transition-delay: .28s; }
.reviews-grid > .reveal:nth-child(6){ transition-delay: .35s; }

@media (prefers-reduced-motion: reduce){
  .btn:active, .all-link:active, .store:active, a.pill-link:active, .libcat-card:active{ transform: none; }
  .reveal{ transition-delay: 0s !important; }
}

/* ---------- the Mirror — a live mini-chat (taste of value, no mockups) ---------- */
.mirror-wrap{ max-width: 600px; margin: 8px auto 0; scroll-margin-top: 96px; }
.mirror-card{
  background: var(--pink-0, #FFF0F4);
  border: 1px solid rgba(255, 46, 110, .16);
  border-radius: 28px; padding: 22px 22px 18px;
  box-shadow: 0 36px 70px -46px rgba(255, 46, 110, .45),
              0 2px 10px -6px rgba(28, 23, 28, .08);
}
@media (max-width: 560px){ .mirror-card{ padding: 16px 14px 14px; border-radius: 24px; } }

/* header */
.mirror-head{
  display: flex; align-items: center; gap: 12px;
  padding: 4px 4px 16px; border-bottom: 1px solid rgba(255, 46, 110, .12);
}
.mirror-head .orb-wrap{ width: 40px; height: 40px; }
.mirror-title{ font-weight: 640; font-size: 16px; letter-spacing: -.01em; color: var(--ink-1, #1C171C); }
.mirror-status{ font-size: 12.5px; color: rgba(28, 23, 28, .5); display: flex; align-items: center; gap: 6px; }
.mirror-dot{ width: 7px; height: 7px; border-radius: 50%; background: #37b86b; box-shadow: 0 0 0 3px rgba(55, 184, 107, .18); }

/* thread */
.mirror-thread{
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 2px; max-height: 320px; overflow-y: auto;
  scroll-behavior: smooth; scrollbar-width: thin;
}
.mirror-msg{ display: flex; animation: mIn .4s cubic-bezier(.2, 0, 0, 1) both; }
.mirror-msg.soula{ justify-content: flex-start; }
.mirror-msg.me{ justify-content: flex-end; }
@keyframes mIn{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
.mirror-bubble{
  max-width: 84%; font-size: 15.5px; line-height: 1.5;
  padding: 13px 16px; border-radius: 18px;
}
.mirror-msg.soula .mirror-bubble{
  background: #fff; border: 1px solid rgba(255, 46, 110, .14);
  border-bottom-left-radius: 6px; color: var(--ink-1, #1C171C);
  box-shadow: 0 10px 26px -22px rgba(28, 23, 28, .3);
}
.mirror-msg.me .mirror-bubble{
  background: var(--ink-1, #1C171C); color: #fff; border-bottom-right-radius: 6px;
}
.mirror-bubble em{ color: var(--pink-1, #FF2E6E); font-style: normal; }
.mirror-msg.me .mirror-bubble em{ color: #fff; }

/* typing dots */
.mirror-typing{ display: inline-flex; gap: 4px; align-items: center; padding: 3px 2px; }
.mirror-typing i{ width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 46, 110, .5); animation: mtype 1s infinite ease-in-out; }
.mirror-typing i:nth-child(2){ animation-delay: .15s; }
.mirror-typing i:nth-child(3){ animation-delay: .3s; }
@keyframes mtype{ 0%, 60%, 100%{ transform: translateY(0); opacity: .5; } 30%{ transform: translateY(-4px); opacity: 1; } }

/* composer */
.mirror-form{
  display: flex; gap: 8px; align-items: center;
  padding-top: 14px; border-top: 1px solid rgba(255, 46, 110, .12);
}
.mirror-input{
  flex: 1; min-width: 0;
  border: 1px solid rgba(28, 23, 28, .16); border-radius: 999px;
  padding: 13px 18px; font: inherit; font-size: 15px;
  background: #fff; color: var(--ink-1, #1C171C);
  transition-property: border-color, box-shadow; transition-duration: .18s;
}
.mirror-input::placeholder{ color: rgba(28, 23, 28, .4); }
.mirror-input:focus{ outline: none; border-color: var(--pink-1, #FF2E6E); box-shadow: 0 0 0 4px rgba(255, 46, 110, .12); }
.mirror-send{
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--ink-1, #1C171C); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition-property: transform, box-shadow; transition-duration: .18s;
  box-shadow: 0 10px 24px -14px rgba(28, 23, 28, .5);
}
.mirror-send:hover{ transform: translateY(-1px); }
.mirror-send:active{ transform: scale(.92); }
.mirror-foot{ font-size: 12.5px; color: rgba(28, 23, 28, .5); text-align: center; margin-top: 14px; }

@media (prefers-reduced-motion: reduce){
  .mirror-msg{ animation: none; }
  .mirror-typing i{ animation: none; }
}

/* ---------- doorways intro spacing (reuses .libcat-grid / .libcat-card) ---------- */
.doorways-head .lead{ max-width: 600px; }

/* loop-back — плашка памяти (жила в секции day, теперь в how) */
.loop-back{
  max-width: 760px; margin: 22px auto 0;
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-card-warm, #FBF6F2);
  border: 1px dashed rgba(255,46,110,.3);
  border-radius: var(--r-lg, 22px); padding: 18px 22px;
}
.loop-back svg{ flex: none; color: var(--pink-1, #FF2E6E); }
.loop-back span{ font-size: 14.5px; line-height: 1.55; color: var(--ink-2, #2A2A2A); }
.loop-back strong{ color: var(--ink-1, #0F0F0F); font-weight: 640; }
@media (max-width: 720px){
  .loop-back{ align-items: flex-start; }
}

/* press strip — centered (feedback #2) */
.press{ padding: 26px 0; }
.press-inner{ flex-direction: column; justify-content: center; gap: 14px; }
.press-logos{ justify-content: center; flex: none; gap: 30px; }

/* #say — 2 columns: tags/heading left, live chat right (feedback #6) */
.say-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.say-left{ text-align: left; }
.say-left .s-head{ margin-bottom: 18px; align-items: flex-start; text-align: left; }
.say-left .eyebrow{ justify-content: flex-start; }
.say-left .h-display, .say-left .lead{ text-align: left; }
.say-left .lead{ margin: 0; }
.say-left .pills-cloud{ justify-content: flex-start; margin: 18px 0 0; max-width: none; }
.say-right .mirror-wrap{ margin: 0; max-width: none; }
@media (max-width: 900px){
  .say-grid{ grid-template-columns: 1fr; gap: 22px; }
  .say-left, .say-left .s-head{ text-align: center; align-items: center; }
  .say-left .eyebrow, .say-left .pills-cloud{ justify-content: center; }
  .say-left .h-display, .say-left .lead{ text-align: center; }
}

/* ---------- founder photo (real portrait) ---------- */
.founder-photo{ overflow: hidden; }
.founder-photo img{
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
  outline: 1px solid rgba(0, 0, 0, .1);   /* neutral separator, never tinted */
  outline-offset: -1px;
}

/* ---------- quiet proof strip (VC signal — muted, doesn't break tone) ---------- */
.proof-strip{
  max-width: 940px; margin: 40px auto 0; padding-top: 28px;
  border-top: 1px solid rgba(28, 23, 28, .08);
  text-align: center;
}
.proof-strip .proof-line{
  font-size: 14px; line-height: 1.9; color: rgba(28, 23, 28, .65);
}
.proof-strip strong{ color: var(--ink-1, #1C171C); font-weight: 620; }
.proof-strip .sep{ color: rgba(28, 23, 28, .25); margin: 0 8px; }
.proof-strip .proof-cap{
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(28, 23, 28, .38); font-weight: 650; margin-bottom: 12px;
}

/* ============================================================
   DEEPER POLISH PASS — tighter rhythm + real motion
   (base sections were 130px/100px and .reveal was a no-op)
   ============================================================ */

/* 1 · TIGHTEN WHITESPACE — compact pass (sections were too tall) */
.section{ padding-top: 60px; padding-bottom: 60px; }
.section.compact{ padding-top: 44px; padding-bottom: 44px; }
.demo-section{ padding: 60px 0; }
.s-head{ margin-bottom: 30px; gap: 14px; }
/* grids sat far below the heading — pull them closer */
.arch-grid, .modes-grid, .cost-grid, .steps-grid, .ripple-grid,
.libcat-grid, .does-list, .reviews-grid, .case-panel{ margin-top: 28px; }
.hero{ padding-bottom: 44px; }
/* HERO — headline sits ON a big orb; wide sub + CTA stacked below it */
.hero-stage{
  position: relative;
  width: min(560px, 90vw);
  height: clamp(280px, 38vw, 380px);   /* footprint < orb, so the hero stays compact */
  margin: 0 auto;
  display: grid; place-items: center;
  overflow: visible;
}
/* orb is bigger than the stage and bleeds past it — big visual, small footprint */
.hero-stage .orb-wrap{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, 90vw); height: min(560px, 90vw);
}
.hero-stage .hero-headline{
  position: relative; z-index: 2; margin: 0; max-width: 94%;
  text-align: center;
  font-size: clamp(32px, 5vw, 58px); line-height: 1.06;
  text-shadow: 0 2px 22px rgba(255, 255, 255, .6), 0 1px 3px rgba(255, 255, 255, .5);
}
.hero-sub{ max-width: 660px; margin: 6px auto 0; }
@media (max-width: 760px){
  .section{ padding-top: 44px; padding-bottom: 44px; }
  .section.compact{ padding-top: 34px; padding-bottom: 34px; }
  .demo-section{ padding: 44px 0; }
  .s-head{ margin-bottom: 22px; }
}

/* 2 · REAL ENTER ANIMATION — base .reveal is a no-op.
   Gated on html.js-reveal so no-JS users still see everything. */
html.js-reveal .reveal{
  opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition-property: opacity, transform, filter;
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
html.js-reveal .reveal.shown{ opacity: 1; transform: none; filter: blur(0); }

/* 3 · SMOOTH ANCHOR SCROLL (offset for the sticky nav) */
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 88px; }

/* 4 · CARD HOVER LIFT — shadow adapts to any surface */
.arch-card, .mode-card, .diff-card, .review, .privacy-card{
  transition-property: transform, box-shadow, border-color;
  transition-duration: .22s; transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.mode-card:hover, .diff-card:hover, .review:hover, .privacy-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -28px rgba(28, 23, 28, .28);
}
.section-ink .arch-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 24px 52px -26px rgba(0, 0, 0, .5);
}
/* neutralize the enter-stagger delay so hover stays instant */
.arch-card:hover, .mode-card:hover, .diff-card:hover,
.review:hover, .privacy-card:hover, a.pill-link:hover, .libcat-card:hover{
  transition-delay: 0s;
}

/* 5 · NAV LINK — animated underline grows from the left */
.nav-links a{ position: relative; }
.nav-links a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--pink-1, #FF2E6E); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2, 0, 0, 1);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ transform: scaleX(1); }

/* 6 · PRIMARY BUTTON — depth + lift (scale-on-press kept from above) */
.btn-dark{ box-shadow: 0 10px 24px -14px rgba(28, 23, 28, .5); }
.btn-dark:hover{ box-shadow: 0 16px 32px -14px rgba(28, 23, 28, .55); transform: translateY(-1px); }
.btn-dark:active{ transform: scale(.96); }
a.pill-link:hover{ transform: translateY(-2px); }

/* 7 · reduced-motion — turn motion off entirely */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  html.js-reveal .reveal{ opacity: 1; transform: none; filter: none; transition: none; }
  .mode-card:hover, .diff-card:hover, .review:hover, .privacy-card:hover,
  .arch-card:hover, .btn-dark:hover, a.pill-link:hover{ transform: none; }
}

/* ============================================================
   ABOUT-FOUNDER page specifics
   ============================================================ */
.af-hero{ padding-top: 100px; padding-bottom: 52px; }
@media (max-width: 760px){ .af-hero{ padding-top: 86px; padding-bottom: 32px; } }
.af-hero .founder-grid, #story .founder-grid, #bio .founder-grid{ align-items: center; }
/* keep the hero on a single screen: cap the photo + ease the headline */
.af-hero .af-photo{ aspect-ratio: auto; height: 458px; }
@media (max-width: 760px){ .af-hero .af-photo{ height: 340px; } }
.af-hero .founder-head{ font-size: clamp(32px, 4.3vw, 54px); line-height: 1.06; margin: 0; }
.af-hero .lead{ font-size: 16px; }
.af-hero .hero-cta-row{ margin-top: 22px; }

.af-photo{
  border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 40px 80px -50px rgba(28, 23, 28, .5);
}
.af-photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px;
}

/* dark bio: original main photo + overlapping inset */
.af-bio-photos{ position: relative; height: 520px; }
@media (max-width: 760px){ .af-bio-photos{ height: 430px; } }
.af-bio-main, .af-bio-inset{
  position: absolute; border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .1);
}
.af-bio-main{ width: 84%; height: 82%; top: 0; left: 0; z-index: 1; }
.af-bio-inset{ width: 46%; height: 42%; right: 0; bottom: 0; z-index: 2; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.af-bio-main img, .af-bio-inset img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.af-bio-main img{ object-position: center 22%; }
.af-bio-inset img{ object-position: center; }

/* "What I know" cards with imagery */
.af-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 900px){ .af-cards{ grid-template-columns: 1fr; } }
.af-card{
  background: #fff; border: 1px solid rgba(28, 23, 28, .08); border-radius: 24px;
  overflow: hidden; display: flex; flex-direction: column;
  transition-property: transform, box-shadow; transition-duration: .22s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.af-card:hover{ transform: translateY(-3px); box-shadow: 0 22px 46px -28px rgba(28, 23, 28, .28); }
.af-card-media{ aspect-ratio: 3 / 2; overflow: hidden; }
.af-card-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px;
}
.af-card-body{ padding: 22px 22px 26px; }
.af-card-tag{ font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--pink-1, #FF2E6E); margin-bottom: 8px; }
.af-card-text{ font-size: 14.5px; line-height: 1.55; color: rgba(28, 23, 28, .7); }

/* ============================================================
   FIX: contrast on dark sections + photo centering
   ============================================================ */
/* black-on-black: bare headings/text inside .section-ink were inheriting
   the default dark ink. Force light everywhere on dark surfaces. */
.section-ink h1, .section-ink h2, .section-ink h3,
.section-ink .h-display{ color: var(--ink-on-dark, #FAFAF8); }
.section-ink h1 em, .section-ink h2 em, .section-ink h3 em,
.section-ink .h-display em{ color: var(--pink-1, #FF2E6E); }
.section-ink .founder-text, .section-ink .founder-text p,
.section-ink .lead, .section-ink p{ color: rgba(250, 250, 248, .76); }
.section-ink .founder-text em, .section-ink .lead em{ color: var(--pink-1, #FF2E6E); }
.section-ink .eyebrow{ color: rgba(250, 250, 248, .6); }

/* founder cards: keep the subject in frame per photo */
.af-card-media img{ object-position: center; }
.af-cards .af-card:nth-child(1) .af-card-media img{ object-position: center 18%; }
.af-cards .af-card:nth-child(2) .af-card-media img{ object-position: center 30%; }
.af-cards .af-card:nth-child(3) .af-card-media img{ object-position: center 42%; }
.af-photo img{ object-position: center 22%; }
.af-photo--story img{ object-position: center 16%; }

/* ============================================================
   ABOUT-FOUNDER · social icons in nav + Newsletter section
   ============================================================ */
.nav-social{ display: flex; align-items: center; gap: 4px; margin-right: 6px; }
.nav-social a{
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--ink-1, #1C171C);
  transition-property: background-color, color, transform; transition-duration: .18s;
}
.nav-social a:hover{ background: rgba(255, 46, 110, .1); color: var(--pink-1, #FF2E6E); transform: translateY(-1px); }
.nav-social svg{ width: 17px; height: 17px; }
@media (max-width: 760px){ .nav-social{ display: none; } }

/* Newsletter — the conversion goal of About founder */
.nl-wrap{ max-width: 720px; margin: 0 auto; text-align: center; }
.nl-wrap .s-head{ align-items: center; }
.nl-letter{
  background: #fff; border: 1px solid rgba(255, 46, 110, .16); border-left: 3px solid var(--pink-1, #FF2E6E);
  border-radius: 0 16px 16px 0; padding: 24px 28px; margin: 0 0 26px; text-align: left;
  box-shadow: 0 18px 44px -30px rgba(28, 23, 28, .3);
}
.nl-letter blockquote{ margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-1, #1C171C); font-style: italic; }
.nl-letter figcaption{ margin-top: 12px; font-size: 13px; color: rgba(28, 23, 28, .5); font-weight: 600; }
.nl-form{ display: flex; gap: 10px; max-width: 520px; margin: 0 auto 12px; }
@media (max-width: 560px){ .nl-form{ flex-direction: column; } }
.nl-input{
  flex: 1; min-width: 0; border: 1px solid rgba(28, 23, 28, .16); border-radius: 999px;
  padding: 14px 18px; font: inherit; font-size: 15px; background: #fff; color: var(--ink-1, #1C171C);
  transition-property: border-color, box-shadow; transition-duration: .18s;
}
.nl-input:focus{ outline: none; border-color: var(--pink-1, #FF2E6E); box-shadow: 0 0 0 4px rgba(255, 46, 110, .12); }
.nl-form .btn{ white-space: nowrap; min-height: 50px; }
.nl-micro{ font-size: 13px; color: rgba(28, 23, 28, .5); }
.nl-note{ font-size: 16px; font-weight: 600; color: var(--pink-1, #FF2E6E); }
.nl-reassure{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 32px; text-align: left; }
@media (max-width: 620px){ .nl-reassure{ grid-template-columns: 1fr; } }
.nl-r{
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(28, 23, 28, .07);
  border-radius: 14px; padding: 16px 18px; font-size: 14px; line-height: 1.55; color: rgba(28, 23, 28, .65);
}
.nl-r strong{ display: block; color: var(--ink-1, #1C171C); font-weight: 640; margin-bottom: 4px; }

/* ============================================================
   SAY IT TO SOULA — pills (now chat starters) + Mirror + CTA.
   Pills are <button>s feeding the on-page chat, not links away.
   ============================================================ */
button.pill-link{ font: inherit; cursor: pointer; }
button.pill-link:hover{
  border-color: var(--pink-1, #FF2E6E); color: var(--pink-1, #FF2E6E);
  transform: translateY(-2px);
}
button.pill-link:active{ transform: scale(.96); }

/* download nudge under the live chat */
.say-cta{ max-width: 600px; margin: 26px auto 0; text-align: center; }
.say-cta > p{
  font-size: 15px; line-height: 1.6; color: var(--ink-3, #6F6A66);
  margin: 0 0 18px; text-wrap: pretty;
}
.say-cta-actions{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.say-cta-mini{ font-size: 12.5px; color: rgba(28,23,28,.5); }

@media (prefers-reduced-motion: reduce){
  button.pill-link:hover, button.pill-link:active{ transform: none; }
}

/* ---------- "Not built for everyone": link them → Soula visually ---------- */
.does-so::before{
  content: "\2192"; color: var(--ink-4, #A8A29C); font-weight: 400; margin-right: 12px;
}
@media (max-width: 620px){ .does-so::before{ display: none; } }

/* ============================================================
   VISUAL PASS — one icon per card across How / Voices / Modes,
   so each block shows its idea at a glance. Brand tokens only.
   ============================================================ */

/* 04 · How Soula holds it — fill the (previously unused) art band */
.diff-art .diff-glyph{ width: 52px; height: 52px; color: var(--pink-1, #FF2E6E); }

/* 05 · Archetypes (dark) — tinted icon tile per voice */
.arch-ico{
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 46, 110, .15); color: var(--pink-1, #FF2E6E);
}
.arch-ico svg{ width: 25px; height: 25px; }


/* 07 · "Not built for everyone" — companion disclaimer as a proper footnote */
.does-footnote{
  text-align: center; margin: 18px auto 0; max-width: 540px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-4, #A8A29C);
}

/* 08 · Reviews — soft testimonial quote mark */
.review{ position: relative; }
.review::before{
  content: "\201C"; position: absolute; top: 4px; right: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px; line-height: 1; color: var(--pink-1, #FF2E6E);
  opacity: .13; pointer-events: none;
}

/* ============================================================
   ABOUT-FOUNDER — feedback fixes (#15 buttons+bio modal, #16 story)
   ============================================================ */
button.btn{ font: inherit; cursor: pointer; }
.af-cta{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* #16 — story heading smaller, grid aligned */
#story .h-display{ font-size: clamp(24px, 3.2vw, 38px); line-height: 1.12; }
#story .founder-grid{ align-items: center; }

/* #15 — "My bio" modal */
.bio-modal{ position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bio-modal[hidden]{ display: none; }
.bio-modal-backdrop{ position: absolute; inset: 0; background: rgba(15,15,15,.5); backdrop-filter: blur(4px); }
.bio-modal-card{
  position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 24px; display: grid; grid-template-columns: 0.85fr 1.15fr;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.55);
}
.bio-modal-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-modal-body{ padding: 28px 30px; }
.bio-modal-name{ font-size: 22px; font-weight: 640; letter-spacing: -.02em; color: var(--ink-1, #0F0F0F); }
.bio-modal-role{ font-size: 12.5px; font-weight: 650; color: var(--pink-1, #FF2E6E); margin: 4px 0 14px; }
.bio-modal-body p{ font-size: 14.5px; line-height: 1.55; color: var(--ink-3, #6F6A66); margin: 0 0 12px; }
.bio-modal-creds{ font-size: 12px; color: var(--ink-4, #A8A29C); }
.bio-modal-close{
  position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92); color: var(--ink-1, #0F0F0F);
  font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0,0,0,.4);
}
@media (max-width: 640px){ .bio-modal-card{ grid-template-columns: 1fr; } .bio-modal-photo{ height: 180px; } }

/* #governance (partners/business) — white cards on dark section had invisible
   body text (.section-ink p forced light). Force dark text inside white cards (#14). */
.section-ink .step-card p{ color: rgba(28,23,28,.62); }
.section-ink .step-card h4{ color: var(--ink-1, #0F0F0F); }

/* --- UX-пасс 2026-07-02: разгрузка + полировка --- */
/* пара плашек под карточками how (память + цикличность) */
.note-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; align-items: stretch; }
.note-duo .loop-back{ margin: 0; max-width: none; }
.note-duo .answer-first{ max-width: none; margin: 0; text-align: left; }
@media (max-width: 860px){ .note-duo{ grid-template-columns: 1fr; } }
/* компактная иконная плашка в карточках how (было 130px почти пустого поля) */
.diff-card .diff-art{ height: 92px; border-radius: 16px; }
.diff-art .diff-glyph{ width: 38px; height: 38px; }
/* карточки инвесторов: контент по центру, без пустого низа */
.inv-card{ justify-content: center; }
/* заголовки без висячих слов */
.h-display, .s-head h2, .s-head h3{ text-wrap: balance; }

/* --- Mirror-демо 2026-07: живой ИИ + аккуратные пилюли --- */
/* пилюли слева — ровная колонка одинаковой ширины, а не рваное облако */
.say-left .pills-cloud{
  flex-direction: column; align-items: stretch; gap: 10px;
  max-width: 420px; margin: 18px 0 0;
}
.say-left .pill-link{
  width: 100%; justify-content: flex-start; text-align: left;
  padding: 12px 18px;
}
@media (max-width: 900px){
  .say-left .pills-cloud{ margin-left: auto; margin-right: auto; }
}
/* карточка «лимит исчерпан» вместо поля ввода */
.mirror-limit{
  margin-top: 14px; padding: 16px 18px;
  background: var(--pink-bg, #FFE6EC);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.mirror-limit p{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2, #2A2A2A); }
.mirror-limit strong{ color: var(--ink-1, #0F0F0F); }
/* поле ввода в момент ответа */
.mirror-input:disabled{ opacity: .55; }

/* --- Mirror-демо: витринный вид (заголовок по центру, live-бейдж, гало у чата) --- */
.say-head{ margin-bottom: 34px; }
.say-live{ color: var(--pink-pressed, #D91E5B); }
.live-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink-1, #FF2E6E);
  margin-right: 10px;
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,46,110,.35); }
  50%{ box-shadow: 0 0 0 6px rgba(255,46,110,0); }
}
@media (prefers-reduced-motion: reduce){ .live-dot{ animation: none; } }

.say-pills-label{
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(28,23,28,.45);
}
.say-left .pills-cloud{ margin-top: 12px; }
.say-grid{ align-items: start; }
@media (max-width: 900px){
  .say-pills-label{ text-align: center; }
}

/* мягкое розовое гало за карточкой чата — она герой секции */
.say-right .mirror-wrap{ position: relative; }
.say-right .mirror-wrap::before{
  content: "";
  position: absolute; inset: -8% -12%;
  background: radial-gradient(ellipse 60% 55% at 50% 40%, rgba(255,46,110,.16) 0%, transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}
.say-right .mirror-card{ position: relative; z-index: 1; }
/* чуть больше воздуха и места под диалог */
.mirror-thread{ max-height: 380px; }
.mirror-msg.soula .mirror-bubble{ box-shadow: 0 10px 24px -18px rgba(28,23,28,.25); }