/* Translucent surfaces share the same color language across the application. */
.app-shell {
    --glass-edge: rgba(255, 255, 255, .88);
    --glass-surface: rgba(255, 255, 255, .68);
    --glass-raised: rgba(255, 255, 255, .58);
    --glass-shadow: 0 18px 50px rgba(40, 58, 100, .11), inset 0 1px 0 rgba(255, 255, 255, .9);
    background: radial-gradient(ellipse at 3% 4%, rgba(245, 194, 116, .25), transparent 30rem), radial-gradient(ellipse at 88% 7%, rgba(111, 162, 244, .25), transparent 34rem), radial-gradient(ellipse at 35% 78%, rgba(124, 205, 192, .15), transparent 35rem), #edf2fa;
    background-attachment: fixed;
}
.app-shell .side-nav, .app-shell .welcome-row, .app-shell .focus-card {
    background: var(--glass-surface);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}
.app-shell .focus-card:hover { border-color: rgba(255, 255, 255, .98); box-shadow: 0 22px 55px rgba(40, 58, 100, .14), inset 0 1px rgba(255,255,255,.95); }
.app-shell .settings-group, .app-shell .health-analytics, .app-shell .planner-week-review, .app-shell .planner-range-summary,
.app-shell .selected-day-panel, .app-shell .work-item-card, .app-shell .finance-accounts article,
.app-shell .review-metrics article, .app-shell .review-columns article, .app-shell .health-target-card {
    background: var(--glass-raised);
    border-color: rgba(203, 216, 237, .75);
    box-shadow: inset 0 1px rgba(255,255,255,.65);
}
.app-shell .quick-modal {
    background: rgba(249, 252, 255, .94);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 30px 90px rgba(19, 34, 65, .28), inset 0 1px #fff;
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    backdrop-filter: blur(30px) saturate(150%);
}
.app-shell .modal-backdrop { background: rgba(13, 25, 47, .48); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.app-shell .quiet-button, .app-shell .quick-types button { background-color: rgba(255, 255, 255, .58); border-color: rgba(191, 207, 230, .8); }
.app-shell .primary-button { background: linear-gradient(135deg, #658ff0, #385dcb); box-shadow: 0 9px 22px rgba(62, 98, 198, .25), inset 0 1px rgba(255,255,255,.4); }
.finance-row .transfer-accounts { color: #38679d; }
.finance-row .transfer-warning { color: #a76020; }
.theme-dark .finance-row .transfer-accounts { color: #a8cdfa; }
.theme-dark .finance-row .transfer-warning { color: #ffcd86; }
.app-shell .brand-bar .profile-button, .app-shell.theme-dark .brand-bar .profile-button { background: #081831; border-color: rgba(255,255,255,.18); color: #fff; }
.app-shell .brand-bar .profile-button:hover, .app-shell.theme-dark .brand-bar .profile-button:hover { background: #102749; }
.app-shell .brand-bar .theme-button, .app-shell.theme-dark .brand-bar .theme-button { background: #081831; border-color: rgba(255,255,255,.18); color: #fff; }
.app-shell .brand-bar .theme-button:hover, .app-shell.theme-dark .brand-bar .theme-button:hover { background: #102749; }
.app-shell .brand-bar .profile-person-icon { display: block; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.section-today .focus-grid { align-items: stretch; }
.section-today .dashboard-agenda-card { min-height: 0; height: 100%; }
.section-today .local-counts { grid-template-columns: repeat(3,minmax(0,1fr)); }
.section-today .weekly-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.section-today .weekly-metric { margin: 0; }
.section-today .insight-footnote { line-height: 1.9; }
@media (max-width: 1100px) { .section-today .dashboard-agenda-card { height: auto; } }
@media (max-width: 460px) { .section-today .local-counts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; } .section-today .local-counts button { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding: 8px 3px; gap: 3px; } .section-today .local-counts button > span { grid-row: auto; } .section-today .weekly-metrics { grid-template-columns: 1fr; } }
.app-shell.theme-dark {
    --glass-edge: rgba(151, 178, 221, .22);
    --glass-surface: rgba(28, 42, 66, .78);
    --glass-raised: rgba(39, 55, 82, .72);
    --glass-shadow: 0 18px 50px rgba(0, 0, 0, .23), inset 0 1px rgba(255, 255, 255, .08);
    background: radial-gradient(ellipse at 5% 3%, rgba(172, 117, 66, .18), transparent 30rem), radial-gradient(ellipse at 90% 5%, rgba(61, 112, 194, .25), transparent 34rem), radial-gradient(ellipse at 30% 75%, rgba(34, 132, 127, .12), transparent 35rem), #101b2c;
    background-attachment: fixed;
}
.theme-dark .focus-card:hover { border-color: rgba(165, 194, 239, .38); box-shadow: 0 22px 55px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.09); }
.theme-dark .settings-group, .theme-dark .health-analytics, .theme-dark .planner-week-review, .theme-dark .planner-range-summary,
.theme-dark .selected-day-panel, .theme-dark .work-item-card, .theme-dark .finance-accounts article,
.theme-dark .review-metrics article, .theme-dark .review-columns article, .theme-dark .health-target-card { background: var(--glass-raised); border-color: rgba(150, 177, 218, .22); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.theme-dark .quick-modal { background: rgba(25, 38, 59, .96); border-color: rgba(154, 180, 220, .35); box-shadow: 0 30px 90px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.09); }
.theme-dark .quiet-button, .theme-dark .quick-types button { background-color: rgba(60, 78, 108, .5); border-color: rgba(160, 183, 218, .25); color: #e1eafa; }
.plan-price { color: #1a3f70; }
.plan-disclaimer { border-color: rgba(196,158,83,.3); background: rgba(255,249,234,.72); }
.theme-dark .plan-price { color: #d8e5fb; }
.theme-dark .plan-price small { color: #a8b7ce; }
.theme-dark .plan-annual { color: #a7e1ca !important; }
.theme-dark .plan-disclaimer { border-color: rgba(196,158,83,.28); background: rgba(72,58,37,.32); color: #e6d2a5; }
.sales-page { background: radial-gradient(ellipse at 5% 8%, rgba(236,190,118,.23), transparent 31rem), radial-gradient(ellipse at 95% 5%, rgba(115,165,243,.22), transparent 35rem), #edf2fa; }
.sales-card { background: rgba(255,255,255,.68); border-color: rgba(255,255,255,.9); box-shadow: 0 18px 46px rgba(35,58,99,.1), inset 0 1px white; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sales-hero { border: 1px solid rgba(206,224,255,.45); box-shadow: 0 24px 55px rgba(21,42,78,.22), inset 0 1px rgba(255,255,255,.2); }
.control-hero { padding-block: clamp(30px, 4vw, 52px); }
.control-metrics .sales-card { display: grid; gap: 8px; }
.control-metrics .sales-card > span:not(.sales-icon) { color: #62718b; font-size: 13px; font-weight: 700; }
.control-metrics .sales-card > strong { color: #1a3f70; font-size: 30px; }
.control-metrics .sales-card > p { margin: 0; }
.sales-nav { margin: 18px 0; padding: 12px 18px; border: 1px solid rgba(255,255,255,.85); border-radius: 20px; background: rgba(255,255,255,.55); box-shadow: 0 12px 34px rgba(35,58,99,.08), inset 0 1px #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sales-identity img { border: 1px solid rgba(199,164,93,.5); box-shadow: 0 6px 15px rgba(18,41,75,.18); }
.sales-hero { position: relative; background: radial-gradient(ellipse at 12% 12%,rgba(99,166,211,.28),transparent 42%),radial-gradient(ellipse at 95% 100%,rgba(223,173,87,.11),transparent 45%),linear-gradient(120deg,#091a35,#193c68); }
.sales-badge { display: inline-block; padding: 6px 12px; border: 1px solid rgba(239,205,135,.3); border-radius: 12px; background: rgba(255,255,255,.07); }
.sales-card { transition: transform .2s ease, box-shadow .2s ease; }
.sales-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(35,58,99,.14), inset 0 1px white; }
.sales-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 15px; border: 1px solid currentColor; border-color: color-mix(in srgb,currentColor 20%,transparent); border-radius: 15px; box-shadow: inset 0 1px rgba(255,255,255,.9), 0 6px 16px rgba(35,58,99,.07); }
.sales-icon.blue { color: #4381d8; background: rgba(223,237,255,.8); }
.sales-icon.rose { color: #dc637b; background: rgba(255,230,235,.8); }
.sales-icon.green { color: #20967c; background: rgba(218,247,239,.8); }
.sales-icon.gold { color: #bc8525; background: rgba(255,243,213,.85); }
.plan-card .sales-tag { display: block; margin-bottom: 7px; }
.control-metrics .sales-card > .sales-icon { margin-bottom: 4px; }
.sales-page a:focus-visible { outline: 3px solid #7099e5; outline-offset: 4px; }
@media (max-width: 700px) { .sales-nav { padding: 12px; } .sales-identity { font-size: 16px; } .sales-links { justify-content: flex-end; } .sales-page .sales-button { padding: 10px 12px; } }
@media (prefers-reduced-transparency: reduce) {
    .app-shell { --glass-surface: #f8faff; --glass-raised: #f5f8fd; }
    .app-shell.theme-dark { --glass-surface: #1c2a42; --glass-raised: #273752; }
}

/* The public introduction and the local control preview share the brand system. */
.sales-page { min-height: 100vh; padding: 1px 0 24px; background: radial-gradient(circle at 5% 2%,rgba(238,194,128,.24),transparent 26rem),radial-gradient(circle at 92% 11%,rgba(129,170,241,.28),transparent 36rem),radial-gradient(circle at 12% 65%,rgba(115,209,190,.12),transparent 30rem),#eef3fa; }
.sales-wrap { width: min(1200px, calc(100% - 48px)); }
.sales-nav { min-height: 74px; border-radius: 23px; }
.sales-links a:not(.sales-button) { padding: 9px 3px; transition: color .2s; }
.sales-links a:not(.sales-button):hover { color: #1d5ba2; }
.sales-page .sales-button { gap: 12px; box-shadow: 0 9px 22px rgba(17,47,91,.14),inset 0 1px rgba(255,255,255,.16); transition: transform .2s,box-shadow .2s; }
.sales-page .sales-button:hover { transform: translateY(-2px); box-shadow: 0 13px 25px rgba(17,47,91,.2); }
.sales-hero { isolation: isolate; border-radius: 30px; }
.sales-hero::before { content: ""; position: absolute; width: 340px; height: 340px; inset: -180px auto auto -100px; border: 1px solid rgba(225,239,255,.14); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.025),0 0 0 98px rgba(255,255,255,.018); z-index: -1; pointer-events: none; }
.sales-hero-layout,.control-hero-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(270px,.8fr); align-items: center; gap: clamp(28px,5vw,76px); }
.sales-hero-layout { padding: clamp(32px,5vw,64px); }
.sales-hero h1 { line-height: 1.55; letter-spacing: -.035em; }
.sales-hero h1 em { color: #f1ce8a; font-style: normal; }
.sales-hero-copy > p { max-width: 530px; font-size: 15px; }
.sales-hero-actions,.control-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.sales-hero-actions .sales-button,.control-hero-actions .sales-button { margin: 0; }
.sales-outline-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 10px 18px; border: 1px solid rgba(220,234,255,.28); border-radius: 14px; background: rgba(255,255,255,.06); color: #edf4ff; font-size: 13px; font-weight: 700; transition: background .2s; }
.sales-outline-button:hover { color: white; background: rgba(255,255,255,.14); }
.sales-hero-note { display: flex; align-items: center; gap: 8px; margin-top: 26px; color: #b9cbe0; font-size: 11px; }
.sales-pulse { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #63dcb4; box-shadow: 0 0 0 4px rgba(99,220,180,.12); }
.sales-preview,.control-status { border: 1px solid rgba(216,231,255,.24); background: linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.055)); border-radius: 25px; box-shadow: 0 22px 48px rgba(0,10,30,.22),inset 0 1px rgba(255,255,255,.18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sales-preview { padding: 20px; transform: rotate(-2deg); }
.sales-preview-head { display: flex; align-items: center; gap: 10px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.14); }
.sales-preview-head > div,.sales-preview-row > div { display: grid; gap: 3px; }
.sales-preview-head strong,.sales-preview-row strong { font-size: 13px; color: #fff; }
.sales-preview-head small,.sales-preview-row small,.sales-preview-title small { font-size: 10px; color: #bdcde2; }
.sales-preview-logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(244,207,138,.17); color: #f5d596; }
.sales-preview-dots,.sales-preview-arrow { margin-inline-start: auto; color: #b5c9e1; }
.sales-preview-title { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 12px; font-size: 13px; font-weight: 700; }
.sales-preview-row { display: flex; align-items: center; gap: 11px; margin-top: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.07); }
.sales-preview-row .sales-icon { width: 38px; height: 38px; margin: 0; border-radius: 12px; box-shadow: none; }
.sales-value-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 34px; padding: 19px; color: #55708d; font-size: 12px; font-weight: 700; }
.sales-value-strip > span { display: inline-flex; align-items: center; gap: 8px; }
.sales-value-strip svg { color: #b98b3e; }
.sales-section { padding-top: 55px; }
.sales-section h2 { font-size: clamp(21px,2vw,27px); font-weight: 800; color: #172f50; }
.sales-card { min-width: 0; border-radius: 23px; padding: 25px; }
.sales-card h3 { margin-top: 14px; font-weight: 800; }
.sales-card p { margin-bottom: 0; }
.plan-card { min-height: 200px; }
.plan-card:nth-child(2) { border-color: rgba(114,166,221,.48); background: linear-gradient(145deg,rgba(255,255,255,.85),rgba(231,242,255,.68)); }
.control-hero-layout { padding: clamp(30px,4vw,52px); }
.control-hero h1 { font-size: clamp(28px,3.5vw,43px); }
.control-status { display: grid; justify-items: start; gap: 9px; padding: 24px; }
.control-status .sales-icon { margin: 0 0 7px; }
.control-status > span:not(.sales-icon),.control-status small { font-size: 12px; color: #c2d2e5; }
.control-status > strong { font-size: 22px; color: white; }
.control-status > div { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 11px; background: rgba(74,201,157,.12); color: #b8efd9; font-size: 11px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; }
.section-heading h2 { margin: 4px 0; }
.section-heading p { margin: 0; color: #708099; font-size: 13px; }
.section-eyebrow { color: #b4873e; font-size: 11px; font-weight: 800; }
.section-chip { padding: 7px 12px; border: 1px solid #cfddec; border-radius: 11px; background: rgba(255,255,255,.52); color: #59708b; font-size: 11px; font-weight: 700; }
.section-chip.pending { border-color: #ecd8af; color: #9a6b22; background: rgba(255,247,226,.7); }
.control-metrics .sales-card { position: relative; min-height: 180px; }
.control-metrics .sales-card > strong { font-size: 32px; line-height: 1.2; }
.control-insight-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,1fr); gap: 16px; margin-top: 22px; }
.control-card-title { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; }
.control-card-title .sales-icon { flex: none; margin: 0; }
.control-card-title h3 { margin: 0 0 3px; }
.control-card-title p { margin: 0; font-size: 11px; }
.control-breakdown-list { display: grid; gap: 13px; }
.control-breakdown-row { display: grid; grid-template-columns: minmax(95px,auto) minmax(50px,1fr) 26px; align-items: center; gap: 12px; color: #60728d; font-size: 12px; }
.control-breakdown-row strong { color: #263f63; text-align: left; }
.control-breakdown-track { overflow: hidden; height: 7px; border-radius: 8px; background: rgba(112,146,192,.14); }
.control-breakdown-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#61a9e9,#d5ad66); }
.control-progress-card > strong { display: block; color: #1a3f70; font-size: 40px; line-height: 1.3; }
.control-progress-card > span { color: #6b7b93; font-size: 12px; }
.control-progress-card > p { margin: 18px 0; }
.control-link { display: inline-flex; gap: 8px; color: #356cac; font-size: 12px; font-weight: 800; }
.sales-faq .control-link { margin-top: 15px; }
.control-roadmap { display: grid; gap: 0; margin-top: 22px; }
.control-roadmap > div { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(145,167,198,.22); }
.control-roadmap > div:last-child { border-bottom: 0; }
.control-roadmap strong { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px; color: #ad7a2f; background: rgba(250,225,173,.42); }
.control-roadmap span { color: #263f60; font-size: 13px; font-weight: 700; }
.control-roadmap small { margin-inline-start: auto; color: #7a889c; font-size: 11px; }
@media (max-width: 760px) {
    .sales-wrap { width: min(100% - 28px, 600px); }
    .sales-nav { align-items: center; flex-wrap: wrap; }
    .sales-hero-layout,.control-hero-layout { grid-template-columns: 1fr; gap: 28px; }
    .sales-preview { transform: none; }
    .sales-grid { grid-template-columns: 1fr; }
    .sales-section { padding-top: 38px; }
    .sales-value-strip { justify-content: flex-start; gap: 12px 22px; }
    .control-status { grid-template-columns: auto 1fr; align-items: center; }
    .control-status .sales-icon { grid-row: span 3; margin: 0 0 0 4px; }
    .control-status > div { grid-column: 1 / -1; }
    .control-insight-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sales-card,.sales-page .sales-button { transition: none; } .sales-card:hover,.sales-page .sales-button:hover { transform: none; } }
@media (max-width: 720px) {
    .app-shell .side-nav { scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
    .app-shell .side-nav::-webkit-scrollbar { display: none; }
    .app-shell .nav-item { min-width: 64px; scroll-snap-align: start; font-size: 10px; }
}