/* Gax shop example pages — content rules only.
   The shell (container width, header, footer, type scale, buttons, colour and
   background) comes from the shared /style.css. Nothing here redefines it. */

/* In-page section links, kept out of the global header. */
.subnav{display:flex;flex-wrap:wrap;gap:6px 24px;padding:16px 0;border-bottom:1px solid #ccd1cc;font-size:14px}
.subnav a{text-decoration:none}
.subnav a:hover{text-decoration:underline}

/* Hero: example copy beside the real shop screenshot. */
.example-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding:44px 0 60px}
.example-hero h1{font-size:clamp(45px,7vw,83px);margin:22px 0 24px}
.lede{margin:0 0 26px;font-size:20px;line-height:1.45;letter-spacing:-.02em;max-width:46ch;color:#4f584f}
.hero-cta{margin:0;max-width:none}

/* The shop screenshot. */
.card{margin:0;border:1px solid #ccd1cc;background:#fff}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border-bottom:1px solid #ccd1cc}
.card-head b{font-size:15px}
.card-head span{font:700 11px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#566055}
.shot{display:block;padding:16px}
.shot img{display:block;width:100%;height:auto;border:1px solid #ccd1cc}
.shot:hover img{border-color:#174bef}
.card-foot{padding:12px 16px;border-top:1px solid #ccd1cc;font-size:13px;color:#566055}
.card-foot a{font-weight:700}

/* Sections. */
.section-head{max-width:62ch;padding:46px 0 0}
.section-head h2{margin:0 0 12px;font-size:clamp(25px,3.2vw,38px);letter-spacing:-.035em}

.flow{list-style:none;margin:28px 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:44px}
.flow li{border-top:1px solid #ccd1cc;padding:20px 0}
.flow b{display:block;font:700 11px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#174bef;margin-bottom:11px}
.flow h3{margin:0 0 8px;font-size:19px;letter-spacing:-.02em}
.flow p{margin:0;font-size:16px}

.benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;padding:32px 0 20px}
.benefits article{border-top:1px solid #ccd1cc;padding-top:18px}
.benefits h3{margin:0 0 10px}
.benefits p{margin:0;font-size:16px}

.close{margin:46px 0 60px;padding:45px 0 0;border-top:1px solid #bbc3bb;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:35px;align-items:center}
.close h2{max-width:20ch;margin:0 0 12px}
.close p{margin:0;max-width:52ch}
.close-cta{margin:0}

@media(max-width:860px){
  .example-hero{grid-template-columns:minmax(0,1fr);gap:34px;padding:34px 0 44px}
  .flow,.benefits{grid-template-columns:minmax(0,1fr);column-gap:0}
  .benefits{gap:26px;padding:26px 0}
  .close{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:32px}
}