/*
 * SquareDrop landing page.
 *
 * Colours and type are the campaign's own tokens (SquareDropMedia/src/brand/tokens.ts
 * and fonts.ts), so the page someone lands on looks like the video they came from.
 *
 * ⚠️ `--rust` is deliberately absent. In the campaign that colour is reserved for money
 * a competitor takes, and reusing it here for a border or an error state would quietly
 * break a system that depends on one colour meaning exactly one thing.
 */

:root {
  --base: #0a1f44;
  --depth: #061530;
  --amber: #f5a623;
  --mint: #3ddc97;
  --text: #f7f5f0;
  --muted: rgba(247, 245, 240, 0.62);
  --line: rgba(247, 245, 240, 0.14);

  --headline: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Figures use a monospace so numbers read as a ledger rather than as marketing. */
  --figure: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 68rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--depth);
  color: var(--text);
  font-family: var(--headline);
  font-weight: 500;
  line-height: 1.6;
  font-size: 1.0625rem;
}

a {
  color: var(--amber);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ---------- header ---------- */

.masthead {
  padding-block: 1.75rem;
}

.wordmark {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text);
}

.wordmark span {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 0.2rem;
}

.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.navlink {
  font-weight: 700;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* ---------- hero ---------- */

.hero {
  background: var(--base);
  border-block: 1px solid var(--line);
  padding-block: clamp(3rem, 9vw, 5.5rem);
}

.eyebrow {
  font-family: var(--figure);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 1.25rem;
}

h1 {
  font-size: clamp(2.125rem, 6.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}

.lede {
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 2.25rem;
}

.lede strong {
  color: var(--text);
  font-weight: 700;
}

/* ---------- signup ---------- */

.signup {
  max-width: 30rem;
}

/* The free-first-delivery hook, lifted out of the fineprint so a scan-arrival sees
   the reward right at the form. Amber on the offer itself; §10-approved wording with
   the "up to $3.50" cap kept. */
.incentive {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.incentive strong {
  color: var(--amber);
}

.field {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

input[type="email"],
input[type="text"],
input[type="number"] {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(247, 245, 240, 0.06);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

input::placeholder {
  color: rgba(247, 245, 240, 0.4);
}

button {
  padding: 0.85rem 1.5rem;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--depth);
  background: var(--amber);
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fineprint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.85rem 0 0;
}

.formnote {
  margin: 0.85rem 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  min-height: 1.4em;
}
.formnote.ok {
  color: var(--mint);
}
.formnote.err {
  color: var(--amber);
}

/* ---------- sections ---------- */

section {
  padding-block: clamp(3rem, 8vw, 4.75rem);
}

h2 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 2.25rem;
  max-width: 22ch;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.figure {
  font-family: var(--figure);
  font-weight: 700;
  font-size: 1.875rem;
  color: var(--mint);
  display: block;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}

/* ---------- split CTA ---------- */

.split {
  background: var(--base);
  border-block: 1px solid var(--line);
}

.split .cards {
  gap: 1.25rem;
}

.split .card {
  background: transparent;
}

/* ---------- footer ---------- */

footer {
  padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.footlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
  padding: 0;
  list-style: none;
}

.legalese {
  margin: 0;
  max-width: 60ch;
}

/* ---------- legal documents ---------- */

.doc {
  padding-block: 2.5rem 4rem;
  max-width: 46rem;
}

.doc h1 {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  max-width: none;
}

.doc h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 0.75rem;
  max-width: none;
}

.doc p,
.doc li {
  color: rgba(247, 245, 240, 0.86);
}

.doc ul {
  padding-left: 1.25rem;
}

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

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
}

.doc th,
.doc td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.doc th {
  font-weight: 800;
  white-space: nowrap;
}

.meta {
  font-family: var(--figure);
  font-size: 0.8125rem;
  color: var(--muted);
  border-left: 2px solid var(--amber);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

.meta strong {
  color: var(--text);
}

/* ---------- masthead nav ---------- */

.mastnav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.wordmark-link {
  display: block;
  color: var(--text);
}
.wordmark-link:hover,
.wordmark-link:focus-visible {
  text-decoration: none;
  color: var(--amber);
}

/* A <details> dropdown. The panel is absolutely positioned so opening it does not
   shove the hero down the page, which is what a flow-positioned panel would do. */
.menu {
  position: relative;
}

.menu summary {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--amber);
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
}
/* Safari draws its own disclosure triangle through ::-webkit-details-marker. */
.menu summary::-webkit-details-marker {
  display: none;
}
.menu summary::after {
  content: "▾";
  margin-left: 0.35rem;
  font-size: 0.8em;
}
.menu[open] summary::after {
  content: "▴";
}
.menu summary:hover {
  text-decoration: underline;
}

.menupanel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.65rem);
  z-index: 10;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}

.menupanel a {
  padding: 0.6rem 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
}
.menupanel a:hover,
.menupanel a:focus-visible {
  text-decoration: none;
  color: var(--depth);
  background: var(--amber);
}

/* Once .masthead-row wraps, the nav is left-aligned and a right-anchored panel hangs
   off the left edge of the screen. Anchor it to the left below that width and cap it
   to the viewport. Sales opens this on a phone standing in someone's restaurant, so
   the narrow case is the one that has to be right. */
@media (max-width: 34rem) {
  .menupanel {
    left: 0;
    right: auto;
    min-width: min(14rem, calc(100vw - 3rem));
  }
}

/* ---------- savings calculator ---------- */

/* Shorter than the home hero: the calculator is the point of this page and should be
   near the top on a laptop without scrolling. */
.hero-tight {
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
}

.calcwrap {
  max-width: 54rem;
}

.calcgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem;
}

.calcfield label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

/* The $ and % live on the wrapper as pseudo-elements rather than inside the field, so
   they cannot end up in the submitted value or fight with the number spinner. */
.inputwrap {
  position: relative;
  display: flex;
}
.inputwrap::before,
.inputwrap::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--figure);
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}
.inputwrap[data-prefix]::before {
  content: attr(data-prefix);
  left: 1rem;
}
.inputwrap[data-prefix] input {
  padding-left: 2rem;
}
.inputwrap[data-suffix]::after {
  content: attr(data-suffix);
  right: 1rem;
}
.inputwrap[data-suffix] input {
  padding-right: 2.25rem;
}

.calcfield input {
  width: 100%;
  font-family: var(--figure);
  font-weight: 700;
  font-size: 1.25rem;
}

.hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.calcnote {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 1.25rem 0 0;
  min-height: 1.4em;
}

.result {
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--base);
  border-left-width: 4px;
}
/* Mint when we are the cheaper option, amber when we are not. Amber is the honest
   answer, not an error state, and it is deliberately as prominent as the good one. */
.result.win {
  border-left-color: var(--mint);
}
.result.hold,
.result.close {
  border-left-color: var(--amber);
}

.resultlabel {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.35rem;
}

.resultfigure {
  font-family: var(--figure);
  font-weight: 700;
  font-size: clamp(1.875rem, 5.5vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
}
.result.win .resultfigure {
  color: var(--mint);
}
.result.hold .resultfigure,
.result.close .resultfigure {
  color: var(--amber);
}

.resultbody {
  margin: 0;
  color: var(--text);
  max-width: 58ch;
}

.breakdown {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  /* 10rem, not 11: at 11 the four figures fit three to a row on a laptop and orphan
     the fourth on its own line. */
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem 1.5rem;
}

.bdlabel {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.bdvalue {
  display: block;
  font-family: var(--figure);
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 0.2rem;
}

.resultfine {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.capture {
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px dashed var(--line);
  border-radius: 0.75rem;
}

.capture h2 {
  margin-top: 0;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
}

.capture p {
  color: var(--muted);
  max-width: 54ch;
}

.partnerform {
  margin-top: 1.25rem;
}

.partnerform .field + .field {
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}