/*
  officeHours — homepage and privacy composition overrides, "Workspace" direction.
  Builds on base.css / layout.css / components.css / demo.css (all token-
  driven) and css/theme-deez.css. Reskins the shared component vocabulary
  into deezbills-style rounded cards with soft shadow; adds the new
  header, footer and "Proudly Canadian" mark. Loaded by index.html and privacy.html.
*/

::selection { background: var(--color-accent-tint); color: var(--color-accent-hover); }

body { background: var(--color-bg); }

a { text-decoration: none; }
a.inline-link { text-decoration: underline; text-underline-offset: 0.15em; }

/* ============ Section rhythm: air and tone, not hairlines ============ */

.section { border-top: none; }
.section:nth-of-type(even) { background: var(--color-surface-sunken); }
.section-head { max-width: 42rem; }

/* ============ Header ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--color-rule);
  background: rgba(253, 250, 246, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.site-header__bar {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.wordmark { letter-spacing: -0.02em; }

.nav-tabs a {
  border-radius: var(--radius-pill);
  border-bottom: none;
  padding: var(--space-2) var(--space-4);
}

.nav-tabs a:hover,
.nav-tabs a:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-sunken);
  border-bottom-color: transparent;
}

.nav-mobile summary {
  border-radius: var(--radius-pill);
  border-color: var(--color-rule-strong);
  background: var(--color-surface);
}

.nav-mobile__panel {
  border-radius: var(--radius-card);
  border-color: var(--color-rule-strong);
}

/* ============ Buttons: pill-shaped, near-black primary ============ */

.btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-accent);
}

.btn-secondary {
  border-color: var(--color-rule-strong);
  background: var(--color-surface);
}

.btn-secondary:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-ink-muted);
}

.link-arrow { color: var(--color-accent); }
.link-arrow:hover { color: var(--color-accent-hover); }

/* ============ Hero ============ */

.hero { padding-top: var(--space-8); }
.hero-grid { align-items: start; }
/* An explicit track below the split point: an implicit auto track would size
   to the demo card's max-content and push the hero past the viewport. */
@media (max-width: 59.99rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 1.875rem;
  padding: 0 var(--space-4) 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
}

/* Static on purpose: "in development" is a state, not live data, so it does
   not earn a pulse. */
.hero-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

.hero h1 { letter-spacing: -0.02em; }
.hero h1 em { color: var(--color-accent-bright); font-style: normal; }
.hero-intro { font-size: var(--text-xl); line-height: var(--leading-snug); }

.hero-actions .time-slot { padding: var(--space-3) var(--space-6); }

/* Ledger time-slot restyled as the pill CTA pair */
.time-slot {
  border-radius: var(--radius-pill);
  border-color: var(--color-rule-strong);
  background: var(--color-surface);
}

.time-slot__label { font-family: var(--font-sans); font-weight: var(--weight-semibold); }
.time-slot__time { font-family: var(--font-sans); }

.time-slot--filled {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.time-slot--filled:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.time-slot--open:hover { background: var(--color-surface-sunken); }

/* Receipt demo card chrome lives in demo.css (index.html-only stylesheet, so no
   base/deez split is needed there). */

/* ============ Cards: problem, features, steps, pricing, FAQ ============ */

/* Problem: heading block, then the four cards in one row */
.problem-list.entry-list { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.problem-list .entry {
  grid-template-columns: minmax(0, 1fr);
  border-top: none;
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.problem-list .entry:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.problem-list .entry__title { font-size: 1.125rem; letter-spacing: -0.01em; text-wrap: balance; }

/* How it works: four rule-topped columns, not cards; step 1 carries the accent */
.workflow-list .entry,
.workflow-list .entry:first-child {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: 1.375rem 0 0;
  border-top: 2px solid var(--color-rule-strong);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.workflow-list .entry:first-child { border-top-color: var(--color-accent-bright); }
.workflow-list .entry__num {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-ink-muted);
  padding-top: 0;
}
.workflow-list .entry:first-child .entry__num { color: var(--color-accent-bright); }
.workflow-list .entry__title { font-size: 1.1875rem; letter-spacing: -0.01em; }

/* Features: a hairline-ruled definition list */
.feature-list { display: grid; gap: 0; }
.feature-list > div,
.feature-list > div:first-child {
  padding: 1.375rem 0;
  border-top: 1px solid var(--color-rule);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.feature-list > div:last-child { padding-bottom: 1.375rem; border-bottom: 1px solid var(--color-rule); }
.feature-list dt { font-family: var(--font-serif); font-size: 1.0625rem; font-weight: var(--weight-semibold); }

.pricing-grid { gap: var(--space-6); }
.price-tier {
  border-top: none;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.price-tier--group {
  box-shadow: var(--shadow-md), inset 0 0 0 2px var(--color-accent-bright);
}
.price-tier__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.price-tier__tag {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 0.71875rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.price { font-family: var(--font-serif); }
.pricing-note { border-top-color: var(--color-rule); }

.billing-toggle {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  display: inline-flex;
  gap: 0;
}
.resource-filter {
  border-radius: var(--radius-pill);
  border-bottom: none;
  font-family: var(--font-sans);
  min-height: 40px;
}
.resource-filter[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-ink);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* Waitlist form as a single card */
#waitlist {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
#waitlist .form { margin-top: var(--space-5); }
.form-status { border-radius: var(--radius-control); }

/* Choices as bordered pill chips; the native radio stays inside for a11y */
#waitlist .radio-group { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
#waitlist .radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0.875rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: 0.875rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
#waitlist .radio-option:hover { background: var(--color-surface-sunken); }
#waitlist .radio-option:has(input:checked) { border-color: var(--color-accent-bright); background: var(--color-accent-tint); }

/* Disabled submit: warm sand, not a dimmed near-black turning cool grey */
#waitlist .btn:disabled,
#waitlist .btn[aria-disabled="true"] {
  opacity: 1;
  background: var(--color-rule-strong);
  border-color: var(--color-rule-strong);
  color: var(--color-on-accent);
  box-shadow: none;
}
.form-field input[type="text"],
.form-field input[type="email"] { border-radius: var(--radius-control); background: var(--color-bg); }
.form-field input:focus-visible { border-color: var(--color-accent-bright); }
.control-box { border-color: var(--color-ink-faint); background: var(--color-bg); }
.control-box::after { color: var(--color-accent-bright); }
.radio-option input:focus-visible + .control-box,
.checkbox-option input:focus-visible + .control-box { outline-color: var(--color-focus-ring); }

.about-copy { font-size: var(--text-lg); }
.founder-signature { font-family: var(--font-serif); font-style: normal; font-weight: var(--weight-semibold); color: var(--color-ink-muted); }

/* FAQ stays an accordion; the drawn plus becomes a bordered chip that rotates
   into a cross and fills with the accent color when open. */
.faq-item { border-top-color: var(--color-rule); }
.faq-toggle {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-rule-strong);
  transition: transform var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}
.faq-toggle::before,
.faq-toggle::after {
  width: 0.65em;
  height: 2px;
  background: var(--color-accent-bright);
  transition: background-color var(--transition-base);
}
.faq-toggle::after { width: 2px; height: 0.65em; }
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
}
.faq-item[open] .faq-toggle::before,
.faq-item[open] .faq-toggle::after { background: var(--color-on-accent); }
/* Cancel the base system's scale-to-minus transform: this world rotates the
   whole chip 45° into a cross instead of collapsing the vertical bar. */
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%); }

/* ============ Footer ============ */

.site-footer {
  border-top: 1px solid var(--color-rule);
  background: var(--color-surface-sunken);
  padding-top: var(--space-8);
}

.site-footer__top { border-bottom-color: var(--color-rule-strong); }
.site-footer nav a:hover { color: var(--color-accent); }

.social-row a {
  border-radius: var(--radius-pill);
  border-color: var(--color-rule-strong);
  background: var(--color-surface);
}
.social-row a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* One rule above the legal block (from .site-footer__top), one below it */
.site-footer__legal { max-width: none; }

.site-footer__bottom {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-5);
  align-items: center;
}
.site-footer__bottom p { margin: 0; font-size: var(--text-xs); line-height: 1.5; }

.proudly-canadian {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.proudly-canadian svg {
  height: 0.7rem;
  width: auto;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(32, 24, 18, 0.12);
  flex-shrink: 0;
}

@media (min-width: 40rem) {
  .site-footer__bottom { flex-wrap: nowrap; justify-content: space-between; }
}

@media (min-width: 60rem) {
  .hero { padding-block: var(--space-9) var(--space-8); }
}

/* Native disclosure keeps signup accessible with and without scripts. */
.waitlist-disclosure { align-self: start; scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
.waitlist-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none; min-height: 44px; }
.waitlist-disclosure > summary::-webkit-details-marker { display: none; }
.waitlist-disclosure > summary h3 { margin: 0; }
.waitlist-toggle { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.waitlist-toggle::before, .waitlist-toggle::after { content: ""; position: absolute; background: var(--color-accent); width: 14px; height: 2px; top: 11px; left: 5px; }
.waitlist-toggle::after { transform: rotate(90deg); }
.waitlist-disclosure[open] .waitlist-toggle::after { transform: rotate(0); }
.form-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-status--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
#waitlist .btn:disabled { color: var(--color-ink-muted); }
.form-field input { caret-color: var(--color-accent); }

/* Let narrow screens and enlarged text reflow instead of widening the page. */
body { overflow-wrap: anywhere; }
.site-header__bar { flex-wrap: wrap; }
.site-header nav { min-width: 0; max-width: 100%; }
.problem-list.entry-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.pricing-grid { grid-template-columns: minmax(0, 1fr); }
.price-tier, .price-tier > *, .billing-toggle { min-width: 0; max-width: 100%; }
.price-tier__head { flex-wrap: wrap; }
.price-tier__tag, .price-unit { white-space: normal; }
#waitlist { scroll-margin-top: calc(var(--header-height) + var(--space-5)); }
#waitlist .radio-option { max-width: 100%; }
@media (max-width: 39.99rem) {
  .problem-list .entry, .price-tier, #waitlist { padding: clamp(16px, 4vw, 32px); }
  .hero-actions .time-slot, .btn { max-width: 100%; padding-inline: clamp(16px, 4vw, 32px); }
}
@media (min-width: 40rem) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}