/* Explore page (card 29A-21, GT-Alpha). Hero = the demo overview; below it the existing Free Apps and Free SaaS list; then the cross-link strip.
   Lines are the accent blue (#2A4BB0 light, #8FA6EE dark) through --accent; orange only on buttons. */
.ex-hero{background:var(--surface-2);padding-block:40px 48px;border-bottom:1px solid var(--line)}
.ex-top{margin-bottom:36px}
.ex-copy h1{font-size:clamp(2.75rem,5vw,3.75rem);line-height:1.05}
.ex-actions{margin:28px 0 0}
.ex-actions .btn{font-size:20px;min-height:56px;padding-inline:30px}
.ex-shot{margin:44px 0 0}
.ex-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:var(--surface)}
@media (max-width:900px){.ex-shot img{width:auto;max-width:100%;margin-inline:auto}}
.ex-shot figcaption{margin-top:10px;font-size:15px;font-weight:700;color:var(--text)}
.ex-shot figcaption span{font-weight:400;color:var(--muted)}

.ex-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;align-items:start}
.ex-group h3{font-size:20px;line-height:1.2;padding-bottom:8px;margin:0 0 10px;border-bottom:2px solid var(--accent)}
.ex-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ex-app{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:9px 14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;line-height:1.3}
.ex-name{font-size:17px;font-weight:700;grid-column:1;overflow-wrap:anywhere}
.ex-by{grid-column:1;grid-row:2;font-size:14px;color:var(--muted)}
.ex-status{grid-column:2;grid-row:1 / span 2;align-self:center;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}
.ex-status::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--accent);flex:0 0 auto}

.ex-free{padding-block:56px}
.ex-free .free-rail h2{margin-bottom:18px}
.ex-free .rail-l{column-gap:48px}
.ex-free .dl-tools{margin-bottom:var(--s2)}
.ex-free .dl-group > h3{font-size:22px}
.ex-free .dl-n{font-size:14px}

.ex-end{padding-block:56px}
.ex-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ex-card{display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;text-decoration:none;color:var(--text);transition:border-color .2s ease,transform .2s ease}
.ex-card:hover{color:var(--text);border-color:var(--accent);transform:translateY(-2px)}
.ex-kicker{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text)}
.ex-card-h{font-size:22px;line-height:1.2;font-weight:700}
.ex-card-p{font-size:16px;line-height:1.45;color:var(--muted)}
.ex-wa{margin:32px 0 0;max-width:none}

@media (min-width:1360px){
  /* wider than the text column so the app's own 14 px text shows at 12 px or more (1280 / 1440 x 14 = 12.4 px) */
  .ex-shot{width:1280px;margin-left:50%;transform:translateX(-50%)}
}
@media (max-width:1000px){
  .ex-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-more{grid-template-columns:1fr}
  .ex-card-p{max-width:none}
}
@media (max-width:760px){
  .ex-hero{padding-block:28px 36px}
  .ex-top{margin-bottom:28px}
  .ex-shot{margin-top:32px}
  .ex-actions{margin-top:20px}
  .ex-actions .btn{font-size:18px;min-height:52px;padding-inline:22px}
  .ex-groups{grid-template-columns:1fr;gap:22px}
  .ex-free,.ex-end{padding-block:40px}
  .ex-wa .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.ex-card{transition:none}.ex-card:hover{transform:none}}
.ex-try{font-size:19px;line-height:1.5;margin:16px 0 0}