/* Features page: each card opens a short looping clip of the real app (demo data only). */
.feature-card[data-demo]{ cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; display:flex; flex-direction:column; }
.feature-card[data-demo]:hover{ transform:translateY(-2px); border-color:var(--ink-4); box-shadow:0 10px 28px rgba(26,24,20,.08); }
.feature-card[data-demo] ul{ flex:1; }
.fd-thumb{ position:relative; display:block; margin:0 0 1.1rem; border-radius:.7rem; overflow:hidden; border:1px solid var(--rule); background:var(--paper-sunken); aspect-ratio:16/10; }
.fd-thumb img{ display:block; width:100%; height:100%; object-fit:cover; object-position:left top; transition:transform .5s ease; }
.feature-card[data-demo]:hover .fd-thumb img{ transform:scale(1.025); }
.fd-thumb .fd-play{ position:absolute; left:.8rem; bottom:.8rem; display:inline-flex; align-items:center; gap:.45rem; background:var(--brand-deep); color:#fbf8ef; font:600 .85rem/1 var(--sans); padding:.55rem .85rem .55rem .65rem; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.fd-thumb .fd-play svg{ width:18px; height:18px; flex:none; }
.fd-see{ align-self:flex-start; margin-top:1.1rem; display:inline-flex; align-items:center; gap:.45rem; background:none; border:0; padding:.35rem 0; font:600 .95rem/1.2 var(--sans); color:var(--brand); cursor:pointer; }
.fd-see svg{ width:16px; height:16px; transition:transform .18s ease; }
.feature-card[data-demo]:hover .fd-see svg{ transform:translateX(3px); }
.fd-see:focus-visible, .feature-card[data-demo]:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }

/* Dialog */
dialog.fd{ width:min(1120px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:1.1rem; background:var(--paper-raised); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:auto; }
dialog.fd::backdrop{ background:rgba(20,26,22,.62); backdrop-filter:blur(3px); }
dialog.fd[open]{ animation:fdIn .22s ease-out; }
@keyframes fdIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.fd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem .9rem; }
.fd-head .ftag{ font-family:var(--mono); font-size:.72rem; color:var(--brand); text-transform:uppercase; letter-spacing:.05em; }
.fd-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.4rem, 2.4vw, 1.9rem); margin:.25rem 0 0; letter-spacing:-.01em; }
.fd-x{ flex:none; width:42px; height:42px; border-radius:.7rem; border:1px solid var(--rule); background:var(--paper); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; }
.fd-x:hover{ background:var(--paper-sunken); }
.fd-x:focus{ outline:none; }
.fd-x:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.fd-x svg{ width:20px; height:20px; }
.fd-body{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:1.4rem; padding:0 1.4rem 1.4rem; }
.fd-media{ position:relative; border-radius:.8rem; overflow:hidden; background:#0f2119; aspect-ratio:16/10; border:1px solid var(--rule); }
.fd-media video, .fd-media img{ display:block; width:100%; height:100%; object-fit:cover; }
.fd-pause{ position:absolute; right:.7rem; bottom:.7rem; width:38px; height:38px; border-radius:50%; border:0; background:rgba(20,48,39,.85); color:#fbf8ef; display:grid; place-items:center; cursor:pointer; }
.fd-pause svg{ width:16px; height:16px; }
.fd-side{ display:flex; flex-direction:column; min-width:0; }
.fd-side p{ margin:0 0 1rem; color:var(--ink-2); font-size:1rem; line-height:1.55; }
.fd-steps{ list-style:none; margin:0 0 1.2rem; padding:0; counter-reset:fd; }
.fd-steps li{ counter-increment:fd; position:relative; padding:.5rem .6rem .5rem 2.6rem; margin:0 0 .25rem; border-radius:.6rem; font-size:.93rem; color:var(--ink-2); line-height:1.4; transition:background .3s, color .3s; }
.fd-steps li::before{ content:counter(fd); position:absolute; left:.6rem; top:.5rem; width:1.5rem; height:1.5rem; border-radius:.4rem; display:grid; place-items:center; background:var(--paper-sunken); color:var(--ink-2); font:600 .8rem/1 var(--sans); transition:background .3s, color .3s; }
.fd-steps li.on{ background:var(--brand-soft); color:var(--ink); }
.fd-steps li.on::before{ background:var(--citrine); color:var(--brand-deep); }
.fd-side .fd-note{ font-size:.8rem; color:var(--ink-3); margin:0 0 1rem; }
.fd-actions{ margin-top:auto; display:flex; flex-direction:column; gap:.6rem; }
.fd-actions .cta{ justify-content:center; }
.fd-nav{ display:flex; justify-content:space-between; gap:.5rem; }
.fd-nav button{ flex:1; background:none; border:1px solid var(--rule); border-radius:.7rem; padding:.6rem .7rem; font:500 .9rem/1.2 var(--sans); color:var(--ink-2); cursor:pointer; }
.fd-nav button:hover{ background:var(--paper); border-color:var(--ink-4); }
@media (max-width:860px){
  .fd-body{ grid-template-columns:1fr; }
  .fd-head{ padding:1rem 1rem .75rem; }
  .fd-body{ padding:0 1rem 1rem; gap:1rem; }
  dialog.fd{ width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
}
@media (prefers-reduced-motion: reduce){
  .feature-card[data-demo], .fd-thumb img, dialog.fd[open]{ transition:none; animation:none; }
  .feature-card[data-demo]:hover{ transform:none; }
}

/* For-your-agency page: the card stays a link to its page; the thumbnail plays the clip. */
.agency-card.ag-demo{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.agency-card.ag-demo .fd-thumb{ margin:0; border:0; border-bottom:1px solid var(--rule); border-radius:0; width:100%; padding:0; cursor:pointer; }
.agency-card.ag-demo .fd-thumb:focus-visible{ outline:3px solid var(--brand); outline-offset:-3px; }
.agency-card.ag-demo:hover .fd-thumb img{ transform:scale(1.025); }
.agency-card .ag-link{ display:block; flex:1; padding:1.2rem 1.4rem 1.4rem; color:inherit; text-decoration:none; }
.fd-actions [hidden]{ display:none !important; }
.fd-actions .fd-more{ text-align:center; font-weight:600; font-size:.95rem; color:var(--brand); padding:.3rem 0; }