:root{--font-display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--font-body: "Commissioner", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
--paper: oklch(0.985 0.006 75);
--paper-soft: oklch(0.965 0.008 75);
--paper-sheet: oklch(0.996 0.002 75);
--paper-deep: oklch(0.935 0.01 75);
--ink: oklch(0.22 0.016 75);
--ink-soft: oklch(0.4 0.014 72);
--ink-muted: oklch(0.52 0.01 70);
--ink-fade: oklch(0.56 0.01 70);
--accent: oklch(0.59 0.16 143);
--accent-deep: oklch(0.44 0.13 143);
--accent-bright: oklch(0.72 0.17 143);
--accent-tint: oklch(0.958 0.026 143);
--accent-tint2: oklch(0.91 0.05 143);
--accent-glow: 0 6px 28px oklch(0.59 0.16 143 / 0.26);
--danger: oklch(0.44 0.14 25);
--danger-deep: oklch(0.34 0.12 25);
--danger-bright: oklch(0.58 0.16 25);
--danger-tint: oklch(0.945 0.035 25);
--brick: var(--accent);
--brick-deep: var(--accent-deep);
--brick-bright: var(--accent-bright);
--brick-tint: var(--accent-tint);
--brick-tint2: var(--accent-tint2);
--brick-glow: var(--accent-glow);
--canneberge: var(--danger);
--labrador: var(--accent);
--labrador-deep: var(--accent-deep);
--labrador-bright: var(--accent-bright);
--labrador-tint: var(--accent-tint);
--labrador-tint2: var(--accent-tint2);
--labrador-glow: var(--accent-glow);
--moutarde: oklch(0.54 0.13 82);
--moutarde-deep: oklch(0.4 0.11 80);
--moutarde-bright: oklch(0.68 0.13 85);
--moutarde-tint: oklch(0.945 0.038 82);
--moutarde-tint2: oklch(0.9 0.045 82);
--moutarde-glow: 0 6px 28px oklch(0.54 0.13 82 / 0.22);
--oxblood: var(--danger);
--oxblood-deep: var(--danger-deep);
--oxblood-bright: var(--danger-bright);
--oxblood-tint: var(--danger-tint);
--courge: oklch(0.62 0.14 68);
--courge-tint: oklch(0.955 0.038 68);
--ardoise: oklch(0.52 0.1 220);
--paille: oklch(0.82 0.13 72);
--cream-fixed: oklch(0.992 0.006 75);
--cream-fixed-soft: oklch(0.992 0.006 75 / 0.82);
--cream-fixed-fade: oklch(0.992 0.006 75 / 0.55);
--bg: var(--paper);
--white: var(--paper-sheet);
--ink2: var(--ink-soft);
--muted: var(--ink-muted);
--muted2: var(--ink-fade);
--brand: var(--accent);
--brand-light: var(--accent-bright);
--brand-dark: var(--accent-deep);
--brand-pale: var(--accent-tint);
--red: var(--danger);
--amber: var(--courge);
--blue: var(--ardoise);
--green: var(--accent);
--green-pale: var(--accent-tint);
--border: oklch(0.82 0.018 75);
--border2: oklch(0.88 0.014 75);
--shadow: 0 1px 2px oklch(0.22 0.016 75 / 0.08), 0 1px 3px oklch(0.22 0.016 75 / 0.09);
--shadow-md: 0 6px 20px oklch(0.22 0.016 75 / 0.12), 0 2px 6px oklch(0.22 0.016 75 / 0.08);
--shadow-lg: 0 22px 56px oklch(0.22 0.016 75 / 0.16), 0 4px 12px oklch(0.22 0.016 75 / 0.09);
--radius: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--max-w: 1180px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper: oklch(0.18 0.014 75);
--paper-soft: oklch(0.15 0.012 75);
--paper-sheet: oklch(0.23 0.016 75);
--paper-deep: oklch(0.12 0.01 75);
--ink: oklch(0.94 0.01 75);
--ink-soft: oklch(0.8 0.012 75);
--ink-muted: oklch(0.72 0.012 75);
--ink-fade: oklch(0.6 0.01 75);
--accent: oklch(0.72 0.14 143);
--accent-deep: oklch(0.56 0.13 143);
--accent-bright: oklch(0.84 0.14 143);
--accent-tint: oklch(0.28 0.042 143);
--accent-tint2: oklch(0.34 0.05 143);
--accent-glow: 0 8px 32px oklch(0.72 0.14 143 / 0.28);
--danger: oklch(0.62 0.18 25);
--danger-deep: oklch(0.5 0.16 25);
--danger-bright: oklch(0.74 0.2 25);
--danger-tint: oklch(0.3 0.06 25)}
}
[data-theme="dark"]{--paper: oklch(0.18 0.014 75);
--paper-soft: oklch(0.15 0.012 75);
--paper-sheet: oklch(0.23 0.016 75);
--paper-deep: oklch(0.12 0.01 75);
--ink: oklch(0.94 0.01 75);
--ink-soft: oklch(0.8 0.012 75);
--ink-muted: oklch(0.72 0.012 75);
--ink-fade: oklch(0.6 0.01 75);
--accent: oklch(0.72 0.14 143);
--accent-deep: oklch(0.56 0.13 143);
--accent-bright: oklch(0.84 0.14 143);
--accent-tint: oklch(0.28 0.042 143);
--accent-tint2: oklch(0.34 0.05 143);
--accent-glow: 0 8px 32px oklch(0.72 0.14 143 / 0.28);
--danger: oklch(0.62 0.18 25);
--danger-deep: oklch(0.5 0.16 25);
--danger-bright: oklch(0.74 0.2 25);
--danger-tint: oklch(0.3 0.06 25)}
*,
*::before,
*::after{margin: 0;
padding: 0;
box-sizing: border-box}
html{scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-y: auto}
body{font-family: var(--font-body);
font-feature-settings: "ss01", "cv11";
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.58;
font-size: 16px;
text-rendering: optimizeLegibility}
.num,
.hero-stat-val,
.plan-price,
.mockup-budget-amount{font-variant-numeric: tabular-nums;
font-feature-settings:
"tnum" 1,
"lnum" 1}
a{text-decoration: none;
color: inherit}
img{max-width: 100%;
height: auto;
display: block}
button{cursor: pointer;
border: none;
background: none;
font: inherit}
ul,
ol{list-style: none}
.site-nav{position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: var(--paper-sheet);
border-bottom: 1px solid var(--border);
transition:
transform 0.3s,
opacity 0.3s,
color 0.3s,
background 0.3s,
border-color 0.3s,
box-shadow 0.3s;
padding-top: env(safe-area-inset-top, 0px)}
.site-nav.scrolled{border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 oklch(0.22 0.02 110 / 0.05)}
.nav-container{max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between}
@media (max-width: 768px){.sticky-cta-mobile.is-visible{display: block}
}
@media (max-width: 768px){body.has-sticky-cta{padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px))}
}
.nav-logo{display: flex;
align-items: center;
gap: 8px;
z-index: 101}
.nav-logo-text{font-size: 19px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.5px;
white-space: nowrap}
.nav-logo-text em{color: var(--brand);
font-style: normal}
img.brand-e{display: inline-block;
height: 1.08em;
width: auto;
max-width: none;
vertical-align: -0.1em;
color: var(--brand);
margin: 0 0.01em;
flex-shrink: 0}
.nav-links{display: flex;
align-items: center;
gap: 32px}
.nav-links > a{font-size: 15px;
font-weight: 500;
color: var(--muted);
transition: color 0.2s}
@media (hover: hover) and (pointer: fine){.nav-links > a:hover,
.nav-links > a.active{color: var(--ink)}
}
.nav-actions{display: flex;
align-items: center;
gap: 12px}
.nav-btn-sec{font-size: 15px;
font-weight: 600;
padding: 8px 16px;
color: #4a9e46;
border-radius: 980px;
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){.nav-btn-sec:hover{background: #e6f1e6}
}
.nav-btn-main{font-size: 15px;
font-weight: 600;
padding: 8px 20px;
color: #faf6ec;
border-radius: 980px;
background: #4a9e46;
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){.nav-btn-main:hover{background: #3a7f36}
}
.nav-burger{display: none;
width: 24px;
height: 20px;
background: transparent;
border: 0;
position: relative;
z-index: 101;
cursor: pointer}
.nav-burger::after{content: "";
position: absolute;
inset: -12px -10px}
.nav-burger span{display: block;
width: 100%;
height: 2px;
background: var(--ink);
border-radius: 1px;
position: absolute;
left: 0;
transition:
transform 0.3s,
opacity 0.3s,
color 0.3s,
background 0.3s,
border-color 0.3s,
box-shadow 0.3s}
.nav-burger span:nth-child(1){top: 0}
.nav-burger span:nth-child(2){top: 9px}
.nav-burger span:nth-child(3){top: 18px}
.nav-burger.open span:nth-child(1){top: 9px;
transform: rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity: 0}
.nav-burger.open span:nth-child(3){top: 9px;
transform: rotate(-45deg)}
.btn-main{display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 28px;
border-radius: 980px;
border: none;
font-size: 16px;
font-weight: 600;
background: var(--brand);
color: var(--cream-fixed);
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
text-decoration: none}
@media (hover: hover) and (pointer: fine){.btn-main:hover{background: var(--brand-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md)}
}
.btn-sec{display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 28px;
border-radius: 980px;
border: 1.5px solid var(--border);
background: var(--paper-sheet);
font-size: 16px;
font-weight: 600;
color: var(--ink);
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
text-decoration: none}
@media (hover: hover) and (pointer: fine){.btn-sec:hover{border-color: var(--brand);
color: var(--brand)}
}
.btn-xl{padding: 16px 40px;
font-size: 16px}
.btn-full{width: 100%}
.site-flash{max-width: var(--max-w);
margin: 80px auto 0;
padding: 16px 24px;
border-radius: var(--radius);
font-size: 15px;
font-weight: 500}
.site-flash-success{background: var(--brand-pale);
color: var(--brand-dark);
border: 1px solid oklch(0.59 0.16 143 / 0.18)}
.section{padding: clamp(72px, 10vw, 120px) 24px}
.section-alt{background: var(--paper-soft)}
.section-inner{max-width: var(--max-w);
margin: 0 auto}
.section-label{font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--accent-deep);
text-transform: uppercase;
letter-spacing: 0.18em;
margin-bottom: 16px;
display: inline-block}
.section-title{font-family: var(--font-display);
font-size: clamp(34px, 5vw, 56px);
font-weight: 400;
color: var(--ink);
line-height: 1.06;
letter-spacing: -0.015em;
margin-bottom: 24px;
text-wrap: balance;
max-width: 22ch}
.section-center .section-title{margin-left: auto;
margin-right: auto}
.section-title em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.section-sub{font-size: 19px;
color: var(--ink-soft);
line-height: 1.65;
max-width: 62ch}
.section-center{text-align: center}
.section-center .section-sub{margin: 0 auto 44px}
.hero{padding: 140px 24px 100px;
display: flex;
align-items: center;
justify-content: center;
min-height: 90vh;
position: relative;
overflow: visible}
.hero::before{content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, oklch(0.59 0.16 143 / 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, oklch(0.59 0.16 143 / 0.06) 0%, transparent 50%)}
.hero-inner{max-width: var(--max-w);
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
gap: 64px;
position: relative}
.hero-content{flex: 1;
max-width: 560px}
.hero-badge{display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 980px;
background: var(--brand-pale);
border: 1px solid oklch(0.59 0.16 143 / 0.14);
font-size: 13px;
font-weight: 600;
color: var(--brand-dark);
margin-bottom: 24px}
.hero-title{font-family: var(--font-display);
font-size: clamp(44px, 6.5vw, 76px);
font-weight: 400;
color: var(--ink);
line-height: 1.02;
letter-spacing: -0.022em;
margin-bottom: 24px;
text-wrap: balance}
.hero-title em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.hero-sub{font-size: 19px;
color: var(--ink-soft);
line-height: 1.62;
margin-bottom: 36px;
max-width: 52ch;
font-weight: 400}
.hero-cta{display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 48px}
.hero-note{font-size: 13px;
color: var(--muted)}
.hero-stats{display: flex;
align-items: center;
gap: 0;
padding: 20px 28px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow)}
.hero-stat{flex: 1;
text-align: center;
padding: 4px 0}
.hero-stat-val{font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em}
.hero-stat-lbl{font-size: 13px;
color: var(--muted);
margin-top: 2px;
line-height: 1.3}
.hero-stat-div{width: 1px;
height: 40px;
background: var(--border);
flex-shrink: 0}
.hero-mockup{flex-shrink: 0;
width: 380px;
position: relative}
.mockup-phone{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow:
var(--shadow-lg),
0 0 0 1px oklch(0.22 0.02 110 / 0.03)}
.mockup-status{padding: 8px 20px 8px;
display: flex;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: var(--ink)}
.mockup-header{padding: 8px 20px 16px}
.mockup-header h3{font-size: 15px;
font-weight: 700;
color: var(--ink)}
.mockup-header p{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.mockup-budget{margin: 0 16px;
padding: 16px 20px;
border-radius: 16px;
background: linear-gradient(135deg, var(--accent-tint), var(--accent-tint2));
border: 1px solid oklch(0.59 0.16 143 / 0.14)}
.mockup-budget-label{font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--brand-dark);
font-weight: 700}
.mockup-budget-amount{font-size: 30px;
font-weight: 800;
color: var(--ink);
margin: 4px 0}
.mockup-budget-sub{font-size: 12px;
color: var(--muted)}
.mockup-budget-sub strong{color: var(--brand)}
.mockup-meals{padding: 16px}
.mockup-meal{display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 12px;
margin-bottom: 4px;
transition: background 0.15s}
@media (hover: hover) and (pointer: fine){.mockup-meal:hover{background: var(--bg)}
}
.mockup-meal-emoji{font-family: "Young Serif", Georgia, serif;
font-size: 23px;
color: var(--brand-dark, #355c4d);
font-weight: 400;
width: 32px;
text-align: center;
flex-shrink: 0;
line-height: 1;
letter-spacing: -0.02em}
.mockup-meal-info{flex: 1}
.mockup-meal-name{font-size: 13px;
font-weight: 600;
color: var(--ink)}
.mockup-meal-detail{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.mockup-meal-price{font-size: 13px;
font-weight: 700;
color: var(--ink)}
.mockup-meal-price.savings{color: var(--brand)}
.faq-list{max-width: 720px;
margin: 0 auto}
.faq-item{border-bottom: 1px solid var(--border)}
.faq-q{width: 100%;
padding: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
text-align: left;
font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--ink);
transition: color 0.2s;
letter-spacing: -0.005em}
@media (hover: hover) and (pointer: fine){.faq-q:hover{color: var(--accent)}
}
.faq-q::after{content: "+";
font-size: 23px;
font-weight: 300;
color: var(--muted);
transition: transform 0.3s;
flex-shrink: 0;
margin-left: 16px}
.faq-item.open .faq-q::after{content: "-";
color: var(--brand)}
.faq-a{font-size: 15px;
color: var(--muted);
line-height: 1.7}
.faq-item.open .faq-a{padding-bottom: 24px}
.contact-grid{display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start}
.contact-info h3{font-size: 30px;
font-weight: 700;
color: var(--ink);
margin-bottom: 16px}
.contact-info p{font-size: 16px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 28px}
.contact-detail{display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border)}
.contact-detail-icon{font-size: 23px;
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--brand-pale);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0}
.contact-detail-text{font-size: 15px;
color: var(--ink2)}
.contact-detail-text strong{display: block;
font-weight: 600;
color: var(--ink);
margin-bottom: 2px}
.contact-form{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 36px;
box-shadow: var(--shadow)}
.form-group{margin-bottom: 20px}
.form-group label{display: block;
font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px}
.form-group input,
.form-group textarea,
.form-group select{width: 100%;
padding: 12px 16px;
border: 1.5px solid var(--border);
border-radius: 12px;
font-size: 15px;
font-family: inherit;
color: var(--ink);
background: var(--paper-sheet);
transition: border-color 0.2s;
outline: none}
.form-group input:focus,
.form-group textarea:focus{border-color: var(--brand);
box-shadow: 0 0 0 3px oklch(0.59 0.16 143 / 0.14)}
.form-group textarea{min-height: 120px;
resize: vertical}
.legal-content{max-width: 720px;
margin: 0 auto}
.legal-content h2{font-size: 23px;
font-weight: 700;
color: var(--ink);
margin: 40px 0 16px}
.legal-content h3{font-size: 19px;
font-weight: 600;
color: var(--ink);
margin: 28px 0 12px}
.legal-content p{font-size: 15px;
color: var(--ink2);
line-height: 1.7;
margin-bottom: 16px}
.legal-content ul{margin: 0 0 16px 20px;
list-style: disc}
.legal-content ul li{font-size: 15px;
color: var(--ink2);
line-height: 1.7;
margin-bottom: 8px}
.cta-banner{text-align: center;
padding: 100px 24px;
background: linear-gradient(135deg, var(--accent-tint) 0%, var(--paper-soft) 50%, var(--accent-tint) 100%);
border-top: 1px solid var(--border)}
.cta-banner .section-title{margin-bottom: 16px}
.cta-banner p{font-size: 16px;
color: var(--muted);
margin-bottom: 32px}
.cta-note{font-size: 13px;
color: var(--muted2);
margin-top: 16px}
.site-footer{background: var(--bg);
border-top: 1px solid var(--border);
padding: 64px 24px 32px}
.footer-container{max-width: var(--max-w);
margin: 0 auto}
.footer-grid{display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px}
.footer-logo{display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px}
.footer-logo span{font-size: 19px;
font-weight: 800;
color: var(--ink)}
.footer-logo em{color: var(--brand);
font-style: normal}
.footer-tagline{font-size: 15px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 20px}
.footer-social{display: flex;
gap: 12px}
.footer-social a{width: 36px;
height: 36px;
border-radius: 50%;
background: var(--paper-sheet);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
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){.footer-social a:hover{color: var(--brand);
border-color: var(--brand)}
}
.footer-col h4{font-size: 13px;
font-weight: 700;
color: var(--ink);
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.5px}
.footer-col a{display: block;
font-size: 15px;
color: var(--muted);
padding: 8px 0;
transition: color 0.2s}
@media (hover: hover) and (pointer: fine){.footer-col a:hover{color: var(--brand)}
}
.footer-bottom{padding-top: 24px;
border-top: 1px solid var(--border);
text-align: center}
.footer-bottom p{font-size: 13px;
color: var(--muted2)}
@media (max-width: 1024px){.hero-inner{gap: 40px}
.hero-title{font-size: 48px;
letter-spacing: -2px}
.hero-mockup{width: 320px}
.features-grid{grid-template-columns: repeat(2, 1fr)}
.section-title{font-size: 38px;
letter-spacing: -1px}
.showcase{gap: 48px}
.showcase h3{font-size: 30px}
.footer-grid{grid-template-columns: 1fr 1fr;
gap: 32px}
}
@media (max-width: 768px){.section{padding: 64px 20px}
.nav-burger{display: block}
.nav-links{position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #faf6ec !important;
background-color: #faf6ec !important;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
opacity: 0;
visibility: hidden;
transition:
transform 0.3s,
opacity 0.3s,
color 0.3s,
background 0.3s,
border-color 0.3s,
box-shadow 0.3s;
z-index: 999;
padding: 80px 20px 40px}
.nav-links.open{opacity: 1 !important;
visibility: visible !important;
background: #faf6ec !important;
background-color: #faf6ec !important}
.nav-links > a{font-size: 19px;
font-weight: 600}
.nav-actions{flex-direction: column;
gap: 12px;
margin-top: 16px}
.nav-btn-main,
.nav-btn-sec{font-size: 16px;
padding: 12px 32px}
.hero{padding: 100px 20px 64px;
min-height: auto}
.hero-inner{flex-direction: column;
text-align: center;
gap: 40px}
.hero-content{max-width: 100%}
.hero-title{font-size: 38px;
letter-spacing: -1.5px}
.hero-sub{font-size: 16px;
max-width: 100%;
margin: 0 auto 28px}
.hero-badge{margin: 0 auto 20px}
.hero-cta{justify-content: center;
flex-direction: column;
align-items: center}
.hero-stats{flex-direction: column;
gap: 16px}
.hero-stat-div{width: 80%;
height: 1px}
.hero-mockup{width: 100%;
max-width: 340px}
.features-grid{grid-template-columns: 1fr}
.showcase,
.showcase.reverse{flex-direction: column;
gap: 32px;
margin-bottom: 64px}
.showcase-visual{min-height: 240px;
padding: 24px}
.showcase h3{font-size: 23px}
.pricing-grid{grid-template-columns: 1fr;
gap: 16px}
.plan-featured{transform: none}
@media (hover: hover) and (pointer: fine){.plan-featured:hover{transform: translateY(-4px)}
}
.plan-badge{position: static;
transform: none;
display: inline-block;
margin-bottom: 12px}
.contact-grid{grid-template-columns: 1fr;
gap: 40px}
.site-footer{padding: 32px 20px 20px}
.footer-grid{grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 20px}
.footer-brand{text-align: center}
.footer-social{justify-content: center}
.footer-col{text-align: center}
.footer-col h4{margin-bottom: 8px}
.footer-bottom p{font-size: 12px}
.cta-banner{padding: 64px 20px}
.cta-banner .section-title{font-size: 30px}
}
@media (max-width: 480px){.hero-title{font-size: 30px;
letter-spacing: -1px}
.section-title{font-size: 30px}
.btn-xl{padding: 16px 28px;
font-size: 15px}
.hero-stat-val{font-size: 23px}
.plan-price{font-size: 38px}
.footer-grid{grid-template-columns: 1fr}
}
.masthead{max-width: var(--max-w);
margin: calc(72px + env(safe-area-inset-top, 0px)) auto 0;
padding: 24px 32px 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
flex-wrap: wrap;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
color: var(--ink-muted);
letter-spacing: 0.18em;
text-transform: uppercase;
border-bottom: 1px solid var(--border);
text-align: center}
.masthead span{padding: 0 16px;
display: inline-flex;
align-items: center;
position: relative}
.masthead span + span::before{content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent)}
.hero-editorial{max-width: var(--max-w);
margin: 0 auto;
padding: clamp(64px, 8vw, 104px) 24px clamp(72px, 10vw, 128px);
position: relative}
.hero-editorial-grid{display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
gap: clamp(40px, 7vw, 96px);
align-items: end}
.hero-editorial-main{position: relative}
.hero-editorial-eyebrow{font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-deep);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 16px}
.hero-editorial-eyebrow::after{content: "";
flex: 1;
max-width: 140px;
height: 1px;
background: linear-gradient(90deg, var(--border), transparent)}
.hero-editorial-title{font-family: var(--font-display);
font-size: clamp(52px, 8vw, 108px);
font-weight: 400;
line-height: 0.94;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 32px;
text-wrap: balance}
.hero-editorial-title em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.hero-editorial-lede{font-family: var(--font-body);
font-size: clamp(16.5px, 1.4vw, 19px);
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 40px;
max-width: 52ch;
font-weight: 400}
.hero-editorial-lede::first-letter{font-family: var(--font-display);
font-size: 4.4em;
line-height: 0.82;
float: left;
padding: 8px 16px 4px 0;
color: var(--accent);
font-weight: 400}
.hero-editorial-cta{display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
margin-bottom: 44px}
.hero-editorial-cta .hero-note{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
font-style: italic;
line-height: 1.5}
.hero-ticker{position: relative;
font-family: var(--font-display);
font-size: 16px;
font-style: italic;
color: var(--ink-soft);
padding: 24px 0 0 32px;
max-width: 52ch;
line-height: 1.55}
.hero-ticker::before{content: "";
position: absolute;
left: 0;
top: 32px;
width: 20px;
height: 1.5px;
background: var(--accent)}
.hero-ticker strong{color: var(--accent);
font-weight: 400;
font-style: normal;
font-variant-numeric: tabular-nums}
.hero-editorial-aside{position: relative;
padding-bottom: 16px}
.hero-editorial-receipt-wrap{position: relative;
transform: rotate(-2.4deg);
transform-origin: 50% 90%;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)}
@media (hover: hover) and (pointer: fine){.hero-editorial-receipt-wrap:hover{transform: rotate(-1deg) translateY(-6px)}
}
.receipt-hero{position: relative;
background: oklch(0.965 0.022 92);
color: oklch(0.22 0.02 90);
max-width: 320px;
margin: 0 auto;
padding-top: 16px;
box-shadow:
0 36px 64px oklch(0.22 0.02 110 / 0.14),
0 14px 32px oklch(0.22 0.02 110 / 0.08),
0 0 0 1px oklch(0.22 0.02 110 / 0.04);
background-image: linear-gradient(to bottom, oklch(0.965 0.022 92), oklch(0.94 0.022 88))}
.receipt-perforation{position: absolute;
top: 0;
left: 0;
right: 0;
height: 14px;
background: inherit;
background-image: inherit;
clip-path: polygon(
0 100%,
0 50%,
4% 100%,
8% 50%,
12% 100%,
16% 50%,
20% 100%,
24% 50%,
28% 100%,
32% 50%,
36% 100%,
40% 50%,
44% 100%,
48% 50%,
52% 100%,
56% 50%,
60% 100%,
64% 50%,
68% 100%,
72% 50%,
76% 100%,
80% 50%,
84% 100%,
88% 50%,
92% 100%,
96% 50%,
100% 100%
)}
.receipt-content{padding: 8px 24px 24px;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.55;
letter-spacing: 0.02em}
.receipt-header{text-align: center;
padding: 8px 0 16px}
.receipt-store{font-weight: 700;
font-size: 15px;
letter-spacing: 0.14em;
color: oklch(0.22 0.02 90)}
.receipt-meta{font-size: 12px;
letter-spacing: 0.12em;
color: oklch(0.45 0.02 90);
margin-top: 4px}
.receipt-rule{border-top: 1px dashed oklch(0.45 0.02 90 / 0.55);
margin: 8px 0}
.receipt-items{list-style: none;
margin: 8px 0;
padding: 0}
.receipt-item{position: relative;
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
gap: 12px}
.receipt-name{flex: 1;
text-transform: uppercase;
font-weight: 500;
color: oklch(0.28 0.02 90)}
.receipt-price{font-variant-numeric: tabular-nums;
font-weight: 500;
color: oklch(0.28 0.02 90);
flex-shrink: 0}
.receipt-item--marked{color: oklch(0.4 0.16 145)}
.receipt-item--marked .receipt-name,
.receipt-item--marked .receipt-price{color: oklch(0.4 0.16 145);
font-weight: 700}
.receipt-item--marked::before{content: "";
position: absolute;
inset: -3px -11px;
border: 2px solid oklch(0.55 0.2 145);
border-radius: 48% 52% 47% 53% / 58% 42% 58% 42%;
transform: rotate(-1.4deg);
opacity: 0.9;
z-index: 1;
pointer-events: none}
.receipt-item--marked::after{content: "";
position: absolute;
inset: -2px -10px;
border: 1.5px solid oklch(0.55 0.2 145);
border-radius: 52% 48% 53% 47% / 44% 56% 44% 56%;
transform: rotate(-0.4deg);
opacity: 0.3;
z-index: 1;
pointer-events: none}
.receipt-total{display: flex;
justify-content: space-between;
font-weight: 800;
font-size: 15px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 0 4px;
color: oklch(0.22 0.02 90)}
.receipt-total span:last-child{font-variant-numeric: tabular-nums}
.receipt-footer{text-align: center;
font-size: 12px;
letter-spacing: 0.22em;
color: oklch(0.45 0.02 90);
margin-top: 8px}
.receipt-annotation{margin: 16px auto 0;
max-width: 260px;
text-align: center;
transform: rotate(-1.2deg);
pointer-events: none}
.receipt-annotation em{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-style: italic;
font-size: 15px;
line-height: 1.35;
color: oklch(0.4 0.16 145);
display: inline-block;
letter-spacing: -0.01em}
.receipt-annotation em.receipt-annotation-text-mobile{display: none}
@media (hover: none), (pointer: coarse){.receipt-annotation em.receipt-annotation-text-desktop{display: none}
.receipt-annotation em.receipt-annotation-text-mobile{display: inline-block}
}
.receipt-annotation-mark{display: block;
color: oklch(0.55 0.2 145);
margin: 0 auto 2px;
overflow: visible}
@media (max-width: 900px){.hero-editorial-receipt-wrap{transform: rotate(-1.2deg)}
}
@media (max-width: 640px){.hero-editorial-receipt-wrap{transform: rotate(0)}
.receipt-hero{max-width: 300px}
.receipt-content{padding: 8px 24px 20px;
font-size: 13px}
}
.hero-editorial-caption{font-family: var(--font-display);
font-size: 15px;
font-style: italic;
color: var(--ink-muted);
text-align: right;
margin-top: 24px;
padding-right: 8px;
line-height: 1.55;
max-width: 300px;
margin-left: auto}
.hero-editorial-caption strong{color: var(--ink-soft);
font-weight: 400;
display: block;
margin-bottom: 8px}
.stats-rule{max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--border)}
.stats-rule-item{padding: 40px 28px 36px;
border-right: 1px solid var(--border);
text-align: center}
.stats-rule-item:last-child{border-right: none}
.stats-rule-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 16px}
.stats-rule-value{font-family: var(--font-display);
font-size: clamp(42px, 5.2vw, 68px);
color: var(--ink);
line-height: 0.94;
letter-spacing: -0.022em;
font-variant-numeric: tabular-nums}
.stats-rule-value sub{font-family: var(--font-body);
font-size: 0.26em;
color: var(--ink-muted);
vertical-align: baseline;
font-weight: 400;
margin-left: 8px;
letter-spacing: 0.02em;
text-transform: none}
.chapter{max-width: var(--max-w);
margin: 0 auto;
padding: clamp(88px, 12vw, 144px) 24px;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
gap: clamp(36px, 6vw, 80px);
align-items: start}
.chapter-head{position: sticky;
top: 104px}
.chapter-numeral{font-family: var(--font-display);
font-size: clamp(96px, 14vw, 180px);
line-height: 0.82;
color: var(--accent);
letter-spacing: -0.04em}
.chapter-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: 16px}
.chapter-body{min-width: 0}
.chapter-title{font-family: var(--font-display);
font-size: clamp(36px, 4.8vw, 60px);
font-weight: 400;
color: var(--ink);
line-height: 1.04;
letter-spacing: -0.018em;
margin: 0 0 24px;
text-wrap: balance}
.chapter-title em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.chapter-body > p{font-family: var(--font-body);
font-size: 16px;
line-height: 1.68;
color: var(--ink-soft);
max-width: 58ch;
margin-bottom: 20px}
.editorial-steps{list-style: none;
display: flex;
flex-direction: column;
gap: 0;
margin: 44px 0 0;
padding: 0}
.editorial-step{display: grid;
grid-template-columns: 88px 1fr;
gap: 32px;
align-items: baseline;
padding: 28px 0;
border-top: 1px solid var(--border)}
.editorial-step:last-child{border-bottom: 1px solid var(--border)}
.editorial-step-n{font-family: var(--font-display);
font-size: 46px;
color: var(--accent);
letter-spacing: -0.025em;
line-height: 1;
font-variant-numeric: tabular-nums}
.editorial-step-body h3{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink);
margin: 0 0 8px;
letter-spacing: -0.008em;
line-height: 1.16}
.editorial-step-body p{font-family: var(--font-body);
font-size: 15px;
line-height: 1.62;
color: var(--ink-soft);
margin: 0;
max-width: 58ch}
.pull{max-width: 960px;
margin: clamp(48px, 8vw, 96px) auto;
padding: clamp(48px, 6vw, 80px) 32px;
font-family: var(--font-display);
font-size: clamp(26px, 3.4vw, 46px);
line-height: 1.16;
letter-spacing: -0.014em;
color: var(--ink);
text-align: center;
font-style: italic;
position: relative;
text-wrap: balance;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border)}
.pull::before{content: "«";
display: block;
font-size: 1.8em;
color: var(--accent);
opacity: 0.5;
line-height: 0.5;
margin-bottom: 24px;
font-style: normal}
.pull::after{content: " »";
color: var(--accent);
opacity: 0.5;
font-style: normal}
.pull-attribution{display: block;
font-family: var(--font-body);
font-size: 13px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: 32px}
.calc-editorial{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(32px, 4vw, 52px);
max-width: 720px;
margin: 40px 0 0;
box-shadow: var(--shadow-md)}
.calc-editorial-label{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 24px;
display: block}
.calc-editorial-slider-row{display: flex;
align-items: center;
gap: 28px;
margin-bottom: 40px}
.calc-editorial-slider-row input[type="range"]{flex: 1;
-webkit-appearance: none;
appearance: none;
height: 3px;
background: var(--paper-deep);
border-radius: 2px;
outline: none;
cursor: pointer}
.calc-editorial-slider-row input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:
0 0 0 4px oklch(0.59 0.16 143 / 0.3),
var(--accent-glow)}
.calc-editorial-slider-row input[type="range"]:focus-visible::-moz-range-thumb{box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.3)}
.calc-editorial-slider-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
box-shadow: var(--accent-glow);
border: 4px solid var(--paper-sheet);
transition: transform 0.2s}
@media (hover: hover) and (pointer: fine){.calc-editorial-slider-row input[type="range"]::-webkit-slider-thumb:hover{transform: scale(1.1)}
}
.calc-editorial-slider-row input[type="range"]::-moz-range-thumb{width: 26px;
height: 26px;
border-radius: 50%;
background: var(--accent);
cursor: pointer;
border: 4px solid var(--paper-sheet)}
.calc-editorial-current{font-family: var(--font-display);
font-size: 38px;
color: var(--ink);
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums;
min-width: 140px;
text-align: right;
line-height: 1}
.calc-editorial-results{display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
padding: 32px 0 8px;
border-top: 1px solid var(--border)}
.calc-editorial-result-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: 8px}
.calc-editorial-result-value{font-family: var(--font-display);
font-size: clamp(40px, 5vw, 64px);
color: var(--ink);
letter-spacing: -0.022em;
line-height: 1;
font-variant-numeric: tabular-nums}
.calc-editorial-result-value.hl{color: var(--accent)}
.calc-editorial-cta{margin-top: 36px;
padding-top: 32px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap}
.calc-editorial-cta .hero-note{font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--ink-muted);
max-width: 40ch;
line-height: 1.5}
.receipts{display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 44px);
margin: 44px 0 24px}
.receipt{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 3px;
padding: 36px 32px 40px;
box-shadow: var(--shadow-md);
position: relative;
font-family: var(--font-body);
font-variant-numeric: tabular-nums}
.receipt::before,
.receipt::after{content: "";
position: absolute;
left: 0;
right: 0;
height: 10px;
background-image: radial-gradient(circle at 7px 100%, transparent 5px, var(--paper-sheet) 5.5px);
background-size: 14px 10px;
background-repeat: repeat-x}
.receipt::before{top: -9px;
transform: rotate(180deg)}
.receipt::after{bottom: -9px}
.receipt.receipt-before{transform: rotate(-1deg)}
.receipt.receipt-after{transform: rotate(0.8deg)}
.receipt-head{text-align: center;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px dashed var(--border);
font-family: var(--font-display);
font-size: 15px;
letter-spacing: 0.04em;
color: var(--ink)}
.receipt-head small{display: block;
font-family: var(--font-body);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: 4px;
font-weight: 600}
.receipt.receipt-before .receipt-head small{color: var(--danger)}
.receipt.receipt-after .receipt-head small{color: var(--accent-deep)}
.receipt-line{display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
color: var(--ink-soft);
padding: 8px 0;
line-height: 1.4}
.receipt-line em{font-style: italic;
color: var(--ink-muted);
font-size: 12px;
font-weight: 500}
.receipt-line span:last-child{white-space: nowrap}
.receipt-total{display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 16px;
padding-top: 16px;
border-top: 1.5px solid var(--ink);
font-family: var(--font-display);
font-size: 23px;
letter-spacing: -0.012em;
color: var(--ink)}
.receipt.receipt-before .receipt-total{color: var(--danger)}
.receipt.receipt-before .receipt-total span:last-child{text-decoration: line-through;
text-decoration-thickness: 2px;
text-decoration-color: oklch(0.44 0.14 25 / 0.55)}
.receipt.receipt-after .receipt-total{color: var(--accent)}
.receipts-savings{font-family: var(--font-display);
font-size: clamp(26px, 3.2vw, 40px);
color: var(--ink);
letter-spacing: -0.01em;
text-align: center;
margin: 48px 0 0;
font-style: italic;
line-height: 1.3}
.receipts-savings strong{color: var(--accent);
font-weight: 400;
font-style: normal;
font-variant-numeric: tabular-nums}
.toc{list-style: none;
padding: 0;
margin: 44px 0 0}
.toc-entry{display: grid;
grid-template-columns: auto 1fr auto;
gap: 36px;
align-items: baseline;
padding: 32px 0;
border-top: 1px solid var(--border);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
position: relative}
.toc-entry:last-child{border-bottom: 1px solid var(--border)}
@media (hover: hover) and (pointer: fine){.toc-entry:hover{transform: translateX(16px)}
}
@media (hover: hover) and (pointer: fine){.toc-entry:hover .toc-num{color: var(--accent)}
}
@media (hover: hover) and (pointer: fine){.toc-entry:hover .toc-title{color: var(--accent-deep)}
}
.toc-num{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink-muted);
letter-spacing: 0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
transition: color 0.3s}
.toc-content{display: flex;
flex-direction: column;
gap: 8px;
min-width: 0}
.toc-title{font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.012em;
line-height: 1.14;
transition: color 0.3s}
.toc-desc{font-family: var(--font-body);
font-size: 15px;
line-height: 1.56;
color: var(--ink-soft);
max-width: 58ch}
.toc-page{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-fade);
white-space: nowrap}
.sources{max-width: var(--max-w);
margin: 0 auto;
padding: clamp(64px, 9vw, 104px) 24px clamp(64px, 9vw, 104px)}
.sources-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 24px}
.sources-heading{font-family: var(--font-display);
font-size: clamp(32px, 4.4vw, 52px);
font-weight: 400;
color: var(--ink);
line-height: 1.06;
letter-spacing: -0.018em;
margin: 0 0 48px;
max-width: 24ch;
text-wrap: balance}
.sources-heading em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.sources-list{display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border);
border-left: 1px solid var(--border)}
.source{padding: 36px 28px;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
transition: background 0.3s}
@media (hover: hover) and (pointer: fine){.source:hover{background: var(--accent-tint)}
}
.source-name{font-family: var(--font-display);
font-size: 38px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.015em;
margin-bottom: 8px;
line-height: 1.05}
.source-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
letter-spacing: 0.04em;
line-height: 1.55}
.sources-note{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
margin-top: 28px;
line-height: 1.7;
font-style: italic;
max-width: 72ch}
.letters{background: var(--paper-soft);
padding: clamp(88px, 12vw, 144px) 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border)}
.letters-inner{max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px}
.letters-head{margin-bottom: 56px}
.letters-stack{display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 28px}
.letter{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 14px;
padding: 44px 36px 32px;
box-shadow: var(--shadow);
position: relative;
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s}
@media (hover: hover) and (pointer: fine){.letter:hover{transform: translateY(-5px);
box-shadow: var(--shadow-md)}
}
.letter::before{content: "«";
position: absolute;
top: 12px;
left: 28px;
font-family: var(--font-display);
font-size: 88px;
line-height: 1;
color: var(--accent);
opacity: 0.22;
pointer-events: none}
.letter p{font-family: var(--font-display);
font-size: 19px;
line-height: 1.44;
font-style: italic;
color: var(--ink);
margin: 0 0 24px;
padding-top: 16px;
text-wrap: pretty;
position: relative;
z-index: 1}
.letter-signature{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
padding-top: 16px;
border-top: 1px solid var(--border)}
.letter-signature strong{display: block;
color: var(--ink);
font-weight: 600;
margin-bottom: 2px;
font-size: 15px}
.letter-signature em{font-style: italic;
color: var(--ink-muted);
font-size: 12px}
.back-cover{max-width: var(--max-w);
margin: 0 auto;
padding: clamp(104px, 14vw, 176px) 24px clamp(80px, 10vw, 128px);
text-align: center;
position: relative}
.back-cover-rule{width: 72px;
height: 2px;
background: var(--accent);
margin: 0 auto 48px}
.back-cover-headline{font-family: var(--font-display);
font-size: clamp(42px, 6.2vw, 80px);
font-weight: 400;
color: var(--ink);
line-height: 1;
letter-spacing: -0.024em;
margin: 0 auto 32px;
max-width: 22ch;
text-wrap: balance}
.back-cover-headline em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.back-cover-sub{font-family: var(--font-body);
font-size: 19px;
color: var(--ink-soft);
line-height: 1.62;
max-width: 54ch;
margin: 0 auto 48px}
.back-cover .btn-main{padding: 16px 40px;
font-size: 16px}
.back-cover-note{font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--ink-muted);
margin-top: 32px;
letter-spacing: 0.02em}
.tarifs-hero{max-width: var(--max-w);
margin: 0 auto;
padding: clamp(64px, 9vw, 112px) 24px clamp(48px, 7vw, 88px)}
.tarifs-hero-inner{max-width: 760px}
.tarifs-hero-eyebrow{font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-deep);
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 16px}
.tarifs-hero-eyebrow::after{content: "";
flex: 1;
max-width: 140px;
height: 1px;
background: linear-gradient(90deg, var(--border), transparent)}
.tarifs-hero-title{font-family: var(--font-display);
font-size: clamp(40px, 6vw, 76px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.024em;
color: var(--ink);
margin: 0 0 28px;
text-wrap: balance}
.tarifs-hero-title em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.tarifs-hero-sub{font-family: var(--font-body);
font-size: clamp(16.5px, 1.4vw, 19px);
line-height: 1.62;
color: var(--ink-soft);
max-width: 56ch}
.editorial-prologue{background: var(--paper-soft);
padding: clamp(56px, 8vw, 96px) 24px;
margin: 0}
.editorial-prologue-inner{max-width: 720px;
margin: 0 auto}
.editorial-prologue-rule{width: 48px;
height: 1px;
background: color-mix(in oklch, var(--brand) 60%, transparent);
margin: 0 auto 28px}
.editorial-prologue-rule:last-child{margin: 32px auto 0}
.editorial-prologue-eyebrow{font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand-dark, var(--brand));
text-align: center;
margin-bottom: 16px;
font-style: italic}
.editorial-prologue-title{font-family: var(--font-display);
font-weight: 400;
font-size: clamp(30px, 4.2vw, 46px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--ink);
text-align: center;
margin: 0 0 36px;
text-wrap: balance}
.editorial-prologue-title em{color: var(--brand-dark, var(--brand));
font-style: italic;
font-family: var(--font-display);
font-weight: 400}
.editorial-prologue-text{font-family: var(--font-body);
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.78;
color: var(--ink);
margin: 0 0 24px}
.editorial-prologue-dropcap{float: left;
font-family: var(--font-display);
font-weight: 400;
font-size: 4.4em;
line-height: 0.78;
margin: 0.04em 0.08em 0 0;
color: var(--brand-dark, var(--brand));
user-select: none}
.editorial-prologue-text-start{font-variant-caps: small-caps;
letter-spacing: 0.04em;
font-weight: 500}
@supports not (font-variant-caps: small-caps){.editorial-prologue-text-start{text-transform: uppercase;
font-size: 0.92em;
letter-spacing: 0.04em}
}
.editorial-prologue-signature{font-family: var(--font-body);
font-style: italic;
font-size: clamp(14px, 1.2vw, 16px);
line-height: 1.65;
color: var(--ink-soft);
text-align: center;
margin: 32px auto 0;
max-width: 56ch;
clear: both}
.editorial-prologue-signature em{font-style: italic;
color: var(--brand-dark, var(--brand));
font-weight: 500}
.tarifs-plans{max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px clamp(56px, 8vw, 96px)}
.tarifs-toggle{border: none;
margin: 0 auto clamp(28px, 4vw, 48px);
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px}
.tarifs-toggle-legend{font-family: var(--font-display);
font-size: clamp(18px, 2vw, 22px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.012em;
text-align: center;
margin: 0;
padding: 0;
float: none;
width: auto}
.tarifs-toggle-radio{position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -2px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0}
.tarifs-toggle-pill{position: relative;
display: inline-flex;
align-items: stretch;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 980px;
padding: 4px;
gap: 0}
.tarifs-toggle-pill::before{content: "";
position: absolute;
top: 4px;
left: 4px;
bottom: 4px;
width: calc(50% - 4px);
background: var(--paper-sheet);
border: 1px solid color-mix(in oklch, var(--brand) 35%, var(--border));
border-radius: 980px;
box-shadow: 0 1px 3px color-mix(in oklch, var(--ink) 8%, transparent);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1}
.tarifs-toggle-pill:has(#tarif-period-annuel:checked)::before{transform: translateX(100%)}
.tarifs-toggle-option{position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 24px;
min-width: 130px;
min-height: 40px;
cursor: pointer;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: var(--ink-muted);
letter-spacing: 0;
text-align: center;
border-radius: 980px;
transition: color 0.25s;
user-select: none}
.tarifs-toggle-radio:checked + .tarifs-toggle-option{color: var(--ink)}
.tarifs-toggle-radio:focus-visible + .tarifs-toggle-option{outline: 2px solid var(--brand);
outline-offset: 4px}
.tarifs-toggle-save{display: inline-block;
padding: 2px 8px;
background: color-mix(in oklch, var(--brand) 15%, transparent);
color: var(--brand-dark, var(--brand));
border-radius: 980px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
font-variant-numeric: tabular-nums}
.tarifs-toggle-radio:checked + .tarifs-toggle-option .tarifs-toggle-save{background: var(--brand);
color: var(--cream-fixed, var(--paper))}
.tarifs-plans-inner{display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 2.4vw, 32px);
align-items: stretch;
max-width: 880px;
margin: 0 auto}
@media (max-width: 768px){.tarifs-plans-inner{grid-template-columns: 1fr;
max-width: 480px}
}
.tarif-badge--save{background: var(--accent);
color: var(--cream-fixed)}
.tarif-badge--neutral{background: var(--ink-soft);
color: var(--cream-fixed)}
.tarif-name-suffix{display: block;
font-size: 0.7em;
font-weight: 400;
color: var(--ink-soft);
margin-top: 2px}
.tarifs-special{max-width: var(--max-w);
margin: clamp(40px, 6vw, 72px) auto 0;
padding: 0 24px}
.tarifs-special-rule{width: 64px;
height: 1px;
background: color-mix(in oklch, var(--brand) 50%, transparent);
margin: 0 auto 24px}
.tarifs-special-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark, var(--brand));
text-align: center;
margin-bottom: 16px}
.tarifs-special-grid{display: grid;
grid-template-columns: 1.6fr 1fr;
gap: clamp(28px, 4vw, 56px);
align-items: start;
background: var(--paper-sheet);
border: 1px solid color-mix(in oklch, var(--brand) 22%, var(--border));
border-radius: var(--radius-xl);
padding: clamp(32px, 4vw, 56px);
box-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 4%, transparent)}
@media (max-width: 768px){.tarifs-special-grid{grid-template-columns: 1fr;
gap: 28px;
padding: 28px 24px}
}
.tarifs-special-text{}
.tarifs-special-title{font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 16px;
text-wrap: balance}
.tarifs-special-title em{color: var(--brand-dark, var(--brand));
font-style: italic;
font-family: var(--font-display);
font-weight: 400}
.tarifs-special-lede{font-family: var(--font-body);
font-size: clamp(15px, 1.6vw, 17px);
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 24px;
max-width: 56ch}
.tarifs-special-features{list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 24px}
@media (max-width: 480px){.tarifs-special-features{grid-template-columns: 1fr}
}
.tarifs-special-features li{font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--ink);
padding-left: 24px;
position: relative}
.tarifs-special-features li::before{content: "";
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
background: var(--brand);
border-radius: 50%}
.tarifs-special-aside{display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 24px;
background: var(--accent-tint);
border-radius: var(--radius-lg, 14px);
position: relative}
@media (max-width: 768px){.tarifs-special-aside{align-items: stretch;
padding: 24px}
}
.tarifs-special-rank{position: absolute;
top: 14px;
right: 18px;
font-family: var(--font-display);
font-size: 30px;
color: color-mix(in oklch, var(--brand) 35%, var(--ink-fade));
letter-spacing: -0.02em;
line-height: 1}
.tarifs-special-price{font-family: var(--font-display);
font-weight: 400;
font-size: clamp(36px, 4vw, 48px);
color: var(--ink);
letter-spacing: -0.022em;
line-height: 0.95;
font-variant-numeric: tabular-nums;
margin-top: 8px}
.tarifs-special-price span{font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
color: var(--ink-muted);
margin-left: 4px;
letter-spacing: 0}
.tarifs-special-meta{font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
color: var(--ink-muted);
margin-bottom: 8px}
.tarifs-special-login{font-size: 13px;
color: var(--ink-soft);
text-decoration: underline;
text-underline-offset: 3px;
margin-top: 8px;
align-self: center}
@media (max-width: 768px){.tarifs-special-login{align-self: flex-start}
}
.tarif{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(32px, 3vw, 44px) clamp(28px, 2.4vw, 36px);
display: flex;
flex-direction: column;
position: relative;
transition:
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.35s,
border-color 0.35s}
@media (hover: hover) and (pointer: fine){.tarif:hover{transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: oklch(0.59 0.16 143 / 0.22)}
}
.tarif-featured{border: 1.5px solid var(--accent)}
.tarif-badge{position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
background: var(--paper);
color: var(--brand-dark, var(--accent));
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
padding: 0 8px;
white-space: nowrap;
letter-spacing: 0.18em;
text-transform: uppercase}
.tarif-head{display: flex;
align-items: baseline;
gap: 16px;
padding-bottom: 16px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border)}
.tarif-rank{font-family: var(--font-display);
font-size: 30px;
color: var(--accent);
letter-spacing: -0.02em;
line-height: 1}
.tarif-name{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.012em}
.tarif-price-row{display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px}
.tarif-price{font-family: var(--font-display);
font-size: clamp(48px, 5.2vw, 64px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.022em;
line-height: 0.95;
font-variant-numeric: tabular-nums}
.tarif-price span{font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
color: var(--ink-muted);
margin-left: 4px}
.tarif-trial{font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-deep)}
.tarif-pitch{font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 24px;
font-style: italic}
.tarif-features{list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 0}
.tarif-features li{font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
padding: 12px 0 12px 24px;
border-bottom: 1px solid var(--border2);
line-height: 1.5;
position: relative}
.tarif-features li::before{content: "";
position: absolute;
left: 0;
top: 17px;
width: 14px;
height: 6px;
border-left: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent);
transform: rotate(-45deg)}
.tarif-feature--addon{margin-top: 8px;
padding-top: 16px !important;
border-top: 1px dashed color-mix(in oklch, var(--brand) 30%, var(--border));
color: var(--ink-soft) !important}
.tarif-feature--addon::before{border-color: var(--brand-dark) !important;
opacity: 0.7}
.tarif-feature--addon strong{color: var(--brand-dark)}
.tarif-features li:last-child{border-bottom: none}
.tarif-features-locked{opacity: 0.42;
margin-bottom: 28px}
.tarif-features-locked li::before{border-color: var(--ink-fade);
content: "";
border: none;
width: 12px;
height: 1.5px;
background: var(--ink-fade);
top: 21px;
transform: none}
.tarif > .btn-main,
.tarif > .btn-sec{margin-top: auto}
.sticky-cta-mobile{display: none;
position: fixed;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left: 20px;
right: 20px;
padding: 16px 24px;
border-radius: 980px;
background: var(--accent);
color: var(--cream-fixed);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
text-align: center;
text-decoration: none;
box-shadow:
0 14px 36px oklch(0.22 0.02 110 / 0.22),
0 4px 12px oklch(0.22 0.02 110 / 0.14);
z-index: 90;
letter-spacing: 0.01em}
@media (hover: hover) and (pointer: fine){.sticky-cta-mobile:hover{background: var(--accent-deep)}
}
@media (max-width: 1024px){.hero-editorial-grid{gap: 48px}
.hero-editorial-title{font-size: clamp(44px, 7vw, 72px)}
.chapter{grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
gap: 48px}
.chapter-numeral{font-size: clamp(80px, 10vw, 120px)}
.sources-list{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 900px){.masthead{font-size: 12px;
padding: 16px 20px;
gap: 8px 0;
margin-top: calc(64px + env(safe-area-inset-top, 0px));
flex-direction: column;
letter-spacing: 0.16em}
.masthead span{padding: 0}
.masthead span + span::before{display: none}
.masthead span + span{color: var(--accent-deep);
font-weight: 600}
.hero-editorial{padding: 32px 24px 48px}
.hero-editorial-grid{grid-template-columns: 1fr;
gap: 40px}
.hero-editorial-eyebrow{margin-bottom: 16px;
font-size: 12px}
.hero-editorial-eyebrow::after{display: none}
.hero-editorial-title{font-size: clamp(36px, 10vw, 52px);
line-height: 0.98;
margin-bottom: 20px}
.hero-editorial-lede{max-width: 100%;
font-size: 16px;
margin-bottom: 28px;
line-height: 1.62}
.hero-editorial-lede::first-letter{font-size: 3.6em;
padding: 8px 12px 2px 0}
.hero-editorial-cta{gap: 16px 16px;
margin-bottom: 32px}
.hero-editorial-cta .btn-main.btn-xl{padding: 16px 28px;
font-size: 15px;
width: auto}
.hero-editorial-cta .hero-note{font-size: 13px;
line-height: 1.5}
.hero-ticker{padding: 20px 0 0 24px;
font-size: 15px}
.hero-ticker::before{top: 30px;
width: 16px}
.hero-editorial-aside{max-width: 320px;
margin: 0 auto}
.hero-editorial-caption{max-width: 280px;
font-size: 13px}
.stats-rule{grid-template-columns: repeat(3, 1fr);
padding: 0 12px}
.stats-rule-item{border-right: 1px solid var(--border);
border-bottom: none;
padding: 20px 8px}
.stats-rule-item:last-child{border-right: none}
.stats-rule-eyebrow{font-size: 12px;
letter-spacing: 0.12em;
margin-bottom: 8px}
.stats-rule-value{font-size: 30px}
.stats-rule-value sub{font-size: 0.3em;
margin-left: 4px;
display: block;
margin-top: 4px}
.chapter{grid-template-columns: 1fr;
gap: 32px;
padding: 72px 20px}
.chapter-head{position: static;
display: flex;
align-items: baseline;
gap: 20px}
.chapter-numeral{font-size: 72px}
.chapter-label{margin-top: 0}
.chapter-title{font-size: clamp(30px, 7vw, 44px)}
.editorial-step{grid-template-columns: 54px 1fr;
gap: 20px}
.editorial-step-n{font-size: 38px}
.pull{font-size: clamp(22px, 5.5vw, 32px);
padding: 48px 24px;
margin: 32px 20px}
.receipts{grid-template-columns: 1fr}
.receipt.receipt-before,
.receipt.receipt-after{transform: none}
.toc-entry{grid-template-columns: auto 1fr;
gap: 20px;
padding: 24px 0}
.toc-page{display: none}
.toc-title{font-size: 23px}
.sources{padding: 64px 20px}
.sources-list{grid-template-columns: 1fr}
.source{padding: 28px 24px}
.source:last-child{border-bottom: none}
.letters-inner{padding: 0 20px}
.letters-stack{grid-template-columns: 1fr}
.back-cover{padding: 88px 20px 72px}
}
@media (max-width: 480px){.masthead{font-size: 12px;
padding: 16px 20px}
.hero-editorial-title{font-size: clamp(38px, 11vw, 52px)}
.calc-editorial-slider-row{flex-direction: column;
align-items: stretch;
gap: 20px}
.calc-editorial-current{text-align: center}
.calc-editorial-results{grid-template-columns: 1fr;
gap: 20px}
.back-cover{padding-bottom: 120px}
}
@media (max-width: 1024px){.tarifs-plans-inner{grid-template-columns: 1fr;
max-width: 560px;
margin: 0 auto;
gap: 24px}
}
@media (max-width: 900px){.tarifs-hero{padding: 56px 20px 48px}
.tarifs-plans{padding: 0 20px 56px}
}
.back-cover-actions{display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap}
.back-cover-actions .btn-main,
.back-cover-actions .btn-sec{padding: 16px 36px;
font-size: 16px}
.contact-editorial{max-width: var(--max-w);
margin: 0 auto;
padding: clamp(48px, 7vw, 88px) 24px clamp(72px, 10vw, 112px)}
.contact-editorial-grid{display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(40px, 6vw, 80px);
align-items: start}
.contact-editorial-info{padding-top: 12px}
.contact-editorial-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-deep);
margin-bottom: 24px}
.contact-editorial-heading{font-family: var(--font-display);
font-size: clamp(34px, 4.4vw, 56px);
font-weight: 400;
color: var(--ink);
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0 0 24px;
text-wrap: balance}
.contact-editorial-heading em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.contact-editorial-intro{font-family: var(--font-body);
font-size: 16px;
line-height: 1.64;
color: var(--ink-soft);
margin: 0 0 36px;
max-width: 50ch}
.contact-editorial-list{list-style: none;
padding: 0;
margin: 0}
.contact-editorial-item{padding: 24px 0;
border-top: 1px solid var(--border);
display: grid;
grid-template-columns: 140px 1fr;
gap: 24px;
align-items: baseline}
.contact-editorial-item:last-child{border-bottom: 1px solid var(--border)}
.contact-editorial-item-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: 4px}
.contact-editorial-item-value{font-family: var(--font-display);
font-size: 19px;
color: var(--ink);
letter-spacing: -0.008em;
line-height: 1.25}
.contact-editorial-item-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin-top: 8px;
font-style: italic;
line-height: 1.5;
grid-column: 2}
.contact-editorial-form-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(36px, 4vw, 56px);
box-shadow: var(--shadow-md)}
.contact-editorial-form-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-deep);
margin-bottom: 16px}
.contact-editorial-form-title{font-family: var(--font-display);
font-size: clamp(26px, 2.8vw, 34px);
font-weight: 400;
color: var(--ink);
margin: 0 0 28px;
letter-spacing: -0.012em;
line-height: 1.1}
.contact-editorial-form-title em{color: var(--accent);
font-style: italic;
font-family: var(--font-display)}
.contact-editorial-form .form-group{margin-bottom: 24px}
.contact-editorial-form label{font-family: var(--font-body);
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px}
.contact-editorial-form input,
.contact-editorial-form textarea,
.contact-editorial-form select{width: 100%;
font-family: var(--font-body);
font-size: 15px;
padding: 16px 16px;
border: 1.5px solid var(--border);
border-radius: 12px;
background: var(--paper);
color: var(--ink);
transition:
border-color 0.2s,
box-shadow 0.2s}
.contact-editorial-form input:focus,
.contact-editorial-form textarea:focus,
.contact-editorial-form select:focus{outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.16)}
.contact-editorial-form textarea{min-height: 140px;
resize: vertical;
line-height: 1.55}
.contact-editorial-form .btn-main{margin-top: 8px;
padding: 16px 32px}
@media (max-width: 1024px){.contact-editorial-grid{grid-template-columns: 1fr}
}
@media (max-width: 900px){.contact-editorial{padding: 40px 20px 64px}
.contact-editorial-item{grid-template-columns: 1fr;
gap: 8px}
.contact-editorial-item-meta{grid-column: 1}
}
.chapter .faq-list{max-width: none;
margin: 36px 0 0}
.chapter .faq-item{border-top: 1px solid var(--border);
border-bottom: none}
.chapter .faq-item:last-child{border-bottom: 1px solid var(--border)}
.chapter .faq-q{font-family: var(--font-display);
font-size: clamp(19px, 2vw, 24px);
font-weight: 400;
color: var(--ink);
padding: 24px 0;
letter-spacing: -0.01em}
.chapter .faq-a{font-family: var(--font-body);
font-size: 15px;
line-height: 1.65;
color: var(--ink-soft)}
.chapter .faq-item.open .faq-a{padding-bottom: 24px}
.comparatif-table-wrap{margin: 28px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
border: 1px solid var(--border)}
.comparatif-table{width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 15px;
background: var(--paper-sheet, #fefdfa);
min-width: 600px}
.comparatif-table th,
.comparatif-table td{padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top}
.comparatif-table thead th{background: var(--paper-soft, #f3eee0);
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
color: var(--ink);
letter-spacing: 0.02em}
.comparatif-table tbody tr:last-child td{border-bottom: none}
.comparatif-table tbody td:first-child{font-weight: 600;
color: var(--ink);
background: var(--paper-soft, #f3eee0)}
.comparatif-table .td-yes{color: var(--brand, #4a9e46);
font-weight: 500}
.comparatif-table .td-no{color: var(--ink-muted, #998);
font-weight: 400}
.comparatif-table .comparatif-self{background: color-mix(in oklch, var(--brand, #4a9e46) 8%, transparent)}
.comparatif-table thead .comparatif-self{background: var(--brand, #4a9e46);
color: var(--cream-fixed, #fefdfa)}
.comparatif-table tbody .comparatif-self{color: var(--brand-dark, #2f6a2c);
font-weight: 600}
.chapter-fineprint{margin-top: 16px;
font-size: 13px;
color: var(--ink-soft);
font-style: italic}
.chapter-link{text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
color: var(--ink, var(--accent-deep))}
@media (hover: hover) and (pointer: fine){.chapter-link:hover{text-decoration-thickness: 2px;
color: var(--brand, var(--accent))}
}
.tarifs-etudiant{padding: 32px 24px;
max-width: 760px;
margin: 0 auto;
text-align: center}
.tarifs-etudiant-inner p{font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0}
.tarifs-etudiant-inner strong{color: var(--ink);
font-weight: 600}
.tarifs-etudiant-inner a{display: block;
margin-top: 8px;
color: var(--brand-dark, var(--brand));
font-weight: 600;
text-decoration: none}
@media (hover: hover) and (pointer: fine){.tarifs-etudiant-inner a:hover{text-decoration: underline}
}
.invite-page{min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background: var(--paper-soft, #faf8f3)}
.invite-card{max-width: 520px;
width: 100%;
background: var(--paper, #fff);
border: 1px solid var(--border, #d4d2cb);
border-radius: 16px;
padding: 36px 32px;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.05)}
.invite-eyebrow{font-family: var(--font-display, "Young Serif", serif);
font-size: 12px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--brand-dark, #4a9e46);
font-weight: 700;
margin-bottom: 8px}
.invite-title{font-family: var(--font-display, "Young Serif", serif);
font-size: 23px;
font-weight: 700;
margin: 0 0 8px 0;
line-height: 1.25;
color: var(--ink, #1a1a18)}
.invite-title em{font-style: italic;
color: var(--brand-dark, #4a9e46)}
.invite-sub{font-size: 15px;
color: var(--muted, #5d5b56);
margin: 0 0 20px 0}
.invite-intro{font-size: 15px;
line-height: 1.65;
color: var(--ink2, #2e2e26);
margin: 0 0 16px 0}
.invite-form{display: flex;
flex-direction: column;
gap: 16px}
.invite-field{display: flex;
flex-direction: column;
gap: 8px}
.invite-field label{font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ink2, #2e2e26);
font-weight: 700}
.invite-field input{font-family: inherit;
font-size: 15px;
padding: 12px 16px;
border: 1px solid var(--border, #d4d2cb);
border-radius: 10px;
background: var(--paper, #fff);
color: var(--ink, #1a1a18);
min-height: 48px}
.invite-field input:focus{outline: none;
border-color: var(--brand-dark, #4a9e46);
box-shadow: 0 0 0 3px rgba(74, 158, 70, 0.18)}
.invite-hint{font-size: 12px;
color: var(--muted, #5d5b56);
margin: 4px 0 0 0}
.invite-btn{background: var(--brand-dark, #4a9e46);
color: var(--paper, #fff);
border: none;
font-family: inherit;
font-size: 15px;
font-weight: 700;
padding: 16px 24px;
border-radius: 10px;
cursor: pointer;
min-height: 48px;
transition:
background 0.12s,
transform 0.12s}
@media (hover: hover) and (pointer: fine){.invite-btn:hover{background: #3d8639;
transform: translateY(-1px)}
}
.invite-btn:active{transform: translateY(0)}
.invite-fineprint{font-size: 12px;
color: var(--muted, #8a8780);
margin-top: 24px;
line-height: 1.6;
text-align: center}
.invite-error{background: #fef2f0;
border: 1px solid #f5b3a8;
color: #8a3622;
padding: 8px 16px;
border-radius: 8px;
font-size: 13px}
.invite-card-merci,
.invite-card-expire{text-align: center}
.tarifs-special-bundle{margin-top: 16px;
padding: 12px 16px;
background: var(--paper-soft, #faf8f3);
border: 1px solid var(--border, #d4d2cb);
border-radius: 10px;
font-size: 13px;
line-height: 1.55;
color: var(--ink2, #2e2e26)}
.tarifs-special-bundle strong{color: var(--brand-dark, #4a9e46);
font-weight: 700}
.home-hero{max-width: 1180px;
margin: 0 auto;
padding: 56px 24px 40px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: center}
.home-hero-title{font-family: var(--font-display, "Young Serif", serif);
font-size: clamp(36px, 5.5vw, 56px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.012em;
color: var(--ink, #1a1a18);
margin: 0 0 24px 0}
.home-hero-title em{font-style: italic;
color: var(--brand-dark, #4a9e46)}
.home-hero-lede{font-size: 16px;
line-height: 1.7;
color: var(--ink2, #2e2e26);
margin: 0 0 32px 0;
max-width: 520px}
.home-hero-cta{display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start}
.home-hero-cta-note{font-size: 13px;
color: var(--muted, #5d5b56)}
.home-hero-mockup .mockup-card{background: var(--paper, #fff);
border: 1px solid var(--border, #d4d2cb);
border-radius: 16px;
padding: 24px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06)}
@media (max-width: 900px){.home-hero{grid-template-columns: 1fr;
gap: 36px;
padding: 40px 20px 24px}
.home-hero-mockup{order: -1;
max-width: 440px;
margin: 0 auto}
}
.home-chapters{background: var(--paper-soft, #faf8f3);
padding: 72px 24px}
.home-chapters-inner{max-width: 760px;
margin: 0 auto}
.home-chapter{display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 36px 0;
border-bottom: 1px solid var(--border2, #e6e4dc)}
.home-chapter:last-of-type{border-bottom: none}
.home-chapter-numeral{font-family: var(--font-display, "Young Serif", serif);
font-size: 38px;
color: var(--brand-dark, #4a9e46);
line-height: 1;
letter-spacing: 0.04em}
.home-chapter-title{font-family: var(--font-display, "Young Serif", serif);
font-size: clamp(22px, 2.6vw, 28px);
font-weight: 400;
color: var(--ink, #1a1a18);
line-height: 1.25;
letter-spacing: -0.008em;
margin: 0 0 16px 0}
.home-chapter p{font-size: 16px;
line-height: 1.7;
color: var(--ink2, #2e2e26);
margin: 0}
.home-chapters-link{margin: 32px 0 0 0;
text-align: center}
.home-chapters-link a{font-size: 15px;
font-weight: 600;
color: var(--brand-dark, #4a9e46);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px}
@media (hover: hover) and (pointer: fine){.home-chapters-link a:hover{color: var(--ink, #1a1a18)}
}
@media (max-width: 768px){.home-chapter{grid-template-columns: 1fr;
gap: 8px;
padding: 28px 0}
.home-chapter-numeral{font-size: 30px}
}
.home-pricing{padding: 72px 24px}
.home-pricing-inner{max-width: 880px;
margin: 0 auto;
text-align: center}
.home-pricing-title{font-family: var(--font-display, "Young Serif", serif);
font-size: clamp(28px, 3.6vw, 38px);
font-weight: 400;
line-height: 1.15;
color: var(--ink, #1a1a18);
margin: 0 0 12px 0;
letter-spacing: -0.01em}
.home-pricing-title em{font-style: italic;
color: var(--brand-dark, #4a9e46)}
.home-pricing-sub{font-size: 15px;
color: var(--muted, #5d5b56);
margin: 0 0 36px 0}
.home-pricing-grid{display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
text-align: left;
margin-bottom: 28px}
.home-plan{position: relative;
background: var(--paper, #fff);
border: 1px solid var(--border, #d4d2cb);
border-radius: 14px;
padding: 28px 24px}
.home-plan--featured{border-color: var(--brand-dark, #4a9e46);
border-width: 1.5px}
.home-plan-tag{position: absolute;
top: -10px;
left: 24px;
background: var(--brand-dark, #4a9e46);
color: var(--paper, #fff);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px}
.home-plan-name{font-family: var(--font-display, "Young Serif", serif);
font-size: 19px;
font-weight: 400;
color: var(--ink, #1a1a18);
margin-bottom: 8px}
.home-plan-price{font-family: var(--font-display, "Young Serif", serif);
font-size: 38px;
font-weight: 400;
color: var(--ink, #1a1a18);
letter-spacing: -0.018em}
.home-plan-price span{font-family: var(--font-body, "Commissioner", sans-serif);
font-size: 15px;
color: var(--muted, #5d5b56);
margin-left: 4px}
.home-plan-meta{font-size: 13px;
color: var(--muted, #5d5b56);
margin: 8px 0 16px 0}
.home-plan-pitch{font-size: 15px;
line-height: 1.65;
color: var(--ink2, #2e2e26);
margin: 0 0 24px 0}
.home-pricing-note{font-size: 15px;
color: var(--muted, #5d5b56);
line-height: 1.7;
max-width: 620px;
margin: 16px auto 0}
.home-pricing-note a{color: var(--brand-dark, #4a9e46);
text-decoration: underline}
@media (max-width: 768px){.home-pricing-grid{grid-template-columns: 1fr}
}
.feat-bonus-card{margin-top: 28px;
padding: 24px;
background: var(--paper-soft, #faf8f3);
border: 1px solid var(--border, #d4d2cb);
border-radius: 14px}
.feat-bonus-head{display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 16px}
.feat-bonus-eyebrow{font-family: var(--font-body, "Commissioner", sans-serif);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-dark, #4a9e46);
margin-bottom: 8px}
.feat-bonus-title{font-family: var(--font-display, "Young Serif", serif);
font-weight: 400;
font-size: 23px;
line-height: 1.15;
color: var(--ink, #1a1a18);
margin: 0;
letter-spacing: -0.012em}
.feat-bonus-pricing{text-align: right}
.feat-bonus-price{font-family: var(--font-display, "Young Serif", serif);
font-size: 38px;
color: var(--ink, #1a1a18);
line-height: 0.95;
letter-spacing: -0.022em}
.feat-bonus-price span{font-family: var(--font-body, "Commissioner", sans-serif);
font-size: 15px;
color: var(--ink-muted, #5d5b56);
margin-left: 4px}
.feat-bonus-meta{font-size: 13px;
color: var(--ink-muted, #5d5b56);
margin-top: 8px}
.tarifs-trust{display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 8px 16px;
margin: 24px auto 0;
max-width: 880px;
padding: 16px 16px;
font-size: 13px;
color: var(--ink-muted);
letter-spacing: 0.02em;
text-align: center;
border-top: 1px solid color-mix(in oklch, var(--ink) 6%, transparent)}
.tarifs-trust-item strong{color: var(--ink);
font-weight: 700}
.tarifs-trust-sep{opacity: 0.45;
user-select: none}
@media (max-width: 640px){.tarifs-trust{flex-direction: column;
gap: 8px;
padding: 16px 16px}
.tarifs-trust-sep{display: none}
}
.tarifs-compare{margin: 48px auto 0;
max-width: 880px;
padding: 0 16px}
.tarifs-compare-title{font-family: var(--font-display, "Young Serif", serif);
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
text-align: center;
margin-bottom: 24px;
line-height: 1.2}
.tarifs-compare-title em{color: var(--brand-dark, var(--accent));
font-style: italic}
.tarifs-compare-table{width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-lg, 14px);
overflow: hidden;
font-size: 15px;
color: var(--ink)}
.tarifs-compare-table thead th{background: color-mix(in oklch, var(--brand) 6%, transparent);
padding: 16px 16px;
font-family: var(--font-display, "Young Serif", serif);
font-size: 16px;
font-weight: 400;
color: var(--ink);
text-align: center;
border-bottom: 1px solid var(--border);
letter-spacing: -0.005em;
line-height: 1.25}
.tarifs-compare-table thead th span{display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0.02em;
margin-top: 2px}
.tarifs-compare-table thead .tarifs-compare-feat{text-align: left;
font-size: 13px;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-muted)}
.tarifs-compare-table thead .tarifs-compare-col--featured{background: color-mix(in oklch, var(--brand) 14%, transparent);
color: var(--brand-dark, var(--accent))}
.tarifs-compare-table tbody th,
.tarifs-compare-table tbody td{padding: 16px 16px;
border-bottom: 1px solid var(--border2, var(--border))}
.tarifs-compare-table tbody tr:last-child th,
.tarifs-compare-table tbody tr:last-child td{border-bottom: none}
.tarifs-compare-table tbody th{text-align: left;
font-weight: 500;
color: var(--ink);
line-height: 1.45}
.tarifs-compare-table tbody td{text-align: center;
color: var(--ink2, var(--ink-soft));
vertical-align: middle;
line-height: 1.45}
.tarifs-compare-table tbody td strong{color: var(--brand-dark, var(--accent));
font-weight: 700}
.tarifs-compare-yes{display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: color-mix(in oklch, var(--brand) 16%, transparent);
color: var(--brand-dark, var(--accent));
font-weight: 700;
font-size: 15px;
line-height: 1}
.tarifs-compare-no{color: var(--muted);
font-weight: 600;
letter-spacing: 0.04em}
@media (max-width: 640px){.tarif-feature--extra{display: none}
.tarif-features-more-hint{display: block;
margin-top: 8px;
font-size: 13px;
color: var(--ink-muted);
line-height: 1.5}
.tarif-features-more-hint a{color: var(--brand-dark);
text-decoration: underline;
text-underline-offset: 2px}
}
@media (min-width: 601px){.tarif-features-more-hint{display: none}
}
.wiz-recap-anchor{margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--border);
font-size: 13px;
color: var(--ink-muted);
text-align: center;
line-height: 1.5}
.wiz-recap-anchor strong{color: var(--brand-dark);
font-variant-numeric: tabular-nums}
.tarifs-compare-mobile{list-style: none;
padding: 0;
margin: 24px 0 0;
display: none;
flex-direction: column;
gap: 16px}
.tarifs-compare-mobile li{display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 14px}
.tarifs-compare-mobile-add{flex-shrink: 0;
font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: 30px;
line-height: 1;
color: var(--brand-dark);
width: 32px;
text-align: center;
margin-top: -2px}
.tarifs-compare-mobile li strong{display: block;
font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: 16px;
font-weight: 400;
color: var(--ink);
margin-bottom: 4px;
line-height: 1.3}
.tarifs-compare-mobile-note{display: block;
font-size: 15px;
color: var(--ink-muted);
line-height: 1.5}
.tarifs-recevoir{max-width: var(--max-w);
margin: clamp(40px, 6vw, 64px) auto 0;
padding: 0 24px}
.tarifs-recevoir-inner{display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(20px, 3vw, 36px);
align-items: center;
padding: clamp(24px, 3vw, 32px) clamp(22px, 3vw, 32px);
background: var(--accent-tint, oklch(0.59 0.16 143 / 0.06));
border: 1px solid color-mix(in oklch, var(--brand) 18%, var(--border));
border-radius: var(--radius-xl, 18px)}
@media (max-width: 768px){.tarifs-recevoir-inner{grid-template-columns: 1fr;
gap: 16px}
}
.tarifs-recevoir-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-dark, var(--brand));
margin-bottom: 8px}
.tarifs-recevoir-title{font-family: var(--font-display);
font-weight: 400;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 8px}
.tarifs-recevoir-title em{color: var(--brand-dark, var(--brand));
font-style: italic;
font-family: var(--font-display);
font-weight: 400}
.tarifs-recevoir-lede{font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0}
.tarifs-recevoir-pricing{display: flex;
flex-direction: column;
gap: 8px}
.tarifs-recevoir-price-line{display: flex;
align-items: baseline;
gap: 8px;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
padding: 8px 0}
.tarifs-recevoir-price-line strong{font-family: var(--font-display);
font-weight: 400;
font-size: 23px;
color: var(--ink);
line-height: 1;
font-variant-numeric: tabular-nums}
.tarifs-recevoir-price-line--bundle{padding-top: 8px;
border-top: 1px dashed color-mix(in oklch, var(--brand) 25%, var(--border))}
.tarifs-recevoir-price-line--bundle strong{color: var(--brand-dark, var(--brand))}
.tarifs-recevoir-price-line em{font-style: italic;
color: var(--brand-dark, var(--brand));
font-weight: 600}
.tarifs-recevoir .btn-main{margin-top: 8px}
@media (max-width: 640px){.tarifs-compare-table{display: none}
.tarifs-compare-mobile{display: flex}
}
.toc-aside{display: none}
@media (min-width: 1280px){.toc-aside{display: flex;
flex-direction: column;
gap: 4px;
position: fixed;
top: 50%;
left: clamp(16px, 3vw, 40px);
transform: translateY(-50%);
padding: 16px 16px;
border-left: 1px solid color-mix(in oklch, var(--brand) 28%, transparent);
background: var(--paper);
border-radius: 0 8px 8px 0;
font-size: 13px;
max-width: 200px;
z-index: 30}
}
.toc-aside-label{font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px}
.toc-aside-link{color: var(--ink-soft);
text-decoration: none;
padding: 4px 0;
letter-spacing: 0.01em;
transition: color 0.15s;
display: flex;
align-items: baseline;
gap: 8px;
line-height: 1.3}
.toc-aside-link::before{content: attr(data-num);
font-size: 12px;
letter-spacing: 0.16em;
color: var(--ink-muted);
flex-shrink: 0;
min-width: 14px}
@media (hover: hover) and (pointer: fine){.toc-aside-link:hover,
.toc-aside-link.is-active{color: var(--brand-dark, var(--accent));
font-weight: 600}
}
.toc-aside-link.is-active::before{color: var(--brand-dark, var(--accent))}
.faq-list .faq-a{max-height: 0;
overflow: hidden;
transition: max-height 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
padding 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.faq-item.open .faq-a{max-height: 2000px}
.skip-link{position: absolute;
top: 8px;
left: 16px;
transform: translateY(-200%);
background: var(--accent, #4a9e46);
color: #faf6ec;
padding: 8px 16px;
border-radius: 8px;
z-index: 9999;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s ease}
.skip-link:focus{transform: translateY(0);
outline: 2px solid var(--accent, #4a9e46);
outline-offset: 2px}
.hero-ticker-mark{font-size: 0.85em;
vertical-align: super;
margin-left: 2px;
color: var(--ink-muted)}
.hero-ticker-source{font-size: 12px;
color: var(--ink-muted, #5d5b56);
line-height: 1.55;
margin-top: 8px;
max-width: 56ch}
.hero-ticker-source a{color: inherit;
text-decoration: underline;
text-underline-offset: 2px}
.calc-editorial-source{font-size: 12px;
color: var(--ink-muted, #5d5b56);
line-height: 1.55;
margin: 16px 0 0 0;
max-width: 56ch;
font-style: italic}
.receipt-item--marked{cursor: pointer}
.receipt-item--marked:hover,
.receipt-item--marked.is-active,
.receipt-item--marked:focus-visible{outline: none}
.receipt-item--marked:focus-visible::before{height: 3.5px;
opacity: 1}
@media (prefers-reduced-motion: no-preference){.receipt-item--marked{transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1)}
.receipt-item--marked:hover,
.receipt-item--marked.is-active,
.receipt-item--marked:focus-visible{transform: translateX(2px)}
}
.receipt-note-pop{position: absolute;
top: var(--note-top, 50%);
left: calc(100% + 24px);
max-width: 230px;
padding: 16px 16px 16px;
background: oklch(0.99 0.012 90);
border: 1px solid oklch(0.55 0.2 145 / 0.35);
border-radius: 6px;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
box-shadow: 0 8px 26px oklch(0.2 0.04 90 / 0.12),
0 2px 6px oklch(0.2 0.04 90 / 0.06);
z-index: 5}
.receipt-note-pop.is-visible{opacity: 1}
.receipt-note-pen{display: inline-block;
font-family: "Young Serif", Georgia, serif;
font-size: 19px;
line-height: 1;
color: oklch(0.45 0.18 145);
transform: rotate(-14deg);
margin-right: 4px;
vertical-align: -2px}
.receipt-note-text{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-style: italic;
font-size: 16px;
line-height: 1.4;
color: oklch(0.32 0.16 145);
letter-spacing: -0.005em}
@media (max-width: 900px){.receipt-note-pop{position: fixed;
top: auto !important;
bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 60px));
left: 50%;
right: auto;
transform: translateX(-50%);
max-width: 88vw;
width: max-content;
text-align: center}
}
@media (prefers-reduced-motion: no-preference){.receipt-note-pop{transform: translateY(-50%) rotate(2.2deg) scale(0.94);
transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)}
.receipt-note-pop.is-visible{transform: translateY(-50%) rotate(2.2deg) scale(1)}
@media (max-width: 900px){.receipt-note-pop{transform: translateX(-50%) rotate(0deg) scale(0.96)}
.receipt-note-pop.is-visible{transform: translateX(-50%) rotate(0deg) scale(1)}
}
}