/* Approved cream direction, September 2026. Real app images stay dark. */
.collection-home { --espresso:#32271f; --muted:#695a4c; --bronze:#806038; color:var(--espresso); }
.collection-wrap { width:min(1160px, calc(100% - 80px)); margin-inline:auto; }
.collection-home h1,.collection-home h2,.collection-home h3 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; letter-spacing:-.035em; }
.collection-home h1 { font-size:clamp(46px,5.3vw,72px); line-height:1.02; margin:20px 0 24px; }
.collection-home h2 { font-size:clamp(38px,4vw,54px); line-height:1.08; margin:12px 0 20px; }
.collection-home h3 { font-size:31px; line-height:1.14; margin:18px 0; }
.collection-home em { font-weight:400; color:var(--bronze); }
.collection-home p { color:var(--muted); line-height:1.75; }
.collection-eyebrow { font-size:10px; font-weight:700; letter-spacing:.2em; margin:0; }
.collection-hero { overflow:hidden; background:radial-gradient(ellipse at 80% 70%,#e4d7c3 0,transparent 55%),#f3eee6; }
.hero-grid { display:grid; grid-template-columns:1.12fr 1fr; align-items:center; gap:45px; min-height:680px; padding-block:44px; }
.hero-copy { padding-block:25px; }
.hero-description { font-size:17px; max-width:450px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:26px; margin-top:30px; }
.collection-home .appstore-badge { width:156px; height:52px; }
.collection-text-link { font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.collection-home .download-note { font-size:11px; margin:12px 0 0; }
.collection-home .affiliation-note { font-size:11px; margin:25px 0 0; max-width:420px; }
.hero-art { position:relative; display:grid; place-items:center; align-self:stretch; }
.hero-arch { position:absolute; inset:35px 10px 20px; border-radius:220px 220px 12px 12px; background:linear-gradient(115deg,#f9f6f1 10%,#e5d1b5 62%,#f1e1c9); box-shadow:inset 8px 0 20px #bda38225; }
.hero-art picture { z-index:1; width:100%; display:flex; justify-content:center; }
.hero-art img { width:390px; max-width:100%; height:auto; filter:drop-shadow(18px 22px 20px #61422225); transform:rotate(3deg); }
.hero-art-caption { position:absolute; z-index:2; right:-10px; bottom:30px; background:#fbf6ed; border:1px solid #d7c4a9; padding:15px 20px; font-family:'Cormorant Garamond',serif; font-size:21px; line-height:1.2!important; box-shadow:0 10px 30px #74512a08; }
.collection-proof { background:#e6ddcf; border-block:1px solid #dcd3c6; }
.proof-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:26px; }
.proof-inner p { margin:0; font-size:12px; line-height:1.4; }
.proof-inner strong { font-size:19px; font-family:'Cormorant Garamond',serif; font-weight:500; }
.proof-inner>span { font-size:12px; color:#5d4d3d; }
.editorial-showcase { background:#f9f6f0; }
.editorial-grid { display:grid; grid-template-columns:1.05fr .9fr 1.05fr; gap:22px; align-items:start; }
.editorial-grid figure { margin:0; }
.editorial-grid figure:nth-child(2) { margin-top:54px; }
.editorial-grid img { display:block; width:100%; height:430px; object-fit:cover; border-radius:4px; box-shadow:0 18px 38px #7255381c; }
.editorial-grid figure:nth-child(2) img { object-position:center 38%; }
.editorial-grid figcaption { margin-top:13px; color:#695a4c; font-family:'Cormorant Garamond',serif; font-size:19px; }
.collection-section { padding-block:88px; scroll-margin-top:85px; }
.section-heading { max-width:650px; margin:0 auto 45px; text-align:center; }
.section-heading>p:last-child { font-size:15px; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.benefit-grid article { padding:24px 28px 28px; border:1px solid #dcd3c6; border-radius:4px; background:#f9f6f0; }
.benefit-number { color:#806038; font-size:10px; letter-spacing:.16em; font-weight:700; }
.benefit-grid p { font-size:14px; }
.benefit-grid a { display:block; margin-top:20px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.collection-privacy { background:#e9e1d4; }
.privacy-grid,.faq-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:100px; }
.privacy-points article { padding-bottom:15px; }
.privacy-points h3 { font-family:'Manrope',sans-serif; font-size:15px; letter-spacing:0; font-weight:600; margin:0 0 8px; }
.privacy-points p { font-size:14px; margin:0 0 20px; }
.collection-faq details { border-bottom:1px solid #d8cfc2; }
.collection-faq summary { cursor:pointer; padding:22px 30px 22px 0; font-size:14px; font-weight:600; list-style:none; position:relative; }
.collection-faq summary::-webkit-details-marker { display:none; }
.collection-faq summary::after { content:'+'; position:absolute; right:4px; top:17px; font-size:24px; font-weight:400; }
.collection-faq details[open] summary::after { content:'−'; }
.collection-faq details p { font-size:14px; padding-bottom:20px; margin:0; }
.collection-faq>a { display:inline-block; margin-top:25px; }
.collection-final { padding:75px 0; text-align:center; background:radial-gradient(ellipse at 50% 100%,#e2d6c4,transparent 75%),#e6ddcf; }
.collection-final h2 { font-size:clamp(42px,5vw,62px); }
.collection-final .appstore-badge { margin:24px auto 0; }
@media(max-width:767px) {
 .collection-wrap { width:calc(100% - 40px); }
 .hero-grid { grid-template-columns:1fr; gap:10px; padding-block:28px 22px; }
 .hero-copy { padding:0; text-align:center; }
 .collection-home h1 { font-size:46px; margin:16px 0 18px; }
 .hero-description { font-size:15px; margin-inline:auto; }
 .hero-actions { justify-content:center; gap:20px; margin-top:22px; }
 .collection-home .affiliation-note { margin:20px auto 0; font-size:10px; }
 .hero-art { min-height:355px; max-width:340px; width:100%; margin:10px auto 0; }
 .hero-art img { width:250px; }
 .hero-arch { inset:10px 20px 10px; }
 .hero-art-caption { font-size:17px; right:0; bottom:20px; padding:10px 14px; }
 .proof-inner { display:grid; grid-template-columns:1fr 1fr; padding-block:20px; gap:16px; }
 .proof-inner>span { font-size:11px; }
 .editorial-grid { grid-template-columns:1fr; gap:28px; }
 .editorial-grid figure:nth-child(2) { margin-top:0; }
 .editorial-grid img { height:360px; }
 .collection-section { padding-block:56px; }
 .benefit-grid { grid-template-columns:1fr; gap:24px; }
 .benefit-grid article { padding:25px; }
 .benefit-grid h3 br { display:none; }
 .privacy-grid,.faq-grid { grid-template-columns:1fr; gap:35px; }
 .section-heading { margin-bottom:30px; }
 .collection-final { padding-block:56px; }
}

/* Four layers: warm base, light, fine grain, then a foreground edge.
   All paint is local; the texture never covers text or captures input. */
.collection-home {
 --cream-base:#f3eee6; --cream-paper:#fcf9f4; --cream-line:#d9c8b0;
 --cream-shadow:0 26px 60px #62452820,0 3px 8px #6245280b;
 --cream-motion:240ms cubic-bezier(.2,.7,.3,1);
}
.collection-hero,.collection-demo,.collection-final { position:relative; isolation:isolate; overflow:hidden; background:var(--cream-base); }
.collection-hero::before,.collection-demo::before,.collection-final::before {
 content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
 background:radial-gradient(ellipse at 18% 12%,#fffdf8 0,transparent 58%),radial-gradient(ellipse at 85% 65%,#d9ccb885 0,transparent 58%);
}
.collection-hero::after,.collection-demo::after,.collection-final::after {
 content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.24;
 background-image:url('/assets/images/cream-grain.svg');
}
.hero-grid { position:relative; min-height:690px; padding-block:48px 56px; }
.hero-copy { position:relative; z-index:3; }
.hero-art { isolation:isolate; }
.hero-art::after {
 content:''; position:absolute; z-index:0; width:115%; height:110px; left:-5%; bottom:0;
 border-radius:50%; background:radial-gradient(ellipse,#93714b32,transparent 66%); pointer-events:none;
}
.hero-arch { inset:25px 0 12px; border:1px solid #ffffff80; background:linear-gradient(125deg,#fffcf6 5%,#e5d0b4 64%,#f3e5d0); box-shadow:inset 14px 4px 28px #ffffff70,inset -12px -8px 36px #a6814930,24px 32px 70px #72502b12; }
.hero-arch::before { content:''; position:absolute; inset:17px; border:1px solid #fff9; border-radius:inherit; }
.hero-art img { transform:rotate(1deg); filter:drop-shadow(15px 24px 16px #61422235); }
.hero-art-caption { z-index:2; bottom:35px; right:-5px; background:var(--cream-paper); border-color:var(--cream-line); padding:22px 26px; font-size:25px; color:var(--espresso); box-shadow:var(--cream-shadow); transition:transform var(--cream-motion); }
.caption-label,.caption-action { display:block; font-family:'Manrope',sans-serif; font-size:9px; line-height:1.6; letter-spacing:.12em; color:var(--muted); }
.caption-label { margin-bottom:12px; }
.caption-action { margin-top:14px; font-size:11px; letter-spacing:0; color:var(--bronze); }
.collection-home .download-note,.collection-home .affiliation-note { font-size:12px; }
.collection-eyebrow { font-size:11px; letter-spacing:.16em; }
.collection-text-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.collection-proof { background:#f0e5d5; }
.scan-description { min-height:80px; margin-bottom:12px; }
/* The photo fills the top of the arch and fades into the cream. No text on top:
   the site gray drops below 4.5:1 as soon as a photo darkens it, even heavily veiled. */
.scan-honesty { font-size:10px; margin:12px 0 0; }
.editorial-showcase { background:#fbf9f5; }
.editorial-grid { grid-template-columns:1fr 1.16fr .65fr; gap:34px; align-items:center; }
.editorial-grid figure:nth-child(2) { margin-top:0; }
.editorial-grid img { height:auto; object-fit:contain; border-radius:5px; border:1px solid #e2d4c0; box-shadow:var(--cream-shadow); }
.editorial-grid figcaption { font-size:20px; line-height:1.4; margin-top:20px; }
.editorial-label { display:block; font:700 9px 'Manrope',sans-serif; letter-spacing:.15em; color:var(--bronze); margin-bottom:7px; }
.benefit-grid { gap:40px; }
.benefit-grid article { background:transparent; border:0; border-top:1px solid #cbb594; border-radius:0; padding:25px 0 0; }
.collection-home .benefit-grid h3 { font-size:29px; }
.collection-final { box-shadow:inset 0 -60px 80px -60px #9b754540; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .hero-art-caption:hover { transform:translateY(-4px); }
}
@media(min-width:768px) and (max-width:1050px) {
 .hero-grid { gap:25px; grid-template-columns:1.15fr 1fr; }
 .hero-art-caption { right:0; font-size:21px; padding:16px; }
 .caption-label { font-size:8px; }
 .editorial-grid { gap:18px; }
}
@media(max-width:767px) {
 .hero-grid { min-height:0; padding-block:34px 32px; }
 .collection-home h1 { font-size:clamp(40px,10.7vw,56px); }
 .hero-art { min-height:390px; margin-top:24px; }
 .hero-art img { width:260px; }
 .hero-art-caption { bottom:10px; right:0; font-size:21px; padding:16px 18px; }
 .caption-label { font-size:8px; margin-bottom:8px; }
 .caption-action { margin-top:10px; }
 .hero-arch { inset:8px 14px 15px; }
 .hero-actions { gap:12px 22px; }
 .collection-home .affiliation-note { font-size:11px; }
 .scan-description { min-height:80px; }
 .editorial-grid { grid-template-columns:1fr; gap:36px; max-width:390px; margin-inline:auto; }
 .editorial-grid figure { width:90%; margin-inline:auto; }
 .editorial-grid figure:nth-child(2) { width:100%; margin-inline:auto; }
 .editorial-grid figure:nth-child(3) { width:66%; }
 .editorial-grid img { height:auto; }
 .editorial-grid figcaption { margin-top:14px; }
 .benefit-grid { gap:28px; }
}

/* ---- App Store wheel: six scenes, the center one forward, neighbours visible on both sides ---- */
.editorial-showcase { padding-bottom:64px; }
.wheel { position:relative; margin-top:8px; }
.wheel-track { list-style:none; margin:0; padding:0; position:relative; height:min(580px,82vw); perspective:1800px; perspective-origin:50% 45%; overflow:hidden; }
.wheel-slide { position:absolute; left:50%; top:0; width:min(280px,50vw); margin-left:calc(min(280px,50vw) / -2); transform-style:preserve-3d; transition:transform 760ms cubic-bezier(.22,.8,.26,1),opacity 520ms ease,filter 760ms ease; will-change:transform; cursor:pointer; }
.wheel-slide figure { margin:0; }
.wheel-slide img { display:block; width:100%; height:auto; border-radius:6px; border:1px solid #e2d4c0; box-shadow:0 30px 60px #62452826,0 4px 10px #6245280d; background:#e6ddcf; }
.wheel-slide figcaption { text-align:center; margin-top:18px; opacity:0; transform:translateY(8px); transition:opacity 520ms ease 220ms,transform 520ms ease 220ms; }
.wheel-slide figcaption strong { display:block; font:500 24px/1.2 'Cormorant Garamond',serif; color:var(--espresso); }
.wheel-slide figcaption span { display:block; margin-top:5px; font:500 12px 'Manrope',sans-serif; letter-spacing:.02em; color:var(--muted); }
.wheel-slide.is-active { z-index:6; cursor:default; }
.wheel-slide.is-active figcaption { opacity:1; transform:none; }
.wheel-slide[data-offset="-1"],.wheel-slide[data-offset="1"] { z-index:5; }
.wheel-slide[data-offset="-2"],.wheel-slide[data-offset="2"],.wheel-slide[data-offset="-3"],.wheel-slide[data-offset="3"] { z-index:3; opacity:0; pointer-events:none; }
.wheel-controls { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:6px; }
.wheel-arrow { width:44px; height:44px; border-radius:50%; border:1px solid #b79a70; background:var(--cream-paper); color:var(--espresso); font:16px 'Manrope',sans-serif; cursor:pointer; transition:background var(--cream-motion),transform var(--cream-motion); }
.wheel-arrow:hover { background:#e6dac8; transform:translateY(-1px); }
.wheel-dots { display:flex; gap:10px; }
.wheel-dots button { position:relative; width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#cdb897; cursor:pointer; transition:background var(--cream-motion),transform var(--cream-motion); }
.wheel-dots button::after { content:''; position:absolute; inset:-8px; }
.wheel-dots button[aria-current="true"] { background:var(--bronze); transform:scale(1.3); }
.wheel-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; }
@media(max-width:767px){ .wheel-track { height:min(520px,118vw); perspective:900px; } .wheel-slide figcaption strong { font-size:20px; } }

/* ---- Scroll entrance: text enters as each section scrolls in (quiet, short, one direction) ---- */
.collection-home [data-arrive] { opacity:0; transform:translateY(22px); transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 700ms cubic-bezier(.2,.7,.2,1); }
.collection-home [data-arrive].is-in { opacity:1; transform:none; }
.collection-home [data-arrive-stagger]>* { opacity:0; transform:translateY(18px); transition:opacity 640ms cubic-bezier(.2,.7,.2,1),transform 640ms cubic-bezier(.2,.7,.2,1); }
.collection-home [data-arrive-stagger].is-in>* { opacity:1; transform:none; }
.collection-home [data-arrive-stagger].is-in>*:nth-child(2) { transition-delay:110ms; }
.collection-home [data-arrive-stagger].is-in>*:nth-child(3) { transition-delay:220ms; }
.collection-home [data-arrive-stagger].is-in>*:nth-child(4) { transition-delay:330ms; }
.collection-home [data-arrive-stagger].is-in>*:nth-child(5) { transition-delay:440ms; }
.hero-art { transition:transform 80ms linear; }
.benefit-grid article { transition:transform var(--cream-motion),box-shadow var(--cream-motion); }
.benefit-grid article:hover { transform:translateY(-4px); box-shadow:0 22px 44px #6245281c; }
.editorial-grid img,.hero-art-caption:hover { transform:translateY(-3px); }
@media(prefers-reduced-motion:reduce){ .collection-home [data-arrive],.collection-home [data-arrive-stagger]>* { opacity:1; transform:none; transition:none; } .wheel-slide { transition:none; } }

/* ---- Download CTA: one soft component, everywhere ---- */
.collection-home .soft-cta,.lyst-footer .soft-cta { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 22px; border-radius:10px; background:#e6dac8!important; border:1px solid #b79a70!important; color:#32271f!important; font:600 14px 'Manrope',sans-serif; text-decoration:none; box-shadow:none!important; transition:background var(--cream-motion),transform var(--cream-motion); }
.collection-home .soft-cta:hover,.lyst-footer .soft-cta:hover { background:#d9c8b0!important; transform:translateY(-1px); }
.soft-cta .app-store-icon { width:18px; height:18px; flex:none; }
.mobile-menu-footer .soft-cta { display:inline-flex; }
.collection-final .soft-cta { margin-top:6px; }

/* ---- Hero, right side: the App Store visual itself, framed like a magazine page ---- */
.hero-art--editorial { display:block; position:relative; padding:0 18px 26px 0; }
.hero-art--editorial::after { display:none; }
.hero-editorial { margin:0; position:relative; border-radius:8px; overflow:hidden; border:1px solid #e2d4c0; box-shadow:0 34px 70px #62452826,0 4px 12px #6245280f; transform:rotate(0); }
.hero-editorial::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px #fff6; pointer-events:none; }
.hero-art--editorial img { display:block; width:100%; max-width:460px; height:auto; transform:none; filter:none; }
.hero-art--editorial .hero-art-caption { right:-6px; bottom:-8px; }
@media(max-width:767px){ .hero-art--editorial { max-width:88vw; margin:18px auto 0; padding:0 0 60px; } .hero-art--editorial img { max-width:100%; } .hero-art--editorial .hero-art-caption { right:0; bottom:0; } }
/* the site's four-layer background shows through on the home page */
.collection-hero,.collection-demo,.collection-final { background:transparent; }
.collection-hero::before,.collection-demo::before,.collection-final::before { opacity:.7; }

/* ---- Marker band: one editorial line, three numbered markers separated by a hairline ---- */
.collection-proof { position:relative; background:linear-gradient(180deg,#eadcc6 0%,#e4d5bc 100%); border-block:1px solid #d6c4a8; }
.collection-proof::before { content:''; position:absolute; inset:0; background:url('/assets/images/cream-grain.svg'); opacity:.18; pointer-events:none; }
.proof-inner { position:relative; display:grid; grid-template-columns:1.1fr repeat(3,1fr); align-items:center; gap:0; padding-block:30px; }
.proof-inner p { margin:0; padding-right:32px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6b5a48; line-height:1.5; }
.proof-inner strong { display:block; margin-top:4px; font:500 26px/1.1 'Cormorant Garamond',serif; letter-spacing:0; text-transform:none; color:#32271f; }
.proof-inner>span { display:flex; align-items:center; gap:14px; padding:6px 0 6px 28px; border-left:1px solid #c9b493; font:500 14px 'Manrope',sans-serif; color:#32271f; letter-spacing:.01em; }
.proof-inner>span i { font:600 10px 'Manrope',sans-serif; letter-spacing:.14em; color:#806038; font-style:normal; }
@media(max-width:767px){ .proof-inner { grid-template-columns:1fr; gap:14px; padding-block:24px; } .proof-inner p { padding:0 0 10px; border-bottom:1px solid #c9b493; } .proof-inner>span { border-left:0; padding-left:0; font-size:13px; } }

/* ---- "Your scan and your data": expands in place; "See more" scrolls down to the section ---- */
.scan-details { margin-top:4px; }
.scan-details summary { list-style:none; cursor:pointer; user-select:none; }
.scan-details summary::-webkit-details-marker { display:none; }
.scan-details-mark { display:inline-grid; place-items:center; width:22px; height:22px; border:1px solid #b79a70; border-radius:50%; font:500 14px/1 'Manrope',sans-serif; color:var(--bronze); transition:transform var(--cream-motion),background var(--cream-motion); }
.scan-details[open] .scan-details-mark { transform:rotate(45deg); background:#e6dac8; }
.scan-details-body { max-width:480px; margin-top:14px; padding:18px 20px 16px; border-left:2px solid #d9c8b0; background:#f9f6f0aa; border-radius:0 8px 8px 0; animation:scanDetails 320ms cubic-bezier(.2,.7,.3,1); }
.scan-details-body p { margin:0 0 10px; font-size:13px; line-height:1.55; color:var(--muted); }
.scan-details-body strong { color:var(--espresso); font-weight:600; }
.scan-details-body .collection-text-link { min-height:32px; font-size:13px; margin-top:4px; }
@keyframes scanDetails { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .scan-details-body { animation:none; } }

/* ---- Data section: an emblem on the left, a line pictogram per point ---- */
.privacy-emblem { display:grid; place-items:center; width:64px; height:64px; margin-bottom:26px; border-radius:50%; border:1px solid #b79a70; background:radial-gradient(circle at 35% 30%,#fcf9f4,#e6dac8); color:var(--bronze); box-shadow:0 14px 30px #62452818, inset 0 0 0 6px #f9f6f0; }
.privacy-emblem .privacy-icon { width:28px; height:28px; }
.privacy-points article { display:grid; grid-template-columns:34px 1fr; column-gap:14px; align-items:start; padding-bottom:22px; }
.privacy-points article .privacy-icon { width:24px; height:24px; margin-top:2px; color:var(--bronze); grid-row:span 2; }
.privacy-points article h3,.privacy-points article p { grid-column:2; }
@media(max-width:767px){ .privacy-emblem { width:52px; height:52px; margin-bottom:18px; } }

/* ---- Top of page: Paris in four layers ----
   Opaque sky, buildings, alley, columns: four images with the same framing, stacked.
   Load entrance: the farthest layer slides the most. On scroll the sky stays almost in place,
   the columns move with the page and cover the scene (data-rate = share of the scroll retained). */
.collection-hero { padding:0; }
.paris-stage { position:relative; z-index:1; height:100vh; min-height:640px; max-height:1100px; overflow:hidden; background:#eee7dc; }
.paris-layer { position:absolute; inset:0; width:100%; max-width:none; height:100%; object-fit:cover; object-position:center bottom; display:block; will-change:transform; }
.paris-layer--allee { top:auto; bottom:-10%; }
.paris-layer--batisses { top:auto; bottom:-10%; object-position:center bottom; }
.paris-balloon { position:absolute; top:14%; left:0; width:24%; max-width:none; height:auto; transform:translate(-4vw,-4vh); transform-origin:50% 0; pointer-events:none; filter:url(#balloon-veil); }
@media(prefers-reduced-motion:no-preference) {
 /* Enters from the left, fades out once it reaches the right column, and starts again at once.
    The negative delay puts it already in the sky on the first frame. */
 .paris-balloon { animation:parisBalloon 62s linear -12s infinite, balloonSway 7s ease-in-out infinite; }
 @keyframes parisBalloon { 0% { opacity:1; transform:translate(-26vw,-4vh) scale(1); } 94% { opacity:1; } 100% { opacity:0; transform:translate(80vw,-12vh) scale(.8); } }
 /* A very light swing around the top center, where the balloon hangs from. */
 @keyframes balloonSway { 0%, 100% { rotate:-1.2deg; } 50% { rotate:1.2deg; } }
}
@media(max-width:767px) {
 .paris-balloon { top:13%; width:53%; transform:translate(-12vw,0); }
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference) {
 .paris-balloon { animation:parisBalloonPhone 48s linear -9s infinite, balloonSway 7s ease-in-out infinite; }
 @keyframes parisBalloonPhone { 0% { opacity:1; transform:translate(-56vw,0) scale(1); } 94% { opacity:1; } 100% { opacity:0; transform:translate(64vw,-6vh) scale(.66); } }
}
.paris-veil { top:0; height:220px; bottom:auto; background:linear-gradient(#eee7dccc,transparent); }
.paris-fade { top:auto; bottom:0; height:180px; background:linear-gradient(transparent,#f3eee6); }
.collection-hero .hero-grid { min-height:0; padding-block:56px 64px; }
@media(prefers-reduced-motion:no-preference) {
 .paris-layer--ciel { animation:parisFade 1.1s cubic-bezier(.2,.7,.2,1) both; }
 .paris-layer--batisses,.paris-layer--allee,.paris-layer--colonnes { animation:parisIn 1.1s cubic-bezier(.2,.7,.2,1) both; }
 .paris-layer--batisses { --from:72px; }
 .paris-layer--allee { --from:48px; animation-delay:120ms; }
 .paris-layer--colonnes { --from:36px; animation-delay:240ms; }
 @keyframes parisIn { from { opacity:0; transform:translateY(var(--from)); } to { opacity:1; transform:translateY(var(--y,0)); } }
 @keyframes parisFade { from { opacity:0; } to { opacity:1; } }
}
@media(max-width:767px) {
 .paris-stage { height:80vh; min-height:520px; }
 /* Phone: the same left column, cropped alone, placed at each edge and mirrored on the right.
    Full scene height so its top stays where it is on desktop; the inner side, facing the alley,
    is complete and the outer half is cut (object-position toward the center). */
 .paris-layer--colonnes { width:24%; left:0; right:auto; top:0; bottom:0; height:100%; object-position:right bottom; }
 .paris-layer--colonnes-right { left:auto; right:0; object-position:left bottom; }
 .paris-layer--batisses { bottom:-16%; }
 .paris-veil { height:120px; } .paris-fade { height:120px; }
}

/* Columns more present on large screens: the image is slightly taller, anchored to the bottom */
@media(min-width:768px) { .paris-layer--colonnes { top:auto; bottom:0; height:114%; } .paris-layer--colonnes-right { display:none; } }

/* ---- FAQ: one question open at a time, soft fade ---- */
.collection-faq details p { overflow:hidden; transition:max-height 820ms cubic-bezier(.2,.7,.2,1),opacity 700ms ease 80ms,filter 700ms ease 80ms,transform 820ms cubic-bezier(.2,.7,.2,1); }
.collection-faq details p.is-closing,.collection-faq details p.is-opening { max-height:0!important; opacity:0; filter:blur(6px); transform:translateY(-6px); padding-bottom:0; }
.collection-faq details { transition:background 320ms ease; }
.collection-faq details[open] { background:linear-gradient(90deg,#f9f6f0aa,transparent 70%); }
@media(prefers-reduced-motion:reduce) { .collection-faq details p { transition:none; } }

/* ---- Data: the title block stays in place; the point nearest the center is full ink, the others fade ---- */
.privacy-grid { align-items:start; }
.privacy-intro { position:sticky; top:120px; }
.privacy-points article { padding-block:26px; transition:opacity 760ms cubic-bezier(.2,.7,.2,1),transform 760ms cubic-bezier(.2,.7,.2,1); }
[data-privacy-live].is-live .privacy-points article { opacity:.82; transform:translateX(0) scale(.99); transform-origin:left center; }
[data-privacy-live].is-live .privacy-points article.is-current { opacity:1; transform:translateX(8px) scale(1.02); }
[data-privacy-live].is-live .privacy-points article.is-current h3 { color:var(--espresso); }
[data-privacy-live].is-live .privacy-points article.is-current .privacy-icon { color:var(--espresso); }
@media(max-width:767px){ .privacy-intro { position:static; } .privacy-points article { padding-block:18px; } [data-privacy-live].is-live .privacy-points article.is-current { transform:none; } }
@media(prefers-reduced-motion:reduce){ [data-privacy-live].is-live .privacy-points article { opacity:1; transform:none; transition:none; } }

/* ---- "Everything has its place": three points side by side, each numbered, all clickable ---- */
.benefit-sticky { padding:16px 0 8px; }
.benefit-step { display:block; margin-bottom:10px; font:500 40px/1 'Cormorant Garamond',Georgia,serif; letter-spacing:-.02em; color:var(--bronze); font-variant-numeric:lining-nums tabular-nums; }
@media(max-width:767px){ .benefit-step { font-size:34px; margin-bottom:6px; } }

/* ---- Wheel: light scroll reaction (translation and tilt driven by --wheel-p, from -1 to 1) ---- */
.wheel-track { transform:translateY(calc(var(--wheel-p,0) * 28px)) rotateX(calc(var(--wheel-p,0) * -3deg)); transform-style:preserve-3d; transition:transform 120ms linear; }
.wheel-slide[data-offset="-1"],.wheel-slide[data-offset="1"] { transition:transform 760ms cubic-bezier(.22,.8,.26,1),opacity 520ms ease; }
@media(prefers-reduced-motion:reduce){ .wheel-track { transform:none; } }

/* ---- Receipt demo: description and notes sit below the card ---- */
.scan-description { min-height:0; margin-bottom:0; }
.demo-foot { position:relative; padding:22px 0 44px; }
.demo-foot .scan-honesty { margin:0 0 10px; }
.demo-foot .scan-scope { font-size:12px; margin:0 0 10px; }
.demo-foot .scan-details { margin-top:0; }
.demo-foot .scan-details-body { max-width:560px; }
@media(max-width:767px) { .demo-foot { padding:10px 0 36px; } }

.editorial-showcase { padding-block:176px 128px; }
.collection-privacy { padding-block:176px; }
@media(max-width:767px) { .editorial-showcase { padding-block:112px 96px; } .collection-privacy { padding-block:112px; } }

/* ---- Wheel ---- */
.wheel-sticky { padding-top:0; }


/* ---- Scan flow: four fixed steps, no carousel ---- */
.collection-scanflow { background:#f9f6f0; }
.scanflow { display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin:0; padding:0; list-style:none; }
.scanflow-step { position:relative; margin:0; }
.scanflow-step figure { margin:0; padding:12px; background:var(--cream-paper); border:1px solid #dacbb7; border-radius:14px; box-shadow:0 18px 38px #7255381c; }
.scanflow-step img { display:block; width:100%; height:360px; object-fit:contain; object-position:top center; border-radius:8px; background:#fffdf8; }
.scanflow-step+.scanflow-step::before { content:''; position:absolute; top:190px; left:-22px; width:10px; height:1px; background:#c9b294; }
.scanflow-label { display:flex; align-items:baseline; gap:9px; margin:18px 0 0; font:700 11px 'Manrope',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--espresso); }
.scanflow-label i { font-family:'Cormorant Garamond',Georgia,serif; font-style:normal; font-size:20px; font-weight:500; color:var(--bronze); }
.collection-scanflow .scanflow-note { max-width:560px; margin:46px auto 0; text-align:center; font-size:13px; }
@media(max-width:1023px) { .scanflow { grid-template-columns:repeat(2,1fr); gap:30px; } .scanflow-step:nth-child(odd)+.scanflow-step::before { display:none; } }
@media(max-width:767px) { .scanflow { grid-template-columns:1fr; gap:38px; } .scanflow-step img { height:auto; max-height:62vh; } .scanflow-step+.scanflow-step::before { display:none; } .collection-scanflow .scanflow-note { margin-top:34px; } }

/* ---- On phones, one screenshot at a time; the step selector exists on phones only ---- */
.scanflow-tabs { display:none; }
@media(max-width:767px) {
  .scanflow-tabs { display:flex; gap:2px; margin:0 0 20px; border-bottom:1px solid var(--cream-line); }
  .scanflow-tabs button { position:relative; flex:1; min-height:48px; padding:10px 4px 12px; border:0; border-radius:6px 6px 0 0; font:700 11px 'Manrope',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:transparent; cursor:pointer; }
  .scanflow-tabs button i { display:block; font:500 17px 'Cormorant Garamond',Georgia,serif; font-style:normal; color:var(--bronze); }
  .scanflow-tabs button::after { content:''; position:absolute; left:10%; right:10%; bottom:-1px; height:2px; border-radius:2px; background:transparent; transition:background var(--cream-motion),left var(--cream-motion),right var(--cream-motion); }
  .scanflow-tabs button[aria-pressed=true] { color:var(--espresso); }
  .scanflow-tabs button[aria-pressed=true] i { color:var(--espresso); }
  .scanflow-tabs button[aria-pressed=true]::after { left:0; right:0; background:var(--bronze); }
  .scanflow-tabs button:focus-visible { outline:2px solid var(--bronze); outline-offset:2px; }
  .scanflow[data-scanflow-single] .scanflow-step { display:none; }
  .scanflow[data-scanflow-single] .scanflow-step.is-active { display:block; }
  .scanflow[data-scanflow-single] .scanflow-step .scanflow-label { display:none; }
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference) {
  .scanflow[data-scanflow-single] .scanflow-step.is-active { animation:scanflowFade .6s ease both; }
  @keyframes scanflowFade { from { opacity:0; } to { opacity:1; } }
}

/* ---- The scan lead line is a sentence, not an uppercase label ---- */
.scanflow-eyebrow { font-size:12px; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--muted); }

/* ---- OPEN RESEARCH section: same grid as the FAQ, no icon ---- */
/* .research-points p comes later with higher specificity, so the lead must be
   targeted with the same specificity or its margin is lost (seen at 375px). */
.research-points article { padding-bottom:22px; }
.research-points h3 { font-family:'Manrope',sans-serif; font-size:15px; letter-spacing:0; font-weight:600; margin:0 0 8px; }
.research-points p { font-size:14px; margin:0; }
.research-points p.research-lede { font-size:15px; max-width:56ch; margin:0 0 30px; color:var(--espresso); }
@media(max-width:767px) { .research-points p.research-lede { margin-bottom:26px; } .research-points article { padding-bottom:18px; } }

/* ---- Paper texture behind the home sections, blended into each section's own tone ---- */
body:has(.paris-stage--hero) .collection-section,body:has(.paris-stage--hero) .collection-hero { background-image:url('/assets/images/paper-texture.webp'); background-size:768px auto; background-repeat:repeat; background-blend-mode:multiply; }

/* Panorama de l'app : une seule image, epinglee a l'ecran ; le defilement vertical la fait
   avancer de gauche a droite, puis la page reprend sa descente. */
.app-panorama { position:relative; }
.app-panorama-sticky { position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; overflow:hidden; }
.app-panorama-track { overflow:hidden; width:100%; }
.app-panorama-strip { display:flex; width:max-content; will-change:transform; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%); }
.app-panorama-strip img { display:block; max-width:none; width:auto; height:clamp(380px, 44vw, 640px); user-select:none; -webkit-user-drag:none; }
@media (max-width: 767px) { .app-panorama-sticky { padding-top:64px; box-sizing:border-box; } .app-panorama-strip img { height:min(84svh, 720px); } }
@media (prefers-reduced-motion: reduce) { .app-panorama-sticky { position:static; height:auto; } .app-panorama-track { overflow-x:auto; } }

/* Everything has its place : l'aquarelle au centre, son papier blanc fondu dans le creme. */
.discover-art { margin:28px auto 36px; max-width:980px; }
.discover-art img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
@media (max-width: 767px) { .discover-art { margin:18px -8px 24px; } }

/* Home founder note: watercolor on the left, text on the right. */
.founder-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.founder-art { margin:0; overflow:hidden; border-radius:18px; }
.founder-art img { display:block; width:100%; height:auto; border-radius:18px; }
@media (prefers-reduced-motion: no-preference) {
  .founder-art img { transform:scale(1); transition:transform 1600ms cubic-bezier(.22,.61,.36,1); }
  .founder-art.is-near img { transform:scale(1.06); }
}
.founder-copy h2 { margin:10px 0 20px; }
.founder-copy p { line-height:1.8; margin:0 0 16px; }
.founder-more summary { cursor:pointer; list-style:none; font-weight:600; font-size:14px; letter-spacing:.02em; text-decoration:underline; text-underline-offset:4px; margin:4px 0 18px; min-height:44px; display:flex; align-items:center; }
.founder-more summary::-webkit-details-marker { display:none; }
.founder-close { display:none; }
.founder-more[open] .founder-close { display:inline; }
.founder-more[open] .founder-open { display:none; }
.founder-sign { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:21px; margin-top:8px; }
.founder-first { font-size:13px; opacity:.75; margin-top:22px; }
@media (max-width: 767px) { .founder-grid { grid-template-columns:1fr; gap:28px; } }

/* How it works : trois etapes, et la main de l'app qui pose les picots du sac. */
.how-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; }
.how-copy h2 { margin:10px 0 28px; }
.how-steps { list-style:none; margin:0; padding:0; display:grid; gap:26px; }
.how-steps li { display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:center; }
.how-letter { font-family:'Cormorant Garamond',serif; font-size:34px; line-height:1; color:#806038; }
.how-steps h3 { margin:2px 0 6px; font-size:19px; }
.how-steps p { margin:0; line-height:1.7; }
.how-art { position:relative; margin:0; width:100%; max-width:440px; justify-self:center; aspect-ratio:1024/1536; overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite:intersect; }
.how-scene { position:absolute; inset:0; width:100%; height:100%; display:block; }
.how-dot, .hand-dot { position:absolute; width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%; background:rgba(25,67,107,.38); opacity:0; }
.how-zoom { position:absolute; left:0; top:0; width:100%; aspect-ratio:1024/1536; }
.how-hand { position:absolute; left:0; top:0; max-width:none; height:auto; opacity:0; transition:opacity .3s ease-out; will-change:transform; pointer-events:none; }
.how-art.is-live .how-hand { opacity:1; }
@media (max-width: 767px) { .how-grid { grid-template-columns:1fr; gap:34px; } .how-art { max-width:none; aspect-ratio:4/5; } .how-zoom { top:50%; transform-origin:56% 64%; transform:translateY(-64%) scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .how-hand { transition:none; } .hand-dot { opacity:1; } }
.how-pastille { display:block; width:64px; height:64px; border-radius:50%; }
.how-pastille-pair { position:relative; display:block; width:64px; height:64px; }
.how-pastille--mini { position:absolute; right:-10px; bottom:-8px; width:32px; height:32px; box-shadow:0 0 0 2px #f5f1ea; }

/* Before the questions: the app's watercolor of the paths through Paris, alone and centered. */
.journey-art { padding-block:24px 0; }
.journey-art-figure { margin:0 auto; width:min(460px, 86vw); -webkit-mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite:intersect; }
.journey-art-figure img { display:block; width:100%; height:auto; }

/* The App page: a quiet hero, then the modules that used to live on the home page */
.app-hero { padding:72px 0 8px; text-align:center; background:transparent; }
@media (min-width:768px){ .app-hero { padding:112px 0 24px; } }
.app-hero-copy { max-width:720px; margin-inline:auto; }
.app-hero .hero-description { margin-inline:auto; max-width:520px; }
.app-hero .affiliation-note { margin-inline:auto; }
.collection-home em { font-style:italic; font-weight:400; color:#806038; }
.app-hero-links { margin:22px 0 0; }
.companion-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.companion-grid article { border-top:1px solid #cbb594; padding-top:22px; }
.companion-grid p { margin:10px 0 0; font-size:15px; line-height:1.7; color:#695a4c; }
@media (max-width:900px){ .companion-grid { grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:560px){ .companion-grid { grid-template-columns:1fr; gap:24px; } }
.reflection-wrap { max-width:640px; text-align:center; }
.reflection-wrap p:last-child { font-size:16px; line-height:1.8; color:#695a4c; }
.app-more-q { margin:22px 0 0; font-size:14px; line-height:1.7; color:#695a4c; }
.app-more-q a { color:#32271f; text-decoration:underline; text-underline-offset:4px; }

/* Home: three app screens under the hero, then the four doors */
.home-preview { padding-block:40px 24px; }
.preview-row { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:900px; margin:0 auto; }
.preview-row figure { margin:0; text-align:center; }
.preview-row img { display:block; width:100%; height:auto; border-radius:22px; box-shadow:0 18px 40px rgba(98,69,40,.14); }
.preview-row figcaption { margin-top:14px; font:600 13px 'Manrope',sans-serif; letter-spacing:.02em; color:#32271f; }
.home-preview .preview-link { display:block; margin:30px auto 0; text-align:center; }
@media (max-width:767px){
  .preview-row { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:62%; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 12px; gap:16px; scrollbar-width:none; }
  .preview-row::-webkit-scrollbar { display:none; }
  .preview-row figure { scroll-snap-align:center; }
}
.doors { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:980px; margin:0 auto; }
@media (max-width:767px){ .doors { grid-template-columns:1fr; gap:14px; } }
.door { display:flex; flex-direction:column; gap:8px; padding:34px 32px 30px; border-radius:22px; background:#fcfaf6; border:1px solid #e4dcd0; text-decoration:none; color:inherit; box-shadow:0 10px 30px rgba(98,69,40,.06); transition:transform 360ms cubic-bezier(.2,.7,.2,1), box-shadow 360ms ease, border-color 360ms ease; }
.door:hover { transform:translateY(-2px); border-color:#d6c19f; box-shadow:0 16px 40px rgba(98,69,40,.1); }
.door-kicker { font:700 12px 'Manrope',sans-serif; letter-spacing:.16em; color:#806038; }
.door-kicker span { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400; font-size:22px; letter-spacing:0; margin-right:10px; color:#8a6a3f; }
.collection-home .door h3 { margin:6px 0 4px; font-size:clamp(28px,3vw,36px); line-height:1.1; color:#32271f; }
.door p { margin:0; font-size:15px; line-height:1.7; color:#695a4c; }
.door-more { margin-top:10px; font:600 14px 'Manrope',sans-serif; color:#32271f; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
@media (prefers-reduced-motion: reduce){ .door { transition:none; } .door:hover { transform:none; } }
.hero-links { display:flex; flex-wrap:wrap; gap:14px 26px; margin:26px 0 0; }
@media (max-width:767px){ .hero-links { justify-content:center; } }

/* Start Here */
.start-hero { padding-block:64px 24px; }
.start-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:center; }
.start-copy .hero-description { max-width:520px; }
.start-art { margin:0; justify-self:center; }
.start-art img { display:block; width:100%; max-width:300px; height:auto; }
@media (max-width:767px){ .start-grid { grid-template-columns:1fr; gap:24px; text-align:center; } .start-copy .hero-description { margin-inline:auto; } .start-art img { max-width:200px; } }
.start-basic { padding:30px 30px 28px; border-radius:22px; background:#fcfaf6; border:1px solid #e4dcd0; }
.collection-home .start-basic h3 { margin:8px 0 6px; font-size:clamp(26px,2.6vw,32px); line-height:1.12; color:#32271f; }
.start-basic p { margin:0; font-size:15px; line-height:1.7; color:#695a4c; }
.start-enough { margin:40px auto 0; text-align:center; font:italic 400 clamp(26px,3vw,34px)/1.2 'Cormorant Garamond',Georgia,serif; color:#806038; }
.deeper-list { display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; max-width:900px; margin:0 auto; }
@media (max-width:767px){ .deeper-list { grid-template-columns:1fr; } }
.deeper-link { display:flex; flex-direction:column; gap:4px; padding:20px 0; border-top:1px solid #d9cfc1; text-decoration:none; color:inherit; min-height:44px; }
.deeper-title { font:500 22px/1.2 'Cormorant Garamond',Georgia,serif; color:#32271f; }
.deeper-link:hover .deeper-title { text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
.deeper-desc { font-size:14px; line-height:1.6; color:#695a4c; }
.start-q { list-style:none; margin:0 auto; padding:0; max-width:680px; }
.start-q li { border-top:1px solid #d9cfc1; }
.start-q a { display:block; padding:18px 0; font:500 20px/1.3 'Cormorant Garamond',Georgia,serif; color:#32271f; text-decoration:none; }
.start-q a:hover { text-decoration:underline; text-underline-offset:5px; }
.start-questions .mqbd-bridge { margin-top:56px; }
.start-art.journey-art-figure { width:min(380px, 78vw); }
.start-art.journey-art-figure img { max-width:none; }

/* Home doors: each one carries a soft wash of its own color and the app's matching pastille */
.door { position:relative; overflow:hidden; border:1px solid rgba(214,193,159,.55); }
.door::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.95; }
.door > * { position:relative; z-index:1; }
.door--peach::before { background:radial-gradient(120% 90% at 100% 0%, #f9d2ae 0%, rgba(249,210,174,0) 58%), linear-gradient(160deg,#fcefe0 0%,#fcfaf6 70%); }
.door--sky::before { background:radial-gradient(120% 90% at 100% 0%, #cfe0f2 0%, rgba(207,224,242,0) 58%), linear-gradient(160deg,#eef3f8 0%,#fcfaf6 70%); }
.door--sage::before { background:radial-gradient(120% 90% at 100% 0%, #d6e6d8 0%, rgba(214,230,216,0) 58%), linear-gradient(160deg,#eff4ec 0%,#fcfaf6 70%); }
.door--rose::before { background:radial-gradient(120% 90% at 100% 0%, #f5d6cf 0%, rgba(245,214,207,0) 58%), linear-gradient(160deg,#fbeee9 0%,#fcfaf6 70%); }
.door-icon { position:absolute; top:22px; right:22px; width:64px; height:64px; border-radius:50%; box-shadow:0 8px 20px rgba(98,69,40,.12); transition:transform 500ms cubic-bezier(.2,.7,.2,1); }
.door:hover .door-icon { transform:translateY(-3px) rotate(-4deg); }
.door .door-kicker, .door h3 { padding-right:78px; }
@media (max-width:767px){ .door-icon { width:54px; height:54px; top:18px; right:18px; } .door .door-kicker, .door h3 { padding-right:64px; } }
@media (prefers-reduced-motion: reduce){ .door-icon { transition:none; } .door:hover .door-icon { transform:none; } }

/* Start Here: the quick guide follows a dotted path, like the route in the watercolor */
.quick-path { list-style:none; margin:0 auto; padding:0; max-width:640px; position:relative; }
.quick-path::before { content:''; position:absolute; left:21px; top:22px; bottom:22px; border-left:2px dotted #c9a45f; }
.path-step { display:grid; grid-template-columns:44px 1fr; gap:22px; align-items:start; padding:0 0 34px; background:none; border:0; border-radius:0; }
.path-step:last-child { padding-bottom:0; }
.path-dot { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#b8904f; box-shadow:0 0 0 6px #f3eee6, 0 6px 16px rgba(98,69,40,.18); }
.path-dot span { font:italic 400 20px/1 'Cormorant Garamond',Georgia,serif; color:#fff; }
.collection-home .path-step h3 { margin:6px 0 6px; font-size:clamp(24px,2.4vw,30px); line-height:1.15; color:#32271f; }
.path-step p { margin:0; font-size:16px; line-height:1.75; color:#695a4c; }
/* Start Here: the Insider Guide as illustrated cards that scroll sideways */
.sh-cards { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,300px); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 18px; scrollbar-width:none; }
.sh-cards::-webkit-scrollbar { display:none; }
.sh-card { scroll-snap-align:start; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:#fcfaf6; border:1px solid #e4dcd0; text-decoration:none; color:inherit; box-shadow:0 10px 30px rgba(98,69,40,.07); transition:transform 360ms cubic-bezier(.2,.7,.2,1), box-shadow 360ms ease; }
.sh-card:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(98,69,40,.12); }
.sh-card-img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.sh-card-body { display:flex; flex-direction:column; gap:8px; padding:20px 22px 22px; }
.sh-card-title { font:500 23px/1.15 'Cormorant Garamond',Georgia,serif; color:#32271f; }
.sh-card-desc { font-size:14px; line-height:1.65; color:#695a4c; }
.sh-card-more { margin-top:4px; font:600 13px 'Manrope',sans-serif; color:#32271f; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
@media (prefers-reduced-motion: reduce){ .sh-card { transition:none; } .sh-card:hover { transform:none; } }

/* Stay in the loop: one calm page with the two lists */
.subscribe-hero { padding-block:72px 16px; text-align:center; }
.subscribe-wrap { max-width:680px; }
.subscribe-wrap .hero-description { margin-inline:auto; }
.subscribe-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:22px; max-width:980px; margin:0 auto; }
@media (max-width:767px){ .subscribe-grid { grid-template-columns:1fr; } }
.subscribe-card { position:relative; overflow:hidden; padding:34px 32px 30px; border-radius:22px; border:1px solid rgba(214,193,159,.55); box-shadow:0 10px 30px rgba(98,69,40,.06); }
.subscribe-card--brief { background:radial-gradient(120% 90% at 100% 0%, #f9d2ae 0%, rgba(249,210,174,0) 58%), linear-gradient(160deg,#fcefe0 0%,#fcfaf6 70%); }
.subscribe-card--android { background:radial-gradient(120% 90% at 100% 0%, #cfe0f2 0%, rgba(207,224,242,0) 58%), linear-gradient(160deg,#eef3f8 0%,#fcfaf6 70%); }
.collection-home .subscribe-card h2 { font-size:clamp(30px,3vw,40px); margin:8px 0 14px; }
.subscribe-card > p { font-size:15px; line-height:1.7; color:#695a4c; }
.subscribe-card .mqb-form { margin-top:18px; }
.subscribe-back { max-width:680px; margin:34px auto 0; text-align:center; font-size:14px; line-height:1.7; color:#695a4c; }
.subscribe-back a, .subscribe-cta { color:#32271f; text-decoration:underline; text-underline-offset:4px; }

/* The App: the panorama rolls on its own instead of being pinned */
.app-panorama[data-panorama-roll] .app-panorama-sticky { position:static; height:auto; padding-top:0; display:block; }
/* It plays on its own like a film, and a finger can take over; 10 % larger than the pinned version */
.app-panorama[data-panorama-roll] .app-panorama-track { overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.app-panorama[data-panorama-roll] .app-panorama-track::-webkit-scrollbar { display:none; }
.app-panorama[data-panorama-roll] .app-panorama-strip { will-change:auto; transform:none; }
.app-panorama[data-panorama-roll] .app-panorama-strip img { height:clamp(418px, 48.4vw, 704px); }
@media (max-width: 767px) { .app-panorama[data-panorama-roll] .app-panorama-strip img { height:min(92svh, 792px); } }
.app-panorama[data-panorama-roll].is-static .app-panorama-track { overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.app-panorama[data-panorama-roll].is-static .app-panorama-track::-webkit-scrollbar { display:none; }
.collection-home .app-panorama-line { margin:18px auto 0; text-align:center; font:italic 400 clamp(22px,2.6vw,28px)/1.2 'Cormorant Garamond',Georgia,serif; color:#806038; }

/* The App: sections alternate linen, white and a deeper greige so long stretches never run together */
.app-page .how-it-works { background:#fcfaf6; }
.app-page #discover { background:transparent; }
.app-page .app-reflection { background:#e2d7c6; }
.app-page .collection-privacy { background:#fcfaf6; }
.app-page #questions { background:#ebe4d8; }
/* The staircase from the app: a quiet pause before the questions */
.app-stair { margin:0 auto; padding:72px 20px 0; width:min(460px, 100%); box-sizing:content-box; }
.app-stair img { display:block; width:100%; height:auto; border-radius:28px; box-shadow:0 24px 60px rgba(40,28,15,.18); }
.app-page .app-stair + #questions { margin-top:-160px; padding-top:224px; }
@media (max-width:767px) { .app-stair { padding:48px 24px 0; width:min(340px, 100%); } .app-page .app-stair + #questions { margin-top:-110px; padding-top:158px; } }

/* Start Here: one question, three answers, one open at a time */
.brings-hero { padding-block:48px 28px; }
.brings-wrap { max-width:680px; }
.brings-head { text-align:center; }
.brings-head .hero-description { margin:0 auto; }
.brings-list { margin:30px 0 0; border-radius:22px; background:#fcfaf6; border:1px solid #e4dcd0; box-shadow:0 10px 30px rgba(98,69,40,.06); overflow:hidden; }
.brings-item + .brings-item { border-top:1px solid #eadfcd; }
.brings-item summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:18px 22px; cursor:pointer; font:500 clamp(22px,2.4vw,26px)/1.2 'Cormorant Garamond',Georgia,serif; color:#32271f; }
.brings-item summary::-webkit-details-marker { display:none; }
.brings-icon { position:relative; flex:none; width:30px; height:30px; border-radius:50%; background:#eee7dc; }
.brings-icon::before, .brings-icon::after { content:''; position:absolute; left:50%; top:50%; width:12px; height:1.6px; background:#806038; transform:translate(-50%,-50%); transition:transform 300ms ease; }
.brings-icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.brings-item[open] .brings-icon::after { transform:translate(-50%,-50%) rotate(0deg); }
.brings-item[open] summary { color:#806038; }
.brings-answer { padding:0 22px 22px; }
.brings-answer p { margin:0; font-size:16px; line-height:1.75; color:#695a4c; }
.brings-link { display:inline-block; margin-top:12px; min-height:24px; font:600 14px 'Manrope',sans-serif; color:#32271f; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }

.brings-deeper { margin:22px 0 0; text-align:center; }
.brings-deeper a { display:inline-block; padding:10px 4px; font:600 14px 'Manrope',sans-serif; color:#32271f; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
.brings-note { text-align:center; margin:8px auto 0!important; }
.deep-guides { scroll-margin-top:72px; }
.deep-list { display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; max-width:900px; margin:0 auto; }
.deep-tools { margin-top:26px; }
@media (max-width:767px){ .deep-list { grid-template-columns:1fr; } .brings-hero { padding-block:32px 20px; } }
.deep-link { display:flex; flex-direction:column; gap:4px; min-height:48px; padding:18px 0; border-top:1px solid #d9cfc1; text-decoration:none; color:inherit; }
.deep-title { font:500 22px/1.2 'Cormorant Garamond',Georgia,serif; color:#32271f; }
.deep-link:hover .deep-title { text-decoration:underline; text-underline-offset:5px; text-decoration-color:#c9ad7f; }
.deep-desc { font-size:14px; line-height:1.6; color:#695a4c; }
@media (prefers-reduced-motion: reduce){ .brings-icon::before, .brings-icon::after { transition:none; } }

/* Cards rise toward the pointer: lifted, a touch larger, deeper shadow */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .door, .sh-card, .brings-list { transition:transform 420ms cubic-bezier(.2,.7,.2,1), box-shadow 420ms ease, border-color 420ms ease; }
  .door:hover, .sh-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 26px 60px rgba(98,69,40,.18), 0 6px 16px rgba(98,69,40,.08); border-color:#d6c19f; }
}
.brings-art { width:min(240px,56vw); margin:26px auto 0; }
.brings-art img { display:block; width:100%; height:auto; }
.deep-art.journey-art-figure { width:min(170px,40vw); margin:0 auto 18px; }