/* ================================================================
   glass.css — bulged glass morphism, 4 brand tokens only
   ================================================================
   Palette (strict):
     --color-indigo: #1B1F3B
     --color-gold:   #D4A574
     --color-cream:  #F8F4ED
     --color-teal:   #6FB7A8

   Scope: visual layer only. Zero HTML changes. Zero copy changes.
   Zero functionality changes. Revert = delete the <link> tag.
   Date: 2026-10-18
================================================================ */

:root{
  --color-indigo:#1B1F3B;
  --color-gold:#D4A574;
  --color-cream:#F8F4ED;
  --color-teal:#6FB7A8;
}

/* ===================================================
   BODY — cream canvas + 6 soft gold/teal auras
   gives the backdrop-filter something to actually blur.
   =================================================== */
/* Perf: no background-attachment:fixed — scrolls with page (big scroll-lag fix).
   Reduced 6 auras to 3 to cut paint cost. */
body{
  background:
    radial-gradient(circle at 10% 10%, rgba(212,165,116,.14), transparent 50%),  /* gold top-left */
    radial-gradient(circle at 90% 50%, rgba(111,183,168,.12), transparent 50%),  /* teal mid-right */
    radial-gradient(circle at 20% 85%, rgba(85,96,168,.11),   transparent 50%),  /* indigo-500 bot-left */
    var(--color-cream);
}

/* ===================================================
   NAV — floating glass pill. Works for position:fixed (most
   pages, base.css) AND position:sticky (/get-started).
   Logo stays on left, tabs stay on right (base.css flex intact).
   =================================================== */
nav{
  position:fixed !important;
  top:12px !important;
  left:24px !important;
  right:24px !important;
  width:auto !important;
  border-radius:100px !important;
  border:1px solid rgba(27,31,59,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(27,31,59,.04),
    0 12px 32px rgba(27,31,59,.08) !important;
}

/* /get-started originally used position:sticky (so main had no top padding).
   Forcing fixed above removes nav from flow — compensate with page top-padding
   so progress indicator doesn't hide behind the nav pill. */
body:has(.progress) main{padding-top:72px}
nav::before{
  content:"";
  position:absolute;top:0;left:20%;right:20%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.4),transparent);
  pointer-events:none;
}

/* ===================================================
   LIGHT BULGE — every content section + hero + footer
   Generic .section catches: manifesto, dual, upskill, why, faq,
   protocol, notif, agents-band, how-recruiter, etc.
   EXCLUDES .policy (used 50+ times on legal pages for each
   paragraph — bulging all of them breaks readability).
   =================================================== */
.hero,
.profile-hero,
.section:not(.policy),
.skills-section,
footer{
  margin:28px 24px;
  border-radius:28px;
}

/* Hero needs extra top-margin to clear the fixed-position nav pill */
.hero,
.profile-hero{
  margin-top:96px !important;
  padding-top:60px !important;
  padding-bottom:70px !important;
}

/* All light bulges share these properties */
.hero,
.profile-hero,
.section:not(.policy),
.skills-section,
footer{
  position:relative;
  overflow:hidden;
  background:rgba(248,244,237,.65);  /* --color-cream translucent, bumped from .5 to compensate for lower blur */
  backdrop-filter:blur(14px) saturate(140%);  /* was 26px — scroll perf fix */
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(27,31,59,.08);  /* --color-indigo at 8% */
  will-change:transform;  /* hints GPU compositing */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,31,59,.04),
    0 1px 2px rgba(27,31,59,.04),
    0 10px 24px rgba(27,31,59,.08),
    0 24px 48px rgba(27,31,59,.08);
}
.hero::before,
.profile-hero::before,
.section:not(.policy)::before,
.skills-section::before,
footer::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.55),transparent);  /* gold hairline */
  pointer-events:none;z-index:1;
}

/* ===================================================
   DARK BULGE — DSC coach + CTA (~8% translucent)
   Uses --color-indigo only. No indigo tints.
   =================================================== */
.section.coach,
section#coach,
.cta-section,
.final-cta,
.signup{
  margin:28px 24px !important;
  border-radius:28px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,   rgba(111,183,168,.2),  transparent 60%),  /* teal top */
    radial-gradient(circle at 100% 100%,rgba(212,165,116,.2),  transparent 60%),  /* gold corner */
    rgba(27,31,59,.94) !important;  /* --color-indigo at 94% (6% translucent) */
  backdrop-filter:blur(12px) saturate(130%);  /* was 20px — scroll perf fix */
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(212,165,116,.45);  /* gold hairline border */
  color:var(--color-cream);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(212,165,116,.1),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.3),
    0 10px 24px rgba(27,31,59,.4),
    0 24px 56px rgba(27,31,59,.5),
    0 0 60px rgba(212,165,116,.08);
}
.section.coach::before,
section#coach::before,
.cta-section::before,
.final-cta::before,
.signup::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.9),transparent);
  pointer-events:none;z-index:1;
}

/* ===================================================
   MINI-BULGES — pillar / dual-card / upskill-step
   =================================================== */
/* Mini-bulges — covers every card type across all pages.
   NO nested backdrop-filter (nested blurs = scroll lag).
   Opaque enough that cream reads clean without blur. */
.pillar,
.upskill-step,
.how-step,
.agent-card,
.problem-card,
.path-card,
.info-card,
.industry-card,
.post-card,
.related-card,
.signup-card{
  background:rgba(255,255,255,.75) !important;
  border:1px solid rgba(27,31,59,.06) !important;
  position:relative;
  /* NO overflow:hidden here — some cards have badges that extend
     outside their bounds (e.g. .path-card .badge at top:-12px). */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(27,31,59,.04),
    0 8px 20px rgba(27,31,59,.06) !important;
}
.pillar::before,
.upskill-step::before,
.how-step::before,
.agent-card::before,
.problem-card::before,
.path-card::before,
.info-card::before,
.industry-card::before,
.post-card::before,
.related-card::before,
.signup-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.5),transparent);
  pointer-events:none;
}

/* Dual cards — for-you light, recruiter dark */
.dual-card{
  background:rgba(255,255,255,.75) !important;
  border:1px solid rgba(27,31,59,.06) !important;
  position:relative;
  overflow:hidden;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(27,31,59,.04),
    0 10px 24px rgba(27,31,59,.06) !important;
}
.dual-card.for-recruiters{
  background:
    radial-gradient(circle at 50% 0%, rgba(111,183,168,.18), transparent 60%),
    rgba(27,31,59,.94) !important;
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  border:1px solid rgba(212,165,116,.45) !important;
  color:var(--color-cream);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 0 0 1px rgba(212,165,116,.08),
    inset 0 -2px 0 rgba(0,0,0,.35),
    0 10px 28px rgba(27,31,59,.35) !important;
}
.dual-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.5),transparent);
  pointer-events:none;
}
.dual-card.for-recruiters::before{
  background:linear-gradient(90deg,transparent,rgba(212,165,116,.8),transparent);
}

/* ===================================================
   App Store / Play Store badges — soften to outlined cream glass
   wherever they sit on a cream bulge (hero + footer).
   Exempt .cta-section (dark bulge; dark badges read fine there).
   =================================================== */
.hero .app-badge,
footer .app-badge{
  background:rgba(255,255,255,.65) !important;
  color:var(--indigo-900) !important;
  border:1.5px solid rgba(27,31,59,.12) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 8px rgba(27,31,59,.06);
}
.hero .app-badge:hover,
footer .app-badge:hover{
  background:rgba(255,255,255,.85) !important;
  border-color:rgba(212,165,116,.5) !important;
}
.hero .app-badge svg,
footer .app-badge svg{fill:var(--indigo-900) !important}
.hero .app-badge .b-small,
footer .app-badge .b-small{color:var(--ink-500) !important}
.hero .app-badge .b-big,
footer .app-badge .b-big{color:var(--indigo-900) !important}

/* ===================================================
   Footer logo — platform.css / delete-account.css use
   logo-mark-dark.svg (cream star for dark bg); glass makes
   footer cream, so cream logo was invisible. Swap to the
   indigo logo-mark.svg via CSS content (no HTML edit).
   =================================================== */
footer .logo-mark img[src$="logo-mark-dark.svg"]{
  content:url("/assets/images/logo/logo-mark.svg");
}

/* ===================================================
   Footer text readability — some pages (platform, delete-account)
   set footer{color:var(--cream)} expecting dark bg; glass makes
   footer a cream bulge, so cream text was invisible. Force to ink.
   =================================================== */
footer,
footer p,
footer li,
footer .logo,
footer .logo-mark,
footer small,
footer span:not(.ital){color:var(--ink-700) !important}
footer a{color:var(--indigo-900) !important}
footer a:hover{color:var(--gold-700) !important}
footer .section-eyebrow,
footer .ital{color:var(--gold-700) !important}

/* ===================================================
   Platform agents-band gold/teal tint preservation.
   Keeps the "for job seekers" (gold) and "for recruiters" (teal)
   semantic distinction visible through the glass bulge.
   =================================================== */
.section.agents-band.gold-band{background:rgba(212,165,116,.14) !important}
.section.agents-band.teal-band{background:rgba(111,183,168,.14) !important}

/* ===================================================
   DSI card — stays flat (patent + credential gravitas)
   =================================================== */
.skill-card{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ===================================================
   Progressive enhancement — fallback for older browsers
   =================================================== */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero,
  .section.manifesto,
  .section.dual,
  .section.upskill,
  .pillar,
  .dual-card,
  .upskill-step{background:rgba(248,244,237,.9)}
  .section.coach,
  section#coach,
  .cta-section,
  .dual-card.for-recruiters{background:var(--color-indigo) !important}
}

/* ===================================================
   MOBILE — tighten gutters, radii + hero padding so
   bulges don't read as thick chunky blocks on phones.
   Desktop values look right at ≥700px; below that the
   24px gutter eats too much width.
   =================================================== */
@media (max-width: 700px){
  /* Nav pill — closer to screen edges + slimmer height
     Was 64px tall (14px padding + 36px logo-mark) — too chunky.
     Shaved to ~44px by trimming padding + shrinking the mark. */
  nav{
    top:8px !important;
    left:10px !important;
    right:10px !important;
    padding:6px 12px !important;
    border-radius:999px !important;
  }
  nav.scrolled{padding:5px 12px !important}
  nav .logo{font-size:17px !important; gap:8px !important}
  nav .logo-mark{width:28px !important; height:28px !important}
  nav .logo-mark img,
  nav .logo-mark svg{width:22px !important; height:22px !important}
  nav .hamburger{width:34px !important; height:34px !important}
  nav .nav-cta{padding:7px 14px !important; font-size:13px !important}

  /* DSI card on hero was sized 340px fixed (or `100vw - 48px` at
     ≤380px) — both ignore the glass bulge's 10px side-gutter +
     container padding, so the card was wider than its parent and
     pushed off-center. Fluid up to 340px, aspect-ratio preserved. */
  .hero .card-stage,
  .hero .card-floater,
  .why-featured-card{
    width:100% !important;
    max-width:100% !important;
    overflow:visible;
  }

  /* Rotator JS sets `style.width = <px>` per word → every 3s the
     container width changes, which on the single-column mobile grid
     causes the whole hero to reflow (card shifts right/left).
     Pin to 100% of the h1 line so widths[idx] has no visual effect. */
  .hero #heroRotator,
  .hero .rotator{
    width:100% !important;
    display:block !important;
    text-align:left;
    white-space:normal !important;
  }
  .hero #heroRotator span,
  .hero .rotator span{
    white-space:normal !important;
  }
  .hero .skill-card,
  .why-featured-card .skill-card{
    width:100% !important;
    max-width:340px !important;
    height:auto !important;
    aspect-ratio:560/348 !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* All light bulges — tighter margins, softer radius */
  .hero,
  .profile-hero,
  .section:not(.policy),
  .skills-section,
  footer{
    margin:16px 10px !important;
    border-radius:20px !important;
  }

  /* Hero — reduce the big desktop padding so phone screens
     aren't 60% empty space above the headline */
  .hero,
  .profile-hero{
    margin-top:72px !important;
    padding-top:36px !important;
    padding-bottom:44px !important;
  }

  /* Dark bulges — match */
  .section.coach,
  section#coach,
  .cta-section,
  .final-cta,
  .signup{
    margin:16px 10px !important;
    border-radius:20px !important;
  }

  /* /get-started progress clearance under fixed nav */
  body:has(.progress) main{padding-top:64px}
}

/* Extra-small screens (<420px) — shave another few px */
@media (max-width: 420px){
  nav{
    top:6px !important;
    left:8px !important;
    right:8px !important;
  }
  .hero,
  .profile-hero,
  .section:not(.policy),
  .skills-section,
  footer,
  .section.coach,
  section#coach,
  .cta-section,
  .final-cta,
  .signup{
    margin:12px 8px !important;
    border-radius:18px !important;
  }
  .hero,
  .profile-hero{
    margin-top:64px !important;
    padding-top:28px !important;
    padding-bottom:36px !important;
  }
}