:root { color-scheme: light dark; font-family: Inter, system-ui, sans-serif; --ww-green: #2e7d32; --ww-surface: color-mix(in srgb, Canvas 94%, var(--ww-green)); --ww-border: color-mix(in srgb, CanvasText 16%, transparent); }
body { margin: 0; background: Canvas; color: CanvasText; }
.business-page { max-width: 1500px; margin: 0 auto; padding: clamp(1.1rem, 2vw, 2rem); }
.business-page-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.business-page-header h1, .business-login h1 { margin: .15rem 0 0; font: 700 clamp(2rem, 4vw, 3.4rem)/1 Barlow, sans-serif; }
.eyebrow { margin: 0; color: var(--ww-green); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.source-link, .source-links a { color: var(--ww-green); font-weight: 650; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem 1rem; }
.surface-map-link { display: inline-flex; align-items: center; min-height: 2.35rem; padding: 0 .85rem; color: white; background: var(--ww-green); text-decoration: none; font-weight: 700; border-radius: .25rem; }
.scorecard-freshness { color: color-mix(in srgb, CanvasText 64%, transparent); }
.portal-kpi-summary-card { margin-bottom: 1.25rem; }
.business-area-mark { align-items: center; background: var(--ww-green); border-radius: .45rem; color: white; display: inline-flex; font: 750 .8rem Barlow, sans-serif; height: 2.5rem; justify-content: center; letter-spacing: .03em; width: 2.5rem; }
.direction-summary { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(17rem, .7fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.25rem, 3vw, 2.4rem) 0; margin-bottom: clamp(2rem, 4vw, 3.5rem); border-block: 1px solid var(--ww-border); }
.direction-summary h2 { max-width: 50rem; margin: .45rem 0 .8rem; font: 700 clamp(1.55rem, 3vw, 2.45rem)/1.1 Barlow, sans-serif; }
.direction-summary p, .direction-summary aside span { color: color-mix(in srgb, CanvasText 68%, transparent); line-height: 1.55; }
.direction-summary aside { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.direction-summary aside strong { margin: .4rem 0; font: 700 1.25rem Barlow, sans-serif; }
.direction-summary aside span { font-size: .92rem; }
.direction-summary nav { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-top: 1rem; }
.direction-summary a { color: var(--ww-green); font-weight: 700; }
.scorecard-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.scorecard-heading h2 { margin: .25rem 0 0; font: 700 clamp(1.45rem, 3vw, 2rem) Barlow, sans-serif; }
.family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.family-section { min-width: 0; }
.family-section > header { border-bottom: 2px solid var(--ww-green); padding: .5rem 0 .75rem; }
.family-section h2 { margin: 0; font: 700 1.3rem Barlow, sans-serif; }
.family-section header span { color: color-mix(in srgb, CanvasText 55%, transparent); font-size: .75rem; overflow-wrap: anywhere; }
.family-section dl { margin: 0; }
.metric-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--ww-border); }
.metric-row dt { min-width: 0; }
.metric-row dt span, .metric-row dt small { display: block; }
.metric-row dt span { font-weight: 650; }
.metric-row dt small { margin-top: .25rem; color: color-mix(in srgb, CanvasText 60%, transparent); line-height: 1.35; }
.metric-row dd { margin: 0; font: 700 1.1rem Barlow, sans-serif; white-space: nowrap; }
.business-state { display: grid; gap: .55rem; padding: 1.25rem 0; border-block: 1px solid var(--ww-border); max-width: 65rem; }
.business-state-error { color: #b42318; }
.source-links { display: flex; gap: 1rem; margin-top: .5rem; }
.page-intro { max-width: 58rem; margin: .8rem 0 0; color: color-mix(in srgb, CanvasText 70%, transparent); font-size: 1.05rem; line-height: 1.55; }
.boundary-strip, .surface-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.boundary-strip { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.boundary-strip article, .surface-card { min-width: 0; padding: 1.15rem 0; border-top: 2px solid var(--ww-border); }
.boundary-strip article:first-child, .surface-card-featured { border-top-color: var(--ww-green); }
.boundary-strip h2, .surface-section h2, .surface-card h3 { font-family: Barlow, sans-serif; }
.boundary-strip h2 { margin: .45rem 0 .6rem; font-size: 1.35rem; }
.boundary-strip p, .surface-card p { color: color-mix(in srgb, CanvasText 66%, transparent); line-height: 1.5; }
.boundary-strip code { display: block; overflow-wrap: anywhere; color: var(--ww-green); font-size: .82rem; }
.surface-kicker { margin: .8rem 0 0; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.surface-status { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 .55rem; border-radius: 99rem; background: color-mix(in srgb, CanvasText 9%, transparent); font-size: .72rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.surface-status.is-active { color: #137333; background: #e6f4ea; }
.surface-status.is-planned, .surface-status.is-target { color: #174ea6; background: #e8f0fe; }
.surface-status.is-exception { color: #8a3b12; background: #fce8dc; }
.surface-section { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.section-heading { max-width: 52rem; margin-bottom: 1rem; }
.section-heading h2 { margin: .25rem 0 0; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.surface-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.surface-card h3 { margin: .8rem 0 .35rem; font-size: 1.2rem; }
.surface-card strong { display: block; overflow-wrap: anywhere; }
.surface-grid-compact .surface-card { min-height: 10rem; }
.plan-reviewed { margin: 0; color: color-mix(in srgb, CanvasText 58%, transparent); font-size: .82rem; white-space: nowrap; }
.north-star-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(1rem, 3vw, 2rem); border-block: 1px solid var(--ww-border); }
.north-star-grid article { min-width: 0; }
.north-star-grid h2, .strategy-section h2, .strategy-section h3, .roadmap-section h2, .roadmap-section h3, .maturity-legend h2, .change-control h2 { font-family: Barlow, sans-serif; }
.north-star-grid h2 { margin: .45rem 0 .7rem; font-size: clamp(1.45rem, 2.7vw, 2rem); }
.north-star-grid p:last-child, .pillar-row p, .adoption-grid p, .strategy-callout > p, .demo-boundary > div > p, .demo-boundary li { color: color-mix(in srgb, CanvasText 68%, transparent); line-height: 1.55; }
.strategy-section, .roadmap-section { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.pillar-grid { border-top: 1px solid var(--ww-border); }
.pillar-row { display: grid; grid-template-columns: minmax(13rem, .55fr) minmax(0, 1.45fr); gap: clamp(1rem, 3vw, 3rem); padding: 1rem 0; border-bottom: 1px solid var(--ww-border); }
.pillar-row h3, .pillar-row p { margin: 0; }
.pillar-row h3 { font-size: 1.08rem; }
.adoption-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.adoption-grid article { min-width: 0; padding-top: 1rem; border-top: 2px solid var(--ww-border); }
.adoption-grid article > span { color: var(--ww-green); font: 700 .78rem Barlow, sans-serif; letter-spacing: .08em; }
.adoption-grid h3 { margin: .55rem 0 .4rem; font-size: 1.2rem; }
.adoption-grid p { margin: 0; }
.strategy-callout { display: grid; grid-template-columns: minmax(14rem, .6fr) minmax(0, 1.4fr); gap: clamp(1rem, 3vw, 3rem); margin-top: 1.5rem; padding: 1.25rem; background: var(--ww-surface); }
.strategy-callout h3 { margin: .35rem 0 0; font-size: 1.25rem; }
.strategy-callout > p { margin: 0; }
.demo-boundary { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(1.5rem, 4vw, 3rem); border-block: 1px solid var(--ww-border); }
.demo-boundary h2 { margin: .4rem 0 .8rem; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.demo-boundary ul { margin: 0; padding-left: 1.2rem; }
.demo-boundary li + li { margin-top: .65rem; }
.plan-next-links { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.maturity-legend { padding-block: clamp(1rem, 3vw, 2rem); border-block: 1px solid var(--ww-border); }
.maturity-legend ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.maturity-legend li { min-width: 0; }
.maturity-legend li p { margin: .6rem 0 0; color: color-mix(in srgb, CanvasText 62%, transparent); font-size: .82rem; line-height: 1.45; }
.maturity-marker { display: inline-flex; align-items: center; min-height: 1.7rem; max-width: 100%; padding: 0 .6rem; border-radius: 99rem; font-size: .72rem; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.maturity-decided { color: #5f6368; background: #eef0f1; }
.maturity-scaffolded { color: #6f4b00; background: #fff3cd; }
.maturity-local { color: #174ea6; background: #e8f0fe; }
.maturity-production { color: #137333; background: #e6f4ea; }
.maturity-pilot { color: #6a1b9a; background: #f3e5f5; }
.maturity-commercial { color: #0b5740; background: #d7f4e8; }
.roadmap-table { border-top: 1px solid var(--ww-border); }
.roadmap-dimension > h3 { margin: 1.4rem 0 .35rem; color: var(--ww-green); font: 750 .82rem Barlow, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.roadmap-track h3 small { color: color-mix(in srgb, CanvasText 55%, transparent); display: block; font: 600 .72rem Inter, sans-serif; margin-top: .2rem; }
.roadmap-table-header, .roadmap-track { display: grid; grid-template-columns: minmax(12rem, .85fr) minmax(8.5rem, .45fr) minmax(15rem, 1.35fr) minmax(15rem, 1.35fr); gap: 1rem; align-items: start; }
.roadmap-table-header { padding: .6rem 0; color: color-mix(in srgb, CanvasText 58%, transparent); font-size: .72rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.roadmap-track { padding: 1rem 0; border-top: 1px solid var(--ww-border); }
.roadmap-track h3, .roadmap-track p { margin: 0; }
.roadmap-track h3 { font-size: 1.08rem; }
.roadmap-track p { color: color-mix(in srgb, CanvasText 68%, transparent); font-size: .88rem; line-height: 1.45; }
.roadmap-track p strong { display: none; color: CanvasText; }
.wave-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ww-border); }
.wave-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ww-border); }
.wave-list li > span { color: var(--ww-green); font: 700 1rem Barlow, sans-serif; }
.wave-list h3, .wave-list p { margin: 0; }
.wave-list h3 { font-size: 1.2rem; }
.wave-list p { margin-top: .35rem; color: color-mix(in srgb, CanvasText 65%, transparent); line-height: 1.5; }
.change-control { max-width: 64rem; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: 1.25rem; background: var(--ww-surface); }
.change-control h2 { margin: .35rem 0 .6rem; }
.change-control p:last-child { margin-bottom: 0; color: color-mix(in srgb, CanvasText 68%, transparent); line-height: 1.55; }
.business-login-body { min-height: 100vh; display: grid; place-items: center; background: #f4f7f4; color: #142014; }
.business-login { width: min(28rem, calc(100vw - 2rem)); background: white; padding: 2rem; box-shadow: 0 1.5rem 4rem #1420141f; }
.business-login form, .business-login label { display: grid; gap: .45rem; }
.business-login form { gap: 1rem; margin-top: 1.5rem; }
.business-login input { padding: .8rem; border: 1px solid #aeb8ae; border-radius: .25rem; font: inherit; }
.business-login button { border: 0; padding: .85rem; background: var(--ww-green); color: white; font: 700 1rem Inter, sans-serif; cursor: pointer; }
@media (max-width: 1050px) { .family-grid { grid-template-columns: 1fr; } .surface-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .maturity-legend ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } .roadmap-table-header, .roadmap-track { grid-template-columns: minmax(11rem, .75fr) minmax(8rem, .4fr) minmax(0, 1.2fr); } .roadmap-table-header span:last-child { display: none; } .roadmap-track p:last-child { grid-column: 3; } .roadmap-track p:last-child strong { display: block; } }
@media (max-width: 760px) { .boundary-strip, .surface-grid, .north-star-grid, .adoption-grid, .direction-summary, .demo-boundary, .strategy-callout { grid-template-columns: 1fr; } .maturity-legend ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .roadmap-table-header { display: none; } .roadmap-track { grid-template-columns: 1fr; gap: .65rem; } .roadmap-track p:last-child { grid-column: auto; } .roadmap-track p strong { display: block; margin-bottom: .15rem; } }
@media (max-width: 600px) { .business-page-header { align-items: start; flex-direction: column; } .header-actions, .scorecard-heading, .plan-next-links { align-items: start; justify-content: flex-start; flex-direction: column; } .metric-row { grid-template-columns: 1fr; gap: .35rem; } .metric-row dd { white-space: normal; } .pillar-row { grid-template-columns: 1fr; gap: .35rem; } .maturity-legend ol { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) { .family-section { animation: reveal .45s ease both; } .family-section:nth-child(2) { animation-delay: .08s; } .family-section:nth-child(3) { animation-delay: .16s; } @keyframes reveal { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } } }