/**
 * The Cast — free creator application page.
 * Inherits the theme's ink/bone/gold palette; only what this page needs lives here.
 */

#cast { --ink:#16161a; --bone:#f3ecdb; --gold:#c9a24b; --mute:#8b8477; --line:#2f2f36; --panel:#1c1c20; }

/* ---- hero ---- */
#cast .cast-hero { padding: 72px 0 44px; text-align: center; }
#cast .wrap { max-width: 860px; margin: 0 auto; padding: 0 22px; }
#cast .eyebrow {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .22em;
	text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}
#cast .cast-hero h1 {
	font-size: clamp(30px, 6vw, 56px); line-height: 1.04; letter-spacing: -.01em;
	margin: 0 0 20px; text-wrap: balance;
}
#cast .gold { color: var(--gold); }
#cast .cast-hero .tag {
	font-size: 17px; line-height: 1.6; color: #b6b0a2; max-width: 60ch;
	margin: 0 auto 16px;
}
#cast .cast-hero .free {
	display: inline-block; font-size: 14px; font-weight: 600; color: var(--bone);
	border: 1px solid var(--gold); border-radius: 2px; padding: 8px 16px; margin: 0;
}

/* ---- what you get ---- */
#cast .cast-what { padding: 20px 0 48px; }
#cast .cast-what .grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
	background: var(--line); border: 1px solid var(--line);
}
#cast .cast-what article { background: var(--panel); padding: 24px 22px; }
#cast .cast-what .k {
	display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em;
	text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
#cast .cast-what h3 { font-size: 18px; margin: 0 0 8px; }
#cast .cast-what p { font-size: 14.5px; line-height: 1.6; color: #b6b0a2; margin: 0; }
#cast .honest {
	margin: 22px 0 0; padding: 16px 18px; border-left: 3px solid var(--gold);
	background: rgba(201,162,75,.07); color: #cfc7b5; font-size: 14.5px; line-height: 1.6;
}

/* ---- form ---- */
#cast .cast-form-sec { padding: 0 0 80px; }
#cast .cast-form {
	background: var(--panel); border: 1px solid var(--line); padding: 30px;
	display: flex; flex-direction: column; gap: 16px;
}
#cast .cast-form h2 { font-size: 24px; margin: 0; }
#cast .cast-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#cast .cast-form label {
	display: flex; flex-direction: column; gap: 7px;
	font-size: 12px; font-weight: 600; letter-spacing: .04em;
	text-transform: uppercase; color: var(--mute);
}
#cast .cast-form input,
#cast .cast-form select,
#cast .cast-form textarea {
	font: inherit; font-size: 15px; text-transform: none; letter-spacing: 0;
	color: var(--bone); background: #131316; border: 1px solid var(--line);
	border-radius: 2px; padding: 12px 13px; width: 100%;
}
#cast .cast-form textarea { resize: vertical; line-height: 1.5; }
#cast .cast-form input::placeholder,
#cast .cast-form textarea::placeholder { color: #5f5a50; }
#cast .cast-form input:focus,
#cast .cast-form select:focus,
#cast .cast-form textarea:focus {
	outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold);
}
#cast .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#cast .cast-go {
	font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
	background: var(--gold); color: var(--ink); border: 0; border-radius: 2px;
	padding: 15px 20px; margin-top: 4px;
}
#cast .cast-go:hover { background: #d9b465; }
#cast .cast-go:disabled { opacity: .6; cursor: default; }
#cast .fineprint { font-size: 12.5px; color: var(--mute); margin: 0; text-align: center; }

#cast .cast-msg:empty { display: none; }
#cast .cast-msg {
	font-size: 15px; line-height: 1.6; padding: 15px 17px; border-radius: 2px;
}
#cast .cast-msg.ok { background: rgba(124,196,160,.12); border: 1px solid #2c6349; color: #cfe7d9; }
#cast .cast-msg.err { background: rgba(232,136,124,.12); border: 1px solid #7a2f26; color: #f0cbc5; }

@media (max-width: 720px) {
	#cast .cast-what .grid { grid-template-columns: 1fr; }
	#cast .cast-form .row { grid-template-columns: 1fr; }
	#cast .cast-form { padding: 22px 18px; }
	#cast .cast-hero { padding: 48px 0 32px; }
}

@media (prefers-reduced-motion: reduce) {
	#cast * { animation: none !important; transition: none !important; }
}