:root {
    --gold: #f7bd01;
    --gold-dark: #d9a600;
    --ink: #000;
    --night: #111;
    /* The header and footer bars, set off from the black bands they meet. */
    --chrome: #222;
    --paper: #fff;
    --muted: #b9b9b9;
    --radius: 14px;
    --wrap: 1120px;
    /* A line of text, and the wider compare blocks (tables, callouts, FAQ). */
    --measure: 760px;
    --measure-wide: 860px;
    /* A card or field on the black page; raised is its hover, sunk a well
     behind cards; ours marks our row in a table; warn backs a risk. */
    --surface: #141414;
    --surface-raised: #2a2a2a;
    --surface-sunk: #0a0a0a;
    --surface-ours: #15120a;
    --surface-warn: #1c1606;
    font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-size: 1.0625rem;
    line-height: 1.55;
}

img,
video,
iframe {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

[hidden] {
    display: none !important;
}

/* A store's card in a state it is not in yet, or no longer: static/js/status.js
   moves the class at the store's opening instant. */
.is-off {
    display: none !important;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    line-height: 1.12;
    margin: 0 0 .6em;
    font-weight: 800;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
}

h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

h3 {
    font-size: 1.35rem;
}

p {
    margin: 0 0 1em;
}

.gold {
    color: var(--gold);
}

/* A page has one content column, chosen in its template's `column`; blocks
   inside a .wrap fill it rather than capping themselves (check_mobile.py). */
.wrap {
    width: min(var(--column, var(--wrap)), 100% - 2.5rem);
    margin-inline: auto;
}

.column-measure {
    --column: var(--measure);
}

.column-measure-wide {
    --column: var(--measure-wide);
}

.center {
    text-align: center;
}

.lead {
    font-size: 1.2rem;
}

.lead-strong {
    font-weight: 700;
    font-size: 1.15rem;
}

.fine {
    font-size: .85rem;
    opacity: .85;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--gold);
    color: var(--ink);
    padding: .6rem 1rem;
}

.skip:focus {
    left: 1rem;
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    padding: .7em 1.5em;
    border-radius: 999px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s, transform .15s;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: .6;
    cursor: progress;
    transform: none;
}

.btn-lg {
    font-size: 1.15rem;
    padding: .8em 1.9em;
}

.btn-gold {
    background: var(--gold);
    color: var(--ink);
}

.btn-gold:hover {
    background: var(--gold-dark);
}

.btn-dark {
    background: var(--ink);
    color: var(--paper);
}

.btn-dark:hover {
    background: var(--surface-raised);
}

.btn-outline {
    border-color: var(--gold);
    color: var(--gold);
    background: transparent;
}

.btn-outline:hover {
    background: var(--gold);
    color: var(--ink);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--chrome);
}

.header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 72px;
}

.brand {
    display: flex;
    align-items: center;
    min-height: 44px;
}

.brand img {
    width: 168px;
    height: auto;
}

.nav-wide {
    margin-left: auto;
}

.nav-wide ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.4rem;
}

.nav-menu {
    display: none;
}

.nav-menu>summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.nav-menu>summary::-webkit-details-marker {
    display: none;
}

.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header nav a {
    text-decoration: none;
    font-weight: 600;
}

.site-header nav a:hover,
.site-header nav a[aria-current] {
    color: var(--gold);
}

.burger,
.burger::before,
.burger::after {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--paper);
    position: relative;
    transition: transform .2s;
}

.burger::before,
.burger::after {
    content: "";
    position: absolute;
    left: 0;
}

.burger::before {
    top: -7px;
}

.burger::after {
    top: 7px;
}

.nav-menu[open] .burger {
    background: transparent;
}

.nav-menu[open] .burger::before {
    transform: translateY(7px) rotate(45deg);
}

.nav-menu[open] .burger::after {
    transform: translateY(-7px) rotate(-45deg);
}

.header-cta {
    padding: .55em 1.3em;
}

/* Wherever the header can show Order now, its button is as wide as the wider
   of Order now and Apply on every page, so the nav does not shift on the
   franchise pages (Nik, 2026-11-04). On a phone Apply stands alone. */
@media (min-width: 701px) {
    .header-cta {
        display: inline-grid;
        justify-items: center;
    }

    .header-cta>span,
    .header-cta::after {
        grid-area: 1 / 1;
    }

    .header-cta::after {
        content: attr(data-width-of);
        visibility: hidden;
    }
}

@media (max-width: 940px) {
    .header-apply {
        margin-left: auto;
    }

    .header-row:has(.header-apply) .nav-menu {
        margin-left: 0;
    }

    .nav-wide {
        display: none;
    }

    .nav-menu {
        display: block;
        order: 3;
    }

    .nav-menu-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--chrome);
        border-bottom: 1px solid #333;
        padding: .5rem 1.25rem 1.25rem;
    }

    .nav-menu li a {
        display: block;
        padding: .8rem 0;
        border-bottom: 1px solid #1f1f1f;
        font-size: 1.15rem;
    }

    .header-order {
        margin-left: auto;
    }

    .brand img {
        width: 140px;
    }
}

@media (max-width: 700px) {
    .nav-menu {
        margin-left: auto;
    }
}

/* /order has no Order Now button of its own, so the menu takes its place. */
@media (max-width: 940px) {
    .nav-menu:last-child {
        margin-left: auto;
    }
}

/* On a phone the header's Order now is the menu's first item, a full-width
   pill; on /order it is outlined, as the current page. Home also has the
   fixed button below. */
.menu-order {
    display: none;
}

.sticky-order {
    display: none;
}

@media (max-width: 700px) {
    .menu-order {
        display: flex;
        width: 100%;
        margin: .5rem 0 .4rem;
        font-size: 1.1rem;
        padding: .85em;
    }

    .menu-order[aria-current],
    .menu-order[aria-current]:hover {
        background: transparent;
        border-color: var(--gold);
        color: var(--gold);
        transform: none;
    }

    .sticky-order {
        display: flex;
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        z-index: 40;
        box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
        font-size: 1.1rem;
        padding: .85em;
        transition: transform .2s ease-out, opacity .2s ease-out;
    }

    .header-order {
        display: none;
    }
}

/* Home's hero has its own Order now button, so the fixed one stays off screen
   until sticky-order.js sees that button leave the viewport (Nik, 2026-11-03:
   "it throws me off that in the mobile version there's like two order links").
   Hidden from the first paint, so it never shows and then vanishes. Without
   scripts the fixed button stays. The footer keeps its room for it: by the
   bottom of the page the hero button is long gone, so the fixed one is back. */
@media (max-width: 700px) and (scripting: enabled) {
    body:has([data-hero-order]) .sticky-order:not(.is-shown) {
        transform: translateY(calc(100% + 2rem));
        opacity: 0;
        visibility: hidden;
        transition: transform .2s ease-in, opacity .2s ease-in, visibility 0s .2s;
    }
}

/* Heroes */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--night);
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-franchising {
    min-height: min(78vh, 720px);
    display: flex;
    align-items: center;
}

.hero-franchising::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .15));
    z-index: -1;
}

.hero-inner {
    padding-block: 4rem;
}

.hero-tag {
    font-weight: 700;
    font-size: 1.3rem;
}

.hero-franchising h1 {
    font-size: clamp(2.4rem, 7vw, 5.2rem);
}

.hero-contact {
    height: clamp(180px, 32vw, 380px);
}

/* Photo hero (home, _photo_hero.html). The photo is never tinted;
   the copy sits in a 50% black box with square corners and nothing else
   (Nik, 2026-11-02: "increase the surface area of the black box. Don't round
   the corners after all", then "Make it 50% opacity"). */
/* The photo stays centered (object-fit's default 50% 50%), so the food stays
   whole; check_mobile.py holds hero_focal.yaml's box inside the crop. Past
   about 2100px wide a 720px hero would crop the slate, so it grows with the
   width there. */
.hero-photo {
    min-height: min(78vh, max(720px, 34vw));
    display: flex;
    align-items: center;
}

/* The box's size and place, the only values to change for it
   (`uv run python tune_hero.py` previews them live). The box is as wide as
   its text plus the side padding, and as tall as its text plus the top and
   bottom padding. On desktop its center sits at --hero-box-x from the photo's
   left edge: a share of the photo's width, which scales with the photo where
   the page column would not, plus a fixed rem offset, the same distance at
   every width (Nik set 50% + 1.85rem in the tuner, 2026-11-03);
   --hero-box-y shifts it down from the middle. At 860px and under it
   sits --hero-box-phone-gap above the photo's bottom edge, and at 700px and
   under it is --hero-box-phone-w of the column, centered. */
.hero-photo {
    --hero-box-x: calc(50% + 1.85rem);
    --hero-box-y: -0.95rem;
    --hero-box-pad-x: 7.7rem;
    --hero-box-pad-top: 1.85rem;
    --hero-box-pad-bottom: 2.3rem;
    --hero-box-phone-w: 100%;
    --hero-box-phone-gap: 12.85rem;
    --hero-box-phone-pad-x: 3.7rem;
    --hero-box-phone-pad-top: 2rem;
    --hero-box-phone-pad-bottom: 2.2rem;
}

.hero-card {
    width: fit-content;
    max-width: 100%;
    padding: var(--hero-box-pad-top) var(--hero-box-pad-x) var(--hero-box-pad-bottom);
    border-radius: 0;
    background: rgba(0, 0, 0, .5);
    text-align: center;
}

@media (min-width: 861px) {
    .hero-photo .hero-inner {
        width: auto;
        margin-inline: var(--hero-box-x) 0;
        transform: translate(-50%, var(--hero-box-y));
    }
}

.hero-card :is(h1, p) {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 0 16px rgba(0, 0, 0, .45);
}

/* Type matches Toast's doner.haus hero (Nik, 2026-11-02: "The font, the
   boldness, all that looks way better"): Toast set Effra 700 at 42px on a
   390 phone and 48px on desktop, with a 24.5–28px subline. Figtree at
   2.5–2.9rem gave the same cap heights; the heading is 10% under that (Nik:
   "Make the 'Welcome to' a tiny bit smaller"). */
.hero-photo h1 {
    font-size: clamp(2.25rem, 2.115rem + .55vw, 2.61rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 .3em;
}

.hero-home h1>span {
    display: block;
}

.hero-line {
    margin: 0 0 .5rem;
    font-size: clamp(1.44rem, 1.34rem + .38vw, 1.7rem);
    font-weight: 400;
}

.hero-cta {
    font-size: 1.05rem;
    padding: .7em 2em;
    min-height: 48px;
}

/* On a phone the box sits --hero-box-phone-gap above the photo's bottom edge. */
@media (max-width: 860px) {
    .hero-photo {
        align-items: flex-end;
    }

    .hero-photo .hero-inner {
        padding-block: 2rem var(--hero-box-phone-gap);
    }

    /* Under 390px the side padding eases off, 0.503px per px of width and
     never under 1.5rem, so "Döner Haus" stays one line. */
    .hero-card {
        padding: var(--hero-box-phone-pad-top) clamp(1.5rem, var(--hero-box-phone-pad-x) + 50.3vw - 12.256rem, var(--hero-box-phone-pad-x)) var(--hero-box-phone-pad-bottom);
    }
}

@media (max-width: 700px) {
    .hero-card {
        width: var(--hero-box-phone-w);
        margin-inline: auto;
    }

    .hero-cta {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}

/* Bands */
.band {
    padding-block: clamp(3rem, 7vw, 6rem);
}

/* Bands alternate: no two neighbours, header and footer included, share a
   background (check_mobile.py). On white, the dark page's grey and gold
   text become ink-toned, since gold on white is under 2:1. */
.band-light {
    background: var(--paper);
    color: var(--ink);
    --muted: #5a5a5a;
}

.band-dark {
    background: var(--ink);
}

.band-gold {
    background: var(--gold);
    color: var(--ink);
}

.band-light :focus-visible {
    outline-color: var(--ink);
}

/* The one in-text link: underlined, its paragraph's colour. :where() keeps it
   below any component's own link rule (citations, cards). */
:where(main p) a:where(:not(.btn)) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.split-media {
    width: 100%;
    aspect-ratio: 1 / 0.92;
    object-fit: cover;
}

.cards {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card {
    text-align: center;
}

.card img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 1.2rem;
}

.card h3 {
    color: var(--gold);
    font-size: 1.6rem;
}

.card p {
    font-size: .98rem;
}

/* A photo and a gold panel, offset as on Toast's doner.haus "The real deal",
   staggered at both ends (Nik, 2026-11-03: "I don't want them to be lined
   up perfectly"): the panel rises --feature-rise above the photo's top, the
   photo drops --feature-drop below the panel's bottom, and the panel runs
   --feature-overlap in under it. The photo meets one edge of the column and
   the panel the other, so the offset never changes the page's width. The
   panel's text sets the height; contain: size keeps the photo's own height
   out of it, and cover crops the taller frame. On a phone the photo is
   --feature-photo-w of the column at one side and hangs --feature-shift
   past the panel's edge there; the panel tucks up under it and meets the
   column's other edge. check_mobile.py fails any two edges within 8px. */
.feature {
    --feature-rise: clamp(1.5rem, 3.2vw, 2.9rem);
    --feature-drop: var(--feature-rise);
    --feature-overlap: 4rem;
    --feature-pad: clamp(2rem, 5vw, 4.5rem);
    --feature-photo-w: 84%;
    --feature-shift: clamp(1rem, 5vw, 2rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: var(--feature-rise) auto var(--feature-drop);
}

.feature-media {
    grid-area: 2 / 1 / 4 / 2;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    contain: size;
    aspect-ratio: auto;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.feature-panel {
    grid-area: 1 / 2 / 3 / 3;
    background: var(--gold);
    color: var(--ink);
    margin-left: calc(-1 * var(--feature-overlap));
    padding: var(--feature-pad);
    padding-left: calc(var(--feature-overlap) + var(--feature-pad));
}

.feature-reverse {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.feature-reverse .feature-media {
    grid-area: 2 / 2 / 4 / 3;
}

.feature-reverse .feature-panel {
    grid-area: 1 / 1 / 3 / 2;
    margin: 0 calc(-1 * var(--feature-overlap)) 0 0;
    padding: var(--feature-pad);
    padding-right: calc(var(--feature-overlap) + var(--feature-pad));
}

/* The storefront sign's letters span x 149–894 of the crowd file's 1100px,
   wider than a desktop frame's cover crop (662px at 1440), so the crop is
   centred on the letters, not the file. */
.feature-media-sign {
    object-position: 43% 50%;
}

.dash-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    font-weight: 700;
    font-size: 1.25rem;
}

.dash-list li::before {
    content: "– ";
}

/* The brand film is 16:9 with no bars in the file. The box keeps that ratio,
   so nothing is letterboxed: a height cap on a full-width box drew black bars
   at its sides. On a short screen the width gives way instead, so the whole
   frame fits under the sticky header (check_mobile.py measures all three). */
.brand-video {
    width: min(100%, (100svh - 7.5rem) * 16 / 9);
    height: auto;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--surface-sunk);
    pointer-events: none;
}

/* On a phone the film runs side to side with square corners, and its band
   keeps every band's black strip above and below it (Nik, 2026-11-04). */
@media (max-width: 700px) {
    .band-video .wrap {
        width: 100%;
    }

    .brand-video {
        border-radius: 0;
    }
}

/* An ambient loop has nothing to press. When iOS refuses autoplay (Low Power
   Mode) it draws a play button over the poster even without `controls`. */
.brand-video::-webkit-media-controls-start-playback-button {
    display: none;
}

.rewards-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
}

.rewards-card h1,
.rewards-card h2 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.rewards-card .fine {
    margin-top: 1.5rem;
}

/* /rewards' recommended store, inside the signup card: the name (a link down
   to the list, to pick another) over its button. Every store's line is this
   one shape, so swapping stores never moves the card. */
.rewards-pick {
    margin-top: 1.4rem;
}

.rewards-store {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}

.rewards-store[hidden] {
    display: none;
}

.rewards-store .store-name {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    color: inherit;
    white-space: nowrap;
    text-decoration-color: rgba(0, 0, 0, .3);
    text-underline-offset: .2em;
}

.rewards-store .store-name .distance {
    color: #555;
}

.rewards-store .btn {
    max-width: 100%;
    white-space: nowrap;
}

.pillars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    text-align: center;
}

.pillars h3 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.pillars p {
    font-size: .98rem;
}

/* "Numbers to crave": the figures and a store photo split the page's column.
   Each table row is a group, its name in the tables' header style over two
   figures. Under 900px the photo is dropped and the figures take the column. */
.numbers-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
}

.numbers .lead {
    margin-bottom: 1.4rem;
}

.numbers-table,
.numbers-table tbody,
.numbers-table th,
.numbers-table td {
    display: block;
}

.numbers-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    column-gap: 1.5rem;
    padding: 1rem 0 1.15rem;
    border-top: 1px solid #262626;
}

.numbers-table tr:last-child {
    border-bottom: 1px solid #262626;
}

.numbers-table th {
    grid-column: 1 / -1;
    margin-bottom: .5rem;
    text-align: left;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.numbers-value {
    display: block;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.2;
}

.numbers-highlight {
    color: var(--gold);
}

.numbers-label {
    display: block;
    margin-top: .3rem;
    font-size: .92rem;
    line-height: 1.4;
    color: var(--muted);
    text-wrap: pretty;
}

.numbers-footnote {
    margin: .9rem 0 0;
    color: var(--gold);
    font-weight: 700;
    font-style: italic;
}

.band-light .numbers-table tr {
    border-color: #ddd;
}

.band-light .numbers-highlight {
    width: fit-content;
    padding-inline: .2em;
    background: var(--gold);
    color: var(--ink);
}

.band-light .numbers-footnote {
    color: var(--ink);
}

/* The Hell's Kitchen storefront sits left of the file's centre. */
.numbers-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 46% 50%;
    border-radius: var(--radius);
}

@media (max-width: 899px) {
    .numbers-split {
        display: block;
    }

    .numbers-photo {
        display: none;
    }
}

/* Contact */
.contact-form {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.contact-form label {
    display: grid;
    gap: .35rem;
    font-weight: 600;
}

.optional {
    font-weight: 400;
    opacity: .7;
}

.contact-form .fine {
    margin: 0;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    font: inherit;
    color: var(--paper);
    background: var(--surface);
    border: 1px solid #3a3a3a;
    border-radius: var(--radius);
    padding: .75rem .9rem;
    width: 100%;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--gold);
    outline: none;
}

.contact-form button {
    justify-self: start;
}

.form-status {
    min-height: 1.5em;
    margin: 0;
    font-weight: 600;
}

.form-status.ok {
    color: #7ee08b;
}

.form-status.error {
    color: #ff8b80;
}

/* Franchise application: one question at a time beside what happens next. */
.apply-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

/* Scrolled to on each step, it clears the sticky header. */
.apply-card {
    scroll-margin-top: 6rem;
    background: var(--surface);
    border: 1px solid #262626;
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 4vw, 2.2rem);
}

.apply-form {
    display: grid;
    gap: 1.2rem;
}

.apply-meter {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.apply-count {
    margin: 0;
    color: var(--gold);
    font-weight: 700;
    white-space: nowrap;
}

.apply-progress {
    flex: 1;
    height: 6px;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: var(--surface-raised);
    overflow: hidden;
}

.apply-progress::-webkit-progress-bar {
    background: var(--surface-raised);
}

.apply-progress::-webkit-progress-value {
    background: var(--gold);
    transition: width .2s;
}

.apply-progress::-moz-progress-bar {
    background: var(--gold);
}

.apply-step {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.apply-question {
    padding: 0;
    margin-bottom: .2rem;
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
}

.apply-lede {
    margin: -.6rem 0 0;
    color: var(--muted);
}

.apply-step .field {
    display: grid;
    gap: .35rem;
}

.apply-step label {
    font-weight: 600;
}

.apply-step input:not([type=radio]),
.apply-step select,
.apply-step textarea {
    font: inherit;
    color: var(--paper);
    background: var(--surface-sunk);
    border: 1px solid #3a3a3a;
    border-radius: var(--radius);
    padding: .75rem .9rem;
    width: 100%;
    min-height: 48px;
}

.apply-step textarea {
    resize: vertical;
}

.apply-step input:not([type=radio]):focus,
.apply-step select:focus,
.apply-step textarea:focus {
    border-color: var(--gold);
    outline: none;
}

.apply-step [aria-invalid=true]:not([type=radio]) {
    border-color: #ff8b80;
}

.field-error {
    color: #ff8b80;
    font-weight: 600;
    font-size: .95rem;
}

.field-error:empty {
    display: none;
}

.choices {
    display: grid;
    gap: .6rem;
}

.choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 48px;
    padding: .6rem 1rem;
    background: var(--surface-sunk);
    border: 1px solid #3a3a3a;
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.choice:hover {
    background: var(--surface-raised);
}

.choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice-key {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid #555;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
}

.choice-label {
    font-weight: 600;
}

.choice:has(input:checked) {
    border-color: var(--gold);
    background: var(--surface-ours);
}

.choice:has(input:checked) .choice-key {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.choice:has(input:focus-visible) {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.choice:has(input:disabled) {
    opacity: .6;
    cursor: progress;
}

.apply-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
}

.apply-actions .btn {
    min-height: 48px;
}

.apply-turnstile:empty {
    display: none;
}

.apply-done:focus {
    outline: none;
}

.apply-done-title {
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 800;
    line-height: 1.25;
}

.apply-done .lead {
    margin: 0;
}

.apply-after h2 {
    font-size: 1.35rem;
}

.apply-timeline {
    list-style: none;
    counter-reset: apply;
    margin: 0 0 1.4rem;
    padding: 0;
    display: grid;
    gap: 1.1rem;
}

.apply-timeline li {
    counter-increment: apply;
    position: relative;
    padding-left: 2.8rem;
    color: var(--muted);
}

.apply-timeline li::before {
    content: counter(apply);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 800;
    font-size: .9rem;
}

.apply-timeline strong {
    display: block;
    color: var(--paper);
}

@media (max-width: 860px) {
    .apply-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Prose */
.prose h2 {
    font-size: 1.35rem;
    margin-top: 2rem;
}

.prose ul {
    padding-left: 1.2rem;
}

.prose table {
    margin: 1.5rem 0;
}

.finder {
    background: var(--surface-sunk);
    border-top: 1px solid #1c1c1c;
    padding-block: clamp(2.2rem, 5vw, 3.8rem) clamp(3rem, 6vw, 5rem);
}

/* /order has no hero: the finder is the page, its h1 then the nearest store. */
main>.finder:first-child {
    border-top: 0;
    padding-top: clamp(1.6rem, 4vw, 2.8rem);
}

.order-title {
    font-size: clamp(2.1rem, 1.75rem + 1.2vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 clamp(1.1rem, 2.5vw, 1.6rem);
}

.finder-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: 1.2rem;
}

.finder .state-heading {
    font-size: .85rem;
    margin-bottom: .7rem;
}

.finder .state-group+.state-group {
    margin-top: 1.8rem;
}

.state-heading {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 1rem;
    margin: 0 0 .8rem;
}

.state-group+.state-group {
    margin-top: 2rem;
}

/* Store cards: one structure on every page (templates/_store_card.html). The
   name, the street, the city line and the phone are a line each, so no
   store's text decides a card's shape; cards in a grid row stretch to one
   height. check_mobile.py measures both. */
.store-list,
.store-pick {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .8rem;
}

.store-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem 1.2rem;
    background: var(--surface);
    border: 1px solid #262626;
    border-radius: var(--radius);
    padding: .9rem 1.2rem;
}

.store-card[hidden] {
    display: none;
}

.store-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.store-name {
    font-size: 1.3rem;
    line-height: 1.12;
    font-weight: 800;
    margin: .2rem 0 .15rem;
}

.store-name .distance {
    margin-left: .25em;
    font-size: .95rem;
    font-weight: 600;
    color: var(--gold);
}

.store-address,
.store-phone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    font-size: .95rem;
    line-height: 1.35;
    color: inherit;
    opacity: .9;
}

.store-address span {
    display: block;
}

.store-cta {
    padding-inline: 1.4em;
}

.store-pick {
    margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

.store-pick .store-card {
    border-color: var(--gold);
}

.store-pick .store-name {
    font-size: clamp(1.45rem, 1.25rem + .6vw, 1.85rem);
}

@media (min-width: 861px) {
    .store-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The recommended store spans the column: its storefront, its lines, then
   its button. Under 601px it is the /locations card, the photo on top. */
@media (min-width: 601px) {
    .store-pick .store-card-photo {
        display: grid;
        grid-template-columns: clamp(220px, 32%, 340px) minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 1.6rem;
        padding: 0 1.6rem 0 0;
    }

    .store-pick .store-card-photo .store-card-body {
        padding: 1rem 0;
    }

    .store-pick .store-card-photo .store-cta {
        margin: 0;
    }
}

@media (max-width: 600px) {
    .store-card {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 400px) {
    .store-card {
        padding: .9rem 1rem;
    }

    /* Full width here, so the padding only decides whether "Join rewards at
     {store}" wraps; one line keeps every store's button one height. */
    .store-cta {
        padding-inline: .25rem;
    }
}

/* Franchise comparisons. A marketing page first: the pitch, big numbers where
   Döner Haus wins, then the competitor's record in plain lines; the legal
   backbone sits in the collapsed fine print at the foot of the page. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.compare h1 {
    font-size: clamp(2rem, 5vw, 3.6rem);
    margin-bottom: .2em;
}

.compare h2 {
    margin: 3.4rem 0 1.1rem;
}

.compare>.wrap>.lead {
    color: #d6d6d6;
    margin-bottom: 1.8rem;
}

.crumbs {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 1.4rem;
}

.crumbs a {
    color: inherit;
}

.kicker {
    margin: 0 0 .5rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
}

.updated {
    color: var(--muted);
}

.cite {
    font-size: .62rem;
    margin-left: .12rem;
    line-height: 0;
}

.cite a {
    color: #8a8a8a;
    text-decoration: none;
}

.cite a:hover {
    color: var(--gold);
}

.note-mark {
    font-size: .7rem;
    margin-left: .15rem;
    line-height: 0;
}

.note-mark a {
    color: var(--gold);
    text-decoration: none;
}

.verdict {
    margin: 0 0 1.4rem;
    padding-left: 1rem;
    border-left: 4px solid var(--gold);
    font-size: clamp(1.2rem, 2.2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.35;
}

.compare h1+.verdict {
    margin-top: 1.4rem;
}

/* Two big numbers a row: four cards read as a 2x2 block, one column on a phone. */
.proof {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

@media (min-width: 640px) {
    .proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.proof li {
    display: grid;
    align-content: start;
    gap: .3rem;
    background: var(--surface);
    border: 1px solid #262626;
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem 1.3rem;
}

.proof-label {
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.proof-value {
    font-size: clamp(2.3rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.05;
    color: var(--gold);
}

.proof-unit {
    margin-top: -.25rem;
    font-size: 1rem;
    font-weight: 700;
    color: #e7d9a8;
}

.proof-vs {
    font-size: 1rem;
    color: #d6d6d6;
}

.proof+.summary-wrap {
    margin-top: 2rem;
}

.risk-callout {
    margin: 0 0 1.4rem;
    background: var(--surface-warn);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem 1.2rem;
}

.risk-callout figcaption {
    margin-bottom: .55rem;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gold);
}

.risk-callout blockquote {
    margin: 0;
}

.risk-callout blockquote p {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.4;
}

.risk-also {
    margin: .75rem 0 0;
    font-size: .9rem;
    color: #e7d9a8;
}

/* The competitor's record: one plain line each, read in one go. */
.hits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .7rem;
}

.hits li {
    padding: .2rem 0 .2rem 1rem;
    border-left: 3px solid #5a4a12;
    font-size: clamp(1.05rem, 1.8vw, 1.18rem);
    font-weight: 600;
    line-height: 1.45;
}

.hits q {
    font-style: italic;
    color: #e7d9a8;
}

.compare .dek {
    margin: 0 0 1rem;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.4;
    color: #e7d9a8;
}

.inline-cta {
    margin: 1.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem 1.4rem;
    background: var(--surface);
    border: 1px solid #262626;
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
}

.inline-cta p {
    margin: 0;
    flex: 1 1 18rem;
}

.inline-cta strong {
    color: var(--gold);
}

.table-scroll {
    overflow-x: auto;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .96rem;
}

.compare-table th,
.compare-table td {
    text-align: left;
    vertical-align: top;
    padding: .75rem .9rem;
    border-bottom: 1px solid #262626;
}

.compare-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    border-bottom: 2px solid #333;
}

.compare-table thead th.ours {
    color: var(--gold);
}

.compare-table tbody th {
    width: 30%;
    font-weight: 600;
    color: #ddd;
}

.compare-table td.ours {
    background: var(--surface-ours);
}

.value {
    font-weight: 700;
}

.detail {
    display: block;
    font-size: .82rem;
    color: var(--muted);
    margin-top: .15rem;
}

.pct {
    display: inline-block;
    font-size: .8rem;
    color: var(--muted);
    margin-left: .35rem;
}

.today {
    color: #e7d9a8;
}

.faq-item {
    border-top: 1px solid #262626;
}

.faq-item:last-child {
    border-bottom: 1px solid #262626;
}

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: .75rem 0;
    cursor: pointer;
    list-style: none;
    font-size: 1.05rem;
    font-weight: 700;
}

.faq-q::-webkit-details-marker {
    display: none;
}

.faq-q::after {
    content: "+" / "";
    flex: none;
    color: var(--gold);
    font-size: 1.4rem;
    line-height: 1;
}

.faq-item[open] .faq-q::after {
    content: "−" / "";
}

.faq-a {
    margin: 0 0 1rem;
    color: #d6d6d6;
}

.compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .9rem;
}

.compare-list>li>a {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    background: var(--surface);
    border: 1px solid #262626;
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    text-decoration: none;
}

.compare-list>li>a:hover {
    border-color: var(--gold);
}

.compare-list-name {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}

.compare-list-cat {
    order: -1;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--gold);
}

.compare-list-card {
    font-size: .95rem;
    color: #cfcfcf;
}

.fineprint {
    border-top: 1px solid #1d1d1d;
    padding-block: 1.2rem 2.4rem;
    font-size: .82rem;
    color: var(--muted);
}

.fineprint summary,
.summary-fine summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #cfcfcf;
}

.fineprint summary::-webkit-details-marker,
.summary-fine summary::-webkit-details-marker {
    display: none;
}

.fineprint summary::after,
.summary-fine summary::after {
    content: "+" / "";
    color: var(--gold);
    font-size: 1.1rem;
}

.fineprint details[open]>summary::after,
.summary-fine[open]>summary::after {
    content: "−" / "";
}

.fine-head {
    margin: 1.3rem 0 .4rem;
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #cfcfcf;
}

.fine-notes {
    padding-left: 1.1rem;
    margin: .5rem 0;
}

.fine-notes li,
.sources li {
    margin-bottom: .35rem;
    scroll-margin-top: 6rem;
}

.sources {
    padding-left: 1.4rem;
    margin: 0;
}

.sources a {
    color: inherit;
}

.disclaimer {
    margin: 1.2rem 0 0;
}

.compare-band .lead {
    font-weight: 700;
}

.summary-wrap {
    margin: 1.5rem 0 .4rem;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .98rem;
}

.summary-table th,
.summary-table td {
    text-align: left;
    vertical-align: top;
    padding: .75rem .8rem;
    border-bottom: 1px solid #262626;
}

.summary-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    border-bottom: 2px solid #333;
}

.summary-table tbody th {
    font-weight: 700;
}

.summary-table tbody th a {
    color: inherit;
}

.summary-table tr.ours th,
.summary-table tr.ours td {
    background: var(--surface-ours);
}

.summary-table tr.ours th {
    color: var(--gold);
}

.summary-value {
    font-weight: 700;
}

.summary-today,
.summary-detail {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-top: .15rem;
}

.summary-today {
    color: #e7d9a8;
}

.summary-fine {
    margin-bottom: 1.4rem;
    font-size: .82rem;
    color: var(--muted);
}

@media (max-width: 860px) {
    .compare-table {
        font-size: .92rem;
    }

    .compare-table th,
    .compare-table td {
        padding: .7rem .5rem;
    }
}

/* The summary table stacks into one two-column card per franchise. */
@media (max-width: 700px) {
    .summary-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .summary-table,
    .summary-table tbody {
        display: block;
    }

    .summary-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid #262626;
        border-radius: var(--radius);
        margin-bottom: .9rem;
        overflow: hidden;
    }

    .summary-table tbody th {
        grid-column: 1 / -1;
        font-size: 1.1rem;
    }

    .summary-table td {
        border-bottom: 0;
        padding: .5rem .8rem;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .summary-table td::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--muted);
    }
}

/* Locations */
.locations-page .state-heading {
    letter-spacing: .06em;
    margin-top: 2.2rem;
}

/* The same store card under its photo, with the button at its foot so the
   buttons in a row line up. */
.store-list-photo {
    gap: 1.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.store-card-photo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--surface);
}

/* Always the whole 4:3 frame fetch_assets.py cut around the sign; a narrower
   crop here would be centred and cut it (check_mobile.py measures it). */
.store-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--ink);
}

.store-card-photo .store-card-body {
    padding: 1rem 1.2rem .8rem;
}

.store-card-photo .store-cta {
    margin: auto 1.2rem 1.2rem;
}

/* A store that is not open: its name, its city and state, and when it opens,
   on an outline rather than a filled card, since there is nothing to press.
   In the photo grid's columns, so the two lists line up. */
.store-list-soon {
    gap: 1.2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.store-list-photo:not(.is-off)+.store-list-soon {
    margin-top: 1.2rem;
}

.store-card-soon {
    grid-template-columns: minmax(0, 1fr);
    background: transparent;
    border-style: dashed;
    border-color: #3d3d3d;
    padding: 1rem 1.2rem 1.1rem;
}

.store-place {
    font-size: .95rem;
    line-height: 1.35;
    opacity: .9;
}

.store-status {
    margin-top: .6rem;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold);
}

/* Footer */
.site-footer {
    background: var(--chrome);
    padding-block: 1.5rem;
}

.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1.4rem;
    margin-bottom: .3rem;
}

.footer-links,
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.2rem;
    margin: 0;
}

.footer-links {
    font-size: .85rem;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #cfcfcf;
}

/* The 22px icons sit in 44px tap boxes; the negative inset lines the glyphs
   up with the column's edges instead of the boxes. */
.footer-social {
    gap: 0 .25rem;
    margin-inline: -11px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #e4e4e4;
}

.footer-links a:hover,
.footer-social a:hover {
    color: var(--gold);
}

/* Room under home's last line for the fixed Order now button: its 3.6rem plus
   its bottom offset, max(1rem, safe area), plus a gap. Kept after the rule
   above so it wins. */
@media (max-width: 700px) {
    .has-sticky-order .site-footer {
        padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
    }
}

.copyright {
    font-size: .85rem;
    opacity: .6;
    margin: 0;
}

@media (max-width: 860px) {
    .split {
        grid-template-columns: 1fr;
    }

    .feature,
    .feature-reverse {
        --feature-overlap: 2.5rem;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .feature-media,
    .feature-reverse .feature-media {
        grid-area: 1 / 1;
        justify-self: start;
        width: var(--feature-photo-w);
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3;
        max-height: 420px;
        contain: none;
    }

    .feature-reverse .feature-media {
        justify-self: end;
    }

    .feature-panel,
    .feature-reverse .feature-panel {
        grid-area: 2 / 1;
        margin: calc(-1 * var(--feature-overlap)) 0 0 var(--feature-shift);
        padding: calc(var(--feature-overlap) + 1.75rem) clamp(1.25rem, 6vw, 1.75rem) 2rem;
    }

    .feature-reverse .feature-panel {
        margin: calc(-1 * var(--feature-overlap)) var(--feature-shift) 0 0;
    }

    .cards,
    .pillars {
        grid-template-columns: 1fr;
    }

    .card img {
        aspect-ratio: 16 / 10;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .store-list-photo,
    .store-list-soon {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {

    .store-list-photo,
    .store-list-soon {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .btn,
    body:has([data-hero-order]) .sticky-order:not(.is-shown) {
        transition: none;
    }
}