/* ==========================================================================
   BRAND DESIGN — service page
   Hero with a sage silk banner holding the demo Nyasha Naturals still life
   (a transparent photo mockup) and two glass chips, the two packages,
   the Custom Branding Cart with a sticky receipt, the four-step process,
   FAQ and the closing band. Scoped under .p-design; forge.css tokens only.
   ========================================================================== */

.p-design .bd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Shared section-head details (same rhythm as the websites page) ---------- */
.p-design .bd-head__title { margin-top: 18px; }
.p-design .bd-head__lead { max-width: 34em; }
.p-design .bd-head__aside { display: grid; gap: 20px; justify-items: start; }
.p-design .bd-head__link { display: inline; font-size: 0.9375rem; line-height: 1.5; }
.p-design .bd-head__link svg { display: inline-block; margin-left: 8px; vertical-align: -3px; }
.p-design .bd-demo {
  flex: none; padding: 0.4em 0.85em; border-radius: var(--r-pill);
  background: var(--ember-soft); color: var(--ember-ink);
  font-size: 0.72em; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.p-design .bd-hero__title .bd-w { display: inline-block; }
.p-design .bd-hero__lead { max-width: 30em; }

/* The sage banner: the leaf green of the demo brand, so its honey, kraft and clay read warm on it */
.p-design .bd-media {
  --notch-bg: var(--paper);
  --mh: clamp(460px, 40vw, 600px); /* the banner height, also used to fit the photo */
  container-type: inline-size;
  height: var(--mh);
  background: #A7BFA0;
  isolation: isolate;
  transform: translateZ(0);
}
.p-design .bd-media__silk {
  position: absolute; inset: -14% -2% -4%; z-index: 0;
  background: #A7BFA0 url("../../img/silk/banner-sage.webp") center 46% / cover no-repeat;
  background-image: image-set(url("../../img/silk/banner-sage-1600.webp") 1x, url("../../img/silk/banner-sage.webp") 2x);
  will-change: transform;
}
/* a soft floor under the still life and a lift at the top */
.p-design .bd-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(54% 46% at 50% 100%, rgba(36, 60, 32, 0.24) 0%, rgba(36, 60, 32, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 40%);
}
.p-design .bd-stage { position: absolute; inset: 0; z-index: 2; font-size: 1cqw; }
.p-design .bd-l { position: absolute; will-change: transform; }
.p-design .bd-media__notch { z-index: 4; }

/* ----- The demo still life: a transparent photo straight on the silk, as wide as the banner allows ----- */
.p-design .bd-l--shot { inset: 0; display: grid; place-items: center; padding-top: 2em; }
.p-design .bd-shot { position: relative; width: min(66cqw, var(--mh) * 0.86 * 1.77); }
.p-design .bd-shot__img { display: block; width: 100%; height: auto; }
.p-design .bd-shot__demo { position: absolute; right: 5%; top: 5%; font-size: clamp(10px, 0.82em, 12px); }
.p-design .bd-l--chip1 { left: -9%; top: 13%; }
.p-design .bd-l--chip2 { left: 84.5%; top: 79%; } /* clear of the clay card's corner */

/* ----- The logo lockup (demo brand) ----- */
.p-design .bd-logo {
  --s: 1.6em;
  display: inline-flex; align-items: center; gap: calc(var(--s) * 0.34);
  font-size: var(--s); color: var(--patina); line-height: 1;
}
.p-design .bd-logo__mark { width: 2.55em; height: 2.55em; flex: none; }
.p-design .bd-logo__type { display: grid; gap: 0.3em; }
.p-design .bd-logo__type b {
  font-size: 2.1em; font-weight: 600; letter-spacing: -0.055em; line-height: 0.82; color: var(--ink);
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-design .bd-logo__type small {
  font-size: 0.5em; font-weight: 600; letter-spacing: 0.36em; text-transform: uppercase; color: var(--patina); margin-right: -0.36em;
}
.p-design .bd-logo--light { color: var(--white); --bd-leaf-in: var(--patina); }
.p-design .bd-logo--light .bd-logo__type b, .p-design .bd-logo--light .bd-logo__type small { color: var(--white); }
.p-design .bd-logo--md { --s: 20px; }
.p-design .bd-logo--sm { --s: 13px; }
.p-design .bd-logo--xs { --s: 8px; }

/* ----- Glass chips ----- */
.p-design .bd-chip {
  display: flex; align-items: center; gap: 0.8em; padding: 0.7em 1.35em 0.7em 0.7em;
  font-size: clamp(11px, 1em, 14px); border-radius: 1.35em; white-space: nowrap;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1.4em 2.8em -1.2em rgba(30, 52, 28, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.p-design .bd-chip__icon { display: grid; place-items: center; flex: none; width: 2.9em; height: 2.9em; border-radius: 0.9em; background: var(--ink); color: var(--white); }
.p-design .bd-chip__icon .i { width: 1.4em; height: 1.4em; }
.p-design .bd-chip__icon--ember { background: var(--ember); }
.p-design .bd-chip__text { display: grid; gap: 0.15em; line-height: 1.2; }
.p-design .bd-chip__text b { font-size: 1em; font-weight: 600; letter-spacing: -0.015em; }
.p-design .bd-chip__text small { font-size: 0.82em; color: var(--slate); }

/* Tablet: the photo grows, the chips step out to its corners */
@media (max-width: 959.98px) {
  .p-design .bd-media { --mh: clamp(420px, 60vw, 540px); }
  .p-design .bd-shot { width: min(80cqw, var(--mh) * 0.74 * 1.77); }
  .p-design .bd-l--chip1 { left: -6%; top: -9%; }
  .p-design .bd-l--chip2 { left: -4%; top: 97%; } /* below the green card's corner */
}
/* Phone: the photo spans the banner, one chip above it and one below */
@media (max-width: 599.98px) {
  .p-design .bd-media { --mh: 420px; }
  .p-design .bd-l--shot { padding-top: 0; }
  .p-design .bd-shot { width: 100%; }
  .p-design .bd-l--chip1 { left: 12px; top: -34%; }
  .p-design .bd-l--chip2 { left: 12px; top: 112%; }
  .p-design .bd-chip { font-size: 11px; }
}

/* Intro: hidden only while JS boots (never without JS, never in QA or reduced motion) */
.js.is-loading:not(.is-qa):not(.is-reduced) .p-design .bd-hero__eyebrow,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-design .bd-hero__title,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-design .bd-hero__lead,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-design .bd-hero__cta,
.js.is-loading:not(.is-qa):not(.is-reduced) .p-design .bd-media {
  opacity: 0;
  animation: bd-failsafe 0.6s ease 3s forwards;
}
@keyframes bd-failsafe { to { opacity: 1; } }

/* ==========================================================================
   Packages
   ========================================================================== */
.p-design .bd-tiers { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .p-design .bd-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.p-design .bd-tier {
  --notch-bg: var(--paper);
  position: relative; display: flex; flex-direction: column; gap: 28px; min-width: 0;
  padding: clamp(28px, 3.2vw, 44px); border-radius: var(--r-xl); background: var(--white);
}
.p-design .bd-tier--kit {
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(227, 160, 58, 0.2) 0%, rgba(227, 160, 58, 0) 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(238, 106, 44, 0.12) 0%, rgba(238, 106, 44, 0) 60%),
    var(--coal);
}
.p-design .bd-tier__tabcut { --notch-r: 20px; }
.p-design .bd-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-size: 0.875rem; font-weight: 500; color: var(--ink); white-space: nowrap; letter-spacing: -0.005em;
}
.p-design .bd-tab .i { width: 15px; height: 15px; color: var(--ember); }
.p-design .bd-tab--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.p-design .bd-tab--dark .i { color: var(--brass); }

.p-design .bd-tier__top { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 60px; }
.p-design .bd-swatch {
  position: relative; display: grid; place-items: center; flex: none; overflow: hidden;
  width: 60px; height: 60px; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.p-design .bd-swatch span {
  font-size: 0.75rem; font-weight: 600; color: var(--white); letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: var(--r-pill); background: rgba(20, 20, 20, 0.18);
}
.p-design .bd-tier__id { min-width: 0; }
.p-design .bd-tier__name {
  font-size: var(--fs-h3); line-height: 1.02; letter-spacing: var(--tracking-h3); font-weight: 400;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-design .bd-tier__for { margin-top: 6px; font-size: 0.9375rem; line-height: 1.4; color: var(--slate); }

.p-design .bd-tier__price { display: grid; gap: 12px; justify-items: start; }
.p-design .bd-tier__amount { display: flex; align-items: baseline; gap: 10px; }
.p-design .bd-tier__amount .t-num {
  font-size: clamp(3rem, 2.1rem + 2.2vw, 4.25rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 400;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-design .bd-tier__amount small { font-size: 1rem; color: var(--slate); }
.p-design .bd-tier__note { max-width: 30em; font-size: 0.9375rem; line-height: 1.5; color: var(--slate); }
.p-design .bd-tier__pay {
  display: inline-flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 14px 6px 10px; border-radius: var(--r-pill);
  background: rgba(227, 160, 58, 0.14); color: var(--brass-soft); font-size: 0.875rem; font-weight: 500; line-height: 1.3;
}
.p-design .bd-tier__pay .i { width: 16px; height: 16px; color: var(--brass); }

.p-design .bd-tier__body { display: grid; align-content: start; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line); }
.p-design .bd-tier__sub { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.p-design .bd-tier__sub + .bd-tier__list, .p-design .bd-tier__sub + .bd-ups { margin-top: 2px; }
.p-design .bd-ups + .bd-tier__sub { margin-top: 12px; }
.p-design .bd-tier__list { gap: 12px; font-size: 0.9375rem; }
.p-design .dark .bd-tier__list li::before { background-color: rgba(255, 255, 255, 0.14); }
@media (min-width: 560px) {
  .p-design .bd-tier__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
.p-design .bd-ups { display: grid; }
.p-design .bd-ups li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem;
}
.p-design .bd-ups li:first-child { padding-top: 4px; }
.p-design .bd-ups__what { color: rgba(255, 255, 255, 0.86); }
.p-design .bd-ups__was { font-size: 0.875rem; color: var(--stone); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.4); font-variant-numeric: tabular-nums; }
.p-design .bd-ups__arrow { width: 14px; height: 14px; color: var(--brass); }
.p-design .bd-ups__now {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border-radius: var(--r-pill);
  background: rgba(227, 160, 58, 0.16); color: var(--brass-soft); font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}

.p-design .bd-tier__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 24px;
  margin-top: auto; padding-top: 28px; border-top: 1px solid var(--line);
}
.p-design .bd-tier__meta { display: grid; gap: 4px; }
.p-design .bd-tier__eta { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 500; }
.p-design .bd-tier__eta .i { width: 16px; height: 16px; color: var(--ember); }
.p-design .bd-tier--kit .bd-tier__eta .i { color: var(--brass); }
.p-design .bd-tier__terms { padding-left: 24px; font-size: 0.8125rem; line-height: 1.4; color: var(--slate); }
/* narrower cards: the name row starts below the folder tab */
@media (max-width: 1279.98px) { .p-design .bd-tier { padding-top: 72px; } }
@media (max-width: 559.98px) {
  .p-design .bd-tier { padding-top: 76px; }
  .p-design .bd-tier__foot .btn { width: 100%; justify-content: space-between; }
}

/* Essentials: the brand in use (fills the card beside the longer Kit) */
.p-design .bd-preview {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: 14px;
  margin-top: auto; padding: 16px; border-radius: 22px; background: var(--paper);
}
.p-design .bd-preview + .bd-tier__foot { margin-top: 0; }
.p-design .bd-preview__card {
  display: grid; place-items: center; aspect-ratio: 1.62; border-radius: 12px; transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 14px 26px -16px rgba(30, 50, 26, 0.7);
}
.p-design .bd-preview__card .bd-logo { --s: clamp(8px, 0.72vw, 11px); }
.p-design .bd-preview__stack { display: grid; gap: 8px; min-width: 0; }
.p-design .bd-preview__wa, .p-design .bd-preview__sig {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px;
  background: var(--white); box-shadow: var(--shadow-1);
}
.p-design .bd-preview__av { flex: none; width: 34px; height: 34px; color: var(--patina); }
.p-design .bd-preview__av svg { width: 100%; height: 100%; }
.p-design .bd-preview__who { display: grid; min-width: 0; line-height: 1.25; }
.p-design .bd-preview__who b { font-size: 0.8125rem; font-weight: 600; overflow-wrap: anywhere; }
.p-design .bd-preview__who small { font-size: 0.6875rem; color: var(--slate); }
.p-design .bd-preview__waicon { width: 18px; height: 18px; margin-left: auto; color: #1DA851; }
.p-design .bd-preview__sig { font-size: 0.75rem; line-height: 1.3; }
.p-design .bd-preview__sig > span { min-width: 0; }
.p-design .bd-preview__sig b { font-weight: 600; }
.p-design .bd-preview__sig small { font-size: inherit; color: var(--slate); }
.p-design .bd-preview__sigmark { flex: none; width: 22px; height: 22px; color: var(--patina); }
.p-design .bd-preview__tag {
  position: absolute; right: 14px; top: -11px; padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--ember-soft); color: var(--ember-ink); font-size: 0.6875rem; font-weight: 600; line-height: 1;
}
@media (max-width: 419.98px) { .p-design .bd-preview { grid-template-columns: minmax(0, 1fr); } .p-design .bd-preview__card { width: 72%; } }
/* which one + Launch Pack */
.p-design .bd-which { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .p-design .bd-which { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-design .bd-which__col {
  display: grid; align-content: center; gap: 8px; padding: 24px clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-lg); border: 1px solid var(--line);
}
.p-design .bd-which__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ember-ink); }
.p-design .bd-which__text { font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: 34em; }
.p-design .bd-which__pack {
  display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 14px;
  border-radius: var(--r-lg); background: var(--white);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .p-design .bd-which__pack:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); } }
.p-design .bd-which__packsilk { flex: none; width: 76px; height: 76px; border-radius: 18px; }
.p-design .bd-which__packtext { display: grid; gap: 4px; min-width: 0; flex: 1; }
.p-design .bd-which__packtext b { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; }
.p-design .bd-which__packtext small { font-size: 0.875rem; line-height: 1.45; color: var(--slate); }
@media (max-width: 479.98px) {
  .p-design .bd-which__pack { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "silk . go" "text text text"; align-items: center; gap: 14px; padding: 14px 14px 20px; }
  .p-design .bd-which__packsilk { grid-area: silk; width: 56px; height: 56px; border-radius: 14px; }
  .p-design .bd-which__pack .arrow-btn { grid-area: go; }
  .p-design .bd-which__packtext { grid-area: text; padding: 0 6px; }
}

/* ==========================================================================
   Custom Branding Cart
   ========================================================================== */
.p-design .bd-cart__box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.p-design .bd-sum { min-width: 0; }
.p-design .bd-cart__box.is-setting *, .p-design .bd-cart__box.is-setting *::before { transition: none !important; }
@media (min-width: 1024px) { .p-design .bd-cart__box { grid-template-columns: minmax(0, 1fr) minmax(340px, 388px); gap: 20px; } }
.p-design .bd-cart__items { display: grid; gap: 16px; min-width: 0; }

.p-design .bd-group { container-type: inline-size; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-xl); background: var(--white); }
.p-design .bd-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
.p-design .bd-group__title { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -0.014em; line-height: 1.25; }
.p-design .bd-group__count { font-size: 0.8125rem; color: var(--slate); }
.p-design .bd-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 460px) { .p-design .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.p-design .bd-item {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "icon text text" "price price qty";
  align-items: center; gap: 14px 14px; min-width: 0;
  padding: 14px 14px 12px; border-radius: 18px;
  background: #FAFAF8; border: 1px solid var(--line);
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.p-design .bd-item.is-on { background: var(--white); border-color: rgba(20, 20, 20, 0.5); box-shadow: 0 10px 24px -16px rgba(20, 20, 20, 0.35); }
.p-design .bd-item__icon {
  grid-area: icon; align-self: start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--mist); color: var(--ink);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.p-design .bd-item__icon .i { width: 19px; height: 19px; }
.p-design .bd-item.is-on .bd-item__icon { background: var(--ember); color: var(--white); }
.p-design .bd-item__text { grid-area: text; align-self: center; min-width: 0; }
.p-design .bd-item__name { font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.p-design .bd-item__note { margin-top: 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--slate); }
.p-design .bd-item__price { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.p-design .bd-item__price .t-num, .p-design .bd-item__price > span { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.p-design .bd-item__price small { font-size: 0.8125rem; color: var(--slate); white-space: nowrap; }
.p-design .bd-item--print .bd-item__price > span { font-size: 1rem; color: var(--slate); }

/* quantity stepper: a black + disc that opens into a pill */
.p-design .bd-qty { grid-area: qty; display: inline-flex; align-items: center; justify-self: end; height: 44px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); }
.p-design .bd-qty__btn {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  color: var(--white); transition: background-color var(--dur-1) var(--ease-out), width var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.p-design .bd-qty__btn .i { width: 18px; height: 18px; stroke-width: 2; }
.p-design .bd-qty__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.p-design .bd-qty__btn:focus-visible { outline-offset: -3px; outline-color: var(--brass); }
.p-design .bd-qty__btn--minus, .p-design .bd-qty__val { overflow: hidden; }
.p-design .bd-qty__val {
  display: block; width: 26px; text-align: center; font-size: 0.9375rem; font-weight: 600; line-height: 44px;
  transition: width var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.p-design .bd-item:not(.is-on) .bd-qty__btn--minus,
.p-design .bd-item:not(.is-on) .bd-qty__val { width: 0; opacity: 0; }
.p-design .bd-qty__btn:disabled { cursor: default; }

/* printing: a switch instead of a stepper */
.p-design .bd-item--print { grid-column: 1 / -1; }
@container (min-width: 600px) {
  .p-design .bd-item--print { grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "icon text price qty"; gap: 14px 18px; }
}
.p-design .bd-switch {
  grid-area: qty; justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 6px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--white);
  font-size: 0.875rem; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.p-design .bd-switch__track { position: relative; width: 38px; height: 24px; margin-left: 4px; border-radius: var(--r-pill); background: var(--fog); transition: background-color var(--dur-2) var(--ease-out); }
.p-design .bd-switch__knob {
  position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.25); transition: transform var(--dur-2) var(--ease-out);
}
.p-design .bd-switch[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.p-design .bd-switch[aria-checked="true"] .bd-switch__track { background: var(--ember); }
.p-design .bd-switch[aria-checked="true"] .bd-switch__knob { transform: translateX(14px); }
.p-design .bd-item--print.is-on { border-color: rgba(20, 20, 20, 0.5); background: var(--white); }

/* summary receipt */
@media (min-width: 1024px) {
  .p-design .bd-sum { position: sticky; top: calc(var(--header-h) + 16px); }
}
.p-design .bd-sum__card {
  position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-xl);
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(238, 106, 44, 0.2) 0%, rgba(238, 106, 44, 0) 60%),
    radial-gradient(60% 40% at 0% 100%, rgba(227, 160, 58, 0.1) 0%, rgba(227, 160, 58, 0) 60%),
    var(--coal);
}
.p-design .bd-sum__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.p-design .bd-sum__title { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -0.014em; line-height: 1.2; }
.p-design .bd-sum__count { font-size: 0.8125rem; color: var(--slate); }
.p-design .bd-lines { display: grid; max-height: min(44vh, 420px); overflow-y: auto; overscroll-behavior: contain; margin: -6px 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.p-design .bd-lines:empty { display: none; }
.p-design .bd-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 4px 10px;
  padding: 4px 0; border-bottom: 1px solid var(--line);
}
.p-design .bd-line:last-child { border-bottom: 0; }
.p-design .bd-line__name { font-size: 0.9375rem; line-height: 1.35; color: var(--white); }
.p-design .bd-line__name small { display: block; font-size: 0.8125rem; color: var(--slate); }
.p-design .bd-line__amt { font-size: 0.9375rem; font-weight: 500; color: var(--white); font-variant-numeric: tabular-nums; }
.p-design .bd-line__x {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -2px 0; border-radius: 50%; color: var(--slate);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.p-design .bd-line__x .i { width: 15px; height: 15px; }
.p-design .bd-line__x:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }
.p-design .bd-sum__empty {
  padding: 18px 20px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.2);
  font-size: 0.9375rem; line-height: 1.5; color: var(--slate);
}
.p-design .bd-meter { display: grid; gap: 10px; }
.p-design .bd-meter__track { position: relative; height: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.p-design .bd-meter__fill {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--ember), var(--brass)); transition: transform 0.7s var(--ease-out);
}
.p-design .bd-meter__text { font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.74); }
.p-design .bd-meter__text b { color: var(--white); font-weight: 600; }
.p-design .bd-meter.is-done .bd-meter__text { color: var(--brass-soft); }
.p-design .bd-totals { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.p-design .bd-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 0.9375rem; color: var(--slate); }
.p-design .bd-totals__row .t-num { color: var(--white); }
.p-design .bd-totals__row--save span:last-child { color: var(--brass); }
.p-design .bd-totals__row--print span:last-child { color: var(--white); }
.p-design .bd-totals__row--total { align-items: flex-end; margin-top: 6px; color: var(--white); font-size: 1rem; font-weight: 500; }
.p-design .bd-totals__total {
  display: inline-block; font-size: clamp(2.25rem, 1.9rem + 1vw, 2.75rem); font-weight: 400; line-height: 1; letter-spacing: -0.04em;
  font-optical-sizing: none; font-variation-settings: "opsz" 14;
}
.p-design .bd-sum__rules { display: grid; gap: 10px; font-size: 0.8125rem; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.p-design .bd-sum__rules li { display: flex; gap: 10px; align-items: flex-start; }
.p-design .bd-sum__rules .i { width: 15px; height: 15px; margin-top: 2px; color: var(--brass); flex: none; }
.p-design .bd-sum__send .btn__label { overflow: hidden; text-overflow: ellipsis; }
.p-design .bd-sum__card { container-type: inline-size; }
@container (max-width: 319.98px) { .p-design .bd-send-more { display: none; } }
.p-design .bd-sum__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -10px; min-height: 44px; }
.p-design .bd-sum__vat { font-size: 0.75rem; color: var(--slate); }
.p-design .bd-sum__clear {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  font-size: 0.8125rem; font-weight: 500; color: var(--slate); transition: color var(--dur-1) var(--ease-out);
}
.p-design .bd-sum__clear .i { width: 14px; height: 14px; }
.p-design .bd-sum__clear:hover { color: var(--white); }

/* phones and tablets: a bar that leads to the receipt */
.p-design .bd-bar {
  position: fixed; left: 12px; right: 86px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 79;
  display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 7px 0 20px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--white); box-shadow: var(--shadow-float);
  transform: translateY(170%); transition: transform 0.6s var(--ease-out); pointer-events: none;
}
.p-design .bd-bar.is-shown { transform: none; pointer-events: auto; }
.p-design .bd-bar__count { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7); white-space: nowrap; }
.p-design .bd-bar__total { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.p-design .bd-bar__go {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-left: auto; padding: 0 14px 0 16px;
  border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-size: 0.875rem; font-weight: 600;
}
.p-design .bd-bar__go .i { width: 15px; height: 15px; }
@media (min-width: 561px) { .p-design .bd-bar { right: 214px; } }
@media (min-width: 1024px) { .p-design .bd-bar { display: none; } }

/* ==========================================================================
   Process: hooks list + a stage that changes with the step (reference f_057)
   ========================================================================== */
.p-design .bd-process__box {
  display: grid; gap: 36px; align-items: center;
  padding: clamp(22px, 4.4vw, 64px); border-radius: var(--r-xl); background: var(--white);
}
@media (min-width: 960px) { .p-design .bd-process__box { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(40px, 5vw, 72px); } }
.p-design .bd-process__box.is-setting *, .p-design .bd-process__box.is-setting *::before { transition: none !important; }
.p-design .bd-process__lead { margin-top: 20px; max-width: 30em; font-size: var(--fs-lead); line-height: 1.5; color: var(--slate); }
.p-design .bd-steps { display: grid; gap: 4px; margin-top: clamp(28px, 3vw, 40px); }
.p-design .bd-step { position: relative; border-radius: 22px; transition: background-color 0.6s var(--ease-out); }
.p-design .bd-step__h { font-size: inherit; line-height: inherit; }
.p-design .bd-step__btn {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 14px 22px; border-radius: 22px;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); line-height: 1.25; letter-spacing: -0.016em; text-align: left; color: var(--ink);
  transition: color 0.5s var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.p-design .bd-step__hook { width: 20px; height: 20px; flex: none; color: var(--slate); transform: translateY(-2px); transition: color 0.5s var(--ease-out); }
.p-design .bd-step__num { order: 3; margin-left: auto; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--stone); transition: color 0.5s var(--ease-out); }
.p-design .bd-step:not(.is-active) .bd-step__btn:hover { background: rgba(20, 20, 20, 0.04); }
.p-design .bd-step.is-active { background: var(--c); }
.p-design .bd-step.is-active .bd-step__btn { color: var(--white); }
.p-design .bd-step.is-active .bd-step__hook, .p-design .bd-step.is-active .bd-step__num { color: rgba(255, 255, 255, 0.8); }
.p-design .bd-step__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-out); }
.p-design .bd-step__panel > div { overflow: hidden; }
.p-design .bd-step.is-active .bd-step__panel { grid-template-rows: 1fr; }
.p-design .bd-step__text {
  padding: 0 24px 20px 56px; max-width: 36em; font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9);
  opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease-out) 0.1s, transform 0.6s var(--ease-out) 0.1s;
}
.p-design .bd-step.is-active .bd-step__text { opacity: 1; transform: none; }
.p-design .bd-step:not(.is-active) .bd-step__text { transition-delay: 0s; }

/* every scene shares one grid cell, so the stage is always as tall as its tallest scene */
.p-design .bd-process__stage {
  position: relative; display: grid; min-height: clamp(440px, 44vw, 580px);
  border-radius: 24px; overflow: hidden; isolation: isolate;
}
.p-design .bd-stage2__silks { position: absolute; inset: 0; background: var(--blush); }
.p-design .bd-stage2__silk { position: absolute; inset: -6%; opacity: 0; transition: opacity 0.9s var(--ease-out); }
.p-design .bd-stage2__silk.is-on { opacity: 1; }
.p-design .bd-scene {
  position: relative; grid-area: 1 / 1; z-index: 1; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px);
  opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.p-design .bd-scene.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* scene 1: chat */
.p-design .bd-chat {
  width: min(100%, 410px); border-radius: 22px; overflow: hidden; background: var(--paper);
  box-shadow: 0 30px 60px -26px rgba(90, 36, 8, 0.55), 0 0 0 1px rgba(20, 20, 20, 0.04);
}
.p-design .bd-chat__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--white); border-bottom: 1px solid var(--line); }
.p-design .bd-chat__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white); }
.p-design .bd-chat__avatar .i { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.p-design .bd-chat__who { display: grid; line-height: 1.2; }
.p-design .bd-chat__who b { font-size: 0.9375rem; font-weight: 600; }
.p-design .bd-chat__who small { font-size: 0.75rem; color: var(--patina-ink); }
.p-design .bd-chat__bar .bd-demo { margin-left: auto; font-size: 0.6875rem; }
.p-design .bd-chat__body { display: grid; gap: 8px; padding: 16px 14px 18px; }
.p-design .bd-msg {
  position: relative; max-width: 84%; padding: 9px 12px 20px; border-radius: 14px;
  font-size: 0.8125rem; line-height: 1.42; color: var(--ink);
}
.p-design .bd-msg time { position: absolute; right: 10px; bottom: 5px; font-size: 0.625rem; color: var(--slate); }
.p-design .bd-msg--out { margin-left: auto; background: rgba(37, 211, 102, 0.16); border-top-right-radius: 4px; }
.p-design .bd-msg--in { background: var(--white); border-top-left-radius: 4px; box-shadow: 0 1px 1px rgba(20, 20, 20, 0.06); }
.p-design .bd-msg--brief { display: flex; align-items: center; gap: 10px; padding-right: 44px; }
.p-design .bd-msg--brief > .i { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--ember-soft); color: var(--ember-ink); }
.p-design .bd-msg--brief span { display: grid; line-height: 1.25; }
.p-design .bd-msg--brief b { font-weight: 600; }
.p-design .bd-msg--brief small { font-size: 0.75rem; color: var(--slate); }

/* scenes 2 to 4: a white sheet */
.p-design .bd-sheet {
  width: min(100%, 440px); padding: 18px; border-radius: 22px; background: var(--white);
  box-shadow: 0 30px 60px -26px rgba(20, 20, 20, 0.5), 0 0 0 1px rgba(20, 20, 20, 0.04);
}
.p-design .bd-sheet__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 0 4px; }
.p-design .bd-sheet__bar b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.p-design .bd-sheet__chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--patina-soft); color: var(--patina-ink); font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.p-design .bd-sheet__chip .i { width: 13px; height: 13px; stroke-width: 2.2; }
.p-design .bd-sheet__chip--temper { background: var(--temper-soft); color: var(--temper-ink); }
.p-design .bd-concepts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.p-design .bd-concept { border-radius: 16px; border: 1px solid var(--line); overflow: hidden; }
.p-design .bd-concept.is-picked { border-color: var(--patina); box-shadow: 0 0 0 3px rgba(92, 138, 87, 0.18); }
.p-design .bd-concept__art { display: grid; place-items: center; aspect-ratio: 1.08; background: var(--paper); }
.p-design .bd-concept__art--dark { background: var(--patina); }
.p-design .bd-concept__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px; }
.p-design .bd-concept__foot b { font-size: 0.8125rem; font-weight: 600; }
.p-design .bd-concept__pick { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; color: var(--patina-ink); }
.p-design .bd-concept__pick .i { width: 13px; height: 13px; stroke-width: 2.4; }
.p-design .bd-concept__alt { font-size: 0.75rem; color: var(--slate); }
.p-design .bd-mono { display: grid; justify-items: center; gap: 10px; color: var(--white); }
.p-design .bd-mono i {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; border: 2px solid rgba(255, 255, 255, 0.9);
  font-style: normal; font-size: 26px; font-weight: 600; letter-spacing: -0.04em;
}
.p-design .bd-mono b { font-size: 11px; font-weight: 600; letter-spacing: 0.4em; margin-right: -0.4em; }
.p-design .bd-sheet__use { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 10px; margin-top: 10px; }
.p-design .bd-mini-card { display: grid; place-items: center; aspect-ratio: 1.62; border-radius: 12px; }
.p-design .bd-mini-profile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); min-width: 0; }
.p-design .bd-mini-profile__av { flex: none; width: 38px; height: 38px; color: var(--patina); }
.p-design .bd-mini-profile__av svg { width: 100%; height: 100%; }
.p-design .bd-mini-profile > span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.p-design .bd-mini-profile b { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-design .bd-mini-profile small { font-size: 0.6875rem; color: var(--slate); }

.p-design .bd-rev {
  position: relative; display: grid; place-items: center; height: 200px; margin-top: 14px; border-radius: 16px;
  background: radial-gradient(90% 80% at 50% 30%, #FFFFFF 0%, var(--paper) 72%); box-shadow: inset 0 0 0 1px var(--line);
}
.p-design .bd-pin {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--temper); color: var(--white); font-size: 0.75rem; font-weight: 600; font-style: normal;
}
.p-design .bd-rev .bd-pin { position: absolute; box-shadow: 0 0 0 6px rgba(111, 121, 216, 0.2); }
.p-design .bd-pin--1 { left: calc(50% - 88px); top: 44px; }
.p-design .bd-pin--2 { left: calc(50% + 72px); bottom: 58px; }
.p-design .bd-notes { display: grid; gap: 8px; margin-top: 14px; }
.p-design .bd-notes li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--paper); font-size: 0.8125rem; line-height: 1.35; }
.p-design .bd-rounds { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-left: 2px; }
.p-design .bd-rounds span { width: 28px; height: 6px; border-radius: var(--r-pill); background: var(--fog); }
.p-design .bd-rounds span.is-on { background: var(--temper); }
.p-design .bd-rounds em { margin-left: 6px; font-style: normal; font-size: 0.75rem; color: var(--slate); }

.p-design .bd-files { display: grid; gap: 8px; margin-top: 14px; }
.p-design .bd-files li { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 14px; border: 1px solid var(--line); }
.p-design .bd-files__thumb { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 11px; background: var(--paper); color: var(--patina); }
.p-design .bd-files__mark { width: 26px; height: 26px; }
.p-design .bd-files__thumb--dark { background: var(--ink); color: var(--white); --bd-leaf-in: var(--ink); }
.p-design .bd-files__thumb--sw { display: flex; gap: 3px; padding: 9px; }
.p-design .bd-files__thumb--sw i { flex: 1; height: 100%; border-radius: 4px; }
.p-design .bd-files__thumb--sw i:nth-child(1) { background: var(--patina); }
.p-design .bd-files__thumb--sw i:nth-child(2) { background: var(--brass); }
.p-design .bd-files__thumb--sw i:nth-child(3) { background: var(--blush); }
.p-design .bd-files__name { display: grid; line-height: 1.3; min-width: 0; }
.p-design .bd-files__name b { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; }
.p-design .bd-files__name small { font-size: 0.75rem; color: var(--slate); }
.p-design .bd-files__dl { width: 18px; height: 18px; margin-left: auto; color: var(--slate); transform: rotate(45deg); }

/* phones and tablets: heading first, then the stage right above the steps it answers to */
@media (max-width: 959.98px) {
  .p-design .bd-process__box { gap: 0; }
  .p-design .bd-process__copy { display: contents; }
  .p-design .bd-process__copy > .eyebrow { justify-self: start; }
  .p-design .bd-process__stage { margin-top: clamp(28px, 4vw, 40px); }
  .p-design .bd-steps { order: 1; margin-top: 20px; }
}
@media (max-width: 479.98px) {
  .p-design .bd-process__stage { min-height: 400px; border-radius: 20px; }
  .p-design .bd-step__btn { padding: 14px 16px; gap: 12px; }
  .p-design .bd-step__text { padding: 0 18px 18px 48px; }
  .p-design .bd-sheet { padding: 14px; }
  .p-design .bd-rev { height: 170px; }
  .p-design .bd-pin--1 { left: calc(50% - 80px); top: 34px; }
  .p-design .bd-pin--2 { left: calc(50% + 62px); bottom: 44px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.p-design .bd-faq__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .p-design .bd-faq__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .p-design .bd-faq__head { position: sticky; top: calc(var(--header-h) + 24px); }
}
.p-design .bd-faq__head { display: grid; gap: 20px; justify-items: start; }
.p-design .bd-faq__head .bd-head__title { margin-top: 0; }
.p-design .bd-faq__link { margin-top: 4px; font-size: 0.9375rem; }
.p-design .bd-faq__q { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.p-design .bd-faq__list .acc-trigger { font-weight: 400; color: var(--ink); }
.p-design .bd-faq__list .acc-trigger:hover .acc-icon { border-color: var(--ink); }

/* ==========================================================================
   Closing band
   ========================================================================== */
@media (min-width: 960px) { .p-design .bd-cta .cta-band__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } }
.p-design .bd-cta .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(15, 15, 15, 0.5) 0%, rgba(15, 15, 15, 0.2) 50%, rgba(15, 15, 15, 0.55) 100%);
}
.p-design .bd-cta__aside { display: grid; gap: 28px; justify-items: start; }
.p-design .bd-cta__lead { max-width: 30em; font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.74); }
.p-design .bd-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.p-design .bd-cta__btns .btn--ghost { --btn-h: 56px; padding: 0 26px; font-size: 1rem; }