/**** home.css - Mojo ID home page (loads after styles.css) ****/
@layer components {
    /**** Section ****/
    .section { padding: 48px 0 }
    .section > .container{ max-width: 1170px }
    .section.muted { background: var(--box-muted) }
    .section.hero { padding-top: 24px }
    .section .row { --gap: 16px }
    .section .row > [class*="col-"] { margin-bottom: 0 }
    .section .row > [class*="col-"] > .box { height: 100% }
    .section.hero .row { row-gap: 40px }
    .section > .container > .header { max-width: 620px; margin-bottom: 32px }
    .section h1 { margin: 16px 0 14px; font-size: clamp(26px, 4vw, 36px); line-height: 1.4 }
    .section h2 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 26px); line-height: 1.4 }
    .section .lead { margin: 0 0 20px; font-size: 15px; line-height: 1.9; text-wrap: pretty }
    .section.hero .lead { max-width: 520px; margin-bottom: 28px; font-size: 16px }
    .section .buttons { display: flex; flex-wrap: wrap; gap: 10px }
    /**** Preview ****/
    figure.preview { margin: 0; box-shadow: var(--shadow-md) }
    .preview .user { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
    .preview .user .body { display: flex; flex-direction: column; flex: 1; min-width: 140px }
    .preview .icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--box-selected); color: var(--primary) }
    .preview hr { margin: 0; border: 0; border-top: 1px solid var(--border-soft) }
    .preview dd { font-size: 20px }
    .preview .footer { --text: var(--desc); gap: 16px; font-size: 13px }
    /**** Feature ****/
    .feature { gap: 14px; padding: 24px }
    .feature .icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--box-tint); color: var(--primary) }
    .feature h3 { margin: 0; font-size: 18px }
    .feature .tap { margin-top: auto; font-size: 13px }
    /**** Checks ****/
    .checks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px }
    .checks li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.7 }
    .checks svg { flex: none; margin-top: 4px; color: var(--done-fg) }
    /**** Quote ****/
    .quote { justify-content: space-between; gap: 20px; margin: 0; padding: 24px }
    .quote blockquote { margin: 0 }
    .quote blockquote p { margin: 0; font-size: 15px; line-height: 1.9 }
    .quote figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px }
    /**** Call to action ****/
    .cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vw, 48px); border-radius: var(--radius-lg); background: var(--primary) }
    .cta h2, .cta p { color: var(--white) }
    .cta p { margin: 0; font-size: 15px; line-height: 1.9 }
    .cta .btn { --btn-bg: var(--box-bg); --btn-bd: var(--box-bg); --btn-c: light-dark(var(--primary), var(--heading)); --btn-hc: var(--btn-c) }
    .cta :focus-visible { outline-color: var(--white) }
    }
@layer layout {
    @media (min-width: 768px) {
        .section { padding: 72px 0 }
        .section.hero { padding-top: 48px }
    }
}