/* PD_ASSET_VERSION 1.31.0 */
/* Partner Desk storefront  v1.3.0
   assets/pd-site.css

   The public page at ads.theirdomain.com. --pd-accent and --pd-ink are set
   inline per partner from their scanned brand, so this sheet must never
   hardcode a brand color outside the fallbacks below. */

/* The hidden attribute is display:none from the UA stylesheet, which any
   explicit display rule beats. .grid and .pickgrid both set display:grid, so
   every tab panel stayed visible and the tabs looked broken while actually
   working. This has to come first and it has to be !important. */
[hidden] { display: none !important; }

:root {
  --pd-accent: #4F46E5;
  --pd-ink: #111827;
  --pd-muted: #5B6472;
  --pd-line: #E5E7EB;
  --pd-bg: #FFFFFF;
  --pd-alt: #F8FAFC;
  --pd-radius: 14px;
  --pd-measure: 68ch;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pd-bg);
  color: var(--pd-ink);
  font: 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--pd-accent); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 740px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--pd-line);
}
.bar { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pd-ink); flex: none; }
.brand img { height: 34px; width: auto; display: block; }
.brand-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--pd-accent); }
.brand-name { font-weight: 680; font-size: 17px; letter-spacing: -.01em; }

.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav a {
  color: var(--pd-muted); text-decoration: none; font-size: 15px; font-weight: 550;
  padding: 8px 12px; border-radius: 9px;
}
.nav a:hover { color: var(--pd-ink); background: var(--pd-alt); }
.nav a.btn { color: #fff; }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
.burger span { display: block; width: 24px; height: 2px; background: var(--pd-ink); margin: 5px 0; border-radius: 2px; transition: transform .18s, opacity .18s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--pd-accent); color: #fff;
  border: 0; border-radius: 10px; padding: 13px 24px;
  font: inherit; font-size: 16px; font-weight: 620; cursor: pointer; text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn-sm { padding: 9px 16px; font-size: 14.5px; }
.btn-sec { background: #fff; color: var(--pd-ink); border: 1px solid var(--pd-line); }
.btn-sec:hover { border-color: var(--pd-accent); color: var(--pd-accent); filter: none; }

/* ---------- hero ---------- */
.hero { padding: 84px 0 64px; }
.hero .eyebrow {
  margin: 0 0 14px; font-size: 13.5px; font-weight: 680; letter-spacing: .07em;
  text-transform: uppercase; color: var(--pd-accent);
}
.hero h1 {
  margin: 0 0 20px; font-size: clamp(34px, 5.4vw, 56px); line-height: 1.08;
  letter-spacing: -.025em; font-weight: 720; max-width: 17ch;
}
.hero .lede { margin: 0 0 30px; font-size: clamp(17px, 2vw, 20px); color: var(--pd-muted); max-width: 56ch; }
.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.from { color: var(--pd-muted); font-size: 15px; }
.from strong { color: var(--pd-ink); }

/* ---------- sections ---------- */
.section { padding: 66px 0; }
.section.alt { background: var(--pd-alt); border-top: 1px solid var(--pd-line); border-bottom: 1px solid var(--pd-line); }
.section h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.02em; font-weight: 700; }
.section .sub { margin: 0 0 34px; color: var(--pd-muted); max-width: 58ch; font-size: 17px; }
.section .lede { color: var(--pd-muted); font-size: 18px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.grid .card { display: flex; flex-direction: column; }
.grid .card .price { margin-top: auto; padding-top: 10px; }
.card { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 26px; }
.card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.card p { margin: 0 0 12px; color: var(--pd-muted); font-size: 15.5px; }
.card .price { color: var(--pd-ink); font-size: 15px; font-weight: 560; margin: 0; }

.pkgs .pkg { display: flex; flex-direction: column; }
.pkg-price { font-size: 30px; font-weight: 720; letter-spacing: -.02em; color: var(--pd-ink); margin: 0 0 12px; }
.pkg .btn-sec { margin-top: auto; align-self: flex-start; }

/* ---------- form ---------- */
.bookform { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 28px; }
.field { margin-bottom: 20px; }
label { display: block; font-size: 14.5px; font-weight: 620; margin: 0 0 7px; }
.req { color: var(--pd-muted); font-weight: 500; font-size: 12.5px; }
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=date], input[type=number], textarea, select {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px;
  border: 1px solid var(--pd-line); border-radius: 10px; background: #fff; color: var(--pd-ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid color-mix(in srgb, var(--pd-accent) 38%, white);
  outline-offset: 1px; border-color: var(--pd-accent);
}
textarea { min-height: 116px; resize: vertical; }
.hint { color: var(--pd-muted); font-size: 13.5px; margin: 8px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note { border-radius: 11px; padding: 16px 18px; margin: 0 0 22px; font-size: 15.5px; }
.note.good { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.note.bad  { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.note strong { display: block; margin-bottom: 4px; }
.note ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------- legal ---------- */
.legal h1 { font-size: 32px; letter-spacing: -.02em; margin: 0 0 20px; }
.legal h3 { font-size: 18px; margin: 28px 0 8px; }
.legal p { color: var(--pd-muted); max-width: var(--pd-measure); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--pd-line); padding: 40px 0 56px; background: #fff; }
.foot { color: var(--pd-muted); font-size: 14.5px; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; }
.foot nav a { color: var(--pd-muted); text-decoration: none; }
.foot nav a:hover { color: var(--pd-accent); }
.foot .copy { margin: 0; font-size: 13.5px; }

/* ---------- mobile ---------- */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .burger { display: block; }
  .bar { flex-wrap: wrap; gap: 12px; }
  .nav {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 10px 0 4px; margin-left: 0; border-top: 1px solid var(--pd-line);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 12px; font-size: 16px; }
  .nav a.btn { text-align: center; margin-top: 6px; }
  .hero { padding: 56px 0 44px; }
  .section { padding: 48px 0; }
  .card, .bookform { padding: 20px; }
}

/* ---------- v1.5: the booking flow ---------- */

.book { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; } }

.book-progress { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 26px; flex-wrap: wrap; }
.book-progress li { display: flex; align-items: center; gap: 8px; color: var(--pd-muted); font-size: 13.5px; font-weight: 550; }
.book-progress li:not(:last-child)::after { content: ''; width: 18px; height: 1px; background: var(--pd-line); margin-left: 4px; }
.book-progress .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pd-alt); border: 1px solid var(--pd-line); font-size: 12px; font-weight: 680;
}
.book-progress li.is-now { color: var(--pd-ink); }
.book-progress li.is-now .n { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.book-progress li.is-done .n { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }

.book-pane { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 26px; }
.book-pane h3 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.015em; }
.book-pane .sub { margin: 0 0 22px; color: var(--pd-muted); font-size: 15.5px; }
.book-pane h4 { margin: 24px 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--pd-muted); }

.pickgrid {
  display: grid;
  /* auto-FILL, not auto-fit. auto-fit collapses empty tracks, so a row with
     two cards stretched them to full width while a full row above stayed
     narrow. auto-fill keeps every track the same width. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* Cards were sitting almost edge to edge, which made a grid of them read as
     one block rather than a set of separate things to choose between. */
  gap: 16px;
  align-items: stretch;
  margin-bottom: 8px;
}
.pickgrid .pick { display: flex; flex-direction: column; }
.pickgrid .pick .lead { margin-top: auto; padding-top: 8px; }
.pick {
  border: 1.5px solid var(--pd-line); border-radius: 11px; padding: 18px 18px 16px; cursor: pointer;
  transition: border-color .12s, background .12s; position: relative; background: #fff;
}
.pick:hover { border-color: color-mix(in srgb, var(--pd-accent) 50%, white); }
.pick.is-picked { border-color: var(--pd-accent); background: color-mix(in srgb, var(--pd-accent) 5%, white); }
.pick.is-picked::after {
  content: '\2713'; position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--pd-accent); color: #fff;
  font-size: 12px; display: grid; place-items: center;
}
.pick strong { display: block; font-size: 15.5px; margin-bottom: 6px; padding-right: 30px; line-height: 1.35; }
.pick .price { font-size: 17px; font-weight: 700; margin: 8px 0 8px; }
.pick p { margin: 0; color: var(--pd-muted); font-size: 13.5px; line-height: 1.55; }
.pick .gets { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pd-line);
              font-size: 13px; color: var(--pd-ink); font-weight: 560; }
.pick .lead { display: block; margin-top: 10px; color: var(--pd-muted); font-size: 12.5px; }
.pick .pick-img { margin: -18px -18px 14px; }

.book-side { background: var(--pd-alt); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); padding: 20px; position: sticky; top: 90px; }
.book-side h4 { margin: 0 0 14px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--pd-muted); }
.sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--pd-line); }
.sum-line:last-child { border-bottom: 0; }
.sum-total { display: flex; justify-content: space-between; padding: 12px 0 4px; margin-top: 8px; border-top: 2px solid var(--pd-ink); font-weight: 720; font-size: 17px; }
.sum-est { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pd-line); }
.sum-est h4 { margin-bottom: 8px; }
.sum-note { margin: 2px 0 10px; font-size: 12.5px; color: var(--pd-muted); }
.sum-quote { margin: 12px 0 0; font-size: 13px; color: var(--pd-warn, #92400E); background: #FFFBEB; border: 1px solid #FDE68A; padding: 10px 12px; border-radius: 8px; }

.book-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.book-back { background: none; border: 0; color: var(--pd-muted); font: inherit; cursor: pointer; text-decoration: underline; }
.book-note { border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: 14.5px; }
.book-note.good { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.book-note.bad { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.book-note strong { display: block; margin-bottom: 3px; }

.cr-drop { border: 2px dashed var(--pd-line); border-radius: 12px; padding: 30px 20px; text-align: center; cursor: pointer; }
.cr-drop:hover, .cr-drop.is-over { border-color: var(--pd-accent); background: color-mix(in srgb, var(--pd-accent) 5%, white); }
.cr-drop.is-busy { opacity: .6; }
.cr-drop strong { display: block; font-size: 16px; margin-bottom: 4px; }
.cr-drop span { color: var(--pd-muted); font-size: 14px; }
.cr-result { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.cr-preview img { max-width: 220px; max-height: 150px; border-radius: 9px; border: 1px solid var(--pd-line); }
.cr-checks ul { list-style: none; padding: 0; margin: 8px 0 12px; }
.cr-checks li { font-size: 14px; padding: 3px 0 3px 22px; position: relative; }
.cr-checks li.ok::before { content: '\2713'; position: absolute; left: 0; color: #047857; font-weight: 700; }
.cr-checks li.warn::before { content: '!'; position: absolute; left: 0; color: #B45309; font-weight: 700; }
.spec { padding: 10px 0; border-bottom: 1px solid var(--pd-line); font-size: 14px; }
.spec:last-child { border-bottom: 0; }
.spec strong { display: block; }
.spec span { color: var(--pd-muted); font-size: 13px; }
.spec p { margin: 4px 0 0; color: var(--pd-muted); font-size: 13px; }

.fitter { position: fixed; inset: 0; background: rgba(17,24,39,.7); z-index: 300; display: grid; place-items: center; padding: 24px; }
.fitter-in { background: #fff; border-radius: 14px; padding: 24px; max-width: 760px; width: 100%; }
.fitter-in h4 { margin: 0 0 14px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--pd-ink); }
.fitter canvas { display: block; max-width: 100%; background: #000; border-radius: 8px; cursor: grab; touch-action: none; }
.fitter canvas:active { cursor: grabbing; }
.fitter-zoom { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: 14px; }
.fitter-zoom input { flex: 1; }
.fitter-hint { color: var(--pd-muted); font-size: 13px; margin: 0 0 16px; }
.fitter-actions { display: flex; gap: 10px; justify-content: flex-end; }

.card-element { border: 1px solid var(--pd-line); border-radius: 10px; padding: 16px; margin-bottom: 16px; min-height: 44px; }

/* Optional imagery on offerings. A desk with no pictures reads as a clean
   price list, so nothing here renders a placeholder when the image is absent. */
.pick-img, .card-img { margin: -6px -6px 12px; border-radius: 9px; overflow: hidden; background: var(--pd-alt); }
.card-img { margin: -8px -8px 14px; }
.pick-img img, .card-img img { display: block; width: 100%; height: 132px; object-fit: cover; }
.card-img img { height: 160px; }

/* ---------- v1.10: sections a desk adds itself ---------- */
.pd-custom { position: relative; }
.pd-custom.has-bg { color: #fff; }
.pd-custom.has-bg h2, .pd-custom.has-bg .lede, .pd-custom.has-bg p { color: inherit; }
.pd-custom.is-center { text-align: center; }
.pd-custom.is-center .lede { margin-left: auto; margin-right: auto; }
.pd-bg-scrim { position: absolute; inset: 0; background: #0b1220; pointer-events: none; }
.pd-custom > .wrap { position: relative; z-index: 1; }

.pd-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; align-items: center; }
@media (max-width: 820px) { .pd-split { grid-template-columns: 1fr; gap: 24px; } }
.pd-split-img img { width: 100%; border-radius: var(--pd-radius); display: block; }
.pd-img-empty {
  display: grid; place-items: center; min-height: 180px; border: 2px dashed var(--pd-line);
  border-radius: var(--pd-radius); color: var(--pd-muted); font-size: 14px; background: var(--pd-alt);
}

.pd-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 26px; }
@media (max-width: 700px) { .pd-stats { grid-template-columns: 1fr; } }
.pd-stat b { display: block; font-size: 40px; font-weight: 730; letter-spacing: -.03em; line-height: 1; }
.pd-stat span { display: block; margin-top: 8px; color: var(--pd-muted); font-size: 14.5px; }
.pd-custom.has-bg .pd-stat span { color: rgba(255,255,255,.8); }

.pd-quote { margin: 0; border-left: 3px solid var(--pd-accent); padding-left: 24px; max-width: 60ch; }
.pd-quote p { font-size: clamp(19px,2.4vw,26px); line-height: 1.45; letter-spacing: -.015em; margin: 0 0 14px; }
.pd-quote cite { font-style: normal; color: var(--pd-muted); font-size: 14.5px; }

.pd-logos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; margin-top: 24px; align-items: center; }
@media (max-width: 760px) { .pd-logos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.pd-logo img { width: 100%; height: 62px; object-fit: contain; }

.pd-cta-band { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pd-cta-band h2 { margin: 0 0 6px; }
.pd-cta-band p { margin: 0; color: var(--pd-muted); }
.pd-custom.has-bg .pd-cta-band p { color: rgba(255,255,255,.82); }

.pd-faq details { border-bottom: 1px solid var(--pd-line); padding: 14px 0; }
.pd-faq summary { cursor: pointer; font-weight: 640; font-size: 16.5px; list-style: none; }
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after { content: '+'; float: right; color: var(--pd-accent); font-weight: 700; }
.pd-faq details[open] summary::after { content: '\2013'; }
.pd-faq p { margin: 10px 0 0; color: var(--pd-muted); max-width: 68ch; }

/* The booking summary before anything is picked */
.sum-empty { text-align: center; padding: 18px 6px 10px; color: var(--pd-muted); }
.sum-empty svg { opacity: .45; margin-bottom: 10px; }
.sum-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.sum-empty strong { display: block; color: var(--pd-ink); font-size: 14.5px; margin-bottom: 4px; }

/* Category tabs on the channel picker */
.chan-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.chan-tab {
  background: #fff; border: 1px solid var(--pd-line); border-radius: 999px;
  padding: 7px 15px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--pd-muted); cursor: pointer;
}
.chan-tab:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.chan-tab.is-on { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }

/* Equal columns, stated explicitly at every breakpoint.
   The picker lives inside the booking pane, which is narrower than the page,
   so it gets two tracks rather than three. Three there produced the cramped
   uneven cards with images taller than their text. */
.pickgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .pickgrid { grid-template-columns: 1fr; } }

/* Every card the same height, and its picture the same height as the others,
   so a row cannot end up ragged because one blurb is longer. */
.pickgrid .pick { display: flex; flex-direction: column; min-height: 100%; }
.pickgrid .pick p { flex: 1 1 auto; }
.pick-img { flex: none; }
.pick-img img { height: 118px; }
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

/* Promo code entry on the confirm step */
.promo-row { margin: 0 0 22px; padding: 16px; background: var(--pd-alt); border: 1px solid var(--pd-line); border-radius: 11px; }
.promo-row label { display: block; font-weight: 620; font-size: 14.5px; margin-bottom: 8px; }
.promo-input { display: flex; gap: 10px; }
.promo-input input { flex: 1; text-transform: uppercase; }
.hint.is-good { color: #047857; }
.hint.is-bad { color: #B91C1C; }
.sum-line.is-promo { color: #047857; font-weight: 600; }

/* Hero media, beside the headline */
.hero-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.hero-split.has-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .hero-split.has-media { grid-template-columns: 1fr; } }
.hero-media { border-radius: var(--pd-radius); overflow: hidden; background: var(--pd-alt); min-height: 220px; display: grid; place-items: center; }
.hero-media img, .hero-media video { display: block; width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.hero-media-empty { color: var(--pd-muted); font-size: 14.5px; padding: 40px 20px; text-align: center; }

/* Times Square gets its own section. It is an address, not an audience, and
   the page should say so rather than listing it beside programmatic channels. */
.board-section { background: var(--pd-alt); }
.board-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; align-items: stretch; }
@media (max-width: 1000px) { .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .board-grid { grid-template-columns: 1fr; } }
.board-card { background: #fff; border: 1px solid var(--pd-line); border-radius: var(--pd-radius); overflow: hidden; display: flex; flex-direction: column; }
.board-img { background: var(--pd-alt); }
.board-img img { display: block; width: 100%; height: 140px; object-fit: cover; }
.board-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.board-body h3 { margin: 0 0 3px; font-size: 17px; letter-spacing: -.01em; }
.board-where { margin: 0 0 10px; font-size: 13px; color: var(--pd-muted); }
.board-body p { margin: 0 0 10px; font-size: 14px; color: var(--pd-muted); }
.board-gets { font-size: 13.5px; color: var(--pd-ink) !important; font-weight: 560; }
.board-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.board-foot .price { font-size: 18px; font-weight: 720; }
.board-foot .unit, .pick .unit { display: block; font-size: 12px; font-weight: 500; color: var(--pd-muted); }

/* Date field: a native picker that does not look like an afterthought */
.date-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.date-field input[type=date] {
  flex: 1; min-width: 180px; appearance: none; -webkit-appearance: none;
  padding: 13px 14px; border: 1px solid var(--pd-line); border-radius: 10px;
  font: inherit; font-size: 15.5px; color: var(--pd-ink); background: #fff;
}
.date-field input[type=date]:focus { outline: none; border-color: var(--pd-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-accent) 18%, transparent); }
.date-field input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
.date-field input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.date-note { font-size: 13px; color: var(--pd-muted); white-space: nowrap; }

/* ---------- One indicator per option card ----------
   An option card had three marks at once: the real checkbox was still
   visible, .box drew its own tick, and .pick::after drew a circled one.
   These rules live here rather than in a page's inline <style> so they ship
   with the stylesheet and cannot lose to load order. */
.opt input[type="checkbox"],
.opt input[type="radio"] {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; pointer-events: none !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  overflow: hidden !important; white-space: nowrap !important;
}
.pick.opt::after, .opt.is-picked::after { content: none !important; display: none !important; }
.opt .box {
  flex: none; width: 20px; height: 20px; border: 2px solid var(--pd-line);
  border-radius: 6px; display: grid; place-items: center;
  font-size: 12px; line-height: 1; color: transparent; background: #fff;
  transition: background .12s, border-color .12s, color .12s;
}
.opt input:checked ~ .opt-head .box,
.opt.is-picked .box { background: var(--pd-accent); border-color: var(--pd-accent); color: #fff; }
.opt input:focus-visible ~ .opt-head .box { outline: 2px solid var(--pd-accent); outline-offset: 2px; }

/* Option card layout, used by the signup wizard */
.opt { position: relative; padding-top: 0; overflow: hidden; }
.opt .opt-img { margin: -16px -16px 14px; background: var(--pd-alt); }
.opt .opt-img img { display: block; width: 100%; height: 116px; object-fit: cover; }
.opt .opt-head { display: flex; gap: 10px; align-items: flex-start; }
.opt.is-picked { border-color: var(--pd-accent); background: color-mix(in srgb, var(--pd-accent) 5%, white); }

/* Required marker, and a spinner for any button that has work to do */
.req { font-size: 11.5px; font-weight: 600; color: var(--pd-muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.btn-spin, .pd-spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -1px; margin-right: 7px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: pd-spin .7s linear infinite;
}
@keyframes pd-spin { to { transform: rotate(360deg); } }
button[disabled] { opacity: .75; cursor: progress; }
.copy-op { display: block; margin-top: 4px; opacity: .75; font-size: 12.5px; }

/* Printing the terms: just the terms, at a readable size */
@media print {
  .site-header, .site-footer, .book-progress, .join-dock, .book-actions,
  .lp-editbar, .pd-edit-bar, nav, button { display: none !important; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  #pd-terms-print { border: 0; padding: 0; background: #fff; }
  #pd-terms-print h4 { page-break-after: avoid; margin-top: 18pt; }
  #pd-terms-print p, #pd-terms-print li { color: #000; }
  .split-vis div { border: 1px solid #000; color: #000 !important; background: #fff !important; }
  a[href]::after { content: ""; }
}

/* Nothing-to-pay confirmation */
.pay-note.good { background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 11px; padding: 16px 18px; margin-bottom: 18px; }
.pay-note.good strong { display: block; margin-bottom: 4px; color: #065F46; }
.pay-note.good { color: #047857; font-size: 14.5px; line-height: 1.55; }

/* View all: the grids need air between them or two categories collide */
[data-group-panel] + [data-group-panel] { margin-top: 34px; }
[data-chan-panel] + [data-chan-panel] { margin-top: 26px; }

/* ---------- The one and only tick on an option card ----------
   The .box element has been removed from the markup entirely, so there is no
   second indicator that CSS could fail to hide. This pseudo-element is the
   only mark, and it sits top right. */
.opt { position: relative; }
.opt::after {
  content: "";
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px;
  border: 2px solid var(--pd-line); border-radius: 50%; background: #fff;
  transition: background .12s, border-color .12s; pointer-events: none; z-index: 2;
}
.opt.is-picked::after {
  content: "\2713";
  background: var(--pd-accent); border-color: var(--pd-accent); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
.opt .opt-head { padding-right: 34px; }

/* Artwork preview after upload */
.cre-thumb {
  display: block; width: 100%; max-width: 260px; max-height: 170px;
  object-fit: contain; background: var(--pd-alt);
  border: 1px solid var(--pd-line); border-radius: 9px; margin: 0 0 10px;
}

/* ---------- Reading panel, for terms and privacy ----------
   Sized for a phone first: full height there, a card on wider screens, and the
   document itself is the only thing that scrolls so the close button never
   drifts off. */
.pd-modal {
  position: fixed; inset: 0; z-index: 2000; display: none;
  place-items: center; background: rgba(17, 24, 39, .55);
  padding: 0; overscroll-behavior: contain;
}
.pd-modal[hidden] { display: none !important; }
.pd-modal-card {
  background: #fff; width: 100%; height: 100%; max-width: none;
  display: flex; flex-direction: column; position: relative; border-radius: 0;
}
@media (min-width: 720px) {
  .pd-modal { padding: 32px; }
  .pd-modal-card { max-width: 720px; height: auto; max-height: 86vh; border-radius: 16px; }
}
.pd-modal-x {
  position: absolute; top: 10px; right: 12px; width: 40px; height: 40px;
  border: 0; background: none; font-size: 28px; line-height: 1; color: var(--pd-muted);
  cursor: pointer; border-radius: 10px; z-index: 2;
}
.pd-modal-x:hover { background: var(--pd-alt); color: var(--pd-ink); }
.pd-modal-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 26px 24px 8px; flex: 1;
}
@media (min-width: 720px) { .pd-modal-body { padding: 30px 34px 10px; } }
.pd-modal-body h2 { margin: 0 0 6px; font-size: clamp(20px, 3vw, 26px); padding-right: 40px; }
.pd-modal-body h3 { font-size: 16.5px; margin: 22px 0 6px; }
.pd-modal-body p, .pd-modal-body li { font-size: 15.5px; line-height: 1.6; color: #374151; }
.pd-modal-body .when { color: var(--pd-muted); font-size: 13.5px; margin-bottom: 20px; }
.pd-modal-foot {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 24px;
  border-top: 1px solid var(--pd-line); background: #fff;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
@media (min-width: 720px) { .pd-modal-foot { padding: 14px 34px; border-radius: 0 0 16px 16px; } }
.pd-modal-foot .btn { flex: 1 1 auto; text-align: center; }
@media (min-width: 720px) { .pd-modal-foot .btn { flex: 0 0 auto; } }

/* The partner's own margin, called out rather than buried in a paragraph */
.markup-note {
  margin-top: 22px; padding: 18px 20px; border-radius: 12px;
  background: color-mix(in srgb, var(--pd-accent) 6%, white);
  border: 1px solid color-mix(in srgb, var(--pd-accent) 26%, white);
}
.markup-note strong { display: block; margin-bottom: 6px; font-size: 16px; }
.markup-note p { margin: 0; color: var(--pd-muted); font-size: 15px; line-height: 1.6; }

/* Offer step: tabs and the running summary */
.offer-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.offer-summary {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 560;
  background: color-mix(in srgb, var(--pd-accent) 8%, white);
  color: color-mix(in srgb, var(--pd-accent) 75%, black);
}
.offer-summary.is-empty { background: #FEF3C7; color: #92400E; font-weight: 500; }

/* ---------- Encouragement ----------
   Both are pointer-events:none and sit above everything, so they can never
   swallow a click, and both are skipped entirely under reduced motion. */
.pd-float, .pd-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 3000; overflow: hidden; }
.pd-float span { position: absolute; bottom: -40px; animation: pd-rise 2.2s ease-out forwards; opacity: 0; }
@keyframes pd-rise {
  0%   { transform: translateY(0) scale(.7); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-52vh) scale(1.15); opacity: 0; }
}
.pd-confetti i {
  position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
  animation: pd-fall linear forwards;
}
@keyframes pd-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(106vh) rotate(680deg); opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .pd-float, .pd-confetti { display: none !important; } }

/* The plan builder */
.planner { border: 1.5px solid var(--pd-accent); border-radius: var(--pd-radius); padding: 20px; margin: 0 0 26px;
  background: color-mix(in srgb, var(--pd-accent) 4%, white); }
.planner h4 { margin: 0 0 4px; font-size: 17px; }
.planner-in textarea { width: 100%; margin: 12px 0 10px; }
.planner-row { display: flex; gap: 10px; flex-wrap: wrap; }
.planner-row input { flex: 1; min-width: 170px; }
.plan-result { margin-top: 16px; }
.plan-summary { font-size: 15.5px; line-height: 1.6; margin: 0 0 14px; }
.plan-items { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: pl; }
.plan-items li { counter-increment: pl; position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--pd-line); }
.plan-items li::before { content: counter(pl); position: absolute; left: 0; top: 12px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--pd-accent); color: #fff;
  font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.plan-items strong { text-transform: capitalize; }
.plan-price { float: right; font-weight: 650; }
.plan-why { display: block; color: var(--pd-muted); font-size: 14px; margin-top: 3px; }
.plan-meta p { margin: 0 0 7px; font-size: 14.5px; color: var(--pd-muted); }
.plan-meta strong { color: var(--pd-ink); }
.plan-total { margin-top: 14px; font-size: 15px; }
.sum-nudge { margin-top: 10px; padding: 9px 11px; border-radius: 8px; font-size: 13px;
  background: #FEF3C7; color: #92400E; }

/* Two paths at the top of the booking step */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 8px; }
@media (max-width: 680px) { .paths { grid-template-columns: 1fr; } }
.path {
  text-align: left; background: #fff; border: 1.5px solid var(--pd-line);
  border-radius: var(--pd-radius); padding: 20px; cursor: pointer; font: inherit;
}
.path:hover { border-color: var(--pd-accent); background: color-mix(in srgb, var(--pd-accent) 5%, white); }
.path strong { display: block; font-size: 17px; margin-bottom: 6px; }
.path span { color: var(--pd-muted); font-size: 14.5px; line-height: 1.5; }
.planner-back { background: none; border: 0; color: var(--pd-muted); cursor: pointer; font: inherit; font-size: 14px; padding: 0 0 12px; }
.planner-back:hover { color: var(--pd-accent); }

/* Something to watch while the plan is worked out */
.plan-working { margin-top: 16px; }
.plan-bar { height: 6px; background: var(--pd-line); border-radius: 999px; overflow: hidden; }
.plan-bar span { display: block; height: 100%; width: 8%; background: var(--pd-accent); border-radius: 999px; transition: width .5s ease; }
.plan-working p { margin: 10px 0 0; font-size: 14.5px; font-weight: 560; color: var(--pd-ink); }

/* Quantity stepper on a channel card */
.qty { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.qty button {
  width: 28px; height: 28px; border: 1px solid var(--pd-line); background: #fff;
  border-radius: 7px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--pd-ink);
}
.qty button:hover { border-color: var(--pd-accent); color: var(--pd-accent); }
.qty input { width: 44px; text-align: center; padding: 5px 4px; font-size: 14px; border-radius: 7px; }
.qty-note { font-size: 12.5px; color: var(--pd-muted); }

/* The volume tiers, said where somebody is choosing */
.tiers { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--pd-radius); padding: 16px 18px; margin: 0 0 20px; }
.tiers strong { display: block; margin-bottom: 8px; color: #92400E; }
.tiers ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.tiers li { font-size: 14px; color: #92400E; }
.tiers li span { font-weight: 700; }
.tiers p { margin: 0; font-size: 13px; color: #A16207; }

/* Planner: the button gets its own line so it never crowds the budget field */
.planner-row { display: block; }
.planner-row input { width: 100%; }
.planner-go { margin-top: 12px; }
.planner-go .btn { width: auto; }

/* Getting back to the planner from the picker */
.picker-back { margin: 0 0 16px; font-size: 14.5px; color: var(--pd-muted); }
.picker-back button {
  background: none; border: 0; padding: 0; font: inherit; color: var(--pd-accent);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* Tiers, now in the rail beside the total */
.book-side .tiers { margin-top: 16px; padding: 14px 16px; }
.book-side .tiers ul { flex-direction: column; gap: 4px; }
.book-side .tiers li { font-size: 13.5px; }