/* ================================================================
   Toddyi landing page (public/landing/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 {
    position: relative;
    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);
}

/* A 135deg gradient across a 1024px slab moves too little to be seen: the
   hero read as one flat brown rectangle with a screenshot pasted on it, and
   the caramel the rest of the site is made of only showed in the margins
   beside it. The same two radial washes the site header already uses put the
   warmth back inside the hero, where the identity belongs. (#358) */
.toddyi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 70% at 72% 12%, color-mix(in srgb, var(--toddyi-secondary) 42%, transparent), transparent 62%),
        radial-gradient(circle at 6% 94%, color-mix(in srgb, var(--toddyi-primary-light) 45%, transparent), transparent 48%);
    pointer-events: none;
}

.toddyi-hero__inner {
    /* Above the wash, which is the hero's first child. */
    position: relative;
    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;
}

/* The otter rides the eyebrow. He was the favicon of this site and the mark in
   the application's sidebar, and the one place he never appeared was the first
   screen of the page that exists to introduce the product. He carries no
   information the sentence beside him does not — the portrait further down the
   page is the one that describes him — so he is decorative here and hidden
   from assistive technology. (#358, #329) */
.toddyi-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--toddyi-size-10px);
    margin: 0 0 var(--toddyi-size-14px);
    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) 78%, transparent);
}

.toddyi-hero__mark {
    flex: none;
    inline-size: var(--toddyi-size-40px);
    block-size: var(--toddyi-size-40px);
    border-radius: var(--toddyi-size-999px);
    background: color-mix(in srgb, var(--text-on-dark) 18%, transparent);
    border: var(--toddyi-size-1px) solid color-mix(in srgb, var(--text-on-dark) 35%, transparent);
    object-fit: cover;
}

/* Uppercase with 0.12em of tracking is the widest this line ever gets, and
   German writes it "Plattform für Produktivität und Ziele". It wraps instead
   of pushing the hero open. */
.toddyi-hero__eyebrow-text { min-inline-size: 0; }

.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);
    overflow-wrap: anywhere;
}

.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);
}

/* Every section on this page opened with the same 1.25rem brown line, so the
   page read as one long column of cards with words in it. The accent bar is
   the one the content pages already use (`.desc h2::before`); borrowing it
   here is what makes a section look like the start of something. (#358) */
.toddyi-section__title {
    display: flex;
    align-items: center;
    gap: var(--toddyi-size-10px);
    margin: 0;
    font-size: var(--toddyi-size-1-35rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.02em;
}

.toddyi-section__title::before {
    content: '';
    flex: none;
    inline-size: var(--toddyi-size-4px);
    block-size: var(--toddyi-size-20px);
    border-radius: var(--toddyi-size-99px);
    background: var(--toddyi-gradient-primary);
}

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

/* Platforms sit on the page ground, features on a tinted band, the overview
   on a white panel. Before this the three sections were the same cream cards
   on the same cream page from the hero to the footer, and nothing told a
   reader they had moved from one subject to the next. (#358) */
.toddyi-features {
    padding: clamp(var(--toddyi-size-22px), var(--toddyi-size-3vw), var(--toddyi-size-32px));
    border-radius: calc(var(--radius) + var(--toddyi-size-2px));
    background: color-mix(in srgb, var(--accent-light) 62%, transparent);
    border: var(--toddyi-size-1px) solid color-mix(in srgb, var(--border) var(--toddyi-size-50pct), transparent);
}

/* --- 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));
}

/* The glyph was a beige stroke on a beige tile on a beige card: twelve of
   them in a grid and the eye had nothing to land on. The brand gradient is
   the only colour on this half of the page and it costs three lines. (#358) */
.toddyi-feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--toddyi-size-40px);
    block-size: var(--toddyi-size-40px);
    border-radius: var(--toddyi-size-10px);
    font-size: var(--toddyi-size-1-2rem);
    background: var(--toddyi-gradient-primary);
    color: var(--text-on-dark);
    margin-block-end: var(--toddyi-size-12px);
}

/* German writes these as single words — "Wiederherstellungscodes",
   "Installationsanleitung" — and a 220px column is narrower than some of
   them. Breaking inside a word is the last resort; the hyphen is the first,
   and it works because <html lang> is set for every one of the fifteen. */
.toddyi-feature-card__title {
    margin: 0 0 var(--toddyi-size-6px);
    font-size: var(--toddyi-size-0-98rem);
    font-weight: 800;
    color: var(--text);
    hyphens: auto;
    overflow-wrap: anywhere;
}

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