/* SCAR website and Business entry share the same brand, with scoped layouts. */
.nav-wrap, body:has(.nav-wrap) .hero, .journey-router, .feature-section, .screen-tour, .demo-section,
.business-section, .partner-section, .download-section, .join-section, .faq-section,
.final-cta { --ink:#163c32; --muted:#526660; --coral:#ed633b; --line:#dce5df; }
body:has(.nav-wrap) { background:#fff; color:#163c32; }
.nav-wrap { background:#ffffffed; }
.nav .brand-mark { background:#ed633b; color:white; }
.nav .brand { color:#163c32; }
.nav-links { gap:22px; }
.nav-links .button-dark { background:#163c32; color:white; }
body:has(.nav-wrap) .hero { grid-template-columns:1fr 1fr; gap:48px; min-height:740px; padding-block:64px 74px; }
body:has(.nav-wrap) .hero .eyebrow { padding:0; background:none; font-size:14px; color:#526660; letter-spacing:0; font-weight:600; text-transform:none; }
body:has(.nav-wrap) .hero h1 { font-size:clamp(48px,5.8vw,78px); line-height:1.04; letter-spacing:-.055em; max-width:620px; margin:22px 0 24px; }
.hero-lead { font-size:17px; line-height:1.75; max-width:470px; }
body:has(.nav-wrap) .hero .button-primary { background:#163c32; color:#fff; }
body:has(.nav-wrap) .hero .button-primary:hover { background:#245b49; }
body:has(.nav-wrap) .hero .button-ghost { border-color:#bdcec4; color:#163c32; }
.hero-actions { gap:12px; }
body:has(.nav-wrap) .hero .trust-row { gap:15px; margin-top:24px; }
body:has(.nav-wrap) .hero .trust-row span { border:0; background:none; padding:0; font-size:12px; color:#526660; }
body:has(.nav-wrap) .hero .trust-row span::before { content:'✓'; display:inline; color:#237854; }
.early-access-link { display:block; margin-top:16px; max-width:430px; color:#526660; font-size:12px; line-height:1.6; text-underline-offset:3px; }
.hero-visual { position:relative; min-height:575px; background:#dfeee3; border-radius:34px; overflow:hidden; }
.hero-scene-label { position:absolute; top:25px; left:26px; z-index:3; font-size:13px; font-weight:750; color:#163c32; }
.hero-scene-label span { display:block; font-size:11px; font-weight:500; color:#526660; margin-top:5px; }
.hero-visual .sun-orbit { width:430px; height:430px; top:90px; left:80px; border-radius:50%; background:#c9ddcc; transform:none; }
.hero-visual .phone { position:absolute; top:87px; right:34px; width:282px; min-height:570px; transform:rotate(4deg); z-index:2; box-shadow:0 24px 48px #163c3229; }
.hero-visual .app-card { background:#ed633b; }
.hero-mascot { position:absolute; width:250px; height:285px; object-fit:cover; bottom:3px; left:12px; z-index:3; border-radius:140px 140px 20px 20px; }
.hero-visual .float-health { top:180px; left:18px; z-index:4; padding:12px; font-size:11px; }
.hero-visual .float-order { bottom:30px; right:18px; left:auto; z-index:4; padding:12px; font-size:11px; }
.journey-router { margin-top:0; margin-bottom:35px; background:#f4f8f5; box-shadow:none; border:0; border-radius:20px; }
.journey-intro span { text-transform:none; letter-spacing:0; font-size:12px; color:#526660; }
.journey-card { border-color:#dce5df; box-shadow:none; border-radius:12px; }
.journey-card b { font-size:14px; }
.journey-card small { font-size:12px; }
body:has(.nav-wrap) .section-heading .kicker, .business-copy .kicker, .join-copy .kicker { letter-spacing:0; text-transform:none; font-size:14px; }
body:has(.nav-wrap) .section-heading h2 { font-size:clamp(32px,4vw,49px); }
.feature-section { background:#f4f8f5; }
.feature-orange { background:#dfeee3; }
.feature-blue { background:#ecf3f8; }
.feature-green { background:#e6f1e9; }
.feature-pink { background:#f8eeea; }
.demo-section { background:#f4f8f5; }
.business-section { background:#163c32; }
.business-copy p { color:#d0dfd7; }
.business-copy .kicker { color:#bdd5c8; }
.partner-section { background:#e6f1e9; }
.final-cta { background:#dfeee3; color:#163c32; }
.final-cta .button-dark { background:#163c32; color:white; }
body:has(.nav-wrap) .reveal { opacity:1; transform:none; transition:none; }

/* Only the authentication gate is restyled; signed-in workspace styles stay scoped. */
#businessAuthGate { display:grid; grid-template-columns:minmax(360px,1fr) minmax(420px,.95fr); gap:0; padding:0; align-items:stretch; overflow:auto; background:#f5f8f5; }
#businessAuthGate.hidden { display:none; }
#businessAuthGate .auth-brand { display:flex; justify-content:space-between; padding:44px clamp(35px,5vw,80px); background:#163c32; color:white; gap:40px; }
.auth-home { display:flex; align-items:center; gap:12px; color:white; text-decoration:none; font-size:22px; font-weight:850; letter-spacing:-.04em; }
#businessAuthGate .auth-home .brand-mark { width:42px; height:42px; border-radius:12px; background:#ed633b; color:white; font-size:24px; font-family:inherit; transform:none; }
.auth-home b { font-weight:450; }
.auth-home:hover, .auth-explore:hover { color:white; }
.auth-intro { margin-block:auto; padding-block:20px; }
.auth-caption { color:#b9d4c4; font-size:13px; margin:0 0 20px; }
#businessAuthGate .auth-intro h2 { color:white; font-size:clamp(34px,3.7vw,52px); letter-spacing:-.045em; line-height:1.14; margin:0 0 24px; }
.auth-intro>p:not(.auth-caption) { color:#ccded3; max-width:440px; font-size:15px; line-height:1.8; }
.auth-benefits { display:grid; gap:18px; margin-top:32px; }
.auth-benefits>div { display:flex; align-items:flex-start; gap:14px; }
.auth-benefits>div>span { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border:1px solid #547466; border-radius:10px; color:#d4e8da; }
.auth-benefits p { margin:0; }
#businessAuthGate .auth-benefits b { display:block; font-size:13px; font-weight:700; }
#businessAuthGate .auth-benefits small { display:block; color:#b9d4c4; font-size:12px; max-width:370px; margin-top:5px; line-height:1.6; }
.auth-explore { display:flex; justify-content:space-between; width:100%; color:#d8e8dd; text-decoration:none; border-top:1px solid #456457; padding-top:20px; font-size:13px; }
#businessAuthGate .auth-card { align-self:center; justify-self:center; width:calc(100% - 80px); max-width:610px; padding:32px 0; border:0; border-radius:0; box-shadow:none; background:transparent; backdrop-filter:none; }
#businessAuthGate .auth-card .eyebrow { color:#526660; letter-spacing:0; font-size:13px; text-transform:none; }
#businessAuthGate .auth-card h1 { color:#163c32; font-size:clamp(32px,3.2vw,44px); line-height:1.12; margin:14px 0 20px; }
#businessAuthGate .auth-card h2 { color:#163c32; }
#businessAuthGate .auth-card>div>p:not(.eyebrow) { font-size:14px; color:#526660; margin-bottom:26px; }
#businessAuthGate .auth-role-grid { gap:12px; }
#businessAuthGate .auth-role-grid button { position:relative; grid-template-columns:1fr; gap:6px; padding:20px; border-color:#d7e2da; border-radius:14px; background:white; box-shadow:none; }
#businessAuthGate .auth-role-grid button:hover { border-color:#237854; background:#edf5ef; transform:none; }
#businessAuthGate .auth-role-grid button>span { grid-row:auto; width:34px; height:34px; background:#edf5ef; color:#237854; border-radius:10px; margin-bottom:6px; }
#businessAuthGate .auth-role-grid strong { color:#163c32; font-size:15px; }
#businessAuthGate .auth-role-grid small { color:#526660; font-size:12px; line-height:1.5; }
#businessAuthGate .auth-role-grid [data-account-kind="team"] { grid-column:1/-1; grid-template-columns:34px 1fr; column-gap:14px; padding:16px 20px; }
#businessAuthGate .auth-role-grid [data-account-kind="team"]>span { grid-row:1/3; margin:0; }
.auth-assurance { display:flex; gap:8px; align-items:center; color:#526660; font-size:12px; margin-top:25px; }
.auth-assurance>span { color:#237854; }
#businessAuthGate .auth-legal { margin:15px 0 0; color:#526660; font-size:11px; line-height:1.7; }
.auth-legal a { color:inherit; text-underline-offset:3px; }
#businessAuthGate .auth-card form input { border-color:#bdcec4; background:white; border-radius:10px; }
#businessAuthGate .auth-card .primary { background:#163c32; color:white; border-color:#163c32; }
@media(max-width:1100px) {
  body:has(.nav-wrap) .hero { gap:25px; }
  .hero-visual .phone { right:15px; width:260px; }
  .hero-mascot { width:240px; height:240px; left:-30px; }
  .hero-visual .float-health { top:155px; left:10px; }
  #businessAuthGate .auth-brand { padding:32px; }
  #businessAuthGate .auth-card { width:calc(100% - 48px); }
}
@media(max-width:900px) {
  body:has(.nav-wrap) .hero { grid-template-columns:1fr; padding-top:35px; }
  .hero-copy { max-width:620px; }
  body:has(.nav-wrap) .hero h1 br:last-child { display:none; }
  .hero-visual { width:100%; max-width:620px; justify-self:center; min-height:540px; }
  .hero-visual .phone { right:70px; top:74px; width:282px; }
  .hero-mascot { width:300px; height:300px; left:0; }
  .hero-visual .float-health { left:28px; }
  #businessAuthGate { grid-template-columns:1fr; }
  #businessAuthGate .auth-brand { padding:24px; gap:24px; }
  .auth-intro { padding:0; }
  #businessAuthGate .auth-intro h2 { font-size:34px; }
  .auth-benefits { display:none; }
  .auth-intro>p:not(.auth-caption) { max-width:650px; }
  .auth-caption { margin-bottom:12px; }
  #businessAuthGate .auth-card { max-width:650px; padding-block:35px; }
}
@media(max-width:540px) {
  body:has(.nav-wrap) .hero h1 { font-size:48px; }
  body:has(.nav-wrap) .hero h1 br:last-child { display:initial; }
  .hero-lead { font-size:16px; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  body:has(.nav-wrap) .hero .trust-row { display:flex; flex-wrap:wrap; }
  .hero-visual { min-height:490px; border-radius:24px; }
  .hero-visual .phone { right:18px; top:75px; width:250px; }
  .hero-mascot { width:200px; height:200px; left:-25px; }
  .hero-visual .float-health { top:160px; left:8px; max-width:210px; }
  .hero-visual .float-order { display:flex; bottom:15px; right:12px; max-width:230px; }
  .hero-scene-label { left:20px; top:20px; font-size:12px; }
  #businessAuthGate .auth-intro h2 { font-size:30px; }
  #businessAuthGate .auth-intro>p:not(.auth-caption) { display:none; }
  #businessAuthGate .auth-role-grid { grid-template-columns:1fr; }
  #businessAuthGate .auth-role-grid button { grid-template-columns:34px 1fr; column-gap:14px; padding:16px; }
  #businessAuthGate .auth-role-grid button>span { grid-row:1/3; margin:0; }
  #businessAuthGate .auth-card h1 { font-size:34px; }
}

/* Public website: product first, one visual identity from app to Business. */
body.scar-website {
  --ink:#173b2e;
  --muted:#5b6d61;
  --line:#dce5da;
  --coral:#ed633b;
  --radius:22px;
  background:#fff;
  color:var(--ink);
}
body.scar-website .nav-wrap { background:#fffffff2; border-bottom:1px solid #e8eee5; }
body.scar-website .nav { height:82px; }
body.scar-website .brand { font-size:25px; letter-spacing:-.045em; }
body.scar-website .brand-mark { width:40px; height:40px; border-radius:12px; }
body.scar-website .nav-links { gap:24px; font-size:13px; font-weight:650; }
body.scar-website .nav-links > a:not(.button) { padding-block:12px; color:#506557; }
body.scar-website .nav-links > a:not(.button):hover { color:#173b2e; }
body.scar-website .button { min-height:48px; padding:14px 20px; border-radius:11px; font-size:14px; font-weight:700; }
body.scar-website .button-small { min-height:44px; padding:11px 16px; font-size:13px; }
body.scar-website .button-primary,body.scar-website .button-dark { background:#173b2e; color:#fff; }
body.scar-website .button-primary:hover,body.scar-website .button-dark:hover { background:#2a5940; }
body.scar-website .button-ghost { border:1px solid #cbd9c9; background:#fff; color:#173b2e; }
body.scar-website .hero {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  min-height:750px;
  padding-block:56px 64px;
  align-items:center;
}
body.scar-website .hero .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:99px; background:#f0f5eb; font-size:12px; color:#45664e; }
body.scar-website .hero .eyebrow > span { width:6px; height:6px; border-radius:50%; background:#548d58; }
body.scar-website .hero h1 { max-width:560px; margin:24px 0; font-size:clamp(48px,5vw,70px); font-weight:800; line-height:1.08; letter-spacing:-.05em; }
body.scar-website .hero-lead { max-width:445px; font-size:17px; line-height:1.8; color:#5b6d61; }
body.scar-website .hero-actions { gap:12px; margin-top:28px; }
body.scar-website .hero .trust-row { flex-wrap:wrap; gap:16px; margin-top:24px; }
body.scar-website .hero .trust-row span { font-size:12px; color:#5b6d61; }
body.scar-website .early-access-link { margin-top:14px; font-size:12px; }
body.scar-website .hero-visual { min-height:650px; border-radius:28px; background:#e7efdd; overflow:hidden; border:1px solid #dde7d0; }
body.scar-website .hero-scene-label { top:27px; left:26px; font-size:14px; }
body.scar-website .hero-scene-label span { margin-top:4px; font-size:11px; color:#647955; }
body.scar-website .hero-visual .sun-orbit { width:390px; height:390px; top:130px; left:40px; background:#d0dfbe; border-radius:50%; }
body.scar-website .hero-visual .phone { top:60px; right:26px; width:280px; min-height:575px; transform:rotate(0); border:6px solid #173b2e; border-radius:36px; background:#fafcf8; box-shadow:0 18px 45px #173b2e26; }
body.scar-website .hero-visual .app-card { background:#173b2e; }
body.scar-website .hero-visual .dog-avatar { color:#173b2e; }
body.scar-website .hero-mascot { width:205px; height:205px; left:24px; bottom:155px; object-fit:cover; border:5px solid #ffffffb3; border-radius:50%; }
body.scar-website .hero-visual-note { position:absolute; z-index:5; bottom:28px; left:24px; width:205px; display:flex; align-items:flex-start; gap:10px; padding:14px; border:1px solid #ffffffb3; border-radius:14px; background:#fffffff2; box-shadow:0 8px 24px #173b2e0d; }
body.scar-website .hero-visual-note > span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:10px; background:#edf4e6; color:#45664e; }
body.scar-website .hero-visual-note strong { display:block; font-size:13px; }
body.scar-website .hero-visual-note small { display:block; margin-top:4px; color:#647955; font-size:11px; line-height:1.5; }
body.scar-website .journey-router { gap:12px; margin-top:0; padding:18px; border:1px solid #e1e8db; border-radius:18px; background:#f8faf5; }
body.scar-website .journey-intro { padding-inline:10px; }
body.scar-website .journey-intro strong { font-size:18px; }
body.scar-website .journey-card { padding:18px; border-radius:12px; border-color:#dce5da; }
body.scar-website .journey-card small { font-size:12px; line-height:1.5; }
body.scar-website .journey-card em { margin-top:3px; font-size:12px; color:#356b50; }
body.scar-website .journey-card i { background:#edf4e6; border-radius:11px; }
body.scar-website .section-heading { max-width:740px; }
body.scar-website .section-heading h2 { margin-top:12px; font-size:clamp(34px,4vw,50px); line-height:1.15; letter-spacing:-.04em; }
body.scar-website .section-heading p { max-width:650px; font-size:16px; line-height:1.75; color:#5b6d61; }
body.scar-website .kicker { color:#567248; font-size:13px; font-weight:650; letter-spacing:0; text-transform:none; }
body.scar-website .steps { gap:20px; }
body.scar-website .step { min-height:260px; padding:28px; border:1px solid #dce5da; border-radius:18px; background:#fff; }
body.scar-website .step-number { color:#9aaf8e; font-family:inherit; font-size:20px; }
body.scar-website .step-icon { margin:26px 0 16px; color:#45664e; background:#edf4e6; }
body.scar-website .step h3 { font-size:23px; line-height:1.3; }
body.scar-website .step p { font-size:14px; line-height:1.7; color:#5b6d61; }
body.scar-website .feature-section { padding-block:90px; background:#f4f7ef; }
body.scar-website .feature-grid { gap:18px; }
body.scar-website .feature { padding:28px; border:1px solid #dce5da; border-radius:18px; background:#fff; }
body.scar-website .feature-large { background:#e2edda; }
body.scar-website .feature h3 { font-size:25px; line-height:1.3; }
body.scar-website .feature p { font-size:14px; line-height:1.7; color:#5b6d61; }
body.scar-website .feature-symbol { color:#356b50; background:#edf4e6; }
body.scar-website .feature-label { color:#567248; font-size:12px; }
body.scar-website .screen-tour { padding-block:90px; background:#fff; }
body.scar-website .screen-gallery { gap:16px; }
body.scar-website .screen-gallery figure { border:1px solid #dce5da; border-radius:18px; background:#f8faf5; }
body.scar-website .screen-gallery figcaption { border-top:1px solid #dce5da; padding:18px; }
body.scar-website .screen-card-ui > div { background:#edf4e6; }
body.scar-website .food-ui > div { background:#f8f1e7; }
body.scar-website .demo-section { padding-block:90px; background:#f4f7ef; }
body.scar-website .demo-switcher { background:#e4ecde; border-color:#d2decb; }
body.scar-website .demo-switcher button.active { background:#173b2e; color:#fff; }
body.scar-website .business-section { padding-block:90px; background:#173b2e; }
body.scar-website .business-copy h2 { font-size:clamp(34px,3.5vw,48px); line-height:1.15; }
body.scar-website .business-copy p { font-size:16px; line-height:1.75; color:#c1d4c6; }
body.scar-website .business-copy .kicker { color:#bcd4a8; }
body.scar-website .role-tabs button { min-height:44px; font-size:13px; }
body.scar-website .role-tabs button.active { color:#173b2e; background:#e7efdd; }
body.scar-website .role-panel { border-radius:18px; background:#fff; color:#173b2e; }
body.scar-website .role-head > b { color:#356b50; background:#edf4e6; }
body.scar-website .comparison-section { background:#fff; }
body.scar-website .comparison-after { border-color:#b9cda8; background:#edf4e6; }
body.scar-website .partner-section { background:#edf4e6; }
body.scar-website .price-card { border-radius:18px; border-color:#dce5da; }
body.scar-website .price-card.featured { background:#173b2e; transform:none; }
body.scar-website .final-cta { padding:56px 24px; border:1px solid #d6e2cc; border-radius:22px; background:#e7efdd; }
body.scar-website .final-cta h2 { font-size:clamp(32px,4vw,48px); line-height:1.2; }
body.scar-website :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #52896c; outline-offset:4px; }
@media(max-width:1050px) {
  body.scar-website .nav-links { gap:16px; }
  body.scar-website .hero { gap:28px; }
  body.scar-website .hero h1 { font-size:56px; }
  body.scar-website .hero-mascot { width:165px; height:165px; left:12px; bottom:165px; }
  body.scar-website .hero-visual-note { width:165px; left:12px; }
}
@media(max-width:1050px) {
  body.scar-website .hero { grid-template-columns:1fr; gap:36px; padding-block:42px; min-height:0; }
  body.scar-website .hero-copy { max-width:620px; }
  body.scar-website .hero-visual { justify-self:center; width:100%; max-width:620px; min-height:650px; }
  body.scar-website .hero-visual .phone { right:55px; }
  body.scar-website .hero-mascot { width:210px; height:210px; left:28px; bottom:160px; }
  body.scar-website .hero-visual-note { width:210px; left:28px; }
  body.scar-website .journey-router { grid-template-columns:1fr; }
  body.scar-website .journey-intro { align-items:flex-start; text-align:left; }
  body.scar-website .journey-card { grid-template-columns:auto 1fr; }
}
@media(max-width:540px) {
  body.scar-website .nav { height:68px; }
  body.scar-website .hero h1 { font-size:43px; }
  body.scar-website .hero .eyebrow { font-size:11px; }
  body.scar-website .hero-lead { font-size:16px; }
  body.scar-website .hero-actions { flex-direction:column; align-items:stretch; }
  body.scar-website .hero-visual { min-height:650px; border-radius:22px; }
  body.scar-website .hero-scene-label { top:20px; left:20px; }
  body.scar-website .hero-visual .phone { width:248px; right:12px; top:76px; }
  body.scar-website .hero-mascot { width:110px; height:110px; left:8px; bottom:105px; border-width:3px; }
  body.scar-website .hero-visual-note { display:none; }
  body.scar-website .hero-visual-note small { font-size:10px; }
  body.scar-website :is(.feature-section,.screen-tour,.demo-section,.business-section) { padding-block:64px; }
  body.scar-website .feature { padding:22px; }
  body.scar-website .feature h3 { font-size:23px; }
  body.scar-website .journey-router { margin-inline:auto; padding:12px; }
  body.scar-website .journey-card { padding:16px; }
}
@media(prefers-reduced-motion:reduce) {
  body.scar-website * { scroll-behavior:auto; }
}