:root {
  --linen: #fff8eb;
  --cream: #fffdf6;
  --walnut: #4a2d22;
  --deep-walnut: #38211a;
  --oak: #b97845;
  --maple: #e5b982;
  --maple-light: #f2d9ae;
  --coral: #e96f52;
  --coral-deep: #ce5638;
  --leaf: #6eaa72;
  --sky: #66a6c7;
  --mustard: #f0b64d;
  --charcoal: #2b2724;
  --radius: 16px;
  --display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--charcoal);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92) 0 7%, transparent 34%),
    radial-gradient(circle at 10% 80%, rgba(231,210,169,.45), transparent 34%),
    var(--linen);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
}
a { color: var(--walnut); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 4px solid var(--sky); outline-offset: 4px; }
::selection { color: var(--cream); background: var(--coral-deep); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--maple-light); }
::-webkit-scrollbar-thumb { border: 3px solid var(--maple-light); border-radius: 8px; background: var(--walnut); }

.skip-link { position: fixed; z-index: 20; left: 16px; top: -80px; padding: 12px 16px; background: var(--cream); border-radius: 10px; }
.skip-link:focus { top: 16px; }
.approval-ribbon { padding: 7px 16px; text-align: center; color: var(--deep-walnut); background: var(--mustard); font-size: 13px; font-weight: 750; }
.site-header {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 40px));
  min-height: 78px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 850; font-size: 23px; text-decoration: none; }
.brand img, .footer-brand img { border-radius: 10px; box-shadow: 0 4px 8px rgba(74,45,34,.2); }
.site-header nav, footer nav { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 700; }
.site-header nav a { text-decoration: none; }
.nav-cta { padding: 9px 16px; border-radius: 12px; color: var(--cream); background: var(--walnut); box-shadow: 0 4px 8px rgba(74,45,34,.2); }

main { overflow: clip; }
.workbench { width: min(1180px, calc(100% - 40px)); min-height: 690px; margin: 36px auto 92px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(30px, 6vw, 84px); }
.wood-plaque {
  position: relative;
  padding: clamp(34px, 5vw, 66px);
  border: 5px solid rgba(185,120,69,.78);
  border-radius: 26px;
  background: linear-gradient(165deg, #f7e4c4, var(--maple-light));
  box-shadow: 0 14px 28px rgba(74,45,34,.18), inset 0 1px rgba(255,255,255,.75);
  transform: rotate(-1deg);
}
.wood-plaque::before, .wood-plaque::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dcb1, var(--oak) 58%, var(--walnut)); box-shadow: 0 2px 3px rgba(74,45,34,.3); }
.wood-plaque::before { left: 18px; top: 18px; }
.wood-plaque::after { right: 18px; bottom: 18px; }
h1, h2 { margin: 0; color: var(--walnut); font-family: var(--display); font-weight: 900; letter-spacing: -.025em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(3.6rem, 7.2vw, 5.9rem); }
h1 span { position: relative; color: var(--coral-deep); }
.hero-copy > p { max-width: 34rem; margin: 32px 0 0; font-size: clamp(1.08rem, 1.7vw, 1.3rem); font-weight: 650; }
.hero-action { margin-top: 34px; }
.hero-action p { margin: 13px 4px 0; font-size: 14px; color: rgba(43,39,36,.76); }
.wood-button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 16px;
  color: var(--deep-walnut);
  background: linear-gradient(var(--maple), var(--oak));
  box-shadow: 0 6px 0 var(--walnut), 0 12px 18px rgba(74,45,34,.24);
  font-family: var(--display);
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.wood-button:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--walnut), 0 8px 14px rgba(74,45,34,.2); }
.wood-button.coral { color: var(--deep-walnut); background: linear-gradient(#f28467, var(--coral)); }
.stage { position: relative; min-height: 650px; display: grid; place-items: center; }
.stage::before { content: ""; position: absolute; width: 93%; height: 70%; bottom: 3%; border-radius: 50%; background: radial-gradient(ellipse, rgba(74,45,34,.24), transparent 67%); filter: blur(12px); }
.stage-sign { position: absolute; z-index: 3; top: 3%; left: 7%; padding: 10px 25px; border: 2px solid var(--walnut); border-radius: 14px; color: var(--walnut); background: var(--mustard); font-family: var(--display); font-size: 20px; font-weight: 850; box-shadow: 0 5px 10px rgba(74,45,34,.2); transform: rotate(-4deg); animation: handoff-sign 760ms cubic-bezier(.2,.85,.25,1.18) 180ms both; }
@keyframes handoff-sign {
  from { transform: translate(-72px, -22px) rotate(-10deg); box-shadow: 0 12px 18px rgba(74,45,34,.14); }
  to { transform: translate(0, 0) rotate(-4deg); box-shadow: 0 5px 10px rgba(74,45,34,.2); }
}
.iphone-frame { position: relative; z-index: 2; width: min(350px, 76vw); aspect-ratio: 365 / 750; flex-shrink: 0; filter: drop-shadow(0 7px 14px rgba(56,33,26,.12)) drop-shadow(0 26px 46px rgba(56,33,26,.26)); transform: rotate(2deg); }
.iphone-frame-shell { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.iphone-frame .app-screen { position: absolute; left: 3.6%; top: 1.6%; z-index: 1; width: 92.8%; height: 96.8%; object-fit: cover; object-position: top; border-radius: 8% / 3.7%; background: var(--linen); }
.paint-chips { position: absolute; z-index: 3; right: 2%; bottom: 8%; display: grid; grid-template-columns: repeat(2, 38px); gap: 9px; transform: rotate(8deg); }
.paint-chips i { aspect-ratio: 1; border: 2px solid var(--walnut); border-radius: 11px; box-shadow: 0 5px 8px rgba(74,45,34,.18); }
.paint-chips i:nth-child(1) { background: var(--coral); }.paint-chips i:nth-child(2) { background: var(--leaf); }.paint-chips i:nth-child(3) { background: var(--sky); }.paint-chips i:nth-child(4) { background: var(--mustard); }

.handoff { width: min(1120px, calc(100% - 40px)); margin: 0 auto 120px; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 110px); align-items: start; }
.handoff h2, .mechanism h2, .privacy-promise h2, .closing-stage h2 { font-size: clamp(2.6rem, 5vw, 4.7rem); }
.handoff-copy p, .mechanism-copy > p { max-width: 34rem; font-size: 18px; }
.ritual { list-style: none; margin: 0; padding: 0; }
.ritual li { position: relative; padding: 18px 20px 22px 120px; border-bottom: 1px solid rgba(74,45,34,.25); }
.ritual li:first-child { border-top: 1px solid rgba(74,45,34,.25); }
.ritual strong { display: block; color: var(--walnut); font-family: var(--display); font-size: 25px; line-height: 1.2; }
.ritual p { margin: 6px 0 0; }
.step-mark { position: absolute; left: 12px; top: 20px; display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--coral-deep); border-radius: 50%; color: var(--coral-deep); background: var(--linen); font-family: var(--display); font-size: 17px; font-weight: 900; }

.mechanism { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto 120px; padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 7vw, 90px); align-items: center; border-radius: 28px; background: linear-gradient(165deg, var(--maple-light), #f7e4c4); box-shadow: 0 16px 32px rgba(74,45,34,.16); }
.wheel-demo { position: relative; display: grid; place-items: center; min-height: 440px; }
.demo-wheel { position: relative; width: min(400px, 74vw); aspect-ratio: 1; border: 18px solid var(--oak); border-radius: 50%; overflow: hidden; background: conic-gradient(from -45deg, var(--coral) 0 25%, var(--leaf) 0 50%, var(--sky) 0 75%, var(--mustard) 0); box-shadow: 0 20px 0 var(--deep-walnut), 0 32px 32px rgba(74,45,34,.28), inset 0 0 0 3px var(--cream); transform: rotate(-4deg); }
.demo-wheel::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from -45deg, transparent 0 24.5%, rgba(74,45,34,.74) 24.5% 25%, transparent 25% 49.5%, rgba(74,45,34,.74) 49.5% 50%, transparent 50% 74.5%, rgba(74,45,34,.74) 74.5% 75%, transparent 75% 99.5%, rgba(74,45,34,.74) 99.5%); }
.demo-wheel span { position: absolute; z-index: 2; color: var(--deep-walnut); font-family: var(--display); font-size: 19px; font-weight: 850; }
.demo-wheel span:nth-child(1) { top: 19%; left: 57%; }.demo-wheel span:nth-child(2) { top: 57%; right: 12%; }.demo-wheel span:nth-child(3) { bottom: 18%; left: 20%; }.demo-wheel span:nth-child(4) { top: 24%; left: 12%; }
.demo-wheel b { position: absolute; z-index: 4; width: 24%; aspect-ratio: 1; top: 38%; left: 38%; border: 8px solid var(--oak); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6dcb1, var(--maple) 55%, var(--walnut)); box-shadow: 0 7px 12px rgba(74,45,34,.34); }
.pointer { position: absolute; z-index: 5; top: 0; width: 42px; height: 88px; border: 3px solid var(--walnut); border-radius: 50% 50% 45% 45%; background: linear-gradient(#f28467, var(--coral)); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 5px 4px rgba(74,45,34,.28)); }
.quiet { font-size: 14px !important; color: rgba(43,39,36,.72); }

.privacy-promise { width: min(980px, calc(100% - 40px)); margin: 0 auto 120px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end; padding: 0 0 34px; border-bottom: 2px solid rgba(74,45,34,.3); }
.privacy-promise h2 { max-width: 760px; }
.privacy-promise p { max-width: 710px; font-size: 18px; }
.privacy-promise > a { font-weight: 800; white-space: nowrap; }
.closing-stage { position: relative; margin: 0; padding: clamp(80px, 12vw, 150px) 20px; text-align: center; color: var(--cream); background: var(--walnut); }
.closing-stage h2 { color: var(--cream); font-size: clamp(3.2rem, 8vw, 6rem); }
.closing-stage p { margin: 24px auto 32px; font-size: 20px; }
.closing-stage .wood-button { min-width: 280px; }
.confetti i { position: absolute; width: 12px; height: 30px; border-radius: 3px; transform: rotate(var(--r)); background: var(--c); }
.confetti i:nth-child(1){--r:18deg;--c:var(--coral);left:11%;top:20%}.confetti i:nth-child(2){--r:-28deg;--c:var(--leaf);left:23%;bottom:17%}.confetti i:nth-child(3){--r:46deg;--c:var(--sky);right:18%;top:19%}.confetti i:nth-child(4){--r:-12deg;--c:var(--mustard);right:9%;bottom:21%}.confetti i:nth-child(5){--r:73deg;--c:var(--coral);left:38%;top:9%}.confetti i:nth-child(6){--r:-58deg;--c:var(--cream);right:34%;bottom:8%}

footer { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 38px 0 44px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; }
footer p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: rgba(43,39,36,.72); }

.legal-main { width: min(960px, calc(100% - 40px)); margin: 60px auto 110px; }
.legal-heading { max-width: 780px; margin-bottom: 54px; }
.legal-heading h1 { font-size: clamp(3.4rem, 7vw, 5.4rem); }
.updated { margin-top: 16px; color: rgba(43,39,36,.72); font-size: 14px; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 64px; align-items: start; }
.toc { position: sticky; top: 24px; }
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li + li { margin-top: 8px; }
.toc a { font-size: 14px; font-weight: 700; }
.prose { max-width: 72ch; }
.prose h2 { margin: 64px 0 16px; font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: 1.08; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 32px 0 10px; color: var(--walnut); font-family: var(--display); font-size: 1.28rem; line-height: 1.2; }
.prose p, .prose li { max-width: 72ch; }
.prose li + li { margin-top: 8px; }
.support-contact { margin: 40px 0; padding: 28px; border-radius: var(--radius); background: var(--maple-light); box-shadow: 0 8px 18px rgba(74,45,34,.13); }
.support-contact p { margin-bottom: 0; }

@media (max-width: 840px) {
  .site-header { min-height: 68px; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .workbench { margin-top: 18px; grid-template-columns: 1fr; gap: 18px; }
  .wood-plaque { z-index: 4; transform: none; }
  .stage { min-height: 570px; margin-top: -26px; }
  .iphone-frame { width: min(330px, 76vw); transform: rotate(1deg); }
  .handoff, .mechanism { grid-template-columns: 1fr; }
  .handoff { gap: 28px; }
  .mechanism-copy { order: -1; }
  .privacy-promise { grid-template-columns: 1fr; gap: 8px; }
  .legal-layout { grid-template-columns: 1fr; gap: 30px; }
  .toc { position: static; padding: 20px; border-radius: 14px; background: rgba(229,185,130,.35); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .approval-ribbon { font-size: 12px; }
  .site-header, .workbench, .handoff, .mechanism, .privacy-promise, footer, .legal-main { width: min(100% - 28px, 1180px); }
  .brand { font-size: 21px; }
  .nav-cta { padding: 8px 12px; font-size: 13px; }
  .workbench { min-height: auto; margin-bottom: 72px; }
  .wood-plaque { padding: 38px 25px; border-width: 4px; }
  h1 { font-size: clamp(3.15rem, 16vw, 4.5rem); }
  .hero-copy > p { margin-top: 24px; }
  .wood-button { width: 100%; }
  .stage { min-height: 510px; }
  .stage-sign { left: 0; }
  .paint-chips { right: 0; }
  .handoff, .mechanism, .privacy-promise { margin-bottom: 84px; }
  .ritual li { padding-left: 0; padding-top: 58px; }
  .step-mark { top: 20px; }
  .mechanism { padding: 42px 20px; }
  .wheel-demo { min-height: 330px; }
  .pointer { height: 68px; width: 34px; }
  footer { grid-template-columns: 1fr; }
  footer nav { flex-wrap: wrap; gap: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .stage-sign { animation: none; }
}