/* /pro in the Night shift look (26 Oct 2026, Jared: "Night shift look is awesome"; from DeckIQ/mockups/pro-night-20261026).
   Loads after home-night.css on <body class="night">. It restyles pro.html's own classes only: app-pro.js's ids
   (#offerBuy, #obLead, #buyQuarter, #buyYear, #obNote, #freeBtn) and the free-vs-pro card rules in pro.html stay as they are. */
body.night{font-family:Inter,Figtree,system-ui,sans-serif}
body.night h1,body.night h2,body.night h3,body.night .big,body.night .planHead{font-family:Sora,Outfit,sans-serif;letter-spacing:-.03em;color:var(--n-ink)}
body.night .kicker{font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--n-cT)}

/* the hero: night yard on the right, like the homepage's Pro band */
body.night .pageHead{position:relative;overflow:hidden;background:#04070F;color:#EAF2FF;padding:96px 28px 88px;border:0;
  --n-ink:#EAF2FF;--n-cT:#7DF3FF}
/* styles.css draws .pageHead::before as an 820 px round glow, shifted left by half; undo all of that */
body.night .pageHead::before{content:'';position:absolute;width:auto;height:auto;transform:none;border-radius:0;filter:none;inset:0 0 0 56%;background:#04070F url(home/yard-pro-1200.webp) center/cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
body.night .pageHead .inner{position:relative;max-width:1240px}
body.night .pageHead h1{font-size:clamp(40px,4.6vw,64px);line-height:1.02;color:#fff;max-width:min(620px,48vw)}
body.night .pageHead p{color:#B7C6DE;font-size:18.5px;max-width:min(470px,46vw)}
body.night .pageHead p b{color:#7DF3FF}

/* bands and cards */
body.night .band{background:transparent!important;border-color:var(--n-line)}
body.night .big{font-size:clamp(30px,3.4vw,46px)}
body.night .sub,body.night .planSub,body.night .gMeta{color:var(--n-mut)}
body.night :is(.planCard,.guideCard,.faqItem,.boardShot,.win){background:linear-gradient(180deg,var(--n-glass1),var(--n-glass2));border:1px solid var(--n-line);border-radius:20px;box-shadow:var(--n-shadow);color:var(--n-ink)}
body.night .planCard.pro{border-color:rgba(59,232,255,.55);box-shadow:var(--n-shadow),0 0 0 1px rgba(59,232,255,.3),0 0 50px -16px rgba(59,232,255,.55)}
body.night .planFlag{background:linear-gradient(180deg,#7DF3FF,#22C9F0);color:#03121A}
body.night .pTag{color:var(--n-cT)}
body.night .planAmt b,body.night .planPrices b{font-family:Sora,sans-serif;color:var(--n-ink)}
body.night .planCard.pro .planPrices b{color:var(--n-cT)}
body.night .planRows .diff b,body.night .planRows b.good{color:var(--n-cT)}
body.night .btn.gloss,body.night .planBtn.gloss{background:linear-gradient(180deg,#7DF3FF,#22C9F0);color:#03121A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 10px 34px -8px rgba(59,232,255,.7)}
body.night .btn.gloss::before{display:none}
body.night .btn.gloss-dark{background:var(--n-glass2);color:var(--n-ink);box-shadow:inset 0 0 0 1px var(--n-line)}
body.night .tickList li::before,body.night .boardTicks li::before{color:var(--n-c)}
body.night .gTag{color:var(--n-cT);border-color:var(--n-line)}
body.night footer{margin-top:0}
/* light mode: the same grid, glow and trace as the homepage (its rules cover .n-glass; these cover /pro's cards) */
html[data-mode="light"] body.night :is(.planCard,.guideCard,.boardShot){position:relative}
html[data-mode="light"] body.night :is(.planCard,.guideCard,.boardShot).n-lit::after{content:'';position:absolute;inset:-2px;border-radius:inherit;padding:3px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--tr),rgba(59,232,255,.25) 0 55%,rgba(59,232,255,.5) 70%,#3BE8FF 84%,#fff 87%,#3BE8FF 90%,rgba(59,232,255,.25) 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 6px #3BE8FF);animation:nTrace 6s linear infinite,nLit .6s ease-out}   /* one box at a time, .n-lit */
html[data-mode="light"] body.night .guideCard.n-lit::after{inset:-1px;padding:2px;filter:none}
/* phones and tablets: the picture goes behind the words, dimmed */
@media (max-width:900px){
  body.night .pageHead h1,body.night .pageHead p{max-width:none}
  body.night .pageHead{padding:64px 16px 56px}
  body.night .pageHead::before{inset:0;opacity:.35;-webkit-mask-image:none;mask-image:none}
}
/* laptops narrower than the page: the picture starts further right so it stays off the words */
@media (min-width:901px) and (max-width:1240px){body.night .pageHead::before{inset:0 0 0 58%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}}