/* ==========================================================================
   HOME LANDING PAGE
   --------------------------------------------------------------------------
   Loaded ONLY by Views/Home/Index.cshtml, via its @section Styles. Nothing
   else on the site includes this file, so a rule here cannot reach another
   page -- which is why the selectors are free to be short. Every one of them
   is nested under .lp so that stays true even if the file is ever included
   somewhere by accident.

   BUILT ENTIRELY ON tokens.css. No new colour, font, radius or shadow is
   invented here and no new CDN is added: the palette is the same one the
   prototype and the forms already use, so the landing page cannot drift away
   from the application it introduces. The four form colours in particular
   (--c-form-green / -yellow / -white / -blue) are the SAME tokens the Green,
   Yellow, White and Blue forms are painted with, so the card a visitor reads
   here is the colour of the form they will actually open.

   Decorative elements are aria-hidden in the markup and drawn in CSS rather
   than shipped as images: one fewer request, and nothing to go stale.

   ONE TYPEFACE, EVERYWHERE. Every rule below uses var(--font-sans) -- the same
   family tokens.css puts on <body> at line 131 -- and NOTHING here uses
   --font-serif. An early draft set headings in Georgia for "gravitas"; that is
   exactly the three-family drift wands-prototype.css was written to undo, and
   it would have made the landing page the only page on the site with serif
   headings. Size, weight and letter-spacing carry the hierarchy instead.

   TWO TOKENS THAT ARE SHORTHAND VALUES, NOT COLOURS. --border-1 is the whole
   declaration '1px solid #a9aeb1' and --focus-ring is a two-layer box-shadow.
   So it is `border: var(--border-1)`, never `border: 1px solid var(--border-1)`,
   and `box-shadow: var(--focus-ring)`, never `outline: var(--focus-ring)`. Both
   wrong forms parse as invalid and are DROPPED SILENTLY by the browser, which
   in the focus case would have removed a visible focus indicator -- an
   accessibility regression with no error anywhere to find it by.
   ========================================================================== */

.lp {
    /*  NO NEGATIVE MARGIN. This used to carry
            margin: calc(var(--sp-3) * -1) calc(var(--sp-3) * -1) 0;
        to cancel the page container's padding so the hero could bleed to the
        window edges. _Layout's container has NO padding -- <main class="flex-fill">
        computes to 0px left and right at every width -- so there was nothing to
        cancel and the bleed simply hung 24px off BOTH edges. Measured: the
        document was 48px wider than the viewport at 1440px AND at 375px, which
        gave the whole page a horizontal scrollbar and put the first 24px of the
        hero permanently off-screen to the left, where it could not be scrolled
        back into view.

        Nothing replaces it. Every band insets its content by `var(--sp-3)` inside
        a --maxw-page cap: .lp-section on the padded box itself, .lp-hero on its
        __inner, and .lp-section--sunken via the children's max-width. All three
        land the content edge at the same x, so every band is full-bleed with its
        content correctly — and identically — inset. If a
        page container ever does gain padding, bleed with a container query unit
        or a wrapper -- not with a negative margin guessing at a value it cannot
        read. */
    margin: 0;
}

/* ------------------------------------------------------------------- hero */

.lp-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg,
            var(--c-primary-darker) 0%,
            var(--c-primary-dark) 45%,
            var(--c-primary) 100%);
    /* HORIZONTAL PADDING LIVES ON .lp-hero__inner, NOT HERE. Putting the side
       padding on this full-width element let it fall into the centring gutter at
       wide viewports, so the hero content spanned the full --maxw-page while the
       .lp-section bands below inset their content by sp-3 — the two never lined
       up. The inner now carries the same sp-3 as a .lp-section, so every band's
       content edge is at the same x. Vertical padding stays here. */
    padding: var(--sp-6) 0 var(--sp-5);
}

/*  Two soft radial washes and a hairline grid. This reads as "water and
    survey map" without a single asset request. Kept very low contrast so it
    never competes with the headline -- the text above it must stay at full
    AA contrast against the base gradient alone, which it does, so the
    decoration can be removed entirely without hurting legibility. */
.lp-hero::before,
.lp-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.lp-hero::before {
    width: 44rem;
    height: 44rem;
    top: -22rem;
    right: -14rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 68%);
}

.lp-hero::after {
    width: 34rem;
    height: 34rem;
    bottom: -20rem;
    left: -10rem;
    background: radial-gradient(circle, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 70%);
}

.lp-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255, 255, 255, .28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .28) 1px, transparent 1px);
    background-size: 4rem 4rem;
    /* fade the grid out downwards so it never touches the buttons */
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 72%);
}

.lp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--maxw-page);
    margin: 0 auto;
    /* Same horizontal inset as .lp-section, so the hero content edge aligns with
       every band below it. Moved off .lp-hero (see the note there). */
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
}

.lp-hero__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-15);
    margin-bottom: var(--sp-3);
}

.lp-hero__logo {
    height: 3.25rem;
    width: auto;
    /* the mark is dark-on-transparent, so it needs a plate on the gradient */
    background: #fff;
    border-radius: var(--radius-sm);
    padding: .3rem .45rem;
    box-shadow: var(--shadow-1);
}

.lp-hero__agency {
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: var(--lh-snug);
    color: rgba(255, 255, 255, .88);
    margin: 0;
}

.lp-hero__agency span {
    display: block;
    font-weight: var(--fw-medium);
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .68);
}

.lp-hero h1 {
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
    margin: 0 0 var(--sp-2);
    max-width: 34ch;
    color: #fff;
    text-wrap: balance;
}

.lp-hero__lede {
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: rgba(255, 255, 255, .92);
    max-width: 62ch;
    margin: 0 0 var(--sp-3);
}

.lp-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-15);
    align-items: center;
}

/*  The hero sits on a dark band, so the shared .btn styles would put a dark
    button on a dark ground. These two are hero-local inversions, NOT new
    button variants -- adding variants to the shared sheet would let this
    styling escape onto pages with a light background. */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    padding: .85rem 1.6rem;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

.lp-btn--primary {
    background: #fff;
    color: var(--c-primary-darker);
    box-shadow: var(--shadow-2);
}

.lp-btn--primary:hover {
    background: var(--c-primary-lighter);
    color: var(--c-primary-darker);
    transform: translateY(-1px);
}

.lp-btn--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .7);
}

.lp-btn--outline:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

.lp-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --------------------------------------------------------------- stat rail */

.lp-stats {
    position: relative;
    z-index: 1;
    max-width: var(--maxw-page);
    margin: var(--sp-4) auto 0;
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, .22);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sp-3);
}

.lp-stat__n {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: #fff;
}

.lp-stat__t {
    display: block;
    margin-top: .35rem;
    font-size: var(--fs-3xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

/* ---------------------------------------------------------------- sections */

.lp-section {
    max-width: var(--maxw-page);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-3);
}

.lp-section--sunken {
    max-width: none;
    background: var(--c-paper-sunken);
    border-top: var(--border-1);
    border-bottom: var(--border-1);
}

.lp-section--sunken > * {
    /* maxw-page MINUS the sp-3 inset the other bands carry, so the sunken band's
       content edge lands at the same x as a regular .lp-section (whose padded box
       caps at maxw-page, giving a content width of maxw-page - 2*sp-3). Capping
       the children at the full maxw-page here made this band 2*sp-3 wider than the
       rest, breaking the shared left edge. */
    max-width: calc(var(--maxw-page) - 2 * var(--sp-3));
    margin-left: auto;
    margin-right: auto;
}

.lp-eyebrow {
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin: 0 0 var(--sp-05);
}

.lp-section h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    margin: 0 0 var(--sp-1);
}

.lp-section__lede {
    font-size: var(--fs-sm);
    color: var(--c-ink-muted);
    max-width: var(--maxw-prose);
    margin: 0 0 var(--sp-3);
}

/* ----------------------------------------------- collapsible sections (accordion)
   The three long content bands — "What you can file", "How it works" and "What
   comes back out" — are wrapped in a native <details>/<summary> so a reader can
   collapse the ones they are not here for. No JavaScript: the browser owns the
   open/closed state, keyboard operation and the accessibility tree. Each starts
   OPEN (the `open` attribute in the markup) so the page reads in full for anyone
   with CSS or scripting off, and for a first-time visitor.

   The summary carries the SAME eyebrow + <h2> the band showed before, so the
   collapsed state still reads as the section it is. The default disclosure
   triangle is removed and replaced with our own chevron that rotates on open. */
.lp-collapse {
    margin: 0;
}

.lp-collapse__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
    cursor: pointer;
    list-style: none;             /* Firefox marker */
    padding: var(--sp-1) 0;
    border-radius: var(--radius-1, 6px);
}

/* WebKit/Blink render the marker via this pseudo-element; hiding both covers all
   engines so no stray triangle sits beside our chevron. */
.lp-collapse__summary::-webkit-details-marker { display: none; }

.lp-collapse__summary:hover .lp-collapse__head h2 { color: var(--c-primary); }

.lp-collapse__summary:focus-visible {
    outline: var(--focus-ring, 3px solid var(--c-primary));
    outline-offset: 2px;
}

/* The eyebrow + heading stack, exactly as they sat before the wrap. Margins on
   the inner eyebrow/<h2> are already set by .lp-eyebrow / .lp-section h2. */
.lp-collapse__head {
    display: block;
    min-width: 0;
}

/* .lp-eyebrow was a <p> before the wrap; inside the summary it is a <span>, so
   restore its block flow and bottom gap above the heading. */
.lp-collapse__head .lp-eyebrow {
    display: block;
    margin: 0 0 var(--sp-05);
}

.lp-collapse__head h2 { margin-bottom: 0; }

/* The chevron rotates a quarter turn when the <details> is open. Pointing down
   = "open, click to collapse"; the closed state points right. */
.lp-collapse__chev {
    flex: 0 0 auto;
    margin-top: .35em;
    color: var(--c-ink-muted);
    transition: transform .15s ease;
    transform: rotate(-90deg);    /* closed: chevron points right */
}

.lp-collapse[open] .lp-collapse__chev {
    transform: rotate(0deg);      /* open: chevron points down */
}

/* Breathing room between the summary and the revealed content. */
.lp-collapse__body {
    padding-top: var(--sp-2);
}

/* ------------------------------------------------------------- form cards */

.lp-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-2);
}

/*  The left rule is the form's OWN colour, set per card by a --lp-accent
    custom property in the markup. One rule here, four values there. */
.lp-form {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-paper);
    border: var(--border-1);
    border-left: 5px solid var(--lp-accent, var(--c-primary));
    border-radius: var(--radius-md);
    padding: var(--sp-2);
    box-shadow: var(--shadow-1);
    transition: box-shadow .15s ease, transform .15s ease;
}

.lp-form:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.lp-form__chip {
    align-self: flex-start;
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: var(--radius-pill);
    background: var(--lp-accent-bg, var(--c-primary-lighter));
    color: var(--c-ink);
    border: var(--border-1);
    margin-bottom: var(--sp-1);
}

/*  h3 AND h4 BOTH, at the same size, because the heading LEVEL changed without
    the heading changing size. The section now runs h2 (section) > h3 (group
    subhead) > h4 (card), so the card's heading is an h4 — but it is still the
    title of a card and must not shrink relative to the one beside it. Keeping
    the h3 selector as well means an older card that has not been re-levelled
    renders identically instead of falling back to the browser's h3. */
.lp-form h3,
.lp-form h4 {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    margin: 0 0 .35rem;
}

.lp-form p {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-ink-muted);
    margin: 0;
}

/*  The chip and the two-letter form code, on one line. The chip already had
    align-self:flex-start for when it was the only thing in the row; inside this
    flex line that is inert and harmless, so it is left alone. */
.lp-form__top {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    /*  The row may wrap on a narrow card. Without this the code is pushed off
        the right-hand edge of a 15rem column by a long chip label. */
    flex-wrap: wrap;
    margin: 0 0 var(--sp-05);
}

.lp-form__code {
    font-size: var(--fs-4xs);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    color: var(--c-ink-subtle);
    /*  A guard, not decoration: --lp-accent is a per-card custom property and a
        card that ever loses it must not leave the code invisible. */
    margin-left: auto;
}

/*  margin-top:auto pins the status badge to the BOTTOM of the card, so the
    badges line up across a row however long the descriptions above them are.
    This is what makes the row scannable for "which of these can I use today".
    It works because .lp-form is already a flex column. */
.lp-form__status {
    margin: auto 0 0;
    padding-top: var(--sp-15);
}

/* ------------------------------------------------- group subheads + badges */

/*  A GRID ITEM THAT SPANS EVERY COLUMN. The two group headings live INSIDE
    .lp-forms rather than above it so that one grid sizes all nine cards — with
    two separate grids the four-card group and the five-card group compute their
    columns independently and the rows do not line up down the page.

    grid-column: 1 / -1 is what makes a heading take a full row of its own in
    an auto-fit grid whose column count is not known here. */
.lp-subhead {
    grid-column: 1 / -1;
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}

/*  The first subhead needs no space above it — the section lede already
    provides it, and a margin there pushes the whole grid down by a line. */
.lp-subhead:first-child {
    margin-top: 0;
}

/*  THE HONEST-STATUS BADGE. Deliberately NOT the form's accent colour: the
    accent says which form this is, the badge says whether the portal can open
    it, and painting the second in the first would merge two unrelated facts.

    Green and grey rather than green and red. "Coming soon" is not an error and
    must not be coloured like one; grey reads as "not yet", which is what it is.

    REBUILT 3 Sep 2026 — A DOT AND A LABEL, NOT A FILLED PILL.
    It was a green-filled, green-bordered, 13px bold pill for "Available now"
    and a grey-filled, grey-bordered one for "Coming soon". Two problems, and
    the first is why it was changed:

      1. The green slab was the loudest object in the card — louder than the
         form's own name directly above it. Four of the nine cards therefore
         read as though the BADGE were the point, and a row of them turned the
         section into a field of green boxes with the actual form titles
         competing underneath. A status is a footnote to the card, not its
         headline.
      2. It was the only pill on the page with a solid fill, so it did not
         belong to the same family as the duty tags and code boxes beside it.

    Now BOTH states share one treatment — same size, same weight, same spacing,
    no fill, no border — and differ ONLY by the colour of a 7px dot. That is
    what makes the two read as one control with two values instead of two
    unrelated ornaments, and it is what "consistent" means here.

    THE DOT IS REINFORCEMENT AND NEVER THE SIGNAL. The words "Available now"
    and "Coming soon" are in the markup and carry the whole meaning on their
    own, which is what makes it safe to distinguish the states by colour: a
    colour-blind reader, a forced-colours reader and a screen-reader user all
    get the fact from the text. Do not shorten the label to a bare dot. */
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--fs-4xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
    /*  Explicitly zeroed rather than merely omitted: .lp-badge is a <span>, but
        the forced-colours block below still targets this class and sets a
        border-color, and a future edit that reintroduces a border here would
        bring the pill back by accident. */
    padding: 0;
    border: 0;
    background: none;
    /*  ONE colour for both states, so the TEXT is never the thing that changes.
        The state lives in the dot. */
    color: var(--c-ink-muted);
}

/*  A pseudo-element rather than a markup change: the badge text comes from
    CONFIG.UiContent (Forms.Status.Live / Forms.Status.Soon) and an editor
    re-wording it must not be able to break the indicator. flex:none stops the
    dot being squashed when a long translation wraps the label. */
.lp-badge::before {
    content: "";
    flex: none;
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: currentColor;
}

.lp-badge--live::before {
    background: var(--c-form-green);
}

.lp-badge--soon::before {
    background: var(--c-ink-subtle);
}

/*  A closing line under a section, for the qualification a heading cannot
    carry. Capped to the prose measure AND left-aligned, unlike the centred
    lede on the sign-in header — this is a footnote, not a lead. */
.lp-section__foot {
    font-size: var(--fs-2xs);
    line-height: var(--lh-normal);
    color: var(--c-ink-muted);
    max-width: var(--maxw-prose);
    margin: var(--sp-3) 0 0;
}

.lp-section__foot a {
    color: var(--c-primary);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* ------------------------------------------------------------ process flow */

/*  THE FLOW IS A VERTICAL TIMELINE, NOT A ROW OF CARDS, and that is a decision
    about the content rather than about space. The old three-step band was a
    grid of three equal columns, which is right when the steps are peers. These
    five are not peers: each one becomes possible because of the one above it,
    and a row of columns says the opposite — it says "pick one".

    A single column also lets each stage carry the ITEMS it owes, laid out
    horizontally inside it, which is the whole point of the section. In three
    columns there is no room for that.

    counter-reset here, counter-increment on the item, so the numbers come from
    the CSS and cannot disagree with the loop that wrote the list. The <ol> also
    means a reader with stylesheets off still gets numbering from the browser. */
.lp-flow {
    counter-reset: lpstage;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.lp-fstage {
    counter-increment: lpstage;
    position: relative;
    padding-left: 3.5rem;
}

/*  THE CONNECTING LINE. It runs from below one marker to the top of the next,
    which is what makes five separate blocks read as one sequence. Drawn on the
    stage rather than as a single line behind the whole list so it stops
    correctly at the last stage — :last-child removes it below. */
.lp-fstage::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.6rem;
    bottom: calc(var(--sp-4) * -1);
    width: 2px;
    background: var(--c-primary-lighter);
    /*  Behind the marker, and out of the accessibility tree by virtue of being
        a pseudo-element with no content. */
    z-index: 0;
}

.lp-fstage:last-child::after {
    display: none;
}

/*  Same numbered disc as the old .lp-step, kept deliberately: it is the one
    piece of the previous band that was doing its job, and reusing it means the
    page's own visual language does not change under a reader who knows it. */
.lp-fstage::before {
    content: counter(lpstage);
    position: absolute;
    left: 0;
    top: -.15rem;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--c-primary);
    box-shadow: 0 0 0 4px var(--c-primary-lighter);
    /*  Above the connecting line, so the line appears to start beneath the
        disc rather than crossing it. */
    z-index: 1;
}

.lp-fstage__head {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    margin: 0 0 .3rem;
}

.lp-fstage__body {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-ink-muted);
    max-width: var(--maxw-prose);
    margin: 0 0 var(--sp-2);
}

/* ---- the items a stage owes ---------------------------------------------- */

/*  minmax(16rem, 1fr): wide enough for a two-line form name plus its rule, and
    at 1fr the five items in stage four share a row evenly instead of leaving a
    stub. auto-fit collapses to one column on a phone without a second rule. */
.lp-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-15);
    list-style: none;
    margin: 0;
    padding: 0;
}

/*  --lp-duty is set by the [data-duty] rules below and is used by the left rule
    and by the duty tag, so each obligation level is ONE colour decision rather
    than two. The default is the neutral, so an item with an unrecognised duty
    value renders plainly rather than inheriting the wrong meaning. */
.lp-item {
    --lp-duty: var(--c-ink-subtle);
    display: flex;
    flex-direction: column;
    background: var(--c-paper);
    border: var(--border-1);
    border-left: 4px solid var(--lp-duty);
    border-radius: var(--radius-md);
    padding: var(--sp-15);
}

/*  THREE OBLIGATION LEVELS, THREE COLOURS, AND THE CHOICE MATTERS.
    Required is the site's own blue — this is the normal case, not an alarm.
    Conditional is the amber the Yellow form already uses, which is the colour
    the application associates with "it depends what the completion report says".
    Optional is the neutral grey.

    Red is deliberately unused: nothing on this list is a failure, and a red
    rule against "Always required" would read as a warning on a page nobody has
    filed anything from yet. */
.lp-item[data-duty="req"] {
    --lp-duty: var(--c-primary);
}

.lp-item[data-duty="cond"] {
    --lp-duty: var(--c-form-yellow);
}

.lp-item[data-duty="opt"] {
    --lp-duty: var(--c-ink-subtle);
}

.lp-item__top {
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
    flex-wrap: wrap;
    margin: 0 0 .3rem;
}

/*  The two-letter code, boxed. It is boxed rather than merely monospaced
    because it is the thing printed at the top of the paper form, and a reader
    holding that form is scanning for it rather than reading the line. */
.lp-item__code {
    flex: 0 0 auto;
    /*  --fs-4xs, matching .lp-badge and .lp-tag: these three are the page's
        small-label family and a reader should not be able to tell them apart by
        size. See the token's own note — 12px is for scanned labels only. */
    font-size: var(--fs-4xs);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    padding: .1rem .4rem;
    border: 1px solid var(--lp-duty);
    border-radius: var(--radius-sm);
    color: var(--lp-duty);
    background: var(--c-paper);
}

.lp-item__name {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

.lp-item__rule {
    font-size: var(--fs-3xs);
    line-height: var(--lh-snug);
    color: var(--c-ink-muted);
    margin: 0;
}

/*  margin-top:auto again, so the tags sit on the bottom edge of every item in a
    row whatever the length of the rule above them. Reading a row of items for
    "which of these do I actually owe" is then one horizontal sweep. */
.lp-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-05);
    margin: auto 0 0;
    padding-top: var(--sp-1);
}

.lp-tag {
    font-size: var(--fs-4xs);
    font-weight: var(--fw-semibold);
    padding: .1rem .45rem;
    border-radius: var(--radius-pill);
    border: 1px solid currentColor;
    /*  A tag is not a sentence; a two-word label must not break across lines
        inside its own pill. */
    white-space: nowrap;
}

.lp-tag--duty {
    color: var(--lp-duty);
}

/*  WHOSE JOB IT IS, in the neutral. It is intentionally quieter than the duty
    tag: a driller reading this page owes twelve of the thirteen and does not
    need it shouted twelve times — what they need is to see the one that is the
    county's. */
.lp-tag--whose {
    color: var(--c-ink-subtle);
    font-weight: var(--fw-normal);
}

/* --------------------------------------------------------- audience cards */

.lp-audience {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--sp-2);
}

.lp-aud {
    display: flex;
    flex-direction: column;
    background: var(--c-paper);
    border: var(--border-1);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-2);
    box-shadow: var(--shadow-1);
}

.lp-aud__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--c-primary-lighter);
    color: var(--c-primary-darker);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-15);
}

.lp-aud h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    margin: 0 0 .4rem;
}

.lp-aud p {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--c-ink-muted);
    margin: 0 0 var(--sp-2);
    /* push the link to the bottom so a row of cards has aligned links even
       when the copy runs to different lengths */
    flex: 1 1 auto;
}

.lp-aud__link {
    align-self: flex-start;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-primary-dark);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.lp-aud__link:hover {
    color: var(--c-primary-darker);
    border-bottom-color: currentColor;
}

.lp-aud__link:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------- help band */

.lp-help {
    max-width: var(--maxw-page);
    margin: 0 auto var(--sp-5);
    padding: var(--sp-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    background: var(--c-primary-lighter);
    border: 1px solid var(--c-primary-light);
    border-radius: var(--radius-lg);
}

.lp-help h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    margin: 0 0 .3rem;
    color: var(--c-primary-darker);
}

.lp-help p {
    font-size: var(--fs-xs);
    color: var(--c-ink-muted);
    margin: 0;
    max-width: 56ch;
}

.lp-help__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

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

@media (max-width: 40rem) {
    .lp-hero {
        padding: var(--sp-4) var(--sp-2) var(--sp-4);
    }

    .lp-hero__brand {
        flex-wrap: wrap;
    }

    .lp-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-btn {
        justify-content: center;
    }

    .lp-section {
        padding: var(--sp-4) var(--sp-2);
    }

    .lp-help {
        flex-direction: column;
        align-items: flex-start;
    }

    /*  The flow's numbered disc keeps its size — it is a touch-sized target and
        the one piece of the timeline that must not shrink — but the indent it
        needs comes down, because on a 375px screen a 3.5rem gutter costs a
        sixth of the readable width and pushes every item card into a narrow
        column of its own. The connector moves with it. */
    .lp-fstage {
        padding-left: 3rem;
    }

    .lp-fstage::after {
        left: 1.2rem;
    }

    /*  The item grid is already auto-fit and collapses on its own; only the gap
        is tightened, so five stacked items do not run the stage on for a
        screen and a half. */
    .lp-items {
        gap: var(--sp-1);
    }

    /*  A 13px FLOOR ON THE ONE PARAGRAPH THAT CARRIES A REGULATORY RULE, and
        the only place on this page where a size is written in px.

        Measured, not assumed: mdwds.min.css sets the ROOT font-size to
        .875rem below 30em, so on a 390px phone every rem-based size on every
        page shrinks by a further 8/7. --fs-3xs is 13px on the desktop and lands
        at 11.375px here. That is USWDS's own decision and it applies uniformly,
        so the page stays internally consistent and nothing is out of
        proportion — but 11.4px is where "COMAR 26.04.04.29, within 45 days"
        stops being read and starts being skipped, and this is the text a
        driller is on this page for.

        px rather than a bigger token because a token would shrink again with
        the root; the point is a floor that does NOT scale. */
    .lp-item__rule {
        font-size: 13px;
    }

    /*  AND A 12px FLOOR ON THE SMALL-LABEL FAMILY, for the same reason and by
        the same mechanism. --fs-4xs is 12px on the desktop and the root step
        lands it at 10.5px here, which is past scannable and into squinting —
        and unlike the rule text above, these are the words that tell a driller
        whether a form can be opened at all ("Available now") and whether they
        owe it ("Required").

        This is a FLOOR, not a size change: 12px is exactly what the token
        already resolves to above 480px, so the chips stop shrinking rather
        than growing, and the desktop layout is untouched. All four selectors
        together, because the whole point of the family is that a reader cannot
        tell them apart by size — flooring one and not the others would
        reintroduce the inconsistency this change removed. */
    .lp-badge,
    .lp-tag,
    .lp-form__code,
    .lp-item__code {
        font-size: 12px;
    }
}

/*  A visitor who has asked the operating system for less motion gets none.
    The lift-on-hover is decoration; the information is in the text.  */
@media (prefers-reduced-motion: reduce) {

    .lp-btn,
    .lp-form {
        transition: none;
    }

    .lp-btn--primary:hover,
    .lp-form:hover {
        transform: none;
    }
}

/*  FORCED COLOURS / high-contrast mode. The hero's contrast comes from a
    background gradient, and a gradient is discarded in forced-colours mode,
    which would leave white text on the canvas colour. Opt the hero out and
    let the UA repaint it. */
@media (forced-colors: active) {
    .lp-hero {
        background: Canvas;
        color: CanvasText;
        border-bottom: 1px solid CanvasText;
    }

    .lp-hero h1,
    .lp-hero__lede,
    .lp-hero__agency,
    .lp-stat__n,
    .lp-stat__t {
        color: CanvasText;
    }

    .lp-hero__grid,
    .lp-hero::before,
    .lp-hero::after {
        display: none;
    }

    .lp-btn--primary,
    .lp-btn--outline {
        border-color: CanvasText;
        color: LinkText;
        background: Canvas;
    }

    /*  THE FLOW LOSES ITS COLOUR CODING HERE, AND MUST NOT LOSE ITS MEANING.
        In forced-colours mode the user agent replaces every colour with one of
        its own, so the blue / amber / grey distinction between required,
        conditional and optional simply disappears. That is acceptable ONLY
        because the distinction is also written out in words in the duty tag
        beside each item — the colour was never the only carrier. These rules
        just make sure the borders and the connecting line survive as SHAPE:
        `background: var(--c-primary-lighter)` on a 2px pseudo-element is
        discarded outright and would leave the timeline as five floating
        blocks. */
    .lp-fstage::after {
        background: CanvasText;
    }

    .lp-item,
    .lp-item__code,
    .lp-badge,
    .lp-tag {
        border-color: CanvasText;
        color: CanvasText;
        background: Canvas;
    }

    /*  THE STATUS DOT MUST SURVIVE AS A SHAPE. The rule above paints .lp-badge
        with `background: Canvas`, and the dot is a pseudo-element whose own
        background is an author colour — exactly what forced-colours discards.
        Without this line the dot vanishes and the two badge states become
        typographically identical.

        BOTH states get the same CanvasText dot, which is deliberate and is the
        same reasoning as the flow's duty colours above: the user agent has one
        foreground colour and green-vs-grey cannot survive it. Nothing is lost,
        because the distinction was never carried by the colour — "Available
        now" and "Coming soon" are words in the markup. The dot's job here is
        just to keep the badge looking like a badge. */
    .lp-badge::before {
        background: CanvasText;
    }
}

/*  PRINT. A permit applicant printing this page wants the addresses and the
    steps, not a full-bleed colour band. */
@media print {

    .lp-hero {
        background: none;
        color: #000;
        padding: 0 0 1rem;
    }

    .lp-hero h1,
    .lp-hero__lede,
    .lp-hero__agency,
    .lp-stat__n,
    .lp-stat__t {
        color: #000;
    }

    .lp-hero__grid,
    .lp-cta,
    .lp-help__actions {
        display: none;
    }

    .lp-form,
    .lp-aud,
    .lp-item {
        box-shadow: none;
        break-inside: avoid;
    }

    /*  A driller printing this page is printing it FOR the flow — it is the
        checklist of what a package owes. Keeping a stage and the items it owes
        on one sheet is the whole value of the printout; a stage heading orphaned
        at the foot of a page with its items over the fold is worse than a
        slightly emptier page. */
    .lp-fstage {
        break-inside: avoid;
    }

    /*  The sign-in lanes and the two colour bands are not printable content.
        Nobody types a password off paper. */
    .lp-section--sunken {
        background: none;
    }
}