/* The landing page (condorscore.com). Colours are roles from tokens.css only; sizes build on the tokens. Phone first, two columns from 860px. */
.landing{display:flex;flex-direction:column}
.landing-wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 var(--cs-space-m)}
.landing h2{font-size:calc(var(--cs-type-display-size) * .82);font-weight:var(--cs-type-display-weight);letter-spacing:var(--cs-type-display-tracking);line-height:1.12;text-wrap:balance}
.landing p{margin:0}

/* Hero: the green band, the headline, the stores, and the Board rising out of the bottom edge. */
.landing-hero{background:var(--cs-brand-band);color:var(--cs-brand-on-band);padding-top:var(--cs-space-l);overflow:hidden}
.landing-hero .brand{display:flex;align-items:center;gap:var(--cs-space-xs);font-family:Sora,sans-serif;font-weight:700;font-size:var(--cs-type-label-size);letter-spacing:.1em;color:var(--cs-brand-mark)}
.landing-hero .brand img{width:calc(var(--cs-size-icon-medium) * 1.4);height:calc(var(--cs-size-icon-medium) * 1.4)}
.landing-hero-grid{display:grid;gap:var(--cs-space-xxl);margin-top:calc(var(--cs-space-xxl) * 1.5)}
.landing-hero h1{font-size:calc(var(--cs-type-display-size) * 1.15);font-weight:var(--cs-type-display-weight);letter-spacing:var(--cs-type-display-tracking);line-height:1.06;text-wrap:balance}
.landing-lede{margin-top:var(--cs-space-m) !important;max-width:30em;font-size:calc(var(--cs-type-body-size) + 2px);line-height:1.5;opacity:.85}
.landing-hero-shot{align-self:end;justify-self:center;width:100%;max-width:300px;overflow:hidden;
  border:var(--cs-size-hairline) solid var(--cs-brand-mark);border-bottom:0;border-radius:var(--cs-radius-large) var(--cs-radius-large) 0 0;
  /* The crop ends just above a row divider of the 1080 px wide shot, so no row is cut in half: four rows on a phone, five on a desktop. */
  aspect-ratio:1080/1130}
.landing-hero-shot img{display:block;width:100%;height:auto}

/* Store buttons: cream cut corners on the green, the store's name under a small lead-in. */
.landing-stores{display:flex;flex-wrap:wrap;gap:var(--cs-space-s);margin-top:var(--cs-space-xl)}
.landing-store{flex:1 1 140px;max-width:200px;flex-direction:column;align-items:flex-start;padding:var(--cs-space-xs) var(--cs-space-l);line-height:1.2}
.landing-store-small{font-size:var(--cs-type-overline-size);font-weight:var(--cs-type-body-weight);opacity:.75}
.landing-store-name{font-size:calc(var(--cs-type-body-size) + 2px)}

/* Three promises, set like a club's rules: one line each, ruled off. */
.landing-promises ul{list-style:none;margin:0 auto;padding-top:var(--cs-space-xl);padding-bottom:var(--cs-space-xl)}
.landing-promises li{padding:var(--cs-space-m) 0;border-top:var(--cs-size-hairline) solid var(--cs-outline);font-family:Sora,sans-serif;font-weight:700;
  font-size:var(--cs-type-title-size);letter-spacing:var(--cs-type-title-tracking);line-height:1.3;color:var(--cs-on-background)}
.landing-promises li:first-child{border-top:0}

/* Features: what it does, then the screens that do it. */
.landing-feature{padding:var(--cs-space-xxl) 0;border-top:var(--cs-size-hairline) solid var(--cs-outline)}
.landing-feature-grid{display:grid;gap:var(--cs-space-xl);align-items:center}
.landing-feature .overline{color:var(--cs-primary-text)}
.landing-feature h2{margin-top:var(--cs-space-xs)}
.landing-feature-text p:not(.overline){margin-top:var(--cs-space-s);max-width:30em;font-size:calc(var(--cs-type-body-size) + 1px);line-height:1.6;color:var(--cs-on-surface-muted)}
.landing-feature-text .landing-feature-closing{color:var(--cs-on-background);font-weight:var(--cs-type-body-strong-weight)}
.landing-shots{display:flex;align-items:flex-start;justify-content:center;gap:var(--cs-space-s)}
.landing-shots figure{margin:0;flex:1 1 0;min-width:0;max-width:260px}
.landing-shots.single figure{max-width:260px}
.landing-shot{display:block;width:100%;height:auto;background:var(--cs-surface);border:var(--cs-size-hairline) solid var(--cs-outline);border-radius:var(--cs-radius-large)}
/* The link step, then what it read. On a phone one above the other, so the card's numbers stay readable. */
.landing-shots.pair{flex-direction:column;align-items:center;gap:var(--cs-space-l)}
.landing-shots.pair figure{flex:none;width:100%;max-width:320px}

/* Closing band: the one octagon, gold with the condor cut from it, as on the winner's badge. */
.landing-closing{background:var(--cs-brand-band);color:var(--cs-brand-on-band);padding:calc(var(--cs-space-xxl) * 1.5) 0 var(--cs-space-xxl);text-align:center}
.landing-closing .landing-wrap{display:flex;flex-direction:column;align-items:center}
.landing-closing h2{max-width:16em;margin-top:var(--cs-space-l)}
.landing-closing .landing-stores{width:100%;justify-content:center}
.landing-badge{width:var(--cs-size-mark);height:var(--cs-size-mark);background:var(--cs-brand-mark);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  mask:url(/web/condor.svg) center/62% no-repeat exclude,linear-gradient(currentColor 0 0)}

@media (min-width:860px){
  .landing-wrap{padding:0 var(--cs-space-xxl)}
  .landing h2{font-size:calc(var(--cs-type-display-size) * 1.05)}
  .landing-hero{padding-top:var(--cs-space-xl)}
  .landing-hero-grid{grid-template-columns:1.15fr .85fr;align-items:end;margin-top:var(--cs-space-xxl)}
  .landing-hero-text{padding-bottom:calc(var(--cs-space-xxl) * 2.5)}
  .landing-hero h1{font-size:calc(var(--cs-type-display-size) * 1.7)}
  .landing-hero-shot{max-width:320px;aspect-ratio:1080/1300}
  .landing-promises ul{display:grid;grid-template-columns:repeat(3,1fr);padding-top:calc(var(--cs-space-xxl) * 1.5);padding-bottom:calc(var(--cs-space-xxl) * 1.5)}
  .landing-promises li{padding:0 var(--cs-space-xl);border-top:0;border-left:var(--cs-size-hairline) solid var(--cs-outline)}
  .landing-promises li:first-child{padding-left:0;border-left:0}
  .landing-feature{padding:calc(var(--cs-space-xxl) * 2) 0}
  .landing-feature-grid{grid-template-columns:1fr 1fr;gap:calc(var(--cs-space-xxl) * 2)}
  .landing-feature.flip .landing-feature-text{order:2}
  /* Side by side on a desktop, the second screen a step lower, as the next thing. */
  .landing-shots.pair{flex-direction:row;align-items:flex-start;gap:var(--cs-space-s)}
  .landing-shots.pair figure{flex:1 1 0;width:auto;max-width:260px}
  .landing-shots.pair figure+figure{margin-top:var(--cs-space-xxl)}
  .landing-closing{padding:calc(var(--cs-space-xxl) * 2.5) 0 calc(var(--cs-space-xxl) * 1.5)}
}