/* ==========================================================================
   CurvEngine — page-only additions.
   Theme colour, buttons and image frames live in styles.css (sections 26–27)
   so CurvEngine uses the same system as the other product pages.
   ========================================================================== */

/* Wordmark: shown once, on pure black, at its own 3:1 proportions. */
.ce-wordmark-plate {
	margin: 0;
	width: 100%;
	max-width: 420px;
	background: #000;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.ce-wordmark-plate img {
	display: block;
	width: 100%;
	height: auto;
}

/* Three-step workflow uses the shared feature grid. */
.features--3 {
	list-style: none;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 48px;
}

/* Workspace views: shared small buttons, accent on the selected tab. */
.ce-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.ce-tabs .btn[aria-selected="true"] {
	color: var(--accent);
	border-color: rgba(199, 255, 61, 0.5);
	background: var(--accent-dim);
}

.ce-tabs .btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.ce-panel[hidden] {
	display: none;
}

.ce-panel .body {
	margin-top: 20px;
}

/* Pricing details that sit inside the shared plan cards. */
.plan .plan__note {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--faint);
}

.plan__price s {
	color: var(--faint);
}

.pricing-note a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Closing section: app mark beside the contact line. */
.ce-mark {
	width: 72px;
	height: 72px;
	display: block;
}

.ce-support-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	margin-top: 28px;
}

/* Legal pages */
.ce-legal { max-width: 900px; padding-top: 135px; padding-bottom: 100px; }
.ce-legal h1 { font-size: clamp(38px, 5vw, 60px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; margin: 25px 0; }
.ce-legal h2 { margin: 38px 0 13px; font-size: 21px; font-weight: 550; }
.ce-legal p { color: #b7b7bc; line-height: 1.9; font-size: 15px; margin: 15px 0; overflow-wrap: anywhere; }
.ce-legal .mono { font-size: 11px; }

@media (max-width: 900px) {
	.features--3 { grid-template-columns: minmax(0, 1fr); }
	.curvengine-page .nav__panel { background: #08080a; }
}

@media (max-width: 760px) {
	.ce-tabs .btn { flex: 1; }
	.ce-legal { padding-top: 110px; }
}

/* Keep the product identity together, with both hero columns aligned. */
.curvengine-hero .hero__grid { align-items:start; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); }
.ce-hero-heading .ce-wordmark-plate { margin-bottom:28px; }
.curvengine-hero .ce-headline { font-size:clamp(44px,5.4vw,72px); line-height:1.04; letter-spacing:-.035em; font-weight:600; margin:22px 0 0; }
.curvengine-hero .hero__aside { padding-top:4px; }
.curvengine-hero .hero__aside .eyebrow { margin:0; line-height:1.8; }
@media(max-width:900px) { .curvengine-hero .hero__grid { grid-template-columns:minmax(0,1fr); gap:36px; } }
@media(max-width:600px) { .curvengine-hero .ce-headline { font-size:clamp(38px,10.5vw,56px); } }

.ce-home-feature { --accent:#c7ff3d; --accent-dim:rgba(199,255,61,.1); }

/* Product name leads; the promise follows as a quieter tagline. */
.curvengine-hero .ce-product-name { font-size:clamp(44px,5.7vw,76px); line-height:1.04; }
.ce-product-tagline { margin:20px 0 0; font-size:clamp(22px,2.5vw,32px); line-height:1.3; letter-spacing:-.025em; color:var(--muted); }
@media(max-width:600px) { .curvengine-hero .ce-product-name { font-size:clamp(36px,10.5vw,56px); } .ce-product-tagline { margin-top:16px; font-size:24px; } }

/* Scene showcase: varied proportions, shared frames and restrained accents. */
.ce-examples { background:linear-gradient(155deg,rgba(199,255,61,.025),transparent 55%); }
.ce-examples-intro { max-width:760px; }
.ce-example-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:40px; align-items:start; margin-top:48px; }
.ce-example-card { margin:0; min-width:0; }
.ce-example-card--offset { margin-top:96px; }
.ce-example-top,.ce-example-key { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:10px; letter-spacing:.06em; }
.ce-example-top { padding:16px 0; border-top:1px solid var(--line); }
.ce-example-accent { color:var(--accent); }
.ce-example-image { border:1px solid var(--line); background:#101012; border-radius:8px; overflow:hidden; }
.ce-example-image img { display:block; width:100%; height:auto; }
.ce-example-key { padding:15px 0; border-bottom:1px solid var(--line); color:var(--faint); }
.ce-example-key span:last-child { color:var(--accent); }
.ce-example-card figcaption { padding-top:24px; }
.ce-example-card h3 { margin:0 0 12px; font-size:clamp(24px,2.5vw,32px); font-weight:500; line-height:1.2; letter-spacing:-.025em; }
.ce-example-card figcaption p { color:var(--muted); font-size:15px; line-height:1.75; max-width:480px; }
.ce-examples-close { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
@media(max-width:760px) { .ce-example-grid { grid-template-columns:minmax(0,1fr); gap:40px; margin-top:32px; } .ce-example-card--offset { margin-top:0; } .ce-example-card figcaption { padding-top:20px; } }
