/* grammar.css: the home page visual grammar, ported from the inline <style> block in src/index.njk
   for the editorial routes (use cases, comparisons, insights, rooms). Loads after v2.css, before editorial.css.

   The home page keeps its own inline copy until index.njk is switched to this file (see 11ty/AGENTS.md).
   Until then every edit to a rule that exists in both places must be made in both. Deliberate differences
   from the inline block, per redesign/direction-dust-structure.md section 1.1:
   - accessibility overrides are baked in (--mut #66665f, placeholder and message colors, no body.site-a11y)
   - repeated declarations are collapsed to their final values; #63635f and #6b6b67 become #66665f
   - scroll-margin-top applies to every [id]
   - .uu-g (gold swash), h1.display.d2 and .d3, .hero.hero-split, .v3media.art, .tint-brick, .tint-cream,
     .v3steps.three and .four are added
   - #problem .pve-* is renamed to the unscoped .demo family; .mcard* is not ported
   - .rv, .stag, .herotint, the who-list track, the learn accordion and the teammate grid internals are not ported
   - numerals and chip labels sit at the 13px type floor */

/* 1. Tokens */
:root { --olive: #6f7826; --olive-ink: #5d6420; --brick: #a24f4f; --gold: #ad9245; --mut: #66665f; --tint-olive: #f4f5ec; --tint-gold: #f7f3e8; --tint-brick: #f8f1ef; --cream: #f4f2e7; }

/* 2. Nav */
.navclear { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: background 0.3s ease, box-shadow 0.3s ease; }
.navclear.scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 72px; }

/* 3. Hero */
.hero { margin-top: -58px; }
.hero .sub { margin-top: 20px; }
.hero .cta-row { margin-top: 20px; }
.hero .fine { margin-top: 12px; }
.hero .bg::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.38); z-index: 1; }
.hero .bg img { object-position: 50% 0%; }
.hero .bg::after { background: linear-gradient(to bottom, rgba(255,255,255,0) 72%, #fff 100%); }
.hero .display, .hero .sub, .hero .cta-row, .hero .fine, .hero .filmpill, .hero .eyebrow { animation: none; opacity: 1; transform: none; }
.hero .eyebrow, .hero .fine { color: #66665f; }
.filmpill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; font-family: inherit; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--ink); background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 99px; padding: 8px 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.2s; }
.filmpill:hover { background: #fff; }
.showtabs { display: flex; gap: 2px; width: fit-content; margin: 0 auto; background: rgba(0, 0, 0, 0.07); border-radius: 99px; padding: 4px; }
.showtabs button { font-size: 14.5px; font-weight: 500; padding: 8px 24px; border-radius: 99px; color: #4a4a46; cursor: pointer; border: 0; background: transparent; font-family: inherit; }
.showtabs button[data-on="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.showcap { font-size: 13.5px; color: #66665f; text-align: center; margin-top: 14px; }
.hero.hero-split { text-align: left; padding: 32px 24px 0; }
.hero-split .v3wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: start; }
.hero.hero-split h1.display { white-space: normal; max-width: 16ch; margin: 0; }
.hero-split .sub { margin-left: 0; max-width: 46ch; }
.hero-split .cta-row { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero-split .v3wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-split .demo { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 700px) {
  .hero { padding-top: 116px !important; }
  .hero .cta-row { flex-direction: column; align-items: center; gap: 12px; }
  .hero-split .cta-row { align-items: flex-start; }
  .btn, .tlink { white-space: nowrap; }
}

/* 4. Display h1 and swashes */
.hero h1.display { white-space: nowrap; font-size: clamp(30px, 4.9vw, 74px); max-width: none; margin-left: 0; margin-right: 0; }
.hero h1.display.d2 { white-space: normal; font-size: clamp(32px, 4.6vw, 66px); letter-spacing: -0.045em; line-height: 1.02; max-width: 18ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.hero h1.display.d3 { white-space: normal; font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.045em; line-height: 1.04; max-width: 16ch; margin-left: auto; margin-right: auto; }
.hero.hero-split h1.display.d3 { margin-left: 0; margin-right: 0; }
.hero .display .uo, .hero .display .ub { position: relative; white-space: nowrap; }
.hero .display .uo::after, .hero .display .ub::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 0.04em; height: 0.09em; border-radius: 99px; opacity: 0.85;
}
.hero .display .uo::after { background: var(--olive); }
.hero .display .ub::after { background: var(--brick); }
.uu { position: relative; white-space: nowrap; }
.uu::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0.02em; height: 0.11em; border-radius: 99px; background: var(--olive); opacity: 0.85; }
.uu.uu-r::after { background: var(--brick); }
.uu.uu-g::after { background: var(--gold); }
@media (max-width: 700px) {
  .hero h1.display, .hero h1.display.d2, .hero h1.display.d3 { white-space: normal; font-size: 36px; }
  .uu { white-space: normal; text-decoration: underline; text-decoration-color: var(--olive); text-decoration-thickness: 3px; text-underline-offset: 5px; }
  .uu.uu-r { text-decoration-color: var(--brick); }
  .uu.uu-g { text-decoration-color: var(--gold); }
  .uu::after { display: none; }
}

/* 5. CTA: text link hover and the one-field waitlist form */
.tlink:hover { color: var(--brick); }
.wl { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin-top: 26px; flex-wrap: wrap; }
.wl-in { font: inherit; font-size: 15px; padding: 12px 20px; border-radius: 99px; border: 1px solid rgba(0, 0, 0, 0.16); background: #fff; min-width: 210px; outline: none; }
.wl-in::placeholder { color: #66665f; opacity: 1; }
.wl-in:focus { border-color: var(--ink); }
.wl button { border: 0; cursor: pointer; font-family: inherit; }
.wl button[disabled] { opacity: 0.6; cursor: default; }
.wl-msg { text-align: center; font-size: 14.5px; margin-top: 14px; color: #66665f; font-weight: 500; min-height: 1em; }
.wl-msg.err { color: var(--brick); }
@media (max-width: 700px) {
  .wl { flex-direction: column; align-items: stretch; max-width: 340px; margin-left: auto; margin-right: auto; }
  .wl-in { min-width: 0; text-align: center; }
  .wl .btn { justify-content: center; text-align: center; }
}

/* 6. Section rhythm */
.v3sec { padding: 110px 24px 0; }
.v3k { text-align: center; font-size: 13px; font-weight: 500; color: var(--olive-ink); margin-bottom: 12px; }
.v3title { text-align: center; font-size: clamp(27px, 3.3vw, 35px); font-weight: 500; letter-spacing: -0.021em; line-height: 1.14; max-width: 720px; margin: 0 auto; }
.v3sub { text-align: center; font-size: 16px; color: var(--gray); max-width: 640px; margin: 14px auto 0; line-height: 1.55; }
.v3wrap { max-width: 1180px; margin: 0 auto; }
.v3cap { text-align: center; font-size: 13px; color: #66665f; margin-top: 14px; max-width: 72ch; margin-left: auto; margin-right: auto; }
.v3fine { text-align: center; font-size: 13px; color: #66665f; margin-top: 90px; padding: 0 24px; }
@media (max-width: 700px) {
  .v3sec { padding: 72px 18px 0; }
}

/* 7. Product frame */
.bframe { border: 1px solid rgba(0, 0, 0, 0.10); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.10); }
.bbar { height: 42px; background: #f6f6f4; border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; gap: 8px; padding: 0 16px; }
.bbar i { width: 11px; height: 11px; border-radius: 99px; }
.bbar i:nth-child(1) { background: #ff5f57; } .bbar i:nth-child(2) { background: #febc2e; } .bbar i:nth-child(3) { background: #28c840; }
.bbar .url { margin: 0 auto; background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 8px; font-size: 13px; color: var(--gray); padding: 5px 46px; }
.bframe video, .bframe img { width: 100%; display: block; }
.bframe img { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* 8. Media card: gray plate for crops, .art for edge-to-edge illustration, tint-* for a colored plate */
.v3media { max-width: 1000px; margin: 44px auto 0; background: #f4f4f3; border-radius: 26px; padding: clamp(20px, 3.6vw, 42px); }
.v3media img { width: 100%; border-radius: 12px; box-shadow: 0 16px 54px rgba(20, 10, 40, 0.13); display: block; }
.v3media.art { padding: 0; overflow: hidden; background: #fff; }
.v3media.art img { box-shadow: none; border-radius: 26px; }
@media (max-width: 700px) {
  .v3media { border-radius: 18px; }
  .v3media.art img { border-radius: 18px; }
}

/* 9. Carousel (ported for completeness; not used by the editorial routes) */
.v3car { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 44px; padding: 4px 24px 8px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); cursor: grab; }
.v3car::-webkit-scrollbar { display: none; }
.v3car.drag { cursor: grabbing; scroll-snap-type: none; }
.v3card { flex: 0 0 min(880px, 94vw); scroll-snap-align: center; background: #f4f4f3; border-radius: 26px; overflow: hidden; }
.v3card .txt { padding: 24px 26px 0; }
.v3card h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.v3card p { font-size: 14.5px; color: var(--gray); margin-top: 5px; }
.v3card .med { margin-top: 18px; padding: 0 26px; }
.v3card .med img { width: 100%; display: block; border-radius: 12px 12px 0 0; box-shadow: 0 -1px 0 rgba(0,0,0,0.04), 0 14px 44px rgba(20, 10, 40, 0.13); }
.v3nav { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.v3nav button { width: 40px; height: 40px; border-radius: 99px; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; font-size: 16px; color: var(--ink); cursor: pointer; }
.v3nav button:hover { background: #f4f4f3; }
.v3dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.v3dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(0, 0, 0, 0.16); transition: background 0.25s, transform 0.25s; }
.v3dots i.on { background: var(--ink); transform: scale(1.25); }
.grad { background: linear-gradient(148deg, #a292ec 0%, #c9bef4 38%, #eae4fb 72%, #f9f7fe 100%) !important; }
.grad h3, .grad b { color: #1d1440; }
.grad p { color: #3a2f63; }
@media (max-width: 700px) {
  .v3card .txt { padding: 20px 20px 0; }
  .v3card .med { padding: 0 20px; }
}

/* 10. Tinted cards */
.v3cells2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1000px; margin: 44px auto 0; }
@media (max-width: 760px) { .v3cells2 { grid-template-columns: 1fr; } }
.v3boxcard { background: #f4f4f3; border-radius: 24px; padding: 28px 30px; }
.v3boxcard h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.v3boxcard p { font-size: 15px; color: var(--gray); margin-top: 8px; line-height: 1.55; }
.v3boxcard .cardimg { margin-top: 20px; }
.tint-olive { background: #f4f5ec !important; }
.tint-gold { background: #f7f3e8 !important; }
.tint-brick { background: #f8f1ef !important; }
.tint-cream { background: #f4f2e7 !important; }

/* 11. Three cells */
.v3grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1000px; margin: 44px auto 0; }
@media (max-width: 860px) { .v3grid { grid-template-columns: 1fr; } }
.v3cell { background: #f4f5ec; border-radius: 20px; padding: 24px 26px; font-size: 16.5px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; }
.v3cell span { display: block; font-size: 13px; font-weight: 500; color: var(--olive-ink); margin-bottom: 8px; }

/* 12. Steps */
.v3steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 1180px; margin: 44px auto 0; }
.v3steps.three { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }
.v3steps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .v3steps, .v3steps.three, .v3steps.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .v3steps, .v3steps.three, .v3steps.four { grid-template-columns: 1fr; } }
.v3step { background: #f4f4f3; border-radius: 20px; padding: 22px 22px 20px; }
.v3step .n { font-size: 13px; font-weight: 500; color: var(--brick); font-variant-numeric: tabular-nums; }
.v3step b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.015em; margin-top: 8px; }
.v3step p { font-size: 13.5px; color: var(--gray); margin-top: 6px; line-height: 1.5; }

/* 13. Split layouts (grids only) */
.whosplit { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; text-align: left; }
@media (max-width: 900px) { .whosplit { grid-template-columns: 1fr; gap: 30px; } }
.learnwrap { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 48px; align-items: center; margin-top: 48px; text-align: left; }
@media (max-width: 900px) { .learnwrap { grid-template-columns: 1fr; gap: 26px; } }

/* 14. Teammates */
.mates2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1000px; margin: 44px auto 0; }
@media (max-width: 860px) { .mates2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .mates2 { grid-template-columns: 1fr; } }
.mate2 { background: #f4f4f3; border-radius: 20px; padding: 20px 22px; display: flex; gap: 14px; align-items: center; }
.mate2 img { width: 72px; height: 72px; border-radius: 99px; flex-shrink: 0; }
.mate2 b { display: block; font-size: 15.5px; font-weight: 500; letter-spacing: -0.01em; color: #7c3a3a; }
.mate2 p { font-size: 13.5px; color: var(--gray); margin-top: 2px; }
.mate2 .mate-icon { width: 40px; height: 40px; padding: 6px; object-fit: contain; border-radius: 12px; background: #fff; }
@media (max-width: 700px) { .mate2 img { width: 56px; height: 56px; } }

/* 15. Demo: the chat-bubble room (the home #problem .pve-* pattern, unscoped) */
.demo { background: #fff; border: 1px solid #ececea; border-radius: 24px; padding: 30px 34px; box-shadow: 0 16px 54px rgba(20, 10, 40, 0.08); text-align: left; }
.v3sec > .demo { max-width: 880px; margin: 44px auto 0; }
.demo-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; margin-bottom: 18px; }
.demo-head img { width: 22px; height: auto; }
.demo-head .quiet { margin-left: auto; font-weight: 400; color: #66665f; font-size: 13px; }
.demo-who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #66665f; margin: 0 0 6px; }
.demo-who img { width: 26px; height: 26px; border-radius: 8px; }
/* People are initials in a tinted circle, never portrait art. */
.demo-who .demo-av { width: 26px; height: 26px; flex-shrink: 0; border-radius: 99px; background: var(--tint-olive); color: var(--olive-ink); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.bframe picture { display: block; }
.demo-msg p { margin: 0; display: inline-block; background: #f4f4f3; border-radius: 16px 16px 16px 4px; padding: 14px 20px; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.demo-answer { margin-top: 18px; background: #f4f2e7; border-radius: 18px; padding: 22px 26px; }
.demo-answer .lead { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.demo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.demo-chips .demo-chips-lab { border: 0; background: none; padding: 0 2px 0 0; font-size: 12.5px; color: #66665f; }
.demo-chips a, .demo-chips span { border: 1px solid #e6e6e2; border-radius: 99px; padding: 4px 10px; font-size: 13px; color: #66665f; background: #fff; }
.demo-gate { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ececea; font-size: 14.5px; }
.demo-gate img { width: 28px; height: 28px; }
.demo-gate b { font-weight: 500; color: var(--brick); }
.demo-gate .quiet { color: #66665f; }
.demo.sm { padding: 22px 24px; border-radius: 20px; box-shadow: none; }
.demo.sm .demo-msg p { font-size: 15.5px; padding: 12px 16px; }
.demo.sm .demo-answer { padding: 16px 18px; margin-top: 12px; }
.demo.sm .demo-answer .lead { font-size: 15px; }
@media (max-width: 700px) {
  .demo { padding: 20px 18px; }
  .demo-answer { padding: 18px 16px; }
  .demo-msg p { font-size: 15.5px; }
}

/* 16. Peoplebox */
.peoplebox { max-width: 1040px; margin: 40px auto 0; background: #f4f4f3; border-radius: 24px; padding: 40px 44px; text-align: center; font-size: clamp(16px, 1.75vw, 23px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; }
.peoplebox p { white-space: nowrap; }
.peoplebox .pq { color: #66665f; font-weight: 400; margin-top: 14px; font-size: clamp(14.5px, 1.6vw, 21px); }
@media (max-width: 700px) {
  .peoplebox { padding: 30px 26px; }
  .peoplebox p { white-space: normal; }
}

/* 17. Statements */
.v3chant { text-align: center; font-size: clamp(19px, 2.2vw, 25px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; max-width: 46ch; margin: 46px auto 0; }
.v3chant .quiet { color: #66665f; font-weight: 400; }
.v3punch { text-align: center; font-size: clamp(20px, 2.3vw, 26px); font-weight: 500; letter-spacing: -0.02em; max-width: 44ch; margin: 44px auto 0; line-height: 1.4; }
.v3punch .quiet { color: #66665f; font-weight: 400; }
.v3endline { text-align: center; font-size: clamp(20px, 2.4vw, 27px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-top: 90px; padding: 0 24px; }

/* 18. CTA band */
.v3cta { max-width: 1180px; margin: 120px auto 0; background: #f4f4f3; border-radius: 30px; padding: 90px 24px; text-align: center; }
.v3cta .fine { color: #66665f; }

/* 19. Footer */
footer.v3f { margin-top: 60px; }

/* 20. Motion: cards are static; the film lightbox */
.v3card, .v3cell, .v3step, .v3boxcard, .mate2 { transition: none; }
.v3card:hover, .v3boxcard:hover, .v3cell:hover, .v3step:hover, .mate2:hover { transform: none; box-shadow: none; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 8, 6, 0.82); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 4vw; }
.lightbox[hidden] { display: none; }
.lb-inner { position: relative; width: min(1080px, 94vw); }
.lb-inner video { width: 100%; border-radius: 16px; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); display: block; }
.lb-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .navclear, .bframe img, .filmpill, .v3dots i { transition: none; }
}