/* ================================================================
   Rustify landing page (toddyi.php)
   ================================================================ */

.box:has(.toddyi-page) {
    max-width: var(--toddyi-size-1080px);
    padding-top: 0;
}

.toddyi-page {
    display: flex;
    flex-direction: column;
    gap: var(--toddyi-size-56px);
}

/* --- Hero --- */
.toddyi-hero {
    border-radius: calc(var(--radius) + var(--toddyi-size-6px));
    overflow: hidden;
    background: var(--toddyi-gradient-header);
    box-shadow: var(--shadow-lg);
    border: var(--toddyi-size-1px) solid color-mix(in srgb, var(--toddyi-primary-dark) var(--toddyi-size-20pct), transparent);
}

.toddyi-hero__inner {
    display: grid;
    /* The screenshot carries the hero, so it takes the wider column. At the old
       1.15/0.85 it rendered around 385px from a 1440px capture — a 27% scale,
       which is a thumbnail, not a screenshot. (#271) */
    grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
    gap: var(--toddyi-size-32px);
    align-items: center;
    padding: clamp(var(--toddyi-size-28px), var(--toddyi-size-4vw), var(--toddyi-size-44px)) clamp(var(--toddyi-size-24px), var(--toddyi-size-4vw), var(--toddyi-size-40px));
    min-height: clamp(var(--toddyi-size-280px), var(--toddyi-size-36vw), var(--toddyi-size-360px));
}

.toddyi-hero__copy {
    position: relative;
    z-index: 1;
}

.toddyi-hero__eyebrow {
    margin: 0 0 var(--toddyi-size-12px);
    font-size: var(--toddyi-size-0-75rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-on-dark) 72%, transparent);
}

.toddyi-hero__title {
    margin: 0 0 var(--toddyi-size-14px);
    font-size: clamp(var(--toddyi-size-2rem), var(--toddyi-size-4-8vw), var(--toddyi-size-2-75rem));
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.12;
    color: var(--text-on-dark);
}

.toddyi-hero__lead {
    margin: 0;
    max-width: var(--toddyi-size-36rem);
    font-size: clamp(var(--toddyi-size-0-94rem), var(--toddyi-size-1-6vw), var(--toddyi-size-1-02rem));
    line-height: 1.8;
    color: color-mix(in srgb, var(--text-on-dark) 86%, transparent);
}

.toddyi-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--toddyi-size-12px);
    margin-top: var(--toddyi-size-28px);
}

.toddyi-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius) + var(--toddyi-size-2px));
    overflow: hidden;
    border: var(--toddyi-size-1px) solid color-mix(in srgb, var(--text-on-dark) 18%, transparent);
    box-shadow: 0 var(--toddyi-size-24px) var(--toddyi-size-48px) var(--toddyi-app-shadow);
}

/* The screenshot fills its frame. Its own width and height attributes keep the
   aspect ratio reserved before it loads, so the hero does not jump. (#271) */
.toddyi-hero__shot {
    display: block;
    inline-size: var(--toddyi-size-100pct);
    block-size: auto;
}

/* --- Buttons --- */
.toddyi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--toddyi-size-8px);
    padding: var(--toddyi-size-13px) var(--toddyi-size-24px);
    border-radius: var(--toddyi-size-12px);
    font-weight: 700;
    font-size: var(--toddyi-size-0-92rem);
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.toddyi-btn--primary {
    background: var(--text-on-dark);
    color: var(--primary);
    box-shadow: 0 var(--toddyi-size-8px) var(--toddyi-size-24px) var(--toddyi-logo-shadow);
}

.toddyi-btn--primary:hover {
    transform: translateY(var(--toddyi-size-neg-2px));
    box-shadow: 0 var(--toddyi-size-12px) var(--toddyi-size-28px) var(--toddyi-app-shadow-soft);
}

.toddyi-btn__arrow {
    font-size: var(--toddyi-size-0-85em);
    opacity: 0.85;
}

/* --- Sections --- */
.toddyi-section__head {
    margin-bottom: var(--toddyi-size-22px);
}

.toddyi-section__title {
    margin: 0;
    font-size: var(--toddyi-size-1-25rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.02em;
}

.toddyi-panel__subtitle {
    margin: 0 0 var(--toddyi-size-14px);
    font-size: var(--toddyi-size-0-95rem);
    font-weight: 800;
    color: var(--primary);
}

/* --- Feature grid --- */
.toddyi-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--toddyi-size-14px);
}

.toddyi-feature-card {
    background: var(--surface);
    border: var(--toddyi-size-1px) solid var(--border);
    border-radius: var(--radius);
    padding: var(--toddyi-size-20px) var(--toddyi-size-18px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    animation: toddyi-fade-up 0.45s ease both;
    animation-delay: var(--delay, 0s);
}

@keyframes toddyi-fade-up {
    from {
        opacity: 0;
        transform: translateY(var(--toddyi-size-10px));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toddyi-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--toddyi-secondary) 40%, var(--border));
}

.toddyi-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toddyi-size-40px);
    height: var(--toddyi-size-40px);
    border-radius: var(--toddyi-size-10px);
    font-size: var(--toddyi-size-1-2rem);
    background: var(--accent-light);
    margin-bottom: var(--toddyi-size-12px);
}

.toddyi-feature-card__title {
    margin: 0 0 var(--toddyi-size-6px);
    font-size: var(--toddyi-size-0-98rem);
    font-weight: 800;
    color: var(--text);
}

.toddyi-feature-card__desc {
    margin: 0;
    font-size: var(--toddyi-size-0-84rem);
    line-height: 1.65;
    color: var(--text-muted);
}