:root { --mut: #807060; }
html { scroll-padding-top: 90px; }
body { font-size: 16px; }
::selection { background: var(--accsoft); color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 5px; }
.wrap, .topin { max-width: 1160px; padding-inline: 32px; }
header.top { background: rgba(247,241,232,.94); }
.topin { padding-block: 18px; }
.brand { gap: 11px; }
.brand b { font-size: 27px; letter-spacing: -.05em; }
.brand img { width: 36px; height: 36px; border-radius: 14px; }
.topnav a { border-radius: 99px; padding: 8px 12px; font-size: 14px; }
.topnav a.go { background: linear-gradient(140deg, #c69d78, #a97b56); padding: 10px 16px; color: #35251b; font-weight: 600; margin-left: 10px; }
.hero { text-align: left; padding: 86px 0 58px; max-width: 950px; }
.eyebrow { font-size: 12px; letter-spacing: .14em; }
.hero h1 { font-size: clamp(44px, 5.8vw, 72px); font-weight: 400; letter-spacing: -.055em; line-height: 1.12; }
.hero h1 em { font-weight: 400; color: var(--acc); }
.lede { margin: 24px 0 0; max-width: 500px; font-size: 19px; }
.cta { justify-content: flex-start; margin-top: 30px; }
.btn { border-radius: 99px; padding: 12px 20px; font-size: 16px; }
.btn.p { background: linear-gradient(140deg, #c69d78, #a97b56); border-color: var(--acc); color: #35251b; font-weight: 600; box-shadow: 0 5px 15px rgba(169,123,86,.16); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(62,51,42,.08); }
.note { font-size: 14px; }
.sun, .rays, .sunmeas { top: -100px; right: -220px; width: 760px; height: 760px; position: absolute; opacity: .45; }
.sunmeas { opacity: .2; }
.rays { opacity: .24; }
#mathbg { opacity: .55; }
#mathbg .eq, #mathbg .nt { display: none; }
section { padding: 60px 0; border-top: 1px solid var(--line2); }
.shead { max-width: 700px; margin: 0 0 32px; text-align: left; }
.shead h2 { font-weight: 400; font-size: clamp(30px, 3.5vw, 44px); letter-spacing: -.035em; }
.shead p { max-width: 630px; font-size: 16px; line-height: 1.8; }
.tagline { background: var(--accsoft); padding: 6px 13px; margin-bottom: 14px; border-radius: 99px; font-size: 12px; letter-spacing: .15em; }
.barstage, .demo, .rot { max-width: none; border-color: var(--line2); box-shadow: 0 12px 30px rgba(62,51,42,.04); border-radius: 28px; }
.barstage { padding: 30px 50px; background: #f0e6d8; }
.fakewin { max-width: 800px; margin: auto; }
.fwbody { min-height: 290px; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.card { border-radius: 28px; padding: 28px; border-color: var(--line); background: linear-gradient(145deg, #fffefb, #fdf8f0); box-shadow: 0 6px 22px rgba(93,70,47,.045); }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(62,51,42,.04); }
.card h3 { font-size: 23px; font-weight: 400; margin-bottom: 10px; }
.card p { font-size: 16px; line-height: 1.75; }
.ic { border-radius: 17px; background: var(--card2); border: 1px solid var(--line); color: var(--acc); width: 44px; height: 44px; }
.barcap { font-size: 14px; text-align: left; margin-top: 16px; }
.rotdays { justify-content: flex-start; gap: 8px; }
.rotday { border-radius: 99px; font-size: 14px; }
.rotrow { border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(135deg, #fffdf9, #f8eedf); padding: 14px 15px; }
.rotrow:last-child { border-bottom: 1px solid var(--line); }
.rotp, .rotpin, .rotn { font-size: 12px; }
.rotc { font-size: 16px; }
.rotnote { text-align: left; font-size: 14px; }
.demobar { padding: 14px 20px; }
.demotabs { padding: 16px 20px 0; }
.dtab { border-radius: 99px; font-size: 14px; }
.dpane { padding: 24px; }
.row { border: 1px solid var(--line); border-radius: 17px; padding: 14px; margin-bottom: 8px; background: #fffdf9; }
.nm { font-size: 16px; }
.sub, .tm { font-size: 14px; }
.steps { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.step { display: block; padding: 26px; border-radius: 26px; }
.step:before { background: var(--accsoft); color: var(--acc); margin-bottom: 22px; border-radius: 50%; width: 40px; height: 40px; font-family: var(--f-d); font-size: 23px; }
.step h3 { font-size: 23px; font-weight: 400; margin-bottom: 12px; }
.step p { font-size: 16px; line-height: 1.75; }
.faq { max-width: none; gap: 12px; }
details { border-radius: 20px; padding: 20px 24px; }
summary, details p { font-size: 16px; }
.closer { max-width: none; padding: 50px 36px; text-align: left; background: linear-gradient(135deg, #fff9ef, #f0e1cd); color: var(--ink); border: 1px solid var(--line2); border-radius: 32px; }
.closer h2 { font-weight: 400; font-size: 40px; }
.closer p { color: var(--ink2) !important; font-size: 16px; }
.closer .cta { justify-content: flex-start; }
.closer .btn.p { background: linear-gradient(140deg, #c69d78, #a97b56); color: #35251b; border-color: var(--acc); }
footer { font-size: 14px; text-align: left; padding: 26px 0 36px; }
@media (max-width: 900px) {
  .topnav a:not(.go) { display: none; }
  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; }
  .step:before { margin: 0; }
}
@media (max-width: 600px) {
  .wrap, .topin { padding-inline: 20px; }
  .topin { padding-block: 14px; }
  .topnav a.go { font-size: 14px; padding: 8px 12px; margin-left: 0; }
  .brand b { font-size: 24px; }
  .hero { padding: 50px 0 40px; }
  .hero h1 { font-size: 43px; }
  .lede { font-size: 17px; }
  section { padding: 40px 0; }
  .grid { grid-template-columns: 1fr; }
  .barstage { padding: 18px 14px; }
  .fwbody { padding: 25px 18px; min-height: 280px; }
  .island { gap: 9px; padding-inline: 12px; }
  .rot { padding: 20px 14px; }
  .rotrow { flex-wrap: wrap; gap: 8px; }
  .rotc { min-width: 110px; }
  .step { padding: 22px; }
  .closer { padding: 32px 24px; }
  .closer h2 { font-size: 32px; }
  .dpane { padding: 20px 14px; }
  .sun, .rays, .sunmeas { width: 460px; height: 460px; right: -280px; opacity: .25; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.rotday.on, .dtab.on { background: linear-gradient(140deg, #f6e8d6, #e9d2b6); color: #60452f; border-color: var(--acc2); }