/* /pr-templates/ signup page (pr-templates/index.php). Loaded after legal-v9.css and affiliates-v9.css.
   The page is built from existing components: the legal pages' layout (hero, closing card, footer) and the affiliate
   page's hero grid, sign-up card, fields, button, ticks, section head, card and expanding row (body.bp-aff-page).
   This file only adds what those don't cover, copying their measurements. No new looks (owner, 11 Nov 2026).
   (pr-templates-v9.css is the earlier version, kept for rollback.) */

/* #content is a flex column ordered by id (legal-v9.css: hero 10, closing card 30; affiliates-v9.css: its own ids) */
body.bp-prt-page #wrap #content.content > #prt-templates { order: 20 !important; }

/* hero photo: keep the writer's face and the BrandPush logo in the unmasked part */
body.bp-prt-page #legal-hero > .bp-prt-hero-photo img {
  object-position: 40% 35%;
}

/* sign-up card: the $25 popup's consent box, in the card's small text */
body.bp-prt-page #wrap .bp-prt-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0.25rem 0 0;
  color: var(--aff-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
body.bp-prt-page #wrap .bp-prt-consent .gdpr_checkbox {
  flex: 0 0 auto;
  float: none;
  margin: 0 !important;
}
body.bp-prt-page #wrap #prt-signup .bp-aff-btn[disabled] {
  cursor: progress;
  opacity: 0.85;
}
body.bp-prt-page #wrap #prt-signup {
  scroll-margin-top: 7rem;
}

/* after signup, and the closing card: the legal pages' secondary pill ("Talk to an expert"), same measurements */
body.bp-prt-page #wrap #legal-hero .bp-legal-btn-secondary,
body.bp-prt-page #wrap section.bp-legal-cta .bp-legal-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-height: 3rem;
  margin-top: var(--space-6, 1.5rem);
  padding: 0 var(--space-6, 1.5rem);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-full, 9999px);
  background: #fff;
  color: var(--legal-ink);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast, 160ms) ease, transform var(--dur-press, 140ms) var(--ease-out, ease);
}
body.bp-prt-page #wrap #legal-hero .bp-legal-btn-secondary:hover,
body.bp-prt-page #wrap section.bp-legal-cta .bp-legal-btn-secondary:hover {
  border-color: #c9ced6;
}
body.bp-prt-page #wrap #legal-hero .bp-legal-btn-secondary:active,
body.bp-prt-page #wrap section.bp-legal-cta .bp-legal-btn-secondary:active {
  transform: scale(0.98);
}
body.bp-prt-page #wrap #legal-hero .bp-legal-btn-secondary:focus-visible,
body.bp-prt-page #wrap section.bp-legal-cta .bp-legal-btn-secondary:focus-visible {
  outline: 2px solid var(--legal-link);
  outline-offset: 2px;
}
body.bp-prt-page #wrap #legal-hero .bp-legal-btn-secondary .fas,
body.bp-prt-page #wrap section.bp-legal-cta .bp-legal-btn-secondary .fas {
  color: var(--legal-link);
}
body.bp-prt-page #wrap section.bp-legal-cta .bp-legal-btn-secondary {
  margin-top: 0;
}
body.bp-prt-page #wrap section.bp-legal-cta .bp-legal-btn-secondary .fa-chevron-right {
  font-size: 0.75em;
}
body.bp-prt-page #wrap #prt-signup .bp-prt-zip {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 0.75rem;
}
body.bp-prt-page #wrap #prt-signup .bp-prt-ready-note {
  margin-top: 1.25rem;
}
body.bp-prt-page #wrap #prt-signup .bp-prt-ready-note a {
  color: var(--aff-link);
  font-weight: 600;
}
body.bp-prt-page #wrap #prt-ready-title:focus {
  outline: none;
}

/* the 16 names: two columns from 576px */
@media (min-width: 576px) {
  body.bp-prt-page #wrap .bp-prt-list {
    column-count: 2;
    column-gap: 2.5rem;
  }
  body.bp-prt-page #wrap .bp-prt-list > li {
    break-inside: avoid;
  }
}

@media (max-width: 767px) {
  body.bp-prt-page #wrap #prt-signup {
    scroll-margin-top: calc(var(--m-header-h, 73px) + 1rem);
  }
}

/* closing card without a lead line: the button keeps the lead-to-button gap of the other closing cards
   (affiliates, terms: 32px desktop, 24px phones) */
body.bp-prt-page #wrap section.bp-legal-cta h2 + .bp-legal-cta-actions {
  margin-top: 2rem;
}
@media (max-width: 767px) {
  body.bp-prt-page #wrap section.bp-legal-cta h2 + .bp-legal-cta-actions {
    margin-top: 1.5rem;
  }
}

/* the one long tick stays centred when it wraps (phones) */
body.bp-prt-page #wrap #prt-signup .bp-aff-form-ticks > li {
  text-align: center;
}

/* ---- 11 Nov, later: card head icon + template screenshot row (new classes only) ---- */

body.bp-prt-page #wrap #prt-signup .bp-legal-icon--check {
  background: #4caf7d;
  color: #fff;
}

body.bp-prt-page #wrap .bp-prt-names .bp-prt-list {
  margin-bottom: 0;
}
/* 992-1199px: stacked as on tablets (affiliates-v9.css stacks this row below 992px), so the template keeps a readable width */
@media (min-width: 992px) and (max-width: 1199px) {
  body.bp-prt-page #wrap #prt-templates .bp-aff-what-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.5rem;
  }
}

/* ---- scrollable template card (replaces the screenshot; new classes only) ---- */

/* desktop row: tall enough to read the template; the names card keeps its list centred */
@media (min-width: 1200px) {
  body.bp-prt-page #wrap #prt-templates .bp-aff-what-grid {
    grid-auto-rows: minmax(30rem, auto);
  }
}

/* the card: affiliate what-card; the title stays, the body scrolls to the card's edges */
body.bp-prt-page #wrap .bp-prt-sample {
  overflow: hidden;
}
body.bp-prt-page #wrap #content .bp-prt-sample h3 {
  margin-bottom: 1rem;
}
body.bp-prt-page #wrap .bp-prt-sample-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 12rem;
  margin: 0 -2.25rem -2rem;
  border-top: 1px solid var(--aff-rule);
}
body.bp-prt-page #wrap .bp-prt-sample-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.25rem 2.25rem 2rem;
}
/* the homepage report preview's scrollbar (#results .bp-report-preview), hidden until hover. Chrome and Safari use the
   ::-webkit-scrollbar rules below (no arrow buttons); scrollbar-width/-color would override them in Chrome and bring
   the arrows back, so those are for Firefox only. */
@supports not selector(::-webkit-scrollbar) {
  body.bp-prt-page #wrap .bp-prt-sample-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  body.bp-prt-page #wrap .bp-prt-sample:hover .bp-prt-sample-scroll,
  body.bp-prt-page #wrap .bp-prt-sample-scroll:focus-visible {
    scrollbar-color: rgba(108, 92, 231, 0.4) transparent;
  }
}
body.bp-prt-page #wrap .bp-prt-sample-scroll::-webkit-scrollbar {
  width: 7px;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll::-webkit-scrollbar-track {
  background: transparent;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  background-clip: padding-box;
}
body.bp-prt-page #wrap .bp-prt-sample:hover .bp-prt-sample-scroll::-webkit-scrollbar-thumb,
body.bp-prt-page #wrap .bp-prt-sample-scroll:focus-visible::-webkit-scrollbar-thumb {
  background-color: rgba(108, 92, 231, 0.42);
}
body.bp-prt-page #wrap .bp-prt-sample-scroll:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: -2px;
}
/* touch screens have no hover: keep the scrollbar showing */
@media (hover: none) {
  body.bp-prt-page #wrap .bp-prt-sample-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(108, 92, 231, 0.42);
  }
}
@media (hover: none) {
  @supports not selector(::-webkit-scrollbar) {
    body.bp-prt-page #wrap .bp-prt-sample-scroll {
      scrollbar-color: rgba(108, 92, 231, 0.4) transparent;
    }
  }
}

/* the template text: the affiliate FAQ answers' type (0.9375rem / 1.65, body ink), headings in the card ink */
body.bp-prt-page #wrap .bp-prt-sample-scroll p {
  margin: 0 0 0.875rem;
  color: var(--aff-body);
  font-size: 0.9375rem;
  line-height: 1.65;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll p:last-child {
  margin-bottom: 0;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll strong {
  color: var(--aff-ink);
  font-weight: 700;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll .bp-prt-doc-headline {
  font-size: 1.0625rem;
  line-height: 1.45;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll .bp-prt-doc-label {
  margin-top: 1.25rem;
  margin-bottom: 0.375rem;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 0.875rem;
  border-radius: 0.75rem;
}

/* stacked (below 1200px): no neighbour to match, so a fixed window */
@media (max-width: 1199px) {
  body.bp-prt-page #wrap .bp-prt-sample-body {
    flex: 0 0 auto;
    height: 24rem;
  }
}
@media (max-width: 767px) {
  body.bp-prt-page #wrap .bp-prt-sample-body {
    height: 22rem;
    margin: 0 -1.5rem -1.5rem;
  }
  body.bp-prt-page #wrap .bp-prt-sample-scroll {
    padding: 1rem 1.5rem 1.5rem;
  }
}

/* template preview: filled-in placeholders keep a grey dashed underline (the legal pages' muted grey) */
body.bp-prt-page #wrap .bp-prt-sample-scroll .bp-prt-fill {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: #9aa3af;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-skip-ink: none;
}

/* ---- review round: hero link, $25 in the card's top line, tighter section top (new rules only) ---- */

/* "Preview a template": the affiliate page's chevron link (a.bp-aff-more), in the hero's white */
body.bp-prt-page #wrap #legal-hero a.bp-prt-hero-link {
  display: inline-block;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
body.bp-prt-page #wrap #legal-hero a.bp-prt-hero-link .fa-chevron-right {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75em;
  vertical-align: 0.05em;
}
body.bp-prt-page #wrap #legal-hero a.bp-prt-hero-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.bp-prt-page #wrap #legal-hero a.bp-prt-hero-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}
body.bp-prt-page #wrap #prt-signup .bp-aff-join-lead strong {
  color: var(--aff-ink);
  font-weight: 600;
}

/* the templates section starts where the policy pages' body does after the hero curve (#bp-legal: 2rem) */
@media (min-width: 768px) {
  body.bp-prt-page #wrap #content #prt-templates {
    padding-top: var(--space-8, 2rem);
  }
}

/* the names card: the template card's top (title, then a full-width rule), so both cards line up */
body.bp-prt-page #wrap #content .bp-prt-names h3 {
  margin-bottom: 1rem;
}
body.bp-prt-page #wrap .bp-prt-names-body {
  margin: 0 -2.25rem;
  padding: 1.25rem 2.25rem 0;
  border-top: 1px solid var(--aff-rule);
}
@media (max-width: 767px) {
  body.bp-prt-page #wrap .bp-prt-names-body {
    margin: 0 -1.5rem;
    padding: 1rem 1.5rem 0;
  }
}

/* the template's photo: at most the width it has in the desktop card, so the stacked (wider) card doesn't turn it
   into a block taller than the reading window */
body.bp-prt-page #wrap .bp-prt-sample-scroll img {
  max-width: 30rem;
}

/* card head, corrected: the refund page's card head as it is used there (legal-v9.css .bp-legal-card-head: chip and
   title on one line, 0.75rem apart and 0.75rem above the text), the lead full width below */
body.bp-prt-page #wrap #prt-signup .bp-prt-join-title {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}
body.bp-prt-page #wrap #prt-signup .bp-prt-join-title .bp-legal-icon {
  width: 2.625rem;
  height: 2.625rem;
  font-size: 1rem;
}
body.bp-prt-page #wrap #prt-signup .bp-prt-join-title + .bp-aff-join-lead {
  margin-top: var(--space-3, 0.75rem);
}

/* "Get all 16 templates" under the cards: the homepage's chevron text link (#faq .accordion-content a,
   "Read our full guarantee policy": 0.9375rem/600, underline 0.2em on hover, chevron 0.75em 0.5rem after the text),
   in this page's link blue (affiliates-v9.css --aff-link/--aff-link-hover, as "Chat with us" and "any package"). The
   chevron's hover nudge comes from homepage-v9.css (bp7-link-chevron-nudge), as on the homepage. */
body.bp-prt-page #wrap .bp-prt-more-row {
  margin: var(--space-8, 2rem) 0 0;
}
body.bp-prt-page #wrap #content a.bp-prt-more {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}
body.bp-prt-page #wrap #content a.bp-prt-more:hover,
body.bp-prt-page #wrap #content a.bp-prt-more:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
body.bp-prt-page #wrap #content a.bp-prt-more .fa-chevron-right {
  display: inline-block;
  margin: 0 0 0 0.5rem;
  font-size: 0.75em;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.05em;
}
@media (max-width: 767px) {
  body.bp-prt-page #wrap .bp-prt-more-row {
    margin-top: var(--space-6, 1.5rem);
  }
}

/* ---- editable template sample + view toggle (new classes only) ---- */

/* card head: title left, the view toggle top right */
body.bp-prt-page #wrap .bp-prt-sample-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  margin-bottom: 1rem;
}
body.bp-prt-page #wrap #content .bp-prt-sample-head h3 {
  margin: 0;
}
/* the toggle: the legal pages' pill border, the pressed icon in the round icon chip's colours */
body.bp-prt-page #wrap .bp-prt-view {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-full, 9999px);
  background: #fff;
}
body.bp-prt-page #wrap .bp-prt-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aff-muted);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast, 160ms) ease, color var(--dur-fast, 160ms) ease;
}
body.bp-prt-page #wrap .bp-prt-view-btn:hover {
  color: var(--aff-ink);
}
body.bp-prt-page #wrap .bp-prt-view-btn[aria-pressed="true"] {
  background: var(--legal-icon-bg);
  color: var(--legal-link);
}
body.bp-prt-page #wrap .bp-prt-view-btn:focus-visible {
  outline: 2px solid var(--aff-link);
  outline-offset: 1px;
}
@media (pointer: coarse) {
  body.bp-prt-page #wrap .bp-prt-view-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* editable fields: like editing a live document (no box): the dashed line turns solid blue, a blue caret, and the
   field's hint in grey while it is empty */
body.bp-prt-page #wrap .bp-prt-sample-scroll .bp-prt-fill {
  cursor: text;
}
body.bp-prt-page #wrap .bp-prt-sample-scroll .bp-prt-fill:hover {
  text-decoration-color: var(--aff-link);
}
body.bp-prt-page #wrap .bp-prt-sample-scroll .bp-prt-fill.is-editing {
  outline: none;
  text-decoration-style: solid;
  text-decoration-color: var(--aff-link);
  caret-color: var(--aff-link);
}
body.bp-prt-page #wrap .bp-prt-sample-scroll .bp-prt-fill.is-editing.is-empty::after {
  content: attr(data-label);
  color: var(--aff-muted);
  pointer-events: none;
}
body.bp-prt-page #wrap .bp-prt-sample.is-template .bp-prt-sample-scroll .bp-prt-fill {
  cursor: pointer;
}

/* the toggle and the expand button side by side, top right of the card */
body.bp-prt-page #wrap .bp-prt-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

/* larger view: the changelog image zoom's dialog (transparent dialog, rgba(10, 20, 35, 0.85) backdrop); the card
   fills it */
/* (page scroll is stopped by pr-templates-v9.js while the dialog is open, not by overflow: hidden, which would remove
   the scrollbar and shift the page sideways) */
body.bp-prt-page #wrap #prt-sample-dialog .bp-prt-sample-scroll {
  overscroll-behavior: contain;
}
body.bp-prt-page #wrap .bp-prt-dialog {
  --prt-page-h: min(calc(100vh - 2rem), 68rem, calc((100vw - 2rem) * 11 / 8.5));
  width: calc(var(--prt-page-h) * 8.5 / 11); /* a portrait page (US Letter, like the template) */
  height: var(--prt-page-h);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
body.bp-prt-page #wrap .bp-prt-dialog::backdrop {
  background: rgba(10, 20, 35, 0.85);
}
body.bp-prt-page #wrap #prt-sample-dialog .bp-prt-sample {
  width: 100%;
  height: 100%;
  box-shadow: 0 30px 60px rgba(8, 24, 48, 0.35); /* the affiliate join card's lifted shadow */
}
body.bp-prt-page #wrap #prt-sample-dialog .bp-prt-sample-body {
  flex: 1 1 auto;
  height: auto;
}
/* a little more room and type size in the larger view */
body.bp-prt-page #wrap #prt-sample-dialog .bp-prt-sample-scroll p {
  font-size: 1rem;
}
body.bp-prt-page #wrap #prt-sample-dialog .bp-prt-sample-scroll .bp-prt-doc-headline {
  font-size: 1.25rem;
}
body.bp-prt-page #wrap #prt-sample-dialog .bp-prt-sample-scroll img {
  max-width: 36rem;
}
/* the card's place on the page while it is in the dialog */
body.bp-prt-page #wrap .bp-prt-sample-ghost {
  visibility: hidden;
}

/* the morph between the card's place on the page and the dialog */
::view-transition-group(prt-sample) {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(8, 24, 48, 0.25);
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
::view-transition-old(prt-sample),
::view-transition-new(prt-sample) {
  inset: 0 auto auto 0;
  width: auto;
  height: auto;
}
::view-transition-old(prt-sample) {
  animation: bp-prt-vt-out 200ms ease-out both;
}
::view-transition-new(prt-sample) {
  animation: bp-prt-vt-in 260ms ease-out both;
}
@keyframes bp-prt-vt-out {
  to { opacity: 0; }
}
@keyframes bp-prt-vt-in {
  from { opacity: 0; }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
/* browsers without view transitions: the dialog fades in */
@supports not (view-transition-name: none) {
  body.bp-prt-page #wrap .bp-prt-dialog[open] {
    animation: bp-prt-dialog-in 200ms ease-out;
  }
  @keyframes bp-prt-dialog-in {
    from { opacity: 0; transform: scale(0.98); }
  }
}
@media (max-width: 767px) {
  body.bp-prt-page #wrap .bp-prt-dialog {
    width: calc(100vw - 1.5rem);
    height: calc(100vh - 1.5rem);
    height: calc(100dvh - 1.5rem);
  }
}

/* ---- 11 Nov: phone hero spacing + chat bubble (the two parts of the evening round Victor kept) ---- */
/* phones (375x812): tighter hero so the form's button is on the first screen */
@media (max-width: 767px) {
  body.bp-prt-page #wrap #legal-hero {
    padding-top: calc(var(--m-header-h, 73px) + 0.75rem);
  }
  body.bp-prt-page #wrap #legal-hero .bp-aff-hero-eyebrow {
    margin-bottom: 0.5rem;
  }
  body.bp-prt-page #wrap #legal-hero .bp-aff-hero-lead {
    margin: 0.625rem 0 0.75rem;
  }
  body.bp-prt-page #wrap #legal-hero .bp-aff-hero-grid {
    row-gap: 1.25rem;
  }
  body.bp-prt-page #wrap #prt-signup.bp-aff-join-card {
    padding-top: 1.25rem;
  }
  body.bp-prt-page #wrap #prt-signup .bp-aff-join-head {
    margin-bottom: 1rem;
  }
  body.bp-prt-page #wrap #prt-signup .bp-aff-field {
    margin-bottom: 0.75rem;
  }
  body.bp-prt-page #wrap #prt-signup .bp-aff-field input {
    height: 2.875rem;
  }
  body.bp-prt-page #wrap #prt-signup .bp-aff-form .bp-aff-btn--block {
    margin-top: 1rem;
  }
  /* the chat bubble sits over the form: hidden while the sign-up card is on screen (pr-templates-v9.js) */
  body.bp-prt-chat-hidden .intercom-faceade,
  body.bp-prt-chat-hidden .intercom-lightweight-app-launcher,
  body.bp-prt-chat-hidden .intercom-launcher-frame,
  body.bp-prt-chat-hidden .intercom-launcher {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}