/* pal landing page — single-page layout, no framework, no build step.
   Aesthetic: zed-like (dark default, large editorial sans hero, radial
   glow under the wordmark, code blocks with a soft drop-glow). Accent
   is steel blue — calmer than amber/red, reads "infrastructure /
   trustworthy". A light-mode flip is in @media (prefers-color-scheme:
   light) below. */

:root {
    --bg: #0b0d12;
    --bg-2: #11141a;
    --fg: #e6ebf0;
    --fg-muted: #8a93a1;
    --rule: #21262e;
    --accent: #5b9bd6;             /* steel blue */
    --accent-soft: #5b9bd622;
    --code-bg: #13161c;
    /* Callout uses a warm amber rather than reusing the cool accent —
       the visual register reads "caution, take note" instead of
       "more info in the same theme". Saturated low enough not to
       fight the blue. */
    --warn: #d49a5e;
    --warn-soft: #d49a5e18;
    --tk-cmt: #555b66;
    --tk-fn:  #5b9bd6;
    --tk-str: #d4bf86;
    --tk-kw:  #c8a6e0;
    --tk-id:  #cad2dc;
    /* One content measure for everything inside a section: prose,
       callouts, and code blocks share a left and right edge with the section
       rules and the three feature boxes — i.e. `main`'s content box.
       `100%` rather than a rem value on purpose, so it stays equal to that box
       if `main`'s width or padding is ever changed; the alignment is the point,
       not the number. Prose was previously 40rem and code unconstrained, so
       neither lined up with the rules above and below them.
       Long commands still overflow their box and scroll (`pre` keeps
       `overflow-x: auto`); that is preferred over shrinking the text to fit a
       URL, and the copy button hands over the whole line either way. */
    --measure: 100%;
}
@media (prefers-color-scheme: light) {
    :root {
        --bg: #fbfcfe;
        --bg-2: #f0f3f8;
        --fg: #14181f;
        --fg-muted: #5b6471;
        --rule: #dde2ea;
        --accent: #2762b8;
        --accent-soft: #2762b818;
        --code-bg: #eef1f6;
        --warn: #a25c1c;
        --warn-soft: #a25c1c12;
        --tk-cmt: #8995a4;
        --tk-fn:  #2762b8;
        --tk-str: #8a5a18;
        --tk-kw:  #6534a0;
        --tk-id:  #2a323d;
    }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Hero — the page's only visually heavy element. The radial gradient
   behind the wordmark sets a "premium" tone without adding chrome.
   Anchored to the top edge so it fades into the page body. */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-soft), transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 30%, var(--accent-soft), transparent 70%);
    pointer-events: none;
}
.hero-inner {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding: 6rem 2rem 5rem;
    text-align: center;
}

.wordmark {
    margin: 0;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
}
.wordmark .dot { color: var(--accent); }

.tagline {
    margin: 1.25rem auto 0;
    font-size: 1.2rem;
    color: var(--fg-muted);
    max-width: 30rem;
}

/* The lede — the one paragraph that says what the project is *for*,
   before the page says anything about how it works. Left-aligned and
   at `.install-card`'s width rather than centred at `.tagline`'s:
   four sentences centred in a 30rem column is a shape people skip,
   and this is the paragraph that has to be read. `strong` lifts back
   to full `--fg`, since the muted colour is what marks the rest of it
   as subordinate to the tagline above. */
.lede {
    margin: 1.5rem auto 0;
    max-width: 44rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--fg-muted);
    text-align: left;
}
.lede strong { color: var(--fg); font-weight: 600; }

/* Install command, the focal CTA. Width chosen so the production +
   PR-preview URLs (`curl -fsSL https://pr-N.pal-website.pages.dev/
   install.sh | sh`, ~60 chars) fit on one line; mobile media query
   below lets it wrap with break-all. */
.install-card {
    margin: 2.5rem auto 0;
    max-width: 44rem;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 0.85rem 0.85rem 0.85rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 10px 40px -10px var(--accent-soft);
}
.install-card .prompt {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
}
.install-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    color: var(--fg);
    flex: 1;
    text-align: left;
    background: transparent;
    overflow-x: auto;
    white-space: nowrap;
}
.copy-btn {
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    color: var(--fg-muted);
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.copy-btn:hover { color: var(--fg); background: var(--code-bg); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }
.copy-btn svg { width: 14px; height: 14px; display: block; }

.platforms {
    margin-top: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--fg-muted);
    text-align: center;
}

/* The second install step (`pal init`), directly under the platform
   line. Muted so the install command stays the loudest thing in the hero.
   Matches `.install-card`'s width rather than `--measure`: it sits directly
   beneath that card, and sharing an edge with the thing it follows reads
   better here than sharing one with the sections further down. */
.next-step {
    margin: 1.25rem auto 0;
    max-width: 44rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--fg-muted);
    text-align: left;
}

/* Manual install section (#manual-install) at the bottom of the
   page. Reuses the standard section.block layout — sub-headings
   (Option A / Option B / Tell Claude Code) styled as inline-y
   accents rather than full section headings, so the section reads
   as one coherent "manual path" rather than three siblings. */
section#manual-install h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--accent);
    font-weight: 600;
}
section#manual-install h3:first-of-type { margin-top: 1rem; }
section#manual-install pre {
    font-size: 0.85rem;
}

/* Wrapper for shell snippets that get a copy button — gives the
   absolutely-positioned button somewhere to anchor. The pre keeps
   right-padding to leave room for the icon. */
.code-block {
    position: relative;
    max-width: var(--measure);
}
.code-block > pre {
    padding-right: 3rem;
}
.copy-btn--pre {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.copy-btn--pre:hover,
.copy-btn--pre:focus-visible {
    opacity: 1;
}

main { max-width: 56rem; margin: 0 auto; padding: 0 2rem; }

/* Label over the feature row. The three boxes are mechanism, and
   mechanism only lands once the reader has the point (#why, above
   them) — so they get a heading that says as much rather than
   following the hero unannounced. `.features` is not a
   `section.block`, it owns its own padding and rules, so the h2
   styling is repeated here rather than inherited; the adjacency rule
   hands the label the grid's top padding so the two read as one unit. */
.features-label {
    margin: 4rem 0 1.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fg-muted);
    font-weight: 600;
}
.features-label + .features { padding-top: 0; }

/* "What it is" — 3 features in a row, separated by thin verticals,
   no boxes. The typography (small-caps monospace label + sentence-
   case sans body) does the visual structure. */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 4rem 0;
    border-bottom: 1px solid var(--rule);
}
.feature {
    padding: 0 2rem;
    border-left: 1px solid var(--rule);
}
.feature:first-child { border-left: none; padding-left: 0; }
.feature:last-child { padding-right: 0; }
.feature h3 {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 600;
}
.feature p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--fg);
}

section.block { padding: 4rem 0; border-bottom: 1px solid var(--rule); }
section.block:last-of-type { border-bottom: none; }
section.block h2 {
    margin: 0 0 1.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fg-muted);
    font-weight: 600;
}
section.block p {
    margin: 0.75rem 0;
    max-width: var(--measure);
    font-size: 1rem;
}

/* Prose lists. There is one on the page (#limitations) and this is the
   whole vocabulary for it, deliberately unclassed so a future list gets
   the same treatment without anyone having to remember a name. Dash
   markers in the muted colour rather than discs: the page's other
   marks are hairlines and small tracked labels, and a column of bullets
   is a register it uses nowhere else. Muted, not accent — the accent
   reads as "feature" everywhere else on the page, which is the wrong
   note for a list of caveats. */
section.block ul {
    margin: 1.5rem 0 0;
    max-width: var(--measure);
    padding-left: 1.5rem;
    list-style: none;
}
section.block ul li {
    position: relative;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}
section.block ul li:last-child { margin-bottom: 0; }
section.block ul li::before {
    content: "—";
    position: absolute;
    left: -1.5rem;
    color: var(--fg-muted);
}

/* #what — the capability list. One hairline-separated block per
   capability, which is the page's existing way of grouping peers (the
   feature row, vertically ruled). Nested `<ul>`s were the alternative:
   they bring their own bullets, their own indent, and a bold run-in
   label, none of which appear anywhere else here. */
.capabilities { margin-top: 1.5rem; max-width: var(--measure); }
.capability { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.capability:first-child { padding-top: 0.5rem; border-top: none; }
.capability:last-child { padding-bottom: 0; }
/* Same type treatment as `.feature h3` (accent, uppercase, tracked),
   repeated rather than shared: the two live in different layouts and
   only the label styling is common between them. */
.capability h3 {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 600;
}
/* Qualified with `section.block` for the same reason `p.footnote` is
   below: `section.block p` (0,1,2) outranks a lone class, and would
   restore the 1rem body size and the paragraph margins. */
section.block .capability > p { margin: 0; font-size: 0.95rem; }

/* A capability's two scopes. A label column rather than a bold
   "global:" run-in, so every scope label sits on one left edge down the
   whole section and the prose does too — the same alignment argument
   `--measure` makes for the sections. The column is sized for
   "task-specific" at the monospace size below; it stacks under 720px. */
dl.scopes {
    margin: 0;
    display: grid;
    grid-template-columns: 8rem 1fr;
    column-gap: 1rem;
    row-gap: 0.7rem;
    font-size: 0.95rem;
}
dl.scopes dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--fg-muted);
    /* Optically settles the label onto the dd's first baseline, which
       sits lower for being larger. */
    padding-top: 0.15rem;
}
dl.scopes dd { margin: 0; }

/* Scenario table (#why) — the poster-child examples. Three columns of
   prose, so it is ruled rows and nothing else: no vertical rules, no
   zebra, the header the only accented line. Anything heavier competes
   with the code blocks further down, and this table is the first thing
   on the page a reader is meant to actually read.

   The wrapper scrolls rather than letting the table narrow: three
   prose columns below ~36rem degrade into three columns of single
   words, which is worse than a sideways drag. Same trade `pre` makes. */
.table-wrap {
    max-width: var(--measure);
    overflow-x: auto;
    margin: 1.5rem 0 0;
}
table.scenarios {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.92rem;
}
table.scenarios th {
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-weight: 600;
    padding: 0 1rem 0.6rem 0;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
table.scenarios td {
    padding: 0.9rem 1rem 0.9rem 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
table.scenarios tr > :last-child { padding-right: 0; }
table.scenarios tr:last-child td { border-bottom: none; }
/* Column 1 is the user's own request — narrow and muted on purpose, so
   the eye lands on what the agent did anyway (2) and on what stopped
   it (3), which is the argument the table exists to make. */
table.scenarios td:first-child { width: 22%; color: var(--fg-muted); }
table.scenarios td:last-child { width: 40%; }
table.scenarios code { font-size: 0.85em; }

/* Callout — used for "take note" content (currently only the
   telemetry-ask in the hero). Visually separates a punchy sentence
   from surrounding flow without inventing a new section heading.
   Default tone is warm amber (caution); .callout--invite swaps to
   the accent (steel blue) for non-warning calls-to-action. */
.callout {
    background: var(--warn-soft);
    border-left: 3px solid var(--warn);
    border-radius: 0 6px 6px 0;
    padding: 0.85rem 1.1rem;
    margin: 1rem 0;
    max-width: var(--measure);
    text-align: left;
}
.callout p { margin: 0; max-width: none; }

/* Tone only — the amber swapped for the accent, so the box reads as a
   call to action rather than a caution. Two of them now (the hero's
   telemetry ask, and #limitations' "tell us what blocks you"), which is
   why the hero's geometry moved out to `.callout--hero`: an in-section
   invite that inherited `max-width: 44rem` and `margin: auto` came out
   narrower than the paragraphs around it and centred against their left
   edge. Keep tone and placement apart. */
.callout--invite {
    background: var(--accent-soft);
    border-left-color: var(--accent);
}

/* Placement for a callout in the hero rather than in a section: it keeps
   the hero's width (`.install-card` / `.next-step`) instead of
   `--measure`, which — being the section content box — would stretch it
   well past the card it sits under. */
.callout--hero {
    max-width: 44rem;
    margin: 1.25rem auto 0;
}

/* Footnotes. Only one so far (the consent caveat under #policies), kept in
   the section it qualifies rather than pooled at the page foot, so the
   reference and the note are on screen together. */
/* `section.block p.footnote`, not `.footnote`: the note is a <p> inside a
   section, and `section.block p` (0,1,2) outranks a lone class (0,1,0) — it
   would keep the 1rem body size and the full `--measure` width. `p.footnote`
   (0,1,1) still loses; the qualifier has to carry the section too. Do not
   "simplify" this selector. */
section.block p.footnote {
    margin-top: 1.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--rule);
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--fg-muted);
    /* Narrower than `--measure`: a note this small is unpleasant to read at
       the full section width, and the shorter line also marks it visually as
       an aside rather than more body copy. */
    max-width: 34rem;
}

/* The marker, in both directions: superscript at the reference, and the
   same glyph as a back-link at the note. `scroll-margin-top` keeps the
   target clear of the viewport edge when jumped to. */
.fnref {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
    padding: 0 0.15em;
    text-decoration: none;
    /* The global `a` rule underlines links with a border. Under a 0.7em
       superscript digit that reads as a stray tick, and the accent colour
       already marks it as a link. */
    border-bottom: none;
}
.footnote .fnref { margin-right: 0.35em; }
.footnote, .fnref { scroll-margin-top: 2rem; }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--code-bg);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--fg);
}
pre {
    max-width: var(--measure);
    /* Explicit, though it is also the UA default: every sample on this page is
       hand-laid-out text (no highlighter — see the README on formatters), so
       the newlines and leading spaces are the rendering. Stating it means no
       reset, extension, or injected stylesheet can collapse a sample into one
       line without overriding a rule that says why it must not. */
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92rem;
    background: var(--code-bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    overflow-x: auto;
    line-height: 1.55;
    margin: 1rem 0;
    box-shadow: 0 10px 30px -10px var(--accent-soft);
}
/* `white-space: inherit` is a guard, not decoration: a global `code` rule
   once carried `white-space: nowrap` (meant for the hero install command) and
   collapsed every sample on the page into one line, because the inner `code`
   overrides the `pre` it sits in. Inheriting means `pre` stays in charge. */
pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    white-space: inherit;
}

/* Lightweight syntax classes. No highlighter library — tokens are
   hand-marked in the HTML for the one example block. */
.tk-cmt { color: var(--tk-cmt); }
.tk-fn  { color: var(--tk-fn); }
.tk-str { color: var(--tk-str); }
.tk-kw  { color: var(--tk-kw); }
.tk-id  { color: var(--tk-id); }

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    transition: border-color 0.15s;
}
a:hover { border-bottom-color: var(--accent); }

footer {
    max-width: 56rem;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    font-size: 0.92rem;
    color: var(--fg-muted);
    text-align: center;
    border-top: 1px solid var(--rule);
}
footer p { margin: 0; max-width: none; }

@media (max-width: 720px) {
    .features { grid-template-columns: 1fr; }
    .feature {
        padding: 1.5rem 0;
        border-left: none;
        border-top: 1px solid var(--rule);
    }
    .feature:first-child { border-top: none; padding-top: 0; }
    .install-card code { white-space: normal; word-break: break-all; }
    /* The scope label goes above its prose rather than beside it: an
       8rem label column out of a ~20rem viewport leaves the dd too
       narrow to read. */
    dl.scopes {
        grid-template-columns: 1fr;
        row-gap: 0.25rem;
    }
    dl.scopes dd { margin-bottom: 0.7rem; }
    dl.scopes dd:last-child { margin-bottom: 0; }
}