/* Syndie V7 landing — V5 flow, V6 effects, green-only, white/black/grey */

/* ---- Announce + Nav on the organic picture ---- */
.hero-wrap { background: var(--organic); color: var(--on-dark); }
.announce { background: var(--black); color: var(--on-dark-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 9px 16px; position: relative; z-index: 3; }
.announce b { color: var(--on-dark); font-weight: 500; }
.announce a { color: var(--on-dark); text-decoration: none; }
.announce a:hover { text-decoration: underline; text-underline-offset: 3px; }

.nav { height: 70px; display: flex; align-items: center; gap: 10px; max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--on-dark); }
.brand span { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 2px; margin: 0 auto; }
.nav-links a { color: var(--on-dark); text-decoration: none; font-size: 13.5px; padding: 8px 12px; border-radius: var(--r); opacity: .9; }
.nav-links a:hover { background: rgba(255,255,255,.1); opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .login { color: var(--on-dark); text-decoration: none; font-size: 13.5px; opacity: .9; }
.nav-cta .login:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Hero (V5 picture, V6 badge/CTA effects) ---- */
.hero { text-align: center; padding: 78px 32px 100px; }
.hero .badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r);
  padding: 8px 14px; margin-bottom: 30px; background: rgba(255,255,255,.08);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark);
}
.hero .badge i { width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(120deg, var(--lime), var(--leaf)); }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(46px, 5.8vw, 78px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 auto 24px; max-width: 17ch; text-wrap: balance; color: #FDFEFB;
}
.hero h1 em { font-style: italic; color: #E4F3C9; }
.hero .sub { font-size: 15.5px; color: var(--on-dark-2); line-height: 1.6; max-width: 52ch; margin: 0 auto 32px; color: #C9D4C6; }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.hero .under { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-2); }

/* ---- Demo directly under hero (the USP) ---- */
.demo-sect { padding: 84px 32px 92px; background: var(--mist); }
.demo-head { text-align: center; margin-bottom: 38px; }
.demo-head .flag { margin-bottom: 16px; }
.demo-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.8vw, 44px); letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 10px; text-wrap: balance; }
.demo-head p { color: var(--text-2); font-size: 14.5px; margin: 0 auto; max-width: 52ch; }
.demo { max-width: 720px; margin: 0 auto; }
.demo-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: 0 26px 70px rgba(16,18,17,.09); }
.demo-bar { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--hairline); }
.demo-bar .t { font-size: 13px; font-weight: 600; }
.demo-bar .badge2 { margin-left: auto; }
.demo-body { padding: 24px; }

/* V5 launcher UX: joined input + button, sharp */
.launcher { display: flex; }
.launcher input {
  flex: 1; border: 1px solid var(--hairline); border-right: none;
  border-radius: var(--r) 0 0 var(--r); padding: 14px 16px;
  font-family: var(--font-body); font-size: 14px; outline: none; color: var(--text);
  background: var(--paper);
}
.launcher input:focus { border-color: var(--green); }
.launcher .btn { border-radius: 0 var(--r) var(--r) 0; }
.demo-hint { margin-top: 10px; font-size: 12.5px; color: var(--faint); }
.demo-hint button { color: var(--text-2); background: none; border: none; cursor: pointer; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; padding: 0 2px; font-family: var(--font-body); }
.demo-hint button:hover { color: var(--text); }

/* V5 step UX: square markers */
.steps { display: none; margin-top: 22px; }
.steps.on { display: block; }
.step-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; font-size: 13.5px; color: var(--faint); }
.step-row .sq { width: 15px; height: 15px; border: 1px solid var(--hairline); border-radius: var(--r); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.step-row.doing { color: var(--text); }
.step-row.doing .sq { border-color: var(--leaf); }
.step-row.done { color: var(--text); }
.step-row.done .sq { background: var(--leaf); border-color: var(--leaf); }
.step-row .note { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.build-meter { margin: 12px 2px 4px; }

.draft-wrap { display: none; margin-top: 22px; }
.draft-wrap.on { display: block; }
.draft-msg { background: var(--green-pale); border-radius: var(--r); padding: 16px 18px; font-size: 13.5px; line-height: 1.6; color: #14371F; }
.draft-msg .who { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.draft-msg .who b { font-size: 12px; color: var(--text); }
.verify { margin-top: 16px; }
.verify .v-title { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.v-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; font-size: 13px; border-top: 1px solid var(--mist); opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.v-row.show { opacity: 1; transform: none; }
.v-row .mark { flex: none; width: 16px; height: 16px; border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 1px; }
.v-row.good .mark { background: var(--ok-soft); color: var(--ok); }
.v-row.stop .mark { background: var(--bad-soft); color: var(--bad); }
.v-row .src { margin-left: auto; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.v-verdict { display: none; margin-top: 14px; background: var(--warn-soft); border-radius: var(--r); padding: 13px 16px; font-size: 12.5px; color: #6B4A0C; line-height: 1.55; }
.v-verdict.on { display: block; }
.v-verdict b { color: var(--text); }
.next-row { display: none; margin-top: 18px; text-align: center; }
.next-row.on { display: block; }

.chat-wrap { display: none; }
.chat-wrap.on { display: block; }
.chat { display: flex; flex-direction: column; gap: 9px; margin-bottom: 6px; }
.bubble { max-width: 85%; padding: 12px 15px; border-radius: var(--r); font-size: 13.5px; line-height: 1.55; opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; }
.bubble.show { opacity: 1; transform: none; }
.bubble .who { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.bubble.syd { align-self: flex-end; background: var(--green-pale); color: #14371F; }
.bubble.syd .who { color: var(--green); text-align: right; }
.bubble.them { align-self: flex-start; background: var(--mist); }
.bubble.hold { align-self: flex-end; background: var(--warn-soft); color: #6B4A0C; }
.bubble.hold .who { color: var(--warn); text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--mist); }
.chips .lbl { width: 100%; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.chip { border: 1px solid var(--hairline); background: #fff; border-radius: var(--r); padding: 9px 13px; font-size: 12.5px; font-family: var(--font-body); color: var(--text); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.chip:hover { border-color: var(--green); background: var(--green-pale); }
.chip:disabled { opacity: .35; cursor: default; }
.demo-final { display: none; margin-top: 18px; text-align: center; padding: 20px; background: var(--mist); border-radius: var(--r); }
.demo-final.on { display: block; }
.demo-final p { margin: 0 0 14px; font-family: var(--font-display); font-size: 19px; }
.demo-reset { margin-top: 12px; }

/* ---- Black problem section (V6 component) ---- */
.dark { background: var(--black); color: var(--on-dark); }
.problem { max-width: var(--page-max); margin: 0 auto; padding: 92px 40px; text-align: center; }
.problem .flag { margin-bottom: 22px; }
.problem h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 auto 48px; max-width: 24ch; text-wrap: balance; color: var(--on-dark); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--dark-line); border-radius: var(--r); overflow: hidden; text-align: left; }
.p-card { padding: 30px 28px; border-left: 1px solid var(--dark-line); }
.p-card:first-child { border-left: none; }
.p-card .glyph { width: 44px; height: 44px; border-radius: var(--r); margin-bottom: 38px; background: var(--aurora-deep); box-shadow: inset 0 0 0 1px rgba(185,225,76,.28); display: flex; align-items: center; justify-content: center; color: var(--lime); }
.p-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--on-dark); }
.p-card p { font-size: 12.5px; line-height: 1.6; color: var(--on-dark-2); margin: 0; }

/* ---- Jobs (V5 flow, V6 numbered components) ---- */
.jobs { max-width: 980px; margin: 0 auto; padding: 88px 32px; }
.jobs-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; margin-bottom: 42px; align-items: start; }
.jobs-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
.jobs-head .lede { font-size: 17px; line-height: 1.5; margin: 0; }
.jobs-head .lede .micro { display: block; margin-top: 14px; }
.job-row { display: flex; align-items: center; gap: 24px; padding: 20px 10px; border-top: 1px solid var(--hairline); }
.job-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.job-row .body { flex: 1; }
.job-row .k { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.job-row .t { font-size: 14px; font-weight: 500; }
.job-row.hl { background: var(--mist); border-radius: var(--r); border-top: none; padding: 26px; margin: 8px 0; }
.job-row.hl + .job-row { border-top: none; }
.job-row.hl .mini { flex: none; width: 190px; background: #fff; border-radius: var(--r); box-shadow: 0 12px 34px rgba(16,18,17,.08); padding: 14px 16px; }
.job-row.hl .mini b { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; display: block; }
.job-row.hl .mini span { font-size: 10px; color: var(--faint); line-height: 1.4; display: block; margin-top: 4px; }
.job-row.hl .mini .dotline { height: 5px; border-radius: 2px; background: var(--grad-line); margin-top: 10px; }

/* ---- Control + dial (V5 flow, grey not cream) ---- */
.control { background: var(--mist); }
.control-inner { max-width: var(--page-max); margin: 0 auto; padding: 88px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.control h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 14px; max-width: 16ch; }
.control .copy p { color: var(--text-2); font-size: 14px; line-height: 1.6; margin: 0 0 20px; max-width: 46ch; }
.dial { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r); padding: 10px 12px 12px; box-shadow: 0 18px 50px rgba(16,18,17,.06); }
.dial .d-title { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 10px 10px 10px; }
.d-opt {
  display: block; padding: 13px 16px; margin-top: 4px;
  border-radius: var(--r); cursor: pointer;
  transition: background .15s ease;
}
.d-opt:hover { background: var(--mist); }
.d-opt.on { background: var(--green-pale); }
.d-opt .t b { display: block; font-size: 13.5px; font-weight: 600; }
.d-opt .t span { font-size: 12px; color: var(--faint); }
.d-opt.on .t b { color: var(--green-deep); }
.d-opt.on .t span { color: var(--text-2); }

/* ---- Dark green stat panel (V6 component) ---- */
.stats-wrap { max-width: var(--page-max); margin: 0 auto; padding: 88px 32px 24px; }
.stat-panel { border-radius: var(--r); overflow: hidden; position: relative; background: var(--aurora-deep); color: var(--on-dark); padding: 60px 56px 46px; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; }
.stat-panel::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -55%; height: 90%; background: radial-gradient(50% 55% at 50% 0%, rgba(185,225,76,.32) 0%, rgba(63,155,84,.16) 45%, rgba(0,0,0,0) 75%); filter: blur(6px); }
.stat-panel h2 { position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -0.01em; margin: 0; max-width: 18ch; color: var(--on-dark); }
.stat-panel h2 em { font-style: italic; color: #E4F3C9; }
.stat-panel .micro { position: absolute; bottom: 20px; left: 56px; color: var(--on-dark-2); }
.stat-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 60px; }
.stat-col { border-left: 1px solid rgba(255,255,255,.22); padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.stat-col b { font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.stat-col span { font-size: 12px; color: var(--on-dark-2); line-height: 1.5; max-width: 20ch; }
.stat-col .arrow-chip { margin-top: 6px; }

/* ---- Quote (V5 flow, green wash) ---- */
.editorial { max-width: var(--page-max); margin: 0 auto; padding: 64px 32px 96px; }
.editorial-card { border-radius: var(--r); overflow: hidden; position: relative; min-height: 400px; display: flex; align-items: flex-end; background-image: var(--organic-overlay), url("/v7/assets/editorial-golden.jpg"); background-size: cover, cover; background-position: center, center 38%; }
.editorial-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(to top, rgba(12,18,10,.68), rgba(12,18,10,0)); }
.editorial-card .quote { position: relative; z-index: 1; padding: 40px 44px 34px; max-width: 640px; color: #fff; }
.editorial-card blockquote { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 14px; text-wrap: balance; }
.editorial-card cite { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }

/* ---- Closing with green halo (V6 effect) ---- */
.closing { position: relative; text-align: center; padding: 104px 32px 116px; overflow: hidden; }
.closing .halo::before { width: 520px; height: 320px; }
.closing h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(50px, 7vw, 96px); line-height: 1.0; letter-spacing: -0.025em; margin: 0 0 28px; text-wrap: balance; }
.closing .cta-row { position: relative; display: flex; justify-content: center; gap: 12px; }

/* ---- Footer (white/grey) ---- */
.footer { background: var(--mist); border-top: 1px solid var(--hairline); }
.footer-inner { max-width: var(--page-max); margin: 0 auto; padding: 60px 40px 40px; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; }
.footer .brand { color: var(--text); margin-bottom: 16px; }
.footer .brand span { color: var(--text); }
.footer .tgl { color: var(--text-2); font-size: 13px; max-width: 30ch; margin: 0; }
.footer h4 { font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer li a { color: var(--text-2); text-decoration: none; font-size: 13px; }
.footer li a:hover { color: var(--text); }
.footer-base { max-width: var(--page-max); margin: 0 auto; padding: 0 40px 34px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

@media (max-width: 920px) {
  .nav-links { display: none; }
  .problem-grid { grid-template-columns: 1fr; }
  .p-card { border-left: none; border-top: 1px solid var(--dark-line); }
  .p-card:first-child { border-top: none; }
  .jobs-head, .control-inner { grid-template-columns: 1fr; gap: 32px; }
  .stat-cols { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .job-row.hl .mini { display: none; }
}