:root{
  --brand-dark: #0F2B44;
  --brand-accent: #F5976D;
  --muted: #6b7280;
  --container: 1140px;
  --service-collapsed-height: 72px;
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--brand-dark);background:#fff;-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:0 22px}

/* Ensure main content clears fixed header */
main{padding-top:18px}

/* Header */
.site-header{
  position:fixed;
  top:0;left:0;width:100%;
  z-index:60;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(15,43,68,0.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.logo-container{display:flex;align-items:center;gap:12px;text-decoration:none}
.site-logo-img{height:44px;width:auto;display:block}
.logo-text{font-weight:800;color:var(--brand-dark);font-size:18px;line-height:1}
.logo-text .accent{color:var(--brand-accent)}

/* Nav */
.nav{display:flex;align-items:center;gap:18px}
.nav a{color:var(--brand-dark);text-decoration:none;font-weight:600;padding:8px 6px;border-radius:6px}
.nav a:hover{background:rgba(15,43,68,0.03)}
.btn{padding:8px 14px;border-radius:999px;font-weight:700}
.btn.login{background:transparent;border:1px solid transparent;color:var(--brand-dark)}
.btn.signup{background:var(--brand-accent);color:var(--brand-dark);box-shadow:0 6px 20px rgba(245,151,109,0.18);border:none}

/* mobile toggle */
.nav-toggle{display:none;background:none;border:0;font-size:20px}

/* Hero */
.hero{position:relative;height:92vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:72px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,43,68,0.22),rgba(15,43,68,0.44));z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;color:white;padding:40px}
.hero h1{font-size:clamp(30px,5vw,56px);margin:0 0 12px;line-height:1.02;font-weight:800}
.hero-sub{max-width:820px;margin:0 auto 20px;color:rgba(255,255,255,0.95);font-size:1.05rem}
.hero-cta{display:flex;gap:14px;justify-content:center}
.cta{display:inline-block;padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:700}
.cta.primary{background:var(--brand-accent);color:var(--brand-dark)}
.cta.ghost{background:transparent;border:2px solid rgba(255,255,255,0.16);color:#fff}

/* Hero badge for Partner Tools */
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.9);
  border:1px solid rgba(15,43,68,0.12);
  color:var(--brand-dark);
  font-size:0.78rem;
  margin-bottom:14px;
}
.hero-badge-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--brand-accent);
  box-shadow:0 0 8px rgba(245,151,109,0.6);
}
.hero-badge a{
  color:var(--brand-accent);
  text-decoration:none;
  font-weight:600;
}
.hero-badge a:hover{
  text-decoration:underline;
}

/* Sections */
.section{padding:72px 0}
.section > .container > h2{margin:0 0 10px; text-align:center}
.lede{color:var(--muted);max-width:880px;margin:10px auto 28px;text-align:center;line-height:1.6}

/* Grid helpers */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .grid-3,.grid-2{grid-template-columns:1fr} }

/* Cards */
.card{background:white;border-radius:14px;padding:20px;box-shadow:0 6px 20px rgba(15,43,68,0.06)}
.case{background:linear-gradient(180deg,#fff,#fff);border-radius:14px;padding:22px;box-shadow:0 8px 30px rgba(15,43,68,0.04)}
.case-stat{font-size:28px;color:var(--brand-accent);font-weight:800;margin-bottom:6px}

/* Steps */
.steps{list-style:none;padding:0;margin:20px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left}
@media (max-width:900px){ .steps{grid-template-columns:1fr} }
.steps li{background:#fff;padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(15,43,68,0.04)}

/* --------------------------
   ABOUT (centered column)
   -------------------------- */

/*
  Key change: use a centered single column for About content so the whole block
  sits in middle of the page. The image displays below the copy and will
  drop to the top on mobile. This guarantees the visual center alignment.
*/

.about-grid{
  /* single centered column approach for predictable centering */
  display:block;
  max-width:980px;
  margin:0 auto;
  padding:0 22px;
}
.about-text{
  max-width:820px;
  margin:0 auto;         /* center horizontally */
  text-align:center;     /* center heading and lead */
  padding:4px 8px 0;
}
.about-text h2{margin-top:0;text-align:center}
.about-text p{color:#475569;line-height:1.7;margin:0 auto 18px}
.about-list{
  margin-top:18px;
  line-height:1.7;
  text-align:left;       /* keep list items left-aligned for readability */
  display:block;
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  padding-left:18px;     /* ensure bullets indent nicely */
}

/* show about image below text, centered */
.about-image{
  display:block;
  max-width:380px;
  margin:22px auto 0;
}
.about-image img{max-width:100%;border-radius:12px;display:block}

/* SERVICES */
.services-expanded{background:linear-gradient(180deg,#ffffff,#fbfbff)}
/* narrow and center container for services */
.services-expanded .container{
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  padding-left:22px;
  padding-right:22px;
}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:18px;align-items:start;max-width:980px;margin-left:auto;margin-right:auto}
@media (max-width:900px){.service-grid{grid-template-columns:1fr;padding:0 14px}}
.service{position:relative;background:#fff;border-radius:12px;padding:0;box-shadow:0 10px 30px rgba(15,43,68,0.06);overflow:hidden;transition:transform .28s ease,box-shadow .28s ease;min-height:var(--service-collapsed-height);display:flex;flex-direction:column}
.service:focus{outline:2px solid rgba(15,43,68,0.06)}
/* title */
.service-title{padding:18px 22px;font-size:18px;margin:0;cursor:pointer;background:transparent;display:flex;align-items:center;justify-content:space-between}
.service-title .st-left{display:flex;align-items:center;gap:12px}
.service-title small{font-size:13px;color:var(--muted);display:block}
/* body */
.service-body{padding:0 22px 22px 22px;color:#374151;max-height:0;overflow:hidden;transition:max-height .28s ease,opacity .28s ease,transform .28s ease;opacity:0;transform:translateY(6px);width:100%}
/* show on hover or when aria-expanded true */
.service[aria-expanded="true"] .service-body,
.service:hover .service-body{
  max-height:1200px;
  opacity:1;
  transform:translateY(0);
}
/* collapsed title styling (default) */
.service:not([aria-expanded="true"]) .service-title{height:var(--service-collapsed-height);padding-left:22px;padding-right:22px}
/* highlight style */
.service.highlight{border:2px solid rgba(15,43,68,0.06);transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,43,68,0.08)}
.service.highlight .service-title{background:rgba(15,43,68,0.04);color:var(--muted)}
/* content details */
.summary{color:#4b5563;margin:8px 0;line-height:1.6}
.extra{color:#475569;margin-bottom:10px}
.details{margin:8px 0 12px 0;color:#374151;padding-left:18px;line-height:1.6}
.sub-block{background:#f8fafc;border-radius:8px;padding:10px 12px;margin-top:8px}
.mini{font-size:13px;color:#6b7280}

/* Partner Tools section – match Case Study card style */
.section.tools{
  background:#fff;
  border-top:1px solid rgba(15,43,68,0.06);
  border-bottom:1px solid rgba(15,43,68,0.06);
}

.tools-grid{
  margin-top:24px;
}

/* Make tool cards look like .case cards */
.tool-card{
  background:linear-gradient(180deg,#fff,#fff);
  border-radius:14px;
  padding:22px;
  box-shadow:0 8px 30px rgba(15,43,68,0.04);
  text-align:left;
}

.tool-card h3{
  margin:0 0 8px;
  font-size:1rem;
}

.tool-card p{
  font-size:0.86rem;
  color:#4b5563;
  line-height:1.6;
}

.tool-tag{
  margin-top:6px;
  font-size:0.8rem;
  color:#6b7280;
  font-weight:600;
}

/* Keep "Open tool →" as a clean text link inside the card */
.tool-link{
  display:inline-block;
  margin-top:10px;
  font-size:0.85rem;
  color:#0F2B44;
  text-decoration:underline;
  text-underline-offset:2px;
}

.tool-link:hover{
  color:var(--brand-accent);
}

/* Footer line under cards */
.tools-footer{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  font-size:0.86rem;
  color:var(--muted);
}

.btn.small{
  padding:8px 16px;
  font-size:0.82rem;
}

/* Mobile layout for footer */
@media (max-width:900px){
  .tools-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* FAQ */
.accordion{max-width:900px;margin:0 auto}
.acc-item{margin-bottom:12px;border-radius:8px;overflow:hidden;border:1px solid rgba(10,20,30,0.06)}
.acc-btn{background:#fff;width:100%;text-align:left;padding:16px;font-weight:700;cursor:pointer;border:0}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 16px;background:#fbfbfb}

/* NEWSLETTER */
.newsletter-inner{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px}
.newsletter-inner h3{margin:0;text-align:center;width:100%}
.newsletter-form{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
.newsletter-form input{padding:12px 14px;border-radius:8px;border:1px solid #e6e6e6}
.newsletter-form button{padding:10px 14px;border-radius:8px;border:1px solid rgba(15,43,68,0.12);background:transparent;font-weight:700}

/* contact & newsletter & footer */
.contact-form{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.form-row{display:flex;gap:12px}
.form-row input{flex:1;padding:12px;border-radius:10px;border:1px solid #e6e6e6}
textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #e6e6e6}
.btn.submit{background:var(--brand-dark);color:#fff;border:none;padding:12px 18px;border-radius:10px}
.btn.alt{background:transparent;border:2px solid var(--brand-dark);padding:10px 14px;border-radius:10px;color:var(--brand-dark)}

/* center headings inside sections */
.section .container h2{display:block;margin-left:auto;margin-right:auto;text-align:center}
.section .container .lede{margin-left:auto;margin-right:auto;text-align:center}

/* Footer */
.site-footer{background:var(--brand-dark);color:#fff;padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
.logo-footer{height:36px}
.footer-links a{color:rgba(255,255,255,0.85);text-decoration:none;margin-left:14px}

/* small screens */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .nav a{display:none}
  .nav-toggle{display:block}
  .header-inner{gap:12px}
  .hero{height:78vh;padding-top:64px}
  .site-header{padding:8px 0}
  .service-body{padding:12px 16px}
  .service-title{padding:12px 16px}
  .about-grid{padding-left:12px;padding-right:12px}
  .about-image{width:100%;max-width:600px;margin-bottom:18px}
  .about-text{padding-left:14px;padding-right:14px}
  .services-expanded .container{padding-left:16px;padding-right:16px}
  .service-grid{gap:18px;grid-template-columns:1fr}
  .newsletter-form{flex-direction:column}
}

/* Mobile tweaks for tools footer */
@media (max-width:900px){
  .tools-footer{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* Large-screen tightening */
@media (min-width:1400px) {
  .container { max-width: 1180px; }
  .services-expanded .container { max-width: 1100px; }
}

/* -------------------------
   Policy pages: center only the main title + small lede
   Leave all other content left-aligned.
   Applies only to pages using: <main class="section policy">
   ------------------------- */
main.section.policy .policy-title {
  text-align: center;
  font-size: 34px;
  margin-top: 10px;
  margin-bottom: 6px;
  color: var(--brand-dark);
}

main.section.policy .policy-lede {
  text-align: center;
  color: #6b7280;
  margin-bottom: 26px;
  font-size: 15px;
}

/* Ensure the rest of the content remains left-aligned */
main.section.policy .container > :not(.policy-title):not(.policy-lede) {
  text-align: left;
}

/* Keep lists and paragraphs readable (narrower column) */
main.section.policy .container {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* Slight spacing improvements on small screens */
@media (max-width:900px){
  main.section.policy .container { padding-left: 14px; padding-right: 14px; }
  main.section.policy .policy-title { font-size: 28px; }
}