:root{
  --ink:#061b18; --green:#00372e; --cream:#f7f1e7; --max-content:1760px;
  --f-ink:#0d201c; --f-muted:#68706b; --f-cream:rgba(251,247,239,.94);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#eee7da;width:100%;min-height:100%}
body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#eee7da;overflow-x:hidden;min-height:100%;scroll-snap-type:y proximity}
body.intro-active{overflow:hidden}
main{width:100%;min-height:100%}
a{color:inherit;text-decoration:none} button,a{-webkit-tap-highlight-color:transparent}
.hero,.features-page,.collections-page,.how-page,.journey-page{scroll-snap-align:start}

/* ========================= OPENING ANIMATION ========================= */
.intro-gate{position:fixed;inset:0;z-index:9999;background:#faf5eb;display:grid;place-items:center;overflow:hidden;transition:opacity .72s cubic-bezier(.22,.61,.36,1),visibility .72s}
.intro-gate.is-done{opacity:0;visibility:hidden;pointer-events:none}
.intro-glow{position:absolute;width:min(78vw,1180px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(198,162,104,.18) 0%,rgba(198,162,104,.08) 28%,rgba(198,162,104,0) 67%);filter:blur(8px);transform:translateY(5%)}
.intro-enter,.bismillah-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .55s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.intro-enter{opacity:1;transform:scale(1)}
.intro-logo{width:min(280px,48vw);height:auto;margin-bottom:38px;filter:drop-shadow(0 8px 18px rgba(26,37,31,.06))}
.enter-button{border:0;border-radius:999px;background:#00372e;color:#fff;min-width:208px;height:60px;padding:0 29px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font:600 16px/1 Inter,ui-sans-serif,Arial,sans-serif;box-shadow:0 16px 38px rgba(0,55,46,.15);cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.enter-button:hover{transform:translateY(-2px);background:#00473b;box-shadow:0 20px 44px rgba(0,55,46,.19)}
.enter-button:disabled{cursor:default}
.bismillah-panel{opacity:0;transform:scale(.985) translateY(8px);padding:24px;text-align:center;pointer-events:none}
.bismillah-arabic{font-family:"Traditional Arabic","Noto Naskh Arabic","Amiri",Georgia,serif;font-size:clamp(46px,5.4vw,86px);line-height:1.25;color:#08251f;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.bismillah-localized{margin-top:20px;max-width:760px;font:500 clamp(14px,1.15vw,20px)/1.5 Inter,ui-sans-serif,Arial,sans-serif;letter-spacing:.02em;color:rgba(8,37,31,.6)}
.intro-gate.show-bismillah .intro-enter{opacity:0;transform:scale(.97) translateY(-8px);pointer-events:none}
.intro-gate.show-bismillah .bismillah-panel{opacity:1;transform:scale(1) translateY(0)}
.intro-gate.revealing .bismillah-panel{opacity:0;transform:scale(1.025)}
.intro-gate.revealing{background:rgba(250,245,235,.96)}
.intro-particles{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease}
.intro-gate.show-bismillah .intro-particles{opacity:1}
.intro-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:#b88f50;box-shadow:0 0 13px rgba(184,143,80,.65);opacity:.2;animation:floatParticle 2.5s ease-in-out infinite alternate}
@keyframes floatParticle{from{transform:translateY(9px) scale(.7);opacity:.1}to{transform:translateY(-11px) scale(1.1);opacity:.42}}

/* Home is held back until the Bismillah sequence reveals it. */
body.intro-active .site-header,body.intro-active .hero-copy,body.intro-active .laptop,body.intro-active .books,body.intro-active .plant,body.intro-active .laptop-ground-shadow,body.intro-active .books-ground-shadow{opacity:0;animation:none!important}
body.intro-active .hero-bg img{transform:scale(1.035);filter:saturate(.96) brightness(1.02)}
body.home-reveal .site-header{animation:homeHeader .72s .08s ease both!important}
body.home-reveal .hero-copy{animation:homeCopy .78s .16s cubic-bezier(.2,.7,.2,1) both!important}
body.home-reveal .plant{animation:homeArt .88s .20s ease both!important}
body.home-reveal .books,body.home-reveal .books-ground-shadow{animation:homeArt .82s .25s ease both!important}
body.home-reveal .laptop,body.home-reveal .laptop-ground-shadow{animation:homeArt .86s .31s ease both!important}
body.home-reveal .hero-bg img{animation:homeScene 1.12s cubic-bezier(.2,.7,.2,1) both}
@keyframes homeHeader{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes homeCopy{from{opacity:0;transform:translateY(calc(-53% + 22px))}to{opacity:1;transform:translateY(-53%)}}
@keyframes homeArt{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes homeScene{from{transform:scale(1.035);filter:saturate(.96) brightness(1.02)}to{transform:scale(1);filter:saturate(1) brightness(1)}}

/* ========================= SECTION 1 ========================= */
.hero{position:relative;height:100dvh;min-height:0;max-height:100dvh;isolation:isolate;overflow:hidden;background:#eee6d9}
.visual-scene{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;z-index:0;pointer-events:none}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;display:block}.hero-bg img{object-fit:fill;transform-origin:center center}
.hero-wash{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,250,242,.40) 0%,rgba(255,250,242,.25) 20%,rgba(255,250,242,.07) 42%,rgba(255,250,242,0) 61%)}
.hero-art{position:absolute;inset:0;z-index:2}
.laptop,.books,.plant,.laptop-ground-shadow,.books-ground-shadow{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.laptop-ground-shadow{z-index:3;left:45.4%;top:73.9%;width:49.5%;height:7.2%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(67,39,13,.34) 0%,rgba(67,39,13,.24) 40%,rgba(67,39,13,.10) 62%,rgba(67,39,13,0) 82%);filter:blur(7px);transform:rotate(-1.2deg) skewX(-12deg);transform-origin:center;opacity:.86}
.books-ground-shadow{z-index:3;right:1.2%;top:71.8%;width:16.5%;height:4.2%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(58,34,12,.30) 0%,rgba(58,34,12,.18) 48%,rgba(58,34,12,0) 82%);filter:blur(5px);transform:rotate(-1deg);opacity:.82}
.laptop{z-index:5;width:51.8%;right:5.2%;left:auto;top:28.8%}.books{z-index:4;width:16.7%;right:1.7%;left:auto;top:60%}.plant{z-index:2;width:21.5%;right:-1.2%;left:auto;top:10.8%;opacity:.96;filter:drop-shadow(0 10px 14px rgba(61,38,11,.08))}
.site-header{width:min(calc(100% - 72px),var(--max-content));height:126px;margin:0 auto;display:grid;grid-template-columns:260px 1fr 220px;align-items:center;gap:28px;position:relative;z-index:20}
.brand{display:inline-flex;align-items:center;width:184px;height:74px}.brand img{display:block;width:100%;height:auto}
.primary-nav{display:flex;justify-content:center;align-items:center;gap:clamp(28px,2.4vw,50px);font-size:15px;font-weight:500}.primary-nav a{position:relative;padding:14px 0;white-space:nowrap}.primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:1.5px;background:var(--ink);transition:right 180ms ease}.primary-nav a:hover::after,.primary-nav a.active::after{right:0}
.header-cta{justify-self:end;min-width:198px;height:58px;padding:0 27px;border-radius:999px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:15px;font-weight:600;box-shadow:0 8px 30px rgba(0,42,34,.09);transition:transform 180ms ease,background 180ms ease}.header-cta:hover,.button-primary:hover{background:#00453a;transform:translateY(-1px)}
.menu-toggle{display:none;border:0;background:transparent;padding:10px}.menu-toggle span{width:24px;height:2px;background:var(--ink);display:block;margin:5px 0;border-radius:999px}
.hero-shell{width:min(calc(100% - 72px),var(--max-content));height:calc(100% - 126px);margin:0 auto;position:relative;z-index:8}.hero-copy{position:absolute;left:0;top:50%;transform:translateY(-53%);width:min(650px,43vw)}
.eyebrow{margin:0 0 22px;font-size:14px;line-height:1.3;letter-spacing:.36em;font-weight:600;color:rgba(6,27,24,.68)}
.hero-copy h1{margin:0;font-family:"Bodoni MT",Didot,"Times New Roman",Georgia,serif;font-size:clamp(92px,7.25vw,146px);line-height:.82;letter-spacing:-.055em;font-weight:500;color:#001f1a;text-rendering:geometricPrecision}
.hero-copy h2{margin:30px 0 20px;font-family:"Bodoni MT",Didot,Georgia,"Times New Roman",serif;font-size:clamp(36px,2.55vw,52px);line-height:1.04;letter-spacing:-.025em;font-weight:500;color:#071d1a}
.description{margin:0;font-size:clamp(18px,1.15vw,23px);line-height:1.42;color:rgba(6,27,24,.66)}.hero-actions{display:flex;gap:17px;margin-top:34px}
.button{height:64px;border-radius:999px;padding:0 34px;display:inline-flex;align-items:center;justify-content:center;gap:13px;min-width:208px;font-size:17px;font-weight:600;transition:transform 180ms ease,background 180ms ease,border-color 180ms ease}.button-primary{background:var(--green);color:#fff}.button-secondary{border:1.4px solid rgba(6,27,24,.40);background:rgba(255,255,255,.05);backdrop-filter:blur(2px)}.button-secondary:hover{transform:translateY(-1px);border-color:rgba(6,27,24,.75);background:rgba(255,255,255,.24)}
.edge-fade{position:absolute;inset:auto 0 0;height:7vh;z-index:10;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(238,231,218,.18))}.future-anchor{height:0;overflow:hidden}

/* ========================= SECTION 2 (real HTML) ========================= */
.features-page{position:relative;width:100%;height:100dvh;min-height:0;overflow:hidden;background:#111}
.features-stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;background:#eadfcf;overflow:hidden;color:var(--f-ink);font-family:Arial,Helvetica,sans-serif;will-change:transform,width}
.f-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}.f-wash{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(255,255,255,0));z-index:1;pointer-events:none}
.f-kicker{position:absolute;left:0;right:0;top:54px;text-align:center;z-index:4;font-size:14px;letter-spacing:7px;color:#6f7672;font-weight:600}.f-title{position:absolute;z-index:4;top:92px;left:50%;transform:translateX(-50%);margin:0;width:820px;text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:61px;line-height:.94;font-weight:500;letter-spacing:-2px;color:#10221d}.f-intro{position:absolute;z-index:4;top:230px;left:50%;transform:translateX(-50%);width:675px;text-align:center;font-size:17px;line-height:1.45;color:#5a625e;margin:0}
.f-card{position:absolute;z-index:6;width:575px;height:255px;border-radius:24px;background:var(--f-cream);box-shadow:0 8px 24px rgba(64,43,24,.14),inset 0 0 0 1px rgba(255,255,255,.7);padding:31px 30px;overflow:hidden}.f-card .f-num{font-size:15px;letter-spacing:4px;color:#858a86;margin-bottom:16px}.f-card .f-icon{width:54px;height:54px;margin-bottom:11px;color:#0c2924}.f-card h3{font-family:Georgia,"Times New Roman",serif;font-size:27px;line-height:1;margin:0 0 10px;font-weight:500;color:#16231f}.f-card>p{font-size:17px;line-height:1.35;margin:0;color:#737a76;max-width:235px}.f-demo{position:absolute;right:18px;top:18px;width:278px;height:219px;border-radius:20px;background:rgba(255,252,246,.88);box-shadow:0 4px 14px rgba(53,45,36,.08),inset 0 0 0 1px rgba(86,71,53,.08);overflow:hidden}.f-left1{left:70px;top:238px}.f-left2{left:70px;top:507px}.f-left3{left:70px;top:776px}.f-right1{right:70px;top:238px}.f-right2{right:70px;top:507px}.f-right3{right:70px;top:776px}
.f-books-demo{background:transparent!important;box-shadow:none!important;display:flex;align-items:flex-end;justify-content:center}.f-books-demo img{width:245px;max-height:210px;object-fit:contain;filter:drop-shadow(0 8px 7px rgba(62,42,23,.18))}
.f-searchbox{padding:15px 16px}.f-searchbar{height:43px;border-radius:22px;background:#f1eee7;display:flex;align-items:center;padding:0 16px;gap:10px;font-size:15px;color:#333;margin-bottom:13px}.f-magnify{width:17px;height:17px;border:2px solid #243a35;border-radius:50%;position:relative;display:inline-block}.f-magnify:after{content:"";position:absolute;width:8px;height:2px;background:#243a35;right:-6px;bottom:-3px;transform:rotate(45deg);border-radius:1px}.f-result{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #ebe5da}.f-result:last-child{border-bottom:0}.f-r-icon{width:32px;height:32px;border-radius:6px;background:#b0aba1;display:grid;place-items:center;color:#eee;font-size:12px}.f-r-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#222}.f-r-sub{font-size:11px;color:#8b8b86;margin-top:3px}
.f-ai-demo{padding:14px 15px}.f-ai-head{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;margin-bottom:13px}.f-ai-logo{width:34px;height:34px;border-radius:8px;background:#0c3a33;color:#fff;display:grid;place-items:center;font-family:Georgia,serif;font-size:20px}.f-bubble{margin-left:auto;width:max-content;max-width:220px;background:#ebe6dc;border-radius:14px;padding:11px 13px;font-size:13px;color:#333}.f-answer{margin-top:12px;border:1px solid #e9e2d6;border-radius:14px;padding:13px 14px 28px 54px;font-size:13px;line-height:1.35;position:relative;background:rgba(255,255,255,.36)}.f-answer:before{content:"✧";position:absolute;left:16px;top:13px;width:27px;height:27px;border-radius:50%;background:#eee9df;display:grid;place-items:center;color:#aaa}.f-send{position:absolute;right:10px;bottom:8px;width:28px;height:28px;border-radius:50%;background:#0d3a32;color:#fff;display:grid;place-items:center;font-size:18px}
.f-bookmark-demo{padding:13px 16px}.f-mini-title{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;margin-bottom:12px}.f-mini-title span:last-child{font-size:11px;font-weight:500;color:#555}.f-bookmark-row{display:grid;grid-template-columns:34px 1fr 20px;gap:10px;align-items:center;padding:6px 0}.f-cover{width:30px;height:42px;border-radius:3px;object-fit:cover;background:#203f34}.f-book-name{font-size:13px;font-weight:700}.f-book-meta{font-size:11px;color:#777;margin-top:3px}.f-bookmark-glyph{width:12px;height:17px;border:2px solid #7e8884;border-bottom:0;position:relative;margin-left:2px}.f-bookmark-glyph:after{content:"";position:absolute;left:0;bottom:-6px;width:8px;height:8px;border-left:2px solid #7e8884;border-bottom:2px solid #7e8884;transform:rotate(-45deg)}
.f-chain-demo{padding:17px 19px}.f-chain-title{font-size:14px;font-weight:700;margin-bottom:17px}.f-chain{position:relative;padding-left:46px}.f-chain:before{content:"";position:absolute;left:16px;top:6px;bottom:7px;width:2px;background:#aaa89f}.f-node{position:relative;min-height:43px;font-size:13px;line-height:1.2;color:#333}.f-node:before{content:"";position:absolute;left:-37px;top:1px;width:14px;height:14px;border-radius:50%;background:#aaa89f}.f-node b{font-weight:500}.f-node small{display:block;font-size:12px;color:#333}
.f-focus-demo{padding:16px 17px}.f-prefs-top{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid #dfd8cc;padding-bottom:13px;margin-bottom:12px}.f-pref{text-align:center;border-right:1px solid #e7e0d5;color:#666;font-size:11px}.f-pref:last-child{border-right:0}.f-pref strong{display:block;font-size:24px;font-weight:400;color:#6d706c;margin-bottom:6px}.f-toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#555;padding:10px 0;border-bottom:1px solid #e4ddd2}.f-toggle-row:last-child{border-bottom:0}.f-toggle{width:44px;height:24px;border-radius:14px;background:#d4d0c8;position:relative}.f-toggle.on{background:#0d4c40}.f-toggle:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;box-shadow:0 1px 2px rgba(0,0,0,.12)}.f-toggle.on:after{left:23px}
.f-tablet{position:absolute;z-index:5;left:50%;top:395px;transform:translateX(-50%);width:610px;height:auto;filter:drop-shadow(0 24px 18px rgba(36,22,11,.27))}.f-contact-shadow{position:absolute;z-index:3;left:50%;top:861px;transform:translateX(-50%);width:560px;height:42px;border-radius:50%;background:rgba(47,32,18,.27);filter:blur(18px)}


/* ========================= SECTION 3 — COLLECTIONS ========================= */
.collections-page{position:relative;width:100%;height:100dvh;min-height:0;overflow:hidden;background:#17130e;isolation:isolate}

/* A blurred full-bleed copy fills ultrawide side space. The real 16:9 scene above it
   never changes aspect ratio, so the books can never stretch. */
.c-fill-bg{position:absolute;z-index:0;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:center center;filter:blur(28px) saturate(.92) brightness(.92);transform:scale(1.035);user-select:none;-webkit-user-drag:none}
.collections-page::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:225px;pointer-events:none;background:linear-gradient(to bottom,rgba(236,222,203,0) 0%,rgba(236,222,203,.52) 30%,rgba(236,222,203,.90) 63%,rgba(236,222,203,.97) 100%);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.collections-stage{position:absolute;z-index:1;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;overflow:hidden;background:#eadfcf;color:#0b211d;font-family:Arial,Helvetica,sans-serif;will-change:transform}
.c-bg{position:absolute;inset:0;width:1920px;height:1080px;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none;z-index:0}

/* Fully opaque panel: nothing from the old flattened headline/button can ghost through. */
.c-copy-scrim{position:absolute;z-index:3;left:72px;top:102px;width:835px;height:674px;border-radius:76px;background:rgba(249,244,235,.992);box-shadow:0 24px 70px rgba(79,54,25,.10);pointer-events:none}
/* Hide the old flattened carousel inside the 16:9 reference image. */
.c-bottom-mask{position:absolute;z-index:3;left:0;right:0;bottom:0;height:205px;background:linear-gradient(to bottom,rgba(236,222,203,.95),rgba(236,222,203,1));pointer-events:none}

.c-copy{position:absolute;z-index:5;left:150px;top:212px;width:650px}
.c-kicker{margin:0 0 25px;font-size:15px;line-height:1.2;font-weight:700;letter-spacing:.28em;color:rgba(9,33,28,.60)}
.c-copy h2{margin:0;font-family:"Bodoni MT",Didot,Georgia,"Times New Roman",serif;font-size:69px;line-height:.91;letter-spacing:-.028em;font-weight:500;color:#09231f;text-rendering:geometricPrecision}
.c-description{margin:31px 0 0;font-size:23px;line-height:1.46;color:rgba(9,33,28,.65)}
.c-cta{margin-top:30px;min-width:333px;height:69px;padding:0 34px;border-radius:999px;background:#00372e;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:18px;font-size:19px;font-weight:600;box-shadow:0 13px 34px rgba(0,55,46,.16);transition:transform 180ms ease,background 180ms ease,box-shadow 180ms ease}
.c-cta:hover{transform:translateY(-2px);background:#00473b;box-shadow:0 18px 40px rgba(0,55,46,.2)}
.c-dots{display:flex;align-items:center;gap:15px;margin-top:37px;padding-left:12px}
.c-dots button{appearance:none;border:0;width:13px;height:13px;padding:0;border-radius:50%;background:#d5ccbd;cursor:pointer;transition:transform 180ms ease,background 180ms ease}
.c-dots button:hover{transform:scale(1.15)}
.c-dots button.active{background:#073a31}

/* Viewport-level bar: it gets wider on ultrawide displays instead of shrinking inside the
   1920px stage. It is completely opaque, so the old baked-in bar cannot show through. */
.c-collection-bar{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:clamp(24px,3.7vh,48px);width:min(94vw,2920px);height:clamp(146px,15.2vh,190px);border-radius:clamp(22px,1.5vw,32px);background:#faf5ed;box-shadow:0 22px 54px rgba(63,42,20,.22);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;padding:clamp(12px,1vh,16px);border:1px solid rgba(255,255,255,.88);overflow:hidden;transform-origin:center bottom}
.c-collection-item{position:relative;display:grid;grid-template-columns:clamp(58px,3.8vw,82px) minmax(0,1fr) clamp(38px,2.6vw,50px);align-items:center;gap:clamp(13px,1vw,20px);padding:0 clamp(14px,1.2vw,24px);border-right:1px solid rgba(94,80,61,.14);border-radius:20px;min-width:0;transition:background 180ms ease,transform 180ms ease}
.c-collection-item:last-child{border-right:0}
.c-collection-item:hover{background:rgba(255,255,255,.50);transform:translateY(-1px)}
.c-collection-item.active{background:#fff;box-shadow:0 8px 24px rgba(73,52,27,.09)}
.c-collection-item img{width:auto;height:clamp(78px,8.8vh,104px);max-width:100%;object-fit:contain;border-radius:2px;display:block;justify-self:center;box-shadow:0 4px 9px rgba(40,24,10,.12)}
.c-item-copy{min-width:0;display:flex;flex-direction:column;gap:8px}
.c-item-copy strong{font-size:clamp(15px,.92vw,20px);line-height:1.15;font-weight:650;color:#14231f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-item-copy small{font-size:clamp(13px,.76vw,16px);line-height:1;color:rgba(20,35,31,.58);white-space:nowrap}
.c-arrow{width:clamp(36px,2.3vw,46px);height:clamp(36px,2.3vw,46px);border-radius:50%;display:grid;place-items:center;border:1px solid rgba(20,35,31,.13);background:#fff;font-size:clamp(16px,1vw,20px);color:#36514b;transition:transform 180ms ease,background 180ms ease,color 180ms ease}
.c-arrow.dark{background:#063d34;color:#fff;border-color:#063d34}
.c-collection-item:hover .c-arrow{transform:translateX(2px)}

@media(max-width:1450px){
  .c-collection-bar{width:95vw;height:138px;bottom:24px;padding:10px}
  .c-collection-item{grid-template-columns:52px minmax(0,1fr) 36px;gap:10px;padding:0 12px}
  .c-collection-item img{height:76px}
  .c-item-copy strong{font-size:14px}.c-item-copy small{font-size:12px}
  .c-arrow{width:34px;height:34px;font-size:15px}
}

@media(min-width:2200px){.site-header,.hero-shell{width:min(1760px,calc(100% - 120px))}.hero-copy{width:650px}.hero-copy h1{font-size:138px}.hero-copy h2{font-size:48px}.description{font-size:21px}}
@media(max-width:1450px){.site-header,.hero-shell{width:min(calc(100% - 48px),1360px)}.site-header{grid-template-columns:205px 1fr 176px}.brand{width:156px}.header-cta{min-width:168px;height:52px}.primary-nav{gap:26px;font-size:14px}.hero-copy{width:min(560px,46vw)}.eyebrow{font-size:12px}}
@media(max-width:1120px){.site-header{width:calc(100% - 40px);height:96px;grid-template-columns:1fr auto auto}.brand{width:148px;height:auto}.menu-toggle{display:block;order:2;position:relative;z-index:31}.header-cta{display:none}.primary-nav{position:absolute;right:0;top:78px;width:min(330px,calc(100vw - 40px));padding:20px;border-radius:20px;background:rgba(250,246,238,.94);box-shadow:0 18px 50px rgba(19,25,22,.16);backdrop-filter:blur(18px);display:none;flex-direction:column;align-items:stretch;gap:3px}.primary-nav.open{display:flex}.primary-nav a{padding:12px 8px}.primary-nav a::after{display:none}.hero-shell{width:calc(100% - 40px);height:calc(100% - 96px)}.hero-copy{width:48%;transform:translateY(-51%)}.hero-copy h1{font-size:clamp(74px,10vw,105px)}.hero-copy h2{font-size:clamp(31px,4vw,40px)}.description{font-size:17px}.desktop-break{display:none}.button{min-width:170px;height:58px;padding:0 26px;font-size:15px}.laptop{left:47%;right:auto;width:50%;top:30.2%}.laptop-ground-shadow{left:48%;right:auto;top:74.8%;width:49%}.books{left:83%;right:auto;width:15.5%;top:61.2%}.books-ground-shadow{left:83%;right:auto;top:72.5%;width:15.5%}.plant{left:80%;right:auto;width:20%}}
@media(max-width:780px){.hero{height:920px;min-height:920px;max-height:none}.hero-wash{background:linear-gradient(180deg,rgba(255,250,242,.78) 0%,rgba(255,250,242,.62) 45%,rgba(255,250,242,.10) 72%,transparent 100%)}.site-header{width:calc(100% - 30px);height:82px}.brand{width:126px}.hero-shell{width:calc(100% - 32px);height:calc(100% - 82px)}.hero-copy{position:relative;top:auto;left:auto;transform:none;width:min(100%,520px);padding-top:62px}.eyebrow{font-size:10px;letter-spacing:.28em;margin-bottom:16px}.hero-copy h1{font-size:clamp(76px,23vw,106px)}.hero-copy h2{font-size:clamp(31px,8.7vw,42px);margin-top:24px}.description{font-size:16px;max-width:470px}.hero-actions{margin-top:26px;gap:12px}.button{flex:1;min-width:0;height:54px;padding:0 18px}.laptop{width:60%;left:54%;right:auto;top:61%}.laptop-ground-shadow{left:55%;right:auto;top:85%;width:57%;height:5%}.books{width:18%;left:80%;right:auto;top:72%}.books-ground-shadow{left:80%;right:auto;top:82%;width:18%}.plant{width:24%;left:78%;right:auto;top:52%;opacity:.75}.features-page{height:100svh;min-height:720px}}
@media(max-width:480px){.hero{height:870px;min-height:870px}.hero-copy{padding-top:44px}.hero-copy h2 br{display:none}.hero-actions{flex-direction:column;width:min(100%,330px)}.button{flex:none;width:100%}.laptop{width:66%;left:52%;right:auto;top:66%}.laptop-ground-shadow{left:52%;top:87%;width:65%}.books,.books-ground-shadow,.plant{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ========================= FULL-PAGE SECTION TRANSITIONS ========================= */
/* After the intro, the site behaves like a polished full-page presentation: one
   section per viewport with a deliberate slide/fade transition between pages. */
html.fullpage-mode, body.fullpage-mode{height:100%;overflow:hidden;overscroll-behavior:none}
body.fullpage-mode main{
  position:fixed;
  inset:0;
  width:100%;
  height:auto;
  will-change:transform;
  transition:transform 980ms cubic-bezier(.22,.74,.19,1);
  transform:translate3d(0,0,0);
}
body.fullpage-mode .hero,
body.fullpage-mode .features-page,
body.fullpage-mode .collections-page{
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  flex:none;
  transition:opacity 760ms ease,filter 900ms ease;
  opacity:.72;
  filter:saturate(.90) brightness(.95);
}
body.fullpage-mode .hero.is-active,
body.fullpage-mode .features-page.is-active,
body.fullpage-mode .collections-page.is-active{
  opacity:1;
  filter:saturate(1) brightness(1);
}
/* A soft edge flash makes the section change feel more like a premium deck
   transition instead of ordinary browser scrolling. */
body.fullpage-mode .hero::before,
body.fullpage-mode .features-page::before,
body.fullpage-mode .collections-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:80;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(250,246,238,.28),rgba(250,246,238,0) 26%,rgba(250,246,238,0) 74%,rgba(250,246,238,.22));
  opacity:0;
  transition:opacity 520ms ease;
}
body.fullpage-mode.page-moving .hero::before,
body.fullpage-mode.page-moving .features-page::before,
body.fullpage-mode.page-moving .collections-page::before{opacity:.55}

/* Re-run a subtle content reveal whenever section two becomes the active page. */
body.fullpage-mode .features-page:not(.is-active) .f-kicker,
body.fullpage-mode .features-page:not(.is-active) .f-title,
body.fullpage-mode .features-page:not(.is-active) .f-intro,
body.fullpage-mode .features-page:not(.is-active) .f-card,
body.fullpage-mode .features-page:not(.is-active) .f-tablet,
body.fullpage-mode .features-page:not(.is-active) .f-contact-shadow{
  opacity:.82;
}
body.fullpage-mode .features-page.is-active .f-kicker{
  animation:section2KickerIn 760ms cubic-bezier(.2,.75,.2,1) both;
}
body.fullpage-mode .features-page.is-active .f-title,
body.fullpage-mode .features-page.is-active .f-intro{
  animation:section2HeadingIn 760ms cubic-bezier(.2,.75,.2,1) both;
}
body.fullpage-mode .features-page.is-active .f-card{animation:section2CardIn 760ms cubic-bezier(.2,.75,.2,1) both}
body.fullpage-mode .features-page.is-active .f-left1,body.fullpage-mode .features-page.is-active .f-right1{animation-delay:90ms}
body.fullpage-mode .features-page.is-active .f-left2,body.fullpage-mode .features-page.is-active .f-right2{animation-delay:150ms}
body.fullpage-mode .features-page.is-active .f-left3,body.fullpage-mode .features-page.is-active .f-right3{animation-delay:210ms}
body.fullpage-mode .features-page.is-active .f-tablet,
body.fullpage-mode .features-page.is-active .f-contact-shadow{animation:section2TabletIn 920ms 110ms cubic-bezier(.18,.78,.16,1) both}
@keyframes section2KickerIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes section2HeadingIn{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes section2CardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes section2TabletIn{from{opacity:0;transform:translateX(-50%) translateY(24px) scale(.965)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

/* Make the central iPad a much stronger focal point. It remains behind the
   feature cards where their edges overlap, matching the original mockup depth. */
.f-tablet{top:355px;width:760px;filter:drop-shadow(0 30px 22px rgba(36,22,11,.30))}
.f-contact-shadow{top:900px;width:700px;height:52px;filter:blur(21px);background:rgba(47,32,18,.30)}

/* The fixed full-page presentation takes precedence over the old mobile hero
   fixed heights. Keep each page exactly one viewport in presentation mode. */
@media(max-width:780px){
  body.fullpage-mode .hero,body.fullpage-mode .features-page,body.fullpage-mode .collections-page{height:100dvh;min-height:100dvh;max-height:100dvh}
}
@media(prefers-reduced-motion:reduce){
  body.fullpage-mode main{transition:none!important}
  body.fullpage-mode .features-page.is-active .f-kicker,
  body.fullpage-mode .features-page.is-active .f-title,
  body.fullpage-mode .features-page.is-active .f-intro,
  body.fullpage-mode .features-page.is-active .f-card,
  body.fullpage-mode .features-page.is-active .f-tablet,
  body.fullpage-mode .features-page.is-active .f-contact-shadow{animation:none!important}
}


/* Section three reveal when it becomes the active full-page slide. */
body.fullpage-mode .collections-page:not(.is-active) .c-copy,
body.fullpage-mode .collections-page:not(.is-active) .c-collection-bar{opacity:.80}
body.fullpage-mode .collections-page:not(.is-active) .c-bg{transform:scale(1.018);filter:saturate(.94) brightness(.97)}
body.fullpage-mode .collections-page.is-active .c-copy{animation:section3CopyIn 820ms 90ms cubic-bezier(.2,.75,.2,1) both}
body.fullpage-mode .collections-page.is-active .c-collection-bar{animation:section3BarIn 900ms 170ms cubic-bezier(.18,.78,.16,1) both}
body.fullpage-mode .collections-page.is-active .c-bg{animation:section3SceneIn 1050ms cubic-bezier(.2,.72,.2,1) both}
@keyframes section3CopyIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes section3BarIn{from{opacity:0;transform:translateX(-50%) translateY(46px) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes section3SceneIn{from{transform:scale(1.018);filter:saturate(.94) brightness(.97)}to{transform:scale(1);filter:saturate(1) brightness(1)}}
@media(prefers-reduced-motion:reduce){
  body.fullpage-mode .collections-page.is-active .c-copy,
  body.fullpage-mode .collections-page.is-active .c-collection-bar,
  body.fullpage-mode .collections-page.is-active .c-bg{animation:none!important}
}

/* ========================= SECTION 3 — FINAL HIGH-QUALITY HTML REBUILD ========================= */
.collections-page{
  position:relative!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
  background:#eadfce!important;
  isolation:isolate;
  color:#10231f;
}
.collections-page::before,.collections-page::after{display:none!important;content:none!important}
.collections-stage,.c-fill-bg,.c-bg,.c-copy-scrim,.c-bottom-mask,.c-copy,.c-dots,.c-collection-bar,
.c-copy-card,.c-solid-bg,.c-flat-bar,.c-main-flat,.c-bottom-flat,.c-explore-hotspot{display:none!important}

.c-hq-photo{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  filter:none!important;
}

/* Fully opaque in the copy area, feathered into the photograph.
   This completely hides the baked-in old text/button without a hard rectangular panel. */
.c-hq-wash{
  position:absolute;
  z-index:2;
  left:0;
  top:7%;
  width:44%;
  height:64%;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    #f8eee1 0%,
    #f8eee1 80%,
    rgba(248,238,225,.99) 91%,
    rgba(248,238,225,0) 100%
  );
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%);
}
.c-hq-bottom-cover{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  height:28%;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(232,213,190,0) 0%,
    rgba(232,213,190,.88) 38%,
    rgba(232,213,190,.98) 58%,
    #e8d5be 100%);
}

.c-hq-copy{
  position:absolute;
  z-index:3;
  left:6.5%;
  top:20%;
  width:min(620px,37vw);
}
.c-hq-kicker{
  margin:0 0 25px;
  font:600 15px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.31em;
  color:#68736e;
}
.c-hq-copy h2{
  margin:0;
  font-family:"Bodoni MT",Didot,Georgia,"Times New Roman",serif;
  font-size:clamp(49px,3.05vw,60px);
  line-height:1.02;
  letter-spacing:-.032em;
  font-weight:500;
  color:#0a2b25;
  text-rendering:geometricPrecision;
}
.c-hq-intro{
  margin:26px 0 0;
  font-size:clamp(17px,1vw,19px);
  line-height:1.48;
  color:#616a66;
}
.c-hq-btn{
  margin-top:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:286px;
  height:59px;
  padding:0 34px;
  border-radius:999px;
  background:#003d32;
  color:#fff;
  font-size:17px;
  font-weight:600;
  box-shadow:0 13px 26px rgba(0,55,46,.13);
  transition:transform .18s ease,background .18s ease;
}
.c-hq-btn:hover{background:#004b3e;transform:translateY(-1px)}
.c-hq-btn span{font-size:22px;font-weight:400;line-height:1}

/* Opaque HTML bar covers the old flattened carousel completely. */
.c-hq-bar{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:5.6%;
  transform:translateX(-50%);
  width:min(94vw,3000px);
  height:150px;
  padding:12px 14px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  border-radius:26px;
  background:#f7f1e7;
  box-shadow:0 15px 34px rgba(73,48,24,.17),inset 0 0 0 1px rgba(255,255,255,.88);
}
.c-hq-item{
  position:relative;
  min-width:0;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) 44px;
  align-items:center;
  gap:16px;
  padding:8px 18px;
  color:#17231f;
  border-left:1px solid rgba(74,64,52,.11);
}
.c-hq-item:first-child{border-left:0}
.c-hq-item.active{
  background:#fff;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(60,42,25,.07);
}
.c-hq-item img{
  display:block;
  width:52px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(69,46,22,.12));
}
.c-hq-item-copy{display:flex;min-width:0;flex-direction:column;gap:8px;line-height:1.05}
.c-hq-item-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:650;color:#17231f}
.c-hq-item-copy small{font-size:14px;color:#747a75}
.c-hq-arrow{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(16,42,35,.12);
  background:#fff;
  color:#335149;
  font-size:18px;
}
.c-hq-item.active .c-hq-arrow{background:#00463a;color:#fff;border-color:#00463a}

body.fullpage-mode .collections-page:not(.is-active) .c-hq-copy,
body.fullpage-mode .collections-page:not(.is-active) .c-hq-bar{opacity:.84}
body.fullpage-mode .collections-page.is-active .c-hq-copy{animation:p3HQCopyIn 780ms 80ms cubic-bezier(.2,.75,.2,1) both}
body.fullpage-mode .collections-page.is-active .c-hq-bar{animation:p3HQBarIn 850ms 150ms cubic-bezier(.18,.78,.16,1) both}
body.fullpage-mode .collections-page.is-active .c-hq-photo{animation:p3HQSceneIn 980ms cubic-bezier(.2,.72,.2,1) both}
@keyframes p3HQCopyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes p3HQBarIn{from{opacity:0;transform:translateX(-50%) translateY(30px) scale(.992)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes p3HQSceneIn{from{opacity:.78;transform:scale(1.008)}to{opacity:1;transform:scale(1)}}

@media(min-aspect-ratio:2/1){
  .c-hq-wash{width:46%;top:4%;height:70%}
  .c-hq-copy{left:5.7%;top:17%;width:650px}
  .c-hq-copy h2{font-size:64px}
  .c-hq-intro{font-size:19px}
  .c-hq-bar{width:min(93vw,3100px);height:172px;bottom:4.2%}
  .c-hq-item{grid-template-columns:66px minmax(0,1fr) 48px;padding:9px 28px;gap:20px}
  .c-hq-item img{width:60px;height:106px}
  .c-hq-item-copy strong{font-size:18px}
  .c-hq-item-copy small{font-size:15px}
  .c-hq-arrow{width:42px;height:42px;font-size:19px}
}
@media(max-width:1100px){
  .c-hq-wash{width:64%;top:6%;height:66%}
  .c-hq-copy{left:6vw;top:16%;width:48vw}
  .c-hq-copy h2{font-size:clamp(38px,5.2vw,54px)}
  .c-hq-intro br{display:none}
  .c-hq-bar{width:96vw;height:122px;bottom:2%}
  .c-hq-item{grid-template-columns:40px minmax(0,1fr) 32px;gap:9px;padding:6px 9px}
  .c-hq-item img{width:36px;height:60px}
  .c-hq-item-copy strong{font-size:12px}
  .c-hq-item-copy small{font-size:10px}
  .c-hq-arrow{width:29px;height:29px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  body.fullpage-mode .collections-page.is-active .c-hq-copy,
  body.fullpage-mode .collections-page.is-active .c-hq-bar,
  body.fullpage-mode .collections-page.is-active .c-hq-photo{animation:none!important}
}

/* ========================= SECTION 4 — HOW IT WORKS ========================= */
.how-page{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  background:#ded0bb;
  isolation:isolate;
  color:#10231f;
}
.h-bg{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  user-select:none;
  -webkit-user-drag:none;
}
.h-tablet{
  position:absolute;
  z-index:1;
  top:58px;
  right:105px;
  width:760px;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 22px 24px rgba(38,30,20,.20));
  transform:rotate(-1.2deg);
  transform-origin:center center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.h-stage{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:1920px;
  height:1080px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  will-change:transform;
  pointer-events:none;
}
.h-copy{
  position:absolute;
  left:136px;
  top:96px;
  width:720px;
  pointer-events:auto;
}
.h-kicker{
  margin:0 0 25px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px;
  line-height:1;
  font-weight:600;
  letter-spacing:.31em;
  color:#66716c;
}
.h-copy h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:63px;
  line-height:.96;
  letter-spacing:-2px;
  color:#10231f;
}
.h-intro{
  margin:27px 0 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:19px;
  line-height:1.48;
  color:#626965;
}
.h-flow{
  position:absolute;
  inset:0;
}
.h-card{
  position:absolute;
  top:510px;
  width:400px;
  height:472px;
  box-sizing:border-box;
  padding:26px 28px 22px;
  border-radius:31px;
  background:rgba(250,246,238,.95);
  box-shadow:0 14px 32px rgba(83,58,31,.13), inset 0 0 0 1px rgba(255,255,255,.68);
  overflow:hidden;
  pointer-events:auto;
}
.h-card-1{left:55px}
.h-card-2{left:515px}
.h-card-3{left:975px}
.h-card-4{left:1435px}
.h-card-head{
  height:47px;
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:9px;
}
.h-num{
  display:inline-grid;
  place-items:center;
  width:50px;
  height:42px;
  border-radius:999px;
  background:rgba(242,235,224,.85);
  font:500 16px/1 Arial,Helvetica,sans-serif;
  color:#737873;
}
.h-round-icon{
  display:inline-grid;
  place-items:center;
  width:49px;
  height:49px;
  border-radius:999px;
  background:rgba(247,242,233,.95);
  color:#10231f;
  box-shadow:inset 0 0 0 1px rgba(28,54,46,.04);
}
.h-round-icon svg{width:31px;height:31px}
.h-card h3{
  margin:0 0 11px 56px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  line-height:1.05;
  font-weight:500;
  color:#17251f;
}
.h-card>p{
  margin:0 0 15px 56px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.36;
  color:#686f6b;
}
.h-visual{
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  height:238px;
  border-radius:39px 39px 17px 17px;
  overflow:hidden;
  background:#eadcc8;
  box-shadow:inset 0 0 0 1px rgba(87,65,42,.06);
}
.h-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.h-arrow{
  position:absolute;
  top:747px;
  width:48px;
  height:42px;
  display:grid;
  place-items:center;
  font:300 42px/1 Georgia,"Times New Roman",serif;
  color:#70766f;
  opacity:.86;
}
.h-arrow-1{left:468px}
.h-arrow-2{left:928px}
.h-arrow-3{left:1388px}

/* Section 4 entrance animation — same presentation language as sections 2 and 3. */
body.fullpage-mode .how-page{
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  flex:none;
  transition:opacity 760ms ease,filter 900ms ease;
  opacity:.72;
  filter:saturate(.91) brightness(.96);
}
body.fullpage-mode .how-page.is-active{opacity:1;filter:saturate(1) brightness(1)}
body.fullpage-mode .how-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:80;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(250,246,238,.08),rgba(250,246,238,0) 24%,rgba(250,246,238,0) 76%,rgba(250,246,238,.06));
  opacity:0;
  transition:opacity 520ms ease;
}
body.fullpage-mode.page-moving .how-page::before{opacity:.22}
body.fullpage-mode .how-page:not(.is-active) .h-copy,
body.fullpage-mode .how-page:not(.is-active) .h-card,
body.fullpage-mode .how-page:not(.is-active) .h-arrow{opacity:.80}
body.fullpage-mode .how-page.is-active .h-copy{animation:section4CopyIn 780ms 60ms cubic-bezier(.2,.75,.2,1) both}
body.fullpage-mode .how-page.is-active .h-card{animation:section4CardIn 760ms cubic-bezier(.18,.78,.16,1) both}
body.fullpage-mode .how-page.is-active .h-card-1{animation-delay:100ms}
body.fullpage-mode .how-page.is-active .h-card-2{animation-delay:160ms}
body.fullpage-mode .how-page.is-active .h-card-3{animation-delay:220ms}
body.fullpage-mode .how-page.is-active .h-card-4{animation-delay:280ms}
body.fullpage-mode .how-page.is-active .h-arrow{animation:section4ArrowIn 700ms 270ms cubic-bezier(.2,.75,.2,1) both}
@keyframes section4CopyIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes section4CardIn{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes section4ArrowIn{from{opacity:0;transform:translateX(-12px)}to{opacity:.86;transform:translateX(0)}}

/* Add section four to the full-page deck selectors without changing earlier sections. */
body.fullpage-mode .hero,
body.fullpage-mode .features-page,
body.fullpage-mode .collections-page,
body.fullpage-mode .how-page,
body.fullpage-mode .journey-page{height:100dvh;min-height:100dvh;max-height:100dvh;flex:none}

@media(max-width:1100px){
  .h-card{width:395px}
}
@media(max-width:780px){
  body.fullpage-mode .how-page,body.fullpage-mode .journey-page{height:100dvh;min-height:100dvh;max-height:100dvh}
}
@media(prefers-reduced-motion:reduce){
  body.fullpage-mode .how-page.is-active .h-copy,
  body.fullpage-mode .how-page.is-active .h-card,
  body.fullpage-mode .how-page.is-active .h-arrow{animation:none!important}
}

/* Section 4 ultrawide layout: widen the stage but never stretch the cards/images. */
.h-flow{
  left:55px;
  right:55px;
  top:510px;
  bottom:auto;
  height:472px;
  display:grid;
  grid-template-columns:400px minmax(55px,1fr) 400px minmax(55px,1fr) 400px minmax(55px,1fr) 400px;
  align-items:center;
}
.h-card{position:relative;top:auto;left:auto!important;width:400px;height:472px}
.h-card-1{grid-column:1}
.h-card-2{grid-column:3}
.h-card-3{grid-column:5}
.h-card-4{grid-column:7}
.h-arrow{position:relative;top:auto;left:auto!important;width:auto;height:42px;align-self:center;justify-self:center}
.h-arrow-1{grid-column:2;grid-row:1}
.h-arrow-2{grid-column:4;grid-row:1}
.h-arrow-3{grid-column:6;grid-row:1}


/* ========================= SECTION 5 — BEGIN YOUR JOURNEY =========================
   Intentionally simple and robust: one sharp photographic background plus real HTML text.
   No stretched sub-assets, no blurred fill panels, no duplicated baked-in typography. */
.journey-page{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
  background:#c98f63;
  isolation:isolate;
  color:#0c3028;
}
.j-bg{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:none!important;
  transform:none;
  user-select:none;
  -webkit-user-drag:none;
}
.j-copy{
  position:absolute;
  z-index:3;
  left:50%;
  top:40.5%;
  transform:translate(-50%,-50%);
  width:min(820px,82vw);
  text-align:center;
  color:#0a352d;
}
.j-kicker{
  margin:0 0 21px;
  font:600 15px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.31em;
  color:#5f6c68;
}
.j-copy h2{
  margin:0;
  font-family:"Bodoni MT",Didot,Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:clamp(58px,4.35vw,84px);
  line-height:.98;
  letter-spacing:-.025em;
  color:#0a352d;
  text-rendering:geometricPrecision;
}
.j-intro{
  margin:24px 0 0;
  font:400 clamp(19px,1.28vw,25px)/1.32 Arial,Helvetica,sans-serif;
  color:#5d6865;
}
.j-cta{
  margin-top:31px;
  min-width:252px;
  height:60px;
  padding:0 34px;
  border:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  background:#005244;
  color:#fff;
  font:500 18px/1 Arial,Helvetica,sans-serif;
  box-shadow:0 14px 32px rgba(0,53,44,.13);
  cursor:pointer;
  transition:transform 180ms ease,background 180ms ease,box-shadow 180ms ease;
}
.j-cta:hover{transform:translateY(-2px);background:#006151;box-shadow:0 18px 38px rgba(0,53,44,.18)}

/* Section 5 presentation reveal. */
body.fullpage-mode .journey-page{
  opacity:.76;
  filter:saturate(.93) brightness(.97);
  transition:opacity 760ms ease,filter 900ms ease;
}
body.fullpage-mode .journey-page.is-active{opacity:1;filter:saturate(1) brightness(1)}
body.fullpage-mode .journey-page::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,248,238,.16),transparent 28%,transparent 72%,rgba(48,27,17,.10));
  opacity:0;
  transition:opacity 520ms ease;
}
body.fullpage-mode.page-moving .journey-page::before{opacity:.42}
body.fullpage-mode .journey-page:not(.is-active) .j-copy{opacity:.78}
body.fullpage-mode .journey-page.is-active .j-copy{animation:section5CopyIn 860ms 80ms cubic-bezier(.2,.75,.2,1) both}
@keyframes section5CopyIn{from{opacity:0;transform:translate(-50%,calc(-50% + 24px)) scale(.992)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media(max-width:900px){
  .j-copy{top:41%;width:88vw}
  .j-kicker{font-size:12px;letter-spacing:.27em;margin-bottom:16px}
  .j-copy h2{font-size:clamp(48px,10vw,68px)}
  .j-intro{font-size:17px;margin-top:19px}
  .j-cta{height:56px;min-width:220px;font-size:16px;margin-top:25px}
}
@media(max-width:560px){
  .j-bg{object-position:center center}
  .j-copy{top:39%;width:92vw}
  .j-copy h2 br{display:none}
  .j-copy h2{font-size:clamp(42px,12vw,58px)}
  .j-intro br{display:none}
  .j-intro{max-width:330px;margin-left:auto;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){
  body.fullpage-mode .journey-page.is-active .j-copy{animation:none!important}
}

/* Section 4 readability fix: compact themed cream panel behind the copy.
   This intentionally uses a solid/translucent fill instead of blur so the text
   stays crisp over foliage/architecture on every screen. */
.h-copy{
  left:92px;
  top:72px;
  width:770px;
  padding:34px 42px 38px;
  border-radius:32px;
  background:rgba(250,246,238,.94);
  box-shadow:0 18px 48px rgba(62,46,29,.14), inset 0 0 0 1px rgba(255,255,255,.72);
}
.h-copy::after{
  content:"";
  position:absolute;
  left:42px;
  bottom:20px;
  width:72px;
  height:2px;
  border-radius:999px;
  background:rgba(10,75,61,.20);
}
.h-kicker{color:#5f6e68}
.h-copy h2{color:#0c342d}
.h-intro{color:#5f6863}

@media(max-width:780px){
  .h-copy{
    left:78px;
    top:68px;
    width:810px;
    padding:36px 44px 40px;
  }
}

/* Section 4 final composition: clean photo + separate tablet + compact cream copy card. */
.h-tablet{
  position:absolute;
  z-index:1;
  top:72px;
  right:86px;
  width:760px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 24px 28px rgba(52,40,25,.22));
  transform:rotate(-1deg);
  transform-origin:center center;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.h-copy{
  left:88px;
  top:76px;
  width:760px;
  padding:34px 42px 40px;
  border-radius:30px;
  background:rgba(250,246,238,.95);
  box-shadow:0 18px 44px rgba(62,46,29,.13), inset 0 0 0 1px rgba(255,255,255,.76);
}
.h-copy::after{display:none}
.h-kicker{margin-bottom:22px;color:#66716c}
.h-copy h2{font-size:60px;line-height:.98;color:#102f29}
.h-intro{margin-top:24px;color:#626965}
\n\n/* ========================= SECTION 3 — BOTTOM BAR INTERACTION FIX ========================= */
/* Keep the existing 3D photographic books and all Section 3 layout unchanged. */
.c-hq-copy{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
}
.c-hq-bar{overflow:hidden!important;isolation:isolate}
.c-hq-highlight{
  position:absolute;
  z-index:0;
  top:12px;
  bottom:12px;
  left:14px;
  width:calc((100% - 28px)/5);
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 18px rgba(60,42,25,.07);
  pointer-events:none;
  transition:left 420ms cubic-bezier(.22,.8,.25,1),width 420ms cubic-bezier(.22,.8,.25,1);
  will-change:left,width;
}
.c-hq-item{z-index:1;background:transparent!important;box-shadow:none!important}
.c-hq-item.active{background:transparent!important;box-shadow:none!important}
.c-hq-item img{
  width:56px!important;
  height:96px!important;
  object-fit:contain!important;
  border-radius:2px;
  filter:drop-shadow(0 3px 5px rgba(69,46,22,.10));
}
@media(min-aspect-ratio:2/1){
  .c-hq-item img{width:64px!important;height:110px!important}
}
@media(max-width:1100px){
  .c-hq-highlight{top:10px;bottom:10px;left:10px;border-radius:16px}
  .c-hq-item img{width:40px!important;height:66px!important}
}


/* ========================= ACCOUNT ONBOARDING DIALOG ========================= */
    /* Functional three-step onboarding dialog — built entirely in HTML/CSS. */
    .signup-overlay {
      --signup-green: #063d31;
      --signup-ink: #0c2a22;
      --signup-muted: #74807c;
      --signup-line: rgba(21, 54, 44, .14);
      position: fixed;
      inset: 0;
      z-index: 12000;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(4, 17, 13, .54);
      backdrop-filter: blur(14px) saturate(.82);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .32s ease, visibility .32s ease;
    }

    .signup-overlay[hidden] { display: none !important; }
    .signup-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

    .signup-panel {
      position: relative;
      width: min(760px, calc(100vw - 32px));
      height: min(920px, calc(100svh - 32px));
      min-height: 620px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.74);
      border-radius: 26px;
      background:
        radial-gradient(circle at 18% 7%, rgba(255,255,255,.96), transparent 34%),
        linear-gradient(145deg, rgba(255,253,248,.98), rgba(245,239,228,.98));
      color: var(--signup-ink);
      box-shadow: 0 35px 95px rgba(0, 18, 13, .34), 0 8px 24px rgba(0,0,0,.12);
      opacity: 0;
      transform: translateY(26px) scale(.965);
      transition: opacity .38s ease, transform .48s cubic-bezier(.2,.82,.2,1);
    }

    .signup-overlay.is-open .signup-panel { opacity: 1; transform: none; }

    .signup-close {
      position: absolute;
      z-index: 6;
      top: 18px;
      right: 18px;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--signup-line);
      border-radius: 50%;
      background: rgba(255,255,255,.7);
      color: var(--signup-ink);
      cursor: pointer;
      transition: transform .2s ease, background .2s ease;
    }

    .signup-close:hover { transform: rotate(6deg) scale(1.04); background: #fff; }
    .signup-close svg { width: 20px; height: 20px; }

    .signup-progress {
      position: relative;
      z-index: 3;
      width: min(520px, calc(100% - 130px));
      height: 112px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
    }

    .signup-progress::before {
      content: "";
      position: absolute;
      left: 16.67%;
      right: 16.67%;
      top: 42px;
      height: 1px;
      background: #c8cbc4;
    }

    .progress-item {
      position: relative;
      z-index: 1;
      appearance: none;
      border: 0;
      background: transparent;
      color: #69736f;
      text-align: center;
      cursor: default;
      padding: 0;
    }

    .progress-item.can-visit { cursor: pointer; }

    .progress-dot {
      width: 43px;
      height: 43px;
      margin: 0 auto 8px;
      display: grid;
      place-items: center;
      border: 1px solid #cbd0ca;
      border-radius: 50%;
      background: #f7f3eb;
      color: #5d6763;
      font: 600 17px/1 "Plus Jakarta Sans", sans-serif;
      transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease;
    }

    .progress-label {
      display: block;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 17px;
      font-weight: 600;
      line-height: 1;
    }

    .progress-item.is-current,
    .progress-item.is-complete { color: var(--signup-ink); }

    .progress-item.is-current .progress-dot,
    .progress-item.is-complete .progress-dot {
      border-color: var(--signup-green);
      background: var(--signup-green);
      color: #fff;
      box-shadow: 0 8px 19px rgba(0,58,45,.17);
    }

    .progress-item.can-visit:hover .progress-dot { transform: translateY(-2px); }

    .signup-stage {
      position: absolute;
      inset: 112px 0 0;
      overflow: hidden;
    }

    .signup-step {
      position: absolute;
      inset: 0;
      padding: 4px 54px 34px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(36px);
      scrollbar-width: thin;
      scrollbar-color: rgba(6,61,49,.28) transparent;
    }

    .signup-step.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
    }

    .signup-step.enter-forward { animation: step-in-forward .45s cubic-bezier(.22,.74,.2,1) both; }
    .signup-step.enter-back { animation: step-in-back .45s cubic-bezier(.22,.74,.2,1) both; }
    .signup-step.exit-forward { animation: step-out-forward .28s ease both; }
    .signup-step.exit-back { animation: step-out-back .28s ease both; }

    .signup-title {
      margin: 4px 0 3px;
      color: var(--signup-ink);
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(42px, 4vw, 54px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -1.1px;
      text-align: center;
    }

    .signup-subtitle {
      margin: 0 0 22px;
      color: var(--signup-muted);
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: 24px;
      font-weight: 500;
      text-align: center;
    }

    .signup-form { display: grid; gap: 12px; }

    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

    .field {
      position: relative;
      min-height: 58px;
      display: grid;
      grid-template-columns: 30px 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 8px 15px;
      border: 1px solid var(--signup-line);
      border-radius: 12px;
      background: rgba(255,255,255,.43);
      box-shadow: 0 5px 14px rgba(42,35,22,.025);
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .field:focus-within {
      border-color: rgba(6,61,49,.54);
      background: rgba(255,255,255,.8);
      box-shadow: 0 0 0 3px rgba(6,61,49,.08);
    }

    .field.is-invalid { border-color: #a44638; box-shadow: 0 0 0 3px rgba(164,70,56,.08); }
    .field-icon { width: 22px; height: 22px; color: #34443f; }

    .field-control { min-width: 0; }
    .field-control label {
      display: block;
      margin-bottom: 1px;
      font: 600 16px/1.1 "Cormorant Garamond", Georgia, serif;
      color: #263c35;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: #1b2c27;
      font: 400 14px/1.35 "Plus Jakarta Sans", Arial, sans-serif;
    }

    .field input::placeholder,
    .field textarea::placeholder { color: #9aa19e; opacity: 1; }
    .field select { cursor: pointer; appearance: none; }
    .field select:invalid { color: #9aa19e; }

    .icon-button {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #66736f;
      cursor: pointer;
    }
    .icon-button:hover { background: rgba(6,61,49,.07); color: var(--signup-green); }
    .icon-button svg { width: 19px; height: 19px; }

    .field-error {
      min-height: 17px;
      margin: -7px 3px 0;
      color: #943e32;
      font-size: 12px;
    }

    .check-line {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 28px;
      color: #4e5b57;
      font-size: 14px;
    }

    .check-line input,
    .interest-chip input,
    .toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: auto;
      cursor: pointer;
    }

    .check-line { position: relative; }
    .check-line input { left: 0; top: 50%; width: 22px; height: 22px; z-index: 2; transform: translateY(-50%); }
    .interest-chip { position: relative; }
    .interest-chip input,
    .toggle input { inset: 0; width: 100%; height: 100%; z-index: 2; }

    .checkbox-box {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border: 1px solid #b7beb9;
      border-radius: 5px;
      background: #fff;
      color: transparent;
      transition: background .2s ease, border-color .2s ease, color .2s ease;
    }

    .check-line input:checked + .checkbox-box {
      border-color: var(--signup-green);
      background: var(--signup-green);
      color: #fff;
    }

    .inline-link {
      padding: 0;
      border: 0;
      border-bottom: 1px solid currentColor;
      background: none;
      color: var(--signup-ink);
      font: inherit;
      font-weight: 600;
      cursor: pointer;
    }

    .signup-primary,
    .provider-button,
    .text-button {
      cursor: pointer;
      font-family: "Plus Jakarta Sans", Arial, sans-serif;
    }

    .signup-primary {
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      border: 0;
      border-radius: 12px;
      background: linear-gradient(100deg, #04392e, #0b4b3d);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      box-shadow: 0 10px 24px rgba(0,54,42,.13);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    .signup-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 13px 28px rgba(0,54,42,.2); }
    .signup-primary:active { transform: translateY(0) scale(.99); }
    .signup-primary svg { width: 20px; height: 20px; }

    .provider-divider {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 16px;
      color: #77817e;
      font-size: 13px;
    }
    .provider-divider::before,
    .provider-divider::after { content: ""; height: 1px; background: var(--signup-line); }

    .provider-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .provider-button {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid var(--signup-line);
      border-radius: 11px;
      background: rgba(255,255,255,.58);
      color: #22322d;
      font-size: 14px;
      transition: transform .18s ease, background .18s ease;
    }
    .provider-button:hover { transform: translateY(-1px); background: #fff; }
    .provider-mark { font-size: 22px; font-weight: 700; line-height: 1; }
    .provider-mark.google { color: #4285f4; }

    .security-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #7a8581;
      font-size: 12px;
      text-align: center;
    }
    .security-note svg { width: 16px; height: 16px; flex: 0 0 auto; }

    .text-button {
      justify-self: center;
      padding: 2px 0;
      border: 0;
      border-bottom: 1px solid transparent;
      background: transparent;
      color: #53605c;
      font-size: 14px;
    }
    .text-button:hover { color: var(--signup-green); border-bottom-color: currentColor; }

    .section-heading {
      margin: 4px 0 -4px;
      font: 600 20px/1.1 "Cormorant Garamond", Georgia, serif;
      color: #263a34;
    }
    .section-hint { margin: 0; color: #7c8582; font-size: 13px; }

    .interest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
    .interest-chip {
      min-height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--signup-line);
      border-radius: 999px;
      background: rgba(255,255,255,.48);
      color: #3d4c47;
      font-size: 13px;
      cursor: pointer;
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .interest-chip:hover { transform: translateY(-1px); background: #fff; }
    .interest-chip:has(input:checked) { border-color: var(--signup-green); background: var(--signup-green); color: #fff; }
    .interest-chip svg { width: 18px; height: 18px; }

    .field.textarea-field { align-items: start; min-height: 72px; padding-top: 13px; }
    .field textarea { min-height: 45px; resize: vertical; }

    .completion-list,
    .experience-grid { display: grid; gap: 10px; }
    .completion-list { padding: 10px 14px; border: 1px solid var(--signup-line); border-radius: 14px; background: rgba(255,255,255,.36); }
    .completion-item { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 12px; padding: 6px 0; }
    .completion-item + .completion-item { border-top: 1px solid var(--signup-line); }
    .round-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #e5eee7; color: var(--signup-green); }
    .round-icon svg { width: 22px; height: 22px; }
    .completion-copy strong,
    .experience-copy strong { display: block; font: 600 18px/1.1 "Cormorant Garamond", Georgia, serif; }
    .completion-copy span,
    .experience-copy span { display: block; margin-top: 2px; color: #7d8783; font-size: 12px; line-height: 1.3; }
    .completion-check { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #e5eee7; color: var(--signup-green); }
    .completion-check svg { width: 17px; height: 17px; }

    .experience-grid { grid-template-columns: 1fr 1fr; }
    .experience-card { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--signup-line); border-radius: 13px; background: rgba(255,255,255,.38); }

    .preference-block { border-top: 1px solid var(--signup-line); padding-top: 8px; }
    .preference-line { min-height: 48px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; }
    .preference-line .round-icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.65); border: 1px solid var(--signup-line); }
    .preference-copy strong { display: block; font: 600 16px/1.1 "Cormorant Garamond", Georgia, serif; }
    .preference-copy span { display: block; margin-top: 2px; color: #7d8783; font-size: 11px; }

    .toggle { position: relative; width: 50px; height: 29px; border-radius: 999px; background: #cfd4d0; cursor: pointer; transition: background .2s ease; }
    .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
    .toggle:has(input:checked) { background: var(--signup-green); }
    .toggle:has(input:checked)::after { transform: translateX(21px); }

    .info-strip { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--signup-line); border-radius: 10px; background: rgba(218,227,219,.55); color: #53605c; font-size: 11px; }
    .info-strip svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--signup-green); }

    .subdialog {
      --signup-green: #063d31;
      --signup-ink: #0c2a22;
      --signup-muted: #74807c;
      --signup-line: rgba(21, 54, 44, .14);
      position: fixed;
      z-index: 300;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 16px;
      overflow: auto;
      border: 0;
      background: rgba(2,14,10,.58);
      color: var(--signup-ink);
      backdrop-filter: blur(8px);
      opacity: 1;
      transition: opacity .2s ease;
    }
    .subdialog[hidden] { display: none; }
    .subdialog-inner {
      width: min(560px, calc(100vw - 32px));
      max-height: min(720px, calc(100svh - 32px));
      padding: 28px;
      overflow-y: auto;
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 20px;
      background: #faf6ee;
      box-shadow: 0 30px 90px rgba(0,18,13,.38);
      animation: dialog-arrive .28s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes dialog-arrive { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
    .subdialog h2 { margin: 0 0 8px; font: 600 38px/1 "Cormorant Garamond", Georgia, serif; }
    .subdialog p, .subdialog li { color: #58635f; font-size: 14px; line-height: 1.6; }
    .subdialog h3 { margin: 20px 0 4px; font: 600 21px/1.2 "Cormorant Garamond", Georgia, serif; }
    .subdialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
    .dialog-secondary { min-height: 46px; padding: 0 20px; border: 1px solid var(--signup-line); border-radius: 10px; background: #fff; color: var(--signup-ink); cursor: pointer; }
    .dialog-primary { min-height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--signup-green); color: #fff; cursor: pointer; }

    .app-toast {
      position: fixed;
      z-index: 150;
      left: 50%;
      bottom: 26px;
      max-width: calc(100vw - 32px);
      padding: 12px 18px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      background: rgba(5,43,34,.94);
      color: #fff;
      font-size: 14px;
      box-shadow: 0 12px 35px rgba(0,0,0,.2);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 14px);
      transition: opacity .22s ease, transform .22s ease;
    }
    .app-toast.show { opacity: 1; transform: translate(-50%, 0); }

    @keyframes step-in-forward { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
    @keyframes step-out-forward { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-30px); } }
    @keyframes step-in-back { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
    @keyframes step-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(30px); } }

    @media (max-width: 680px) {
      .signup-overlay { padding: 8px; }
      .signup-panel { width: calc(100vw - 16px); height: calc(100svh - 16px); min-height: 0; border-radius: 20px; }
      .signup-progress { width: calc(100% - 78px); height: 102px; }
      .signup-progress::before { top: 37px; }
      .progress-dot { width: 38px; height: 38px; margin-bottom: 7px; font-size: 15px; }
      .progress-label { font-size: 14px; }
      .signup-stage { top: 102px; }
      .signup-step { padding: 2px 20px 28px; }
      .signup-title { font-size: 40px; }
      .signup-subtitle { font-size: 20px; margin-bottom: 18px; }
      .field-row, .provider-row, .experience-grid { grid-template-columns: 1fr; }
      .interest-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-height: 760px) and (min-width: 681px) {
      .signup-progress { height: 92px; }
      .signup-progress::before { top: 34px; }
      .progress-dot { width: 36px; height: 36px; margin-bottom: 6px; }
      .signup-stage { top: 92px; }
      .signup-step { padding-top: 0; }
      .signup-title { font-size: 42px; }
      .signup-subtitle { margin-bottom: 16px; }
    }

    body.signup-open { overscroll-behavior: none; }