:root {
  color-scheme: light;
  /* U-72 (Orchard's O-67): narrow enough that prose at its measure fills most of the page. */
  --bf-max-width: 64rem;
  /* U-41: these seven are the Forest/Default palette's own values - _Layout.cshtml's inline
       <style> overrides them per-tenant based on the wizard's actual selection; a tenant with no
       Theme Settings node yet (or one that failed to sync) renders identically to these. */
  --bf-color-primary: #1a5c4a;
  --bf-color-primary-contrast: #ffffff;
  --bf-color-bg: #ffffff;
  --bf-color-text: #1a1a1a;
  --bf-color-muted: #666666;
  --bf-color-border: #e0e0e0;
  /* U-73 (Orchard's O-70): tinted from the Forest primary, not a stock grey. */
  --bf-color-surface: #eef5f1;
  /* U-116: the colours of a notice or status on Bizfront's own pages - succeeded, refused, take
     care - each with the tint it sits on. */
  --bf-color-success: #136c2e;
  --bf-color-success-surface: #eaf6ee;
  --bf-color-error: #b00020;
  --bf-color-error-surface: #fdecee;
  --bf-color-warning: #8a6d00;
  --bf-color-warning-surface: #fff8e1;
  /* U-117 (Orchard's O-126): Bizfront's own palette, bizfront.cc's (Main's site.css): its violet
     accent for what an owner acts on, its ink, muted and border colours for the rest. Bizfront's
     own pages (.bizfront-page) take it in place of the site's palette. */
  --bf-product-text: #1a1a2e;
  --bf-product-muted: #565673;
  --bf-product-border: #e4e4ef;
  --bf-product-bg-alt: #f6f6fb;
  --bf-product-accent: #5b3df6;
  --bf-product-accent-dark: #4029c9;
  --bf-product-on-accent: #ffffff;
  --bf-font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* U-75: headings in a warm serif of their own (the Modern typography keeps them in its sans). */
  --bf-heading-font-family: 'Fraunces', Georgia, serif;
  /* U-63: the wordmark's size, and the most an uploaded logo may grow beside it. */
  --bf-brand-size: 1.25rem;
  --bf-brand-logo-height: 2.5rem;
  /* U-71: the longest comfortable line of body text (about 65-75 characters). */
  --bf-measure: 68ch;
  /* U-74: the top band's pattern - scattered dots and rings, drawn as a mask (only its shape counts). */
  --bf-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='6' cy='7' r='2'/%3E%3Ccircle cx='24' cy='25' r='2'/%3E%3Ccircle cx='27' cy='8' r='3.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='9' cy='27' r='1.2'/%3E%3C/svg%3E");
  /* U-76: how strongly the pattern shows. The palette-contrast check measures text over its marks at this strength. */
  --bf-pattern-opacity: 0.09;
}

/* U-75 (Orchard's O-74): Fraunces, bundled with the site rather than loaded from a third party -
   Google Fonts' v38, latin subset, weight 600 only. SIL Open Font License 1.1: fonts/OFL.txt. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-600.woff2') format('woff2');
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--bf-font-family);
  color: var(--bf-color-text);
  background: var(--bf-color-bg);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--bf-heading-font-family);
  font-weight: 600;
}

img {
  max-width: 100%;
  height: auto;
}

/* U-71 (Orchard's O-61): body text keeps a readable measure. Prose only - a list item with its
   own class is a component (a service card), not a line of text. */
main p,
main li:not([class]),
main dt,
main dd,
main blockquote,
main address,
main figcaption {
  max-width: var(--bf-measure);
}

a {
  color: var(--bf-color-primary);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  padding: 0.5rem 1rem;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: var(--bf-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* U-73 (Orchard's O-70): the palette's primary as a structural accent, not only on links and buttons. */
.site-header {
  border-top: 4px solid var(--bf-color-primary);
  border-bottom: 1px solid var(--bf-color-border);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 44px;
  font-weight: 700;
  font-size: var(--bf-brand-size);
  line-height: 1.2;
  text-decoration: none;
  color: var(--bf-color-text);
}

.site-brand-name {
  text-wrap: balance;
}

.site-brand-logo {
  display: block;
  min-width: 0;
  max-width: 100%;
  max-height: var(--bf-brand-logo-height);
  width: auto;
  height: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  color: inherit;
}

.site-nav a[aria-current='page'] {
  font-weight: 700;
}

/* U-138 (Orchard's O-148): the "More" disclosure a long menu folds its extra pages into is drawn from
   the theme's tokens - no native triangle (list-style and the WebKit marker are off), a 44px tap
   target, and a caret drawn in CSS that turns when it opens. Its pages stack under it in the header, so
   they are never detached from it or off screen however the links wrap. */
.site-nav summary {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  margin-inline: -0.5em;
  padding-inline: 0.5em;
  border-radius: 0.35em;
  list-style: none;
  color: var(--bf-color-text);
  cursor: pointer;
}

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

.site-nav summary::after {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-0.15em) rotate(45deg);
}

.site-nav details[open] > summary::after {
  transform: translateY(0.1em) rotate(-135deg);
}

.site-nav summary:is(:hover, :focus-visible) {
  color: var(--bf-color-primary);
}

.site-nav .menu-overflow-items {
  flex-direction: column;
  gap: 0;
  padding-left: 1rem;
}

.site-nav .menu-overflow-items a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.page-header {
  background: var(--bf-color-surface);
  padding: 2rem 0;
}

/* U-74 (Orchard's O-73): the top band - a page's title band, or its hero - carries a quiet pattern
   in the palette's own primary, so it reads as made for this business rather than a flat tint. The
   pattern is a mask over the primary, so it follows whichever palette the owner picked, and it sits
   behind the band's content. */
.page-header,
.block-hero {
  position: relative;
  isolation: isolate;
}

.page-header::before,
.block-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bf-color-primary);
  opacity: var(--bf-pattern-opacity);
  pointer-events: none;
  -webkit-mask-image: var(--bf-pattern);
  mask-image: var(--bf-pattern);
  -webkit-mask-size: 36px 36px;
  mask-size: 36px 36px;
}

.page-body {
  padding: 2rem 1.5rem;
}

.block {
  margin-bottom: 2.5rem;
}

/*
   U-49 (pre-import issue 4, archived commit 540e878): the block partials themselves (block-hero, hero-subheading,
   service-item, etc.) already existed with real markup and class names - what was missing was
   any actual visual design behind them, so every home page (this track's own marketing page and
   every wizard-provisioned tenant's home page alike) rendered as plain, unstyled text blocks
   stacked in a column. Styled using only the existing --bf-color-* tokens (never a new fixed
   color), since each tenant picks its own palette in the wizard (U-41) - this has to look right
   under any of them, not just Forest/Default.
*/

.block-hero {
  /* Full-bleed: breaks out of the constraining .wrap page-body sits in so the hero reads as its
       own band, the same way Main's own redesigned hero does, while its own text stays centered
       and readable at .wrap's width via the nested .wrap below. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 4rem 0;
  background: linear-gradient(180deg, var(--bf-color-surface), var(--bf-color-bg));
  text-align: center;
}

/* A hero that opens the page starts at the header's edge, not below the page body's top padding
   (the inner pages' title bands do), so Home has no white band under the header. */
.page-body > .umb-block-list:first-child > .block-hero:first-child {
  margin-top: -2rem;
}

/* The hero's content keeps the page's width and edge inside the full-bleed band; its text is a
   centred 40rem column. */
.block-hero-inner {
  max-width: var(--bf-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.block-hero-text {
  max-width: 40rem;
  margin: 0 auto;
}

/* U-69 (Orchard's O-68): a paragraph the prose measure (U-71) makes narrower than the text column is
   centred as a box too, not pinned to the column's left edge. */
.block-hero-text p {
  margin-left: auto;
  margin-right: auto;
}

/* U-77 (Orchard's O-77): a hero's image follows its text, so the heading and call to action lead the
   first screen. Below it on a phone; beside it, text on the brand edge, from tablet width. */
.block-hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem auto 0;
}

@media (min-width: 56rem) {
  .block-hero-with-image .block-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    text-align: left;
  }

  .block-hero-with-image .block-hero-text {
    max-width: none;
    margin: 0;
  }

  .block-hero-with-image .block-hero-text p {
    margin-left: 0;
    margin-right: 0;
  }

  .block-hero-with-image .block-hero-image {
    margin: 0;
  }
}

/* U-69 (Orchard's O-68): the heading and subheading set only their vertical margins, so they stay
   centred as boxes in the hero's text column, not only their text. A shorthand margin here once
   pinned them to the hero's left edge. */
.block-hero h1,
.block-hero h2 {
  font-size: 2.25rem;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.hero-subheading {
  color: var(--bf-color-muted);
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: var(--bf-color-primary);
  color: var(--bf-color-primary-contrast);
  text-decoration: none;
  border: 0;
  border-radius: 0.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px var(--bf-color-primary);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px var(--bf-color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

.hero-cta {
  font-size: 1.05rem;
}

/* U-70 (Orchard's O-65): rich text and the FAQ line up with the brand, the page title and the
   footer like every other block, rather than sitting in their own centred column. */
.block-service-list h2,
.block-faq-list h2,
.block-cta h2 {
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
}

.block-service-list h2,
.block-cta h2 {
  text-align: center;
}

.service-items,
.faq-items {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* U-88: the cards are the grid's items. Each list renders them inside Umbraco's own .umb-block-list
   wrapper, which would otherwise be the one grid item, with every card stacked inside it, touching. */
.service-items > .umb-block-list,
.faq-items > .umb-block-list {
  display: contents;
}

/* U-88: questions read down the page, one per row, as Orchard's FAQ list does. */
.faq-items {
  grid-template-columns: minmax(0, 1fr);
}

.service-item,
.faq-item {
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: 0.6rem;
  padding: 1.5rem;
}

.service-item h3,
.faq-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.service-item p,
.faq-item p {
  color: var(--bf-color-muted);
  margin: 0;
}

.service-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  background: var(--bf-color-bg);
  font-size: 1.1rem;
}

.block-cta {
  text-align: center;
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: 0.75rem;
  padding: 2.5rem 1.5rem;
}

.block-cta p {
  color: var(--bf-color-muted);
  max-width: 32rem;
  margin: 0 auto 1.5rem;
}

.hours-table {
  border-collapse: collapse;
  width: 100%;
  max-width: var(--bf-measure);
}

.hours-table th,
.hours-table td {
  text-align: left;
  padding: 0.4em 0.75em 0.4em 0;
  border-bottom: 1px solid var(--bf-color-border);
}

/* U-79 (Orchard's O-66): an action link (Get directions) - a 44px target that reads as a link, not a button. */
.link-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.block-location-directions {
  margin-top: 0.5em;
}

/* U-79 (Orchard's O-78): in the map's place, when the address couldn't be placed: how to ask the way. */
.block-location-ask {
  background: var(--bf-color-surface);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.block-hero-location {
  font-weight: 600;
}

.block-location-map {
  display: block;
  width: 100%;
  max-width: var(--bf-measure);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--bf-color-border);
  border-radius: 0.5rem;
  margin-top: 1.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* U-72 (Orchard's O-67): at desktop width the content fills the page instead of hugging a narrow
   left column. The page's blocks are a two-column grid in which every block spans both columns,
   except Location and Hours, which share a row where they're neighbours (Home); and the contact
   details sit beside the contact form. */
@media (min-width: 48rem) {
  .page-body > .umb-block-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }

  .page-body > .umb-block-list > * {
    grid-column: 1 / -1;
  }

  .page-body > .umb-block-list > .block-location:has(+ .block-hours),
  .page-body > .umb-block-list > .block-location:has(+ .block-hours) + .block-hours {
    grid-column: auto;
  }

  .block-contact-details {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 3rem;
    align-items: start;
  }

  .block-contact-details > h2 {
    grid-column: 1 / -1;
  }

  .block-contact-details > .contact-details + .contact-form {
    grid-column: 2;
    margin-top: 0;
  }

  /* U-79 (Orchard's O-67): a location with a map - or, unplaced, the way to ask - puts its address
       and directions beside it. */
  .block-location:has(.block-location-map),
  .block-location:has(.block-location-ask) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 3rem;
    align-items: start;
  }

  .block-location:has(.block-location-map) .block-location-directions {
    display: contents;
  }

  .block-location:has(.block-location-map) .block-location-map,
  .block-location-ask {
    grid-column: 2;
    grid-row: 1 / span 3;
    max-width: none;
    margin-top: 0;
  }
}

.site-footer {
  border-top: 1px solid var(--bf-color-border);
  padding: 1.5rem 0;
  margin-top: 3rem;
  color: var(--bf-color-muted);
}

.site-footer-credit {
  margin: 0;
  font-size: 0.9rem;
}

/* U-66 (Orchard's O-64): footer links are small print ("Request editor access"), not calls to
   action - the footer's own muted colour, and each kept on one line so the credit wraps between
   items, not inside one. */
.site-footer a {
  color: inherit;
  white-space: nowrap;
}

/* U-65 (Orchard's O-62): below 40rem the nav collapses behind a menu button. It only does once the
   head script has marked the page .bf-js, so without script the nav simply stays visible and no
   dead button shows. Every nav link, and the "More" disclosure, is a 44px target. */
.site-nav-toggle {
  display: none;
}

@media (max-width: 40rem) {
  /* The brand and the menu button share the first row; a long name wraps rather than pushing
       the button onto a row of its own. */
  .bf-js .site-brand {
    flex: 1 1 0;
    min-width: 0;
  }

  .bf-js .site-nav-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    gap: 0.5em;
    padding: 0 1em;
    border: 1px solid var(--bf-color-border);
    border-radius: 0.35em;
    background: var(--bf-color-bg);
    color: var(--bf-color-text);
    font: inherit;
    cursor: pointer;
  }

  /* The icon is drawn in the button's own text colour and carries no name: the word beside it is the button's. */
  .site-nav-toggle-icon {
    flex: none;
  }

  .site-nav {
    flex-basis: 100%;
  }

  .bf-js .site-nav:not(.is-open) {
    display: none;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Bizfront admin / wizard (U-07/U-08) */
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

/* U-106 (Orchard's O-113): a stacked table - a table in a .stacked-table frame - turns each record (a tbody)
   into a block when the frame is narrower than 45rem, so a wide table (the wizard's hours) fits a
   phone, or a column beside a sidebar, instead of scrolling sideways. Each cell is named by its
   column (data-label). */
.stacked-table {
  container-type: inline-size;
}

@container (max-width: 45rem) {
  /* Hidden as .visually-hidden hides, which a container query can't apply as a class. */
  .stacked-table > table > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .stacked-table > table,
  .stacked-table > table > tbody {
    display: block;
  }

  .stacked-table > table > tbody {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bf-color-border);
  }

  .stacked-table > table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .stacked-table > table > tbody > tr > td {
    display: block;
    padding: 0.25rem 0;
    border: 0;
  }

  .stacked-table > table > tbody > tr > td:first-child {
    grid-column: 1 / -1;
    font-weight: 700;
  }

  .stacked-table > table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
  }
}

/* U-111 (Orchard's O-120): the wizard's opening-hours editor, a stacked table of days. A day
   ticked Closed or 24 hours shows no times. Stacked, each control's label sits beside it: a day's
   name and its two ticks on one line, its times on the next, and no time line on a ticked day. */
.hours-editor tr:has(.hours-flag input:checked) .hours-time > * {
  visibility: hidden;
}

@container (max-width: 45rem) {
  .stacked-table > .hours-editor > tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
  }

  .stacked-table > .hours-editor > tbody > tr > td:first-child {
    flex: 1 1 auto;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-flag,
  .stacked-table > .hours-editor > tbody > tr > .hours-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-flag {
    flex: none;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-flag::before {
    order: 1;
    font-weight: 400;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-time {
    order: 1;
    flex: 1 1 40%;
    min-width: 0;
  }

  .stacked-table > .hours-editor > tbody > tr > .hours-time > input {
    flex: 1 1 0;
    min-width: 0;
  }

  .stacked-table > .hours-editor > tbody > tr:has(.hours-flag input:checked) > .hours-time {
    display: none;
  }
}

/* U-117 (Orchard's O-126): Bizfront's own pages in its own palette, not a site's: every rule below
   that draws from the site's colours (the stepper, a chosen card, a checked box, a link) draws from
   Bizfront's here. Status colours (--bf-color-success, -error, -warning) are the same on both. */
.bizfront-page {
  --bf-color-primary: var(--bf-product-accent);
  --bf-color-primary-contrast: var(--bf-product-on-accent);
  --bf-color-text: var(--bf-product-text);
  --bf-color-muted: var(--bf-product-muted);
  --bf-color-border: var(--bf-product-border);
  --bf-color-surface: var(--bf-product-bg-alt);
  color: var(--bf-color-text);
}

/* U-120 (Orchard's TheAdmin top bar): the header of Bizfront's own pages - the name and mark, the pages
   an owner goes between and an account menu - in a tinted band under a rule. Every control is a 44px
   tap target; on a phone the pages are behind a Menu button that shares a line with the name and the
   account menu (D21), on a wide screen they show beside the name with no button. */
.product-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  padding: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--bf-product-border);
  background: var(--bf-product-bg-alt);
}

.product-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bf-product-text);
  text-decoration: none;
}

.product-mark {
  flex: none;
  color: var(--bf-product-accent);
}

/* 40rem is also the breakpoint in _ProductHeader.cshtml's script: change them together. */
.product-menu {
  position: relative;
  margin-left: auto;
}

/* One nav-link style for every item in the header (#466): the pages, the Menu button and the Account
   menu share colour and weight, with no underline at rest and one for hover and keyboard focus. */
.product-nav a,
.product-visitor a,
.product-menu summary,
.product-account summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  font-weight: 600;
  color: var(--bf-product-accent-dark);
  text-decoration: none;
}

.product-nav a:is(:hover, :focus-visible),
.product-visitor a:is(:hover, :focus-visible),
.product-menu summary:is(:hover, :focus-visible),
.product-account summary:is(:hover, :focus-visible) {
  text-decoration: underline;
}

.product-nav {
  position: absolute;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bf-product-border);
  border-radius: 0.5rem;
  background: var(--bf-color-bg);
}

@media (min-width: 40rem) {
  .product-menu {
    margin-left: 0;
    margin-right: auto;
  }

  .product-menu summary {
    display: none;
  }

  .product-nav {
    position: static;
    flex-direction: row;
    gap: 0 1rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
}

.product-account {
  position: relative;
  margin-left: 1rem;
}

@media (min-width: 40rem) {
  .product-account {
    margin-left: 0;
  }
}

/* #491: a visitor's header (sign-up, sign-in, check-your-email, set-password) has no pages and no
   account menu, only Sign in and Create account (Sign in alone on a customer's site), on the same line as the name at 390 and 1440px. */
.product-visitor {
  display: flex;
  gap: 0 1rem;
  margin-left: auto;
}

.product-account form {
  position: absolute;
  right: 0;
  z-index: 1;
  padding: 0.5rem;
  border: 1px solid var(--bf-product-border);
  border-radius: 0.5rem;
  background: var(--bf-color-bg);
}

/* U-113 (Orchard's O-122): the wizard's steps are one row of numbered circles - a done step's
   filled, the current one's ringed more thickly and its title bold, one to come plain - joined by
   a line that is the primary colour up to the current step. Each step is titled under its circle;
   in a frame under 40rem (a phone) the titles are hidden as .visually-hidden hides them, still read
   out, and a line above names the current step instead. */
.bizfront-page .wizard-steps {
  container-type: inline-size;
  margin: 0 0 1.5rem;
}
.bizfront-page .wizard-steps-status {
  display: none;
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.bizfront-page .wizard-steps ol {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  isolation: isolate;
}
.bizfront-page .wizard-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.25rem;
  color: var(--bf-color-muted);
  text-align: center;
}
.bizfront-page .wizard-steps li + li::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(1rem - 1px);
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--bf-color-border);
}
.bizfront-page .wizard-step-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--bf-color-muted);
  border-radius: 50%;
  background: var(--bf-color-bg);
  font-weight: 600;
  line-height: 1;
}
/* A step reached - done, or the current one: its title, the line into it and its ring. */
.bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step']) {
  color: var(--bf-color-text);
}
.bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step'])::before {
  background: var(--bf-color-primary);
}
.bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step']) .wizard-step-number {
  border-color: var(--bf-color-primary);
}
.bizfront-page .wizard-step-done .wizard-step-number {
  background: var(--bf-color-primary);
  color: var(--bf-color-primary-contrast);
}
.bizfront-page .wizard-steps [aria-current='step'] .wizard-step-number {
  border-width: 3px;
  color: var(--bf-color-primary);
}
.bizfront-page .wizard-steps [aria-current='step'] .wizard-step-title {
  font-weight: 700;
}
@container (max-width: 40rem) {
  .bizfront-page .wizard-steps-status {
    display: block;
  }
  /* Hidden as .visually-hidden hides, which a container query can't apply as a class. */
  .bizfront-page .wizard-step-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* In forced colours (High Contrast mode) the mode repaints a done step's fill and the line up to the
   current step like the rest, so the steps draw those, and the rings of the steps reached, in the
   system's highlight colour instead. */
@media (forced-colors: active) {
  .bizfront-page .wizard-step-number {
    border-color: GrayText;
  }
  .bizfront-page .wizard-steps li + li::before {
    background: GrayText;
  }
  .bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step'])::before {
    background: Highlight;
  }
  .bizfront-page .wizard-steps li:is(.wizard-step-done, [aria-current='step']) .wizard-step-number {
    border-color: Highlight;
  }
  .bizfront-page .wizard-step-done .wizard-step-number {
    background: Highlight;
    color: HighlightText;
  }
}

.field {
  margin-bottom: 1rem;
}
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
/* U-68 (the rest of Orchard's O-62): form fields and buttons are 44px tap targets. U-108 (Orchard's
   O-116): on Bizfront's own pages (main.bizfront-page; a tenant's pages don't have it), every
   text-like field and select is too, inside .field or not - the hours, My sites' trial field, the
   role select. */
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field textarea,
.bizfront-page select,
.bizfront-page
  input:is(
    :not([type]),
    [type='text'],
    [type='email'],
    [type='tel'],
    [type='url'],
    [type='search'],
    [type='password'],
    [type='number'],
    [type='time'],
    [type='date']
  ) {
  min-height: 44px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}
/* U-140 (Orchard's O-150, #493): every text-like input type has the one width, not only the three the
   pages first used: a password was ~199px beside an email field of 32rem. The type list is the one
   above, written again because a selector list cannot be shared. */
.field
  input:is(
    [type='text'],
    [type='email'],
    [type='tel'],
    [type='url'],
    [type='search'],
    [type='password'],
    [type='number'],
    [type='time'],
    [type='date']
  ),
.field textarea {
  width: 100%;
  max-width: 32rem;
}
/* U-140 (Orchard's O-118 show-password button, #493): a password field with its toggle is as wide as
   the fields above it, the field taking what the 44px button leaves. The toggle's eye gets a slash
   while the password shows (aria-pressed), so the icon says what a press does. */
.password-input {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 32rem;
}
.field .password-input input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
.bizfront-page .password-input .btn {
  flex: none;
  min-width: 44px;
  padding: 0.5rem;
}
.password-input svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.password-input [aria-pressed='false'] .eye-slash {
  display: none;
}
/* U-133 (Orchard's O-140): a text area grows to hold what it contains, so text a person or the AI
   wrote is never cut off behind a scrollbar they can't see (design review round 1, #460). */
.bizfront-page .field textarea {
  field-sizing: content;
}
/* U-107 (Orchard's O-114): help and error text at body size and within the measure, and a site
   address in a hint in the page's own font. */
.field .hint {
  display: block;
  max-width: var(--bf-measure);
  color: #666;
  margin-top: 0.15rem;
}
.field .hint code {
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
}
.field .error {
  display: block;
  max-width: var(--bf-measure);
  color: #b00;
  margin-top: 0.15rem;
}
/* U-129 (Orchard's O-136): a row of fields wraps, each at least 10rem wide, and stays within 48rem, so it is
   not a whole content area wide on a desktop (design review round 3, R3-02). */
.field-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 48rem;
}
.field-row .field {
  flex: 1;
  min-width: 10rem;
}
/* U-108 (Orchard's O-116): a checkbox on Bizfront's own pages is a 44px square with its box drawn
   1.5rem across at its left edge, in line with the fields and labels above it; what follows it
   overlaps the rest of the square. It has an outline just inside the square when it has keyboard
   focus. */
/* U-112: a Branding card's radio mark takes its ring from these too. */
.bizfront-page input[type='checkbox'],
.bizfront-page .choice {
  --bf-check-ring: var(--bf-color-muted);
  --bf-check-fill: var(--bf-color-bg);
  --bf-check-mark: none;
}

.bizfront-page input[type='checkbox'] {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0 calc(1.5rem - 44px) 0 0;
  vertical-align: middle;
  appearance: none;
  background:
    var(--bf-check-mark) 2px center / calc(1.5rem - 4px) no-repeat,
    linear-gradient(var(--bf-check-fill), var(--bf-check-fill)) 2px center / calc(1.5rem - 4px)
      calc(1.5rem - 4px) no-repeat,
    linear-gradient(var(--bf-check-ring), var(--bf-check-ring)) left center / 1.5rem 1.5rem
      no-repeat;
  cursor: pointer;
}
.bizfront-page input[type='checkbox']:checked,
.bizfront-page .choice:has(> input:checked) {
  --bf-check-ring: var(--bf-color-primary);
  --bf-check-fill: var(--bf-color-primary);
  --bf-check-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.bizfront-page input[type='checkbox']:focus-visible {
  outline: 2px solid var(--bf-color-primary);
  outline-offset: -6px;
}

/* High Contrast mode (forced colours) drops the background layers the box is drawn with, so there
   the checkbox is the browser's own, which the mode draws itself, still 44px; nothing overlaps it. */
@media (forced-colors: active) {
  .bizfront-page input[type='checkbox'] {
    appearance: auto;
    margin-right: 0;
  }
}
/* A checkbox beside its label, the label's first line level with the box. */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.field-check label {
  padding-top: calc((44px - 1.5em) / 2);
}
.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}
.contact-form {
  margin-top: 1.5rem;
}

.btn {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  border: 1px solid #1a1a1a;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  background: #1a1a1a;
  color: #fff;
}
.btn-secondary {
  background: #fff;
  color: #1a1a1a;
}
.btn-danger {
  background: #fff;
  color: var(--bf-color-error);
  border-color: var(--bf-color-error);
}
/* U-118 (Orchard's O-127): a button on Bizfront's own pages is drawn as bizfront.cc's (Main's) are -
   rounded 0.5rem, its words semibold, 1.3rem of padding each side - alike on both tracks and as
   tall as a field (44px), its label centred. A row of them is the shared
   .action-row. */
.bizfront-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.3rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
/* U-117 (Orchard's O-126): on Bizfront's own pages a primary button is filled with the accent, a
   secondary one outlined in the muted colour, as Main's ghost button is, but with an outline that
   shows (3:1). */
.bizfront-page .btn-primary {
  background: var(--bf-color-primary);
  border-color: var(--bf-color-primary);
  color: var(--bf-color-primary-contrast);
}
.bizfront-page .btn-primary:hover {
  background: var(--bf-product-accent-dark);
  border-color: var(--bf-product-accent-dark);
}
.bizfront-page .btn-secondary {
  background: transparent;
  border-color: var(--bf-color-muted);
  color: var(--bf-color-text);
}
.bizfront-page .btn-secondary:hover {
  background: var(--bf-color-surface);
}
.bizfront-page a:not(.btn):hover {
  color: var(--bf-product-accent-dark);
}

.summary-list dt {
  font-weight: 600;
  margin-top: 0.75rem;
}
.summary-list dd {
  margin: 0 0 0.25rem;
}

/* U-109 (Orchard's O-117): on Bizfront's own pages, every value in a list of details (the wizard's
   review) is at least 44px tall, its text at the top, so a link in one (a phone number, an email
   address, each invited editor on a line of its own) is a 44px tap target taking its own space,
   never overlapping the next, and the rows keep one rhythm. */
.bizfront-page .summary-list dd {
  min-height: 44px;
}

.bizfront-page .summary-list dd a {
  display: inline-block;
  min-height: 44px;
  vertical-align: top;
}

/* U-112 (Orchard's O-121): the Branding step's colours and fonts are cards to choose from, each
   showing what a site gets - a palette's primary, surface and text colours, and a typography's
   heading and body fonts, the values _Layout.cshtml gives each name (a new palette or typography
   there needs its swatch or sample here too). Each card's radio covers the whole card,
   transparent, so the card is its tap target; the card draws the radio's state. Colours sit two to
   a row on a phone, fonts one. */
.bizfront-page .choice-group {
  min-width: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}
/* Each set's heading reads like the step's other labels: bold, as the step's .field labels are. */
.bizfront-page .choice-group > legend {
  margin-bottom: 0.25rem;
  padding: 0;
  font-weight: 600;
}
.bizfront-page .choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  max-width: 48rem;
}
.bizfront-page .choice-list-wide {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.bizfront-page .choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--bf-color-border);
  border-radius: 0.5rem;
}
.bizfront-page .choice > input[type='radio'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bizfront-page .choice-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.bizfront-page .choice-name::before {
  content: '';
  flex: none;
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--bf-check-ring);
  border-radius: 50%;
  background: var(--bf-color-bg);
}
.bizfront-page .choice:has(> input:checked) {
  border-color: var(--bf-color-primary);
  box-shadow: 0 0 0 1px var(--bf-color-primary);
}
.bizfront-page .choice:has(> input:checked) .choice-name::before {
  border-width: 0.375rem;
}
.bizfront-page .choice:has(> input:focus-visible) {
  outline: 2px solid var(--bf-color-primary);
  outline-offset: 2px;
}
.bizfront-page .palette-swatch {
  display: flex;
  height: 2rem;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 0.25rem;
}
.bizfront-page .palette-swatch > span {
  flex: 1;
}
.bizfront-page .palette-swatch > :first-child {
  flex: 2;
  background: var(--swatch-primary);
}
.bizfront-page .palette-swatch > :nth-child(2) {
  background: var(--swatch-surface);
}
.bizfront-page .palette-swatch > :nth-child(3) {
  background: var(--swatch-text);
}
.bizfront-page .palette-swatch[data-palette='Forest'] {
  --swatch-primary: #1a5c4a;
  --swatch-surface: #eef5f1;
  --swatch-text: #1a1a1a;
}
.bizfront-page .palette-swatch[data-palette='Ocean'] {
  --swatch-primary: #1a4d8f;
  --swatch-surface: #eff4fb;
  --swatch-text: #1f2430;
}
.bizfront-page .palette-swatch[data-palette='Sunset'] {
  --swatch-primary: #a94d1c;
  --swatch-surface: #fbf6f2;
  --swatch-text: #241f1a;
}
.bizfront-page .palette-swatch[data-palette='Slate'] {
  --swatch-primary: #3a3f4b;
  --swatch-surface: #f5f6f8;
  --swatch-text: #1f2228;
}
.bizfront-page .font-sample {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  --sample-heading: 'Fraunces', Georgia, serif;
}
.bizfront-page .font-sample-heading {
  font-family: var(--sample-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.bizfront-page .font-sample-body {
  font-family: var(--sample-body);
}
.bizfront-page .font-sample[data-typography='Default'] {
  --sample-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bizfront-page .font-sample[data-typography='Serif'] {
  --sample-body: Georgia, 'Times New Roman', serif;
}
.bizfront-page .font-sample[data-typography='Modern'] {
  --sample-body: 'Helvetica Neue', Arial, sans-serif;
  --sample-heading: var(--sample-body);
}

/* In forced colours (High Contrast mode) the swatches keep their own colours, since they are what's
   being chosen, and the chosen card is outlined in the system's highlight colour, where its border
   and shadow are repainted like every other card's. */
@media (forced-colors: active) {
  .bizfront-page .palette-swatch {
    forced-color-adjust: none;
  }

  .bizfront-page .choice:has(> input:checked) {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}

/* U-116 (Orchard's O-125): a notice on Bizfront's own pages - a site created, a request refused, a
   password shown once - in a framed box, its kind drawn by its border and tint, its text the
   page's own. */
.bizfront-page .notice {
  max-width: var(--bf-measure);
  padding: 0.75rem 1rem;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 4px;
  color: var(--bf-color-text);
}

.bizfront-page .notice-success {
  border-color: var(--bf-color-success);
  background: var(--bf-color-success-surface);
}

.bizfront-page .notice-error {
  border-color: var(--bf-color-error);
  background: var(--bf-color-error-surface);
}

.bizfront-page .notice-warning {
  border-color: var(--bf-color-warning);
  background: var(--bf-color-warning-surface);
}

/* U-116 (Orchard's O-125): a row of actions - a page's own (My sites' Create a new site and the
   rest) or a card's - 8px apart across and down when they wrap. A form in it is just its button. */
.bizfront-page .action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bizfront-page .action-row form {
  display: contents;
}

/* U-128 (Orchard's O-135): a wizard step's own row of actions stays at the bottom of the screen while the
   step scrolls, so its primary action is in reach on a step of any length (design review round 2,
   B3: the business profile is some 3,000px of fields). */
.bizfront-page .action-row-sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--bf-color-border);
  background: var(--bf-color-bg);
}

/* U-116 (Orchard's O-125): My sites lists each site as a framed card - its name, a status badge,
   its address, when it was created and its subscription, then its row of actions - in as many
   columns as fit. */
.bizfront-page .site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.bizfront-page .site-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bf-color-border);
  border-radius: 8px;
}

.bizfront-page .site-card > * {
  margin: 0;
}

.bizfront-page .site-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.bizfront-page .site-card-name {
  margin: 0;
  font-size: 1.125rem;
}

.bizfront-page .site-status {
  padding: 0.125rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--bf-color-muted);
  line-height: 1.5;
}

.bizfront-page .site-status[data-status='live'] {
  color: var(--bf-color-success);
  background: var(--bf-color-success-surface);
}

.bizfront-page .site-status[data-status='failed'] {
  color: var(--bf-color-error);
  background: var(--bf-color-error-surface);
}

/* The address is a link on a line of its own: a 44px tap target. */
.bizfront-page .site-card-address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.bizfront-page .site-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}

.bizfront-page .site-card-facts dt {
  font-weight: 600;
}

.bizfront-page .site-card-facts dd {
  margin: 0;
}

/* The trial field under its label, its button beside it. */
.bizfront-page .site-card-trial {
  display: grid;
  grid-template-columns: 8rem auto;
  justify-content: start;
  align-items: end;
  gap: 0.25rem 0.5rem;
}

.bizfront-page .site-card-trial label {
  grid-column: 1 / -1;
  font-weight: 600;
}

.bizfront-page .site-card-trial input {
  width: 100%;
}

/* O-133 / U-125: the slim notice the people who run a site with no plan see above its header. */
.no-plan-notice {
  background: var(--bf-color-surface);
  border-bottom: 1px solid var(--bf-color-border);
  color: var(--bf-color-text);
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem 1rem;
}

.no-plan-notice p {
  margin: 0;
}

.no-plan-notice a {
  color: var(--bf-color-text);
  font-weight: 600;
  text-decoration: underline;
}