:root {
  --forest: #173f32;
  --deep-forest: #0b2921;
  --cream: #f8f1df;
  --paper: #fffaf0;
  --terra: #cd684d;
  --marigold: #f4bd3f;
  --sage: #b8c9a7;
  --ink: #183129;
  --line: rgba(24, 49, 41, .17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .75rem 1rem; background: var(--marigold); color: var(--ink); }
.skip-link:focus { top: 1rem; }

.floating-header {
  position: absolute;
  z-index: 10;
  top: 1.4rem;
  left: 50%;
  width: min(1180px, calc(100% - 2rem));
  min-height: 70px;
  padding: .6rem .7rem .6rem 1.2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 250, 240, .94);
  box-shadow: 0 14px 50px rgba(11, 41, 33, .14);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; width: max-content; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-orbit { position: relative; width: 2rem; height: 2rem; border: 1px solid var(--forest); border-radius: 50%; }
.brand-orbit i { position: absolute; width: .42rem; height: .42rem; background: var(--terra); border-radius: 50%; }
.brand-orbit i:nth-child(1) { top: -.2rem; left: .75rem; }
.brand-orbit i:nth-child(2) { bottom: .12rem; left: -.05rem; }
.brand-orbit i:nth-child(3) { bottom: .12rem; right: -.05rem; }
.floating-header nav { display: flex; gap: 1.7rem; }
.floating-header nav a { color: #51675f; font-size: .76rem; font-weight: 700; text-decoration: none; }
.nav-action { justify-self: end; padding: .75rem 1.15rem; border-radius: 999px; background: var(--forest); color: white; font-size: .75rem; font-weight: 800; text-decoration: none; }
.menu-button { display: none; }

.hero {
  min-height: 880px;
  padding: 10rem max(1.25rem, calc((100vw - 1300px)/2)) 6rem;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 4rem;
  align-items: center;
  overflow: hidden;
  background: var(--cream);
}
.leaf-label, .section-label { margin: 0 0 1.4rem; color: var(--terra); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.leaf-label span { margin-right: .4rem; color: var(--marigold); }
.hero h1 { margin: 0; font: 400 clamp(4.2rem, 8vw, 8rem)/.86 Georgia, serif; letter-spacing: -.075em; }
.hero h1 em { color: var(--terra); font-style: italic; }
.hero-copy > p:not(.leaf-label) { max-width: 570px; margin: 2rem 0; color: #50675f; font-size: 1.08rem; }
.hero-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.round-button { padding: 1rem 1.2rem; border-radius: 999px; background: var(--forest); color: white; font-size: .82rem; font-weight: 800; text-decoration: none; }
.under-link { color: var(--forest); font-size: .82rem; font-weight: 800; text-underline-offset: .35rem; }

.circle-stage { position: relative; width: min(100%, 620px); aspect-ratio: 1; margin: auto; border: 1px dashed rgba(23,63,50,.35); border-radius: 50%; background: radial-gradient(circle, rgba(244,189,63,.18), transparent 55%); }
.circle-stage::before, .circle-stage::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(23,63,50,.12); border-radius: 50%; }
.circle-stage::after { inset: 26%; background: var(--paper); box-shadow: 0 25px 60px rgba(23,63,50,.12); }
.member-bubble { position: absolute; z-index: 2; display: grid; justify-items: center; gap: .25rem; transition: transform .35s ease; }
.member-bubble span { width: 4rem; height: 4rem; display: grid; place-items: center; border: 5px solid var(--paper); border-radius: 50%; background: var(--sage); color: var(--forest); box-shadow: 0 8px 20px rgba(23,63,50,.12); font-size: .75rem; }
.member-bubble small { font-size: .68rem; font-weight: 800; }
.member-bubble.active span { background: var(--marigold); transform: scale(1.15); }
.bubble-one { left: 43%; top: -3%; }.bubble-two { right: 1%; top: 27%; }.bubble-three { right: 10%; bottom: 7%; }.bubble-four { left: 14%; bottom: 4%; }.bubble-five { left: -2%; top: 29%; }
.payout-core { position: absolute; z-index: 3; inset: 32%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.payout-core p { margin: 0; color: var(--terra); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.payout-core strong { margin-top: .35rem; font: 400 clamp(1.8rem, 4vw, 3rem) Georgia, serif; }
.payout-core span { font-weight: 800; }
.payout-core small { color: #6d8179; }
.next-turn { position: absolute; z-index: 4; left: 50%; bottom: 4%; padding: .8rem 1rem; transform: translateX(-50%); border: 0; border-radius: 999px; background: var(--terra); color: white; font-size: .78rem; font-weight: 800; cursor: pointer; }
.circle-status { position: absolute; left: 50%; top: calc(100% + 1rem); width: 90%; margin: 0; transform: translateX(-50%); color: #657971; text-align: center; font-size: .78rem; }

.community-note { padding: 5rem max(1.25rem, calc((100vw - 1000px)/2)); background: var(--forest); color: white; text-align: center; }
.community-note p { margin: 0; color: var(--sage); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.community-note blockquote { margin: 1.5rem 0; font: italic 400 clamp(2.2rem, 5vw, 4.5rem)/1.08 Georgia, serif; }
.community-note span { color: var(--marigold); letter-spacing: .65rem; }

.how-section { padding: 8rem max(1.25rem, calc((100vw - 1280px)/2)); background: var(--paper); }
.section-intro { display: grid; grid-template-columns: .6fr 1.4fr; gap: 2rem; align-items: start; }
.section-intro h2 { max-width: 900px; margin: 0; font: 400 clamp(3rem, 5vw, 5.6rem)/.98 Georgia, serif; letter-spacing: -.055em; }
.steps-list { margin: 5rem 0 0; padding: 0; list-style: none; }
.steps-list li { padding: 2rem 0; display: grid; grid-template-columns: 100px 1fr auto; gap: 2rem; align-items: center; border-top: 1px solid var(--line); }
.steps-list li > span { color: var(--terra); font: .72rem Consolas, monospace; }
.steps-list h3 { margin: 0 0 .4rem; font: 400 1.55rem Georgia, serif; }
.steps-list p { max-width: 680px; margin: 0; color: #60736c; }
.steps-list i { width: 5rem; height: 5rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--marigold); font: normal 2.4rem Georgia, serif; }

.tools-section { padding: 1rem; display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 1rem; background: var(--cream); }
.tool-card { min-height: 560px; padding: clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; border-radius: 2rem; overflow: hidden; }
.tool-card > p { margin: 0; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.tool-card h2 { margin: .8rem 0 2rem; font: 400 clamp(2rem, 3vw, 3.4rem)/1 Georgia, serif; }
.ledger-card { background: var(--marigold); }
.mini-ledger { margin-top: auto; padding: 1rem; border-radius: 1.2rem; background: var(--paper); }
.mini-ledger div { position: relative; padding: 1rem 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: .8rem; }
.mini-ledger div:last-child { border-bottom: 0; }
.mini-ledger strong { color: var(--forest); }
.rhythm-card { background: var(--terra); color: white; }
.calendar-art { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.calendar-art span { aspect-ratio: .7; padding: .7rem .2rem; display: flex; align-items: end; justify-content: center; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font-size: .55rem; }
.calendar-art .active { background: var(--cream); color: var(--terra); }
.care-card { background: var(--sage); }
.care-meter { margin-top: auto; padding: 1.5rem; border: 1px solid rgba(23,63,50,.2); border-radius: 50% 50% 1rem 1rem; text-align: center; }
.care-meter span { display: block; color: #52665f; font-size: .65rem; text-transform: uppercase; }
.care-meter strong { display: block; margin: 2rem 0 1rem; font: 400 1.5rem Georgia, serif; }
.care-meter i { display: block; height: .6rem; border-radius: 999px; background: linear-gradient(90deg, var(--forest) 80%, rgba(23,63,50,.18) 80%); }

.principles-section { padding: 8rem max(1.25rem, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; background: var(--cream); }
.principles-section > .section-label { grid-column: 1 / -1; }
.principle-wheel { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }
.principle-wheel::before { content: ""; position: absolute; inset: 22%; border: 1px dashed var(--terra); border-radius: 50%; }
.principle-wheel p { position: absolute; margin: 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.principle-wheel p:nth-child(1) { top: 8%; }.principle-wheel p:nth-child(2) { right: 3%; }.principle-wheel p:nth-child(3) { bottom: 8%; }.principle-wheel p:nth-child(4) { left: -2%; }
.principle-wheel strong { z-index: 1; font: italic 400 clamp(2rem, 4vw, 4rem) Georgia, serif; }
.principle-copy h2 { margin: 0; font: 400 clamp(3rem, 5vw, 5rem)/.98 Georgia, serif; }
.principle-copy p { color: #60736c; font-size: 1.05rem; }

.start-section { padding: 8rem max(1.25rem, calc((100vw - 1280px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; background: var(--deep-forest); color: white; }
.start-section h2 { margin: 0; font: 400 clamp(3.2rem, 5vw, 5.5rem)/.96 Georgia, serif; }
.start-section form { display: grid; gap: 1rem; }
.start-section label { color: var(--sage); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.start-section input { width: 100%; min-height: 56px; margin-top: .4rem; padding: .85rem; border: 1px solid rgba(255,255,255,.22); border-radius: 1rem; color: white; background: rgba(255,255,255,.06); }
.start-section button { min-height: 56px; padding: .9rem 1.2rem; display: flex; justify-content: space-between; border: 0; border-radius: 999px; background: var(--marigold); color: var(--ink); font-weight: 800; cursor: pointer; }
#group-status { min-height: 1.4rem; margin: 0; color: var(--sage); font-size: .85rem; }

.site-footer { padding: 4rem max(1.25rem, calc((100vw - 1280px)/2)); display: grid; grid-template-columns: 1fr .7fr 1.2fr 1fr; gap: 3rem; background: var(--paper); font-size: .78rem; }
.site-footer p { color: #61726c; }
.footer-links { display: grid; gap: .5rem; }
.footer-links a { text-decoration: none; }
.site-footer address { font-style: normal; }
.site-footer address strong { color: var(--terra); text-transform: uppercase; font-size: .62rem; }
.footer-note { text-align: right; }

@media (max-width: 900px) {
  .floating-header { grid-template-columns: 1fr auto; }
  .menu-button { display: block; padding: .6rem; border: 0; border-radius: 999px; color: white; background: var(--forest); }
  .floating-header nav { position: absolute; left: 0; right: 0; top: 78px; padding: 1.25rem; display: none; flex-direction: column; border-radius: 1.5rem; background: var(--paper); box-shadow: 0 20px 50px rgba(11,41,33,.15); }
  .floating-header nav.open { display: flex; }
  .nav-action { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 10rem; }
  .circle-stage { margin-top: 3rem; }
  .section-intro, .principles-section, .start-section { grid-template-columns: 1fr; }
  .tools-section { grid-template-columns: 1fr; }
  .tool-card { min-height: 450px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-note { text-align: left; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: 4.3rem; }
  .circle-stage { width: 110%; margin-left: -5%; }
  .member-bubble span { width: 3.2rem; height: 3.2rem; }
  .payout-core { inset: 29%; }
  .steps-list li { grid-template-columns: 45px 1fr; gap: 1rem; }
  .steps-list i { display: none; }
  .principle-wheel { width: 90%; margin: auto; }
  .site-footer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}