@charset "UTF-8";
/* ==========================================================================
   Loc8NearMe design system
   ==========================================================================
   Version 1 · October 2026. One stylesheet for the new design: tokens, type styles and
   components. The brand book that documents every class is /brandbook.html.

   Load the two faces before this file:

     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&family=Inter:wght@100..900&display=swap">
     <link rel="stylesheet" href="/css/design-system.css">

   Registers
     .bp-page   the business profile and the directory (the home page, the
                blog post): Figtree, white 14px cards on a pale ground
     .mk-page   pricing, listings management, payment: Inter, heavy headings
   Frame
     .site-header, .site-footer, .skip, and <body class="site-page"> on a
     page built on this sheet alone

   Contents
     1. Tokens
     2. Type styles (.mk-*, .pf-*)
     3. Components: shared, site header, site footer, profile, directory,
        marketing
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Colour — one light palette */
  --bg: #f7f9fc;  /* Page ground of the profile, under its white cards. */
  --card: #ffffff;  /* Cards, panels, form fields, and the marketing page itself (pricing and listings run on white). */
  --wash: #f8fafd;  /* Inset fill inside a card: social buttons, compare-table head and featured column, mock panels. */
  --wash-2: #eef2f7;  /* Second inset step: photo and map placeholders behind images that have not loaded. */
  --band: #f1f6fc;  /* Tinted panel: the profile's review band, pricing's closing card, the compare table's price row. */
  --heading: #0f2545;  /* Headings, the business name, prices, strong values and the logo fill on white (--navy on marketing pages). */
  --text: #33415c;  /* Default text colour of both registers (pricing's --ink). */
  --text-2: #475569;  /* Paragraphs and body copy (--body on marketing pages). */
  --muted: #64748b;  /* Meta lines, hints, captions, dates. */
  --line: #e3e8f0;  /* Card borders, dividers, table rules, the header's bottom rule. */
  --line-2: #eef1f6;  /* Softer divider inside a card: FAQ rows, detail rows, the rule above a card's note. */
  --line-strong: #8a97a8;  /* Form-field borders on the profile, and the · and / separators in meta lines and the breadcrumb. */
  --line-control: #c5d3e8;  /* Marketing secondary-button border (pricing's --line-strong), listings form fields and choice tiles, the pricing hero's orbit ring. */
  --line-control-hover: #98aedd;  /* Secondary-button border on hover (pricing). */
  --accent: #2563eb;  /* The brand blue: primary buttons, links, the active tab, eyebrows, icons on tinted tiles, the featured plan. */
  --accent-dk: #1d4ed8;  /* Hover and pressed state of accent fills and links; check marks and Included cells on pricing (--success there); the selected choice tile's label. */
  --accent-wash: #eff5ff;  /* Tinted surface behind accent text and icons: tags, pills, icon tiles, check discs, the verified chip, the featured column head (--tint, --blue-50 on marketing pages). */
  --accent-line: #d5e3fb;  /* Border of tinted surfaces, and hairlines on tinted grounds: the hero trust row, the closing card, the service-area inset. */
  --accent-2: #4c86fe;  /* Gradient partner of accent in illustrations only: the mock logo tile and the pricing hero glow (--blue-2). */
  --on-accent: #ffffff;  /* Text and icons on an accent or accent-dk fill (button labels, the plan badge, the Today tag). */
  --sky: #46affd;  /* The eyebrow dot and its 12% halo on pricing and listings (named --red there). */
  --band-dark: var(--heading);  /* Start of the dark band gradient (135°) on marketing pages — the heading navy. */
  --band-dark-end: #1945c2;  /* End of the dark band gradient. */
  --on-dark: #ffffff;  /* Headings and strong text on the dark band and on photo captions (15.32:1 on band-dark). */
  --on-dark-2: #d5e3fb;  /* Body copy and small print on the dark band: 11.82:1 at its navy end, 6.07:1 at its blue end. */
  --on-dark-accent: #c7dcfe;  /* Eyebrow text and check marks on the dark band: 5.65:1 at its blue end. */
  --on-dark-fill: rgba(255, 255, 255, .08);  /* Inset panels on the dark band (pricing's context points). */
  --on-dark-line: rgba(255, 255, 255, .14);  /* Borders of panels on the dark band, the number plate inside a context point, rules between list columns. */
  --header-bg: #323946;  /* The site header's slate, and the tint over the home hero's city photo: the site's identity colour. on-dark 11.61:1, on-dark-2 8.96:1, on-dark-accent 8.34:1. */
  --gold: #8f6608;  /* Reserved for the Loc8NearMe Recommended award (asset group Badges), darkened from the badge for AA: 5.16:1 on card, 4.67:1 on gold-wash. */
  --gold-wash: #fbf3e2;  /* Ground behind gold text, for the award only. */
  --gold-line: #ecd9a4;  /* Border of a gold-wash surface, for the award only. */
  --green: #3c763d;  /* Success text: a sent review, a received request. */
  --green-wash: #e4f0dc;  /* Ground of a success message or the success mark. */
  --green-line: #c7e0b8;  /* Border of a green-wash surface. */
  --amber: #846839;  /* Warning text. */
  --amber-wash: #fdf6e0;  /* Ground of a warning message. */
  --amber-line: #f0e0b0;  /* Border of an amber-wash surface. */
  --red: #a94442;  /* Errors: field messages, invalid field borders, failed submissions. */
  --red-wash: #f6e2e2;  /* Ground of a failure message. */
  --red-line: #e6c3c3;  /* Border of a red-wash surface. */
  --brand-facebook: #1877f2;  /* Facebook glyph in the profile's social buttons. */
  --brand-instagram: #d62976;  /* Instagram glyph in the profile's social buttons. */
  --brand-yelp: #d32323;  /* Yelp glyph in social buttons and as a review's source mark. */
  --link: var(--accent);  /* Inline and action links. */
  --link-hover: var(--accent-dk);  /* Links on hover, with an underline. */
  --star: #f5a623;  /* Filled rating stars only. */
  --star-off: #dbe1ea;  /* The empty star row under the filled one, and unpicked stars in the rating input. */

  /* Spacing */
  --s-1: 4px;  /* Star and rating-input gaps; the smallest nudge. */
  --s-2: 8px;  /* Icon-to-label gap, tag and chip gaps, gallery gutter. */
  --s-3: 12px;  /* Gaps inside cards, between hero rows, between buttons. */
  --s-4: 16px;  /* Grid gaps between contact cards and review cards; field spacing. */
  --s-5: 20px;  /* Sidebar card padding; the gap between stacked cards; marketing button side padding. */
  --s-6: 28px;  /* Main-column card padding; the gap above the tab strip; marketing section-head and trust-row gaps. */
  --s-7: 40px;  /* The profile hero's column gap; the disclaimer's bottom padding. */
  --s-8: 60px;  /* Top padding of pricing's closing section; the step between the orbit rings in the pricing hero. */

  /* Radius */
  --r-xs: 5px;  /* Photo caption, the View all photos pill, the verified chip, the today row. */
  --r-sm: 8px;  /* Profile buttons and ghost buttons, city tiles, chips, review-form fields, social buttons. */
  --r-input: 9px;  /* Marketing fields and choice tiles (listings form), form messages. */
  --r-md: 10px;  /* Gallery tiles, service tiles, the map frame. */
  --r-tile: 11px;  /* The square icon tile that heads a profile card. */
  --r-control: 12px;  /* Marketing buttons and the header CTA, icon boxes, directory tiles, the service-area inset. */
  --r-lg: 14px;  /* Every white card on the profile; payment's review-queue note; the mock logo tile. */
  --r-xl: 18px;  /* The profile's review band and review modal; pricing's compare table. */
  --r-2xl: 20px;  /* Pricing's profile mock; the listings form panel and payment offer card on phones. */
  --r-card: 22px;  /* Price cards. */
  --r-panel: 24px;  /* The listings form panel, the payment offer card, the listings dark bundle. */
  --r-band: 28px;  /* Pricing's dark context band and closing card. */
  --r-pill: 999px;  /* Pills, tags, avatars, round icon chips, review-rail arrows, the plan badge. */

  /* Shadow (navy or accent at low alpha, never black) */
  --soft: 0 1px 2px rgba(15, 37, 69, .04);  /* Profile cards at rest; the hover lift on profile buttons and service tiles. */
  --shadow: 0 10px 30px rgba(15, 37, 69, .07);  /* Floating profile pieces: the View all photos pill, the review modal. */
  --shadow-sm: 0 8px 28px rgba(15, 37, 69, .08);  /* Marketing tables and strips: the compare table. */
  --shadow-card: 0 6px 24px rgba(15, 37, 69, .045);  /* Price cards at rest. */
  --shadow-featured: 0 20px 54px rgba(37, 99, 235, .14);  /* The featured price card, with its 2px accent border. */
  --shadow-panel: 0 16px 48px rgba(15, 37, 69, .08);  /* Large white panels on a tinted hero: the listings form panel, the payment offer card. */
  --shadow-mock: 0 26px 70px rgba(15, 37, 69, .14);  /* The profile mock floating in the pricing hero. */
  --shadow-band: 0 22px 54px rgba(15, 37, 69, .17);  /* The dark context band on pricing. */
  --shadow-accent: 0 12px 30px rgba(37, 99, 235, .24);  /* Primary buttons on marketing pages and the header CTA: the blue glow. */
  --shadow-accent-sm: 0 8px 20px rgba(37, 99, 235, .14);  /* Full-width submit buttons inside panels (listings form). */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 5px #2563eb;  /* Keyboard focus on the profile: a 2px white gap, then 3px of accent (5.17:1 on card, 4.76:1 on band), drawn as a shadow so it follows the radius. */

  /* Layout */
  --maxw: 1180px;  /* Content width of every page: the profile wrap, marketing containers, the header row. */
  --maxw-narrow: 1080px;  /* The payment page container. */
  --gutter: 20px;  /* Side gutter at desktop: width min(calc(100% - 40px), maxw). */
  --section: 80px;  /* Top and bottom padding of a marketing section. */
  --section-sm: 60px;  /* Marketing section padding under 760px. */
  --sidebar: 342px;  /* The profile sidebar column (main 1fr + 342px), stacked under 1080px. */
  --header-h: 76px;  /* Site header height; 66px under 680px. */

  /* Stroke */
  --bw: 1px;  /* Every hairline: cards, dividers, fields. */
  --bw-2: 2px;  /* The active tab's underline; the featured price card's border. */
  --bw-3: 3px;  /* The accent rule across the top of the Service Area card. */

  /* Letter-spacing */
  --ls-cap: .13em;  /* Uppercase eyebrows in both registers. */
  --ls-tight: -.03em;  /* The business name and the review score. */
  --ls-head: -.04em;  /* Marketing headings; the hero h1 tightens to -.052em. */

  /* Type families: Inter for marketing, Figtree for the profile */
  --font-marketing: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-profile: "Figtree", "ProximaNovaRegular", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-profile-head: "Figtree", "ProximaNovaExtrabld", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}


/* ==========================================================================
   2. TYPE STYLES
   ========================================================================== */

/* Marketing */
.mk-display { font-family: var(--font-marketing); font-size: 58px; line-height: 1.08; font-weight: 900; letter-spacing: -0.052em; }
.mk-h2 { font-family: var(--font-marketing); font-size: 46px; line-height: 1.06; font-weight: 900; letter-spacing: -0.04em; }
.mk-h2-panel { font-family: var(--font-marketing); font-size: 40px; line-height: 1.1; font-weight: 900; letter-spacing: -0.04em; }
.mk-price { font-family: var(--font-marketing); font-size: 48px; line-height: 1; font-weight: 900; letter-spacing: -0.05em; }
.mk-plan { font-family: var(--font-marketing); font-size: 23px; line-height: 1.2; font-weight: 900; letter-spacing: -0.04em; }
.mk-title { font-family: var(--font-marketing); font-size: 19px; line-height: 1.35; font-weight: 800; }
.mk-h3 { font-family: var(--font-marketing); font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -0.04em; }
.mk-lead { font-family: var(--font-marketing); font-size: 18px; line-height: 1.7; font-weight: 400; }
.mk-body { font-family: var(--font-marketing); font-size: 16px; line-height: 1.65; font-weight: 400; }
.mk-body-sm { font-family: var(--font-marketing); font-size: 14px; line-height: 1.7; font-weight: 400; }
.mk-list { font-family: var(--font-marketing); font-size: 13px; line-height: 1.45; font-weight: 400; }
.mk-caption { font-family: var(--font-marketing); font-size: 12px; line-height: 1.5; font-weight: 400; }
.mk-eyebrow { font-family: var(--font-marketing); font-size: 12px; line-height: 1.55; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.mk-label { font-family: var(--font-marketing); font-size: 11px; line-height: 1.55; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.mk-button { font-family: var(--font-marketing); font-size: 14px; line-height: 1.55; font-weight: 800; }

/* Profile */
.pf-name { font-family: var(--font-profile-head); font-size: 42px; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; }
.pf-score { font-family: var(--font-profile-head); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.pf-h2 { font-family: var(--font-profile-head); font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.pf-h3 { font-family: var(--font-profile-head); font-size: 17px; line-height: 1.6; font-weight: 800; letter-spacing: -0.015em; }
.pf-title { font-family: var(--font-profile-head); font-size: 14.5px; line-height: 1.3; font-weight: 800; }
.pf-lede { font-family: var(--font-profile); font-size: 15.5px; line-height: 1.65; font-weight: 400; }
.pf-body { font-family: var(--font-profile); font-size: 15px; line-height: 1.7; font-weight: 400; }
.pf-body-sm { font-family: var(--font-profile); font-size: 14px; line-height: 1.55; font-weight: 400; }
.pf-hint { font-family: var(--font-profile); font-size: 13.5px; line-height: 1.6; font-weight: 400; }
.pf-link { font-family: var(--font-profile); font-size: 13.5px; line-height: 1.6; font-weight: 700; }
.pf-button { font-family: var(--font-profile); font-size: 14.5px; line-height: 1.6; font-weight: 700; }
.pf-small { font-family: var(--font-profile); font-size: 12.5px; line-height: 1.6; font-weight: 400; }
.pf-pill { font-family: var(--font-profile); font-size: 12px; line-height: 1.6; font-weight: 700; }
.pf-eyebrow { font-family: var(--font-profile); font-size: 11.5px; line-height: 1.6; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }


/* ==========================================================================
   3. COMPONENTS
   ========================================================================== */

/* ==========================================================================
   SHARED — skip link, screen-reader text
   ========================================================================== */

.skip {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 100;
  padding: 12px 18px;
  border: var(--bw-2) solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--heading);
  font-weight: 700;
}
.skip:focus { top: 12px; }

.sr-only,
.bp-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* <body class="site-page">: a page built on this sheet alone, frame and
   register together (the home page). No browser margin, and the ground
   behind overscroll. */
.site-page { margin: 0; background: var(--bg); }


/* ==========================================================================
   SITE HEADER — www/views/layout/headerPricing.php
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--header-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: var(--bw) solid var(--on-dark-line);
  color: var(--on-dark);
  font-family: var(--font-marketing);
  line-height: 1.55;
}
.site-header *,
.site-header *::before,
.site-header *::after { box-sizing: border-box; }
.site-header a { color: inherit; text-decoration: none; }

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  width: min(calc(100% - 2 * var(--gutter)), var(--maxw));
  min-height: var(--header-h);
  margin: 0 auto;
}

.site-header-brand { display: flex; align-items: center; flex-shrink: 0; }

/* The logo file is white (drawn for a dark header), so it masks a fill of
   on-dark white. The mask is /img/logo.png. */
.site-header-logo {
  display: block;
  width: 165px;
  aspect-ratio: 249 / 50;
  background: var(--on-dark);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.site-header-links {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--on-dark-2);
  font-size: 14px;
  font-weight: 600;
}
.site-header-links a:hover { color: var(--on-dark); }

.site-header-actions { display: flex; align-items: center; gap: 10px; }

.site-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: var(--bw) solid var(--accent);
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--on-accent) !important;
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--shadow-accent);
  transition: .2s ease;
}
.site-header-btn:hover { background: var(--accent-dk); transform: translateY(-1px); }
.site-header a:focus-visible { outline: 3px solid var(--on-dark-accent); outline-offset: 5px; }

/* payment.php: the same row, not sticky, with one mail link instead of nav. */
.site-header--static {
  position: static;
  background: var(--header-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Over a hero (the home page): the bar lies on the photo with no fill and
   takes header-bg once the page scrolls, when the script after the header sets
   .is-scrolled. The hero runs under the bar by the bar's own height and pads
   itself down by the same amount. Until the page script marks <html> as .js
   the bar stays solid, so it never sits unfilled on a light page. */
.site-header--over {
  margin-bottom: calc(-1 * (var(--header-h) + var(--bw)));
  transition: background-color .25s ease, border-color .25s ease;
}
.js .site-header--over:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header--over ~ .bp-page > .bp-home-hero {
  padding-top: calc(var(--hero-pad-top) + var(--header-h) + var(--bw));
}
.site-header-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}
.site-header .site-header-help { color: var(--on-dark-2); }  /* beats .site-header a { color: inherit } */
.site-header-help svg { width: 16px; height: 16px; color: var(--on-dark-accent); }
.site-header .site-header-help:hover { color: var(--on-dark); }

@media (max-width: 1000px) {
  .site-header-links { display: none; }
}
@media (max-width: 700px) {
  .site-header-help { gap: 5px; font-size: 12px; }
  .site-header-help svg { display: none; }
}
@media (max-width: 680px) {
  :root { --header-h: 66px; }
  .site-header-inner { width: min(calc(100% - 28px), var(--maxw)); min-height: var(--header-h); gap: 12px; }
  .site-header-btn { padding: 0 12px; font-size: 12px; }
}
@media (max-width: 380px) {
  .site-header-logo { width: 140px; }
}
@media (forced-colors: active) {
  .site-header-logo { forced-color-adjust: none; background: CanvasText; }
  .js .site-header--over:not(.is-scrolled) { background: Canvas; }
}


/* ==========================================================================
   SITE FOOTER — the new footer that replaces views/layout/footerMain.php
   ========================================================================== */

.site-footer {
  background: var(--bg);
  border-top: var(--bw) solid var(--line);
  color: var(--text-2);
  font-family: var(--font-marketing);
  line-height: 1.55;
}
.site-footer *,
.site-footer *::before,
.site-footer *::after { box-sizing: border-box; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--r-xs); }

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
  width: min(calc(100% - 2 * var(--gutter)), var(--maxw));
  margin: 0 auto;
  padding: 56px 0 48px;
}

.site-footer-home { display: inline-block; }
.site-footer-logo {
  display: block;
  width: 150px;
  aspect-ratio: 249 / 50;
  background: var(--heading);
  -webkit-mask: url("../img/logo.png") center / contain no-repeat;
  mask: url("../img/logo.png") center / contain no-repeat;
}
.site-footer-brand p { max-width: 320px; margin: var(--s-4) 0 0; color: var(--text-2); font-size: 14px; line-height: 1.65; }

.site-footer-title {
  margin: 0 0 var(--s-4);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-footer-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; }
.site-footer-links a:hover { color: var(--accent); }

.site-footer-social { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.site-footer-social-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-control);
  background: var(--card);
  color: var(--text-2);
  transition: background .2s ease, border-color .2s ease;
}
.site-footer-social-btn:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.site-footer-social-btn svg { width: 20px; height: 20px; }
.site-footer-social-btn--facebook { color: var(--brand-facebook); }
.site-footer-social-btn--instagram { color: var(--brand-instagram); }

.site-footer-app { display: inline-block; }
.site-footer-app img { display: block; width: 150px; max-width: 100%; height: auto; }

@media (max-width: 1000px) {
  .site-footer-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .site-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .site-footer-inner { width: min(calc(100% - 28px), var(--maxw)); gap: var(--s-6) var(--s-5); padding: 40px 0 32px; }
}
@media (max-width: 359.98px) {
  .site-footer-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .site-footer-logo { forced-color-adjust: none; background: CanvasText; }
}


/* ==========================================================================
   PROFILE REGISTER — www/css/profile_skin.css
   ========================================================================== */

.bp-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-profile);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  interpolate-size: allow-keywords;

  /* One motion scale: --t for anything that answers a pointer, --t-slow for
     anything that changes the layout. */
  --t: .18s;
  --t-slow: .28s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

.bp-wrap { width: min(var(--maxw), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

:where(.bp-page) a { color: inherit; text-decoration: none; }
:where(.bp-page) a:hover,
:where(.bp-page) a:focus { color: inherit; text-decoration: none; }
:where(.bp-page) p,
:where(.bp-page) ul,
:where(.bp-page) ol,
:where(.bp-page) dl,
:where(.bp-page) dd,
:where(.bp-page) h1,
:where(.bp-page) h2,
:where(.bp-page) h3,
:where(.bp-page) figure { margin: 0; }
:where(.bp-page) blockquote { margin: 0; padding: 0; border: 0; font-size: inherit; }
:where(.bp-page) ul,
:where(.bp-page) ol { padding: 0; list-style: none; }
/* main-1119.css gives every <li> 1.3px of letter-spacing; the profile wants none. */
:where(.bp-page) li { letter-spacing: normal; }
:where(.bp-page) img { display: block; max-width: 100%; height: auto; }

.bp-page :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

.bp-i { flex: none; }
.bp-i--sm { width: 15px; height: 15px; }
.bp-page [id] { scroll-margin-top: 72px; }

/* --- Shared pieces -------------------------------------------------------- */

.bp-card {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--soft);
}

.bp-h2 {
  font-family: var(--font-profile-head);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--heading);
  text-wrap: balance;
}

.bp-h3 {
  font-family: var(--font-profile-head);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--heading);
}

.bp-body { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.bp-hint { font-size: 13.5px; color: var(--muted); }
.bp-note {
  font-size: 12.5px;
  color: var(--muted);
  border-top: var(--bw) solid var(--line-2);
  padding-top: var(--s-3);
  margin-top: var(--s-5);
}

.bp-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--link);
  transition: color var(--t) var(--ease);
}
.bp-link:hover { color: var(--link-hover); text-decoration: underline; }

.bp-strong-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading);
  transition: color var(--t) var(--ease);
}
.bp-strong-link:hover { color: var(--link); }

.bp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14.5px;
  font-weight: 700;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bp-btn:hover { background: var(--accent-dk); color: var(--on-accent); box-shadow: var(--soft); }
.bp-btn .bp-i { width: 18px; height: 18px; }

.bp-btn--inline {
  display: inline-flex;
  gap: var(--s-2);
  flex: 0 0 auto;
  padding: 0 var(--s-5);
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bp-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: 0 var(--s-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}
.bp-ghost:hover { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent); }
.bp-ghost .bp-i { width: 17px; height: 17px; }
.bp-ghost--block { display: flex; width: 100%; min-height: 44px; font-size: 14px; font-weight: 700; }

/* The round tinted plate behind a contact icon. */
.bp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
}
.bp-chip .bp-i { width: 19px; height: 19px; }

/* Its squared twin, which heads a card rather than a contact line. */
.bp-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-tile);
  background: var(--accent-wash);
  color: var(--accent);
}
.bp-icon-tile .bp-i { width: 20px; height: 20px; }
.bp-icon-tile--round { width: 44px; height: 44px; border-radius: var(--r-pill); }

.bp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

/* Five stars, filled by percentage so a 4.6 need not round to a whole star. */
.bp-stars { position: relative; display: inline-flex; line-height: 0; }
.bp-stars-off,
.bp-stars-on { display: flex; gap: 1px; }
.bp-stars-off { color: var(--star-off); }
.bp-stars-on {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--star);
}
.bp-stars .bp-i { width: 16px; height: 16px; }

/* --- Breadcrumb ------------------------------------------------------------ */

.bp-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: var(--s-4) 0 var(--s-3);
  font-size: 12.5px;
  color: var(--muted);
}
.bp-crumbs a { transition: color var(--t) var(--ease); }
.bp-crumbs a:hover { color: var(--link); text-decoration: underline; }
.bp-crumbs .sep { color: var(--line-strong); }
.bp-crumbs strong { color: var(--text-2); font-weight: 600; }

/* --- Hero ------------------------------------------------------------------- */

.bp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  padding-top: var(--s-3);
}

/* Lead shot across the top, two beneath it. Fixed row heights, so the block
   keeps its silhouette whatever the photos' proportions; object-fit crops. */
.bp-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 300px 108px;
  gap: var(--s-2);
  min-width: 0;
}
.bp-gallery--0 { grid-template-rows: 300px; }
.bp-gallery--0 .bp-photo--lead { border-radius: var(--r-lg); }
.bp-gallery--1 { grid-template-columns: minmax(0, 1fr); }
.bp-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.bp-photo {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--wash-2);
}
.bp-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.bp-photo:hover img { transform: scale(1.035); }
.bp-photo--lead { grid-column: 1 / -1; border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md); }

.bp-photo-label {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  max-width: calc(100% - var(--s-6));
  padding: 5px 10px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--heading) 74%, transparent);
  color: var(--on-dark);
  font-size: 12px;
  font-weight: 600;
}

.bp-all-photos {
  position: absolute;
  z-index: 2;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-xs);
  background: var(--card);
  color: var(--heading);
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.bp-all-photos .bp-i { width: 15px; height: 15px; }

.bp-ident-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.bp-verified {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: var(--r-xs);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.bp-verified .bp-i { width: 17px; height: 17px; }

.bp-quick { display: flex; gap: var(--s-2); }

.bp-eyebrow {
  margin-top: var(--s-5);
  text-transform: uppercase;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--ls-cap);
  color: var(--muted);
}

.bp-name {
  font-family: var(--font-profile-head);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  color: var(--heading);
  margin: var(--s-3) 0 var(--s-3);
  text-wrap: balance;
}
.bp-eyebrow + .bp-name { margin-top: 7px; }

.bp-rating,
.bp-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.bp-rating { font-size: 14px; color: var(--text-2); }
.bp-rating .bp-score { font-weight: 800; color: var(--heading); }
.bp-rating .bp-count { color: var(--muted); }
a.bp-count:hover { color: var(--link); text-decoration: underline; }

.bp-category { margin-top: var(--s-3); font-size: 13.5px; color: var(--muted); }
.bp-dot { color: var(--line-strong); }

.bp-lede {
  margin-top: var(--s-4);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 62ch;
}

.bp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.bp-tags li > * {
  display: block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--t) var(--ease);
}
.bp-tags a:hover { background: var(--accent-line); }

.bp-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.bp-btn--hero { flex: 1 1 200px; max-width: 260px; }
.bp-hero-cta .bp-ghost { min-height: 44px; }

/* --- Contact cards ---------------------------------------------------------- */

.bp-contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* Icon outside the text block; the link is pushed to the card's foot so all
   four links share one line whatever the copy above them runs to. */
.bp-contact-card {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
}
.bp-contact-card > .bp-chip { align-self: flex-start; }
.bp-contact-card > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bp-contact-card .bp-link { margin-top: auto; align-self: flex-start; }

.bp-contact-head {
  font-family: var(--font-profile-head);
  font-size: 14px;
  font-weight: 800;
  color: var(--heading);
  margin-bottom: 5px;
}

.bp-contact-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  padding-bottom: var(--s-3);
}

.bp-today-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-today-row[hidden] { display: none; }
.bp-hour-day { color: var(--heading); font-weight: 700; }
.bp-hour-day::after { content: ":"; }
.bp-today-row.is-closed .bp-hour-time { color: var(--muted); }

/* --- Section tabs ----------------------------------------------------------- */

.bp-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: var(--s-6);
  margin-top: var(--s-6);
  border-bottom: var(--bw) solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.bp-tabs::-webkit-scrollbar { display: none; }
.bp-tabs a {
  padding: var(--s-3) 0;
  border-bottom: var(--bw-2) solid transparent;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.bp-tabs a:hover { color: var(--accent); }
.bp-tabs a.is-current { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Split: main column + sidebar ------------------------------------------- */

.bp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar);
  gap: var(--s-5);
  align-items: start;
  margin-top: var(--s-5);
}
.bp-main,
.bp-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }

.bp-block { padding: var(--s-6); }
.bp-side .bp-block { padding: var(--s-5); }

.bp-section-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.bp-section-head--split { justify-content: space-between; }
.bp-block > .bp-h2 { margin-bottom: var(--s-3); }
.bp-block > .bp-h3 { margin-bottom: var(--s-4); }

/* --- Service area ----------------------------------------------------------- */

.bp-area { position: relative; overflow: hidden; }
.bp-area::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--bw-3);
  background: linear-gradient(90deg, var(--accent), var(--accent-line));
}

.bp-count-pill {
  margin-left: auto;
  flex: none;
  padding: 4px 11px;
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.bp-cities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.bp-cities li,
.bp-cities li > a { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bp-cities li {
  padding: 11px 10px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.bp-cities li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-cities .bp-i { color: var(--muted); }
.bp-cities li:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.bp-cities li > a { color: inherit; }
.bp-cities li > a:hover { color: var(--link); }
.bp-cities li:first-child { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent); }
.bp-cities li:first-child .bp-i { color: var(--accent); }

.bp-area-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--line-2);
  font-size: 13px;
  color: var(--muted);
}
.bp-area-note .bp-i { margin-top: 3px; color: var(--accent); }

/* --- About: the trust strip --------------------------------------------------- */

.bp-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: var(--bw) solid var(--line-2);
}
.bp-trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-2);
}

/* --- Services ------------------------------------------------------------------ */

.bp-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.bp-service {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bp-service:hover { border-color: var(--accent-line); box-shadow: var(--soft); }
.bp-service > div { min-width: 0; }
.bp-service > .bp-i { margin-top: 2px; color: var(--accent); }
.bp-service-name {
  font-family: var(--font-profile-head);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 4px;
}
.bp-service-name a { color: inherit; }
.bp-service-name a:hover { color: var(--link); }
.bp-service-text { font-size: 13px; line-height: 1.55; color: var(--muted); }
.bp-service-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--line-2);
}

/* --- Review summary --------------------------------------------------------------- */

.bp-summary {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  margin-top: var(--s-5);
}
.bp-summary-score {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: var(--s-5);
  border-right: var(--bw) solid var(--line);
}
.bp-big {
  font-family: var(--font-profile-head);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--heading);
}
.bp-big small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.bp-summary-score .bp-stars .bp-i { width: 18px; height: 18px; }
.bp-summary-text { font-size: 15px; line-height: 1.65; color: var(--text-2); }

.bp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.bp-chips li {
  padding: 9px 14px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
}
.bp-chips span { color: var(--muted); font-weight: 500; }

/* --- FAQ (profile) ------------------------------------------------------------------- */

.bp-faq { margin-top: var(--s-4); }
.bp-faq-item { border-top: var(--bw) solid var(--line-2); }
.bp-faq-item:last-child { border-bottom: var(--bw) solid var(--line-2); }
.bp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 15px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--heading);
  transition: color var(--t) var(--ease);
}
.bp-faq-item summary::-webkit-details-marker { display: none; }
.bp-faq-item summary:hover { color: var(--accent); }
.bp-faq-item .bp-i--chev { width: 18px; height: 18px; color: var(--muted); transition: transform var(--t-slow) var(--ease); }
.bp-faq-item[open] .bp-i--chev { transform: rotate(180deg); }
.bp-faq-item p {
  padding: 0 2px 16px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 72ch;
}

/* --- Sidebar ------------------------------------------------------------------------- */

.bp-map {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  border: var(--bw) solid var(--line);
  aspect-ratio: 3 / 2;
  background: var(--wash-2);
}
.bp-map img,
.bp-map iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }

.bp-find-copy {
  margin: var(--s-3) 0 var(--s-4);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.bp-details > div { padding: 11px 0; border-bottom: var(--bw) solid var(--line-2); }
.bp-details > div:first-child { padding-top: 0; }
.bp-details > div:last-child { border-bottom: 0; padding-bottom: 0; }
.bp-details dt { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.bp-details dd { font-size: 13.5px; line-height: 1.5; color: var(--heading); }

.bp-week {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--line);
}
.bp-week summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--heading);
  transition: color var(--t) var(--ease);
}
.bp-week summary::-webkit-details-marker { display: none; }
.bp-week summary:hover { color: var(--accent); }
.bp-week .bp-i--chev { width: 17px; height: 17px; color: var(--muted); transition: transform var(--t-slow) var(--ease); }
.bp-week[open] .bp-i--chev { transform: rotate(180deg); }
.bp-week table { width: 100%; margin-top: var(--s-3); border-collapse: collapse; font-size: 13px; }
.bp-week th,
.bp-week td { padding: 6px var(--s-2); text-align: left; font-weight: 400; }
.bp-week th { color: var(--text-2); }
.bp-week td { text-align: right; color: var(--heading); font-weight: 600; }
.bp-week td.is-closed { color: var(--muted); font-weight: 400; }
.bp-week .is-today th { color: var(--accent); font-weight: 700; }
.bp-week .is-today th,
.bp-week .is-today td { background: var(--accent-wash); }
.bp-week .is-today th:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.bp-week .is-today td:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }

.bp-today-tag {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.bp-social { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.bp-social-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--wash);
  color: var(--text-2);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.bp-social-btn:hover { background: var(--accent-wash); border-color: var(--accent-line); }
.bp-social-btn--facebook  { color: var(--brand-facebook); }
.bp-social-btn--instagram { color: var(--brand-instagram); }
.bp-social-btn--yelp      { color: var(--brand-yelp); }

/* --- Review rail ---------------------------------------------------------------------- */

.bp-reviews {
  margin-top: var(--s-6);
  padding: var(--s-6);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  background: var(--band);
}
.bp-reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.bp-reviews-head .bp-hint { margin-top: 5px; }
.bp-reviews-tools { display: flex; align-items: center; gap: var(--s-2); flex: none; }

.bp-track {
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.bp-track::-webkit-scrollbar { display: none; }
.bp-track.has-open { align-items: flex-start; }

.bp-review {
  flex: 0 0 calc((100% - var(--s-4) * 3) / 4);
  min-width: 230px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
}
.bp-review-person { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0; }
.bp-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 800;
}
.bp-review-who { font-size: 14px; font-weight: 700; color: var(--heading); }

/* Clamped, so one long review cannot set the height of the whole row. */
.bp-review-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}
.bp-review.is-open .bp-review-text { display: block; -webkit-line-clamp: none; line-clamp: none; }

.bp-review-more {
  align-self: flex-start;
  margin-bottom: var(--s-3);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--link);
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.bp-review-more:hover { color: var(--link-hover); text-decoration: underline; }

.bp-review-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  font-size: 12.5px;
  color: var(--muted);
}
.bp-review-foot .bp-src { display: inline-flex; }
.bp-review-foot .bp-i { width: 17px; height: 17px; }
.bp-src { color: var(--brand-yelp); }

.bp-nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.bp-nav:hover { color: var(--accent); border-color: var(--accent-line); }
.bp-nav:disabled { opacity: .4; cursor: default; }
.bp-nav .bp-i { width: 19px; height: 19px; }

.bp-disclaimer {
  padding: var(--s-6) 0 var(--s-7);
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

/* --- Review modal ------------------------------------------------------------------------ */

body.bp-locked { overflow: hidden; }

.bp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.bp-modal[hidden] { display: none; }
.bp-modal-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--heading) 55%, transparent); }
.bp-modal-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - var(--s-6));
  overflow-y: auto;
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow);
}
.bp-modal-x {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.bp-modal-x:hover { background: var(--wash); color: var(--heading); }

.bp-review-form { margin-top: var(--s-5); }
.bp-field { display: block; margin: 0 0 var(--s-4); padding: 0; border: 0; }
.bp-field > span,
.bp-field > legend {
  display: block;
  margin-bottom: var(--s-2);
  padding: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--heading);
}
.bp-field input[type="text"],
.bp-field textarea {
  display: block;
  width: 100%;
  padding: 10px var(--s-3);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.bp-field input[type="text"]:focus-visible,
.bp-field textarea:focus-visible { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Radios run 5..1 in the DOM and the row is reversed, so `:checked ~ label`
   fills every star up to the chosen one without script. */
.bp-rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--s-1); }
.bp-rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bp-rate label {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-xs);
  color: var(--star-off);
  cursor: pointer;
}
.bp-rate label .bp-i { width: 28px; height: 28px; }
.bp-rate input:checked ~ label,
.bp-rate label:hover,
.bp-rate label:hover ~ label { color: var(--star); }
.bp-rate input:focus-visible + label { box-shadow: var(--focus-ring); }

.bp-form-msg { margin: 0 0 var(--s-4); font-size: 14px; font-weight: 600; }
.bp-form-msg.is-ok  { color: var(--green); }
.bp-form-msg.is-bad { color: var(--red); }

.bp-form-foot { display: flex; justify-content: flex-end; gap: var(--s-3); }
.bp-form-foot .bp-btn { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.bp-form-foot .bp-btn[disabled] { opacity: .6; cursor: default; }

/* --- Details motion, reduced motion ------------------------------------------------------- */

@supports selector(::details-content) {
  .bp-faq-item::details-content,
  .bp-week::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete;
  }
  .bp-faq-item[open]::details-content,
  .bp-week[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-page,
  .bp-page *,
  .bp-page *::before,
  .bp-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

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

@media (max-width: 1080px) {
  .bp-split { grid-template-columns: minmax(0, 1fr); }
  .bp-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-cities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-review { flex-basis: calc((100% - var(--s-4) * 2) / 3); }
  .bp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .bp-side > * { height: 100%; }
}
@media (max-width: 820px) {
  .bp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .bp-gallery { grid-template-rows: 220px 120px; }
  .bp-services { grid-template-columns: minmax(0, 1fr); }
  .bp-summary { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .bp-summary-score { padding-right: 0; padding-bottom: var(--s-4); border-right: 0; border-bottom: var(--bw) solid var(--line); }
  .bp-review { flex-basis: calc((100% - var(--s-4)) / 2); }
  .bp-block { padding: var(--s-5); }
  .bp-reviews { padding: var(--s-5); }
}
@media (max-width: 560px) {
  .bp-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-photo--extra { display: none; }
  .bp-contact { grid-template-columns: minmax(0, 1fr); }
  .bp-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-side { grid-template-columns: minmax(0, 1fr); }
  .bp-ident-top { flex-direction: column; align-items: flex-start; }
  .bp-hero-cta { flex-direction: column; align-items: stretch; }
  .bp-btn--hero { flex: none; max-width: none; }
  .bp-review { flex-basis: 84%; }
  .bp-big { font-size: 38px; }
  .bp-reviews-head { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .bp-reviews-tools .bp-btn--inline { flex: 1; }
  .bp-modal-panel { padding: var(--s-5); }
  .bp-form-foot { flex-direction: column-reverse; }
  .bp-form-foot .bp-btn,
  .bp-form-foot .bp-ghost { width: 100%; justify-content: center; }
}


/* ==========================================================================
   DIRECTORY — the home page, in the profile register
   ==========================================================================
   Pages for people looking for a business (the home page, and the city and
   category pages after it) speak the profile's language: Figtree, white
   cards on the pale ground. These pieces sit inside .bp-page. */

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

/* The city photo, pinned to the section's top edge so the skyline stays in
   view, under a header-bg tint heavier at the top where the header, eyebrow,
   title and lede sit. Over the photo, on-dark holds 4.5:1 on every pixel
   (5.2 at the brightest, from 375px to 1920px wide) and on-dark-2 and
   on-dark-accent hold it on 99% of the pixels behind their text. The header-bg
   ground shows while the photo loads. */
.bp-home-hero {
  --hero-pad-top: 56px;
  padding: var(--hero-pad-top) 0 44px;
  text-align: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--header-bg) 82%, transparent) 0%, color-mix(in srgb, var(--header-bg) 70%, transparent) 100%),
    var(--header-bg) url("../img/new_section_1.jpg") center top / cover no-repeat;
}
.bp-home-hero .bp-eyebrow { margin-top: 0; color: var(--on-dark-accent); }
.bp-home-title {
  max-width: 860px;
  margin: 10px auto 0;
  color: var(--on-dark);
  font-family: var(--font-profile-head);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.bp-home-title span { color: var(--on-dark-accent); }
.bp-home-lede { max-width: 660px; margin: var(--s-4) auto 0; text-wrap: pretty; color: var(--on-dark-2); font-size: 17px; line-height: 1.65; }

.bp-home-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4) 0; margin-top: var(--s-6); }
.bp-home-stats li { display: grid; gap: 2px; padding-right: var(--s-6); }
.bp-home-stats li:last-child { padding-right: 0; }
.bp-home-stats li + li { padding-left: var(--s-6); border-left: var(--bw) solid var(--on-dark-line); }
.bp-home-stats strong {
  color: var(--on-dark);
  font-family: var(--font-profile-head);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bp-home-stats span { color: var(--on-dark); font-size: 13px; }

/* --- Search bar ------------------------------------------------------------
   Styles the markup views/layout/search.php renders (petite-vue), so the
   class names are that component's. These rules stand on their own: the
   component's <style> block and its inline styles both lose to them. */

.bp-search { max-width: 940px; margin: var(--s-6) auto 0; text-align: left; }
.bp-search .search-container {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  gap: 0;
  align-items: stretch;
  padding: 6px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--font-profile);
  font-size: 15px;
}
.bp-search .field-group { position: relative; min-width: 0; }
.bp-search .field-group + .field-group { border-left: var(--bw) solid var(--line); }
.bp-search .input-wrapper {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 52px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bp-search .input-wrapper:hover { border: 0; background: var(--wash); }
.bp-search .input-wrapper:focus-within { border: 0; background: var(--card); box-shadow: inset 0 0 0 2px var(--accent); }
.bp-search .icon-container { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--muted); }
.bp-search .icon-container svg { width: 20px !important; height: 20px !important; }
.bp-search .icon-container svg[stroke] { stroke: var(--muted) !important; }
.bp-search .icon-container svg[fill]:not([fill="none"]) { fill: var(--muted) !important; }
.bp-search .search-input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--heading);
  font: inherit;
  font-size: 15px;
}
.bp-search .search-input:focus { outline: none; }  /* the wrapper draws the ring */
.bp-search .search-input::placeholder { color: var(--muted); opacity: 1; }
.bp-search .absolute-label { display: none; }  /* the old floating labels */
.bp-search .svg-icon { width: 20px !important; fill: var(--accent) !important; }
.bp-search .search-loader { background: var(--accent); }
.bp-search .search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  margin: 0 0 0 6px;
  padding: 0 28px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-profile);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}
.bp-search .search-button:hover { background: var(--accent-dk); box-shadow: var(--soft); }
.bp-search .search-button:focus-visible { box-shadow: var(--focus-ring); }
.bp-search .suggestions-container {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 100%;
  max-height: 33vh;
  overflow-y: auto;
  margin-top: 0;
  padding: 6px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  box-shadow: var(--shadow);
}
.bp-search .suggestions-list { margin: 0; padding: 0; list-style: none; }
.bp-search .suggestions-group { padding: 6px; border-bottom: var(--bw) solid var(--line-2); color: var(--muted); font-size: 12.5px; text-align: left; }
.bp-search .suggestions-group:last-child { border-bottom: 0; }
.bp-search .suggestions-group > div > strong { display: block; padding: 2px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bp-search .suggestion-item { padding: 8px 10px; border-radius: var(--r-sm); color: var(--text); font-size: 14px; cursor: pointer; }
.bp-search .suggestion-item:hover { background: var(--accent-wash); }
.bp-search .suggestion-item a span { color: var(--muted); font-size: 12.5px; }  /* a business's address; categories are spans too */

/* --- Shelf: a section heading over a scrolling row of cards ------------------ */

.bp-shelf { margin-top: var(--s-8); }
.bp-page .bp-shelf[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.bp-home-body { padding-bottom: var(--s-8); }
.bp-shelf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.bp-shelf-head .bp-hint { margin-top: 5px; }
.bp-shelf-tools { display: flex; flex: none; align-items: center; gap: var(--s-2); }
.bp-shelf-tools .bp-link { margin-right: var(--s-2); }

/* --- Business card --------------------------------------------------------- */

.bp-biz {
  display: flex;
  flex: 0 0 calc((100% - var(--s-4) * 3) / 4);
  flex-direction: column;
  min-width: 230px;
  overflow: hidden;
  scroll-snap-align: start;
}
.bp-biz-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash-2); }
.bp-biz-photo > a { display: block; height: 100%; }
.bp-biz-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.bp-biz-photo:hover img { transform: scale(1.035); }

/* The Loc8NearMe Recommended award: the one place gold appears. */
.bp-award {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: var(--bw) solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}
.bp-award .bp-i { width: 14px; height: 14px; }

/* Every line of the body keeps a set height (one line of category, two of
   name, two of address, the rating line even when empty), so the cards on a
   shelf line up row for row whatever their text. */
.bp-biz-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: var(--s-4); }
.bp-biz-cat {
  min-height: 1.5em;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.bp-biz-name,
.bp-biz-address {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.bp-biz-name { min-height: 2.6em; color: var(--heading); font-family: var(--font-profile-head); font-size: 16px; font-weight: 800; line-height: 1.3; }
.bp-biz-name a { transition: color var(--t) var(--ease); }
.bp-biz-name a:hover { color: var(--link); }
.bp-biz-address { min-height: 3em; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.bp-biz .bp-rating { min-height: 22px; font-size: 13.5px; }
.bp-biz-review {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.bp-biz-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--line-2);
}
.bp-biz-phone { display: inline-flex; align-items: center; gap: 6px; color: var(--heading); font-size: 13.5px; font-weight: 700; }
.bp-biz-phone:hover { color: var(--link); }

/* The review-led variant: the quote first, the business as its byline. */
.bp-biz--review .bp-biz-body { gap: var(--s-3); padding: var(--s-5); }
.bp-biz--review .bp-biz-review { -webkit-line-clamp: 6; line-clamp: 6; color: var(--text); font-size: 14px; }
.bp-biz-who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.bp-biz--review .bp-biz-who { margin-top: auto; padding-top: var(--s-3); border-top: var(--bw) solid var(--line-2); }
.bp-biz-who > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: calc(15px * 1.3 * 2 + 2px + 12.5px * 1.5);  /* two lines of name, one of category */
}
.bp-biz-thumb { display: block; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--r-md); background: var(--wash-2); }
.bp-biz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bp-biz-who .bp-biz-name { min-height: 0; font-size: 15px; }  /* the block holds the two lines, centred */
.bp-biz-who .bp-biz-cat { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* --- City directory ------------------------------------------------------------ */

.bp-states { padding: var(--s-6); }
.bp-states + .bp-states { margin-top: var(--s-4); }
.bp-states > .bp-h3 { margin-bottom: var(--s-2); }
.bp-states-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: var(--s-8); }
.bp-state { padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--line-2); }
.bp-state-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 30px; }
.bp-state-name {
  color: var(--heading);
  font-family: var(--font-profile-head);
  font-size: 15px;
  font-weight: 800;
}
.bp-state-name:hover { color: var(--link); text-decoration: underline; }
/* The arrow: a small .bp-nav that turns up while the state is open. */
.bp-state-toggle { width: 30px; height: 30px; }
.bp-state-toggle[hidden] { display: none; }
.bp-state-toggle .bp-i { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.bp-state-toggle[aria-expanded="true"] .bp-i { transform: rotate(180deg); }
.bp-state-cities { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.bp-state-cities a { color: var(--link); font-size: 14px; font-weight: 600; line-height: 1.6; }
.bp-state-cities a:hover { text-decoration: underline; }
.bp-state-cities a[hidden] { display: none; }

/* --- Blog card ------------------------------------------------------------------ */

.bp-post {
  display: flex;
  flex: 0 0 calc((100% - var(--s-4) * 2) / 3);
  flex-direction: column;
  min-width: 260px;
  overflow: hidden;
  scroll-snap-align: start;
}
.bp-post-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wash-2); }
.bp-post-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.bp-post-photo:hover img { transform: scale(1.035); }
.bp-post-body { display: flex; flex: 1; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.bp-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 12.5px; }
.bp-post-tag { padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.bp-post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--heading);
  font-family: var(--font-profile-head);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}
.bp-post-title a:hover { color: var(--link); }
.bp-post-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.bp-post .bp-link { align-self: flex-start; margin-top: auto; padding-top: 4px; }

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

@media (max-width: 1080px) {
  .bp-biz { flex-basis: calc((100% - var(--s-4) * 2) / 3); }
}
@media (max-width: 899.98px) {
  .bp-search .search-container { grid-template-columns: minmax(0, 1fr); }
  .bp-search .field-group + .field-group { border-top: var(--bw) solid var(--line); border-left: 0; }
  .bp-search .search-button { width: 100%; margin: 6px 0 0; }
}
@media (max-width: 820px) {
  .bp-biz,
  .bp-post { flex-basis: calc((100% - var(--s-4)) / 2); }
  .bp-home-hero { --hero-pad-top: 40px; padding-bottom: 32px; }
  .bp-states { padding: var(--s-5); }
}
@media (max-width: 680px) {
  /* Under the shared header the wrap takes the frame's 14px gutter, so the
     logo, the content and the footer start on one line. */
  .site-page .bp-wrap { width: min(var(--maxw), calc(100% - 28px)); }
}
@media (max-width: 560px) {
  .bp-biz,
  .bp-post { flex-basis: 84%; }
  .bp-shelf-head { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .bp-shelf-tools { justify-content: flex-end; }
  .bp-home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-home-stats li { padding-right: var(--s-4); }
  .bp-home-stats li + li { padding-left: var(--s-4); }
  .bp-home-stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .bp-home-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; padding-right: 0; }  /* the odd one out takes the row, centred */
  .bp-home-stats strong { font-size: 18px; }
  .bp-states { padding: var(--s-4); }
  .bp-states-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) and (pointer: coarse) {
  /* Phones swipe the rows, and the next card peeks in to say so. */
  .bp-shelf-tools .bp-nav { display: none; }
  .bp-shelf-tools:not(:has(.bp-link)) { display: none; }
  .bp-shelf-tools { justify-content: flex-start; }
}


/* ==========================================================================
   BLOG — the post (views/news_page_view.php) and the index (blog/index.php), in the profile register
   ==========================================================================
   A post is a directory page: Figtree, a white card on the pale ground, and the profile's sidebar
   beside it for the other posts. The post's own text is HTML exported from the blog editor, which
   writes a size, a colour and a spacing into nearly every element, so .bp-prose restyles it from
   outside and the rules there that have to beat those inline styles carry !important. The index
   opens with the home page's hero and lists posts as the home page's .bp-post cards. */

.bp-post-split { padding-bottom: var(--s-8); }
.bp-crumbs .bp-crumb-title { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- The post card ------------------------------------------------------------- */

.bp-article { overflow: hidden; }
.bp-article-photo {
  position: relative;
  width: 100%;  /* a set width, or the max-height below would carry through the ratio and narrow the box */
  aspect-ratio: 16 / 9;
  max-height: 440px;
  margin: 0;
  overflow: hidden;
  background: var(--wash-2);
}
.bp-article-photo img { width: 100%; height: 100%; object-fit: cover; }
.bp-article-body { padding: var(--s-7) 48px 36px; }
.bp-article-body > .bp-tags { margin-top: 0; }
.bp-article-title {
  margin: var(--s-4) 0 var(--s-3);
  color: var(--heading);
  font-family: var(--font-profile-head);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.bp-article-title:first-child { margin-top: 0; }
.bp-article-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); color: var(--muted); font-size: 14px; }
.bp-article-by strong { color: var(--heading); font-weight: 700; }

.bp-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: var(--bw) solid var(--line-2);
}
.bp-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.bp-share-label { color: var(--heading); font-size: 14px; font-weight: 700; }

/* --- The post's text ------------------------------------------------------------ */

.bp-prose {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: var(--bw) solid var(--line-2);
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

/* The editor's page scaffolding (a body, rows, columns and a .container) flattened to plain blocks,
   and the room between the blocks taken over from its 10px padding. */
.bp-prose .u_body,
.bp-prose .u_row,
.bp-prose .u-row,
.bp-prose .u-col,
.bp-prose .u_column,
.bp-prose .container {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.bp-prose [class*="u_content_"] { margin: 0 0 var(--s-5) !important; padding: 0 !important; }
.bp-prose .u_content_heading { margin: var(--s-6) 0 var(--s-3) !important; }
.bp-prose .u_content_image,
.bp-prose .u_content_html { margin: var(--s-6) 0 !important; }
.bp-prose [class*="u_content_"]:last-child { margin-bottom: 0 !important; }

/* Type and colour: the editor's 18px black and its 1.4 line height give way to the page's. The editor
   spaces paragraphs with an empty one holding a <br>, a full line high there and less here. */
.bp-prose :is(div, p, span, li) { color: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.bp-prose p:has(> br:only-child) { line-height: 1.1 !important; }
.bp-prose :is(strong, b, [style*="font-weight: bold"], [style*="font-weight:bold"]) { color: var(--heading) !important; }

.bp-prose :is(h2, h3, h4) {
  margin: 0 !important;
  color: var(--heading) !important;
  font-family: var(--font-profile-head);
  font-weight: 800 !important;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.bp-prose :is(h2, h3, h4) span { font-weight: inherit !important; }
.bp-prose h2 { font-size: clamp(22px, 2.6vw, 26px) !important; line-height: 1.25 !important; }
.bp-prose h3 { font-size: 20px !important; line-height: 1.3 !important; }
.bp-prose h4 { font-size: 17px !important; line-height: 1.35 !important; }

.bp-prose a {
  color: var(--link) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t) var(--ease);
}
.bp-prose a:hover { color: var(--link-hover) !important; text-decoration-thickness: 2px; }
.bp-prose a :is(strong, b, span, [style]) { color: inherit !important; }

/* The editor nests a list inside an unmarked list item; that item steps back out by its parent's
   indent so the numbers sit where a plain list's would. */
.bp-prose :is(ul, ol) { margin: 0 0 var(--s-4); padding-left: 1.5em; }
.bp-prose ul { list-style: disc; }
.bp-prose ol { list-style: decimal; }
.bp-prose li { margin: 0 0 var(--s-2); padding-left: 4px; }
.bp-prose li::marker { color: var(--accent); font-weight: 700; }
.bp-prose li[style*="list-style-type: none"] { margin-left: -1.5em; padding-left: 0; }

.bp-prose img { display: block; max-width: 100% !important; height: auto !important; border-radius: var(--r-lg); background: var(--wash-2); }
.bp-prose blockquote { margin: var(--s-5) 0; padding: var(--s-1) 0 var(--s-1) var(--s-4); border-left: var(--bw-3) solid var(--accent-line); color: var(--text); }
.bp-prose hr { height: 0; margin: var(--s-6) 0; border: 0; border-top: var(--bw) solid var(--line); }
.bp-prose :is(iframe, video) { display: block; max-width: 100%; border: 0; border-radius: var(--r-lg); }

/* Tables keep the editor's own scroll wrapper; the blue header and the shadow give way to the compare
   table's wash header and hairline frame. */
.bp-prose table {
  width: 100%;
  border: var(--bw) solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--card) !important;
  box-shadow: none !important;
  color: var(--text-2) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.bp-prose th {
  background: var(--wash) !important;
  border-bottom: var(--bw) solid var(--line) !important;
  color: var(--heading) !important;
  font-weight: 800 !important;
  text-align: left !important;
}
.bp-prose td { vertical-align: top; }
.bp-prose tbody tr { background: var(--card) !important; }
.bp-prose tbody tr:nth-child(even) { background: var(--wash) !important; }

/* --- Other posts, in the sidebar --------------------------------------------------- */

.bp-minis { display: grid; }
.bp-mini { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--bw) solid var(--line-2); }
.bp-mini:first-child { padding-top: 0; border-top: 0; }
.bp-mini:last-child { padding-bottom: 0; }
.bp-mini-photo { display: block; flex: none; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-sm); background: var(--wash-2); }
.bp-mini-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.bp-mini-photo:hover img { transform: scale(1.06); }
.bp-mini-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bp-mini-date { color: var(--muted); font-size: 12.5px; }
.bp-mini-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: var(--heading);
  font-family: var(--font-profile-head);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
}
.bp-mini-title a { transition: color var(--t) var(--ease); }
.bp-mini-title a:hover { color: var(--link); }

/* --- Blog post responsive ------------------------------------------------------------ */

@media (max-width: 820px) {
  .bp-article-body { padding: var(--s-6); }
}
@media (max-width: 560px) {
  .bp-article-body { padding: var(--s-5) 18px var(--s-6); }
  .bp-prose { font-size: 16px; }
}


/* --- The blog index ------------------------------------------------------------- */

/* Newest first: the first post fills the row and the rest sit three across. Outside a shelf the
   .bp-post card drops its rail width, and its tag becomes a link to that tag's page. */
.bp-crumbs + .bp-home-body > .bp-shelf:first-child { margin-top: var(--s-4); }
.bp-shelf--first { margin-top: var(--s-6); }  /* the list straight under the header, with no hero above it */
.bp-post-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.bp-post-feed > .bp-post { min-width: 0; }
a.bp-post-tag { transition: background var(--t) var(--ease); }
a.bp-post-tag:hover { background: var(--accent-line); }

.bp-post--lead { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bp-post--lead .bp-post-photo { aspect-ratio: auto; min-height: 300px; }
.bp-post--lead .bp-post-body { justify-content: center; gap: var(--s-3); padding: var(--s-7); }
.bp-post--lead .bp-post-title { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; line-height: 1.2; -webkit-line-clamp: 3; line-clamp: 3; }
.bp-post--lead .bp-post-text { font-size: 15px; -webkit-line-clamp: 5; line-clamp: 5; }
.bp-post--lead .bp-link { margin-top: var(--s-2); }

.bp-empty { max-width: 560px; }
.bp-empty .bp-body { margin: var(--s-2) 0 var(--s-4); }

/* Previous and next at the ends, the pages between. Under 560px the numbers give way to "Page 3 of 13". */
.bp-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); }
.bp-pager .bp-ghost { min-width: 120px; min-height: 40px; font-weight: 700; }
.bp-pager .bp-ghost[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.bp-pager-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.bp-pager-pages li > :is(a, span) {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.bp-pager-pages a:hover { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent); }
.bp-pager-pages [aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.bp-pager-pages .bp-pager-gap { min-width: 24px; padding: 0; border-color: transparent; background: none; color: var(--muted); }
.bp-pager-status { display: none; margin: 0; color: var(--muted); font-size: 13.5px; }

@media (max-width: 820px) {
  .bp-post-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-post--lead { grid-template-columns: minmax(0, 1fr); }
  .bp-post--lead .bp-post-photo { aspect-ratio: 16 / 9; min-height: 0; }
  .bp-post--lead .bp-post-body { padding: var(--s-5); }
}
@media (max-width: 560px) {
  .bp-post-feed { grid-template-columns: minmax(0, 1fr); }
  .bp-pager-pages { display: none; }
  .bp-pager-status { display: block; }
  .bp-pager .bp-ghost { min-width: 0; }
}


/* ==========================================================================
   STATE — the state page (views/state_page_view.php), in the profile register
   ==========================================================================
   A state page opens on the home page's hero, then lists the state's cities: the largest as tiles,
   every one under its letter. The hero, search, stats, crumbs and shelf heads are the home page's. */

/* --- Largest cities ------------------------------------------------------------- */

.bp-city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-4); }
.bp-city {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.bp-city:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
.bp-city-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.bp-city-name {
  overflow: hidden;
  color: var(--heading);
  font-family: var(--font-profile-head);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.bp-city:hover .bp-city-name { color: var(--link); }
.bp-city-count { color: var(--muted); font-size: 13px; }
.bp-city-go { color: var(--muted); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.bp-city:hover .bp-city-go { color: var(--accent); transform: translateX(2px); }

/* --- Every city, A to Z ------------------------------------------------------------ */

.bp-az { padding: var(--s-6); }
.bp-az-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: var(--s-5); border-bottom: var(--bw) solid var(--line-2); }
.bp-az-nav a {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.bp-az-nav a:hover { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent); }

.bp-az-group { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-bottom: var(--bw) solid var(--line-2); }
.bp-az-group:last-child { padding-bottom: 0; border-bottom: 0; }
.bp-page .bp-az-group[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
/* The letter stays in view while its cities scroll past. */
.bp-az-letter {
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
  display: grid;
  place-items: center;
  align-self: start;
  width: 44px;
  height: 44px;
  border-radius: var(--r-tile);
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-profile-head);
  font-size: 20px;
  font-weight: 800;
}
.bp-az-cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px var(--s-5); align-content: start; }
.bp-az-cities a { display: block; padding: 4px 0; color: var(--link); font-size: 14px; font-weight: 600; line-height: 1.5; }
.bp-az-cities a:hover { color: var(--link-hover); text-decoration: underline; }

@media (max-width: 820px) {
  .bp-az { padding: var(--s-5); }
}
@media (max-width: 560px) {
  .bp-az { padding: var(--s-4); }
  .bp-az-group { grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); }
  .bp-az-letter { width: 36px; height: 36px; font-size: 17px; }
  .bp-az-cities { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px var(--s-4); }
}


/* ==========================================================================
   CITY — the city page (views/city_page_view.php), in the profile register
   ==========================================================================
   Opens on the home page's hero. Every list of businesses is plain, a name over an address and no
   photo: the recommendations first, then the category tree, a group of subgroups with a card per
   category. The nearest cities are the state page's tiles. */

.bp-home-lede a { text-decoration: underline; text-underline-offset: 3px; }
.bp-home-lede a:hover { color: var(--on-dark); }

/* --- Lists of businesses --------------------------------------------------------- */

.bp-picks { display: grid; gap: var(--s-4); }
.bp-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px var(--s-6); }
.bp-pick-item {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  transition: background var(--t) var(--ease);
}
.bp-pick-item:hover { background: var(--wash); }
.bp-pick-name,
.bp-pick-addr {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.bp-pick-name {
  color: var(--heading);
  font-family: var(--font-profile-head);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  transition: color var(--t) var(--ease);
}
.bp-pick-item:hover .bp-pick-name { color: var(--link); }
.bp-pick-addr { color: var(--text-2); font-size: 13.5px; }

/* --- The category tree ----------------------------------------------------------- */

.bp-group-title {
  padding-bottom: var(--s-3);
  border-bottom: var(--bw) solid var(--line);
  color: var(--heading);
  font-family: var(--font-profile-head);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.bp-subgroup { margin-top: var(--s-6); }
.bp-subgroup-title { margin-bottom: var(--s-4); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: var(--ls-cap); text-transform: uppercase; }
.bp-cat + .bp-cat { margin-top: var(--s-4); }
/* The link to the category's own page drops under the title when the two do not fit one line. */
.bp-cat .bp-section-head { flex-wrap: wrap; gap: 2px var(--s-4); }
.bp-cat-title { margin: 0; color: var(--heading); font-family: var(--font-profile-head); font-size: 17px; font-weight: 800; letter-spacing: -.015em; }

/* The categories that have a page of their own but no businesses to show. */
.bp-more { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.bp-subgroup-title + .bp-more { margin-top: 0; }
.bp-more a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--s-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.bp-more a:hover { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent); }


/* ==========================================================================
   MARKETING REGISTER — pricing.php, listings-management.php, payment.php
   ========================================================================== */

.mk-page {
  background: var(--card);
  color: var(--text);
  font-family: var(--font-marketing);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.mk-page--ground { background: var(--bg); }   /* payment.php runs on bg */

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

.mk-page :where(h1, h2, h3, h4) { margin: 0; color: var(--heading); letter-spacing: var(--ls-head); }
.mk-page :where(h1) { font-size: clamp(40px, 4.1vw, 58px); line-height: 1.08; font-weight: 900; letter-spacing: -.052em; max-width: 900px; }
.mk-page :where(h2) { font-size: clamp(32px, 3.7vw, 46px); line-height: 1.06; font-weight: 900; }
.mk-page :where(h3) { font-size: 22px; line-height: 1.2; font-weight: 800; }
.mk-page :where(h1, h2) span { color: var(--accent); }
.mk-page :where(p) { margin: 0; color: var(--text-2); }
.mk-page :where(a) { color: inherit; text-decoration: none; }
.mk-page :where(button, input, textarea) { font: inherit; }
.mk-page :where(a, summary, button, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.mk-page .container { width: min(calc(100% - 2 * var(--gutter)), var(--maxw)); margin-inline: auto; }
.mk-page .container--narrow { width: min(calc(100% - 64px), var(--maxw-narrow)); margin-inline: auto; }
.mk-page .section { padding: var(--section) 0; }
.mk-page .section.soft { background: var(--bg); }
.mk-page .section.tint { background: var(--band); }

/* --- Eyebrow -------------------------------------------------------------- */

.mk-page .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--s-4);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
}
.mk-page .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky) 12%, transparent);
}

.mk-page .lead { max-width: 580px; font-size: 18px; line-height: 1.7; }

/* --- Section head ------------------------------------------------------------ */

.mk-page .section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  margin-bottom: 38px;
}
.mk-page .section-head .copy { max-width: 760px; }
.mk-page .section-head h2 { max-width: 690px; }
.mk-page .section-head p { margin-top: 14px; font-size: 16px; line-height: 1.65; }

/* --- Buttons and links --------------------------------------------------------- */

.mk-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 var(--s-5);
  border: var(--bw) solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--card);
  color: var(--heading);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.mk-page .btn:hover { transform: translateY(-1px); border-color: var(--line-control-hover); }
.mk-page .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
.mk-page .btn.primary:hover { background: var(--accent-dk); }
.mk-page .btn.block { display: flex; width: 100%; }
.mk-page .btn.lg { min-height: 52px; }
.mk-page .btn.inset { box-shadow: var(--shadow-accent-sm); }
.mk-page .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.mk-page .btn:disabled { opacity: .65; cursor: wait; transform: none; }

.mk-page .question-link {
  padding: var(--s-2) 0;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mk-page .question-link:hover { color: var(--accent); }

.mk-page .text-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mk-page .text-link:hover { color: var(--accent-dk); }

/* --- Badges, chips, check discs ------------------------------------------------- */

.mk-page .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}
.mk-page .badge.dk { color: var(--accent-dk); }

.mk-page .chip {
  padding: 7px 9px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
}

.mk-page .plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mk-page .check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-dk);
  font-size: 11px;
  font-weight: 900;
}

.mk-page .icon-box {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  margin-bottom: 19px;
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-control);
  background: var(--accent-wash);
  color: var(--accent);
}
.mk-page .icon-box svg { width: 22px; height: 22px; }

.mk-page .status-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: var(--bw) solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
}
.mk-page .status-icon svg { width: 26px; height: 26px; }

.mk-page .plan-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 30px;
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 8%, transparent);
}
.mk-page .plan-icon svg { width: 27px; height: 27px; }

/* --- Hero (pricing) ----------------------------------------------------------------- */

.mk-page .hero {
  position: relative;
  overflow: hidden;
  padding: 68px 0 0;
  background:
    radial-gradient(circle at 80% 16%, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 28%),
    radial-gradient(circle at 12% 82%, color-mix(in srgb, var(--sky) 10%, transparent), transparent 24%),
    linear-gradient(180deg, var(--card) 0%, var(--bg) 100%);
}
.mk-page .hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 58px;
  align-items: center;
}
.mk-page .hero .lead { margin-top: 22px; }
.mk-page .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

/* The profile mock that fills the hero's right column, on two rings. */
.mk-page .hero-visual { position: relative; min-height: 485px; padding: 22px 0 24px 18px; }
.mk-page .orbit {
  position: absolute;
  top: 24px;
  left: 12px;
  width: 440px;
  height: 440px;
  max-width: 100%;
  border: var(--bw) dashed var(--line-control);
  border-radius: 50%;
  opacity: .7;
}
.mk-page .orbit::before,
.mk-page .orbit::after {
  content: "";
  position: absolute;
  border: var(--bw) solid var(--line);
  border-radius: 50%;
}
.mk-page .orbit::before { inset: var(--s-8); }
.mk-page .orbit::after { inset: calc(var(--s-8) * 2); }

.mk-page .profile-mock {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  padding: 23px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--card);
  box-shadow: var(--shadow-mock);
}
.mk-page .mock-top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: var(--bw) solid var(--line);
}
.mk-page .mock-logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent-dk), var(--accent-2));
  color: var(--on-accent);
  font-size: 20px;
  font-weight: 900;
}
.mk-page .mock-name { color: var(--heading); font-size: 17px; font-weight: 800; }
.mk-page .mock-meta { margin-top: 3px; color: var(--muted); font-size: 12px; }
.mk-page .mock-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-2); }
.mk-page .mock-body { display: grid; gap: var(--s-4); padding-top: 18px; }
.mk-page .mock-label {
  margin-bottom: 7px;
  color: var(--text-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mk-page .mock-body p { font-size: 12px; line-height: 1.6; }
.mk-page .service-area {
  padding: 14px;
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-control);
  background: var(--accent-wash);
}
.mk-page .mock-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.mk-page .service-area .chip { padding: 5px 8px; border-color: var(--accent-line); }
.mk-page .mock-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--bw) solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

/* --- Trust stats under the hero ------------------------------------------------------ */

.mk-page .hero-trust {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--s-6);
  margin-top: 48px;
  padding: 26px 0 var(--s-6);
  border-top: var(--bw) solid var(--accent-line);
}
.mk-page .hero-trust > div + div { padding-left: var(--s-6); border-left: var(--bw) solid var(--accent-line); }
.mk-page .hero-trust strong { display: block; color: var(--heading); font-size: 22px; letter-spacing: -.035em; }
.mk-page .hero-trust span { color: var(--text-2); font-size: 12px; }

/* --- Price cards ----------------------------------------------------------------------- */

.mk-page .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.mk-page .price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) 25px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.mk-page .price-card.featured {
  padding: 27px 24px;
  border: var(--bw-2) solid var(--accent);
  box-shadow: var(--shadow-featured);
}
.mk-page .plan-name { margin-top: 13px; color: var(--heading); font-size: 23px; font-weight: 900; letter-spacing: -.04em; }
.mk-page .price-card .price {
  margin: 21px 0 12px;
  color: var(--heading);
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}
.mk-page .price-card .price.custom {
  margin: 25px 0 19px;
  font-size: 35px;
  line-height: 1.08;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.mk-page .price-per { margin-left: 6px; color: var(--muted); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.mk-page .plan-delta { min-height: 19px; color: var(--accent); font-size: 12px; font-weight: 700; }
.mk-page .plan-title { margin-top: 18px; color: var(--heading); font-size: 19px; font-weight: 800; line-height: 1.35; }
.mk-page .plan-rule { height: 1px; margin: 21px 0; background: var(--line); }
.mk-page .feature-label {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mk-page .features { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.mk-page .features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}
.mk-page .plan-bottom { padding-top: var(--s-6); }
.mk-page .plan-bottom .btn { width: 100%; }

/* Three cards share their rows, so intros, lists and buttons line up. */
@media (min-width: 1001px) {
  .mk-page .price-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; }
  .mk-page .plan-bottom { align-self: stretch; }
}

/* --- Compare table ------------------------------------------------------------------------ */

.mk-page .compare-wrap {
  overflow: auto;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.mk-page .compare-wrap table { width: 100%; min-width: 760px; border-collapse: collapse; }
.mk-page .compare-wrap th,
.mk-page .compare-wrap td {
  padding: 15px 18px;
  border-bottom: var(--bw) solid var(--line);
  font-size: 13px;
  text-align: center;
}
.mk-page .compare-wrap th:first-child,
.mk-page .compare-wrap td:first-child { width: 40%; text-align: left; }
.mk-page .compare-wrap thead th {
  position: sticky;
  top: 0;
  padding: 22px 18px;
  background: var(--wash);
  color: var(--heading);
  font-size: 15px;
  font-weight: 900;
}
.mk-page .compare-wrap thead small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.mk-page .compare-wrap thead th.featured-col { background: var(--accent-wash); color: var(--accent); }
.mk-page .compare-wrap thead .featured-col small { color: var(--text-2); }
.mk-page .compare-wrap tbody th { color: var(--text-2); font-weight: 500; text-align: left; }
.mk-page .compare-wrap td { color: var(--text-2); font-size: 12px; }
.mk-page .compare-wrap tbody td:nth-child(3) { background: var(--wash); }
.mk-page .compare-wrap .yes { color: var(--accent-dk); font-weight: 650; }
.mk-page .compare-wrap .dash { color: var(--muted); }
.mk-page .compare-wrap .group th {
  padding: 12px 18px;
  background: var(--accent-wash);
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mk-page .compare-wrap .price-row td,
.mk-page .compare-wrap .price-row th {
  padding: 23px 16px;
  background: var(--band);
  color: var(--heading);
  font-size: 16px;
  font-weight: 800;
}
.mk-page .compare-wrap .price-row a { display: block; margin-top: 9px; font-size: 12px; }
.mk-page .compare-wrap .price-row .price-per { margin-left: 2px; font-size: 12px; font-weight: 600; }
.mk-page .compare-wrap tbody tr:last-child td,
.mk-page .compare-wrap tbody tr:last-child th { border-bottom: 0; }
.mk-page .scroll-hint { display: none; margin: 0 0 12px; font-size: 12px; }
.mk-page .scope-note { max-width: 900px; margin-top: 15px; font-size: 12px; }

/* --- Dark band: pricing's context band ------------------------------------------------------ */

.mk-page .context-band {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 45px;
  align-items: center;
  padding: 44px;
  border-radius: var(--r-band);
  background: linear-gradient(135deg, var(--band-dark) 0%, var(--band-dark-end) 100%);
  color: var(--on-dark);
  box-shadow: var(--shadow-band);
}
.mk-page .context-band .eyebrow { color: var(--on-dark-accent); }
.mk-page .context-band h2 { color: var(--on-dark); font-size: 38px; line-height: 1.1; }
.mk-page .context-band p { margin-top: 15px; color: var(--on-dark-2); font-size: 16px; line-height: 1.65; }
.mk-page .context-points { display: grid; gap: var(--s-3); }
.mk-page .context-point {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 15px 16px;
  border: var(--bw) solid var(--on-dark-line);
  border-radius: var(--r-lg);
  background: var(--on-dark-fill);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.mk-page .context-point > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--r-input);
  background: var(--on-dark-line);
}
.mk-page .context-point small {
  display: block;
  margin-top: 3px;
  color: var(--on-dark-2);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

/* --- Dark band: listings' bundle (list layout) ------------------------------------------------ */

.mk-page .bundle {
  padding: 38px 40px 40px;
  border-radius: var(--r-panel);
  background: linear-gradient(135deg, var(--band-dark) 0%, var(--band-dark-end) 100%);
  color: var(--on-dark-2);
}
.mk-page .bundle .eyebrow { margin-bottom: var(--s-3); color: var(--on-dark-accent); }
.mk-page .bundle h2 { color: var(--on-dark); font-size: 36px; font-weight: 750; line-height: 1.15; }
.mk-page .bundle-intro { max-width: 780px; margin-top: var(--s-3); color: var(--on-dark-2); font-size: 14px; line-height: 1.8; }
.mk-page .bundle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.mk-page .bundle-item { padding-top: 21px; border-top: var(--bw) solid var(--on-dark-line); }
.mk-page .bundle-title { display: flex; align-items: center; gap: 10px; }
.mk-page .bundle-title svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--on-dark-accent); }
.mk-page .bundle h3 { color: var(--on-dark); font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.mk-page .bundle ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.mk-page .bundle li { display: flex; align-items: flex-start; gap: 9px; color: var(--on-dark-2); font-size: 12px; line-height: 1.7; }
.mk-page .bundle li::before { content: "\2713"; flex-shrink: 0; margin-top: 1px; color: var(--on-dark-accent); font-size: 11px; }
.mk-page .bundle-foot { margin-top: 24px; color: var(--on-dark-2); font-size: 11px; }

/* --- FAQ (marketing) ------------------------------------------------------------------------------ */

.mk-page .faq { display: grid; grid-template-columns: .72fr 1.28fr; gap: 56px; align-items: start; }
.mk-page .faq h2 { font-size: 38px; }
.mk-page .faq-intro { margin-top: 18px; font-size: 15px; }
.mk-page .faq-list { border-top: var(--bw) solid var(--line); }
.mk-page .faq-list details { border-bottom: var(--bw) solid var(--line); }
.mk-page .faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  padding: 19px 0;
  color: var(--heading);
  font-size: 15px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.mk-page .faq-list summary::-webkit-details-marker { display: none; }
.mk-page .faq-list summary::after { content: "+"; color: var(--accent); font-size: 22px; font-weight: 500; }
.mk-page .faq-list details[open] summary::after { content: "\2013"; }
.mk-page .faq-list details p { max-width: 720px; padding: 0 0 var(--s-5); font-size: 14px; line-height: 1.7; }

/* --- Closing card ----------------------------------------------------------------------------- */

.mk-page .closing { padding: var(--s-8) 0 88px; }
.mk-page .closing-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 44px;
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-band);
  background: var(--band);
}
.mk-page .closing-card h2 { max-width: 700px; font-size: 40px; }
.mk-page .closing-card p { max-width: 680px; margin-top: 10px; font-size: 16px; }
.mk-page .closing-actions { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; min-width: 210px; }
.mk-page .closing-actions .question-link { text-align: center; }

/* --- Directory tiles (listings) ------------------------------------------------------------------ */

.mk-page .platform-section { padding: 35px 0 38px; border-bottom: var(--bw) solid var(--line); }
.mk-page .platform-caption { margin-bottom: 17px; color: var(--muted); font-size: 12px; }
.mk-page .platform-caption strong { color: var(--heading); font-weight: 650; }
.mk-page .platform-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 9px; }
.mk-page .platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 84px;
  padding: 12px 5px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-control);
  background: var(--card);
  color: var(--text-2);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.mk-page .platform-mark { width: 25px; height: 25px; }
.mk-page .platform-total { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-dk); }
.mk-page .platform-total strong { font-size: 24px; line-height: 1; letter-spacing: -.06em; }
.mk-page .platform-total span { font-size: 9px; line-height: 1.3; }
.mk-page .coverage { margin-top: 15px; color: var(--muted); font-size: 11px; line-height: 1.7; }

/* --- Benefit grid (listings) ---------------------------------------------------------------------- */

.mk-page .benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.mk-page .benefit + .benefit { padding-left: 27px; border-left: var(--bw) solid var(--line); }
.mk-page .benefit h3 { max-width: 220px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.mk-page .benefit p { margin-top: var(--s-3); font-size: 13px; line-height: 1.8; }

/* --- Request form (listings) ----------------------------------------------------------------------- */

.mk-page .form-panel {
  padding: 29px 30px 25px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-panel);
}
.mk-page .form-panel h2 { max-width: 390px; font-size: 27px; font-weight: 750; line-height: 1.18; letter-spacing: -.035em; }
.mk-page .form-intro { margin-top: var(--s-2); color: var(--muted); font-size: 13px; line-height: 1.65; }
.mk-page .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 15px; margin-top: 21px; }
.mk-page .field { min-width: 0; }
.mk-page .full { grid-column: 1 / -1; }
.mk-page .field > label,
.mk-page fieldset > legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.mk-page .optional { margin-left: var(--s-1); color: var(--muted); font-size: 11px; font-weight: 400; }
.mk-page .required { margin-left: 2px; color: var(--accent); }
.mk-page .field input,
.mk-page .field textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: var(--bw) solid var(--line-control);
  border-radius: var(--r-input);
  background: var(--card);
  color: var(--heading);
  font-size: 14px;
  line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
.mk-page .field input { height: 43px; }
.mk-page .field textarea { min-height: 70px; resize: vertical; }
.mk-page .field input::placeholder,
.mk-page .field textarea::placeholder { color: var(--muted); opacity: 1; }
.mk-page .field input:focus,
.mk-page .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
}
.mk-page .field [aria-invalid="true"] { border-color: var(--red); }
.mk-page .hint { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.mk-page .error { margin-top: 5px; color: var(--red); font-size: 11px; line-height: 1.5; }
.mk-page .error:empty { display: none; }
.mk-page fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.mk-page .radio-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.mk-page .radio { position: relative; display: block; margin: 0; cursor: pointer; }
.mk-page .radio input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mk-page .radio span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: var(--bw) solid var(--line-control);
  border-radius: var(--r-input);
  background: var(--card);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}
.mk-page .radio input:checked + span {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-dk);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.mk-page .radio input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.mk-page .radio-group.invalid .radio span { border-color: var(--red); }

.mk-page .privacy-note { margin-top: 11px; color: var(--muted); font-size: 10.5px; line-height: 1.65; }
.mk-page .privacy-note a { white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }

.mk-page .form-message {
  margin-top: var(--s-3);
  padding: var(--s-3) 14px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-input);
  font-size: 13px;
  line-height: 1.65;
}
.mk-page .form-message.demo    { border-color: var(--accent-line); background: var(--accent-wash); color: var(--heading); }
.mk-page .form-message.success { border-color: var(--green-line);  background: var(--green-wash);  color: var(--green); }
.mk-page .form-message.failure { border-color: var(--red-line);    background: var(--red-wash);    color: var(--red); }

.mk-page .form-success {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 38px 10px 34px;
  text-align: center;
}
.mk-page .form-success-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: var(--bw) solid var(--green-line);
  border-radius: 50%;
  background: var(--green-wash);
  color: var(--green);
}
.mk-page .form-success-mark svg { width: 29px; height: 29px; }
.mk-page .form-success-title { color: var(--heading); font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.mk-page .form-success-note { max-width: 330px; color: var(--muted); font-size: 13px; line-height: 1.65; }

@media (prefers-reduced-motion: no-preference) {
  .mk-page .form-success { animation: mk-success-in .26s cubic-bezier(.4, 0, .2, 1) both; }
  .mk-page .form-success-mark { animation: mk-success-pop .34s cubic-bezier(.34, 1.56, .64, 1) .05s both; }
}
@keyframes mk-success-in { from { opacity: 0; transform: translateY(7px); } }
@keyframes mk-success-pop { from { opacity: 0; transform: scale(.55); } }

/* --- Submission status (payment) -------------------------------------------------------------- */

.mk-page .submission { display: flex; align-items: center; gap: 18px; margin-bottom: 25px; }
.mk-page .submission h1 { font-size: 30px; font-weight: 750; line-height: 1.15; letter-spacing: -.04em; }
.mk-page .submission p { margin-top: 5px; color: var(--muted); font-size: 15px; }
.mk-page .queue {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 26px;
  padding: 18px 22px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.mk-page .queue svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 4px; color: var(--muted); }
.mk-page .queue p { font-size: 14px; line-height: 1.7; }
.mk-page .queue strong { color: var(--heading); font-weight: 650; }

/* --- Offer card (payment) ------------------------------------------------------------------------- */

.mk-page .offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  overflow: hidden;
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: var(--shadow-panel);
}
.mk-page .offer-copy { padding: 34px 36px 30px; }
.mk-page .offer-copy .eyebrow { margin-bottom: var(--s-3); }
.mk-page .offer h2 { max-width: 550px; font-size: 38px; font-weight: 780; line-height: 1.15; }
.mk-page .offer-description { max-width: 600px; margin-top: 15px; font-size: 15px; line-height: 1.75; }
.mk-page .benefits { display: grid; gap: 10px; margin: 23px 0 0; padding: 0; list-style: none; }
.mk-page .benefits li {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 11px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.mk-page .benefits .check { margin-top: 2px; }
.mk-page .benefits sup { position: relative; top: 0; color: var(--accent); font-size: 12px; line-height: 0; }
.mk-page .footnote { margin: 13px 0 0 29px; color: var(--muted); font-size: 12px; }
.mk-page .offer-action {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 35px 29px;
  border-left: var(--bw) solid var(--accent-line);
  background: linear-gradient(155deg, var(--band) 0%, var(--accent-wash) 100%);
}
.mk-page .price-label { color: var(--text-2); font-size: 14px; font-weight: 500; }
.mk-page .offer .price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 7px;
  color: var(--heading);
  line-height: 1.1;
  white-space: nowrap;
}
.mk-page .offer .price strong { font-size: 64px; font-weight: 780; letter-spacing: -.065em; }
.mk-page .offer .price span { color: var(--text-2); font-size: 17px; font-weight: 500; }
.mk-page .price-description { margin: 15px 0 27px; color: var(--text-2); font-size: 13px; line-height: 1.65; }
.mk-page .price-description strong { color: var(--heading); }
.mk-page .button-note { width: 100%; margin-top: 13px; color: var(--text-2); font-size: 12px; line-height: 1.6; text-align: center; }
.mk-page .standard { display: flex; justify-content: center; padding: 23px 4px 0; }
.mk-page .standard p { max-width: 640px; color: var(--muted); font-size: 13px; line-height: 1.65; text-align: center; }

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

@media (max-width: 1100px) {
  .mk-page .platform-grid { grid-template-columns: repeat(6, 1fr); }
  .mk-page .platform { min-height: 76px; }
  .mk-page .benefit-grid { gap: var(--s-5); }
  .mk-page .benefit + .benefit { padding-left: 19px; }
}
@media (max-width: 1000px) {
  .mk-page .hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mk-page .hero h1 { font-size: 44px; }
  .mk-page .hero .lead { font-size: 16px; }
  .mk-page .hero-visual { min-height: 0; padding-left: 0; }
  .mk-page .pricing-grid { grid-template-columns: 1fr; }
  .mk-page .price-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 30px; }
  .mk-page .price-card.featured { padding: 29px; }
  .mk-page .plan-intro { grid-row: 1 / 4; }
  .mk-page .plan-features,
  .mk-page .plan-bottom { grid-column: 2; }
  .mk-page .plan-name { margin-top: 0; }
  .mk-page .context-band { grid-template-columns: 1fr 1fr; gap: 25px; padding: 32px; }
  .mk-page .context-band h2 { font-size: 34px; }
  .mk-page .faq { grid-template-columns: .75fr 1.25fr; gap: 32px; }
  .mk-page .faq h2 { font-size: 32px; }
}
@media (max-width: 900px) {
  .mk-page .offer { grid-template-columns: minmax(0, 1fr) 265px; }
  .mk-page .offer-copy { padding: 28px; }
  .mk-page .offer-action { padding: 28px 23px; }
  .mk-page .offer h2 { font-size: 33px; }
  .mk-page .offer .price strong { font-size: 58px; }
}
@media (max-width: 850px) {
  .mk-page .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .mk-page .benefit + .benefit { padding-left: 0; border-left: 0; }
  .mk-page .bundle { padding: 31px 28px; }
  .mk-page .bundle-grid { gap: var(--s-5); }
}
@media (max-width: 760px) {
  .mk-page .section { padding: var(--section-sm) 0; }
  .mk-page .section-head { display: block; margin-bottom: 30px; }
  .mk-page .hero { padding-top: 42px; }
  .mk-page .hero-grid { grid-template-columns: 1fr; }
  .mk-page .hero h1 { font-size: 42px; }
  .mk-page .hero .lead { font-size: 17px; }
  .mk-page .hero-actions { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .mk-page .hero-actions .btn { width: 100%; }
  .mk-page .hero-actions .question-link { text-align: center; }
  .mk-page .hero-trust { gap: var(--s-3); margin-top: 24px; padding: 24px 0; }
  .mk-page .hero-trust > div + div { padding-left: 14px; }
  .mk-page .hero-trust strong { font-size: 18px; }
  .mk-page .hero-trust span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.5; }
  .mk-page .price-card,
  .mk-page .price-card.featured { display: flex; padding: 26px; }
  .mk-page .plan-features,
  .mk-page .plan-bottom { grid-column: auto; }
  .mk-page .price-card .plan-name { font-size: 22px; }
  .mk-page .plan-title { font-size: 20px; }
  .mk-page .pricing-grid { gap: 27px; }
  .mk-page .scroll-hint { display: block; }
  .mk-page .compare-wrap { border-radius: var(--r-control); }
  .mk-page .compare-wrap table { min-width: 670px; }
  .mk-page .compare-wrap thead th:first-child,
  .mk-page .compare-wrap tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
    box-shadow: 4px 0 8px color-mix(in srgb, var(--heading) 4%, transparent);
  }
  .mk-page .compare-wrap thead th:first-child { background: var(--wash); }
  .mk-page .context-band { grid-template-columns: 1fr; gap: 25px; padding: 30px 24px; }
  .mk-page .faq { grid-template-columns: 1fr; gap: var(--s-6); }
  .mk-page .faq h2 { max-width: 460px; font-size: 34px; }
  .mk-page .closing-card { flex-direction: column; align-items: stretch; padding: 30px 24px; }
  .mk-page .closing-card h2 { font-size: 34px; }
  .mk-page .closing-actions { width: 100%; min-width: 0; }
  .mk-page .closing { padding-bottom: var(--section-sm); }
}
@media (max-width: 700px) {
  .mk-page .container--narrow { width: calc(100% - 32px); }
  .mk-page .form-panel { padding: 25px 22px; border-radius: var(--r-2xl); }
  .mk-page .form-grid { gap: 15px; margin-top: 23px; }
  .mk-page .field { grid-column: 1 / -1; }
  .mk-page .field input,
  .mk-page .field textarea { font-size: 16px; }
  .mk-page .field input { height: 46px; }
  .mk-page .radio span { min-height: 44px; }
  .mk-page .field > label,
  .mk-page fieldset > legend { font-size: 13px; }
  .mk-page .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .mk-page .platform { min-height: 78px; }
  .mk-page .benefit-grid { grid-template-columns: 1fr; gap: 25px; }
  .mk-page .benefit { display: grid; grid-template-columns: 42px 1fr; column-gap: 15px; }
  .mk-page .benefit .icon-box { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; }
  .mk-page .benefit p { grid-column: 2; margin-top: 7px; }
  .mk-page .bundle { padding: 28px 23px; border-radius: var(--r-2xl); }
  .mk-page .bundle h2 { font-size: 30px; }
  .mk-page .bundle-grid { grid-template-columns: 1fr; gap: 23px; margin-top: 24px; }
  .mk-page .submission { align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-5); }
  .mk-page .status-icon { width: 40px; height: 40px; margin-top: 2px; }
  .mk-page .status-icon svg { width: 21px; height: 21px; }
  .mk-page .submission h1 { font-size: 25px; line-height: 1.2; }
  .mk-page .queue { gap: 10px; padding: 15px; }
  .mk-page .offer { grid-template-columns: 1fr; border-radius: var(--r-2xl); }
  .mk-page .offer-copy { padding: 25px 23px; }
  .mk-page .offer-action { align-items: center; padding: 25px 23px; border-left: 0; border-top: var(--bw) solid var(--accent-line); text-align: center; }
  .mk-page .plan-icon { display: none; }
  .mk-page .offer .price { justify-content: center; }
  .mk-page .offer .price strong { font-size: 56px; }
}
@media (max-width: 680px) {
  .mk-page .container { width: min(calc(100% - 28px), var(--maxw)); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-page *,
  .site-header,
  .site-header *,
  .site-footer * { transition: none !important; }
  .mk-page .btn:hover,
  .site-header-btn:hover { transform: none; }
}