/* Spes Financials — content/SEO pages (product pages + /financing hub).
   Self-contained dark-aurora theme, matching the landing, wizard and portal. */
:root{
  --co:#FF6B4A;--co2:#FF8B6E;--mt:#6EE7B7;--vi:#7C6DF2;
  --ink:#0B0D10;--tx:#F2F4F7;--tx2:#9AA3AE;--tx3:#6B7280;
  --panel:rgba(255,255,255,.045);--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--tx);line-height:1.62;
  font-family:Inter,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 520px at 8% -2%, rgba(255,107,74,.26), transparent 60%),
    radial-gradient(680px 520px at 96% 4%, rgba(110,231,183,.16), transparent 58%),
    radial-gradient(820px 640px at 50% 116%, rgba(124,109,242,.24), transparent 62%);
  animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-22px,0) scale(1.07)}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}html{scroll-behavior:auto}}
.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0 clamp(18px,4vw,26px)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:20;background:var(--co);color:#1A0B06;padding:8px 14px;border-radius:8px}
a{color:var(--co2);text-decoration:none}

/* header */
.site{position:sticky;top:0;z-index:10;backdrop-filter:blur(10px);
  background:rgba(11,13,16,.72);border-bottom:1px solid var(--line)}
.site .wrap{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.lg{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;color:#fff}
.lg b{color:var(--co)}
.nav{display:flex;gap:20px;margin-left:8px}
.nav a{color:var(--tx2);font-size:14px;font-weight:500}
.nav a:hover{color:#fff}
.site .btn{margin-left:auto}
@media(max-width:640px){.nav{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:15px;padding:13px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .16s ease,box-shadow .22s ease,border-color .2s ease,background .2s ease}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-co{background:linear-gradient(135deg,var(--co),var(--co2));color:#1A0B06;box-shadow:0 10px 26px rgba(255,107,74,.34)}
.btn-co:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,107,74,.5)}
.btn-gh{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--tx)}
.btn-gh:hover{border-color:var(--co);color:#FFA98D}

/* hero */
.hero{padding:clamp(40px,7vw,72px) 0 8px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--co);margin:0 0 14px}
.badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 12px;border-radius:999px;margin-bottom:16px}
.badge.on{background:rgba(110,231,183,.14);color:#8FF0C6;border:1px solid rgba(110,231,183,.3)}
.badge.soon{background:rgba(124,109,242,.16);color:#B9AFFB;border:1px solid rgba(124,109,242,.35)}
h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 16px;max-width:16ch}
.lead{color:var(--tx2);font-size:clamp(17px,2.4vw,20px);max-width:60ch;margin:0 0 26px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}

/* specs strip */
.specs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 12px;padding:0}
@media(max-width:820px){.specs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.specs{grid-template-columns:1fr}}
.spec{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;backdrop-filter:blur(8px)}
.spec dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3);margin-bottom:6px}
.spec dd{margin:0;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:15px;color:#fff}
.disc{color:var(--tx3);font-size:12.5px;margin:14px 0 0}

/* prose body */
.body{padding:clamp(30px,5vw,48px) 0}
.prose{max-width:760px}
.prose h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.3rem,2.8vw,1.7rem);letter-spacing:-.02em;margin:38px 0 12px;color:#fff}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px;color:#D6DAE1}
.prose strong{color:#fff}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:6px 0 8px;display:grid;gap:14px}
.steps li{display:flex;gap:15px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;backdrop-filter:blur(8px)}
.steps .n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:"Space Grotesk",sans-serif;font-weight:700;color:#1A0B06;background:linear-gradient(135deg,var(--co),var(--co2))}
.steps b{display:block;font-family:"Space Grotesk",sans-serif;color:#fff;margin-bottom:3px}
.steps p{margin:0;color:var(--tx2);font-size:14.5px}

/* callout */
.callout{background:linear-gradient(120deg,rgba(255,107,74,.10),rgba(124,109,242,.08));
  border:1px solid var(--line2);border-left:3px solid var(--co);border-radius:12px;padding:16px 18px;margin:22px 0}
.callout b{font-family:"Space Grotesk",sans-serif;color:#fff;display:block;margin-bottom:4px}
.callout p{margin:0;color:var(--tx2);font-size:14.5px}

/* faq */
.faq{margin-top:8px}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:15px 18px;font-family:"Space Grotesk",sans-serif;font-weight:600;color:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--co);font-size:20px;font-weight:400;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 18px 16px;color:var(--tx2);font-size:14.5px}

/* related + hub grids */
.related{padding:6px 0 10px}
.related h2{font-family:"Space Grotesk",sans-serif;font-size:1.4rem;letter-spacing:-.02em;margin:0 0 16px;color:#fff}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.rgrid,.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rgrid,.pgrid{grid-template-columns:1fr}}
.rcard,.pcard{display:flex;flex-direction:column;gap:5px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px 18px;backdrop-filter:blur(8px);transition:transform .18s ease,border-color .2s ease,background .2s ease}
.rcard:hover,.pcard:hover{transform:translateY(-3px);border-color:rgba(255,107,74,.5);background:rgba(255,255,255,.065)}
.rcard b,.pcard b{font-family:"Space Grotesk",sans-serif;color:#fff;font-size:16px}
.rcard span,.pcard .pb{color:var(--tx2);font-size:13.5px}
.rcard .rmeta,.pcard .ps{color:var(--co2);font-weight:600;font-size:13px;font-family:"IBM Plex Mono",monospace;margin-top:4px}
.pcard .ab{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--tx3)}
.pcard .pm{color:#fff;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14px;margin-top:6px}

/* cta band */
.ctaband{padding:14px 0 60px}
.ctaband .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,107,74,.16),rgba(110,231,183,.10));
  border:1px solid var(--line2);border-radius:20px;padding:26px 28px}
.ctaband b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.2rem;color:#fff}
.ctaband span{color:var(--tx2);font-size:14.5px}

/* footer */
.foot{border-top:1px solid var(--line);padding:40px 0 48px;position:relative;z-index:1}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;margin-bottom:26px}
@media(max-width:640px){.fcols{grid-template-columns:1fr 1fr}}
.fcols>div{display:flex;flex-direction:column;gap:8px}
.fcols b{font-family:"Space Grotesk",sans-serif;color:#fff;font-size:13px;margin-bottom:4px}
.fcols a{color:var(--tx2);font-size:13.5px}
.fcols a:hover{color:#fff}
.fine{color:var(--tx3);font-size:12px;line-height:1.7;max-width:90ch;margin:0}
/* Header "Financing" dropdown — lists every product page from the top nav. */
.fdrop{position:relative;display:inline-block}
.fdrop>.ft{display:inline-flex;align-items:center;gap:6px}
.fdrop>.ft::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.8;transition:transform .2s ease}
.fdrop:hover>.ft::after,.fdrop:focus-within>.ft::after{transform:rotate(-135deg) translateY(1px)}
.fdrop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:256px;
  background:#12151b;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 8px 8px;
  box-shadow:0 26px 64px rgba(0,0,0,.55);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;z-index:70;display:grid;gap:1px}
.fdrop:hover>.fdrop-menu,.fdrop:focus-within>.fdrop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.fdrop-menu a{display:block;padding:9px 13px;border-radius:9px;color:#C7CDD6 !important;font-size:13.5px;font-weight:500;white-space:nowrap;text-decoration:none}
.fdrop-menu a:hover{background:rgba(255,255,255,.07);color:#fff !important}
.fdrop-menu a.all{color:#FF8B6E !important;font-weight:600;border-bottom:1px solid rgba(255,255,255,.08);border-radius:9px 9px 0 0;margin-bottom:3px}
@media(max-width:820px){.fdrop-menu{display:none}}