/* The landing stage (ZERO_TO_ONE_PLAN §15.3 S1–S3).

   Marketing-surface only. The app keeps the light one-column register from
   firstemployee.css untouched (§15.4) — what changes here is scale and rhythm:
   a full-bleed near-black stage, display-size type, and the show → declare
   alternation. Two colours do all the work: #0B0B0C and the one cold-blue
   accent #4D7CFF, the same pair the live build feed uses, so the landing and
   the product look like the same object.

   Mobile-first: everything below is written for 390px and grows from there. */

/* ---------- the stage ----------
   Full-bleed: it sits directly in <main>, outside .fe-col, and re-centres its
   own content with an inner .fe-col so it stays on the shared measure. */
.fe-stage {
    background: #0B0B0C;
    color: #C9C9D1;
    padding-block: 3.4rem 3rem;
}

/* The marketing pages centre their prose (firstemployee.css § centred
   marketing pages). The stage does not: a build log, a timeline of events and
   a manifesto line are structure and declaration, not prose, and centring them
   gives every one of them a ragged left edge. Same reasoning that already
   exempts tables, forms and the shift report. */
body.fe-marketing .fe-stage .fe-col,
body.fe-marketing .fe-morning,
body.fe-marketing .fe-ml,
body.fe-marketing .fe-rp { text-align: left; }
.fe-stage + .fe-stage { padding-block-start: 0; }

.fe-stage h1,
.fe-stage h2,
.fe-stage strong { color: #F4F4F6; }

.fe-stage h1 {
    font-size: clamp(2.1rem, 8.2vw, 3.6rem);
    line-height: 1.06;
    margin: 0 0 .9rem;
}
.fe-stage-sub {
    font-size: clamp(1.02rem, 4.1vw, 1.22rem);
    color: #9A9AA4;
    margin: 0 0 1.6rem;
    max-width: 34rem;
}
.fe-stage-sub strong { font-weight: 600; }

/* The CTA pair: one button, one quiet link. Never two buttons — the second
   one is a hedge, and this page has exactly one thing to do. */
.fe-stage-cta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .55rem 1.4rem;
    margin: 0 0 2.2rem;
}
.fe-stage .fe-btn-stage {
    display: inline-block;
    background: #4D7CFF; border: 1px solid #4D7CFF; color: #08080A;
    font-weight: 640; text-decoration: none;
    border-radius: 8px; padding: 15px 28px; font-size: 1.04rem;
}
.fe-stage .fe-btn-stage:hover,
.fe-stage .fe-btn-stage:focus-visible { background: #6C92FF; border-color: #6C92FF; color: #08080A; }
.fe-stage-quiet {
    color: #9A9AA4; text-decoration: none;
    font-size: .97rem; border-bottom: 1px solid #33333A; padding-bottom: 2px;
}
.fe-stage-quiet:hover { color: #C9C9D1; border-bottom-color: #55555F; }

/* ---------- the replay terminal ----------
   Same register as the live build feed: monospace, "> " prefixes, ~14 visible
   lines, autoscrolling. It is hidden until the JS has real lines to put in it
   (GROWTH_PLAN §0) — an empty box beats an invented one. */
.fe-rp {
    background: #121214;
    border: 1px solid #202024;
    border-radius: 10px;
    padding: 12px 14px;
}
.fe-rp-lines {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .78rem; line-height: 1.62;
    color: #C9C9D1;
    /* A fixed height (not max-height) keeps the stage from jumping as lines
       arrive, which is the whole point of a replay. Ten lines on a phone,
       fourteen once there is room: at 390px a fourteen-line box is most of the
       viewport and the CTA above it falls off the screen. */
    height: calc(10 * .78rem * 1.62);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
    /* The log grows upward off the floor of the box, the way a terminal does.
       Filling from the top left three lines stranded above a lake of empty
       black for the first seconds of every loop.

       The inner list is moved with a TRANSFORM rather than by flex alignment
       or scrollTop: a transform is composited and is excluded from layout
       shift, whereas re-aligning the box moved every existing line and booked
       a shift on each arriving line — that was the whole of desktop CLS. */
    position: relative;
    overflow: hidden;
}
.fe-rp-inner {
    position: absolute; left: 0; right: 0; top: 0;
    will-change: transform;
}
.fe-rp-line { white-space: pre-wrap; word-break: break-word; }
.fe-rp-line::before { content: "> "; color: #4D7CFF; }
.fe-rp-line:last-child { color: #F4F4F6; }

.fe-rp-cap {
    margin: .7rem 0 0;
    font-size: .86rem; color: #6E6E78;
}
.fe-rp-cap a { color: #9A9AA4; }
.fe-rp-cap a:hover { color: #4D7CFF; }

/* The site that build produced, when it has actually been provisioned. Its own
   line: run in with the caption it read as one long sentence. */
#feReplayUrl {
    display: block; margin-top: .3rem;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .8rem; color: #4D7CFF; word-break: break-all;
}
#feReplayUrl[hidden] { display: none; }

@media (max-width: 430px) {
    /* The quiet link crowds the button's edge at 390 — stack them. */
    .fe-stage-cta { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

@media (min-width: 760px) {
    .fe-stage { padding-block: 5.5rem 4.4rem; }
    .fe-rp { padding: 16px 20px; }
    .fe-rp-lines { font-size: .86rem; height: calc(14 * .86rem * 1.62); }
}

/* ---------- S2: the next morning ----------
   Light again, deliberately: this is what the product looks like, so it looks
   like the product. Cards stack, they never grid. */
.fe-morning { margin-block: 3.4rem; }
.fe-morning-note { color: var(--text-faint, #8B8B94); font-size: .9rem; }

.fe-ml { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.fe-ml > li {
    border-left: 2px solid var(--line, #E4E4E7);
    padding: 0 0 1.5rem 1.1rem;
    position: relative;
}
.fe-ml > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.fe-ml > li::before {
    content: ""; position: absolute; left: -5px; top: .45rem;
    width: 8px; height: 8px; border-radius: 2px;
    background: var(--accent, #3D6DFF);
}
.fe-ml-time {
    display: block;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .76rem; letter-spacing: .04em;
    color: var(--text-faint, #8B8B94);
    margin-bottom: .2rem;
}
.fe-ml-say { margin: 0 0 .35rem; font-size: 1.05rem; }
.fe-ml-meta { margin: 0; font-size: .9rem; color: var(--text-dim, #52525B); }

/* The one question, rendered inert: it is a real question a real founder
   answered, so the buttons must not look answerable here. */
.fe-ml-opts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.fe-ml-opt {
    font-size: .9rem; padding: 7px 14px; border-radius: 8px;
    border: 1px dashed var(--line-2, #D4D4D8); color: var(--text-faint, #8B8B94);
    background: var(--bg-2, #F7F7F8);
    cursor: default;
}

/* ---------- S3: the manifesto ----------
   Three lines, one accent word each, and a lot of air. Display type is the
   only place on the site where a sentence is allowed to be the whole screen. */
/* margin-BLOCK, never the `margin` shorthand: .fe-col centres with
   `margin-inline: auto`, and the shorthand resets it to 0 — which flushed the
   whole manifesto band to the left edge of the viewport. This is the same
   trap GROWTH_PLAN §6 flags for the upstream base template. */
.fe-mf { margin-block: 0; }
.fe-mf p {
    font-size: clamp(1.75rem, 8.4vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.022em;
    font-weight: 660;
    color: #F4F4F6;
    margin: 0 0 2.4rem;
    max-width: 22ch;
}
.fe-mf p:last-child { margin-bottom: 0; }
.fe-mf em { font-style: normal; color: #4D7CFF; }

@media (min-width: 760px) {
    .fe-mf p { margin-bottom: 3.2rem; max-width: 24ch; }
}

@media (prefers-reduced-motion: reduce) {
    /* The static render drops the fixed height so the whole log reads as a
       block of text rather than a scroller the reader has to chase. */
    .fe-rp-lines { height: auto; max-height: none; overflow: visible; }
    /* Static render: the log is a block of text, so the inner list returns to
       normal flow and no transform is applied. */
    .fe-rp-inner { position: static; transform: none !important; }
    .fe-rp-line:last-child { color: #C9C9D1; }
}

/* "Then it planned the next block of work" — the forward half of S2. The
   section exists to show the thing does not stop, so the next-task card gets
   the accent and sits after the report, not inside it. */
.fe-next {
    border-left: 3px solid var(--accent, #3D6DFF);
    padding: .1rem 0 .1rem 1.1rem;
    margin-top: 1.6rem;
    text-align: left;
}
.fe-next-h {
    font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-faint, #8B8B94); margin: 0 0 .35rem;
}
.fe-next-say { margin: 0 0 .5rem; }
.fe-next-task { margin: 0; font-size: .95rem; }
.fe-next-tag {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .74rem; letter-spacing: .04em;
    background: var(--accent-wash, #EAF0FF); color: var(--accent-hi, #2A56E0);
    padding: .12rem .45rem; border-radius: 4px; margin-right: .4rem;
}

/* The "not a builder you drive" line: the differentiator, quieter than the
   promise above it but on the same stage. */
.fe-stage-not {
    color: #9A9AA3; font-size: .98rem; line-height: 1.55;
    max-width: 54ch; margin: .9rem 0 0;
}

/* S1b — how it works in three lines. Deliberately plain: this block exists
   because two readers could not tell what the product was. */
.fe-steps3 { margin-block: 3rem; text-align: left; }
/* body.fe-marketing centres lists and sets them `display:inline-block`, which
   outranked the grid below — `ol:not(.fe-walk)` scores a class for the :not()
   argument, so it beat a plain `.fe-steps3 ol` and three steps rendered as one
   stacked column at every width. Naming .fe-col too wins it back. Three steps
   should look like three steps. */
body.fe-marketing .fe-col.fe-steps3 ol,
.fe-steps3 ol { list-style: none; margin: 0; padding: 0; max-width: none;
                display: grid; gap: 1.5rem; }
.fe-steps3 li { display: grid; gap: .3rem; }
.fe-steps3 strong { font-size: 1.05rem; }
.fe-steps3 span { color: var(--text-dim, #52525B); line-height: 1.6; }
@media (min-width: 860px) {
    body.fe-marketing .fe-col.fe-steps3 ol,
    .fe-steps3 ol { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
    /* Three columns on the prose rail leave ~25 characters each, which reads
       as a squeeze. Same width as the screenshots below, so the two blocks
       share an edge. */
    .fe-col.fe-steps3 { max-width: min(940px, 92vw); }
}

/* The way down. The stage answered nothing for a reader who did not scroll. */
.fe-scrollcue { margin: 2.2rem 0 0; }
.fe-scrollcue a {
    color: #9A9AA3; text-decoration: none; font-size: .9rem;
    border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.fe-scrollcue a:hover { color: #F4F4F6; border-bottom-color: #4D7CFF; }
.fe-scrollcue span { display: inline-block; margin-left: .35rem; }
@media (prefers-reduced-motion: no-preference) {
    .fe-scrollcue span { animation: fe-nudge 2.2s ease-in-out infinite; }
}
@keyframes fe-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- product screenshots ----------
   Real captures written by `manage.py landing_shots`: shot at 940 CSS px on a
   2x device, so 1880 native. Never displayed above 940 — an upscaled
   screenshot of crisp UI text looks broken in a way a photo does not. The
   width/height attributes live on the <img>; a lazy image without them is the
   usual cause of layout shift, and this page measures 0.000. */
.fe-show { margin-block: 3.2rem; }
/* The prose column is ~48rem; a screenshot squeezed into it is unreadable, so
   the figure breaks out and re-centres. `.fe-wide` is documented in
   firstemployee.css but was never actually written, and adding it there would
   widen every table on the site. 92vw keeps the breakout off the edges of a
   phone, where it lands narrower than the column would have been anyway. */
.fe-shot {
    width: min(940px, 92vw);
    margin: 1.5rem 0 1.8rem 50%;
    transform: translateX(-50%);
}
.fe-shot img {
    width: 100%; height: auto; display: block; background: #fff;
    border: 1px solid var(--line, #E4E4E7); border-radius: 10px;
    box-shadow: 0 1px 2px rgba(24,24,27,.04), 0 10px 30px rgba(24,24,27,.08);
}
.fe-shot figcaption {
    margin-top: .6rem; font-size: .88rem; color: var(--text-faint, #8B8B94);
}

/* Capability rows. Each carries its real state, so the state gets a slot in
   the layout rather than being buried in the prose. The loop section reuses
   them, so it takes the same left alignment. */
.fe-more, .fe-loop { margin-block: 3.4rem; text-align: left; }
.fe-caps { list-style: none; margin: 1.6rem 0 1rem; padding: 0; display: grid; gap: 1.5rem; }
.fe-caps li { display: grid; gap: .3rem;
              border-top: 1px solid var(--line, #E4E4E7); padding-top: 1.1rem; }
.fe-caps strong { font-size: 1.05rem; }
.fe-caps span { color: var(--text-dim, #52525B); line-height: 1.6; }
.fe-cap-state {
    font-style: normal; font-family: var(--mono, ui-monospace, monospace);
    font-size: .76rem; letter-spacing: .02em;
    color: var(--accent-hi, #2A56E0); background: var(--accent-wash, #EAF0FF);
    padding: .18rem .5rem; border-radius: 4px; justify-self: start;
}