/* PlannedBy marketing, shared by how-it-works.html and planners.html (24 Sep 2026).
   One stylesheet so the pages cannot drift apart. */
  /* v3 (24 Sep 2026). Headings are Outfit (Juan, 24 Sep: "use the og sans"), not Bricolage. Tokens are the mobile homepage's; the tool demos are
     its demos, ported (seating geometry = lib/seating/geometry.ts world units). Brand law
     (feedback memory): no drop shadows, flat gold buttons, no pills for actions, no rule
     lines in eyebrows, wordmark Outfit, Bricolage for headings, Cormorant italic only for
     the hero H1. Every interactive frame has a FIXED height - switching never moves the page. */
  :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; } }
  html { scroll-behavior:smooth; }
  html, body { margin:0; background:var(--cream); }
  body { color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow-x:hidden; }
  * { box-sizing:border-box; }
  img { display:block; max-width:100%; }
  button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation; }
  button:focus-visible, a:focus-visible { outline:2px solid var(--gold-l); outline-offset:2px; }
  a { color:var(--gold-d); }
  .grain { position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .demo { user-select:none; -webkit-user-select:none; }
  .demo input, .demo textarea { user-select:text; -webkit-user-select:text; }
  .wrapx { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--gut); }

  /* ---------- type ---------- */
  .eyebrow { margin:0; font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-d); }
  .h2 { margin:0; font-family:var(--display); font-weight:600; font-size:clamp(32px, 4.4vw, 52px); line-height:1.06; letter-spacing:-.025em; text-wrap:balance; }
  .h3 { margin:0; font-family:var(--display); font-weight:600; font-size:clamp(27px, 3vw, 38px); line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
  .lede { margin:0; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:46ch; }
  .fine { font-size:13px; color:var(--ink-3); line-height:1.5; margin:0; }
  .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%; }

  /* ---------- segmented switch (the app's strip A): a track, the choice is a white thumb ---------- */
  .seg2 { display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:3px; border-radius:12px; background:var(--track); }
  .seg2 button { min-height:38px; padding:0 18px; border-radius:9px; font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:background .2s, color .2s; }
  .seg2 button[aria-pressed="true"] { background:#fff; color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--line); }
  .mswitch { display:none; }
  @media (max-width:999px) {
    .mswitch { position:sticky; top:var(--navh); z-index:55; display:flex; justify-content:center; padding:8px var(--gut); background:rgba(248,247,244,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); margin-bottom:-55px; }
    body[data-past-choose="1"] .mswitch { opacity:1; transform:none; pointer-events:auto; }
    .mswitch .seg2 { width:100%; max-width:420px; }
  }

  /* ---------- hero ---------- */
  /* The photo is mostly pale sky with the couple small at the bottom, so the type sits
     in ink up in the sky and the picture does the rest. One subject, nothing to read past. */
  /* PHOTOGRAPHY IS NOIR, the /rsvp public page's treatment (NoirStage.tsx): grayscale,
     contrast 1.35, brightness .82, film grain in soft-light, dark at both ends. Juan:
     colour photos read "too vibrant, off brand" - romantic means black and white. */
  :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"); }
  .hero { position:relative; min-height:min(94vh, 920px); display:flex; align-items:flex-start; background:#0d0c0b; overflow:hidden; color:#fff; }
  .hero::after, .pband::before, .final::before, .who-img::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.22; mix-blend-mode:soft-light; background-image:var(--grain); }
  .hero-photo { position:absolute; inset:0; }
  .hero-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 84%; filter:grayscale(1) contrast(1.35) brightness(.82); transform:scale(1.04); transform-origin:center bottom; animation:drift 22s cubic-bezier(.23,1,.32,1) forwards; }
  @media (min-width:900px) { .hero-photo img { object-position:50% 70%; } }
  .hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,12,11,.5) 0%, rgba(13,12,11,.12) 40%, rgba(13,12,11,.35) 70%, rgba(13,12,11,.88) 100%); }
  @keyframes drift { to { transform:scale(1); } }
  .hero-in { position:relative; z-index:2; padding-top:calc(var(--navh) + 72px); padding-bottom:120px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
  .kicker { margin:0; font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); }
  .hero h1 { margin:0; font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(46px, 6.6vw, 88px); line-height:.96; letter-spacing:-.012em; max-width:12ch; text-wrap:balance; }
  .hero-sub { margin:0; font-size:clamp(16px, 1.5vw, 18.5px); line-height:1.6; color:rgba(255,255,255,.84); max-width:40ch; }
  .hero-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:6px; }
  .hero .txt-link { color:#fff; } .hero .txt-link:hover { color:var(--gold-l); }
  .hero-chips { margin:4px 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:rgba(255,255,255,.7); }
  .hero-chips span { display:inline-flex; align-items:center; gap:7px; }
  .hero-chips span::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--gold-l); }
  .rise { opacity:0; transform:translateY(22px); animation:riseIn .5s cubic-bezier(.23,1,.32,1) forwards; }
  .d1 { animation-delay:.08s } .d2 { animation-delay:.16s } .d3 { animation-delay:.24s } .d4 { animation-delay:.32s }
  @keyframes riseIn { to { opacity:1; transform:none; } }

  /* ---------- the chooser: a sheet rising out of the photo ---------- */
  .choose { position:relative; z-index:3; margin-top:-64px; background:var(--cream); border-radius:28px 28px 0 0; padding:44px 0 20px; }
  .choose-head { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:28px; }
  .who-grid { display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:760px) { .who-grid { grid-template-columns:1fr 1fr; gap:20px; } }
  .who { position:relative; display:flex; flex-direction:column; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; transition:border-color .25s, opacity .3s, transform .3s var(--ease); }
  .who:hover { border-color:var(--gold-l); }
  .who[aria-pressed="true"] { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
  .who-grid[data-chosen] .who[aria-pressed="false"] { opacity:.62; }
  .who-grid[data-chosen] .who[aria-pressed="false"]:hover { opacity:1; }
  .who-img { position:relative; height:200px; overflow:hidden; background:#ddd; }
  @media (min-width:760px) { .who-img { height:280px; } }
  .who-img img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.2) brightness(1.08); transition:transform 1.2s var(--ease); }
  .who:hover .who-img img { transform:scale(1.03); }
  .who-img::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,18,15,.35), transparent 55%); }
  /* a little of the product sits on each photo, so the card says what it is before you read it */
  .who-chip { position:absolute; z-index:2; left:16px; bottom:16px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; min-width:210px; font-size:12.5px; }
  .who-chip .r { display:flex; align-items:center; gap:8px; min-height:22px; color:var(--ink-2); white-space:nowrap; }
  .who-chip .r b { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
  .who-chip .r i { width:7px; height:7px; border-radius:50%; flex:none; }
  .who-chip .k { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
  .who-body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; }
  .who-t { font-family:var(--display); font-weight:600; font-size:clamp(26px, 2.6vw, 32px); line-height:1; letter-spacing:-.02em; }
  .who-d { font-size:15.5px; line-height:1.5; color:var(--ink-2); max-width:38ch; }
  .who-go { margin-top:6px; display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--gold-d); }
  .who-go svg { width:15px; height:15px; transition:transform .2s var(--ease); } .who:hover .who-go svg { transform:translateX(3px); }
  .who-check { position:absolute; z-index:3; top:14px; right:14px; width:30px; height:30px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.6); transition:opacity .25s, transform .3s var(--ease); }
  .who-check svg { width:16px; height:16px; }
  .who[aria-pressed="true"] .who-check { opacity:1; transform:none; }
  .choose-note { margin-top:18px; text-align:center; }

  /* ---------- tracks ---------- */
  .track[hidden] { display:none; }
  .sec { padding:88px 0; }
  @media (min-width:900px) { .sec { padding:120px 0; } }
  .sec-head { display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
  .sec-head.center { align-items:center; text-align:center; }
  .sec-head.center .lede { text-align:center; }
  .track-intro { padding:72px 0 8px; }

  /* ---------- shared frame for every product mock ---------- */
  .frame { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .hint { margin:12px 2px 0; font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:22px; }
  .hint .live { display:inline-flex; align-items:center; gap:7px; }
  .hint .live::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); animation:beat 1.8s ease-in-out infinite; }
  @keyframes beat { 50% { opacity:.3; } }
  .hint button { color:var(--gold-d); font-weight:500; font-size:13px; }
  .hint button:hover { text-decoration:underline; text-underline-offset:3px; }
  .pan { flex:1 1 auto; min-height:0; overflow:hidden; position:relative; }
  .pan-in { position:relative; will-change:transform; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
  .flash { animation:flash .9s var(--ease); }
  @keyframes flash { from { background:#f5eed8 } to { background:transparent } }
  @keyframes rise { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }
  .typing::after { content:''; display:inline-block; width:2px; height:1em; background:var(--gold); margin-left:2px; vertical-align:-2px; animation:blink .7s steps(1) infinite; }
  @keyframes blink { 50% { opacity:0 } }

  /* ============ COUPLES: THE TOOL STAGE ============ */
  .stage-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  .stage-grid > div, .p-layout > div, .vd-grid > div { min-width:0; }
  @media (min-width:1000px) { .stage-grid { grid-template-columns:300px 1fr; gap:36px; align-items:start; } }
  .rail { display:none; }
  @media (min-width:1000px) {
    .rail { display:flex; flex-direction:column; border-top:1px solid var(--line); position:sticky; top:calc(var(--navh) + 24px); }
    .rail button { position:relative; display:grid; grid-template-columns:36px 1fr; column-gap:14px; align-items:start; text-align:left; padding:16px 12px 16px 14px; border-bottom:1px solid var(--line); transition:background .2s; }
    .rail button:hover { background:rgba(250,246,234,.6); }
    .rail button::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:2px; background:var(--gold); transform:scaleY(0); transition:transform .3s var(--ease); }
    .rail button[aria-selected="true"] { background:var(--wash); }
    .rail button[aria-selected="true"]::before { transform:none; }
    .rail .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--press); color:var(--ink-2); transition:background .2s, color .2s; }
    .rail .ic svg { width:19px; height:19px; }
    .rail button[aria-selected="true"] .ic { background:var(--gold); color:#fff; }
    .rail .nm { font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.02em; line-height:1.1; color:var(--ink-2); padding-top:7px; }
    .rail button[aria-selected="true"] .nm { color:var(--ink); }
    .rail .ln { grid-column:2; font-size:14px; line-height:1.45; color:var(--ink-3); max-height:0; overflow:hidden; opacity:0; transition:max-height .35s var(--ease), opacity .3s, margin .3s; }
    .rail button[aria-selected="true"] .ln { max-height:60px; opacity:1; margin-top:6px; color:var(--ink-2); }
  }
  /* phone: the app's own tab idiom - text, a colour dot, a gold underline. Not pills. */
  .mtabs { display:flex; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin:0 calc(var(--gut) * -1); padding:0 var(--gut); }
  .mtabs::-webkit-scrollbar { display:none; }
  .mtabs button { position:relative; flex:none; min-height:48px; padding:0 13px; font-size:15px; font-weight:500; color:var(--ink-3); white-space:nowrap; }
  .mtabs button[aria-selected="true"] { color:var(--ink); font-weight:600; }
  .mtabs button[aria-selected="true"]::after { content:''; position:absolute; left:13px; right:13px; bottom:-1px; height:2px; background:var(--gold); }
  @media (min-width:1000px) { .mtabs { display:none; } }
  .mline { margin:12px 0 0; font-size:15px; line-height:1.45; color:var(--ink-2); min-height:44px; }
  @media (min-width:1000px) { .mline { display:none; } }
  .tool-card { height:600px; display:flex; flex-direction:column; }
  @media (min-width:1000px) { .tool-card { height:640px; } }
  .tool { display:none; flex:1 1 auto; min-height:0; flex-direction:column; animation:rise .35s var(--ease) both; }
  .tool.on { display:flex; }
  .tool { position:relative; }

  /* app strip: tabs with a dot, underline on the selected */
  .strip { flex:none; display:flex; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--line); }
  .strip .scroll { flex:1 1 auto; min-width:0; display:flex; overflow-x:auto; scrollbar-width:none; }
  .strip .scroll::-webkit-scrollbar { display:none; }
  .ctab { position:relative; flex:none; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 14px; font-size:14.5px; font-weight:500; color:var(--ink-3); white-space:nowrap; }
  .ctab i { width:8px; height:8px; border-radius:50%; flex:none; }
  .ctab[aria-selected="true"] { color:var(--ink); }
  .ctab[aria-selected="true"]::after { content:''; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--gold); }
  .strip .aside { flex:none; display:flex; align-items:center; gap:8px; padding:0 14px; border-left:1px solid var(--line); font-size:12.5px; color:var(--ink-3); white-space:nowrap; }

  /* run sheet */
  .rs-sec { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
  .rs-sec::before { content:''; width:3px; height:15px; border-radius:2px; background:currentColor; opacity:.55; }
  .rs-sec.prep { background:var(--prep-bg); color:var(--prep);} .rs-sec.cer { background:var(--cer-bg); color:var(--cer);} .rs-sec.soc { background:var(--soc-bg); color:var(--soc);} .rs-sec.rec { background:var(--rec-bg); color:var(--rec);} .rs-sec.cls { background:var(--cls-bg); color:var(--cls);}
  .rs-row { width:100%; text-align:left; display:grid; grid-template-columns:86px 1fr; min-height:58px; border-top:1px solid var(--hair); }
  .rs-row .t { display:flex; align-items:center; padding:0 12px; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink-2); border-right:1px solid var(--hair); white-space:nowrap; }
  .rs-row .c { padding:10px 14px; display:flex; flex-direction:column; justify-content:center; gap:2px; border-right:1px solid var(--hair); min-width:0; }
  .rs-row .c:last-child { border-right:0; }
  .rs-row .c .ti { font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; min-height:19px; }
  .rs-row .c .de { font-size:13px; color:var(--ink-2); line-height:1.35; animation:rise .3s var(--ease) both; }
  .rs-row .c.empty { background:var(--raised); }
  .rs-row .c:hover { background:var(--hover); cursor:pointer; }
  .rs-head { display:grid; background:#f0efec; border-bottom:1px solid var(--line); }
  .rs-head > div { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#3a3830; border-right:1px solid var(--line); white-space:nowrap; overflow:hidden; }
  .rs-head > div:last-child { border-right:0; }
  .rs-head i { width:8px; height:8px; border-radius:50%; flex:none; }
  .rs-head .tm { font-family:var(--mono); color:var(--ink-3); font-weight:600; }
  .rs-head .main { background:#fff; }

  /* budget, drawn off the desktop tool (BudgetTool.tsx) */
  .bd-top { flex:none; display:grid; grid-template-columns:1fr auto; gap:14px 20px; align-items:start; padding:18px 20px 14px; border-bottom:1px solid var(--line); }
  .bd-k { font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .bd-total { font-family:var(--body); font-weight:700; font-size:32px; letter-spacing:-.02em; line-height:1.05; margin-top:4px; font-variant-numeric:tabular-nums; }
  .bd-sub { font-size:12.5px; color:var(--ink-3); margin-top:4px; }
  .bd-left { border:1px solid #eadfbb; background:var(--wash); border-radius:12px; padding:9px 16px; text-align:center; min-width:130px; transition:background .3s, border-color .3s; }
  .bd-left b { display:block; font-size:24px; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-.01em; transition:color .3s; }
  .bd-left small { font-size:12px; color:var(--gold-d); }
  .bd-left.over { background:#fdeaea; border-color:#f0c4c4; } .bd-left.over b, .bd-left.over small { color:var(--err); }
  .bd-bar { grid-column:1 / -1; position:relative; height:10px; border-radius:99px; background:var(--hair); overflow:hidden; }
  .bd-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:99px; transition:width .35s var(--ease), background .3s; }
  .bd-bar .as { background:var(--gold-l); } .bd-bar .pd { background:var(--gold); }
  .bd-bar.over .as { background:var(--err); }
  .bd-leg { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 18px; font-size:12.5px; color:var(--ink-3); }
  .bd-leg span { display:inline-flex; align-items:center; gap:7px; } .bd-leg b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
  .bd-leg i { width:9px; height:9px; border-radius:50%; }
  .bd-cols, .bd-cat, .bd-row { display:grid; grid-template-columns:1fr 104px 104px 110px; align-items:center; }
  .bd-cols { flex:none; padding:0 16px 0 20px; min-height:36px; background:var(--raised); border-bottom:1px solid var(--line); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .bd-cols span:not(:first-child), .bd-row > span:not(:first-child), .bd-cat > span:not(:first-child) { text-align:right; }
  .bd-cat { min-height:48px; padding:0 16px 0 17px; background:var(--press); border-top:1px solid var(--line); border-left:3px solid; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
  .bd-cat .nm { display:flex; align-items:center; gap:9px; } .bd-cat .nm i { width:8px; height:8px; border-radius:50%; } .bd-cat .nm small { font-weight:400; color:var(--ink-4); font-size:12px; }
  .bd-row { width:100%; text-align:left; min-height:48px; padding:0 16px 0 30px; border-top:1px solid var(--hair); font-size:14.5px; font-variant-numeric:tabular-nums; transition:background .3s; }
  .bd-row:hover { background:var(--hover); }
  .bd-row .nm { display:flex; align-items:center; gap:10px; min-width:0; } .bd-row .nm span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bd-row .zero { color:#c8c3b8; font-size:12.5px; }
  .bd-avail { justify-self:end; display:inline-block; min-width:78px; text-align:center; padding:4px 10px; border-radius:99px; background:var(--press); font-weight:600; font-size:13.5px; }
  .bd-avail.paid { background:#e4f2ea; color:var(--ok); }
  .ess { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:99px; background:var(--wash); border:1px solid #eadfbb; font-size:11.5px; font-weight:500; color:var(--gold-d); flex:none; }
  .ess::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold); }
  .bd-note { flex:none; padding:0 20px; min-height:38px; display:flex; align-items:center; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); transition:color .3s; }
  @media (max-width:640px) {
    .bd-cols, .bd-cat, .bd-row { grid-template-columns:1fr 92px 86px; }
    .bd-cols .spent, .bd-cat .spent, .bd-row .spent { display:none; }
    .bd-row .ess { display:none; }
    .bd-row { padding-left:22px; }
    .bd-total { font-size:26px; } .bd-left { min-width:0; padding:8px 12px; } .bd-left b { font-size:19px; }
  }

  /* seating: the app's geometry, pastels per party */
  .seat { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  @media (min-width:1000px) { .seat { flex-direction:row; } }
  .room { position:relative; flex:0 0 55%; min-height:0; overflow:hidden; display:flex; background:#fbfaf6; order:0; }
  .room svg { width:100%; height:100%; display:block; }
  .room .tbl { cursor:pointer; }
  .seatpanel { flex:1 1 45%; min-height:0; display:flex; flex-direction:column; border-top:1px solid var(--line); overflow:hidden; background:var(--surface); }
  @media (min-width:1000px) { .room { flex:1 1 auto; order:2; } .seatpanel { flex:0 0 300px; border-top:0; border-right:1px solid var(--line); order:1; } }
  .sp-count { flex:none; padding:16px 16px 12px; border-bottom:1px solid var(--line); }
  .sp-count .big { display:flex; align-items:baseline; gap:8px; font-size:13px; color:var(--ink-3); }
  .sp-count .big b { font-size:28px; font-weight:700; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .sp-count .pb { height:6px; border-radius:99px; background:var(--hair); overflow:hidden; margin-top:8px; }
  .sp-count .pb i { display:block; height:100%; background:var(--gold); border-radius:99px; transition:width .5s var(--ease); }
  .sp-head { flex:none; display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 16px 5px; font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); }
  .sp-head b { font-weight:600; color:var(--ink-2); letter-spacing:.06em; }
  .sp-list { flex:none; display:flex; flex-direction:column; }
  .sp-row { display:flex; align-items:center; gap:11px; width:100%; min-height:38px; padding:0 16px; text-align:left; }
  .sp-row i { flex:none; width:11px; height:11px; border-radius:50%; border:1.5px solid transparent; }
  .sp-row .nm { font-size:14.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sp-row .mt { flex:none; margin-left:auto; font-size:12.5px; color:var(--ink-3); white-space:nowrap; max-width:52%; overflow:hidden; text-overflow:ellipsis; }
  .sp-row[aria-pressed="true"] { background:var(--hover); } .sp-row[aria-pressed="true"] .nm { font-weight:600; }
  .sp-row.hold .nm, .sp-row.hold .mt { color:var(--ink-3); }
  .sp-row.hold i { background:none !important; border-color:var(--line-2); border-style:dashed; }
  .sp-list.seated { border-top:1px solid var(--line); margin-top:4px; padding-top:4px; }
  .sp-row .un { flex:none; margin-left:auto; font-size:12.5px; font-weight:500; color:var(--gold-d); padding-left:10px; min-height:36px; }
  .sp-empty { padding:6px 16px 12px; font-size:13.5px; color:var(--ink-3); margin:0; }
  .sp-land { animation:spLand 1.1s ease-in-out infinite; }
  @keyframes spLand { 0%,100% { stroke-opacity:1 } 50% { stroke-opacity:.45 } }
  .flyer { position:fixed; z-index:70; pointer-events:none; height:34px; max-width:220px; padding:0 13px; border-radius:99px; font-size:14px; font-weight:500; display:inline-flex; align-items:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ghost { opacity:0; }

  /* guests, drawn off the Guests page */
  .gs-top { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:16px 18px; border-bottom:1px solid var(--line); }
  .gs-rep { display:flex; align-items:baseline; gap:6px; font-size:14px; color:var(--ink-3); }
  .gs-rep b { font-size:28px; font-weight:700; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .gs-bar { width:130px; height:8px; border-radius:99px; background:var(--hair); overflow:hidden; display:flex; }
  .gs-bar i { height:100%; transition:width .5s var(--ease); } .gs-bar .a { background:var(--ok); } .gs-bar .d { background:#e3a3a9; }
  .gs-chips { display:flex; flex-wrap:wrap; gap:6px; }
  .gchip { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:0 11px; border-radius:99px; border:1px solid var(--line); background:#fff; font-size:13px; color:var(--ink-2); white-space:nowrap; }
  .gchip b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
  .gchip i { width:8px; height:8px; border-radius:50%; }
  .gchip .aw { border:1.5px solid var(--ink-4); } .gchip .dt { border:1.5px solid var(--gold-l); }
  .gchip.bump { animation:bump .5s var(--ease); }
  @keyframes bump { 30% { background:var(--wash); border-color:var(--gold-l); } }
  .gs-cols, .gs-row { display:grid; grid-template-columns:1fr 70px 80px 150px; align-items:center; }
  .gs-cols { flex:none; min-height:36px; padding:0 18px; background:var(--raised); border-bottom:1px solid var(--line); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .gs-grp { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; background:var(--press); border-top:1px solid var(--line); }
  .gs-grp .nm { font-family:var(--serif); font-weight:600; font-size:18px; }
  .gs-grp small { font-size:12px; color:var(--ink-3); }
  .gs-grp .dots { margin-left:auto; display:flex; gap:4px; } .gs-grp .dots i { width:7px; height:7px; border-radius:50%; background:var(--line-2); transition:background .3s; }
  .gs-row { min-height:44px; padding:0 18px 0 32px; border-top:1px solid var(--hair); font-size:14.5px; transition:background .4s; }
  .gs-row .dot { display:block; width:10px; height:10px; border-radius:50%; border:1.5px solid var(--ink-4); transition:background .3s, border-color .3s; }
  .gs-row .dot.yes { background:var(--ok); border-color:var(--ok); } .gs-row .dot.no { background:#e3a3a9; border-color:#e3a3a9; }
  .gs-row .age { font-size:13.5px; color:var(--ink-2); }
  .diet { display:inline-flex; padding:3px 10px; border-radius:99px; background:var(--press); border:1px solid var(--line); font-size:12px; color:var(--ink-2); animation:rise .35s var(--ease) both; }
  .gs-row .dash { color:var(--ink-4); }
  .gs-toast { position:absolute; left:50%; top:118px; z-index:5; transform:translate(-50%, -8px); opacity:0; display:flex; align-items:center; gap:9px; padding:9px 14px; border-radius:12px; background:var(--ink); color:#fff; font-size:13.5px; white-space:nowrap; transition:opacity .25s, transform .3s var(--ease); pointer-events:none; }
  .gs-toast.on { opacity:1; transform:translate(-50%, 0); }
  .gs-toast i { width:8px; height:8px; border-radius:50%; background:#7aba94; }
  @media (max-width:640px) {
    .gs-cols, .gs-row { grid-template-columns:1fr 46px 108px; } .gs-cols .ag, .gs-row .age { display:none; }
    .gs-bar { width:90px; } .gs-top { gap:10px; padding:14px; } .gchip { min-height:28px; padding:0 9px; font-size:12px; }
    .gs-toast { top:150px; }
  }

  /* rsvp studio: controls left, a phone right (RsvpStudio.tsx); on a phone it is the page itself */
  .rv { flex:1 1 auto; min-height:0; display:flex; }
  .rv-ctl { display:none; }
  .rv-stage, .phone, .phone > .scr { flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; }
  @media (min-width:1000px) {
    .rv-ctl { display:flex; flex-direction:column; flex:0 0 280px; border-right:1px solid var(--line); padding:16px 0; overflow:hidden; }
    .rv-ctl .k { padding:0 18px 8px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
    .rv-t { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:12px; min-height:46px; padding:0 18px; text-align:left; }
    .rv-t:hover { background:var(--hover); }
    .rv-t[aria-selected="true"] { background:var(--wash); }
    .rv-t .sw { width:30px; height:30px; border-radius:8px; border:1px solid rgba(0,0,0,.08); position:relative; overflow:hidden; }
    .rv-t .sw::after { content:''; position:absolute; left:6px; right:6px; bottom:6px; height:4px; border-radius:2px; background:var(--a); }
    .rv-t .n { font-size:14.5px; font-weight:500; } .rv-t .c { font-size:12px; color:var(--ink-3); }
    .rv-t[aria-selected="true"] .n { font-weight:600; }
    .rv-mode { margin:14px 18px 0; }
    .rv-stage { flex:1 1 auto; display:flex; align-items:center; justify-content:center; background:var(--cream); background-image:linear-gradient(to right, rgba(154,117,32,.04) 1px, transparent 1px),linear-gradient(to bottom, rgba(154,117,32,.04) 1px, transparent 1px); background-size:24px 24px; }
    .phone { flex:none; width:292px; height:580px; border-radius:40px; border:7px solid #2c2b28; background:#2c2b28; overflow:hidden; display:flex; flex-direction:column; }
    .phone > .scr { flex:1 1 auto; border-radius:33px; overflow:hidden; display:flex; flex-direction:column; background:#fff; }
  }
  .rv-m { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
  @media (min-width:1000px) { .rv-m .strip { display:none; } }
  .tpill { flex:none; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 12px; font-size:14px; font-weight:500; color:var(--ink-3); white-space:nowrap; position:relative; }
  .tpill i { width:16px; height:16px; border-radius:4px; border:1px solid rgba(0,0,0,.08); flex:none; }
  .tpill[aria-selected="true"] { color:var(--ink); }
  .tpill[aria-selected="true"]::after { content:''; position:absolute; left:12px; right:12px; bottom:0; height:2px; background:var(--gold); }
  .mode { display:inline-flex; align-items:center; border-left:1px solid var(--line); padding:0 8px; gap:2px; }
  .mode button { min-height:32px; padding:0 10px; border-radius:8px; font-size:12px; font-weight:500; color:var(--ink-3); }
  .mode button[aria-pressed="true"] { background:var(--ink); color:#fff; }
  .tpl { flex:1 1 auto; min-height:0; position:relative; display:flex; flex-direction:column; background:var(--paper); color:var(--tink); overflow:hidden; }
  .tpl .photo { position:relative; flex:none; overflow:hidden; background:#000; }
  .tpl .photo img { width:100%; height:100%; object-fit:cover; }
  .tpl .photo .tint { position:absolute; inset:0; }
  .tpl.full .photo { position:absolute; inset:0; }
  .tpl.full .photo .tint { background:linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.72) 100%); }
  .tpl.split .photo { height:44%; }
  .tpl.split.arch .photo { margin:16px 16px 0; border-radius:999px 999px 0 0; height:42%; }
  .tpl .body { position:relative; z-index:1; flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; padding:20px 20px 18px; }
  .tpl.full .body { color:#fff; }
  .tpl .kick { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; opacity:.85; }
  .tpl .names { font-family:var(--face); font-weight:500; line-height:1.02; margin:2px 0 4px; }
  .tpl .when { font-size:13.5px; line-height:1.45; opacity:.9; }
  .tpl .tmsg { font-size:14.5px; line-height:1.5; opacity:.95; }
  .tpl .by { font-size:12px; opacity:.75; }
  .tpl .rsvp-btn { margin-top:8px; display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; border-radius:8px; background:var(--accent); color:var(--on-accent); font-weight:600; font-size:15px; letter-spacing:.02em; transition:transform .15s; }
  .press { transform:scale(.96); }
  .rule { height:1px; background:currentColor; opacity:.25; }
  .rule.double { height:3px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; background:none; opacity:.35; }
  .sprig { position:absolute; width:60px; height:60px; opacity:.6; z-index:2; pointer-events:none; }
  .keyline { position:absolute; inset:12px; border:1px solid var(--accent); pointer-events:none; z-index:1; opacity:.7; }
  .keyline::after { content:''; position:absolute; inset:5px; border:1px solid var(--accent); opacity:.5; }
  .flow { flex:1 1 auto; display:flex; flex-direction:column; background:var(--paper); color:var(--tink); }
  .flow .bar2 { height:2px; background:rgba(0,0,0,.08); } .flow .bar2 i { display:block; height:100%; background:var(--accent); transition:width .4s var(--ease); }
  .flow .fh { display:flex; align-items:center; min-height:46px; padding:0 8px; }
  .flow .fh button { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; } .flow .fh svg { width:20px; height:20px; }
  .flow h4 { margin:0; padding:6px 20px 4px; font-family:var(--face); font-weight:500; font-size:30px; line-height:1.05; }
  .flow .fb { flex:1 1 auto; display:flex; flex-direction:column; gap:14px; padding:14px 20px 20px; }
  .party { display:flex; flex-direction:column; gap:9px; } .party .nm { font-size:15px; font-weight:500; }
  .segr { display:grid; grid-template-columns:1fr 1fr; border:1.5px solid var(--accent); border-radius:8px; overflow:hidden; }
  .segr button { min-height:44px; font-size:14px; font-weight:500; color:var(--tink); transition:background .2s, color .2s; }
  .segr button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); }
  .cont { margin-top:auto; display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:8px; background:var(--accent); color:var(--on-accent); font-weight:600; font-size:15px; }
  .done { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px 20px; text-align:center; }
  .done svg { width:68px; height:68px; }
  .done svg path { stroke:var(--accent); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:draw .4s var(--ease) .1s forwards; }
  @keyframes draw { to { stroke-dashoffset:0 } }
  .done .big { font-family:var(--face); font-weight:500; font-size:30px; line-height:1.05; }
  .done .sm { font-size:13.5px; opacity:.8; line-height:1.5; }
  .done button { color:var(--accent); font-weight:500; font-size:14px; }

  /* ============ VENDORS BAND (dark) ============ */
  .band { position:relative; overflow:hidden; background:var(--ink-0); color:#f4f0e8; }
  .band::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(to right, rgba(226,195,118,.07) 1px, transparent 1px),linear-gradient(to bottom, rgba(226,195,118,.07) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
  .band > * { position:relative; }
  .band .h2, .band .h3 { color:#faf7f0; } .band .lede { color:rgba(244,240,232,.7); } .band .eyebrow { color:var(--gold-l); }
  .vd-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:center; }
  @media (min-width:1000px) { .vd-grid { grid-template-columns:1fr 400px; gap:80px; } }
  .vsteps { display:flex; flex-direction:column; margin-top:28px; border-top:1px solid rgba(244,240,232,.14); }
  .vstep { position:relative; display:grid; grid-template-columns:34px 1fr; gap:4px 12px; text-align:left; padding:18px 0; border-bottom:1px solid rgba(244,240,232,.14); color:rgba(244,240,232,.5); transition:color .3s; }
  .vstep b { font-family:var(--display); font-size:19px; font-weight:600; color:var(--gold-l); opacity:.5; transition:opacity .3s; }
  .vstep .t { font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.02em; line-height:1.15; }
  .vstep .d { grid-column:2; font-size:14.5px; line-height:1.5; color:rgba(244,240,232,.6); max-height:0; overflow:hidden; opacity:0; transition:max-height .4s var(--ease), opacity .3s; }
  .vstep i { position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--gold-l); transform-origin:left; transform:scaleX(0); }
  .vstep[aria-selected="true"] { color:#faf7f0; } .vstep[aria-selected="true"] b { opacity:1; }
  .vstep[aria-selected="true"] .d { max-height:80px; opacity:1; margin-top:4px; }
  .vstep[aria-selected="true"] i { transform:scaleX(1); transition:transform var(--vd-dur, 3600ms) linear; }
  @media (max-width:999px) { .vstep .d { display:none; } .vsteps { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; border:0; margin-top:24px; } .vstep { grid-template-columns:1fr; padding:10px 0 12px; border-bottom:1px solid rgba(244,240,232,.14); } .vstep b { display:none; } .vstep .t { font-size:13px; font-family:var(--body); font-weight:500; letter-spacing:0; } }
  .vd-frame { height:620px; max-width:400px; width:100%; margin:0 auto; background:var(--surface); color:var(--ink); border-radius:40px; border:8px solid #2c2b28; overflow:hidden; display:flex; flex-direction:column; }
  .vd-top { flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:50px; padding:0 16px; border-bottom:1px solid var(--line); font-size:13px; font-weight:500; color:var(--ink-2); }
  .vd-top .who2 { display:inline-flex; align-items:center; gap:8px; } .vd-top .who2 i { width:8px; height:8px; border-radius:50%; background:#bf8a2a; }
  .vd-top .ro { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
  .vd-body { flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
  .vd-screen { flex:1 1 auto; display:flex; flex-direction:column; animation:rise .45s var(--ease) both; }
  .inv { flex:1 1 auto; display:flex; flex-direction:column; gap:18px; padding:26px 18px; justify-content:center; background:#fff; }
  .bubble { align-self:flex-start; max-width:90%; background:#e9e9ee; color:#1a1917; border-radius:18px 18px 18px 4px; padding:10px 14px; font-size:15px; line-height:1.4; animation:rise .4s var(--ease) both; }
  .bubble a { color:#1c5fd0; text-decoration:underline; }
  .gate { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:8px; text-align:center; }
  .gate .wn { font-family:var(--serif); font-weight:600; font-size:28px; line-height:1; }
  .gate .rs { font-size:13px; color:var(--ink-3); } .gate .gr { width:64px; height:2px; background:var(--gold-l); margin:4px 0 6px; }
  .gate .card { width:100%; border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; text-align:left; }
  .gate label { font-size:12.5px; font-weight:500; color:var(--ink-2); }
  .gate .in { min-height:48px; border:1.5px solid var(--line-2); border-radius:8px; background:var(--raised); padding:0 14px; display:flex; align-items:center; font-family:var(--mono); font-size:18px; letter-spacing:.04em; }
  .gate .go { min-height:46px; border-radius:8px; background:var(--gold); color:#fff; font-weight:500; display:flex; align-items:center; justify-content:center; font-size:15px; transition:transform .15s; }
  .okline { display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; color:var(--ok); animation:rise .4s var(--ease) both; }
  .okline svg { width:22px; height:22px; }
  /* the vendor portal page (app/vendor/[id]) */
  .vp-h { display:flex; align-items:center; gap:12px; padding:16px 16px 12px; border-bottom:2px solid var(--gold-l); }
  .vp-av { width:42px; height:42px; border-radius:50%; background:#bf8a2a; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .vp-h .n { font-size:17px; font-weight:700; line-height:1.1; } .vp-h .c { font-size:13px; color:#8a8580; margin-top:2px; }
  .vp-sec { display:flex; align-items:center; gap:9px; min-height:32px; padding:0 14px; background:#f0eeea; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .vp-sec::before { content:''; width:3px; height:14px; border-radius:2px; background:currentColor; }
  .vp-row { display:grid; grid-template-columns:70px 1fr; gap:10px; padding:10px 14px; border-top:1px solid var(--hair); animation:rise .4s var(--ease) both; }
  .vp-row .tm { font-family:var(--mono); font-size:12.5px; font-weight:600; padding-top:14px; }
  .vp-row .yt { font-size:9.5px; font-weight:700; letter-spacing:.1em; color:var(--gold); margin-bottom:3px; }
  .vp-row .box { background:var(--wash); border-left:3px solid var(--gold-l); border-radius:4px; padding:7px 10px; }
  .vp-row .box b { display:block; font-size:13.5px; } .vp-row .box span { font-size:12.5px; color:var(--ink-2); }
  .vl { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; border-bottom:1px solid var(--hair); animation:rise .4s var(--ease) both; }
  .vl .n { font-size:14.5px; font-weight:500; } .vl .r { font-size:12px; color:var(--ink-3); margin-top:2px; display:flex; align-items:center; gap:6px; } .vl .r i { width:7px; height:7px; border-radius:50%; }
  .vl.you { background:var(--hover); }
  .vl .acts { display:flex; gap:6px; } .vl .acts span { width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2); } .vl .acts svg { width:15px; height:15px; }
  .ovc { position:relative; overflow:hidden; margin:12px; border-radius:12px; border:1px solid var(--line); min-height:250px; display:flex; flex-direction:column; justify-content:space-between; background:#d4d4d0; }
  .ovc img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ovc .wash2 { position:absolute; inset:0; background:linear-gradient(to right, rgba(244,243,240,.96) 0%, rgba(244,243,240,.84) 55%, rgba(244,243,240,.2) 100%); }
  .ovc .hd, .ovc .ft { position:relative; padding:16px; } .ovc .ttl { font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.05; } .ovc .dt { font-size:14px; font-weight:600; margin-top:4px; }
  .ovc .days { font-size:24px; font-weight:600; color:var(--gold); } .ovc .cnt { font-size:13px; color:var(--ink-2); }
  .ovs { margin:0 12px 12px; border-radius:12px; border:1px solid var(--line); overflow:hidden; }
  .ovs-h { display:flex; align-items:center; min-height:40px; padding:0 14px; background:var(--wash); border-bottom:1px solid #eadfbb; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
  .ovr { display:grid; grid-template-columns:84px 1fr; align-items:center; gap:12px; padding:9px 14px; border-top:1px solid var(--hair); animation:rise .4s var(--ease) both; }
  .ovr:first-of-type { border-top:0; }
  .ovr .tp { min-height:36px; display:flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--line); background:var(--raised); font-size:13px; font-weight:600; }
  .ovr.now .tp { background:#f5eed8; border-color:#eadfbb; color:var(--gold); }
  .ovr .ti { font-size:14px; font-weight:600; } .ovr .vn { font-size:12.5px; color:var(--ink-2); }

  /* ============ SCREENSHOT TOUR (desktop only - Juan: great on desktop, horrible on a phone) ============ */
  .tour { display:none; }
  @media (min-width:1000px) {
    .tour { display:block; }
    .tour-grid { display:grid; grid-template-columns:220px 1fr; gap:36px; align-items:start; }
    .tour-rail { display:flex; flex-direction:column; border-top:1px solid var(--line); }
    .tour-rail button { text-align:left; min-height:52px; padding:0 14px; border-bottom:1px solid var(--line); font-size:15px; font-weight:500; color:var(--ink-3); position:relative; }
    .tour-rail button[aria-selected="true"] { color:var(--ink); background:var(--wash); font-weight:600; }
    .tour-rail button[aria-selected="true"]::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:2px; background:var(--gold); }
    .tour-pane { position:relative; aspect-ratio:1512/850; border-radius:14px; border:1px solid var(--line); overflow:hidden; background:#fff; }
    .tour-pane img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; opacity:0; transition:opacity .45s var(--ease); }
    .tour-pane img.on { opacity:1; }
  }

  /* ---------- photo band ---------- */
  .pband { position:relative; min-height:460px; display:flex; align-items:flex-end; overflow:hidden; color:#fff; background:var(--ink-0); }
  .pband img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.35) brightness(.82); }
  .pband::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,18,15,.88), rgba(20,18,15,.25) 60%, rgba(20,18,15,.1)); }
  /* phone: the type covers most of the photo, so the whole band goes dark, not just the foot */
  @media (max-width:899px) { .pband::after { background:linear-gradient(to top, rgba(13,12,11,.9) 0%, rgba(13,12,11,.68) 55%, rgba(13,12,11,.5) 100%); } }
  .pband .wrapx { position:relative; z-index:2; padding-top:80px; padding-bottom:64px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
  .pband .h2 { color:#fff; max-width:16ch; } .pband p { margin:0; color:rgba(255,255,255,.82); font-size:17px; max-width:44ch; line-height:1.55; }

  /* ============ PLANNERS ============ */
  .p-hero { padding:84px 0 20px; }
  .p-hero .h2 { max-width:16ch; }
  .plead { display:grid; gap:24px; }
  @media (min-width:1000px) { .plead { grid-template-columns:1.2fr 1fr; align-items:end; } }
  .p-includes { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--ink-2); }
  .p-includes span { display:inline-flex; align-items:center; gap:8px; } .p-includes span::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-l); }
  .p-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
  @media (min-width:1000px) { .p-layout { grid-template-columns:230px 1fr; gap:56px; } }
  .jump { display:none; }
  @media (min-width:1000px) {
    .jump { display:flex; flex-direction:column; position:sticky; top:calc(var(--navh) + 28px); align-self:start; padding-top:96px; }
    .jump .k { font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
    .jump a { position:relative; display:grid; grid-template-columns:26px 1fr; align-items:center; min-height:40px; font-size:14.5px; font-weight:500; color:var(--ink-3); text-decoration:none; transition:color .2s; }
    .jump a small { font-family:var(--display); font-size:12px; font-weight:600; color:var(--ink-4); transition:color .2s; }
    .jump a:hover { color:var(--ink); }
    .jump a[aria-current="true"] { color:var(--ink); font-weight:600; } .jump a[aria-current="true"] small { color:var(--gold); }
    .jump a::before { content:''; position:absolute; left:-16px; top:10px; bottom:10px; width:3px; border-radius:2px; background:var(--gold); transform:scaleY(0); transition:transform .3s var(--ease); }
    .jump a[aria-current="true"]::before { transform:none; }
    .jump a.btn { display:inline-flex; margin-top:22px; width:100%; min-height:44px; color:#fff; font-size:14.5px; }
    .jump a.btn::before { display:none; }
    .jump a.btn:hover { color:#fff; }
    .jump .fine { margin-top:10px; }
    .jump a.jump-demo { display:flex; justify-content:center; grid-template-columns:none; margin-top:10px; min-height:40px; font-size:14.5px; font-weight:500; color:var(--gold-d); }
    .jump a.jump-demo::before { display:none; }
    .jump a.jump-demo:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
  }
  /* phone: the jump list becomes a sticky strip of text tabs */
  .mjump { display:none; }
  @media (max-width:999px) {
    .mjump { display:flex; position:sticky; top:calc(var(--navh) + 55px); z-index:54; overflow-x:auto; scrollbar-width:none; background:rgba(248,247,244,.96); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); margin:0 calc(var(--gut) * -1); padding:0 calc(var(--gut) - 12px); }
    .mjump::-webkit-scrollbar { display:none; }
    .mjump a { position:relative; flex:none; display:flex; align-items:center; min-height:44px; padding:0 12px; font-size:14px; font-weight:500; color:var(--ink-3); text-decoration:none; white-space:nowrap; }
    .mjump a[aria-current="true"] { color:var(--ink); font-weight:600; }
    .mjump a[aria-current="true"]::after { content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--gold); }
  }
  .feat { padding:84px 0 0; scroll-margin-top:calc(var(--navh) + 110px); }
  @media (min-width:1000px) { .feat { padding:110px 0 0; scroll-margin-top:calc(var(--navh) + 20px); } }
  .feat-head { display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
  .feat-head .n { font-family:var(--display); font-size:14px; font-weight:600; color:var(--gold); }
  .feat-head .lede { max-width:54ch; }
  .soon { display:inline-flex; align-self:flex-start; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sent); }
  .soon::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }

  /* status chip (inside mocks only) */
  .st { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; white-space:nowrap; }
  .st::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
  .stage-chip { display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px; border-radius:5px; font-size:12.5px; font-weight:500; white-space:nowrap; }
  .stage-chip::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--d); }

  /* ---- chaos vs calm ---- */
  .cc { height:560px; display:flex; flex-direction:column; }
  .cc-top { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--raised); }
  .cc-top .fine { display:none; } @media (min-width:700px) { .cc-top .fine { display:block; } }
  .cc-body { flex:1 1 auto; min-height:0; position:relative; }
  .cc-pane { position:absolute; inset:0; display:flex; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); }
  .cc-pane.on { opacity:1; pointer-events:auto; }
  /* Before / after must be impossible to misread: the inbox is the PROBLEM, labelled and dulled. */
  .cc-col { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
  .cc-label { flex:none; display:flex; align-items:center; gap:10px; min-height:38px; padding:0 14px; font-size:13px; }
  .cc-label b { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
  .cc-label.bad { background:#fbf1f0; color:#8e332c; border-bottom:1px solid #f0d6d2; }
  .cc-label.good { background:var(--wash); color:var(--gold-d); border-bottom:1px solid #eadfbb; }
  .cc-label.good b { letter-spacing:0; text-transform:none; font-size:13.5px; color:var(--ink); }
  .cc-label img { width:18px; height:18px; }
  .cct { display:inline-block; margin-right:7px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .cct.bad { color:#b0493d; } .cct.good { color:var(--gold); }
  .cc-pane[data-cc="0"] .mail { filter:saturate(.35); }
  .mail { flex:1 1 auto; min-height:0; display:flex; min-width:0; background:#fff; font-family:Arial, Helvetica, sans-serif; }
  .mail-side { display:none; }
  @media (min-width:760px) { .mail-side { display:flex; flex-direction:column; gap:2px; flex:0 0 170px; padding:12px 8px; border-right:1px solid #eee; font-size:13px; color:#444; } }
  .mail-side div { display:flex; justify-content:space-between; padding:7px 12px; border-radius:0 16px 16px 0; }
  .mail-side .on { background:#fce8e6; color:#c5221f; font-weight:700; }
  .mail-list { flex:1 1 auto; min-width:0; overflow:hidden; }
  .mrow { display:grid; grid-template-columns:150px 1fr 56px; gap:10px; align-items:center; min-height:40px; padding:0 14px; border-bottom:1px solid #f0f0f0; font-size:13px; color:#555; animation:mdrop .35s var(--ease) both; }
  .mrow.u { background:#fff; font-weight:700; color:#202124; } .mrow:not(.u) { background:#f6f8fc; }
  .mrow .s { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mrow .sub2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mrow .sub2 em { font-style:normal; font-weight:400; color:#777; }
  .mrow .tm { text-align:right; font-size:12px; }
  .mrow .lbl { display:inline-block; font-size:11px; font-weight:400; padding:1px 6px; border-radius:4px; margin-right:6px; }
  @keyframes mdrop { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
  @media (max-width:640px) { .mrow { grid-template-columns:1fr 44px; grid-template-rows:auto auto; padding:6px 14px; } .mrow .s { grid-column:1; } .mrow .sub2 { grid-column:1 / -1; grid-row:2; } .mrow .tm { grid-row:1; grid-column:2; } }
  .mail-over { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:var(--ink); color:#fff; font-size:14px; white-space:nowrap; opacity:0; transition:opacity .3s; font-family:var(--body); }
  .mail-over.on { opacity:1; } .mail-over b { color:var(--gold-l); font-variant-numeric:tabular-nums; }
  /* discussion, drawn off app/discussion */
  .dsc { flex:1 1 auto; min-height:0; display:flex; min-width:0; background:#fff; }
  .dsc-subj { display:none; }
  @media (min-width:900px) { .dsc-subj { display:flex; flex-direction:column; flex:0 0 220px; border-right:1px solid var(--line); background:var(--raised); } }
  .dsc-subj .k { padding:14px 16px 8px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .dsub { padding:10px 16px; border-left:3px solid transparent; }
  .dsub.on { background:#fff; border-left-color:var(--gold-l); }
  .dsub .n { font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; } .dsub .n i { width:6px; height:6px; border-radius:50%; background:var(--gold); }
  .dsub .m { font-size:12px; color:var(--ink-3); margin-top:2px; }
  .dsc-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
  .dsc-h { flex:none; padding:12px 18px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
  .dsc-h .id { font-family:var(--mono); font-size:11px; color:var(--ink-3); }
  .dsc-h .t { font-size:16px; font-weight:600; line-height:1.25; }
  .dsc-h .chips { display:flex; gap:6px; flex-wrap:wrap; }
  .dchip { display:inline-flex; align-items:center; height:24px; padding:0 9px; border-radius:6px; font-size:12px; font-weight:500; }
  .dsc-thread { flex:1 1 auto; min-height:0; overflow:hidden; padding:10px 18px; display:flex; flex-direction:column; gap:14px; justify-content:flex-end; }
  .msg { display:grid; grid-template-columns:30px 1fr; gap:10px; animation:rise .35s var(--ease) both; }
  .msg .av { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
  .msg .who3 { font-size:13px; font-weight:600; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .msg .who3 em { font-weight:500; color:var(--gold); } .msg .who3 small { font-size:10.5px; color:#c0bbb5; font-weight:400; }
  .msg .badge { font-size:9.5px; font-weight:600; letter-spacing:.08em; padding:1px 6px; border-radius:4px; background:var(--raised); border:1px solid var(--line); color:var(--ink-3); }
  .msg p { margin:2px 0 0; font-size:13.5px; line-height:1.45; color:#3a3830; }
  .msg.me { grid-template-columns:1fr; justify-items:end; }
  .msg.me .bub { max-width:80%; background:var(--wash); border:1px solid rgba(201,164,74,.25); border-radius:12px 12px 4px 12px; padding:8px 12px; font-size:13.5px; line-height:1.45; }
  .msg.me .who3 { justify-content:flex-end; }
  .seenby { display:flex; gap:3px; margin-top:5px; } .seenby i { width:14px; height:14px; border-radius:50%; font-style:normal; font-size:7px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  .decision { background:#e4f2ea; border:1px solid #bfe0cc; border-radius:10px; padding:10px 14px; animation:rise .4s var(--ease) both; }
  .decision .k { font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--ok); } .decision p { margin:3px 0 0; font-size:13.5px; font-weight:500; color:#1e4a33; }
  .typingl { font-size:12px; color:var(--ink-3); font-style:italic; min-height:18px; }
  .dsc-comp { flex:none; margin:0 18px 14px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:6px 6px 6px 12px; font-size:13px; color:var(--ink-4); }
  .dsc-comp span { flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .dsc-comp b { width:34px; height:34px; border-radius:8px; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; } .dsc-comp svg { width:15px; height:15px; }
  .dsc-rail { display:none; }
  @media (min-width:1100px) { .dsc-rail { display:flex; flex-direction:column; gap:6px; flex:0 0 190px; border-left:1px solid var(--line); padding:14px; }
    .dsc-rail .k { font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 4px; }
    .dsc-rail .p { display:flex; align-items:center; gap:8px; font-size:12.5px; min-height:28px; } .dsc-rail .p i { width:22px; height:22px; border-radius:50%; font-style:normal; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; }
    .dsc-rail .f { display:flex; align-items:center; gap:8px; font-size:12.5px; min-height:30px; } .dsc-rail .f b { font-size:9px; padding:3px 5px; border-radius:4px; color:#fff; } }

  /* ---- proposal ---- */
  .prop { height:640px; display:flex; flex-direction:column; }
  .pb-head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:0 14px; border-bottom:1px solid var(--line); background:#fff; font-size:13px; }
  .pb-head .l { display:flex; align-items:center; gap:10px; min-width:0; } .pb-head .l b { font-size:14px; } .pb-head .l small { font-family:var(--mono); font-size:11px; color:var(--ink-3); }
  .pb-head .r { display:flex; align-items:center; gap:14px; }
  .pb-head .send { height:32px; padding:0 14px; border-radius:6px; background:var(--gold); color:#fff; font-size:12.5px; font-weight:600; display:none; align-items:center; }
  @media (min-width:700px) { .pb-head .send { display:inline-flex; } }
  .pb-canvas { flex:1 1 auto; min-height:0; overflow:hidden; background:#e9e5dd; padding:22px 16px 0; }
  .paper { max-width:620px; margin:0 auto; background:var(--pp); color:#241f1b; border-radius:4px 4px 0 0; transition:transform .7s cubic-bezier(.2,.7,.2,1), background .4s; font-family:var(--pbody); }
  .pcover { position:relative; overflow:hidden; padding:28px 34px 30px; min-height:240px; display:flex; flex-direction:column; gap:10px; background:var(--pcov); color:var(--pcink); transition:background .4s; }
  .pcover.center { align-items:center; text-align:center; justify-content:center; }
  .plogo { font-family:'Cormorant Garamond',serif; font-size:13px; letter-spacing:.22em; font-weight:600; opacity:.9; }
  .plogo small { display:block; font-family:var(--body); font-size:8px; letter-spacing:.3em; margin-top:2px; opacity:.8; }
  .pcover.photo { min-height:280px; }
  .pcimg, .pctint { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pcover > .plogo, .pcover > .pnames, .pcover > .pdate { position:relative; }
  .pcover .pnames { margin-top:auto; }
  .pdate { font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--pacc2); font-weight:600; }
  .pnames { font-family:var(--pdisp); font-weight:var(--pw); font-size:48px; line-height:1; letter-spacing:var(--pls); text-transform:var(--ptt); }
  .pline { font-family:var(--pdisp); font-size:17px; opacity:.85; max-width:30ch; }
  .psec { padding:22px 34px 8px; }
  .peb { font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--pacc); font-weight:600; margin-bottom:6px; }
  .ph { font-family:var(--pdisp); font-weight:var(--pw); font-size:24px; letter-spacing:var(--pls); text-transform:var(--ptt); margin:0 0 12px; }
  .fee { display:grid; grid-template-columns:1fr auto; gap:3px 20px; padding:11px 0; border-top:1px solid rgba(36,31,27,.07); }
  .fee .t { font-size:15px; font-weight:600; } .fee .n { font-size:13px; color:#6c645d; grid-column:1; } .fee .p { grid-row:1 / span 2; grid-column:2; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
  .fee .p s { display:block; font-size:12px; color:var(--pacc); font-weight:500; }
  .ptot { display:flex; align-items:center; justify-content:space-between; margin:10px 0 4px; padding:14px 18px; border-radius:6px; background:var(--ppanel); color:var(--ppanelink); }
  .ptot span { font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .ptot b { font-family:var(--pdisp); font-size:30px; font-weight:var(--pw); font-variant-numeric:tabular-nums; }
  .ppay { display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid rgba(36,31,27,.07); font-size:14px; } .ppay em { font-style:normal; color:var(--pacc); font-weight:600; }
  .pyes { margin:6px 34px 30px; padding:18px; border:1px solid rgba(36,31,27,.1); border-radius:6px; display:flex; flex-direction:column; gap:10px; }
  .pyes p { margin:0; font-size:14px; line-height:1.5; color:#4a4540; }
  .pyes .in { min-height:44px; border:1px solid rgba(36,31,27,.18); border-radius:6px; padding:0 12px; display:flex; align-items:center; font-size:16px; background:#fff; }
  .pyes .acc { min-height:44px; border-radius:6px; background:var(--pacc); color:#fff; font-size:14.5px; font-weight:600; display:flex; align-items:center; justify-content:center; transition:transform .15s; }
  @media (max-width:640px) {
    .pcover { padding:22px 20px 24px; min-height:210px; } .pnames { font-size:36px; } .pline { font-size:15px; }
    .psec { padding:18px 20px 6px; } .pyes { margin:6px 20px 24px; } .pb-canvas { padding:14px 10px 0; }
    .pb-head .fine { display:none; } .pb-head .l small { display:none; }
  }
  .agreed { position:absolute; inset:52px 0 0; z-index:4; display:flex; align-items:center; justify-content:center; background:rgba(233,229,221,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .35s; }
  .agreed.on { opacity:1; pointer-events:auto; }
  .agreed .c { background:#fff; border:1px solid var(--line); border-radius:12px; padding:26px 30px; text-align:center; max-width:340px; transform:translateY(10px) scale(.97); transition:transform .45s var(--ease); }
  .agreed.on .c { transform:none; }
  .agreed .k { font-size:10.5px; font-weight:700; letter-spacing:.18em; color:var(--gold); } .agreed .t { font-family:var(--display); font-size:30px; font-weight:600; letter-spacing:-.02em; margin:6px 0; } .agreed p { margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.5; }
  .looks { display:flex; gap:4px 2px; flex-wrap:wrap; margin-top:14px; }
  .looks button { position:relative; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; font-size:14px; font-weight:500; color:var(--ink-3); }
  .looks button i { width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.1); }
  .looks button[aria-pressed="true"] { color:var(--ink); font-weight:600; } .looks button[aria-pressed="true"]::after { content:''; position:absolute; left:12px; right:12px; bottom:2px; height:2px; background:var(--gold); }
  .looks .k { font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; padding-right:6px; }

  /* ---- record / payments ---- */
  .payrec { height:560px; display:flex; flex-direction:column; }
  .rec-h { flex:none; display:flex; align-items:center; gap:12px; padding:16px 18px 12px; }
  .rec-av { width:40px; height:40px; border-radius:50%; background:#eef3ef; color:#4e6552; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; }
  .rec-h .n { font-size:18px; font-weight:600; } .rec-h .m { font-size:12.5px; color:var(--ink-3); }
  .facts { flex:none; display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  @media (min-width:760px) { .facts { grid-template-columns:repeat(5, 1fr); } }
  .facts > div { padding:10px 18px; border-right:1px solid var(--hair); } .facts > div:last-child { border-right:0; }
  .facts .k { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .facts .v { font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; transition:color .3s; }
  @media (max-width:759px) { .facts .x { display:none; } }
  .prog { flex:none; padding:12px 18px 4px; }
  .prog .b { height:4px; border-radius:99px; background:#e9e5dc; overflow:hidden; } .prog .b i { display:block; height:100%; background:var(--gold); border-radius:99px; transition:width .7s var(--ease), background .3s; }
  .prog .b.late i { background:var(--err); } .prog .b.full i { background:var(--ok); }
  .prog .t { display:flex; justify-content:space-between; margin-top:7px; font-size:12.5px; color:var(--ink-3); }
  .rtabs { flex:none; display:flex; gap:4px; padding:0 8px; border-bottom:1px solid var(--line); }
  .rtabs span { position:relative; min-height:42px; display:flex; align-items:center; gap:6px; padding:0 10px; font-size:13.5px; font-weight:500; color:var(--ink-3); }
  .rtabs span small { font-size:11.5px; color:var(--ink-4); }
  .rtabs span.on { color:var(--ink); } .rtabs span.on::after { content:''; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--gold); }
  .rec-main { flex:1 1 auto; min-height:0; display:flex; }
  .ptable { flex:1 1 auto; min-width:0; }
  .pcols, .prow { display:grid; grid-template-columns:1.5fr 1fr 1fr .9fr 120px; align-items:center; gap:10px; padding:0 18px; }
  .pcols { min-height:34px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); border-bottom:1px solid var(--hair); }
  .prow { position:relative; min-height:62px; border-bottom:1px solid var(--hair); font-size:14px; transition:background .4s; }
  .prow.late::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--err); }
  .prow .d b { display:block; font-size:14px; font-weight:600; } .prow .d small { font-family:var(--mono); font-size:11px; color:var(--ink-3); }
  .prow .fine { white-space:nowrap; }
  .prow .due { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .prow .seen { font-size:12.5px; color:var(--ink-3); line-height:1.35; }
  .prow .am { font-weight:600; font-variant-numeric:tabular-nums; }
  .prow .act { justify-self:end; height:32px; padding:0 12px; border-radius:6px; border:1px solid #ded9d2; font-size:12.5px; font-weight:500; color:#4a4842; background:#fff; white-space:nowrap; }
  .prow .act.go { background:var(--gold); border-color:var(--gold); color:#fff; }
  @media (max-width:759px) { .pcols, .prow { grid-template-columns:1.4fr 1fr .9fr; } .pcols .x, .prow .x, .prow .due { display:none; } }
  .invdoc { display:none; }
  @media (min-width:1150px) { .invdoc { display:flex; flex-direction:column; gap:10px; flex:0 0 250px; margin:14px; padding:16px; border:1px solid var(--line); border-radius:6px; background:#fbfaf7; font-size:12px; }
    .invdoc .hd { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--gold); padding-bottom:8px; }
    .invdoc .hd b { color:#7a5a14; letter-spacing:.14em; font-size:12px; } .invdoc .hd small { display:block; color:var(--ink-3); font-family:var(--mono); font-size:10px; }
    .invdoc .box { border-radius:6px; padding:10px 12px; background:var(--wash); color:#7a5a14; transition:background .4s, color .4s; }
    .invdoc .box.paid { background:#eef3ef; color:#3d5a45; }
    .invdoc .box span { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; } .invdoc .box b { display:block; font-size:22px; margin-top:2px; font-variant-numeric:tabular-nums; }
    .invdoc .payb { min-height:34px; border-radius:6px; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12.5px; transition:opacity .3s; }
    .invdoc .ln { display:flex; justify-content:space-between; color:var(--ink-2); } }
  .rtoast { position:absolute; left:50%; bottom:18px; transform:translate(-50%, 8px); opacity:0; padding:10px 14px; border-radius:10px; background:var(--ink); color:#fff; font-size:13.5px; white-space:nowrap; transition:opacity .25s, transform .3s var(--ease); pointer-events:none; }
  .rtoast.on { opacity:1; transform:translate(-50%, 0); }

  /* ---- clients board ---- */
  .crm { height:540px; display:flex; flex-direction:column; background:#f4f2ec; }
  .crm-h { flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; background:#fff; border-bottom:1px solid #e4e0d8; }
  .crm-h .t { font-size:15px; font-weight:600; } .crm-h .t small { font-weight:400; color:var(--ink-3); margin-left:6px; font-size:13px; }
  .board { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:12px; }
  .col { display:flex; flex-direction:column; gap:8px; border-radius:8px; padding:10px; background:var(--cw); min-width:0; }
  .col-h { display:flex; align-items:baseline; justify-content:space-between; gap:6px; padding:2px 2px 4px; }
  .col-h .l { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#4a4842; } .col-h .l i { width:6px; height:6px; border-radius:50%; background:var(--d); }
  .col-h .c { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
  .col-h .v { font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; width:100%; margin-top:-2px; }
  .col-h { flex-wrap:wrap; }
  .ccard { background:#fff; border:1px solid #e4e0d8; border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:6px; }
  .ccard .top { display:flex; align-items:center; gap:8px; } .ccard .av { width:26px; height:26px; border-radius:50%; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
  .ccard .n { font-size:13px; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ccard .m { font-size:11px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ccard .bt { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12px; } .ccard .bt b { font-variant-numeric:tabular-nums; } .ccard .bt span { color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .ccard.hl { border-color:var(--gold-l); box-shadow:inset 0 0 0 1px var(--gold-l); }
  .ccard.new { border-style:dashed; color:var(--ink-3); font-size:12.5px; align-items:center; justify-content:center; min-height:40px; background:transparent; }
  @media (max-width:899px) {
    .board { grid-template-columns:1fr; overflow:hidden; gap:8px; }
    .col { flex-direction:row; flex-wrap:wrap; align-items:center; padding:8px; }
    .col-h { width:100%; } .col .ccard { flex:1 1 100%; } .col .ccard.new { display:none; }
    .col .ccard:nth-of-type(n+3) { display:none; }
  }

  /* ---- info pack ---- */
  .pack { height:640px; display:flex; flex-direction:column; }
  .pack-strip { flex:none; display:flex; align-items:center; border-bottom:1px solid var(--line); background:#fff; }
  .pack-strip .scroll { flex:1 1 auto; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:8px; }
  .pack-strip .scroll::-webkit-scrollbar { display:none; }
  .ptab { flex:none; min-height:34px; padding:0 12px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; }
  .ptab[aria-selected="true"] { background:var(--wash); color:var(--gold); font-weight:600; }
  .pack-strip .r { flex:none; display:none; align-items:center; gap:10px; padding:0 12px; font-size:12.5px; color:var(--ink-3); border-left:1px solid var(--line); min-height:50px; }
  @media (min-width:760px) { .pack-strip .r { display:flex; } }
  .pack-strip .pdf { height:30px; padding:0 12px; border-radius:8px; border:1px solid #e0ddd6; background:#fff; font-size:12.5px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; }
  .pack-main { flex:1 1 auto; min-height:0; display:flex; }
  .order { display:none; }
  @media (min-width:1000px) { .order { display:flex; flex-direction:column; flex:0 0 250px; border-right:1px solid var(--line); background:#fff; padding:12px 0; }
    .order .k { padding:0 16px 8px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
    .oblk { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:38px; padding:0 16px; font-size:13.5px; animation:rise .35s var(--ease) both; }
    .fam { font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:5px; white-space:nowrap; } }
  .pack-canvas { flex:1 1 auto; min-width:0; overflow:hidden; background:var(--cream); padding:22px 16px 0; }
  .sheet { max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--line); padding:30px 34px; font-size:11.5px; color:#1a1917; min-height:900px; }
  .sheet .mh { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:10px; border-bottom:1px solid #1a1917; }
  .sheet .mh b { font-size:15px; } .sheet .mh small { display:block; color:var(--ink-3); font-size:11px; margin-top:2px; } .sheet .mh .biz { font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink-2); text-align:right; }
  .sheet h5 { margin:18px 0 0; font-size:20px; font-weight:600; letter-spacing:-.01em; }
  .sheet .hint2 { font-size:11px; color:var(--ink-3); margin-top:2px; }
  .sheet h6 { margin:16px 0 6px; padding-bottom:4px; border-bottom:1px solid #e6e2da; font-size:13px; font-weight:600; }
  .kv { display:grid; grid-template-columns:110px 1fr; gap:4px 12px; line-height:1.5; } .kv span:nth-child(odd) { color:var(--ink-3); }
  .sup { display:grid; grid-template-columns:12px 1fr auto; gap:4px 8px; align-items:center; line-height:1.6; } .sup i { width:7px; height:7px; border-radius:50%; }
  .sup .t2 { font-family:var(--mono); font-size:10.5px; color:var(--ink-2); }
  .dayr { display:grid; grid-template-columns:62px 1fr; gap:8px; padding:5px 0; border-top:1px solid #f1efe9; line-height:1.4; }
  .dayr .t2 { font-family:var(--mono); font-size:10.5px; font-weight:600; }
  .daysec { margin-top:6px; padding:4px 8px; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .ld { border-radius:3px; transition:background .5s, color .5s; }
  .ld.hit { background:#e9f0f8; color:#3a7abf; }
  .pack-foot { display:flex; justify-content:space-between; margin-top:26px; padding-top:8px; border-top:1px solid #e6e2da; font-size:9px; color:var(--ink-3); }

  /* ---- access ---- */
  .acc2 { height:600px; display:flex; flex-direction:column; }
  .acc-h { flex:none; padding:16px 18px 12px; border-bottom:1px solid var(--line); }
  .acc-h b { font-size:16px; } .acc-h p { margin:3px 0 0; font-size:13px; color:var(--ink-3); }
  .acc-body { flex:1 1 auto; min-height:0; overflow:hidden; background:var(--cream); padding:14px; display:flex; flex-direction:column; gap:12px; }
  .acard { background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; flex:none; }
  .acard .k { padding:10px 14px 6px; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .arow { display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 12px; padding:10px 14px; border-top:1px solid var(--hair); }
  .arow .n { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:500; } .arow .n i { width:9px; height:9px; border-radius:50%; flex:none; }
  .arow .ls { font-size:11.5px; color:#b0aca4; margin-top:2px; padding-left:18px; transition:color .3s; }
  .arow .ls.now { color:var(--ok); }
  .arow .ls.never { color:var(--gold-d); }
  .arow .r { display:flex; align-items:center; gap:10px; }
  .arow .code { font-family:var(--mono); font-size:12px; padding:5px 9px; border-radius:6px; background:var(--raised); border:1px solid var(--line); color:var(--ink-2); display:none; }
  @media (min-width:700px) { .arow .code { display:inline-block; } }
  .arow .perm { font-size:12.5px; font-weight:500; color:var(--gold-d); min-height:32px; }
  .arow .cp { font-size:12.5px; color:var(--ink-3); min-height:32px; display:none; } @media (min-width:900px) { .arow .cp { display:inline-block; } }
  .arow .tagc { font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-d); background:var(--wash); border-radius:4px; padding:2px 6px; }
  .pgrid { grid-column:1 / -1; display:none; margin-top:6px; border:1px solid var(--line); border-radius:10px; overflow:hidden; animation:rise .35s var(--ease) both; }
  .arow.open .pgrid { display:block; }
  .pgrid .rv2 { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--raised); border-bottom:1px solid var(--line); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); flex-wrap:wrap; }
  .pgrid .rv2 .seg2 { text-transform:none; letter-spacing:0; } .pgrid .rv2 .seg2 button { min-height:30px; padding:0 10px; font-size:12.5px; }
  .pg { display:grid; grid-template-columns:1fr 56px 56px; align-items:center; min-height:34px; padding:0 12px; border-top:1px solid var(--hair); font-size:13px; }
  .pg.hd { min-height:30px; font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border-top:0; }
  .pg > span:not(:first-child) { text-align:center; }
  .cb { display:inline-flex; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line-2); align-items:center; justify-content:center; vertical-align:middle; transition:background .2s, border-color .2s; }
  .cb.on { background:var(--gold); border-color:var(--gold); } .cb svg { width:12px; height:12px; color:#fff; opacity:0; } .cb.on svg { opacity:1; }
  .cb.no { border:0; color:var(--ink-4); }
  .pg button { display:flex; justify-content:center; }

  /* ---- no logins ---- */
  .nl { display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:900px) { .nl { grid-template-columns:repeat(3, 1fr); gap:18px; } }
  .nl-c { border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; display:flex; flex-direction:column; }
  .nl-v { height:200px; background:var(--raised); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:18px; position:relative; overflow:hidden; }
  .nl-b { padding:16px 18px 18px; } .nl-b .t { font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.02em; } .nl-b p { margin:4px 0 0; font-size:14.5px; color:var(--ink-2); line-height:1.5; }

  /* ---- everything couples get: small drawn tiles ---- */
  .bento { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
  @media (min-width:900px) { .bento { grid-template-columns:repeat(3, 1fr); gap:16px; } }
  .btile { display:flex; flex-direction:column; text-align:left; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; transition:border-color .2s; }
  .btile:hover { border-color:var(--gold-l); }
  .bt-v { height:150px; border-bottom:1px solid var(--line); background:var(--raised); position:relative; overflow:hidden; }
  @media (min-width:900px) { .bt-v { height:190px; } }
  .bt-b { padding:12px 14px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .bt-b .t { font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.02em; }
  .bt-b svg { width:15px; height:15px; color:var(--gold); flex:none; }

  .p-price { margin-top:96px; padding:40px; border:1px solid var(--line); border-radius:20px; background:#fff; display:grid; gap:20px; }
  @media (min-width:900px) { .p-price { grid-template-columns:1fr auto; align-items:center; padding:44px 48px; } }
  .p-price .big { font-family:var(--display); font-weight:600; font-size:clamp(34px, 4vw, 48px); letter-spacing:-.02em; line-height:1; }
  .p-price .big small { font-family:var(--body); font-weight:400; font-size:15px; letter-spacing:0; color:var(--ink-3); margin-left:6px; }
  .p-price ul { margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:var(--ink-2); }
  .p-price li { display:flex; align-items:center; gap:8px; } .p-price li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-l); }
  .p-price .acts { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }

  /* ---------- shared end ---------- */
  .faq { display:flex; flex-direction:column; max-width:760px; }
  .faq details { border-top:1px solid var(--line); } .faq details:last-child { border-bottom:1px solid var(--line); }
  .faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:62px; padding:10px 0; font-size:17px; font-weight:500; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:''; flex:none; width:9px; height:9px; border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3); transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s var(--ease); }
  .faq details[open] summary::after { transform:rotate(225deg) translate(-2px,-2px); }
  .faq p { margin:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; }
  .faq-grid { display:grid; gap:28px; } @media (min-width:1000px) { .faq-grid { grid-template-columns:340px 1fr; gap:60px; } }
  .final { position:relative; overflow:hidden; color:#fff; background:var(--ink-0); }
  .final img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.35) brightness(.82); opacity:.7; }
  .final::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,18,15,.9), rgba(20,18,15,.35)); }
  .final .wrapx { position:relative; z-index:2; padding-top:130px; padding-bottom:110px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
  .final .h2 { color:#fff; max-width:18ch; } .final p { margin:0; color:rgba(255,255,255,.8); font-size:17px; }
  .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 edit sheet (phone: bottom sheet, desktop: a centred card) ---------- */
  .scrim { position:fixed; inset:0; z-index:90; background:rgba(26,25,23,.3); opacity:0; pointer-events:none; transition:opacity .25s; }
  .esheet { position:fixed; left:0; right:0; bottom:0; z-index:91; background:#fff; border-radius:18px 18px 0 0; transform:translateY(105%); transition:transform .32s var(--ease); padding:10px 18px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; }
  @media (min-width:700px) { .esheet { left:50%; right:auto; bottom:auto; top:50%; width:440px; border-radius:16px; border:1px solid var(--line); padding:22px; transform:translate(-50%, -46%); opacity:0; pointer-events:none; transition:opacity .2s, transform .3s var(--ease); } body[data-sheet="open"] .esheet { transform:translate(-50%, -50%); opacity:1; pointer-events:auto; } .esheet .grab { display:none; } }
  body[data-sheet="open"] .scrim { opacity:1; pointer-events:auto; }
  body[data-sheet="open"] .esheet { transform:none; }
  @media (min-width:700px) { body[data-sheet="open"] .esheet { transform:translate(-50%, -50%); } }
  .grab { width:36px; height:4px; border-radius:99px; background:var(--line-2); margin:0 auto 4px; }
  .esheet h3 { margin:0; font-size:19px; font-weight:600; letter-spacing:-.01em; }
  .esheet .sub { font-size:13px; color:var(--ink-3); margin-top:-6px; }
  .esheet label { font-size:12px; font-weight:500; color:var(--ink-2); display:flex; flex-direction:column; gap:6px; }
  .esheet textarea, .esheet input[type=text] { width:100%; resize:none; font:inherit; font-size:16px; color:var(--ink); background:var(--raised); border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; }
  .esheet textarea { min-height:76px; }
  .esheet .row { display:flex; gap:10px; } .esheet .row .btn { flex:1; min-height:48px; }
  .esheet .ghostb { min-height:48px; padding:0 18px; border-radius:12px; border:1.5px solid var(--line-2); font-weight:500; color:var(--ink-2); }
  .amount { font-size:34px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; }
  input[type=range] { width:100%; accent-color:var(--gold); height:44px; margin:0; }

  @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; animation:none !important; } .rise { opacity:1; transform:none; } }

  /* ============ PLANNERS PAGE (planners.html) ============ */
  /* journey: three steps, one stage. The stage has a FIXED height, so switching never moves the page. */
  .jr { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
  @media (min-width:1000px) { .jr { grid-template-columns:300px minmax(0,1fr); gap:44px; align-items:start; } }
  .jr-steps { display:flex; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin:0 calc(var(--gut) * -1); padding:0 calc(var(--gut) - 12px); }
  .jr-steps::-webkit-scrollbar { display:none; }
  .jr-step { position:relative; flex:none; min-height:48px; padding:0 12px; text-align:left; font-size:15px; font-weight:500; color:var(--ink-3); white-space:nowrap; }
  .jr-step b, .jr-step .d, .jr-step .soon, .jr-step i { display:none; }
  .jr-step[aria-selected="true"] { color:var(--ink); font-weight:600; }
  .jr-step[aria-selected="true"]::after { content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--gold); }
  @media (min-width:1000px) {
    .jr-steps { flex-direction:column; overflow:visible; border-bottom:0; border-top:1px solid var(--line); margin:0; padding:0; position:sticky; top:calc(var(--navh) + 24px); }
    .jr-step { display:grid; grid-template-columns:34px 1fr; gap:3px 12px; white-space:normal; padding:20px 12px 20px 16px; border-bottom:1px solid var(--line); min-height:0; }
    .jr-step[aria-selected="true"] { background:var(--wash); }
    .jr-step[aria-selected="true"]::after { left:0; right:auto; top:14px; bottom:14px; width:3px; height:auto; border-radius:2px; }
    .jr-step b { display:block; font-size:18px; font-weight:600; color:var(--gold-l); line-height:1.2; }
    .jr-step[aria-selected="true"] b { color:var(--gold); }
    .jr-step .t { font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.25; }
    .jr-step .d { display:block; grid-column:2; font-size:14px; font-weight:400; line-height:1.45; color:var(--ink-3); }
    .jr-step[aria-selected="true"] .d { color:var(--ink-2); }
    .jr-step .soon { display:inline-flex; grid-column:2; margin-top:6px; font-size:10px; }
    .jr-step i { display:block; grid-column:1 / -1; height:2px; margin-top:12px; border-radius:2px; background:var(--line); overflow:hidden; position:relative; }
    .jr-step i::after { content:''; position:absolute; inset:0; background:var(--gold-l); transform-origin:left; transform:scaleX(0); }
    .jr[data-auto="1"] .jr-step[aria-selected="true"] i::after { transform:scaleX(1); transition:transform var(--jr-dur, 16s) linear; }
  }
  .jr-stage { position:relative; height:720px; }
  .jr-pane { display:none; flex-direction:column; animation:rise .4s var(--ease) both; }
  .jr-pane.on { display:flex; }
  .jr-cap { display:none; margin:0 0 12px; font-size:15px; line-height:1.5; color:var(--ink-2); }
  @media (max-width:999px) { .jr-cap { display:block; } .jr-stage { height:auto; min-height:760px; } }

  /* control: copy left, the access card right */
  .ctl-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:center; }
  @media (min-width:1000px) { .ctl-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; } }
  .ticks { margin:22px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
  .ticks li { display:grid; grid-template-columns:26px 1fr; gap:10px; font-size:16px; line-height:1.5; color:var(--ink-2); }
  .ticks li b { color:var(--ink); font-weight:600; }
  .ticks li::before { content:''; width:26px; height:26px; border-radius:50%; background:var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239a7520' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6'/%3E%3C/svg%3E") center / 14px no-repeat; }

  /* plan cards */
  .bill { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
  .bill .save { font-size:13px; font-weight:500; color:var(--ok); }
  .plans4 { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  @media (min-width:700px) { .plans4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (min-width:1100px) { .plans4 { grid-template-columns:repeat(4, minmax(0,1fr)); } }
  .pc { position:relative; display:flex; flex-direction:column; gap:14px; padding:24px 22px 22px; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
  .pc.pick { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
  .pc .top { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:24px; }
  .pc .nm { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .pc.pick .nm { color:var(--gold-d); }
  .pc .flag { font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d); }
  .pc .pr { display:flex; align-items:baseline; gap:6px; font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
  .pc .pr small { font-size:14px; font-weight:400; letter-spacing:0; color:var(--ink-3); }
  .pc .cap { font-size:13px; color:var(--ink-3); margin-top:-6px; min-height:19px; }
  .pc .wd { font-size:15.5px; font-weight:600; }
  .pc ul { margin:0; padding:14px 0 0; list-style:none; display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.45; color:var(--ink-2); flex:1 1 auto; }
  .pc li { display:flex; gap:10px; }
  .pc li b, .faq p b { font-weight:600; color:var(--ink); } .pc li::before { content:''; flex:none; width:5px; height:5px; border-radius:50%; background:var(--gold-l); margin-top:8px; }
  .pc .cta { display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:12px; font-size:15px; font-weight:500; text-decoration:none; border:1.5px solid rgba(154,117,32,.5); color:var(--gold-d); transition:background .15s, border-color .15s; }
  .pc .cta:hover { background:var(--wash); border-color:var(--gold); }
  .pc.pick .cta { background:var(--gold); border-color:var(--gold); color:#fff; } .pc.pick .cta:hover { background:var(--gold-h); }
  .plans-note { margin-top:18px; font-size:13.5px; color:var(--ink-3); }

  /* comparison */
  .cmp-wrap { border:1px solid var(--line); border-radius:16px; background:#fff; overflow-x:auto; }
  .cmp { width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; }
  .cmp th, .cmp td { padding:14px 16px; text-align:center; border-bottom:1px solid var(--hair); white-space:nowrap; }
  .cmp th:first-child, .cmp td:first-child { text-align:left; color:var(--ink-2); white-space:normal; min-width:190px; }
  .cmp thead th { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); background:var(--raised); }
  .cmp .us { background:var(--wash); color:var(--ink); font-weight:600; }
  .cmp thead .us { color:var(--gold-d); }
  .cmp tr:last-child td { border-bottom:0; }
  .cmp .y, .cmp .n { display:inline-block; width:18px; height:18px; vertical-align:middle; background:center / 18px no-repeat; }
  .cmp .y { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%232e7a50' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5l3.2 3.2L14 5.5'/%3E%3C/svg%3E"); }
  .cmp .n { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23c8c3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 9h8'/%3E%3C/svg%3E"); }
  .cmp .p { font-size:13px; color:var(--ink-3); }

  /* ============ COUPLES PAGE (couples.html) ============ */
  .plans3 { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  @media (min-width:900px) { .plans3 { grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; } }
  .pc li.lock { color:var(--ink-4); }
  .pc li.lock::before { background:var(--line-2); }
  .pc li .tier { margin-left:auto; padding-left:8px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-d); white-space:nowrap; }
  .why { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
  @media (min-width:900px) { .why { grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; } }
  .why > div { padding:24px 22px; border:1px solid var(--line); border-radius:16px; background:#fff; }
  .why b { display:block; font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.25; }
  .why p { margin:8px 0 0; font-size:15px; line-height:1.55; color:var(--ink-2); }

  /* plan cards: the two numbers people compare, then the address, then a line or two */
  .pc .stats { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .pc .stats > div { padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-height:66px; justify-content:center; }
  .pc .stats > div + div { border-left:1px solid var(--line); }
  .pc .stats b { font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums; color:var(--ink); }
  .pc .stats b.w { font-size:18px; line-height:1.45; }
  .pc .stats span { font-size:12.5px; color:var(--ink-3); }
  .pc .seat-add { font-size:12.5px; line-height:1.4; color:var(--ink-3); margin-top:-6px; }
  .pc .addr { display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:10px; background:var(--wash); border:1px solid #eadfbb; }
  .pc .addr span { font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d); }
  .pc .addr b { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); overflow-wrap:anywhere; }
  .pc .cap { margin-top:-8px; }
  .pc li .muted { color:var(--ink-3); font-size:13.5px; }
  .pc .seat-kick { margin:auto 0 -6px; font-size:12.5px; line-height:1.4; color:var(--ink-3); }
  .pc ul + .cta { margin-top:auto; }
  /* breathing room between the list and the button (Juan, 24 Sep) */
  .pc ul { padding-bottom:18px; }