/* WorkForce public site: "Workbench" design (1.15.0) — warm paper, dark slate, brass and green,
   in the same family as darts.ubique-apps.co.uk. Loaded only on public pages, after app.css.
   Fonts are self-hosted (Anton, Barlow, Barlow Condensed — SIL Open Font Licence). */

@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

body.public {
  /* Fixed colours (dark bands look the same in light and dark mode) */
  --wb-sink: #0e0c0a; --wb-slate: #16130f; --wb-slate-2: #221e18; --wb-line-dark: #2e2922;
  --wb-on-dark: #ede6d6; --wb-on-dark-muted: #c0b7a6;
  --wb-brass: #c6a344; --wb-gold: #e8c15a; --wb-green: #1b7f5a; --wb-green-d: #146348; --wb-red: #c8283a;
  /* Page colours (switch with the theme) */
  --wb-paper: #ede6d6; --wb-paper-2: #e0d6c0; --wb-paper-3: #d3c7ac; --wb-card: #f6f1e5;
  --wb-text: #17150f; --wb-muted: #4a4339;
  --bg: var(--wb-paper); --surface: var(--wb-card); --surface-2: var(--wb-paper-2); --ink: var(--wb-text); --muted: var(--wb-muted);
  --line: var(--wb-paper-3); --accent: #146348; --accent-hover: #0f4d38; --accent-ink: #ffffff; --accent-soft: #e3eadb;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --cond: "Barlow Condensed", "Barlow", sans-serif;
  background: var(--wb-paper); color: var(--wb-text); font-family: var(--font); font-size: 17px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.public { --wb-paper: #12100d; --wb-paper-2: #1a1713; --wb-paper-3: #3a342b; --wb-card: #1d1a15; --wb-text: #ede6d6; --wb-muted: #c0b7a6; --accent: #5cc79a; --accent-hover: #7fd7b1; --accent-ink: #0e0c0a; --accent-soft: #1d2a22; }
}
:root[data-theme="dark"] body.public { --wb-paper: #12100d; --wb-paper-2: #1a1713; --wb-paper-3: #3a342b; --wb-card: #1d1a15; --wb-text: #ede6d6; --wb-muted: #c0b7a6; --accent: #5cc79a; --accent-hover: #7fd7b1; --accent-ink: #0e0c0a; --accent-soft: #1d2a22; }

.public h1, .public h2, .public .section-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.public h3 { font-weight: 700; }
.public a { color: var(--accent); }
.public .eyebrow { font-family: var(--cond); font-weight: 700; font-size: .85rem; letter-spacing: .24em; text-transform: uppercase; color: var(--wb-muted); }

/* Header */
.public .site-header { position: sticky; top: 0; z-index: 50; background: rgba(14, 12, 10, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--wb-line-dark); }
.public .brand { color: var(--wb-on-dark); font-family: var(--display); font-weight: 400; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; }
.public .brand:hover { color: var(--wb-on-dark); }
.public .brand-mark { background: var(--wb-brass); border-radius: 3px; width: 30px; height: 30px; }
.public .brand-mark::before { background: var(--wb-sink); left: 14px; top: 7px; height: 9px; }
.public .brand-mark::after { background: var(--wb-sink); left: 14px; top: 14px; width: 8px; }
.public .site-nav > a:not(.btn) { color: var(--wb-on-dark-muted); font-family: var(--cond); font-weight: 700; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.public .site-nav > a:not(.btn):hover { color: var(--wb-gold); }
.public .site-header .theme-toggle, .public .site-header button { color: var(--wb-on-dark); border-color: rgba(237, 230, 214, .3); background: transparent; }

/* Buttons */
.public .btn { background: var(--wb-green); color: #fff; border: 1.5px solid var(--wb-green); border-radius: 3px; font-family: var(--cond); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .2s, gap .2s; }
.public .btn:hover { background: var(--wb-green-d); border-color: var(--wb-green-d); color: #fff; }
.public .btn-ghost { background: transparent; color: var(--wb-text); border: 1.5px solid currentColor; }
.public .btn-ghost:hover { background: var(--wb-text); color: var(--wb-paper); border-color: var(--wb-text); }
.public .btn:focus-visible, .public a:focus-visible { outline: 3px solid var(--wb-gold); outline-offset: 3px; }

/* Hero */
.public .hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 90% 80% at 85% 10%, #2c261e 0%, var(--wb-slate) 60%); color: var(--wb-on-dark); padding: 80px 0 96px; }
.public .hero .eyebrow { color: var(--wb-brass); }
.public .hero h1 { color: var(--wb-on-dark); font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: .92; margin: 14px 0 22px; }
.public .hero h1 .hl { color: var(--wb-gold); background: linear-gradient(var(--wb-red), var(--wb-red)) 0 94% / 100% .08em no-repeat; }
.public .hero .lead { color: var(--wb-on-dark-muted); }
.public .hero .muted, .public .hero .small { color: #a39a89; }
.public .hero a:not(.btn) { color: var(--wb-on-dark); }
.public .hero .btn-ghost { color: var(--wb-on-dark); border-color: var(--wb-on-dark); background: transparent; }
.public .hero .btn-ghost:hover { color: var(--wb-gold); border-color: var(--wb-gold); background: transparent; }
.public .hero-demo { position: relative; background: #fbf7ee; color: #17150f; border: 0; border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px #3a342b; transform: rotate(-1.5deg); overflow: visible; }
.public .hero-demo::before { content: "Accepted ✓"; position: absolute; left: -16px; top: -18px; background: var(--wb-brass); color: #17150f; padding: 6px 14px 7px; border-radius: 2px; transform: rotate(-5deg); font-family: var(--cond); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .95rem; box-shadow: 0 10px 20px rgba(0, 0, 0, .35); }
.public .hero-demo .demo-head, .public .hero-demo .demo-table th, .public .hero-demo .demo-table td { border-color: #e4dccb; color: #17150f; }
.public .hero-demo .demo-table tfoot td { background: #16130f; color: #ede6d6; }
.public .hero-demo .demo-k, .public .hero-demo .demo-foot { color: #6b6253; }
/* The old orange ruler becomes a brass strip */
.public .ruler { height: 8px; background: var(--wb-brass); }

/* Sections */
.public .section-title { font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin-bottom: 18px; }
.public .steps li { background: var(--wb-card); border: 1px solid var(--line); border-radius: 6px; }
.public .steps .step-n { background: none; color: var(--wb-brass); font-family: var(--display); font-size: 3.2rem; line-height: 1; width: auto; height: auto; padding: 0; }
.public .steps p { color: var(--wb-muted); }
.public .section-alt { background: var(--wb-paper-2); border: 0; }
.public .split > div { padding: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--wb-card); }
.public .split > div:first-child { background: var(--wb-slate); color: var(--wb-on-dark); border-color: var(--wb-line-dark); }
.public .split > div:first-child h2 { color: var(--wb-on-dark); }
.public .split > div:first-child li { color: var(--wb-on-dark-muted); }
.public .split h2 { font-size: 2rem; }
.public .ticks li::before { color: var(--wb-green); }
.public .split > div:first-child .ticks li::before { color: var(--wb-gold); }

/* Pricing */
.public #pricing { background: var(--wb-paper-2); border: 0; }
.public .plan { border: 1px solid var(--line); border-radius: 6px; background: var(--wb-card); box-shadow: none; }
.public .plan h3 { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .95rem; }
.public .plan-price { font-family: var(--display); font-weight: 400; font-size: 2.6rem; }
.public .plan-main { background: var(--wb-slate); color: var(--wb-on-dark); border-color: var(--wb-line-dark); box-shadow: 0 24px 48px rgba(23, 21, 15, .28); }
.public .plan-main h3 { color: var(--wb-gold); }
.public .plan-main li { color: var(--wb-on-dark-muted); }
.public .plan-main .ticks li::before { color: var(--wb-gold); }
.public .plan .btn-ghost { border-color: currentColor; }
.public .plan-main .btn-ghost { color: var(--wb-on-dark); }

/* Questions */
.public .qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px 40px; }
.public .qa h3 { margin: 0 0 6px; font-size: 1.12rem; }
.public .qa p { margin: 0; color: var(--wb-muted); }

/* Call to action */
.public .cta-band { background: var(--wb-slate); color: var(--wb-on-dark); border: 0; border-radius: 6px; border-top: 6px solid var(--wb-brass); }
.public .cta-band h2 { color: var(--wb-on-dark); }
.public .cta-band p { color: var(--wb-on-dark-muted); font-weight: 500; }

/* Footer */
.public .site-footer { background: var(--wb-sink); color: var(--wb-on-dark-muted); border-top: 0; }
.public .site-footer a { color: var(--wb-on-dark); }
.public .site-footer .social a { border-color: rgba(237, 230, 214, .3); color: var(--wb-on-dark); background: transparent; }
.public .site-footer .credit { color: var(--wb-on-dark-muted); }

/* Guide, terms and sign-in pages */
.public .toc, .public .auth-card { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; background: var(--wb-card); }
.public input, .public select, .public textarea { border-radius: 3px; }
.public .alert { border-radius: 3px; }
.public .choice-card { background: var(--wb-card); border: 1px solid var(--line); border-radius: 6px; }
.public .choice-card:has(input:checked) { border-color: var(--wb-green); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--wb-green); }

@media (max-width: 520px) {
  .public .header-inner { gap: 8px; }
  .public .brand { font-size: 1.1rem; letter-spacing: .02em; gap: 8px; }
  .public .brand-mark { width: 26px; height: 26px; }
  .public .brand-mark::before { left: 12px; top: 6px; }
  .public .brand-mark::after { left: 12px; top: 12px; width: 7px; }
  .public .site-nav { gap: 10px; }
  .public .site-nav > a:not(.btn) { letter-spacing: .08em; }
  .public .hero { padding: 40px 0 64px; }
}
@media (max-width: 380px) { .public .site-nav > a[href="/login"] { display: none; } }

/* Who it's for, RAMS callout, package pricing */
.public .trades { list-style: none; padding: 0; margin: 24px 0 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.public .trades li { background: var(--wb-card); border: 1px solid var(--line); border-radius: 6px; padding: 20px 22px; }
.public .trades h3 { margin: 0 0 6px; font-family: var(--cond); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; }
.public .trades h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--wb-brass); margin-right: 8px; vertical-align: 1px; }
.public .trades p { margin: 0; color: var(--wb-muted); font-size: .97rem; }
.public .callout-rams { background: var(--wb-slate); color: var(--wb-on-dark); padding: 36px 40px; border-radius: 6px; border-left: 8px solid var(--wb-brass); }
.public .callout-rams h2 { color: var(--wb-gold); margin: 0 0 12px; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.public .callout-rams p { margin: 0; color: var(--wb-on-dark-muted); font-size: 1.05rem; max-width: 820px; }
.public .pricing-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; }
.public .pricing-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; }
.public .pricing .plan { display: flex; flex-direction: column; }
.public .pricing .plan .ticks { flex: 1; }
@media (max-width: 960px) {
  .public .trades { grid-template-columns: 1fr 1fr; }
  .public .pricing-3, .public .pricing-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .public .trades, .public .pricing-3, .public .pricing-4 { grid-template-columns: 1fr; }
  .public .callout-rams { padding: 26px 22px; }
}
.public .pricing-4 .plan-price, .public .pricing-3 .plan-price { font-size: 2rem; }
.public .pricing-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1320px; }
.public .pricing-5 .plan-price { font-size: 1.8rem; }
@media (max-width: 1200px) { .public .pricing-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 960px) { .public .pricing-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .public .pricing-5 { grid-template-columns: 1fr; } }
.public .addons { max-width: 900px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.public .addons .plan h3 { margin-top: 0; }
.public .addons-head { text-align: center; margin: 44px 0 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.8rem; letter-spacing: .01em; }
@media (max-width: 600px) { .public .addons { grid-template-columns: 1fr; } }

/* Smaller buttons inside cards: less letter spacing so the label fits on one or two lines */
.public .plan .btn, .public .btn-sm { letter-spacing: .07em; line-height: 1.15; padding: 10px 14px; height: auto; text-align: center; }
.public .cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 6px; }
.public .split > div:first-child .ticks li::before { color: var(--wb-gold) !important; }

/* 1.17.3: "1. Quote it. 2. Do it. 3. Get paid. Done!" — numbered hero and a rubber-stamp DONE */
.public .hero h1 .h1-n { color: var(--wb-brass); }
.public .done-stamp { display: inline-block; margin-left: .35em; padding: .08em .3em .02em; font-size: .42em; line-height: 1; letter-spacing: .06em; color: var(--wb-red); border: .09em solid var(--wb-red); border-radius: .12em; transform: rotate(-9deg); vertical-align: middle; margin-top: .2em; opacity: .95; animation: wb-stamp .45s cubic-bezier(.2, 1.6, .4, 1) .6s both; }
@keyframes wb-stamp { from { transform: rotate(-9deg) scale(2.2); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .public .done-stamp { animation: none; } }
.public .section-title .hl-done { color: var(--wb-red); }
.public .steps-done .step-n { font-size: 3.6rem; }
.public .steps-done .step-done { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--wb-slate); border-color: var(--wb-slate); }
.public .steps-done .step-done p { color: var(--wb-on-dark-muted); margin-top: 14px; }
.public .done-big { display: inline-block; font-family: var(--display); text-transform: uppercase; font-size: 3.4rem; line-height: 1; letter-spacing: .04em; color: var(--wb-red); border: 5px solid var(--wb-red); border-radius: 6px; padding: 6px 16px 2px; transform: rotate(-7deg); }
@media (max-width: 600px) { .public .done-big { font-size: 2.8rem; } }