:root {
  --brand-forest: #1F4A3F;
  --brand-terracotta: #C46A3F;
  --brand-sage: #A7B79F;
  --brand-cream: #FAF7F0;
  --brand-deep-forest: #163D35;
  --brand-warm-cream: #F1EBDD;
  --brand-ink: #18332E;

  --bg: var(--brand-cream);
  --bg-soft: var(--brand-warm-cream);
  --surface: #FFFFFF;
  --surface-raised: #FCFAF5;
  --text: var(--brand-ink);
  --text-muted: #586C65;
  --blue: var(--brand-forest);
  --blue-dark: var(--brand-deep-forest);
  --blue-light: #315D51;
  --border: rgb(31 74 63 / 20%);
  --font-display: "Sofia Pro", "DM Sans", "Avenir Next", Inter, Arial, sans-serif;
  --font-body: "Sofia Pro", Inter, "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html,
body {
  background: var(--brand-cream);
}

.brand img {
  box-shadow: none;
}

/* PRO-139: public marketing chrome uses the approved traced lockup instead of
   rebuilding the identity from a standalone mark plus runtime product text.
   Existing text stays in the DOM for accessibility while the SVG owns the
   visual treatment. */
.site-header > .brand,
.site-footer .brand {
  gap: 0;
}

.site-header > .brand > img,
.site-footer .brand > img {
  display: none;
}

.site-header > .brand > span,
.site-footer .brand > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header > .brand::before,
.site-footer .brand::before {
  content: "";
  display: block;
  aspect-ratio: 900 / 260;
  background: url('/brand/stock-table/logos/stock-table-logo-horizontal-no-tagline.svg') center / contain no-repeat;
}

.site-header > .brand::before {
  width: clamp(220px, 20vw, 240px);
}

.site-footer .brand::before {
  width: 180px;
}

.button-primary,
.skip-link {
  background: var(--brand-forest);
  color: var(--brand-cream);
  box-shadow: 0 8px 24px rgb(31 74 63 / 18%);
}

.button-primary:hover {
  background: var(--brand-deep-forest);
  box-shadow: 0 12px 30px rgb(31 74 63 / 24%);
}

.button-secondary {
  background: rgb(255 255 255 / 72%);
}

/* PRO-134: marketing gets one deliberate brand focal point rather than a
   low-opacity wash behind the entire hero. Required copy and actions remain on
   clean surfaces; Terracotta is punctuation, not an interaction color. */
.hero {
  position: relative;
  isolation: isolate;
}

.hero h1 em {
  color: #9D4D2D;
}

.hero-copy > .eyebrow span {
  background: var(--brand-terracotta);
}

.hero-routine {
  position: relative;
  overflow: hidden;
  padding-top: clamp(14rem, 24vw, 18rem);
  background: rgb(241 235 221 / 94%);
}

.hero-routine::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(12rem, 20vw, 15rem);
  border-bottom: 1px solid rgb(31 74 63 / 16%);
  background:
    linear-gradient(180deg, rgb(250 247 240 / 5%), rgb(241 235 221 / 22%)),
    url('/brand/stock-table/art/stock-table-coastal-watercolor.webp') center 48% / cover no-repeat;
  pointer-events: none;
}

.hero-routine::after {
  content: "";
  position: absolute;
  top: clamp(1.7rem, 3vw, 2.6rem);
  left: 50%;
  width: clamp(132px, 15vw, 158px);
  height: clamp(68px, 7.7vw, 81px);
  transform: translateX(-50%);
  background: url('/brand/stock-table/logos/stock-table-mark.svg') center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgb(24 51 46 / 16%));
  pointer-events: none;
}

.reassurance-card {
  background: rgb(241 235 221 / 90%);
}

.value-strip {
  background: var(--brand-deep-forest);
  color: var(--brand-cream);
}

.value-strip .value-words {
  color: #DCE5D8;
}

.value-strip .value-words i {
  background: var(--brand-terracotta);
}

.benefit-card {
  background: linear-gradient(145deg, rgb(167 183 159 / 13%), rgb(250 247 240 / 0%));
}

.benefit-icon {
  border-color: rgb(196 106 63 / 42%);
  background: rgb(196 106 63 / 10%);
  color: #9D4D2D;
}

.benefit-number {
  color: #66786F;
}

.screen-frame {
  border-color: rgb(31 74 63 / 24%);
  background: var(--brand-deep-forest);
  box-shadow: 0 26px 64px rgb(24 51 46 / 18%);
}

.workflow-section {
  background: var(--brand-forest);
  color: var(--brand-cream);
}

.workflow-section .eyebrow,
.workflow-section .workflow-list,
.workflow-section .workflow-list li {
  color: var(--brand-cream);
  border-color: rgb(250 247 240 / 28%);
}

.workflow-section .eyebrow span {
  background: var(--brand-cream);
}

.workflow-copy h2 em {
  color: var(--brand-sage);
}

.workflow-list > li > span {
  border-color: rgb(250 247 240 / 48%);
}

.reassurance-card {
  border-color: rgb(31 74 63 / 20%);
  background: radial-gradient(circle at 15% 20%, rgb(167 183 159 / 24%), transparent 42%), var(--brand-warm-cream);
  box-shadow: 0 30px 80px rgb(24 51 46 / 14%);
}

.auth-dialog,
.auth-card,
.login-card {
  background: #FFFFFF;
  color: var(--brand-ink);
}


/* PRO-158: public auth/activation dialogs use the light Stock & Table surface.
   Override the legacy dark input treatment from landing.css so form controls,
   readonly fields, and focus states stay visually consistent and accessible. */
.auth-dialog .auth-form input,
.auth-dialog .auth-form textarea {
  border-color: rgb(31 74 63 / 28%);
  background: var(--surface-raised);
  color: var(--brand-ink);
  caret-color: var(--brand-ink);
}

.auth-dialog .auth-form input::placeholder,
.auth-dialog .auth-form textarea::placeholder {
  color: var(--text-muted);
}

.auth-dialog .auth-form input[readonly] {
  background: var(--brand-warm-cream);
  color: var(--text-muted);
}

.auth-dialog .auth-form input:focus,
.auth-dialog .auth-form textarea:focus {
  border-color: var(--brand-forest);
  box-shadow: 0 0 0 3px rgb(31 74 63 / 18%);
}

/* PRO-139: the standalone account page is an entry surface, so give it one
   deliberate lockup and keep the watercolor outside the interactive card. */
body.auth-page {
  position: relative;
  isolation: isolate;
}

body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url('/brand/stock-table/art/stock-table-coastal-watercolor.webp') calc(100% + 110px) 48% / min(60vw, 760px) auto no-repeat;
  opacity: 0.34;
  pointer-events: none;
}

body.auth-page .auth-container {
  position: relative;
  z-index: 1;
}

body.auth-page .auth-logo {
  gap: 0;
}

body.auth-page .auth-logo-icon {
  display: none;
}

body.auth-page .auth-logo h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.auth-page .auth-logo::before {
  content: "";
  display: block;
  width: min(330px, 78vw);
  aspect-ratio: 900 / 300;
  background: url('/brand/stock-table/logos/stock-table-logo-horizontal-dark.svg') center / contain no-repeat;
  filter: drop-shadow(0 12px 28px rgb(0 0 0 / 20%));
}

body.auth-page .auth-logo::after {
  content: none;
}

/* PRO-136: the public account modal gets the complete monochrome lockup rather
   than a tiny mark plus duplicated wordmark. Keep the existing text available
   to assistive technology while the approved SVG owns the visual treatment. */
.brand-dialog {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  gap: 0;
}

/* Center the lockup on the modal itself rather than in the space left over by
   the close control. Symmetric 44px tracks reserve the close target without
   shifting the visual center, and fixed responsive horizontal padding prevents
   text scaling from crowding the lockup at narrow widths. */
.auth-dialog .dialog-topline {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  justify-content: stretch;
  padding-inline: clamp(16px, 5vw, 22px);
}

.auth-dialog .brand-dialog {
  grid-column: 2;
  justify-self: center;
}

.auth-dialog .dialog-close {
  grid-column: 3;
}

.brand-dialog > img {
  display: none;
}

.brand-dialog > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.brand-dialog::before {
  content: "";
  display: block;
  width: clamp(154px, 40vw, 190px);
  aspect-ratio: 560 / 375;
  background: url('/brand/stock-table/logos/stock-table-logo-monochrome.svg') center / contain no-repeat;
}

@media (max-width: 720px) {
  .site-header > .brand::before {
    width: clamp(176px, 48vw, 196px);
  }

  .site-footer .brand::before {
    width: 168px;
  }

  body.auth-page::before {
    display: none;
  }

  .hero-routine {
    padding-top: 12.25rem;
  }

  .hero-routine::before {
    height: 10.5rem;
    background-position: center 44%;
  }

  .hero-routine::after {
    top: 1.75rem;
    width: 128px;
    height: 66px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero-routine {
    background: var(--brand-warm-cream);
  }

  body.auth-page::before {
    display: none;
  }
}