:root{--ink:#20201f;--muted:#77736f;--paper:#fffdf9;--cream:#f7f2ea;--purple:#6754c8;--orange:#ee8a55;--green:#78a99a;--line:#e9e2d9;--shadow:0 24px 70px rgba(62,48,33,.13);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper)}a{color:inherit;text-decoration:none}.site-header{width:min(1180px,calc(100% - 48px));height:92px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-weight:700;letter-spacing:-1.5px}.brand span{color:var(--orange)}.header-actions,.hero-actions{display:flex;align-items:center;gap:20px}.text-link{color:#54514e;font-size:14px;font-weight:600}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 21px;border:1px solid transparent;border-radius:15px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px)}.button-small{min-height:42px;padding:0 17px;border-radius:12px;color:#fff;background:var(--ink)}.button-primary{color:#fff;background:var(--purple);box-shadow:0 11px 22px rgba(103,84,200,.26)}.button-primary span{font-size:21px}.button-ghost{border-color:#ddd6ce;background:#fff}
.hero{position:relative;overflow:hidden;min-height:670px;display:grid;grid-template-columns:1.02fr .98fr;gap:20px;align-items:center;width:min(1180px,calc(100% - 48px));margin:auto;padding:48px 0 72px}.hero:before{content:"";position:absolute;z-index:-2;top:-10%;right:-23%;width:74%;height:115%;border-radius:48% 0 0 52%;background:#f2eee8}.hero-copy{padding:28px}.eyebrow{margin:0 0 18px;color:var(--purple);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{max-width:650px;margin-bottom:24px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(47px,5.5vw,75px);font-weight:500;line-height:.99;letter-spacing:-3.4px}h1 em{color:var(--purple);font-weight:500}.hero-description{max-width:505px;margin-bottom:30px;color:var(--muted);font-size:16px;line-height:1.7}.trust-line{display:flex;align-items:center;gap:12px;margin-top:32px;color:#87817b;font-size:12px}.trust-line p{margin:0}.avatar-stack{display:flex}.avatar-stack span{display:grid;place-items:center;width:25px;height:25px;margin-right:-6px;border:2px solid var(--paper);border-radius:50%;color:#fff;background:#b18ed2;font-size:9px;font-weight:800}.avatar-stack span:nth-child(2){background:var(--orange)}.avatar-stack span:nth-child(3){background:var(--green)}
.phone-stage{position:relative;display:grid;place-items:center;height:560px}.phone-shadow{position:absolute;right:100px;bottom:20px;width:255px;height:430px;border-radius:50%;background:rgba(81,66,48,.26);filter:blur(36px);transform:rotate(-19deg)}.phone{position:relative;z-index:1;width:278px;height:548px;padding:10px;overflow:hidden;border:7px solid #272526;border-radius:42px;background:#272526;box-shadow:-28px 37px 42px rgba(57,43,32,.27);transform:rotate(8deg) translate(-10px,-6px)}.phone-speaker{position:absolute;z-index:3;top:17px;left:calc(50% - 38px);width:76px;height:20px;border-radius:20px;background:#272526}.phone-screen{height:100%;overflow:hidden;padding:32px 16px 12px;border-radius:29px;background:#fffaf5}.app-top,.app-date-row,.app-section-title{display:flex;align-items:baseline;justify-content:space-between}.app-logo{color:var(--purple);font-family:Georgia,serif;font-size:25px;font-weight:700}.app-bell{color:#867e77;font-size:21px}.app-greeting{margin:17px 0;font-size:17px;font-weight:700}.app-greeting span{color:#f1ac4e}.app-date-row strong{font-family:Georgia,serif;font-size:17px}.app-date-row span,.app-section-title span{color:#a59d95;font-size:10px}.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px 3px;margin:12px 0 19px;text-align:center}.mini-calendar span{color:#b0aaa4;font-size:8px}.mini-calendar b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;font-size:9px}.mini-calendar .today{color:#fff;background:var(--purple);box-shadow:0 5px 8px rgba(103,84,200,.25)}.app-section-title{margin-bottom:9px}.app-section-title strong{font-size:13px}.task-card{display:flex;align-items:center;gap:8px;margin:7px 0;padding:9px;border-radius:13px}.task-card i{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;color:#765d39;background:rgba(255,255,255,.6);font-size:13px;font-style:normal}.task-card div{flex:1;min-width:0}.task-card strong{display:block;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.task-card small{color:#786f68;font-size:7px}.lilac{background:#ebe5ff}.peach{background:#fde3d6}.mint{background:#d9eee7}.check{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;color:#fff;background:var(--green);font-size:9px}.check.empty{border:1.5px solid #b9ada3;background:transparent}.app-nav{display:flex;align-items:center;justify-content:space-around;margin:14px -7px 0;padding-top:9px;border-top:1px solid #eee8e1;color:#a9a39e}.app-nav span{display:grid;place-items:center;font-size:14px}.app-nav small{margin-top:2px;font-size:6px}.app-nav .active{color:var(--purple)}.app-nav .app-add{width:27px;height:27px;margin-top:-19px;border:3px solid #fffaf5;border-radius:10px;color:#fff;background:var(--purple);font-size:20px;box-shadow:0 5px 10px rgba(103,84,200,.25)}.floating-note{position:absolute;z-index:2;bottom:76px;left:16px;margin:0;padding:11px 14px;border:1px solid rgba(255,255,255,.7);border-radius:14px;color:#514a45;background:rgba(255,255,255,.94);box-shadow:0 12px 24px rgba(70,56,42,.12);font-size:11px;font-weight:700;transform:rotate(-3deg)}.floating-note span{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:5px;border-radius:50%;color:#fff;background:var(--green)}.spark{position:absolute;z-index:-1;border-radius:50%}.spark-one{top:24px;right:54px;width:82px;height:82px;background:#eae5ff}.spark-two{bottom:47px;left:75px;width:33px;height:33px;background:#ffd6bd}
.feature-section{width:min(1080px,calc(100% - 48px));margin:12px auto 0;padding:115px 0;text-align:center}.feature-section h2{margin-bottom:48px;font-family:Georgia,serif;font-size:clamp(35px,4vw,53px);font-weight:500;line-height:1.04;letter-spacing:-2px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}.feature-card{padding:29px;border:1px solid var(--line);border-radius:22px;background:#fff;transition:transform .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.feature-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:23px;border-radius:13px;font-size:20px;font-weight:700}.violet{color:var(--purple);background:#eae5ff}.orange{color:#bf6437;background:#ffe0cf}.green{color:#3f8975;background:#d9eee7}.feature-card h3{margin-bottom:10px;font-size:17px}.feature-card p{margin-bottom:0;color:var(--muted);font-size:14px;line-height:1.65}.site-footer{display:flex;align-items:center;justify-content:space-between;width:min(1180px,calc(100% - 48px));margin:auto;padding:31px 0 45px;border-top:1px solid var(--line)}.site-footer p{margin:0;color:#8b857f;font-size:12px}
.app-page{min-height:100vh;padding:28px 18px 60px;background:radial-gradient(circle at 5% 0,#eeeaff,transparent 30%),var(--cream)}.app-shell{width:min(800px,100%);margin:auto}.app-nav-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}.app-nav-bar .brand{font-size:26px}.panel{padding:clamp(26px,5vw,48px);border:1px solid rgba(232,224,214,.9);border-radius:26px;background:rgba(255,255,255,.91);box-shadow:var(--shadow)}.panel.narrow{width:min(480px,100%);margin:6vh auto}.page-kicker{margin-bottom:8px;color:var(--purple);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.page-title{margin-bottom:9px;font-family:Georgia,serif;font-size:39px;font-weight:500;letter-spacing:-1.5px}.page-subtitle{margin-bottom:30px;color:var(--muted);line-height:1.6}.form-stack p{margin-bottom:18px}.form-stack label{display:block;margin-bottom:7px;color:#494540;font-size:13px;font-weight:700}.form-stack input,.form-stack select{width:100%;min-height:47px;padding:0 13px;border:1px solid #ded6cd;border-radius:12px;outline:0;background:#fff;font:inherit;font-size:14px}.form-stack input:focus,.form-stack select:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(103,84,200,.11)}.form-stack input[type=submit]{border:0;color:#fff;background:var(--purple);font-weight:700;cursor:pointer}.form-stack span{display:block;margin-top:5px;color:#b4532c;font-size:12px}.form-footer{margin-top:21px;color:var(--muted);font-size:13px;text-align:center}.form-footer a,.back-link{color:var(--purple);font-size:13px;font-weight:700}.flash-list{margin:0 0 22px;padding:0;list-style:none}.flash-list li{padding:12px 14px;border-radius:12px;color:#634726;background:#fff0e6;font-size:13px}.dashboard-top{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:27px}.dashboard-top .page-title{margin:0}.family-list{display:grid;gap:12px;padding:0;list-style:none}.family-link{display:flex;align-items:center;justify-content:space-between;padding:19px;border:1px solid #eee8e1;border-radius:17px;background:#fffdfb;transition:transform .2s,border-color .2s}.family-link:hover{transform:translateY(-2px);border-color:#bdb2ea}.family-link strong{font-size:16px}.family-link span{color:var(--purple);font-size:22px}.empty-state{padding:29px;border:1px dashed #d5cbc0;border-radius:17px;color:var(--muted);text-align:center}.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.inline-form .field{flex:1 1 155px}.inline-form label{display:block;margin-bottom:6px;font-size:12px;font-weight:700}.inline-form input,.inline-form select{width:100%;min-height:42px;padding:0 10px;border:1px solid #ded6cd;border-radius:10px;background:#fff}.inline-form .button{min-height:42px;border:0;border-radius:11px;color:#fff;background:var(--purple)}.section-divider{height:1px;margin:38px 0;background:var(--line)}.member-list,.calendar-list{padding:0;list-style:none}.member-list{display:flex;flex-wrap:wrap;gap:9px}.member-list li{padding:8px 11px;border-radius:10px;color:#5e5750;background:#f6f1ec;font-size:13px}.calendar-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}.calendar-card{padding:20px;border-radius:18px;background:#faf8ff}.calendar-card.parents{background:#fff5ef}.calendar-card h3{margin-bottom:14px;font-size:16px}.calendar-list li{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:12px 0;border-top:1px solid rgba(120,107,95,.13);font-size:13px}.calendar-list li:first-child{border-top:0}.calendar-item-copy{min-width:0}.calendar-item-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-item-copy small{color:var(--muted)}.status-button{flex:none;padding:6px 9px;border:1px solid #d4cbc2;border-radius:8px;color:var(--purple);background:#fff;font-size:11px;font-weight:700;cursor:pointer}.add-calendar{margin-top:25px;padding:22px;border-radius:18px;background:#f7f4ef}.add-calendar h3{margin-bottom:17px}.add-calendar .button{border:0;color:#fff;background:var(--purple)}
@media(max-width:760px){.site-header,.hero,.feature-section,.site-footer{width:min(100% - 32px,560px)}.site-header{height:76px}.text-link{display:none}.hero{grid-template-columns:1fr;padding:46px 0 55px;text-align:center}.hero:before{top:43%;right:-46%;width:145%;height:55%;border-radius:55% 55% 0 0}.hero-copy{padding:0}.hero-description{margin-right:auto;margin-left:auto}.hero-actions{justify-content:center;flex-wrap:wrap;gap:10px}.trust-line{justify-content:center}.phone-stage{height:500px;margin-top:10px}.phone{transform:rotate(5deg) scale(.9)}.phone-shadow{right:calc(50% - 118px)}.floating-note{bottom:55px;left:4%}.feature-section{padding:78px 0}.feature-grid,.calendar-columns{grid-template-columns:1fr}.site-footer{flex-direction:column;gap:15px;align-items:flex-start}.dashboard-top{align-items:start;flex-direction:column}.inline-form{display:grid}.panel{padding:25px}.app-nav-bar{margin-bottom:23px}}
/* Calendrier mensuel */
.family-calendar{padding:22px;border:1px solid #eee8e1;border-radius:22px;background:#fffdfb}.calendar-heading,.agenda-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.calendar-heading h2,.agenda-heading h2{margin:0;font-size:21px}.calendar-heading .page-kicker{margin:0 0 4px}.calendar-legend{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:11px;font-weight:700}.calendar-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%;background:var(--purple)}.legend-dot.parents-dot{background:#ef9a67}.month-switcher{display:flex;align-items:center;justify-content:space-between;margin:24px 0 15px}.month-switcher h3{margin:0;text-transform:capitalize;font-family:Georgia,serif;font-size:20px}.month-switcher a{display:grid;place-items:center;width:34px;height:34px;border:1px solid #e5ddd4;border-radius:10px;color:var(--purple);background:#fff;font-weight:800}.calendar-weekdays,.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-weekdays{margin-bottom:6px;color:#a59d95;font-size:10px;font-weight:800;text-align:center;text-transform:uppercase}.month-grid{overflow:hidden;border-top:1px solid #eee8e1;border-left:1px solid #eee8e1;border-radius:14px}.calendar-day{min-height:105px;padding:8px;border-right:1px solid #eee8e1;border-bottom:1px solid #eee8e1;background:#fff}.calendar-day time{display:grid;place-items:center;width:25px;height:25px;margin-bottom:5px;border-radius:8px;color:#514a45;font-size:11px;font-weight:800}.calendar-day.today time{color:#fff;background:var(--purple);box-shadow:0 4px 10px rgba(103,84,200,.28)}.calendar-day.outside-month{background:#faf8f5}.calendar-day.outside-month time{color:#c8c1ba}.day-items{display:grid;gap:4px}.calendar-event{overflow:hidden;padding:4px 5px;border-radius:6px;color:#58487b;background:#eeeaff;font-size:9px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.calendar-event span{margin-right:3px;font-size:8px;font-weight:500}.calendar-event.parents{color:#965831;background:#fff0e8}.calendar-event.completed{opacity:.48;text-decoration:line-through}.calendar-event b{float:right;margin-left:3px}.agenda-section{margin-top:20px;padding:4px 2px}.agenda-heading span{color:var(--muted);font-size:12px}.agenda-list{margin:13px 0 0;padding:0;list-style:none}.agenda-list li{display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #eee8e1}.agenda-date{display:grid;place-items:center;flex:none;width:39px;height:39px;border-radius:12px;color:#6253a0;background:#eeeaff;line-height:1}.agenda-date strong{font-size:15px}.agenda-date span{margin-top:3px;font-size:9px;text-transform:uppercase}.agenda-list .calendar-item-copy{flex:1}.agenda-list em{padding:2px 5px;border-radius:5px;color:#a7613a;background:#fff0e8;font-size:9px;font-style:normal;font-weight:700}.status-button.complete{color:#387363;border-color:#c8e5dc;background:#f0fbf6}.empty-calendar{margin:12px 0 0;padding:24px;border:1px dashed #dcd2c7;border-radius:14px;color:var(--muted);text-align:center}
@media(max-width:760px){.family-calendar{padding:15px}.calendar-heading{align-items:flex-start;flex-direction:column}.calendar-day{min-height:74px;padding:4px}.calendar-day time{width:21px;height:21px;margin-bottom:3px;font-size:10px}.calendar-event{padding:3px;font-size:0}.calendar-event span{display:none}.calendar-event:before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:currentColor}.calendar-event b{display:none}.calendar-weekdays{font-size:8px}.month-switcher{margin:17px 0 12px}.month-switcher h3{font-size:17px}.agenda-list li{gap:9px}}

.agenda-actions{display:flex;align-items:center;gap:6px}.delete-button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:9px;color:#a79e97;background:transparent;font-size:21px;line-height:1;cursor:pointer}.delete-button:hover{color:#b24e3d;background:#fff0ec}
.event-dialog{width:min(570px,calc(100% - 30px));margin:auto;padding:0;border:0;border-radius:24px;background:#fffdfb;box-shadow:0 24px 70px rgba(51,39,32,.28)}.event-dialog::backdrop{background:rgba(47,39,32,.45);backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:25px 26px 12px}.dialog-heading h2{margin:0;font-family:Georgia,serif;font-size:27px;font-weight:500}.dialog-heading .page-kicker{margin:0 0 4px}.dialog-close{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;color:#706761;background:#f4efea;font-size:24px;line-height:1;cursor:pointer}.dialog-date{margin:0 26px 20px;color:var(--purple);font-size:13px;font-weight:800}.dialog-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:23px 26px 27px;border-top:1px solid #eee8e1;background:#fff}.dialog-form .field{min-width:0}.dialog-form .field.full{grid-column:1/-1}.dialog-form label{display:block;margin-bottom:6px;color:#494540;font-size:12px;font-weight:800}.dialog-form input,.dialog-form select{width:100%;min-height:44px;padding:0 10px;border:1px solid #ded6cd;border-radius:10px;background:#fff;font:inherit;font-size:13px}.dialog-form input:focus,.dialog-form select:focus{outline:0;border-color:var(--purple);box-shadow:0 0 0 4px rgba(103,84,200,.11)}.dialog-submit{grid-column:1/-1;min-height:46px;margin-top:3px;border:0;border-radius:11px;color:#fff;background:var(--purple);font-weight:800;cursor:pointer}.calendar-day.can-add-event{cursor:pointer;transition:background .18s,box-shadow .18s}.calendar-day.can-add-event:hover{position:relative;z-index:1;background:#faf8ff;box-shadow:inset 0 0 0 2px #cfc5fb}.calendar-day.can-add-event:focus{position:relative;z-index:1;outline:2px solid var(--purple);outline-offset:-2px}.calendar-day.can-add-event:after{content:'+';position:absolute;right:7px;top:7px;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;color:var(--purple);background:#eeeaff;opacity:0;font-size:15px;font-weight:700;transition:opacity .18s}.calendar-day.can-add-event:hover:after,.calendar-day.can-add-event:focus:after{opacity:1}
@media(max-width:760px){.event-dialog{width:calc(100% - 22px);max-height:calc(100vh - 24px)}.dialog-heading{padding:21px 20px 10px}.dialog-date{margin:0 20px 17px}.dialog-form{gap:12px;padding:19px 20px 22px}.calendar-day.can-add-event:after{display:none}}
.account-menu,.family-nav-actions{display:flex;align-items:center;gap:10px}.account-identity{display:flex;align-items:center;gap:7px;color:#514a45;font-size:13px;font-weight:800}.account-avatar{display:grid;place-items:center;width:29px;height:29px;border-radius:10px;color:#fff;background:var(--purple);font-size:12px}.logout-button{border:0;border-radius:9px;padding:7px 9px;color:#746b64;background:#f5f0ea;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.logout-button:hover{color:#9b4f3b;background:#fff0e9}@media(max-width:560px){.account-identity>span:last-child{display:none}.logout-button{padding:7px}.family-nav-actions{gap:7px}.family-nav-actions .back-link{font-size:12px}}
.calendar-event.can-edit-event{cursor:pointer}.calendar-event.can-edit-event:hover{filter:brightness(.96);box-shadow:0 0 0 1px currentColor}.calendar-event.can-edit-event:focus{outline:2px solid var(--purple);outline-offset:1px}
.members-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:12px}.members-heading h2{margin:0}.members-heading p{margin:4px 0 0;color:var(--muted);font-size:12px}.member-list{display:grid;gap:8px}.member-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #eee8e1;border-radius:14px;background:#fffdfb}.member-profile{display:flex;align-items:center;gap:9px;min-width:0}.member-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;color:#fff;background:#8b7cd4;font-size:13px;font-weight:800}.member-profile strong{display:block;font-size:13px}.member-profile strong em{padding:2px 4px;border-radius:5px;color:#71649e;background:#eeeaff;font-size:9px;font-style:normal}.member-profile small{display:block;overflow:hidden;max-width:185px;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.member-controls,.member-controls form{display:flex;align-items:center;gap:6px}.member-controls select{min-height:32px;border:1px solid #ded6cd;border-radius:8px;padding:0 6px;background:#fff;font:inherit;font-size:11px}.member-save{min-height:32px;border:0;border-radius:8px;padding:0 8px;color:#fff;background:var(--purple);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.member-remove{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;color:#a79e97;background:transparent;font-size:20px;cursor:pointer}.member-remove:hover{color:#b24e3d;background:#fff0ec}.member-role{padding:6px 8px;border-radius:8px;color:#756c65;background:#f5f0ea;font-size:11px;font-weight:700}@media(max-width:650px){.member-row{align-items:flex-start;flex-direction:column}.member-controls{width:100%;justify-content:space-between}.member-profile small{max-width:240px}.member-controls form:first-child{flex:1}.member-controls select{flex:1}}
.today-dashboard{margin:0 0 24px;padding:20px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#6556b4,#897ad5);box-shadow:0 14px 25px rgba(103,84,200,.2)}.today-heading{display:flex;align-items:end;justify-content:space-between;gap:12px}.today-heading .page-kicker{margin:0 0 4px;color:#dcd5ff}.today-heading h2{margin:0;font-family:Georgia,serif;font-size:24px;font-weight:500}.today-count{padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.14);font-size:11px;font-weight:700}.today-list{margin:16px 0 0;padding:0;list-style:none}.today-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.18)}.today-time{width:38px;color:#e7e2ff;font-size:12px;font-weight:800}.today-list a{flex:1;min-width:0;color:#fff}.today-list strong{display:block;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.today-list small{display:block;margin-top:2px;color:#ddd7fb;font-size:10px}.today-done{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;color:#5f52a6;background:#dff4e9;font-size:11px}.today-empty{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px;border-radius:13px;background:rgba(255,255,255,.12)}.today-empty span{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.16)}.today-empty p{margin:0;color:#f0edff;font-size:12px;line-height:1.4}.upcoming-dashboard{margin:-9px 0 24px}.upcoming-dashboard h2{margin-bottom:10px;font-size:18px}.upcoming-dashboard ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.upcoming-dashboard a{display:grid;grid-template-columns:43px 1fr;column-gap:9px;align-items:center;padding:10px 12px;border:1px solid #eee8e1;border-radius:12px;background:#fffdfb}.upcoming-dashboard a>span{grid-row:span 2;color:var(--purple);font-size:11px;font-weight:800}.upcoming-dashboard strong{font-size:12px}.upcoming-dashboard small{color:var(--muted);font-size:10px}
.calendar-view-tabs{display:flex;width:max-content;margin:20px auto -4px;padding:4px;border-radius:11px;background:#f3efe9}.calendar-view-tabs a{padding:7px 13px;border-radius:8px;color:var(--muted);font-size:11px;font-weight:800}.calendar-view-tabs a.active{color:var(--purple);background:#fff;box-shadow:0 2px 5px rgba(68,54,38,.08)}.legend-dot.task-dot{background:#55a68c}.calendar-event.task{color:#30735d;background:#e2f3ec}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(105px,1fr));overflow-x:auto;border:1px solid #eee8e1;border-radius:14px}.week-day{min-height:320px;padding:9px;border-right:1px solid #eee8e1;background:#fff}.week-day:last-child{border-right:0}.week-day header{display:flex;align-items:center;gap:7px;margin-bottom:12px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.week-day header strong{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;color:#514a45;font-size:12px}.week-day.today header strong{color:#fff;background:var(--purple)}.week-items{display:grid;gap:5px}.week-day.can-add-event{cursor:pointer}.week-day.can-add-event:hover{background:#faf8ff}.agenda-item-button{flex:1;min-width:0;border:0;padding:0;text-align:left;background:transparent;cursor:pointer}.agenda-item-button strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.agenda-item-button small{display:block;color:var(--muted)}.item-detail-dialog{width:min(460px,calc(100% - 30px));margin:auto;padding:0;border:0;border-radius:24px;background:#fffdfb;box-shadow:0 24px 70px rgba(51,39,32,.28)}.item-detail-dialog::backdrop{background:rgba(47,39,32,.45);backdrop-filter:blur(3px)}.detail-content{display:grid;gap:12px;padding:4px 26px 27px}.detail-content p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}.detail-content .detail-description{padding:13px;border-radius:12px;color:#5d554f;background:#f6f1ec}.dialog-form .task-field{display:none}@media(max-width:760px){.week-grid{grid-template-columns:repeat(7,minmax(86px,1fr))}.week-day{min-height:250px}.week-day header{align-items:center;flex-direction:column}.week-day .calendar-event{font-size:9px}.item-detail-dialog{width:calc(100% - 22px)}.detail-content{padding:4px 20px 22px}}
.today-tasks{margin:-10px 0 24px;padding:18px;border:1px solid #d8ebe3;border-radius:18px;background:#f5fcf8}.today-tasks .page-kicker{margin:0 0 4px;color:#43826f}.today-tasks h2{margin:0;font-size:18px}.today-tasks ul{display:grid;gap:6px;margin:13px 0 0;padding:0;list-style:none}.today-tasks a{display:flex;align-items:center;gap:10px;padding:9px;border-radius:10px;background:#fff}.today-tasks a>span{color:#55a68c;font-size:20px}.today-tasks a div{flex:1}.today-tasks strong{display:block;font-size:12px}.today-tasks small{color:var(--muted);font-size:10px}.today-tasks b{color:#55a68c}
.app-shell .agenda-section:first-of-type{margin-top:8px}.agenda-section+.section-divider{margin-top:30px}
.add-member-button{min-height:36px;border:1px solid #d9d0f5;border-radius:10px;padding:0 11px;color:var(--purple);background:#f7f4ff;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.add-member-button:hover{background:#eeeaff}.member-dialog .dialog-date{color:var(--muted);font-weight:500}.member-form{grid-template-columns:1fr}.member-form .field span{display:block;margin-top:5px;color:#b4532c;font-size:12px}@media(max-width:500px){.members-heading{align-items:flex-start;flex-direction:column}.add-member-button{width:100%}}
.members-heading{gap:16px}.add-member-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:0 15px;border:0;border-radius:12px;color:#fff;background:var(--purple);box-shadow:0 7px 14px rgba(103,84,200,.22);font-size:12px}.add-member-button span{display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:rgba(255,255,255,.18);font-size:17px;font-weight:500;line-height:1}.add-member-button:hover{color:#fff;background:#5d4bb6;transform:translateY(-1px)}.dialog-form input.dialog-submit{grid-column:1/-1;min-height:48px;margin-top:4px;border:0;border-radius:12px;color:#fff!important;background:var(--purple)!important;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 7px 14px rgba(103,84,200,.2)}.dialog-form input.dialog-submit:hover{background:#5d4bb6!important}


.password-security-card {
  align-items: center;
  background: #f7f5ff;
  border: 1px solid #e4defd;
  border-radius: 16px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin: 10px 0 24px;
  padding: 18px;
}
.password-security-card p { color: #6e6a80; font-size: .92rem; margin: 5px 0 0; }
.account-profile-link { color: #5c4ed7; font-size: .9rem; font-weight: 700; text-decoration: none; }
.account-profile-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .password-security-card { align-items: flex-start; flex-direction: column; } }


.dashboard-planner { margin: 28px 0; padding: 24px; border: 1px solid #ece9f8; border-radius: 24px; background: linear-gradient(145deg, #fff 0%, #f8f7ff 100%); }
.planner-heading { align-items: flex-start; display: flex; gap: 18px; justify-content: space-between; }
.planner-heading h2 { margin: 3px 0 6px; }
.planner-heading p { color: #706b83; margin: 0; }
.planner-families { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.planner-families a { background: #f0eefb; border-radius: 999px; color: #5d5678; font-size: .9rem; font-weight: 700; padding: 8px 13px; text-decoration: none; }
.planner-families a.active { background: #6c5ce7; color: white; }
.dashboard-month-grid .planner-day { color: inherit; display: block; min-height: 118px; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease; }
.dashboard-month-grid .planner-day:hover { box-shadow: 0 7px 18px rgba(87, 70, 187, .13); transform: translateY(-2px); }
.dashboard-month-grid .calendar-event { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-month-grid .calendar-event i { font-style: normal; margin-right: 4px; }
.more-items { color: #716b88; display: block; font-size: .78rem; font-weight: 700; margin-top: 3px; }
@media (max-width: 640px) { .dashboard-planner { margin-left: -4px; margin-right: -4px; padding: 16px 10px; } .planner-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .dashboard-month-grid .planner-day { min-height: 76px; padding: 7px; } .dashboard-month-grid .calendar-event { font-size: .7rem; } }

/* Calendar orientation: past days and today are deliberately distinct. */
.calendar-day.past-day, .week-day.past-day { background: #f6f4f1; }
.calendar-day.past-day time, .week-day.past-day header strong { color: #9b948c; background: #ebe7e1; text-decoration: line-through; }
.calendar-day.past-day .calendar-event, .week-day.past-day .calendar-event { opacity: .64; }
.calendar-day.today, .week-day.today { background: linear-gradient(145deg, #eeeaff 0%, #faf9ff 72%); box-shadow: inset 0 0 0 2px #7662d4; }
.calendar-day.today time, .week-day.today header strong { color: #fff; background: #6652c7; box-shadow: 0 4px 10px rgba(102,82,199,.24); text-decoration: none; }
.today-label { display: inline-flex; margin: .28rem 0 .12rem .28rem; padding: .14rem .38rem; border-radius: 999px; color: #4b3b9d; background: #ddd6ff; font-size: .63rem; font-weight: 800; line-height: 1; letter-spacing: .01em; }
.calendar-status-legend { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: .35rem 0 .85rem; color: var(--muted); font-size: .82rem; }
.calendar-status-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.calendar-status-legend i, .legend-dot.today-dot, .legend-dot.past-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; }
.calendar-status-legend .today-status i, .legend-dot.today-dot { background: #6652c7; box-shadow: 0 0 0 3px #e3defc; }
.calendar-status-legend .past-status i, .legend-dot.past-dot { background: #d1cbc4; }
@media (max-width: 620px) { .today-label { margin-left: .16rem; padding: .12rem .28rem; font-size: .56rem; } }

/* Previous dates remain as a quiet calendar reference, without old entries. */
.calendar-day.past-day:not(.today), .week-day.past-day:not(.today) {
    opacity: .48;
    background: #faf9f7;
}
.calendar-day.past-day:not(.today) .day-items, .week-day.past-day:not(.today) .week-items {
    display: none;
}

/* Unambiguous month colours: grey = past, white = upcoming, purple = today. */
.calendar-day.outside-month:not(.past-day) { background: #f5f4f8; }
.calendar-day.past-day:not(.today),
.calendar-day.outside-month.past-day,
.week-day.past-day:not(.today) {
    opacity: 1;
    background: #e6e8ec !important;
}
.calendar-day.past-day:not(.today) time,
.calendar-day.outside-month.past-day time,
.week-day.past-day:not(.today) header strong {
    color: #77808b;
    background: #d4d8dd;
}
.calendar-day.today, .week-day.today {
    background: #dcd5ff !important;
    box-shadow: inset 0 0 0 3px #5942bd, 0 5px 14px rgba(89,66,189,.18);
}
.calendar-day.today time, .week-day.today header strong {
    background: #4f37b4;
}

/* The purple border alone identifies today; no text label is needed in the date cell. */
.today-label, .calendar-status-legend .today-status { display: none; }

/* Mobile-first calendar workflow. */
.optional-details { border: 1px solid #e7e1da; border-radius: 12px; padding: 0; }
.optional-details summary { cursor: pointer; list-style: none; padding: 13px 14px; color: #625a54; font-size: 13px; font-weight: 800; }
.optional-details summary::-webkit-details-marker { display: none; }
.optional-details summary::after { content: '+'; float: right; color: var(--purple); font-size: 18px; line-height: .8; }
.optional-details[open] summary { border-bottom: 1px solid #eee8e1; }
.optional-details[open] summary::after { content: '−'; }
.optional-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 14px; }
.optional-fields .field { min-width: 0; }

@media (max-width: 760px) {
    .app-page { padding: 14px 10px 34px; }
    .app-shell { width: 100%; }
    .app-nav-bar { margin: 0 4px 15px; }
    .app-nav-bar .brand { font-size: 24px; }
    .account-profile-link, .family-nav-actions > .back-link { display: none; }
    .panel { padding: 20px 14px; border-radius: 20px; }
    .page-title { font-size: 31px; }
    .page-subtitle { margin-bottom: 22px; font-size: 14px; }
    .dashboard-top { gap: 12px; margin-bottom: 18px; }
    .dashboard-top .button { width: 100%; min-height: 48px; }
    .planner-heading p, .calendar-status-legend, .calendar-legend { display: none; }
    .planner-heading { gap: 8px; }
    .planner-heading .back-link { font-size: 12px; }
    .family-calendar { margin: 0 -2px; padding: 13px 8px; border-radius: 18px; }
    .calendar-heading h2 { font-size: 19px; }
    .calendar-view-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 16px 0 0; }
    .calendar-view-tabs a { padding: 10px 13px; text-align: center; }
    .month-switcher { margin: 15px 0 11px; }
    .month-switcher a { width: 44px; height: 44px; border-radius: 12px; font-size: 20px; }
    .calendar-day { min-height: 67px; padding: 4px; }
    .calendar-day time { width: 25px; height: 25px; font-size: 11px; }
    .today-dashboard { padding: 16px; border-radius: 17px; }
    .today-heading h2 { font-size: 21px; }

    dialog.event-dialog, dialog.item-detail-dialog {
        width: 100%; max-width: none; max-height: min(88dvh, 760px); margin: auto 0 0;
        border-radius: 24px 24px 0 0; overscroll-behavior: contain;
    }
    dialog.event-dialog::before, dialog.item-detail-dialog::before {
        content: ''; display: block; width: 38px; height: 4px; margin: 10px auto 0;
        border-radius: 999px; background: #d8d1ca;
    }
    .dialog-heading { padding: 17px 20px 8px; }
    .dialog-heading h2 { font-size: 24px; }
    .dialog-date { margin: 0 20px 15px; }
    .dialog-form { display: grid; grid-template-columns: 1fr; gap: 12px; max-height: calc(88dvh - 118px); overflow-y: auto; padding: 17px 20px calc(18px + env(safe-area-inset-bottom)); }
    .dialog-form .field, .dialog-form .field.full { grid-column: auto; }
    .dialog-form input, .dialog-form select { min-height: 50px; font-size: 16px; }
    .dialog-form label { margin-bottom: 7px; font-size: 13px; }
    .dialog-submit, .dialog-form input.dialog-submit { position: sticky; bottom: 0; min-height: 52px; margin-top: 3px; box-shadow: 0 -10px 18px rgba(255,255,255,.92), 0 8px 16px rgba(103,84,200,.22); }
    .optional-details { border-radius: 13px; }
    .optional-details summary { padding: 15px 14px; font-size: 14px; }
    .optional-fields { grid-template-columns: 1fr; gap: 12px; padding: 13px; }
    .detail-content { padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); }
}

/* Private planning stays visually distinct from the shared family space. */
.personal-nav-link { color: var(--purple); font-size: 12px; font-weight: 800; }
.personal-shortcut { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; margin: 0 0 22px; padding: 14px; border: 1px solid #ddd5fb; border-radius: 17px; background: #f8f6ff; }
.personal-shortcut > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--purple); font-size: 21px; }
.personal-shortcut strong, .personal-shortcut small { display: block; }
.personal-shortcut strong { font-size: 14px; }
.personal-shortcut small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.personal-shortcut b { color: var(--purple); font-size: 20px; }
.personal-hero { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.personal-hero .page-title { margin-bottom: 7px; }
.personal-hero p:last-child { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.55; }
.personal-hero .button { flex: none; }
.personal-upcoming { margin-bottom: 24px; }
.personal-empty { display: flex; align-items: center; gap: 13px; margin: 0 0 24px; padding: 16px; border-radius: 16px; background: #f8f6ff; }
.personal-empty > span { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: var(--purple); background: #e9e4ff; }
.personal-empty strong { font-size: 13px; }
.personal-empty p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.personal-private { padding: 5px 8px; border-radius: 8px; color: #5947a9; background: #eeeaff; font-size: 11px; font-weight: 800; }
.calendar-event.personal-event { color: #4f3f99; background: #e8e2ff; }
@media (max-width: 760px) { .personal-nav-link { display: inline-block; padding: 7px 8px; border-radius: 8px; background: #f0edff; font-size: 11px; } .personal-hero { align-items: stretch; flex-direction: column; margin-bottom: 18px; } .personal-hero .button { width: 100%; } .personal-shortcut { margin-bottom: 18px; } }

/* Direct sharing choice: no hidden settings screen for the main family action. */
.sharing-picker > span { display: block; margin-bottom: 7px; color: #494540; font-size: 12px; font-weight: 800; }
.scope-select { display: none; }
.scope-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 4px; border-radius: 12px; background: #f3f0eb; }
.scope-buttons button { min-height: 42px; border: 0; border-radius: 9px; color: #756d66; background: transparent; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.scope-buttons button.active { color: var(--purple); background: #fff; box-shadow: 0 2px 6px rgba(62,48,33,.1); }
.end-toggle { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 2px; color: #625a54; font-size: 13px; font-weight: 800; cursor: pointer; }
.end-toggle input { width: 19px; height: 19px; margin: 0; accent-color: var(--purple); }
.note-details { border-top: 1px solid #eee8e1; padding-top: 10px; }
.note-details summary { cursor: pointer; color: #756d66; font-size: 12px; font-weight: 800; }
.note-details .field { margin-top: 12px; }
@media (max-width: 760px) { .scope-buttons button { min-height: 48px; font-size: 13px; } .end-toggle { min-height: 48px; font-size: 14px; } .note-details summary { font-size: 13px; } }
.notification-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: -8px 0 23px; padding: 14px; border: 1px solid #dcebe5; border-radius: 16px; background: #f6fcf9; }
.notification-card strong { display: block; font-size: 13px; }
.notification-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.notification-button { flex: none; min-height: 38px; border: 0; border-radius: 10px; padding: 0 12px; color: #fff; background: #43826f; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.notification-button:disabled { background: #78a99a; }
@media (max-width: 760px) { .notification-card { align-items: flex-start; } .notification-button { min-height: 42px; } }

/* Personal items open the same editor from the agenda or directly in the calendar. */
.calendar-event.can-edit-personal { border: 0; cursor: pointer; font: inherit; text-align: left; }
.calendar-event.can-edit-personal:hover { filter: brightness(.96); box-shadow: 0 0 0 1px currentColor; }
.calendar-event.can-edit-personal:focus { outline: 2px solid var(--purple); outline-offset: 1px; }

/* Weekly planning becomes a readable seven-day agenda on phones: no sideways scrolling. */
@media (max-width: 760px) {
  .week-grid,
  .personal-week-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .week-day {
    min-height: 0;
    padding: 13px;
    border: 1px solid #eee8e1;
    border-radius: 16px;
    background: #fffdfb;
  }

  .week-day:not(:last-child) { border-right: 1px solid #eee8e1; }
  .week-day header {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
  }

  .week-day header > span { min-width: 34px; }
  .week-day header strong { width: 29px; height: 29px; font-size: 13px; }
  .week-day header::after {
    content: '';
    height: 1px;
    flex: 1;
    background: #eee8e1;
  }

  .week-items { gap: 7px; }
  .week-day .calendar-event,
  .week-day .calendar-event.can-edit-event,
  .week-day .calendar-event.can-edit-personal {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
  }

  .week-day .calendar-event::before { display: none; }
  .week-day .calendar-event span { display: inline; margin: 0 7px 0 0; font-size: 11px; }
  .week-day .calendar-event i { min-width: 39px; margin-right: 7px; font-style: normal; font-size: 11px; font-weight: 800; }
  .week-day.past-day { background: #f6f4f1; }
  .week-day.today { border-color: #7662d4; box-shadow: inset 0 0 0 1px #7662d4; }
}

.dashboard-week-grid .dashboard-week-day { color: inherit; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease; }
.dashboard-week-grid .dashboard-week-day:hover { box-shadow: 0 7px 18px rgba(87, 70, 187, .13); transform: translateY(-2px); }
@media (max-width: 760px) { .dashboard-week-grid .dashboard-week-day { display: block; } }

/* Weekly agenda: each entry reads like a timetable slot, with its time immediately visible. */
.week-items { display: grid; gap: 7px; }
.timeline-event {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-left: 3px solid #7b67cf;
  border-radius: 9px;
  color: #4f3f99;
  background: #eeeaff;
  font: inherit;
  text-align: left;
}
.timeline-event.parents { border-left-color: #ef9a67; color: #965831; background: #fff0e8; }
.timeline-event.task { border-left-color: #55a68c; color: #30735d; background: #e2f3ec; }
.timeline-event.completed { opacity: .55; text-decoration: line-through; }
.timeline-event.can-edit-event, .timeline-event.can-edit-personal { cursor: pointer; }
.timeline-event.can-edit-event:hover, .timeline-event.can-edit-personal:hover { filter: brightness(.97); box-shadow: 0 0 0 1px currentColor; }
.timeline-event.can-edit-event:focus, .timeline-event.can-edit-personal:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
.timeline-time { color: currentColor; font-size: 10px; font-weight: 800; line-height: 1.35; }
.timeline-time b { display: block; font-size: 9px; font-weight: 700; }
.timeline-title { overflow: hidden; font-size: 11px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .week-day .timeline-event { grid-template-columns: 63px minmax(0, 1fr); padding: 10px; border-radius: 11px; }
  .week-day .timeline-time { font-size: 11px; }
  .week-day .timeline-time b { display: inline; margin-left: 2px; font-size: 11px; }
  .week-day .timeline-title { font-size: 13px; }
}

/* Mobile calendar refresh: large touch targets, warm family colours and readable times. */
@media (max-width: 760px) {
  .app-page {
    background:
      radial-gradient(circle at 100% 0, #ffe5d5 0, transparent 28%),
      radial-gradient(circle at 0 18%, #e8e0ff 0, transparent 31%),
      #f7f1ea;
  }

  .family-calendar,
  .dashboard-planner {
    margin-left: -8px;
    margin-right: -8px;
    padding: 20px 11px;
    border: 1px solid #ebddcf;
    border-radius: 23px;
    background:
      radial-gradient(circle at 97% 0, rgba(255, 219, 191, .72), transparent 15rem),
      radial-gradient(circle at 2% 100%, rgba(213, 237, 226, .7), transparent 16rem),
      #fffdf9;
    box-shadow: 0 14px 30px rgba(86, 63, 42, .09);
  }

  .personal-calendar {
    background:
      radial-gradient(circle at 98% 0, rgba(230, 221, 255, .85), transparent 15rem),
      radial-gradient(circle at 2% 100%, rgba(213, 237, 226, .65), transparent 16rem),
      #fffdf9;
  }

  .calendar-heading h2,
  .planner-heading h2 { font-family: Georgia, "Times New Roman", serif; font-size: 24px; font-weight: 500; }
  .calendar-heading .page-kicker,
  .planner-heading .page-kicker { color: #bd6b47; }
  .calendar-view-tabs { margin-top: 18px; padding: 4px; border: 1px solid #eadccd; border-radius: 14px; background: #f8f0e9; }
  .calendar-view-tabs a { min-height: 45px; padding: 11px 10px; border-radius: 10px; font-size: 13px; }
  .calendar-view-tabs a.active { color: #5b479f; background: #fff; box-shadow: 0 3px 9px rgba(76, 55, 38, .11); }

  .month-switcher { margin: 18px 0 12px; padding: 4px; border: 1px solid #eddfd2; border-radius: 14px; background: rgba(255,255,255,.76); }
  .month-switcher h3 { font-size: 18px; }
  .month-switcher a { width: 42px; height: 42px; border: 0; border-radius: 11px; color: #5e499f; background: #f0eaff; font-size: 19px; }
  .calendar-weekdays { margin-bottom: 8px; color: #9b8070; font-size: 9px; }

  .month-grid { border: 1px solid #e8dacc; border-radius: 15px; background: #e8dacc; gap: 1px; }
  .calendar-day { min-height: 106px; padding: 6px 4px; background: rgba(255,255,255,.95); }
  .calendar-day.outside-month { background: #f6eee7; }
  .calendar-day time { width: 27px; height: 27px; margin-bottom: 6px; border-radius: 9px; font-size: 11px; }
  .calendar-day.today { box-shadow: inset 0 0 0 2px #684cc4, 0 4px 10px rgba(104,76,196,.15); }
  .calendar-day.today time { background: #684cc4; }
  .day-items { gap: 4px; }

  /* The month keeps a compact overview, but always shows the complete starting hour. */
  .month-grid .calendar-event {
    display: block;
    min-height: 20px;
    overflow: hidden;
    padding: 4px 3px 4px 5px;
    border-radius: 6px;
    box-shadow: inset 2px 0 0 #8d78db;
    color: #55448d;
    background: #eee9ff;
    font-size: 0;
    line-height: 1;
    white-space: nowrap;
  }
  .month-grid .calendar-event::before { display: none; }
  .month-grid .calendar-event i {
    display: block;
    overflow: hidden;
    color: #55448d;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -.25px;
    text-overflow: clip;
    white-space: nowrap;
  }
  .month-grid .calendar-event.parents { box-shadow: inset 2px 0 0 #e58e63; color: #905235; background: #ffede3; }
  .month-grid .calendar-event.parents i { color: #905235; }
  .month-grid .calendar-event.task { box-shadow: inset 2px 0 0 #4d9b7e; color: #296b57; background: #e2f3eb; }
  .month-grid .calendar-event.task i { color: #296b57; }

  .week-day { padding: 16px; border-color: #eadccd; border-radius: 18px; background: rgba(255,255,255,.95); }
  .week-day header { margin-bottom: 13px; color: #906f60; }
  .week-day.today { border-color: #684cc4; box-shadow: inset 0 0 0 2px #684cc4, 0 5px 15px rgba(104,76,196,.13); }
  .week-day .timeline-event { padding: 12px; border-radius: 12px; }
  .week-day .timeline-time { font-size: 11px; }
  .week-day .timeline-title { font-size: 14px; }
}

/* Famélio palette: terracotta, peach and sage replace the previous violet identity. */
:root {
  --purple: #bf6848;
  --orange: #e79a62;
  --green: #73a88f;
  --cream: #fbf3ea;
  --line: #eadbcd;
}
.app-page { background: radial-gradient(circle at 5% 0, #fbe1d2, transparent 30%), var(--cream); }
.button-primary, .add-member-button, .dialog-submit, .dialog-form input.dialog-submit { background: #bf6848 !important; box-shadow: 0 10px 20px rgba(191,104,72,.22); }
.button-primary:hover, .add-member-button:hover, .dialog-form input.dialog-submit:hover { background: #a95339 !important; }
.account-avatar { background: #bf6848; }
.personal-nav-link, .account-profile-link, .back-link { color: #a95339; }
.personal-shortcut { border-color: #f0d3c1; background: #fff6ef; }
.personal-shortcut > span { background: #bf6848; }
.personal-shortcut b { color: #a95339; }

.calendar-event { color: #317565; background: #e3f2eb; box-shadow: inset 3px 0 0 #69a48b; }
.calendar-event.parents { color: #965831; background: #fff0e8; box-shadow: inset 3px 0 0 #e58e63; }
.calendar-event.task { color: #2e705d; background: #e1f2e9; box-shadow: inset 3px 0 0 #55a68c; }
.calendar-event.personal-event { color: #974c35; background: #ffeadc; box-shadow: inset 3px 0 0 #d87957; }
.timeline-event { border-left-color: #69a48b; color: #317565; background: #e3f2eb; }
.timeline-event.parents { border-left-color: #e58e63; color: #965831; background: #fff0e8; }
.timeline-event.task { border-left-color: #55a68c; color: #2e705d; background: #e1f2e9; }
.timeline-event.personal-event { border-left-color: #d87957; color: #974c35; background: #ffeadc; }
.timeline-event.can-edit-event:focus, .timeline-event.can-edit-personal:focus { outline-color: #bf6848; }

.calendar-day.today, .week-day.today {
  background: linear-gradient(145deg, #ffe7dc 0%, #fffaf6 100%) !important;
  box-shadow: inset 0 0 0 3px #bf6848, 0 6px 17px rgba(191,104,72,.15);
}
.calendar-day.today time, .week-day.today header strong { background: #bf6848; }
.calendar-day.can-add-event:hover { box-shadow: inset 0 0 0 2px #f0b69b, 0 8px 17px rgba(191,104,72,.1); }
.calendar-day.can-add-event:focus, .calendar-event.can-edit-event:focus, .calendar-event.can-edit-personal:focus { outline-color: #bf6848; }
.calendar-view-tabs a.active { color: #9d4f38; }

@media (max-width: 760px) {
  .app-page {
    background:
      radial-gradient(circle at 100% 0, #ffe2d1 0, transparent 28%),
      radial-gradient(circle at 0 18%, #e2f1e9 0, transparent 31%),
      #fbf3ea;
  }
  .personal-calendar {
    background:
      radial-gradient(circle at 98% 0, rgba(255, 220, 199, .88), transparent 15rem),
      radial-gradient(circle at 2% 100%, rgba(213, 237, 226, .7), transparent 16rem),
      #fffdf9;
  }
  .calendar-view-tabs { background: #faeee5; }
  .calendar-view-tabs a.active { color: #9d4f38; }
  .month-switcher a { color: #9d4f38; background: #ffebe0; }
  .calendar-day.today, .week-day.today { border-color: #bf6848; box-shadow: inset 0 0 0 2px #bf6848, 0 5px 15px rgba(191,104,72,.13); }
  .calendar-day.today time { background: #bf6848; }
  .month-grid .calendar-event { color: #317565; background: #e3f2eb; box-shadow: inset 2px 0 0 #69a48b; }
  .month-grid .calendar-event i { color: #317565; }
  .month-grid .calendar-event.parents { color: #965831; background: #fff0e8; box-shadow: inset 2px 0 0 #e58e63; }
  .month-grid .calendar-event.parents i { color: #965831; }
  .month-grid .calendar-event.task { color: #2e705d; background: #e1f2e9; box-shadow: inset 2px 0 0 #55a68c; }
  .month-grid .calendar-event.task i { color: #2e705d; }
  .month-grid .calendar-event.personal-event { color: #974c35; background: #ffeadc; box-shadow: inset 2px 0 0 #d87957; }
  .month-grid .calendar-event.personal-event i { color: #974c35; }
  .week-day { border-color: #eadccd; box-shadow: 0 4px 13px rgba(87,65,46,.04); }
  .week-day header { color: #a06852; }
  .week-day header::after { background: #f1dfd2; }
}

/* Dashboard actions and today card use the warm green family accent. */
.dashboard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.dashboard-actions .button { min-height: 46px; padding: 0 15px; font-size: 12px; }
.button-secondary { border-color: #e7cbbb; color: #9d4f38; background: #fff8f3; box-shadow: none; }
.button-secondary:hover { border-color: #d98c6d; background: #ffede3; }
.today-dashboard {
  border: 1px solid #cfe4d9;
  background: linear-gradient(135deg, #5b967d 0%, #3f7868 100%);
  box-shadow: 0 14px 25px rgba(63,120,104,.18);
}
.today-heading .page-kicker { color: #d9f0e4; }
.today-count { background: rgba(255,255,255,.16); }
.today-time { color: #dff3e8; }
.today-list small { color: #d7eee3; }
.today-empty { background: rgba(255,255,255,.13); }
.today-empty span { background: rgba(255,255,255,.17); }
.today-empty p { color: #ecf8f1; }
.today-done { color: #2f7865; background: #dff3e8; }
@media (max-width: 760px) {
  .dashboard-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .dashboard-actions .button { width: 100%; min-height: 50px; }
}

/* Reduced palette: terracotta leads, honey distinguishes family events, peach supports personal items. */
.today-dashboard {
  border-color: #edc8b5;
  background: linear-gradient(135deg, #cd7857 0%, #ad543b 100%);
  box-shadow: 0 14px 25px rgba(173,84,59,.19);
}
.today-heading .page-kicker { color: #ffe7d7; }
.today-time { color: #fff0e7; }
.today-list small { color: #ffe0cf; }
.today-empty { background: rgba(255,255,255,.14); }
.today-empty p { color: #fff5ef; }
.today-done { color: #9a4c35; background: #ffe7d8; }

.calendar-event { color: #7d6528; background: #fff2d3; box-shadow: inset 3px 0 0 #d4a34b; }
.calendar-event.parents { color: #965831; background: #fff0e8; box-shadow: inset 3px 0 0 #e58e63; }
.calendar-event.task { color: #665c55; background: #f1ebe5; box-shadow: inset 3px 0 0 #b9aaa0; }
.calendar-event.personal-event { color: #974c35; background: #ffeadc; box-shadow: inset 3px 0 0 #d87957; }
.timeline-event { border-left-color: #d4a34b; color: #7d6528; background: #fff2d3; }
.timeline-event.parents { border-left-color: #e58e63; color: #965831; background: #fff0e8; }
.timeline-event.task { border-left-color: #b9aaa0; color: #665c55; background: #f1ebe5; }
.timeline-event.personal-event { border-left-color: #d87957; color: #974c35; background: #ffeadc; }
.notification-card { border-color: #efd8c6; background: #fff8f2; }
.notification-button, .notification-button:disabled { background: #c27a43; }

@media (max-width: 760px) {
  .month-grid .calendar-event { color: #7d6528; background: #fff2d3; box-shadow: inset 2px 0 0 #d4a34b; }
  .month-grid .calendar-event i { color: #7d6528; }
  .month-grid .calendar-event.parents { color: #965831; background: #fff0e8; box-shadow: inset 2px 0 0 #e58e63; }
  .month-grid .calendar-event.parents i { color: #965831; }
  .month-grid .calendar-event.task { color: #665c55; background: #f1ebe5; box-shadow: inset 2px 0 0 #b9aaa0; }
  .month-grid .calendar-event.task i { color: #665c55; }
  .month-grid .calendar-event.personal-event { color: #974c35; background: #ffeadc; box-shadow: inset 2px 0 0 #d87957; }
  .month-grid .calendar-event.personal-event i { color: #974c35; }
}

/* Guided event creation: one clear decision at a time. */
.guided-form { display: block; }
.wizard-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #9b6750; font-size: 12px; font-weight: 800; }
.wizard-progress i { height: 7px; flex: 1; overflow: hidden; border-radius: 99px; background: #f3e3d8; }
.wizard-progress b { display: block; width: 25%; height: 100%; border-radius: inherit; background: #bf6848; transition: width .2s ease; }
.form-step { display: none; min-height: 178px; }
.form-step.active { display: grid; align-content: start; gap: 14px; }
.wizard-question { margin: 0; color: #423830; font-family: Georgia, "Times New Roman", serif; font-size: 25px; line-height: 1.1; }
.wizard-help { margin: -5px 0 2px; color: var(--muted); font-size: 13px; }
.item-type-choice { max-width: 210px; }
.guided-form .field { min-width: 0; }
.guided-form .end-toggle { margin: 0; }
.wizard-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 22px; }
.wizard-back { min-height: 47px; border: 1px solid #ead5c5; border-radius: 12px; padding: 0 15px; color: #875b47; background: #fff8f2; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.wizard-back[hidden], .wizard-next[hidden], .guided-form .dialog-submit[hidden] { display: none; }
.wizard-next { min-height: 47px; border: 0; border-radius: 12px; }
.guided-form .dialog-submit { min-height: 47px; margin: 0; }
@media (max-width: 760px) {
  .guided-form { display: block; max-height: calc(88dvh - 118px); overflow-y: auto; }
  .form-step { min-height: 235px; gap: 16px; }
  .wizard-progress { margin-bottom: 23px; }
  .wizard-question { font-size: 27px; }
  .wizard-actions { position: sticky; bottom: 0; margin: 23px -1px 0; padding-top: 10px; background: linear-gradient(transparent, #fff 30%); }
  .wizard-back, .wizard-next, .guided-form .dialog-submit { min-height: 52px; }
}

/* Desktop: keep the complete seven-day week inside the calendar card. */
@media (min-width: 761px) {
  .week-grid,
  .personal-week-grid,
  .dashboard-week-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow-x: visible;
  }

  .week-day {
    min-width: 0;
  }
}

/* Landing page: a richer, interactive overview of Famélio. */
.landing-page { overflow-x: hidden; background: #fffdf9; }
.landing-page .site-header { position: relative; z-index: 4; }
.landing-page .hero { min-height: 710px; }
.landing-page .hero-copy { position: relative; z-index: 2; }
.landing-page .hero-copy::after { content: ''; position: absolute; z-index: -1; width: 300px; height: 300px; right: -70px; bottom: -125px; border-radius: 50%; background: radial-gradient(circle, rgba(253, 211, 181, .52), transparent 68%); filter: blur(3px); }
.landing-page .phone { animation: phone-float 5s ease-in-out infinite; }
.landing-page .floating-note { animation: note-float 4.2s ease-in-out infinite; }
@keyframes phone-float { 50% { transform: rotate(6deg) translate(-10px, -16px); } }
@keyframes note-float { 50% { transform: rotate(-1deg) translateY(-8px); } }
.feature-card-action { display: flex; min-height: 255px; flex-direction: column; }
.feature-card-action p { flex: 1; }
.feature-link { display: inline-flex; align-items: center; gap: 7px; width: max-content; border: 0; padding: 0; color: #a95339; background: transparent; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.feature-link span { transition: transform .2s ease; }
.feature-link:hover span { transform: translateX(4px); }
.feature-card-action:hover { border-color: #e9c6b4; }
.showcase-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); align-items: center; gap: clamp(38px, 8vw, 105px); width: min(1080px, calc(100% - 48px)); margin: 40px auto 0; padding: 90px 0 115px; }
.showcase-copy h2, .benefit-intro h2, .landing-cta h2 { margin-bottom: 19px; color: #312a25; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px, 4vw, 54px); font-weight: 500; line-height: 1.02; letter-spacing: -2px; }
.showcase-copy > p:not(.eyebrow) { max-width: 450px; color: #716962; font-size: 16px; line-height: 1.7; }
.showcase-tabs { display: grid; gap: 8px; margin-top: 30px; }
.showcase-tabs button { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; border-radius: 13px; padding: 13px 14px; color: #685e57; background: transparent; font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.showcase-tabs button span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #a95339; background: #ffe9dc; }
.showcase-tabs button:hover { transform: translateX(3px); }
.showcase-tabs button.active { border-color: #f0cbb8; color: #8d472f; background: #fff4ed; box-shadow: 0 8px 20px rgba(116, 75, 48, .07); }
.showcase-device { position: relative; min-width: 0; padding: 14px; border-radius: 29px; background: linear-gradient(145deg, #f6d9c4 0%, #efe0d7 50%, #e9eee7 100%); box-shadow: 0 28px 65px rgba(91, 62, 40, .17); }
.showcase-device::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.62); border-radius: 23px; pointer-events: none; }
.demo-window { position: relative; min-height: 390px; overflow: hidden; border: 1px solid #eadfd4; border-radius: 20px; background: #fffdfb; }
.demo-bar { display: flex; align-items: center; gap: 5px; height: 45px; padding: 0 17px; border-bottom: 1px solid #f0e9e2; color: #8d8178; background: #fffaf6; }
.demo-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #e8b6a0; }.demo-bar > span:nth-child(2){background:#eed19c}.demo-bar > span:nth-child(3){background:#bad8c7}.demo-bar b { margin-left: 8px; color: #685f59; font-size: 11px; }.demo-bar i { margin-left: auto; font-style: normal; letter-spacing: 2px; }
.demo-panel { display: none; padding: 23px; animation: demo-in .34s ease both; }.demo-panel.active { display: block; }@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.demo-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.demo-panel-heading small { display: block; margin-bottom: 4px; color: #b16749; font-size: 9px; font-weight: 900; letter-spacing: .09em; }.demo-panel-heading h3 { margin: 0; color: #3d342e; font-family: Georgia, serif; font-size: 23px; font-weight: 500; }.demo-add { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; color: #fff; background: #bf6848; font-size: 23px; cursor: pointer; transition: transform .2s; }.demo-add:hover { transform: rotate(90deg) scale(1.06); }
.demo-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 24px 0 17px; text-align: center; }.demo-days span { display: grid; gap: 5px; color: #948981; font-size: 9px; font-weight: 800; }.demo-days b { display: grid; place-items: center; width: 27px; height: 27px; margin: auto; border-radius: 8px; color: #544a44; font-size: 11px; }.demo-days .current { color: #9c4f38; }.demo-days .current b { color: #fff; background: #bf6848; box-shadow: 0 5px 10px rgba(191,104,72,.28); }
.demo-events { display: grid; gap: 8px; }.demo-event { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 9px; border-left: 3px solid #d4a34b; border-radius: 9px; padding: 9px 10px; color: #7d6528; background: #fff2d3; }.demo-event.family { border-left-color: #e58e63; color: #965831; background: #fff0e8; }.demo-event.home { border-left-color: #b9aaa0; color: #665c55; background: #f1ebe5; }.demo-event time { font-size: 10px; font-weight: 900; }.demo-event b { font-size: 11px; }.demo-event span { font-size: 9px; font-weight: 700; opacity: .76; }
.demo-progress { padding: 6px 9px; border-radius: 8px; color: #9c4f38; background: #ffebdf; font-size: 11px; font-weight: 900; }.task-progress { height: 7px; overflow: hidden; margin: 24px 0 16px; border-radius: 99px; background: #f1e7df; }.task-progress b { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d67d58, #efad70); }.demo-task { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid #f0e8e1; }.demo-task i { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border: 1.5px solid #d8c8ba; border-radius: 7px; color: white; font-size: 12px; font-style: normal; }.demo-task.done i { border-color: #bf6848; background: #bf6848; }.demo-task div { display: grid; gap: 2px; }.demo-task b { color: #4d433d; font-size: 12px; }.demo-task span { color: #948981; font-size: 10px; }.demo-task.done b { color: #9c938d; text-decoration: line-through; }
.safe-dot { color: #c18e3f; font-size: 15px; }.demo-files-intro { margin: 24px 0 15px; color: #7d736c; font-size: 12px; }.demo-file { display: flex; align-items: center; gap: 10px; margin-top: 8px; border: 1px solid #efe6de; border-radius: 11px; padding: 10px; background: #fffaf6; }.demo-file i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #a95339; background: #ffe9dc; font-style: normal; }.demo-file div { display: grid; gap: 2px; }.demo-file b { color: #514741; font-size: 12px; }.demo-file span { color: #93877e; font-size: 10px; }.demo-file em { margin-left: auto; color: #b46b4e; font-size: 17px; font-style: normal; }
.showcase-note { position: absolute; right: -24px; bottom: -22px; display: flex; align-items: center; gap: 8px; max-width: 255px; margin: 0; border: 1px solid #f0dacb; border-radius: 12px; padding: 10px 12px; color: #765644; background: rgba(255,253,249,.97); box-shadow: 0 12px 22px rgba(87,57,37,.12); font-size: 11px; font-weight: 800; }.showcase-note > span:first-child { color: #bf6848; font-size: 16px; }
.benefit-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 9vw, 130px); width: min(1080px, calc(100% - 48px)); margin: auto; padding: 100px 0; border-top: 1px solid #eee5dd; }.benefit-list { display: grid; gap: 11px; }.benefit-list article { display: grid; grid-template-columns: 43px 1fr; gap: 14px; padding: 19px 0; border-bottom: 1px solid #ede5de; }.benefit-list article > span { color: #b96b4c; font-size: 12px; font-weight: 900; }.benefit-list h3 { margin: 0 0 6px; color: #403731; font-size: 16px; }.benefit-list p { margin: 0; color: #80766f; font-size: 14px; line-height: 1.5; }
.landing-cta { display: flex; align-items: end; justify-content: space-between; gap: 30px; width: min(1080px, calc(100% - 48px)); margin: 5px auto 80px; padding: clamp(34px, 6vw, 66px); overflow: hidden; border-radius: 29px; background: radial-gradient(circle at 90% 15%, rgba(255,216,188,.9), transparent 26%), linear-gradient(135deg, #a9513a 0%, #cf7958 58%, #dea16c 100%); }.landing-cta .eyebrow { color: #ffe1cf; }.landing-cta h2 { margin: 0; color: #fffaf7; }.landing-cta .button { flex: none; border-color: #fff; color: #99503a; background: #fffaf7; box-shadow: 0 11px 22px rgba(77,35,24,.17); }
.landing-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.landing-reveal.is-visible { opacity: 1; transform: translateY(0); }.hero.landing-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .landing-page *, .landing-reveal { scroll-behavior: auto !important; animation: none !important; transition: none !important; }.landing-reveal { opacity: 1; transform: none; } }
@media (max-width: 760px) { .landing-page .hero { min-height: 0; }.feature-card-action { min-height: 0; }.showcase-section, .benefit-section { grid-template-columns: 1fr; gap: 42px; width: min(100% - 32px, 560px); padding: 72px 0; }.showcase-section { margin-top: 0; }.showcase-device { padding: 9px; border-radius: 22px; }.demo-window { min-height: 370px; border-radius: 15px; }.demo-panel { padding: 18px 14px; }.demo-panel-heading h3 { font-size: 20px; }.demo-event { grid-template-columns: 35px 1fr; }.demo-event span { display: none; }.demo-days { margin-top: 20px; }.demo-days span { font-size: 8px; }.demo-days b { width: 24px; height: 24px; }.showcase-note { right: 10px; bottom: -25px; max-width: 225px; }.benefit-section { padding-top: 88px; }.landing-cta { align-items: flex-start; flex-direction: column; width: min(100% - 32px, 560px); margin-bottom: 45px; border-radius: 22px; }.landing-cta .button { width: 100%; }.landing-cta h2 { font-size: 35px; }.showcase-tabs button { padding: 12px; } }

/* Rotating Famélio phone carousel on the landing page. */
.phone-carousel .phone-card:focus-visible { outline: 3px solid #bf6848; outline-offset: 7px; }
.phone-carousel .phone-shadow { width: 245px; height: 400px; right: 14px; bottom: 12px; }
.carousel-hint { position: absolute; z-index: 8; right: -22px; top: 22px; margin: 0; padding: 8px 11px; border: 1px solid rgba(242,216,196,.9); border-radius: 99px; color: #946049; background: rgba(255,253,249,.87); box-shadow: 0 8px 18px rgba(80,55,38,.08); font-size: 10px; font-weight: 800; animation: hint-pulse 2.8s ease-in-out infinite; }.carousel-hint span { margin-right: 4px; color: #bf6848; font-size: 15px; }@keyframes hint-pulse { 50% { transform: translateY(-4px); box-shadow: 0 12px 22px rgba(80,55,38,.13); } }
.phone-carousel .phone-screen { display: flex; flex-direction: column; height: 100%; padding: 32px 16px 12px; border-radius: 29px; text-align: left; }.phone-carousel .app-top, .phone-carousel .app-date-row, .phone-carousel .app-section-title { display: flex; }.phone-carousel .app-greeting { display: block; }.phone-carousel .app-greeting em { color: #f1ac4e; font-style: normal; }.phone-carousel .app-date-row { align-items: baseline; }.phone-carousel .app-date-row small { color: #a59d95; font-size: 10px; }.phone-carousel .mini-calendar { display: grid; }.phone-carousel .mini-calendar small { color: #b0aaa4; font-size: 8px; }.phone-carousel .task-card { flex: none; }.phone-carousel .task-card > span { display: block; flex: 1; min-width: 0; }.phone-carousel .task-card b:not(.check) { display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.phone-carousel .task-card small { display: block; }.phone-carousel .app-nav { margin-top: auto; }
.phone-label, .coming-soon { display: block; margin: 14px 0 10px; color: #ae704e; font-size: 8px; font-weight: 900; letter-spacing: .1em; }.coming-soon { width: max-content; border-radius: 99px; padding: 5px 7px; color: #a86627; background: #fff0d8; font-size: 7px; }.phone-progress { display: block; margin: 6px 0 13px; }.phone-progress b { display: block; height: 7px; overflow: hidden; border-radius: 8px; background: linear-gradient(90deg, #bd674a 60%, #f1e5dc 60%); }.phone-progress small { display: block; margin-top: 6px; color: #968981; font-size: 9px; }.mobile-task { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #eee8e1; }.mobile-task i { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #d2c5bb; border-radius: 6px; color: #fff; font-size: 10px; font-style: normal; }.mobile-task.done i { border-color: #bf6848; background: #bf6848; }.mobile-task span { display: grid; gap: 2px; }.mobile-task b { color: #554a43; font-size: 9px; }.mobile-task small { color: #9b8e85; font-size: 8px; }.mobile-task.done b { color: #a29a94; text-decoration: line-through; }
.meal-week { display: flex; align-items: center; justify-content: space-between; margin: 7px 0 9px; color: #52473f; font-size: 11px; font-weight: 800; }.meal-card { display: flex; align-items: center; gap: 8px; margin-top: 7px; border-radius: 11px; padding: 9px; color: #765d39; background: #fff1d6; }.meal-card:nth-of-type(4) { color: #7f5943; background: #ffeadf; }.meal-card:nth-of-type(5) { color: #486a5d; background: #e3f0e9; }.meal-card i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #b17035; background: rgba(255,255,255,.55); font-size: 12px; font-style: normal; }.meal-card span { display: grid; gap: 2px; }.meal-card small { color: inherit; font-size: 7px; font-weight: 900; letter-spacing: .08em; opacity: .72; }.meal-card b { font-size: 9px; }.add-meal { margin-top: 11px; border: 1px dashed #d7ba99; color: #a27453; background: transparent; }.add-meal i { color: #a27453; background: #fff8f1; }
.essential-card { display: flex; align-items: center; gap: 8px; margin-top: 8px; border: 1px solid #eee5dd; border-radius: 11px; padding: 9px; background: #fffaf6; }.essential-card i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #a95339; background: #ffe9dc; font-size: 12px; font-style: normal; }.essential-card span { display: grid; gap: 2px; }.essential-card b { color: #554a43; font-size: 9px; }.essential-card small { color: #9a8e85; font-size: 8px; }.essential-card em { margin-left: auto; color: #bd7656; font-size: 18px; font-style: normal; }.phone-tip { display: block; margin-top: auto; margin-bottom: 8px; border-radius: 9px; padding: 7px; color: #8d654f; background: #fff3ea; font-size: 8px; font-weight: 700; }
.phone-carousel-controls { position: relative; z-index: 9; display: flex; justify-content: center; gap: 7px; margin: -6px auto 0; }.phone-carousel-controls button { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: #d8c4b7; cursor: pointer; transition: width .25s, background .25s; }.phone-carousel-controls button.active { width: 24px; border-radius: 9px; background: #bf6848; }.phone-carousel-controls button:focus-visible { outline: 2px solid #8f482f; outline-offset: 3px; }.phone-carousel .floating-note { z-index: 9; }
@media (max-width: 760px) { .phone-carousel .phone-screen { padding: 29px 14px 10px; }.phone-carousel .phone-shadow { right: 7px; bottom: 16px; }.carousel-hint { right: -19px; top: 13px; }.phone-carousel .floating-note { left: -8px; bottom: 43px; }.phone-carousel-controls { margin-top: -3px; } }
@media (prefers-reduced-motion: reduce) { .phone-carousel .phone-card, .carousel-hint { animation: none; transition: none; } }

/* 3D phone carousel: the phones orbit around a vertical axis, positions are driven by the landing script. */
.phone-carousel { --phone-width: 278px; --phone-height: 548px; --orbit-x: 200px; --orbit-z: 170px; overflow: visible; }
.phone-carousel-track { position: relative; z-index: 1; width: 560px; height: 590px; margin: 0 auto; perspective: 1500px; perspective-origin: 50% 40%; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.phone-carousel-track.is-dragging { cursor: grabbing; }
.phone-carousel .phone-card { position: absolute; top: 0; left: calc(50% - var(--phone-width) / 2); display: block; width: var(--phone-width); height: var(--phone-height); border: 7px solid #272526; padding: 10px; cursor: inherit; transform-origin: 50% 50%; animation: none; transition: none; will-change: transform, filter; -webkit-tap-highlight-color: transparent; }
.phone-carousel .phone-card .phone-screen { pointer-events: none; }
.phone-carousel .phone-shadow { right: calc(50% - 135px); bottom: 7px; width: 270px; height: 420px; opacity: .72; }
.phone-carousel .floating-note { left: 14px; bottom: 62px; }
.phone-carousel .spark-one { right: -9px; }.phone-carousel .spark-two { left: -5px; }
.carousel-hint { right: -4px; top: 13px; }
.phone-carousel-controls { margin-top: -20px; }
@media (max-width: 1000px) and (min-width: 761px) { .phone-carousel-track { transform: scale(.84); transform-origin: 50% 0; margin-bottom: -94px; } }
@media (max-width: 760px) {
  .phone-carousel { --phone-width: 248px; --phone-height: 495px; --orbit-x: 178px; --orbit-z: 150px; }
  .phone-carousel.phone-stage { height: 575px; }
  .phone-carousel-track { width: 100%; max-width: 360px; height: 520px; }
  .phone-carousel .phone-shadow { right: calc(50% - 120px); width: 240px; }
  .phone-carousel .floating-note { left: -2px; bottom: 46px; }
  .carousel-hint { right: -6px; }
  .phone-carousel-controls { margin-top: -5px; }
}

/* Desktop uses the same warm palette as the mobile app: peach and sage washes instead of lavender and grey. */
@media (min-width: 761px) {
  .app-page {
    background:
      radial-gradient(circle at 100% 0, #ffe2d1 0, transparent 28%),
      radial-gradient(circle at 0 18%, #e2f1e9 0, transparent 31%),
      #fbf3ea;
  }
  .family-calendar,
  .dashboard-planner {
    border: 1px solid #ebddcf;
    background:
      radial-gradient(circle at 97% 0, rgba(255, 219, 191, .72), transparent 15rem),
      radial-gradient(circle at 2% 100%, rgba(213, 237, 226, .7), transparent 16rem),
      #fffdf9;
    box-shadow: 0 14px 30px rgba(86, 63, 42, .09);
  }
  .personal-calendar {
    background:
      radial-gradient(circle at 98% 0, rgba(255, 220, 199, .88), transparent 15rem),
      radial-gradient(circle at 2% 100%, rgba(213, 237, 226, .7), transparent 16rem),
      #fffdf9;
  }
  .calendar-heading .page-kicker,
  .planner-heading .page-kicker { color: #bd6b47; }
  .calendar-view-tabs { border: 1px solid #eadccd; background: #faeee5; }
  .calendar-view-tabs a.active { color: #9d4f38; background: #fff; box-shadow: 0 3px 9px rgba(76, 55, 38, .11); }
  .month-switcher { padding: 4px; border: 1px solid #eddfd2; border-radius: 14px; background: rgba(255,255,255,.76); }
  .month-switcher a { border-color: #f1dccd; color: #9d4f38; background: #ffebe0; }
  .calendar-weekdays { color: #9b8070; }
  .month-grid { border-color: #e8dacc; }
  .calendar-day { border-color: #eadccd; background: rgba(255,255,255,.95); }
  .calendar-day.outside-month { background: #f6eee7; }
  .week-day { border-color: #eadccd; background: rgba(255,255,255,.95); }
  .week-day header { color: #a06852; }
  .week-day header::after { background: #f1dfd2; }
  .calendar-day.today, .week-day.today { border-color: #bf6848; }
}

/* Landing page sections: one clear feature per block, each shown on an animated phone mockup. */
.landing-page .site-header { position: sticky; top: 0; z-index: 30; transition: height .25s; }
.landing-page .site-header::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: rgba(255,253,249,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 8px 24px rgba(80,55,38,.07); opacity: 0; transition: opacity .25s; }
.landing-page .site-header.is-scrolled { height: 72px; }
.landing-page .site-header.is-scrolled::before { opacity: 1; }
.lp-anchors { display: flex; gap: 26px; margin-left: auto; margin-right: 30px; }
.lp-anchors a { position: relative; color: #6f5a4e; font-size: 14px; font-weight: 700; }
.lp-anchors a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: #bf6848; transform: scaleX(0); transition: transform .25s; }
.lp-anchors a:hover::after { transform: scaleX(1); }

.lp-reveal { opacity: 0; transform: translateY(46px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.25,1); }
.lp-reveal.is-visible { opacity: 1; transform: none; }
.lp-reveal-item { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.75,.25,1); }
.lp-reveal.is-visible .lp-reveal-item { opacity: 1; transform: none; }
.lp-reveal.is-visible .lp-reveal-item:nth-child(2) { transition-delay: .12s; }
.lp-reveal.is-visible .lp-reveal-item:nth-child(3) { transition-delay: .24s; }
.lp-reveal.is-visible .lp-reveal-item:nth-child(4) { transition-delay: .36s; }

.lp-intro .eyebrow, .lp-steps .eyebrow, .lp-soon .eyebrow, .lp-faq .eyebrow { color: #bf6848; }
.lp-title { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 3.6vw, 48px); font-weight: 500; line-height: 1.06; letter-spacing: -1.4px; color: #2b2420; }
.lp-lead { max-width: 690px; margin: 0 auto; color: #6f6660; font-size: 18px; line-height: 1.65; }

.lp-strip { overflow: hidden; margin: 10px 0 0; padding: 16px 0; border-block: 1px solid #f0e2d6; background: #fff7f0; }
.lp-strip-track { display: flex; gap: 14px; width: max-content; animation: lp-marquee 32s linear infinite; }
.lp-strip-track span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid #f0dccd; border-radius: 99px; color: #7a4b38; background: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; }
.lp-strip-track i { color: #bf6848; font-style: normal; }
.lp-strip:hover .lp-strip-track { animation-play-state: paused; }
@keyframes lp-marquee { to { transform: translateX(calc(-50% - 7px)); } }

.lp-intro { width: min(980px, calc(100% - 48px)); margin: 0 auto; padding: 110px 0 40px; text-align: center; }
.lp-intro-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.lp-intro-points div { padding: 26px 22px; border: 1px solid #f0e0d3; border-radius: 22px; background: linear-gradient(160deg, #fff 0%, #fff6ef 100%); box-shadow: 0 14px 30px rgba(86,63,42,.06); }
.lp-intro-points b { display: block; margin-bottom: 8px; color: #bf6848; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.lp-intro-points span { color: #77736f; font-size: 14px; line-height: 1.5; }

.lp-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 90px 0; }
.lp-feature + .lp-feature { border-top: 1px solid #f1e5da; }
.lp-feature-reverse .lp-feature-copy { order: 2; }
.lp-feature-copy p { color: #6f6660; font-size: 17px; line-height: 1.7; }
.lp-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 13px; border-radius: 99px; color: #a14f35 !important; background: #ffece1; font-size: 12px !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1 !important; }
.lp-kicker i { font-style: normal; }
.lp-checks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.lp-checks li { display: flex; gap: 12px; align-items: flex-start; color: #3f3631; font-size: 15px; font-weight: 600; }
.lp-checks li::before { content: '✓'; display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 8px; color: #fff; background: #73a88f; font-size: 12px; }

.lp-device { position: relative; display: grid; place-items: center; min-height: 560px; }
.lp-device::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, #ffe2d1 0%, rgba(255,226,209,.45) 45%, transparent 70%); }
.lp-feature-reverse .lp-device::before { background: radial-gradient(circle, #e2f1e9 0%, rgba(226,241,233,.5) 45%, transparent 70%); }
.mock-phone { position: relative; width: 268px; height: 540px; padding: 10px; border: 7px solid #272526; border-radius: 42px; background: #272526; box-shadow: -22px 34px 50px rgba(57,43,32,.24); transform: rotate(-3deg) translateY(30px); transition: transform 1s cubic-bezier(.2,.75,.25,1); }
.lp-feature-reverse .mock-phone { transform: rotate(3deg) translateY(30px); }
.lp-reveal.is-visible .mock-phone { transform: rotate(-3deg); }
.lp-reveal.is-visible.lp-feature-reverse .mock-phone { transform: rotate(3deg); }
.mock-notch { position: absolute; z-index: 2; top: 17px; left: calc(50% - 38px); width: 76px; height: 20px; border-radius: 20px; background: #272526; }
.mock-screen { position: relative; display: flex; flex-direction: column; gap: 9px; height: 100%; overflow: hidden; padding: 38px 15px 14px; border-radius: 29px; background: radial-gradient(circle at 100% 0, #ffe2d1, transparent 40%), #fffaf5; text-align: left; }
.mock-top { display: flex; align-items: center; justify-content: space-between; }
.mock-top b { color: #bf6848; font-family: Georgia, serif; font-size: 20px; }
.mock-top small { color: #a59d95; font-size: 10px; font-weight: 700; }
.mock-title { margin: 2px 0 0; color: #2b2420; font-family: Georgia, serif; font-size: 22px; }
.mock-title em { color: #f1ac4e; font-style: normal; }
.mock-tabs { display: flex; padding: 3px; border-radius: 10px; background: #faeee5; }
.mock-tabs span { flex: 1; padding: 6px; border-radius: 8px; color: #8d7d72; font-size: 10px; font-weight: 800; text-align: center; }
.mock-tabs .on { color: #9d4f38; background: #fff; box-shadow: 0 2px 6px rgba(76,55,38,.1); }
.mock-day { display: grid; gap: 5px; padding: 8px 9px; border: 1px solid #f0e2d6; border-radius: 12px; background: #fff; }
.mock-day.today { border-color: #bf6848; box-shadow: inset 0 0 0 1px #bf6848; background: linear-gradient(145deg, #ffe7dc, #fffaf6); }
.mock-day small { color: #a06852; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.mock-event { display: block; padding: 6px 8px; border-radius: 7px; font-size: 10px; font-weight: 700; }
.mock-event b { margin-right: 4px; }
.mock-event.honey { color: #7d6528; background: #fff2d3; box-shadow: inset 3px 0 0 #d4a34b; }
.mock-event.peach { color: #974c35; background: #ffeadc; box-shadow: inset 3px 0 0 #d87957; }
.mock-event.task { color: #665c55; background: #f1ebe5; box-shadow: inset 3px 0 0 #b9aaa0; }
.mock-fab { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: #bf6848; box-shadow: 0 8px 16px rgba(191,104,72,.35); font-size: 22px; }
.mock-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mock-choice span { display: grid; gap: 3px; padding: 11px 9px; border: 1.5px solid #eadccd; border-radius: 12px; color: #5d4c42; background: #fff; font-size: 11px; font-weight: 800; }
.mock-choice small { color: #a0938a; font-size: 8px; font-weight: 600; }
.mock-choice .on { border-color: #bf6848; color: #9d4f38; background: #fff0e8; }
.mock-field { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid #eadccd; border-radius: 10px; background: #fff; }
.mock-field small { color: #a0938a; font-size: 8px; font-weight: 700; }
.mock-field b { color: #3d3430; font-size: 11px; }
.mock-lock { display: flex; gap: 9px; align-items: center; padding: 10px; border-radius: 12px; background: #fff0e8; }
.mock-lock i { font-style: normal; }
.mock-lock span, .mock-task span, .mock-member span, .mock-notif span { display: grid; gap: 2px; }
.mock-lock b { color: #965831; font-size: 10px; }
.mock-lock small { color: #b07a5e; font-size: 8px; }
.mock-button { margin-top: auto; padding: 12px; border-radius: 12px; color: #fff; background: #bf6848; font-size: 11px; font-weight: 800; text-align: center; }
.mock-progress { display: grid; gap: 6px; margin: 2px 0 6px; }
.mock-progress b { position: relative; display: block; height: 8px; overflow: hidden; border-radius: 8px; background: #f1e5dc; }
.mock-progress b::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 75%; border-radius: inherit; background: #bf6848; }
.mock-progress small { color: #968981; font-size: 9px; }
.mock-task { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid #f0e8e1; }
.mock-task i { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border: 1.5px solid #d2c5bb; border-radius: 7px; color: #fff; font-size: 11px; font-style: normal; }
.mock-task.done i { border-color: #73a88f; background: #73a88f; }
.mock-task b { color: #4d433d; font-size: 11px; }
.mock-task small { color: #9b8e85; font-size: 9px; }
.mock-task.done b { color: #a29a94; text-decoration: line-through; }
.mock-private { width: max-content; padding: 4px 9px; border-radius: 99px; color: #974c35; background: #ffeadc; font-size: 9px; font-weight: 800; }
.mock-member { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #f0e2d6; border-radius: 12px; background: #fff; }
.mock-member i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: #bf6848; font-size: 12px; font-style: normal; font-weight: 800; }
.mock-member i.c2 { background: #e79a62; } .mock-member i.c3 { background: #73a88f; } .mock-member i.c4 { background: #d4a34b; }
.mock-member b { color: #3d3430; font-size: 11px; }
.mock-member small { color: #a0938a; font-size: 9px; }
.mock-invite { display: grid; gap: 4px; margin-top: auto; padding: 10px; border: 1.5px dashed #e3b9a2; border-radius: 12px; background: #fff8f2; }
.mock-invite small { color: #a0938a; font-size: 8px; font-weight: 700; }
.mock-invite b { width: max-content; overflow: hidden; border-right: 2px solid #bf6848; color: #3d3430; font-size: 11px; white-space: nowrap; }
.mock-lockscreen .mock-screen { align-items: center; background: linear-gradient(170deg, #f3c1a6 0%, #e2a487 35%, #9fbcac 100%); }
.mock-clock { margin: 26px 0 0; color: #fff; font-size: 58px; font-weight: 300; letter-spacing: -2px; line-height: 1; }
.mock-date { margin: 4px 0 26px; color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; }
.mock-notif { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px; border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 8px 20px rgba(60,40,30,.15); backdrop-filter: blur(8px); }
.mock-notif i { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: #bf6848; font-family: Georgia, serif; font-size: 14px; font-style: normal; font-weight: 700; }
.mock-notif b { color: #2b2420; font-size: 11px; }
.mock-notif small { color: #6f6660; font-size: 10px; }
.mock-notif em { align-self: flex-start; margin-left: auto; color: #8d8079; font-size: 8px; font-style: normal; white-space: nowrap; }
.lp-float-badge { position: absolute; z-index: 3; right: 0; top: 5%; padding: 11px 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; color: #514a45; background: rgba(255,255,255,.95); box-shadow: 0 14px 28px rgba(70,56,42,.14); font-size: 13px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .5s ease .55s, transform .6s cubic-bezier(.2,.75,.25,1.3) .55s; }
.lp-float-badge.lp-float-left { right: auto; left: 2%; top: auto; bottom: 18%; }
.lp-device.is-live .lp-float-badge { opacity: 1; transform: none; animation: lp-bob 4.5s ease-in-out 1.2s infinite; }
@keyframes lp-bob { 50% { transform: translateY(-9px); } }

/* Live phone animations replay whenever a phone scrolls back into view. */
.lp-device .lp-pop { opacity: 0; transform: translateY(10px) scale(.96); }
.lp-device.is-live .lp-pop { animation: lp-pop .55s cubic-bezier(.2,.75,.25,1.25) forwards; }
.lp-device.is-live .mock-day:nth-of-type(1) .lp-pop, .lp-device.is-live .mock-day .lp-pop:nth-child(2) { animation-delay: .2s; }
.lp-device.is-live .mock-day:nth-of-type(2) .lp-pop { animation-delay: .4s; }
.lp-device.is-live .mock-day:nth-of-type(3) .lp-pop:nth-child(2) { animation-delay: .6s; }
.lp-device.is-live .mock-day:nth-of-type(3) .lp-pop:nth-child(3) { animation-delay: .8s; }
.lp-device.is-live .mock-day:nth-of-type(4) .lp-pop { animation-delay: 1s; }
.lp-device.is-live .mock-lock.lp-pop, .lp-device.is-live .mock-member.lp-pop { animation-delay: .9s; }
@keyframes lp-pop { to { opacity: 1; transform: none; } }
.lp-device .lp-select { border-color: #eadccd; color: #5d4c42; background: #fff; transition: all .35s ease .5s; }
.lp-device.is-live .lp-select { border-color: #bf6848; color: #9d4f38; background: #fff0e8; box-shadow: 0 0 0 4px rgba(191,104,72,.12); }
.lp-device .lp-grow::after { width: 50%; transition: width 1s cubic-bezier(.2,.75,.25,1) 1s; }
.lp-device.is-live .lp-grow::after { width: 75%; }
.lp-device .lp-check i { border-color: #d2c5bb; background: transparent; color: transparent; transition: all .3s ease .9s; }
.lp-device .lp-check b { color: #4d433d; text-decoration: none; transition: color .3s ease .9s; }
.lp-device.is-live .lp-check i { border-color: #73a88f; background: #73a88f; color: #fff; transform: scale(1.12); }
.lp-device.is-live .lp-check b { color: #a29a94; text-decoration: line-through; }
.lp-device .lp-notif { opacity: 0; transform: translateY(-30px) scale(.95); }
.lp-device.is-live .lp-notif { animation: lp-notif .7s cubic-bezier(.2,.75,.25,1.15) .5s forwards; }
.lp-device.is-live .lp-notif-2 { animation-delay: 1.1s; }
@keyframes lp-notif { to { opacity: 1; transform: none; } }
.lp-device .lp-typing { width: 0; }
.lp-device.is-live .lp-typing { animation: lp-typing 1.6s steps(16) 1.4s forwards, lp-caret .8s step-end infinite; }
@keyframes lp-typing { to { width: 16ch; } }
@keyframes lp-caret { 50% { border-color: transparent; } }

.lp-steps { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0 60px; text-align: center; }
.lp-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: none; }
.lp-steps li { position: relative; padding: 34px 26px 28px; border: 1px solid #f0e0d3; border-radius: 24px; background: #fff; box-shadow: 0 16px 34px rgba(86,63,42,.07); text-align: left; }
.lp-steps li span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 15px; color: #fff; background: #bf6848; font-family: Georgia, serif; font-size: 21px; }
.lp-steps li:nth-child(2) span { background: #e79a62; }
.lp-steps li:nth-child(3) span { background: #73a88f; }
.lp-steps h3 { margin: 0 0 8px; color: #2b2420; font-size: 19px; }
.lp-steps p { margin: 0; color: #77736f; font-size: 15px; line-height: 1.55; }

.lp-soon { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 60px 0; text-align: center; }
.lp-soon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.lp-soon-grid article { padding: 24px 20px; border: 1.5px dashed #e8cdbb; border-radius: 22px; background: #fffaf6; text-align: left; transition: transform .25s, box-shadow .25s; }
.lp-soon-grid article:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(86,63,42,.08); }
.lp-soon-grid i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 13px; background: #ffece1; font-style: normal; font-size: 18px; color: #bf6848; }
.lp-soon-grid h3 { margin: 0 0 6px; font-size: 16px; color: #2b2420; }
.lp-soon-grid p { margin: 0; color: #77736f; font-size: 14px; line-height: 1.5; }

.lp-faq { width: min(780px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 90px; text-align: center; }
.lp-faq details { margin-top: 12px; border: 1px solid #f0e0d3; border-radius: 18px; background: #fff; text-align: left; transition: box-shadow .25s; }
.lp-faq details[open] { box-shadow: 0 12px 26px rgba(86,63,42,.08); }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; color: #2b2420; font-size: 16px; font-weight: 800; cursor: pointer; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 10px; color: #bf6848; background: #ffece1; font-size: 18px; transition: transform .3s; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { margin: 0; padding: 0 22px 20px; color: #6f6660; font-size: 15px; line-height: 1.6; }

@media (max-width: 900px) {
  .lp-anchors { display: none; }
  .lp-feature { grid-template-columns: 1fr; gap: 28px; padding: 64px 0; text-align: center; }
  .lp-feature-reverse .lp-feature-copy { order: 0; }
  .lp-checks { justify-items: center; }
  .lp-checks li { text-align: left; }
  .lp-device { min-height: 520px; }
  .lp-device::before { width: 330px; height: 330px; }
  .lp-intro-points, .lp-steps ol { grid-template-columns: 1fr; }
  .lp-soon-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lp-intro { width: calc(100% - 32px); padding-top: 72px; }
  .lp-feature, .lp-steps, .lp-soon, .lp-faq { width: calc(100% - 32px); }
  .lp-lead, .lp-feature-copy p { font-size: 16px; }
  .lp-soon-grid { grid-template-columns: 1fr; }
  .mock-phone { width: 246px; height: 500px; }
  .lp-float-badge { right: 0; font-size: 12px; }
  .lp-float-badge.lp-float-left { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal, .lp-reveal-item, .mock-phone { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-strip-track { animation: none; }
  .lp-device .lp-pop, .lp-device .lp-notif, .lp-float-badge { opacity: 1 !important; transform: none !important; animation: none !important; }
  .lp-device .lp-typing { width: auto; animation: none !important; }
}

/* Real app screenshots inside the landing phones, plus the Famélio Plus offer. */
.phone-carousel .phone-shot, .mock-shot { padding: 0 !important; overflow: hidden; background: #fbf3ea; }
.phone-carousel .phone-shot img, .mock-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.mock-shot img { transform: scale(1.04); transition: transform 1.4s cubic-bezier(.2,.75,.25,1) .2s; }
.lp-device.is-live .mock-shot img { transform: none; }
.lp-strip-track span.is-plus { border-color: #ecc3ab; color: #fff; background: linear-gradient(135deg, #d98a5f, #bf6848); }
.lp-strip-track span.is-plus i { color: #fff; }
.lp-kicker em { margin-left: 4px; padding: 3px 7px; border-radius: 99px; font-size: 10px; font-style: normal; letter-spacing: .04em; }
.lp-kicker em.lp-free { color: #2f7865; background: #dff3e8; }
.lp-kicker-plus { color: #fff !important; background: linear-gradient(135deg, #d98a5f, #bf6848); }
.lp-kicker-plus em { color: #bf6848; background: #fff; }
.lp-plus-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: #a95339; font-size: 15px; font-weight: 800; }
.lp-plus-link span { transition: transform .2s; }
.lp-plus-link:hover span { transform: translateX(4px); }
.lp-plus-intro { position: relative; width: min(980px, calc(100% - 48px)); margin: 60px auto 0; padding: 70px 40px; border-radius: 34px; background: radial-gradient(circle at 12% 0, rgba(255,255,255,.35), transparent 40%), linear-gradient(135deg, #f7d6c2 0%, #f3c0a5 45%, #e8b195 100%); text-align: center; overflow: hidden; }
.lp-plus-intro .lp-lead { color: #6a4636; }
.lp-plus-pill { display: inline-block; margin-bottom: 18px; padding: 8px 15px; border-radius: 99px; color: #fff; background: #bf6848; box-shadow: 0 10px 20px rgba(191,104,72,.3); font-size: 13px; font-weight: 800; letter-spacing: .05em; }
.lp-feature-plus .lp-device::before { background: radial-gradient(circle, #ffd9c2 0%, rgba(255,217,194,.5) 45%, transparent 70%); }

.lp-pricing { width: min(980px, calc(100% - 48px)); margin: 0 auto; padding: 90px 0 40px; text-align: center; }
.lp-pricing .eyebrow { color: #bf6848; }
.lp-plans { display: grid; grid-template-columns: 1fr 1.08fr; gap: 22px; align-items: stretch; margin-top: 44px; text-align: left; }
.lp-plan { position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; border: 1px solid #efdfd2; border-radius: 28px; background: #fff; box-shadow: 0 16px 34px rgba(86,63,42,.07); }
.lp-plan h3 { margin: 0; color: #2b2420; font-family: Georgia, serif; font-size: 26px; font-weight: 500; }
.lp-price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.lp-price b { color: #2b2420; font-family: Georgia, serif; font-size: 46px; font-weight: 500; letter-spacing: -1.5px; }
.lp-price span { color: #8d8079; font-size: 14px; font-weight: 700; }
.lp-plan-lead { margin: 0 0 6px; color: #6f6660; font-size: 15px; line-height: 1.55; }
.lp-plan .lp-checks { margin-bottom: 26px; }
.lp-plan .button { margin-top: auto; }
.lp-plan-plus { border: 2px solid #bf6848; background: linear-gradient(170deg, #fff8f3 0%, #ffffff 60%); box-shadow: 0 24px 50px rgba(191,104,72,.18); transform: translateY(-8px); }
.lp-plan-plus .lp-checks li::before { background: #bf6848; }
.lp-plan-ribbon { position: absolute; top: -15px; left: 30px; padding: 7px 13px; border-radius: 99px; color: #fff; background: #bf6848; font-size: 12px; font-weight: 800; }
.lp-plus-soon { margin: -10px 0 22px; color: #9a6a54; font-size: 13px; line-height: 1.5; }
.lp-plan-soon { cursor: default; opacity: .92; }
.lp-plan-soon:hover { transform: none; }
.lp-pricing-note { margin: 26px auto 0; max-width: 600px; color: #8d8079; font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) {
  .lp-plans { grid-template-columns: 1fr; }
  .lp-plan-plus { transform: none; margin-top: 12px; }
  .lp-plus-intro { padding: 54px 22px; border-radius: 26px; }
}
@media (max-width: 560px) {
  .lp-pricing, .lp-plus-intro { width: calc(100% - 32px); }
  .lp-plan { padding: 30px 22px 24px; }
}
@media (prefers-reduced-motion: reduce) { .mock-shot img { transform: none !important; transition: none !important; } }
.lp-plan .lp-checks { justify-items: start; }
.lp-price { flex-wrap: wrap; }
.lp-price b { white-space: nowrap; }

/* Planning readability: shortcuts, who an item is for, quick task check, calm empty and past days. */
.family-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 6px; }
.family-shortcut { position: relative; display: flex; align-items: center; gap: 11px; min-height: 64px; padding: 12px 14px; border: 1px solid #efdccd; border-radius: 16px; color: #2b2420; background: #fffaf6; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.family-shortcut:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(86,63,42,.08); }
.family-shortcut i { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #bf6848; background: #ffeadc; font-size: 18px; font-style: normal; font-weight: 800; }
.family-shortcut-add { border-color: #bf6848; color: #fff; background: #bf6848; box-shadow: 0 10px 20px rgba(191,104,72,.22); }
.family-shortcut-add i { color: #bf6848; background: #fff; }
.family-shortcut span { display: grid; gap: 2px; min-width: 0; }
.family-shortcut b { font-size: 14px; }
.family-shortcut small { color: #8d8079; font-size: 11px; font-weight: 600; }
.family-shortcut-add small { color: #ffe7d8; }
.family-shortcut em { position: absolute; top: -8px; right: 10px; padding: 3px 8px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #d98a5f, #bf6848); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .03em; }

.timeline-event { position: relative; }
.timeline-event:has(.timeline-who), .timeline-event:has(.timeline-check-form) { padding-right: 40px !important; }
.timeline-who { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: #bf6848; font-size: 11px; font-weight: 800; text-decoration: none; }
.timeline-check-form { position: absolute; right: 7px; bottom: 7px; margin: 0; }
.timeline-event:has(.timeline-who) .timeline-check-form { bottom: 7px; }
.timeline-event:not(:has(.timeline-who)) .timeline-check-form { top: 50%; bottom: auto; transform: translateY(-50%); }
.timeline-check { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 2px solid currentColor; border-radius: 9px; color: inherit; background: rgba(255,255,255,.75); font: inherit; font-size: 13px; font-weight: 900; line-height: 1; cursor: pointer; opacity: .9; }
.timeline-check:not(.done) { color: transparent; border-color: #b9aaa0; }
.timeline-check:not(.done):hover { color: #73a88f; border-color: #73a88f; }
.timeline-check.done { color: #fff; border-color: #73a88f; background: #73a88f; text-decoration: none; }
.timeline-lock { margin-right: 4px; font-style: normal; font-size: .9em; }
.week-empty { margin: 2px 0 0; color: #b3a49a; font-size: 12px; font-weight: 600; }
.back-to-today { display: block; width: max-content; margin: -4px auto 12px; padding: 7px 13px; border-radius: 99px; color: #9d4f38; background: #ffebe0; font-size: 12px; font-weight: 800; }

.assignee-picker > span { display: block; margin-bottom: 8px; color: #4a403a; font-size: 13px; font-weight: 800; }
.assignee-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.assignee-buttons button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 13px 6px 7px; border: 1.5px solid #eadccd; border-radius: 99px; color: #5d4c42; background: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.assignee-buttons button:first-child { padding-left: 13px; }
.assignee-buttons button i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: #d0a48c; font-size: 11px; font-style: normal; }
.assignee-buttons button.active { border-color: #bf6848; color: #9d4f38; background: #fff0e8; }
.assignee-buttons button.active i { background: #bf6848; }
.scope-buttons button.active { color: #9d4f38; }

@media (max-width: 760px) {
  .family-shortcuts { grid-template-columns: 1fr 1fr; }
  .family-shortcut-add { grid-column: 1 / -1; justify-content: center; }
  /* Past days shrink to a single line so today and the days ahead come first. */
  .week-day.past-day:not(.today) { min-height: 0 !important; padding: 9px 14px !important; opacity: .75; }
  .week-day.past-day:not(.today) header { margin-bottom: 0 !important; }
  .week-day.past-day:not(.today) .week-items { display: none; }
}

/* Famélio Plus pages: meals and shopping list, with a locked offer when the family has no Plus. */
.plus-badge { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #d98a5f, #bf6848); font-size: 10px; letter-spacing: .04em; vertical-align: middle; }
.plus-tabs { display: flex; gap: 6px; width: max-content; margin: 20px 0 6px; padding: 4px; border: 1px solid #eadccd; border-radius: 14px; background: #faeee5; }
.plus-tabs a { padding: 9px 16px; border-radius: 10px; color: #8d7d72; font-size: 13px; font-weight: 800; }
.plus-tabs a.active { color: #9d4f38; background: #fff; box-shadow: 0 3px 9px rgba(76,55,38,.11); }
.plus-status { margin: 12px 0 18px; color: #8d8079; font-size: 12px; font-weight: 700; }
.plus-status span { color: #bf6848; }

.meal-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 8px; }
.meal-day { padding: 14px; border: 1px solid #eadccd; border-radius: 18px; background: #fff; }
.meal-day.today { border-color: #bf6848; box-shadow: inset 0 0 0 1px #bf6848; background: linear-gradient(145deg, #ffe7dc, #fffaf6); }
.meal-day.past-day { opacity: .6; }
.meal-day header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; color: #a06852; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.meal-day header strong { color: #3d3430; letter-spacing: 0; }
.meal-slot { padding: 8px 0; border-top: 1px solid #f3e7dd; }
.meal-slot > small { display: block; margin-bottom: 6px; color: #b08a77; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.meal-item { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.meal-open { flex: 1; min-width: 0; padding: 9px 11px; border: 0; border-radius: 11px; color: #7d6528; background: #fff2d3; box-shadow: inset 3px 0 0 #d4a34b; font: inherit; text-align: left; cursor: pointer; }
.meal-open b { display: block; font-size: 14px; }
.meal-open span { display: block; margin-top: 2px; color: #9a845a; font-size: 11px; font-weight: 600; }
.meal-actions { display: flex; gap: 4px; }
.meal-actions form { margin: 0; }
.meal-actions button { width: 32px; height: 32px; border: 1px solid #eadccd; border-radius: 10px; color: #8d7d72; background: #fff; font-size: 14px; cursor: pointer; }
.meal-add { width: 100%; padding: 9px; border: 1.5px dashed #e3c3ad; border-radius: 11px; color: #b06a4d; background: #fffaf6; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.meal-add:hover { background: #fff0e8; }
.meal-empty { margin: 0; color: #c9b8ac; }
#meal-dialog textarea { width: 100%; min-height: 96px; padding: 12px; border: 1px solid #e4dbd2; border-radius: 12px; font: inherit; resize: vertical; }

.shop-add { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin: 6px 0 16px; }
.shop-add input, .shop-add select { min-height: 48px; padding: 0 14px; border: 1px solid #e4dbd2; border-radius: 13px; background: #fff; font: inherit; font-size: 15px; }
.shop-add .button { min-width: 52px; min-height: 48px; padding: 0; font-size: 22px; }
.shop-progress { margin-bottom: 12px; color: #8d8079; font-size: 12px; font-weight: 700; }
.shop-progress i { display: block; height: 8px; margin-top: 7px; overflow: hidden; border-radius: 8px; background: #eee3d8; }
.shop-progress b { display: block; height: 100%; border-radius: inherit; background: #73a88f; transition: width .4s; }
.shop-group { margin-top: 14px; }
.shop-group h2 { margin: 0 0 4px; color: #a06852; font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.shop-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #f0e8e1; }
.shop-row form { margin: 0; }
.shop-check { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 2px solid #d2c5bb; border-radius: 9px; color: #fff; background: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }
.shop-check:hover { border-color: #73a88f; }
.shop-row.done .shop-check { border-color: #73a88f; background: #73a88f; }
.shop-text { flex: 1; min-width: 0; }
.shop-text b { display: block; color: #3d3430; font-size: 15px; }
.shop-text small { display: block; margin-top: 2px; color: #a0938a; font-size: 12px; }
.shop-row.done .shop-text b { color: #a29a94; text-decoration: line-through; }
.shop-delete { width: 30px; height: 30px; border: 0; border-radius: 9px; color: #b3a49a; background: transparent; font-size: 18px; cursor: pointer; }
.shop-delete:hover { color: #9d4f38; background: #fff0e8; }
.shop-done-heading { display: flex; align-items: center; justify-content: space-between; }
.shop-done-heading button { padding: 6px 11px; border: 1px solid #eadccd; border-radius: 99px; color: #9d4f38; background: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.shop-empty { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1.5px dashed #e8cdbb; border-radius: 16px; color: #8d8079; background: #fffaf6; }
.shop-empty span { font-size: 24px; }
.shop-empty p { margin: 0; }

.plus-locked { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; margin-top: 18px; padding: 30px; border-radius: 26px; background: radial-gradient(circle at 100% 0, rgba(255,255,255,.4), transparent 45%), linear-gradient(140deg, #fff3ea 0%, #ffe3d3 100%); }
.plus-pill { display: inline-block; padding: 7px 13px; border-radius: 99px; color: #fff; background: #bf6848; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.plus-locked h2 { margin: 16px 0 10px; color: #2b2420; font-family: Georgia, serif; font-size: 28px; font-weight: 500; line-height: 1.1; }
.plus-locked p { color: #6a5145; line-height: 1.55; }
.plus-benefits { display: grid; gap: 9px; margin: 16px 0; padding: 0; list-style: none; }
.plus-benefits li { display: flex; gap: 10px; color: #3f3631; font-size: 14px; font-weight: 700; }
.plus-benefits li::before { content: '✓'; display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: #fff; background: #bf6848; font-size: 11px; }
.plus-offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 18px 0 4px; }
.plus-offer b { color: #2b2420; font-family: Georgia, serif; font-size: 34px; font-weight: 500; }
.plus-offer span { color: #8d6d5c; font-size: 13px; font-weight: 700; }
.plus-soon { margin: 6px 0 14px; font-size: 13px; }
.plus-code-form label { display: block; margin-bottom: 7px; color: #4a403a; font-size: 13px; font-weight: 800; }
.plus-code-form div { display: flex; gap: 8px; }
.plus-code-form input { flex: 1; min-width: 0; min-height: 50px; padding: 0 14px; border: 1.5px solid #e3c3ad; border-radius: 13px; background: #fff; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.plus-code-form .button { min-height: 50px; }
.plus-ask { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.7); font-weight: 700; }
.plus-preview { display: grid; place-items: center; }
.plus-preview .mock-phone { width: 230px; height: 470px; transform: rotate(3deg); }
.plus-preview .mock-shot img { transform: none; filter: saturate(.9); }
@media (max-width: 760px) {
  .plus-locked { grid-template-columns: 1fr; padding: 22px 18px; }
  .plus-preview { display: none; }
  .shop-add { grid-template-columns: 1fr auto; }
  .shop-add select { grid-column: 1; grid-row: 2; }
  .shop-add .button { grid-row: 1 / span 2; grid-column: 2; min-height: 100%; }
  .meal-week { grid-template-columns: 1fr; }
}
.timeline-who { top: 50%; transform: translateY(-50%); }
.timeline-check-form, .timeline-event:has(.timeline-who) .timeline-check-form, .timeline-event:not(:has(.timeline-who)) .timeline-check-form { top: 50%; bottom: auto; transform: translateY(-50%); }
.timeline-event:has(.timeline-check-form) .timeline-who { right: 40px; }
.timeline-event:has(.timeline-who):has(.timeline-check-form) { padding-right: 72px !important; }
.meal-day.is-empty { padding: 10px 14px; }
.meal-day.is-empty header { margin-bottom: 0; }
.meal-day.is-empty .meal-slot { display: none; }
.plus-tabs a { white-space: nowrap; }
/* In the 7-column desktop week, each item stacks: time, title, then who it is for and the check. */
@media (min-width: 761px) {
  .week-day .timeline-event { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px !important; }
  .week-day .timeline-event .timeline-time { flex-basis: 100%; }
  .week-day .timeline-event .timeline-title { flex-basis: 100%; }
  .week-day .timeline-event .timeline-who, .week-day .timeline-event .timeline-check-form { position: static; transform: none; }
  .week-day .timeline-event .timeline-who { width: 22px; height: 22px; font-size: 10px; }
  .week-day .timeline-event .timeline-check { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; }
  .week-day .timeline-event .timeline-check-form { margin-left: auto; }
}
/* Pages with a calendar get a wider column on large screens so the 7 days stay readable. */
@media (min-width: 1100px) {
  .app-shell:has(.week-grid), .app-shell:has(.month-grid), .app-shell:has(.meal-week) { width: min(1180px, calc(100% - 48px)); }
}
@media (min-width: 761px) {
  .week-day .timeline-title { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
  .week-day .timeline-event { min-width: 0; }
}
@media (min-width: 761px) {
  .week-day .timeline-event:is(:has(.timeline-who), :has(.timeline-check-form)) { padding-right: 8px !important; }
}
.dashboard-shortcuts { grid-template-columns: 1fr 1fr; margin: 0 0 14px; }

/* Sage theme (test on the couleur-sauge branch): deep sage leads, terracotta only for today and Famélio Plus. */
:root { --purple: #3f7a63; --sage: #3f7a63; --sage-dark: #33664f; --sage-text: #356b56; --sage-soft: #e6f1eb; --sage-line: #cfe3d8; }
.button-primary, .add-member-button, .dialog-submit, .dialog-form input.dialog-submit, .form-stack input[type=submit], .inline-form .button, .member-save { background: var(--sage) !important; box-shadow: 0 10px 20px rgba(63,122,99,.22); }
.button-primary:hover, .add-member-button:hover, .dialog-form input.dialog-submit:hover { background: var(--sage-dark) !important; }
.account-avatar, .personal-shortcut > span, .timeline-who, .assignee-buttons button.active i, .wizard-progress b, .notification-button, .notification-button:disabled { background: var(--sage); }
.personal-nav-link, .account-profile-link, .back-link, .personal-shortcut b, .calendar-view-tabs a.active, .month-switcher a, .back-to-today, .scope-buttons button.active, .plus-tabs a.active, .feature-link, .status-button, .upcoming-dashboard a > span, .family-link span, .form-footer a { color: var(--sage-text); }
.page-kicker, .calendar-heading .page-kicker, .planner-heading .page-kicker, .eyebrow, .lp-intro .eyebrow, .lp-steps .eyebrow, .lp-soon .eyebrow, .lp-faq .eyebrow, .lp-pricing .eyebrow { color: var(--sage-text); }
.personal-nav-link { background: var(--sage-soft); }
.month-switcher a, .back-to-today { background: var(--sage-soft); border-color: var(--sage-line); }
.calendar-view-tabs, .plus-tabs { border-color: var(--sage-line); background: #eef5f0; }
.button-secondary { border-color: var(--sage-line); color: var(--sage-text); background: #f4f9f6; }
.button-secondary:hover { border-color: #9cc3b1; background: var(--sage-soft); }
.personal-shortcut { border-color: var(--sage-line); background: #f4f9f6; }
.family-shortcut { border-color: var(--sage-line); background: #f7fbf8; }
.family-shortcut i { color: var(--sage); background: var(--sage-soft); }
.family-shortcut-add { border-color: var(--sage); color: #fff; background: var(--sage); box-shadow: 0 10px 20px rgba(63,122,99,.22); }
.family-shortcut-add i { color: var(--sage); background: #fff; }
.family-shortcut-add small { color: #dff0e7; }
.assignee-buttons button.active { border-color: var(--sage); color: var(--sage-text); background: var(--sage-soft); }
.timeline-check:not(.done):hover { color: var(--sage); border-color: var(--sage); }
.today-dashboard { border-color: #cfe4d9; background: linear-gradient(135deg, #5b967d 0%, #3f7863 100%); box-shadow: 0 14px 25px rgba(63,120,104,.18); }
.today-heading .page-kicker { color: #d9f0e4; }
.today-time { color: #dff3e8; }
.today-list small { color: #d7eee3; }
.today-done { color: #2f7865; background: #dff3e8; }
.meal-add { border-color: #b9d6c7; color: var(--sage-text); background: #f7fbf8; }
.meal-add:hover { background: var(--sage-soft); }
.shop-done-heading button, .shop-delete:hover { color: var(--sage-text); }

/* Landing page in sage, Plus offer stays warm. */
.lp-anchors a::after, .phone-carousel-controls button.active, .lp-steps li:nth-child(1) span, .mock-fab, .mock-button, .mock-member i, .mock-notif i, .mock-progress b::after { background: var(--sage); }
.lp-strip-track i, .lp-intro-points b, .lp-soon-grid i, .lp-faq summary::after, .carousel-hint span, .mock-top b { color: var(--sage); }
.lp-kicker { color: var(--sage-text) !important; background: var(--sage-soft); }
.lp-kicker-plus { color: #fff !important; background: linear-gradient(135deg, #d98a5f, #bf6848); }
.lp-soon-grid i, .lp-faq summary::after { background: var(--sage-soft); }
.lp-strip { border-color: #dcebe2; background: #f4f9f6; }
.lp-strip-track span { border-color: var(--sage-line); color: var(--sage-text); }
.lp-strip-track span.is-plus { color: #fff; }
.carousel-hint { border-color: var(--sage-line); color: var(--sage-text); }
.wizard-progress { color: var(--sage-text); }
.wizard-progress i { background: var(--sage-soft); }
.assignee-buttons button i { background: #9cc3b1; }
.assignee-buttons button { border-color: var(--sage-line); }

/* Day recap dialog: everything planned on the tapped day, then an add button. */
[data-day-recap] { cursor: pointer; }
.recap-dialog .dialog-heading { padding-bottom: 6px; }
.recap-count { margin: 0; padding: 0 24px 12px; color: #8d8079; font-size: 13px; font-weight: 700; }
.recap-list { display: grid; gap: 8px; max-height: min(52vh, 460px); overflow-y: auto; padding: 4px 24px 6px; }
.recap-item { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px 12px 12px 14px; border: 0; border-radius: 14px; color: #7d6528; background: #fff2d3; box-shadow: inset 4px 0 0 #d4a34b; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, filter .15s; }
.recap-item:hover { filter: brightness(.98); transform: translateX(2px); }
.recap-item.parents { color: #965831; background: #fff0e8; box-shadow: inset 4px 0 0 #e58e63; }
.recap-item.task { color: #665c55; background: #f1ebe5; box-shadow: inset 4px 0 0 #b9aaa0; }
.recap-item.personal { color: #974c35; background: #ffeadc; box-shadow: inset 4px 0 0 #d87957; }
.recap-item.done { opacity: .6; }
.recap-item.done b { text-decoration: line-through; }
.recap-when { font-size: 13px; font-weight: 800; }
.recap-body { display: grid; gap: 3px; min-width: 0; }
.recap-body b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.recap-tags { font-size: 12px; font-weight: 700; opacity: .85; }
.recap-tags:empty, .recap-body small:empty { display: none; }
.recap-body small { color: inherit; font-size: 13px; opacity: .8; line-height: 1.4; }
.recap-arrow { font-size: 22px; opacity: .5; }
.recap-actions { padding: 14px 24px 22px; }
.recap-actions:empty { display: none; }
.recap-add { width: 100%; }
@media (max-width: 760px) {
  .recap-count, .recap-list, .recap-actions { padding-left: 18px; padding-right: 18px; }
  .recap-list { max-height: 55vh; }
}

/* Recurring events (Famélio Premium). */
.timeline-repeat { margin-right: 4px; font-style: normal; font-weight: 900; }
.repeat-tag { margin-left: 4px; padding: 2px 7px; border-radius: 99px; color: var(--sage-text); background: var(--sage-soft); font-size: 11px; font-style: normal; font-weight: 800; }
.premium-note { display: block; margin-top: 6px; color: #b06a4d; font-size: 12px; font-weight: 800; }
.field-help { display: block; margin-top: 6px; color: #8d8079; font-size: 12px; }
.recurrence-field select:disabled { opacity: .55; }

/* Menu commun : onglets sous la barre du haut, barre fixe en bas sur téléphone */
.app-nav-bar { margin-bottom: 14px; }
.account-identity.active > span:last-child { color: var(--sage-text); }
.main-tabs { display: flex; gap: 6px; margin: 0 0 22px; padding: 5px; overflow-x: auto; border: 1px solid var(--sage-line); border-radius: 16px; background: rgba(255,255,255,.85); scrollbar-width: none; }
.main-tabs::-webkit-scrollbar { display: none; }
.main-tabs a { position: relative; display: flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 12px; color: #6a615b; font-size: 13px; font-weight: 800; white-space: nowrap; transition: background .2s, color .2s; }
.main-tabs a i { font-style: normal; font-size: 15px; }
.main-tabs a:hover { background: var(--sage-soft); }
.main-tabs a.active { color: #fff; background: var(--sage); }
.main-tabs a em { color: #b06a4d; font-size: 10px; font-style: normal; }
.main-tabs a.active em { color: #fff; }
.tab-short { display: none; }
@media (max-width: 760px) {
  .app-page { padding-bottom: 96px; }
  .main-tabs { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; gap: 0; margin: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); overflow: visible; border: 0; border-top: 1px solid var(--sage-line); border-radius: 0; background: rgba(255,255,255,.97); box-shadow: 0 -8px 24px rgba(40,60,50,.08); }
  .main-tabs a { flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 2px; border-radius: 10px; font-size: 10px; }
  .main-tabs a i { font-size: 19px; line-height: 1.1; }
  .main-tabs a span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
  .main-tabs a em { position: absolute; top: 3px; right: 18%; }
  .main-tabs a.active { color: var(--sage-text); background: var(--sage-soft); }
  .tab-long { display: none; }
  .tab-short { display: inline; }
}

/* Page « Ma famille » */
.manage-block { margin-top: 28px; padding: 22px; border: 1px solid var(--sage-line); border-radius: 20px; background: #fff; }
.manage-block:first-of-type { margin-top: 6px; }
.manage-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.manage-heading h2 { margin: 0 0 3px; font-size: 20px; }
.manage-heading p, .manage-note { color: var(--muted); font-size: 13px; line-height: 1.55; }
.manage-note { margin: 0 0 14px; }
.manage-add { margin-bottom: 18px; padding: 16px; border-radius: 16px; background: var(--sage-soft); }
.manage-add h3 { margin: 0 0 4px; font-size: 15px; }
.manage-add > p { margin: 0 0 12px; color: #5d6e65; font-size: 13px; line-height: 1.5; }
.manage-add-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 10px; align-items: end; }
.manage-add-row label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 800; }
.manage-add-row input, .manage-add-row select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--sage-line); border-radius: 11px; background: #fff; font: inherit; font-size: 14px; }
.manage-add-row .button { min-height: 44px; }
.field-error { display: block; margin-top: 5px; color: #b4532c; font-size: 12px; }
.member-cards { display: grid; gap: 10px; padding: 0; list-style: none; }
.member-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #eee8e1; border-radius: 15px; background: #fffdfb; }
.member-card .member-avatar { flex: none; }
.member-card-body { flex: 1; min-width: 0; }
.member-card-body strong, .member-card-body small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-card-body small { color: var(--muted); font-size: 12px; }
.member-card-body em, .family-link em { margin-left: 4px; padding: 2px 7px; border-radius: 99px; color: var(--sage-text); background: var(--sage-soft); font-size: 11px; font-style: normal; font-weight: 800; }
.member-card .member-controls { display: flex; flex: none; align-items: center; gap: 8px; }
.member-card .member-controls form { display: flex; align-items: center; gap: 6px; }
.member-card select { min-height: 38px; padding: 0 8px; border: 1px solid var(--sage-line); border-radius: 10px; background: #fff; font: inherit; font-size: 13px; }
.manage-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.manage-links a { padding: 10px 14px; border-radius: 12px; color: var(--sage-text); background: var(--sage-soft); font-size: 13px; font-weight: 800; }
.manage-page .plus-offer { margin-bottom: 12px; }
.family-link.current { border-color: var(--sage); background: var(--sage-soft); }
.family-manage-card { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 16px; border: 1px solid var(--sage-line); border-radius: 18px; background: #fff; transition: transform .2s, border-color .2s; }
.family-manage-card:hover { transform: translateY(-2px); border-color: var(--sage); }
.family-manage-card > div:nth-child(2) { flex: 1; min-width: 0; }
.family-manage-card strong, .family-manage-card small { display: block; }
.family-manage-card small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.family-manage-card b { color: var(--sage-text); font-size: 20px; }
.member-avatars { display: flex; flex: none; }
.member-avatars .member-avatar { margin-left: -8px; border: 2px solid #fff; }
.member-avatars .member-avatar:first-child { margin-left: 0; }
@media (max-width: 640px) {
  .manage-block { padding: 16px; }
  .manage-add-row { grid-template-columns: 1fr; }
  .manage-heading { align-items: flex-start; }
  .member-card { flex-wrap: wrap; }
  .member-card .member-controls { width: 100%; justify-content: space-between; }
  .family-nav-actions { display: none; }
}
.member-avatar { color: var(--sage-text); background: var(--sage-soft); }
.member-avatars .member-avatar { background: #cfe3d8; }

.field-hint { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--muted, #6b7280); }

.premium-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 23px; padding: 16px; border: 1px solid #eadccd; border-radius: 16px; background: #faeee5; }
.premium-card strong { display: block; margin-top: 8px; font-size: 14px; }
.premium-card p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
@media (max-width: 760px) { .premium-card { flex-direction: column; align-items: stretch; } .premium-card .button { text-align: center; } }

.brand { display: inline-flex; align-items: center; gap: 10px; letter-spacing: -.5px; }
.brand .brand-word { color: var(--ink); }
.brand-emblem { display: block; width: 34px; height: 34px; border-radius: 10px; }
.app-nav-bar .brand .brand-emblem { width: 32px; height: 32px; }

.brand .brand-word { color: #7a3f2b; }
.brand-emblem { box-shadow: 0 6px 14px rgba(220,106,76,.28); }

.brand { gap: 8px; }
.brand .brand-word { font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.2px; color: #7a3f2b; }
.brand-emblem, .app-nav-bar .brand .brand-emblem { width: 28px; height: 28px; border-radius: 0; box-shadow: none; }
.landing .brand .brand-word, .site-footer .brand .brand-word { font-size: 23px; }
@media (max-width: 760px) { .brand .brand-word, .landing .brand .brand-word { font-size: 18px; } .brand-emblem, .app-nav-bar .brand .brand-emblem { width: 24px; height: 24px; } }

.brand-emblem, .app-nav-bar .brand .brand-emblem { border-radius: 9px; }

.brand-emblem, .app-nav-bar .brand .brand-emblem { border-radius: 0; }
.brand-emblem, .app-nav-bar .brand .brand-emblem { width: 34px; height: 34px; }
@media (max-width: 760px) { .brand-emblem, .app-nav-bar .brand .brand-emblem { width: 30px; height: 30px; } }

.lp-compare-title { margin: 46px 0 14px; color: #2b2420; font-family: Georgia, serif; font-size: 22px; font-weight: 500; }
.compare-wrap { max-width: 640px; margin: 0 auto; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #efdfd2; border-radius: 18px; overflow: hidden; background: #fff; text-align: left; font-size: 14px; }
.compare-table th, .compare-table td { padding: 11px 14px; border-bottom: 1px solid #f3e9df; }
.compare-table thead th { font-size: 13px; font-weight: 800; text-align: center; color: #5f5650; background: #fbf6f0; }
.compare-table tbody th { font-weight: 600; color: #3a322d; }
.compare-table td { text-align: center; width: 24%; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table .compare-plus { background: #fff6ef; color: #9d4f38; }
.compare-table thead .compare-plus { color: #bf6848; }
.cmp-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #3f7a63; font-size: 13px; font-weight: 800; }
.compare-plus .cmp-yes { background: #bf6848; }
.cmp-no { color: #b5aaa1; font-size: 20px; }
.compare-price td { font-weight: 800; }
.compare-price small { display: block; margin-top: 2px; color: #8d7d72; font-size: 11px; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.manage-block .compare-wrap { margin: 14px 0; }
@media (max-width: 760px) { .compare-table { font-size: 13px; } .compare-table th, .compare-table td { padding: 10px 9px; } }

.lp-burger, .lp-mobile-menu { display: none; }
@media (max-width: 760px) {
  .lp-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; margin-left: auto; margin-right: 8px; padding: 0 10px; border: 1px solid #eadccd; border-radius: 12px; background: #fff; cursor: pointer; }
  .lp-burger span { display: block; height: 2px; border-radius: 2px; background: #7a3f2b; transition: transform .2s, opacity .2s; }
  .lp-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .lp-burger.open span:nth-child(2) { opacity: 0; }
  .lp-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .lp-mobile-menu:not([hidden]) { position: sticky; top: 76px; z-index: 29; display: grid; width: min(100% - 32px, 560px); margin: -6px auto 0; padding: 8px; border: 1px solid #eadccd; border-radius: 16px; background: #fffdf9; box-shadow: 0 18px 40px rgba(76,55,38,.16); }
  .lp-mobile-menu a { padding: 13px 14px; border-radius: 10px; color: #3a322d; font-size: 16px; font-weight: 700; }
  .lp-mobile-menu a:active { background: #faeee5; }
  .lp-mobile-menu a:last-child { color: #356b56; }
  html { scroll-padding-top: 84px; }
}
@media (max-width: 760px) { .lp-mobile-menu:not([hidden]) { position: fixed; top: 70px; left: 16px; right: 16px; width: auto; margin: 0 auto; max-width: 560px; } }
@media (max-width: 760px) { .landing-page .site-header .header-actions { order: 2; margin-left: auto; } .lp-burger { order: 3; margin-left: 10px; margin-right: 0; } }
.landing-cta .button, .landing-cta .button-primary { background: #fff8f0 !important; color: #8f3f2a !important; border: 0; box-shadow: 0 14px 28px rgba(80,30,15,.28); font-weight: 800; }
.landing-cta .button:hover, .landing-cta .button-primary:hover { background: #fff !important; color: #7a3320 !important; transform: translateY(-2px); }
.landing-cta .button span { color: inherit; }

/* Landing condensée : grille de fonctionnalités */
.lp-overview { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 80px 0 30px; text-align: center; }
.lp-overview .eyebrow { color: var(--sage-text); }
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; text-align: left; }
.lp-card { padding: 22px 20px; border: 1px solid #f0e0d3; border-radius: 20px; background: linear-gradient(160deg, #fff 0%, #fff8f2 100%); box-shadow: 0 12px 26px rgba(86,63,42,.05); }
.lp-card i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; border-radius: 12px; color: var(--sage-text); background: var(--sage-soft); font-style: normal; font-size: 18px; }
.lp-card h3 { margin: 0 0 6px; color: #2b2420; font-size: 16px; }
.lp-card p { margin: 0; color: #6f6660; font-size: 14px; line-height: 1.5; }
.lp-cards-plus { margin-top: 34px; padding: 28px; border-radius: 28px; background: linear-gradient(135deg, #fbe4d6 0%, #f6cfb9 100%); }
.lp-cards-plus .lp-cards { margin-top: 18px; }
.lp-cards-plus-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0; color: #6a4636; font-size: 15px; font-weight: 700; }
.lp-cards-plus-head .lp-plus-pill { margin: 0; }
.lp-card-plus { border-color: #f3c9b2; background: #fffaf6; }
.lp-card-plus i { color: #bf6848; background: #ffece1; }
.lp-quickstart { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; margin-top: 34px; scroll-margin-top: 100px; }
.lp-quickstart ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0; padding: 0; list-style: none; color: #3f3631; font-size: 15px; font-weight: 600; }
.lp-quickstart li { display: flex; align-items: center; gap: 8px; }
.lp-quickstart li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--sage); font-size: 13px; }
.lp-pricing { padding-top: 60px; }
.lp-pricing .lp-lead { margin-bottom: 26px; }
.lp-faq { padding: 50px 0 60px; }
@media (max-width: 860px) { .lp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .lp-overview { padding-top: 56px; }
  .lp-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
  .lp-card { display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; padding: 16px; }
  .lp-card i { grid-row: span 2; margin: 0; }
  .lp-card h3 { font-size: 15px; margin-bottom: 3px; }
  .lp-card p { font-size: 13px; }
  .lp-cards-plus { padding: 18px 14px; border-radius: 22px; }
  .lp-quickstart ol { flex-direction: column; align-items: flex-start; }
  .lp-pricing { padding-top: 40px; }
}

.install-banner{position:fixed;left:12px;right:12px;bottom:76px;z-index:60;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid #e8d6c4;border-radius:14px;box-shadow:0 8px 24px rgba(60,30,10,.18);font-size:14px}
.install-banner[hidden]{display:none}
.install-text{flex:1;display:flex;flex-direction:column;gap:2px}
.install-go{background:#bf6848;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-weight:600}
.install-close{background:none;border:0;font-size:22px;line-height:1;color:#8a6f5c;padding:2px 6px}
@media (min-width:761px){.install-banner{display:none}}
.install-how{background:#fbe9dd;color:#bf6848;border:0;border-radius:10px;padding:8px 12px;font-weight:600}
.guide-overlay{position:fixed;inset:0;z-index:100;background:rgba(40,25,15,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.guide-card{position:relative;background:#fff;border-radius:18px;padding:20px 18px 16px;width:100%;max-width:340px;text-align:center}
.guide-x{position:absolute;top:6px;right:10px;background:none;border:0;font-size:26px;color:#8a6f5c}
.guide-count{margin:0 0 8px;font-size:13px;color:#8a6f5c;font-weight:600}
.guide-svg{width:150px;height:auto}
.guide-text{font-size:15px;line-height:1.45;margin:10px 0 14px;color:#3b2c21}
.guide-nav{display:flex;justify-content:space-between;gap:10px}
.guide-nav button{flex:1;border:0;border-radius:10px;padding:10px;font-weight:600;background:#f4ece4;color:#4a3a2e}
.guide-nav .guide-next{background:#bf6848;color:#fff}
.plus-subscribe,.plus-billing{margin:14px 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.plan-choice{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.plan-choice label{display:flex;align-items:center;gap:6px;border:1px solid #e8d6c4;border-radius:12px;padding:10px 14px;cursor:pointer}
.plan-save{font-size:12px;color:#bf6848;font-weight:600}