/* PlannedBy marketing CHROME - one file for every www page (16 Oct 2026).
   Tokens, buttons, the nav + phone menu, the hero and the footer. Every desktop page loads
   this first (pages built on pb-site.css load it before pb-site.css; the older Tailwind pages
   load it after Tailwind), so a page can never invent its own nav, hero or footer again.
   Not loaded by home-mobile.html or home-classic.html - the phone homes stay as they are.

   THE HERO HAS TWO SHAPES AND ONLY TWO. Both are Outfit 600, left-aligned on the same x
   (the .wrapx edge), H1 + one sentence + one gold button + at most one gold text link.
   No kicker, no eyebrow, no chips row, no italic serif, no gold accent word.
     .pbh.pbh-photo  pages that sell (home, couples, planners, how it works, website, vendors,
                     partners, about, founding): full-screen noir photo, the home page's hero.
     .pbh.pbh-paper  pages you use (pricing, free tools, the tools, updates, contact, legal):
                     cream, same type one step smaller, the page's own content starts under it.
   Brand law: no drop shadows, flat gold buttons, no pill CTAs, no rule lines in labels. */
  :root {
    --cream:#f8f7f4; --surface:#fff; --raised:#faf9f6; --press:#f4f3f0; --track:#f1efe9;
    --gold:#9a7520; --gold-h:#8a6819; --gold-p:#6b5010; --gold-l:#c9a44a; --gold-d:#6b5010; --wash:#faf6ea;
    --ink:#1a1917; --ink-2:#5a5750; --ink-3:#8a8680; --ink-4:#b8b4ae; --ink-0:#141310;
    --line:#e8e5de; --line-2:#d0cdc4; --hair:#efece5; --hover:#faf6ea;
    --prep-bg:#e8f0f8; --prep:#3a6a9a; --cer-bg:#f5eed8; --cer:#7a6010;
    --soc-bg:#e4f2ea; --soc:#2e7a50; --rec-bg:#f5ece4; --rec:#8a5a2a; --cls-bg:#f0e8f0; --cls:#7a4a7a;
    --err:#c04040; --ok:#2e7a50; --sent:#7059b5; --info:#3a7abf;
    --display:'Outfit',system-ui,sans-serif; --serif:'Cormorant Garamond',Georgia,serif; --body:'Outfit',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
    --ease:cubic-bezier(.16,1,.3,1);
    --gut:20px; --navh:64px;
  }
  @media (min-width:900px) { :root { --gut:40px; } }

  .wrapx { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--gut); }

  .txt-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:15.5px; font-weight:500; color:var(--gold-d); text-decoration:none; }
  .txt-link:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
  .txt-link svg { width:15px; height:15px; transition:transform .2s var(--ease); }
  .txt-link:hover svg { transform:translateX(3px); }

  /* ---------- buttons: flat gold, 12px radius, no shadow ---------- */
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:12px; background:var(--gold); color:#fff; font-size:16px; font-weight:500; text-decoration:none; transition:background .15s, transform .15s; }
  .btn:hover { background:var(--gold-h); } .btn:active { background:var(--gold-p); transform:scale(.985); }
  .btn svg { width:16px; height:16px; }
  .btn.sm { min-height:42px; padding:0 18px; font-size:14.5px; border-radius:10px; }

  /* ---------- announcement + nav ---------- */
  .bar { position:relative; z-index:61; background:var(--ink); color:#fff; font-size:13px; }
  .bar a { display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; padding:0 44px; color:#fff; text-decoration:none; text-align:center; }
  .bar .tag { font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-l); }
  .bar .sep { width:1px; height:12px; background:rgba(255,255,255,.2); }
  .bar .txt { color:rgba(255,255,255,.85); } .bar .act { color:var(--gold-l); font-weight:500; white-space:nowrap; }
  .bar button { position:absolute; right:10px; top:50%; transform:translateY(-50%); padding:8px; color:rgba(255,255,255,.4); }
  @media (max-width:760px) { .bar .wide, .bar .sep, .bar .act { display:none; } }
  .nav { position:sticky; top:0; z-index:60; height:var(--navh); transition:background .3s var(--ease), border-color .3s; border-bottom:1px solid transparent; }
  .nav-in { height:100%; max-width:1200px; margin:0 auto; padding:0 var(--gut); display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .wordmark { display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:19px; letter-spacing:-.01em; color:#fff; text-decoration:none; }
  .wordmark img { width:22px; height:22px; } .wordmark b { font-weight:600; color:var(--gold-l); }
  .nav-links { display:none; gap:28px; } .nav-links a { font-size:14.5px; color:rgba(255,255,255,.86); text-decoration:none; }
  .nav-links a:hover { color:#fff; }
  .nav-r { display:flex; align-items:center; gap:14px; }
  .nav .login { font-size:14.5px; font-weight:500; color:rgba(255,255,255,.9); text-decoration:none; display:none; }
  .nav-cta { display:none; }
  .burger { width:44px; height:44px; margin-right:-10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .burger span { display:block; width:19px; height:1.5px; border-radius:2px; background:#fff; transition:transform .3s var(--ease); }
  /* the nav floats on the photo, then turns to paper */
  .nav { margin-bottom:calc(var(--navh) * -1); }
  body[data-solid="1"] .nav { background:rgba(248,247,244,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
  body[data-solid="1"] .wordmark, body[data-menu="open"] .wordmark { color:var(--ink); } body[data-solid="1"] .wordmark b, body[data-menu="open"] .wordmark b { color:var(--gold); }
  body[data-solid="1"] .nav-links a { color:var(--ink-2); } body[data-solid="1"] .nav-links a:hover { color:var(--ink); }
  body[data-solid="1"] .nav .login { color:var(--ink-2); }
  body[data-solid="1"] .burger span, body[data-menu="open"] .burger span { background:var(--ink); }
  body[data-menu="open"] .burger span:first-child { transform:translateY(3.25px) rotate(45deg); }
  body[data-menu="open"] .burger span:last-child { transform:translateY(-3.25px) rotate(-45deg); }
  @media (min-width:1000px) {
    .nav-links { display:flex; } .nav .login { display:inline; } .burger { display:none; }
    .nav-cta { display:inline-flex; }
  }
  /* the couple / planner switch lives in the nav once you have chosen, so it is never lost */
  .nav .navswitch { display:none; }
  @media (min-width:1000px) {
    body[data-past-choose="1"] .nav-links { display:none; }
    body[data-past-choose="1"] .nav .navswitch { display:inline-grid; }
  }
  .menu { position:fixed; inset:0; z-index:59; background:var(--cream); padding:calc(var(--navh) + 30px) var(--gut) 32px; display:flex; flex-direction:column; justify-content:space-between; transform:translateY(-101%); transition:transform .42s cubic-bezier(.23,1,.32,1); }
  body[data-menu="open"] .menu { transform:none; }
  .menu nav { display:flex; flex-direction:column; }
  .menu nav a { font-family:var(--display); font-weight:600; font-size:27px; line-height:1; letter-spacing:-.025em; color:var(--ink); text-decoration:none; padding:16px 0; border-bottom:1px solid var(--line); }
  .menu nav a:first-child { border-top:1px solid var(--line); }
  .menu .mfoot { display:flex; flex-direction:column; gap:12px; } .menu .mfoot .btn { width:100%; }

  :root { --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* ---------- footer ---------- */
  .footer { padding:64px 0 40px; border-top:1px solid var(--line); font-size:14px; }
  .f-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; } @media (min-width:900px) { .f-grid { grid-template-columns:1.6fr repeat(4, 1fr); } }
  .f-brand { grid-column:1 / -1; } @media (min-width:900px) { .f-brand { grid-column:auto; } }
  .footer .wordmark { color:var(--ink); } .footer .wordmark b { color:var(--gold); }
  .f-brand p { color:var(--ink-3); margin:10px 0 0; }
  .footer h4 { margin:0 0 12px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .footer a:not(.wordmark) { display:block; color:var(--ink-2); text-decoration:none; padding:4px 0; } .footer a:not(.wordmark):hover { color:var(--ink); }
  .f-legal { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); }
  .f-legal a { display:inline !important; }
  /* ---------- the nav on paper: pages with a cream hero keep the solid nav from the top ---------- */
  body[data-paper="1"] .nav { background:rgba(248,247,244,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
  body[data-paper="1"][data-solid="1"] .nav { border-bottom-color:var(--line); }
  body[data-paper="1"] .wordmark { color:var(--ink); } body[data-paper="1"] .wordmark b { color:var(--gold); }
  body[data-paper="1"] .nav-links a { color:var(--ink-2); } body[data-paper="1"] .nav-links a:hover { color:var(--ink); }
  body[data-paper="1"] .nav .login { color:var(--ink-2); }
  body[data-paper="1"] .burger span { background:var(--ink); }
  .nav-links a[aria-current="page"] { color:#fff; font-weight:500; }
  body[data-solid="1"] .nav-links a[aria-current="page"], body[data-paper="1"] .nav-links a[aria-current="page"] { color:var(--ink); }
  .nav, .menu, .footer, .pbh { font-family:var(--body); }

  /* ---------- hero ---------- */
  .pbh { position:relative; overflow:hidden; display:flex; align-items:center; }
  .pbh .wrapx { position:relative; z-index:2; width:100%; }
  .pbh-h1 { margin:0; font-family:var(--display); font-style:normal; font-weight:600; letter-spacing:-.035em; text-wrap:balance; max-width:16ch; }
  .pbh-p { margin:22px 0 0; font-size:20px; line-height:1.5; max-width:42ch; }
  .pbh-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-top:40px; }
  .pbh-row .txt-link { min-height:52px; }

  .pbh-photo { height:min(100vh, 960px); min-height:620px; background:#0d0c0b; color:#fff; }
  .pbh-photo > img, .pbh-photo > picture, .pbh-photo > picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 72%; filter:grayscale(1) contrast(1.35) brightness(.82); }
  .pbh-photo > picture { filter:none; }
  .pbh-photo::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(13,12,11,.86) 0%, rgba(13,12,11,.62) 45%, rgba(13,12,11,.08) 80%), linear-gradient(180deg, rgba(13,12,11,.5), transparent 30%); }
  .pbh-photo { align-items:flex-start; }
  .pbh-photo .wrapx { padding-top:calc(var(--navh) + clamp(150px, 26vh, 250px)); }
  .pbh-photo .pbh-h1 { font-size:clamp(48px, 5.6vw, 84px); line-height:1.02; color:#fff; }
  .pbh-photo .pbh-p { color:rgba(255,255,255,.82); }
  .pbh-photo .txt-link { color:#fff; } .pbh-photo .txt-link:hover { color:var(--gold-l); }

  .pbh-paper { background:var(--cream); color:var(--ink); padding:calc(var(--navh) + clamp(72px, 10vh, 112px)) 0 clamp(48px, 7vh, 72px); }
  .pbh-paper .pbh-h1 { font-size:clamp(42px, 4.4vw, 64px); line-height:1.04; color:var(--ink); }
  .pbh-paper .pbh-p { color:var(--ink-2); }
  .pbh-paper .pbh-row:empty { display:none; }

  @media (max-width:899px) {
    .pbh-photo { height:auto; min-height:max(620px, 88svh); align-items:flex-end; padding-bottom:56px; }
    .pbh-photo .wrapx { padding-top:calc(var(--navh) + 120px); }
    .pbh-photo::after { background:linear-gradient(180deg, rgba(13,12,11,.55), rgba(13,12,11,.78)); }
    .pbh-p { font-size:17.5px; }
    .pbh-row { margin-top:30px; }
  }
  @media (max-width:899px) { .pbh-desk { display:none !important; } }

  /* ---------- bridge for the older Tailwind pages (pricing, tools, legal, updates, about, vendors,
     partners, contact). Their sections keep their own layout, but headings, accents and buttons
     follow the same rules as everything else: Outfit headings, no italic gold accent words, flat
     12px buttons that never lift or glow. Higher specificity than Tailwind's runtime utilities. ---------- */
  html body .font-display, html body [class*="font-display"] { font-family:var(--display) !important; font-style:normal !important; font-weight:600; letter-spacing:-.03em; }
  html body .font-display .italic, html body .font-display em, html body [class*="font-display"] em, html body [class*="font-display"] .italic { font-family:inherit !important; font-style:normal !important; color:inherit !important; }
  html body .gold-line::after, html body .gold-line::before { display:none !important; }
  html body .btn-primary, html body .btn-outline, html body .btn-outline-light { border-radius:12px; min-height:52px; }
  html body .btn-primary:hover, html body .btn-outline:hover, html body .btn-outline-light:hover { transform:none; box-shadow:none; }
  html body .btn-primary:hover { background:var(--gold-h); }

  /* ---------- the scroll invite: a cream sheet rising out of the bottom of a photo hero
     (the "Start here" sheet on /how-it-works, made shared 16 Oct 2026). It sits inside the
     first screen, so every selling page shows there is more below. One gold kicker, no rule
     lines, the chevron drifts down. Clicking it scrolls to the next section. ---------- */
  .pbh-next { position:relative; z-index:3; margin-top:-64px; height:64px; background:var(--cream); border-radius:28px 28px 0 0; display:flex; justify-content:center; align-items:flex-start; padding-top:22px; }
  .pbh-next a { display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-d); text-decoration:none; }
  .pbh-next a:hover { color:var(--ink); }
  .pbh-next svg { width:13px; height:13px; animation:pbhNudge 1.8s ease-in-out infinite; }
  @keyframes pbhNudge { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(3px); } }
  @media (prefers-reduced-motion: reduce) { .pbh-next svg { animation:none; } }
  section[id] { scroll-margin-top:var(--navh); }

/* Every photo above the footer is noir, like the heroes (Juan, 17 Oct). */
html body img.pb-noir { filter:grayscale(1) contrast(1.35) brightness(.82); }