/* Wedding Shoots marketing product demos
   --------------------------------------
   Small, self-contained product stories built from native HTML/SVG/CSS.
   The authenticated app is intentionally not imported into this surface. */

.feature-demos {
  --fd-ease: cubic-bezier(.45, 0, .2, 1);
  --fd-ease-out: cubic-bezier(.16, .84, .44, 1);
  --fd-duration: 8s;
  padding: clamp(4.75rem, 8vw, 7rem) 0;
  background:
    radial-gradient(60% 18% at 12% 10%, rgba(92, 122, 107, .1), transparent 72%),
    radial-gradient(54% 18% at 88% 48%, rgba(196, 168, 130, .13), transparent 72%),
    var(--color-surface);
  overflow: hidden;
}

.fd-section-head { max-width: 720px; }
.fd-section-head h2 {
  margin: .65rem 0 .8rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
}
.fd-section-head p {
  max-width: 650px;
  color: var(--color-text-muted);
  font-size: clamp(.97rem, 1.4vw, 1.08rem);
  line-height: 1.75;
}

.fd-list { display: grid; gap: clamp(4rem, 8vw, 7rem); margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.feature-demo {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(430px, 1.35fr);
  align-items: center;
  gap: clamp(2.2rem, 6vw, 5.5rem);
  min-width: 0;
}
.feature-demo:nth-child(even) { grid-template-columns: minmax(430px, 1.35fr) minmax(230px, .75fr); }
.feature-demo:nth-child(even) .fd-copy { order: 2; }
.feature-demo:nth-child(even) .fd-stage { order: 1; }

/* Detail pages reuse only the matching stage in the old video slot. */
.feature-demos-inline {
  padding: 0;
  overflow: visible;
  background: transparent;
}
.feature-demos-inline .feature-demo.is-compact {
  display: block;
  width: min(100%, 980px);
  margin: 1.75rem auto 0;
}
.feature-demos-inline .feature-demo.is-compact .fd-stage { max-width: none; }

.fd-copy { position: relative; z-index: 2; }
.fd-index {
  display: block;
  margin-bottom: .75rem;
  font-family: var(--font-display);
  color: var(--color-accent);
  font-size: 1.05rem;
  letter-spacing: .12em;
}
.fd-kicker {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  color: var(--color-brand);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.fd-copy h3 {
  margin: .8rem 0 .85rem;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  line-height: 1.16;
  font-weight: 300;
  letter-spacing: -.01em;
}
.fd-copy p { color: var(--color-text-muted); font-size: .96rem; line-height: 1.75; }

.fd-stage {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 10.2;
  overflow: hidden;
  border: 1px solid rgba(92, 122, 107, .16);
  border-radius: clamp(20px, 3vw, 30px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(245,239,230,.72)),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(92,122,107,.035) 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(92,122,107,.035) 48px),
    var(--color-bg);
  box-shadow: 0 1px 2px rgba(40,38,34,.07), 0 28px 65px -35px rgba(40,38,34,.38);
}
.fd-stage::before {
  content: '';
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  right: -18%;
  top: -42%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(92,122,107,.08);
  filter: blur(2px);
}
.fd-stage::after {
  content: '';
  position: absolute;
  width: 38%;
  aspect-ratio: 1;
  left: -14%;
  bottom: -40%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(196,168,130,.12);
}

.fd-control {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--color-brand-dark);
  border: 1px solid rgba(92,122,107,.17);
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  box-shadow: 0 4px 14px -8px rgba(40,38,34,.45);
  backdrop-filter: blur(9px);
  cursor: pointer;
  opacity: .72;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.fd-control:hover, .fd-control:focus-visible { opacity: 1; transform: translateY(-1px); }
.fd-control:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.fd-control-play { display: none; margin-left: 1px; }
.feature-demo.is-paused .fd-control-play { display: inline-flex; }
.feature-demo.is-paused .fd-control-pause { display: none; }
.feature-demo.is-paused *, .feature-demo.is-offscreen * { animation-play-state: paused !important; }

/* Shared device and browser frames */
.fd-phone {
  position: absolute;
  width: 25%;
  min-width: 92px;
  padding: 5px;
  border-radius: 22px;
  background: #202622;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 22px 36px -18px rgba(28,25,23,.55);
}
.fd-phone-top { position: absolute; inset: 5px 5px auto; height: 13px; z-index: 2; pointer-events: none; }
.fd-phone-top span { display: block; width: 34%; height: 6px; margin: 3px auto 0; border-radius: 0 0 6px 6px; background: #202622; }
.fd-phone-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 18px; background: #fff; }

.fd-browser {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(58,82,70,.16);
  border-radius: 13px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(40,38,34,.1), 0 22px 40px -22px rgba(40,38,34,.48);
}
.fd-browser-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 23px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(58,82,70,.1);
  background: #f7f4ef;
}
.fd-browser-dots { display: flex; gap: 3px; }
.fd-browser-dots i { width: 4px; height: 4px; border-radius: 50%; background: #d5cec3; }
.fd-browser-address {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #9c948b;
  font-size: 6px;
  line-height: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-photo { position: relative; display: block; overflow: hidden; background: #dce8df; }
.fd-photo svg { width: 100%; height: 100%; display: block; }
.fd-photo-sun { fill: rgba(255,255,255,.78); }
.fd-photo-back { fill: rgba(255,255,255,.38); }
.fd-photo-front { fill: rgba(53,78,65,.36); }
.fd-photo-stem { fill: none; stroke: rgba(255,255,255,.48); stroke-width: 2; stroke-linecap: round; }
.fd-photo-sage { background: linear-gradient(145deg,#bacbbc,#66816f); }
.fd-photo-gold { background: linear-gradient(145deg,#ead8b8,#aa805c); }
.fd-photo-rose { background: linear-gradient(145deg,#e9c9c5,#a96f6d); }
.fd-photo-blue { background: linear-gradient(145deg,#c7d9dc,#587884); }
.fd-photo-lilac { background: linear-gradient(145deg,#dcd2df,#88798e); }
.fd-photo-dark { background: linear-gradient(145deg,#8e9a91,#35453d); }
.fd-photo-mint { background: linear-gradient(145deg,#dcebdc,#7da183); }
.fd-photo-sunset { background: linear-gradient(145deg,#f0d3ad,#b57263); }

.fd-cursor { position: absolute; z-index: 15; color: #2d4438; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.fd-cursor-ring { position: absolute; width: 18px; height: 18px; left: -5px; top: -5px; border: 1.5px solid rgba(92,122,107,.48); border-radius: 50%; opacity: 0; }
.fd-tap { position: absolute; z-index: 14; width: 26px; height: 26px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 0 0 1px rgba(92,122,107,.35); }

/* 01 · Guest upload */
.fd-upload-qr { position: absolute; left: 9%; top: 16%; width: 31%; }
.fd-qr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8% 8% 9%;
  overflow: hidden;
  border: 1px solid rgba(92,122,107,.13);
  border-radius: 15px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 1px 2px rgba(40,38,34,.07), 0 16px 30px -18px rgba(40,38,34,.4);
}
.fd-qr-mark {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-bottom: 5px;
  color: white;
  border-radius: 50%;
  background: var(--color-brand);
  font-family: var(--font-display);
  font-size: 7px;
}
.fd-qr { width: 47%; color: #253b30; }
.fd-qr-card strong { margin-top: 5px; color: #354a3f; font-family: var(--font-display); font-size: clamp(8px, 1.45cqw, 12px); font-weight: 500; }
.fd-qr-card small { color: #918980; font-size: clamp(5px, .85cqw, 7px); }
.fd-scan-line { position: absolute; left: 23%; right: 23%; top: 31%; height: 1px; background: #79a58e; box-shadow: 0 0 5px rgba(92,122,107,.7); }
.fd-qr-beam { position: absolute; left: 43%; top: 46%; display: inline-flex; color: var(--color-accent); }
.fd-upload-phone { right: 17%; top: 7%; height: 86%; width: 29%; transform: rotate(1.5deg); }
.fd-event-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 38%;
  color: #fff;
  background: linear-gradient(145deg, rgba(51,73,61,.48), rgba(51,73,61,.2)), linear-gradient(135deg,#8ca392,#c8b18f);
}
.fd-cover-leaf { margin-bottom: 2px; opacity: .85; }
.fd-event-cover strong { font-family: var(--font-display); font-size: clamp(10px, 1.75cqw, 14px); font-weight: 400; }
.fd-event-cover em { color: #f0dec1; font-weight: 300; }
.fd-event-cover small { margin-top: 1px; font-size: clamp(5px, .72cqw, 6px); letter-spacing: .12em; opacity: .78; }
.fd-phone-body { position: relative; height: 62%; padding: 9% 8%; text-align: center; }
.fd-welcome { display: block; overflow: hidden; color: #6e675f; font-size: clamp(5px, .8cqw, 7px); white-space: nowrap; }
.fd-mini-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 86%;
  margin-top: 6%;
  padding: 5% 4%;
  color: #fff;
  border: 0;
  border-radius: 6px;
  background: var(--color-brand);
  font: 600 clamp(5px, .88cqw, 7px) var(--font-body);
}
.fd-upload-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 7%; }
.fd-upload-grid .fd-photo { aspect-ratio: 1; border-radius: 3px; }
.fd-upload-progress { position: absolute; left: 8%; right: 8%; bottom: 8%; height: 4px; overflow: visible; border-radius: 99px; background: #ece8e2; }
.fd-upload-progress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--color-brand),#87a491); }
.fd-upload-progress span { position: absolute; top: -10px; left: 0; color: #948b82; font-size: 5px; }
.fd-success {
  position: absolute;
  inset: auto 7% 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  color: #315542;
  border: 1px solid rgba(73,125,94,.2);
  border-radius: 7px;
  background: #edf7f0;
  font-size: clamp(5px, .82cqw, 7px);
}
.fd-success > span { display: grid; place-items: center; width: 15px; height: 15px; color: #fff; border-radius: 50%; background: #5f8c70; }
.fd-upload-cursor { left: 62%; top: 50%; }
.fd-upload-tap { left: 64%; top: 49%; }

/* 02 · Live feed */
.fd-live-phone { left: 7%; top: 23%; width: 20%; height: 59%; transform: rotate(-2deg); }
.fd-live-phone-screen { padding: 20% 8% 10%; text-align: center; }
.fd-live-phone-title { display: block; margin-bottom: 6%; color: #6f685f; font-size: clamp(5px,.83cqw,7px); }
.fd-live-phone-screen .fd-photo { width: 100%; aspect-ratio: 4/5; border-radius: 6px; }
.fd-live-sent { display: inline-flex; align-items: center; gap: 2px; margin-top: 8%; color: #4d725f; font-size: clamp(5px,.75cqw,6px); }
.fd-display { position: absolute; right: 6%; top: 11%; width: 58%; height: 70%; padding: 5px; border-radius: 9px; background: #26312b; box-shadow: 0 20px 36px -20px rgba(28,25,23,.6); }
.fd-display-screen { height: 100%; overflow: hidden; border-radius: 5px; background: #f6f2eb; }
.fd-display-stand { position: absolute; left: 43%; top: 100%; width: 15%; height: 17%; border-radius: 0 0 4px 4px; background: linear-gradient(90deg,#3a443f,#657069,#3a443f); }
.fd-display-stand::after { content: ''; position: absolute; left: -55%; right: -55%; bottom: 0; height: 5px; border-radius: 99px; background: #36413b; }
.fd-display-head { display: flex; align-items: center; justify-content: space-between; height: 18%; padding: 0 5%; color: #405448; border-bottom: 1px solid rgba(64,84,72,.08); background: rgba(255,255,255,.74); }
.fd-live-brand, .fd-live-state { display: flex; align-items: center; gap: 3px; font-size: clamp(5px,.72cqw,6px); }
.fd-live-brand > b { display: grid; place-items: center; width: 15px; height: 15px; color: #fff; border-radius: 50%; background: var(--color-brand); font: 600 6px var(--font-display); }
.fd-live-brand > strong { font-family: var(--font-display); font-size: clamp(7px,1.18cqw,10px); font-weight: 500; }
.fd-live-state { color: #495c51; font-weight: 700; letter-spacing: .08em; }
.fd-live-state small { color: #8a8178; font-size: .84em; font-weight: 500; letter-spacing: 0; }
.fd-display-head i { width: 4px; height: 4px; border-radius: 50%; background: #6d9b80; box-shadow: 0 0 0 3px rgba(109,155,128,.13); }
.fd-live-filters { display: flex; align-items: center; gap: 3%; height: 13%; padding: 1% 4%; }
.fd-live-filters span { padding: 1.2% 4%; color: #847b72; border: 1px solid #ded7cd; border-radius: 99px; font-size: clamp(4px,.62cqw,5px); }
.fd-live-filters .is-active { color: #fff; border-color: var(--color-brand); background: var(--color-brand); }
.fd-live-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; height: 69%; padding: 0 4% 4%; }
.fd-live-grid > .fd-photo { width: 100%; height: 100%; border-radius: 4px; }
.fd-live-grid > .fd-photo:nth-child(1), .fd-live-grid > .fd-photo:nth-child(5) { grid-row: span 1; }
.fd-live-new { position: absolute; width: 29%; height: 44%; }
.fd-live-new .fd-photo { width: 100%; height: 100%; border-radius: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.fd-live-new-one { left: 35.5%; top: 0; }
.fd-live-new-two { right: 4%; bottom: 4%; }
.fd-transfer { position: absolute; z-index: 8; left: 16%; top: 40%; width: 12%; aspect-ratio: 4/5; padding: 3px; border-radius: 7px; background: #fff; box-shadow: 0 12px 24px -12px rgba(28,25,23,.5); }
.fd-transfer .fd-photo { width: 100%; height: 100%; border-radius: 4px; }
.fd-transfer-two { top: 48%; }
.fd-live-pulse { position: absolute; z-index: 7; left: 23%; top: 47%; width: 12px; height: 12px; border: 1px solid var(--color-brand); border-radius: 50%; }

/* 03 · Coordinated wedding suite */
.fd-suite .fd-copy h3 em { color: var(--color-brand); font-weight: inherit; }
.fd-suite-browser { inset: 7% 5%; }
.fd-suite-ui { height: calc(100% - 23px); overflow: hidden; color: #4e554f; background: #f9f7f3; }
.fd-suite-toolbar { display: flex; align-items: center; justify-content: space-between; height: 17%; padding: 0 4%; border-bottom: 1px solid #e7e1d8; background: rgba(255,255,255,.92); }
.fd-suite-toolbar > span:first-child { display: flex; flex-direction: column; }
.fd-suite-toolbar small { color: #918a82; font-size: clamp(4px,.62cqw,5px); }
.fd-suite-toolbar strong { color: #405348; font-family: var(--font-display); font-size: clamp(9px,1.4cqw,12px); font-weight: 500; }
.fd-suite-save { display: inline-flex; align-items: center; gap: 3px; padding: 5px 8px; color: #fff; border-radius: 5px; background: var(--color-brand); font: 600 clamp(5px,.7cqw,6px) var(--font-body); }
.fd-suite-tabs { position: relative; display: grid; grid-template-columns: repeat(6,1fr); height: 16%; padding: 0 2%; border-bottom: 1px solid #e8e1d8; background: #fff; }
.fd-suite-tabs > span { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: #8c857c; font-size: clamp(4px,.64cqw,5px); }
.fd-suite-tabs > span::after { content: ''; position: absolute; right: 16%; bottom: 0; left: 16%; height: 2px; border-radius: 99px 99px 0 0; background: var(--color-brand); opacity: 0; transform: scaleX(.35); }
.fd-suite-tabs > span.is-active { color: #466252; }
.fd-suite-tabs > span.is-active::after { opacity: 1; transform: scaleX(1); }
.fd-suite-tabs b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fd-suite-workspace { display: grid; grid-template-columns: 27% 1fr; height: 67%; }
.fd-suite-controls { display: flex; flex-direction: column; gap: 4%; padding: 7% 8%; border-right: 1px solid #e7e1d8; background: #fff; }
.fd-suite-control-title { display: flex; align-items: center; gap: 4px; color: #53695c; font-size: clamp(5px,.76cqw,6px); font-weight: 700; }
.fd-suite-theme { display: flex; align-items: center; gap: 7%; padding: 4% 6%; color: #68625b; border: 1px solid transparent; border-radius: 5px; font-size: clamp(4px,.66cqw,5px); }
.fd-suite-theme i { width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(54,58,54,.16); }
.fd-suite-theme b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; }
.fd-suite-theme.is-ivory i { background: #d8c6ae; }
.fd-suite-theme.is-sage i { background: #6f8977; }
.fd-suite-theme.is-gold i { background: #b78c55; }
.fd-suite-theme.is-sage { color: #405f4e; border-color: rgba(92,122,107,.22); background: #edf3ee; }
.fd-suite-controls > small { margin-top: 2%; color: #8f877f; font-size: clamp(4px,.6cqw,5px); line-height: 1.2; }
.fd-suite-field { display: block; padding: 5% 7%; color: #57524c; border: 1px solid #e3ddd5; border-radius: 4px; background: #fdfcfb; font-size: clamp(4px,.66cqw,5px); }
.fd-suite-field i { font-style: normal; }
.fd-suite-preview { position: relative; min-width: 0; padding: 3% 4%; overflow: hidden; background: radial-gradient(circle at 72% 36%,rgba(136,161,144,.13),transparent 36%),#f5f2ed; }
.fd-suite-preview > small { position: absolute; z-index: 3; color: #918980; font-size: clamp(4px,.62cqw,5px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fd-suite-canvas { position: relative; width: 100%; height: 100%; }
.fd-suite-invitation { position: absolute; z-index: 3; left: 25%; top: 4%; display: flex; width: 34%; height: 88%; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #466151; border: 3px solid #fff; border-radius: 4px; background: linear-gradient(150deg,#f8f3e9,#e2ebdf); box-shadow: 0 1px 2px rgba(40,38,34,.1),0 13px 28px -17px rgba(40,38,34,.5); }
.fd-suite-invitation::before { content: ''; position: absolute; inset: 5%; border: 1px solid rgba(76,105,87,.2); }
.fd-suite-arc { position: absolute; width: 64%; aspect-ratio: 1; border: 1px solid rgba(87,119,98,.26); border-radius: 50%; }
.fd-suite-arc-a { left: -37%; top: -18%; }
.fd-suite-arc-b { right: -37%; bottom: -18%; }
.fd-suite-mark { position: relative; font: 600 clamp(4px,.68cqw,6px) var(--font-display); letter-spacing: .18em; }
.fd-suite-names { position: relative; width: 100%; height: clamp(13px,2.7cqw,21px); margin: 5% 0 2%; text-align: center; }
.fd-suite-names b, .fd-suite-names strong { position: absolute; inset: 0; font-family: var(--font-display); font-size: clamp(9px,2cqw,16px); font-weight: 400; line-height: 1; white-space: nowrap; }
.fd-suite-names b { opacity: 0; }
.fd-suite-names em { color: #a37a4e; font-weight: 300; }
.fd-suite-date { position: relative; font-size: clamp(4px,.62cqw,5px); letter-spacing: .14em; }
.fd-suite-output { position: absolute; z-index: 2; display: flex; width: 25%; height: 32%; flex-direction: column; align-items: center; justify-content: center; gap: 5%; color: #50665a; border: 2px solid #fff; border-radius: 4px; background: linear-gradient(150deg,#f8f4eb,#e3ebe0); box-shadow: 0 9px 20px -14px rgba(40,38,34,.48); }
.fd-suite-output::after { content: ''; position: absolute; inset: 8%; border: 1px solid rgba(76,105,87,.16); }
.fd-suite-output span { position: relative; font: 500 clamp(4px,.66cqw,5px) var(--font-display); }
.fd-suite-output svg { position: relative; }
.fd-suite-output-menu { right: 12%; top: 5%; transform: rotate(3deg); }
.fd-suite-output-tableau { right: 2%; top: 34%; transform: rotate(5deg); }
.fd-suite-output-qr { right: 14%; bottom: 1%; transform: rotate(-2deg); }
.fd-suite-output-site { left: 3%; bottom: 4%; transform: rotate(-5deg); }
.fd-suite-cursor { left: 23%; top: 47%; }
.fd-suite-ready { position: absolute; z-index: 16; right: 7%; top: 12%; display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; color: #365a46; border: 1px solid rgba(72,124,92,.17); border-radius: 99px; background: rgba(241,250,244,.97); box-shadow: 0 10px 22px -14px rgba(28,25,23,.45); font-size: clamp(5px,.76cqw,7px); font-weight: 600; }

/* 04 · Personal website */
.fd-site-browser { inset: 9% 10% 10% 8%; }
.fd-site-page { position: relative; height: calc(100% - 23px); overflow: hidden; background: #fdf8f3; color: #4b392e; }
.fd-site-cover { position: relative; height: 61%; overflow: hidden; color: white; background: linear-gradient(160deg,rgba(46,59,49,.58),rgba(113,93,67,.22)),linear-gradient(135deg,#bba88b,#607867); }
.fd-site-cover::before, .fd-site-cover::after { content: ''; position: absolute; width: 45%; height: 140%; top: -18%; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.fd-site-cover::before { left: -29%; transform: rotate(-18deg); }
.fd-site-cover::after { right: -30%; transform: rotate(16deg); }
.fd-site-rail { position: absolute; z-index: 2; top: 10%; left: 5%; display: flex; align-items: center; gap: 6px; }
.fd-site-rail i { width: 20px; height: 1px; background: rgba(255,255,255,.72); }
.fd-site-rail span { font-size: clamp(4px,.64cqw,5px); letter-spacing: .28em; text-transform: uppercase; opacity: .86; }
.fd-site-card { position: absolute; z-index: 2; right: 5%; bottom: 8%; width: 43%; padding: 3.5% 5%; text-align: center; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; background: rgba(25,30,27,.38); box-shadow: 0 14px 30px -18px rgba(0,0,0,.62); backdrop-filter: blur(7px); }
.fd-site-card > small { display: block; color: #ead7b7; font-size: clamp(4px,.62cqw,5px); letter-spacing: .22em; text-transform: uppercase; }
.fd-site-monogram { display: block; margin: 2% 0; color: rgba(255,255,255,.74); font: 500 clamp(5px,.78cqw,6px) var(--font-display); letter-spacing: .22em; }
.fd-site-names { position: relative; width: 100%; height: clamp(16px,3.2cqw,25px); text-align: center; }
.fd-site-names strong { position: absolute; inset: 0; font-family: var(--font-display); font-size: clamp(12px,2.7cqw,21px); font-weight: 300; line-height: 1; }
.fd-site-names em { color: #f1dcb8; font-weight: 300; }
.fd-site-name-one { opacity: 0; }
.fd-site-date { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: clamp(4px,.68cqw,5px); letter-spacing: .12em; text-transform: uppercase; }
.fd-site-date i { width: 12px; height: 1px; background: rgba(255,255,255,.48); }
.fd-site-nav { display: flex; align-items: center; justify-content: center; gap: 5%; height: 15%; border-bottom: 1px solid rgba(89,69,52,.1); background: rgba(255,255,255,.76); color: #786454; font-size: clamp(4px,.72cqw,6px); text-transform: uppercase; }
.fd-site-nav b { color: #9a7b50; margin-right: 2px; font-size: .82em; }
.fd-site-sections { display: grid; grid-template-columns: repeat(3,1fr); gap: 3%; height: 24%; padding: 3% 7%; }
.fd-site-sections div { display: flex; align-items: center; gap: 5%; padding: 3% 6%; border: 1px solid rgba(139,111,71,.12); border-radius: 5px; background: rgba(255,255,255,.74); color: #796653; }
.fd-site-sections span { display: grid; place-items: center; color: #8b6f47; }
.fd-site-sections strong { font: 600 clamp(5px,.76cqw,6px) var(--font-body); }
.fd-theme-panel { position: absolute; right: 3%; bottom: 7%; z-index: 8; width: 24%; padding: 2.5%; border: 1px solid rgba(58,82,70,.14); border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 12px 30px -18px rgba(28,25,23,.48); backdrop-filter: blur(10px); }
.fd-theme-panel > small { display: block; margin-bottom: 5%; color: #817971; font-size: clamp(5px,.76cqw,6px); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.fd-theme-panel > span { display: flex; align-items: center; gap: 7%; width: 100%; margin: 2px 0; padding: 5%; color: #625c55; border: 1px solid transparent; border-radius: 5px; background: transparent; font: 500 clamp(5px,.78cqw,6px) var(--font-body); }
.fd-theme-panel b { font-weight: 500; }
.fd-theme-panel i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
.fd-theme-panel .is-ivory i { background: #dfc9ab; }
.fd-theme-panel .is-sage i { background: #6e8b6a; }
.fd-theme-panel .is-midnight i { background: #243047; }
.fd-theme-panel .is-sage { border-color: rgba(92,122,107,.3); background: #edf3ee; }
.fd-site-cursor { right: 14%; bottom: 22%; }

/* 05 · Photographer delivery */
.fd-delivery-browser { inset: 9% 7% 9% 7%; }
.fd-delivery-ui { display: grid; grid-template-columns: 22% 1fr; height: calc(100% - 23px); background: #faf8f4; }
.fd-delivery-ui aside { display: flex; flex-direction: column; gap: 4%; padding: 9% 8%; color: #837b72; border-right: 1px solid #e8e1d7; background: #fff; }
.fd-delivery-ui aside > strong { display: grid; place-items: center; width: 23px; height: 23px; margin-bottom: 9%; color: #fff; border-radius: 50%; background: var(--color-brand); font-family: var(--font-display); font-size: 8px; }
.fd-delivery-ui aside > span { display: flex; align-items: center; gap: 5%; padding: 6% 5%; border-radius: 4px; font-size: clamp(5px,.78cqw,6px); }
.fd-delivery-ui aside > span.is-active { color: var(--color-brand-dark); background: var(--color-brand-light); font-weight: 600; }
.fd-delivery-ui main { min-width: 0; padding: 4% 5%; }
.fd-delivery-head { display: flex; align-items: center; justify-content: space-between; }
.fd-delivery-head > span { display: flex; flex-direction: column; }
.fd-delivery-head small { display: flex; align-items: center; gap: 4px; color: #8d857c; font-size: clamp(5px,.7cqw,6px); }
.fd-delivery-head small b { padding: 1px 4px; color: #796d5e; border: 1px solid #ddd3c6; border-radius: 99px; background: #f4efe8; font-size: .82em; font-weight: 600; }
.fd-delivery-head strong { color: #3c5146; font-family: var(--font-display); font-size: clamp(10px,1.6cqw,13px); font-weight: 500; }
.fd-delivery-action { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; color: #fff; border-radius: 5px; background: var(--color-brand); font: 600 clamp(5px,.7cqw,6px) var(--font-body); }
.fd-album-card { position: relative; margin-top: 4%; padding: 3%; border: 1px solid #e6ded4; border-radius: 8px; background: #fff; }
.fd-album-title { display: flex; justify-content: space-between; align-items: center; color: #4f6157; }
.fd-album-title > span { display: flex; align-items: center; gap: 4px; }
.fd-album-title strong { font-size: clamp(6px,.9cqw,8px); }
.fd-album-title small { color: #968e85; font-size: clamp(5px,.7cqw,6px); }
.fd-album-count { position: relative; min-width: 30px; height: 1em; }
.fd-album-count i, .fd-album-count b { position: absolute; inset: 0 0 auto auto; font-style: normal; font-weight: 500; white-space: nowrap; }
.fd-album-count b { opacity: 0; }
.fd-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 63%; margin-top: 3%; color: #809087; border: 1px dashed #b8c7bd; border-radius: 6px; background: #f7faf8; }
.fd-dropzone span { display: inline-flex; margin-bottom: 2%; color: var(--color-brand); }
.fd-dropzone strong { font-size: clamp(5px,.78cqw,7px); }
.fd-delivery-photos { position: absolute; inset: 24% 3% 8%; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
.fd-delivery-photos .fd-photo { height: 100%; border-radius: 4px; }
.fd-delivery-progress { position: absolute; left: 5%; right: 5%; bottom: 8%; height: 4px; border-radius: 99px; background: #e8e4de; }
.fd-delivery-progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--color-brand); }
.fd-delivery-progress span { position: absolute; right: 0; top: -10px; color: #817970; font-size: 5px; }
.fd-file-stack { position: absolute; z-index: 8; left: 5%; top: 29%; width: 12%; aspect-ratio: 1; }
.fd-file-stack .fd-photo { position: absolute; inset: 0; border: 3px solid #fff; border-radius: 5px; box-shadow: 0 8px 18px -10px rgba(28,25,23,.5); }
.fd-file-stack .fd-photo:nth-child(1) { transform: rotate(-9deg) translate(-6px,3px); }
.fd-file-stack .fd-photo:nth-child(2) { transform: rotate(7deg) translate(5px,-3px); }
.fd-delivery-cursor { left: 75%; top: 15%; }
.fd-published { position: absolute; z-index: 12; right: 8%; top: 13%; display: flex; align-items: center; gap: 7px; padding: 7px 10px; color: #365a46; border: 1px solid rgba(72,124,92,.18); border-radius: 8px; background: rgba(241,250,244,.96); box-shadow: 0 12px 24px -14px rgba(28,25,23,.48); }
.fd-published > span { display: grid; place-items: center; width: 22px; height: 22px; color: #fff; border-radius: 50%; background: #60906f; }
.fd-published > div { display: flex; flex-direction: column; }
.fd-published strong { font-size: clamp(6px,.9cqw,8px); }
.fd-published small { color: #718278; font-size: clamp(5px,.68cqw,6px); }

/* 06 · B2B multi-event */
.fd-b2b-browser { inset: 8% 6%; }
.fd-b2b-ui { position: relative; height: calc(100% - 23px); padding: 4% 5%; overflow: hidden; background: #f8f6f2; }
.fd-b2b-head { display: flex; align-items: center; justify-content: space-between; }
.fd-b2b-head > span { display: flex; flex-direction: column; }
.fd-b2b-head small { color: #8c847b; font-size: clamp(5px,.72cqw,6px); }
.fd-b2b-head strong { color: #3f5549; font-family: var(--font-display); font-size: clamp(11px,1.75cqw,14px); font-weight: 500; }
.fd-b2b-action { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; color: #fff; border-radius: 5px; background: var(--color-brand); font: 600 clamp(5px,.72cqw,6px) var(--font-body); }
.fd-event-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3%; margin-top: 4%; }
.fd-event-card { min-width: 0; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px rgba(40,38,34,.06), 0 8px 18px -13px rgba(40,38,34,.42); }
.fd-event-card > .fd-photo { width: 100%; aspect-ratio: 16/8; }
.fd-event-card > span { display: flex; flex-direction: column; gap: 2px; padding: 7% 7% 9%; }
.fd-event-card strong { overflow: hidden; color: #405348; font-family: var(--font-display); font-size: clamp(6px,.92cqw,8px); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fd-event-card small { color: #918980; font-size: clamp(4px,.62cqw,5px); }
.fd-event-card small b { margin-right: 3px; padding: 1px 3px; color: #52705e; border-radius: 99px; background: #e8f1ea; font-size: .84em; font-weight: 700; }
.fd-event-card.fd-event-c small b, .fd-event-card.fd-event-new small b { color: #7b6b55; background: #f4ecdf; }
.fd-event-new { box-shadow: 0 0 0 1px rgba(92,122,107,.26), 0 12px 22px -15px rgba(58,82,70,.55); }
.fd-event-form { position: absolute; z-index: 8; left: 31%; right: 31%; top: 12%; padding: 3%; border: 1px solid #ddd6cc; border-radius: 9px; background: rgba(255,255,255,.97); box-shadow: 0 20px 44px -18px rgba(28,25,23,.5); }
.fd-form-head { display: flex; justify-content: space-between; align-items: center; color: #42564b; }
.fd-form-head strong { font-family: var(--font-display); font-size: clamp(8px,1.2cqw,10px); font-weight: 500; }
.fd-event-form label { display: block; margin-top: 5%; color: #847d75; font-size: clamp(4px,.62cqw,5px); }
.fd-event-form label span { display: block; margin-top: 2%; padding: 5%; color: #4b4843; border: 1px solid #e6dfd5; border-radius: 4px; background: #fff; font-size: clamp(5px,.72cqw,6px); }
.fd-form-action { display: block; width: 100%; margin-top: 6%; padding: 5%; color: #fff; border-radius: 4px; background: var(--color-brand); font: 600 clamp(5px,.72cqw,6px) var(--font-body); text-align: center; }
.fd-b2b-cursor { right: 12%; top: 16%; }
.fd-b2b-success { position: absolute; z-index: 12; right: 8%; bottom: 10%; display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; color: #365a46; border: 1px solid rgba(72,124,92,.17); border-radius: 99px; background: rgba(241,250,244,.96); box-shadow: 0 10px 22px -14px rgba(28,25,23,.45); font-size: clamp(5px,.76cqw,7px); font-weight: 600; }

/* Motion is opt-in after the tiny controller has initialised. This leaves a
   complete static explanation when JavaScript is unavailable. */
.is-enhanced.is-playing .fd-scan-line { animation: fdScan var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-upload-qr { animation: fdQrStory var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-qr-beam { animation: fdQrBeam var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-upload-phone { animation: fdPhoneStory var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-upload-cursor { animation: fdUploadCursor var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-upload-cursor .fd-cursor-ring { animation: fdCursorRing var(--fd-duration) ease-out infinite both; }
.is-enhanced.is-playing .fd-upload-tap { animation: fdTap var(--fd-duration) ease-out infinite both; }
.is-enhanced.is-playing .fd-upload-grid .fd-photo { animation: fdThumbIn var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-upload-grid .fd-photo:nth-child(2) { animation-delay: .12s; }
.is-enhanced.is-playing .fd-upload-grid .fd-photo:nth-child(3) { animation-delay: .24s; }
.is-enhanced.is-playing .fd-upload-grid .fd-photo:nth-child(4) { animation-delay: .36s; }
.is-enhanced.is-playing .fd-upload-progress { animation: fdProgressShow var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-upload-progress i { animation: fdProgressFill var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-success { animation: fdSuccess var(--fd-duration) var(--fd-ease-out) infinite both; }

@keyframes fdScan { 0%,4%{transform:translateY(-14px);opacity:0} 8%{opacity:1} 19%{transform:translateY(46px);opacity:1} 23%,100%{transform:translateY(46px);opacity:0} }
@keyframes fdQrStory { 0%{opacity:0;transform:translateX(-8px) scale(.97)} 5%,20%{opacity:1;transform:none} 28%,92%{opacity:.18;transform:translateX(-5px) scale(.96)} 100%{opacity:0;transform:translateX(-8px) scale(.97)} }
@keyframes fdQrBeam { 0%,15%{opacity:0;transform:translateX(-8px)} 20%,24%{opacity:1;transform:translateX(5px)} 30%,100%{opacity:0;transform:translateX(12px)} }
@keyframes fdPhoneStory { 0%,15%{opacity:0;transform:translateX(16px) rotate(1.5deg) scale(.97)} 23%,92%{opacity:1;transform:rotate(1.5deg) scale(1)} 98%,100%{opacity:0;transform:translateX(8px) rotate(1.5deg) scale(.985)} }
@keyframes fdUploadCursor { 0%,27%{opacity:0;transform:translate(28px,24px)} 33%{opacity:1} 39%,44%{opacity:1;transform:translate(0,0)} 49%,100%{opacity:0;transform:translate(0,0)} }
@keyframes fdCursorRing { 0%,38%{opacity:0;transform:scale(.45)} 41%{opacity:.8} 47%{opacity:0;transform:scale(1.8)} 100%{opacity:0} }
@keyframes fdTap { 0%,38%{opacity:0;transform:scale(.5)} 42%{opacity:.8} 48%{opacity:0;transform:scale(1.6)} 100%{opacity:0} }
@keyframes fdThumbIn { 0%,44%{opacity:0;transform:translateY(8px) scale(.82)} 57%,91%{opacity:1;transform:none} 98%,100%{opacity:0;transform:scale(.96)} }
@keyframes fdProgressShow { 0%,47%{opacity:0} 52%,70%{opacity:1} 75%,100%{opacity:0} }
@keyframes fdProgressFill { 0%,50%{transform:scaleX(0);transform-origin:left} 69%,100%{transform:scaleX(1);transform-origin:left} }
@keyframes fdSuccess { 0%,68%{opacity:0;transform:translateY(7px) scale(.96)} 76%,92%{opacity:1;transform:none} 98%,100%{opacity:0;transform:translateY(-2px)} }

.is-enhanced.is-playing .fd-transfer-one { animation: fdTransferOne var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-transfer-two { animation: fdTransferTwo var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-live-new-one { animation: fdLiveNewOne var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-live-new-two { animation: fdLiveNewTwo var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-live-grid > .fd-photo:nth-child(2) { animation: fdMosaicShiftA var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-live-grid > .fd-photo:nth-child(6) { animation: fdMosaicShiftB var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-live-pulse { animation: fdLivePulse var(--fd-duration) ease-out infinite both; }
@keyframes fdTransferOne { 0%,14%{opacity:0;transform:translate3d(0,8px,0) scale(.8)} 20%{opacity:1} 34%{opacity:1;transform:translate3d(290%, -35%,0) scale(.72)} 38%,100%{opacity:0;transform:translate3d(310%,-35%,0) scale(.7)} }
@keyframes fdTransferTwo { 0%,50%{opacity:0;transform:translate3d(0,8px,0) scale(.8)} 56%{opacity:1} 69%{opacity:1;transform:translate3d(405%,35%,0) scale(.72)} 73%,100%{opacity:0;transform:translate3d(420%,35%,0) scale(.7)} }
@keyframes fdLiveNewOne { 0%,32%{opacity:0;transform:scale(.82)} 39%,91%{opacity:1;transform:none} 98%,100%{opacity:0;transform:scale(.96)} }
@keyframes fdLiveNewTwo { 0%,67%{opacity:0;transform:scale(.82)} 74%,91%{opacity:1;transform:none} 98%,100%{opacity:0;transform:scale(.96)} }
@keyframes fdMosaicShiftA { 0%,34%{transform:none} 42%,68%{transform:translateY(4px)} 75%,92%{transform:translateY(-2px)} 100%{transform:none} }
@keyframes fdMosaicShiftB { 0%,68%{transform:none} 76%,92%{transform:translateX(-3px)} 100%{transform:none} }
@keyframes fdLivePulse { 0%,15%{opacity:0;transform:scale(.5)} 22%{opacity:.7} 32%{opacity:0;transform:scale(2.5)} 50%,55%{opacity:0;transform:scale(.5)} 62%{opacity:.7} 72%,100%{opacity:0;transform:scale(2.5)} }

.is-enhanced.is-playing .fd-suite-invitation,
.is-enhanced.is-playing .fd-suite-output { animation: fdSuiteTheme var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-suite-theme.is-ivory { animation: fdSuiteIvory var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-suite-theme.is-sage { animation: fdSuiteSage var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-suite-names b { animation: fdSuiteOldNames var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-suite-names strong { animation: fdSuiteNewNames var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-suite-field i { animation: fdSuiteField var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-suite-output { animation-name: fdSuiteOutput,fdSuiteTheme; animation-timing-function: var(--fd-ease-out),var(--fd-ease); }
.is-enhanced.is-playing .fd-suite-output-tableau { animation-delay: .13s,0s; }
.is-enhanced.is-playing .fd-suite-output-qr { animation-delay: .26s,0s; }
.is-enhanced.is-playing .fd-suite-output-site { animation-delay: .39s,0s; }
.is-enhanced.is-playing .fd-suite-tabs > span { animation: fdSuiteTab var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-suite-tabs > span:nth-child(2) { animation-delay: .1s; }
.is-enhanced.is-playing .fd-suite-tabs > span:nth-child(3) { animation-delay: .2s; }
.is-enhanced.is-playing .fd-suite-tabs > span:nth-child(4) { animation-delay: .3s; }
.is-enhanced.is-playing .fd-suite-tabs > span:nth-child(5) { animation-delay: .4s; }
.is-enhanced.is-playing .fd-suite-tabs > span:nth-child(6) { animation-delay: .5s; }
.is-enhanced.is-playing .fd-suite-cursor { animation: fdSuiteCursor var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-suite-cursor .fd-cursor-ring { animation: fdSuiteRing var(--fd-duration) ease-out infinite both; }
.is-enhanced.is-playing .fd-suite-save { animation: fdSuiteSave var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-suite-ready { animation: fdSuiteReady var(--fd-duration) var(--fd-ease-out) infinite both; }
@keyframes fdSuiteTheme { 0%,24%{color:#715f4d;background:linear-gradient(150deg,#fbf6ee,#eadcc9)} 34%,94%{color:#466151;background:linear-gradient(150deg,#f8f3e9,#e2ebdf)} 100%{color:#715f4d;background:linear-gradient(150deg,#fbf6ee,#eadcc9)} }
@keyframes fdSuiteIvory { 0%,21%{color:#6c5948;border-color:rgba(151,117,77,.25);background:#f6eee4} 30%,100%{color:#68625b;border-color:transparent;background:transparent} }
@keyframes fdSuiteSage { 0%,22%{color:#68625b;border-color:transparent;background:transparent} 31%,94%{color:#405f4e;border-color:rgba(92,122,107,.22);background:#edf3ee} 100%{color:#68625b;border-color:transparent;background:transparent} }
@keyframes fdSuiteOldNames { 0%,22%{opacity:1;transform:none} 31%,100%{opacity:0;transform:translateY(-3px)} }
@keyframes fdSuiteNewNames { 0%,24%{opacity:0;transform:translateY(3px)} 34%,94%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes fdSuiteField { 0%,23%{opacity:.35;filter:blur(1px)} 33%,94%{opacity:1;filter:none} 100%{opacity:.35} }
@keyframes fdSuiteOutput { 0%,40%{opacity:0;filter:blur(2px)} 54%,94%{opacity:1;filter:none} 100%{opacity:0} }
@keyframes fdSuiteTab { 0%,42%{color:#8c857c;transform:none} 51%,59%{color:#466252;transform:translateY(-1px)} 69%,100%{color:#8c857c;transform:none} }
@keyframes fdSuiteCursor { 0%,7%{opacity:0;transform:translate(0,10px)} 13%{opacity:1} 18%,24%{opacity:1;transform:none} 36%,58%{opacity:1;transform:translate(38cqw,12cqw)} 69%,77%{opacity:1;transform:translate(57cqw,-26cqw)} 83%,100%{opacity:0;transform:translate(57cqw,-26cqw)} }
@keyframes fdSuiteRing { 0%,18%{opacity:0;transform:scale(.45)} 21%{opacity:.8} 27%{opacity:0;transform:scale(1.8)} 28%,72%{opacity:0;transform:scale(.45)} 75%{opacity:.8} 81%,100%{opacity:0;transform:scale(1.8)} }
@keyframes fdSuiteSave { 0%,71%{transform:none;box-shadow:none} 76%{transform:scale(.96);box-shadow:0 0 0 3px rgba(92,122,107,.13)} 82%,100%{transform:none;box-shadow:none} }
@keyframes fdSuiteReady { 0%,79%{opacity:0;transform:translateY(6px) scale(.96)} 86%,95%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-2px)} }

.is-enhanced.is-playing .fd-site-cover { animation: fdSiteTheme var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-site-name-one { animation: fdOldName var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-site-name-two { animation: fdNewName var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-theme-panel { animation: fdThemePanel var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-theme-panel .is-ivory { animation: fdIvorySelect var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-theme-panel .is-sage { animation: fdSageSelect var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-site-sections > div { animation: fdSectionIn var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-site-sections > div:nth-child(2) { animation-delay: .13s; }
.is-enhanced.is-playing .fd-site-sections > div:nth-child(3) { animation-delay: .26s; }
.is-enhanced.is-playing .fd-site-cursor { animation: fdSiteCursor var(--fd-duration) var(--fd-ease) infinite both; }
@keyframes fdSiteTheme { 0%,26%{background:linear-gradient(160deg,rgba(68,50,38,.48),rgba(120,93,68,.2)),linear-gradient(135deg,#d4c1a6,#92785f)} 43%,92%{background:linear-gradient(160deg,rgba(46,59,49,.58),rgba(113,93,67,.22)),linear-gradient(135deg,#bba88b,#607867)} 100%{background:linear-gradient(160deg,rgba(68,50,38,.48),rgba(120,93,68,.2)),linear-gradient(135deg,#d4c1a6,#92785f)} }
@keyframes fdOldName { 0%,18%{opacity:1;transform:none} 29%,100%{opacity:0;transform:translateY(-4px)} }
@keyframes fdNewName { 0%,22%{opacity:0;transform:translateY(4px)} 33%,93%{opacity:1;transform:none} 100%{opacity:0} }
@keyframes fdThemePanel { 0%,32%{opacity:0;transform:translateX(8px)} 40%,80%{opacity:1;transform:none} 88%,100%{opacity:0;transform:translateX(5px)} }
@keyframes fdIvorySelect { 0%,47%{border-color:rgba(139,111,71,.35);background:#f8f1e8} 55%,100%{border-color:transparent;background:transparent} }
@keyframes fdSageSelect { 0%,48%{border-color:transparent;background:transparent} 57%,100%{border-color:rgba(92,122,107,.3);background:#edf3ee} }
@keyframes fdSectionIn { 0%,60%{opacity:0;transform:translateY(7px)} 72%,92%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(2px)} }
@keyframes fdSiteCursor { 0%,34%{opacity:0;transform:translate(20px,-22px)} 41%{opacity:1} 53%,58%{opacity:1;transform:none} 66%,100%{opacity:0;transform:none} }

.is-enhanced.is-playing .fd-file-stack { animation: fdFilesDrop var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-dropzone { animation: fdDropzone var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-delivery-photos .fd-photo { animation: fdDeliveryPhoto var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-delivery-photos .fd-photo:nth-child(2) { animation-delay: .1s; }
.is-enhanced.is-playing .fd-delivery-photos .fd-photo:nth-child(3) { animation-delay: .2s; }
.is-enhanced.is-playing .fd-delivery-photos .fd-photo:nth-child(4) { animation-delay: .3s; }
.is-enhanced.is-playing .fd-delivery-progress { animation: fdDeliveryProgress var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-delivery-progress i { animation: fdDeliveryFill var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-album-count i { animation: fdCountOld var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-album-count b { animation: fdCountNew var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-delivery-cursor { animation: fdDeliveryCursor var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-published { animation: fdPublished var(--fd-duration) var(--fd-ease-out) infinite both; }
@keyframes fdFilesDrop { 0%,10%{opacity:0;transform:translate(-8px,10px) rotate(-4deg) scale(.9)} 18%{opacity:1} 35%{opacity:1;transform:translate(260%,25%) rotate(2deg) scale(.82)} 41%,100%{opacity:0;transform:translate(280%,25%) scale(.78)} }
@keyframes fdDropzone { 0%,15%{border-color:#b8c7bd;background:#f7faf8} 24%,38%{border-color:#668e76;background:#edf5ef;box-shadow:inset 0 0 0 1px rgba(92,122,107,.1)} 45%,100%{border-color:transparent;background:transparent} }
@keyframes fdDeliveryPhoto { 0%,37%{opacity:0;transform:translateY(8px) scale(.88)} 52%,93%{opacity:1;transform:none} 100%{opacity:0;transform:scale(.97)} }
@keyframes fdDeliveryProgress { 0%,37%{opacity:0} 43%,61%{opacity:1} 66%,100%{opacity:0} }
@keyframes fdDeliveryFill { 0%,40%{transform:scaleX(0);transform-origin:left} 61%,100%{transform:scaleX(1);transform-origin:left} }
@keyframes fdCountOld { 0%,57%{opacity:1} 64%,100%{opacity:0} }
@keyframes fdCountNew { 0%,58%{opacity:0} 66%,94%{opacity:1} 100%{opacity:0} }
@keyframes fdDeliveryCursor { 0%,63%{opacity:0;transform:translate(20px,18px)} 69%{opacity:1} 75%,79%{opacity:1;transform:none} 84%,100%{opacity:0;transform:none} }
@keyframes fdPublished { 0%,78%{opacity:0;transform:translateY(7px) scale(.96)} 85%,94%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-2px)} }

.is-enhanced.is-playing .fd-event-form { animation: fdEventForm var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-event-new { animation: fdEventNew var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-b2b-cursor { animation: fdB2bCursor var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-b2b-success { animation: fdB2bSuccess var(--fd-duration) var(--fd-ease-out) infinite both; }
.is-enhanced.is-playing .fd-event-a { animation: fdCardNudgeA var(--fd-duration) var(--fd-ease) infinite both; }
.is-enhanced.is-playing .fd-event-b { animation: fdCardNudgeB var(--fd-duration) var(--fd-ease) infinite both; }
@keyframes fdEventForm { 0%,18%{opacity:0;transform:translateY(-8px) scale(.97)} 27%,55%{opacity:1;transform:none} 62%,100%{opacity:0;transform:translateY(-3px) scale(.98)} }
@keyframes fdEventNew { 0%,56%{opacity:0;transform:translateY(10px) scale(.92)} 68%,93%{opacity:1;transform:none} 100%{opacity:0;transform:scale(.97)} }
@keyframes fdB2bCursor { 0%,8%{opacity:0;transform:translate(24px,20px)} 15%{opacity:1} 21%,24%{opacity:1;transform:none} 31%,39%{opacity:1;transform:translate(-170%,-2%)} 48%,52%{opacity:1;transform:translate(-175%,145%)} 58%,100%{opacity:0;transform:translate(-175%,145%)} }
@keyframes fdB2bSuccess { 0%,66%{opacity:0;transform:translateY(6px)} 74%,93%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-2px)} }
@keyframes fdCardNudgeA { 0%,58%{transform:none} 68%,93%{transform:translateX(-2px)} 100%{transform:none} }
@keyframes fdCardNudgeB { 0%,58%{transform:none} 68%,93%{transform:translateX(-1px)} 100%{transform:none} }

/* Dark theme retains the illustrated app surfaces while adapting the outer
   section and chrome to the site's active colour scheme. */
[data-theme="dark"] .feature-demos {
  background:
    radial-gradient(60% 18% at 12% 10%, rgba(120,153,134,.1), transparent 72%),
    radial-gradient(54% 18% at 88% 48%, rgba(196,168,130,.09), transparent 72%),
    var(--color-surface);
}
[data-theme="dark"] .fd-stage { border-color: rgba(196,168,130,.16); background: linear-gradient(145deg,#222924,#1b211d); }
[data-theme="dark"] .fd-control { color: #e7e1d7; border-color: rgba(255,255,255,.12); background: rgba(32,40,35,.86); }

@media (max-width: 850px) {
  .feature-demo, .feature-demo:nth-child(even) { grid-template-columns: 1fr; gap: 1.5rem; }
  .feature-demo:nth-child(even) .fd-copy, .feature-demo:nth-child(even) .fd-stage { order: initial; }
  .fd-copy { max-width: 620px; }
  .fd-stage { max-width: 680px; }
}

@media (max-width: 520px) {
  /* :not(.feature-demos-inline) — the detail-page usage resets padding to 0
     (see .feature-demos-inline above) so its demo sits flush in .wp-section;
     this longhand comes later in the cascade at equal specificity and was
     silently winning back a 4rem/4rem block padding on every phone. */
  .feature-demos:not(.feature-demos-inline) { padding-block: 4rem; }
  .fd-list { gap: 4rem; }
  .fd-stage { aspect-ratio: 4 / 3.15; border-radius: 20px; }
  .fd-copy h3 { font-size: 1.7rem; }
  .fd-copy p { font-size: .91rem; }
  .fd-control { top: .55rem; right: .55rem; width: 28px; height: 28px; }
  .fd-upload-phone { right: 11%; width: 32%; }
  .fd-upload-qr { left: 6%; width: 34%; top: 21%; }
  .fd-live-phone { left: 5%; width: 23%; }
  .fd-display { right: 4%; width: 61%; }
  .fd-suite-browser { inset: 9% 3% 8%; }
  .fd-suite-workspace { grid-template-columns: 25% 1fr; }
  .fd-suite-tabs b { display: none; }
  .fd-suite-tabs > span { gap: 0; }
  .fd-suite-controls { padding-inline: 6%; }
  .fd-suite-invitation { left: 22%; width: 38%; }
  .fd-theme-panel { right: 2.5%; width: 27%; }
  .fd-site-browser { inset: 11% 8% 10% 4%; }
  .fd-delivery-browser { inset: 11% 4% 9%; }
  .fd-delivery-ui { grid-template-columns: 19% 1fr; }
  .fd-delivery-ui aside > span { justify-content: center; }
  .fd-delivery-ui aside > span svg { width: 14px; height: 14px; }
  .fd-delivery-ui aside > span { font-size: 0; }
  .fd-file-stack { left: 2%; width: 13%; }
  .fd-b2b-browser { inset: 10% 3% 8%; }
  .fd-event-form { left: 26%; right: 26%; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-demos *, .feature-demos *::before, .feature-demos *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .feature-demos .fd-control { display: none; }
  .feature-demos .fd-upload-cursor, .feature-demos .fd-upload-tap,
  .feature-demos .fd-transfer, .feature-demos .fd-live-pulse,
  .feature-demos .fd-suite-cursor, .feature-demos .fd-site-cursor,
  .feature-demos .fd-file-stack,
  .feature-demos .fd-delivery-cursor, .feature-demos .fd-b2b-cursor,
  .feature-demos .fd-event-form { display: none; }
}