/* The landing page.
 *
 * Same monochrome serif as the app, because the app IS the product and a
 * glossy gradient marketing site followed by a stark serif tracker would
 * promise something different from what arrives.
 *
 * Deliberately plain: no testimonials, no screenshots-in-phone-frames, no
 * "trusted by N families" when N is 1. The copy makes a modest, specific
 * claim and the design should not oversell it.
 */

:root {
    --bg: #fafafa;
    --panel-bg: #ffffff;
    --border: #000000;
    --border-light: #cccccc;
    --text: #000000;
    --text-light: #444444;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Times New Roman', Times, Georgia, serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.hero {
    max-width: 620px;
    margin: 0 auto;
    padding: 56px 24px 40px;
    text-align: center;
}

.hero-mark {
    width: 88px;
    height: 88px;
    border: 1px solid var(--border);
}

.hero h1 {
    font-size: 40px;
    font-weight: normal;
    margin: 18px 0 6px;
    letter-spacing: 0.01em;
}

.hero-line {
    font-size: 20px;
    margin: 0 0 14px;
}

.hero-sub {
    font-size: 17px;
    color: var(--text-light);
    margin: 0 auto 28px;
    max-width: 460px;
}

.hero-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    font-family: inherit;
    font-size: 17px;
    padding: 12px 26px;
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: #f0f0f0; }

.btn-primary { background: var(--border); color: #fff; }
.btn-primary:hover { background: #333; }

.hero-note {
    font-size: 15px;
    color: var(--text-light);
    margin: 18px 0 0;
}

main {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 24px;
}

/* CENTRED BY DEFAULT, which is the mobile layout.
 *
 * On a phone the screenshot sits centred UNDER its paragraph, so there is
 * nothing to the left or right for the text to lean toward -- left-aligned
 * prose above a centred image reads as a mistake. The hero, the closing
 * paragraph and the footer are already centred, so this also makes the whole
 * page consistent at that width rather than one column of six sections
 * disagreeing with everything around it.
 *
 * The desktop block overrides this per section, where there IS a side to lean
 * away from. */
.feature {
    padding: 26px 0;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.feature h2 {
    font-size: 21px;
    font-weight: normal;
    margin: 0 0 8px;
}

.feature p {
    font-size: 17px;
    margin: 0;
    color: var(--text-light);
}

.closing {
    padding: 34px 0 10px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.closing p {
    font-size: 16px;
    color: var(--text-light);
    margin: 0 auto 24px;
    max-width: 470px;
}

footer {
    max-width: 620px;
    margin: 0 auto;
    padding: 40px 24px 56px;
    text-align: center;
    font-size: 15px;
    color: var(--text-light);
}

footer a { color: var(--text); }
footer .sep { margin: 0 8px; color: var(--border-light); }

.footer-fine {
    margin: 10px 0 0;
    font-size: 14px;
}

/* On a phone the hero should not push the buttons below the fold: they are
   the only thing on this page that matters. */
@media (max-width: 480px) {
    .hero { padding: 36px 20px 30px; }
    .hero h1 { font-size: 33px; }
    .hero-line { font-size: 18px; }
    .hero-sub { font-size: 16px; margin-bottom: 22px; }
    .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Screenshots beside the features
   ---------------------------------------------------------------------------
   Four feature sections carry a phone screenshot with two labelled callouts.

   THE ANIMATION IS A FADE AND A SMALL RISE, NOT A 3D FOLD.
   The fold was rewritten three times and still left screenshots stuck at an
   angle: the mirrored rule `.feature.has-shot.shot-left .shot img` is four
   classes deep, the rule meant to undo it was two, and every attempt to
   out-specify it added a rule that something else then out-specified. A
   decorative flourish is not worth a cascade nobody can hold in their head.

   So: ONE property animates, on ONE selector, with no mirrored variant to
   fight. It cannot get stuck half-open, because there is no half-open state
   that is not simply "less faded".

   THE PAGE IS 620px AND STAYS THAT WAY. Only the sections with a shot widen,
   and they take it from their own margins, so every heading stays on the line
   it was on.

   TWO LAYOUTS. Below 900px the screenshot sits UNDER its paragraph, narrow and
   centred, with the callouts as a caption. It has to be narrow: these are
   portrait phone screenshots, so a full-width one on a phone is TALLER THAN
   THE VIEWPORT -- you would scroll through a picture of a phone on your phone.
   At ~62% it reads as an illustration of the app rather than as a screen
   competing with the one in your hand.
   ------------------------------------------------------------------------ */

.shot {
    display: block;
    width: 62%;
    max-width: 300px;
    margin: 22px auto 4px;
    position: relative;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
    /* Visible by default; the fade is opt-in via .animate, which the script
       adds. A decorative flourish must not be able to hide the content it
       decorates -- three earlier versions of this did exactly that. */
    opacity: 1;
    transform: none;
}

/* On a phone the callouts cannot sit in a margin, because there is no margin.
   They become a caption: one line each, centred under the image, in the order
   they would have appeared beside it. */
.shot-notes {
    margin: 8px auto 0;
    text-align: center;
}

.shot-note {
    display: block;
    position: static;
    width: auto;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-light, #555);
    margin-top: 3px;
    opacity: 1;
}

/* The little arrow only means something pointing at an image beside it. */
.shot-note::after { content: none; }

@media (min-width: 900px) {
    /* Beside the text, at its natural width in the grid column. */
    .shot {
        width: auto;
        max-width: none;
        margin: 0;
    }

    .feature.has-shot {
        display: grid;
        grid-template-columns: 1fr 240px;
        gap: 40px;
        align-items: center;
        max-width: 900px;
        margin-left: calc((620px - 900px) / 2);
        margin-right: calc((620px - 900px) / 2);
        padding-left: calc((900px - 620px) / 2);
        padding-right: calc((900px - 620px) / 2);
    }

    /* Alternating sides, so the eye is not led down a single rail. */
    .feature.has-shot.shot-left .feature-text { order: 2; }
    .feature.has-shot.shot-left .shot { order: 1; }

    /* TEXT LEANS AWAY FROM ITS SCREENSHOT.
     *
     * A paragraph sitting left of an image is left-aligned and one sitting
     * right of an image is right-aligned, so each column's ragged edge faces
     * the picture and its flush edge runs along the OUTSIDE of the page.
     *
     * The first version did the opposite -- flush edges facing inward, on the
     * theory that the two columns would present a clean line to each other.
     * The user reversed it, and looking at both, this is better: the outer
     * edges of the page stay straight, which is what the eye follows down a
     * long scroll, and the ragged edge beside the phone reads as breathing
     * room rather than as a misalignment.
     *
     * Sections with NO screenshot are centred, because there is nothing to
     * lean away from.
     *
     * Desktop only: below 900px there are no screenshots, so there is no
     * "beside" and everything keeps the page's own alignment. */
    .feature.has-shot .feature-text { text-align: right; }
    .feature.has-shot.shot-left .feature-text { text-align: left; }
    .feature:not(.has-shot) { text-align: center; }

    .shot { position: relative; }

    .shot img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid var(--border-light);
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.13);

        /* VISIBLE BY DEFAULT. The animation is an enhancement layered on top,
         * and it is applied by the .animate class that the script adds only
         * after it has confirmed it can drive it. So the failure mode is "the
         * screenshots appeared without animating" rather than "the screenshots
         * are invisible", which is what three earlier versions did -- stuck
         * half-open, or faded out and never faded back.
         *
         * A decorative flourish must not be able to hide the content it
         * decorates. */
        opacity: 1;
    }

    /* Only elements the script has opted in start hidden. */
    .shot.animate img {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
    }
    .shot.animate.in-view img {
        opacity: 1;
        transform: translateY(0);
    }

    /* The callouts sit in the OUTER margin, pointing back at the phone. They
       used to point inward, into the 40px gap beside the text, where a label
       cannot fit -- so they landed on top of the paragraph. */
    /* Back to absolute positioning against the shot. These also undo the
       mobile caption layout above -- text-align and margin -- which would
       otherwise leak in and shift the callouts. */
    .shot-notes {
        position: absolute;
        inset: 0;
        margin: 0;
        text-align: left;
        pointer-events: none;
    }

    .shot-note {
        position: absolute;
        display: block;
        margin-top: 0;
        left: calc(100% + 20px);
        width: 150px;
        text-align: left;
        font-size: 13px;
        line-height: 1.45;
        color: var(--text-light, #555);
        opacity: 1;                       /* visible by default, as above */
    }
    .shot.animate .shot-note {
        opacity: 0;
        transition: opacity 0.6s ease 0.25s;
    }
    .feature.has-shot.shot-left .shot-note {
        left: auto;
        right: calc(100% + 20px);
        text-align: right;
    }
    /* Only opacity changes, so the mirrored rule above sets position only and
       there is nothing for this to fight over. */
    .shot.animate.in-view .shot-note { opacity: 1; }

    .shot-note-1 { top: 16%; }
    .shot-note-2 { top: 62%; transition-delay: 0.4s; }

    .shot-note::after {
        content: "";
        position: absolute;
        top: 0.62em;
        left: -16px;
        width: 12px;
        height: 1px;
        background: var(--border, #ccc);
    }
    .feature.has-shot.shot-left .shot-note::after {
        left: auto;
        right: -16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shot img, .shot-note {
        opacity: 1;
        transform: none;
        transition: none;
    }
}