/*
  findmybins.com — the landing page.

  A printed mail-order catalogue. Hairline rules instead of card borders, plates
  instead of screenshots floating on white, ruled tables instead of icon grids,
  and the brand's own object carrying the surface: lid-yellow fields that open
  and close the page, one bin-black panel in the middle. There is no card component
  in this file on purpose — the moment a card appears, the catalogue becomes a
  SaaS page again.

  Two things this build keeps from the app-landing version that replaced it for
  a while: the whole pitch sits above the fold, and everything below it rises in
  on scroll. Both are requirements, not decoration.

  Loaded only by the landing; app routes never reference it.
*/

/* ---------------------------------------------------------------- type ---- */

@font-face {
  font-family: "Bevan";
  src: url("/marketing/fonts/bevan-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/marketing/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Narrow";
  src: url("/marketing/fonts/archivo-narrow-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* -------------------------------------------------------------- tokens ---- */

#fmb {
  /* The committed fields: the tote's lid and the tote itself. Yellow opens
     and closes the page; the black panel sits mid-page. Together they are the
     product photographed at 1:1. */
  --lid: #ffc400;
  --lid-deep: #d99e00;
  --panel: #191713;

  /* The press runs two inks: black and lid yellow. The yellow ink is the
     bright lid itself (owner's call, 2026-08-19) — display sizes only. */
  --gold-ink: #fac100;

  /* Stocks. Cheap uncoated newsprint runs slightly grey-green, not warm cream;
     cream is the aged look and the reflexive one. Kraft stays warm because
     kraft genuinely is. */
  --stock: #e6e7e1;
  --kraft: #d6c9ad;
  --kraft-edge: #bcac8d;

  --ink: #191713;
  --ink-soft: #55504a;
  /* Ink on the lid: black, softened black, and a label olive — never white.
     Ink on the panel: warm paper, softened paper, and the lid itself. */
  --on-lid: #191713;
  --on-lid-soft: #4a4433;
  --on-lid-label: #6b5300;
  --on-panel: #f2efe9;
  --on-panel-soft: #cfc9bd;

  --rule: #c6c8c0;
  --rule-hair: rgba(25, 23, 19, 0.24);

  --colophon-text: #b8b1a6;
  --colophon-link: #ded7c9;

  /* The stock's own fibre. Without this the "kraft and newsprint" is a claim
     the screen never keeps: flat hex fields wearing a catalogue's structure. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --block-gap: clamp(3.25rem, 8vw, 6rem);
  --sheet: 1180px;
}

/* --------------------------------------------------------------- reset ---- */

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

#fmb {
  margin: 0;
  background: var(--stock);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

#fmb p { margin: 0 0 1em; max-width: var(--measure); }
#fmb p:last-child { margin-bottom: 0; }
#fmb h1, #fmb h2, #fmb h3 { margin: 0; font-weight: 400; }
#fmb ul, #fmb ol { margin: 0; padding: 0; list-style: none; }
#fmb figure, #fmb dl, #fmb dd { margin: 0; }
/* `height: auto` is not optional: every image carries width and height
   attributes, and without this the attribute height beats the constrained
   width and the picture is stretched. */
#fmb img { display: block; max-width: 100%; height: auto; }

#fmb h2 + p, #fmb h2 + .lede { margin-top: 0.95rem; }

/* Browser surfaces the design still owns. */
#fmb ::selection { background: var(--lid); color: var(--ink); }
#fmb a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
#fmb :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
#fmb .on-panel :focus-visible { outline-color: var(--lid); }

/* ------------------------------------------------------------ scaffold ---- */

/* The sheet's ruled margin. Every block shares this width, so the two rules
   line up down the whole document and the page reads as one continuous
   printed sheet rather than a stack of bands with different colours. */
#fmb .sheet {
  width: 100%;
  max-width: var(--sheet);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  #fmb .sheet { border-inline: 1px solid rgba(25, 23, 19, 0.13); }
  #fmb .on-lid .sheet { border-inline-color: rgba(25, 23, 19, 0.25); }
  #fmb .on-panel .sheet { border-inline-color: rgba(255, 255, 255, 0.3); }
  #fmb .block--kraft .sheet { border-inline-color: rgba(25, 23, 19, 0.17); }
  #fmb .colophon .sheet { border-inline-color: rgba(222, 215, 201, 0.22); }
}

#fmb .block { padding-block: var(--block-gap); }
#fmb .block--lid { background: var(--lid); color: var(--on-lid); }
#fmb .block--panel { background: var(--panel); color: var(--on-panel); }
#fmb .block--kraft { background: var(--kraft); }

/* Paper, not colour. The grain sits over each field and multiplies into it. */
#fmb .cover, #fmb .block { position: relative; isolation: isolate; }
#fmb .cover::after, #fmb .block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.16;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
#fmb .cover > *, #fmb .block > * { position: relative; z-index: 1; }

/* A printed rule at every block seam, so consecutive blocks on the same stock
   still read as two pages rather than one long field. */
#fmb .block + .block { border-top: 1px solid rgba(25, 23, 19, 0.11); }
#fmb .block--lid + .block, #fmb .block + .block--lid,
#fmb .block--panel + .block, #fmb .block + .block--panel { border-top-color: rgba(25, 23, 19, 0.2); }

/* The catalogue's ruled label. Not an eyebrow: it labels a table or a plate,
   and always sits beneath or beside the thing it names. */
#fmb .label {
  font-family: "Archivo Narrow", ui-sans-serif, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
#fmb .on-lid .label { color: var(--on-lid-label); }
#fmb .on-panel .label { color: var(--lid); }

#fmb h2 {
  font-family: "Bevan", Georgia, serif;
  font-size: clamp(1.55rem, 4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
#fmb .lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--ink-soft); max-width: 54ch; }
#fmb .on-lid .lede { color: var(--on-lid-soft); }
#fmb .on-panel .lede { color: var(--on-panel-soft); }

/* ---------------------------------------------------------------- cover --- */

/* The cover: masthead, the pitch and the action on the left, one plate on the
   right holding a search already answered. */
#fmb .cover {
  background: var(--lid);
  color: var(--on-lid);
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem) clamp(2rem, 4vw, 3rem);
}

#fmb .masthead { text-align: center; }
#fmb .masthead h1 {
  font-family: "Bevan", Georgia, serif;
  font-size: clamp(1.9rem, 8.4vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
#fmb .masthead .strap {
  max-width: none;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  margin-top: clamp(0.5rem, 1.2vw, 0.85rem);
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: clamp(0.58rem, 1.4vw, 0.78rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--on-lid-soft);
}
#fmb .masthead .strap::before, #fmb .masthead .strap::after {
  content: ""; flex: 1; height: 0; border-top: 1px solid rgba(25, 23, 19, 0.4);
}

#fmb .cover-copy { text-align: center; margin-top: clamp(1.5rem, 3.4vw, 2.5rem); }
#fmb .cover-copy h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.05;
  max-width: 20ch;
  margin-inline: auto;
}
#fmb .cover-copy .lede { margin-inline: auto; max-width: 56ch; font-size: clamp(0.98rem, 1.4vw, 1.1rem); }

#fmb .coupon-lines {
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center;
  justify-content: center; margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
}
#fmb .badge { display: inline-block; transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
#fmb .badge:hover { transform: translateY(-2px); }
/* Each vendor's artwork, unmodified. Google bakes mandated clear space into
   its file (646x250 for a visible 564x168), so it is scaled by the visible
   height and the surplus pulled back, or it renders smaller than Apple's. */
#fmb .badge--apple img { height: 46px; width: auto; }
#fmb .badge--play img { height: 68px; width: auto; margin: -11px; }
#fmb .terms-note {
  margin: 0.7rem auto 0;
  font-family: "Archivo Narrow", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-align: center;
}
#fmb .on-lid .terms-note { color: var(--on-lid-soft); }

/* --------------------------------------------------------------- plate ---- */

/* A tipped-in plate: the content sits on a paper mount with a printed caption
   and a plate number, the way a catalogue plate is pasted in. */
#fmb .plate {
  background: var(--stock);
  color: var(--ink);
  padding: clamp(0.6rem, 1.4vw, 0.9rem);
  box-shadow: 0 18px 40px -18px rgba(20, 16, 8, 0.5);
}
#fmb .plate picture, #fmb .plate picture img { width: 100%; }
#fmb .plate .label { color: var(--ink); }
#fmb .plate figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-top: 0.65rem;
  font-family: "Archivo Narrow", sans-serif;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
#fmb .plate .plate-no {
  flex: none; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
}

/* The cover's two columns: the pitch on the left, one plate on the right. */
#fmb .cover-body {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) { #fmb .cover-body { grid-template-columns: 1.02fr 0.98fr; } }
#fmb .cover-copy h2 { font-size: clamp(1.6rem, 3.8vw, 2.6rem); line-height: 1.05; max-width: 16ch; }
#fmb .cover-copy .lede { margin-top: 0.95rem; }
#fmb .cover-body .coupon-lines { justify-content: flex-start; }
#fmb .cover-body .terms-note { text-align: left; margin-inline: 0; }

/* ------------------------------------------------------- label specimen ---- */

/* The printed label at print size, with a QR that genuinely resolves. A drawn
   approximation of a QR block would be a costume; this one scans. */
#fmb .specimen {
  border: 2px solid var(--ink);
  padding: clamp(0.7rem, 1.6vw, 1.05rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#fmb .specimen-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem;
  padding-bottom: 0.55rem; border-bottom: 1px solid var(--rule);
}
#fmb .specimen-brand { font-family: "Bevan", Georgia, serif; font-size: clamp(1rem, 2.2vw, 1.28rem); line-height: 1; letter-spacing: -0.01em; }
#fmb .specimen-head img { width: clamp(78px, 15vw, 118px); height: auto; flex: none; }
#fmb .specimen-no {
  margin: 0.5rem 0 0;
  font-family: "Bevan", Georgia, serif;
  /* Plate scale: the permanent number is the product's identity system, and on
     a real label it is the largest thing printed. */
  font-size: clamp(3.4rem, 12vw, 6rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
}
#fmb .specimen-name { margin: 0.35rem 0 0; font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.24rem); }
#fmb .specimen-meta { margin: 0.2rem 0 0; font-family: "Archivo Narrow", sans-serif; font-size: clamp(0.8rem, 1.5vw, 0.95rem); color: var(--ink-soft); }

/* ------------------------------------------------------- finding slip ----- */

/* A search and its answer, set as a catalogue record rather than a faked
   screenshot, so it never reads as a claim about a UI nobody has seen. */
#fmb .slip { padding: clamp(0.5rem, 1.4vw, 0.9rem); }
#fmb .slip-row { padding-bottom: 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--rule); }
#fmb .slip-row--last { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
#fmb .slip-row .label { display: block; margin-bottom: 0.3rem; }
#fmb .slip-query { margin: 0; font-family: "Bevan", Georgia, serif; font-size: clamp(1.35rem, 3.4vw, 1.9rem); line-height: 1.1; letter-spacing: -0.015em; }
#fmb .slip-found { margin: 0; display: flex; align-items: baseline; gap: 0.85rem; }
#fmb .slip-no { font-family: "Bevan", Georgia, serif; font-size: clamp(2rem, 5vw, 2.9rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--gold-ink); }
#fmb .slip-name { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: clamp(1.02rem, 2.4vw, 1.24rem); line-height: 1.25; }
#fmb .slip-meta { display: block; font-weight: 400; font-size: 0.86rem; color: var(--ink-soft); }
#fmb .slip-where { margin: 0; font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: clamp(1.05rem, 2.6vw, 1.32rem); }
#fmb .slip-where span { color: var(--ink); padding: 0 0.2em; }

/* Two-column bodies: plate on one side, the ruled record or the copy on the
   other, the way a catalogue sets a plate against its description. */
#fmb .mech { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 900px) { #fmb .mech { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 4rem); } }

#fmb .numbering { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 820px) { #fmb .numbering { grid-template-columns: minmax(0, 0.95fr) 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); } }

/* ------------------------------------------------------------ contents ---- */

#fmb .contents { border-top: 3px double var(--rule-hair); }
#fmb .contents-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--rule);
}
/* Two columns, not three: the app records an item as a name, and "Quantity not
   specified" is its normal state, so a quantity column would invent a field
   the product does not fill. */
#fmb .contents-row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 0.9rem; padding: 0.72rem 0; border-bottom: 1px solid var(--rule);
}
#fmb .contents-row .what { font-size: 1.02rem; }
#fmb .contents-row .conf {
  font-family: "Archivo Narrow", sans-serif; font-size: 0.74rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
#fmb .contents-foot { padding-top: 0.9rem; font-family: "Archivo Narrow", sans-serif; font-size: 0.88rem; color: var(--ink-soft); }
#fmb .contents-foot strong { color: var(--ink); font-weight: 700; }

/* ----------------------------------------------------------- ruled rows --- */

#fmb .rows { display: grid; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
#fmb .row {
  display: grid; gap: 0.4rem 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  border-top: 1px solid var(--rule);
}
#fmb .row:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 780px) { #fmb .row { grid-template-columns: 15rem 1fr; align-items: baseline; } }
#fmb .row h3 { font-family: "Bevan", Georgia, serif; font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.12; }
#fmb .row p { color: var(--ink-soft); margin: 0; }
#fmb .on-panel .row { border-top-color: rgba(255, 255, 255, 0.34); }
#fmb .on-panel .row:last-child { border-bottom-color: rgba(255, 255, 255, 0.34); }
#fmb .on-panel .row p { color: var(--on-panel-soft); }

/* ------------------------------------------------------ specifications ---- */

#fmb .spec { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 3px double var(--rule-hair); }
#fmb .spec-row { display: grid; gap: 0.3rem 2rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { #fmb .spec-row { grid-template-columns: 17rem 1fr; align-items: baseline; } }
#fmb .spec-row dt { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.03em; }
#fmb .spec-row dd { margin: 0; color: var(--ink-soft); }

/* ----------------------------------------------------------- order form --- */

#fmb .order { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
#fmb .order-table { width: 100%; border-collapse: collapse; text-align: left; }
#fmb .order-table th, #fmb .order-table td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--kraft-edge); vertical-align: baseline; }
#fmb .order-table th:first-child, #fmb .order-table td:first-child { padding-left: 0; }
#fmb .order-table thead th {
  border-bottom: 3px double var(--rule-hair);
  font-family: "Bevan", Georgia, serif; font-weight: 400; font-size: clamp(1rem, 2.2vw, 1.3rem);
}
#fmb .order-table thead th .price {
  display: block; font-family: "Archivo Narrow", sans-serif; font-weight: 700;
  font-size: 0.86rem; letter-spacing: 0.04em; color: var(--ink); margin-top: 0.2rem;
}
#fmb .order-table tbody th { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 0.94rem; }
#fmb .order-table td { font-family: "Archivo Narrow", sans-serif; font-size: 0.98rem; }
#fmb .order-note { margin-top: 1.1rem; font-family: "Archivo Narrow", sans-serif; font-size: 0.84rem; line-height: 1.55; color: var(--ink-soft); max-width: 78ch; }

/* ------------------------------------------------------------ guarantee --- */

#fmb .guarantee {
  border: 3px double var(--ink);
  padding: clamp(1.5rem, 3.6vw, 2.5rem);
  max-width: 62rem; margin-inline: auto; text-align: center;
}
/* The guarantee is set in the press's own black. Black and lid yellow are the
   whole press run; a bordered promise needs no second color to be believed. */
#fmb .guarantee h2 { color: var(--ink); }
#fmb .guarantee p { margin-inline: auto; max-width: 58ch; }
/* Centred is right for a printed guarantee at three lines and wrong at eight,
   which is what this becomes on a phone. */
@media (max-width: 700px) {
  #fmb .guarantee { text-align: left; }
  #fmb .guarantee h2 { text-align: center; }
}

/* ------------------------------------------------------------ questions --- */

#fmb .qa { margin-top: clamp(1.5rem, 3vw, 2.25rem); columns: 1; column-gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 820px) { #fmb .qa { columns: 2; } }
#fmb .qa-item { break-inside: avoid; padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--rule); }
#fmb .qa-item h3 { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: 1.02rem; margin-bottom: 0.3rem; }
#fmb .qa-item p { color: var(--ink-soft); margin: 0; max-width: none; }

/* ---------------------------------------------------------- cut coupon ---- */

#fmb .cut { border: 0; border-top: 2px dashed rgba(25, 23, 19, 0.45); margin: 0; }
#fmb .closing { text-align: center; }
#fmb .closing h2 { font-size: clamp(1.6rem, 4.6vw, 2.8rem); text-transform: uppercase; letter-spacing: -0.01em; }
#fmb .closing .lede { margin: 0.9rem auto 0; }

/* ------------------------------------------------------------- colophon --- */

#fmb .colophon {
  background: var(--ink); color: var(--colophon-text);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  font-family: "Archivo Narrow", sans-serif; font-size: 0.9rem;
}
#fmb .colophon-inner { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
#fmb .colophon nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-left: auto; }
#fmb .colophon a { color: var(--colophon-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--colophon-link) 40%, transparent); }
#fmb .colophon a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- misc ---- */

#fmb .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scroll motion. One grammar: rise and fade, staggered within a group by --i,
   on an exponential ease-out. Content is visible by default and only hidden
   once `.js` is on, so a script that fails to run can never hide the page.

   The selector is compound — `#fmb.js`, no space. `.js` is set on #fmb itself,
   so the descendant form matches nothing and silently disables every
   animation while leaving the page looking correct. */
#fmb.js .reveal { opacity: 0; transform: translateY(18px); }
#fmb.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 90ms),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  #fmb.js .reveal { opacity: 1; transform: none; transition: none; }
  #fmb .badge { transition: none; }
  #fmb .badge:hover { transform: none; }
}