/* /Components/Layout/ClientLayout.razor.rz.scp.css */
/*
  <FocusOnNavigate> moves focus to the h1 so a screen reader announces the new page. The theme
  paints :focus-visible on everything, which put a red box around every headline. Focus is kept —
  removing it would break the announcement — and only the ring is suppressed, which is the usual
  treatment for a programmatic focus target: the heading is already the visual indication of where
  you are, and it is not an interactive control a keyboard user needs to locate.
*/
[b-i0b6u2ffwl] h1:focus,
[b-i0b6u2ffwl] h1:focus-visible {
    outline: none;
}
/* /Components/Layout/SiteLayout.razor.rz.scp.css */
/*
  <FocusOnNavigate> moves focus to the h1 so a screen reader announces the new page. The theme
  paints :focus-visible on everything, which put a red box around every headline. Focus is kept —
  removing it would break the announcement — and only the ring is suppressed, which is the usual
  treatment for a programmatic focus target: the heading is already the visual indication of where
  you are, and it is not an interactive control a keyboard user needs to locate.
*/
[b-r929kwjxuz] h1:focus,
[b-r929kwjxuz] h1:focus-visible {
    outline: none;
}
/* /Components/Pages/Admin/Applications.razor.rz.scp.css */
/*
  The second line in a cell: the address under the venue's name, the phone under the email. Muted
  and on its own line, so a cell carries one fact at two levels of detail rather than two facts
  competing for the same width.
*/

.ap-under[b-cqepoasm3m] {
    display: block;
    margin-top: 2px;
}
/* /Components/Pages/Admin/Reviewer.razor.rz.scp.css */
/* What to tell Stripe: five short points, spaced so each reads as its own instruction. */
.rv-list[b-hg3sfvt230] {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding-left: 1.1rem;
    line-height: 1.5;
}

/* The two addresses are long and unbroken; on a phone they would push the card sideways. */
.rv-list code[b-hg3sfvt230] {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Clients/Overview.razor.rz.scp.css */
.ov-hero[b-197x05psx7] {
    padding: var(--sp-8) 0 var(--sp-7);
    border-bottom: 1px solid var(--line);
}

/*
  Copy left, the shortlist right. The hero ran full width and left half of itself empty; what fills
  it is the one screen this page's reader — a venue owner — is actually being sold.

  TWO EQUAL COLUMNS, and the second one is a fraction rather than `auto`. With `auto` the phone
  column shrank to the width of the device and got pinned against the right edge of the page, so
  all the slack opened up BETWEEN the two columns — the dead space moved rather than being filled.
  A real half gives the aside something to centre in, and lands the device at about three quarters
  across the page.

  The copy loses nothing by it: the h1 is capped at 18ch and the lede at 40ch, so neither was using
  the extra width it had.
*/
.ov-hero__grid[b-197x05psx7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: center;
}

.ov-hero__copy[b-197x05psx7] { min-width: 0; }

.ov-hero__aside[b-197x05psx7] {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
}

/* The brand's bloom behind the device, as the waitlist hero has it. Bounded in px so the reach
   cannot scale with the element it sits behind and push a horizontal scrollbar onto the page. */
.ov-hero__aside[b-197x05psx7]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -32px;
    background: radial-gradient(closest-side at 50% 42%, var(--sx-glow), transparent 70%);
    pointer-events: none;
}

/*
  DemoPhone is drawn at the concept's true 402px and has no responsive behaviour of its own, so it
  is scaled with a transform and the WRAPPER is given the scaled box. Sizing only the transform
  would leave a 402x871 hole in the layout: transforms do not affect layout size, so the hero would
  reserve the full height and open a gap under the copy.
*/
.ov-hero__phone[b-197x05psx7] {
    --phone-scale: 0.6;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.ov-hero__phone[b-197x05psx7]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

/*
  Scaled against the WINDOW HEIGHT, not its width, because height is the constraint that actually
  bites: the phone is more than twice as tall as it is wide, so it — not the copy — decides where
  the hero ends. At 0.66 on a 1440x900 laptop the hero came out 841px and swallowed the fold, which
  put "Start the walk-through" on the edge of the screen and everything below it out of sight. The
  h1 and the two buttons are the point; the phone is the garnish.
*/
@media (min-height: 950px) {
    .ov-hero__phone[b-197x05psx7] { --phone-scale: 0.7; }
}

@media (max-height: 760px) {
    .ov-hero__phone[b-197x05psx7] { --phone-scale: 0.5; }
}

.ov-hero__caption[b-197x05psx7] {
    margin: 0;
    max-width: 30ch;
    text-align: center;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--fg-muted);
}

.ov-hero__try[b-197x05psx7] {
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Below this the copy has the width to itself and the phone would halve it. The waitlist hero
   drops its phone at the same point, for the same reason. */
@media (max-width: 1000px) {
    .ov-hero__grid[b-197x05psx7] { grid-template-columns: 1fr; }
    .ov-hero__aside[b-197x05psx7] { display: none; }
}

.ov-eyebrow[b-197x05psx7] {
    margin: 0 0 var(--sp-5);
}

/* Bigger than the theme's h1, which is sized for admin page titles: this is the one sentence the
   section exists to say. */
.ov-hero h1[b-197x05psx7] {
    max-width: 18ch;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ov-section[b-197x05psx7] {
    padding: var(--sp-7) 0;
    border-bottom: 1px solid var(--line);
}

/* The band under the page draws the rule after the last section — the Sign in band, or the contact
   form where there is no band — so a rule here as well would be a double line. */
.ov-section:last-child[b-197x05psx7] {
    border-bottom: 0;
}

.ov-section > h2[b-197x05psx7],
.ov-twocol h2[b-197x05psx7] {
    margin-bottom: var(--sp-5);
}

.ov-cards[b-197x05psx7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
}

.ov-card[b-197x05psx7] {
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    color: var(--fg);
}

.ov-card:hover[b-197x05psx7] {
    background: var(--bg-hover);
    border-color: var(--line-strong);
    text-decoration: none;
}

.ov-card strong[b-197x05psx7] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--fg-strong);
}

.ov-card span[b-197x05psx7] {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--fg-muted);
}

/* The launch screen, where a second list of steps used to be. Same scaling trick as the hero: the
   wrapper carries the scaled box, because a transform does not affect layout size and the row would
   otherwise reserve the phone's full 871px and open a hole under the list beside it. */
/* Centred against the LIST beside it, not pinned to the top of the row. The list is ten entries
   tall and the phone is roughly half that, so align-content:start left it hanging off the top with
   a column of dead space under it.

   The padding is the heading block in the other column — 32px of "The app, screen by screen" plus
   its 24px margin. Without it the phone centres on the whole column including that heading, which
   put it 28px (half of 56) above the middle of the list it is supposed to line up with. */
.ov-splash[b-197x05psx7] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--sp-3);
    padding-top: 56px;
}

.ov-splash__phone[b-197x05psx7] {
    position: relative;
    --phone-scale: 0.55;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.ov-splash__phone[b-197x05psx7]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

/* Out of flow, so the grid centres the PHONE rather than the phone-plus-caption block. In flow it
   counted toward the column's height and pushed the device about 54px above the middle of the list
   beside it, which is the thing that made it look top-aligned. */
.ov-splash__caption[b-197x05psx7] {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 30ch;
    max-width: 100%;
    transform: translateX(-50%);
    margin: var(--sp-3) 0 0;
    text-align: center;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--fg-muted);
}

@media (max-width: 900px) {
    .ov-splash[b-197x05psx7] { display: none; }

    /* Once a screen is picked from the list, the phone shows on a narrow screen too, above the
       list: otherwise the shortcut would change a phone nobody can see. The bottom padding makes
       room for the caption, which hangs below the phone out of flow. */
    .ov-splash.is-picked[b-197x05psx7] {
        display: grid;
        padding-top: 0;
        padding-bottom: 5rem;
    }
}

.ov-twocol[b-197x05psx7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--sp-7);
}

/* A numbered table of contents. The number is drawn, not typed, so the lists stay in step with
   the script they are rendered from. */
.ov-list[b-197x05psx7] {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: entry;
}

.ov-list li[b-197x05psx7] {
    counter-increment: entry;
}

.ov-list a[b-197x05psx7] {
    display: grid;
    grid-template-columns: 2ch 1fr;
    column-gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
    color: var(--fg);
}

.ov-list a[b-197x05psx7]::before {
    content: counter(entry);
    grid-row: span 2;
    font-family: var(--font-display);
    color: var(--accent-text);
}

.ov-list a:hover[b-197x05psx7] {
    color: var(--fg-strong);
    text-decoration: none;
}

/* The entry whose screen the phone is showing. */
.ov-list a[aria-current="true"] strong[b-197x05psx7] {
    color: var(--accent-text);
}

/* The list's links land on this section; a little room above it, so it does not sit flush
   against the top of the window. */
.ov-twocol[b-197x05psx7] {
    scroll-margin-top: var(--sp-6);
}

.ov-list strong[b-197x05psx7] {
    color: var(--fg-strong);
    font-weight: 500;
}

.ov-list span[b-197x05psx7] {
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.ov-principles[b-197x05psx7] {
    display: grid;
    gap: var(--sp-3);
    max-width: var(--measure);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ov-principles li[b-197x05psx7] {
    padding-left: var(--sp-4);
    border-left: 2px solid var(--accent);
    color: var(--fg-muted);
}

.ov-status[b-197x05psx7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    margin: 0;
}

.ov-status dt[b-197x05psx7] {
    margin-bottom: var(--sp-1);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.ov-status dd[b-197x05psx7] {
    margin: 0;
}

@media (max-width: 800px) {
    .ov-cards[b-197x05psx7],
    .ov-twocol[b-197x05psx7],
    .ov-status[b-197x05psx7] {
        grid-template-columns: 1fr;
    }
}

/*
  The founder's offer: copy on the left, the number on the right. The number is set in the display
  face at the theme's largest text size, because it is the one thing on the page a client will
  repeat to a friend.
*/
.ov-offer[b-197x05psx7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-7);
    align-items: center;
}

.ov-offer__kicker[b-197x05psx7] {
    margin: 0 0 var(--sp-3);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.ov-offer__copy h2[b-197x05psx7] {
    margin-bottom: var(--sp-4);
}

.ov-offer__lede[b-197x05psx7] {
    max-width: 40ch;
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--fg-strong);
}

.ov-offer__note[b-197x05psx7] {
    color: var(--fg-muted);
}

.ov-offer__figure[b-197x05psx7] {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-7);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    text-align: center;
}

.ov-offer__amount[b-197x05psx7] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}

.ov-offer__label[b-197x05psx7] {
    max-width: 16ch;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

@media (max-width: 800px) {
    .ov-offer[b-197x05psx7] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Clients/Pricing.razor.rz.scp.css */
/*
  The pricing page: one number, early and large, and the facts around it. Its own classes rather
  than the overview's .ov-* — scoped CSS is per file — drawn from the same tokens so the two pages
  read as one section.
*/

.pr-hero[b-8q42cp8t25] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-8);
    align-items: center;
    padding: var(--sp-8) 0 var(--sp-7);
    border-bottom: 1px solid var(--line);
}

.pr-hero__copy[b-8q42cp8t25] { min-width: 0; }

.pr-eyebrow[b-8q42cp8t25] { margin: 0 0 var(--sp-5); }

/* Sized as the overview's h1 is: the one sentence the page exists to say. */
.pr-hero h1[b-8q42cp8t25] {
    max-width: 16ch;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/*
  The number, in the display face at the theme's largest size: the one thing a venue owner will
  repeat to a partner. The bloom behind it is the brand's, as the overview hero has it, bounded in
  px so it cannot scale with the card and push a scrollbar onto the page.
*/
.pr-price[b-8q42cp8t25] {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    min-width: 18rem;
    padding: var(--sp-7) var(--sp-7) var(--sp-6);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    text-align: center;
}

.pr-price[b-8q42cp8t25]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -32px;
    background: radial-gradient(closest-side at 50% 40%, var(--sx-glow), transparent 70%);
    pointer-events: none;
}

.pr-price__from[b-8q42cp8t25],
.pr-price__per[b-8q42cp8t25] {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.pr-price__amount[b-8q42cp8t25] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}

.pr-price__facts[b-8q42cp8t25] {
    display: grid;
    gap: var(--sp-2);
    width: 100%;
    margin: var(--sp-5) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--fg);
}

.pr-price__facts li[b-8q42cp8t25] {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: var(--sp-2);
    align-items: baseline;
}

/* A tick drawn in CSS, in the ok colour, so it follows the colour mode without an icon asset. */
.pr-price__facts li[b-8q42cp8t25]::before {
    content: "";
    width: 5px;
    height: 10px;
    margin-left: 3px;
    border-right: 2px solid var(--ok);
    border-bottom: 2px solid var(--ok);
    transform: rotate(45deg);
}

.pr-section[b-8q42cp8t25] {
    padding: var(--sp-7) 0;
    border-bottom: 1px solid var(--line);
}

/* The band under the page draws the rule after the last section, as on the overview. */
.pr-section:last-child[b-8q42cp8t25] { border-bottom: 0; }

.pr-section > h2[b-8q42cp8t25] { margin-bottom: var(--sp-5); }

.pr-cards[b-8q42cp8t25] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
}

.pr-card[b-8q42cp8t25] {
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

.pr-card strong[b-8q42cp8t25] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--fg-strong);
}

.pr-card span[b-8q42cp8t25] {
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--fg-muted);
}

/*
  The campus table with its notes beside it, as the investors page lays the same table out: the
  table takes the wider column, the notes sit at its top rather than stretching to its height, and
  on a phone the two stack.
*/
.pr-who[b-8q42cp8t25] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
    margin-bottom: var(--sp-6);
}

/* No border-radius: .sx-table collapses its borders, and a collapsed table ignores radius. */
.pr-who__table[b-8q42cp8t25] {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--line);
}

/* The name column takes the slack, so the figures sit against the names they belong to. */
.pr-who__table th:first-child[b-8q42cp8t25],
.pr-who__table td:first-child[b-8q42cp8t25] {
    width: 100%;
}

.pr-who__table caption[b-8q42cp8t25] {
    padding: var(--sp-3) var(--sp-5) 0;
    text-align: left;
    caption-side: top;
}

.pr-who__table tbody tr:hover td[b-8q42cp8t25] {
    background: transparent;
}

.pr-who__table td.is-num[b-8q42cp8t25],
.pr-who__table tfoot td[b-8q42cp8t25] {
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--fg-strong);
}

/* The total is a conclusion: an accent rule between it and the rows it sums. The theme drops
   tbody's last border, so it goes back here. */
.pr-who__table tbody tr:last-child td[b-8q42cp8t25] {
    border-bottom: 1px solid var(--line);
}

.pr-who__table tfoot td[b-8q42cp8t25] {
    padding: var(--sp-3) var(--sp-5);
    border-top: 2px solid var(--accent);
    background: var(--bg-raised);
}

/* Nudged down past the caption, so the first note lines up with the table's top border. */
.pr-who__notes[b-8q42cp8t25] {
    display: grid;
    gap: var(--sp-5);
    padding-top: calc(var(--sp-5) + 1.5em);
}

.pr-who__notes p[b-8q42cp8t25] {
    margin: 0;
    max-width: none;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--fg-muted);
}

.pr-who__notes b[b-8q42cp8t25] {
    color: var(--fg-strong);
    font-weight: 500;
}

.pr-who__sources[b-8q42cp8t25] {
    max-width: none;
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--fg-muted);
}

.pr-who__sources b[b-8q42cp8t25] {
    color: var(--fg);
    font-weight: 500;
}

.pr-who__sources a[b-8q42cp8t25] {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 2px;
}

.pr-who__sources a:hover[b-8q42cp8t25] {
    color: var(--fg-strong);
    text-decoration-color: currentColor;
}

/* Three numbered steps, the number drawn from a counter as the overview's list does. */
.pr-steps[b-8q42cp8t25] {
    display: grid;
    max-width: var(--measure);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.pr-steps li[b-8q42cp8t25] {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2ch 1fr;
    column-gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--line);
}

.pr-steps li[b-8q42cp8t25]::before {
    content: counter(step);
    grid-row: span 2;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--accent-text);
}

.pr-steps strong[b-8q42cp8t25] {
    color: var(--fg-strong);
    font-weight: 500;
}

.pr-steps span[b-8q42cp8t25] {
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

/* The founder's offer, as the overview draws it: copy left, the number right. */
.pr-offer[b-8q42cp8t25] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-7);
    align-items: center;
}

.pr-kicker[b-8q42cp8t25] {
    margin: 0 0 var(--sp-3);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.pr-offer__copy h2[b-8q42cp8t25] { margin-bottom: var(--sp-4); }

.pr-offer__copy p:last-child[b-8q42cp8t25] {
    max-width: 40ch;
    color: var(--fg-muted);
}

.pr-offer__figure[b-8q42cp8t25] {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-7);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    text-align: center;
}

.pr-offer__amount[b-8q42cp8t25] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}

.pr-offer__label[b-8q42cp8t25] {
    max-width: 16ch;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.pr-faq[b-8q42cp8t25] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-7);
    margin: 0;
}

.pr-faq dt[b-8q42cp8t25] {
    margin-bottom: var(--sp-1);
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--fg-strong);
}

.pr-faq dd[b-8q42cp8t25] {
    margin: 0;
    color: var(--fg-muted);
}

@media (max-width: 800px) {
    .pr-hero[b-8q42cp8t25],
    .pr-cards[b-8q42cp8t25],
    .pr-who[b-8q42cp8t25],
    .pr-offer[b-8q42cp8t25],
    .pr-faq[b-8q42cp8t25] {
        grid-template-columns: 1fr;
    }

    .pr-price[b-8q42cp8t25] { min-width: 0; }

    /* Full width now, so the bloom's sideways reach would run past the page edge and put a
       horizontal scrollbar under the whole page. Straight up and down only. */
    .pr-price[b-8q42cp8t25]::before { inset: -40px 0; }

    .pr-who__notes[b-8q42cp8t25] { padding-top: 0; }
}

/* On a phone the table's three columns need the gutter the theme gives a cell more than they need
   the display size, so both come down; and if a longer campus name ever pushes it wider anyway, the
   row scrolls rather than the page. */
@media (max-width: 480px) {
    .pr-who[b-8q42cp8t25] { overflow-x: auto; }

    .pr-who__table th[b-8q42cp8t25],
    .pr-who__table td[b-8q42cp8t25],
    .pr-who__table tfoot td[b-8q42cp8t25] {
        padding: var(--sp-3);
    }

    .pr-who__table td.is-num[b-8q42cp8t25],
    .pr-who__table tfoot td[b-8q42cp8t25] {
        font-size: var(--text-base);
    }

    /* Headings and campus names may wrap; the figures never do. */
    .pr-who__table th[b-8q42cp8t25],
    .pr-who__table td:first-child[b-8q42cp8t25] {
        white-space: normal;
    }
}
/* /Components/Pages/Clients/Screens.razor.rz.scp.css */
.sx-screens[b-lc02ekk8cj] {
    padding: var(--sp-7) 0 var(--sp-8);
}

.sx-screens__head[b-lc02ekk8cj] {
    max-width: 56ch;
    margin-bottom: var(--sp-7);
}

.sx-screens__head p[b-lc02ekk8cj] {
    margin-top: var(--sp-3);
    color: var(--fg-muted);
}

/* One row, in order. It scrolls rather than wraps below the content width: a wrapped seventh screen
   stops the set being takeable in at a glance, which is the only reason this page exists. */
.sx-screens__strip[b-lc02ekk8cj] {
    display: flex;
    gap: var(--sp-3);
    margin: 0;
    padding: 0 0 var(--sp-3);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.sx-screens__strip > li[b-lc02ekk8cj] {
    flex: none;
}

.sx-screens__strip figure[b-lc02ekk8cj] {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    width: calc(402px * 0.40);
}

/*
  The frame is scaled whole rather than re-laid-out: the concept's internal measurements are
  load-bearing, and resizing anything inside wraps card captions onto two lines. The link carries
  the scaled box so the strip lays out correctly; the transform is on the frame itself, from its
  top-left, so the painted and laid-out geometry agree.

  0.40 is what makes all seven fit the content width at 1280: seven at 161px plus six 12px gaps is
  1199, against 1216 available. 402 x 871 is the frame's natural size. It was 0.57 when there were
  five; Settings made it six and Match made it seven.
*/
.sx-screens__phone[b-lc02ekk8cj] {
    --phone-scale: 0.40;
    position: relative;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.sx-screens__frame[b-lc02ekk8cj] {
    display: block;
}

/* The whole frame is the target, and the focus ring follows the frame's corners. */
.sx-screens__open[b-lc02ekk8cj] {
    position: absolute;
    inset: 0;
    border-radius: calc(54px * var(--phone-scale));
}

.sx-screens__phone[b-lc02ekk8cj]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

.sx-screens__strip figcaption[b-lc02ekk8cj] {
    display: grid;
    gap: 2px;
}

.sx-screens__strip figcaption strong[b-lc02ekk8cj] {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 400;
    color: var(--fg-strong);
}

.sx-screens__strip figcaption span[b-lc02ekk8cj] {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--fg-muted);
}
/* /Components/Pages/Clients/Walkthrough.razor.rz.scp.css */
/* Layout for the walk-through. Scoped: this is one page's composition, not a design-system part. */
.demo-tabs[b-sqo4hb28br] {
    margin-top: var(--sp-5);
}

.demo-step[b-sqo4hb28br] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-8);
    align-items: start;
}

.demo-step__copy[b-sqo4hb28br] { min-width: 0; }

.demo-step__stage[b-sqo4hb28br] {
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
    min-width: 402px;
}

.demo-caption[b-sqo4hb28br] { text-align: center; }

.demo-drive[b-sqo4hb28br] { font-size: var(--text-sm); }

.demo-points[b-sqo4hb28br] {
    margin: var(--sp-5) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-3);
    max-width: var(--measure);
}

.demo-points li[b-sqo4hb28br] {
    padding-left: var(--sp-4);
    border-left: 2px solid var(--accent);
    color: var(--fg-muted);
}

@media (max-width: 900px) {
    .demo-step[b-sqo4hb28br] { grid-template-columns: 1fr; }
    .demo-step__stage[b-sqo4hb28br] { min-width: 0; }
}

/* The live controls on the screen showing, beside the step's own argument. */
.demo-label[b-sqo4hb28br] {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.demo-taps[b-sqo4hb28br] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-2);
    max-width: var(--measure);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.demo-taps strong[b-sqo4hb28br] { color: var(--fg-strong); font-weight: 600; }
/* /Components/Pages/Contact.razor.rz.scp.css */
/*
  The contact page: the reason on the left, the form on the right, one column on a phone with the
  reason first — it is two sentences, and the form is the point.
*/
.ct[b-y1n8aonm0i] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-8) 0 var(--sp-9);
}

.ct__lead[b-y1n8aonm0i] {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
}

/* Bigger than the theme's h1, which is sized for admin page titles. */
.ct__lead h1[b-y1n8aonm0i] {
    margin: 0;
    max-width: 14ch;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ct__lead .sx-hero__lede[b-y1n8aonm0i] {
    margin: 0;
}

.ct__note[b-y1n8aonm0i] {
    margin: 0;
    max-width: 40ch;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.ct__form[b-y1n8aonm0i] {
    padding-top: var(--sp-2);
}

@media (max-width: 800px) {
    .ct[b-y1n8aonm0i] {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        padding-top: var(--sp-6);
    }

    .ct__form[b-y1n8aonm0i] { padding-top: 0; }
}
/* /Components/Pages/Early.razor.rz.scp.css */
/*
  The waitlist hero.

  Two columns on a desktop, one on a phone, and the email field inside the first screen in both.
  Everything below the field is proof rather than instruction, so it can fall below the fold
  without costing a signup.
*/
.sx-early[b-dqebtj9z85] {
    /* The bottom is sp-7, not sp-9: it is no longer the end of the page but the seam between the
       hero and the section under it, and 96 here against 96 there put 192px of nothing between
       the trust line and the next thing to read. */
    padding: var(--sp-8) 0 var(--sp-7);
}

.sx-early__grid[b-dqebtj9z85] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-9);
    align-items: center;
}

.sx-early__lead[b-dqebtj9z85] {
    display: grid;
    gap: var(--sp-5);
    align-content: start;
    max-width: 40rem;
}

.sx-early__eyebrow[b-dqebtj9z85] {
    margin: 0;
}

/*
  Bigger than the theme's h1 (--text-2xl, sized for admin page titles) because this is the one
  sentence the page exists to say. The display face and its optical size come from the theme; only
  the scale is local.
*/
.sx-early__headline[b-dqebtj9z85] {
    margin: 0;
    font-size: clamp(2.5rem, 5.4vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: 16ch;
}

.sx-early__lede[b-dqebtj9z85] {
    margin: 0;
    max-width: 46ch;
    font-size: var(--text-lg);
    line-height: 1.45;
    color: var(--fg);
}

.sx-early__invited[b-dqebtj9z85] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--fg-muted);
}

/* The fallback for the proof slot: true for every visitor, and no API call to be wrong about. */
.sx-early__campuses[b-dqebtj9z85] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    align-items: baseline;
    margin: 0;
    max-width: none;
    font-size: var(--text-sm);
    color: var(--fg);
}

.sx-early__campuses-label[b-dqebtj9z85] {
    color: var(--fg-muted);
}

/*
  Full width under both columns rather than tucked under the left one. On a phone that puts it
  last, after the app preview, which is the order the design calls for; on a desktop it reads as a
  page-level footer rule, which is tidier than a second short rule inside the text column.
*/
.sx-early__trust[b-dqebtj9z85] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    max-width: none;
    margin: var(--sp-8) 0 0;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

/*
  The glow is drawn here rather than with the theme's .sx-glow, which insets its pseudo-element by
  -30%. On the small inline-block that class was written for that is a few pixels; on a 402px
  column it reaches 120px past the edge, which put the document's scroll width past the viewport
  and gave the page a 16px horizontal scrollbar. Bounded in px so the reach cannot scale with the
  element it sits behind.
*/
.sx-early__aside[b-dqebtj9z85] {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: var(--sp-4);
}

.sx-early__aside[b-dqebtj9z85]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -32px;
    background: radial-gradient(closest-side at 50% 42%, var(--sx-glow), transparent 70%);
    pointer-events: none;
}

.sx-early__caption[b-dqebtj9z85] {
    margin: 0;
    max-width: 28ch;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

/*
  DemoPhone is drawn at the concept's true 402px and has no responsive behaviour of its own — it
  was built for a demo page that is only ever opened on a laptop. The frame is scaled rather than
  re-laid-out because the concept's own measurements are load-bearing: resizing anything inside
  wraps card captions like "Junior · Psych · 0.3 mi" onto two lines, which is the exact
  compression the concept does not have.

  The wrapper carries the scaled size and the frame carries the transform, from its top-left, so
  the layout box and the painted box agree. Scaling alone would not do: a transform does not
  change layout, so a 402px frame stays a 402px column even at 0.74 — and on a 390px phone that is
  a page wider than the screen.

  The scale itself is not decoration either. At its natural 871px the frame is taller than the
  text column, and because the two columns are centred against each other it pushed the email
  field to y=705 on a 1440x900 laptop — below the fold, which is the one mistake this page is a
  rewrite of. The phone is the garnish; the field is the point.
*/
.sx-early__phone[b-dqebtj9z85] {
    --phone-scale: 1;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.sx-early__phone[b-dqebtj9z85]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

@media (min-width: 1001px) {
    .sx-early__phone[b-dqebtj9z85] { --phone-scale: 0.75; }
}

@media (min-width: 1001px) and (max-width: 1240px) {
    .sx-early__phone[b-dqebtj9z85] { --phone-scale: 0.66; }
}

/* A 13" laptop with a bookmarks bar. Same reasoning, less room to spend. */
@media (min-width: 1001px) and (max-height: 820px) {
    .sx-early__phone[b-dqebtj9z85] { --phone-scale: 0.62; }
}

@media (max-width: 1000px) {
    .sx-early__grid[b-dqebtj9z85] {
        grid-template-columns: 1fr;
        gap: var(--sp-7);
    }

    /* One column, so the text column takes the full measure. */
    .sx-early__lead[b-dqebtj9z85] { max-width: none; }

    /* The aside is now the full content width, so any sideways bleed lands outside the viewport
       and widens the document. It has nothing left to bleed into; the vertical reach is enough. */
    .sx-early__aside[b-dqebtj9z85]::before { inset: -40px 0; }
}

/* Below here the frame no longer fits the page's own gutters at full size. */
@media (max-width: 440px) {
    .sx-early__phone[b-dqebtj9z85] { --phone-scale: 0.84; }
}

@media (max-width: 380px) {
    .sx-early__phone[b-dqebtj9z85] { --phone-scale: 0.74; }
}

/* ---------- The idea ---------- */
/*
  The same two-column shape as the hero, deliberately: it is the same page continuing to talk, and
  a second layout here would read as a different site. What differs is weight — a rule and a
  smaller headline, so the hero stays the loudest thing above the fold and this reads as the
  paragraph after it rather than a competing pitch.
*/
/* No rule of its own. The trust row above already draws one, and a second a few lines under it
   fenced that one line of text into a strip. The space does the separating — but half of what it
   was: the hero's bottom padding is the other half of this gap, and the two together were far
   more than a seam needs. */
.sx-idea[b-dqebtj9z85] {
    padding: var(--sp-6) 0 var(--sp-9);
}

/*
  Mirrored against the hero: phone on the left, words on the right. The page alternates rather
  than repeating the same row twice, which is what made the second section read as a restatement
  of the first.

  The placement is done here and not in the markup so the DOM order can stay words-then-phone.
  That is the order this stacks in on a narrow screen, and leading with a match screen before the
  reader has been told what it is would be backwards.
*/
.sx-idea__grid[b-dqebtj9z85] {
    display: grid;
    /* Two equal halves, not auto + 1fr. The phone column used to be only as wide as the phone,
       which left the words starting a third of the way across and running to the right gutter —
       so the column read as centred on the page rather than as one side of a pair. */
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-9);
    align-items: center;
}

.sx-idea__aside[b-dqebtj9z85] { grid-column: 1; grid-row: 1; }
.sx-idea__lead[b-dqebtj9z85]  { grid-column: 2; grid-row: 1; }

.sx-idea__lead[b-dqebtj9z85] {
    display: grid;
    gap: var(--sp-5);
    align-content: start;
    /* No cap: the column is the measure now, and a cap inside it would leave the text floating
       short of the right gutter — the thing that made it look centred. */
    max-width: none;
}

.sx-idea__eyebrow[b-dqebtj9z85] {
    margin: 0;
}

/* Between the theme's h2 and the hero's headline. It is a section head, not the page's one claim. */
.sx-idea__headline[b-dqebtj9z85] {
    margin: 0;
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    max-width: 14ch;
}

.sx-idea__lede[b-dqebtj9z85] {
    margin: 0;
    max-width: none;
    font-size: var(--text-lg);
    line-height: 1.45;
    color: var(--fg);
}

/*
  Three points, not a bulleted list: the markers are dropped and the lead-in carries the weight
  instead, so the column reads as three short paragraphs. A disc next to a sentence this long
  makes it look like a feature table, which is the register the whole page is avoiding.
*/
.sx-idea__points[b-dqebtj9z85] {
    display: grid;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sx-idea__points li[b-dqebtj9z85] {
    margin: 0;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--line);
    line-height: 1.5;
    color: var(--fg);
}

.sx-idea__points strong[b-dqebtj9z85] {
    display: block;
    color: var(--fg-strong);
}

/* The one line carried over from Hapiton's script almost as written. Given room to be read. */
.sx-idea__close[b-dqebtj9z85] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--fg-strong);
}

.sx-idea__aside[b-dqebtj9z85] {
    display: grid;
    justify-items: center;
}

.sx-idea__phone[b-dqebtj9z85] {
    --phone-scale: 1;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.sx-idea__phone[b-dqebtj9z85]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

/* The same size as the hero's phone, at the same breakpoints — it is half the row now, and a
   smaller frame in a half-width column read as an afterthought sitting in a lot of empty space. */
@media (min-width: 1001px) {
    .sx-idea__phone[b-dqebtj9z85] { --phone-scale: 0.75; }
}

@media (min-width: 1001px) and (max-width: 1240px) {
    .sx-idea__phone[b-dqebtj9z85] { --phone-scale: 0.66; }
}

/* A 13" laptop with a bookmarks bar, as in the hero. */
@media (min-width: 1001px) and (max-height: 820px) {
    .sx-idea__phone[b-dqebtj9z85] { --phone-scale: 0.62; }
}

@media (max-width: 1000px) {
    .sx-idea__grid[b-dqebtj9z85] {
        grid-template-columns: 1fr;
        gap: var(--sp-7);
    }

    /* Back to source order — words, then the phone. */
    .sx-idea__aside[b-dqebtj9z85],
    .sx-idea__lead[b-dqebtj9z85] {
        grid-column: auto;
        grid-row: auto;
    }

    .sx-idea__lead[b-dqebtj9z85] { max-width: none; }
}

@media (max-width: 440px) {
    .sx-idea__phone[b-dqebtj9z85] { --phone-scale: 0.84; }
}

@media (max-width: 380px) {
    .sx-idea__phone[b-dqebtj9z85] { --phone-scale: 0.74; }
}


/* =====================================================================
   The first date — where they go, and who decides.

   Same row as the idea section above it, flipped back: words left, phone right. The page
   alternates rather than stacking three identical rows, and this puts the phone back on the side
   the hero uses. No grid-column overrides here because that IS source order — the mirror is the
   exception, not this.
   ===================================================================== */
.sx-place[b-dqebtj9z85] {
    padding: var(--sp-6) 0 var(--sp-9);
}

.sx-place__grid[b-dqebtj9z85] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-9);
    align-items: center;
}

.sx-place__lead[b-dqebtj9z85] {
    display: grid;
    gap: var(--sp-5);
    align-content: start;
    max-width: none;
}

.sx-place__eyebrow[b-dqebtj9z85] {
    margin: 0;
}

.sx-place__headline[b-dqebtj9z85] {
    margin: 0;
    font-size: clamp(1.9rem, 3.2vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.015em;
    max-width: 15ch;
}

.sx-place__lede[b-dqebtj9z85] {
    margin: 0;
    max-width: none;
    font-size: var(--text-lg);
    line-height: 1.45;
    color: var(--fg);
}

.sx-place__points[b-dqebtj9z85] {
    display: grid;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sx-place__points li[b-dqebtj9z85] {
    margin: 0;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--line);
    line-height: 1.5;
    color: var(--fg);
}

.sx-place__points strong[b-dqebtj9z85] {
    display: block;
    color: var(--fg-strong);
}

.sx-place__close[b-dqebtj9z85] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--fg-strong);
}

.sx-place__aside[b-dqebtj9z85] {
    display: grid;
    justify-items: center;
}

.sx-place__phone[b-dqebtj9z85] {
    --phone-scale: 1;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.sx-place__phone[b-dqebtj9z85]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

/* The hero's and the idea section's sizes, at their breakpoints. Three phones down one page have
   to be the same phone. */
@media (min-width: 1001px) {
    .sx-place__phone[b-dqebtj9z85] { --phone-scale: 0.75; }
}

@media (min-width: 1001px) and (max-width: 1240px) {
    .sx-place__phone[b-dqebtj9z85] { --phone-scale: 0.66; }
}

@media (min-width: 1001px) and (max-height: 820px) {
    .sx-place__phone[b-dqebtj9z85] { --phone-scale: 0.62; }
}

@media (max-width: 1000px) {
    .sx-place__grid[b-dqebtj9z85] {
        grid-template-columns: 1fr;
        gap: var(--sp-7);
    }

    .sx-place__lead[b-dqebtj9z85] { max-width: none; }
}

@media (max-width: 440px) {
    .sx-place__phone[b-dqebtj9z85] { --phone-scale: 0.84; }
}

@media (max-width: 380px) {
    .sx-place__phone[b-dqebtj9z85] { --phone-scale: 0.74; }
}
/* /Components/Pages/Investors.razor.rz.scp.css */
.iv-hero[b-j09al6gi6k] {
    padding: var(--sp-8) 0 var(--sp-7);
    border-bottom: 1px solid var(--line);
}

/* Copy left, the app right, as the client section's front page does it. Two equal columns rather
   than an `auto` second one: `auto` shrinks to the device and pins it against the right edge of
   the page, which moves the dead space between the columns instead of filling it. */
.iv-hero__grid[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: center;
}

.iv-hero__copy[b-j09al6gi6k] { min-width: 0; }

.iv-hero__aside[b-j09al6gi6k] {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: var(--sp-3);
}

/* The brand's bloom behind the device. Bounded in px so its reach cannot scale with the element it
   sits behind and push a horizontal scrollbar onto the page. */
.iv-hero__aside[b-j09al6gi6k]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -32px;
    background: radial-gradient(closest-side at 50% 42%, var(--sx-glow), transparent 70%);
    pointer-events: none;
}

/* DemoPhone is drawn at the concept's true 402px and has no responsive behaviour of its own, so it
   is scaled with a transform and the WRAPPER carries the scaled box — a transform does not affect
   layout size, and without this the hero would reserve the full 871px and open a hole under the
   copy. Scaled against the window HEIGHT, which is the constraint that bites: the phone is more
   than twice as tall as it is wide, so it decides where the hero ends. */
.iv-hero__phone[b-j09al6gi6k] {
    --phone-scale: 0.6;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.iv-hero__phone[b-j09al6gi6k]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

@media (min-height: 950px) {
    .iv-hero__phone[b-j09al6gi6k] { --phone-scale: 0.7; }
}

@media (max-height: 760px) {
    .iv-hero__phone[b-j09al6gi6k] { --phone-scale: 0.5; }
}

.iv-hero__caption[b-j09al6gi6k] {
    margin: 0;
    max-width: 32ch;
    text-align: center;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--fg-muted);
}

.iv-hero__try[b-j09al6gi6k] {
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Below this the copy has the width to itself and the phone would halve it. */
@media (max-width: 1000px) {
    .iv-hero__grid[b-j09al6gi6k] { grid-template-columns: 1fr; }
    .iv-hero__aside[b-j09al6gi6k] { display: none; }
}

.iv-eyebrow[b-j09al6gi6k] {
    margin: 0 0 var(--sp-5);
}

/* Bigger than the theme's h1, which is sized for admin page titles: this is the one sentence the
   page exists to say. */
.iv-hero h1[b-j09al6gi6k] {
    max-width: 20ch;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.iv-section[b-j09al6gi6k] {
    padding: var(--sp-7) 0;
    border-bottom: 1px solid var(--line);
}

.iv-section > h2[b-j09al6gi6k],
.iv-two h2[b-j09al6gi6k] {
    margin-bottom: var(--sp-5);
}

/*
  The loop. Four cards in a square, read clockwise: one and two across the top, three and four
  back along the bottom, so the arrow out of four points up at one. The numbers and the arrows
  are both drawn here, so the markup underneath stays a plain ordered list.
*/
.iv-loop[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "one two"
        "four three";
    gap: var(--sp-7) var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.iv-loop li[b-j09al6gi6k] {
    position: relative;
    counter-increment: step;
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    color: var(--fg-muted);
}

.iv-loop li:nth-child(1)[b-j09al6gi6k] { grid-area: one; }
.iv-loop li:nth-child(2)[b-j09al6gi6k] { grid-area: two; }
.iv-loop li:nth-child(3)[b-j09al6gi6k] { grid-area: three; }
.iv-loop li:nth-child(4)[b-j09al6gi6k] { grid-area: four; }

.iv-loop li[b-j09al6gi6k]::before {
    content: counter(step);
    display: block;
    margin-bottom: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--accent-text);
}

.iv-loop strong[b-j09al6gi6k] {
    display: block;
    margin-bottom: var(--sp-1);
    color: var(--fg-strong);
}

/* The arrows sit in the middle of the gap between cards, one per card, pointing at the next. */
.iv-loop li[b-j09al6gi6k]::after {
    position: absolute;
    font-size: var(--text-xl);
    line-height: 1;
    color: var(--accent-text);
}

.iv-loop li:nth-child(1)[b-j09al6gi6k]::after {
    content: "→";
    top: 50%;
    right: calc(-1 * var(--sp-8) / 2);
    transform: translate(50%, -50%);
}

.iv-loop li:nth-child(2)[b-j09al6gi6k]::after {
    content: "↓";
    left: 50%;
    bottom: calc(-1 * var(--sp-7) / 2);
    transform: translate(-50%, 50%);
}

.iv-loop li:nth-child(3)[b-j09al6gi6k]::after {
    content: "←";
    top: 50%;
    left: calc(-1 * var(--sp-8) / 2);
    transform: translate(-50%, -50%);
}

.iv-loop li:nth-child(4)[b-j09al6gi6k]::after {
    content: "↑";
    left: 50%;
    top: calc(-1 * var(--sp-7) / 2);
    transform: translate(-50%, -50%);
}

/*
  Where the money comes from: three cards, each with a badge for when it starts, a name in the
  display face and one sentence. Read as a row of headings, not a list.
*/
.iv-money[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.iv-money li[b-j09al6gi6k] {
    display: grid;
    align-content: start;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

/* ::deep, because the badge is a child component and its root never carries this page's scope
   attribute; without it the rule matches nothing and the grid stretches the badge card-wide. */
.iv-money[b-j09al6gi6k]  .sx-badge {
    justify-self: start;
}

.iv-money strong[b-j09al6gi6k] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--fg-strong);
}

.iv-money span[b-j09al6gi6k] {
    color: var(--fg-muted);
}

.iv-money__note[b-j09al6gi6k] {
    margin-top: var(--sp-5);
    color: var(--fg-muted);
}

/*
  Why a dollar in comes back: four points, each led by one word in the display face at headline
  size. The word is the argument; the sentence is the evidence.
*/
.iv-return[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-7);
    margin: 0;
    padding: 0;
    list-style: none;
}

.iv-return li[b-j09al6gi6k] {
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 2px solid var(--accent);
}

.iv-return b[b-j09al6gi6k] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1;
    color: var(--fg-strong);
}

.iv-return span[b-j09al6gi6k] {
    max-width: 40ch;
    color: var(--fg-muted);
}

/*
  Terms: three tickets in a row, the amount in the display face at its largest, the equity under
  it, and what the ticket funds under that. The middle line is the deal; the last line is why it
  is a good one.
*/
.iv-terms[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.iv-terms li[b-j09al6gi6k] {
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    text-align: center;
}

.iv-terms__amount[b-j09al6gi6k] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--fg-strong);
    font-variant-numeric: tabular-nums;
}

.iv-terms__equity[b-j09al6gi6k] {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--accent-text);
}

.iv-terms__dates[b-j09al6gi6k] {
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

/* Full width, one column. The theme puts every <p> on a 52ch measure, which is right for prose
   set beside other things and wrong here: this section is a heading and two statements with
   nothing to their right, so the measure was drawing a narrow strip down the left of an otherwise
   empty band. Spanning turns three ragged lines into two that run the width of the page, which is
   also how the sentence wants to be read — it is a position, not an argument. */
.iv-terms__lede[b-j09al6gi6k] {
    margin-top: var(--sp-5);
    max-width: none;
}

/* The securities line. Quieter than the lede above it, but it has to be legible: it is the
   only thing on the page that says the tiers are not themselves an offer.

   --text-sm, not --fs-sm. There is no --fs-sm in the theme and never was, and a var() with no
   fallback makes the WHOLE declaration invalid at computed-value time rather than falling back to
   anything — font-size then inherits, so the disclaimer had been rendering at body size, which is
   the one thing the comment above says it must not do. Nothing warns about this: the rule looks
   fine, the other four declarations apply, and only the size is silently dropped. */
.iv-terms__legal[b-j09al6gi6k] {
    margin-top: var(--sp-5);
    max-width: none;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

/* The button under the terms, with its one line of reassurance beside it. */
.iv-two[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-7);
}

.iv-links[b-j09al6gi6k] {
    display: grid;
    gap: var(--sp-3);
    max-width: var(--measure);
    margin: 0;
    padding: 0;
    list-style: none;
}

.iv-links li[b-j09al6gi6k] {
    display: grid;
    gap: 2px;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--accent);
}

.iv-links a[b-j09al6gi6k],
.iv-links__plain[b-j09al6gi6k] {
    color: var(--fg-strong);
    font-weight: 500;
}

.iv-links a:hover[b-j09al6gi6k] {
    color: var(--accent-text);
    text-decoration: none;
}

.iv-links li > span:last-child[b-j09al6gi6k],
.iv-muted[b-j09al6gi6k] {
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

@media (max-width: 800px) {
    .iv-loop[b-j09al6gi6k] {
        grid-template-columns: 1fr;
        grid-template-areas: "one" "two" "three" "four";
        gap: var(--sp-7);
    }

    /* One column: every arrow points down at the next card, and the last one turns back. Written
       per card rather than on the bare li, because the per-card desktop rules above outrank a
       plain `li::after` and would keep card one pointing right and card three pointing left. */
    .iv-loop li:nth-child(1)[b-j09al6gi6k]::after,
    .iv-loop li:nth-child(2)[b-j09al6gi6k]::after,
    .iv-loop li:nth-child(3)[b-j09al6gi6k]::after,
    .iv-loop li:nth-child(4)[b-j09al6gi6k]::after {
        content: "↓";
        top: auto;
        right: auto;
        left: 50%;
        bottom: calc(-1 * var(--sp-7) / 2);
        transform: translate(-50%, 50%);
    }

    .iv-loop li:nth-child(4)[b-j09al6gi6k]::after {
        content: "↻";
    }

    .iv-money[b-j09al6gi6k],
    .iv-return[b-j09al6gi6k],
    .iv-terms[b-j09al6gi6k],
    .iv-two[b-j09al6gi6k] {
        grid-template-columns: 1fr;
    }
}

/*
  How many are on each side. The one section on this page whose figures are not the founder's, so
  it is built to look like evidence rather than like the rest of the argument: a real table with a
  rule under the total, numbers in the display face, and a sources paragraph closing it. The two
  halves — students, then venues — are stacked rather than set side by side, because the table
  wants three columns of its own and halving the section squeezes it into two lines per campus.
*/
.iv-who__lede[b-j09al6gi6k] {
    max-width: var(--measure);
    margin-bottom: var(--sp-6);
    color: var(--fg-muted);
}

/* h3 is unstyled in the theme — nothing else on the public site nests this deep. Set as a small
   caps-tracked label rather than a third heading size, so the section reads as one argument with
   two halves rather than as two sections that lost their rules. */
.iv-who__head[b-j09al6gi6k] {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
}

/* The venues heading follows the students' notes, and the gap between the two halves has to be
   bigger than the gap inside either one or the section reads as four things instead of two. */
.iv-who__notes + .iv-who__head[b-j09al6gi6k] {
    margin-top: var(--sp-7);
}

/*
  The campus table. `.sx-table` is the admin theme's and carries a row hover, which is an
  affordance for a table you can click — this one you cannot, so it is turned back off here rather
  than left to imply something. The figures sit in the display face at body size: this is the
  evidence, and it should read as numbers rather than as prose that happens to contain digits.
*/
/*
  The students half: table left, its caveats right. The table runs about half the section's width
  and the rest of that row was empty, so the notes moved into it — and they read better there,
  as annotations OF the table rather than as a band of prose underneath it.

  The table column is the wider of the two. Not for the table's sake — it has a max-width and
  stops growing — but for the notes': an equal split put the note text on a ~76 character measure,
  which is past comfortable for 13px. align-items: start so the notes sit at the top of the row
  rather than stretching to the table's height.
*/
.iv-who__split[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
    margin-bottom: var(--sp-6);
}

/* Inside the split the table fills its column: the standalone min/max widths were sized against
   the whole section and would otherwise fight the grid track. */
.iv-who__split .iv-who__table[b-j09al6gi6k] {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-bottom: 0;
}

/* Stacked, not columned, and nudged down past the table's caption so the first note lines up with
   the table's top border rather than with the line of type above it. */
.iv-who__notes--beside[b-j09al6gi6k] {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    margin-bottom: 0;
    padding-top: calc(var(--sp-5) + 1.5em);
}

/* No border-radius here, though every other panel on the page has one: .sx-table sets
   border-collapse: collapse, and a collapsed table ignores radius on the table box. The rule
   would round nothing and read, to the next person, as a corner that had somehow stopped
   working. Square is what a table is anyway. */
.iv-who__table[b-j09al6gi6k] {
    width: auto;
    min-width: min(100%, 620px);
    max-width: 760px;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--line);
}

/* Left column takes the slack. Full width, the campus name and its figures ended up a third of a
   screen apart and the eye had to travel the gap five times; letting the name column absorb the
   remainder pulls the numbers back against the text they belong to. */
.iv-who__table th:first-child[b-j09al6gi6k],
.iv-who__table td:first-child[b-j09al6gi6k] {
    width: 100%;
}

.iv-who__table caption[b-j09al6gi6k] {
    padding: var(--sp-3) var(--sp-5) 0;
    text-align: left;
    caption-side: top;
}

.iv-who__table tbody tr:hover td[b-j09al6gi6k] {
    background: transparent;
}

.iv-who__table td.is-num[b-j09al6gi6k],
.iv-who__table tfoot td[b-j09al6gi6k] {
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--fg-strong);
}

/* The total is a conclusion, so it gets the accent rule that separates it from the rows it sums.
   tbody's last row drops its border in the theme; put one back, because here it is not the last
   row on the page. */
.iv-who__table tbody tr:last-child td[b-j09al6gi6k] {
    border-bottom: 1px solid var(--line);
}

.iv-who__table tfoot td[b-j09al6gi6k] {
    padding: var(--sp-3) var(--sp-5);
    border-top: 2px solid var(--accent);
    background: var(--bg-raised);
}

/*
  The venue figures. Four across, each a number over its unit — the same shape as the theme's
  sx-stat but with the label under the value rather than over it, because these read top to bottom
  as "this many, of these" rather than as a dashboard reading.
*/
.iv-who__stats[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
}

.iv-who__stats li[b-j09al6gi6k] {
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

.iv-who__stats b[b-j09al6gi6k] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1;
    color: var(--fg-strong);
    font-variant-numeric: tabular-nums;
}

.iv-who__stats span[b-j09al6gi6k] {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--fg-muted);
}

/* The notes under each half. Two columns of prose rather than one long measure: each paragraph is
   a separate point and setting them in a row keeps the section from turning into an essay. */
.iv-who__notes[b-j09al6gi6k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26ch), 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}

/* No rule over each note. There was one, and stacked in a column beside the table it turned three
   annotations into three horizontal lines running down the page — more structure than four lines
   of prose can carry, and competing with the table's own rules right next to them. The bold
   lead-in on each note already says where one ends and the next begins; the spacing does the rest. */
.iv-who__notes p[b-j09al6gi6k] {
    margin: 0;
    max-width: none;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--fg-muted);
}

.iv-who__notes b[b-j09al6gi6k] {
    color: var(--fg-strong);
    font-weight: 500;
}

/* Sourcing, at the quietest size the page uses that is still legible — it is not the argument,
   but an investor who wants to check a number has to be able to read where it came from. */
.iv-who__sources[b-j09al6gi6k] {
    max-width: none;
    margin: 0;
    font-size: var(--text-xs);
    line-height: 1.7;
    color: var(--fg-muted);
}

.iv-who__sources b[b-j09al6gi6k] {
    color: var(--fg);
    font-weight: 500;
}

/* Underlined AT REST, which nothing else on the site is: the theme's links are accent-coloured
   and underline only on hover, and that reads as emphasis rather than as a link when it happens
   five times inside one dense 12px muted paragraph — next to a bold "Sources." lead-in, colour
   alone is not a strong enough signal. The underline is drawn in the line colour and the text
   stays in the body colour, so the citations sit quiet until wanted; hover promotes both to the
   accent. skip-ink keeps the descenders legible at this size.

   The underline is currentColor, NOT --line-strong. Drawn in the line colour it came out at
   2.08:1 against the page in dark mode where the text it sits under is 6.17:1 — a link marker
   three times fainter than the word it marks, at 12px, which is a link nobody sees. Matching the
   text is the whole affordance here, since the colour is inherited and the underline is the only
   thing saying this is clickable. */
.iv-who__sources a[b-j09al6gi6k] {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
    text-decoration-skip-ink: auto;
}

.iv-who__sources a:hover[b-j09al6gi6k] {
    color: var(--accent-text);
    text-decoration-color: currentColor;
}

@media (max-width: 900px) {
    .iv-who__stats[b-j09al6gi6k] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Below this the notes column is too narrow to set type in, so the row becomes two rows and
       the notes go back under the table — three across if there is room, one if there is not. */
    .iv-who__split[b-j09al6gi6k] { grid-template-columns: 1fr; gap: var(--sp-6); }

    .iv-who__notes--beside[b-j09al6gi6k] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 26ch), 1fr));
        gap: var(--sp-5);
        padding-top: 0;
    }
}

/* The table's third column is the one that matters, so on a phone the *first* number goes rather
   than the last: total enrolment is the figure the note underneath spends its first paragraph
   discounting anyway. */
@media (max-width: 560px) {
    .iv-who__stats[b-j09al6gi6k] { grid-template-columns: 1fr; }

    .iv-who__table th:nth-child(2)[b-j09al6gi6k],
    .iv-who__table td:nth-child(2)[b-j09al6gi6k] { display: none; }
}
/* /Components/Pages/RequestInvite.razor.rz.scp.css */
/*
  The application form. One column, measured, because every field on it is a short answer and a
  two-column form of short answers reads as a table to fill in rather than a question to answer.
  The one row that pairs is email and phone, which are the two ways to reach the same person.
*/

.ri[b-avhec2j6gh] {
    max-width: 46rem;
    margin: 0 auto;
}

.ri__copy[b-avhec2j6gh] {
    max-width: var(--measure);
    margin-bottom: var(--sp-6);
}

.ri__form[b-avhec2j6gh] {
    display: grid;
    gap: var(--sp-4);
}

/* Aligned to the TOP, not stretched: a validation message appearing under one of the pair must
   not make the other input taller to match. The contact form's own row carries the same note,
   from the same bug. */
.ri__row[b-avhec2j6gh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    align-items: start;
}

@media (max-width: 640px) {
    .ri__row[b-avhec2j6gh] { grid-template-columns: 1fr; }
}

.ri__done[b-avhec2j6gh] {
    max-width: var(--measure);
}
/* /Components/Pages/Venues/Commit.razor.rz.scp.css */
/*
  The payment step's own parts: what saving a card means, and the card form. Stripe's fields are
  iframes this file cannot reach — venue-card.js styles them through Stripe's Appearance API from
  the same tokens, so they match the "Name on card" box in either colour mode.
*/

/* Three short facts, each a bold line and a quieter one, on a red rule like the hero's. It was a
   ul with no rule behind its class, and rendered as the browser's own bullets. */
.cm-points[b-3d95dihjvf] {
    list-style: none;
    margin: var(--sp-5) 0 0;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
}

.cm-points li[b-3d95dihjvf] {
    display: grid;
    gap: 2px;
    padding-left: var(--sp-4);
    border-left: 2px solid var(--accent);
}

.cm-points b[b-3d95dihjvf] {
    color: var(--fg-strong);
    font-weight: 600;
}

.cm-points span[b-3d95dihjvf] {
    color: var(--fg-muted);
    font-size: var(--text-sm);
}

/* The form as one raised panel, so the fields read as a single thing to fill in. */
.cm-form[b-3d95dihjvf] {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

/* Where Stripe's fields mount: held at their height while they load (number, expiry and code,
   country and ZIP, and Stripe's line about future payments), so the button does not jump down
   the page when they arrive. */
.cm-element[b-3d95dihjvf] {
    min-height: 280px;
}

.cm-element__wait[b-3d95dihjvf] {
    margin: 0;
    padding: var(--sp-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-1);
    color: var(--fg-muted);
    font-size: var(--text-sm);
}

/* .sx-error sets no display, but say it anyway: an alert that is hidden must stay hidden. */
.cm-error[hidden][b-3d95dihjvf] {
    display: none;
}

.cm-error[b-3d95dihjvf],
.cm-terms[b-3d95dihjvf] {
    margin: 0;
}

.cm-error[b-3d95dihjvf] {
    font-size: var(--text-sm);
}

.cm-form .sx-hero__actions[b-3d95dihjvf] {
    margin-top: 0;
}

@media (max-width: 480px) {
    .cm-form[b-3d95dihjvf] {
        padding: var(--sp-4);
    }
}
/* /Components/Pages/Venues/Portal.razor.rz.scp.css */
/*
  The portal: a line under the name, then two panels — the card and billing. Scoped CSS applies to
  elements written in THIS file even though VenueShell renders the fragment, because the scope
  attribute is stamped at compile time from where the markup lives rather than from where it ends
  up. SxBadge and EditForm render elements of their own, which these rules do not reach and do not
  need to.
*/

/* Campus and status on one line with room between them. The old class had no rule behind it, and
   the two ran together as "Awaiting cardKennesaw". */
.pt-sub[b-mj507m2gi1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-3) 0 0;
    color: var(--fg-muted);
}

.pt-panel + .pt-panel[b-mj507m2gi1] {
    margin-top: var(--sp-5);
}

.pt-panel h2[b-mj507m2gi1] {
    margin: 0;
    font-size: var(--text-lg);
}

/* The card, small, the way a pair is dealt it: the photograph, then the name and the lines under it. */
.pt-card[b-mj507m2gi1] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}

.pt-card__photo[b-mj507m2gi1] {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--r-2);
    background: var(--bg-sunken);
}

.pt-card__photo--empty[b-mj507m2gi1] {
    border: 1px dashed var(--line-strong);
}

.pt-card__name[b-mj507m2gi1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-md);
    color: var(--fg-strong);
}

.pt-card__price[b-mj507m2gi1] {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.pt-card__meta[b-mj507m2gi1] {
    margin: 2px 0 0;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.pt-card__blurb[b-mj507m2gi1] {
    margin: var(--sp-2) 0 0;
}

/* What the card still needs, under a rule, each item a jump to the field that fills it. Not held
   to the prose measure every p gets, or the rule stops short of the panel's edge. */
.pt-todo[b-mj507m2gi1] {
    max-width: none;
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
}

/* The labels are a size smaller than the values, so they sit on the values' baseline rather than
   at the top of the row, where they read as floating above it. */
.pt-facts[b-mj507m2gi1] {
    align-items: baseline;
}

/* A value that is an absence: quieter, but the same size as the values beside it — .sx-muted also
   shrinks the text, which suits a suffix and not a whole answer. */
.pt-quiet[b-mj507m2gi1] {
    color: var(--fg-muted);
}

.pt-note[b-mj507m2gi1] {
    margin: var(--sp-4) 0 0;
}

.pt-help[b-mj507m2gi1] {
    margin-top: var(--sp-6);
}

@media (max-width: 480px) {
    .pt-panel[b-mj507m2gi1] {
        padding: var(--sp-4);
    }

    .pt-card[b-mj507m2gi1] {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .pt-card__photo[b-mj507m2gi1] {
        width: 72px;
        height: 72px;
    }

    /* "Fee", "Card", "Billing": the shared 7rem label column left the answers a third of a phone. */
    .pt-facts[b-mj507m2gi1] {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }
}
/* /Components/Shared/AppBar.razor.rz.scp.css */
/*
  The wordmark is the way home, and it should read as one and be easy to hit.

  The mark itself is 75 by 24 pixels, which is a fine target for a mouse and a poor one for a
  finger: the accepted floor for a touch target is 44 pixels. The anchor is padded out to that
  height and pulled back by the same amount, so the hit area grows and the bar's layout does not
  move. No underline, since it is a mark and not a word, and a lift on hover and on keyboard
  focus so the cursor is not the only sign it is a link. ::deep because the wordmark is another
  component's root and never receives this file's scope attribute.
*/
.sx-site__nav > a[b-umd3vigcq2] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-2);
    margin-left: calc(-1 * var(--sp-2));
    text-decoration: none;
}

.sx-site__nav > a:hover[b-umd3vigcq2]  .sx-wordmark,
.sx-site__nav > a:focus-visible[b-umd3vigcq2]  .sx-wordmark {
    color: var(--accent-text);
}
/* /Components/Shared/CampusUnlock.razor.rz.scp.css */
/*
  Built from theme tokens rather than from .sx-card and .sx-stat. Those are dashboard furniture,
  sized for a column of panels; this is one persuasion device in a marketing hero and wants a
  tighter rhythm than an admin surface does.
*/
.sx-unlock[b-avdrf2dgej] {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}

.sx-unlock__head[b-avdrf2dgej] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/*
  An h2 for the document outline — the campus name is this panel's heading — but sized as a label.
  Left at the theme's h2 it would be display-face and 28px, competing with the page's own h1 two
  blocks above it.
*/
.sx-unlock__campus[b-avdrf2dgej] {
    margin: 0;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-strong);
}

.sx-unlock__count[b-avdrf2dgej] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.sx-unlock__track[b-avdrf2dgej] {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    overflow: hidden;
}

.sx-unlock__fill[b-avdrf2dgej] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

/* The theme caps paragraphs at --measure for reading columns; inside a panel that is already
   narrow it only creates a ragged second line. */
.sx-unlock__note[b-avdrf2dgej] {
    margin: 0;
    max-width: none;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}
/* /Components/Shared/ClientShell.razor.rz.scp.css */
/*
  The section's chrome. Scoped: it is this one section's composition, not a design-system part.
*/

/* Where you are, when there is somewhere below the page to be. Small and quiet: the page's h1
   does the announcing. */
.cl-crumbs[b-tjerq60y7d] {
    padding-top: var(--sp-5);
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.cl-crumbs ol[b-tjerq60y7d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-crumbs li + li[b-tjerq60y7d]::before {
    content: "›";
    margin-right: var(--sp-2);
}

.cl-crumbs a[b-tjerq60y7d] {
    color: var(--fg-muted);
}

.cl-crumbs a:hover[b-tjerq60y7d] {
    color: var(--fg-strong);
}

.cl-crumbs [aria-current="page"][b-tjerq60y7d] {
    color: var(--fg-strong);
}

/* The way in for a venue that already has an account: a question and one button, between rules
   like every other band on these pages, and quieter than the form under it. The rule above is its
   own, so it is drawn on every page — the overview's last section drops its bottom rule rather
   than doubling this one. */
.cl-signin[b-tjerq60y7d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-6);
    padding: var(--sp-7) 0;
    border-top: 1px solid var(--line);
}

.cl-signin h2[b-tjerq60y7d] {
    margin: 0;
    font-size: var(--text-xl);
}

.cl-signin p[b-tjerq60y7d] {
    margin: var(--sp-2) 0 0;
    color: var(--fg-muted);
}

/* Sign in, then Pricing to its right; on a phone they wrap. */
.cl-signin__actions[b-tjerq60y7d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}
/* /Components/Shared/ContactCta.razor.rz.scp.css */
/*
  Block flow, not a grid. A grid's gap applies uniformly between every child, which gave the
  heading 16px to its paragraph where every heading on the page above it has 24 — near enough to
  look like a mistake rather than a difference. Ordinary margins let this section keep the page's
  own rhythm exactly.

  No rule and no top padding: .sx-section already ends the page content with 64px of its own, and
  adding another 64 here put a 128px hole above the heading — four times any other gap on the
  page, and reading as something that had failed to render. 64 above, 64 below to the footer.
*/
.sx-contact-cta[b-9mgbsxwmtp] {
    padding: 0 0 var(--sp-8);
}

/* The same relationship the page's other headings have: bound to the text under it. */
.sx-contact-cta h2[b-9mgbsxwmtp] {
    margin: 0 0 var(--sp-5);
}

.sx-contact-cta__line[b-9mgbsxwmtp] {
    margin: 0 0 var(--sp-5);
    max-width: var(--measure);
    font-size: var(--text-base);
    color: var(--fg-muted);
}

/*
  Deliberately wider than its label. .sx-btn sizes to the word "Contact", which reads as an
  incidental control; a call to action should look like the thing to do next. Capped at 100% so
  the minimum cannot push past a narrow screen.
*/
.sx-contact-cta__button[b-9mgbsxwmtp] {
    min-width: 20rem;
    max-width: 100%;
    justify-content: center;
}

@media (max-width: 800px) {
    .sx-contact-cta[b-9mgbsxwmtp] {
        padding-bottom: var(--sp-7);
    }

    .sx-contact-cta__button[b-9mgbsxwmtp] {
        width: 100%;
    }
}
/* /Components/Shared/ContactForm.razor.rz.scp.css */
/*
  The fields, stacked, with name and email side by side where there is room. The inputs carry the
  theme's own classes because they render inside their components and never see this scope.
*/
.sx-contact[b-5g5006ug75] {
    display: grid;
    gap: var(--sp-4);
    max-width: 40rem;
}

.sx-contact__row[b-5g5006ug75] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    /* Not stretch. Each cell is a grid of label/input/message, and a stretched cell hands its
       spare height to the input — so one extra line under EITHER field silently made the other
       field's box taller. Aligning to the top keeps both inputs their natural height whatever
       appears below them. */
    align-items: start;
}

.sx-contact__actions[b-5g5006ug75] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
}

/* The panel that replaces the form. Held to the form's measure so nothing jumps on success. */
.sx-contact__done[b-5g5006ug75] {
    max-width: 40rem;
}

@media (max-width: 560px) {
    .sx-contact__row[b-5g5006ug75] { grid-template-columns: 1fr; }
}
/* /Components/Shared/ContactSection.razor.rz.scp.css */
/*
  The reason on the left, the form on the right — the same composition as the /contact page,
  scaled to sit under a page rather than be one. One column on a phone, the reason first: it is
  two sentences, and the form is the point.
*/
.sx-contact-section[b-1kix05uez6] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--sp-7) var(--sp-8);
    align-items: start;
    padding: var(--sp-8) 0;
    border-top: 1px solid var(--line);
}

.sx-contact-section__lead[b-1kix05uez6] {
    display: grid;
    gap: var(--sp-3);
    align-content: start;
}

.sx-contact-section__lead h2[b-1kix05uez6] {
    margin: 0;
}

.sx-contact-section__lead p[b-1kix05uez6] {
    margin: 0;
    max-width: 40ch;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

@media (max-width: 800px) {
    .sx-contact-section[b-1kix05uez6] {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
        padding: var(--sp-7) 0;
    }
}
/* /Components/Shared/DemoPhone.razor.rz.scp.css */
/*
  NOTE ON SELECTORS: two traps in Blazor scoped CSS, both of which fail silently.

  1. .sx-phone is this component's ROOT, so it takes a plain selector. `::deep .sx-phone` compiles
     to `[b-scope] .sx-phone` — a descendant selector matching nothing — which would drop every
     rule below it, the --app-* palette included.
  2. The check and chevron are injected as MarkupString, so those <svg> elements never receive the
     scope attribute. `.tick svg` compiles to `.tick svg[b-scope]` and matches nothing; those rules
     need `::deep` so the attribute lands on the parent instead.

  The app's own look, from the app concept (app_theme.zip). Its palette is close to the web theme
  but not identical — the app red is #c8102e where the web red is #D10F0F, and the app mark is
  Fraunces, which the website now uses too. The app tokens are declared here rather than mapped
  onto the web ones on purpose: this is a picture of a different product surface, and quietly
  recolouring it to match the website would make the demo a picture of something that does not
  exist.

  Rendered at the concept's true 390pt, so its own values are used verbatim rather than rescaled.
  An earlier pass authored at 340 and scaled everything down, which pushed card captions like
  "Junior · Psych · 0.3 mi" onto two lines and made the whole grid read as cramped.

  The feed deliberately overflows the screen and is clipped, exactly as the concept does — the tab
  bar floats over it on a translucent blur, and a partly-visible second row is what a scrolling
  feed actually looks like.
*/
.sx-phone[b-q04leut14v] {
    /* The --app-* palette is NOT declared here any more. It lives on the theme containers in
       sarx-theme.css so it inherits from the nearest [data-theme] ancestor, which is what lets
       this mockup follow the site's day/night button on every page it appears on, and lets any
       container that declares its own [data-theme] override it locally. See the note in that file.

       What remains below is everything that does not vary by mode. */
    --app-mark: "Fraunces", Georgia, serif;

    /* Text that sits on top of a PHOTOGRAPH, never on the app's own ground. The page's colour
       mode is irrelevant to it: a card's photo is equally dark in day and night, and the scrim
       beneath these two is deliberately dark in both. They are the reason --app-bone cannot
       simply be flipped everywhere — see .card .who strong. */
    --app-on-photo: #F2EFE9;
    --app-on-photo-dim: #C9C9CF;

    /* 402, not 390: the theme's frame has a 6px border and the page is border-box, so the
       content box is width - 12. At 390 the cards came out 6px narrow and "Junior · Psych ·
       0.3 mi" wrapped, which is exactly the compression the concept does not have. */
    width: 402px;
    border-radius: 54px;

    /* The theme's frame is a centring grid, whose single row auto-sizes to its content — so a
       screen taller than the frame grew the row and the frame's own overflow:hidden clipped the
       bottom, taking the tab bar with it. A flex column with a shrinkable child clips inside the
       screen instead, which is what a real phone does. */
    display: flex;
    flex-direction: column;

    /* The theme's frame sets place-items:center for a centred lockup. In a column flex container
       that is align-items:center, so the screen sized to its content instead of filling the frame
       — every row came out 72px narrow and the card captions wrapped. Stretch is what makes the
       screen actually 390 wide, which is what all the concept's measurements assume. */
    align-items: stretch;
    padding: 0;
    background: var(--app-ink);
    color: var(--app-bone);
}

/* The concept's glow sits behind the app icon, not behind a running screen. */
.sx-phone[b-q04leut14v]::after { display: none; }
.sx-phone[b-q04leut14v]::before { display: none; }

.island[b-q04leut14v] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 124px;
    height: 36px;
    border-radius: 20px;
    background: #000;
    z-index: 3;
}

.screen[b-q04leut14v] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    z-index: 1;
    font: 400 11px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
    text-align: left;
}

/* An explicit height, like iOS's status area. Without it the row was shorter than the island,
   which is absolutely positioned and takes no space — so the wordmark slid up underneath it. */
.status[b-q04leut14v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    height: 54px;
    padding: 10px 30px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--app-bone);
}

.status__right[b-q04leut14v] { display: inline-flex; align-items: center; gap: 4px; }

/* Drawn rather than typed: glyph fallbacks for the status icons render as tofu on some machines. */
.bars[b-q04leut14v], .wifi[b-q04leut14v], .battery[b-q04leut14v] { display: inline-block; background: var(--app-bone); }
.bars[b-q04leut14v] { width: 14px; height: 8px; clip-path: polygon(0 60%,18% 60%,18% 100%,0 100%,27% 40%,45% 40%,45% 100%,27% 100%,55% 20%,73% 20%,73% 100%,55% 100%,82% 0,100% 0,100% 100%,82% 100%); }
.wifi[b-q04leut14v] { width: 11px; height: 8px; clip-path: polygon(50% 100%, 0 35%, 12% 22%, 50% 62%, 88% 22%, 100% 35%); }
.battery[b-q04leut14v] { width: 16px; height: 8px; border-radius: 2px; }

/* The bottom padding is load-bearing. Screens whose last element is bottom-anchored — Messages
   pushes its zone card and "Confirm meetup" down with margin-top: auto — had nothing between that
   element and the tab bar's border, so the button sat welded to the divider. Screens with no tab
   bar had it resting on the bezel instead. 14px is the gap; the flow's screens ask for more and
   override it below. */
.page[b-q04leut14v] {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
    min-height: 0;
    padding: 12px 22px 14px;
    overflow: hidden;
}

.page.centred[b-q04leut14v] { justify-content: center; gap: 11px; }

.centred-text[b-q04leut14v] { text-align: center; }

/* ---- marks and headings ---- */
.mark[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.22em;
    color: var(--app-bone);
    line-height: 1;
}

.mark b[b-q04leut14v] { color: var(--app-red); font-weight: 700; }

.mark--lg[b-q04leut14v] { font-size: 38px; text-align: center; margin-bottom: 2px; }

.top[b-q04leut14v] { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }

.loc[b-q04leut14v] { color: var(--app-ash); font-size: 13px; white-space: nowrap; }

.loc i[b-q04leut14v] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-red);
    margin-right: 4px;
}

.row[b-q04leut14v] { display: flex; align-items: baseline; justify-content: space-between; }

.row h3[b-q04leut14v] { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--app-bone); }

.more[b-q04leut14v] { color: var(--app-red); font-size: 13px; }

.nav[b-q04leut14v] {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    align-items: center;
    gap: 6px;
    padding-bottom: 4px;
}

.nav h3[b-q04leut14v] { font-size: 13px; font-weight: 600; text-align: center; color: var(--app-bone); }

.back[b-q04leut14v] { color: var(--app-red); }

.back[b-q04leut14v]  svg { width: 14px; height: 14px; display: block; }

/* ---- search ---- */
.search[b-q04leut14v] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--app-ash);
    font-size: 15px;
}

.search svg[b-q04leut14v] { width: 18px; height: 18px; flex: none; }

/* ---- discover cards ---- */
.grid[b-q04leut14v] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.card[b-q04leut14v] {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    border: 1px solid var(--app-line);
    background-color: #1a1a1e;
    background-size: cover;
    background-position: 50% 28%;
    overflow: hidden;
}

.card--tall[b-q04leut14v] { grid-row: span 2; aspect-ratio: auto; }

.card .who[b-q04leut14v] { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; }

/* Deliberately NOT --app-bone, though it looks like it should be. These two lines sit over a
   photograph, under .scrim, which is dark in both modes by design. Flipping them with the rest of
   the primary text paints "Maya, 20" in near-black onto a near-black scrim. The more specific
   selector is what keeps them out of the general flip. */
.card .who strong[b-q04leut14v] { display: block; font-size: 15px; font-weight: 600; color: var(--app-on-photo); }

.card .who small[b-q04leut14v] { font-size: 12px; color: var(--app-on-photo-dim); }

.tag[b-q04leut14v] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: var(--app-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
}

.ver[b-q04leut14v] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--app-red);
    color: #fff;
}

.ver[b-q04leut14v]  svg { width: 10px; height: 10px; }

.ver--inline[b-q04leut14v] { position: static; justify-self: end; }

/* ---- messages ---- */
.thread[b-q04leut14v] { display: flex; flex-direction: column; gap: 6px; }

.bubble[b-q04leut14v] { max-width: 82%; padding: 7px 9px; border-radius: 12px; font-size: 11px; }

.bubble.them[b-q04leut14v] {
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.bubble.me[b-q04leut14v] {
    background: var(--app-red);
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.zone[b-q04leut14v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 9px;
    border-radius: 10px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
}

.pin[b-q04leut14v] {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--app-red);
    box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.22);
}

.who strong[b-q04leut14v] { display: block; font-size: 11px; font-weight: 600; color: var(--app-bone); }

.who small[b-q04leut14v] { font-size: 9px; color: var(--app-ash); }

/* ---- verify ---- */
.lede[b-q04leut14v] { color: var(--app-ash); font-size: 11px; text-align: center; }

.field[b-q04leut14v] {
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    border-radius: 9px;
    padding: 9px 11px;
    color: var(--app-bone);
    font-size: 11px;
}

.code[b-q04leut14v] { display: flex; gap: 5px; }

.code span[b-q04leut14v] {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    color: var(--app-bone);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hint[b-q04leut14v] { color: var(--app-ash); font-size: 9px; }

/* ---- age ---- */
/* The field's label, tucked against it: the page's 11px gap would float it halfway to the lede. */
.age__label[b-q04leut14v] { color: var(--app-ash); font-size: 9px; margin-bottom: -7px; }

.agree[b-q04leut14v] { display: flex; align-items: center; gap: 8px; color: var(--app-bone); font-size: 10px; }

.agree__box[b-q04leut14v] {
    flex: none;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: var(--app-red);
    color: #fff;
}

/* The tick is a MarkupString, so it carries no scope attribute and needs ::deep to be reached. */
.agree__box[b-q04leut14v]  svg { width: 10px; height: 10px; display: block; }

.cta[b-q04leut14v] {
    background: var(--app-red);
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    border-radius: 10px;
}

.visits[b-q04leut14v] { display: flex; flex-direction: column; margin-top: 6px; }

.visit[b-q04leut14v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--app-line);
}

.visit:last-child[b-q04leut14v] { border-bottom: 0; }

.visit .who[b-q04leut14v] { flex: 1; }


.tick[b-q04leut14v] { color: var(--app-red); }

.tick[b-q04leut14v]  svg { width: 12px; height: 12px; display: block; }

/* ---- tab bar ---- */
.tabs[b-q04leut14v] {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: auto;
    padding: 10px 16px 0;
    height: 92px;
    background: var(--app-bar);
    border-top: 1px solid var(--app-line);
}

.tab[b-q04leut14v] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 72px;
    color: var(--app-ash);
    font-size: 11px;
    font-weight: 500;
}

.tab svg[b-q04leut14v] { width: 26px; height: 26px; }

.tab.on[b-q04leut14v] { color: var(--app-red); }

.tab.on[b-q04leut14v]::before {
    content: "";
    position: absolute;
    top: -10px;
    width: 26px;
    height: 2px;
    border-radius: 1px;
    background: var(--app-red);
}

.badge[b-q04leut14v] {
    position: absolute;
    top: -4px;
    right: 16px;
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--app-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border: 1.5px solid var(--app-ink);
}

.home[b-q04leut14v] {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    border-radius: 3px;
    background: var(--app-bone);
    opacity: 0.9;
}


/* A gradient scrim under the caption. Without it, a name in white over a bright patch of a photo
   is unreadable — and which patch is bright depends on the photo, so it cannot be judged once. */
.scrim[b-q04leut14v] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.55) 26%, rgba(10, 10, 11, 0) 55%);
}


/* ---- messages: the peer header, a fuller thread, and a composer ---- */
.peer[b-q04leut14v] { display: flex; align-items: center; gap: 8px; }

.peer__face[b-q04leut14v] {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background-size: cover;
    background-position: 50% 25%;
}

.peer__who[b-q04leut14v] { display: flex; flex-direction: column; min-width: 0; }

.peer__who strong[b-q04leut14v] { font-size: 14px; font-weight: 600; color: var(--app-bone); line-height: 1.2; }

.peer__who small[b-q04leut14v] { font-size: 11px; color: var(--app-ash); }

.day[b-q04leut14v] {
    align-self: center;
    font-size: 11px;
    color: var(--app-ash);
    padding: 2px 0 4px;
}


.visits__head[b-q04leut14v] {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-bone);
    padding-bottom: 2px;
}


/* ---- launch screen ----
   Reproduces Canva DAHT9KUz_-k. The lockup is centred in the screen rather than optically raised,
   which is what the artwork does and what iOS does with a LaunchScreen storyboard's centre
   constraint. */
.launch[b-q04leut14v] {
    position: relative;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.lockup[b-q04leut14v] {
    display: grid;
    justify-items: center;
    gap: 6px;
    z-index: 1;
}

.lockup__mark[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 700;
    font-size: 78px;
    line-height: 1;
    color: var(--app-red);
}

.lockup__word[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.3em;
    /* Optical: trailing tracking hangs off the last letter, so the lockup reads off-centre
       without pulling it back. */
    margin-right: -0.3em;
    text-transform: uppercase;
    color: var(--app-red);
}

/* The soft bloom the brand note calls for, behind the mark rather than on it. */
.launch[b-q04leut14v]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--app-glow), transparent 70%);
    pointer-events: none;
}

/* The Greek the name comes from, bled off the corner exactly as the launch artwork has it. Not
   the theme's .sx-watermark: that is a web-surface device sized in vw, and this has to be sized
   against a 402px phone. */
.launch[b-q04leut14v]::after {
    content: "σάρξ";
    position: absolute;
    /* Bled off the corner, the same treatment .sx-watermark gives the web surface. Sitting it
       fully on screen made it read as a word somebody was meant to notice rather than as the
       texture the artwork uses it as. */
    right: -0.08em;
    bottom: -0.3em;
    font-family: var(--app-mark);
    font-weight: 300;
    font-size: 148px;
    line-height: 1;
    color: var(--app-watermark);
    pointer-events: none;
    user-select: none;
}


/* ---- driving ----
   Every hotspot is an <a> whether or not the phone is being driven (see the note at the top of
   DemoPhone.razor). Each already sets its own colour — .tab, .loc, .back, .cta — so the theme's
   accent for links never shows; what the theme also does is underline a link on hover, and an
   underline under "Discover" in a tab bar is not something iOS draws. No colour is set here on
   purpose: a rule on `.sx-phone a` would outrank `.tab` and `.loc` and flatten them to inherit. */
.sx-phone a[b-q04leut14v],
.sx-phone a:hover[b-q04leut14v] { text-decoration: none; }

/* Only a live control invites a tap. An inert one is a picture and keeps the arrow. */
.sx-phone a:not([href])[b-q04leut14v] { cursor: default; }

/* The two block controls. They were <div>s and are now <a>s, which are inline by default. */
.cta[b-q04leut14v] { display: block; }
.card[b-q04leut14v] { display: block; }

/* The launch screen's hotspot: the whole screen, over the lockup and the watermark. */
.tapall[b-q04leut14v] {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ---- settings ---- */
.toggle[b-q04leut14v] {
    position: relative;
    flex: none;
    width: 30px;
    height: 18px;
    border-radius: 9px;
    background: var(--app-dash);
}

.toggle[b-q04leut14v]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
}

.toggle.on[b-q04leut14v] { background: var(--app-red); }

.toggle.on[b-q04leut14v]::after { left: 14px; }

/* "Delete account", in the app red, as iOS sets a destructive row. */
.hint.danger[b-q04leut14v] { color: var(--app-red); margin-top: auto; padding-bottom: 8px; }


/* ---- match ----
   "It's a match." (Canva DAHUKFIZo2I). The moment the business model is one screen: the match,
   the night, the place and the reservation, before anybody has typed a word.

   The mockup is a 1080x1920 canvas with its content in a 584px column; that column mapped onto
   this screen's content width is the scale the sizes below come from, so the type keeps the
   design's hierarchy without shrinking to the canvas's margins. Its red (#e42f37) and its
   geometric sans are normalised to the app's own tokens, as the launch screen's artwork was —
   this is a picture of the app, not of a Canva page. Two things are the design's own and kept:
   black text on the red button, and the wordmark at half strength above the headline.

   No tab bar. It is a modal over Discover, and nothing under it is reachable until it is
   answered. */
.match[b-q04leut14v] {
    gap: 0;
    justify-content: space-between;
    padding-top: 6px;
    padding-bottom: 34px;
}

.match__head[b-q04leut14v] {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.match__mark[b-q04leut14v] {
    opacity: 0.5;
}

.match__title[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 400;
    font-size: 50px;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--app-red);
}

.match__faces[b-q04leut14v] {
    display: flex;
    justify-content: center;
    gap: 14px;
}

/* Centred, not the 25% the cards use: these two sources are square and framed hair-to-shoulders,
   so a square circle shows the whole frame and there is nothing to bias the crop towards. */
.match__face[b-q04leut14v] {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 2px solid var(--app-red);
    background-color: var(--app-panel);
    background-size: cover;
    background-position: 50% 50%;
}

.match__plan[b-q04leut14v] {
    display: grid;
    gap: 12px;
}

.match__night[b-q04leut14v] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--app-bone);
}

.match__night b[b-q04leut14v] {
    color: var(--app-red);
}

.match__row[b-q04leut14v] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.match__pill[b-q04leut14v] {
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--app-red);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.match__sub[b-q04leut14v] {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-ash);
}

.match__cards[b-q04leut14v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 9.5px, not the 10.5 a straight scale gives: at 10.5 a line like "Maya · Junior · Psych" breaks after
   the second dot, and the design keeps each person on one line. */
.match__card[b-q04leut14v] {
    padding: 12px 11px;
    border-radius: 12px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.8;
    color: var(--app-bone);
}

/* The bottom row is the plan itself, and the design sets it larger than the details above. */
.match__card--place[b-q04leut14v] {
    font-size: 15px;
    line-height: 1.6;
}

.match__card--alt[b-q04leut14v] {
    font-size: 12px;
    line-height: 1.6;
}

.match__cta[b-q04leut14v] {
    padding: 18px;
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.match__foot[b-q04leut14v] {
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    color: var(--app-ash);
}

.match__foot u[b-q04leut14v] {
    text-underline-offset: 2px;
}


/* ---- date night ------------------------------------------------------------
   The screens between the match and the bill: the shortlist (Canva DAHUcwKU_lw) and the wait.
   Built from the same parts as everything above — the panel card, the
   .who row, the .cta, the .hint — because it is the same app. Where the source mockup drew its
   own furniture (a web red, a second wordmark, a smaller type ramp), it is normalised to the
   app's tokens here, exactly as the match and launch artwork were. */

/* The wordmark at half strength, above a screen that has its own headline. .match__mark does the
   same thing; this is that treatment named for reuse rather than copied a fifth time. */
.mark--dim[b-q04leut14v] {
    font-size: 20px;
    text-align: center;
    opacity: 0.5;
}


/* ---- the shortlist ---- */
.spot[b-q04leut14v] {
    padding-bottom: 26px;
    gap: 14px;
}

.spot__head[b-q04leut14v] {
    display: grid;
    grid-template-columns: 16px 1fr 16px;
    align-items: center;
    justify-items: center;
}

.spot__head .back[b-q04leut14v] { justify-self: start; }

/* What is being asked, above the picture rather than under it. */
.spot__ask[b-q04leut14v] {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.spot__title[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    color: var(--app-bone);
}

.spot__sub[b-q04leut14v] {
    font-size: 10px;
    color: var(--app-ash);
}

/* The room. A photograph when the spot has one; the drawn block underneath is what a card with no
   picture yet looks like, kept deliberately rather than left to break. The hatch is what stops the
   fallback reading as an empty box — which is exactly how it read before this comment was written.

   background-size/position sit here rather than inline: every card wants the same crop behaviour,
   and only the file differs. */
.spot__photo[b-q04leut14v] {
    position: relative;
    flex: 1;
    min-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--app-line);
    background-color: var(--app-panel);
    background-image:
        linear-gradient(150deg, rgba(200, 16, 46, 0.12) 0%, var(--app-panel) 45%, var(--app-ink) 100%);
    background-size: cover;
    background-position: 50% 50%;
}

/* The hatch belongs to the FALLBACK only. Over a photograph it reads as a printing artefact, so
   it is switched off wherever a real background-image has been set inline. */
.spot__photo[b-q04leut14v]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg,
        rgba(242, 239, 233, 0.028) 0 2px,
        transparent 2px 9px);
}

.spot__photo[style][b-q04leut14v]::after { display: none; }

/* Under the perk pill, so a red badge on a bright room stays a badge. Steeper than the Discover
   scrim: that one protects a two-line caption at the bottom, this one protects one pill at the top. */
.scrim--spot[b-q04leut14v] {
    background: linear-gradient(to bottom, rgba(10, 10, 11, 0.62) 0%, rgba(10, 10, 11, 0) 42%);
}

/* On the picture, not under it: the offer is the reason the card converts, and the design puts it
   where a discount badge goes rather than in the fine print. */
.spot__perk[b-q04leut14v] {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--app-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.spot__card[b-q04leut14v] {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 12px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
}

.spot__row[b-q04leut14v] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.spot__name[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.1;
    color: var(--app-bone);
}

.spot__price[b-q04leut14v] {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-ash);
}

.spot__meta[b-q04leut14v] { font-size: 10px; color: var(--app-ash); }

.spot__blurb[b-q04leut14v] {
    font-size: 11px;
    line-height: 1.5;
    color: var(--app-bone);
}

/* An arrow either side of the heart, sitting where a thumb is rather than where the card ends.
   The heart is the larger of the three on purpose: two of these controls browse and one decides,
   and three circles of equal weight would read as three equal choices. */
.spot__choose[b-q04leut14v] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    padding: 4px 0;
}

.rnd[b-q04leut14v] {
    display: grid;
    place-items: center;
    border-radius: 50%;
}

.rnd svg[b-q04leut14v] { display: block; }

/* Browsing. Quiet, and identical on both sides — neither direction is the preferred one. */
.rnd--step[b-q04leut14v] {
    width: 48px;
    height: 48px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
    color: var(--app-ash);
}

.rnd--step svg[b-q04leut14v] { width: 20px; height: 20px; }

/* The decision. */
.rnd--pick[b-q04leut14v] {
    width: 66px;
    height: 66px;
    background: var(--app-red);
    color: #fff;
}

.rnd--pick svg[b-q04leut14v] { width: 28px; height: 28px; }


/* ---- waiting ---- */
.wait[b-q04leut14v] {
    padding-bottom: 26px;
    gap: 14px;
}

.wait__head[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.1;
    text-align: center;
    color: var(--app-bone);
}

.wait__card[b-q04leut14v] {
    display: grid;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
}

.wait__row[b-q04leut14v] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--app-ash);
}

/* One cell per card in the deck, so the row cannot fall out of step with DateNight.Spots. */
.dots[b-q04leut14v] { display: flex; gap: 5px; }

.dot[b-q04leut14v] {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--app-line);
}

.dot.on[b-q04leut14v] { background: var(--app-red); }

.wait__cta[b-q04leut14v] { margin-top: auto; }

/* The second button in the app: an outline, never a second red one. */
.cta--ghost[b-q04leut14v] {
    background: transparent;
    border: 1px solid var(--app-line);
    color: var(--app-bone);
    font-weight: 500;
}


/* ---- the bill ----
   The end of the meal. There is no call to action on this screen and that is deliberate: you do
   not tap anything, you turn the phone round. It carried a "Reserve" button once, under a payment
   code, which asked somebody to book a table they were already sitting at. */
.bill[b-q04leut14v] {
    padding-bottom: 26px;
    gap: 16px;
}

.bill__when[b-q04leut14v] {
    display: grid;
    gap: 5px;
    text-align: center;
}

.bill__when strong[b-q04leut14v] {
    font-family: var(--app-mark);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    color: var(--app-bone);
}

.bill__when span[b-q04leut14v] { font-size: 11px; color: var(--app-ash); }

/* The code is the screen. Everything else on it is a caption. */
.bill__code[b-q04leut14v] {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 18px 14px;
    border-radius: 14px;
    border: 1px solid var(--app-red);
    background: rgba(200, 16, 46, 0.08);
}

.bill__rows[b-q04leut14v] {
    display: grid;
    padding: 4px 14px;
    border-radius: 12px;
    background: var(--app-panel);
    border: 1px solid var(--app-line);
}

.bill__row[b-q04leut14v] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid var(--app-line);
    font-size: 11px;
    color: var(--app-ash);
}

.bill__row:last-child[b-q04leut14v] { border-bottom: 0; }

.bill__row b[b-q04leut14v] { font-size: 12px; font-weight: 600; color: var(--app-bone); }

.bill__foot[b-q04leut14v] { margin-top: auto; }


/* ---- the recommendation in the thread ----
   Sarx proposes; the two of them react to the proposal. It sits at the foot of the thread rather
   than on the match screen because a suggestion inside a conversation can be argued with, and a
   venue printed on the match cannot. The .zone under it is the same card Messages already drew;
   what is new is the label saying whose idea it is. */
.rec[b-q04leut14v] {
    display: grid;
    gap: 6px;
    margin-top: auto;
}

.rec__head[b-q04leut14v] {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-red);
}

.rec .zone[b-q04leut14v] { margin-top: 0; }


/* ---- the code the venue scans ----
   Drawn, and it encodes nothing — see the note on the screen. Sized so the modules land on whole
   pixels at the phone's real width; shape-rendering keeps them from being blurred by antialiasing.
   The quiet zone is the white padding, which a scanner needs and which makes it read as a code
   rather than as a texture. */
.qr[b-q04leut14v] {
    justify-self: center;
    width: 172px;
    height: 172px;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
}

.qr svg[b-q04leut14v] { display: block; width: 100%; height: 100%; }

.qr path[b-q04leut14v] { fill: #0A0A0B; }

.qr__how[b-q04leut14v] {
    max-width: 26ch;
    text-align: center;
    font-size: 11px;
    line-height: 1.6;
    color: var(--app-bone);
}

/* /Components/Shared/EarlySignupForm.razor.rz.scp.css */
/*
  The field and its button on one row, stacking on a narrow screen.

  The row is a grid rather than a flex line so the button keeps its intrinsic width while the
  input takes everything else; minmax(0, 1fr) rather than 1fr because a grid track's default
  minimum is min-content, and a long placeholder would otherwise push the button off the edge.

  The input carries .sx-input--lg from the theme so it matches .sx-btn--lg exactly. Sizing it from
  here instead would not work: <InputText> renders its <input> inside its own component, so it
  never receives this file's scope attribute and a `.sx-signup__row .sx-input` rule would compile
  to a selector that matches nothing.
*/
.sx-signup[b-y17voxi0qj] {
    display: grid;
    gap: var(--sp-2);
    max-width: 34rem;
}

.sx-signup__row[b-y17voxi0qj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-3);
}

@media (max-width: 560px) {
    .sx-signup__row[b-y17voxi0qj] { grid-template-columns: 1fr; }
}

/* The panel that replaces the form. Held to the form's own measure so the column does not jump
   width at the moment of success. */
.sx-signup__done[b-y17voxi0qj] {
    max-width: 34rem;
}

/*
  The cycling example inside the field.

  It is a SPAN laid over the input rather than the placeholder attribute, because a placeholder is
  one string whose characters cannot be addressed and the effect is per-character. Everything here
  therefore has to reproduce what .sx-input--lg does to text — the same font, the same horizontal
  padding, the same 44px box — or the ghost sits a pixel off its own placeholder and the swap to a
  real value visibly jumps.

  The wrapper is markup from THIS file, so it carries the scope attribute. The <input> does not:
  InputText renders it inside its own component, which is why the theme sizes it and this file
  cannot. See the note at the top.
*/
.sx-signup__field[b-y17voxi0qj] {
    position: relative;
    min-width: 0;
}

.sx-signup__ghost[b-y17voxi0qj] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-4);
    font: 400 var(--text-base)/1.4 var(--font-ui);
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;

    /* A click has to reach the input underneath, and the caret must never land in here. */
    pointer-events: none;
    user-select: none;
}

/* Typed in, or focused: a real placeholder would be gone, so this goes too. The class is set by
   form.js, which is also the only thing that ever fills this span. */
.sx-signup__field.is-filled .sx-signup__ghost[b-y17voxi0qj] { opacity: 0; }

/* One character. The stagger is its index times --sx-ghost-step, so the wave sweeps left to
   right; rotateX turns the fade into a roll rather than a blink.

   ::deep IS LOAD-BEARING on every rule that targets these spans. form.js creates them, so they
   never receive this component's scope attribute; `.sx-signup__ghost span` compiles to
   `.sx-signup__ghost span[b-scope]` and matches nothing. ::deep moves the attribute onto the
   ghost instead, which IS this file's markup. The same trap DemoPhone.razor.css documents for its
   injected SVGs — and it fails silently: the text still cycles, it simply does not animate. */
.sx-signup__ghost[b-y17voxi0qj]  span {
    --sx-ghost-step: 0.1s;
    display: inline-block;
    white-space: pre;
    transform-origin: 50% 100%;
    animation: sx-ghost-in-b-y17voxi0qj 0.42s var(--ease, cubic-bezier(0.2, 0, 0, 1)) both;
    animation-delay: calc(var(--i) * var(--sx-ghost-step));
}

/* Leaving. Much tighter than the entrance — the old value should be gone before the new one
   starts, and a 25-character address at the entrance stagger would still be clearing after four
   seconds, which is the whole cycle. */
.sx-signup__ghost.is-out[b-y17voxi0qj]  span {
    animation: sx-ghost-out-b-y17voxi0qj 0.3s var(--ease, cubic-bezier(0.2, 0, 0, 1)) both;
    animation-delay: calc(var(--i) * 0.018s);
}

@keyframes sx-ghost-in-b-y17voxi0qj {
    from { opacity: 0; transform: translateY(0.45em) rotateX(-78deg); }
    to   { opacity: 1; transform: none; }
}

@keyframes sx-ghost-out-b-y17voxi0qj {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-0.45em) rotateX(78deg); }
}

/*
  Reduced motion switches the whole thing off rather than merely un-animating it: text that
  rewrites itself every four seconds is the part somebody with vestibular sensitivity asked not to
  have, and a still frame of it is a perfectly good hint. form.js does not start the cycle at all,
  so what remains is the ordinary placeholder attribute.
*/
@media (prefers-reduced-motion: reduce) {
    .sx-signup__ghost[b-y17voxi0qj]  span,
    .sx-signup__ghost.is-out[b-y17voxi0qj]  span {
        animation: none;
    }
}
/* /Components/Shared/SiteFooter.razor.rz.scp.css */
/*
  The wordmark and the ways in, set as one lockup: "SARX - Clients - Investors". The footer
  itself spaces its groups at --sp-5, which is right between the mark and the legal links and far
  too loose between a mark and its own suffix, so the pair carries its own tighter gap.

  Baseline rather than centre: the wordmark is uppercase with 0.3em tracking and the link is
  sentence case, so aligning their boxes would leave the two visibly off each other.
*/
.sx-footer__brand[b-lgmf9h0dzw] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.sx-footer__sep[b-lgmf9h0dzw] {
    color: var(--fg-muted);
}

.sx-footer__brand a[b-lgmf9h0dzw] {
    color: var(--fg);
}

.sx-footer__brand a:hover[b-lgmf9h0dzw] {
    color: var(--fg-strong);
    text-decoration: none;
}

/* The wordmark is the way home here too. It keeps the theme's muted footer colour until hovered;
   ::deep because it is another component's root. The mark is 46 by 20 pixels, which a finger
   misses, so the anchor is padded to a 44-pixel touch target and pulled back by the same amount,
   so the hit area grows and the footer does not. */
.sx-footer__home[b-lgmf9h0dzw] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-2);
    margin: -12px 0 -12px calc(-1 * var(--sp-2));
    text-decoration: none;
}

.sx-footer__home:hover[b-lgmf9h0dzw]  .sx-wordmark,
.sx-footer__home:focus-visible[b-lgmf9h0dzw]  .sx-wordmark {
    color: var(--fg-strong);
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
/*
  The button borrows .sx-btn--ghost and .sx-btn--icon from the theme, so it sizes and hovers like
  every other icon control. Only the glyph swap is local.

  Everything here keys off <html> rather than off the button's own attributes, and that is the
  whole point. Blazor's enhanced navigation patches the page from the server's HTML, so any
  attribute a script writes on an element inside <body> is reverted the first time the visitor
  follows a link. The root element is not part of that patch, so a class and a data-theme on it
  are the only state that survives a click-through.
*/

/*
  No JavaScript, no button: it would do nothing. .sx-js is set by theme.js in <head>, before the
  first paint, so the button does not flash in and out on a normal load.
*/
.sx-theme-toggle[b-ifjji09yts] {
    display: none;
}

html.sx-js .sx-theme-toggle[b-ifjji09yts] {
    display: inline-flex;
}

.sx-theme-toggle__icon[b-ifjji09yts] {
    display: none;
    line-height: 0;
}

.sx-theme-toggle svg[b-ifjji09yts] {
    width: 18px;
    height: 18px;
}

/* Show the mode you are switching to, which is the opposite of the one you are in. Read from the
   root, so it is right in the very first byte the server sends and stays right afterwards. */
[data-theme="dark"] .sx-theme-toggle__icon--sun[b-ifjji09yts],
[data-theme="light"] .sx-theme-toggle__icon--moon[b-ifjji09yts] {
    display: block;
}
/* /Components/Shared/VenueCardEditor.razor.rz.scp.css */
/*
  The venue's own card, beside the form that writes it.

  Its own classes rather than the .vn-* names the other venue pages use. When this was written
  none of those had a rule behind them; .vn-narrow has one now (sarx-theme.css), .vn-points and
  .vn-facts still render on the theme's element defaults. Survivable for a column of prose, not
  for a two-column layout with a scaled device in it.
*/

.pf[b-7uh00di8xq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-7) 0;
}

.pf__form[b-7uh00di8xq] { min-width: 0; }

/* The photograph first, then a rule, then the words — it is a different kind of input from the
   fields under it and it used to sit in a card of its own, flush against the first label. */
.pf__photo[b-7uh00di8xq] {
    margin: 0 0 var(--sp-6);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--line);
}

.pf__photo[b-7uh00di8xq] { display: grid; gap: var(--sp-2); }

.pf__photo .sx-help[b-7uh00di8xq] { margin: 0; }

.pf__photo-remove[b-7uh00di8xq] { justify-self: start; }

.pf__note[b-7uh00di8xq] {
    /* Room under it too: the form's first label followed it with no gap and read as its last line. */
    margin: var(--sp-4) 0 var(--sp-5);
    color: var(--ok);
    font-weight: 600;
}

.pf__aside[b-7uh00di8xq] {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: var(--sp-3);

    /* Under the app bar, which is sticky at 72px. The phone is the whole point of this page, so it
       follows the venue down the form rather than scrolling away at the first field. */
    position: sticky;
    top: calc(72px + var(--sp-5));
}

/* The brand's bloom behind the device, as the /clients hero has it. Bounded in px so its reach
   cannot scale with the element it sits behind and push a horizontal scrollbar onto the page. */
.pf__aside[b-7uh00di8xq]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40px -32px;
    background: radial-gradient(closest-side at 50% 42%, var(--sx-glow), transparent 70%);
    pointer-events: none;
}

/*
  DemoPhone is drawn at the concept's true 402px and has no responsive behaviour of its own, so it
  is scaled with a transform and the WRAPPER carries the scaled box. Sizing only the transform
  would leave a 402x871 hole in the layout: a transform does not affect layout size.
*/
.pf__phone[b-7uh00di8xq] {
    --phone-scale: 0.62;
    width: calc(402px * var(--phone-scale));
    height: calc(871px * var(--phone-scale));
}

.pf__phone[b-7uh00di8xq]  .sx-phone {
    transform: scale(var(--phone-scale));
    transform-origin: top left;
}

/* Scaled against the window HEIGHT, which is the constraint that bites: the phone is more than
   twice as tall as it is wide. */
@media (max-height: 820px) {
    .pf__phone[b-7uh00di8xq] { --phone-scale: 0.5; }
}

.pf__caption[b-7uh00di8xq] {
    margin: 0;
    max-width: 34ch;
    text-align: center;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/*
  ABOVE the form, not hidden, and that is the difference from /clients. There the phone is a
  picture beside the pitch and disappearing on a phone costs nothing; here it is the thing the
  venue is being asked to fill in, so on a narrow screen it goes first and the form follows.
*/
@media (max-width: 1000px) {
    .pf[b-7uh00di8xq] { grid-template-columns: 1fr; gap: var(--sp-6); }

    .pf__aside[b-7uh00di8xq] { position: static; order: -1; }

    .pf__phone[b-7uh00di8xq] { --phone-scale: 0.5; }
}