/* Storefront: a quiet main street. Morning-grey paper, deep slate teal ink, and one soft painted-sign tint per kind of business. Young Serif for shop-sign headings, Atkinson Hyperlegible (designed for low-vision readers) for everything you read. No grid lines, no bright fills behind light text. */
:root {
  --paper: #eef2f2;
  --sheet: #fbfcfc;
  --ink: #1e2f35;
  --ink-2: #2f5f66;
  --muted: #55676c;
  --rule: #d2dcdd;
  --chip: #e2eaea;
  --accent: #2f5f66;
  --on-accent: #f4f8f7;
  --panel: #23393f;
  --on-panel: #e7eeed;
  --ph-bg: #f3e8c4;
  --ph-ink: #1e2f35;
  --t-sage: #dbe8d5;
  --t-peach: #f6dfcf;
  --t-lilac: #e5def0;
  --t-sky: #d7e6f0;
  --t-butter: #f3e9c8;
  --t-rose: #f2dde0;
  --t-mint: #d5ece4;
  --t-sand: #e9e2d6;
  --t-ink: #1e2f35;
  --logo-wall: #f3e9c8;
  --logo-awning: #2f5f66;
  --logo-stripe: #a9cfc9;
  --logo-window: #fbfcfc;
  --logo-ink: #1e2f35;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141c1f; --sheet: #1a2428; --ink: #e2eae9; --ink-2: #94c3c6; --muted: #9caeb0; --rule: #2b393d; --chip: #213035;
    --accent: #94c3c6; --on-accent: #10191c; --panel: #1d2a2e; --on-panel: #e2eae9; --ph-bg: #4a4330; --ph-ink: #f1ead6;
    --t-sage: #26332a; --t-peach: #3a2d26; --t-lilac: #2f2a3a; --t-sky: #23303a; --t-butter: #37321f; --t-rose: #3a2a2d; --t-mint: #213530; --t-sand: #332e27; --t-ink: #e2eae9;
    --logo-wall: #e7dcb7; --logo-awning: #94c3c6; --logo-stripe: #3f6f74; --logo-window: #1a2428; --logo-ink: #10191c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141c1f; --sheet: #1a2428; --ink: #e2eae9; --ink-2: #94c3c6; --muted: #9caeb0; --rule: #2b393d; --chip: #213035;
  --accent: #94c3c6; --on-accent: #10191c; --panel: #1d2a2e; --on-panel: #e2eae9; --ph-bg: #4a4330; --ph-ink: #f1ead6;
  --t-sage: #26332a; --t-peach: #3a2d26; --t-lilac: #2f2a3a; --t-sky: #23303a; --t-butter: #37321f; --t-rose: #3a2a2d; --t-mint: #213530; --t-sand: #332e27; --t-ink: #e2eae9;
  --logo-wall: #e7dcb7; --logo-awning: #94c3c6; --logo-stripe: #3f6f74; --logo-window: #1a2428; --logo-ink: #10191c; color-scheme: dark;
}

body { background: var(--paper); line-height: 1.65; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.005em; }
.eyebrow { font: 700 0.82rem/1.3 var(--body); letter-spacing: 0.08em; color: var(--ink-2); }
a:focus-visible, button:focus-visible, input:focus-visible { outline-color: var(--ink-2); }

/* Header: a calm band with the shop logo. */
.sponsorbar { background: var(--chip); color: var(--ink); }
.sponsorbar .cta { color: var(--ink-2); text-decoration: underline; }
header.site { border-bottom: 1px solid var(--rule); background: var(--sheet); }
.logo { flex: 0 0 auto; }
.brand b { font: 400 1.4rem/1 var(--display); letter-spacing: 0; }
nav.top a { border-radius: 8px; }
nav.top a.pill { background: var(--accent); color: var(--on-accent); border-radius: 8px; }

.btn { border-radius: 8px; font-weight: 700; }
.btn.accent { background: var(--accent); color: var(--on-accent); }
.signup input { border-radius: 8px; border: 1.5px solid var(--rule); background: var(--sheet); }
.signup input:focus { border-color: var(--ink-2); }
.ph { background: var(--ph-bg); color: var(--ph-ink); }

/* Home hero: headline on the left, the sign-up card on the right like a sign in the window. */
.hero-split { align-items: stretch; padding-block: 48px 24px; }
.hero > .hero-text { flex: 3 1 520px; }
.hero h1 { font-weight: 400; font-size: clamp(2.4rem, 5.4vw, 4.3rem); line-height: 1.04; letter-spacing: -0.01em; margin-top: 14px; }
.hero h1 mark { background: none; color: var(--ink-2); padding: 0; font-style: normal; }
.hero .lede { color: var(--muted); font-size: 1.18rem; }
.hero > .hero-sign { flex: 2 1 320px; min-width: 0; align-self: center; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.hero-sign h2 { font-size: 1.45rem; line-height: 1.2; }
.hero-sign > p { color: var(--muted); font-size: 0.98rem; }
.hero-sign form { margin-top: 6px; }
.hero-sign .fine { font-size: 0.85rem; color: var(--muted); }

/* Find your business: one painted sign per trade. */
.trades-sec { padding-block: 32px 56px; }
.headrow h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -0.01em; }
.headnote { color: var(--muted); }
.trades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; margin-top: 24px; }
.trade { background: var(--t-sand); color: var(--t-ink); border-radius: 14px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.t-home-services { background: var(--t-sky); }
.t-cleaning { background: var(--t-mint); }
.t-salons-beauty { background: var(--t-rose); }
.t-food-drink { background: var(--t-peach); }
.t-retail { background: var(--t-butter); }
.t-fitness { background: var(--t-lilac); }
.t-auto { background: var(--t-sand); }
.t-pets { background: var(--t-sage); }
.trade-head { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.trade-head .ico { flex: 0 0 auto; width: 44px; height: 44px; padding: 9px; border-radius: 50%; background: var(--sheet); color: var(--ink-2); }
.trade-head b { display: block; font: 400 1.2rem/1.2 var(--display); }
.trade-head small { font-size: 0.85rem; opacity: 0.8; }
.trade-head:hover b { text-decoration: underline; }
.trade > p { font-size: 0.93rem; line-height: 1.5; opacity: 0.85; }
.trade ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid color-mix(in srgb, var(--t-ink) 18%, transparent); }
.trade li a { display: block; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--t-ink) 12%, transparent); text-decoration: none; font-size: 0.95rem; line-height: 1.4; }
.trade li:last-child a { border-bottom: 0; }
.trade li a:hover { text-decoration: underline; }

/* This week's setup, drawn as a job ticket with a torn edge. */
.ticket-band { padding-block: 8px 64px; }
.ticket { max-width: 900px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.ticket-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 22px; background: var(--chip); font: 500 0.8rem var(--mono); letter-spacing: 0.04em; color: var(--ink-2); border-bottom: 2px dashed var(--rule); }
.ticket-body { display: flex; flex-wrap: wrap; gap: 24px 36px; padding: 24px 22px 26px; }
.ticket-main { flex: 3 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ticket-main .for { font-weight: 700; font-size: 0.85rem; color: var(--ink-2); }
.ticket-main h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15; }
.ticket-main > p { color: var(--muted); }
.ticket-main .btn { margin-top: 8px; }
.ticket-facts { flex: 2 1 240px; min-width: 0; margin: 0; display: grid; gap: 0; align-content: start; }
.ticket-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--rule); }
.ticket-facts dt { font: 500 0.78rem var(--mono); color: var(--muted); padding-top: 2px; }
.ticket-facts dd { margin: 0; font-size: 0.95rem; }

/* How to use a setup: a quiet panel. */
.how { background: var(--panel); color: var(--on-panel); }
.how .eyebrow { color: var(--on-panel); opacity: 0.8; }
.how h2 { letter-spacing: -0.01em; margin-top: 8px; }
.how li { border-top: 1px solid color-mix(in srgb, var(--on-panel) 30%, transparent); }
.how li .mono { color: var(--on-panel); opacity: 0.75; font-size: 0.85rem; }

/* Every setup: a plain list, one row each. */
.search input { border-radius: 8px; }
.chip { border-radius: 8px; }
.chip[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.grid-cards { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta meta" "title tags" "sum tags"; gap: 4px 24px; padding: 16px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.card:hover { transform: none; background: var(--sheet); }
.card .meta { grid-area: meta; justify-content: flex-start; gap: 14px; font-size: 0.75rem; }
.card h3 { grid-area: title; font: 400 1.18rem/1.3 var(--display); letter-spacing: 0; }
.card p { grid-area: sum; font-size: 0.93rem; }
.card .tags { grid-area: tags; margin: 0; align-self: center; justify-content: flex-end; }
.card .tags span { border-radius: 6px; }
@media (max-width: 640px) {
  .card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "sum" "tags"; }
  .card .tags { justify-content: flex-start; margin-top: 6px; }
}
.all-sec { padding-block: 64px 24px; }

.sponsor-wrap { padding-block: 32px 72px; }
.sponsor-tease { border: 1px solid var(--rule); border-radius: 14px; background: var(--sheet); margin-top: 0; }
.tier { border-radius: 10px; background: var(--paper); }
.band { background: var(--t-butter); color: var(--t-ink); border-radius: 14px; }
.band .signup input { border-color: var(--rule); background: var(--sheet); color: var(--ink); }
.band .btn { background: var(--accent); color: var(--on-accent); }

/* Setup pages. */
.pb h1, .page h1 { font-weight: 400; letter-spacing: -0.01em; }
.pb .lede { color: var(--muted); }
.strip { border-block: 1px solid var(--rule); }
.prompt { border-radius: 14px; }
.prompt .ph { background: color-mix(in srgb, var(--ph-bg) 85%, transparent); color: var(--ph-ink); }
ol.steps li::before { content: counter(s); font: 400 1.2rem var(--display); color: var(--ink-2); }
.risk { border-radius: 12px; }
.risk .tag { background: var(--chip); color: var(--ink-2); }
.side { border-radius: 12px; }
.side.sub { background: var(--t-butter); color: var(--t-ink); }
.side.sub .signup input { border-color: var(--rule); background: var(--sheet); color: var(--ink); }
.side.sub .btn { background: var(--accent); color: var(--on-accent); }
footer.site { background: var(--sheet); }

/* Site B theme picked by T on 2026-10-13: Workshop, tuned for signups. Layer this after src/themes/storefront.css (build with --theme=storefront, then append this file to theme.css). */
/* Variant: Workshop. Warm white, each trade gets one deep color as a solid header strip: navy, rust, olive, plum. */
:root{--paper:#f5f2ed;--sheet:#ffffff;--ink:#22252a;--ink-2:#a24a24;--muted:#5d5f63;--rule:#dcd7cf;--chip:#ebe6de;--accent:#22344f;--on-accent:#ffffff;--logo-awning:#a24a24;--logo-stripe:#22344f}
.trade{background:var(--sheet)!important;border:1px solid var(--rule);padding-top:0;overflow:hidden}
.trade-head{margin:0 -20px;padding:16px 20px;color:#fff;background:#22344f}
.t-cleaning .trade-head,.t-auto .trade-head{background:#4f5d2f}
.t-salons-beauty .trade-head,.t-fitness .trade-head{background:#5b2f4a}
.t-food-drink .trade-head,.t-retail .trade-head{background:#a24a24}
.trade-head .ico{background:rgba(255,255,255,.15);color:#fff}
/* Workshop, tuned for signups: the offer is the loudest thing above the fold, and it repeats after the trades. */
.hero-split{padding-block:40px 32px}
.hero h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.hero h1 mark{color:#a24a24}
.hero>.hero-sign{background:#22344f;color:#f3f1ec;border:0;border-radius:6px;padding:30px;box-shadow:0 18px 40px -24px rgba(34,52,79,.6)}
.hero-sign h2{color:#fff;font-size:1.7rem}
.hero-sign>p,.hero-sign .fine{color:#c9d2df}
.hero-sign .signup input{border:0;background:#fff;font-size:1.05rem;padding:16px 18px}
.hero-sign .btn.accent{background:#c45a2c;color:#fff;font-size:1.08rem;padding:16px 24px;width:100%}
.hero-sign .btn.accent:hover{background:#a24a24}
.hero-sign form{flex-direction:column}
.trade-head{transition:none}
.trade:hover{outline:2px solid #22344f;outline-offset:2px}
.ticket-top{background:#a24a24;color:#fff;border-bottom:0}
nav.top a.pill{background:#c45a2c}
.hero-sign .signup input{flex:0 0 auto}
/* Phones: get the signup box onto the first screen. */
@media (max-width:640px){
  .sponsorbar .label{display:none}
  .sponsorbar{font-size:.8rem}
  header.site .wrap{flex-wrap:nowrap;gap:10px}
  .brand b{font-size:1.05rem}
  nav.top a:not(.pill){display:none}
  nav.top a.pill{padding:10px 14px;font-size:.9rem;white-space:nowrap}
  .hero-split{padding-block:20px 20px}
  .hero .eyebrow{display:none}
  .hero h1{font-size:2.3rem;margin-top:0}
  .hero .lede{font-size:1rem;margin-bottom:0}
  .hero>.hero-sign{padding:22px}
  .hero-sign>h2+p{display:none}
}