/* WebMade app design system: the same product as webmade.io (design kit 2026-10-12; tokens copied from
   sites/webmade-io/site/styles.css, hq.css, genesis.css). Shared by My Business, onboarding, the
   payment page, booking and Partners. */
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --bg: #05050c; --bg2: #0b0a18;
  --panel: rgba(255,255,255,.045); --panel2: rgba(255,255,255,.08); --line: rgba(255,255,255,.1);
  --ink: #f4f1ff; --mute: #a49ccc; --dim: #6f6896;
  --cyan: #5fe3d8; --violet: #8b5cf6; --pink: #e879f9; --good: #4ade80; --warn: #fbbf24; --bad: #fb7185;
  --grad: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--pink));
  --wm-cta: linear-gradient(180deg, #5ce7fa, #37d7ff);
  --radius: 22px;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Genesis-world accents for glass over the key art */
  --hi: #7ff0ff; --soft: #dbe3ff; --soft2: #c9d3f7; --label: #8fa0d6; --navy: rgba(8,14,44,.64); --glassline: rgba(140,185,255,.18);
  /* names the existing app pages use */
  --text: var(--ink); --muted: #b7b0da; --accent: var(--cyan); --card: rgba(8,12,34,.8);
  /* The signature cyan glow on every clickable button (Owner 21:21 UTC 2026-10-26). One set, shared with webmade.io's
     kit.css: full for filled buttons, rim for glass and outline buttons; hover and focus lift it, a press dims it. */
  /* Every button carries a soft glass sheen (a lit top edge and a faint top glow inside) under its cyan glow; the
     main button per screen gets the full bubble below (Owner 21:39 UTC 2026-10-26). */
  --wm-sheen: inset 0 1px 0 rgba(255,255,255,.26), inset 0 12px 14px -12px rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.28);
  /* The hardware: a fine machined silver edge seated inside the cyan light. */
  --wm-metal: 0 0 0 1px rgba(214,228,242,.42);
  --wm-glow: var(--wm-sheen), var(--wm-metal), 0 0 0 2px rgba(55,215,255,.5), 0 0 14px rgba(55,215,255,.45), 0 0 34px rgba(55,215,255,.25);
  --wm-glow-hover: var(--wm-sheen), var(--wm-metal), 0 0 0 2px rgba(55,215,255,.75), 0 0 20px rgba(55,215,255,.63), 0 0 48px rgba(55,215,255,.35);
  --wm-glow-press: 0 0 0 1px rgba(55,215,255,.45), 0 0 8px rgba(55,215,255,.3), 0 0 18px rgba(55,215,255,.14);
  --wm-glow-rim: var(--wm-sheen), var(--wm-metal), 0 0 0 2px rgba(55,215,255,.38), 0 0 12px rgba(55,215,255,.28);
  --wm-glow-rim-hover: var(--wm-sheen), var(--wm-metal), 0 0 0 2px rgba(55,215,255,.65), 0 0 18px rgba(55,215,255,.42), 0 0 34px rgba(55,215,255,.16);
  --wm-glow-off: 0 0 0 1px rgba(55,215,255,.18);
  /* Buttons inside dense lists: the same signature, turned down. */
  --wm-glow-quiet: inset 0 1px 0 rgba(255,255,255,.18), inset 0 10px 12px -10px rgba(255,255,255,.12), 0 0 0 1px rgba(214,228,242,.26), 0 0 0 2px rgba(55,215,255,.22), 0 0 8px rgba(55,215,255,.14);
  /* The one main button per screen is a cyan glass bubble: a bright top highlight, a light rim and a glow from
     beneath (Owner 21:36 UTC 2026-10-26). Every other button keeps the plain glow or the rim. */
  --wm-bubble: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.16) 47%, rgba(255,255,255,0) 53%), radial-gradient(120% 90% at 50% 125%, rgba(200,252,255,.6), rgba(200,252,255,0) 62%), linear-gradient(180deg, #5ce7fa, #2cc3ee);
  --wm-bubble-edge: inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.32), inset 0 -3px 8px rgba(0,70,110,.32);
  --wm-glow-cta: var(--wm-metal), 0 0 0 2px rgba(55,215,255,.8), 0 0 18px rgba(55,215,255,.6), 0 0 46px rgba(55,215,255,.34), 0 10px 26px -10px rgba(0,0,0,.7);
  --wm-glow-cta-hover: var(--wm-metal), 0 0 0 2px rgba(120,235,255,.95), 0 0 24px rgba(55,215,255,.78), 0 0 64px rgba(55,215,255,.45), 0 12px 30px -10px rgba(0,0,0,.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 16px; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--hi); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Only shapeless elements (text links) get the soft corner; a pill keeps its own shape when focused. */
:where(:focus-visible) { border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.05; }
h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; margin: 14px 0 10px; }
h2 { font-weight: 700; }
h3 { font-weight: 600; letter-spacing: -.01em; }
p { color: var(--muted); margin: 8px 0; }
strong { color: var(--ink); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 12px/1.2 var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--cyan); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
.lede { color: var(--soft2); font-size: clamp(17px, 1.6vw, 19px); max-width: 620px; }

/* ---- the key art (the planet): served by viewport width, never the 3840 to a phone ---- */
.keyart { position: fixed; inset: 0; z-index: -2; display: block; background: radial-gradient(1200px 700px at 70% 30%, #21124a 0%, var(--bg) 62%); }
.keyart img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.keyart::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(5,5,12,.45) 0%, rgba(5,5,12,.78) 75%), linear-gradient(180deg, rgba(5,5,12,.55), rgba(5,5,12,.15) 30%, rgba(5,5,12,.85)); }
.keyart.deep::after { background: linear-gradient(180deg, rgba(5,5,12,.8), rgba(5,5,12,.92) 45%, rgba(5,5,12,.97)); }

/* ---- surfaces ---- */
.glass { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.deep-glass { background: var(--navy); border: 1px solid var(--glassline); border-radius: 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.card, .dialog-glass { background: rgba(8,12,34,.8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 0 0 1px rgba(140,185,255,.24), inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.6); border-radius: 20px; }
.card { width: 100%; max-width: 480px; padding: 36px 28px 30px; text-align: center; }
.card.wide { max-width: 760px; }
.weby { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(95,227,216,.6), 0 0 26px rgba(95,227,216,.28); background: #0c1a4d; }
.note { font-size: 15px; color: var(--muted); overflow-wrap: anywhere; }

/* ---- forms ---- */
form { display: grid; gap: 10px; margin-top: 20px; text-align: left; }
label { font-size: 14px; font-weight: 600; color: #a9b8ea; }
input, select, textarea { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(140,185,255,.28); background: rgba(255,255,255,.06); color: var(--ink); font: 400 17px/1.4 var(--body); }
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--hi) 50%), linear-gradient(135deg, var(--hi) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
select option { background: #0b1030; color: var(--ink); }
input::placeholder, textarea::placeholder { color: #8f97c4; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: transparent; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; accent-color: var(--cyan); }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.check input { width: 20px; }

/* ---- buttons: pills, 52 px; the one primary action carries the gradient ---- */
button, .btn, label.button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 650 16px/1.2 var(--body); letter-spacing: -.005em; color: #0a0815; background: var(--ink); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, filter .25s, border-color .25s; text-align: center; }
button:hover, .btn:hover, label.button:hover, a.button:hover { transform: translateY(-2px); }
/* Single-accent cyan: every primary button is the same solid cyan as checkout (Owner's one-accent system). */
.glow, button.glow, a.button.glow, .btn-glow { background: var(--wm-cta); color: #04202a; }
.glow:hover, .btn-glow:hover { filter: brightness(1.08); }
.ghost, button.ghost, a.button.ghost, label.button.ghost, .btn-ghost { background: rgba(255,255,255,.04); color: var(--ink); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ghost:hover, .btn-ghost:hover { border-color: rgba(95,227,216,.6); }
.violet { background: linear-gradient(180deg, #8b5cf6, #6d3df0); color: #fff; }
button.small, .button.small, .btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
button[disabled] { opacity: .55; cursor: progress; transform: none; }
.link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--hi); font-weight: 600; }

/* ---- booking page (customers of a business) ---- */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.slots button { background: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--glassline); font-weight: 500; padding: 0 12px; }
/* Phones: two slots across; an odd last slot spans the row instead of sitting alone (Owner 08:38 UTC 2026-10-16). */
@media (max-width: 480px) { .slots { grid-template-columns: 1fr 1fr; } .slots button:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.actions { display: grid; gap: 10px; margin-top: 22px; }

/* ---- brand bar: every screen carries the headquarters positioning ---- */
.brandbar { position: fixed; inset: 12px 12px auto; z-index: 40; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 18px 8px 10px; border-radius: 18px; border: 1px solid rgba(140,185,255,.24); background: linear-gradient(180deg, rgba(20,34,90,.62), rgba(8,14,44,.55)); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 40px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.brandbar .mark { width: 40px; height: 40px; display: block; filter: drop-shadow(0 0 10px rgba(96,120,255,.55)); }
.brandbar b { font: 700 19px/1 var(--display); letter-spacing: -.02em; color: #fff; }
.brandbar .tag { margin: 0 0 0 auto; font-size: 14px; color: var(--soft2); text-align: right; }
@media (max-width: 560px) { .brandbar { inset: 8px 8px auto; padding: 6px 12px 6px 8px; } .brandbar .tag { font-size: 12.5px; line-height: 1.25; max-width: 17ch; } }

@media (max-width: 480px) { .card { padding: 28px 18px 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* 48-hour money-back guarantee badge (Owner 21:35 UTC 2026-10-14): websites only, never Touch. */
.mbg { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 10px 18px 10px 10px; border-radius: 24px; border: 1px solid rgba(240,200,110,.5); background: linear-gradient(180deg, rgba(60,46,14,.5), rgba(20,14,4,.6)); color: #fff6df; font-size: 14px; line-height: 1.35; }
.mbg .mbg-coin { flex: none; width: 92px; height: 92px; filter: drop-shadow(0 4px 14px rgba(240,190,80,.35)); }
.mbg b { color: #fff; font-weight: 700; }
.mbg[hidden] { display: none; }
@media (max-width: 480px) { .mbg .mbg-coin { width: 76px; height: 76px; } }

/* Referral code box and the quiet "Referred by" line (Owner 22:12–23:12 UTC 2026-10-14). */
.ref-box { border: 1px solid rgba(80, 220, 255, .55); border-radius: 18px; padding: 16px; margin: 16px 0; background: rgba(40, 170, 220, .08); box-shadow: 0 0 24px rgba(80, 220, 255, .18); }
.ref-box > label:first-child { display: block; font-weight: 600; margin-bottom: 10px; }
.ref-box input { text-transform: uppercase; letter-spacing: .08em; }
.ref-on { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; opacity: .9; font-size: .95rem; }
.ref-on i { color: #3ad07a; font-style: normal; font-weight: 700; }
.ref-box .phone-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 480px) { .ref-box .phone-row { grid-template-columns: 1fr; } }
.ref-on[hidden], .ref-box[hidden] { display: none; }
/* The job bill on the customer's booking page */
.bill { display: grid; gap: 10px; margin: 14px 0; padding: 16px; border: 1px solid rgba(127,240,255,.3); border-radius: 16px; }
.bill h2 { margin: 0; font-size: 1.2em; }
.bill ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.bill li { display: flex; justify-content: space-between; gap: 12px; }
.bill .button { justify-self: start; }

/* Privacy/Terms links on every app page (Plaid: the privacy policy is shown inside the app). */
.legal-foot { text-align: center; font-size: 13px; opacity: .72; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); }
.legal-foot a { color: inherit; }
.privacy-line a { color: inherit; text-decoration: underline; }
/* Back, top left beside the logo on every app page (public/back.js) */
.brandbar .wm-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px 0 8px; border-radius: 12px; border: 1px solid rgba(127,240,255,.32); background: rgba(5,12,34,.45); color: #e9f0ff; font: 600 14px/1 var(--display, system-ui); text-decoration: none; white-space: nowrap; }
.brandbar .wm-back span { font-size: 22px; line-height: 1; margin-top: -2px; color: #7ff0ff; }
.brandbar .wm-back:hover { background: rgba(127,240,255,.12); border-color: rgba(127,240,255,.6); }
.brandbar .wm-back:focus-visible { outline: 2px solid #7ff0ff; outline-offset: 2px; }
@media (max-width: 560px) { .brandbar .wm-back { min-height: 36px; padding: 0 10px 0 6px; font-size: 13px; } }
/* Small phones with the Back button: the bar keeps Back and the WebMade name only, so the tagline never wraps to three lines. */
@media (max-width: 420px) { .brandbar:has(.wm-back) .tag { display: none; } }

/* ---- signature glow: filled buttons glow in full, glass and outline buttons at the rim. Dense rows, plain text links,
   fields and status pills stay quiet, so the glow keeps meaning "you can press this". Kept at one class of weight so a
   page stylesheet can restyle its own buttons with these same tokens. ---- */
:is(button, .btn, .button, .glow, .btn-glow, .violet) { box-shadow: var(--wm-glow); }
:is(.ghost, .btn-ghost, .slots button, .brandbar .wm-back) { box-shadow: var(--wm-glow-rim); }
:is(button, .btn, .button, .glow, .btn-glow, .violet):is(:hover, :focus-visible) { box-shadow: var(--wm-glow-hover); }
:is(.ghost, .btn-ghost, .slots button, .brandbar .wm-back):is(:hover, :focus-visible), .slots button[aria-pressed=true] { box-shadow: var(--wm-glow-rim-hover); }
:is(button, .btn, .button, .brandbar .wm-back):active { box-shadow: var(--wm-glow-press); }
:is(button, .btn, .button):is(:disabled, [aria-disabled=true]), :is(button, .btn, .button):is(:disabled, [aria-disabled=true]):is(:hover, :active, :focus-visible) { box-shadow: var(--wm-glow-off); }
.glow:not(:disabled, [aria-disabled=true]), .btn-glow:not(:disabled, [aria-disabled=true]) { background: var(--wm-bubble); color: #04202a; box-shadow: var(--wm-bubble-edge), var(--wm-glow-cta); }
.glow:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible), .btn-glow:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) { box-shadow: var(--wm-bubble-edge), var(--wm-glow-cta-hover); }
.glow:not(:disabled, [aria-disabled=true]):active, .btn-glow:not(:disabled, [aria-disabled=true]):active { box-shadow: inset 0 1px 3px rgba(0,60,90,.4), var(--wm-glow-press); }
/* The film player's own controls: the play dots are small cyan bubbles, Close and the poster frames take the rim. */
body button.wm-tut-link i, body .wm-tut-pic i { background: var(--wm-bubble); color: #04202a; box-shadow: var(--wm-bubble-edge), var(--wm-glow-rim); }
body .wm-tut .wm-tut-x { border-radius: 999px; box-shadow: var(--wm-glow-rim); }
body .wm-tut .wm-tut-x:is(:hover, :focus-visible) { box-shadow: var(--wm-glow-rim-hover); }
body button.wm-tut-thumb .wm-tut-pic { box-shadow: var(--wm-glow-rim); }
body button.wm-tut-thumb:is(:hover, :focus-visible) .wm-tut-pic { box-shadow: var(--wm-glow-rim-hover); }
.slots button[aria-pressed=true] { border-color: var(--cyan); }
@media (prefers-reduced-motion: reduce) { :is(button, .btn, .button, .brandbar .wm-back) { transition: none; } }
@media (forced-colors: active) { :is(button, .btn, .button, .glow, .ghost, .slots button, .brandbar .wm-back) { box-shadow: none !important; } }