/* Public website and notices. No external fonts, animation library or tracking scripts. */
body { background: #f8faf7; }
.site-header { position: sticky; top: 0; z-index: 20; max-width: none; height: 76px; padding-inline: max(24px, calc((100vw - 1136px)/2)); background: rgba(248,250,247,.94); backdrop-filter: blur(16px); border-bottom: 1px solid #e3e9e2; }
.site-nav .nav-login { background: #fff; border-radius: 999px; }
.site-nav a:focus-visible, .motion-control:focus-visible, .notice-toc a:focus-visible { outline: 3px solid #73b397; outline-offset: 5px; }
section[id], h2[id] { scroll-margin-top: 100px; }
.hero { position: relative; min-height: 650px; gap: 58px; padding-block: 86px 100px; overflow: visible; }
.hero h1 { max-width: 620px; font-size: clamp(46px,5.4vw,70px); line-height: 1.06; letter-spacing: -.055em; }
.hero h1 span { color: #277252; }
.hero-description { max-width: 470px; font-size: 17px; line-height: 1.75; }
.eyebrow { letter-spacing: .14em; font-size: 11px; }
.hero-price { margin: 25px 0 8px; color: #173b2c; font-size: 21px; font-weight: 750; }
.hero-price span { font-size: 13px; font-weight: 500; color: #526359; }
.hero-note { line-height: 1.6; }
.button { min-height: 48px; border-radius: 10px; transition: transform .2s, box-shadow .2s, background .2s; }
.button-primary { box-shadow: 0 5px 14px #174e3020; }
.button:hover { box-shadow: 0 8px 22px #174e3025; transform: translateY(-2px); }
.hero-art { position: relative; min-width: 0; perspective: 1100px; padding: 40px 0; isolation: isolate; }
.art-orbit { position: absolute; z-index: -1; inset: -30px -18px; border-radius: 50%; background: radial-gradient(ellipse at center,#dcebdd 0%,#e8efe650 55%,transparent 72%); }
.product-card { position: relative; width: 100%; padding: 26px; border: 1px solid #fff; border-radius: 18px; background: linear-gradient(135deg,#fff,#f7faf7); transform: rotateX(calc(5deg + var(--tilt-x,0deg))) rotateY(calc(-9deg + var(--tilt-y,0deg))); box-shadow: 18px 24px 0 -12px #c9d9cb, 0 34px 70px -25px #1c402e55; transition: transform .35s ease; animation: workspace-float 7s ease-in-out infinite; }
.product-title h2 { font-size: 21px; }
.task-row { min-height: 52px; font-size: 12px; }
.floating-note { position: absolute; display: flex; gap: 10px; align-items: center; padding: 13px 17px; z-index: 2; background: #fff; border: 1px solid #e2eae0; border-radius: 12px; box-shadow: 0 16px 30px -14px #24432d40; animation: note-float 7s ease-in-out infinite; }
.floating-note > span { display: grid; place-items: center; height: 34px; width: 34px; border-radius: 10px; background: #e6f2e8; color: #256346; font-size: 19px; }
.floating-note b { display: block; font-size: 12px; color: #193c2c; }
.floating-note small { display: block; margin-top: 4px; font-size: 10px; color: #617268; }
.note-attendance { top: 1px; right: -12px; }
.note-work { bottom: 9px; left: -23px; animation-delay: -3s; }
.motion-control { position: absolute; bottom: -26px; right: 0; padding: 7px 10px; border: 1px solid #dce4d9; border-radius: 8px; background: #fff; color: #526359; font: inherit; font-size: 11px; cursor: pointer; }
.motion-paused .product-card, .motion-paused .floating-note { animation-play-state: paused; }
.motion-paused .product-card { transform: rotateX(5deg) rotateY(-9deg); }
@keyframes workspace-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes note-float { 0%,100% { translate: 0 0; } 50% { translate: 0 7px; } }
.trust-strip { background: #eef3ec; border-block-color: #dfe8dc; color: #48604d; }
.trust-strip span::before { content: '✓'; margin-right: 8px; color: #337852; }
.section-heading { max-width: 640px; }
.section-heading h2, .demo-intro h2 { line-height: 1.15; }
.feature-grid { gap: 20px; }
.feature-card { position: relative; padding: 28px; border-radius: 16px; transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover { z-index: 2; transform: translateY(-6px) scale(1.045); box-shadow: 0 22px 42px -18px #23482d50; }
}
.feature-card p, .feature-footnote { font-size: 13px; }
.features-section .feature-card { min-height: 190px; }
.feature-motion-bar { max-width: 1136px; display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; }
.feature-motion-bar > span { color: #657365; font-size: 12px; }
.feature-motion-control { min-height: 38px; padding: 8px 13px; border: 1px solid #d8e3d4; border-radius: 999px; background: #fff; color: #315b42; font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.feature-motion-control:focus-visible { outline: 3px solid #73b397; outline-offset: 4px; }
.feature-motion-control:disabled { cursor: default; }
.features-section .feature-card { overflow: hidden; padding: 20px 26px 25px; }
.feature-visual { position: relative; display: grid; place-items: center; height: 128px; margin: -2px 0 19px; isolation: isolate; perspective: 700px; }
.feature-visual::before { content: ''; position: absolute; width: 170px; height: 110px; border-radius: 50%; background: radial-gradient(ellipse,#e4f0e2,transparent 72%); z-index: -1; }
.feature-card:nth-child(3n+2) .feature-visual::before { background: radial-gradient(ellipse,#f7eddb,transparent 72%); }
.feature-card:nth-child(3n) .feature-visual::before { background: radial-gradient(ellipse,#e6eaf8,transparent 72%); }
.feature-visual img { display: block; width: 128px; height: 128px; object-fit: contain; filter: drop-shadow(0 9px 6px #24432d17); transform-origin: center 70%; animation: feature-avatar-float 5s ease-in-out infinite; animation-play-state: paused; }
.feature-platform { position: absolute; bottom: 0; width: 90px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse,#24432d20,transparent 70%); }
.feature-card.is-on-screen .feature-visual img { animation-play-state: running; }
.feature-card:nth-child(3n+2) .feature-visual img { animation-delay: -1.5s; }
.feature-card:nth-child(3n) .feature-visual img { animation-delay: -3s; }
.features-section.motion-paused .feature-visual img { animation-play-state: paused; }
.features-section.motion-paused .feature-card:hover { transform: none; }
@keyframes feature-avatar-float { 0%,100% { transform: translateY(0) rotateY(-4deg); } 50% { transform: translateY(-7px) rotateY(4deg); } }
@media (max-width: 560px) { .feature-motion-bar { align-items: flex-start; flex-direction: column; gap: 10px; } .feature-visual { height: 140px; } .feature-visual img { width: 140px; height: 140px; } }
.icon-billing { background: #fbf2e2; color: #7d5513; }
.icon-inventory { background: #e9eef8; color: #4d658d; }
.icon-leads { background: #f2eafa; color: #77528e; }
.feature-access-note { margin: 22px 0; color: #657365; text-align: center; font-size: 12px; line-height: 1.7; }
.features-cta { margin-top: 26px; padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #dfe7da; border-radius: 14px; background: #eef4ea; }
.features-cta p { margin: 0; font-size: 15px; font-weight: 600; color: #244b35; }
.features-cta .button { display: inline-flex; align-items: center; gap: 16px; }
.pricing-section { background: #eaf1e8; }
.annual-plans { max-width: 1010px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.annual-card { display: flex; flex-direction: column; padding: 34px; border: 1px solid #d7e1d3; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px -36px #21482d55; }
.annual-featured { border: 1px solid #81a98a; }
.annual-custom { background: #183c30; border-color: #183c30; color: #fff; }
.plan-topline { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan-topline .plan-label { margin: 0; color: #326b4d; font-size: 11px; letter-spacing: .13em; }
.plan-badge { padding: 6px 10px; border-radius: 999px; background: #edf4e9; color: #426443; font-size: 10px; font-weight: 600; }
.annual-card h3 { margin: 26px 0 12px; max-width: 320px; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
.annual-price, .custom-price { margin: 12px 0 7px; color: #193d2c; font-size: clamp(36px,4vw,46px); line-height: 1.25; font-weight: 750; letter-spacing: -.04em; }
.annual-price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #6c786a; }
.annual-tax { margin: 0; font-size: 12px; line-height: 1.6; color: #60715f; }
.plan-inclusions { display: grid; gap: 15px; list-style: none; margin: 28px 0 32px; padding: 24px 0 0; border-top: 1px solid #e0e9dc; font-size: 13px; line-height: 1.4; }
.plan-inclusions li { padding-left: 21px; position: relative; }
.plan-inclusions li::before { content: '✓'; position: absolute; left: 0; color: #38815b; }
.annual-card .button { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; }
.annual-custom .plan-label, .annual-custom .custom-price, .annual-custom h3 { color: #fff; }
.annual-custom .plan-badge { background: #ffffff16; color: #d6e6d9; }
.annual-custom .annual-tax, .annual-custom .plan-fineprint { color: #c7d6cd; }
.annual-custom .plan-inclusions { color: #e0e9e3; border-top-color: #ffffff25; }
.annual-custom .plan-inclusions li::before { color: #9ccaaa; }
.annual-custom .button { background: #fff; color: #193d2c; border-color: #fff; }
.plan-fineprint { text-align: center; font-size: 11px; margin: 12px 0 0; color: #6c786a; }
.team-fit { max-width: 1010px; margin: 24px auto 0; padding: 20px 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; background: #ffffff90; border: 1px solid #d7e1d3; border-radius: 12px; }
.team-fit label { font-size: 13px; font-weight: 600; }
.team-fit input { width: 95px; min-height: 42px; padding: 8px 12px; border: 1px solid #bdcdb7; border-radius: 8px; font: inherit; background: #fff; }
.team-fit p { margin: 0; flex: 1 1 280px; font-size: 12px; line-height: 1.6; color: #49624a; }
.pricing-disclaimer { max-width: 900px; margin: 22px auto 0; font-size: 12px; line-height: 1.8; text-align: center; }
.faq-list details { border-radius: 12px; padding: 20px 24px; background: #fff; margin-bottom: 10px; border: 1px solid #e0e7dc; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 32px; font-size: 14px; line-height: 1.5; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex: 0 0 28px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf3e9; color: #326b4d; font-size: 20px; font-weight: 500; }
.faq-list details[open] { border-color: #a9c3a5; background: #fcfefb; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary:focus-visible { outline: 3px solid #73b397; outline-offset: 5px; border-radius: 4px; }
.faq-list details p { max-width: 720px; margin-top: 15px; padding-right: 30px; font-size: 14px; line-height: 1.8; }
.demo-section { background: #edf3eb; }
.demo-intro .eyebrow { color: #326b4d; }
.demo-intro h2 { color: #183c30; }
.demo-intro > p:not(.eyebrow), .demo-promise { color: #526359; }
.demo-promise > span { color: #326b4d; font-size: 12px; }
.demo-promise p { font-size: 13px; line-height: 1.7; }
.demo-promise strong { color: #183c30; }
.demo-form { border-radius: 20px; box-shadow: 0 22px 55px -36px #21482d60; }
.form-intro { color: #6b766a; font-size: 12px; line-height: 1.7; margin: -6px 0 24px; }
.demo-form input, .demo-form select, .demo-form textarea { min-height: 46px; border-radius: 9px; }
.demo-success-done { background: #2b7754; }
.site-footer { border-top: 1px solid #dfe7da; }
.privacy-main { max-width: 920px; margin: 40px auto 60px; padding: 48px; border: 1px solid #dfe7da; border-radius: 20px; background: #fff; box-shadow: 0 20px 55px -40px #21482d40; }
.privacy-main h1 { max-width: 700px; font-size: clamp(32px,5vw,46px); line-height: 1.13; letter-spacing: -.04em; }
.privacy-main h2 { margin-top: 34px; font-size: 21px; }
.privacy-main p, .privacy-main li { color: #58675c; line-height: 1.85; font-size: 14px; }
.notice-summary { padding: 18px 22px; border-radius: 12px; background: #eef5ea; border: 1px solid #dce8d6; }
.notice-toc { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0; padding-bottom: 24px; border-bottom: 1px solid #e0e8db; }
.notice-toc a { padding: 8px 13px; border-radius: 999px; text-decoration: none; font-size: 12px; background: #f2f5ef; }
.notice-main .table-scroll { overflow-x: auto; border: 1px solid #dfe7da; border-radius: 12px; }
.notice-main table { width: 100%; border-collapse: collapse; min-width: 560px; }
.notice-main th, .notice-main td { padding: 15px 18px; font-size: 13px; text-align: left; border-bottom: 1px solid #e3eadd; line-height: 1.7; vertical-align: top; }
.notice-main th { background: #edf3e9; color: #31523b; }
@media (max-width: 950px) { .hero { gap: 30px; } .hero h1 { font-size: 50px; } .floating-note { padding: 10px; } .note-attendance { right: -5px; } .note-work { left: -10px; } .annual-card { padding: 26px; } }
@media (max-width: 760px) {
  .site-header { padding-inline: 20px; height: 70px; }
  .hero { padding: 55px 24px 64px; gap: 30px; min-height: 0; }
  .hero h1 { font-size: clamp(42px,10vw,60px); }
  .hero-description { font-size: 16px; }
  .hero-art { width: 100%; max-width: 500px; justify-self: center; padding-block: 42px; margin-top: 10px; }
  .product-card { max-width: none; padding: 20px; }
  .floating-note small { font-size: 9px; }
  .note-attendance { right: 0; top: 4px; }
  .note-work { left: 0; bottom: 2px; }
  .hero-price span { display: block; margin-top: 5px; }
  .motion-control { bottom: -28px; }
  .annual-plans { grid-template-columns: 1fr; gap: 18px; }
  .team-fit { padding: 18px; }
  .team-fit label { flex: 1 1 180px; }
  .team-fit p { flex-basis: 100%; }
  .privacy-main { margin: 20px 14px 40px; padding: 28px 22px; border-radius: 16px; }
  .privacy-main .eyebrow { font-size: 10px; }
  .notice-toc { gap: 8px; }
  .site-nav:has(.notice-home) { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .product-card, .motion-paused .product-card { transform: none; }
  .feature-card:hover, .button:hover { transform: none; }
}