/* ==========================================================================
   CROWN Scout Girls — Paywall / Subscribe (W-25 Step 7)
   Scoped under .csg-scope.csg-paywall so it never leaks into legacy Zox News
   templates. Ported from design_handoff_w25_recruiting_platform/screens/paywall.jsx.

   Two frame variants:
     .csg-paywall--gate   dark private-access screen
     .csg-paywall--plan   light plan/checkout page (initial or renewal)

   Uses design tokens from crown-tokens.css:
     --csg-red, --csg-red-dark, --radius-md
   ========================================================================== */

.csg-paywall{
	--disp: 'Oswald', 'Arial Narrow', sans-serif;
	--bodyf: 'PT Serif', Georgia, serif;
	--uif: 'Roboto', system-ui, sans-serif;
	--disp-ls: 0.01em;
	color: #2A2A2A;
	font-family: var(--uif);
}
.csg-paywall *,
.csg-paywall *::before,
.csg-paywall *::after{ box-sizing: border-box; }

/* Shared primitives -------------------------------------------------------- */

.csg-paywall .pw-btn{
	font-family: var(--disp); font-weight: 600; font-size: 12px;
	letter-spacing: .08em; text-transform: uppercase;
	padding: 9px 16px; border-radius: var(--radius-md, 4px);
	cursor: pointer; border: 1px solid transparent;
	display: inline-flex; align-items: center; gap: 7px;
	text-decoration: none; white-space: nowrap; line-height: 1;
}
.csg-paywall .pw-btn svg{ width: 15px; height: 15px; }
.csg-paywall .pw-btn-red{ background: var(--csg-red, #ED0000); color: #fff; }
.csg-paywall .pw-btn-red:hover{ background: var(--csg-red-dark, #B50000); color: #fff; }
.csg-paywall .pw-btn-dark{ background: #111; color: #fff; }
.csg-paywall .pw-btn-dark:hover{ background: #000; color: #fff; }
.csg-paywall .pw-btn-lg{ padding: 15px 28px; font-size: 15px; }
.csg-paywall .pw-btn-lg svg{ width: 18px; height: 18px; }
.csg-paywall .pw-btn.is-block{ opacity: .85; cursor: default; }

.csg-paywall .pw-fld{ display: flex; flex-direction: column; gap: 7px; }
.csg-paywall .pw-fld-l{
	font-family: var(--uif); font-weight: 700; font-size: 10px;
	letter-spacing: .12em; text-transform: uppercase; color: #999;
}
.csg-paywall .pw-fld input{
	font-family: var(--disp); font-weight: 500; font-size: 18px;
	letter-spacing: .02em; padding: 14px 16px;
	border: 1px solid #D6D6D6; border-radius: var(--radius-md, 4px);
	color: #111; background: #fff; outline: none; width: 100%;
}
.csg-paywall .pw-fld input::placeholder{
	color: #C0C0C0; font-family: var(--uif); font-weight: 400; letter-spacing: 0;
}
.csg-paywall .pw-fld input:focus{
	border-color: var(--csg-red, #ED0000);
	box-shadow: 0 0 0 3px rgba(237,0,0,.12);
}

.csg-paywall .pw-ck{
	width: 19px; height: 19px; border-radius: 50%;
	background: var(--csg-red, #ED0000); color: #fff;
	display: grid; place-items: center; flex: none;
}
.csg-paywall .pw-ck svg{ width: 12px; height: 12px; }

/* Frame 1 — GATE ---------------------------------------------------------- */

.csg-paywall--gate{ background: #111; }
.csg-paywall--gate .pw-gate{
	min-height: 70vh; display: flex; align-items: center;
}
.csg-paywall--gate .pw-gatebody{
	display: grid; grid-template-columns: 1fr 300px; gap: 40px;
	align-items: center; max-width: 960px; margin: 0 auto;
	padding: 56px 40px; width: 100%;
}
.csg-paywall--gate .pw-gatecard{ color: #fff; }
.csg-paywall--gate .pw-gk{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--uif); font-weight: 700; font-size: 11px;
	letter-spacing: .16em; text-transform: uppercase; color: var(--csg-red, #ED0000);
}
.csg-paywall--gate .pw-gk svg{ width: 15px; height: 15px; }
.csg-paywall--gate .pw-gatecard h1{
	font-family: var(--disp); font-weight: 700; font-size: 52px;
	line-height: .98; letter-spacing: var(--disp-ls);
	text-transform: uppercase; color: #fff; margin: 16px 0 0;
}
.csg-paywall--gate .pw-glede{
	font-family: var(--bodyf); font-size: 16.5px; line-height: 1.55;
	color: #B4B4B4; max-width: 46ch; margin: 16px 0 28px;
}
.csg-paywall--gate .pw-gform{
	display: flex; align-items: flex-end; gap: 12px; max-width: 520px;
	margin: 0;
}
.csg-paywall--gate .pw-gform .pw-fld{ flex: 1; }
.csg-paywall--gate .pw-fld-l{ color: #7A7A7A; }
.csg-paywall--gate .pw-fld input{
	background: #1B1B1B; border-color: #333; color: #fff;
}
.csg-paywall--gate .pw-fld input::placeholder{ color: #555; }
.csg-paywall--gate .pw-gfoot{
	display: flex; flex-direction: column; gap: 10px; margin-top: 26px;
}
.csg-paywall--gate .pw-galt{
	font-family: var(--uif); font-size: 13px; color: #9A9A9A;
}
.csg-paywall--gate .pw-galt a{
	color: #fff; text-decoration: underline; text-underline-offset: 2px;
}
.csg-paywall--gate .pw-gerror{
	margin-top: 18px; padding: 12px 16px;
	background: #2A0A0A; border: 1px solid #5A1717;
	color: #FFBDBD; font-family: var(--uif); font-size: 13.5px;
	border-radius: var(--radius-md, 4px); max-width: 520px;
}
.csg-paywall--gate .pw-gaside{
	border-left: 1px solid #262626; padding-left: 36px;
}
.csg-paywall--gate .pw-gaside-k{
	font-family: var(--uif); font-weight: 700; font-size: 10px;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--csg-red, #ED0000); margin-bottom: 16px;
}
.csg-paywall--gate .pw-gmini{
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 13px;
}
.csg-paywall--gate .pw-gmini li{
	display: flex; align-items: flex-start; gap: 10px;
	font-family: var(--uif); font-size: 13.5px; line-height: 1.35; color: #D8D8D8;
}
.csg-paywall--gate .pw-gmini li.more{
	color: #777; font-style: italic; padding-left: 29px;
}

/* Frame 2 — PLAN ---------------------------------------------------------- */

.csg-paywall--plan{ background: #fff; }
.csg-paywall--plan .pw-wrap{
	max-width: 1080px; margin: 0 auto; padding: 34px 40px 40px; width: 100%;
}
.csg-paywall--plan .pw-crumb{
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--uif); font-size: 12.5px; color: #8A8A8A;
	background: #F6F4EE; border: 1px solid #E9E5D8;
	border-radius: 999px; padding: 8px 16px; margin-bottom: 26px;
}
.csg-paywall--plan .pw-crumb svg{ width: 14px; height: 14px; color: var(--csg-red, #ED0000); }
.csg-paywall--plan .pw-crumb b{ color: #111; font-weight: 700; }

.csg-paywall--plan .pw-plane{
	display: grid; grid-template-columns: 1fr 400px; gap: 52px;
	align-items: start;
}

.csg-paywall--plan .pw-okj{
	display: flex; align-items: center; gap: 12px;
	font-family: var(--uif); font-weight: 700; font-size: 11px;
	letter-spacing: .16em; text-transform: uppercase; color: var(--csg-red, #ED0000);
}
.csg-paywall--plan .pw-loyaltag{
	font-family: var(--uif); font-weight: 700; font-size: 10px;
	letter-spacing: .08em; text-transform: uppercase;
	color: #8A6D00; background: #FBEFC4; border: 1px solid #F0DFA0;
	border-radius: 999px; padding: 3px 10px;
}
.csg-paywall--plan .pw-loyaltag.sm{ font-size: 9px; padding: 2px 8px; }
.csg-paywall--plan .pw-offer h1{
	font-family: var(--disp); font-weight: 700; font-size: 52px;
	line-height: .96; letter-spacing: var(--disp-ls);
	text-transform: uppercase; color: #111; margin: 12px 0 0;
}
.csg-paywall--plan .pw-olede{
	font-family: var(--bodyf); font-size: 17px; line-height: 1.55;
	color: #3A382F; max-width: 52ch; margin: 14px 0 24px;
}

.csg-paywall--plan .pw-window{
	display: grid; grid-template-columns: auto 1fr; column-gap: 14px;
	align-items: start; background: #111; border-radius: var(--radius-md, 4px);
	padding: 18px 22px; margin: 0 0 26px;
}
.csg-paywall--plan .pw-win-ic{
	grid-column: 1; grid-row: 1; flex: none;
	color: var(--csg-red, #ED0000); align-self: start;
}
.csg-paywall--plan .pw-win-ic svg{ width: 19px; height: 19px; display: block; }
.csg-paywall--plan .pw-win-tx{ display: contents; }
.csg-paywall--plan .pw-win-tx b{
	grid-column: 2; grid-row: 1;
	font-family: var(--disp); font-weight: 700; font-size: 19px;
	line-height: 19px; letter-spacing: .02em; text-transform: uppercase; color: #fff;
}
.csg-paywall--plan .pw-win-tx span{
	grid-column: 2; grid-row: 2;
	font-family: var(--uif); font-size: 13px; line-height: 1.5;
	color: #B4B4B4; margin-top: 6px;
}

.csg-paywall--plan .pw-pricebox{
	display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
	padding: 0 0 24px; border-bottom: 1px solid #EDEDED; margin-bottom: 24px;
}
.csg-paywall--plan .pw-price{
	display: flex; align-items: flex-start; gap: 4px; color: #111;
}
.csg-paywall--plan .pw-cur{
	font-family: var(--disp); font-weight: 700; font-size: 30px;
	line-height: 1; margin-top: 8px;
}
.csg-paywall--plan .pw-amt{
	display: inline-block; font-family: var(--disp); font-weight: 700;
	font-size: 72px; line-height: 76px; letter-spacing: .01em; color: #111;
}
.csg-paywall--plan .pw-per{
	font-family: var(--uif); font-weight: 600; font-size: 12px;
	letter-spacing: .04em; text-transform: uppercase; color: #999;
	margin-top: 10px; line-height: 1.3;
}
.csg-paywall--plan .pw-pricenote{
	font-family: var(--uif); font-size: 13px; color: #777;
	max-width: 20ch; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.csg-paywall--plan .pw-acct-check{
	display: flex; flex-direction: column; gap: 14px;
	margin-bottom: 22px;
}
.csg-paywall--plan .pw-acct-check .pw-fld{ max-width: 420px; }

.csg-paywall--plan .pw-abanner{
	display: flex; gap: 11px; align-items: flex-start;
	padding: 13px 16px; border-radius: var(--radius-md, 4px);
	font-family: var(--uif); font-size: 13.5px; line-height: 1.45; max-width: 520px;
}
.csg-paywall--plan .pw-ab-ic{ flex: none; margin-top: 1px; }
.csg-paywall--plan .pw-ab-ic svg{ width: 17px; height: 17px; }
.csg-paywall--plan .pw-abanner--warn{
	background: #FDECEA; border: 1px solid #F5C6C0; color: #8A2A20;
}
.csg-paywall--plan .pw-abanner--warn .pw-ab-ic{ color: var(--csg-red, #ED0000); }
.csg-paywall--plan .pw-abanner--steer{
	background: #FBEFC4; border: 1px solid #F0DFA0; color: #7A5E00;
}
.csg-paywall--plan .pw-abanner--steer .pw-ab-ic{ color: #B58900; }
.csg-paywall--plan .pw-abanner--ok{
	background: #E9F6ED; border: 1px solid #BFE4CA; color: #1E6B37;
}
.csg-paywall--plan .pw-abanner--ok .pw-ab-ic{ color: #37A853; }
.csg-paywall--plan .pw-ab-tx{ display: flex; flex-direction: column; gap: 6px; }
.csg-paywall--plan .pw-ab-link{
	display: inline-flex; align-items: center; gap: 5px;
	font-weight: 700; color: #8A6D00;
	text-decoration: underline; text-underline-offset: 2px;
}
.csg-paywall--plan .pw-ab-link svg{ width: 13px; height: 13px; }

.csg-paywall--plan .pw-ctafoot{
	display: flex; flex-direction: column; gap: 7px; margin: 14px 0 0;
}
.csg-paywall--plan .pw-secure{
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--uif); font-size: 12.5px; color: #8A8A8A;
}
.csg-paywall--plan .pw-secure svg{ width: 15px; height: 15px; color: #37A853; }
.csg-paywall--plan .pw-cnote{
	font-family: var(--uif); font-size: 12.5px; color: #999;
}
.csg-paywall--plan .pw-cnote a{
	font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}

.csg-paywall--plan .pw-features{
	margin-top: 30px; border-top: 1px solid #EDEDED; padding-top: 24px;
}
.csg-paywall--plan .pw-feat-h{
	font-family: var(--uif); font-weight: 700; font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase; color: #999; margin-bottom: 18px;
}
.csg-paywall--plan .pw-features ul{
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px;
}
.csg-paywall--plan .pw-features li{
	display: flex; align-items: flex-start; gap: 11px;
	font-family: var(--bodyf); font-size: 15.5px; line-height: 1.4; color: #26241E;
}
.csg-paywall--plan .pw-features li.perk{
	grid-column: 1 / -1; align-items: center;
	background: #FBEFC4; border: 1px solid #F0DFA0;
	border-radius: var(--radius-md, 4px); padding: 11px 14px;
	color: #5E4A00; font-weight: 700;
}
.csg-paywall--plan .pw-features li.perk .pw-ck{ background: #B58900; }
.csg-paywall--plan .pw-feat-tx{ flex: 1; min-width: 0; }
.csg-paywall--plan .pw-perktag{
	margin-left: auto; font-family: var(--uif); font-weight: 700;
	font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
	color: #8A6D00; background: #fff; border: 1px solid #F0DFA0;
	border-radius: 999px; padding: 3px 9px;
}

/* Right column — locked report preview */
.csg-paywall--plan .pw-gated{ position: sticky; top: 24px; }
.csg-paywall--plan .pw-gated-k{
	display: flex; align-items: center; gap: 9px;
	font-family: var(--uif); font-weight: 700; font-size: 10px;
	letter-spacing: .14em; text-transform: uppercase; color: #111; margin-bottom: 16px;
}
.csg-paywall--plan .pw-gated-k svg{ width: 15px; height: 15px; color: var(--csg-red, #ED0000); }
.csg-paywall--plan .pw-lockwrap{
	position: relative; border: 1px solid #E4E4E4;
	border-radius: var(--radius-md, 4px); overflow: hidden; background: #fff;
}
.csg-paywall--plan .pw-report{ padding: 22px 22px 26px; filter: saturate(.95); }
.csg-paywall--plan .pw-rep-hd{ display: flex; gap: 14px; align-items: center; }
.csg-paywall--plan .pw-rep-ph{
	width: 64px; height: 64px; border-radius: 50%;
	background: #ECECEC; box-shadow: 0 0 0 1px #E4E4E4; flex: none;
}
.csg-paywall--plan .pw-rep-nm{
	font-family: var(--disp); font-weight: 700; font-size: 24px;
	line-height: 1; text-transform: uppercase; color: #111;
}
.csg-paywall--plan .pw-rep-meta{
	font-family: var(--uif); font-size: 12px; color: #888; margin: 6px 0 4px;
}
.csg-paywall--plan .pw-rep-stars{ font-size: 14px; letter-spacing: 2px; color: #D8D8D8; }
.csg-paywall--plan .pw-rep-stars .f{ color: var(--csg-red, #ED0000); }
.csg-paywall--plan .pw-rep-grid{
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0;
}
.csg-paywall--plan .pw-rep-stat{
	border: 1px solid #EDEDED; border-radius: var(--radius-md, 4px);
	padding: 11px 13px; display: flex; flex-direction: column; gap: 3px;
}
.csg-paywall--plan .pw-rep-stat b{
	font-family: var(--uif); font-weight: 700; font-size: 9px;
	letter-spacing: .1em; text-transform: uppercase; color: #AAA;
}
.csg-paywall--plan .pw-rep-stat span{
	font-family: var(--disp); font-weight: 600; font-size: 15px;
	text-transform: uppercase; color: #111;
}
.csg-paywall--plan .pw-rep-tk{
	font-family: var(--uif); font-weight: 700; font-size: 10px;
	letter-spacing: .13em; text-transform: uppercase; color: var(--csg-red, #ED0000);
}
.csg-paywall--plan .pw-rep-take p{
	font-family: var(--bodyf); font-size: 14.5px; line-height: 1.6;
	color: #26241E; margin: 8px 0 12px;
}
.csg-paywall--plan .pw-rep-lines{ display: flex; flex-direction: column; gap: 8px; }
.csg-paywall--plan .pw-rep-lines span{ height: 9px; border-radius: 3px; background: #EDEDED; }
.csg-paywall--plan .pw-rep-lines span:nth-child(1){ width: 100%; }
.csg-paywall--plan .pw-rep-lines span:nth-child(2){ width: 97%; }
.csg-paywall--plan .pw-rep-lines span:nth-child(3){ width: 90%; }
.csg-paywall--plan .pw-rep-lines span:nth-child(4){ width: 55%; }

.csg-paywall--plan .pw-veil{
	position: absolute; left: 0; right: 0; bottom: 0; top: 38%;
	backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
	background: linear-gradient(to bottom,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,.86) 42%,
		rgba(255,255,255,.97) 100%);
	display: flex; flex-direction: column; align-items: center;
	justify-content: flex-end; text-align: center;
	padding: 0 26px 30px; gap: 4px;
}
.csg-paywall--plan .pw-veil-lock{
	width: 44px; height: 44px; border-radius: 50%;
	background: #111; color: #fff; display: grid; place-items: center; margin-bottom: 8px;
}
.csg-paywall--plan .pw-veil-lock svg{ width: 20px; height: 20px; }
.csg-paywall--plan .pw-veil-t{
	font-family: var(--disp); font-weight: 700; font-size: 18px;
	text-transform: uppercase; color: #111; letter-spacing: .02em;
}
.csg-paywall--plan .pw-veil-s{
	font-family: var(--uif); font-size: 12.5px; color: #888; max-width: 32ch;
}

.csg-paywall--plan .pw-unlocklist{
	list-style: none; margin: 18px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 12px;
}
.csg-paywall--plan .pw-unlocklist li{
	display: flex; align-items: flex-start; gap: 11px;
	font-family: var(--bodyf); font-size: 15.5px; line-height: 1.4; color: #26241E;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 900px){
	.csg-paywall--gate .pw-gatebody{
		grid-template-columns: 1fr; gap: 32px; padding: 40px 24px;
	}
	.csg-paywall--gate .pw-gatecard h1{ font-size: 40px; }
	.csg-paywall--gate .pw-gaside{
		border-left: none; padding-left: 0;
		border-top: 1px solid #262626; padding-top: 24px;
	}
	.csg-paywall--gate .pw-gform{ flex-direction: column; align-items: stretch; }
	.csg-paywall--plan .pw-wrap{ padding: 24px 20px 32px; }
	.csg-paywall--plan .pw-plane{ grid-template-columns: 1fr; gap: 36px; }
	.csg-paywall--plan .pw-gated{ position: static; }
	.csg-paywall--plan .pw-offer h1{ font-size: 38px; }
	.csg-paywall--plan .pw-features ul{ grid-template-columns: 1fr; }
	.csg-paywall--plan .pw-amt{ font-size: 60px; line-height: 64px; }
}