/* =====================================================================
   PlaysOut shared v5 theme — brings inner pages in line with the homepage.
   Load after styles.css + v3.css + v5.css, with <body class="v3 v5 v5-page">.
   ===================================================================== */
body.v5-page{
  --navy:#07070f; --navy-2:#0b0b16; --slate:#15151f; --slate-2:#101019;
  --display:"Red Hat Display",system-ui,sans-serif;
  background:#07070f;
}
/* headings: same face and weight as the homepage */
.v5-page h1,.v5-page h2,.v5-page .title,.v5-page .hero h1,.v5-page .hero-eyebrow{font-family:var(--font);font-weight:600;letter-spacing:-.035em}
/* hero: swap the bright blue wash for the homepage's grid + soft glow */
.v5-page .hero{background:radial-gradient(70% 55% at 50% 0%,rgba(73,92,245,.22),transparent 70%),#07070f!important}
/* cards and panels: hairline outlines like the homepage */
.v5-page .fcard,.v5-page .duo-card,.v5-page .ncard,.v5-page .card{background:rgba(255,255,255,.025);border:1px solid var(--hair);box-shadow:none}
/* sections separated by hairlines instead of colour bands */
.v5-page section+section{border-top:1px solid var(--hair)}
/* page hero: homepage grid + soft glow instead of the bright blue wash */
.v5-page .page-hero{background:
  radial-gradient(60% 50% at 50% 0%,rgba(73,92,245,.28),transparent 70%),
  linear-gradient(var(--hair) 1px,transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/64px 64px,#07070f!important}
.v5-page .page-hero::before,.v5-page .page-hero::after{display:none!important}
.v5-page .page-hero h1{font-family:var(--font);font-weight:600;letter-spacing:-.04em}
.v5-page .page-hero p{color:var(--t2)}
/* in-page buttons: homepage style (white solid / outlined), nav buttons untouched */
.v5-page section .btn{border-radius:10px;padding:8px 8px 8px 20px;gap:12px;font-weight:600;letter-spacing:0;text-transform:none;box-shadow:none}
.v5-page section .btn .arrow{width:30px;height:30px;border-radius:7px}
.v5-page section .btn--blue{background:#fff;color:#07070f}
.v5-page section .btn--blue .arrow{background:#07070f;color:#fff}
.v5-page section .btn--dark{background:rgba(255,255,255,.02);color:var(--t1);box-shadow:inset 0 0 0 1px var(--hair-2)}
.v5-page section .btn:hover{transform:translateY(-1px)}
/* accent panels (e.g. the cup card): toned down to the homepage's indigo glow */
.v5-page .cup-hero{background:radial-gradient(80% 100% at 80% 0%,rgba(73,92,245,.35),transparent 70%),rgba(255,255,255,.025)!important;border:1px solid var(--hair)!important}
/* hero grid v2: finer, fainter, fading out from the top centre (matches homepage) */
.v5-page .page-hero{background:radial-gradient(60% 50% at 50% 0%,rgba(73,92,245,.22),transparent 70%),#07070f!important}
body.v5-page .page-hero::after{content:"";display:block!important;position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask:radial-gradient(60% 70% at 50% 0%,#000 10%,transparent 75%);mask:radial-gradient(60% 70% at 50% 0%,#000 10%,transparent 75%)}
.v5-page .page-hero>*{position:relative;z-index:1}
/* dev-arena: 5-step flow */
body.v5-page .v5-flow{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
body.v5-page .v5-flow::before{content:"";position:absolute;top:28px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,rgba(143,150,255,.1),rgba(143,150,255,.6),rgba(143,150,255,.1))}
body.v5-page .v5-flow::after{content:"";position:absolute;top:26px;left:10%;width:6px;height:5px;border-radius:50%;background:#B9BEFF;box-shadow:0 0 12px #8F96FF;animation:v5flowdot 6s linear infinite}
@keyframes v5flowdot{from{left:10%}to{left:90%}}
body.v5-page .v5-flow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
body.v5-page .v5-flow-node{position:relative;z-index:1;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#C9CDFF;background:#0f0f1c;box-shadow:inset 0 0 0 1px rgba(143,150,255,.4),0 0 0 6px #07070f;transition:transform .25s,background .25s,color .25s}
body.v5-page .v5-flow-node svg{width:24px;height:24px}
body.v5-page .v5-flow li:hover .v5-flow-node{transform:translateY(-3px);background:#fff;color:#07070f}
body.v5-page .v5-flow-n{margin-top:18px;font-family:var(--mono,ui-monospace),monospace;font-size:.72rem;letter-spacing:.12em;color:rgba(255,255,255,.4)}
body.v5-page .v5-flow h3{margin:6px 0 8px;font-family:'Red Hat Display',sans-serif;font-size:1.15rem;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:8px}
body.v5-page .v5-flow p{margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.6);max-width:220px}
body.v5-page .v5-flow-free{font:600 .6rem/1 var(--mono,ui-monospace),monospace;letter-spacing:.1em;text-transform:uppercase;color:#3EE0A0;background:rgba(62,224,160,.12);box-shadow:inset 0 0 0 1px rgba(62,224,160,.35);padding:4px 7px;border-radius:999px}
@media(max-width:900px){body.v5-page .v5-flow{grid-template-columns:1fr;gap:28px}body.v5-page .v5-flow::before,body.v5-page .v5-flow::after{display:none}body.v5-page .v5-flow li{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:flex-start;gap:0 16px;padding-left:72px;min-height:56px}body.v5-page .v5-flow-node{position:absolute;left:0;top:0}body.v5-page .v5-flow-n{margin-top:0;width:100%}body.v5-page .v5-flow p{max-width:none}}
@media(prefers-reduced-motion:reduce){body.v5-page .v5-flow::after{animation:none;display:none}}
/* page title flows straight into its content: no divider, no double gap */
body.v5-news .page-hero{padding-bottom:48px!important}
body.v5-news .page-hero + .section{border-top:0!important;padding-top:0!important}
body.v5-news .page-hero + .section::before{display:none!important}

/* ================= ONE TYPE SYSTEM (matches homepage) ================= */
/* eyebrows: mono, uppercase, bracketed, muted */
body.v5-page .eyebrow,body.v5-page .hero-eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:.74rem!important;font-weight:400!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:rgba(255,255,255,.45)!important;line-height:1.4!important;margin:0 0 18px!important;background:none!important;-webkit-text-fill-color:currentColor!important}
body.v5-page .eyebrow::before,body.v5-page .hero-eyebrow::before{content:"[ "}
body.v5-page .eyebrow::after,body.v5-page .hero-eyebrow::after{content:" ]"}
/* h1: same as homepage hero */
body.v5-page h1{font-family:'Red Hat Display',sans-serif!important;font-weight:600!important;font-size:clamp(2.6rem,6.2vw,5.4rem)!important;line-height:1!important;letter-spacing:-.035em!important}
body.v5-page .gate h1,body.v5-page #area h1{font-size:clamp(2rem,3.4vw,2.6rem)!important}
/* h2: same as homepage section heads */
body.v5-page h2,body.v5-page h2.title{font-family:'Red Hat Display',sans-serif!important;font-weight:600!important;font-size:clamp(2.2rem,4.2vw,3.4rem)!important;line-height:1.04!important;letter-spacing:-.035em!important}
body.v5-page .sec-head,body.v5-page .sec-head.center{text-align:left!important;margin-left:0!important;margin-right:0!important}
body.v5-page .sec-head .title{margin:0!important}
/* hero subline */
body.v5-page .page-hero p:not(.eyebrow),body.v5-page .hero .sub{font-size:1.2rem!important;line-height:1.5!important;font-weight:400!important;color:rgba(255,255,255,.62)!important}
body.v5-page .lead{font-size:1.08rem!important;line-height:1.55!important;color:rgba(255,255,255,.62)!important}
/* card titles + body */
body.v5-page h3,body.v5-page h4,body.v5-page .fcard h4{font-family:'Red Hat Display',sans-serif!important;font-weight:600!important;font-size:1.15rem!important;line-height:1.25!important;letter-spacing:-.02em!important;color:#fff}
body.v5-page .mini,body.v5-page .fcard p,body.v5-page .doc p,body.v5-page .v5-flow p{font-size:.92rem!important;line-height:1.5!important;color:rgba(255,255,255,.6)!important}
/* buttons: same as homepage (44px, 10px radius, .95rem/600, plain arrow) */
body.v5-page main .btn,body.v5-page section .btn{height:44px!important;padding:0 20px!important;border-radius:10px!important;font-family:'Red Hat Display',sans-serif!important;font-size:.95rem!important;font-weight:600!important;gap:8px!important;letter-spacing:0!important;text-transform:none!important}
body.v5-page section .btn .arrow{width:auto!important;height:auto!important;background:none!important;color:inherit!important;border-radius:0!important;box-shadow:none!important}
/* news cards */
body.v5-page .ncard-outlet{font-weight:600!important;letter-spacing:-.01em!important}
body.v5-page .ncard .tag,body.v5-page .tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-weight:400!important;font-size:.7rem!important;letter-spacing:.14em!important}
body.v5-page .ncard .read,body.v5-page .read{font-weight:600!important}
body.v5-page .page-hero .eyebrow,body.v5-page .hero .hero-eyebrow,body.v5-page .gate .eyebrow,body.v5-page #area .eyebrow{display:block!important;text-align:center!important;margin:0 auto 18px!important}
body.v5-page section .btn .arrow{font-size:1rem!important;line-height:1!important}
body.v5-page section .btn--blue{background:#fff!important;color:#07070f!important;opacity:1!important}
body.v5-page .feature-row:not(.tiles) .fcard{min-height:0!important;padding:24px 22px!important;display:flex!important;align-items:flex-start!important;justify-content:flex-start!important}
/* headings a fraction smaller (matches homepage) */
body.v5-page h1{font-size:clamp(2.4rem,5.4vw,4.6rem)!important}
body.v5-page h2,body.v5-page h2.title{font-size:clamp(2rem,3.6vw,2.9rem)!important}
/* investors: same hero grid over the blue */
body.v5-page .gate-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask:radial-gradient(70% 75% at 50% 0%,#000 15%,transparent 80%);mask:radial-gradient(70% 75% at 50% 0%,#000 15%,transparent 80%)}
body.v5-page .gate-wrap>*{position:relative;z-index:1}
body.v5-page .gate-wrap>.gate-logo,body.v5-page .gate-wrap>.gate-back{position:absolute}

/* Mobile pass (phones only) */
@media(max-width:600px){body.v5-page .page-hero p:not(.eyebrow),body.v5-page .hero .sub,body.v5-page .lead{font-size:1rem!important;line-height:1.5!important}body.v5-page .page-hero h1{font-size:2.1rem!important;line-height:1.08!important}body.v5-page .section h2,body.v5-page .title{font-size:1.65rem!important;line-height:1.12!important}}