/* ══════════════════════════════════════════════════════════════════════
   JobTayo — guides
   Loaded AFTER legal.css and depends on its tokens (--teal, --ink, --sub,
   --line, --dk …). It adds only what the guides need on top: the card grid
   on /guides, the article meta row, and the closing call to action.
   Never redefine a legal.css token here — one source of truth.
   ══════════════════════════════════════════════════════════════════════ */

/* ── header nav (guides pages carry a real nav, unlike the legal pages) ─ */
/* Same travelling indicator as the home page, inverted for the light header.
   Geometry arrives from JS as --ix/--iw/--iy/--ih; without JS the widths stay 0
   and only the plain colour hover applies. */
.hd__nav{display:none;gap:4px;margin-inline:auto;position:relative}
@media(min-width:900px){.hd__nav{display:flex}}

/* ── mobile menu ─────────────────────────────────────────────────────
   Below 900px the nav vanished outright, leaving the header with no way
   into the site but the logo. The same <nav> reopens as a panel — a
   toggle rather than a permanent second row, so an article keeps its
   full reading height on a phone. */
.hdbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;margin-left:2px;padding:0;cursor:pointer;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:9px;
  transition:border-color .18s ease,color .18s ease}
.hdbtn:hover{border-color:var(--teal);color:var(--teal-txt)}
.hd__navlogin{display:none}
.hdbtn__bars{display:block;position:relative;width:18px;height:12px}
.hdbtn__bars i{position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:currentColor;transition:transform .2s ease,opacity .2s ease}
.hdbtn__bars i:nth-child(1){top:0}
.hdbtn__bars i:nth-child(2){top:5px}
.hdbtn__bars i:nth-child(3){top:10px}
.hd.open .hdbtn__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.hd.open .hdbtn__bars i:nth-child(2){opacity:0}
.hd.open .hdbtn__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(min-width:900px){.hdbtn{display:none}}
@media(prefers-reduced-motion:reduce){.hdbtn__bars i{transition:none}}

@media(max-width:899.98px){
  .hd.open .hd__nav{display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;left:0;right:0;top:100%;margin-inline:0;
    padding:10px var(--pad) calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.98);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(15,27,45,.10);
    max-height:calc(100dvh - 66px);overflow-y:auto;overscroll-behavior:contain}
  /* the travelling indicator is measured for a horizontal row — not this */
  .hd.open .hd__nav::before,.hd.open .hd__nav::after{display:none}
  .hd.open .hd__nav a{display:flex;align-items:center;min-height:48px;padding:0 12px;
    font-size:16px;border-radius:10px;white-space:normal}
  .hd.open .hd__nav a:hover,.hd.open .hd__nav a:focus-visible{
    background:rgba(18,24,28,.05);color:var(--ink)}
  .hd.open .hd__nav .hd__navlogin{margin-top:6px;padding-top:14px;
    border-top:1px solid var(--line);border-radius:0;color:var(--sub)}
}
.hd__nav a{position:relative;z-index:1;font-size:15px;font-weight:500;color:var(--sub);
  text-decoration:none;white-space:nowrap;padding:9px 13px;border-radius:9px;
  transition:color .2s ease}
.hd__nav a:hover,.hd__nav a:focus-visible{color:var(--ink)}
.hd__nav a[aria-current="page"]{color:var(--ink)}

.hd__nav::before,.hd__nav::after{content:"";position:absolute;pointer-events:none;opacity:0;
  left:var(--ix,0);width:var(--iw,0);
  transition:left .34s cubic-bezier(.34,1.32,.5,1),width .34s cubic-bezier(.34,1.32,.5,1),
             opacity .2s ease,transform .22s ease}
.hd__nav::before{top:var(--iy,0);height:var(--ih,0);border-radius:9px;transform:scale(.9);
  background:rgba(18,24,28,.055);box-shadow:inset 0 0 0 1px rgba(18,24,28,.05)}
.hd__nav::after{left:calc(var(--ix,0px) + 13px);width:calc(var(--iw,0px) - 26px);
  top:calc(var(--iy,0px) + var(--ih,0px) - 7px);height:2px;border-radius:2px;transform:scaleX(.3);
  background:linear-gradient(90deg,var(--teal),var(--blue))}
.hd__nav.hot::before,.hd__nav.hot::after{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .hd__nav::before,.hd__nav::after{transition:opacity .12s ease}
  .hd__nav.hot::before,.hd__nav.hot::after{transform:none}
}
.hd__cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 18px;border-radius:9px;font:600 14.5px/1 var(--sans);text-decoration:none;
  background:linear-gradient(135deg,var(--cta-1) 0%,var(--cta-2) 135%);color:#04070C;
  white-space:nowrap;transition:filter .18s}
.hd__cta:hover{filter:brightness(1.08)}

/* Log in — outlined sibling of .hd__cta, for members coming back to
   academy.jobtayo.com. Only tokens from legal.css, never redefined here. */
.hd__login{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 14px;border-radius:9px;font:600 14.5px/1 var(--sans);text-decoration:none;
  color:var(--ink);border:1px solid var(--line);background:transparent;
  white-space:nowrap;transition:border-color .18s,color .18s}
.hd__login:hover{border-color:var(--teal);color:var(--teal-txt)}
@media(max-width:520px){ .hd__login{padding:0 10px;font-size:13.5px}
                         .hd__cta{padding:0 12px;font-size:13.5px} }
/* Must sit after the .hd__login base rule above — a media query adds no
   specificity, so an earlier block would simply lose the cascade.
   logo + Log in + CTA + toggle will not fit a 375px row, so the secondary
   action moves into the menu panel rather than the CTA losing its place. */
@media(max-width:899.98px){ .hd__login{display:none} }

/* The narrowest phones still in use (320px) cannot hold the row at full size.
   Tighten the gap, the CTA and the wordmark rather than drop the CTA — this
   width overflowed before the toggle existed too. */
@media(max-width:400px){
  .hd__in{gap:10px}
  .hd{--pad:16px}
  .jt{gap:8px}
  .jt__mark{width:30px;height:30px}
  .jt__name{font-size:18px}
  .hd__cta{padding:0 10px;font-size:13px}
}

/* ── index is a card grid, not prose, so it overrides legal.css's reading
      measure (720px) and takes the full shell on both the hero and the body ─ */
.top--wide .shell,
.main--wide .shell{max-width:var(--shell)}

/* ── guide card grid ───────────────────────────────────────────────────── */
/* two per row, because each category holds exactly two guides — a third
   column would leave every row a third empty */
.cards{display:grid;gap:16px;margin-top:clamp(24px,3vw,34px)}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{display:flex;flex-direction:column;padding:22px 22px 20px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;
  transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--teal);transform:translateY(-2px)}
.card__cat{font:600 11px/1.45 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-txt);margin:0}
.card__h{font-weight:500;font-size:19.5px;line-height:1.28;letter-spacing:-.012em;
  margin:11px 0 0;color:var(--ink);text-wrap:balance}
.card__p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--sub)}
.card__m{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:13.5px;color:var(--sub);display:flex;align-items:center;gap:8px}
.card__m::after{content:"→";margin-left:auto;color:var(--teal-txt);font-size:15px}

/* group heading on the index */
.grp{margin:clamp(38px,4.4vw,56px) 0 0}
.grp:first-of-type{margin-top:0}
.grp__h{font-weight:500;font-size:clamp(20px,2.6vw,24px);letter-spacing:-.016em;margin:0;
  padding-bottom:12px;border-bottom:1px solid var(--line)}

/* ── tables ────────────────────────────────────────────────────────────
   A comparison table is the one thing in these guides wider than the
   reading measure. It scrolls inside its own box so the page body never
   scrolls sideways on a phone. */
.tbl{margin:22px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-sm)}
.tbl table{border-collapse:collapse;width:100%;min-width:460px;font-size:15.5px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;vertical-align:top;
  border-top:1px solid var(--line-soft)}
.tbl thead th{background:var(--bg);border-top:0;font-weight:600;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sub);white-space:nowrap}
.tbl tbody td{color:var(--sub)}
.tbl tbody td:first-child{color:var(--ink);font-weight:500}

/* ── article meta row ──────────────────────────────────────────────────── */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:18px 0 0;
  font-size:14.5px;color:var(--sub)}
.meta__cat{font:600 11px/1.45 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-txt)}
.meta__dot{width:3px;height:3px;border-radius:50%;background:var(--line);flex:none}

/* ── closing call to action ────────────────────────────────────────────── */
.cta{margin:clamp(48px,6vw,72px) 0 0;padding:clamp(26px,3.4vw,38px);border-radius:var(--r);
  background:var(--dk);color:var(--dk-ink)}
.cta h2{margin:0;color:#fff;font-size:clamp(21px,3vw,27px)}
.cta p{margin:14px 0 0;color:var(--dk-sub);font-size:16.5px;max-width:56ch}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cta .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:0 24px;border-radius:var(--r-sm);font:600 16px/1.2 var(--sans);text-decoration:none;
  border:1px solid transparent;transition:filter .18s,border-color .18s}
.cta .btn--brand{background:linear-gradient(135deg,var(--cta-1) 0%,var(--cta-2) 135%);color:#04070C}
.cta .btn--brand:hover{filter:brightness(1.08)}
/* the light-ground teal measures 3.85:1 on this dark card and fails AA —
   the outline button keeps white text on every dark ground */
.cta .btn--line{border-color:var(--dk-line);color:#fff}
.cta .btn--line:hover{border-color:#fff}
.cta :focus-visible{outline-color:var(--cyan)}

/* ── prev / next between guides ────────────────────────────────────────── */
.hop{display:grid;gap:12px;margin:clamp(38px,4.4vw,52px) 0 0}
@media(min-width:640px){.hop{grid-template-columns:repeat(2,1fr)}}
.hop a{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-sm);
  text-decoration:none;color:inherit;transition:border-color .18s}
.hop a:hover{border-color:var(--teal)}
.hop span{display:block;font:600 11px/1.45 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sub)}
.hop b{display:block;margin-top:6px;font-weight:500;font-size:16px;line-height:1.35;color:var(--ink)}