/* InSpace page kit, part 4: the NOVA features overview (templates/features-new.php, /features in every locale).
   Loads after pg-kit.css, pg-templates.css (logo strip, FAQ) and pg-features.css (hero module, glow, blob, icon
   tiles). Everything scoped under .pg-scope.fo-page. Brand guide: White/Moondust bands, r-12 cards, one dark card,
   Space Green primary, Ink 58 secondary text. Oct 2026. */

/* ---------- hero ---------- */
.pg-scope .fo-hero .fo-eyebrow{margin-bottom:22px;color:var(--ink)}
.pg-scope .fo-hero h1{max-width:13ch}
.pg-scope .fo-hero .ih-sub{max-width:46ch}
.pg-scope .fo-art .fp-row .l{white-space:normal;overflow:visible;text-overflow:clip}
.pg-scope .fo-art .fp-rows{margin-top:6px}
.pg-scope .fo-art .fp-row{padding:7px 8px}

/* ---------- the seven features as linked cards, 3 + 4 on desktop: not rendered in the control. Kept for the
   CRO variant 'features-overview-grid' (cards.fo-feat inside #fo-cards); .fo-feat-go is also used by the benefit cards. */
.pg-scope .fo-features{padding-top:96px}
.pg-scope .fo-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.pg-scope .fo-feat{grid-column:span 3;display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:12px;min-height:248px}
.pg-scope .fo-feat:nth-child(-n+3){grid-column:span 4}
.pg-scope .fo-feat-top{display:flex;align-items:center;justify-content:space-between}
.pg-scope .fo-feat .fp-ic{width:48px;height:48px;border-radius:12px}
.pg-scope .fo-feat .fp-ic svg{width:22px;height:22px}
.pg-scope .fo-feat .n{font-size:.62rem;letter-spacing:.16em;color:var(--muted-2);transition:color .25s var(--ease)}
.pg-scope .fo-feat h3{margin-top:28px;font-size:1.3rem;letter-spacing:-.02em;line-height:1.15;text-transform:none;text-wrap:balance}
.pg-scope .fo-feat p{margin-top:8px;color:var(--muted);font-size:.96rem;line-height:1.5;text-wrap:pretty}
.pg-scope .fo-feat-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;font-size:.6rem;letter-spacing:.16em;color:var(--ink)}
.pg-scope .fo-feat-go svg{width:13px;height:13px;transition:translate .25s var(--ease)}
.pg-scope .fo-feat:hover .n{color:var(--purple)}
.pg-scope .fo-feat:hover .fo-feat-go{color:var(--purple)}
.pg-scope .fo-feat:hover .fo-feat-go svg{translate:4px 0}

/* ---------- approach: subtitle + description, the three pillars, the statement (Moondust band) ---------- */
.pg-scope .fo-approach{background:var(--paper-2)}
.pg-scope .fo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end;margin-bottom:56px}
.pg-scope .fo-split .eyebrow{display:inline-block;margin-bottom:18px;color:var(--ink)}
.pg-scope .fo-split h2{font-size:clamp(1.9rem,3.6vw,3rem);text-transform:uppercase;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.pg-scope .fo-lead{color:var(--muted);font-size:1.1rem;line-height:1.62;max-width:56ch}
.pg-scope .fo-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pg-scope .fo-benefit{display:flex;flex-direction:column;overflow:hidden;border-radius:12px}
.pg-scope .fo-benefit-art{position:relative;display:grid;place-items:center;height:220px;margin:10px 10px 0;border-radius:8px;overflow:hidden;
  background:radial-gradient(80% 90% at 50% 100%,rgba(185,239,163,.36),transparent 70%),radial-gradient(60% 70% at 85% 10%,rgba(133,17,217,.10),transparent 70%),var(--paper-2)}
.pg-scope .fo-benefit-glow{position:absolute;left:50%;top:55%;width:58%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(133,17,217,.16),transparent 68%);filter:blur(12px)}
.pg-scope .fo-benefit-art img.fo-benefit-img{position:absolute;inset:8% 7%;width:86%;height:84%;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(11,11,12,.16));transition:scale .5s var(--ease)}
.pg-scope .fo-benefit:hover .fo-benefit-img{scale:1.04}
.pg-scope .fo-benefit-in{display:flex;flex-direction:column;flex:1;padding:22px 24px 22px}
.pg-scope .fo-benefit h3{font-size:1.3rem;letter-spacing:-.02em;line-height:1.15;text-transform:none;text-wrap:balance}
.pg-scope .fo-benefit p{margin-top:10px;color:var(--muted);line-height:1.55;text-wrap:pretty}
.pg-scope .fo-benefit:hover .fo-feat-go{color:var(--purple)}
.pg-scope .fo-benefit:hover .fo-feat-go svg{translate:4px 0}
.pg-scope .fo-statement{max-width:860px;margin:72px auto 0;text-align:center}
.pg-scope .fo-statement h2,.pg-scope .fo-statement h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.1;text-transform:none;text-wrap:balance}
.pg-scope .fo-statement h2 strong,.pg-scope .fo-statement h3 strong{font-weight:inherit}
.pg-scope .fo-statement p{margin:16px auto 0;max-width:62ch;color:var(--muted);font-size:1.08rem;line-height:1.62}

/* ---------- what we deliver: a numbered two-column ledger ---------- */
.pg-scope .fo-deliver .thead h2{text-wrap:balance}
.pg-scope .fo-ledger{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);border-top:1px solid var(--line)}
.pg-scope .fo-ledger li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px;margin:0;padding:28px 8px 30px 4px;border-bottom:1px solid var(--line);transition:background .35s var(--ease)}
.pg-scope .fo-ledger li:hover{background:linear-gradient(90deg,rgba(185,239,163,.2),rgba(185,239,163,0) 72%)}
.pg-scope .fo-ledger .n{font-size:.66rem;letter-spacing:.16em;color:var(--muted-2);padding-top:7px;transition:color .3s var(--ease)}
.pg-scope .fo-ledger li:hover .n{color:var(--purple)}
.pg-scope .fo-ledger h3{display:flex;align-items:center;gap:12px;font-size:1.25rem;letter-spacing:-.018em;line-height:1.2;text-transform:none}
.pg-scope .fo-ledger .ok{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(185,239,163,.6);color:var(--green-text)}
.pg-scope .fo-ledger .ok svg{width:12px;height:12px}
.pg-scope .fo-ledger p{margin-top:10px;color:var(--muted);line-height:1.6;max-width:56ch}

/* ---------- customer quote + office (Moondust band; was an inline <style> in the template) ---------- */
.pg-scope .fo-quote{background:var(--paper-2)}
.pg-scope .fo-quote .inspace-editorial-row{margin:0;align-items:center;width:auto}
.pg-scope .inspace-quote{position:relative;margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:56px clamp(26px,5vw,64px) 44px;box-shadow:0 30px 70px -56px rgba(11,11,12,.4)}
.pg-scope .inspace-quote .iq-mark{position:absolute;top:-6px;left:clamp(20px,4vw,48px);font-size:110px;line-height:1;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;pointer-events:none}
.pg-scope .inspace-quote blockquote{margin:0;font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.62;color:var(--ink);font-weight:500;letter-spacing:-.005em}
.pg-scope .inspace-quote figcaption{margin-top:26px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pg-scope .inspace-quote figcaption b{font-size:1rem;font-weight:700;color:var(--ink)}
.pg-scope .inspace-quote figcaption span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* ---------- FAQ + the options CTA as the page's one dark card ---------- */
.pg-scope .fo-cta-card{position:relative;isolation:isolate;overflow:hidden;margin-top:32px;max-width:460px;min-height:320px;padding:30px 30px 32px;border-radius:12px;color:#fff;
  background:radial-gradient(80% 90% at 100% 0%,rgba(133,17,217,.5),transparent 62%),radial-gradient(70% 80% at 0% 100%,rgba(84,184,106,.22),transparent 60%),var(--black)}
.pg-scope .fo-cta-in{position:relative;z-index:2;max-width:62%}
.pg-scope .fo-cta-card h3{font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:-.025em;line-height:1.08;text-transform:none;text-wrap:balance}
.pg-scope .fo-cta-card p{margin-top:12px;color:rgba(255,255,255,.76);font-size:.98rem;line-height:1.55}
.pg-scope .fo-cta-card .btn-green{margin-top:22px;height:48px;padding:0 20px;font-size:.95rem}
.pg-scope .fo-cta-card .btn-green:focus-visible{outline-color:var(--green)}
.pg-scope .fo-cta-card .cv-scan{margin-top:20px}
.pg-scope .fo-cta-img{position:absolute;z-index:1;right:0;bottom:0;width:auto;height:88%;max-width:46%;object-fit:contain;object-position:bottom right;pointer-events:none}
/* With the scan block the copy column needs the full width; the photo steps back. */
.pg-scope .fo-cta-card:has(.cv-scan) .fo-cta-in{max-width:none}
.pg-scope .fo-cta-card:has(.cv-scan) .fo-cta-img{opacity:.22}
.pg-scope .fo-faq .sv-faq-head{position:static}
@media (min-width:961px){.pg-scope .fo-faq .sv-faq-head{position:sticky;top:110px}}

/* ---------- CRO variant features-overview-grid: 'why it works together' row under the seven-feature grid ---------- */
.pg-scope .fo-why{margin-top:56px}
.pg-scope .fo-why .eyebrow{display:inline-block;margin-bottom:18px;color:var(--ink)}
.pg-scope .fo-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);border-top:1px solid var(--line);padding-top:26px}
.pg-scope .fo-why h3{font-size:1.15rem;letter-spacing:-.02em;line-height:1.2;text-transform:none;text-wrap:balance}
.pg-scope .fo-why p{margin-top:8px;color:var(--muted);line-height:1.55;text-wrap:pretty}
@media (max-width:960px){.pg-scope .fo-why-grid{grid-template-columns:minmax(0,1fr);gap:22px}.pg-scope .fo-why{margin-top:40px}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .pg-scope .fo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-scope .fo-feat,.pg-scope .fo-feat:nth-child(-n+3){grid-column:auto}
  .pg-scope .fo-feat:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:960px){
  .pg-scope .fo-hero h1{max-width:none}
  .pg-scope .fo-split{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;margin-bottom:40px}
  .pg-scope .fo-benefits{grid-template-columns:minmax(0,1fr);gap:12px}
  .pg-scope .fo-benefit{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .pg-scope .fo-benefit-art{height:auto;min-height:200px;margin:10px 0 10px 10px}
  .pg-scope .fo-ledger{grid-template-columns:minmax(0,1fr)}
  .pg-scope .fo-quote .inspace-editorial-row{grid-template-columns:minmax(0,1fr)}
  .pg-scope .fo-cta-card{max-width:560px}
}
@media (max-width:640px){
  .pg-scope .fo-features{padding-top:64px}
  .pg-scope .fo-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .pg-scope .fo-feat:last-child:nth-child(odd){grid-column:auto}
  .pg-scope .fo-feat{min-height:0;padding:20px 20px 18px}
  .pg-scope .fo-feat h3{margin-top:18px;font-size:1.18rem}
  .pg-scope .fo-benefit{display:flex}
  .pg-scope .fo-benefit-art{height:180px;min-height:0;margin:10px 10px 0}
  .pg-scope .fo-benefit-in{padding:18px 20px 20px}
  .pg-scope .fo-statement{margin-top:48px;text-align:left}
  .pg-scope .fo-statement p{margin-left:0}
  .pg-scope .fo-ledger li{grid-template-columns:40px minmax(0,1fr);padding:22px 4px 24px 0}
  .pg-scope .fo-ledger h3{font-size:1.12rem;align-items:flex-start}
  .pg-scope .inspace-quote{padding:48px 22px 30px}
  .pg-scope .inspace-quote .iq-mark{font-size:84px;top:-4px}
  .pg-scope .fo-cta-card{padding:26px 22px 28px;min-height:0}
  .pg-scope .fo-cta-in{max-width:66%}
  .pg-scope .fo-cta-img{height:56%;max-width:40%}
  .pg-scope .fo-cta-card .btn-green{white-space:nowrap;position:relative;z-index:3}
}
@media (prefers-reduced-motion:reduce){.pg-scope .fo-benefit-img,.pg-scope .fo-feat-go svg{transition:none}}