/* Valentine / Operate / Making Software / Thayon blend — preview redesign.
   Soft paper, huge type, air, sparse accent. Does not replace base styles. */

:root{
  --vb-paper:#f7f4ef;
  --vb-cream:#fbf8f3;
  --vb-ink:#1a1816;
  --vb-muted:#6b6560;
  --vb-line:#e6e0d6;
  --vb-accent:#c45c3e; /* warm red, small doses */
  --vb-accent-soft:#f0d9d0;
  --vb-charcoal:#1c1a18;
}

/* Quiet paper field over lime-forward base where Valentine air matters */
body{background:var(--vb-paper);color:var(--vb-ink)}
.site-header{
  background:rgba(247,244,239,.92);
  border-bottom-color:var(--vb-line);
}
.brand{letter-spacing:-.06em}
.main-nav{gap:36px}
.main-nav a{
  color:var(--vb-muted);
  font-size:13px;
  letter-spacing:.02em;
  font-weight:500;
}
.main-nav a:hover,.main-nav a[aria-current]{color:var(--vb-ink)}

/* —— Hero: typography pedestal, no film —— */
.hero.vb-hero,
.vb-hero{
  position:relative;
  isolation:isolate;
  min-height:min(88vh,920px);
  display:flex;
  align-items:center;
  background:
    radial-gradient(ellipse 70% 55% at 78% 42%, rgba(196,92,62,.07), transparent 60%),
    linear-gradient(180deg, var(--vb-cream) 0%, var(--vb-paper) 100%);
  color:var(--vb-ink);
  border-bottom:1px solid var(--vb-line);
  overflow:hidden;
}
.vb-hero .chapter-content{padding-block:110px 96px;max-width:920px}
.vb-hero .chapter-label{
  color:var(--vb-muted);
  font-size:11px;
  letter-spacing:.16em;
  font-weight:600;
  margin-bottom:28px;
}
.vb-hero .chapter-label::after{
  content:"";
  display:inline-block;
  width:28px;
  height:2px;
  margin-left:14px;
  vertical-align:middle;
  background:var(--vb-accent);
  opacity:.85;
}
.vb-hero h1{
  font-size:clamp(56px,8.2vw,120px);
  line-height:.98;
  letter-spacing:-.065em;
  font-weight:550;
  max-width:14ch;
  color:var(--vb-ink);
}
.vb-hero h1 em{
  font-style:normal;
  color:var(--vb-accent);
}
.vb-hero .hero-lede{
  margin-top:32px;
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.45;
  color:var(--vb-muted);
  max-width:28ch;
  letter-spacing:-.01em;
}
.vb-hero .hero-actions{margin-top:40px;gap:14px;flex-wrap:wrap}
.vb-hero .btn-primary{
  background:var(--vb-ink);
  color:var(--vb-cream);
  box-shadow:none;
}
.vb-hero .btn-primary:hover{background:#2e2a26;box-shadow:none}
.vb-hero .btn-paper{
  background:transparent;
  border:1px solid var(--vb-line);
  color:var(--vb-ink);
}
.vb-hero .btn-paper:hover{border-color:var(--vb-ink);background:transparent}
.vb-hero .chapter-next{
  color:var(--vb-muted);
  border-bottom-color:rgba(26,24,22,.25);
  margin-top:48px;
  font-size:13px;
}
.vb-hero .chapter-next:hover{color:var(--vb-ink);border-color:var(--vb-ink)}

/* —— Figures: Making Software drop zones —— */
.figures-section{
  padding:120px 0 100px;
  background:var(--vb-cream);
  border-bottom:1px solid var(--vb-line);
}
.figures-intro{max-width:640px;margin-bottom:56px}
.figures-intro .section-pill{
  background:#f3ece4;
  border-color:var(--vb-line);
  color:#7a5348;
}
.figures-intro .section-pill::before{background:var(--vb-accent)}
.figures-intro h2{
  font-size:clamp(36px,4.4vw,56px);
  letter-spacing:-.055em;
  line-height:1.05;
  margin:0;
}
.figures-intro>p{
  margin-top:18px;
  color:var(--vb-muted);
  font-size:17px;
  max-width:42ch;
}
.figures-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px 40px;
}
.figure-slot{min-width:0}
.figure-frame{
  aspect-ratio:16/10;
  border:1.5px dashed #d2c8bb;
  border-radius:4px;
  background:
    linear-gradient(180deg,#faf7f2 0%,#f3eee6 100%);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.figure-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.figure-frame-empty{
  text-align:center;
  padding:24px;
  color:#a89f93;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.figure-meta{
  display:flex;
  gap:16px;
  align-items:baseline;
  margin-top:16px;
}
.figure-label{
  font-size:11px;
  font-weight:650;
  letter-spacing:.12em;
  color:var(--vb-accent);
  flex:none;
}
.figure-caption{
  margin:0;
  font-size:15px;
  line-height:1.45;
  color:var(--vb-ink);
  letter-spacing:-.015em;
  max-width:36ch;
}

/* —— Suite map: Thayon-clean —— */
.suite-map{
  padding:110px 0 100px;
  background:var(--vb-paper);
  border-bottom:1px solid var(--vb-line);
}
.suite-map-lead{max-width:720px;margin-bottom:48px}
.suite-map-lead .section-pill{
  background:#f3ece4;
  border-color:var(--vb-line);
  color:#6b6560;
}
.suite-map-lead .section-pill::before{background:var(--vb-accent)}
.suite-map-lead h2{
  font-size:clamp(34px,4vw,52px);
  letter-spacing:-.05em;
  line-height:1.08;
  margin:0;
}
.suite-map-lead>p{
  margin-top:16px;
  color:var(--vb-muted);
  font-size:17px;
  max-width:40ch;
}
.suite-map .ecosystem-path{gap:20px}
.suite-map .ecosystem-card{
  background:var(--vb-cream);
  border-color:var(--vb-line);
  box-shadow:none;
  border-radius:10px;
}
.suite-map .ecosystem-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(28,26,24,.06);
}
.suite-map .ecosystem-art{background:#efeae3;height:180px}
.suite-map .ecosystem-card-copy h3{letter-spacing:-.05em}
.suite-map .ecosystem-story{display:none} /* less mid-page noise */

/* —— Interfaces intro: Valentine-short —— */
.interfaces-section{
  background:var(--vb-cream);
  padding-top:96px;
  border-bottom:1px solid var(--vb-line);
}
.interfaces-intro{max-width:640px;margin-bottom:36px}
.interfaces-intro .section-pill{
  background:#f3ece4;
  border-color:var(--vb-line);
  color:#6b6560;
}
.interfaces-intro .section-pill::before{background:var(--vb-accent)}
.interfaces-intro h2{
  font-size:clamp(36px,4.4vw,56px);
  letter-spacing:-.055em;
  line-height:1.05;
}
.interfaces-intro>p{
  margin-top:14px;
  color:var(--vb-muted);
  font-size:16px;
  max-width:36ch;
}

/* —— Signup: quieter, founder-adjacent —— */
.signup-section{
  background:var(--vb-paper);
  border-top:1px solid var(--vb-line);
  padding:110px 0;
}
.signup-section::before{opacity:.35;background-image:none}
.signup-copy .section-pill{
  background:#f3ece4;
  border-color:var(--vb-line);
  color:#7a5348;
}
.signup-copy .section-pill::before{background:var(--vb-accent)}
.signup-copy h2{
  font-size:clamp(48px,5.6vw,78px);
  letter-spacing:-.06em;
  color:var(--vb-ink);
}
.signup-copy h2 em{color:var(--vb-accent)}
.signup-copy>p{color:var(--vb-muted)}
.signup-copy .signup-note{color:var(--vb-muted)}
.signup-form{
  background:var(--vb-cream);
  border-color:var(--vb-line);
  box-shadow:0 16px 40px rgba(28,26,24,.05);
}
.signup-form .btn-dark,
.signup-copy .btn-dark{
  background:var(--vb-ink);
  color:var(--vb-cream);
}
.signup-form .btn-dark:hover,
.signup-copy .btn-dark:hover{background:#2e2a26}

.footer{background:var(--vb-cream);border-top:1px solid var(--vb-line)}
.footer-wordmark>span{color:var(--vb-accent-soft)}

/* Dark mode: keep Valentine air readable */
html[data-theme="dark"]{
  --vb-paper:#12110f;
  --vb-cream:#181613;
  --vb-ink:#f3eee6;
  --vb-muted:#b0a89e;
  --vb-line:#2e2a26;
  --vb-accent:#e08a70;
  --vb-accent-soft:#5a3530;
  --vb-charcoal:#f3eee6;
}
html[data-theme="dark"] .vb-hero{
  background:
    radial-gradient(ellipse 70% 55% at 78% 42%, rgba(224,138,112,.12), transparent 60%),
    linear-gradient(180deg, #161411 0%, #12110f 100%);
}
html[data-theme="dark"] .vb-hero .btn-primary{background:var(--vb-ink);color:#12110f}
html[data-theme="dark"] .figure-frame{
  background:linear-gradient(180deg,#1c1915,#161411);
  border-color:#3a342e;
}
html[data-theme="dark"] .figure-frame-empty{color:#7a7268}
html[data-theme="dark"] .suite-map .ecosystem-card{background:#1a1714}
html[data-theme="dark"] .suite-map .ecosystem-art{background:#221e1a}
html[data-theme="dark"] .signup-form{background:#1a1714}
html[data-theme="dark"] .signup-form .btn-dark,
html[data-theme="dark"] .signup-copy .btn-dark{background:var(--vb-ink);color:#12110f}

@media(max-width:900px){
  .figures-grid{grid-template-columns:1fr;gap:36px}
  .vb-hero .chapter-content{padding-block:88px 72px}
  .vb-hero h1{max-width:none}
}
@media(max-width:700px){
  .figures-section,.suite-map{padding:72px 0 64px}
  .vb-hero{min-height:min(84vh,760px)}
  .vb-hero h1{font-size:clamp(48px,11vw,72px)}
  .figure-meta{flex-direction:column;gap:6px}
}


/* —— Hero stage: left copy (~1/3) under brand edge; visual fills right ~2/3 with soft overlap —— */
.vb-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:0;
  align-items:stretch;
  width:100%;
  padding-block:56px 48px;
  position:relative;
  min-height:min(78vh,820px);
}
.vb-hero .vb-hero-layout .chapter-content{
  padding-block:clamp(48px,8vh,96px) 40px;
  padding-right:clamp(12px,2vw,28px);
  max-width:28rem;
  position:relative;
  z-index:2;
  /* Soft wash so overlapping text stays readable over the stage */
  background:linear-gradient(90deg, var(--vb-paper, #f7f4ef) 62%, transparent);
}
.vb-hero .vb-hero-layout .chapter-content > *{
  position:relative;
  z-index:1;
}
.hero-stage{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  min-height:100%;
  position:relative;
  z-index:1;
  /* Pull stage under the left copy a little */
  margin-left:clamp(-72px,-8vw,-36px);
  width:calc(100% + clamp(36px,8vw,72px));
}
.hero-stage-frame{
  width:100%;
  height:100%;
  min-height:min(62vh,640px);
  aspect-ratio:auto;
  max-width:none;
  border:1px solid var(--vb-line);
  border-radius:4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(247,244,239,.2)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 11px,
      rgba(26,24,22,.035) 11px,
      rgba(26,24,22,.035) 12px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 11px,
      rgba(26,24,22,.035) 11px,
      rgba(26,24,22,.035) 12px
    );
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.hero-stage-frame::before,
.hero-stage-frame::after{
  content:"+";
  position:absolute;
  top:10px;
  font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--vb-accent);
  opacity:.7;
}
.hero-stage-frame::before{left:12px}
.hero-stage-frame::after{right:12px}
.hero-stage-label{
  font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vb-muted);
}
.hero-stage-hint{
  font:400 13px/1.4 Georgia,"Times New Roman",serif;
  color:#9a938a;
  letter-spacing:-.01em;
}

/* —— Three ways: text-only, huge type, lots of air —— */
.suite-map--text{padding:96px 0 88px}
.suite-map--text .suite-map-lead{margin-bottom:56px}
.ecosystem-path--text{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.ecosystem-card--text{
  display:flex;
  flex-direction:column;
  gap:0;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0;
  text-decoration:none;
  color:inherit;
  overflow:visible;
  min-height:0;
  transition:color .15s;
}
.ecosystem-card--text:hover{
  transform:none !important;
  box-shadow:none !important;
  color:var(--vb-accent);
}
.ecosystem-card--text .ecosystem-number{
  position:static;
  font:600 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
  color:var(--vb-muted);
  margin-bottom:18px;
}
.ecosystem-card--text .mini-label{
  font:600 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
  color:var(--vb-muted);
}
.ecosystem-card--text h3{
  font-size:clamp(40px,5.2vw,72px);
  letter-spacing:-.06em;
  line-height:.98;
  margin:10px 0 0;
  font-weight:550;
  color:var(--vb-ink);
}
.ecosystem-card--text:hover h3{color:var(--vb-accent)}
.ecosystem-card--text p{
  margin:18px 0 0;
  max-width:22ch;
  font-size:15px;
  line-height:1.55;
  color:var(--vb-muted);
  grid-column:auto;
}
.ecosystem-card--text .ecosystem-count{
  margin-top:22px;
  padding-top:0;
  font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  color:#9a938a;
  grid-column:auto;
}
.suite-map-next{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:56px;
  font:500 14px/1.4 Georgia,"Times New Roman",serif;
  color:var(--vb-muted);
  text-decoration:none;
  border-bottom:1px solid var(--vb-line);
  padding-bottom:4px;
}
.suite-map-next:hover{color:var(--vb-ink);border-color:var(--vb-ink)}

html[data-theme="dark"] .vb-hero .vb-hero-layout .chapter-content{
  background:linear-gradient(90deg, var(--vb-paper, #12110f) 62%, transparent);
}
html[data-theme="dark"] .hero-stage-frame{
  border-color:var(--vb-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(243,238,230,.04) 11px, rgba(243,238,230,.04) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(243,238,230,.04) 11px, rgba(243,238,230,.04) 12px);
}
html[data-theme="dark"] .ecosystem-card--text h3{color:var(--vb-ink)}
html[data-theme="dark"] .ecosystem-card--text:hover h3{color:var(--vb-accent)}

@media (max-width:900px){
  .vb-hero-layout{
    grid-template-columns:1fr;
    gap:28px;
    padding-block:48px 40px;
    min-height:0;
  }
  .vb-hero .vb-hero-layout .chapter-content{
    max-width:none;
    padding-block:8px 8px;
    padding-right:0;
    background:none;
    order:1;
  }
  /* Visual on top on narrow screens — clearer first impression */
  .hero-stage{
    order:-1;
    min-height:0;
    margin-left:0;
    width:100%;
  }
  .hero-stage-frame{
    max-width:100%;
    min-height:min(42vh,360px);
    aspect-ratio:16 / 9;
  }
  .ecosystem-path--text{grid-template-columns:1fr;gap:40px}
  .ecosystem-card--text h3{font-size:clamp(44px,12vw,64px)}
}


/* Shared content edge: header, hero copy, and sections use .wrap.
   Side inset is ~1in (96px) from the viewport on desktop so the hero
   is not flush; the left column starts on that same edge (no extra indent).
   The hero visual's right edge is the wrap's right edge. */
.wrap{
  width:min(1240px, calc(100% - 192px));
}
.vb-hero .vb-hero-layout .chapter-content{
  padding-left:0;
  margin-left:0;
  text-align:left;
}
.vb-hero h1{white-space:normal}
.vb-hero-layout{padding-inline:0}
.hero-stage{
  margin-right:0;
  justify-self:stretch;
}

@media (max-width:1100px){
  .wrap{width:min(1240px, calc(100% - 160px))}
}
@media (max-width:700px){
  .wrap{width:calc(100% - 48px)}
  .vb-hero .vb-hero-layout .chapter-content{text-align:left}
}