/* (Codex/GPT) 2026-10-04 · Current marketing.html styles, copied for the isolated local demo. */

  /* 9/5: every pop-up sheet has a clear ✕ (Seth) — the grab bar + scrim tap were the only ways out */
  .sheet-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;cursor:pointer;z-index:3;padding:0;background:var(--line,#eef0f3);color:var(--ink,#22303F)}
  .sheet-x:hover{background:var(--border,#e3e6ea)}
  /* Tokens mirror appreciation.html / reviews.html so the standalone pages read as one app. */
  :root{
    --navy:#2B4163; --navy-2:#3B5A8C; --coral:#E8785A; --coral-dark:#c95b3f;
    --cream:#F8F6F4; --card:#ffffff; --ink:#22303F; --gray:#6b7787; --faint:#9aa4b0;
    --border:#e7e3de; --lift:#f3efe9;
    --green:#1f9d55; --green-soft:rgba(31,157,85,.12);
    --warn:#B4762A; --warn-soft:rgba(224,163,46,.14);
    --shadow:0 1px 2px rgba(43,65,99,.05), 0 6px 22px rgba(43,65,99,.06);
    --line:#f1ede8;
  }
  body.tally-night{
    --cream:#0C0D0F; --card:#17191D; --lift:#1D2025; --border:#2B2F36; --line:#22262C;
    --ink:#F2F4F7; --gray:#9AA1AB; --faint:#7D848E; --coral:#F4A088; --navy-2:#7A96CD;
    --green:#5ecf96; --green-soft:rgba(94,207,150,.16); --warn:#F2B263; --warn-soft:rgba(242,178,99,.16);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 22px rgba(0,0,0,.45); color-scheme:dark;
  }
  *{box-sizing:border-box} html,body{margin:0}
  body{background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.45}
  .wrap{max-width:980px;margin:0 auto;padding:22px 20px 110px}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
  .brand{display:flex;align-items:center;gap:11px}
  .logo{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
  h1{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}
  .sub{font-size:12.5px;color:var(--gray)}
  .seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--card)}
  .seg button{appearance:none;border:0;background:transparent;font:inherit;font-size:13px;color:var(--gray);padding:8px 13px;cursor:pointer;min-height:38px;display:inline-flex;align-items:center;gap:7px}
  .seg button.on{background:var(--navy);color:#fff}
  section{display:none} section.on{display:block}
  .card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:14px}
  .card h2{margin:0 0 6px;font-size:14.5px;font-weight:600}
  .card.hot{border-color:var(--coral)}
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:12px;margin-bottom:14px}
  .tile{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:13px 15px;box-shadow:var(--shadow)}
  .tile .lab{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
  .tile .val{font-size:26px;font-weight:600;line-height:1.15;margin-top:5px;font-variant-numeric:tabular-nums}
  .tile .dl{font-size:12px;color:var(--gray);margin-top:2px}
  .bar{height:6px;background:var(--lift);border-radius:999px;overflow:hidden;margin-top:8px}
  .bar i{display:block;height:100%;background:var(--navy);border-radius:999px}
  .row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
  .row:last-child{border-bottom:0}
  .row .who{flex:1 1 auto;min-width:0}
  .row .nm{font-weight:600}
  .row .meta{font-size:12px;color:var(--gray)}
  .tag{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--lift);color:var(--gray);white-space:nowrap}
  .tag.good{background:var(--green-soft);color:var(--green)} .tag.warn{background:var(--warn-soft);color:var(--warn)} .tag.bad{background:rgba(232,120,90,.14);color:var(--coral-dark)} .tag.coral{background:rgba(232,120,90,.14);color:var(--coral-dark)} .tag.navy{background:rgba(43,65,99,.1);color:var(--navy)}
  .btn{appearance:none;font:inherit;font-size:13px;border:1px solid var(--border);background:var(--card);color:var(--ink);padding:9px 15px;border-radius:9px;cursor:pointer;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
  .btn:hover{background:var(--lift)} .btn.coral{background:var(--coral);border-color:var(--coral);color:#fff} .btn.coral:hover{background:var(--coral-dark)}
  .btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
  .btn.sm{min-height:34px;padding:6px 12px;font-size:12.5px} .btn:disabled{opacity:.5;cursor:not-allowed}
  .btn.link{border:0;background:transparent;color:var(--gray);padding:6px 8px;min-height:34px}
  .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .empty{text-align:center;color:var(--gray);font-size:13.5px;padding:26px 10px}
  .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(14px);background:var(--navy);color:#fff;font-size:13px;padding:10px 17px;border-radius:9px;opacity:0;pointer-events:none;transition:.2s;z-index:50;display:flex;gap:14px;align-items:center;max-width:92vw}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  .toast button{appearance:none;border:0;background:#fff;color:var(--navy);font:inherit;font-weight:700;border-radius:7px;padding:5px 10px;cursor:pointer}
  .lbl{font-size:11.5px;font-weight:600;color:var(--gray);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chips button{appearance:none;font:inherit;font-size:12.5px;border:1px solid var(--border);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 12px;min-height:34px;cursor:pointer}
  .chips button.on{background:var(--navy);border-color:var(--navy);color:#fff}
  .chips button.coral{color:var(--coral-dark)}
  textarea,input[type=number],input[type=text],input[type=tel],input[type=datetime-local],select{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;resize:vertical;min-height:42px}
  textarea:focus,input:focus,select:focus{outline:2px solid var(--navy-2);outline-offset:0}
  .hint{font-size:12px;color:var(--gray);margin-top:6px}
  .kv{display:flex;justify-content:space-between;font-size:12.5px;color:var(--gray);padding:4px 0}
  .kv b{color:var(--ink);font-weight:600}
  .scrim{position:fixed;inset:0;background:rgba(18,28,50,.42);opacity:0;pointer-events:none;transition:.2s;z-index:30}
  .scrim.on{opacity:1;pointer-events:auto}
  .sheet{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-radius:20px 20px 0 0;padding:14px 18px 26px;max-height:92vh;overflow:auto;transform:translateY(105%);transition:.25s;z-index:40}
  .sheet.up{transform:none}
  .sheet .grab{width:38px;height:4px;border-radius:999px;background:var(--border);margin:0 auto 12px}
  .sheet h2{margin:0;font-size:18px}
  .toggle{width:44px;height:26px;border-radius:14px;border:0;background:#c8d1dd;position:relative;cursor:pointer;flex-shrink:0;padding:0}
  .toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:left .2s}
  .toggle.on{background:var(--navy)} .toggle.on::after{left:21px}
  .setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .setrow:last-child{border-bottom:0}
  .warnbox{background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:12px}
  .okbox{background:var(--green-soft);color:var(--green);border-radius:10px;padding:10px 12px;font-size:12.5px;margin-bottom:12px}
  .draft{background:var(--lift);border-radius:10px;padding:10px 13px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
  .frow{display:grid;grid-template-columns:130px 1fr 34px;gap:8px;align-items:center;margin-bottom:8px}
  .frow .k{font-size:11.5px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}
  .frow .x{appearance:none;border:0;background:transparent;color:var(--faint);font-size:16px;cursor:pointer;min-height:34px}
  .frow .two{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;font-size:12.5px;color:var(--gray)}
  .counts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:var(--lift);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--gray);margin-top:10px}
  .counts b{color:var(--ink);font-weight:600} .counts .g{color:var(--green);font-weight:600} .counts a{color:var(--navy);cursor:pointer;text-decoration:underline}
  .ins{display:inline-block;background:rgba(232,120,90,.14);color:var(--coral-dark);border-radius:6px;padding:0 6px;font-weight:500}
  .funnel{display:flex;gap:6px;align-items:flex-end;height:70px;margin:10px 0 4px}
  .funnel div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font-size:11px;color:var(--gray);text-align:center}
  .funnel i{display:block;background:var(--navy);border-radius:5px 5px 0 0;min-height:3px}
  .funnel .c i{background:var(--coral)}
  .grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
  @media (max-width:760px){ .grid{grid-template-columns:1fr} .frow{grid-template-columns:100px 1fr 30px} }
  @media (max-width:560px){ .wrap{padding:16px 14px 110px} .sheet{padding-bottom:calc(26px + env(safe-area-inset-bottom))} }
  .tbl{width:100%;border-collapse:collapse;font-size:13px}
  .tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray);font-weight:600;padding:8px 8px;border-bottom:1px solid var(--border);white-space:nowrap}
  .tbl td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
  .tbl tr.open td{background:var(--lift)}
  .tbl .nm{font-weight:600;cursor:pointer}
  .tblwrap{overflow-x:auto}
  .who{display:flex;flex-direction:column;gap:4px;font-size:13px}
  .who div{display:flex;justify-content:space-between;gap:10px}
  .who span:last-child{color:var(--gray);white-space:nowrap}
  .chk{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
  .chk:last-child{border-bottom:0}
  .chk input{width:18px;height:18px;margin:0}
  .chk .meta{font-size:12px;color:var(--gray)}
  .chk .who{flex:1}

  /* ── 10/3 Campaigns dashboard + "Fill a stylist's book" builder ── */
  .dashhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .tile.hero{background:var(--navy);border-color:var(--navy);color:#fff}
  .tile.hero .lab,.tile.hero .dl{color:#c9d3e3} .tile.hero .val{color:#F4A088}
  .stygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:10px}
  .stycard{border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
  .stycard .bar,.stybtn .bar{margin-top:0}
  .styhead{display:flex;align-items:center;gap:10px;min-width:0}
  .styhead b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .av{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex:none}
  .stypick{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
  .stybtn{appearance:none;font:inherit;text-align:left;border:1px solid var(--border);background:var(--card);color:var(--ink);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-height:44px}
  .stybtn.on,.prodbtn.on{border-color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
  .prodpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:12px}
  .prodbtn{appearance:none;font:inherit;text-align:left;border:1px solid var(--border);background:var(--card);color:var(--ink);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;cursor:pointer;min-height:44px}
  .flab{font-size:13px;font-weight:600;margin:12px 0 6px}
  .meterrow{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px}
  .fc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fc .val{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
  .fillgrid{grid-template-columns:3fr 2fr}
  .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 14px;margin-top:4px}
  .fgrid label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--gray)}
  .fgrid select{width:100%;min-height:40px}
  .fgrid label.on select{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
  .sendcard{border:1.5px solid var(--navy)}
  .sendsum{font-size:13px;color:var(--gray);margin:10px 0 0}
  .fcside{position:sticky;top:14px}
  @media (max-width:640px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .fgrid select{font-size:13px;padding-left:8px;padding-right:22px} }
  .clist{display:none}
  .stepper{display:flex;align-items:center;gap:10px}
  .stepper b{min-width:22px;text-align:center;font-size:15px}
  .meterline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:14px;font-size:13px}
  .meterline a{color:var(--navy);font-weight:700;cursor:pointer;text-decoration:underline}
  .ccard{border-bottom:1px solid var(--line);padding:10px 0}
  .ccard:last-child{border-bottom:0}
  .ctop{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
  .ctop .meta{font-size:12px;color:var(--gray)}
  .cstats{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--gray);margin-top:6px}
  .cstats b{color:var(--ink)}
  .cmore{margin-top:10px}
  @media (max-width:760px){ .fillgrid{grid-template-columns:1fr} }
  @media (max-width:640px){ .ctable{display:none} .clist{display:block} .stypick{grid-template-columns:repeat(2,minmax(0,1fr))} .stygrid{grid-template-columns:repeat(2,minmax(0,1fr))} .stycard .btn{padding:6px 8px} }
  @media (max-width:560px){ .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .seg button{white-space:nowrap;flex:none} }
  /* ── In-app band (9/4) ──────────────────────────────────────────────────
     Inside the dashboard (body.embed) this page matches Calls / Messages /
     Clients: the header is a full-bleed band flush to the top of the view —
     navy gradient, square top corners, rounded bottom, DM Sans title, the
     segment control sitting in the band — and the content fills the view with
     the app's 28px gutters instead of a centered column. Standalone (texted
     links, OAuth returns) keeps the centered layout above. */
  body.embed .wrap{max-width:none;margin:0;padding:0 28px 90px}
  body.embed .topbar{margin:0 -28px 18px;padding:24px 32px;border-radius:0 0 22px 22px;background:linear-gradient(150deg,#2B4163 0%,#1e3154 100%);align-items:center;border-bottom:0}
  body.embed .topbar .logo{display:none}
  /* 9/22 (Seth, option B): every page title wears the Stylist app's heading font — Bricolage Grotesque 800. Body copy stays DM Sans. */
  body.embed .topbar h1{font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.05;color:#fff}
  body.embed .topbar .sub{color:#b9c4d6;font-size:13px;margin-top:2px}
  body.embed .topbar .seg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  body.embed .topbar .seg button{color:#dbe3ef}
  body.embed .topbar .seg button.on{background:#fff;color:#2B4163}
  body.embed .topbar .seg button .cnt{background:rgba(255,255,255,.18);color:#fff}
  body.embed .topbar .seg button.on .cnt{background:#2B4163;color:#fff}
  body.embed .topbar .pnav button,body.embed .topbar .plabel{color:#fff}
  body.embed.tally-night .topbar{background:linear-gradient(150deg,#0E1013 0%,#1A1D22 100%)}
  /* 9/7 (Seth): after-hours header = twilight (dusk), light body — matches the dashboard hero/nav */
  body.embed.tally-dusk .topbar{background:linear-gradient(150deg,#3a3457 0%,#241f3a 55%,#2a2140 100%)}
  body.embed.tally-dusk .topbar .seg button.on{background:#fff;color:#3a3457}
  body.embed.tally-night .topbar .seg button.on{background:#F2F4F7;color:#0E1013}
  @media (max-width:560px){ body.embed .wrap{padding:0 14px 110px} body.embed .topbar{margin:0 -14px 12px;padding:20px 16px;border-radius:0 0 18px 18px} }