@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* Base page reset — needed now that this ships as a standalone HTML page
   rather than being embedded inside another page's own reset/background. */
html, body { margin: 0; padding: 0; background: #05070e; }
body { min-height: 100vh; }

.app *, .app *::before, .app *::after { box-sizing: border-box; }
/* Grid items default to min-width:auto, which lets wide content (tables, nowrap
   flex rows, long tokens) force a track wider than its container instead of
   wrapping/scrolling within it. Zeroing it on every grid container's direct
   children is the standard fix and is safe everywhere it's applied below. */
.choice-grid > *, .band > *, .steps > *, .feat-grid > *, .plans > *, .flow-stage > *,
.contact-stage > *, .field-row > *, .dash > *, .hours-grid > *, .hours-row > *,
.review-list > *, .team-grid > *, .stat-row > *, .split > *, .shop-grid > * { min-width: 0; }
.app {
  --void: #05070e; --panel-solid: #0b1020; --line: rgba(140,176,255,.15); --line-hot: rgba(70,229,208,.38);
  --text: #e6ecf8; --muted: #8b99b6; --cyan: #46e5d0; --violet: #8a7bff; --flag: #ff6f5e; --amber: #ffc46b;
  font-family: 'IBM Plex Sans', system-ui, sans-serif; color: var(--text); background: var(--void);
  line-height: 1.6; -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh;
  overflow-x: hidden;
}
.app::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(900px 560px at 12% -8%, rgba(70,229,208,.16), transparent 62%),
    radial-gradient(760px 520px at 92% 6%, rgba(138,123,255,.15), transparent 60%),
    radial-gradient(700px 700px at 50% 108%, rgba(70,229,208,.07), transparent 65%);
}
.app::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(to right, rgba(140,176,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(140,176,255,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(1100px 700px at 50% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(1100px 700px at 50% 0%, #000 20%, transparent 78%);
}
.app > * { position: relative; z-index: 1; }
.app h1, .app h2, .app h3 { font-family: 'Space Grotesk', sans-serif; margin: 0 0 .45em; line-height: 1.1; letter-spacing: -.028em; font-weight: 600; }
.app h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 700; }
.app h2 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }
.app h3 { font-size: 1.04rem; }
.app p { margin: 0 0 1em; max-width: 66ch; }
.app button, .app input, .app select, .app textarea { font: inherit; color: inherit; }
.app :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.app ::selection { background: rgba(70,229,208,.28); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 30px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; flex-wrap: wrap; background: rgba(5,7,14,.72); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 11px; font-family: 'Space Grotesk', sans-serif; }
.brand-name { font-weight: 700; letter-spacing: -.03em; font-size: 1.06rem; }
.brand-tld { color: var(--cyan); }
.brand-client { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--muted); border-left: 1px solid var(--line); padding-left: 11px; }
.mark { width: 11px; height: 11px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 2px rgba(70,229,208,.75); animation: pulse 3.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .38; } }
.tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.tab { background: none; border: 1px solid transparent; padding: 7px 14px; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: .88rem; }
.tab:hover { color: var(--text); background: rgba(255,255,255,.04); }
.tab.on { color: var(--void); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
.tabs.small { margin: 0 0 22px; border-bottom: 1px solid var(--line); padding-bottom: 12px; flex-wrap: wrap; }
.tabs.small .tab.on { background: rgba(70,229,208,.14); color: var(--cyan); border-color: var(--line-hot); }

.btn { border: 1px solid transparent; border-radius: 9px; padding: 9px 17px; cursor: pointer; font-size: .9rem; font-weight: 500; background: none; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, border-color .15s; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--cyan), #63d9ff); color: #04121a; font-weight: 600; box-shadow: 0 0 22px rgba(70,229,208,.28); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 0 30px rgba(70,229,208,.45); }
.btn.quiet { background: rgba(255,255,255,.05); border-color: var(--line); }
.btn.quiet:hover:not(:disabled) { background: rgba(70,229,208,.1); border-color: var(--line-hot); }
.btn.ghost { border-color: var(--line); color: var(--muted); }
.btn.ghost:hover { color: var(--text); border-color: rgba(140,176,255,.4); }
.btn.big { padding: 13px 24px; font-size: 1rem; }
.btn.wide { width: 100%; justify-content: center; }
.linkish { background: none; border: 0; color: var(--cyan); cursor: pointer; font-size: .82rem; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.linkish.danger, .linkish[disabled] { color: var(--flag); }
.linkish[disabled] { opacity: .35; cursor: not-allowed; text-decoration: none; }

.receipt { width: 100%; max-width: 384px; position: relative; z-index: 2; }
.flow-page { --accent: #46e5d0; position: relative; display: flex; justify-content: center; width: 100%; padding: 36px 16px; overflow: hidden; }
.flow-page.has-bg { padding: 44px 20px; border-radius: 24px; overflow: hidden; }
.flow-page::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(55% 55% at 50% 18%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 68%); filter: blur(46px); z-index: 0; pointer-events: none; }
.revolve-bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.revolve-layer { position: absolute; inset: 0; background-size: cover; background-position: center 35%; background-repeat: no-repeat; opacity: 0; transition: opacity 1.6s ease; }
.revolve-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,14,.6), rgba(5,7,14,.86)); backdrop-filter: blur(1.5px); }

/* Full-screen public review page (opened from a QR code or counter link):
   the business's photo fills the entire screen — no padded box, especially
   on mobile — and reads clearly through a much lighter, un-blurred tint. */
.flow-stage.flow-stage-full {
  display: flex; justify-content: center; grid-template-columns: none;
  max-width: none; margin: 0; padding: 0;
  min-height: 100vh; min-height: 100dvh;
}
.flow-stage.flow-stage-full .flow-page {
  width: 100%; min-height: 100vh; min-height: 100dvh; margin: 0;
  flex-direction: column; align-items: center; justify-content: center; border-radius: 0;
}
.flow-stage.flow-stage-full .flow-page.has-bg { padding: 36px 16px; border-radius: 0; }
/* The "powered by" credit is pulled out of the centering flow and pinned
   to the bottom of the page, so it never pushes or crowds the review card
   and always reads as a footer, not a sibling next to the card. */
.flow-stage.flow-stage-full .flow-credit {
  position: absolute; left: 0; right: 0; bottom: 16px; margin: 0 auto; z-index: 3;
}
.flow-stage.flow-stage-full .revolve-scrim {
  background:
    radial-gradient(130% 95% at 50% 8%, rgba(5,7,14,0) 0%, rgba(5,7,14,.18) 45%, rgba(5,7,14,.55) 100%),
    linear-gradient(180deg, rgba(5,7,14,.05) 0%, rgba(5,7,14,.12) 40%, rgba(5,7,14,.5) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.social-row { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.social-lede { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-chip { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.social-chip:hover { border-color: var(--accent); color: var(--accent); background: rgba(70,229,208,.08); }

/* Big logo-only header on the customer review card — no business name text
   next to it, per the "logo fills the header" request. Shown as the full
   logo image (no circular crop, no ring/border) so wordmarks and non-round
   logos aren't cut off or boxed in. */
.receipt-head-logo { display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.receipt-logo-full { max-width: 100%; max-height: 148px; width: auto; height: auto; object-fit: contain; display: block; border-radius: 0; box-shadow: none; background: none; }
.receipt-head-logo { max-width: 100%; }

/* A visible, temporary confirmation that the review text landed on the
   clipboard — not just a silent state change. */
.copy-toast { background: rgba(70,229,208,.1); border: 1px solid var(--line-hot); color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: .86rem; margin: 4px 0 14px; }

/* Small "powered by" credit at the very bottom of the full-screen customer
   review page — a soft pitch to other business owners who land on it,
   deliberately understated so it never competes with the review flow. */
.flow-credit { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin: 22px auto 6px; padding: 10px 16px; text-decoration: none; opacity: .72; transition: opacity .15s; }
.flow-credit:hover { opacity: 1; }
.flow-credit-brand { font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 600; color: var(--text); }
.flow-credit-brand .brand-tld { color: var(--cyan); }
.flow-credit-cta { font-size: .74rem; color: var(--muted); }
.receipt-inner { position: relative; background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 40%, rgba(6,9,18,.24)), rgba(14,18,34,.38); border: 1px solid rgba(255,255,255,.14); border-top: 1px solid var(--accent); border-radius: 18px 18px 6px 6px; padding: 28px 25px 29px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 40px rgba(255,255,255,.02), 0 30px 70px rgba(0,0,0,.55), 0 0 44px -14px var(--accent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); overflow: hidden; }
.receipt-watermark { position: absolute; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: .07; filter: grayscale(1) contrast(1.15); pointer-events: none; }
.receipt-watermark img { width: 78%; max-width: 260px; object-fit: contain; }
.receipt .choice-btn, .receipt .chip, .receipt .rtext, .receipt .private-offer { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.14); backdrop-filter: blur(4px); }
.receipt .rtext { background: rgba(6,9,18,.32); }
.receipt .chip.on { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.receipt .choice-btn.good:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tear { height: 3px; margin: 0 14px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, transparent, var(--accent), var(--violet), transparent); opacity: .55; filter: blur(.4px); }
.receipt-head { text-align: center; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 16px; margin-bottom: 22px; }
.receipt-brandrow { display: flex; align-items: center; gap: 12px; justify-content: center; }
.receipt-brandrow > div { text-align: left; }
.receipt-brandrow .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 0 0 3px var(--accent), 0 0 20px -4px var(--accent); }
.receipt-biz { font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.01em; }
.receipt-loc { font-family: 'IBM Plex Mono', monospace; font-size: .71rem; color: var(--muted); }
.rstep h3 { font-size: 1.3rem; }
.rsub { font-size: .86rem; color: var(--muted); margin-bottom: 17px; }
.stars { display: flex; gap: 5px; }
.star { background: none; border: 0; padding: 0 2px; cursor: default; color: rgba(140,176,255,.22); line-height: 1; transition: color .12s, text-shadow .12s; }
button.star { cursor: pointer; }
.star.on { color: var(--cyan); text-shadow: 0 0 16px rgba(70,229,208,.6); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.choice-btn { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 24px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.035); cursor: pointer; color: var(--text); font-size: .9rem; font-weight: 500; text-align: center; }
.choice-btn.good:hover { border-color: var(--accent); background: rgba(70,229,208,.08); }
.choice-btn.bad:hover { border-color: var(--flag); background: rgba(255,111,94,.08); }
.choice-emoji { font-size: 1.9rem; }
.ractions.stacked { flex-direction: column; }
.ractions.stacked .btn { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.chip { border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 999px; padding: 7px 14px; font-size: .83rem; cursor: pointer; color: var(--text); }
.chip:hover { border-color: var(--accent); }
.chip.on { background: rgba(70,229,208,.16); border-color: var(--accent); color: var(--accent); }
.chip.static { cursor: default; display: inline-flex; align-items: center; gap: 7px; }
.chip .x { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0; }
.chip .x:hover { color: var(--flag); }
.rtext, .inp { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: rgba(3,5,12,.6); padding: 11px 13px; font-size: .9rem; resize: vertical; color: var(--text); }
.google-manual { margin: 10px 0; }
.google-manual summary { cursor: pointer; color: var(--muted); font-size: .82rem; }
.google-manual textarea { margin-top: 8px; }
.rtext::placeholder, .inp::placeholder { color: rgba(139,153,182,.6); }
.rtext:focus, .inp:focus { border-color: var(--line-hot); }
.rtext.serif { font-family: 'IBM Plex Sans', sans-serif; line-height: 1.65; }
.rtext.big { font-size: 1.02rem; }
.ractions { display: flex; gap: 9px; margin-top: 18px; }
.ractions .btn { flex: 1; justify-content: center; }
.star-recap { display: flex; align-items: center; gap: 11px; margin: 12px 0 4px; }
.fineprint { font-size: .73rem; color: var(--muted); margin: 13px 0 0; }
.private-offer { border-top: 1px solid var(--line); margin-top: 19px; padding-top: 17px; }
.private-offer strong { color: var(--amber); }
.private-offer p { font-size: .83rem; color: var(--muted); }

/* Optional "how can the owner reach you back" field on the concern flow's
   review screen. */
.contact-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin: 16px 0 4px; }
.review-contact { font-size: .85rem; color: var(--muted); margin: 4px 0 0; }

/* The real-Google-data block on the business's own Analytics tab —
   visually separated from the reviewsai-collected stats below it so the
   two data sources never get confused for one another. */
.google-analytics-block { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 26px; background: rgba(255,255,255,.02); }
.google-analytics-block .pane-head { margin-bottom: 10px; }
.done { text-align: center; }
.done .btn { margin: 6px 4px 0; }
.stamp { display: inline-block; border: 1px solid var(--accent); color: var(--accent); padding: 5px 16px; border-radius: 999px; font-family: 'IBM Plex Mono', monospace; letter-spacing: .14em; margin-bottom: 18px; font-size: .74rem; text-transform: lowercase; box-shadow: 0 0 22px rgba(70,229,208,.22); }
.embedded { max-width: 364px; }
.receipt .btn.primary { background: var(--accent); color: #04121a; box-shadow: 0 0 22px rgba(70,229,208,.32); }

.site { max-width: 1140px; margin: 0 auto; padding: 0 30px 90px; }
.hero { padding: 96px 0 76px; }
.hero-copy { max-width: 760px; }
.lede { font-size: 1.1rem; color: var(--muted); }
.hero-cta { display: flex; gap: 11px; flex-wrap: wrap; margin: 28px 0 0; }
.how-demo { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 46px; padding-top: 44px; border-top: 1px solid var(--line); }
.how-demo-intro { text-align: center; }
.how-demo-intro p { color: var(--muted); font-size: .92rem; }
.how-demo-prompt { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 22px 26px; border: 1px dashed var(--line); border-radius: 14px; flex-wrap: wrap; justify-content: space-between; }
.how-demo-prompt p { margin: 0; color: var(--muted); font-size: .92rem; }
.band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.band-item { background: rgba(10,14,28,.72); padding: 22px; }
.band-item strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.7rem; letter-spacing: -.035em; color: var(--cyan); }
.band-item span { font-size: .82rem; color: var(--muted); }
.how, .features, .analytics-promo, .compare, .pricing, .faq { padding: 78px 0 0; }
.steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); }
.steps li { display: flex; gap: 17px; }
.step-n { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-hot); background: rgba(70,229,208,.08); color: var(--cyan); display: grid; place-items: center; font-family: 'IBM Plex Mono', monospace; font-size: .84rem; }
.steps p { font-size: .91rem; color: var(--muted); margin: 0; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.feat { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); }
.feat h3 { color: var(--cyan); }
.feat p { font-size: .89rem; color: var(--muted); margin: 0; }
.promo-panel { position: relative; margin-top: 34px; border: 1px solid var(--line); border-radius: 20px; padding: 30px 32px 10px; background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 45%, rgba(6,9,18,.2)); backdrop-filter: blur(14px); }
.promo-badge { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); background: rgba(255,196,107,.12); border: 1px solid rgba(255,196,107,.3); border-radius: 999px; padding: 5px 12px; margin-bottom: 20px; }
.table-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tbl th, .tbl td { text-align: left; padding: 12px 13px; border-bottom: 1px solid var(--line); }
.tbl th { font-weight: 500; font-size: .78rem; color: var(--muted); letter-spacing: .04em; }
.tbl.big { margin-top: 20px; }
.rowhead { color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.plan { border: 1px solid var(--line); border-radius: 16px; padding: 26px; position: relative; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); }
.plan.featured { border-color: var(--line-hot); box-shadow: 0 0 44px rgba(70,229,208,.12); }
.plan-flag { position: absolute; top: -11px; left: 22px; background: var(--cyan); color: var(--void); font-size: .7rem; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.plan-sub { color: var(--muted); font-size: .84rem; }
.plan-price { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; letter-spacing: -.04em; margin: 14px 0 16px; }
.plan-price span { font-size: .76rem; font-weight: 400; color: var(--muted); margin-left: 7px; letter-spacing: 0; }
.plain { list-style: none; padding: 0; margin: 0 0 20px; }
.plain li { font-size: .87rem; padding: 6px 0 6px 20px; position: relative; color: var(--muted); }
.plain li::before { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 1px; background: var(--cyan); }
.faq-item { border-bottom: 1px solid var(--line); padding: 17px 0; }
.faq-item summary { cursor: pointer; font-weight: 500; font-family: 'Space Grotesk', sans-serif; }
.faq-item summary::marker { color: var(--cyan); }
.faq-item p { margin: 13px 0 0; font-size: .91rem; color: var(--muted); }
.foot { margin-top: 84px; padding-top: 34px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; }
.foot p { font-size: .87rem; color: var(--muted); margin: 5px 0 0; }

.flow-stage { max-width: 940px; margin: 0 auto; padding: 64px 30px; display: grid; grid-template-columns: 1fr auto; gap: 60px; align-items: start; }
.flow-note p { font-size: .95rem; color: var(--muted); }
.flow-note em { color: var(--cyan); font-style: normal; }
.contact-stage { max-width: 900px; margin: 0 auto; padding: 64px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contact-copy .lede { font-size: 1rem; color: var(--muted); }
.contact-panel { --accent: var(--cyan); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 45%, rgba(6,9,18,.2)); backdrop-filter: blur(14px); }
.contact-sent { text-align: center; padding: 12px 4px; }
.contact-sent .rsub { color: var(--muted); font-size: .9rem; margin: 8px 0 20px; }
.fineprint.bad { color: var(--flag); }

.login-stage { max-width: 940px; margin: 0 auto; padding: 70px 30px 100px; display: flex; justify-content: center; }
.login-card { width: 100%; max-width: 420px; border: 1px solid var(--line); border-top: 1px solid var(--line-hot); border-radius: 18px; padding: 34px 32px; background: linear-gradient(180deg, rgba(20,28,52,.75), rgba(9,12,24,.85)); box-shadow: 0 30px 70px rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.login-card.wide { max-width: 720px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 10px; }
.plan-grid > * { min-width: 0; }
.plan-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 6px; position: relative; }
.plan-card.featured { border-color: var(--line-hot); box-shadow: 0 0 30px rgba(70,229,208,.1); }
.plan-card.plan-custom { border-color: var(--violet); box-shadow: 0 0 30px rgba(138,123,255,.12); }
.plan-card h3 { margin: 0; font-size: 1rem; }
.plan-card-price { font-family: 'IBM Plex Mono', monospace; color: var(--cyan); font-size: 1.3rem; margin: 2px 0 4px; }
.plan-card-price span { font-size: .74rem; font-weight: 400; color: var(--muted); margin-left: 6px; }
.plan-card .plain.plan-items { margin-bottom: 10px; }
.plan-card .btn { margin-top: auto; padding-top: 10px; }
.login-head { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.login-tabs { display: flex; gap: 6px; margin: 20px 0 22px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.login-tabs .tab { flex: 1; justify-content: center; border-radius: 7px; }
.login-form .field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.field-row > label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); font-family: 'Space Grotesk', sans-serif; font-weight: 600; }

.dash { display: grid; grid-template-columns: 224px 1fr; min-height: 80vh; }
.side { border-right: 1px solid var(--line); padding: 20px 13px; display: flex; flex-direction: column; gap: 3px; }
.side-account { display: flex; align-items: center; gap: 10px; padding: 8px 6px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.side-account-text { min-width: 0; }
.side-biz { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-email { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #04121a; display: inline-flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; flex: none; }
.avatar-img { background: none; padding: 0; overflow: hidden; }
.avatar-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.side-item { text-align: left; background: none; border: 1px solid transparent; padding: 9px 13px; border-radius: 9px; cursor: pointer; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: 9px; }
.side-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
.side-item.on { background: rgba(70,229,208,.1); border-color: var(--line-hot); color: var(--cyan); font-weight: 500; }
.side-item.logout { margin-top: auto; color: var(--flag); }
.side-item.logout:hover { background: rgba(255,111,94,.08); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flag); box-shadow: 0 0 10px var(--flag); }
.pane { padding: 30px 36px 80px; max-width: 920px; }
.admin-pane { max-width: 1020px; }
.pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.pane-sub { color: var(--muted); font-size: .89rem; margin: 0; }
.save-row { display: flex; align-items: center; gap: 12px; }
.save-msg { font-size: .85rem; font-weight: 500; }
.save-msg.ok { color: var(--cyan); }
.save-msg.bad { color: #ffb3a8; }
.empty { border: 1px dashed var(--line); border-radius: 14px; padding: 36px; text-align: center; color: var(--muted); font-size: .9rem; }
.admin-banner { background: rgba(255,196,107,.12); border: 1px solid var(--amber); color: var(--amber); border-radius: 10px; padding: 10px 14px; font-size: .84rem; margin-bottom: 20px; font-family: 'IBM Plex Mono', monospace; }
.admin-actions { display: flex; gap: 9px; }
.admin-new { margin-bottom: 18px; }
.admin-row-actions { display: flex; gap: 14px; }

/* Admin "Accounts" grid — one card per business, logo-first. */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.acct-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border: 1px solid var(--line); border-radius: 16px; padding: 22px 16px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  color: inherit; font: inherit; position: relative; transition: border-color .15s, transform .1s;
}
.acct-card:hover { border-color: var(--line-hot); transform: translateY(-2px); }
.acct-card-name { font-size: .95rem; }
.acct-card-flag { position: absolute; top: 10px; right: 10px; background: rgba(255,111,94,.16); color: var(--flag); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; }

/* Admin single-business detail view — reuses .field-row/.inp patterns from
   the business's own profile editor so it looks like the same product. */
.admin-detail h3 { margin: 26px 0 10px; font-size: 1rem; }
.admin-detail h3:first-of-type { margin-top: 22px; }
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

/* Platform-wide analytics tab. */
.admin-analytics h3 { margin: 26px 0 12px; font-size: 1rem; }
.admin-subtabs { display: flex; gap: 8px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.subtab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: .88rem; font-weight: 600; padding: 10px 4px 12px; margin-right: 18px; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.subtab.on { color: var(--flag); border-bottom-color: var(--flag); }
.subtab-badge { background: var(--flag); color: #2a0a06; font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.admin-messages { display: flex; flex-direction: column; gap: 12px; }
.msg-card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; cursor: pointer; background: rgba(255,255,255,.015); }
.msg-card.unread { border-color: rgba(255,111,94,.4); background: rgba(255,111,94,.05); }
.msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.msg-date { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--muted); flex: none; }
.msg-body { margin: 0; font-size: .89rem; color: var(--text); white-space: pre-wrap; }
.msg-new { position: absolute; top: 14px; right: 18px; font-family: 'IBM Plex Mono', monospace; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--flag); }
.msg-card.unread .msg-date { display: none; }

.profile-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 26px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); }
.profile-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; }
.profile-meta { color: var(--muted); font-size: .84rem; margin: 2px 0 8px; }
.claim-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: .7rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.claim-badge.on { border-color: var(--line-hot); color: var(--cyan); }
.claim-badge.on::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.label-row label { margin-bottom: 0; }
.hours-grid { display: grid; gap: 8px; }
.hours-row { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.hours-day { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--muted); }
.logo-row { display: flex; align-items: center; gap: 16px; }
.logo-row > div { display: flex; align-items: center; gap: 12px; }
.upload-btn { display: inline-flex; cursor: pointer; }
.bgphoto-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.bgphoto-thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.bgphoto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgphoto-remove { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 999px; border: 0; background: rgba(5,7,14,.75); color: #fff; font-size: .85rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.bgphoto-remove:hover { background: var(--flag); }
.social-edit-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.social-edit-list li { display: flex; align-items: center; gap: 10px; font-size: .85rem; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; }
.recipients-field { margin: 18px 0; }
.recipient-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.recipient-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; }
.social-edit-platform { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cyan); flex: none; }
.social-edit-url { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatches { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 6px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px rgba(255,255,255,.35); }
.swatch-custom { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: none; cursor: pointer; }
.qr-block { display: flex; align-items: center; gap: 20px; }
.qr-block .hint { margin: 0 0 10px; }
.qr-block > svg, .print-strip > svg { flex-shrink: 0; }
.qr-block > div, .print-strip > div { min-width: 0; }
.copylink { display: flex; gap: 8px; margin: 10px 0; max-width: 380px; }
.team-info .copylink, .print-strip .copylink { max-width: none; }
.copylink .inp.mono { flex: 1; min-width: 0; width: auto; font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: var(--muted); padding: 8px 10px; }
.btn.small { padding: 7px 12px; font-size: .78rem; white-space: nowrap; }

.review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.review { border: 1px solid var(--line); border-radius: 14px; padding: 19px 21px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); }
.review.flagged { border-left: 2px solid var(--flag); }
.review.settled { opacity: .55; border-left-color: var(--cyan); }
.review-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.review-author { font-family: 'Space Grotesk', sans-serif; font-weight: 600; display: block; }
.review-meta { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--muted); }
.review-body { font-size: .98rem; line-height: 1.65; margin: 11px 0 15px; color: #d3dcee; }
.reply { background: rgba(3,5,12,.5); border: 1px solid var(--line); border-radius: 11px; padding: 14px; margin-top: 6px; }
.reply-label { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; color: var(--cyan); margin-bottom: 8px; letter-spacing: .05em; }
.reply-actions { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.triage { background: rgba(3,5,12,.5); border: 1px solid var(--line); border-radius: 11px; padding: 15px; margin: 4px 0 11px; }
.triage p { font-size: .87rem; margin: 0 0 9px; color: var(--muted); }
.triage strong { color: var(--text); }
.triage-row { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.sev { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; padding: 3px 10px; border-radius: 999px; border: 1px solid; letter-spacing: .06em; }
.sev.urgent { color: var(--flag); border-color: var(--flag); box-shadow: 0 0 16px rgba(255,111,94,.2); }
.sev.high { color: var(--amber); border-color: var(--amber); }
.sev.normal { color: var(--muted); border-color: var(--line); }
.triage-cat { font-size: .82rem; color: var(--muted); }

.field { margin-bottom: 24px; }
.field label { display: block; font-weight: 600; font-size: .89rem; margin-bottom: 9px; font-family: 'Space Grotesk', sans-serif; }
.hint { font-size: .79rem; color: var(--muted); margin: 7px 0 0; }
.addrow { display: flex; gap: 9px; margin-top: 11px; }
.addrow.wide { flex-wrap: wrap; }
.addrow .inp { flex: 1; min-width: 150px; }
.admin-custom-plan-row td { background: rgba(138,123,255,.05); padding: 16px 12px; }
.inp option { background: var(--panel-solid); }
.chips.editable { margin-bottom: 0; }
.loc-list { list-style: none; padding: 0; margin: 0; }
.loc-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .91rem; }
.muted { color: var(--muted); }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0; }
.team-card { border: 1px solid var(--line); border-radius: 14px; padding: 17px; display: flex; gap: 17px; position: relative; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); }
.rank { position: absolute; top: 11px; right: 15px; font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: var(--cyan); }
.qr { flex: none; border: 1px solid var(--line-hot); border-radius: 8px; padding: 4px; background: #fff; box-shadow: 0 0 24px rgba(70,229,208,.16); }
.team-info { flex: 1; min-width: 0; }
.team-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.team-loc { font-size: .79rem; color: var(--muted); margin-bottom: 11px; }
.team-stats { display: flex; gap: 17px; margin: 0; }
.team-stats dt { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--muted); letter-spacing: .05em; }
.team-stats dd { margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .98rem; }
.print-strip { border: 1px dashed var(--line); border-radius: 14px; padding: 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.print-strip p { font-size: .87rem; color: var(--muted); margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 28px; }
.stat { background: rgba(10,14,28,.8); padding: 17px 19px; }
.stat-n { font-family: 'Space Grotesk', sans-serif; font-size: 1.75rem; font-weight: 700; letter-spacing: -.04em; color: var(--cyan); display: flex; align-items: baseline; gap: 8px; }
.stat-delta { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
.stat-delta.up { color: var(--cyan); }
.stat-delta.down { color: var(--flag); }
.stat-l { font-size: .76rem; color: var(--muted); }
.trend-chart { width: 100%; height: auto; display: block; }
.trend-axis-label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; fill: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-bottom: 28px; }
.bars { display: grid; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 11px; font-size: .83rem; }
.bar-label { width: 28px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
.bar-track { flex: 1; height: 8px; background: rgba(255,255,255,.055); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); border-radius: 999px; box-shadow: 0 0 14px rgba(70,229,208,.4); }
.bar-n { width: 24px; text-align: right; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
.analysis { border-top: 1px solid var(--line-hot); padding-top: 24px; margin-top: 10px; }
.headline { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; line-height: 1.45; letter-spacing: -.02em; }
.cloud { display: flex; flex-wrap: wrap; gap: 9px 20px; align-items: baseline; margin: 8px 0 28px; }
.cloud span { color: var(--cyan); font-family: 'Space Grotesk', sans-serif; }
.improve { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.improve-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.improve-item { background: linear-gradient(120deg, rgba(70,229,208,.06), rgba(138,123,255,.04)); border: 1px solid var(--line-hot); border-radius: 14px; padding: 16px 19px; }
.improve-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.improve-head strong { font-family: 'Space Grotesk', sans-serif; font-size: .98rem; }
.priority-badge { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex: none; }
.priority-badge.high { background: rgba(255,111,94,.16); color: var(--flag); }
.priority-badge.medium { background: rgba(255,196,107,.16); color: var(--amber); }
.priority-badge.low { background: rgba(70,229,208,.14); color: var(--cyan); }
.badge { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge.good { background: rgba(70,229,208,.14); color: var(--cyan); }
.badge.bad { background: rgba(255,111,94,.16); color: var(--flag); }
.badge.info { background: rgba(138,123,255,.14); color: var(--violet); }
.improve-why { font-size: .87rem; color: var(--muted); margin: 0 0 8px; }
.improve-action { font-size: .89rem; margin: 0; }
.improve-action-label { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--cyan); letter-spacing: .05em; text-transform: uppercase; margin-right: 6px; }

.report-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 19px; flex-wrap: wrap; }
.report-to { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .92rem; }
.toggle { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--muted); }
.toggle input { accent-color: var(--cyan); width: 15px; height: 15px; }
.report { border: 1px solid var(--line); border-radius: 14px; margin-top: 24px; overflow: hidden; background: rgba(3,5,12,.5); }
.report header { background: rgba(255,255,255,.04); padding: 15px 19px; border-bottom: 1px solid var(--line); }
.report-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.report-date { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--muted); }
.report-body { margin: 0; padding: 21px 19px; font-family: 'IBM Plex Sans', sans-serif; font-size: .94rem; line-height: 1.7; white-space: pre-wrap; color: #d3dcee; }

/* Public Shop tab — a catalog grid (image + name only) that opens into a
   full-detail view on click, like a normal online store. */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.shop-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px 16px; background: rgba(3,5,12,.5);
  cursor: pointer; color: var(--text); font-family: inherit; transition: border-color .15s, background .15s;
}
.shop-tile:hover { border-color: var(--line-hot); background: rgba(70,229,208,.06); }
.shop-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
.shop-tile-noimg { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px dashed var(--line); }
.shop-tile-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .92rem; }
.shop-tile-badge { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; color: var(--cyan); background: rgba(70,229,208,.12); border-radius: 999px; padding: 3px 10px; }
.shop-detail { max-width: 420px; }
.shop-detail-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-top: 14px; border: 1px solid var(--line); }

.notice { border-radius: 12px; padding: 14px 16px; font-size: .86rem; margin: 15px 0; border: 1px solid var(--line); }
.notice.info { background: rgba(138,123,255,.08); border-color: rgba(138,123,255,.3); }
.notice.info strong { color: var(--violet); }
.notice.bad { background: rgba(255,111,94,.09); border-color: rgba(255,111,94,.35); color: #ffb3a8; }
.notice.good { background: rgba(70,229,208,.09); border-color: rgba(70,229,208,.35); }
.notice.good strong { color: var(--cyan); }
.notice p:last-child { margin-bottom: 0; }
.small { font-size: .78rem; }

.spin-wrap { display: inline-flex; align-items: center; gap: 9px; }
.spin { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } .mark { animation: none; } }

@media (max-width: 900px) {
  .flow-stage, .contact-stage, .split, .steps { grid-template-columns: 1fr; gap: 34px; }
  .band, .stat-row { grid-template-columns: repeat(2, 1fr); }
  .feat-grid, .plans, .team-grid { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 11px; }
  .side-account { border-bottom: 0; border-right: 1px solid var(--line); padding: 4px 14px 4px 4px; margin-bottom: 0; }
  .side-item { white-space: nowrap; }
  .side-item.logout { margin-top: 0; }
  .pane { padding: 24px 20px 64px; }
  .site { padding: 0 20px 64px; }
  .hero { padding: 56px 0 48px; }
  .brand-client { display: none; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---- real QR codes: wrapper keeps the print link under the code ---- */
.qr-wrap { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.qr-wrap .linkish.small { font-size: .74rem; }
.qr-fail { display: flex; align-items: center; justify-content: center; text-align: center; font-size: .72rem; color: #333; }

/* ---- shown only when an autosave actually fails ---- */
.save-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; border: 1px solid var(--flag, #ff6f5e); background: #2a1215; color: #ffd9d4; font-size: .84rem; line-height: 1.4; box-shadow: 0 8px 30px rgba(0,0,0,.5); }

/* printable review cards */
.card-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.card-prev { width: 130px; height: auto; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45); display: block; }
.card-tile .btn { width: 100%; justify-content: center; white-space: nowrap; }
.strip-media { display: flex; align-items: flex-start; gap: 22px; flex: none; }
.print-strip { flex-wrap: wrap; }
.team-grid { grid-template-columns: 1fr !important; }
.team-card { flex-wrap: wrap; }

/* services tab */
.svc { max-width: 1040px; margin: 0 auto; padding: 8px 0 60px; }
.svc-switch { margin-top: 18px; display: inline-flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); margin-bottom: 26px; }
.svc-pill { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 500; padding: 9px 20px; border-radius: 999px; cursor: pointer; }
.svc-pill.on { background: rgba(70,229,208,.14); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(70,229,208,.4); }
.svc-hero { border: 1px solid var(--line); border-radius: 22px; padding: 44px 40px; background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 45%, rgba(6,9,18,.2)); position: relative; overflow: hidden; }
.svc-hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(138,123,255,.28), transparent); pointer-events: none; }
.svc-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin: 0 0 12px; }
.svc-hero h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin: 0 0 16px; max-width: 14em; }
.svc-lede { color: var(--muted); font-size: 1.06rem; line-height: 1.65; max-width: 40em; margin: 0 0 26px; }
.svc-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.svc-fact { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; min-width: 150px; background: rgba(255,255,255,.03); }
.svc-fact strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; color: var(--text); }
.svc-fact span { color: var(--muted); font-size: .84rem; }
.svc-block { margin-top: 44px; }
.svc-block h2 { font-size: 1.6rem; margin-bottom: 18px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.svc-item { border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)); }
.svc-item h3 { font-size: 1.08rem; margin: 8px 0 6px; }
.svc-item p { margin: 0; color: var(--muted); line-height: 1.6; font-size: .94rem; }
.svc-num { font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: var(--cyan); }
.svc-cta { margin-top: 48px; text-align: center; border: 1px solid var(--line-hot); border-radius: 22px; padding: 40px 24px; background: radial-gradient(60% 120% at 50% 0%, rgba(70,229,208,.12), transparent 70%); }
.svc-cta h2 { font-size: 1.5rem; max-width: 22em; margin: 0 auto 10px; }
.svc-cta p { color: var(--muted); margin: 0 0 20px; }
@media (max-width: 720px) { .svc-grid { grid-template-columns: 1fr; } .svc-hero { padding: 30px 22px; } }
.print-strip > div:first-child { flex: 1 1 300px; }
.card-prev { width: 150px; aspect-ratio: 3 / 5; }