/* Marque & Heir - THE FORM PAPER.
 *
 * His ruling, 2026-08-30: a customer fills out "a proper white document that
 * actually looks nice and does not have jargon", with "Marque and Heir at the
 * top, nice logo, white background", and the gigantic unstyled check boxes die.
 *
 * So: the site around the form stays the black ground, and the form itself is a
 * white sheet of Letter proportions with the name set at its head.
 * ONE STACK, AND IT IS THE SANS. His ruling addendum of 2026-08-30 ~04:0x -
 * "LOSE IT ON THE WHOLE FUCKING WEBSITE. I SAID IT A LONG TIME AGO" - kills the
 * serif display face everywhere: no page, no heading, no total, no document.
 * An earlier cut of this sheet set the reading copy in a serif face, matching what
 * the invoice and signed-terms sheets do; that ruling landed at 03:51 while
 * this was being built, and it wins. Everything here is Arial now, and the
 * readable floor rides with it: body 16px, no label below 13px.
 *
 * WHY ITS OWN PREFIX. Every class here is `c0f-`. The checkout sheet's `cw-`
 * set belongs to another seat and was still being written while this was cut;
 * a shared class is a second door into a file neither seat owns alone. Nothing
 * in here matches a selector in fullstyle.css, store.css, checkout.css or
 * document-paper.css - measured, not assumed, and the count is in the receipt.
 *
 * WHY NO INLINE STYLE BLOCK ANYWHERE. An inline block shadows the shared sheet
 * and the page then styles itself out of the law. Everything visual lives here.
 *
 * Every custom property below carries a real fallback at every use site. An
 * empty var() fallback paints nothing at all, which is how a "styled" control
 * ends up invisible on the one browser nobody tested.
 */

:root {
  --c0f-ink: #14140f;
  --c0f-ink-soft: #55554c;
  --c0f-rule: #d8d5cd;
  --c0f-rule-strong: #14140f;
  --c0f-paper: #ffffff;
  --c0f-shade: #f6f5f1;
  --c0f-gold: #c9a227;
  --c0f-blue: #2E5AA8;
  --c0f-blue-hot: #3668BE;
  --c0f-red: #9c2b1f;
  --c0f-green: #1f6b3f;
  --c0f-sans: Arial, Helvetica, sans-serif;
}

/* -- the ground the paper sits on ------------------------------------------ */

.c0f-page {
  background: #000;
  padding: clamp(14px, 2.5vw, 34px) clamp(10px, 2vw, 22px) clamp(40px, 6vw, 80px);
  min-height: 100vh;
  box-sizing: border-box;
}

.c0f-back {
  display: inline-block;
  margin: 0 0 clamp(12px, 1.8vw, 20px);
  padding: 8px 2px;
  color: #b9b5a8;
  font-family: var(--c0f-sans, Arial, Helvetica, sans-serif);
  font-size: 0.9rem;
  text-decoration: none;
}
.c0f-back:hover,
.c0f-back:focus-visible { color: #f1f0eb; text-decoration: underline; }

/* -- the sheet ------------------------------------------------------------- */

.c0f-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: 8.5in;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 0.72in) clamp(18px, 3.4vw, 0.7in) clamp(28px, 4vw, 0.6in);
  background: var(--c0f-paper, #ffffff);
  color: var(--c0f-ink, #14140f);
  font-family: var(--c0f-sans, Arial, Helvetica, sans-serif);
  font-size: 1rem;
  line-height: 1.55;
  border-top: 4px solid var(--c0f-gold, #c9a227);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}
.c0f-sheet p { margin: 0 0 0.9em; }
.c0f-sheet a { color: var(--c0f-ink, #14140f); }
.c0f-sheet a:hover,
.c0f-sheet a:focus-visible { color: #6b5410; }

/* -- masthead: the name in type, and two rules ----------------------------- */
/* THE MASTHEAD CARRIES NO IMAGE, and that is measured rather than preferred.
   All four drawn brand assets on the deploy source - mh-monogram-black.svg,
   mh-monogram-gold.svg, mh-wordmark-black.svg, mh-wordmark-gold.svg - are
   malformed XML: a bare "&" inside their own aria-label, at column 92. A
   browser refuses every one of them inside an <img> and paints an empty box,
   which is exactly what this page did before the image came out (the request
   answered 200 with 37,319 bytes and the element reported naturalWidth 0). The
   fifth, favicon.svg, parses - and is a black 64px tile, the one thing a white
   document must not carry.
   So the name is set the way the invoice and the signed terms set theirs, with
   the gold ampersand that is the real monogram's own accent. Nothing on the
   shipped site references those four files, which is why nothing has caught it,
   and a customer's document is not the surface that should find out. */

.c0f-mast { text-align: center; padding-bottom: clamp(16px, 2.4vw, 28px); }

.c0f-mast__name {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The gold italic ampersand is the one piece of the real monogram's drawing
   that carries into type. It keeps the colour and the italic and gives up the
   face, because rule 1 of the 08-30 addendum has no exceptions in it. */
.c0f-amp {
  color: var(--c0f-gold, #c9a227);
  font-style: italic;
  font-weight: 400;
}

.c0f-mast__legal {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--c0f-ink-soft, #55554c);
}

.c0f-mast__line {
  margin: 14px auto 0;
  border: 0;
  border-top: 1px solid var(--c0f-rule-strong, #14140f);
  max-width: 100%;
}
.c0f-mast__line + .c0f-mast__line {
  margin-top: 3px;
  border-top-color: var(--c0f-gold, #c9a227);
}

.c0f-mast__meta {
  margin: 12px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c0f-ink-soft, #55554c);
}

/* -- document heading ------------------------------------------------------ */

.c0f-head { margin: clamp(20px, 3vw, 32px) 0 clamp(16px, 2.4vw, 26px); }
.c0f-head h1 {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 4.2vw, 2.15rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.c0f-head p {
  margin: 0;
  max-width: 62ch;
  font-family: var(--c0f-sans, Arial, Helvetica, sans-serif);
  font-size: 1.02rem;
  color: var(--c0f-ink-soft, #55554c);
}

/* THE READABLE FLOOR, from the same 08-30 addendum: body 16px minimum, and no
   label below 13px. Every size in this sheet is stated in rem against a 16px
   root, so the smallest thing on the page is 0.82rem = 13.1px and there is
   nothing under it. A page he cannot read is a failed page whatever font it is
   set in - that is the addendum's own second sentence. */

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

.c0f-sec { margin: 0 0 clamp(24px, 3vw, 36px); }
.c0f-sec:last-child { margin-bottom: 0; }

.c0f-sec__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c0f-gold, #c9a227);
}

.c0f-sec__title {
  margin: 0 0 4px;
  padding-bottom: 8px;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  font-weight: 700;
  border-bottom: 1px solid var(--c0f-rule, #d8d5cd);
}

.c0f-sec__lede {
  margin: 12px 0 0;
  max-width: 62ch;
  font-family: var(--c0f-sans, Arial, Helvetica, sans-serif);
  color: var(--c0f-ink-soft, #55554c);
}

/* -- fields ---------------------------------------------------------------- */
/* One column by default; pairs only where a phone genuinely has the room. */

.c0f-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}
@media (min-width: 620px) {
  .c0f-fields--pair { grid-template-columns: 1fr 1fr; }
}

.c0f-field { display: block; min-width: 0; }

.c0f-field__label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
}

.c0f-field__note {
  font-weight: 400;
  color: var(--c0f-ink-soft, #55554c);
}

/* 44px is the tap floor. It is set on min-height in CSS pixels, not read back
   off a transformed box - a scaled panel reports a scaled rect and lies about
   whether a thumb can hit the control. */
.c0f-field input,
.c0f-field select,
.c0f-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--c0f-paper, #ffffff);
  color: var(--c0f-ink, #14140f);
  font-family: var(--c0f-sans, Arial, Helvetica, sans-serif);
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid #a9a498;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.c0f-field select {
  /* The chevron is drawn, not fetched: an external image on a form control is
     one more request that can fail and leave a select looking like a text box. */
  background-image: linear-gradient(45deg, transparent 50%, #55554c 50%),
                    linear-gradient(135deg, #55554c 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.c0f-field textarea { min-height: 104px; resize: vertical; }

.c0f-field input:focus-visible,
.c0f-field select:focus-visible,
.c0f-field textarea:focus-visible {
  outline: 2px solid var(--c0f-ink, #14140f);
  outline-offset: 1px;
  border-color: var(--c0f-ink, #14140f);
}

.c0f-field input[aria-invalid="true"],
.c0f-field select[aria-invalid="true"],
.c0f-field textarea[aria-invalid="true"] {
  border-color: var(--c0f-red, #9c2b1f);
  border-width: 2px;
}

.c0f-field__hint {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--c0f-ink-soft, #55554c);
}

.c0f-field__error {
  display: none;
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c0f-red, #9c2b1f);
}
.c0f-field__error.is-shown { display: block; }

/* the bot trap: off the page, out of the tab order, never read aloud */
.c0f-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -- checkboxes and radios: normal size, styled, and never gigantic -------- */
/* 18px box, 44px row. The control is the size a checkbox has always been; the
   ROW carries the tap target, so a thumb has somewhere to land without the box
   growing into the thing he threw out. */

.c0f-choice { margin: 0; padding: 0; border: 0; }
.c0f-choice legend {
  margin: 0 0 4px;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 700;
}
.c0f-choice__list { margin: 8px 0 0; padding: 0; list-style: none; }

.c0f-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 6px 0;
}
.c0f-check + .c0f-check { border-top: 1px solid var(--c0f-shade, #f6f5f1); }

.c0f-check input[type="checkbox"],
.c0f-check input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 4px 0 0;
  padding: 0;
  accent-color: var(--c0f-blue, #2E5AA8);
}

.c0f-check label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.97rem;
  line-height: 1.45;
  cursor: pointer;
}
.c0f-check input:disabled + label { color: var(--c0f-ink-soft, #55554c); cursor: not-allowed; }
.c0f-check__note {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--c0f-ink-soft, #55554c);
}

/* -- a plain fact run: labels over values, never a grid of cards ----------- */

.c0f-facts { display: grid; grid-template-columns: 1fr; gap: 12px 26px; margin: 16px 0 0; }
@media (min-width: 720px) { .c0f-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c0f-facts dt {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c0f-ink-soft, #55554c);
}
.c0f-facts dd { margin: 3px 0 0; }

/* -- a numbered run for "what happens next" -------------------------------- */

.c0f-steps { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: c0fstep; }
.c0f-steps li {
  position: relative;
  margin: 0 0 12px;
  padding: 0 0 12px 34px;
  border-bottom: 1px solid var(--c0f-shade, #f6f5f1);
}
.c0f-steps li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.c0f-steps li::before {
  counter-increment: c0fstep;
  content: counter(c0fstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c0f-paper, #ffffff);
  background: var(--c0f-ink, #14140f);
}

/* -- the shared-folder block ----------------------------------------------- */

.c0f-folder {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: var(--c0f-shade, #f6f5f1);
  border-left: 3px solid var(--c0f-gold, #c9a227);
}
.c0f-folder h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}
.c0f-folder p:last-child { margin-bottom: 0; }

/* -- buttons --------------------------------------------------------------- */
/* ONE primary colour across the whole buying flow, and it is not invented here:
   #2E5AA8 is the BUY NOW blue measured off the rendered store pages. Square
   corners, because the ruled buttons are square. */

.c0f-btn {
  display: inline-block;
  box-sizing: border-box;
  min-height: 48px;
  padding: 13px 22px;
  background: var(--c0f-blue, #2E5AA8);
  color: #fff;
  font-family: var(--c0f-sans, Arial, Helvetica, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--c0f-blue, #2E5AA8);
  border-radius: 0;
  cursor: pointer;
}
.c0f-btn:hover,
.c0f-btn:focus-visible { background: var(--c0f-blue-hot, #3668BE); border-color: var(--c0f-blue-hot, #3668BE); color: #fff; }
.c0f-btn:focus-visible { outline: 2px solid var(--c0f-ink, #14140f); outline-offset: 2px; }
.c0f-btn:disabled,
.c0f-btn[aria-disabled="true"] {
  background: #d7d4cb;
  border-color: #bcb8ad;
  color: #4a463d;
  cursor: not-allowed;
}
.c0f-btn--wide { width: 100%; margin-top: 18px; }

/* The quiet controls stay ink on paper. Only one action on a sheet is loud. */
.c0f-btn--quiet {
  background: transparent;
  color: var(--c0f-ink, #14140f);
  border-color: #a9a498;
}
.c0f-btn--quiet:hover,
.c0f-btn--quiet:focus-visible {
  background: #f0eee7;
  border-color: var(--c0f-ink, #14140f);
  color: var(--c0f-ink, #14140f);
}

.c0f-btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.c0f-after {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--c0f-ink-soft, #55554c);
}

/* -- the sending state and the answer -------------------------------------- */

.c0f-alert {
  margin: 0 0 18px;
  padding: 13px 16px;
  font-size: 0.95rem;
  border-left: 3px solid var(--c0f-red, #9c2b1f);
  background: #fbf1ef;
}
.c0f-alert[hidden] { display: none; }

.c0f-done {
  border-left: 3px solid var(--c0f-green, #1f6b3f);
  background: #f1f7f3;
  padding: 18px 20px;
}
.c0f-done h2 { margin: 0 0 8px; font-size: 1.25rem; }
.c0f-done p:last-child { margin-bottom: 0; }
.c0f-ref {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* -- the foot: who you are dealing with ------------------------------------ */

.c0f-foot {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 18px;
  border-top: 2px solid var(--c0f-rule-strong, #14140f);
  font-size: 0.9rem;
}
.c0f-foot dl { display: grid; grid-template-columns: 1fr; gap: 12px 26px; margin: 0; }
@media (min-width: 720px) { .c0f-foot dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c0f-foot dt {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c0f-ink-soft, #55554c);
}
.c0f-foot dd { margin: 3px 0 0; }

/* -- print ----------------------------------------------------------------- */
/* His ruling 10 asks that documents print clean. A half-filled form printed for
   a customer to finish by hand is a real thing people do, so the sheet prints
   as paper: no black ground, no shadow, no back link, and the fields keep their
   rules so there is somewhere to write. */

@media print {
  .c0f-page { background: #fff; padding: 0; min-height: 0; }
  .c0f-back, .c0f-btn, .c0f-btnrow { display: none; }
  .c0f-sheet {
    max-width: none;
    box-shadow: none;
    border-top-width: 3px;
    padding: 0.4in 0.35in;
  }
  .c0f-field input,
  .c0f-field select,
  .c0f-field textarea { border-color: #14140f; }
  .c0f-steps li, .c0f-check + .c0f-check { border-color: #d8d5cd; }
  a[href]::after { content: ""; }
}

/* -- reduced motion -------------------------------------------------------- */
/* There is no motion on this sheet to reduce. The rule is here so a future hand
   that adds one has somewhere obvious to put its opt-out. */
@media (prefers-reduced-motion: reduce) {
  .c0f-sheet *,
  .c0f-sheet *::before,
  .c0f-sheet *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* -- NW-H5 2026-08-31: the choice rows' hit area ----------------------------
   `.c0f-check` already carries `min-height: 44px`, and that number is right.
   But the row being 44px tall is not the same thing as 44px being CLICKABLE:
   with `align-items: flex-start` the <label> sits at the top of the row and
   measures 290x22, so the bottom half of every choice row is dead space. A
   finger that lands there does nothing.

   Measured at 375px on the mounted pages: the single-line options - "Something
   else" on /quote/ and "We do not have a logo yet" on /onboarding/ - came back
   at an effective target of 290x22. The multi-line options already clear the
   floor because their text wraps, which is why only one row per page showed up
   and why a spot check would have missed it.

   The radio itself stays 18px. BAN-SURFACE-017 is explicit that 44px is the hit
   area and never the visual size, and a checkbox blown up to 44px of paint is
   the thing that ban exists to stop. Padding grows the label's box to 44 and an
   equal negative margin returns the space, so the text does not move. */
.c0f-check label {
  padding: 11px 0;   /* 22px text box + 22px padding = 44px hit area */
  margin: -11px 0;   /* handed straight back to the layout - no visual change */
}