:root {
      color-scheme: light;
      --mote-ink: #080F12;
      --mote-green: #418727;
      --mote-white: #FFFFFF;
      --mote-soft-white: #F2F3F1;
      --ink: var(--mote-ink);
      --panel: var(--mote-white);
      --panel-2: var(--mote-white);
      --paper: var(--mote-ink);
      --muted: #4d595e;
      --line: #dce1df;
      --acid: var(--mote-green);
      --acid-soft: #e9efe5;
      --white: var(--mote-ink);
      --max: 1180px;
      --radius: 1rem;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
    body {
      margin: 0;
      background: var(--mote-soft-white);
      color: var(--paper);
      font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 1rem;
      line-height: 1.65;
    }

    a { color: inherit; }
    strong { color: var(--white); }
    ::selection { background: var(--acid); color: var(--ink); }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 10;
      border-bottom: 1px solid rgba(11,15,13,.28);
      background: rgba(65,135,39,.94);
      backdrop-filter: blur(14px);
    }

    .topbar-inner {
      width: min(var(--max), calc(100% - 2rem));
      min-height: 4rem;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      text-decoration: none;
      color: var(--ink);
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .brand-logo {
      display: block;
      width: 7.4rem;
      height: 2rem;
      object-fit: contain;
      object-position: left center;
    }

    .quick-nav {
      display: flex;
      gap: .25rem;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .quick-nav::-webkit-scrollbar { display: none; }
    .quick-nav a {
      padding: .45rem .7rem;
      border-radius: 999px;
      color: rgba(11,15,13,.72);
      text-decoration: none;
      font-size: .82rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .quick-nav a:hover,
    .quick-nav a:focus-visible,
    .quick-nav a.active {
      color: var(--paper);
      background: var(--ink);
      outline: none;
    }

    main {
      width: min(var(--max), calc(100% - 2rem));
      margin: 0 auto;
    }

    .hero {
      min-height: calc(100vh - 4rem);
      padding: clamp(3rem, 8vw, 7rem) 0 4rem;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
      gap: clamp(2rem, 6vw, 6rem);
      align-items: center;
    }

    .eyebrow {
      margin: 0 0 1rem;
      color: var(--acid);
      font-size: .78rem;
      font-weight: 850;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    h1, h2, h3 {
      margin-top: 0;
      color: var(--white);
      line-height: 1.02;
      letter-spacing: -.045em;
    }

    h1 {
      max-width: 9ch;
      margin-bottom: 1.25rem;
      font-size: clamp(3.6rem, 9vw, 7.7rem);
      font-weight: 900;
    }

    h1 span { color: var(--acid); }
    h2 { margin-bottom: 1rem; font-size: clamp(2.1rem, 5vw, 4.2rem); }
    h3 { font-size: 1.35rem; letter-spacing: -.02em; }

    .lede {
      max-width: 42rem;
      margin: 0;
      color: #c5cec2;
      font-size: clamp(1.08rem, 2vw, 1.28rem);
    }

    .step-stack {
      border: 1px solid var(--line);
      background: rgba(18,24,20,.84);
      box-shadow: 0 2rem 5rem rgba(0,0,0,.32);
    }

    .step {
      position: relative;
      padding: 1.4rem 1.5rem 1.5rem 5rem;
      min-height: 7.4rem;
    }
    .step + .step { border-top: 1px solid var(--line); }
    .step-number {
      position: absolute;
      left: 1.4rem;
      top: 1.55rem;
      width: 2.35rem;
      height: 2.35rem;
      display: grid;
      place-items: center;
      border: 1px solid var(--acid);
      color: var(--acid);
      font-weight: 900;
    }
    .step small {
      display: block;
      color: var(--muted);
      font-weight: 750;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .step b {
      display: block;
      margin: .2rem 0;
      color: var(--white);
      font-size: 1.45rem;
    }
    .step p { margin: 0; color: var(--muted); }

    .flip-band {
      padding: .9rem 1.4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      background: var(--acid);
      color: var(--ink);
      font-weight: 850;
    }
    .flip-band span:last-child { font-size: 1.25rem; }

    .section {
      padding: clamp(4.5rem, 9vw, 8rem) 0;
      border-top: 1px solid var(--line);
    }

    .section-grid {
      display: grid;
      grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr);
      gap: clamp(2rem, 7vw, 7rem);
    }

    .section-label {
      position: sticky;
      top: 6rem;
      align-self: start;
    }
    .section-label .index {
      display: block;
      margin-bottom: 1rem;
      color: var(--acid);
      font-size: .8rem;
      font-weight: 850;
      letter-spacing: .15em;
    }
    .section-label h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
    .section-label p { color: var(--muted); }

    .prose { max-width: 48rem; }
    .prose > p:first-child { margin-top: 0; }
    .prose p { color: #c1cbc0; }
    .schedule-grid + .prose,
    .cycle + .prose { margin-top: 1.5rem; }
    .prose .pull {
      margin: 2rem 0;
      padding: 1.2rem 1.4rem;
      border-left: 4px solid var(--acid);
      background: var(--acid-soft);
      color: var(--white);
      font-size: 1.15rem;
      font-weight: 750;
    }

    .schedule-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    .schedule-card {
      padding: clamp(1.3rem, 3vw, 2rem);
      border: 1px solid var(--line);
      background: var(--panel);
    }
    .schedule-card.primary {
      border-color: rgba(65,135,39,.7);
      background: linear-gradient(145deg, rgba(65,135,39,.1), var(--panel) 52%);
    }
    .kicker {
      color: var(--acid);
      font-size: .75rem;
      font-weight: 850;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .timeline {
      margin: 1.5rem 0 0;
      padding: 0;
      list-style: none;
    }
    .timeline li {
      display: grid;
      grid-template-columns: 4.8rem 1fr;
      gap: 1rem;
      padding: .8rem 0;
      border-top: 1px solid var(--line);
    }
    .timeline time {
      color: var(--acid);
      font-weight: 850;
    }

    .cycle {
      margin-top: 1.5rem;
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: .65rem;
    }
    .cycle-node {
      min-height: 6.5rem;
      padding: 1rem;
      display: grid;
      align-content: center;
      border: 1px solid var(--line);
      background: var(--panel-2);
    }
    .cycle-node small { color: var(--muted); }
    .cycle-arrow { color: var(--acid); font-size: 1.3rem; }

    .product-grid,
    .rules {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }
    .product,
    .rule {
      padding: 1.5rem;
      border: 1px solid var(--line);
      background: var(--panel);
    }
    .product .number {
      color: var(--acid);
      font-size: .8rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .product h3 { margin: .35rem 0 1rem; font-size: 2rem; }
    .product p:last-child, .rule p:last-child { margin-bottom: 0; }
    .rule h3 { margin-bottom: .65rem; }
    .rule p { color: var(--muted); }
    .rule.wide { grid-column: 1 / -1; }
    .rule.acid {
      background: var(--acid);
      border-color: var(--acid);
      color: var(--ink);
    }
    .rule.acid h3,
    .rule.acid p,
    .rule.acid strong { color: var(--ink); }

    .mother {
      position: relative;
      overflow: hidden;
      padding: clamp(1.5rem, 4vw, 3rem);
      border: 1px solid var(--line);
      background: var(--panel);
    }
    .mother::after {
      content: "01 / 02";
      position: absolute;
      right: -1rem;
      bottom: -2.4rem;
      color: rgba(65,135,39,.06);
      font-size: clamp(5rem, 14vw, 11rem);
      font-weight: 950;
      letter-spacing: -.08em;
      pointer-events: none;
    }
    .mother p, .mother ol { position: relative; z-index: 1; }
    .mother ol { padding-left: 1.25rem; }
    .mother li { padding: .35rem 0; }

    .faq-list { border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }
    summary {
      padding: 1.25rem 3rem 1.25rem 0;
      cursor: pointer;
      color: var(--white);
      font-size: 1.05rem;
      font-weight: 800;
      list-style: none;
      position: relative;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+";
      position: absolute;
      right: .35rem;
      top: 1rem;
      color: var(--acid);
      font-size: 1.5rem;
      font-weight: 500;
    }
    details[open] summary::after { content: "−"; }
    details p { margin: -.35rem 3rem 1.4rem 0; color: var(--muted); }

    .limits {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }
    .limit {
      padding: 1.25rem;
      border-top: 3px solid var(--acid);
      background: var(--panel);
    }

    footer {
      width: min(var(--max), calc(100% - 2rem));
      margin: 0 auto;
      padding: 2rem 0 3rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .86rem;
    }

    @media (max-width: 860px) {
      .hero { min-height: auto; grid-template-columns: 1fr; }
      .section-grid { grid-template-columns: 1fr; }
      .section-label { position: static; }
      .section-label p { max-width: 38rem; }
      .quick-nav { max-width: 67vw; }
    }

    @media (max-width: 640px) {
      .topbar-inner { width: min(100% - 1rem, var(--max)); }
      .brand span:last-child { display: none; }
      main, footer { width: min(100% - 1.25rem, var(--max)); }
      h1 { font-size: clamp(3.2rem, 18vw, 5rem); }
      .hero { padding-top: 3.5rem; }
      .schedule-grid,
      .product-grid,
      .rules,
      .limits { grid-template-columns: 1fr; }
      .cycle { grid-template-columns: 1fr; }
      .cycle-arrow { transform: rotate(90deg); justify-self: center; }
      .quick-nav a { font-size: .75rem; padding-inline: .6rem; }
      .step { padding-left: 4.5rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }

    @media print {
      :root { color-scheme: light; }
      body { background: white; color: #111; }
      .topbar { display: none; }
      main, footer { width: 100%; }
      .hero { min-height: auto; padding: 2rem 0; grid-template-columns: 1fr 1fr; }
      .section { padding: 2rem 0; break-inside: avoid; }
      .section-label { position: static; }
      .step-stack, .schedule-card, .product, .rule, .mother, .limit { box-shadow: none; }
    }

    /* Mote brand: light reading surfaces, dark hero, green accents. */
    .topbar { background: rgba(242,243,241,.97); border-color: var(--line); }
    .quick-nav a { color: #080F12; }
    .quick-nav a:hover, .quick-nav a:focus-visible, .quick-nav a.active { background: #418727; color: #FFFFFF; }
    .brand-logo { width: 9rem; height: 3.4rem; }
    .hero {
      position: relative; isolation: isolate; min-height: auto;
      display: block; padding: clamp(3rem,7vw,5rem) 0;
      color: #FFFFFF;
    }
    .hero::before { content: ""; position: absolute; inset: 0 calc((min(1180px, 100vw - 2rem) - 100vw)/2); background: #080F12; z-index: -1; }
    h1 { max-width: 24ch; font-size: clamp(2rem,4.7vw,4.2rem); line-height: 1.12; overflow-wrap: anywhere; }
    .hero h1, .hero h1 span { color: #FFFFFF; }
    .hero .eyebrow { display: inline-block; background: #418727; color: #FFFFFF; padding: .4rem .8rem; }
    .lede { color: #F2F3F1; max-width: 52rem; }
    .step-stack { display: none; }
    .section { padding: clamp(3rem,6vw,5rem) 0; }
    .prose p { color: #344249; }
    .prose .pull { color: #080F12; }
    .schedule-card, .product, .rule, .mother, .limit, .cycle-node { border-radius: .65rem; }
    .schedule-card.primary { background: #FFFFFF; border-color: #dce1df; }
    .rule.acid { background: #418727; }
    .rule.acid h3, .rule.acid p, .rule.acid strong { color: #FFFFFF; }
    .mother::after { color: rgba(65,135,39,.06); }
    .footer-brand { display: flex; justify-content: center; align-items: center; gap: 2rem; padding: 1rem 0 2rem; }
    .footer-brand .footer-logo { width: 10rem; height: auto; }
    .footer-brand .footer-tagline { width: min(22rem,55%); height: auto; }
    @media (max-width:640px) {
      .topbar-inner { flex-wrap: wrap; justify-content: center; padding: .35rem 0; }
      .quick-nav { max-width: 100%; width: 100%; justify-content: center; }
      .hero::before { inset-inline: -.625rem; }
      .footer-brand { flex-direction: column; gap: .25rem; }
      .footer-brand .footer-tagline { width: min(22rem,100%); }
    }
    @media print { .hero::before { display:none; } .hero h1,.hero h1 span,.lede { color:#080F12; } }

/* Reusable site-wide surface themes and components */
.theme-light { background: #F2F3F1; color: #080F12; }
.theme-dark { background: #080F12; color: #FFFFFF; }
.theme-green { background: #418727; color: #FFFFFF; }
.theme-dark :is(h1,h2,h3,strong), .theme-green :is(h1,h2,h3,strong) { color: #FFFFFF; }

.site-shell { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; }
.site-kicker {
  display: inline-flex; align-items: center; min-height: 2rem; padding: .35rem .75rem;
  background: #418727; color: #FFFFFF; font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.site-hero { padding: clamp(3rem, 7vw, 6rem) 0; }
.site-hero__title { max-width: 22ch; font-size: clamp(2.4rem, 6vw, 5.5rem); }
.site-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.site-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.site-card {
  padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid #dce1df;
  border-radius: .65rem; background: #FFFFFF; color: #080F12;
}
.site-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: .7rem 1.1rem; border: 1px solid #418727; border-radius: 999px;
  background: #418727; color: #FFFFFF; font-weight: 800; text-decoration: none;
}
.site-button--outline { background: transparent; color: #418727; }
.site-footer {
  width: min(var(--max), calc(100% - 2rem)); margin-inline: auto;
  padding: 2rem 0 3rem; border-top: 1px solid #dce1df;
}

/* Minimal launch page built from the same theme */
.site-coming-soon {
  min-height: 100vh; display: grid; place-items: center; overflow: hidden;
  background: #F2F3F1; color: #080F12;
}
.site-coming-soon main { width: min(42rem, calc(100% - 3rem)); padding: 3rem 0; text-align: center; }
.site-coming-soon main img { display: block; width: min(34rem, 88vw); height: auto; margin: 0 auto 2.25rem; }
.site-coming-soon main p {
  margin: 0; color: #418727; font-size: clamp(.8rem, 2vw, .95rem);
  font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .site-shell, .site-footer { width: min(100% - 1.25rem, var(--max)); }
  .site-grid { grid-template-columns: 1fr; }
}
