@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

html, body {
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* The brand colours the page styling below draws on directly (docs/design-system/foundations.md).
   The leaf - two opposite corners rounded, two square - is the shape the brand's own marks use, and
   the one the invitation email gives its header and boxes, so the pages a customer reaches from it
   carry on in the same voice. */
:root {
    --keima-forest: #223313;
    --keima-growth: #DEF9C7;
    --keima-growth-soft: #D1ECB8;
    --keima-growth-sunken: #E7F5DC;
    --keima-grass: #89CC4E;
    --keima-tint: #F3F9EE;
    --keima-line: #CFE3BF;
    --keima-muted: #4A5A42;
    --keima-leaf-sm: 14px 0 14px 0;
    --keima-leaf-md: 16px 0 16px 0;
    --keima-leaf-lg: 24px 0 24px 0;
}

/* Every filled call to action is a Growth leaf with Forest text, flipping to Forest with Growth
   text under the pointer or keyboard focus. Not Forest at rest: with the header and footer both
   Forest, a Forest button read as one more block of the page rather than as the thing to press.
   The Forest border keeps the pale leaf from fading into the near-white page. */
.mud-button-filled.mud-button-filled-primary {
    border: 1.5px solid var(--keima-forest);
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    transition: background-color 150ms, color 150ms;
    box-shadow: none;
}

/* The leaf shape and size are for text buttons only. MudBlazor gives a filled icon button the same
   classes, and the round "add billing details" button keeps its own circle from its markup. */
.mud-button-filled.mud-button-filled-primary:not(.mud-icon-button) {
    min-height: 48px;
    padding-left: 28px;
    padding-right: 28px;
    border-radius: var(--keima-leaf-lg);
}

.mud-button-filled.mud-button-filled-primary:focus-visible {
    background-color: var(--keima-forest);
    color: var(--keima-growth);
}

/* Only where a pointer can really hover: a touch screen keeps :hover after a tap, which left the
   button Forest as if still held down while the next page loaded. */
@media (hover: hover) {
    .mud-button-filled.mud-button-filled-primary:hover {
        background-color: var(--keima-forest);
        color: var(--keima-growth);
    }
}

.mud-button-filled.mud-button-filled-primary:disabled {
    border-color: transparent;
}

.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-default {
    border-radius: var(--keima-leaf-md);
}

.mud-dialog {
    border-radius: var(--keima-leaf-lg);
}

.mud-dialog .mud-dialog-title {
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-weight: 800;
    color: var(--keima-forest);
}

/* Grass focus ring on keyboard navigation (design-system foundations: accent = focus). */
:focus-visible {
    outline: 2px solid #89CC4E;
    outline-offset: 2px;
}

h1:focus {
    outline: none;
}

/* Form validation states use the design-system status colours: darkened Grass
   for valid, brand error red for invalid. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #4F7A28;
}

.invalid {
    outline: 1px solid #D2362C;
}

.validation-message {
    color: #D2362C;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


/* One installation row inside a FormSection: a bordered panel with a tinted, numbered
   header. A divider between rows was not enough — a row is several steps tall and looks
   much like its neighbour, so the list read as one long block of fields. */
.keima-installation-row {
    overflow: hidden;
    border: 1px solid var(--keima-growth-sunken);
    border-radius: 10px;
    margin-bottom: 16px;
    background-color: #FFFFFF;
}

.keima-installation-row-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--keima-tint);
    border-bottom: 1px solid var(--keima-growth-sunken);
    color: var(--keima-forest);
}

/* The address or meter id the row currently holds. It gives way before the label does,
   since it is the part that can be read from the fields below. */
.keima-installation-row-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.keima-installation-row-body {
    padding: 0 12px 8px;
}


/* The "private or business" choice: two cards that say what each option will ask of the
   participant. The options carry the weight themselves - what they replaced was a filled
   banner above them telling the participant to look down at them, which shouted at a form
   that needs to look trustworthy.

   MudRadio puts its Class on the input-control wrapper rather than on the label, so the
   card is that wrapper and the label inside it is only stretched to fill it. */
.keima-choice-group .mud-radio-group {
    display: flex;
    width: 100%;
    gap: 12px;
}

/* Half the row each, so the pair fills the form's width and reads as one control rather
   than as two boxes that happen to sit side by side. The class is qualified by the group
   because MudBlazor pins its own flex: none on these wrappers. */
.keima-choice-group .keima-choice-tile {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--keima-line);
    border-radius: var(--keima-leaf-md);
    background-color: #FFFFFF;
    transition: border-color 150ms, background-color 150ms;
}

/* Side by side is too tight for two cards on a phone. */
@media (max-width: 599px) {
    .keima-choice-group .mud-radio-group {
        flex-direction: column;
    }
}

.keima-choice-tile .mud-radio {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px;
    align-items: center;
}

/* MudRadio's content sits in a <p> beside the (hidden) circle; without this it is only
   as wide as its text and the card's tick drifts in from the right edge. */
.keima-choice-tile .mud-radio > .mud-typography {
    width: 100%;
}

/* The card's own border and tint say which option is picked, so the radio's circle would
   be a second marker for the same thing. It stays in the DOM for the keyboard and for
   screen readers. */
.keima-choice-tile .mud-radio .mud-icon-button {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.keima-choice-group .keima-choice-tile:hover {
    border-color: var(--mud-palette-primary);
}

/* Until a choice is made both cards are outlined in the brand colour, which is the whole
   attention-drawing device. The picked one then takes a heavier border and a faint tint,
   and the other falls back to a quiet grey. */
.keima-choice-group-unset .keima-choice-tile {
    border-color: var(--mud-palette-primary);
}

.keima-choice-group .keima-choice-tile-selected {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    background-color: var(--keima-tint);
}

/* The 2px border on the picked card would otherwise shift its content by a pixel. */
.keima-choice-tile-selected .mud-radio {
    padding: 15px;
}

/* Spans, because MudRadio wraps its content in a <p> and a <p> may not contain divs.
   The icon sits to the left of the wording rather than above it, which keeps the pair of
   cards short enough to read as one line of the form. */
.keima-choice-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.keima-choice-card-icon {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}

.keima-choice-card-text {
    display: block;
    min-width: 0;
}

.keima-choice-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.keima-choice-card-description {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}


/* What is left to do before the form can be sent, in the warning colour: it is not an
   error - nothing is wrong with what has been entered - but it is the thing standing
   between the participant and sending the form, so it should catch the eye. The fields
   themselves still carry their own errors. */
.keima-submit-blockers {
    padding: 16px;
    border: 1px solid var(--mud-palette-warning);
    border-radius: var(--mud-default-borderradius);
    background-color: rgba(var(--mud-palette-warning-rgb), 0.08);
    color: var(--mud-palette-warning-darken);
}

.keima-submit-blockers ul {
    margin: 8px 0 0;
    padding-left: 1.5rem;
}

.keima-submit-blockers li {
    padding: 2px 0;
    font-size: 0.875rem;
    line-height: 1.4;
}


/* The block introducing the group above the signup form: the group's own logo on a plain white
   bar, then the Forest band with what the group is offering and where. The logo sits outside the
   band because group logos come in every colour, and a dark one would vanish on Forest; it is
   shown at its own shape, since a logo is the group's to shape, not ours. Keima's logo is not
   shown - Keima is sometimes the group and sometimes only runs the signup for one. */
.keima-masthead {
    margin-bottom: 32px;
}

.keima-masthead-logo-bar {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--keima-growth-sunken);
}

/* Bounded on both axes: group logos arrive at whatever size and shape they were uploaded at, and
   the box keeps a wide one from dwarfing the page. The height allowance is what a square logo gets
   to use - Sydstevns Energi's is 161x161 - while a wide wordmark runs out of width first. 72px
   left logos with small lettering (Skårup's) unreadable; 128px is being checked against each
   group's logo. */
.keima-masthead-logo {
    display: block;
    width: auto;
    max-width: 220px;
    max-height: 128px;
}

/* Group names run long - "Bliv andelshaver i Ærø Borgerenergifællesskab A.M.B.A." - so the size
   gives way on narrow screens (via .keima-hero-title). */
.keima-masthead-title {
    overflow-wrap: anywhere;
}

.keima-masthead-subtitle {
    font-size: 1.125rem;
    font-weight: 500;
}

.keima-masthead-description {
    max-width: 62ch;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--keima-growth-soft);
    /* The stored copy carries its own paragraph breaks. */
    white-space: pre-line;
}

.keima-masthead-postal-codes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.keima-masthead-postal-codes-label {
    flex-basis: 100%;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--keima-growth);
}

/* The line a reader checks themselves against, so it is the one thing in the band set in Growth
   leaves rather than prose. */
.keima-postal-code {
    padding: 4px 12px;
    border-radius: 10px 0 10px 0;
    background-color: var(--keima-growth);
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--keima-forest);
}


/* An aside on the form: something worth knowing before filling a section in. Tinted in the
   theme's info blue - enough to be read as a note rather than as more form furniture, and
   distinct from both the brand green around it and the warning colour that means something
   is actually outstanding. */
.keima-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.4);
    border-radius: var(--mud-default-borderradius);
    background-color: rgba(var(--mud-palette-info-rgb), 0.08);
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.keima-note-icon {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--mud-palette-info);
}


/* The add-a-billing-group button, shown inside a sentence that refers to it. Sized to the
   text rather than to the real button: at full size it would push the lines around it
   apart. line-height: 0 keeps the line box the text's own height. */
.keima-note-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 2px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid var(--keima-forest);
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    line-height: 1;
    vertical-align: middle;
}

.keima-note-button .mud-icon-root {
    width: 13px;
    height: 13px;
    font-size: 13px;
}


/* One step of a form (FormSection): a numbered leaf on a rail, the heading beside it, and the
   step's fields under the heading. The rail runs on to the next step, so a long form reads as one
   sequence to work down rather than a stack of unrelated cards. */
.keima-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 16px;
}

.keima-step-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keima-step-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--keima-leaf-md);
    background-color: var(--keima-forest);
    color: var(--keima-growth);
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 1.1875rem;
    font-weight: 800;
}

.keima-step-line {
    flex: 1 1 auto;
    width: 2px;
    margin-top: 6px;
    background-color: var(--keima-line);
}

.keima-step-last .keima-step-line {
    display: none;
}

/* Each step's heading and fields sit on a white card beside the rail, as the sections did before
   the restyle: the card tells one step from the next, and the rail between the cards still reads
   as the sequence. The margin below a card is the gap the rail runs through to the next number. */
.keima-step-body {
    min-width: 0;
    margin-bottom: 24px;
    padding: 16px 20px 20px;
    border: 1px solid #E2E5DE;
    border-radius: 12px;
    background-color: #FFFFFF;
}

.keima-step-last .keima-step-body {
    margin-bottom: 8px;
}

.keima-step-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-height: 40px;
    margin-bottom: 8px;
}

.keima-step-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--keima-forest);
}

.keima-step-actions {
    margin-left: auto;
}

.keima-step-subtitle {
    margin: -4px 0 12px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

/* A phone has no width to spare for the rail beside the fields. */
@media (max-width: 599px) {
    .keima-step {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 12px;
    }

    .keima-step-marker {
        width: 34px;
        height: 34px;
        border-radius: var(--keima-leaf-sm);
        font-size: 1rem;
    }

    .keima-step-header {
        min-height: 34px;
    }

    .keima-step-body {
        padding: 12px 14px 16px;
    }
}


/* The line between a block's billing details and the addresses they pay for. */
.keima-section-divider {
    border-color: var(--keima-line);
}


/* One document to accept. Outlined in Forest on white until it is ticked, filled Growth once it
   is: with several documents in a row, what is left to accept should be visible without reading
   each checkbox, and an outlined row reads as something still to fill in. A faint grey resting
   state was too easy to pass over as already done.

   The accepted row keeps a transparent border of the same width, so ticking does not shift it. */
.keima-term {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 4px 12px;
    margin-bottom: 8px;
    box-sizing: border-box;
    border: 1.5px solid var(--keima-forest);
    border-radius: var(--keima-leaf-md);
    background-color: #FFFFFF;
    transition: background-color 150ms, border-color 150ms;
}

.keima-term-accepted {
    border-color: transparent;
    background-color: var(--keima-growth);
}

/* The checkbox brings its own padding on top of the row's. */
.keima-term .mud-checkbox {
    margin-left: -8px;
}


/* The Forest band a page opens with: its title, a line under it, and whatever the page needs the
   reader to see before anything else. The one rounded corner is the leaf shape cut in half, the way
   the invitation email's header is. */
.keima-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px 32px;
    border-radius: 0 0 48px 0;
    background-color: var(--keima-forest);
    color: var(--keima-growth-soft);
}

.keima-hero-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--keima-growth);
}

.keima-hero-lead {
    max-width: 62ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--keima-growth-soft);
}

/* A short fact to check against - the customer number, a postcode - set apart from the prose. */
.keima-hero-chip {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: var(--keima-leaf-sm);
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    font-size: 0.875rem;
}

/* The title of a page that has reached an outcome carries a badge saying which one. */
.keima-hero-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.keima-hero-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 18px 0 18px 0;
    background-color: var(--keima-grass);
    color: var(--keima-forest);
}

.keima-hero-badge-warning {
    background-color: #FCE7C8;
    color: #7A4A06;
}

/* Its own size, not the band's width: as a flex item in the band's column it would otherwise be
   stretched across the whole band while its height stayed capped, distorting it on a wide screen. */
.keima-hero-illustration {
    display: block;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 170px;
}

/* The body of a page that opens with the band: the band's own left edge, a little air below it. */
.keima-page-body {
    padding: 28px 24px 8px;
}

/* An aside that closes a page: a Growth leaf with an illustration in its corner, as the email's
   customer-number box is. */
.keima-closing-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: end;
    gap: 12px;
    margin-top: 24px;
    padding: 18px 20px 14px;
    border-radius: 32px 0 32px 0;
    background-color: var(--keima-growth);
    color: var(--keima-forest);
}

.keima-closing-note p {
    margin: 0 0 6px;
}

.keima-closing-note img {
    display: block;
    width: 120px;
    height: auto;
}

@media (max-width: 599px) {
    .keima-hero {
        padding: 16px 20px 28px;
    }

    .keima-page-body {
        padding: 24px 16px 8px;
    }
}


/* The frame for pages Keima sends a customer to directly (the CPR backfill and its MitID return):
   the band with Keima's logo at its top, the page, and a Forest footer to close it. One column the
   width of the form, so the logo, the page and the footer share a left edge. */
.keima-brand-frame {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 760px;
    margin: 0 auto;
}

.keima-brand-frame > main {
    flex: 1 0 auto;
}

/* The logo file is trimmed to the mark, so its height here is the height the mark reads at. */
.keima-brand-logo-link {
    display: inline-flex;
    align-self: flex-start;
    line-height: 0;
}

.keima-brand-logo {
    height: 36px;
    width: auto;
}

/* Quiet by design: the form is the point of the page, and this is what a reader looks for only
   when something has gone wrong or they are unsure the email was genuine. */
.keima-brand-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
    padding: 20px 24px;
    border-radius: 32px 0 0 0;
    background-color: var(--keima-forest);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--keima-growth-soft);
}

.keima-brand-footer a {
    font-weight: 600;
    color: var(--keima-growth);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.keima-brand-footer a:hover {
    color: #FFFFFF;
}

.keima-brand-footer-separator {
    color: var(--keima-growth-soft);
}

@media (max-width: 599px) {
    .keima-brand-logo {
        height: 30px;
    }
}


/* Where a process has got to (StepProgress): each step a leaf marker - ticked when done, numbered
   when still to come, spinning while it runs, an exclamation mark when it needs the reader - joined
   by a rail that turns Grass once the step above it is done. */
.keima-progress {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.keima-progress-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
}

.keima-progress-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keima-progress-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: var(--keima-leaf-sm);
    background-color: var(--keima-growth);
    color: var(--keima-forest);
    font-family: 'Bricolage Grotesque', 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

.keima-progress-done .keima-progress-marker,
.keima-progress-current .keima-progress-marker {
    background-color: var(--keima-forest);
    color: var(--keima-growth);
}

.keima-progress-attention .keima-progress-marker {
    background-color: #FCE7C8;
    color: #7A4A06;
}

.keima-progress-line {
    flex: 1 1 auto;
    width: 2px;
    min-height: 16px;
    background-color: var(--keima-line);
}

.keima-progress-done .keima-progress-line {
    background-color: var(--keima-grass);
}

.keima-progress-step:last-child .keima-progress-line {
    display: none;
}

.keima-progress-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 14px;
}

.keima-progress-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--keima-forest);
}

.keima-progress-body {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.keima-progress-spinner {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2.5px solid var(--keima-line);
    border-top-color: var(--keima-forest);
    border-radius: 50%;
    animation: keima-spin 0.9s linear infinite;
}

@keyframes keima-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .keima-progress-spinner {
        animation: none;
    }
}


/* One CUBS agreement in the backfill's Betalingsservice step: what it is on top, and the choice
   it offers - or the note that it needs none - on a tinted strip below. */
.agreement-card {
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--keima-growth-sunken);
    border-radius: 10px;
    background-color: #FFFFFF;
}

.agreement-card-details {
    padding: 14px 16px;
}

.agreement-card-choice {
    padding: 4px 16px 12px;
    background-color: var(--keima-tint);
}

.agreement-card-in-place {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 14px;
    font-size: 0.875rem;
    color: var(--keima-forest);
}

/* A last step's lead-in sentence with an illustration beside it: the pylons that close both the
   backfill and the signup form. */
.keima-step-illustrated {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: 12px;
}

.keima-step-illustration {
    display: block;
    width: 120px;
    height: auto;
}


/* On a wide screen the sign-up band has room beside its text, so the houses move to its bottom
   right corner, larger, and the text keeps clear of them; stacked under the title they left most
   of the band empty. */
@media (min-width: 900px) {
    .keima-masthead .keima-hero {
        position: relative;
        min-height: 240px;
    }

    .keima-masthead .keima-hero > :not(.keima-hero-illustration) {
        max-width: calc(100% - 360px);
    }

    .keima-masthead .keima-hero-illustration {
        position: absolute;
        right: 40px;
        bottom: 32px;
        max-width: 320px;
        max-height: 220px;
    }
}


/* A page's one call to action: the full width of a phone, where it is the easiest thing to hit,
   but sized to its words and centred on anything wider - stretched across a desktop column it
   stops reading as a button. */
.keima-cta {
    width: 100%;
}

@media (min-width: 600px) {
    .keima-cta {
        display: flex;
        width: auto;
        min-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* Read by screen readers, not shown: for state the page otherwise carries only in colour or icons. */
.keima-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}