/* Additions to site.css (the Figma port), kept apart so that file stays a
   clean diff against design-reference/. Nothing here restyles a Figma
   component; it covers what the mockup does not have:
     - content that stays readable with JavaScript off,
     - the honeypot, consent, phone-use and status lines the forms must keep,
     - the agent-of-payee disclosure, which may not be shrunk,
     - the body copy of the five pages Figma did not design. */

/* ---- No-JS safety ------------------------------------------------------- */
/* site.js adds .reveal (which starts at opacity 0) only once it runs, so with
   JavaScript off nothing is ever hidden. Between first paint and site.js, the
   inline head script's .js class keeps the elements from flashing in and then
   jumping back out; it removes itself if site.js never arrives. */
.js [data-reveal]:not(.reveal) {
  opacity: 0;
}

/* A toggle that cannot work is worse than none. */
html:not(.js) .language-toggle {
  visibility: hidden;
}

[hidden] {
  display: none !important;
}

/* ---- Forms -------------------------------------------------------------- */
.hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent,
.hint {
  margin-top: 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
}

.waitlist .consent {
  color: #e4d9d0;
}

.store-form .consent,
.hint {
  color: var(--color-n600);
}

.hint {
  margin-top: 0.6rem;
}

.store-form .consent {
  grid-column: 1 / -1;
  margin-top: 0;
}

.form-success a {
  color: inherit;
  font-weight: 710;
}

.form-success + .form-success {
  margin-top: 0.75rem;
}

/* ---- Store teaser photograph ------------------------------------------- */
/* PO 2026-10-19: the store owner photo replaces the mark in .owner-mark. The
   Figma rule sizes a logo (72% wide, centred on ink); a photograph fills the
   square instead. object-fit keeps the owner centred as the square crops the
   3:2 frame. */
.owner-photo {
  position: relative;
}

.owner-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Footer: legally required lines ------------------------------------- */
/* Agent-of-payee disclosure (CONTEXT §10). Verbatim, and never smaller or
   fainter than the footer text around it. */
.payee {
  max-width: 44ch;
  margin-bottom: 0.5rem;
  color: white;
  font-size: 1rem;
  line-height: 1.5;
}

/* The Chatwoot bubble sits 20px in from the bottom-right corner and is 64px
   across. Between 42rem and the width where the shell's margin clears it, the
   footer's language toggle would sit underneath it at the end of every page. */
@media (min-width: 42rem) and (max-width: 86.49rem) {
  footer {
    padding-bottom: 6.5rem;
  }
}

/* ---- Pages Figma did not design ----------------------------------------- */
/* Vendor terms, blog and 404 keep their content and document structure; they
   take the design's header, footer, type, colour and spacing. Section headings
   inside a document use the design's h3 step — a page of 4.7rem pink h2s is
   not a document anyone can read. */
/* min-height: a short page (the 404) would otherwise put the footer, and its
   language toggle, in the support bubble's corner on first view. */
.doc {
  min-height: calc(100vh - 6rem);
  padding-block: clamp(3rem, 7vw, 6.5rem);
}

/* The column aligns with the header's left edge, at a readable measure. */
.doc > * {
  max-width: 47.5rem;
}

.doc h1 {
  margin-bottom: 1.5rem;
}

.doc h2 {
  margin: 2.5rem 0 0.8rem;
  color: var(--color-ink);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.doc p,
.doc li {
  color: var(--color-n600);
  font-size: 1rem;
  line-height: 1.55;
}

.doc p {
  margin-bottom: 0.9rem;
}

.doc ul {
  margin: 0 0 0.9rem 1.25rem;
  padding: 0;
}

.doc li {
  margin-bottom: 0.5rem;
}

.doc a:not(.button) {
  color: var(--color-action);
  font-weight: 650;
}

.doc a:not(.button):hover {
  color: var(--color-ink);
}

.doc .lede {
  margin-bottom: 2rem;
}

.doc .draft,
.blog .empty {
  margin-bottom: 2.5rem;
  padding: 1.25rem;
  border-left: 4px solid var(--color-action);
  background: #fffaf5;
}

.doc .draft strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--color-ink);
}

.doc .back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 1.5rem;
}

.doc .button {
  margin-top: 1rem;
  max-width: 22rem;
}

/* Blog: the Soro embed renders into #soro-blog; the notice shows if it never does. */
#soro-blog,
.blog .empty {
  margin-top: 2.5rem;
}

#soro-blog img,
#soro-blog iframe,
#soro-blog table {
  max-width: 100%;
}