/* Sidebar menu is hidden until menu access has been applied. Uses opacity so layout is preserved and the HUD framework never "sees" a flash. JS sets data-menu-ready on synchronously via the early-cache path, or after the live API call completes. */ #sidebar .app-sidebar-content { transition: opacity 0.12s ease; } body:not([data-menu-ready]) #sidebar .app-sidebar-content { opacity: 0; pointer-events: none; } .brand .brand-img { width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important; padding: 6px !important; margin-left: 6px !important; margin-inline-end: 0.75rem !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; border: none !important; } .brand .brand-img img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; } #authStatus.error, #taskCreateStatus.error, #tasksStatus.error, #perfStatus.error { color: #ff6b6b !important; } #authStatus, #taskCreateStatus, #tasksStatus, #perfStatus { min-height: 20px; } .mini-card .label { font-size: 12px; opacity: 0.75; text-transform: uppercase; } .mini-card .value { font-size: 24px; font-weight: 700; } .stat-chip { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px; background: rgba(255,255,255,.02); } .stat-chip span { display: block; font-size: 12px; opacity: 0.75; text-transform: uppercase; } .stat-chip strong { font-size: 20px; } .inner-card .card-header { font-size: 13px; } .trend-bars { display: flex; align-items: flex-end; gap: 4px; min-height: 130px; overflow-x: auto; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; } .bar-col { width: 14px; min-width: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; } .bar-created { background: #7aa6ff; border-radius: 3px 3px 0 0; } .bar-completed { background: #22c46d; border-radius: 3px 3px 0 0; } .pomodoro-clock { font-size: 58px; font-weight: 700; letter-spacing: 2px; line-height: 1; } body.focus-mode #content { padding: 12px; } body.focus-mode .card { border-color: rgba(255, 255, 255, 0.18); } #dashboardStatus.error, #dashboardHabitStatus.error, #habitModalStatus.error, #htStatus.error, #anHbStatus.error, #wsStatus.error, #wsCreateStatus.error, #projectStatus.error, #projectListStatus.error, #goalStatus.error, #goalListStatus.error, #taskBoardStatus.error, #tbTaskModalStatus.error, #taskCreateStatus.error, #tasksStatus.error, #pomodoroStatus.error, #rtStatus.error { color: #ff6b6b !important; } #dashboardStatus, #dashboardHabitStatus, #habitModalStatus, #htStatus, #anHbStatus, #wsStatus, #wsCreateStatus, #projectStatus, #projectListStatus, #goalStatus, #goalListStatus, #taskBoardStatus, #tbTaskModalStatus, #taskCreateStatus, #tasksStatus, #pomodoroStatus, #rtStatus { min-height: 20px; } .entity-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .entity-toolbar-main { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .entity-toolbar-end { display: flex; align-items: end; justify-content: flex-end; margin-left: auto; } .entity-toolbar-filter { min-width: 220px; } .entity-toolbar-filter-compact { min-width: 180px; } .workspace-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .kanban-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; align-items: start; } .kanban-column { min-height: 420px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.03); overflow: hidden; } .kanban-column-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); } .kanban-lane { min-height: 360px; padding: 14px; display: grid; gap: 12px; align-content: start; transition: background-color 0.15s ease, border-color 0.15s ease; } .kanban-lane.is-drop-target { background: rgba(61, 124, 255, 0.08); } .kanban-card { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; padding: 14px; background: rgba(18, 22, 33, 0.88); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .kanban-card:hover { transform: translateY(-2px); border-color: rgba(117, 171, 255, 0.34); } .kanban-card.is-dragging { opacity: 0.55; } .kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .kanban-card-title { font-size: 15px; font-weight: 700; line-height: 1.45; margin-bottom: 8px; } .kanban-card-meta { color: rgba(255, 255, 255, 0.68); font-size: 12px; line-height: 1.5; } .kanban-empty { border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 14px; padding: 18px 14px; color: rgba(255, 255, 255, 0.58); text-align: center; background: rgba(255, 255, 255, 0.02); } .mm-clock { font-size: 48px; font-weight: 700; letter-spacing: 1px; line-height: 1; } .habit-week-table th, .habit-week-table td { vertical-align: middle; } .habit-day-cell { text-align: center; min-width: 84px; } .habit-day-date { font-size: 11px; opacity: 0.7; } .habit-grid-checkbox { width: 18px; height: 18px; cursor: pointer; } .habit-offday { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; color: rgba(255, 255, 255, 0.45); font-weight: 700; } .vision-board-preview { width: 100%; height: clamp(220px, 45vh, 560px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background: rgba(255, 255, 255, 0.02); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .vision-board-preview img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; object-position: center; display: block; border-radius: inherit; } #vbPreviewImg { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } .vision-board-full { width: 100%; height: calc(100vh - 70px); object-fit: contain; background: #000; display: block; } .landing-shell { background: radial-gradient(circle at top left, rgba(38, 110, 180, 0.20), transparent 32%), radial-gradient(circle at top right, rgba(209, 155, 63, 0.18), transparent 26%), linear-gradient(180deg, #07111c 0%, #0b1726 42%, #0c1828 100%); color: #deebf8; } .landing-header { background: rgba(10, 20, 32, 0.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .landing-header .nav-link { color: rgba(233, 241, 250, 0.74); font-weight: 600; letter-spacing: 0.04em; } .landing-header .nav-link:hover, .landing-header .nav-link:focus { color: #fff; } .landing-hero { position: relative; overflow: hidden; padding: 120px 0 88px; } .landing-orb { position: absolute; border-radius: 999px; filter: blur(18px); opacity: 0.65; pointer-events: none; } .landing-orb.orb-a { width: 260px; height: 260px; top: 70px; left: -70px; background: rgba(34, 130, 220, 0.22); } .landing-orb.orb-b { width: 360px; height: 360px; right: -60px; top: 40px; background: rgba(220, 171, 63, 0.18); } .landing-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(152, 184, 222, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9bc7ff; } .landing-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, #58b1ff, #f4c15d); box-shadow: 0 0 18px rgba(88, 177, 255, 0.6); } .landing-headline { font-size: clamp(42px, 6vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; color: #f6fbff; } .landing-copy { max-width: 620px; font-size: 18px; line-height: 1.75; color: rgba(222, 235, 248, 0.8); } .landing-hero-panel, .landing-auth-card, .landing-feature-card, .landing-plan-card, .landing-proof-card, .landing-footer-card { border: 1px solid rgba(152, 184, 222, 0.18); border-radius: 24px; box-shadow: 0 22px 60px rgba(4, 12, 22, 0.24); } .landing-hero-panel { padding: 18px; background: linear-gradient(180deg, rgba(17, 31, 49, 0.85), rgba(12, 22, 34, 0.92)); } .landing-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .landing-metric-card { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); } .landing-metric-card .label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(222, 235, 248, 0.58); margin-bottom: 8px; } .landing-metric-card .value { display: block; font-size: 28px; font-weight: 800; color: #fff; } .landing-bullet-list { display: grid; gap: 10px; } .landing-bullet { display: flex; align-items: center; gap: 12px; color: rgba(222, 235, 248, 0.78); } .landing-bullet i { color: #f4c15d; } .landing-auth-card { position: relative; padding: 24px; background: linear-gradient(180deg, rgba(14, 27, 43, 0.96), rgba(10, 20, 32, 0.94)); color: #e6f0fb; } .landing-auth-card .form-control { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(152, 184, 222, 0.18); color: #e6f0fb; } .landing-auth-card .form-control:focus { border-color: rgba(67, 125, 201, 0.55); box-shadow: 0 0 0 .25rem rgba(67, 125, 201, 0.14); } .landing-auth-card .form-label, .landing-auth-card .text-muted, .landing-auth-card .badge { color: rgba(222, 235, 248, 0.78) !important; } .landing-auth-card .badge { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; } .landing-panel-title { font-size: 28px; font-weight: 800; color: #f6fbff; } #selectedPlanNote { min-height: 22px; color: #8fc4ff; } .landing-section { padding: 88px 0; } .landing-section-light { color: #deebf8; } .landing-section-light .landing-section-title, .landing-section-light .landing-section-copy, .landing-section-light .landing-feature-card, .landing-section-light .landing-plan-card, .landing-section-light .landing-proof-card, .landing-section-light .landing-footer-card { color: #deebf8; } .landing-section-title { font-size: clamp(30px, 3vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: #f6fbff; } .landing-section-copy { color: rgba(222, 235, 248, 0.74); font-size: 17px; line-height: 1.7; } .landing-feature-card { height: 100%; padding: 26px; background: linear-gradient(180deg, rgba(14, 27, 43, 0.92), rgba(10, 20, 32, 0.9)); } .landing-feature-icon { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(64, 124, 198, 0.18), rgba(215, 173, 82, 0.16)); color: #8fc4ff; font-size: 26px; margin-bottom: 18px; } .landing-plan-card { position: relative; height: 100%; padding: 28px; background: linear-gradient(180deg, rgba(14, 27, 43, 0.96), rgba(9, 18, 29, 0.94)); } .landing-plan-card.is-selected { border-color: rgba(143, 196, 255, 0.6); box-shadow: 0 28px 70px rgba(5, 14, 26, 0.34); transform: translateY(-4px); } .landing-plan-card.featured { border-color: rgba(211, 159, 63, 0.45); transform: translateY(-10px); box-shadow: 0 28px 70px rgba(22, 34, 49, 0.22); } .landing-plan-card.featured.is-selected { border-color: rgba(143, 196, 255, 0.72); box-shadow: 0 32px 82px rgba(5, 14, 26, 0.4); } .landing-plan-badge { position: absolute; top: 18px; right: 18px; padding: 8px 12px; border-radius: 999px; background: rgba(212, 160, 67, 0.18); color: #ffd98c; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .landing-plan-price { display: flex; align-items: flex-end; gap: 8px; margin: 16px 0 10px; } .landing-plan-price .amount { font-size: 48px; font-weight: 800; line-height: 1; } .landing-plan-price .suffix { font-size: 14px; font-weight: 700; color: rgba(222, 235, 248, 0.56); text-transform: uppercase; letter-spacing: 0.12em; } .landing-plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .landing-plan-list li { display: flex; gap: 12px; align-items: flex-start; color: rgba(222, 235, 248, 0.8); } .landing-plan-list i { color: #2c8d58; margin-top: 4px; } .landing-proof-card, .landing-footer-card { padding: 28px; background: linear-gradient(180deg, rgba(14, 27, 43, 0.94), rgba(9, 18, 29, 0.92)); } .landing-footer { padding: 0 0 72px; } .landing-footer-card { background: linear-gradient(135deg, #10243a, #193856); color: #edf5fc; } .landing-footer-card .landing-section-copy { color: rgba(237, 245, 252, 0.74); } .landing-shell .text-muted { color: rgba(222, 235, 248, 0.62) !important; } .landing-shell .landing-feature-card h4, .landing-shell .landing-plan-card h3, .landing-shell .landing-proof-card .fs-4, .landing-shell .landing-proof-card .small, .landing-shell .landing-plan-card .small, .landing-shell .landing-plan-price .amount { color: #f6fbff; } .auth-shell { min-height: 100vh; } .auth-stage { min-height: 100vh; padding: 48px 0; display: flex; align-items: center; } .auth-brand-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 28px; } .auth-copy { max-width: 640px; font-size: 18px; line-height: 1.75; color: rgba(222, 235, 248, 0.8); } .auth-bullet-list { display: grid; gap: 12px; margin: 28px 0 34px; } .auth-bullet { display: flex; align-items: flex-start; gap: 14px; color: rgba(222, 235, 248, 0.78); } .auth-bullet i { color: #f4c15d; margin-top: 4px; } .auth-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 640px; } .auth-mini-card { padding: 18px; border-radius: 20px; border: 1px solid rgba(152, 184, 222, 0.16); background: linear-gradient(180deg, rgba(14, 27, 43, 0.88), rgba(9, 18, 29, 0.86)); } .auth-mini-card .label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(222, 235, 248, 0.52); margin-bottom: 8px; } .auth-mini-card .value { display: block; color: #f6fbff; font-size: 20px; font-weight: 800; line-height: 1.3; } .auth-form-card { max-width: 460px; margin-left: auto; } .auth-stepper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .auth-step-pill { padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(152, 184, 222, 0.16); background: linear-gradient(180deg, rgba(18, 33, 52, 0.74), rgba(11, 21, 34, 0.78)); color: rgba(222, 235, 248, 0.68); text-align: left; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .auth-step-pill.is-active { border-color: rgba(143, 196, 255, 0.46); box-shadow: 0 14px 28px rgba(8, 16, 26, 0.22); color: #f6fbff; transform: translateY(-1px); } .auth-step-pill .step-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .auth-step-pill .step-title { display: block; font-size: 15px; font-weight: 800; } .signup-step-panel { padding: 18px; border-radius: 22px; border: 1px solid rgba(152, 184, 222, 0.14); background: linear-gradient(180deg, rgba(18, 33, 52, 0.62), rgba(11, 21, 34, 0.72)); } .auth-plan-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .auth-plan-option { position: relative; } .auth-plan-option input { position: absolute; opacity: 0; pointer-events: none; } /* ── Plan card ── */ .auth-plan-card { display: flex; align-items: center; gap: 12px; padding: 0; border-radius: 10px; border: 1px solid rgba(152, 184, 222, 0.12); background: rgba(12, 22, 36, 0.7); cursor: pointer; overflow: hidden; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; } .auth-plan-card:hover { border-color: rgba(155, 110, 243, 0.3); background: rgba(18, 30, 50, 0.85); } .auth-plan-option input:checked + .auth-plan-card { border-color: rgba(155, 110, 243, 0.55); background: rgba(155, 110, 243, 0.07); box-shadow: 0 2px 14px rgba(155, 110, 243, 0.1); } /* Ribbon tab on the left edge */ .auth-plan-name { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(196, 216, 255, 0.6); background: rgba(155, 110, 243, 0.1); border-right: 1px solid rgba(155, 110, 243, 0.18); padding: 14px 6px; white-space: nowrap; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; } .auth-plan-option input:checked + .auth-plan-card .auth-plan-name { background: rgba(155, 110, 243, 0.2); border-right-color: rgba(155, 110, 243, 0.45); color: #c8aeff; } /* Body: description + badges */ .auth-plan-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 10px 0; } .auth-plan-description { font-size: 11.5px; color: rgba(222, 235, 248, 0.4); line-height: 1.45; } /* Radio dot */ .auth-plan-card-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(155, 184, 222, 0.25); flex-shrink: 0; position: relative; transition: border-color 0.15s; } .auth-plan-card-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: transparent; transition: background 0.15s; } .auth-plan-option input:checked + .auth-plan-card .auth-plan-card-dot { border-color: #9b6ef3; } .auth-plan-option input:checked + .auth-plan-card .auth-plan-card-dot::after { background: #9b6ef3; } /* Price */ .auth-plan-price { font-size: 13.5px; font-weight: 800; color: #ffd98c; white-space: nowrap; letter-spacing: -0.01em; padding-right: 14px; flex-shrink: 0; } .auth-plan-option input:checked + .auth-plan-card .auth-plan-price { color: #ffe9a8; } .auth-plan-helper { color: rgba(222, 235, 248, 0.4); font-size: 11.5px; line-height: 1.5; } .auth-plan-clear { padding-left: 0; padding-right: 0; } .social-auth-stack { display: grid; gap: 12px; } .social-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 700; } .social-auth-btn i { font-size: 18px; } .social-auth-btn:disabled { opacity: 0.58; cursor: not-allowed; } .auth-divider { position: relative; text-align: center; } .auth-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid rgba(152, 184, 222, 0.18); } .auth-divider span { position: relative; z-index: 1; padding: 0 14px; background: linear-gradient(180deg, rgba(14, 27, 43, 0.96), rgba(10, 20, 32, 0.94)); color: rgba(222, 235, 248, 0.58); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .signup-step-actions { display: flex; gap: 12px; flex-wrap: wrap; } .signup-chosen-plan { padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(143, 196, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: rgba(222, 235, 248, 0.82); line-height: 1.6; } .landing-plan-clear { min-height: auto; margin-top: -2px; } .auth-form-card .btn + .btn, .auth-form-card .btn + a.btn, .auth-form-card a.btn + .btn { margin-top: 12px; } .auth-form-title { font-size: 32px; font-weight: 800; color: #f6fbff; } .auth-form-copy { color: rgba(222, 235, 248, 0.72); line-height: 1.65; } .auth-legal { color: rgba(222, 235, 248, 0.52); font-size: 13px; line-height: 1.6; } .auth-page-link { color: #8fc4ff; text-decoration: none; font-weight: 700; } .auth-page-link:hover, .auth-page-link:focus { color: #c5e3ff; } @media (max-width: 991.98px) { .auth-stage { padding: 90px 0 48px; } .auth-form-card { margin-left: 0; } } @media (max-width: 767.98px) { .auth-mini-grid { grid-template-columns: 1fr; } .auth-stepper { grid-template-columns: 1fr; } .signup-step-actions { flex-direction: column; } } @media (max-width: 991.98px) { .landing-hero { padding-top: 108px; } .landing-auth-card { margin-top: 18px; } .landing-plan-card.featured { transform: none; } .landing-plan-card.is-selected, .landing-plan-card.featured.is-selected { transform: translateY(-2px); } } @media (max-width: 767.98px) { .landing-metric-grid { grid-template-columns: 1fr; } .landing-hero-panel { padding: 14px; } .landing-section { padding: 72px 0; } .entity-toolbar, .entity-toolbar-main, .entity-toolbar-end, .workspace-card-header { align-items: stretch; } .entity-toolbar-main, .entity-toolbar-end { width: 100%; } .entity-toolbar-end { justify-content: flex-end; } .entity-toolbar-filter, .entity-toolbar-filter-compact { min-width: 0; width: 100%; } .kanban-board { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════ MOBILE RESPONSIVE — Auth & Landing pages (signup, signin, ewebookz-landing, index) ═══════════════════════════════════════════ */ @media (max-width: 767.98px) { /* Give the auth stage breathing room */ .auth-stage { padding: 28px 0 36px; align-items: flex-start; } /* Card fills column, padding tightens */ .auth-form-card { max-width: 100%; margin-left: 0; padding: 20px 16px; } .landing-auth-card { padding: 20px 16px; border-radius: 16px; } .auth-form-title { font-size: 26px; } /* Brand link a bit smaller */ .auth-brand-link { margin-bottom: 18px; gap: 10px; } body[data-auth-page="signup"] .col-lg-7.order-2 { display: none !important; } body[data-auth-page="signup"] .auth-stage { min-height: auto; } /* Benefit grid (signup) — 2 col → 1 col */ .benefit-grid { grid-template-columns: 1fr !important; } /* Signup page mini-grid already handled, but ensure */ .auth-mini-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .auth-plan-description { font-size: 12px; } } /* Krishna widget intentionally visible on auth pages */ @media (max-width: 575.98px) { /* Ensure container sides have space */ .container.auth-stage, .auth-stage.container { padding-left: 16px !important; padding-right: 16px !important; } /* Auth mini-grid full stack on tiny screens */ .auth-mini-grid { grid-template-columns: 1fr; } /* ── ewebookz-landing + signin shared grids ── */ /* 2-column hardcoded grids → 1 column */ .lp-feat-grid, .si-workspace-grid { grid-template-columns: 1fr !important; } /* Stats row: keep flex-wrap and reduce gap */ .lp-stats, .si-stats { gap: 16px; } .lp-stat-n, .si-stat-n { font-size: 1.4rem; } /* Sections outside container: tighten padding */ .lp-sec { padding: 44px 0 !important; } /* Steps: remove fake vertical divider on mobile */ .lp-step:not(:last-child)::after { display: none; } .lp-step { padding: 20px 0 !important; border-bottom: 1px solid rgba(255,255,255,.05); } .lp-step:last-child { border-bottom: none; } .lp-step + .lp-step { padding-left: 0 !important; } /* Bottom CTA buttons stack */ .lp-cta-row { flex-direction: column; } .lp-bottom-cta .lp-cta-primary, .lp-bottom-cta .lp-cta-secondary { width: 100% !important; } .lp-bottom-cta { padding: 44px 0 56px !important; } .lp-bottom-cta h2 { font-size: clamp(1.4rem,6vw,2rem) !important; } /* Comparison table: already overflow-x:auto — shrink text */ .lp-compare th, .lp-compare td { padding: 10px 12px; font-size: .78rem; } /* Plan grid buttons full-width already, just tighten */ .lp-plan { padding: 11px 12px; } .lp-plan-price { font-size: .95rem; } .lp-plan-name { font-size: .83rem; } .lp-plan-desc { font-size: .68rem; } /* Streak / quote callout: remove left-border radius quirk */ .si-streak-box { flex-direction: column; gap: 10px; padding: 16px; } .lp-quote { padding: 13px 14px; } /* Auth copy font-size */ .auth-copy { font-size: .92rem !important; line-height: 1.7 !important; } /* Kicker pills */ .lp-kicker, .si-kicker { font-size: .62rem; padding: 4px 10px; } /* Trust strips wrap tighter */ .lp-trust, .si-trust { gap: 10px; } .lp-trust-item, .si-trust-item { font-size: .7rem; } /* Bullets */ .lp-bullet, .si-bullet { font-size: .85rem; } /* Auth bullets */ .auth-bullet { font-size: .83rem; } /* Feature / workspace mini-cards */ .lp-feat, .si-ws-card { padding: 11px 12px; } .lp-feat-icon, .si-ws-icon { width: 28px; height: 28px; font-size: .8rem; } .lp-feat-title, .si-ws-title { font-size: .77rem; } .lp-feat-desc, .si-ws-desc { font-size: .68rem; } /* Section headings */ .lp-sec-title { font-size: clamp(1.3rem,5vw,1.8rem) !important; } .lp-sec-sub { font-size: .88rem !important; } /* Learning method cards */ .lp-method { padding: 16px 14px; } .lp-method-name { font-size: .83rem; } /* Daily routine cards */ .lp-day-card { padding: 18px 14px; } /* Testimonial cards */ .lp-testi { padding: 18px 16px; } } /* ── Footer: responsive padding ── */ .lp-footer-bar { border-top: 1px solid rgba(255,255,255,.06); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .lp-footer-bar .lp-footer-copy { font-size: 12px; color: rgba(255,255,255,.25); } .lp-footer-bar .lp-footer-links { display: flex; gap: 16px; } .lp-footer-bar .lp-footer-links a { font-size: 12px; color: rgba(255,255,255,.25); text-decoration: none; } @media (max-width: 575.98px) { .lp-footer-bar { padding: 16px; flex-direction: column; align-items: flex-start; gap: 8px; } }