/* Sort My Shifts visual system. */
:root { --ink:#edf4fa; --muted:#b5c3d4; --muted-2:#9aaec3; --night:#0a1525; --panel:#111f32; --line:#304259; --cyan:#64ddd1; --cyan-deep:#37b9ad; --surface-soft:#182a40; --input:#0d1b2d; --button-text:#09282a; --radius-lg:18px; --shadow:0 8px 28px #00000014; }
body.light-mode { --ink:#142b43; --muted:#4e6479; --muted-2:#546b80; --night:#f1f5f9; --panel:#fff; --line:#d6e0e8; --cyan:#08796f; --cyan-deep:#076f65; --surface-soft:#f4f8fa; --input:#fff; --button-text:#fff; --amber:#86540b; --blue:#315dae; --violet:#7b489d; --danger:#b93030; }
body,body.light-mode { background:var(--night); font-size:1rem; overflow-x:visible; }
html { scroll-padding-top:1rem; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.app-header { max-width:none; height:auto; min-height:88px; padding:16px max(24px,calc((100vw - 1240px)/2)); background:var(--panel)!important; }
.brand { flex-shrink:0; gap:12px; }.brand-logo { width:42px; height:42px; border-radius:12px; box-shadow:none; }
.brand-lockup strong { font-size:1.125rem; font-weight:780; letter-spacing:-.035em; line-height:1.3; }
.brand .brand-lockup small { font-size:.75rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); border:0; padding:0; }
.header-actions { gap:12px; }.theme-toggle { background:var(--surface-soft)!important; min-height:44px; font-size:.875rem; border-radius:10px; }.text-button { min-height:44px; font-size:.875rem; color:var(--muted); }
.app-shell { max-width:1288px; padding:30px 24px 16px; }
.product-intro { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:0 0 24px; }
.product-intro h1 { font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.15; letter-spacing:-.045em; max-width:none; }.product-intro h1 span { color:var(--cyan); }
.eyebrow,.step-kicker { font-size:.75rem; letter-spacing:.09em; line-height:1.5; }
.intro-summary { margin:10px 0 0; color:var(--muted); font-size:1rem; }.intro-explanation { margin-top:9px; max-width:78ch; }.intro-explanation summary { color:var(--cyan); cursor:pointer; font-size:.875rem; }.intro-explanation p { color:var(--muted); font-size:1rem; }
.local-badge { display:grid; gap:5px; flex-shrink:0; padding:14px 0 14px 26px; border-left:1px solid var(--line); color:var(--muted); font-size:.875rem; }.local-badge small { font-size:.75rem; }.beta-label { color:var(--cyan); font-weight:750; letter-spacing:.09em; font-size:.75rem; }
.mode-switcher,.light-mode .mode-switcher { grid-template-columns:1fr 1fr 1fr; max-width:none; gap:6px; border:0; border-radius:13px; padding:5px; background:var(--surface-soft); box-shadow:none; margin-bottom:22px; }
.mode-button { min-height:66px; border-radius:9px; padding:12px 18px; }.mode-button.active { background:var(--panel); color:var(--cyan); border-color:var(--line); box-shadow:0 2px 6px #00000008; }.mode-button strong { font-size:1rem; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }.mode-button small { color:var(--muted); font-size:.875rem; }
.soon-label { color:var(--muted); border:1px solid var(--line); border-radius:5px; font-weight:600; font-size:.75rem; padding:1px 5px; white-space:nowrap; }
.quick-calendar,.builder-card,.results-card,.light-mode .quick-calendar,.light-mode .builder-card,.light-mode .results-card { background:var(--panel); box-shadow:var(--shadow); padding:28px; }
.quick-heading { margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--line); align-items:center; }.quick-heading h2 { font-size:1.65rem; line-height:1.25; }.quick-heading p:last-child { color:var(--muted); font-size:1rem; }.quick-badge { font-size:.75rem; border-color:var(--line); color:var(--muted); background:var(--surface-soft); }
.quick-layout { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); gap:32px; align-items:start; }.quick-controls { min-width:0; }.quick-grid { grid-template-columns:1fr 1fr; gap:18px 14px; }.quick-grid .field:has(#quickPattern) { grid-column:1/-1; }
.field,.field-help,.question-help,.quick-duty label,.duty-change-fields .field { font-size:.875rem; line-height:1.5; }.field-help { font-weight:400; margin:2px 0 8px; }
input[type=search] { width:100%; min-height:48px; border:1px solid var(--line); border-radius:9px; background:var(--input); color:var(--ink); padding:10px 12px; font-size:1rem; }
input[type=number],input[type=time],input[type=text],input[type=date],select,textarea,.light-mode input[type=number],.light-mode input[type=time],.light-mode input[type=text],.light-mode input[type=date],.light-mode select,.light-mode textarea { background-color:var(--input); color:var(--ink); border-radius:9px; min-height:48px; font-size:1rem; min-width:0; max-width:100%; }
.input-with-unit,.light-mode .input-with-unit { background:var(--input); }.input-with-unit em { font-size:.875rem; }select { text-overflow:ellipsis; }
.library-info,.light-mode .library-info { background:var(--surface-soft); border-radius:10px; padding:13px 15px; }.library-info strong { font-size:.875rem; line-height:1.5; }.library-info span,.quick-caveat,.export-policy,.calendar-file-ready p { font-size:.875rem; line-height:1.5; }.library-info a { overflow-wrap:anywhere; }.quick-source { margin-top:18px; }
.custom-pattern-link { padding-left:0; color:var(--cyan); text-align:left; text-decoration:underline; text-underline-offset:3px; }
.primary-button,.secondary-button { min-height:48px; border-radius:9px; font-size:.9375rem; font-weight:700; text-decoration:none; }.primary-button { background:var(--cyan); color:var(--button-text); }.primary-button:hover { transform:none; }.secondary-button { background:var(--surface-soft); color:var(--ink); }
.quick-actions { gap:10px; margin-top:20px; }.export-policy { color:var(--muted); margin:12px 0; }.quick-caveat { color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:18px; }
.rota-preview { background:var(--surface-soft); border:1px solid var(--line); border-radius:13px; padding:20px; }.preview-heading { display:flex; align-items:center; gap:12px; justify-content:space-between; }.preview-heading h3 { font-size:1.0625rem; }.preview-period { color:var(--muted); font-size:.75rem; white-space:nowrap; border:1px solid var(--line); border-radius:6px; padding:5px 8px; }.preview-summary { font-size:.875rem; color:var(--muted); margin:12px 0 18px; min-height:1.5em; }
.preview-days { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px; }.preview-day { display:grid; gap:5px; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:7px; padding:10px; background:var(--panel); min-width:0; }.preview-day.d { border-left-color:var(--cyan); }.preview-day.b { border-left-color:var(--amber); }.preview-day.o { border-left-color:var(--line); background:transparent; }
.preview-day span { color:var(--muted); font-size:.75rem; }.preview-day strong { font-size:.875rem; font-weight:650; line-height:1.4; }.preview-day small { color:var(--muted); font-size:.75rem; line-height:1.5; }.preview-day.o strong { color:var(--muted); font-weight:500; }.preview-footnote { margin:16px 0 0; font-size:.75rem; color:var(--muted); }.preview-empty { grid-column:1/-1; padding:22px 4px; color:var(--muted); font-size:1rem; }
.workspace { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:20px; }.steps { margin:20px 0; gap:5px; }.step-button { font-size:.875rem; min-height:48px; background:var(--surface-soft); }
.preview-access-note { display:flex; align-items:center; gap:9px; margin:16px 0 2px; padding:10px 12px; border:1px solid rgba(105,228,221,.24); border-radius:10px; background:rgba(105,228,221,.07); color:var(--muted); font-size:.82rem; line-height:1.4; }.preview-access-note strong { color:var(--cyan); font-size:.78rem; white-space:nowrap; }.preview-access-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(105,228,221,.12); }
.choice-card,.check-card,.life-rule,.duty-change-row,.quick-duty,.day-choice,.light-mode .choice-card,.light-mode .check-card,.light-mode .life-rule,.light-mode .duty-change-row,.light-mode .quick-duty,.light-mode .day-choice { background:var(--surface-soft); }
.choice-card strong,.check-card strong,.life-rule-heading strong,.question-label { font-size:1rem; }
.choice-card small,.check-card small,.section-intro p,.notice-card p,.published-preset p,.recognised-card p,.safety-details summary,.microcopy,.field-error,.life-rules:empty::before { font-size:.875rem; line-height:1.5; }
.published-preset,.duty-change-section,.optional-limit-fields,.light-mode .optional-limit-fields,.light-mode .duty-change-section,.quick-custom,.light-mode .quick-custom { background:var(--surface-soft); }
.quick-time-grid { grid-template-columns:1fr; }.quick-duty { grid-template-columns:1fr 1fr 1fr; align-items:center; }.quick-duty > strong { grid-column:auto; font-size:.875rem; }.quick-duty label input { width:100%; }.quick-duty > strong .duty-code { flex-shrink:0; }
.three-choices { grid-template-columns:1fr; }.three-choices .choice-card { min-height:58px; }.anomaly-editor,.shift-table td { background:var(--surface-soft); }.shift-table th { font-size:.75rem; }.shift-table input { font-size:1rem; min-height:44px; }.shift-table td:first-child { font-size:.875rem; }
.calendar-file-ready { flex-direction:column; align-items:stretch; padding:16px; }.calendar-file-actions { flex-wrap:wrap; }.calendar-file-ready strong { font-size:1rem; }.status-pill { font-size:.875rem; border-radius:7px; max-width:200px; }.status-pill span { display:none; }
.empty-result { min-height:280px; padding:36px 12px; }.empty-result p { font-size:1rem; }.empty-icon { width:54px; height:54px; border-radius:14px; background:var(--surface-soft); color:var(--cyan); }
.summary-chip,.option-tab,.metric small,.ledger-row small,.organisation-impact,.disclaimer,.calendar-heading p { font-size:.875rem; }.option-summary p:last-child { font-size:1rem; }.option-summary h3 { font-size:1.3rem; }.score-ring { display:none; }
.calendar-scroll { max-width:100%; }.shift-block small,.day-cell > span { font-size:.75rem; }.shift-block b { font-size:.875rem; }.day-cell { min-width:110px; }.pattern-warnings li { font-size:.875rem; }.form-actions { flex-wrap:wrap; }.form-actions > button { flex:1; }.boundary-options { grid-template-columns:1fr; }
.life-intro { display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; padding:38px 0; }.life-intro img { width:100%; height:auto; border-radius:15px; display:block; }.life-intro h2 { font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.2; }.life-intro p:not(.step-kicker) { color:var(--muted); font-size:1rem; max-width:49ch; }.life-intro .future-note { font-size:.875rem!important; }
.site-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px 0; }.site-footer p { font-size:.875rem; color:var(--muted); }.site-footer nav { display:flex; gap:10px; }.site-footer p span { display:block; font-size:.75rem; margin-top:3px; }
.product-dialog { width:min(1060px,calc(100% - 32px)); max-height:85dvh; overflow:auto; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:18px; padding:36px; box-shadow:0 24px 80px #0006; }.product-dialog::backdrop { background:#031225ad; backdrop-filter:blur(3px); }.small-dialog { max-width:620px; }
.product-dialog h2 { font-size:1.65rem; padding-right:26px; line-height:1.3; }.product-dialog p,.product-dialog li { font-size:1rem; color:var(--muted); }.product-dialog li { margin-bottom:10px; }.dialog-close { position:absolute; right:12px; top:10px; width:44px; height:44px; border:0; border-radius:8px; color:var(--muted); background:var(--surface-soft); font-size:1.8rem; cursor:pointer; }.product-dialog .notice-card { margin:20px 0; }.product-dialog .dialog-note { font-size:.875rem; border-top:1px solid var(--line); padding-top:18px; }
.contact-dialog { max-width:920px; }.contact-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:stretch; }.contact-copy { padding:12px 12px 12px 0; }.contact-copy h2 { max-width:16ch; font-size:clamp(1.8rem,4vw,2.65rem); }.contact-action { align-self:center; padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); }.contact-action h3 { margin:0 0 10px; font-size:1.25rem; }.contact-action .primary-button { margin-top:12px; width:100%; }.contact-points { display:grid; gap:10px; margin-top:24px; color:var(--ink); font-weight:650; }.contact-points span::before { content:'✓'; color:var(--cyan); margin-right:9px; }
.dialog-actions { display:flex; gap:10px; margin-top:20px; }.dialog-actions .primary-button { min-width:210px; }.product-dialog .text-button { margin-top:12px; }
.small-dialog [data-switch-dialog="waitlistDialog"], .small-dialog [data-open-dialog="waitlistDialog"] { display:block; width:100%; margin-top:18px; }.small-dialog > .text-button { display:block; width:100%; }.contact-dialog [data-switch-dialog="waitlistDialog"], .contact-dialog [data-open-dialog="waitlistDialog"] { width:100%; }.waitlist-link { min-width:210px; }.paid-export-actions #joinExportWaitlist { border-color:var(--cyan); color:var(--ink); }
.success-dialog { text-align:center; }.success-dialog h2 { padding-right:0; }.success-dialog .primary-button { width:100%; margin-top:18px; }.success-mark { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 18px; border-radius:50%; background:var(--cyan); color:#062238; font-size:2rem; font-weight:800; }
.four-choices { grid-template-columns:repeat(4,1fr); }.four-choices .choice-card { min-height:82px; }.drop-duty-choices { grid-template-columns:repeat(3,1fr); margin-top:14px; }.drop-duty-choice { min-height:76px; }
.drop-cycle-heading { display:grid; gap:3px; margin:20px 0 10px; color:var(--ink); }.drop-cycle-heading small { color:var(--muted); font-size:.875rem; font-weight:400; }.drop-position-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.drop-position { display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); cursor:pointer; }.drop-position:has(input:checked) { border-color:var(--cyan); }.drop-position input { margin-top:2px; accent-color:var(--cyan-deep); }.drop-position span { display:grid; gap:2px; }.drop-position strong { color:var(--ink); font-size:.875rem; }.drop-position small { color:var(--muted); font-size:.75rem; }.drop-position.unavailable { opacity:.6; cursor:default; }
.waitlist-form { display:grid; gap:15px; margin-top:22px; }.waitlist-form .field { display:grid; gap:6px; }.waitlist-form .field > span { font-weight:650; color:var(--ink); }.waitlist-form textarea { resize:vertical; min-height:100px; }.waitlist-consent { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:.82rem; line-height:1.45; }.waitlist-consent input { margin-top:3px; flex:0 0 auto; accent-color:var(--cyan); }.waitlist-form button[type=submit] { width:100%; margin-top:2px; }.form-status { min-height:1.4em; margin:0; font-size:.875rem!important; }.form-status.success { color:var(--cyan)!important; }.form-status.error { color:#ff9b9b!important; }
.waitlist-choice-group { display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; border:0; padding:0; margin:2px 0 0; }.waitlist-choice-group legend { grid-column:1/-1; padding:0 0 3px; color:var(--ink); font-weight:650; }.waitlist-choice-group legend small { display:block; color:var(--muted); font-size:.8125rem; font-weight:400; margin-top:3px; }.waitlist-choice-group > label { display:flex; align-items:flex-start; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:.875rem; line-height:1.35; cursor:pointer; background:var(--surface-soft); }.waitlist-choice-group > label:has(input:checked) { border-color:var(--cyan); color:var(--ink); }.waitlist-choice-group input { margin-top:2px; accent-color:var(--cyan-deep); }.waitlist-choice-group .optional-other { grid-column:1/-1; padding:0; border:0; background:none; }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:14px; margin:24px 0; }.price-card { border:1px solid var(--line); border-radius:13px; padding:20px; background:var(--surface-soft); }.price-card .price { font-size:2rem; color:var(--ink); font-weight:750; margin:16px 0; letter-spacing:-.04em; }.price small { font-size:.875rem; font-weight:500; letter-spacing:0; }.price-card > small { font-size:.875rem; line-height:1.5; color:var(--muted); }.price-card p { font-size:.9375rem; }.price-card.preferred { border:2px solid var(--cyan); }.price-card .plan-recommendation { font-size:.75rem; color:var(--cyan); margin:0 0 12px; font-weight:700; }
.paid-export-panel,.light-mode .paid-export-panel { background:var(--panel); box-shadow:var(--shadow); border-color:var(--line); }.paid-export-panel > div:first-child p:last-child { font-size:1rem; }[aria-disabled=true] { cursor:not-allowed; opacity:.65; }
.skip-link { position:absolute; z-index:100; top:-80px; left:16px; background:var(--panel); color:var(--ink); padding:12px; }.skip-link:focus { top:12px; }
@media(max-width:1000px) { .local-badge { display:none; }.quick-layout { gap:20px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }.workspace { grid-template-columns:1fr; }.header-actions { gap:7px; }.mode-button { padding:10px 12px; }.preview-days { grid-template-columns:1fr; }.preview-day { grid-template-columns:1fr 1.1fr; }.preview-day small { grid-column:2; }.quick-badge { display:none; } }
@media(max-width:700px) {
  .app-header { padding:14px 16px; min-height:76px; gap:8px; }.brand-logo { width:36px; height:36px; }.brand { gap:8px; }.brand-lockup strong { font-size:1rem; }.brand .brand-lockup small { font-size:.75rem; }.desktop-link,.account-button { display:none; }.theme-toggle { padding:7px 10px; }.theme-toggle #themeToggleLabel { display:none; }.theme-toggle > span:first-child { font-size:1.25rem; width:22px; }
  .app-shell { padding:24px 14px 10px; }.product-intro { padding-bottom:20px; }.product-intro h1 { font-size:2rem; line-height:1.13; max-width:340px; }.intro-summary { font-size:1rem; line-height:1.5; }.eyebrow { font-size:.75rem; }
  .mode-switcher { grid-template-columns:1fr 1fr; gap:4px; padding:4px; }.mode-button { min-height:61px; padding:9px 11px; }.mode-button strong { font-size:.9375rem; }.mode-button small { font-size:.75rem; }.mode-button:last-child { grid-column:1/-1; min-height:44px; border-top:1px solid var(--line); border-radius:0; }.mode-button:last-child small { display:none; }
  .quick-calendar,.builder-card,.results-card,.light-mode .quick-calendar,.light-mode .builder-card,.light-mode .results-card { padding:20px 16px; border-radius:14px; }.quick-heading { margin-bottom:20px; padding-bottom:18px; }.quick-heading h2 { font-size:1.4rem; }.quick-heading p:last-child { font-size:.9375rem; }
  .quick-layout { grid-template-columns:1fr; gap:24px; }.quick-grid { grid-template-columns:1fr 1fr; gap:16px 12px; }.quick-grid .field:has(#quickService),.quick-grid .field:has(#quickSearch) { grid-column:1/-1; }.quick-actions { flex-direction:column; }.quick-actions button { width:100%; }.preview-days { grid-template-columns:1fr 1fr; }.preview-day { display:grid; grid-template-columns:1fr; }.preview-day small { grid-column:auto; }.rota-preview { padding:16px; }.preview-heading { align-items:start; }
  .quick-custom { padding:12px; }.quick-duty { grid-template-columns:1fr 1fr; }.quick-duty > strong { grid-column:1/-1; }.vsa-actions { grid-template-columns:1fr; }.two-col,.rule-grid { grid-template-columns:1fr; }.rule-time-pair { grid-column:auto; }.day-choices { grid-template-columns:repeat(4,1fr); }.day-choice { min-height:44px; font-size:.875rem; }.step-button span { display:none; }.step-button { font-size:.8125rem; }.duty-change-fields { grid-template-columns:1fr; }.results-heading { flex-wrap:wrap; gap:10px; }.status-pill { max-width:none; }.metric-grid { grid-template-columns:1fr 1fr; }.option-tabs { grid-template-columns:1fr; }.calendar-file-actions > * { flex:1; }.calendar-file-actions { flex-direction:column; }.form-actions { gap:8px; }.generate-button { min-width:0; }.choice-row { grid-template-columns:1fr; }
  .life-intro { grid-template-columns:1fr; gap:22px; padding:26px 4px; }.life-intro img { max-height:240px; object-fit:cover; }.life-intro h2 br { display:none; }.site-footer { align-items:start; flex-direction:column; gap:0; }.site-footer nav { flex-wrap:wrap; gap:4px; }.site-footer .text-button { padding:7px 7px 7px 0; }.product-dialog { width:calc(100% - 20px); padding:28px 20px; max-height:90dvh; }.product-dialog h2 { font-size:1.4rem; }.pricing-grid { grid-template-columns:1fr; }.product-dialog ul { padding-left:20px; }.paid-export-panel { margin:18px 14px; padding:20px; }.contact-layout { grid-template-columns:1fr; gap:12px; }.contact-copy { padding:4px 0; }.contact-copy h2 { max-width:20ch; }.contact-action { padding:20px; }.four-choices,.drop-duty-choices,.waitlist-choice-group,.drop-position-grid { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media print { .app-header,.product-intro,.mode-switcher,.life-intro,.site-footer,.builder-card,.paid-export-panel,.calendar-export-panel { display:none!important; }.workspace { display:block; }.results-card { border:0; box-shadow:none; } }
:root {
  --marketing-border: rgba(75, 143, 188, .24);
  --marketing-surface: rgba(16, 36, 61, .78);
}
.marketing-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 22px; }
.marketing-strip article { display:flex; gap:12px; align-items:flex-start; min-height:116px; padding:18px; border:1px solid var(--marketing-border); border-radius:18px; background:var(--marketing-surface); box-shadow:0 12px 28px rgba(3,14,27,.12); }
body.light-mode .marketing-strip article { background:var(--panel); border-color:var(--line); box-shadow:0 10px 24px rgba(31,55,87,.08); }
.marketing-strip strong { display:block; color:var(--ink); font-size:.98rem; line-height:1.2; }
.marketing-strip p { margin:7px 0 0; color:var(--muted); font-size:.82rem; line-height:1.45; }
.marketing-icon { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border-radius:10px; background:rgba(105,228,221,.13); color:var(--cyan); font-size:1.25rem; font-weight:800; }
body.light-mode .marketing-icon { background:rgba(8,121,111,.1); }
body:not(.light-mode) { --night:#05111e; --panel:#0b1b2b; --surface-soft:#102337; --input:#071725; --line:#23394e; --cyan:#45baff; --cyan-deep:#299de0; --button-text:#031522; background:radial-gradient(ellipse at 80% 0%,#112c55 0,transparent 38%),var(--night); }
.product-intro { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:30px 0 46px; }
.product-intro h1 { font-size:clamp(2.4rem,4.6vw,4.15rem); line-height:1.04; max-width:12ch; font-weight:800; letter-spacing:-.045em; }
.intro-summary { max-width:43ch; font-size:1.08rem; line-height:1.6; margin-top:20px; }
.eyebrow { letter-spacing:.2em; color:var(--cyan); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.hero-trust { font-size:.78rem; line-height:1.7; color:var(--muted); margin-top:16px; }
.hero-calendar { position:relative; margin:10px 35px 25px 0; padding:24px 90px 24px 24px; border:1px solid var(--line); border-radius:20px; background:var(--panel); box-shadow:0 24px 60px #0005,0 0 70px #329fff12; }
.hero-calendar-top { display:flex; justify-content:space-between; gap:10px; font-size:.65rem; color:var(--cyan); letter-spacing:.09em; }.hero-calendar-top small { color:var(--muted); letter-spacing:0; }
.hero-calendar h3 { font-size:1.3rem; margin:28px 0 20px; }
.hero-cycle { display:grid; grid-template-columns:repeat(5,1fr); gap:12px 7px; }.hero-cycle small { display:block; color:var(--muted); font-size:.65rem; padding-bottom:5px; }.hero-cycle b { display:grid; place-items:center; height:35px; border-radius:6px; font-size:1rem; color:#061723; }.example-d { background:#60dbad; }.example-b { background:#4dbbfa; }.example-n { background:#b9a1fc; }.example-o { background:#a7b5c4; }
.hero-legend { display:flex; gap:12px; margin-top:18px; color:var(--muted); font-size:.7rem; }.hero-calendar-foot { display:grid; gap:9px; border-top:1px solid var(--line); margin-top:24px; padding-top:16px; font-size:.75rem; color:var(--muted); }.hero-calendar-foot strong { color:var(--cyan); font-size:.85rem; }
.hero-phone { position:absolute; right:-38px; top:80px; width:140px; padding:12px; border:4px solid var(--line); border-radius:24px; background:var(--input); box-shadow:0 16px 35px #0005; transform:rotate(4deg); }.phone-speaker { width:32px; height:4px; border-radius:4px; background:var(--line); margin:0 auto 16px; }.hero-phone>small { color:var(--muted); font-size:.55rem; }.hero-phone>strong { display:block; margin:9px 0 15px; font-size:.85rem; }.hero-phone p { border-left:3px solid #60dbad; padding-left:8px; font-size:.7rem; line-height:1.6; }.hero-phone p small { color:var(--muted); font-size:.6rem; }.hero-phone .phone-back { border-color:#4dbbfa; }.hero-phone .phone-night { border-color:#b9a1fc; }.hero-phone>span { font-size:.55rem; color:var(--muted); }
.marketing-strip article { border-radius:12px; background:var(--panel); box-shadow:none; }.mode-switcher { scroll-margin-top:100px; }
@media(max-width:850px) { .product-intro { gap:24px; grid-template-columns:1fr; }.product-intro h1 { max-width:17ch; }.hero-calendar { max-width:510px; width:calc(100% - 38px); margin:0 38px 10px 0; }.hero-actions>* { flex:1; }.hero-calendar h3 { margin-top:20px; } }
@media(max-width:480px) { .product-intro { padding-top:8px; padding-bottom:24px; }.hero-calendar { display:none; }.product-intro h1 { font-size:2.7rem; }.hero-actions { flex-direction:column; }.hero-trust { font-size:.74rem; } }
.audience-section { scroll-margin-top:100px; margin:38px 0 24px; padding:30px; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.audience-heading { max-width:760px; margin-bottom:24px; }
.audience-heading h2 { font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.2; }
.audience-heading p:last-child { color:var(--muted); line-height:1.65; }
.audience-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.audience-card { min-width:0; }
.audience-card h3 { margin:16px 0 8px; font-size:1rem; line-height:1.4; }
.audience-card p { color:var(--muted); font-size:.875rem; line-height:1.6; }
.audience-art { position:relative; display:grid; align-content:space-between; min-height:116px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.audience-art span { color:var(--muted); font-size:.75rem; font-weight:700; }
.audience-art b { color:var(--ink); font-size:1rem; }
.audience-art i { position:absolute; right:14px; top:40px; color:var(--cyan); font-size:1.7rem; font-style:normal; }
.header-actions a { text-decoration:none; }
@media(max-width:900px) { .audience-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .audience-section { padding:20px; }.audience-grid { grid-template-columns:1fr; }.audience-art { min-height:90px; } }
@media print { .audience-section,.marketing-strip { display:none!important; } }
.life-calendar-visual { min-width:0; padding:20px; border:1px solid rgba(105,228,221,.28); border-radius:24px; background:linear-gradient(145deg,rgba(26,49,78,.98),rgba(11,25,45,.98)); box-shadow:0 22px 55px rgba(0,0,0,.22); }
.life-calendar-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted-2); font-size:.68rem; font-weight:800; letter-spacing:.12em; }
.life-calendar-top b { padding:5px 8px; border:1px solid rgba(105,228,221,.3); border-radius:999px; color:var(--cyan); font-size:.63rem; letter-spacing:0; }
.life-calendar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:18px 0 16px; }
.life-calendar-day { min-height:155px; padding:10px 8px; border:1px solid rgba(168,190,222,.18); border-radius:13px; background:rgba(4,12,24,.5); }
.life-calendar-day.off { opacity:.72; }
.life-calendar-day small { display:block; color:var(--muted-2); font-size:.58rem; font-weight:800; letter-spacing:.09em; }
.life-calendar-day strong { display:block; margin:8px 0 12px; color:var(--ink); font-size:1.05rem; }
.life-chip { display:block; margin-top:7px; padding:6px 6px; border-radius:8px; font-size:.59rem; font-weight:750; line-height:1.2; }
.life-chip.work { background:rgba(105,228,221,.14); color:var(--cyan); }
.life-chip.family { background:rgba(255,196,90,.14); color:var(--amber); }
.life-chip.recovery { background:rgba(121,170,255,.14); color:var(--blue); }
.life-calendar-caption { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--muted); font-size:.68rem; }
.life-key { width:7px; height:7px; border-radius:50%; }
.work-key { background:var(--cyan); }.family-key { background:var(--amber); }.recovery-key { background:var(--blue); }
@media (max-width: 760px) { .marketing-strip { grid-template-columns:1fr; gap:9px; } .marketing-strip article { min-height:0; padding:14px; } .marketing-strip p { font-size:.79rem; } .life-calendar-grid { gap:4px; } .life-calendar-day { min-height:137px; padding:8px 5px; } .life-calendar-day strong { font-size:.9rem; margin:7px 0 9px; } .life-chip { font-size:.54rem; padding:5px 4px; } }

#firstRunCalendar{grid-column:1/-1}.legacy-calendar{grid-column:1/-1;padding:20px;border:1px solid var(--line);border-radius:12px}#cycleDays{display:grid;gap:10px;margin:20px 0}.cycle-day{display:grid;grid-template-columns:100px 70px minmax(100px,1fr) 110px 110px;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px}.cycle-day input{min-width:0;width:100%}.cycle-preview{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:16px 0}.cycle-preview article{padding:10px;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere}.cycle-preview .off{opacity:.6}.cycle-preview small,.cycle-preview strong{display:block}#firstRunCalendar .member-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}#firstRunCalendar input,#firstRunCalendar select{min-height:44px}#cycleStatus{color:var(--cyan)}@media(max-width:700px){.cycle-day{grid-template-columns:1fr 1fr}.cycle-day>strong{grid-column:1/-1}.cycle-preview{grid-template-columns:repeat(2,minmax(0,1fr))}}