/* Tester, after launch: Inter served from our own site (fonts/, SIL Open Font License), not Google Fonts. */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* MightyCrews public site. Direction A, "Clean & light" (George, 2026-10-17): white surfaces, thin lines, generous space.
   Brand (MIGHTYCREWS-REBRAND-PLAN.md, George 2026-10-27): charcoal and the icon's blue #015DE6. Near-black carries buttons;
   the blue carries links and highlights (white on it and it on white are both ≈ 5.7:1). The --leaf names stay from the
   ServiceLilly days so the rest of this file needn't change. */
:root {
  --brand: #111816;
  --brand-700: #015de6;
  --brand-50: #eaf2fe;
  --leaf: #015de6;
  --leaf-600: #014fc4;
  --leaf-50: #eef4ff;
  --ink: #0f1f24;
  --muted: #5b6b71;
  --faint: #8a999e;
  --line: #e6ebed;
  --line-strong: #d3dde0;
  --surface: #ffffff;
  --page: #ffffff;
  --subtle: #f8fafb;
  --radius: 12px;
  --shadow: 0 1px 2px rgb(15 31 36 / 5%), 0 4px 16px rgb(15 31 36 / 5%);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-700); text-underline-offset: 3px; }
a:hover { color: var(--leaf-600); }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; border-radius: 6px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 20; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Header: sticky, white with a hairline, slightly see-through when the page scrolls under it. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand img { display: block; height: 40px; width: auto; }

.site-header nav a {
  text-decoration: none; font-weight: 500; font-size: 15px; color: var(--muted);
  padding: 8px 12px; border-radius: 8px;
}
.site-header nav a:hover { background: var(--subtle); color: var(--ink); }

.nav-menu summary {
  list-style: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink);
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--subtle); }
.nav-menu nav {
  position: absolute; right: 16px; left: 16px; margin-top: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.nav-menu nav a { color: var(--ink); padding: 12px 14px; }
.nav-menu nav a.button { margin: 6px 0 0; text-align: center; }

/* Phones get the Menu button; wider screens get the links inline. */
.nav-desktop { display: none; align-items: center; gap: 2px; }
@media (min-width: 800px) {
  .nav-desktop { display: flex; }
  .nav-menu { display: none; }
}

.button, .site-header nav a.button {
  display: inline-block; background: var(--brand); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 9px 16px; border-radius: 8px;
  box-shadow: 0 1px 2px rgb(4 63 78 / 20%);
}
.button:hover, .site-header nav a.button:hover { background: var(--brand-700); color: #fff; }
.nav-desktop a.button { margin-left: 8px; }

/* Content */
main { flex: 1; overflow-x: clip; }
main.wrap { padding-top: 56px; padding-bottom: 88px; }
h1, h2 { color: var(--ink); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(32px, 5.2vw, 52px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 16px; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 12px; }
.lead { font-size: clamp(17px, 2vw, 19px); color: var(--muted); max-width: 60ch; margin: 0 0 20px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13px; color: var(--brand-700);
  background: var(--brand-50); border: 1px solid #c9dcfb; border-radius: 999px;
  padding: 4px 12px; margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
.note { color: var(--faint); font-size: 15px; }

/* Home hero: soft green light behind left-aligned type. */
.hero { position: relative; padding: 40px 0 56px; }
.hero::before {
  /* Each glow fades out well inside the box, so no edge ever shows. */
  content: ""; position: absolute; z-index: -1; inset: -56px -20px 0;
  background:
    radial-gradient(30% 75% at 30% 15%, #e3edfd, transparent),
    radial-gradient(22% 60% at 80% 5%, #fdf3e3, transparent);
}
.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--leaf); }
.hero-mark { display: block; border-radius: 16px; box-shadow: var(--shadow); margin-bottom: 28px; width: 64px; height: 64px; }

.section { padding: 8px 0; }
/* Terms, privacy and texting terms (LEGAL-PAGES-DRAFT.md): one readable column. */
.legal { max-width: 760px; padding: 24px 0 48px; line-height: 1.6; }
.legal h1 { margin-bottom: 4px; }
.legal h2 { font-size: 20px; margin: 28px 0 8px; }
.legal ul { padding-left: 22px; margin: 8px 0; }
.legal li { margin: 4px 0; }
.legal .muted { color: var(--muted); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin: 24px 0;
}
.card-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.card-link:hover { color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow); }
.card-link h2 { margin: 0 0 4px; }
.card-link p { margin: 0; color: var(--muted); }
.card-link .arrow { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--subtle); border: 1px solid var(--line); color: var(--brand); font-weight: 700; }
.card-link:hover .arrow { background: var(--leaf-50); border-color: #bcd3fb; color: var(--leaf-600); }

/* "What this page will show": a dashed outline marks it as not built yet. */
.planned .card { border-style: dashed; border-color: var(--line-strong); background: var(--subtle); max-width: 760px; }
.planned .card h2 { font-size: 17px; }
.card ul.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card ul.checks li { position: relative; padding-left: 30px; color: var(--muted); }
.card ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--brand); background: var(--surface);
}
.card ul.checks li::after {
  content: ""; position: absolute; left: 6px; top: 8px; width: 4px; height: 8px;
  border: solid var(--brand); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

.trade-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.trade-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-weight: 500; text-decoration: none; color: var(--ink);
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.trade-list a::after { content: "→"; color: var(--faint); }
.trade-list a:hover { border-color: var(--line-strong); background: var(--subtle); }
.trade-list a:hover::after { color: var(--leaf); }
.trades .card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; }
/* George, 2026-10-27: colour on the trades page. Each group has its own colour: a tinted card, a coloured icon and
   heading, and tiles with a coloured edge that fill on hover. */
.trade-group-0 { --g: #015de6; --g-bg: #eef4ff; --g-line: #c9dcfb; }
.trade-group-1 { --g: #0f8a5f; --g-bg: #e9f7f0; --g-line: #b9e3cf; }
.trade-group-2 { --g: #c27a12; --g-bg: #fdf3e3; --g-line: #f6d9a8; }
.trade-group-3 { --g: #6b4fd8; --g-bg: #f2effd; --g-line: #d6cdf7; }
.trades .trade-group { background: linear-gradient(180deg, var(--g-bg), var(--surface) 70%); border-color: var(--g-line); border-top: 4px solid var(--g); }
.trade-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.trade-group-head h2 { margin: 0; }
.trades .trade-group h2 { color: var(--g); font-size: 14px; }
.trade-group-head p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.trade-group-icon { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--g); }
.trade-group-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trade-group .trade-list a { border-left: 3px solid var(--g); }
.trade-group .trade-list a::after { color: var(--g); }
.trade-group .trade-list a:hover { background: var(--g-bg); border-color: var(--g-line); border-left-color: var(--g); }
@media (prefers-color-scheme: dark) {
  .trades .trade-group { background: var(--surface); }
}

/* Sign-up, sign-in and other single-form pages */
.account { max-width: 560px; }
.account h1 { font-size: clamp(30px, 4.5vw, 40px); }
.form { display: flex; flex-direction: column; gap: 6px; }
.form h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 14px 0 2px; }
.form h2:first-of-type { margin-top: 0; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; margin-top: 8px; }
.form label small { font-weight: 400; color: var(--faint); }
.form input:not([type=checkbox]), .form select, .form textarea {
  font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; width: 100%;
}
/* Typing in a field shades it pale green instead of drawing an outline over the label (George, 2026-10-18). */
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background: var(--leaf-50); border-color: #a9c8fa; }
.form label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
/* Tips on the pay page (George, 2026-10-26): big tap targets, the other amount under them. */
.form input[type=radio] { width: auto; }
.form fieldset.tips { border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 14px 6px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.form fieldset.tips legend { font-weight: 700; padding: 0 4px; }
.form fieldset.tips label.check { min-height: 36px; }
.form fieldset.tips .tip-other { max-width: 160px; }
.form .row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) { .form .row { grid-template-columns: 1fr 1fr; } }
.form button.button { border: 0; cursor: pointer; margin-top: 18px; padding: 12px 18px; font-size: 16px; align-self: flex-start; }
.form .hint { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.field-error, .form-error { color: #b42318; font-size: 14px; }
.form-error ul { margin: 0 0 8px; padding-left: 18px; }
.field-error:empty, .form-error.validation-summary-valid { display: none; }

/* "Continue with Google", in Google's own neutral style */
.google-form { margin: 0; }
.google-button {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  font: inherit; font-weight: 600; font-size: 16px; color: #1f1f1f; background: #fff; cursor: pointer;
  border: 1px solid #747775; border-radius: 8px; padding: 11px 16px;
}
.google-button:hover { background: #f8fafb; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 14px; margin: 18px 0 6px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Customer portal documents */
.doc { max-width: 820px; }
.doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-start; }
.doc-head h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 4px; }
.doc-head .from { color: var(--muted); margin: 0; }
.doc-status { display: inline-block; font-weight: 600; font-size: 14px; border-radius: 999px; padding: 4px 12px; background: var(--brand-50); color: var(--brand-700); }
.doc-status.done { background: #ecfdf3; color: #067647; }
/* The business's recommended option: a brand tag, not a done state (tester, 2026-10-27). */
.doc-status.pick { background: var(--brand-50); color: var(--brand-700); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th { text-align: left; font-size: 13px; color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--line); padding: 8px 6px; }
.doc td { border-bottom: 1px solid var(--line); padding: 10px 6px; vertical-align: top; }
.doc td.num, .doc th.num { text-align: right; white-space: nowrap; }
.doc .totals { margin-left: auto; max-width: 320px; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; margin-top: 16px; }
.doc .totals .grand { font-weight: 700; font-size: 18px; border-top: 1px solid var(--line); padding-top: 8px; }
.doc .muted { color: var(--muted); }
.doc td > .muted { display: block; }
.doc .line-detail { color: var(--muted); white-space: pre-line; margin-top: 2px; font-size: 0.92em; }
.doc .line-photo { float: left; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; margin: 2px 10px 4px 0; }
.doc .scroll { overflow-x: auto; }

/* Footer */
.site-footer { background: var(--subtle); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 28px; padding-bottom: 28px; }
.footer-row p { margin: 0; }
.footer-row nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer-row .footer-product { flex-basis: 100%; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.site-footer a { color: var(--muted); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--ink); }
/* GROWTH-PLAN.md F1: MightyCrews' own footer: the brand block, five headed columns, then a slim bottom bar. */
.footer-grid { display: grid; gap: 32px 24px; grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(0, 1fr)); padding-top: 48px; padding-bottom: 36px; }
.footer-brand p { margin: 12px 0 16px; max-width: 30ch; line-height: 1.5; }
.footer-brand img { height: 32px; width: auto; display: block; }
.site-footer .footer-cta { color: #fff; font-size: 14px; padding: 8px 14px; }
.site-footer .footer-cta:hover { color: #fff; }
.footer-social { display: flex; gap: 14px; margin: 18px 0 0 !important; }
.footer-social a { display: inline-flex; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h2 { font-size: 13px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: .01em; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--line); font-size: 13px; }
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 36px; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

@media (max-width: 600px) {
  main.wrap { padding-top: 32px; padding-bottom: 64px; }
  .hero { padding: 16px 0 40px; }
  .card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Pricing (PRICING-PLAN.md): three plans side by side, stacked on a phone. */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.plan h2 { margin: 0 0 4px; }
.plan .price { font-size: 28px; font-weight: 800; color: var(--brand); margin: 0 0 12px; }
.plan .price small { font-size: 15px; font-weight: 600; color: var(--muted); }
.faq h3 { margin: 20px 0 4px; font-size: 17px; }
.faq p { margin: 0; color: var(--muted); max-width: 70ch; }

/* Quote options (QUOTE-OPTIONS-PLAN.md): one card per option, the chosen one outlined; add-ons are tick boxes. */
.choose .options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 12px; }
.choose .option { display: flex; flex-direction: column; gap: 8px; cursor: pointer; border: 2px solid var(--line); }
.choose .option.picked { border-color: var(--brand); box-shadow: var(--shadow); }
.choose .option-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.choose .option-total { margin-left: auto; font-size: 1.1em; }
.choose .option table { width: 100%; }
.choose .option td { padding: 4px 0; vertical-align: top; }
.choose .check { display: inline-flex; gap: 6px; align-items: center; }
.gallery { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin: 12px 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* Customer portal (/my, CUSTOMER-PORTAL-PLAN.md). */
.portal h2 { font-size: 18px; margin: 28px 0 10px; }
.portal .card { margin-bottom: 8px; }
.portal-row { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.portal-row:last-child { border-bottom: 0; }
.portal-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.portal-row-actions details { text-align: right; }
.portal-row-actions details[open] .form { text-align: left; min-width: 260px; margin-top: 8px; }
.portal-actions { display: flex; gap: 12px; align-items: center; }
.portal-plain { display: flex; gap: 16px; margin-top: 12px; }
.portal-notice { background: var(--brand-50); border: 1px solid #c9dcfb; border-radius: var(--radius); padding: 10px 14px; }
/* REFER-A-TRADE-PLAN.md: the invitation line at the top of the home page. */
.invite-line { max-width: 720px; margin: 16px auto 0; text-align: center; font-weight: 600; }
.portal-owing { font-weight: 700; font-size: 18px; margin: 0 0 4px; }
.portal-list { display: flex; flex-direction: column; gap: 8px; }
.portal-choice { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font: inherit; color: var(--ink); cursor: pointer; }
.portal-choice:hover { border-color: var(--brand-700); }
.portal-choice .muted { display: block; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
summary.link-button::-webkit-details-marker { display: none; }
.button.button-quiet { background: var(--surface); color: var(--brand); border: 1px solid var(--line-strong); }
.button.button-quiet:hover { background: var(--subtle); color: var(--brand); }
@media (max-width: 560px) {
  .portal-row { flex-direction: column; }
  .portal-row-actions { align-items: flex-start; }
  .portal-row-actions details { text-align: left; }
}
/* Easy to tap on phones (tester P-e): about 40px tall. */
.portal-actions .link-button, .portal-plain .link-button { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }

/* The online store (STOREFRONT-PLAN.md): items in a grid, the cart beside them on wide screens and under them on phones. */
.shop h1 { margin-bottom: 4px; }
.shop h2 { font-size: 18px; margin: 24px 0 10px; }
.shop-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .shop-layout { grid-template-columns: 1fr 320px; } .shop-cart { position: sticky; top: 16px; } }
.shop-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.shop-item { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.shop-item h3 { font-size: 16px; margin: 0; }
.shop-item .button, .shop-item .doc-status { align-self: flex-start; margin-top: auto; }
.shop-item .button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
/* NEXT-PLAN.md S: square tiles that the photo fills (new photos are cropped square; older ones are centred in the square). */
/* George, 2026-10-23: rounder corners and a faint edge make even plain phone photos look finished. */
.shop-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; background: var(--subtle); border: 1px solid rgb(0 0 0 / 8%); box-sizing: border-box; }
/* NEXT-PLAN.md R: the review hand-off page, a moment before Google. */
.review-go { display: flex; justify-content: center; padding-top: 32px; margin-inline: auto; max-width: none; width: 100%; }
.review-go-card { max-width: 440px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.review-go-card h1 { margin: 4px 0 0; }
.review-go-logo { width: 88px; height: 88px; border-radius: 20px; object-fit: cover; }
.review-go-logo-wide { width: auto; max-width: 240px; height: 64px; object-fit: contain; border-radius: 0; }
@media (max-width: 560px) {
  .shop-grid, .shop-widget .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-item h3 { font-size: 15px; }
}
/* George, 2026-10-23: on a phone the cart is a bar at the top, opened with a tap; on a wide screen it sits on the right. */
.shop-cart-toggle { display: none; }
@media (max-width: 899px) {
  /* Stays at the top while scrolling the items (the business header above it isn't pinned on a phone). */
  .shop-cart { order: -1; padding: 0; position: sticky; top: 8px; z-index: 6; box-shadow: var(--shadow); }
  .shop-cart-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; border: 0; background: none;
    font: inherit; font-weight: 600; padding: 12px 16px; cursor: pointer; color: var(--ink);
  }
  .shop-cart-toggle::after { content: "▾"; margin-left: 4px; transition: transform .15s; }
  .shop-cart.open .shop-cart-toggle::after { transform: rotate(180deg); }
  .shop-cart-toggle-total { margin-left: auto; }
  .shop-cart-body { display: none; padding: 0 16px 16px; }
  .shop-cart.open .shop-cart-body { display: block; }
  .shop-cart-body h2 { display: none; }
}
/* On a phone a business's header (logo, contact, link) scrolls away rather than staying pinned. */
@media (max-width: 899px) { .site-header-business { position: static; } }
/* A business's one header link ("Book online"). */
.business-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; }
.business-action { font-size: 14px; padding: 6px 12px; }
/* Items without their own photo: a neat square with a simple icon. */
.item-placeholder { display: flex; align-items: center; justify-content: center; color: var(--brand); background: linear-gradient(135deg, var(--subtle), #fff); }
.shop-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.shop-hero h1 { margin: 0; }
.shop-hero-sub { margin: 2px 0 0; }
.shop-hero-logo { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: #fff; border: 1px solid var(--line, #e3e8e5); flex-shrink: 0; }
/* A business's own page: its logo and details in the header; MightyCrews only as "Powered by". */
.site-header-business .header-row { flex-wrap: wrap; row-gap: 4px; }
.business-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.business-logo { display: block; height: 40px; width: 40px; border-radius: 8px; object-fit: cover; }
.business-logo-wide { width: auto; max-width: min(240px, 60vw); object-fit: contain; border-radius: 0; }
.business-name { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.business-contact { margin: 0; font-size: 14px; color: var(--muted); }
.business-contact a { color: var(--muted); }
.powered-by { margin: 0; font-size: 13px; }
.powered-by a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.powered-by img { height: 20px; width: auto; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shop-description { margin: 0; font-size: 14px; white-space: pre-line; }
/* MEMBERSHIPS-PLAN.md step 2: membership cards in the store and the Join page. */
.shop-memberships { margin-bottom: 24px; }
.join-perks { margin: 4px 0; padding-left: 20px; font-size: 14px; }
.join-perks li { margin: 2px 0; }
.join-card .button { margin-top: auto; text-align: center; }
/* Wider than a product card, one per row on a phone (tester, 0347). */
.join-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.join-grid .join-card { display: flex; flex-direction: column; gap: 6px; }
.shop-join { max-width: 720px; }
.shop-join .shop-checkout { max-width: none; }
.join-terms { margin-top: 8px; font-size: 14px; }
.join-terms p { white-space: pre-line; }
.shop-price { font-weight: 700; margin: 4px 0; }
.shop-cart h2 { margin-top: 0; }
.shop-lines { list-style: none; margin: 0; padding: 0; }
.shop-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.shop-lines .shop-line-name { grid-column: 1 / -1; font-weight: 600; }
.shop-lines select { font: inherit; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); justify-self: start; }
.shop-lines .shop-line-amount { justify-self: end; }
.shop-lines .link-button { min-height: 40px; }
.shop-total { display: flex; justify-content: space-between; margin: 12px 0; }
.shop-cart > .button { border: 0; cursor: pointer; font: inherit; font-weight: 600; width: 100%; }
.shop-checkout { margin-top: 20px; max-width: 560px; }
.shop-checkout h2 { text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--ink); }
.shop-how { align-items: flex-start !important; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.form .shop-how input[type=radio] { width: auto; flex: none; margin: 4px 0 0; padding: 0; accent-color: var(--brand-700); }
.shop-how > span { display: flex; flex-direction: column; gap: 2px; }
.shop-how .muted { font-weight: 400; color: var(--muted); }
.shop-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.shop-done { padding-left: 20px; }
/* The order thanks page: a clear number to keep, each item with its picture, and how to ask about it. */
.shop-thanks .card { max-width: 620px; }
.shop-thanks h1 { font-size: 26px; margin-top: 0; }
.shop-order-number { font-size: 20px; margin: 8px 0 0; }
.shop-order-number strong { font-size: 28px; letter-spacing: .02em; }
.shop-thanks .shop-done { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.shop-thanks .shop-done li { display: flex; align-items: center; gap: 12px; }
.shop-done-photo { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; border: 1px solid rgb(0 0 0 / 8%); box-sizing: border-box; }
.shop-questions { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 0; }
.shop-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; text-align: center; box-shadow: var(--shadow); z-index: 5; }
@media (min-width: 900px) { .shop-bar { display: none; } }
.shop-widget { background: transparent; padding: 4px; }
.shop-widget .shop-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.shop-widget-bar { display: flex; gap: 10px; align-items: center; margin: 14px 0 4px; }
.shop [hidden], .shop[hidden] { display: none !important; }
/* Online booking (ONLINE-BOOKING-PLAN.md): the same look as the store. */
.book-form { max-width: 640px; gap: 16px; }
.book-step { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.book-step h2 { text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--ink); margin: 0 0 4px; }
.book-services { display: flex; flex-direction: column; gap: 10px; }
.book-service { cursor: pointer; }
.book-service:has(input:checked) { border-color: var(--brand-700); background: var(--leaf-50); }
.book-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex: none; border: 1px solid rgb(0 0 0 / 8%); box-sizing: border-box; }
.book-price { font-weight: 700; }
.book-postal { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; }
.book-postal label { flex: 1 1 180px; }
.form .book-postal button.button { margin-top: 8px; }
.book-days { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.book-day { font: inherit; padding: 10px 14px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); cursor: pointer; }
.portal-book { margin: 12px 0 0; }
.shop-book-link { margin: 4px 0 8px; }
.book-more { border-style: dashed; color: var(--muted); }
.book-day[aria-pressed=true] { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.book-windows { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form label.book-window { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.form .book-window input[type=radio] { width: auto; flex: none; margin: 0; padding: 0; accent-color: var(--brand-700); }
.book-window:has(input:checked) { border-color: var(--brand-700); background: var(--leaf-50); }
.book-why { margin: 0 0 4px; }

/* Pricing table and the Jobber comparison (PRICING-PAGE-PLAN.md). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.plan-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.plan-table th, .plan-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.plan-table thead th { font-size: 14px; color: var(--muted); }
.plan-table .plan-group th { background: var(--subtle); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.plan-table .plan-check { text-align: center; color: var(--brand-700); font-weight: 700; width: 18%; }
.plan-table .muted { color: var(--muted); font-size: 14px; }
.calc-inputs { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.calc-results { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 16px 0 8px; }
.calc-results p { margin: 0; }
.calc-results strong { font-size: 28px; }
.compare-lists { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.compare-lists h2 { font-size: 20px; }

/* The customer portal (George, 2026-10-23): centred, and the sign-in a single tidy column. */
.portal { margin-left: auto; margin-right: auto; }
.portal-signin { max-width: 480px; margin-top: 24px; }

/* "View their account" (George, 2026-10-23): the office's read-only look; tabs and photos still open, nothing else does. */
.portal-preview-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; background: #fff7e0; border: 1px solid #f0d58a;
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-weight: 600; }
/* Collapsed sections ("Request a change", "Ask for a different time") still open, so the office sees them; what's inside stays locked (tester, 1859). */
.portal-preview a.button, .portal-preview a.link-button { pointer-events: none; opacity: .55; }
.portal-lock { border: 0; padding: 0; margin: 0; min-width: 0; }
.portal-lock:disabled input, .portal-lock:disabled textarea, .portal-lock:disabled button { opacity: .55; cursor: not-allowed; }

/* CUSTOMER-PORTAL-2-PLAN.md CP1: Home · Visits · Bills · My home · Messages. Across the top on a computer, a fixed bar along the bottom on a phone. */
.portal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0 8px; }
.portal-tabs a { padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.portal-tabs a.active { color: var(--ink); border-bottom-color: var(--brand-700); }
.portal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 16px; }
.portal-cards .card { margin: 0; }
.portal-cards h2 { margin-top: 0; }
.portal-note { margin: 6px 0 0; white-space: pre-line; }
.portal-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.portal-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.portal h3 { font-size: 16px; margin: 20px 0 4px; }
/* Step 2: the conversation, and the two-column "Request a change" form. */
.portal-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.portal-chat-line { max-width: 85%; align-self: flex-start; }
.portal-chat-line.mine { align-self: flex-end; text-align: right; }
.portal-chat-line .muted { font-size: 13px; }
.portal-chat-body { display: inline-block; text-align: left; white-space: pre-line; background: var(--surface-2, #f3f4f6); border-radius: 14px; padding: 8px 12px; margin-top: 2px; }
.portal-chat-line.mine .portal-chat-body { background: var(--brand-50); }
.portal-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
@media (max-width: 640px) {
  .portal-tabbed { padding-bottom: 84px; }
  .portal-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 0;
    justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgb(0 0 0 / 6%); }
  .portal-tabs a { flex: 1; text-align: center; padding: 14px 2px; font-size: 13px; border-bottom: 0; border-top: 3px solid transparent; margin: 0; }
  .portal-tabs a.active { border-top-color: var(--brand-700); }
}
.portal-signin h1 { font-size: clamp(26px, 4vw, 34px); }

/* George, 2026-10-29 (like Jobber's client hub): the account's menu down the left on a computer, along the bottom on a
   phone, around the account and around a quote or invoice opened from an email; quotes and invoices as grouped cards. */
.portal-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 36px; align-items: start; }
.portal-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.portal-side-request { text-align: center; }
.portal-side-links { display: flex; flex-direction: column; gap: 2px; }
.portal-side-links a { padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; }
.portal-side-links a:hover { background: var(--subtle); color: var(--ink); }
.portal-side-links a.active { background: var(--brand-50); color: var(--brand-700); }
.portal-side-signout { padding: 0 12px; }
.portal-signout-phone { display: none; }
.portal-group { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; }
.portal-group.late { color: #b42318; }
.portal-doc { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 0 0 10px; }
.portal-doc.late { border-left: 4px solid #d92d20; }
.portal-doc-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.portal-doc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.portal-doc-total { font-size: 20px; font-weight: 700; }
.doc-status.late { background: #fef3f2; color: #b42318; }
.portal-confirm h2 { margin-top: 0; }
.portal-plain-left { margin-top: 8px; }
@media (max-width: 640px) {
  .portal-layout { display: block; padding-bottom: 84px; }
  /* The fixed bar covered the footer's links (tester, portal refresh). */
  body:has(.portal-layout) .site-footer { padding-bottom: 96px; }
  .portal-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 8px rgb(0 0 0 / 6%); }
  .portal-side-request, .portal-side-signout { display: none; }
  .portal-side-links { flex-direction: row; justify-content: space-around; gap: 2px; }
  .portal-side-links a { flex: 1; text-align: center; padding: 12px 2px; font-size: 12.5px; border-radius: 8px; }
  .portal-signout-phone { display: block; }
  .portal-doc { flex-direction: column; align-items: stretch; }
  .portal-doc-side { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---- Membership pages (MEMBERSHIP-PAGES-PLAN.md): one design, the business's words and photos ---- */
.mp { max-width: 880px; margin: 0 auto; }
.mp-notice { background: var(--brand-50); color: var(--brand-700); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.mp-hero { position: relative; border-radius: 18px; overflow: hidden; margin: 8px 0 28px; min-height: 260px; display: flex; align-items: flex-end; background: var(--brand); }
.mp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 16, 18, .78), rgba(10, 16, 18, .15) 60%, transparent); }
.mp-hero.plain::after { display: none; }
.mp-hero-text { position: relative; z-index: 1; padding: 32px; color: #fff; }
.mp-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 48px); margin: 0 0 8px; line-height: 1.1; }
.mp-pitch { font-size: clamp(17px, 2.2vw, 21px); margin: 0 0 18px; opacity: .95; max-width: 40rem; }
.mp-hero-join { background: #fff; color: var(--ink); }
.mp-intro { font-size: 18px; line-height: 1.6; color: var(--ink); max-width: 44rem; margin: 0 0 28px; }
.mp-unavailable { margin-bottom: 24px; }
.mp-sections { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); margin-bottom: 28px; }
.mp-section h2 { font-size: 20px; margin: 0 0 12px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.mp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.mp-mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: 13px; }
.mp-photos { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 28px; }
.mp-photos.n1 { grid-template-columns: 1fr; } .mp-photos.n2 { grid-template-columns: repeat(2, 1fr); }
.mp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.mp-join { margin-bottom: 28px; scroll-margin-top: 16px; }
.mp-prices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.mp-price { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 24px; }
.mp-price-amount { font-size: 26px; font-weight: 700; margin: 0; color: var(--ink); }
.mp-faq { margin-bottom: 20px; }
.mp-faq h2 { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.mp-faq details { margin-bottom: 8px; }
.mp-faq summary { cursor: pointer; font-weight: 600; }
.mp-faq details p { margin: 10px 0 0; white-space: pre-line; color: var(--muted); }
.mp-terms { margin-bottom: 32px; font-size: 14px; color: var(--muted); }
.mp-terms p { white-space: pre-line; }
.mp-sticky-join { display: none; }
@media (max-width: 640px) {
  .mp-hero { min-height: 220px; border-radius: 14px; }
  .mp-hero-text { padding: 22px; }
  .mp-photos, .mp-photos.n2 { grid-template-columns: 1fr; }
  .mp-sticky-join { display: block; position: sticky; bottom: 12px; text-align: center; margin: 0 0 12px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
}
/* A lone last card fills the row, rather than leaving a gap beside it (tester, 1435). */
@media (min-width: 821px) { .mp-sections > .mp-section:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.mp-join h2 { font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--ink); text-align: center; margin: 0 0 14px; }
.mp-saving { margin: -4px 0 0; font-weight: 600; color: var(--brand-700); background: var(--brand-50); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
/* Join buttons line up at the bottom of equal-height price cards (tester, 1519). */
.mp-price .button { margin-top: auto; }
.mp-signup { margin-bottom: 40px; scroll-margin-top: 16px; }
.mp-signup form { max-width: 560px; margin: 0 auto; }
.mp-signup h2 { font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--ink); margin: 0 0 8px; }
/* "Memberships from {Business}" (MEMBERSHIP-PAGES-PLAN.md MP2/MP2b). */
.mp-all h1 { font-size: clamp(28px, 4.5vw, 40px); margin: 16px 0 24px; }
.mp-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: 36px; align-items: stretch; }
.mp-card { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mp-card.popular { border: 2px solid var(--brand-700); }
.mp-badge { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--brand-700); color: #fff; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 12px; }
.mp-card-top { aspect-ratio: 16 / 9; background: var(--brand); }
.mp-card-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-card-top.plain { aspect-ratio: auto; height: 10px; }
.mp-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mp-card-body h2 { font-size: 22px; margin: 0; text-transform: none; letter-spacing: 0; color: var(--ink); }
.mp-card-body p { margin: 0; }
.mp-card-prices .mp-price-amount { font-size: 19px; }
.mp-card-body .button { margin-top: auto; text-align: center; }
.mp-compare h2 { font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.mp-compare-scroll { overflow-x: auto; margin-bottom: 40px; }
.mp-compare table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.mp-compare th, .mp-compare td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mp-compare tbody th { color: var(--muted); font-weight: 600; width: 160px; }
.mp-compare ul { margin: 0; padding-left: 18px; }
/* Tester, 1537: a card without a photo keeps the same band, so cards line up; even comparison columns, with "Most popular" marked. */
.mp-card-top.plain { aspect-ratio: 16 / 9; height: auto; }
.mp-compare table { table-layout: fixed; }
.mp-compare thead th:first-child, .mp-compare tbody th { width: 160px; }
.mp-badge.inline { position: static; display: inline-block; margin-left: 8px; font-size: 12px; padding: 2px 10px; vertical-align: middle; }
/* No photo: the plan's name on the band, like the plan page's hero (tester, 1549). */
.mp-card-top.plain { display: flex; align-items: flex-end; padding: 18px 20px; }
.mp-card-top.plain span { color: #fff; font-weight: 700; font-size: 24px; line-height: 1.15; }

/* George, 2026-10-27: a page that says one thing (sign in, an invitation, "Done", a link that isn't valid) is one card
   in the middle on a soft background, not a few lines hanging off the left edge. Sign-in pages get it from .account;
   other short pages add class "solo". The cards inside become plain sections of the one card. */
body:has(main > .account, main > .solo) { background: var(--subtle); }
.account, .solo {
  max-width: 520px; width: 100%; margin: 8px auto 0; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
  padding: 36px 36px 28px;
}
.account h1, .solo h1 { font-size: clamp(26px, 4vw, 32px); margin-bottom: 10px; }
.account .lead, .solo .lead { font-size: 17px; margin-bottom: 8px; }
.account .card, .solo .card { background: none; border: 0; border-radius: 0; padding: 0; margin: 20px 0 0; max-width: none; }
.solo .doc-head { margin-bottom: 4px; }
.solo .doc-head .from { font-weight: 600; color: var(--brand-700); }
.solo h2 { font-size: 19px; }
.solo .card > :last-child, .account .card > :last-child { margin-bottom: 0; }
.solo > :last-child, .account > :last-child { margin-bottom: 0; }
.solo .button, .account .card .button { width: 100%; justify-content: center; text-align: center; }
.solo .portal-plain, .solo .portal-more { margin-top: 20px; text-align: center; }
@media (max-width: 560px) {
  .account, .solo { padding: 26px 20px 22px; border-radius: 16px; margin-top: 0; }
}

/* George, 2026-10-27: an invoice, quote or other document sits in the middle of the page, not hugging the left edge. */
.doc { margin-inline: auto; }

/* TesterBot polish round 1: at 1440 the home and pricing heroes, the pricing questions and the booking page sat on the
   left half with the right half empty. They sit in the middle now. */
.hero-center { text-align: center; }
.hero-center h1, .hero-center .lead, .hero-center .hero-mark { margin-inline: auto; }
.faq-center { max-width: 760px; margin-inline: auto; padding-top: 56px; }
.shop.book { max-width: 640px; margin-inline: auto; }
/* TesterBot polish round 1: on a phone the header already shows the business name, so the big title is for screen readers only. */
@media (max-width: 600px) {
  .shop.book .shop-hero h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* TesterBot polish round 1: keeps a short phrase ("6-digit") on one line. */
.nowrap { white-space: nowrap; }

/* TesterBot polish round 1 (retest): a contact item ("Hamilton, ON") never splits across lines, and a document's
   totals end where the Amount column's figures end (the cells' 6px padding). The business name is in the header now,
   so quotes and invoices no longer repeat it above their title. */
.business-contact a, .business-contact span:not([aria-hidden]) { white-space: nowrap; }
.doc .totals { padding-right: 6px; }
/* The pricing page's middle block (coming soon, Get started, compare links) in the middle too (TesterBot retest). */
.section-center { text-align: center; }
/* Every figure in a document's totals right-aligned, so Subtotal and Tax end where Total and the Amount column do
   (TesterBot recheck 2: only Total lined up). */
.doc .totals .num { text-align: right; }

/* HOME PAGE (draft, 2026-10-27): the public home page once Site:ComingSoon is off. Every rule is home-* or button-big,
   so nothing above changes. Phones 375, tablets 768, desktops 1440: centred, no sideways scroll. */
.button.button-big { font-size: 17px; padding: 14px 28px; border-radius: 10px; }
.home-cta { margin: 8px 0 0; }
.home-quiet { margin: 14px 0 0; font-weight: 500; }
@media (max-width: 560px) {
  .home-cta .button-big { display: block; width: 100%; max-width: 360px; margin-inline: auto; text-align: center; }
}

/* Split hero on wide screens (George, 2026-10-27). */
@media (min-width: 960px) {
  .home-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 56px; text-align: left; }
  .home-hero .home-hero-text .lead { margin-left: 0; margin-right: 0; }
  .home-hero .hero-mark { margin-left: 0; margin-right: 0; }
  .home-hero .home-app { margin: 0; width: 100%; }
}
/* A plain picture of the app's day, drawn in CSS. */
.home-app {
  max-width: 420px; margin: 44px auto 0; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden;
}
.home-app-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.home-app-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.home-app-body { padding: 14px 18px 18px; display: grid; gap: 10px; }
.home-app-title { margin: 0 0 2px; font-weight: 700; font-size: 15px; }
.home-app-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.home-app-time { flex: 0 0 68px; font-size: 13px; font-weight: 600; color: var(--muted); }
.home-app-line { flex: 1; height: 8px; border-radius: 4px; background: var(--line); }
.home-app-line-short { flex: 0.6; margin-right: auto; }
.home-app-pill { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--subtle); border: 1px solid var(--line); color: var(--muted); }
.home-app-done { background: var(--leaf-50); border-color: #c9dcfb; color: var(--leaf-600); }
.home-app-now { background: #fdf3e3; border-color: #f6d9a8; color: #8a5a10; }
.home-app-paid { border-color: #c9dcfb; }
.home-app-paidpill { background: var(--leaf); border-color: var(--leaf); color: #fff; }

/* The job cycle (George, 2026-10-27): numbered steps, a line down the left on phones, a grid on wider screens; the
   last step loops back round. */
.home-cycle { text-align: center; padding-top: 56px; }
.home-cycle h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 8px; }
.home-cycle .lead { max-width: 640px; margin: 0 auto 28px; }
.home-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 640px) { .home-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .home-steps { grid-template-columns: repeat(4, 1fr); } }
.home-steps li {
  counter-increment: step; position: relative; display: grid; gap: 4px; align-content: start;
  padding: 16px 16px 16px 60px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.home-steps li::before {
  content: counter(step); position: absolute; left: 16px; top: 14px; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--leaf); color: #fff; font-weight: 700; font-size: 14px;
}
.home-steps li strong { font-size: 16px; }
.home-steps li span { color: var(--muted); font-size: 14px; line-height: 1.45; }
/* Phones: a thin line joins the steps, so it reads as one flow. */
@media (max-width: 639px) {
  .home-steps li:not(:last-child)::after { content: ""; position: absolute; left: 30px; top: 46px; bottom: -13px; width: 2px; background: #c9dcfb; }
}
/* Jobber compare: the free plan, up top and in the table (George, 2026-10-27). */
.compare-free { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; background: var(--leaf-50); border-color: #c9dcfb; border-left: 4px solid var(--leaf); }
.compare-free > div { flex: 1 1 420px; }
.compare-free h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 28px); }
.compare-free p:last-child { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .compare-free .button-big { width: 100%; text-align: center; } }
.compare-free-row td { background: var(--leaf-50); }
.compare-free-row td:last-child strong { color: var(--leaf); }
.home-more { margin: 22px 0 0; font-weight: 600; font-size: 16px; }
.home-steps .home-step-loop { background: #fdf3e3; border-color: #f6d9a8; }
.home-steps .home-step-loop::before { content: "↻"; background: #ef9f27; font-size: 17px; }
@media (min-width: 960px) { .home-steps .home-step-loop { grid-column: span 2; } }

/* Free plan, what sets us apart, and the full list (George, 2026-10-27). */
.home-free, .home-apart, .home-all { text-align: center; padding-top: 56px; }
.home-free h2, .home-apart h2, .home-all h2 { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 8px; }
.home-free .lead, .home-all .lead { max-width: 660px; margin: 0 auto 24px; }
.home-kicker { margin: 0 0 6px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #c27a12; }
.home-free { background: var(--leaf-50); border: 1px solid #c9dcfb; border-radius: 20px; padding: 40px 20px; margin-top: 56px; }
.home-checks { list-style: none; margin: 0 auto 8px; padding: 0; max-width: 820px; display: grid; gap: 10px 24px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 640px) { .home-checks { grid-template-columns: repeat(2, 1fr); } }
.home-checks li, .home-group li { position: relative; padding-left: 28px; }
.home-checks li::before, .home-group li::before {
  content: ""; position: absolute; left: 2px; top: 5px; width: 14px; height: 8px;
  border-left: 2.5px solid var(--leaf); border-bottom: 2.5px solid var(--leaf); transform: rotate(-45deg);
}
.home-apart .home-features { text-align: left; padding-top: 16px; }
.home-feature h3 { font-size: 18px; margin: 14px 0 6px; }
.home-groups { display: grid; gap: 16px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 640px) { .home-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .home-groups { grid-template-columns: repeat(4, 1fr); } }
.home-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.home-group h3 { margin: 0 0 12px; font-size: 17px; color: var(--leaf); }
.home-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.home-all .note { margin-top: 18px; }

/* Feature blocks: one column on phones, two on tablets, three on desktops. */
.home-features { display: grid; gap: 16px; grid-template-columns: 1fr; padding-top: 24px; }
@media (min-width: 640px) { .home-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .home-features { grid-template-columns: repeat(3, 1fr); } }
.home-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.home-feature h2 { font-size: 18px; margin: 14px 0 6px; }
.home-feature p { margin: 0; color: var(--muted); }
.home-feature-wide { grid-column: 1 / -1; }
.home-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--leaf-50); border: 1px solid #c9dcfb; }
.home-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--leaf); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-feature:nth-child(4n+2) .home-icon { background: #fdf3e3; border-color: #f6d9a8; }
.home-feature:nth-child(4n+2) .home-icon svg { stroke: #c27a12; }

/* Price strip, switching block and the closing call to action: one centred column. */
.home-block { max-width: 760px; margin-inline: auto; padding-top: 40px; text-align: center; }
.home-block h2 { font-size: clamp(22px, 3vw, 28px); }
.home-prices { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
.home-prices li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 14px 18px; }
.home-prices li + li { border-top: 1px solid var(--line); }
/* Phones: every plan's price under its name, not just the long ones (TesterBot polish round 2). */
@media (max-width: 480px) { .home-prices li { flex-direction: column; } }
.home-prices span { color: var(--muted); }
.home-switch { margin: 0; border-top: 3px solid #ef9f27; }
.home-switch p { color: var(--muted); }
.home-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-bottom: 0; font-weight: 500; }
.home-final { text-align: center; padding-top: 56px; }
.home-final h2 { font-size: clamp(24px, 3.4vw, 32px); }
.home-final .note { margin-top: 14px; }

/* CREW PAGE (draft, 2026-10-27): /crew, how field workers use MightyCrews on a phone or iPad. Every rule is crew-*, so
   nothing above changes; the page also reuses the home-* steps and feature blocks. Phones 375, tablets 768, desktops 1440. */
.crew-hero h1 { max-width: 18ch; }

/* The phone and the iPad, drawn in CSS: side by side on desktops, stacked (phone first) below that. */
.crew-devices { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 28px; max-width: 980px; margin: 44px auto 0; text-align: left; }
.crew-phone { flex: 0 0 auto; width: 272px; max-width: 100%; padding: 10px; border-radius: 40px; background: #111816; box-shadow: var(--shadow), 0 18px 40px rgb(15 31 36 / 12%); }
.crew-phone-screen { position: relative; display: flex; flex-direction: column; min-height: 520px; border-radius: 30px; overflow: hidden; background: #f6f9fa; }
.crew-phone-notch { position: absolute; top: 8px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #111816; }
.crew-screen-top { padding: 36px 16px 10px; background: var(--surface); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-screen-body { flex: 1; display: grid; gap: 8px; align-content: start; padding: 12px; }
.crew-screen-sum { margin: 0; font-size: 12px; color: var(--muted); }
.crew-screen-head { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; }
.crew-next { display: grid; gap: 4px; padding: 12px; background: var(--surface); border: 2px solid var(--leaf); border-radius: 12px; }
.crew-next-label { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leaf); }
.crew-next-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; line-height: 1.3; }
.crew-next-time { margin: 0; font-size: 12px; color: var(--muted); }
.crew-next-buttons { display: flex; gap: 8px; margin-top: 6px; }
.crew-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.crew-next-buttons .crew-btn { flex: 1; }
.crew-btn-line { border: 1px solid var(--leaf); color: var(--leaf); background: var(--surface); }
.crew-btn-fill { background: var(--leaf); color: #fff; }
.crew-btn-done { background: #2e7d32; color: #fff; margin-top: 4px; justify-self: start; }
.crew-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.crew-row-done { opacity: .8; }
.crew-row-time { flex: 0 0 46px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.crew-row-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-chip { flex-shrink: 0; display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid; font-size: 10.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.crew-chip-booked { background: var(--leaf-50); border-color: #c9dcfb; color: var(--leaf-600); }
.crew-chip-way { background: #fdf3e3; border-color: #f6d9a8; color: #8a5a10; }
.crew-chip-done { background: #edf7ee; border-color: #c3e3c5; color: #2e6b31; }
.crew-phone-tabs { display: flex; justify-content: space-around; gap: 4px; padding: 10px 6px 14px; background: var(--surface); border-top: 1px solid var(--line); font-size: 10.5px; color: var(--muted); }
.crew-tab-on { color: var(--leaf); font-weight: 700; }

.crew-tablet { flex: 1 1 520px; max-width: 640px; min-width: 0; padding: 14px; border-radius: 28px; background: #111816; box-shadow: var(--shadow), 0 18px 40px rgb(15 31 36 / 12%); }
.crew-tablet-screen { border-radius: 16px; overflow: hidden; background: #f6f9fa; }
.crew-tablet-screen .crew-screen-top { padding-top: 12px; }
.crew-tablet-main { display: flex; gap: 14px; padding: 14px; }
.crew-tablet-nav { flex: 0 0 96px; display: grid; gap: 4px; align-content: start; font-size: 12px; color: var(--muted); }
.crew-tablet-nav span { padding: 7px 10px; border-radius: 8px; }
.crew-tablet-nav .crew-tab-on { background: var(--leaf); color: #fff; }
.crew-tablet-body { flex: 1; min-width: 0; display: grid; gap: 8px; align-content: start; }
.crew-tablet-note { margin: 0; font-size: 12px; color: var(--muted); }
.crew-tablet-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.crew-panel { min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.crew-panel-title { margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; }
.crew-panel-title span { font-weight: 600; color: var(--muted); }
.crew-panel-gap { margin-top: 12px; }
.crew-bar { height: 6px; margin-bottom: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.crew-bar span { display: block; width: 50%; height: 100%; background: var(--leaf); }
.crew-check { position: relative; margin: 0; padding: 5px 0 5px 26px; font-size: 12.5px; line-height: 1.35; }
.crew-check::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.crew-check-on { color: var(--muted); }
.crew-check-on::before { background: var(--leaf); border-color: var(--leaf); }
.crew-check-on::after { content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.crew-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.crew-photo { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.crew-photo i { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-style: normal; font-size: 9.5px; font-weight: 600; color: #fff; background: rgb(15 31 36 / 55%); }
.crew-photo-a { background: linear-gradient(135deg, #8a999e, #5b6b71); }
.crew-photo-b { background: linear-gradient(135deg, #7fb0f5, #015de6); }
.crew-photo-add { display: grid; place-items: center; border: 1.5px dashed var(--line-strong); color: var(--muted); font-size: 18px; font-weight: 600; }
.crew-material { margin: 0; font-size: 12.5px; }

/* Phones: the iPad picture keeps its content and drops its side tabs; panels stack. */
@media (max-width: 560px) {
  .crew-devices { gap: 24px; }
  .crew-tablet { flex-basis: 100%; padding: 10px; border-radius: 22px; }
  .crew-tablet-nav { display: none; }
  .crew-tablet-main { padding: 10px; }
  .crew-tablet-grid { grid-template-columns: 1fr; }
}

/* The steps: seven, so the last one (the loop) fills the second row on desktops, as on the home page. */
.crew-day { padding-top: 64px; }
.crew-features .home-feature h3 { margin-top: 14px; }

/* Phone or iPad, and the coming phone app: two cards side by side from tablets up. */
.crew-devices-info { padding-top: 56px; }
.crew-info { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .crew-info { grid-template-columns: 1fr 1fr; } }
.crew-info-card { margin: 0; }
.crew-info-card h2 { font-size: clamp(20px, 2.6vw, 24px); margin: 0 0 10px; }
.crew-info-card p { color: var(--muted); }
.crew-info-card p:last-child { margin-bottom: 0; }
.crew-info-soon { border-top: 3px solid #ef9f27; }
.crew-info-soon .home-kicker { color: #c27a12; }

/* OFFICE PAGE (draft, 2026-10-27): /office, how the office runs the business on a computer, the partner to /crew. Every
   rule is office-*, so nothing above changes; the page also reuses the home-* hero, steps and feature blocks and the
   crew-* chips and photos. Phones 375, tablets 768, desktops 1440: no sideways scroll. */
.office-hero h1 { max-width: 18ch; }
@media (min-width: 960px) {
  .office-hero.home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; }
  .office-hero h1 { margin-left: 0; }
}

/* The laptop, drawn in CSS, with a customer's quote beside it. */
.office-visual { position: relative; max-width: 680px; margin: 44px auto 0; text-align: left; }
@media (min-width: 960px) { .office-visual { margin: 0; padding-bottom: 110px; } }
.office-laptop { position: relative; }
.office-screen { padding: 10px 10px 12px; border-radius: 16px 16px 4px 4px; background: #111816; box-shadow: var(--shadow), 0 18px 40px rgb(15 31 36 / 12%); }
.office-bar { display: flex; gap: 5px; padding: 7px 10px; border-radius: 8px 8px 0 0; background: var(--subtle); border-bottom: 1px solid var(--line); }
.office-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.office-app { display: flex; min-height: 300px; border-radius: 0 0 6px 6px; overflow: hidden; background: #f6f9fa; }
.office-nav {
  flex: 0 0 118px; display: grid; gap: 1px; align-content: start; padding: 10px 6px; background: var(--surface); border-right: 1px solid var(--line);
  font-size: 10.5px; color: var(--muted); overflow: hidden; contain: size; /* as tall as the dashboard beside it, never taller */
  /* the full menu fades out at the bottom: there's more below (George, 2026-10-27) */
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent);
}
.office-nav span { padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.office-nav b { margin: 7px 8px 1px; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leaf); white-space: nowrap; }
.office-nav .office-nav-on { background: var(--leaf); color: #fff; font-weight: 600; }
.office-main { flex: 1; min-width: 0; display: grid; gap: 8px; align-content: start; padding: 10px; }
.office-hello { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-weight: 700; font-size: 13px; }
.office-hello span { font-weight: 500; font-size: 11px; color: var(--muted); }
.office-grid { display: grid; gap: 8px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.office-panel { min-width: 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.office-panel-title { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; font-weight: 700; }
.office-panel-title span { font-weight: 500; color: var(--muted); }
.office-lane { display: flex; align-items: flex-start; gap: 6px; padding: 5px 0; }
.office-lane + .office-lane { border-top: 1px solid var(--line); }
.office-who { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf-50); border: 1px solid #c9dcfb; color: var(--leaf-600); font-size: 9px; font-weight: 700; }
.office-who-b { background: #fdf3e3; border-color: #f6d9a8; color: #8a5a10; }
.office-who-c { background: #edf7ee; border-color: #c3e3c5; color: #2e6b31; }
.office-visits { flex: 1; min-width: 0; display: grid; gap: 4px; }
.office-visit { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-left: 3px solid var(--leaf); border-radius: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.35; }
.office-visit b { font-weight: 600; color: var(--muted); }
.office-visit i { font-style: normal; margin-left: auto; }
.office-visit .crew-chip { font-size: 9.5px; padding: 0 6px; }
.office-visit-done { opacity: .75; border-left-color: #2e7d32; }
.office-visit-drop { justify-content: center; border: 1.5px dashed var(--line-strong); color: var(--muted); font-weight: 500; }
.office-ask { display: grid; gap: 3px; padding: 6px 0; }
.office-ask + .office-ask { border-top: 1px solid var(--line); }
.office-ask-what { margin: 0; font-size: 10.5px; font-weight: 700; line-height: 1.35; }
.office-ask-text { margin: 0; font-size: 10px; color: var(--muted); line-height: 1.35; }
.office-mini { justify-self: start; padding: 2px 10px; border-radius: 6px; background: var(--leaf); color: #fff; font-size: 10px; font-weight: 600; }
.office-stats { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.office-stat { min-width: 0; display: grid; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.office-stat span { font-size: 10px; color: var(--muted); line-height: 1.3; }
.office-stat strong { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.office-ring { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--leaf) 0 67%, var(--line) 67% 100%); -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); mask: radial-gradient(circle, transparent 4px, #000 4.5px); }
.office-base { position: relative; height: 12px; margin: 0 -4%; border-radius: 0 0 14px 14px; background: linear-gradient(#d5dde0, #b9c4c8); }
.office-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 70px; height: 5px; margin-left: -35px; border-radius: 0 0 6px 6px; background: #a3afb4; }

/* The customer's side: a quote with options. Overlaps the laptop's lower right corner on desktops; under it on smaller screens. */
.office-quote { display: grid; gap: 6px; width: 230px; max-width: 100%; margin: 24px auto 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow), 0 12px 30px rgb(15 31 36 / 14%); }
@media (min-width: 960px) { .office-quote { position: absolute; right: -8px; bottom: 0; margin: 0; } }
.office-quote-head { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; }
.office-quote-head span { font-weight: 500; color: var(--muted); }
.office-quote-sub { margin: 2px 0 0; font-size: 11px; font-weight: 700; }
.office-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 11.5px; }
.office-opt b { margin-left: auto; white-space: nowrap; }
.office-opt-name { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 600; }
.office-opt-name em { font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--leaf-50); border: 1px solid #c9dcfb; color: var(--leaf-600); font-size: 9.5px; font-weight: 600; }
.office-radio { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.office-opt-on { border-color: var(--leaf); background: var(--leaf-50); }
.office-opt-on .office-radio { border: 4px solid var(--leaf); background: #fff; }
.office-quote-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.office-quote-btn { display: flex; align-items: center; justify-content: center; min-height: 30px; border-radius: 8px; background: var(--leaf); color: #fff; font-size: 11.5px; font-weight: 600; }

/* Phones: the laptop drops its side menu, Needs a reply goes under Today, and the numbers wrap. */
@media (max-width: 600px) {
  .office-screen { padding: 6px 6px 8px; border-radius: 12px 12px 4px 4px; }
  .office-nav { display: none; }
  .office-grid { grid-template-columns: 1fr; }
  .office-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .office-stat-ring { grid-column: span 2; order: 3; }
  .office-base { margin: 0 -2%; }
}

/* The steps: eight, so the loop is the last of two full rows on desktops. */
.office-day { padding-top: 64px; }
@media (min-width: 960px) { .office-day .home-steps .home-step-loop { grid-column: auto; } }

/* Office staff are always free: one card, words on the left and links on the right from tablets up. */
.office-free { padding-top: 56px; }
.office-free-card { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; background: var(--leaf-50); border-color: #c9dcfb; border-left: 4px solid var(--leaf); }
.office-free-card > div { flex: 1 1 420px; min-width: 0; }
.office-free-card h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 28px); }
.office-free-card p { color: var(--muted); }
.office-free-card > div > p:last-child { margin-bottom: 0; }
.office-free-links { margin: 0; display: grid; gap: 8px; font-weight: 600; }

/* FEATURE PAGES (draft, 2026-10-27): /features/*, one shared layout (Pages/Features). They reuse the home-* hero, steps,
   cards and final call to action; every rule here is feature-*, so nothing above changes. Phones 375, tablets 768,
   desktops 1440: centred on phones, text left and the picture right from 960px, no sideways scroll. */
.feature-hero h1 { max-width: 18ch; }
@media (min-width: 960px) {
  .feature-hero.home-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .feature-hero h1 { margin-left: 0; }
}

/* The plan badge, from PlanFeatures. */
.feature-badge { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0 0 22px; font-size: 14.5px; }
@media (min-width: 960px) { .feature-hero .feature-badge { justify-content: flex-start; } }
.feature-badge-plan { padding: 4px 12px; border-radius: 999px; background: var(--leaf-50); border: 1px solid #c9dcfb; color: var(--leaf-600); font-weight: 700; }
.feature-badge-note { color: var(--muted); font-weight: 500; }
.feature-badge-link { font-weight: 500; white-space: nowrap; }

/* The picture of the customer's screen, drawn in CSS: a browser window, and sometimes a small card over its corner. */
.feature-visual { position: relative; max-width: 420px; margin: 44px auto 0; text-align: left; }
@media (min-width: 960px) {
  .feature-hero .feature-visual { margin: 0 0 0 auto; width: 100%; }
  .feature-visual-float { padding-bottom: 90px; }
}
.feature-frame { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow), 0 18px 40px rgb(15 31 36 / 10%); overflow: hidden; }
.feature-screen { display: grid; gap: 9px; padding: 16px 18px 18px; }
.feature-screen p { margin: 0; }
.feature-screen-sub { font-size: 12px; font-weight: 600; color: var(--muted); }
.feature-screen-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.feature-screen .feature-label { margin-top: 4px; font-size: 12.5px; font-weight: 700; }
.feature-text { font-size: 13px; }
.feature-small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.feature-screen .home-app-line-short { width: 60%; }
.feature-screen .office-opt { font-size: 12.5px; padding: 9px 10px; }
.feature-screen .office-opt b { font-size: 12px; }
.feature-screen .crew-check { font-size: 13px; }
.feature-field { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; }
.feature-field b { font-weight: 500; color: var(--muted); }
.feature-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; padding: 10px 12px; background: var(--leaf-50); border: 1px solid #c9dcfb; border-radius: 10px; }
.feature-total span { font-size: 12.5px; color: var(--muted); }
.feature-total strong { font-size: 18px; color: var(--leaf-600); white-space: nowrap; }
.feature-btn { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.feature-btn-small { min-height: 30px; padding: 0 10px; font-size: 11.5px; }
.feature-line { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.feature-line b { font-weight: 600; white-space: nowrap; }
/* Day and time choices (booking), tip buttons (payments). */
.feature-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.feature-tips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.feature-days span, .feature-times span { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.feature-days .feature-on, .feature-times .feature-on { background: var(--leaf); border-color: var(--leaf); color: #fff; }
/* Membership prices. */
.feature-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.feature-prices span { flex: 1 1 120px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12.5px; color: var(--muted); }
.feature-prices b { font-size: 17px; color: var(--ink); }
/* A store item. */
.feature-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.feature-item > div { flex: 1; min-width: 0; display: grid; font-size: 12.5px; }
.feature-item > div b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feature-item > div span { color: var(--muted); }
.feature-item-photo { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; }
.feature-item-photo-c { background: linear-gradient(135deg, #f6d9a8, #ef9f27); }
/* The small card over the window's corner: a new review, a saved card. */
.feature-float { display: grid; gap: 6px; width: 250px; max-width: 100%; margin: 16px auto 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow), 0 12px 30px rgb(15 31 36 / 14%); }
.feature-float p { margin: 0; }
@media (min-width: 960px) { .feature-float { position: absolute; right: -12px; bottom: 0; margin: 0; } }
.feature-float-title { font-size: 12.5px; font-weight: 700; }
.feature-stars { font-size: 18px; letter-spacing: 2px; color: #ef9f27; line-height: 1.2; }
.feature-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--subtle); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.feature-card-chip { flex: 0 0 auto; width: 26px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #7fb0f5, #015de6); }
.feature-float .crew-chip { margin-right: 4px; }

/* Sections: the steps and cards are the home page's; a little more room above each. */
.feature-how { padding-top: 64px; }
.feature-compare { margin: 22px auto 0; max-width: 680px; color: var(--muted); }
.feature-compare a { font-weight: 600; white-space: nowrap; }
.feature-faq h2 { font-size: clamp(22px, 3vw, 28px); }

/* The other five features. */
.feature-related { padding-top: 56px; text-align: center; }
.feature-related h2 { font-size: clamp(22px, 3vw, 28px); }
.feature-related-grid { display: grid; gap: 12px; grid-template-columns: 1fr; padding-top: 12px; text-align: left; }
@media (min-width: 640px) { .feature-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .feature-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .feature-related-grid { grid-template-columns: repeat(5, 1fr); } }
.feature-related-card { display: grid; gap: 4px; align-content: start; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.feature-related-card:hover { border-color: #a9c8fa; background: var(--leaf-50); }
.feature-related-card strong { color: var(--leaf); }
.feature-related-card span { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* The home page's "What sets MightyCrews apart" cards link here. */
.feature-learn { font-weight: 600; white-space: nowrap; }

/* TesterBot public pages review (2026-10-27), items 11 and 12. Every rule is pub-* or narrows an existing class, so
   nothing above changes elsewhere. Checked for phones 375, tablets 768 and desktops 1440. */

/* Item 11, home "Today" card: sample job names in place of the grey bars; a long name wraps instead of pushing the pill. */
.pub-app-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
@media (max-width: 420px) {
  .home-app-body { padding: 12px 12px 14px; }
  .home-app-row { gap: 8px; padding: 9px 10px; }
  .home-app-time { flex-basis: 58px; font-size: 12px; }
  .pub-app-name { font-size: 13px; }
}

/* Item 11, crew phone: job names show in full, wrapping onto a second line when the phone is narrow. */
.crew-phone { width: 288px; }
.crew-row-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* Item 12, /trades: wider tiles, so "Concrete & Masonry" fits on one line at 1440, and every tile in a group the same
   height if a name ever wraps. */
.trades .trade-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); grid-auto-rows: 1fr; }
.trades .trade-list li { display: flex; }
.trades .trade-list a { flex: 1; }

/* Item 12, home "Everything in one place": two balanced columns from tablets up (the long "Run the work" list on one
   side, the shorter groups stacked on the other), in place of four uneven columns. */
@media (min-width: 640px) {
  .home-groups { display: block; columns: 2; column-gap: 16px; }
  .home-groups .home-group { break-inside: avoid; margin-bottom: 16px; }
}
@media (min-width: 1100px) { .home-groups { max-width: 1000px; margin-inline: auto; } }

/* Item 12, switch pages: centred hero, the four steps as numbered cards, what comes over and what stays in cards. */
.pub-switch-hero h1 { max-width: 18ch; }
.pub-switch-how { padding-top: 24px; }
.pub-switch-how h2 { margin-bottom: 20px; }
.pub-steps li { padding-top: 18px; padding-bottom: 18px; }
.pub-steps li span { color: var(--ink); font-size: 15px; line-height: 1.5; }
.pub-steps li span strong { font-size: inherit; }
.pub-switch-cards { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 1000px; margin: 40px auto 0; padding: 0; }
@media (min-width: 900px) { .pub-switch-cards { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.pub-switch-card { margin: 0; border-top: 3px solid var(--leaf); }
.pub-switch-card h2 { font-size: clamp(20px, 2.6vw, 24px); margin: 0 0 16px; }
.pub-switch-card ul.checks li strong { color: var(--ink); }
.pub-switch-stays { border-top-color: #ef9f27; }
.pub-switch-stays p { margin: 0; color: var(--muted); }
.pub-switch-faq h2 { font-size: clamp(22px, 3vw, 28px); }
.pub-final-title { margin: 0 0 12px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }

/* George, 2026-10-27 (public pages review): the "Full Suite" tag on home job-cycle steps (like the plan badges), the quiet
   "Learn more" on a step, and the 30-day trial line on /pricing and the home "Simple pricing" list. */
.home-steps li .pub-plan-tag, .hm-steps li .pub-plan-tag {
  justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--leaf-50); border: 1px solid #c9dcfb;
  color: var(--leaf-600); font-size: 12px; font-weight: 700; line-height: 1.4;
}
.home-steps li .pub-step-learn, .hm-steps li .pub-step-learn { color: var(--leaf-600); font-weight: 600; white-space: nowrap; }
.pub-trial { margin: -4px 0 12px; color: var(--leaf-600); font-weight: 600; font-size: 14.5px; }
.home-prices .pub-trial-note { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }

/* TRADE PAGES (draft, 2026-10-27): /trades/{slug}, one template for all 18 trades (Pages/Trades). They reuse the
   feature-* hero and picture and the home-* steps, cards, prices and final call to action; every rule here is trade-*,
   so nothing above changes. Phones 375, tablets 768, desktops 1440. */
.trade-hero .note { margin: 12px 0 0; } /* TesterBot recheck: the button covered it at -8px */
.trade-line { align-items: center; }
.trade-line-end { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.trade-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trade-chips span { padding: 4px 10px; border-radius: 8px; background: var(--subtle); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; }
.trade-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0 !important; }
.trade-plan { padding: 1px 10px; border-radius: 999px; background: var(--leaf-50); border: 1px solid #c9dcfb; color: var(--leaf-600); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.trade-made { padding-top: 56px; }
.trade-made-card { max-width: 820px; margin: 0 auto; border-top: 3px solid var(--leaf); }
.trade-made-card h2 { margin: 0 0 16px; font-size: clamp(20px, 2.6vw, 24px); }
.trade-related { padding-top: 48px; text-align: center; }
.trade-related h2 { font-size: clamp(20px, 2.6vw, 24px); }
.trade-related .trade-list { text-align: left; grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); max-width: 1000px; margin: 0 auto; }

/* George, 2026-10-29: the public videos page. */
.videos { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.video-card { width: 100%; max-width: 960px; padding: 0; overflow: hidden; }
.video-card video { display: block; width: 100%; height: auto; background: #041b4d; }
.video-text { padding: 20px 24px 24px; }
.video-text h2 { margin: 0 0 8px; }
.video-text p { margin: 0 0 6px; }
.video-more { text-align: center; }

/* Help (2026-10-30): the topic links under the heading, and a little room between topics. */
.help-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 0 auto; max-width: 720px; }
.help-topic { padding-top: 24px; scroll-margin-top: 80px; }
.help-topic h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 4px; }
.help-topic .help-topic-title { font-size: 20px; margin: 0 0 4px; }
.help-topic h4 { margin: 18px 0 4px; font-size: 16px; }

/* HELP-CENTRE-PLAN.md: the search, the sections, a section's list and an article. */
.help-search { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.help-search input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); }
.help-search input:focus { outline: 2px solid var(--brand-700); outline-offset: 1px; }
.help-search .button { border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 12px 18px; }
.help-results { max-width: 560px; margin: 12px auto 0; text-align: left; display: grid; gap: 6px; }
.help-result { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--ink); }
.help-result:hover, .help-result:focus-visible { border-color: var(--brand-700); }
.help-result span { color: var(--muted); font-size: 14px; }
.help-sections { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.help-section { margin: 0; }
.help-section h2 { font-size: 18px; margin: 0 0 10px; }
.help-section h2 a { color: var(--ink); text-decoration: none; }
.help-section ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.help-section p { margin: 10px 0 0; font-size: 15px; }
.help-faq-head { text-align: center; padding-bottom: 0; }
.help-crumbs { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.help-crumbs a { color: var(--muted); }
.help-list { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.help-item { display: grid; gap: 4px; margin: 0; text-decoration: none; color: var(--ink); padding: 16px 20px; }
.help-item:hover, .help-item:focus-visible { border-color: var(--brand-700); }
.help-item > span:last-child { color: var(--muted); font-size: 15px; }
.help-has-video { justify-self: start; font-size: 12px; font-weight: 600; color: var(--brand-700); background: var(--brand-50); border-radius: 999px; padding: 2px 8px; }
.help-article { max-width: 760px; margin: 0 auto; padding: 32px 0 48px; }
.help-article h1 { margin-top: 0; }
.help-video { margin: 8px 0 28px; }
.help-video video { width: 100%; height: auto; border-radius: var(--radius); background: #000; display: block; }
.help-video figcaption { color: var(--muted); font-size: 14px; margin-top: 6px; }
.help-body h2 { font-size: 22px; margin: 28px 0 8px; }
.help-body h3 { font-size: 18px; margin: 22px 0 6px; }
.help-body p, .help-body li { max-width: 70ch; }
.help-steps { padding-left: 22px; display: grid; gap: 8px; }
.help-tip { background: var(--leaf-50); border-left: 3px solid var(--brand-700); padding: 10px 14px; border-radius: 0 8px 8px 0; }
.help-shot { margin: 16px 0; }
.help-shot img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.help-related h2 { font-size: 17px; margin: 0 0 8px; }
.help-related ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.help-stuck { margin-top: 24px; }

/* Comparison pages (2026-10-30): the four framed screens under the video. */
.shots-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 720px) { .shots-grid { grid-template-columns: 1fr 1fr; } }
.shots-grid img { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow); }

/* HOME PAGE SCREENS (GROWTH-PLAN.md H1, George 2026-11-02: "we need proper screenshots on our homepage"). Drawn in CSS
   like /office and /crew, reusing their office-* and crew-* parts; every new rule is hm-*. Phones 375, tablets 768,
   desktops 1440: no sideways scroll. */

/* Hero: the office calendar on a laptop, the crew's phone over its right corner, and a paid invoice over its left. */
@media (min-width: 960px) { .home-hero:has(.hm-scene) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; } }
.hm-scene { position: relative; max-width: 640px; width: 100%; margin: 40px auto 0; padding: 0 0 40px; text-align: left; }
@media (min-width: 960px) { .hm-scene { margin: 0; padding: 0 150px 70px 0; } }
.hm-cal { padding: 10px; background: #f6f9fa; border-radius: 0 0 6px 6px; display: grid; gap: 8px; }
.hm-cal-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 700; }
.hm-cal-title span { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.hm-cal-grid { display: grid; grid-template-columns: 54px repeat(4, minmax(0, 1fr)); gap: 3px; font-size: 9.5px; }
.hm-cal-grid > span:first-child { visibility: hidden; min-height: 0; }
.hm-cal-grid > b { padding: 3px 0; text-align: center; font-weight: 700; color: var(--muted); }
.hm-cal-grid > b.hm-today { color: var(--leaf); }
.hm-cal-grid > i { align-self: start; padding-top: 4px; font-style: normal; font-weight: 700; white-space: nowrap; }
.hm-cal-grid > span { min-height: 62px; display: grid; gap: 3px; align-content: start; padding: 3px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); }
.hm-cal-grid > span.hm-today { background: var(--leaf-50); border-color: #c9dcfb; }
.hm-v { display: block; padding: 3px 4px; border-radius: 4px; font-style: normal; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; border-left: 3px solid; }
.hm-v-a { background: #e3eefe; border-color: var(--leaf); color: var(--leaf-600); }
.hm-v-b { background: #fdf3e3; border-color: #ef9f27; color: #8a5a10; }
.hm-v-c { background: #edf7ee; border-color: #2e7d32; color: #2e6b31; }
.hm-cal-wait { margin: 0; padding: 5px 8px; border: 1.5px dashed var(--line-strong); border-radius: 6px; font-size: 10px; color: var(--muted); }
.hm-phone { position: absolute; right: 0; bottom: 0; width: 196px; padding: 7px; border-radius: 30px; }
.hm-phone .crew-phone-screen { min-height: 360px; border-radius: 24px; }
.hm-phone .crew-screen-top { padding: 28px 12px 8px; font-size: 12.5px; }
.hm-phone .crew-screen-body { padding: 9px; gap: 6px; }
.hm-phone .crew-next { padding: 9px; }
.hm-phone .crew-next-title { font-size: 13px; }
.hm-phone .crew-btn { min-height: 28px; padding: 0 8px; font-size: 11px; }
.hm-phone .crew-row { padding: 7px 8px; font-size: 11px; }
.hm-phone .crew-phone-tabs { font-size: 9.5px; padding: 8px 4px 10px; }
.hm-float { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow), 0 12px 30px rgb(15 31 36 / 14%); }
.hm-float div { display: grid; font-size: 12.5px; }
.hm-float span { color: var(--muted); }
.hm-paid { position: absolute; left: -16px; bottom: 16px; }
.hm-tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2e7d32; color: #fff; font-weight: 700; }
/* Tablets and phones: the phone under the laptop's corner gets smaller; phones show only the phone and the paid card. */
@media (max-width: 959px) { .hm-scene { padding-right: 150px; } }
@media (max-width: 640px) {
  .hm-scene { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0; max-width: 320px; }
  .hm-scene .hm-laptop { display: none; }
  .hm-phone, .hm-paid { position: static; }
  .hm-phone { width: 240px; }
}

/* "The whole job": four tabs, each with its words on the left and its screens on the right. */
.hm-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 0; }
.hm-tabs-section:not(.hm-js) .hm-tabs { display: none; }
.hm-tabs button { padding: 9px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.hm-tabs button:hover { border-color: var(--leaf); }
.hm-tabs button[aria-selected="true"] { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.hm-panel { display: grid; gap: 32px; align-items: center; margin-top: 28px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: left; }
@media (min-width: 960px) { .hm-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding: 36px; } }
.hm-panel[hidden] { display: none; }
.hm-panel-text h3 { margin: 0 0 8px; font-size: clamp(20px, 2.6vw, 26px); }
.hm-panel-text > p { color: var(--muted); }
.hm-steps { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.hm-steps li::marker { color: var(--leaf); font-weight: 700; }
.hm-panel-more { margin: 16px 0 0; font-weight: 600; }
.hm-trades .hm-panel-more { text-align: center; }
.hm-panel-art { position: relative; display: flex; justify-content: flex-start; align-items: flex-end; gap: 0; min-width: 0; padding-right: 130px; }
.hm-laptop-sm { flex: 1; min-width: 0; max-width: 460px; }
.hm-phone-sm { position: absolute; right: 0; bottom: -8px; width: 170px; padding: 6px; border-radius: 26px; }
.hm-phone-sm .crew-phone-screen { min-height: 300px; border-radius: 21px; }
.hm-phone-sm .crew-screen-top { padding: 26px 10px 7px; font-size: 12px; }
.hm-phone-sm .crew-screen-body { padding: 8px; gap: 6px; }
.hm-phone-sm .crew-check { font-size: 11px; padding-left: 22px; }
.hm-phone-sm .crew-check::before { width: 14px; height: 14px; }
.hm-phone-sm .crew-check-on::after { left: 4px; top: 7px; }
.hm-quote, .hm-board { display: grid; gap: 7px; padding: 12px; background: #f6f9fa; border-radius: 0 0 6px 6px; min-height: 250px; align-content: start; }
.hm-quote-title { margin: 0 0 4px; display: grid; font-size: 12.5px; font-weight: 700; }
.hm-quote-title span { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.hm-opt { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 11px; }
.hm-opt b { flex: 0 0 58px; }
.hm-opt span { flex: 1; min-width: 0; color: var(--muted); }
.hm-opt em { font-style: normal; font-weight: 700; }
.hm-opt-on { border-color: var(--leaf); background: var(--leaf-50); }
.hm-sent { justify-self: start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: #fdf3e3; border: 1px solid #f6d9a8; color: #8a5a10; font-size: 10.5px; font-weight: 600; }
.hm-popt { display: flex; align-items: center; gap: 7px; padding: 7px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 11.5px; font-weight: 600; }
.hm-popt b { margin-left: auto; }
.hm-popt-on { border-color: var(--leaf); background: var(--leaf-50); }
.hm-popt-on .office-radio { border: 4px solid var(--leaf); background: #fff; }
.hm-pbtn { display: flex; align-items: center; justify-content: center; min-height: 30px; margin-top: 4px; border-radius: 8px; background: var(--leaf); color: #fff; font-size: 11px; font-weight: 600; }
.hm-board .office-visit { font-size: 11px; }
.hm-tablet-sm { flex: 1; min-width: 0; max-width: 440px; }
.hm-inv { display: grid; gap: 7px; padding: 12px; }
.hm-inv-row { margin: 0; display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 11.5px; }
.hm-inv-total { font-weight: 700; border-bottom: 0; font-size: 12.5px; }
.hm-inv-choice { margin: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 11px; }
.hm-inv-on { border-color: var(--leaf); background: var(--leaf-50); font-weight: 600; }
.hm-inv .crew-btn { justify-self: start; }
.hm-paid-body { justify-items: center; text-align: center; padding-top: 34px; }
.hm-bigtick { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #2e7d32; color: #fff; font-size: 26px; font-weight: 700; }
.hm-paid-title { margin: 6px 0 0; font-size: 18px; font-weight: 700; }
.hm-paid-sub { margin: 0; font-size: 11px; color: var(--muted); }
.hm-mail-from { margin: 0; font-size: 10.5px; color: var(--muted); }
.hm-mail-subject { margin: 0; font-size: 13px; font-weight: 700; }
.hm-stars { margin: 0; font-size: 18px; letter-spacing: 2px; color: #ef9f27; line-height: 1.2; }
.hm-mail-text { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.hm-panel-art:has(.hm-member) { padding-right: 0; gap: 20px; align-items: center; justify-content: center; }
.hm-panel-art:has(.hm-member) .hm-phone-sm { position: static; }
.hm-member { display: grid; gap: 5px; width: 200px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--leaf); border-radius: 14px; box-shadow: var(--shadow), 0 12px 30px rgb(15 31 36 / 12%); }
.hm-member p { margin: 0; }
.hm-member-name { font-weight: 700; }
.hm-member-price { font-size: 20px; font-weight: 700; color: var(--leaf-600); }
.hm-member-line { font-size: 12.5px; color: var(--muted); }
.hm-member-btn { display: flex; justify-content: center; margin-top: 6px; padding: 6px; border-radius: 8px; background: var(--leaf); color: #fff; font-size: 12px; font-weight: 600; }
/* The phone overlaps the laptop's right edge: keep the prices and chips clear of it. */
@media (min-width: 641px) { .hm-quote, .hm-board, .hm-inv { padding-right: 56px; } .hm-cal { padding-right: 60px; } }
/* Phones: the small screens stack, the phone under the laptop. */
@media (max-width: 640px) {
  .hm-panel { padding: 18px; }
  .hm-panel-art { flex-direction: column; align-items: center; gap: 16px; padding-right: 0; }
  .hm-phone-sm { position: static; width: 220px; }
  .hm-laptop-sm, .hm-tablet-sm { width: 100%; }
}

/* "What sets MightyCrews apart": a small drawn screen at the top of each card, in place of the icon. */
.hm-mini { display: grid; gap: 5px; align-content: start; min-height: 112px; margin-bottom: 14px; padding: 12px; background: #f6f9fa; border: 1px solid var(--line); border-radius: 12px; font-size: 12px; }
.hm-mini p { margin: 0; color: var(--ink); }
.home-feature .hm-mini p { color: var(--ink); }
.hm-mini-title { font-weight: 700; }
.hm-mini-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.hm-mini-row span { color: var(--muted); }
.hm-free { color: #2e6b31; }
.home-feature .hm-mini .hm-mini-text { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.hm-mini-price { font-size: 17px; font-weight: 700; color: var(--leaf-600) !important; }
.hm-mini-btn { justify-self: start; padding: 4px 12px; border-radius: 6px; background: var(--leaf); color: #fff; font-style: normal; font-size: 11px; font-weight: 600; }
.hm-mini-site { padding: 0; overflow: hidden; background: var(--surface); }
.hm-mini-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--subtle); border-bottom: 1px solid var(--line); }
.hm-mini-bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.hm-mini-bar i { margin-left: 8px; padding: 1px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hm-site-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 16px 18px; background: linear-gradient(120deg, #0f3d7a, #015de6); color: #fff; }
.hm-site-hero b { flex-basis: 100%; font-size: 17px; }
.hm-site-hero span { flex-basis: 100%; font-size: 12px; opacity: .85; }
.hm-site-hero em { padding: 5px 12px; border-radius: 6px; background: #ef9f27; color: #1b1b1b; font-style: normal; font-size: 11.5px; font-weight: 700; }
.hm-site-hero .hm-ghost { background: transparent; border: 1px solid rgb(255 255 255 / 70%); color: #fff; }
.hm-mini-shop { place-items: center; }
.hm-tile { display: grid; gap: 4px; width: 150px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.hm-tile-pic { height: 44px; border-radius: 6px; background: linear-gradient(135deg, #f6d9a8, #ef9f27); }
.hm-tile b { font-size: 11px; }
.hm-tile i { font-style: normal; font-weight: 700; }
.hm-cap { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.hm-cap span { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf), #2e7d32); }

/* Trades: a tile per trade with its icon. */
.hm-trades { text-align: center; }
.hm-trade-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); text-align: left; }
.hm-trade-grid a { display: flex; align-items: center; gap: 10px; height: 100%; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.hm-trade-grid a:hover { border-color: #a9c8fa; background: var(--leaf-50); }
.hm-trade-grid svg { flex: 0 0 auto; width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--leaf-50); fill: none; stroke: var(--leaf); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-sizing: content-box; }
@media (max-width: 420px) { .hm-trade-grid { grid-template-columns: 1fr 1fr; } .hm-trade-grid a { font-size: 13px; padding: 10px; } }

/* Switching: the import, finished. */
.hm-import { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: 0 auto 16px; padding: 10px 16px; max-width: 520px; background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.hm-import span { color: var(--muted); }
.hm-import em { font-style: normal; font-weight: 700; color: #2e6b31; }
.home-feature .hm-mini .hm-stars { color: #ef9f27; }