/* Homepage styles, built from Derek's Figma design ("Home — Cleaned up", 1800px canvas).
   Used by index.html (the design as drawn) and option-2.html (the same system with changes).
   Measurements are the design's own; the breakpoints at the bottom adapt it to smaller screens. */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("assets/fonts/plus-jakarta-sans.woff2") format("woff2"); }

:root {
  --navy: #18152e;
  --indigo: #3600ae;
  --violet: #6b45d1;
  --soft-gray: #e3e0ea;
  --muted: #746d83;
  --page: #f8f6fb;
  --card: rgba(255, 255, 255, 0.72);
  --content: 1240px;   /* text and card column */
  --wide: 1368px;      /* the two large panels */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: var(--navy); background: var(--page); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: none; }
a { color: inherit; }
p, h1, h2, h3 { margin: 0; }

.page { max-width: 1800px; margin: 0 auto; }

/* ---------- Hero ---------- */
.hero { position: relative; margin: 30px 38px 0; height: 783px; border-radius: 20px; overflow: hidden; background: #ece6f8; }
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art .drift { position: absolute; left: 50%; top: 50%; width: 1747px; height: 1241px; transform: translate(-50%, -50%) rotate(180deg); object-fit: cover; }
.hero-art .silk { position: absolute; opacity: 0.2; object-fit: cover; transform-origin: center; }
.hero-art .silk.one { left: calc(50% - 166px + 154px); top: calc(-331px + 519px); width: 1992px; height: 1262px; transform: rotate(45deg); }
.hero-art .silk.two { left: calc(50% + 176px - 40px); top: calc(-959px + 337px); width: 1287px; height: 815px; transform: rotate(110.09deg); }
.hero-art .glow { position: absolute; left: calc(50% - 1028px); top: -246px; width: 650px; height: 650px; }
.logo { position: absolute; left: 89px; top: 64px; display: flex; align-items: center; gap: 15px; text-decoration: none; }
.logo .mark { height: 35px; width: auto; }
.logo .wordmark { height: 27px; width: auto; }
.hero-copy { position: absolute; left: 89px; top: 336px; width: 758px; }
.eyebrow { font-size: 22px; font-weight: 400; color: var(--indigo); line-height: normal; }
.hero h1 { margin-top: 29px; font-size: 47px; font-weight: 500; line-height: 60px; letter-spacing: 0; }
.button { display: inline-flex; align-items: center; gap: 12px; margin-top: 75px; padding: 20px 40px; border-radius: 58px; background: var(--violet); color: #fff; font-size: 16.6px; font-weight: 600; line-height: 1.15; text-decoration: none; transition: transform 0.15s ease, filter 0.2s ease, box-shadow 0.2s ease; }
.button img { width: 15px; height: 19px; }
.button:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 12px 24px -14px rgba(54, 0, 174, 0.7); }
.button:active { transform: scale(0.98); }
.hero-phone { position: absolute; right: 221px; bottom: 0; width: 447px; height: auto; }
/* The exported mockups carry a pale box around the phone; trim to the phone's own outline */
.hero-phone.exported { clip-path: inset(1.2% 1.4% 0 1.4% round 15.5% 15.5% 0 0 / 9.8% 9.8% 0 0); }
.detail-phone.exported { clip-path: inset(0.9% 1.4% 0.9% 1.4% round 15.5% / 7.6%); }

/* ---------- Thin strips of three notes ---------- */
.strip { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font-size: 14px; line-height: 1.6; }
.strip.boxed { margin: 16px 38px 0; padding: 20px 36px; border: 1px solid var(--soft-gray); border-radius: 20px; background: var(--card); }
.strip.ruled { border-top: 1px solid var(--soft-gray); padding: 22px 0; }

/* ---------- Section headings ---------- */
.label { font-size: 22px; font-weight: 400; color: var(--indigo); }
.heading { font-size: 48px; font-weight: 500; line-height: 1.18; }
.lede { font-size: 18px; line-height: 1.6; color: var(--muted); }

/* ---------- Why Blumvie ---------- */
.why { max-width: var(--content); margin: 0 auto; padding: 143px 0 80px; }
.why .intro { max-width: 800px; display: grid; gap: 18px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.feature { display: flex; flex-direction: column; gap: 17px; padding: 30px; border: 1px solid var(--soft-gray); border-radius: 28px; background: var(--card); }
.feature img { width: 28px; height: 28px; }
.feature h3 { font-size: 20px; font-weight: 500; line-height: 1.6; }
.feature p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Your quote, your way ---------- */
.themes { max-width: 1600px; margin: 124px auto 0; padding: 0 0; }
.themes .intro { max-width: 760px; display: grid; gap: 20px; }
.gallery-clip { margin-top: 48px; overflow: hidden; margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); }
.gallery { display: flex; gap: 16px; width: 1887px; margin: 0 auto; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0; }
.theme { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.swatch { height: 300px; padding: 20px; border-radius: 24px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(to bottom, var(--from), var(--to)); color: var(--ink); }
.swatch small { font-size: 9px; line-height: normal; }
.swatch blockquote { margin: 0; font-size: 22px; line-height: 1.2; }
.theme-name { display: flex; justify-content: space-between; align-items: flex-start; font-size: 14px; font-weight: 500; line-height: 1.6; }
.dots { display: flex; gap: 4px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.themes .strip { margin-top: 50px; }
.t-lavender { --from: #46249c; --to: #171447; --ink: #e7defc; }
.t-aura { --from: #f9f4fc; --to: #dcd1ee; --ink: #3e3154; }
.t-ocean { --from: #087b82; --to: #032f35; --ink: #e2f9f7; }
.t-peach { --from: #ffe2e8; --to: #efa5bc; --ink: #6d3b4a; }
.t-sunset { --from: #8a3030; --to: #2e111e; --ink: #ffe3cb; }
.t-matcha { --from: #dbed94; --to: #97ba82; --ink: #344a30; }
.f-handlee blockquote { font-family: "Handlee", "Noteworthy", cursive; }
.f-typewriter blockquote { font-family: "American Typewriter", "Courier Prime", "Courier New", serif; }
.f-michroma blockquote { font-family: "Michroma", "Futura", sans-serif; }
.f-poiret blockquote { font-family: "Poiret One", "Helvetica Neue", sans-serif; }

/* ---------- Sharing and Home Screen ---------- */
.duo { max-width: var(--wide); margin: 172px auto 0; display: grid; grid-template-columns: 814fr 534fr; gap: 20px; }
.panel { position: relative; border: 1px solid var(--soft-gray); border-radius: 20px; background: var(--card); overflow: hidden; }
.share { height: 772px; }
.share h2 { padding: 32px; min-height: 148px; display: flex; align-items: center; font-size: 30px; font-weight: 500; line-height: 42px; }
.share .circles { position: absolute; left: 23px; top: 172px; width: 722px; height: 109px; overflow: hidden; }
.share .circles img { position: absolute; left: 0; top: -914px; width: 721.6px; height: 1440.5px; }
.share .preview { position: absolute; left: 0; top: 271px; width: 813px; height: 491px; overflow: hidden; border-radius: 20px; }
.share .preview img { position: absolute; left: 0; top: -126px; width: 813px; height: 1618.5px; }
.home { display: flex; flex-direction: column; gap: 24px; padding: 32px; height: 772px; }
.home h2 { font-size: 28px; font-weight: 500; line-height: 33.6px; }
.home p { font-size: 16px; line-height: 24px; color: #4b5563; }
.home .art { flex: 1; min-height: 0; border-radius: 20px; background: #ffe5dc; display: grid; place-items: center; overflow: hidden; }
.home .art img { width: 402px; height: 491px; border-radius: 32px; }

/* ---------- The quote, and why it matters ---------- */
.detail { position: relative; max-width: var(--wide); height: 756px; margin: 20px auto 0; border: 1px solid var(--soft-gray); border-radius: 20px; overflow: hidden; background: #eee7fa; }
.detail .art { position: absolute; inset: 0; pointer-events: none; }
.detail .art .drift { position: absolute; left: -26px; top: -46px; width: 2290px; height: 1627px; opacity: 0.4; object-fit: cover; }
.detail .art .twilight { position: absolute; left: -78px; top: -201px; width: 1492px; height: 1061px; opacity: 0.3; mix-blend-mode: overlay; object-fit: cover; }
.detail-phone { position: absolute; left: 166px; top: 56px; width: 316px; height: auto; }
.detail-copy { position: absolute; left: 602px; top: 136px; width: 600px; display: flex; flex-direction: column; gap: 28px; }
.detail-copy .rule { height: 1px; background: var(--soft-gray); }
.tag { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--violet); line-height: normal; }
.detail-copy .note { font-size: 17px; line-height: 1.6; color: var(--muted); }
.detail-copy .small { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Closing ---------- */
.closing { position: relative; margin-top: 20px; padding: 24px 28px 50px; overflow: hidden; }
.closing .halo { position: absolute; left: 50%; top: -278px; width: 1109px; height: 1109px; transform: translateX(-50%); pointer-events: none; }
.closing .stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 100px 80px; border-radius: 40px; text-align: center; }
.closing .emblem { width: 90px; height: 58.6px; }
.closing h2 { font-size: 60px; font-weight: 500; line-height: 1.18; }
.closing .lede { max-width: 600px; }
.closing .button { margin-top: 0; }
.closing .fine { font-size: 13px; line-height: 1.6; }

/* ---------- Footer ---------- */
.footer { padding: 24px 64px 48px; display: grid; gap: 32px; }
.footer .rule { height: 1px; background: var(--soft-gray); }
.footer .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.signature { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 500; line-height: 1.6; text-decoration: none; }
.signature img { width: 44px; height: 28.6px; }
.footer small, .footer nav a { font-size: 12px; line-height: 1.6; text-decoration: none; }
.footer nav { display: flex; gap: 28px; }
.footer nav a:hover { text-decoration: underline; }

/* ---------- Option 2 additions ---------- */
.hero.v2 .eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hero.v2 h1 { margin-top: 18px; font-size: 68px; line-height: 1.06; letter-spacing: -0.03em; font-weight: 600; white-space: nowrap; }
.hero.v2 h1 em { font-style: normal; color: var(--violet); }
.hero.v2 .sub { margin-top: 22px; font-size: 24px; line-height: 1.45; max-width: 560px; color: #3d3856; }
.hero.v2 .hero-copy { top: 250px; width: 860px; }
/* The real screenshot is a whole phone: show its top and let the hero crop the bottom, as in the design */
.hero.v2 .hero-phone { bottom: auto; top: 105px; width: 420px; }
.hero.v2 .button { margin-top: 40px; }
.hero.v2 .fine { margin-top: 16px; font-size: 14px; color: #3d3856; }
.benefits { max-width: var(--content); margin: 0 auto; padding: 120px 0 0; }
.benefits .cards { margin-top: 44px; }
.benefit { padding: 34px 30px 36px; border-radius: 28px; border: 1px solid var(--soft-gray); background: var(--card); display: grid; gap: 14px; align-content: start; }
.benefit h3 { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.benefit p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.benefit .for { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.why.v2 { padding-top: 120px; }
.themes.v2 { max-width: var(--content); }
.themes.v2 .premium-note { margin-top: 26px; font-size: 14px; color: var(--muted); }
.duo.v2 { max-width: var(--content); margin-top: 120px; }
.share.v2 h2, .home h2 { font-size: 28px; line-height: 1.2; }
.share.v2 { height: auto; display: flex; flex-direction: column; }
.share.v2 .head { padding: 32px 32px 0; display: grid; gap: 12px; }
.share.v2 .head h2 { padding: 0; min-height: 0; display: block; }
.share.v2 .head p { font-size: 16px; line-height: 24px; color: #4b5563; }
.share.v2 .shot { margin: 28px 32px 0; flex: 1; border-radius: 20px 20px 0 0; overflow: hidden; background: #fff; min-height: 470px; position: relative; }
.share.v2 .shot img { position: absolute; left: 50%; top: -150px; width: 600px; height: auto; transform: translateX(-50%); }
.home.v2 { height: auto; }
.duo > .home.v2 { height: 100%; }
.home.v2 .art { min-height: 300px; background: linear-gradient(160deg, #e9defa, #ffe5dc); }
.widget { width: min(330px, 86%); padding: 20px 22px 18px; border-radius: 28px; background: linear-gradient(to bottom, #087b82, #032f35); color: #e2f9f7; box-shadow: 0 30px 50px -28px rgba(24, 21, 46, 0.6); display: grid; gap: 14px; }
.home .art .widget img { width: 26px; height: auto; border-radius: 0; filter: brightness(0) invert(1); opacity: 0.9; }
.widget blockquote { margin: 0; font-size: 19px; line-height: 1.3; }
.widget cite { font-style: normal; font-size: 13px; font-weight: 600; opacity: 0.85; }
.detail.v2 { max-width: var(--content); }
.detail.v2 .detail-phone { left: 110px; }
.detail.v2 .detail-copy { left: 520px; width: 580px; }
.pricing { max-width: var(--content); margin: 120px auto 0; }
.pricing .intro { max-width: 760px; display: grid; gap: 18px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.plan { padding: 34px 32px; border-radius: 28px; border: 1px solid var(--soft-gray); background: var(--card); display: grid; gap: 18px; align-content: start; }
.plan.premium { background: linear-gradient(160deg, #46249c, #171447); color: #fff; border-color: transparent; }
.plan h3 { font-size: 22px; font-weight: 600; }
.plan .price { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.plan .price small { font-size: 15px; font-weight: 400; opacity: 0.75; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; line-height: 1.5; }
.plan li { padding-left: 26px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: 0.7; }
.plan .fine { font-size: 14px; opacity: 0.8; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1700px) {
  .themes { padding: 0 38px; }
  .gallery-clip { margin-left: -38px; margin-right: -38px; }
}
/* Keep the headline clear of the phone as the window narrows */
@media (max-width: 1640px) { .hero-copy { width: 46%; } .hero-phone { right: 9%; } }
@media (max-width: 1440px) {
  .hero-phone { right: 6%; }
  .why, .benefits, .pricing, .themes.v2, .duo.v2, .detail.v2 { margin-left: 38px; margin-right: 38px; max-width: none; }
  .duo, .detail { margin-left: 38px; margin-right: 38px; }
  .share .circles, .share .preview { transform-origin: left top; transform: scale(0.9); }
}
@media (max-width: 1180px) {
  .hero { height: auto; padding: 150px 48px 0; display: grid; }
  .logo { left: 48px; top: 48px; }
  .hero-copy { position: relative; left: auto; top: auto; width: auto; max-width: 720px; }
  .hero.v2 .hero-copy { top: auto; }
  .hero-phone, .hero.v2 .hero-phone { position: relative; right: auto; top: auto; margin: 56px auto 0; }
  .hero.v2 .hero-phone { margin-bottom: -260px; }
  .hero.v2 .hero-copy { width: auto; }
  .hero.v2 h1 { font-size: 56px; white-space: normal; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duo, .duo.v2 { grid-template-columns: 1fr; }
  .share { height: 720px; }
  .share .circles, .share .preview { transform: none; }
  .detail, .detail.v2 { height: auto; padding: 56px 48px 0; display: grid; gap: 40px; }
  .detail-copy, .detail.v2 .detail-copy { position: relative; left: auto; top: auto; width: auto; max-width: 640px; }
  .detail-phone, .detail.v2 .detail-phone { position: relative; left: auto; top: auto; margin: 0 auto -120px; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { margin: 12px 12px 0; padding: 110px 24px 0; border-radius: 20px; }
  .logo { left: 24px; top: 32px; }
  .eyebrow { font-size: 17px; }
  .hero h1 { font-size: 32px; line-height: 1.22; margin-top: 16px; }
  .hero.v2 h1 { font-size: 40px; white-space: normal; }
  .hero.v2 .sub { font-size: 19px; }
  .button { margin-top: 36px; }
  .hero-phone { width: 300px; margin-top: 44px; }
  .strip { flex-direction: column; gap: 6px; }
  .strip.boxed { margin: 12px 12px 0; padding: 18px 22px; }
  .why, .benefits, .pricing, .themes.v2, .duo.v2, .detail.v2, .duo, .detail { margin-left: 16px; margin-right: 16px; }
  .why { padding: 80px 0 40px; }
  .benefits { padding-top: 72px; }
  .label { font-size: 17px; }
  .heading { font-size: 32px; }
  .lede { font-size: 17px; }
  .cards { grid-template-columns: 1fr; margin-top: 32px; }
  .themes { margin-top: 72px; padding: 0 16px; }
  .gallery-clip { margin: 32px -16px 0; }
  .gallery { width: 1500px; }
  .duo, .duo.v2 { margin-top: 72px; }
  .share { height: 560px; }
  .share h2 { font-size: 24px; line-height: 1.3; padding: 24px; min-height: 0; }
  .share .circles { left: 8px; top: 132px; transform-origin: left top; transform: scale(0.46); }
  .share .preview { top: 190px; transform-origin: left top; transform: scale(0.46); }
  .share.v2 .shot { margin: 24px 16px 0; min-height: 380px; }
  .share.v2 .shot img { width: 440px; top: -110px; }
  .home { height: auto; padding: 24px; }
  .home .art { padding: 28px 0; }
  .home .art img { width: 300px; height: auto; }
  .detail, .detail.v2 { padding: 40px 24px 0; }
  .detail-phone, .detail.v2 .detail-phone { width: 260px; margin-bottom: -100px; }
  .closing { padding: 12px 12px 30px; }
  .closing .stage { padding: 64px 20px; }
  .closing h2 { font-size: 38px; }
  .footer { padding: 24px 20px 40px; }
  .footer .row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pricing { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Before launch ----------
   The page is built as if the app were live. Until it is, add class="prelaunch" to <body>:
   anything marked .launch-only (the download buttons) is hidden, and anything marked
   .prelaunch-only is shown in its place. Remove the class on launch day. */
.prelaunch-only { display: none; }
body.prelaunch .launch-only { display: none !important; }
body.prelaunch .prelaunch-only { display: revert; }
/* Before launch the hero has no download button; a quiet note stands in its place */
.soon { margin: 40px 0 0; width: fit-content; padding: 12px 22px; border-radius: 58px; border: 1px solid rgba(107, 69, 209, 0.28); background: rgba(255, 255, 255, 0.55); color: var(--violet); font-size: 15px; font-weight: 600; line-height: 1.2; animation: settle 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.42s both; }
body.prelaunch .soon { display: block; }
/* The same note stands in for the button in the closing section */
.closing .soon { margin: 10px 0 0; animation: none; }
.closing .button { margin-top: 10px; }
/* The small print belongs to the button (or the pill) above it, so it sits close under it instead
   of at the same even spacing as everything else in the section */
.closing .fine { margin-top: -8px; }                  /* 22px under the Download button, which is the larger of the two */
body.prelaunch .closing .fine { margin-top: -16px; }  /* 14px under the smaller pill */
body.prelaunch .fine { color: var(--muted); }               /* quieter under the pill, which is not a button */

/* ---------- Made to share: live cards with a background picker ---------- */
/* All three cards run off the bottom edge, so the panel can stay short */
.sharecard { display: flex; flex-direction: column; height: 620px; }
.sharecard .head { padding: 32px 32px 0; display: grid; gap: 12px; }
.sharecard .head h2 { font-size: 28px; font-weight: 500; line-height: 1.2; }
.sharecard .head p { font-size: 16px; line-height: 24px; color: #4b5563; }
.picker { display: flex; gap: 14px; padding: 36px 32px 0; flex-wrap: wrap; }
.picker button { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(24, 21, 46, 0.08); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.picker button:hover { transform: scale(1.08); }
.picker button[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--violet); }
.picker button:focus-visible { outline: 2px solid var(--violet); outline-offset: 7px; }
.stage3 { position: relative; flex: 1; min-height: 0; margin-top: 32px; overflow: hidden; }
.qcard { position: absolute; border-radius: 26px; overflow: hidden; color: #1f1d2b; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 24px 40px -26px rgba(24, 21, 46, 0.45); background: #dcd1ee; }
.qcard .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity 0.45s ease; }
.qcard .bg.next { opacity: 0; }
.qcard > *:not(.bg) { position: relative; }
.qcard .brand { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(31, 29, 43, 0.62); }
.qcard .brand img { width: 20px; height: auto; filter: brightness(0); opacity: 0.55; }
.qcard blockquote { margin: 0; font-weight: 300; letter-spacing: -0.01em; line-height: 1.24; }
.qcard .line { width: 110px; height: 1px; background: rgba(31, 29, 43, 0.16); }
.qcard .who { font-size: 15px; font-weight: 600; }
.qcard .what { font-size: 11px; color: rgba(31, 29, 43, 0.62); margin-top: 3px; }
.qcard.story { left: 50%; top: 8px; width: 330px; height: 587px; transform: translateX(-50%); padding: 74px 30px 0; gap: 0; z-index: 2; }
.qcard.story blockquote { font-size: 27px; margin-top: 46px; }
.qcard.story .line { margin-top: 44px; }
.qcard.story .who { margin-top: 22px; }
.qcard.side { top: 56px; width: 330px; height: 440px; padding: 64px 28px 0; justify-content: flex-start; }
.qcard.side blockquote { font-size: 25px; }
.qcard.side .who { margin-top: 28px; }
.qcard.left { right: calc(50% + 190px); }
.qcard.right { left: calc(50% + 190px); height: 380px; width: 380px; top: 96px; }
.qcard.left .foot { position: absolute; left: 24px; right: 24px; bottom: 20px; padding-top: 14px; border-top: 1px solid rgba(31, 29, 43, 0.14); display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 0.06em; color: rgba(31, 29, 43, 0.6); }
@media (max-width: 1180px) { .sharecard { height: 620px; } }
@media (max-width: 760px) {
  .sharecard { height: 520px; }
  .sharecard .head { padding: 24px 24px 0; }
  .picker { padding: 20px 24px 0; gap: 10px; }
  .picker button { width: 34px; height: 34px; }
  .qcard.story { width: 250px; height: 445px; padding-top: 52px; }
  .qcard.story blockquote { font-size: 21px; margin-top: 32px; }
  .qcard.side { width: 250px; height: 330px; }
  .qcard.side blockquote { font-size: 19px; }
  .qcard.left { right: calc(50% + 140px); }
  .qcard.right { left: calc(50% + 140px); height: 290px; width: 290px; top: 80px; }
  .qcard.side { padding-top: 48px; }
}

/* The two side-by-side panels share one heading style: same sizes, same gap */
.sharecard .head, .home.v2 .head { display: grid; gap: 12px; }
.sharecard .head h2, .home.v2 .head h2 { font-size: 28px; font-weight: 500; line-height: 1.2; }
.sharecard .head p, .home.v2 .head p { font-size: 16px; line-height: 24px; color: #4b5563; }

/* At a glance: the widget shown in place on a Home Screen, with plain tiles standing in for apps */
.home.v2 .art.homescreen { place-items: start center; padding: 30px 0 0; }
.hs { width: min(330px, 84%); display: grid; justify-items: center; }
.hs .widget { width: 100%; }
.hs .wlabel { margin-top: 8px; font-size: 12px; font-weight: 500; color: rgba(24, 21, 46, 0.6); }
.hs .icons { width: 100%; margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 22px; }
.hs .icons i { display: block; aspect-ratio: 1; border-radius: 24%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 8px 14px -10px rgba(24, 21, 46, 0.5); background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%); background-blend-mode: screen; }

/* Made to share: heading, sub-text and circles centered over the centered cards */
.sharecard .head { text-align: center; justify-items: center; }
.sharecard .picker { justify-content: center; }
/* The swatches always stay on one row: on a narrow screen they shrink instead of wrapping */
.picker { flex-wrap: nowrap; }
.picker button { flex: 0 1 40px; width: auto; height: auto; aspect-ratio: 1; min-width: 0; }
@media (max-width: 760px) { .picker { gap: clamp(6px, 2.4vw, 10px); } .picker button { flex-basis: 34px; } }
.home.v2 .head { text-align: center; justify-items: center; }

/* At a glance, revised: the widget sits in the middle with a row of clear glass tiles above and below */
.home.v2 .art.homescreen { place-items: center; padding: 28px 0; }
.hs .icons { margin-top: 0; }
.hs .icons + .widget { margin-top: 22px; }
.hs .wlabel + .icons { margin-top: 16px; }
.hs .icons i { background: rgba(255, 255, 255, 0.38); background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 65%); background-blend-mode: normal; border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 10px 18px -14px rgba(24, 21, 46, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Glass tiles: halfway between the first version and the faintest one */
.hs .icons i { background: rgba(255, 255, 255, 0.27); background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04) 65%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 16px -14px rgba(24, 21, 46, 0.3); }

/* ---------- Theme carousel ----------
   The app's real backgrounds and typefaces, drifting right to left and always running off both
   edges of the page. The track holds the set twice, so the loop has no seam. It stands still for
   anyone who has asked for reduced motion (it then scrolls by hand).
   Typefaces: the app's own (Apple system fonts), each with a close web font for other devices. */
.marquee { margin-top: 48px; margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); overflow: hidden; }
.marquee .track { display: flex; gap: 16px; width: max-content; padding: 0 8px; animation: drift 90s linear infinite; }
.marquee .theme { flex: none; width: 222px; }
@keyframes drift { to { transform: translateX(calc(-50% - 8px)); } }
.swatch.real { background-size: cover; background-position: center; color: #1f1d2b; }
.swatch.real.dark { color: #fff; }
.swatch.real small { opacity: 0.7; letter-spacing: 0.04em; }
.theme-name .face { font-weight: 400; color: var(--muted); }
.f-modern blockquote { font-family: -apple-system, "SF Pro Display", "Plus Jakarta Sans", sans-serif; font-weight: 300; }
.f-editorial blockquote { font-family: "New York", ui-serif, "Source Serif 4", Georgia, serif; }
.f-elegant blockquote { font-family: Didot, "Bodoni Moda", "Bodoni 72", serif; }
.f-classic blockquote { font-family: Optima, Marcellus, Candara, sans-serif; }
.f-bold blockquote { font-family: "Futura", "Futura-Medium", Jost, "Century Gothic", sans-serif; font-weight: 500; }
.f-typewriter blockquote { font-family: "American Typewriter", "Courier Prime", "Courier New", serif; }
.f-handwritten blockquote { font-family: "Noteworthy", "Noteworthy-Light", "Patrick Hand", cursive; font-weight: 300; }
.f-playful blockquote { font-family: "Chalkboard SE", "ChalkboardSE-Regular", "Patrick Hand", "Comic Sans MS", cursive; }
.f-minimalist blockquote { font-family: "Helvetica Neue", "HelveticaNeue-Thin", "Plus Jakarta Sans", sans-serif; font-weight: 200; }
@media (max-width: 1700px) { .marquee { margin-left: -38px; margin-right: -38px; } }
@media (max-width: 760px) { .marquee { margin: 32px -16px 0; } .marquee .track { animation-duration: 70s; } }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee .track { animation: none; } }

/* Card labels: "Ocean · Handwritten", together on the left */
.marquee .theme-name { justify-content: flex-start; gap: 0; }
.marquee .theme-name .face::before { content: "·"; margin: 0 7px; color: var(--muted); }

/* A soft shadow under each carousel card, matching the sharing cards. The extra padding gives
   the shadow room inside the clipped strip; the negative margin keeps the layout where it was. */
.marquee .swatch.real { box-shadow: 0 14px 26px -22px rgba(24, 21, 46, 0.22); }
.marquee { padding-bottom: 28px; margin-bottom: -28px; }

/* One shadow for every quote card on the page: carousel, sharing cards and the widget */
:root { --card-shadow: 0 16px 28px -20px rgba(24, 21, 46, 0.22); }
.marquee .swatch.real, .qcard, .widget { box-shadow: var(--card-shadow); }

/* Dark cards hide a shadow that pale cards show clearly, so theirs is a little stronger and wider.
   The aim is that every card looks like it has the same shadow. */
.marquee .swatch.real.dark { box-shadow: 0 18px 30px -16px rgba(24, 21, 46, 0.34); }

/* "Your quote, your way": its heading and footnote line up with the section above (same column),
   while the carousel still runs the full width of the window. */
.themes { max-width: var(--content); padding: 0; }
.marquee { margin-left: calc((100vw - 100%) / -2); margin-right: calc((100vw - 100%) / -2); }
@media (max-width: 1440px) { .themes { max-width: none; margin-left: 38px; margin-right: 38px; padding: 0; } }
@media (max-width: 760px) { .themes { margin-left: 16px; margin-right: 16px; padding: 0; } .marquee { margin-top: 32px; } }

/* The real Blumvie lockup at the top of each carousel card, in the card's own text color
   (as in the app's header), drawn from the logo files so it stays sharp at any size. */
.lockup { display: inline-flex; align-items: center; gap: 5px; opacity: 0.65; }
.lockup i { display: block; background: currentColor; -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.lockup .m { --src: url("assets/home/footer-emblem.svg"); width: 17px; height: 11px; }
.lockup .w { --src: url("assets/home/logo-wordmark.svg"); width: 45px; height: 10px; }

/* ---------- The live phone in the hero ----------
   The app's quote screen drawn on the page inside the phone frame, so it can move and always
   show today's date. Sizes inside the screen are in cqw (1cqw = 1% of the screen's width), taken
   from the design's 399px-wide screen, so the whole thing scales as one piece. */
.hero-phone.livephone { top: 82px; bottom: auto; aspect-ratio: 1350 / 2760; }
.livephone .bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.livephone .screen { position: absolute; left: 5.33%; top: 2.5%; width: 89.34%; height: 95%; border-radius: 12.5% / 5.75%; overflow: hidden; container-type: inline-size; background: #f4eefc url("assets/themes/aura-light.jpg") center / cover; color: #161616; font-family: -apple-system, "SF Pro Rounded", "SF Pro Display", "Plus Jakarta Sans", sans-serif; }
.livephone .statusbar { position: absolute; left: 0; right: 0; top: 0; height: 15.4cqw; display: flex; align-items: center; justify-content: space-between; padding: 0.6cqw 9cqw 0 13.5cqw; font-size: 4.2cqw; font-weight: 600; }
.livephone .statusbar svg { width: 19cqw; height: auto; fill: currentColor; }
.livephone .statusbar svg rect:nth-of-type(5) { fill: currentColor; }
.livephone .apphead { position: absolute; left: 9.95cqw; right: 9.6cqw; top: 16.4cqw; height: 6.7cqw; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(22, 22, 22, 0.1); }
.livephone .apphead .lockup { opacity: 0.62; gap: 1.4cqw; }
.livephone .apphead .lockup .m { width: 5.6cqw; height: 3.6cqw; }
.livephone .apphead .lockup .w { width: 12.6cqw; height: 3cqw; }
.livephone .today { font-size: 3cqw; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.5; line-height: 1.3; }
.livephone .appbody { position: absolute; left: 0; right: 0; top: 23.4cqw; bottom: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 74%); mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 74%); }
.livephone .scroller { padding: 15cqw 8.5cqw 0; text-align: center; transition: transform 1.3s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.55s ease; }
.livephone.reading .scroller { transform: translateY(-34cqw); }
.livephone .scroller.out { opacity: 0; }
.livephone blockquote { margin: 0; min-height: 62cqw; display: grid; align-items: center; font-size: 10.2cqw; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; }
.livephone .line { width: 40cqw; height: 1px; margin: 8cqw auto 0; background: rgba(22, 22, 22, 0.14); }
.livephone .who { margin-top: 7.4cqw; font-size: 4.5cqw; }
.livephone .what { margin-top: 1.6cqw; font-size: 3.2cqw; opacity: 0.6; }
.livephone .why-text { margin-top: 13cqw; text-align: left; font-size: 4.35cqw; line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 1180px) { .hero-phone.livephone { top: auto; margin-bottom: -38%; } }
@media (max-width: 760px) { .hero-phone.livephone { margin-bottom: -44%; } }

/* Text gliding up under the header fades out softly instead of being cut off at the line */
.livephone .appbody { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 62%, transparent 74%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 62%, transparent 74%); }

/* The hero phone now plays a recording of the real app */
.livephone .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* The recording uses the buttons at the bottom of the screen, so the whole phone is shown
   (the design cropped it at the hero's lower edge). */
.hero-phone.livephone { width: 352px; top: 32px; }
@media (max-width: 1180px) { .hero-phone.livephone { top: auto; width: 320px; margin: 48px auto 40px; } }
@media (max-width: 760px) { .hero-phone.livephone { width: 270px; margin: 40px auto 32px; } }

/* Hero phone, desktop: at rest it is large and cut off by the hero's lower edge, as designed.
   While the recording shows the app being used, it eases back so the whole phone (and the
   buttons at the bottom of the screen) is in view, then returns for the next loop. */
@media (min-width: 1181px) {
  .hero-phone.livephone { width: 447px; top: 82px; transform-origin: 50% 0; transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1); will-change: transform; }
  .hero-phone.livephone.whole { transform: translateY(-52px) scale(0.775); }
}

/* A soft dot that shows where a tap lands in the recording: it appears, presses in, and a ring
   spreads out and fades. */
.tapdot { position: absolute; width: 11%; aspect-ratio: 1; margin: -5.5% 0 0 -5.5%; border-radius: 50%; pointer-events: none; opacity: 0; background: rgba(107, 69, 209, 0.22); box-shadow: 0 0 0 1.5px rgba(107, 69, 209, 0.45) inset; }
.tapdot.go { animation: tap 0.95s ease-out both; }
@keyframes tap {
  0% { opacity: 0; transform: scale(1.35); }
  30% { opacity: 1; transform: scale(1); }
  44% { opacity: 1; transform: scale(0.78); }
  100% { opacity: 0; transform: scale(1.7); }
}
.hero-phone.livephone { cursor: pointer; }

/* ---------- Corners: one system ----------
   24px  sections, panels and every card (hero, feature cards, the two panels, the lavender
         panel, carousel cards, sharing cards, the widget, pricing)
   16px  anything set inside a panel (the Home Screen artwork)
   16px  also the thin strip of notes under the hero (a full 24px looks swollen on something that short)
   pill  buttons
   Glass tiles keep the iPhone icon shape; circles stay circles. */
:root { --r: 24px; --r-inner: 16px; }
.hero, .feature, .panel, .detail, .swatch, .qcard, .widget, .benefit, .plan, .closing .stage { border-radius: var(--r); }
.home .art, .home.v2 .art { border-radius: var(--r-inner); }
.strip.boxed { border-radius: var(--r-inner); }
@media (max-width: 760px) { .hero { border-radius: var(--r); } }

/* Carousel labels: smaller, and starting where the text inside the card starts */
.marquee .theme-name { font-size: 12.5px; padding-left: 20px; }
.marquee .theme { gap: 12px; }

/* Supporting text: a comfortable width that wraps naturally, only avoiding a single stray word on
   the last line. Headings are the one place lines are evened out. */
.lede { max-width: 600px; text-wrap: pretty; }
/* This one is a single short sentence pair: wide enough to sit on one line on desktop, so two
   words are not left alone on a second line */
.why .lede { max-width: 740px; }
.sharecard .head p, .home.v2 .head p, .feature p { text-wrap: pretty; }
.heading, .hero h1, .closing h2 { text-wrap: balance; }

/* Button hover: the brand gradient fades in over the violet and drifts gently, so the whole
   button changes color (the left end deepens to indigo while the right warms to apricot). */
.button { position: relative; overflow: hidden; isolation: isolate; transition: transform 0.15s ease; }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, #3f17b8 0%, #7a3fd6 30%, #c05cae 64%, #e58d5f 100%); background-size: 170% 100%; background-position: 0% 0; opacity: 0; transition: opacity 0.35s ease, background-position 0.9s ease; }
.button:hover { transform: none; filter: none; box-shadow: none; }
.button:hover::before, .button:focus-visible::before { opacity: 1; background-position: 100% 0; }
.button:active { transform: scale(0.98); }

/* Hero logo: the lockup as designed, about 12% smaller. Its proportions (mark to wordmark) are
   the logo's own, so they are scaled together and never changed separately here. */
.logo { gap: 13px; }
.logo .mark { height: 31px; }
.logo .wordmark { height: 24px; }

/* ---------- Entrances ----------
   Things below the hero fade in and rise a few pixels the first time they scroll into view,
   once. Kept small and quick so it reads as the page settling, not as a show. The script adds
   .reveal (and later .in); without the script, or with reduced motion, nothing is ever hidden. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Hero entrance ----------
   On arrival the hero's pieces settle in one after another over about a second: logo, the small
   line, the headline, the button, then the phone rising into place. Same small fade-and-rise as
   the sections further down, so the whole page moves the same way. It uses the separate
   `translate` property so it never fights the phone's own pull-back (which uses transform). */
@keyframes settle { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes arrive { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
.hero .logo, .hero .eyebrow, .hero h1, .hero .hero-copy .button, .hero .hero-copy .fine, .hero .hero-copy .sub { animation: settle 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero .logo { animation-delay: 0.05s; }
.hero .eyebrow { animation-delay: 0.15s; }
.hero h1 { animation-delay: 0.25s; }
.hero .hero-copy .sub { animation-delay: 0.33s; }
.hero .hero-copy .button { animation-delay: 0.42s; }
.hero .hero-copy .fine { animation-delay: 0.5s; }
.hero .hero-phone { animation: arrive 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
@media (prefers-reduced-motion: reduce) { .hero .logo, .hero .eyebrow, .hero h1, .hero .hero-copy .button, .hero .hero-copy .fine, .hero .hero-copy .sub, .hero .hero-phone { animation: none; } }

/* Strips of three notes: three equal columns, so the middle one is always in the true center
   whatever the lengths of the other two. */
.strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.strip > :first-child { text-align: left; }
.strip > :nth-child(2) { text-align: center; }
.strip > :last-child { text-align: right; }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr; } .strip > * { text-align: left !important; } }

/* ---------- Floating pill ----------
   The mark (back to the top) and a small download button on frosted glass. It fades in once the
   hero is out of view and out again at the closing section. Top right on large screens; along
   the bottom, within thumb reach, on phones. */
.floater { position: fixed; z-index: 50; top: 18px; right: 22px; display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 30px -16px rgba(24, 21, 46, 0.45); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); opacity: 0; translate: 0 -12px; pointer-events: none; transition: opacity 0.35s ease, translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.floater.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.floater .to-top { display: flex; }
.floater .to-top img { height: 22px; width: auto; transition: transform 0.2s ease; }
.floater .to-top:hover img { transform: scale(1.08); }
.button.small { margin-top: 0; padding: 11px 18px; font-size: 14px; gap: 8px; }
.button.small img { width: 12px; height: 15px; }
@media (max-width: 760px) {
  .floater { top: auto; bottom: 16px; right: 50%; translate: 50% 12px; }
  .floater.show { translate: 50% 0; }
}
@media (prefers-reduced-motion: reduce) { .floater { transition: opacity 0.2s ease; } }

/* ---------- The two panels build themselves as they arrive ----------
   When a panel scrolls into view its contents follow: the circles pop in one by one and the
   three cards rise from below (the middle one first); on the other side the glass tiles appear
   in turn and the widget settles into the middle. Start states only apply while the panel is
   waiting to be revealed (.reveal without .in), so nothing is hidden if the script never runs.
   `translate` and `scale` are used so these never clash with the cards' own transforms. */
.picker button { transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.4s ease var(--d, 0s), scale 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) var(--d, 0s); }
.picker button:nth-child(1) { --d: 0.30s; }
.picker button:nth-child(2) { --d: 0.35s; }
.picker button:nth-child(3) { --d: 0.40s; }
.picker button:nth-child(4) { --d: 0.45s; }
.picker button:nth-child(5) { --d: 0.50s; }
.picker button:nth-child(6) { --d: 0.55s; }
.picker button:nth-child(7) { --d: 0.60s; }
.picker button:nth-child(8) { --d: 0.65s; }
.panel.reveal:not(.in) .picker button { opacity: 0; scale: 0.4; }
.qcard { transition: translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s), opacity 0.5s ease var(--d, 0s); }
.qcard.story { --d: 0.45s; }
.qcard.left { --d: 0.6s; }
.qcard.right { --d: 0.7s; }
.panel.reveal:not(.in) .qcard { translate: 0 90px; opacity: 0; }
.hs .icons i { transition: opacity 0.5s ease var(--d, 0s), scale 0.6s cubic-bezier(0.3, 1.3, 0.5, 1) var(--d, 0s); }
.hs .icons:first-child i:nth-child(1) { --d: 0.36s; }
.hs .icons:last-child i:nth-child(1) { --d: 0.81s; }
.hs .icons:first-child i:nth-child(2) { --d: 0.42s; }
.hs .icons:last-child i:nth-child(2) { --d: 0.87s; }
.hs .icons:first-child i:nth-child(3) { --d: 0.48s; }
.hs .icons:last-child i:nth-child(3) { --d: 0.93s; }
.hs .icons:first-child i:nth-child(4) { --d: 0.54s; }
.hs .icons:last-child i:nth-child(4) { --d: 0.99s; }
.panel.reveal:not(.in) .hs .icons i { opacity: 0; scale: 0.6; }
.hs .widget, .hs .wlabel { transition: opacity 0.6s ease var(--d, 0.55s), scale 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) var(--d, 0.55s), translate 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) var(--d, 0.55s); }
.hs .wlabel { --d: 0.8s; }
.panel.reveal:not(.in) .hs .widget { opacity: 0; scale: 0.9; translate: 0 14px; }
.panel.reveal:not(.in) .hs .wlabel { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .picker button, .qcard, .hs .icons i, .hs .widget, .hs .wlabel { transition: none; } }

/* Sharing cards: the two side cards start at the same height */
.qcard.side, .qcard.right { top: 56px; }

/* The three sharing layouts, told apart as in the app:
   left   Card    quote first, no logo on top (its logo and date sit in a footer, out of view)
   middle Story   logo on top, quote, rule, name
   right  Square  small logo on top, a slightly smaller quote, rule, name */
.qcard.right { padding-top: 40px; }
.qcard.right .brand { font-size: 12px; gap: 5px; }
.qcard.right .brand img { width: 17px; }
.qcard.right blockquote { font-size: 22px; margin-top: 30px; }
.qcard.right .line { margin-top: 26px; width: 90px; }
.qcard.right .who { margin-top: 18px; }
.qcard.left { padding-top: 74px; }
@media (max-width: 760px) { .qcard.right blockquote { font-size: 17px; margin-top: 22px; } .qcard.left { padding-top: 54px; } }

/* The Card layout (left) is shown whole, ending above the panel's edge, so its footer is in
   view: a full-width rule with the logo on the left and the date on the right. */
.qcard.left { top: 56px; bottom: 30px; height: auto; padding-top: 52px; }
.qcard.left .foot { left: 26px; right: 26px; bottom: 22px; padding-top: 16px; font-size: 11px; }
.qcard.left .foot .brand { font-size: 13px !important; }
.qcard.left .foot .brand img { width: 17px !important; }
@media (max-width: 760px) { .qcard.left { padding-top: 36px; bottom: 22px; } }

/* Sharing cards, revised:
   left   runs off the bottom like the others; its logo and date sit along the top with a rule
          beneath them, like the app's header
   right  its content is centered top to bottom in the square */
.qcard.left { top: 56px; bottom: auto; height: 440px; padding-top: 96px; }
.qcard.left .foot { top: 22px; bottom: auto; padding-top: 0; padding-bottom: 14px; border-top: 0; border-bottom: 1px solid rgba(31, 29, 43, 0.14); }
.qcard.right { padding: 0 28px; justify-content: center; }
.qcard.right blockquote { margin-top: 22px; }
@media (max-width: 760px) { .qcard.left { height: 330px; padding-top: 72px; bottom: auto; } }

/* Side sharing cards sit 20px lower, so they stand a little shorter beside the center card */
.qcard.side, .qcard.left, .qcard.right { top: 76px; }

/* Right sharing card: no logo, so the quote needs no gap above it */
.qcard.right blockquote { margin-top: 0; }

/* Left sharing card: a smaller date in its header */
.qcard.left .foot { font-size: 9.5px; }

/* ---------- "The quote, and why it matters": a diagram, not a phone ----------
   Three small cards on a dotted field, joined by arrows: the quote, a few words on why it
   matters, and the source it was verified against. They build in order when the section is
   first seen (.built) and rebuild for each new quote (.swap hides them for a moment). */
.flow { position: absolute; left: 96px; top: 50%; translate: 0 -50%; width: 452px; padding: 34px 30px 36px; display: flex; flex-direction: column; align-items: center; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.42); background-image: radial-gradient(rgba(24, 21, 46, 0.13) 1px, transparent 1.3px); background-size: 14px 14px; background-position: 7px 7px; }
.flow .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--soft-gray); font-size: 12px; font-weight: 500; color: #3d3856; }
.flow .chip b { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.flow .chip .m { width: 15px; height: 10px; display: block; background: linear-gradient(90deg, #6e33db, #c05cae 60%, #e58d5f); -webkit-mask: url("assets/home/footer-emblem.svg") center / contain no-repeat; mask: url("assets/home/footer-emblem.svg") center / contain no-repeat; }
.fcard { width: 100%; border-radius: var(--r-inner); background: #fff; border: 1px solid var(--soft-gray); box-shadow: var(--card-shadow); }
.fcard.quote { margin-top: 16px; padding: 26px 24px 22px; text-align: center; }
.fcard.quote blockquote { margin: 0; font-size: 22px; font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; font-family: -apple-system, "SF Pro Display", "Plus Jakarta Sans", sans-serif; text-wrap: balance; }
.fcard.quote .who { margin-top: 16px; font-size: 14px; font-weight: 600; }
.fcard.quote .what { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.fcard.why { padding: 16px 20px 18px; background: #f6f1fd; border-color: #e4d9f7; }
.fcard.why .tag { font-size: 10.5px; letter-spacing: 0.05em; }
.fcard.why .text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #3d3856; }
.fcard.source { display: flex; align-items: center; gap: 10px; width: auto; max-width: 100%; padding: 10px 16px 10px 12px; border-radius: 999px; background: #eef8f2; border-color: #cfe9da; font-size: 12.5px; color: #1f5c3d; }
.fcard.source svg { width: 18px; height: 18px; flex: none; }
.fcard.source circle { fill: #2f9461; }
.fcard.source path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flow .arrow { width: 1px; height: 22px; margin: 5px 0 9px; background: rgba(24, 21, 46, 0.25); position: relative; }
.flow .arrow::after { content: ""; position: absolute; left: -3.5px; bottom: -1px; width: 7px; height: 7px; border-right: 1px solid rgba(24, 21, 46, 0.35); border-bottom: 1px solid rgba(24, 21, 46, 0.35); rotate: 45deg; }
.flow > * { transition: opacity 0.45s ease var(--d, 0s), translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s); }
.flow > :nth-child(1) { --d: 0.1s; } .flow > :nth-child(2) { --d: 0.25s; } .flow > :nth-child(3) { --d: 0.5s; }
.flow > :nth-child(4) { --d: 0.6s; } .flow > :nth-child(5) { --d: 0.85s; } .flow > :nth-child(6) { --d: 0.95s; }
.flow:not(.built) > *, .flow.swap > :not(.chip) { opacity: 0; translate: 0 10px; }
.flow.swap > :not(.chip) { transition-delay: 0s; transition-duration: 0.3s; }
.detail .detail-copy { left: 640px; width: 560px; top: 50%; translate: 0 -50%; }
.detail { height: 720px; }
@media (max-width: 1440px) { .flow { left: 5%; } .detail .detail-copy { left: calc(5% + 500px); width: auto; right: 5%; } }
@media (max-width: 1180px) {
  .detail { height: auto; padding: 48px 32px; }
  .flow { position: relative; left: auto; top: auto; translate: none; margin: 0 auto; max-width: 100%; }
  .detail .detail-copy { position: relative; left: auto; right: auto; top: auto; translate: none; width: auto; }
}
@media (max-width: 760px) { .detail { padding: 28px 16px 36px; } .flow { width: 100%; padding: 26px 16px 28px; } .fcard.quote blockquote { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .flow > * { transition: none; opacity: 1 !important; translate: none !important; } }

/* The diagram's box eases to each quote's height with a slight spring, instead of jumping */
.flow { transition: height 0.75s cubic-bezier(0.3, 1.45, 0.45, 1); overflow: hidden; }
.flow .chip #flow-day { font-weight: 500; }

/* "The quote, and why it matters": the text beside the diagram. Three short points that mirror
   the diagram's three cards (each marker matches its card), in a darker gray that holds up on
   the lavender background. */
.detail .lede { color: #4d4763; max-width: 460px; }
.points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 18px; max-width: 520px; }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
.points .dot { display: block; height: 22px; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; border: 1px solid var(--soft-gray); background: #fff; box-shadow: var(--card-shadow); }
.points .dot.d-why { background: #f0e8fc; border-color: #dccdf5; }
.points .dot.d-source { border-radius: 50%; border: 0; background: #2f9461 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.points b { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--navy); }
.points span { display: block; margin-top: 2px; font-size: 15.5px; line-height: 1.55; color: #4d4763; }
.detail .detail-copy { gap: 24px; }

/* The two panels' sub-text both run to two lines, so the artwork below starts level.
   The right one is balanced; the left one wraps naturally within 375px. */
.home.v2 .head p { text-wrap: balance; }
.sharecard .head p { max-width: 375px; text-wrap: wrap; }

/* The three points beside the diagram: no markers, just a label and a line each, separated by
   hairlines so they read as a tidy list. */
.points { gap: 0; }
.points li { display: block; padding: 16px 0; border-top: 1px solid rgba(24, 21, 46, 0.1); }
.points li:last-child { padding-bottom: 0; }

/* Logos are vector files everywhere, so they stay sharp at any size and on any screen */
.logo .lockup-full { height: 32px; width: auto; display: block; }

/* ---------- One content width ----------
   Every section sits in the same column; only the hero and the carousel run wider. */
.duo, .detail { max-width: var(--content); }
/* At 1440px and below the sections around these two drop the column and fill the width, so these
   do the same (they were held at 1240px and sat left of center, short of the right edge) */
@media (max-width: 1440px) { .duo, .detail { max-width: none; } }

/* The lavender panel fits its contents (it was 720px tall with the contents filling about 60%) */
.detail { height: 640px; }
.themes .intro { gap: 18px; }

/* ---------- A note from the maker ---------- */
.founder { max-width: 760px; margin: 120px auto 0; padding: 0 24px; display: grid; justify-items: center; gap: 26px; text-align: center; }
.founder .photo { width: 104px; height: 104px; border-radius: 50%; background: #efe8fa center / cover no-repeat; border: 1px dashed #cdbfee; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.founder .photo.has-image { border: 3px solid #fff; box-shadow: var(--card-shadow); }
.founder .photo.has-image span { display: none; }
.founder blockquote { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; text-wrap: balance; }
.founder .by { display: grid; gap: 2px; font-size: 15px; }
.founder .by b { font-weight: 600; }
.founder .by span { color: var(--muted); }
.closing { margin-top: 60px; }

/* ---------- Tablet: the lavender panel ----------
   Text first across the full width, its three points side by side; the diagram below. The
   diagram keeps one height here so the page beneath it does not move as the quotes change. */
@media (max-width: 1180px) {
  .detail { height: auto; padding: 56px 48px; gap: 44px; }
  .detail .detail-copy { order: 1; max-width: none; }
  .detail .flow { order: 2; min-height: 520px; justify-content: flex-start; }
  .points { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
  .points li { border-top: 1px solid rgba(24, 21, 46, 0.14); padding: 16px 0 0; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  /* Text that is not inside a card gets more room from the screen edge; cards keep theirs */
  .why .intro, .themes .intro, .themes .strip, .founder { padding-left: 10px; padding-right: 10px; }
  .closing .stage { padding-left: 26px; padding-right: 26px; }
  .footer { padding-left: 26px; padding-right: 26px; }
  /* The six features become one compact list: icon beside a title and a line */
  .cards { gap: 0; border: 1px solid var(--soft-gray); border-radius: var(--r); background: var(--card); overflow: hidden; }
  .cards .feature { display: grid; grid-template-columns: 26px 1fr; column-gap: 16px; row-gap: 3px; padding: 18px 20px; border: 0; border-radius: 0; background: none; border-top: 1px solid var(--soft-gray); }
  .cards .feature:first-child { border-top: 0; }
  .cards .feature img { grid-row: span 2; width: 24px; height: 24px; margin-top: 2px; }
  .cards .feature h3 { font-size: 17px; line-height: 1.35; }
  .cards .feature p { font-size: 14.5px; line-height: 1.5; }
  .detail { padding: 36px 20px 24px; gap: 32px; }
  .points { grid-template-columns: 1fr; }
  .points li { padding: 14px 0; }
  .detail .flow { min-height: 530px; }
  .founder { margin-top: 80px; }
  .founder blockquote { font-size: 23px; }
}

/* Story card: the quote sits on three lines */
.qcard.story { padding-left: 22px; padding-right: 22px; }
.qcard.story blockquote { font-size: 23px; }
@media (max-width: 760px) { .qcard.story { padding-left: 16px; padding-right: 16px; } .qcard.story blockquote { font-size: 17.5px; } }

/* ---------- A note from the maker, redesigned ----------
   A white card with the photo on the left and the note beside it, left-aligned: a personal
   letter, clearly different from the centered closing section that follows.
   The picture is assets/founder.webp (an illustration of Derek and his family). */
.founder { max-width: var(--content); margin: 20px auto 0; padding: 0; display: grid; grid-template-columns: 380px 1fr; gap: 0; justify-items: stretch; text-align: left; border: 1px solid var(--soft-gray); border-radius: var(--r); background: var(--card); overflow: hidden; }
.founder .photo { width: auto; height: auto; min-height: 400px; border-radius: 0; border: 0; background: url("assets/founder.webp") center 30% / cover no-repeat, #efe8fa; }
.founder .photo span { display: none; }
.founder .words { padding: 56px 64px; display: grid; gap: 20px; align-content: center; }
.founder blockquote { margin: 0; font-size: 21px; font-weight: 400; line-height: 1.6; letter-spacing: 0; text-wrap: pretty; color: #2c2843; }
.founder .by { justify-items: start; }
.closing { margin-top: 40px; }
@media (max-width: 1440px) { .founder { margin-left: 38px; margin-right: 38px; max-width: none; } }
@media (max-width: 1180px) { .founder { grid-template-columns: 300px 1fr; } .founder .words { padding: 40px; } .founder blockquote { font-size: 19px; } }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; margin: 12px 16px 0; padding: 0; } .founder .photo { min-height: 260px; } .founder .words { padding: 28px 24px 32px; } .founder blockquote { font-size: 17.5px; } }

/* Founder card, revised: a small round photo beside the name, under the note, like a signature.
   The note leads; the photo is a detail. */
.founder { display: block; max-width: 860px; }
.founder .words { padding: 48px 56px; gap: 22px; }
.founder .sign { display: flex; align-items: center; gap: 14px; }
.founder .photo { width: 64px; height: 64px; min-height: 0; flex: none; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--card-shadow); background: url("assets/founder.webp") 22% 18% / 290% no-repeat, #efe8fa; }
@media (max-width: 1440px) { .founder { max-width: 860px; margin-left: auto; margin-right: auto; } }
@media (max-width: 940px) { .founder { margin-left: 38px; margin-right: 38px; } }
@media (max-width: 760px) { .founder { margin: 12px 16px 0; } .founder .words { padding: 28px 24px 30px; } .founder .photo { min-height: 0; width: 56px; height: 56px; } }

/* Founder card, settled: the photo beside the note as before, but modest. It is a rounded
   picture set inside the card with space around it, not a third of the card. */
.founder { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 44px; max-width: 980px; padding: 40px 56px 40px 40px; }
.founder .photo { width: 220px; height: 220px; min-height: 0; border-radius: var(--r-inner); border: 0; box-shadow: var(--card-shadow); background: url("assets/founder.webp") center 30% / cover no-repeat, #efe8fa; }
.founder .words { padding: 0; gap: 18px; }
@media (max-width: 1440px) { .founder { max-width: 980px; margin-left: auto; margin-right: auto; } }
@media (max-width: 1060px) { .founder { margin-left: 38px; margin-right: 38px; } }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: 22px; margin: 12px 16px 0; padding: 24px; } .founder .photo { width: 100%; height: 200px; } .founder .words { padding: 0; } }

/* Founder card: full content width, lining up with the panel above; note on the left (where the
   eye starts), photo on the right. */
.founder { max-width: var(--content); grid-template-columns: 1fr 240px; gap: 64px; padding: 48px 56px 48px 64px; }
.founder .words { order: 1; max-width: 720px; }
.founder .photo { order: 2; width: 240px; height: 240px; }
@media (max-width: 1440px) { .founder { max-width: none; margin-left: 38px; margin-right: 38px; } }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr 180px; gap: 32px; padding: 36px; } .founder .photo { width: 180px; height: 180px; } }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; gap: 22px; margin: 12px 16px 0; padding: 24px; } .founder .photo { order: 0; width: 100%; height: 200px; } .founder .words { max-width: none; } }

/* The founder's note is his own words, so it carries quotation marks. The opening mark hangs in
   the margin so the first line stays flush with the lines below it. */
.founder blockquote { position: relative; }
.founder blockquote::before { content: "“"; position: absolute; right: 100%; margin-right: 0.08em; }
.founder blockquote::after { content: "”"; }

/* Founder's note: set in an italic serif (the same family as the app's Editorial typeface) so it
   reads as a person speaking; quotation marks sit in the line with the text. */
.founder blockquote { font-family: "New York", ui-serif, "Source Serif 4", Georgia, serif; font-style: italic; font-size: 23px; line-height: 1.55; color: var(--navy); }
.founder blockquote::before { position: static; margin-right: 0; }
@media (max-width: 1180px) { .founder blockquote { font-size: 20px; } }
@media (max-width: 760px) { .founder blockquote { font-size: 18.5px; } }

/* Founder's note in Instrument Serif italic: tall and elegant against the plain Jakarta around it */
.founder blockquote { font-family: "Instrument Serif", "New York", Georgia, serif; font-style: italic; font-size: 30px; line-height: 1.36; letter-spacing: 0; }
.founder .words { max-width: 760px; }
@media (max-width: 1180px) { .founder blockquote { font-size: 26px; } }
@media (max-width: 760px) { .founder blockquote { font-size: 23px; } }

/* Founder's note in Lora italic: gentle and easy to read */
.founder blockquote { font-family: Lora, "New York", Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.6; }
@media (max-width: 1180px) { .founder blockquote { font-size: 19px; } }
@media (max-width: 760px) { .founder blockquote { font-size: 17.5px; } }

/* Founder's note: Lora italic at 19px with open line spacing */
.founder blockquote { font-size: 19px; line-height: 1.75; }
@media (max-width: 1180px) { .founder blockquote { font-size: 18px; } }
@media (max-width: 760px) { .founder blockquote { font-size: 17px; line-height: 1.7; } }

/* Founder's note in Newsreader italic: a clearer slant than Lora, still easy to read.
   Newsreader runs a little small, so it is set one step larger to look like 19px. */
.founder blockquote { font-family: Newsreader, "New York", Georgia, serif; font-style: italic; font-size: 20.5px; line-height: 1.7; }
@media (max-width: 1180px) { .founder blockquote { font-size: 19.5px; } }
@media (max-width: 760px) { .founder blockquote { font-size: 18.5px; line-height: 1.65; } }

/* Founder's note in the brand typeface's own italic (Plus Jakarta Sans), so the site stays on
   one type family. 19px with open line spacing. */
.founder blockquote { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.75; }
@media (max-width: 1180px) { .founder blockquote { font-size: 18px; } }
@media (max-width: 760px) { .founder blockquote { font-size: 17px; line-height: 1.7; } }

/* Founder's note at 17px: a step above the page's 16px supporting text, so it still reads as
   the main thing in its card */
.founder blockquote { font-size: 17px; line-height: 1.75; }
@media (max-width: 1180px) { .founder blockquote { font-size: 17px; } }
@media (max-width: 760px) { .founder blockquote { font-size: 16.5px; line-height: 1.7; } }

/* Founder photo: 200 x 180 */
.founder { grid-template-columns: 1fr 200px; }
.founder .photo { width: 200px; height: 180px; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr 180px; } .founder .photo { width: 180px; height: 162px; } }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; } .founder .photo { width: 100%; height: 200px; } }

/* Founder photo: 250 x 210, the photo's own proportions, so nobody is cropped */
.founder { grid-template-columns: 1fr 250px; }
.founder .photo { width: 250px; height: 210px; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr 200px; } .founder .photo { width: 200px; height: 168px; } }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; } .founder .photo { width: 100%; height: 220px; } }

/* Founder picture: a petal shape (two opposite corners rounded far more than the others), echoing
   the flower mark. It always keeps the picture's own proportions (800 x 671), so nobody is
   cropped at any screen size. */
.founder .photo { height: auto; aspect-ratio: 800 / 671; border-radius: 10px 90px 10px 90px; background-size: cover; background-position: center; }
@media (max-width: 900px) { .founder .photo { height: auto; border-radius: 8px 68px 8px 68px; } }
@media (max-width: 760px) { .founder .photo { width: 100%; height: auto; border-radius: 12px 110px 12px 110px; } }

/* Founder picture on phones: about half the card's width, centered, still in proportion */
@media (max-width: 760px) { .founder .photo { width: 100%; max-width: 220px; margin: 0 auto; border-radius: 8px 60px 8px 60px; } }

/* ---------- Scroll motion ----------
   Five things tied to how far the page has been scrolled; the script that drives them is at the
   foot of index.html ("Scroll motion"). Everything here hangs off html.motion, which that script
   adds, so without it (or with reduced motion) the page is still and nothing is hidden. */
html.motion body { overflow-x: clip; }

/* 1. The hero holds in place and fades while the rest of the page slides up over it. The fade
      happens behind the bar and is finished by its lower edge. */
html.motion .hero { position: sticky; top: var(--hero-top, 30px); z-index: 0; opacity: var(--ho, 1); scale: var(--hs, 1); transform-origin: 50% 0; will-change: opacity, scale; }
html.motion .after-hero { position: relative; z-index: 1; background: linear-gradient(to bottom, rgba(248, 246, 251, 0) 0, rgba(248, 246, 251, 0) 16px, var(--page) 76px); }

/* 2. The bar: frosted glass while it crosses the hero. (It also narrows to sit just inside the
      content; the script sets its side margins directly, starting from whatever they are here.) */
html.motion .strip.boxed { background: rgba(255, 255, 255, calc(0.72 - 0.36 * var(--glass, 0))); border-color: rgba(255, 255, 255, calc(0.55 + 0.4 * var(--glass, 0))); box-shadow: 0 calc(18px * var(--glass, 0)) calc(40px * var(--glass, 0)) -22px rgba(24, 21, 46, calc(0.35 * var(--glass, 0))); }

/* The blur itself is simply on or off (a blur whose strength changes every frame is slow in Safari);
   the bar's tint and shadow carry the gradual change. */
html.motion .strip.boxed.glass { -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }

/* 3. The theme cards are moved by the script, not by their own animation */
html.motion .marquee .track { animation: none; will-change: transform; }

/* 4. The story in the lavender panel. On wide screens the panel holds still inside a taller
      wrapper while the page scrolls; everywhere, its cards come in one step at a time and the
      three points beside it light in turn. The date chip keeps its own entrance. */
.detail .steps { display: none; }
html.motion .detail-pin.pinned { height: calc(var(--pin-h, 640px) + var(--hold, 950px)); }
html.motion .detail-pin.pinned > .detail { position: sticky; top: var(--pin-top, 60px); }
html.motion .flow > * { --d: 0s; transition: opacity 0.5s ease, translate 0.65s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.motion .flow > .chip { --d: 0.1s; }
html.motion .flow[data-step="0"] > :nth-child(n+2),
html.motion .flow[data-step="1"] > :nth-child(n+3),
html.motion .flow[data-step="2"] > :nth-child(n+5) { opacity: 0; translate: 0 16px; }
html.motion .points li { opacity: 0.3; transition: opacity 0.45s ease; }
html.motion .points li.on { opacity: 1; }
html.motion .detail-pin.pinned .steps { position: absolute; right: 22px; top: 50%; translate: 0 -50%; display: grid; gap: 8px; }
html.motion .detail .steps i { width: 6px; height: 6px; border-radius: 50%; background: rgba(24, 21, 46, 0.18); transition: background 0.3s ease, scale 0.3s ease; }
html.motion .detail .steps i.on { background: var(--violet); scale: 1.35; }

/* 5. The closing section: outlines of the mark open around the emblem. They are faint, fainter
      still right around the emblem so the logo stands clear, taller than the mark so they read as
      petals opening, and they fade out toward the edges. The section starts directly under the
      founder card (its 40px gap becomes padding) so the outlines run up to the card's edge. */
.closing .bloom-wrap { display: none; }
html.motion .closing { margin-top: 0; padding-top: 64px; }
html.motion .closing .halo { top: -238px; }
html.motion .closing .bloom-wrap { display: block; position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 460px 340px at 50% var(--ey, 160px), rgba(0, 0, 0, 0.12) 0, rgba(0, 0, 0, 0.12) 13%, #000 36%, #000 44%, transparent 100%); mask-image: radial-gradient(ellipse 460px 340px at 50% var(--ey, 160px), rgba(0, 0, 0, 0.12) 0, rgba(0, 0, 0, 0.12) 13%, #000 36%, #000 44%, transparent 100%); }
.closing .bloom { position: absolute; left: 50%; top: 0; width: 90px; height: 59px; margin-left: -45px; overflow: visible; }
.closing .bloom path { fill: none; stroke: url(#bloom-stroke); stroke-width: 1.1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 50% 62%; transform: scale(var(--s, 1), calc(var(--s, 1) * 1.32)); opacity: var(--o, 0); will-change: transform, opacity; }
@media (max-width: 760px) { html.motion .closing { padding-top: 52px; } }

/* ---------- The line under the hero headline ----------
   Says what you get each morning, at the same size as the intro lines under the section headings.
   The button sits a little closer to make room for it. */
.hero-copy .sub { margin: 22px 0 0; max-width: 540px; font-size: 18px; line-height: 1.6; color: #3d3856; text-wrap: balance; }
.hero-copy .sub ~ .button, .hero-copy .sub ~ .soon { margin-top: 40px; }
@media (max-width: 760px) { .hero-copy .sub { margin: 14px auto 0; font-size: 16px; line-height: 1.5; max-width: 320px; } .hero-copy .sub ~ .button, .hero-copy .sub ~ .soon { margin-top: 26px; } }

/* ---------- Questions ----------
   A card like the founder's, between the lavender panel and the founder's note: a heading on the
   left and the questions on the right. Each question opens when tapped (a native details element,
   so it works without any script). */
.faq { max-width: var(--content); margin: 20px auto 0; padding: 56px 64px; display: grid; grid-template-columns: 1fr 1.55fr; gap: 64px; align-items: start; border: 1px solid var(--soft-gray); border-radius: var(--r); background: var(--card); }
.faq-intro { display: grid; gap: 18px; }
.faq .heading { font-size: 40px; text-wrap: balance; }
.faq details { border-top: 1px solid rgba(24, 21, 46, 0.1); }
.faq details:last-child { border-bottom: 1px solid rgba(24, 21, 46, 0.1); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 18px; font-weight: 500; line-height: 1.4; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--violet), var(--violet)) center / 100% 1.5px no-repeat, linear-gradient(var(--violet), var(--violet)) center / 1.5px 100% no-repeat; transition: rotate 0.25s ease; }
.faq details[open] summary::after { rotate: 45deg; }
/* While an answer is easing shut (see "Questions" in index.html) the row is still open, so the
   plus is turned back here instead of waiting for the end */
.faq details.shutting summary::after { rotate: 0deg; }
.faq summary { transition: color 0.2s ease; }
.faq summary:hover { color: var(--violet); }
.faq summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }
.faq details p { margin: 0; padding: 0 44px 22px 0; font-size: 16px; line-height: 1.65; color: #4d4763; text-wrap: pretty; }
.faq details a { color: var(--violet); }
@media (max-width: 1440px) { .faq { margin-left: 38px; margin-right: 38px; max-width: none; } }
@media (max-width: 1180px) { .faq { grid-template-columns: 1fr; gap: 28px; padding: 44px 40px; } }
@media (max-width: 760px) { .faq { margin: 12px 16px 0; padding: 28px 24px 24px; gap: 20px; } .faq .heading { font-size: 30px; } .faq summary { font-size: 17px; padding: 17px 0; } .faq details p { padding-right: 0; font-size: 15.5px; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- Hero copy sits on the phone's baseline (desktop) ----------
   The words are placed from the bottom, so the button (or the "Coming soon" pill) ends level with
   the bottom of the phone once it has pulled back: the phone is 447px wide at 0.775, starting
   30px down, which puts its foot 45px above the hero's lower edge. */
@media (min-width: 1181px) { .hero-copy { top: auto; bottom: 45px; display: flex; flex-direction: column; align-items: flex-start; } }

/* ---------- Theme cards, larger on desktop ----------
   At 222 by 300 the cards read as small beside the hero and the panels. From 1181px up they are
   about 30% larger, with their type and logo scaled to match, so the typefaces are easier to
   tell apart. Tablets and phones keep the smaller size. */
@media (min-width: 1181px) {
  .marquee .theme { width: 290px; }
  .marquee .swatch { height: 392px; padding: 26px; }
  .marquee .swatch blockquote { font-size: 25px; }
  .marquee .swatch small { font-size: 11.5px; }
  .marquee .swatch .lockup { gap: 6.5px; }
  .marquee .swatch .lockup .m { width: 22px; height: 14.3px; }
  .marquee .swatch .lockup .w { width: 58.5px; height: 13px; }
  .marquee .theme-name { font-size: 14px; padding-left: 26px; }
}

/* ---------- Phones (760px and under) ----------
   A smaller logo; a shorter hero whose phone is still and cropped, so the headline, the button and
   the top of the app fit on the first screen; a small founder picture at the left; and a footer
   with no second logo under the closing emblem. The hero is not held and faded here, and the
   three points beside the diagram are not dimmed. */
@media (max-width: 760px) {
  .logo .lockup-full { height: 24px; }
  .logo { top: 28px; }
  .hero { padding-top: 92px; }
  .hero-phone.livephone { width: 250px; margin: 36px auto -215px; cursor: default; }
  /* the logo and the words sit centered over the phone */
  .logo { left: 0; right: 0; justify-content: center; }
  .hero-copy { text-align: center; max-width: none; }
  .hero-copy .soon { margin-left: auto; margin-right: auto; }
  /* The founder's note reads first; the picture sits at the foot beside the name, like a signature.
     (.words is flattened so its label, note and name can be laid out alongside the picture.) */
  .founder { grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 16px; align-items: center; }
  .founder .words { display: contents; }
  .founder .label { grid-column: 1 / -1; order: 1; }
  .founder blockquote { grid-column: 1 / -1; order: 2; }
  .founder .photo { order: 3; grid-column: 1; width: 76px; max-width: none; margin: 0; border-radius: 5px 26px 5px 26px; }
  .founder .by { order: 4; grid-column: 2; }
  .after-hero > .footer .signature { display: none; }
  .after-hero > .footer .row { align-items: center; text-align: center; gap: 10px; }
  .after-hero > .footer nav { justify-content: center; flex-wrap: wrap; gap: 8px 22px; }
  html.motion .hero { position: relative; top: auto; opacity: 1; scale: 1; }
  html.motion .after-hero { background: none; }
  html.motion .points li { opacity: 1; }
}

/* The logo blooms on hover: the two inner petals lean apart from the base, and each outer petal
   swings a little further out from where it joins its neighbor. Desktop pointers only. */
.bloom-logo { overflow: visible; --lean: 0deg; --swing: 0deg; }
.bloom-logo .petal { transform-origin: 27.09px 28.9px; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bloom-logo .l2 { transform: rotate(calc(-1 * var(--lean))); }
.bloom-logo .r2 { transform: rotate(var(--lean)); }
.bloom-logo .l1 { transform: rotate(calc(-1 * var(--lean))) translate(-15.59px, -17.2px) rotate(calc(-1 * var(--swing))) translate(15.59px, 17.2px); }
.bloom-logo .r1 { transform: rotate(var(--lean)) translate(15.59px, -17.2px) rotate(var(--swing)) translate(-15.59px, 17.2px); }
@media (hover: hover) and (pointer: fine) { a:hover > .bloom-logo { --lean: 6deg; --swing: 9deg; } }
@media (prefers-reduced-motion: reduce) { .bloom-logo { --lean: 0deg !important; --swing: 0deg !important; } }