/* ===== tokens ===== */
:root{--ylblue:#286dc0;--yxlblue:#3c6cba;--navy:#0a3a6b;--navy-2:#0b3f77;--ink:#0f172a;--ink-2:#334155;--gray-0:#f8fafc;--gray-1:#eef2f7;--gray-2:#e5e7eb;--link:#0b5bd3;--radius:10px;--article-max:980px}

/* ===== Yale Typeface (Web) =====
   Usage restricted to Yale projects. Host on Yale-controlled domains. */
@font-face{
  font-family:"Yale 2024";
  src:url("/assets/fonts/Yale2024-Roman.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Yale 2024";
  src:url("/assets/fonts/Yale2024-Italic.otf") format("opentype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Yale 2024";
  src:url("/assets/fonts/Yale2024-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Yale 2024";
  src:url("/assets/fonts/Yale2024-BoldItalic.otf") format("opentype");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}

/* Optional utility for wordmarks/text in Yale type */
.yale-wordmark{
  font-family:"Yale 2024","Times New Roman",Times,serif;
  line-height:1;
  display:inline-block;
  white-space:nowrap;
  font-size:clamp(18px,3vw,36px);
  color:#fff;
}

/* ===== base & layout ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);background:#fff;font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;min-height:100svh}
main{flex:1}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* ===== buttons ===== */
.btn{display:inline-block;padding:.5rem .75rem;border-radius:.375rem;font-weight:600;text-decoration:none;transition:filter .15s ease}
.btn-primary,.btn-primary:link,.btn-primary:visited{background:var(--ylblue);color:#fff}
.btn-primary:hover{filter:brightness(.95)}

/* ensure buttons inside prose keep contrast */
.prose a.btn,.prose a.button{color:inherit;text-decoration:none}
.prose a.btn-primary{color:#fff!important}

/* ===== header (two-sided navbar) ===== */
.site-header{background:var(--navy);color:#fff}
.site-header.navbar{border-bottom:7px solid var(--ylblue)}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.2rem;gap:1rem}
.site-header .header-inner > *{min-width:0} /* allow flex children to shrink */
.brand{display:flex;align-items:center;gap:.5rem;min-width:0}
.spinup-logo{width:36px;height:36px;display:block}
.brand .wordmark{color:#fff;font-weight:700;letter-spacing:.2px;white-space:normal}
.logo-animation:hover{animation:spin .7s cubic-bezier(.2,.5,.3,1) 1}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.nav{display:flex;align-items:center;gap:1rem;min-width:0}
.nav a{color:#fff;font-weight:600}
.nav a:hover{text-decoration:underline}
.nav-item.active{border-bottom:3px solid #fff}
.dropdown-menu{position:absolute;z-index:50;background:#fff;border-top:7px solid var(--yxlblue);margin:.5rem 0 0;border-radius:0;box-shadow:rgba(255,255,255,.1) 0 1px 1px 0 inset,rgba(50,50,93,.25) 0 50px 100px -20px,rgba(0,0,0,.3) 0 30px 60px -30px;max-height:66vh;overflow-y:auto;overflow-x:hidden}
#spaces-dropdown{max-width:300px}
#alerts-dropdown{margin-top:10px;width:400px}
.dropdown-item{display:block;padding:.5rem .75rem;color:var(--ink)}
.dropdown-item:hover{background:var(--gray-1)}
.dot{height:8px;width:8px;background:var(--yxlblue);border-radius:50%;position:absolute;top:10px;left:6px}
@media(max-width:992px){
  .dropdown-menu{min-width:100%;margin:0;max-width:calc(100vw - 1rem);overflow-x:hidden}
  #alerts-dropdown{min-width:100%;margin:0}
}

/* ===== article pages only (do NOT touch homepage) ===== */
main.article>.container{max-width:1100px;margin:0 auto;padding:0 1.25rem 2rem}
main.article .page-header,main.article .prose{max-width:var(--article-max);margin:0 auto}
.prose{font-size:1rem}
.prose h1{margin:1.25rem 0 .5rem;font-size:2rem}
.prose h2{margin:1.5rem 0 .5rem;font-size:1.35rem}
.prose h3{margin:1rem 0 .35rem;font-size:1.1rem}
.prose p{margin:.5rem 0}
.prose ul{margin:.5rem 0 .75rem 1.2rem}
.prose table{width:100%;border-collapse:collapse;margin:.75rem 0}
.prose th,.prose td{border:1px solid var(--gray-2);padding:.5rem .6rem;font-size:.95rem;text-align:left}
.prose th{background:var(--gray-1);font-weight:600}

/* Platforms overview: subtle framed article and pills */
.page.article.platform-page .page-header{margin-top:1.5rem}
.page.article.platform-page .prose,
main.article .prose.pill-article{
  margin:1.25rem auto 0;
  padding:1.25rem 1.4rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid var(--gray-2);
  background:
    radial-gradient(140% 140% at -10% -20%, rgba(40,109,192,.06), transparent 60%),
    #fff;
}
.platform-hero{margin:0 0 1rem}
.platform-hero-title{margin:0 0 .35rem;font-size:1.4rem}
.platform-hero p{margin:.25rem 0 .6rem;color:var(--ink-2)}
.platform-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem .6rem;
  padding:0;
  margin:.35rem 0 0;
  list-style:none;
  color:var(--ink-2);
}
.platform-pill{
  border-radius:999px;
  border:1px solid var(--gray-2);
  padding:.18rem .6rem;
  background:var(--gray-0);
  font-size:.85rem;
}

/* ===== cards ===== */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0}
.card{display:block;padding:1rem;border:1px solid var(--gray-2);border-radius:var(--radius);background:#fff}
.card h3{margin:0 0 .25rem;font-size:1.1rem}
.card p{margin:.25rem 0 .5rem;color:var(--ink-2)}
.card .link{font-weight:600}

/* ===== tables & utilities ===== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--gray-2);padding:.5rem .6rem}
.table th{background:var(--gray-1)}
.notice{
  margin:1rem 0;
  padding:.65rem .85rem;
  border-radius:.375rem;
  border-left:4px solid var(--ylblue);
  background:var(--gray-0);
  font-size:.95rem;
}
.text-center{text-align:center}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:1rem}
.hidden{display:none!important}

/* ===== footer (sticky, navy, top stripe) ===== */
#footer.site-footer{background:var(--navy);color:#fff;border-top:7px solid var(--ylblue)}
.site-footer .footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:1.25rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.site-footer a{color:#fff;text-decoration:underline}
.site-footer a:hover{color:var(--ylblue);transition:all .15s ease}
.site-footer .copyright{border-top:1px solid var(--yxlblue);padding:.75rem 0;color:#eee}

/* ===== HOMEPAGE (scoped) ===== */
.home .section-title{margin:.25rem 0 1rem;font-size:1.4rem}
.home .home-wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}

/* HERO */
.home-hero{
  background:
    radial-gradient(120% 120% at -10% -20%, rgba(40,109,192,.12), transparent 60%),
    linear-gradient(180deg,#fff 0%, #f7fbff 100%);
  border-bottom:1px solid var(--gray-2);
  padding:1.75rem 0 1.25rem;
}
.home-hero .home-wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem;align-items:center;
}
.home-hero .eyebrow{font-size:.85rem;letter-spacing:.04em;color:var(--ink-2);margin:0 0 .25rem;text-transform:uppercase}
.home-hero h1{font-size:clamp(2rem,2.4vw + 1rem,2.6rem);line-height:1.12;margin:.2rem 0 .6rem}
.home-hero .lead{margin:0 0 .9rem;color:var(--ink-2)}
.home-hero .cta-row .btn{margin-right:.5rem}
.home-hero .ticks{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:.9rem 0 0;padding:0;list-style:none;color:var(--ink-2)}
.home-hero .ticks li{position:relative;padding-left:1.1rem}
.home-hero .ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:999px;background:var(--ylblue)}
.home-hero-art{margin:0}
.home-hero-art img{
  display:block;width:100%;max-width:440px;margin:0 auto;
  aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;
  border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* PATH CHOOSER */
.home-chooser{background:#fff;border-bottom:1px solid var(--gray-2);padding:1rem 0}
.cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.choice{display:block;padding:1rem;border:1px solid var(--gray-2);border-radius:var(--radius);background:#fff}
.choice h3{margin:0 0 .25rem;font-size:1.15rem}
.choice p{margin:.25rem 0 .5rem;color:var(--ink-2)}
.choice .link{font-weight:600}

/* POPULAR SERVICES */
.home-services{padding:1.25rem 0}

/* TOP TASKS */
.home-tasks{padding:.5rem 0 1.5rem;border-top:1px solid var(--gray-2)}

/* TRUST STRIP */
.home-trust{background:linear-gradient(180deg,#f6f9ff 0%, #fff 100%);border-top:1px solid var(--gray-2);padding:1.25rem 0}
.trust-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:center}
.trust-grid .actions .btn{margin-right:.5rem}

/* Buttons on light sections */
.btn{background:#e9eef8}
.btn:hover{text-decoration:none}
.btn.btn-primary{background:var(--ylblue);color:#fff}

/* Responsive */
@media (max-width:980px){
  .home-hero .home-wrap,.trust-grid{grid-template-columns:1fr;gap:1rem}
  .home-hero-art img{max-width:100%;aspect-ratio:16/10}
  .cards-2{grid-template-columns:1fr}
}

/* ===== Mobile header & overflow fixes ===== */

/* Prevent accidental horizontal scroll on mobile */
html,body{overflow-x:hidden}

/* Keep dropdowns within the viewport on small screens */
@media (max-width:992px){
  .dropdown-menu{
    max-width:calc(100vw - 1rem);
    overflow-x:hidden;
  }
}

/* Stack the header elements and wrap nav on phones */
@media (max-width:640px){
  .site-header .header-inner{
    flex-wrap:wrap;
    align-items:flex-start;
    padding:.6rem .9rem;
    gap:.5rem .75rem;
  }
  .brand .wordmark{
    font-size:.95rem;
    line-height:1.2;
    white-space:normal; /* allow wrapping */
  }
  .nav{
    width:100%;
    flex-wrap:wrap;       /* let links flow to multiple rows */
    gap:.5rem .75rem;
    justify-content:flex-start;
  }
  .nav a{
    display:inline-block;
    padding:.25rem 0;
  }
  /* Footer compaction */
  .site-footer .footer-inner{flex-wrap:wrap;gap:.5rem .75rem}
  .site-footer .yale-wordmark{font-size:clamp(16px,4vw,20px)}
}