/* Generated by scripts/build-sample-bundles.py from assets/js/samples.js and assets/css/samples.css. Do not edit. */
/* =====================================================================
   Parsa Dev live samples (shown on the Features pages)
   Every colour comes from the site theme (--primary, --accent, --ink …), so samples follow the palette
   picker and Light / Night. Each sample is fenced under its own pds- class. ".is-playing" plays a
   sample once on phones, which can't hover.
   Licence note: PDS-01 to PDS-05 started from MIT-licensed Uiverse.io designs (credits beside each).
   ===================================================================== */

/* keyboard users get the same effect as a mouse hover, plus a clear focus ring */
.pds-ink:focus-visible, .pds-plane:focus-visible, .pds-glide:focus-visible,
.pds-bloom__tile:focus-visible, .pds-petal:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 4px;
}

/* ---------- people who turn motion off on their device get instant, still changes ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="pds-"], [class*="pds-"]::before { transition: none !important; animation: none !important; }
}

/* ---------- shared scroll window for header samples (PDS-11 onwards) ---------- */
.pds-win {
  position: relative; width: min(100%, 520px); height: 320px; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface); scrollbar-width: thin;
}
.pds-win:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.pds-win__page { margin-top: -3.6rem; }
.pds-win__hero { display: grid; place-items: end start; height: 210px; padding: 1.2rem; color: #fff; font-family: var(--font-display, Georgia, serif); font-size: 1.3rem;
  background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-win__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: 1rem; }
.pds-win__row i { height: 90px; border-radius: 12px; background: linear-gradient(160deg, var(--primary-tint), color-mix(in srgb, var(--accent) 55%, var(--surface))); }
.pds-win__row i:nth-child(2) { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 45%, var(--surface)), var(--primary-tint)); }
.pds-win__band { height: 140px; margin: 0 1rem 1rem; border-radius: 14px; background: linear-gradient(90deg, var(--gold), var(--primary)); }
.pds-win__band--alt { background: linear-gradient(90deg, var(--accent), var(--primary-deep)); }

/* ---------- PDS-07 Story Cards ---------- */
.pds-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; width: min(100%, 620px); }
.pds-story__card {
  display: flex; flex-direction: column; gap: .35rem; padding: .7rem .7rem 1rem; border-radius: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--ink) 50%, transparent);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
.pds-story__card h4 { margin: 0; font-family: var(--font-display, Georgia, serif); font-size: 1rem; line-height: 1.25; color: var(--ink); }
.pds-story__cover { display: grid; place-items: center; height: 96px; margin-bottom: .3rem; border-radius: 11px; font-size: 2rem; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-tint), color-mix(in srgb, var(--primary) 60%, var(--surface))); transition: transform .5s ease; }
.pds-story__cover--b { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 50%, var(--surface)), var(--primary-tint)); }
.pds-story__cover--c { background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--primary) 50%, var(--ink))); }
.pds-story__tag { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.pds-story__meta { margin-top: auto; font-size: .75rem; color: var(--ink-faint); }
.pds-story__card:is(:hover, :focus-visible), .is-playing .pds-story__card:nth-child(2) {
  transform: translateY(-6px); box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--ink) 60%, transparent);
}
.pds-story__card:is(:hover, :focus-visible) .pds-story__cover, .is-playing .pds-story__card:nth-child(2) .pds-story__cover { transform: scale(1.06); }
.pds-story__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 560px) { .pds-story { grid-template-columns: 1fr; } .pds-story__card:nth-child(3) { display: none; } }

/* ---------- PDS-85 Folio Filter ---------- */
.pds-folio, .pds-folio * { box-sizing: border-box; }
.pds-folio { position: relative; display: flex; flex-direction: column; gap: .7rem; width: min(100%, 520px); height: 410px; padding: 1rem 1rem .75rem;
  overflow: hidden; text-align: start; color: var(--ink); border-radius: 22px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--ink) 60%, transparent); container-type: inline-size; }
.pds-folio__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pds-folio__title { margin: 0; white-space: nowrap; font-family: var(--font-display, Georgia, serif); font-size: 1.3rem; font-weight: 600; line-height: 1.1; }
.pds-folio__chip { flex: none; padding: .18rem .55rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-sunk); border: 1px dashed var(--border-strong); }
.pds-folio__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.pds-folio__filter { margin: 0; padding: .38rem .8rem; border-radius: 999px; font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  color: var(--ink-muted); background: var(--surface-sunk); border: 1px solid var(--border);
  transition: color .3s, background-color .3s, border-color .3s, transform .3s cubic-bezier(.22, 1, .36, 1); }
.pds-folio__filter:hover { color: var(--ink); border-color: var(--border-strong); }
.pds-folio__filter:active { transform: scale(.95); }
.pds-folio__filter[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.pds-folio :is(.pds-folio__filter, .pds-folio__tile):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-folio__grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); align-content: start; gap: .7rem; min-height: 0;
  margin: 0 -.35rem; padding: .35rem; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.pds-folio__item { margin: 0; transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .18s ease; }
.pds-folio__item[hidden] { display: none; }
.pds-folio__item.is-out { opacity: 0; transform: scale(.88); }
.pds-folio__item.is-in { animation: pds-folio-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.pds-folio__tile { display: grid; gap: .1rem; width: 100%; margin: 0; padding: 0; text-align: start; font: inherit; color: inherit; background: none; border: 0; border-radius: 14px; cursor: pointer; }
.pds-folio__thumb { position: relative; display: block; height: 76px; margin-bottom: .35rem; overflow: hidden; border-radius: 14px;
  background: linear-gradient(135deg, var(--pds-folio-a, var(--primary)), var(--pds-folio-b, var(--accent)));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1); }
.pds-folio__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 15%, color-mix(in srgb, var(--primary-deep) 25%, rgb(0 0 0 / 50%)));
  opacity: 0; transition: opacity .35s; }
.pds-folio__thumb i { position: absolute; display: block; }
.pds-folio__thumb.is-web i { left: 14%; right: 14%; top: 20%; bottom: -8px; border-radius: 7px 7px 0 0;
  background: linear-gradient(color-mix(in srgb, var(--primary) 75%, var(--surface)) 0 0) 9px 15px / 46% 5px no-repeat,
    linear-gradient(var(--border-strong) 0 0) 9px 25px / 66% 3px no-repeat, linear-gradient(var(--border-strong) 0 0) 9px 32px / 52% 3px no-repeat,
    linear-gradient(var(--surface-sunk) 0 0) 0 0 / 100% 8px no-repeat, var(--surface); }
.pds-folio__thumb.is-shop i { left: 32%; right: 32%; top: 16%; bottom: -8px; border-radius: 8px 8px 0 0;
  background: linear-gradient(color-mix(in srgb, var(--ink) 18%, transparent) 0 0) 7px calc(100% - 22px) / 55% 4px no-repeat,
    linear-gradient(var(--primary) 0 0) 7px calc(100% - 13px) / 30% 5px no-repeat,
    linear-gradient(150deg, color-mix(in srgb, var(--gold) 55%, var(--surface)), var(--primary-tint)) 5px 5px / calc(100% - 10px) 52% no-repeat, var(--surface); }
.pds-folio__thumb.is-shop::before { content: "£"; position: absolute; top: 9px; right: 22%; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; font-size: .66rem; font-weight: 700; color: var(--bg); background: var(--ink); }
.pds-folio__thumb.is-app i { left: 37%; right: 37%; top: 12%; bottom: -10px; border-radius: 12px 12px 0 0; border: 3px solid color-mix(in srgb, var(--ink) 82%, transparent); border-bottom: 0;
  background: linear-gradient(color-mix(in srgb, var(--ink) 82%, transparent) 0 0) 50% 3px / 36% 4px no-repeat,
    linear-gradient(var(--primary) 0 0) 50% 14px / 70% 16px no-repeat, linear-gradient(var(--border-strong) 0 0) 50% 36px / 70% 3px no-repeat, var(--surface); }
.pds-folio__thumb.is-ai i { left: 12%; top: 18%; width: 58%; height: 30px; border-radius: 12px 12px 12px 3px;
  background: linear-gradient(var(--border-strong) 0 0) 9px 9px / 70% 3px no-repeat, linear-gradient(var(--border-strong) 0 0) 9px 17px / 46% 3px no-repeat, var(--surface); }
.pds-folio__thumb.is-ai::before { content: ""; position: absolute; right: 12%; bottom: 14%; width: 44%; height: 22px; border-radius: 12px 12px 3px 12px;
  background: linear-gradient(color-mix(in srgb, var(--bg) 70%, transparent) 0 0) 9px 50% / 55% 3px no-repeat, var(--ink); }
.pds-folio__item:nth-child(2) .pds-folio__thumb { --pds-folio-a: color-mix(in srgb, var(--gold) 70%, var(--surface)); --pds-folio-b: var(--primary-tint); }
.pds-folio__item:nth-child(3) .pds-folio__thumb { --pds-folio-a: var(--primary-deep); --pds-folio-b: color-mix(in srgb, var(--primary) 60%, var(--surface)); }
.pds-folio__item:nth-child(4) .pds-folio__thumb { --pds-folio-a: var(--accent); --pds-folio-b: var(--primary-deep); }
.pds-folio__item:nth-child(5) .pds-folio__thumb { --pds-folio-a: var(--accent-deep); --pds-folio-b: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.pds-folio__item:nth-child(6) .pds-folio__thumb { --pds-folio-a: var(--gold); --pds-folio-b: var(--primary); }
.pds-folio__item:nth-child(7) .pds-folio__thumb { --pds-folio-a: color-mix(in srgb, var(--primary) 35%, var(--surface)); --pds-folio-b: color-mix(in srgb, var(--gold) 50%, var(--surface)); }
.pds-folio__item:nth-child(8) .pds-folio__thumb { --pds-folio-a: var(--primary); --pds-folio-b: var(--gold); }
.pds-folio__view { position: absolute; left: 50%; bottom: 9px; z-index: 2; padding: .22rem .6rem; border-radius: 999px; white-space: nowrap; font-size: .68rem; font-weight: 700;
  color: var(--ink); background: var(--surface); box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--ink) 70%, transparent);
  opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s, transform .45s cubic-bezier(.22, 1, .36, 1); }
:is(.pds-folio__tile:hover, .pds-folio__tile:focus-visible, .is-playing .pds-folio__item:first-child .pds-folio__tile) .pds-folio__thumb {
  transform: translateY(-3px); box-shadow: 0 16px 26px -16px color-mix(in srgb, var(--ink) 70%, transparent); }
:is(.pds-folio__tile:hover, .pds-folio__tile:focus-visible, .is-playing .pds-folio__item:first-child .pds-folio__tile) .pds-folio__thumb::after { opacity: 1; }
:is(.pds-folio__tile:hover, .pds-folio__tile:focus-visible, .is-playing .pds-folio__item:first-child .pds-folio__tile) .pds-folio__view { opacity: 1; transform: translate(-50%, 0); }
.pds-folio__tile:active .pds-folio__thumb { transform: scale(.97); }
.pds-folio__name { overflow: hidden; font-size: .8rem; font-weight: 700; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.pds-folio__type { font-size: .68rem; color: var(--ink-faint); }
.pds-folio__live { margin: 0; padding-top: .55rem; font-size: .72rem; color: var(--ink-muted); border-top: 1px solid var(--border); }
@keyframes pds-folio-in { from { opacity: 0; transform: scale(.9) translateY(8px); } }
@container (max-width: 360px) {
  .pds-folio__filters { gap: .3rem; }
  .pds-folio__filter { padding: .3rem .5rem; font-size: .72rem; }
  .pds-folio__grid { gap: .6rem; }
}

/* ---------- PDS-86 Find It ---------- */
.pds-findit, .pds-findit * { box-sizing: border-box; }
.pds-findit { position: relative; display: flex; flex-direction: column; width: min(100%, 520px); height: 400px; overflow: hidden; text-align: start; color: var(--ink);
  border-radius: 20px; background: var(--surface); border: 1px solid var(--border); container-type: inline-size;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 7%, transparent), 0 30px 60px -36px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-findit:focus { outline: none; }
.pds-findit__bar { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-findit__logo { flex: none; font-family: var(--font-display, Georgia, serif); font-size: 1.02rem; font-weight: 600; }
.pds-findit__logo b { padding: .02rem .3rem; border-radius: 6px; font-size: .82em; color: var(--bg); background: var(--ink); }
.pds-findit__box { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .45rem .55rem .45rem .7rem; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); transition: border-color .3s, box-shadow .3s cubic-bezier(.22, 1, .36, 1); }
.pds-findit__box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.pds-findit__glass { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; }
.pds-findit__input { flex: 1; min-width: 0; margin: 0; padding: .1rem 0; border: 0; outline: 0; font: inherit; font-size: .95rem; color: var(--ink); background: none; }
.pds-findit__input::placeholder { color: var(--ink-faint); opacity: 1; }
.pds-findit kbd { display: inline-grid; place-items: center; min-width: 1.3rem; padding: .05rem .32rem; border-radius: 6px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .66rem; font-weight: 600; line-height: 1.45; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 1px 0 var(--border-strong); }
.pds-findit__box:focus-within .pds-findit__slash { opacity: 0; }
.pds-findit__panel { position: relative; flex: 1; min-height: 0; padding: .3rem .5rem .6rem; overflow-y: auto; scrollbar-width: thin; }
.pds-findit__note { margin: .45rem .55rem .1rem; font-size: .7rem; font-weight: 600; color: var(--ink-faint); }
.pds-findit__note[hidden] { display: none; }
.pds-findit__label { margin: .55rem .55rem .25rem; font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary-deep); }
.pds-findit__opt { display: grid; gap: .12rem; padding: .45rem .6rem; border-radius: 11px; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s cubic-bezier(.22, 1, .36, 1), border-color .2s; animation: pds-findit-in .35s cubic-bezier(.22, 1, .36, 1) both; }
.pds-findit__opt[aria-selected="true"] { background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.pds-findit__row { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.pds-findit__name { flex: none; font-size: .88rem; font-weight: 700; color: var(--ink); }
.pds-findit__path { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-mono, ui-monospace, monospace); font-size: .66rem; color: var(--ink-faint); }
.pds-findit__opt[aria-selected="true"] .pds-findit__row::after { content: "↵"; content: "↵" / ""; margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--primary); }
.pds-findit__snip { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .76rem; line-height: 1.4; color: var(--ink-muted); }
.pds-findit mark { padding: 0 .08em; border-radius: 3px; color: inherit; background: color-mix(in srgb, var(--gold) 34%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gold) 70%, transparent); }
.pds-findit__empty { margin: 3.2rem 1rem; text-align: center; font-size: .9rem; color: var(--ink-muted); }
.pds-findit__try { margin: 0 .1rem; padding: .1rem .4rem; border: 0; border-radius: 6px; font: inherit; font-weight: 700; color: var(--primary-deep); background: var(--primary-tint); cursor: pointer; }
.pds-findit__try:focus-visible, .pds-findit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-findit__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .5rem .9rem; font-size: .7rem; color: var(--ink-muted);
  background: var(--surface-sunk); border-top: 1px solid var(--border); }
.pds-findit__foot span { display: inline-flex; align-items: center; gap: .22rem; }
.pds-findit__tip { position: absolute; top: 3.6rem; right: .9rem; z-index: 3; margin: 0; padding: .4rem .7rem; border-radius: 10px; font-size: .76rem; font-weight: 600;
  color: var(--bg); background: var(--ink); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--ink) 70%, transparent); pointer-events: none;
  opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.pds-findit__tip kbd { margin: 0 .1rem; color: var(--ink); }
.pds-findit__tip::before { content: ""; position: absolute; top: -5px; right: 1.4rem; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); }
.pds-findit.is-hint .pds-findit__tip { opacity: 1; transform: none; }
.pds-findit__toast { position: absolute; left: 50%; bottom: 3rem; z-index: 3; margin: 0; padding: .55rem 1rem; border-radius: 999px; white-space: nowrap; font-size: .8rem; font-weight: 600;
  color: var(--bg); background: var(--ink); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ink) 60%, transparent); pointer-events: none;
  opacity: 0; transform: translate(-50%, 12px) scale(.96); transition: opacity .3s, transform .4s cubic-bezier(.22, 1, .36, 1); }
.pds-findit__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@keyframes pds-findit-in { from { opacity: 0; transform: translateY(4px); } }
@container (max-width: 400px) {
  .pds-findit__bar { gap: .55rem; padding: .6rem; }
  .pds-findit__logo { font-size: .9rem; }
  .pds-findit__path, .pds-findit__foot .pds-findit__esc { display: none; }
  .pds-findit__foot { gap: .3rem .7rem; padding: .45rem .7rem; }
}

/* ---------- PDS-87 Live Edit ---------- */
.pds-edit, .pds-edit * { box-sizing: border-box; }
.pds-edit { display: flex; flex-direction: column; width: min(100%, 520px); height: 420px; overflow: hidden; text-align: start; color: var(--ink);
  border-radius: 20px; background: var(--surface); border: 1px solid var(--border); container-type: inline-size;
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-edit__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .85rem; background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-edit__brand { font-family: var(--font-display, Georgia, serif); font-size: .95rem; font-weight: 600; white-space: nowrap; }
.pds-edit__brand small { margin-left: .2rem; font-family: inherit; font-size: .72em; font-weight: 500; color: var(--ink-faint); }
.pds-edit__user { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; color: var(--ink-muted); }
.pds-edit__avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .66rem; font-weight: 700; color: var(--bg); background: var(--ink); }
.pds-edit__role { padding: .08rem .4rem; border-radius: 999px; font-size: .62rem; font-weight: 700; color: var(--primary-deep); background: var(--primary-tint); }
.pds-edit__tabs { display: none; }
.pds-edit__body { flex: 1; display: grid; grid-template-columns: 205px 1fr; min-height: 0; }
.pds-edit__form { display: flex; flex-direction: column; gap: .55rem; min-height: 0; padding: .7rem .85rem; overflow-y: auto; border-right: 1px solid var(--border); scrollbar-width: thin; }
.pds-edit__h { margin: 0; font-size: .82rem; font-weight: 700; }
.pds-edit__h span { margin-left: .25rem; font-weight: 500; color: var(--ink-faint); }
.pds-edit__field { display: grid; gap: .22rem; margin: 0; }
.pds-edit__lbl { padding: 0; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.pds-edit__in { width: 100%; min-width: 0; margin: 0; padding: .42rem .55rem; font: inherit; font-size: .82rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: 9px; outline: 0; transition: border-color .25s, box-shadow .25s; }
.pds-edit__money { display: flex; align-items: center; padding-left: .55rem; font-family: var(--font-mono, ui-monospace, monospace); font-size: .82rem; color: var(--ink-muted);
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 9px; transition: border-color .25s, box-shadow .25s; }
.pds-edit__money .pds-edit__in { padding-left: .25rem; font-family: inherit; border: 0; background: none; }
.pds-edit__field > .pds-edit__in:focus, .pds-edit__money:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.pds-edit__photos { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.pds-edit__photos legend { width: 100%; margin-bottom: .22rem; }
.pds-edit__sw { position: relative; display: block; cursor: pointer; }
.pds-edit__sw input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pds-edit__swatch { display: grid; place-items: center; width: 46px; height: 34px; border-radius: 9px; font-size: 1rem;
  background: var(--pds-edit-photo); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.pds-edit__sw:hover .pds-edit__swatch { transform: translateY(-2px); }
.pds-edit__sw input:checked + .pds-edit__swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.pds-edit__sw input:focus-visible + .pds-edit__swatch { outline: 2px solid var(--primary); outline-offset: 5px; }
.pds-edit__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pds-edit :is(.pds-edit__sw:nth-of-type(1), .pds-edit__site[data-photo="0"]) { --pds-edit-photo: linear-gradient(135deg, color-mix(in srgb, var(--gold) 75%, var(--surface)), color-mix(in srgb, var(--primary) 55%, var(--surface))); }
.pds-edit :is(.pds-edit__sw:nth-of-type(2), .pds-edit__site[data-photo="1"]) { --pds-edit-photo: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, var(--surface)), color-mix(in srgb, var(--gold) 50%, var(--surface))); }
.pds-edit :is(.pds-edit__sw:nth-of-type(3), .pds-edit__site[data-photo="2"]) { --pds-edit-photo: linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, var(--surface)), color-mix(in srgb, var(--primary-deep) 80%, var(--surface))); }
.pds-edit__line { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.pds-edit__switch { position: relative; width: 40px; height: 23px; margin: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--border-strong); transition: background-color .3s; }
.pds-edit__switch i { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--ink) 30%, transparent); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.pds-edit__switch[aria-checked="true"] { background: var(--accent); }
.pds-edit__switch[aria-checked="true"] i { transform: translateX(17px); }
.pds-edit :is(.pds-edit__switch, .pds-edit__publish, .pds-edit__tab):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-edit__publish { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; margin: .15rem 0 0; padding: .55rem .7rem; border-radius: 10px;
  font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; color: var(--bg); background: var(--ink); border: 1px solid var(--ink);
  transition: background-color .35s, color .35s, border-color .35s, transform .2s; }
.pds-edit__publish:active { transform: scale(.97); }
.pds-edit__spin { display: none; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
  animation: pds-edit-spin .8s linear infinite; }
.pds-edit.is-saving .pds-edit__spin { display: block; }
.pds-edit.is-live .pds-edit__publish { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.pds-edit__status { margin: 0; font-size: .7rem; line-height: 1.35; color: var(--ink-muted); }
.pds-edit__preview { display: flex; flex-direction: column; min-height: 0; padding: .75rem; background: var(--surface-sunk); }
.pds-edit__chrome { display: flex; align-items: center; gap: 4px; padding: .38rem .55rem; border-radius: 11px 11px 0 0; background: var(--surface); border: 1px solid var(--border); border-bottom: 0; }
.pds-edit__chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.pds-edit__chrome span { margin-left: .4rem; font-size: .62rem; font-weight: 600; color: var(--ink-faint); }
.pds-edit__site { flex: 1; display: flex; flex-direction: column; gap: .45rem; min-height: 0; padding: .6rem .7rem .7rem; overflow: hidden; border-radius: 0 0 12px 12px;
  background: var(--bg); border: 1px solid var(--border); box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--ink) 60%, transparent); }
.pds-edit__nav { display: flex; align-items: center; justify-content: space-between; font-size: .64rem; color: var(--ink-faint); }
.pds-edit__nav b { font-family: var(--font-display, Georgia, serif); font-size: .86rem; color: var(--ink); }
.pds-edit__hero { position: relative; display: grid; place-items: center; flex: none; height: 104px; border-radius: 11px; background: var(--pds-edit-photo); transition: background .4s; }
.pds-edit__pic { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--ink) 30%, transparent)); }
.pds-edit__badge { position: absolute; top: .45rem; left: .45rem; display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .5rem; border-radius: 999px;
  font-size: .64rem; font-weight: 700; color: var(--accent-deep); background: var(--surface); }
.pds-edit__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pds-edit__badge.is-closed { color: var(--ink-muted); }
.pds-edit__badge.is-closed::before { background: var(--ink-faint); }
.pds-edit__title { margin: 0 -.2rem; padding: 0 .2rem; border-radius: 6px; font-family: var(--font-display, Georgia, serif); font-size: 1.08rem; font-weight: 600; line-height: 1.18;
  overflow-wrap: anywhere; color: var(--ink); }
.pds-edit__title.is-empty { color: var(--ink-faint); }
.pds-edit__price { align-self: flex-start; margin: 0 -.2rem; padding: 0 .2rem; border-radius: 6px; font-size: .76rem; color: var(--ink-muted); }
.pds-edit__price b { font-family: var(--font-mono, ui-monospace, monospace); color: var(--ink); }
.pds-edit__cta { align-self: flex-start; margin-top: auto; padding: .38rem .75rem; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--bg); background: var(--ink); }
.pds-edit .is-flash { animation: pds-edit-flash 1s cubic-bezier(.22, 1, .36, 1); }
@keyframes pds-edit-flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 45%, transparent); background-color: color-mix(in srgb, var(--primary) 16%, transparent); } }
@keyframes pds-edit-spin { to { transform: rotate(360deg); } }
@container (max-width: 440px) {
  .pds-edit__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: .55rem .7rem 0; padding: 3px; border-radius: 11px; background: var(--surface-sunk); border: 1px solid var(--border); }
  .pds-edit__tab { position: relative; margin: 0; padding: .38rem; border: 0; border-radius: 8px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; color: var(--ink-muted); background: none;
    transition: background-color .3s, color .3s; }
  .pds-edit__tab[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--ink) 35%, transparent); }
  .pds-edit__dot { position: absolute; top: 7px; margin-left: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0); transition: opacity .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .pds-edit.has-news .pds-edit__dot { opacity: 1; transform: none; }
  .pds-edit__body { grid-template-columns: 1fr; }
  .pds-edit__form { border-right: 0; }
  .pds-edit__h { display: none; }
  .pds-edit[data-view="edit"] .pds-edit__preview, .pds-edit[data-view="preview"] .pds-edit__form { display: none; }
  .pds-edit__preview { background: none; padding-top: .6rem; }
  .pds-edit__user { font-size: 0; gap: .3rem; }
  .pds-edit__role { font-size: .62rem; }
}

/* ---------- PDS-88 What’s On ---------- */
.pds-whatson, .pds-whatson * { box-sizing: border-box; }
.pds-whatson { width: min(100%, 520px); text-align: start; color: var(--ink); container-type: inline-size; }
.pds-whatson__app { display: flex; flex-direction: column; gap: .75rem; height: 372px; padding: .9rem; overflow: hidden; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-whatson__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.pds-whatson__head { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pds-whatson__month { margin: 0; white-space: nowrap; font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; font-weight: 600; line-height: 1.1; }
.pds-whatson__chip { flex: none; padding: .16rem .5rem; border-radius: 999px; font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-sunk); border: 1px dashed var(--border-strong); }
.pds-whatson__ctrls { display: flex; align-items: center; gap: .3rem; }
.pds-whatson :where(button) { margin: 0; font: inherit; color: inherit; cursor: pointer; }
.pds-whatson :is(button, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pds-whatson__seg { display: inline-flex; gap: 2px; margin-right: .2rem; padding: 3px; border-radius: 10px; background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-whatson__view { padding: .26rem .6rem; border: 0; border-radius: 7px; font-size: .74rem; font-weight: 600; color: var(--ink-muted); background: none; transition: background-color .3s, color .3s; }
.pds-whatson__view[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 2px 8px -3px color-mix(in srgb, var(--ink) 35%, transparent); }
.pds-whatson__nav { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 9px; background: var(--surface); border: 1px solid var(--border-strong);
  transition: background-color .25s, transform .2s; }
.pds-whatson__nav:hover { background: var(--surface-sunk); }
.pds-whatson__nav:active { transform: scale(.92); }
.pds-whatson__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pds-whatson__body { flex: 1; display: grid; grid-template-columns: 1fr 172px; gap: .8rem; min-height: 0; }
.pds-whatson__main { display: flex; flex-direction: column; min-height: 0; }
.pds-whatson[data-view="list"] .pds-whatson__cal, .pds-whatson[data-view="month"] .pds-whatson__list { display: none; }
.pds-whatson__dow, .pds-whatson__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.pds-whatson__dow { margin-bottom: 4px; text-align: center; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.pds-whatson__grid { display: grid; gap: 3px; }
.pds-whatson__day { position: relative; display: grid; place-items: center; height: 34px; border-radius: 9px; cursor: pointer; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .76rem; font-weight: 600; transition: background-color .25s, color .25s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.pds-whatson__day.is-blank { cursor: default; }
.pds-whatson__day[data-n]:hover { background: var(--surface-sunk); }
.pds-whatson__day.is-past { color: var(--ink-faint); }
.pds-whatson__day.is-today { color: var(--primary-deep); box-shadow: inset 0 0 0 1.5px var(--primary); }
.pds-whatson__day.is-on { color: var(--bg); background: var(--ink); transform: scale(1.04); }
.pds-whatson__day.is-on:hover { background: var(--ink); }
.pds-whatson .is-c1 { --pds-whatson-c: var(--primary); }
.pds-whatson .is-c2 { --pds-whatson-c: var(--gold); }
.pds-whatson .is-c3 { --pds-whatson-c: var(--accent); }
.pds-whatson .is-c4 { --pds-whatson-c: var(--primary-deep); }
.pds-whatson .is-c5 { --pds-whatson-c: var(--accent-deep); }
.pds-whatson__dot { position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--pds-whatson-c); transform: translateX(-50%);
  box-shadow: 0 0 0 1.5px var(--surface); }
.pds-whatson__day.is-on .pds-whatson__dot { box-shadow: none; }
.pds-whatson__list { display: grid; align-content: start; gap: .4rem; min-height: 0; margin: 0; padding: 2px; list-style: none; overflow-y: auto; scrollbar-width: thin; }
.pds-whatson__list li { margin: 0; animation: pds-whatson-in .4s cubic-bezier(.22, 1, .36, 1) both; }
.pds-whatson__row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem .5rem; text-align: start; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  transition: border-color .25s, background-color .25s; }
.pds-whatson__row:hover { border-color: var(--border-strong); }
.pds-whatson__row.is-on { background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.pds-whatson__row.is-past { opacity: .62; }
.pds-whatson__date { flex: none; display: grid; place-items: center; align-content: center; width: 38px; height: 38px; border-radius: 10px; font-size: .56rem; font-weight: 700; text-transform: uppercase;
  color: var(--ink-muted); background: color-mix(in srgb, var(--pds-whatson-c) 18%, var(--surface)); box-shadow: inset 3px 0 0 var(--pds-whatson-c); }
.pds-whatson__date b { font-family: var(--font-mono, ui-monospace, monospace); font-size: .92rem; line-height: 1.05; color: var(--ink); }
.pds-whatson__rtxt { display: grid; min-width: 0; }
.pds-whatson__rtxt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; }
.pds-whatson__rtxt small { font-size: .68rem; color: var(--ink-muted); }
.pds-whatson__detail { display: flex; flex-direction: column; gap: .4rem; min-height: 0; padding: .75rem; overflow-y: auto; border-radius: 14px; background: var(--surface-sunk); border: 1px solid var(--border); scrollbar-width: thin; }
.pds-whatson__card { flex: 1; display: flex; flex-direction: column; gap: .45rem; }
.pds-whatson__card > * { margin: 0; animation: pds-whatson-in .4s cubic-bezier(.22, 1, .36, 1) both; }
.pds-whatson__kicker { display: flex; align-items: center; gap: .35rem; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pds-whatson__kicker[class*="is-c"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pds-whatson-c); }
.pds-whatson__title { font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; font-weight: 600; line-height: 1.15; }
.pds-whatson__metas { display: grid; gap: .3rem; }
.pds-whatson__meta { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .74rem; color: var(--ink-muted); }
.pds-whatson__meta svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pds-whatson__acts { display: grid; gap: .35rem; margin-top: auto; }
.pds-whatson__act { padding: .45rem .5rem; border-radius: 9px; font-size: .7rem; font-weight: 700; line-height: 1.2; background: var(--surface); border: 1px solid var(--border-strong); transition: transform .2s; }
.pds-whatson__act.is-main { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.pds-whatson__act:active, .pds-whatson__jump:active { transform: scale(.96); }
.pds-whatson__none { font-size: .8rem; color: var(--ink-muted); }
.pds-whatson__jump { align-self: flex-start; padding: .4rem .55rem; text-align: start; border-radius: 9px; font-size: .72rem; font-weight: 700; color: var(--primary-deep); background: var(--surface);
  border: 1px dashed var(--border-strong); }
.pds-whatson__note { margin: 0; font-size: .68rem; font-weight: 600; line-height: 1.3; color: var(--accent-deep); }
.pds-whatson__note:empty { display: none; }
@keyframes pds-whatson-in { from { opacity: 0; transform: translateY(5px); } }
@container (max-width: 460px) {
  .pds-whatson__app { height: 436px; padding: .75rem; gap: .6rem; }
  .pds-whatson__ctrls { width: 100%; }
  .pds-whatson__seg { margin-right: auto; }
  .pds-whatson__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .5rem; }
  .pds-whatson__day { height: 28px; }
  .pds-whatson__dot { bottom: 2px; }
  .pds-whatson__main { max-height: 210px; }
  .pds-whatson[data-view="list"] .pds-whatson__main { max-height: 172px; }
  .pds-whatson__card { gap: .35rem; }
  .pds-whatson__detail { padding: .5rem .65rem; }
  .pds-whatson__metas { display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
  .pds-whatson__acts { grid-template-columns: 1fr auto; }
  .pds-whatson__act.is-main { padding-inline: .9rem; }
}

/* ---------- PDS-89 Case Story ---------- */
.pds-case, .pds-case * { box-sizing: border-box; }
.pds-case { --pds-case-ease: cubic-bezier(.22, 1, .36, 1); container-type: inline-size;
  position: relative; display: grid; gap: .7rem; width: min(100%, 440px); margin: 0 auto; padding: .7rem .7rem .8rem; overflow: hidden;
  color: var(--ink); text-align: start; border: 1px solid var(--border); border-radius: 22px; background: var(--surface);
  box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-case :where(button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pds-case :where(button, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-case :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.pds-case svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the project picture, drawn with gradients: a browser window and a phone */
.pds-case__hero { position: relative; height: 116px; overflow: hidden; border-radius: 15px; background: var(--primary-deep); }
.pds-case__art { position: absolute; inset: 0;
  background: radial-gradient(80% 130% at 0% 0%, color-mix(in srgb, var(--gold) 70%, transparent), transparent 62%),
    radial-gradient(70% 120% at 100% 100%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 62%),
    linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-case__art[data-art="gym"] {
  background: radial-gradient(80% 130% at 100% 0%, color-mix(in srgb, var(--accent) 75%, transparent), transparent 62%),
    radial-gradient(70% 120% at 0% 100%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 62%),
    linear-gradient(135deg, var(--primary-deep), var(--primary)); }
.pds-case__win { position: absolute; left: 9%; top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 7px;
  width: 58%; height: 124px; padding: 22px 9px 9px; border-radius: 10px; transform: rotate(-3deg);
  background: radial-gradient(circle at 10px 10px, var(--border-strong) 2.5px, transparent 3px), radial-gradient(circle at 19px 10px, var(--border-strong) 2.5px, transparent 3px),
    radial-gradient(circle at 28px 10px, var(--border-strong) 2.5px, transparent 3px), var(--surface);
  box-shadow: 0 18px 30px -16px color-mix(in srgb, var(--ink) 70%, transparent); }
.pds-case__win i, .pds-case__phone i { display: block; height: 42px; border-radius: 8px;
  background: radial-gradient(circle at 50% 48%, var(--gold) 0 24%, color-mix(in srgb, var(--gold) 35%, transparent) 25% 33%, transparent 34%), var(--primary-tint); }
.pds-case__win i:nth-child(3n+2) { background: radial-gradient(circle at 50% 48%, var(--primary) 0 22%, color-mix(in srgb, var(--primary) 30%, transparent) 23% 31%, transparent 32%), var(--surface-sunk); }
.pds-case__phone { position: absolute; right: 9%; top: 14px; display: grid; align-content: start; gap: 5px; width: 64px; height: 120px; padding: 16px 6px 6px;
  border-radius: 15px; background: var(--bg); transform: rotate(5deg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 82%, transparent), 0 20px 30px -14px color-mix(in srgb, var(--ink) 75%, transparent); }
.pds-case__phone i { height: 30px; border-radius: 7px; }
.pds-case__phone i:last-child { height: 12px; border-radius: 99px; background: var(--primary); }
.pds-case__art[data-art="gym"] .pds-case__win i { height: 20px; border-radius: 6px; background: var(--surface-sunk); box-shadow: inset 3px 0 0 var(--border-strong); }
.pds-case__art[data-art="gym"] .pds-case__win :is(i:nth-child(2), i:nth-child(6)) { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
.pds-case__art[data-art="gym"] .pds-case__phone i { height: 16px; border-radius: 5px; background: var(--surface-sunk); }
.pds-case__art[data-art="gym"] .pds-case__phone i:nth-child(2) { background: var(--accent); }
.pds-case__art[data-art="gym"] .pds-case__phone i:last-child { height: 12px; background: var(--primary); }
.pds-case__tags { position: absolute; left: .55rem; bottom: .55rem; display: flex; gap: .3rem; }
.pds-case__tags span, .pds-case__count { padding: .22rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 700; line-height: 1.2; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--ink) 60%, transparent); }
.pds-case__count { position: absolute; right: .55rem; bottom: .55rem; font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; }
.pds-case__title { padding: 0 .2rem; font-family: var(--font-display, Georgia, serif); font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
.pds-case__title span { font-weight: 500; color: var(--ink-faint); }
.pds-case__title b { font-weight: inherit; }
/* Next case study: slide out, swap, slide in */
.pds-case :is(.pds-case__art, .pds-case__tags, .pds-case__count, .pds-case__title, .pds-case__panels) { transition: opacity .24s, transform .3s, filter .24s; }
.pds-case.is-swap :is(.pds-case__art, .pds-case__tags, .pds-case__count, .pds-case__title, .pds-case__panels) { opacity: 0; transform: translateX(-16px); filter: blur(3px); }
.pds-case.is-in :is(.pds-case__art, .pds-case__tags, .pds-case__count, .pds-case__title, .pds-case__panels) { animation: pds-case-enter .55s var(--pds-case-ease) both; }
.pds-case.is-in :is(.pds-case__title, .pds-case__count) { animation-delay: .05s; }
.pds-case.is-in .pds-case__panels { animation-delay: .1s; }
/* the three steps */
.pds-case__tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 14px; background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-case__ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), 0 8px 16px -10px color-mix(in srgb, var(--ink) 55%, transparent);
  transform: translateX(calc(var(--n, 0) * 100%)); transition: transform .5s var(--pds-case-ease); }
.pds-case__tab { position: relative; display: flex; align-items: center; justify-content: center; gap: .35rem; min-width: 0; padding: .5rem .25rem; border-radius: 10px;
  font-size: .76rem; font-weight: 600; white-space: nowrap; color: var(--ink-muted); transition: color .3s; }
.pds-case__tab b { flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  font: 700 .6rem/1 var(--font-mono, ui-monospace, monospace); border: 1px solid var(--border-strong); transition: background .3s, color .3s, border-color .3s; }
.pds-case__tab:hover, .pds-case__tab[aria-selected="true"] { color: var(--ink); }
.pds-case__tab[aria-selected="true"] b { color: var(--bg); background: var(--primary); border-color: var(--primary); }
.pds-case__short { display: none; }
.pds-case__panels { min-height: 86px; }
.pds-case__panel { padding: 0 .2rem; border-radius: 8px; animation: pds-case-in .5s var(--pds-case-ease); }
.pds-case__panel[hidden] { display: none; }
.pds-case__text { font-size: .86rem; line-height: 1.55; color: var(--ink-muted); }
.pds-case__built { display: grid; gap: .4rem; font-size: .84rem; }
.pds-case__built li { position: relative; padding-left: 1.65rem; animation: pds-case-in .5s var(--pds-case-ease) both; }
.pds-case__built li:nth-child(2), .pds-case__stats li:nth-child(2) { animation-delay: .07s; }
.pds-case__built li:nth-child(3), .pds-case__stats li:nth-child(3) { animation-delay: .14s; }
.pds-case__built li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, transparent); }
.pds-case__built li::after { content: ""; position: absolute; left: .4rem; top: 50%; width: .3rem; height: .55rem; margin-top: -.36rem;
  border: solid var(--accent-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pds-case__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.pds-case__stats li { padding: .5rem .55rem; border-radius: 12px; background: var(--surface-sunk); border: 1px solid var(--border); animation: pds-case-in .5s var(--pds-case-ease) both; }
.pds-case__stats b { display: block; font: 600 1.2rem/1.15 var(--font-mono, ui-monospace, monospace); color: var(--primary-deep); }
.pds-case__stats span { display: block; margin-top: .15rem; font-size: .68rem; line-height: 1.3; color: var(--ink-muted); }
.pds-case__fine { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .68rem; color: var(--ink-faint); }
.pds-case__chip { padding: .15rem .45rem; border-radius: 999px; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary-deep); background: var(--primary-tint); }
/* linked service + next project */
.pds-case__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .65rem; border-top: 1px solid var(--border); }
.pds-case__svc { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; padding: .3rem .2rem; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--primary-deep); }
.pds-case__svc small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pds-case__svc span { white-space: nowrap; text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); transition: text-decoration-color .3s; }
.pds-case__svc:hover span { text-decoration-color: currentColor; }
.pds-case__next { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--primary) 80%, transparent); transition: transform .35s var(--pds-case-ease), box-shadow .35s; }
.pds-case__next:hover { transform: translateY(-1px); box-shadow: 0 16px 26px -14px color-mix(in srgb, var(--primary) 90%, transparent); }
.pds-case__next:active { transform: scale(.97); }
.pds-case__next svg { transition: transform .35s var(--pds-case-ease); }
.pds-case__next:is(:hover, :focus-visible) svg { transform: translateX(3px); }
.pds-case__toast { position: absolute; left: .8rem; right: .8rem; bottom: 3.8rem; z-index: 2; width: fit-content; margin: 0 auto; padding: .45rem .8rem; border-radius: 10px;
  font-size: .74rem; line-height: 1.35; text-align: center; color: var(--bg); background: var(--ink); pointer-events: none;
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--ink) 70%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .45s var(--pds-case-ease); }
.pds-case__toast.is-on { opacity: 1; transform: none; }
@container (max-width: 330px) {
  .pds-case__hero { height: 86px; }
  .pds-case__phone { right: 6%; }
  .pds-case__title { font-size: 1.02rem; }
  .pds-case__tab { font-size: .72rem; }
  .pds-case__tab b, .pds-case__full, .pds-case__long, .pds-case__svc small { display: none; }
  .pds-case__short { display: inline; }
  .pds-case { gap: .6rem; }
  .pds-case__text { font-size: .8rem; }
  .pds-case__built { gap: .3rem; font-size: .78rem; line-height: 1.35; }
  .pds-case__stats { grid-template-columns: 1fr; gap: .25rem; }
  .pds-case__stats li { display: flex; align-items: baseline; gap: .5rem; padding: .18rem .55rem; border-radius: 9px; }
  .pds-case__stats b { flex: none; min-width: 3.3em; font-size: .92rem; }
  .pds-case__foot { padding-top: .5rem; }
  .pds-case__stats span { margin: 0; }
  .pds-case__fine { margin-top: .35rem; }
}
@keyframes pds-case-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pds-case-enter { from { opacity: 0; transform: translateX(14px); filter: blur(3px); } }

/* ---------- PDS-90 Open Roles ---------- */
.pds-jobs, .pds-jobs * { box-sizing: border-box; }
.pds-jobs { --pds-jobs-ease: cubic-bezier(.22, 1, .36, 1); container-type: inline-size;
  display: grid; gap: .7rem; width: min(100%, 460px); margin: 0 auto; padding: .85rem; color: var(--ink); text-align: start;
  border: 1px solid var(--border); border-radius: 22px; background: var(--surface);
  box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-jobs :where(button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pds-jobs :where(button):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-jobs :where(p, ul) { margin: 0; padding: 0; list-style: none; }
.pds-jobs svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pds-jobs__top { display: flex; align-items: center; gap: .6rem; }
.pds-jobs__logo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-family: var(--font-display, Georgia, serif); font-weight: 700; color: var(--bg); background: linear-gradient(135deg, var(--gold), var(--primary)); }
.pds-jobs__name { display: grid; min-width: 0; line-height: 1.2; }
.pds-jobs__name b { font-family: var(--font-display, Georgia, serif); font-size: 1rem; font-weight: 600; }
.pds-jobs__name small { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; font-size: .7rem; color: var(--ink-muted); }
.pds-jobs__chip { padding: .1rem .4rem; border-radius: 999px; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary-deep); background: var(--primary-tint); }
.pds-jobs__count { flex: none; margin-left: auto; padding: .3rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
  color: var(--ink-muted); background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-jobs__count b { display: inline-block; font-family: var(--font-mono, ui-monospace, monospace); color: var(--ink); }
.pds-jobs__count.is-bump b { animation: pds-jobs-bump .5s var(--pds-jobs-ease); }
/* filters: tap again to clear */
.pds-jobs__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.pds-jobs__group { display: flex; align-items: center; gap: 2px; padding: 3px 3px 3px .5rem; border-radius: 999px; background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-jobs__group svg { width: 13px; height: 13px; margin-right: .2rem; color: var(--ink-faint); }
.pds-jobs__f { padding: .32rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: var(--ink-muted); transition: background .25s, color .25s, box-shadow .25s; }
.pds-jobs__f:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pds-jobs__f[aria-pressed="true"] { color: var(--bg); background: var(--primary); box-shadow: 0 6px 12px -8px color-mix(in srgb, var(--primary) 90%, transparent); }
/* list and detail share one window; the detail slides over the list */
.pds-jobs__view { position: relative; height: 262px; overflow: hidden; }
.pds-jobs__list { display: grid; align-content: start; gap: .4rem; height: 100%; padding: 2px; overflow-y: auto; scrollbar-width: thin;
  transition: transform .5s var(--pds-jobs-ease), opacity .3s, visibility 0s; }
.pds-jobs.is-open .pds-jobs__list { visibility: hidden; opacity: 0; transform: translateX(-36px); transition: transform .5s var(--pds-jobs-ease), opacity .3s, visibility 0s .5s; }
.pds-jobs__item { animation: pds-jobs-in .45s var(--pds-jobs-ease) both; }
.pds-jobs__item[hidden] { display: none; }
.pds-jobs__job { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "role pay go" "meta pay go"; align-items: center; gap: .1rem .55rem;
  width: 100%; padding: .6rem .7rem; border-radius: 12px; text-align: start; border: 1px solid var(--border); background: var(--surface);
  transition: border-color .25s, box-shadow .35s, transform .35s var(--pds-jobs-ease); }
.pds-jobs__job:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-1px);
  box-shadow: 0 10px 20px -16px color-mix(in srgb, var(--ink) 60%, transparent); }
.pds-jobs__job:focus-visible { outline-offset: 0; }
.pds-jobs__role { grid-area: role; font-size: .86rem; font-weight: 700; line-height: 1.25; }
.pds-jobs__meta { grid-area: meta; font-size: .72rem; color: var(--ink-muted); }
.pds-jobs__pay { grid-area: pay; padding: .3rem .45rem; border-radius: 8px; font: 600 .72rem/1 var(--font-mono, ui-monospace, monospace); color: var(--primary-deep); background: var(--primary-tint); }
.pds-jobs__job > svg { grid-area: go; color: var(--ink-faint); transition: transform .35s var(--pds-jobs-ease), color .25s; }
.pds-jobs__job:hover > svg { color: var(--primary); transform: translateX(3px); }
.pds-jobs__detail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 2px 2px .4rem; overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateX(36px); transition: transform .5s var(--pds-jobs-ease), opacity .3s, visibility 0s .5s; }
.pds-jobs.is-open .pds-jobs__detail { visibility: visible; opacity: 1; transform: none; transition: transform .5s var(--pds-jobs-ease), opacity .35s .05s, visibility 0s; }
.pds-jobs__back { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem .3rem .35rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
  color: var(--ink-muted); border: 1px solid var(--border); transition: color .25s, border-color .25s; }
.pds-jobs__back:hover { color: var(--ink); border-color: var(--border-strong); }
.pds-jobs__dtitle { font-family: var(--font-display, Georgia, serif); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.pds-jobs__dtitle:focus { outline: none; }
.pds-jobs__dmeta { display: flex; flex-wrap: wrap; gap: .3rem; }
.pds-jobs__dmeta span { padding: .18rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 600; color: var(--ink-muted); background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-jobs__band { display: grid; gap: .12rem; width: 100%; padding: .5rem .7rem; border-radius: 12px; background: var(--primary-tint); }
.pds-jobs__band small { font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-deep); }
.pds-jobs__band b { font: 600 .9rem/1.2 var(--font-mono, ui-monospace, monospace); color: var(--ink); }
.pds-jobs__about { font-size: .82rem; line-height: 1.5; color: var(--ink-muted); }
.pds-jobs__how { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--ink-faint); }
.pds-jobs__apply { padding: .6rem 1.1rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--bg);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep)); box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--primary) 80%, transparent);
  transition: transform .35s var(--pds-jobs-ease), background .3s; }
.pds-jobs__apply:active { transform: scale(.97); }
.pds-jobs__apply.is-sent { background: var(--accent-deep); box-shadow: 0 12px 22px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
.pds-jobs__done { font-size: .74rem; line-height: 1.45; color: var(--ink-muted); }
.pds-jobs__done:not(:empty) { animation: pds-jobs-in .45s var(--pds-jobs-ease); }
@container (max-width: 340px) {
  .pds-jobs__view { height: 236px; }
  .pds-jobs__job { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "role pay" "meta pay"; }
  .pds-jobs__job > svg { display: none; }
}
@keyframes pds-jobs-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes pds-jobs-bump { 40% { transform: translateY(-3px) scale(1.18); color: var(--primary); } }

/* ---------- PDS-91 Lingo Card ---------- */
.pds-lingo, .pds-lingo * { box-sizing: border-box; }
.pds-lingo { --pds-lingo-ease: cubic-bezier(.22, 1, .36, 1); container-type: inline-size;
  display: grid; gap: .65rem; width: min(100%, 470px); margin: 0 auto; color: var(--ink); text-align: start; }
.pds-lingo :where(button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pds-lingo :where(button):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-lingo :where(p) { margin: 0; }
.pds-lingo svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* a mini browser: the address changes with the language */
.pds-lingo__win { overflow: hidden; border-radius: 18px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-lingo__bar { display: flex; align-items: center; gap: 5px; padding: .45rem .7rem; background: var(--surface-sunk); border-bottom: 1px solid var(--border); }
.pds-lingo__bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.pds-lingo__url { display: flex; align-items: center; gap: .3rem; flex: 1; min-width: 0; margin-left: .45rem; padding: .22rem .6rem; overflow: hidden; white-space: nowrap;
  border-radius: 8px; font: 500 .7rem/1.25 var(--font-mono, ui-monospace, monospace); color: var(--ink-muted); background: var(--surface); border: 1px solid var(--border); }
.pds-lingo__url svg { width: 11px; height: 11px; color: var(--accent-deep); }
.pds-lingo__url b { display: inline-block; font-weight: 600; color: var(--primary-deep); }
.pds-lingo__url b.is-new { animation: pds-lingo-pop .55s var(--pds-lingo-ease); }
/* the page itself: lang and dir change here */
.pds-lingo__page { height: 238px; padding: .75rem 1rem 1rem; overflow: hidden;
  background: radial-gradient(90% 80% at 100% 0%, var(--primary-tint), transparent 70%), var(--surface); }
.pds-lingo__page[dir="rtl"] { background: radial-gradient(90% 80% at 0% 0%, var(--primary-tint), transparent 70%), var(--surface); }
.pds-lingo__in { display: flex; flex-direction: column; gap: .75rem; height: 100%; transition: opacity .22s, filter .22s, transform .32s var(--pds-lingo-ease); }
.pds-lingo__page.is-out .pds-lingo__in { opacity: 0; filter: blur(4px); transform: translateY(5px); }
.pds-lingo__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pds-lingo__brand { font-family: var(--font-display, Georgia, serif); font-size: .95rem; font-weight: 600; }
.pds-lingo__brand b { padding: .05rem .35rem; border-radius: 6px; font-size: .8em; color: var(--bg); background: var(--primary); }
.pds-lingo__globe { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .5rem; border-radius: 999px;
  font: 600 .66rem/1 var(--font-mono, ui-monospace, monospace); color: var(--ink-muted); background: var(--surface); border: 1px solid var(--border); }
.pds-lingo__globe svg { width: 12px; height: 12px; }
.pds-lingo__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .9rem; }
.pds-lingo__copy { display: grid; justify-items: start; gap: .45rem; }
.pds-lingo__kick { font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-deep); }
.pds-lingo__h { font-family: var(--font-display, Georgia, serif); font-size: 1.32rem; font-weight: 600; line-height: 1.18; text-wrap: balance; }
.pds-lingo__p { font-size: .8rem; line-height: 1.5; color: var(--ink-muted); }
.pds-lingo__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; padding: .5rem .9rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--primary) 80%, transparent); }
.pds-lingo__page[dir="rtl"] .pds-lingo__cta svg { transform: scaleX(-1); }
/* Persian: no letter-spacing or capitals (they break joined letters), a little more line height */
.pds-lingo__page[lang="fa"] :is(.pds-lingo__kick, .pds-lingo__h) { font-family: inherit; letter-spacing: 0; text-transform: none; }
.pds-lingo__page[lang="fa"] .pds-lingo__kick { font-size: .74rem; }
.pds-lingo__page[lang="fa"] .pds-lingo__h { font-weight: 700; line-height: 1.5; }
.pds-lingo__page[lang="fa"] .pds-lingo__p { font-size: .84rem; line-height: 1.8; }
.pds-lingo__art { position: relative; width: 92px; height: 112px; }
.pds-lingo__art i { position: absolute; border-radius: 50%; }
.pds-lingo__art i:nth-child(1) { top: 0; inset-inline-end: 0; width: 78px; height: 78px; background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--primary) 80%, transparent); }
.pds-lingo__art i:nth-child(2) { bottom: 6px; inset-inline-start: 0; width: 46px; height: 46px; border-radius: 14px; transform: rotate(-10deg);
  background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 40%, var(--surface))); }
.pds-lingo__art i:nth-child(3) { bottom: 0; inset-inline-end: 8px; width: 26px; height: 26px; background: var(--primary-tint); border: 2px solid var(--primary); }
/* language switcher */
.pds-lingo__langs { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; padding: .3rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.pds-lingo__lang { padding: .4rem .62rem; border-radius: 11px; font-size: .76rem; font-weight: 600; color: var(--ink-muted); transition: background .3s, color .3s, box-shadow .3s; }
.pds-lingo__lang:hover { color: var(--ink); background: var(--surface-sunk); }
.pds-lingo__lang[aria-pressed="true"] { color: var(--bg); background: var(--primary); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--primary) 90%, transparent); }
.pds-lingo__foot { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.pds-lingo__note { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; color: var(--ink-muted); transition: color .3s; }
.pds-lingo__note svg { transition: transform .6s var(--pds-lingo-ease); }
.pds-lingo.is-rtl .pds-lingo__note { color: var(--primary-deep); }
.pds-lingo.is-rtl .pds-lingo__note svg { transform: scaleX(-1); }
.pds-lingo__seo { font-size: .68rem; line-height: 1.4; color: var(--ink-faint); }
.pds-lingo__seo code { margin-right: .35rem; padding: .08rem .35rem; border-radius: 6px; font: 600 .64rem/1.3 var(--font-mono, ui-monospace, monospace);
  color: var(--ink-muted); background: var(--surface); border: 1px solid var(--border); }
.pds-lingo__seo b { color: var(--primary-deep); }
@container (max-width: 380px) {
  .pds-lingo__page { height: 262px; padding: .7rem .8rem .8rem; }
  .pds-lingo__body { gap: .5rem; align-items: start; }
  .pds-lingo__art { width: 34px; height: 46px; }
  .pds-lingo__art i:nth-child(1) { width: 30px; height: 30px; }
  .pds-lingo__art i:nth-child(2) { width: 20px; height: 20px; border-radius: 6px; }
  .pds-lingo__art i:nth-child(3) { display: none; }
  .pds-lingo__h { font-size: 1.04rem; }
  .pds-lingo__p { font-size: .74rem; }
  .pds-lingo__page[lang="fa"] .pds-lingo__p { font-size: .78rem; line-height: 1.7; }
  .pds-lingo__lang { padding: .36rem .5rem; font-size: .72rem; }
}
@keyframes pds-lingo-pop { from { opacity: 0; transform: translateY(5px); } }

/* ---------- PDS-92 Block Builder ---------- */
.pds-build, .pds-build * { box-sizing: border-box; }
.pds-build { --pds-build-ease: cubic-bezier(.22, 1, .36, 1); container-type: inline-size;
  display: grid; gap: .6rem; width: min(100%, 440px); margin: 0 auto; padding: .75rem; color: var(--ink); text-align: start;
  border: 1px solid var(--border); border-radius: 22px; background: var(--surface);
  box-shadow: 0 30px 60px -42px color-mix(in srgb, var(--ink) 65%, transparent); }
.pds-build :where(button) { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pds-build :where(button):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pds-build :where(p, ol) { margin: 0; }
.pds-build svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* toolbar: section library, undo, brand rules */
.pds-build__bar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pds-build__add { position: relative; }
.pds-build__addbtn { display: inline-flex; align-items: center; gap: .35rem; padding: .48rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: var(--bg); background: linear-gradient(135deg, var(--primary), var(--primary-deep)); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--primary) 80%, transparent); }
.pds-build__addbtn svg { transition: transform .4s var(--pds-build-ease); }
.pds-build__addbtn[aria-expanded="true"] svg { transform: rotate(45deg); }
.pds-build__undo { display: inline-flex; align-items: center; gap: .3rem; padding: .44rem .75rem; border-radius: 999px; font-size: .76rem; font-weight: 600;
  border: 1px solid var(--border-strong); background: var(--surface); transition: opacity .25s, background .25s; }
.pds-build__undo:not(:disabled):hover { background: var(--surface-sunk); }
.pds-build__undo:disabled { opacity: .45; cursor: default; }
.pds-build__rules { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; font-size: .7rem; font-weight: 600; color: var(--accent-deep); }
.pds-build__menu { position: absolute; top: calc(100% + 6px); left: 0; width: 200px; padding: .35rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 24px 40px -20px color-mix(in srgb, var(--ink) 55%, transparent); animation: pds-build-pop .3s var(--pds-build-ease); }
.pds-build__menu[hidden] { display: none; }
.pds-build__mhead { margin: .25rem .45rem .3rem; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.pds-build__opt { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .42rem .45rem; border-radius: 9px; text-align: start; font-size: .8rem; font-weight: 600; transition: background .2s; }
.pds-build__opt:hover, .pds-build__opt:focus-visible { background: var(--surface-sunk); }
.pds-build__opt:focus-visible { outline-offset: -2px; }
.pds-build__opt i { flex: none; width: 28px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--primary-tint), color-mix(in srgb, var(--accent) 45%, var(--surface))); }
.pds-build__opt small { display: block; font-size: .66rem; font-weight: 500; color: var(--ink-muted); }
.pds-build__none { padding: .3rem .45rem .45rem; font-size: .74rem; color: var(--ink-muted); }
/* the page: a live mini preview */
.pds-build__page { position: relative; display: grid; align-content: start; gap: 6px; height: 300px; padding: 8px; overflow-y: auto; list-style: none; scrollbar-width: thin;
  border-radius: 16px; background: var(--surface-sunk); border: 1px solid var(--border); }
.pds-build__block { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: grab;
  box-shadow: 0 6px 14px -12px color-mix(in srgb, var(--ink) 55%, transparent); transition: border-color .3s, opacity .3s; }
.pds-build__block:is(:hover, :focus-within) { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.pds-build__block.is-drag { opacity: .4; }
.pds-build__tools { position: absolute; top: 5px; left: 5px; right: 5px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .3rem; pointer-events: none; }
.pds-build__tag, .pds-build__btns { display: inline-flex; align-items: center; border-radius: 999px; pointer-events: auto;
  background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--border); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pds-build__tag { gap: .2rem; padding: .12rem .5rem .12rem .3rem; font-size: .64rem; font-weight: 700; white-space: nowrap; }
.pds-build__tag svg { width: 11px; height: 11px; fill: currentColor; stroke: none; color: var(--ink-faint); }
.pds-build__btns { padding: 1px; }
.pds-build__btns button { display: grid; place-items: center; width: 28px; height: 24px; border-radius: 999px; color: var(--ink-muted); transition: background .2s, color .2s; }
.pds-build__btns button:not(:disabled):hover { color: var(--ink); background: var(--surface-sunk); }
.pds-build__btns [data-act="remove"]:not(:disabled):hover { color: var(--bg); background: var(--ink); }
.pds-build__btns button:disabled { opacity: .3; cursor: default; }
.pds-build__btns button:focus-visible { outline-offset: 0; }
.pds-build__btns svg { width: 13px; height: 13px; }
.pds-build__mini { display: flex; align-items: flex-end; gap: .4rem; min-height: 62px; padding: 2rem .65rem .6rem; font-size: .68rem; line-height: 1.3; }
.pds-build__mini :where(i, em) { font-style: normal; }
.pds-build__hero { min-height: 86px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .35rem; color: var(--bg);
  background: radial-gradient(70% 130% at 100% 0%, color-mix(in srgb, var(--gold) 60%, transparent), transparent 65%), linear-gradient(135deg, var(--primary), var(--primary-deep)); }
.pds-build__hero b { font-family: var(--font-display, Georgia, serif); font-size: .98rem; font-weight: 600; line-height: 1.15; }
.pds-build :is(.pds-build__hero, .pds-build__cta, .pds-build__contact) i { padding: .22rem .6rem; border-radius: 999px; font-size: .6rem; font-weight: 700; }
.pds-build__hero i { color: var(--primary-deep); background: var(--bg); }
.pds-build__cards span { flex: 1; display: grid; gap: .3rem; min-width: 0; padding: .4rem; border-radius: 8px; font-weight: 600; background: var(--surface-sunk); }
.pds-build__cards i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-build__cards span:nth-child(2) i { background: linear-gradient(135deg, var(--gold), var(--primary)); }
.pds-build__quote { flex-direction: column; align-items: flex-start; gap: .2rem; background: color-mix(in srgb, var(--primary-tint) 60%, var(--surface)); }
.pds-build__quote b { font-family: var(--font-display, Georgia, serif); font-size: .84rem; font-weight: 500; font-style: italic; }
.pds-build__quote small { display: flex; align-items: center; gap: .35rem; font-size: .62rem; color: var(--ink-muted); }
.pds-build__quote em { padding: .05rem .35rem; border-radius: 999px; font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-deep); background: var(--surface); border: 1px solid var(--border); }
.pds-build__cta { align-items: center; justify-content: space-between; padding-top: 2.1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), color-mix(in srgb, var(--gold) 16%, var(--surface))); }
.pds-build__cta b { font-family: var(--font-display, Georgia, serif); font-size: .86rem; font-weight: 600; }
.pds-build :is(.pds-build__cta, .pds-build__contact) i { color: var(--bg); background: var(--primary); }
.pds-build__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.pds-build__gallery i { height: 34px; border-radius: 7px; background: linear-gradient(135deg, var(--primary-tint), color-mix(in srgb, var(--accent) 50%, var(--surface))); }
.pds-build__gallery i:nth-child(2) { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 55%, var(--surface)), var(--primary-tint)); }
.pds-build__gallery i:nth-child(3) { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.pds-build__gallery i:nth-child(4) { background: linear-gradient(135deg, var(--primary-deep), color-mix(in srgb, var(--primary) 40%, var(--ink))); }
.pds-build__faq { flex-direction: column; align-items: stretch; gap: .25rem; }
.pds-build__faq span { display: flex; justify-content: space-between; gap: .4rem; padding: .25rem .45rem; border-radius: 6px; font-weight: 600; background: var(--surface-sunk); }
.pds-build__faq span::after { content: "+"; font-weight: 700; color: var(--primary); }
.pds-build__contact { align-items: center; }
.pds-build__contact span { flex: 1; min-width: 0; padding: .3rem .45rem; border-radius: 6px; color: var(--ink-faint); background: var(--bg); border: 1px solid var(--border-strong); }
.pds-build__status { min-height: 1.3em; font-size: .72rem; line-height: 1.3; text-align: center; color: var(--ink-muted); }
@container (max-width: 330px) {
  .pds-build__page { height: 278px; }
  .pds-build__rules { margin-left: 0; }
}
@keyframes pds-build-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }