/* OptivAI utility pages (utilities/*.html) */
.up-hero { padding: calc(var(--space-20) + 48px) 0 var(--space-16); position: relative; overflow: hidden; }
.up-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 20% 0%, rgba(0,212,255,0.10), transparent 55%); pointer-events:none; }
.up-eyebrow { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: var(--space-5); display:flex; align-items:center; gap: var(--space-2); }
.up-eyebrow::before { content:''; width:8px; height:8px; border-radius:50%; background: var(--cyan); }
.up-hero h1 { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; color: var(--white); max-width: 20ch; margin-bottom: var(--space-6); }
.up-hero h1 .accent { color: var(--cyan); }
.up-lede { font-size: var(--text-lg); color: var(--slate-light); max-width: 60ch; line-height: 1.6; margin-bottom: var(--space-8); }
.up-actions { display:flex; flex-wrap:wrap; gap: var(--space-4); align-items:center; }
.up-meta { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--slate); }
.up-section { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); border-top: 1px solid var(--border-light); }
.up-section h2 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--white); margin-bottom: var(--space-6); max-width: 28ch; }
.up-section h3 { font-size: var(--text-base); font-weight: 700; color: var(--white); margin-bottom: var(--space-2); }
.up-section p { color: var(--slate-light); line-height: 1.7; max-width: 70ch; }
.up-section p + p { margin-top: var(--space-4); }
.up-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.up-card { background: var(--navy-mid); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-6); }
.up-card--accent { border-top: 3px solid var(--cyan); }
.up-card p { font-size: var(--text-sm); }
.up-q { display:grid; grid-template-columns: 1fr; gap: var(--space-8); }
.up-q__item { background: var(--navy-mid); border:1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-8); }
.up-q__item h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--white); margin-bottom: var(--space-4); }
.up-q__item h3 span { color: var(--cyan); }
.up-table { width:100%; border-collapse: collapse; margin-top: var(--space-8); font-size: var(--text-sm); }
.up-table th, .up-table td { text-align:left; padding: var(--space-4); border-bottom: 1px solid var(--border-light); vertical-align: top; color: var(--slate-light); }
.up-table th { color: var(--off-white); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.up-table td:first-child { color: var(--white); font-weight: 600; white-space: nowrap; }
.up-table-wrap { overflow-x:auto; }
.up-ratchet { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.up-ratchet div { background: var(--navy-mid); border:1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-5); }
.up-ratchet strong { display:block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--cyan); margin-bottom: var(--space-1); }
.up-ratchet span { font-size: var(--text-sm); color: var(--slate-light); }
.up-landscape li { display:flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-light); color: var(--slate-light); font-size: var(--text-sm); line-height:1.6; }
.up-landscape li time { flex-shrink:0; width: 7.5rem; font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; padding-top: 2px; }
.up-landscape li a { color: var(--cyan); }
.up-proof { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--space-5); }
.up-proof__num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--white); letter-spacing:-0.03em; line-height:1; margin-bottom: var(--space-2); }
.up-proof__label { font-size: var(--text-xs); font-weight:700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-4); }
.up-close { background: var(--navy-mid); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-16)); text-align:center; }
.up-close h2 { margin-inline:auto; }
.up-close p { margin-inline:auto; }
.up-close .up-actions { justify-content:center; margin-top: var(--space-8); }
.up-price { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; color: var(--white); line-height: 1; letter-spacing: -0.04em; }
.up-price small { font-size: var(--text-base); color: var(--slate-light); font-weight: 500; letter-spacing: 0; margin-left: var(--space-2); }
.up-question { font-family: var(--font-display); font-weight: 800; color: var(--white); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 20ch; margin-inline:auto; text-wrap: balance; }
.up-question span { color: var(--cyan); }
.up-statement { font-family: var(--font-display); font-weight: 600; color: var(--slate-light); font-size: var(--text-base); max-width: none; }
.up-statement span { color: var(--cyan); }
.up-faq details { border-bottom: 1px solid var(--border-light); padding: var(--space-4) 0; }
.up-faq summary { cursor:pointer; font-family: var(--font-display); font-weight: 600; color: var(--white); list-style:none; display:flex; justify-content:space-between; gap: var(--space-4); }
.up-faq summary::after { content:'+'; color: var(--cyan); font-weight:700; }
.up-faq details[open] summary::after { content:'\2013'; }
.up-faq details p { margin-top: var(--space-3); font-size: var(--text-sm); }
.nav { background: rgba(10,15,30,0.95); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--border-light); }
@media (max-width: 768px) { .up-hero { padding-top: calc(var(--space-16) + 48px); } .up-landscape li { flex-direction: column; gap: var(--space-1); } }

.up-card--link { display:block; text-decoration:none; color:inherit; transition: border-color .2s, transform .2s; }
.up-card--link:hover { border-color: var(--cyan); transform: translateY(-2px); }
.up-card--link h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.up-card__cta { color: var(--cyan) !important; font-weight: 600; margin-top: var(--space-4); }
@media (max-width: 640px) { .up-table { min-width: 640px; } .up-table-wrap { -webkit-overflow-scrolling: touch; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); } .up-table-wrap::after { content: 'Swipe to see the full table'; display:block; font-size: var(--text-xs); color: var(--slate); margin-top: var(--space-2); } }
@media (max-width: 640px) { .up-price small { display:block; margin-left:0; margin-top: var(--space-2); line-height:1.4; } }