/* =============================================================
   FinanceOS.com — Homepage
   Ported from the homepage mockup. Every selector is scoped under
   .fos-home so the generic class names (.hero/.card/.container/etc.)
   cannot collide with theme.css / workshops.css / prompts.css.
   Tokens are declared on .fos-home, not :root, for the same reason.
   ============================================================= */
.fos-home{
  /* color */
  --navy:#1a1a2e;
  --navy-deep:#0c142b;
  --cream:#fffbf5;
  --surface:#ffffff;
  --pink:#f93576;
  --pink-soft:#ffdbe5;
  --ink-muted:#5a5a6e;
  --line:#e8e4dd;
  --line-dark:rgba(255,255,255,0.14);
  /* shape */
  --maxw:1200px;
  --gutter:24px;
  --r-card:20px;
  --r-pill:999px;
  --gap:24px;
  /* shadows */
  --sh-card:0 2px 4px rgba(26,18,58,.04), 0 12px 32px rgba(26,18,58,.06);
  --sh-card-hover:0 8px 16px rgba(26,18,58,.08), 0 20px 48px rgba(26,18,58,.10);
  --sh-pink:0 6px 20px rgba(249,53,118,.35);
  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
  /* type */
  --sans:'Poppins', system-ui, -apple-system, sans-serif;
}

/* =====================  LAYOUT  ===================== */
.fos-home .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%;}

/* =====================  TYPOGRAPHY  ===================== */
.fos-home .eyebrow{
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--pink);
  margin:0;
}

/* =====================  BUTTONS  ===================== */
.fos-home .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:16px;font-weight:600;
  border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;text-align:center;
}
.fos-home .btn-pink{background:var(--pink);color:#fff;box-shadow:var(--sh-pink);}
.fos-home .btn-pink:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(249,53,118,.42);}
.fos-home .btn-pink:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-pink);}
.fos-home .btn-sm{padding:9px 20px;font-size:15px;}
.fos-home .btn-lg{padding:16px 34px;font-size:17px;}

/* =====================  HERO  ===================== */
.fos-home .hero{position:relative;overflow:hidden;background:linear-gradient(180deg, #FFFBF5 30.93%, #FDA111 618.69%);min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:120px 0 48px;}
/* Excel-style grid (ported from the prompts hero), static — fades toward the bottom. */
.fos-home .hero::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(transparent 23px, rgba(208,208,208,0.18) 23px),
    linear-gradient(90deg, transparent 79px, rgba(208,208,208,0.18) 79px);
  background-size:80px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 95%);
          mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 95%);
}
.fos-home .hero > .container{position:relative;z-index:1;}
.fos-home .hero-head{max-width:860px;margin:0 auto;text-align:center;}
.fos-home .hero .eyebrow{margin-bottom:16px;}
.fos-home .hero h1{
  font-family:var(--sans);font-optical-sizing:auto;
  font-size:64px;font-weight:400;line-height:1.05;letter-spacing:-.015em;
  color:var(--navy);margin:0 0 20px;
}
.fos-home .hero-sub{
  font-family:var(--sans);font-size:19px;font-weight:400;line-height:1.6;
  color:var(--ink-muted);max-width:700px;margin:0 auto;text-wrap:pretty;
}

/* =====================  MODE CARDS  ===================== */
.fos-home .modes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:56px;}
.fos-home .card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:32px;
  display:flex;flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fos-home .card:hover{
  transform:translateY(-4px);
}
.fos-home .card .eyebrow{margin-bottom:14px;}
.fos-home .card h3{
  font-family:var(--sans);font-optical-sizing:auto;
  font-size:22px;font-weight:600;line-height:1.15;color:var(--navy);margin:0 0 10px;
}
.fos-home .card-micro{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink-muted);margin:0;text-wrap:pretty;}
.fos-home .card-actions{margin-top:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}

/* =====================  LINK CTAs  ===================== */
.fos-home .link-cta{
  font-family:var(--sans);font-size:16px;font-weight:600;color:var(--navy);
  display:inline-flex;align-items:center;gap:7px;
}
.fos-home .link-cta .lbl{position:relative;}
.fos-home .link-cta .lbl::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--pink);transition:width .18s ease-out;
}
.fos-home .link-cta .arw{transition:transform .2s var(--ease);color:var(--pink);}
.fos-home .link-cta:hover .lbl::after,.fos-home .link-cta:focus-visible .lbl::after{width:100%;}
.fos-home .link-cta:hover .arw{transform:translateX(4px);}

/* pink text link (on dark/cream) */
.fos-home .link-pink{
  font-family:var(--sans);font-size:16px;font-weight:600;color:var(--pink);
  display:inline-flex;align-items:center;gap:7px;
}
.fos-home .link-pink .lbl{position:relative;}
.fos-home .link-pink .lbl::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--pink);transition:width .18s ease-out;
}
.fos-home .link-pink .arw{transition:transform .2s var(--ease);}
.fos-home .link-pink:hover .lbl::after,.fos-home .link-pink:focus-visible .lbl::after{width:100%;}
.fos-home .link-pink:hover .arw{transform:translateX(4px);}

/* the in-card primary button is full-width within actions */
.fos-home .card-actions .btn-pink{width:100%;}

/* "Stay current" card — placeholder links: greyed, with a "Coming Soon" pill on hover. */
.fos-home .modes .card:nth-child(3) .link-cta{color:var(--ink-muted);cursor:default;}
.fos-home .modes .card:nth-child(3) .link-cta .arw{color:var(--ink-muted);}
.fos-home .modes .card:nth-child(3) .link-cta .lbl::after{background:var(--ink-muted);}
.fos-home .modes .card:nth-child(3) .link-cta::after{
  content:"Coming Soon";
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-muted);
  background:rgba(26,18,58,.06);padding:2px 9px;border-radius:999px;white-space:nowrap;
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s ease-out, transform .18s ease-out;
}
.fos-home .modes .card:nth-child(3) .link-cta:hover::after,
.fos-home .modes .card:nth-child(3) .link-cta:focus-visible::after{opacity:1;transform:translateX(0);}

/* About section — "The full story" is a placeholder: muted (on the dark band), "Coming Soon" on hover. */
.fos-home .about .link-pink{color:rgba(255,251,245,.6);cursor:default;}
.fos-home .about .link-pink .arw{color:rgba(255,251,245,.6);}
.fos-home .about .link-pink .lbl::after{background:rgba(255,251,245,.5);}
.fos-home .about .link-pink::after{
  content:"Coming Soon";
  font-size:12px;font-weight:600;letter-spacing:.02em;color:rgba(255,251,245,.75);
  background:rgba(255,255,255,.12);padding:2px 9px;border-radius:999px;white-space:nowrap;
  opacity:0;transform:translateX(-4px);
  transition:opacity .18s ease-out, transform .18s ease-out;
}
.fos-home .about .link-pink:hover::after,
.fos-home .about .link-pink:focus-visible::after{opacity:1;transform:translateX(0);}

/* Section headings on the homepage use weight 400 (newsletter section sits
   outside .fos-home; home.css loads only on this template). */
.sub-section .sub-h2{font-weight:400;}

/* =====================  SECTION 2 — WHAT'S FINANCEOS  ===================== */
.fos-home .about{position:relative;overflow:hidden;background:var(--navy);color:var(--cream);padding:120px 0;}
/* Faded-white line grid (Vector SVG), like the hero's excel grid above. */
.fos-home .about::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url(../images/about-grid.svg);
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
}
.fos-home .about > .container{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr minmax(220px,320px);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.fos-home .about-col{max-width:620px;margin:0;text-align:left;}
.fos-home .about-media{justify-self:end;}
.fos-home .about-media img{display:block;width:100%;max-width:300px;height:auto;}
@media (max-width:760px){
  .fos-home .about > .container{grid-template-columns:1fr;gap:28px;}
  .fos-home .about-media{justify-self:start;}
  .fos-home .about-media img{max-width:220px;}
}
.fos-home .about .eyebrow{color:var(--pink);margin-bottom:20px;}
.fos-home .about h2{
  font-family:var(--sans);font-optical-sizing:auto;
  font-size:40px;font-weight:400;line-height:1.1;letter-spacing:-.01em;
  color:#fff;margin:0 0 24px;text-wrap:balance;
}
.fos-home .about p{
  font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.6;
  color:rgba(255,255,255,.82);margin:0 0 28px;text-wrap:pretty;
}

/* =====================  SECTION 2.5 — LATEST ARTICLES  ===================== */
.fos-home .articles{background:var(--cream);padding:120px 0;overflow:hidden;}
.fos-home .articles-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;
}
.fos-home .articles-head .eyebrow{margin-bottom:16px;}
.fos-home .articles-head h2{
  font-family:var(--sans);font-optical-sizing:auto;
  font-size:40px;font-weight:400;line-height:1.1;letter-spacing:-.01em;
  color:var(--navy);margin:0;text-wrap:balance;
}
.fos-home .articles-head-left{max-width:560px;}

/* carousel controls */
.fos-home .carousel-nav{display:flex;gap:10px;flex-shrink:0;}
.fos-home .car-btn{
  width:48px;height:48px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:var(--sh-card);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.fos-home .car-btn:hover:not(:disabled){transform:translateY(-2px);border-color:var(--pink);color:var(--pink);box-shadow:var(--sh-card-hover);}
.fos-home .car-btn:active:not(:disabled){transform:scale(.96);}
.fos-home .car-btn:disabled{opacity:.35;cursor:default;box-shadow:none;}
.fos-home .car-btn svg{width:20px;height:20px;}

/* track */
.fos-home .car-viewport{margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;}
.fos-home .car-track{
  display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:4px;
}
.fos-home .car-track::-webkit-scrollbar{display:none;}

.fos-home .article-card{
  scroll-snap-align:start;flex:0 0 360px;max-width:360px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.fos-home .article-card:hover{transform:translateY(-4px);}
.fos-home .article-thumb{
  height:184px;position:relative;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:flex-start;
}

/* abstract editorial gradient thumbs (no stock photography) */
.fos-home .thumb-a{background:linear-gradient(135deg,#ffe3ec 0%,#ffd0b0 100%);}
.fos-home .thumb-b{background:linear-gradient(135deg,#e7dcff 0%,#ffdbe5 100%);}
.fos-home .thumb-c{background:linear-gradient(135deg,#fff1d6 0%,#ffc7a3 100%);}
.fos-home .thumb-d{background:linear-gradient(135deg,#d8e3ff 0%,#e7dcff 100%);}
.fos-home .thumb-e{background:linear-gradient(135deg,#ffdbe5 0%,#f9a8c4 100%);}
.fos-home .article-cat{
  margin:18px 0 0 18px;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy);
  background:rgba(255,255,255,.82);padding:6px 12px;border-radius:var(--r-pill);
}
.fos-home .article-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.fos-home .article-card h3{
  font-family:var(--sans);font-optical-sizing:auto;
  font-size:22px;font-weight:600;line-height:1.18;letter-spacing:-.005em;
  color:var(--navy);margin:0 0 12px;text-wrap:pretty;
}
.fos-home .article-card p{
  font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink-muted);
  margin:0 0 20px;text-wrap:pretty;
}
.fos-home .article-meta{
  margin-top:auto;display:flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:13px;color:var(--ink-muted);
}
.fos-home .article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--pink);}

/* =====================  FADE-UP ENTRANCE  ===================== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
.fos-home .fade-up{
  animation:fadeUp .6s var(--ease) both;
}

/* =====================  RESPONSIVE  ===================== */
@media (max-width:900px){
  .fos-home .modes{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .fos-home .hero{padding:84px 0 72px;}
  .fos-home .hero h1{font-size:40px;}
  .fos-home .hero-sub{font-size:16px;}
  .fos-home .modes{grid-template-columns:1fr;margin-top:40px;}
  .fos-home .about{padding:72px 0;}
  .fos-home .about h2{font-size:30px;}
  .fos-home .articles{padding:72px 0;}
  .fos-home .articles-head{flex-direction:column;align-items:flex-start;gap:24px;}
  .fos-home .articles-head h2{font-size:30px;}
  .fos-home .article-card{flex-basis:300px;max-width:300px;}
  .fos-home .article-card h3{font-size:20px;}
}
@media (prefers-reduced-motion:reduce){
  .fos-home .fade-up{animation:none;}
}

/* Match the workshops hero: the gradient flows up under the transparent nav.
   Pull the hero up by the nav height, then pad its content back down so it
   still clears the nav. --fos-nav-h is defined in theme.css. */
.fos-home .hero{
  margin-top:calc(-1 * var(--fos-nav-h));
  padding-top:calc(var(--fos-nav-h, 72px) + 24px);
}