/* ==========================================================================
   DealR — Homepage compositions
   Every major section has its own layout. There is no universal feature card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
body>main,body>.site-footer{position:relative;z-index:1}
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid transparent;transition:background .25s var(--ease),border-color .25s}
.site-header.stuck{background:rgba(11,12,15,.72);border-bottom-color:var(--rule);backdrop-filter:blur(22px) saturate(1.4)}
.nav{display:flex;align-items:center;gap:28px;min-height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-text);font-size:17px;font-weight:800;letter-spacing:-.05em;margin-right:auto}
.brand .glyph{width:26px;height:26px;flex:0 0 auto}
.brand span{white-space:nowrap}
.brand em{font-style:normal;font-weight:550;color:var(--ink-3);margin-left:.28em;letter-spacing:-.02em}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--ink-2)}
.nav-links a{position:relative;padding:5px 0;transition:color var(--t-fast)}
.nav-links a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover:after,.nav-links a.on:after{transform:scaleX(1)}
.nav-links a.on{color:var(--ink)}
.nav-actions{display:none}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;width:42px;height:42px;border:0;border-radius:var(--r-control);background:transparent;border:1px solid var(--rule-2);cursor:pointer}
.nav-toggle span{display:block;width:16px;height:1px;margin:4px auto;background:var(--ink);transition:transform var(--t-mid) var(--ease),opacity var(--t-fast)}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   1. Hero — asymmetric, left-weighted, product bleeding off the right edge
   -------------------------------------------------------------------------- */
.hero{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(70px,9vw,130px)}
/* The flow: real listings drifting through depth behind the whole page. */
.bg-flow{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-flow canvas{width:100%;height:100%;display:block}
/* Holds the reading column back from the imagery without flattening the field. */
.bg-flow:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(52% 58% at 16% 44%,var(--ground) 22%,transparent 74%),
    linear-gradient(var(--ground),transparent 18%,transparent 82%,var(--ground));
}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero-copy{max-width:660px}
.hero h1{margin:22px 0 0}
.hero .lead{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:9px 20px;margin-top:26px;color:var(--ink-3);font-size:12.5px}
.hero-foot i{width:3px;height:3px;border-radius:50%;background:var(--ink-4)}

/* The hero stage: a real listing, an incoming offer, and the ticket it opens —
   stacked in depth so the ecosystem is legible in one glance. */
.hero-stage{position:relative;perspective:1700px;min-height:440px}
.hero-stage-inner{
  position:relative;
  transform:rotateY(-13deg) rotateX(3deg) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease);
  will-change:transform;
}
/* A single plane. The previous draft floated three separate panels at
   different depths, which never agreed with each other and read as a mockup
   rather than a screen. */
.hero-video{
  display:block;width:min(560px,112%);height:auto;
  border-radius:6px;
  box-shadow:0 70px 120px -60px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.07);
  background:var(--void);
}
.stage-caption{
  position:absolute;left:6px;bottom:-30px;margin:0;
  display:flex;align-items:center;gap:9px;
  font-size:12px;color:var(--ink-3);
}
.stage-caption i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px var(--cyan-wash)}

/* --------------------------------------------------------------------------
   3. How it works — one compact rail. The demonstration lives in the
   background lattice now, so this section only has to name the steps.
   -------------------------------------------------------------------------- */
.flow{padding:clamp(80px,10vw,150px) 0}
.flow-head{max-width:60ch}
.flow-head .h2{margin-top:20px}
.flow-head .lead{margin-top:20px}
.flow-rail{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin:clamp(44px,5vw,76px) 0 0;padding:0;list-style:none;
  border-top:1px solid var(--rule-2);
}
.flow-rail li{position:relative;padding:26px 26px 0 0}
.flow-rail li+li{padding-left:26px;box-shadow:inset 1px 0 0 var(--rule)}
.flow-rail li:before{
  content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.flow-rail.seen li:before{transform:scaleX(1)}
.flow-rail li:nth-child(2):before{transition-delay:.1s}
.flow-rail li:nth-child(3):before{transition-delay:.2s}
.flow-rail li:nth-child(4):before{transition-delay:.3s}
.flow-rail li:nth-child(5):before{transition-delay:.4s}
.flow-rail li.amber:before{background:var(--amber)}
/* A step number is not code. It used to borrow the monospace token, which put
   a second typeface on the page for the sake of five ordinals. Same treatment
   as every other numbered step in DealR: the text face, with tabular figures
   so the column stays even. */
.flow-rail b{font-family:var(--f-text);font-size:11.5px;font-weight:700;color:var(--ink-4);
  letter-spacing:.08em;font-variant-numeric:tabular-nums}
.flow-rail li.amber b{color:var(--amber)}
.flow-rail h2,.flow-rail h3,.flow-rail h4{margin:14px 0 0;font-family:var(--f-text);font-size:21px;font-weight:730;letter-spacing:-.03em}
.flow-rail p{margin:10px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55}

/* --------------------------------------------------------------------------
   The deal trace
   One listing, travelling down the page with the reader. It is the same object
   the lattice is routing behind it — posted, routed, discovered, offered,
   settled — so the background is demonstrably doing something rather than
   just moving. Sits in the right margin, clear of the reading column.
   -------------------------------------------------------------------------- */
.deal-trace{
  position:fixed;z-index:2;right:clamp(18px,3.2vw,54px);top:0;
  width:224px;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease);
  will-change:transform;
}
.deal-trace.on{opacity:1}

/* The wake: where the listing has just been. */
.trace-wake{
  position:absolute;left:50%;bottom:100%;width:1px;height:130px;
  background:linear-gradient(to top,var(--cyan),transparent);
  opacity:.5;transition:background .5s var(--ease);
}
.deal-trace.deal .trace-wake{background:linear-gradient(to top,var(--amber),transparent)}

.trace-card{
  position:relative;
  padding:13px 15px 14px;border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--raise-1) 82%,transparent);
  border:1px solid var(--rule-2);box-shadow:0 24px 50px -28px rgba(0,0,0,.95);
  backdrop-filter:blur(14px) saturate(1.2);
  transition:box-shadow .5s var(--ease);
}
.deal-trace.deal .trace-card{border-color:var(--amber-wash)}
.deal-trace.settled .trace-card{border-color:var(--accent)}

.trace-kind{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.deal-trace.deal .trace-kind{color:var(--amber)}
.trace-kind i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
.trace-title{margin-top:8px;font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.trace-meta{margin-top:3px;font-size:11.5px;color:var(--ink-3)}
.trace-value{margin-top:9px;padding-top:9px;border-top:1px solid var(--rule);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* Phase changes swap the copy; a short blur-out sells it as a state change
   rather than a text replacement. */
.trace-card>*{transition:opacity .25s var(--ease),filter .25s var(--ease)}
.deal-trace.swapping .trace-card>*{opacity:0;filter:blur(3px)}

@media (max-width:1180px){.deal-trace{display:none}}

/* --------------------------------------------------------------------------
   4. Install — the editorial light band
   -------------------------------------------------------------------------- */
.install{padding:clamp(62px,7vw,104px) 0}
.install-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3vw,46px);align-items:end}
.install-top .h1{max-width:15ch}
.install-top p{align-self:end;padding-bottom:6px;max-width:42ch}
.install-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,5vw,80px);margin-top:clamp(34px,3.5vw,56px);align-items:start}
.steps{border-top:1px solid var(--rule-2)}
.step-row{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--rule)}
.step-row .n{font-family:var(--f-text);font-size:15px;font-weight:700;color:var(--ink-4);font-variant-numeric:tabular-nums;padding-top:2px}
.step-row h3,.step-row h4{margin:0;font-family:var(--f-text);font-size:20px;font-weight:730;letter-spacing:-.03em}
.step-row p{margin:7px 0 0;color:var(--ink-2);font-size:14px;line-height:1.55;max-width:44ch}
.step-row code{font-family:var(--f-mono);font-size:13px;padding:2px 6px;border-radius:2px;background:var(--raise-3);color:var(--ink)}
.install-note{margin-top:26px;display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);max-width:46ch}
.install-note .check{margin-top:2px}

/* A quiet oversized quotation, set in the editorial serif */
/* The quote closes the left column rather than the whole band.

   It used to follow .install-body, so it cleared the taller of the two
   columns -- the demo panel, about 140px taller than the steps -- and the
   space under the steps read as a hole rather than as spacing. Placed in the
   grid it keeps the same rhythm as the row above it on both sides. */
/* The demo panel spans both rows so the quote can sit directly under the
   steps. Placed in row 2 alone it cleared the panel instead, which put the
   quote further down than it started. The row gap is the spacing; the quote
   carries no margin of its own here.

   Only where the band actually has two columns. Below 1080px .install-body
   collapses to a single column, and naming rows and columns there built an
   implicit second track: the first column came out 0px wide with the quote
   crushed inside it, and the steps and the demo panel were both placed at the
   top of row 1, drawn on top of each other. Stacked, the source order is
   already the right order and needs no placement at all. */
@media (min-width:1081px){
  .install-body>.install-demo{grid-row:1 / span 2}
  .install-body>.pull{grid-column:1;grid-row:2;margin-top:0;align-self:start}
}
.pull{
  margin:clamp(46px,5vw,84px) 0 0;
  font-weight:400;color:var(--ink-2);
  font-size:clamp(24px,3.2vw,42px);line-height:1.2;letter-spacing:-.025em;
  max-width:24ch;
}
.pull span{font-weight:650;color:var(--ink)}

/* --------------------------------------------------------------------------
   5. Marketplace — near full bleed, heading overlapping the product
   -------------------------------------------------------------------------- */
.market{position:relative;padding:clamp(80px,10vw,140px) 0 clamp(70px,8vw,120px);overflow:hidden}
.market-head{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(24px,4vw,60px);align-items:end;margin-bottom:30px}
.market-head .display{mix-blend-mode:normal}
.market-head p{padding-bottom:10px}
.market-frame{position:relative;z-index:1;margin-top:0}
.market-frame .frame{border-radius:var(--r-stage)}
.market-ui{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:0}
.market-filters{padding:18px 16px;border-right:1px solid var(--rule);background:var(--void)}
.filter-group{padding:14px 0;border-bottom:1px solid var(--rule)}
.filter-group:last-child{border-bottom:0}
.filter-group>small{display:block;color:var(--ink-4);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.filter-item{display:flex;align-items:center;gap:9px;padding:6px 8px;margin:0 -8px;border-radius:var(--r-dense);font-size:13px;color:var(--ink-2);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}
.filter-item:hover{background:rgba(255,255,255,.04)}
.filter-item.on{color:var(--ink);background:var(--raise-2)}
.filter-item .n{margin-left:auto;color:var(--ink-4);font-size:11.5px;font-variant-numeric:tabular-nums}
.market-results{padding:16px 18px 20px;min-width:0}
.market-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.market-search{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;border-radius:var(--r-control);background:var(--raise-2);color:var(--ink-4);font-size:13px}
.market-count{color:var(--ink-3);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.market-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

/* --------------------------------------------------------------------------
   6. Owner console — split, dense, deliberately calm
   -------------------------------------------------------------------------- */
.owner{padding:clamp(70px,9vw,130px) 0;background:var(--void);border-top:1px solid var(--rule)}
.owner-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,72px);align-items:center}
.owner-copy .h2{margin-top:20px}
.owner-copy .lead{margin-top:18px}
.owner-list{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.owner-list li{padding:15px 0;border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink-2);display:flex;gap:13px;align-items:baseline}
.owner-list b{color:var(--ink);font-weight:600;flex:0 0 auto;min-width:150px;letter-spacing:-.01em}

/* --------------------------------------------------------------------------
   7. Plans — an editorial comparison, not two glossy cards
   -------------------------------------------------------------------------- */
.plans{padding:clamp(80px,10vw,140px) 0}
.plans-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.55fr);gap:40px;align-items:end;margin-bottom:clamp(36px,4vw,64px)}
.plan-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--rule-2)}
.plan{padding:32px clamp(20px,2.6vw,40px) 34px;position:relative}
.plan+.plan{box-shadow:inset 1px 0 0 var(--rule)}
.plan.pro{background:var(--raise-1)}
.plan-name{display:flex;align-items:baseline;gap:12px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.plan-name em{font-style:normal;color:var(--ink-3);font-weight:400;font-size:12.5px}
.plan-price{display:flex;align-items:baseline;gap:10px;margin:20px 0 0}
.plan-price strong{font-family:var(--f-text);font-size:clamp(44px,5vw,72px);font-weight:760;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.plan-price span{color:var(--ink-3);font-size:13px;line-height:1.35}
.plan>p{margin:16px 0 0;color:var(--ink-2);font-size:14px;max-width:38ch;line-height:1.55}
.plan ul{margin:26px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.plan li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:13.5px;display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline}
.plan li i{font-style:normal;color:var(--cyan);font-size:11px}
.plan li b{display:block;font-weight:600;letter-spacing:-.01em}
.plan li small{display:block;margin-top:2px;color:var(--ink-3);font-size:12.5px}
.plan .btn{margin-top:26px;width:100%}
.plan-flag{position:absolute;top:32px;right:clamp(20px,2.6vw,40px);font-size:11.5px;color:var(--amber)}
.plans-note{margin-top:26px;display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);max-width:62ch}

/* --------------------------------------------------------------------------
   8. Close
   -------------------------------------------------------------------------- */
.close{position:relative;padding:clamp(90px,12vw,180px) 0 clamp(70px,9vw,130px);overflow:hidden;border-top:1px solid var(--rule)}
.close .display{max-width:14ch}
.close-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:38px}
.close-cta .meta{max-width:30ch}

/* --------------------------------------------------------------------------
   Footer
   A sitemap and the legal line, rather than one long row of links. The old one
   put nine links in a single flex row with no wrap, which measured 534px and
   pushed every page on the site sideways on a phone.
   -------------------------------------------------------------------------- */
.site-footer{padding:52px 0 40px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:13px}
.footer-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,72px);padding-bottom:34px}
.footer-mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-text);font-size:16px;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.footer-mark em{font-style:normal;font-weight:400;color:var(--ink-3)}
.footer-brand p{margin:14px 0 0;max-width:38ch;line-height:1.6;color:var(--ink-4)}
.footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-col h2{margin:0 0 2px;font-family:var(--f-text);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.footer-col a{color:var(--ink-3)}
.footer-col a:hover{color:var(--ink)}
.footer-base{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px;padding-top:26px;border-top:1px solid var(--rule)}
.footer-base>span{flex:0 0 auto;color:var(--ink-4)}
@media (max-width:820px){
  .site-footer{padding:40px 0 34px}
  .footer-top{grid-template-columns:1fr;gap:32px;padding-bottom:28px}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  /* The same thumb rule as the rest of the phone layout. */
  .footer-col a{display:inline-flex;align-items:center;min-height:38px}
  .footer-col{gap:0}
}
.site-footer a:hover{color:var(--cyan)}
.disclaimer{margin:0;max-width:74ch;line-height:1.6;color:var(--ink-4)}

/* --------------------------------------------------------------------------
   Responsive — sections are recomposed, not simply stacked
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero-stage{min-height:0;perspective:none}
  .hero-stage-inner{transform:none!important}
  .hero-stage .frame{width:100%}
  .hero-float.offer-float{right:-12px;top:auto;bottom:-26px;width:250px;transform:none}
  .hero-float.ticket-float{display:none}
  .flow-rail{grid-template-columns:repeat(2,1fr)}
  .flow-rail li,.flow-rail li+li{padding:26px 22px 26px 0;box-shadow:none;border-bottom:1px solid var(--rule)}
  .flow-rail li:before{display:none}
  .install-top,.install-body,.owner-grid,.market-head,.plans-head{grid-template-columns:1fr}
  .market-head{margin-bottom:26px}
  .install-top p{padding-bottom:0}
  .owner-grid{gap:40px}
  .market-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-links{
    position:absolute;top:70px;left:var(--gutter);right:var(--gutter);
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:8px;border-radius:var(--r-panel);background:var(--raise-2);
    border:1px solid var(--rule-2);box-shadow:var(--lift);
  }
  .nav-open .nav-links{display:flex}
  .nav-links a{padding:12px 12px}
  .nav-links a:after{display:none}
  .nav-toggle{display:block}
  .nav-right .btn{display:none}
  /* The header's actions, mirrored into the menu by dealr-ui.js. They are the
     only copies a phone can reach, so they are separated from the page links
     and sized as real buttons rather than as another row of text. */
  .nav-actions{
    display:flex;flex-direction:column;gap:8px;
    margin-top:8px;padding-top:12px;border-top:1px solid var(--rule-2);
  }
  .nav-actions .btn{display:inline-flex;justify-content:center;width:100%}
  .nav-actions .acct-link{display:flex;align-items:center;gap:8px;padding:10px 12px}
  .market-ui{grid-template-columns:1fr}
  .market-filters{display:none}
  .console{grid-template-columns:1fr}
  .console-side{display:none}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .plan-cols{grid-template-columns:1fr}
  .plan+.plan{box-shadow:inset 0 1px 0 var(--rule)}
  .dsc{grid-template-columns:1fr}
  .dsc-side{display:none}
  .flow-rail{grid-template-columns:1fr}
  .deal-trace{display:none}
  .trow{grid-template-columns:1fr auto;gap:8px}
  .trow>:nth-child(2),.trow>:nth-child(3){display:none}
}
@media (max-width:560px){
  /* The window chrome drops to server + status only; the channel name is
     already stated by the surface below it. */
  .frame-bar{gap:9px;padding:0 13px;height:42px}
  .frame-bar .sep,.frame-bar .sep+span{display:none}
  .frame-bar b{overflow:hidden;text-overflow:ellipsis}
  .act .proof{height:86px}
  .act .dsc-feed{padding:13px 14px}
  .act .embed{padding:13px 14px}
  .market-cards{grid-template-columns:1fr}
  .hero-cta{display:grid}
  .hero-cta .btn{width:100%}
  .fields{gap:16px}
}

/* --------------------------------------------------------------------------
   Product captures
   These are recordings of the real application, not reconstructions of it.
   Presented with as little furniture as possible: no fake window chrome, no
   browser frame, no card around the card. A hairline and a deep shadow are
   enough to seat them on the page.
   -------------------------------------------------------------------------- */
.shot{
  position:relative;margin:0;
  border-radius:5px;overflow:hidden;
  box-shadow:0 60px 110px -55px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.07);
  background:var(--void);
}
.shot img{display:block;width:100%;height:auto}

/* Runs past the container and is cut by the viewport, so the market reads as
   larger than the page rather than as an object placed on it. */
.shot-bleed{border-radius:6px 6px 0 0;margin-bottom:-2px}
.shot-bleed img{width:100%}

/* Tall captures are cropped by their frame rather than scaled down to fit. */
.shot-tall{max-height:520px}
.shot-tall img{object-fit:cover;object-position:top center}

.shot-note{margin:16px 0 0;font-size:12.5px;color:var(--ink-3);max-width:44ch}
.shot-note.wide{max-width:none;margin-top:18px}
.shot-note code{font-family:var(--f-mono);font-size:12px;color:var(--ink-2)}

.bone .shot{box-shadow:0 40px 80px -46px rgba(35,30,20,.5),0 0 0 1px rgba(19,21,25,.1)}

/* The official logo is used as supplied: no recolour, no glow, no border.
   It already carries its own dark ground, so it only needs clear space. */
.brand .glyph,.app-brand .glyph{
  display:block;border-radius:4px;flex:0 0 auto;
}
.brand{gap:11px}
.app-brand .glyph{border-radius:4px}

/* The live count sits with the other facts rather than in a badge above the
   headline. A pulsing pill over a hero is the most recognisable generated-site
   tell there is. */
.hero-foot .live-now{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2)}
.hero-foot .live-now:before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* The field continues across the light band, but as cast shadows rather than
   imagery. Same listings, same positions, drawn as soft dark shapes so the
   band stays white and the movement carries through. */
.install{position:relative;overflow:hidden}
.band-shadow{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
}
.install>.shell{position:relative;z-index:1}

/* --------------------------------------------------------------------------
   The hero stage, now that its channels are buttons
   -------------------------------------------------------------------------- */
.dc-rail .dc-ch{
  width:100%;font:inherit;text-align:left;border:0;cursor:pointer;
  background:none;color:inherit;-webkit-appearance:none;appearance:none;
}
.dc-rail .dc-ch:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.dc-rail .dc-ch:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dc-top b{font-weight:600;color:var(--ink)}
/* Says the panel is an illustration. Its listings are written rather than
   taken from the live market, so it has to be labelled and has to stay
   labelled however far into it somebody clicks. */
.dc-hint{
  margin-left:auto;flex:0 0 auto;padding:2px 8px;border-radius:999px;
  border:1px solid var(--rule-2);color:var(--ink-4);font-size:10.5px;letter-spacing:.03em;
}
.dc-panel{padding:14px 16px 18px;display:grid;gap:14px}
.dc-empty{
  display:grid;gap:8px;padding:26px 20px;border:1px dashed var(--rule-2);border-radius:var(--r-panel);
  color:var(--ink-3);font-size:13px;line-height:1.55;
}
.dc-empty b{color:var(--ink);font-size:14px}
@media (max-width:820px){
  .dc-hint{display:none}
  .dc-panel{padding:12px 12px 14px}
}

/* The illustration's proof slot, drawn rather than borrowed. The images it
   used to carry were real members' screenshots taken from real listings. */
.embed-shot.placeholder{
  display:grid;place-content:center;justify-items:center;gap:4px;
  aspect-ratio:640/296;border:1px dashed var(--rule-2);border-radius:4px;
  background:var(--raise-2);text-align:center}
.embed-shot.placeholder span{color:var(--ink-3);font-size:12.5px;font-weight:600}
.embed-shot.placeholder small{color:var(--ink-4);font-size:11px}