/* ==========================================================================
   UI audit v2 fixes – 2026-10-15
   Loaded last on every page (after main.css and pages.css).
   Each block names the finding ID from Inceptory-UI-Audit-2026-10-15.pdf.
   ========================================================================== */

.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   H3 / M9 / M15 – one type scale for every page
   H1 64→36px · H2 43→28px · H3 (card title) 22→20px
   -------------------------------------------------------------------------- */
.hero .hero-title,
.page-hero .hero-title { font-size: clamp(2.25rem, 4.1vw, 3.3rem); line-height: 1.15; }
.hero .hero-title { font-size: clamp(2.25rem, 3.7vw, 3rem); max-width: 700px; }

main h2,
main .section-title,
.cta-section h2,
#engineers-title { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.2; }

main h3,
main h3.h4,
main .card-glass h3,
main .ainative-grid .card-glass h3,
main .compare-card h3,
main .work-grid h3 { font-size: clamp(1.25rem, 1.5vw, 1.375rem); line-height: 1.3; }

/* keep the small labelled headings inside definition cards */
main .definition-card h2,
main .definition-card h3 { font-size: 1.1rem; }

/* L5 – no single-word last lines */
h1, h2, h3, .lead-statement, .section-description, .hero-description { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   M2 – three button sizes (40 / 48 / 56px), same font everywhere
   -------------------------------------------------------------------------- */
.btn { min-height: 48px; padding: 10px 24px; font-size: 16px; line-height: 1.25; border: 2px solid transparent; border-radius: var(--radius-md); }
.btn-lg { min-height: 56px; padding: 12px 32px; font-size: 17px; }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.hero-actions .btn, .cta-section .btn { font-size: 17px; }
@media (max-width: 480px) {
    .btn-lg, .hero-actions .btn { padding-left: 20px; padding-right: 20px; font-size: 16px; }
}

/* --------------------------------------------------------------------------
   M3 – one secondary (outline) button style: white text, orange border
   -------------------------------------------------------------------------- */
.btn-outline,
.btn-outline-light,
.hero .btn-outline { background: rgba(10, 10, 10, 0.35); border-color: var(--primary); color: var(--light); }
.btn-outline:hover,
.btn-outline-light:hover,
.hero .btn-outline:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cta-section .btn-outline,
.cta-section a.btn-outline-light { background: transparent; border-color: var(--on-primary); color: var(--on-primary); }
.cta-section .btn-outline:hover,
.cta-section a.btn-outline-light:hover { background: var(--on-primary); color: var(--light); }

/* --------------------------------------------------------------------------
   H1 / M12 – page hero (now used on every inner page)
   -------------------------------------------------------------------------- */
.page-hero { min-height: 0; }
.page-hero .hero-description { margin-left: 0; margin-right: 0; }
.page-hero-compact { padding-bottom: var(--space-xl); }
.page-hero-compact .hero-description { margin-bottom: 0; color: var(--light-muted); font-size: 1rem; }

/* --------------------------------------------------------------------------
   H5 – home hero: balanced vertically, readable copy on tablet
   -------------------------------------------------------------------------- */
/* pages.css gives every section 72px padding; full-height heroes centre below the fixed header instead */
main > section.hero:not(.page-hero) { padding: var(--header-height) 0 0; }
@media (max-width: 1023px) {
    .hero .hero-bg::after { background: linear-gradient(180deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.78) 60%, rgba(10, 10, 10, 0.6) 100%); }
}

/* --------------------------------------------------------------------------
   M1 – logo (transparent, light wordmark) – sized by the HTML attributes
   -------------------------------------------------------------------------- */
.logo-image { display: block; }

/* --------------------------------------------------------------------------
   H2 – Leadership: founder portrait stays beside the bio
   -------------------------------------------------------------------------- */
.grid:has(> .founder-photo) { align-items: start; }
.founder-photo img { display: block; height: auto; width: min(100%, 480px); aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--shadow); }
@media (min-width: 992px) {
    .founder-photo { position: sticky; top: calc(var(--header-height) + 24px); }
}
@media (max-width: 991px) {
    .founder-photo img { max-width: 420px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   M4 / M5 – home SDLC diagram: bracket meets pillar centres; pillars are links
   -------------------------------------------------------------------------- */
.oversight::before { left: calc((100% - 2 * var(--space-sm)) / 6); right: calc((100% - 2 * var(--space-sm)) / 6); }
.oversight::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 12px; margin-left: -1px; background: rgba(255, 107, 53, 0.45); }
.oversight a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 64px; padding: var(--space-sm) var(--space-md); text-align: center; border-radius: var(--radius-md); background: rgba(255, 107, 53, 0.08); border: 1px solid rgba(255, 107, 53, 0.3); color: var(--light); font-weight: var(--font-weight-semibold); text-decoration: none; transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base); }
.oversight a::after { content: '\2192'; color: var(--primary); transition: transform var(--transition-base); }
.oversight a:hover { transform: translateY(-4px); border-color: rgba(255, 107, 53, 0.7); background: rgba(255, 107, 53, 0.14); box-shadow: var(--shadow); color: var(--primary); }
.oversight a:hover::after { transform: translateX(3px); }
@media (max-width: 767px) { .oversight::after { display: none; } }

/* --------------------------------------------------------------------------
   M6 / L1 – definition cards: equal inner spacing, straight accent bar
   -------------------------------------------------------------------------- */
.definition-card > :first-child { margin-top: 0; }
.definition-card > :last-child { margin-bottom: 0; }
.definition-card { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

/* --------------------------------------------------------------------------
   M7 – Engineering Work cards: rows line up across the three cards
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .work-card .compare-tag { display: block; min-height: 2lh; }
    .work-card .compare-tag + p { min-height: 5lh; }
}

/* --------------------------------------------------------------------------
   M8 – "Why Inceptory": full container width, exact column maths
   -------------------------------------------------------------------------- */
.why-grid > div { flex: 0 1 calc((100% - 2 * var(--space-lg)) / 3); }
@media (min-width: 640px) and (max-width: 1023px) {
    .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
    .why-grid > div { min-width: 0; }
    .why-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   M10 – one list style everywhere (orange square, hanging indent)
   -------------------------------------------------------------------------- */
main .check-list { list-style: none; padding: 0; }
main .check-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.55rem; }
main .check-list li:last-child { margin-bottom: 0; }
main .card-glass .check-list li { font-size: 0.95em; }
main .grid > div > .check-list li, main section .check-list li { color: var(--light-muted); }
main .check-list li strong { color: var(--light); }

/* --------------------------------------------------------------------------
   M11 – social icons visible on the footer background
   -------------------------------------------------------------------------- */
.social-icon,
.footer-social a { background: #262626; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--light); }
.social-icon:hover,
.footer-social a:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* --------------------------------------------------------------------------
   M14 – dark, consistent checkboxes on forms
   -------------------------------------------------------------------------- */
main input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 0.15em 0 0; border: 1.5px solid #5c5c5c; border-radius: 4px; background: #141414; display: inline-grid; place-content: center; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }
main input[type="checkbox"]::before { content: ''; width: 10px; height: 10px; transform: scale(0); transition: transform var(--transition-fast); background: var(--on-primary); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
main input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
main input[type="checkbox"]:checked::before { transform: scale(1); }
main input[type="checkbox"]:hover { border-color: var(--primary); }
main label:has(> input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 10px; }

/* --------------------------------------------------------------------------
   M16 – long CTA labels: keep one line where it fits
   -------------------------------------------------------------------------- */
@media (max-width: 480px) { .price-note .btn { font-size: 15px; padding-left: 16px; padding-right: 16px; } }

/* --------------------------------------------------------------------------
   L2 – capabilities wide card: icon aligned with the title
   -------------------------------------------------------------------------- */
.cap-wide { align-items: start; }

/* --------------------------------------------------------------------------
   L3 – no lone card on the last row
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    main .ainative-grid .card-glass:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
.svc-links li:last-child a { border-color: transparent; background: transparent; color: var(--primary); }

/* --------------------------------------------------------------------------
   L6 – FAQ "+" centred on the question
   -------------------------------------------------------------------------- */
.faq summary { align-items: center; }

/* --------------------------------------------------------------------------
   L7 – consistent reading width
   -------------------------------------------------------------------------- */
main p.section-description { max-width: 70ch; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   L10 – mobile footer: left aligned, links in two columns
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    .footer-column { text-align: left; }
    .footer-column .logo { justify-content: flex-start; margin-left: 0; }
    .footer-social { justify-content: flex-start; }
    .footer-grid .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 0; justify-content: stretch; }
    .footer-grid .footer-links li a { display: block; padding: 0.5rem 0; }
    .footer-bottom { text-align: center; }
}

/* --------------------------------------------------------------------------
   L11 – process step numbers
   -------------------------------------------------------------------------- */
main div[style*="border-radius: 50%"][style*="var(--gradient)"] { font-weight: 700; }

/* --------------------------------------------------------------------------
   L12 – Terms: calm legal typography in a reading column
   -------------------------------------------------------------------------- */
.terms-body { max-width: 820px; margin: 0; }
main .terms-body h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-bottom: var(--space-sm); }
.terms-body .card-glass { padding: var(--space-lg); }
.terms-list { list-style: disc; margin: 0 0 var(--space-sm) 1.25rem; padding: 0; color: var(--light-muted); }
.terms-list li { margin-bottom: 0.35rem; }

/* H3 – status pages (thank-you) use the same H1 size as every other page */
main .hero h1.gradient-text:not([style]) { font-size: clamp(2.25rem, 4.1vw, 3.3rem); }

/* M10 follow-up: lists keep their spacing utility and never touch the buttons below */
main .check-list.mb-lg { margin-bottom: var(--space-lg); }
main .check-list.mb-md { margin-bottom: var(--space-md); }
main .check-list + div:has(> .btn) { margin-top: var(--space-lg); }

/* H2 follow-up: on tablet the founder photo stacks above the bio instead of two cramped columns */
@media (max-width: 991px) {
    .grid:has(> .founder-photo) { grid-template-columns: 1fr; }
    .founder-photo img { width: min(100%, 360px); margin: 0; }
}