/* Notebook of a COO, the rebuilt site: what every page shares. Tokens, type, the pill nav,
   the menu, buttons, cards and the footer. The home page adds home.css, every other page
   pages.css. Direction C (JT, Sep 18 2026: "lets go with the dark color but the look of B"):
   black ground, white ink, gold accent, Figtree only, sentence case headlines set tight.
   Without JavaScript, or with reduced motion on, every page is a complete static layout;
   core.js adds html.motion and the scroll-driven layer on top of it. */

:root{
  --ground:#0A0A0A; --surface:#131217; --surface-2:#1A1920; --line:rgba(255,255,255,0.10);
  --ink:#FFFFFF; --muted:rgba(255,255,255,0.68); --faint:rgba(255,255,255,0.44);
  --accent:#E2C878; --accent-2:#CBA85A; --hero-accent:#E2C878;
  --glass-bg:rgba(14,14,14,0.42); --glass-line:rgba(255,255,255,0.16); --glass-ink:#FFFFFF;
  --gold-grad:linear-gradient(180deg,#E6CB6C 0%,#C9A84C 100%); --gold-flat:#D6B95E; --on-gold:#0A0A0A;
  --glow:rgba(226,200,120,0.34);
  --font:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:28px; --card-radius:26px; --gap:18px;
  --pad:clamp(20px,4vw,56px); --max:1328px;
  --section:clamp(96px,11vw,168px);
  --cap-w:clamp(132px,16vw,236px); --cap-h:calc(var(--cap-w) * 0.64);
}

*{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,h4,h5,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}
em{font-style:normal;color:var(--accent)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--gold-flat);color:var(--on-gold);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* shared pieces */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:var(--section) 0}
.eyebrow{font:600 13px/1 var(--font);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2,.h2{font-weight:700;font-size:clamp(36px,4.6vw,68px);line-height:1.02;letter-spacing:-0.045em;text-wrap:balance}
.sec-head .sub{margin-top:14px;max-width:600px;font-size:18px;color:var(--muted);text-wrap:pretty}
.link{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--font);color:var(--accent);text-decoration:none;white-space:nowrap}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 30px;border-radius:999px;background-color:var(--gold-flat);background-image:var(--gold-grad);color:var(--on-gold);font:700 16px/1 var(--font);white-space:nowrap;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,0.22);transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
/* hover turns the button to glass, as the reference's buttons do */
.btn:hover{background-image:none;background-color:rgba(226,200,120,0.14);color:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn svg{flex:none}
.btn-ghost{background:rgba(255,255,255,0.10);border:1.5px solid rgba(255,255,255,0.55);color:#FFFFFF;box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn-ghost:hover{background-color:#FFFFFF;color:var(--ground);box-shadow:none}
.btn-lg{height:64px;padding:0 38px;font-size:18px}
.card{position:relative;overflow:hidden;border-radius:var(--card-radius);background:var(--surface);border:1px solid var(--line)}
.glow::before{content:"";position:absolute;left:-10%;right:-10%;top:-40%;height:85%;background:radial-gradient(ellipse at 50% 30%,var(--glow) 0%,rgba(0,0,0,0) 68%);pointer-events:none}

/* floating pill nav: Menu, logo, the live header's Log In and Take The Assessment.
   It hides while you scroll down and comes back the moment you scroll up (as the reference does). */
.pillnav{position:fixed;z-index:60;top:24px;left:0;right:0;padding:0 calc(12px + var(--pad));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none;transition:transform .4s ease,opacity .3s ease}
.pillnav.is-hidden{transform:translateY(-140%);opacity:0}
.pillnav:focus-within{transform:none;opacity:1}
.pillnav>*{pointer-events:auto}
.pill,.logo{display:inline-flex;align-items:center;height:44px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.pill{gap:10px;padding:0 18px;color:var(--glass-ink);font:600 15px/1 var(--font);white-space:nowrap;text-decoration:none;cursor:pointer}
.pill-menu{justify-self:start}
.pill-cta{background-color:var(--gold-flat);background-image:var(--gold-grad);border-color:transparent;color:var(--on-gold)}
.nav-end{justify-self:end;display:flex;gap:10px}
.logo{justify-self:center;padding:0 18px}
.logo img{height:19px;width:auto}

/* the full-screen menu: every link the live header has */
.menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:rgba(10,10,10,0.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:24px calc(12px + var(--pad)) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.menu.is-open,.menu:target{opacity:1;visibility:visible;transition:opacity .3s ease}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-close{width:44px;height:44px;padding:0;justify-content:center}
.menu-body{flex:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;max-width:var(--max);width:100%;margin:48px auto 0}
.menu-main a{display:block;width:fit-content;padding:6px 0;font-weight:700;font-size:clamp(38px,5.4vw,76px);line-height:1.02;letter-spacing:-0.045em;color:var(--ink);text-decoration:none;transition:color .2s ease}
.menu-main a:hover{color:var(--accent)}
.menu-side{display:flex;flex-direction:column;gap:26px}
.menu-group-label{font:600 13px/1 var(--font);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
/* the text links only: a bare `.menu-side a` also caught the two buttons below and blew the
   gold pill's label up to 22px white text spilling out of it (live Sep 18, JT's screenshot) */
.menu-side > div:not(.menu-actions) a{display:block;width:fit-content;padding:6px 0;font-size:22px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);text-decoration:none}
.menu-side > div:not(.menu-actions) a:hover{color:var(--accent)}
.menu-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* the two menu buttons are the same pills as the nav: Log In glass, Take The Assessment gold */
.menu-actions .login,.menu-actions .btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--font);white-space:nowrap;text-decoration:none;box-shadow:none}
.menu-actions .login{border:1px solid var(--glass-line);background:var(--glass-bg);color:var(--glass-ink)}
.menu-actions .btn{border:1px solid transparent;background-color:var(--gold-flat);background-image:var(--gold-grad);color:var(--on-gold)}

/* the announcement pill at the top of the first frame (the live pages' top bar) */
/* centred by margin, not left:50%: an absolute box at left:50% may only use half the width and wrapped at 1024 */
.announce{position:absolute;z-index:3;top:84px;left:24px;right:24px;margin:0 auto;width:fit-content;max-width:calc(100% - 48px);padding:10px 18px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:rgba(255,255,255,0.86);font-size:14px;line-height:1.35;text-align:center;text-wrap:balance}
.announce a{color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap}
.announce a:hover{text-decoration:underline;text-underline-offset:3px}

/* footer */
.foot{border-top:1px solid var(--line);padding:clamp(56px,6vw,88px) 0 40px}
.foot-top{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) minmax(max-content,1.2fr);gap:40px}
.foot li a{overflow-wrap:anywhere}
.foot-logo img{height:26px;width:auto}
.foot-about{margin-top:18px;max-width:440px;font-size:15px;line-height:1.6;color:var(--muted)}
.foot h5{font:600 13px/1 var(--font);letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.foot li a{display:inline-block;padding:5px 0;font-size:15px;color:var(--muted);text-decoration:none}
.foot li a:hover{color:var(--ink)}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--faint)}
.foot-bottom a{color:var(--faint)}
.founder{margin-top:14px;font-size:14px;color:var(--faint)}
.founder a{color:var(--muted)}
.foot-social{display:flex;gap:10px;align-items:center}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:color .2s ease,border-color .2s ease}
.foot-social a:hover{color:var(--ink);border-color:var(--accent-2)}

@media (max-width: 1200px){
  /* the footer's brand goes on top so the contact column has room for the email address */
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width: 1000px){
  .pill-login{display:none}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
  .menu-body{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width: 760px){
  /* phones: Menu and the logo only, as on the live site and the reference */
  .pillnav{top:16px;padding:0 16px;grid-template-columns:1fr auto}
  .nav-end{display:none}
  .pill,.logo{height:40px}
  .pill{gap:8px;padding:0 14px;font-size:14px}
  .logo{justify-self:end;padding:0 14px}
  .logo img{height:15px}
  .menu{padding:16px 16px 32px}
  .announce{top:70px;border-radius:18px;font-size:13px;padding:9px 14px}
  .btn{height:50px;padding:0 22px;font-size:15px}
  .btn-lg{height:56px;padding:0 26px;font-size:16px}
  .foot-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot-top > div:last-child{grid-column:1 / -1}   /* the contact email gets the full width */
}