/* ============================================================================
   CareerGPS, shared page styles
   ----------------------------------------------------------------------------
   Loaded after css/aoi.css, which supplies the tokens and the type scale that
   both sites share. This file adds only what is specific to careergps.com.au:
   the teal accent in place of terracotta, and the handful of components its
   marketing pages use.

   Written as one file from the start, deliberately. Art of Interviews grew 43
   pages each carrying its own copy of the tokens, and the type drifted small
   and inconsistent as a result. This site does not repeat that.
   ============================================================================ */

:root {
  --bg: #FAF7F2;
  --linen: #EDE9E1;
  --card: #FFFFFF;
  --text: #2C2C2C;
  --muted: #6B6459;
  --line: #E2DDD2;
  /* Teal, not terracotta. The two products should read as siblings, not
     twins: same paper, same type, different colour of ink. */
  --accent: #1B6B5A;
  --accent-deep: #14513F;
  --accent-soft: rgba(27,107,90,.10);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 780px; }
section { padding: 84px 0; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; }
h1 { font-size: var(--fs-3xl); margin: 14px 0 20px; }
h2 { font-size: var(--fs-2xl); margin-bottom: 16px; }
h3 { font-size: var(--fs-lg); margin-bottom: 8px; }
p { color: var(--muted); }
a { color: var(--accent); }

.eyebrow {
  font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.lead { font-size: var(--fs-md); max-width: 60ch; }

/* ── BUTTONS ── */
.btn {
  display: inline-block; padding: 13px 24px; border-radius: 10px;
  font-weight: 500; text-decoration: none; font-size: var(--fs-body);
  transition: filter .15s, background .15s;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--quiet { color: var(--text); border: 1px solid var(--line); background: var(--card); }
.btn--quiet:hover { background: var(--linen); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ── LAYOUT PIECES ── */
.grid { display: grid; gap: 18px; margin-top: 36px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.card p { font-size: var(--fs-body); }
.card--accent { border-left: 3px solid var(--accent); }

.band { background: var(--linen); }
.band--accent { background: var(--accent); color: #fff; }
.band--accent h2, .band--accent h3 { color: #fff; }
.band--accent p { color: rgba(255,255,255,.86); }
.band--accent .btn--primary { background: #fff; color: var(--accent); }
.band--accent .eyebrow { color: rgba(255,255,255,.75); }
/* A card keeps its own light background inside an accent band, so it must
   also keep its own text colour. Without this the band rule paints white
   text onto a white card and the copy disappears entirely. */
.band--accent .card,
.band--accent .card h2,
.band--accent .card h3,
.band--accent .card p { color: var(--text); }
.band--accent .card p { color: var(--muted); }

.step { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.step:first-of-type { border-top: none; }
.step__n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--serif); font-weight: 600; font-size: var(--fs-sm);
  display: flex; align-items: center; justify-content: center;
}
.step p { font-size: var(--fs-body); }

/* The question a page can put in front of someone instead of a claim. */
.prompt {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 12px;
  padding: 26px 28px; margin-top: 40px; max-width: 640px;
}
.prompt p { font-family: var(--serif); font-size: var(--fs-lg); color: var(--text); line-height: 1.4; }
.prompt span { display: block; margin-top: 10px; font-family: var(--sans); font-size: var(--fs-sm); color: var(--muted); }

/* Two columns that argue against each other. */
.versus { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 32px; }
.versus__side { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.versus__side--them { background: transparent; border-style: dashed; }
.versus__side--them h3 { color: var(--muted); }
.versus__side ul { list-style: none; margin-top: 12px; }
.versus__side li { font-size: var(--fs-body); color: var(--muted); padding: 7px 0 7px 22px; position: relative; }
.versus__side li::before { content: '·'; position: absolute; left: 6px; color: var(--accent); font-weight: 700; }
.versus__side--them li::before { content: '×'; color: #B0A79A; font-size: var(--fs-sm); }

/* ── CROSS-SELL ──
   One block, inline, at the end of a page rather than floating over it. A
   banner that follows people down the page gets ignored; a relevant offer at
   the point they have finished reading does not. */
.sibling {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px 26px;
}
.sibling p { font-size: var(--fs-body); max-width: 52ch; margin-top: 4px; }

footer { border-top: 1px solid var(--line); padding: 40px 0; font-size: var(--fs-sm); color: var(--muted); }
footer a { color: var(--muted); }
.foot-row { display: flex; gap: 22px; flex-wrap: wrap; justify-content: space-between; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }

@media (max-width: 640px) {
  section { padding: 60px 0; }
}