/* BloomBook — elevated editorial redesign. Content and core brand remain intact. */
:root {
  color-scheme: light;
  --paper: #f2e5da;
  --paper-deep: #ead9ca;
  --cream-hi: #fff8ee;
  --ink: #2e251f;
  --ink-soft: #65564a;
  --ink-light: #8b796b;
  --hairline: rgba(58, 46, 37, .16);
  --hairline-2: rgba(58, 46, 37, .08);
  --rose: #a94f62;
  --maxw: 1240px;
  --mount-shadow: 0 42px 90px rgba(71, 41, 30, .18), 0 10px 30px rgba(71, 41, 30, .10);
}

html { background: var(--paper); }

body {
  background:
    radial-gradient(circle at 12% 2%, rgba(255,255,255,.7), transparent 28rem),
    radial-gradient(circle at 90% 16%, rgba(169,79,98,.08), transparent 26rem),
    var(--paper);
  letter-spacing: -.008em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .055;
  background-image: url("noise.svg");
}

.wrap { padding-inline: clamp(24px, 5vw, 72px); }

.eyebrow {
  color: var(--rose);
  font-weight: 600;
  letter-spacing: .2em;
}

header.nav {
  top: 14px;
  margin: 0 auto;
  width: min(calc(100% - 28px), 1200px);
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cream-hi) 72%, transparent);
  box-shadow: 0 8px 28px rgba(54,37,29,.08);
}

.nav-inner { padding: 9px 12px 9px 18px; }
.brand svg { width: 34px; height: 34px; }
.wordmark { font-size: 1.38rem; }
.nav-links { gap: clamp(16px, 3vw, 38px); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -5px;
  height: 1px;
  background: var(--rose);
  transition: right .25s ease;
}
.nav-links a:hover::after { right: 0; }
/* The promotion, marked out from the standing nav items */
.nav-links .nav-offer { color: var(--rose); }

.btn {
  min-height: 46px;
  padding-inline: 23px;
  box-shadow: 0 8px 20px rgba(67,42,32,.06);
}
.btn-primary {
  background: linear-gradient(135deg, #b95d70, #8f4052);
  box-shadow: 0 12px 30px rgba(142,64,82,.23), inset 0 1px rgba(255,255,255,.25);
}
.btn:hover { transform: translateY(-2px); }
.btn-lg { min-height: 56px; padding-inline: 30px; }

.hero {
  min-height: 930px;
  text-align: left;
  padding: clamp(100px, 13vw, 170px) max(24px, calc((100vw - 1120px)/2)) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(320px, .72fr);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.hero::before {
  width: 760px;
  height: 760px;
  top: 4%;
  left: auto;
  right: -12%;
  transform: none;
  background: radial-gradient(circle, rgba(184,97,110,.19), rgba(201,151,74,.06) 38%, transparent 70%);
}

.hero .flower { width: 72px; height: 72px; margin: 0 0 28px; align-self: end; }
.hero h1 {
  grid-column: 1;
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.7rem, 7vw, 7.25rem);
  line-height: .91;
  letter-spacing: -.055em;
  font-weight: 550;
  text-wrap: balance;
}
.hero .lede {
  grid-column: 1;
  max-width: 47ch;
  margin: 34px 0 0;
  font-size: clamp(1.08rem, 1.7vw, 1.32rem);
  line-height: 1.58;
}
.hero-cta { grid-column: 1; justify-content: flex-start; margin-top: 34px; }
.hero-note { grid-column: 1; justify-content: flex-start; margin-top: 20px; }
.hero-shot {
  grid-column: 2;
  grid-row: 1 / span 4;
  width: min(100%, 380px);
  max-width: none;
  margin: 0;
  justify-self: center;
  transform: rotate(2.4deg);
}
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 7% -18% -5% -20%;
  border-radius: 52% 48% 46% 54% / 45% 52% 48% 55%;
  background: rgba(255,248,238,.72);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 30px 100px rgba(97,62,47,.12);
  transform: rotate(-4deg);
}
.hero-shot .mount .shot { border-radius: 42px; }
.hero-shot .bot-hero-l { left: -135px; bottom: -30px; }
.hero-shot .bot-hero-r { right: -110px; top: -65px; }

.trust { border-block: 1px solid var(--hairline); background: rgba(255,248,238,.32); }
.trust-inner { max-width: 1320px; padding-block: 25px; }
.trust-item { font-size: .88rem; }

section { position: relative; }
.keys { padding-block: clamp(100px, 12vw, 170px); }
.section-head { margin-bottom: clamp(52px, 7vw, 90px); }
.section-head h2 { font-size: clamp(2.8rem, 5.8vw, 5.4rem); line-height: .98; letter-spacing: -.045em; }
.section-head p { font-size: 1.14rem; }

.key-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.key {
  grid-column: span 3;
  min-height: 340px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,248,238,.72), rgba(255,248,238,.28));
  box-shadow: 0 18px 60px rgba(70,44,33,.06);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.key:nth-child(1), .key:nth-child(6) { grid-column: span 6; }
.key:hover { transform: translateY(-8px) rotate(.25deg); box-shadow: 0 30px 70px rgba(70,44,33,.11); }
.key h3 { font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.08; }
.key p { font-size: 1rem; }
.k-ico { width: 54px; height: 54px; border-radius: 18px; }

.band-alt { background: color-mix(in srgb, var(--cream-hi) 46%, var(--paper)); }
.row {
  min-height: 720px;
  gap: clamp(50px, 9vw, 140px);
  border-top: 1px solid var(--hairline-2);
}
.row-text h3 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: .96; letter-spacing: -.04em; }
.row-text > p:not(.quote):not(.tier) { font-size: 1.12rem; }
.quote { font-size: 1.32rem; line-height: 1.45; }
.row-art { width: 100%; max-width: 370px; justify-self: center; }
.row-art .mount { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.row-art:hover .mount { transform: translateY(-10px) rotate(-1deg); }
.row.flip .row-art:hover .mount { transform: translateY(-10px) rotate(1deg); }
.row.wide-art .row-art { max-width: 570px; }

.tiers { gap: 22px; }
.tier-card {
  border-radius: 32px;
  padding: clamp(30px, 5vw, 54px);
  background: rgba(255,248,238,.52);
  box-shadow: 0 22px 60px rgba(66,43,33,.07);
}
.tier-card.featured {
  transform: translateY(-12px);
  background: linear-gradient(145deg, rgba(185,93,112,.15), rgba(255,248,238,.72));
}

.cta-card {
  border-radius: 38px;
  padding: clamp(48px, 8vw, 100px);
  overflow: hidden;
  background: linear-gradient(135deg, #44342c 0%, #392820 55%, #5b3039 100%);
  color: #fff8ee;
  box-shadow: 0 40px 100px rgba(55,31,25,.24);
}
.cta-card .eyebrow, .cta-card p { color: rgba(255,248,238,.72); }
.cta-card .btn-primary { background: #fff1e6; color: #422c28; }

.doc-head { padding-top: clamp(110px, 14vw, 180px); }
.doc-head h1 { font-size: clamp(3.4rem, 7vw, 6.4rem); line-height: .95; letter-spacing: -.05em; }
.doc { background: rgba(255,248,238,.35); border: 1px solid rgba(255,255,255,.5); border-radius: 32px; padding: clamp(28px, 5vw, 60px); }
.faq, .contact-card, .callout { border-radius: 22px; }
.gallery { gap: 22px; }
.gallery .mount { transition: transform .35s ease; }
.gallery .mount:hover { transform: translateY(-8px) rotate(1deg); }

footer { margin-top: clamp(90px, 12vw, 160px); border-top: 1px solid var(--hairline); background: rgba(46,37,31,.035); }

.reveal { transform: translateY(30px) scale(.985); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { transform: none; }

/* No dark scheme. The design rests on a light photographic meadow with dark
   ink set over it, and there is no dark variant of that artwork. The previous
   dark block darkened only the nav, cards and CTA while the palette tokens
   above stayed light, which left dark text on dark chrome -- 1.43:1 against
   the 4.5:1 WCAG AA needs. Committing to one scheme is the honest fix.
   Restoring dark mode properly needs a dark meadow image first. */


@media (max-width: 920px) {
  .hero { min-height: auto; grid-template-columns: 1fr .72fr; column-gap: 32px; padding-top: 130px; }
  .hero h1 { font-size: clamp(3.4rem, 9vw, 5.7rem); }
  .hero-shot { width: min(100%, 320px); }
  .key { grid-column: span 6; }
  .key:nth-child(1), .key:nth-child(6) { grid-column: span 6; }
}

@media (max-width: 700px) {
  header.nav { top: 8px; width: calc(100% - 16px); }
  .nav-inner { padding: 7px 8px 7px 13px; }
  .nav-links { display: none; }
  header.nav .btn { min-height: 40px; padding-inline: 15px; font-size: .82rem; }
  .wordmark { font-size: 1.17rem; }
  .brand svg { width: 29px; height: 29px; }
  .hero { display: flex; flex-direction: column; align-items: flex-start; padding: 110px 22px 70px; }
  .hero .flower { width: 58px; height: 58px; }
  .hero h1 { font-size: clamp(3.3rem, 16vw, 5.2rem); }
  .hero .lede { margin-top: 26px; }
  .hero-shot { order: 6; align-self: center; width: min(80vw, 310px); margin: 80px auto 0; }
  .hero-note { justify-content: flex-start; }
  .trust-inner { align-items: flex-start; }
  .key-grid { display: grid; grid-template-columns: 1fr; }
  .key, .key:nth-child(1), .key:nth-child(6) { grid-column: auto; min-height: auto; }
  .row { min-height: 0; padding-block: 80px; }
  .row-text h3 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .tier-card.featured { transform: none; }
  .cta-card { border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Light-only, enforced ─────────────────────────────────────────────
   site.css and feature-carousel.css still carry dark-scheme blocks from
   the previous design. Those tokens are overridden by the light :root
   above, so under a dark OS setting they used to darken chrome while the
   page stayed light. This restates the light values last so both schemes
   render identically until a dark meadow image exists. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #f2e5da;
    --paper-deep: #ead9ca;
    --cream-hi: #fff8ee;
    --ink: #2e251f;
    --ink-soft: #65564a;
    --ink-light: #8b796b;
    --hairline: rgba(58, 46, 37, .16);
    --hairline-2: rgba(58, 46, 37, .08);
    --rose: #a94f62;
  }
  .btn-primary { color: #fff8f4; }
  .botanical, .bot-row { opacity: 1; }
  .device-gallery-stage { border-color: var(--hairline-2); }
  .device-gallery-slide {
    border-color: var(--hairline);
    background: var(--paper-deep);
    box-shadow: var(--mount-shadow);
  }
}


/* Icon tints as classes, not inline styles. `style-src 'self'` blocks style
   attributes, so the color-mix backgrounds silently computed to transparent
   and every key-feature chip rendered with no tint at all. */
.k-ico--rose { background: color-mix(in srgb, var(--rose) 22%, var(--paper-deep)); }
.k-ico--navy { background: color-mix(in srgb, var(--navy) 22%, var(--paper-deep)); }
.k-ico--sage { background: color-mix(in srgb, var(--sage) 22%, var(--paper-deep)); }
.k-ico--plum { background: color-mix(in srgb, var(--plum) 22%, var(--paper-deep)); }
.k-ico--mauve { background: color-mix(in srgb, var(--mauve) 22%, var(--paper-deep)); }
.k-ico--amber { background: color-mix(in srgb, var(--amber) 22%, var(--paper-deep)); }
.k-ico--blue { background: color-mix(in srgb, var(--blue) 22%, var(--paper-deep)); }
.k-ico--stem { background: color-mix(in srgb, var(--stem) 22%, var(--paper-deep)); }
.row--spaced { margin-top: 96px; }

/* Long unbreakable strings (the support address, URLs) overflowed the
   narrowest phones on /privacy and /terms. */
.doc a, .doc strong, .doc code, .contact-card a, .ct-email {
  overflow-wrap: anywhere;
}

/* Apple glyph inside the App Store buttons */
.btn .apple-glyph{
  width:1.05em; height:1.05em; flex:0 0 auto;
  margin-right:.1em; margin-top:-.12em;
}
.btn .apple-glyph + span{ display:inline-block }

/* ═══ Offer page ═════════════════════════════════════════════
   A landing page, not a document: the code is the hero, and the
   sections below it answer "what do I get" and "how do I do it".
   ════════════════════════════════════════════════════════════ */
.offer-hero {
  text-align: center;
  padding-top: clamp(110px, 14vw, 180px);
  padding-bottom: clamp(56px, 7vw, 88px);
}
.offer-hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  margin-top: 16px;
}
.offer-hero .lede {
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 22px auto 0;
}

/* The voucher: the code taped down like everything else on this site */
.voucher {
  position: relative;
  max-width: 540px;
  margin: clamp(42px, 6vw, 64px) auto 0;
  padding: 46px 28px 32px;
  background: var(--cream-hi);
  border: 1px solid var(--hairline);
  border-radius: 28px;
  box-shadow: var(--mount-shadow);
}
.voucher .tape {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 122px;
  height: auto;
  transform: translateX(-50%) rotate(-3deg);
  pointer-events: none;
  opacity: 0.94;
}
.voucher .flower-sm { display: block; width: 44px; height: 44px; margin: 0 auto 14px; }
.voucher-line {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.08rem;
  color: var(--rose);
}
.voucher-code {
  display: block;
  max-width: 330px;
  margin: 16px auto 24px;
  padding: 15px 18px;
  border: 1px dashed color-mix(in srgb, var(--rose) 45%, transparent);
  border-radius: 14px;
  background: var(--paper-deep);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--rose);
}
.voucher-cta { display: flex; justify-content: center; }
@media (max-width: 480px) {
  .voucher-cta .btn { width: 100%; justify-content: center; }
}
.voucher-note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-light);
  max-width: 40ch;
  margin: 18px auto 0;
}

/* The offer, with the app scattered around it like a scrapbook page.
   The shots are decoration set around the voucher: they never take a click,
   and they sit below it, so nothing can cover the code or the button. */
.offer-stage { position: relative; }
@media (min-width: 1181px) {
  /* room above and below the offer for the outer shots to sit in */
  .offer-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1280px;
  }
  .offer-stage-core { flex: 0 0 600px; }
}
.offer-stage-core {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}
.offer-shot {
  position: absolute;
  z-index: 1;
  margin: 0;
  width: var(--shot-w, 148px);
  pointer-events: none;
}
.offer-shot .shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--hairline);
  box-shadow: var(--mount-shadow);
  background: var(--cream-hi);
}
.offer-shot .tape {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 92px;
  height: auto;
  transform: translateX(-50%) rotate(-6deg);
  z-index: 2;
  opacity: 0.92;
}
.os-watch .shot { border-radius: 22px; }

/* A label written on the tape, the way a photograph gets one in an album */
.offer-shot figcaption {
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 3;
  width: 92px;
  height: 21px;
  display: grid;
  place-items: center;
  transform: translateX(-50%) rotate(-6deg);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 7.4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(46, 37, 31, .78);
  pointer-events: none;
}

/* Arbitrary inclines: the printed book across the top, the phones down
   each side clear of one another, the watch pieces beneath the offer. A
   rotated box is wider than the image, so the offsets leave room for the
   corners to swing without reaching the voucher or the edge of the page. */
.os-11 { --shot-w: 420px; left: 50%; top: 0;   transform: translateX(-50%) rotate(-2deg); }
.os-1  { --shot-w: 130px; left: 4px;   top: 13%; transform: rotate(-6.5deg); }
.os-2  { --shot-w: 112px; left: 60px;  top: 38%; transform: rotate(4.5deg); }
.os-3  { --shot-w: 118px; left: 0;     top: 59%; transform: rotate(-3.5deg); }
.os-4  { --shot-w: 104px; left: 56px;  top: 81%; transform: rotate(6deg); }
.os-5  { --shot-w: 124px; right: 6px;  top: 13%; transform: rotate(6.5deg); z-index: 2; }
.os-6  { --shot-w: 112px; right: 62px; top: 39%; transform: rotate(-5deg); }
.os-7  { --shot-w: 116px; right: 0;    top: 60%; transform: rotate(7deg); }
.os-8  { --shot-w: 102px; right: 58px; top: 82%; transform: rotate(-4deg); }
.os-9  { --shot-w: 84px;  left: 33%;   top: 90%; transform: rotate(8deg); }
.os-10 { --shot-w: 74px;  right: 33%;  top: 91%; transform: rotate(-7deg); }
.os-spread .shot { border-radius: 10px; }
/* the watch pieces are narrower than the standard strip of tape */
.os-watch .tape, .os-watch figcaption { width: 74px; }
.os-watch figcaption { font-size: 6.8px; letter-spacing: .03em; }

/* Below the width where the offer and two columns of shots both fit, the
   scatter drops under the voucher rather than crowding it. Same page, same
   tilts — there is simply no margin left to stand them in. */
@media (max-width: 1180px) {
  /* Plain flow, not flex: the figures already follow the offer in the
     markup, so as centred inline blocks they fall into tidy rows beneath
     it. (Flex needed the core to fill its line, which its own max-width
     would not allow, and the first shot rode up beside the heading.) */
  .offer-stage { display: block; text-align: center; }
  .offer-stage-core { margin: 0 auto -12px; }
  .offer-shot {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: clamp(96px, 26vw, 140px);
    margin: clamp(26px, 5vw, 44px) clamp(5px, 1.4vw, 12px) 0;
    inset: auto;
  }
  .os-spread { width: clamp(200px, 62vw, 300px); }
  /* Every tilt is restated here, because the wide layout centres the
     printed spread with translateX(-50%) and in this one that would drag
     it half off the page — clipped silently, since the page clips its own
     horizontal overflow. */
  .os-1 { transform: rotate(-6deg); }
  .os-2 { transform: rotate(4deg); }
  .os-3 { transform: rotate(-3.5deg); }
  .os-4 { transform: rotate(6deg); }
  .os-5 { transform: rotate(-5deg); }
  .os-6 { transform: rotate(8deg); }
  .os-7 { transform: rotate(6.5deg); }
  .os-8 { transform: rotate(-4.5deg); }
  .os-9 { transform: rotate(7deg); }
  .os-10 { transform: rotate(-6deg); }
  .os-11 { transform: rotate(-2deg); }
}
@media (max-width: 560px) {
  .offer-shot .tape { width: 54px; top: -6px; }
}


/* How to redeem */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--paper-deep);
  border: 1px solid var(--hairline);
  border-radius: 28px;
  padding: clamp(28px, 3vw, 38px);
}
.step-n {
  display: block;
  margin-bottom: 14px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--rose) 62%, transparent);
}
.step h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.step p { font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }

.offer-more {
  margin-top: clamp(38px, 6vw, 92px);
  text-align: center;
  font-size: 1rem;
  color: var(--ink-soft);
}
.offer-fine {
  max-width: 64ch;
  margin: clamp(38px, 5vw, 60px) auto 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-light);
  text-align: center;
}
.offer-fine a { color: var(--rose); font-weight: 500; }