/* w3bsiter owner demo pages: /demo/websites/, /demo/marketing/, /demo/crm/.
   Loaded after s.css and home.css, so the tokens, buttons, frames, charts
   and FAQ come from the shared system. Only what these pages add lives here.
   Same rules as the rest of the site: nothing starts hidden, no sideways
   rows, every text 14.5px or larger, one accent (cobalt).
   Signature features on these pages: anchor positioned popover tips on the
   price terms, the exclusive FAQ accordion, the owner header. */

/* owner header: logo, the three demos, one action */
.d-top .nav a.btn{color:#fff}
.d-top .drop a.btn{color:#fff}

/* hero */
.d-hero{padding:52px 0 56px}
.d-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
@media (min-width:1040px){.d-hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.d-hero h1{font-size:clamp(2.3rem,4.8vw,3.7rem);max-width:17ch}
.d-hero h1 span{color:var(--accent)}
.d-hero .lede{max-width:44ch}
.d-hero .site{background:var(--surface);box-shadow:var(--sh-2)}
.d-hero .site:hover{transform:none}

/* the fact strip under the hero */
.d-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:0;margin:40px 0 0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden;box-shadow:var(--sh-1)}
.d-facts div{padding:18px 20px;border-top:1px solid var(--line);margin-top:-1px;border-left:1px solid var(--line);margin-left:-1px}
.d-facts dt{font-size:.98rem;color:var(--muted)}
.d-facts dd{margin:6px 0 0;font:800 1.75rem/1.05 var(--head);letter-spacing:-.025em;color:var(--ink)}
.d-facts .src{grid-column:1 / -1;margin:0;max-width:none;padding:12px 20px;font-size:.95rem;background:var(--canvas);border-top:1px solid var(--line)}

/* a slim mid page call to action */
.d-cta{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-top:40px;padding:22px 24px;border-radius:var(--r-card);background:var(--accent-soft);border:1px solid var(--accent-line)}
.d-cta p{margin:0;font:700 1.2rem/1.35 var(--head);color:var(--ink);max-width:40ch}
.d-cta .ctas{margin:0}

/* problem: numbers on a dark band */
.d-dark{background:var(--night);color:var(--on-night);padding:84px 0}
.d-dark h2{color:#fff;max-width:22ch}
.d-dark .intro{color:var(--on-night-muted)}
.d-dark .src{color:var(--on-night-muted)}
.d-dark a{color:var(--night-accent)}
.d-pain{display:grid;gap:12px;margin:32px 0 0;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.d-pain div{padding:22px;border-radius:var(--r-card);background:var(--night-2);border:1px solid var(--night-line)}
.d-pain dt{font:800 2.4rem/1 var(--head);letter-spacing:-.03em;color:#fff}
.d-pain dd{margin:10px 0 0;color:var(--on-night-muted);font-size:1.02rem;line-height:1.5}
.d-pain dd strong{color:var(--on-night)}

/* what you get: a checklist beside a real picture */
.d-gets{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;margin-top:8px}
@media (min-width:980px){.d-gets{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.d-gets .checks{margin-top:24px}
.d-gets .checks li{font-size:1.06rem}
.d-gets .checks li b{display:block;font:700 1.12rem/1.3 var(--head);color:var(--ink)}

/* screenshots of the real app, natural height */
.d-shot{margin:0;border-radius:var(--r-frame);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-2)}
.d-shot img{width:100%;height:auto}
.d-shot figcaption{padding:14px 18px 16px;border-top:1px solid var(--line);font-size:1rem;color:var(--ink-2);line-height:1.5}
.d-shot figcaption b{display:block;font:700 1.12rem/1.3 var(--head);color:var(--ink);margin-bottom:3px}

/* the Shop Desk screens, all visible at once */
.d-bento{display:grid;gap:16px;margin-top:34px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:860px){
  .d-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .d-bento .w6{grid-column:span 6}.d-bento .w4{grid-column:span 4}.d-bento .w3{grid-column:span 3}.d-bento .w2{grid-column:span 2}
  .d-bento .tall{grid-row:span 2}
}
.d-bento .note-cell,.d-bento .card{align-self:stretch}
.d-bento .note-cell{display:flex;flex-direction:column;justify-content:center;padding:26px;border-radius:var(--r-frame);background:var(--accent);color:#fff}
.d-bento .note-cell h3{color:#fff;font-size:1.45rem}
.d-bento .note-cell p{color:#fff;margin:0}

/* a pair of real demos that became clients */
.d-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:34px}
@media (min-width:980px){.d-pair{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:stretch}}
.d-pair .pcap{margin-top:12px}
.d-pair .phone-solo{height:100%}

/* real numbers with their source */
.d-proof{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:30px}
@media (min-width:1000px){.d-proof{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.d-scores{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.d-scores li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 16px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--canvas);border:1px solid var(--line)}
.d-scores li span{font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.d-scores li em{font-style:normal;color:var(--muted);font-size:.98rem;font-variant-numeric:tabular-nums}
.d-scores li b{display:grid;place-items:center;min-width:3.1rem;padding:6px 8px;border-radius:9px;background:var(--s-ok-bg);color:var(--s-ok);font:800 1.15rem/1 var(--head);font-variant-numeric:tabular-nums}
.d-record{display:grid;gap:12px;align-content:start}
.d-record div{padding:20px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.d-record b{display:block;font:800 2.2rem/1 var(--head);letter-spacing:-.03em}
.d-record span{display:block;margin-top:8px;color:var(--ink-2);font-size:1rem}

/* the offer */
.d-offer{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:1000px){.d-offer{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.d-price{font:800 clamp(3rem,7vw,4.4rem)/1 var(--head);letter-spacing:-.04em;color:#fff;margin:4px 0 6px}
.d-price small{font:600 1.15rem/1 var(--body);letter-spacing:0;color:var(--on-night-muted);margin-left:6px}
.d-per{color:var(--on-night-muted);margin:0 0 24px}
.d-side{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--sh-2)}
.d-side h3{font-size:1.35rem}
.d-cost{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.d-cost li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:14px 16px;border-radius:12px;background:var(--canvas);border:1px solid var(--line)}
.d-cost li b{font-variant-numeric:tabular-nums}
.d-side .btn{margin-top:18px}

/* Shop Desk plans */
.d-plans{display:grid;gap:16px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:stretch}
.d-plan{display:flex;flex-direction:column;padding:26px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)}
.d-plan.main{background:var(--night);border-color:var(--night);color:var(--on-night);box-shadow:var(--sh-3)}
.d-plan.main h3,.d-plan.main .d-amt{color:#fff}
.d-plan.main p,.d-plan.main li{color:var(--on-night)}
.d-plan h3{font-size:1.4rem;margin-bottom:6px}
.d-amt{font:800 2.6rem/1 var(--head);letter-spacing:-.03em;margin:8px 0 4px}
.d-amt small{font:500 1rem/1 var(--body);letter-spacing:0;color:var(--muted)}
.d-plan.main .d-amt small{color:var(--on-night-muted)}
.d-plan .checks{margin:16px 0 22px;flex:1}
.d-plan .checks li{font-size:1rem}
.d-plan .btn{align-self:start}
.d-plan.main .btn{background:#fff;color:var(--ink)}
.d-plan.main .btn:hover{background:var(--accent-soft)}

/* price term tips: a button that opens a popover placed by anchor positioning */
.tip-btn{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:1.45em;height:1.45em;margin-left:.3em;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 .92rem/1 var(--body);vertical-align:.12em;border:1px solid var(--accent-line)}
.tip-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.offer-card .tip-btn,.d-plan.main .tip-btn{background:rgb(255 255 255 / .14);color:#fff;border-color:rgb(255 255 255 / .35)}
.tip{max-width:min(22rem,calc(100vw - 32px));margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:400 1rem/1.5 var(--body);box-shadow:var(--sh-3)}
@supports (position-area:top){.tip{position-area:top;margin-bottom:8px;position-try-fallbacks:flip-block}}
@media (prefers-reduced-motion:no-preference){
  .tip{transition:opacity .18s,translate .18s,display .18s allow-discrete,overlay .18s allow-discrete;opacity:0;translate:0 6px}
  .tip:popover-open{opacity:1;translate:0}
  @starting-style{.tip:popover-open{opacity:0;translate:0 6px}}
}

/* trades the desk speaks */
.d-trades{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media (min-width:980px){.d-trades{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.d-trades .chips li{font-size:1.02rem;background:var(--surface)}

/* pay per call side card on the marketing offer */
.d-ppx h3{margin-top:0}
.d-ppx .chips li{font-size:.98rem}

/* how it works, a rail with real outcomes */
.d-rail{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;counter-reset:r;max-width:52rem}
.d-rail li{position:relative;padding:0 0 26px 58px;counter-increment:r}
.d-rail li::before{content:counter(r);position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--surface);border:1px solid var(--accent-line);color:var(--accent);font:800 1.05rem/1 var(--head);box-shadow:var(--sh-1)}
.d-rail li::after{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--accent-line)}
.d-rail li:last-child{padding-bottom:0}
.d-rail li:last-child::after{display:none}
.d-rail h3{margin:8px 0 6px}
.d-rail p{margin:0;color:var(--ink-2)}

@media (max-width:560px){
  .d-hero{padding:36px 0 44px}
  .d-dark{padding:64px 0}
  .d-cta{padding:18px}
  .d-scores li{grid-template-columns:minmax(0,1fr) auto}
  .d-scores li em{grid-column:1;grid-row:2}
  .d-scores li b{grid-row:1 / span 2;grid-column:2}
}