:root {
  --c0f-ink: #14140f;
  --c0f-ink-soft: #55554c;
  --c0f-rule: #d8d5cd;
  --c0f-rule-strong: #14140f;
  --c0f-paper: #ffffff;
  --c0f-shade: #f6f5f1;
  --c0f-gold: #5aa9ff;
  --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: -5px 0 calc(clamp(12px, 1.8vw, 20px) - 5px); padding: 13px 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, #5aa9ff);
  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: #2f5a88; }

/* -- 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 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 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, #5aa9ff);
  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, #5aa9ff);
}

.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, #5aa9ff);
}

.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, #5aa9ff);
}
.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 ----------------------------------------------------------------- */

@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;
  }
}

.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 */
}