/* Public marketing site. Scoped under .mkt so nothing here can reach the
   application UI — see CLAUDE.md on avoiding global selectors. */

.mkt {
  --honey-gold: #D4920B;
  /* Text-safe gold. #D4920B is 2.46:1 on cream — fine as a fill, fails WCAG AA
     as text. This darker gold clears 4.5:1 while staying in the brand family. */
  --honey-deep: #8A5E00;
  --honey-light: #F5B731;
  --dark-oak: #2C2013;
  --soft-clay: #7A6B57;
  --cream-wax: #FAF6F0;
  --white-flour: #FFFDF9;
  --edge: #E8DCC8;

  margin: 0;
  background: var(--cream-wax);
  color: var(--dark-oak);
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.6;
}

.mkt * { box-sizing: border-box; }

/* --- Header --- */
.mkt .mkt-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 1.5rem;
  background: var(--white-flour);
  border-bottom: 1px solid var(--edge);
  flex-wrap: wrap;
}
/* The mark sits beside the wordmark, matching the app shell's .nav-brand
   (display:flex, align-items:center, gap:0.5rem) so the two headers read as
   the same product. */
.mkt .mkt-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
/* Type moved off .mkt-brand and onto this inner span when the logo was added.
   The colour rule below has to be scoped to .mkt-brand-text's own span, not
   to any span under .mkt-brand: with the wrapper in place, the looser
   selector would tint the whole wordmark honey and lose the two-tone. */
.mkt .mkt-brand-text {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--dark-oak);
}
.mkt .mkt-brand-text span { color: var(--honey-deep); }
.mkt .mkt-nav { display: flex; gap: 1.25rem; }
.mkt .mkt-nav-link {
  color: var(--soft-clay);
  text-decoration: none;
  font-size: 0.95rem;
}
.mkt .mkt-nav-link:hover { color: var(--dark-oak); }
.mkt .mkt-nav-link.active { color: var(--dark-oak); font-weight: 600; }
.mkt .mkt-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.mkt .mkt-login { color: var(--dark-oak); text-decoration: none; font-size: 0.95rem; }
.mkt .mkt-login:hover { text-decoration: underline; }
.mkt .mkt-cta {
  background: var(--honey-gold);
  color: var(--dark-oak);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.mkt .mkt-cta:hover { background: #b87d09; }

/* --- Main --- */
.mkt .mkt-main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.mkt h1, .mkt h2, .mkt h3 {
  font-family: 'Fraunces', Georgia, serif;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
.mkt h1 { font-size: 2.25rem; }
.mkt h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.mkt h3 { font-size: 1.2rem; }
.mkt p { margin: 0 0 1rem; }
.mkt a { color: var(--honey-deep); }

/* --- Hero --- */
.mkt .mkt-hero { text-align: center; padding: 2.5rem 0 2rem; }
.mkt .mkt-hero h1 { font-size: 2.6rem; }
.mkt .mkt-hero h1 em { font-style: normal; color: var(--honey-deep); }
.mkt .mkt-lede {
  font-size: 1.1rem;
  color: var(--soft-clay);
  max-width: 34rem;
  margin: 0 auto 1.5rem;
}
.mkt .mkt-prose .mkt-lede {
  max-width: none;
  margin: 0 0 1.25rem;
  text-align: left;
}
.mkt .mkt-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.mkt .mkt-btn-primary {
  background: var(--honey-gold);
  color: var(--dark-oak);
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.mkt .mkt-btn-secondary {
  border: 1px solid #C9BBA4;
  color: var(--dark-oak);
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
}

/* --- Capability pair rows --- */
.mkt .mkt-pairs { margin: 2rem 0; }

/* Column headers naming the two bakeries. The halves are equal so the two
   logos read as a fair comparison rather than one being subordinate; the pair
   rows below use the same 50/50 split so each logo sits over its own column. */
.mkt .mkt-pair-heads { display: flex; margin-bottom: 0.75rem; }
.mkt .mkt-pair-head {
  flex: 1 1 50%;
  min-width: 0;
  padding: 0 1.1rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mkt .mkt-pair-head img {
  max-width: 100%;
  /* Height-constrained, so this is what sets the rendered width. 9rem puts the
     wider logo at roughly 24rem against a ~28rem column, leaving max-width as a
     safety net rather than the active constraint. */
  max-height: 9rem;
  height: auto;
  width: auto;
}

.mkt .mkt-pair {
  display: flex;
  border: 1px solid var(--edge);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--white-flour);
}
.mkt .mkt-pair-said {
  flex: 1 1 50%;
  min-width: 0;
  background: #F4EFE6;
  padding: 1rem 1.1rem;
  color: var(--soft-clay);
  font-style: italic;
  display: flex;
  align-items: center;
}
.mkt .mkt-pair-does { flex: 1 1 50%; min-width: 0; padding: 1rem 1.1rem; }
.mkt .mkt-pair-does h3 { margin-bottom: 0.25rem; }
.mkt .mkt-pair-does p { margin: 0; color: var(--soft-clay); font-size: 0.95rem; }

/* --- Closing CTA --- */
.mkt .mkt-close {
  background: var(--dark-oak);
  color: var(--cream-wax);
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: 10px;
  margin-top: 2.5rem;
}
.mkt .mkt-close h2 { margin-top: 0; color: var(--cream-wax); }

/* --- Prose pages (about, pricing, legal) --- */
.mkt .mkt-prose { max-width: 42rem; }
.mkt .mkt-prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.mkt .mkt-prose li { margin-bottom: 0.4rem; }
.mkt .mkt-note {
  border-left: 3px solid var(--honey-gold);
  background: var(--white-flour);
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
}

/* --- Footer --- */
.mkt .mkt-footer {
  border-top: 1px solid var(--edge);
  background: var(--white-flour);
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.mkt .mkt-footer-links { display: flex; gap: 1rem; }
.mkt .mkt-footer-links a { color: var(--soft-clay); text-decoration: none; font-size: 0.9rem; }
.mkt .mkt-footer-links a:hover { text-decoration: underline; }
.mkt .mkt-footer-copy { margin: 0 0 0 auto; color: var(--soft-clay); font-size: 0.9rem; }

/* --- Responsive --- */
@media (max-width: 40rem) {
  .mkt .mkt-header { gap: 0.75rem; }
  /* The brand takes the first row on its own so the nav links and Log in can
     share the second. They cannot all share one: brand, three links and Log in
     come to roughly 460px of content, which does not fit a 390px phone, let
     alone a 320px one.

     `.mkt-actions` deliberately has NO override here — it inherits
     `margin-left: auto` from the base rule, which is what pins Log in to the
     right edge of the nav row instead of letting it trail the links. It used
     to be overridden to `margin-left: 0; width: 100%`, giving it a full-width
     row of its own; that was reasonable when it held two controls and is what
     made a single small link wrap. */
  .mkt .mkt-brand { flex: 0 0 100%; }
  .mkt .mkt-hero h1 { font-size: 2rem; }
  .mkt .mkt-pair { flex-direction: column; }
  .mkt .mkt-pair-said,
  .mkt .mkt-pair-does { flex: 1 1 auto; }
  /* The pairs stack into one column here, so column headers no longer label
     anything — showing them would put both logos above the first quote. */
  .mkt .mkt-pair-heads { display: none; }
  .mkt .mkt-footer-copy { margin-left: 0; }
}

/* Access-request form (see src/access_request/views.rs and src/forms/views.rs).
   Every selector here is prefixed .ar- or .form- and scoped to this form; do
   not widen any of them to bare element selectors, which would reach the
   marketing pages that share this stylesheet. */
.ar-form {
    max-width: 34rem;
    margin: 2rem auto 4rem;
    padding: 0 1rem;
}
/* The errand's own name, above the progress bar. Most people arrive here by
   redirect after signing in with an address that has no account, so this is
   the only thing on the page that says what is being asked. */
.ar-heading {
    font-size: 1.9rem;
    margin: 0 0 1.5rem;
}
.ar-title {
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
}
.ar-fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ar-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}
.ar-back {
    color: inherit;
}

.form-progress-track {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.form-progress-fill {
    height: 100%;
    background: var(--meadow-green, #4a7c3f);
    transition: width 200ms ease-out;
}
.form-progress-label {
    font-size: 0.85rem;
    opacity: 0.75;
    margin: 0.4rem 0 0;
}

.form-field {
    border: 0;
    padding: 0;
    margin: 0;
}
.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.6rem;
    font: inherit;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0.35rem;
    background: #fff;
}
.form-error {
    color: #a3241c;
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}
/* A long option label must WRAP BESIDE its box, not underneath it. The
   label is a flex item that can shrink (`min-width: 0` is what actually
   lets it), so its text wraps inside its own column and stays aligned with
   the first line rather than dropping below the checkbox -- which is what
   happens on a phone otherwise. */
.form-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.35rem 0;
    flex-wrap: wrap;
}
.form-option > input[type="checkbox"],
.form-option > input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 0.3rem;
}
.form-option > label {
    flex: 1 1 auto;
    min-width: 0;
}
/* The companion box for a "Something else:" option takes a row of its own,
   which is what the wrap on the container is for. */
.form-option-text {
    flex: 1 0 100%;
}

/* A conditional block is shown and hidden through the `hidden` ATTRIBUTE,
   which `conditional_script` toggles. Never give this class a `display:`
   rule -- any display value beats `[hidden]`'s user-agent `display: none`,
   and the block would stay permanently visible with no error anywhere. */
.form-conditional {
    margin-left: 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(0, 0, 0, 0.12);
}

/* Back sits on the LEFT, Next on the right where the progress bar leads.
   The markup deliberately puts Next FIRST so that a stray Enter (with
   JavaScript off, where the guard in access_request::views cannot run)
   activates it rather than Back; `order` is what puts Back back on the
   left without changing that. See access_request::views::form_page.

   `.mkt .mkt-btn-secondary` (above) already gives Back its border and
   padding -- the shell's body carries `.mkt`. What it does not give is
   what a <button> needs and an <a> did not: the element's own default
   background and font. */
.ar-actions .ar-back {
    order: -1;
    background: transparent;
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
}