/* ===== Tokens ===== */
:root{
  --font: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  --brand: #1d4ed8;
  --ink: #0f172a;
  --text: #111827;
  --muted: #6b7280;
  --grey: #e5e7eb;
  --grey-text: #374151;
  --border: #e5e7eb;
  --radius: 14px;
  --maxw: 1240px;

  --logo-h: 50px;                 /* 25% bigger */
  --thumb: clamp(140px, 16.6vw, 300px);
  --sub-indent: 0ch;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:var(--font); color:var(--text); background:#fff; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
h1,h2,h3{ color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:16px; }
.site-header + .hero{ margin-top:6px; }

.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); margin-left:-6px; }
.logo{ height:var(--logo-h); width:auto; border-radius:12px; }
.brand-text{ font-weight:400; font-size:22px; }
.brand-strong{ font-weight:800; } .brand-regular{ font-weight:400; }
.brand.has-wordmark .brand-text{ display:none; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav-list{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.nav-list a{ position:relative; text-decoration:none; color:var(--text); font-weight:500; padding:6px 2px; transition:color .15s ease; }
.nav-list a::after{ content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--brand); transition:width .18s ease; }
.nav-list a:hover{ color:var(--ink); } .nav-list a:hover::after{ width:100%; }

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-toggle{
  display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid transparent;
  color:var(--text); font:500 1rem var(--font); padding:6px 8px; border-radius:10px; cursor:pointer;
}
.dropdown::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; pointer-events:auto; }
.dropdown-toggle:hover{ background:#f8fafc; }
.dropdown-toggle svg{ width:14px; height:14px; transition:transform .15s ease; }
.dropdown-menu{
  position:absolute; top:calc(100% + 12px); left:0; min-width:230px; list-style:none; margin:0; padding:6px;
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,.10);
  opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .15s, transform .15s; z-index:1000;
}
.dropdown-menu a{ display:block; padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none; }
.dropdown-menu a:hover{ background:#f8fafc; }
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }
.dropdown.open .dropdown-toggle svg,
.dropdown:hover .dropdown-toggle svg,
.dropdown:focus-within .dropdown-toggle svg{ transform:rotate(180deg); }

/* Buttons */
.nav-cta{ display:flex; align-items:center; gap:22px; }
.btn{ display:inline-block; border-radius:12px; font-weight:700; padding:.65rem 1rem; text-decoration:none; cursor:pointer; transition:transform .06s, background .2s, color .2s, box-shadow .2s; border:1px solid transparent; }
.btn-grey{ background:var(--grey); color:var(--grey-text); } .btn-grey:hover{ filter:brightness(0.98); }
.btn-primary{ background:#1d4ed8; color:#fff; box-shadow:none; } .btn-primary:hover{ transform:translateY(-1px); } .btn-primary:active{ transform:translateY(0); }
.btn-white{ background:#fff; color:var(--ink); border-color:#CBD5E1; } .btn-white:hover{ box-shadow:0 6px 18px rgba(15,23,42,.08); }
.btn-lg{ padding:.9rem 1.25rem; border-radius:14px; }
.btn-sm{ padding:.4rem .7rem; border-radius:8px; font-size:.9rem; font-weight:700; }

/* Mobile nav */
.menu-toggle{ display:none; width:40px; height:40px; border:none; background:transparent; padding:8px; cursor:pointer; }
.menu-toggle span{ display:block; height:2px; background:#111827; margin:6px 0; }
@media (max-width:900px){
  .menu-toggle{ display:block; }
  .nav{ position:fixed; inset:74px 0 0 0; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); flex-direction:column; align-items:flex-start; padding:16px 20px; gap:16px; max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .nav.open{ max-height:80vh; }
  .nav-list{ flex-direction:column; gap:10px; }
  .nav-cta{ width:100%; } .nav-cta .btn{ width:100%; text-align:center; }
}

/* ===== Hero ===== */
.hero{ padding:64px 0 0; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:48px; align-items:center; }
@media (max-width:1100px){ .hero{ padding:56px 0 0; } .hero-grid{ grid-template-columns:1fr; gap:28px; } }

/* Badge */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:4px; background:#2563eb; color:#fff;
  font-weight:400; font-size:.95rem; margin-bottom:6px;
}
.badge:hover{ background:#1800ad; }
.badge-italic{ font-style:italic; font-weight:400; }

.hero-copy h1{ margin:6px 0 10px; line-height:1.08; font-size: clamp(2.35rem, 2.8vw + 1.2rem, 3.6rem); font-weight:800; }
.line1{ font-weight:400; color:var(--ink); } .line2{ font-weight:800; }
.realistic{ font-weight:400; color:var(--ink); } .blue-bold{ font-weight:700; color:#1d4ed8; }
.hero-copy .sub{ color:#605e5e; max-width:60ch; margin:10px 0 22px; padding-left:var(--sub-indent); }

.hero-media{ display:flex; justify-content:center; }
.hero-visual{ width: clamp(340px, 44vw, 340px); height:auto; border-radius:16px; box-shadow:0 20px 50px rgba(2,6,23,.18); background:#eef1f8; }

/* Faces scrolling strip */
.faces-marquee{ margin:28px 0 8px; overflow:hidden; position:relative; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.faces-track{ display:flex; gap:14px; align-items:center; animation: scrollx 30s linear infinite; }
.faces-marquee:hover .faces-track{ animation-play-state: paused; }
.faces-track img{ width: var(--thumb); height: var(--thumb); object-fit: cover; border-radius: 16px; box-shadow: 0 10px 24px rgba(2,6,23,.10); background: #f3f4f6; }
@keyframes scrollx{ from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* As seen on */
.as-seen{ display:flex; align-items:center; justify-content:center; gap:18px; margin:12px 0 0; }
.as-seen-text{ font-weight:300; color:#111827; opacity:.75; }
.as-seen-img{ height:40px; width:auto; filter:saturate(.9) contrast(1.05); }

/* ===== How it works ===== */
.howitworks{ padding: 18px 0 48px; }
.how-title{ text-align:center; font-size: clamp(1.8rem, 1.2vw + 1.4rem, 2.6rem); font-weight:800; margin:0 0 6px; letter-spacing:-0.01em; }
.how-title span{ color:#1d4ed8; }
.how-sub{ text-align:center; color: var(--muted); margin:0 0 26px; font-weight:400; }

.steps-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 22px 28px;
  align-items:start;
}
@media (max-width:900px){ .steps-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); } }
@media (max-width:640px){ .steps-grid{ grid-template-columns: 1fr; } }
.step{ display:flex; flex-direction:column; gap:10px; }
.step-card{
  display:block; text-decoration:none; color:inherit;
  border: 2px solid #1d4ed8; border-radius:16px; overflow:hidden; background:#f8fafc;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease; cursor:pointer;
}
.step-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 28px rgba(2,6,23,.12); }
.step-card:active{ transform: translateY(0); }
.step-card img{ display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:1/1; }
.step-copy{ text-align:center; }
.step-copy h3{ margin:6px 0 4px; font-size:1rem; font-weight:800; }
.step-copy p{ margin:0; color:var(--muted); font-size:.95rem; }

/* ===== Talking AI card ===== */
.ai-section{ padding: 10px 0 40px; }
.ai-card{
  border: 2px solid #2563eb; border-radius: 16px; background:#fff;
  padding: 22px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:22px;
}
.ai-title{ margin: 0 0 6px; font-weight:400; font-size:clamp(1.4rem,1.2vw+1.1rem,2rem); color:var(--ink); }
.ai-sub{ margin: 0 0 16px; font-size:clamp(1.3rem,1vw+1rem,1.8rem); }
.ai-strong-blue{ color:#1d4ed8; font-weight:800; }
.ai-image{ width:clamp(220px,32vw,320px); height:auto; border-radius:14px; box-shadow:0 12px 28px rgba(15,23,42,.12); object-fit:cover; }
@media (max-width:960px){ .ai-card{ grid-template-columns:1fr } .ai-image{ justify-self:end } }

/* ===== Headshots for Everyone ===== */
.headshots{ padding: 6px 0 44px; }
.hs-title{ margin:8px 0 14px; font-weight:700; font-size:clamp(1.4rem,1.2vw+1rem,2rem); color:#111827; }
.hs-title span{ color:#1d4ed8; font-weight:800; }

.hs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:1000px){ .hs-grid{ grid-template-columns:1fr; } }

.hs-card{
  border:2px solid #2563eb; border-radius:16px; background:#fff;
  padding:16px; display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:center;
}
.hs-left .hs-list{ margin:0; padding:0; list-style:none; }
.hs-option{ padding:.35rem 0; cursor:pointer; user-select:none; outline:none; border-radius:6px; }
.hs-option:hover{ color:#1d4ed8; }
.hs-option.active{ color:#1d4ed8; font-weight:800; }

.hs-image{ width:clamp(210px,32vw,310px); height:auto; border-radius:12px; box-shadow:0 12px 28px rgba(15,23,42,.12); object-fit:cover; }
.hs-right{ grid-template-columns: 1fr auto; } /* text then small image */
.hs-right-copy{ align-self:center; }
.hs-image-small{ width:100px; height:100px; object-fit:cover; border-radius:12px; }
.hs-career{ margin:0; font-weight:400; color:#111827; font-size:clamp(1.2rem,1vw+1rem,1.6rem); }
.hs-career span{ color:#1d4ed8; font-weight:800; }
.hs-cta{ display:flex; gap:10px; margin-top:10px; }

/* fade on image swap */
.hs-image.fade{ opacity:0; transition:opacity .18s ease; }
.hs-image.show{ opacity:1; transition:opacity .18s ease; }

/* ===== SHOWCASE (Swipe + Right column) ===== */
.showcase{ padding: 10px 0 56px; background:#fff; }
.showcase-grid{ display:grid; grid-template-columns: 2fr 1.2fr; gap:24px; align-items:start; }

.sc-title{ margin:0 0 14px; font-weight:800; color:#111827; font-size:clamp(1.5rem,1.4vw+1.2rem,2.2rem); }
.sc-title span{ color:#1d4ed8; }

.ba-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1000px){ .showcase-grid{ grid-template-columns:1fr; } }
@media (max-width:800px){ .ba-row{ grid-template-columns:1fr; } }

.ba-card{ padding:10px; border-radius:16px; background:#fff; border:2px solid #2563eb; }
.ba-wrap{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1/1; --pos:50%; }
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-img.before{ width:var(--pos); border-right:2px solid rgba(0,0,0,.85); }
.ba-handle{
  position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; border:2px solid rgba(0,0,0,.85);
  background:#fff; color:#111; display:flex; align-items:center; justify-content:center;
  cursor:ew-resize;
}

/* info banner under swipes */
.info-banner{
  border:2px solid #2563eb; border-radius:14px; padding:14px 16px; margin-top:16px; background:#fff;
}
.info-line1{ margin:0; font-weight:700; font-size:clamp(1.1rem,1vw+1rem,1.5rem); color:#111827; }
.info-line1 span{ color:#1d4ed8; }
.info-line2{ margin:4px 0 0; font-weight:800; font-size:clamp(1.2rem,1vw+1rem,1.6rem); color:#111827; }
.info-line2 span{ color:#1d4ed8; }

/* Right column results */
.vr-title{ margin:0 0 10px; font-weight:400; color:#111827; font-size:clamp(1.2rem,1vw+1rem,1.6rem); }
.vr-title strong{ color:#1d4ed8; font-weight:800; }

.vr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.vr-tall{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; box-shadow:0 10px 24px rgba(2,6,23,.10); }
.vr-small{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; box-shadow:0 10px 24px rgba(2,6,23,.10); }
.vr-prompt{
  border:1.5px solid #CBD5E1; border-radius:12px; padding:10px 12px; background:#fff;
  box-shadow:0 6px 16px rgba(2,6,23,.06);
}
.vr-prompt h4{ margin:0 0 6px; font-size:1rem; }
.vr-prompt p{ margin:0; color:#374151; font-size:.95rem; line-height:1.35; }

/* Temp spacer for anchors */
/* OLD caused big gaps:
.spacer{ height:40vh; border-top:1px dashed #eee; }
*/

.spacer{
  height:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* ===== Pricing ===== */
.pricing{ padding:36px 0 64px; }
.pricing-title{
  text-align:center; margin:0 0 18px;
  font-weight:800; color:#111827; letter-spacing:-0.01em;
  font-size:clamp(1.6rem,1.6vw+1.2rem,2.2rem);
}
.pricing-title span{ color:#1d4ed8; }

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(180px,1fr));
  gap:18px;
}
@media (max-width:1100px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .pricing-grid{ grid-template-columns:1fr; } }

.price-card{
  background:#fff; border:2px solid #2563eb; border-radius:14px;
  padding:16px; display:flex; flex-direction:column; gap:10px;
  box-shadow:0 6px 14px rgba(2,6,23,.04);
}
.price-card h3{ margin:0; font-size:1rem; font-weight:800; color:#111827; }
.price-card .title-blue{ color:#1d4ed8; font-weight:800; }

.price{ color:#111827; font-weight:800; }
.price span{ font-size:2rem; letter-spacing:-0.02em; }

.features{ list-style:none; margin:8px 0 0; padding:0; color:#374151; line-height:1.45; }
.features li{ margin:2px 0; }

.price-card .btn{ width:100%; margin-top:auto; text-align:center; }

/* Popular badge */
.price-card.popular{ position:relative; }
.badge-popular{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:#10b981; color:#fff; padding:4px 10px; border-radius:999px;
  font-size:.7rem; font-weight:800; letter-spacing:.02em;
}

/* ---- spacing fix between sections ---- */
.showcase { padding-bottom: 20px; }   /* was 56px */
.pricing  { padding-top: 18px; }      /* was 36px */

/* ---- pricing heading weights/colors ---- */
.pricing-title { font-weight: 400; }
.pricing-title .pricing-at      { color:#111827; font-weight:400; }
.pricing-title .pricing-accent  { color:#1d4ed8; font-weight:800; }

/* ---- popular badge & card (red urgency) ---- */
.price-card.popular{
  border-color:#ef4444;
  box-shadow:0 10px 24px rgba(239,68,68,.15);
}

.badge-popular{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:#ef4444; color:#fff;
  padding:6px 12px;
  border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  border:2px solid #fff;                     /* white ring for contrast */
  box-shadow:0 6px 16px rgba(239,68,68,.35); /* subtle pop */
}
/* --- Pricing tweaks: smaller green popular badge --- */

/* reset the card so it matches others */
.price-card.popular{
  border-color:#2563eb;      /* back to blue */
  box-shadow:none;           /* remove red glow */
}

/* compact, readable green pill */
.badge-popular{
  background:#10b981;        /* green again */
  color:#fff;
  top:-10px;                 /* a touch closer to the card */
  padding:4px 8px;           /* smaller pill */
  font-size:.62rem;          /* smaller text */
  font-weight:800;
  letter-spacing:.02em;
  border-radius:999px;
  border:1px solid #fff;     /* subtle white ring */
  box-shadow:0 4px 10px rgba(16,185,129,.25);
  white-space:nowrap;
  text-transform:uppercase;
}/* smooth hover transitions for pricing cards */
.price-card{
  transition: background .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .12s ease;
}

/* hover/focus highlight: full aqua container */
.price-card:hover,
.price-card:focus-within{
  background:#5eead4;            /* aqua fill */
  border-color:#22d3ee;          /* aqua border */
  box-shadow:0 12px 26px rgba(34,211,238,.25);
  transform:translateY(-3px);
}

/* keep text readable on aqua */
.price-card:hover h3,
.price-card:hover .title-blue,
.price-card:hover .price,
.price-card:hover .features{
  color:#0f172a;                 /* very dark ink */
}

/* keep the CTA legible; optional slight lift */
.price-card:hover .btn.btn-primary{
  transform:translateY(-1px);
}
/* === Pricing: gradient hover + white text === */
.price-card{
  transition: background .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .12s ease, color .2s ease;
  will-change: transform;
}

.price-card:hover,
.price-card:focus-within{
  /* your gradient */
  background: linear-gradient(135deg, #0061d6 0%, #1800ad 100%);
  border-color:#1800ad;
  box-shadow:0 14px 28px rgba(0, 24, 173, .28);
  transform:translateY(-3px);
}

/* make all inner text white on hover */
.price-card:hover h3,
.price-card:hover .title-blue,
.price-card:hover .price,
.price-card:hover .price span,
.price-card:hover .features,
.price-card:hover .features li{
  color:#fff;
}

/* keep the CTA readable on the gradient */
.price-card:hover .btn.btn-primary{
  background:#fff;
  color:#0f172a;
  border-color:#fff;
  transform:translateY(-1px);
}

/* optional: keep the green popular pill crisp on gradient */
.price-card.popular .badge-popular{
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 16px rgba(16,185,129,.35);
}
/* Popular badge in brand blue */
.price-card.popular { border-color:#2563eb; }

.price-card.popular .badge-popular{
  background:#2563eb;
  color:#fff;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 14px rgba(37,99,235,.28);
}

/* keep it crisp when the card uses the gradient hover */
.price-card:hover .badge-popular{
  border-color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.35);
}
/* Keep pricing CTAs unchanged on card hover */
.price-card:hover .btn.btn-primary,
.price-card:focus-within .btn.btn-primary{
  background:#1d4ed8;   /* original brand blue */
  color:#fff;
  border-color:transparent;
  transform:translateY(-1px); /* optional micro-lift; remove if not desired */
}

/* If the button itself is hovered, keep the same color too */
.price-card .btn.btn-primary:hover{
  background:#1d4ed8;
  color:#fff;
}/* ==== Faces slider: 6 per view on desktop + 3x speed ==== */

/* 3x speed (was 30s) */
.faces-track{
  animation: scrollx 10s linear infinite;
  gap: 12px; /* a touch tighter */
}

/* Desktop: ~6 tiles across inside a 1240px container */
@media (min-width: 1024px){
  .faces-track img{
    width: 190px;
    height: 190px;   /* keep squares */
  }
}

/* Tablet / phones: smaller tiles so it still looks good */
@media (max-width: 1023px){
  .faces-track img{
    width: 140px;
    height: 140px;
  }
}


/* Hero before/after holder: transparent */
.hero-media{ background: transparent; }
.hero-visual{
  background: transparent;   /* remove the light fill */
  box-shadow: none;          /* no rectangular glow around transparent PNG */
}

/* If you still see a tint, some wrapper might be adding it on your build.
   This safely clears it too without changing HTML. */
.hero-media > *{
  background: transparent !important;
  box-shadow: none !important;
}
/* As seen on — center + 2x bigger */
.as-seen{
  display:flex;
  align-items:center;
  justify-content:center;   /* center the text + logos */
  gap: 22px;
  margin: 14px 0 2px;
  flex-wrap: wrap;          /* keeps it tidy on smaller screens */
}

.as-seen-text{
  font-size: 1.25rem;       /* bigger label */
  font-weight: 500;
  opacity: .95;
}

.as-seen-img{
  height: 112px;            /* 2x bigger (was ~56px) */
  width: auto;
}

/* scale down for smaller viewports */
@media (max-width: 900px){
  .as-seen-img{ height: 84px; }
  .as-seen-text{ font-size: 1.1rem; }
}
@media (max-width: 640px){
  .as-seen-img{ height: 64px; }
  .as-seen-text{ font-size: 1rem; }
}
/* Align header logo with the hero badge on desktop */
@media (min-width: 900px){
  .site-header .brand{
    margin-left: -25px;   /* tweak: -6 to -14px until it lines up perfectly */
  }
}
/* keep mobile safe */
@media (max-width: 899px){
  .site-header .brand{ margin-left: 0; }
}
/* Boost card image: bigger + no white card behind it */
#careerPhoto{
  width: 160px;            /* increase size (try 180px if you want even larger) */
  height: 160px;
  border-radius: 16px;
  background: transparent; /* keep PNG transparency */
  box-shadow: none;
  display: block;
}

/* If a wrapper is adding a white tile/shadow, neutralize it */
.boost-card .img-wrap,
.boost-card .floating-img,
.boost-card .image-frame{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}
/* ===== Boost card: proportional layout ===== */
.boost-card{
  display: grid;
  grid-template-columns: 1fr auto;   /* text/buttons on left, image on right */
  align-items: center;
  column-gap: 28px;
  padding-block: 18px;               /* a touch tighter vertically */
}

/* Title + buttons block stays compact */
.boost-card h3{
  margin: 0 0 10px;
  font-weight: 400;
}
.boost-card h3 .accent{ font-weight: 800; color:#1d4ed8; } /* if you're using a span for 'Professional Career' */
.boost-card .boost-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Right image: smaller, retina-crisp, transparent */
#careerPhoto{
  width: clamp(96px, 13vw, 120px);   /* scales, caps at ~120px on desktop */
  height: auto;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

/* Optional: nudge image a bit away from the edge inside the rounded box */
.boost-card #careerPhoto{ margin-right: 12px; }

/* Mobile: stack neatly, keep image modest */
@media (max-width: 900px){
  .boost-card{
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .boost-card #careerPhoto{
    justify-self: end;
    width: 96px;
  }
}
/* Everyone list active state */
.everyone-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cat-item{ cursor:pointer; color:#0f172a; padding:4px 0; outline:none; transition:color .15s; }
.cat-item:hover, .cat-item:focus{ color:#1d4ed8; }
.cat-item.active{ font-weight:800; color:#1d4ed8; }

/* Preview fade */
#everyonePreview{ display:block; max-width:100%; height:auto; border-radius:16px; transition: opacity .18s ease; }
#everyonePreview.is-fading{ opacity:0.15; }
/* === Boost Your Professional Career (bigger headline, buttons, image) === */

/* Make the right card layout give the image more room */
.hs-right{
  grid-template-columns: 1.2fr 1fr;  /* text | image */
  gap: 24px;
  align-items: center;
}

/* Huge two-line headline */
.hs-headline{ margin: 0 0 10px; }
.hs-line-1{
  display:block;
  font-weight:400;
  color:#111827;
  /* ~5x larger feel on desktop, still responsive */
  font-size: clamp(2.2rem, 4.4vw + 1rem, 4.4rem);
  line-height: 1.05;
}
.hs-line-2{
  display:block;
  font-weight:800;
  color:#1d4ed8;
  font-size: clamp(2.4rem, 4.6vw + 1rem, 4.8rem);
  line-height: 1.02;
  margin-top: .2rem;
}

/* Bigger buttons just for this block */
.btn-xxl{
  padding: 1rem 1.4rem;
  font-size: clamp(1.05rem, .8vw + .9rem, 1.35rem);
  border-radius: 14px;
}

/* Make the right image match the left card image size */
#careerPhoto{
  width: clamp(210px, 32vw, 310px);  /* same as .hs-image */
  height: auto;
  border-radius: 12px;
  background: transparent;
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
}

/* Nice spacing for the CTA row */
.hs-cta{ display:flex; gap:14px; margin-top:14px; }

/* Mobile: stack text over image, center them */
@media (max-width: 1000px){
  .hs-right{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hs-right-copy{ justify-self: center; }
  #careerPhoto{ justify-self: center; }
}
/* === Spotlight gradient variant for the right card === */
.hs-spotlight{
  /* remove the normal card border and add gradient */
  border: 0 !important;
  background: linear-gradient(180deg, #0b1220 0%, #132b74 100%);
  color: #e5e7eb;
  border-radius: 16px;
  padding: 28px 28px;
  grid-template-columns: 1.35fr 1fr; /* text | image */
  gap: 28px;
  align-items: center;
  box-shadow: 0 18px 40px rgba(3, 7, 18, .35);
}

/* Big 2-line headline */
.hs-spotlight .spot-headline{
  margin: 0 0 10px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: #ffffff;
  font-size: clamp(2.2rem, 2.6vw + 1.2rem, 3.6rem);
}

.hs-spotlight .hs-sub{
  margin: 6px 0 18px;
  font-size: clamp(1.05rem, .6vw + .9rem, 1.25rem);
  color: #dbeafe; /* soft blue on dark */
}

/* Buttons sized for this hero */
.hs-spotlight .btn-xl{
  padding: .9rem 1.25rem;
  font-size: clamp(1rem, .5vw + .9rem, 1.15rem);
  border-radius: 14px;
}

.hs-spotlight .btn-primary{
  background:#2563eb;
  color:#fff;
  border-color: transparent;
}
.hs-spotlight .btn-primary:hover{ filter: brightness(1.05); }

.hs-spotlight .btn-white{
  background: transparent;
  color:#ffffff;
  border:1.5px solid rgba(255,255,255,.55);
}
.hs-spotlight .btn-white:hover{
  border-color:#ffffff;
  background:rgba(255,255,255,.06);
}

/* Right image: same size as left card image, truly transparent */
.hs-spotlight #careerPhoto{
  width: clamp(210px, 32vw, 310px); /* matches .hs-image */
  height: auto;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  display: block;
}

/* Responsive: stack neatly on small screens */
@media (max-width: 1000px){
  .hs-spotlight{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hs-spotlight .hs-right-copy{ justify-self: center; }
  .hs-spotlight #careerPhoto{ justify-self: center; }
}
/* ===== HARD OVERRIDE: shrink Spotlight headline/subline & tighten spacing ===== */
.headshots .hs-spotlight{
  padding: 18px 20px !important;
  grid-template-columns: 1.15fr 1fr !important; /* text | image */
}

.headshots .hs-spotlight .spot-headline{
  /* smaller but still strong */
  font-size: clamp(1.8rem, 1.5vw + 1rem, 2.6rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px !important;
}

.headshots .hs-spotlight .hs-sub{
  font-size: clamp(0.95rem, 0.5vw + 0.85rem, 1.08rem) !important;
  margin: 6px 0 14px !important;
  max-width: 46ch !important;
}

.headshots .hs-spotlight .hs-right-copy{
  max-width: 600px !important;   /* prevents super-wide text block */
}

.headshots .hs-spotlight .btn-xl{
  padding: .8rem 1.15rem !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
}

/* keep the image size consistent and transparent */
.headshots .hs-spotlight #careerPhoto{
  width: clamp(210px, 32vw, 310px) !important; /* matches left card */
  height: auto !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ===== FINAL OVERRIDES FOR SPOTLIGHT CARD (size + spacing) ===== */
/* Scope to the headshots section so nothing else is affected */
.headshots .hs-spotlight{
  padding: 18px 20px !important;
  grid-template-columns: 1.15fr 1fr !important; /* text | image */
}

/* Headline: ~8x smaller than the huge version you saw */
.headshots .hs-spotlight .spot-headline{
  font-size: clamp(1.05rem, 0.9vw + 0.7rem, 1.45rem) !important; /* very small */
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 8px !important;
  max-width: 40ch !important;
}

/* Subline: ~0.5x smaller than before */
.headshots .hs-spotlight .hs-sub{
  font-size: clamp(0.72rem, 0.5vw + 0.55rem, 0.9rem) !important;
  margin: 6px 0 12px !important;
  max-width: 48ch !important;
}

/* Buttons: shrink label size */
.headshots .hs-spotlight .btn-xl{
  padding: .55rem .9rem !important;
  font-size: 0.75rem !important;
  border-radius: 12px !important;
}

/* Image: same footprint as left card and transparent */
.headshots .hs-spotlight #careerPhoto{
  width: clamp(210px, 32vw, 310px) !important; /* matches left image */
  height: auto !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

/* === Spotlight (right card) final sizing + 400x400 image === */
#spotlight-card{
  border: 0 !important;
  background: linear-gradient(180deg, #0b1220 0%, #132b74 100%);
  color: #e5e7eb;
  border-radius: 16px;
  padding: 18px 20px !important;
  grid-template-columns: 1.15fr 1fr !important; /* text | image */
  align-items: center;
  box-shadow: 0 18px 40px rgba(3,7,18,.35);
}

#spotlight-card .spot-headline{
  margin: 0 0 8px !important;
  font-weight: 800;
  color: #fff;
  line-height: 1.15 !important;
  /* smaller headline */
  font-size: clamp(1.05rem, 1vw + .7rem, 1.5rem) !important;
}

#spotlight-card .hs-sub{
  margin: 4px 0 12px !important;
  color: #dbeafe;
  /* smaller subline */
  font-size: clamp(.8rem, .4vw + .7rem, .95rem) !important;
}

#spotlight-card .btn-xl{
  /* smaller buttons */
  padding: .55rem .9rem !important;
  font-size: .8rem !important;
  border-radius: 12px !important;
}

#careerPhoto{
  width: 400px !important;
  height: 400px !important;
  max-width: 100% !important;   /* don’t overflow on small screens */
  object-fit: cover !important; /* clean square crop */
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
}

@media (max-width: 1000px){
  #spotlight-card{
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  #spotlight-card .hs-right-copy{ justify-self: center; }
  #careerPhoto{
    width: 300px !important;
    height: 300px !important;
    justify-self: center;
  }
}
/* micro-padding for category list (Corporate / Medical / Lawyer...) */
.headshots .hs-left .hs-list{ padding-left: 6px !important; }
.headshots .hs-left .hs-option{ padding-left: 4px !important; }

/* micro-padding for the spotlight text block */
#spotlight-card .hs-right-copy{ padding-left: 4px !important; }

/* keep things centered on mobile */
@media (max-width: 1000px){
  #spotlight-card .hs-right-copy{ padding-left: 0 !important; }
}
/* ===== MICRO PADDING NUDGES (hard override) ===== */

/* Left list: Corporate / Medical / Lawyer ... */
.headshots .hs-card.hs-left > .hs-list{
  padding-inline-start: 8px !important;  /* pushes list a little right */
  margin-inline-start: 4px !important;   /* extra nudge */
}
.headshots .hs-card.hs-left > .hs-list > .hs-option{
  padding-inline-start: 4px !important;  /* each row a touch in */
}

/* Right spotlight text block (headline + sub + buttons) */
#spotlight-card .hs-right-copy{
  padding-left: 6px !important;          /* main nudge */
  margin-left: 2px !important;           /* tiny extra */
}
#spotlight-card .spot-headline,
#spotlight-card .hs-sub,
#spotlight-card .hs-cta{
  padding-left: 4px !important;          /* keep all aligned */
}

/* Keep centered on mobile */
@media (max-width: 1000px){
  #spotlight-card .hs-right-copy{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  #spotlight-card .spot-headline,
  #spotlight-card .hs-sub,
  #spotlight-card .hs-cta{
    padding-left: 0 !important;
  }
}
/* === Make the AI Headshots-for-Everyone preview image ~15% smaller === */
/* (targets the big portrait image inside the left hs-card only) */
.headshots .hs-card.hs-left img#hsPreview,
.headshots .hs-card.hs-left img.hs-image{
  width: 92% !important;   /* ~15% smaller */
  height: auto !important; /* keep aspect ratio */
  display: block !important;
  margin: 0 auto !important; /* center in the frame */
}

/* On small screens, let it use full width again for readability */
@media (max-width: 640px){
  .headshots .hs-card.hs-left img#hsPreview,
  .headshots .hs-card.hs-left img.hs-image{
    width: 100% !important;
  }
}
/* --- Swipe row alignment helper (safe) --- */
.showcase .ba-row {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap;         /* keep the three cards on one line */
  align-items: stretch;
}

.showcase .ba-card {
  flex: 1 1 0;
  display: flex;
}

.showcase .ba-wrap {
  width: 100%;
  height: 100%;
}
/* ===== FIX: before/after overlay compare (no size changes) ===== */
.ba-wrap{
  position: relative;
  overflow: hidden;
  /* JS sets this dynamically; this is the fallback */
  --pos: 50%;
  cursor: ew-resize;
}

/* Make BOTH images fill the wrapper and stack */
.ba-wrap .ba-img{
  position: absolute !important;
  inset: 0 !important;          /* top:0; right:0; bottom:0; left:0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none;         /* drag only on the wrapper/handle */
}

.ba-wrap .before{ z-index: 1; } /* sits underneath */

/* "After" is on top and clipped from the left → right using --pos */
.ba-wrap .after{
  z-index: 2;
  /* reveal amount; JS updates --pos (e.g., 0%…100%) */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  transition: clip-path .06s linear;
}

/* Handle + vertical divider (purely visual) */
.ba-wrap .ba-handle{
  position: absolute;
  left: var(--pos);
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0,0,0,.25);
  color: #111;
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* the vertical line that the handle sits on */
.ba-wrap .ba-handle::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -200vh;
  bottom: -200vh;
  width: 2px;
  background: rgba(255,255,255,.9);
  z-index: -1;
}
/* Right column: single video spans both grid columns and keeps ratio */
.vr-grid .vr-video{
  grid-column: 1 / -1;   /* spans the two columns where the two tall images were */
  width: 100%;
  aspect-ratio: 16 / 9;  /* maintains 16:9 without collapsing spacing */
  display: block;
  object-fit: cover;
  background: #000;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Hide iOS inline controls when muted autoplay is on */
.vr-grid .vr-video::-webkit-media-controls {
  display: none !important;
}
/* Ensure the right-column grid doesn't force fixed row heights */
.vr-grid { 
  grid-auto-rows: auto; 
}

/* 16:9 ratio box that spans both columns where the two tall images were */
.vr-video-wrap{
  grid-column: 1 / -1;           /* span both grid columns */
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Maintain exact 16:9 height via padding hack (works everywhere) */
.vr-video-wrap::before{
  content: "";
  display: block;
  padding-top: 56.25%;           /* 9 / 16 = 0.5625 */
}

/* Make the video fill the box without distortion */
.vr-video-wrap > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* If any previous rules forced children to full height, neutralize them */
.vr-grid > * { height: auto; }
/* Keep 16:9 ratio and full cover video */
.vr-video-wrap{
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.vr-video-wrap::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 */
}
.vr-video-wrap > .vr-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Minimal overlay controls */
.vr-vid-controls{
  position:absolute;
  right:12px;
  bottom:12px;
  display:flex;
  gap:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.vr-video-wrap:hover .vr-vid-controls,
.vr-video-wrap.controls-visible .vr-vid-controls{
  opacity:1;
  pointer-events:auto;
}
.vr-ctrl{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:saturate(150%) blur(3px);
}
.vr-ctrl svg{ width:16px; height:16px; }

/* Toggle play/pause icons based on data-paused state */
.vr-ctrl-play .ico-play{ display:none; }
.vr-ctrl-play[data-paused="true"] .ico-play{ display:block; }
.vr-ctrl-play[data-paused="true"] .ico-pause{ display:none; }

/* Toggle mute/unmute icons based on data-muted state */
.vr-ctrl-mute .ico-vol{ display:none; }
.vr-ctrl-mute[data-muted="false"] .ico-vol{ display:block; }
.vr-ctrl-mute[data-muted="false"] .ico-mute{ display:none; }

/* Make sure the right column grid doesn't force odd heights */
.vr-grid{ grid-auto-rows:auto; }
/* Shared height for the two tiles on the second row (left banner + right uploaded image) */
:root{
  --showcaseTileH: 260px; /* Tweak this if your uploaded image tile is taller/shorter */
}

/* Left banner image (replaces old text block) */
.info-banner-img{
  width: 100%;
  height: var(--showcaseTileH);
  display: block;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  box-shadow: 0 8px 24px rgba(23, 37, 84, 0.06);
}

/* Ensure the 'Uploaded Image' card on the right uses the same height */
.vr-upload,
.vr-upload img{
  height: var(--showcaseTileH);
}

.vr-upload img{
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* If your uploaded image card doesn't already have .vr-upload, add it to that card's container */
/* Shared height for banner (left) and uploaded image (right) */
:root{
  --showcaseTileH: 240px; /* was 260px; adjust until it matches perfectly */
}

.info-banner-img{
  height: var(--showcaseTileH);
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23, 37, 84, 0.06); /* keep soft shadow */
}

/* Ensure the right “Uploaded Image” tile stays in sync */
.vr-upload,
.vr-upload img{
  height: var(--showcaseTileH);
}
/* --- Showcase banner: remove blue border --- */
.info-banner-img{
  border: 0 !important;          /* kill the blue line */
  outline: none !important;
}
/* === Swipe section: banner fixes === */
:root{
  /* keep the banner + uploaded-image the same height */
  --showcaseTileH: 220px; /* tweak 232–246px if you need a pixel-perfect match */
}

/* The wrapper was drawing the blue border. Remove it entirely. */
.showcase .sc-left .info-banner,
.info-banner{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;      /* removes extra height from padding */
  border-radius: 16px;        /* keeps rounded corners */
  overflow: hidden;           /* clips the image to rounded corners */
}

/* The banner image itself */
.info-banner-img{
  display: block;
  width: 100%;
  height: var(--showcaseTileH);
  object-fit: cover;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Make the right “Uploaded Image” tile match the same height */
.vr-upload,
.vr-upload img{
  height: var(--showcaseTileH);
}
.influencer-video { margin-top: 40px; }
.infvid-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.infvid { display: block; width: 100%; height: auto; }

.infctl {
  position: absolute;
  right: 12px;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 0; outline: 0;
  background: rgba(255,255,255,.9);
  color: #111;
  font-size: 16px; line-height: 34px;
  display: grid; place-items: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.infctl:focus { opacity: 1; transform: translateY(0); }
.infctl-play { bottom: 12px; }
.infctl-mute { bottom: 52px; }

.infvid-wrap:hover .infctl { opacity: 1; transform: translateY(0); }

/* mobile: show controls briefly after tap */
@media (hover: none) {
  .infctl { opacity: 1; }
}
/* HOW IT WORKS — card borders */
.howitworks .step-card {
  display: block;
  border: 2px solid #8f97a8;            /* subtle grey (like the subtitle) */
  border-radius: 18px;
  overflow: hidden;                      /* keeps image corners clipped */
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  outline: none;                         /* we’ll show a custom focus ring */
}

/* keep the image neatly inside */
.howitworks .step-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover / keyboard focus / active (click) -> brand blue */
.howitworks .step-card:hover,
.howitworks .step-card:focus,
.howitworks .step-card:active {
  border-color: #2563eb;                 /* same blue as “it works” */
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* Optional: tiny press feedback */
.howitworks .step-card:active {
  transform: translateY(1px);
}
/* ---------------------------
   How it works: clean borders
   --------------------------- */

/* Palette (tuned to your page) */
:root{
  --hiw-grey: #94a3b8;   /* matches "4 Easy Steps to..." slate-ish grey */
  --hiw-blue: #1e3a8a;   /* same family as the “it works” blue */
}

/* Tile container (the clickable card that wraps each image) */
.howitworks .step-card{
  display:block;
  border:1.5px solid var(--hiw-grey);
  border-radius:16px;
  padding:0;                 /* keep image flush */
  background:#fff;
  box-shadow:none !important;/* kill any existing glow */
  transition:
    border-color .15s ease,
    border-width .15s ease,
    box-shadow .15s ease;
  cursor:pointer;
}

/* Make the image follow the card’s rounded corners */
.howitworks .step-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
}

/* Hover/focus state: thicker solid dark-blue border only */
.howitworks .step-card:hover,
.howitworks .step-card:focus,
.howitworks .step-card:focus-visible{
  border-color:var(--hiw-blue);
  border-width:3px;
  box-shadow:none !important;   /* no glow/gradient */
  outline:none;                 /* rely on the border for focus */
}

/* Optional: tiny press feedback without glow */
.howitworks .step-card:active{
  transform:translateY(1px);
}
/* ---------------------------
   How it works – outer ring + lift
   --------------------------- */

/* use the same blue as “it works” */
:root{
  --hiw-grey: #94a3b8;  /* subtitle gray */
  --hiw-blue: #2563eb;  /* “it works” blue */
}

/* Base card */
.howitworks .step-card{
  display:block;
  border:none;                     /* no inner border */
  border-radius:16px;
  background:transparent;
  /* OUTER ring (no glow): use box-shadow with spread = crisp outside stroke */
  box-shadow:0 0 0 1.5px var(--hiw-grey) !important;
  transform:translateY(0);
  transition:transform .18s ease, box-shadow .15s ease;
  cursor:pointer;
}

/* Keep images rounded */
.howitworks .step-card img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
}

/* Hover / focus: thicker outside ring + slight lift */
.howitworks .step-card:hover,
.howitworks .step-card:focus,
.howitworks .step-card:focus-visible{
  box-shadow:0 0 0 3px var(--hiw-blue) !important;  /* thicker, same blue as heading */
  transform:translateY(-6px);                      /* subtle lift */
  outline:none;                                    /* rely on the ring */
}

/* Press feedback */
.howitworks .step-card:active{
  transform:translateY(-2px);
}
/* ===============================
   Headshots – make left card match spotlight
   =============================== */

/* Card container */
.headshots .hs-card.hs-left{
  /* dark-blue spotlight-style background */
  background: linear-gradient(135deg, #0f172a 0%, #102449 55%, #143e92 100%);
  color:#fff;
  border:none;
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
}

/* keep the image nicely rounded and above the gradient */
.headshots .hs-card.hs-left .hs-image{
  border-radius: 16px;
  display:block;
}

/* List styles (Corporate / Medical / Lawyer...) */
.headshots .hs-card.hs-left .hs-list{
  margin:0;
  padding:0;
}

.headshots .hs-card.hs-left .hs-option{
  list-style:none;
  color:#e5e7eb;                /* light gray on dark background */
  cursor:pointer;
  transition:color .15s ease;
}

.headshots .hs-card.hs-left .hs-option:hover{
  color:#ffffff;
}

/* Active = same blue as “it works” and bold */
.headshots .hs-card.hs-left .hs-option.active{
  color:#2563eb;                /* it-works blue */
  font-weight:800;
}

/* If your left card had a light border, kill it */
.headshots .hs-left{
  border:none !important;
}
/* === Talking AI card: right-side video (replaces .ai-image only) === */
.ai-card .ai-video-wrap{
  width: clamp(220px,32vw,320px);   /* same width range as .ai-image */
  aspect-ratio: 16 / 9;             /* keep 16:9 */
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
  justify-self: end;                 /* matches previous alignment */
}

.ai-card .ai-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

/* minimal hover controls, same size/feel as other section */
.ai-card .ai-vid-controls{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ai-card .ai-video-wrap:hover .ai-vid-controls,
.ai-card .ai-video-wrap.controls-visible .ai-vid-controls{
  opacity: 1;
  pointer-events: auto;
}

.ai-card .ai-ctrl{
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  backdrop-filter: saturate(150%) blur(3px);
  cursor: pointer;
}
.ai-card .ai-ctrl svg{ width:16px; height:16px; }

/* toggle icons */
.ai-card .ai-ctrl-play .ico-play{ display:none; }
.ai-card .ai-ctrl-play[data-paused="true"] .ico-play{ display:block; }
.ai-card .ai-ctrl-play[data-paused="true"] .ico-pause{ display:none; }

.ai-card .ai-ctrl-mute .ico-vol{ display:none; }
.ai-card .ai-ctrl-mute[data-muted="false"] .ico-vol{ display:block; }
.ai-card .ai-ctrl-mute[data-muted="false"] .ico-mute{ display:none; }

/* mobile: show controls briefly after tap */
@media (hover:none){
  .ai-card .ai-vid-controls{ opacity:1; pointer-events:auto; }
}
/* =========================
   AI DATING — clean rebuild
   ========================= */

/* Palette for this block only */
#ai-dating{
  --dating-bg-start:#0a1530;
  --dating-bg-end:#0f224a;
  --dating-grad-start:#ff517d;   /* same feel as “Double” */
  --dating-grad-end:#b71d57;
  --dating-ink:#e5e7eb;
  --dating-ink-strong:#ffffff;
}

/* Outer card: same width as other sections, slimmer height */
#ai-dating .dating-hero-frame{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(1200px 520px at 85% 50%, #12254f 0%, var(--dating-bg-start) 55%, var(--dating-bg-end) 100%);
  box-shadow: 0 22px 60px rgba(3, 7, 18, .25);
  aspect-ratio: 16 / 6;                 /* compact height (20% tighter vs before) */
}

/* Layout */
#ai-dating .dating-hero{ height:100%; }
#ai-dating .dating-hero-grid{
  height:100%;
  display:grid;
  grid-template-columns: 1.05fr .95fr;  /* text | image */
  align-items:center;
  gap: clamp(18px, 2.5vw, 36px);
  padding: clamp(20px, 2.6vw, 36px) clamp(24px, 3.2vw, 48px);
  color:var(--dating-ink);
}

/* Left content — 20% smaller than the previous version */
#ai-dating .dating-title{
  margin:0 0 .5rem 0;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--dating-ink-strong);
  /* ~20% smaller overall via clamp */
  font-size: clamp(1.8rem, 2.1vw + .9rem, 2.9rem);
}

#ai-dating .dating-title .dating-grad{
  background: linear-gradient(90deg, var(--dating-grad-start), var(--dating-grad-end));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#ai-dating .dating-sub{
  margin:.35rem 0 1.1rem 0;
  color:rgba(229,231,235,.92);
  font-weight:400;
  line-height:1.35;
  font-size: clamp(.95rem, .6vw + .8rem, 1.05rem); /* smaller */
}

/* Button — same gradient as “Double”, no white border ever */
#ai-dating .dating-cta{
  display:inline-block;
  background: linear-gradient(135deg, var(--dating-grad-start), var(--dating-grad-end));
  color:#fff;
  font-weight:800;
  text-decoration:none;
  border:0; outline:0;
  border-radius:14px;
  padding: .6rem 1.05rem;               /* ~20% tighter */
  font-size: clamp(.92rem, .5vw + .8rem, 1.05rem);
  box-shadow: 0 10px 24px rgba(183,29,87,.28);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
#ai-dating .dating-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(183,29,87,.35);
}
#ai-dating .dating-cta:active{ transform: translateY(0); }

/* Logos row */
#ai-dating .dating-logos{
  display:flex; gap:12px; align-items:center;
  margin-top:.9rem;
}
#ai-dating .dating-logos span{
  opacity:.85; font-size:.9rem;
}
#ai-dating .dating-logos img{
  display:block; height:28px; width:auto;
  filter: saturate(1.05) contrast(1.05);
}

/* Right art: true 1×1, keep transparency, never crop */
#ai-dating .dating-art{
  justify-self:end;
  background:transparent !important;
  box-shadow:none !important;
}
#ai-dating .dating-art img{
  width: clamp(220px, 28vw, 380px);   /* scales but stays square */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;                /* no crop; respect alpha */
  background: transparent !important;
  display:block;
}

/* Responsive stack */
@media (max-width: 980px){
  #ai-dating .dating-hero-frame{ aspect-ratio: 16 / 6; } /* a bit taller on tablets */
  #ai-dating .dating-hero-grid{ grid-template-columns:1fr; text-align:left; }
  #ai-dating .dating-art{ justify-self:start; }
  #ai-dating .dating-art img{ width: clamp(200px, 60vw, 360px); }
  #ai-dating .dating-logos{ margin-top:.7rem; }
}
@media (max-width: 560px){
  #ai-dating .dating-hero-frame{ aspect-ratio: 16 / 4; } /* phone-friendly */
}
/* === AI Dating quick tweaks === */
/* Drop this at the very end of styles.css */
#ai-dating{
  /* easy knobs to tweak later */
  --sectionGap: 12px;                         /* gap above the banner */
  --padTop: clamp(6px, 1.0vw, 14px);          /* top padding inside the banner (move content up) */
  --logoH: 47px;                              /* logo strip height (2× = 56px) */
}

/* 1) reduce the gap between sections */
#ai-dating{ margin-top: var(--sectionGap) !important; }

/* 2) move headline + image up by reducing top padding (keep bottom padding the same) */
#ai-dating .dating-hero-grid{
  padding-top: var(--padTop) !important;
  /* keep original side/bottom paddings from earlier build */
}

/* 3) 2× bigger “As seen on” logos */
#ai-dating .dating-logos img{
  height: var(--logoH) !important;
}
.p-card:hover,
.p-card.is-featured{ color:#0b1220; } /* keep headings dark */
/* or switch to white: */
/* .p-card:hover h3, .p-card:hover p, .p-card:hover .p-ico { color:#fff; } */
/* ===== Comparison Table (white background, minimal, responsive) ===== */
#compare{
  background:#fff;
  padding: clamp(20px, 3vw, 48px) 0;
}

#compare .compare-wrap{
  width:100%;
  overflow-x:auto;             /* safe on small screens */
}

.compare-table{
  width:100%;
  border-collapse:collapse;
  font-size: clamp(.95rem, .25vw + .9rem, 1.05rem);
  color: var(--text, #111827);
  min-width: 720px;            /* keeps columns readable; scrolls below this */
}

.compare-table thead th{
  text-align:center;
  font-weight:800;
  color: var(--ink, #0f172a);
  padding: 14px 16px;
  border-bottom: 2px solid var(--border, #e5e7eb);
  white-space:nowrap;
}

.compare-table thead th.feat-col{ text-align:left; }

.compare-table tbody th{
  text-align:left;
  font-weight:500;
  color: var(--grey-text, #374151);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  width: 32%;
}

.compare-table td{
  text-align:center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  white-space:nowrap;
}

/* icons (using text symbols so no extra assets) */
.compare-table .icon{
  display:inline-block;
  font-weight:900;
  line-height:1;
  margin-right:8px;
  font-size: 0.95em;
  vertical-align: -1px;
}
.compare-table .ok{ color:#10b981; }   /* green */
.compare-table .no{ color:#ef4444; }   /* red */

.compare-table .good{ color: var(--ink, #0f172a); }
.compare-table .bad { color: var(--ink, #0f172a); }

/* compact on mobile */
@media (max-width: 720px){
  .compare-table thead th,
  .compare-table tbody th,
  .compare-table td{ padding: 12px 12px; }
}
/* ===== Footer ===== */
.site-footer{
  position: relative;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(37,99,235,.20) 0%, transparent 55%),
              linear-gradient(180deg, #0b1220 0%, #0f1c3e 100%);
  color:#e5e7eb;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top: 38px;
  padding-top: 34px;
}

.foot-wrap{
  display:grid;
  grid-template-columns: 1.25fr 2fr;
  gap:28px;
  align-items:start;
}

.foot-brand .brand{ color:#fff; margin-left:0; }
.foot-brand .logo{ height:42px; width:auto; border-radius:10px; }
.foot-brand .brand-text{ font-size:22px; }

.foot-h2{
  margin:12px 0 6px;
  font-weight:800;
  letter-spacing:-0.01em;
  font-size: clamp(1.2rem, 1vw + 1rem, 1.7rem);
  color:#ffffff;
}

.foot-sub{
  margin:0 0 12px;
  color:#cbd5e1;
  max-width: 46ch;
}

.foot-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.foot-cta .btn-white{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
}
.foot-cta .btn-white:hover{ border-color:#fff; background:rgba(255,255,255,.06); }

/* Columns */
.foot-cols{
  display:grid;
  grid-template-columns: repeat(4, minmax(150px,1fr));
  gap:18px;
}
.foot-col h3{
  margin:4px 0 10px;
  font-weight:800;
  font-size:1rem;
  color:#e2e8f0;
}
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin:6px 0; }
.foot-col a{
  color:#cbd5e1;
  text-decoration:none;
  font-weight:400;
}
.foot-col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* Bottom bar */
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:22px;
  padding:12px 0;
}
.bottom-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.foot-meta{ color:#cbd5e1; display:flex; gap:8px; align-items:center; }
.foot-meta a{ color:#cbd5e1; text-decoration:none; }
.foot-meta a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot-meta .sep{ opacity:.4; }

.foot-social{ display:flex; gap:10px; }
.foot-social a{
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px;
  color:#e5e7eb;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.foot-social a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}

/* Responsive */
@media (max-width: 1000px){
  .foot-wrap{ grid-template-columns: 1fr; }
  .foot-cols{ grid-template-columns: repeat(2, minmax(160px,1fr)); }
}
@media (max-width: 560px){
  .foot-cols{ grid-template-columns: 1fr; }
  .bottom-wrap{ flex-direction:column; align-items:flex-start; }
}
/* Sticky footer layout: footer is always the last thing; no white gap below */
html, body { height: 100%; }
body{ display:flex; flex-direction:column; }
main{ flex:1 0 auto; }            /* your main content grows */
.site-footer{ margin-top:auto; }   /* footer sits at the very bottom */

/* Footer visuals (upgraded gradient + top-only rounded corners) */
.site-footer{
  position: relative;
  color:#e5e7eb;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top: 34px;
  border-radius: 16px 16px 0 0;  /* top rounded only */
  /* Premium layered gradient */
  background:
    radial-gradient(900px 420px at 10% -15%, rgba(37,99,235,.28) 0%, rgba(37,99,235,0) 55%),
    radial-gradient(700px 360px at 95% -20%, rgba(99,102,241,.25) 0%, rgba(99,102,241,0) 60%),
    linear-gradient(180deg, #0a1226 0%, #0a1530 60%, #0b1738 100%);
}

/* Remove the brand wordmark text visually */
.foot-brand .brand-text{ display:none; }
.foot-brand .logo{ height:42px; width:auto; border-radius:10px; }

/* Keep the rest from your current footer styles; only overrides below if needed */
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:22px;
  padding:12px 0;
}
/* ===== Privacy section (white bg, blue ring hover) ===== */
.privacy-section{
  background:#fff;
  padding: clamp(32px, 6vw, 64px) 0;
  color: var(--ink, #0f172a);
}

.privacy-title{
  margin:0 0 20px;
  text-align:center;
  font-weight:800;
  letter-spacing:-0.01em;
  font-size: clamp(1.6rem, 1.3vw + 1.3rem, 2.4rem);
  color: var(--ink, #0f172a);
}

.g-accent{
  /* brandy blue gradient label like your style */
  background: linear-gradient(90deg, #0b7cff 0%, #0061d6 40%, #1800ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.privacy-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
  margin-top: clamp(14px, 2vw, 20px);
}

@media (max-width: 1000px){
  .privacy-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 620px){
  .privacy-grid{ grid-template-columns: 1fr; }
}

.pcard{
  background:#fff;
  border-radius:16px;
  border:1.5px solid var(--border, #e5e7eb);
  padding: clamp(18px, 2.6vw, 24px);
  text-align:center;
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 0 0 1.5px rgba(37, 99, 235, 0); /* invisible ring until hover */
}

.pcard:hover,
.pcard:focus-within{
  /* same “blue outline ring” feeling as how-it-works */
  box-shadow: 0 0 0 3px #2563eb;
  border-color: #2563eb;
  transform: translateY(-4px);
}

.pcard-ico{
  display:grid; place-items:center;
  color:#111827; /* icons follow text color */
  margin-bottom: 12px;
}

.pcard h3{
  margin: 6px 0 8px;
  font-weight:800;
  font-size: clamp(1rem, .7vw + .9rem, 1.2rem);
  color:#111827;
}

.pcard p{
  margin:0;
  color:#374151;
  font-size: .96rem;
  line-height:1.45;
}
/* Sticky header everywhere */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border, #e5e7eb);
}

/* Smooth anchor scrolling and offset so content isn't hidden under the header */
html { scroll-behavior: smooth; }

/* If your header height is ~74–86px, set scroll margin for on-page anchors */
section[id], [id][tabindex="-1"] { scroll-margin-top: 86px; }

/* IMPORTANT: sticky fails if any ancestor has overflow other than visible */
body, html { overflow-x: hidden; } /* Avoid accidental horizontal overflow */
/* === Tighten spacing between Compare table and Privacy cards === */
/* 1) Shrink the bottom spacing of the compare section */
#compare, .compare, .mini-compare {
  margin-bottom: 24px !important;   /* was ~64px */
  padding-bottom: 0 !important;
}
#compare .container { padding-bottom: 0 !important; }

/* 2) Shrink the top spacing of the privacy section */
#privacy, .privacy-first, .privacy, .privacy-white {
  margin-top: 16px !important;      /* was ~64px */
  padding-top: 0 !important;
}
#privacy .container { padding-top: 0 !important; }

/* 3) Headline margins can also add space — flatten them */
#privacy h2,
#privacy .section-title,
#privacy .pf-title {
  margin-top: 0 !important;
}
/* === Tighten spacing between PRICING and AI Influencer sections === */
#pricing {
  margin-bottom: 24px !important;   /* was ~60–80px */
  padding-bottom: 0 !important;
}
#pricing .pricing-title {            /* the big heading above the cards */
  margin-bottom: 14px !important;
}
#pricing .pricing-grid {             /* the cards row */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* next section */
#ai-influencer-video {
  margin-top: 18px !important;       /* was ~48–64px */
  padding-top: 0 !important;
}
#ai-influencer-video .infvid-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* ---------- About > Team card ---------- */


.about-team { padding: 24px 20px 56px; }
.about-team .team-grid{
  display:grid; grid-template-columns: 420px 1fr;
  gap: 32px; align-items: center;
}
@media (max-width: 900px){
  .about-team .team-grid{ grid-template-columns: 1fr; text-align: left; }
  .about-team .team-visual{ order: -1; }
}

/* Gradient container around the portrait */
.portrait-frame{
  width: 100%;
  max-width: 420px;
  padding: 12px;
  border-radius: 22px;
  background: linear-gradient(180deg, #2b36ff 0%, #6a2bff 100%);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
  position: relative;
}
.portrait-frame img{
  display:block; width:100%; height:auto; border-radius:16px;
}

/* Social buttons overlay (white icons) */
.social-btn{
  position:absolute; right: 14px;
  width: 38px; height: 38px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}
.social-btn.li{ bottom: 64px; }   /* LinkedIn above */
.social-btn.ig{ bottom: 14px; }   /* Instagram below */

.social-btn:hover{ background: rgba(255,255,255,.22); transform: translateY(-2px); }

/* Right column text */
.team-name{
  margin: 0 0 4px; font-weight: 800;
  letter-spacing: -0.01em; font-size: clamp(22px, 1.4vw + 16px, 30px);
  color:#0f172a;
}
.team-role{
  margin: 0 0 14px; color:#4b5563; font-weight: 600;
}
.team-copy p{ color:#111827; line-height:1.6; max-width: 60ch; }
.team-cta{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; }

/* Small variant of your existing buttons (keeps your brand styles) */
.btn.btn-sm{ padding: 10px 14px; font-size: 0.92rem; border-radius: 10px; }
/* =========================
   ABOUT — “Canva-like” hero
   ========================= */
.about-hero2{
  background:#fff;
  text-align:center;
  padding: clamp(40px, 6vw, 72px) 20px 24px;
}
.ah-title{
  margin:0;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#0f172a;
  font-size: clamp(2.4rem, 3.4vw + 1rem, 4.2rem);
  line-height:1.05;
}
.ah-sub{
  margin:10px 0 18px;
  color:#111827;
  font-weight:600;
  font-size: clamp(1.1rem, 1.2vw + .8rem, 1.8rem);
}

/* Media strip: 4 squares + 1 video */
.ah-strip{
  --tile: clamp(90px, 12vw, 90px);     /* change this to scale the whole row */
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 12px;
}
.ah-sq{
  width:var(--tile);
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:12px;
  background:#000;
  box-shadow:0 8px 22px rgba(2, 6, 23, 0.08);
}
.ah-sq img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}



/* =========================
   ABOUT — Company block
   ========================= */
.about-company{
  background:#fff;
  text-align:center;
  padding: clamp(28px, 5vw, 56px) 20px clamp(24px, 4vw, 48px);
}
.ac-logo{
  width: clamp(120px, 10vw, 180px);
  height:auto;
  display:block;
  margin: 0 auto 16px;
  filter: none; /* keep original brand colors */
}
.ac-title{
  margin:0 0 14px;
  font-weight:800;
  letter-spacing:-0.015em;
  color:#0f172a;
  line-height:1.1;
  font-size: clamp(1.9rem, 2.2vw + 1.2rem, 3rem);
}
.ac-body{
  max-width: 980px;
  margin: 0 auto;
  color:#111827;
  line-height:1.62;
  font-size: clamp(.98rem, .4vw + .9rem, 1.08rem);
}
.ac-body p{ margin: 10px 0 14px; }
/* === ABOUT — center the founders + story sections (text stays left) === */
section.about-wrap{
  /* center the whole block on the page */
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;

  /* layout */
  padding: 48px 20px;
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(360px, 1fr);
  gap: 42px;
  align-items: center;
  text-align: left;              /* keep text left aligned */
}

/* reverse layout (Krasia: text then image on the right) */
section.about-wrap.reverse{
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 500px);
}

/* card/photo */
section.about-wrap .f-card{
  position: relative;
  width: 100%;
  min-height: 420px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg,#AFC2FF 0%,#B78BFF 100%);
  box-shadow: 0 24px 60px rgba(16, 24, 40, .10);
}
section.about-wrap .f-photo{ position:absolute; inset:0; background-size:cover; background-position:center; }
section.about-wrap .f-overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.08) 100%); }

/* social badges on the card */
section.about-wrap .f-badges{ position:absolute; right:16px; bottom:16px; display:grid; gap:10px; }
section.about-wrap .f-badge{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:10px; background:rgba(255,255,255,.16);
  backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.25);
}

/* text column */
section.about-wrap .f-text h3{
  margin:0 0 6px; font-weight:800; letter-spacing:-.02em;
  font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.2rem); color:#0f172a;
}
section.about-wrap .f-text .role{ color:#475569; margin-bottom:16px; font-weight:700; }
section.about-wrap .f-text p{ margin:10px 0 0; line-height:1.6; color:#0f172a; }
section.about-wrap .f-cta{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }

/* story block = single centered column, left-aligned text */
section.about-wrap.our-story{
  grid-template-columns: 1fr;
  gap: 0;
}

/* responsive */
@media (max-width: 960px){
  section.about-wrap,
  section.about-wrap.reverse{
    grid-template-columns: 1fr;   /* stack */
    gap: 28px;
    padding: 40px 16px;
  }
}
/* ---- AI Headshots promo row (2 cards) ---- */
.promo-row{ padding: 18px 0 8px; }

.promo-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.promo-card{
  display:grid;
  grid-template-columns: 1.15fr auto;  /* text | 1:1 image */
  align-items:center;
  gap: 18px;
  padding: 18px;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(2,6,23,.16);
  color:#e5e7eb;
}

/* Bright brandy gradients to match your site */
.promo-blue{
  background: linear-gradient(135deg, #0b7cff 0%, #0061d6 60%, #1800ad 100%);
}
.promo-pink{
  background: linear-gradient(135deg, #ff517d 0%, #d63c73 50%, #b71d57 100%);
}

/* Copy block */
.promo-eyebrow{
  margin: 2px 0 4px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #e9efff;
}
.promo-title{
  margin: 0 0 10px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 1.1vw + .9rem, 1.6rem);
  line-height: 1.15;
}
.promo-logos img{
  display:block;
  height: 24px;
  width: auto;
  filter: saturate(1.05) contrast(1.05);
  opacity: .95;
}

/* 1:1 image on the right */
.promo-img{
  width: clamp(86px, 15vw, 110px);   /* small square like your reference */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  object-fit: cover;
  background: transparent;
  box-shadow: 0 12px 24px rgba(15,23,42,.22);
}

/* Responsive */
@media (max-width: 900px){
  .promo-grid{ grid-template-columns: 1fr; }
  .promo-card{
    grid-template-columns: 1fr auto;
    padding: 16px;
  }
  .promo-img{ width: clamp(84px, 22vw, 120px); }
}
/* ---- AI Headshots: 2 promo cards (fix sizing) ---- */
.promo-row{ padding: 18px 0 8px; }

.promo-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* Card shell – same height & padding on both */
.promo-card{
  display:grid;
  grid-template-columns: 1fr auto;      /* text | square image */
  align-items:center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(2,6,23,.16);
  min-height: 220px;                    /* keeps the compact look */
  color:#e5e7eb;
}

/* Brand gradients */
.promo-blue{ background: linear-gradient(135deg, #0b7cff 0%, #0061d6 60%, #1800ad 100%); }
.promo-pink{ background: linear-gradient(135deg, #ff517d 0%, #d63c73 50%, #b71d57 100%); }

/* Copy block */
.promo-eyebrow{
  margin: 2px 0 4px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #e9efff;
}
.promo-title{
  margin: 0 0 10px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  font-size: clamp(1.1rem, 1.1vw + .9rem, 1.6rem);
  line-height: 1.15;
}
.promo-logos img{
  display:block;
  height: 24px;
  width: auto;
  filter: saturate(1.05) contrast(1.05);
  opacity: .95;
}

/* --- The square thumbnail (hard-enforced 1:1) --- */
.promo-figure{
  width: clamp(92px, 13vw, 120px);
  height: clamp(92px, 13vw, 120px);     /* square container */
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(15,23,42,.22);
  justify-self: end;
}
.promo-img{
  display:block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;                    /* crops any portrait to perfect square */
  background: transparent;
}

/* Responsive */
@media (max-width: 900px){
  .promo-grid{ grid-template-columns: 1fr; }
  .promo-card{ min-height: 200px; }
  .promo-figure{
    width: clamp(96px, 22vw, 120px);
    height: clamp(96px, 22vw, 120px);
  }
}
/* === AI Headshots Flow (scoped) === */
.hsf-title{ text-align:center; margin:6px 0 8px; font-weight:800; letter-spacing:-.01em; font-size:clamp(1.9rem,2.2vw + 1rem,2.8rem); color:#0f172a; }
.hsf-sub{ text-align:center; margin:0 0 18px; color:#374151; }

.hsf-step{ border:1px solid var(--border,#e5e7eb); border-radius:16px; background:#fff; overflow:hidden; }
.hsf-stepbar{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; cursor:pointer; }
.hsf-stepbar::-webkit-details-marker{ display:none; }
.hsf-stepbar strong{ font-weight:800; color:#0f172a; }
.hsf-stepbar .hsf-step-pill{ background:#eef2ff; color:#1d4ed8; padding:6px 10px; border-radius:999px; font-weight:800; font-size:.8rem; }
.hsf-step[open] .chev{ transform:rotate(180deg); }
.hsf-stepbar .chev{ transition: transform .15s ease; color:#64748b; }

.hsf-card{ border-top:1px solid var(--border,#e5e7eb); padding:16px; display:grid; gap:16px; }
@media (min-width: 940px){ .hsf-card{ grid-template-columns: 1.2fr 1fr; align-items:start; } }

.hsf-upload{ display:grid; gap:14px; }
.hsf-drop{ border:1px dashed #b6c3db; border-radius:14px; background:linear-gradient(180deg,#fafbff 0,#f7f9ff 100%); text-align:center; padding:22px; }
.hsf-u-ico{ font-size:38px; margin-bottom:4px; }
.hsf-u-sub{ margin:4px 0 10px; color:#475569; }
.hsf-u-hint{ margin:8px 0 0; color:#64748b; }
.hsf-rules{ margin:12px auto 0; text-align:left; display:inline-block; color:#475569; }

.hsf-previews{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; }
.hsf-ph{ aspect-ratio:1/1; border-radius:12px; background:#f1f5f9; border:1px dashed #cbd5e1; }

.hsf-guidance{ display:grid; gap:12px; }
@media (min-width: 620px){ .hsf-guidance{ grid-template-columns:1fr 1fr; } }
.hsf-guid-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.hsf-good .hsf-guid-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hsf-guid-grid figure{ margin:0; }
.hsf-guid-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; border:1px solid #e5e7eb; }
.hsf-guid-grid figcaption{ margin-top:6px; font-size:.9rem; color:#374151; }

.hsf-actions{ display:flex; gap:10px; justify-content:flex-end; }
.btn-blue{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:.75rem 1rem; border-radius:12px; border:1px solid #4e6eea; background:linear-gradient(135deg,#0061d6 0%, #1800ad 100%); color:#fff; font-weight:800; cursor:pointer; }
.btn-blue[disabled]{ opacity:.55; cursor:not-allowed; }
.btn-ghost{ background:#fff; border:1px solid #e5e7eb; color:#0f172a; padding:.7rem 1rem; border-radius:12px; font-weight:700; }

.hsf-config{ display:grid; gap:16px; margin-top:16px; }
@media (min-width: 1020px){ .hsf-config{ grid-template-columns: 1.3fr .9fr; } }

.hsf-left .hsf-block{ border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:14px; margin-bottom:14px; }
.hsf-block-head{ display:flex; align-items:center; gap:10px; }
.hsf-block h3{ margin:0; font-size:1.1rem; }
.hsf-block h4{ margin:0 0 8px; font-size:1rem; }
.hsf-block .hint{ color:#64748b; display:block; margin-bottom:8px; }

.hsf-step-pill{ background:#eef2ff; color:#1d4ed8; padding:6px 10px; border-radius:999px; font-weight:800; font-size:.75rem; }

.hsf-chip-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
@media (max-width: 640px){ .hsf-chip-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.hsf-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }

.chip{ padding:.55rem .8rem; border-radius:999px; border:1px solid #cbd5e1; background:#fff; color:#0f172a; font-weight:600; cursor:pointer; }
.chip.selected{ color:#fff; border-color:#1800ad; background: linear-gradient(135deg,#0061d6 0%, #1800ad 100%); }

.hsf-packs{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
@media (max-width: 880px){ .hsf-packs{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .hsf-packs{ grid-template-columns: 1fr; } }

.pack{ border:1.5px solid #dbe3f3; border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#ffffff 0,#fbfdff 100%); cursor:pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.pack:hover{ box-shadow:0 10px 20px rgba(2,6,23,.06); }
.pack-top{ font-weight:800; letter-spacing:.02em; color:#0f172a; padding:10px 12px; }
.pack-body{ padding:8px 12px 12px; color:#374151; }
.pack-price{ font-size:1.4rem; font-weight:800; color:#0f172a; margin-bottom:4px; }
.pack ul{ margin:0; padding-left:18px; }
.pack.selected{ border-color:#1800ad; box-shadow:0 0 0 3px rgba(24,0,173,.15) inset; }

.hsf-right .hsf-preview{ border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:14px; position:sticky; top:92px; }
.hsf-preview h3{ margin:0 0 10px; }
.hsf-preview-grid{ display:grid; grid-template-columns: 1fr repeat(3,80px); gap:10px; align-items:start; }
.hsf-prev-main{ aspect-ratio: 1/1; border-radius:12px; background:#f1f5f9; border:1px dashed #cbd5e1; }
.hsf-prev-sm{ width:100%; aspect-ratio:1/1; border-radius:12px; background:#f1f5f9; border:1px dashed #cbd5e1; }

.hsf-summary{ margin:12px 0 0; display:grid; gap:6px; }
.hsf-summary dt{ font-weight:700; color:#0f172a; }
.hsf-summary dd{ margin:0; color:#374151; }

.hsf-right .hsf-actions{ display:flex; gap:10px; justify-content:space-between; margin-top:12px; }

/* Helpers for image previews set via background-image */
.hsf-ph.is-img, .hsf-prev-main.is-img, .hsf-prev-sm.is-img{
  background-size: cover; background-position: center; border-style: solid; border-color:#e5e7eb;
}

/* small containers alignment with your page */
.hs-flow.container{ max-width: var(--maxw,1240px); margin: 0 auto; padding: 6px 20px 24px; }