.auth-body{min-height: 100vh;
background: var(--paper);
overflow: auto}
.auth-split{display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh}
.auth-brand{background:
radial-gradient(ellipse at 20% 20%, oklch(0.72 0.14 143 / 0.18) 0%, transparent 55%),
radial-gradient(ellipse at 80% 85%, oklch(0.74 0.07 85 / 0.13) 0%, transparent 55%),
linear-gradient(160deg, oklch(0.2 0.02 155), oklch(0.16 0.018 155));
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 56px 48px;
color: oklch(0.95 0.015 85)}
.auth-brand::before{content: "";
position: absolute;
top: -140px;
right: -140px;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(ellipse, oklch(0.72 0.14 143 / 0.2) 0%, transparent 65%)}
.auth-brand::after{content: "";
position: absolute;
bottom: -100px;
left: -100px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(ellipse, oklch(0.59 0.16 143 / 0.14) 0%, transparent 65%)}
.ab-inner{position: relative;
z-index: 1;
max-width: 420px}
.ab-logo{display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px}
.ab-tagline{font-family: var(--font-display);
font-size: 15px;
color: oklch(0.92 0.015 85 / 0.58);
margin-bottom: 40px;
letter-spacing: 0.01em;
font-style: italic}
.ab-features{display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 40px}
.ab-feat{display: flex;
align-items: flex-start;
gap: 16px}
.ab-feat-ico{width: 44px;
height: 44px;
border-radius: 12px;
background: oklch(0.72 0.14 143 / 0.18);
border: 1px solid oklch(0.72 0.14 143 / 0.32);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0}
.ab-feat div{font-size: 15px;
color: oklch(0.92 0.015 85 / 0.72);
line-height: 1.6}
.ab-feat strong{color: oklch(0.98 0.012 85);
font-weight: 600;
display: block;
margin-bottom: 2px;
font-size: 15px}
.ab-testimonial{background: oklch(0.98 0.012 85 / 0.06);
border: 1px solid oklch(0.98 0.012 85 / 0.12);
border-radius: 16px;
padding: 20px 24px;
position: relative}
.ab-testimonial::before{content: "«";
position: absolute;
top: -10px;
left: 16px;
font-family: var(--font-display);
font-size: 60px;
line-height: 1;
color: oklch(0.72 0.14 143);
opacity: 0.45}
.ab-quote{font-family: var(--font-display);
font-size: 16px;
font-style: italic;
color: oklch(0.96 0.012 85 / 0.88);
line-height: 1.5;
margin-bottom: 8px;
padding-top: 4px}
.ab-author{font-size: 12px;
color: oklch(0.92 0.015 85 / 0.45);
letter-spacing: 0.02em}
.auth-form-side{display: flex;
align-items: center;
justify-content: center;
padding: 56px 64px;
background: var(--paper-sheet)}
.auth-form-wrap{width: 100%;
max-width: 440px}
.auth-form-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 16px}
.auth-form-title{font-family: var(--font-display);
font-size: clamp(34px, 4vw, 46px);
font-weight: 400;
color: var(--ink);
margin-bottom: 12px;
letter-spacing: -0.018em;
line-height: 1.04;
text-wrap: balance}
.auth-form-title em{color: var(--brand);
font-style: italic;
font-family: var(--font-display)}
.auth-form-sub{font-size: 15px;
color: var(--ink-soft);
margin-bottom: 36px;
line-height: 1.6;
max-width: 44ch}
.auth-form{display: flex;
flex-direction: column;
gap: 0}
.auth-flash{border-radius: 12px;
margin-bottom: 16px;
padding: 12px 16px;
font-size: 15px}
.auth-row{display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0 24px;
flex-wrap: wrap;
gap: 12px}
.auth-remember{display: flex;
align-items: center;
gap: 8px;
text-transform: none;
letter-spacing: 0;
font-size: 13px;
color: var(--ink-soft);
cursor: pointer;
font-weight: 500;
margin: 0}
.auth-remember input[type="checkbox"]{width: 16px;
height: 16px;
accent-color: var(--brand);
cursor: pointer}
.auth-forgot{font-size: 13px;
color: var(--brand-dark);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px}
@media (hover: hover) and (pointer: fine){.auth-forgot:hover{color: var(--brand)}
}
.auth-links{text-align: center;
margin-top: 24px;
font-size: 13px;
color: var(--ink-muted)}
.auth-links a{color: var(--brand-dark);
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px}
@media (hover: hover) and (pointer: fine){.auth-links a:hover{color: var(--brand)}
}
.auth-dev-note{margin-top: 24px;
padding: 12px 16px;
background: var(--paper-soft);
border: 1px dashed var(--border);
border-radius: 10px;
font-size: 12px;
font-family: var(--font-body);
color: var(--ink-muted);
text-align: center;
letter-spacing: 0.05em;
font-style: italic}
@media (max-width: 900px){.auth-split{grid-template-columns: 1fr}
.auth-brand{display: none}
.auth-form-side{padding: 36px 24px}
}
.landing-body{min-height: 100vh;
background: var(--paper);
overflow: auto;
height: auto}
.land-nav{position: sticky;
top: 0;
z-index: 100;
background: var(--paper);
border-bottom: 1px solid var(--border);
padding: 0 48px}
.land-nav-inner{max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px}
.land-nav-links{display: flex;
align-items: center;
gap: 24px;
font-size: 13px;
font-weight: 500;
color: var(--ink-muted)}
.land-nav-links a{transition: color 0.18s}
@media (hover: hover) and (pointer: fine){.land-nav-links a:hover{color: var(--ink)}
}
.hero-section{max-width: 1180px;
margin: 0 auto;
padding: 88px 48px 56px;
display: grid;
grid-template-columns: 1fr 480px;
gap: 64px;
align-items: center}
.hero-badge{display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 980px;
background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.2);
font-size: 12px;
font-weight: 600;
color: var(--brand-dark);
margin-bottom: 24px;
letter-spacing: 0.03em}
.hero-title{font-family: var(--font-display);
font-size: clamp(42px, 5.6vw, 68px);
font-weight: 400;
line-height: 1.04;
color: var(--ink);
margin-bottom: 20px;
letter-spacing: -0.02em;
text-wrap: balance}
.hero-title em{color: var(--brand);
font-style: italic;
font-family: var(--font-display)}
.hero-sub{font-size: 16px;
color: var(--ink-soft);
line-height: 1.7;
margin-bottom: 32px;
max-width: 54ch}
.hero-cta{display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
margin-bottom: 32px}
.btn-xl{padding: 16px 32px;
font-size: 15px;
border-radius: 14px;
font-weight: 700}
.hero-cta-note{font-size: 12px;
color: var(--ink-muted)}
.hero-stats{display: flex;
align-items: center;
gap: 24px}
.hs{text-align: left}
.hs-val{font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--brand-dark);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums}
.hs-lbl{font-size: 12px;
color: var(--ink-muted);
margin-top: 2px}
.hs-div{width: 1px;
height: 42px;
background: var(--border)}
.hero-mockup{position: relative}
.mockup-card{background: linear-gradient(165deg, oklch(0.22 0.018 155), oklch(0.16 0.016 155));
border-radius: var(--radius-xl);
padding: 24px 24px;
box-shadow:
0 32px 80px oklch(0.08 0.012 120 / 0.28),
0 0 0 1px oklch(0.98 0.012 85 / 0.06);
position: relative;
overflow: hidden}
.mockup-card::before{content: "";
position: absolute;
top: -60px;
right: -60px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(ellipse, oklch(0.72 0.14 143 / 0.22) 0%, transparent 65%)}
.mc-header{display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px}
.mc-logo{font-family: var(--font-display);
font-size: 15px;
color: oklch(0.98 0.012 85);
font-weight: 400;
letter-spacing: -0.005em}
.mc-week{font-size: 12px;
color: oklch(0.92 0.015 85 / 0.4)}
.mc-budget{background: oklch(0.98 0.012 85 / 0.06);
border: 1px solid oklch(0.98 0.012 85 / 0.1);
border-radius: 14px;
padding: 16px;
margin-bottom: 16px}
.mc-b-label{font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: oklch(0.82 0.11 88 / 0.7);
margin-bottom: 4px;
font-weight: 600}
.mc-b-amount{font-family: var(--font-display);
font-size: 44px;
font-weight: 400;
color: oklch(0.98 0.012 85);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums}
.mc-b-sub{font-size: 13px;
color: oklch(0.92 0.015 85 / 0.55);
line-height: 1.6}
.mc-b-sub strong{color: oklch(0.72 0.14 143)}
.mc-menu{display: flex;
flex-direction: column;
gap: 8px}
.mc-repas{display: flex;
align-items: center;
gap: 12px;
background: oklch(0.98 0.012 85 / 0.05);
border-radius: 11px;
padding: 12px 12px}
.mc-repas span{font-size: 23px}
.mc-rn{font-size: 13px;
font-weight: 600;
color: oklch(0.98 0.012 85)}
.mc-rd{font-size: 12px;
color: oklch(0.92 0.015 85 / 0.42);
margin-top: 2px}
.mc-rp{margin-left: auto;
font-family: var(--font-display);
font-size: 15px;
font-weight: 400;
color: oklch(0.8 0.13 85);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums}
.mc-rp.free{color: oklch(0.82 0.11 88)}
.features-section{background: var(--paper-sheet);
padding: 88px 48px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border)}
.section-inner{max-width: 1180px;
margin: 0 auto}
.section-label{font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
font-weight: 700;
margin-bottom: 12px;
display: inline-block}
.section-title{font-family: var(--font-display);
font-size: clamp(34px, 4.2vw, 50px);
font-weight: 400;
color: var(--ink);
margin-bottom: 44px;
line-height: 1.08;
letter-spacing: -0.016em;
text-wrap: balance}
.section-title em{color: var(--brand);
font-style: italic;
font-family: var(--font-display)}
.features-grid{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px}
.feat-card{background: var(--paper);
border: 1px solid var(--border);
border-radius: 20px;
padding: 24px;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1)}
@media (hover: hover) and (pointer: fine){.feat-card:hover{transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: oklch(0.59 0.16 143 / 0.22)}
}
.feat-card-big{grid-column: span 2;
background: linear-gradient(135deg, oklch(0.22 0.018 155), oklch(0.18 0.016 155));
border-color: transparent;
color: oklch(0.95 0.015 85)}
.feat-card-big h3{color: oklch(0.98 0.012 85)}
.feat-card-big p{color: oklch(0.92 0.015 85 / 0.58)}
.fc-ico{font-size: 30px;
margin-bottom: 16px}
.feat-card h3{font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--ink);
margin-bottom: 8px;
letter-spacing: -0.008em}
.feat-card p{font-size: 13px;
color: var(--ink-soft);
line-height: 1.65}
.pricing-section{padding: 96px 48px}
.pricing-grid{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px}
.plan-card{background: var(--paper-sheet);
border: 1.5px solid var(--border);
border-radius: 22px;
padding: 32px;
transition: all 0.22s}
@media (hover: hover) and (pointer: fine){.plan-card:hover{box-shadow: var(--shadow-lg)}
}
.plan-featured{border-color: var(--brand);
box-shadow: 0 8px 32px oklch(0.59 0.16 143 / 0.18)}
.plan-badge{font-size: 12px;
font-weight: 700;
color: var(--brand-dark);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 8px}
.plan-name{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink);
margin-bottom: 8px;
letter-spacing: -0.01em}
.plan-price{font-family: var(--font-display);
font-size: 50px;
font-weight: 400;
color: var(--brand);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums}
.plan-price span{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-muted);
font-weight: 400}
.plan-trial{font-size: 13px;
color: var(--brand-dark);
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 0.02em}
.plan-features{list-style: none;
margin: 16px 0 24px;
display: flex;
flex-direction: column;
gap: 8px}
.plan-features li{font-size: 15px;
color: var(--ink-soft)}
.cta-section{background:
radial-gradient(ellipse at 50% 0%, oklch(0.72 0.14 143 / 0.22) 0%, transparent 60%),
linear-gradient(160deg, oklch(0.22 0.018 155), oklch(0.16 0.016 155));
padding: 88px 48px;
position: relative;
overflow: hidden;
color: oklch(0.98 0.012 85)}
.cta-section::before{content: "";
position: absolute;
top: -140px;
left: 50%;
transform: translateX(-50%);
width: 680px;
height: 460px;
border-radius: 50%;
background: radial-gradient(ellipse, oklch(0.59 0.16 143 / 0.14) 0%, transparent 70%)}
.cta-section .section-inner{position: relative;
z-index: 1}
.cta-section h2{color: oklch(0.98 0.012 85)}
.cta-section h2 em{color: oklch(0.8 0.13 85);
font-style: italic}
.land-footer{background: oklch(0.16 0.016 155);
border-top: 1px solid oklch(0.98 0.012 85 / 0.08);
padding: 32px 48px;
color: oklch(0.92 0.015 85 / 0.72)}
@media (max-width: 900px){.hero-section{grid-template-columns: 1fr}
.hero-mockup{display: none}
.features-grid{grid-template-columns: 1fr 1fr}
.feat-card-big{grid-column: span 2}
.pricing-grid{grid-template-columns: 1fr}
}
.wizard-wrap{max-width: 520px;
width: 100%;
margin: 0 auto}
.wiz-header-sticky{position: sticky;
top: calc(56px + env(safe-area-inset-top, 0px));
z-index: 5;
background: var(--paper, #faf6ec);
padding: 16px 0 24px;
margin: -16px 0 0}
.wiz-progress{width: 100%;
height: 6px;
background: var(--paper-deep);
border-radius: 999px;
overflow: hidden;
margin-bottom: 12px}
.wiz-progress-bar{height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--brand), var(--brand-light));
transform-origin: left center;
transform: scaleX(var(--progress, 0));
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
border-radius: 999px}
.wiz-steps-label{display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--ink-muted)}
.wiz-step-name{font-weight: 600;
color: var(--ink)}
.wiz-step{display: none;
animation: wiz-fade 0.35s ease}
.wiz-step-active{display: block}
@keyframes wiz-fade{from{opacity: 0;
transform: translateY(8px)}
to{opacity: 1;
transform: translateY(0)}
}
.wiz-title{font-size: 23px;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--ink);
margin-bottom: 8px}
.wiz-sub{font-size: 15px;
color: var(--ink-muted);
margin-bottom: 28px;
line-height: 1.5}
.wiz-label{display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: 12px}
.wiz-label-hint{display: inline-block;
margin-left: 8px;
font-weight: 500;
font-size: 13px;
color: var(--ink-soft)}
.wiz-fieldset{border: none;
margin: 0;
padding: 0;
min-width: 0}
.wiz-fieldset + .wiz-fieldset{margin-top: 24px}
.wiz-pills{display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px}
.wiz-pill{padding: 16px 0;
min-height: 44px;
border: 2px solid var(--paper-deep);
background: var(--paper-sheet);
border-radius: 12px;
font-size: 16px;
font-weight: 700;
color: var(--ink);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.wiz-pill:hover{border-color: var(--brand)}
}
.wiz-pill-active{background: var(--brand);
border-color: var(--brand);
color: var(--cream-fixed)}
.wiz-budget{background: var(--paper);
border-radius: 16px;
padding: 24px}
.wiz-budget input[type="range"]{width: 100%;
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 999px;
background: linear-gradient(to right, var(--brand) 0%, var(--brand) 33%, var(--paper-deep) 33%);
outline: none}
.wiz-budget input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:
0 0 0 4px oklch(0.59 0.16 143 / 0.3),
0 2px 8px oklch(0.59 0.16 143 / 0.42)}
.wiz-budget input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:
0 0 0 4px oklch(0.59 0.16 143 / 0.3),
0 2px 8px oklch(0.59 0.16 143 / 0.42)}
.wiz-budget input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand);
border: 4px solid var(--paper-sheet);
box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.42);
cursor: pointer}
.wiz-budget input[type="range"]::-moz-range-thumb{width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand);
border: 4px solid var(--paper-sheet);
box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.42);
cursor: pointer}
.wiz-budget-display{text-align: center;
margin-top: 16px;
font-size: 30px;
font-weight: 800;
color: var(--ink);
letter-spacing: -1px}
.wiz-budget-unit{font-size: 15px;
font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0}
.wiz-select{width: 100%;
padding: 16px 16px;
border: 2px solid var(--paper-deep);
border-radius: 12px;
font-size: 15px;
background: var(--paper-sheet);
color: var(--ink);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center}
.wiz-grocery-grid{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px}
.wiz-grocery{display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 8px;
min-height: 44px;
border: 2px solid var(--paper-deep);
background: var(--paper-sheet);
border-radius: 14px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
.wiz-grocery span{font-size: 23px}
@media (hover: hover) and (pointer: fine){.wiz-grocery:hover{border-color: var(--brand);
transform: translateY(-2px)}
}
.wiz-grocery-active{background: oklch(0.59 0.16 143 / 0.12);
border-color: var(--brand)}
.wiz-recap{background: linear-gradient(135deg, var(--paper), var(--paper-sheet));
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 20px;
margin-bottom: 24px}
.wiz-recap-line{display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: 15px;
color: var(--ink-soft)}
.wiz-recap-line > span{flex: 0 0 auto}
.wiz-recap-line strong{flex: 1;
text-align: right;
color: var(--ink);
font-weight: 700}
.wiz-recap-edit{flex: 0 0 auto;
background: transparent;
border: 0;
padding: 12px 8px;
min-height: 44px;
min-width: 44px;
font-size: 13px;
font-weight: 500;
color: var(--brand-dark, var(--brand));
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
border-radius: 4px}
.wiz-recap-edit:hover,
.wiz-recap-edit:focus-visible{color: var(--brand);
background: var(--accent-tint, oklch(0.59 0.16 143 / 0.08));
outline: none}
.wiz-recap-edit:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
body.mode-grand-maman .wiz-recap-edit,
body.mode-gm .wiz-recap-edit{font-size: 15px;
padding: 16px 12px}
.wiz-recap-savings{margin-top: 8px;
padding-top: 16px !important;
border-top: 1px dashed rgba(0, 0, 0, 0.1)}
.wiz-recap-savings strong{color: var(--brand);
font-size: 16px}
.wiz-nav{display: flex;
gap: 12px;
margin-top: 28px}
.wiz-nav .btn-sec{flex: 0 0 auto;
padding: 16px 20px;
background: var(--paper);
color: var(--ink);
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer}
.wiz-nav .btn-main{flex: 1}
@media (max-width: 480px){.wiz-pills{grid-template-columns: repeat(3, 1fr);
gap: 8px}
.wiz-pill{padding: 16px 0;
font-size: 15px;
min-height: 48px}
.wiz-grocery-grid{grid-template-columns: repeat(2, 1fr);
gap: 8px}
.wiz-grocery{min-height: 48px}
.wiz-budget-display{font-size: 30px}
}
.wizard-wrap .wiz-title{font-family: var(--font-display);
font-size: clamp(26px, 3vw, 34px);
font-weight: 400;
letter-spacing: -0.014em;
color: var(--ink);
margin-bottom: 8px;
line-height: 1.1;
text-wrap: balance}
.wizard-wrap .wiz-title em{color: var(--brand);
font-style: italic;
font-family: var(--font-display)}
.wizard-wrap .wiz-sub{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-soft);
line-height: 1.6;
margin-bottom: 32px}
.wizard-wrap .wiz-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 16px}
.wizard-wrap .wiz-label-spaced{margin-top: 32px}
.wizard-wrap .wiz-pill{font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
letter-spacing: -0.005em;
border-width: 1px;
border-radius: 14px;
padding: 16px 0;
background: var(--paper);
color: var(--ink)}
@media (hover: hover) and (pointer: fine){.wizard-wrap .wiz-pill:hover{background: var(--accent-tint);
border-color: var(--brand)}
}
.wizard-wrap .wiz-pill-active{background: var(--brand);
border-color: var(--brand);
color: var(--cream-fixed)}
.wizard-wrap .wiz-budget{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 24px 24px}
.wizard-wrap .wiz-budget-display{font-family: var(--font-display);
font-size: 38px;
font-weight: 400;
letter-spacing: -0.018em;
color: var(--ink);
text-align: center;
font-variant-numeric: tabular-nums;
margin-top: 24px}
.wizard-wrap .wiz-budget-unit{font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0.04em;
margin-left: 4px}
.wizard-wrap .wiz-postal{width: 100%;
font-family: var(--font-display);
font-size: 23px;
text-align: center;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--paper);
color: var(--ink);
transition:
border-color 0.2s,
box-shadow 0.2s}
.wizard-wrap .wiz-postal:focus{outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.16)}
.wizard-wrap .wiz-hint{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin-top: 8px;
font-style: italic;
line-height: 1.5}
.wizard-wrap .wiz-grocery{font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
letter-spacing: -0.005em;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 8px}
@media (hover: hover) and (pointer: fine){.wizard-wrap .wiz-grocery:hover{background: var(--accent-tint);
border-color: var(--brand)}
}
.wizard-wrap .wiz-grocery-active{background: var(--accent-tint);
border-color: var(--brand);
color: var(--brand-dark)}
.wizard-wrap .wiz-recap{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 28px 24px;
margin-bottom: 28px}
.wizard-wrap .wiz-recap-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border)}
.wizard-wrap .wiz-recap-line{font-family: var(--font-body);
font-size: 15px;
padding: 8px 0;
color: var(--ink-soft)}
.wizard-wrap .wiz-recap-line strong{font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em}
.wizard-wrap .wiz-recap-savings{border-top: 1px solid var(--border);
margin-top: 8px;
padding-top: 16px !important}
.wizard-wrap .wiz-recap-savings strong{color: var(--brand);
font-size: 19px}
.wizard-wrap .wiz-progress{height: 3px;
background: var(--paper-deep);
border-radius: 0;
margin-top: 8px}
.wizard-wrap .wiz-progress-bar{background: var(--brand);
border-radius: 0}
.wizard-wrap .wiz-steps-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
padding-top: 12px;
margin-bottom: 32px}
.wizard-wrap .wiz-step-name{color: var(--brand-dark)}
.wizard-wrap .wiz-cta{margin-top: 32px;
padding: 16px 32px}
.wizard-wrap .wiz-nav{margin-top: 32px;
gap: 16px}
.wizard-wrap .wiz-nav .btn-sec{background: var(--paper);
border: 1px solid var(--border);
color: var(--ink-soft);
padding: 16px 24px;
font-family: var(--font-body);
font-weight: 600}
@media (hover: hover) and (pointer: fine){.wizard-wrap .wiz-nav .btn-sec:hover{border-color: var(--brand);
color: var(--brand-dark)}
}
.auth-form-wrap input:not([type="hidden"]):focus-visible,
.auth-form-wrap select:focus-visible,
.auth-form-wrap textarea:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px;
border-color: var(--brand)}
.auth-remember:focus-within{outline: 2px solid var(--brand);
outline-offset: 4px;
border-radius: 6px}
.auth-remember input[type="checkbox"]:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.auth-forgot:focus-visible,
.auth-links a:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: 4px;
text-decoration: underline;
text-underline-offset: 3px}
.auth-form-wrap .btn-main:focus-visible,
.auth-form-wrap .btn-sec:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px}