/* ONRUMA CALM — accessible, mobile-first design layer.
   Loaded AFTER the existing site/page stylesheets to preserve current behavior.
   Target: quiet hierarchy, generous spacing, 48px+ primary touch controls,
   WCAG AA contrast on ordinary text, clear selected states and reduced motion. */
:root {
  color-scheme: light;
  --calm-primary: #4F6B64;
  --calm-primary-hover: #425A54;
  --calm-primary-soft: #EAF1EC;
  --calm-pine: #24312E;
  --calm-text: #24312E;
  --calm-muted: #53635B;
  --calm-subtle: #66736F;
  --calm-bg: #F6F7F5;
  --calm-card: #FFFFFF;
  --calm-surface: #F0F4F0;
  --calm-border: #DCE3DF;
  --calm-amber: #7C5724;
  --calm-amber-surface: #FAF3E5;
  --calm-clay: #873F35;
  --calm-clay-surface: #F7ECE9;
  --calm-shadow: 0 6px 25px rgba(36,49,46,.045), 0 1px 2px rgba(36,49,46,.028);
  --calm-radius-xs: 10px;
  --calm-radius-sm: 12px;
  --calm-radius: 16px;
  --calm-radius-lg: 20px;
  --calm-radius-xl: 26px;
  --calm-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --calm-font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --green: var(--calm-primary);
  --dark: var(--calm-pine);
  --muted: var(--calm-muted);
  --sand: var(--calm-bg);
  --cream: var(--calm-bg);
  --mint: var(--calm-primary-soft);
  --line: var(--calm-border);
  --shadow: var(--calm-shadow);
  --radius: var(--calm-radius);
}
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { color: var(--calm-text); background: var(--calm-bg); font-family: var(--calm-font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button,input,textarea,select { font-family: inherit; }
button, a, summary, label { -webkit-tap-highlight-color: transparent; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 3px solid #A06E29 !important; outline-offset: 3px !important; }
:where(h1,h2,h3,h4,h5), .title, .brand { font-family: var(--calm-font-heading); }
:where(h1,h2,h3,h4,h5) { text-wrap: balance; }
:where(p) { overflow-wrap: break-word; }
.container { max-width: 1190px; }
.topbar-wrap { background: rgba(246,247,245,.96); border-color: var(--calm-border); }
.topbar { min-height: 80px; }
.brand { color: var(--calm-text); letter-spacing: -.052em; font-size: 25px; }
.logo-icon { background: var(--calm-primary); border-radius: 13px; }
.brand-period { color: #A67542; }
.navigation > a:not(.button) { color: var(--calm-muted); font-size: 14px; }
.navigation > a:not(.button):hover,.navigation > a.nav-active { color: var(--calm-primary-hover); }
.button { min-height: 50px; border-radius: 14px; font-size: 15px; line-height: 1.35; font-weight: 710; padding: 13px 20px; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.button:hover { transform: none; box-shadow: 0 3px 13px rgba(36,49,46,.12); }
.button-primary,.button-sm { color: #fff; background: var(--calm-primary); border-color: var(--calm-primary); }
.button-primary:hover,.button-sm:hover { color: #fff; background: var(--calm-primary-hover); border-color: var(--calm-primary-hover); }
.button-quiet { color: var(--calm-primary-hover); background: #fff; border-color: #C7D6CD; }
.button-quiet:hover { background: #EFF4EF; border-color: #8DA79A; }
.button-invert { color: var(--calm-primary-hover); }
.button:disabled { opacity: .5; cursor: not-allowed; }
.button-sm { min-height: 45px; font-size: 13px; padding: 11px 16px; }
.kicker,.eyebrow { color: #4B6659; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.gradient-word { color: #45675A; }
.micro-pill { color: #345D47; background: #EDF3ED; border-color: #CDDCCF; }
.pill-dot { background: #5E8B6B; box-shadow: 0 0 0 4px #E1EDE2; }
.hero h1 { font-weight: 750; line-height: 1.1; }
.hero-sub,.section-top > p,.step-card p,.benefit p,.subhero .section-intro,.policy-card p { color: var(--calm-muted); }
.hero-stage { background: radial-gradient(circle at 20% 20%,#F2F5EE,transparent 60%),radial-gradient(circle at 78% 75%,#E1E8E1,transparent 65%),#EBF0E9; border: 1px solid #D6E1D8; box-shadow: var(--calm-shadow); }
.review-phone { border-color: #34473F; box-shadow: 0 15px 35px rgba(36,49,46,.12); }
.phone-next { background: var(--calm-primary); }
.float-card { box-shadow: var(--calm-shadow); border-color: var(--calm-border); }
.trustline,.proof-label { color: var(--calm-muted); }
.proof-band { border-color: var(--calm-border); }
.business-types { color: #50685B; }
.section { padding-top: 88px; padding-bottom: 88px; }
.section-top h2,.owner-copy h2,.truth-shell h2 { line-height: 1.2; }
.step-card,.policy-card,.owners-dashboard,.dir-card { border-color: var(--calm-border); border-radius: var(--calm-radius-lg); background: #fff; box-shadow: var(--calm-shadow); }
.step-card { padding: 30px 28px; }
.step-icon { background: var(--calm-primary-soft); color: var(--calm-primary-hover); border-radius: 16px; }
.step-eyebrow { color: #587164; }
.owner-region { background: #ECF1EC; color: var(--calm-text); padding: 90px 0; }
.owner-copy h2 em { color: #4B6D5D; }
.owner-copy > p { color: var(--calm-muted); }
.owner-points > div { color: var(--calm-text); }
.tick { color: var(--calm-primary-hover); }
.owner-region .kicker-light { color: #496A59; }
.owner-region .button-invert { background: var(--calm-primary); color: #fff; border-color: var(--calm-primary); }
.owner-region .button-invert:hover { background: var(--calm-primary-hover); }
.dashboard-example { transform: none; border: 1px solid var(--calm-border); box-shadow: var(--calm-shadow); border-radius: 20px; }
.dash-numbers > div,.od-stats > div { background: #F1F4F1; }
.dash-numbers small,.od-stats small,.dash-numbers span,.od-stats span { color: #53675A; }
.dash-numbers strong,.od-stats strong { color: var(--calm-text); }
.dash-panel { border-color: var(--calm-border); }
.signal { color: var(--calm-muted); }
.signal b { color: var(--calm-text); }
.signal-bar { background: #E6ECE7; }
.signal-bar i { background: #6E9180; }
.dash-alert { background: #F8F0E2; }
.dash-alert > span { color: var(--calm-amber); }
.dash-alert p { color: #69583F; }
.benefit { border-top-color: #A3BDB0; }
.benefit-symbol,.benefit a { color: var(--calm-primary-hover); }
.truth-shell { background: #EDF2EE; border-color: var(--calm-border); border-radius: var(--calm-radius-xl); }
.truth-shell > div > p,.truth-list small { color: var(--calm-muted); }
.truth-check { background: #DBE9DF; color: var(--calm-primary-hover); }
.faq-list summary { font-size: 17px; min-height: 52px; align-items: center; }
.faq-list details { border-color: var(--calm-border); }
.cta-panel { background: #4F6B64; border-radius: 24px; }
.cta-panel p,.cta-disclaimer { color: #F0F6F1; }
.site-footer { background: #F1F4F0; border-color: var(--calm-border); }
.footer-inner p,.footer-links a,.footer-bottom { color: var(--calm-muted); }
.banner-plain,.insights-alert { background: #FBF5E8; border-color: #E6D5B8; color: #65503A; }
.policy-page { padding-top: 72px; }
/* Shared text inputs and large, forgiving controls */
:where(input:not([type="checkbox"]),textarea,select,.field) { border-radius: 12px; }
:where(textarea, input, select) { font-size: 16px; }
:where(button,a,summary) { touch-action: manipulation; }
/* Customer experience: calm hierarchy and comfortable touch */
.experience-layout { grid-template-columns: minmax(265px,.78fr) minmax(0,1.22fr); gap: 46px; padding-top: 64px; padding-bottom: 94px; }
.experience-intro { padding-top: 38px; top: 30px; }
.experience-intro h1 { letter-spacing: -.055em; line-height: 1.12; }
.experience-intro > p { color: var(--calm-muted); font-size: 16px; line-height: 1.75; max-width: 440px; }
.intro-benefits { gap: 14px; margin-top: 27px; color: var(--calm-text); }
.intro-benefits span { background: #E8F1EA; color: #3E6251; }
.demo-notice { background: #F0F3EE; border-color: var(--calm-border); border-radius: 16px; margin-top: 28px; }
.demo-notice strong { color: var(--calm-text); }
.demo-notice span { color: var(--calm-muted); font-size: 12px; }
.owner-preview-inline,.review-shortcut { color: #3D6553; text-underline-offset: 4px; }
.industry-selector { padding-bottom: 16px; }
.industry-selector summary { min-height: 49px; list-style: none; background: #EDF2ED; border: 1px solid #D4DFD6; border-radius: 14px; padding: 12px 15px; cursor: pointer; }
.industry-selector summary::-webkit-details-marker { display: none; }
.industry-topline { color: #3F6052; font-size: 13px; align-items: center; }
.industry-topline span:last-child { color: var(--calm-muted); }
.industry-selector .industry-body { padding: 8px 5px 5px; }
.industry-chip { min-height: 45px; border-color: #C9D9CE; background: #fff; font-size: 12px; font-weight: 710; }
.industry-chip[aria-pressed="true"] { background: var(--calm-primary); border-color: var(--calm-primary); }
.industry-chip:hover { border-color: var(--calm-primary); }
.microcopy { color: var(--calm-muted); font-size: 12px; line-height: 1.6; }
.survey-shell { border: 1px solid var(--calm-border); box-shadow: var(--calm-shadow); border-radius: 22px; }
.survey-head { background: var(--calm-primary); padding: 22px 27px; }
.survey-head > div > span { color: #F0F7F2; font-size: 12px; }
.sample-label { color: #fff; border: 1px solid rgba(255,255,255,.34); background: rgba(0,0,0,.08); font-size: 10px; }
.survey-content { padding: 28px 30px 34px; }
.business-overline { color: #45685A; font-size: 13px; }
.overline-icon { color: #3D6653; background: var(--calm-primary-soft); }
.rating-section { padding: 31px 0 32px; }
.rating-section h2 { font-size: 30px; line-height: 1.17; }
.rating-section p,.aspects-section > p,.writing-section > p,.sharing-section > p { color: var(--calm-muted); font-size: 14px; line-height: 1.68; }
.rating-stars { gap: 9px; }
.star-button { min-width: 55px; min-height: 55px; color: #7E8E83; background: #F4F6F3; border: 1px solid #D5E0D7; border-radius: 13px; font-size: 30px; }
.star-button.active { color: #845B1A; background: #FBF0D7; border-color: #D6B680; }
.star-button:hover { border-color: #9E7E48; }
.rating-label { color: var(--calm-muted); font-size: 13px; }
.aspects-section,.writing-section,.sharing-section { border-color: #E4EAE5; padding: 28px 0; }
.section-inline-head h3,.sharing-section h3 { font-size: 20px; font-weight: 750; }
.section-inline-head > span { color: #587064; font-size: 10px; }
.aspect-list { gap: 12px; }
.aspect-row { background: #F8FAF7; border: 1px solid #DDE6DF; border-radius: 16px; padding: 18px 18px 16px; }
.aspect-row strong { color: var(--calm-text); font-size: 15px; }
.aspect-row small { color: var(--calm-muted); font-size: 12px; margin-top: 6px; line-height: 1.5; }
.quick-votes { gap: 9px; }
.score-button { min-height: 50px; border: 1px solid #CEDBD0; background: #fff; color: #4C6256; font-size: 16px; font-weight: 760; border-radius: 12px; }
.score-button:hover { border-color: #789D8B; background: #EFF4EF; }
.score-button[aria-pressed="true"] { border: 2px solid var(--calm-primary-hover); background: var(--calm-primary); color: #fff; box-shadow: none; }
.aspect-row .rating-hint { margin-top: 10px; color: var(--calm-muted); font-size: 12px; }
.optional-note { border-radius: 14px; border-color: var(--calm-border); background: #fff; }
.optional-note summary { min-height: 51px; font-size: 14px; padding: 15px; }
.optional-note summary > span { color: var(--calm-primary); }
.optional-note summary small { color: var(--calm-muted); font-size: 12px; }
.optional-note textarea,.draft-panel textarea { font-size: 16px; line-height: 1.65; border-radius: 12px; border-color: #C9D7CF; background: #fff; color: var(--calm-text); }
.writing-settings { background: #F3F6F2; border-color: var(--calm-border); border-radius: 14px; }
.writing-settings summary { min-height: 53px; font-size: 14px; }
.writing-settings summary #settingsPreview { color: #476659; font-size: 12px; }
.settings-arrow { color: #50695B; }
.settings-inner legend { color: var(--calm-muted); font-size: 12px; }
.setting-pill { min-height: 45px; font-size: 12px; font-weight: 750; padding: 10px 15px; border-color: #C8D7CD; color: #425F50; }
.setting-pill[aria-pressed="true"] { background: var(--calm-primary); color: #fff; border-color: var(--calm-primary); }
.generate-button { min-height: 56px; font-size: 15px; }
.draft-panel { background: #F5F8F4; border-color: var(--calm-border); border-radius: 18px; padding-top: 20px; }
.draft-panel-title { padding: 0 18px; }
.draft-panel-title span:first-child { color: #496556; font-size: 11px; }
.draft-example-tag { background: #E5ECE5; color: #4C6657; font-size: 10px; }
.draft-option-buttons { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 18px 18px 2px; }
.draft-option { min-height: 125px; height: 100%; background: #fff; color: var(--calm-text); border: 1px solid #CEDBD1; border-radius: 15px; padding: 14px; display: flex; flex-direction: column; gap: 9px; text-align: left; align-items: flex-start; justify-content: flex-start; font-weight: 500; transition: background-color .15s, border-color .15s; }
.draft-option:hover { border-color: #89A396; background: #FAFCFA; }
.draft-option[aria-pressed="true"] { background: #EAF2EC; color: var(--calm-text); border: 2px solid var(--calm-primary); box-shadow: inset 0 0 0 1px rgba(79,107,100,.08); }
.draft-option-name { display: inline-flex; font-size: 12px; font-weight: 820; color: #36594A; letter-spacing: .025em; }
.draft-option-excerpt { font-size: 12px; line-height: 1.5; font-weight: 480; color: #52665B; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.draft-option[aria-pressed="true"] .draft-option-excerpt { color: #3D594B; }
.draft-panel textarea { width: calc(100% - 36px); margin: 16px 18px 8px; padding: 17px; min-height: 150px; }
.draft-buttons { padding: 4px 18px 0; gap: 10px; }
.draft-buttons .button { min-height: 48px; font-size: 14px; }
.draft-panel .microcopy { padding: 10px 18px 0; }
.external-review-buttons { gap: 10px; }
.external-review-button { min-height: 55px; border-color: #CEDBD0; background: #fff; color: #3D6250; font-size: 13px; border-radius: 13px; }
.external-review-button:hover { background: #EFF4EE; border-color: #93B09C; }
.external-status { background: #EFF5EF; color: #3D6250; border: 1px solid #D4E2D7; font-size: 13px; }
.privacy-consent { background: #F1F5F0; border-color: #DCE6DB; border-radius: 14px; }
.privacy-consent label { cursor: pointer; }
.privacy-consent input { width: 22px; height: 22px; accent-color: var(--calm-primary); }
.privacy-consent strong { color: var(--calm-text); font-size: 13px; }
.privacy-consent small { color: var(--calm-muted); font-size: 12px; }
.survey-end .button { min-height: 52px; }
/* Business owner: information density and gentle, sober signals */
.insights-intro { padding-top: 72px; padding-bottom: 27px; }
.insights-intro h1 { font-size: clamp(39px,4.8vw,62px); }
.insights-intro > p { color: var(--calm-muted); }
.insights-alert { background: var(--calm-amber-surface); border-color: #E7D8BF; border-radius: 16px; color: #5F4C32; }
.insights-alert strong { color: #553F25; }
.insights-controls h2 { color: var(--calm-text); }
.time-filters { border-color: #CEDBD1; border-radius: 13px; background: #fff; }
.time-filters button,.insight-industry-button { min-height: 46px; color: #486356; border-radius: 10px; font-size: 13px; }
.time-filters button[aria-pressed="true"],.insight-industry-button[aria-pressed="true"] { background: var(--calm-primary); border-color: var(--calm-primary); color: #fff; }
.insights-category > span { color: var(--calm-muted); font-size: 12px; }
.insight-industry-button { border-color: #CEDBD1; }
.insights-metrics { gap: 14px; }
.insight-metric { border-color: var(--calm-border); border-radius: 17px; box-shadow: var(--calm-shadow); padding: 23px 21px; }
.insight-metric > span,.insight-metric small { color: var(--calm-muted); font-size: 13px; }
.insight-metric strong { color: var(--calm-text); font-size: 33px; }
.insights-columns { gap: 17px; }
.insights-card { border: 1px solid var(--calm-border); border-radius: 19px; box-shadow: var(--calm-shadow); min-height: auto; }
.insights-card h3 { color: var(--calm-text); }
.insights-card > p { color: var(--calm-muted); }
.insights-pill { background: #E7F0E9; color: #3F6250; }
.insight-bar-label { color: var(--calm-muted); }
.insight-bar-track { height: 11px; background: #E8EEE8; }
.insight-bar-fill { background: #799B88; }
.insight-recommendation { background: #EDF3EA; color: #355B43; padding: 19px; border: 1px solid #DDE8D8; border-radius: 14px; }
.insight-footnote { color: var(--calm-muted)!important; font-size: 12px!important; }
.link-legend { color: var(--calm-muted); }
.link-legend strong { color: #355847; }
.insights-personal { background: #ECF3EC; border-color: #D5E3D7; border-radius: 18px; }
.insights-personal p,.sample-response-items span { color: var(--calm-muted); }
.sample-response-items>div { border-color: var(--calm-border); }
.insight-roadmap-grid > div { border-top-color: #9AB7A8; }
.insight-roadmap-grid p { color: var(--calm-muted); }
.roadmap-number { color: #385E4D; background: #E6F0E8; }
.owner-insight-promo-box { background: #EDF3ED; border-color: var(--calm-border); border-radius: 21px; }
.owner-insight-promo-box p { color: var(--calm-muted); }
/* Tablets */
@media(max-width:1020px) {
  .experience-layout { gap: 30px; }
  .experience-intro { padding-top: 20px; }
  .topbar { min-height: 73px; }
}
/* Small tablet / mobile */
@media(max-width:790px) {
  .container { padding-left: 22px; padding-right: 22px; }
  .experience-layout { grid-template-columns: 1fr; padding-top: 34px; padding-bottom: 65px; gap: 20px; }
  .experience-intro { position: static; padding-top: 0; }
  .experience-intro h1 { font-size: clamp(36px,7vw,46px); }
  .experience-intro > p { font-size: 15px; }
  .intro-benefits { display: none; }
  .owner-preview-inline { display: none; }
  .demo-notice { margin-top: 13px; }
  .industry-selector { padding-bottom: 12px; }
  .survey-shell { max-width: 650px; }
  .draft-option-buttons { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .draft-option { flex: 0 0 245px; min-height: 125px; scroll-snap-align: start; }
  .insights-intro { padding-top: 48px; }
}
@media(max-width:520px) {
  .container { padding-left: 17px; padding-right: 17px; }
  .topbar { min-height: 69px; }
  .brand { font-size: 23px; }
  .experience-layout { padding-top: 20px; }
  .experience-intro h1 { font-size: 37px; margin: 9px 0; }
  .experience-intro > p { font-size: 14px; line-height: 1.6; }
  .intro-benefits { gap: 7px 12px; font-size: 12px; }
  .demo-notice { padding: 14px 16px; margin-top: 14px; }
  .demo-notice span { font-size: 12px; }
  .survey-head { padding: 19px 18px; }
  .survey-content { padding: 20px 16px 26px; }
  .rating-section { padding: 26px 0; }
  .rating-section h2 { font-size: 26px; }
  .rating-stars { gap: 5px; }
  .star-button { min-width: 47px; min-height: 53px; font-size: 28px; }
  .aspect-row { padding: 15px 13px; }
  .score-button { min-height: 49px; }
  .quick-votes { gap: 7px; }
  .draft-option { flex-basis: 220px; }
  .draft-buttons { flex-direction: column-reverse; }
  .draft-buttons .button { flex: none; width: 100%; }
  .external-review-buttons { grid-template-columns: 1fr; }
  .insights-metrics { gap: 10px; }
  .insight-metric { padding: 18px 14px; }
  .insight-metric > span,.insight-metric small { font-size: 12px; }
  .insight-metric strong { font-size: 28px; }
  .insights-card { padding: 20px; }
  .cta-panel { padding: 50px 20px; }
}
@media(max-width:350px) {
  .experience-layout { padding-left: 13px; padding-right: 13px; }
  .survey-content { padding-left: 12px; padding-right: 12px; }
  .rating-stars { gap: 3px; }
  .star-button { min-width: 46px; min-height: 52px; }
  .quick-votes { gap: 5px; }
  .score-button { font-size: 15px; }
  .topbar .brand { font-size: 19px; }
  .navigation .button-sm { font-size: 11px; padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important; }
}

.draft-swiping-hint { display: none; font-size: 12px; color: var(--calm-muted); margin: 0 18px 3px; }
@media(max-width:790px) { .draft-swiping-hint { display: block; } }