/* Careers at GrowthMastery. Built on the house tokens (tokens.css) and the canonical header and footer (nav-unified.css).
 * The button, kicker and hero glow are the same rules the application (assets/app.css) and the homepage use. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--gm-fs-body)/1.62 var(--font);padding-top:var(--gm-nav-h)}
img{max-width:100%}
.wrap{width:min(var(--wrap),100%);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:var(--gm-tracking-display)}
.lt{font-weight:var(--gm-weight-light)}
.kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:600 12.5px/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--gm-gold-hero-kicker)}
.kicker::before{content:"";width:34px;height:1px;background:var(--gm-kicker-rule);flex:none}
.glow{background:var(--gm-hero-glow);background-size:var(--gm-hero-glow-size);-webkit-background-clip:text;background-clip:text;color:transparent;filter:var(--gm-hero-glow-shadow);animation:shimmer 9s linear infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-120% 0}}
.lead{color:var(--ink2);font-size:var(--gm-fs-lead-hero);line-height:1.6;margin:0}

/* the house button (VTS .btn/.btn-green, unchanged) */
.btn{--h:58px;--chip:42px;position:relative;display:inline-flex;align-items:center;gap:18px;height:var(--h);padding:0 calc((var(--h) - var(--chip)) / 2) 0 30px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:transform .3s var(--gm-ease),box-shadow .3s var(--gm-ease),background .3s}
.btn::after{content:"";flex:none;width:var(--chip);height:var(--chip);border-radius:50%;background:var(--chip-arrow) center/16px no-repeat,var(--chip-bg);transition:transform .35s var(--gm-ease)}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:translateX(4px)}
.btn-green{--chip-bg:var(--gm-chip-gold);--chip-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2B1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");color:var(--bg);background:var(--green);box-shadow:var(--gm-shadow-button)}
.btn-green:hover{background:var(--green2)}
.btn:focus-visible,summary:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.hero-note{font-size:13.5px;line-height:1.55;color:var(--ink3);margin:12px 0 0}

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--gm-ivory);padding:var(--gm-hero-pad-top) 0 clamp(56px,6vw,84px)}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;border-radius:50%}
.hero::before{width:780px;height:780px;right:-260px;top:-300px;background:var(--gm-hero-wash-gold)}
.hero::after{width:700px;height:700px;left:-320px;bottom:-360px;background:var(--gm-hero-wash-green)}
.hero-in{position:relative;z-index:1}
.hero h1{max-width:1120px}
.hero h1{font-size:clamp(40px,6vw,78px);line-height:1.03;letter-spacing:var(--gm-tracking-hero);font-weight:var(--gm-weight-bold);margin:0 0 22px;text-wrap:balance;color:var(--gm-ink-hero)}
.hero h1 .lt{display:block;font-weight:600}
.hero h1 .glow{display:inline}
.hero .lead{max-width:36em;color:var(--gm-ink-body);font-size:clamp(18px,1.6vw,21px)}
.frame{max-width:44em;margin:22px 0 28px;padding:14px 18px 14px 20px;border-left:3px solid var(--gold);background:rgba(255,255,255,.7);border-radius:0 14px 14px 0;font-size:15.5px;line-height:1.6;color:var(--gm-ink-body)}
.frame b{color:var(--gm-forest);font-weight:600}
.frame .fl{display:block;margin-bottom:2px}
.seat .dt p+p{margin-top:10px}

/* ── board ──────────────────────────────────────────── */
.board{padding:clamp(64px,8vw,110px) 0;background:var(--bg)}
.sec-head{max-width:var(--gm-head-max);margin:0 0 clamp(30px,4vw,50px)}
.sec-head h2{text-wrap:balance;font-size:clamp(32px,4.2vw,54px);line-height:1.08;font-weight:600;margin:0 0 16px}
.sec-head h2 .lt{display:block}
.sec-head .lead{max-width:var(--gm-lead-max)}
.group{margin:0 0 40px}
.group:last-child{margin-bottom:0}
.group h3{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.group h3::after{content:"";flex:1;height:1px;background:var(--line)}
.group h3 small{font:500 13px var(--font);letter-spacing:0;text-transform:none;color:var(--ink3)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.seat{background:var(--panel);border:1px solid var(--line);border-radius:var(--gm-r-card);box-shadow:var(--gm-shadow-card);transition:box-shadow .3s var(--gm-ease),border-color .3s}
.seat[open]{border-color:rgba(216,161,59,.55);box-shadow:var(--shadow-sm)}
.seat summary{list-style:none;cursor:pointer;padding:22px 24px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.seat .more{margin-top:auto!important}
.seat summary .sm{margin-bottom:4px}
.seat summary::-webkit-details-marker{display:none}
.seat .st{justify-self:start;font:600 11.5px/1 var(--display);letter-spacing:.06em;padding:7px 11px;border-radius:999px;background:var(--emerald-tint);color:var(--gm-forest)}
.seat.later .st{background:var(--amber-tint);color:var(--gold-text)}
.seat .nm{font:600 clamp(19px,1.7vw,22px)/1.25 var(--display);color:var(--ink);letter-spacing:-.01em}
.seat .sm{color:var(--ink2);font-size:15.5px;line-height:1.55;margin:0}
.seat .more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font:600 13px var(--display);letter-spacing:.04em;color:var(--gm-leaf)}
.seat .more::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.seat[open] .more::after{transform:rotate(-135deg) translateY(-2px)}
.seat .more .o{display:none}.seat[open] .more .c{display:none}.seat[open] .more .o{display:inline}
.seat .dt{padding:0 24px 24px;border-top:1px solid var(--line);margin:0 0 0}
.seat .dt h4{font:600 12px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin:20px 0 8px}
.seat .dt p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.6}
.seat .dt ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.seat .dt li{position:relative;padding-left:28px;color:var(--ink2);font-size:15px;line-height:1.55}
.seat .dt li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--emerald-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.seat .dt .btn{margin-top:22px;--h:52px;--chip:38px}
.loading,.empty-note{color:var(--ink3);margin:0}
.empty{background:var(--panel);border:1px solid var(--line);border-radius:var(--gm-r-card);padding:30px 28px;max-width:720px}
.empty h3{font-size:24px;font-weight:600;margin:0 0 10px}
.empty p{margin:0;color:var(--ink2)}

/* ── final call ─────────────────────────────────────── */
.closer{position:relative;overflow:hidden;background:var(--gm-band-dark);color:var(--gm-warm-on-dark);padding:var(--gm-band-pad) 0}
.closer::before{content:"";position:absolute;width:900px;height:900px;left:50%;top:-520px;transform:translateX(-50%);background:var(--gm-band-dark-glow);pointer-events:none}
.closer-in{position:relative;text-align:center;max-width:860px}
.closer .kicker{justify-content:center;color:var(--gold-soft)}
.closer .kicker::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.closer h2{text-wrap:balance;color:#fff;font-size:clamp(32px,4.2vw,54px);line-height:1.08;font-weight:600;margin:0 0 18px}
.closer h2 .lt{display:block}
.closer .lead{color:var(--gm-warm-on-dark);margin:0 auto 30px;max-width:36em}
.closer .btn-green{--chip-bg:var(--green);--chip-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0C36A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");color:var(--gold-ink);background:var(--gm-pill-gold)}
.closer .btn-green:hover{background:var(--gm-pill-gold-hover)}
.closer .hero-note{color:rgba(237,230,210,.78)}

/* wider screens: a department fills its row (one, two or three cards), and an opened card takes the whole row with its
   detail in columns, so no row is left with an empty slot or a long thin column beside white space (checklist L2, L3, V15) */
@media (min-width:861px){
  .cards{grid-auto-flow:row dense}
  .cards[data-n="1"]{grid-template-columns:1fr}
  .cards[data-n="1"] .seat .sm{max-width:44em}
  .seat[open]{grid-column:1/-1}
  .seat[open] .sm{max-width:44em}
  .seat .dt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
  .seat .dt[data-n="1"]{grid-template-columns:minmax(0,44em)}
  .seat .dt .blk:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:1100px){
  .cards[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .seat .dt[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .seat .dt[data-n="3"] .blk:last-child:nth-child(odd){grid-column:auto}
}
@media (max-width:860px){
  .cards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hero{padding-top:26px}
  .hero h1{font-size:clamp(36px,10.4vw,44px);margin-bottom:16px}
  .hero .lead{font-size:17px;line-height:1.5}
  .frame{font-size:14.5px;line-height:1.5;margin:16px 0 20px;padding:12px 14px 12px 16px}
  .kicker{letter-spacing:.1em;font-size:12px;gap:10px;margin-bottom:14px}
  .kicker::before{width:22px}
  .hero .btn,.closer .btn{width:100%;justify-content:space-between;--h:54px;--chip:40px;padding-left:24px}
  .seat summary{padding:18px 18px 16px}
  .seat .dt{padding:0 18px 20px}
  .seat .dt .btn{width:100%;justify-content:space-between;padding-left:22px;letter-spacing:.1em}
}
@media (max-width:380px){
  .hero{padding-top:20px}
  .hero h1{font-size:34px}
  .hero .lead{font-size:16px}
  .frame{font-size:14px;margin:14px 0 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.glow{filter:var(--gm-hero-glow-shadow-still)}}
/* Joe's basics line under the hero button (Nov 11 2026): his own words on how the team works and how pay is shared. */
.basics{max-width:40em;margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(14,59,42,.10);font-size:14.5px;line-height:1.6;color:var(--ink2)}