/* GROUPTRACK-SITE-2026-09-21 v1
   Palette: the logo's own two colours (Group orange, Track sky) over the
   slate of the app's panels, with canyon sand for the contour motif. */
:root{
  --ink:#132029; --ink2:#1A2935; --line:#2A3C4A;
  --sky:#4AB8E8; --orange:#F39A1E; --sand:#D8C19C;
  --paper:#F1F3EF; --paper-line:#D6DBD5;
  --text:#E6ECF1; --muted:#9DB0BF; --dark-text:#1B2731; --dark-muted:#52616D;
  --wide:1180px; --read:640px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Barlow',system-ui,sans-serif;background:var(--ink);color:var(--text);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--sky)}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:'Barlow Condensed',sans-serif;line-height:1.05;font-weight:800;letter-spacing:.2px}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 28px}
.read{max-width:var(--read)}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(19,32,41,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:27px;text-decoration:none;letter-spacing:.3px;flex-shrink:0}
.logo .g{color:var(--orange)} .logo .t{color:var(--sky)}
.navlinks{display:flex;gap:24px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:500;font-size:16px;white-space:nowrap}
.navlinks a:hover{color:var(--text)}
.btn{display:inline-block;background:var(--orange);color:#1a1206;text-decoration:none;
  font-weight:600;font-size:16px;padding:9px 16px;border-radius:6px;white-space:nowrap}
.btn:hover{background:#FFAC36}

/* HERO — words on the slate, then the lineup unobstructed */
.hero{background:var(--ink);padding-top:52px}
.hero .wrap{padding-bottom:34px}
.hero h1{font-size:clamp(44px,6.2vw,80px);max-width:17ch;color:#fff}
.hero p{font-size:clamp(18px,2vw,21px);max-width:36em;margin:16px 0 22px;color:#C9D6E0}
.play img{height:62px;width:auto;margin-left:-9px}
.hero .fine{font-size:15px;color:var(--muted);margin:10px 0 0}
.hero-photo{position:relative}
.hero-photo img{width:100%;height:clamp(260px,42vw,600px);object-fit:cover;object-position:center 62%}
.hero-photo::before{content:"";position:absolute;inset:0 0 auto 0;height:90px;
  background:linear-gradient(180deg,var(--ink),rgba(19,32,41,0));pointer-events:none}

/* SECTIONS */
section{padding:104px 0}
section h2{font-size:clamp(36px,4.6vw,58px);margin-bottom:18px}
section .lead{font-size:20px;color:var(--muted);margin-bottom:12px}
.light{background:var(--paper);color:var(--dark-text)}
.light .lead,.light p.sub{color:var(--dark-muted)}
.light a{color:#1275A8}
.more{display:inline-block;margin-top:14px;font-weight:600;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}

/* screenshots */
.shot{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0c151b}
.light .shot{border-color:#C2C9C2;box-shadow:0 12px 32px rgba(27,39,49,.14)}
figure figcaption{font-size:15px;color:var(--muted);margin-top:10px;line-height:1.4}
.light figure figcaption{color:var(--dark-muted)}

/* PLANNER — the one bold moment: contour lines behind a six-step run */
#planner{background:var(--ink) url('img/topo.svg') center/cover no-repeat;border-top:1px solid var(--line)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:52px;counter-reset:step}
.steps li{counter-increment:step}
.steps .n{margin-bottom:14px}
.steps .n::before{content:counter(step);display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:44px;line-height:1;color:var(--orange);margin-bottom:4px}
.steps h3{font-size:22px;font-weight:700;line-height:1.1;min-height:2.2em}
.steps p{font-size:15px;color:var(--muted);margin-top:10px;line-height:1.45}
.after{display:grid;grid-template-columns:1fr 300px;gap:56px;margin-top:72px;align-items:center;max-width:980px}
.after p{color:var(--muted)}
.after p+p{margin-top:12px}
.subhead{font-size:34px;margin-bottom:14px}
.after figure{max-width:300px}

/* TRAILS */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pair figure:last-child{margin-top:48px}
blockquote{border-left:4px solid var(--orange);padding:4px 0 4px 20px;margin:26px 0;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:27px;line-height:1.2;color:var(--dark-text)}
.timeline{list-style:none;margin-top:30px;border-top:1px solid var(--paper-line)}
.timeline li{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--paper-line);align-items:baseline}
.timeline b{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:#C66F00;line-height:1}
.timeline span{color:var(--dark-muted)}

/* GROUP */
#group{background:var(--ink2);border-top:1px solid var(--line)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.readout div{padding:18px 20px;border-right:1px solid var(--line)}
.readout div:last-child{border-right:0}
.readout dt{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;color:var(--sky)}
.readout dd{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.45}
.share{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;margin-top:96px;padding-top:72px;border-top:1px solid var(--line)}
.share .pair figure:last-child{margin-top:0}
.note{margin-top:22px;padding:16px 18px;border-radius:8px;background:rgba(74,184,232,.08);border:1px solid rgba(74,184,232,.28);font-size:16px;color:#C9DDE9}

/* MAPS */
#maps{border-top:1px solid var(--line)}
.maps-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:48px}
.facts{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.facts h3{font-size:24px;font-weight:700;margin-bottom:6px;color:var(--text)}
.facts p{font-size:16px;color:var(--muted)}

/* FAQ */
.faq{margin-top:40px;border-top:1px solid var(--paper-line)}
.faq details{border-bottom:1px solid var(--paper-line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:25px;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:15px;font-size:30px;font-weight:600;color:#C66F00;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
.faq .a{padding:0 0 22px;max-width:var(--read);color:var(--dark-muted)}
.faq .a p+p{margin-top:10px}

/* DOCS */
#docs{background:var(--ink2);border-top:1px solid var(--line)}
.doclist{list-style:none;margin-top:36px;border-top:1px solid var(--line)}
.doclist li{display:grid;grid-template-columns:260px 1fr auto;gap:28px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}
.doclist h3{font-size:28px;font-weight:700}
.doclist p{color:var(--muted);font-size:16px}
.doclist .size{font-size:14px;color:var(--muted);display:block;margin-top:4px}
.ghost{color:var(--text);text-decoration:none;border:1px solid var(--muted);padding:9px 16px;border-radius:6px;font-weight:600;font-size:16px;white-space:nowrap}
.ghost:hover{border-color:var(--sky);color:var(--sky)}

/* CLOSE + FOOTER */
.close{padding:88px 0;text-align:left}
.close h2{font-size:clamp(34px,4vw,50px)}
footer{border-top:1px solid var(--line);padding:36px 0 48px;font-size:14px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:24px}
footer a{color:var(--muted)} footer a:hover{color:var(--text)}
footer p+p{margin-top:6px}
.links a{margin-left:20px}

/* RESPONSIVE */
@media (max-width:1060px){
  .steps{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .split,.share,.after{grid-template-columns:1fr;gap:40px}
  .maps-grid,.trio{grid-template-columns:repeat(3,1fr)}
  .doclist li{grid-template-columns:1fr auto}
  .doclist li p{grid-column:1/-1;grid-row:2}
}
@media (max-width:720px){
  body{font-size:17px}
  section{padding:72px 0}
  .wrap{padding:0 20px}
  .navlinks{display:none}
  nav .btn{margin-left:auto}
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:10px}
  .steps li{flex:0 0 62%;scroll-snap-align:start}
  .trio,.maps-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:10px}
  .trio figure,.maps-grid figure{flex:0 0 70%;scroll-snap-align:start}
  .facts,.readout{grid-template-columns:1fr}
  .readout div{border-right:0;border-bottom:1px solid var(--line)}
  .readout div:last-child{border-bottom:0}
  .timeline li{grid-template-columns:1fr;gap:2px}
  .pair figure:last-child{margin-top:28px}
  footer .wrap{grid-template-columns:1fr}
  .links a{margin:0 18px 0 0}
}