/* Net30 VoIP — coming-soon landing
   Palette sampled from the original Net30 Hosting logo:
   orange #F7941D · gray #666666 · navy #1C2938 */

:root {
	--orange: #f7941d;
	--orange-dark: #d97c06;
	--gray: #666666;
	--navy: #1c2938;
	--ink: #23272b;
	--paper: #ffffff;
	--mist: #f5f6f7;
	--line: #e3e6e9;
	--radius: 14px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	color: var(--ink);
	background: var(--paper);
	line-height: 1.55;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------ hero */

.hero { text-align: center; padding: 54px 20px 6px; }
.hero__logo { width: min(460px, 86vw); height: auto; }
.hero__pill {
	display: inline-block;
	margin: 20px 0 10px;
	padding: 4px 16px;
	border-radius: 999px;
	background: var(--orange);
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.hero__tag { max-width: 640px; margin: 6px auto 0; color: var(--gray); font-size: 1.05rem; }

.rule {
	border: 0;
	height: 4px;
	margin: 30px auto 36px;
	max-width: 1080px;
	background: linear-gradient(90deg, rgba(247,148,29,0) 0%, var(--orange) 12%, var(--orange) 88%, rgba(247,148,29,0) 100%);
	border-radius: 2px;
}

/* ------------------------------------------------ layout */

.layout { max-width: 760px; padding-bottom: 44px; }

/* ------------------------------------------------ graphic slot */

.graphic-slot {
	margin: 0 0 26px;
	border: 1.5px dashed #c9d1d9;
	border-radius: var(--radius);
	background: var(--mist);
	padding: 34px 28px;
	text-align: center;
}
.graphic-slot--filled { border: 1px solid var(--line); background: #fff; padding: 18px; }
.graphic-slot--filled img { max-width: 100%; height: auto; border-radius: 8px; }
.graphic-slot__icon { opacity: 0.9; }
.graphic-slot__caption { display: block; margin-top: 12px; color: var(--gray); }
.graphic-slot__caption strong { display: block; color: var(--navy); font-size: 1.15rem; margin-bottom: 4px; }
.graphic-slot__caption span { font-size: 0.95rem; }

/* ------------------------------------------------ brand card */

.brand-card {
	border: 1px solid var(--line);
	border-top: 5px solid var(--orange);
	border-radius: var(--radius);
	padding: 26px 28px 24px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(28, 41, 56, 0.05);
}
.brand-card__name {
	margin: 0 0 8px;
	font-size: 1.65rem;
	font-weight: 800;
	color: var(--navy);
	letter-spacing: 0.01em;
}
.brand-card__name span { color: var(--orange); }
.brand-card__desc { margin: 0 0 14px; color: #3d434a; }

/* ------------------------------------------------ lead form */

.lead-form__label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 8px; color: var(--navy); }
.lead-form__row { display: flex; gap: 10px; }
.lead-form__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--line);
	border-radius: 9px;
	font-size: 1rem;
}
.lead-form__input:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.lead-form__button {
	flex: 0 0 auto;
	padding: 12px 22px;
	border: 0;
	border-radius: 9px;
	background: var(--orange);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.lead-form__button:hover, .lead-form__button:focus { background: var(--orange-dark); }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-form__note { margin: 9px 0 0; font-size: 0.82rem; color: var(--gray); }
.lead-form__msg { margin: 10px 0 0; font-size: 0.9rem; font-weight: 600; }
.lead-form__msg--ok { color: #1d7a3a; }
.lead-form__msg--err { color: #b3261e; }

/* ------------------------------------------------ footer */

.site-footer { background: var(--navy); color: #c3ccd4; padding: 30px 0 34px; text-align: center; }
.site-footer__icon { opacity: 0.95; }
.site-footer__line { margin: 10px 0 2px; font-size: 0.9rem; }
.site-footer__sub { margin: 0; font-size: 0.82rem; color: #8fa0b0; }

/* ------------------------------------------------ responsive */

@media (max-width: 860px) {
	.hero { padding-top: 38px; }
	.brand-card { padding: 22px 20px; }
	.lead-form__row { flex-direction: column; }
	.lead-form__button { width: 100%; padding: 13px; }
}
.lead-form__msg--typo { color: #8a5a00; }

/* Ladder details form (2026-10-21) */
.layout--single { grid-template-columns: 1fr; max-width: 640px; }
.details-form__label { display: block; font-weight: 600; margin-bottom: 6px; }
.details-form__choice { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.details-form__radios { flex-direction: column; align-items: flex-start; gap: 8px; }
.details-form .lead-form__row { flex-direction: column; align-items: stretch; }

/* ------------------------------------------------ sales layer (Run 24) */

.layout--wide { max-width: 980px; }
.layout--single { max-width: 760px; }

.plans-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-bottom: 26px;
}
.plan-card__family {
	margin: 0 0 4px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange-dark);
}
.plan-card__price { margin: 0 0 12px; font-size: 1.3rem; font-weight: 800; color: var(--navy); }
.plan-card__price--tba { font-size: 1.05rem; color: var(--gray); }
.plan-card__features { margin: 0 0 18px; padding-left: 20px; color: #3d434a; }
.plan-card__features li { margin-bottom: 6px; }
.plan-card__cta { display: inline-block; text-decoration: none; margin-bottom: 8px; }

.details-form .lead-form__row { flex-direction: column; gap: 6px; margin-bottom: 16px; }
.details-form__label { display: block; font-weight: 700; font-size: 0.92rem; color: var(--navy); }
.details-form__choice { display: block; font-weight: 400; margin: 4px 0; }

@media (max-width: 860px) {
	.plans-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ sales layer slice 2 (Run 25) */

.ext-row {
	border-top: 1px solid #e3e6ea;
	padding-top: 14px;
}
.ext-row .details-form__choice { display: inline-block; margin-right: 14px; }
select.lead-form__input { appearance: auto; }
textarea.lead-form__input { min-height: 72px; resize: vertical; }

/* ------------------------------------------------ front mirror (2026-10-25) */

/* Owner-view front page: mirrors the www.net30hosting.com homepage
   layout (photo hero with headline on top, why cards, plan cards,
   search/port widget) in Net30 VoIP dress. Anonymous splash above is
   untouched. */

.page--front { padding-bottom: 52px; }

/* hero: full-bleed image behind the headline, dark shade, like hosting */
.voip-hero {
	position: relative;
	overflow: hidden;
	background: var(--navy);
	color: #fff;
	text-align: center;
	padding: 58px 0 64px;
	margin-bottom: 6px;
}
.voip-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.voip-hero__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 28, 40, 0.58) 0%, rgba(18, 28, 40, 0.82) 100%);
}
.voip-hero__inner { position: relative; }
/* 2026-10-25 herologo removal (owner order): the hero carries no logo
   at all — the header lockup is the page's only logo, matching
   www.net30hosting.com. The .voip-hero__logochip rules are gone. */
.voip-hero .hero__pill { margin-top: 22px; }
/* 2026-10-25 credit-angle pass: the "Now Reporting" strip above the
   headline, mirroring www.net30hosting.com's hero strip. */
.voip-hero__reporting {
	margin: 14px 0 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--orange);
}
.voip-hero__title {
	margin: 10px auto 12px;
	max-width: 840px;
	font-size: clamp(1.9rem, 4.6vw, 3.05rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: 0.005em;
}
.voip-hero__title span { color: var(--orange); }
.voip-hero__sub { max-width: 660px; margin: 0 auto; color: #d9e1e9; font-size: 1.08rem; }
.voip-hero__checks {
	list-style: none;
	margin: 22px auto 2px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	justify-content: center;
	font-weight: 600;
}
.voip-hero__checks .hero-ico { color: var(--orange); font-size: 1.02em; width: 1.25em; text-align: center; margin-right: 8px; }
/* Feature-card icons (icons pass 2026-10-25): Font Awesome 5 solid,
   amber accent, sized to sit above each card heading. */
.feat-grid .card-ico { display: block; color: var(--orange); font-size: 1.7rem; line-height: 1; margin-bottom: 12px; }
.voip-hero__ctas { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.voip-hero__cta { text-decoration: none; padding: 14px 28px; }
.voip-hero__cta2 {
	padding: 13px 26px;
	border-radius: 9px;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.voip-hero__cta2:hover, .voip-hero__cta2:focus { background: rgba(255, 255, 255, 0.12); }
.voip-hero__note { margin: 20px 0 0; font-size: 0.85rem; color: #a7b4c0; }

/* front sections, hosting-style: eyebrow, centered H2, sub, grid */
.front-section { margin-top: 46px; }
.front-eyebrow {
	margin: 0 0 6px;
	text-align: center;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--orange-dark);
}
.front-h2 { margin: 0 0 8px; text-align: center; color: var(--navy); font-size: 1.9rem; font-weight: 800; }
.front-sub { max-width: 640px; margin: 0 auto 26px; text-align: center; color: var(--gray); }
.front-more { text-align: center; margin: 2px 0 0; }
.front-more a { color: var(--orange-dark); font-weight: 700; }

.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-card h3 { margin: 0 0 6px; color: var(--navy); font-size: 1.15rem; font-weight: 800; }
.why-card p { margin: 0; color: #3d434a; }

.plan-card h3.brand-card__name { font-size: 1.65rem; }

/* get your number: two entry cards side by side */
.number-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.number-card h3 { margin: 0 0 6px; color: var(--navy); font-size: 1.3rem; font-weight: 800; }
.number-form { margin-top: 14px; }
.number-form .details-form__label { margin-bottom: 8px; }

.site-footer__powered { margin: 8px 0 0; font-size: 0.82rem; color: #8fa0b0; }
.site-footer__powered a { color: #f5a83d; font-weight: 700; text-decoration: none; }
.site-footer__powered a:hover, .site-footer__powered a:focus { text-decoration: underline; }

@media (max-width: 860px) {
	.voip-hero { padding: 42px 0 48px; }
	.why-grid, .number-grid { grid-template-columns: 1fr; }
	.front-section { margin-top: 36px; }
}

/* ------------------------------------------------ sales layer slice 3: drag-and-drop extensions (2026-10-25) */

/* Wizard step 2 builder. The plain form above stays the no-JS
   fallback; these styles apply only once ext-builder.js has turned
   the rows into cards (form.extb-on). Amber accent #ff9f1c family,
   card chrome matched to the plan cards. */

:root { --amber: #ff9f1c; --amber-soft: #fff3d6; --amber-bg: #fffaf2; }

.extb-hidden { display: none !important; }

.extb__sr {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.extb__hint { margin: 0 0 12px; color: var(--gray); font-size: 0.92rem; }

.extb__bar {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	margin: 2px 0 10px;
}
.extb__bar-label { font-weight: 700; font-size: 0.92rem; color: var(--navy); flex: 1 1 100%; }
.extb-chip {
	border: 1.5px solid var(--amber);
	background: var(--amber-bg);
	color: var(--navy);
	border-radius: 999px;
	padding: 7px 14px;
	font-weight: 700; font-size: 0.9rem;
	cursor: grab; user-select: none; -webkit-user-select: none;
	touch-action: none;
}
.extb-chip:active { cursor: grabbing; }

.extb__slotlabel {
	display: inline-block;
	margin: 6px 0 0;
	padding: 3px 12px;
	border-radius: 999px 999px 0 0;
	background: var(--amber);
	color: #fff;
	font-weight: 800; font-size: 0.78rem;
	letter-spacing: 0.14em; text-transform: uppercase;
}
.extb__slot {
	border: 2px dashed var(--amber);
	border-radius: 0 14px 14px 14px;
	background: var(--amber-bg);
	padding: 10px;
	min-height: 70px;
}
.extb__slot.is-over { background: var(--amber-soft); border-color: var(--orange-dark); }

.extb__list { display: grid; gap: 12px; margin-top: 12px; }
.extb__slot .extb-card { margin: 0; }

.extb-card {
	display: block;
	border: 1px solid var(--line);
	border-top: 5px solid var(--orange);
	border-radius: var(--radius);
	padding: 14px 16px 16px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(28, 41, 56, 0.05);
}
.extb-card--dragging { opacity: 0.45; }
.extb-card.drop-before { box-shadow: 0 -4px 0 0 var(--amber), 0 2px 10px rgba(28, 41, 56, 0.05); }
.extb-card.drop-after { box-shadow: 0 4px 0 0 var(--amber), 0 2px 10px rgba(28, 41, 56, 0.05); }
.extb-card--flash { animation: extbflash 0.6s ease-out; }
@keyframes extbflash { 0% { background: var(--amber-soft); } 100% { background: #fff; } }

.extb-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.extb-card__spacer { flex: 1 1 auto; }
.extb-card__ext {
	font-weight: 800; color: var(--navy);
	background: var(--mist); border-radius: 8px; padding: 3px 10px;
}
.extb-card__first {
	font-size: 0.78rem; font-weight: 700; color: #8a5a00;
	background: var(--amber-soft); border-radius: 999px; padding: 3px 10px;
}
.extb-card__btn {
	border: 1.5px solid var(--line);
	background: #fff; color: var(--navy);
	border-radius: 8px;
	min-width: 34px; height: 34px;
	padding: 0 6px;
	font-size: 1rem; line-height: 1;
	cursor: pointer;
}
.extb-card__btn:hover:not(:disabled), .extb-card__btn:focus-visible { border-color: var(--amber); }
.extb-card__btn:disabled { opacity: 0.35; cursor: default; }
.extb-card__handle { cursor: grab; letter-spacing: 0.1em; touch-action: none; }
.extb-card__handle:active { cursor: grabbing; }
.extb-card__rm { color: #b3261e; font-weight: 700; }

/* Device choices on a card become tappable pills in builder mode. */
.extb-card .details-form__choice.extb-chip-opt {
	display: inline-flex; align-items: center;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: 6px 12px;
	margin: 4px 6px 0 0;
	cursor: pointer;
}
.extb-card .extb-chip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.extb-card .extb-chip-opt.is-on { border-color: var(--amber); background: var(--amber-soft); font-weight: 700; }
.extb-card .extb-chip-opt:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 1px; }

.extb__trash {
	display: none;
	margin-top: 12px;
	border: 2px dashed #d66;
	color: #b3261e;
	border-radius: 12px;
	padding: 12px;
	text-align: center;
	font-weight: 700;
}
.extb--dragging .extb__trash { display: block; }
.extb__trash.is-over { background: #fdeceb; border-color: #b3261e; }

.extb__controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.extb__add { flex: 0 0 auto; }
.extb__add:disabled { opacity: 0.45; cursor: default; }
.extb__note { color: var(--gray); font-size: 0.88rem; }

.extb-ghost {
	position: fixed; z-index: 9999;
	pointer-events: none;
	opacity: 0.94;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	margin: 0;
}

@media (max-width: 860px) {
	.extb-card { padding: 12px 12px 14px; }
	.extb-chip { padding: 9px 14px; }
}

/* ------------------------------------------------ owner fix 2026-10-25: wide wizard console
   Owner review: the builder "seems more like a narrow system" and the
   logo lockup was wrong (logo files swapped separately). Wizard/step
   views (get-started, extensions) move to a system-console width and
   plans widen to match; the front-page editorial column (.layout) and
   the details form (.layout--single base) keep their widths. In the
   builder the device palette gains top-bar presence, the answers-first
   slot spans the top, and person cards go 2-across on wide screens.
   DOM order (ring order), ext-builder.js, storage and handler are
   unchanged - this block is presentation only. */

.layout--wizard { max-width: 1180px; }
.layout--wide { max-width: 1180px; }

@media (min-width: 1024px) {
	.extb__bar {
		border: 1px solid var(--line);
		border-top: 5px solid var(--orange);
		border-radius: var(--radius);
		background: #fff;
		padding: 14px 16px;
		box-shadow: 0 2px 10px rgba(28, 41, 56, 0.05);
		margin: 6px 0 18px;
	}
	.extb__bar-label { flex: 0 0 auto; margin-right: 6px; }
	.extb-chip { padding: 9px 18px; font-size: 0.95rem; }
	.extb__slot { padding: 12px; }
	.extb__list { grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (max-width: 760px) {
	.extb__list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ sales page rebuild (2026-10-25)
   Owner review: the front page read like onboarding, not a sales page.
   New components: hero port/new paths (existing classes), features
   grid, plan comparison pricing table, social-proof note, FAQ,
   glossary page + teaser chips. Palette and card chrome unchanged. */

/* hero note links stay readable over the hero shade */
.voip-hero__note a { color: #f5a83d; font-weight: 700; }

/* features grid reuses the why-grid rhythm */
.feat-grid { margin-top: 2px; }
.feat-grid .why-card p a, .front-sub a { color: var(--orange-dark); font-weight: 600; }

/* pricing comparison table */
.price-table-wrap { overflow-x: auto; margin: 4px 0 18px; }
.price-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line);
	border-top: 5px solid var(--orange);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 2px 14px rgba(28, 41, 56, 0.05);
	overflow: hidden;
}
.pt-caption {
	caption-side: top;
	text-align: center;
	font-weight: 800;
	color: var(--navy);
	font-size: 1.1rem;
	padding: 0 0 12px;
}
.price-table th, .price-table td {
	padding: 13px 16px;
	text-align: left;
	border-top: 1px solid var(--line);
	vertical-align: top;
}
.price-table thead th {
	border-top: 0;
	background: var(--mist);
	color: var(--navy);
	font-size: 1.02rem;
}
.price-table tbody th { font-weight: 700; color: var(--navy); width: 34%; }
.price-table tbody td { color: #3d434a; width: 33%; }
.pt-yes { color: #1d7a3a; font-weight: 800; }
.pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* social proof: reserved-testimonial honesty note */
.proof-note {
	margin: 20px auto 0;
	max-width: 720px;
	text-align: center;
	color: var(--gray);
	font-size: 0.95rem;
	font-style: italic;
}

/* FAQ */
.faq-list { display: grid; gap: 16px; }
.faq-item h3 { margin: 0 0 6px; color: var(--navy); font-size: 1.12rem; font-weight: 800; }
.faq-item p { margin: 0; color: #3d434a; }
.faq-betterdocs { max-width: 860px; margin: 0 auto; text-align: left; }

/* glossary */
.gloss { max-width: 860px; padding-bottom: 48px; }
.gloss-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.gloss-nav__chip {
	display: inline-block;
	padding: 6px 14px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	color: var(--navy);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	background: #fff;
}
.gloss-nav__chip:hover, .gloss-nav__chip:focus { border-color: var(--orange); color: var(--orange-dark); }
.gloss-list { margin: 0; }
.gloss-entry {
	border: 1px solid var(--line);
	border-top: 5px solid var(--orange);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: 0 2px 10px rgba(28, 41, 56, 0.05);
	padding: 18px 22px;
	margin-bottom: 14px;
	scroll-margin-top: 24px;
}
.gloss-term { margin: 0 0 5px; color: var(--navy); font-size: 1.18rem; font-weight: 800; }
.gloss-def { margin: 0; color: #3d434a; }
.gloss-cta { margin-top: 26px; text-align: center; }
.gloss-cta .plan-card__cta { margin: 4px 6px 8px; }
.gloss-nav--teaser { margin-bottom: 6px; }

@media (max-width: 860px) {
	.price-table tbody th { width: 40%; }
	.price-table th, .price-table td { padding: 11px 12px; font-size: 0.95rem; }
	.gloss-entry { padding: 15px 16px; }
}

/* BetterDocs renders an empty section title when faq_heading is blank (the theme supplies its own H2) — hide the empty shell. */
.faq-betterdocs .betterdocs-faq-section-title:empty { display: none; }

/* ------------------------------------------------ splash redesign (2026-10-25) */

/* Owner direction (2026-10-25 21:30 + 21:33 MDT): the anonymous
   splash drops the site header entirely (header.php honours
   $GLOBALS['net30_splash']), opens with one big logo over the copy
   card + notify form, and carries COMING SOON as a page curl in the
   top-right corner. The column is deliberately wide — the old
   .layout cap of 760px read as a narrow strip on tablets, and the
   inherited header row is what pushed the page wider than an iPad
   viewport (its nowrap flex row has ~25px of shrink headroom at
   820px). Nothing below may create horizontal overflow; the body
   clip is a splash-scoped belt over that structural fix. */

body.net30-splash { overflow-x: clip; }

.page--splash {
	--curl: clamp(124px, 32vw, 190px);
	padding-top: calc(var(--curl) * 0.55 + 16px);
	padding-bottom: 8px;
}

.splash-layout { max-width: 1060px; }

.splash__logo {
	display: block;
	width: min(400px, 70vw);
	height: auto;
	margin: 0 auto 30px;
}

.splash-card { padding: 34px 38px 30px; }
@media (max-width: 860px) {
	.splash-card { padding: 24px 20px; }
}

/* Page curl (dog-ear), CSS only: the corner triangle is clipped
   over its own drop shadow, so a soft crease shadow falls on the
   page like a real lifted corner, and the label rides the flap
   parallel to the crease. Fixed to the viewport corner, inert to
   clicks, and clear of the logo and card at every width by the
   main padding above. */
.splash-curl {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 60;
	width: var(--curl);
	height: var(--curl);
	overflow: hidden;
	pointer-events: none;
}
.splash-curl::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(225deg, #ffab2e 0%, #f08f04 52%, #cf7503 100%);
	clip-path: polygon(20% 0, 100% 0, 100% 80%);
	filter: drop-shadow(-5px 6px 6px rgba(28, 41, 56, 0.38));
}
.splash-curl__text {
	position: absolute;
	left: 70%;
	top: 29%;
	transform: translate(-50%, -50%) rotate(45deg);
	font-weight: 800;
	font-size: clamp(10px, calc(var(--curl) * 0.076), 15px);
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: #fff;
	text-shadow: 0 1px 2px rgba(122, 62, 0, 0.4);
}

/* --------------------------------------- double opt-in (2026-10-25)
   Consent checkbox + submit row for the launch lead form. The box
   is required client-side (lead-form.js) and server-side
   (net30_handle_lead); an unchecked submit never becomes a lead.
   Appended only — no existing rules edited. */
.lead-form__consent { margin: 10px 0 0; }
.lead-form__consent-label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy);
	cursor: pointer;
}
.lead-form__consent-box {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 1px 0 0;
	accent-color: var(--orange-dark);
	cursor: pointer;
}
.lead-form__row--submit { margin-top: 12px; }
.lead-form__msg--consent { margin-top: 10px; }
@media (max-width: 860px) {
	.lead-form__row--submit .lead-form__button { width: 100%; padding: 13px; }
}

/* --------------------------------------- splash features + Muse invite (2026-10-25)
   Owner direction (2026-10-25 22:27 + 22:28 MDT): under the notify
   card, the splash carries a features card (what the system
   includes, platform-true) and a Muse invite strip. These classes
   render only in the splash branch of inc/views/front.php, so the
   gate-passed page is untouched. Appended only — no existing rules
   edited. */
.splash-feats { margin-top: 26px; padding: 30px 38px 26px; }
.splash-feats__title { margin: 0 0 8px; color: var(--navy); font-size: 1.55rem; font-weight: 800; text-align: center; }
.splash-feats__sub { margin: 0 auto 24px; max-width: 640px; text-align: center; color: #3d434a; }
.splash-feats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 30px; }
.splash-feat { display: flex; gap: 13px; align-items: flex-start; }
.splash-feat__ico { flex: 0 0 auto; width: 30px; text-align: center; color: var(--orange); font-size: 1.45rem; line-height: 1.25; }
.splash-feat__body h3 { margin: 0 0 3px; color: var(--navy); font-size: 1.02rem; font-weight: 800; }
.splash-feat__body p { margin: 0; color: #3d434a; font-size: 0.94rem; line-height: 1.45; }

.splash-invite { margin-top: 26px; background: var(--navy); border-radius: var(--radius); padding: 30px 38px 28px; text-align: center; }
.splash-invite__kicker { margin: 0 0 8px; color: var(--orange); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.splash-invite__copy { margin: 0 auto 14px; max-width: 560px; color: #fff; font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.splash-invite__code { margin: 0 0 18px; padding-left: 0.22em; color: var(--orange); font-size: 2.3rem; font-weight: 800; letter-spacing: 0.22em; }
.splash-invite__act { margin: 0 0 12px; }
.splash-invite__cta { display: inline-block; text-decoration: none; }
.splash-invite__note { margin: 0; color: #c8d2dc; font-size: 0.9rem; }
@media (max-width: 860px) {
	.splash-feats { padding: 24px 20px 20px; }
	.splash-feats__grid { grid-template-columns: 1fr; }
	.splash-invite { padding: 24px 20px 22px; }
	.splash-invite__code { font-size: 1.9rem; }
}

/* ---------------------------------- splash starting-at price line (2026-10-25)
   Owner approved (2026-10-25 23:15 MDT) putting the floor price on
   the splash: one emphasized line inside the copy card, directly
   under the two pitch paragraphs and above the notify form. It is
   the only price shown on the anonymous page. Splash-branch markup
   only (inc/views/front.php); the gate-passed page never renders
   this class. */
.splash-card__price { margin: 0 0 16px; color: var(--navy); font-size: 1.12rem; font-weight: 700; line-height: 1.5; }