/* Landing page only. Everything reusable (surface, backdrop, page shell, card,
   fields, buttons, nav) lives in theme.css; this file is the hero grid, the
   app-window demo and its timeline. */

/* ----------------------------------------------------------------- hero --- */
/* Type, stacking and the backdrop come from .tw-page / .tw-surface; the hero
   is taller here than on a one-card page. */

.landing .hero-body { padding: 46px 1.5rem 64px; }

.landing .hero-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 54px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.landing .lockup {
    width: 248px;
    max-width: 62%;
    margin-bottom: 22px;
    display: block;
}

.landing .headline {
    font-size: clamp(32px, 3.9vw, 52px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.03;
    margin: 0 0 18px;
}

/* The accented word in any heading on the page. */
.landing .em { color: var(--tw-orange); }
.landing .headline .em { white-space: nowrap; }

/* Mono eyebrow above a section, wherever one appears. */
.landing .lab {
    font-family: var(--tw-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tw-mut);
}

.landing .lede {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--tw-body);
    max-width: 34ch;
    margin: 0 0 26px;
}

.landing .reg { max-width: var(--tw-card-w); }

/* ----------------------------------------------------------- app window --- */

.landing .demo { min-width: 0; }

.landing .window {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--tw-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 50px 90px -52px rgba(20, 20, 18, 0.55);
}

.landing .titlebar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--tw-line);
    background: #fcfcfb;
}

.landing .dots { display: flex; gap: 6px; }
.landing .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }

.landing .filename {
    font-family: var(--tw-font-mono);
    font-size: 12px;
    color: var(--tw-mut);
}

.landing .window-body { display: flex; align-items: stretch; }

.landing .toolrail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 10px;
    border-right: 1px solid var(--tw-line);
    background: #fcfcfb;
}

.landing .toolrail span {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6a69e;
    font-size: 13px;
}

.landing .toolrail span.is-active {
    background: var(--tw-orange);
    color: #fff;
    box-shadow: 0 6px 14px -8px var(--tw-orange);
}

.landing .toolrail .sep {
    height: 1px;
    background: var(--tw-line);
    margin: 3px 4px;
}

.landing .canvas-host {
    position: relative;
    flex: 1;
    min-width: 0;
    background: #fdfdfc;
}

.landing .canvas-host canvas {
    display: block;
    width: 100%;
    border: none;
    cursor: default;
    margin: 0;
    z-index: auto;
}

/* theme.css blurs the sticky nav on every page that opts into it. Here the hero
   canvas scrolls underneath at 24fps while the nav only ever sits over flat page
   background, so the blur is all cost and no effect. Cancelled at every width,
   not just narrow ones — the canvas is there at every width too, and 1024px is
   iPad landscape. Opaque rather than near-opaque: the blur was the only thing
   stopping the headline ghosting through. */
.landing .tw-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--tw-paper);
    border-bottom: 1px solid var(--tw-line);
}

/* -------------------------------------------------------------- timeline --- */
/* Same recipe as .timeline-content in the app: flat translucent white, no blur.
   A backdrop-filter here sits directly over a canvas that repaints 24 times a
   second, and every one of those repaints forces the blur to be re-sampled and
   re-composited — the same cost that made frosted glass opt-in in the app. On
   iOS it is worse than slow: this panel is inside .window, which is rounded and
   overflow:hidden, and that clip + blur combination gets the whole subtree
   folded into one cached layer whose canvas stops updating. */

.landing .timeline {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 7px 8px 8px;
    border-radius: 8px;
    border: 1px solid rgba(35, 35, 31, 0.07);
    background: var(--panel-wash);
}

.landing .tl-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.landing .tl-legend {
    display: flex;
    gap: 14px;
    font-family: var(--tw-font-mono);
    font-size: 11px;
    color: #6f6b63;
}

.landing .tl-legend span { display: flex; align-items: center; gap: 6px; }

/* Swatches match the ink each pass is drawn in on the canvas. */
.landing .tl-legend i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.landing .tl-legend .lg-key { background: var(--tw-blue); }
.landing .tl-legend .lg-tween { background: #23231f; }

.landing .tl-count {
    font-family: var(--tw-font-mono);
    font-size: 11px;
}

.landing .tl-count b { color: var(--tw-orange); }

.landing .tl-row {
    display: grid;
    grid-template-columns: 45px repeat(var(--steps, 13), minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
    margin-bottom: 3px;
}

.landing .tl-row:last-child { margin-bottom: 0; }

.landing .tl-gutter { display: flex; gap: 3px; }

.landing .tl-btn {
    width: 21px;
    height: 21px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0;
}

/* Bulma's own tokens, so these track the same colours as the real buttons in
   the app (which carry `is-danger` / `is-dark`). */
.landing .tl-btn--del { background: var(--bulma-danger); color: #fff; }

.landing .tl-btn--eye {
    background: var(--bulma-dark);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.landing .tl-btn--eye:hover {
    background: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-30-l));
}
.landing .tl-btn--eye.is-off { background: #d6d6d0; color: #6b6b63; }

.landing .tl-num {
    min-width: 0;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tw-font-mono);
    font-size: 9px;
    color: #8f8b83;
}

.landing .tl-cell {
    min-width: 0;
    height: 21px;
    border-radius: 4px;
    background: var(--tw-blue);
}

/* The app paints the current frame button primary, whatever kind it is. */
.landing .tl-cell.is-current { background: var(--tw-orange); }

/* ------------------------------------------------------------ footnotes --- */

.landing .proof {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--tw-line);
    background: #fff;
}

.landing .proof-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 38px;
}

.landing .proof .item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    color: var(--tw-body);
}

.landing .proof .item i { color: var(--tw-orange); font-size: 15px; }

.landing .ast { color: var(--tw-orange); font-weight: 700; }

/* Own line under the items, however many of them wrapped. */
.landing .proof .note {
    flex: 0 0 100%;
    margin: 0;
    font-size: 13px;
    color: var(--tw-mut);
}

.landing .proof .note a { color: var(--tw-blue); font-weight: 600; }

/* ---------------------------------------------------------- assurances --- */

.landing .assure {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--tw-line);
    background: linear-gradient(180deg, #fff 0%, var(--tw-paper) 100%);
}

.landing .assure-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 66px 1.5rem 72px;
}

.landing .assure-head { max-width: 62ch; margin-bottom: 38px; }

/* The proof strip's eyebrow is a flex child; this one needs its own line. */
.landing .assure-head .lab { display: block; margin-bottom: 12px; }

.landing .assure-title {
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 14px;
}

.landing .assure-lede {
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--tw-body);
    margin: 0;
}

.landing .assure-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* Chrome comes from .tw-card; only the tighter geometry is landing-specific. */
.landing .assure-card {
    border-radius: 14px;
    padding: 22px 20px 20px;
}

/* Tint and shape come from .tw-card__ico; the grid only sizes it down. */
.landing .assure-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 15px;
}

.landing .assure-card h3 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 7px;
    color: var(--tw-ink);
}


.landing .assure-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 32px;
}

/* Colour and hover come from .tw-btn-discord; the CTA only sizes it up. */
.landing .assure-discord {
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 11px;
}

.landing .assure-cta-note { font-size: 13.5px; color: var(--tw-mut); }

/* ----------------------------------------------------------- responsive --- */

@media screen and (max-width: 1023px) {
    .landing .hero-body { padding: 30px 1.25rem 44px; }

    .landing .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .landing .lede { max-width: none; }
    .landing .reg { max-width: none; }
    .landing .window { max-width: none; }

    .landing .assure-inner { padding: 48px 1.25rem 54px; }
    .landing .assure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 640px) {
    .landing .toolrail { display: none; }
    .landing .lockup { width: 200px; }
    .landing .headline { font-size: clamp(28px, 8vw, 38px); }
    .landing .lede { font-size: 16px; }

    /* The gutter and per-timestep numbers stop being legible; drop them and
       let the frame cells use the full width. */
    .landing .timeline { left: 6px; right: 6px; bottom: 6px; padding: 6px; }
    .landing .tl-row--head { display: none; }
    .landing .tl-row { grid-template-columns: repeat(var(--steps, 13), minmax(0, 1fr)); }
    .landing .tl-gutter { display: none; }
    .landing .tl-head-row { margin-bottom: 5px; }
    .landing .tl-count { display: none; }
    .landing .tl-cell { height: 18px; }

    .landing .proof-inner { gap: 10px 22px; padding: 20px 1.25rem; }
    .landing .proof .item { font-size: 14px; }
    .landing .proof .note { font-size: 12.5px; }

    .landing .assure-inner { padding: 40px 1.25rem 46px; }
    .landing .assure-head { margin-bottom: 26px; }
    .landing .assure-lede { font-size: 15.5px; }
    .landing .assure-grid { grid-template-columns: 1fr; gap: 14px; }
    .landing .assure-cta { margin-top: 24px; }
}