/* ------------------------------------------------------------------ fonts
   Self-hosted. Do not call Google Fonts. Five weights, no italics on the
   site except the two deliberate lines (the BIFKiDS note on The Coach, and
   the Magnum "it is an old project" line), which set their own face. */
@font-face{font-family:Figtree;font-weight:400;font-style:normal;font-display:swap;
  src:url(/assets/fonts/figtree-400.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:500;font-style:normal;font-display:swap;
  src:url(/assets/fonts/figtree-500.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:600;font-style:normal;font-display:swap;
  src:url(/assets/fonts/figtree-600.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:700;font-style:normal;font-display:swap;
  src:url(/assets/fonts/figtree-700.woff2) format('woff2')}
@font-face{font-family:Figtree;font-weight:800;font-style:normal;font-display:swap;
  src:url(/assets/fonts/figtree-800.woff2) format('woff2')}

/* ----------------------------------------------------------------- tokens */
:root{
  --paper:#FAF8F3;
  --ink:#101112;
  --muted:#5E6062;
  --hair:#E4E1DA;
  --yellow:#FEDB00;
  --cream:#FDF8E2;
  --creamline:#EDE3B4;
  --footground:#101112;
  --footrule:#2C2E30;
  --gutter:60px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

/* The 3px yellow band at the top of every page. */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;
  background:var(--yellow);z-index:60}

/* ------------------------------------------------------------------ layout
   The approved renders are 1280px wide with the content column running
   120px to 1160px, so the column is 1040px. This reproduces that exactly
   above 1160px and closes up below it. */
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter)}
.sect{padding-top:64px;padding-bottom:64px}
.hr{height:1px;background:var(--hair);width:100%}

/* ------------------------------------------------------------------- type */
h1{font-size:3.4rem;font-weight:800;letter-spacing:-1.5px;line-height:1.05}
h2{font-size:2.05rem;font-weight:800;letter-spacing:-.6px;line-height:1.14}
h3{font-size:1.2rem;font-weight:700;line-height:1.3}
p{font-size:1.02rem;font-weight:400;line-height:1.6;color:var(--muted);max-width:64ch}
p.big{font-size:1.18rem;font-weight:500;color:var(--ink);line-height:1.5;max-width:72ch}
/* Sentence case in the markup, uppercased here. Never shout in the string. */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--muted)}
.n{font-size:10.5px;font-weight:700;letter-spacing:1.8px;color:var(--muted);
  text-transform:uppercase}
/* Scoped longform variant. The ten behaviour pages and About only. */
.longform p{font-size:1.12rem;color:#3F4244;line-height:1.62}

/* ---------------------------------------------------------------- buttons */
.btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:2px;font-size:.95rem;
  font-weight:800;background:var(--yellow);color:var(--ink);border:0;cursor:pointer}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.alt{background:transparent;color:var(--ink);border:1.5px solid var(--ink);
  padding:11.5px 24.5px;font-weight:700}
/* Every button needs to answer the cursor. Without this the whole site reads as
   dead under the pointer, which is exactly how it felt. */
.btn{transition:background-color .12s ease,color .12s ease,border-color .12s ease}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.ink:hover{background:var(--yellow);color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.navbtn{transition:background-color .12s ease,color .12s ease}
.navbtn:hover{background:var(--ink);color:var(--yellow)}
/* on ink grounds the ink hover would vanish, so those go the other way */
.foot .btn:hover,.door .btn:hover{background:var(--paper);color:var(--ink)}
.foot .btn.alt:hover,.door .obtn:hover{background:var(--paper);color:var(--ink);
  border-color:var(--paper)}
.ctaband.yellow .btn:hover{background:var(--paper);color:var(--ink)}
.ctaband.yellow .btn.alt:hover{background:var(--ink);color:var(--paper);
  border-color:var(--ink)}

.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px}

/* ---------------------------------------------------------------- topbar
   The wordmark to nav ratio is 1.93 and it is deliberate. BetterIdeasFaster
   has no glyph, only a wordmark, so scale is the only lever the bar has. */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:30px var(--gutter) 0;max-width:1160px;margin:0 auto;gap:24px}
.mark{font-size:26px;font-weight:800;letter-spacing:-1.1px;line-height:1}
.navcta{font-size:13.5px;font-weight:600;color:var(--muted);display:flex;
  align-items:center;gap:22px}
.navcta a:hover{color:var(--ink)}
.navcta .on{color:var(--ink);font-weight:800;border-bottom:2px solid var(--yellow);
  padding-bottom:3px}
.navbtn{background:var(--yellow);color:var(--ink);padding:11px 20px;border-radius:2px;
  font-weight:800;font-size:13px}
.topbar.bare{padding-bottom:0}
.topbar.bare .n{color:#A9A296}
.navtoggle{display:none;background:transparent;border:1.5px solid var(--ink);
  border-radius:2px;padding:8px 14px;font-size:12px;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;cursor:pointer}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--footground);color:var(--paper);margin-top:56px}
.foot.nogap{margin-top:0}
.foot h2,.foot h3{color:var(--paper)}
.foot p{color:#B9B5AC}
.foot .btn.alt{color:var(--paper);border-color:var(--paper)}
.fcta{padding:48px 0;display:flex;justify-content:space-between;align-items:flex-end;
  gap:60px;flex-wrap:wrap}
.frule{height:1px;background:var(--footrule)}
.fcols{display:grid;grid-template-columns:1.25fr 1.5fr 1fr 1fr;gap:44px;padding:42px 0 40px}
.fh{font-size:10px;font-weight:800;letter-spacing:2.2px;text-transform:uppercase;
  color:#7E7A73;margin-bottom:14px}
.fl{font-size:.93rem;font-weight:500;color:#DAD6CE;line-height:2.05;display:block}
.fl:hover{color:var(--paper)}
.fl b{font-weight:800;color:#6F6B64;font-size:.78rem;letter-spacing:1px;margin-right:7px}
.fmark{font-size:22px;font-weight:800;letter-spacing:-.95px;line-height:1;color:var(--paper)}
.fsub{font-size:.9rem;color:#8E8A83;line-height:1.55;margin-top:12px;max-width:30ch}
.fbeh{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.fbot{display:flex;justify-content:space-between;gap:40px;padding:22px 0 30px;
  font-size:.82rem;color:#6F6B64;flex-wrap:wrap}
.fbot .r{display:flex;gap:22px}

/* The @ and the dot are drawn by CSS, so the address never exists as text in
   the markup and does not scrape. Six digit escapes: four digit ones get read
   as octal in some toolchains and ship control characters into the page. */
.fmail{font-size:.95rem;font-weight:700;color:var(--paper);margin-top:16px;
  display:inline-block;border-bottom:1.5px solid var(--yellow);padding-bottom:2px;
  direction:ltr;cursor:pointer}
.fmail i{font-style:normal}
.fmail i.at::before{content:"\000040"}
.fmail i.dot::before{content:"\00002E"}

/* Pages where the call to action would disappear into the ink footer lift it
   into a band above. Yellow on most, cream on Magnum. */
.ctaband{margin-top:44px}
.ctaband .fcta{padding:34px 0 48px}
.ctaband h2{color:var(--ink)}
.ctaband p{color:var(--muted)}
.ctaband.yellow{background:var(--yellow);margin-top:56px}
.ctaband.yellow .fcta{padding:44px 0}
.ctaband.yellow p{color:#2E2F30}
.ctaband.yellow .btn{background:var(--ink);color:var(--paper)}
.ctaband.yellow .btn.alt{background:transparent;color:var(--ink);border-color:var(--ink)}
.ctaband.cream{background:var(--cream)}
.ctaband.cream .fcta{border-top:1px solid var(--hair);padding-top:34px}

/* ----------------------------------------------------------- skip to main */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-weight:800;font-size:.9rem;z-index:70}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------ narrow view */
@media (max-width:900px){
  :root{--gutter:32px}
  h1{font-size:2.5rem;letter-spacing:-1px}
  h2{font-size:1.7rem;letter-spacing:-.4px}
  .sect{padding-top:48px;padding-bottom:48px}
  .fcols{grid-template-columns:1fr 1fr;gap:32px}
  .fcta{gap:28px}
}
/* Once buttons stack, they should be the same size. Left to themselves each
   one sizes to its own text, so "See the pricing" sat 13px wider than "Take
   the test" and the pair read as a mistake. */
@media (max-width:560px){
  .btns{width:100%}
  .btns > .btn,.btns > button.btn{display:block;width:100%;text-align:center}
  .btns{flex-direction:column;align-items:stretch;gap:10px}
}

@media (max-width:680px){
  :root{--gutter:22px}
  h1{font-size:2.1rem}
  .navcta{display:none}
  .navcta.open{display:flex;position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:14px;background:var(--paper);
    border-bottom:1px solid var(--hair);padding:20px var(--gutter) 24px;z-index:50}
  .navtoggle{display:block}
  .topbar{position:relative}
  .fcols{grid-template-columns:1fr}
  .fbot{flex-direction:column;gap:14px}
}