body{margin:0;background:#EFE3C8;color:#0e1f12;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#0e1f12;text-decoration:none}a:hover{color:#8A5518}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
::selection{background:#8A5518;color:#EFE3C8}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease, transform 0.7s ease}
[data-reveal].rv{opacity:1;transform:translateY(0)}
@keyframes heroRise{from{opacity:0;transform:translateY(46px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroBobL{0%,100%{transform:rotate(-4deg) translateY(14px)}50%{transform:rotate(-4.8deg) translateY(4px)}}
@keyframes heroBobR{0%,100%{transform:rotate(4deg) translateY(14px)}50%{transform:rotate(4.8deg) translateY(4px)}}
@keyframes popBadge{0%{opacity:0;transform:scale(0.3) rotate(10deg)}70%{transform:scale(1.12) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes stampIn{0%{opacity:0;transform:scale(2.4) rotate(14deg)}100%{opacity:1;transform:scale(1) rotate(8deg)}}
@keyframes twinkle{0%,100%{opacity:0.35;transform:scale(0.9)}50%{opacity:1;transform:scale(1.15)}}
@keyframes envIn{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}
@keyframes flapOpen{0%{transform:rotateX(0);z-index:6}55%{transform:rotateX(-180deg);z-index:6}56%{z-index:1}100%{transform:rotateX(-180deg);z-index:1}}
@keyframes cardOut{0%{transform:translateY(150px) scale(0.62)}60%{transform:translateY(-196px) scale(1.03)}100%{transform:translateY(-182px) scale(1)}}
@keyframes cardSway{0%,100%{transform:translateY(-182px) rotate(-1.2deg)}50%{transform:translateY(-192px) rotate(0.6deg)}}
@keyframes confettiFall{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:1}100%{opacity:0;transform:translate(var(--cx,0),210px) rotate(var(--cr,240deg))}}
@keyframes glowPulse{0%,100%{opacity:0.35}50%{opacity:0.7}}
@keyframes dealCard{0%{opacity:0;translate:0 150px;scale:0.55;rotate:7deg}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes radarSweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes radarPing{0%{transform:scale(0.3);opacity:0.9}100%{transform:scale(1.6);opacity:0}}
@keyframes blipPop{0%,55%{opacity:0;transform:scale(0)}62%{opacity:1;transform:scale(1.5)}70%,88%{opacity:1;transform:scale(1)}100%{opacity:0.4;transform:scale(1)}}
@keyframes floatUp{0%{opacity:0;transform:translateY(14px) scale(0.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-46px) scale(1.1) rotate(12deg)}}
@keyframes tickDraw{0%{opacity:0;transform:scale(0.4) rotate(-14deg)}55%{opacity:1;transform:scale(1.2) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes rowSettle{0%{opacity:0;transform:translateX(-14px)}100%{opacity:1;transform:translateX(0)}}
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes pinDrop{0%{opacity:0;transform:translateY(-34px) scale(0.4)}60%{opacity:1;transform:translateY(3px) scale(1.15)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes tagSpring{0%{opacity:0;transform:scale(0) rotate(-12deg)}70%{transform:scale(1.12) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes avatarPop{0%{opacity:0;transform:translateY(16px) scale(0.2)}65%{transform:translateY(-3px) scale(1.18)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes countPulse{0%{transform:scale(1)}50%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes dropIn{0%{opacity:0;transform:translateY(-46px) rotate(-3deg)}70%{opacity:1;transform:translateY(4px) rotate(1deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes stampBig{0%{opacity:0;transform:scale(2.6) rotate(18deg)}100%{opacity:1;transform:scale(1) rotate(-7deg)}}
@keyframes ringSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes shredIn{0%{opacity:0;transform:translateY(-56px) rotate(-2deg)}30%{opacity:1;transform:translateY(-56px) rotate(-2deg)}55%,70%{opacity:1;transform:translateY(0) rotate(0)}82%,100%{opacity:0;transform:translateY(26px) scaleY(0.1)}}
@keyframes shredStrip{0%,58%{opacity:0;transform:translateY(0) scaleY(0.2)}66%{opacity:1}100%{opacity:0;transform:translateY(64px) scaleY(1) rotate(var(--sr,4deg))}}
@keyframes lockClick{0%,64%{transform:scale(1) rotate(0)}72%{transform:scale(1.35) rotate(-8deg)}80%{transform:scale(0.95) rotate(4deg)}88%,100%{transform:scale(1) rotate(0)}}
[data-reveal]:not(.rv) [data-anim]{animation-play-state:paused !important}
/* Manifesto cards (Discovered/Invited/Done) rise up from below, staggered, when scrolled into view.
   Uses the independent `translate` property so each card keeps its inline rotate tilt. */
[data-reveal^="mcard-"]{translate:0 78px;transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1), translate 0.9s cubic-bezier(0.22,1,0.36,1)}
[data-reveal^="mcard-"].rv{translate:0 0}
[data-reveal="mcard-2"]{transition-delay:0.13s}
[data-reveal="mcard-3"]{transition-delay:0.26s}

/* ============================ MOBILE (<=767px) ============================ */
/* The v3 pages are hand-ported with inline styles; these !important overrides
   target inline substrings to make Home / Features / FAQ responsive. */
@media (max-width:767px){
  /* NB: do NOT put overflow-x:hidden on html/body — it makes them a scroll container and BREAKS
     position:sticky (the pinboard/pin effect). The page wrapper uses overflow-x:clip, which
     contains horizontal overflow WITHOUT killing sticky. */
  /* -- typography: scale down the fixed display sizes -- */
  [style*="font-size:110px"]{font-size:46px !important}
  [style*="font-size:96px"]{font-size:44px !important}
  [style*="font-size:82px"]{font-size:37px !important}
  [style*="font-size:76px"]{font-size:35px !important}
  [style*="font-size:74px"]{font-size:35px !important}
  [style*="font-size:66px"]{font-size:33px !important}
  [style*="font-size:60px"]{font-size:32px !important}
  [style*="font-size:58px"]{font-size:31px !important}
  [style*="font-size:56px"]{font-size:30px !important}
  [style*="font-size:52px"]{font-size:38px !important}
  [style*="font-size:46px"]{font-size:29px !important}
  [style*="font-size:38px"]{font-size:23px !important}
  [style*="font-size:36px"]{font-size:25px !important}
  [style*="font-size:31px"]{font-size:24px !important}
  [style*="font-size:27px"]{font-size:22px !important}
  /* -- stack multi-column grids -- */
  [style*="grid-template-columns:1fr 1.05fr"]{grid-template-columns:1fr !important}
  /* KEEP the desktop scroll-pin / pile technique on mobile. fcards single-column (JS-touched so
     target by attribute), sticky + updateCardStack stay ON (now that overflow-x:hidden is gone). */
  [data-fcard]{grid-template-columns:1fr !important;padding:22px 16px !important;gap:12px !important}
  [style*="grid-template-columns:1.25fr 0.75fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1.1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:300px 1fr"]{grid-template-columns:1fr !important}
  /* HOW IT WORKS (mobile): pinned panel area ~= vh - 64 - header. Stacking the desktop 2-col
     (text|mock) makes content ~880px >> the panel, and justify-center clips the TOP headline.
     Fix: compact header, anchor panels to top, per-panel show [short headline + ONE mock] that
     fits; hide the long desktop body paragraphs. All 3 panels then read consistently. */
  [data-hiw] h2{font-size:21px !important;margin:0 0 4px !important;line-height:1.05 !important}
  [data-hiw] section{padding:6px 14px 2px !important}
  [style*="margin-top:12px;transform:rotate(-1.5deg)"]{display:none !important}
  /* tighten the tab row so the header is short (frees panel height) */
  [data-hiw] [style*="margin-top:22px"]{margin-top:8px !important}
  [data-hiw] button{padding:8px 15px !important;font-size:13px !important}
  [data-panel]{justify-content:flex-start !important;padding-top:4px !important;overflow:hidden !important}
  [data-panel] section > div{max-width:100% !important}
  /* DISCOVER: 2 vertical event cards (compact), no caption */
  [data-panel="d"] [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{display:grid !important;grid-template-columns:1fr !important;overflow:visible !important;gap:10px !important}
  [data-panel="d"] [style*="grid-template-columns:1fr 1fr 1fr 1fr"] > div:nth-child(n+3){display:none !important}
  [data-panel="d"] [style*="height:152px"]{height:66px !important}
  [data-panel="d"] [style*="padding:24px 26px 26px"]{padding:10px 14px 12px !important}
  [data-panel="d"] h3{font-size:19px !important;margin:0 0 3px !important}
  [data-panel="d"] button{padding:8px !important}
  [data-panel="d"] [style*="padding:28px 12px 0"]{display:none !important}
  /* INVITE: eyebrow + headline + deck + link; hide the two long body paragraphs */
  [data-panel="i"] p[style*="line-height:1.75"]{display:none !important}
  [data-panel="i"] [style*="height:430px"]{height:248px !important}
  [data-panel="i"] [data-invcard]{width:122px !important;height:216px !important;top:14px !important}
  /* CATCH: eyebrow + headline + phones; hide the body paragraph + the feature pills */
  [data-panel="c"] p[style*="line-height:1.75"]{display:none !important}
  [data-panel="c"] [style*="flex-wrap:wrap;gap:9px"]{display:none !important}
  [data-panel="c"] [style*="width:34%"]{width:42% !important}
  /* discover caption row: stack so the long script line wraps instead of overflowing off-screen */
  [style*="padding:28px 12px 0"]{flex-direction:column !important;align-items:flex-start !important}
  /* floating "keep scrolling / hover" absolute script hints -> inline, no overlap */
  [style*="position:absolute"][style*="Caveat"]{position:static !important;display:block !important;text-align:left !important;margin:8px 0 0 !important;transform:none !important;white-space:normal !important}
  /* footer: stack the bottom © / tagline row + let links breathe */
  footer [style*="justify-content:space-between"]{flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
  footer [style*="gap:26px"]{gap:14px 18px !important}
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr 1fr !important}
  [style*="grid-template-columns:repeat(7,1fr)"]{grid-template-columns:1fr 1fr !important}
  [style*="grid-template-columns:1fr 1fr;"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr 1fr;"]{grid-template-columns:1fr !important}
  /* -- reduce big paddings/gaps -- */
  [style*="padding:82px 48px"]{padding:36px 18px !important}
  [style*="padding:90px 48px"]{padding:40px 18px !important}
  [style*="padding:100px 48px"]{padding:40px 18px !important}
  [style*="padding:0 48px"]{padding:0 18px !important}
  [style*="padding:30px 48px"]{padding:20px 18px !important}
  [style*="padding:36px 48px"]{padding:20px 18px !important}
  [style*="padding:70px 48px"]{padding:38px 18px !important}
  [style*="padding:60px 48px"]{padding:34px 18px !important}
  [style*="padding:50px 48px"]{padding:30px 18px !important}
  [style*="padding:54px 58px"]{padding:26px 20px !important}
  [style*="padding:44px 64px"]{padding:26px 20px !important}
  [style*="padding:72px 76px"]{padding:34px 22px !important}
  [style*="padding:42px 46px"]{padding:22px 16px !important}
  [style*="padding:40px 60px"]{padding:22px 16px !important}
  [style*="padding:40px 44px"]{padding:22px 16px !important}
  [style*="gap:80px"]{gap:28px !important}
  [style*="gap:70px"]{gap:26px !important}
  [style*="gap:60px"]{gap:24px !important}
  [style*="gap:58px"]{gap:22px !important}
  /* -- nav: hide Get-the-app pill, tighten links -- */
  nav > div{padding:12px 16px !important;gap:8px !important}
  nav > div > div{gap:14px !important;font-size:13px !important}
  nav a[data-placement="nav"]{display:none !important}
  /* -- marquee smaller -- */
  [data-marquee] span{font-size:20px !important}
  /* -- HERO visual: show only the centre Invite phone, hidden side phones -- */
  [style*="heroRise 0.9s cubic-bezier(0.22,1,0.36,1) 0.15s"]{display:none !important}
  [style*="heroRise 0.9s cubic-bezier(0.22,1,0.36,1) 0.55s"]{display:none !important}
  [style*="z-index:3;display:flex;justify-content:center;align-self:flex-end"]{width:74% !important;max-width:280px !important}
  /* -- HOW IT WORKS pinned section: taller viewport room, deck fits -- */
  [data-hiw] [style*="height:430px"]{height:300px !important}
  [data-hiw] [style*="height:500px"]{height:300px !important}
}

/* ─────────────────────────────────────────────────────────────────────────────
   PINNED "HOW IT WORKS" ON PHONES — v13 (2026-09-16)
   The panels used to be sized in hand-tuned pixels against calc(100vh - 64px).
   On iPhone, 100vh counts the strip behind Safari's address bar, so whenever the
   bar was showing the visible area was ~100px shorter and the bottom of a panel
   was cut off (measured: a panel 780px tall inside a 692px window). Re-tuning the
   pixels fixed one phone and broke the next.
   Now: the pinned window is sized in svh (the SMALL viewport — the worst case,
   address bar visible) and everything inside scales off that, so it fits an
   iPhone SE and a Pro Max without per-device numbers. vh is declared first as a
   fallback for browsers without svh.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  /* scroll room for three panels, measured in real screens */
  [data-hiw]{ height: 300vh !important; height: 300svh !important; }

  /* the pinned window itself */
  [data-hiw] > div{
    top: 56px !important;
    height: calc(100vh - 56px) !important;
    height: calc(100svh - 56px) !important;
    overflow: hidden !important;
  }

  /* header block: let it be as short as its content, never push the panel out */
  [data-hiw] > div > section{ padding: 18px 20px 4px !important; flex: 0 0 auto !important; }
  [data-hiw] h2{ font-size: clamp(26px, 7.6vw, 34px) !important; line-height: 1.06 !important; }
  [data-hiw] [style*="letter-spacing:0.24em"]{ font-size: 12px !important; padding: 7px 16px !important; letter-spacing: .16em !important; }
  [data-hiw] button{ padding: 9px 16px !important; font-size: 14px !important; }

  /* panels: flex children that may SHRINK (min-height:0) instead of overflowing */
  [data-panel]{ min-height: 0 !important; flex: 1 1 auto !important; overflow: hidden !important; }
  [data-panel] > section{ min-height: 0 !important; padding-top: 0 !important; }
  [data-panel] section > div{ min-height: 0 !important; }

  /* pieces that were fixed pixels now scale with the small viewport */
  [data-hiw] [style*="height:430px"]{ height: min(300px, 34svh) !important; }
  [data-panel="i"] [style*="height:430px"]{ height: min(300px, 34svh) !important; }
  [data-panel="i"] [data-invcard]{ width: min(122px, 17svh) !important; height: min(216px, 30svh) !important; top: 10px !important; }
  [data-panel="d"] [style*="height:152px"]{ height: clamp(52px, 8svh, 78px) !important; }
  [data-panel="c"] [style*="width:34%"]{ width: 44% !important; }

  /* nothing under 12px on a phone (was 9.5–10.5px) */
  [data-hiw] [style*="font-size:9.5px"],
  [data-hiw] [style*="font-size:10px"],
  [data-hiw] [style*="font-size:10.5px"],
  [data-hiw] [style*="font-size:11px"],
  [data-hiw] [style*="font-size:12px"]{ font-size: 12.5px !important; line-height: 1.35 !important; }
}

/* Short phones (iPhone SE, 667px tall): the Discover panel still ran ~30px past
   the pinned window, so trim the panel's own padding and card chrome rather than
   the window. Also: inline styles here are written "font-size: 11px" WITH a space,
   which the earlier selectors missed. */
@media (max-width: 767px){
  [data-hiw] [style*="font-size: 9.5px"],
  [data-hiw] [style*="font-size: 10px"],
  [data-hiw] [style*="font-size: 10.5px"],
  [data-hiw] [style*="font-size: 11px"],
  [data-hiw] [style*="font-size: 12px"]{ font-size: 12.5px !important; line-height: 1.35 !important; }
}
@media (max-width: 767px) and (max-height: 700px){
  [data-hiw] > div > section{ padding: 12px 18px 2px !important; }
  [data-hiw] h2{ font-size: 25px !important; }
  [data-hiw] [style*="letter-spacing:0.24em"]{ display: none !important; }   /* the "How it works" pill */
  [data-hiw] button{ padding: 7px 13px !important; font-size: 13px !important; }
  [data-panel="d"] [style*="height:152px"]{ height: 46px !important; }
  [data-panel="d"] h3{ font-size: 17px !important; }
  [data-panel="d"] button{ padding: 6px !important; font-size: 13px !important; }
  [data-panel="i"] [style*="height:430px"]{ height: 26svh !important; }
  [data-panel="c"] [style*="width:34%"]{ width: 38% !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATURES STACK ON PHONES — v13 (2026-09-16)
   Nine sticky cards, each 670–770px tall on an 844px phone, with sticky tops
   climbing 84→172px. Card N therefore never fit under card N-1: the pile ran off
   the bottom, the JS dimmed the ones behind, and the page read as broken.
   Keep the stack, make each card FIT: tops start under the nav and step 6px per
   card, the card is capped to the small viewport, the bullet list shows its
   first two lines and the mock is capped to a third of the screen.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px){
  /* the sticky wrappers (inline top:84px…172px → 60px + 6px per card) */
  section > div[style*="position:sticky"][style*="margin-bottom:40px"]{ margin-bottom: 22px !important; }
  section > div[style*="position:sticky"]:nth-of-type(1){ top: 60px !important; }
  section > div[style*="position:sticky"]:nth-of-type(2){ top: 66px !important; }
  section > div[style*="position:sticky"]:nth-of-type(3){ top: 72px !important; }
  section > div[style*="position:sticky"]:nth-of-type(4){ top: 78px !important; }
  section > div[style*="position:sticky"]:nth-of-type(5){ top: 84px !important; }
  section > div[style*="position:sticky"]:nth-of-type(6){ top: 90px !important; }
  section > div[style*="position:sticky"]:nth-of-type(7){ top: 96px !important; }
  section > div[style*="position:sticky"]:nth-of-type(8){ top: 102px !important; }
  section > div[style*="position:sticky"]:nth-of-type(9){ top: 108px !important; }

  /* the card itself: never taller than what's left of the screen under its top */
  [data-fcard]{
    max-height: calc(100vh - 150px) !important;
    max-height: calc(100svh - 150px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    align-content: start !important;
    padding: 18px 16px !important;
    gap: 10px !important;
    border-radius: 22px !important;
  }
  [data-fcard] > div{ min-height: 0 !important; }
  /* number + heading + paragraph, tightened */
  [data-fcard] p[style*="font-size:52px"]{ font-size: 28px !important; margin: 0 0 4px !important; }
  [data-fcard] p[style*="font-size:52px"] span{ font-size: 20px !important; }
  [data-fcard] h2{ font-size: 22px !important; line-height: 1.12 !important; margin: 0 0 8px !important; }
  /* the paragraph shows in FULL (owner: no cut-off text); the bullet list is the
     detail that goes, and the mock is scaled down whole rather than cropped */
  [data-fcard] p[style*="line-height:1.7"]{ font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 6px !important; }
  [data-fcard] ul{ display: none !important; }
  [data-fcard] > div:last-child{ zoom: 0.78; max-height: none !important; overflow: visible !important; }
  /* the "keep scrolling" handwritten note overlapped the intro on narrow screens */
  section span[style*="font-family:'Caveat'"][style*="top:200px"]{ position: static !important; display: block !important; margin-top: 10px !important; transform: none !important; font-size: 21px !important; }
}

/* Features stack, polish: the capped mock column ended in a hard slice through
   whatever element sat at the cut; fade it out instead. And lift the mock UI's
   10–11.5px labels to 12px (both "font-size:10px" and "font-size: 10px" spellings). */
@media (max-width: 767px){
  /* (mask removed 2026-09-16 — it read as cut-off text) */
  [data-fcard] [style*="font-size:10px"], [data-fcard] [style*="font-size: 10px"],
  [data-fcard] [style*="font-size:10.5px"], [data-fcard] [style*="font-size: 10.5px"],
  [data-fcard] [style*="font-size:11px"], [data-fcard] [style*="font-size: 11px"],
  [data-fcard] [style*="font-size:11.5px"], [data-fcard] [style*="font-size: 11.5px"]{ font-size: 12px !important; }
}

/* Hero invite deck: the "Ava said yes" RSVP chip sits at the deck's bottom edge and
   was cropped by the deck's overflow:hidden on every size. */
[style*="height:430px"][style*="overflow:hidden"], [data-hiw] [style*="height:430px"]{ overflow: visible !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   PHONE FIXES v14 (2026-09-16) — text running off the right edge + the header
   • "Discovered. Invited. Done." words and the three cards below them kept their
     desktop sizes on phones: the 3-column grid was never collapsed and the words
     never scaled, so they ran to x≈438 on a 390px screen and the page wrapper's
     overflow-x:clip cut them off. (Measured: h3 right edge 399–407px.)
   • Header: 50px logo + 36px wordmark + three links crammed, "Get the app" hidden,
     and an 88% translucent bar that let dark panels bleed through.
   ──────────────────────────────────────────────────────────────────────────── */
nav[style*="position:sticky"]{ background: rgba(239, 227, 200, 0.97) !important; }
@media (max-width: 767px){
  [style*="grid-template-columns:1fr 1fr 1fr"]{ grid-template-columns: 1fr !important; gap: 16px !important; }
  [data-reveal="manifesto-words"] p{ font-size: clamp(34px, 11.5vw, 46px) !important; line-height: 1.05 !important; }
  [data-reveal^="mcard-"]{ max-width: 100% !important; box-sizing: border-box !important; }
  [data-reveal^="mcard-"] h3{ font-size: 22px !important; }
  [data-reveal^="mcard-"] p{ font-size: 14.5px !important; }
  /* header */
  nav > div{ padding: 10px 14px !important; gap: 6px !important; }
  nav img[alt="Calla"]{ width: 34px !important; height: 34px !important; border-radius: 9px !important; }
  nav > div > a:first-child span{ font-size: 24px !important; }
  nav > div > div{ gap: 9px !important; font-size: 12.5px !important; }
  nav a[data-placement="nav"]{ display: inline-block !important; padding: 7px 11px !important; font-size: 12px !important; margin-left: 2px !important; white-space: nowrap; }
}

/* Mock-UI labels at 9.5–11.5px inside the feature cards read as illegible on
   desktop too (owner rule: no tiny text) — lifted everywhere, not just phones. */
[data-fcard] [style*="font-size:10px"], [data-fcard] [style*="font-size: 10px"],
[data-fcard] [style*="font-size:10.5px"], [data-fcard] [style*="font-size: 10.5px"],
[data-fcard] [style*="font-size:11px"], [data-fcard] [style*="font-size: 11px"],
[data-fcard] [style*="font-size:11.5px"], [data-fcard] [style*="font-size: 11.5px"]{ font-size: 12px !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   PHASE 1 MERGE (2026-09-16): invitations-first hero CTA + install bar on the v3
   page. Same markup contract as the live homepage (index.astro) so the store-tap
   tracking keeps working: badges inside [data-placement="home_hero"], the
   other-store link under "home_hero_alt", the bar under "home_sticky".
   Device: html[data-device] is stamped by an inline script in <head>.
   ──────────────────────────────────────────────────────────────────────────── */
.hs-cta{ display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin:6px 0 0 }
.hs-badges{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap }
.hs-badge{ display:inline-block; line-height:0; border-radius:9px; transition:transform .15s ease, box-shadow .15s ease }
.hs-badge img{ display:block; height:56px; width:auto }
.hs-badge:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(0,0,0,.5) }
.hs-micro{ font-size:13.5px; color:#2a342c; margin:12px 0 0 }
.hs-micro a{ color:#0e1f12; font-weight:700; text-decoration:underline; text-underline-offset:3px }
.hs-alt, .hs-alt--gp, .hs-alt--ios{ display:none }
html[data-device="ios"] .hs-badge--gp, html[data-device="android"] .hs-badge--ios{ display:none }
html[data-device="ios"] .hs-alt, html[data-device="android"] .hs-alt,
html[data-device="ios"] .hs-alt--gp, html[data-device="android"] .hs-alt--ios{ display:inline }
/* install bar (phones only; shown by src/lib/installBar.js after the hero badge scrolls off) */
.ib{ position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:70;
  display:none; align-items:center; gap:11px; max-width:520px; margin:0 auto; padding:9px 10px 9px 6px;
  border-radius:18px; border:1px solid rgba(14,31,18,.14); background:rgba(251,245,230,.97);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 18px 40px -14px rgba(0,0,0,.55);
  color:#0e1f12; font-family:'DM Sans',system-ui,sans-serif; transform:translateY(140%); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease }
html[data-device="ios"] .ib, html[data-device="android"] .ib{ display:flex }
.ib.is-on{ transform:none; opacity:1; pointer-events:auto }
@media (min-width:900px){ html[data-device] .ib{ display:none } }
@media (prefers-reduced-motion:reduce){ .ib{ transition:none } }
.ib-x{ flex:none; width:26px; height:32px; padding:0; border:0; background:none; color:#7a8a7c; font-size:20px; line-height:1; cursor:pointer }
.ib img{ flex:none; width:42px; height:42px; border-radius:10px }
.ib-t{ flex:1; min-width:0; line-height:1.2 }
.ib-t b{ display:block; font-size:15px; font-weight:700 }
.ib-t span{ display:block; font-size:12.5px; color:#3d4c3f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ib-get{ flex:none; background:#0e1f12; color:#EFE3C8; text-decoration:none; font-size:15px; font-weight:700; padding:9px 22px; border-radius:999px }
.ib-get--gp{ display:none }
html[data-device="android"] .ib-get--ios{ display:none }
html[data-device="android"] .ib-get--gp{ display:inline-block }
@media (max-width:767px){ .hs-badge img{ height:52px } }

/* The "Week: handled" stamp on the Done card is pinned at right:-8px; on a phone
   that hangs it 34px past the screen edge once it reveals. Tuck it inside. */
@media (max-width:767px){ span[style*="right: -8px"][style*="top: 26px"]{ right: 6px !important; } }
/* hero pill wrapped to two lines on phones */
@media (max-width:767px){ main > section:first-child span[style*="letter-spacing:0.24em"]{ font-size: 12px !important; letter-spacing: .14em !important; padding: 7px 14px !important; white-space: nowrap; } }

/* ROUND 3b (2026-09-16) — compact page ending on phones. Owner: "footer looks too big,
   like one screen". The dark download card ran edge-to-edge into the dark footer, so the
   last screen read as one huge footer: frame the card in cream again + shrink the footer. */
@media (max-width:767px){
  section[data-dl]{padding:24px 14px 30px !important}
  section[data-dl] > div{padding:32px 20px 26px !important;border-radius:26px !important}
  footer{margin-top:0 !important}
  footer > div{padding:22px 20px 18px !important}
  footer > div > div:first-child{padding-bottom:12px !important;gap:10px !important}
  footer img{width:26px !important;height:26px !important}
  footer span[style*="font-size:27px"]{font-size:21px !important}
  footer [style*="gap:26px"]{gap:6px 14px !important;font-size:13px !important}
  footer > div > div:last-child{padding-top:10px !important;gap:4px !important}
  footer p[style*="Caveat"]{font-size:15px !important}
}

/* FAQ section headings ("Privacy & data", "Pricing & availability") are a sticky side
   column on desktop; once the grid stacks on phones the sticky h2 slid over the answers
   below it (owner 2026-09-16). Let it scroll with the page there. */
@media (max-width:767px){
  h2[style*="position:sticky"]{ position:static !important; margin-bottom:6px !important; font-size:30px !important }
}

/* 2026-09-16: "Pricing" joined the nav → on phones ≤420px the row was 6–21px too wide and
   clipped "Get the app". Keep every link; drop the wordmark (the logo stays). */
@media (max-width:420px){
  nav > div > a:first-child span{ display:none !important; }
  nav > div > div{ gap: 10px !important; }
}
@media (max-width:340px){
  nav > div{ padding: 10px 10px !important; gap: 4px !important; }
  nav > div > div{ gap: 7px !important; font-size: 11.5px !important; }
  nav a[data-placement="nav"]{ padding: 6px 8px !important; font-size: 12px !important; }
}


/* ── AUDIT FIXES 2026-09-16 (independent audit, backlog 14e9f38f) ─────────────────────── */
/* hero trust chips: live App Store rating + no ads */
.hs-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:14px 0 0 }
.hs-trust > span{ display:inline-flex; align-items:center; gap:6px; background:#FBF5E6; border:1px solid rgba(14,31,18,.14); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; color:#18271a }
.hs-trust .stars{ color:#9C6B1E; letter-spacing:1px }
/* mid-page ask inside the Invite panel */
.inv-ask{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px }
.inv-ask-btn{ display:inline-flex; align-items:center; min-height:48px; background:#D6A85B; color:#0e1f12 !important; padding:12px 24px; border-radius:999px; font-size:16px; font-weight:600; text-decoration:none; box-shadow:5px 6px 0 rgba(0,0,0,.25) }
.inv-ask-btn b{ font-weight:800; margin-right:4px }
/* features: invite ask + Free/Premium labels */
.fc-ask{ margin-top:18px }
.fc-ask a{ display:inline-flex; align-items:center; min-height:46px; background:#D6A85B; color:#0e1f12; padding:11px 22px; border-radius:999px; font-size:15px; font-weight:600; text-decoration:none }
.fc-ask b{ font-weight:800; margin-right:4px }
.plan-pill{ display:inline-block; vertical-align:middle; margin-left:12px; font-family:'DM Sans',system-ui,sans-serif; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:5px 11px; border-radius:999px; line-height:1.2 }
.plan-pill--free{ background:rgba(239,227,200,.16); color:#EFE3C8; border:1px solid rgba(239,227,200,.4) }
.plan-pill--premium{ background:#D6A85B; color:#0e1f12 }
/* occasion links under the closing card (SEO crawl paths from the homepage) */
.occ{ margin:28px auto 0; text-align:center; max-width:900px }
.occ p{ font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:24px; margin:0 0 12px; color:#18271a }
.occ div{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.occ a{ display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border-radius:999px; border:1px solid rgba(14,31,18,.18); background:#FBF5E6; color:#18271a; font-size:14px; font-weight:600; text-decoration:none }
/* FAQ accordions */
.fq{ border-bottom:1px solid rgba(14,31,18,.14) }
.fq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; min-height:44px }
.fq summary::-webkit-details-marker{ display:none }
.fq summary::after{ content:"+"; flex:none; font-size:28px; line-height:1; color:#8A5518 }
.fq[open] summary::after{ content:"–" }
.fq summary:focus-visible{ outline:2px solid #0e1f12; outline-offset:4px; border-radius:6px }
.fq-a{ padding:0 0 22px }
.fq-sec h2{ scroll-margin-top:80px }

@media (max-width:767px){
  /* QR codes can't be scanned by the phone showing them */
  [data-qr]{ display:none !important }
  /* 44px tap targets without changing the header's height */
  nav > div > div > a:not([data-placement="nav"]){ padding:13px 0 !important; margin:-13px 0 !important }
  .ib-get{ padding:13px 22px; line-height:18px }
  .ib-x{ width:36px; height:44px }
  .plan-pill{ margin-left:8px; font-size:12px; padding:4px 9px }
  .occ p{ font-size:21px }
  .fq summary h3{ font-size:21px !important }
}

/* bigger hit areas for the header logo + "Get the app" without growing the header */
nav > div > a:first-child, nav a[data-placement="nav"]{ position:relative }
nav > div > a:first-child::after, nav a[data-placement="nav"]::after{ content:""; position:absolute; inset:-8px -4px }
/* inline text links in the pinned panels / privacy card: taller tap area */
.inv-ask-browse, [data-reveal="privacy"] a{ display:inline-block; padding:9px 0 }
@media (max-width:767px){ nav > div > div > a:not([data-placement="nav"]){ font-size:12.5px !important } }

/* ── OWNER PHONE REVIEW 2026-09-16 ───────────────────────────────────────────────────────
   official store badges everywhere, full-width feature cards, less crowded FAQ/pricing */
.dl-badges a{ display:inline-block; line-height:0; border-radius:10px }
.dl-badges img{ height:54px; width:auto; display:block }
@media (max-width:767px){
  .dl-badges img{ height:50px }
  /* feature cards: same width as the closing card (the desktop 48px side padding made them 294px) */
  [data-fcard-stage], section:has(> div > [data-fcard]){ padding:24px 14px 26px !important }
  [data-fcard]{ border-radius:26px !important }
  /* FAQ: more air */
  .fq-sec{ padding:40px 20px 36px !important; gap:10px !important }
  .fq-sec h2{ font-size:32px !important; margin:0 0 6px !important }
  .fq summary{ padding:22px 0 !important }
  .fq summary h3{ font-size:20px !important; line-height:1.3 !important }
  .fq-a p{ font-size:16px !important; line-height:1.7 !important }
  .fq-a{ padding:0 0 26px !important }
}

/* Playfair Display is wider than the old condensed serif: keep big words and the nav inside 320–390px */
@media (max-width:767px){
  [style*="font-size:110px"]{ font-size:min(46px, 12.5vw) !important }
  span[style*="right:-8px"][style*="top:26px"]{ right:6px !important }
}
@media (max-width:340px){
  nav img[alt="Calla"]{ width:28px !important; height:28px !important }
  nav > div > div{ gap:5px !important }
  nav > div > div > a:not([data-placement="nav"]){ font-size:12px !important }
  nav a[data-placement="nav"]{ padding:6px 7px !important; font-size:12px !important }
  main > section:first-child span[style*="letter-spacing:0.24em"]{ white-space:normal !important; letter-spacing:.1em !important }
}
@media (max-width:767px){
  /* "Discovered. Invited. Done." block kept 48px desktop side padding (Done. ran off a 320px screen) */
  section:has(> [data-reveal="manifesto-words"]){ padding-left:18px !important; padding-right:18px !important }
  [data-reveal="manifesto-words"]{ max-width:100% }
}
@media (max-width:767px){
  /* trio cards must be allowed to shrink (one had a 308px minimum → section 344px on a 320px phone) */
  [data-reveal="manifesto-words"] ~ div[style*="grid-template-columns:1fr 1fr 1fr"],
  section:has(> [data-reveal="manifesto-words"]) div[style*="grid-template-columns"]:not([data-weekstrip]){ grid-template-columns:minmax(0,1fr) !important }
  [data-reveal^="mcard-"]{ min-width:0 !important; max-width:100% !important }
  [data-reveal^="mcard-"] *{ min-width:0 }
}

/* Owner 2026-09-16: "keep some space between cards when stacked, so each card's colour shows".
   Features: 14px steps (was 6px). Cards stay capped so the deepest one still clears the install bar. */
@media (max-width:767px){
  section > div[style*="position:sticky"]:nth-of-type(1){ top: 60px !important; }
  section > div[style*="position:sticky"]:nth-of-type(2){ top: 74px !important; }
  section > div[style*="position:sticky"]:nth-of-type(3){ top: 88px !important; }
  section > div[style*="position:sticky"]:nth-of-type(4){ top: 102px !important; }
  section > div[style*="position:sticky"]:nth-of-type(5){ top: 116px !important; }
  section > div[style*="position:sticky"]:nth-of-type(6){ top: 130px !important; }
  section > div[style*="position:sticky"]:nth-of-type(7){ top: 144px !important; }
  section > div[style*="position:sticky"]:nth-of-type(8){ top: 158px !important; }
  section > div[style*="position:sticky"]:nth-of-type(9){ top: 172px !important; }
  [data-fcard]{ max-height: calc(100svh - 268px) !important; }
  /* privacy card: allow its columns and chips to shrink on 320px phones */
  [data-reveal="privacy"] *{ min-width:0 }
  [data-reveal="privacy"] div[style*="grid-template-columns"]{ grid-template-columns:minmax(0,1fr) !important }
  [data-reveal="privacy"]{ padding-left:12px !important; padding-right:12px !important }
}
/* short phones (iPhone SE class): tighter 8px steps so every card still fits under its top */
@media (max-width:767px) and (max-height:700px){
  section > div[style*="position:sticky"]:nth-of-type(2){ top: 68px !important; }
  section > div[style*="position:sticky"]:nth-of-type(3){ top: 76px !important; }
  section > div[style*="position:sticky"]:nth-of-type(4){ top: 84px !important; }
  section > div[style*="position:sticky"]:nth-of-type(5){ top: 92px !important; }
  section > div[style*="position:sticky"]:nth-of-type(6){ top: 100px !important; }
  section > div[style*="position:sticky"]:nth-of-type(7){ top: 108px !important; }
  section > div[style*="position:sticky"]:nth-of-type(8){ top: 116px !important; }
  section > div[style*="position:sticky"]:nth-of-type(9){ top: 124px !important; }
  [data-fcard]{ max-height: calc(100svh - 216px) !important; }
  [data-fcard] > div:last-child{ zoom: 0.62 !important; }
}

/* manifesto words: less empty space around them on phones */
@media (max-width:767px){
  section:has(> [data-reveal="manifesto-words"]){ padding-top:56px !important; padding-bottom:40px !important }
}
@media (max-width:767px){
  .occ{ margin-top:22px }
  .occ p{ font-size:19px !important; margin-bottom:10px }
  .occ div{ gap:6px }
  .occ a{ min-height:36px; padding:6px 11px; font-size:13px }
}

/* audit #2 (2026-09-16): inline Premium label, real App Store reviews under the trio cards,
   and room under the "Done" card so it is fully read before the privacy card slides over */
.plan-pill--inline{ font-size:12px; padding:3px 9px; margin-left:6px; vertical-align:4px; letter-spacing:.12em }
.v3-rev{ margin:56px auto 0; max-width:980px; text-align:center }
.v3-rev-k{ margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#8A5518 }
.v3-rev-h{ margin:8px 0 6px; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:38px; line-height:1.1 }
.v3-rev-h em{ color:#8A5518 }
.v3-rev-rating{ margin:0 0 20px; display:flex; justify-content:center }
.v3-rev-rating > span{ display:inline-flex; align-items:center; gap:6px; background:#FBF5E6; border:1px solid rgba(14,31,18,.14); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600 }
.v3-rev-rating .stars{ color:#9C6B1E; letter-spacing:1px }
.v3-rev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; text-align:left }
.v3-rev-grid figure{ margin:0; background:#FBF5E6; border:1px solid rgba(14,31,18,.12); border-radius:22px; padding:22px 22px 18px; box-shadow:8px 10px 0 rgba(14,31,18,.08) }
.v3-rev-stars{ color:#9C6B1E; letter-spacing:.16em; font-size:15px }
.v3-rev-grid blockquote{ margin:10px 0 12px; font-size:16px; line-height:1.65; color:#18271a }
.v3-rev-grid figcaption{ font-size:13px; color:#4b5a4d; font-weight:600 }
@media (max-width:767px){
  .v3-rev{ margin-top:40px }
  .v3-rev-h{ font-size:28px }
  .v3-rev-grid{ grid-template-columns:minmax(0,1fr) }
  section:has(> [data-reveal="manifesto-words"]){ padding-bottom:120px !important }
  .pr .hs-cta, .hs-cta{ margin-top:14px }
}

/* ── P2 (2026-09-16) ─────────────────────────────────────────────────────────────── */
/* features: "Also in Calla" (Living Cards, party photo album, browser app) */
.also{ max-width:1180px; margin:0 auto; padding:10px 48px 30px }
.also-k{ margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#8A5518 }
.also-h{ margin:8px 0 22px; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:40px; line-height:1.1 }
.also-h em{ color:#8A5518 }
.also-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.also-grid article{ background:#FBF5E6; border:1px solid rgba(14,31,18,.12); border-radius:22px; padding:22px; box-shadow:8px 10px 0 rgba(14,31,18,.08) }
.also-grid .plan-pill{ margin-left:0 }
.also-grid .plan-pill--free{ background:#E6D7B4; color:#0e1f12; border-color:transparent }
.also-grid h3{ margin:12px 0 6px; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:23px; line-height:1.2 }
.also-grid p{ margin:0; font-size:15.5px; line-height:1.65; color:#2a342c }
/* tap targets: footer links, the "Also on …" link and the header button get ≥44px hit areas */
footer a{ display:inline-block; padding-block:12px; margin-block:-12px }
footer div[style*="gap:26px"]{ row-gap:22px !important }
/* only the OTHER store's link shows (the device rule above decides which) */
html[data-device="ios"] .hs-alt a.hs-alt--gp, html[data-device="android"] .hs-alt a.hs-alt--ios{ display:inline-block; padding-block:13px; margin-block:-13px }
nav a[data-placement="nav"]::after{ inset:-8px -6px !important }
@media (max-width:767px){
  .also{ padding:6px 14px 20px }
  .also-h{ font-size:28px }
  .also-grid{ grid-template-columns:minmax(0,1fr); gap:12px }
  footer [style*="gap:26px"]{ row-gap:20px !important }
}

/* price display (owner 2026-09-16): "/year" is highlighted, the monthly price sits beside it */
.px-yr{ display:inline-block; margin-left:1px; padding:0 5px; border-radius:6px; background:rgba(214,168,91,.32); color:#5e3a0f; font-weight:800; line-height:1.35 }
.px-mo{ white-space:nowrap; font-weight:600 }
.fq-a .price-note{ display:block; margin-top:8px; font-size:14px; color:#4b5a4d }

/* ── audit #2 leftovers (2026-09-16) ───────────────────────────────────────────── */
/* home: strip of real invitation designs */
.ds{ margin:56px auto 0; text-align:center }
.ds-k{ margin:0 0 14px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#8A5518 }
.ds-rail{ overflow:hidden; margin:0 -48px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.ds-track{ display:flex; gap:12px; width:max-content; animation:dsScroll 60s linear infinite }
.ds-tile{ flex:none; display:block; width:120px; aspect-ratio:9/16; border-radius:14px; overflow:hidden; border:4px solid #FBF5E6; box-shadow:6px 8px 0 rgba(14,31,18,.10); background:#E6D7B4 }
.ds-tile img{ width:100%; height:100%; object-fit:cover; display:block }
.ds-more{ display:inline-block; margin-top:14px; padding:10px 0; font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:600; font-size:19px; color:#8A5518 }
@keyframes dsScroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ds-track{ animation:none } .ds-rail{ overflow-x:auto } }
/* features: real app screens */
.shots{ max-width:1180px; margin:0 auto; padding:6px 48px 10px }
.shots-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:12px }
.shots-row figure{ margin:0; text-align:center }
.shots-row img{ width:100%; max-width:240px; height:auto; border-radius:26px; border:6px solid #0e1f12; box-shadow:10px 12px 0 rgba(14,31,18,.10); display:block; margin:0 auto; background:#0e1f12 }
.shots-row figcaption{ margin-top:10px; font-size:14px; font-weight:600; color:#2a342c }
@media (max-width:767px){
  .ds{ margin-top:40px }
  .ds-rail{ margin:0 -18px }
  .ds-tile{ width:96px }
  .shots{ padding:0 14px 6px }
  .shots-row{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px }
  .shots-row figure{ flex:0 0 58%; scroll-snap-align:center }
  .shots-row img{ border-radius:22px; border-width:5px }
  /* features: the invitations card shows its first three points on phones */
  [data-fcard="2"] ul{ display:grid !important; gap:4px !important; margin-top:6px !important }
  [data-fcard="2"] ul li:nth-child(n+4){ display:none !important }
  [data-fcard="2"] ul li{ font-size:13px !important }
}
/* the strip's track is 24 tiles wide: give the rail no intrinsic width, or it stretches the section */
.ds{ min-width:0 }
.ds-rail{ width:0; min-width:calc(100% + 96px) }
@media (max-width:767px){
  .ds-rail{ min-width:calc(100% + 36px) }
  /* invitations card on phones: two points and a smaller mock so nothing is cut */
  [data-fcard="2"] ul li:nth-child(n+3){ display:none !important }
  [data-fcard="2"] > div:last-child{ zoom:0.62 !important }
}
@media (max-width:767px) and (max-height:700px){
  [data-fcard="2"] ul{ display:none !important }
}
/* short phones: smaller pictures on the trio cards so each card is readable above the install bar */
@media (max-width:767px) and (max-height:700px){
  [data-reveal^="mcard-"] > div[style*="height:"]:first-child{ height:130px !important; overflow:hidden }
  [data-reveal^="mcard-"]{ padding:22px 20px !important }
}

/* ── audit #3 (2026-09-16) ─────────────────────────────────────────────────────── */
/* nav: 44px-tall header button and links, logo hit area */
nav a[data-placement="nav"]{ min-height:44px; display:inline-flex !important; align-items:center }
nav > div > div > a:not([data-placement="nav"]){ min-height:44px; display:inline-flex; align-items:center }
nav > div > a:first-child{ min-height:44px; display:inline-flex; align-items:center }
@media (max-width:767px){ nav a[data-placement="nav"]{ min-height:40px } nav > div{ padding-block:6px !important } }
/* long inline links inside panels: taller tap areas */
[data-reveal="privacy"] a, .inv-ask-browse, .fq-a a{ display:inline-block; padding-block:10px; margin-block:-6px }
/* prices never wrap away from their "/year" */
[data-price$="-year"], .px-yr{ white-space:nowrap }
/* the App Store rating chip is App-Store-only: hide it for Android visitors */
html[data-device="android"] .rating-chip{ display:none !important }
/* FAQ: store badges under the intro */
.faq-cta{ justify-content:flex-start; margin-top:22px }
.faq-cta .hs-badges{ justify-content:flex-start }
/* home: the hero video's Premium note sits under the phone, not on the invite */
.lc-note{ display:block; margin:14px auto 0; padding:0 18px; text-align:center; font-size:13px; font-weight:600; color:#4b5a4d; position:relative; z-index:2 }
.lc-note b{ color:#5e3a0f; background:rgba(214,168,91,.32); border-radius:6px; padding:0 6px }
/* design tiles are pictures, not links */
.ds-tile{ pointer-events:none }
/* Catch (email) card: the mustard gradient was ~2.4:1 behind cream text — deepen it */
[data-fcard="3"]{ background:linear-gradient(160deg,#7a4f12 0%,#3f2807 100%) !important }
[data-fcard="3"] p, [data-fcard="3"] li{ color:rgba(251,243,228,.92) !important }

/* ── audit #4 (2026-09-16) ─────────────────────────────────────────────────────── */
.prem-line{ display:inline-block; margin:0 0 20px; background:rgba(214,168,91,.18); border:1px solid rgba(214,168,91,.5); color:#EFE3C8; border-radius:999px; padding:5px 12px; font-size:13px; font-weight:700 }
.guest-line{ margin:12px 0 0; font-size:14px; line-height:1.5; color:rgba(239,227,200,.85); max-width:420px }
.plan-pill--note{ background:transparent; color:#D6A85B; border:1px dashed rgba(214,168,91,.7); letter-spacing:.06em; text-transform:none; font-weight:700 }
.feat-cta{ justify-content:flex-start; margin-top:22px }
.feat-cta .hs-badges{ justify-content:flex-start }
/* orange (flyer) and slate (reminders) cards: body text at full strength */
[data-fcard="4"] p, [data-fcard="4"] li, [data-fcard="9"] p, [data-fcard="9"] li{ color:rgba(251,243,228,.94) !important }
[data-fcard="4"]{ background:linear-gradient(160deg,#9c4523 0%,#5f2710 100%) !important }
footer a{ padding-block:14px; margin-block:-14px }
@media (max-width:767px){ .prem-line{ font-size:12.5px } .guest-line{ font-size:13.5px } }

/* phone menu: the four links fold into "Menu" so the wordmark fits beside the logo */
.nav-more{ display:none; position:relative }
.nav-more summary{ list-style:none; cursor:pointer; min-height:40px; display:flex; align-items:center; gap:6px; padding:0 14px; border:1.5px solid rgba(14,31,18,.3); border-radius:999px; font-size:13.5px; font-weight:700 }
.nav-more summary::-webkit-details-marker{ display:none }
.nav-more summary::after{ content:"▾"; font-size:11px }
.nav-more[open] summary::after{ content:"▴" }
.nav-more-list{ position:absolute; right:0; top:calc(100% + 10px); z-index:80; min-width:190px; display:grid; padding:6px; background:#FBF5E6; border:1px solid rgba(14,31,18,.14); border-radius:16px; box-shadow:0 18px 40px -16px rgba(0,0,0,.35) }
.nav-more-list a{ padding:13px 14px; border-radius:10px; font-size:15px; font-weight:600; color:#0e1f12 }
.nav-more-list a:active{ background:#EFE3C8 }
@media (max-width:560px){
  nav > div > div > a:not([data-placement="nav"]){ display:none !important }
  .nav-more{ display:block }
  nav > div > a:first-child span{ display:inline !important; font-size:24px !important }
  nav > div > div{ gap:8px !important }
}
@media (max-width:340px){ nav > div > a:first-child span{ font-size:20px !important } .nav-more summary{ padding:0 10px } }
.nav-more:not([open]) .nav-more-list{ display:none }

/* ── audit #5 (2026-09-17) ─────────────────────────────────────────────── */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* sticky header: solid enough that scrolled text doesn't show through */
nav{ background:rgba(239,227,200,.97) !important }
.ib{ background:rgba(251,245,230,.98) !important }
/* desktop hero: QR beside the store badges (phones already have a store badge) */
.hs-qr{ display:none; align-items:center; gap:8px; padding:4px 12px 4px 4px; border-radius:12px; background:#FBF5E6; border:1px solid rgba(14,31,18,.16); font-size:12px; font-weight:700; line-height:1.2; color:#0e1f12; text-align:left }
.hs-qr img{ width:54px; height:54px; border-radius:6px; display:block }
html[data-device="desktop"] .hs-qr{ display:inline-flex }
@media (max-width:899px){ html[data-device="desktop"] .hs-qr{ display:none } }
/* closing download badges follow the device like the hero ones */
html[data-device="ios"] .dl-badges .hs-badge--gp, html[data-device="android"] .dl-badges .hs-badge--ios{ display:none !important }
/* FAQ: price inline reads as bold text, not a pill; answers at a readable measure */
.fq-a .px-yr{ background:none; padding:0; border-radius:0; color:#5e3a0f; font-weight:800 }
.fq-a p{ max-width:68ch }
.fq-a{ padding-bottom:26px }
@media (max-width:767px){
  /* the Done card's weekday strip keeps its seven columns */
  [data-weekstrip]{ grid-template-columns:repeat(7,1fr) !important }
  /* Catch panel: one readable screenshot instead of two tiny ones */
  [data-panel="c"] [data-shot="cal"]{ display:none !important }
  [data-panel="c"] [data-shot="catch"]{ width:78% !important; transform:rotate(-2deg) !important }
  /* closing card sparkle clear of the headline */
  [data-dl] span[style*="left:5%"][style*="top:18%"]{ top:6% !important; left:auto !important; right:8% !important }
}
/* features (audit #5) */
.feat-hero-shot{ display:none }
@media (min-width:1100px){
  .feat-hero-shot{ display:block; position:absolute; right:48px; top:70px; width:330px; height:360px; pointer-events:none }
  .feat-hero-shot img{ position:absolute; width:170px; height:auto; border-radius:26px; border:6px solid #FBF5E6; box-shadow:14px 16px 0 rgba(14,31,18,.10) }
  .feat-hero-shot img:first-child{ left:0; top:30px; transform:rotate(-5deg) }
  .feat-hero-shot img:last-child{ right:0; top:0; transform:rotate(4deg) }
  main[data-screen-label="Features"] > section:first-child h1{ max-width:760px !important }
}
.feat-price{ margin:-18px 0 26px; font-size:15px; color:rgba(239,227,200,.85) }
.feat-price a{ color:#D6A85B; font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline-block; padding-block:10px; margin-block:-10px }
.feat-price .px-yr{ background:none; color:inherit; padding:0 }
.feat-mini{ margin-top:18px }
.feat-mini .hs-badge img{ height:44px; width:auto }
[data-fcard] .plan-pill--free{ background:rgba(251,243,228,.22); color:#FFF8EA; border-color:rgba(251,243,228,.6) }
[data-fcard] p[style*="Caveat"][style*="#8A5518"]{ color:#F3D9A4 !important }
[data-fcard] a[href*="sample"]{ display:inline-block; padding-block:12px; margin-block:-12px }
@media (max-width:767px){
  .shots .also-k::after{ content:"  ·  swipe →"; letter-spacing:.08em }
}

/* ── self-check before audit #7 (2026-09-17) ───────────────────────────── */
/* features phone stack: at most three coloured edges show; later cards stick at the same line */
@media (max-width:767px){
  section > div[style*="position:sticky"]:nth-of-type(n+4){ top: 102px !important; }
  [data-fcard]{ max-height: calc(100svh - 198px) !important; }
}
@media (max-width:767px) and (max-height:700px){
  section > div[style*="position:sticky"]:nth-of-type(n+4){ top: 84px !important; }
}
/* tap targets: 44px minimum */
.ib-x{ min-width:44px !important; min-height:44px !important }
.nav-more summary{ min-height:44px }
.feat-mini .hs-badge img{ height:46px !important }
.feat-price a, .fq-a a, [data-reveal] a, a.inv-ask-browse, main a[href*="features"]{ padding-block:12px }
.fq-a a{ display:inline; margin-block:0 }
/* the "Get Calla — free" eyebrow is a label, not a button */
[data-dl] p > span[style*="letter-spacing:0.24em"]{ background:transparent !important; color:#D6A85B !important; border:1px solid rgba(214,168,91,.6); box-shadow:none !important }
/* co-parent note chip: quieter than the headline */
.plan-pill--note{ font-size:10.5px !important; padding:3px 8px !important }
/* phone install bar: compact, and page ends clear of it */
@media (max-width:767px){
  .ib{ padding-block:8px !important }
  .ib img{ width:34px !important; height:34px !important }
  main{ padding-bottom:84px }
}
/* skip link */
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:#0e1f12; color:#EFE3C8; padding:12px 16px; border-radius:10px; font-weight:700 }
.skip:focus{ top:12px }
/* invite fan: every card reads as a real invitation */
[data-invcard]{ position:relative; overflow:hidden }
[data-invcard] .invc-txt{ display:block !important; position:absolute; left:0; right:0; bottom:0; padding:28px 8px 10px; text-align:center; color:#FBF5E6; background:linear-gradient(to top, rgba(10,16,12,.78), rgba(10,16,12,0)); pointer-events:none }
[data-invcard] .invc-txt small{ display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; opacity:.85 }
[data-invcard] .invc-txt b{ display:block; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:15px; line-height:1.1; margin:3px 0 2px }
[data-invcard] .invc-txt span{ display:block; font-size:11.5px; font-weight:600 }
.hiw-dh{ margin:0 0 22px; padding:0; font-family:'Playfair Display',Georgia,serif; font-weight:600; font-size:30px; line-height:1.1; color:#FBF3E4 }
.hiw-dh .plan-pill--premium{ vertical-align:middle }
@media (max-width:767px){ .hiw-dh{ margin:0 0 14px; font-size:22px } }
html.lp-wait [data-price]{ visibility:hidden }
.v3-rev-note{ margin:14px auto 0; max-width:640px; text-align:center; font-size:13px; color:#4b5a4d }
html.lp-wait [data-price-where], html.lp-wait [data-price-where-lc], html.lp-wait [data-price-canada-only]{ visibility:hidden }
/* light "paper" mocks inside the dark orange / slate cards keep dark ink */
[data-fcard="4"] [style*="background:#F2D9A7"] p, [data-fcard="4"] [style*="background:#FBF5E6"] p,
[data-fcard="9"] [style*="background:#FBF5E6"] p, [data-fcard="9"] [style*="background:#F2D9A7"] p{ color:#18271a !important }
[data-fcard="4"] [style*="background:#F2D9A7"] p:first-child{ color:#7a4a0c !important }
.feat-trial{ margin:16px 0 0 }
.feat-trial a{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; background:#FBF3E4; color:#0e1f12; font-weight:800; font-size:14.5px }

@media (max-width:767px){ [data-dl] span[style*="right:40%"][style*="top:11%"]{ display:none !important } }
@media (min-width:768px){ section:has(> [data-reveal="manifesto-words"]){ padding-top:70px !important; padding-bottom:70px !important } }
/* Calla isn't in this country's store: no store badges or install bar for that phone */
html[data-store-missing="ios"] .hs-badge--ios, html[data-store-missing="ios"] .ib,
html[data-store-missing="android"] .hs-badge--gp, html[data-store-missing="android"] .ib{ display:none !important }
/* blind pre-audit fixes (2026-09-17) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important }
}
[data-onclick^="goTab"]{ min-height:44px }
[data-invcard] .invc-txt b{ font-size:13px; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
[data-reveal="privacy"] a{ color:#F0CF8E !important }
[data-reveal="privacy"] p[style*="Caveat"]{ color:#F0CF8E !important }
.fq-a + p a, p a[href^="mailto:"]{ display:inline-block; padding-block:12px }
/* give each How-it-works card a moment on screen before the next one covers it */
html.fx-stack [data-hiw] [data-panel] + [data-panel]{ margin-top:14vh !important }
@media (max-width:767px){
  html.fx-stack [data-hiw] [data-panel] + [data-panel]{ margin-top:10vh !important }
  main{ padding-bottom:0 }
  html.fx-on .fx-curtain[data-fx-card="surface"] > section{ padding-top:48px !important; padding-bottom:32px !important }
}
/* features blind pre-audit fixes */
.also-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important }
@media (max-width:767px){ .also-grid{ grid-template-columns:1fr !important } }
[data-fcard] p[style*="no app needed to reply"], [data-fcard] p[style*="Caveat"][style*="bottom:8px"]{ z-index:6 !important }
@media (max-width:767px){
  /* one trust line per card on phones */
  [data-fcard] ul{ display:block !important; margin:6px 0 0 !important }
  [data-fcard] ul li{ display:none !important }
  [data-fcard] ul li:last-child{ display:flex !important; font-size:13px !important }
  /* more scroll between feature cards, so each demo can be read before the next covers it */
  section > div[style*="position:sticky"][style*="margin-bottom:40px"]{ margin-bottom:14vh !important }
  /* phone hero: one tilted app screen under the headline */
  .feat-hero-shot{ display:block; position:relative; height:252px; margin:18px 0 0; pointer-events:none }
  .feat-hero-shot img{ position:absolute; width:118px; height:auto; border-radius:18px; border:4px solid #FBF5E6; box-shadow:8px 10px 0 rgba(14,31,18,.10) }
  .feat-hero-shot img:first-child{ left:18%; top:10px; transform:rotate(-6deg) }
  .feat-hero-shot img:last-child{ right:18%; top:0; transform:rotate(5deg) }
}
@media (min-width:768px){ section.shots{ margin-top:-60px } }
@media (max-width:767px) and (max-height:700px){ [data-fcard] ul{ display:none !important } }
/* a store without a Calla listing in this country: no badge for it; phones get a waitlist button */
html[data-no-ios] .hs-badge--ios, html[data-no-ios] .dl-badges .hs-badge--ios, html[data-no-ios] .ib-get--ios{ display:none !important }
html[data-no-android] .hs-badge--gp, html[data-no-android] .dl-badges .hs-badge--gp, html[data-no-android] .ib-get--gp{ display:none !important }
.wl-btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:999px; background:#D6A85B; color:#0e1f12 !important; font-weight:800; font-size:15px; text-decoration:none }
.hiw-dh{ line-height:1.22 !important; margin-bottom:20px !important }
.feat-trial a{ min-height:46px !important }
main[data-screen-label="Features"] > section:first-child > p:first-child span{ white-space:normal; line-height:1.4 }
@media (max-width:767px){ main[data-screen-label="Features"] > section:first-child > p:first-child span{ font-size:11.5px !important; letter-spacing:.16em !important; padding:8px 14px !important } }
html[data-price-country] .rating-chip{ display:none !important }
.dl-badges .wl-btn, .hs-badges .wl-btn{ display:inline-flex !important; align-items:center; line-height:1.2 !important; border-radius:999px !important; min-height:48px; padding:0 22px }
@media (max-width:767px) and (max-height:700px){ [data-weekstrip]{ display:none !important } }
@media (max-width:767px) and (max-height:700px){ div:has(> [data-weekstrip]){ height:auto !important; min-height:0 !important; padding-top:10px !important } }

/* Short links ("FAQ") were 24px wide — the ≥44px rules above only set height.
   Widen the hit area without moving the text: the box grows, the label centres. */
footer a{ min-width:44px; text-align:center }
nav a[data-placement="nav"]{ min-width:44px; justify-content:center }

/* Short phones (iPhone SE/8 at 375×667): the cap above leaves ~469px for a card
   whose content is ~514px, so the demo mock — and sometimes the button under it —
   was sliced off by the next card before it could be read. Shrink the mock and
   tighten the spacing until the card fits its own window. */
@media (max-width: 767px) and (max-height: 700px){
  [data-fcard]{ padding: 14px 14px 18px !important; gap: 8px !important; }
  [data-fcard] p[style*="font-size:52px"]{ font-size: 24px !important; }
  [data-fcard] h2{ font-size: 20px !important; margin: 0 0 6px !important; }
  [data-fcard] p[style*="line-height:1.7"]{ font-size: 13.5px !important; line-height: 1.45 !important; }
  /* the mock is scaled (not cropped) so the whole demo reads on a short screen */
  [data-fcard] > div:last-child{ zoom: 0.6; }
}