/* What: editorial home-page sections and real screenshot compositions. */
/* Called by: index.html. */
/* Depends on: styles.css tokens and owned assets. */
.hero{display:grid;grid-template-columns:1.06fr 1fr;gap:60px;align-items:center;padding-block:85px 76px}
.hero h1{font-size:var(--text-hero);letter-spacing:var(--tracking-hero);margin-bottom:26px}
.hero .eyebrow{display:flex;gap:9px;align-items:center;margin-bottom:25px}
.tiny-sun{font-size:var(--symbol-medium);line-height:var(--leading-symbol);color:#a68136}
.hero-description{font-size:var(--text-hero-description);line-height:var(--leading-intro);max-width:380px;color:var(--muted);margin-bottom:30px}
.waitlist-block{scroll-margin-top:40px;max-width:440px}
.hero-footnote{margin:21px 0 0;font-size:var(--text-micro);color:var(--muted);display:flex;gap:9px;align-items:center}
.hero-footnote span{font-size:var(--symbol-small);color:var(--green)}
.hero-art{position:relative;height:620px;isolation:isolate}
.hero-art::before{content:'';position:absolute;background:#e6e9d6;width:95%;height:79%;top:9%;left:3%;border-radius:48% 48% 45% 42%;transform:rotate(-8deg);z-index:-1}
.device{padding:9px;background:#393a32;border-radius:27px;box-shadow:0 24px 38px -15px #5a50364f,0 4px 7px #302f2417;position:relative}
.device img{border-radius:18px;height:auto;width:100%}
.hero-device{width:360px;position:absolute;top:54px;left:25px;transform:rotate(-6deg)}
.device-camera{position:absolute;top:3px;left:50%;width:4px;height:4px;background:#1c211c;border-radius:50%}
.art-note{position:absolute;right:4px;top:-5px;transform:rotate(7deg);font-size:var(--text-art-note);z-index:2}
.art-note span{font-family:var(--font-display);font-size:var(--symbol-arrow);display:block;line-height:var(--leading-symbol);margin-left:20px;margin-top:4px}
.note-card{position:absolute;right:-2px;bottom:29px;width:193px;height:213px;background:#eacb91;padding:37px 22px 15px;box-shadow:1px 10px 20px #503d2724;transform:rotate(7deg);border-radius:2px;color:#5c482c}
.note-card p{font-family:var(--font-display);font-size:var(--text-note-card);line-height:var(--leading-note-card);margin-bottom:0;letter-spacing:var(--tracking-subheading)}
.note-card em{color:#6b502a}
.note-pin{position:absolute;width:70px;height:24px;background:#f3eddaa1;left:65px;top:-9px;transform:rotate(-5deg);border:1px solid #e1d7b86b}
.note-flower{position:absolute;right:19px;bottom:6px;font-size:var(--symbol-note-flower);color:#ae6b42}
.hero-doodle{position:absolute;width:55px;height:55px;right:4px;top:178px;color:#a37a32;transform:rotate(15deg)}
.notebook-strip{border-block:1px solid var(--line);background:#efedde}
.notebook-strip .wrap{display:flex;justify-content:center;align-items:center;gap:52px;padding-block:24px;font-family:var(--font-display);font-size:var(--text-strip);line-height:var(--leading-heading);color:#5c5e49}
.strip-star{color:#8c956b;font-family:var(--font-body);font-size:var(--symbol-strip)}
.story-section{padding-block:104px 94px}
.section-heading{text-align:center;margin-bottom:55px}
.section-heading .eyebrow{margin-bottom:22px}
.section-heading p:last-child{color:var(--muted);font-size:var(--text-copy);line-height:var(--leading-copy)}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:42px}
.moment{border-top:1px solid #bfc4b0;padding-top:22px}
.moment-number{font-size:var(--text-tiny);letter-spacing:var(--tracking-step);color:var(--muted)}
.moment-icon{font-size:var(--symbol-moment);color:var(--green);margin-top:17px;line-height:var(--leading-moment-symbol)}
.moment h3{font-size:var(--text-card-heading);letter-spacing:var(--tracking-subheading);margin:15px 0 12px;line-height:var(--leading-heading)}
.moment p{font-size:var(--text-ui);color:var(--muted);line-height:var(--leading-relaxed);margin:0;max-width:290px}
.page-story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:110px;padding-block:60px 100px}
.paper-preview{position:relative;background:#e8dac5;border-radius:48% 48% 5px 5px;padding:27px 75px 53px;min-height:530px}
.journal-device{width:290px;transform:rotate(5deg);margin-inline:auto;padding:7px;border-radius:23px}
.journal-device img{border-radius:16px}
.paper-note{position:absolute;bottom:7px;left:16px;transform:rotate(-8deg);font-size:var(--text-paper-note)}
.page-copy h2{font-size:var(--text-feature-heading);line-height:var(--leading-feature)}
.page-copy>p:not(.eyebrow){font-size:var(--text-copy);color:var(--muted);line-height:var(--leading-relaxed);max-width:370px}
.page-copy .text-link{margin-top:13px}
.collection-section{background:#ebeede;padding-block:90px 88px;border-block:1px solid #d8ddc9}
.collection-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px;gap:30px}
.collection-heading h2{margin-bottom:0}
.collection-heading>p{font-size:var(--text-ui);line-height:var(--leading-relaxed);color:var(--muted);margin-bottom:4px;max-width:200px}
.collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.collection-card{margin:0}
.collection-image{height:405px;overflow:hidden;padding:28px 75px 0;border-radius:6px;background:#ddd9d9}
.collection-image img{width:100%;height:auto;border-radius:15px 15px 0 0;border:7px solid #393a32;border-bottom:0;box-shadow:0 10px 22px #30302430}
.graph-card .collection-image{background:#d8dfd3;padding-top:28px}
.graph-card .collection-image img{transform:translateY(-4px)}
figcaption{display:flex;gap:20px;margin-top:23px}
figcaption>span{font-family:var(--font-display);font-size:var(--text-body);color:#82886f;margin-top:3px}
figcaption h3{font-size:var(--text-figure-heading);letter-spacing:var(--tracking-figure-heading);line-height:var(--leading-heading);margin-bottom:7px}
figcaption p{font-size:var(--text-small);color:var(--muted);line-height:var(--leading-copy);margin:0;max-width:330px}
.faq-section{padding-block:100px 95px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;font-size:var(--text-ui);font-weight:var(--weight-medium);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0}
summary::-webkit-details-marker{display:none}
summary span{font-size:var(--symbol-medium);color:var(--green);font-weight:var(--weight-regular);line-height:var(--leading-symbol);transition:transform .2s}
details[open] summary span{transform:rotate(45deg)}
details p{font-size:var(--text-ui);color:var(--muted);margin:0 30px 23px 0;line-height:var(--leading-copy)}
.closing{text-align:center;padding:68px 25px 78px;background:#efe5d1;border-radius:8px;margin-bottom:80px;position:relative}
.closing .eyebrow{margin-bottom:22px}
.closing h2{font-size:var(--text-closing-heading);margin-bottom:22px}
.closing>p:not(.eyebrow){font-size:var(--text-ui);color:var(--muted);margin-bottom:23px}
.closing-flower{font-size:var(--symbol-closing-flower);color:#ab7447;display:block;line-height:var(--leading-symbol);margin-bottom:28px}
.closing-note{position:absolute;right:60px;bottom:47px;transform:rotate(7deg);font-size:var(--text-closing-note)}
@media(max-width:1100px){.hero{gap:30px}.hero-device{width:310px;left:15px;top:80px}.hero-art{height:580px}.art-note{right:-3px;top:10px;}.note-card{width:173px;right:-8px;bottom:34px;height:192px;padding-top:30px}.hero-doodle{right:-5px}.page-story{gap:60px}.paper-preview{padding-inline:30px}.collection-image{padding-inline:45px}}
@media(max-width:900px){.hero{padding-block:65px;gap:20px}.hero-art{height:540px}.hero-device{width:265px;left:10px;top:72px}.art-note{top:0}.hero-doodle{width:40px;right:0;top:150px}.note-card{width:155px;height:174px;bottom:54px;right:0;padding:30px 17px 10px}.input-row{flex-direction:column}.input-row .button{padding:12px}.story-section{padding-block:75px}.moments{gap:25px}.page-story{gap:35px;padding-block:30px 75px}.paper-preview{padding:30px 20px 70px;min-height:auto}.journal-device{width:240px}.collection-section{padding-block:70px}.collection-image{padding-inline:28px;height:325px}.faq-section{gap:45px;padding-block:75px}.closing-note{right:25px;bottom:25px;}.notebook-strip .wrap{gap:35px;}}
@media(max-width:700px){.hero{grid-template-columns:1fr;padding-block:50px 35px;gap:20px}.hero-description{max-width:360px}.hero-copy{max-width:470px}.waitlist-block{max-width:450px}.hero-art{height:520px;width:min(390px,100%);margin-inline:auto;margin-top:20px}.hero-device{width:275px;left:23px;top:45px}.hero-art::before{height:80%;top:8%;left:0}.art-note{top:-5px;right:0;}.hero-doodle{right:2px;top:148px;width:43px}.note-card{width:160px;bottom:17px;right:3px;height:180px}.notebook-strip .wrap{gap:17px;padding-block:20px;justify-content:space-between}.moments{grid-template-columns:1fr;gap:28px}.moment{display:grid;grid-template-columns:50px 1fr;padding-top:17px}.moment-number{grid-column:1/-1}.moment-icon{grid-row:2/4;align-self:start;margin-top:14px}.moment h3{margin:16px 0 10px;}.moment p{max-width:none}.section-heading{margin-bottom:40px}.story-section{padding-block:70px 60px}.page-story{grid-template-columns:1fr;gap:47px;padding-block:15px 65px}.paper-preview{max-width:400px;width:100%;margin:auto;padding:27px 40px 64px}.journal-device{width:265px}.page-copy>p:not(.eyebrow){max-width:none}.collection-heading{display:block;margin-bottom:32px}.collection-heading>p{margin:22px 0 0}.collection-grid{grid-template-columns:1fr;gap:40px}.collection-image{height:350px;padding-inline:45px}.collection-section{padding-block:60px}.faq-section{grid-template-columns:1fr;gap:15px;padding-block:70px 60px}.closing{padding:45px 20px 75px;margin-bottom:55px}.closing-note{position:static;display:block;margin-top:26px;}.closing-flower{margin-bottom:24px}}
@media(max-width:380px){.hero-art{height:470px}.hero-device{width:245px;left:16px;top:55px}.note-card{width:145px;height:163px;bottom:5px}.notebook-strip .wrap{gap:10px}.collection-image{padding-inline:30px}.journal-device{width:235px}.paper-preview{padding-inline:25px}}