/* PharmGrowth — Design Suite
   Live mini-site previews, gallery controls and the customiser panel.
   Every preview is rendered from CSS variables so a design can be re-tinted
   instantly by the customiser without touching any markup. */

/* ── mini-site preview ───────────────────────────────────────── */
.dp{
  --dp-p:#1F7A45; --dp-a:#8FB39B; --dp-bg:#F6F4EE; --dp-ink:#152018;
  --dp-ff:var(--sans); --dp-wt:600; --dp-tt:none; --dp-ls:-.02em;
  background:var(--dp-bg); color:var(--dp-ink); font-family:var(--dp-ff);
  border-radius:var(--r-sm); overflow:hidden; height:100%;
  display:flex; flex-direction:column; container-type:inline-size;
}
.dp h4{font-family:inherit; color:inherit; font-weight:var(--dp-wt);
  text-transform:var(--dp-tt); letter-spacing:var(--dp-ls);
  font-size:clamp(.95rem,4.4cqw,1.7rem); line-height:1.08; margin:0 0 .5em}
.dp p{margin:0; font-size:clamp(.5rem,1.65cqw,.72rem); line-height:1.5; opacity:.72}

.dp-nav{display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem;
  border-bottom:1px solid rgba(128,128,128,.18); flex:none}
.dp-brand{font-weight:700; font-size:clamp(.52rem,1.7cqw,.78rem);
  letter-spacing:.02em; color:var(--dp-p)}
.dp-links{display:flex; gap:.45rem; margin-left:auto}
.dp-links i{display:block; width:1.6rem; height:.28rem; border-radius:2px;
  background:currentColor; opacity:.22}
.dp-cta{background:var(--dp-p); color:#fff; border-radius:999px;
  padding:.28em .8em; font-size:clamp(.42rem,1.35cqw,.6rem); font-weight:600; white-space:nowrap}

.dp-btns{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.9rem}
.dp-b1,.dp-b2{font-size:clamp(.42rem,1.35cqw,.6rem); font-weight:600;
  padding:.45em 1em; border-radius:999px; white-space:nowrap}
.dp-b1{background:var(--dp-p); color:#fff}
.dp-b2{border:1px solid currentColor; opacity:.55}

.dp-split{display:grid; grid-template-columns:1.05fr .95fr; gap:1rem;
  padding:1.2rem 1rem; flex:1; align-items:center}
.dp-art{border-radius:var(--r-xs); background:var(--dp-a); position:relative;
  overflow:hidden; min-height:100%; opacity:.85}
.dp-art-a{min-height:5.5rem}
.dp-art-b{min-height:3.4rem; margin-top:1rem}
.dp-orb{position:absolute; inset:22% 18% auto auto; width:42%; aspect-ratio:1;
  border-radius:50%; background:var(--dp-p); opacity:.55}
.dp-bar{position:absolute; left:12%; bottom:16%; width:52%; height:.5rem;
  border-radius:4px; background:#fff; opacity:.75}
.dp-bar.s{bottom:8%; width:34%; opacity:.5}
.dp-strip{display:flex; gap:1rem; padding:.6rem 1rem; flex:none;
  border-top:1px solid rgba(128,128,128,.18);
  font-size:clamp(.4rem,1.25cqw,.56rem); opacity:.6}

.dp-dark{padding:1.4rem 1.1rem; flex:1; display:flex; flex-direction:column; justify-content:center}
.dp-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:1rem}
.dp-tiles span{background:var(--dp-a); border-radius:var(--r-xs); min-height:2.4rem;
  opacity:.8; font-size:clamp(.4rem,1.25cqw,.55rem); display:grid; place-items:center;
  text-align:center; padding:.3rem; color:var(--dp-ink)}
.dp-tiles.t3{padding:0 1rem 1.1rem}

.dp-ed{padding:1.4rem 1.3rem; flex:1; display:flex; flex-direction:column}
.dp-kicker{font-size:clamp(.4rem,1.2cqw,.55rem); letter-spacing:.22em;
  text-transform:uppercase; opacity:.55; margin-bottom:.7rem}
.dp-rule{height:1px; background:currentColor; opacity:.2; margin:.2rem 0 .7rem}

.dp-banner{padding:1.4rem 1.1rem .2rem; flex:1}

.dp-bento{display:grid; grid-template-columns:1.4fr 1fr; grid-auto-rows:minmax(2rem,auto);
  gap:.4rem; padding:.9rem; flex:1}
.dp-bx{background:var(--dp-a); border-radius:var(--r-xs); padding:.55rem .7rem;
  font-size:clamp(.42rem,1.3cqw,.6rem); font-weight:600; line-height:1.25; opacity:.9}
.dp-bx.big{grid-row:span 3; background:transparent; opacity:1; padding:.4rem .3rem}

.dp-panel{padding:1.4rem 1.1rem; flex:1}
.dp-rows{display:flex; flex-direction:column; gap:.35rem; padding:0 1.1rem 1.1rem}
.dp-rows span{height:.85rem; border-radius:4px; background:var(--dp-a); opacity:.7}
.dp-rows span:nth-child(2){width:78%}
.dp-rows span:nth-child(3){width:56%}

/* ── gallery ─────────────────────────────────────────────────── */
.ds-bar{display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
  margin-bottom:1.6rem}
.ds-bar .chips{margin-top:0}
.ds-search{margin-left:auto; position:relative}
.ds-search input{border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:var(--r-pill); padding:.7rem 1.1rem; font:inherit; font-size:.9rem;
  min-width:min(19rem,70vw); color-scheme:light}
.ds-search input:focus{outline:2px solid var(--green); outline-offset:1px}
.ds-count{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute)}

.ds-grid{display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,1.6vw,1.2rem)}
@media(max-width:980px){.ds-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ds-grid{grid-template-columns:1fr}}
.ds-card{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast)}
.ds-card:hover{transform:translateY(-3px); box-shadow:var(--sh-sm)}
.ds-card .frame{aspect-ratio:16/10; border-bottom:1px solid var(--line);
  background:var(--sage); overflow:hidden}
.ds-card .tx{padding:1.2rem 1.35rem 1.4rem; display:flex; flex-direction:column; flex:1}
.ds-card .tx p{font-size:.9rem; line-height:1.55; color:var(--slate); margin:.45rem 0 0}
.ds-card .tlink{margin-top:auto; padding-top:1.1rem}
.ds-empty{padding:3rem 0; text-align:center; color:var(--mute)}

/* ── customiser ──────────────────────────────────────────────── */
.ds-cust{display:grid; grid-template-columns:1.55fr .95fr;
  gap:clamp(1rem,2.4vw,2rem); align-items:start}
@media(max-width:900px){.ds-cust{grid-template-columns:1fr}}
.ds-browser{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm)}
.ds-chrome{display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem;
  border-bottom:1px solid var(--line); background:var(--cream)}
.ds-chrome b{width:9px; height:9px; border-radius:50%; background:var(--line);
  display:block; flex:none}
.ds-chrome span{font-family:var(--mono); font-size:.72rem; color:var(--mute);
  margin-left:.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ds-stage{aspect-ratio:16/10}

.ds-panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.4vw,1.8rem); color-scheme:light}
.ds-panel h3{margin-bottom:.3rem}
.ds-fld{margin-bottom:1.4rem}
.ds-fld > label{display:block; font-weight:600; font-size:.95rem; margin-bottom:.45rem}
.ds-fld .hint{font-size:.82rem; color:var(--mute); margin:0 0 .6rem; line-height:1.5}
.ds-fld input[type=text]{width:100%; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.7rem .9rem; font:inherit; font-size:.95rem; background:#fff; color:var(--ink)}
.ds-fld input[type=file]{font:inherit; font-size:.85rem; color:var(--slate); max-width:100%}
.ds-colour{display:flex; gap:.6rem; align-items:center}
.ds-colour input[type=color]{width:52px; height:44px; padding:0; border:1px solid var(--line);
  border-radius:var(--r-sm); background:#fff; cursor:pointer}
.ds-fonts{display:flex; flex-direction:column; gap:.5rem}
.ds-fonts label{display:flex; align-items:center; gap:.7rem; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.7rem .9rem; cursor:pointer; font-size:.95rem}
.ds-fonts label:has(input:checked){border-color:var(--green); background:var(--sage)}
.ds-fonts input{accent-color:var(--green)}
.ds-fonts .s-serif{font-family:Georgia,'Iowan Old Style',serif}
.ds-fonts .s-bold{font-weight:700; text-transform:uppercase; letter-spacing:-.01em}
.ds-actions{display:flex; flex-direction:column; gap:.7rem; margin-top:1.6rem}
.ds-reset{background:none; border:0; color:var(--slate); font:inherit; font-size:.9rem;
  text-decoration:underline; cursor:pointer; padding:.2rem 0; align-self:flex-start}
.ds-note{font-size:.82rem; color:var(--mute); line-height:1.55; margin:.9rem 0 0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Feature cycler: auto-advancing accordion + synced panel ────
   Used on the platform pages. The list drives which panel scene is
   visible; both sides advance on a timer and on hover/click/focus. */
.fcyc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.6rem);align-items:center}
.fcyc.rev .fcyc-list{order:2}
.fcyc.rev .fcyc-stage{order:1}
@media(max-width:900px){.fcyc{grid-template-columns:1fr}
  .fcyc.rev .fcyc-list,.fcyc.rev .fcyc-stage{order:initial}
  .fcyc-stage{order:2}}

.fcyc-list{display:flex;flex-direction:column;gap:.3rem}
.fcyc-item{border:1px solid transparent;border-radius:var(--r);padding:1rem 1.15rem;
  background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;
  transition:background var(--fast),border-color var(--fast)}
.fcyc-item .row{display:flex;align-items:center;gap:.85rem}
.fcyc-item .ic{width:34px;height:34px;border-radius:10px;background:var(--sage);color:var(--green);
  display:grid;place-items:center;flex:none;transition:background var(--fast),color var(--fast)}
.fcyc-item .ic svg{width:17px;height:17px}
.fcyc-item h3{font-size:1.05rem;margin:0}
.fcyc-item p{margin:.6rem 0 0 calc(34px + .85rem);font-size:.92rem;line-height:1.55;color:var(--slate);
  display:none}
.fcyc-item[aria-selected=true]{background:var(--sage);border-color:var(--line)}
.fcyc-item[aria-selected=true] .ic{background:var(--green);color:#fff}
.fcyc-item[aria-selected=true] p{display:block}
.fcyc-item:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.fcyc-stage{position:relative;background:linear-gradient(160deg,var(--sage) 0%,var(--sage-2) 100%);
  border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:4/3;overflow:hidden}
.fcyc-scene{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(1.2rem,3vw,2rem);
  opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);
  pointer-events:none}
.fcyc-scene[data-on]{opacity:1;transform:none}
.fcyc-card{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);width:100%;
  padding:1.1rem 1.2rem;font-size:.85rem}
.fcyc-card .t{font-weight:600;margin-bottom:.75rem;font-size:.9rem}
.fcyc-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;
  border-bottom:1px solid var(--line-2);color:var(--slate)}
.fcyc-row:last-child{border-bottom:0}
.fcyc-row .dot{width:16px;height:16px;border-radius:50%;background:var(--sage);flex:none;
  display:grid;place-items:center;color:var(--green)}
.fcyc-row .dot svg{width:10px;height:10px}
.fcyc-row .grow{flex:1}
.fcyc-row .pill{font-size:.68rem;font-weight:600;background:var(--sage);color:var(--green);
  border-radius:999px;padding:.2em .7em;white-space:nowrap}
.fcyc-bars{display:flex;align-items:flex-end;gap:.5rem;height:5.5rem;margin-top:.4rem}
.fcyc-bars i{flex:1;background:var(--green);border-radius:4px 4px 0 0;opacity:.85;
  transition:height .6s var(--ease)}
.fcyc-cursor{position:absolute;right:14%;bottom:16%;width:34px;height:34px;color:var(--green);
  filter:drop-shadow(0 6px 14px rgba(11,40,21,.28));animation:fcycTap 2.4s var(--ease) infinite}
@keyframes fcycTap{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(-6px,-8px) scale(.92)}}
@media(prefers-reduced-motion:reduce){.fcyc-cursor{animation:none}
  .fcyc-scene{transition:none}}