/* Layzbooks final colours: the original dark look with the logo's amber as the accent */
:root{
  --iris:#D99A1E; --iris-2:#F2B54A; --iris-soft:#F8EAD0; --on-iris:#0D0E12;
  --iris-hover:#BF8616; --iris-sel:#3E2F12;
  --shade:13 14 18;
}

/* Links within the page glide instead of jumping. (The page never scrolls
   sideways: styles.css hides sideways overflow on body, which the browser
   applies to the whole window, and anything that moves past its edges is
   clipped by its own section. Don't put overflow on html: the window would
   stop following body's rule and scroll-linked moves would measure the
   wrong box.) */
html{scroll-behavior:smooth}
/* while the wheel glides (motion.js), the glide moves the page itself every frame */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto!important}
html.lenis.lenis-stopped{overflow:hidden}

/* ---------- motion (motion.js runs every move; these are the places it holds) ---------- */

/* The headline and its words wait out of sight until the opening plays, so
   they never show, jump and then rise (the class is set in the page's head). */
html.lz-intro .hero-title .line>span{transform:translateY(110%)}
html.lz-intro .hero-sub,html.lz-intro .hero-actions{opacity:0}
/* a headline line that wraps splits evenly (no single word left on its own row) */
.hero-title .line>span{text-wrap:balance}
/* the two subtitles share one space (hero-captions.js), so the buttons never jump */
.hero-sub{display:grid}
.hero-sub>span{grid-area:1/1}

/* The hero is held on screen while its photos become an album (170% of a
   screen of scrolling on a computer, two good scrolls; one screen on a
   phone), then its page turns over (70/30 more: main-layzbooks.js plays the
   album in the first 70% of the hold). The browser holds it (position
   sticky), not the page's code. */
.hero{height:calc(100svh + 243svh)}
.hero-stage{position:sticky;top:0}
/* the album's shadow and fold appear as it forms (tracks in the hero scene), so the book isn't given away early */
.hero-spread-wrap .spread{box-shadow:none}
.hero-spread-wrap .spread-gutter{opacity:0}
/* the line that lands with the last photo, above the album where the headline
   was; it hangs above the album, so the album stays exactly where it was */
/* on short screens the album gives up a little width so the line clears the menu bar */
.hero-spread-wrap{width:min(1120px,88vw,calc(217svh - 790px))}
.hero-done{position:absolute;left:0;right:0;bottom:100%;margin:0;padding:0 4% clamp(18px,3.4vh,36px);text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(24px,2.7vw,42px);line-height:1.08;letter-spacing:-.035em;color:var(--paper);text-wrap:balance;opacity:0}
.spread-shadow{position:absolute;inset:0;z-index:-1;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);opacity:0;pointer-events:none}
/* no soft shadows under the floating photos: on this near-black they draw faint lines */
.hero .pile{box-shadow:none}
/* The top album's page turn (main-layzbooks.js): a copy of the right page
   turns over onto the left (spread 2's left page on its back) while spread
   2's right page waits under it, with one photo still settling into its
   space. The fold's shading (z-index 3) stays on top of it all. */
.hero-page{position:absolute;top:0;bottom:0;width:50%;background:var(--surface);overflow:hidden}
.hero-under{left:50%;z-index:1;opacity:0}
.hero-leaf{position:absolute;top:0;bottom:0;left:50%;width:50%;z-index:2;transform-origin:left center;transform-style:preserve-3d;opacity:0}
.hero-leaf .hero-page{left:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-leaf .hl-back{transform:rotateY(180deg)}
.hl-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.hero .hero-empty{background:#ECEBE6;outline:1.5px dashed rgba(13,14,18,.24);outline-offset:-1.5px} /* the same empty space as the closing album's; the photo settling above it gets its place and shadow from main-layzbooks.js */
/* the page count turns with the page */
.chip-turn{display:inline-grid}
.chip-turn span{grid-area:1/1}
.chip-turn span+span{opacity:0}

/* Print: on a computer the section is held while the route fills */
@media (min-width:821px){
  .print{height:calc(100svh + 140svh)}
  .print-pin{position:sticky;top:0;min-height:100svh;padding:clamp(72px,8vw,120px) 0}
}
/* the line fills by stretching, and the marker travels the line's own width
   (the line is a size container, so 100cqw is its width) */
.route-line{container-type:inline-size}
.route-line span{width:100%;transform:scaleX(0);transform-origin:left center}
.rs:first-child{opacity:1}
.order-status{display:inline-grid}
.order-status span{grid-area:1/1;opacity:0}
.order-status span:first-child{opacity:1}

/* ---------- the closing album (the join scene) ---------- */
.join{display:block;min-height:0;padding:0;height:calc(100svh + 130svh);overflow:clip}
.join-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:clip}
.join-album{position:relative;width:min(1100px,88vw);aspect-ratio:2/1;perspective:2600px;transform-origin:50% 50%}
.ja-page,.ja-face{position:absolute;top:0;bottom:0;width:50%;background:var(--surface);overflow:hidden}
.ja-left{left:0;box-shadow:inset -18px 0 24px -18px rgba(0,0,0,.18)}
.ja-leaf{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:left center;transform-style:preserve-3d}
.ja-face{inset:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ja-front{box-shadow:inset 18px 0 24px -18px rgba(0,0,0,.18)}
.ja-back{transform:rotateY(180deg);background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 6%,transparent 94%,rgba(0,0,0,.25)),#1A1B21;box-shadow:inset 0 0 0 1px rgba(244,244,241,.07);display:grid;justify-items:center;align-content:start;padding-top:9%}
.ja-mark{width:12%;aspect-ratio:1;display:block}
.ja-mark svg{width:100%;height:100%;display:block}
.ja-ph{position:absolute;overflow:hidden;background:var(--surface-2)}
.ja-ph img{width:100%;height:100%;object-fit:cover}
/* the question sits on the closed cover once it has shut */
.join-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,74vw);text-align:center;display:grid;gap:14px;justify-items:center;z-index:2}
.join-copy .display{font-size:clamp(28px,3.2vw,44px)}
.join-copy .lede{font-size:clamp(14px,1.1vw,16px);max-width:32ch}
.join-copy .join-actions{margin-top:6px}

/* ---------- phones ---------- */
@media (pointer:coarse),(max-width:820px){
  /* the hero holds for one screen of scrolling, and 70/30 more for its page turn */
  .hero{height:calc(100svh + 143svh)}
  .hero-spread-wrap{width:min(94vw,calc((100svh - 210px) * 2))}
  /* no blur behind the menu bar, and no permanent extra layers; fully solid, so no words show through it */
  .nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:#F4F4F1}
  .reveal{will-change:auto}
  /* the app window shows the spread and the strip only: no photo tray or side
     panel (styles.css hides them, then the next rule switched the tray back on) */
  .appwin .aw-tray,.appwin .aw-panel{display:none}
  .appwin .aw-body{min-height:0}
  .appwin .aw-canvas{padding:18px 12px}
  /* a closed sample book sits in the middle of its space instead of on one half */
  .book{transition:transform .8s cubic-bezier(.65,0,.35,1)}
  .book.at-cover{transform:translateX(-25%)}
  .book.at-back{transform:translateX(25%)}
  .client{overflow-x:clip}
  /* the closing album, sized for a phone */
  .join{height:calc(100svh + 100svh)}
  .join-album{width:92vw}
  .join-copy{width:76vw;gap:10px}
}

/* ---------- the landing page's new parts (2026-10-04) ---------- */

/* "Coming soon": said plainly beside anything the app doesn't do yet */
.tag-soon{background:rgba(242,181,74,.16);color:#B97F0E;margin:0 8px 0 0;vertical-align:2px}
.dark .tag-soon,.dfy .tag-soon{color:var(--iris-2)}
.soon-line{margin:0;font-size:15px;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:4px}

/* three things the app already does, under Fully yours */
.rules-3{grid-template-columns:repeat(3,1fr)}
.rules-3 li{align-content:start}
/* the print steps line up even when one says more than the others */
.route-steps .rs{align-content:start}
@media (max-width:860px){.rules-3{grid-template-columns:1fr}}

/* done for you: the four ways, least lazy to laziest, and the tracker */
.dfy-pick{margin:6px 0 -8px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--iris-2)}
.dfy-ways{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:980px){.dfy-ways{grid-template-columns:1fr 1fr}}
.dfy-ways li{display:grid;gap:6px;align-content:start;padding:18px 18px 20px;border-radius:14px;background:rgba(13,14,18,.58);border:1px solid rgba(244,244,241,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dfy-ways li.laziest{border-color:rgba(242,181,74,.55)}
.dfy-ways b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--paper)}
.dfy-ways span{font-size:15px;line-height:1.45;color:#D2D3D7}
.dfy-ways .dfy-tag{justify-self:start;font-size:12px;font-weight:600;color:var(--iris-2);background:rgba(242,181,74,.14);padding:3px 10px;border-radius:99px}
.dfy-track{display:grid;gap:14px;margin-top:6px}
.dfy-go{justify-self:start}
.dfy-track p{margin:0;font-size:15px;color:#D2D3D7}
.dfy-track ol{list-style:none;padding:0;margin:0;display:flex}
.dfy-track li{flex:1 1 0;position:relative;display:grid;justify-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--paper);text-align:center}
.dfy-track li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--iris-2);position:relative;z-index:1}
.dfy-track li::after{content:"";position:absolute;top:5px;left:-50%;width:100%;height:2px;background:rgba(242,181,74,.5)}
.dfy-track li:first-child::after{display:none}
/* Phones: the photo is a picture across the top of the section (stretched
   over the whole long section it was blown up so far it was a blur), the
   words start over its lower part as it fades into the dark, the four ways
   sit two by two on solid cards (see-through ones showed the drifting paper
   as a smudge), and the seven steps stay on one joined line, their names
   taking turns above and below it so each has room */
@media (max-width:820px){
  .dfy{display:block;min-height:0}
  .dfy-media{inset:0 0 auto 0;height:62svh;overflow:hidden}
  .dfy::after{inset:0 0 auto 0;height:62svh;background:linear-gradient(180deg,rgba(13,14,18,.12) 25%,rgba(13,14,18,.72) 70%,var(--ink) 100%)}
  .dfy-copy{padding-top:38svh;gap:24px}
  .dfy-ways{gap:10px}
  .dfy-ways li{padding:14px 14px 16px;gap:4px;background:var(--ink-2);-webkit-backdrop-filter:none;backdrop-filter:none}
  .dfy-ways b{font-size:20px}
  .dfy-ways span{font-size:13.5px;line-height:1.4}
  .dfy-ways .dfy-tag{font-size:11px;padding:2px 8px;margin-bottom:4px}
  .dfy-track li{min-width:0;grid-template-rows:16px 12px 16px;gap:6px;font-size:11.5px;line-height:16px}
  .dfy-track li::before{grid-row:2}
  .dfy-track li::after{top:27px} /* through the middle of the dots */
  .dfy-track li span{grid-row:3;white-space:nowrap}
  .dfy-track li:nth-child(even) span{grid-row:1}
}

/* work anywhere: what's here now, and what's coming */
.anywhere{list-style:none;padding:0;margin:clamp(32px,4vw,52px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:860px){.anywhere{grid-template-columns:1fr}}
.anywhere li{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:1px solid var(--line-dark)}
.anywhere b{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-.02em;color:var(--paper)}
.anywhere b .tag{margin:0 0 0 8px;vertical-align:3px;font-family:var(--sans);letter-spacing:0}
.anywhere span{color:var(--muted-dark);font-size:15px}

/* the closing album's line: above it, answering the top album's line */
.join-done{position:absolute;left:0;right:0;top:0;margin:0;padding:0 6%;text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(24px,2.7vw,42px);line-height:1.08;letter-spacing:-.035em;color:var(--paper);text-wrap:balance;opacity:0;z-index:3} /* its place is set by main-layzbooks.js: just above the closed book at its biggest */
/* short laptop screens: the album gives up a little width so its line clears the menu bar (phones keep 92vw) */
@media (min-width:821px) and (pointer:fine){.join-album{width:min(1100px,88vw,calc(200svh - 600px))}}

/* the loose page drifting like a leaf (main-layzbooks.js; not the flipbook's .leaf pages): it floats between each section's
   background and its content, so the words and pictures always sit on top */
main > section > *{position:relative;z-index:2}
.dfy > .dfy-media{z-index:auto} /* a background itself: its shading (.dfy::after) must stay on top of it */
.loose-page{position:fixed;left:0;top:0;z-index:1;pointer-events:none;opacity:0;perspective:700px;will-change:transform,opacity}
.loose-page.in-front{z-index:31} /* over the closing section: in front, to slot into the album */
.loose-sway{transform-style:preserve-3d} /* its soft sway at rest is in main-layzbooks.js */
.loose-face{position:relative;width:150px;aspect-ratio:3/2;background:#E7E6E1;box-shadow:0 14px 26px -12px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.12)}
.loose-face img{display:block;width:100%;height:100%;object-fit:cover}
/* the sheet of paper drawn in the wind (main-layzbooks.js sizes it: a square around the photo, with room to bend and turn) */
.loose-face canvas{position:absolute;display:none;filter:drop-shadow(0 16px 14px rgba(0,0,0,.28))}
.loose-face.gl{background:none;box-shadow:none}
.loose-face.gl canvas{display:block}
.loose-face.gl img{visibility:hidden}
/* the closing album's empty space, waiting for the drifting photo */
.ja-empty{background:#ECEBE6;outline:1.5px dashed rgba(13,14,18,.24);outline-offset:-1.5px}

/* The sample album's cover fills the whole cover (it was a dark strip at the top over a blank page) */
.face > .cover{height:100%}

/* Phones and tablets have no arrow keys: no "↑ ↓ also work" */
@media (hover: none), (pointer: coarse) { .kbd-hint { display: none; } }

/* "Opens soon" under the download buttons: amber, with a little nudge */
.dl-note.dl-soon { color: #F2B54A; font-weight: 600; animation: dl-soon .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes dl-soon { 0% { transform: translateY(6px); opacity: 0; } 60% { transform: translateY(-2px); opacity: 1; } 100% { transform: none; } }