/* Content styles: menu, results, footer, accessibility page */

/* Hero band and capabilities: even line breaks for the new lines; the identity bar's text keeps clear of its
   arrow trail (120px wide, 16px from the right edge, shown from 921px). */
.identity-bar{text-wrap:balance}
@media(min-width:921px){.identity-bar{padding-left:156px;padding-right:156px}}
#technology .ped:nth-of-type(2){text-wrap:balance}

/* Results: three proof cards of equal weight, one row from 921px up, stacked below. */
#Partnerbrands .proof-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
#Partnerbrands .proof-cards .proof-card h3{font-size:30px;max-width:none}
@media(max-width:1100px){#Partnerbrands .proof-cards{gap:36px}#Partnerbrands .proof-cards .proof-card h3{font-size:28px}}
@media(max-width:920px){#Partnerbrands .proof-cards{grid-template-columns:1fr;gap:12px}}
@media(max-width:600px){#Partnerbrands .proof-cards .proof-card h3{font-size:27px}}

/* How we work: from 921px the two lanes sit side by side (the cream fast lane about 60%, lane 2 as text on navy);
   the "Pick your snack" menu runs full width below both. */
@media(min-width:921px){
  .lanes{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:48px;align-items:start;margin-top:34px}
  .lanes>.lane-fast,.lanes>.lane-build{margin-top:0}
  .lanes>.lane-build{padding-top:36px}
}

/* The menu: four numbered courses on a slanted Alabaster panel. Each course is centered: icon, number and name,
   then its options as label tags joined to the name by 2px navy lines. A maroon brand triangle (3 wide by 4 tall,
   turned to point the way) sits between courses. Four across from 1001px, two by two from 601px, one column
   below that. */
.menu{--gap:44px;position:relative;margin-top:44px;background:var(--cream);color:var(--navy);
  padding:36px 84px 46px 40px;clip-path:polygon(0 0,100% 0,calc(100% - 64px) 100%,0 100%)}
.menu-title{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--navy);margin-bottom:30px}
.menu-courses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:48px}
.menu-course{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.menu-icon{display:block;flex:none;width:46px;height:46px}
.menu-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px}
.menu-num{font-size:42px;font-weight:700;line-height:1;color:var(--pink-text)}
.menu-name{font-size:21px;font-weight:700;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.menu-options{list-style:none;margin:0;padding:0}
.menu-options .nowrap{white-space:nowrap}
/* Tags: a 2px navy outline round a white label, one corner cut with a short straight cut. */
.menu-tag{display:inline-block;max-width:100%;padding:2px;background:var(--navy);vertical-align:top;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.menu-tag>span{display:block;padding:7px 16px 8px 14px;background:#fff;color:var(--navy);font-size:18px;font-weight:600;line-height:1.3;
  text-wrap:balance;clip-path:polygon(0 0,100% 0,100% calc(100% - 8.83px),calc(100% - 8.83px) 100%,0 100%)}
.menu-arrow{position:absolute;width:15px;height:20px;left:calc(100% + var(--gap) / 2 - 7.5px);top:13px;transform:rotate(90deg)}
.menu-trail{left:calc(50% + 38px);top:-18px;width:110px;height:42px;color:var(--purple)}

/* The line: 2px navy, from the course name down to each tag in turn. */
.menu-options{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:14px;width:100%}
.menu-options li{position:relative;max-width:100%}
.menu-options li::before{content:"";position:absolute;left:50%;margin-left:-1px;top:-14px;height:14px;border-left:2px solid var(--navy)}

@media(max-width:1100px){
  .menu{--gap:36px;padding-right:72px;clip-path:polygon(0 0,100% 0,calc(100% - 52px) 100%,0 100%)}
  .menu-courses{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.1fr) minmax(0,.95fr)}
  .menu-trail{left:calc(50% + 34px);width:88px;height:34px;top:-12px}
}
@media(max-width:1000px){
  .menu{--gap:52px;padding:32px 64px 42px 40px;clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%)}
  .menu-courses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu-course:nth-child(2) .menu-arrow{display:none}
}
@media(max-width:600px){
  .menu{padding:26px 24px 62px;clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),0 100%)}
  .menu-title{font-size:27px;margin-bottom:24px}
  .menu-courses{grid-template-columns:minmax(0,1fr);row-gap:var(--gap)}
  .menu-arrow,.menu-course:nth-child(2) .menu-arrow{display:block;left:calc(50% - 7.5px);top:calc(100% + var(--gap) / 2 - 10px);transform:rotate(180deg)}
}

/* Footer: brand logo, the NSF logo beside its line, then the city line, copyright and Accessibility link.
   One row from 1101px; from 921px the brand sits over the NSF logo, beside the rest; stacked below that.
   The NSF logo shows exactly as supplied (no filter, shadow, crop or recolor) with clear space round it. */
footer.site .wrap{flex-wrap:nowrap;gap:32px}
.footer-nsf{display:flex;align-items:center;gap:22px;flex:0 1 auto;min-width:0}
.footer-nsf img{display:block;flex:none;height:64px;width:auto;max-width:none}
.footer-nsf small{max-width:240px}
.footer-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;min-width:0}
.footer-meta small span{white-space:nowrap}
.footer-a11y{display:inline-flex;align-items:center;min-height:24px;font-size:17.5px;color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1100px){
  footer.site .wrap{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:20px 32px}
  footer.site .wrap>.brand{grid-area:1 / 1}
  .footer-nsf{grid-area:2 / 1}
  .footer-meta{grid-area:1 / 2 / 3 / 3}
}
@media(max-width:920px){
  footer.site .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
  .footer-meta{align-items:flex-start;text-align:left}
}

/* Accessibility page: the site's section heading and reading text; the footer sits at the bottom of short screens. */
body.page-a11y{min-height:100vh;display:flex;flex-direction:column}
body.page-a11y main{flex:1 0 auto}
.a11y-page{padding:84px 0 96px;background:#fff}
.a11y-page h1{font-size:46px;font-weight:700;line-height:1.08;letter-spacing:-.025em;color:var(--navy);margin-bottom:24px}
.a11y-page p{font-size:21px;line-height:1.55;color:var(--body);max-width:720px;text-wrap:pretty}
.a11y-page p+p{margin-top:16px}
.a11y-page a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media(max-width:600px){.a11y-page{padding:56px 0 64px}.a11y-page h1{font-size:36px}.a11y-page p{font-size:19px}}

/* The line shown when JavaScript is off: white and bold on the pink section. 19px bold is large text, which needs 3:1; white on the pink is 4.46:1. */
.noscript-note{max-width:640px;margin:0 0 26px;font-size:19px;font-weight:700;line-height:1.45;color:#fff}
.noscript-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Footer links: Accessibility and Privacy on one line, wrapping on a narrow screen. */
.footer-links{display:flex;flex-wrap:wrap;gap:2px 22px}

/* Privacy page: the accessibility page's reading text, with a heading and a list or a line for each part. */
.privacy-page h2{font-size:28px;line-height:1.2;margin:48px 0 14px}
.privacy-page ul{max-width:720px;padding-left:1.15em}
.privacy-page li{font-size:21px;line-height:1.55;color:var(--body);text-wrap:pretty}
.privacy-page li+li{margin-top:10px}
@media(max-width:600px){.privacy-page h2{font-size:24px;margin-top:40px}.privacy-page li{font-size:19px}}