:root{ --cream:#FBF7F1; --panel:#FFFFFF; --panel-alt:#F2E9DC; --ink:#3A2E27; --ink-soft:#7D6C5E; --maroon:#A63D40; --maroon-deep:#873133; --gold:#D4A373; --accent:#D4A373; --line:#D8CBB8; --green:#1B7A73; --green-bg:#DCEEEC; --amber:#9A6B00; --amber-bg:#FBEBC9; --red:#7A3B4A; --red-bg:#F0E1E5; --sage:#7C9473; --sage-bg:#E6EBE1; --shadow: 0 10px 30px rgba(58,46,39,.10); --radius: 18px; } /* Bob's palette is intentionally always this warm ivory — it doesn't follow the visitor's OS/browser dark-mode preference. A manual toggle could still opt in by setting data-theme="dark" on , which the block below supports, but nothing does that today. */ :root[data-theme="dark"]{ --cream:#221A15; --panel:#2E241D; --panel-alt:#3B2F27; --ink:#F3E9DE; --ink-soft:#C9B8AB; --line:#4A3C32; --green-bg:#163330; --amber-bg:#3A2E10; --red-bg:#33232A; --shadow: 0 10px 30px rgba(0,0,0,.4); } *{box-sizing:border-box;} body{ margin:0; background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{font-family:'Playfair Display',serif; font-weight:700;} .wrap{max-width:1180px; margin:0 auto; padding:20px 20px 80px;} a{color:inherit;} /* ---- Buttons ---- */ .primary{ background:var(--maroon); color:#fff; border:none; padding:11px 22px; border-radius:12px; font-weight:700; cursor:pointer; font-size:.9rem; font-family:'Inter'; text-decoration:none; display:inline-block; transition:background .15s; } .primary:hover{background:var(--maroon-deep);} .primary:disabled{opacity:.6; cursor:not-allowed;} .ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink); padding:10px 18px; border-radius:12px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; font-family:'Inter'; font-size:.9rem;} .primary.big, .ghost.big{font-size:1.05rem; padding:15px 30px;} /* ---- Cards / stats ---- */ .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;} @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.grid{grid-template-columns:1fr;}} .card{background:var(--panel); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); border:1px solid var(--line);} .stat-label{font-size:.72rem; color:var(--ink-soft); font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;} .stat-value{font-size:1.7rem; font-weight:800; font-family:'Playfair Display',serif;} .stat-value.pos{color:var(--green);} .stat-value.neg{color:var(--red);} .stat-sub{font-size:.78rem; color:var(--ink-soft); margin-top:4px;} .panel{background:var(--panel); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid var(--line); margin-bottom:18px;} .panel h2{margin:0 0 14px; font-size:1.2rem; color:var(--ink);} .two-col{display:grid; grid-template-columns:1.3fr 1fr; gap:18px;} @media(max-width:860px){.two-col{grid-template-columns:1fr;}} /* ---- Table ---- */ table{width:100%; border-collapse:collapse; font-size:.88rem;} th{text-align:left; color:var(--ink-soft); font-weight:700; padding:8px 10px; border-bottom:2px solid var(--line); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;} td{padding:9px 10px; border-bottom:1px solid var(--line);} tr:last-child td{border-bottom:none;} tr.row-clickable{cursor:pointer;} tr.row-clickable:hover td{background:var(--panel-alt);} .tag{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700;} .tag.active-pol{background:var(--green-bg); color:var(--green);} .tag.lapsed{background:var(--red-bg); color:var(--red);} .tag.pending{background:var(--amber-bg); color:var(--amber);} /* ---- Forms ---- */ form.entry{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;} @media(max-width:600px){form.entry{grid-template-columns:1fr;}} label{font-size:.76rem; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:4px;} input,select{ width:100%; padding:9px 11px; border-radius:10px; border:1.5px solid var(--line); background:var(--cream); color:var(--ink); font-family:'Inter'; font-size:.9rem; } .full{grid-column:1 / -1;} .dropzone{ border:2px dashed var(--line); border-radius:14px; padding:26px; text-align:center; color:var(--ink-soft); font-size:.88rem; cursor:pointer; background:var(--cream); } .dropzone.drag{border-color:var(--maroon); background:var(--panel-alt);} .section-hidden{display:none;} .helptext{font-size:.8rem; color:var(--ink-soft); margin-top:2px;} .errortext{font-size:.82rem; color:var(--red); margin-top:8px; font-weight:600;} .chart-box{position:relative; height:230px;} footer.hint{text-align:center; color:var(--ink-soft); font-size:.78rem; margin-top:30px;} /* ---- Auth page ---- */ .auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;} .auth-card{background:var(--panel); border-radius:var(--radius); padding:36px 32px; box-shadow:var(--shadow); border:1px solid var(--line); width:100%; max-width:420px;} .auth-tabs{display:flex; gap:6px; margin-bottom:22px; border-bottom:2px solid var(--line);} .auth-tab{padding:10px 4px; margin-right:18px; border:none; background:transparent; font-family:'Playfair Display',serif; font-weight:700; font-size:1rem; color:var(--ink-soft); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;} .auth-tab.active{color:var(--maroon); border-bottom-color:var(--maroon);} .auth-form{display:flex; flex-direction:column; gap:14px;} .auth-form.section-hidden{display:none;} .tier-options{display:grid; grid-template-columns:1fr 1fr; gap:10px;} .tier-option{border:1.5px solid var(--line); border-radius:12px; padding:12px; cursor:pointer; text-align:center; font-weight:700; font-size:.85rem; background:var(--cream);} .tier-option.selected{border-color:var(--maroon); background:var(--panel-alt); color:var(--maroon);} /* ---- Marketing homepage ---- */ .home-nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:16px; flex-wrap:wrap;} .home-nav-links{display:flex; gap:26px; align-items:center;} .home-nav-links a{color:var(--ink-soft); font-weight:600; font-size:.9rem; text-decoration:none;} .home-nav-actions{display:flex; gap:14px; align-items:center;} .home-nav-actions a.plain{color:var(--ink-soft); font-weight:700; font-size:.9rem; text-decoration:none;} .brand{display:flex; align-items:center; gap:10px;} .brand img{display:block;} .brand-name{font-size:1.15rem; font-weight:700; font-family:'Playfair Display',serif;} .hero{padding:50px 0 40px; display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center;} @media(max-width:820px){.hero{grid-template-columns:1fr; text-align:center;}} .hero-mascot{display:flex; justify-content:center;} .hero h1{font-size:2.4rem; line-height:1.15; margin:0 0 16px;} .hero p.lede{font-size:1.08rem; color:var(--ink-soft); margin:0 0 24px; max-width:480px;} @media(max-width:820px){.hero p.lede{margin-left:auto; margin-right:auto;}} .hero-ctas{display:flex; gap:12px; flex-wrap:wrap;} @media(max-width:820px){.hero-ctas{justify-content:center;}} .hero-fine{font-size:.8rem; color:var(--ink-soft); margin-top:14px;} .hero-fine a{color:var(--ink-soft);} .sample-card{background:var(--panel); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid var(--line);} .sample-card .kicker{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700;} .sample-card .headline-num{font-family:'Playfair Display',serif; font-size:1.9rem; font-weight:800; margin:4px 0 14px;} .sample-grid{display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:14px;} .sample-grid > div{padding:12px 0; border-right:1px solid var(--line);} .sample-grid > div:nth-child(2n){border-right:none; padding-left:16px;} .sample-grid > div:nth-child(-n+2){border-bottom:1px solid var(--line);} .sample-label{font-size:.72rem; color:var(--ink-soft);} .sample-num{font-weight:800; font-size:1.15rem; font-family:'Playfair Display',serif;} .sample-num.neg{color:var(--red);} .sample-num.pos{color:var(--green);} .stats-strip{background:var(--panel-alt); border-radius:var(--radius); padding:34px 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:40px 0;} @media(max-width:700px){.stats-strip{grid-template-columns:1fr;}} .stats-strip .num{font-family:'Playfair Display',serif; font-size:2rem; font-weight:800; margin-bottom:4px;} .stats-strip .cap{font-size:.85rem; color:var(--ink-soft);} .home-section{padding:40px 0;} .home-section .kicker{text-align:center; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--maroon); font-weight:700; margin-bottom:8px;} .home-section h2{text-align:center; font-size:1.9rem; margin:0 0 10px;} .home-section p.section-sub{text-align:center; color:var(--ink-soft); max-width:560px; margin:0 auto 36px;} .steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} @media(max-width:760px){.steps-grid{grid-template-columns:1fr;}} .step-num{font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--gold); font-weight:800; margin-bottom:6px;} .step h3{margin:0 0 8px; font-size:1.05rem;} .step p{margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.5;} .feature-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;} @media(max-width:700px){.feature-grid{grid-template-columns:1fr;}} .feature-card{background:var(--panel); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid var(--line);} .feature-card .icon{font-size:1.6rem; margin-bottom:10px; display:block;} .feature-card h3{margin:0 0 8px; font-size:1.05rem;} .feature-card p{margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.5;} .pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:760px; margin:0 auto;} @media(max-width:700px){.pricing-grid{grid-template-columns:1fr;}} .price-card{background:var(--panel); border-radius:var(--radius); padding:30px 26px; box-shadow:var(--shadow); border:1.5px solid var(--line);} .price-card.featured{border-color:var(--maroon);} .price-card .price-eyebrow{font-size:.82rem; color:var(--ink-soft); margin-bottom:4px;} .price-card h3{margin:0 0 4px; font-size:1.2rem;} .price-card .amount{font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:800; color:var(--maroon); margin:10px 0 2px;} .price-card .amount span{font-size:.95rem; font-weight:600; color:var(--ink-soft);} .price-card ul{list-style:none; padding:0; margin:20px 0 24px; font-size:.88rem; color:var(--ink-soft);} .price-card ul li{padding:6px 0; border-bottom:1px solid var(--line);} .price-card ul li:last-child{border-bottom:none;} .price-card ul li:before{content:"✓ "; color:var(--green); font-weight:700;} .price-card .primary{display:block; text-align:center; width:100%; padding:12px;} footer.home-footer{background:var(--panel-alt); border-radius:var(--radius); padding:36px 30px; margin-top:20px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px;} @media(max-width:700px){footer.home-footer{grid-template-columns:1fr;}} footer.home-footer h4{font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 10px;} footer.home-footer a{display:block; color:var(--ink-soft); text-decoration:none; font-size:.88rem; margin-bottom:8px;} .footer-disclaimer{text-align:center; color:var(--ink-soft); font-size:.78rem; padding:20px 0;} /* ---- App shell (sidebar layout) ---- */ .app-shell{display:flex; min-height:100vh;} .sidebar{width:230px; flex-shrink:0; background:var(--panel-alt); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:20px 14px; position:sticky; top:0; height:100vh;} .sidebar .brand{padding:6px 8px 20px;} .sidebar-nav{display:flex; flex-direction:column; gap:2px; flex:1;} .sidebar-nav button{ display:flex; align-items:center; gap:10px; text-align:left; background:transparent; border:none; padding:11px 12px; border-radius:10px; font-family:'Inter'; font-weight:600; font-size:.92rem; color:var(--ink-soft); cursor:pointer; } .sidebar-nav button .ic{font-size:1.05rem; width:20px; text-align:center;} .sidebar-nav button.active{background:var(--panel); color:var(--maroon); box-shadow:var(--shadow);} .sidebar-footer{display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--line);} .sidebar-footer button{display:flex; align-items:center; gap:10px; background:transparent; border:none; padding:9px 12px; border-radius:10px; font-weight:600; font-size:.88rem; color:var(--ink-soft); cursor:pointer; text-align:left;} .main-area{flex:1; min-width:0;} .main-inner{max-width:960px; margin:0 auto; padding:30px 30px 70px;} @media(max-width:820px){ .app-shell{flex-direction:column;} .sidebar{width:100%; height:auto; position:static; flex-direction:row; padding:10px; align-items:center;} .sidebar .brand{padding:0; margin-right:4px; flex-shrink:0;} .sidebar .brand .brand-name{display:none;} .sidebar-nav{flex-direction:row; overflow-x:auto;} .sidebar-footer{flex-direction:row; border-top:none; border-left:1px solid var(--line); overflow-x:auto;} } .page-eyebrow{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--maroon); font-weight:700; margin-bottom:4px;} .page-header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;} .page-header h1{margin:0; font-size:1.7rem;} .pill{display:inline-block; padding:4px 12px; border-radius:999px; font-size:.72rem; font-weight:700; background:var(--panel); border:1.5px solid var(--line); color:var(--ink-soft);} .pill.active{color:var(--green); border-color:var(--green); background:var(--green-bg);} .pill.past_due{color:var(--amber); border-color:var(--amber); background:var(--amber-bg);} .pill.inactive, .pill.canceled{color:var(--red); border-color:var(--red); background:var(--red-bg);} /* ---- Today steppers ---- */ .stepper-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;} @media(max-width:480px){.stepper-grid{grid-template-columns:1fr;}} .stepper-box{background:var(--panel-alt); border-radius:14px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between;} .stepper-box .count-wrap{text-align:center; flex:1;} .stepper-box .count{font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:800; display:block;} .stepper-box .count-label{font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);} .stepper-btn{width:34px; height:34px; border-radius:50%; border:none; background:var(--panel); box-shadow:var(--shadow); font-size:1.1rem; font-weight:700; cursor:pointer; color:var(--ink);} /* ---- Funnel / goal bars ---- */ .funnel-row{margin-bottom:14px;} .funnel-row .row-top{display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:6px;} .funnel-row .row-top .conv{color:var(--ink-soft); font-size:.78rem;} .bar-track{background:var(--panel-alt); border-radius:999px; height:8px; overflow:hidden;} .bar-fill{background:var(--maroon); height:100%; border-radius:999px;} .goal-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);} @media(max-width:700px){.goal-grid{grid-template-columns:repeat(2,1fr);}} .goal-cell .glabel{font-size:.68rem; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.04em;} .goal-cell .gvalue{font-weight:700; font-size:.9rem; margin:2px 0 6px;} .goal-cell .bar-track{height:5px;} /* ---- Donut legend ---- */ .donut-wrap{display:flex; gap:24px; align-items:center; flex-wrap:wrap;} .donut-legend{flex:1; min-width:180px;} .donut-legend-row{display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:.86rem; border-bottom:1px solid var(--line);} .donut-legend-row:last-child{border-bottom:none;} .donut-legend-row .dot{width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:8px;} /* ---- shared report date-range filter (Desk, Activity, Costs, Profit) ---- */ .date-filter{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;} .date-filter-select{min-width:140px;} .date-filter-custom{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .date-filter-custom.section-hidden{display:none;} .date-filter-custom input[type="date"]{padding:8px 10px;} .date-filter-range{margin-left:auto;} /* ---- Activity page: "Today" summary + compact steppers + Log list ---- */ .today-card{background:var(--panel); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow); border:1px solid var(--line); margin-bottom:18px;} .today-title{font-weight:700; font-size:1.05rem;} .today-sub{font-size:.8rem; color:var(--ink-soft); margin-bottom:16px;} .mini-stepper-row{display:flex; gap:12px; flex-wrap:wrap;} .mini-stepper{flex:1; min-width:130px; background:var(--panel-alt); border-radius:14px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:6px;} .mini-stepper-btn{width:30px; height:30px; flex-shrink:0; border-radius:50%; border:none; background:var(--panel); box-shadow:var(--shadow); font-size:1rem; cursor:pointer; color:var(--ink); font-family:'Inter';} .mini-stepper-mid{text-align:center; flex:1;} .mini-stepper-count{font-weight:800; font-size:1.3rem; font-family:'Playfair Display',serif;} .mini-stepper-label{font-size:.65rem; color:var(--ink-soft); text-transform:capitalize;} .log-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;} .log-row:last-child{border-bottom:none;} .log-date{min-width:70px;} .log-dow{font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;} .log-daynum{font-weight:700;} .log-metrics{display:flex; gap:28px; flex-wrap:wrap;} .log-metric{text-align:left; min-width:50px;} .lm-label{font-size:.68rem; color:var(--ink-soft); text-transform:uppercase;} .lm-value{font-weight:700;} /* ---- Book (clients & policies) list ---- */ .book-filters{display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;} .book-filters input{flex:2; min-width:160px;} .book-filters select{flex:1; min-width:120px;} .case-card{background:var(--panel); border-radius:14px; padding:16px 18px; border:1px solid var(--line); margin-bottom:10px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;} .case-card .case-name{font-weight:700; font-size:.98rem;} .case-name-link{background:none; border:none; padding:0; font:inherit; cursor:pointer; color:var(--maroon); font-weight:700; font-size:.98rem; text-decoration:underline; text-underline-offset:2px;} .case-name-link:hover{color:var(--maroon-deep);} /* ---- modal dialog (client detail, add client, log a day, add cost) ---- */ .modal-overlay{ position:fixed; inset:0; background:rgba(58,46,39,.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:200; } .modal-overlay.section-hidden{display:none;} .modal-box{ background:var(--panel); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow); width:100%; max-width:560px; margin-bottom:40px; } .modal-box.modal-wide{max-width:720px;} .modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px;} .modal-head h2{margin:0; font-size:1.25rem;} .modal-close{background:none; border:none; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--ink-soft); padding:2px 4px;} .modal-close:hover{color:var(--ink);} .detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin-bottom:16px;} @media(max-width:520px){.detail-grid{grid-template-columns:1fr;}} .detail-item .dlabel{font-size:.7rem; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;} .detail-item .dvalue{font-size:.94rem; font-weight:600;} .modal-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);} .danger{background:var(--red); color:#fff; border:none; padding:10px 18px; border-radius:12px; font-weight:700; cursor:pointer; font-size:.88rem; font-family:'Inter';} .danger:hover{opacity:.88;} .danger:disabled{opacity:.5; cursor:not-allowed;} /* ---- statement / metrics / health-of-book (Profit page) ---- */ .statement-table td:first-child{color:var(--ink-soft); font-weight:600;} .statement-table td:last-child{text-align:right; font-weight:800; font-family:'Playfair Display',serif; font-size:1.02rem;} .statement-table tr.statement-total td{border-top:2px solid var(--line); border-bottom:none; padding-top:12px;} .metrics-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;} @media(max-width:760px){.metrics-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:480px){.metrics-grid{grid-template-columns:1fr;}} .metric-cell{background:var(--panel-alt); border-radius:14px; padding:14px 16px;} .metric-cell .mlabel{font-size:.72rem; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;} .metric-cell .mvalue{font-size:1.25rem; font-weight:800; font-family:'Playfair Display',serif;} .trend-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;} .case-card .case-sub{font-size:.8rem; color:var(--ink-soft); margin-top:2px;} .case-card .case-right{text-align:right;} .case-card .case-amount{font-weight:800; font-family:'Playfair Display',serif; font-size:1.05rem;} /* ---- BOB mascot: lives top-left on every page, rendered from a real illustrated image rather than hand-coded shapes. Just a slow, subtle breathing bob on the whole figure. ---- */ @keyframes mascot-idle{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } } .mascot-img{ width:100%; height:100%; object-fit:contain; display:block; } .mascot-sway{ animation:mascot-idle 2.8s ease-in-out infinite; } .mascot-wrap{ position:relative; display:inline-flex; align-items:center; cursor:pointer; } .mascot-wrap:active .mascot-sway{ animation-duration:.5s; } .mascot-bubble{ position:absolute; top:100%; left:0; margin-top:8px; background:var(--panel); border:1.5px solid var(--line); padding:7px 12px; border-radius:12px; font-size:.78rem; font-weight:600; white-space:nowrap; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; z-index:60; } .mascot-wrap.talk .mascot-bubble{opacity:1;} @media (prefers-reduced-motion: reduce){.mascot-sway{animation:none;}} .demo-banner{background:var(--maroon); color:#fff; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.85rem;} .demo-banner a.primary{background:#fff; color:var(--maroon); padding:7px 16px; font-size:.82rem;}