/* 12 — Examples (owner: B1). (a) the launch film in both formats, (b) one creator's real videos with real numbers,
   (c) other niches as example graphics with their sources. Quiet: hairlines, tabular numbers, no badges, no glass on black. */
.ex{padding-top:clamp(64px,7vw,104px)}
.ex-part+.ex-part{margin-top:clamp(72px,8vw,120px)}
.ex-head{display:grid;gap:10px;max-width:760px;margin-bottom:clamp(22px,2.6vw,36px)}
.ex-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;max-width:none}
.ex-title{font-weight:600;letter-spacing:-.018em}
.ex-lead{font-size:var(--t-small);line-height:1.5;color:var(--fg-2);max-width:44em;text-wrap:pretty}
.ex-note{margin-top:14px;font-size:13px;line-height:1.45;color:var(--fg-3);max-width:36em}

/* shared screen (inherits .frame rim) */
.ex-screen video{width:100%;height:100%;object-fit:cover;background:var(--bg-1)}

/* (a) the pair: both share one height on desktop */
.ex-pair{display:flex;gap:clamp(16px,2vw,28px);align-items:flex-start}
.ex-film{margin:0;min-width:0}
.ex-film--wide{flex:1.7778 1 0}
.ex-film--vert{flex:.5625 1 0}
.ex-film--wide .ex-screen{aspect-ratio:16/9}
.ex-film--vert .ex-screen{aspect-ratio:9/16}
.ex-sound{position:absolute;left:clamp(10px,1.2vw,16px);bottom:clamp(10px,1.2vw,16px);z-index:2;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px 0 14px;border-radius:var(--r-chip);font-size:14px;font-weight:600;color:var(--fg);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08)),rgba(10,12,20,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.12);text-shadow:0 1px 8px rgba(0,0,0,.4);
  transition:background-color .16s,box-shadow .16s,transform .12s var(--e-press)}
.ex-sound:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.28)}
.ex-sound:active{transform:scale(.97)}
.ex-cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;font-weight:500;color:var(--fg-2)}
.ex-cap .tnum{color:var(--fg-3)}

/* (b) one creator's channel */
.ex-chan{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;margin-top:2px;font-size:15px;color:var(--fg-3)}
.ex-chan b{color:var(--fg-2);font-weight:600}
.ex-chan>*+*::before{content:"·";margin:0 .55em;color:var(--fg-4)}
.ex-quote{margin:0;max-width:440px;font-size:16px;line-height:1.5;color:var(--fg-2);text-wrap:pretty}
.ex-quote cite{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--fg-3)}
.ex-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.ex-card{display:flex;flex-direction:column;gap:12px;height:100%;color:inherit}
.ex-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#15171d;transition:transform .25s var(--e-press)}
.ex-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:box-shadow .25s var(--e-press)}
.ex-thumb img{width:100%;height:100%;object-fit:cover}
.ex-name{font-size:15.5px;line-height:1.35;font-weight:600;letter-spacing:-.008em;color:var(--fg);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.ex-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0;padding-top:12px;border-top:1px solid var(--line)}
.ex-stats div{display:flex;flex-direction:column-reverse;gap:1px;min-width:0}
.ex-stats dd{margin:0;font-size:20px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums lining-nums}
.ex-stats dt{font-size:12.5px;line-height:1.3;color:var(--fg-3)}
.ex-meta{margin-top:auto;padding-top:2px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--fg-2);min-height:24px}
.ex-meta svg{transition:transform .2s var(--e-press)}
@media (hover:hover) and (pointer:fine){
  a.ex-card:hover .ex-thumb{transform:translateY(-2px)}
  a.ex-card:hover .ex-thumb::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
  a.ex-card:hover .ex-meta{color:var(--fg)}
  a.ex-card:hover .ex-meta svg{transform:translate(1.5px,-1.5px)}
}
a.ex-card:focus-visible{border-radius:14px}

/* (c) other niches */
.ex-niche{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.ex-niche__text .ex-lead{margin-top:12px;font-size:var(--t-lead);line-height:1.45}
.ex-niche__media{display:grid;grid-template-columns:repeat(2,minmax(0,250px));justify-content:end;gap:clamp(16px,2vw,28px)}
.ex-g{margin:0}
.ex-g .ex-screen{aspect-ratio:9/16;border-radius:clamp(14px,1.4vw,20px)}
.ex-g figcaption{display:grid;gap:1px;margin-top:12px;font-size:14px;line-height:1.4;color:var(--fg-2)}
.ex-g figcaption b{font-weight:600;color:var(--fg)}
.ex-src{font-size:12.5px;color:var(--fg-3)}

/* tablet */
@media (max-width:980px){
  .ex-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .ex-head--row{flex-direction:column;align-items:flex-start}
  .ex-niche{grid-template-columns:minmax(0,1fr)}
  .ex-niche__media{justify-content:start}
}
/* phone */
@media (max-width:733px){
  .ex-part+.ex-part{margin-top:56px}
  .ex-pair{flex-direction:column;align-items:stretch;gap:28px}
  .ex-film--wide,.ex-film--vert{flex:none}
  .ex-film--vert{width:min(50%,200px);align-self:center}
  .ex-film--vert .ex-sound{left:50%;transform:translateX(-50%);white-space:nowrap}
  .ex-film--vert .ex-sound:active{transform:translateX(-50%) scale(.97)}
  .ex-sound{padding:0 14px 0 12px;font-size:13px}
  .ex-row{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 8px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .ex-row::-webkit-scrollbar{display:none}
  .ex-item{flex:0 0 80%;scroll-snap-align:start}
  .ex-quote{font-size:15px}
  .ex-niche__text .ex-lead{font-size:16px}
  .ex-niche__media{grid-template-columns:repeat(2,minmax(0,1fr))}
}