/* The logged-out home page (/) — the storybook-first layout.
   Loaded AFTER index.css, which still owns the nav, the waitlist banner and
   the sign-in card; everything here is the marketing flow between them.

   Ported from /dev-logged-out-home.html's idea A. That mockup loads common.css
   as well as index.css and `/` does not, so the two things it was relying on
   from there are restated at the top: the border-box reset (scoped to the new
   sections, so it cannot resize the nav or the card, which were laid out
   without it) and `button { width: auto }`. Leave those out and the step cards
   overflow their grid and every CTA goes full width. */

:root { --lo-pink: #EC4899; --lo-blue: #3B82F6; --lo-paper: #FFFDF8; --lo-cream: #FBF7EF; }

.lo-hero, .lo-hero *,
.lo-band, .lo-band *,
.lo-section, .lo-section *,
.lo-final, .lo-final * { box-sizing: border-box; }
/* BRIGHT: white page, light-green bands. The cream the mockup used read as
   beige — "dull" — next to the mint the rest of the product is built on. The
   bands and the page swapped: what was white is light green, what was cream is
   white, and the white gets the old hero's decorative circles back. */
body.lo-page { background: #fff; }

/* "See how it works ↓" is a real anchor, so it JUMPED. This page is a
   narrative — the jump skips the thing the link is pointing at.
   Safe to set globally here: this stylesheet is loaded by / alone, and
   scroll-lock.js forces an instant restore when the dialog closes, so the
   page cannot animate its way back underneath an opening modal. Withheld
   under reduced motion, which is exactly what that setting is about. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* OPENING THE DIALOG MUST NOT MOVE THE PAGE. scroll-lock takes <body> out of
   flow with position: fixed, so the document stops scrolling, the scrollbar
   goes, and the viewport gets ~15px wider — every centred thing on the page
   slides. Reserving the gutter permanently means there is nothing to reclaim.
   
   Only visible to someone whose scrollbars are always shown (macOS defaults to
   overlay ones, which take no space — which is also why this cannot be
   reproduced in headless Chromium). Padding the body instead is the other
   common fix and is wrong here: this page has no border-box reset, so padding
   on a `width: 100%` fixed body overflows sideways. */
html { scrollbar-gutter: stable; }

/* The three circles the previous hero had, as a BACKGROUND rather than three
   empty divs — same colours and the same 10% opacity, no markup to keep in
   step with the layout. `isolation` is what lets z-index: -1 sit behind the
   band's own content without falling behind the page.
   
   ON .lo-top, NOT ON .lo-hero: that is capped at 1120px, so the circles
   stopped dead at the column edge and the decoration looked cropped on any
   screen wider than the content. .lo-top is a plain block child of <body>, so
   it is the window's width with no 100vw (which counts the scrollbar and
   would add a horizontal scroll). */
.lo-top { position: relative; isolation: isolate; }
/* Transparent so the circles reach the header. Scoped to .lo-top: `nav` is a
   bare element selector in index.css, shared with about, pricing and content. */
.lo-top nav { background: transparent; border-bottom-color: transparent; }
.lo-top::before {
    /* inset: 0 — the wrapper already starts at the top of the page, and a
       negative top would paint over whatever sits above it. */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(300px 300px at 6% 4%,   rgba(244, 162, 97, .10) 0 70%, transparent 71%),
      radial-gradient(220px 220px at 97% 92%, rgba(45, 74, 62, .10)   0 70%, transparent 71%),
      radial-gradient(160px 160px at 84% 18%, rgba(233, 196, 106, .10) 0 70%, transparent 71%);
}

/* The sign-in card's band. index.css gives .auth-card no width of its own — it
   used to fill a hero grid column — so standing it on its own needs a cap, or
   the form runs the width of the window. The card takes border-box for that
   cap alone: this page has no global reset, so content-box makes a 460px
   max-width render 534px once its own 36px padding is added — a number nobody
   chose. Its fields are width:100% either way, so nothing inside it moves. */
.lo-auth-sec { max-width: 1120px; margin: 0 auto; padding: 0 24px 56px; display: grid; justify-items: center; }
.lo-auth-sec .auth-card { box-sizing: border-box; width: 100%; max-width: 460px; }
@media (max-width: 600px) { .lo-auth-sec { padding-left: 16px; padding-right: 16px; } }

/* ── Shared ──────────────────────────────────────────────────────── */
.lo-btn { font: inherit; cursor: pointer; width: auto; margin: 0; padding: 14px 24px; border-radius: 999px; border: 0;
          background: var(--green-mid); color: #fff; font-weight: 700; font-size: 1.02rem; text-decoration: none;
          display: inline-block; box-shadow: 0 6px 16px rgba(30, 102, 68, .25); }
.lo-btn:hover { background: var(--green-primary); }
.lo-link { color: var(--green-mid); font-weight: 700; text-decoration: none; }
.lo-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--lo-pink); margin: 0 0 10px; }
.lo-fine { font-size: .85rem; color: var(--green-subtle); margin: 12px 0 0; }
.lo-h2 { font-family: 'Lora', Georgia, serif; color: var(--green-primary); font-size: 1.8rem; margin: 0 0 8px; text-align: center; }
.lo-sub { color: var(--green-muted); text-align: center; margin: 0 0 24px; line-height: 1.5; }

/* ── Hero ────────────────────────────────────────────────────────── */
.lo-hero { max-width: 1120px; margin: 0 auto; padding: 32px 24px 56px;
           display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
/* 600, not the browser-default 700 a bare h1 takes, and --green-dark: the
   weight is what the previous page used and what makes this size read as
   crisp rather than heavy. */
.lo-hero h1 { text-align: left; font-family: 'Lora', Georgia, serif; font-weight: 600;
              color: var(--green-dark); font-size: clamp(2rem, 4.4vw, 3.3rem);
              line-height: 1.1; margin: 0 0 16px; }
.lo-lede { font-size: 1.15rem; line-height: 1.6; color: var(--green-text); margin: 0 0 26px; max-width: 34em; }
.lo-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* The polaroid the carousel deals. */
.lo-snap { margin: 0; background: #fff; padding: 12px 12px 14px; border-radius: 6px; transform: rotate(2deg);
           box-shadow: 0 18px 40px rgba(26, 46, 37, .2); justify-self: center; max-width: 420px; }
/* THE BORDER IS ON EVERY SLIDE, not just the one that needed it. Jackson's is
   a cut-out on a white studio background, so inside a white polaroid frame the
   photo had no edge at all and dissolved into the card — the border is what
   makes it read as a photograph. The others mostly have their own edges, where
   a hairline costs nothing and still tidies a light corner; and a border on
   one slide but not the next reads as a mistake as the carousel flips. One
   rule also means the next photo needs no decision. */
.lo-snap img { display: block; width: 100%; border: 1px solid #000; border-radius: 3px; }
.lo-snap figcaption { font-family: 'Lora', Georgia, serif; text-align: center; color: var(--green-muted); margin-top: 10px; font-size: .95rem; }
.lo-carousel { justify-self: center; width: 100%; max-width: 420px; }
.lo-slide { max-width: none; }
.lo-slide:nth-of-type(2) { transform: rotate(-1.5deg); }
.lo-slide:nth-of-type(3) { transform: rotate(1deg); }
.lo-slide figcaption { font-size: .98rem; line-height: 1.45; padding: 0 4px; }
.lo-slide figcaption b { color: var(--green-primary); }
.lo-car-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.lo-car-dots { display: inline-flex; gap: 6px; }
.lo-car-dots button { width: 10px; height: 10px; padding: 0; margin: 0; border-radius: 50%; border: 0; cursor: pointer; background: var(--green-border); }
.lo-car-dots button.on { background: var(--lo-pink); }
.lo-pg { font: inherit; width: 38px; height: 38px; margin: 0; border-radius: 50%; border: 1.5px solid var(--green-border); background: #fff;
         color: var(--green-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0; }

/* ── Bands and sections ──────────────────────────────────────────── */
.lo-band { background: var(--green-light); border-top: 1px solid var(--green-border); border-bottom: 1px solid var(--green-border); padding: 52px 24px; }
.lo-section { max-width: 1120px; margin: 0 auto; padding: 52px 24px; }
.lo-steps { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Icon BESIDE the heading, with the body spanning under both: stacked, the
   emoji took a line of its own and pushed three short headings apart. */
.lo-step { position: relative; background: var(--lo-paper); border: 1.5px solid var(--green-border); border-radius: 18px; padding: 26px 20px 20px;
           display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; }
.lo-step p { grid-column: 1 / -1; margin-top: 10px; }
.lo-step:nth-child(1) { transform: rotate(-.6deg); }
.lo-step:nth-child(2) { transform: rotate(.5deg); }
.lo-step:nth-child(3) { transform: rotate(-.3deg); }
.lo-num { position: absolute; top: -15px; left: -10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
          color: #fff; font: 700 1.1rem 'Lora', Georgia, serif; border: 3px solid var(--lo-paper); box-shadow: 0 6px 14px rgba(0,0,0,.14); }
.lo-n1 { background: var(--lo-pink); } .lo-n2 { background: var(--lo-blue); } .lo-n3 { background: var(--green-mid); }
.lo-emoji { font-size: 1.6rem; line-height: 1; }
.lo-step h3 { font-family: 'Lora', Georgia, serif; color: var(--green-primary); margin: 0; font-size: 1.2rem; }
.lo-step p { color: var(--green-muted); line-height: 1.55; margin: 0; }

.lo-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.lo-books figure { margin: 0; }
.lo-books img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px 12px 12px 4px;
                box-shadow: -6px 0 0 rgba(0,0,0,.08) inset, 0 12px 26px rgba(26, 46, 37, .18); }
.lo-books figcaption { text-align: center; color: var(--green-muted); margin-top: 12px; font-size: .95rem; }
.lo-books .lo-book-title { display: block; }
/* The editor's line, under the title. Smaller and lighter so the title still
   leads — this says WHY the book is worth opening, which is a different job
   from naming it. Blocks rather than inline so it takes its own line without
   the title having to end in one. */
.lo-books .lo-book-blurb {
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--green-muted);
  opacity: .85;
}

/* A COVER THAT LINKS LOOKS LIKE IT DOES, and one that does not is untouched —
   logged-out-home.js only inserts this anchor where the figure carries a story
   id, so every rule here is scoped to it rather than to the figure. `display:
   block` because the anchor wraps the img AND the figcaption and would
   otherwise be an inline box the size of neither. */
.lo-book-link { display: block; color: inherit; text-decoration: none;
                border-radius: 4px 12px 12px 4px; }
.lo-book-link img { transition: transform .18s ease, box-shadow .18s ease; }
.lo-book-link:hover img, .lo-book-link:focus-visible img {
  transform: translateY(-3px);
  box-shadow: -6px 0 0 rgba(0,0,0,.08) inset, 0 16px 32px rgba(26, 46, 37, .26);
}
.lo-book-link:hover figcaption, .lo-book-link:focus-visible figcaption { color: var(--green-primary); }
.lo-book-link:focus-visible { outline: 3px solid var(--accent-gold, #f4b942); outline-offset: 4px; }
/* The lift is decoration; somebody who asked for less motion still gets the
   colour and the focus ring. */
@media (prefers-reduced-motion: reduce) {
  .lo-book-link img { transition: none; }
  .lo-book-link:hover img, .lo-book-link:focus-visible img { transform: none; }
}

/* THE PICTURE LEADS THE CARD, AND STAYS SMALLER THAN A BOOK COVER.
   Beside the text it was a 110px thumbnail, and both of these are images you
   have to be able to READ: a Find Me scene is a crowd you search, and a jigsaw
   is only obviously a jigsaw if its piece cuts are visible. Neither survives at
   that size. Full width and 4:3 — an aspect-ratio rather than a fixed height,
   so it scales with the card instead of being a number that is right at one
   width.

   THE GRID WIDTH IS WHAT SIZES THEM, and it is set against the shelf above
   rather than to the page: at 960px these came out 441px wide, which is WIDER
   than the 341px book covers — and this section is "and when the book is
   done", so a picture here out-shouting the thing the page is selling is the
   wrong way round. 700px puts them at ~313px: still nearly three times the
   thumbnail they replaced, and visibly secondary to a cover. Sizing the GRID
   rather than capping the img keeps the card tight around it — a max-height on
   the image alone leaves a band of white card beside it.

   `min(700px, 66%)` rather than a flat 700, because the books shelf is FLUID
   (three across its container) while a fixed cap is not: at 1024 the covers
   come down to 304px and a 700px grid would put these at 311 — level with the
   thing they are meant to sit under. A share of the same container holds the
   relationship at every width. */
.lo-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
                max-width: min(700px, 66%); margin: 0 auto; }
.lo-more-card { display: grid; gap: 14px; background: #fff;
                border: 1.5px solid var(--green-border); border-radius: 16px; padding: 14px; }
.lo-more-card img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 10px; }
.lo-more-card h3 { margin: 0 0 4px; color: var(--green-primary); font-size: 1.05rem; }
.lo-more-card p { margin: 0; color: var(--green-muted); font-size: .92rem; line-height: 1.5; }

/* NOT A ROUND PORTRAIT. kim_family.webp is a cartoon of five people walking
   down a street, full-figure, 900x900 — a 160px circle crops it to torsos and
   throws the whole composition away. A square at a size you can actually read
   it at, with the same soft corner the other cards use. */
.lo-founder { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: center; max-width: 900px; }
.lo-founder img { width: 240px; height: 240px; object-fit: cover; border-radius: 14px; }
.lo-founder blockquote { margin: 0; font-family: 'Lora', Georgia, serif; font-size: 1.3rem; line-height: 1.5; color: var(--green-primary); }
.lo-founder cite { display: block; font-family: 'DM Sans', system-ui, sans-serif; font-style: normal; font-size: .92rem; color: var(--green-muted); margin-top: 10px; }

.lo-final { text-align: center; background: var(--green-primary); color: #fff; padding: 56px 24px; }
.lo-final h2 { font-family: 'Lora', Georgia, serif; font-size: 2rem; margin: 0 0 10px; color: #fff; }
.lo-final p { margin: 0 0 24px; opacity: .85; }
.lo-final .lo-btn { background: #fff; color: var(--green-primary); }

/* ── Narrow screens ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lo-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 16px; }
  .lo-snap { max-width: 360px; }
}

/* ON A TABLET THE PHOTO COMES BEFORE THE ASK. Stacked, the DOM order puts the
   carousel after the whole copy block, so the CTA and "See how it works" sit
   between the headline and the one thing that shows what this makes. The
   wrapper goes `display: contents` so its children become hero items in their
   own right and `order` can place the carousel among them — no markup change,
   and the two-column layout above 900px is untouched.
   
   PHONES TOO, decided with the cost known. The reorder pushes "Make your
   first book free" from 465px down past 1000, so on an 844px screen it is no
   longer above the fold — you scroll to reach it. That was the argument for
   holding phones back, and it was overruled on purpose: the photo IS the
   pitch, and a CTA read before anybody has seen what the product makes is
   asking for a decision with nothing to decide on. Recorded rather than
   silently flipped, so the trade is visible if it is ever revisited.
   
   The gap goes to 0 because it now falls between SIX items rather than two:
   these elements carry their own margins, and 32px on top of each would pull
   the headline off the screen. The carousel keeps a margin of its own. */
@media (max-width: 900px) {
  .lo-hero { gap: 0; }
  .lo-hero-copy { display: contents; }
  .lo-kicker   { order: 1; }
  .lo-hero h1  { order: 2; }
  .lo-lede     { order: 3; }
  .lo-carousel { order: 4; margin: 6px 0 28px; }
  .lo-cta-row  { order: 5; }
  .lo-fine     { order: 6; }
}
@media (max-width: 700px) {
  .lo-steps, .lo-books, .lo-more-grid { grid-template-columns: minmax(0, 1fr); }
  .lo-steps { gap: 26px; }
  /* ONE STACKED COLUMN, AND THE SAME WIDTH FOR BOTH. Below this breakpoint the
     covers go 1-across capped at 320, and the 66% share that holds the two
     sections in proportion on a wide screen stops meaning anything — measured
     at 600 it left the activity picture at 335 against a 320 cover, inverted
     again. Matching the cap is what keeps one stacked column down the page. */
  .lo-books, .lo-more-grid { max-width: 320px; margin-left: auto; margin-right: auto; }
  .lo-founder { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .lo-founder blockquote { font-size: 1.12rem; }
  .lo-h2 { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .lo-hero, .lo-section { padding-left: 16px; padding-right: 16px; }
  .lo-band { padding: 40px 16px; }
  .lo-lede { font-size: 1.05rem; }
}

/* ── The sign-in card as a dialog ─────────────────────────────────────────
   PROGRESSIVE ENHANCEMENT, and it is load-bearing: the markup is still the
   plain band under the hero, so with no JavaScript (or if this script fails
   to load) the card is simply on the page where it was. logged-out-home.js
   adds .js-auth-modal to <body>, and only then does the band become an
   overlay. Nothing here hides the card on its own.

   A SCREEN TAKEOVER ON TOUCH, a centred card on a mouse. The query is
   `(pointer: coarse)` as well as a width, so it catches every iPad in BOTH
   orientations — in landscape they are all 1133px or wider, which no sensible
   width breakpoint reaches without also taking over a laptop. Same instinct as
   admin.css's 16px field rule: scope it to the pointer, and a desktop stays
   byte-identical. Widen the 834px half (phones + every iPad portrait) if a
   narrow desktop window should take over too. */
body.js-auth-modal .lo-auth-sec {
    /* border-box, or the 24px padding is ADDED to the width fit() sets from
       visualViewport and the overlay ends up wider than the screen. This page
       has no global reset, so it has to be said. */
    box-sizing: border-box;
    position: fixed; inset: 0; z-index: 1000; margin: 0; max-width: none;
    display: none; place-items: center; padding: 24px;
    background: rgba(26, 46, 37, .55);
    overscroll-behavior: contain;
}
body.js-auth-modal .lo-auth-sec.open { display: grid; }
/* The card is the scroll container. Without this the touch chains to the page
   behind, which is the "only the background moves" bug from the share modal. */
body.js-auth-modal .lo-auth-sec .auth-card {
    position: relative; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
}
/* The card takes focus when the dialog opens; a ring around the whole card
   says nothing and looks like a fault. Every control inside keeps its own. */
body.js-auth-modal .lo-auth-sec .auth-card:focus { outline: none; }
/* THE CLOSE BUTTON CANNOT BE REMOVED, and where it goes differs by device.
   There are three ways out — this button, Escape, and a press on the backdrop
   — and on a TOUCH TAKEOVER the other two do not exist: the card covers the
   overlay completely (measured: a tap at the overlay's own corner hits the
   card), so nothing can land on the backdrop, and a phone has no Escape key.
   On touch it is the ONLY exit, so it stays a 44px target in the flow.

   On the centred card it is redundant — both other exits work — so it costs
   NO vertical space: 28px tucked into the card's own 36px top padding, which
   is the band above the tabs. It must END above them: at 44px it overlapped
   the right end of the Sign Up tab, a target sitting on another control. */
.lo-auth-x {
    position: absolute; top: 4px; right: 4px;
    width: 28px; height: 28px; padding: 0; margin: 0;
    display: none; align-items: center; justify-content: center;
    /* No disc behind it — just the glyph. The 44px box on touch is still the
       hit area, it simply is not painted. */
    border: 0; border-radius: 50%; cursor: pointer;
    background: none; color: var(--green-primary); font-size: 1.1rem; line-height: 1;
}
body.js-auth-modal .lo-auth-x { display: flex; }

@media (max-width: 834px), (pointer: coarse) {
    body.js-auth-modal .lo-auth-sec {
        padding: 0; place-items: stretch; background: var(--lo-cream);
    }
    body.js-auth-modal .lo-auth-sec .auth-card {
        width: 100%; max-width: none; height: 100%; max-height: none;
        border: 0; border-radius: 0; box-shadow: none;
    }
    /* The only exit here, so it is back in the flow at a thumb's size. */
    body.js-auth-modal .lo-auth-x {
        position: static; width: 44px; height: 44px; margin: 0 0 6px auto; font-size: 1.3rem;
    }

/* A TAKEOVER FILLS THE SCREEN, NOT THE FORM. Edge-to-edge is right on a phone
   and wrong on a tablet: at 820px the name and email fields stretched the full
   width of the iPad, which is not a form anybody designs. Above phone width
   the background still covers everything — nothing of the page shows through,
   so it is still a takeover — and the card itself is a centred column of a
   readable width. */
@media (pointer: coarse) and (min-width: 600px) {
    body.js-auth-modal .lo-auth-sec { place-items: center; padding: 24px; }
    body.js-auth-modal .lo-auth-sec .auth-card {
        width: 100%; max-width: 520px; height: auto; max-height: 100%;
        border-radius: 20px;
    }
}


/* iPadOS IS iOS: it zooms into any field under 16px on focus and never zooms
   back. The card's fields are 14px and the phone block only lifts them below
   600px, so every iPad was already short of the threshold — and now that the
   card is a full-screen takeover there, the zoom would be of a form filling
   the screen with nowhere to pan. Keyed to the POINTER, like admin.css's
   version, so a desktop at any width is byte-identical. `!important` because
   several of these fields carry inline styles. */
@media (pointer: coarse) {
    .lo-auth-sec input:not([type="checkbox"]):not([type="radio"]) {
        font-size: 16px !important; min-height: 44px;
    }
}