/* ===========================================================
   findmeajob Monzo-family design system
   Loaded on every page. Single source of truth for visual tokens,
   CTA shapes, card chrome, FAQ accordion, footer wordmark, and the
   small refinements that make the site read as Monzo-adjacent.
   =========================================================== */

:root {
  /* Core palette */
  --mnz-coral: #FF4F40;
  --mnz-coral-dark: #D93729;
  --mnz-coral-tint: #FFE8E5;
  --mnz-coral-border: #FFB8AF;
  --mnz-navy: #112231;
  --mnz-navy-dark: #091723;
  --mnz-cream: #FAF6EF;
  --mnz-mint: #EFF3E3;
  --mnz-mint-deep: #E3ECC9;
  --mnz-peach: #FFE8CC;
  --mnz-lavender: #EAE6FA;
  --mnz-text: #112231;
  --mnz-text-muted: #64748B;
  --mnz-text-soft: #94A3B8;
  --mnz-border: #E8E8E8;
  --mnz-border-soft: #F1F1F1;

  /* Radii */
  --mnz-r-sm: 12px;
  --mnz-r-md: 20px;
  --mnz-r-lg: 28px;
  --mnz-r-xl: 32px;
  --mnz-r-pill: 999px;

  /* Shadows */
  --mnz-shadow-sm: 0 2px 8px rgba(17,34,49,.04);
  --mnz-shadow-md: 0 12px 30px rgba(17,34,49,.08);
  --mnz-shadow-lg: 0 30px 60px rgba(17,34,49,.14);

  /* Type scale */
  --mnz-fs-xs: .72rem;
  --mnz-fs-sm: .85rem;
  --mnz-fs-md: 1rem;
  --mnz-fs-lg: 1.25rem;
  --mnz-fs-xl: 2rem;
  --mnz-fs-2xl: 3rem;
  --mnz-fs-3xl: 4rem;
}

/* ---------- Global refinements (applied everywhere) ---------- */

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--mnz-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings feel Monzo — tight, bold, navy, letter-spaced in */
h1, h2, h3, h4 {
  color: var(--mnz-text);
  letter-spacing: -.02em;
  line-height: 1.1;
}
h1 { font-weight: 900; }
h2 { font-weight: 900; }
h1 em, h2 em, h3 em, h4 em {
  font-style: normal;
  color: var(--mnz-coral);
}

/* ---------- Primary CTAs: coral → navy (Monzo pattern) ---------- */
/* Every primary action flips to navy, hover shows coral. Uses high
   specificity + !important to win against page-local styles. */

.btn,
button.btn,
a.btn,
.hero-btn,
.heroM-cta,
.stg-cta,
.howit-cta,
.faq-btn,
.mnz-cta,
.uc-link,
.fsim-cta,
input[type="submit"].btn,
button[type="submit"].btn {
  background: var(--mnz-navy) !important;
  color: #fff !important;
  border-radius: var(--mnz-r-pill) !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  transition: all .22s !important;
  box-shadow: 0 4px 14px rgba(17,34,49,.14) !important;
  border: none !important;
  cursor: pointer;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
.hero-btn:hover,
.heroM-cta:hover,
.stg-cta:hover,
.howit-cta:hover,
.mnz-cta:hover,
.fsim-cta:hover {
  background: var(--mnz-coral) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255,79,64,.3) !important;
  text-decoration: none !important;
}

/* Ghost / secondary CTA (Monzo outline-on-white look) */
.mnz-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  color: var(--mnz-navy);
  border: 1.5px solid var(--mnz-navy);
  padding: .8rem 1.4rem;
  border-radius: var(--mnz-r-pill);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: all .2s;
}
.mnz-ghost:hover {
  background: var(--mnz-navy);
  color: #fff;
  text-decoration: none;
}

/* ---------- Monzo pill eyebrow ---------- */
.mnz-eyebrow {
  display: inline-block;
  background: var(--mnz-cream);
  color: var(--mnz-navy);
  padding: .35rem .9rem;
  border-radius: var(--mnz-r-pill);
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid var(--mnz-border);
  margin-bottom: 1rem;
}
.mnz-eyebrow-coral {
  background: var(--mnz-coral-tint);
  color: var(--mnz-coral-dark);
  border-color: var(--mnz-coral-border);
}

/* ---------- Monzo pastel mega-containers ---------- */
.mnz-mega {
  padding: 3rem 1.5rem;
  margin: 2rem 1.5rem;
  border-radius: var(--mnz-r-xl);
}
.mnz-mega-mint { background: var(--mnz-mint); }
.mnz-mega-cream { background: var(--mnz-cream); }
.mnz-mega-peach { background: var(--mnz-peach); }
.mnz-mega-lavender { background: var(--mnz-lavender); }
.mnz-mega-navy { background: var(--mnz-navy); color: #fff; }
.mnz-mega-navy h1, .mnz-mega-navy h2, .mnz-mega-navy h3 { color: #fff; }

@media (max-width: 820px) {
  .mnz-mega { padding: 2rem 1rem; margin: 1rem .75rem; border-radius: var(--mnz-r-lg); }
}

/* ---------- Monzo result card (the chrome on every tool output) ---------- */
.mnz-card {
  background: #fff;
  border: 1px solid var(--mnz-border);
  border-radius: var(--mnz-r-md);
  padding: 1.5rem;
  box-shadow: var(--mnz-shadow-sm);
  transition: all .2s;
}
.mnz-card:hover { border-color: var(--mnz-coral-border); box-shadow: var(--mnz-shadow-md); }
.mnz-card-chip {
  display: inline-block;
  background: var(--mnz-coral-tint);
  color: var(--mnz-coral-dark);
  border: 1px solid var(--mnz-coral-border);
  padding: .28rem .75rem;
  border-radius: var(--mnz-r-pill);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: .6rem;
}
.mnz-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--mnz-navy);
  letter-spacing: -.2px;
  line-height: 1.2;
  margin-bottom: .15rem;
}
.mnz-card-sub {
  font-size: .8rem;
  color: var(--mnz-text-muted);
  margin-bottom: .7rem;
}
.mnz-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .7rem;
}
.mnz-card-pill {
  background: var(--mnz-cream);
  border: 1px solid var(--mnz-border);
  color: var(--mnz-navy);
  padding: .28rem .65rem;
  border-radius: var(--mnz-r-pill);
  font-size: .7rem;
  font-weight: 600;
}

/* ---------- Monzo FAQ accordion (coral chevron pill rows) ---------- */
.mnz-faq {
  max-width: 820px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.mnz-faq h2 {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--mnz-navy);
  letter-spacing: -.6px;
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.1;
}
.mnz-faq h2 em { color: var(--mnz-coral); font-style: normal; }
.mnz-faq-item {
  background: #fff;
  border: 1px solid var(--mnz-border);
  border-radius: var(--mnz-r-pill);
  margin-bottom: .65rem;
  overflow: hidden;
  transition: all .2s;
}
.mnz-faq-item[open] {
  border-radius: var(--mnz-r-md);
  border-color: var(--mnz-coral);
  box-shadow: 0 10px 28px rgba(255,79,64,.08);
}
.mnz-faq-summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .98rem;
  font-weight: 700;
  color: var(--mnz-navy);
  line-height: 1.4;
}
.mnz-faq-summary::-webkit-details-marker { display: none; }
.mnz-faq-chev {
  flex-shrink: 0;
  color: var(--mnz-coral);
  transition: transform .25s;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
}
.mnz-faq-item[open] .mnz-faq-chev { transform: rotate(180deg); }
.mnz-faq-body {
  padding: 0 1.5rem 1.25rem;
  font-size: .92rem;
  color: var(--mnz-text-muted);
  line-height: 1.65;
}
@media (max-width: 780px) {
  .mnz-faq { padding: 2.5rem 1.25rem; }
  .mnz-faq h2 { font-size: 1.7rem; }
  .mnz-faq-summary { padding: 1rem 1.25rem; font-size: .9rem; }
  .mnz-faq-body { padding: 0 1.25rem 1.1rem; font-size: .88rem; }
}

/* ---------- Trust indicator strip (pill row) ---------- */
.mnz-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.25rem;
  align-items: center;
}
.mnz-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  border: 1px solid var(--mnz-border);
  padding: .5rem .85rem;
  border-radius: var(--mnz-r-pill);
  font-size: .72rem;
  font-weight: 700;
  color: var(--mnz-navy);
  box-shadow: var(--mnz-shadow-sm);
}
.mnz-trust-pill-num { color: var(--mnz-coral); font-weight: 900; }
.mnz-trust-pill svg { width: 12px; height: 12px; color: var(--mnz-coral); flex-shrink: 0; }

/* ---------- Sparkle helper ---------- */
.mnz-spk {
  display: inline-block;
  transform: translateY(-.1em);
  margin-left: .2em;
  filter: drop-shadow(0 2px 6px rgba(255,79,64,.25));
}

/* ---------- Giant footer wordmark (Monzo signature finishing move) ---------- */
.mnz-giant-mark {
  font-size: clamp(2.75rem, 14vw, 12rem);
  font-weight: 900;
  color: var(--mnz-coral);
  letter-spacing: -.055em;
  line-height: .92;
  text-align: center;
  margin: 1.75rem 0 0;
  padding: 0 .75rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  user-select: none;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 500px) {
  .mnz-giant-mark { font-size: 13.5vw; letter-spacing: -.05em; margin-top: 1rem; }
}

/* ---------- Monzo "Tell me about..." style mega vertical menu ---------- */
.mnz-tell-menu {
  background: var(--mnz-mint);
  border-radius: var(--mnz-r-xl);
  padding: 2.5rem 2rem;
  max-width: 1080px;
  margin: 2rem auto;
}
.mnz-tell-menu-label {
  font-size: 2rem;
  font-weight: 900;
  color: var(--mnz-navy);
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.mnz-tell-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mnz-tell-menu-list li {
  border-bottom: 1px solid rgba(17,34,49,.08);
}
.mnz-tell-menu-list li:last-child { border-bottom: none; }
.mnz-tell-menu-list a {
  display: block;
  padding: 1rem 0;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--mnz-coral);
  text-decoration: none;
  letter-spacing: -.02em;
  transition: color .15s;
}
.mnz-tell-menu-list a:hover { color: var(--mnz-coral-dark); text-decoration: none; }
@media (max-width: 780px) {
  .mnz-tell-menu { padding: 1.75rem 1.25rem; margin: 1rem .75rem; }
  .mnz-tell-menu-label { font-size: 1.4rem; }
  .mnz-tell-menu-list a { font-size: 1.35rem; padding: .85rem 0; }
}

/* ---------- Monzo tall colourful portrait feature card ---------- */
.mnz-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1180px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.mnz-feat-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--mnz-r-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s;
}
.mnz-feat-card:hover { transform: translateY(-4px); text-decoration: none; color: #fff; }
.mnz-feat-card-coral { background: linear-gradient(160deg, var(--mnz-coral) 0%, var(--mnz-coral-dark) 100%); }
.mnz-feat-card-navy { background: linear-gradient(160deg, #1B1B3A 0%, var(--mnz-navy) 100%); }
.mnz-feat-card-peach { background: linear-gradient(160deg, #FFB796 0%, #FF8E6E 100%); }
.mnz-feat-card-mint { background: linear-gradient(160deg, #A8D5A8 0%, #6FB36F 100%); color: var(--mnz-navy); }
.mnz-feat-card-mint:hover, .mnz-feat-card-mint:hover * { color: var(--mnz-navy); }
.mnz-feat-arrow {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.mnz-feat-title {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .5rem;
  position: relative;
  z-index: 2;
}
.mnz-feat-desc {
  font-size: .88rem;
  line-height: 1.45;
  opacity: .85;
  position: relative;
  z-index: 2;
}
@media (max-width: 780px) {
  .mnz-feat-grid { grid-template-columns: 1fr; gap: .85rem; padding: 0 .75rem; }
  .mnz-feat-card { aspect-ratio: 4/3; padding: 1.35rem; }
  .mnz-feat-title { font-size: 1.2rem; }
}

/* ---------- Utility refinements for existing tool pages ---------- */

/* Soften body background on tool pages to Monzo cream */
body.mnz-bg-cream { background: var(--mnz-cream); }
body.mnz-bg-mint { background: var(--mnz-mint); }
body.mnz-bg-white { background: #fff; }

/* Tool-page result cards get Monzo chrome */
.card, .section-card, .result-card {
  border-radius: var(--mnz-r-md) !important;
  border: 1px solid var(--mnz-border) !important;
  box-shadow: var(--mnz-shadow-sm);
}

/* Tool-page H1s tighten up */
.container > h1, main > h1, .wrap > h1 {
  letter-spacing: -.02em;
}

/* Make every form input consistent with Monzo */
input[type="text"], input[type="email"], input[type="number"], textarea, select {
  border-radius: 14px !important;
  border: 1px solid var(--mnz-border) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
  border-color: var(--mnz-coral) !important;
  box-shadow: 0 0 0 3px rgba(255,79,64,.12) !important;
  outline: none !important;
}

/* ---------- Page section rhythm: alternating cream/white ---------- */
section.mnz-sec-cream { background: var(--mnz-cream); }
section.mnz-sec-mint { background: var(--mnz-mint); }
section.mnz-sec-peach { background: var(--mnz-peach); }
section.mnz-sec-navy { background: var(--mnz-navy); color: #fff; }
section.mnz-sec-navy h2, section.mnz-sec-navy h3, section.mnz-sec-navy h4 { color: #fff; }

/* ---------- Fine-tune the shared nav to feel Monzo ---------- */
nav.nav {
  border-bottom: 1px solid var(--mnz-border-soft) !important;
  background: rgba(255,255,255,.97) !important;
}
.nav-cta {
  background: var(--mnz-navy) !important;
  color: #fff !important;
}
.nav-cta:hover { background: var(--mnz-coral) !important; }

/* ---------- Shared Monzo footer block (used via .mnz-footer) ---------- */
.mnz-footer {
  background: var(--mnz-navy);
  color: rgba(255,255,255,.72);
  padding: 3rem 1.5rem 0;
  margin-top: 3rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.mnz-footer-inner { max-width: 1180px; margin: 0 auto; }
.mnz-footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .88rem; }
.mnz-footer a:hover { color: #fff; text-decoration: underline; }
.mnz-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}
.mnz-footer-col h4 {
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: .75rem;
}
.mnz-footer-col a { display: block; padding: .3rem 0; }
.mnz-footer-fine {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 0;
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  line-height: 1.7;
}
@media (max-width: 780px) {
  .mnz-footer-cols { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}

/* ============================================================================
   SHARED TOOL-PAGE FLOATING PHONE + HERO TINTS
   Used across match / interview-sim / practice-sim and every /tool page.
   ============================================================================ */

/* Hero-tint modifiers that flatten .aw-hero onto a Monzo soft-tint background
   and flip the text colour from white (over navy gradient) to navy. Selectors
   use compound .aw-hero.aw-hero-TINT specificity AND !important on colour
   because match / interview-sim / practice-sim ship their own inline
   .aw-text.aw-sub{color:white} rules that load AFTER monzo.css. */
.aw-hero.aw-hero-cream    { background: var(--mnz-cream) !important; }
.aw-hero.aw-hero-mint     { background: var(--mnz-mint) !important; }
.aw-hero.aw-hero-peach    { background: var(--mnz-peach) !important; }
.aw-hero.aw-hero-lavender { background: var(--mnz-lavender) !important; }
.aw-hero-cream::before, .aw-hero-cream::after,
.aw-hero-mint::before, .aw-hero-mint::after,
.aw-hero-peach::before, .aw-hero-peach::after,
.aw-hero-lavender::before, .aw-hero-lavender::after { display: none !important; }
.aw-hero-cream .aw-text, .aw-hero-mint .aw-text,
.aw-hero-peach .aw-text, .aw-hero-lavender .aw-text { color: var(--mnz-navy) !important; }
.aw-hero-cream .aw-text h1, .aw-hero-mint .aw-text h1,
.aw-hero-peach .aw-text h1, .aw-hero-lavender .aw-text h1 { color: var(--mnz-navy) !important; }
.aw-hero-cream .aw-text h1 em, .aw-hero-mint .aw-text h1 em,
.aw-hero-peach .aw-text h1 em, .aw-hero-lavender .aw-text h1 em { color: var(--mnz-coral) !important; font-style: normal; }
.aw-hero-cream .aw-text .aw-sub, .aw-hero-mint .aw-text .aw-sub,
.aw-hero-peach .aw-text .aw-sub, .aw-hero-lavender .aw-text .aw-sub { color: var(--mnz-text-muted) !important; }
.aw-hero-cream .aw-badge, .aw-hero-mint .aw-badge,
.aw-hero-peach .aw-badge, .aw-hero-lavender .aw-badge {
  background: rgba(17,34,49,.06) !important;
  border: 1px solid rgba(17,34,49,.1) !important;
  color: var(--mnz-navy) !important;
}
.aw-hero-cream .aw-feat, .aw-hero-mint .aw-feat,
.aw-hero-peach .aw-feat, .aw-hero-lavender .aw-feat {
  background: rgba(255,255,255,.6) !important;
  border: 1px solid rgba(17,34,49,.08) !important;
  color: var(--mnz-navy) !important;
  backdrop-filter: none !important;
}
.aw-hero-cream .aw-trust-item, .aw-hero-mint .aw-trust-item,
.aw-hero-peach .aw-trust-item, .aw-hero-lavender .aw-trust-item { color: var(--mnz-text-muted) !important; }
.aw-hero-cream .aw-cta, .aw-hero-mint .aw-cta,
.aw-hero-peach .aw-cta, .aw-hero-lavender .aw-cta {
  background: linear-gradient(135deg, var(--mnz-coral), var(--mnz-coral-dark)) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(255,79,64,.28) !important;
}

/* Shared tool-page phone (.tph-*) — tilted, floating, 3-step opacity cycle.
   Use this instead of copy-pasting per-page .mph-/.iph-/.pph-. */
.tph-phone {
  position: relative;
  width: 280px;
  max-width: 100%;
  filter: drop-shadow(0 30px 60px rgba(17,34,49,.22));
  animation: tphFloat 6s ease-in-out infinite;
  transform: translateZ(0);
  backface-visibility: hidden;
  margin: 0 auto;
}
.tph-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19;
  background: #0d0d15;
  border-radius: 42px;
  padding: 10px;
  overflow: hidden;
}
.tph-frame::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #0d0d15;
  border-radius: 0 0 16px 16px;
  z-index: 3;
}
.tph-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--mnz-cream);
  border-radius: 32px;
  overflow: hidden;
}
.tph-step {
  position: absolute;
  inset: 0;
  padding: 2.2rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  background: var(--mnz-cream);
  opacity: 0;
  animation: tphCycle 15s linear infinite;
}
.tph-s-1 { animation-delay: 0s; }
.tph-s-2 { animation-delay: -10s; }
.tph-s-3 { animation-delay: -5s; }
@keyframes tphCycle {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  30%  { opacity: 1; }
  33%,100% { opacity: 0; }
}
@keyframes tphFloat {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(-6deg) translateY(-10px); }
}
@keyframes tphFloatStraight {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

/* Shared screen-content primitives so per-page content stays compact. */
.tph-eb { font-size: .55rem; font-weight: 800; color: var(--mnz-coral-dark); text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: .25rem; }
.tph-t  { font-size: 1rem; font-weight: 900; color: var(--mnz-navy); line-height: 1.15; letter-spacing: -.3px; margin-bottom: .7rem; }
.tph-body { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.tph-card { background: #fff; border: 1px solid var(--mnz-border); border-radius: 12px; padding: .55rem .6rem; }
.tph-row { display: flex; align-items: center; gap: .45rem; font-size: .68rem; color: var(--mnz-navy); font-weight: 600; }
.tph-row-sub { font-size: .58rem; color: var(--mnz-text-muted); font-weight: 500; margin-top: .1rem; }
.tph-chip { display: inline-flex; align-items: center; background: var(--mnz-coral-tint); color: var(--mnz-coral-dark); border: 1px solid var(--mnz-coral-border); padding: .12rem .4rem; border-radius: 999px; font-size: .54rem; font-weight: 700; }
.tph-bar { height: 4px; border-radius: 999px; background: var(--mnz-border-soft); overflow: hidden; margin-top: .2rem; }
.tph-bar-fill { height: 100%; background: linear-gradient(90deg, var(--mnz-coral), var(--mnz-coral-dark)); }
.tph-cta { background: var(--mnz-navy); color: #fff; padding: .45rem .65rem; border-radius: 999px; text-align: center; font-size: .62rem; font-weight: 700; margin-top: auto; }
.tph-score-ring { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: 1.1rem; margin: .5rem auto; background: conic-gradient(var(--mnz-coral) 0deg 295deg, var(--mnz-border-soft) 295deg 360deg); position: relative; }
.tph-score-ring::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--mnz-cream); }
.tph-score-ring span { position: relative; z-index: 1; color: var(--mnz-navy); }

/* Mobile: straight (no tilt) + slightly smaller width. */
@media (max-width: 820px) {
  .tph-phone { width: 240px; animation: tphFloatStraight 6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .tph-phone, .tph-step { animation: none !important; }
  .tph-s-1 { opacity: 1; }
}

/* Shared .aw-hero base (for the 8 tool pages that don't already define it).
   Match / interview-sim / practice-sim have their own inline versions that
   load after this and continue to win for specificity-equal rules — the tint
   modifier classes use compound specificity so they override regardless. */
.aw-hero { position: relative; padding: 3rem 2rem 3.5rem; border-radius: 20px; margin: .5rem 3rem 0; overflow: hidden; background: var(--mnz-cream); }
.aw-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
.aw-text { position: relative; z-index: 1; }
.aw-text h1 { font-size: 2.6rem; font-weight: 900; color: var(--mnz-navy); line-height: 1.1; margin-bottom: .65rem; letter-spacing: -.5px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.aw-text h1 em { font-style: normal; color: var(--mnz-coral); }
.aw-text .aw-sub { font-size: 1.05rem; color: var(--mnz-text-muted); line-height: 1.6; margin-bottom: 1.5rem; max-width: 480px; }
.aw-badge { display: inline-block; background: rgba(17,34,49,.06); border: 1px solid rgba(17,34,49,.1); color: var(--mnz-navy); padding: .3rem .85rem; border-radius: 999px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 1rem; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.aw-feats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.aw-feat { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.6); border: 1px solid rgba(17,34,49,.08); color: var(--mnz-navy); padding: .5rem .9rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.aw-feat svg { width: 14px; height: 14px; color: var(--mnz-coral); flex-shrink: 0; }
.aw-cta { display: inline-block; background: linear-gradient(135deg, var(--mnz-coral), var(--mnz-coral-dark)); color: #fff; padding: .85rem 1.75rem; border-radius: 999px; font-size: .92rem; font-weight: 700; text-decoration: none; box-shadow: 0 4px 20px rgba(255,79,64,.28); transition: all .25s; border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.aw-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,79,64,.4); text-decoration: none; color: #fff; }
.aw-trust { display: flex; gap: 1.25rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.aw-trust-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--mnz-text-muted); font-weight: 500; }
.aw-trust-item svg { width: 12px; height: 12px; color: #10b981; }
.aw-viz { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 500px; }
@media (max-width: 820px) {
  .aw-hero { padding: 2rem 1rem 2.5rem; margin: .5rem 1rem 0; border-radius: 16px; }
  .aw-inner { grid-template-columns: 1fr; gap: 2rem; }
  .aw-text h1 { font-size: 1.85rem; }
  .aw-text .aw-sub { font-size: .92rem; }
  .aw-viz { min-height: auto; order: -1; }
  .aw-feats { gap: .35rem; }
  .aw-feat { font-size: .72rem; padding: .4rem .75rem; }
}

/* Scroll offset so hero CTAs that jump to #formSection / #apply-form-section
   don't hide the form's top under the sticky nav. */
#formSection,
#apply-form-section,
[id="formSection"] {
  scroll-margin-top: 96px;
}
@media (max-width: 820px) {
  #formSection,
  #apply-form-section,
  [id="formSection"] {
    scroll-margin-top: 72px;
  }
}