/* Workeey public site pages — the shop window (owner 2026-08-06, Jobber-modeled).
   Real static HTML: what the crawler indexes IS what the visitor sees. Brand
   tokens mirror src/styles/app-shell.css — keep them in sync by hand. The plan
   card is the LANDING's .plan card (src/styles/landing.css) value-for-value;
   change one, change both. */
:root {
  --bg: #F1EEE6; --surface: #fff; --ink: #221E16; --ink2: #6F695B; --ink3: #A8A192;
  --line: #ECE7DB; --line2: #F4F0E8; --gold: #DAAF37; --gold-hi: #F0CF63; --gold-deep: #B68F22;
  --green: #3E8E63; --red: #C2542E;
  --shadow: 0 1px 2px rgba(34, 30, 22, .04), 0 8px 24px rgba(34, 30, 22, .05);
}
/* Dark twin — theme-init.js stamps html[data-theme=dark] from the app's saved
   preference, same as every app screen. Values = workeeyTheme.js DARK_VARS. */
html[data-theme='dark'] {
  --bg: #16140E; --surface: #211E15; --ink: #F2EEE3; --ink2: #B6AF9E; --ink3: #7E7869;
  --line: #2F2B20; --line2: #262219; --gold-deep: #E7C455;
  --green: #5FB98A; --red: #E48360;
  --shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 8px 24px rgba(0, 0, 0, .4);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: 'Outfit', system-ui, sans-serif; line-height: 1.6; }
a { color: var(--gold-deep); text-decoration: none; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 22px; }

.nav { display: flex; align-items: center; gap: 18px; padding: 18px 0; flex-wrap: wrap; }
/* Brand = the real wordmark asset (the K drawn as a key), never a text lockup. */
.nav .brand { margin-right: auto; display: flex; align-items: center; }
.nav .brand img { display: block; height: 26px; width: auto; }
.nav .brand .drk { display: none; }
html[data-theme='dark'] .nav .brand .lgt { display: none; }
html[data-theme='dark'] .nav .brand .drk { display: block; }
.nav a.item { color: var(--ink2); font-size: 14.5px; font-weight: 600; }
.nav a.item.on { color: var(--ink); }
.nav a.cta { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: #1c1808; font-weight: 700; font-size: 14.5px; padding: 10px 18px; border-radius: 13px; }

.hero { padding: 44px 0 18px; max-width: 640px; }
.hero .kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.12; letter-spacing: -.02em; }
.hero p { font-size: 17px; color: var(--ink2); margin: 16px 0 22px; }
.cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
a.big-cta { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: #1c1808; font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 15px; display: inline-block; }
.cta-note { font-size: 13px; color: var(--ink3); }

.sec { display: flex; gap: 36px; align-items: center; padding: 38px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sec:first-of-type { border-top: 0; }
.sec .txt { flex: 1 1 320px; min-width: 280px; }
.sec h2 { font-size: 24px; letter-spacing: -.01em; margin-bottom: 10px; }
.sec p { color: var(--ink2); font-size: 15.5px; margin-bottom: 12px; }
.sec ul { list-style: none; }
.sec li { font-size: 15px; color: var(--ink2); padding: 5px 0 5px 24px; position: relative; }
.sec li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 99px; background: var(--gold); }
.sec li b { color: var(--ink); }

.phone { flex: 0 0 auto; width: 264px; margin: 0 auto; }
.phone img { display: block; width: 100%; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(20, 16, 8, .16); }

/* The landing's plan card, verbatim (landing.css .plan / .plan.feat / .badge). */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; padding: 26px 0 8px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 17px; box-shadow: var(--shadow); }
.plan.hot { border: 1.5px solid var(--gold); box-shadow: 0 10px 30px rgba(218, 175, 55, .18); }
.plan .name { font-weight: 700; font-size: 16px; }
.plan .price { font-size: 25px; font-weight: 700; letter-spacing: -.5px; margin: 8px 0 2px; }
.plan .price small { font-size: 12px; font-weight: 500; color: var(--ink2); }
.plan .tag { font-size: 13px; color: var(--ink2); margin-bottom: 2px; }
.plan ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.plan li { font-size: 12.5px; color: var(--ink2); display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { flex: none; margin-top: 1px; color: var(--green); }
.plan .off { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1c1808; background: linear-gradient(135deg, var(--gold-hi), var(--gold)); border-radius: 20px; padding: 3px 9px; margin-left: 8px; vertical-align: 2px; }
.plan .soon { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink2); background: var(--line2); border-radius: 20px; padding: 3px 9px; margin-left: 8px; vertical-align: 2px; }

.faq { padding: 12px 0 8px; max-width: 680px; }
.faq h3 { font-size: 16px; margin: 18px 0 4px; }
.faq p { font-size: 14.5px; color: var(--ink2); }

.foot { border-top: 1px solid var(--line); margin-top: 44px; padding: 22px 0 44px; font-size: 13.5px; color: var(--ink2); display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--ink2); }