/* ============================================================
   EersteJan Designs — Business Package page stylesheet
   Loaded after css/style.css: only what's specific to
   business-package.php lives here.

   The whole site is styled as a design app, and this page (the top
   package) opens the full workspace: a dark canvas where every piece
   the package covers is a frame — website, business card, social post,
   flyer, email signature. The panel under it rebrands all of them with
   the visitor's own business name and colour. That's the page's one big
   moment; everything after it stays calm and on the site's own system.

   Structure: Tokens → Buttons → Hero → Canvas + frames → Example
              designs → Designer's cursor → "Try it" panel → What's
              included → Example month → Before and after → FAQ →
              Closing → Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */

.bp {
  --bp-canvas: var(--color-ink);   /* the workspace */
  --bp-panel:  #26394a;            /* panels on the workspace */
  --bp-select: #1c8cff;            /* selection boxes, as in a design app */
  --brand:     #b3265c;            /* the example client's colour (the swatches change it) */
}

/* ---------- 2. Buttons ---------- */

.bp-btn {
  --pop: var(--color-violet);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.7em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--step-0);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-standard),
              background-color .2s var(--ease-standard), border-color .2s var(--ease-standard),
              color .2s var(--ease-standard);
}
.bp-btn--primary { background: var(--color-white); border-color: var(--color-white); color: var(--color-ink); }
.bp-btn--ghost   { border-color: rgba(255,255,255,.5); color: var(--color-white); }
.bp-btn--dark    { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-white); }
.bp-btn--primary:focus-visible,
.bp-btn--ghost:focus-visible { outline-color: var(--color-white); }
@media (hover: hover) {
  .bp-btn--primary:hover,
  .bp-btn--dark:hover  { box-shadow: 5px 5px 0 0 var(--pop); transform: translate(-2px, -2px); }
  .bp-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--color-white); }
}

/* ---------- 3. Hero ---------- */

.bp-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--color-white);
  background:
    radial-gradient(circle, rgba(255,255,255,.09) 1.1px, transparent 1.7px) center / 26px 26px,
    radial-gradient(42% 52% at 74% 44%, rgba(123,27,219,.3), transparent 72%),
    var(--bp-canvas);
  padding-block: calc(var(--header-h) + clamp(1.25rem, .5rem + 2.5vw, 3rem)) clamp(3rem, 2rem + 3vw, 5rem);
}
.bp-hero__grid { display: grid; gap: var(--space-l); align-items: center; }

.bp-hero__kicker { max-width: none; font-family: var(--font-accent); font-size: var(--step-2); line-height: 1; color: rgba(255,255,255,.88); }
.bp-hero__title {
  margin-top: .9rem;
  font-size: clamp(2.4rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--color-white);
  text-wrap: balance;
}
.bp-hero__lede { max-width: 34rem; margin-top: var(--space-s); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: rgba(255,255,255,.8); }
.bp-hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; max-width: none; margin-top: var(--space-s); }
.bp-hero__amount { font-family: var(--font-accent); font-size: var(--step-5); line-height: .9; }
.bp-hero__term { font-weight: 700; color: rgba(255,255,255,.8); }
.bp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-s); }
.bp-hero__note { display: flex; align-items: flex-start; gap: .5rem; max-width: 30rem; margin-top: var(--space-s); font-size: var(--step--1); color: rgba(255,255,255,.72); }
.bp-hero__note svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .22rem; }

/* ---------- 4. Canvas + frames ----------
   Frames are placed with --x / --y / --w (percentages of the canvas)
   and tilted with --r. Each frame is its own size container, so the
   example design inside scales with it (cqi units) at any width. They
   drop in one after another on load while the designer's cursor visits
   them: the page's one orchestrated entrance. */

.bp-stage { display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }
.bp-canvas { position: relative; aspect-ratio: 10 / 8.2; }

.bp-frame {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  z-index: var(--z, 1);
  margin: 0;
  container-type: inline-size;
  rotate: var(--r, 0deg);
  animation: bp-drop .7s var(--ease-bounce) var(--delay, 0s) both;
}
@keyframes bp-drop { from { opacity: 0; translate: 0 1.4rem; scale: .94; } }

.bp-frame--web    { --x: 37%; --y: 2%;  --w: 61%; --z: 1; --delay: .25s; }
.bp-frame--card   { --x: 0%;  --y: 12%; --w: 37%; --z: 3; --r: -5deg;  --delay: .1s; }
.bp-frame--social { --x: 5%;  --y: 55%; --w: 26%; --z: 2; --r: 3deg;   --delay: .45s; }
.bp-frame--flyer  { --x: 38%; --y: 60%; --w: 19%; --z: 2; --r: -2deg;  --delay: .6s; }
.bp-frame--sig    { --x: 61%; --y: 69%; --w: 37%; --z: 3; --r: 1.5deg; --delay: .75s; }

/* Frame name above each frame, as a design app shows it */
.bp-frame__label {
  display: block;
  margin-bottom: .4rem;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .2s var(--ease-standard);
}
.bp-frame__art { position: relative; }

/* Selection box with corner handles (the same handles as the site's
   focused form fields). The website starts selected; a change in the
   panel briefly selects every frame it touched. */
.bp-frame__art::before,
.bp-frame__art::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--ease-standard);
}
.bp-frame__art::after { inset: -6px; border: 1.5px solid var(--bp-select); }
.bp-frame__art::before {
  inset: -9.75px;
  z-index: 3;
  background:
    linear-gradient(#fff, #fff) left 2px top 2px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) right 2px top 2px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) left 2px bottom 2px / 5px 5px no-repeat,
    linear-gradient(#fff, #fff) right 2px bottom 2px / 5px 5px no-repeat,
    linear-gradient(var(--bp-select), var(--bp-select)) left top / 9px 9px no-repeat,
    linear-gradient(var(--bp-select), var(--bp-select)) right top / 9px 9px no-repeat,
    linear-gradient(var(--bp-select), var(--bp-select)) left bottom / 9px 9px no-repeat,
    linear-gradient(var(--bp-select), var(--bp-select)) right bottom / 9px 9px no-repeat;
}
.bp-frame.is-selected .bp-frame__art::before,
.bp-frame.is-selected .bp-frame__art::after,
.bp-canvas.is-updated .bp-frame__art::before,
.bp-canvas.is-updated .bp-frame__art::after { opacity: 1; }
.bp-frame.is-selected .bp-frame__label,
.bp-canvas.is-updated .bp-frame__label { color: var(--bp-select); }

/* ---------- 5. Example designs ----------
   Built in HTML and sized in cqi (a percentage of their own frame), so
   the brand name and colour can change live. */

.bp-mock {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 22px 40px -22px rgba(0,0,0,.75);
}
.bp-mono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  color: var(--color-white);
  font-weight: 800;
  line-height: 1;
}
.bp-skel { display: block; height: 1.5cqi; border-radius: 1cqi; background: #dfe3ea; }
.bp-skel--light { background: rgba(255,255,255,.5); }
.bp-skel--dark  { background: var(--color-ink); }
.bp-skel--40 { width: 40%; }
.bp-skel--55 { width: 55%; }
.bp-skel--65 { width: 65%; }
.bp-skel--80 { width: 80%; }
/* Everything in the client's colour eases into a new one */
.bp-mono, .bp-web__hero, .bp-card::after, .bp-social, .bp-flyer__top, .bp-sig__text,
.bp-card__name, .bp-flyer__name, .bp-sig__name, .bp-web__btn, .bp-social__tag {
  transition: background-color .35s var(--ease-standard), color .35s var(--ease-standard), border-color .35s var(--ease-standard);
}

/* Website */
.bp-web { border-radius: 2cqi; }
.bp-web__bar { display: flex; align-items: center; gap: 1.1cqi; padding: 1.8cqi 2.4cqi; background: #e8ecf3; }
.bp-web__bar i { width: 1.7cqi; aspect-ratio: 1; border-radius: 50%; background: #c5ccd8; }
.bp-web__url {
  flex: 1;
  min-width: 0;
  margin-left: 2cqi;
  padding: .7cqi 2.4cqi;
  overflow: hidden;
  border-radius: 99px;
  background: var(--color-white);
  font-size: 2.2cqi;
  font-weight: 600;
  color: var(--color-ink-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bp-web__nav { display: flex; align-items: center; gap: 1.6cqi; padding: 2.4cqi 4cqi; }
.bp-web__nav .bp-mono { width: 4.6cqi; font-size: 2.4cqi; }
.bp-web__brand { min-width: 0; max-width: 45%; overflow: hidden; font-size: 2.6cqi; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.bp-web__links { display: flex; gap: 2.4cqi; margin-left: auto; }
.bp-web__links i { width: 7cqi; height: 1.2cqi; border-radius: 1cqi; background: #d6dbe4; }
.bp-web__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2cqi;
  margin-inline: 4cqi;
  padding: 6.5cqi 6cqi;
  border-radius: 2cqi;
  background: var(--brand);
  color: var(--color-white);
}
.bp-web__headline {
  display: -webkit-box;
  max-width: 85%;
  overflow: hidden;
  font-size: 6.4cqi;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bp-web__hero .bp-skel { height: 1.4cqi; }
.bp-web__btn { margin-top: 1.4cqi; padding: 1.3cqi 3.2cqi; border-radius: 99px; background: var(--color-white); color: var(--brand); font-size: 2.3cqi; font-weight: 800; }
.bp-web__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqi; padding: 3cqi 4cqi 4cqi; }
.bp-web__cards i { height: 9cqi; border-radius: 1.6cqi; background: #eef1f6; }
.bp-web__cards i:first-child { background: color-mix(in srgb, var(--brand) 16%, #fff); }

/* Business card (85 × 55 mm) */
.bp-card { display: flex; align-items: center; gap: 6cqi; aspect-ratio: 85 / 55; padding: 8cqi 8cqi 11cqi; border-radius: 3cqi; }
.bp-card::after { content: ''; position: absolute; inset: auto 0 0; height: 4.5cqi; background: var(--brand); }
.bp-card .bp-mono { width: 21cqi; font-size: 10cqi; }
.bp-card__text { display: flex; flex-direction: column; gap: 2.6cqi; min-width: 0; }
.bp-card__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 7.6cqi;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--brand);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bp-card .bp-skel { height: 1.8cqi; }
.bp-card__contact { overflow: hidden; font-size: 4cqi; font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; text-overflow: ellipsis; }

/* Social media post (square) */
.bp-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5cqi;
  aspect-ratio: 1;
  padding: 10cqi 9cqi;
  border-radius: 3cqi;
  background: var(--brand);
  color: var(--color-white);
}
.bp-social__tag { padding: 2cqi 5cqi; border-radius: 99px; background: var(--color-white); color: var(--brand); font-size: 6.4cqi; font-weight: 800; }
.bp-social__name {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  overflow: hidden;
  font-size: 12cqi;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.bp-social__mono { position: absolute; right: -4cqi; bottom: -18cqi; font-size: 78cqi; font-weight: 900; line-height: 1; color: rgba(255,255,255,.16); }

/* Flyer (A-series proportions) */
.bp-flyer { display: flex; flex-direction: column; aspect-ratio: 1 / 1.414; border-radius: 2.5cqi; }
.bp-flyer__top {
  position: relative;
  display: flex;
  flex: 0 0 50%;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8cqi;
  background: var(--brand);
  color: var(--color-white);
}
.bp-flyer__top .bp-mono { position: absolute; top: 7cqi; right: 7cqi; width: 16cqi; font-size: 8cqi; background: var(--color-white); color: var(--brand); }
.bp-flyer__title { font-size: 14cqi; font-weight: 900; line-height: .95; letter-spacing: -.035em; }
.bp-flyer__body { display: flex; flex: 1; flex-direction: column; gap: 4.5cqi; min-height: 0; padding: 8cqi; }
.bp-flyer__body .bp-skel { height: 3cqi; }
.bp-flyer__name {
  display: -webkit-box;
  margin-top: auto;
  overflow: hidden;
  font-size: 7.6cqi;
  font-weight: 800;
  line-height: 1.05;
  color: var(--brand);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.bp-flyer__url { overflow: hidden; font-size: 5cqi; font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; text-overflow: ellipsis; }

/* Email signature */
.bp-sig { display: flex; align-items: center; gap: 4.5cqi; padding: 5cqi 6cqi; border-radius: 2.2cqi; }
.bp-sig .bp-mono { width: 14cqi; font-size: 6.6cqi; }
.bp-sig__text { display: flex; flex-direction: column; gap: 1.6cqi; min-width: 0; padding-left: 4.5cqi; border-left: .7cqi solid var(--brand); }
.bp-sig .bp-skel { height: 2cqi; }
.bp-sig__name { overflow: hidden; font-size: 5cqi; font-weight: 800; line-height: 1.1; color: var(--brand); white-space: nowrap; text-overflow: ellipsis; }
.bp-sig__email { overflow: hidden; font-size: 3.6cqi; font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; text-overflow: ellipsis; }

/* ---------- 6. Designer's cursor ----------
   Glides across the frames once as they land, then settles. */

.bp-cursor {
  position: absolute;
  z-index: 5;
  left: 78%;
  top: 60%;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  animation: bp-cursor 2.3s var(--ease-standard) .15s both;
}
.bp-cursor svg {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  fill: var(--color-violet);
  stroke: var(--color-white);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}
.bp-cursor__tag {
  margin: 1.1rem 0 0 -.3rem;
  padding: .2rem .5rem .24rem;
  border-radius: .25rem .7rem .7rem .7rem;
  background: var(--color-violet);
  color: var(--color-white);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.1;
}
@keyframes bp-cursor {
  0%   { left: 96%; top: 96%; opacity: 0; }
  10%  { opacity: 1; }
  32%  { left: 20%; top: 27%; }
  56%  { left: 66%; top: 17%; }
  78%  { left: 46%; top: 66%; }
  100% { left: 78%; top: 60%; }
}

/* ---------- 7. "Try it on your business" panel ---------- */

.bp-panel {
  display: grid;
  gap: .8rem 1.25rem;
  align-items: end;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-m);
  background: var(--bp-panel);
  box-shadow: 0 24px 44px -26px rgba(0,0,0,.8);
}
.bp-panel__title { grid-column: 1 / -1; max-width: none; font-family: var(--font-accent); font-size: var(--step-1); line-height: 1; color: var(--color-white); }
.bp-panel__field { min-width: 0; }
.bp-panel__label { display: block; margin-bottom: .4rem; padding: 0; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.72); }
.bp-panel__input {
  width: 100%;
  padding: .6rem .8rem;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--radius-s);
  background: var(--bp-canvas);
  color: var(--color-white);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.2;
  min-height: 2.6rem;
  transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard);
}
.bp-panel__input::placeholder { color: rgba(255,255,255,.5); }
.bp-panel__input:focus-visible { outline: none; border-color: var(--bp-select); box-shadow: 0 0 0 3px rgba(28,140,255,.35); }
.bp-panel__colours { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Legends sit oddly in a fieldset; floating it lines it up with the name label */
.bp-panel__colours legend { float: left; width: 100%; }
.bp-panel__colours .bp-swatches { clear: both; }
.bp-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.bp-swatch {
  position: relative;
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .6rem;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  cursor: pointer;
}
.bp-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bp-swatch:has(input:checked) { outline: 2px solid var(--color-white); outline-offset: 2px; }
.bp-swatch:has(input:checked)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: center / 1.1rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.bp-swatch:has(input:focus-visible) { outline: 3px solid var(--bp-select); outline-offset: 3px; }
html:not(.js) .bp-panel { display: none; }   /* it only does anything with JavaScript */
@media (min-width: 30rem) {
  .bp-panel { grid-template-columns: minmax(0, 1fr) auto; }
}
/* Desktop: one compact row under the canvas, so it's in view on arrival */
@media (min-width: 64rem) {
  .bp-panel { grid-template-columns: auto minmax(0, 1fr) auto; padding: .85rem 1.1rem .95rem; }
  .bp-panel__title { grid-column: auto; align-self: center; max-width: 9rem; font-size: var(--step-0); line-height: 1.15; }
}

/* ---------- 8. What's included ----------
   The same ticket as the order page (perforation, price, notches in the
   section colour), so ordering feels like the next step of this list. */

.bp-included__grid { display: grid; gap: var(--space-l); align-items: start; }
.bp-included__intro { max-width: 34rem; }
.bp-included__intro h2 { margin-top: .15rem; }
.bp .section-head h2, .bp-included__intro h2 { text-wrap: balance; }

.bp-ticket {
  position: relative;
  padding: var(--space-m) var(--space-m) 0;
  border-top: 8px solid var(--color-ink);
  border-radius: var(--radius-l);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}
.bp-ticket__eyebrow { font-family: var(--font-accent); font-size: var(--step-1); line-height: 1; color: var(--color-ink-soft); }
.bp-ticket__name { margin-top: .2rem; font-size: var(--step-2); }
.bp-ticket__list { display: grid; gap: 1rem; margin-top: var(--space-m); }
.bp-ticket__list li { display: flex; align-items: flex-start; gap: .9rem; font-size: var(--step--1); line-height: 1.5; color: var(--color-ink-soft); }
.bp-ticket__list strong { display: block; font-size: var(--step-0); color: var(--color-ink); }
.bp-ticket__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .7rem;
  background: var(--color-cloud);
  color: var(--color-violet-deep);
}
.bp-ticket__icon svg { width: 1.3rem; height: 1.3rem; }
.bp-ticket__perf { position: relative; margin: var(--space-m) calc(-1 * var(--space-m)) 0; border-top: 2px dashed var(--color-line); }
.bp-ticket__perf::before,
.bp-ticket__perf::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-cloud);
  transform: translateY(-50%);
}
.bp-ticket__perf::before { left: -.75rem; }
.bp-ticket__perf::after  { right: -.75rem; }
.bp-ticket__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-m); }
.bp-ticket__price { font-family: var(--font-accent); font-size: var(--step-4); line-height: 1; color: var(--color-ink); }
.bp-ticket__price span { margin-left: .4em; font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; color: var(--color-ink-soft); }

/* ---------- 9. Example month ---------- */

.bp-weeks { display: grid; gap: var(--space-m) var(--space-s); }
.bp-week { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.bp-week__label { display: flex; align-items: center; gap: .6rem; max-width: none; font-size: var(--step--1); font-weight: 800; }
.bp-week__label::before {
  content: '';
  flex-shrink: 0;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
  transition: background-color .35s var(--ease-standard), box-shadow .35s var(--ease-standard);
}
.bp-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
  background: var(--color-cloud);
}
.bp-chat__msg { max-width: 90%; padding: .6rem .85rem; border-radius: 1.1rem; font-size: var(--step--1); font-weight: 600; line-height: 1.45; }
.bp-chat__msg--you { align-self: flex-end; border-bottom-right-radius: .3rem; background: var(--color-ink); color: var(--color-white); }
.bp-chat__reply { display: flex; align-items: flex-end; gap: .5rem; }
.bp-chat__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--color-white);
  font-family: var(--font-accent);
  font-size: .85rem;
  line-height: 1;
}
.bp-chat__msg--me { min-width: 0; border: 1px solid var(--color-line); border-bottom-left-radius: .3rem; background: var(--color-white); color: var(--color-ink); }
.bp-chat__file {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  padding: .45rem .6rem;
  border-radius: .6rem;
  background: var(--color-cloud);
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-ink-soft);
  overflow-wrap: break-word;
}
.bp-chat__file span { min-width: 0; }
.bp-chat__file svg { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--brand); transition: color .35s var(--ease-standard); }

/* ---------- 10. Before and after ---------- */

.bp-files__grid { display: grid; gap: var(--space-l) var(--space-m); }
.bp-folder { display: flex; flex-direction: column; gap: var(--space-s); margin: 0; }
.bp-folder__window {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  container-type: inline-size;
}
.bp-folder__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: none;
  padding: .6rem .9rem;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  background: #f7f8fb;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.bp-folder__path { overflow: hidden; text-overflow: ellipsis; }
.bp-folder__dots { display: flex; flex-shrink: 0; gap: .3rem; }
.bp-folder__dots i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-line); }

/* The messy folder: files dropped wherever they landed */
.bp-folder__mess { position: relative; flex: 1; }
.bp-doc {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 23cqi;
  rotate: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqi;
  font-size: clamp(.56rem, 2.4cqi, .74rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--color-ink-soft);
  overflow-wrap: break-word;
}
.bp-doc__icon { position: relative; width: 7cqi; height: 8.8cqi; border: 1.5px solid #c8cfdb; border-radius: 3px 9px 3px 3px; background: var(--color-white); }
.bp-doc__icon::after {
  content: attr(data-ext);
  position: absolute;
  left: -.4rem;
  bottom: 18%;
  padding: .08rem .28rem;
  border-radius: .2rem;
  background: var(--ext, var(--color-gray));
  color: var(--color-white);
  font-size: .5rem;
  font-weight: 800;
  line-height: 1.2;
}
.bp-doc__icon[data-ext="PDF"]  { --ext: var(--color-red); }
.bp-doc__icon[data-ext="PNG"]  { --ext: var(--color-blue); }
.bp-doc__icon[data-ext="JPG"]  { --ext: #1f7a4d; }
.bp-doc__icon[data-ext="AI"]   { --ext: #b45309; }
.bp-doc__icon[data-ext="HTML"] { --ext: var(--color-violet); }
.bp-doc:nth-child(1) { --x: 5%;  --y: 7%;  --r: -7deg; }
.bp-doc:nth-child(2) { --x: 39%; --y: 3%;  --r: 4deg; }
.bp-doc:nth-child(3) { --x: 71%; --y: 10%; --r: -3deg; }
.bp-doc:nth-child(4) { --x: 13%; --y: 45%; --r: 6deg; }
.bp-doc:nth-child(5) { --x: 46%; --y: 41%; --r: -5deg; }
.bp-doc:nth-child(6) { --x: 72%; --y: 52%; --r: 8deg; }
.bp-doc:nth-child(7) { --x: 30%; --y: 74%; --r: -2deg; }

/* The tidy folder: one folder per kind of design, in the client's colour */
.bp-folder__list { display: grid; flex: 1; align-content: start; gap: .2rem; padding: .8rem; }
.bp-folder__list li { display: flex; align-items: center; gap: .75rem; padding: .5rem .65rem; border-radius: .5rem; font-size: clamp(.78rem, 2.6cqi, .95rem); font-weight: 700; }
.bp-folder__list li:nth-child(odd) { background: #f7f8fb; }
.bp-folder__list svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-left: auto; color: var(--brand); transition: color .35s var(--ease-standard); }
.bp-folder__icon {
  position: relative;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1rem;
  margin-top: .15rem;
  border-radius: 0 .2rem .2rem .2rem;
  background: var(--brand);
  transition: background-color .35s var(--ease-standard);
}
.bp-folder__icon::before { content: ''; position: absolute; left: 0; top: -.22rem; width: .6rem; height: .3rem; border-radius: .15rem .15rem 0 0; background: inherit; }
@container (max-width: 27rem) {
  .bp-folder__list { grid-template-columns: 1fr 1fr; gap: .2rem .4rem; }
  .bp-folder__list li:nth-child(odd) { background: none; }
  .bp-folder__list li { background: #f7f8fb; }
  .bp-doc:nth-child(n+6) { display: none; }
}

.bp-folder__caption { max-width: 34rem; color: var(--color-ink-soft); }
.bp-folder__caption strong { display: block; margin-bottom: .15rem; font-size: var(--step-1); color: var(--color-ink); }

.bp-benefits { display: grid; gap: var(--space-s) var(--space-m); margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--color-line); }
.bp-benefits li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 700; line-height: 1.4; }
.bp-benefits svg { flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin-top: .05rem; color: var(--color-violet); }

/* ---------- 11. FAQ (the accordion itself comes from style.css) ---------- */

.bp-faq .faq-item p a { color: var(--color-blue-deep); font-weight: 700; }

/* ---------- 12. Closing ---------- */

.bp-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--space-xl);
  background: var(--artboard-bg);
  color: var(--color-white);
}
.bp-final__inner { display: grid; gap: var(--space-m); align-items: end; }
.bp-final h2 { max-width: 18ch; color: var(--color-white); text-wrap: balance; }
.bp-steps { display: grid; gap: var(--space-s); margin-top: var(--space-m); counter-reset: bp-step; }
.bp-steps li { position: relative; padding-left: 3.1rem; font-size: var(--step--1); line-height: 1.5; color: rgba(255,255,255,.86); counter-increment: bp-step; }
.bp-steps li::before {
  content: counter(bp-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-violet-deep);
  font-family: var(--font-accent);
  font-size: var(--step-1);
  line-height: 1;
}
.bp-steps strong { display: block; font-size: var(--step-0); color: var(--color-white); }
.bp-final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); margin-top: var(--space-l); }
.bp-final__price { flex-basis: 100%; max-width: none; font-family: var(--font-accent); font-size: var(--step-4); line-height: 1; }
.bp-final__price span { margin-left: .35em; font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; opacity: .85; }
.bp-final__stage { display: flex; flex-direction: column; align-items: center; }
.bp-final__bubble { font-size: var(--step-1); }
.bp-final__mascot { width: clamp(8rem, 5rem + 9vw, 12.5rem); height: auto; margin-top: .85rem; margin-bottom: -30px; filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)); }

/* ---------- 13. Responsive ---------- */

@media (min-width: 40rem) {
  .bp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-steps li { padding-top: 3rem; padding-left: 0; }
  .bp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .bp-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 52rem) {
  .bp-files__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .bp-included__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-xl); }
  .bp-included__intro { position: sticky; top: calc(var(--header-h) + var(--space-m)); }
  .bp-final__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-l); }
  .bp-final__body { padding-bottom: var(--space-xl); }
}
@media (min-width: 64rem) {
  .bp-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); }
}
@media (min-width: 72rem) {
  .bp-weeks { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* the month as a timeline, running through the week markers */
  .bp-weeks::before { content: ''; position: absolute; left: .4rem; right: 0; top: .7rem; height: 2px; background: var(--color-line); }
  .bp-week__label { position: relative; }
  .bp-week__label span { padding-right: .6rem; background: var(--color-white); }
  .bp-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phones: a taller canvas, so every frame stays big enough to read */
@media (max-width: 35.99rem) {
  .bp-canvas { aspect-ratio: 10 / 17.5; }
  .bp-frame--web    { --x: 3%;  --y: 1.5%; --w: 94%; }
  .bp-frame--card   { --x: 2%;  --y: 46%;  --w: 56%; --r: -4deg; }
  .bp-frame--social { --x: 61%; --y: 45.5%; --w: 36%; }
  .bp-frame--flyer  { --x: 6%;  --y: 74.5%; --w: 26%; }
  .bp-frame--sig    { --x: 38%; --y: 79%;  --w: 60%; }
  .bp-cursor { left: 72%; top: 92%; animation-name: bp-cursor-phone; }
}
@keyframes bp-cursor-phone {
  0%   { left: 90%; top: 99%; opacity: 0; }
  10%  { opacity: 1; }
  35%  { left: 60%; top: 18%; }
  65%  { left: 28%; top: 58%; }
  100% { left: 72%; top: 92%; }
}