@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700;750;800&display=swap');

/* Dialboard design system · calm workspace · 2026-11 */
:root {
 --ink:#22312b;
 --ink2:#35493e;
 --muted:#728177;
 --line:#e1e9e3;
 --paper:#f6f8f6;
 --surface:#ffffff;
 --surface2:#f1f6f2;
 --green:#257553;
 --green2:#348867;
 --lime:#ccebbb;
 --red:#c66367;
 --radius:16px;
 --shadow:0 7px 28px rgba(29,57,40,.035),0 1px 5px rgba(29,57,40,.025);
 font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
}
html {font-synthesis:none}
body {background:var(--paper);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea {font-family:inherit}
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent }
button:not(:disabled),select:not(:disabled),label:has(input[type=radio]):not(:has(input:disabled)) {cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:has(input:focus-visible) {outline:3px solid rgba(80,158,115,.32);outline-offset:3px}
a {transition:color .16s ease}
::selection {background:#cbe9d6;color:#244936}

/* Shell: spacious, quiet visual hierarchy */
.sidebar {background:linear-gradient(175deg,#18342b 0%,#1b342c 55%,#152920 100%);border-right:1px solid rgba(255,255,255,.045);padding:25px 13px 17px}
.brand-row {padding-bottom:28px}
.brand-mark,.login-brand-mark {border-radius:12px;background:#d3edd0!important;color:#183c29!important;box-shadow:0 5px 15px rgba(14,40,25,.09)}
.brand-mark span {color:#2b7658}
.brand-copy strong,.login-brand-copy strong {letter-spacing:-.8px}
.brand-copy span {color:#91ada0}
.sidebar-label {color:#89a092;letter-spacing:1.25px;padding-left:14px}
.nav-item {border-radius:11px;height:43px;padding:0 13px;gap:12px;transition:background .18s,color .18s,transform .18s;color:#b7c9bd;font-weight:550;font-size:12.5px}
.nav-item:hover {background:rgba(240,255,243,.075);color:#fbfffb}
.nav-item.active {background:rgba(194,237,206,.14);box-shadow:inset 2px 0 0 #bce1c4;color:#f5fff6}
.nav-item.active .nav-icon {color:#c7e5cc}
.nav-icon {color:#91aa9b}
.nav-pill {background:#e0eee1;color:#275c40;border-radius:100px;letter-spacing:0;font-family:'Inter',sans-serif;font-weight:750}
.workspace-switcher {background:rgba(246,255,247,.055);border-color:rgba(217,238,219,.14);border-radius:13px;margin-bottom:27px;padding:11px;transition:background .16s}
.workspace-switcher:hover {background:rgba(246,255,247,.11)}
.workspace-avatar {background:#385b47;color:#d8f0d2;border-radius:10px}
.sidebar-note {background:rgba(244,255,243,.04);border-color:rgba(210,237,212,.1);border-radius:13px}
.sidebar-profile {border-top-color:rgba(222,242,225,.13)}
.main-shell {background:var(--paper)}
.topbar {min-height:103px;background:rgba(255,255,255,.94);border-bottom:1px solid #e5ebe6;padding:18px clamp(18px,2.6vw,39px);box-shadow:0 3px 15px rgba(24,50,31,.02)}
.topbar-title>p:first-child,#page-eyebrow {font-family:'Inter',sans-serif;letter-spacing:1.6px;font-size:10px;font-weight:800;color:#4d9670}
.topbar-title h1 {font-family:'Space Grotesk','Inter',sans-serif;font-weight:650;font-size:clamp(24px,2vw,30px);letter-spacing:-1.1px}
.topbar-title #page-subtitle {font-size:12.5px;color:#7b897e;margin-top:6px}
.timezone-chip {background:#f1f6f1;border:1px solid #e0ebe2;border-radius:100px}
.page-content {width:100%;max-width:1490px;margin:0 auto;padding:clamp(19px,2.4vw,34px) clamp(15px,2.6vw,37px) 50px}
.app-footer {background:transparent;border-top-color:#e5ebe6;color:#89988e}

/* Buttons */
.button,.login-button,.settings-tab,.seg-button,.icon-button {transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease,color .16s ease}
.button {font-size:12.5px;letter-spacing:-.1px;border-radius:10px;font-weight:650;min-height:41px}
.button-primary,.login-button {background:#257553;color:#fff;border-color:#257553;box-shadow:0 3px 7px rgba(27,100,60,.12)}
.button-primary:hover:not(:disabled),.login-button:hover:not(:disabled){background:#1d6043;border-color:#1d6043;box-shadow:0 6px 15px rgba(27,100,60,.17)}
.button-primary:active:not(:disabled),.login-button:active:not(:disabled) {transform:translateY(1px)}
.button-soft,.button-ghost {background:#fff;color:#345b43;border:1px solid #dce8de;box-shadow:none}
.button-soft:hover:not(:disabled),.button-ghost:hover:not(:disabled) {background:#f1f8f2;border-color:#badac4;color:#28573c}
.icon-button:hover {border-color:#d7e4da;background:#f3f7f3}
.button-danger-outline {border-radius:10px}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea {border-color:#dbe5dd;border-radius:10px;color:var(--ink);background:#fff}
input:not([type=checkbox]):not([type=radio]):not([type=color]):hover,select:hover,textarea:hover {border-color:#bcd2c3}
input:not([type=checkbox]):not([type=radio]):not([type=color]):focus,select:focus,textarea:focus {border-color:#40956c;box-shadow:0 0 0 3px rgba(77,152,103,.09)}
::placeholder {color:#9ba9a0}

/* Surface system */
.panel,.metric-card,.week-stat,.access-card,.calendar-panel,.bottom-tip {border-radius:17px;border-color:#e4ebe5;box-shadow:var(--shadow)}
.panel-heading h3,.panel h3,.section-title,.schedule-intro strong {font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.35px}
.panel-heading h3 {font-size:18px;font-weight:650}
.panel-heading p,.toolbar-caption,.form-footnote {color:#7d8d80;line-height:1.65}
.empty-row {background:#f9fbf8;color:#7e8e80;border-radius:13px;padding:21px}
.bottom-tip {margin-top:22px;padding:14px 18px;background:#f3f7f2;border-color:#e4ece3;color:#68786d;line-height:1.6}
.bottom-tip strong {color:#355e45}

/* Main schedule: structured, airy, still dense enough for seven days */
.page-toolbar.schedule-toolbar {padding:0 0 5px;margin-bottom:19px;gap:14px}
.week-switcher {gap:8px}
.week-range {font-size:14px;color:#345241;font-weight:700;letter-spacing:-.35px}
.week-switcher .arrow-button {background:#fff;border-color:#dfebdf;border-radius:10px}
.today-button {border-radius:10px}
.archive-button {color:#667a6d;font-size:11.5px}
.seg-control {padding:4px;border:1px solid #e2ebe1;background:#eef4ef;border-radius:11px}
.seg-button {border-radius:8px;min-height:36px;font-size:11.5px;font-weight:650}
.seg-button.selected {background:#fff;color:#266f4b;box-shadow:0 1px 5px rgba(30,70,40,.07)}
.compact-select-wrap,.manager-filter {border-radius:11px;border-color:#e2eae1;background:#fff}
.workspace-clock {background:#fff;border-color:#dfebe1;border-radius:12px}
.workspace-clock>strong {font-size:15px;color:#236847}
.schedule-intro {padding:18px 20px;margin:10px 0 13px;background:linear-gradient(110deg,#f3f8f4 0%,#fff 83%);border:1px solid #e2ebe3;border-radius:15px;box-shadow:var(--shadow);gap:12px}
.schedule-intro>div:first-child>strong {font-size:17px;font-family:'Space Grotesk',sans-serif;color:#254435;letter-spacing:-.5px}
.schedule-intro p {color:#728278;font-size:12px;margin-top:5px;line-height:1.55;max-width:730px}
.week-stats {gap:11px;margin-bottom:19px}
.week-stat {background:#fff;padding:15px 17px;border:1px solid #e4ebe5;min-width:0}
.week-stat>strong {font-size:27px;letter-spacing:-1px;color:#2e493a;font-family:'Space Grotesk'}
.week-stat small {font-size:10.5px;color:#89958b}
.week-stat .stat-label {font-size:10px;font-weight:650;color:#7a8a7e}
.schedule-label-catalog,.outcome-key,.schedule-legend,.calendar-foot {border-color:#e3eae4}
.outcome-key {background:#fff;border:1px solid #e4ebe5;border-radius:13px;padding:12px 16px;gap:14px}
.outcome-key .key-label {color:#8b9a8e}
.calendar-panel {overflow:hidden;background:#fff;border:1px solid #e0e8e2;border-radius:16px;box-shadow:0 8px 24px rgba(38,69,46,.045)}
.week-head {background:#f7faf7;border-bottom:1px solid #e3ebe5}
.day-head {border-right-color:#e9eeea}
.day-head.day-today {background:#eaf5ed}
.day-head.day-today>strong {color:#24794e}
.today-indicator {background:#d9efdd;color:#28764f}
.time-axis {background:#f9fbf9}
.time-label {color:#91a096}
.calendar-foot {background:#fbfcfa;color:#7e8e83;padding:13px 18px}
.manager-filter select {color:#334b3d}
.appointment-card {border-radius:8px;transition:filter .17s ease,box-shadow .17s ease}
.appointment-card:hover {filter:brightness(.98);box-shadow:0 2px 9px rgba(20,70,40,.09)}

/* Team page */
.team-stats-row {gap:12px;margin-bottom:18px}
.team-stat {border-radius:14px;border:1px solid #e2ebe4;background:#fff;box-shadow:var(--shadow);padding:16px 18px}
.team-stat-icon {background:#edf6ef;color:#348363;border-radius:11px}
.team-stat strong {font-family:'Space Grotesk',sans-serif;font-size:25px;letter-spacing:-1px}
.team-stat small {color:#869489}
.team-layout {grid-template-columns:minmax(300px,365px) minmax(0,1fr);gap:17px;align-items:start}
.invite-panel,.team-list-panel,.pending-panel {border-radius:17px;background:#fff}
.invite-panel {padding:23px}
.invite-panel .panel-heading {margin-bottom:18px}
.invite-panel .panel-heading h3 {font-size:20px}
.invite-panel .panel-heading p {line-height:1.55;max-width:300px}
.invite-panel .stacked-form {gap:15px}
.invite-panel input,.invite-panel select {min-height:44px}
.invite-icon {background:#e4f1e6;color:#367b57;border-radius:11px}
.team-list-panel {padding:22px}
.member-row {padding:14px 8px;border-bottom-color:#edf1ed;gap:12px}
.member-avatar {background:#edf5ef;color:#296345;font-weight:750;border-radius:11px}
.member-avatar.manager-avatar {background:#e7f2e9;color:#245f41}
.member-main strong {font-weight:700;color:#2d4235;font-size:12.5px}
.member-main span,.member-main small {color:#87958a}
.role-tag {border-radius:100px;padding:5px 9px;font-size:10px;font-weight:750}
.pending-panel {padding:20px 23px}
.pending-row {border-bottom-color:#edf2ed}
.copy-invite-button {border-radius:9px}

/* Calendly readiness displayed alongside each manager's team row */
.db-team-calendly{display:inline-flex!important;width:fit-content!important;margin-top:5px!important;padding:3px 8px;border-radius:100px;background:#f4f5f2;color:#879285!important;font-size:10px!important;font-weight:650}
.db-team-calendly.is-ready{background:#e7f5e9;color:#28764f!important}

/* Settings */
.settings-layout {gap:18px}
.settings-tabs {background:#f0f4f0;border:1px solid #e2ebe4;border-radius:13px;padding:5px;gap:5px}
.settings-tab {border-radius:10px;white-space:nowrap;font-weight:650;font-size:12px;color:#74877a;min-height:39px}
.settings-tab.selected {background:#fff;color:#246e4d;box-shadow:0 2px 7px rgba(30,74,44,.07)}
.settings-panel,.color-settings-panel,.notification-settings-panel {border-radius:16px;padding:23px}
.settings-panel label,.stacked-form label,.settings-form label {font-weight:650;color:#506858;font-size:12px}
.settings-form input,.settings-form select,.settings-form textarea {min-height:44px}
.settings-mark {background:#e9f3ea;border-radius:100px;color:#4c865f;letter-spacing:.35px;font-size:10px}
.status-color-row {border-bottom-color:#eaf0eb}
.legal-settings-panel {background:#fff;border-radius:16px}

/* Plan and billing */
.db-billing-redesign {gap:17px;max-width:1220px}
.db-billing-redesign>.panel {border:1px solid #e1eae2;box-shadow:var(--shadow);border-radius:17px}
.db-billing-hero {background:linear-gradient(140deg,#214b39 0%,#2b634a 70%,#357354 100%);color:#f7fdf7;padding:29px 29px 27px}
.db-billing-hero h2 {color:#fff;font-family:'Space Grotesk',sans-serif;letter-spacing:-1.25px;font-weight:650}
.db-billing-hero .eyebrow {color:#cee5d2;font-size:10px;font-weight:750}
.db-billing-hero p {color:#d7e9d9!important}
.db-billing-hero .billing-price strong {color:#fff}
.db-billing-hero .billing-price span,.db-billing-hero .billing-price small {color:#dcece1}
.db-plan-status {background:rgba(255,255,255,.14);color:#fff}
.db-billing-details {margin-top:4px;background:#fff;border-color:#e4eae4}
.db-billing-detail {padding:14px 15px;font-size:12.5px}
.db-billing-detail strong {font-weight:700;color:#2d4838}
.db-billing-side {padding:24px}
.db-billing-feature {color:#486654}
.db-billing-message,.billing-warning {border-radius:12px;line-height:1.6}
.db-billing-actions {gap:10px}
.db-billing-welcome {border-radius:18px;box-shadow:var(--shadow)}

/* Booking modal - accessible, clear sections and true two-choice method selector */
.modal-layer {backdrop-filter:blur(5px);background:rgba(13,32,21,.26)}
.modal-backdrop {padding:20px}
.modal-card {box-shadow:0 25px 85px rgba(13,36,21,.19);border:1px solid rgba(224,237,224,.78);border-radius:20px}
.modal-card:has(#appointment-form) {width:min(880px,calc(100vw - 32px));max-width:880px;max-height:min(95dvh,990px);overflow-y:auto;overscroll-behavior:contain}
.modal-card:has(#appointment-form) .modal-header {padding:26px 32px 23px;background:linear-gradient(125deg,#f2f8f2 0%,#fff 78%);border-bottom:1px solid #e7efe7}
.modal-card:has(#appointment-form) .modal-header h2 {font-size:clamp(24px,2.4vw,30px);font-family:'Space Grotesk',sans-serif;letter-spacing:-.9px;color:#253d30}
.modal-card:has(#appointment-form) .modal-header p {max-width:630px;color:#728379;font-size:12.5px}
.modal-card:has(#appointment-form) .modal-form {padding:24px 32px 30px;gap:13px}
.modal-card:has(#appointment-form) .form-grid {gap:13px 16px}
.modal-card:has(#appointment-form) .form-grid label,.modal-card:has(#appointment-form) .modal-form>label {font-size:12px;font-weight:650;line-height:1.5;color:#516758}
.modal-card:has(#appointment-form) .modal-form input:not([type=checkbox]):not([type=radio]):not([type=color]),.modal-card:has(#appointment-form) .modal-form select,.modal-card:has(#appointment-form) .modal-form textarea {min-height:45px;font-size:13px;border-radius:10px;border:1px solid #dce7de}
.modal-card:has(#appointment-form) .modal-form textarea {min-height:85px;resize:vertical;padding:12px}
.modal-card:has(#appointment-form) .modal-form label small {color:#89978d;font-size:10.5px;font-weight:450;line-height:1.5}
.modal-card:has(#appointment-form) .form-section-label {font-family:'Inter',sans-serif;display:flex;align-items:center;gap:10px;border-top:1px solid #eaf0eb;margin:13px 0 2px;padding-top:19px;color:#577965;letter-spacing:.75px;font-size:10px;font-weight:800}
.modal-card:has(#appointment-form) .db-booking-intro+.form-section-label {border-top:0;margin-top:0;padding-top:12px}
.db-booking-intro {display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:12px 14px;background:#f2f8f3;border:1px solid #e1ede3;color:#315c41;font-weight:650;font-size:11.5px;border-radius:11px}
.db-booking-intro-dot {width:8px;height:8px;border-radius:50%;background:#4d9f72;box-shadow:0 0 0 4px #d9eddf}
.db-booking-intro small {margin-left:auto;color:#789280;font-size:10.5px;font-weight:550}
.db-step-num {display:inline-grid;place-items:center;min-width:25px;height:25px;border-radius:8px;background:#e1f1e4;color:#2e8154;font-size:10px;letter-spacing:0;font-weight:800}
.modal-card:has(#appointment-form) .booking-clock {width:fit-content;max-width:100%;border-radius:10px;margin:1px 0 5px;background:#f8fbf8;box-shadow:none}
.modal-card:has(#appointment-form) .checkbox-field {padding:10px 12px;border:1px solid #e6eee7;border-radius:11px;background:#fbfcfb}
.modal-card:has(#appointment-form) .checkbox-field strong {font-size:12px}
.modal-card:has(#appointment-form) .modal-actions {border-top:1px solid #e7eee7;padding-top:20px;margin-top:8px;gap:9px}
.modal-card:has(#appointment-form) .modal-actions .button-primary {min-width:148px;min-height:44px}

/* Booking method: the primary decision is visible, never buried in a checkbox. */
.db-booking-method {margin:8px 0 0;padding:18px;border-radius:15px;background:#f8fbf8;border:1px solid #e0eae2}
.db-booking-method-heading {margin-bottom:15px}
.db-method-kicker {display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:1px;color:#4f8964;margin-bottom:11px}
.db-booking-method-heading>strong {display:block;font:650 18px/1.25 'Space Grotesk','Inter',sans-serif;letter-spacing:-.4px;color:#2e4838}
.db-booking-method-heading>p {font-size:11.5px;color:#7a8a7d;margin:5px 0 0}
.db-method-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.db-method-option {position:relative;display:flex;align-items:flex-start;gap:11px;min-height:113px;padding:17px 14px;background:#fff;border:1.5px solid #dce6dd;border-radius:12px;transition:background .16s,border-color .16s,box-shadow .16s;cursor:pointer}
.db-method-option:hover {border-color:#a9cdb3;background:#fdfffd}
.db-method-option:focus-within {outline:3px solid rgba(74,151,103,.22);outline-offset:2px}
.db-method-option:has(input:checked) {border-color:#4b9c70;background:#f2faf4;box-shadow:0 0 0 1px rgba(79,158,111,.18)}
.db-method-option>input[type=radio] {position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.db-method-option .db-method-symbol {position:relative;display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;background:#eef3ef;color:#587562;font:750 19px 'Space Grotesk',sans-serif;border-radius:10px}
.db-method-calendly .db-method-symbol {background:#edf4ff;color:#2462a5}
.db-method-option:has(input:checked) .db-method-symbol {background:#dff1e3;color:#1d764d}
.db-method-calendly:has(input:checked) .db-method-symbol {background:#ddeeff;color:#246db6}
.db-method-copy {position:relative;min-width:0;display:flex;flex-direction:column;gap:7px;flex:1}
.db-method-copy>strong {font-size:12.5px;color:#304a39;font-weight:750;line-height:1.4}
.db-method-copy>small {font-size:11px;color:#75887b;line-height:1.55}
.db-method-copy em {font:750 9px 'Inter',sans-serif;letter-spacing:.15px;background:#e7f4e8;color:#26704d;border-radius:100px;padding:4px 7px;font-style:normal;margin-left:4px;vertical-align:2px;white-space:nowrap}
.db-method-check {position:relative;flex:none;margin-top:2px;width:17px;height:17px;border-radius:50%;border:1.6px solid #c6d6c8;background:#fff;box-shadow:inset 0 0 0 4px #fff}
.db-method-option:has(input:checked) .db-method-check {border-color:#3f9468;background:#3f9468;box-shadow:inset 0 0 0 4px #fff}
.db-method-unavailable {opacity:.58;background:#f4f6f3;cursor:not-allowed}
.db-method-unavailable input[type=radio] {cursor:not-allowed}
.db-cal-optional-hint {margin:13px 0 0;font-size:11px;color:#637b6b;line-height:1.6;padding-left:3px}
.db-method-unavailable+.db-cal-optional-hint {color:#887d62}

/* Calendly settings: premium but extremely transparent about separate calendars */
.db-cal-settings-v3 {display:grid;gap:17px;max-width:1080px}
.db-cal-settings-v3 .panel {border-radius:17px;border:1px solid #e1eae3;box-shadow:var(--shadow);overflow:hidden}
.db-cal-hero-card {display:flex;gap:30px;align-items:center;justify-content:space-between;padding:33px 32px;background:linear-gradient(120deg,#204b39 0%,#2c6a4f 72%,#3c7457 100%);color:#fff;border:0!important}
.db-cal-hero-copy {max-width:590px}
.db-cal-eyebrow {display:flex;gap:11px;align-items:center;color:#d4efdb;font-size:10px;font-weight:800;letter-spacing:1.35px}
.db-cal-logo-mark {width:28px;height:28px;display:grid;place-items:center;font:800 17px 'Space Grotesk';border-radius:8px;background:#e3efff;color:#235d9e}
.db-cal-hero-tag {letter-spacing:0;font-weight:650;color:#e3eee6;background:rgba(255,255,255,.12);padding:5px 8px;border-radius:100px}
.db-cal-hero-card h2 {font:650 clamp(24px,2.8vw,32px)/1.18 'Space Grotesk';letter-spacing:-1px;color:#fff;margin:20px 0 9px}
.db-cal-hero-card p {font-size:12.5px;line-height:1.7;color:#d9ebe0;max-width:590px;margin:0}
.db-cal-hero-pills {display:flex;flex-wrap:wrap;gap:9px 17px;margin-top:22px}
.db-cal-hero-pills>span {font-size:10.5px;font-weight:650;color:#e4f2e7}
.db-cal-tick {font-style:normal;display:inline-grid;place-items:center;width:16px;height:16px;background:rgba(255,255,255,.18);border-radius:50%;margin-right:4px;color:#d3f6da}
.db-cal-hero-graphic {width:260px;flex:0 0 260px;padding:17px;background:#f8fbf8;border:1px solid rgba(255,255,255,.48);border-radius:15px;box-shadow:0 15px 25px rgba(14,41,25,.09);color:#264d37;transform:rotate(1deg)}
.db-cal-graphic-head {display:flex;justify-content:space-between;gap:6px;font-size:10px;margin-bottom:16px}
.db-cal-graphic-head b {font-weight:750}
.db-cal-graphic-head span {color:#2c8658;font-size:9px}
.db-cal-graphic-row {display:flex;align-items:center;gap:9px;padding:11px;background:#e8f4e9;border-radius:9px;font-size:10px;font-weight:700}
.db-cal-graphic-row.calendly {background:#eaf1fc;color:#36628d}
.db-cal-graphic-row i {display:grid;place-items:center;width:24px;height:24px;background:#fff;border-radius:7px;font:800 9px 'Inter',sans-serif}
.db-cal-graphic-row span {flex:1}
.db-cal-graphic-row strong {font-size:14px}
.db-cal-graphic-link {padding:3px 0;text-align:center;font-size:20px;color:#819d86;height:26px}
.db-cal-config-grid {display:grid;grid-template-columns:minmax(0,1.13fr) minmax(280px,.87fr);gap:17px;align-items:stretch}
.db-cal-config-card,.db-cal-steps-card,.db-cal-manager-card {padding:25px 27px}
.db-cal-card-heading {display:flex;gap:10px;justify-content:space-between;align-items:center;margin-bottom:7px}
.db-cal-subhead {font-size:10px;font-weight:800;color:#528364;letter-spacing:1.25px}
.db-cal-connection-pill {border-radius:100px;padding:6px 10px;background:#f5f3e8;color:#8a7859;font-size:10px;font-weight:750}
.db-cal-connection-pill.is-linked {background:#eaf6ed;color:#26734e}
.db-cal-config-card h3,.db-cal-steps-card h3 {font:650 20px 'Space Grotesk';letter-spacing:-.6px;margin:9px 0}
.db-cal-config-card>p {font-size:11.5px;color:#829086;line-height:1.65;margin:0 0 18px}
.db-cal-config-card .settings-form {gap:14px}
.db-cal-config-card .settings-form label {font-size:12px;color:#4b6553}
.db-cal-config-card .settings-form input {min-height:47px;font-size:12px}
.db-cal-config-card .settings-form label small {font-size:10.5px;color:#86988b}
.db-cal-config-card .settings-form-footer {margin-top:7px}
.db-cal-step {display:flex;align-items:flex-start;gap:13px;margin-top:18px}
.db-cal-step>span {display:grid;place-items:center;flex:none;width:31px;height:31px;border:1px solid #dbe9de;background:#f0f8f1;border-radius:9px;color:#357c56;font-weight:800;font-size:10px}
.db-cal-step strong {display:block;font-size:12.5px;color:#365441}
.db-cal-step p {margin:4px 0 0;color:#829186;font-size:11px;line-height:1.55}
.db-cal-manager-card .panel-heading {margin-bottom:15px}
.db-cal-manager-count {padding:7px 12px;border-radius:100px;background:#eaf5ec;color:#377e58;font-size:10.5px;font-weight:750}
.db-cal-team-list {display:grid;gap:8px}
.db-cal-manager-card .db-cal-team-row {background:#fbfdfb;border:1px solid #e7eee8;border-radius:11px;padding:13px 14px;gap:11px}
.db-cal-team-row b {font-size:12px;color:#38513e}
.db-cal-team-row small {font-size:11px;color:#7f9185;overflow-wrap:anywhere;line-height:1.4}
.db-cal-team-row em {font-size:10px;border-radius:100px;white-space:nowrap}
.db-cal-independent-note {margin-top:18px;display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border:1px solid #e8eee4;border-radius:11px;background:#f7f9f5}
.db-cal-independent-note>span {flex:0 0 21px;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:#e3ece5;color:#51705a;font-size:11px;font-weight:800}
.db-cal-independent-note p {font-size:10.5px;color:#6c8072;line-height:1.65;margin:0}
.db-cal-independent-note strong {color:#466a50}
.db-cal-empty {color:#839085}

/* Final Calendly handoff dialog */
.modal-card:has(.db-next-calendly) {width:min(95vw,550px);max-width:550px;border-radius:21px}
.db-next-calendly {padding:34px 36px}
.db-next-calendly h2 {font-weight:650}
.db-next-split {background:#f7faf7;border-color:#e0ebe1;border-radius:12px}
.db-next-actions .button-primary {min-width:150px}

/* Login / signup polish */
.login-story {background:linear-gradient(145deg,#203f32 0%,#142c23 86%);color:#fff}
.story-copy h1 {font-weight:600;letter-spacing:-2.4px}
.story-copy h1 em {color:#d6efc5}
.story-tag {border-color:rgba(211,241,217,.25);background:rgba(255,255,255,.055);color:#d4efce}
.story-tag i {background:#cae9c4}
.login-sample {background:rgba(240,255,241,.055);border-color:rgba(219,244,224,.17);border-radius:17px;box-shadow:0 10px 25px rgba(9,32,18,.08)}
.sample-head,.sample-kind,.sample-time {color:#bbd0c0}
.login-panel {background:#fafcf9}
.login-card {width:min(100%,425px)}
.login-card h2 {font-size:37px;letter-spacing:-1.4px}
.login-card .subhead {font-size:13px;color:#7e8a80;line-height:1.6}
.login-input {min-height:48px;border-color:#dfe7df;border-radius:11px}
.login-button {min-height:48px;border-radius:11px}
.login-mode-toggle {border:1px solid #e2eae0;background:#f0f5ef;border-radius:12px}
.login-mode-toggle button {border-radius:9px;padding:12px}
.login-mode-toggle button.selected {color:#257553}
.signup-legal-consent {line-height:1.7}

/* Reduced motion and compact devices */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:1080px){.db-cal-hero-graphic {display:none}.db-cal-config-grid {grid-template-columns:1fr 1fr}.page-content {padding:23px 22px 45px}}
@media(max-width:880px){
 .db-cal-config-grid {grid-template-columns:1fr}
 .team-layout {grid-template-columns:1fr}
 .topbar {padding:16px 20px;min-height:87px}
 .modal-card:has(#appointment-form) .modal-header {padding:22px 25px}
 .modal-card:has(#appointment-form) .modal-form {padding:20px 25px 27px}
}
@media(max-width:760px){
 .page-content {padding:17px 13px 34px}
 .sidebar {padding:20px 13px}
 .topbar {min-height:75px;padding:13px 15px}
 .topbar-title h1 {font-size:21px}
 .topbar-title #page-subtitle {font-size:11px}
 .topbar-title>p:first-child {font-size:9px}
 .page-toolbar.schedule-toolbar {gap:8px}
 .schedule-intro {padding:15px 14px}
 .schedule-intro>div:first-child>strong {font-size:15px}
 .week-stat {padding:12px}
 .modal-backdrop {padding:7px}
 .modal-card:has(#appointment-form) {width:min(100%,700px);max-height:97dvh;border-radius:15px}
 .modal-card:has(#appointment-form) .modal-header {padding:20px 18px}
 .modal-card:has(#appointment-form) .modal-form {padding:17px 17px 21px}
 .db-method-grid {grid-template-columns:1fr}
 .db-method-option {min-height:80px;padding:13px}
 .db-booking-method {padding:14px}
 .db-cal-hero-card {padding:26px 22px}
 .db-cal-config-card,.db-cal-steps-card,.db-cal-manager-card {padding:20px}
 .db-cal-hero-card h2 {font-size:25px}
 .db-billing-hero {padding:24px 20px}
 .login-story {min-height:245px}
 .story-copy {padding:35px 0 16px}
 .story-copy h1 {font-size:36px}
}
@media(max-width:520px){
 .page-content {padding:14px 10px 28px}
 .topbar-title h1 {font-size:19px}
 .db-booking-intro small {width:100%;margin-left:17px}
 .modal-card:has(#appointment-form) .form-grid {grid-template-columns:1fr;gap:10px}
 .modal-card:has(#appointment-form) .modal-actions {flex-wrap:wrap}
 .modal-card:has(#appointment-form) .modal-actions .modal-actions-spacer {display:none}
 .modal-card:has(#appointment-form) .modal-actions .button-primary {width:100%}
 .db-cal-eyebrow {flex-wrap:wrap}
 .db-cal-hero-tag {font-size:9px}
 .db-cal-hero-card h2 {font-size:23px}
 .db-cal-hero-pills {gap:8px}
 .db-cal-manager-card .db-cal-team-row {flex-wrap:wrap}
 .db-cal-team-row em {margin-left:50px}
 .settings-tabs {overflow-x:auto;scrollbar-width:thin;justify-content:flex-start}
 .settings-tab {flex:none;min-width:104px}
 .team-stat {padding:11px}
 .team-stat strong {font-size:21px}
 .week-range {font-size:11.5px}
}