:root {
  color-scheme: only light;
  --navy: #111b36;
  --navy-soft: #182543;
  --navy-light: #2e3b59;
  --ink: #192239;
  --muted: #3d4457;
  --cashmere: #f4eee8;
  --sand: #e9ddcf;
  --powder: #f7eeec;
  --cream: #fcfaf7;
  --white: #fff;
  --rose: #ce8f79;
  --rose-light: #e3b7a6;
  --rose-dark: #a86350;
  --gold: #d4af82;
  --line: rgba(25, 34, 57, .13);
  --shadow: 0 24px 70px rgba(17, 27, 54, .13);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: min(1180px, calc(100vw - 48px));
  --radius: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 17px; line-height: 1.65; }
body.modal-open { overflow: hidden; }
button, input { font: inherit; }
button { border: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, blockquote { margin-top: 0; }
h1, h2, h3 { color: inherit; font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
h1 { max-width: 760px; margin-bottom: 26px; font-size: clamp(2.6rem, 5.3vw, 4.75rem); }
h2 { margin-bottom: 24px; font-size: clamp(2.05rem, 3.9vw, 3.5rem); }
h3 { margin-bottom: 12px; font-size: 1.55rem; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--rose-light); outline-offset: 4px; }

.shell { position: relative; width: var(--shell); margin-inline: auto; }
.section { position: relative; padding: 120px 0; overflow: clip; }
.section-dark { position: relative; color: rgba(255,255,255,.82); background: var(--navy); overflow: clip; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-cashmere { background: var(--cashmere); }
.centered { text-align: center; }
.section-heading { max-width: 670px; }
.section-heading.centered { margin-inline: auto; }
.section-heading-wide { max-width: 820px; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.08rem; }
.section-dark .section-heading > p:last-child { color: rgba(255,255,255,.68); }
.section-sand { background: var(--sand); }
.section-powder { background: var(--powder); }
.eyebrow { margin-bottom: 18px; color: var(--rose-dark); font-size: .73rem; font-weight: 750; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; }
.eyebrow-light { color: var(--rose-light); }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 999; padding: 10px 16px; color: var(--white); background: var(--navy); border-radius: 6px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: absolute; top: 0; right: 0; left: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; width: var(--shell); height: 92px; margin-inline: auto; color: var(--white); }
.brand { display: inline-flex; gap: 11px; align-items: center; color: inherit; font-size: 1rem; font-weight: 750; letter-spacing: .24em; text-decoration: none; }
.brand-image { letter-spacing: 0; }
.logo-wordmark-light { width: auto; height: 76px; }
.logo-lockup { position: relative; display: block; width: 68px; height: 68px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.logo-lockup img { width: 100%; height: 100%; object-fit: contain; }
.logo-lockup-footer { width: 82px; height: 82px; margin-bottom: 7px; }
.logo-lockup-modal { width: 66px; height: 66px; margin-bottom: 16px; border-color: var(--line); box-shadow: none; }
.logo-avatar { position: relative; display: inline-block; overflow: hidden; background: #fff; border-radius: 50%; }
.logo-avatar img { width: 100%; height: 100%; object-fit: contain; }
.brand-moon { position: relative; display: inline-block; width: 27px; height: 27px; border: 2px solid var(--rose-light); border-radius: 50%; }
.brand-moon::after { position: absolute; top: -4px; left: 6px; width: 22px; height: 22px; background: var(--navy); border-radius: 50%; content: ""; }
.brand-moon.small { width: 22px; height: 22px; border-color: var(--rose); }
.brand-moon.small::after { width: 18px; height: 18px; background: #f0f2ed; }
.header-guide { padding: 9px 2px; color: rgba(255,255,255,.72); border-bottom: 1px solid rgba(227,183,166,.42); font-size: .79rem; font-weight: 650; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.header-guide:hover { color: var(--white); border-color: var(--rose-light); }
.header-guide span { margin-left: 4px; color: var(--rose-light); }

.hero { min-height: 880px; padding: 145px 0 44px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .82fr; gap: 72px; align-items: center; }
.hero-copy { z-index: 2; }
.hero-introduction { margin: -2px 0 14px; color: var(--rose-light); font-family: var(--serif); font-size: clamp(1.55rem, 2.3vw, 2.05rem); line-height: 1.2; }
.hero-lead { max-width: 690px; margin-bottom: 14px; color: rgba(255,255,255,.76); font-size: clamp(1rem, 1.45vw, 1.16rem); line-height: 1.66; }
.hero-lead-secondary { color: rgba(255,255,255,.7); }
.hero-signoff { margin-bottom: 34px; color: var(--white); font-size: .88rem; font-weight: 700; letter-spacing: .055em; }
.hero-actions { display: inline-flex; flex-direction: column; align-items: flex-start; }
.hero-secondary-link { margin: 18px 0 0 14px; color: rgba(255,255,255,.66); border-bottom: 1px solid rgba(255,255,255,.16); font-size: .74rem; font-weight: 620; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.hero-secondary-link:hover { color: var(--white); border-color: var(--rose-light); }
.hero-secondary-link span { margin-left: 4px; color: var(--rose-light); }
.button { display: inline-flex; min-height: 56px; padding: 14px 25px; align-items: center; justify-content: center; gap: 12px; border-radius: 100px; cursor: pointer; font-size: .96rem; font-weight: 720; line-height: 1.25; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #241b1a; background: linear-gradient(135deg, #e3ad98, var(--rose)); box-shadow: 0 12px 30px rgba(206,143,121,.25); }
.button-primary:hover { box-shadow: 0 16px 38px rgba(206,143,121,.34); }
.button-secondary { color: var(--ink); background: transparent; border: 1px solid rgba(25,34,57,.24); }
.button-secondary:hover { background: var(--powder); border-color: var(--rose); }
.button-large { min-height: 64px; padding: 17px 30px; font-size: 1rem; }
.button-full { width: 100%; }
.button-note { margin: 12px 0 0; color: rgba(255,255,255,.52); font-size: .75rem; line-height: 1.55; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-one { top: -150px; right: -180px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(175,112,98,.16), transparent 67%); }
.hero-glow-two { bottom: -330px; left: -240px; width: 650px; height: 650px; background: radial-gradient(circle, rgba(74,92,137,.22), transparent 67%); }

.phone-stage { position: relative; min-height: 590px; display: grid; place-items: center; }
.phone { position: relative; z-index: 2; width: 292px; height: 590px; padding: 12px; overflow: hidden; background: #121620; border: 1px solid rgba(255,255,255,.2); border-radius: 45px; box-shadow: 0 45px 80px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,255,255,.08); transform: rotate(3deg); }
.phone::after { position: absolute; inset: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 35px; content: ""; pointer-events: none; }
.phone-speaker { position: absolute; top: 19px; left: 50%; z-index: 6; width: 76px; height: 21px; background: #11131a; border-radius: 20px; transform: translateX(-50%); }
.chat-header { display: flex; height: 84px; padding: 31px 16px 8px; align-items: center; gap: 10px; color: var(--ink); background: #f0f2ed; border-radius: 34px 34px 0 0; }
.chat-avatar { display: grid; width: 36px; height: 36px; place-items: center; background: var(--navy); border-radius: 50%; }
.chat-identity { position: relative; z-index: 7; }
.chat-header strong, .chat-header small { display: block; line-height: 1.15; }
.chat-header small { color: #748071; font-size: .67rem; }
.chat-day { position: absolute; top: 103px; left: 50%; z-index: 4; padding: 3px 10px; color: #63706d; background: rgba(255,255,255,.88); border-radius: 6px; font-size: .62rem; transform: translateX(-50%); }
.chat-space { display: flex; height: 433px; padding: 55px 12px 15px; flex-direction: column; gap: 10px; background-color: #e7e2d8; background-image: radial-gradient(rgba(85,91,86,.075) .8px, transparent .8px); background-size: 12px 12px; }
.bubble { position: relative; max-width: 88%; padding: 10px 11px 17px; color: #29322d; border-radius: 11px; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: .72rem; line-height: 1.43; }
.bubble time { position: absolute; right: 7px; bottom: 3px; color: #7f8783; font-size: .52rem; }
.bubble-user { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.bubble-luna { align-self: flex-start; background: var(--white); border-top-left-radius: 2px; }
.voice-bubble { display: flex; width: 212px; height: 50px; padding: 8px 8px 8px 10px; align-items: center; gap: 7px; }
.play-icon { display: grid; width: 27px; height: 27px; place-items: center; color: var(--white); background: #7c9b8b; border-radius: 50%; font-size: .55rem; }
.wave { display: flex; flex: 1; align-items: center; gap: 2px; }
.wave i { width: 2px; height: 7px; background: #84938c; border-radius: 3px; }
.wave i:nth-child(2), .wave i:nth-child(7) { height: 15px; }.wave i:nth-child(3), .wave i:nth-child(6) { height: 23px; }.wave i:nth-child(4) { height: 31px; }.wave i:nth-child(5) { height: 18px; }
.voice-time { color: #748078; font-size: .53rem; }
.chat-input { display: flex; height: 49px; padding: 8px 13px; align-items: center; justify-content: space-between; color: #8c928f; background: #f0f2ed; border-radius: 0 0 34px 34px; font-size: .67rem; }
.chat-input span:first-child { width: 195px; padding: 7px 12px; background: var(--white); border-radius: 18px; }
.orbit { position: absolute; border: 1px solid rgba(227,183,166,.18); border-radius: 50%; }
.orbit-one { width: 500px; height: 500px; }
.orbit-two { width: 400px; height: 400px; }
.float-card { position: absolute; z-index: 3; display: flex; padding: 10px 15px; align-items: center; gap: 7px; color: rgba(255,255,255,.85); background: rgba(31,45,73,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.18); backdrop-filter: blur(9px); font-size: .7rem; }
.float-card span { color: var(--rose-light); }
.float-card-one { top: 88px; right: -8px; }.float-card-two { bottom: 76px; left: -20px; }
.trust-strip { display: flex; margin-top: 95px; padding-top: 25px; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); font-size: .72rem; letter-spacing: .04em; }

.how .section-heading { margin-bottom: 54px; }
.steps { display: grid; margin: 0 0 45px; padding: 0; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; counter-reset: steps; }
.step-card { position: relative; min-height: 310px; padding: 35px 31px; background: rgba(255,255,255,.6); border: 1px solid rgba(25,34,57,.08); border-radius: var(--radius); }
.step-number { position: absolute; top: 27px; right: 29px; color: rgba(25,34,57,.25); font-family: var(--serif); font-size: .9rem; }
.step-icon { position: relative; display: grid; width: 56px; height: 56px; margin-bottom: 40px; place-items: center; color: var(--rose-dark); background: var(--powder); border-radius: 50%; font-family: var(--serif); font-size: 1.6rem; }
.step-card p { margin-bottom: 0; color: var(--muted); font-size: .93rem; }

.empathy { background: var(--cashmere); }
.split-grid { display: grid; grid-template-columns: .8fr 1fr; gap: 110px; align-items: start; }
.empathy .section-heading { position: sticky; top: 80px; }
.empathy h2 em { color: var(--rose-dark); font-weight: inherit; }
.empathy-copy { max-width: 650px; color: var(--muted); font-size: 1.05rem; }
.empathy-copy p { margin-bottom: 24px; }
.empathy-copy h3 { margin: 39px 0 18px; color: var(--ink); font-family: var(--sans); font-size: 1.05rem; font-weight: 750; letter-spacing: -.01em; }
.dropcap::first-letter { float: left; margin: 5px 9px 0 0; color: var(--rose-dark); font-family: var(--serif); font-size: 4.2rem; line-height: .72; }
.empathy blockquote { margin: 48px 0; padding: 6px 0 6px 28px; color: var(--ink); border-left: 2px solid var(--rose); font-family: var(--serif); font-size: 2rem; font-style: italic; }

.foundation-grid { display: block; }
.foundation-copy { max-width: 900px; margin-inline: auto; }
.foundation-copy > p:not(.eyebrow) { color: rgba(255,255,255,.66); }
.foundation-copy strong { color: var(--white); }
.foundation-conclusion { margin-top: 38px; padding-left: 23px; border-left: 2px solid var(--rose); font-family: var(--serif); font-size: 1.25rem; }
.foundation-light .eyebrow-light { color: var(--rose-dark); }
.foundation-light .foundation-copy > p:not(.eyebrow) { color: var(--muted); }
.foundation-light .foundation-copy strong { color: var(--ink); }
.foundation-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.foundation-orbit { position: absolute; border: 1px solid rgba(227,183,166,.25); border-radius: 50%; }
.foundation-orbit.orbit-large { width: 430px; height: 430px; }
.foundation-orbit.orbit-small { width: 310px; height: 310px; border-style: dashed; }
.foundation-moon { position: absolute; width: 245px; height: 245px; border: 22px solid rgba(227,183,166,.8); border-radius: 50%; }
.foundation-moon::after { position: absolute; top: -30px; left: 55px; width: 230px; height: 230px; background: var(--navy); border-radius: 50%; content: ""; }
.foundation-center { position: relative; z-index: 3; display: grid; width: 145px; height: 145px; padding: 20px; place-items: center; align-content: center; color: var(--white); background: rgba(24,37,67,.88); border: 1px solid rgba(255,255,255,.17); border-radius: 50%; box-shadow: 0 20px 50px rgba(0,0,0,.25); text-align: center; }
.foundation-center span { color: var(--rose-light); font-family: var(--serif); font-size: .75rem; letter-spacing: .15em; }
.foundation-center strong { font-family: var(--serif); font-size: 1.06rem; line-height: 1.2; }
.foundation-chip { position: absolute; z-index: 4; padding: 9px 14px; color: rgba(255,255,255,.78); background: rgba(31,45,73,.9); border: 1px solid rgba(255,255,255,.13); border-radius: 100px; box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: .7rem; }
.chip-europe { top: 62px; right: 17px; }.chip-practice { bottom: 88px; left: 4px; }.chip-dialogue { right: -8px; bottom: 135px; }

.benefits { padding-bottom: 130px; }
.benefit-grid { display: grid; margin: 65px 0 55px; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.benefit-card { min-height: 270px; padding: 27px 25px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; transition: background .25s ease, transform .25s ease; }
.benefit-card:hover { background: rgba(255,255,255,.075); transform: translateY(-3px); }
.benefit-card h3 { min-height: 52px; font-family: var(--sans); font-size: 1rem; font-weight: 680; letter-spacing: -.01em; line-height: 1.35; }
.benefit-card p { margin: 0; color: rgba(255,255,255,.61); font-size: .84rem; }
.benefit-icon { display: grid; width: 43px; height: 43px; margin-bottom: 40px; place-items: center; color: var(--rose-light); border: 1px solid rgba(227,183,166,.3); border-radius: 50%; font-size: 1.12rem; }
.future-copy { max-width: 820px; margin: 0 auto 36px; color: rgba(255,255,255,.72); font-family: var(--serif); font-size: 1.35rem; font-style: italic; text-align: center; }
.benefits-light .benefit-grid { grid-template-columns: repeat(2, 1fr); }
.benefits-light .benefit-card { min-height: 300px; background: rgba(255,255,255,.63); border-color: rgba(25,34,57,.09); }
.benefits-light .benefit-card:hover { background: rgba(255,255,255,.85); }
.benefits-light .benefit-card h3 { min-height: 0; color: var(--ink); font-family: var(--sans); }
.benefits-light .benefit-card p { color: var(--muted); font-size: .9rem; }
.benefits-light .benefit-icon { color: var(--rose-dark); border-color: rgba(168,99,80,.3); }
.benefit-icon-food { transform: rotate(90deg); }
.benefit-icon-moon { padding-top: 3px; line-height: 1; }
.benefits-light .future-copy { color: var(--ink); }

.voices .section-heading { margin-bottom: 58px; }
.testimonial-layout { display: grid; grid-template-columns: 1.05fr .95fr .95fr; gap: 18px; align-items: start; }
.testimonial-stack { display: grid; gap: 18px; }.testimonial-stack-offset { padding-top: 35px; }
.testimonial { padding: 27px; color: var(--ink); background: rgba(255,255,255,.74); border: 1px solid rgba(25,34,57,.08); border-radius: 22px 22px 22px 6px; box-shadow: 0 8px 25px rgba(17,27,54,.045); }
.testimonial.featured { padding: 38px; background: var(--navy); color: rgba(255,255,255,.82); border-radius: 28px 28px 28px 7px; box-shadow: 0 24px 55px rgba(17,27,54,.15); }
.testimonial p { margin-bottom: 26px; font-family: var(--serif); font-size: 1.07rem; line-height: 1.6; }
.testimonial.featured p { color: var(--white); font-size: 1.4rem; }
.quote-mark { height: 54px; color: var(--rose-light); font-family: var(--serif); font-size: 5rem; line-height: .8; }
.testimonial footer { display: flex; align-items: center; gap: 11px; font-size: .8rem; }
.testimonial footer small { display: block; color: rgba(255,255,255,.5); }
.initial { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; color: var(--rose-dark); background: var(--powder); border-radius: 50%; font-weight: 700; }
.testimonial-layout-seven .featured { grid-row: span 2; }
.testimonial-wide { align-self: stretch; }

.difference { background: var(--powder); }
.difference-grid { display: grid; grid-template-columns: .82fr 1fr; gap: 95px; align-items: start; }
.difference-intro { position: sticky; top: 80px; }
.difference-intro > p:not(.eyebrow) { max-width: 520px; color: var(--muted); }
.origin-card { display: flex; margin-top: 42px; padding: 22px; align-items: center; gap: 18px; background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 18px; }
.origin-card p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.origin-card strong { color: var(--ink); }
.origin-seal { display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; color: var(--rose-dark); border: 1px solid var(--rose); border-radius: 50%; font-family: var(--serif); }
.difference-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.difference-list li { display: grid; padding: 29px 0; grid-template-columns: 48px 1fr; gap: 15px; border-bottom: 1px solid var(--line); }
.difference-list > li > span { color: var(--rose-dark); font-family: var(--serif); font-size: .8rem; }
.difference-list h3 { margin-bottom: 7px; font-family: var(--sans); font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em; }
.difference-list p { margin: 0; color: var(--muted); font-size: .92rem; }
.difference-cta { margin-top: 34px; text-align: left; }
.difference-cta p { margin: 9px 0 0 14px; color: var(--muted); font-size: .72rem; }

.safety-grid { display: grid; grid-template-columns: .86fr 1fr; gap: 95px; align-items: start; }
.safety-intro > p:not(.eyebrow) { max-width: 530px; color: rgba(255,255,255,.64); }
.security-badges { display: grid; margin-top: 43px; gap: 11px; }
.security-badges span { display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.7); font-size: .83rem; }
.security-badges b { display: grid; width: 34px; height: 34px; place-items: center; color: var(--rose-light); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; font-size: .65rem; }
.icon-lock { position: relative; display: block !important; width: 16px !important; height: 20px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
.icon-lock::before { position: absolute; top: 1px; left: 3px; width: 10px; height: 9px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; content: ""; }
.icon-lock::after { position: absolute; right: 0; bottom: 0; left: 0; height: 13px; background: currentColor; border-radius: 3px; content: ""; }
.trust-seal .icon-lock { color: var(--rose-light); }
.accordion details { border-bottom: 1px solid rgba(255,255,255,.15); }
.accordion summary { position: relative; padding: 23px 45px 23px 0; color: var(--white); cursor: pointer; font-weight: 620; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span::before, .accordion summary span::after { position: absolute; top: 50%; right: 6px; width: 15px; height: 1px; background: var(--rose-light); content: ""; transition: transform .2s ease; }
.accordion summary span::after { transform: rotate(90deg); }.accordion details[open] summary span::after { transform: rotate(0); }
.accordion details div { overflow: hidden; }
.accordion details div p { max-width: 620px; margin: 0; padding: 0 45px 25px 0; color: rgba(255,255,255,.61); font-size: .91rem; }
.safety-light .eyebrow-light { color: var(--rose-dark); }
.safety-light .safety-intro > p:not(.eyebrow),
.safety-light .security-badges span,
.safety-light .accordion details div p { color: var(--muted); }
.safety-light .security-badges b { color: var(--rose-dark); border-color: var(--line); }
.safety-light .accordion details { border-color: var(--line); }
.safety-light .accordion summary { color: var(--ink); }
.safety-light .accordion summary span::before,
.safety-light .accordion summary span::after { background: var(--rose-dark); }

.pricing { background: var(--cream); }
.pricing .section-heading { max-width: 760px; margin-bottom: 38px; }
.guarantee { display: flex; width: 100%; max-width: 900px; margin: 0 auto 48px; padding: 20px 25px; align-items: flex-start; gap: 15px; background: rgba(255,255,255,.56); border: 1px solid rgba(206,143,121,.27); border-radius: 18px; }
.guarantee-icon { display: grid; width: 45px; height: 45px; flex: 0 0 auto; place-items: center; color: var(--white); background: var(--rose); border-radius: 50%; font-family: var(--serif); font-size: 1.3rem; }
.guarantee strong { display: block; font-family: var(--serif); font-size: 1.05rem; }
.guarantee p { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: center; }
.price-card { position: relative; padding: 37px 31px 29px; background: var(--white); border: 1px solid var(--line); border-radius: 25px; box-shadow: 0 12px 45px rgba(17,27,54,.05); }
.price-card-featured { padding-top: 50px; border: 1.5px solid var(--rose); box-shadow: var(--shadow); transform: scale(1.035); }
.popular { position: absolute; top: -1px; right: 32px; left: 32px; padding: 7px; color: var(--white); background: var(--rose); border-radius: 0 0 12px 12px; font-size: .66rem; font-weight: 750; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.plan-label { margin-bottom: 10px; color: var(--rose-dark); font-size: .7rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.price-per-day { display: flex; min-height: 59px; margin: 0 0 9px; align-items: baseline; flex-wrap: wrap; gap: 5px 7px; color: var(--ink); line-height: 1; }
.price-per-day > span { color: var(--rose-dark); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.price-per-day strong { font-family: var(--serif); font-size: 2.6rem; font-weight: 400; letter-spacing: -.035em; white-space: nowrap; }
.price-per-day small { color: var(--muted); font-size: .72rem; font-weight: 550; white-space: nowrap; }
.price-once { gap: 9px; }
.price-billing { min-height: 69px; margin: 0 0 20px; padding-bottom: 17px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .72rem; line-height: 1.45; }
.price-billing strong, .price-billing span { display: block; }
.price-billing strong { color: var(--ink); font-size: .83rem; }
.plan-story { margin: -6px 0 21px; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.price-card ul { min-height: 188px; margin: 0 0 24px; padding: 0; list-style: none; }
.price-card li { position: relative; margin-bottom: 10px; padding-left: 23px; color: #4f586a; font-size: .82rem; }
.price-card li::before { position: absolute; left: 0; color: var(--rose-dark); content: "✓"; font-weight: 800; }
.plan-note { min-height: 32px; margin: 13px 5px 0; color: #858b97; font-size: .65rem; line-height: 1.45; text-align: center; }
.price-footnote { max-width: 920px; margin: 29px auto 0; color: var(--muted); font-size: .68rem; line-height: 1.5; text-align: center; }
.payment-trust { display: flex; margin-top: 49px; justify-content: center; gap: 40px; color: var(--muted); font-size: .72rem; }

.steps-connected { position: relative; }
.steps-connected::before { position: absolute; top: 63px; right: 17%; left: 17%; height: 1px; background: linear-gradient(90deg, transparent, var(--rose), transparent); content: ""; }
.steps-connected .step-card { z-index: 1; }
.step-icon-message::before { width: 25px; height: 19px; border: 2px solid currentColor; border-radius: 7px; content: ""; }
.step-icon-message::after { position: absolute; top: 31px; left: 17px; width: 8px; height: 8px; background: var(--powder); border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-35deg); content: ""; }
.whatsapp-note { margin: 30px auto 0; color: var(--muted); font-size: .82rem; text-align: center; }

.faq-grid { display: grid; grid-template-columns: .75fr 1fr; gap: 95px; align-items: start; }
.accordion-light details { border-color: var(--line); }
.accordion-light summary { color: var(--ink); }
.accordion-light details div p { color: var(--muted); }
.accordion-light summary span::before, .accordion-light summary span::after { background: var(--rose-dark); }

.trust-harbor { padding-bottom: 105px; }
.trust-blocks { display: grid; margin: 60px 0 90px; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.trust-block { padding: 31px 27px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; }
.trust-block h3 { min-height: 54px; font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.trust-block p { margin: 0; color: rgba(255,255,255,.6); font-size: .82rem; }
.trust-seal { display: grid; width: 48px; height: 48px; margin-bottom: 30px; place-items: center; color: var(--rose-light); border: 1px solid rgba(227,183,166,.35); border-radius: 50%; font-family: var(--serif); }
.final-cta-inner { max-width: 850px; margin-inline: auto; }
.final-cta-inner h2 { margin: 25px auto 31px; }
.logo-avatar-large { width: 66px; height: 66px; border: 2px solid rgba(255,255,255,.3); box-shadow: 0 14px 35px rgba(0,0,0,.23); }
.final-cta { padding: 125px 0; }
.final-cta .shell { max-width: 850px; }
.final-cta h2 { margin: 13px auto 22px; }
.final-cta .shell > p:not(.eyebrow):not(.button-note) { margin-bottom: 34px; color: rgba(255,255,255,.66); }
.final-cta .button-note { margin-top: 14px; }
.brand-moon-large { width: 64px; height: 64px; margin-bottom: 29px; border-width: 3px; }
.brand-moon-large::after { top: -7px; left: 15px; width: 54px; height: 54px; }
.moon-horizon { position: absolute; right: 0; bottom: -60%; left: 0; height: 100%; background: radial-gradient(ellipse at center, rgba(206,143,121,.13), transparent 64%); }

.site-footer { padding: 64px 0 23px; color: rgba(255,255,255,.58); background: #0b1328; font-size: .75rem; }
.footer-grid { display: grid; grid-template-columns: 1.1fr .9fr .7fr; gap: 60px; }
.brand-footer { margin-bottom: 17px; color: var(--white); }
.footer-grid p { margin-bottom: 0; }
.footer-trust strong { color: rgba(255,255,255,.83); }
.footer-grid nav { display: grid; gap: 7px; align-content: start; }
.footer-grid nav a { text-decoration: none; }.footer-grid nav a:hover { color: var(--white); }
.footer-grid nav .footer-manage { width: max-content; margin-top: 8px; padding: 7px 13px; color: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.2); border-radius: 100px; }
.footer-grid nav .footer-manage:hover { color: var(--white); border-color: var(--rose-light); }
.faq a { color: var(--rose-dark); font-weight: 700; text-underline-offset: 3px; }
.footer-bottom { display: flex; margin-top: 50px; padding-top: 20px; justify-content: space-between; gap: 40px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.34); font-size: .65rem; }
.footer-bottom p:last-child { max-width: 600px; text-align: right; }

.mobile-sticky-cta { display: none; }
/* Suppressed while a real in-page CTA is on screen (see app.js), so the hero,
   pricing and final buttons never sit next to a duplicate of themselves. */
.mobile-sticky-cta.is-hidden { opacity: 0; transform: translateY(150%); pointer-events: none; }
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; padding: 24px; place-items: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(7,12,28,.78); backdrop-filter: blur(7px); }
.modal-panel { position: relative; z-index: 2; width: min(620px, 100%); max-height: calc(100dvh - 40px); padding: 31px 34px 23px; overflow-y: auto; background: var(--cream); border-radius: 26px; box-shadow: 0 30px 100px rgba(0,0,0,.42); overscroll-behavior: contain; }
.modal-close { position: absolute; top: 16px; right: 16px; z-index: 4; display: grid; width: 38px; height: 38px; place-items: center; color: var(--ink); background: rgba(17,27,54,.06); border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.modal-heading { padding-right: 28px; }
.modal-heading .brand-moon { margin-bottom: 18px; border-color: var(--rose); }.modal-heading .brand-moon::after { background: var(--cream); }
.modal-heading .eyebrow { margin-bottom: 8px; }
.modal-heading h2 { margin-bottom: 9px; font-size: 2.05rem; }
.modal-heading > p:last-child { margin-bottom: 13px; color: var(--muted); font-size: .82rem; }
.checkout-progress { display: flex; margin: 18px 0 21px; align-items: center; justify-content: center; }
.checkout-progress span { display: grid; width: 29px; height: 29px; place-items: center; color: var(--muted); background: var(--white); border: 1px solid var(--line); border-radius: 50%; font-size: .7rem; font-weight: 800; }
.checkout-progress span.is-active { color: var(--white); background: var(--navy); border-color: var(--navy); }
.checkout-progress span.is-complete { color: var(--white); background: var(--rose); border-color: var(--rose); }
.checkout-progress i { width: 52px; height: 1px; background: var(--line); }
.checkout-alert { margin: 0 0 16px; padding: 12px 14px; color: #7c302c; background: #fff1ee; border: 1px solid rgba(154,51,47,.2); border-radius: 11px; font-size: .76rem; line-height: 1.45; }
.checkout-form { display: grid; gap: 14px; }
.checkout-form[hidden] { display: none; }
.checkout-form label:not(.checkout-check) > span:first-child { display: block; margin-bottom: 6px; color: var(--ink); font-size: .72rem; font-weight: 720; }
.checkout-fields { display: grid; gap: 12px; }
.checkout-fields-two { grid-template-columns: 1fr 1fr; }
.checkout-phone { grid-template-columns: 118px 1fr; }
.checkout-form input:not([type="checkbox"]):not([type="radio"]), .checkout-form select { width: 100%; height: 49px; padding: 0 13px; color: var(--ink); background: var(--white); border: 1px solid rgba(25,34,57,.16); border-radius: 11px; outline: none; font: inherit; font-size: .87rem; transition: border-color .2s ease, box-shadow .2s ease; }
.checkout-form input:focus, .checkout-form select:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(206,143,121,.14); }
.selected-plan { display: block; }
.selected-plan[hidden] { display: none; }
.checkout-order-summary { display: grid; margin: 12px 0; padding: 15px 16px; gap: 3px; background: var(--powder); border: 1px solid rgba(206,143,121,.25); border-radius: 12px; }
.checkout-order-summary > span { color: var(--rose-dark); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.checkout-order-summary > strong { color: var(--ink); font-size: .9rem; }
.checkout-order-summary > small { color: var(--muted); font-size: .72rem; }
.checkout-order-summary ul { margin: 7px 0 0; padding-left: 18px; color: var(--ink); font-size: .7rem; line-height: 1.45; }
.checkout-legal { display: grid; min-width: 0; padding: 9px 10px; gap: 9px; border: 1px solid transparent; border-radius: 11px; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.checkout-legal.has-error { background: #fff1ee; border-color: rgba(154,51,47,.45); box-shadow: 0 0 0 3px rgba(154,51,47,.09); }
.checkout-legal.has-error .checkout-check { color: #7c302c; }
.checkout-field-error { margin: 0 0 0 28px; color: #9a332f; font-size: .7rem; font-weight: 720; line-height: 1.4; }
.checkout-field-error[hidden] { display: none; }
.checkout-check { display: grid; grid-template-columns: 19px 1fr; gap: 9px; align-items: start; color: var(--muted); cursor: pointer; font-size: .67rem; line-height: 1.45; }
.checkout-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--rose-dark); }
.checkout-check a { color: var(--rose-dark); font-weight: 680; text-underline-offset: 2px; }
.checkout-check-optional { margin-inline: -12px; padding: 11px 12px; background: rgba(255,255,255,.58); border-radius: 10px; }
/* A9 value anchor under the pricing grid. Brand colours, no discount styling — the
   design rule is that LUNA rewards the first customers rather than running a sale. */
.price-anchor { max-width: 560px; margin: 26px auto 0; color: var(--muted); font-size: .82rem; line-height: 1.6; text-align: center; }
.price-anchor strong { color: var(--ink); font-weight: 720; }

/* Affiliate bonus line. Hidden by default and revealed purely by the server-rendered
   body attribute — no JS involved, so it cannot flash or disagree with the checkout.
   Brand styling, no discount optics: a gift, not a sale. */
.ref-bonus { display: none; margin: 6px 0 0; color: var(--rose-light); font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
body[data-trial-days="14"] .ref-bonus { display: block; }
/* On light sections (tarif-waehlen intro) the rose-light tone washes out. */
.plan-page .ref-bonus { color: var(--rose-dark); }

/* Per-code VIP bonus banner (e.g. studio block-buyer codes). The server injects the
   label text via __TRIAL_BONUS_LABEL__; it is empty for everyone else, so :empty hides
   it — no JS, no data-attribute, CSP-safe. A distinct gold "Blickfang", not the rose line. */
.vip-bonus { display: block; margin: 0 0 12px; padding: 12px 14px; text-align: center; color: #6b3f27; background: linear-gradient(135deg, #fbe9c8, #f6d9bf); border: 1px solid #e6b980; border-radius: 14px; font-size: .95rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 8px 22px rgba(212,175,55,.20); }
.vip-bonus:empty { display: none; }
.plan-page .vip-bonus { margin-inline: auto; max-width: 520px; }

/* Only rendered on /vorschau/* pages that show unreleased prices. Deliberately loud and
   sticky: the page is a faithful copy of production, so nothing else distinguishes it. */
.preview-banner { position: sticky; top: 0; z-index: 999; margin: 0; padding: 9px 14px; background: #7c2d12; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .01em; text-align: center; }

/* Same off-screen technique as .checkout-honeypot, but for content that must stay
   available to screen readers — a <fieldset> needs its <legend> for the radio group's
   accessible name even when the heading is shown elsewhere visually. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.checkout-phone-note { margin: -2px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.checkout-plan-intro { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.checkout-plan-saving { color: var(--rose-dark); font-weight: 700; }
/* Reference price for the Gründerinnen offer. Deliberately one selector: a permanent
   struck-through price is a regulated claim, so counsel objecting means one edit. */
.checkout-plan-reference { margin-left: 5px; color: var(--muted); font-weight: 600; text-decoration-thickness: 1px; }
.checkout-plan-reference:empty { display: none; }
/* A7 trust block above the buy button. Hidden by default in markup; app.js only shows
   it when the flag is on AND the plan actually gets a reminder. */
.charge-reminder { display: grid; gap: 3px; margin-top: 2px; padding: 11px 13px; background: rgba(227,183,166,.14); border: 1px solid rgba(206,143,121,.30); border-radius: 11px; color: var(--ink); font-size: .67rem; line-height: 1.45; }
.charge-reminder[hidden] { display: none; }
.charge-reminder strong { font-weight: 720; }
.charge-reminder span { color: var(--muted); }

/* Immediate-payment opt-in: only shown when the free trial is genuinely used up.
   Deliberately looks like a decision to make, not like a validation error — the
   previous flow reused the submit button, so a retry read as consent to be charged. */
.checkout-immediate { display: grid; margin-top: 2px; padding: 12px 13px; gap: 9px; background: #fff6ed; border: 1px solid rgba(168,99,80,.42); border-radius: 11px; }
.checkout-immediate[hidden] { display: none; }
.checkout-immediate-note { margin: 0; color: #7c4a2c; font-size: .69rem; font-weight: 680; line-height: 1.45; }
.checkout-immediate .checkout-check { color: #6b3f27; font-weight: 620; }
.checkout-data-notice { margin: -2px 0 2px; color: var(--muted); font-size: .67rem; line-height: 1.5; }
.checkout-data-notice a { color: var(--rose-dark); font-weight: 680; text-underline-offset: 2px; }
.checkout-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.checkout-submit { min-height: 53px; margin-top: 2px; }
.button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.button.is-loading::after { position: absolute; width: 19px; height: 19px; border: 2px solid rgba(255,255,255,.45); border-top-color: var(--white); border-radius: 50%; animation: spin .7s linear infinite; content: ""; }
.checkout-plan-options { display: grid; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0; gap: 9px; border: 0; }
.checkout-plan-options legend { margin-bottom: 8px; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; }
.checkout-plan-options label { position: relative; width: 100%; min-width: 0; max-width: 100%; cursor: pointer; }
.checkout-plan-options input { position: absolute; opacity: 0; }
.checkout-trial-banner { display: grid; margin: -2px 0 1px; padding: 12px 15px; gap: 2px; color: var(--ink); background: linear-gradient(135deg, #f7e5de, var(--powder)); border: 1px solid rgba(206,143,121,.34); border-radius: 12px; text-align: center; }
.checkout-trial-banner[hidden] { display: none; }
.checkout-trial-banner strong { font-size: .76rem; }
.checkout-trial-banner span { color: var(--muted); font-size: .66rem; }
.checkout-trial-banner.is-used { color: #7c302c; background: #fff1ee; border-color: rgba(154,51,47,.2); }
.checkout-plan-options label > .checkout-plan-card { display: grid; width: 100%; min-width: 0; max-width: 100%; min-height: 76px; padding: 14px 15px 14px 48px; box-sizing: border-box; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; overflow: hidden; background: var(--white); border: 1px solid rgba(25,34,57,.13); border-radius: 13px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease; }
.checkout-plan-options label > .checkout-plan-card::before { position: absolute; top: 29px; left: 17px; width: 17px; height: 17px; border: 1.5px solid rgba(25,34,57,.25); border-radius: 50%; content: ""; }
.checkout-plan-options label:hover > .checkout-plan-card { border-color: rgba(206,143,121,.65); transform: translateY(-1px); }
.checkout-plan-options input:focus-visible + .checkout-plan-card { outline: 3px solid rgba(206,143,121,.25); outline-offset: 2px; }
.checkout-plan-options input:checked + span { background: #fff8f5; border: 2px solid var(--rose); box-shadow: 0 0 0 3px rgba(206,143,121,.18); }
.checkout-plan-options input:checked + span::before { background: var(--rose); border: 5px solid var(--white); box-shadow: 0 0 0 1.5px var(--rose); }
.checkout-plan-name { display: grid; min-width: 0; gap: 2px; }
.checkout-plan-name b { overflow-wrap: anywhere; color: var(--ink); font-size: .84rem; }
.checkout-plan-name small { overflow-wrap: anywhere; color: var(--muted); font-size: .68rem; }
.checkout-plan-value { display: grid; min-width: 78px; gap: 0; color: var(--rose-dark); text-align: right; }
.checkout-plan-value strong { font-family: var(--serif); font-size: 1.05rem; line-height: 1.1; }
.checkout-plan-value small { color: var(--muted); font-size: .6rem; }
.checkout-plan-value-once { color: var(--ink); }
/* Filled pill rather than loose text: the badge is the main signal that one card is the
   recommendation, and as plain small caps it disappeared next to the price. Brand
   roségold on midnight, no percentage and no red — LUNA rewards the first customers
   rather than running a sale. */
.checkout-plan-options em { position: absolute; top: -9px; right: 12px; padding: 3px 10px; color: #fff; background: var(--rose-dark); border-radius: 100px; box-shadow: 0 2px 6px rgba(168,99,80,.28); font-size: .55rem; font-style: normal; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.checkout-plan-featured .checkout-plan-card { padding-top: 19px !important; background: linear-gradient(135deg, #fff, #fcf4f1) !important; }
.checkout-price-footnote { margin: -3px 2px 0; color: var(--muted); font-size: .56rem; line-height: 1.4; }
.checkout-order-preview ul { display: none; }
.checkout-step-actions { display: flex; margin-top: 3px; align-items: center; justify-content: space-between; gap: 13px; }
.checkout-step-actions .text-button { flex: 0 0 auto; }
.modal-privacy { margin: 10px 4px 0; color: #7c8290; font-size: .64rem; line-height: 1.45; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Checkout plan fallback */
.plan-page { min-height: 100vh; padding: 0; color: var(--ink); background: var(--navy); }
.plan-header { height: 92px; }
.plan-shell { width: min(1120px, calc(100% - 40px)); margin: 25px auto 70px; }
.plan-intro { max-width: 780px; margin: 0 auto 42px; color: rgba(255,255,255,.68); }
.plan-intro h1 { margin-bottom: 18px; color: var(--white); font-size: clamp(3rem, 7vw, 5.5rem); }
.plan-intro > p:last-child { max-width: 650px; margin-inline: auto; }
.plan-page .checkout-alert { max-width: 760px; margin: 0 auto 20px; }
.fallback-pricing-grid { align-items: stretch; }
.fallback-price-card { display: flex; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; flex-direction: column; cursor: pointer; }
.fallback-price-card > input { position: absolute; opacity: 0; }
.fallback-price-card:has(input:checked) { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(206,143,121,.22), var(--shadow); }
.fallback-price-card > span { display: block; }
.fallback-select { margin-top: auto; padding: 13px 17px; color: var(--ink); background: var(--powder); border-radius: 100px; font-size: .76rem; font-weight: 780; text-align: center; }
.fallback-price-card:has(input:checked) .fallback-select { color: var(--white); background: var(--rose); }
.fallback-consent-card { width: 100%; max-width: 760px; margin: 25px auto 0; padding: 25px; box-sizing: border-box; background: var(--cream); border-radius: 18px; }
.fallback-consent-card .checkout-check + .checkout-check { margin-top: 11px; }
.fallback-consent-card .button { width: 100%; margin-top: 20px; }
.fallback-consent-card > p { margin: 10px 0 0; color: var(--muted); font-size: .67rem; text-align: center; }
.plan-expired { max-width: 650px; margin: 70px auto; padding: 45px; background: var(--cream); border-radius: 22px; text-align: center; }
.plan-expired h2 { margin-bottom: 15px; }
.plan-expired p { margin-bottom: 24px; color: var(--muted); }
.plan-page .account-footer { color: rgba(255,255,255,.5); }
.plan-page .account-footer a { color: rgba(255,255,255,.55); }

.consent { position: fixed; right: 22px; bottom: 22px; z-index: 110; width: min(460px, calc(100vw - 44px)); padding: 20px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.consent p { margin-bottom: 15px; font-size: .78rem; line-height: 1.5; }.consent > div { display: flex; align-items: center; gap: 14px; }.consent .button { min-height: 43px; padding: 10px 18px; font-size: .75rem; }.text-button { padding: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: .75rem; text-decoration: underline; }
.noscript { position: fixed; right: 0; bottom: 0; left: 0; z-index: 200; padding: 12px; color: var(--white); background: #9a332f; text-align: center; }

.legal-page { min-height: 100vh; padding: 70px 24px; background: var(--cashmere); }
.legal-page main { max-width: 760px; margin: auto; padding: 50px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.legal-page h1 { color: var(--ink); font-size: clamp(2.5rem, 6vw, 4.3rem); }.legal-page p { color: var(--muted); }.text-link { display: inline-block; margin-bottom: 45px; color: var(--rose-dark); text-decoration: none; }

/* Long-form legal pages */
.legal-document { padding: 0; background: var(--cream); }
.legal-document::before { position: absolute; top: 0; right: 0; left: 0; height: 330px; background: var(--navy); content: ""; }
.legal-header { position: relative; z-index: 2; display: flex; width: min(1220px, calc(100% - 48px)); height: 104px; margin-inline: auto; align-items: center; justify-content: space-between; }
.legal-brand { display: block; width: 156px; height: 86px; }
.legal-brand img { width: 100%; height: 100%; object-fit: contain; }
.legal-back { color: rgba(255,255,255,.72); font-size: .84rem; font-weight: 650; text-decoration: none; transition: color .2s ease; }
.legal-back:hover { color: var(--white); }
.legal-back span { margin-right: 7px; color: var(--rose-light); }
.legal-layout { position: relative; z-index: 1; display: grid; width: min(1220px, calc(100% - 48px)); margin: 28px auto 80px; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
.legal-toc { position: sticky; top: 24px; padding: 30px 25px; color: rgba(255,255,255,.75); background: var(--navy-soft); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; box-shadow: 0 20px 45px rgba(17,27,54,.16); }
.legal-toc .eyebrow { margin-bottom: 9px; color: var(--rose-light); }
.legal-toc-title { margin-bottom: 22px; color: var(--white) !important; font-family: var(--serif); font-size: 1.48rem; line-height: 1.15; }
.legal-toc nav { display: grid; gap: 1px; }
.legal-toc nav a { padding: 9px 0; color: rgba(255,255,255,.64); border-bottom: 1px solid rgba(255,255,255,.075); font-size: .77rem; line-height: 1.35; text-decoration: none; transition: color .2s ease, padding-left .2s ease; }
.legal-toc nav a:hover { padding-left: 4px; color: var(--white); }
.legal-contact-card { display: flex; margin-top: 27px; padding-top: 22px; align-items: flex-start; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); }
.legal-contact-card > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; color: var(--navy); background: var(--rose-light); border-radius: 50%; font-size: .7rem; }
.legal-contact-card p { margin: 0; color: rgba(255,255,255,.58); font-size: .69rem; line-height: 1.55; }
.legal-contact-card strong { color: var(--white); }
.legal-contact-card a { overflow-wrap: anywhere; color: var(--rose-light); }
.legal-document .legal-content { max-width: none; margin: 0; padding: 66px clamp(30px, 6vw, 76px); background: var(--white); border-radius: 28px; box-shadow: 0 24px 70px rgba(17,27,54,.12); }
.legal-intro { padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.legal-document .legal-intro h1 { max-width: none; margin-bottom: 22px; font-size: clamp(3rem, 6vw, 5.4rem); }
.legal-lead { max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.legal-version { margin: 28px 0 0; color: var(--rose-dark) !important; font-size: .73rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.legal-notice { display: grid; margin: 42px 0 18px; padding: 25px 27px; grid-template-columns: 36px 1fr; gap: 15px; background: var(--powder); border: 1px solid rgba(206,143,121,.28); border-radius: 17px; }
.legal-notice-icon { display: grid; width: 34px; height: 34px; place-items: center; color: var(--white); background: var(--rose); border-radius: 50%; font-family: var(--serif); font-size: 1.05rem; }
.legal-notice p { margin: 0; color: var(--ink); font-size: .88rem; }
.legal-section { position: relative; padding: 54px 0 4px; scroll-margin-top: 25px; }
.legal-section + .legal-section { margin-top: 12px; border-top: 1px solid var(--line); }
.legal-section-number { display: block; margin-bottom: 10px; color: var(--rose-dark); font-family: var(--serif); font-size: .74rem; letter-spacing: .1em; }
.legal-document .legal-section h2 { max-width: 700px; margin-bottom: 25px; color: var(--ink); font-size: clamp(2rem, 4vw, 3rem); }
.legal-document .legal-section h3 { margin: 31px 0 10px; color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.4; }
.legal-section p, .legal-section li { color: var(--muted); font-size: .94rem; }
.legal-section p { margin-bottom: 17px; }
.legal-section a { color: var(--rose-dark); font-weight: 620; text-underline-offset: 3px; }
.legal-address { margin: 24px 0; padding: 23px 25px; color: var(--muted); background: var(--cream); border-left: 3px solid var(--rose); border-radius: 0 14px 14px 0; font-style: normal; font-size: .9rem; line-height: 1.7; }
.legal-address strong { color: var(--ink); }
.legal-card-grid { display: grid; margin-top: 30px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.legal-card-grid article { padding: 22px; background: var(--cream); border: 1px solid rgba(25,34,57,.08); border-radius: 15px; }
.legal-card-grid article h3 { margin: 0 0 8px; color: var(--ink); font-size: .87rem; }
.legal-card-grid article p { margin: 0; font-size: .79rem; line-height: 1.55; }
.legal-list { margin: 25px 0; padding: 0; list-style: none; }
.legal-list li { position: relative; margin-bottom: 12px; padding-left: 23px; }
.legal-list li::before { position: absolute; top: .65em; left: 2px; width: 7px; height: 7px; background: var(--rose); border-radius: 50%; content: ""; }
.legal-list strong { color: var(--ink); }
.legal-retention li { margin-bottom: 0; padding: 15px 15px 15px 39px; border-bottom: 1px solid var(--line); }
.legal-retention li::before { top: 1.55em; left: 16px; }
.legal-rights { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 24px; }
.legal-table-wrap { margin: 30px 0 25px; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .79rem; line-height: 1.5; }
.legal-table th { padding: 14px 16px; color: var(--white); background: var(--navy); text-align: left; }
.legal-table th:first-child { width: 35%; }
.legal-table td { padding: 14px 16px; color: var(--muted); border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table td:first-child { color: var(--ink); font-weight: 700; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table tr:nth-child(even) { background: var(--cream); }
.legal-final-contact { margin-top: 65px; padding: 42px; color: var(--white); background: var(--navy); border-radius: 22px; }
.legal-final-contact .eyebrow { margin-bottom: 12px; color: var(--rose-light); }
.legal-document .legal-final-contact h2 { margin-bottom: 15px; color: var(--white); font-size: clamp(2rem, 4vw, 3rem); }
.legal-final-contact p:not(.eyebrow) { max-width: 590px; color: rgba(255,255,255,.65); font-size: .91rem; }
.legal-final-contact .button { margin-top: 10px; }
.legal-footer { display: flex; width: min(1220px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 55px 296px; align-items: center; justify-content: space-between; gap: 25px; color: var(--muted); font-size: .72rem; }
.legal-footer p { margin: 0; }
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.legal-footer a { color: var(--muted); text-decoration: none; }
.legal-footer a:hover { color: var(--rose-dark); }
.legal-fact-list { margin: 28px 0; border-top: 1px solid var(--line); }
.legal-fact-list > div { display: grid; padding: 17px 0; grid-template-columns: minmax(150px, .65fr) 1.35fr; gap: 6px 25px; border-bottom: 1px solid var(--line); }
.legal-fact-list span { color: var(--muted); font-size: .76rem; }
.legal-fact-list strong { color: var(--ink); font-size: .89rem; }
.legal-fact-list small { grid-column: 2; color: var(--muted); font-size: .72rem; }
.legal-notice-inline { margin-top: 28px; }
.legal-notice-inline .legal-notice-icon { font-size: .62rem; font-family: var(--sans); font-weight: 800; }
.legal-content-terms .legal-intro h1 { font-size: clamp(2.8rem, 5.4vw, 4.8rem); }
.terms-section p { max-width: 780px; }
.terms-warning { margin-top: 40px !important; padding: 40px 32px 25px; background: #fff8f5; border: 1px solid rgba(206,143,121,.27) !important; border-radius: 18px; }
.legal-price-list { display: grid; margin: 28px 0; gap: 10px; }
.legal-price-list > div { display: grid; padding: 18px 20px; grid-template-columns: 1fr auto; gap: 4px 20px; background: var(--cream); border: 1px solid var(--line); border-radius: 13px; }
.legal-price-list span { color: var(--muted); font-size: .84rem; }
.legal-price-list strong { color: var(--ink); font-size: .92rem; }
.legal-price-list small { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; }
.withdrawal-box { margin: 32px 0 15px; padding: 30px; background: var(--cream); border: 1px solid var(--line); border-radius: 17px; }
.withdrawal-box h3 { margin-top: 0 !important; font-family: var(--serif) !important; font-size: 1.65rem !important; font-weight: 400 !important; }
.withdrawal-form { margin-top: 25px; padding: 28px; background: var(--cream); border: 1px dashed rgba(25,34,57,.3); border-radius: 14px; }
.withdrawal-form p { margin-bottom: 24px; color: var(--ink); }
.withdrawal-form small { color: var(--muted); }

/* Subscription management */
.account-page { min-height: 100vh; padding: 0; color: var(--ink); background: var(--cream); }
.account-page::before { position: absolute; top: 0; right: 0; left: 0; height: 520px; background: var(--navy); content: ""; }
.account-header { position: relative; z-index: 2; display: flex; width: min(1060px, calc(100% - 48px)); height: 104px; margin-inline: auto; align-items: center; justify-content: space-between; }
.account-brand { display: block; width: 156px; height: 86px; }
.account-brand img { width: 100%; height: 100%; object-fit: contain; }
.account-back { color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 650; text-decoration: none; }
.account-back:hover { color: var(--white); }
.account-back span { margin-right: 7px; color: var(--rose-light); }
.account-shell { position: relative; z-index: 1; width: min(1060px, calc(100% - 48px)); margin: 30px auto 80px; }
.account-hero { padding: 65px clamp(28px, 6vw, 70px); color: rgba(255,255,255,.72); background: var(--navy-soft); border: 1px solid rgba(255,255,255,.09); border-radius: 27px; box-shadow: 0 25px 65px rgba(17,27,54,.22); text-align: center; }
.account-hero h1 { max-width: 800px; margin: 0 auto 23px; color: var(--white); font-size: clamp(3rem, 7vw, 5.7rem); }
.account-hero > p:not(.eyebrow):not(.account-note) { max-width: 650px; margin: 0 auto 29px; color: rgba(255,255,255,.7); font-size: 1.04rem; }
.account-primary { margin-inline: auto; }
.account-note { max-width: 620px; margin: 16px auto 0; color: rgba(255,255,255,.45); font-size: .7rem; }
.account-options { display: grid; margin: 28px 0; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.account-options article { padding: 27px; background: var(--white); border: 1px solid var(--line); border-radius: 17px; }
.account-options article > span { display: grid; width: 40px; height: 40px; margin-bottom: 24px; place-items: center; color: var(--rose-dark); background: var(--powder); border-radius: 50%; }
.account-options h2 { margin-bottom: 9px; font-family: var(--sans); font-size: .96rem; font-weight: 750; letter-spacing: -.01em; }
.account-options p { margin: 0; color: var(--muted); font-size: .8rem; }
.account-cancel { display: grid; margin: 50px 0 28px; padding: 39px 42px; grid-template-columns: 1fr auto; gap: 40px; align-items: center; background: var(--powder); border: 1px solid rgba(206,143,121,.26); border-radius: 20px; }
.account-cancel .eyebrow { margin-bottom: 9px; }
.account-cancel h2 { margin-bottom: 13px; font-size: clamp(2rem, 4vw, 3.2rem); }
.account-cancel p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--muted); font-size: .86rem; }
.account-cancel p + p { margin-top: 14px; }
.account-cancel-button { white-space: nowrap; }
.cancellation-shell { max-width: 820px; }
.cancellation-form { display: grid; gap: 20px; margin: 34px 0 55px; padding: 34px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.cancellation-form > label { display: grid; gap: 7px; color: var(--ink); font-size: .78rem; font-weight: 700; }
.cancellation-form input[type="email"], .cancellation-form input[type="date"], .cancellation-form textarea { width: 100%; padding: 12px 14px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.cancellation-form fieldset { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.cancellation-form legend { margin-bottom: 8px; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; }
.cancellation-form fieldset label { color: var(--ink); font-size: .78rem; }
.cancellation-review { padding: 16px; background: var(--powder); border-radius: 10px; }
.cancellation-review p { margin: 5px 0 0; color: var(--muted); font-size: .75rem; }
.cancellation-confirmation { margin: 35px 0 60px; padding: 36px; background: var(--powder); border-radius: 18px; }
.cancellation-confirmation .button, .cancellation-confirmation .text-link { margin-top: 20px; margin-right: 14px; }
.account-delete { margin-top: 18px; background: var(--white); border-color: var(--line); }
.account-delete-note strong { color: var(--ink); }
.account-help { margin: 60px 0; }
.account-help > h2 { margin-bottom: 30px; font-size: clamp(2.2rem, 4vw, 3.3rem); }
.account-help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.account-help article { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 15px; }
.account-help h3 { margin-bottom: 8px; font-family: var(--sans); font-size: .9rem; font-weight: 750; letter-spacing: -.01em; }
.account-help p { margin: 0; color: var(--muted); font-size: .79rem; }
.account-help a { color: var(--rose-dark); font-weight: 650; text-underline-offset: 3px; }
.account-legal-note { padding-top: 25px; color: var(--muted); border-top: 1px solid var(--line); font-size: .7rem; }
.account-footer { display: flex; width: min(1060px, calc(100% - 48px)); margin-inline: auto; padding: 0 0 50px; align-items: center; justify-content: space-between; gap: 25px; color: var(--muted); font-size: .72rem; }
.account-footer p { margin: 0; }
.account-footer nav { display: flex; gap: 18px; }
.account-footer a { color: var(--muted); text-decoration: none; }
.account-footer a:hover { color: var(--rose-dark); }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay { transition-delay: .12s; }
/* Fail-safe: never let copy stay invisible if JS is blocked or the observer misfires. */
@media (scripting: none) { .reveal { opacity: 1; transform: none; } }

@media (max-width: 1020px) {
  :root { --shell: min(100% - 40px, 900px); }
  .hero { min-height: auto; padding-bottom: 65px; }
  .hero-grid { grid-template-columns: 1fr .72fr; gap: 30px; }
  .phone-stage { transform: scale(.9); transform-origin: center; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .price-card-featured { grid-row: 1; transform: none; }
  .price-card ul { min-height: 0; }
  .testimonial-layout { grid-template-columns: 1fr 1fr; }.testimonial.featured { grid-row: span 2; }.testimonial-stack-offset { padding-top: 0; }
  .difference-grid, .safety-grid, .faq-grid { gap: 55px; }
  .trust-blocks { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
  .trust-block h3 { min-height: 0; }
  .legal-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .legal-toc { padding: 25px 20px; }
  .legal-footer { padding-left: 244px; }
  .account-options { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --shell: calc(100% - 32px); --radius: 22px; }
  html { scroll-padding-bottom: 78px; }
  body { font-size: 16px; padding-bottom: 69px; }
  h1 { font-size: clamp(2.1rem, 9.6vw, 3.2rem); }
  h2 { font-size: clamp(1.7rem, 7.5vw, 2.5rem); }
  .section { padding: 83px 0; }
  .site-header { width: calc(100% - 32px); height: 68px; }
  .logo-wordmark-light { width: auto; height: 60px; }
  .logo-lockup { width: 55px; height: 55px; }
  .header-guide { display: none; }
  .hero { padding: 92px 0 34px; }
  .hero-grid { display: flex; flex-direction: column; gap: 29px; }
  .hero-copy { text-align: center; }
  .hero-introduction { margin-top: 0; }
  .hero-lead { margin-bottom: 14px; font-size: .96rem; }
  .hero-lead-secondary { margin-bottom: 0; }
  .hero-actions { width: 100%; align-items: stretch; }
  .hero-secondary-link { align-self: center; margin-left: 0; }
  .hero .button-large { padding-inline: 18px; font-size: .91rem; }
  .phone-stage { width: 100%; max-width: 390px; min-height: 520px; margin: 16px auto 0; transform: scale(.8); }
  .float-card-one { right: 2px; }.float-card-two { left: 2px; }
  .trust-strip { display: grid; margin-top: 45px; padding-top: 20px; grid-template-columns: 1fr 1fr; gap: 10px 12px; text-align: center; }
  .steps { grid-template-columns: 1fr; }
  .step-card { min-height: 0; padding: 26px; }.step-icon { margin-bottom: 25px; }
  .split-grid, .difference-grid, .safety-grid, .faq-grid { grid-template-columns: 1fr; gap: 45px; }
  .empathy .section-heading, .difference-intro { position: static; }
  .empathy-copy { font-size: .98rem; }.empathy blockquote { margin: 35px 0; font-size: 1.7rem; }
  .benefit-grid { grid-template-columns: 1fr; margin-top: 45px; }
  .benefits-light .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card { min-height: 0; padding: 24px; }.benefit-icon { margin-bottom: 25px; }.benefit-card h3 { min-height: 0; }
  .benefits-light .benefit-card { min-height: 0; }
  .future-copy { font-size: 1.15rem; }
  .testimonial-layout, .testimonial-layout-seven { grid-template-columns: 1fr; }.testimonial.featured, .testimonial-layout-seven .featured { grid-row: auto; }.testimonial.featured p { font-size: 1.2rem; }
  .steps-connected::before { display: none; }
  .origin-card { align-items: flex-start; }
  .security-badges { margin-bottom: 10px; }
  .guarantee { align-items: flex-start; }
  .pricing-grid { gap: 23px; }.price-card { padding: 34px 25px 27px; }.price-card-featured { padding-top: 50px; }
  .payment-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; text-align: center; }
  .final-cta { padding: 90px 0; }
  .trust-blocks { margin: 45px 0 70px; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; }.footer-bottom { flex-direction: column; gap: 8px; }.footer-bottom p:last-child { text-align: left; }
  .mobile-sticky-cta { position: fixed; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; z-index: 50; display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 9px; color: #241b1a; background: linear-gradient(135deg, #e3ad98, var(--rose)); border-radius: 100px; box-shadow: 0 10px 35px rgba(17,27,54,.38); cursor: pointer; font-size: .88rem; font-weight: 750; transition: opacity .25s ease, transform .25s ease; }
  .modal { padding: 0; align-items: end; }
  .modal-panel { width: 100%; max-height: 94dvh; padding: 26px 18px 17px; border-radius: 25px 25px 0 0; }
  .modal-heading { padding-right: 36px; }.modal-heading .brand-moon { display: none; }.modal-heading h2 { font-size: 1.8rem; }
  .checkout-plan-options label > .checkout-plan-card { min-height: 72px; padding: 12px 12px 12px 44px; gap: 9px; }
  .checkout-plan-options label > .checkout-plan-card::before { top: 27px; left: 15px; }
  .checkout-plan-value { min-width: 72px; }
  .checkout-plan-value strong { font-size: .98rem; }
  .checkout-trial-banner { padding-inline: 12px; }
  .checkout-fields-two { grid-template-columns: 1fr; }
  .checkout-phone { grid-template-columns: 105px 1fr; }
  .checkout-step-actions { align-items: stretch; flex-direction: column-reverse; }
  .checkout-step-actions .button { width: 100%; }
  .plan-header { width: calc(100% - 32px); }
  .plan-shell { width: calc(100% - 24px); margin-top: 5px; }
  .plan-intro { margin-bottom: 30px; }
  .plan-intro h1 { font-size: clamp(2.05rem, 9vw, 3.1rem); }
  .fallback-consent-card { padding: 21px 18px; }
  .plan-expired { margin: 45px auto; padding: 32px 22px; }
  .legal-page { padding: 30px 16px; }.legal-page main { padding: 30px 22px; }
  .legal-document { padding: 0; padding-bottom: 0; }
  .legal-document::before { height: 220px; }
  .legal-header { width: calc(100% - 32px); height: 83px; }
  .legal-brand { width: 120px; height: 67px; }
  .legal-back { font-size: .74rem; }
  .legal-layout { display: block; width: calc(100% - 24px); margin: 14px auto 45px; }
  .legal-toc { position: static; margin-bottom: 12px; padding: 18px 20px; }
  .legal-toc .eyebrow, .legal-toc-title, .legal-toc nav { display: none; }
  .legal-contact-card { margin: 0; padding: 0; border: 0; }
  .legal-document .legal-content { padding: 40px 22px; border-radius: 21px; }
  .legal-intro { padding-bottom: 31px; }
  .legal-document .legal-intro h1 { overflow-wrap: break-word; hyphens: auto; font-size: clamp(2rem, 8.8vw, 3rem); }
  .legal-lead { font-size: .96rem; }
  .legal-notice { margin-top: 30px; padding: 20px; grid-template-columns: 30px 1fr; gap: 11px; }
  .legal-notice-icon { width: 29px; height: 29px; }
  .legal-notice p { font-size: .81rem; }
  .legal-section { padding-top: 42px; }
  .legal-document .legal-section h2 { font-size: clamp(1.55rem, 7vw, 2.2rem); }
  .legal-section p, .legal-section li { font-size: .88rem; }
  .legal-card-grid, .legal-rights { grid-template-columns: 1fr; }
  .legal-table { min-width: 590px; }
  .legal-final-contact { padding: 30px 24px; }
  .legal-final-contact .button { width: 100%; padding-inline: 14px; font-size: .78rem; }
  .legal-footer { width: calc(100% - 32px); padding: 0 0 40px; flex-direction: column; align-items: flex-start; }
  .legal-fact-list > div { grid-template-columns: 1fr; gap: 3px; }
  .legal-fact-list small { grid-column: 1; }
  .terms-warning { padding: 32px 20px 18px; }
  .legal-price-list > div { grid-template-columns: 1fr; }
  .withdrawal-box, .withdrawal-form { padding: 22px 18px; }
  .account-page { padding-bottom: 0; }
  .account-page::before { height: 430px; }
  .account-header { width: calc(100% - 32px); height: 83px; }
  .account-brand { width: 120px; height: 67px; }
  .account-back { font-size: .72rem; }
  .account-shell { width: calc(100% - 24px); margin: 15px auto 45px; }
  .account-hero { padding: 45px 21px; border-radius: 21px; }
  .account-hero h1 { font-size: clamp(2.05rem, 9vw, 3.1rem); }
  .account-hero > p:not(.eyebrow):not(.account-note) { font-size: .92rem; }
  .account-primary { width: 100%; padding-inline: 16px; font-size: .83rem; }
  .account-options { margin-top: 14px; }
  .account-options article { padding: 23px; }
  .account-cancel { display: block; margin-top: 35px; padding: 29px 22px; }
  .account-cancel-button { width: 100%; margin-top: 24px; white-space: normal; }
  .cancellation-form, .cancellation-confirmation { padding: 24px 20px; }
  .account-help { margin: 45px 0; }
  .account-help-grid { grid-template-columns: 1fr; }
  .account-footer { width: calc(100% - 32px); padding-bottom: 35px; flex-direction: column; align-items: flex-start; }
  .account-footer nav { flex-wrap: wrap; }
}

@media (max-width: 370px) {
  .phone-stage { transform: scale(.73); margin: 8px auto 0; }
  .price-per-day strong { font-size: 2.3rem; }
  .button { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}