/* ==========================================================================
   Product Faculty — shared page theme
   Tokens and chrome are identical to the homepage so every page reads as one
   site. Page-specific rules live in each page's own <style id="pf2-page">.
   ========================================================================== */

:root{
  --pf2-paper:#F6F7FB; --pf2-paper2:#ECEFF7; --pf2-card:#FFFFFF;
  --pf2-ink:#0B1430; --pf2-muted:#4C5A7D; --pf2-line:#DBE1F0;
  --pf2-navy:#0E1B3F; --pf2-navy2:#16275C;
  --pf2-onnavy:#F5F8FF; --pf2-onnavy-muted:#AEBCE0; --pf2-onnavy-line:rgba(245,248,255,.14);
  --pf2-yellow:#FFC53D; --pf2-yellow-deep:#EFAE18; --pf2-yellow-ink:#221604; --pf2-yellow-txt:#8F6B00;
  --pf2-rose:#E6A7B2; --pf2-rose-strong:#A95365; --pf2-rose-soft:#FBF0F2;
  --pf2-footer:#091026; --pf2-sh:11,20,48;
  --pf2-sh1:0 1px 2px rgba(11,20,48,.05),0 10px 26px rgba(11,20,48,.07),0 30px 60px rgba(11,20,48,.07);
  --pf2-sh2:0 2px 4px rgba(11,20,48,.05),0 18px 44px rgba(11,20,48,.12),0 48px 90px rgba(11,20,48,.12);
  --pf2-sh3:0 12px 28px rgba(11,20,48,.26);
  --pf2-sh4:0 6px 14px rgba(11,20,48,.16),0 30px 70px rgba(11,20,48,.30);
  --pf2-glow:0 10px 30px rgba(239,174,24,.38);
  --pf2-portrait:18px;   /* portraits are rounded rectangles, not domes */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--pf2-paper);color:var(--pf2-ink);
     font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}
::selection{background:var(--pf2-yellow);color:var(--pf2-yellow-ink);}

/* Page body sits below the fixed nav. The column layout keeps the footer on
   the floor of short pages instead of leaving it stranded mid-viewport. */
body.pf2-page{padding-top:66px;display:flex;flex-direction:column;min-height:100vh;}
body.pf2-page > .footer-general{margin-top:auto;}

/* The only two Webflow utilities the markup still needs once its stylesheet
   is dropped. Everything else that sheet provided was nav chrome. */
.w-inline-block{max-width:100%;display:inline-block;}
.w-embed::before,.w-embed::after{content:" ";display:table;}
.w-embed::after{clear:both;}

@keyframes pfPageIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ==========================================================================
   Nav — identical markup and behaviour to the homepage
   ========================================================================== */
.pfnav{position:fixed;top:0;left:0;z-index:60;box-sizing:border-box;width:100%;height:66px;padding:0 32px;display:flex;align-items:center;background:var(--pf2-navy);box-shadow:0 6px 24px rgba(11,20,48,.14);font-family:'Outfit',sans-serif;}
.pfnav *,.pfnav *::before,.pfnav *::after{box-sizing:border-box;}
.pfnav-in{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1180px;margin:0 auto;}
.pfnav-brand{display:block;width:186px;flex:none;}
.pfnav-brand img{display:block;width:100%;height:auto;}
.pfnav-menu{display:flex;align-items:center;justify-content:flex-end;gap:6px;}
.pfnav-link{display:block;padding:12px 16px;color:var(--pf2-onnavy-muted);font-size:14.5px;font-weight:500;line-height:1.4;text-decoration:none;transition:color .16s ease;}
.pfnav-link:hover{color:var(--pf2-onnavy);}
.pfnav-link.is-current{color:var(--pf2-yellow);}
.pfnav-burger{display:none;flex:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:40px;height:40px;padding:2px;background:none;border:0;cursor:pointer;}
.pfnav-burger span{display:block;width:26px;height:3px;border-radius:2px;background:var(--pf2-onnavy);transition:transform .18s ease,opacity .18s ease;}
@media (max-width:991px){
  .pfnav{padding:0 24px;}
  .pfnav-brand{width:170px;}
  .pfnav-burger{display:flex;}
  .pfnav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-end;background:var(--pf2-navy);box-shadow:0 24px 48px rgba(11,20,48,.35);padding:16px 0 28px;gap:0;}
  .pfnav.open .pfnav-menu{display:flex;}
  .pfnav-link{width:100%;text-align:right;padding:16px 28px;}
  .pfnav.open .pfnav-burger span:nth-child(1){transform:translateY(9px) rotate(45deg);}
  .pfnav.open .pfnav-burger span:nth-child(2){opacity:0;}
  .pfnav.open .pfnav-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
}
@media (max-width:767px){
  .pfnav-brand{width:150px;}
  .pfnav-menu{height:calc(100vh - 66px);overflow-y:auto;justify-content:flex-start;align-items:center;padding-top:36px;}
  .pfnav-link{text-align:center;}
}

/* ==========================================================================
   Themed content system (.th-*) — light re-skin
   Same class names, same layout, new palette and type. No layout changes.
   ========================================================================== */
.th{background:transparent;color:var(--pf2-ink);font-family:'Outfit',sans-serif;line-height:1.65;animation:pfPageIn .4s ease both;}
.th a{color:inherit;}
.th-wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,50px);}
.th-sec{padding:clamp(56px,7vw,92px) 0;text-align:center;}

.th-kick{font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pf2-yellow-txt);margin-bottom:14px;}
.th-h1{font-size:clamp(36px,5.6vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 0 16px;color:var(--pf2-ink);text-wrap:balance;}
.th-h2{font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:-.025em;line-height:1.12;margin:0 0 14px;color:var(--pf2-ink);text-wrap:balance;}
.th-lead{font-size:17px;color:var(--pf2-muted);max-width:62ch;margin:0 auto 38px;text-wrap:pretty;}

/* Borderless depth: the card is defined by its shadow, never an outline. */
.th-card{background:var(--pf2-card);border:0;border-radius:18px;padding:24px 20px;
         box-shadow:var(--pf2-sh1);transition:transform .2s ease,box-shadow .2s ease;}
.th-card:hover{transform:translateY(-4px);box-shadow:var(--pf2-sh2);}

.th-grid{display:grid;gap:20px;}
.th-g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.th-g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.th-g4{grid-template-columns:repeat(4,minmax(0,1fr));}
/* Column counts step down through divisors only, so a section never closes
   on a ragged row. 4 -> 2 -> 1, 3 -> 1, 2 -> 1. */
@media(max-width:1039px){.th-g4{grid-template-columns:repeat(2,minmax(0,1fr));}.th-g3{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:719px){.th-g2,.th-g3,.th-g4{grid-template-columns:minmax(0,1fr);}}

.th-prose{max-width:760px;margin:0 auto;text-align:left;font-size:16px;color:var(--pf2-muted);}
.th-prose h1,.th-prose h2,.th-prose h3,.th-prose h4{color:var(--pf2-ink);letter-spacing:-.02em;line-height:1.25;margin:1.6em 0 .5em;text-wrap:balance;}
.th-prose h2{font-size:26px;font-weight:600;}
.th-prose h3{font-size:20px;font-weight:600;}
.th-prose h4{font-size:17px;font-weight:600;}
.th-prose p,.th-prose li{margin:.7em 0;font-size:16px;line-height:1.75;text-wrap:pretty;}
.th-prose a{color:var(--pf2-yellow-txt);text-underline-offset:3px;}
.th-prose strong{color:var(--pf2-ink);font-weight:600;}
.th-prose ul,.th-prose ol{padding-left:1.3em;}

/* Portrait — the same silhouette the homepage faculty tiles use. */
.th-face{width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;
         border-radius:var(--pf2-portrait);background:var(--pf2-paper2);}

.th-note{font-size:13px;color:var(--pf2-muted);opacity:.8;}
.th-iframe{width:100%;height:120px;border:0;border-radius:12px;overflow:hidden;background:var(--pf2-paper2);}

.th-logos{display:flex;flex-wrap:nowrap;gap:clamp(14px,2.4vw,40px);align-items:center;justify-content:flex-start;overflow-x:auto;padding:6px 2px;scrollbar-width:none;}
.th-logos::-webkit-scrollbar{display:none;}
.th-logos::before,.th-logos::after{content:"";margin:auto;}
.th-logos img{flex:0 0 auto;height:clamp(18px,2vw,26px);opacity:.55;filter:grayscale(1);}

/* Buttons: one yellow action per viewport, navy for the secondary. */
.th-btn,.th-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:0;border-radius:12px;
                font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
                background:var(--pf2-yellow);color:var(--pf2-yellow-ink);box-shadow:var(--pf2-glow);
                transition:background .16s ease,transform .16s ease;}
.th-btn:hover,.th-cta:hover{background:var(--pf2-yellow-deep);transform:translateY(-2px);}
.th-btn--ghost{background:var(--pf2-card);color:var(--pf2-ink);box-shadow:var(--pf2-sh1);}
.th-btn--ghost:hover{background:var(--pf2-card);box-shadow:var(--pf2-sh2);}

/* Alternating grounds. A page gets at most two navy bands. */
.th-band-soft{background:var(--pf2-paper2);}
.th-band-navy{background:linear-gradient(160deg,var(--pf2-navy),var(--pf2-navy2));color:var(--pf2-onnavy);}
.th-band-navy .th-h1,.th-band-navy .th-h2{color:var(--pf2-onnavy);}
.th-band-navy .th-lead,.th-band-navy .th-note{color:var(--pf2-onnavy-muted);}
.th-band-navy .th-kick{color:var(--pf2-yellow);}
.th-band-navy .th-card{background:rgba(245,248,255,.06);box-shadow:none;}
.th-band-navy .th-card:hover{background:rgba(245,248,255,.09);transform:translateY(-4px);box-shadow:none;}

/* ==========================================================================
   Legacy .pf-fellowship wrapper — light
   ========================================================================== */
.pf-fellowship{background:transparent;color:var(--pf2-ink);font-family:'Outfit',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
.pf-fellowship,.pf-fellowship *,.pf-fellowship *::before,.pf-fellowship *::after{box-sizing:border-box;}
.pf-fellowship :is(h1,h2,h3,h4,h5,h6,p,summary,a,li,ul,ol,figure,blockquote){color:inherit;font-family:inherit;line-height:inherit;letter-spacing:inherit;}
.pf-fellowship :is(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote){margin:0;padding:0;}
.pf-fellowship input::placeholder{color:var(--pf2-muted);opacity:.6;}
.pf-fellowship summary{list-style:none;cursor:pointer;}
.pf-fellowship summary::-webkit-details-marker{display:none;}

/* ==========================================================================
   Prose — long-form reading column, shared by blog articles and legal pages
   ========================================================================== */
/* A single measured column. Everything below is prose, so it is sized for
   reading rather than for the card rhythm the rest of the site uses. */
.pf-prose{margin-top:clamp(30px,4vw,44px);font-size:17.5px;line-height:1.75;
          color:var(--pf2-ink);}
.pf-prose > *:first-child{margin-top:0;}
.pf-prose p{margin:0 0 1.15em;text-wrap:pretty;}
.pf-prose h2{margin:1.9em 0 .5em;font-size:clamp(23px,2.6vw,29px);font-weight:600;
             letter-spacing:-.025em;line-height:1.2;color:var(--pf2-ink);text-wrap:balance;}
.pf-prose h3{margin:1.7em 0 .45em;font-size:20px;font-weight:600;letter-spacing:-.02em;
             line-height:1.3;color:var(--pf2-ink);}
.pf-prose h4,.pf-prose h5{margin:1.5em 0 .4em;font-size:17px;font-weight:600;
                          color:var(--pf2-ink);}
.pf-prose ul,.pf-prose ol{margin:0 0 1.15em;padding-left:1.35em;}
.pf-prose li{margin:.45em 0;}
.pf-prose li::marker{color:var(--pf2-yellow-deep);}
.pf-prose strong{font-weight:600;color:var(--pf2-ink);}
.pf-prose em{font-style:italic;}
.pf-prose a{color:var(--pf2-yellow-txt);text-decoration:underline;text-underline-offset:3px;
            text-decoration-thickness:1px;}
.pf-prose a:hover{color:var(--pf2-ink);}

.pf-prose img{max-width:100%;height:auto;display:block;border-radius:12px;
              background:var(--pf2-paper2);}
.pf-prose figure{margin:1.7em 0;}
.pf-prose figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;
                     color:var(--pf2-muted);text-align:center;}
/* Old Webflow rich-text tables scroll rather than push the column open. */
.pf-prose table{width:100%;border-collapse:collapse;font-size:15px;}
.pf-prose td,.pf-prose th{padding:10px 12px;border-bottom:1px solid var(--pf2-line);
                          text-align:left;vertical-align:top;}
.pf-prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;
                     box-shadow:inset 3px 0 0 0 var(--pf2-yellow);
                     font-size:19px;line-height:1.6;color:var(--pf2-ink);}

/* ==========================================================================
   Footer — identical to the homepage
   ========================================================================== */
.footer-general{box-sizing:border-box!important;padding:clamp(54px,5vw,72px) clamp(24px,4vw,50px) 34px!important;background:var(--pf2-footer)!important;color:var(--pf2-onnavy)!important;font-family:'Outfit',sans-serif!important;}
.footer-general *{font-family:'Outfit',sans-serif!important;box-sizing:border-box!important;}
.footer-general .div-block-466{display:grid!important;width:100%!important;max-width:1180px!important;margin:0 auto!important;grid-template-areas:"brand links" "bottom bottom"!important;grid-template-columns:minmax(240px,.9fr) minmax(0,2fr)!important;column-gap:clamp(64px,8vw,132px)!important;align-items:start!important;}
.footer-general .div-block-471{grid-area:brand!important;display:flex!important;width:100%!important;margin:0!important;gap:26px!important;align-items:flex-start!important;justify-content:flex-start!important;flex-direction:column!important;}
.footer-general .link-block-72{width:clamp(190px,17vw,240px)!important;}
.footer-general .link-block-72 img{width:100%!important;height:auto!important;display:block!important;}
.footer-general .div-block-467{grid-area:links!important;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr)!important;gap:clamp(28px,4vw,56px)!important;margin:0!important;width:100%!important;}
.footer-general .div-block-469{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(28px,4vw,56px)!important;margin:0!important;}
.footer-general .div-block-472,.footer-general .div-block-473{display:block!important;margin:0!important;}
.footer-general .text-block-259{font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--pf2-onnavy-muted)!important;margin:0 0 16px!important;}
.footer-general a{color:var(--pf2-onnavy)!important;text-decoration:none!important;transition:color .16s ease!important;}
.footer-general a:hover{color:var(--pf2-yellow)!important;}
.footer-general .text-block-260{font-size:15px!important;color:var(--pf2-onnavy)!important;line-height:1.7!important;margin:0 0 10px!important;}
.footer-general .text-block-260 a{display:inline-block!important;padding:2px 0!important;}
.footer-general .div-block-472.hide-address .text-block-260{color:var(--pf2-onnavy-muted)!important;}
.footer-general .student-portal-btn{background:var(--pf2-yellow)!important;color:var(--pf2-yellow-ink)!important;border-radius:12px!important;padding:12px 22px!important;font-weight:600!important;border:none!important;box-shadow:var(--pf2-glow)!important;text-decoration:none!important;display:inline-block!important;}
.footer-general .student-portal-btn:hover{background:var(--pf2-yellow-deep)!important;color:var(--pf2-yellow-ink)!important;}
.footer-general .spb-mobile{display:none!important;background:var(--pf2-yellow)!important;color:var(--pf2-yellow-ink)!important;border-radius:12px!important;padding:12px 22px!important;font-weight:600!important;border:none!important;text-decoration:none!important;text-align:center!important;}
.footer-general .spb-mobile .text-span-40{display:block!important;font-size:11px!important;font-weight:500!important;color:rgba(34,22,4,.7)!important;}
.footer-general .div-block-470{grid-area:bottom!important;width:100%!important;margin:0!important;}
.footer-general .footer-devider-line{border:none!important;border-top:1px solid var(--pf2-onnavy-line)!important;height:1px!important;background:none!important;margin:44px 0 18px!important;width:100%!important;}
.footer-general .div-block-475{display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;align-items:center!important;gap:14px!important;width:100%!important;}
.footer-general .text-block-261,.footer-general .text-block-261 a{font-size:13px!important;color:var(--pf2-onnavy-muted)!important;}
.footer-general .text-block-261 a:hover{color:var(--pf2-yellow)!important;}
.footer-general .div-block-538{display:flex!important;align-items:center!important;}
.footer-general .social-link{display:inline-flex!important;width:34px!important;height:34px!important;align-items:center!important;justify-content:center!important;border-radius:999px!important;background:rgba(245,248,255,.08)!important;margin-left:8px!important;}
.footer-general .social-link img{width:16px!important;height:16px!important;object-fit:contain!important;filter:brightness(0) invert(1)!important;opacity:.85!important;}
@media (max-width:860px){
  .footer-general .div-block-466{grid-template-areas:"brand" "links" "bottom"!important;grid-template-columns:1fr!important;row-gap:40px!important;}
  .footer-general .div-block-467{grid-template-columns:1fr!important;}
  .footer-general .div-block-469{grid-template-columns:1fr 1fr!important;}
  .footer-general .div-block-472.hide-address{display:none!important;}
  .footer-general .student-portal-btn{display:none!important;}
  .footer-general .spb-mobile{display:inline-block!important;}
}

/* ==========================================================================
   Fluid + mobile layer                                    (added 2026-08-24)
   --------------------------------------------------------------------------
   Two rules govern this block:

   1. Media queries are reserved for *structural* change — a row becoming a
      column, a 2-up becoming a 1-up. Everything that is only a size (type,
      padding, gap, gutter) scales continuously with clamp() instead, so the
      layout has no visible step between phone sizes.

   2. Nothing here may alter the desktop rendering. Typographic corrections
      that are purely a phone concern are scoped to <=860px; every clamp()
      introduced below resolves to the exact value the old fixed rule produced
      once the viewport is wide enough, so >=861px is unchanged.
   ========================================================================== */

:root{
  /* One rhythm for the whole site. Upper bounds equal the previous fixed
     values, so wide viewports are untouched. */
  --pf2-gutter:clamp(20px,4vw,50px);
  --pf2-sec-y:clamp(48px,7vw,92px);
  --pf2-card-pad-y:clamp(18px,4.4vw,24px);
  --pf2-card-pad-x:clamp(16px,4vw,20px);
  --pf2-grid-gap:clamp(14px,3.4vw,20px);
}

.th-wrap{padding:0 var(--pf2-gutter);}
.th-sec{padding:var(--pf2-sec-y) 0;}
.th-card{padding:var(--pf2-card-pad-y) var(--pf2-card-pad-x);}
.th-grid{gap:var(--pf2-grid-gap);}

/* --------------------------------------------------------------------------
   Orphan control. A last line holding one word is the defect that reads worst
   on a phone — the eye takes it for a mistake rather than a line break.

   `balance` does the work, not `pretty`. Measured on this site in Chrome 151:
   for "AI Product Manager Interviews" in a 164px column, `auto` and `pretty`
   both leave "Interviews" alone on line two (last line 67px); `balance` moves
   "Manager" down with it (last line 128px). `pretty` only re-breaks blocks of
   several lines, so on the two- and three-line labels that make up most of
   this UI it is a no-op.

   Browsers cap `balance` at a handful of lines, so it self-limits: long prose
   below simply ignores it and takes `pretty` instead.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  p,li,dd,dt,figcaption,summary,
  h1,h2,h3,h4,h5,h6,
  .th-kick,.th-btn,.th-cta,.th-h1,.th-h2,.th-lead,.th-note,
  a.th-btn,a.th-cta,button,
  .th-card > div,.th-card > p,.th-card > span,
  .footer-general .text-block-260{
    text-wrap:balance;
  }

  /* Long-form reading columns. Past `balance`'s line cap it would do nothing,
     and `pretty` is the right tool there: it protects the last line without
     re-flowing a whole article. */
  .th-prose p,.th-prose li,.pf-prose p,.pf-prose li,blockquote{
    text-wrap:pretty;
  }
}

/* --------------------------------------------------------------------------
   Reading columns stay left-aligned on a phone whatever they inherit. Several
   prose blocks sit inside a centred `.th-sec`, and multi-line prose centred on
   a narrow screen goes ragged down both edges at once.

   Deliberately narrow: short leads, kickers and headings keep their centre,
   because at two or three lines centring reads as a title rather than as
   prose. Alignment is judged per block here, never flipped wholesale.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .th-prose,.pf-prose{text-align:left;}
}

/* --------------------------------------------------------------------------
   Tap targets. Footer and nav links sat at 20-24px tall, under the 32px the
   audit treats as the floor and well under a fingertip.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .footer-general .text-block-260 a{padding:7px 0!important;}
}

/* --------------------------------------------------------------------------
   Footer bottom row. At phone width the copyright wrapped and dropped "GDPR"
   alone onto a second line, and the social row crowded it.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .footer-general .div-block-475{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:20px!important;
  }
  /* `balance` rather than `pretty`: the line is a run of separate links, so
     there is no single trailing word for `pretty` to pull down. Balancing
     splits it into two even halves instead of leaving "GDPR" alone.
     `nowrap` on the links themselves is what makes that safe — without it
     balancing is free to break inside "Privacy Policy", which reads worse
     than the orphan it was fixing. */
  .footer-general .text-block-261{
    text-wrap:balance;
    line-height:1.85!important;
  }
  .footer-general .text-block-261 a{white-space:nowrap!important;}
  .footer-general .div-block-538{margin-left:-8px!important;}
  .footer-general .footer-devider-line{margin:36px 0 18px!important;}
}

/* --------------------------------------------------------------------------
   Footer link columns. Two columns leaves each one 157px on a 390 phone, and
   "Product Strategy Playbook" needs about 175px — so it wraps, and no amount
   of balancing helps because there is no break that fits. Below 480 the pair
   becomes a single column and every label gets its own line back. Two columns
   survive from 480 up, where they do fit.
   -------------------------------------------------------------------------- */
@media (max-width:479px){
  .footer-general .div-block-469{grid-template-columns:minmax(0,1fr)!important;row-gap:34px!important;}
}